/* =============================================================================
   Roster Base - Stylesheet der oeffentlichen Seiten
   ---------------------------------------------------------------------------
   Erzeugt aus data/design-export/2026-08-17/v12/html/startseite.html
   (7 Stilbloecke der Design-Vorlage, unveraendert zusammengefuehrt).
   Nicht von Hand bearbeiten - Aenderungen gehoeren in die Vorlage.
   ============================================================================= */

/* ============================================================================
   Roster Base - v12 design tokens (Paket B, plan 2026-08-05)
   ----------------------------------------------------------------------------
   Source of truth: data/Branding/Branding-Kit v12/claude-code/tokens.css.
   Values are 1:1 from the kit. ONE documented deviation: the kit declares the
   tokens on :root - here they are scoped to the two v12 room classes
   (.rb12-site / .rb12-app), because the existing design system
   (src/styles/rb.css, loaded globally) declares :root tokens with the SAME
   NAMES but different values (measured 05.08.2026: --navy, --gold, --deep,
   --shadow collide). Scoping keeps both designs fully independent; removing
   the room class removes the whole design (same proven pattern as .rb-portal).
   Additions from the site mockup (Website v12/assets/style.css, measured):
   --alt (mockup alias for the app surface) and --shell (page max width).
   ============================================================================ */
.rb12-site,
.rb12-app {
  /* Schrift */
  --font-brand: 'Albert Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-editorial: 'Lora', Georgia, 'Times New Roman', serif;
  --font-app: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-numeric: 'Space Grotesk', ui-monospace, Menlo, monospace;

  /* Marke */
  --navy: #1E3A66;
  --deep: #121F35;
  --gold: #C99E63;
  --gold-hell: #A87F45;
  --gold-text: #7A5A2E;
  --glacier: #1995AD;
  --glacier-deep: #0E5C6C;
  --glacier-flaeche: #DCEFF4;
  --petrol: #16606B;
  --petrol-hell: #2AA0AF;

  /* Text */
  --ink: #121F35;
  --ink-2: #37425A;
  --ink-3: #6B7688;
  --ink-4: #8494AD;

  /* Flaechen und Linien */
  --site: #FFFFFF;
  --app: #F5F7FA;
  --alt: #F5F7FA;
  --panel: #FFFFFF;
  --sunken: #F8FAFC;
  --line: #DDE2EA;
  --line-2: #EEF1F6;

  /* Funktional */
  --success: #2E7D52;
  --warning: #C9882F;
  --warning-flaeche: #F4E9D6;
  --error: #B23A3A;
  --info: #2F6AD1;

  /* Kante, Tiefe, Zeit */
  --radius: 4px;
  --radius-container: 0;
  --shadow: 0 1px 2px rgba(18, 31, 53, .06);
  /* Betonte Trennlinie. Das Mockup schreibt dafuer var(--deep) direkt in die
     Regeln (.dhead/.fhead/.step/.drop) - auf hellem Grund richtig, im
     Dunkelmodus unsichtbar, weil --deep dort die Flaechenfarbe ist. Als Token
     kann die Hierarchie "stark vs. schwach" in beiden Zustaenden bestehen. */
  --line-strong: var(--deep);
  --focus: 0 0 0 2px rgba(25, 149, 173, .16);
  --t-color: 150ms;
  --t-opacity: 200ms;

  /* Raster */
  --gap-record: 10px;
  --pad-panel: 18px;
  --pad-site: 26px;
  /* Inhaltsbreite. Das Kit nennt 1180px; der Betreiber hat am 06.08.2026
     angeordnet, mindestens die Breite des Vorbilds zu nehmen - gemessen an
     collegepipe.com: .container = max-width 1300px bei 15px Innenabstand,
     also 1270px nutzbar. 1320px bei 24px Innenabstand ergibt 1272px nutzbar
     und liegt damit in beiden Lesarten (Gesamtbreite wie nutzbare Breite)
     ueber dem Vorbild. Betreiber-Entscheidung schlaegt Kit-Vorgabe. */
  --shell: 1320px;
  --pad-shell: 24px;
  /* Einheitliche Hoehe aller Bedienelemente in der Kopfzeile. Gemessen
     06.08.2026 standen dort drei verschiedene Hoehen nebeneinander:
     Sprachwahl 37px, Theme-Schalter 28px, Buttons 42,1px. */
  --hdr-control: 40px;
}

/* ============================================================================
   Dunkelmodus (DECISIONS 2026-08-06-G, Kaizen 070)
   ----------------------------------------------------------------------------
   HERKUNFT, weil sie oft falsch behauptet wird: Das Branding-Kit v12 enthaelt
   KEINEN Dunkelmodus. Gemessen 06.08.2026 ueber den GANZEN Kit-Ordner
   "data/Branding/Branding-Kit v12/":
     grep -ril "prefers-color-scheme|data-theme"  ->  0 Treffer
   Die frueher genannte Quelle "Farbzonen t1/t2 des Kits" gibt es nicht: t1/t2
   sind zwei Varianten der PORTAL-KOPFZONE (app/theme.css:212
   `body.t1 .topbar{background:var(--deep)}`, `<body class="t1 t2">` in
   app/postfach.html), kein Hell/Dunkel-Schema.

   Die Palette unten ist deshalb NICHT erfunden, sondern aus den dunklen
   Baendern EXTRAHIERT, die das Kit sehr wohl liefert - Kopfzeile, Hero,
   Werbeblock und Fusszeile stehen im Mockup auf var(--deep) und tragen dort
   eine vollstaendige Textstaffel (Website v12/assets/style.css:123, 166-170,
   381-384, 388-395):
     #FFFFFF  Ueberschrift        .hero h1 / .cta h2 / .ftrcol h4
     #D6DEEA  Menuelink           .navlink / .mobnav a
     #C4CFDF  Vorspann            .hero .lead / .cta p
     #AFBDD2  Listenlink          .ftrcol a
     #9FB3C8  Eyebrow             .hero .eyebrow
     #8FA0B8  Hilfstext           .ftr / .trust
     #7FD3E3  Akzentwort          .hero em.acc / .cta em.acc
   Der Dunkelmodus macht damit die ganze Seite zu dem, was Hero und Fusszeile
   ohnehin schon sind. var(--deep) geht eine Stufe tiefer als die Grundflaeche,
   damit die Baender sich weiter absetzen; alles andere folgt der Kit-Staffel.

   Markenbuch-belegte Dunkel-Varianten (Markenbuch v12, Kapitel Farbe):
   Gold traegt auf dunklem Grund #C99E63 (nicht #A87F45/#7A5A2E, die sind fuer
   hellen Grund). Petrol/Glacier laufen in ihren hellen Kit-Geschwistern.

   LEITENTSCHEIDUNG (Betreiber, 06.08.2026): "orientiere dich beim Dunkelmodus
   am bisherigen durchgaengigen Design". Der Dunkelmodus des Projekts existiert
   bereits und wirkt ueberall im Bestand - `src/styles/rb.css:20-30`,
   html[data-theme="dark"]. Die Flaechen- und Textwerte unten sind deshalb
   ZEICHENGLEICH aus diesem Block uebernommen, damit ein Wechsel zwischen einer
   Bestandsseite und einer v12-Seite im Dunkeln KEINEN Farbsprung erzeugt:
     --site/--app  = Bestand --bg        #121F35
     --panel       = Bestand --surface   #16243E
     --alt/--sunken= Bestand --surface-2 #1B2C49
     --ink         = Bestand --text      #FAF9F7
     --ink-2       = Bestand --text-2    #AFBCD0
     --ink-3       = Bestand --muted     #90A0B8
     --line        = Bestand --border    rgba(255,255,255,.10)
     --line-2      = Bestand --border-2  rgba(255,255,255,.06)
     --gold-text   = Bestand --eyebrow   #C99E63
     --gold-hell   = Bestand --gold-soft #E8C989
     --warning     = Bestand --warn-text #E8C989
     --error       = Bestand --err-text  #F0A9A2
   --navy, --deep und --gold stehen bewusst NICHT hier: der Bestands-Dark-Block
   ueberschreibt sie ebenfalls nicht (gemessen), sie behalten also in beiden
   Designs ihren hellen Wert - genau das macht Kopfzeile, Hero, Werbeblock und
   Fusszeile im Dunkeln nahtlos zur Grundflaeche, wie im Bestand.
   Nur wo der Bestand keinen Gegenwert hat (Glacier, Petrol, --ink-4,
   --success, --info), gilt die oben extrahierte Kit-Dunkelstaffel.

   Jedes Farbpaar ist in BEIDEN Zustaenden gemessen, nicht behauptet:
   `node scripts/check-v12-kontrast.mjs --verbose` (Teil von npm run check).
   ============================================================================ */
html[data-theme="dark"] .rb12-site,
html[data-theme="dark"] .rb12-app {
  /* Marke - Gold traegt auf dunkel #C99E63 (Markenbuch); --navy/--deep/--gold
     bleiben wie im Bestand unveraendert und stehen deshalb nicht hier */
  --gold-hell: #E8C989;
  --gold-text: #C99E63;
  --glacier: #7FD3E3;
  --glacier-deep: #7FD3E3;
  --glacier-flaeche: #123A44;
  --petrol: #5FC4D1;
  --petrol-hell: #8AD7E1;

  /* Text - Bestandsstaffel, --ink-4 eine Stufe unter --muted fortgesetzt */
  --ink: #FAF9F7;
  --ink-2: #AFBCD0;
  --ink-3: #90A0B8;
  --ink-4: #7E8DA6;

  /* Flaechen und Linien - Bestandswerte */
  --site: #121F35;
  --app: #121F35;
  --alt: #1B2C49;
  --panel: #16243E;
  --sunken: #1B2C49;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .22);

  /* Funktional - Warnung/Fehler aus dem Bestand, Erfolg/Info aufgehellt
     (der Bestand fuehrt dort nur Flaechenpaare, keine Textfarbe) */
  --success: #5FC98D;
  --warning: #E8C989;
  --warning-flaeche: rgba(201, 158, 99, .16);
  --error: #F0A9A2;
  --info: #8FB6F5;

  /* Tiefe: auf dunklem Grund traegt ein heller Schatten nicht, der Schatten
     wird dunkler statt staerker (Markenbuch: genau EIN Schatten) */
  --shadow: 0 1px 2px rgba(0, 0, 0, .55);
  --focus: 0 0 0 2px rgba(127, 211, 227, .22);
}

/* Zahlen (kit rule, scoped to the v12 rooms) */
.rb12-site :is(.metric, .amount, td.num, code, time),
.rb12-app :is(.metric, .amount, td.num, code, time) {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

/* Fokus, ueberall gleich (kit rule, scoped to the v12 rooms).
   ----------------------------------------------------------------------------
   Das Kit schreibt die Regel mit :where(). Das ist dort richtig - im v12-Raum
   war es ein Fehler, gemessen 06.08.2026: :where() hat Spezifitaet 0, also
   wiegt `.rb12-site :where(a,button,...):focus-visible` nur (0,1,0). Die
   ungescopte Bestandsregel `src/styles/rb.css:50`
   `a:focus-visible,.btn:focus-visible,button:focus-visible{...border-radius:8px}`
   wiegt bei Buttons (0,2,0) und GEWINNT damit - sie zog `outline-offset:3px`
   UND `border-radius:8px` in den v12-Raum, also runde Ecken beim Fokussieren,
   genau gegen die Markenbuch-Vorgabe Radius 0/4px. Bei blossen Links stand es
   sogar auf Gleichstand, wo nur die Ladereihenfolge entschied.
   Deshalb ohne :where(), und der Radius wird ausdruecklich zurueckgeholt:
   ein Fokusring darf die Kante des Elements nicht veraendern. */
.rb12-site a:focus-visible,
.rb12-site button:focus-visible,
.rb12-site input:focus-visible,
.rb12-site select:focus-visible,
.rb12-site textarea:focus-visible,
.rb12-site [tabindex]:focus-visible,
.rb12-app a:focus-visible,
.rb12-app button:focus-visible,
.rb12-app input:focus-visible,
.rb12-app select:focus-visible,
.rb12-app textarea:focus-visible,
.rb12-app [tabindex]:focus-visible {
  outline: 2px solid var(--glacier);
  outline-offset: 0;
  box-shadow: var(--focus);
  border-radius: var(--radius-container);
}
/* Bedienelemente behalten ihre 4px-Kante auch im Fokus (Markenbuch: Radius 4
   nur fuer Buttons, Eingabefelder, Chips).
   .btn braucht hier zusaetzlich outline + outline-offset: die Regel oben
   trifft es nur ueber a/button und wiegt dort (0,1,1) - die Bestandsregel
   `.btn:focus-visible` wiegt (0,2,0) und haette weiter gewonnen. Gefunden von
   scripts/check-v12-isolation.mjs, nicht von blossem Hinsehen. */
.rb12-site .btn:focus-visible,
.rb12-site input:focus-visible,
.rb12-site select:focus-visible,
.rb12-site textarea:focus-visible,
.rb12-app .btn:focus-visible,
.rb12-app input:focus-visible,
.rb12-app select:focus-visible,
.rb12-app textarea:focus-visible {
  outline: 2px solid var(--glacier);
  outline-offset: 0;
  border-radius: var(--radius);
}


/* ============================================================================
   Roster Base - v12 brand fonts, self-hosted (Paket B, plan 2026-08-05)
   ----------------------------------------------------------------------------
   Files produced by scripts/convert-fonts-v12.mjs from the branding kit TTFs
   (public/fonts/v12/, licenses under public/fonts/v12/licenses/). NO Google
   CDN - a fonts.googleapis.com link would leak visitor IPs to Google (LG
   Muenchen, Az. 3 O 17493/20); see kit claude-code/SCHRIFTEN-EINBAUEN.md.
   @font-face cannot be scoped to a class; loading these globally is harmless
   because browsers only download fonts that are actually used, and only the
   v12 rooms reference these families.
   ============================================================================ */

/* Albert Sans - Marke, Text, UI */
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/v12/albert-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/v12/albert-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/v12/albert-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/v12/albert-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/v12/albert-sans-800.woff2') format('woff2'); }

/* Lora - Headlines oeffentliche Seiten */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/v12/lora-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/v12/lora-700.woff2') format('woff2'); }

/* Plus Jakarta Sans - Headlines Portal und Backend */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/v12/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/v12/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/v12/plus-jakarta-sans-800.woff2') format('woff2'); }

/* Space Grotesk - Kennzahlen, Betraege, Codes */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/v12/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/v12/space-grotesk-500.woff2') format('woff2'); }


/* ============================================================================
   Roster Base - v12 public site styles, scoped to .rb12-site (Paket B)
   ----------------------------------------------------------------------------
   Rules taken from the site mockup (data/Branding/Branding-Kit v12/
   Website v12/assets/style.css, measured 05.08.2026) and from the kit token
   file (room block .site). Every selector is prefixed with .rb12-site so the
   existing design stays untouched (scoping rationale: the kit room class
   .app collides with <nav className="app"> in src/App.tsx; proven pattern
   .rb-portal). Paket B ships the frame (header, footer, buttons, shell);
   page-level styles follow in Paket C.
   ============================================================================ */

.rb12-site {
  background: var(--site);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
/* Doppelte Raumklasse, weil rb-pages.css:47 `.hero h1` mit derselben
   Spezifitaet (0,1,1) Schriftart, Gewicht, Groesse, Zeilenhoehe, Laufweite,
   Farbe UND margin-top vorgibt. Bei Gleichstand entscheidet die
   Buendel-Reihenfolge - darauf darf die Markentypografie nicht angewiesen
   sein. Gemessen 06.08.2026: h1 lief dadurch in Archivo 900. */
.rb12-site.rb12-site :is(h1, h2, h3, h4) {
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.rb12-site.rb12-site h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.08; letter-spacing: -.012em; }
.rb12-site.rb12-site h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.18; letter-spacing: -.006em; }
.rb12-site.rb12-site h3 { font-size: 22px; line-height: 1.32; }
.rb12-site.rb12-site h4 { font-size: 18px; line-height: 1.35; }
.rb12-site a { color: inherit; text-decoration: none; }
.rb12-site a:hover { text-decoration: underline; }
/* Ausdruecklich unterstrichene Links bleiben unterstrichen (Betreiber
   08.08.2026): "bei ... AGB ... und ... Datenschutzerklaerung ... muessen die
   Links immer unterstrichen sein, damit man sie erkennt". Die Regel
   darueber (text-decoration: none) schlaegt die Utility-Klasse, weil sie
   spezifischer ist - im Bestandsraum trat das nicht auf. Betrifft die
   Zustimmungsfelder der Registrierung und jeden anderen bewusst
   ausgezeichneten Link. WCAG 1.4.1: ein Link darf nicht allein an der
   Farbe erkennbar sein. */
.rb12-site a.underline { text-decoration: underline; }

/* ============================================================================
   ISOLATION gegen das ungescopte Bestands-CSS (DECISIONS 2026-08-06-G,
   Kaizen 070). Fuenf Klassennamen teilen sich src/styles/rb.css und der
   v12-Raum: .btn .btn-sm .card .g3 .lead. rb.css ist global geladen, also
   erbt jedes v12-Element JEDE Eigenschaft, die der v12-Raum nicht
   ausdruecklich selbst setzt. Bisher wurde nur die auffaellige Eigenschaft
   ueberschrieben - deshalb kamen Radius 18px und der Bestandsschatten auf die
   Karten (die geruegten "grauen Zwickel" im 1px-Raster) und eine feste
   Buttonhoehe von 46px statt der 44px des Kits.
   Ab hier gilt: Fuer jede geteilte Klasse wird JEDE von rb.css gesetzte
   Eigenschaft im v12-Raum ausdruecklich gesetzt, auch wenn sie "sowieso
   stimmt". Mechanisch abgesichert durch scripts/check-v12-isolation.mjs
   (Teil von npm run check) - eine neue rb.css-Eigenschaft auf einer geteilten
   Klasse macht das Gate rot, statt still durchzusickern.
   ============================================================================ */

/* ============================================================================
   SCHRIFT-RUECKHOLUNG (Betreiber-Ruege 06.08.2026: "Du hast durchgehend die
   Schriftarten-Vorschriften ignoriert fuer die oeffentlichen Seiten")
   ----------------------------------------------------------------------------
   Gemessen im Browser am 06.08.2026: Ueberschrift h1 lief in Archivo, Text in
   Inter - beides Markenbuch v6, nicht v12. Ursache ist keine fehlende
   v12-Regel, sondern ein CSS-Grundsatz: `src/index.css:117` setzt
   `font-family` DIREKT auf die Elemente
   (body, input, textarea, select, button, table, nav, p, li, label).
   Eine direkte Deklaration schlaegt eine GEERBTE immer - egal wie spezifisch
   der Vorfahre ist. `.rb12-site { font-family: Albert Sans }` vererbt also an
   ein <p>, das sein eigenes `font-family: Inter` mitbringt, und verliert.
   Deshalb wird die Vererbung hier ausdruecklich zurueckgeholt.

   Markenbuch v12, Kapitel Typografie (Skala oeffentliche Seiten):
     Lora 600         H1 60px / H2 38px / H3 25px      -> --font-editorial
     Albert Sans      Vorspann 19, Fliesstext 16,5, Button 15  -> --font-brand
     Space Grotesk    Zahlen, Betraege, Zeiten, Codes, Versallabels
     Plus Jakarta     nur Portal - "Lora nie im Portal, Plus Jakarta nie
                      oeffentlich"
   ============================================================================ */
.rb12-site :is(p, li, ul, ol, a, button, input, select, textarea, label,
  table, th, td, nav, figure, figcaption, blockquote, small, strong, em, span, div),
.rb12-app :is(p, li, ul, ol, a, button, input, select, textarea, label,
  table, th, td, nav, figure, figcaption, blockquote, small, strong, em, span, div) {
  font-family: inherit;
}
/* Zahlen und Codes behalten ihre eigene Stimme (Markenbuch: "Zahlen haben
   ihre eigene Stimme"). index.css:127 weist code/kbd/pre der Bestands-Mono
   zu - im v12-Raum ist das Space Grotesk. */
.rb12-site :is(code, kbd, pre, samp),
.rb12-app :is(code, kbd, pre, samp) {
  font-family: var(--font-numeric);
}
/* Ueberschriften: Serifen. `.rb12-site h1` wiegt (0,1,1) und stand damit
   gleichauf mit `.hero h1` aus rb-pages.css:47 - bei Gleichstand entscheidet
   die Ladereihenfolge, und die ging gegen uns. Die doppelte Raumklasse hebt
   das v12-Gewicht auf (0,2,1) und macht die Zuordnung unabhaengig davon,
   in welcher Reihenfolge die Stylesheets gebuendelt werden. */
.rb12-site.rb12-site :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-editorial);
  font-weight: 600;
}
.rb12-app.rb12-app :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-app);
  font-weight: 700;
}

/* ---------- Skip-Link ---------- */
.rb12-site .skip { position: absolute; left: -9999px; }
.rb12-site .skip:focus {
  left: 14px; top: 14px; z-index: 120;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong);
  padding: 11px 18px; font-weight: 600;
}

/* ---------- Shell ---------- */
.rb12-site .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad-shell); }

/* ---------- Kopfzeilen-Bedienelemente auf eine Hoehe ----------
   Betreiber 06.08.2026: "Die Formularfelder und Button oben sind
   ungleichmaessig hoch. Alle muessen dieselbe Hoehe haben."
   Gemessen waren 28 / 37 / 42,1 px. Die Hoehe kommt jetzt aus EINEM Token,
   damit sie nicht wieder auseinanderlaufen kann; die Buttons behalten ihr
   min-height nur noch ausserhalb der Kopfzeile. */
.rb12-site .hdrcta .btn,
.rb12-site .hdrcta .lang,
.rb12-site .hdrcta select,
.rb12-site .hdrcta .langwrap > * {
  height: var(--hdr-control);
  min-height: var(--hdr-control);
  box-sizing: border-box;
}
/* Sprachwahl mit Weltkugel (Betreiber 08.08.2026) - im v12-Raum ausdruecklich
   neu gesetzt, weil beide Raeume dieselben Klassen teilen. */
.rb12-site .langfield { position: relative; display: inline-flex; align-items: center; }
.rb12-site .langglobe {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; opacity: .85;
  /* Farbe der Kopfzeile, nicht die geerbte Textfarbe: gemessen war das Symbol
     tiefnavy auf dunkelblauem Grund und damit unsichtbar (08.08.2026). */
  color: #fff;
}
/* Platz fuer das Symbol. Die v12-Regel fuer .lang setzt padding neu und wuerde
   die Hilfsklasse aus der Komponente sonst ueberschreiben - der Text laege
   dann auf dem Symbol. */
.rb12-site.rb12-site .langselect { padding-left: 34px; }
/* GETEILTE KLASSE .lang - der Sprachwaehler ist eine Bestandskomponente und
   bringt aus rb.css:74 sein Bestandsdesign mit: Roboto Condensed, Radius 9px
   (Markenbuch v12 erlaubt hoechstens 4), helle Bestandsflaeche mitten im
   dunklen Kopf. Alle neun dort gesetzten Eigenschaften stehen hier neu. */
.rb12-site .lang,
.rb12-site .hdrcta select {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--radius);
  padding: 0 11px;
  font-family: var(--font-brand);
  font-size: 13px;
  letter-spacing: normal;
  cursor: pointer;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #D6DEEA;
}
.rb12-app .lang {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--radius); padding: 0 11px;
  font-family: var(--font-brand); font-size: 13px; letter-spacing: normal;
  cursor: pointer;
  background: var(--sunken); border: 1px solid var(--line); color: var(--ink-2);
}

/* ---------- Aufgeklappte Auswahlliste (Betreiber-Ruege 06.08.2026 abends)
   Wortlaut: "Die Theme-Umschaltung funktioniert nicht fuer das Suchfeld und
   fuer die Sprachauswahl, wenn die aufgeklappt werden bei Dunkel-Theme, sind
   beide Hintergruende dennoch hell."

   URSACHE, gemessen am Artefakt und nicht vermutet: Die Liste eines <select>
   zeichnet der BROWSER, nicht unser CSS. Er nimmt dafuer zwei Signale:
   `color-scheme` (folgt seit heute Mittag dem Umschalter, index.css:121) UND
   eine vom Autor gesetzte Hintergrundfarbe des <select>. Sobald eine gesetzt
   ist, gewinnt sie - und hier stand `rgba(255,255,255,.09)`. Halbtransparentes
   Weiss legt der Browser fuer das Fenster der Liste gegen WEISS an, nicht
   gegen die Kopfzeile darunter. Ergebnis: fast weisse Liste, egal welches
   Theme. Gemessen im Browser 06.08.2026:
   `getComputedStyle(select).backgroundColor` = rgba(255,255,255,.09),
   `colorScheme` = dark, und im ganzen Projekt existierte KEINE einzige
   `option`-Regel (Stylesheet-Abzug ueber document.styleSheets).

   ZWEI Massnahmen, weil eine allein nicht traegt:
   1. Die Kopfzeilen-Auswahl bekommt im Dunkelmodus eine OPAKE Flaeche.
      #273347 ist kein neuer Farbwert, sondern genau das, was das bisherige
      rgba auf der Kopfzeilenflaeche --deep #121F35 ergibt (0,09*255 + 0,91*18
      = 39 / 51 / 71) - die Kopfzeile sieht also unveraendert aus, nur ist die
      Farbe jetzt fuer den Browser lesbar statt durchsichtig.
   2. Die Listeneintraege selbst werden je Theme gesetzt. Das gilt fuer JEDES
      <select> im v12-Raum, nicht nur fuer die Sprachwahl - jedes kuenftige
      Formularfeld erbt die Regel damit automatisch richtig.
   Grenze, ehrlich benannt: Das Fenster der Liste ist ein Betriebssystem-
   Element. getComputedStyle belegt, dass die Regeln greifen; wie Windows es
   final zeichnet, sieht nur ein echter Blick im Browser (Pruefpunkt
   OEFF-17). */
