/* /Components/ImageZoomModal.razor.rz.scp.css */
/* Bild-Zoom-Modal (geteilt, ADR-041/033). Aus den früheren .image-modal-*-Regeln der
   Beitragsansicht übernommen, damit Beiträge und Bibliothek identisch zoomen. */
.image-zoom-backdrop[b-zcp5dbdsm4] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    padding: 1.5rem;
    background: var(--color-backdrop);
    outline: none;
    overflow: auto;
}

.image-zoom-content[b-zcp5dbdsm4] {
    position: relative;
    margin: auto;
}

    .image-zoom-content img[b-zcp5dbdsm4] {
        display: block;
        width: 40rem;
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
        box-shadow: var(--shadow-lg);
    }

.image-zoom-close[b-zcp5dbdsm4] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App-Chrome: dunkle Navigations-Schiene + weiß-neutrale Arbeitsfläche (Richtung C, ADR-075).
   Farben ausschließlich aus tokens.css — keine Literale. */

.page[b-fqikmvar6y] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Traegt die Seite bis zum unteren Rand, auch wenn der Inhalt kurz ist. Ersetzt das
       fruehere height:100vh an der Sidebar (siehe unten) — das erzwang eine feste Hoehe und
       damit eine Scrollbar, sobald ueber .page noch irgendetwas dazukam. */
    min-height: 100vh;
}

main[b-fqikmvar6y] {
    flex: 1;
}

/* Luft am Seitenende, damit der letzte Button nicht am Rand klebt. */
.content[b-fqikmvar6y] {
    padding-bottom: var(--space-10);
}

/* ---- Kopfleiste --------------------------------------------------------------
   Sie liegt IN main, beginnt also rechts neben der Schiene. Absicht: das Lockup mit Claim ist
   rund 90px hoch — eine über die volle Breite durchgehende Leiste müsste es abschneiden oder
   selbst unnötig hoch werden.

   sticky statt statisch, weil sie den Betreiber-Kontext trägt: „in wessen Daten arbeite ich"
   ist eine Sicherheitsaussage (ADR-029 S2) und darf beim Scrollen langer Seiten — Kalender,
   Beitragsliste — nicht aus dem Bild laufen.

   z-index über dem Inhalt, aber die Schiene ist eigenständig sticky und überlappt nicht:
   beide sind Nachbarn, keine Geschwister im selben Stapelkontext. */
.appbar[b-fqikmvar6y] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    /* Kein vertikales Padding: die Höhe kommt allein aus --topbar-height. Sonst addieren sich
       zwei Quellen, und jede Änderung an der Avatar-Größe verschiebt die Leiste mit.
       --topbar-height liegt seit ADR-075 in tokens.css und war bis hierher unbenutzt — es war
       für genau diese Leiste reserviert. */
    min-height: var(--topbar-height);
    padding: 0 var(--space-6);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

/* Trägt aktuell nur den Kontext und ist ohne ihn leer — bleibt aber im Markup, damit das
   Nutzermenü über justify-content rechts steht und nicht über margin-left:auto. So kann links
   später etwas dazukommen, ohne die Ausrichtung anzufassen. */
.appbar-left[b-fqikmvar6y] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* Betreiber-Kontext (ADR-029 S2). In Produktion Markengold, ausserhalb der Umgebungs-Ton
   (.is-env) — siehe Nachtrag zu ADR-075. Als Pille, nicht als Balken: die Leiste selbst ist
   schon die Zeile, ein zweiter voller Streifen darin wäre doppelt gemoppelt. */
.appbar-context[b-fqikmvar6y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    color: var(--color-on-brand);
    /* Auf Augenhöhe mit der Mail-Adresse rechts: die beiden sind die einzigen Elemente der
       Leiste und sollen sich nicht gegenseitig kleinreden. Label und „Verlassen" erben. */
    font-size: var(--text-lg);
    line-height: 1.3;
}

.appbar-context.is-env[b-fqikmvar6y] {
    background-color: var(--color-env);
    color: var(--color-env-fg);
}

.appbar-context-label[b-fqikmvar6y] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* Beschriftung tritt zurück, der Kundenname ist die Information. Kein eigenes Farbtoken:
       opacity trägt über beide Flächen, eine feste Farbe müsste je Fläche neu belegt werden. */
    opacity: 0.7;
    flex-shrink: 0;
}

.appbar-context-name[b-fqikmvar6y] {
    font-weight: 600;
    /* Kundennamen sind nicht längenbegrenzt. Ohne min-width:0 ignoriert ein Flex-Kind sein
       overflow und schiebt stattdessen den „Verlassen"-Knopf aus der Leiste — also genau den
       Rückweg aus dem Kontext. Der volle Name steht im title-Attribut. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appbar-context form[b-fqikmvar6y] {
    margin: 0;
    flex-shrink: 0;
}

/* currentColor statt fester Farbe: der Knopf sitzt auf Gold ODER auf Rostrot und stimmt so in
   beiden Fällen. Hover über brightness und nicht über eine Overlay-Farbe — sonst bräuchte es
   je Fläche einen eigenen Wert, und die Token-Schicht bekäme zwei Einträge für einen Effekt. */
.appbar-context-leave[b-fqikmvar6y] {
    background-color: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-3);
    /* Erbt die Grösse der Pille — ein eigener Wert hier hätte die Zeile bei jeder Änderung
       an der Pille aus der Mitte gezogen. */
    font-size: inherit;
    line-height: 1.6;
    cursor: pointer;
}

    .appbar-context-leave:hover[b-fqikmvar6y] {
        filter: brightness(0.92);
    }

/* ---- Nutzermenü --------------------------------------------------------------
   <details> statt eines Klick-Handlers: das Layout läuft in statischem SSR (Render-Modi hängen
   an den Seiten, nicht am Layout), ein @@onclick hätte hier keinen Circuit. Und Bootstraps
   dropdown scheidet aus, weil nur bootstrap.min.css geladen ist, kein Bootstrap-JS. */
.usermenu[b-fqikmvar6y] {
    position: relative;
    flex-shrink: 0;
}

.usermenu-toggle[b-fqikmvar6y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    /* Das Standard-Dreieck von <summary> entfernen — die Kappe unten ist unser eigenes.
       ::-webkit-details-marker zusätzlich für ältere Safari-Stände, die list-style ignorieren. */
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
}

    .usermenu-toggle[b-fqikmvar6y]::-webkit-details-marker {
        display: none;
    }

    .usermenu-toggle:hover[b-fqikmvar6y] {
        background-color: var(--color-surface-muted);
    }

.usermenu-avatar[b-fqikmvar6y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-brand);
    color: var(--color-on-brand);
    /* Die Initialen treten gegenüber der Mail-Adresse zurück: die Scheibe ist Wiedererkennung,
       die Adresse ist die Information. Bei gleicher Grösse konkurrieren beide. */
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.usermenu-name[b-fqikmvar6y] {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reines CSS-Dreieck: die .bi-*-Glyphen der Schiene sind Data-URIs mit fill='white' und hier
   auf hellem Grund unbrauchbar. Ein Rahmen-Dreieck erbt dagegen die Textfarbe. */
.usermenu-caret[b-fqikmvar6y] {
    width: 0;
    height: 0;
    flex-shrink: 0;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-top: 0.3rem solid currentColor;
}

.usermenu[open] .usermenu-caret[b-fqikmvar6y] {
    transform: rotate(180deg);
}

.usermenu-panel[b-fqikmvar6y] {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 30;
    min-width: 11rem;
    padding: var(--space-1);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--color-backdrop-soft);
}

.usermenu-panel form[b-fqikmvar6y] {
    margin: 0;
}

.usermenu-item[b-fqikmvar6y] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
}

    .usermenu-item:hover[b-fqikmvar6y],
    .usermenu-item:focus-visible[b-fqikmvar6y] {
        background-color: var(--color-surface-muted);
    }

/* Unter 641px ist .page eine Spalte: die Leiste steht dann unter dem eingeklappten Schienenkopf.
   Der Kundenname bekommt dort weniger Platz, das Menü darf die Leiste nicht sprengen. */
@media (max-width: 640.98px) {
    .appbar[b-fqikmvar6y] {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .usermenu-name[b-fqikmvar6y] {
        max-width: 10rem;
    }
}

/* Build-Info-Footer (ADR-058): dezent, aber immer sichtbar (Umgebung + Build-Hash). */
.build-info[b-fqikmvar6y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    border-top: 1px solid var(--color-border);
}

/* Rechtstexte-Links im Footer: gleiche dezente Optik wie die Build-Info,
   aber als erkennbare Links (Impressum muss von jeder Seite erreichbar sein, § 5 DDG). */
.build-info .legal-links[b-fqikmvar6y] {
    display: flex;
    gap: var(--space-4);
}

.build-info .legal-links a[b-fqikmvar6y] {
    color: var(--color-text-subtle);
    text-decoration: underline;
}

.build-info .legal-links a:hover[b-fqikmvar6y] {
    color: var(--color-text);
}

/* Flex-Spalte, damit die Umgebungs-Kennung sich per margin-top:auto an den Fuss der Schiene
   heften kann (NavMenu.razor.css: .rail-env). Die Kinder sind die Wurzelelemente von NavMenu —
   ein Komponenten-Tag erzeugt keinen eigenen Kasten, sie sind also direkte Flex-Kinder. */
.sidebar[b-fqikmvar6y] {
    background-color: var(--color-rail);
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    /* Die Sidebar war „height: 100vh; position: sticky". Das hatte zwei Nebenwirkungen:
       (1) Ist der Inhalt LAENGER als der Bildschirm, endete die dunkle Flaeche nach einem
           Bildschirm und darunter stand ein heller Streifen.
       (2) Ist der Inhalt KUERZER, erzwang die feste 100vh-Hoehe trotzdem eine Scrollbar, sobald
           ueber der Sidebar noch etwas lag (Umgebungs-Kennung, Kontext-Banner).
       Beides faellt weg, wenn die Hoehe nicht mehr erzwungen wird: die dunkle Spalte traegt jetzt
       .page (ueber die volle Dokumenthoehe, dank min-height:100vh auch bei kurzem Inhalt), und die
       Sidebar bleibt per align-self:flex-start nur so hoch wie ihr Inhalt — sticky bleibt sie
       trotzdem, die Navigation laeuft also weiter mit. */
    .page[b-fqikmvar6y] {
        flex-direction: row;
        background-color: var(--color-rail);
    }

    main[b-fqikmvar6y] {
        background-color: var(--color-page);
        min-width: 0;
    }

    /* min-height:100vh, damit die Umgebungs-Kennung am unteren Bildschirmrand sitzt und nicht
       direkt unter dem letzten Navigationseintrag (Owner-Wunsch 07.08.2026).

       Das ist NICHT die Rückkehr der oben beschriebenen height:100vh. Der Unterschied ist
       min- statt fix: die Schiene darf weiter mitwachsen, wenn ihr Inhalt höher wird, und
       erzwingt bei kurzem Inhalt keinen Überlauf. Und die zweite Nebenwirkung von damals ist
       gegenstandslos geworden — über der Sidebar liegt nichts mehr, seit Umgebungs-Kennung
       und Kontext-Banner die Arbeitsfläche verlassen haben.

       Bewusst NUR ab 641px: darunter klappt die Schiene auf volle Breite um, dort würde eine
       Mindesthöhe von einem Bildschirm die Navigation den ganzen Sichtbereich füllen lassen
       und den Inhalt komplett unter die Falz schieben. */
    .sidebar[b-fqikmvar6y] {
        width: var(--rail-width);
        flex: 0 0 var(--rail-width);
        position: sticky;
        top: 0;
        align-self: flex-start;
        min-height: 100vh;
    }

    /* Frueher stand hier „.top-row, article { padding-… !important }". Der .top-row-Teil war
       toter Code: .top-row liegt in NavMenu und traegt damit DEREN Scope-Attribut, nicht dieses —
       die Regel konnte das Element nie treffen (Blazor meldet so etwas nicht). Der article-Teil
       wirkt, er bleibt. */
    article[b-fqikmvar6y] {
        padding-left: var(--space-8) !important;
        padding-right: var(--space-6) !important;
    }
}

#blazor-error-ui[b-fqikmvar6y] {
    color-scheme: light only;
    background: var(--status-approved-bg);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--color-backdrop-soft);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-fqikmvar6y] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigations-Schiene (Richtung C, ADR-075): dunkle Fläche als Markenanker, Gold NUR als
   aktiver Zustand. Farben aus tokens.css.

   AUSNAHME, dokumentiert: die .bi-*-Glyphen weiter unten sind SVG-Data-URIs mit
   fill='white'. In einer Data-URI kann var() nicht ausgewertet werden — das ist keine
   improvisierte Farbe, sondern eine technische Grenze. Beim Umbau auf Inline-SVG mit
   currentColor (Scheibe 2) fällt sie weg. */
.navbar-toggler[b-0rp1c7dbx4] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--color-rail-fg-strong);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--color-rail-border);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--color-rail-hover);
}

.navbar-toggler:checked[b-0rp1c7dbx4] {
    background-color: var(--color-rail-active);
}

.top-row[b-0rp1c7dbx4] {
    /* Einheitlicher Schienen-Dunkelton wie die Sidebar. */
    background-color: var(--color-rail);
    padding: 0;
    overflow: hidden; /* Überstand des leicht vergrößerten Logos sauber abschneiden */
    /* Bootstraps .navbar bringt flex-direction:row mit. Hier steht nur das Lockup, aber sobald
       ein zweites Kind dazukommt, setzt row beide nebeneinander — mit column bleibt das eine
       Änderung im Markup und keine Fehlersuche im CSS. */
    flex-direction: column;
    align-items: stretch;
}

