/* ============================================================
   OptionsApp Portal — App-Shell
   ------------------------------------------------------------
   Ergaenzt oa2.css um das, was ein Portal von einer Website
   unterscheidet: eine feste Navigations-Rail, eine schlanke
   Kopfleiste statt Marketing-Hero, und einen warmen Akzent,
   der signalisiert "du bist eingeloggt".

   Bernstein ist die Kennfarbe des Portals und wird sparsam
   gesetzt: Abzeichen, Aktiv-Markierung in der Rail, Portal-Chip
   in der Kopfleiste. Die dunkle Rail traegt die Unterscheidung
   zur Website, die Farbe bestaetigt sie nur.
   ============================================================ */

:root {
    --oa-rail-w: 264px;
    --oa-topbar-h: 3.5rem;
}

/* ---------- Grundgeruest ---------- */
body.oa-app {
    margin: 0;
    min-height: 100vh;
}

.oa-shell {
    display: grid;
    grid-template-columns: var(--oa-rail-w) 1fr;
    min-height: 100vh;
}

/* ---------- Navigations-Rail ---------- */
.oa-rail {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--oa-ink);
    color: rgb(255 255 255 / 0.72);
}

/* Markenblock */
.oa-rail__brand {
    padding: 1.25rem 1.25rem 0.9375rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.oa-rail__logo {
    display: block;
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Das Label, das die Seite eindeutig als Portal ausweist:
   Bernstein-Kontur auf dunklem Grund, flach. */
.oa-rail__badge {
    display: inline-block;
    margin-top: 0.625rem;
    padding: 0.1875rem 0.4375rem;
    border: 1px solid rgb(251 191 36 / 0.45);
    border-radius: 4px;
    color: #fbbf24;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* Navigation */
/* Vertikal knapp gehalten, damit die Rail bis etwa 800px Fensterhoehe
   ohne Scrollen passt: je Eintrag und Gruppe zwei Pixel weniger,
   Marke und Fuss ein wenig enger (Sebastian, 19.09.2026). */
.oa-rail__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.875rem 0.75rem 0.5rem;
}

.oa-rail__group {
    margin: 0 0 0.3125rem;
    padding: 0.625rem 0.75rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgb(255 255 255 / 0.55);   /* 0.32 ergab 2.87:1 */
}

.oa-rail__group:first-child { padding-top: 0; }

.oa-nav {
    list-style: none;
    margin: 0 0 0.375rem;
    padding: 0;
}

.oa-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 6px;
    color: rgb(255 255 255 / 0.72);
    font-size: 0.8438rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.oa-nav a:hover {
    background-color: rgb(255 255 255 / 0.06);
    color: #fff;
    text-decoration: none;
}

.oa-nav svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    opacity: 0.8;
}

.oa-nav .is-active {
    background-color: rgb(255 255 255 / 0.09);
    color: #fff;
    font-weight: 600;
}

.oa-nav .is-active svg { opacity: 1; }

/* Aktiv-Indikator: der warme Akzent, der die Rail vom
   blauen Auftritt der Website unterscheidet */
.oa-nav .is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.375rem;
    border-radius: 0 2px 2px 0;
    background: var(--oa-amber-marker);
}

/* Externe Links bekommen einen Pfeil, damit klar ist, dass
   sie das Portal verlassen */
.oa-nav__ext {
    margin-left: auto;
    width: 12px;
    height: 12px;
    opacity: 0.35;
}

/* Fusszeile der Rail: Nutzer + Logout */
.oa-rail__foot {
    flex: 0 0 auto;
    padding: 0.6875rem 0.75rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

.oa-rail__user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.5rem 0.625rem;
}

.oa-rail__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: #1d3355;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.oa-rail__name {
    min-width: 0;
    line-height: 1.3;
}

