@import url("/fonts/fonts.css");

/* jobscout – Design „klar" (Branch design-klar)
   Vorbild: hochwertige macOS-Software (Mail, Notizen, Things): Seitenleiste mit Material, Listen mit Haarlinien,
   Inspektor rechts, Systemschrift, Segment-Schalter, ruhige Flächen, ein Akzent.
   Wahrnehmungsgrammatik: Werkzeug (Meer) · neutrale Töne mit warmem/blauem Stich statt totem Grau · Cremeweiß statt Weiß.
   Usability: WCAG 2.1 AA, Touch ≥ 44 px (pointer: coarse), Fokus sichtbar, Hover nur mit Maus, reduced motion. */

/* ---------- Farben ---------- */
:root, :root[data-thema="hell"] {
  color-scheme: light;
  --fenster: #f6f5f2;                 /* Inhalt */
  --seite: rgb(236 234 228 / .86);     /* Seitenleiste (Material) */
  --seite-fest: #ecEAE4;
  --karte: #fffefc;                   /* Cremeweiß statt Weiß */
  --feld: #ffffff;
  --text: #1d1c1a;
  --text-2: #66625b;                  /* 5,9:1 */
  --text-3: #8b867e;
  --linie: rgb(40 34 22 / .11);
  --linie-stark: rgb(40 34 22 / .18);
  --tint: rgb(40 34 22 / .05);        /* neutrale Fläche (Chips, Hover) */
  --tint-2: rgb(40 34 22 / .08);
  --akzent: #1f6bd6;                  /* ruhiges Blau (Meer), 5,4:1 */
  --akzent-text: #ffffff;
  --akzent-flaeche: rgb(31 107 214 / .11);
  --gruen: #237a48;  --gruen-flaeche: rgb(35 122 72 / .11);
  --orange: #a35a08; --orange-flaeche: rgb(196 120 20 / .13);
  --rot: #b4382b;    --rot-flaeche: rgb(180 56 43 / .1);
  --schatten: 0 1px 2px rgb(40 30 10 / .05), 0 0 0 .5px rgb(40 30 10 / .04);
  --schatten-hoch: 0 10px 30px rgb(40 30 10 / .14), 0 0 0 .5px rgb(40 30 10 / .08);
  --brief: #fffefa;
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --fenster: #1c1d21;
  --seite: rgb(40 42 48 / .78);
  --seite-fest: #26282d;
  --karte: #24262b;
  --feld: #1a1b1f;
  --text: #f1f0ec;
  --text-2: #a9a8a3;                  /* 7:1 */
  --text-3: #85847f;
  --linie: rgb(255 255 255 / .08);
  --linie-stark: rgb(255 255 255 / .14);
  --tint: rgb(255 255 255 / .05);
  --tint-2: rgb(255 255 255 / .09);
  --akzent: #4c9aff;
  --akzent-text: #0b1526;
  --akzent-flaeche: rgb(76 154 255 / .16);
  --gruen: #5fcf8c;  --gruen-flaeche: rgb(95 207 140 / .13);
  --orange: #f0a64a; --orange-flaeche: rgb(240 166 74 / .14);
  --rot: #ff8577;    --rot-flaeche: rgb(255 133 119 / .13);
  --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 0 0 .5px rgb(255 255 255 / .05);
  --schatten-hoch: 0 12px 34px rgb(0 0 0 / .45), 0 0 0 .5px rgb(255 255 255 / .08);
  --brief: #fbfaf6;
}
:root {
  --schrift: -apple-system, BlinkMacSystemFont, "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  --r-s: 7px; --r: 10px; --r-l: 14px;
  --seite-breite: 244px;
  --klick: 32px;                       /* Maus; Touch -> 44 px */
}
@media (pointer: coarse) { :root { --klick: 44px; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fenster); color: var(--text);
  font: 400 16px/1.5 var(--schrift); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; letter-spacing: -.003em;
}
a { color: var(--akzent); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; } }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent); outline-offset: 2px; border-radius: var(--r-s); }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); }
.label { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.leer { color: var(--text-2); }
h1.ansicht { font: 700 30px/1.15 var(--schrift); letter-spacing: -.022em; margin: 4px 0 24px; }
h2 { font: 600 17px/1.3 var(--schrift); letter-spacing: -.01em; margin: 28px 0 12px; display: flex; align-items: center; gap: 8px; }
h3 { font: 600 16px/1.3 var(--schrift); }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--karte); padding: 8px 14px; border-radius: var(--r-s); box-shadow: var(--schatten-hoch); }
.sprung:focus { left: 8px; }
@media (prefers-reduced-motion: no-preference) { .zeile, .navi button, .knopf, .reiter button { transition: background-color .12s, box-shadow .12s, color .12s; } }