.navbar-brand[b-0rp1c7dbx4] {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

    /* vicini-lockup-dark.svg (viewBox 280x100, 2.8:1): das Lockup bringt seinen eigenen
       dunklen Hintergrund mit — exakt der Wert hinter --color-rail — und füllt die viewBox,
       auf dem gleichfarbigen Header also nahtlos. Der eingebackene SVG-Hintergrund ist der
       Grund, warum --color-rail nicht frei wählbar ist: eine Änderung würde eine sichtbare
       Kante ums Logo ziehen. Kein Crop-/Margin-Hack nötig; einfach auf Breite fitten. */
    .navbar-brand .brand-logo[b-0rp1c7dbx4] {
        width: 100%;
        height: auto;
        display: block;
        /* Etwas Luft ums Lockup, damit es optisch etwas kleiner wirkt. box-sizing rechnet das
           Padding in die 100% ein (kein Overflow); das Padding zeigt den gleichfarbigen
           Header-Hintergrund (#1B1A18) — bleibt nahtlos. */
        box-sizing: border-box;
        padding: 10px;
    }

/* Marken-Claim unter dem Lockup — echter Text, deshalb scharf (siehe NavMenu.razor).

   Er sitzt in der SPALTE DER WORTMARKE, nicht über der ganzen Schiene: so steht er im
   Original-Lockup, und nur so wirkt er als Bildunterschrift der Wortmarke statt als
   verrutschte Zeile. Die erste Fassung war rechtsbündig über die volle Breite und ragte
   damit 39px nach links unter den Pin (gemessen) — genau der Versatz, der auffiel.

   Die zwei Prozentwerte sind aus der SVG-Geometrie abgeleitet, nicht geraten:
     viewBox 48..340 (292 Einheiten), Artwork liegt im Logo-Inhaltsrahmen (Schiene − 2×10px)
     Wortmarke im SVG: x 125 .. 337.7
       links  = 10px + (125   − 48)/292 = 10 + 26,37 % von 216px =  67px = 28,4 % der Schiene
       rechts = 10px + (337,7 − 48)/292 = 10 + 99,21 % von 216px = 224px →  5,1 % Abstand
   PROZENT und nicht px: die Schiene klappt unter 641px auf volle Breite um, und das SVG
   skaliert dann mit — ein Pixel-Offset würde genau dort auseinanderlaufen.

   GRÖSSE aus dem Original abgemessen, nicht geschätzt. Umgerechnet auf die gerenderte
   Schiene (Artwork 61px hoch) lag die Original-Tagline bei 60..67px unter der img-Oberkante,
   die Grundlinie der Wortmarke bei 46px. Ihre Versalhöhe von 7px entspricht einer
   10px-Schrift — nicht 8,5px, wie meine erste Fassung annahm.

   DIE HÖHE ist am Bild festgelegt, nicht gerechnet: -27px (Owner). Die reine Geometrie hätte
   -20px ergeben, das saß aber sichtbar zu tief — zwei Gründe, die eine Rechnung auf
   Kastenkanten nicht erfasst: die Zeilenbox trägt Vorschlag ÜBER der Versalhöhe, und optisch
   will eine Bildunterschrift dichter an die Wortmarke als der geometrische Abstand hergibt.
   Der Claim schiebt sich damit in den unteren Bereich des Bildes, der ohnehin leer ist — so
   tief reicht nur die linke Pin-Hälfte, und die liegt außerhalb der Wortmarken-Spalte.

   EINHEIT: bewusst px, NICHT rem. Der Claim gehört zur Bildmarke und muss der LOGO-Größe
   folgen — und die hängt an --rail-width, nicht an der Schriftgröße. Mit rem würde er bei
   einer größeren Browser-Grundschrift über die Wortmarken-Spalte hinauswachsen, während das
   Logo gleich bleibt. Das ist derselbe Grund wie beim vw-Wert im umgeklappten Layout unten. */
.navbar-brand .brand-claim[b-0rp1c7dbx4] {
    display: block;
    margin-top: -27px;
    padding: 0 5.1% 12px 28.4%;
    text-align: center;
    white-space: nowrap;
    color: var(--color-rail-claim);
    font-size: 10px;
    /* 0.04em statt 0.05em: bei 0.05em ist die Zeile 162px breit und damit 5px BREITER als die
       Wortmarken-Spalte (157px) — sie wirkte dadurch linksbündig statt zentriert. Mit 0.04em
       sind es 159px, die Zeile deckt die Spalte also praktisch genau. */
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    /* Der Claim ist Zierde, kein Bedienelement: er soll den Klick auf das Logo nicht
       aufbrechen und nicht als eigenes Ziel wirken. */
    user-select: none;
}

/* Unter 641px klappt die Schiene auf die volle Breite um, und das Logo skaliert mit — der
   Claim muss das auch, sonst wirkt er unter der dann sehr großen Wortmarke verloren.
   In DIESEM Umbruch ist die Schienenbreite gleich der Viewportbreite, deshalb ist vw hier
   die passende Einheit und keine Krücke: alle Werte sind die Desktop-Pixel geteilt durch
   die 236px-Schiene, also dasselbe Verhältnis bei jeder Breite.
     Größe          10 / 236 = 4,24 %  ->  4.24vw
     Versatz oben  -27 / 236 = 11,44 % -> -11.44vw
     Abstand unten  12 / 236 =  5,08 % ->   5.08vw
   Wer margin-top oben ändert, muss diesen Wert mitziehen — sonst sitzt der Claim im
   umgeklappten Layout anders als auf dem Desktop.
   (Browser-Zoom skaliert vw mit; nur die Browser-Grundschrift wirkt nicht darauf — genau
   das ist gewollt, siehe Begründung oben.) */
@media (max-width: 640.98px) {
    .navbar-brand .brand-claim[b-0rp1c7dbx4] {
        font-size: 4.24vw;
        margin-top: -11.44vw;
        padding-bottom: 5.08vw;
    }
}

/* .rail-context stand hier. Die Kontext-Anzeige sitzt jetzt in der Kopfleiste
   (MainLayout.razor.css: .appbar-context) — die Schiene führt zu Orten, der Kontext ist
   ein Zustand. */

/* ---- Umgebungs-Kennung am Schienenfuss (ADR-058) -----------------------------
   Schmal, Mono, keine Interaktion, mittig. Der frühere Zusatz „keine echten
   Veröffentlichungen, keine Prod-Daten" steht als title-Attribut: die Aussage bleibt
   abrufbar, kostet aber keine zweite Zeile.

   margin-top:auto klebt sie an den unteren Rand der Schiene (Owner-Wunsch 07.08.2026).
   Das setzt voraus, dass .sidebar eine Flex-Spalte mit min-height:100vh ist — beides steht
   in MainLayout.razor.css, weil .sidebar dort erzeugt wird. Wer das dort anfasst, löst die
   Kennung hier vom Boden; sie fällt dann unter den letzten Navigationseintrag zurück, was
   nicht kaputt, aber nicht mehr das Gewollte ist.

   justify-content statt text-align: der Kasten ist Flex (wegen des Punkts), text-align
   greift auf Flex-Kinder nicht. */
.rail-env[b-0rp1c7dbx4] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-env);
    color: var(--color-env-fg);
    font-family: var(--font-mono);
    /* --text-lg (18px) und nicht 1,2rem (19,2px): der Unterschied ist 1,2 Pixel und nicht
       sichtbar, aber 1,2rem wäre der erste Wert ausserhalb der Skala aus ADR-075 — und eine
       Skala, in der ein Wert danebensteht, ist ab dem zweiten Mal keine mehr. */
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}

.rail-env-led[b-0rp1c7dbx4] {
    /* Mit der Schrift mitgewachsen — bei 0,4rem wirkte der Punkt neben dem grösseren Label
       wie ein Rendering-Rest. */
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-env-fg);
    flex-shrink: 0;
}

.bi[b-0rp1c7dbx4] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    /* Icon nie als eigenes Hover-/Klickziel: der ganze NavLink ist EIN zusammenhängender Bereich. */
    pointer-events: none;
}

.bi-house-door-fill-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-megaphone-fill-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49a68.14 68.14 0 0 0-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 74.663 74.663 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199V2.5z'/%3E%3C/svg%3E");
}

.bi-images-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3Cpath d='M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-.998 1.732zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z'/%3E%3C/svg%3E");
}

.bi-people-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

.bi-speedometer-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z'/%3E%3C/svg%3E");
}

/* .bi-arrow-bar-left-nav-menu (Abmelden-Glyphe) stand hier. Abmelden sitzt jetzt im
   Nutzermenü der Kopfleiste und braucht dort kein Icon. */

.bi-person-badge-nav-menu[b-0rp1c7dbx4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.nav-item[b-0rp1c7dbx4] {
    font-size: var(--text-base);
    padding-bottom: var(--space-2);
}

    .nav-item:first-of-type[b-0rp1c7dbx4] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-0rp1c7dbx4] {
        padding-bottom: 1rem;
    }

    .nav-item[b-0rp1c7dbx4]  .nav-link {
        color: var(--color-rail-fg);
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        min-height: 3rem;          /* statt fester Höhe: darf bei Umbruch wachsen */
        padding: 0.5rem 0.75rem;
        display: flex;
        align-items: center;
        line-height: 1.25;         /* normale Zeilenhöhe -> umgebrochener Text bleibt kompakt,
                                      Hintergrund ist EIN zusammenhängender Bereich */
        width: 100%;
        cursor: pointer;
        /* Auch der Logout-Button (kein <a>) erscheint und reagiert wie ein NavLink. */
        font-size: inherit;
        text-align: left;
    }

/* .logout-label / .logout-user standen hier — die zweizeilige Abmelden-Kachel mit der
   E-Mail darunter. Beides ist im Nutzermenü der Kopfleiste aufgegangen (MainLayout). */

/* Aktiver Eintrag: die goldene Fläche ist der EINZIGE laute Punkt der Schiene — Richtung C
   setzt die Marke genau hier, nicht überall (ADR-075). */
.nav-item[b-0rp1c7dbx4]  a.active {
    background-color: var(--color-brand);
    color: var(--color-on-brand);
}

.nav-item[b-0rp1c7dbx4]  .nav-link:hover {
    background-color: var(--color-rail-active);
    color: var(--color-rail-fg-strong);
}

.nav-scrollable[b-0rp1c7dbx4] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-0rp1c7dbx4] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-0rp1c7dbx4] {
        display: none;
    }

    .nav-scrollable[b-0rp1c7dbx4] {
        /* Never collapse the sidebar for wide screens */
        display: block;
        /* KEINE feste Hoehe mehr. Der Blazor-Template-Default war
           „height: calc(100vh - 3.5rem); overflow-y: auto" und rechnete mit einer 3.5rem hohen
           Kopfzeile. Unser Marken-Lockup ist aber deutlich hoeher (Schienenbreite, viewBox 2.8:1) —
           die Summe lag damit dauerhaft ueber 100vh und die Sidebar hatte IMMER eine eigene
           Scrollbar, schon direkt nach dem Login. Die Navigation hat fuenf Eintraege; sie
           braucht keine eigene Scroll-Flaeche. */
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Öffentliche Hülle — Kopf, Fuß, Breitenraster. Die Seiten selbst bringen ihre eigene
   (ebenfalls gescopte) CSS mit; hier steht nur, was Landingpage und Rechtstexte teilen. */

.public-page[b-8k4zgjnbwa] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--brand-cream);
}

.public-page main[b-8k4zgjnbwa] {
    flex: 1;
}

.public-inner[b-8k4zgjnbwa] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Kopf ---------- */

.public-header[b-8k4zgjnbwa] {
    background: var(--brand-dark);
    position: sticky;
    top: 0;
    z-index: 20;
}

.header-inner[b-8k4zgjnbwa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
}

.brand img[b-8k4zgjnbwa] {
    height: 80px;
    display: block;
}

.header-actions[b-8k4zgjnbwa] {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.plaetze[b-8k4zgjnbwa] {
    color: var(--brand-on-dark);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* Umrandeter Knopf statt Textlink (14.08.2026). Begründung am Markup in PublicLayout.razor.
   Zweite Stufe der Aufmerksamkeit: sichtbar als Knopf, aber ohne Füllung — der goldene bleibt
   der einzige, der ruft. */
.btn-login[b-8k4zgjnbwa] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--brand-on-dark);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--brand-dark-border);
    border-radius: 999px;
    white-space: nowrap;
}

.btn-login:hover[b-8k4zgjnbwa] {
    color: var(--brand-on-dark-strong);
    border-color: var(--brand-on-dark-strong);
    text-decoration: none;
}

.btn-login-icon[b-8k4zgjnbwa] {
    width: 17px;
    height: 17px;
    flex: none;
}

.btn-cta[b-8k4zgjnbwa] {
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.btn-cta:hover[b-8k4zgjnbwa] {
    background: var(--brand-gold-hover);
    color: var(--brand-on-gold);
}

/* ---------- Fuß ---------- */

.public-footer[b-8k4zgjnbwa] {
    background: var(--brand-dark);
    color: var(--brand-on-dark);
    padding: 1.6rem 0;
    margin-top: 4rem;
    font-size: 0.88rem;
}

.footer-inner[b-8k4zgjnbwa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

/* Wortmarke + Claim in einer Zeile. Die Wortmarke ist ein Bild und damit ein Block — ohne
   inline-flex stünde der Claim darunter statt daneben. Umbruch bleibt erlaubt: auf dem Handy
   ist der Claim länger als die halbe Zeile. */
.footer-brand[b-8k4zgjnbwa] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* Höhe statt Breite: das SVG hat 472×176 (2,68:1), über die Höhe skaliert es vorhersagbar
   mit der Textzeile mit. Der Innenabstand des Assets zieht die optische Höhe kleiner als der
   Wert — deshalb 34px und nicht die 20px der Zeilenhöhe. */
.footer-wordmark[b-8k4zgjnbwa] {
    height: 34px;
    width: auto;
    display: block;
    /* Der optische Linksversatz (14.08.2026): Das Asset bringt eigenen Rand mit — die Schrift
       beginnt im SVG erst bei x=70 von 472, also nach rund 15 % der Breite. Bei 34px Höhe sind
       das etwa 13px, um die die Wortmarke gegenüber dem Text darunter eingerückt aussah.
       Der negative Rand zieht sie auf dieselbe Kante. Unsichtbar, weil das Asset seinen eigenen
       dunklen Grund mitbringt und der exakt der Fußfarbe entspricht (--brand-dark).
       Ändert sich die Höhe, ändert sich dieser Wert mit: 13px gelten für 34px Höhe. */
    margin-left: -13px;
}

.footer-inner nav[b-8k4zgjnbwa] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

/* Der Fuß auf schmalen Geräten (Fund von Dennis, 14.08.2026: „sieht gequetscht aus").
   Zwei Ursachen, beide hier behoben:

   Erstens standen Wortmarke, Claim und fünf Verweise in einer umbrechenden Reihe mit
   space-between — bei 360px ergab das ungleiche Zeilen und Verweise, die fast aneinander
   klebten. Untereinander statt nebeneinander, mit mehr Luft zwischen den Zeilen.

   Zweitens liegt am unteren Rand die klebende Leiste mit dem Knopf. Sie ist position: fixed,
   nimmt also keinen Platz ein und legt sich über den Fuß — die letzten Zeilen verschwinden
   darunter. Der zusätzliche Innenabstand unten schafft genau den Platz, den sie verdeckt. */
@media (max-width: 560px) {
    .footer-inner[b-8k4zgjnbwa] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.4rem;
    }

    .footer-inner nav[b-8k4zgjnbwa] {
        gap: 0.7rem 1.2rem;
    }

    /* 3rem statt 5,5rem (Korrektur vom 14.08.2026, zweiter Blick von Dennis: „sehr viel Platz
       unter dem Text").

       Der Grund für den Zuschlag bleibt richtig: Auf der Landingpage liegt unter 700px eine
       klebende Leiste über dem Fuß und verdeckt sonst die Pflichtangaben — Impressum und
       Datenschutz dürfen nicht unter einem Werbebanner verschwinden.

       Der Haken: Diese Regel gilt für JEDE Seite, die klebende Leiste gibt es aber nur auf der
       Landingpage (ihre CSS ist auf Home.razor gescopt). Auf /start und den Rechtstexten war der
       Zuschlag also reine Leere. 3rem sind der Kompromiss — genug, dass die letzte Zeile neben
       der Leiste noch erreichbar ist, wenig genug, dass es anderswo nicht auffällt.

       Sauberer wäre, die Leiste auszublenden, sobald der Fuß ins Bild kommt. Das ist eine
       Ergänzung in landing.js und gehört in eine eigene kleine Scheibe, nicht hierhin. */
    .public-footer[b-8k4zgjnbwa] {
        padding-bottom: 3rem;
    }
}

.footer-inner a[b-8k4zgjnbwa] {
    color: var(--brand-on-dark);
    text-decoration: none;
}

.footer-inner a:hover[b-8k4zgjnbwa] {
    color: var(--brand-on-dark-strong);
    text-decoration: underline;
}

/* KORRIGIERT 14.08.2026 (Fund von Dennis bei der 360px-Abnahme): Hier stand
   ".plaetze, .btn-login { display: none }" — auf jedem Gerät unter 700px gab es damit KEINEN
   Anmeldeweg mehr. Ein Bestandskunde, der die Seite auf dem Handy öffnet, kam nicht in sein
   Konto. Das ist kein Gestaltungsdetail, sondern eine Sackgasse für genau die Leute, die schon
   zahlen.

   Jetzt: Die Platzzahl verschwindet weiterhin früh (sie ist Beiwerk und der längste Text im
   Kopf). „Anmelden" bleibt bis 420px stehen — darunter wird es neben Logo und Knopf wirklich
   zu eng, dort trägt der Fußbereich den Weg. Deshalb steht der Anmeldelink seit demselben Tag
   AUCH im Fuß: dort ist er auf jeder Breite erreichbar und kostet keinen Platz.

   Wer diese Regel ändert, prüft beides — 360px UND 390px, das sind die Breiten, auf denen die
   Kundschaft tatsächlich unterwegs ist. */
@media (max-width: 700px) {
    .plaetze[b-8k4zgjnbwa] {
        display: none;
    }

    /* 3rem Abstand sind auf dem Desktop Ruhe und auf dem Handy der Grund, warum „Anmelden"
       und der Knopf nicht mehr nebeneinander passen. Auf schmalen Geräten reicht ein Drittel
       davon — das ist der Platz, der den Anmeldeweg im Kopf hält. */
    .header-actions[b-8k4zgjnbwa] {
        gap: 1rem;
    }

    /* Mitgezogen, als der Kopf auf 80px ging (07.08.2026): 28px neben einem 80px-Desktop-Logo
       wirkte wie ein anderes Asset. 56px hält das Verhältnis, ohne dass die Marke auf dem Handy
       den halben ersten Bildschirm einnimmt — der Kopf ist sticky und kostet die Zeile dauerhaft. */
    .brand img[b-8k4zgjnbwa] {
        height: 56px;
    }
}

/* Kurzform der Kopf-CTA (Nachtrag 08.08.2026, per Element-Picker gefunden): Der damalige Text
   "4 Wochen kostenlos testen" war zusammen mit dem 56px-Logo ab ca. 400px Breite zu lang für eine
   Zeile — der Knopf ragte bei 360px rechts über den sichtbaren Bereich hinaus (horizontaler
   Overflow, kein CSS-Fehler im eigentlichen Sinn, sondern schlicht zu wenig Platz). Bewusst mit
   Marge statt Punktlandung: 420px statt der gemessenen ~400px, plus kleineres Logo und engerer
   Abstand in derselben Regel.

   KORRIGIERT 14.08.2026 (Briefing L2b §4): Die Textumschaltung ist raus. Der Knopf heißt seit
   ADR-086 überall "Pilotplatz sichern" — die Kurzform "Platz sichern" war danach die einzige
   Stelle im Projekt mit abweichendem Wortlaut, und sie stand direkt über dem Hero-Knopf mit der
   langen Fassung. Zwei Beschriftungen für dieselbe Handlung auf einem Bildschirm.

   Der Platzmangel wird stattdessen über die Größe gelöst: kleineres Logo, engerer Abstand,
   kleinerer Knopf. Der neue Text ist rund ein Drittel kürzer als der, der die Regel 2026-08-08
   ausgelöst hat, und passt damit auch bei 360px in eine Zeile.

   ZU PRÜFEN BEI JEDER ÄNDERUNG DES KNOPFTEXTES: Overflow-Test bei 360px (das Konsolen-Skript aus
   dem CHANGELOG-Eintrag vom 08.08.). Wird der Text je wieder länger, gehört die Lösung wieder
   hierher — kleinerer Knopf, nicht kürzere Worte. */

@media (max-width: 420px) {
    .header-inner[b-8k4zgjnbwa] {
        gap: 0.6rem;
    }

    .brand img[b-8k4zgjnbwa] {
        height: 46px;
    }

    .btn-cta[b-8k4zgjnbwa] {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    /* Unter 420px weicht der TEXT, nicht der Knopf (Korrektur vom 14.08.2026, zweiter Durchgang).
       Vorher verschwand hier der ganze Anmeldeweg — bei einem Produkt, das seine Bestandskunden
       täglich sieht, ist das der falsche Kompromiss. Als Kreis mit Symbol kostet er rund 36px
       und passt neben Logo und Knopf. Der Name bleibt über aria-label erhalten. */
    .btn-login[b-8k4zgjnbwa] {
        padding: 0.45rem;
        border-radius: 50%;
    }

    .btn-login-text[b-8k4zgjnbwa] {
        display: none;
    }
}

/* ---------- Rechtstexte ----------
   Diese Seiten (Impressum, Datenschutz, AVV) bringen bewusst keine eigene CSS mit: sie sind
   reiner Fließtext und teilen sich eine Typografie. ::deep, weil sie als @Body-Inhalt gerendert
   werden und den Scope-Marker dieser Komponente nicht tragen. */

.public-page[b-8k4zgjnbwa]  .legal {
    padding: 3.5rem 0 1rem;
}

.public-page[b-8k4zgjnbwa]  .legal-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.public-page[b-8k4zgjnbwa]  .legal h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    letter-spacing: -0.015em;
    margin: 0 0 1.6rem;
}

.public-page[b-8k4zgjnbwa]  .legal h2 {
    font-size: 1.15rem;
    margin: 2.4rem 0 0.7rem;
    line-height: 1.3;
}

.public-page[b-8k4zgjnbwa]  .legal p,
.public-page[b-8k4zgjnbwa]  .legal li {
    line-height: 1.65;
    color: var(--brand-text-body);
}

.public-page[b-8k4zgjnbwa]  .legal ul {
    padding-left: 1.2rem;
}

.public-page[b-8k4zgjnbwa]  .legal li {
    margin-bottom: 0.4rem;
}

.public-page[b-8k4zgjnbwa]  .legal-intro {
    font-size: 1.05rem;
}

.public-page[b-8k4zgjnbwa]  .legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.4rem;
    font-size: 0.92rem;
}