.oa-rail__name b {
    display: block;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.oa-rail__name span {
    display: block;
    color: rgb(255 255 255 / 0.55);   /* 0.40 ergab 3.76:1 */
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-logout {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 6px;
    background: transparent;
    color: rgb(255 255 255 / 0.66);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.oa-logout:hover {
    background-color: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.24);
    color: #fff;
    text-decoration: none;
}

.oa-logout svg { width: 18px; height: 18px; }

/* ---------- Arbeitsbereich ---------- */
.oa-work {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--oa-background);
}

/* Schlanke Kopfleiste statt Marketing-Hero: im Portal zaehlt
   Orientierung, nicht Inszenierung */
.oa-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--oa-topbar-h);
    padding: 0.75rem 2rem;
    background-color: var(--oa-surface);
    border-bottom: 1px solid var(--oa-border);
}

.oa-topbar__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--oa-text-primary);
}

.oa-topbar__sub {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--oa-text-muted);
}

.oa-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Werkbank: es gibt keine randlosen Baender mehr, also darf die
   Seite selbst den Rand tragen. Jedes Kind wird auf 1200px gekappt
   und zentriert - Karten, Kopfkarte und Raster teilen sich damit
   exakt dieselben Kanten. */
.oa-page {
    padding: 0 2rem 3.5rem;
    container-type: inline-size;   /* Raster nach Container, nicht Viewport */
}

.oa-page > * {
    max-width: 1200px;
    margin-inline: auto;
}

/* Dialoge, die eine Seite in ihren Inhaltsblock legt, liegen fixed
   ueber dem Schirm und duerfen die Breitenregel oben nicht erben -
   sonst endet das Modal bei 1200px und der Dialog rutscht nach links. */
.oa-page > .modal {
    max-width: none;
    margin-inline: 0;
}

.oa-page > :first-child {
    margin-top: 0;
}

/* Kein konkurrierender Abstand: der Sektionsrhythmus gehoert den
   Sektionen. Zwei Regeln, die denselben Zwischenraum setzen, ergeben
   einen Stapel ohne Gliederung. */

/* Portal-Chip: neutral, keine Warnfarbe. Die Bernstein-Kennung bleibt
   dem Abzeichen in der Rail vorbehalten; hier oben stuende sie neben dem
   Testzeitraum-Chip und saehe aus wie eine zweite Warnung (Sebastian,
   19.09.2026). Der Warn-Look gehoert dem Testzeitraum. */
.oa-portalchip {
    font-size: 0.6563rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--oa-text-secondary);
    background: var(--oa-surface-sunken);
    border: 1px solid var(--oa-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .oa-portalchip { display: none; }
}

/* Hinweisbanner (Abo laeuft aus o. ae.) */
.oa-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgb(180 83 9 / 0.25);
    border-radius: var(--oa-radius-lg);
    background-color: var(--oa-amber-hell);
    color: #6b4310;
    font-size: 0.875rem;
}

.oa-notice svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.oa-notice p { margin: 0; color: inherit; }
.oa-notice a { color: #92400e; font-weight: 600; text-decoration: underline; }

/* ---------- Schmale Viewports ----------
   Die Rail als horizontale Scrollleiste waere hier die falsche
   Loesung: bei neun Eintraegen liegt der groesste Teil ausserhalb
   des Bildschirms, teils auch der gerade aktive. Stattdessen wird
   sie zur Schublade, die ueber einen Button in der Kopfleiste
   auf- und zugeht. */
.oa-railtoggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.25rem;
    padding: 0;
    border: 1px solid var(--oa-border-strong);
    border-radius: var(--oa-radius);
    background-color: var(--oa-surface);
    color: var(--oa-text-secondary);
    cursor: pointer;
}

.oa-railtoggle svg { width: 20px; height: 20px; }

.oa-topbar__lead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.oa-railscrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: rgb(11 22 38 / 0.5);
    border: 0;
    padding: 0;
}