/* ---------- Fenster: Seitenleiste + Inhalt ---------- */
.rahmen { display: grid; grid-template-columns: var(--seite-breite) minmax(0, 1fr); min-height: 100vh; }
.seite {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  background: var(--seite-fest); border-right: .5px solid var(--linie-stark);
  padding: 18px 12px 14px; padding-left: max(12px, env(safe-area-inset-left));
}
@supports (backdrop-filter: blur(1px)) { .seite { background: var(--seite); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } }
.marke { display: flex; align-items: center; gap: 9px; padding: 0 8px 14px; }
/* Bildzeichen in Akzentfarbe (wie die Symbole der Seitenleiste), Wortmarke in derselben Systemschrift: eine Familie */
.marke .zeichen { width: 26px; height: 36px; color: var(--akzent); stroke: none; flex: none; margin-left: 0; }
.marke .wortmarke { display: flex; flex-direction: column; min-width: 0; }
.marke .name { font-size: 18px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.marke .unterzeile { font-size: 11.5px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.fuss-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.thema-knopf { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.thema-knopf svg { width: 16px; height: 16px; }
@media (hover: hover) { .thema-knopf:hover { background: var(--tint-2); color: var(--text); } }
:root[data-thema="hell"] .nur-dunkel, :root[data-thema="dunkel"] .nur-hell { display: none; }
.navi { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.navi .gruppe { font-size: 12px; font-weight: 600; color: var(--text-3); padding: 14px 10px 4px; }
.navi .gruppe:first-child { padding-top: 2px; }
.navi button {
  display: flex; align-items: center; gap: 10px; min-height: var(--klick); width: 100%; padding: 5px 10px;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--text); font-size: 14.5px; text-align: left; cursor: pointer;
}
.navi button svg { color: var(--akzent); opacity: .9; }
.navi button .text { flex: 1; }
.navi button[aria-current="page"] { background: var(--tint-2); font-weight: 600; }
@media (hover: hover) { .navi button:not([aria-current="page"]):hover { background: var(--tint); } }
.navi .n:empty { display: none; }
.navi .n { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.navi .n.wichtig { background: var(--akzent); color: var(--akzent-text); font-weight: 700; border-radius: 9px; padding: 1px 7px; min-width: 20px; text-align: center; }
.fuss { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-top: .5px solid var(--linie); }
.herz { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.herz i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.herz.an i { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-flaeche); }
.herz.aus i { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-flaeche); }
.wer { font-size: 12.5px; color: var(--text-3); }
.wer #wer { color: var(--text-2); }
.inhalt { padding: 30px 40px 56px; padding-right: max(40px, env(safe-area-inset-right)); min-width: 0; }
.inhalt:focus { outline: none; }

/* ---------- Karten ---------- */
.karte { background: var(--karte); border-radius: var(--r-l); box-shadow: var(--schatten); padding: 16px 18px 18px; margin-bottom: 20px; }
.karte > h2:first-child { margin-top: 0; }
.karte.breit { margin-top: 4px; }
.zaehler { font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--tint-2); border-radius: 9px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.uebersicht-raster { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.liste-kompakt .eintrag { padding: 10px 0; border-bottom: .5px solid var(--linie); display: grid; gap: 3px; }
.liste-kompakt .eintrag:last-child { border-bottom: 0; padding-bottom: 0; }
.liste-kompakt .eintrag .chip { justify-self: start; margin-top: 4px; }
.liste-kompakt .t { font-weight: 600; }
.liste-kompakt .u { font-size: 13.5px; color: var(--text-2); }
.fortschritt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.fortschritt .gross { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.auszug { font-size: 14.5px; color: var(--text-2); margin: 6px 0 14px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; margin: 0; }
.kz dt { font-size: 12.5px; color: var(--text-2); }
.kz dd { margin: 2px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.kz.akzent dd { color: var(--akzent); }
.kz.signal dd { color: var(--gruen); }
.anzeigen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.anzeige { background: var(--karte); border-radius: var(--r); box-shadow: var(--schatten); padding: 12px 14px; }
.anzeige .zahl { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.anzeige.akzent .zahl { color: var(--akzent); }
.anzeige.signal .zahl { color: var(--gruen); }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; background: var(--karte); border-radius: var(--r); box-shadow: var(--schatten); }
.karte .tabelle-wrap { box-shadow: none; border-radius: 0; background: transparent; margin: 0 -4px; }
table.raster { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.raster th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 8px 12px; border-bottom: .5px solid var(--linie-stark); white-space: nowrap; }
table.raster td { padding: 9px 12px; border-bottom: .5px solid var(--linie); vertical-align: top; }
table.raster tr:last-child td { border-bottom: 0; }
table.raster td.z { text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) { table.raster tbody tr:hover td { background: var(--tint); } }

/* ---------- Segment-Schalter (Reiter) ---------- */
.reiter { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin-bottom: 14px; background: var(--tint-2); border-radius: 9px; }
.reiter button { min-height: calc(var(--klick) - 4px); padding: 3px 14px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--text); font-size: 13.5px; cursor: pointer; }
.reiter button[aria-pressed="true"] { background: var(--karte); box-shadow: var(--schatten); font-weight: 600; }

/* ---------- Listen (Mail-artig: Haarlinien, weiche Auswahl) ---------- */
.zeilen { display: flex; flex-direction: column; }
.liste .zeilen { background: var(--karte); border-radius: var(--r-l); box-shadow: var(--schatten); padding: 6px; }
.zeile {
  display: grid; grid-template-columns: 36px 1fr; gap: 3px 12px; align-items: start; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--r); padding: 11px 10px; color: var(--text); cursor: pointer; position: relative;
}
.zeile + .zeile::before { content: ""; position: absolute; left: 58px; right: 10px; top: 0; border-top: .5px solid var(--linie); }
.zeile[aria-current="true"] { background: var(--akzent-flaeche); }
.zeile[aria-current="true"]::before, .zeile[aria-current="true"] + .zeile::before { border-color: transparent; }
@media (hover: hover) { .zeile:not([aria-current="true"]):hover { background: var(--tint); } }
.zeile:active { background: var(--tint-2); }
.zeile .sc { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tint-2); color: var(--text-2); }
.zeile[data-band="hoch"] .sc { background: var(--gruen-flaeche); color: var(--gruen); }
.zeile[data-band="mittel"] .sc { background: var(--orange-flaeche); color: var(--orange); }
.zeile .t { font-weight: 600; font-size: 15px; line-height: 1.35; }
.zeile .u { font-size: 13.5px; color: var(--text-2); margin-top: 1px; }
.zeile .rechts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.zeile .rechts:empty { display: none; }

/* ---------- Chips (Kapseln) ---------- */
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; line-height: 1.3; padding: 2px 8px; border-radius: 999px; background: var(--tint-2); color: var(--text-2); white-space: nowrap; }
.chip.fitlust { background: var(--akzent-flaeche); color: var(--akzent); font-weight: 650; }
.chip.warn { background: var(--orange-flaeche); color: var(--orange); }
.chip.alarm, .chip.nein { background: var(--rot-flaeche); color: var(--rot); }
.chip.ja { background: var(--gruen-flaeche); color: var(--gruen); }

/* ---------- Liste + Inspektor ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(400px, 1.25fr); gap: 20px; align-items: start; }
.detail {
  position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; background: var(--karte); border-radius: var(--r-l);
  box-shadow: var(--schatten); padding: 22px 26px 28px;
}
.detail > .label:first-of-type { font-size: 12.5px; }
.detail h3 { font: 700 22px/1.25 var(--schrift); letter-spacing: -.018em; margin: 6px 0 2px; }
.detail .firma { color: var(--text-2); font-weight: 600; font-size: 15px; }
.knopf.zurueck { display: none; }
.eck { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0; font-size: 14.5px; padding: 12px 14px; background: var(--tint); border-radius: var(--r); }
.eck dt { color: var(--text-2); }
.eck dd { margin: 0; overflow-wrap: anywhere; }
.block { margin: 14px 0; padding: 12px 14px; border-radius: var(--r); background: var(--tint); }
.block > .label:first-child { font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }
.block.fehlt { background: var(--orange-flaeche); }
.block.fehlt > .label:first-child { color: var(--orange); }
.block p { margin: 4px 0 0; }
.block ul { margin: 6px 0 0; padding-left: 18px; }
.anzeigetext { white-space: pre-wrap; font: 400 15px/1.6 var(--schrift); background: var(--feld); border: .5px solid var(--linie-stark); border-radius: var(--r); padding: 14px 16px; max-height: 440px; overflow: auto; }
details > summary { cursor: pointer; min-height: var(--klick); display: flex; align-items: center; gap: 6px; color: var(--akzent); font-weight: 500; font-size: 14.5px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "›"; display: inline-block; font-size: 18px; line-height: 1; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }

/* ---------- Bedienelemente ---------- */
.form { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
textarea, input.feld {
  width: 100%; min-height: var(--klick); padding: 7px 11px; background: var(--feld); color: var(--text);
  border: .5px solid var(--linie-stark); border-radius: var(--r-s); font-size: 15px; box-shadow: inset 0 1px 1px rgb(0 0 0 / .03);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
textarea:focus, input.feld:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 25%, transparent); }
input.feld { display: block; margin: 4px 0 8px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--klick); padding: 5px 16px;
  border: 0; border-radius: var(--r-s); background: var(--akzent); color: var(--akzent-text);
  font-size: 14.5px; font-weight: 600; cursor: pointer; align-self: flex-start; box-shadow: 0 1px 1px rgb(0 0 0 / .12), inset 0 .5px 0 rgb(255 255 255 / .2);
}
.knopf.leise { background: var(--tint-2); color: var(--text); font-weight: 500; box-shadow: none; }
.knopf:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .knopf:not(:disabled):hover { filter: brightness(1.07); } .knopf.leise:not(:disabled):hover { background: var(--linie-stark); filter: none; } }
.knopf:not(:disabled):active { filter: brightness(.94); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.scorewahl { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 2px; background: var(--tint-2); border-radius: 9px; }
.scorewahl button { min-height: calc(var(--klick) - 2px); border: 0; border-radius: var(--r-s); background: transparent; color: var(--text); cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; }
.scorewahl button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.urteil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--tint-2); border-radius: 9px; }
.urteil button { min-height: var(--klick); border: 0; border-radius: var(--r-s); background: transparent; color: var(--text); cursor: pointer; font-weight: 600; }
.urteil button[aria-pressed="true"] { background: var(--karte); box-shadow: var(--schatten); }
.urteil button[data-u="ja"][aria-pressed="true"] { color: var(--gruen); }
.urteil button[data-u="nein"][aria-pressed="true"] { color: var(--rot); }
.urteil button[data-u="vielleicht"][aria-pressed="true"] { color: var(--orange); }
.meldung { font-size: 14px; color: var(--text-2); }
.meldung:empty { display: none; }
.meldung.ok { color: var(--gruen); }
.meldung.f { color: var(--rot); }

