/* 9-Familie Theme «Typo/Trust» — Landingpage-Skin (chat9).
   Quelle: chat9-components-v2.html (Entscheide 13.07.2026):
   Mulish als Produkt-Schrift, Logo-Lockup Avenir Next, Versatz «Hero»
   (Farbschatten nur H1 + Logo + Buttons), Swiss-Rot #E30613 als Akzent,
   Farbdosis mono (Auszüge = Spur 3 Gelb). Lädt NACH app.css und
   überschreibt dessen Basis-Klassen nur für diese Seite. */

:root {
    --p1: #00B7EB;
    --p2: #E30613;
    --p3: #FFD500;
    --accent: #E30613;
    --accent-hover: #B80510;
    --d1: #FF2A2A;
    --d2: #2AFF2A;
    --d3: #2A6BFF;
    /* Dosis mono: beide Auszüge = Spur 3 */
    --a1: var(--p3);
    --a2: var(--p3);
    --ink: #111318;
    /* Zwei Dark-Töne: --bar = Hauptmenü-Balken, immer der dunkelste
       Fläche der Seite (fast Ink). --surface = Footer, Dark-Sections,
       Rampen, Canvas — bewusst heller, damit die grossen Flächen nicht
       erschlagen. Text bleibt Ink. */
    --bar: #14181f;
    --surface: #2b3240;
    --muted: #6b7280;
    --dim: #9ca3af;
    --line: #e5e7eb;
    /* Papier-Ton der Seite (statt Reinweiss) — fast neutrales Warmgrau
       (entschieden 20.08.2026, vorher #ede3e3 Rosé). */
    --paper: #E7E6E3;
    --ff: "Mulish", "Segoe UI", system-ui, sans-serif;
    --ff-brand: "Avenir Next", "Mulish", system-ui, sans-serif;
}

/* Canvas hinter der Seite = Papier: der Footer ist jetzt selbst hell,
   Overscroll soll nahtlos weiterlaufen. */
html { background: var(--paper); }
body { font-family: var(--ff); background: var(--paper); color: var(--ink); }

