/* Werte, die die Hausschale nicht als Token fuehrt. Sie stammen aus den
   uebernommenen Bauformen (Aufmacher des B&O-Angebots) und stehen hier EINMAL,
   statt als Pixelzahl an sieben Stellen (R14). */
:root{
  --r-aufmacher:1.375rem;   /* 22px — Radius des Aufmachers im B&O-Angebot */
  --pad-aufmacher:2.125rem; /* 34px — dessen Innenabstand auf breitem Schirm */
  --r-knopf:.625rem;        /* 10px — wie .btn-lime der Hausschale */
  --r-knopf-gross:.6875rem; /* 11px — wie .tb-burger der Hausschale */
  --punkt:.5rem;            /* 8px — Statuspunkt */
  --such-symbol:.6875rem;   /* 11px — Abstand des Lupensymbols vom Rand */
  --such-einzug:2.25rem;    /* 36px — Einzug des Suchfeldes fuer das Symbol */
  --r-pille:62.4375rem;     /* voll gerundet; die Hausschale nutzt dafuer 99px */
}

/* ============================================================
   anbieter-modul.css — Ergaenzung zur Hausschale ssr-konsole.css.
   KEINE eigenen Token, keine zweite Schale: jede Farbe, jeder Abstand
   und jeder Radius kommt aus der Hausschale. Hier stehen nur Bauteile,
   die es dort noch nicht gibt: Bestaetigungs-Kaestchen, Gewerke-Raster,
   Bildergalerie, Formularmeldung.
   ============================================================ */

/* Kaestchen mit Beschriftung — die Hausschale kennt .feld/.inp, aber keine
   Auswahlzeile. Flaeche mindestens 44 px hoch (R28b). */
.wahl{
  position:relative;
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  min-height:2.75rem; cursor:pointer; font-size:14px; color:var(--ink-soft);
  border:1px solid transparent;
}
.wahl:hover{background:var(--surface-2); border-color:var(--line)}
/* Das Kaestchen selbst traegt keine Optik mehr — es bleibt fokussierbar und
   bedienbar, die Darstellung uebernimmt .kasten daneben (Hausmuster R1/R27).
   Verstecken per display:none waere falsch: das nimmt es aus dem Tastaturbaum. */
.wahl input{
  position:absolute; width:20px; height:20px; margin:0; opacity:0; cursor:pointer;
}
.wahl .kasten{
  width:20px; height:20px; margin-top:1px; flex:0 0 auto; cursor:pointer;
  border:2px solid var(--line-strong); border-radius:6px; background:var(--surface);
  display:block; position:relative;
}
.wahl .kasten::after{
  content:""; position:absolute; inset:2px 3px; opacity:0;
  border-left:2.5px solid var(--on-lime); border-bottom:2.5px solid var(--on-lime);
  transform:rotate(-45deg) translateY(-2px) scale(.86); transform-origin:center;
}
.wahl input:checked + .kasten{background:var(--lime); border-color:var(--lime)}
.wahl input:checked + .kasten::after{opacity:1}
.wahl input:focus-visible + .kasten{outline:3px solid var(--accent-ink); outline-offset:2px}
:root[data-theme="light"] .wahl input:focus-visible + .kasten{outline-color:#3A4A00}
.wahl:hover .kasten{border-color:var(--ink-faint)}
.wahl b{color:var(--ink); font-weight:600}
.wahlraster{display:grid; gap:var(--sp-2); grid-template-columns:1fr}
@media(min-width:48rem){ .wahlraster{grid-template-columns:repeat(2,1fr)} }
@media(min-width:64rem){ .wahlraster{grid-template-columns:repeat(3,1fr)} }

/* Fehlermeldung am Feld — Zustand nie nur ueber Farbe (R28d): Zeichen + Text. */
.feldfehler{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  color:var(--bad); font-size:14px; font-weight:600; margin-top:var(--sp-1);
}
.feldfehler svg.i{width:15px; height:15px; flex:0 0 auto; margin-top:1px}
.inp[aria-invalid="true"]{border-color:var(--bad); border-width:2px}

/* Gewerke-Karten */
/* Spaltenzahl kommt aus der Leiter (--k-*), die der Aufrufer je Gruppe setzt:
   so entsteht nie eine Schlussreihe mit einem einzelnen Element (R77). */
.gewerkraster{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
@media(min-width:36rem){ .gewerkraster{grid-template-columns:repeat(var(--k-klein,2), minmax(0,1fr))} }
@media(min-width:56rem){ .gewerkraster{grid-template-columns:repeat(var(--k-mittel,3), minmax(0,1fr))} }
@media(min-width:80rem){ .gewerkraster{grid-template-columns:repeat(var(--k-gross,3), minmax(0,1fr))} }
.gewerk{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
}
.gewerk h4{font-family:var(--disp); font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink); text-wrap:balance}
.gewerk .kopf{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center}
.gewerk p{font-size:14px; color:var(--ink-soft); line-height:1.55}
.gewerk .quelle{font-size:14px; color:var(--ink-faint); overflow-wrap:anywhere}
.gewerk .btn-ghost{margin-top:auto; align-self:flex-start}

/* Bilder und Plaene */
.bildraster{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
@media(min-width:48rem){ .bildraster{grid-template-columns:repeat(2,1fr)} }
.bildraster figure{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.bildraster img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--surface-3)}
.bildraster .planbild{aspect-ratio:4/3; object-fit:contain; background:var(--surface-2)}
.bildraster figcaption{padding:var(--sp-3) var(--sp-4); font-size:14px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:space-between; align-items:center}
.bildraster a:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}

/* Kopfbild der Uebersicht */
.aufmacher{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.aufmacher img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--surface-3)}
.aufmacher .text{padding:var(--sp-5)}
.aufmacher h1{font-family:var(--disp); font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; line-height:1.15}
@media(min-width:64rem){ .aufmacher h1{font-size:34px} }
.aufmacher .ort{font-size:15px; color:var(--ink-soft); margin-top:var(--sp-2)}
.aufmacher .marken{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4)}

