/* ============================================================
   OptionsApp Portal: Bauteile der Werkbank
   ------------------------------------------------------------
   Variante B: eine helle, flache Arbeitsflaeche. Keine Gitter,
   keine Glut, kein Glas, keine Einlauf-Animationen. Struktur
   entsteht durch 1px-Linien und konsistente Radien; die einzige
   Auszeichnung ist Gewicht und Farbe der Schrift.
   ============================================================ */

/* ---------- Kopfkarte ----------
   Vorher ein randloses dunkles Band. In der Werkbank ist der
   Abo-Kopf eine weisse Karte in der Spalte: oben die Abo-Zeile,
   darunter die Kennzahlenleiste, durch Linien getrennt. */
.oa-band {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    overflow: hidden;
    padding: 0;
}

/* Die Huellen stammen aus der Band-Zeit; heute reichen sie ihre
   Breite einfach durch. */
.oa-band__inhalt,
.oa-wash__inhalt {
    max-width: none;
    margin: 0;
    padding: 0;
}

.oa-band__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem 1.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
}

.oa-band__eyebrow {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oa-text-muted);
}

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

/* Titel und Zustand in einer Zeile. Der Chip gehoert zum Tarif: rechts
   bei den Knoepfen stand er in einer Reihe mit zwei Aktionen und las
   sich wie eine dritte. */
.oa-band__titelzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.oa-band__sub {
    margin: 0.375rem 0 0;
    color: var(--oa-text-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* Kennzahlenleiste: Zellen durch Linien getrennt, keine Kaesten.
   Die Spaltenzahl regeln die Container-Abfragen weiter unten. */
.oa-kennzahlen {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--oa-border);
}

.oa-kennzahl {
    padding: 1rem 1.5rem 1.125rem;
    border-top: 1px solid var(--oa-border);
    border-left: 0;
}

.oa-kennzahl:first-child { border-top: 0; }

/* Steht die Leiste ohne Kopf direkt in der Karte, wuerde ihre obere
   Linie die Kartenkante doppeln. */
.oa-band__inhalt > .oa-kennzahlen:first-child { border-top: 0; }

/* Tarif-Zelle im Cockpit: verlinkt, mit Statuszeile */
a.oa-kennzahl {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

a.oa-kennzahl:hover {
    background-color: var(--oa-surface-hover);
    color: inherit;
    text-decoration: none;
}

.oa-kennzahl__wert--klein {
    font-size: 1rem;
    line-height: 1.3;
    padding-top: 0.125rem;
}

.oa-kennzahl__status {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--oa-text-muted);
}

.oa-kennzahl__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oa-text-muted);
}

.oa-kennzahl__wert {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--oa-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Kein Sonderglanz mehr - der staerkste Wert steht vorn, das reicht. */

.oa-kennzahl__zusatz {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--oa-text-muted);
}

/* Status-Chip in der Kopfkarte: flach getoent, eckig. */
.oa-leuchte {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid rgb(4 120 87 / 0.2);
    border-radius: 4px;
    background-color: #ecfdf5;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--oa-positive);
}

.oa-leuchte__punkt {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #059669;
}

.oa-leuchte--aus {
    border-color: var(--oa-border);
    background-color: var(--oa-surface-sunken);
    color: var(--oa-text-secondary);
}

.oa-leuchte--aus .oa-leuchte__punkt {
    background: var(--oa-text-muted-weich);
}

/* ---------- Waesche: aufgeloest ----------
   Die getoente Zwischenflaeche gehoert zur Buehne der Website. In
   der Werkbank ist sie eine normale Sektion. */
.oa-wash {
    padding: 0;
    background: none;
    border: 0;
}

/* ---------- Schmale Viewports ---------- */
@media (max-width: 900px) {
    .oa-page { padding-inline: 1rem; }
    .oa-kennzahl { padding-inline: 1.125rem; }
    .oa-band__kopf { padding: 1rem 1.125rem; }
}

/* ---------- Sektions-Emblem ----------
   Ein kleines Zeichenquadrat vor dem Sektionstitel: Wiedererkennung
   je Abschnitt (Konto, Passwort, Discord, Tarif ...). Neutral grau
   mit Tintenglyphe; Marken wie Discord tragen ihre eigene Farbe -
   dieselbe Ausnahme wie bei den Plattform-Reitern. */
.oa-section__head--ikone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.625rem;
    align-items: center;
}

/* Das Emblem sitzt auf der Titelzeile, nicht zwischen Titel und
   Standzeile - mit zweizeiliger Standzeile schwebte es sonst im
   Zwischenraum. */
.oa-section__head--ikone .oa-sektikone { grid-row: 1; align-self: center; }
.oa-section__head--ikone .oa-section__sub { grid-column: 2; margin-top: 0.25rem; }

.oa-sektikone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--oa-radius);
    background: #eef2f7;
    color: var(--oa-text-primary);
}

.oa-sektikone svg { width: 1.0625rem; height: 1.0625rem; }

.oa-sektikone--discord {
    background: #eef0fe;
    color: #5865f2;
}

/* ---------- Wo Aktionen stehen duerfen ----------
   Regel: eine Aktion darf nur dann NEBEN dem Text stehen, wenn der
   Kopf kurz ist (Eyebrow + Titel). Sobald eine Standzeile dazukommt,
   schwebt der Button neben einem Absatz und verliert den Bezug - das
   war der Grund fuer "Buttons an der falschen Stelle".

   Mit Standzeile gilt deshalb: Aktion UNTER dem Text, linksbuendig,
   damit sie am selben Rand beginnt wie die Ueberschrift. */
.oa-section__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

/* Der Nebeneinander-Fall wird oben ausgerichtet, nicht mittig: sonst
   wandert der Button auf halbe Hoehe des Textblocks. */
.oa-section__head--row {
    align-items: flex-start;
}

.oa-section__head--row > :last-child {
    flex: 0 0 auto;
}

/* Emblem UND Aktion rechts (Erste Schritte): das Emblem-Raster bekommt
   eine dritte Spalte, die Aktion steht darin auf der Titelzeile. Ohne
   diese Regel fiele sie in die zweite Zeile unter das Emblem. Auf
   schmalen Schirmen rutscht sie unter die Standzeile, linksbuendig am
   Textrand, wie oa-section__aktionen. */
.oa-section__head--ikone.oa-section__head--row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    /* Das gap der Flex-Zeile wuerde hier als Zeilenabstand wirken und
       die Standzeile 16px tiefer setzen als auf den anderen Seiten. */
    row-gap: 0;
    column-gap: 0.625rem;
}

/* Die Aktion spannt ueber Titel- und Standzeile und haengt oben: nur in
   der ersten Zeile allein wuerde ihr 38px-Knopf die Zeile hoeher machen
   als das Emblem, und die Standzeile stuende 8px tiefer als auf den
   Seiten ohne Aktion. */
.oa-section__head--ikone.oa-section__head--row > .oa-section__kopfaktion {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
}