.public-page[b-8k4zgjnbwa]  .legal-table th,
.public-page[b-8k4zgjnbwa]  .legal-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--brand-border);
    vertical-align: top;
}

.public-page[b-8k4zgjnbwa]  .legal-table th {
    background: var(--brand-surface);
    font-weight: 600;
}

.public-page[b-8k4zgjnbwa]  .legal-meta {
    margin-top: 2.6rem;
    font-size: 0.85rem;
    color: var(--brand-text-muted);
}

/* ---------- Konto-Seiten (Anmelden, Zugang einrichten) ----------
   Beide sind öffentlich erreichbar und teilen sich diese Hülle. ::deep, weil sie als
   @Body-Inhalt gerendert werden. */

.public-page[b-8k4zgjnbwa]  .auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 4rem 1.5rem 2rem;
}

.public-page[b-8k4zgjnbwa]  .auth-wrap h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.2rem);
    letter-spacing: -0.015em;
    margin: 0 0 1.6rem;
    font-weight: 700;
}

.public-page[b-8k4zgjnbwa]  .auth-hint {
    margin-top: 1.4rem;
    font-size: 0.92rem;
    color: var(--brand-text-muted);
    text-align: center;
}

.public-page[b-8k4zgjnbwa]  .auth-hint a {
    color: var(--brand-gold-ink);
    font-weight: 600;
}

/* ---------- Passwortfeld mit Sichtbarkeits-Umschalter (PasswordField.razor) ----------
   Der Knopf sitzt IM Feld, nicht daneben: auf einem schmalen Handy-Display ist eine zweite
   Spalte neben der Eingabe entweder zu schmal zum Treffen oder sie drueckt das Feld zusammen. */

.public-page[b-8k4zgjnbwa]  .pw-field {
    position: relative;
}

/* Platz fuer den Knopf freihalten, sonst laeuft ein langes Passwort darunter durch.
   !important, weil Bootstraps .form-control und .form-floating > .form-control beide
   ein eigenes Padding setzen. */
.public-page[b-8k4zgjnbwa]  .pw-field .form-control {
    padding-right: 3.1rem !important;
}

.public-page[b-8k4zgjnbwa]  .pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    /* 44 px in beide Richtungen: die uebliche Mindestgroesse fuer ein Ziel, das mit dem Daumen
       getroffen werden soll. Das Symbol darin ist kleiner, die Trefferflaeche nicht. */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 0;
    color: var(--brand-text-muted);
    cursor: pointer;
    /* Ueber dem Bootstrap-Label, sonst faengt dessen unsichtbare Flaeche den Klick ab. */
    z-index: 3;
}

.public-page[b-8k4zgjnbwa]  .pw-toggle:hover {
    color: var(--brand-dark);
    background: var(--brand-dark-wash);
}

/* Sichtbarer Fokusring — der Knopf ist per Tastatur erreichbar und muss es auch zeigen. */
.public-page[b-8k4zgjnbwa]  .pw-toggle:focus-visible {
    outline: 2px solid var(--brand-gold-ink);
    outline-offset: 2px;
    color: var(--brand-dark);
}

/* Gedrueckter Zustand (Passwort sichtbar) auch optisch, nicht nur fuer Screenreader. */
.public-page[b-8k4zgjnbwa]  .pw-toggle[aria-pressed="true"] {
    color: var(--brand-gold-ink);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-i6b3j5tizw],
.components-reconnect-repeated-attempt-visible[b-i6b3j5tizw],
.components-reconnect-failed-visible[b-i6b3j5tizw],
.components-pause-visible[b-i6b3j5tizw],
.components-resume-failed-visible[b-i6b3j5tizw],
.components-rejoining-animation[b-i6b3j5tizw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-retrying[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-failed[b-i6b3j5tizw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-i6b3j5tizw] {
    display: block;
}


#components-reconnect-modal[b-i6b3j5tizw] {
    background-color: var(--color-surface);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-i6b3j5tizw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-i6b3j5tizw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-i6b3j5tizw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-i6b3j5tizw]::backdrop {
    background-color: var(--color-backdrop-soft);
    animation: components-reconnect-modal-fadeInOpacity-b-i6b3j5tizw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-i6b3j5tizw {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-i6b3j5tizw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-i6b3j5tizw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-i6b3j5tizw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-i6b3j5tizw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-i6b3j5tizw] {
    border: 0;
    background-color: var(--color-brand);
    color: var(--color-on-brand);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-i6b3j5tizw] {
        background-color: var(--color-brand-hover);
    }

    #components-reconnect-modal button:active[b-i6b3j5tizw] {
        background-color: var(--color-brand);
    }

.components-rejoining-animation[b-i6b3j5tizw] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-i6b3j5tizw] {
        position: absolute;
        border: 3px solid var(--color-brand);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-i6b3j5tizw 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-i6b3j5tizw] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-i6b3j5tizw {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AdminJobs.razor.rz.scp.css */
/* Eingebettetes Hangfire-Dashboard (ADR-029). Farben ausschließlich aus tokens.css. */

.jobs-frame[b-7lzlhgyfz7] {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);

    /* Höhe bewusst per Viewport-Rechnung, NICHT per height:100%:
       height:100% funktioniert nur, wenn JEDES Elternelement bis <html> eine bestimmte Höhe hat.
       Unsere Kette (.page → main → article) ist eine Flex-Spalte ohne feste Höhe — ein 100% liefe
       dort auf 0px hinaus, der Rahmen wäre unsichtbar.

       Die 22rem sind die App-Schale darüber und darunter (Überschrift, Umgebungs-Kennung,
       Build-Footer, Innenabstände). Das ist eine Schätzung, keine Messung — sie ist absichtlich
       großzügig, damit die Seite selbst nie scrollt und nur der Rahmen scrollt. Zwei Scrollbars
       übereinander sind die eigentliche Falle beim Einbetten.

       min-height fängt kleine Fenster ab: dort scrollt dann die Seite, das ist gewollt. */
    height: calc(100vh - 22rem);
    min-height: 34rem;
}
/* /Components/Pages/AdminTenants.razor.rz.scp.css */
/* Aktions-Überlaufmenü je Kundenzeile.

   WARUM handgebaut und nicht Bootstraps .dropdown-menu: Die App bindet in App.razor
   AUSSCHLIESSLICH bootstrap.min.css ein — kein bootstrap.bundle.js. Ein
   data-bs-toggle="dropdown" wäre damit ein Attribut ohne Empfänger; das Menü ginge nie auf,
   und der Build meldete das NICHT. Der Zustand liegt deshalb im Circuit (openMenu), das
   Aussehen hier. Farben kommen ausnahmslos aus tokens.css (ADR-075, keine Farb-Literale). */

.tenant-menu[b-fai16ctuk0] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 14rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(27, 26, 24, 0.15);
}

.tenant-menu-item[b-fai16ctuk0] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--color-text);
    font-size: 0.875rem;
    text-align: left;
    white-space: nowrap;
}

    .tenant-menu-item:hover:not(:disabled)[b-fai16ctuk0],
    .tenant-menu-item:focus-visible[b-fai16ctuk0] {
        background: var(--color-surface-muted);
    }

    .tenant-menu-item:disabled[b-fai16ctuk0] {
        opacity: 0.6;
    }

.tenant-menu-item-danger[b-fai16ctuk0] {
    color: var(--color-danger);
}

.tenant-menu-item-warn[b-fai16ctuk0] {
    color: var(--color-brand-ink);
}

.tenant-menu-divider[b-fai16ctuk0] {
    height: 1px;
    margin: 0.25rem 0.3rem;
    background: var(--color-border);
}

/* Der Klick-Fänger. Transparent und ohne eigene Fläche im Layout — er existiert nur, um einen
   Klick daneben abzufangen. LIEGT UNTER dem Menü (1040 < 1050), sonst schluckte er den Klick
   auf den Menü-Eintrag selbst. */
.tenant-menu-backdrop[b-fai16ctuk0] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* Das „⋯" ist ein Zeichen, kein Wort: ohne feste Breite springt der Knopf zwischen den Zeilen. */
.tenant-menu-toggle[b-fai16ctuk0] {
    min-width: 2.1rem;
    line-height: 1;
}
/* /Components/Pages/Brand.razor.rz.scp.css */
/* Preisfeld schmal halten (Betrag ist kurz) — gewonnener Platz geht ans Textfeld.
   Breite = Spaltenbreite (6rem), damit der Kopf „Preis (€)" einzeilig bleibt. */
.offers-table[b-yvyyxn2ta0]  .price-input {
    max-width: 6rem;
}

/* Logo-Vorschau auf neutralem Schachbrett — macht Transparenz und helle/dunkle Logos sichtbar. */
.logo-preview[b-yvyyxn2ta0] {
    display: inline-block;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    background-image:
        linear-gradient(45deg, var(--color-surface-muted) 25%, transparent 25%),
        linear-gradient(-45deg, var(--color-surface-muted) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--color-surface-muted) 75%),
        linear-gradient(-45deg, transparent 75%, var(--color-surface-muted) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.logo-preview img[b-yvyyxn2ta0] {
    display: block;
    max-height: 96px;
    max-width: 320px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Landingpage — gescopte CSS. Markenfarben kommen aus den Tokens in wwwroot/app.css,
   damit die Verkaufsseite nicht zur zweiten Wahrheit für Gold und Anthrazit wird. */

.wrap[b-dv66r1hmgt] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

section[b-dv66r1hmgt] {
    padding: 4.5rem 0;
}

h1[b-dv66r1hmgt] {
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1.2rem;
    font-weight: 700;
}

/* Die Antwortzeile der Überschrift in Gold. --brand-gold-ink (#7A5E2E) und NICHT --brand-gold
   (#CDA851): das helle Marken-Gold erreicht auf dem hellen Seitengrund nur rund 2:1 und ist
   als Text nicht lesbar — derselbe Fehler, den ADR-075 an anderer Stelle schon einmal
   korrigiert hat. Der dunkle Goldton liegt bei 6:1 und liest sich bei dieser Schriftgröße
   trotzdem eindeutig als Gold. */
.h1-antwort[b-dv66r1hmgt] {
    color: var(--brand-gold-ink);
}

h2[b-dv66r1hmgt] {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
    font-weight: 700;
}

.eyebrow[b-dv66r1hmgt], .section-label[b-dv66r1hmgt] {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-gold-ink);
    margin: 0 0 1rem;
}

.section-label.light[b-dv66r1hmgt] {
    color: var(--brand-gold);
}

.lead[b-dv66r1hmgt], .section-lead[b-dv66r1hmgt] {
    font-size: 1.12rem;
    line-height: 1.6;
    max-width: 40em;
    margin: 0 0 1.8rem;
    color: var(--brand-text-body);
}

/* Die Schlusszeile des Hero-Absatzes trägt das Versprechen, die Sätze davor erklären den Weg.
   Deshalb abgesetzt — wer nur diese Zeile liest, hat trotzdem verstanden, was angeboten wird.

   600 statt 700: Der Absatz steht in Inter, die Überschrift darüber in der
   Display-Schrift. Bei 700 konkurriert die Zeile mit der Überschrift um dieselbe Rolle,
   statt sie abzuschließen. Zusätzlich --color-text statt --brand-text-body: der Sprung von
   #57544E auf #1B1A18 trägt die Betonung auch dann, wenn der Schriftschnitt fehlt — auf
   Systemen ohne den geladenen 600er täuscht der Browser ihn sonst nur vor.

   Als eigener Block, nicht inline: sonst klebt die Zeile am vorangehenden Satz und der
   Absatz liest sich als ein Atemzug. */
.lead-punch[b-dv66r1hmgt] {
    display: block;
    font-weight: 600;
    color: var(--color-text);
}

/* Die beiden Hälften des früheren Hero-Absatzes (Briefing L2b §2).
   .lead-vor-punch schließt enger als ein normaler .lead-Absatz — zusammen mit dem fehlenden
   margin-top am Block darunter ergibt das exakt die 0,6rem, die vorher der abgesetzte <strong>
   im selben Absatz erzeugt hat. Am Rechner ist die Aufteilung damit unsichtbar.
   Auf dem Handy werden beide getrennt einsortiert, siehe Reihenfolge-Block weiter unten —
   dort bekommt .lead-vor-punch seinen normalen Abstand zurück. */
.lead-vor-punch[b-dv66r1hmgt] {
    margin-bottom: 0.6rem;
}

.lead-punch-block[b-dv66r1hmgt] {
    margin-top: 0;
}

/* Beschriftung über den Plattform-Marken. Erbt Versalien, Sperrung und Gold von .eyebrow —
   bewusst dieselbe Auszeichnung, damit die Seite nicht zwei Sorten Kleinüberschrift führt.
   Die Trennlinie darüber setzt den Block vom Versprechen ab: darüber steht, WAS vicini tut,
   darunter, WO es erscheint. */
.platform-label[b-dv66r1hmgt] {
    border-top: 1px solid var(--brand-border);
    padding-top: 1.5rem;
    margin: 0 0 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-gold-ink);
}