/* Sammelmeldung des Formulars */
.formmeldung{margin-top:var(--sp-4)}
.formmeldung .notebox{display:flex; gap:var(--sp-3); align-items:flex-start; margin-top:0}
.formmeldung svg.i{flex:0 0 auto; margin-top:2px}
.formmeldung.gut .notebox{border-color:var(--good); background:var(--good-bg)}
.formmeldung.gut svg.i{color:var(--good)}
.formmeldung.schlecht .notebox{border-color:var(--bad); background:var(--bad-bg)}
.formmeldung.schlecht svg.i{color:var(--bad)}
.formmeldung.laeuft svg.i{color:var(--info)}

/* Platzhalter waehrend des Sendens — gleiche Hoehe wie das Ergebnis (R48). */
.skelett{
  border-radius:var(--r-sm); min-height:44px;
  background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%; animation:skelettlauf 1.2s linear infinite;
}
@keyframes skelettlauf{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){ .skelett{animation:none} }

/* Schritte der Vergabe */
.schrittraster{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
@media(min-width:36rem){ .schrittraster{grid-template-columns:repeat(var(--k-klein,2), minmax(0,1fr))} }
@media(min-width:56rem){ .schrittraster{grid-template-columns:repeat(var(--k-mittel,3), minmax(0,1fr))} }
@media(min-width:80rem){ .schrittraster{grid-template-columns:repeat(var(--k-gross,3), minmax(0,1fr))} }

/* Liste mit Haken */
.hakenliste{list-style:none; display:grid; gap:var(--sp-3)}
.hakenliste li{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:14px; color:var(--ink-soft)}
.hakenliste svg.i{flex:0 0 auto; margin-top:2px; color:var(--lime)}
:root[data-theme="light"] .hakenliste svg.i{color:var(--accent-ink)}

/* Druck: nur der Inhalt (R51) */
@media print{
  .rail,.topbar,.nav-back,.no-print{display:none !important}
  .app{display:block}
  .gewerk,.card,.bildraster figure,.aufmacher{break-inside:avoid}
}

/* ============================================================
   Klassen statt Stil-Attribute. Damit kommt die Auslieferung ohne
   'unsafe-inline' bei den Stilen aus (R47) — jede Anzeigeentscheidung
   steht hier, nicht im Dokument.
   ============================================================ */

/* Spaltenzahl der Kachelgruppe: die Schlussreihe darf kein einzelnes Element
   tragen (R77). Die Leiter wird beim Bauen gewaehlt, hier stehen die Faelle. */
/* Vollstaendige Leiter fuer 1 bis 60 Elemente. Die erste Fassung hatte nur
   die damals gebrauchten Kombinationen; bei sieben Losen fehlte k-4-1-1,
   das Raster fiel still auf den Standardwert zurueck und erzeugte genau
   die Schlussreihe mit einem Element, die es verhindern sollte. */
.k-1-1-1{--k-gross:1; --k-mittel:1; --k-klein:1}
.k-2-2-2{--k-gross:2; --k-mittel:2; --k-klein:2}
.k-3-3-1{--k-gross:3; --k-mittel:3; --k-klein:1}
.k-4-1-1{--k-gross:4; --k-mittel:1; --k-klein:1}
.k-4-2-2{--k-gross:4; --k-mittel:2; --k-klein:2}
.k-4-3-1{--k-gross:4; --k-mittel:3; --k-klein:1}
.k-4-3-2{--k-gross:4; --k-mittel:3; --k-klein:2}

.kartenkoerper{padding-top:var(--sp-4); padding-bottom:var(--sp-5)}
.stark{font-weight:800}
.abstand-klein{margin-top:var(--sp-3)}
.abstand-gross{margin-top:var(--sp-4)}
.leiser-hinweis{margin-top:var(--sp-4); color:var(--ink-faint)}
.knopfreihe{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); align-items:center}
.wahlstapel{display:grid; gap:var(--sp-1)}

/* Symbolgroessen als Klassen. Die Hausschale liefert sie als Stil-Attribut;
   unter einer Richtlinie ohne 'unsafe-inline' wird das vom Browser verworfen —
   sichtbar nur in der Konsole, nicht im Bild. Deshalb hier als Klasse. */
svg.i.i-13{width:13px;height:13px}
svg.i.i-14{width:14px;height:14px}
svg.i.i-15{width:15px;height:15px}
svg.i.i-16{width:16px;height:16px}
svg.i.i-17{width:17px;height:17px}
svg.i.i-18{width:18px;height:18px}
svg.i.i-19{width:19px;height:19px}
svg.i.i-21{width:21px;height:21px}

/* Sperrt das Blaettern, solange die Navigation ueber dem Inhalt liegt. */
body.nav-offen{overflow:hidden}

/* Schlussreihe einer Kartengruppe (R77): bleibt genau EIN Element uebrig,
   spannt es ueber die volle Breite, statt als angebrochene Reihe dazustehen.
   Die Regel haengt an der tatsaechlichen Spaltenzahl, deshalb je Stufe eine
   eigene Marke: .rest3 gilt in der dreispaltigen Stufe, .rest2 in der
   zweispaltigen. Der obere Deckel der mittleren Abfrage ist noetig, weil sich
   die beiden Stufen sonst ueberlagern — kein Rueckfall auf Desktop-zuerst. */
@media(min-width:48rem){
  .bildraster.rest2 > :last-child{grid-column:1 / -1}
}

/* `hidden` verliert gegen jede display-Regel mit hoeherer Spezifitaet — ohne
   diese Zeile stehen alle Fehlermeldungen sofort auf der Seite, obwohl im
   Markup `hidden` steht. Im Quelltext ist das unsichtbar, nur im Bild sichtbar. */
[hidden]{display:none !important}

/* Das gestaltete Kaestchen ist reine Optik — es darf den Klick nicht abfangen,
   sonst trifft ein Zeigegeraet die Darstellung statt das Bedienelement. */
.wahl .kasten{pointer-events:none}

/* Die Kopfleiste klebt oben. Ohne Abstand landet ein angesprungenes oder
   fokussiertes Element darunter: mit der Maus faellt das nicht auf, mit der
   Tastatur arbeitet man blind (R67, WCAG 2.2 SC 2.4.11). */
.wahl, .feld, .card, .section-label, .gewerk, .inp, .btn-lime, .btn-ghost,
.feldfehler, .formmeldung, [id]{scroll-margin-block-start:5.5rem}

/* ============================================================
   CI-Angleichung an das B&O-Angebot und die Hillebrand-Konsole.
   Der Aufmacher (Lime-Radial) stammt aus bo-konsole/index.html,
   die Kennzahl-Karte mit Symbol und Kontext-Chip aus der
   Hillebrand-Übersicht. Beide nutzen ausschliesslich Token der
   Hausschale — keine eigene Farbe, kein eigener Abstand.
   ============================================================ */

