/* XFL Factoring - base styles. No inline styles anywhere (CSP style-src 'self'). */

@font-face { font-family: "Jakarta"; font-weight: 400; src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jakarta"; font-weight: 500; src: url("fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jakarta"; font-weight: 600; src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jakarta"; font-weight: 700; src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-display: swap; }

:root {
    --brand: #1e3a6e;
    --brand-dark: #142a52;
    --brand-ring: rgba(30, 58, 110, .16);
    --ink: #0f1f3d;
    --text: #27272a;
    --muted: #71717a;
    --line: #e4e4e7;
    --bg: #f4f5f8;
    --surface: #ffffff;
    --error-bg: #fdecec; --error: #a8211a;
    --info-bg: #eef2f8;  --info: #1e3a6e;
    --ok-bg: #e8f6ee;    --ok: #17663a;
    --env-test: #c2410c;
    --env-local: #7c3aed;
    --env-preprod: #b45309;
    --radius: 10px;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
    margin: 0;
    font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.small { font-size: .85rem; color: var(--muted); }

/* Top bar */
.topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.25rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.05rem; }
.brand img { height: 30px; width: 30px; }
.topbar .lang { margin-left: auto; }
.who { color: var(--muted); font-size: .9rem; }
.logout { margin: 0; }
.logout button {
    font: inherit; font-size: .9rem; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface); color: var(--text);
    padding: .35rem .8rem; border-radius: 8px;
}
.logout button:hover { border-color: var(--brand); color: var(--brand); }

.lang { display: flex; gap: .25rem; }
.lang a { text-decoration: none; color: var(--muted); font-size: .8rem; font-weight: 600; padding: .15rem .45rem; border-radius: 6px; }
.lang a[aria-current="true"] { background: var(--info-bg); color: var(--brand); }