/* Plattform-Marken zwischen Versprechen und Knöpfen.

   Als Liste ausgezeichnet, nicht als Bilderreihe in einem <div>: es ist eine Aufzählung der
   bedienten Kanäle, und ein Screenreader soll „Liste, 3 Einträge" melden.

   KEINE Filter, kein opacity, kein grayscale und kein Hover-Effekt — Meta und Google
   untersagen jede Veränderung ihrer Marken, und genau solche „macht es ruhiger"-Kniffe sind
   der übliche Verstoß. Wenn die bunten Logos zu laut wirken, ist die richtige Antwort eine
   kleinere Größe, nicht eine gedämpfte Farbe.

   Die drei Marken haben unterschiedliche optische Gewichte: Instagram und Facebook sind
   randvolle Quadrate, das Google-Zeichen hat eingebauten Weißraum und wirkt bei gleicher
   Pixelhöhe kleiner. Wenn das auffällt, ist die Stellschraube die Höhe des Google-Bildes —
   nicht ein Zoom auf das Asset. */
.hero-platforms[b-dv66r1hmgt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    margin: 0 0 1.8rem;
    padding: 0;
    list-style: none;
}

.hero-platforms li[b-dv66r1hmgt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--brand-text-body);
}

/* Trennstrich VOR jedem Eintrag außer dem ersten, nicht hinter jedem außer dem letzten:
   bricht die Zeile auf dem Handy um, steht der Strich dann am Anfang der neuen Zeile und
   nicht als Rest am Ende der alten. */
.hero-platforms li + li[b-dv66r1hmgt]::before {
    content: "";
    align-self: stretch;
    border-left: 1px solid var(--brand-border);
    margin-right: 1rem;
}

.hero-platforms img[b-dv66r1hmgt] {
    height: 28px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Auf schmalen Geräten untereinander statt umbrechend (Briefing L2b §4).
   Vorher standen bei 360px Google und Instagram nebeneinander und Facebook allein in der zweiten
   Zeile, mit einem Trennstrich mittendrin — das liest sich als Layoutfehler, nicht als
   Aufzählung. Drei gleich gebaute Zeilen sind ruhiger und auf einen Blick zählbar.
   Die Trennstriche entfallen dabei: Sie trennen Einträge INNERHALB einer Zeile; untereinander
   ist der Zeilenumbruch die Trennung. */
@media (max-width: 560px) {
    .hero-platforms[b-dv66r1hmgt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .hero-platforms li + li[b-dv66r1hmgt]::before {
        content: none;
    }
}

/* Die Beschriftung darüber ist Vorspann, nicht Aussage. In Versalien mit weiter Sperrung zog sie
   auf dem Handy über zwei Zeilen mehr Aufmerksamkeit als die Marken, die sie ankündigt.
   Deshalb schmal: normale Schreibung, enge Sperrung, kleiner. Der Goldton und die Trennlinie
   bleiben — die Zuordnung zum Block soll erhalten bleiben, nur die Lautstärke sinkt. */
@media (max-width: 560px) {
    .platform-label[b-dv66r1hmgt] {
        text-transform: none;
        letter-spacing: 0.01em;
        font-size: 0.82rem;
        font-weight: 600;
        padding-top: 1.2rem;
    }
}

/* ---------- Buttons ---------- */

.btn-gold[b-dv66r1hmgt], .btn-ghost[b-dv66r1hmgt] {
    display: inline-block;
    padding: 0.85rem 1.7rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.btn-gold[b-dv66r1hmgt] {
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    border: 2px solid var(--brand-gold);
}

.btn-gold:hover[b-dv66r1hmgt] {
    background: var(--brand-gold-hover);
    border-color: var(--brand-gold-hover);
    color: var(--brand-on-gold);
}

.btn-gold.wide[b-dv66r1hmgt] {
    display: block;
    text-align: center;
}

.btn-ghost[b-dv66r1hmgt] {
    border: 2px solid var(--brand-outline);
    color: var(--brand-dark);
}

.btn-ghost:hover[b-dv66r1hmgt] {
    border-color: var(--brand-dark);
    color: var(--brand-dark);
}

.cta-row[b-dv66r1hmgt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

/* Die Weg-Ankündigung unter dem Knopf. Bewusst leise (klein, gedeckt): Sie soll die Erwartung
   setzen, nicht mit dem Versprechen darüber konkurrieren. Steht zwischen Knopf und
   Vertrauens-Zeile, weil sie zum Klick gehört und nicht zum Kleingedruckten. */
.cta-weg[b-dv66r1hmgt] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--brand-text-muted);
    margin: 0 0 1.4rem;
}

/* Uhr als Inline-SVG in einer Data-URI. Bewusst KEIN Emoji (⏱) — das rendert je nach System
   in einer anderen Farbe und Größe und ist auf Windows ein anderes Bild als auf dem iPhone.
   currentColor geht in einer Data-URI nicht, deshalb steht der Wert von --brand-gold-ink hier
   als Literal: dokumentierte technische Grenze, dieselbe wie bei den .bi-*-Glyphen der
   App-Schiene (ADR-075, „Ausnahmen von der Token-Regel"). Wer den Goldton ändert, muss diese
   Zeile mitziehen. */
.cta-weg-uhr[b-dv66r1hmgt] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A5E2E' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.4'/%3E%3Cpath d='M8 4.4V8l2.4 1.6'/%3E%3C/svg%3E") no-repeat center/contain;
}

.cta-weg.center[b-dv66r1hmgt] {
    text-align: center;
}

/* ---------- Vertrauens-Zeile ---------- */

.trust[b-dv66r1hmgt] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    padding: 0;
    margin: 0;
    font-size: 0.92rem;
    color: var(--brand-text-body);
}

.trust.center[b-dv66r1hmgt] {
    justify-content: center;
}

.trust li[b-dv66r1hmgt]::before {
    content: "✓";
    color: var(--brand-gold-ink);
    font-weight: 700;
    margin-right: 0.45rem;
}

/* ---------- Hero ---------- */

/* 3,5rem statt 5rem oben (14.08.2026): Die Kopfzeile ist klebend und kostet die Zeile ohnehin
   dauerhaft — zusammen mit ihr wirkten 5rem wie ein leerer Vorspann. Zusammen mit der
   Oben-Ausrichtung des Rasters darunter beginnt die Seite jetzt dort, wo der Blick landet. */
.hero[b-dv66r1hmgt] {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* hero-proof/hero-proof-mark/hero-scarcity (Initialen-Avatar + auskommentierte Platzzahl-Zeile)
   sind mit dieser Scheibe entfallen: Der Gründerbeleg zieht in einen eigenen Abschnitt mit
   echtem Foto (.founder-*, weiter unten) und die Platzzahl ist jetzt live gezählt und belastbar
   (.capacity, oben im Hero) — beide Provisorien hatten genau darauf gewartet. */

/* ---------- Beweis ---------- */

.proof[b-dv66r1hmgt] {
    padding-top: 1rem;
}

.proof img[b-dv66r1hmgt] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

/* Die Antwort auf „Woher kommen die Fotos?". Steht ÜBER dem Kleingedruckten und deutlich größer
   als dieses: Sie ist ein Verkaufsargument, kein Haftungshinweis. Wäre sie in der Größe der
   proof-note, würde sie mit ihr verschmelzen und ungelesen bleiben. */
.proof-herkunft[b-dv66r1hmgt] {
    max-width: 44em;
    margin: 1.6rem auto 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--brand-text-body);
}

.proof-note[b-dv66r1hmgt] {
    font-size: 0.78rem;
    color: var(--brand-text-muted);
    text-align: center;
    margin: 0.9rem 0 0;
}

.proof-claim[b-dv66r1hmgt] {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 600;
    line-height: 1.35;
    max-width: 30em;
    margin: 2.6rem auto 0;
    text-align: center;
}

/* ---------- Kanäle ---------- */

.channels[b-dv66r1hmgt] {
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
}

.channels .section-label[b-dv66r1hmgt] {
    text-align: center;
}

.channel-grid[b-dv66r1hmgt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.channel[b-dv66r1hmgt] {
    text-align: center;
    padding: 1.4rem 1rem;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
}

/* Die Marke über dem Namen (14.08.2026). Das Google-Zeichen bringt eingebauten Weißraum mit und
   wirkt bei gleicher Pixelhöhe kleiner als die randvollen Quadrate von Instagram und Facebook —
   deshalb 32px für alle drei und die Feinabstimmung über die Höhe des Google-Bildes, nicht über
   einen Zoom auf das Asset. Dieselbe Regel wie bei .hero-platforms img. */
.channel-mark[b-dv66r1hmgt] {
    height: 32px;
    width: auto;
    display: block;
    margin: 0 auto 0.7rem;
}

.channel strong[b-dv66r1hmgt] {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 0.2rem;
}

.channel span[b-dv66r1hmgt] {
    color: var(--brand-text-muted);
    font-size: 0.92rem;
}

.channel-note[b-dv66r1hmgt] {
    text-align: center;
    color: var(--brand-text-body);
    max-width: 44em;
    margin: 0 auto;
}

/* ---------- Drei Schritte ---------- */

.step-grid[b-dv66r1hmgt] {
    list-style: none;
    padding: 0;
    margin: 2.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
}

.step-grid li[b-dv66r1hmgt] {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    padding: 1.6rem;
}

.num[b-dv66r1hmgt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    font-weight: 700;
    margin-bottom: 0.9rem;
}

.step-grid strong[b-dv66r1hmgt] {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.step-grid p[b-dv66r1hmgt] {
    color: var(--brand-text-body);
    line-height: 1.55;
    margin: 0 0 0.9rem;
}

.dauer[b-dv66r1hmgt] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--brand-gold-ink);
}

/* ---------- Rote Linie ---------- */

.redline[b-dv66r1hmgt] {
    background: var(--brand-dark);
    color: var(--brand-on-dark);
}

.redline h2[b-dv66r1hmgt] {
    color: var(--brand-on-dark-strong);
}

.redline p[b-dv66r1hmgt] {
    line-height: 1.6;
    max-width: 34em;
}

.redline-grid[b-dv66r1hmgt] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: start;
}

.quote[b-dv66r1hmgt] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-gold);
    margin-top: 1.6rem;
}

.compare[b-dv66r1hmgt] {
    display: grid;
    gap: 1rem;
}

.compare-col[b-dv66r1hmgt] {
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    background: var(--brand-dark-wash);
    border: 1px solid var(--brand-dark-border);
}

.compare-col.good[b-dv66r1hmgt] {
    border-color: var(--brand-gold);
}

.compare-head[b-dv66r1hmgt] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.compare-col.good .compare-head[b-dv66r1hmgt] {
    color: var(--brand-gold);
    opacity: 1;
}

.compare-col p[b-dv66r1hmgt] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------- Preis ---------- */

.pricing .section-label[b-dv66r1hmgt],
.pricing h2[b-dv66r1hmgt],
.pricing .section-lead[b-dv66r1hmgt] {
    text-align: center;
}

.pricing .section-lead[b-dv66r1hmgt] {
    margin-left: auto;
    margin-right: auto;
}

.price-card[b-dv66r1hmgt] {
    max-width: 640px;
    margin: 0 auto;
    background: var(--brand-surface);
    border: 2px solid var(--brand-gold);
    border-radius: 18px;
    padding: 2.2rem;
    box-shadow: var(--brand-shadow-card);
}

.price-head[b-dv66r1hmgt] {
    text-align: center;
    margin-bottom: 1.6rem;
}

.badge-gold[b-dv66r1hmgt] {
    display: inline-block;
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.price[b-dv66r1hmgt] {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
}

.price-sub[b-dv66r1hmgt] {
    display: block;
    color: var(--brand-text-muted);
    margin-top: 0.4rem;
}

.garantie[b-dv66r1hmgt] {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--brand-gold-ink);
    font-weight: 600;
}

.price-list[b-dv66r1hmgt] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem 1.6rem;
}

.price-list li[b-dv66r1hmgt] {
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.45;
}

.price-list li[b-dv66r1hmgt]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-gold-ink);
    font-weight: 700;
}

.price-note[b-dv66r1hmgt] {
    text-align: center;
    font-size: 0.88rem;
    color: var(--brand-text-muted);
    margin: 1rem 0 0;
    line-height: 1.5;
}

.addon[b-dv66r1hmgt] {
    max-width: 640px;
    margin: 1.6rem auto 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--brand-text-body);
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
}

.addon strong[b-dv66r1hmgt] {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--brand-dark);
}

/* ---------- FAQ ---------- */

.faq[b-dv66r1hmgt] {
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
}

.faq .section-label[b-dv66r1hmgt], .faq h2[b-dv66r1hmgt] {
    text-align: center;
}

.faq h2[b-dv66r1hmgt] {
    margin-bottom: 2.2rem;
}

details[b-dv66r1hmgt] {
    max-width: 780px;
    margin: 0 auto;
    border-bottom: 1px solid var(--brand-border);
    padding: 1.1rem 0;
}

summary[b-dv66r1hmgt] {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

summary[b-dv66r1hmgt]::-webkit-details-marker {
    display: none;
}

summary[b-dv66r1hmgt]::after {
    content: "+";
    color: var(--brand-gold-ink);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
}

details[open] summary[b-dv66r1hmgt]::after {
    content: "–";
}

details p[b-dv66r1hmgt] {
    margin: 0.9rem 0 0;
    color: var(--brand-text-body);
    line-height: 1.6;
    max-width: 62em;
}

/* ---------- Abschluss ---------- */

.closing[b-dv66r1hmgt] {
    text-align: center;
}

.closing h2[b-dv66r1hmgt] {
    max-width: 18em;
    margin-left: auto;
    margin-right: auto;
}

.closing p[b-dv66r1hmgt] {
    color: var(--brand-text-body);
    max-width: 34em;
    margin: 0 auto 1.8rem;
    line-height: 1.6;
}

.closing .trust[b-dv66r1hmgt] {
    margin-top: 1.6rem;
}

/* ---------- Hero, zweispaltig (Prototyp-Gestaltung) ----------
   Rechts der Vergleichsregler statt eines zweiten Text-Blocks — das Bild TUT, was der Fließtext
   nur behaupten könnte. Bewusst KEIN E-Mail-Feld hier (ADR-082/6: die AVV-Checkbox passt nicht
   in den Hero, ohne ihn zuzumüllen) — der Knopf führt wie im übrigen Bestand auf /start. */
/* align-items: start statt center (14.08.2026, Frage von Dennis: „Warum ist der Bereich oberhalb
   von ‚Pilotphase' so hoch und leer?").

   Die Antwort war: keine Absicht, sondern eine Nebenwirkung. Die rechte Spalte mit dem Handy ist
   deutlich höher als die Textspalte; bei zentrierter Ausrichtung verteilt sich die Differenz
   gleichmäßig über und unter den Text. Das ergab rund achtzig Pixel Leere über der Augenbraue,
   die wie ein Gestaltungsfehler aussahen und dem Blick keinen Anfang gaben.

   Oben ausgerichtet beginnt der Text direkt unter der Kopfzeile. Die Differenz steht jetzt
   gesammelt unter der Textspalte, wo sie als Luft gelesen wird statt als Lücke. */
.hero-grid[b-dv66r1hmgt] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.2rem;
    align-items: start;
}