.rb12-site select option,
.rb12-app select option {
  background-color: #FFFFFF;
  color: #121F35;
}
html[data-theme="dark"] .rb12-site .hdrcta select,
html[data-theme="dark"] .rb12-site .mobprefs select {
  background-color: #273347;
}
html[data-theme="dark"] .rb12-site select option,
html[data-theme="dark"] .rb12-app select option {
  background-color: #16243E;
  color: #FAF9F7;
}
/* Der Theme-Schalter zeigt nur noch EIN Symbol (das gerade inaktive) und ist
   bewusst 15 % kleiner als die uebrigen Bedienelemente - Betreiber
   06.08.2026: "Der Schalter fuer Theme nimmt zu viel Platz. Nur Sonne oder
   Mond anzeigen, immer das, was inaktiv ist, und mach es 15% kleiner."
   Eigene Klasse .themebtn statt der Bestandsklasse .theme-switch: dadurch
   traegt er kein Bestandsdesign mit herein (die Pillenform), und die Kopfzeile
   des Bestands bleibt unveraendert.

   NACHTRAG 06.08.2026 abends (Betreiber): "Die Icons fuer Theme-Umschalter und
   fuer die Suche die Lupe sollen beide ohne sichtbare border und ohne
   background sein. Einfach nur die Icons."
   Umgesetzt als `background: none` + `border: 0`. Zwei Dinge bleiben trotzdem
   erhalten, weil sie nicht Optik, sondern Bedienbarkeit sind:
   - Die KLICKFLAECHE bleibt 34 bzw. 40 px (WCAG 2.5.8 verlangt mindestens
     24x24 px) - unsichtbar, aber vorhanden.
   - Die Erkennbarkeit traegt jetzt das Symbol allein. WCAG 1.4.11 verlangt
     3:1 fuer Bedienelemente: #D6DEEA auf der Kopfzeilenflaeche --deep #121F35
     ergibt 12,26:1, im Hover-Weiss 15,92:1 (scripts/check-v12-kontrast.mjs).
     Der Fokusring bleibt unveraendert (tokens.css), sonst waeren die Symbole
     fuer Tastaturbedienung unauffindbar. */
.rb12-site .themebtn,
.rb12-app .themebtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: calc(var(--hdr-control) * .85);
  height: calc(var(--hdr-control) * .85);
  padding: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 150ms, opacity 150ms;
}
.rb12-site .themebtn {
  background: none;
  border: 0;
  color: #D6DEEA;
}
.rb12-site .themebtn:hover { color: #fff; }
.rb12-app .themebtn {
  background: none; border: 0; color: var(--ink-3);
}
.rb12-app .themebtn:hover { color: var(--ink); }

/* ---------- Buttons ----------
   GETEILTE KLASSE .btn - rb.css:42 setzt display, align-items, justify-content,
   gap, font-weight, font-size, padding, height, border-radius, border, cursor,
   font-family. Alle davon stehen hier. `height: auto` ist der eigentliche
   Fix: rb.css schreibt `height:46px` fest, was das min-height des Kits (44px)
   ueberfuhr - die v12-Buttons waren zwei Pixel zu hoch, ohne dass eine
   v12-Regel das je gesagt haette. */
.rb12-site .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-brand); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  padding: 13px 21px; height: auto; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: center;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.rb12-site .btn:hover { text-decoration: none; }
/* GETEILTE KLASSE .btn-sm - rb.css:46 setzt height, padding, font-size,
   border-radius; alle vier stehen hier. */
.rb12-site .btn-sm {
  font-size: 13px; padding: 9px 15px; height: auto; min-height: 38px;
  border-radius: var(--radius);
}
.rb12-site .btn-lg { font-size: 16px; padding: 16px 26px; min-height: 52px; }
.rb12-site .btn-p { background: var(--navy); color: #fff; }
.rb12-site .btn-p:hover { background: var(--deep); color: #fff; }
/* WCAG 1.4.11: Im Hellen traegt die Navy-Flaeche die Buttongrenze selbst
   (11,26:1 gegen Weiss). Im Dunkeln kann sie das nicht - Navy bleibt dort
   bewusst unveraendert, weil der projektweite Dunkelmodus (rb.css) es auch
   nicht anfasst und v12-Seiten sonst gegen jede Bestandsseite farblich
   springen wuerden (Betreiber-Vorgabe 06.08.2026). Die Grenze uebernimmt
   deshalb der 1px-Rand, den der Button ohnehin schon hat (transparent).
   Gemessen: 4,87:1 gegen die Grundflaeche, 3,35:1 gegen die Buttonflaeche
   (scripts/check-v12-kontrast.mjs). Markenbuch erlaubt 1px - nur nicht in
   Gold ("Gold nie als Rand"), daher der Quartaerton. */
html[data-theme="dark"] .rb12-site .btn-p { border-color: var(--ink-4); }
/* Bestand-Knopfnamen im v12-Raum (07.08.2026).
   GEMESSEN: Die Anmeldeseite nutzt die Bestandsklassen .btn-gold und
   .btn-ghost. Im v12-Raum gab es dafuer keine Entsprechung, deshalb blieb
   .rb12-site .btn mit "background: none" wirksam - der Hauptknopf war
   durchsichtig. Statt die Seite umzubenennen (und damit ihre Bestandsfassung
   zu zerstoeren) bekommen die beiden Namen hier ihre v12-Entsprechung:
   gold -> Primaerknopf, ghost -> Zweitform. Dieselbe Zuordnung wie .btn-p
   und .btn-s, nur unter dem Namen, den der Bestand vergibt. */
.rb12-site .btn-gold { background: var(--navy); color: #fff; border-color: var(--navy); }
.rb12-site .btn-gold:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
/* border VOLLSTAENDIG setzen, nicht nur border-color: Der Bestand setzt auf
   .btn-ghost die Kurzform "border", die sonst durchsickert. Das
   Isolations-Gate hat genau das gefangen (07.08.2026). */
.rb12-site .btn-ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.rb12-site .btn-ghost:hover { border: 1px solid var(--ink); background: var(--alt); }

.rb12-site .btn-s,
.rb12-site .btn-g { background: var(--panel); color: var(--ink); border-color: var(--line); }
.rb12-site .btn-s:hover,
.rb12-site .btn-g:hover { border-color: var(--ink); color: var(--ink); background: var(--alt); }
/* .btn-w sitzt ausschliesslich auf dunklen Baendern (Kopfzeile, Hero, CTA) -
   dort ist Weiss auch im Dunkelmodus richtig und bleibt hart gesetzt. */
.rb12-site .btn-w { background: #fff; color: var(--deep); }
.rb12-site .btn-w:hover { background: #E8EDF4; color: var(--navy); }
.rb12-site .btn-o { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .48); }
.rb12-site .btn-o:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .07); }
.rb12-site .on-dark .btn-g { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .48); }
.rb12-site .on-dark .btn-g:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }

/* ---------- Kopfzeile ---------- */
.rb12-site .hdr { position: sticky; top: 0; z-index: 90; background: var(--deep); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rb12-site .hdrrow { display: flex; align-items: center; gap: 26px; height: 74px; }
/* Logo 15 Prozent groesser (Betreiber 08.08.2026) - Symbol, Wortmarke,
   Unterzeile und Abstand gemeinsam, damit das Lockup proportional bleibt.
   Gilt fuer Kopfzeile UND Fusszeile, beide nutzen .logo. */
.rb12-site .logo { display: flex; align-items: center; gap: 12.7px; flex: none; }
.rb12-site .logo:hover { text-decoration: none; }
.rb12-site .logo svg { width: 34.5px; height: 34.5px; flex: none; }
.rb12-site .wm {
  display: flex; flex-direction: column; gap: 1px; line-height: 1;
  font-weight: 800; font-size: 17.8px; letter-spacing: .02em; color: #fff;
}
.rb12-site .wm span { font-weight: 500; font-size: 9.8px; letter-spacing: .34em; color: var(--gold); }
.rb12-site .mainnav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; flex-wrap: nowrap; }
.rb12-site .mainnav > li { position: relative; flex: none; }
/* HARD rule (DECISIONS 2026-08-06-A decision 3): a menu item may NEVER wrap
   to two lines, in any language at any width. nowrap + flex:none enforce it
   mechanically; the burger breakpoint below must trigger before overflow. */
.rb12-site .navlink {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px;
  font-size: 14.5px; font-weight: 500; color: #D6DEEA;
  background: none; border: 0; font-family: var(--font-brand); cursor: pointer;
  white-space: nowrap;
}
.rb12-site .navlink:hover { color: #fff; text-decoration: none; }
/* Chevron statt gefuelltem Dreieck (Form von fa-angle-down, siehe CaretV12).
   Groesse und Abstand am Vorbild gemessen: 12,8px / 5,6px links. */
.rb12-site .caret {
  width: 12.8px; height: 12.8px; margin-left: 5.6px; flex: none;
  color: currentColor; opacity: .7;
  transition: transform 200ms ease, opacity 150ms ease;
}
.rb12-site .mainnav > li:hover .caret,
.rb12-site .mainnav > li:focus-within .caret { opacity: 1; transform: rotate(180deg); }

/* Aufklapp-Menue. Sichtbarkeit haengt an data-open (gesetzt von
   SiteHeaderV12), NICHT an :hover - sonst bleibt das Menue nach einem Klick
   offen stehen, weil die Einzelseiten-Anwendung ohne Seitenwechsel
   navigiert und der Zeiger nie vom Feld herunterkommt.
   Tempo und Bewegung nach dem Vorbild collegepipe.com, dort gemessen:
   animation 0.3s slideInUp - also von unten einfahren und einblenden.
   Beim Radius bleibt das Markenbuch massgeblich (4px fuer Aufklapp-Menues),
   nicht die 5px des Vorbilds. */
.rb12-site .drop {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 334px;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(18, 31, 53, .18);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
}
.rb12-site .drop[data-open] { opacity: 1; visibility: visible; transform: none; }
.rb12-site .drop a { display: block; padding: 11px 14px; color: var(--ink); }
.rb12-site .drop a:hover { background: var(--alt); text-decoration: none; }
.rb12-site .drop b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rb12-site .drop i { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; }
.rb12-site .hdrcta { display: flex; align-items: center; gap: 9px; flex: none; }

/* ---------- Suche (DECISIONS 2026-08-06-D, Variante B) ---------- */
.rb12-site .searchwrap { position: relative; flex: none; }
/* Rahmen- und flaechenlos wie der Theme-Schalter (Betreiber 06.08.2026
   abends) - Begruendung und Kontrastnachweis stehen beim .themebtn oben. */
.rb12-site .searchbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hdr-control); height: var(--hdr-control); padding: 0;
  background: none; border: 0;
  border-radius: var(--radius); color: #D6DEEA; cursor: pointer;
  transition: color 150ms;
}
.rb12-site .searchbtn:hover { color: #fff; }
.rb12-site .searchpanel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  width: min(440px, calc(100vw - 2 * var(--pad-shell)));
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(18, 31, 53, .18); padding: 10px;
}
/* Die Eingabezeile traegt ihre Flaeche ausdruecklich aus einem Token statt
   sie vom Panel zu erben (Betreiber-Ruege 06.08.2026 abends: "Die
   Theme-Umschaltung funktioniert nicht fuer das Suchfeld"). Geerbt war sie
   zwar rechnerisch richtig, aber sie war nirgends GESETZT - und was nirgends
   gesetzt ist, kann von jeder kuenftigen Regel gekippt werden, ohne dass ein
   Gate es merkt. --sunken ist hell #F8FAFC und dunkel #1B2C49. */
.rb12-site .searchfield {
  display: flex; align-items: center; gap: 9px;
  padding: 0 11px; height: var(--hdr-control);
  background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-3);
}
.rb12-site .searchfield:focus-within { border-color: var(--glacier); }
.rb12-site .searchfield input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: 15px; color: var(--ink);
}
/* Der Platzhalter bekommt eine eigene Farbe, weil der Browser sonst eine aus
   der Textfarbe ABLEITET - und abgeleitete Farben sind nicht messbar. Mit
   --ink-3 waere er auf der neuen Feldflaeche --sunken nur 4,43:1 (gerechnet,
   AA verlangt 4,5), deshalb --ink-2: 9,66:1 hell, 7,74:1 dunkel. Beide Paare
   stehen jetzt im Kontrast-Gate. */
.rb12-site .searchfield input::-moz-placeholder { color: var(--ink-2); opacity: 1; }
.rb12-site .searchfield input::placeholder { color: var(--ink-2); opacity: 1; }
/* Der Browser zeichnet bei type=search ein eigenes Loeschkreuz - wir haben
   einen eigenen, beschrifteten Schliessen-Knopf, zwei waeren verwirrend. */
.rb12-site .searchfield input::-webkit-search-cancel-button { display: none; }
.rb12-site .searchclose {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--ink-3); cursor: pointer;
}
.rb12-site .searchclose:hover { color: var(--ink); }
.rb12-site .searchresults { margin-top: 8px; max-height: 60vh; overflow-y: auto; }
.rb12-site .searchresults ul { list-style: none; margin: 0; padding: 0; }
.rb12-site .searchresults a { display: block; padding: 9px 11px; color: var(--ink); }
.rb12-site .searchresults a:hover { background: var(--alt); text-decoration: none; }
.rb12-site .searchresults b { display: block; font-size: 14.5px; font-weight: 600; }
.rb12-site .searchresults i {
  display: block; font-style: normal; font-size: 13px; line-height: 1.5;
  color: var(--ink-3); margin-top: 2px;
}
.rb12-site .searchhint { padding: 9px 11px; font-size: 13.5px; color: var(--ink-3); }
.rb12-site .searchmore {
  margin-top: 6px; padding: 9px 11px; border-top: 1px solid var(--line-2); font-size: 13.5px;
}
.rb12-site .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rb12-site .burger {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius);
  color: #fff; font-size: 17px; cursor: pointer;
}
.rb12-site .mobnav { display: none; background: var(--deep); border-top: 1px solid rgba(255, 255, 255, .1); padding: 14px 32px 26px; }
.rb12-site .mobnav[data-open] { display: block; }
.rb12-site .mobnav .grp {
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #9FB3C8; margin: 18px 0 6px;
}
.rb12-site .mobnav .grp:first-child { margin-top: 4px; }
/* hidden by default; shown only in the <=560px block below */
.rb12-site .mobnav .mobprefs {
  display: none; align-items: center; gap: 12px;
  padding: 4px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.rb12-site .mobnav a { display: block; padding: 9px 0; font-size: 15.5px; color: #D6DEEA; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.rb12-site .mobnav a:hover { color: #fff; text-decoration: none; }

/* Der Bestand faerbt den Fokusring im Dunkeln auf Gold um
   (rb.css:51, Spezifitaet 0,3,0). Im v12-Raum bleibt er Glacier - Gold ist
   laut Markenbuch Auszeichnung in der Schrift, keine Rahmenfarbe. */
html[data-theme="dark"] .rb12-site .btn:focus-visible,
html[data-theme="dark"] .rb12-app .btn:focus-visible,
html[data-theme="dark"] .rb12-site :is(a, button):focus-visible,
html[data-theme="dark"] .rb12-app :is(a, button):focus-visible { outline-color: var(--glacier); }

/* GETEILTE KLASSE .metric - rb-pages.css:73 gibt ihr die seitlichen
   Trennlinien des Bestands-Kennzahlenbands. Im v12 traegt die 1px-Fuge des
   Rasters die Trennung (tickrow), eine zweite Linie waere doppelt. */
.rb12-site .metric { padding: 0; border-left: none; }
.rb12-site .metric:first-child { padding-left: 0; border-left: none; }

/* ---------- Recurring text pieces (mockup style.css:76-84) ---------- */
.rb12-site .eyebrow,
.rb12-site .kicker {
  font-family: var(--font-numeric); font-weight: 500; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--glacier-deep);
}
.rb12-site .kicker { display: block; font-size: 10.5px; letter-spacing: .18em; color: var(--ink-3); }
/* GETEILTE KLASSE .lead - rb.css:41 setzt font-size, color, max-width und
   margin-top; alle vier stehen hier und waren als einzige der fuenf schon
   vorher vollstaendig. Bleibt trotzdem im Gate, damit eine spaeter in rb.css
   ergaenzte Eigenschaft nicht unbemerkt durchsickert. */
.rb12-site .lead { font-size: 19px; line-height: 1.6; color: var(--ink-2); margin-top: 16px; max-width: 56ch; }

/* ---------- Home page blocks (mockup style.css hero/ticker/band/card/steps
   sections, taken 1:1 on 06.08.2026 and scoped) ---------- */
.rb12-site .hero { display: block; background: var(--deep); color: #fff; padding: 96px 0 92px; overflow: hidden; }
/* rb-pages.css gibt `.hero` zwei erzeugte Ebenen (::before Lichtkegel,
   ::after Rasterbild mit mask-image) und `.hero h1` eine eigene Typografie.
   Beides gehoert zum Bestands-Hero und hat im v12-Hero nichts zu suchen -
   der bringt seine Tiefe ueber die Geraetevorschau mit. Abschalten statt
   ueberschreiben: ohne content existiert das Pseudoelement nicht. */
.rb12-site .hero::before,
.rb12-site .hero::after { content: none; }
.rb12-site.rb12-site .hero h1 {
  color: #fff; margin-top: 0;
  font-family: var(--font-editorial); font-weight: 600;
  font-size: clamp(38px, 5vw, 60px); line-height: 1.08; letter-spacing: -.012em;
}
.rb12-site .hero .eyebrow { color: #9FB3C8; }
.rb12-site .hero .lead { color: #C4CFDF; max-width: 52ch; }
.rb12-site .hero em.acc { color: #7FD3E3; }
.rb12-site .herogrid { display: grid; grid-template-columns: 6.6fr 5.4fr; gap: 64px; align-items: center; }
.rb12-site .heroactions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
/* GETEILTE KLASSE .trust - rb-pages.css gibt ihr ein eigenes Flex-Layout,
   Laufweite und eine Bestandsschrift, und `.trust .dot` macht aus dem
   v12-Trennpunkt einen gerundeten Bestandspunkt. Beide vollstaendig gesetzt. */
.rb12-site .trust {
  display: block; align-items: initial; gap: 0; flex-wrap: nowrap;
  margin-top: 18px; font-size: 13.5px; color: #8FA0B8;
  font-family: inherit; letter-spacing: normal;
}
.rb12-site .trust b { font-weight: 600; }
.rb12-site .trust .dot {
  width: 8px; height: 8px; border-radius: var(--radius-container);
  background: var(--line);
}

/* device preview in the hero (one-shot animation, see HomePageV12) */
.rb12-site .dwrap { position: relative; perspective: 1400px; }
.rb12-site .dwrap::before {
  content: ""; position: absolute; left: 44px; top: 30px; right: -22px; bottom: -26px;
  border: 1px solid rgba(255, 255, 255, .14);
  transform: rotateY(-13deg) rotateX(4deg) translateZ(-70px);
}
.rb12-site .device {
  position: relative; background: var(--panel); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .44);
  transform: rotateY(-13deg) rotateX(4deg); transform-origin: left center;
}
.rb12-site .dbar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--alt); border-bottom: 1px solid var(--line); }
.rb12-site .dot { width: 8px; height: 8px; background: var(--line); display: block; }
.rb12-site .url { margin-left: 8px; font-family: var(--font-numeric); font-size: 11px; color: var(--ink-3); }
.rb12-site .dbody { padding: 0; }
.rb12-site .dhead { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line-strong); }
.rb12-site .dtitle { font-size: 15px; font-weight: 600; color: var(--ink); }
.rb12-site .dcount { font-family: var(--font-numeric); font-size: 11px; color: #fff; background: var(--navy); padding: 3px 9px; border-radius: var(--radius); }
.rb12-site .dchips { display: flex; gap: 7px; padding: 13px 16px 0; flex-wrap: wrap; }
.rb12-site .dchip {
  font-family: var(--font-numeric); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-2); opacity: 0; transition: opacity 260ms;
}
.rb12-site .dchip[data-in] { opacity: 1; }
.rb12-site .drow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
  opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms;
}
.rb12-site .drow[data-in] { opacity: 1; transform: none; }
.rb12-site .drow:last-child { border-bottom: none; }
.rb12-site .dname { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.rb12-site .dtag {
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--glacier-deep); color: #fff; padding: 2px 7px; border-radius: var(--radius);
  opacity: 0; transition: opacity 200ms;
}
.rb12-site .dtag[data-in] { opacity: 1; }
.rb12-site .dmeta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.rb12-site .dbar2 { height: 4px; background: var(--line-2); width: 158px; margin-top: 8px; }
.rb12-site .dbar2 i { display: block; height: 100%; width: 0; background: var(--petrol); transition: width 700ms ease-out; }
.rb12-site .dstar { color: var(--line); font-size: 15px; cursor: default; transition: color 200ms; }
.rb12-site .dstar[data-in] { color: var(--glacier); }
.rb12-site .dcursor { position: absolute; width: 14px; height: 20px; left: 54%; top: 46%; opacity: 0; transition: opacity 200ms, left 620ms cubic-bezier(.4, 0, .2, 1), top 620ms cubic-bezier(.4, 0, .2, 1); pointer-events: none; z-index: 3; }

/* metrics band */
.rb12-site .ticker { background: var(--navy); color: #fff; }
.rb12-site .tickrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .15); padding: 0; }
.rb12-site .tick { background: var(--navy); padding: 26px 24px; }
.rb12-site .tick .v { font-family: var(--font-numeric); font-size: 27px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rb12-site .tick .k { font-size: 13.5px; line-height: 1.5; color: #AFBDD2; margin-top: 4px; }

/* content bands */
.rb12-site .band { padding: 104px 0; }
.rb12-site .band.alt { background: var(--alt); }
.rb12-site .sectionhead { max-width: 64ch; }
.rb12-site .sectionhead.mid { margin: 0 auto; text-align: center; }
.rb12-site .sectionhead h2 { margin-top: 14px; }
.rb12-site .sectionhead p { margin-top: 16px; font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.rb12-site .bandgrid { display: grid; grid-template-columns: 5.4fr 6.6fr; gap: 68px; align-items: center; }
.rb12-site .bandgrid.flip .copy { order: 2; }
.rb12-site .copy p { margin-top: 16px; color: var(--ink-2); }
.rb12-site .copy .btn { margin-top: 28px; }
.rb12-site .copy h2 { margin-top: 14px; }

/* grid + cards */
/* KEINE Regel auf .grid allein (repariert 08.08.2026, vom Betreiber an der
   Registrierung gesehen: "Land | Geburtsdatum werden NICHT in einer grauen Box
   dargestellt"). .grid ist eine Tailwind-Utility, die 23 Bestandsseiten nutzen -
   die Regel hier gab ihnen allen im v12-Raum eine graue Flaeche, einen Rahmen,
   1px-Fugen und 56px Abstand. Dieselbe Fehlerklasse wie die Klassennamen-
   Kaperung vom 07.08.2026 (DECISIONS 2026-08-07-I), nur unentdeckt: Das Gate
   sucht Mehrfachdefinitionen, hier war es eine einzelne Definition auf einem
   fremden Namen. Das Kartenraster traegt seine Fugen jetzt ueber .g2/.g3 -
   die einzigen drei Stellen, die es wirklich brauchen. */
/* GETEILTE KLASSE .g2 - rb.css:184 setzt display, grid-template-columns und
   gap:18px. Gleiche Lage wie .g3 unten. */
.rb12-site .grid.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
/* GETEILTE KLASSE .g3 - rb.css:185 setzt display, grid-template-columns und
   gap:18px, plus einen eigenen Umbruch bei 920px (rb.css:187). Die Fuge kommt
   im v12-Raster aus .grid (1px), deshalb wird gap hier ausdruecklich mitgesetzt
   statt sich auf die hoehere Spezifitaet von .grid zu verlassen - sonst haengt
   das 1px-Raster an einer Reihenfolge, die niemand liest. */
.rb12-site .grid.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.rb12-site .grid.g4 { grid-template-columns: repeat(4, 1fr); }
/* GETEILTE KLASSE .card - das war der sichtbare Hauptmangel. rb.css:98 setzt
   background, border, border-radius:18px, box-shadow und padding UNGESCOPT.
   Ueberschrieben waren bisher nur background und padding, also erbten die
   v12-Karten Rundung, Rahmen und den grossen Bestandsschatten. Im Mockup-
   Raster (1px Fuge auf grauer Flaeche) schien der graue Grund dadurch an jeder
   Ecke durch - die vom Betreiber geruegten grauen Zwickel. Markenbuch v12:
   Karten sind rechtwinklig (Radius 0), Tiefe entsteht aus 1px Linie plus
   HOECHSTENS einem Schatten. Im Raster traegt die Fuge die Trennung, deshalb
   hier kein eigener Rahmen und kein Schatten. */
.rb12-site .card {
  display: block; background: var(--panel); padding: 30px 32px; color: var(--ink);
  border: 0; border-radius: var(--radius-container); box-shadow: none;
}
.rb12-site .card:hover { text-decoration: none; }
.rb12-site a.card:hover { background: var(--alt); }
.rb12-site .card h3 { margin-top: 12px; font-size: 20px; }
/* Datenwert in einer Kennzahlen-Karte ("Linkes Mittelfeld", "179 cm"). Das war
   vorher ein h3 - falsch: Ein Messwert ist keine Abschnittsueberschrift. Fuer
   Vorleseprogramme entstand daraus eine Gliederung, in der auf die
   Seitenueberschrift direkt Ebene 3 folgte, ohne Ebene 2 dazwischen; wer sich
   per Ueberschriften durch die Seite bewegt, faellt in dieses Loch. Die Werte
   sind 1:1 aus der bisherigen Darstellung gemessen (Lora 20px/26,4px 600,
   #121F35, 12px Abstand oben), damit sich am Aussehen nichts aendert -
   geprueft mit scripts/miss-optik.mjs vor und nach dem Umbau. */
.rb12-site .card .eckwert {
  font-family: var(--font-editorial); font-weight: 600; font-size: 20px;
  line-height: 1.32; color: var(--ink); margin: 12px 0 0;
}
/* Kartenueberschrift auf Ebene 2. Die Ebene folgt der Gliederung (die Karten
   stehen direkt unter der Seitenueberschrift), die GROESSE folgt weiter der
   Karte - eine h2 in ihrer Normalgroesse waere hier 38px und wuerde das
   Raster sprengen. Ebene und Groesse sind zwei verschiedene Dinge; genau
   dafuer ist eine Klasse da. Werte 1:1 aus der bisherigen h3-Darstellung. */
.rb12-site .card .kartentitel { margin-top: 12px; font-size: 20px; line-height: 1.32; letter-spacing: normal; }
.rb12-site .card p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.rb12-site .card .kicker { margin-bottom: 2px; }
.rb12-site .icn { font-size: 21px; line-height: 1; color: var(--glacier-deep); }

/* steps */
.rb12-site .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 60px; }
/* GETEILTE KLASSE .step - rb-pages.css:102 gibt ihr seitliche Trennlinien
   und Innenabstaende (Bestands-Dreispalter). Der v12-Schritt trennt oben,
   nicht seitlich; beide Bestandsangaben werden ausdruecklich zurueckgesetzt. */
.rb12-site .step {
  border-top: 1px solid var(--line-strong); padding-top: 18px;
  padding: 18px 0 0; border-left: none;
}
.rb12-site .step:first-child { padding-left: 0; border-left: none; }
.rb12-site .step h4 { font-weight: 600; }
.rb12-site .step .num { font-family: var(--font-numeric); font-size: 11.5px; letter-spacing: .18em; color: var(--glacier-deep); }
.rb12-site .step h3 { margin: 10px 0 0; font-size: 21px; }
.rb12-site .step p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

/* UI fragments */
.rb12-site .shot { background: var(--panel); }
.rb12-site .frag { border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--panel); }
.rb12-site .fhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line-strong); }
.rb12-site .ftitle { font-size: 15px; font-weight: 600; color: var(--ink); }
.rb12-site .fmeta { font-family: var(--font-numeric); font-size: 11.5px; color: var(--ink-3); }
.rb12-site .frow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.rb12-site .frow:last-child { border-bottom: none; }
.rb12-site .fname { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rb12-site .fpill {
  font-family: var(--font-numeric); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; padding: 4px 9px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--ink-2);
}
.rb12-site .shot.petrol .fpill { border-color: var(--petrol); color: var(--petrol); }