/* Which installation: test and pre-production are marked, quietly but visibly. */
.env-badge {
    font-size: .7rem; font-weight: 600; letter-spacing: .06em;
    color: var(--env-test); background: #fff7ed; border: 1px solid #fed7aa; padding: .1rem .5rem; border-radius: 999px;
}
.env-preprod .env-badge { color: var(--env-preprod); background: #fffbeb; border-color: #fde68a; }
body.app.env-test .topbar { box-shadow: inset 0 3px 0 var(--env-test); }
body.app.env-preprod .topbar { box-shadow: inset 0 3px 0 var(--env-preprod); }

/* Signed-in layout: fixed top bar, the menu stays in place and scrolls on its own */
.topbar { height: 60px; }
.layout { display: flex; align-items: flex-start; }
.sidebar {
    position: sticky; top: 60px; flex-shrink: 0;
    width: 248px; height: calc(100vh - 60px); overflow-y: auto; overscroll-behavior: contain;
    padding: .9rem .75rem 1.5rem; background: var(--surface); border-right: 1px solid var(--line);
    scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: .9rem; }
.nav-title { margin: 0 0 .3rem; padding: 0 .75rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; }
.sidebar a {
    display: flex; align-items: center; gap: .7rem;
    text-decoration: none; color: #3f3f46; font-weight: 500; font-size: .93rem;
    padding: .5rem .75rem; border-radius: 8px; transition: background .12s, color .12s;
}
.sidebar a .icon { flex-shrink: 0; color: #a1a1aa; transition: color .12s; }
.sidebar a:hover { background: var(--bg); color: var(--text); }
.sidebar a:hover .icon { color: var(--muted); }
.sidebar a[aria-current="page"] { background: var(--info-bg); color: var(--brand); font-weight: 600; }
.sidebar a[aria-current="page"] .icon { color: var(--brand); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.content { flex: 1; padding: 2rem 2.25rem; width: 100%; min-width: 0; }
.footer { padding: .7rem 2.25rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -.4rem;
    border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.nav-toggle:hover { background: var(--bg); }
.nav-backdrop { position: fixed; inset: 60px 0 0 0; background: rgba(15, 31, 61, .35); z-index: 15; }
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--surface); padding: .5rem .8rem; border-radius: 8px; }
.skip-link:focus { left: .5rem; }
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .sidebar {
        position: fixed; top: 60px; left: 0; z-index: 20; height: calc(100vh - 60px);
        transform: translateX(-100%); transition: transform .2s ease; box-shadow: none;
    }
    body.nav-open .sidebar { transform: none; box-shadow: 8px 0 30px rgba(15, 31, 61, .15); }
    body.nav-open { overflow: hidden; }
    .content { padding: 1.25rem 1rem; }
    .footer { padding: .7rem 1rem; }
    .who { display: none; }
    .topbar { gap: .6rem; padding: 0 .75rem; }
    .brand span { white-space: nowrap; }
    .logout button { padding: .35rem .6rem; }
}
@media (max-width: 480px) {
    .brand span { display: none; }
    .topbar .env-badge { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .sidebar a { transition: none; } }

/* Sign-in layout: brand panel and form */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; }
.auth-brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 2.5rem 3rem; color: #fff;
    background:
        radial-gradient(1200px 600px at -10% 110%, rgba(120, 150, 210, .28), transparent 60%),
        radial-gradient(900px 500px at 120% -10%, rgba(80, 120, 200, .25), transparent 55%),
        linear-gradient(160deg, #142a52 0%, var(--ink) 100%);
}
.auth-brand::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 40px 40px;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.auth-brand .auth-logo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); border-radius: 11px; }
.auth-claim { max-width: 26rem; }
.auth-claim-title { font-size: 1.85rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .9rem; }
.auth-claim-text { color: rgba(255, 255, 255, .72); margin: 0; font-size: 1rem; }
.auth-legal { color: rgba(255, 255, 255, .5); font-size: .8rem; margin: 0; }
.auth-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: var(--surface); }
.auth-lang { position: absolute; top: 1.25rem; right: 1.5rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: .35rem; }
.auth-card > p:first-of-type { color: var(--muted); }
.auth-logo-small { display: none; margin-bottom: 2rem; color: var(--ink); }
.auth-card .form { margin-top: 1.5rem; }
.auth-card .form label { margin-top: .9rem; }
.auth-card .form input { height: 44px; border-color: var(--line); background: #fafafa; transition: border-color .15s, box-shadow .15s, background .15s; }
.auth-card .form input:focus { background: #fff; }
.auth-card button.primary { height: 46px; margin-top: 1.6rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 31, 61, .2); transition: background .15s; }
.auth-card .alert { margin-top: 1rem; }
.auth-env { margin: 2rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--env-test); background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: .2rem .75rem; }
@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-logo-small { display: flex; }
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 2rem; box-shadow: 0 8px 30px rgba(20, 30, 60, .06); }
.card.narrow { width: 100%; max-width: 420px; }

/* Forms */
.form { display: flex; flex-direction: column; gap: .35rem; }
.form.narrow { max-width: 420px; }
.form label { font-weight: 600; font-size: .9rem; margin-top: .6rem; }
.form input {
    font: inherit; padding: .6rem .75rem; border: 1px solid #d4d4d8; border-radius: 8px; background: #fff; color: var(--text);
}
.form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.form .small { margin: .1rem 0 0; }
button.primary {
    margin-top: 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
    background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: .7rem 1rem;
}
button.primary:hover { background: var(--brand-dark); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }

.alert { padding: .7rem .9rem; border-radius: 8px; margin: 0 0 1rem; font-size: .92rem; }
.alert.error { background: var(--error-bg); color: var(--error); }
.alert.info { background: var(--info-bg); color: var(--info); }
.alert.success { background: var(--ok-bg); color: var(--ok); }

.steps { padding-left: 1.2rem; }
.qr { display: block; width: 200px; height: 200px; margin: .5rem 0; image-rendering: pixelated; border: 1px solid var(--line); border-radius: var(--radius); }
.steps li { margin-bottom: .6rem; }
.secret {
    display: block; margin: .4rem 0 .2rem; padding: .6rem .8rem;
    font-size: 1.05rem; letter-spacing: .08em; background: var(--bg); border: 1px dashed #c4c4cc; border-radius: 8px;
    word-break: break-all;
}