/* ---------- Hero auf dem Handy: Beleg vor Erklärung (Briefing L2b) ----------

   BEFUND (Abnahme 14.08.2026, 360px): Am Rechner stehen Text und Vergleichsregler nebeneinander —
   man liest eine Zeile und SIEHT gleichzeitig das Ergebnis. Auf dem Handy stapelten sich die
   Spalten in DOM-Reihenfolge; die Textspalte kommt zuerst, also rutschte das einzige Element,
   das ohne Worte erklärt, komplett unter die Falz. Übrig blieben neun Zeilen Fließtext, und
   sechs Blöcke mit ähnlichem Gewicht konkurrierten um dieselbe Aufmerksamkeit.

   GRUNDSATZ, der über diese Seite hinausgeht: Auf dem Handy gehört der Beleg über die Erklärung.
   Ein totes und ein volles Profil nebeneinander erklären in zwei Sekunden, was drei Absätze
   nicht schaffen.

   ERSTER BILDSCHIRM danach: Augenbraue, Überschrift, die fette Zeile, das Bild, die Knöpfe.
   Fünf Elemente statt neun. Alles Weitere steht darunter.

   UMSETZUNG über display:contents statt über doppeltes Markup. Damit werden die Kinder von
   .hero-copy zu Flex-Kindern von .hero-grid und lassen sich mit `order` zwischen die rechte
   Spalte einsortieren. Die DOM-Reihenfolge bleibt unangetastet — die Rechner-Ansicht darf sich
   durch diese Regel NICHT ändern (eigener Abnahmepunkt: Bildschirmfoto bei 1280px vorher/nachher).

   gap: 0 ist Absicht. Die Abstände tragen die Elemente selbst über ihre Ränder, so wie in der
   Textspalte am Rechner auch. Ein Grid-Abstand würde hier auf dreizehn statt zwei Kinder wirken.

   TASTATUR: Der Vergleichsregler ist bedienbar und wandert optisch nach vorn, während er im DOM
   hinten steht. Die Tabulator-Reihenfolge weicht dadurch von der sichtbaren ab — bewusst in Kauf
   genommen, weil der Regler ergänzend ist und die Seite ohne ihn vollständig verständlich bleibt.
   Wächst der Abstand weiter, gehört die Verschiebung ins Markup statt ins CSS, dann aber für
   beide Ansichten. */
@media (max-width: 960px) {
    .hero-grid[b-dv66r1hmgt] {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* PFLICHT, sonst bricht die ganze Spalte (Fund von Dennis, 14.08.2026):
           Die Grundregel setzt align-items: start — im Raster ist das die Blockachse und
           bedeutet „oben ausgerichtet", genau das Gewollte. Im Flex-Container mit
           flex-direction: column ist align-items dagegen die QUERachse, also waagerecht.
           Geerbt hieß start deshalb „linksbündig und nur so breit wie der Inhalt": Absätze
           brachen viel zu früh um, das Handy klebte am linken Rand, rechts blieb die halbe
           Breite leer. stretch stellt die volle Breite wieder her. */
        align-items: stretch;
    }

    .hero-copy[b-dv66r1hmgt] {
        display: contents;
    }

    .hero-copy > .eyebrow[b-dv66r1hmgt]          { order: 1; }
    .hero-copy > h1[b-dv66r1hmgt]                { order: 2; }
    .hero-copy > .lead-punch-block[b-dv66r1hmgt] { order: 3; margin-bottom: 1.6rem; }
    .hero-stage[b-dv66r1hmgt]                    { order: 4; margin-bottom: 1.9rem; }
    .hero-copy > .cta-row[b-dv66r1hmgt]          { order: 5; }
    .hero-copy > .trust[b-dv66r1hmgt]            { order: 6; }
    .hero-copy > .cta-weg[b-dv66r1hmgt]          { order: 7; margin-top: 0.9rem; }
    .hero-copy > .lead-vor-punch[b-dv66r1hmgt]   { order: 8; margin-bottom: 1.8rem; }
    .hero-copy > .redline-badge[b-dv66r1hmgt]    { order: 9; }
    .hero-copy > .platform-label[b-dv66r1hmgt]   { order: 10; }
    .hero-copy > .hero-platforms[b-dv66r1hmgt]   { order: 11; }
    .hero-copy > .setup-note[b-dv66r1hmgt]       { order: 12; }
    .hero-copy > .capacity[b-dv66r1hmgt]         { order: 13; }
}

.hero-grid > .hero-copy[b-dv66r1hmgt] {
    min-width: 0;
}

/* ---------- Vergleichsregler ----------
   Echtes input[type=range] statt Pointer-Handling: liefert Tastatur, Touch und Screenreader-
   Zustand gratis (§4 des Briefings). Der sichtbare Ziehgriff liegt nur optisch darüber
   (pointer-events: none) — bedient wird ausschließlich über den (unsichtbar gemachten,
   aber fokussierbaren) nativen Regler. Ohne JS zeigt --clip seinen Fallback-Wert: die
   Bilder stehen dann in fester Position, aber vollständig sichtbar und lesbar. */
.compare-wrap[b-dv66r1hmgt] {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.compare-label[b-dv66r1hmgt] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-text-subtle);
    margin-bottom: 0.6rem;
}

.phone[b-dv66r1hmgt] {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 17.5;
    background: var(--brand-dark);
    border-radius: 34px;
    border: 6px solid var(--brand-dark);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    --clip: 52%;
}

.phone-notch[b-dv66r1hmgt] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 18px;
    background: var(--brand-dark);
    border-radius: 0 0 14px 14px;
    z-index: 5;
}

.compare-screen[b-dv66r1hmgt] {
    position: absolute;
    inset: 0;
}

.compare-screen img[b-dv66r1hmgt] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.screen-after[b-dv66r1hmgt] {
    position: absolute;
    inset: 0;
}

.screen-before[b-dv66r1hmgt] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--clip, 52%)) 0 0);
}

/* Der sichtbare Griff — rein dekorativ, liegt über dem echten Regler und blockiert dessen
   Klicks nicht (pointer-events: none). Position folgt derselben --clip-Variable wie die Bilder,
   damit Griff und Bildkante nie auseinanderlaufen. */
.compare-handle[b-dv66r1hmgt] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--clip, 52%);
    width: 2px;
    background: var(--brand-gold);
    pointer-events: none;
    z-index: 6;
}

.compare-handle[b-dv66r1hmgt]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: var(--shadow-lg);
}

.compare-handle[b-dv66r1hmgt]::before {
    content: "◂ ▸";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: var(--brand-on-gold);
    font-weight: 700;
    letter-spacing: 2px;
    z-index: 1;
}

/* Der ECHTE Regler: unsichtbar gemacht (opacity 0), aber im Layout und fokussierbar — das ist
   das etablierte Muster für "hübsch gestylte, aber native" Formularelemente. Volle Fläche des
   Telefons, damit die Trefferfläche für Maus/Touch großzügig bleibt. */
.compare-slider[b-dv66r1hmgt] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 7;
    -webkit-appearance: none;
    appearance: none;
}

.compare-slider:focus-visible ~ .compare-handle[b-dv66r1hmgt] {
    outline: 3px solid var(--brand-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.compare-caption[b-dv66r1hmgt] {
    text-align: center;
    font-size: 0.78rem;
    color: var(--brand-text-subtle);
    margin-top: 0.9rem;
}

/* ---------- Pilotplätze-Kapazität (live gezählt, siehe Home.razor @code) ---------- */

.capacity[b-dv66r1hmgt] {
    margin-top: 1.6rem;
    max-width: 26em;
}

.capacity-row[b-dv66r1hmgt] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--brand-text-muted);
    margin-bottom: 0.4rem;
}

.capacity-track[b-dv66r1hmgt] {
    height: 6px;
    border-radius: 6px;
    background: var(--brand-border);
    overflow: hidden;
}

.capacity-fill[b-dv66r1hmgt] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-gold-hover), var(--brand-gold));
}

/* ---------- Gründerabschnitt ---------- */

.founder-grid[b-dv66r1hmgt] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.6rem;
    align-items: center;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    padding: 1.8rem 1.9rem;
    margin-top: 1.6rem;
}

@media (max-width: 760px) {
    .founder-grid[b-dv66r1hmgt] {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

.founder-photo[b-dv66r1hmgt] {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    flex: none;
    padding: 0;
    border: none;
    cursor: pointer;
    background: var(--brand-gold);
    display: grid;
    place-items: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.founder-photo:hover[b-dv66r1hmgt] {
    transform: scale(1.05);
    /* Neutraler Schatten statt eines eigenen Gold-Glows: ADR-075 will neue Token erst ab dem
       zweiten Gebrauch, und dieser Hover-Effekt kommt nur einmal vor. */
    box-shadow: var(--shadow-md);
}

.founder-photo:focus-visible[b-dv66r1hmgt] {
    outline: 2px solid var(--brand-gold-ink);
    outline-offset: 3px;
}

.founder-photo img[b-dv66r1hmgt] {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.founder-name[b-dv66r1hmgt] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.founder-role[b-dv66r1hmgt] {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    margin-top: 0.15rem;
}

.founder-quote[b-dv66r1hmgt] {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--brand-text-body);
    line-height: 1.6;
    max-width: 34em;
}

.founder-contact[b-dv66r1hmgt] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ---------- Foto-Modal ----------
   Fokus wandert beim Öffnen auf den Schließen-Knopf und beim Schließen zurück auf den Auslöser
   (siehe landing.js) — sonst bliebe ein Tastatur-Nutzer im geschlossenen Panel hängen. */

.photo-modal[b-dv66r1hmgt] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    /* App-Chrome-Token statt neuem Markenwelt-Token: dieselbe Abdunklung, die Overlays app-weit
       schon benutzen (ADR-075) — kein Grund für einen zweiten, fast identischen Wert. */
    background: var(--color-backdrop);
    padding: 1.5rem;
}

.photo-modal.open[b-dv66r1hmgt] {
    display: flex;
}

.photo-modal-inner[b-dv66r1hmgt] {
    position: relative;
    max-width: 360px;
    width: 100%;
}

.photo-modal-frame[b-dv66r1hmgt] {
    background: var(--brand-surface);
    border-radius: 10px;
    padding: 0.9rem;
    box-shadow: var(--shadow-lg);
}

.photo-modal-frame img[b-dv66r1hmgt] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.photo-modal-caption[b-dv66r1hmgt] {
    text-align: center;
    margin-top: 0.9rem;
}

.photo-modal-caption b[b-dv66r1hmgt] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--brand-on-dark-strong);
    display: block;
}

.photo-modal-caption span[b-dv66r1hmgt] {
    font-size: 0.82rem;
    color: var(--brand-on-dark);
}

.photo-modal-close[b-dv66r1hmgt] {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-gold);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.photo-modal-close svg[b-dv66r1hmgt] {
    width: 16px;
    height: 16px;
    color: var(--brand-on-gold);
}

.photo-modal-close:focus-visible[b-dv66r1hmgt] {
    outline: 2px solid var(--brand-on-dark-strong);
    outline-offset: 2px;
}

/* ---------- Mobile Sticky-CTA ----------
   Neu (§4/§12): kein Gegenstück im Bestand. Erscheint erst, nachdem der Hero durchgescrollt ist
   — sonst konkurriert sie mit dem Hero-Knopf um denselben Klick. Sichtbarkeit läuft über
   landing.js (throttled per requestAnimationFrame), Grundzustand hier ist "unsichtbar", damit
   ohne JS nichts permanent im Weg klebt. */
.sticky-cta[b-dv66r1hmgt] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--brand-dark);
    border-top: 1px solid var(--brand-dark-border);
    padding: 0.7rem 1.1rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.sticky-cta.show[b-dv66r1hmgt] {
    display: flex;
}

.sticky-cta span[b-dv66r1hmgt] {
    font-size: 0.85rem;
    color: var(--brand-on-dark);
    /* Nachgezogen am 14.08.2026 mit dem längeren Knopftext (§2a): „Pilotplatz sichern" ist
       breiter als das frühere „Jetzt starten", und bei 360px wurde die Zeile dadurch rechnerisch
       knapp. Der Text links darf schrumpfen und umbrechen, der Knopf nicht — ein umgebrochener
       Knopf sieht kaputt aus, ein zweizeiliger Hinweis daneben nicht. Ohne min-width: 0
       verweigert ein Flex-Element das Schrumpfen unter seine Inhaltsbreite und schiebt
       stattdessen den Knopf über den rechten Rand. */
    min-width: 0;
    line-height: 1.3;
}

.sticky-cta .btn-gold[b-dv66r1hmgt] {
    flex: none;
    white-space: nowrap;
    padding: 0.7rem 1.2rem;
    font-size: 0.92rem;
}

@media (min-width: 701px) {
    .sticky-cta[b-dv66r1hmgt] {
        display: none !important;
    }
}

/* ============================================================================
   Briefing L2 (14.08.2026) — Preisanker, rote Linie im Hero, Wochenrhythmus,
   wöchentlicher Ablaufblock, Einrichtungs-Hinweis.
   Alle Farben, Radien und Schatten aus tokens.css (--brand-*), keine Literale (ADR-075).
   ============================================================================ */

/* Nur für Screenreader — die Wer-macht-was-Marke des Ablaufblocks („Du"/„vicini") braucht ein
   vorangestelltes „Zuständig:", das niemand sehen soll.

   Bootstrap liefert mit .visually-hidden dieselbe Technik und wird global geladen. Bewusst
   trotzdem eine eigene, gescopte Klasse: Die öffentlichen Seiten sind die einzigen im Projekt,
   die keine einzige Bootstrap-Klasse benutzen (Markenwelt statt App-Chrome, ADR-075). Sich hier
   ausgerechnet für die Barrierefreiheit an ein Framework zu hängen, das diese Seite sonst nicht
   braucht, heißt: Wer Bootstrap später vom öffentlichen Layout nimmt, macht dabei unbemerkt den
   Ablaufblock unverständlich — ein Fehler, den keine Prüfung zeigt.

   NICHT display:none und nicht visibility:hidden: beide nehmen den Text auch der Sprachausgabe
   weg. Das clip-path-Rechteck ist das etablierte Muster. Sollte die Klasse ein zweites Mal
   gebraucht werden, gehört sie nach app.css statt hierher. */
.vh[b-dv66r1hmgt] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Rote Linie, Kurzfassung im Hero (§3) ----------
   Als Pille auf heller Fläche, nicht als weiterer Absatz: Der Hero trägt links bereits drei
   Textblöcke untereinander (Überschrift, Lead, Plattform-Label). Ein vierter würde untergehen —
   die abgesetzte Fläche macht aus der Zusage einen Merkposten. Goldener Rand statt goldener
   Füllung, damit sie dem Knopf darunter nicht die Aufmerksamkeit nimmt: Der Knopf ist die
   Handlung, das hier ist ein Argument. */
.redline-badge[b-dv66r1hmgt] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.8rem;
    padding: 0.7rem 1.1rem;
    background: var(--brand-surface);
    border: 1.5px solid var(--brand-gold);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

.redline-badge-icon[b-dv66r1hmgt] {
    flex-shrink: 0;
    color: var(--brand-gold-ink);
}

/* Unter 480px wird aus der Pille ein Kasten mit weichen Ecken: Der Satz braucht dort zwei
   Zeilen, und ein zweizeiliger Text in einer 999px-Pille sieht aus wie ein Fehler. Zugleich der
   360px-Schutz — inline-flex mit langem Text schiebt sonst über den rechten Rand. */
@media (max-width: 480px) {
    .redline-badge[b-dv66r1hmgt] {
        display: flex;
        align-items: flex-start;
        border-radius: var(--radius-lg);
        padding: 0.75rem 0.9rem;
    }

    .redline-badge-icon[b-dv66r1hmgt] {
        margin-top: 0.1rem;
    }
}

/* ---------- Einrichtungs-Hinweis als Pilotleistung (§6) ----------
   Leise gehalten (klein, gedeckt, ohne Rahmen): Es ist eine Zugabe, kein Verkaufsargument
   erster Ordnung — und der Block ist zum Löschen gebaut (siehe Kommentar im Markup). Ein
   auffällig gerahmter Kasten hinterließe beim Entfernen ein sichtbares Loch im Layout, dieser
   Absatz nicht. */
.setup-note[b-dv66r1hmgt] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 34em;
    margin: 0 0 1.4rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--brand-text-body);
}

.setup-note-icon[b-dv66r1hmgt] {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--brand-gold-ink);
}

.setup-note strong[b-dv66r1hmgt] {
    color: var(--color-text);
    font-weight: 600;
}

/* ---------- Rechte Hero-Spalte: Regler + Wochenrhythmus (§4) ----------
   Eine gemeinsame Spalte statt zweier Grid-Kinder: Sonst müsste .hero-grid drei Spalten kennen
   und die Umbruchregel bei 960px würde die Karte neben statt unter das Handy legen. So bleibt
   der Umbruch eine einzige Regel — und beide Elemente teilen sich dieselbe Maximalbreite,
   damit Handy und Karte auf einer Kante stehen. */
