/* blutzuckercheck.de — Gestaltung „Messprotokoll“: Petrol, Türkis, Sand und Bernstein; Millimeterpapier;
   Überschriften Fraunces, Text DM Sans (beide lokal). Einspaltig mit Karten für die Messsituationen. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --petrol: #0b5c63; --petrol-dunkel: #073f44; --tuerkis: #14b8a6; --mint: #5eead4; --mint-hell: #e3f8f4;
  --sand: #fbf6ee; --sand-2: #f3ead9; --bernstein: #e8952e; --bernstein-hell: #fff3df;
  --tinte: #1d2a2c; --leise: #5c6b6d; --linie: #e6ddcc; --rot: #c0392b; --rot-hell: #fdecea; --gruen: #1e8a5a; --gruen-hell: #e6f5ec;
  --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif;
  /* Statusfarben der Skala (nur semantisch, immer mit Text/Symbol): geprüft auf Farbfehlsichtigkeit */
  --z-gruen: #1e8a5a; --z-gelb: #e8952e; --z-orange: #a8540c; --z-rot: #8a2318;
  --schatten: 0 18px 40px -26px rgba(11,92,99,.45);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--tinte); font: 400 17.5px/1.7 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--petrol); text-decoration-color: var(--tuerkis); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--tuerkis); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--petrol-dunkel); font-variation-settings: "SOFT" 60; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); margin: .1em 0 .6em; }