@media (max-width: 900px) {
    .oa-shell { grid-template-columns: 1fr; }

    .oa-railtoggle { display: inline-flex; }

    .oa-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 17rem;
        max-width: 82vw;
        height: 100vh;
        transform: translateX(-100%);
        /* Ohne visibility bleiben die elf Links der geschlossenen
           Schublade im Tab-Pfad: Tastatur- und Screenreader-Nutzer
           laufen erst durch die gesamte unsichtbare Navigation,
           bevor sie den Inhalt erreichen. */
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        box-shadow: 0 18px 44px rgb(11 22 38 / 0.4);
    }

    body.oa-rail-open .oa-rail {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease, visibility 0s;
    }
    body.oa-rail-open .oa-railscrim { display: block; }
    body.oa-rail-open { overflow: hidden; }

    /* .oa-page bleibt randlos, sonst kann das dunkle Band die Kante
       nicht mehr erreichen und die Kinder laufen ueber. Der Rand
       sitzt eine Ebene tiefer (siehe oa2-depth.css). */
    .oa-topbar { padding-inline: 1rem; }
    .oa-topbar__right { gap: 0.375rem; }
}

@media (prefers-reduced-motion: reduce) {
    .oa-rail { transition: none; }
}


/* ---------- Fusszeile im Arbeitsbereich ---------- */
.oa-workfoot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1rem 2rem;
    border-top: 1px solid var(--oa-border);
    background-color: var(--oa-surface);
    font-size: 0.7813rem;
    color: var(--oa-text-muted);
}

.oa-workfoot p { margin: 0; color: inherit; }

/* Fliesstext statt Flex-Reihe: fuenf gleich weit auseinanderstehende
   Woerter lasen sich wie eine zweite Navigation. */
.oa-workfoot nav {
    display: block;
    line-height: 1.9;
}

/* Der Trennpunkt gehoert zum Link, nicht in den Zwischenraum. Als
   eigenes Element rutschte er auf 375px allein an einen Zeilenanfang;
   so wandert er mit dem Wort davor. pointer-events haelt ihn aus der
   Klickflaeche, inline-block aus der Unterstreichung beim Ueberfahren. */
.oa-workfoot nav a:not(:last-child)::after {
    content: "\00b7";
    display: inline-block;
    padding-inline: 0.375rem;
    pointer-events: none;
}

.oa-workfoot a {
    color: var(--oa-text-muted);
    text-decoration: none;
}

.oa-workfoot a:hover {
    color: var(--oa-text-secondary);
    text-decoration: underline;
}

/* Rechtslinks und Widerrufsbutton rechts beisammen. Als drittes
   Kind der Fusszeile waere die Linkzeile durch space-between in die
   Mitte gerutscht. */
.oa-workfoot__rechts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Der Widerrufsbutton muss sich von den leisen Rechtslinks abheben
   (FIN LAW, 16.09.2026), aber im Verhaeltnis zu ihnen bleiben: gleiche
   Schriftgroesse, nur blau umrandet, beim Ueberfahren ein heller Ton
   statt Vollflaeche (Sebastian, 23.09.2026). Eigene Regel, weil
   .oa-workfoot a die Farbe sonst auf gedaempft zieht. */
.oa-workfoot a.oa-workfoot__widerruf {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--oa-brand);
    border-radius: 4px;
    color: var(--oa-brand);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.oa-workfoot a.oa-workfoot__widerruf:hover,
.oa-workfoot a.oa-workfoot__widerruf:focus-visible {
    color: var(--oa-brand);
    background-color: var(--oa-brand-soft);
    text-decoration: none;
}

/* ---------- Login-Layout ---------- */
/* Kein Rail, keine Kopfleiste: zentrierte Karte auf dem hellen
   Canvas, damit der Einstieg ruhig bleibt. Das Portal-Badge unter
   dem Logo sagt trotzdem, wo man gleich landet. */
body.oa-auth {
    margin: 0;
    min-height: 100vh;
    background-color: var(--oa-background);
}

.oa-auth__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 100vh;
    padding: 2.5rem 1rem 2rem;
}

.oa-auth__brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.oa-auth__brand img { height: 30px; width: auto; }

.oa-auth__brand:hover { text-decoration: none; }

.oa-auth__badge {
    padding: 0.1875rem 0.4375rem;
    border: 1px solid rgb(180 83 9 / 0.3);
    border-radius: 4px;
    background: var(--oa-amber-hell);
    color: var(--oa-amber);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.oa-auth__card {
    width: 100%;
    max-width: 27rem;
    padding: 2rem;
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-2xl);
}

.oa-auth__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--oa-text-primary);
}