.hero-stage[b-dv66r1hmgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    min-width: 0;
}

.rhythm[b-dv66r1hmgt] {
    width: 100%;
    max-width: 320px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--brand-shadow-card);
}

.rhythm-head[b-dv66r1hmgt] {
    margin: 0 0 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-gold-ink);
}

/* Sieben gleich breite Spalten statt flex mit Zwischenraum: Bei sieben Elementen und einem
   festen gap läuft die Reihe auf sehr schmalen Handys über die Kartenbreite hinaus. Ein
   Grid mit 1fr-Spalten kann das nicht — es verteilt, was da ist. */
.rhythm-days[b-dv66r1hmgt] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

/* --brand-text-muted und NICHT --brand-text-subtle (#A8A29A): Letzteres kommt auf der weißen
   Kartenfläche nur auf rund 2,5:1 und fällt bei 0,62rem unter jede Lesbarkeitsschwelle. Die
   Wochentage sind Information, keine Zierleiste — dieselbe Nachrechnung, die ADR-075 für die
   Gold-Paare gemacht hat. */
.rhythm-day[b-dv66r1hmgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
}

.rhythm-day.on[b-dv66r1hmgt] {
    color: var(--color-text);
}

/* Die unmarkierten Punkte brauchen einen Rand: --brand-gold-wash (#FBF6EA) auf der weißen
   Karte sind 1,06:1, also faktisch unsichtbar — man sähe drei goldene Punkte und vier Lücken
   statt der sieben Tage einer Woche, die §4 verlangt. Die Reihe entsteht erst durch die
   sichtbaren leeren Tage; sie sind die Aussage („an vier Tagen passiert nichts"). */
.rhythm-dot[b-dv66r1hmgt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-cream);
    border: 1px solid var(--brand-border);
    font-size: 0.7rem;
    line-height: 1;
}

.rhythm-day.on .rhythm-dot[b-dv66r1hmgt] {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-on-gold);
}

.rhythm-chips[b-dv66r1hmgt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.rhythm-chips li[b-dv66r1hmgt] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--brand-cream);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    color: var(--brand-text-body);
}

.rhythm-foot[b-dv66r1hmgt] {
    margin: 0.8rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--brand-border);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--brand-text-body);
}

.rhythm-foot strong[b-dv66r1hmgt] {
    color: var(--color-text);
}

/* ---------- Wöchentlicher Ablauf (§5) ----------
   Eigene Fläche (heller Grund + Randlinien) statt derselben Seitenfarbe wie .steps darüber:
   Zwei gleich aussehende Ablaufbeschreibungen hintereinander lesen sich als eine, die versehentlich
   doppelt steht. Der Farbwechsel sagt „neues Thema", bevor die Überschrift es sagt. */
.weekly[b-dv66r1hmgt] {
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
}

.flow[b-dv66r1hmgt] {
    list-style: none;
    padding: 0;
    margin: 2.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.flow-step[b-dv66r1hmgt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--brand-cream);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.2rem;
}

/* Der eine Kasten, der dem Wirt gehört. Doppelt ausgezeichnet — Rahmenfarbe UND die goldene
   Marke oben rechts —, weil die Aussage des ganzen Blocks an dieser Unterscheidung hängt.
   Die Zuständigkeit steht zusätzlich als Text in der Marke; Farbe allein wäre für jeden, der
   sie nicht sieht, gar keine Information (§10, Screenreader-Probe). */
.flow-step.is-you[b-dv66r1hmgt] {
    border-color: var(--brand-gold);
    background: var(--brand-gold-wash);
}

.flow-who[b-dv66r1hmgt] {
    align-self: flex-end;
    order: -1;
    margin-bottom: 0.7rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
}

.flow-who.you[b-dv66r1hmgt] {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-on-gold);
}

.flow-step strong[b-dv66r1hmgt] {
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
}

.flow-step p[b-dv66r1hmgt] {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--brand-text-body);
}

/* Kein Filter, kein Graustufen-Effekt, keine Hover-Änderung — dieselbe Regel wie bei den
   Hero-Logos: Meta und Google untersagen jede Veränderung ihrer Marken. Wenn die Reihe zu laut
   wirkt, ist die Stellschraube die Höhe, nicht die Farbe. */
.flow-logos[b-dv66r1hmgt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.flow-logos img[b-dv66r1hmgt] {
    height: 19px;
    width: auto;
    display: block;
}

.flow-when[b-dv66r1hmgt] {
    margin-top: auto;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-gold-ink);
}

/* ---------- Beispielwoche ---------- */

.example[b-dv66r1hmgt] {
    margin-top: 2rem;
    background: var(--brand-cream);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.7rem;
}

.example-head[b-dv66r1hmgt] {
    margin: 0 0 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-gold-ink);
}

.example-grid[b-dv66r1hmgt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.2rem;
}

.example-card[b-dv66r1hmgt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--brand-text-body);
}

/* Wie bei .rhythm-day: --brand-text-muted statt --brand-text-subtle. Hier wiegt es schwerer —
   „Dienstag, 11:00 Uhr" ist der Inhalt der Karte, nicht ihre Beschriftung. */
.example-time[b-dv66r1hmgt] {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-text-muted);
}

.example-card strong[b-dv66r1hmgt] {
    font-size: 1rem;
    color: var(--color-text);
}

.example-foot[b-dv66r1hmgt] {
    margin: 1.3rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--brand-border);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--brand-text-body);
}

.example-foot strong[b-dv66r1hmgt] {
    color: var(--color-text);
}

/* ---------- Agentur-Preisanker (§2) ----------
   Zentriert wie der übrige Kopf des Preisabschnitts, aber mit goldener Kante links: Die Zeile
   ist ein Vergleich und kein Fließtext — die Kante hält sie optisch zusammen, ohne sie zu einem
   zweiten Kasten neben der Preiskarte zu machen. Die Preiskarte bleibt das Ziel des Blicks. */
.price-anchor-line[b-dv66r1hmgt] {
    max-width: 640px;
    margin: 0 auto 1.6rem;
    padding: 0.7rem 0 0.7rem 1rem;
    border-left: 3px solid var(--brand-gold);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--brand-text-body);
}

.price-anchor-line strong[b-dv66r1hmgt] {
    color: var(--color-text);
    font-weight: 600;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 860px) {
    .redline-grid[b-dv66r1hmgt] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    section[b-dv66r1hmgt] {
        padding: 3.2rem 0;
    }
}

/* 360px-Schutz (Prüfung wie am 08.08.2026): Auf dem schmalsten verbreiteten Gerät bekommen die
   neuen Blöcke etwas Luft zurück, damit nichts über die rechte Kante ragt. Die Rasterspalten
   selbst brauchen keine Regel — alle neuen Raster sind auto-fit/1fr und fallen von allein auf
   eine Spalte. */
@media (max-width: 400px) {
    .flow-step[b-dv66r1hmgt],
    .example[b-dv66r1hmgt] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .price-anchor-line[b-dv66r1hmgt] {
        padding-left: 0.8rem;
    }
}
/* /Components/Pages/Library.razor.rz.scp.css */
.media-grid[b-p28hft6nxz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    max-width: 980px;
}

.media-tile[b-p28hft6nxz] {
    overflow: hidden;
}

/* Offene Personen-Bestätigung (PersonRightsPolicy): das Foto ist so lange nicht in einem Beitrag
   verwendbar. Ein ruhiger Rahmen statt einer Warnfarbe — es ist kein Fehler des Wirts, sondern eine
   Frage, die noch niemand gestellt hat.

   Der Streifen liegt auf dem Wrapper, NICHT auf .form-check: Bootstrap rückt dort per padding-left
   ein und holt die Checkbox mit negativem Margin wieder heraus. Ein eigenes padding-left auf
   demselben Element überschreibt diese Einrückung — die Box landet dann unter dem Streifen. */
.media-rights-open[b-p28hft6nxz] {
    border-left: 3px solid var(--color-brand);
    padding-left: 0.6rem;
}

    /* Quadratischer Zuschnitt-Container: klippt zuverlässig (auch iOS), Bild absolut positioniert
       (Größe/Offset aus Fokus + Zoom, ADR-062) — kein transform, das aus overflow:hidden ausbricht. */
    .media-tile-crop[b-p28hft6nxz] {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--color-surface-muted);
        cursor: pointer;
    }

        .media-tile-crop img[b-p28hft6nxz] {
            position: absolute;
            max-width: none;
            display: block;
        }

/* Zuschnitt-/Fokus-Editor-Modal (ADR-062): Backdrop wie das Zoom-Modal, aber schmal-zentriert. */
.sz-modal-backdrop[b-p28hft6nxz] {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    padding: 1.5rem;
    background: var(--color-backdrop);
    overflow: auto;
}

.sz-modal[b-p28hft6nxz] {
    width: 100%;
    max-width: 420px;
    margin: auto;
}
/* /Components/Pages/Posts.razor.rz.scp.css */
.hashtag-list[b-cwgtgn5mn5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}

/* Foto-Picker für den Bibliotheks-Hintergrund (Slice 3). */
.lunch-picker[b-cwgtgn5mn5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
}

.lunch-picker-tile[b-cwgtgn5mn5] {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.4rem;
    overflow: hidden;
    cursor: pointer;
    background: none;
    line-height: 0;
}

/* Bild absolut positioniert (Größe/Offset aus Fokus + Zoom, ADR-062); der Button klippt. */
.lunch-picker-tile img[b-cwgtgn5mn5] {
    position: absolute;
    max-width: none;
    display: block;
}

.lunch-picker-tile.selected[b-cwgtgn5mn5] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px var(--color-rail-active);
}

/* Stimmungsfoto ohne Personen-Bestätigung: sichtbar, aber nicht wählbar (PersonRightsPolicy).
   Ausblenden wäre bequemer und falsch — der Wirt sucht sein Foto, findet es nicht und weiß nicht
   warum. Entsättigt statt nur blass, damit der Unterschied auch auf einem hellen Foto trägt. */
.lunch-picker-tile.locked[b-cwgtgn5mn5] {
    cursor: not-allowed;
}

.lunch-picker-tile.locked img[b-cwgtgn5mn5] {
    filter: grayscale(1);
    opacity: 0.45;
}

/* Logo-Position (Slice C): ein 2x2-Raster, das die Ecken dort zeigt, wo sie liegen — eine Liste
   mit „oben links / oben rechts / ..." müsste dasselbe beschreiben und würde langsamer gelesen. */