@media (max-width: 640px) {
    .oa-section__head--ikone.oa-section__head--row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .oa-section__head--ikone.oa-section__head--row > .oa-section__kopfaktion {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
        margin-top: 0.625rem;
    }
}

/* In der Lesehuelle laeuft die Standzeile bis zur Kartenkante. Bei
   68ch stand sie weit vor der Kante still, waehrend die Karte darunter
   bis zum Rand lief; beides halb sieht kaputt aus. Bis zum 21.09.2026
   hatte nur Approvals diese Ausnahme, jetzt gilt sie fuer alle Seiten
   in der Huelle: Approvals, Einstellungen, Support, Bug, Idee, Partner. */
.oa-measure .oa-section__sub { max-width: none; }

/* ---------- Login-Seiten ----------
   Flaches Canvas, eine Karte mit Kante und einem Hauch Schatten -
   sie ist das einzige Element der Seite. */
body.oa-auth {
    position: relative;
    background-color: var(--oa-background);
}

.oa-auth__card {
    box-shadow: 0 4px 16px rgb(15 28 46 / 0.05);
}

/* ---------- Raster nach Containerbreite ----------
   Viewport-Breakpoints luegen um die Railbreite: bei 1280px stehen
   dem Inhalt nur 952px zur Verfuegung, und auto-fill setzte drei
   Kacheln in die erste Reihe und liess die vierte allein. Der
   Container weiss es besser. */
/* Kennzahlen: einspaltig -> zweispaltig -> vierspaltig. Die
   Trennlinien wandern mit: links neben jeder Zelle, die nicht am
   Reihenanfang steht, oben vor jeder neuen Reihe. */
@container (min-width: 28rem) {
    .oa-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oa-kennzahl { border-top: 0; }
    .oa-kennzahl:nth-child(2n) { border-left: 1px solid var(--oa-border); }
    .oa-kennzahl:nth-child(n+3) { border-top: 1px solid var(--oa-border); }
}

/* Vier Spalten erst, wenn auch die Tarif-Zelle einzeilig bleibt -
   bei 44rem brach "OptionsApp Unlimited" um und streckte die Reihe. */
@container (min-width: 56rem) {
    .oa-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .oa-kennzahl { border-top: 0; border-left: 0; }
    .oa-kennzahl:not(:first-child) { border-left: 1px solid var(--oa-border); }
}

/* Vier Kacheln koennen damit nur 1x4, 2x2 oder 4x1 stehen - ein
   Waisenkind ist bei keiner Breite mehr moeglich. */

/* Eine Leiste aus genau zwei Zellen macht die Vierer-Stufe nicht mit:
   sie stuenden auf der halben Karte und rechts daneben waere nichts. */
@container (min-width: 56rem) {
    .oa-kennzahlen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oa-kennzahlen--zwei .oa-kennzahl:nth-child(2) {
        border-left: 1px solid var(--oa-border);
    }
}

/* ---------- Kompakte Aktion ----------
   Die kleine Stufe fuer Tabellenzeilen und Listen: gleiche Sprache,
   eine Nummer dichter. */
