/* Kickbase-Berater - ein Stylesheet, mobil zuerst (360-430 px), ab 64rem
   breiter. Farben aus docs/design/README.md. Kein Build, kein Framework,
   keine externen Schriften. Grundregel: nie horizontal scrollen. */

:root {
  color-scheme: dark;
  --bg: #0E1014;
  --karte: #181B22;
  --karte-tief: #12151B;
  --rand: #262A33;
  --nav: #12151B;
  --text: #F2F3F5;
  --text-2: #D1D5DB;
  --gedimmt: #9CA3AF;
  --leise: #6B7280;
  --akzent: #FF6A3D;
  --link: #FF8A5C;
  --sicher: #4C8DFF;
  --erwartet: #3CCB7F;
  --unsicher: #F5A524;
  --unwahrscheinlich: #FF6B6B;
  --aus: #9CA3AF;
  --steigend: #3CCB7F;
  --fallend: #FF6B6B;
  --rot-bg: #2A1517;
  --rot-text: #FF8A8A;
  --rot-leise: #FFB4B4;
  --gruen-bg: #14261E;
  --gruen-rand: #22463A;
  --gruen-text: #7BE3AE;
  --gruen-leise: #A7C9BA;
  --blau-bg: #1B2233;
  --blau-rand: #2A3550;
  --blau-text: #9DB4E6;
  --gelb-bg: #2A2312;
  --gelb-rand: #4A3B17;
  --gelb-text: #F5C46B;
  --orange-bg: #3A2217;
  --orange-text: #FFB08F;
  --radius-karte: 16px;
  --radius-gross: 20px;
  --radius-knopf: 12px;
  --tippziel: 44px;
  --navhoehe: 64px;
  --zahl: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--navhoehe) + env(safe-area-inset-bottom) + 24px);
  overflow-wrap: break-word;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: #FFB08F; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 8px;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
img, svg { max-width: 100%; }
button { font: inherit; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
main > * { min-width: 0; }

/* --- Kopf je Seite --------------------------------------------------------- */

.seitenkopf {
  padding: 20px 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.seitenkopf > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oberzeile {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedimmt);
}
.seitenkopf h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.seitenkopf .rechts { font-size: 13px; color: var(--gedimmt); text-align: right; flex-shrink: 0; }

.zurueck-kopf { padding-top: 16px; display: flex; align-items: center; gap: 12px; }
.zurueck-kopf h1 { font-size: 26px; }

.rundknopf {
  width: var(--tippziel); height: var(--tippziel); border-radius: 22px;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rundknopf svg { width: 20px; height: 20px; }

.statuszeile { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gedimmt); flex-wrap: wrap; }
.punkt { width: 8px; height: 8px; border-radius: 4px; background: var(--erwartet); flex-shrink: 0; }
.punkt.alt { background: var(--unsicher); }
.punkt.fehlt { background: var(--fallend); }

h2.abschnitt { margin: 14px 0 0; font-size: 20px; font-weight: 700; }
h2.abschnitt-klein {
  margin: 8px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gedimmt);
}

/* --- Karten ----------------------------------------------------------------- */