.logo-anchor[b-cwgtgn5mn5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-anchor-grid[b-cwgtgn5mn5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    width: 68px;
    aspect-ratio: 1 / 1;
    padding: 2px;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.35rem;
    background: var(--color-surface-muted);
}

.logo-anchor-cell[b-cwgtgn5mn5] {
    display: flex;
    padding: 0;
    border: none;
    border-radius: 0.15rem;
    background: transparent;
    cursor: pointer;
}

    .logo-anchor-cell:hover:not(:disabled)[b-cwgtgn5mn5] {
        background: var(--color-rail-active);
    }

    .logo-anchor-cell.selected[b-cwgtgn5mn5] {
        background: var(--color-brand);
    }

    .logo-anchor-cell:disabled[b-cwgtgn5mn5] {
        cursor: default;
    }

/* Der Punkt sitzt in der Zelle dort, wo das Logo im Bild säße - die Zelle allein wäre nur ein
   Quadrant, der Punkt macht daraus eine Position. */
.logo-anchor-dot[b-cwgtgn5mn5] {
    width: 7px;
    height: 7px;
    margin: 3px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.logo-anchor-cell.selected .logo-anchor-dot[b-cwgtgn5mn5] {
    background: var(--color-surface);
}

.logo-anchor-topleft .logo-anchor-dot[b-cwgtgn5mn5] { align-self: flex-start; margin-right: auto; }
.logo-anchor-topright .logo-anchor-dot[b-cwgtgn5mn5] { align-self: flex-start; margin-left: auto; }
.logo-anchor-bottomleft .logo-anchor-dot[b-cwgtgn5mn5] { align-self: flex-end; margin-right: auto; }
.logo-anchor-bottomright .logo-anchor-dot[b-cwgtgn5mn5] { align-self: flex-end; margin-left: auto; }

.logo-anchor-auto[b-cwgtgn5mn5] {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.35rem;
    background: transparent;
    font-size: 0.875rem;
    cursor: pointer;
}

    .logo-anchor-auto.selected[b-cwgtgn5mn5] {
        border-color: var(--color-brand);
        background: var(--color-brand);
        color: var(--color-surface);
    }

.hashtag-item[b-cwgtgn5mn5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    user-select: none;
    margin: 0;
    font-size: 0.9rem;
}

    /* Herkunft = Farbe: Marken-/Stammdaten-Hashtags dezent in Gold (zentrale Variable). */
    .hashtag-item.brand[b-cwgtgn5mn5] {
        border-color: var(--color-brand);
        background: var(--color-brand-wash);
    }

    .hashtag-item .hashtag-text[b-cwgtgn5mn5] {
        line-height: 1.2;
    }

    /* Kleines, dezentes "x" zum kompletten Entfernen eines Hashtags — vertikal zentriert. */
    .hashtag-item .hashtag-remove[b-cwgtgn5mn5] {
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 0;
        margin: 0;
        width: 1.05rem;
        height: 1.05rem;
        font-size: 1.15rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .hashtag-item .hashtag-remove:hover[b-cwgtgn5mn5],
        .hashtag-item .hashtag-remove:focus-visible[b-cwgtgn5mn5] {
            color: var(--color-danger);
        }

/* Legenden-Punkt in der Hinweiszeile (erklärt die Gold-Färbung der Marken-Hashtags). */
.hashtag-legend-dot[b-cwgtgn5mn5] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    vertical-align: -1px;
    border: 1px solid var(--color-brand);
    background: var(--color-brand);
}

/* Vorschaubild ist anklickbar (öffnet das Modal). */
.post-image[b-cwgtgn5mn5] {
    cursor: zoom-in;
}

/* Listenansicht: klickbare Zeile mit kleinem quadratischem Thumbnail. */
.post-list-row[b-cwgtgn5mn5] {
    cursor: pointer;
}

.post-list-thumb[b-cwgtgn5mn5] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

/* Instagram-Feed-Vorschau: KEINE Abstände, quadratische Kacheln mit cover-Zuschnitt —
   der Wiedererkennungseffekt ist der Zweck (Sales-Asset). Spaltenzahl responsiv 3–6,
   gekoppelt an die INHALTSbreite (Container Query am Host, nicht Viewport — die Sidebar
   frisst 250 px); min. 3 Spalten bewusst auch auf schmalen Screens (wie Instagram). */
/* NUR das Grid nutzt die volle Inhaltsbreite (Instagram-Wirkung braucht Raum);
   Panel und Liste behalten bewusst ihre 820-px-Grenze (Lesbarkeit von Text/Formularen). */
.insta-grid-host[b-cwgtgn5mn5] {
    container-type: inline-size;
}

.insta-grid[b-cwgtgn5mn5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

@container (min-width: 640px) {
    .insta-grid[b-cwgtgn5mn5] { grid-template-columns: repeat(4, 1fr); }
}

@container (min-width: 880px) {
    .insta-grid[b-cwgtgn5mn5] { grid-template-columns: repeat(5, 1fr); }
}

@container (min-width: 1120px) {
    .insta-grid[b-cwgtgn5mn5] { grid-template-columns: repeat(6, 1fr); }
}

.insta-grid-tile[b-cwgtgn5mn5] {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    line-height: 0; /* kein Inline-Whitespace unter dem img */
}

    .insta-grid-tile img[b-cwgtgn5mn5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Facebook-Feed-Vorschau (Sales-Mockup): schmal-zentrierte Spalte scrollbarer Karten im
   nachempfundenen Facebook-Stil — bewusst NICHT volle Breite (anders als das Grid).

   AUSNAHME von der Token-Regel (ADR-075, dokumentiert): Die #050505/#65676b/#385898/#dddfe2/
   #ced0d4 unten sind NACHEMPFUNDENE FREMDOPTIK, keine vicini-Farben. Der ganze Zweck dieser
   Ansicht ist der Wiedererkennungseffekt „so sieht mein Beitrag bei Facebook aus" — sie mit
   unseren Token einzufärben würde ihn zerstören. Diese Werte gehören deshalb NICHT in
   tokens.css: dort stünden sie als vicini-Palette, die sie nicht sind. */
.fb-feed[b-cwgtgn5mn5] {
    max-width: 500px;
}

.fb-card[b-cwgtgn5mn5] {
    background: var(--color-surface);
    border: 1px solid #dddfe2;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    overflow: hidden;
}

.fb-card-head[b-cwgtgn5mn5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem 0.5rem;
}

.fb-logo[b-cwgtgn5mn5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.fb-logo-fallback[b-cwgtgn5mn5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 600;
    font-size: 1.1rem;
    user-select: none;
}

.fb-head-text[b-cwgtgn5mn5] {
    flex-grow: 1;
    min-width: 0;
    line-height: 1.2;
}

.fb-name[b-cwgtgn5mn5] {
    font-weight: 600;
    color: #050505;
}

.fb-sub[b-cwgtgn5mn5] {
    font-size: 0.78rem;
    color: #65676b;
}

.fb-more[b-cwgtgn5mn5] {
    color: #65676b;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

.fb-caption[b-cwgtgn5mn5] {
    padding: 0 1rem 0.5rem;
    margin: 0;
    white-space: pre-wrap;
    color: #050505;
}

.fb-hashtags[b-cwgtgn5mn5] {
    padding: 0 1rem 0.6rem;
    margin: 0;
    color: #385898;
    font-size: 0.92rem;
}

.fb-image[b-cwgtgn5mn5] {
    width: 100%;
    display: block;
}

/* Rein optische Interaktionsleiste — nachempfunden, keine Funktion. */
.fb-actions[b-cwgtgn5mn5] {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ced0d4;
    padding: 0.35rem 0.5rem;
}

.fb-action[b-cwgtgn5mn5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #65676b;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
}

/* Beitrag-Detail-Modal (Stufe A): Overlay über Grid/Liste, gleiche Backdrop-Mechanik wie
   das Bild-Zoom-Modal. z-index UNTER dem Zoom (1090) — der Zoom lässt sich aus dem Detail
   heraus öffnen und liegt dann drüber (Esc schließt zuerst den Zoom, Fokus liegt dort). */
.post-detail-backdrop[b-cwgtgn5mn5] {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    padding: 1.5rem;
    background: var(--color-backdrop);
    outline: none;
    overflow: auto;
}

.post-detail-content[b-cwgtgn5mn5] {
    position: relative;
    margin: auto;
    width: 40rem;
    max-width: 100%;
    padding: 1.25rem;
    background: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
}

.post-detail-image[b-cwgtgn5mn5] {
    display: block;
    width: 100%;
    max-width: 26rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

/* Dezenter Autosave-Status in der Kartenkopfzeile. */
.save-status[b-cwgtgn5mn5] {
    font-size: 0.8rem;
    line-height: 1;
}

    .save-status-muted[b-cwgtgn5mn5] {
        color: var(--color-text-muted);
    }

    .save-status-ok[b-cwgtgn5mn5] {
        color: var(--color-brand-ink);
    }

    .save-status-error[b-cwgtgn5mn5] {
        color: var(--color-danger);
    }

/* Icon-Buttons für Neben-Aktionen (Bild/Text/Hashtags). Dezent, Hover in Markengold. */
.icon-btn[b-cwgtgn5mn5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.375rem;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 0;
}

    .icon-btn.icon-btn-sm[b-cwgtgn5mn5] {
        width: 1.6rem;
        height: 1.6rem;
    }

    .icon-btn:hover[b-cwgtgn5mn5],
    .icon-btn:focus-visible[b-cwgtgn5mn5] {
        border-color: var(--color-brand);
        color: var(--color-brand-ink);
        background: var(--color-brand-wash);
    }

    .icon-btn:disabled[b-cwgtgn5mn5] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Eigener Tooltip (für Icon- UND Text-Buttons): schnell einblenden (~0,25 s),
   ~3 s sichtbar, dann automatisch aus.

   WARUM der Text erst bei :hover/:focus-visible erzeugt wird (ADR-075, Befund aus dem
   Smoke): Mit `content: attr(data-tip)` im Ruhezustand ist das Pseudo-Element zwar
   unsichtbar (opacity 0), steht aber IM LAYOUT — und mit `white-space: nowrap` wird es so
   breit wie sein Text. Der Tooltip „Redaktionsplan (Kalender)" am rechten Rand der
   Werkzeugleiste ist 157px breit, mittig über seinem Knopf, und ragte damit 38px über den
   Viewport: ein DAUERHAFTER horizontaler Scrollbalken auf schmalen Fenstern, ohne dass
   irgendein sichtbares Element überstand (Pseudo-Elemente findet keine Element-Suche).
   Ohne Inhalt hat das Pseudo-Element keine Breite und trägt nichts zur Scroll-Fläche bei.
   Gemessen: Ruhezustand 380px Viewport -> scrollWidth 380, kein Scrollbalken.

   WAS DAS NICHT LÖST (ausgesprochen, statt es als erledigt auszugeben): WÄHREND des Hovers
   ragt ein Tooltip über einem Knopf am rechten Rand weiter hinaus (gemessen: scrollWidth 432
   bei 380px Viewport, für die ~3 s der Einblendung). Das max-width unten hilft dagegen
   NICHT — es begrenzt die Breite, und die ist mit 157px nicht das Problem; das Problem ist
   die mittige Position über einem Knopf am Rand. Eine saubere Lösung braucht entweder
   CSS-Anchor-Positioning (`position-try-fallbacks: flip-inline`, noch nicht überall
   verfügbar) oder eine Rand-Ausrichtung je Knopf, also Markup. Gehört damit in die
   Komponenten-Scheibe, die diese Werkzeugleisten ohnehin anfasst.

   Das max-width bleibt trotzdem sinnvoll: es fängt einen WIRKLICH langen Tooltip ab, der
   sonst auf einem Handy quer über den ganzen Bildschirm liefe. */
[data-tip][b-cwgtgn5mn5] {
    position: relative;
}

    [data-tip][b-cwgtgn5mn5]::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-0.25rem);
        margin-bottom: 0.1rem;
        border-radius: 0.3rem;
        background: var(--color-rail);
        color: var(--color-rail-fg-strong);
        font-size: 0.75rem;
        line-height: 1.3;
        max-width: min(16rem, 80vw);
        width: max-content;
        opacity: 0;
        pointer-events: none;
        z-index: 1075;
    }

    [data-tip]:hover[b-cwgtgn5mn5]::after,
    [data-tip]:focus-visible[b-cwgtgn5mn5]::after {
        content: attr(data-tip);
        padding: 0.4rem 0.6rem;
        animation: vicini-tip-b-cwgtgn5mn5 3.3s ease forwards;
    }

@keyframes vicini-tip-b-cwgtgn5mn5 {
    0% { opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; }
}

/* Lade-Indikator über dem Beitragsbild, während fal das Bild erzeugt (Stufe 2). */
.image-busy-overlay[b-cwgtgn5mn5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-scrim);
    border-radius: 0.375rem;
    text-align: center;
}

/* Bild-Modal (Vergrößerung). Markenfarben über zentrale Variablen.
   rem-basierte Bildgröße (statt vw/vh) -> wächst mit dem Browser-Zoom mit; Backdrop
   scrollt bei Überlauf. "safe center" zentriert, kippt bei Überlauf auf oben (scrollbar). */
/* Das Bild-Zoom-Modal wohnt jetzt in der geteilten Komponente ImageZoomModal (ADR-041/033).
   .image-modal-close bleibt hier — das Detail-Modal nutzt es weiter für seinen Schließen-Button. */
.image-modal-close[b-cwgtgn5mn5] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

/* Sperr-Overlay fuer "Verwerfen & neu generieren". Gleiche Optik wie die uebrigen Overlays
   (halbtransparenter Backdrop, zentrierte Karte), aber ohne Schliessen-Knopf: die Strecke
   laeuft durch, ein Abbruch mittendrin hinterliesse einen halben Beitrag. */
.regenerate-backdrop[b-cwgtgn5mn5] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--color-backdrop-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.regenerate-box[b-cwgtgn5mn5] {
    background: var(--color-surface);
    border-radius: 0.5rem;
    padding: 1.75rem 2rem;
    max-width: 24rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}

/* Hinweis ueber dem Kalender-Raster ("Veroeffentlichte sind ausgeblendet"). Das Markup steht in
   Posts.razor und wird per Notice-Fragment IN die Kalender-Komponente gereicht - Scoped CSS haengt
   an der Komponente, in der das Markup steht, deshalb liegt die Regel hier und nicht in
   PostCalendarView.razor.css. */
.cal-page-hint[b-cwgtgn5mn5] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}
/* /Components/Pages/Start.razor.rz.scp.css */
/* Anmeldeseite zum Testzeitraum — bewusst schmal und ohne Ablenkung: hier gibt es genau eine
   sinnvolle Handlung. Farben aus den Tokens in wwwroot/app.css. */

.signup[b-lmki3jfb58] {
    padding: 4rem 0 2rem;
}

.signup-wrap[b-lmki3jfb58] {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Schrittanzeige ---------- */

/* Drei gleich breite Spalten mit einer durchgehenden Linie dahinter: Der Weg soll als EIN Weg
   lesbar sein, nicht als drei Kacheln. Die Linie liegt hinter den Ziffernkreisen (::before am
   li, nicht am ol) — so bleibt sie auch dann sauber, wenn die Beschriftungen unterschiedlich
   lang umbrechen. */
.stufen[b-lmki3jfb58] {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 0 2.4rem;
}

.stufen li[b-lmki3jfb58] {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--brand-text-subtle);
}

/* Verbindungslinie zum vorherigen Schritt — beim ersten Element keine. */
.stufen li + li[b-lmki3jfb58]::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--brand-border);
    z-index: 0;
}

.stufen li.erledigt + li[b-lmki3jfb58]::before,
.stufen li.erledigt[b-lmki3jfb58]::before {
    background: var(--brand-gold);
}

.stufen .num[b-lmki3jfb58] {
    position: relative;
    z-index: 1;
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 auto 0.45rem;
    border-radius: 50%;
    border: 2px solid var(--brand-border);
    background: var(--brand-surface);
    color: var(--brand-text-subtle);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.65rem;
}

.stufen .txt[b-lmki3jfb58] {
    display: block;
}

.stufen .aktiv[b-lmki3jfb58] {
    color: var(--brand-dark);
    font-weight: 600;
}

.stufen .aktiv .num[b-lmki3jfb58] {
    border-color: var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    box-shadow: 0 0 0 4px var(--brand-gold-ring);
}

.stufen .erledigt[b-lmki3jfb58] {
    color: var(--brand-text-body);
}

.stufen .erledigt .num[b-lmki3jfb58] {
    border-color: var(--brand-gold);
    background: var(--brand-surface);
    color: var(--brand-gold-ink);
}

@media (max-width: 380px) {
    /* Auf schmalen Geräten trägt die Ziffer allein; die Beschriftung des offenen Schritts
       verschwindet zuerst, weil sie am wenigsten aussagt. */
    .stufen li[b-lmki3jfb58] {
        font-size: 0.72rem;
    }
}

.eyebrow[b-lmki3jfb58] {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-gold-ink);
    margin: 0 0 0.9rem;
}

h1[b-lmki3jfb58] {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: -0.015em;
    margin: 0 0 0.9rem;
    font-weight: 700;
}

.lead[b-lmki3jfb58] {
    color: var(--brand-text-body);
    line-height: 1.6;
    margin: 0 0 2rem;
}

/* ---------- Formular ---------- */

/* 1,45rem statt 1,2rem (14.08.2026): Auf 360px stehen Beschriftung, Eingabefeld, zweizeilige
   Einwilligung, Knopf und zwei Textblöcke direkt untereinander. Bei engem Abstand liest sich das
   als ein einziger Block statt als Formular mit Schritten — und ein Formular, das gedrängt
   wirkt, wirkt aufwendiger als es ist. */
.form[b-lmki3jfb58] {
    display: flex;
    flex-direction: column;
    gap: 1.45rem;
}

.field[b-lmki3jfb58] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field > span[b-lmki3jfb58] {
    font-weight: 600;
    font-size: 0.92rem;
}

.field[b-lmki3jfb58]  input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--brand-border-input);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--brand-surface);
    color: var(--brand-dark);
}

.field[b-lmki3jfb58]  input:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px var(--brand-gold-ring);
}

.field[b-lmki3jfb58]  input::placeholder {
    color: var(--brand-text-subtle);
}

/* Köderfeld: unsichtbar, aber nicht display:none — manche Roboter überspringen genau das. */
.koeder[b-lmki3jfb58] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.consent[b-lmki3jfb58] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--brand-text-body);
}

.consent[b-lmki3jfb58]  input {
    margin-top: 0.2rem;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--brand-gold);
    flex: none;
}

.consent a[b-lmki3jfb58] {
    color: var(--brand-gold-ink);
}

.btn-gold[b-lmki3jfb58] {
    display: block;
    width: 100%;
    padding: 0.9rem 1.6rem;
    border: none;
    border-radius: 999px;
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    font-weight: 600;
    font-size: 1.02rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn-gold:hover[b-lmki3jfb58] {
    background: var(--brand-gold-hover);
}

.btn-ghost[b-lmki3jfb58] {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border: 2px solid var(--brand-outline);
    border-radius: 999px;
    color: var(--brand-dark);
    text-decoration: none;
    font-weight: 600;
}

.btn-ghost:hover[b-lmki3jfb58] {
    border-color: var(--brand-dark);
}

/* Die Risikoumkehr direkt unter dem Knopf (Briefing L2a).
   Bewusst kräftiger als .kleingedrucktes darunter: Das hier ist ein Argument, kein Hinweis.
   --brand-text-muted statt --brand-text-subtle, weil letzteres im Kontrast-Durchgang vom
   14.08.2026 bei 2,5:1 lag und damit unter der Lesbarkeitsschwelle. */
.risikoumkehr[b-lmki3jfb58] {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-text-body);
}

/* Abstand nach oben zusätzlich zum Formular-Abstand (14.08.2026, Fund von Dennis: „sieht etwas
   gequetscht aus"). Grund: Unter dem Knopf stehen zwei kleine Textblöcke direkt untereinander —
   die Risikoumkehr, mittig und kräftig, und das Kleingedruckte, linksbündig und blass. Bei
   gleichem Abstand verschwimmen beide zu einem grauen Absatz, und die Risikoumkehr verliert
   genau die Wirkung, für die sie hierher geholt wurde. Mit dem Zuschlag liest sie sich als
   Aussage zum Knopf, nicht als erste Zeile des Kleingedruckten. */
.kleingedrucktes[b-lmki3jfb58] {
    font-size: 0.82rem;
    color: var(--brand-text-muted);
    line-height: 1.55;
    margin: 0.7rem 0 0;
}

.alert[b-lmki3jfb58] {
    background: var(--brand-error-bg);
    border: 1px solid var(--brand-error-border);
    color: var(--brand-error-fg);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
}

.form[b-lmki3jfb58]  .validation-message {
    color: var(--brand-error-strong);
    font-size: 0.85rem;
}

/* ---------- Bestätigung ---------- */

.done[b-lmki3jfb58] {
    text-align: center;
    padding: 2rem 0;
}

.done-mark[b-lmki3jfb58] {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--brand-on-gold);
    font-size: 1.8rem;
    line-height: 3.4rem;
    font-weight: 700;
}