.btn.btn-kompakt {
    min-height: 2.125rem;
    /* Kurzbeschriftungen wie "ZIP" ergaben 40px schmale Knoepfe */
    min-width: 4.25rem;
    padding: 0.25rem 0.75rem;
    gap: 0.375rem;
    border-radius: var(--oa-radius);
    background: var(--oa-surface);
    border: 1px solid var(--oa-border-strong);
    color: var(--oa-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: none;
}

.btn.btn-kompakt:hover,
.btn.btn-kompakt:focus {
    background: var(--oa-surface);
    border-color: var(--oa-text-muted);
    color: var(--oa-text-primary);
}

.btn-kompakt .oa-btn-ikone {
    width: 0.875rem;
    height: 0.875rem;
}

/* Die eigentliche Aktion der Zeile: flaches Aktionsblau. */
.btn.btn-kompakt--stark {
    background: var(--oa-brand);
    border-color: transparent;
    color: #fff;
}

.btn.btn-kompakt--stark:hover,
.btn.btn-kompakt--stark:focus {
    background: #1848b8;
    border-color: transparent;
    color: #fff;
}

/* ---------- Tabelle ----------
   Sie stand ohne eigene Flaeche auf dem gemusterten Canvas und war
   dadurch nicht als Tabelle lesbar. Sie bekommt jetzt dieselbe
   Flaeche wie eine Karte, der Kopf sitzt auf der vertieften Ebene. */
.oa-table-wrap {
    overflow-x: auto;
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
}

.oa-tabelle {
    margin: 0;
    width: 100%;
}

.oa-tabelle thead th {
    background-color: var(--oa-surface-sunken);
    border-bottom: 1px solid var(--oa-border);
    color: var(--oa-text-secondary);  /* muted lag auf der vertieften Flaeche unter AA */
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.oa-tabelle thead th:first-child { border-start-start-radius: var(--oa-radius-xl); }
.oa-tabelle thead th:last-child { border-start-end-radius: var(--oa-radius-xl); }

.oa-tabelle tbody td {
    padding: 1.125rem 1rem;
    border-bottom: 1px solid var(--oa-border);
    vertical-align: top;
}

/* Die Aktionsspalte traegt 34px-Knoepfe; damit deren erste Zeile mit
   dem Text der Nachbarzellen fluchtet, sitzt sie hoeher. */
.oa-tabelle tbody td:last-child { padding-block: 0.75rem; }

.oa-tabelle tbody tr:last-child td { border-bottom: 0; }

.oa-tabelle th:last-child,
.oa-tabelle td:last-child { text-align: right; }

/* Zahlen tabellarisch: nur so stehen Versionen und Mengen
   untereinander. */
.oa-num {
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

/* Vertiefte Flaeche fuer Lesedaten */
.oa-well {
    background: var(--oa-surface-sunken);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    padding: 1rem 1.125rem;
}

/* ---------- Tabelle auf schmalen Schirmen ----------
   Vier Spalten passen bei 390px nicht. Statt den Nutzer horizontal
   scrollen zu lassen, bis er die Aktionsspalte findet, fallen die
   beiden nachrangigen Spalten weg: Version und Download bleiben,
   das Datum wandert unter die Version. */
@media (max-width: 640px) {
    .oa-tabelle thead th:nth-child(2),
    .oa-tabelle tbody td:nth-child(2),
    .oa-tabelle thead th:nth-child(3),
    .oa-tabelle tbody td:nth-child(3) {
        display: none;
    }

    .oa-tabelle td:first-child { width: 45%; }

    /* Die Downloadtabelle zeigt hier seit dem 21.09.2026 drei Spalten
       statt zwei: Version, Konstanten, Download. Mit 45 Prozent fuer
       die Version lief sie seitlich aus dem Rahmen. */
    .oa-downloadtabelle td:first-child { width: auto; }

    /* Datum als zweite Zeile unter der Versionsnummer */
    .oa-tabelle td[data-datum]::after {
        content: attr(data-datum);
        display: block;
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        font-variant-numeric: normal;
        color: var(--oa-text-muted);
    }

    .oa-tabelle td:last-child .btn { margin-bottom: 0.25rem; }
}

/* ---------- Trefferflaechen ----------
   Gemessen: die Approvals-Checkbox war 18.4x18.4px, also 17 Prozent
   der geforderten 44x44. Sie ist die einzige Funktion dieser Seite.
   Die sichtbare Box bleibt klein, die Trefferflaeche waechst. */
#approval-card .approval-toggle {
    position: relative;
}

#approval-card .approval-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.approval-label {
    display: block;
    cursor: pointer;
}

@media (pointer: coarse) {
    /* Auf Fingerbedienung wachsen alle kleinen Ziele */
    .oa-railtoggle { width: 2.75rem; height: 2.75rem; }
    .oa-nav a { padding-block: 0.75rem; }
    .oa-logout { padding-block: 0.75rem; }
    .btn.btn-kompakt { height: 2.75rem; }
    .oa-workfoot nav a { display: inline-block; padding-block: 0.5rem; }
}

/* ---------- Meldungen buendig zum Inhalt ----------
   Als direktes Seitenkind lief die Meldung randlos und ihr Radius
   wurde am Bildschirmrand abgeschnitten; auf 901px ragte sie 32px
   ueber die Inhaltsspalte hinaus. */
.oa-page > .alert {
    max-width: 1200px;
    margin-inline: auto;
    /* klebte als erstes Kind direkt an der Kopfleiste */
    margin-block: 1.5rem 0;
}

.oa-page > .alert + * { margin-top: 1.25rem; }

/* ---------- Kopfleiste auf schmalen Schirmen ----------
   Die Standzeile brach auf zwei Zeilen um und liess die klebende
   Kopfleiste auf 96px wachsen - zwoelf Prozent eines 360er-Schirms,
   dauerhaft belegt. Unter 600px traegt sie nur noch den Titel. */
@media (max-width: 600px) {
    .oa-topbar__sub { display: none; }
}

/* ---------- Zeilenlaenge ----------
   Gemessen 84 Zeichen bei 768px und 99 bei 900px. Ueber etwa 75
   verliert das Auge beim Zeilenwechsel den Anschluss. */
.oa-section__sub,
.oa-card p {
    max-width: 68ch;
}

/* Rechtstexte ausgenommen: dort stand der Text 200px vor der
   Kartenkante still, weil 68ch schmaler ist als die Karte. Entweder
   fuellt der Text die Flaeche oder die Flaeche folgt dem Text -
   beides halb sieht kaputt aus. Hier fuellt der Text. */
.oa-legal p,
.oa-legal li,
.oa-legal td { max-width: none; }

/* ---------- Videoraster nach Container ----------
   Bootstraps row-cols-lg-2 greift bei 992px Viewport, obwohl die
   Arbeitsspalte dann erst 728px hat: die Videos schrumpften von
   620px auf 278px Breite - auf einem iPad kleiner als auf einem
   Telefon. Genau der Fehler, vor dem die Rail-Kommentare warnen. */
.oa-videoraster {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@container (min-width: 62rem) {
    .oa-videoraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 82rem) {
    .oa-videoraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Erfolgs-Ikone ---------- */
.oa-erfolg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--oa-positive-light);
    color: #047857;
}

.oa-erfolg svg { width: 24px; height: 24px; }

/* ---------- Approvals: Zustaende als Token ----------
   Vorher standen die Farben als Hexwerte im Template und im Skript.
   #94a3b8 auf Weiss ergab 2.56:1, das Gruen 3.77:1 - beide unter AA. */
.approval-status.ist-frei { color: #047857; }      /* 4.83:1 */
.approval-status.ist-pruefen { color: #b45309; }   /* 4.52:1 */
.approval-status.ist-offen { color: var(--oa-text-muted); }  /* 4.76:1 */

/* ---------- Zeilen reagieren auf den Zeiger ----------
   Tabellen- und Listenzeilen waren die einzigen Flaechen ohne
   Hover-Zustand. */
.oa-tabelle tbody tr,
#approval-card .list-group-item {
    transition: background-color 0.15s ease;
}

.oa-tabelle tbody tr:hover,
#approval-card .list-group-item:hover {
    background-color: var(--oa-surface-hover);
}

/* ---------- Leistungsliste ----------
   Zwei Spalten aus Begriff und Erklaerung. Eine Definitionsliste ist
   hier die ehrliche Auszeichnung: es sind Begriffspaare, keine
   Tabellendaten und keine Aufzaehlung. */
.oa-leistungen {
    display: grid;
    gap: 0;
    margin: 0;
}

.oa-leistungen > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--oa-border-light);
}

.oa-leistungen > div:first-child { padding-top: 0; }
.oa-leistungen > div:last-child { padding-bottom: 0; border-bottom: 0; }

@container (min-width: 40rem) {
    .oa-leistungen > div {
        grid-template-columns: 15rem 1fr;
        gap: 1.5rem;
        align-items: baseline;
    }
}

.oa-leistungen dt {
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.oa-leistungen dd {
    margin: 0;
    color: var(--oa-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Zum Laufzeitende gekuendigt: weder gruen noch grau, sondern warnend */
.oa-leuchte--endet {
    border-color: rgb(180 83 9 / 0.25);
    background-color: var(--oa-amber-hell);
    color: var(--oa-amber);
}

.oa-leuchte--endet .oa-leuchte__punkt {
    background: #d97706;
}

/* ---------- Tafel: Reiter plus Tabelle ----------
   Die Reiter waehlen aus, was in der Tabelle steht. Freistehend
   darueber wirkten sie wie ein zweites, unverbundenes Bauteil. */
.oa-tafel {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    overflow: hidden;
}

.oa-tafel__reiter {
    margin: 0;
    padding: 0 1.25rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--oa-border);
    background-color: var(--oa-surface);
}

/* Reiterbeschriftung buendig zur ersten Spalte: die Unterstreichung
   ist genau so breit wie das Wort, nicht wie das Polster. */
.oa-tafel__reiter .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.9375rem 0.125rem;
}

/* Plattform-Glyphen in den Reitern: die einzigen Farbtupfer der
   Werkbank ausserhalb von Blau und Bernstein - Markenfarben der
   Plattformen, bewusst nicht dem Systemblau angeglichen. */
.oa-tab-ikone {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: 0 0 auto;
}

.oa-tafel .oa-tabelle thead th:first-child,
.oa-tafel .oa-tabelle tbody td:first-child { padding-inline-start: 1.25rem; }

.oa-tafel .oa-tabelle thead th:last-child,
.oa-tafel .oa-tabelle tbody td:last-child { padding-inline-end: 1.25rem; }

.oa-tafel .oa-table-wrap {
    border: 0;
    border-radius: 0;
}

.oa-tafel .oa-tabelle thead th:first-child,
.oa-tafel .oa-tabelle thead th:last-child {
    border-radius: 0;
}

/* ---------- Konstantentabelle: Name, Beschreibung, Wert ----------
   Die Konstantentabelle ist eine Lesetabelle, keine Aktionstabelle. Drei
   Abweichungen von der Downloadtabelle: der Wert steht links statt
   rechts (er ist Text wie "15 Sekunden am Verfallstag, sonst 300
   Sekunden", nicht eine Zahlenspalte), die Namensspalte ist ein
   Zeilenkopf, und auf schmalen Schirmen faellt keine Spalte weg.

   Die Zeile ist dichter und kleiner als in der Downloadtabelle
   (0.875rem Schrift, Polster 0.625rem, Zeilenabstand 1.4 gegen 1rem,
   1.125rem und 1.45): gerechnet wird mit 20 bis 30 Konstanten, und die
   stehen sonst auf einer halben Wegstrecke Scrollen (Sebastian,
   21.09.2026). Die Schriftgroesse ist die der Zahlenspalten im Portal
   (.oa-num), also keine neue Stufe. */
.oa-konstanten tbody th,
.oa-konstanten tbody td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--oa-border);
    vertical-align: top;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.4;
}

