/* =====================================================================
   ATA DIGITAL · KUNDENPORTAL
   Design System "Executive" — hell, seriös, markentreu, 2026
   ---------------------------------------------------------------------
   - Keine externen Assets (CSP: default-src 'self', style-src 'self').
   - Keine Inline-Styles. Alle Farben ausschließlich über Tokens.
   - Fester heller Look, damit das Portal immer professionell wirkt.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Neutrale Skala */
    --c-canvas:        #f1f4f9;
    --c-canvas-deep:   #e7ecf4;
    --c-surface:       #ffffff;
    --c-surface-2:     #f6f8fc;
    --c-surface-3:     #edf1f7;
    --c-line:          #dde4ee;
    --c-line-strong:   #c3cdda;
    --c-ink:           #0f1b33;
    --c-ink-2:         #33405a;
    --c-muted:         #5f6b84;
    --c-faint:         #8b95ab;

    /* Marke (aus dem ATA-Digital-Logo) */
    --c-navy:          #0a1740;
    --c-navy-2:        #13265f;
    --c-topbar:        #ffffff;
    --c-topbar-line:   #dde4ee;
    --c-topbar-ink:    #0f1b33;
    --c-topbar-muted:  #5f6b84;

    /* Akzent */
    --c-accent:        #1748bc;
    --c-accent-deep:   #10337f;
    --c-accent-ink:    #123f9d;
    --c-accent-soft:   #e9f0ff;
    --c-accent-line:   #b9cdf6;
    --c-on-accent:     #ffffff;
    --brand-sweep:     linear-gradient(112deg, #0a1740 0%, #1748bc 46%, #38a9ec 100%);
    --hero-glow:       radial-gradient(760px 300px at 88% -30%, rgba(56, 169, 236, .22), transparent 62%),
                       radial-gradient(880px 360px at 4% -22%, rgba(23, 72, 188, .14), transparent 60%);

    /* Semantik */
    --c-ok:            #106e4b;
    --c-ok-soft:       #e2f4ea;
    --c-ok-line:       #b4dfc8;
    --c-warn:          #8a5605;
    --c-warn-soft:     #fdf1dc;
    --c-warn-line:     #eed3a3;
    --c-risk:          #ad2222;
    --c-risk-soft:     #fcebeb;
    --c-risk-line:     #f1c2c2;

    /* Form */
    --r-xs: 7px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(15, 27, 51, .06);
    --sh-2: 0 8px 22px -12px rgba(15, 27, 51, .20);
    --sh-3: 0 28px 56px -24px rgba(10, 23, 64, .34);

    /* Maße */
    --measure: 1200px;
    --gap: 1.15rem;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------
   2. Basis
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-canvas);
    background-image:
        radial-gradient(1100px 420px at 50% -140px, rgba(23, 72, 188, .08), transparent 68%);
    background-repeat: no-repeat;
    color: var(--c-ink);
    font-family: var(--font);
    font-size: .9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
svg { flex: none; width: 1em; height: 1em; vertical-align: -.12em; }

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    line-height: 1.18;
    letter-spacing: -.022em;
    font-weight: 680;
    color: var(--c-ink);
    overflow-wrap: break-word;
}

h1 { font-size: clamp(1.65rem, 1.2rem + 1.45vw, 2.2rem); letter-spacing: -.032em; }
h2 { font-size: 1.16rem; }
h3 { font-size: .98rem; }
h4 { font-size: .9rem; }

p { margin: 0 0 .85rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--c-accent-ink);
    text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

hr {
    border: 0;
    height: 1px;
    background: var(--c-line);
    margin: 1.25rem 0;
}

::selection { background: var(--c-accent-soft); color: var(--c-accent-ink); }

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--c-surface);
    color: var(--c-ink);
    padding: .7rem 1rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; }

.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. Typografische Bausteine
   --------------------------------------------------------------------- */
.kicker {
    display: block;
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-bottom: .45rem;
}
.kicker--accent { color: var(--c-accent-ink); }

.lede { color: var(--c-muted); font-size: 1rem; max-width: 68ch; }
.muted { color: var(--c-muted); }
.faint { color: var(--c-faint); }
.tiny { font-size: .78rem; line-height: 1.45; }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .84rem; }
.break { overflow-wrap: anywhere; }
.risk-text { color: var(--c-risk); }
.ok-text { color: var(--c-ok); }

/* ---------------------------------------------------------------------
   4. Layout-Utilities
   --------------------------------------------------------------------- */
.stack { display: grid; gap: var(--gap); align-content: start; }
.stack--tight { gap: .6rem; }
.stack--loose { gap: 1.75rem; }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster form { margin: 0; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--gap);
    align-items: start;
}
.split > * { min-width: 0; }

.limit { max-width: 780px; }

/* ---------------------------------------------------------------------
   5. App-Shell mit oberer Navigation
   --------------------------------------------------------------------- */
.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.25) blur(12px);
    -webkit-backdrop-filter: saturate(1.25) blur(12px);
    border-bottom: 1px solid var(--c-topbar-line);
}