.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius-karte);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.karte.gross { border-radius: var(--radius-gross); padding: 18px; gap: 12px; }
a.karte { color: var(--text); }
a.karte:hover { border-color: #3A3F4B; color: var(--text); }
.karte.blau { background: var(--blau-bg); border-color: var(--blau-rand); }
.karte.gruen { background: var(--gruen-bg); border-color: var(--gruen-rand); }
.karte.rot { background: var(--rot-bg); border-color: #4A2224; }
.karte.gelb { background: var(--gelb-bg); border-color: var(--gelb-rand); }
.karte.hinweis { background: var(--karte-tief); border-style: dashed; color: var(--gedimmt); font-size: 14px; }

.zeile-zwischen { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.zeile-zwischen > * { min-width: 0; }
.klein { font-size: 12px; }
.gedimmt { color: var(--gedimmt); }
.leise { color: var(--leise); }
.fett { font-weight: 600; }
.link-text { font-size: 12px; font-weight: 600; color: var(--link); white-space: nowrap; }
.erklaerung { font-size: 12px; color: var(--gedimmt); line-height: 1.45; }

.zahl-gross { font-family: var(--zahl); font-size: 32px; font-weight: 700; line-height: 1; }
.zahl { font-family: var(--zahl); font-weight: 700; font-variant-numeric: tabular-nums; }

.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.kachel {
  padding: 10px; border-radius: 12px; background: var(--karte); border: 1px solid var(--rand);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kachel .beschriftung { font-size: 11px; color: var(--gedimmt); }
.kachel .zahl { font-size: clamp(14px, 4.2vw, 17px); white-space: nowrap; }
.kachel.rot { background: var(--rot-bg); border-color: transparent; }
.kachel.rot .beschriftung { color: var(--rot-leise); }
.kachel.rot .zahl { color: var(--rot-text); }
.kachel.gruen { background: var(--gruen-bg); border-color: transparent; }
.kachel.gruen .beschriftung { color: var(--gruen-leise); }
.kachel.gruen .zahl { color: var(--gruen-text); }
.kachel.neutral { background: var(--karte-tief); border-color: transparent; }

.warnung {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  background: var(--rot-bg); color: var(--rot-leise); font-size: 13px; line-height: 1.4;
}
.warnung.gelb { background: var(--gelb-bg); color: var(--gelb-text); }

/* Countdown-Kästchen „6T 8h 45m“ */
.countdown { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.countdown span {
  padding: 6px 8px; border-radius: 8px; background: var(--bg);
  font-family: var(--zahl); font-weight: 700; font-size: 15px;
}

/* --- Spielerkarten ----------------------------------------------------------- */

.liste { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.spieler {
  padding: 10px 12px; border-radius: var(--radius-karte); background: var(--karte);
  border: 1px solid var(--rand); display: flex; flex-direction: column; gap: 10px;
  color: var(--text); min-width: 0;
}
a.spieler:hover { border-color: #3A3F4B; color: var(--text); }
.spieler.mein-gebot { border-color: #7A3A22; }
.spieler-kopf { display: flex; gap: 12px; align-items: center; min-width: 0; }
.spieler-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.spieler-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.spieler-name strong {
  font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.spieler-unter { font-size: 12px; color: var(--gedimmt); line-height: 1.35; }
.spieler-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; text-align: right; }
.spieler-rechts .zahl { font-size: 15px; }
.trendwert { font-size: 12px; font-weight: 600; white-space: nowrap; }
.steigend { color: var(--steigend); }
.fallend { color: var(--fallend); }
.gleich { color: var(--gedimmt); }
.sparkline { flex-shrink: 0; }

/* Avatar: Foto oder Trikot in Vereinsfarbe mit Initialen */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avatar svg { width: 62%; height: 62%; }
.avatar .initialen {
  position: absolute; bottom: 22%; font-size: 9px; font-weight: 800; letter-spacing: 0.02em;
}
.avatar.gross { width: 88px; height: 88px; border: 3px solid var(--rand); }
.avatar.gross .initialen { font-size: 14px; }
.avatar .logo {
  position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); padding: 2px; object-fit: contain;
}

/* Startelf-Badge: Farbe UND Symbol, Text für Screenreader */
.startelf {
  width: 18px; height: 18px; border-radius: 9px; color: var(--bg); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;
}
.startelf-1 { background: var(--sicher); }
.startelf-2 { background: var(--erwartet); }
.startelf-3 { background: var(--unsicher); }
.startelf-4 { background: var(--unwahrscheinlich); }
.startelf-5 { background: var(--aus); }
.startelf-x { background: #4B5563; color: var(--text); }

.pille {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 100%;
}
.pille.mini { padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; }
.pille.rot { background: #3A1D1F; color: #FF9C9C; }
.pille.gruen { background: #173226; color: var(--gruen-text); }
.pille.gelb { background: #3A2E14; color: var(--gelb-text); }
.pille.blau { background: var(--blau-bg); color: var(--blau-text); }
.pille.orange { background: var(--orange-bg); color: var(--orange-text); }
.pille.grau { background: var(--rand); color: var(--text-2); }
.pillen { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }

/* --- Umschalter, Chips ------------------------------------------------------- */

.segment {
  padding: 4px; border-radius: 14px; background: var(--karte); border: 1px solid var(--rand);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
}
.segment a {
  min-height: 40px; border-radius: 10px; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; text-align: center;
}
.segment a[aria-current="page"], .segment a[aria-current="true"] { background: var(--akzent); color: var(--bg); }
.segment .anzahl { padding: 1px 6px; border-radius: 999px; background: var(--rand); font-size: 11px; }
.segment a[aria-current] .anzahl { background: #0E101433; }
.segment.klein { padding: 3px; border-radius: 10px; background: var(--bg); border: 0; }
.segment.klein a { min-height: 32px; font-size: 12px; border-radius: 8px; padding: 0 10px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.chips.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
.chip {
  min-height: 36px; padding: 0 10px; white-space: nowrap; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--karte-tief); color: var(--text-2); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; letter-spacing: 0.02em;
}
.chip:hover { color: var(--text); border-color: #3A3F4B; }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.rund { border-radius: 18px; padding: 0 12px; font-size: 13px; letter-spacing: 0; }
.chip.rund[aria-current="true"] { background: var(--akzent); border-color: var(--akzent); }

/* --- Heute ------------------------------------------------------------------- */

a.konto { text-decoration: none; }
.handeln-tag { flex-shrink: 0; }

/* --- Spielerdetail ------------------------------------------------------------ */

.detailkopf {
  margin: 0 -16px; padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 16px;
  border-bottom: 3px solid var(--akzent);
}
.detailkopf .rundknopf { background: #0E101499; border-color: transparent; }
.detailkopf-zeile { display: flex; gap: 16px; align-items: center; min-width: 0; }
.detailkopf-zeile > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detailkopf h1 { font-size: 30px; line-height: 1; }
.detailkopf .unter { font-size: 13px; color: #E5E7EB; }

.diagramm { width: 100%; height: auto; display: block; }
.achse { display: flex; justify-content: space-between; font-size: 11px; color: var(--gedimmt); }

.balken { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 96px; }
.balken div { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; min-width: 0; }
.balken span.saeule { width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--sicher); min-height: 2px; }
.balken span.saeule.minus { background: var(--fallend); }
.balken small { font-size: 10px; color: var(--gedimmt); }
.balken b { font-size: 10px; font-weight: 600; color: var(--text-2); }

.gegner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gegner > div {
  padding: 10px 6px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column;
  gap: 4px; align-items: center; text-align: center; min-width: 0;
}
.gegner .name { font-size: 13px; font-weight: 600; }

.tabelle-werte { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tabelle-werte > div { display: flex; justify-content: space-between; gap: 12px; }
.tabelle-werte dt { color: var(--gedimmt); }
.tabelle-werte dd { margin: 0; font-weight: 600; text-align: right; }

/* --- News ----------------------------------------------------------------------- */

.meldung { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
a.meldung:hover { color: var(--text); }
.meldung-symbol {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px; font-weight: 800; background: var(--blau-bg); color: var(--blau-text);
}
.meldung-symbol.verletzt { background: var(--rot-bg); color: #FF9C9C; }
.meldung-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.meldung-text .titel { font-size: 15px; font-weight: 600; line-height: 1.3; }
.meldung-text .inhalt { font-size: 13px; color: #B8BEC8; line-height: 1.45; }

/* --- Wochenplan -------------------------------------------------------------------- */

.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.woche > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.woche .wt { font-size: 11px; color: var(--gruen-leise); }
.woche .nr {
  width: 30px; height: 30px; border-radius: 15px; background: var(--bg); color: #E7F5EE;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.woche .wichtig .nr { background: var(--gruen-rand); }
.woche .heute .nr { background: var(--akzent); color: var(--bg); }
.woche .ev { font-size: 10px; color: #C9D1CD; text-align: center; line-height: 1.25; min-height: 26px; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; }

.planzeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.planzeile .name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planzeile .rolle { font-size: 12px; color: var(--gruen-leise); white-space: nowrap; }
.planzeile .betrag { min-width: 64px; text-align: right; font-family: var(--zahl); font-size: 14px; font-weight: 700; }
.planzeile .punkt { background: var(--erwartet); }
.planzeile .punkt.behalten { background: var(--sicher); }

/* --- Budget-Rechner ------------------------------------------------------------------ */

.schalterliste { padding: 0; gap: 0; }
.schalter {
  min-height: 52px; padding: 8px 14px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #22252D; cursor: pointer;
}
.schalter:last-child { border-bottom: 0; }
.schalter input { width: 20px; height: 20px; accent-color: var(--akzent); flex-shrink: 0; margin: 0; }
.schalter.verkauf input { accent-color: var(--erwartet); }
.schalter .name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.schalter .name span:first-child { font-size: 14px; font-weight: 600; }
.schalter .betrag { font-family: var(--zahl); font-size: 13px; font-weight: 700; white-space: nowrap; }
.schalter.unwirksam .betrag { text-decoration: line-through; opacity: 0.5; }

.knopf {
  min-height: var(--tippziel); padding: 0 18px; border-radius: var(--radius-knopf); border: 0;
  background: var(--akzent); color: var(--bg); font-weight: 700; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.knopf.zweit { background: var(--karte); color: var(--text); border: 1px solid var(--rand); }

/* --- Berichte -------------------------------------------------------------------------- */

.datumsliste { display: flex; gap: 8px; flex-wrap: wrap; }
.datumsliste a {
  min-width: 64px; min-height: 52px; border-radius: 14px; border: 1px solid var(--rand); background: var(--karte);
  color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 10px;
}
.datumsliste a span:first-child { font-size: 11px; color: var(--gedimmt); }
.datumsliste a span:last-child { font-size: 15px; font-weight: 700; }
.datumsliste a[aria-current="page"] { border-color: var(--akzent); background: #2A1C15; }
.datumsliste a[aria-current="page"] span:first-child { color: var(--orange-text); }

.bericht { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.bericht h2, .bericht h3, .bericht h4 { color: var(--text); font-size: 16px; margin: 18px 0 6px; }
.bericht h2:first-child, .bericht h3:first-child { margin-top: 0; }
.bericht p { margin: 0 0 10px; }
.bericht ul, .bericht ol { margin: 0 0 10px; padding-left: 20px; }
.bericht strong { color: var(--text); }
.bericht pre { white-space: pre-wrap; background: var(--bg); padding: 10px; border-radius: 10px; font-size: 12px; }
.bericht code { font-size: 12px; }
.bericht hr { border: 0; border-top: 1px solid var(--rand); margin: 14px 0; }
/* Tabellen im Bericht: auf dem Handy als gestapelte Zeilen statt Querscrollen */
.bericht .tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.bericht .tabelle th, .bericht .tabelle td { border-bottom: 1px solid var(--rand); padding: 6px 4px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }

/* --- Liga, Status ------------------------------------------------------------------------- */

.rang { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rang .platz {
  width: 32px; height: 32px; border-radius: 16px; background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-weight: 700; flex-shrink: 0;
}
.rang.ich { border-color: var(--akzent); }
.rang .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.statusliste { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.statusliste li { display: flex; gap: 8px; align-items: baseline; }
ul.statusliste { list-style: none; margin: 0; padding: 0; }

/* --- Login ---------------------------------------------------------------------------------- */

.login { margin-top: 12vh; }
.formular, .stapel { display: flex; flex-direction: column; gap: 14px; }
.stapel { gap: 10px; }
.formular label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.formular input[type=text], .formular input[type=password] {
  min-height: var(--tippziel); padding: 0 12px; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--bg); color: var(--text); font-size: 16px;
}
.fehler { color: var(--rot-text); }

/* --- Navigation ------------------------------------------------------------------------------ */

.marke { display: none; }
.hauptnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  min-height: calc(var(--navhoehe) + env(safe-area-inset-bottom));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--nav); border-top: 1px solid var(--rand);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.hauptnav a {
  color: var(--gedimmt); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 11px; min-height: var(--tippziel);
}
.hauptnav a svg { width: 22px; height: 22px; }
.hauptnav a[aria-current="page"] { color: var(--link); font-weight: 600; }
.kopfleiste, .kopfleiste-innen { display: contents; }

.fuss { margin: 24px 0 0; font-size: 12px; color: var(--leise); text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fuss form { margin: 0; }
.textknopf { background: none; border: 0; color: var(--gedimmt); font-size: 13px; text-decoration: underline; cursor: pointer; min-height: var(--tippziel); padding: 0 8px; }

/* --- Laptop ------------------------------------------------------------------------------------ */

@media (min-width: 64rem) {
  body { padding-bottom: 32px; }
  main { max-width: 1120px; padding: 0 32px; }
  .kopfleiste {
    display: block; position: sticky; top: 0; z-index: 10; background: var(--nav);
    border-bottom: 1px solid var(--rand);
  }
  .kopfleiste-innen {
    max-width: 1120px; margin: 0 auto; padding: 0 32px; min-height: 60px;
    display: flex; align-items: center; gap: 24px;
  }
  .marke { display: block; font-weight: 700; font-size: 17px; color: var(--text); margin-right: 8px; }
  .hauptnav {
    position: static; display: flex; gap: 4px; background: none; border: 0; padding: 0; min-height: 0;
  }
  .hauptnav a { flex-direction: row; font-size: 14px; padding: 0 12px; border-radius: 10px; gap: 8px; }
  .hauptnav a svg { width: 18px; height: 18px; }
  .hauptnav a[aria-current="page"] { background: var(--karte); }

  .breit-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .breit-2 > .spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .liste.raster-breit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .detailkopf { margin: 0; border-radius: var(--radius-gross); }
  .segment, .chips.raster { max-width: 560px; }
}

.nowrap { white-space: nowrap; }
.unbekannt { color: var(--gedimmt); font-weight: 400; }