.oa-konstanten tbody tr:last-child th,
.oa-konstanten tbody tr:last-child td { border-bottom: 0; }

/* Die Downloadtabelle stellt ihre letzte Spalte rechts und gibt ihr
   weniger Polster, weil dort Knoepfe stehen. Hier steht Text - beides
   muss zurueckgenommen werden, und zwar mit derselben Spezifitaet. */
.oa-konstanten thead th:last-child,
.oa-konstanten tbody td:last-child { text-align: left; }

.oa-konstanten tbody td:last-child { padding-block: 0.625rem; }

/* Der Name traegt die Zeile, deshalb etwas mehr Gewicht als der
   Fliesstext daneben - aber kein eigener Kasten und keine Farbe. */
.oa-konstanten tbody th {
    font-weight: 600;
    color: var(--oa-text-primary);
}

/* Die Beschreibung bekommt den Platz, Name und Wert bleiben schmal. */
.oa-konstanten th:first-child,
.oa-konstanten td:first-child { width: 22%; }

.oa-konstanten th:last-child,
.oa-konstanten td:last-child { width: 24%; }

.oa-konstanten td:last-child { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    /* Die Downloadtabelle darf zwei Spalten streichen, weil Version
       und Download allein tragen. Hier stuende dann nur noch der Name
       da - also stapelt die Zeile, statt Spalten zu verlieren. */
    .oa-konstanten thead { display: none; }

    /* Die Ausblendregel der Downloadtabelle trifft hier Beschreibung
       und Wert, also genau das, was die Tabelle zu sagen hat. */
    .oa-konstanten tbody td:nth-child(2),
    .oa-konstanten tbody td:nth-child(3) { display: block; }

    .oa-konstanten tbody,
    .oa-konstanten tbody tr { display: block; }

    .oa-konstanten tbody tr {
        padding-block: 1.125rem;
        border-bottom: 1px solid var(--oa-border);
    }

    .oa-konstanten tbody tr:last-child { border-bottom: 0; }

    .oa-konstanten tbody th,
    .oa-konstanten tbody td {
        display: block;
        padding: 0 1rem;
        border-bottom: 0;
    }

    /* Die Spaltenbreiten von oben gelten weiter und pressten den
       Namen in eine 22-Prozent-Spalte, obwohl daneben nichts steht. */
    .oa-konstanten tbody th:first-child,
    .oa-konstanten tbody td:last-child { width: auto; }

    .oa-konstanten tbody td { margin-top: 0.625rem; }

    /* Ohne Kopfzeile braucht jede Zelle ihre eigene Beschriftung. */
    .oa-konstanten tbody td::before {
        content: attr(data-spalte);
        display: block;
        margin-bottom: 0.125rem;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--oa-text-muted);
    }
}


/* ---------- Reihe: Listeneintrag mit Zustand und Aktion ----------
   Fuer Freischaltungen und aehnliche Listen. Vier Spalten: Schalter,
   Text, Zustand, Aktion. Ohne die Zustands-Pille stand der Zustand
   als grauer Fliesstext da und war als Zustand nicht zu erkennen;
   ohne den Knopf war "Details" ein blosser Textlink. */
.oa-reihen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oa-reihe {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--oa-border);
}

.oa-reihe:last-child { border-bottom: 0; }

.oa-reihe__titel {
    display: block;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--oa-text-primary);
    cursor: pointer;
}

.oa-reihe__sub {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--oa-text-secondary);
}

/* Schmaler Container: Zustand und Aktion rutschen unter den Text,
   buendig mit ihm - nicht unter den Schalter. */
@container (max-width: 40rem) {
    .oa-reihe {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.75rem;
        /* Gestapelt wird der Textblock hoch. Mittig ausgerichtet stuende
           der Schalter dann neben der Beschreibung statt neben dem Titel. */
        align-items: start;
    }
    .oa-reihe > .approval-toggle { margin-top: 0.125rem; }
    .oa-reihe > .oa-status,
    .oa-reihe > .btn { grid-column: 2; justify-self: start; }
}

/* ---------- Zustands-Pille ---------- */
.oa-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.oa-status::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background-color: currentcolor;
    flex: 0 0 auto;
}

.oa-status.ist-frei {
    background-color: #ecfdf5;
    color: #047857;
    box-shadow: inset 0 0 0 1px rgb(4 120 87 / 0.18);
}

.oa-status.ist-pruefen {
    background-color: #fff7ed;
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgb(180 83 9 / 0.20);
}

.oa-status.ist-offen {
    background-color: var(--oa-surface-sunken);
    /* nicht --oa-text-muted: auf der abgesenkten Flaeche nur 4.27:1 */
    color: var(--oa-text-secondary);
    box-shadow: inset 0 0 0 1px rgb(12 42 74 / 0.12);
}

/* ---------- Einbettung: fremdes Formular in eigener Flaeche ----------
   Die Fillout-Formulare bringen ihren eigenen grauen Grund mit. In einer
   .oa-card sass dieser graue Block in einem weissen Rahmen, mit breiten
   toten Raendern links und rechts. Die Einbettung ist deshalb selbst die
   Flaeche: gleicher Radius, gleicher Schatten, keine Polsterung. */
.oa-einbettung {
    max-width: 42rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    overflow: hidden;
    background-color: var(--oa-surface);
}

.oa-einbettung > div,
.oa-einbettung iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* ---------- Karte als Aktionszeile ----------
   Text links, Knopf rechts. Ohne sie stand ein einzelner Knopf nackt auf
   der Seitenflaeche, waehrend die Nachbarabschnitte Karten waren. */
.oa-karte-aktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.oa-karte-aktion > p { margin: 0; max-width: 52ch; }

/* ---------- Formular in der Karte ----------
   Einzeilige Felder ueber die volle Kartenbreite sind unbrauchbar: ein
   Vorname braucht keine 840 Pixel. Mehrzeilige Felder bleiben breit. */