.topbar__inner {
    width: min(var(--measure), calc(100% - 2rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-height: 68px;
    padding-block: .55rem;
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    margin-right: .4rem;
    color: inherit;
}
.topbar__brand:hover { text-decoration: none; }

.topbar__word {
    display: grid;
    line-height: 1.12;
    min-width: 0;
}
.topbar__word b {
    font-size: .9rem;
    font-weight: 780;
    letter-spacing: -.015em;
    white-space: nowrap;
}
.topbar__word span {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-topbar-muted);
    white-space: nowrap;
}

.topbar__rule {
    width: 1px;
    align-self: stretch;
    margin-block: .55rem;
    background: var(--c-topbar-line);
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.navlink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .52rem .72rem;
    border-radius: var(--r-pill);
    color: var(--c-topbar-muted);
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.navlink:hover {
    background: var(--c-surface-3);
    color: var(--c-topbar-ink);
    text-decoration: none;
}
.navlink[aria-current="page"] {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: #fff;
    box-shadow: var(--sh-1);
}
.navlink svg { width: 16px; height: 16px; opacity: .88; }
.navlink__tail {
    margin-left: .1rem;
    font-size: .7rem;
    font-weight: 750;
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    color: var(--c-accent-ink);
    padding: .02rem .4rem;
    border-radius: var(--r-pill);
}
.navlink[aria-current="page"] .navlink__tail {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.topbar__spacer { flex: 1; }

.who { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.who__avatar {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--brand-sweep, var(--c-accent));
    color: #fff;
    font-size: .74rem;
    font-weight: 780;
    letter-spacing: .02em;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.who__text { display: grid; min-width: 0; line-height: 1.22; }
.who__name {
    font-size: .84rem;
    font-weight: 680;
    color: var(--c-topbar-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.who__role { font-size: .72rem; color: var(--c-topbar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar__account { display: flex; align-items: center; gap: .7rem; }
.topbar__account form { margin: 0; }

/* Mobile-Steuerung */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.topbar__btn {
    display: none;
    align-items: center;
    gap: .45rem;
    padding: .5rem .72rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    background: var(--c-surface);
    font-size: .83rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.topbar__btn svg { width: 16px; height: 16px; }
.topbar__scrim { display: none; }

/* Firmenmarke */
.mark {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: inherit;
    text-decoration: none;
}
.mark:hover { text-decoration: none; }

.mark--image {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}

.mark__logo {
    display: block;
    height: 31px;
    width: auto;
    max-width: 100%;
    flex: none;
}
.mark__tag {
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c-muted);
    white-space: nowrap;
}
.topbar__brand .mark__logo { height: 30px; }

.mark__tile {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    background: var(--brand-sweep, var(--c-accent));
    color: #fff;
    font-size: 1.08rem;
    font-weight: 820;
    letter-spacing: -.02em;
    flex: none;
    box-shadow: var(--sh-1);
}

.mark__text { display: grid; line-height: 1.14; }
.mark__name {
    font-size: .98rem;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.mark__name b { font-weight: 830; letter-spacing: .01em; }
.mark__sub {
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.gate__head .mark__logo { height: 42px; }
.gate__head .mark__tag { letter-spacing: .24em; }
.letterhead .mark__logo { height: 31px; }

/* Arbeitsfläche */
.work {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.work__body {
    flex: 1;
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2rem clamp(1rem, 2.6vw, 1rem) 4rem;
}

.work__foot {
    border-top: 1px solid var(--c-line);
    background: var(--c-surface);
    padding: 1.1rem clamp(1rem, 2.6vw, 2.4rem);
    color: var(--c-faint);
    font-size: .78rem;
}
.work__foot-inner {
    max-width: var(--measure);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    justify-content: space-between;
}
.work__foot a { color: var(--c-muted); }

/* ---------------------------------------------------------------------
   6. Hero (Seitenkopf)
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background:
        var(--hero-glow),
        linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
    box-shadow: var(--sh-2);
    padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.25rem, 3vw, 2.1rem);
    margin-bottom: 1.6rem;
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto -30px -56px auto;
    width: 300px;
    height: 190px;
    background: var(--brand-sweep);
    opacity: .1;
    border-radius: 46% 54% 52% 48% / 58% 60% 40% 42%;
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}
.hero__main { min-width: 0; flex: 1 1 24rem; }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    padding: .28rem .7rem;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--c-accent-line);
    color: var(--c-accent-ink);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hero__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-accent);
}
.hero__title { margin-bottom: .4rem; }
.hero__lede { color: var(--c-muted); margin: 0; max-width: 64ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.hero__actions form { margin: 0; }
.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .95rem;
    align-items: center;
    margin-top: .85rem;
    color: var(--c-muted);
    font-size: .84rem;
}

/* Rückwärtskompatibel: alte Mastheads erben den Hero-Look. */
.masthead {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background:
        var(--hero-glow),
        linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
    box-shadow: var(--sh-2);
    padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.25rem, 3vw, 2.1rem);
    margin-bottom: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}
.masthead__main { min-width: 0; flex: 1 1 24rem; }
.masthead__title { margin-bottom: .35rem; }
.masthead__lede { color: var(--c-muted); margin: 0; max-width: 64ch; }
.masthead__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.masthead__actions form { margin: 0; }
.masthead__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    align-items: center;
    margin-top: .7rem;
    color: var(--c-muted);
    font-size: .84rem;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--c-faint);
    margin-bottom: .55rem;
}
.crumbs a { color: var(--c-faint); font-weight: 600; }
.crumbs a:hover { color: var(--c-accent-ink); }
.crumbs span[aria-hidden] { opacity: .55; }

/* ---------------------------------------------------------------------
   7. Panel (Karte)
   --------------------------------------------------------------------- */
.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.panel > form { margin: 0; }

.panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: 1.05rem 1.25rem;
    border-bottom: 1px solid var(--c-line);
    background: linear-gradient(180deg, #fbfcff 0%, #f3f6fb 100%);
}
.panel__head h2, .panel__head h3 { margin: 0; }
.panel__head p { margin: .25rem 0 0; color: var(--c-muted); font-size: .85rem; }
.panel__head form { margin: 0; }
.panel__headmain { min-width: 0; }
.panel__tools { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

.panel__body { padding: 1.25rem; }
.panel__body > :last-child { margin-bottom: 0; }
.panel__body + .panel__body { border-top: 1px solid var(--c-line); }

.panel__foot {
    padding: .95rem 1.25rem;
    border-top: 1px solid var(--c-line);
    background: var(--c-surface-2);
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}
.panel__foot form { margin: 0; }

.panel--feature {
    border-color: var(--c-navy);
    box-shadow: var(--sh-2);
}
.panel--feature .panel__head {
    background: linear-gradient(116deg, #0a1740 0%, #1748bc 60%, #2f7fd7 100%);
    border-bottom-color: var(--c-navy);
    color: #fff;
}
.panel--feature .panel__head h2,
.panel--feature .panel__head h3 { color: #fff; }
.panel--feature .panel__head p { color: rgba(255, 255, 255, .78); }
.panel--feature .kicker { color: rgba(255, 255, 255, .72); }
.panel--feature .kicker--accent { color: #cfe3ff; }
.panel--accent { border-color: var(--c-accent-line); }
.panel--accent .panel__head { background: var(--c-accent-soft); border-bottom-color: var(--c-accent-line); }
.panel--warn { border-color: var(--c-warn-line); }
.panel--warn .panel__head { background: var(--c-warn-soft); border-bottom-color: var(--c-warn-line); }
.panel--risk { border-color: var(--c-risk-line); }
.panel--risk .panel__head { background: var(--c-risk-soft); border-bottom-color: var(--c-risk-line); }
.panel--quiet { box-shadow: none; background: var(--c-surface-2); }

/* ---------------------------------------------------------------------
   8. Buttons
   --------------------------------------------------------------------- */
.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 660;
    line-height: 1.2;
    padding: .64rem 1.05rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-accent);
    background: linear-gradient(180deg, #2053cc 0%, var(--c-accent) 55%, var(--c-accent-deep) 130%);
    color: var(--c-on-accent);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 51, 127, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover {
    background: linear-gradient(180deg, #1d4fc4 0%, #133a8a 100%);
    border-color: var(--c-accent-deep);
    color: var(--c-on-accent);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(16, 51, 127, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn svg { width: 15px; height: 15px; }

.btn--ghost {
    background: var(--c-surface);
    border-color: var(--c-line-strong);
    color: var(--c-ink);
    box-shadow: var(--sh-1);
}
.btn--ghost:hover {
    background: #fff;
    border-color: var(--c-accent-line);
    color: var(--c-accent-ink);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}

.btn--dark {
    background: linear-gradient(180deg, #16295f 0%, #0a1740 100%);
    border-color: var(--c-navy);
    color: #fff;
    box-shadow: 0 1px 2px rgba(10, 23, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--dark:hover {
    background: linear-gradient(180deg, #13265f 0%, #080f2c 100%);
    border-color: var(--c-navy);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(10, 23, 64, .7);
    transform: translateY(-1px);
}

.btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--c-muted);
    padding-inline: .55rem;
    box-shadow: none;
}
.btn--quiet:hover { background: var(--c-surface-3); border-color: transparent; color: var(--c-ink); box-shadow: none; transform: none; }

.btn--danger { background: var(--c-risk); border-color: var(--c-risk); color: #fff; box-shadow: var(--sh-1); }
.btn--danger:hover { background: var(--c-risk); border-color: var(--c-risk); filter: brightness(.93); color: #fff; box-shadow: var(--sh-1); transform: none; }

.btn--dangerghost {
    background: var(--c-surface);
    border-color: var(--c-risk-line);
    color: var(--c-risk);
    box-shadow: none;
}
.btn--dangerghost:hover { background: var(--c-risk-soft); border-color: var(--c-risk-line); color: var(--c-risk); box-shadow: none; transform: none; }

.btn--sm { padding: .42rem .68rem; font-size: .81rem; border-radius: var(--r-xs); }
.btn--lg { padding: .82rem 1.25rem; font-size: .95rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   9. Formulare
   --------------------------------------------------------------------- */
.field { margin-bottom: 1.05rem; }
.field:last-child { margin-bottom: 0; }

label, .field__label {
    display: block;
    font-size: .82rem;
    font-weight: 650;
    color: var(--c-ink-2);
    margin-bottom: .35rem;
}

.req::after { content: " *"; color: var(--c-accent-ink); }

.field__hint {
    color: var(--c-muted);
    font-size: .8rem;
    margin: -.1rem 0 .4rem;
}
.field__error {
    color: var(--c-risk);
    font-size: .8rem;
    margin-top: .3rem;
    font-weight: 600;
}

input, textarea, select {
    width: 100%;
    font: inherit;
    font-size: .9rem;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    padding: .62rem .72rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, textarea:hover, select:hover { border-color: #9fabbf; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(23, 72, 188, .14);
}
input::placeholder, textarea::placeholder { color: var(--c-faint); }
input[readonly] { background: var(--c-surface-3); color: var(--c-ink-2); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.1rem;
}
input[type="file"] {
    padding: .45rem;
    background: var(--c-surface-2);
    cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
    width: auto;
    accent-color: var(--c-accent);
    margin: 0;
}
input[type="date"] { min-height: 2.5rem; }

.check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.check input { margin-top: .28rem; flex: none; }
.check label {
    margin: 0;
    font-weight: 500;
    font-size: .875rem;
    color: var(--c-ink-2);
    line-height: 1.45;
}

.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.row-2 > .field, .row-3 > .field { margin-bottom: 1.05rem; }

fieldset { border: 0; margin: 0 0 1.05rem; padding: 0; }
legend {
    padding: 0;
    font-size: .82rem;
    font-weight: 650;
    color: var(--c-ink-2);
    margin-bottom: .4rem;
}

.fieldgroup {
    margin: 1.9rem 0 .95rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--c-line);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--c-ink);
}
.fieldgroup:first-child { margin-top: 0; }

.fieldflag {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    border-radius: var(--r-xs);
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: lowercase;
    vertical-align: .05rem;
}

.ta-list { min-height: 8.5rem; font-family: var(--mono); font-size: .84rem; }

.doc-source {
    margin: 0;
    padding: 1rem 1.1rem;
    max-height: 34rem;
    overflow: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.55;
    color: var(--c-ink-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}

.choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .5rem;
}
.choice {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    font-size: .875rem;
    font-weight: 500;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.choice:hover { border-color: #9fabbf; }
.choice input { margin-top: .22rem; }
.choice:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-weight: 600;
}

.filterbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    align-items: end;
}
.filterbar .field { margin: 0; }
.filterbar__go { display: flex; gap: .5rem; }

/* ---------------------------------------------------------------------
   10. Pills / Status
   --------------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .24rem .6rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line-strong);
    background: var(--c-surface-3);
    color: var(--c-ink-2);
    font-size: .755rem;
    font-weight: 700;
    letter-spacing: .005em;
    white-space: nowrap;
    line-height: 1.5;
}
.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
    flex: none;
}
.pill--nodot::before { display: none; }
.pill--ok { background: var(--c-ok-soft); border-color: var(--c-ok-line); color: var(--c-ok); }
.pill--warn { background: var(--c-warn-soft); border-color: var(--c-warn-line); color: var(--c-warn); }
.pill--risk { background: var(--c-risk-soft); border-color: var(--c-risk-line); color: var(--c-risk); }
.pill--accent { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-accent-ink); }
.pill--count { padding-inline: .5rem; }

/* ---------------------------------------------------------------------
   11. Notices
   --------------------------------------------------------------------- */
.notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .2rem .8rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--c-accent-line);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, #f3f7ff 0%, #e9f0ff 100%);
    box-shadow: var(--sh-1);
    margin-bottom: 1.1rem;
}
.notice__icon { color: var(--c-accent); display: grid; place-items: center; height: 1.5rem; }
.notice__icon svg { width: 17px; height: 17px; }
.notice__body { min-width: 0; }
.notice__body > :last-child { margin-bottom: 0; }
.notice strong { display: block; font-weight: 680; }
.notice p { margin: .2rem 0 0; color: var(--c-muted); font-size: .875rem; }
.notice ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--c-muted); font-size: .875rem; }
.notice .field { margin-top: .7rem; }

.notice--ok { border-color: var(--c-ok-line); border-left-color: var(--c-ok); background: linear-gradient(180deg, #effaf4 0%, var(--c-ok-soft) 100%); }
.notice--ok .notice__icon { color: var(--c-ok); }
.notice--warn { border-color: var(--c-warn-line); border-left-color: var(--c-warn); background: linear-gradient(180deg, #fff8ea 0%, var(--c-warn-soft) 100%); }
.notice--warn .notice__icon { color: var(--c-warn); }
.notice--risk { border-color: var(--c-risk-line); border-left-color: var(--c-risk); background: linear-gradient(180deg, #fff2f2 0%, var(--c-risk-soft) 100%); }
.notice--risk .notice__icon { color: var(--c-risk); }

/* ---------------------------------------------------------------------
   12. Metriken
   --------------------------------------------------------------------- */
.metric {
    position: relative;
    display: grid;
    align-content: start;
    gap: .3rem;
    padding: 1.05rem 1.15rem .95rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    border-top: 3px solid var(--c-accent);
    box-shadow: var(--sh-1);
    text-decoration: none;
    color: inherit;
    min-height: 6.4rem;
    overflow: hidden;
    transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
a.metric:hover {
    border-color: var(--c-accent-line);
    border-top-color: var(--c-accent-deep);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
}
.metric__label {
    font-size: .745rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-faint);
}
.metric__value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
}
.metric__value--sm { font-size: 1.2rem; letter-spacing: -.02em; }
.metric__hint { font-size: .8rem; color: var(--c-muted); }
.metric--alert { border-top-color: var(--c-risk); }
.metric--alert .metric__value { color: var(--c-risk); }

/* ---------------------------------------------------------------------
   13. Meter / Fortschritt
   --------------------------------------------------------------------- */
.meterblock { display: grid; gap: .4rem; }
.meterblock__copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .8rem;
    font-weight: 650;
    color: var(--c-ink-2);
}
.meterblock__copy span:last-child { font-variant-numeric: tabular-nums; color: var(--c-muted); }

progress.meter {
    display: block;
    appearance: none;
    border: 1px solid var(--c-line);
    width: 100%;
    height: 9px;
    border-radius: var(--r-pill);
    background: var(--c-surface-3);
    overflow: hidden;
}
progress.meter::-webkit-progress-bar { background: var(--c-surface-3); border-radius: var(--r-pill); }
progress.meter::-webkit-progress-value { background: var(--brand-sweep, var(--c-accent)); border-radius: var(--r-pill); }
progress.meter::-moz-progress-bar { background: var(--c-accent); border-radius: var(--r-pill); }

/* Phasenschiene */
.phases {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .6rem;
}
.phase {
    display: grid;
    gap: .18rem;
    padding: .8rem .9rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    border-top: 4px solid var(--c-line-strong);
    font-size: .82rem;
    color: var(--c-faint);
}
.phase__no {
    font-size: .68rem;
    font-weight: 780;
    letter-spacing: .1em;
}
.phase--done { border-top-color: var(--c-ok); background: var(--c-ok-soft); border-color: var(--c-ok-line); color: var(--c-ok); }
.phase--now {
    border-top-color: var(--c-accent);
    background: var(--c-accent-soft);
    border-color: var(--c-accent-line);
    color: var(--c-ink);
    font-weight: 680;
    box-shadow: var(--sh-1);
}
.phase--now .phase__no { color: var(--c-accent-ink); }

/* ---------------------------------------------------------------------
   14. Zeilenlisten
   --------------------------------------------------------------------- */
.rows { display: grid; }
.rows > * + * { border-top: 1px solid var(--c-line); }

.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem 1.1rem;
    padding: .95rem 1.25rem;
}
.row--top { align-items: start; }
.rows--inset .row { padding-inline: 0; }
.row:hover { background: var(--c-surface-2); }
.row__lead { min-width: 0; display: grid; gap: .2rem; justify-items: start; }
.row__title {
    font-weight: 650;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}
a.row__title:hover { color: var(--c-accent-ink); }
.row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    color: var(--c-muted);
    font-size: .8rem;
}
.row__meta > * { display: inline-flex; align-items: center; gap: .3rem; }
.row__body { color: var(--c-ink-2); font-size: .88rem; margin-top: .25rem; }
.row__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}
.row__trail form { margin: 0; }
.row__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1fr);
    gap: .5rem 1.1rem;
    align-items: center;
    min-width: 0;
}

.blank {
    padding: 2.4rem 1.5rem;
    text-align: center;
    color: var(--c-muted);
    background: var(--c-surface-2);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-sm);
}
.blank strong { display: block; color: var(--c-ink); margin-bottom: .25rem; font-weight: 650; }
.blank--flush { border: 0; background: transparent; }

/* Definitionsliste */
.dl {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: .55rem 1.25rem;
    margin: 0;
    font-size: .88rem;
}
.dl dt { color: var(--c-muted); font-weight: 600; }
.dl dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
.dl dd p { margin: 0; }

/* ---------------------------------------------------------------------
   15. Tabellen
   --------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th {
    position: sticky;
    top: 0;
    text-align: left;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-muted);
    background: var(--c-surface-2);
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--c-line);
    white-space: nowrap;
}
tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--c-line);
    vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--c-surface-2); }
.cell-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-tight { white-space: nowrap; }

/* Summen */
.totals { display: grid; }
.totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--c-line);
    font-size: .89rem;
    color: var(--c-muted);
}
.totals > div:last-child { border-bottom: 0; }
.totals strong { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.totals__sum { font-size: 1.05rem; }
.totals__sum strong { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }

/* ---------------------------------------------------------------------
   16. Navigation innerhalb einer Seite
   --------------------------------------------------------------------- */
.viewnav {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding: .3rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    box-shadow: var(--sh-1);
    margin-bottom: 1.6rem;
    scrollbar-width: thin;
}
.viewnav__link {
    position: relative;
    padding: .55rem .95rem;
    font-size: .875rem;
    font-weight: 620;
    color: var(--c-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--r-pill);
}
.viewnav__link:hover { color: var(--c-ink); background: var(--c-surface-3); text-decoration: none; }
.viewnav__link[aria-current="page"] {
    color: #fff;
    background: var(--c-navy);
    font-weight: 680;
    box-shadow: var(--sh-1);
}

.segment {
    display: inline-flex;
    padding: .2rem;
    gap: .15rem;
    background: var(--c-surface-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
}
.segment a {
    padding: .35rem .75rem;
    border-radius: var(--r-xs);
    font-size: .83rem;
    font-weight: 600;
    color: var(--c-muted);
    text-decoration: none;
}
.segment a:hover { color: var(--c-ink); text-decoration: none; }
.segment a[aria-current="page"] {
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: var(--sh-1);
    font-weight: 680;
}

.anchornav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.6rem;
}
.anchornav a {
    padding: .35rem .7rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-muted);
    font-size: .81rem;
    font-weight: 600;
    text-decoration: none;
}
.anchornav a:hover { border-color: var(--c-accent-line); color: var(--c-accent-ink); text-decoration: none; }

.section { scroll-margin-top: 5.5rem; }

/* ---------------------------------------------------------------------
   17. Timeline
   --------------------------------------------------------------------- */
.timeline {
    display: grid;
    gap: 1.15rem;
    padding-left: 1.35rem;
    border-left: 1px solid var(--c-line);
}
.timeline__item { position: relative; }
.timeline__item::before {
    content: "";
    position: absolute;
    left: -1.72rem;
    top: .4rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 2px solid var(--c-accent);
}
.timeline__title { font-weight: 650; font-size: .9rem; }
.timeline__meta { color: var(--c-faint); font-size: .78rem; margin-top: .1rem; }
.timeline p { margin: .2rem 0 0; color: var(--c-ink-2); font-size: .87rem; }

/* ---------------------------------------------------------------------
   18. Nachrichten
   --------------------------------------------------------------------- */
.thread { display: grid; gap: .9rem; }
.note {
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    padding: .85rem 1rem;
}
.note--team {
    background: var(--c-accent-soft);
    border-color: var(--c-accent-line);
}
.note__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem .75rem;
    margin-bottom: .35rem;
}
.note__author { font-weight: 680; font-size: .87rem; }
.note__time { color: var(--c-faint); font-size: .78rem; }
.note__text { white-space: pre-wrap; margin: 0; font-size: .9rem; color: var(--c-ink-2); }
.note__attach { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .83rem; }

/* ---------------------------------------------------------------------
   19. Stepper (Onboarding)
   --------------------------------------------------------------------- */
.wizard {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.wizard > * { min-width: 0; }

.wizard__rail { position: sticky; top: 5.5rem; }

.stepper { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; }
.step a {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
    padding: .6rem .35rem;
    color: var(--c-muted);
    font-size: .865rem;
    text-decoration: none;
    line-height: 1.35;
    border-radius: var(--r-sm);
}
.step a:hover { color: var(--c-ink); background: var(--c-surface-3); text-decoration: none; }
.step__dot {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1px solid var(--c-line-strong);
    background: var(--c-surface);
    color: var(--c-faint);
    font-size: .72rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    flex: none;
}
.step__dot svg { width: 12px; height: 12px; }
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(.35rem + .85rem);
    top: 2.35rem;
    bottom: -.05rem;
    width: 1px;
    background: var(--c-line-strong);
}
.step--done .step__dot { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.step--done a { color: var(--c-ink-2); }
.step--done:not(:last-child)::before { background: var(--c-ok-line); }
.step--now a { background: var(--c-accent-soft); color: var(--c-ink); font-weight: 680; }
.step--now .step__dot { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.step__text { display: grid; gap: .12rem; min-width: 0; }
.step__meta { font-size: .72rem; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.step--now .step__meta { color: var(--c-accent-ink); }
.step--gap .step__dot { background: var(--c-warn-soft); border-color: var(--c-warn-line); color: var(--c-warn); }
.step--gap .step__meta { color: var(--c-warn); font-weight: 650; }

.summaryblock {
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}
.summaryblock__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .9rem;
    margin-bottom: .75rem;
}
.summaryblock__head h3 { margin: 0; }
.summaryblock--gap { border-color: var(--c-warn-line); background: var(--c-warn-soft); }

/* ---------------------------------------------------------------------
   20. Popover (details/summary)
   --------------------------------------------------------------------- */
.pop { position: relative; display: inline-block; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 30;
    width: min(330px, 84vw);
    padding: 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-3);
    text-align: left;
}
.pop__panel p { font-size: .83rem; color: var(--c-muted); }
.pop__panel form { margin: 0; }

/* Expand the slot card with the password form instead of clipping a popover. */
.preview-secret[open] { flex-basis: 100%; min-width: 0; }
.preview-secret > .pop__panel {
    position: static;
    width: min(100%, 360px);
    margin-top: .75rem;
    box-shadow: none;
}

.disclosure > summary {
    cursor: pointer;
    color: var(--c-muted);
    font-size: .86rem;
    font-weight: 600;
    padding: .35rem 0;
    list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸ "; color: var(--c-faint); }
.disclosure[open] > summary::before { content: "▾ "; }
.disclosure > summary:hover { color: var(--c-ink); }

/* ---------------------------------------------------------------------
   21. Paginierung
   --------------------------------------------------------------------- */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--c-line);
    background: var(--c-surface-2);
    font-size: .83rem;
    color: var(--c-muted);
}
.pager__links { display: flex; flex-wrap: wrap; gap: .3rem; }
.pager__links a, .pager__links span {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xs);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.pager__links a:hover { border-color: var(--c-accent-line); color: var(--c-accent-ink); text-decoration: none; }
.pager__links .is-active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent);
}
.pager__links .is-disabled { opacity: .45; }

/* ---------------------------------------------------------------------
   22. Gate (Login, Einladung, Fehler)
   --------------------------------------------------------------------- */
.gate {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--c-canvas);
    background-image:
        radial-gradient(1000px 480px at 12% -8%, rgba(56, 169, 236, .18), transparent 62%),
        radial-gradient(900px 520px at 92% 0%, rgba(23, 72, 188, .16), transparent 60%),
        linear-gradient(180deg, #f7fafd 0%, #edf2f9 100%);
    color: var(--c-ink);
    padding: clamp(1.25rem, 4vw, 2.5rem);
}
.gate__head { display: flex; justify-content: center; }
.gate__main {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vw, 3rem) 0;
}
.gate__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.1rem;
    color: var(--c-muted);
    font-size: .78rem;
}
.gate__foot a { color: var(--c-muted); }
.gate__foot a:hover { color: var(--c-ink); }

.gate__split {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
}

.gate__brand {
    position: relative;
    overflow: hidden;
    padding: clamp(1.8rem, 4vw, 2.7rem);
    background:
        radial-gradient(640px 340px at 18% 0%, rgba(56, 169, 236, .38), transparent 62%),
        radial-gradient(520px 420px at 96% 96%, rgba(56, 169, 236, .26), transparent 60%),
        linear-gradient(132deg, #081031 0%, #0a1740 34%, #1748bc 100%);
    color: #fff;
    display: grid;
    align-content: space-between;
    gap: 2rem;
    min-height: 100%;
}
.gate__brand::after {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -86px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .05), 0 0 0 68px rgba(255, 255, 255, .035);
    pointer-events: none;
}
.gate__brand > * { position: relative; z-index: 1; }
.gate__brand .mark__tag { color: rgba(255, 255, 255, .68); }
.gate__brandcopy h1 {
    color: #fff;
    font-size: clamp(1.65rem, 1.2rem + 1.25vw, 2.15rem);
    margin-bottom: .65rem;
}
.gate__brandcopy p {
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-width: 38ch;
}
.gate__points {
    list-style: none;
    margin: 1.35rem 0 0;
    padding: 0;
    display: grid;
    gap: .62rem;
}
.gate__points li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: rgba(255, 255, 255, .86);
    font-size: .89rem;
}
.gate__points svg { width: 16px; height: 16px; margin-top: .16rem; color: #9fd8ff; }
.gate__brandfoot {
    color: rgba(255, 255, 255, .62);
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.gate__form { padding: clamp(1.6rem, 4vw, 2.4rem); }
.gate__card {
    width: min(460px, 100%);
    margin-inline: auto;
    background: var(--c-surface);
    border: 0;
    color: var(--c-ink);
}
.gate__card--wide { width: min(560px, 100%); }
.gate__title { margin-bottom: .4rem; font-size: 1.45rem; }
.gate__card .notice { margin-bottom: 1.25rem; }
.gate__card form { margin-top: 1.35rem; }
.gate__card .btn { width: 100%; }
.gate__links {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    font-size: .84rem;
}

.gate__promise {
    width: min(460px, 100%);
    margin: 1.15rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: var(--c-muted);
    font-size: .78rem;
}
.gate__promise svg { width: 14px; height: 14px; }

.qr {
    display: block;
    width: 216px;
    height: 216px;
    margin: 1.25rem auto;
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .9rem;
    font-family: var(--mono);
    font-size: .85rem;
    background: var(--c-surface-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: .9rem 1rem;
    margin-top: .6rem;
}

.errcode {
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 750;
    letter-spacing: .12em;
    color: var(--c-accent-ink);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    border-radius: var(--r-pill);
    padding: .2rem .65rem;
    display: inline-block;
    margin-bottom: .9rem;
}

/* ---------------------------------------------------------------------
   23. Öffentliches Angebot
   --------------------------------------------------------------------- */
.paper { background: var(--c-canvas-deep); }

.letterhead {
    background: linear-gradient(112deg, #081031 0%, #0a1740 34%, #1748bc 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.letterhead__inner {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.05rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}
.letterhead__tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.letterhead a { color: #fff; }

.sheet { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.sheet--pad { padding: clamp(1.75rem, 4vw, 3.25rem) 0 4rem; }

.offerhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    margin-bottom: 1.75rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background:
        var(--hero-glow),
        linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
    box-shadow: var(--sh-2);
}
.offerhead__main { flex: 1 1 22rem; min-width: 0; }
.offerhead__meta {
    display: grid;
    gap: .2rem;
    text-align: right;
    font-size: .84rem;
    color: var(--c-muted);
}
.offerhead__meta strong { color: var(--c-ink); font-size: 1rem; }

.offergrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: var(--gap);
    align-items: start;
}
.offergrid > * { min-width: 0; }
.decisionbox { position: sticky; top: 5.5rem; border-color: var(--c-navy); }
.decisionbox .btn { width: 100%; }
.decisionbox .panel__body { display: grid; gap: .6rem; }
.decisionbox form { margin: 0; }

.recurring {
    margin-top: 1.15rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--c-accent-line);
    background: var(--c-accent-soft);
    border-radius: var(--r-sm);
    display: grid;
    gap: .15rem;
}
.recurring strong { font-size: 1.15rem; color: var(--c-accent-ink); font-variant-numeric: tabular-nums; }
.recurring span, .recurring small { color: var(--c-muted); font-size: .82rem; }

.otp {
    font-size: 1.65rem;
    letter-spacing: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-family: var(--mono);
    padding-block: .7rem;
}

.centerbox {
    width: min(620px, 100%);
    margin: 0 auto;
}
.centerbox .panel__body { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem); }
.centerbox .notice { text-align: left; }

.terms h3 { margin-top: 1.25rem; }
.terms h3:first-child { margin-top: 0; }
.terms ul { margin: 0 0 .5rem; padding-left: 1.15rem; color: var(--c-ink-2); font-size: .89rem; }
.terms li { margin-bottom: .25rem; }

/* ---------------------------------------------------------------------
   24. Secrets
   --------------------------------------------------------------------- */
.secret { font-family: var(--mono); font-size: .84rem; }
.fingerprint { font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; color: var(--c-muted); }

.factgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.1rem 1.5rem;
}
.fact { display: grid; gap: .12rem; min-width: 0; }
.fact__label {
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-faint);
}
.fact__value { font-weight: 650; font-size: .92rem; overflow-wrap: anywhere; }
.fact__hint { font-size: .79rem; color: var(--c-muted); }

/* ---------------------------------------------------------------------
   25. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .offergrid { grid-template-columns: minmax(0, 1fr); }
    .decisionbox { position: static; order: -1; }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .topbar__inner { flex-wrap: wrap; gap: .55rem .8rem; padding-block: .65rem; }
    .topbar__rule { display: none; }
    .topbar__btn { display: inline-flex; }
    .topbar__spacer { display: none; }
    .topbar__account {
        display: none;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        padding: .75rem;
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        background: var(--c-surface);
        box-shadow: var(--sh-2);
    }
    .topbar__nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: .55rem;
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        background: var(--c-surface);
        box-shadow: var(--sh-2);
    }
    .navlink { width: 100%; border-radius: var(--r-sm); }
    .navlink[aria-current="page"] { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-accent-ink); box-shadow: none; }
    .navlink[aria-current="page"] .navlink__tail { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
    .nav-toggle:checked ~ .shell .topbar__nav { display: flex; }
    .nav-toggle:checked ~ .shell .topbar__account { display: flex; }
    .nav-toggle:checked ~ .shell .topbar__scrim { display: block; }
    .topbar__scrim {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(10, 23, 64, .28);
    }

    .work__body { padding: 1.5rem 1rem 3rem; }
    .wizard { grid-template-columns: minmax(0, 1fr); }
    .wizard__rail { position: static; }
    .stepper { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; }
    .step:not(:last-child)::before { display: none; }
    .step a { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .5rem .6rem; }
    .phases { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .gate__split { grid-template-columns: minmax(0, 1fr); }
    .gate__brand { min-height: 0; }
}

@media (max-width: 720px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .row-2, .row-3 { grid-template-columns: minmax(0, 1fr); }
    .row { grid-template-columns: minmax(0, 1fr); }
    .row__trail { justify-content: flex-start; }
    .row__cols { grid-template-columns: minmax(0, 1fr); }
    .dl { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .dl dt { margin-top: .55rem; }
    .dl dt:first-child { margin-top: 0; }
    .masthead, .hero { align-items: flex-start; }
    .offerhead__meta { text-align: left; }
    .phases { grid-template-columns: minmax(0, 1fr); }
    .phase { border-top-width: 1px; border-left: 4px solid var(--c-line-strong); }
    .phase--done { border-left-color: var(--c-ok); }
    .phase--now { border-left-color: var(--c-accent); }
    .codes { grid-template-columns: minmax(0, 1fr); }
    .panel__head, .panel__body, .panel__foot, .row { padding-inline: 1rem; }
    .work__foot-inner { flex-direction: column; }
}

@media print {
    .topbar, .work__foot, .decisionbox, .viewnav, .anchornav { display: none !important; }
    body { background: #fff; }
    .panel { box-shadow: none; border-color: #ddd; }
}