.done p[b-lmki3jfb58] {
    color: var(--brand-text-body);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.done .hint[b-lmki3jfb58] {
    font-size: 0.9rem;
    color: var(--brand-text-muted);
    margin-bottom: 2rem;
}
/* /Components/PostCalendarView.razor.rz.scp.css */
/* ===========================================================================
   Redaktionsplan-Kalender (Scheibe 1, seit 1b geteilte Komponente)

   Zwei Layouts, EIN Datenbestand: Desktop-Monatsraster und mobile Wochen-Agenda.
   Umgeschaltet wird per CONTAINER QUERY, nicht per @media — Hausregel wie beim
   Instagram-Grid in Posts.razor.css: die Sidebar frisst 250 px, eine Viewport-Query
   würde auf dem Desktop in einem schmalen Fenster das falsche Layout zeigen.
   Reines Blazor/CSS-Grid, keine JS-Kalender-Library.

   ACHTUNG: Diese Regeln lagen bis Scheibe 1b in Posts.razor.css. Blazor stempelt
   Scoped CSS PRO KOMPONENTE — mit dem Markup mussten sie zwingend mitwandern, sonst
   hätte der Kalender still sein Layout verloren (der Build meldet so etwas nicht).
   Der Container-Kontext hängt an .cal-host und kommt damit aus dieser Datei; die
   Komponente funktioniert deshalb in jedem Seitenkontext (/posts wie /dashboard).
   =========================================================================== */
.cal-host[b-fcmefw41df] {
    container-type: inline-size;
}

.cal-nav[b-fcmefw41df] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cal-nav-label[b-fcmefw41df] {
    min-width: 9rem;
    text-align: center;
}

.cal-hint[b-fcmefw41df] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

/* Kopfzeile "Wartet auf Freigabe": waagerechter Streifen ueber dem Raster. Entwuerfe
   haben keinen Platz in der Zeit - sie stehen bewusst AUSSERHALB des Rasters. */
.cal-approval[b-fcmefw41df] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.cal-approval-head[b-fcmefw41df] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cal-approval-hint[b-fcmefw41df] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.cal-approval-strip[b-fcmefw41df] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

    .cal-approval-strip .cal-post[b-fcmefw41df] {
        flex: 0 0 8.5rem;
    }

/* --- Desktop: Monatsraster ------------------------------------------------- */
.cal-grid[b-fcmefw41df] {
    display: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.cal-dow[b-fcmefw41df] {
    /* Bewusst NICHT --color-page: das ist der Seitenhintergrund, die Kopfzeile verschwaende
       sich darin. --color-surface-muted ist genau dafuer da — ein Ton dunkler, neutral, damit
       die Kopfzeile gegen den fast weissen Seitengrund nicht gelbstichig wirkt. */
    background: var(--color-surface-muted);
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    text-align: center;
}

.cal-day[b-fcmefw41df] {
    background: var(--color-surface);
    /* Grundhoehe traegt ZWEI Kacheln plus den "+"-Slot, ohne zu wachsen: sonst springt die
       Zeilenhoehe, sobald an einem Tag ein zweiter Beitrag liegt, und das Raster wirkt unruhig.
       Nebeneffekt: die Zellen werden deutlich quadratischer. Ab dem dritten Beitrag waechst der
       Tag weiterhin mit — Abschneiden waere der schlechtere Handel. */
    min-height: 8.5rem;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Nachbarmonatstage bleiben sichtbar (volle Wochen), treten aber zurueck. */
.cal-day-outside[b-fcmefw41df] {
    background: var(--color-surface-muted);
}

    .cal-day-outside .cal-day-num[b-fcmefw41df] {
        color: var(--color-text-subtle);
    }

/* Vergangene Tage sind kein Einstieg: Post.Schedule() verlangt die Zukunft, ein dort
   vorbelegter Termin waere eine Sackgasse. Deshalb kein "+"-Slot (siehe Markup). */
.cal-day-past[b-fcmefw41df] {
    background: var(--color-surface-sunken);
}

.cal-day-today[b-fcmefw41df] {
    box-shadow: inset 0 0 0 2px var(--color-brand);
}

.cal-day-num[b-fcmefw41df] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1;
}

.cal-day-today .cal-day-num[b-fcmefw41df] {
    color: var(--color-brand-ink);
}

/* --- Kachel (Raster, Kopfzeile und Agenda teilen sich diese Optik) ---------- */
.cal-post[b-fcmefw41df] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: var(--color-surface);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}

    .cal-post:hover[b-fcmefw41df] {
        border-color: var(--color-brand);
    }

.cal-post-thumb[b-fcmefw41df] {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.cal-post-meta[b-fcmefw41df] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Typ-Badge und Uhrzeit in einer Zeile: ohne die Uhrzeit sagt die Kachel nur "an diesem
   Tag", nicht "um wann" — und genau das war im Smoke nirgends ablesbar. */
.cal-post-line[b-fcmefw41df] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.cal-post-time[b-fcmefw41df] {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .cal-post-meta .badge[b-fcmefw41df] {
        font-size: 0.625rem;
        font-weight: 500;
        align-self: flex-start;
    }

/* Vorgemerkt, aber noch nicht verbindlich geplant: Entwuerfe/Freigegebene mit Wunschtermin.
   Gestrichelt, damit der Kalender nichts verspricht, was noch niemand freigegeben hat. */
.cal-post-uncommitted[b-fcmefw41df] {
    border-style: dashed;
    border-color: var(--status-approved);
    background: var(--status-approved-bg);
}

/* Fehlgeschlagene Ziele (O7): rot, Klick fuehrt ins Detail-Modal zum Retry. */
.cal-post-failed[b-fcmefw41df] {
    border-color: var(--status-failed);
    background: var(--status-failed-bg);
}

/* Typ-Badge - macht den CONTENT-MIX sichtbar, der eigentliche Punkt der Kachel.
   Farbcodiert je Post-Typ; Altbestand ohne Discriminator bleibt neutral. */
.cal-type[b-fcmefw41df] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    align-self: flex-start;
    white-space: nowrap;
}

.cal-type-aktion[b-fcmefw41df] {
    background: var(--type-aktion-bg);
    color: var(--type-aktion-fg);
}

.cal-type-kategorie[b-fcmefw41df] {
    background: var(--type-kategorie-bg);
    color: var(--type-kategorie-fg);
}

.cal-type-produkt[b-fcmefw41df] {
    background: var(--type-produkt-bg);
    color: var(--type-produkt-fg);
}

.cal-type-stimmung[b-fcmefw41df] {
    background: var(--type-stimmung-bg);
    color: var(--type-stimmung-fg);
}

.cal-type-beitrag[b-fcmefw41df] {
    background: var(--type-beitrag-bg);
    color: var(--type-beitrag-fg);
}

/* Leerer Slot: dezent, wird erst beim Hovern zum Angebot. Kein Ausgrauen, keine
   Mahnwand - der leere Tag ist eine Einladung, keine Sperre. */
.cal-slot[b-fcmefw41df] {
    margin-top: auto;
    border: 1px dashed var(--color-border-strong);
    border-radius: 0.375rem;
    background: none;
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    line-height: 1.2;
    padding: 0.1rem 0.35rem;
    cursor: pointer;
    align-self: flex-start;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.cal-day:hover .cal-slot[b-fcmefw41df],
.cal-slot:focus-visible[b-fcmefw41df] {
    opacity: 1;
}

.cal-slot:hover[b-fcmefw41df] {
    border-color: var(--color-brand);
    color: var(--color-brand-ink);
}

.cal-slot-wide[b-fcmefw41df] {
    width: 100%;
    text-align: left;
    opacity: 1;
    padding: 0.35rem 0.5rem;
}

/* Soll-Slot (Scheibe 2, Spec §5): der gebuchte, aber noch freie Platz. Anders als der
   dezente "+"-Slot oben ist er DAUERHAFT sichtbar - er ist der Grund, warum der Owner
   diese Woche noch etwas tun will ("der leere Slot als Motor", Spec §1). Gestrichelt wie
   der Wunschtermin-Rahmen: gleiche Sprache fuer "steht da, ist aber noch nichts".

   Bewusst KEIN Ausgrauen und kein Schloss jenseits der Kadenz (keine Mahnwand): Tage
   ohne Slot behalten ihr normales Aussehen und ihren "+"-Einstieg. Das Paket ist ein
   Anspruch, kein Limit. */
.cal-soll[b-fcmefw41df] {
    margin-top: auto;
    border: 1px dashed var(--color-brand);
    border-radius: 0.375rem;
    background: none;
    color: var(--color-brand-ink);
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    align-self: stretch;
    text-align: center;
    opacity: 0.75;
    transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.cal-day:hover .cal-soll[b-fcmefw41df],
.cal-soll:hover[b-fcmefw41df],
.cal-soll:focus-visible[b-fcmefw41df] {
    opacity: 1;
    background-color: var(--color-brand-wash);
}

.cal-soll-wide[b-fcmefw41df] {
    width: 100%;
    text-align: left;
    opacity: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

/* Wochen-Bilanz ueber dem Raster. Ruhig gehalten: eine Feststellung, keine Mahnung -
   der Ton entscheidet hier mehr als die Zahl. */
.cal-week-summary[b-fcmefw41df] {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

/* --- Mobil: vertikale Wochen-Agenda ---------------------------------------- */
.cal-agenda[b-fcmefw41df] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cal-agenda-day[b-fcmefw41df] {
    display: flex;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.cal-agenda-today[b-fcmefw41df] {
    box-shadow: inset 0 0 0 2px var(--color-brand);
}

.cal-agenda-date[b-fcmefw41df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2.5rem;
    flex-shrink: 0;
}

.cal-agenda-dow[b-fcmefw41df] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cal-agenda-num[b-fcmefw41df] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
}

.cal-agenda-body[b-fcmefw41df] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-grow: 1;
    min-width: 0;
}

/* Der Umschaltpunkt: ab hier traegt die Inhaltsbreite sieben Spalten - darunter
   bleibt die Agenda, die auf dem Handy tatsaechlich bedienbar ist (C19). */
@container (min-width: 640px) {
    .cal-grid[b-fcmefw41df] {
        display: grid;
    }

    .cal-agenda[b-fcmefw41df] {
        display: none;
    }
}
/* /Components/ReasonModal.razor.rz.scp.css */
/* Begründungs-Modal (ADR-079/3). Farben AUSSCHLIESSLICH über Token (ADR-075, bindend) —
   kein einziges Farb-Literal in dieser Datei. Backdrop-Werte gespiegelt von ImageZoomModal,
   damit sich die beiden Modale im Haus gleich anfühlen. */
.reason-backdrop[b-3up9p0ebvg] {
    position: fixed;
    inset: 0;
    z-index: 1095; /* über dem Bild-Zoom (1090): die Frage kommt vor dem Betrachten */
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    padding: var(--space-6);
    background: var(--color-backdrop-soft);
    outline: none;
    overflow: auto;
}

.reason-card[b-3up9p0ebvg] {
    margin: auto;
    width: 26rem;
    max-width: 100%;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.reason-title[b-3up9p0ebvg] {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-text);
}

.reason-subtitle[b-3up9p0ebvg] {
    margin: 0 0 var(--space-5);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Volle Breite, untereinander: Die Liste soll auf einen Blick erfassbar sein. Zwei Spalten
   sparten Höhe und kosteten genau das (ADR-079/2 — sonst misst die Auswertung die Reihenfolge
   der Liste statt der Meinung des Wirts). */
.reason-options[b-3up9p0ebvg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.reason-option[b-3up9p0ebvg] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

    .reason-option:hover[b-3up9p0ebvg] {
        border-color: var(--color-border-strong);
        background: var(--color-surface-sunken);
    }

    .reason-option.is-selected[b-3up9p0ebvg] {
        background: var(--color-brand-wash);
        border-color: var(--color-brand);
        color: var(--color-brand-ink);
    }

.reason-note[b-3up9p0ebvg] {
    margin-top: var(--space-5);
}

.reason-note-label[b-3up9p0ebvg] {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.reason-note-input[b-3up9p0ebvg] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    resize: vertical;
}

    .reason-note-input[b-3up9p0ebvg]::placeholder {
        color: var(--color-text-placeholder);
    }

.reason-note-count[b-3up9p0ebvg] {
    margin-top: var(--space-1);
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.reason-continue[b-3up9p0ebvg] {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: 0.95rem;
    color: var(--color-on-brand);
    background: var(--color-brand);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

    .reason-continue:hover[b-3up9p0ebvg] {
        background: var(--color-brand-hover);
    }

/* BEWUSST ein Textlink und keine Schaltfläche (ADR-079/3): Überspringen muss möglich sein, ohne
   der bequemste Weg zu werden. Sähe es aus wie die sechs Kacheln darüber, wäre es der siebte
   Grund — und der meistgewählte. */
.reason-skip[b-3up9p0ebvg] {
    display: block;
    width: 100%;
    margin-top: var(--space-5);
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

    .reason-skip:hover[b-3up9p0ebvg] {
        color: var(--color-text-muted);
    }
/* /Components/SafeZoneOverlay.razor.rz.scp.css */
/* Safe-Zone-Overlay / Fokus- & Zoom-Editor (ADR-062). Scoped CSS. Prozentwerte spiegeln 1:1
   die Composer-Geometrie aus SkiaImageComposer.

   MARKENWELT, nicht App-Chrome (ADR-075): Diese Komponente ist eine Vorschau des komponierten
   Bildes. Ihre Farben und Deckungen sind die des Composers — deshalb --brand-* statt --color-*,
   und deshalb bleiben die rgba()-Deckungen unten als Literale stehen: sie sind 1:1-Spiegel der
   Skia-Werte (Scrim 0.5, Panel 0.45, Panel-Rahmen 0.65). Ein Token daraus zu machen hiesse, sie
   von der Komposition zu entkoppeln — genau das darf hier nicht passieren. */
.sz-wrap[b-zosh7s588r] {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.sz-frame[b-zosh7s588r] {
    --sz-inset: 5%; /* margin = 0.05·w */
    --sz-logo-top: 5%;
    --sz-logo-h: 24%; /* Logo-Zone-Höhe 0.24·h (konservativ) */
    --sz-scrim-h: 34%; /* Top-Scrim 0.34·h */
    --sz-panel-h: 32%; /* repräsentative Text/Info-Höhe */
    --sz-ink: 245 240 230; /* Creme (rgb-Kanäle) */

    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* == quadratischer Post (square_hd) */
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--brand-dark);
    user-select: none;
    -webkit-user-select: none;
}

/* Editor: Foto ziehbar. touch-action:none verhindert, dass die Geste die Seite scrollt (mobil!). */
.sz-frame--edit[b-zosh7s588r] {
    cursor: grab;
    touch-action: none;
}

    .sz-frame--edit:active[b-zosh7s588r] {
        cursor: grabbing;
    }

.sz-photo[b-zosh7s588r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* statische Vorschau == Composer CoverFit; object-position == Fokus */
    display: block;
    pointer-events: none; /* Pointer-Events gehen an den Rahmen (Drag) */
    -webkit-user-drag: none;
}

/* Im Editor positioniert JS das Bild absolut (Größe = cover×Zoom, Offset aus Fokus) — kein
   object-fit/inset, damit die explizite px-Größe greift. */
.sz-frame--edit .sz-photo[b-zosh7s588r] {
    inset: auto;
    width: auto;
    height: auto;
    max-width: none;
    object-fit: fill;
}

/* Schema ohne Foto: dezentes „Teller"-Rund in der Mitte als Rahm-Anker. */
.sz-frame--schema[b-zosh7s588r]::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    width: 30%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgb(var(--sz-ink) / 0.06);
    border: 1px dashed rgb(var(--sz-ink) / 0.28);
    pointer-events: none;
}

.sz-scrim-top[b-zosh7s588r] {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--sz-scrim-h);
    background: linear-gradient(180deg, rgba(27, 26, 24, 0.5), rgba(27, 26, 24, 0));
    pointer-events: none;
}

.sz-logo[b-zosh7s588r] {
    position: absolute;
    top: var(--sz-logo-top);
    left: 20%; /* 0.6·w zentriert -> 20 %..80 % */
    width: 60%;
    height: var(--sz-logo-h);
    border: 1px dashed rgb(var(--sz-ink) / 0.85);
    border-radius: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sz-safe[b-zosh7s588r] {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 35%;
    bottom: 39%;
    border: 1px dashed rgb(var(--sz-ink) / 0.4);
    border-radius: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sz-panel[b-zosh7s588r] {
    position: absolute;
    left: var(--sz-inset);
    right: var(--sz-inset);
    bottom: var(--sz-inset);
    height: var(--sz-panel-h);
    background: rgba(27, 26, 24, 0.45);
    border: 1px solid rgba(205, 168, 81, 0.65);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sz-draghint[b-zosh7s588r] {
    position: absolute;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(27, 26, 24, 0.6);
    pointer-events: none;
}

.sz-logo span[b-zosh7s588r],
.sz-safe span[b-zosh7s588r],
.sz-panel span[b-zosh7s588r],
.sz-draghint span[b-zosh7s588r] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    color: rgb(var(--sz-ink));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.sz-panel span[b-zosh7s588r] {
    color: var(--brand-gold);
}

.sz-draghint span[b-zosh7s588r] {
    font-size: 0.58rem;
}

/* Zoom-Regler unter dem Rahmen. */
.sz-zoomrow[b-zosh7s588r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.sz-zoomlabel[b-zosh7s588r] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-dark);
}

.sz-zoom[b-zosh7s588r] {
    flex: 1 1 auto;
    accent-color: var(--brand-gold);
}