.oa-formular input.form-control,
.oa-formular select.form-select { max-width: 26rem; }

.oa-formular .btn { margin-top: 0.5rem; }

/* Zwei nebeneinander, sobald Platz ist */
@container (min-width: 34rem) {
    .oa-formular__paar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }
    .oa-formular__paar input.form-control { max-width: none; }
}

/* ---------- Mittige Karte ----------
   Bestaetigungs- und Fehlerseiten. Vorher war nur ein Teil des Inhalts
   zentriert, der Rest linksbuendig - die Karte hatte zwei Achsen. */
.oa-mitte { text-align: center; }
.oa-mitte .alert { text-align: center; }
.oa-mitte .oa-stat { text-align: center; }

/* Zwei Kennzahlen nebeneinander, immer gleich hoch. Ueber das Raster
   statt ueber Bootstrap-Spalten, sonst richtet sich die Hoehe nach dem
   laengeren Etikett und die Kaesten stehen versetzt. */
/* Traegt zwei oder drei Werte: seit der Aktien-Kennzahl sind es
   drei. auto-fit statt fester Spalten, damit nichts umbricht und
   auf dem Telefon sauber gestapelt wird. */
.oa-zahlenpaar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.oa-zahlenpaar .oa-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- Feld-Auslese ----------
   Ein Wert, der wie ein Formularfeld gelesen wird, aber nicht
   editierbar ist. Die Kennzahl-Karte (.oa-stat) war dafuer zu laut:
   Mono-Versalien mit 0.22em Sperrung neben normalen Feld-Labels. */
.oa-feld {
    max-width: 26rem;
    background-color: var(--oa-surface-sunken);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    padding: 0.75rem 1rem;
}

.oa-feld__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--oa-text-secondary);
}

.oa-feld__wert {
    display: block;
    font-weight: 600;
    color: var(--oa-text-primary);
    overflow-wrap: anywhere;
}

/* ---------- Zustimmungsstrecke ----------
   Die drei Vertragsdokumente vor der ersten Nutzung. Zwei Befunde aus
   dem Test am 15.09.2026: die Navigation stand daneben und man konnte
   sie umgehen, und die Fortschrittsanzeige "Dokument 1 von 3" aus der
   alten Fassung war beim Redesign verloren gegangen. */
.oa-shell--fokus { grid-template-columns: minmax(0, 1fr); }

/* Die Kopfleiste behaelt ihre normale Polsterung, damit Logo und
   Portal-Abzeichen an den Aussenkanten sitzen. Nur die Ansage wird
   herausgeloest und auf die Kante des Dokumenttitels gesetzt -
   dieselbe Spaltenrechnung wie .oa-page plus die Einrueckung des
   Dokumentkopfs. Ein eingerueckter Kasten haette beides mitgezogen. */
.oa-shell--fokus .oa-topbar { position: relative; }

.oa-topbar__marke {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.oa-topbar__marke img { height: 22px; width: auto; }

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

/* Die Ansage sitzt auf der Kante des Dokumenttitels, rueckt aber nie
   hinter das Logo zurueck. Absolut positioniert, weil sich der
   Prozentwert nur so auf die Kopfleiste bezieht - im Fluss bezoege er
   sich auf den Flex-Kasten daneben und die Rechnung ginge ins Leere.
   Unterhalb von rund 1520px liegt die Spaltenkante links vom Logo,
   dort greift die Untergrenze. Keine Schwelle geraten, sondern
   gerechnet. */
.oa-shell--fokus { --oa-marke-breite: 132px; }

.oa-topbar__schritt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: max(
        calc(2rem + var(--oa-marke-breite) + 0.75rem),
        calc(max(2rem, (100% - 74rem) / 2) + 0.75rem));
}

@media (max-width: 900px) {
    .oa-topbar__schritt {
        font-size: 0.9375rem;
        left: calc(1rem + var(--oa-marke-breite) + 0.75rem);
    }
}

/* Auf dem Telefon frisst das Logo 132 von 320 Pixeln, und der Ansage
   bleiben 160 - zu wenig, sie braecke auf zwei Zeilen. Waehrend einer
   gefuehrten Strecke ist die Ansage wichtiger als die Marke. */
@media (max-width: 600px) {
    .oa-shell--fokus .oa-topbar__marke { display: none; }
    .oa-topbar__schritt { left: 1rem; }
}

.oa-fortschritt {
    margin-bottom: 2rem;
    padding: 1.5rem 1.5rem 1.625rem;
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
}

/* Der Zaehler ist die Hauptaussage des Blocks und traegt die
   Bernstein-Kennfarbe des Portals. */
.oa-fortschritt__zaehler {
    margin: 0 0 1.125rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--oa-amber);
}

/* Die drei Schritte als Kette: erledigt, aktuell, kommt noch. */
.oa-fortschritt__punkte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

/* Jede Stufe eine eigene Flaeche statt nur Text: der Block bekommt
   damit Gewicht und man sieht auf einen Blick, wo man steht. */
.oa-fortschritt__punkte li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    background-color: var(--oa-surface-sunken);
    font-size: 0.9375rem;
    color: var(--oa-text-muted);
}

.oa-fortschritt__punkte li::before {
    counter-increment: schritt;
    content: counter(schritt);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 1px solid var(--oa-border-strong);
    background-color: var(--oa-surface);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

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

.oa-fortschritt__punkte .ist-dran {
    color: var(--oa-text-primary);
    font-weight: 600;
    background-color: var(--oa-surface);
    border-color: var(--oa-brand);
    box-shadow: inset 0 0 0 1px var(--oa-brand);
}

.oa-fortschritt__punkte .ist-dran::before {
    border-color: transparent;
    background-color: var(--oa-brand);
    color: #fff;
}

.oa-fortschritt__punkte .ist-fertig {
    color: var(--oa-positive);
    background-color: #ecfdf5;
    border-color: rgb(4 120 87 / 0.25);
}

.oa-fortschritt__punkte .ist-fertig::before {
    content: "\2713";
    border-color: rgb(4 120 87 / 0.3);
    background-color: #ecfdf5;
    color: var(--oa-positive);
}

/* Ohne Breitendeckel: sonst endete die Trennlinie mitten im Block
   und der Satz brach um, obwohl daneben Platz frei war. */
.oa-fortschritt__hinweis {
    margin: 1.125rem 0 0;
    padding-top: 1.125rem;
    border-top: 1px solid var(--oa-border);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--oa-text-secondary);
}

/* Der Dokumenttitel war auf Sektionsgroesse geschrumpft und ging
   neben dem Fliesstext unter. Er ist die Ueberschrift der Seite. */
/* Eingerueckt auf die Polsterung der Karten darunter. Buendig zur
   Kartenkante stand der Titel 25px links von jedem anderen Text der
   Seite und wirkte herausgerutscht. */
/* Auf halber Strecke zwischen Kartenkante und Kartentext: buendig zur
   Kante wirkte der Kopf herausgerutscht, buendig zum Text zu weit
   eingerueckt. */