/* ---------- Vollbreite-Ausbrecher (DECISIONS 2026-08-06-E) ----------
   Betreiber woertlich: "Bau die Moeglichkeit ein, wir halten uns damit jetzt
   nicht auf." Also die Technik, KEIN Fremdbild - die Bildquellen-Wahl (eigene
   Fotos / Gratis-Stock / Bezahl-Stock / KI) ist bewusst vertagt, und der
   Pflicht-Prozess je Bild (Motiv-Checkliste, Beleg-Archiv
   docs/recht/bildnachweise.md, Rueckwaertssuche, Einzelbild-Rechtspruefung)
   gilt ab dem ersten echten Bild unveraendert.

   .bleed sprengt die feste Inhaltsbreite (--shell 1180px) auf die volle
   Fensterbreite, so wie der Hero des Vorbilds. Kein 100vw: bei sichtbarer
   Bildlaufleiste ist 100vw BREITER als der Inhaltsbereich und erzeugt genau
   den seitlichen Ueberlauf, den die 360px-Probe verbietet. Stattdessen
   rechnet der Ausbrecher gegen den Elternrand
   (`margin-inline: calc(-1 * var(--pad-site))` innerhalb der Shell) und
   traegt seine Breite ueber `width: auto` - das haelt jede Scrollbar-Breite
   automatisch ein. */
.rb12-site .bleed {
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: auto;
  max-width: 100vw;
}
/* Innerhalb einer .shell reicht der Rand-Ausbruch - kein vw noetig, damit
   auch hier keine Bildlaufleiste zum Ueberlauf fuehren kann. */
.rb12-site .shell > .bleed {
  margin-inline: calc(-1 * var(--pad-site));
  max-width: none;
}
/* Bildflaeche: festes Seitenverhaeltnis, damit beim Nachladen nichts springt
   (WCAG-nah, aber vor allem Layoutstabilitaet - CLS). Markenbuch: Radius 0
   fuer Baender, genau ein Schatten, hier keiner. */