/* Aufmacher — Bauform .offer-hero aus dem B&O-Angebot. */
.aufmacher-ci{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-aufmacher);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:var(--surface);
}
/* Der Lime-Schimmer liegt als eigene Ebene NUR ueber der rechten Haelfte und
   hinter dem Inhalt. Grund: ein Verlauf direkt auf dem Element macht den
   Kontrast jedes Textes darin am DOM unmessbar — und "nicht messbar" ist kein
   bestandener Kontrast. So liegt der Text nachweislich auf --surface, und der
   Schimmer beruehrt nur Flaeche ohne Text. */
.aufmacher-ci::before{
  content:""; position:absolute; inset:0 0 0 auto; width:52%; pointer-events:none;
  background:radial-gradient(120% 140% at 100% 0%,
    color-mix(in srgb, var(--lime) 20%, transparent), transparent 62%);
}
.aufmacher-ci > *{position:relative}
@media(min-width:64rem){ .aufmacher-ci{padding:var(--pad-aufmacher) var(--pad-aufmacher) var(--sp-6)} }
.aufmacher-ci .kopfzeile{
  display:grid; gap:var(--sp-5); align-items:start; grid-template-columns:1fr;
}
@media(min-width:64rem){ .aufmacher-ci .kopfzeile{grid-template-columns:minmax(0,1fr) auto} }
.aufmacher-ci h1{
  font-family:var(--disp); font-weight:900; letter-spacing:-.025em; line-height:1.08;
  font-size:30px; color:var(--ink); text-wrap:balance; margin-top:var(--sp-3);
}
@media(min-width:48rem){ .aufmacher-ci h1{font-size:38px} }
@media(min-width:64rem){ .aufmacher-ci h1{font-size:46px} }
.aufmacher-ci .fakten{
  margin-top:var(--sp-4); font-size:16px; color:var(--ink-soft); max-width:56ch; line-height:1.6;
}
.aufmacher-ci .fakten b{color:var(--ink); font-weight:700}

/* Kennzahl-Block rechts im Aufmacher — Bauform aus dem B&O-Angebot. */
.eckblock{
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:color-mix(in srgb, var(--surface-2) 80%, transparent);
  padding:var(--sp-4); min-width:min(100%, 20rem);
}
.eckblock .titel{
  font-size:14px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; margin-bottom:var(--sp-3);
}
/* Drei Spalten erst, wenn sie hineinpassen — bei 360 px lief die dritte
   Kachel aus ihrem Kasten (R7: stapeln, nicht quetschen). */
.eckblock .werte{display:grid; grid-template-columns:1fr; gap:var(--sp-2)}
@media(min-width:26rem){ .eckblock .werte{grid-template-columns:repeat(3,1fr)} }
.eckblock .wert{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-2); text-align:center;
}
.eckblock .wert .z{font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:-.02em; display:block}
.eckblock .wert .e{font-size:14px; color:var(--ink-faint); display:block; margin-top:2px}

/* Kennzahl-Karte mit Symbol und Kontext-Chip — Bauform der Hillebrand-Übersicht. */
/* Feste Spaltenzahl nach Fensterbreite ging daneben: bei 1180 px ist der
   Inhaltsbereich um die Navigation schmaler als das Fenster, und die vierte
   Kachel lief 67 px ueber den Rand. Die Spalten richten sich deshalb nach dem
   verfuegbaren Platz, nicht nach der Fensterbreite (R7). */
.ecken{display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr))}
.ecke{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
}
.ecke .kopf{display:flex; align-items:center; gap:var(--sp-3); color:var(--ink-soft); font-size:14px; font-weight:600}
.ecke .kopf svg.i{color:var(--ink-faint)}
.ecke .zahl{font-family:var(--disp); font-weight:800; font-size:32px; letter-spacing:-.03em; line-height:1}
.ecke .zahl .einheit{font-family:var(--sans); font-size:15px; font-weight:700; color:var(--ink-faint); margin-left:4px}
.ecke .chip{align-self:flex-start}

/* Beleg-Zeile unter einem Wert: Herkunft + Fundstelle (.prov der Hausschale). */
.belegzeile{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2)}
.belegzeile .quelle{font-size:14px; color:var(--ink-faint); overflow-wrap:anywhere}

/* Los-Detail */
.losdetail-kopf{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-2)}
.merkknopf{
  display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  font-family:var(--sans); font-size:15px; font-weight:700; padding:var(--sp-2) var(--sp-4); border-radius:var(--r-knopf);
  min-height:2.75rem;
}
.merkknopf:hover{border-color:var(--ink-faint); color:var(--ink)}
.merkknopf[aria-pressed="true"]{background:var(--lime); border-color:var(--lime); color:var(--on-lime)}
.merkknopf svg.i{width:15px; height:15px}

/* Gewerkekarte anklickbar */
.gewerk.klickbar{cursor:pointer; transition:border-color var(--dur,.18s), transform var(--dur,.18s)}
.gewerk.klickbar:hover{border-color:var(--ink-faint)}
.gewerk .kartenfuss{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:auto; padding-top:var(--sp-3)}

/* Suchfeld in der Filterleiste */
/* Im Flex-Kasten darf ein Eingabefeld nicht seine Wunschbreite behalten —
   bei 360 px lief es 285 px breit aus seinem 328 px breiten Rahmen (R7). */
.suchfeld{position:relative; display:flex; align-items:center; flex:1 1 17rem; min-width:0; max-width:100%}
.suchfeld .inp{min-width:0; width:100%}
.suchfeld svg.i{position:absolute; left:var(--such-symbol); color:var(--ink-faint); pointer-events:none}
.suchfeld .inp{padding-left:var(--such-einzug)}

/* Leerer Zustand (R37) */
.leerstand{
  border:1px dashed var(--line-strong); border-radius:var(--r); background:var(--surface-2);
  padding:var(--sp-6) var(--sp-5); text-align:center; color:var(--ink-soft); font-size:16px;
}
.leerstand b{display:block; color:var(--ink); font-size:17px; margin-bottom:var(--sp-2); font-family:var(--disp)}
.leerstand .btn-ghost{margin-top:var(--sp-4)}