.oa-dokument__kopf {
    margin-bottom: 1rem;
    padding-inline: 0.75rem;
}

.oa-dokument__stand {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--oa-text-muted);
}

/* Die rechtliche Einleitung aus dem Produktivstand. Dort ist sie fett;
   unter einem fetten Titel wird daraus eine zweite Ueberschrift, die
   mit ihm konkurriert. Normales Gewicht, gedaempfte Farbe - aber
   nicht so hell wie die Standzeile: das Datum ist Beiwerk, dieser
   Satz ist Teil der Zustimmung. */
.oa-dokument__einleitung {
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--oa-text-secondary);
}

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

/* ---------- Unterschriftsblock ----------
   Vorher eine Karte mit bernsteinfarbener Kante links. Die Kante ist
   im Kanon das Zeichen fuer Hervorhebung, nicht fuer eine Eingabe.
   Jetzt eine eigene Flaeche: Kopf, abgesetztes Eingabefeld, Ausblick. */
.oa-unterschrift {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    overflow: hidden;
}

.oa-unterschrift__kopf {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--oa-border);
}

.oa-unterschrift__titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oa-text-primary);
}

/* Kein Breitendeckel: der Satz brach um, obwohl rechts daneben die
   halbe Karte frei war. */
.oa-unterschrift__satz {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--oa-text-secondary);
}

.oa-unterschrift__form {
    padding: 1.25rem 1.5rem 1.5rem;
    background-color: var(--oa-surface-sunken);
}

.oa-unterschrift__anleitung {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--oa-text-secondary);
}

/* Der hinterlegte Name als Vorlage: gross genug zum Abschreiben. */
.oa-unterschrift__name {
    margin: 0.375rem 0 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--oa-text-primary);
}

.oa-unterschrift__form input.form-control { max-width: 26rem; }

.oa-unterschrift__weiter {
    margin: 0;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--oa-border);
    font-size: 0.8125rem;
    color: var(--oa-text-muted);
}

/* ---------- Partnerseite ----------
   Zurueckhaltend gehalten: die Seite nennt Anbieter, sie bewirbt sie
   nicht. Keine Farbflaechen - eine Karte je Partner in derselben
   Sprache wie der Rest des Portals. Der Einleitungstext ist seit dem
   21.09.2026 die Standzeile des Sektionskopfs, keine eigene Karte
   mehr: so beginnt die Seite wie jede andere mit Emblem, Titel und
   Standzeile.

   Die Werbemarke ist bewusst gut lesbar und nicht dezent. Sie ist eine
   Pflichtangabe, kein Zierrat; wer sie uebersieht, macht sie falsch. */
.oa-partner + .oa-partner { margin-top: 1.25rem; }

/* Raster statt Umbruch: Name links, Logo rechts in derselben Zeile,
   die Kurzzeile darunter ueber die volle Breite. So steht das Logo
   auch auf dem Telefon oben rechts, statt unter den Text zu rutschen. */
.oa-partner__kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.oa-partner__name { grid-column: 1; }
.oa-partner__kurz { grid-column: 1 / -1; }

/* Logo in Tinte statt Markenfarbe: die Seite nennt den Partner, sie
   tritt nicht in seinem Kleid auf. */
.oa-partner__logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    height: 2rem;
    width: auto;
    max-width: 10rem;
}

.oa-partner__name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--oa-text-primary);
}