h1, h2, h3 { font-family: var(--ff); }
.mono { font-family: var(--ff); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ── Titel: Versatz «Hero» — Farbschatten nur am H1, alle DREI Spuren:
   Cyan + Rot gestaffelt unten-rechts (Rot als äusserster Auszug),
   Gelb oben-links. Hover spreizt alle drei. */
.hd1 {
    /* Black 900 = fettster Mulish-Schnitt (bunny liefert kein 1000);
       Groesse fix 2rem statt Tailwind-Klassen — eine Quelle. */
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: -0.035em;
    /* Versatz testweise aus (13.07.) — bei Bedarf wieder einkommentieren:
    text-shadow: 0.04em 0.035em 0 var(--p1),
                 0.08em 0.07em 0 var(--p2),
                 -0.04em -0.035em 0 var(--p3);
    transition: text-shadow 1.1s ease-in-out;
    */
}
/* .hd1:hover {
    text-shadow: 0.055em 0.05em 0 var(--p1),
                 0.11em 0.1em 0 var(--p2),
                 -0.055em -0.05em 0 var(--p3);
} */
.hd2 { font-weight: 800; letter-spacing: -0.02em; }

/* Hero füllt den Viewport: 100vh abzüglich Header (56px) + Streifen
   (22px) im schmalen Modus, im breiten nur Streifen. svh statt vh, damit
   Mobile-Browser-Chrome nicht zu Scroll führt; vh als Fallback. Inhalt
   vertikal zentriert. */
.f9hero {
    display: flex; align-items: center;
    min-height: calc(100vh - 78px);
    min-height: calc(100svh - 78px);
}
@media (min-width: 1460px) {
    .f9hero {
        min-height: calc(100vh - 22px);
        min-height: calc(100svh - 22px);
    }
}

/* Swiss-Editorial-Sektionskopf: Ink-Linie ÜBER dem Titel, Kicker links,
   Meta rechts — Raster sichtbar machen, nicht dekorieren. */
.f9sec { border-top: 2px solid #16a3d12b; padding-top: 10px; }
/* Breit: Sektionskopf ragt samt Kicker 70px in den linken Rand hinaus
   (Editorial-Überhang). Schmal keiner — würde aus dem Viewport laufen. */
@media (min-width: 1460px) {
    .f9sec { margin-left: -70px; }
}
.f9kicker {
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
    margin-bottom: 24px;
}
.f9kicker .meta { font-weight: 400; color: var(--dim); letter-spacing: .08em; }

/* ── Hauptmenü: schwarzer Balken. Schmal horizontal (fixed top),
   breit (≥1460px) vertikal an left 0 — Marke oben, Menü mit Scrollspy,
   Auth/CTA unten. Content rückt via body-Padding nach rechts. */
.f9head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bar); }
.f9head-in {
    max-width: 1152px; margin: 0 auto; padding: 0 24px; height: 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* line-height bewusst normal (wie .brand im Board) — line-height:1 würde
   die Baseline im Lockup verschieben und die 9 aus der Spez kippen. */
.f9brand {
    font-family: var(--ff-brand); font-weight: 800; letter-spacing: -0.03em;
    color: var(--ink); font-size: 26px; text-decoration: none;
}
.mainnav { display: none; align-items: center; gap: 18px; }
.mainnav a {
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; transition: color .15s;
}
.mainnav a:hover, .mainnav a.active { color: var(--ink); }
@media (min-width: 1024px) { .mainnav { display: flex; } }
.f9auth { display: flex; align-items: center; gap: 14px; }
.f9auth .loginlink {
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
}
.f9auth .loginlink:hover { color: var(--ink); }

/* Platz für den fixen Header (schmal). */
.f9top { margin-top: 56px; }

@media (min-width: 1460px) {
    /* Nur Seiten MIT vertikalem Menuebalken ruecken ein. Ohne diese Klasse
       stand auf Login/Register eine 232px-Luecke wie eine leere Sidebar. */
    body.f9-nav { padding-left: 232px; }
    .f9top { margin-top: 0; }
    .f9head { top: 0; left: 0; bottom: 0; right: auto; width: 232px; overflow-y: auto; }
    .f9head-in {
        flex-direction: column; align-items: stretch; height: 100%;
        max-width: none; padding: 26px 22px; gap: 0;
    }
    .mainnav {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px;
    }
    .mainnav a { padding: 7px 0; position: relative; }
    .mainnav a::before {
        content: ''; position: absolute; left: -22px; top: 6px; bottom: 6px; width: 2px;
        background: var(--accent); opacity: 0; transition: opacity .15s;
    }
    .mainnav a.active::before { opacity: 1; }
    .f9auth { margin-top: auto; flex-direction: column; align-items: stretch; gap: 10px; }
    /* In der 232px-Spalte bricht «Kostenlos starten» sonst auf zwei Zeilen
       und der Button wird zum Klotz. Enger setzen statt umbrechen lassen. */
    .f9auth .btn {
        justify-content: center; white-space: nowrap;
        padding: 12px 10px; font-size: 12px; letter-spacing: .03em;
    }
    .f9auth .loginlink { text-align: center; padding: 6px 0; }
}

/* Drei Farbstreifen (sticky, multiplyen mit durchlaufendem Content) */
.f9stripes {
    position: sticky; top: 56px; z-index: 40; height: 22px;
    mix-blend-mode: multiply; pointer-events: none;
}
@media (min-width: 1460px) { .f9stripes { top: 0; } }

/* ── Buttons: flächig, Farbauszug als harter Versatz-Schatten (Passer).
   Hover spreizt, Klick kollabiert auf den Schatten. Überschreibt app.css. */
.btn {
    font-family: var(--ff); font-weight: 600; font-size: 12px;
    letter-spacing: .03em; text-transform: uppercase;
    border-radius: 0; border: 0; padding: 10px 17px;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, box-shadow .35s ease, transform .12s ease;
}
/* Ein Versatz statt zwei. Der beidseitige Schatten liess den Knopf als
   Block wirken — in dichten Backend-Listen wurde daraus Grobheit. Ein
   einzelner Versatz nach unten-rechts liest sich als aufliegendes Blatt
   und bleibt trotzdem der Ueberdruck der Formensprache. */
.btn-primary {
    /* Die Hauptaktion traegt die Akzentfarbe der Marke, nicht das dunkle
       Surface — auf Papier wirkte der dunkle Block schwer, und Rot ist in
       dieser Formensprache ohnehin die Farbe des Handelns. */
    background: var(--accent); color: #fff; border: 0;
    box-shadow: 0.16em 0.15em 0 color-mix(in srgb, var(--a1) 55%, transparent);
}
.btn-primary:hover {
    background: var(--accent-hover); color: #fff;
    box-shadow: 0.24em 0.22em 0 color-mix(in srgb, var(--a1) 70%, transparent);
}
.btn-outline {
    background: transparent; color: var(--ink); border: 2px solid var(--ink);
    padding: 8px 15px; /* Rahmen frisst 2px je Seite — gleiche Aussenkante wie btn-primary */
    box-shadow: 0 0 0 transparent;
}
.btn-outline:hover {
    background: var(--ink); color: #fff;
    box-shadow: 0.16em 0.15em 0 color-mix(in srgb, var(--a1) 55%, transparent);
}
.btn:active { transform: translate(0.16em, 0.15em); box-shadow: 0 0 0 transparent !important; }

/* Demo-Input mit 9-Überdruck: drei farbige Konturen (Spur 1/2/3) liegen
   versetzt übereinander, multiply verrechnet — Kreuzungen dunkeln ab wie
   im Logo. Statisch, keine Animation. Fokus = Konvergenz als harter
   Schnappzustand (Auszüge auf 0/0 → Ink), als klares Fokus-Signal.
   Wrapper nötig: Inputs können keine ::before/::after tragen.
   !important gegen app.css (nagelt Inputs global mit !important fest). */
.f9inputwrap { position: relative; display: block; isolation: isolate; }
input.f9input {
    /* Mittlere Spur (Rot) ist die Kontur des Feldes selbst. */
    border: 3px solid var(--p2) !important; background: #fff; color: var(--ink);
    font-family: inherit; border-radius: 0 !important;
    box-shadow: none !important; outline: none;
}
.f9inputwrap::before,
.f9inputwrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    mix-blend-mode: multiply;
}
/* Feinjustiert (13.07.): beide Auszüge dezent nach oben-links gestaffelt,
   Gelb weiter draussen als Cyan. */