/* Handlungsknopf in der Navigation — Bauform aus dem B&O-Angebot, wo der
   Abschluss von jeder Ansicht aus einen Klick entfernt ist. */
.rail-cta{width:100%; justify-content:center; margin-top:var(--sp-5); min-height:2.75rem}
.app.railmin .rail-cta .cta-txt{display:none}
.aufmacher-titel{
  font-family:var(--disp); font-weight:800; letter-spacing:-.025em; line-height:1.12;
  font-size:26px; color:var(--ink); text-wrap:balance;
}
@media(min-width:64rem){ .aufmacher-titel{font-size:34px} }
.statusline .dot{width:var(--punkt); height:var(--punkt); border-radius:var(--r-pille); background:var(--good); flex:0 0 auto}
.abstand-block{margin-top:var(--rhythmus)}
/* Die Dokumentenliste der Hausschale ist eingeklappt gedacht; hier steht sie
   dauerhaft offen, weil es keinen Aufklapper gibt, der sie öffnen könnte. */
.doclist.offen{display:block}

/* Der Handlungsknopf ist selbst Lime; der Lime-Fokusring der Hausschale hat
   darauf 1,36:1 und ist damit unsichtbar. Auf der dunklen Leiste braucht er
   einen hellen Ring, im hellen Thema einen dunklen (R68, WCAG 2.4.13). */

/* Zwei weitere Bauteile der Hausschale unter dem Lesbarkeitsboden, hier wie die
   uebrigen gehoben (siehe BEFUND-schriftboden.md bei der Quelle). */
.statusline{font-size:14px}
.prov{font-size:14px; padding:3px 9px}
.prov::before{width:6px; height:6px}

/* Rueckweg und Dokumentverweis der Hausschale: zu blass, zu klein, ohne
   erkennbaren Fokus. Alle drei am gerenderten Stand gemessen (R5, R28b, R68). */
.backlink{
  color:var(--ink-soft); font-size:15px; min-height:2.75rem;
  padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; background:none; border:0;
}
.backlink:hover{color:var(--ink)}
.backlink:focus-visible{outline:3px solid var(--accent-ink); outline-offset:2px; border-radius:var(--r-sm)}
:root[data-theme="light"] .backlink:focus-visible{outline-color:#3A4A00}
.doclink{min-height:2.75rem; padding:var(--sp-2) 0; font-size:15px}
.docrow .doclink{padding-inline:var(--sp-2)}

/* Der Fokusring des Lime-Knopfes muss gegen den KNOPF kontrastieren, nicht
   gegen die Leiste dahinter: ein heller Ring auf Lime hatte 1,36:1. Deshalb
   ein dunkler Ring direkt am Knopf und ein heller Schein nach aussen — so
   haelt der Indikator gegen beide angrenzenden Flaechen (R68). */

/* Der Text im Auswahlkaestchen behielt seine Wunschbreite und lief bei 360 px
   17 px aus dem Stapel. Im Flex-Kasten muss der Textteil schrumpfen duerfen. */
.wahl > span:not(.kasten){min-width:0; overflow-wrap:anywhere}
/* Der Zusatz am Abschnittskopf lief bei 360 px aus seiner Zeile. */
.section-label{flex-wrap:wrap}
.section-label .sl-hint{min-width:0; overflow-wrap:anywhere}

/* Zwoelf Bedienelemente verliessen sich auf den Standardring der Anzeigemaschine —
   dessen Staerke und Farbe sind nicht berechenbar, also auch nicht belegbar.
   Ein eigener Ring macht die Regel messbar (R68). */
.app :is(button, a[href], input, select, textarea, summary, [tabindex]):not(.btn-cta):not(.btn-lime):focus-visible{
  outline:3px solid var(--accent-ink); outline-offset:2px; border-radius:8px;
}
:root[data-theme="light"] .app :is(button, a[href], input, select, textarea, summary, [tabindex]):not(.btn-cta):not(.btn-lime):focus-visible{
  outline-color:#3A4A00;
}

/* Der Ring liegt bei negativem Versatz AUF dem Lime-Knopf — er muss also gegen
   Lime kontrastieren, nicht gegen die Leiste dahinter. Ein heller Ring hatte
   dort 1,36:1. Die Selektoren sind bewusst spezifischer als die der Hausschale,
   damit kein Zweifel bleibt, welche Regel gilt. Sie steht bewusst NACH dem
   allgemeinen Ring: beide haben dieselbe Spezifitaet, es entscheidet die
   Reihenfolge (R68). */
.app .rail-cta:focus-visible,
.app .btn-cta:focus-visible,
.app .btn-lime:focus-visible{
  outline:3px solid var(--on-lime); outline-offset:-3px;
  border-radius:var(--r-knopf-gross); box-shadow:none;
}

/* Ein Bereich, der waagerecht rollt, ist in der Anzeigemaschine fokussierbar,
   ohne ein Attribut dafuer zu tragen — er fiel deshalb aus dem allgemeinen Ring
   und verliess sich auf den Standardring, dessen Farbe nicht berechenbar ist. */
.app .unitwrap:focus-visible,
.app .doc-scroll:focus-visible{
  outline:3px solid var(--accent-ink); outline-offset:2px; border-radius:var(--r-sm);
}
:root[data-theme="light"] .app .unitwrap:focus-visible{ outline-color:#3A4A00; }

/* Text nur fuer die Sprachausgabe. Die Hausschale kennt diese Klasse nicht —
   ohne Definition stand die Beschriftung sichtbar neben dem Suchfeld. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Die Zeile "keine gesonderte Auflage" haelt den Feldsatz gleich (R77), soll
   aber nicht so laut sein wie eine echte Auflage. */
.gewerk p.auflagenzeile{color:var(--ink-soft)}

/* Der Symbolsatz der Hausschale hat keinen Pfeil nach links; der Rueckweg
   drehte deshalb den Winkel nach rechts und zeigte in die falsche Richtung. */
.backlink svg.i{transform:rotate(180deg)}

/* ============================================================
   ERGAENZUNG 20.08.2026 — Tabellensicht, Rechtsseiten, Druck.
   Weiterhin ohne eigene Farb-, Abstands- oder Radius-Werte: alles aus der
   Hausschale (R30).
   ============================================================ */

/* --- Umschalter Karten/Tabelle. Zwei Schaltflaechen als eine Gruppe, damit
   sichtbar ist, dass sie einander ausschliessen. */
.ansichtwahl{ display:flex; gap:var(--sp-1); }
.ansichtwahl button{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:2.75rem; padding:0 var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink-soft);
  font:inherit; font-size:15px; white-space:nowrap; cursor:pointer;
}
.ansichtwahl button:hover{ border-color:var(--line-strong); color:var(--ink); }
.ansichtwahl button.on{
  background:var(--rail-active); border-color:var(--accent-ink); color:var(--ink);
}
.ansichtwahl button[aria-pressed="true"]{ font-weight:600; }

.druckknopf{ white-space:nowrap; }

/* --- Sortierbare Tabellenkoepfe. Der Kopf traegt aria-sort, der Knopf traegt
   die Bedienung: eine Zelle mit Klick-Handler waere kein Bedienelement (R27). */
.losetabelle th{ padding:0; }
.losetabelle th.num{ text-align:right; }
.sortknopf{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  width:100%; min-height:2.75rem; padding:var(--sp-2) var(--sp-3);
  background:none; border:0; color:inherit; font:inherit; font-weight:inherit;
  text-align:inherit; cursor:pointer;
}
.losetabelle th.num .sortknopf{ justify-content:flex-end; }
.sortknopf:hover{ color:var(--ink); }
.sortknopf.on{ color:var(--accent-ink); }
.sortzeichen{ font-size:14px; opacity:.75; }
.losetabelle td{ vertical-align:top; }
.losetabelle .ohnewert{ color:var(--ink-soft); font-style:normal; }
.losetabelle .merkknopf{ white-space:nowrap; }

/* --- Rechtsseiten: Beschriftung und Wert in zwei Spalten, ab 640 px. */
.rechtzeile{
  display:grid; gap:var(--sp-1);
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line);
}
.rechtzeile:last-child{ border-bottom:0; }
.rechtlabel{ color:var(--ink-soft); font-size:14px; }
.rechtwert{ color:var(--ink); font-size:16px; }
@media (min-width:40rem){
  .rechtzeile{ grid-template-columns:16rem 1fr; gap:var(--sp-4); align-items:baseline; }
}