.oa-partner__kurz {
    margin: 0.25rem 0 0;
    color: var(--oa-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.oa-partner__text {
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.oa-partner__text p { margin: 0 0 0.75rem; }
.oa-partner__text p:last-child { margin-bottom: 0; }

/* Der Vorteil ist der Grund, warum ein Mitglied hier ueberhaupt
   weiterliest - also bekommt er die einzige Farbflaeche der Seite.
   Bernstein ist die Portalfarbe, nicht die Farbe des Anbieters: die
   Seite nennt Partner, sie tritt nicht in deren Kleid auf. */
.oa-vorteil {
    margin-top: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--oa-amber-marker);
    border-radius: var(--oa-radius);
    background: var(--oa-amber-hell);
}

.oa-vorteil__titel {
    margin: 0;
    color: var(--oa-amber);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.oa-vorteil__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    margin: 0.625rem 0 0;
}

.oa-vorteil__label {
    color: var(--oa-amber);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Der Code wird abgeschrieben, also umbrechbar und auswaehlbar. */
.oa-vorteil__code {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--oa-amber-marker);
    border-radius: var(--oa-radius-sm);
    background: #fff;
    color: var(--oa-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    word-break: break-all;
}

.oa-vorteil__hinweis {
    flex: 1 1 10rem;
    min-width: 0;
    color: var(--oa-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Die Offenlegung steht unter dem Knopf, klein aber nicht versteckt:
   grau wie der Fliesstext daneben, nicht heller. */
.oa-partner__offenlegung {
    margin: 0.875rem 0 0;
    color: var(--oa-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.oa-partner__aktion { margin-top: 1.25rem; }

/* ---------- Dialoge ----------
   Ein Dialog ist die eine Stelle, an der die Werkbank Hoehe zeigt:
   er liegt ueber der abgedunkelten Seite, also traegt er den Schatten.
   Alles andere bleibt wie im Portal - 1px Linien, ruhige Flaechen,
   Blau nur auf der Aktion. */
.oa-dialog .modal-dialog {
    --bs-modal-width: min(32rem, calc(100vw - 2rem));
}

/* Lange Texte mit Sprachwahl: die Freischaltungen und der Hinweis. */
.oa-dialog--breit .modal-dialog {
    --bs-modal-width: min(60rem, calc(100vw - 3rem));
}

.oa-dialog .modal-content,
.oa-dialog .modal-body {
    background: var(--oa-surface);
}

.oa-dialog .modal-content {
    border-radius: var(--oa-radius-lg);
}

/* Kurze Rueckfragen wie Abmelden: schmal, eine Karte ohne Trennlinien.
   Titel, Frage und Knoepfe stehen in einem Block - Linien sind fuer
   Dialoge, die scrollen. */
.oa-dialog--knapp .modal-dialog {
    --bs-modal-width: min(26rem, calc(100vw - 2rem));
}

.oa-dialog--knapp .modal-header {
    border-bottom: 0;
    padding: 1.375rem 1.375rem 0;
}

.oa-dialog--knapp .oa-dialog__titel { font-size: 1.0625rem; }

.oa-dialog--knapp .modal-body { padding: 0.625rem 1.375rem 1.375rem; }

.oa-dialog--knapp .modal-body p {
    margin: 0;
    color: var(--oa-text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.oa-dialog--knapp .oa-dialog__neben {
    margin-top: 0.25rem;
    color: var(--oa-text-muted);
    font-size: 0.875rem;
}

.oa-dialog--knapp .modal-footer {
    border-top: 0;
    gap: 0.5rem;
    padding: 0 1.375rem 1.375rem;
}

.oa-dialog--knapp .modal-footer > * { margin: 0; }

/* Kopfzeile: Titel links, Sprachwahl rechts davor, Schliessen aussen.
   Wird es eng, rutscht die Sprachwahl unter den Titel; das X bleibt
   oben rechts. */
.oa-dialog__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
    padding: 0.875rem 1.25rem;
}

.oa-dialog__titel {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--oa-text-primary);
}

.oa-dialog__kopf .btn-close {
    flex: 0 0 auto;
    order: 2;
    margin: 0;
    padding: 0.5rem;
}

/* Sprachwahl als Schalter statt Reiter: eine vertiefte Schiene, das
   gewaehlte Segment steht weiss darauf. Nimmt in der Kopfzeile keinen
   Platz nach unten. Die Klassen nav/nav-link bleiben, weil das Skript
   die aktive Sprache darueber setzt. */
.oa-dialog__sprache {
    display: inline-flex;
    flex: 0 0 auto;
    order: 1;
    margin: 0;
    padding: 0.1875rem;
    gap: 0.125rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    background: var(--oa-surface-sunken);
    list-style: none;
}

.oa-dialog__sprache .nav-link {
    padding: 0.25rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--oa-radius-sm);
    color: var(--oa-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    transition: none;
}

.oa-dialog__sprache .nav-link:hover { color: var(--oa-text-primary); }

.oa-dialog__sprache .nav-link.active {
    background: var(--oa-surface);
    border-color: var(--oa-border-strong);
    color: var(--oa-text-primary);
}

/* Schmal: Titel und X teilen sich die erste Zeile, die Sprachwahl
   kommt darunter. Ohne die feste Titelbreite blieb das X sonst mal
   rechts, mal am Anfang der zweiten Zeile. */
@media (max-width: 575.98px) {
    .oa-dialog__titel { flex-basis: calc(100% - 3rem); }
    .oa-dialog__sprache { order: 3; }
}

.oa-dialog__inhalt { padding: 1.25rem; }

/* Fliesstext: eine Stufe kleiner und enger als der Portaltext, weil
   hier viel Text in einem Rahmen steht. Fett bleibt ruhig - 600 und
   Tinte statt schwerem Schwarz. */
.oa-dialog__text {
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* p und li direkt, nicht nur der Rahmen: oa2.css setzt auf beide
   1,625 und schlaegt die vererbte Hoehe. */
.oa-dialog__text p { margin: 0 0 0.75rem; line-height: 1.5; }
.oa-dialog__text p:last-child { margin-bottom: 0; }
.oa-dialog__text b, .oa-dialog__text strong { color: var(--oa-text-primary); font-weight: 600; }
.oa-dialog__text ol { margin: 0 0 0.75rem; padding-left: 1.375rem; }
.oa-dialog__text li { margin-bottom: 0.25rem; line-height: 1.5; }

/* Die Bestaetigung ist der Moment, um den es geht. Sie bekommt einen
   eigenen Kasten, vertieft wie die Tabellenkoepfe, damit sie sich vom
   Erklaertext absetzt. Bereits erteilt: dieselbe Form mit gesetzten,
   gesperrten Haken - ein Beleg, kein Formular. */
.oa-dialog__bestaetigung {
    margin-top: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    background: var(--oa-surface-sunken);
}

.oa-dialog__frage {
    margin: 0 0 0.625rem;
    color: var(--oa-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.oa-dialog__frage:empty { display: none; }

.oa-dialog__haken .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: 0;
    padding-left: 0;
}

.oa-dialog__haken .form-check .form-check-input {
    float: none;
    margin: 0.1875rem 0 0;
}

.oa-dialog__haken .form-check-label {
    color: var(--oa-text-primary);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.oa-dialog__notiz {
    margin: 0.875rem 0 0;
    color: var(--oa-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.oa-dialog__notiz:empty { display: none; }

.oa-dialog__fuss {
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
}

.oa-dialog__fuss > * { margin: 0; }

/* Hinweis unter gesperrten Angaben, im Ton der Feldbeschriftung. */
.oa-feld__hinweis {
    margin: 0;
    color: var(--oa-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ---------- Stripe-Preistafel: vier Tarife nebeneinander ----------
   Stripes eigenes Stylesheet zwingt eine Tafel mit vier Produkten unter
   1280px Rahmenbreite auf 632px, also zwei Tarife oben, zwei unten.
   Die Inhaltsspalte ist auf 1200px gekappt, auf CONS bekam die Tafel
   1187px. Ein leichter Zoom laesst den Rahmen innen breiter erscheinen,
   als er aussen ist: 1187 / 0.92 = 1290px, und die vier Spalten stehen.
   Am 18.09.2026 auf CONS gemessen, die Schrift bleibt bei 92 Prozent
   gut lesbar. Die Stufen sind so gewaehlt, dass innen immer mindestens
   1282px ankommen. Unter 1000px darf Stripe wieder stapeln, dort ist
   zwei mal zwei die richtige Antwort.

   Der Rahmen ist sein eigener Container, damit dieselbe Regel auf der
   Seite und im Abo-Dialog gilt. */
.oa-preistafel {
    container-type: inline-size;
}

.oa-preistafel stripe-pricing-table {
    display: block;
}

@container (min-width: 1180px) and (max-width: 1279.98px) {
    .oa-preistafel stripe-pricing-table { zoom: 0.92; }
}

@container (min-width: 1090px) and (max-width: 1179.98px) {
    .oa-preistafel stripe-pricing-table { zoom: 0.85; }
}

@container (min-width: 1000px) and (max-width: 1089.98px) {
    .oa-preistafel stripe-pricing-table { zoom: 0.78; }
}

/* ---------- Abo-Hinweis: Dialog beim Einstieg fuer Testnutzer ----------
   Breit genug fuer die vier Tarife nebeneinander; in kleineren
   Fenstern greift der Zoom von oben, weil der Tafel-Rahmen sein
   eigener Container ist. Kopf und Fuss wie bei den anderen Dialogen,
   dazu eine Vorzeile in Bernstein: derselbe Zustand wie die Leuchte
   "Gekuendigt" - laeuft, aber nicht mehr lange. */
.oa-dialog--tafel .modal-dialog {
    --bs-modal-width: min(84rem, calc(100vw - 3rem));
}

.oa-dialog--tafel .oa-dialog__kopf {
    align-items: flex-start;
}

.oa-abohinweis__vorzeile {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oa-text-muted);
}

.oa-abohinweis__lead {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--oa-text-secondary);
}

.oa-abohinweis__lead b {
    font-weight: 600;
    color: var(--oa-text-primary);
}

.oa-dialog--tafel .oa-dialog__fuss {
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.oa-abohinweis__notiz {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--oa-text-muted);
}

/* ---------- Konstantentabelle einer Version: Fenster im Downloadbereich ----------
   Die Konstanten gehoeren zur Version und kommen spaeter mit ihr mit,
   also haengt die Tabelle an der Version und nicht mehr nur an einer
   eigenen Seite (21.09.2026).

   Deutlich breiter als der Standarddialog: drei Spalten, davon eine
   mit ganzen Saetzen. Die Breite ist so gewaehlt, dass die laengste
   Zelle jeder Spalte mit zwei Zeilen auskommt (Sebastian, 21.09.2026).
   Bei 32rem stand jede Beschreibung fuenfzeilig, bei 52rem brauchten
   Beschreibung und Wert drei Zeilen. */
.oa-dialog--konstanten .modal-dialog {
    --bs-modal-width: min(76rem, calc(100vw - 2rem));
}

/* Die Versionsnummer traegt der Titel, also steht sie in denselben
   tabellarischen Ziffern wie jede andere Version im Portal. */
.oa-konstanten__version { font-variant-numeric: tabular-nums; }

/* Das Polster oben traegt der Einleitungssatz, nicht der Inhaltsblock:
   sonst scrollen die Zeilen durch den Streifen ueber der klebenden
   Kopfzeile und schauen darueber hervor. */
.oa-dialog--konstanten .oa-dialog__inhalt { padding-top: 0; }

.oa-konstanten__lead {
    margin: 0 0 1.125rem;
    padding-top: 1.25rem;
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Im Fenster ist die Tabelle gut 1150px breit statt 1200 wie auf der
   Seite. Die Verteilung ist an den zwanzig Platzhaltern gemessen: bei
   20 Prozent brach jeder zweite Name um, waehrend die Wertspalte zu
   drei Vierteln leer stand. Der laengste Wert bleibt auch mit 22
   Prozent zweizeilig. */
.oa-dialog--konstanten .oa-konstanten th:first-child,
.oa-dialog--konstanten .oa-konstanten td:first-child { width: 23%; }

.oa-dialog--konstanten .oa-konstanten th:last-child,
.oa-dialog--konstanten .oa-konstanten td:last-child { width: 22%; }

/* Bei 20 bis 30 Zeilen scrollt das Fenster, der Tabellenkopf bleibt
   oben stehen. Dafuer darf der Tabellenrahmen nicht selbst scrollen:
   sein overflow-x macht ihn sonst zum Scroll-Container, an dem die
   Kopfzeile klebt, statt am Fensterinhalt. Waagerecht laeuft hier
   nichts ueber, unter 640px stapelt die Zeile. */
.oa-dialog--konstanten .oa-table-wrap { overflow: visible; }

.oa-dialog--konstanten .oa-konstanten thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Stapelt die Zeile, gibt es keine Spalten mehr, deren Breite man
   setzen koennte. Die Seitenbreiten nimmt der Tabellenblock oben schon
   zurueck; die Regeln hier sind spezifischer und brauchen ihre eigene. */
@media (max-width: 640px) {
    .oa-dialog--konstanten .oa-konstanten tbody th:first-child,
    .oa-dialog--konstanten .oa-konstanten tbody td:last-child { width: auto; }
}

/* Eine Zelle mit 34px-Knopf sitzt hoeher als eine mit Text, sonst
   haengt der Knopf unter der Zeile daneben. Die Aktionsspalte macht
   das ueber :last-child; die Konstantenspalte ist nicht die letzte. */
.oa-tabelle tbody td.oa-zelle-knopf { padding-block: 0.75rem; }

/* ---------- Testzeitraum-Chip in der Kopfleiste ----------
   Der Warn-Look gehoert dem Testzeitraum, nicht der Portal-Kennung
   (Sebastian, 19.09.2026): Bernstein solange die Testzeit laeuft, Rot
   nach Ablauf. Der Portal-Chip daneben ist neutral (oa2-portal.css). */
.oa-testchip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid rgb(180 83 9 / 0.25);
    border-radius: 4px;
    background-color: var(--oa-amber-hell);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--oa-amber);
    text-decoration: none;
    white-space: nowrap;
}

.oa-testchip:hover,
.oa-testchip:focus-visible {
    color: var(--oa-amber);
    border-color: rgb(180 83 9 / 0.5);
    text-decoration: none;
}

.oa-testchip__punkt {
    flex: 0 0 auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background: var(--oa-amber-marker);
}

.oa-testchip--aus {
    border-color: rgb(220 38 38 / 0.25);
    background-color: var(--oa-negative-light);
    color: var(--oa-negative);
}

.oa-testchip--aus:hover,
.oa-testchip--aus:focus-visible {
    color: var(--oa-negative);
    border-color: rgb(220 38 38 / 0.5);
}

.oa-testchip--aus .oa-testchip__punkt { background: var(--oa-negative); }

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

/* ---------- Erste Schritte (Einrichtungsseite, Startseite fuer Neue) ----------
   Nach KANON.md: Sektionskopf mit Aktion rechts, darunter eine Tafel wie
   die Plattformtafel der Downloads: die Stationen als Reiter, dann die
   offene Station mit ihren Videos. Kein Bernstein: Blau ist Aktion,
   Versalien nur als Feldbeschriftung in der Karte, Kontrollen 8px.
   Der Stand liegt am Kunden, jede Taste ist ein POST. */
.oa-section__kopfaktion { margin: 0; }

/* Stationen als Reiter: durchlaufene in Tinte, kommende gedaempft,
   die offene in Aktionsblau mit der Unterstreichung der Reiter. */
.oa-stationen { flex-wrap: wrap; }

.oa-stationen form { margin: 0; }

.oa-stationen .nav-link {
    font-size: 0.875rem;
    color: var(--oa-text-muted);
}

.oa-stationen .nav-link.is-erledigt { color: var(--oa-text-primary); }

.oa-stationen .nav-link.active { color: var(--oa-action); }

.oa-start__nr {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Inhalt der Tafel, wie in der Plattformtafel 1.25rem eingerueckt */
.oa-videotafel__station { padding: 1.25rem; }

/* Feldbeschriftung in der Karte, wie die Kennzahlen-Labels */
.oa-start__zaehler {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oa-text-muted);
}

/* Kartentitel wie .oa-card__title */
.oa-start__schritt {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--oa-text-primary);
}

.oa-start__text {
    margin: 0.375rem 0 0;
    max-width: 68ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--oa-text-secondary);
}

.oa-start__videos {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    margin-top: 1rem;
}

.oa-start__videos--1 { max-width: 36rem; }

.oa-section__head + .oa-start__videos { margin-top: 0; }

.oa-start__video {
    margin: 0;
    scroll-margin-top: 1.5rem;
}

.oa-start__video .ratio {
    overflow: hidden;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    background: var(--oa-surface-sunken);
}

.oa-start__video figcaption {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--oa-text-muted);
}

.oa-start__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.oa-start__aktionen form { margin: 0; }

@media (max-width: 600px) {
    .oa-stationen { gap: 1rem; }
    /* Auf Telefonen traegt nur die offene Station ihre Beschriftung */
    .oa-stationen .nav-link:not(.active) .oa-start__reiter__text { display: none; }
    .oa-videotafel__station { padding: 1.125rem 1.25rem 1.25rem; }
}