/* Data pages: toolbars, tables, badges, side panels */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .25rem 0 0; color: var(--muted); max-width: 70ch; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.toolbar label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.toolbar select, .toolbar input, .field select, .field input, .field textarea {
    font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1px solid #d4d4d8; border-radius: 8px; background: #fff; color: var(--text);
}
.toolbar button, .btn {
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; border-radius: 8px; padding: .45rem .9rem;
    border: 1px solid var(--brand); background: var(--brand); color: #fff; text-decoration: none; display: inline-block;
}
.btn.secondary { background: var(--surface); color: var(--brand); }
.btn.danger { background: var(--surface); color: var(--error); border-color: var(--error); }
.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
/* Explicit colours: a link styled as a button must not take the a:hover colour. */
.btn:hover, .toolbar button:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn.secondary:hover { background: var(--info-bg); border-color: var(--brand); color: var(--brand); }
.btn.danger:hover { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.btn:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th { text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: .65rem .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .sub { display: block; color: var(--muted); font-size: .8rem; }
/* A note under a number that may break (work package 6.5.1). */
table.data .sub.wrap { white-space: normal; }
/* Details under a number - the interest shares of a minimum fee (work package 6.5.2) - break and read left to right. */
table.data td.num details { white-space: normal; text-align: left; }
table.data td.num details ul { margin: .25rem 0 0; padding-left: 1rem; }
td.date, table.data span.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty-state { padding: 2rem; text-align: center; color: var(--muted); }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: #fdf0d9; color: #8a5300; }
.badge.danger { background: var(--error-bg); color: var(--error); }
.badge.info { background: var(--info-bg); color: var(--info); }
.columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.panel h2 { font-size: 1rem; margin: 0 0 .8rem; }
.panel + .panel { margin-top: 1rem; }
.field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.field label { font-size: .85rem; font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--muted); }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: .9rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
/* Narrow screens: a label above its value - a long label (the contract parameters) must not widen the page. */
@media (max-width: 600px) { dl.facts { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; } dl.facts dt { overflow-wrap: anywhere; margin-top: .35rem; } }
.stage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.stage-list li { display: grid; grid-template-columns: 6.5rem 1fr fit-content(40%); gap: .6rem; align-items: baseline; font-size: .9rem; }
.stage-list li > .stage-note { grid-column: 1 / -1; }
.stage-list li > * { min-width: 0; overflow-wrap: anywhere; }
.stage-list .sub { display: block; font-size: .8rem; color: var(--muted); }
.inline-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0; }
.inline-form input[type=text] { min-width: 12rem; }
@media (max-width: 960px) { .columns { grid-template-columns: minmax(0, 1fr); } }

tr.highlight td { background: var(--info-bg); }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
/* Long text without spaces (a file's header line) wraps instead of widening the page (work package 4.11). */
.umbruch { overflow-wrap: anywhere; }
.inline-form input[type=text] {
    font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1px solid #d4d4d8; border-radius: 8px; background: #fff; color: var(--text);
}