/* --- Fusszeile: gleiche Verweise, gleiche Stelle, jede Ansicht (R70). */
.portalfuss{
  margin-top:var(--sp-8); padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.fusszeilen{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-3); }
.fusszeilen a{
  display:inline-flex; align-items:center;
  min-height:2.75rem; color:var(--ink-soft); font-size:15px; text-decoration:none;
  border-bottom:1px solid transparent;
}
.fusszeilen a:hover{ color:var(--ink); border-bottom-color:var(--accent-ink); }

/* Der Druckkopf steht nur auf dem Papier: am Schirm traegt die Kopfleiste
   dieselbe Auskunft, und zweimal dasselbe ist eine Dopplung, keine Hilfe. */
.druckkopf{ display:none; }

/* ============================================================
   DRUCK (R51) — was auf Papier gehoert und was nicht.
   Das Blatt ist die Ausschreibungsuebersicht: Kopf, Lose, Belege. Ohne
   Navigation, ohne Schaltflaechen, ohne dunkle Flaeche (schluckt Toner und
   macht den Text auf Papier unlesbar).
   ============================================================ */
@media print{
  :root, [data-theme="dark"], [data-theme="light"]{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF;
    --ink:#000000; --ink-soft:#333333; --ink-faint:#555555;
    --line:#BBBBBB; --line-strong:#888888; --accent-ink:#000000;
    --shadow:none;
  }
  .rail, .topbar, .nav-back, .rail-cta, .btn-cta,
  .filterbar, .ansichtwahl, .druckknopf, .merkknopf,
  .kartenfuss, .portalfuss{ display:none !important; }

  .app{ display:block; }
  .main{ margin:0; }
  .content{ padding:0; }
  body{ background:var(--bg); color:var(--ink); }

  .druckkopf{
    display:block; margin-bottom:var(--sp-5);
    padding-bottom:var(--sp-3); border-bottom:2px solid #000000;
    font-size:12pt; line-height:1.45;
  }

  .card, .gewerk, .unitwrap{
    box-shadow:none; border:1px solid var(--line);
    /* Eine Karte, die der Seitenwechsel in der Mitte trennt, ist auf dem
       Papier zweimal halb da (R51). */
    break-inside:avoid; page-break-inside:avoid;
  }
  table{ break-inside:auto; }
  tr{ break-inside:avoid; page-break-inside:avoid; }
  thead{ display:table-header-group; }
  .section-label{ break-after:avoid; page-break-after:avoid; }

  a[href^="#"]{ text-decoration:none; color:var(--ink); }
  /* Ein Verweis auf Papier ohne sein Ziel ist ein toter Hinweis — ausser er
     zeigt ohnehin nur in dieses Dokument. */
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }

  @page{ margin:18mm 14mm; }
}

/* --- Sortierzeichen. Ein gedrehtes Symbol statt eines zweiten Pfeils: die
   Hausschale fuehrt kein "chevdown", und eine zweite Zeichnung waere eine
   zweite Definition desselben Bauteils (R29). */
.sortzeichen{ display:inline-flex; opacity:.45; transition:transform .15s ease; }
.sortzeichen.an{ opacity:1; }
.sortzeichen.ab{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .sortzeichen{ transition-duration:.01ms; } }

/* --- Geruest waehrend des Ladens: gleiche Zeilenhoehe wie das Ergebnis,
   damit beim Eintreffen nichts springt (R48). */
.geruestbalken{
  display:block; height:1rem; width:100%; border-radius:var(--r-sm);
  background:var(--surface-3);
  animation:geruestpuls 1.4s ease-in-out infinite;
}
@keyframes geruestpuls{ 0%,100%{opacity:.55} 50%{opacity:.95} }
@media (prefers-reduced-motion:reduce){ .geruestbalken{ animation-duration:.01ms; } }

/* --- Gefahrenknopf: eigene Form UND eigenes Wort, nicht nur eigene Farbe
   (R28d). Die Beschriftung sagt "Endgültig", die Rueckfrage sagt den Rest. */
.btn-gefahr{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:2.75rem; padding:0 var(--sp-4);
  border:1px solid var(--bad); border-radius:var(--r-knopf);
  background:var(--bad-bg); color:var(--bad);
  font:inherit; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer;
}
.btn-gefahr:hover{ background:var(--bad); color:var(--surface); }