.oa-auth__card > p {
    margin: 0.5rem 0 0;
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.oa-auth__body { margin-top: 1.5rem; }

/* Sonst addiert sich der Rand des letzten Absatzes auf die Polsterung
   der Karte: unten 48px, oben 32px. */
.oa-auth__body > *:last-child { margin-bottom: 0; }

/* In der schmalen Karte sind Buttons ueber die volle Breite ruhiger
   als eine linksbuendige Pille. */
.oa-auth__body form .btn { width: 100%; }
.oa-auth__body form .btn + .btn { margin-top: 0.625rem; }

.oa-auth__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.8125rem;
}

.oa-auth__legal a { color: var(--oa-text-muted); text-decoration: none; }
.oa-auth__legal a:hover { color: var(--oa-text-secondary); text-decoration: underline; }

@media (max-width: 900px) {
    .oa-workfoot { padding-inline: 1rem; }
}

/* ---------- Lesebreiten im Arbeitsbereich ----------
   .oa-page bringt schon den Aussenabstand mit; diese Helfer
   begrenzen nur die Zeilenlaenge, damit Fliesstext und schmale
   Formulare nicht ueber die volle Breite laufen. */
/* Lesebreiten begrenzen die ZEILENLAENGE, sie duerfen den Inhalt
   aber nicht zentrieren: sonst beginnt Approvals bei x=356 und das
   Cockpit bei x=296, und die Seiten verlieren ihre gemeinsame linke
   Kante. Deshalb nur rechts Luft lassen. */
/* Zwei Reviews widersprachen sich hier, und beide hatten recht:
   linksbuendig liess bei 1920px 760px leeres Raster rechts stehen,
   zentriert brach die gemeinsame linke Kante mit den breiten Seiten.

   Beides loest sich, wenn die Lesebreite gar nicht mehr den Container
   verengt. Alle Seiten teilen jetzt denselben 1200er-Deckel, und die
   Zeilenlaenge wird dort begrenzt, wo sie entsteht: an den Absaetzen
   selbst (max-width: 68ch, siehe oa2-depth.css). */
/* Lesebreite fuer Listen-, Formular- und Textseiten.

   Ganz ohne Begrenzung lief eine Checkbox-Zeile bei 1600px ueber
   1200px Breite, und die Aktion stand 700px vom Text entfernt.
   Zentriert wiederum brach die gemeinsame linke Kante mit den
   breiten Seiten.

   Auch "linksbuendig" am Element selbst ist falsch: es sitzt dann an
   der Kante der Seite, nicht an der der zentrierten 1200er-Spalte.

   Richtig ist, den Kasten unangetastet zu lassen und die KINDER zu
   deckeln. Die linke Kante bleibt damit exakt die der breiten Seiten,
   rechts entsteht bewusst Luft. */
.oa-measure > * { max-width: 56rem; }

/* Rechtstexte sind zum Ueberfliegen da, nicht zum Schmoekern. Sie
   bekommen mehr Breite, damit das Dokument kuerzer wird und weniger
   gescrollt werden muss.

   margin-inline: auto ist hier entscheidend. Ohne das erbt der Block
   die Linksbuendigkeit von .oa-measure und steht dann zwar in einer
   mittigen 1200er-Spalte, aber an deren linkem Rand - gemessen 112px
   mehr Luft rechts als links. Auf einer Seite ohne Navigation faellt
   das sofort auf. */
.oa-measure--breit > * {
    max-width: 74rem;
    margin-inline: auto;
}

.oa-measure--form {
    max-width: 34rem;
    margin-inline: auto;
}

/* Ausnahme: die zentrierten Karten der Fehler- und Hinweisseiten.
   Den Abstand nach oben liefert der Seitenrhythmus in oa2.css. */
.oa-measure--mitte,
.oa-measure--form.oa-measure--mitte { margin-inline: auto; }

/* Einleitungsabsatz im Seitenkoerper. Nimmt den Text auf, der zu lang
   fuer die Kopfleiste ist - die klebt beim Scrollen oben und darf
   nicht zum Textblock werden. */
.oa-lead {
    margin: 0 0 1.25rem;
    max-width: 68ch;
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
}