.rb12-site .bleed-media {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-container);
  background: var(--alt);
}
@media (max-width: 900px) { .rb12-site .bleed-media { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .rb12-site .bleed-media { aspect-ratio: 4 / 3; } }
/* Bildunterschrift laeuft wieder in der Inhaltsbreite, nicht ueber die
   volle Flaeche - sonst reisst die Lesezeile auf. */
.rb12-site .bleed-caption {
  max-width: var(--shell);
  margin: 10px auto 0;
  padding: 0 var(--pad-site);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
/* Optionaler Textblock auf dem Bild (Vorbild-Hero). Der Verlauf sichert die
   Lesbarkeit unabhaengig vom Motiv - ohne ihn haengt der Kontrast am
   Zufall des Bildes, und der ist kein Nachweis. */
.rb12-site .bleed-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background: linear-gradient(to top, rgba(10, 19, 34, .78) 0%, rgba(10, 19, 34, .35) 45%, rgba(10, 19, 34, .10) 100%);
}
.rb12-site .bleed-overlay .shell { padding-bottom: 44px; padding-top: 44px; }
.rb12-site .bleed-overlay,
.rb12-site .bleed-overlay h1,
.rb12-site .bleed-overlay h2,
.rb12-site .bleed-overlay p { color: #fff; }

/* ============================================================================
   Seitenkopf der Unterseiten + Fliesstext (Paket C, Mockup style.css:226-237
   und 342-348, gemessen 06.08.2026)
   ----------------------------------------------------------------------------
   .phead ist das dunkle Kopfband JEDER Unterseite - dieselbe Flaeche wie
   Kopfzeile, Hero und Fusszeile, damit der Seitenanfang im Dunkelmodus
   nahtlos anschliesst. Die Textstaffel darauf ist die Kit-Bandstaffel
   (#fff / #C4CFDF / #9FB3C8 / #8FA0B8), in beiden Themes unveraendert und im
   Kontrast-Gate gefuehrt.
   ============================================================================ */
.rb12-site .phead { background: var(--deep); color: #fff; padding: 64px 0 58px; }
/* Im Dunkelmodus ist die Grundflaeche --site zeichengleich mit --deep (beides
   #121F35, aus dem Bestand uebernommen). Das Kopfband haette dann KEINE Kante
   mehr und verschmilzt mit dem Inhalt - gemessen am 06.08.2026 an
   /legal im Dunkelmodus, im Hellen faellt es nicht auf. Dieselbe Loesung wie
   bei der Kopfzeile (.hdr): eine feine helle Linie statt eines Farbwechsels. */
html[data-theme="dark"] .rb12-site .phead { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rb12-site.rb12-site .phead h1 { color: #fff; font-size: clamp(32px, 4vw, 46px); }
.rb12-site .phead .lead { color: #C4CFDF; }
.rb12-site .phead .eyebrow { color: #9FB3C8; }
.rb12-site .phead em.acc { color: #7FD3E3; }
/* Brotkrumenpfad. Das Mockup schreibt ihn als reine Textzeile mit ›-Zeichen;
   hier ist es eine echte <nav>-Liste mit aria-label, weil ein Pfad eine
   Navigation IST (WCAG 2.4.8) - die Optik bleibt identisch. */
.rb12-site .crumb {
  font-family: var(--font-numeric); font-size: 11.5px; letter-spacing: .08em;
  color: #8FA0B8; margin-bottom: 22px;
}
.rb12-site .crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.rb12-site .crumb li { display: flex; align-items: center; gap: 8px; }
.rb12-site .crumb li + li::before { content: "\203A"; color: #6E7F98; }
.rb12-site .crumb a { color: #8FA0B8; }
.rb12-site .crumb a:hover { color: #fff; text-decoration: none; }
.rb12-site .crumb [aria-current="page"] { color: #C4CFDF; }

/* Fliesstext. 74ch ist die Kit-Lesezeile - laengere Zeilen kosten beim Lesen
   langer Rechtstexte messbar Genauigkeit. */
.rb12-site .prose { max-width: 74ch; }
.rb12-site .prose h2 { margin-top: 56px; font-size: 29px; }
.rb12-site .prose h3 { margin-top: 36px; font-size: 20px; }
.rb12-site .prose p { margin-top: 16px; color: var(--ink-2); }
.rb12-site .prose ul,
.rb12-site .prose ol { margin-top: 16px; padding-left: 22px; color: var(--ink-2); }
.rb12-site .prose li { margin-top: 8px; }
.rb12-site .prose > *:first-child { margin-top: 0; }

/* GETEILTE KLASSE .note - rb.css:122 setzt font-family, font-size,
   letter-spacing und color. Alle vier stehen hier neu; im v12 ist .note ein
   Hinweiskasten (Mockup style.css:87-90), kein Kleintext. */
.rb12-site .note {
  font-family: var(--font-brand); font-size: 15.5px; letter-spacing: normal;
  line-height: 1.7; color: var(--ink-2);
  border: 1px solid var(--line); border-top: 2px solid var(--line-strong);
  background: var(--alt); padding: 18px 22px;
}
/* GETEILTE KLASSE .hint - rb.css:148 setzt background, color, border-radius,
   padding, font-size und margin-top; .hint.err zusaetzlich background+color.
   Im v12-Raum ist der Hinweis eine Textzeile ohne Farbflaeche (Markenbuch:
   Bedeutung nie allein ueber Farbe), die Fehlervariante traegt die
   Fehlerfarbe als SCHRIFT plus eine linke Kante. */
.rb12-site .hint {
  background: none; color: var(--ink-3); border-radius: var(--radius-container);
  padding: 0; font-size: 13.5px; margin-top: 8px;
}
.rb12-site .hint.err { background: none; color: var(--error); }

/* ============================================================================
   Preistafel + Tabelle (Paket C, Mockup style.css:294-323)
   ----------------------------------------------------------------------------
   Die Betraege kommen AUSSCHLIESSLICH aus der Preisverwaltung - im Mockup
   stehen 19/179/49/99/4,90 Euro fest im Markup, und die sind samt und sonders
   veraltet (der echte Monatspreis ist ein anderer). Kein Betrag steht je im
   Code; das Gate scripts/check-preise.mjs haelt das fest. Hier stehen nur die
   Formen, nie die Zahlen.
   ============================================================================ */
.rb12-site .plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 8px;
}
.rb12-site .plan {
  background: var(--panel); padding: 34px 32px; display: flex; flex-direction: column;
  text-align: left; color: var(--ink);
  border: 0; border-radius: var(--radius-container);
}
/* Die hervorgehobene Tafel steht auf dem dunklen Markenton - in BEIDEN Themes,
   genau wie Kopfzeile, Hero und Fusszeile. Deshalb sind die Textfarben hier
   fest und nicht tokenabhaengig; sie stammen aus der Kit-Bandstaffel. */
.rb12-site .plan.feat { background: var(--deep); color: #fff; }
/* Im Hellen hebt sich die dunkle Tafel von selbst ab. Im Dunkeln nicht: dort
   liegt --deep (#121F35) direkt neben --panel (#16243E), gemessen 06.08.2026 -
   die Hervorhebung waere kaum noch zu sehen. Sie bekommt deshalb eine Kante,
   dieselbe Loesung wie beim Primaerbutton im Dunkelmodus (Quartaerton, nie
   Gold - Markenbuch: "Gold nie als Rand"). */
html[data-theme="dark"] .rb12-site .plan.feat { box-shadow: inset 0 0 0 1px var(--ink-4); }
.rb12-site.rb12-site .plan.feat h3,
.rb12-site .plan.feat .price { color: #fff; }
.rb12-site .plan.feat .per { color: #AFBDD2; }
.rb12-site .plan.feat li { color: #C4CFDF; border-color: rgba(255, 255, 255, .13); }
.rb12-site .plan.feat li.off { color: #8FA0B8; }
/* GETEILTE KLASSE .badge - rb.css:112 setzt font-family, font-size,
   letter-spacing, padding, border-radius und display. Alle sechs stehen hier;
   im v12 ist das Etikett eine Versal-Zeile ohne Flaeche, keine Pille. */
.rb12-site .badge {
  display: inline-block; font-family: var(--font-numeric); font-size: 10px;
  font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #9FB3C8; margin-bottom: 14px; padding: 0; border-radius: 0;
}
.rb12-site.rb12-site .plan h3 { font-size: 21px; }
.rb12-site .price {
  font-family: var(--font-numeric); font-size: 40px; font-weight: 500;
  line-height: 1; margin: 18px 0 5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rb12-site .per { font-size: 13.5px; color: var(--ink-3); }
.rb12-site .plan ul { list-style: none; padding: 0; margin: 24px 0 26px; }
.rb12-site .plan li { padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
/* Durchgestrichen ALLEIN reicht nicht: Durchstreichung wird von
   Screenreadern nicht angesagt und ist bei kleiner Schrift schwer zu sehen.
   Die Komponente ergaenzt deshalb einen unsichtbaren Text ("nicht enthalten") -
   Bedeutung nie nur ueber die Optik (WCAG 1.3.3). */
.rb12-site .plan li.off { color: var(--ink-4); text-decoration: line-through; }
.rb12-site .plan .btn { margin-top: auto; }
@media (max-width: 900px) { .rb12-site .plans { grid-template-columns: 1fr; } }

.rb12-site .tblwrap { overflow-x: auto; border: 1px solid var(--line); margin-top: 34px; }
.rb12-site .tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--panel); }
.rb12-site .tbl th {
  text-align: left; font-family: var(--font-brand); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  padding: 14px 18px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.rb12-site .tbl td { padding: 13px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; }
.rb12-site .tbl tr:last-child td { border-bottom: none; }
.rb12-site .tbl td:first-child { color: var(--ink); font-weight: 500; }
.rb12-site .small { font-size: 14px; line-height: 1.65; }
.rb12-site .muted { color: var(--ink-3); }

/* ---------- Akkordeon (Mockup style.css, Block "Akkordeon") ----------
   Das Mockup schreibt den Selektor als `div.acc`, um ihn von `em.acc`
   (Akzentwort) zu trennen - dieselbe Klasse, zwei voellig verschiedene Dinge.
   Diese Trennung wird hier UEBERNOMMEN und nicht "aufgeraeumt": ohne sie
   erbte jedes Akzentwort im Text die Rahmen und Innenabstaende des
   Aufklappers.
   Gebaut mit <details>/<summary>: Das klappt ohne eine Zeile JavaScript auf,
   ist tastaturbedienbar und wird von Screenreadern als Aufklapper angesagt -
   eine selbstgebaute Loesung mit Knopf und aria-expanded waere mehr Code fuer
   weniger Verlaesslichkeit. */
.rb12-site div.acc { border: 1px solid var(--line); margin-top: 34px; background: var(--panel); }
.rb12-site div.acc details { border-bottom: 1px solid var(--line-2); }
.rb12-site div.acc details:last-child { border-bottom: none; }
.rb12-site div.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-size: 16.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.rb12-site div.acc summary::-webkit-details-marker { display: none; }
/* Das Zeichen ist reine Verzierung: den Zustand sagt <details> selbst an. */
.rb12-site div.acc summary::after {
  content: "+"; font-family: var(--font-numeric); font-size: 19px;
  color: var(--glacier-deep); flex: none;
}
.rb12-site div.acc details[open] summary::after { content: "\2013"; }
.rb12-site div.acc details[open] summary { border-bottom: 1px solid var(--line-2); }
.rb12-site div.acc .body { padding: 18px 22px 24px; }
.rb12-site div.acc .body p { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.rb12-site div.acc .body p + p { margin-top: 12px; }
.rb12-site div.acc .body ul { margin-top: 12px; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; }
.rb12-site div.acc .body li { margin-top: 6px; line-height: 1.7; }

/* ---------- Zweispalter fuer Text neben Beispielbild/Kasten ---------- */
.rb12-site .splitgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rb12-site .splitgrid + .splitgrid { margin-top: 72px; }
.rb12-site .splitgrid.flip .splittext { order: 2; }
@media (max-width: 900px) {
  .rb12-site .splitgrid { grid-template-columns: 1fr; gap: 32px; }
  .rb12-site .splitgrid.flip .splittext { order: 0; }
}
/* Platzhalter fuer eine spaetere Bildschirmaufnahme. Bewusst als beschriftete
   Flaeche und NICHT als gestrichelter Kasten wie im Bestand: Markenbuch v12
   kennt keine gestrichelten Rahmen, und Radius 0 gilt auch hier. */
.rb12-site .shotbox {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 260px; padding: 28px; text-align: center;
  background: var(--alt); border: 1px solid var(--line);
  border-radius: var(--radius-container); color: var(--ink-3);
}
.rb12-site .shotbox .lbl {
  font-family: var(--font-numeric); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--glacier-deep);
}
.rb12-site .shotbox p { max-width: 36ch; font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- Akzent (mockup em.acc) ---------- */
.rb12-site em.acc {
  display: inline; font-style: normal; color: var(--gold-text);
  background: none; border: none; margin: 0; padding: 0;
}

/* ---------- Abschluss-Werbeblock (footer1.png / mockup .cta) ---------- */
.rb12-site .cta { background: var(--deep); color: #fff; padding: 96px 0; }
.rb12-site .cta h2 { color: #fff; }
.rb12-site .cta em.acc { color: #7FD3E3; }
.rb12-site .cta p { margin-top: 16px; color: #C4CFDF; max-width: 54ch; font-size: 17.5px; }
.rb12-site .cta .btn { margin-top: 32px; }
/* from the mockup's combined rule (style.css:119-120: .on-dark/.hero/.cta
   .btn-g) - no CTA uses btn-g yet, kept for the Paket-C page builds */
.rb12-site .cta .btn-g { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .48); }
.rb12-site .cta .btn-g:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }

/* ---------- Fusszeile ---------- */
.rb12-site .ftr { background: var(--deep); color: #8FA0B8; padding: 64px 0 32px; font-size: 14.5px; }
.rb12-site .ftrtop { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 44px; }
.rb12-site .ftrabout { margin-top: 18px; max-width: 38ch; line-height: 1.65; }
.rb12-site .ftrcol h3 {
  font-family: var(--font-numeric); font-weight: 500; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.rb12-site .ftrcol ul { list-style: none; padding: 0; margin: 0; }
.rb12-site .ftrcol li { margin: 0; }
.rb12-site .ftrcol a { display: block; padding: 5px 0; color: #AFBDD2; }
.rb12-site .ftrcol a:hover { color: #fff; text-decoration: none; }
.rb12-site .social { display: flex; gap: 9px; margin-top: 22px; }
.rb12-site .social a,
.rb12-site .social .social-off {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .2); color: #AFBDD2;
}
.rb12-site .social a:hover { border-color: #fff; color: #fff; }
/* Symbol ohne hinterlegte Adresse (DECISIONS 2026-08-06-F): sichtbar, aber
   erkennbar nicht anklickbar - kein Zeigefinger, kein Hover-Effekt, gedaempft.
   Es ist ein <span aria-hidden>, also weder fokussierbar noch angesagt. */
.rb12-site .social .social-off { cursor: default; opacity: .55; }
.rb12-site .social svg { width: 16px; height: 16px; fill: currentColor; }
.rb12-site .ftrbot {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px;
}
.rb12-site .ftrbot .r { display: flex; flex-wrap: wrap; gap: 16px; }
/* ----------------------------------------------------------------------------
   Klickflaechen der Fusszeile: mindestens 24px (WCAG 2.5.8)
   GEMESSEN 07.08.2026 ueber 32 Routen in fuenf Breiten: Die Links der unteren
   Fusszeile waren nur 17 bis 23 Pixel hoch. Weil sie auf JEDER Seite stehen,
   erzeugte dieser eine Fall rund 1000 der 1158 gemeldeten Befunde.
   Betroffen sind ausgerechnet die Pflichtwege: Impressum, Datenschutz, AGB,
   Widerruf, Kuendigung, Barrierefreiheit, Cookie-Einstellungen.
   Behoben ueber die Zielflaeche, NICHT ueber die Schriftgroesse: Der Text
   bleibt exakt wie er war, nur der antippbare Bereich waechst auf 24px.
   Auf einem Handy ist das der Unterschied zwischen "trifft" und "trifft nicht".
   ---------------------------------------------------------------------------- */
.rb12-site .ftrbot a,
.rb12-site .ftrbot button {
  display: inline-flex; align-items: center;
  min-height: 24px;
}
.rb12-site .ftrbot a { color: #8FA0B8; }
.rb12-site .ftrbot a:hover { color: #fff; text-decoration: none; }
.rb12-site .ftrbot button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: #8FA0B8;
}
.rb12-site .ftrbot button:hover { color: #fff; }

/* ---------- Responsive (mockup breakpoints) ---------- */
/* Burger breakpoint raised from the mockup's 1080px to 1180px: the no-wrap
   rule (DECISIONS 2026-08-06-A decision 3) must trigger the burger BEFORE
   the longest translated menu row (~1128px estimated across all 26
   languages, worst case es/pt/en/lv) can overflow. */
@media (max-width: 1180px) {
  .rb12-site .mainnav,
  .rb12-site .btn-ghost-desk { display: none; }
  .rb12-site .burger { display: flex; }
  .rb12-site .hdrrow { gap: 16px; }
}
/* a burger menu opened on a narrow window must not stay visible after the
   window grows past the burger breakpoint (state survives the resize) */
@media (min-width: 1181px) {
  .rb12-site .mobnav[data-open] { display: none; }
}
@media (max-width: 1080px) {
  .rb12-site .ftrtop { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .rb12-site { font-size: 16px; }
  .rb12-site .band { padding: 68px 0; }
  .rb12-site .hero { padding: 60px 0 56px; }
  .rb12-site .cta { padding: 68px 0; }
  .rb12-site .herogrid,
  .rb12-site .bandgrid,
  .rb12-site .steps { grid-template-columns: 1fr; gap: 40px; }
  .rb12-site .bandgrid.flip .copy { order: 0; }
  .rb12-site .dwrap::before { display: none; }
  .rb12-site .device { transform: none; }
  .rb12-site .tickrow,
  .rb12-site .grid.g2,
  .rb12-site .grid.g3,
  .rb12-site .grid.g4 { grid-template-columns: 1fr; }
  .rb12-site .ftrtop { grid-template-columns: 1fr 1fr; gap: 32px; }
  .rb12-site .shell { padding: 0 22px; }
  .rb12-site .mobnav { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 560px) {
  .rb12-site .ftrtop { grid-template-columns: 1fr; }
  /* narrow phones: keep the header on one line without horizontal scroll
     (measured 06.08.2026: hdrcta was 411px at a 400px viewport). The start
     button stays reachable inside the burger menu ("Profil kostenlos
     starten"); the language picker is capped, its full width lives in the
     burger breakpoint sizes above 560px. */
  .rb12-site .hdrcta .btn-w { display: none; }
  /* theme switch + language picker move into the burger menu (see
     SiteHeaderV12 .mobprefs) - the topbar keeps logo + burger only */
  .rb12-site .hdrcta .themebtn,
  .rb12-site .hdrcta .langwrap { display: none; }
  .rb12-site .mobnav .mobprefs { display: flex; }
  .rb12-site .hdrrow { gap: 10px; }
}
@media print {
  .rb12-site .hdr,
  .rb12-site .mobnav,
  .rb12-site .ftr,
  .rb12-site .cta,
  .rb12-site .skip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rb12-site *, .rb12-app * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   FORMULARE (Paket C, 07.08.2026)
   ----------------------------------------------------------------------------
   Bis heute hatte der v12-Site-Raum KEINE Formularfeld-Gestaltung - gemessen
   am 07.08.2026: ausser dem Suchfeld und dem Kopfzeilen-select gab es keine
   Regel fuer input/select/textarea. Die beiden Tools-Seiten, die Kontaktseite,
   die Kuendigungs- und Widerrufsstrecke und der Login sind aber im Kern
   Formulare. Ohne diesen Block erben sie die Browser-Voreinstellung und wirken
   fremd - genau die Ruege des Betreibers zum Login-Fenster.

   Werte 1:1 aus dem Kit: data/Branding/Branding-Kit v12/claude-code/
   KOMPONENTEN.md Abschnitt "Eingabefeld":
     "Rahmen 1 px var(--line), Radius 0, Flaeche #FFF, Padding 9/11, Text 14 px.
      Label darueber, 11,5 px 600, Versalien, gesperrt.
      Fokus: Rahmen var(--glacier) + var(--focus). Platzhalter var(--ink-4).
      Textarea gleiche Regeln, Mindesthoehe 120 px, vertikal skalierbar."
   Die 11,5px des Labels liegen unter der K-06-Untergrenze; src/design/v12/
   ist dafuer ausgenommen (DECISIONS 2026-08-06-B, Betreiber Option A).
   ============================================================================ */

.rb12-site .field { display: block; margin-top: 16px; }
.rb12-site .field:first-child { margin-top: 0; }

/* Label ueber dem Feld. Versalien + Sperrung wie im Kit. */
.rb12-site .field > label,
.rb12-site .fieldlabel {
  display: block; margin-bottom: 6px;
  font-family: var(--font-brand);
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}

.rb12-site input[type="text"],
.rb12-site input[type="email"],
.rb12-site input[type="password"],
.rb12-site input[type="number"],
.rb12-site input[type="tel"],
.rb12-site input[type="url"],
.rb12-site input[type="date"],
.rb12-site input[type="search"]:not(.searchfield input),
.rb12-site textarea,
.rb12-site select:not(.hdrcta select):not(.lang) {
  display: block; width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  font-family: var(--font-brand); font-size: 14px; line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

/* Chevron NUR fuer Auswahllisten (Betreiber 08.08.2026): "Das Drilldown muss
   als solches erkennbar sein, mit Pfeilsymbol rechts wie es Best-Practice
   ist". appearance:none entfernt den nativen Pfeil - ohne Ersatz sah die
   Liste aus wie ein Textfeld. Als Hintergrundbild, damit kein zusaetzliches
   Element Klicks abfangen kann.
   EIGENE Regel statt in der Sammelregel darueber: dort haengen auch alle
   Textfelder mit drin, die dadurch faelschlich einen Pfeil bekamen (im
   Browser gesehen und sofort korrigiert). */
.rb12-site select:not(.hdrcta select):not(.lang) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 38px;
}

.rb12-site textarea { min-height: 120px; resize: vertical; }

.rb12-site input::-moz-placeholder, .rb12-site textarea::-moz-placeholder { color: var(--ink-4); opacity: 1; }

.rb12-site input::placeholder,
.rb12-site textarea::placeholder { color: var(--ink-4); opacity: 1; }

/* Fokus: sichtbarer Ring, WCAG 2.4.7. Der Ring liegt AUSSERHALB der Kante,
   damit er auf jeder Flaeche erkennbar bleibt. */
.rb12-site input:focus-visible,
.rb12-site textarea:focus-visible,
.rb12-site select:focus-visible {
  outline: none;
  border-color: var(--glacier);
  box-shadow: var(--focus);
}

.rb12-site input:disabled,
.rb12-site textarea:disabled,
.rb12-site select:disabled {
  background: var(--sunken); color: var(--ink-3); cursor: not-allowed;
}

/* Pflichtfeld-Stern und Fehlerzustand. Der Fehler steht IMMER auch als Text
   da - Bedeutung nie allein ueber Farbe (WCAG 1.4.1). */
.rb12-site .req { color: var(--error); margin-left: 2px; }
.rb12-site input[aria-invalid="true"],
.rb12-site textarea[aria-invalid="true"],
.rb12-site select[aria-invalid="true"] { border-color: var(--error); }
.rb12-site .fielderr {
  display: block; margin-top: 5px;
  font-size: 13px; line-height: 1.5; color: var(--error);
}
.rb12-site .fieldhelp {
  display: block; margin-top: 5px;
  font-size: 13px; line-height: 1.5; color: var(--ink-3);
}

/* Ankreuzfeld und Auswahlknopf. Klickflaeche mindestens 24px (WCAG 2.5.8),
   das Label ist Teil der Klickflaeche. */
.rb12-site .check { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; }
.rb12-site .check input[type="checkbox"],
.rb12-site .check input[type="radio"] {
  width: 17px; height: 17px; margin: 3px 0 0; flex: none;
  accent-color: var(--glacier-deep); cursor: pointer;
}
.rb12-site .check label {
  font-size: 14.5px; line-height: 1.55; color: var(--ink); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.rb12-site fieldset { border: none; padding: 0; margin: 16px 0 0; }
.rb12-site legend {
  padding: 0; margin-bottom: 2px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}

/* Formular-Panel: die weisse Karte, in der ein Formular steht. Kit "Panel". */
.rb12-site .formpanel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 22px 24px;
}
.rb12-site .formpanel > h2,
.rb12-site .formpanel > h3 { margin-top: 0; }

/* Zweispaltiges Werkzeug-Layout: Eingaben links, Ergebnis rechts.
   Unter 900px untereinander - Pflicht, sonst laeuft das Ergebnis aus dem Bild. */
.rb12-site .toolgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 32px;
}
.rb12-site .toolgrid > * { background: var(--panel); padding: 22px 24px; }
@media (max-width: 900px) {
  .rb12-site .toolgrid { grid-template-columns: 1fr; }
}

/* Reach/Ziel/Sicher-Kennzeichnung im Chancen-Check. Der Bestand
   (src/styles/rb.css:117-120) nutzt Roboto Condensed und Radius 20 - beides
   gilt im v12-Raum nicht (Kit: Space Grotesk fuer Labels, Radius 0 fuer
   Container, Chip-Radius 4). Farben aus den v12-Statustokens.
   Die Bedeutung steht IMMER als Wort da, nie allein ueber Farbe (WCAG 1.4.1). */
.rb12-site .fit {
  font-family: var(--font-numeric);
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  text-transform: uppercase;
}
.rb12-site .fit.reach  { background: var(--warning-flaeche); color: var(--gold-text); }
.rb12-site .fit.ziel   { background: var(--glacier-flaeche); color: var(--glacier-deep); }
.rb12-site .fit.sicher { background: var(--deep); color: #fff; }

/* Werkzeug-Bedienleiste: waagerechte Eingabezeile ueber dem Ergebnis. */
.rb12-site .toolbar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  margin-top: 28px;
}
.rb12-site .toolbar .field { margin-top: 0; }
.rb12-site .toolbar .btn { flex: none; }

/* Zeitleiste (Timeline-Generator). Bewusst als KLASSE statt Inline-Stil:
   der Bestandszweig faerbt seine Punkte mit festen Farbwerten im Markup, und
   feste Farben koennen den Dunkelmodus nicht mitmachen. Radius 0 fuer den
   Inhalt, der Statuspunkt bleibt rund - er ist ein Symbol, kein Container. */
.rb12-site .tline {
  list-style: none; margin: 30px 0 0; padding: 0 0 0 30px;
  border-left: 2px solid var(--line);
}
.rb12-site .tstep { position: relative; padding-bottom: 26px; }
.rb12-site .tstep::before {
  content: ''; position: absolute; left: -37px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--site); background: var(--ink-4);
}
.rb12-site .tstep.done::before { background: var(--success); }
.rb12-site .tstep.soon::before { background: var(--glacier); }
.rb12-site .tstep.upcoming::before { background: var(--ink-4); }
.rb12-site .tstep h3 { margin: 4px 0 0; font-size: 17px; }
.rb12-site .tmeta {
  font-family: var(--font-numeric);
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.rb12-site .tlist { list-style: none; margin: 8px 0 0; padding: 0; }
.rb12-site .tlist li {
  position: relative; padding: 3px 0 3px 15px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
.rb12-site .tlist li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; background: var(--glacier-deep);
}

/* ============================================================================
   EIGENSTAENDIGE PFLICHTSEITEN (Paket C, 07.08.2026)
   Kontakt, Kuendigung, Kuendigungs-Bestaetigung, Freigabe-Widerruf, Widerruf.
   Diese fuenf laufen NICHT im Hauptrahmen (src/App.tsx, vor MainLayout) und
   tragen deshalb ihr eigenes v12-Kleid - bewusst ohne Hauptnavigation:
   wer kuendigt, bekommt keine Werbelinks vorgesetzt, und ein klemmender
   Kopfbereich darf eine Kuendigung nie blockieren (ss 312k BGB).
   ============================================================================ */
.rb12-standalone {
  display: flex; flex-direction: column; min-height: 100dvh;
  background: var(--site); color: var(--ink);
}
.rb12-site .sa-head {
  padding: 16px 30px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.rb12-site .sa-logo { display: inline-flex; align-items: center; }
.rb12-site .sa-logo img { height: 28px; width: auto; display: block; }
.rb12-site .sa-main {
  flex: 1; width: 100%; margin: 0 auto; padding: 48px 30px 64px; box-sizing: border-box;
}
.rb12-site .sa-main > h1 {
  margin-top: 0; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2;
}
.rb12-site .sa-main > .lead { margin-bottom: 28px; }
.rb12-site .sa-foot {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 18px 30px;
}
.rb12-site .sa-foot nav {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  max-width: 1320px; margin: 0 auto;
}
.rb12-site .sa-foot a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.rb12-site .sa-foot a:hover { color: var(--ink); text-decoration: underline; }

/* Dunkelmodus des Logos: die dunkle Wortmarke waere auf dunkler Flaeche
   unsichtbar. Der Waehler haengt an html[data-theme="dark"] - gemessen in
   tokens.css:148, NICHT an prefers-color-scheme (Kaizen 078: eine am
   Betriebssystem haengende Regel war genau der Cookie-Balken-Fehler). */
html[data-theme="dark"] .rb12-site .sa-logo img { filter: brightness(0) invert(1); }

/* Zustandsblock auf den Pflichtseiten (Erfolg / Fehler). Symbol UND Text -
   die Bedeutung haengt nie am Symbol allein (WCAG 1.4.1). */
.rb12-site .sa-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: 32px 0;
}
.rb12-site .sa-state h2 { margin: 0; }
.rb12-site .sa-state .lead { margin: 0; }

/* Zerstoerender Knopf: Kuendigen, Widerrufen. Bewusst KEIN Primaerknopf -
   der Primaerknopf gehoert der gewuenschten Handlung, nicht der Abkehr. */
.rb12-site .btn-danger {
  background: var(--error); color: #fff; border: 1px solid var(--error);
}
.rb12-site .btn-danger:hover { filter: brightness(.92); }
.rb12-site .btn-danger:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* Zahlenspalte in Tabellen. Kit KOMPONENTEN.md Abschnitt "Tabelle":
   "Zahlenspalten rechts, Space Grotesk, tabular-nums." Die bisherige Regel
   .step .num galt nur fuer nummerierte Schritte, nicht fuer Tabellen. */
.rb12-site .tbl td.num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Abschnittslabel im v12-Raum (07.08.2026)
   BETREIBER-RUEGE: "Das du hier font-family: Roboto Condensed; color:
   var(--muted); verwendest, ist eine Frechheit!" - zu Recht: Roboto Condensed
   gehoert zu Markenbuch v6, verbindlich ist seit 05.08.2026 das Kit v12.
   Kit-Vorgabe fuer oeffentliche Seiten, DESIGN-ANWEISUNGEN.md Zeile 79:
   "Abschnittslabel | Space Grotesk | 11,5 px | 500 | 1, +0,16 em, Versalien".
   Die 11,5px liegen unter der K-06-Untergrenze; src/design/v12/ ist dafuer
   ausgenommen (DECISIONS 2026-08-06-B).
   ---------------------------------------------------------------------------- */
.rb12-site .rb-seclabel {
  font-family: var(--font-num, 'Space Grotesk'), sans-serif;
  font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}


/* Passwort-Staerkeanzeige: der Bestand faerbt sie golden (rb.css .bar i).
   Gold ist im v12 KEINE Flaeche (DESIGN-ANWEISUNGEN.md Zeile 51: "Gold ...
   als Rand, Flaeche oder Icon-Fuellung" ist die verbotene Spalte).
   Die Staerke wird deshalb ueber die Signalfarben gefuehrt. */
.rb12-site .bar { height: 6px; background: var(--alt); border-radius: 0; overflow: hidden; }
.rb12-site .bar i { display: block; height: 100%; border-radius: 0; }

/* ----------------------------------------------------------------------------
   Anmeldung und Registrierung im v12-Raum (07.08.2026, Betreiber-Ruege)
   Kit-Vorgaben: Panel "Flaeche #FFF, Rahmen var(--line), Radius 0"; Chip
   "11 px 600, Padding 4/9, Radius 4"; Abschnittslabel Space Grotesk.
   Der Formularkasten bekommt eine eigene Flaeche - der Betreiber woertlich:
   "Dieses ganze Formular haengt in der Luft, im luftleeren Raum sogar ohne
   Hintergrund. Gib dem Formular den grauen Hintergrund."
   Kontrast bewusst wie in der Dunkelfassung: der Kasten hebt sich sichtbar
   von der Seitenflaeche ab, nicht nur um eine Nuance.
   ---------------------------------------------------------------------------- */
.rb12-site .infopanel { border: 1px solid var(--line); background: var(--panel); padding: 20px; border-radius: 0; margin-top: 20px; }
.rb12-site .infocard { border: 1px solid var(--line); background: var(--alt); padding: 12px 14px; border-radius: 0; }
.rb12-site .infocard-t { font-family: var(--font-brand); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.rb12-site .freigabe-tag {
  display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 4px;
  font-family: var(--font-brand); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--line); color: var(--ink-2); background: none; line-height: 1.4;
}
.rb12-site .freigabe-tag-frei { border-color: var(--glacier-deep); color: var(--glacier-deep); }

.rb12-site .authbox { background: var(--alt); border: 1px solid var(--line); padding: 26px; border-radius: 0; }
.rb12-site .authhead { font-family: var(--font-editorial); font-weight: 600; font-size: 25px; line-height: 1.3; color: var(--ink); margin-bottom: 18px; }
.rb12-site .authrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.rb12-site .authrow a,
.rb12-site .authrow button {
  font-family: var(--font-brand); font-size: 14.5px; color: var(--ink-2);
  text-decoration: underline; background: none; border: 0; cursor: pointer; padding: 0;
  min-height: 24px;
}
.rb12-site .authrow a:hover,
.rb12-site .authrow button:hover { color: var(--ink); }
/* Zweitform mit Signalfarbe (Betreiber 07.08.2026: "Der Button muss
   auffaelliger sein, auch blau"). Bewusst KEIN zweiter Primaerknopf: das Kit
   erlaubt nur einen je Ansichtsbereich.
   EIGENER NAME .btn-signal statt .btn-o: Letztere war bereits vergeben und
   traegt unter anderem den Anmelden-Knopf in der Kopfzeile. Mein Ueberschreiben
   machte ihn unlesbar (Navy auf Dunkelblau). */
/* Rahmen 1px statt 2px (08.08.2026): Das Kit verbietet "Kanten breiter als
   1 px" ausdruecklich (DESIGN-ANWEISUNGEN.md Abschnitt 7). Gemessen hatte der
   Knopf 2px - er war damit kraeftiger als jede andere Kante der Seite. */
/* GEFUELLT statt umrandet (08.08.2026). Der Betreiber hat "auch blau" am
   07.08. und "muss dann auch blau sein!" am 08.08. verlangt - zweimal derselbe
   Punkt. Ein weisser Knopf mit duennem Rand erfuellt das nicht.
   Kit-konform ist das jetzt, weil der Block seit dem 08.08. AUSSERHALB des
   Formularkastens steht und damit ein eigener Ansichtsbereich ist ("ein
   primaerer Button je Ansichtsbereich"). Werte nach KOMPONENTEN.md:
   Flaeche var(--navy), Text #FFF, hover var(--deep). */
.rb12-site .btn-signal { background: var(--navy); color: #fff; border: 1px solid var(--navy); font-weight: 600; }
.rb12-site .btn-signal:hover { background: var(--deep); color: #fff; border: 1px solid var(--deep); border-color: var(--deep); }

/* ---- Anmeldeseite: Ueberschrift ueber dem Formular (Betreiber 08.08.2026) ----
   "werden zu H2 und werden ueber das Formular geschrieben, nicht im Formular"
   und "gib den Ueberschriften mehr Raum, Abstand zum Formular bzw. vom
   Formular, der angemessen ist und es nicht rangeklatscht aussehen lässt!".
   Lora 600, H3-Stufe 25px/1,3 nach Kit-Tabelle (DESIGN-ANWEISUNGEN.md Zeile
   75). Die Hero-H2 mit 38px waere hier zu gross, weil darunter ein Formular
   und keine Abschnittsflaeche folgt. Abstand nach unten 32px statt der 18px,
   die die alte .authhead im Kasten hatte. */
.rb12-site.rb12-site .authtitle {
  /* --font-editorial, NICHT var(--font-display, 'Lora'): Letzteres loest im
     v12-Raum zu Archivo auf (Markenbuch v6), weil --font-display dort gesetzt
     ist - der Fallback 'Lora' greift dann nie. Am 08.08.2026 im Browser
     gemessen. Dieselbe Stelle traegt den Fehler auch in .authhead (Zeile
     darueber), uebernommen aus der Umstellung vom 07.08.2026. */
  font-family: var(--font-editorial); font-weight: 600;
  font-size: 25px; line-height: 1.3; color: var(--ink);
  margin: 8px 0 32px;
  /* Die Kopfzeile klebt oben (sticky, Unterkante 75px). Ohne diesen Abstand
     landet das Sprungziel DAHINTER und der Nutzer sieht die Reiterzeile statt
     der Ueberschrift - vom Zweitpruefer am 08.08.2026 im Browser gemessen. */
  scroll-margin-top: 96px;
}
.rb12-site.rb12-site .authtitle:focus { outline: none; }
.rb12-site.rb12-site .authtitle:focus-visible { outline: 2px solid var(--glacier); outline-offset: 4px; box-shadow: var(--focus); }

/* Registrierungs-Hinweis, abgesetzt UNTER dem Formularkasten.
   Weissraum statt Trennlinie - das Kit fuehrt fuer oeffentliche Seiten
   ausdruecklich "Weissraum statt Trennlinien" und "hoechstens ein umrahmtes
   Element je Bildschirmhoehe" (Abschnitt 5). Der Formularkasten ist dieses
   eine Element, deshalb bekommt der Block hier keinen zweiten Rahmen. */
.rb12-site .authaside { margin-top: 64px; }
.rb12-site.rb12-site .authaside-h {
  font-family: var(--font-editorial); font-weight: 600;
  font-size: 25px; line-height: 1.3; color: var(--ink); margin-bottom: 12px;
}

/* ---- Schritt-Kaesten der Registrierung -------------------------------------
   Ersetzt eine Fassung mit Radius 11px, goldenem Rand am aktiven Schritt und
   einer dritten Grauabstufung als Flaeche - drei Kit-Verstoesse, am 08.08.2026
   im Browser gemessen. Jetzt: Radius 0 (Karten), aktiver Schritt ueber den
   Navy-Rahmen der "selected"-Vorgabe, Flaechen nur --panel und --alt. */
/* ---- Passwortregeln, Staerkebalken, Geschlechtswahl (Betreiber 08.08.2026) --
   Der Regeltext lief zuvor ueber .note, die im v12-Raum ein Kasten mit 18px
   Polsterung ist - genau die beanstandete Box. Die Spur des Balkens hatte die
   Farbe der Formularflaeche und war unsichtbar. Beides gemessen 08.08.2026. */
/* Geburtsdatum: Textfeld plus Kalendersymbol (Betreiber 08.08.2026).
   Das Datumsfeld ist verborgen, aber nicht ausgeblendet - sonst kann der
   Browser seinen Kalender nicht verankern. */
.rb12-site .datefield { position: relative; }
.rb12-site .datehidden {
  position: absolute; right: 8px; bottom: 0; width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0; pointer-events: none;
}
.rb12-site .datebtn {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
}
.rb12-site .datebtn:hover { color: var(--ink); }
.rb12-site .fhint { font-family: var(--font-brand); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.rb12-site .fhint--stark { font-weight: 600; min-height: 20px; }
.rb12-site .pwbar { height: 6px; background: var(--line); margin-top: 8px; overflow: hidden; border-radius: 0; }
.rb12-site .pwfill { display: block; height: 100%; transition: width .2s ease, background-color .2s ease; }
/* Auswahlfelder OHNE Kasten (Betreiber 08.08.2026): "die Radiobutton sind
   nicht in einem weissen Kasten sondern einfach so auf der Flaeche". Also
   weder Rahmen noch eigene Flaeche noch Polsterung - nur Punkt und
   Beschriftung. Die Klickflaeche bleibt ueber min-height bei 36px (Kit:
   "Klickflaeche mindestens 36 px"). Rahmen und Flaeche stehen ausdruecklich
   auf none/transparent, weil der Bestand sie auf derselben Klasse setzt und
   sonst in den v12-Raum durchsickert. */
.rb12-site .genderwahl { border: 0; padding: 0; margin: 16px 0 4px; }
.rb12-site .genderrow { display: flex; gap: 26px; margin-top: 8px; margin-bottom: 4px; }
.rb12-site .genderopt {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: transparent; border-radius: 0;
  padding: 0; cursor: pointer; min-height: 36px;
  font-family: var(--font-brand); font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.rb12-site .genderopt:has(input:checked) { color: var(--ink); }
.rb12-site .genderradio { accent-color: var(--navy); width: 17px; height: 17px; flex: none; cursor: pointer; }
.rb12-site .authsteps { display: flex; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.rb12-site .authstep {
  flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel);
  border-radius: 0; padding: 8px 12px; color: var(--ink-3);
}
.rb12-site .authstep--aktiv { border-color: var(--navy); color: var(--ink); }
.rb12-site .authstep--erledigt { border-color: var(--glacier-deep); color: var(--glacier-deep); }
.rb12-site .authstep-l {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-brand); font-size: 12.5px; font-weight: 600; color: inherit;
}


/* ---------- Bausteine fuer Paket C (08.08.2026) -----------------------------
   Werte 1:1 aus der Design-Quelle uebernommen, nicht nachempfunden:
   data/Branding/Branding-Kit v12/Website v12/assets/style.css. Sie fehlten im
   v12-Raum vollstaendig - gemessen gegen die BAUSTEINLISTE des Kits, nicht
   gegen die Seitenliste (Kaizen 086).

   AUFBAUREGEL DIESES BLOCKS, vom Gate check-klassennamen erzwungen:
   Jede Klasse hat GENAU EINEN Regelkopf. Das Gate wertet den letzten
   Klassennamen einer Kette als Ziel der Regel - ".rowitem h3" gilt ihm
   deshalb als zweite Definition von .rowitem und faellt als Kaperung auf.
   Folge: gestaltete Kindelemente bekommen einen EIGENEN Namen (.ri-titel
   statt ".rowitem h3"), und wo sonst ein Media-Block noetig waere, bricht
   stattdessen Flexbox um. Zustaende mit Doppelpunkt und Verkettungen wie
   .pill.navy zaehlen nicht mit. Das Gate wurde dafuer NICHT angefasst -
   eine Schutzmechanik zu entschaerfen ist Betreiber-Sache.

   Kaizen 101, Frage 1 - wen trifft der Selektor ausser dem gemeinten Element?
   .rows/.rowitem waren projektweit frei. .pill dagegen IST geteilt: rb.css
   traegt eine Bestandsfassung mit 'Roboto Condensed', Radius 20px und Gold als
   Flaeche - alle drei im v12 verboten. Einziger Konsument ist die Premium-
   Pille der BESTANDS-Kopfzeile (src/App.tsx:165), die MainLayout im v12-Zweig
   gar nicht rendert (src/App.tsx:249 gegen :268). Trotzdem wird nach
   check-v12-isolation jede Eigenschaft ausdruecklich neu gesetzt, sonst
   sickert der Bestandswert durch. */

/* Datensatzliste */
.rb12-site .rows { border: 1px solid var(--line); margin-top: 40px; }
.rb12-site .rowitem {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--line-2);
}
.rb12-site .rowitem:last-child { border-bottom: none; }
/* Groesse wie in der Quelle. Die SCHRIFT kommt aus der h3-Regel des Raumes
   (Lora ueber var(--font-editorial)); niemals var(--font-display, 'Lora')
   nehmen - der Ersatzwert greift im v12 nie, weil --font-display dort auf
   Archivo zeigt (Markenbuch v6). */
.rb12-site .ri-titel { font-size: 18px; margin-top: 8px; }
.rb12-site .ri-text { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }

/* Marke am Datensatz */
.rb12-site .pill {
  display: inline-block; font-family: var(--font-numeric); font-size: 11px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--ink-2); background: #fff;
}
.rb12-site .pill.navy { background: var(--deep); border-color: var(--deep); color: #fff; }
.rb12-site .pill.gold { border-color: var(--gold-text); color: var(--gold-text); background: #fff; }
/* Mittlere Warnstufe. Die Design-Quelle bringt dafuer .pill.gold mit, wir
   verwenden sie hier aber NICHT: Das Markenbuch fuehrt Gold ausdruecklich als
   "NIE als Rand, Flaeche oder Icon-Fuellung" und erlaubt es hoechstens EINMAL
   je Ansicht - in einer Tabellenspalte stand es zwangslaeufig mehrfach
   (gemessen auf /tools, 08.08.2026: zweimal Goldrand plus Wortmarke). Glacier
   Deep ist laut Kit die Textform fuer Status unter 18px und damit der
   vorgesehene Ton. Der Widerspruch der Quelle gegen ihre eigene Anweisung
   steht im DEBUG_LOG; .pill.gold selbst bleibt unveraendert stehen, damit der
   Bausteinsatz vollstaendig bleibt. */
/* Farbe FEST, nicht var(--glacier-deep): Die Variable kippt im Dunkelmodus auf
   #7FD3E3 (tokens.css:155), die Pillenflaeche bleibt aber hart #fff - das
   ergaebe 1,70:1 und waere unlesbar. Gerechnet 08.08.2026, beide Modi:
   #0E5C6C auf #fff = 7,55:1 (AA und AAA erfuellt). Merksatz: feste Flaeche
   verlangt feste Schriftfarbe, sonst faellt genau ein Modus heraus. */
.rb12-site .pill.knapp { border-color: #0E5C6C; color: #0E5C6C; background: #fff; }

/* Metazeile: Zahlen gehoeren nach Kit immer in Space Grotesk mit tabular-nums */
.rb12-site .rowmeta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
  font-family: var(--font-numeric); font-variant-numeric: tabular-nums;
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3);
}

/* Themenfilter. Aktiv = gefuellte Signalfassung, weil das Kit Glacier der
   Aufgabe "aktive Filter" zuweist und als Primaerbutton verbietet. Der
   Zustand steht zusaetzlich in aria-pressed - die Klasse traegt nur die Optik,
   damit das Gate nur einen Regelkopf je Name sieht. */
.rb12-site .filterleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.rb12-site .filterbtn {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--ink);
  font-family: var(--font-brand); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: color .15s, background-color .15s, border-color .15s;
}
.rb12-site .filterbtn:hover { border-color: var(--ink); }
.rb12-site .filterbtn.filteran {
  background: var(--glacier-deep); border-color: var(--glacier-deep); color: #fff;
}

/* Newsletter-Anmeldung: NUR Anordnung. Aussehen von Feld, Beschriftung und
   Knopf kommt aus dem Formularblock des Raumes - hier nichts davon
   wiederholen, sonst laufen zwei Fassungen desselben Feldes auseinander. */
.rb12-site .nlform { margin-top: 20px; }
.rb12-site .nlrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 6px; }
.rb12-site .nlfeld { flex: 1 1 240px; min-width: 0; }

/* Begriffsliste. Zweispaltig ab genug Platz, sonst umbrechend - Flexbox statt
   Grid mit Media-Block, siehe Aufbauregel oben. */
.rb12-site .dl { margin-top: 26px; }
.rb12-site .dlrow {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.rb12-site .dlrow:last-child { border-bottom: none; }
.rb12-site .dlk { flex: 0 0 210px; font-weight: 700; color: var(--ink); }
.rb12-site .dlv { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--ink-2); }

/* Buchstabensprung des Glossars, Klickflaeche 44px nach Kit */
.rb12-site .alphanav { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.rb12-site .alphalink {
  min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink-2); text-decoration: none;
  font-family: var(--font-numeric); font-size: 14px; font-weight: 500;
  transition: color .15s, border-color .15s;
}
.rb12-site .alphalink:hover { border-color: var(--ink); color: var(--ink); }

/* Logo-Vorschau der Presseseite. Der Bestand nutzt eine GESTRICHELTE Kante mit
   Radius 9 - beides kennt das v12 nicht. */
.rb12-site .logoshot {
  height: 90px; display: flex; align-items: center; justify-content: center;
  padding: 12px; border: 1px solid var(--line); border-radius: 0; background: transparent;
}
.rb12-site .logoshot.dunkel { border: none; background: var(--deep); }
.rb12-site .logobild { max-height: 44px; max-width: 100%; }

/* Ankreuzliste. Das Ankreuzfeld selbst kommt aus dem Formularblock des Raumes. */
.rb12-site .checkliste { list-style: none; margin: 0; padding: 0; }
.rb12-site .checkzeile {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); cursor: pointer;
}
.rb12-site .checkzeile:last-child { border-bottom: none; }

/* Blogartikel: Fliesstext und Inhaltsverzeichnis nebeneinander, umbrechend
   statt ueber einen Media-Block. Das Verzeichnis klebt beim Scrollen. */
.rb12-site .artikelgrid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.rb12-site .artikelspalte { flex: 1 1 520px; min-width: 0; }
.rb12-site .artikeltoc { flex: 1 1 220px; position: sticky; top: 96px; }


/* ============================================================================
   Roster Base - v12 app (Athleten-Backend) styles, scoped to .rb12-app
   ----------------------------------------------------------------------------
   Paket B ships only the room base from the kit token file (block .app);
   the full AppShellV12 styling (sidebar 244px, topbar t1, viewhead t2,
   milestone foot) follows in Paket D from the mockup app/postfach.html +
   app/theme.css. Scoping rationale: the kit class .app collides with
   <nav className="app"> in src/App.tsx (measured); see tokens.css header.
   ============================================================================ */

.rb12-app {
  background: var(--app);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.rb12-app h1,
.rb12-app h2,
.rb12-app h3 {
  font-family: var(--font-app);
  font-weight: 700;
  color: var(--ink);
}
.rb12-app h1 { font-size: 33px; line-height: 1.15; letter-spacing: -.02em; }
.rb12-app h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.01em; }
.rb12-app h3 { font-size: 17px; line-height: 1.3; }

/* ============================================================================
   FORMULARE (07.08.2026)
   ----------------------------------------------------------------------------
   WARUM DIESER BLOCK VOR PAKET D ENTSTEHT:
   Das neue Gate scripts/check-formulare.mjs hat beim ERSTEN Lauf gemeldet, dass
   dieser Raum keine einzige Regel fuer input, select oder textarea hat - also
   woertlich derselbe Zustand wie im oeffentlichen Raum vor zwei Tagen
   (Kaizen 086). Dort war die Folge, dass ZWEI Pakete als fertig galten, weil
   sie zufaellig nur Textseiten enthielten, und der Betreiber den Fehler am
   Login-Fenster selbst finden musste.

   Das Athleten-Backend besteht ueberwiegend aus Formularen - allein das
   Profil fuehrt Dutzende Felder. Waere Paket D ohne diesen Block gebaut worden,
   waere derselbe Fehler ein drittes Mal aufgetreten. Deshalb steht die
   Gestaltung VOR dem Bau, nicht danach.

   Werte 1:1 aus dem Kit, data/Branding/Branding-Kit v12/claude-code/
   KOMPONENTEN.md Abschnitt "Eingabefeld" - identisch zum oeffentlichen Raum
   in site.css, damit ein Feld in beiden Raeumen gleich aussieht und sich
   gleich verhaelt. Die Werte sind bewusst NICHT abgewandelt: zwei Fassungen
   derselben Regel laufen frueher oder spaeter auseinander.
   ============================================================================ */

.rb12-app .field { display: block; margin-top: 16px; }
.rb12-app .field:first-child { margin-top: 0; }

/* Label ueber dem Feld. Versalien + Sperrung wie im Kit.
   Die 11,5px liegen unter der K-06-Untergrenze; src/design/v12/ ist dafuer
   ausgenommen (DECISIONS 2026-08-06-B, Betreiber Option A). */
.rb12-app .field > label,
.rb12-app .fieldlabel {
  display: block; margin-bottom: 6px;
  font-family: var(--font-brand);
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}

.rb12-app input[type="text"],
.rb12-app input[type="email"],
.rb12-app input[type="password"],
.rb12-app input[type="number"],
.rb12-app input[type="tel"],
.rb12-app input[type="url"],
.rb12-app input[type="date"],
.rb12-app input[type="search"],
.rb12-app textarea,
.rb12-app select {
  display: block; width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  font-family: var(--font-brand); font-size: 14px; line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.rb12-app textarea { min-height: 120px; resize: vertical; }

.rb12-app input::-moz-placeholder, .rb12-app textarea::-moz-placeholder { color: var(--ink-4); opacity: 1; }

.rb12-app input::placeholder,
.rb12-app textarea::placeholder { color: var(--ink-4); opacity: 1; }

/* Fokus: sichtbarer Ring, WCAG 2.4.7. Der Ring liegt AUSSERHALB der Kante,
   damit er auf jeder Flaeche erkennbar bleibt. */
.rb12-app input:focus-visible,
.rb12-app textarea:focus-visible,
.rb12-app select:focus-visible {
  outline: none;
  border-color: var(--glacier);
  box-shadow: var(--focus);
}

.rb12-app input:disabled,
.rb12-app textarea:disabled,
.rb12-app select:disabled {
  background: var(--sunken); color: var(--ink-3); cursor: not-allowed;
}

/* Pflichtfeld-Stern und Fehlerzustand. Der Fehler steht IMMER auch als Text
   da - Bedeutung nie allein ueber Farbe (WCAG 1.4.1). */
.rb12-app .req { color: var(--error); margin-left: 2px; }
.rb12-app input[aria-invalid="true"],
.rb12-app textarea[aria-invalid="true"],
.rb12-app select[aria-invalid="true"] { border-color: var(--error); }
.rb12-app .fielderr {
  display: block; margin-top: 5px;
  font-size: 13px; line-height: 1.5; color: var(--error);
}
.rb12-app .fieldhelp {
  display: block; margin-top: 5px;
  font-size: 13px; line-height: 1.5; color: var(--ink-3);
}

/* Ankreuzfeld und Auswahlknopf. Klickflaeche mindestens 24px (WCAG 2.5.8),
   das Label ist Teil der Klickflaeche. */
.rb12-app .check { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; }
.rb12-app .check input[type="checkbox"],
.rb12-app .check input[type="radio"] {
  width: 17px; height: 17px; margin: 3px 0 0; flex: none;
  accent-color: var(--glacier-deep); cursor: pointer;
}
.rb12-app .check label {
  font-size: 14.5px; line-height: 1.55; color: var(--ink); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.rb12-app fieldset { border: none; padding: 0; margin: 16px 0 0; }

/* ---------- AppShellV12: Sidebar, Topbar, Viewhead, Zielfeld (Paket D) ------
   Werte 1:1 aus der Kit-Vorlage uebernommen:
   data/Branding/Branding-Kit v12/Website v12/app/theme.css (Bloecke .app,
   .snav, .topbar, .viewhead) und app/postfach.html.

   ZWEI ABWEICHUNGEN VON DER VORLAGE, beide gemessen und begruendet:
   1. Die Vorlage schaltet die Farbzonen ueber KLASSEN AM BODY (body.t1, .t2).
      Im Projekt gehoert der Body nicht dem Portal - die Zonen sitzen deshalb
      als .zone1 / .zone2 direkt am Element. Wirkung identisch, und der
      Selektor endet auf einem eigenen Namen, was das Klassennamen-Gate
      verlangt (eine Klasse, ein Regelkopf).
   2. Zwei Kit-Namen waren belegt und sind ausgewichen: .topbar existiert im
      v12-Site-Raum UND im Bestand, .milestone im Portal-Bestand (je gemessen
      08.08.2026). Sie heissen hier .apptop und .appziel - kein fremder Name
      wird gekapert (DECISIONS 2026-08-07-I). */
/* Die Sidebarbreite steckt in einer Variablen, damit der Breakpoint unten sie
   umsetzen kann, ohne .appgrid ein zweites Mal zu definieren - das Gate
   check-klassennamen wertet auch Regeln INNERHALB eines @media-Blocks. */
.rb12-app .appgrid { display: grid; grid-template-columns: var(--snav-b, 244px) 1fr; min-height: 100vh; }
.rb12-app .snav {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0;
}
.rb12-app .snavhead { padding: 17px 20px; border-bottom: 1px solid var(--deep); }
.rb12-app .snavfoot { margin-top: auto; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.rb12-app .snavgruppe {
  font-family: var(--font-numeric); font-size: 9.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  padding: 18px 20px 6px;
}
.rb12-app .snavlink {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 20px; min-height: 44px;
  border: 0; background: none; text-align: left; cursor: pointer;
  color: var(--ink-2); font-family: var(--font-brand); font-size: 13.5px; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.rb12-app .snavlink:hover { background: var(--app); color: var(--ink); }
/* Aktiv: gefuellte dunkle Flaeche, Icon in Gold, KEINE Seitenkante (Kit). */
.rb12-app .snavlink.aktiv { background: var(--deep); color: #fff; font-weight: 600; }
.rb12-app .snavico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; opacity: .75; }
.rb12-app .snavcnt {
  margin-left: auto; font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.rb12-app .appziel { border: 1px solid var(--line); padding: 11px 12px; font-size: 12.5px; color: var(--ink-2); }
.rb12-app .appzieltitel {
  display: block; font-family: var(--font-brand); font-weight: 600;
  color: var(--ink); margin-bottom: 2px; font-size: 13px;
}
.rb12-app .appmain { display: flex; flex-direction: column; min-width: 0; }
.rb12-app .apptop {
  display: flex; align-items: center; gap: 12px; padding: 12px 26px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
/* Farbzone t1 der Vorlage: die Topbar traegt Tiefnavy. */
/* Farbzone t1 der Vorlage: die Topbar traegt Tiefnavy. Die hellen Textfarben
   kommen als Variablen aus DIESER Regel, nicht aus eigenen Kindregeln - so
   bleibt es bei einem Regelkopf je Klasse (check-klassennamen), und ohne die
   Zone greifen automatisch die dunklen Standardwerte.
   FEHLER, DER DABEI AUFFIEL: Ohne diese Werte stand die Brotkrume in
   var(--ink-3) auf Tiefnavy - dunkel auf dunkel. Gefunden beim Nachrechnen
   der Kit-Kontrastbefunde, nicht im Browser. */
.rb12-app .apptop.zone1 {
  background: var(--deep); border-bottom-color: var(--deep);
  --zone-text: #AFBDD2;
  --zone-stark: #ffffff;
  --zone-linie: rgba(255, 255, 255, .24);
  --zone-feld: rgba(255, 255, 255, .09);
  --zone-rahmen: rgba(255, 255, 255, .35);
}
.rb12-app.rb12-app .appcrumb { font-size: 12.5px; color: var(--zone-text, var(--ink-3)); min-width: 0; }
.rb12-app.rb12-app .appcrumbjetzt { color: var(--zone-stark, var(--ink)); font-weight: 600; }
.rb12-app .spacer { flex: 1; }
.rb12-app .appsuche {
  flex: 0 1 320px; display: flex; align-items: center; gap: 8px;
  background: var(--zone-feld, var(--app)); border: 1px solid var(--zone-linie, var(--line)); border-radius: var(--radius);
  padding: 11px; min-height: 44px; font-size: 12.5px; color: var(--zone-text, var(--ink-3)); min-width: 0;
}
.rb12-app .appsuchfeld {
  border: none; background: none; outline: none; min-height: 44px;
  font-family: var(--font-brand); font-size: 13px; width: 100%; min-width: 0; color: var(--zone-stark, var(--ink));
}
.rb12-app .tbtn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-family: var(--font-brand); font-size: 12.5px; font-weight: 600;
  color: var(--zone-stark, var(--ink)); background: var(--zone-feld, var(--panel));
  border: 1px solid var(--zone-rahmen, var(--line)); border-radius: var(--radius);
  padding: 8px 12px; cursor: pointer; line-height: 1.2;
  transition: color .15s, background-color .15s, border-color .15s;
}
.rb12-app .tbtn:hover { border-color: var(--ink); }
.rb12-app .tbtn.pri { background: var(--deep); color: #fff; border-color: var(--deep); }
/* KI-Aktion nach Kit: weisse Flaeche, Rahmen und Text in Glacier Deep, 700. */
.rb12-app .tbtn.ki { border-color: var(--glacier-deep); color: var(--glacier-deep); background: var(--panel); font-weight: 700; }
.rb12-app .viewhead {
  padding: 22px 26px 18px; display: flex; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; background: var(--panel); border-bottom: 1px solid var(--line);
}
/* Farbzone t2 der Vorlage: der Viewhead traegt Tiefnavy. */
/* Farbzone t2 der Vorlage: der Viewhead traegt Tiefnavy - gleiche Mechanik. */
.rb12-app .viewhead.zone2 {
  background: var(--deep); border-bottom-color: var(--deep);
  --zone-text: #C4CFDF;
  --zone-stark: #ffffff;
  --zone-rahmen: rgba(255, 255, 255, .35);
}
.rb12-app.rb12-app .viewheadtitel {
  font-family: var(--font-app); font-weight: 700; font-size: 33px;
  line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--zone-stark, var(--ink));
}
.rb12-app.rb12-app .viewheadtext { color: var(--zone-text, var(--ink-2)); font-size: 13.5px; margin-top: 6px; max-width: 74ch; }
/* Der Ansichtstitel stand ZWEIMAL untereinander: einmal gross in der Kopfzone
   der Huelle (so verlangt es die Vorlage), direkt darunter noch einmal in der
   Bestandsansicht. Gemessen am 08.08.2026 auf /portal: `.viewheadtitel`
   "Profil" und `h1.pg` "Profil". Aufgefallen ist es dem Betreiber, nicht mir -
   ich hatte die Dopplung nur GEZAEHLT (zwei h1 sind ein Gliederungsfehler) und
   die semantische Seite behoben, ohne den Bildschirm anzusehen.
   Die Ueberschrift der Ansicht bleibt hier bewusst im Dokument: Sie traegt die
   Gliederung fuer Vorleseprogramme, waehrend die Huelle nur die Optik traegt
   (siehe Kommentar in AppShellV12.tsx). Optisch verschwindet sie, weil ihre
   Aussage bereits eine Zeile hoeher steht.
   NUR im v12-Raum - das Bestandsdesign hat keine Huellen-Kopfzone und braucht
   seine Ueberschrift sichtbar. Sobald eine Ansicht eine echte v12-Fassung
   bekommt (Postfach zuerst), faellt ihre eigene Ueberschrift weg und diese
   Regel greift dort ins Leere, ohne zu stoeren. */
.rb12-app.rb12-app .rb-portal h1.pg {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  /* Die sechs Schrift-Eigenschaften stehen hier, weil rb.css sie auf h1.pg
     setzt und das Isolations-Gate jede geteilte Eigenschaft im v12-Raum
     ausdruecklich zurueckfordert. Bei einem Element von 1x1 Pixel sind sie
     ohne sichtbare Wirkung - genau deshalb sind sie neutral gesetzt und nicht
     etwa auf die Werte der Kopfzone: Wer diese Regel spaeter wieder sichtbar
     macht, soll KEINE zufaellig geerbte Optik vorfinden, sondern selbst
     entscheiden muessen. */
  font-family: inherit; font-weight: inherit; font-size: inherit;
  letter-spacing: normal; line-height: inherit; margin-top: -1px;
}
.rb12-app .appstage { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.rb12-app .appraus { white-space: nowrap; }

/* ============================================================================
   Roster-Pool: Verteilungsbogen, Legende, College-Liste.
   Alle Werte 1:1 aus data/Design_Seiten/roster-pool_v12/theme.css
   (.chartwrap, .chartbox, .legend, .lrow, .lname, .lval, .lshare, .prow,
   .mark, .pname, .pmeta, .pstat, .iconbtn, .stack, .caps, .empty).
   Eigene Namen mit Praefix rp, weil die Kurznamen der Vorlage im Projekt
   teils belegt sind und das Klassennamen-Gate jede Doppelbelegung
   zurueckweist - der Praefix ist kein Design-Eingriff, nur ein Namensraum.
   ============================================================================ */
/* Aussenraum des Roster-Pools. Die Klasse stand seit dem 08.08.2026 im
   Bauteil, hatte aber keine Regel - der Verteilungsbogen und die Liste
   standen dadurch ohne gemeinsamen Rahmen. Nachgetragen am 09.08.2026 im
   Zuge von Paket E; sie traegt zugleich die Umbruch-Variablen. */
.rb12-app .rpraum { display: block; }
.rb12-app .rpchart {
  display: grid; grid-template-columns: 320px 1fr;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 2px rgba(18, 31, 53, .06); margin-bottom: 18px;
}
.rb12-app .rpchartbox { padding: 18px 10px 14px; border-right: var(--rp-chartrand, 1px) solid var(--line-2); }
.rb12-app .rpbogen { width: 100%; height: auto; }
/* Zahl und Versallabel in der Bogenmitte. Space Grotesk ist laut Kit die
   Schrift fuer Zahlen; die Groessen stammen aus der Vorlage (44 und 10px). */
.rb12-app .rpzahl { font-family: var(--font-numeric); font-size: 44px; fill: #121F35; }
.rb12-app .rplabel { font-family: var(--font-numeric); font-size: 10px; letter-spacing: .2em; fill: #6B7688; }
.rb12-app .rplegende { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; }
.rb12-app .rplrow {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2);
}
/* Legendenzeile als Knopf (Status-Drilldown, Paket E). Ein Knopf bringt
   Browser-Vorgaben mit, die hier stoeren wuerden - sie werden zurueckgesetzt,
   das Aussehen bleibt exakt das der Anzeigezeile. Der gedrueckte Zustand ist
   NICHT nur farblich markiert, sondern zusaetzlich ueber aria-pressed. */
.rb12-app .rplrowbtn {
  width: 100%; background: none; font: inherit; color: inherit;
  border: 0; border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer;
}
.rb12-app .rplrowbtn:hover { background: var(--flaeche-2, #F5F7FA); }
/* Gewaehlter Zustand als eigene Klasse, nicht ueber den Attributselektor:
   Das Klassennamen-Gate liest aus `.rplrowbtn[aria-pressed="true"]` denselben
   Namen heraus und wertet ihn als Doppeldefinition. Das Projekt loest solche
   Zustaende ohnehin ueber eine zweite Klasse (pfvmenuan, pereitan). */
.rb12-app .rplrowan { background: var(--flaeche-2, #F5F7FA); box-shadow: inset 3px 0 0 var(--ink); }
.rb12-app .rplfarbe { width: 12px; height: 12px; display: block; }
.rb12-app .rplname { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rb12-app .rplwert { font-family: var(--font-numeric); font-size: 15px; color: var(--ink); }
.rb12-app .rplanteil { font-family: var(--font-numeric); font-size: 11.5px; color: var(--ink-3); width: 44px; text-align: right; }
.rb12-app .rplhinweis { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.rb12-app .rpgefiltert {
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px;
}
.rb12-app .rpstack { display: flex; flex-direction: column; gap: 10px; }
.rb12-app .rprow {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 14px;
  align-items: center; padding: 13px 16px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06);
}
.rb12-app .rpmark { width: 10px; height: 10px; }
/* Der Name ist ein Knopf, kein div mit Klick-Handler wie in der Vorlage:
   Ein anklickbares div ist mit der Tastatur nicht erreichbar und fuer
   Vorleseprogramme kein Bedienelement (WCAG 2.1.1). Optisch bleibt es ein
   Textblock - deshalb alle Knopf-Voreinstellungen zuruecknehmen. */
.rb12-app .rpnamebtn {
  display: block; text-align: left; min-width: 0;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.rb12-app .rpname { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.rb12-app .rpmeta { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.rb12-app .rpstat {
  font-family: var(--font-numeric); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.rb12-app .rpaktionen { display: flex; gap: 8px; align-items: center; grid-column: var(--rp-folgespalte, auto); }
.rb12-app .rpiconbtn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-2); flex: none;
}
.rb12-app .rpaktebtn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer; line-height: 1.2;
  white-space: nowrap;
}
.rb12-app .rpleer {
  padding: 52px 24px; text-align: center; color: var(--ink-3); font-size: 13.5px;
  background: #fff; border: 1px solid var(--line);
}
/* Unter 900px kippt der Bogen ueber die Legende, und die Datenzeile bricht in
   zwei Zeilen um - sonst quetschen sich vier Spalten auf Telefonbreite.
   Gemessen an der schmalsten Zielbreite 360px. */
/* Zweite Klasse am Listenrahmen statt wiederholter Regelkoepfe - siehe
   Begruendung beim Postfach weiter unten. */
@media (max-width: 900px) {
  .rb12-app .rpstackschmal {
    --rp-zeilenspalten: 12px 1fr; --rp-zeilenluecke: 10px; --rp-folgespalte: 2;
    --rp-chartspalten: 1fr; --rp-chartrand: 0;
  }
}

/* ============================================================================
   Postfach: Nachrichtenliste und E-Mail-Verlauf.
   Werte 1:1 aus data/Design_Seiten/roster-pool_v12/theme.css
   (.item, .iname, .isubj, .isnip, .chips, .chip mit fn/q/gold/verlauf,
   .itime, .newdot, .star, .msgcard, .msghead, .msgwho, .msgtime, .msgbody,
   .peek, .msgstack, .replybox, .ftext, .rowend).
   Praefix pf, damit die Kurznamen der Vorlage nicht mit Bestandsklassen
   kollidieren - das Klassennamen-Gate weist jede Doppelbelegung zurueck.
   ============================================================================ */
/* Aussenraum einer Postfach-Ansicht: Kopfzeile, Liste und Fusshinweis stehen
   untereinander mit demselben Abstand wie im Roster-Pool. Ohne diesen Rahmen
   klebten Kopf und Liste aneinander (Paket E, 09.08.2026). */
.rb12-app .pfraum { display: flex; flex-direction: column; gap: 14px; }
.rb12-app .pfliste { display: flex; flex-direction: column; gap: 10px; }
/* Die Spaltenaufteilung kommt aus einer Variablen, die der Listenrahmen
   setzt. So braucht die schmale Ansicht keine zweite Regel mit dem Kopf
   .pfitem - das Klassennamen-Gate wertet das als Doppeldefinition. */
.rb12-app .pfitem {
  display: grid; grid-template-columns: var(--pf-spalten, 1fr auto auto); gap: 14px;
  padding: 14px 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 31, 53, .06); align-items: start;
}
/* Der Eintrag ist ein Knopf, kein div mit Klick-Handler wie in der Vorlage:
   sonst ist er mit der Tastatur nicht erreichbar (WCAG 2.1.1). Alle
   Knopf-Voreinstellungen werden zurueckgenommen, die Optik bleibt ein
   Textblock. */
.rb12-app .pfoeffnen {
  display: block; text-align: left; min-width: 0;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.rb12-app .pfkopf { display: flex; align-items: center; gap: 9px; }
.rb12-app .pfneupunkt {
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; background: var(--deep); color: #fff;
  padding: 3px 7px; border-radius: var(--radius);
}
.rb12-app .pfname { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.rb12-app .pfsubj { display: block; font-size: 13.5px; color: var(--ink); margin-top: 2px; }
/* Ungelesenes hebt den Betreff hervor - genau wie in der Vorlage
   (.item.unread .isubj). Fett ist hier zusaetzlich zum Neu-Kennzeichen, nicht
   an dessen Stelle: Schriftstaerke allein waere fuer manche nicht erkennbar.
   Eigene Klasse am Betreff selbst, weil das Gate zwei Regeln mit dem Kopf
   .pfsubj als Doppeldefinition zaehlt. */
.rb12-app .pfsubjneu { font-weight: 600; }
.rb12-app .pfsnip {
  display: -webkit-box; font-size: 13px; color: var(--ink-3); margin-top: 3px;
  overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rb12-app .pfchips { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.rb12-app .pfchip {
  font-family: var(--font-app); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 9px; border-radius: var(--radius); background: #fff; color: var(--ink-2);
  white-space: nowrap; border: 1px solid var(--line);
}
.rb12-app .pfchip-gut { background: var(--glacier-deep); color: #fff; border-color: var(--glacier-deep); }
.rb12-app .pfchip-warnung { color: #7A5A2E; border-color: #7A5A2E; }
.rb12-app .pfchip-geplant { background: #7A5A2E; color: #fff; border-color: #7A5A2E; }
.rb12-app .pfchip-verlauf { background: var(--deep); color: #fff; border-color: var(--deep); }
/* Signalfarbe Rot fuer Fehlschlaege (Betreiber-Anordnung 16.08.2026):
   rote Schrift auf hellem rotem Grund, Kontrast > 7:1. */
.rb12-app .pfchip-fehler { color: #8B1A1A; border-color: #8B1A1A; background: #FDECEA; }
.rb12-app .pfzeit {
  font-family: var(--font-numeric); font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap;
  grid-column: var(--pf-zeit-spalte, auto);
  text-align: var(--pf-zeit-satz, right);
}
/* Stern: eigener Knopf statt eines klickbaren span. Er traegt die
   Mindestklickflaeche, weil er ein echtes Bedienelement ist. */
.rb12-app .pfstern {
  background: none; border: 0; cursor: pointer; color: #C3CCDA;
  font-size: 15px; line-height: 1; min-width: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rb12-app .pfsternan { color: #A87F45; }
.rb12-app .pfgewaehlt { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }

.rb12-app .pfverlauf { display: flex; flex-direction: column; }
.rb12-app .pfvkopf {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06);
}
.rb12-app .pfvtitelraum { min-width: 0; }
.rb12-app .pfvtitel { font-family: var(--font-app); font-weight: 700; font-size: 17px; margin: 0; color: var(--ink); }
.rb12-app .pfvmeta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.rb12-app .pfvspacer { flex: 1; }
.rb12-app .pfvdrop { position: relative; }
.rb12-app .pfvmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06);
  padding: 6px; display: flex; flex-direction: column;
}
.rb12-app .pfvmenukopf {
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); padding: 7px 9px 5px;
}
.rb12-app .pfvmenuan { font-weight: 700; color: var(--glacier-deep); }
.rb12-app .pfvstapel { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rb12-app .pfvkarte { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06); }
.rb12-app .pfvkhead {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
/* Eingeklappt gibt es keine Trennlinie mehr - sonst schwebt sie unter einem
   Kopf ohne Inhalt (Vorlage: .msgcard.zu .msghead). Der Zustand haengt an
   einer eigenen Klasse am Kopf statt an einer zweiten Regel mit demselben
   Kopf: Das Klassennamen-Gate zaehlt den LETZTEN Namen der Kette und wertet
   zwei Regeln auf .pfvkhead als Doppeldefinition. */
.rb12-app .pfvkheadzu { border-bottom: none; }
.rb12-app .pfvwer { min-width: 0; }
.rb12-app .pfvname { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rb12-app .pfvmail { display: block; font-size: 12.5px; color: var(--ink-3); }
.rb12-app .pfvzeit { font-family: var(--font-numeric); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.rb12-app .pfvtext { padding: 16px; font-size: 13.5px; color: var(--ink); line-height: 1.6; max-width: 78ch; }
.rb12-app .pfvanriss {
  padding: 0 16px 12px; font-size: 13px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb12-app .pfvantwort {
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06);
  padding: 16px; margin-top: 10px;
}
/* Sichtbare Beschriftung statt nur eines Platzhalters: Ein Platzhalter
   verschwindet beim Tippen und ist dann fuer niemanden mehr da (WCAG 3.3.2). */
.rb12-app .pfvlabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.rb12-app .pfvfeld {
  width: 100%; min-height: 120px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; padding: 14px; font-family: var(--font-app); font-size: 13.5px;
  line-height: 1.6; color: var(--ink); resize: vertical;
}
.rb12-app .pfvaktionen { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
/* Auf schmalen Geraeten rutscht die Zeit unter den Eintrag statt daneben.
   Umgesetzt ueber Variablen statt einer zweiten Regel auf .pfzeit: Das
   Klassennamen-Gate zaehlt den letzten Namen einer Kette auch INNERHALB von
   @media und wertet zwei Regelkoepfe als Doppeldefinition. */
/* Zweite Klasse am selben Element statt einer zweiten Regel auf .pfliste:
   Das Gate zaehlt den letzten Klassennamen einer Kette, auch innerhalb von
   @media - eine Wiederholung desselben Kopfes gilt als Doppeldefinition. */
@media (max-width: 720px) {
  .rb12-app .pflisteschmal { --pf-spalten: 1fr auto; --pf-zeit-spalte: 1; --pf-zeit-satz: left; }
}

/* ============================================================================
   College-Akte. Werte 1:1 aus data/Design_Seiten/roster-pool_v12/theme.css
   (.aktehead, .aktetitle, .akte, .block, .blockhead, .drow, .dkey, .dval,
   .tl, .tlrow, .tldate, .tlkind, .notearea, .note, .headtools).
   ============================================================================ */
.rb12-app .akteraum { display: flex; flex-direction: column; }
.rb12-app .aktekopf {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 31, 53, .06); margin-bottom: 10px; flex-wrap: wrap;
}
.rb12-app .aktekopftext { flex: 1; min-width: 240px; }
.rb12-app .aktetitel {
  font-family: var(--font-app); font-weight: 700; font-size: 25px;
  line-height: 1.25; letter-spacing: -.02em; margin: 0;
}
.rb12-app .aktewerkzeuge { display: flex; gap: 8px; align-items: center; }
/* Hauptknopf der Ansicht: Navy als Flaeche ist laut Kit die Aufgabe von Navy
   ("Struktur: Primaerbutton"). Weiss auf #1E3A66 misst 8,59:1. */
.rb12-app .aktehaupt {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: var(--navy); border: 1px solid var(--navy);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer; line-height: 1.2;
}
.rb12-app .aktehaupt:disabled { opacity: .6; cursor: default; }
.rb12-app .akteraster { display: grid; grid-template-columns: var(--akte-spalten, 1fr 320px); gap: 10px; align-items: start; }
.rb12-app .aktespalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rb12-app .akteblock { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06); }
.rb12-app .akteblockkopf {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
}
.rb12-app .akteblocktitel { font-family: var(--font-app); font-weight: 700; font-size: 17px; margin: 0; }
.rb12-app .akteblockinhalt { padding: 14px 16px; }
.rb12-app .aktedaten { margin: 0; }
.rb12-app .aktezeile {
  display: grid; grid-template-columns: var(--akte-zeile, 190px 1fr); gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 13.5px;
}
.rb12-app .aktekey {
  font-family: var(--font-brand); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px;
}
.rb12-app .akteval { color: var(--ink); margin: 0; }
.rb12-app .aktezeitachse { padding: 6px 16px 14px; margin: 0; list-style: none; }
.rb12-app .aktetlzeile {
  display: grid; grid-template-columns: var(--akte-tl, 96px 1fr); gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px;
}
.rb12-app .aktetldatum { font-family: var(--font-numeric); font-size: 11.5px; color: var(--ink-3); padding-top: 3px; }
.rb12-app .aktetlwas { min-width: 0; }
.rb12-app .aktetlpunkt { display: inline-block; width: 8px; height: 8px; margin-right: 7px; }
.rb12-app .aktekontakt { padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink); }
.rb12-app .aktenotiz {
  width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px; font-size: 13.5px; color: var(--ink); resize: vertical;
  font-family: var(--font-brand);
}
.rb12-app .aktehinweis {
  border: 1px solid var(--line); background: var(--app); padding: 12px;
  font-size: 13.5px; color: var(--ink); line-height: 1.6; margin: 0;
}
/* Unter 1000px liegen die beiden Spalten untereinander; die Merkmalzeilen
   brechen auf eine Spalte um, sonst bleibt fuer den Wert kaum Platz. */
@media (max-width: 1000px) {
  .rb12-app .akteschmal { --akte-spalten: 1fr; --akte-zeile: 1fr; --akte-tl: 1fr; }
}

/* ============================================================================
   Sequenzen. Werte 1:1 aus data/Design_Seiten/roster-pool_v12/theme.css
   (.flow, .gate, .rail, .node, .nodehead, .nodebody, .step, .ph, .sw, .swbox,
   .sline, .skey, .sub, .flabel).
   ============================================================================ */
.rb12-app .seqraum { display: grid; grid-template-columns: var(--seq-spalten, 1fr 320px); gap: 10px; align-items: start; }
.rb12-app .seqfluss { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; }
/* Die Schiene ist reine Grafik - sie traegt keine Aussage und ist deshalb
   fuer Vorleseprogramme ausgeblendet. */
.rb12-app .seqschiene { width: 1px; height: 16px; background: var(--line); align-self: center; }
.rb12-app .seqtor { align-self: center; display: flex; align-items: center; gap: 8px; }
.rb12-app .seqende {
  align-self: center; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px dashed var(--line); padding: 8px 13px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.rb12-app .seqknoten { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06); }
.rb12-app .seqknotenkopf {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.rb12-app .seqschritt {
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}
.rb12-app .seqknotenkoerper { padding: 14px 15px; }
.rb12-app .seqbetreff { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding-bottom: 10px; align-items: baseline; }
.rb12-app .seqbetrefftext { font-size: 13.5px; color: var(--ink); }
.rb12-app .seqmuster {
  border: 1px solid var(--line); padding: 13px; font-size: 13.5px;
  line-height: 1.65; background: #fff;
}
/* Platzhalter sichtbar auszeichnen: Ohne diese Kennzeichnung sieht ein Muster
   aus wie eine fertige Mail - und jemand versendet "{Coach}".
   #0E5C6C auf #EAF3F6 misst 7,04:1. */
.rb12-app .seqph {
  background: #EAF3F6; color: var(--glacier-deep); border: 1px solid #C9E1E8;
  padding: 1px 5px; font-family: var(--font-numeric); font-size: 12px;
}
.rb12-app .seqhinweis { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; }
.rb12-app .seqzeile {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13.5px;
}
.rb12-app .seqkey {
  font-family: var(--font-brand); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); width: 88px; flex: none;
}
/* Echtes Ankreuzfeld statt eines nachgebauten Schiebers: Ein div mit
   Klick-Handler waere weder mit der Tastatur bedienbar noch fuer
   Vorleseprogramme ein Schalter (WCAG 4.1.2). Die Optik der Vorlage bleibt
   ueber die Feldgestaltung weiter oben erhalten. */
.rb12-app .seqschalter {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13.5px; color: var(--ink); margin-top: 10px;
}
@media (max-width: 1000px) {
  .rb12-app .seqschmal { --seq-spalten: 1fr; }
}

/* ============================================================================
   Mailformular. Werte 1:1 aus data/Design_Seiten/roster-pool_v12/theme.css
   (.panel, .panelhead, .frow, .flabel, .fin, .bar, .ftext, .composefoot,
   .tbtn.ai).
   ============================================================================ */
.rb12-app .mfraum { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06); }
.rb12-app .mfkopf {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.rb12-app .mfkoerper { padding: 14px 18px 16px; }
.rb12-app .mfzeile {
  display: grid; grid-template-columns: var(--mf-zeile, 78px 1fr); gap: 10px;
  align-items: center; padding-bottom: 10px;
}
.rb12-app .mfbetrefffeld { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rb12-app .mfleiste {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line-2); margin-top: 4px;
}
/* Die eine kontextabhaengige KI-Funktion. Glacier Deep als Kante und Schrift
   ist laut Kit die Textform von Glacier - Glacier selbst waere als Kleintext
   auf Weiss zu schwach. #0E5C6C auf #fff misst 7,59:1.
   Abgeschaltet bleibt der Knopf SICHTBAR: Wer nicht sieht, dass es die
   Funktion gibt, fragt auch nicht nach ihr. */
.rb12-app .mfki {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  color: var(--glacier-deep); background: #fff; border: 1px solid var(--glacier-deep);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer; line-height: 1.2;
}
.rb12-app .mfki:disabled { opacity: .55; cursor: not-allowed; }
.rb12-app .mftextlabel { margin-top: 10px; }
.rb12-app .mftext {
  width: 100%; min-height: 260px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; padding: 14px; font-family: var(--font-brand); font-size: 13.5px;
  line-height: 1.6; color: var(--ink); resize: vertical;
}
.rb12-app .mffuss {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-2);
}
@media (max-width: 720px) {
  .rb12-app .mfschmal { --mf-zeile: 1fr; }
}

/* ============================================================================
   Postfach-Einstellungen: Signatur und Vorlagen.
   Werte 1:1 aus data/Design_Seiten/roster-pool_v12/theme.css
   (.tabs, .tab, .sigbox, .prow, .pname, .pmeta, .chip).
   ============================================================================ */
.rb12-app .peraum { display: flex; flex-direction: column; gap: 10px; }
.rb12-app .pereiter { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
/* Der aktive Reiter traegt eine 2px-Kante unten. Sie ist NICHT das einzige
   Merkmal: aria-selected sagt dasselbe fuer Vorleseprogramme, und die
   Schriftstaerke wechselt mit (WCAG 1.4.1). */
.rb12-app .pereit {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; min-height: 44px;
}
.rb12-app .pereitan {
  background: none; border: 0; border-bottom: 2px solid var(--navy);
  padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  cursor: pointer; min-height: 44px;
}
.rb12-app .pesignatur {
  width: 100%; min-height: 120px; border: 1px solid var(--line); border-radius: 0;
  padding: 12px; font-family: var(--font-brand); font-size: 13.5px; line-height: 1.6;
  color: var(--ink); resize: vertical;
}
/* Vorschau auf der Arbeitsflaeche statt auf Weiss: So hebt sie sich vom
   Eingabefeld ab, ohne eine dritte Flaeche einzufuehren - das Kit erlaubt
   genau zwei je Ansicht. */
.rb12-app .pevorschau { margin-top: 12px; border: 1px solid var(--line); background: var(--app); padding: 12px; }
.rb12-app .pevorschautext { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-top: 6px; }
.rb12-app .pevorlage {
  display: grid; grid-template-columns: var(--pe-vorlage, 1fr auto auto); gap: 14px;
  align-items: center; padding: 13px 16px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 31, 53, .06);
}
.rb12-app .pevtext { min-width: 0; }
@media (max-width: 720px) {
  .rb12-app .peschmal { --pe-vorlage: 1fr; }
}
/* Sprungmarke (WCAG 2.4.1). Sie ist erst im Fokus sichtbar - dann aber ein
   echtes Bedienelement und braucht die volle Klickflaeche von 44px. Beim
   ersten Echtlauf am 08.08.2026 mass sie 22px; das Kit verlangt mindestens 36,
   auf Touch 44. Gemessen, nicht geschaetzt: Das Pruefwerkzeug meldete
   "a.appskip 22px". */
.rb12-app .appskip { position: absolute; left: -9999px; }
.rb12-app .appskip:focus {
  left: 8px; top: 8px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--deep); color: #fff; padding: 8px 18px;
  font-family: var(--font-brand); font-weight: 600;
}
.rb12-app .appburger { display: none; }

/* Auf schmalen Geraeten klappt die Sidebar ueber den Inhalt statt die
   Arbeitsflaeche auf null zu druecken. Grenze 900px wie in der Kit-Quelle. */
@media (max-width: 900px) {
  .rb12-app .schmal { --snav-b: 0px; }
  .rb12-app .snavmobil {
    position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s;
  }
  .rb12-app .snavmobil.offen { transform: translateX(0); }
  .rb12-app .burgermobil { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   Kopfleisten-Elemente der Betreiber-Ergaenzung 05.08.2026 (app-only).
   Eine Klasse, ein Regelkopf - das Klassennamen-Gate wertet den LETZTEN Namen
   einer Kette als Ziel, verschachtelte Selektoren gaelten ihm als zweite
   Definition. Gestaltete Kinder bekommen deshalb eigene Namen.
   --------------------------------------------------------------------------- */
.rb12-app .appplan { white-space: nowrap; font-weight: 700; letter-spacing: .02em; }
.rb12-app .appplan-premium { border-color: var(--gold-soft); color: var(--gold-soft); }
.rb12-app .appglocke { position: relative; padding-left: 10px; padding-right: 10px; }
.rb12-app .appglockenpunkt {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: var(--signal, #C0392B); color: #fff;
  font-size: 10px; line-height: 15px; text-align: center; font-weight: 700;
}
.rb12-app .appkontowrap { position: relative; display: inline-flex; }
.rb12-app .appkonto { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.rb12-app .appkontomenue {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 232px;
  display: flex; flex-direction: column; background: var(--panel); color: var(--ink);
  border: 1px solid var(--n200); border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 6px 0; text-align: left;
}
.rb12-app .appkontoblock {
  border-top: 1px solid var(--n100); margin-top: 6px; padding: 10px 14px 4px;
}
.rb12-app .appkontoname { font-weight: 700; font-size: 14px; }
.rb12-app .appkontometa { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rb12-app .appkontoabmelden { border-top: 1px solid var(--n100); margin-top: 6px; }
.rb12-app .applang { display: inline-flex; align-items: center; }

/* ============================================================================
   Mail-Ueberarbeitung 16.08.2026 (DECISIONS 2026-08-16-G): Composer-Vollausbau,
   Karten-Aktionen im Postfach, Etiketten, Protokoll, Planen-Dialog.
   Bauart und Masse folgen den bestehenden Postfach-/Akte-Klassen oben.
   ========================================================================== */
.rb12-app .pfkartenaktionen {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 2px; border-top: 1px dashed var(--line-2); margin-top: 6px;
}
.rb12-app .pfzusatz { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rb12-app .pftagzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rb12-app .pftagfeld {
  border: 1px solid var(--line); padding: 6px 9px; font-size: 12.5px; min-width: 140px;
}
.rb12-app .pftagentf {
  border: 0; background: none; cursor: pointer; font-size: 12px; line-height: 1;
  color: var(--ink-3); padding: 0 2px;
}
.rb12-app .pftagfilter { display: inline-flex; align-items: center; gap: 6px; }
.rb12-app .pftagwahl {
  border: 1px solid var(--line); padding: 6px 9px; font-size: 12.5px; background: #fff;
}
.rb12-app .pfprotokollliste {
  margin: 8px 0 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 3px;
}
.rb12-app .pfplanhuelle {
  position: fixed; inset: 0; z-index: 60; background: rgba(18, 31, 53, .38);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.rb12-app .pfplandialog {
  background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(18, 31, 53, .22);
  padding: 18px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px;
}
.rb12-app .pfplanfeld {
  border: 1px solid var(--line); padding: 8px 10px; font-size: 13px; width: 100%;
}
.rb12-app .cmpempfblock {
  border: 1px solid var(--line-2); padding: 10px 12px; margin: 6px 0 10px;
  display: flex; flex-direction: column; gap: 8px; background: #fff;
}
.rb12-app .cmpempfkopf { display: flex; align-items: center; gap: 8px; }
.rb12-app .cmpempfliste { display: flex; flex-direction: column; gap: 6px; }
.rb12-app .cmpempfzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 0; border-bottom: 1px dashed var(--line-2);
}
.rb12-app .cmpempffeld {
  border: 1px solid var(--line); padding: 7px 9px; font-size: 12.5px;
  flex: 1 1 140px; min-width: 120px;
}
.rb12-app .cmpempfinfo { display: flex; flex-direction: column; min-width: 0; flex: 2 1 220px; }
.rb12-app .cmpempfmeta { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.rb12-app .cmpseg { display: inline-flex; border: 1px solid var(--line); }
.rb12-app .cmpsegknopf {
  border: 0; background: #fff; color: var(--ink-2); font-size: 12px; font-weight: 600;
  padding: 7px 10px; cursor: pointer;
}
.rb12-app .cmpsegan { background: var(--navy); color: #fff; }
.rb12-app .cmpdelta {
  border: 1px solid var(--line); border-left: 3px solid var(--glacier-deep);
  padding: 10px 12px; font-size: 12.5px; background: #fff;
}
.rb12-app .cmpdeltaliste { margin: 6px 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.rb12-app .cmpvorlagenmenu { min-width: 320px; max-height: 320px; overflow-y: auto; }
.rb12-app .cmpvorlagenknopf { text-align: left; }
.rb12-app .cmpvorlagentrenner {
  border-top: 1px solid var(--line); margin-top: 6px; padding: 7px 9px 3px;
  font-family: var(--font-numeric); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}
.rb12-app .cmpvorlagenleer { padding: 7px 9px; font-size: 12.5px; color: var(--ink-3); }
.rb12-app .cmpvarblock {
  border: 1px solid #e5b8b8; border-left: 3px solid #b4552d; background: #fdf6f4;
  padding: 10px 12px; font-size: 12.5px;
}
.rb12-app .cmpvarliste { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.rb12-app .cmpvorschau {
  border: 1px solid var(--line); border-left: 3px solid var(--navy); background: #fff;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.rb12-app .cmpvorschaumeta { font-size: 12px; color: var(--ink-3); }
.rb12-app .cmpvorschaubetreff { font-weight: 700; font-size: 13.5px; }
.rb12-app .cmpvorschautext {
  white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--ink-2);
  margin: 0; max-height: 340px; overflow-y: auto; border-top: 1px dashed var(--line-2); padding-top: 8px;
}
.rb12-app .cmplinkknopf {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--glacier-deep); text-decoration: underline; font: inherit; font-size: inherit;
}
/* Erfolgs-/Fehlermeldung mit Signalfarben (Betreiber-Anordnung 16.08.2026):
   gruene Schrift auf hellem gruenem Grund bzw. rote Schrift auf hellem rotem
   Grund, deutlich sichtbar direkt bei den Aktions-Knoepfen. */
.rb12-app .cmpmeldung {
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  border: 1px solid; margin: 10px 0;
}
.rb12-app .cmpmeldung-ok { color: #1B5E20; background: #E8F5E9; border-color: #1B5E20; }
.rb12-app .cmpmeldung-fehler { color: #8B1A1A; background: #FDECEA; border-color: #8B1A1A; }


*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Roboto Mono, ui-monospace, SF Mono, Menlo, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-left-2 {
  left: -0.5rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.col-span-full {
  grid-column: 1 / -1;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.\!grid {
  display: grid !important;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-full {
  height: 100%;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-80 {
  max-height: 20rem;
}
.min-h-6 {
  min-height: 1.5rem;
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-dvh {
  min-height: 100dvh;
}
.w-1\/2 {
  width: 50%;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-9 {
  width: 2.25rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-6 {
  min-width: 1.5rem;
}
.min-w-\[700px\] {
  min-width: 700px;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[760px\] {
  min-width: 760px;
}
.min-w-\[860px\] {
  min-width: 860px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-\[18px\] {
  gap: 18px;
}
.gap-\[22px\] {
  gap: 22px;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-center {
  align-self: center;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[11px\] {
  border-radius: 11px;
}
.rounded-\[13px\] {
  border-radius: 13px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.border-black\/15 {
  border-color: rgb(0 0 0 / 0.15);
}
.border-black\/20 {
  border-color: rgb(0 0 0 / 0.2);
}
.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-brand-gold\/30 {
  border-color: rgb(201 158 99 / 0.3);
}
.border-brand-navy\/10 {
  border-color: rgb(30 58 102 / 0.1);
}
.border-brand-navy\/15 {
  border-color: rgb(30 58 102 / 0.15);
}
.border-brand-navy\/20 {
  border-color: rgb(30 58 102 / 0.2);
}
.border-brand-navy\/25 {
  border-color: rgb(30 58 102 / 0.25);
}
.border-brand-navy\/30 {
  border-color: rgb(30 58 102 / 0.3);
}
.border-brand-navy\/5 {
  border-color: rgb(30 58 102 / 0.05);
}
.border-current {
  border-color: currentColor;
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-b-gray-300 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-brand-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(18 31 53 / var(--tw-bg-opacity, 1));
}
.bg-brand-deep\/95 {
  background-color: rgb(18 31 53 / 0.95);
}
.bg-brand-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(201 158 99 / var(--tw-bg-opacity, 1));
}
.bg-brand-gold\/10 {
  background-color: rgb(201 158 99 / 0.1);
}
.bg-brand-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 102 / var(--tw-bg-opacity, 1));
}
.bg-brand-navy\/10 {
  background-color: rgb(30 58 102 / 0.1);
}
.bg-brand-navy\/5 {
  background-color: rgb(30 58 102 / 0.05);
}
.bg-brand-navy\/\[0\.03\] {
  background-color: rgb(30 58 102 / 0.03);
}
.bg-current {
  background-color: currentColor;
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/50 {
  background-color: rgb(249 250 251 / 0.5);
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-50\/40 {
  background-color: rgb(240 253 244 / 0.4);
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/40 {
  background-color: rgb(254 242 242 / 0.4);
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-500\/10 {
  background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.bg-sky-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.font-display {
  font-family: Archivo, system-ui, -apple-system, Segoe UI, sans-serif;
}
.font-mono {
  font-family: Roboto Mono, ui-monospace, SF Mono, Menlo, monospace;
}
.font-sans {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 14px;
  line-height: 1.45;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 14px;
  line-height: 1.4;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-brand-deep {
  --tw-text-opacity: 1;
  color: rgb(18 31 53 / var(--tw-text-opacity, 1));
}
.text-brand-gold {
  --tw-text-opacity: 1;
  color: rgb(201 158 99 / var(--tw-text-opacity, 1));
}
.text-brand-navy {
  --tw-text-opacity: 1;
  color: rgb(30 58 102 / var(--tw-text-opacity, 1));
}
.text-brand-navy\/20 {
  color: rgb(30 58 102 / 0.2);
}
.text-brand-navy\/25 {
  color: rgb(30 58 102 / 0.25);
}
.text-brand-navy\/30 {
  color: rgb(30 58 102 / 0.3);
}
.text-brand-navy\/35 {
  color: rgb(30 58 102 / 0.35);
}
.text-brand-navy\/40 {
  color: rgb(30 58 102 / 0.4);
}
.text-brand-navy\/50 {
  color: rgb(30 58 102 / 0.5);
}
.text-brand-navy\/60 {
  color: rgb(30 58 102 / 0.6);
}
.text-brand-navy\/70 {
  color: rgb(30 58 102 / 0.7);
}
.text-brand-navy\/80 {
  color: rgb(30 58 102 / 0.8);
}
.text-brand-paper {
  --tw-text-opacity: 1;
  color: rgb(250 249 247 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.accent-brand-gold {
  accent-color: #C99E63;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-4px_24px_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
  --tw-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 -4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ==========================================================================
   Roster Base - Self-hosted fonts (DSGVO-konform, kein Google-CDN)
   Dateien unter public/fonts/. Keine externen Verbindungen zu Google.
   Drei-Schriften-System:
     Archivo      = Display / Headlines / Logo  (font-display in Tailwind)
     Inter        = Body / UI / Formulare       (font-sans in Tailwind)
     Roboto Condensed  = Kennzahlen / Codes / Labels (font-mono in Tailwind)
                    (loeste ab Markenbuch v6 die fruehere Mono-Schrift ab)
   ========================================================================== */

/* ---------- Archivo (Display / Headlines / Logo) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-800.woff2") format("woff2");
}

/* ---------- Inter (Body / UI / Formulare) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-700.woff2") format("woff2");
}

/* ---------- Roboto Condensed (Kennzahlen / Codes / Labels) ---------- */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-condensed-v27-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-condensed-v27-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-condensed-v27-latin_latin-ext-700.woff2") format("woff2");
}

/* ---------- CSS Custom Properties (Schrift-Tokens) ---------- */
:root {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter",   system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --font-mono:    "Roboto Condensed", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

/* color-scheme muss dem Umschalter folgen, nicht fest auf hell stehen.
   Gemessen 06.08.2026 im Dunkelmodus: der Wert blieb `light`, also rendert
   der Browser alles, was ER selbst zeichnet, weiter hell - Bildlaufleisten,
   aufgeklappte Auswahllisten, Datums- und Dateiauswahl, Autofill-Flaechen.
   Das sind die hellen Farbflecken, die im dunklen Bild nicht dorthin
   gehoeren; keine CSS-Regel von uns kann sie erreichen, nur dieses Merkmal. */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* ---------- Typografie-Zuweisung ---------- */
/* Standard = Inter: alles Lesbare und Bedienbare */
body, input, textarea, select, button, table, nav, p, li, label {
  font-family: var(--font-body);
}

/* Display = Archivo: Markenstimme, grosse Ueberschriften */
h1, h2, h3, .hero-title, .section-title, .page-title, .logo-text {
  font-family: var(--font-display);
}

/* Mono = Roboto Condensed: Kennzahlen, Codes */
code, kbd, pre, .stat, .metric, .mono {
  font-family: var(--font-mono);
}

/* ---------- Basis-Layout ---------- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #FAF9F7; /* brand.paper */
  color: #121F35;      /* brand.deep */
}

/* Mail-Ueberarbeitung 16.08.2026: Ersatzklassen fuer fruehere Inline-Styles
   (v14-Sperrklinke) in Admin-Panels. */
.rbpille { padding: 1px 7px; border-radius: 999px; }
.rbzelle-breit { max-width: 380px; }
.rbzelle-schmal { max-width: 260px; }
.rbstartachse { align-items: start; }
.rbminhoehe { min-height: 120px; }
.rbohneabstand { margin-top: 0; }
.hover\:border-\[color\:var\(--gold\)\]:hover {
  border-color: var(--gold);
}
.hover\:border-brand-gold\/40:hover {
  border-color: rgb(201 158 99 / 0.4);
}
.hover\:border-brand-navy\/30:hover {
  border-color: rgb(30 58 102 / 0.3);
}
.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/10:hover {
  background-color: rgb(0 0 0 / 0.1);
}
.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}
.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-gold\/10:hover {
  background-color: rgb(201 158 99 / 0.1);
}
.hover\:bg-brand-gold\/20:hover {
  background-color: rgb(201 158 99 / 0.2);
}
.hover\:bg-brand-navy\/10:hover {
  background-color: rgb(30 58 102 / 0.1);
}
.hover\:bg-brand-navy\/5:hover {
  background-color: rgb(30 58 102 / 0.05);
}
.hover\:bg-brand-navy\/85:hover {
  background-color: rgb(30 58 102 / 0.85);
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:text-amber-700:hover {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-gold:hover {
  --tw-text-opacity: 1;
  color: rgb(201 158 99 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-navy:hover {
  --tw-text-opacity: 1;
  color: rgb(30 58 102 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.focus\:border-brand-gold:focus {
  --tw-border-opacity: 1;
  border-color: rgb(201 158 99 / var(--tw-border-opacity, 1));
}
.focus\:border-brand-navy:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 102 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-navy:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 58 102 / var(--tw-ring-opacity, 1));
}
.focus\:ring-brand-navy\/15:focus {
  --tw-ring-color: rgb(30 58 102 / 0.15);
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-brand-navy:focus-visible {
  outline-color: #1E3A66;
}
.focus-visible\:outline-red-700:focus-visible {
  outline-color: #b91c1c;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-55:disabled {
  opacity: 0.55;
}
@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_1fr_1\.2fr_auto_auto\] {
    grid-template-columns: 1fr 1fr 1.2fr auto auto;
  }

  .sm\:grid-cols-\[1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr auto;
  }

  .sm\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .sm\:grid-cols-\[1fr_auto_auto_auto\] {
    grid-template-columns: 1fr auto auto auto;
  }

  .sm\:grid-cols-\[1fr_auto_auto_auto_auto\] {
    grid-template-columns: 1fr auto auto auto auto;
  }
}
@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:pl-0 {
    padding-left: 0px;
  }

  .md\:pr-6 {
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {

  .lg\:block {
    display: block;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_260px\] {
    grid-template-columns: minmax(0,1fr) 260px;
  }
}
.dark\:border-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
  border-color: rgb(255 255 255 / 0.1);
}
.dark\:border-white\/15:where([data-theme="dark"], [data-theme="dark"] *) {
  border-color: rgb(255 255 255 / 0.15);
}
.dark\:border-white\/20:where([data-theme="dark"], [data-theme="dark"] *) {
  border-color: rgb(255 255 255 / 0.2);
}
.dark\:border-white\/5:where([data-theme="dark"], [data-theme="dark"] *) {
  border-color: rgb(255 255 255 / 0.05);
}
.dark\:bg-neutral-900:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.dark\:bg-white:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:bg-white\/10:where([data-theme="dark"], [data-theme="dark"] *) {
  background-color: rgb(255 255 255 / 0.1);
}
.dark\:text-black:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-white\/10:hover:where([data-theme="dark"], [data-theme="dark"] *) {
  background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:bg-white\/5:hover:where([data-theme="dark"], [data-theme="dark"] *) {
  background-color: rgb(255 255 255 / 0.05);
}


/* Roster Base — Mockup-Design-System v2.
   Quelle der Wahrheit: rosterbase-startseite.html (entschiedenes Design).
   Tokens, Dark-Mode und Grundkomponenten sind 1:1 übernommen; App-/Admin-
   Komponenten sind daraus abgeleitet. Schriften: Vorschau via Google-CDN,
   in Produktion self-hosten (Branding-Kit, CLAUDE-CODE-Schriften-einbauen.md). */

:root{
  --navy:#1E3A66;--navy-2:#2D5296;--deep:#121F35;--gold:#C99E63;--gold-soft:#E8C989;
  --green:#16A34A;--red:#B4443C;--amber:#B07A28;
  --bg:#F5F7FA;--surface:#FFFFFF;--surface-2:#E9EDF3;
  --text:#15233C;--text-2:#4A5568;--muted:#5A6678;
  --border:#DEE4EC;--border-2:#E9EDF3;
  --eyebrow:#A87B3A;--ring-track:#E2E8F0;--dot:rgba(18,31,53,.05);
  --verified-bg:#DCFCE7;--verified-text:#15803D;--nav-grey:#586173;
  --warn-bg:#FDF3E4;--warn-text:#8A5A14;--err-bg:#FBE9E7;--err-text:#8F2F28;
  --glow:rgba(201,158,99,.14);
  --shadow-card:0 1px 3px rgba(18,31,53,.06),0 26px 64px -30px rgba(18,31,53,.30);
  --shadow-chip:0 1px 2px rgba(18,31,53,.05),0 16px 38px -22px rgba(18,31,53,.34);
}
html[data-theme="dark"]{
  --bg:#121F35;--surface:#16243E;--surface-2:#1B2C49;
  --text:#FAF9F7;--text-2:#AFBCD0;--muted:#90A0B8;
  --border:rgba(255,255,255,.10);--border-2:rgba(255,255,255,.06);
  --eyebrow:#C99E63;--ring-track:rgba(255,255,255,.12);--dot:rgba(255,255,255,.04);
  --verified-bg:#16A34A;--verified-text:#08230F;--nav-grey:#90A0B8;
  --warn-bg:rgba(201,158,99,.16);--warn-text:#E8C989;--err-bg:rgba(180,68,60,.2);--err-text:#F0A9A2;
  --glow:rgba(201,158,99,.20);
  --shadow-card:0 1px 3px rgba(0,0,0,.3),0 30px 70px -34px rgba(0,0,0,.6);
  --shadow-chip:0 1px 2px rgba(0,0,0,.3),0 16px 38px -22px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);line-height:1.62;-webkit-font-smoothing:antialiased;}
/* Textfarbe wechselt OHNE Uebergang (Betreiber-Entscheidung 16.08.2026).
   Gemessen am 15.08.2026: In WebKit brauchte der Wechsel zwischen hell und
   dunkel 1.204 bis 1.308 ms, bis jede Textstelle wieder lesbar war - weit
   ueber den hier deklarierten 200 ms, weil die Farben aus Variablen kommen,
   die an einem Vorfahren umgehaengt werden. In dieser Zeit stand Text mit
   Kontrastwerten bis herunter zu 1,07:1 auf dem Bildschirm. Flaeche und
   Rahmen behalten ihren Uebergang; nur die Schrift springt sofort um, damit
   in keinem Browser unlesbarer Text entsteht. Safari ist Pflichtbrowser
   (CLAUDE.md, 16.08.2026). */
body *{transition:background-color .25s ease,border-color .25s ease;}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px;}
.mono{font-family:'Roboto Condensed',monospace;}
a{color:inherit;text-decoration:none;}
.ey{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.18em;color:var(--eyebrow);text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;}
.ey::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block;}
h1.pg{font-family:'Archivo';font-weight:900;font-size:clamp(30px,4vw,46px);letter-spacing:-.032em;line-height: 1.4;margin-top:14px;}
h2.pg{font-family:'Archivo';font-weight:800;font-size:clamp(23px,3vw,32px);letter-spacing:-.025em;line-height: 1.4;margin-top:12px;}
.lead{font-size:16.5px;color:var(--text-2);max-width:56ch;margin-top:14px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:14.5px;padding:0 20px;height:46px;border-radius:11px;border:none;cursor:pointer;font-family:'Inter';}
.btn-primary{background:var(--navy);color:#FAF9F7;}.btn-primary:hover{background:#2D4F85;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border);}.btn-ghost:hover{background:var(--surface-2);}
.btn-gold{background:var(--gold);color:var(--deep);}.btn-gold:hover{background:var(--gold-soft);}
.btn-sm{height:36px;padding:0 14px;font-size: 14px;border-radius:9px;}
/* WCAG 2.2 Nicht-Text-Kontrast >= 3:1 (Codex re-review 2, H9): Gold #C99E63
   erreicht auf hellem Grund nur ~2,33:1 - der Fokusring ist deshalb im hellen
   Theme Navy (>= 3:1) und nur im dunklen Theme Gold. */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--navy,#1F2A44);outline-offset:3px;border-radius:8px;}
[data-theme="dark"] a:focus-visible,[data-theme="dark"] .btn:focus-visible,[data-theme="dark"] button:focus-visible{outline-color:var(--gold);}
/* WCAG 2.4.1 skip link: visually hidden until keyboard focus, then a clearly
   visible pill in the top-left corner (DES-03). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--navy);color:#FAF9F7;border-radius:0 0 9px 0;font-weight:600;}
.skip-link:focus{left:0;}
::-moz-selection{background:rgba(201,158,99,.28);}
::selection{background:rgba(201,158,99,.28);}

/* Logo-Lockup (aus Startseite) */
.lock{display:flex;align-items:center;gap:12px;color:var(--text);}
/* Logo 15 Prozent groesser (Betreiber 08.08.2026), Lockup proportional. */
.lock svg{height:34.5px;}
.lock .w{font-family:'Archivo';font-weight:800;font-size:18.4px;line-height:.86;letter-spacing:-.01em;}
.lock .w small{display:block;font-weight:500;font-size:16.1px;letter-spacing:.44em;margin-top:3px;}

/* Öffentliche Navigation */
nav.pub{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border);}
nav.pub .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px;}
.navlinks{display:flex;gap:26px;font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.06em;color:var(--nav-grey);margin-left:auto;}
.navlinks a:hover,.navlinks a.on{color:var(--text);}
@media(max-width:880px){.navlinks{display:none;}}
.nav-right{display:flex;align-items:center;gap:14px;}

/* Sprach- und Theme-Schalter */
/* Sprachwahl mit Weltkugel (Betreiber 08.08.2026): Das Symbol liegt VOR dem
   Auswahlfeld, weil ein select keine Kindelemente darstellen kann. Es faengt
   keine Klicks ab, damit das Feld an jeder Stelle bedienbar bleibt. */
.langfield{position:relative;display:inline-flex;align-items:center;}
.langglobe{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.85;color:currentColor;}
.langselect{padding-left:34px;}
.lang{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.05em;color:var(--nav-grey);border:1px solid var(--border);border-radius:9px;padding:7px 11px;display:inline-flex;gap:7px;align-items:center;background:var(--surface);cursor:pointer;}
.theme-switch{position:relative;width:56px;height:28px;border-radius:28px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;flex:none;display:flex;align-items:center;padding:0 5px;justify-content:space-between;}
.theme-switch .ts-ic{width:14px;height:14px;color:var(--muted);display:flex;z-index:1;}
.theme-switch .ts-ic svg{width:14px;height:14px;}
.theme-switch .ts-knob{position:absolute;top:2.5px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--gold);transition:transform .22s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);}
html[data-theme="dark"] .theme-switch .ts-knob{transform:translateX(28px);}

/* App-Navigation (eingeloggter Athlet) */
nav.app{position:sticky;top:0;z-index:20;background:var(--deep);color:#FAF9F7;}
nav.app .wrap{display:flex;align-items:center;height:64px;gap:26px;}
nav.app .lock{color:#FAF9F7;}nav.app .lock svg{height:29.9px;}
.applinks{display:flex;gap:4px;font-family:'Roboto Condensed';font-size:14px;letter-spacing:.05em;margin-left:14px;}
.applinks a{color:#90A0B8;padding:8px 13px;border-radius:9px;}
.applinks a:hover{color:#FAF9F7;background:rgba(255,255,255,.06);}
.applinks a.on{color:var(--gold-soft);background:rgba(201,158,99,.12);}
@media(max-width:940px){.applinks{display:none;}}
.app-right{margin-left:auto;display:flex;align-items:center;gap:13px;}

/* ----------------------------------------------------------------------------
   Kopfleiste auf schmalen Geraeten (07.08.2026)
   GEMESSEN, nicht vermutet: scripts/mess-responsive-a11y.mjs meldete am
   07.08.2026, dass 25 von 32 oeffentlichen Routen bei 320px um 198px und bei
   375px um 143px SEITLICH SCROLLEN - jedes Mal war das erste ueberstehende
   Element div.app-right. Ursache: .applinks wird unter 940px ausgeblendet, die
   rechte Gruppe (Thema, Sprache, Anmelden, Premium) bleibt aber in voller
   Breite stehen und passt nicht in 320px.
   Seitliches Scrollen der SEITE ist der schwerste Responsive-Fehler: Inhalt
   verschwindet nach rechts, und auf dem Handy merkt man es oft nicht einmal.
   Behoben durch Umbruch statt durch Ausblenden - kein Bedienelement geht
   verloren, die Leiste wird bei Bedarf hoeher.
   ---------------------------------------------------------------------------- */
@media(max-width:600px){
  nav.app .wrap{flex-wrap:wrap;height:auto;min-height:64px;gap:10px;padding-top:8px;padding-bottom:8px;}
  /* Auch die rechte Gruppe SELBST muss umbrechen duerfen. Ohne diese Zeile
     bricht nur die aeussere Leiste um, und die Gruppe steht weiterhin als ein
     364px breiter Block in einem 320px breiten Fenster - gemessen 07.08.2026.
     min-width:0 hebt die Vorgabe auf, dass ein Flex-Element nie schmaler als
     sein Inhalt wird; ohne sie laeuft es trotz wrap ueber. */
  .app-right{gap:9px;flex-wrap:wrap;justify-content:flex-end;min-width:0;}
  .app-right > *{min-width:0;}
  /* Die Premium-Pille ist Werbung, kein Bedienelement - sie weicht als
     erste. Der Weg dorthin bleibt ueber die Preisseite erhalten. */
  .app-right .pill{display:none;}
}
.pill{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.06em;padding:5px 11px;border-radius:20px;background:rgba(201,158,99,.15);color:var(--gold-soft);}
.avatar{width:34px;height:34px;border-radius:10px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.14);}

/* Seitenkopf im App-Bereich */
.pagehead{padding:36px 0 8px;}
.pagehead .row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;}

/* Karten & Stat-Kacheln (aus Startseite) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-card);padding:22px;}
.card.flat{box-shadow:none;}
.card-h{display:flex;align-items:center;justify-content:space-between;font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.1em;color:var(--muted);}
.scard-h{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.12em;color:var(--muted);display:flex;align-items:center;gap:8px;}
.scard-h::after{content:"";flex:1;height:1px;background:var(--border-2);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.stats.c2{grid-template-columns:1fr 1fr;}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr;}}
.stat{background:var(--surface-2);border:1px solid var(--border-2);border-radius:11px;padding:12px 14px;}
.stat .k{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.06em;color:var(--muted);}
.stat .v{font-family:'Roboto Condensed';font-weight:600;font-size:18px;color:var(--text);margin-top:3px;}
.stat .v i{font-style:normal;color:var(--eyebrow);}

/* Badges */
.badge{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.03em;padding:5px 11px;border-radius:7px;display:inline-block;}
.badge.d{background:var(--navy);color:#FAF9F7;}
.badge.s{background:var(--surface-2);color:var(--text-2);}
.badge.gold{background:rgba(201,158,99,.16);color:var(--eyebrow);}
.verified{font-size: 14px;color:var(--verified-text);background:var(--verified-bg);padding:2px 8px;border-radius:20px;font-weight:600;}
.fit{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.05em;padding:4px 11px;border-radius:20px;font-weight:600;}
.fit.reach{background:var(--err-bg);color:var(--err-text);}
.fit.ziel{background:rgba(201,158,99,.18);color:var(--eyebrow);}
.fit.sicher{background:var(--verified-bg);color:var(--verified-text);}
.tagchip{font-family:'Roboto Condensed';font-size: 14px;color:var(--text-2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;background:var(--surface);}
.note{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.04em;color:var(--muted);}

/* Mockup-Hinweisleiste */
.mockbar{background:var(--deep);color:#8FA0B8;font-family:'Roboto Condensed';font-size:14px;letter-spacing:.08em;text-align:center;padding:7px 12px;}
.mockbar b{color:var(--gold-soft);font-weight:500;}

/* Tabellen */
table.rb{width:100%;border-collapse:collapse;font-size:14px;}
table.rb th{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.1em;color:var(--muted);text-align:left;font-weight:500;padding:10px 14px;border-bottom:1px solid var(--border);}
table.rb td{padding:13px 14px;border-bottom:1px solid var(--border-2);vertical-align:middle;}
table.rb tr:last-child td{border-bottom:none;}
table.rb tr:hover td{background:var(--surface-2);}
.cellmain{font-weight:600;color:var(--text);}
.cellsub{font-family:'Roboto Condensed';font-size:14px;color:var(--muted);margin-top:2px;letter-spacing:.04em;}

/* Status-Punkte */
.st{display:inline-flex;align-items:center;gap:7px;font-size: 14px;color:var(--text-2);}
.st i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.st.ok i{background:var(--green);}.st.warn i{background:var(--amber);}.st.err i{background:var(--red);}.st.idle i{background:var(--muted);}

/* Formulare */
label.f{display:block;font-family:'Roboto Condensed';font-size:14px;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px;}
input.f,select.f,textarea.f{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14.5px;color:var(--text);}
/* Chevron rechts, damit die Auswahlliste als solche erkennbar ist
   (Betreiber 08.08.2026). Der native Pfeil wird ersetzt, damit beide
   Design-Raeume dasselbe Symbol an derselben Stelle zeigen. */
select.f{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;padding-right:38px;}
input.f:focus,select.f:focus,textarea.f:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent;}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text-2);margin-top:13px;}
.check input{margin-top:4px;accent-color:var(--navy);width:16px;height:16px;}
.hint{background:var(--warn-bg);color:var(--warn-text);border-radius:10px;padding:11px 14px;font-size: 14px;margin-top:14px;}
/* Pflichtfeld ohne Eingabe: roter Rand als Klick-Rueckmeldung (16.08.2026). */
input.f.feld-fehlt{border-color:var(--err-text);}
.hint.ok{background:var(--verified-bg);color:var(--verified-text);}
.hint.err{background:var(--err-bg);color:var(--err-text);}

/* Slot-Composer (Direktive 4) */
.slot{border:1px solid var(--border);border-radius:13px;padding:15px 16px;margin-top:12px;background:var(--surface);}
.slot .sh{display:flex;justify-content:space-between;align-items:center;font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.1em;color:var(--muted);}
.cand{border:1px solid var(--border);border-radius:11px;padding:11px 13px;font-size:14px;color:var(--text-2);margin-top:9px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;}
.cand:hover{border-color:var(--gold);}
.cand.sel{border-color:var(--gold);background:rgba(201,158,99,.07);}
.cand .take{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.06em;color:var(--eyebrow);white-space:nowrap;margin-left:auto;}
.srcfact{font-family:'Roboto Condensed';font-size:14px;color:var(--muted);letter-spacing:.03em;margin-top:6px;}

/* Fortschrittsring (aus Startseite) */
.ring{position:relative;width:62px;height:62px;flex:none;}
.ring .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Roboto Condensed';}
.ring .pct b{font-size:14px;color:var(--text);}
.ring .pct span{font-size:14px;letter-spacing:.1em;color:var(--muted);margin-top:1px;}

/* Balken */
.bar{height:9px;background:var(--ring-track);border-radius:6px;overflow:hidden;}
.bar i{display:block;height:100%;background:var(--gold);border-radius:6px;}

/* Admin-Layout (Resend-inspiriert: ruhige Sidebar, viel Weißraum) */
.adminwrap{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}
@media(max-width:880px){.adminwrap{grid-template-columns:1fr;}}
aside.admin{background:var(--surface);border-right:1px solid var(--border);padding:20px 14px;}
aside.admin .lock{padding:6px 10px 18px;}
aside.admin a.item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--text-2);margin-top:2px;}
aside.admin a.item svg{width:16px;height:16px;color:var(--muted);}
aside.admin a.item:hover{background:var(--surface-2);}
aside.admin a.item.on{background:var(--surface-2);color:var(--text);font-weight:600;}
aside.admin .grp{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.14em;color:var(--muted);margin:18px 12px 6px;}
main.admin{padding:34px 38px;max-width:1120px;}

/* Grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gmain{display:grid;grid-template-columns:1.65fr 1fr;gap:18px;}
@media(max-width:920px){.g2,.g3,.gmain{grid-template-columns:1fr;}}

/* Footer (öffentlich, aus Startseite: enthält Widerruf!) */
footer.pub{background:#0E1A2E;color:#8FA0B8;font-size: 14px;margin-top:70px;}
footer.pub .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:38px 30px;}
footer.pub .links{display:flex;gap:22px;flex-wrap:wrap;font-family:'Roboto Condensed';font-size: 14px;}
/* ----------------------------------------------------------------------------
   Klickflaeche der Pflichtlinks: mindestens 24px (WCAG 2.5.8)
   GEMESSEN 07.08.2026 ueber 32 Routen in fuenf Breiten: Diese Links waren
   23 Pixel hoch - ein Pixel zu wenig. Weil die Fusszeile auf JEDER Seite
   steht, erzeugte dieser eine Fall rund tausend der gemeldeten Befunde, und
   er trifft ausgerechnet die Pflichtwege: Impressum, Datenschutz, AGB,
   Widerruf, Kuendigung, Barrierefreiheit, Cookie-Einstellungen.
   Behoben ueber die ZIELFLAECHE, nicht ueber die Schriftgroesse: Der Text
   bleibt exakt wie er war, nur der antippbare Bereich waechst. Auf einem
   Handy ist das der Unterschied zwischen "trifft" und "trifft nicht".
   ---------------------------------------------------------------------------- */
footer.pub .links a,
footer.pub .links button{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;}
footer.pub .links a:hover{color:#FAF9F7;}
footer.pub .lock{color:#FAF9F7;}

/* Empty State */
.empty{border:1.5px dashed var(--border);border-radius:16px;padding:34px;text-align:center;color:var(--muted);}
.empty h4{font-family:'Archivo';font-weight:700;color:var(--text);font-size:17px;}
.empty p{font-size:14px;margin-top:6px;max-width:44ch;margin-left:auto;margin-right:auto;}

.section-pad{padding:26px 0 60px;}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt28{margin-top:28px}.mt40{margin-top:40px}

/* ----------------------------------------------------------------------------
   Abschnittslabel (.lbl) - eingefuehrt 07.08.2026
   Ersetzt inline gesetzte Schriftangaben in AuthPage.tsx. Im BESTAND behaelt es
   das bisherige Aussehen (Roboto Condensed), damit sich am alten Design nichts
   aendert; der v12-Raum ueberschreibt es mit der Kit-Vorgabe.
   ---------------------------------------------------------------------------- */
.rb-seclabel{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}


/* Info-Panels und Karten der Registrierung (07.08.2026, Bestand-Fassung) */
.infopanel{border:1px solid var(--border);background:var(--surface);padding:20px;margin-top:20px;}
.infocard{border:1px solid var(--border);background:var(--bg);padding:12px 14px;}
.infocard-t{font-weight:600;font-size:14.5px;color:var(--text);}
.freigabe-tag{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:4px;font-size:14px;font-weight:600;letter-spacing:.04em;line-height:1.4;border:1px solid var(--border);color:var(--text-2);}
.freigabe-tag-frei{border-color:var(--verified-text);color:var(--verified-text);}
/* Formularkasten der Anmeldung (Betreiber: "Gib dem Formular den grauen Hintergrund") */
.authbox{background:var(--surface-2);border:1px solid var(--border);padding:26px;}
.authhead{font-family:'Archivo';font-weight:800;font-size:22px;line-height:1.4;color:var(--text);margin-bottom:18px;}
.authrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
.authrow a,.authrow button{font-size:14.5px;color:var(--text-2);text-decoration:underline;background:none;border:0;cursor:pointer;padding:0;}
/* Zweitform mit Signalfarbe fuer den Registrierungs-Knopf.
   EIGENER NAME, nicht .btn-o: die war bereits vergeben (Kopfzeile, Startseite,
   Kuendigung, Kontakt). Am 07.08.2026 habe ich sie ueberschrieben und damit den
   Anmelden-Knopf in der Kopfzeile unlesbar gemacht - Navy auf Dunkelblau.
   Vom Betreiber gefunden. Vor jedem neuen Klassennamen wird jetzt geprueft,
   ob er schon benutzt wird. */
.btn-signal{background:var(--navy);color:#FAF9F7;border:1px solid var(--navy);font-weight:700;}
.btn-signal:hover{background:var(--deep);color:#FAF9F7;border-color:var(--deep);}
/* ---- Anmeldeseite: Ueberschrift ueber dem Formular (Betreiber 08.08.2026) ----
   "Die Ueberschriften ... werden zu H2 und werden ueber das Formular
   geschrieben, nicht im Formular." Dazu: "gib den Ueberschriften mehr Raum,
   Abstand zum Formular bzw. vom Formular, der angemessen ist und es nicht
   rangeklatscht aussehen lässt!" - deshalb 8-px-Raster mit grosszuegigem
   Abstand nach unten, nicht die 18px der alten .authhead im Kasten. */
/* scroll-margin-top: die App-Leiste klebt oben (Unterkante 64px); ohne
   Abstand landet das Sprungziel dahinter (Zweitpruefer 08.08.2026). */
.authtitle{font-family:'Archivo';font-weight:800;font-size:26px;line-height:1.4;color:var(--text);margin:8px 0 32px;scroll-margin-top:80px;}
.authtitle:focus{outline:none;}
.authtitle:focus-visible{outline:2px solid var(--navy);outline-offset:4px;}
/* Registrierungs-Hinweis, abgesetzt UNTER dem Formularkasten.
   Weissraum statt Trennlinie: 64px Abstand setzen den Block ab, ohne ein
   zweites umrahmtes Element neben den Formularkasten zu stellen. */
.authaside{margin-top:64px;}
.authaside-h{font-family:'Archivo';font-weight:800;font-size:20px;line-height:1.4;color:var(--text);margin-bottom:12px;}
/* Schritt-Kaesten der Registrierung. Kein Gold als Rand (verboten), kein
   Radius ueber 4px, keine dritte Grauabstufung als Flaeche. */
/* ---- Passwortregeln, Staerkebalken, Geschlechtswahl (Betreiber 08.08.2026) --
   Der Regeltext steht als schlichte Zeile unter dem Feld, NICHT in einem
   Kasten. Die Spur des Balkens ist sichtbar abgesetzt - vorher hatte sie die
   Farbe der Formularflaeche und war unsichtbar. */
/* Geburtsdatum: Textfeld plus Kalendersymbol (Betreiber 08.08.2026).
   Das Datumsfeld selbst ist fuer das Auge verborgen, aber NICHT display:none -
   sonst koennte der Browser seinen Kalender nicht an der richtigen Stelle
   oeffnen. Es liegt deshalb deckungsgleich unter dem Symbol. */
.datefield{position:relative;}
.datehidden{position:absolute;right:8px;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;pointer-events:none;}
.datebtn{position:absolute;right:1px;top:1px;bottom:1px;width:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--muted);}
.datebtn:hover{color:var(--text);}
.fhint{font-size:14px;line-height:1.5;color:var(--text-2);margin-top:6px;}
.fhint--stark{font-weight:600;min-height:21px;}
.pwbar{height:6px;background:var(--border);margin-top:8px;overflow:hidden;}
.pwfill{display:block;height:100%;transition:width .2s ease,background-color .2s ease;}
/* Echte Auswahlfelder statt Schaltflaechen: eckig nach Kit, kein Gold. */
.genderwahl{border:0;padding:0;margin:16px 0 4px;}
.genderrow{display:flex;gap:26px;margin-top:8px;margin-bottom:4px;}
/* Kein Kasten (Betreiber 08.08.2026): die Auswahlfelder stehen direkt auf
   der Formularflaeche, nur Punkt und Beschriftung. */
.genderopt{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--text-2);min-height:36px;}
.genderopt:has(input:checked){color:var(--text);}
.genderradio{accent-color:var(--navy);width:17px;height:17px;flex:none;cursor:pointer;}
.authsteps{display:flex;gap:8px;list-style:none;margin:0 0 24px;padding:0;}
/* Die Zustandsfarbe sitzt am Kasten, die Beschriftung erbt sie - so bleibt
   .authstep-l EINMAL definiert. Mehrfachdefinitionen desselben Namens sind
   seit der Klassennamen-Kaperung vom 07.08.2026 durch ein Gate gesperrt. */
.authstep{flex:1;min-width:0;border:1px solid var(--border);background:var(--surface);border-radius:4px;padding:8px 12px;color:var(--muted);}
.authstep--aktiv{border-color:var(--navy);color:var(--text);}
.authstep--erledigt{border-color:var(--verified-text);color:var(--verified-text);}
.authstep-l{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:inherit;}

/* Scorecard-Sync-Anzeige (Migration 254, 14.08.2026): Live-Stand, Fortschritt
   und Lauf-Historie im Admin-Backend. Bewusst als eigene Bausteine statt als
   style-Attribute im JSX - die v14-Sperrklinke laesst den Altbestand an
   Inline-Stilen nur fallen, nie steigen. */
.syncbox{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:14px;}
.syncbox--aktiv{border-color:var(--gold);}
.syncnote{font-size:14px;color:var(--text-2);margin-top:6px;}
.syncbalken{display:block;width:100%;height:8px;margin-top:8px;}
.synctitel{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px;margin-top:16px;}
.synchuelle{overflow-x:auto;}
.synctab{width:100%;border-collapse:collapse;font-size:14px;}
.synckopf{text-align:left;font-weight:400;color:var(--text-2);padding:4px 12px 4px 0;}
.synczelle{padding:6px 12px 6px 0;border-top:1px solid var(--border);}
.syncrechts{text-align:right;}


/* mockups-v3 page-local styles, taken 1:1 from the mockup files as they are
   ported (phase B). Source of truth: data/Design_Seiten/mockups-v3/.
   Section per mockup; keep selectors identical to the mockups. */

/* ---- 05-college-suche.html ---- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:20px;}
.fgrp{display:flex;flex-direction:column;min-width:150px;flex:1;}
.fgrp.small{min-width:120px;flex:0 1 160px;}
.fgrp label{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;}
.fgrp select,.fgrp input[type="text"],.fgrp input[type="search"]{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-family:'Inter';font-size:14px;color:var(--text);min-height:44px;}
.fgrp input[type="range"]{accent-color:var(--gold);min-height:44px;}
.fgrp .rangeval{font-family:'Roboto Condensed';font-size: 14px;color:var(--text-2);margin-top:2px;}
.flock{display:flex;align-items:center;gap:8px;border:1px dashed var(--border);border-radius:9px;padding:10px 12px;font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.04em;color:var(--muted);min-height:44px;background:var(--surface-2);}
.flock svg{width:14px;height:14px;flex:none;}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px;}
@media(max-width:820px){.results{grid-template-columns:1fr;}}
.col{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:0;position:relative;}
.col:hover{border-color:var(--gold);}
.col .top{display:flex;align-items:flex-start;gap:13px;}
.crest{width:52px;height:52px;flex:none;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);}
.crest svg{width:26px;height:26px;}
.col .nm{font-family:'Archivo';font-weight:700;font-size:17.5px;line-height: 1.4;}
.col .nm a:hover{color:var(--eyebrow);}
.col .meta{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.06em;color:var(--muted);margin-top:4px;}
.favstar{margin-left:auto;width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:11px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;}
.favstar:hover{color:var(--eyebrow);border-color:var(--gold);}
.favstar[aria-pressed="true"]{color:var(--eyebrow);border-color:var(--gold);background:rgba(201,158,99,.1);}
.favstar svg{width:19px;height:19px;}
.kv{display:flex;gap:14px 18px;flex-wrap:wrap;margin-top:14px;font-family:'Roboto Condensed';font-size: 14px;color:var(--text-2);}
.kv b{color:var(--text);font-weight:600;}
.iconkv{display:inline-flex;align-items:center;gap:6px;padding:2px 0;min-height:24px;}
.iconkv svg{width:14px;height:14px;color:var(--eyebrow);flex:none;}
a.iconkv:hover b{color:var(--eyebrow);}
.maphint{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.04em;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:7px;}
.maphint svg{width:13px;height:13px;flex:none;}
.pager{display:flex;gap:7px;justify-content:center;margin-top:28px;flex-wrap:wrap;}
.pager a,.pager span,.pager button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:11px;font-family:'Roboto Condensed';font-size:14px;color:var(--text-2);background:var(--surface);padding:0 12px;cursor:pointer;}
.pager a:hover,.pager button:hover{border-color:var(--gold);color:var(--text);}
.pager .cur{background:var(--navy);color:#FAF9F7;border-color:var(--navy);}

/* ---- 01-startseite.html ---- */
.hero{position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-20%;right:-12%;width:60%;height:140%;background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);pointer-events:none;}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;padding:74px 30px 64px;}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:40px;}}
.hero h1{font-family:'Archivo';font-weight:900;font-size:clamp(42px,5.6vw,70px);line-height:.97;letter-spacing:-.038em;color:var(--text);margin-top:20px;}
.hero h1 .u{position:relative;white-space:nowrap;}
.hero h1 .u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.1em;height:.32em;background:var(--gold-soft);z-index:-1;border-radius:2px;}
.cta-row{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap;}
.trust{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap;font-family:'Roboto Condensed';font-size:14px;letter-spacing:.04em;color:var(--muted);}
.trust b{color:var(--text);font-weight:600;}
.trust .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);}
.panel{position:relative;}
.panel .deck{position:absolute;inset:14px -10px -12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:20px;transform:rotate(2.2deg);opacity:.6;}
.live{display:inline-flex;align-items:center;gap:6px;}
.live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--verified-bg);}
.badges{display:flex;gap:8px;margin-top:16px;}
.crow{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:14px;}
.cname{font-family:'Archivo';font-weight:700;font-size:21px;color:var(--text);letter-spacing:-.01em;}
.cmeta{font-family:'Roboto Condensed';font-size:14px;letter-spacing:.05em;color:var(--muted);margin-top:4px;}
.chip{position:absolute;left:-16px;bottom:-20px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-chip);padding:12px 15px;display:flex;align-items:center;gap:11px;}
.av{width:40px;height:40px;border-radius:11px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;font-size:14px;}
@media(max-width:920px){.chip{position:static;margin-top:16px;}.panel .deck{display:none;}}
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);}
.strip .wrap{display:flex;align-items:center;gap:24px;height:68px;flex-wrap:wrap;}
.strip .lbl{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.1em;color:var(--muted);}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{font-family:'Roboto Condensed';font-size: 14px;color:var(--text-2);border:1px solid var(--border);border-radius:20px;padding:6px 13px;}
.band{padding:58px 0;}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.band-grid{grid-template-columns:1fr 1fr;gap:26px 0;}
  /* min-width:0 (gemessen 07.08.2026): Eine 1fr-Spalte waechst implizit auf
     ihren laengsten Inhalt - hier auf "OFFIZIELLE DATENQUELLE" plus die
     seitlichen Innenabstaende der .metric. Die Startseite scrollte dadurch bei
     320px um 21px seitlich. */
  .band-grid > *{min-width:0;}
  .metric{padding:0 13px;}
  .metric .l{overflow-wrap:anywhere;}}
.metric{padding:0 26px;border-left:1px solid var(--border);}
.metric:first-child{padding-left:0;border-left:none;}
.metric .n{font-family:'Archivo';font-weight:800;font-size:clamp(34px,3.6vw,44px);color:var(--text);letter-spacing:-.03em;line-height: 1.4;}
.metric .n i{color:var(--eyebrow);font-style:normal;}
.metric .l{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.06em;color:var(--muted);margin-top:8px;}
.sec{padding:70px 0;}
.sec-head{max-width:640px;}
.sec-head h2{font-family:'Archivo';font-weight:800;font-size:clamp(27px,3.5vw,40px);letter-spacing:-.028em;color:var(--text);margin-top:14px;line-height: 1.4;}
.sec-head p{color:var(--text-2);margin-top:13px;font-size:16px;}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;}
@media(max-width:760px){.sides{grid-template-columns:1fr;}}
.side{border-radius:20px;padding:30px;border:1px solid var(--border);position:relative;overflow:hidden;}
.side.athlete{background:var(--surface);}
.side.coach{background:linear-gradient(165deg,#1E3A66,#172B4D);border-color:transparent;}
.side.coach::after{content:"";position:absolute;top:-40%;right:-20%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(201,158,99,.16),transparent 70%);}
.ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.ic svg{width:23px;height:23px;}
.side.athlete .ic{background:var(--surface-2);color:var(--text);}
.side.coach .ic{background:rgba(201,158,99,.16);color:var(--gold-soft);}
.side h3{font-family:'Archivo';font-weight:700;font-size:21px;margin-top:18px;position:relative;z-index:1;color:var(--text);}
.side.coach h3{color:#FAF9F7;}
.side p{font-size:14.5px;margin-top:9px;position:relative;z-index:1;color:var(--text-2);}
.side.coach p{color:#AFBCD0;}
.go{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.04em;color:var(--eyebrow);margin-top:20px;display:inline-flex;align-items:center;gap:7px;position:relative;z-index:1;}
.side.coach .go{color:var(--gold-soft);}
.go svg{width:14px;height:14px;}
.proc{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:28px;}}
.step{padding:0 28px;border-left:1px solid var(--border);}
.step:first-child{padding-left:0;border-left:none;}
@media(max-width:760px){.step{padding-left:0;border-left:none;}}
.step .top{display:flex;align-items:center;gap:12px;}
.step .no{font-family:'Roboto Condensed';font-weight:600;font-size: 14px;color:var(--eyebrow);}
.step .si{width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);}
.step .si svg{width:19px;height:19px;}
.step h4{font-family:'Archivo';font-weight:700;font-size:19px;color:var(--text);margin-top:16px;}
.step p{font-size:14px;color:var(--text-2);margin-top:7px;}
.quote{padding:70px 0;}
.qbox{background:linear-gradient(160deg,#1A2C4A,#15243E);border-radius:24px;padding:48px;color:#FAF9F7;position:relative;overflow:hidden;box-shadow:var(--shadow-card);}
.qbox::after{content:"";position:absolute;top:-30%;right:-10%;width:50%;height:140%;background:radial-gradient(closest-side,rgba(201,158,99,.18),transparent 70%);}
.qbox .qm{font-family:'Archivo';font-weight:900;font-size:70px;color:var(--gold);line-height:.5;opacity:.55;}
.qbox blockquote{font-family:'Archivo';font-weight:600;font-size:clamp(21px,2.7vw,30px);line-height: 1.4;letter-spacing:-.012em;max-width:42ch;margin-top:10px;position:relative;}
.qbox .by{font-family:'Roboto Condensed';font-size: 14px;letter-spacing:.04em;color:#AFBCD0;margin-top:24px;}
.qbox .by b{color:var(--gold-soft);font-weight:500;}
.cta-band{background:var(--navy);color:#FAF9F7;text-align:center;padding:78px 0;position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;left:50%;top:-50%;transform:translateX(-50%);width:55%;height:170%;background:radial-gradient(closest-side,rgba(201,158,99,.18),transparent 70%);}
.cta-band .wrap{position:relative;}
.cta-band h2{font-family:'Archivo';font-weight:900;font-size:clamp(31px,4.2vw,50px);letter-spacing:-.035em;}
.cta-band p{color:#C4CEDC;margin:15px auto 0;max-width:46ch;}

/* ---------------------------------------------------------------------------
   Grossauftrag 14.08.2026 (Aufgabe 7c): Social-Media-Icons auf der
   oeffentlichen College-Detailseite (/schools/:id). Die Komponente
   SocialMediaIcons rendert die Portal-Klassen kv/kvh/linkchips, die bisher
   nur unter .rb-portal (src/portal/portal.css) gestaltet sind. Hier dieselbe
   Optik fuer den oeffentlichen Seitenraum - bewusst unter .pub-social
   gescopet, damit nichts in den Portal-Raum zurueckwirkt.
   --------------------------------------------------------------------------- */
.pub-social .kv{margin-top:10px;}
.pub-social .kvh{flex-basis:100%;font-family:'Roboto Condensed';font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.pub-social .linkchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;flex-basis:100%;}
/* Innen-Elemente ueber :is() - je Klasse bleibt EINE Definitionsstelle
   (check-klassennamen zaehlt die letzte Klasse je Selektor). */
.pub-social .linkchips :is(a,span){display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-size:14px;line-height:1.4;background:var(--surface);color:var(--text-2);}
.pub-social .linkchips a:hover{border-color:var(--gold);text-decoration:none;}
/* Goldene Sektions-Icons ohne style-Attribut (v14-Sperrklinke): gleiche
   Optik wie die bestehenden scard-h-Icons der Detailseite. */
.ic-gold{color:var(--gold);}


/* ===========================================================================
   ERGAENZUNG von Roster Base, nicht aus der Design-Vorlage
   ---------------------------------------------------------------------------
   Logo um 20 Prozent groesser (Betreiber-Anordnung 17.08.2026). Die Vorlage
   stand auf 34,5 px; das war seinerseits schon 15 Prozent ueber dem Original
   (Betreiber 08.08.2026). Neu: 41,4 px, Abstand und Wortmarke im gleichen
   Verhaeltnis.
   =========================================================================== */
.rb12-site .logo { gap: 18px; }
.rb12-site .logo svg { width: 55px; height: 55px; }
.rb12-site .logo .wm { font-size: 1.55em; }

/* Die Kopfzeile bekommt etwas mehr Hoehe, damit das groessere Zeichen nicht
   an die Kanten stoesst. */
.rb12-site .hdrrow { min-height: 92px; }

/* ---------------------------------------------------------------------------
   Bausteine, die die Vorlage nicht mitbringt
   ---------------------------------------------------------------------------
   Die Vorlage ist die Startseite der Anwendung. Sie kennt Hero, Baender,
   Karten, Schritte, Knoepfe und Fusszeile - aber weder einen Kennzahlen-
   streifen noch eine mehrspaltige Aufzaehlung noch einen Frageblock. Diese
   vier Bausteine werden hier ergaenzt, ausschliesslich mit den Werten der
   Vorlage (var(--...)), damit sie sich nahtlos einfuegen.
   --------------------------------------------------------------------------- */

/* Vertrauenszeile unter den Knoepfen im Hero.
   Die Vorlage setzt .trust auf display:block und den Trennpunkt auf
   display:block - dadurch stand jede Angabe in einer eigenen Zeile und die
   Punkte schwebten leer darunter (gemessen 17.08.2026). Hier steht die Zeile
   als umbrechende Reihe, der Punkt bleibt in der Zeile. */
.rb12-site .trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.rb12-site .trust .dot { display: inline-block; flex: none; }

/* Die Hervorhebungen erben sonst die Textfarbe fuer HELLEN Grund (#15233C).
   Im dunklen Hero ergab das einen Kontrast von 1,05 zu 1 - der Text war
   unsichtbar (gemessen 17.08.2026). Mit der geerbten Zeilenfarbe liegt er bei
   rund 5 zu 1 und damit ueber der Anforderung von WCAG 2.2 AA. */
.rb12-site .trust b { color: inherit; }

/* Kennzahlenstreifen unter dem Hero.
   EIN durchgehender Streifen, keine schwebenden Kaesten: gleiche Flaeche wie
   das Hero, randlos ueber die volle Breite, die vier Werte nur durch je eine
   Haarlinie getrennt und am selben Raster ausgerichtet wie der uebrige Inhalt. */
.rb12-site .stats {
  display: block;
  background: var(--deep, #121F35);
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: #fff;
  width: 100%;
}
.rb12-site .statsrow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: var(--shell, 1320px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  background: none;
  gap: 0;
}
.rb12-site .stat {
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, .10);
  padding: 26px 28px;
  text-align: left;
  min-width: 0;
}
.rb12-site .stat:first-child { border-left: none; }
.rb12-site .stat strong {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
  margin-bottom: 6px;
}
.rb12-site .stat span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: #B4C0D4;
}

@media (min-width: 860px) {
  .rb12-site .statsrow { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 859px) {
  .rb12-site .stat:nth-child(3) { border-left: none; }
}

/* Mehrspaltige Aufzaehlung fuer Laender und Sportarten. Bricht von selbst um,
   ohne festen Haltepunkt. */
/* Ueberschrift ueber einer Aufzaehlung.
   Der erste Titel stand vorher direkt unter dem Vorspann und der zweite klebte
   an der Liste darueber - beide Bloecke liefen ineinander. Jetzt trennt ein
   deutlicher Abstand die beiden Gruppen. */
.rb12-site .band h3.listtitle {
  margin: 0 0 20px;
  padding-top: 64px;
  font-family: var(--font-display, inherit);
  font-size: 20px;
  font-weight: 700;
}
/* Der erste Titel folgt dem Vorspann, nicht einer Liste - er braucht weniger. */
.rb12-site .band .sectionhead + h3.listtitle { padding-top: 36px; }
.rb12-site .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px 26px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rb12-site .cols li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line, #E2E8F0);
  font-size: 15px;
  line-height: 1.5;
}

/* Der Abschnittskopf.
   Die Ueberschrift stand direkt auf dem Text - "Selbstbestimmt statt
   ausgelagert" beruehrte fast den ersten Absatz. Jetzt liegt Luft dazwischen,
   und der Vorspann bekommt Zeilenluft. */
.rb12-site .sectionhead { margin-bottom: 8px; }
.rb12-site .band .sectionhead h2 { margin: 0 0 26px; }
.rb12-site .band .sectionhead .copy { margin-top: 0; line-height: 1.68; }
.rb12-site .band .copy + .copy { margin-top: 20px; }
/* Faellt der Vorspann weg und folgt gleich der Fliesstext, braucht die
   Ueberschrift denselben Abstand nach unten. */
.rb12-site .band .sectionhead + .copy { margin-top: 12px; }

/* Fragen und Antworten. Bewusst offen dargestellt: Ein Ausklappen braucht ein
   Programm, und eine zugeklappte Antwort steht fuer eine Antwortmaschine nicht
   sicher im Text. */
.rb12-site .faq { margin-top: 26px; max-width: 74ch; }
.rb12-site .faq h3 {
  font-family: var(--font-display, inherit);
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.rb12-site .faq p { color: var(--ink-2, #37425A); }

/* Die drei Schritte tragen dasselbe Gitter wie alle anderen Karten
   (.grid.g3 + .card): duenne Linien aus einer Flaeche im Hintergrund, ein
   Rahmen aussen herum, kein eigener Rahmen je Karte. Vorher hatte jede der
   drei Kartengruppen ein eigenes Rahmendesign - Betreiber-Anordnung
   18.08.2026: alle gleich, nach dem Vorbild von "Was die Plattform bietet". */
.rb12-site .steps { list-style: none; }
.rb12-site .steps .step {
  display: block;
  background: var(--panel, #FFFFFF);
  border: 0;
  padding: 30px 32px;
}
.rb12-site .steps .step h4 {
  font-family: var(--font-display, inherit);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}
.rb12-site .steps .step p { margin: 0; }

/* Die Schrittnummer ueber der Ueberschrift. */
.rb12-site .stepno {
  font-family: var(--font-numeric, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold, #C99E63);
  margin: 0 0 10px;
}

/* Die Laenderspalte der Fusszeile traegt elf Eintraege - zweispaltig, damit
   sie die Fusszeile nicht in die Laenge zieht. */
.rb12-site .laendercol ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0 18px;
}

/* Etiketten auf den Karten. Betreiber-Anordnung 17.08.2026: Petrolfarbe mit
   weisser Schrift. --petrol stammt aus der Design-Vorlage (#16606B); der
   Kontrast zu Weiss liegt bei rund 7 zu 1. */
.rb12-site .tag {
  display: inline-block;
  background: var(--petrol, #16606B);
  color: #FFFFFF;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Ein Land, dessen Seite noch nicht gebaut ist, steht als ruhiger Text. */
.rb12-site .nochnicht { opacity: .55; }

/* Rechtstexte: schmale Spalte, damit lange Absaetze lesbar bleiben. */
.rb12-site .rechtstext .shell { max-width: 74ch; }
.rb12-site .rechtstext h1 { margin-bottom: 8px; }
.rb12-site .rechtstext h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 34px 0 4px;
}
.rb12-site .rechtstext p { margin-top: 12px; color: var(--ink-2, #37425A); }

/* Sprachauswahl im Kopf als Aufklappmenue (Betreiber-Entscheidung 18.08.2026).
   Elf Sprachen nebeneinander waren unbrauchbar - sie brachen auf zwei Zeilen um
   und drueckten die Navigation zusammen. */
.rb12-site .hdrrow { justify-content: space-between; align-items: center; }
.rb12-site .sprachwahl { position: relative; }
.rb12-site .sprachwahl-klapp > summary {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.4; color: #C9D4E4;
  padding: 8px 10px; min-height: 24px; cursor: pointer;
  border: 1px solid rgba(201, 212, 228, 0.32); border-radius: 0;
  list-style: none; user-select: none;
}
/* Das Standard-Dreieck von Safari und Chrome abschalten - der eigene Marker
   unten ersetzt es. Beide Schreibweisen noetig: WebKit kennt nur die zweite. */
.rb12-site .sprachwahl-klapp > summary::-webkit-details-marker { display: none; }
.rb12-site .sprachwahl-klapp > summary::marker { content: ''; }
.rb12-site .sprachwahl-klapp > summary::after {
  content: ''; width: 8px; height: 8px; margin-left: 2px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.rb12-site .sprachwahl-klapp[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.rb12-site .sprachwahl-klapp > summary:hover,
.rb12-site .sprachwahl-klapp > summary:focus-visible { color: #FFFFFF; border-color: #FFFFFF; }
.rb12-site .sprachwahl-klapp .symbol { width: 18px; height: 18px; flex: 0 0 auto; }
.rb12-site .sprachwahl-jetzt { white-space: nowrap; }

.rb12-site .sprachwahl-klapp ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 210px; margin: 0; padding: 6px 0; list-style: none;
  background: #0B1220; border: 1px solid rgba(201, 212, 228, 0.32);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.rb12-site .sprachwahl-klapp li { margin: 0; }
.rb12-site .sprachwahl-klapp a,
.rb12-site .sprachwahl-klapp .sprachwahl-aktiv {
  display: block; padding: 9px 16px; min-height: 24px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.4; text-decoration: none;
}
.rb12-site .sprachwahl-klapp a { color: #C9D4E4; }
.rb12-site .sprachwahl-klapp a:hover,
.rb12-site .sprachwahl-klapp a:focus-visible { color: #FFFFFF; background: #16606B; }
.rb12-site .sprachwahl-klapp .sprachwahl-aktiv { color: #FFFFFF; font-weight: 700; }

/* Serverseitiger Sprachhinweis */
.rb12-site .sprachhinweis { background: #16606B; color: #FFFFFF; }
.rb12-site .sprachhinweis-reihe {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.rb12-site .sprachhinweis p {
  margin: 0; color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15.5px;
}
.rb12-site .sprachhinweis .btn {
  background: #FFFFFF; color: #16606B; border: 0; white-space: nowrap;
}
.rb12-site .sprachhinweis .btn:hover,
.rb12-site .sprachhinweis .btn:focus-visible { background: #E8F1F2; color: #0F4A53; }

@media (max-width: 640px) {
  .rb12-site .hdrrow { flex-wrap: wrap; gap: 10px; }
  /* Auf schmalen Geraeten von der rechten Kante loesen, damit das Menue nicht
     ueber den Rand hinauslaeuft. */
  .rb12-site .sprachwahl-klapp ul { right: auto; left: 0; min-width: 190px; }
}