/* --- Rueckfrage. Der Hintergrund bleibt dunkel, die Karte nimmt Token —
   eine weisse Karte im dunklen Modus waere ein Verstoss gegen R11. */
.modalhuelle{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4); background:rgba(0,0,0,.6);
}
.modalhuelle[hidden]{ display:none; }
.modalkarte{
  width:min(34rem,100%); padding:var(--sp-5);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); color:var(--ink);
}
.modalkarte h3{ margin:0 0 var(--sp-3); font-family:var(--disp); font-size:20px; }
.modalkarte p{ margin:0 0 var(--sp-5); color:var(--ink-soft); font-size:16px; line-height:1.55; }

/* --- Knopfreihe je Vorgang. Bei schmalem Schirm untereinander statt
   gequetscht (R7). */
.vorgangknoepfe{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.vorgangknoepfe > *{ flex:0 0 auto; }

/* Ein zurueckgezogener Vorgang bleibt lesbar — abgeblendet, nicht versteckt.
   Das Wort steht als Chip daneben, die Abblendung allein waere Farbe als
   einzige Information (R28d). */
.zurueckgezogen td{ opacity:.62; }

/* --- Der Tabellenrahmen der Hausschale traegt einen Rand, aber keine Flaeche.
   Die Zeilen stehen damit auf dem Seitengrund (#F1F2EC im hellen Thema), nicht
   auf dem Kartengrund (#FFFFFF). Gemessen am 20.08.2026: die Herkunfts-Marke
   "gemessen" kommt dort auf 4,42:1 statt der geforderten 4,5:1 — in der KARTE
   haelt dieselbe Marke, weil die Karte eine Flaeche hat. Der Rahmen bekommt
   deshalb den Kartengrund; damit steht jede Marke und jeder Chip in der Tabelle
   auf demselben Untergrund wie ueberall sonst (R5). Der Befund liegt bei der
   Quelle der Hausschale: BEFUND-tabellengrund.md. */
.losetabelle{ background:var(--surface); }

/* --- Trefferflaeche in der Tabelle. Die Losnummer ist ein Verweis auf das
   Los-Detail; als blosser Text in einer Zelle mass sie 18x17 px — unter jeder
   Untergrenze und mit dem Finger nicht sicher zu treffen (R28b). */
.losetabelle td a{
  display:inline-flex; align-items:center; justify-content:inherit;
  min-height:2.75rem; min-width:2.75rem; padding:0 var(--sp-2);
}
.losetabelle td.num a{ justify-content:flex-end; }
.sortwort{ white-space:nowrap; }
.einwilligungshinweis{ margin-top:var(--sp-3); }

/* --- Ein Verweis im Fliesstext ist so hoch wie seine Zeile — 17 px, unter der
   Untergrenze fuer eine Trefferflaeche (R28b). Die Zeilenhoehe des Absatzes
   traegt den Zuwachs, ohne den Textfluss zu stoeren. */
.einwilligungshinweis a{
  display:inline-block; min-height:1.5rem; padding-block:var(--sp-1);
}

/* ============================================================
   KORREKTUREN 20.08.2026 nach Sichtprüfung des Operators.
   Jede Stelle unten ist gemessen, nicht vermutet.
   ============================================================ */

/* --- 1. KARTENPAARE STANDEN UNTEN BÜNDIG STATT OBEN.
   Ursache: `#view .card + .card{margin-block-start:var(--rhythmus)}` in der
   Hausschale. Die Regel meint gestapelte Karten und greift auch dort, wo zwei
   Karten NEBENeinander im Raster stehen: die zweite bekam 44 px Vorlauf, das
   Raster streckte die erste entsprechend, beide endeten auf derselben
   Unterkante und begannen versetzt. Gemessen an "Stand des Verfahrens" (oben
   2130, hoch 276) und "Beteiligte" (oben 2174, hoch 232).
   Im Raster gibt es keinen Vorgänger ÜBER einem Element — nur daneben. */
#view .two-col > .card + .card,
#view .kachelgruppe > .card + .card,
#view .gewerkraster > .card + .card{ margin-block-start:0; }

/* --- 2. WOHNUNGSSPIEGEL WURDE MITTEN IN EINER ZEILE ABGESCHNITTEN.
   `.unitwrap` deckelt auf 430 px Höhe und rollt senkrecht. Bei 18 Zeilen
   endete die Sicht in einer halben Zeile — das liest sich als Defekt, nicht
   als Rollbereich. Diese Tabellen sind überschaubar und stehen ganz da; der
   waagerechte Rollweg aus der Hausschale bleibt unberührt. */
.volltabelle{ max-height:none; }

/* --- 3. "TERRASSE 6,92 M²" BRACH ZWISCHEN ZAHL UND EINHEIT UM.
   Die Einheit landete in der nächsten Zeile und sah aus wie ein eigener Wert
   in einer eigenen Spalte. Maßangaben halten zusammen (R73/R74). */
.masszelle{ white-space:nowrap; }

/* --- 4. "LOS ANSEHEN" WAR 39 PX HOCH, "VORMERKEN" 44.
   Zwei Schaltflächen derselben Reihe mit unterschiedlicher Höhe wirken wie
   ein Fehler, und die kleinere lag unter der Trefferfläche (R28b).
   Eine Höhe für die ganze Reihe — und gleiche Form. */
.gewerk .kartenfuss > .btn-ghost,
.gewerk .kartenfuss > .merkknopf{
  min-height:2.75rem; padding-block:0;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  border-radius:var(--r-knopf);
}

/* --- 5. DER KOPFZEILEN-KNOPF "BEWERBEN" WAR 35 PX HOCH.
   Der gleiche Knopf in der Navigation misst 44. Zwei Ausprägungen desselben
   Bauteils mit verschiedenen Werten sind ein Befund (R29), und 35 px liegen
   unter dem Hausmass für Trefferflächen (R28b). */
.topbar .btn-cta{
  min-height:2.75rem; padding-inline:var(--sp-4);
  display:inline-flex; align-items:center; gap:var(--sp-2);
}
.topbar .btn-cta svg{ flex:0 0 auto; }

/* --- 6. BENUTZERBEREICH: aus drei Textzeilen wird ein Bedienelement.
   Vorher stand dort "SSR GmbH / Generalunternehmer · Vergabe 2027" über drei
   Zeilen und war nicht anklickbar. Jetzt ein Knopf mit Menü nach oben. */
.nutzerknopf{
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; min-height:3.25rem; padding:var(--sp-2) var(--sp-3);
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--rail-ink); font:inherit; text-align:left; cursor:pointer;
}
.nutzerknopf:hover{ background:var(--rail-panel); border-color:var(--rail-line); }
.nutzerknopf[aria-expanded="true"]{ background:var(--rail-panel); border-color:var(--rail-line); }
.nutzerknopf .nutzertext{ min-width:0; flex:1 1 auto; }
.nutzerknopf .nutzername{
  display:block; font-size:15px; font-weight:700; color:var(--rail-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nutzerknopf .nutzerrolle{
  display:block; font-size:14px; color:var(--rail-ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nutzerknopf .nutzerpfeil{ flex:0 0 auto; transition:transform .15s ease; }
.nutzerknopf[aria-expanded="true"] .nutzerpfeil{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .nutzerknopf .nutzerpfeil{ transition-duration:.01ms; } }

/* Das Menü liegt in der OBERSTEN EBENE, nicht im Navigationsstreifen: der
   rollt senkrecht und würde es abschneiden (R78). Deshalb `popover` statt
   eines Kindes mit hohem Stapelwert. */
.nutzermenue{
  position:fixed; margin:0; inset:auto;
  min-width:15rem; max-width:min(22rem,calc(100vw - 2rem));
  padding:var(--sp-2); border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
}
.nutzermenue:not(:popover-open):not(.offen){ display:none; }
.nutzermenue .menuekopf{
  padding:var(--sp-2) var(--sp-3) var(--sp-3);
  border-bottom:1px solid var(--line); margin-bottom:var(--sp-2);
}
.nutzermenue .menuekopf b{ display:block; font-size:15px; }
.nutzermenue .menuekopf span{ display:block; font-size:14px; color:var(--ink-soft); }
.menueeintrag{
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; min-height:2.75rem; padding:0 var(--sp-3);
  background:transparent; border:0; border-radius:var(--r-sm);
  color:var(--ink); font:inherit; font-size:15px; text-align:left;
  text-decoration:none; cursor:pointer;
}
.menueeintrag:hover{ background:var(--surface-2); }
.menueeintrag[aria-disabled="true"]{ color:var(--ink-faint); cursor:default; }
.menueeintrag[aria-disabled="true"]:hover{ background:transparent; }
.menueeintrag .menuenote{ display:block; font-size:14px; color:var(--ink-faint); }
.menuetrenner{ height:1px; margin:var(--sp-2) 0; background:var(--line); border:0; }

/* Auf schmalem Schirm traegt der Benutzerknopf nur den Namen. Zwei gestapelte
   Textzeilen in einer Schaltflaeche sind dort eine Zeile zu viel (R12) — und
   die Rolle steht ohnehin im Kopf des Menues, das sich darueber oeffnet. */
@media (max-width:40rem){
  .nutzerknopf .nutzerrolle{ display:none; }
  .nutzerknopf{ min-height:2.75rem; }
}

/* --- Wartungsweg in der Anmeldung: zugeklappt, aber auffindbar. */
.wartungsweg{ margin-top:var(--sp-5); border-top:1px solid var(--line); padding-top:var(--sp-4); }
.wartungsweg summary{
  display:flex; align-items:center; min-height:2.75rem;
  color:var(--ink-soft); font-size:15px; cursor:pointer;
}
.wartungsweg summary:hover{ color:var(--ink); }
.wartungsweg p{ margin:var(--sp-2) 0 var(--sp-3); }

/* Wer angemeldet ist, steht in der Leiste — mit Wort und Zeichen, nicht nur
   mit Farbe (R28d). */
.angemeldet{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:2.75rem; padding:0 var(--sp-3);
  color:var(--ink-soft); font-size:15px; white-space:nowrap;
}

/* ================================================================
   ZUGANG UND RECHTE (ab 20.08.2026)
   Bauteile fuer die Anmeldung des Anbieters, den Zugangs-Streifen und die
   Rechtemaske der Verwaltung. Ausschliesslich Token der Hausschale — kein
   eigener Farbwert, kein eigener Abstand (R30, R14).
   ================================================================ */

/* Frist und Kontingent stehen ueber dem Inhalt, nicht in einem Menue. */
.zugangsstreifen{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.zugang-skelett{ margin-bottom:var(--sp-2); }
.zugang-skelett.kurz{ width:60%; }

/* Die Rechtemaske: zwei Spalten Haken, darunter Frist und Kontingent.
   Auf schmalem Schirm gestapelt statt gequetscht (R7). */
.rechteblock{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media(min-width:64rem){ .rechteblock{ grid-template-columns:repeat(2,1fr); } }
.rechtegruppe{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-4); background:var(--surface);
}
.rechtegruppe h4{ font-size:16px; margin-bottom:var(--sp-2); }
.rechtegruppe .quelle{ margin-bottom:var(--sp-3); }
.hakenstapel{ display:grid; gap:var(--sp-2); }
.grenzraster{ display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media(min-width:48rem){ .grenzraster{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:80rem){ .grenzraster{ grid-template-columns:repeat(4,1fr); } }

/* Die Kontenliste. Eine Zeile je Person, die wichtigsten Werte als Chips —
   die Tiefe steht im Detail darunter, nicht in einer breiteren Tabelle. */
.kontenliste{ display:grid; gap:var(--sp-3); }
.kontokarte{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-4); background:var(--surface);
}
.kontokopf{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--sp-2) var(--sp-3);
}
.kontoname{ font-weight:700; font-size:16px; color:var(--ink); }
.kontoadresse{ color:var(--ink-soft); font-size:15px; overflow-wrap:anywhere; }
.kontomarken{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }
.kontoknoepfe{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.kontodetail{ margin-top:var(--sp-4); border-top:1px solid var(--line); padding-top:var(--sp-4); }

/* Der Einladungsweg zum Weitergeben: er muss vollstaendig lesbar sein, auch
   wenn er lang ist — ein halber Weg ist keiner. */
.einladungsweg{
  display:block; margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px;
  overflow-wrap:anywhere;
}
.zugriffsliste{ display:grid; gap:var(--sp-2); margin-top:var(--sp-3); }
.zugriffszeile{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3);
  align-items:center; font-size:15px; color:var(--ink-soft);
}
.zugriffszeit{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Eine Einfachauswahl darf nicht wie eine Mehrfachauswahl aussehen. Das
   Kaestchen der Hausschale wird fuer Rundknoepfe rund — dieselbe Groesse,
   derselbe Fokusring, nur die Form sagt "genau eines". */
.wahl input[type="radio"] + .kasten{ border-radius:50%; }
.wahl input[type="radio"] + .kasten::after{ border-radius:50%; }

/* ===================================================================
   TORSTELLUNG — die Anmeldung ist kein Arbeitsplatz
   ===================================================================
   Bis zum 24.08.2026 lag die Anmeldemaske IN der vollen Arbeitsschale:
   links eine Navigationsleiste, die ohne Anmeldung leer ist, oben eine
   Kopfzeile, unten ein Nutzerbereich mit "?" als Kuerzel fuer niemanden.
   Vier Bauteile, die dieselbe Aussage viermal wiederholten, und eine
   leere Spalte ueber die ganze Hoehe. Der Operator dazu am 24.08.2026:
   nicht kundentauglich.

   Die Schale wird deshalb NICHT ersetzt — sie bekommt einen Zustand.
   Dieselben Token, dieselben Bauteile, dieselbe Herkunft; nur die Teile,
   die einen ARBEITSPLATZ zeigen, treten zurueck, solange niemand
   angemeldet ist. Das Logo bleibt das Element der Schale, damit die
   Umschaltung hell/dunkel weiter aus einer Hand kommt. */
/* Alles, was einen Arbeitsplatz zeigt, tritt zurueck: die Leiste selbst,
   ihr Umschalter, ihre Gruppen, ihre Eintraege, der Nutzerbereich und die
   Kopfzeile. Sie sind fuer einen Nichtangemeldeten ohne Aussage. */
body.tor .logo:hover{opacity:1}
/* Der Fuss traegt hier keine Arbeitsangaben mehr, nur die Pflichtangaben —
   deshalb darf er dichter an die Karte ruecken als im Arbeitsplatz. */
body.tor .portalfuss{margin-top:26px}
/* Der Hinweis unter dem Knopf ist eine Nebenaussage und braucht Luft zur
   Handlung darueber — sonst liest er sich wie ein Teil des Knopfes. */
body.tor .kartenkoerper .quelle{margin-top:16px}
/* Restzeilen: ein Absatz, dessen letzte Zeile aus einem Wort besteht, liest
   sich abgerissen. Der Browser darf den Umbruch dafuer ausgleichen — das
   kostet nichts und wirkt auf jede Breite. */
body.tor .kartenkoerper p{text-wrap:pretty}

/* ZWEI LOGOFASSUNGEN STATT EINEM QUELLENTAUSCH
   Das Umschalten hell/dunkel tauschte bis zum 24.08.2026 das src-Attribut des
   Logos. Waehrend das neue Bild laedt, meldet es naturalHeight 0 und hat damit
   keine Eigenmasse: die Leiste fiel von 138 auf 104 px, gemessen an der
   Live-Adresse als Bildsprung 0,115 bei einer Grenze von 0,100. Beide
   Fassungen stehen jetzt im Dokument; umgeschaltet wird nur die Sichtbarkeit,
   und geladen ist dann schon alles. Die zweite Fassung traegt kein alt und ist
   fuer die Sprachausgabe verborgen — sonst stuende die Marke zweimal.
   Voreinstellung ist die dunkle Fassung, weil das Dokument mit data-theme=dark
   ausgeliefert wird. */

/* GEOMETRIE DER TORSTELLUNG — sie stand am 24.08.2026 kurzzeitig als
   <style> im Kopf der Dokumente, damit sie den ersten Bildaufbau bestimmt.
   Das war wirkungslos: die Sicherheitsrichtlinie des Dienstes erlaubt kein
   Inline-CSS (style-src 'self', kein unsafe-inline). Der Block blieb im
   Dokument stehen, bekam aber kein Stylesheet — die Torstellung fiel damit
   ganz aus, und der Bildsprung sank auf 0,001, WEIL nichts mehr umsprang.
   Ein Messwert, der sich verbessert, weil die Funktion ausfaellt, ist kein
   Fortschritt. Die Richtlinie bleibt, die Regeln stehen deshalb hier. */
body.tor .app{display:block}
body.tor .rail{
  position:static; height:auto; width:auto; overflow:visible;
  background:transparent; padding:38px 22px 6px;
  flex-direction:row; justify-content:center;
  /* Unter 1000 px steht die Leiste der Hausschale auf translateX(-100%) und
     wird per Knopf eingefahren. In der Torstellung gibt es diesen Knopf
     nicht — ohne diese Zeilen laege das Logo ausserhalb des Bildes. */
  transform:none; box-shadow:none; z-index:auto; transition:none;
}
body.tor .rail-ctl,
body.tor .rail-label,
body.tor .rail-foot,
body.tor .logo-cap,
body.tor .nav-item,
body.tor .topbar,
body.tor .nav-back,
body.tor .tb-burger,
/* Der Bewerben-Knopf in der Leiste fehlte in dieser Liste. Er wurde nur von
   navFreigeben() per JS versteckt — bis dahin stand er im Bild und machte die
   Leiste 34 px hoeher. Genau dieser Unterschied war der Bildsprung: der reine
   CSS-Zustand (138 px) und der Zustand nach dem Skript (104 px) waren nicht
   derselbe. Was das Skript ohnehin verbirgt, muss das Stylesheet schon
   verbergen — sonst zahlt jeder Aufruf den Sprung. */
body.tor #railCta,
body.tor .btn-cta{display:none}
body.tor .logo{padding:0;cursor:default}
body.tor .logo-img{height:34px}
body.tor .content{max-width:26rem;padding:26px 22px 64px}
@media (min-width:720px){
  body.tor .rail{padding-top:64px}
  body.tor .content{padding-top:30px}
}

/* Zwei Logofassungen statt eines Quellentauschs: beim Tausch des src laedt das
   neue Bild nach und hat waehrenddessen keine Eigenmasse. Beide stehen im
   Dokument, umgeschaltet wird nur die Sichtbarkeit. */
.logo-hell{display:none}
:root[data-logo="hell"] .logo-dunkel{display:none}
:root[data-logo="hell"] .logo-hell{display:block}