/* ═══════════════════════════════════════════════════════════════
   STATUS3 · RAHMEN — die gemeinsame Kopfleiste (15.09.2026)

   Sonnenaufgang-Kante · Wortmarke mit Verlaufs-3 · Bereichsnavigation ·
   TAG/NACHT · mobile Tabbar. Wörtlich aus der Startseite (Home v41b).

   PORTABEL: jede Farbe kommt über var(--x, fallback). Mit
   status3-tokens.css greifen die Home-Werte; ohne sie fällt die Leiste auf
   die Tokens der Seite zurück (--card/--line/--meta/--ident der
   Kompendium-Ebene). Deshalb trägt sie in den generierten Kapiteln dieselbe
   Form, aber weiter deren Palette.

   Thema-Schalter + Sitzungsspeicher: /assets/status3-rahmen.js
   ═══════════════════════════════════════════════════════════════ */

/* ── 2 · SONNENAUFGANG · nur die Kante oben (v17 der Home) ──── */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FFA51F,#FF6B6B 50%,#FF57A8);z-index:150;pointer-events:none}

/* ── 3 · KOPFLEISTE (wörtlich Home v41b) ─────────────────────── */
.skip{position:fixed;top:-60px;left:16px;z-index:300;background:var(--teal, var(--ident, var(--marke,#0f7c86)));color:#fff;padding:12px 20px;border-radius:10px;font-weight:600;font-size:15px;min-height:44px;display:flex;align-items:center;transition:top .2s}
.skip:focus{top:12px}
/* Die Leisten setzen ihr Boxmodell selbst — sonst messen sie auf Seiten ohne
   eigenes border-box anders (Skip-Link ragte 8 px ins Bild, 16.09.2026). */
.topbar,.topbar *,.tabbar,.tabbar *,.skip{box-sizing:border-box}
.topbar{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:20px;height:58px;padding:0 var(--pad,clamp(18px,4vw,56px));background:var(--topbg, var(--card, var(--flaeche, var(--karte,#fff))));backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--hl, var(--line,rgba(0,0,0,.09)));font-family:var(--sans,'Montserrat',system-ui,sans-serif)}
.topbar.im-fluss{position:relative;inset:auto;flex:none}      /* Seiten mit eigenem Raster (Hub) */
/* Die fixe Leiste verdeckt sonst den Seitenanfang. Der Raum wird NUR dort reserviert,
   wo die Seite ihn nicht selbst mitbringt — die Startseite hat ihn im eigenen Raster
   (.home padding-top), der Cardio Hub nutzt .im-fluss. Markierung setzt build.py. */
body[data-rahmen="fix"]{padding-top:58px}
@media(max-width:1080px){ body[data-rahmen="fix"]{padding-bottom:calc(58px + env(safe-area-inset-bottom))} }
.brand{font-weight:700;letter-spacing:.3em;font-size:14px;display:flex;align-items:center;min-height:44px;color:var(--ink, var(--txt,#0e1b22));text-decoration:none}
.brand b{background:linear-gradient(100deg,#FFA51F,#FF6B6B 52%,#FF57A8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bereich{font-weight:600;font-size:14px;color:var(--sub, var(--ink2, var(--txt2,#3f545e)));letter-spacing:0;white-space:nowrap;margin-left:-8px}
.topnav{display:flex;gap:2px;margin-left:auto}
.topnav a{font-size:13px;color:var(--sub, var(--ink2, var(--txt2,#3f545e)));padding:11px 12px;border-radius:9px;min-height:44px;display:flex;align-items:center;font-weight:500;text-decoration:none}
.topnav a:hover,.topnav a:focus-visible{color:var(--ink, var(--txt,#0e1b22));background:var(--hl, var(--line,rgba(0,0,0,.09)))}
.topnav a[aria-current="page"]{color:var(--ink, var(--txt,#0e1b22))}
.schalter{display:flex;align-items:center;gap:8px;border:1px solid var(--hl2, var(--line,rgba(0,0,0,.16)));border-radius:999px;padding:5px 6px;background:var(--panel, var(--card, var(--flaeche, var(--karte,#fff))))}
.schalter button{border:none;background:none;cursor:pointer;font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.1em;color:var(--dim, var(--meta, var(--txt3,#5c7078)));padding:6px 11px;border-radius:999px;min-height:30px}
.schalter button.an{background:var(--teal, var(--ident, var(--marke,#0f7c86)));color:#fff}
/* NACHT: Teal ist hell — Schrift auf dem aktiven Knopf und der Sprungmarke dunkel (weiß hätte 1,8:1; Kontrast-Audit 16.09.2026) */
html[data-thema="klinik"] .schalter button.an,html[data-thema="klinik"] .skip{color:#0b0d0f}
.tuhr{font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.14em;color:var(--dim, var(--meta, var(--txt3,#5c7078)));display:flex;align-items:center;gap:8px}
.tuhr .on{color:var(--ekg, var(--safe,#0e9f5b))}
.einsatz-zugang{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 12px 6px 10px;border:1px solid var(--hl2, var(--line,rgba(0,0,0,.16)));border-radius:999px;
  background:var(--panel, var(--card, var(--flaeche, var(--karte,#fff))));font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink, var(--txt,#0e1b22));white-space:nowrap;text-decoration:none;
  transition:border-color .15s,color .15s}
.einsatz-zugang .ez-punkt{width:7px;height:7px;border-radius:50%;background:var(--alert, var(--danger, var(--gefahr,#d92d20)));box-shadow:0 0 0 3px color-mix(in srgb,var(--alert, var(--danger, var(--gefahr,#d92d20))) 18%,transparent)}
.einsatz-zugang:hover,.einsatz-zugang:focus-visible{border-color:var(--alert, var(--danger, var(--gefahr,#d92d20)));color:var(--alert, var(--danger, var(--gefahr,#d92d20)))}
/* Krümel rechts (Kapitel): „Kardiologie · Vorhofflimmern" — Mono, leise, Teil des Kopfes */
.kruemel{font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim, var(--meta, var(--txt3,#5c7078)));white-space:nowrap}
.kruemel b{font-weight:500;color:var(--teal, var(--ident, var(--marke,#0f7c86)))}
/* Rahmen gegen Seitenregeln absichern (16.09.2026): ältere Seiten-CSS greifen mit
   .topbar .brand (kompendium.css), .brand{gap} (Lese-Vorlage) und body.lese a
   (lese.css) in die Leiste. Gleiche Werte wie oben — nur stärkere Selektoren. */
.topbar .brand{font-weight:700;letter-spacing:.3em;font-size:14px;display:flex;align-items:center;gap:0;color:var(--ink, var(--txt,#0e1b22))}
.topbar .topnav a{color:var(--sub, var(--ink2, var(--txt2,#3f545e)))}
.topbar .topnav a:hover,.topbar .topnav a:focus-visible,.topbar .topnav a[aria-current="page"]{color:var(--ink, var(--txt,#0e1b22))}

/* ── 4 · TABBAR (mobil, wörtlich Home) ───────────────────────── */
.tabbar{display:none}
@media(max-width:1080px){
  .topnav{display:none}
  .schalter{margin-left:auto}
  .einsatz-zugang{margin-left:auto}
  .einsatz-zugang~.schalter{margin-left:0}
  .kruemel{display:none}
  .tabbar{position:fixed;inset:auto 0 0 0;z-index:100;display:grid;grid-template-columns:repeat(6,1fr);background:var(--topbg, var(--card, var(--flaeche, var(--karte,#fff))));backdrop-filter:blur(16px);border-top:1px solid var(--hl, var(--line,rgba(0,0,0,.09)));padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 1px 7px;font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;letter-spacing:0;color:var(--sub, var(--ink2, var(--txt2,#3f545e)));min-height:52px;justify-content:center;text-align:center;text-decoration:none}
  .tabbar a .ic{font-size:16px;line-height:1;color:var(--teal, var(--ident, var(--marke,#0f7c86)))}
  .tabbar a:first-child .ic{color:var(--red, var(--danger, var(--gefahr,#d92d20)))}
  .tabbar a[href]{color:var(--sub, var(--ink2, var(--txt2,#3f545e)))}   /* gegen body.lese a */
}
@media(max-width:700px){
  .topbar{gap:10px}
  .tuhr{display:none}
  .einsatz-zugang{min-height:40px;padding:8px 12px 8px 10px}
  .schalter button{padding:6px 9px}
}
@media(max-width:359px){
  .topbar{gap:7px}
  .brand{letter-spacing:.16em}
  .einsatz-zugang{padding:8px 9px 8px 8px;gap:6px}
  .schalter{padding:4px 4px;gap:4px}
  .schalter button{padding:6px 7px;letter-spacing:.1em}
}
@media(pointer:coarse),(max-width:700px){
  .schalter{padding:0 2px}
  .schalter button{min-height:44px;padding:0 10px}
  .einsatz-zugang{min-height:44px}
  .tabbar a{min-height:56px}
}

/* ── 5 · ABSCHNITTSZEILE & CHIPS (Home) ──────────────────────── */
.n-abschnitt{display:flex;align-items:center;gap:14px;margin:0 0 8px;
  font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimaa, var(--meta, var(--txt3,#526670)))}
.n-abschnitt::after{content:"";flex:1;height:1px;background:var(--hl, var(--line,rgba(0,0,0,.09)))}
.n-abschnitt b{font-weight:500;color:var(--teal, var(--ident, var(--marke,#0f7c86)))}
.spezial-kante{position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:2px;z-index:2;
  background:linear-gradient(90deg,transparent,#FFA51F,#FF6B6B 55%,#FF57A8,transparent);opacity:.75;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hl2, var(--line,rgba(0,0,0,.16)));border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--sub, var(--ink2, var(--txt2,#3f545e)));min-height:34px;transition:all .15s;text-decoration:none}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal, var(--ident, var(--marke,#0f7c86)))}
.chip.rot::before{background:var(--red, var(--danger, var(--gefahr,#d92d20)))}
.chip:hover,.chip:focus-visible{color:var(--ink, var(--txt,#0e1b22));border-color:var(--teal, var(--ident, var(--marke,#0f7c86)));background:var(--panel2, var(--card-2, var(--karte, var(--flaeche,#eef4f5))));transform:translateY(-1px)}
@media(pointer:coarse),(max-width:700px){ .chip{min-height:44px} }

/* FUSS:ANFANG — 6 · FUSSZEILE (17.09.2026). Eine Fußzeile für alle Seiten: Wer, Hinweis,
   Recht, Fehler melden. Ohne eigenen Grund — sie steht auf dem Grund der Seite und
   nimmt deren Schriftfarben (dieselbe var()-Kette wie die Kopfleiste). Quelle ist
   status3-rahmen.css; Startseite und Leitlinien tragen eine wortgleiche Kopie
   (build.py bricht ab, wenn sie abweicht). */
.rfuss,.rfuss *{box-sizing:border-box}
.rfuss{position:relative;z-index:2;clear:both;margin:32px 0 0;padding:22px var(--pad,clamp(18px,4vw,56px)) 26px;border-top:1px solid var(--hl2, var(--line,rgba(0,0,0,.16)));background:none;color:var(--sub, var(--ink2, var(--txt2,#3f545e)));font-family:var(--sans,'Montserrat',system-ui,sans-serif);font-size:13px;font-weight:400;line-height:1.55;text-align:left}
.rfuss .rf-in{max-width:1560px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px 48px;align-items:start}
.rfuss p{margin:0;max-width:none;font-size:13px;line-height:1.55;color:var(--sub, var(--ink2, var(--txt2,#3f545e)))}
.rfuss p+p{margin-top:6px}
.rfuss .rf-marke{font-weight:700;letter-spacing:.3em;font-size:12px;color:var(--ink, var(--txt,#0e1b22))}
.rfuss .rf-marke b{background:linear-gradient(100deg,#FFA51F,#FF6B6B 52%,#FF57A8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rfuss .rf-marke span{margin-left:10px;font-weight:600;letter-spacing:0;font-size:13px}
.rfuss .rf-hinweis{color:var(--ink, var(--txt,#0e1b22));font-weight:600}
.rfuss .rf-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 4px;margin:-6px -10px 0 0;padding:0;border:0;background:none;position:static}
.rfuss .rf-nav a[href]{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:9px;font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--sub, var(--ink2, var(--txt2,#3f545e)));border:0;background:none}
.rfuss .rf-nav a[href]:hover,.rfuss .rf-nav a[href]:focus-visible{color:var(--ink, var(--txt,#0e1b22));background:var(--hl, var(--line,rgba(0,0,0,.09)))}
.rfuss .rf-recht{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:4px;padding-top:12px;border-top:1px solid var(--hl, var(--line,rgba(0,0,0,.09)));font-family:var(--mono,'Spline Sans Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub, var(--ink2, var(--txt2,#3f545e)))}
@media(max-width:700px){
  .rfuss .rf-in{grid-template-columns:minmax(0,1fr);gap:10px}
  .rfuss .rf-nav{justify-content:flex-start;margin:0 0 0 -10px}
}
/* Seiten ohne reservierten Tabbar-Raum am body (Startseite, Leitlinien): die Fußzeile hält ihn selbst frei */
@media(max-width:1080px){ body:not([data-rahmen="fix"]) .rfuss{padding-bottom:calc(26px + 58px + env(safe-area-inset-bottom,0px))} }
/* FUSS:ENDE */