h2 { font-size: 1.55rem; margin: 1.9em 0 .6em; }
h3 { font-size: 1.15rem; margin: 1.3em 0 .4em; }
p, ul, ol { margin: 0 0 1em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf: Logozeile auf Sand, darunter das Navigationsband */
.kopf-innen { max-width: 1100px; margin: 0 auto; padding: 18px 24px 16px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo img { width: 46px; height: 46px; }
.logo-text { display: flex; flex-direction: column; }
.logo-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--petrol-dunkel); line-height: 1.05; }
.logo-name span { color: var(--tuerkis); }
.logo-claim { font-size: .85rem; color: var(--leise); }
.hauptnav { background: var(--petrol); }
.hauptnav .nav-innen { max-width: 1100px; margin: 0 auto; padding: 0 12px; display: flex; overflow-x: auto; scrollbar-width: none; }
.hauptnav .nav-innen::-webkit-scrollbar { display: none; }
.hauptnav a { flex: none; color: #cfe9e6; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 13px 14px; position: relative; }
.hauptnav a:hover { color: #fff; }
.hauptnav a[aria-current="page"] { color: #fff; }
.hauptnav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--mint); }

/* Hero: Millimeterpapier */
.hero { background-color: #fff;
  background-image: linear-gradient(rgba(20,184,166,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(20,184,166,.10) 1px, transparent 1px),
                    linear-gradient(rgba(20,184,166,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,184,166,.05) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; border-bottom: 1px solid var(--linie); }
.hero-innen { max-width: 1100px; margin: 0 auto; padding: 46px 24px 52px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; }
.hero-marke { display: inline-block; font-weight: 700; color: var(--petrol); background: var(--mint-hell); border-radius: 999px; padding: 4px 14px; font-size: .9rem; margin-bottom: 10px; }
.hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); margin: 0 0 .3em; }
.hero h1 em { font-style: italic; color: var(--tuerkis); }
.hero p { color: var(--leise); font-size: 1.1rem; }
.hero-karte { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 26px; box-shadow: 0 24px 50px -28px rgba(11,92,99,.45); }
@media (max-width: 820px) { .hero-innen { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 16px 32px; } }

/* Raster: ein Blatt */
.rahmen { max-width: 920px; margin: 0 auto; padding: 32px 16px 60px; }
main { background: #fff; border-radius: 16px; border: 1px solid var(--linie); padding: 38px 46px 40px; overflow-wrap: break-word; }
@media (max-width: 640px) { main { padding: 22px 18px 26px; } .kopf-innen { padding: 14px 16px 12px; } .logo-name { font-size: 1.35rem; } }

.krumen { font-size: .86rem; color: var(--leise); margin-bottom: .8em; }
.krumen a { color: var(--leise); }
.kleingedruckt { font-size: .9rem; color: var(--leise); }
.einleitung { font-size: 1.08rem; }
.h1-mmol { font-weight: 400; color: var(--leise); font-size: .62em; white-space: nowrap; }

/* Formular */
.kasten { background: var(--mint-hell); border-radius: 14px; padding: 20px 22px; margin: 1.6em 0; }
.kasten-titel { margin: 0 0 12px; font-size: 1.2rem; }
.bzform label { display: block; font-weight: 700; margin-bottom: 8px; }
.bz-zeile { display: flex; align-items: stretch; gap: 0; border: 2px solid var(--petrol); border-radius: 12px; overflow: hidden; background: #fff; }
.bz-zeile input { flex: 1 1 auto; min-width: 0; border: 0; font: 600 1.4rem var(--sans); padding: 10px 14px; color: var(--petrol-dunkel); background: transparent; }
.bz-zeile input:focus { outline: none; }
.bz-zeile:focus-within { box-shadow: 0 0 0 4px rgba(20,184,166,.25); }
.bz-einheit { display: flex; align-items: center; padding: 0 12px; color: var(--leise); font-weight: 600; background: var(--sand); border-left: 1px solid var(--linie); }
button { font: 700 1rem var(--sans); cursor: pointer; border: 0; padding: 12px 22px; background: var(--petrol); color: #fff; }
button:hover { background: var(--petrol-dunkel); }
.bz-zeile button { border-radius: 0; }
.bz-tipp { font-size: .85rem; color: var(--leise); margin: 8px 0 0; }
.qc-fehler { color: var(--rot); font-size: .9rem; margin: 6px 0 0; }
input[aria-invalid="true"] { color: var(--rot); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(20,184,166,.5); outline-offset: 2px; }

/* Wertseite: drei Messsituationen */
.situationen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0 1.6em; }
@media (max-width: 760px) { .situationen { grid-template-columns: minmax(0, 1fr); } }
.situation { border-radius: 14px; padding: 16px 18px 14px; background: var(--sand); border-top: 6px solid var(--leise); }
.situation h3 { margin: 0 0 4px; font-size: 1rem; font-family: var(--sans); font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .06em; }
.situation .situation-urteil { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0 0 6px; color: var(--petrol-dunkel); line-height: 1.2; }
.situation p { font-size: .95rem; margin-bottom: .5em; }
.situation-erkl { font-size: .82rem !important; color: var(--leise); }
.situation-normal { background: var(--gruen-hell); border-top-color: var(--gruen); }
.situation-hoch, .situation-niedrig { background: var(--bernstein-hell); border-top-color: var(--bernstein); }
.situation-deutlich-hoch, .situation-deutlich-niedrig { background: var(--rot-hell); border-top-color: var(--rot); }
.notfall { border: 2px solid var(--rot); border-radius: 14px; padding: 6px 22px 10px; margin: 1.4em 0; background: #fff; }
.notfall h2 { color: var(--rot); margin-top: .6em; }
.einheit-hinweis { background: var(--bernstein-hell); border-radius: 12px; padding: 12px 16px; border-left: 5px solid var(--bernstein); }

/* Startseite */
.grenzen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 1em; }
@media (max-width: 760px) { .grenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grenze { border-radius: 14px; padding: 14px 14px 10px; background: var(--sand); }
.grenze strong { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--petrol-dunkel); }
.grenze span { font-size: .8rem; color: var(--leise); }
.grenze p { margin: 6px 0 0; font-size: .9rem; font-weight: 600; }
.grenze-normal { background: var(--gruen-hell); } .grenze-hoch { background: var(--bernstein-hell); } .grenze-niedrig { background: var(--rot-hell); }
.ratgeber { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .ratgeber { grid-template-columns: minmax(0, 1fr); } }
.ratgeber a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 14px; text-decoration: none; color: var(--tinte); }
.ratgeber a:hover { border-color: var(--tuerkis); background: var(--mint-hell); }
.ratgeber strong { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--petrol-dunkel); }
.ratgeber span { font-size: .92rem; color: var(--leise); }
.teaser { list-style: none; padding: 0; }
.teaser a { display: block; padding: 10px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }

/* Tabellen */
.tabelle-scroll { overflow-x: auto; margin: 0 0 1.2em; position: relative; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--petrol); border-bottom: 2px solid var(--petrol); }
.zelle-normal { color: var(--gruen); font-weight: 600; } .zelle-hoch, .zelle-niedrig { color: #9a5b0b; font-weight: 600; } .zelle-deutlich-hoch, .zelle-deutlich-niedrig { color: var(--rot); font-weight: 700; }
table.breit { font-size: .88rem; min-width: 720px; }

/* Artikel */
article img { border-radius: 12px; }
article .alignright, article .alignleft { max-width: 45%; }
article::after { content: ""; display: table; clear: both; }

/* Wertlisten */
.nachbarn, .wertliste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1em; }
.nachbarn a, .nachbarn span, .wertliste a { min-width: 3em; text-align: center; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); text-decoration: none; font-variant-numeric: tabular-nums; color: var(--petrol); background: #fff; }
.nachbarn a:hover, .wertliste a:hover { background: var(--mint-hell); border-color: var(--tuerkis); }
.nachbarn span { background: var(--petrol); color: #fff; border-color: var(--petrol); font-weight: 700; }

/* Fuß */
.fuss { background: var(--petrol-dunkel); color: #b9d6d3; font-size: .9rem; }
.fuss-innen { max-width: 1100px; margin: 0 auto; padding: 28px 24px 34px; }
.fuss a { color: #fff; }
.fuss-notfall span, .fuss-hinweis { color: #9cc3bf; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }

/* Consent */
#consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 12px; }
#consent-banner[hidden] { display: none; }
.consent-box { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 14px 40px rgba(7,63,68,.25);
  padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.consent-box p { margin: 0; flex: 1 1 240px; font-size: .95rem; }
.consent-actions { display: flex; gap: 8px; }
.consent-actions button { border-radius: 10px; }
#consent-refuse { background: var(--sand-2); color: var(--petrol-dunkel); }

@media print { .hauptnav, .hero, .fuss nav, #consent-banner, .tagebuch, .karten, .sit-wahl { display: none !important; } body { background: #fff; } main { border: 0; padding: 0; } }

/* Kleine Zeile über der H1 (Doktrin: Titel = H1, der Werbesatz steht davor) */
.hero-kicker { margin: 0 0 .3rem; font-weight: 700; letter-spacing: .02em; opacity: .85; }

/* ===== Bilder ===== */
.titelbild { margin: 0 0 1.6em; }
.titelbild img, .wert-kopf-bild img, .hero-bild img, .tagebuch-bild img, .karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.titelbild img { aspect-ratio: 21 / 9; border-radius: 14px; }
@media (max-width: 640px) { .titelbild img { aspect-ratio: 3 / 2; } }

/* Startseite: Hero mit Foto */
.hero-innen { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero-karte { margin-top: 18px; padding: 20px 22px; }
.hero-bild { margin: 0; position: relative; }
.hero-bild img { aspect-ratio: 1 / 1; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(7,63,68,.55); }
.hero-bild::before { content: ""; position: absolute; inset: 18px -14px -14px 18px; border: 2px solid var(--mint); border-radius: 22px; z-index: -1; }
.hero-bild { z-index: 0; }
.hero-beispiele { font-size: .95rem !important; margin: 14px 0 0; }
.hero-beispiele a { display: inline-block; margin: 2px 2px; padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-beispiele a:hover { border-color: var(--tuerkis); background: var(--mint-hell); }
/* Steht bewusst NACH der zweispaltigen Regel oben: sonst gewinnt diese und der Kopf bleibt auf dem Handy zweispaltig */
@media (max-width: 820px) {
  .hero-innen { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 16px 32px; }
  .hero-bild img { aspect-ratio: 3 / 2; } .hero-bild::before { display: none; }
}
@media (max-width: 480px) {
  .hero-karte { padding: 16px 14px; }
  .hero h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.2rem); }
  /* Prüf-Formular schmal: Eingabe + Einheit oben, Knopf in voller Breite darunter */
  .bz-zeile { flex-wrap: wrap; }
  .bz-zeile input { flex: 1 1 0; width: 0; }
  .bz-zeile button { flex: 1 0 100%; border-top: 1px solid var(--linie); }
}

.schritte { list-style: none; padding: 0; margin: 1.6em 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.schritte li { background: var(--sand); border-radius: 14px; padding: 16px 16px 14px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.schritte svg { grid-row: span 2; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--petrol); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schritte strong { font-family: var(--serif); color: var(--petrol-dunkel); font-size: 1.08rem; }
.schritte span { font-size: .9rem; color: var(--leise); line-height: 1.5; }
@media (max-width: 700px) { .schritte { grid-template-columns: minmax(0, 1fr); } }

/* Kartenraster Ratgeber mit Vorschaubildern */
.karten { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .karten, .karten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .karten, .karten-4, .karten-2 { grid-template-columns: minmax(0, 1fr); } }
.karten a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--tinte); background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
.karten a:hover { border-color: var(--tuerkis); transform: translateY(-2px); box-shadow: var(--schatten); color: var(--tinte); }
.karte-bild { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-2); }
.karte-bild img { position: absolute; inset: 0; }
.karte-inhalt { display: block; }
.karten strong { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--petrol-dunkel); padding: 12px 14px 2px; line-height: 1.25; }
.karte-text { display: block; font-size: .88rem; color: var(--leise); padding: 0 14px 14px; line-height: 1.45; }
@media (max-width: 480px) { .karten a { flex-direction: row; } .karte-bild { flex: 0 0 34%; aspect-ratio: auto; min-height: 92px; } .karte-inhalt { flex: 1 1 auto; min-width: 0; } .karten strong { padding-top: 10px; font-size: 1.02rem; } }

/* ===== Wertseite ===== */
.wert-kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 28px; align-items: center; margin-bottom: 1.2em; }
.wert-kopf h1 { margin-bottom: .45em; }
.wert-kopf .einleitung { margin: 0; }
.wert-kopf-bild { margin: 0; }
.wert-kopf-bild img { aspect-ratio: 4 / 3; border-radius: 16px; box-shadow: var(--schatten); }
.wert-kopf-bild figcaption { font-size: .82rem; color: var(--leise); margin-top: 8px; line-height: 1.45; }
@media (max-width: 760px) { .wert-kopf { grid-template-columns: minmax(0, 1fr); gap: 16px; } .wert-kopf-bild img { aspect-ratio: 16 / 9; } }

.skala-modul { background: linear-gradient(180deg, var(--mint-hell), #fff 70%); border: 1px solid #cdeee7; border-radius: 18px; padding: 22px 24px 18px; margin: 1.4em 0 1.8em; }
.skala-modul h2 { margin: 0 0 .5em; }
.sit-wahl { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sit-wahl legend { padding: 0; margin-bottom: 8px; font-weight: 700; color: var(--petrol-dunkel); }
.sit-opt { position: relative; cursor: pointer; }
.sit-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sit-opt span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--petrol); background: #fff; color: var(--petrol); font-weight: 700; font-size: .95rem; line-height: 1.2; }
.sit-opt:hover span { background: var(--mint-hell); }
.sit-opt input:checked + span { background: var(--petrol); color: #fff; }
.sit-opt input:checked + span::before { content: "✓ "; }
.sit-opt input:focus-visible + span { outline: 3px solid rgba(20,184,166,.6); outline-offset: 2px; }

.sit-panel, .kpi-abstand > span[class^="a-"] { display: none; }
.skala-modul:has(#sit-nuechtern:checked) .p-nuechtern, .skala-modul:has(#sit-vor:checked) .p-vor,
.skala-modul:has(#sit-nach:checked) .p-nach, .skala-modul:has(#sit-zufall:checked) .p-zufall,
.skala-modul[data-sit="nuechtern"] .p-nuechtern, .skala-modul[data-sit="vor"] .p-vor,
.skala-modul[data-sit="nach"] .p-nach, .skala-modul[data-sit="zufall"] .p-zufall { display: block; }
.skala-modul:has(#sit-nuechtern:checked) .a-nuechtern, .skala-modul:has(#sit-vor:checked) .a-vor,
.skala-modul:has(#sit-nach:checked) .a-nach, .skala-modul:has(#sit-zufall:checked) .a-zufall,
.skala-modul[data-sit="nuechtern"] .a-nuechtern, .skala-modul[data-sit="vor"] .a-vor,
.skala-modul[data-sit="nach"] .a-nach, .skala-modul[data-sit="zufall"] .a-zufall { display: block; }

.skala { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.skala-schmal { display: none; }
@media (max-width: 560px) {
  .skala-breit { display: none; } .skala-schmal { display: block; }
  .zonen-legende { flex-direction: column; gap: 3px; }
  .sit-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sit-wahl legend { grid-column: 1 / -1; }
  .sit-opt span { display: block; text-align: center; padding: 8px 6px; font-size: .88rem; }
  .skala-modul { padding: 18px 14px 14px; margin-left: -6px; margin-right: -6px; }
  .skala-ergebnis { gap: 10px; padding: 10px 12px; font-size: .97rem; }
}
.zone-gruen { fill: var(--z-gruen); background: var(--z-gruen); }
.zone-gelb { fill: var(--z-gelb); background: var(--z-gelb); }
.zone-orange { fill: var(--z-orange); background: var(--z-orange); }
.zone-rot { fill: var(--z-rot); background: var(--z-rot) repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 3px, transparent 3px 7px); }
.zone.leise { opacity: .55; }
.tick { stroke: var(--leise); stroke-width: 1.5; }
.tick-zahl { font-size: 15px; fill: var(--leise); font-variant-numeric: tabular-nums; }
.tick-zahl.einheit { font-size: 13px; }
.toleranz { fill: rgba(29,42,44,.10); stroke: var(--tinte); stroke-width: 1.5; stroke-dasharray: 4 3; }
.marke { stroke: var(--tinte); stroke-width: 3; stroke-linecap: round; }
.schild rect, .schild path { fill: var(--petrol-dunkel); }
.schild text { fill: #fff; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }

.skala-ergebnis { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 12px 14px; margin: 10px 0 8px; border-left: 6px solid var(--leise); font-size: 1.02rem; }
.skala-ergebnis .symbol, .situation-urteil .symbol, .tb-tabelle .symbol { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 999px; font: 700 .95rem var(--sans); color: #fff; background: var(--leise); }
.ergebnis-text { font-size: .93rem; color: var(--leise); }
.spanne { color: var(--leise); font-weight: 400; white-space: nowrap; }
.ergebnis-normal { border-left-color: var(--z-gruen); } .ergebnis-normal .symbol { background: var(--z-gruen); }
.ergebnis-niedrig, .ergebnis-hoch { border-left-color: var(--z-gelb); } .ergebnis-niedrig .symbol, .ergebnis-hoch .symbol { background: #b86e12; }
.ergebnis-deutlich-niedrig, .ergebnis-deutlich-hoch { border-left-color: var(--z-rot); } .ergebnis-deutlich-niedrig .symbol, .ergebnis-deutlich-hoch .symbol { background: var(--z-rot); }
.grenz-hinweis { font-size: .9rem; background: var(--bernstein-hell); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }

.zonen-legende { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; }
.zonen-legende li { display: block; line-height: 1.4; }
.zonen-legende .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.zonen-legende li.aktiv { font-weight: 700; color: var(--petrol-dunkel); }
.zonen-legende .hier { color: var(--petrol); }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 6px; }
@media (max-width: 700px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; }
.kpi-titel { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); margin-bottom: 4px; }
.kpi-zahl { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; color: var(--petrol-dunkel); font-variant-numeric: tabular-nums; }
.kpi-klein { display: block; font-size: .85rem; color: var(--leise); line-height: 1.45; margin-top: 4px; }
.skala-fuss { margin: 10px 0 0; }

.situation-urteil .symbol { min-width: 26px; height: 26px; font-size: .85rem; vertical-align: 3px; margin-right: 2px; }
.situation-normal .symbol { background: var(--z-gruen); }
.situation-hoch .symbol, .situation-niedrig .symbol { background: #b86e12; }
.situation-deutlich-hoch .symbol, .situation-deutlich-niedrig .symbol { background: var(--z-rot); }
@media (max-width: 560px) { .situationen { grid-template-columns: minmax(0, 1fr); } }

/* Grenzwert-Grafik (Start, Tabelle, Übersicht) */
.grenzen-grafik { margin: 0 0 1.2em; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 16px 20px 6px; }
.gg-titel { font-weight: 700; color: var(--petrol-dunkel); margin-bottom: 6px; }
.gg-zeile { margin-bottom: 14px; }
.gg-name { margin: 0 0 -2px; font-weight: 700; font-size: .95rem; }

/* Tagesverlauf */
.verlauf-grafik { margin: 0 0 1.4em; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px 10px; }
.verlauf, .tb-svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.vl-band { fill: var(--gruen-hell); }
.vl-grenze { stroke: #b9c5c4; stroke-width: 1.2; } .vl-grenze.gestrichelt { stroke-dasharray: 5 4; stroke: #8fa3a1; }
.vl-y, .vl-x { font-size: 14px; fill: var(--leise); font-variant-numeric: tabular-nums; }
.vl-notiz { font-size: 13px; fill: var(--leise); }
.vl-kurve { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; }
.vl-mahlzeit circle { fill: var(--bernstein); stroke: #fff; stroke-width: 2; }
.vl-mahlzeit circle.vl-ziel { fill: transparent; stroke: none; }
.vl-mahlzeit text { font-size: 14px; font-weight: 700; fill: var(--petrol-dunkel); }

/* Messtagebuch */
.tagebuch { border: 1px solid var(--linie); border-radius: 18px; padding: 22px 24px 18px; margin: 2em 0; background: var(--sand); }
.tagebuch-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center; }
.tagebuch-kopf h2 { margin-top: 0; }
.tagebuch-kopf p { margin: 0; }
.tagebuch-bild { margin: 0; }
.tagebuch-bild img { aspect-ratio: 3 / 2; border-radius: 12px; }
@media (max-width: 640px) { .tagebuch-kopf { grid-template-columns: minmax(0, 1fr); } .tagebuch-bild { display: none; } .tagebuch { padding: 18px 16px 14px; } }
.tb-ohne-js { margin-top: 12px; }
.tb-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-top: 16px; align-items: end; }
.tb-feld label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.tb-feld input, .tb-feld select { width: 100%; min-width: 0; font: 500 1rem var(--sans); padding: 9px 10px; border: 1px solid #c9bfa9; border-radius: 10px; background: #fff; color: var(--tinte); }
.tb-feld input:focus, .tb-feld select:focus { outline: 3px solid rgba(20,184,166,.4); outline-offset: 0; border-color: var(--tuerkis); }
.tb-wert-zeile { display: flex; gap: 6px; } .tb-wert-zeile input { flex: 1 1 auto; } .tb-wert-zeile select { flex: 0 0 92px; width: 92px; }
.tb-feld-breit { grid-column: span 2; }
.tb-aktion button { width: 100%; border-radius: 10px; }
.tb-meldung { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--gruen); min-height: 1.4em; }
.tb-meldung.fehler { color: var(--rot); }
@media (max-width: 700px) { .tb-form { grid-template-columns: minmax(0, 1fr); } .tb-feld-breit { grid-column: auto; } }
.tb-liste { margin-top: 10px; }
.tb-verlauf { background: #fff; border-radius: 12px; padding: 10px 12px 2px; margin-bottom: 12px; }
.tb-verlauf:empty { display: none; }
.tb-linie { fill: none; stroke: var(--petrol); stroke-width: 2; opacity: .5; }
.tb-punkt { stroke: #fff; stroke-width: 2; fill: var(--leise); }
.tb-punkt.p-normal { fill: var(--z-gruen); } .tb-punkt.p-hoch, .tb-punkt.p-niedrig { fill: var(--z-gelb); } .tb-punkt.p-deutlich-hoch, .tb-punkt.p-deutlich-niedrig { fill: var(--z-rot); }
.tb-tabelle { background: #fff; border-radius: 12px; font-size: .92rem; }
.tb-tabelle .symbol { min-width: 22px; height: 22px; font-size: .75rem; }
.tb-tabelle .zelle-normal .symbol { background: var(--z-gruen); } .tb-tabelle .zelle-hoch .symbol, .tb-tabelle .zelle-niedrig .symbol { background: #b86e12; }
.tb-tabelle .zelle-deutlich-hoch .symbol, .tb-tabelle .zelle-deutlich-niedrig .symbol { background: var(--z-rot); }
.leise { color: var(--leise); font-weight: 400; }
.knopf-x, .knopf-leise { background: #fff; color: var(--petrol); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.knopf-x:hover, .knopf-leise:hover { background: var(--mint-hell); color: var(--petrol-dunkel); }
.tb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
/* Alte Browser ohne :has und ohne JavaScript: wenigstens die Standard-Situation zeigen */
@supports not selector(:has(*)) { .skala-modul:not([data-js]) .p-nuechtern, .skala-modul:not([data-js]) .a-nuechtern { display: block; } }
@media (max-width: 560px) { .tb-tabelle th, .tb-tabelle td { padding: 8px 6px; } .tb-tabelle { font-size: .85rem; } }
@media (max-width: 560px) {
  .verlauf-grafik { padding: 10px 8px 6px; }
  .verlauf .vl-y, .verlauf .vl-x { font-size: 22px; } .verlauf .vl-notiz { display: none; } .verlauf .vl-mahlzeit text { font-size: 21px; }
}

/* ===== Robust gegen eingefügte Elemente (AdSense Auto Ads, „Mehr entdecken“ usw.) =====
   Anzeigen werden NICHT versteckt; sie dürfen nur nicht breiter als ihr Platz werden und
   Kopf/Navigation nicht aus dem Raster drücken. */
html, body { overflow-x: clip; }
body { min-width: 0; }
.kopf, .hauptnav, .hero, .rahmen, main, .fuss { min-width: 0; max-width: 100%; }
.kopf, .hero, .rahmen, .fuss { overflow-x: clip; }
ins.adsbygoogle, .google-auto-placed, .adsbygoogle iframe, main iframe, .kopf iframe, .fuss iframe { max-width: 100% !important; box-sizing: border-box; }
body > ins.adsbygoogle, .kopf > ins.adsbygoogle, .rahmen > ins.adsbygoogle, main ins.adsbygoogle, body > .google-auto-placed, .kopf > .google-auto-placed, main .google-auto-placed { min-width: 0 !important; margin-left: auto; margin-right: auto; }
.hauptnav .nav-innen > :not(a) { flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* Mobile Navigation: Verlauf am rechten Rand zeigt, dass es weitergeht (site.js setzt .weiter) */
.hauptnav { position: relative; }
.hauptnav::after { content: "›"; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, rgba(11,92,99,0), var(--petrol) 65%); }
.hauptnav.weiter::after { opacity: 1; }

/* ===== Artikel: Gliederung und Schritt-für-Schritt-Anleitung ===== */
article h2 + h3 { margin-top: .6em; }
.anleitung { list-style: none; padding: 0; margin: 1em 0 1.6em; counter-reset: schritt; }
.anleitung > li { counter-increment: schritt; position: relative; padding: 0 0 0 52px; margin: 0 0 1.1em; }
.anleitung > li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: var(--petrol); color: #fff; font: 700 1rem/1 var(--sans); }
.anleitung > li > strong:first-child { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--petrol-dunkel); margin-bottom: 2px; }
.anleitung p { margin: 0 0 .4em; }
.hinweis-kasten { background: var(--bernstein-hell); border-left: 5px solid var(--bernstein); border-radius: 12px; padding: 12px 16px; margin: 1.2em 0; }
.hinweis-kasten p:last-child, .hinweis-kasten ul:last-child { margin-bottom: 0; }
.messfehler { background: var(--rot-hell); border-left: 5px solid var(--rot); border-radius: 12px; padding: 12px 16px; margin: 1em 0 0; }
.messfehler p { margin: 0; font-size: .97rem; }

/* ===== Messtagebuch mobil: Karten statt Tabelle, lesbare Verlaufsgrafik ===== */
.tb-svg .vl-y, .tb-svg .vl-x { font-size: 13px; }
.tb-svg .tb-einheit { font-size: 12px; fill: var(--leise); }
@media (max-width: 560px) {
  .tb-verlauf { padding: 10px 8px 2px; }
  .tb-liste .tabelle-scroll { overflow-x: visible; }
  .tb-tabelle, .tb-tabelle tbody, .tb-tabelle tr, .tb-tabelle td { display: block; width: 100%; }
  .tb-tabelle { background: transparent; }
  .tb-tabelle thead { display: none; }
  .tb-tabelle tr { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .tb-tabelle td { border: 0; padding: 0; font-size: .92rem; }
  .tb-tabelle td[data-feld="zeit"] { grid-column: 1; color: var(--leise); font-size: .85rem; }
  .tb-tabelle td[data-feld="aktion"] { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: auto; }
  .tb-tabelle td[data-feld="wert"] { grid-column: 1; font-size: 1rem; }
  .tb-tabelle td[data-feld="situation"], .tb-tabelle td[data-feld="einordnung"] { grid-column: 1 / -1; }
  .tb-tabelle td[data-feld="situation"]::before { content: "Messzeitpunkt: "; color: var(--leise); }
}