.f9inputwrap::before { border: 3px solid var(--p1); transform: translate(-2px, -1px); }
.f9inputwrap::after  { border: 3px solid var(--p3); transform: translate(-4px, -2px); }
/* Fokus: Auszüge bleiben stehen — der Überdruck IST der Zustand. */

/* ── Karten: flächig auf hellem Grau, ohne Border, ohne Raster-Kante.
   Karten-Titel in Akzent-Rot. Überschreibt app.css. */
.card { background: #f4f4f4; border: 0; border-radius: 0; position: relative; }
.card h3 { color: var(--accent); }
/* Klickbare Kacheln: dieselbe Rueckmeldung wie die Buttons — ein versetzter
   Farbschatten, der beim Hover aufgeht. Kein Anheben, kein Skalieren (das
   war der «zu verspielt»-Rueckbau vom Juli); nur der Ueberdruck-Versatz, den
   die Formensprache ohnehin fuehrt. */
.card-hover { transition: box-shadow .18s ease; }
.card-hover:hover {
    box-shadow: 0.26em 0.24em 0 color-mix(in srgb, var(--a1) 55%, transparent),
               -0.26em -0.24em 0 color-mix(in srgb, var(--a2) 55%, transparent);
}
.card-hover:hover .arrow { color: var(--accent); }
/* Tastaturbedienung: derselbe Zustand beim Fokussieren. */
.card-hover:focus-visible {
    outline: none;
    box-shadow: 0.26em 0.24em 0 color-mix(in srgb, var(--a1) 55%, transparent),
               -0.26em -0.24em 0 color-mix(in srgb, var(--a2) 55%, transparent),
               0 0 0 2px var(--ink);
}
@media (prefers-reduced-motion: reduce) { .card-hover { transition: none; } }
.card { padding-right: 32px !important; padding-bottom: 30px !important; }

/* Schritt-Nummern im 9-Stil: drei Auszüge in der Dark-Palette (RGB),
   screen verrechnet — Überlagerung hellt auf wie die 9 auf dunklem Grund.
   Pseudo-Elemente tragen die Ziffer doppelt (data-n), statisch versetzt. */
.stepnum {
    font-size: 40px; font-weight: 900; line-height: 1;
    color: var(--ink); position: relative; display: inline-block;
    /* wie im Logo-SVG: Verrechnung bleibt in der Gruppe */
    isolation: isolate;
}
.stepnum::before,
.stepnum::after {
    content: attr(data-n); position: absolute; left: 0; top: 0;
    mix-blend-mode: multiply; pointer-events: none;
    /* ::before wird sonst UNTER dem Text gemalt — dann rechnet die rote
       Spur nie mit. z-index hebt beide Auszüge über die Basis-Ziffer. */
    z-index: 1;
}
.stepnum::before { color: var(--p1); transform: translate(-2px, -2px); }
.stepnum::after  { color: var(--p3); transform: translate(2px, 2px); }

/* Schritt-Karten 1–3: auf dem Papier-Grund flach hell wie die uebrigen
   Karten (frueher Surface-Dunkel mit heller Typo). */
.card.card-dark { background: #f4f4f4; }
.card.card-dark h3 { color: var(--ink); }
.card.card-dark p { color: var(--muted); }
.price { font-variant-numeric: tabular-nums; }

.badge-accent {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; padding: 4px 14px; background: var(--accent); color: #fff;
    box-shadow: 3px 3px 0 var(--a2);
}

/* Infoboxen in der Datenschutz-Sektion: zarter Tinten-Film auf Papier
   (frueher heller Film auf Dunkel), kein Farbstich. */
.f9infobox {
    border: 1px solid var(--line);
    background: rgba(17, 19, 24, 0.035);
    padding: 20px;
}
.f9infobox h4 { color: var(--ink); }
.f9infobox p { color: var(--muted); }


/* Split-Screen «Für wen?»: Bild klebt beim Scrollen der Kacheln. */
.f9split-bild { position: sticky; top: 96px; }

/* Editorial-Illustrationen: harte Kanten (kein Radius), volle Breite. */
.f9bild { display: block; width: 100%; height: auto; }

/* Berater-Illustration in der Setup-Karte (Editorial-Set-Stil). */
.f9iso-wrap { flex-shrink: 0; width: 220px; height: auto; display: block; }

/* Icons im Überdruck-Stil (wie Board): Auszüge spreizen im Hover. */
.ic9 { display: inline-block; width: 48px; height: 48px; }
.ic9 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ic9 g[class^="t"] { transition: transform 1.1s ease-in-out; }
/* Versatz als Variablen (--vx/--vy Ruhe, --vhx/--vhy Hover): so drehen die
   Labor-Varianten nur an den Zahlen und nicht an den Transform-Regeln —
   sonst ueberholen sie per Spezifitaet die Hover-Zustaende. */
.ic9 { --vx: 5px; --vy: 4px; --vhx: 7px; --vhy: 6px; }
.ic9 .t1 { transform: translate(calc(-1 * var(--vx)), calc(-1 * var(--vy))); }
.ic9 .t3 { transform: translate(var(--vx), var(--vy)); }
.ic9:hover .t1, .card:hover .ic9 .t1 { transform: translate(calc(-1 * var(--vhx)), calc(-1 * var(--vhy))); }
.ic9:hover .t3, .card:hover .ic9 .t3 { transform: translate(var(--vhx), var(--vhy)); }
@media (prefers-reduced-motion: reduce) { .ic9 g[class^="t"] { transition: none !important; } }

/* ── Flow-Neun: 9 sitzt tief im Descender, 10° gekippt, SVG grösser als
   die Box (Spez 12.07.). Hover = Konvergenz: Spuren fahren auf 0/0. */
.u9 {
    display: inline-block; width: 1.07em; height: 1.43em; margin-left: -0.11em;
    position: relative; top: 0.86em; left: -0.51em; transform: rotate(10deg);
    /* left -0.51em statt -0.21em (Board): die Vektor-Wortmarke traegt den
       Nachlauf des t anders als der Live-Text — 9 rueckt naeher ans Wort.
       Tailwind erbt line-height 1.5 vom Body — Board rendert mit normal;
       sonst wandert die Baseline (und damit die 9) leicht nach unten. */
    line-height: normal;
}
/* display:inline + baseline: Tailwinds Preflight macht svg zum Block
   (Start an der Box-Oberkante) — dann hängt die 9 ein gutes em zu tief.
   Das Board rendert das SVG inline auf der Baseline; hier angleichen. */
.u9 svg { display: inline; vertical-align: baseline; width: 150%; height: 153%; overflow: visible; }
.u9 g[class^="t"] { transition: transform 1.1s ease-in-out; }
.u9 { --vx: 8px; --vy: 7px; }
.u9 .t1 { transform: translate(calc(-1 * var(--vx)), calc(-1 * var(--vy))); }
.u9 .t3 { transform: translate(var(--vx), var(--vy)); }
a:hover .u9 .t1, .hover9:hover .u9 .t1 { transform: translate(0, 0); }
a:hover .u9 .t3, .hover9:hover .u9 .t3 { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .u9 g[class^="t"] { transition: none !important; } }

/* Inhaltsspalte der Unterseiten. Schmal genug zum Lesen, aber ab 1460px
   NICHT mehr zentriert: dort steht links der vertikale Balken, und eine
   mittig gesetzte Spalte treibt den Text von ihm weg — der Blick springt
   dann ueber eine leere Zone. Also am Balken anschlagen. */
.f9inhalt { max-width: 46rem; margin: 0 auto; padding: 64px 24px; }
@media (min-width: 1460px) {
    .f9inhalt { margin-left: 0; padding-left: 40px; }
    /* Der 70px-Editorial-Überhang der Sektionsköpfe passt hier nicht:
       die Spalte hat links nur 40px Luft, der Kopf rutschte 30px unter
       den Menuebalken. Überhang auf die halbe Luft kappen. */
    .f9inhalt .f9sec { margin-left: -20px; }
}

/* Trennlinien: die Formensprache trennt mit einer zarten getoenten Linie
   (wie .f9sec auf der Startseite), nicht mit hartem Schwarz. Ersetzt im
   Backend die border-black-Utilities. */
.f9line { border-color: color-mix(in srgb, var(--paper) 74%, var(--ink)); }

/* Backend-Balken wie der oeffentliche Kopf: leicht tiefer als das Papier.
   z-index ueber den Farbstreifen (die liegen auf 40 und multiplizieren) —
   sonst scheinen sie durch aufklappende Menues hindurch. */
.f9appnav { background: var(--bar-hell); position: relative; z-index: 60; }

/* Wortmarke in der Backend-Navigation: die Flow-Neun sitzt tief im
   Descender (top: 0.86em) und schneidet sonst die Trennlinie des Balkens.
   Anheben in em, damit es bei jeder Schriftgroesse passt. */
.f9brand-nav { position: relative; top: -0.34em; }

/* Hinweiszeile (z.B. 2FA-Empfehlung): flache Flaeche mit Ink-Kante und
   versetztem Akzent-Schatten statt Warnschild-Gelb. Empfehlung, kein Fehler. */
.f9hinweis {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: #f4f4f4; border: 2px solid var(--ink); padding: 16px 18px;
    box-shadow: 5px 5px 0 var(--p3);
}
.f9hinweis .mono { color: var(--accent); letter-spacing: .12em; }

/* ── Login / Registrieren / Passwort: Karte auf Papier ───────────────
   Masse bewusst hier und nicht als Tailwind-Utilities: der gebaute app.css
   kennt nur Klassen, die beim letzten Build vorkamen — neu eingesetzte
   fallen still aus (genau daran fehlte der Karte der Innenabstand). */
.f9authpage {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 26px; padding: 48px 16px;
}
.f9card {
    width: 100%; max-width: 430px; background: #fff;
    border: 3px solid var(--ink); padding: 30px 28px 34px;
}
.f9card h1 { margin-bottom: 22px; }
/* Registrieren: zweispaltig statt langes Band — links wofür, rechts das
   Formular. Umbruch bei 820px, darunter gestapelt. */
.f9card.f9card-breit { max-width: 880px; }
.f9reg { display: grid; grid-template-columns: 1fr; gap: 28px; }
.f9reg-intro { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
@media (min-width: 820px) {
    .f9reg { grid-template-columns: 0.8fr 1fr; gap: 44px; }
    .f9reg-intro { border-bottom: 0; border-right: 1px solid var(--line); padding-right: 40px; padding-bottom: 0; }
}
/* Feldabstände + Paare (Passwort / Bestätigung nebeneinander). */
.f9feld + .f9feld, .f9paar + .f9feld, .f9feld + .f9paar, .f9paar + .f9paar { margin-top: 16px; }
.f9paar { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .f9paar { grid-template-columns: 1fr 1fr; } }
/* Auswahlfelder wie die Eingabefelder: eckig, Ink-Kontur. */
select.f9select {
    border: 3px solid var(--p2); background: #fff; color: var(--ink);
    font-family: inherit; border-radius: 0; outline: none;
}

.f9authback { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.f9authback:hover { color: var(--ink); }

/* ── Papier-Grund (entschieden 20.08.2026) ────────────────────────────
   Balken, Footer und die Datenschutz-Sektion stehen auf Papier statt auf
   Dunkel. Der Kopfbalken sitzt 7% tiefer als das Papier, damit er sich
   absetzt; abgeleitet per color-mix, damit er jedem Papierton mitfolgt. */
:root { --bar-hell: color-mix(in srgb, var(--paper) 93%, var(--ink)); }
.f9head { background: var(--bar-hell); border-bottom: 1px solid color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.f9brand { color: var(--ink); }
.mainnav a { color: var(--muted); }
.mainnav a:hover, .mainnav a.active { color: var(--ink); }

footer, #daten { background: var(--paper); color: var(--ink); }
footer { border-top: 1px solid var(--line); }
#daten { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
footer a { color: var(--ink); }
footer a:hover, #daten a:hover { color: var(--accent); }
/* Karten in der Datenschutz-Sektion: flach hell wie die uebrigen. */
.card.card-dark { background: #f4f4f4; color: var(--ink); }

.f9brand { position: relative; }
/* Vektor-Wortmarke: Masse = Em-Box der Avenir-Glyphen (viewBox 1366 hoch,
   Baseline bei 1000) — height/vertical-align spiegeln genau das, damit
   die 9 (em-basiert) unveraendert andockt. inline gegen den Preflight. */
.f9wort { display: inline; height: 1.366em; width: auto; vertical-align: -0.366em; }

/* Widget-Vorschau (Hero): helle Palette + multiply auf Ink = Ghost-9. */
.f9widget { max-width: 320px; border: 1px solid var(--surface); background: #fff; }
.f9widget-head {
    background: var(--bar); color: #fff; padding: 11px 14px;
    font-family: var(--ff-brand); font-weight: 800; letter-spacing: -0.02em; font-size: 15px;
}
.f9widget .bub { padding: 8px 12px; border-radius: 10px; font-size: 13px; max-width: 85%; }
.f9widget .bub.bot { background: #f3f4f6; border-bottom-left-radius: 3px; }
.f9widget .bub.user { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; align-self: flex-end; }

/* Anker unter dem fixen Header ankommen lassen. */
section[id] { scroll-margin-top: 76px; }
@media (min-width: 1460px) { section[id] { scroll-margin-top: 28px; } }

/* ── Backend: dieselbe Formensprache, kleinere Farbdosis.
   Auf der Landingpage traegt die Farbe die Aufmerksamkeit — dort ist sie
   richtig. Im Backend sitzt man stundenlang davor, und dieselbe Dosis liest
   sich als Laerm: Signalrot an jeder Hauptaktion, Gelb-Versatz daneben,
   rote Titel auf jeder Karte. Zurueckgenommen wird die Saettigung, nicht
   die Sprache — Versatz, Kanten und Streifen bleiben. */
body.f9backend {
    /* Eine Spur tiefer und weniger Signal als das Marken-Rot. */
    --accent: #BE1622;
    --accent-hover: #96101B;
}
/* Der zweite Farbton am Knopf machte aus jeder Hauptaktion ein Plakat.
   Der Versatz bleibt — als Grau, wie ein aufliegendes Blatt. */
body.f9backend .btn-primary { box-shadow: 0.16em 0.15em 0 rgba(17, 19, 24, .16); }
body.f9backend .btn-primary:hover { box-shadow: 0.24em 0.22em 0 rgba(17, 19, 24, .22); }
body.f9backend .btn-outline:hover { box-shadow: 0.16em 0.15em 0 rgba(17, 19, 24, .16); }
/* Zwoelf Karten auf einer Seite hiessen zwoelf rote Zeilen — der groesste
   Einzelposten am Farbeindruck. Titel gehoeren in Ink, der Akzent an das,
   was man anklickt. */
body.f9backend .card h3 { color: var(--ink); }
body.f9backend .card-hover:hover h3 { color: var(--accent); }
/* Auszeichnungen: Rot als Rahmen statt als Flaeche. */
body.f9backend .badge-accent {
    background: transparent; color: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* Duennere Streifen brauchen auch weniger Raum, sonst bleibt ein leerer
   Streifen Papier zwischen Menue und Inhalt stehen. */
body.f9backend .f9stripes { height: 9px; }