/* Tabs and list items on detail pages */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.tabs a { padding: .55rem .9rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.item { padding: .75rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.item:last-child { border-bottom: 0; }
.item-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.item p { margin: 0; }
.panel h3 { margin: .9rem 0 .4rem; text-transform: uppercase; letter-spacing: .04em; }
.inline-form input[type=date], .inline-form select, .inline-form input[type=file] { font: inherit; font-size: .85rem; }
button[disabled] { opacity: .45; cursor: not-allowed; }

details > summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .9rem; margin: .5rem 0; }
details[open] > summary { margin-bottom: .75rem; }
.field textarea { font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1px solid #d4d4d8; border-radius: 8px; }
.pre-line { white-space: pre-line; }

/* Start page: welcome band, open work, stock, warnings and shortcuts */
.start-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem;
    padding: 1.8rem 2rem; margin-bottom: 1.25rem; border-radius: 16px; color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, #3a64b0 0%, rgba(58, 100, 176, 0) 55%), linear-gradient(135deg, #142a52 0%, #1e3a6e 60%, #24497f 100%); }
.start-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    border: 36px solid rgba(255, 255, 255, .05); pointer-events: none; }
.hero-text { position: relative; z-index: 1; }
.hero-date { margin: 0 0 .35rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.start-hero h1 { margin: 0; color: #fff; font-size: 1.75rem; }
.hero-summary { margin: .4rem 0 0; color: rgba(255, 255, 255, .82); font-size: 1rem; }
.hero-status { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-status li { display: flex; align-items: center; gap: .45rem; padding: .38rem .75rem; border-radius: 999px; font-size: .8rem;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }
.hero-status a { color: inherit; text-decoration: none; }
.hero-status a:hover { text-decoration: underline; }
.hero-status .dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .45); flex: none; }
.hero-status .is-ok .dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
.hero-status .is-kritisch { background: #fef2f2; border-color: #fef2f2; color: var(--error); font-weight: 600; }
.hero-status .is-kritisch .dot { background: var(--error); }

.work-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.work-cards.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-cards.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-cards.n-1 { grid-template-columns: minmax(0, 1fr); }
/* Four in a row, then two by two, then one below the other. */
@media (max-width: 1180px) { .work-cards, .work-cards.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .work-cards, .work-cards.n-3, .work-cards.n-2 { grid-template-columns: minmax(0, 1fr); } }
.work-card { --acc: var(--brand); --acc-bg: var(--info-bg); position: relative; display: flex; flex-direction: column; padding: 1.1rem 1.15rem 1rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text);
    box-shadow: 0 1px 2px rgba(15, 31, 61, .04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.work-card:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 10px 24px -8px rgba(15, 31, 61, .18); }
.work-card:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.work-card.acc-indigo { --acc: #4f46e5; --acc-bg: #eef0ff; }
.work-card.acc-amber  { --acc: #c2700a; --acc-bg: #fff4e0; }
.work-card.acc-teal   { --acc: #0f8a7e; --acc-bg: #e3f6f3; }
.work-card.acc-blue   { --acc: #2563eb; --acc-bg: #e8f0ff; }
.work-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .85rem; }
.work-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--acc-bg); color: var(--acc); }
.work-go { color: #c4c4cc; transition: color .15s, transform .15s; }
.work-card:hover .work-go { color: var(--acc); transform: translateX(2px); }
.work-card-label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.work-card-num { font-size: 2.1rem; font-weight: 700; line-height: 1.1; margin: .15rem 0 .35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.work-card-text { font-size: .8rem; color: var(--acc); font-weight: 600; }
.work-card-done { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; font-size: .75rem; font-weight: 600;
    padding: .15rem .55rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); }
.work-card.is-leer .work-card-num { color: #a1a1aa; }
.work-card.is-kritisch { border-color: #f5c2bd; box-shadow: inset 4px 0 0 var(--error), 0 1px 2px rgba(15, 31, 61, .04); }
.work-card.is-kritisch .work-icon { background: var(--error-bg); color: var(--error); }
.work-card.is-kritisch .work-card-text { color: var(--error); }

.start-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.start-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.start-grid .panel { margin: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 31, 61, .04); }
.start-side { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1080px) { .start-grid { grid-template-columns: 1fr; } }
.panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.panel-head-row h2 { margin: 0; }

.portfolio { padding: 1.4rem 1.5rem; }
.portfolio-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: 1.1rem; }
.portfolio-head h2 { margin: 0; }
.portfolio-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.portfolio-figures { flex: 1 1 18rem; min-width: 0; }
.kpi-label { margin: 0; font-size: .85rem; color: var(--muted); }
.kpi-big { margin: .2rem 0 1.2rem; font-size: 2.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-row { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.kpi-row > div { padding: .7rem .85rem; border-radius: 10px; background: var(--bg); }
.kpi-row dt { font-size: .75rem; color: var(--muted); margin-bottom: .2rem; }
.kpi-row dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring { position: relative; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ring svg { display: block; }
.ring-track { stroke: var(--bg); }
.ring-value { stroke: var(--brand); }
.ring-num { position: absolute; top: 66px; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring figcaption { font-size: .78rem; color: var(--muted); }

.signal-list { list-style: none; margin: 0; padding: 0; }
.signal-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.signal-list li:last-child { border-bottom: 0; }
.signal-list .sub { display: block; font-size: .8rem; color: var(--muted); }
.signal-dot { width: .55rem; height: .55rem; border-radius: 50%; }
.signal-dot.is-warn { background: #d98e04; }
.signal-dot.is-kritisch { background: var(--error); }
.empty-ok { display: flex; align-items: center; gap: .85rem; padding: .85rem; border-radius: 12px; background: var(--ok-bg); }
.empty-ok-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ok); flex: none; }
.empty-ok p { margin: 0; display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; color: var(--ok); }
.empty-ok span { color: #3f7a57; font-size: .8rem; }
.panel-link { margin: .9rem 0 0; font-size: .85rem; }
.panel-link a { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; font-weight: 600; }
.small-muted { color: var(--muted); font-size: .82rem; }

.quick-list { display: flex; flex-direction: column; gap: .25rem; margin: -.25rem -.5rem; }
.quick-list a { display: flex; align-items: center; gap: .8rem; padding: .6rem .5rem; border-radius: 10px; text-decoration: none; color: var(--text); transition: background .15s; }
.quick-list a:hover { background: var(--bg); }
.quick-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--info-bg); color: var(--brand); flex: none; }
.quick-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.quick-text strong { font-size: .9rem; color: var(--ink); }
.quick-text span { font-size: .78rem; color: var(--muted); }
.quick-go { color: #c4c4cc; transition: color .15s, transform .15s; }
.quick-list a:hover .quick-go { color: var(--brand); transform: translateX(2px); }

@media (max-width: 600px) {
    .start-hero { padding: 1.35rem 1.25rem; border-radius: 14px; }
    .start-hero h1 { font-size: 1.4rem; }
    .work-cards { gap: .65rem; }
    .work-card { padding: .9rem; }
    .work-card-num { font-size: 1.7rem; }
    .kpi-big { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { .work-card, .work-go, .quick-go { transition: none; } .work-card:hover { transform: none; } }

/* Form fields: calmer labels, comfortable inputs */
.field label { font-size: .82rem; font-weight: 500; color: #3f3f46; }
.field input, .field select, .field textarea { padding: .55rem .7rem; border-color: #dcdce2; border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c4c4cc; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.field input::placeholder { color: #b4b4bc; }
.field .req { color: var(--error); }
input.upper { text-transform: uppercase; }
.muted { color: #a1a1aa; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.btn-icon { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 10px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--bg); color: var(--ink); }
.back-link { margin: 0 0 .6rem; font-size: .85rem; }
.back-link a { text-decoration: none; color: var(--muted); }
.back-link a:hover { color: var(--brand); }
.page-head h1 .badge { vertical-align: middle; margin-left: .35rem; }

/* Search bar above lists */
.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.search-field { position: relative; flex: 0 1 26rem; min-width: 14rem; display: flex; align-items: center; }
.search-field .icon { position: absolute; left: .75rem; color: #a1a1aa; pointer-events: none; }
.search-field input { width: 100%; font: inherit; font-size: .92rem; padding: .6rem .8rem .6rem 2.4rem; border: 1px solid #dcdce2; border-radius: 10px; background: var(--surface); color: var(--text); }
.search-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.search-bar .btn { padding: .6rem 1rem; border-radius: 10px; }
.result-count { margin-left: auto; font-size: .85rem; color: var(--muted); }
table.data .row-title { font-weight: 600; text-decoration: none; color: var(--ink); }
table.data .row-title:hover { color: var(--brand); text-decoration: underline; }
table.data tbody tr:hover td { background: #fafafb; }

/* Empty list with a call to action */
.empty-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: 3rem 1.5rem;
    background: var(--surface); border: 1px dashed #d4d4dc; border-radius: 14px; }
.empty-card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--info-bg); color: var(--brand); margin-bottom: .4rem; }
.empty-card h2 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.empty-card p { margin: 0 0 .8rem; max-width: 34rem; color: var(--muted); font-size: .92rem; }

/* Modal dialog */
dialog.modal { width: min(680px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 0; border-radius: 16px; color: var(--text);
    background: var(--surface); box-shadow: 0 24px 60px -12px rgba(15, 31, 61, .35); overflow: hidden; }
dialog.modal[open] { display: flex; animation: modal-in .18s ease-out; }
dialog.modal::backdrop { background: rgba(15, 31, 61, .45); backdrop-filter: blur(2px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-form { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 3rem); margin: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.modal-head p { margin: .25rem 0 0; font-size: .85rem; color: var(--muted); }
.modal-body { padding: 1.2rem 1.5rem .4rem; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: #fafafb; }
.modal-foot .btn { padding: .6rem 1.1rem; border-radius: 10px; }
.form-section { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.form-section legend { padding: 0; margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 .9rem; }
.form-grid .field { margin-bottom: .8rem; min-width: 0; }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.check-card { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.check-card:hover { border-color: #c4c4cc; }
.check-card input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--brand); }
.check-card > span { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.check-card > span span { font-size: .8rem; color: var(--muted); }
@media (max-width: 600px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid .span-3, .form-grid .span-4, .form-grid .span-6 { grid-column: span 2; }
    .form-grid .span-2, .form-grid .span-1 { grid-column: span 1; }
    dialog.modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .modal-form { max-height: 100dvh; }
    .result-count { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { dialog.modal[open] { animation: none; } }

/* Whole table row opens the record; the edit icon keeps its own target */
table.data tr.row-link td { vertical-align: middle; padding-top: .85rem; padding-bottom: .85rem; }
table.data tr.row-link td:first-child, table.data thead th:first-child { padding-left: 1.1rem; }
tr.row-link:hover td { background: #f7f8fb; cursor: pointer; }
tr.row-link:hover .row-title { color: var(--brand); }
table.data th.actions, table.data td.actions { width: 1%; white-space: nowrap; text-align: right; padding-left: 1.5rem; padding-right: 1rem; }
td.actions .row-action { display: inline-grid; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
td.actions .row-action:hover { border-color: var(--brand); background: var(--info-bg); color: var(--brand); }

/* File drop zone (replaces the browser's "Choose File" label) */
.file-drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; row-gap: .1rem;
    padding: .75rem .9rem; border: 1.5px dashed #cfd3dc; border-radius: 10px; background: #fafbfd; transition: border-color .15s, background-color .15s; min-width: 0; }
.file-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.file-drop:hover, .file-drop.is-over { border-color: var(--brand); background: var(--info-bg); }
.file-drop:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.file-drop-icon { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--info-bg); color: var(--brand); }
.file-drop-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3rem; font-size: .88rem; color: var(--muted); min-width: 0; }
.file-drop-text strong { color: var(--brand); font-weight: 600; }
.file-drop-hint { font-size: .75rem; color: #a1a1aa; }
.file-drop-hint::before { content: "· "; }
.file-drop-name { grid-column: 2; font-size: .8rem; color: #a1a1aa; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop.has-file { border-style: solid; border-color: #9fd3b4; background: var(--ok-bg); }
.file-drop.has-file .file-drop-icon { background: #fff; color: var(--ok); }
.file-drop.has-file .file-drop-name { color: var(--ok); font-weight: 600; }

/* Checklist with links to where an item is completed */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.checklist li:last-child { border-bottom: 0; }
.check-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid #d4d4dc; }
.checklist .is-done .check-mark { border-color: var(--ok); background: var(--ok); color: #fff; }
.checklist .is-done .check-text { color: var(--muted); }
.check-text { flex: 1; min-width: 0; }
.check-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.panel-section { margin: 1.1rem -1.2rem 0; padding: 1.1rem 1.2rem 0; border-top: 1px solid var(--line); }
.panel-section .small { margin: 0 0 .7rem; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.action-row .small { margin: 0; flex: 1 1 16rem; }
.btn[disabled], button[disabled].btn { background: #c9cfdb; border-color: #c9cfdb; color: #fff; opacity: 1; }
.btn.secondary[disabled] { background: var(--surface); color: #a1a1aa; border-color: var(--line); }
.field input:disabled { background: var(--bg); color: #a1a1aa; }
.btn[disabled]:hover { background: #c9cfdb; border-color: #c9cfdb; color: #fff; cursor: not-allowed; }
.btn.secondary[disabled]:hover { background: var(--surface); border-color: var(--line); color: #a1a1aa; }

/* Contract parameters: date query and "to be confirmed" marks */
.stand-form { gap: .4rem; }
.stand-form input[type=date] { font: inherit; font-size: .85rem; padding: .35rem .5rem; border: 1px solid #dcdce2; border-radius: 8px; }
.offen-check { display: flex; align-items: center; gap: .35rem; font-size: .75rem !important; font-weight: 400 !important; color: var(--muted) !important; }
.offen-check input { accent-color: #c2700a; }
dl.facts dd .badge { margin-left: .35rem; }

/* Approval course, audit log and rights matrix (work package 2) */
.chain { list-style: none; margin: 0; padding: 0; }
.chain li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: .8rem; padding-bottom: 1rem; }
.chain li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.chain-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d4d4dc; background: var(--surface); }
.chain .is-done .chain-dot { border-color: var(--ok); background: var(--ok); }
.chain .is-open .chain-dot { border-color: #d98e04; }
.chain strong { display: block; color: var(--ink); }
.chain p { margin: .25rem 0 0; font-size: .9rem; }
.change { margin-bottom: .9rem; }
.change table { table-layout: fixed; width: 100%; }
.change td { overflow-wrap: anywhere; }
.change th:first-child { width: 34%; }
.change-head { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; margin-bottom: .4rem; }
table.data.compact td, table.data.compact th { padding: .4rem .6rem; font-size: .85rem; }
td.json { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .75rem; color: var(--muted); max-width: 32rem; word-break: break-word; }
.filter-bar label { font-size: .78rem; }
.rights-matrix th.role-col, .rights-matrix td.role-col { text-align: center; }
.rights-matrix th.role-col { white-space: normal; hyphens: auto; overflow-wrap: anywhere; width: 6.5rem; min-width: 5.5rem; font-size: .7rem; line-height: 1.25; vertical-align: bottom; }
.rights-matrix .group-row th { background: var(--bg); text-transform: none; font-size: .8rem; color: var(--ink); letter-spacing: 0; }
.rights-matrix td:first-child { min-width: 14rem; }
.tick { color: var(--ok); font-weight: 700; }

/* Trial calculation of a deadline (work package 3.1) */
.probe-ergebnis { margin-top: 1rem; }
.probe-frei { columns: 2; column-gap: 1.2rem; padding-left: 1.1rem; margin: .3rem 0 0; }
@media (max-width: 480px) { .probe-frei { columns: 1; } }

/* Escalation stages of a deadline kind (work package 3.2) */
.stufen-editor input, .stufen-editor select { width: 100%; font: inherit; font-size: .85rem; padding: .4rem .5rem; border: 1px solid #dcdce2; border-radius: 8px; background: var(--surface); }
.stufen-editor input:focus, .stufen-editor select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.stufen-editor th:nth-child(1) { width: 6rem; }
.stufen-editor th:nth-child(2) { width: 14rem; }
.stufen-editor td:nth-child(3) input { min-width: 14rem; }

/* Filter bars: a select with long option names never widens the page */
.toolbar label { max-width: 100%; min-width: 0; }
.toolbar select { max-width: 100%; }

/* Work package 5.8: each priced part of a receivable on its own, with the decision that bought it. */
.kaufpreis-teil { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }
.kaufpreis-teil:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.kaufpreis-teil h3 { margin: 0 0 .4rem; }
.kaufpreis-teil, details.item { scroll-margin-top: 5rem; }
.kaufpreis-teil:target, details.item:target { outline: 2px solid var(--brand-ring); outline-offset: 4px; border-radius: 4px; }