/* ---------- Verlauf, Lernen ---------- */
.verlauf { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.verlauf li { padding: 10px 0; border-bottom: .5px solid var(--linie); font-size: 14.5px; }
.verlauf li:last-child { border-bottom: 0; }
.verlauf .wer { font-weight: 600; margin-right: 8px; }
.verlauf .wer.coachin { color: var(--orange); }
.md { max-width: 75ch; background: var(--karte); border-radius: var(--r-l); box-shadow: var(--schatten); padding: 20px 26px; }
.md h1 { font-size: 22px; } .md h2 { font-size: 17px; }
.md li { margin: 4px 0; }
.md strong { font-weight: 650; }

/* ---------- Übersicht-Abschnitte (alt), Pakete, Bewerben, Werkbank ---------- */
section.aktiv { margin-bottom: 20px; }
section.paket, section.bewerben, section.werkbank { border-top: .5px solid var(--linie-stark); margin-top: 26px; padding-top: 6px; }
section.paket > h2, section.bewerben > h3, section.werkbank > h3 { margin-top: 16px; }
section.paket h3 { margin: 22px 0 8px; }
.brief { background: var(--brief); color: #1d1c1a; padding: 26px 30px; border-radius: var(--r); line-height: 1.6; max-width: 70ch; box-shadow: var(--schatten); font-size: 15px; }
.brief .label { color: #6b675f; }
iframe.pdf { width: 100%; height: 80vh; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--schatten); }
.vorschlaege .vorschlag { padding: 10px 0; border-bottom: .5px solid var(--linie); }
.vorschlaege .vorschlag:last-child { border-bottom: 0; }
.hh-bericht { background: var(--karte); border-radius: var(--r-l); box-shadow: var(--schatten); padding: 4px 18px 10px; margin-bottom: 12px; }
.werkbank-verlauf { display: flex; flex-direction: column; gap: 10px; max-width: 75ch; }
.nachricht { border-radius: var(--r-l); padding: 10px 14px; background: var(--tint); font-size: 15px; }
.nachricht.von-jochen { align-self: flex-end; max-width: 85%; background: var(--akzent); color: var(--akzent-text); }
.nachricht.von-jochen .label { color: inherit; opacity: .75; }
.nachricht p { margin: 4px 0; }
.auftrag { margin-top: 8px; padding-top: 8px; border-top: .5px solid var(--linie-stark); }

/* ---------- Mitteilungen (wie macOS-Benachrichtigungen) ---------- */
.hinweise { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.hinweis {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; border-radius: var(--r-l);
  background: var(--seite-fest); box-shadow: var(--schatten-hoch); font-size: 14px;
}
@supports (backdrop-filter: blur(1px)) { .hinweis { background: var(--seite); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); } }
.hinweis span { flex: 1; }
.hinweis .zu { background: none; border: 0; color: var(--text-2); font-size: 20px; min-width: 32px; min-height: 32px; border-radius: 50%; cursor: pointer; }

/* ---------- Schmale Fenster / Handy ---------- */
@media (max-width: 1150px) { .uebersicht-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .seite {
    position: sticky; top: 0; z-index: 10; height: auto; gap: 4px; border-right: 0; border-bottom: .5px solid var(--linie-stark);
    padding: 10px 12px 6px; padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  }
  .marke { padding: 0 4px 4px; }
  .marke .zeichen { width: 22px; height: 30px; }
  .navi { flex-direction: row; overflow-x: auto; gap: 2px; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 4px; }
  .navi::-webkit-scrollbar { display: none; }
  .navi .gruppe { display: none; }
  .navi button { flex: 0 0 auto; width: auto; padding: 6px 12px; min-height: 40px; }
  .fuss { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); border: 0; padding: 0; }
  .fuss .herz, .fuss .wer { display: none; }
  .inhalt { padding: 20px 16px 48px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  h1.ansicht { font-size: 26px; margin-bottom: 16px; }
  .zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .zweispaltig.zeigt-detail .liste { display: none; }
  .zweispaltig:not(.zeigt-detail) .detail { display: none; }
  .detail { position: static; max-height: none; padding: 18px; }
  .knopf.zurueck { display: inline-flex; background: var(--tint-2); color: var(--text); box-shadow: none; margin-bottom: 8px; }
  .scorewahl { grid-template-columns: repeat(5, 1fr); }
  .kennzahlen { grid-template-columns: repeat(3, 1fr); }
  .hinweise { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; right: 16px; max-width: none; }
  /* Beim Scrollen verschwindet die Marke, nur die Navigation bleibt oben stehen */
  .seite { top: -48px; }
  /* Detail ohne Karte-in-Karte: mehr Breite für den Text */
  .detail { background: transparent; box-shadow: none; padding: 4px 0 0; border-radius: 0; }
  /* Tabellen werden zu Karten, jede Zeile beschriftet (data-label aus dem Kopf, siehe beschriften() in app.js) */
  .tabelle-wrap { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  table.raster thead { display: none; }
  table.raster, table.raster tbody, table.raster tr, table.raster td { display: block; width: auto; }
  table.raster tr { background: var(--karte); border-radius: var(--r); box-shadow: var(--schatten); padding: 8px 14px; margin-bottom: 10px; }
  table.raster td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  table.raster td::before { content: attr(data-label); flex: none; color: var(--text-2); text-align: left; }
  table.raster td[data-label=""]::before { content: none; }
  table.raster td[data-label=""] { justify-content: flex-end; }
  /* PDF im Rahmen zeigt iOS nur als starres Bild der ersten Seite -> stattdessen Knopf zum Öffnen */
  iframe.pdf { display: none; }
  iframe.pdf + p a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-s); background: var(--tint-2); color: var(--text); font-weight: 600; text-decoration: none; }
}
/* Touch: Felder mit 16 px, sonst zoomt iOS Safari beim Tippen hinein; Schalter mit voller Tippfläche */
@media (pointer: coarse) {
  textarea, input.feld, input, select { font-size: 16px; }
  .thema-knopf { width: 44px; height: 44px; }
}