/* =========================================================================
   Kinderarzt Dr. Monika Peter – Stylesheet
   Farbwelt von kinderarzt.net (Violett, siehe Lila-Skala unten)
   ========================================================================= */

:root {
    /* Abstand, den ein Sprungziel (#anker) von oben braucht. Der Kopf klebt
       am oberen Rand und verdeckt sonst genau die Überschrift, zu der man
       gesprungen ist – bei umgebrochener Kontaktleiste sind das 184 px, auf
       dem Desktop 153. Ein fester Wert kann das nicht treffen; --header-h
       setzt site.js auf die tatsächlich gemessene Höhe. */
    --sprungabstand: calc(var(--header-h, 150px) + 16px);

    /* Die Lila-Skala. Es gibt genau einen Violettton auf dieser Seite: #8e4baf,
       den Akzent der ursprünglichen kinderarzt.net-Seite. Alles Weitere sind
       Stufen davon - die hellen mit Weiß aufgehellt, die dunklen abgedunkelt.
       Wer eine Fläche, Linie oder Zeichnung einfärbt, nimmt eine dieser Stufen
       und legt keinen neuen Ton an. */
    --lila-tief:    #4a2a63;   /* tiefster Ton: Schlaf, Legenden */
    --lila-dunkel:  #6f3a8c;   /* Überschriften, Hover, Schatten */
    --lila:         #8e4baf;   /* die Marke */
    --lila-mittel:  #bb93cf;   /* Flächen in Zeichnungen */
    --lila-hell:    #ccaedb;   /* helle Flächen, Achsen, Verweise auf Dunkel */
    --lila-linie:   #ddc9e7;   /* Akzentlinien: Chips, Kacheln, Kästen */
    --lila-flaeche: #f3ecf8;   /* weiche Fläche, Hover, Text auf Dunkel */
    /* Der dunkle Schleier über Bildern und hinter Dialogen - als Zahlen,
       weil er immer mit einer Deckkraft zusammen auftritt. */
    --lila-schleier: 37, 21, 50;
    /* Die historischen Namen zeigen auf die Stufen der Skala. */
    --blue:        var(--lila);
    --blue-dark:   var(--lila-dunkel);
    --blue-light:  var(--lila-flaeche);
    --green:       #58b368;
    --green-dark:  #3d9150;
    --accent:      #f4a72c;
    --ink:         #2e2a33;
    --muted:       #6b6472;
    --line:        #e7e2ec;
    --bg:          #ffffff;
    --bg-soft:     #f9f6fb;
    --radius:      12px;
    --shadow:      0 4px 18px rgba(111, 58, 140, 0.10);
    --maxw:        1140px;
    --font:        system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine:
   fuer manche Menschen ist ein weich scrollender Bildschirm nicht huebsch,
   sondern uebel. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
}
h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); margin: 0 0 .5em; }
/* Lange deutsche Wörter („Perzentilenrechner“, Präparatnamen) trennen statt die Seite auf
   320-px-Handys (iPhone SE, Galaxy S9+) seitlich scrollen zu lassen – Browsertest 02.10.2026 */
h1, h2, h3, h4 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Safari/WebKit gibt Knöpfen und Feldern sonst die Systemschrift (unter Windows sogar Times) */
button, input, select, textarea { font-family: inherit; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.page-narrow { max-width: 820px; }
.text-center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }
.sr-only, .skip-link {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link:focus {
    position: fixed; top: 8px; left: 8px; width: auto; height: auto;
    padding: 10px 16px; background: var(--blue); color: #fff; z-index: 1000; clip: auto;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; padding: .7em 1.4em; border-radius: 999px;
    font-weight: 600; cursor: pointer; border: 2px solid transparent;
    transition: all .15s ease; text-decoration: none; font-size: 1rem;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-lg { padding: .85em 1.8em; font-size: 1.05rem; }
.btn-sm { padding: .45em 1em; font-size: .9rem; }

/* ---------- Admin-Ansicht als Nutzer (Impersonation) ---------- */
.impersonation-banner { background: var(--accent); color: #402c00; font-size: .92rem; }
.impersonation-banner-inner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 20px; flex-wrap: wrap; gap: 8px 16px;
}
.impersonation-banner .btn-sm { background: #402c00; color: #fff; border-color: #402c00; }
.impersonation-banner .btn-sm:hover { background: #241900; }

/* ---------- Header / Topbar ---------- */
.topbar { background: var(--blue-dark); color: #fff; font-size: .92rem; }
.topbar a { color: #fff; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px; flex-wrap: wrap; gap: 6px; }
.topbar-phone { font-weight: 700; }
.topbar-sep { opacity: .5; margin: 0 8px; }
.topbar-status { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.open { background: #6ee787; box-shadow: 0 0 0 3px rgba(110,231,135,.3); }
.status-dot.closed { background: #ff8a8a; }

.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.header-main { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; gap: 20px; }
.logo { display: block; line-height: 0; }
.logo img { width: auto; height: 93px; }

/* ---------- Navigation ---------- */
.main-nav .nav-list { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; }
.nav-list > li { position: relative; }
.nav-list > li > a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink); font-weight: 600; }
.nav-list > li > a:hover { background: var(--blue-light); text-decoration: none; color: var(--blue-dark); }
.nav-cta { background: var(--blue); color: #fff !important; }
.nav-cta:hover { background: var(--blue-dark) !important; }
.sub-menu {
    list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0;
    background: #fff; box-shadow: var(--shadow); border-radius: 10px; min-width: 230px;
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .15s ease; z-index: 50;
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu li a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--ink); }
.sub-menu li a:hover { background: var(--blue-light); text-decoration: none; }

/* Passt ein Untermenü nicht mehr auf den Schirm, scrollt es in sich selbst,
   statt die Seite darunter wegzuschieben (overscroll-behavior). --header-h
   setzt site.js auf die Höhe des klebenden Kopfs; darunter beginnt das Menü.
   Menüs mit zweiter Ebene sind ausgenommen: Ein Scrollbereich würde die
   seitlich aufklappenden Untermenüs abschneiden. Deren erste Ebene ist kurz,
   die zweite begrenzt sich weiter unten selbst. */
@media (min-width: 901px) {
    .sub-menu:not(:has(.sub-menu-2)) {
        max-height: calc(100vh - var(--header-h, 150px) - 16px);
        overflow-y: auto; overscroll-behavior: contain;
    }
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: .2s; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(135deg, var(--blue-light), #fff 70%); padding: 34px 0; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 32px; align-items: center; }
.hero-image {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--blue); font-weight: 700; font-size: .85rem; margin: 0 0 8px; }
.hero h1 { font-size: 1.95rem; margin-bottom: .3em; }
.hero-lead { font-size: 1.05rem; color: var(--muted); margin: 0; }
/* Online-Akutbuchung (KIN-42); am Handy blendet der Block Mobile Startseite das aus */
@media (max-width: 780px) {
    .hero-inner { grid-template-columns: 1fr; gap: 20px; }
    .hero-image { aspect-ratio: 16 / 9; }
}

/* ---------- Grundlayout: Inhalt + rechte Kontakt-Sidebar ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.layout-main { min-width: 0; }
/* Werkzeugseiten im Adminbereich brauchen die volle Breite – die Kontakt-
   Sidebar nimmt Textfeldern mit sehr langen Inhalten zu viel Platz. */
.layout.is-wide { grid-template-columns: minmax(0, 1fr); }
.layout.is-wide > .side-col, .layout.is-wide > aside { display: none; }

.layout-main .container { max-width: none; }          /* Breite kommt jetzt von der Spalte */
.layout-main > .container { padding-left: 0; padding-right: 0; }
.layout-main .hero { border-radius: var(--radius); }
.layout-main > .hero:first-child { margin-top: 40px; }   /* fluchtet mit der Sidebar */
.layout-main > .alert:first-child { margin-top: 24px; }

/* ---------- Kontakt-Sidebar (global, Quelle: PRAXIS_CONTACT) ---------- */
.contact-side { display: flex; flex-direction: column; gap: 16px; margin: 40px 0 60px; font-size: .88rem; line-height: 1.55; }
.side-box { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.side-title {
    margin: 0; padding: 9px 16px; background: var(--bg-soft); color: var(--blue-dark);
    border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0;
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.side-body { padding: 14px 16px 16px; }
.side-name { font-weight: 700; margin: 0; }
.side-sub { color: var(--muted); font-size: .8rem; margin: 1px 0 8px; }
.contact-side address { font-style: normal; margin: 0 0 8px; }
.side-link { font-size: .82rem; }
/* Routenplanung im Kontaktblock: Startort eingeben, Ziel ist die Ordination. */
.route-form { margin-top: 10px; }
.route-form label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.route-form-row { display: flex; gap: 6px; }
.route-form-row input {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-family: inherit; font-size: .85rem;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.route-form-row input:focus { outline: 2px solid var(--blue-light); border-color: var(--blue); }
.route-form-row .btn { flex: 0 0 auto; padding: 7px 12px; }
.side-list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.side-list li { display: flex; gap: 10px; padding: 2px 0; }
.side-list .label { color: var(--muted); flex: 0 0 58px; }
.side-list a, .side-list span:not(.label) { min-width: 0; word-break: break-word; }
.side-hours { width: 100%; border-collapse: collapse; }
.side-hours th { text-align: left; font-weight: 400; padding: 2px 0; }
.side-hours td { text-align: right; padding: 2px 0; white-space: nowrap; color: var(--muted); }
.side-hours .is-today th, .side-hours .is-today td { color: var(--blue-dark); font-weight: 700; }
.side-note { margin: 12px 0 0; font-size: .78rem; color: var(--muted); }
.side-body > .side-note:first-child { margin-top: 0; }
.side-box-account { border-color: var(--blue); }
.side-box-account .side-title { background: var(--blue); color: #fff; }
/* Kontakt und Öffnungszeiten sind die wichtigsten Kästen der Spalte: dezent lila
   getönter Kopf, Rahmen, Schatten; beim Kontakt ein Knopf zum Anrufen gleich unter dem Namen. */
.side-box-kontakt, .side-box-zeiten { border: 1px solid var(--lila-hell); box-shadow: var(--shadow); }
.side-box-kontakt { font-size: .92rem; }
.side-box-kontakt .side-title, .side-box-zeiten .side-title { background: var(--lila-flaeche); color: var(--lila-dunkel); border-bottom-color: var(--lila-linie); font-size: .82rem; }
.side-box-kontakt .side-name { font-size: 1.05rem; color: var(--lila-dunkel); }
.side-anrufen { display: block; text-align: center; margin: 4px 0 12px; font-size: 1rem; font-weight: 700;
                background: var(--lila-flaeche); color: var(--lila-dunkel); border-color: var(--lila-linie); }
.side-anrufen:hover { background: var(--lila); color: #fff; border-color: var(--lila); }
/* Akuttermin aus der Kontakt-Spalte (24.10.2026): öffnet das Fenster, ohne JavaScript /termin/ */
.side-akut { display: block; text-align: center; margin: -4px 0 12px; font-size: 1rem; white-space: normal; }
.side-kontaktseite { display: block; text-align: center; margin-top: 12px; }
.side-account-btn { display: block; text-align: center; margin-top: 8px; }
.side-account-btn:first-of-type { margin-top: 12px; }

@media (max-width: 1000px) {
    .layout { grid-template-columns: 1fr; gap: 0; }
    .contact-side { margin: 30px 0 50px; }
}

/* ---------- Sections / Cards ---------- */
.section-title {
    margin: 0 0 18px; font-size: 1.15rem; color: var(--blue-dark);
    padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.home-section { padding: 30px 0 0; }
@media (max-width: 620px) { .card-grid-3 { grid-template-columns: 1fr; } }
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; transition: border-color .15s ease, box-shadow .15s ease;
    display: block; color: var(--ink);
}
.card:hover { border-color: var(--blue); box-shadow: var(--shadow); text-decoration: none; }
.card h3 { color: var(--blue-dark); font-size: 1.05rem; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.card p { color: var(--muted); margin: 6px 0 0; font-size: .92rem; }

/* Themenbereiche einer Kategorieseite: die Beiträge stehen unter ihrem Thema,
   nicht in einer einzigen langen Liste. */
.topic { margin: 0 0 34px; }
.topic:last-child { margin-bottom: 0; }
.topic-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 4px 16px; margin: 0 0 4px;
}
.topic-title { margin: 0; font-size: 1.05rem; color: var(--blue-dark); }
.topic-link { font-size: .85rem; white-space: nowrap; }
.topic-lead { color: var(--muted); margin: 0 0 14px; font-size: .92rem; max-width: 70ch; }
.tool-card {
    display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
    align-items: baseline;
    align-content: start;   /* Höhenausgleich im Raster nicht auf die Zeilen verteilen – Text bleibt am Titel */
}
.tool-icon { font-size: 1.2rem; }
.tool-card p { grid-column: 1 / -1; }   /* Beschreibung über die volle Kartenbreite */

/* Startseite: Schnellzugang zur Ordination unter der Begrüßung */
.home-ordi { padding-top: 22px; }
.ordi-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ordi-kachel {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; height: 100%; box-sizing: border-box;
    padding: 16px 10px 14px; background: #fff; border: 1px solid var(--lila-linie); border-radius: var(--radius);
    color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ordi-kachel:hover, .ordi-kachel:focus-visible { border-color: var(--lila); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.ordi-symbol { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%;
               background: var(--lila-flaeche); color: var(--lila); transition: background .15s ease, color .15s ease; }
.ordi-kachel:hover .ordi-symbol { background: var(--lila); color: #fff; }
.ordi-kachel strong { color: var(--lila-dunkel); font-size: 1rem; }
.ordi-kachel small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (max-width: 900px) { .ordi-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ordi-kachel:hover { transform: none; } }

/* Startseite: Perzentilenrechner und daneben ein Menü mit allen übrigen
   Werkzeugen. Die Liste legt sich beim Aufklappen über den Inhalt darunter,
   statt die Seite nach unten zu schieben. */
.werkzeug-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.tool-dropdown { position: relative; }
.tool-dropdown > summary {
    list-style: none; cursor: pointer; height: 100%; box-sizing: border-box;
    position: relative;
    display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 44px 18px 20px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tool-dropdown > summary::-webkit-details-marker { display: none; }
.tool-dropdown > summary::after { content: '▾'; position: absolute; right: 18px; top: 18px; color: var(--blue); font-size: 1.2rem; transition: transform .15s ease; }
.tool-dropdown[open] > summary::after { transform: rotate(180deg); }
.tool-dropdown > summary:hover, .tool-dropdown[open] > summary { border-color: var(--blue); box-shadow: var(--shadow); }
.tool-dropdown > summary strong { color: var(--blue-dark); font-size: 1.05rem; }
.tool-dropdown > summary small { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; margin-top: 6px; }
.tool-dropdown-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid var(--blue); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(var(--lila-schleier), .18);
    max-height: 420px; overflow-y: auto;
}
.tool-dropdown ul { list-style: none; margin: 0; padding: 6px 0; }
.tool-dropdown li a { display: flex; gap: 12px; align-items: baseline; padding: 9px 18px; text-decoration: none; }
.tool-dropdown li a:hover, .tool-dropdown li a:focus-visible { background: var(--lila-flaeche); }
.tool-dropdown li strong { display: block; color: var(--blue-dark); }
.tool-dropdown li small { display: block; color: var(--muted); font-size: .88rem; }
.tool-dropdown-panel > p { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--line); font-weight: 600; }
@media (max-width: 620px) {
    .werkzeug-paar { grid-template-columns: 1fr; }
    .tool-dropdown-panel { position: static; margin-top: 6px; max-height: none; }
}

/* ---------- Newsletter (in der Seitenleiste) ---------- */
.newsletter-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.newsletter-form input {
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; font-family: inherit;
}
.newsletter-form input:focus { outline: 2px solid var(--blue-light); border-color: var(--blue); }
.newsletter-form .btn { align-self: flex-start; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input { flex: 1; padding: 12px 16px; border-radius: 999px; border: 0; font-size: 1rem; }

/* ---------- Article / Content ---------- */
.page-content { padding: 40px 0 60px; }
.breadcrumbs { font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.breadcrumbs .sep { margin: 0 8px; opacity: .5; }
.article-header h1 { color: var(--blue-dark); }
.article-meta { color: var(--muted); font-size: .9rem; }

/* Herkunftszeile unter der Überschrift: wer den Text verantwortet und von
   wann die Fassung stammt. Bewusst ruhig gesetzt – sie soll belegen, nicht
   werben, und darf dem ersten Satz des Beitrags nicht die Aufmerksamkeit
   nehmen. Der senkrechte Strich links bindet sie optisch an die Überschrift. */
.article-herkunft {
    margin: 0 0 24px;
    padding: 8px 0 8px 14px;
    border-left: 3px solid var(--blue-light);
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}
.article-herkunft-text a { color: var(--blue-dark); font-weight: 600; }
.article-herkunft-stand {
    display: block;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.article-hero {
    display: block;
    width: 100%; height: auto;   /* so breit wie die Textspalte, Seitenverhältnis bleibt erhalten */
    border-radius: var(--radius); margin: 20px 0; box-shadow: var(--shadow);
}
.article-body { font-size: 1.05rem; }
.article-body img { border-radius: 8px; margin: 1em 0; }
.article-body h2 { margin-top: 1.6em; color: var(--blue-dark); }
.article-body h3 { margin-top: 1.3em; }
.article-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px; text-align: left; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-back { margin-top: 30px; }

/* ---------- Preistabellen (Honorare) ---------- */
.table-wrap { overflow-x: auto; margin: 1em 0; }
.article-body table.price-table { margin: 0; }
.price-table td { vertical-align: top; }
.price-table .price-cell { text-align: right; font-weight: 700; color: var(--blue-dark); white-space: nowrap; width: 1%; }
.price-table tr:nth-child(even) { background: var(--bg-soft); }
.plain-list { list-style: none; margin: 10px 0 0; padding: 0; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.plain-list li:last-child { border-bottom: 0; }
.partner-note { color: var(--muted); font-size: .92rem; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
/* ---------- Beitragslisten (Kategorien & Archivseiten) ---------- */
.entry-list, .article-body .entry-list {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
}
.entry {
    background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.entry:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.entry-title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.entry-title a { color: var(--blue-dark); }
.entry-excerpt { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.entry-tags { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.entry-tags a {
    font-size: .74rem; background: var(--blue-light); color: var(--blue-dark);
    padding: 2px 9px; border-radius: 999px;
}
.entry-tags a:hover { background: var(--blue); color: #fff; text-decoration: none; }

/* ---------- Team ---------- */
.article-body .team-group { margin-top: 2.6em; }
.article-body .team-group-title {
    font-size: 1.25rem; color: var(--blue-dark); margin: 0 0 .9em;
    padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.article-body .team-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px;
}
.article-body .team-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.article-body .team-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(111, 58, 140,.14); }
.article-body .team-photo {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%;
    background: var(--bg-soft); margin: 0; border-radius: 0;
}
.article-body .team-body { padding: 14px 16px 18px; }
.article-body .team-name { font-size: 1.05rem; color: var(--blue-dark); margin: 0 0 2px; }
.article-body .team-role { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 480px) {
    .article-body .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .article-body .team-body { padding: 12px 12px 14px; }
    .article-body .team-name { font-size: .98rem; }
}

/* ---------- Langer Fachartikel: Gliederung, Grafiken, Hinweisboxen ---------- */
.article-body .toc {
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 24px; margin: 2em 0;
}
.article-body .toc h2 { margin-top: 0; font-size: 1.15rem; }
.article-body .toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 32px; }
/* Verschachtelte Gliederung (z. B. Gebrauchs- + Fachinformation): untereinander statt nebeneinander */
.article-body .toc > ol:has(ol) { columns: 1; }
.article-body .toc ol ol { columns: 1; margin: 5px 0 12px; }
.article-body .toc li { margin-bottom: 5px; break-inside: avoid; overflow-wrap: break-word; }
.article-body .toc a { color: var(--ink); }
.article-body .toc a:hover { color: var(--blue-dark); }

.article-body .lead-in { font-size: 1.1rem; color: var(--muted); }
.article-body h2 { scroll-margin-top: var(--sprungabstand); padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.article-body h3 { color: var(--blue-dark); }

.article-figure {
    margin: 2em 0; padding: 20px 22px 16px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.article-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.article-figure figcaption { margin-top: 12px; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.article-figure figcaption strong { color: var(--ink); }
.figure-title { font-size: 1rem; font-weight: 700; color: var(--blue-dark); margin: 0 0 14px; }

/* Diagramm-Grundelemente */
.fig-grid line, .fig-axis { stroke: var(--line); stroke-width: 1; }
.fig-axis-strong { stroke: var(--lila-hell); stroke-width: 1.5; }
.fig-label { font-size: 12px; fill: var(--muted); }
.fig-label-strong { font-size: 12px; fill: var(--ink); font-weight: 600; }
.fig-value { font-size: 12px; fill: var(--blue-dark); font-weight: 700; }
.fig-band { fill: var(--blue-light); }
.fig-bar { fill: var(--blue); }
.fig-band-bar { fill: var(--blue); opacity: .85; }
.fig-bar-soft { fill: var(--lila-hell); }
.fig-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fig-line-dash { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.fig-dot { fill: #fff; stroke: var(--blue-dark); stroke-width: 2; }
.fig-rem { fill: #d9534f; }
.fig-deep { fill: var(--lila-tief); }
.fig-light { fill: var(--lila-mittel); }
.fig-wake { fill: #f4a72c; }

.article-body .infobox, .article-body .warnbox, .article-body .quotebox {
    border-radius: var(--radius); padding: 18px 22px; margin: 1.8em 0;
}
.article-body .infobox { background: var(--blue-light); border-left: 5px solid var(--blue); }
.article-body .warnbox { background: #fdeaea; border-left: 5px solid #c9302c; }
.article-body .quotebox { background: var(--bg-soft); border-left: 5px solid var(--line); font-style: italic; }
.article-body .infobox > :first-child,
.article-body .warnbox > :first-child,
.article-body .quotebox > :first-child { margin-top: 0; }
.article-body .infobox > :last-child,
.article-body .warnbox > :last-child,
.article-body .quotebox > :last-child { margin-bottom: 0; }
.article-body .warnbox h3 { color: #a02622; }
.article-body .warnbox h2 { color: #a02622; border-bottom: 0; padding-bottom: 0; }

/* Glossar: Begriff und Erklärung als Definitionsliste. Der Begriff steht auf
   einer eigenen Zeile über der Erklärung, damit beide beim Sprung aus einem
   Artikel (/glossary/#begriff) zusammen im Blick sind; das Sprungziel bekommt
   Abstand nach oben, sonst verschwindet es hinter dem klebenden Kopf. */
.article-body .glossar-liste { margin: 1.6em 0; }
.article-body .glossar-liste dt {
    font-weight: 700; font-size: 1.08rem; color: var(--blue-dark);
    margin-top: 1.4em; scroll-margin-top: var(--sprungabstand);
}
.article-body .glossar-liste dt:target { background: var(--blue-light); border-radius: 6px; padding: 4px 8px; margin-left: -8px; }
.article-body .glossar-liste dd { margin: .35em 0 0; padding-left: 0; border-left: 3px solid var(--line); padding-left: 14px; }

/* ---------- Zusatzteil unter einem Beipackzettel ----------
   Der Beipackzettel selbst bleibt unveraendert; alles unterhalb der Trennlinie
   ist redaktionelle Ergaenzung und muss als solche erkennbar sein. */
.article-body .addendum-rule {
    border: 0; border-top: 3px double var(--line); margin: 3em 0 0;
}
.article-body .addendum { margin-top: 0; }
.article-body .addendum > .warnbox:first-child { margin-top: 1.4em; }

/* ---------- Beipackzettel im amtlichen Wortlaut (scripts/build_vaccine_leaflets.php)
   Der Text stammt Wort für Wort aus dem PDF der Arzneimittel-Agentur und wird
   nie angetastet; gestaltet wird nur, was das Lesen von 50 bis 130 Seiten
   Behördendeutsch erträglich macht: sichtbare Gliederung und ruhige Tabellen. */
.leaflet-doc { font-size: .97rem; }
.article-body .leaflet-doc .toc ul {
    margin: 0; padding-left: 1.2em; columns: 1; list-style: disc;
}
.article-body .leaflet-doc .toc li { margin-bottom: 6px; }

/* Anhänge des EMA-Dokuments – die oberste Ebene, sonst geht sie zwischen den
   gleich gesetzten Abschnittsnummern unter. */
.article-body .leaflet-doc h2.leaflet-part {
    margin: 3em 0 1.2em; padding: 16px 22px; font-size: 1.2rem; line-height: 1.4;
    color: var(--blue-dark); background: var(--blue-light);
    border: 0; border-left: 5px solid var(--blue); border-radius: var(--radius);
    scroll-margin-top: var(--sprungabstand);
}
.article-body .leaflet-doc h2.leaflet-part:first-of-type { margin-top: 1.2em; }

/* nummerierte Hauptabschnitte (1., 2., 3. …) */
.article-body .leaflet-doc h3 {
    margin-top: 2em; padding-bottom: 5px; font-size: 1.1rem; color: var(--ink);
    border-bottom: 1px solid var(--line); scroll-margin-top: var(--sprungabstand);
}
/* Unterabschnitte (4.1, 4.2 …) */
.article-body .leaflet-doc h4 {
    margin: 1.6em 0 .5em; font-size: 1rem; color: var(--blue-dark); scroll-margin-top: var(--sprungabstand);
}

/* Im PDF fett gesetzte Tabellenzeilen ohne eigene Aussage ("% % % %") */
.article-body .leaflet-doc .leaflet-zeile { margin: .3em 0; font-size: .88rem; color: var(--muted); }

/* Tabellen kommen aus dem Satzspiegel des PDF: Die Spalten entstehen aus
   gemeinsamen linken Kanten, sind unterschiedlich breit und zu einem Fünftel
   bis zwei Fünfteln gar nicht besetzt. Ein volles Gitter macht daraus ein
   Muster aus leeren Kästchen – deshalb nur Linien zwischen den Zeilen, der
   Rahmen sitzt außen um die ganze Tabelle. */
.article-body .leaflet-doc .table-wrap {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; margin: 1.6em 0;
}
.article-body .leaflet-doc table {
    font-size: .87rem; margin: 0; border: 0; background: transparent;
}
.article-body .leaflet-doc th,
.article-body .leaflet-doc td {
    padding: 10px 14px; vertical-align: top; text-align: left;
    border: 0; border-bottom: 1px solid var(--line);
    hyphens: auto; overflow-wrap: break-word;
}
.article-body .leaflet-doc tr:last-child > th,
.article-body .leaflet-doc tr:last-child > td { border-bottom: 0; }

.article-body .leaflet-doc thead th {
    background: var(--blue-light); color: var(--blue-dark);
    border-bottom: 2px solid var(--blue); white-space: normal;
}
/* Was im PDF fett gesetzt war, liest der Umwandler als Kopfzelle – mitten in
   der Tabelle ist das keine Überschrift, sondern nur eine betonte Zeile. */
.article-body .leaflet-doc tbody th { background: transparent; font-weight: 600; }
.article-body .leaflet-doc tbody tr:nth-child(even) { background: #fbfafc; }

/* Ab sechs Spalten reicht die Seitenbreite nicht mehr – ohne Mindestbreite
   drückt der Browser die Spalten so eng, dass jedes Wort einzeln umbricht.
   Lieber waagrecht scrollen als senkrecht buchstabieren. */
.article-body .leaflet-doc table.breit { width: auto; min-width: 100%; }
.article-body .leaflet-doc table.breit th,
.article-body .leaflet-doc table.breit td { min-width: 11em; hyphens: none; }

/* Breite Tabellen scrollen waagrecht; die Schatten an den Rändern zeigen an,
   dass rechts noch etwas kommt. */
.article-body .leaflet-doc .table-wrap {
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0,
        linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(46,42,51,.10), rgba(46,42,51,0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(46,42,51,.10), rgba(46,42,51,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ---------- Interaktive Artikel-Grafiken (Schlafzyklus-Nacht, Chronotyp-Uhr) ---------- */
.article-figure .fig-intro { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
/* Foto statt Zeichnung in einer Grafik: Es traegt dieselbe Aussage wie ein
   Schaubild und bekommt deshalb dieselbe Beschriftung darunter. */
.article-figure .fig-foto { margin: 0; }
.article-figure .fig-foto img {
    display: block; width: 100%; max-width: 380px; height: auto;
    border-radius: 14px; border: 1px solid var(--line); background: #fff;
}
.article-figure .fig-foto figcaption {
    margin-top: 8px; max-width: 380px; text-align: center;
    font-size: .88rem; color: var(--muted);
}
.age-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.age-btn {
    padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font: inherit; font-size: .85rem; cursor: pointer; transition: all .15s ease;
}
.age-btn:hover { border-color: var(--blue); }
.age-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; }

/* --- Ernaehrungsberater ---------------------------------------------------
   Die Alterseingabe ist der Einstieg in das ganze Werkzeug und steht deshalb
   als eigene Karte oben, nicht als Formularzeile im Fliesstext. Der
   Warnhinweis sitzt klein darunter: Er gehoert dorthin, wo entschieden wird,
   und nicht als Riegel vor die Seite. */
.advisor-input {
    margin: 20px 0 28px; padding: 20px 22px 16px;
    background: var(--blue-light); border: 1px solid var(--line);
    border-radius: var(--radius); scroll-margin-top: var(--sprungabstand);
}
.advisor-input-titel { margin: 0 0 14px; font-size: 1.35rem; color: var(--blue-dark); }
.advisor-input-wege { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-end; }
.advisor-weg {
    flex: 1 1 260px; margin: 0; padding: 14px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.advisor-weg-titel { margin: 0 0 8px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.advisor-alter-felder { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.advisor-alter-felder label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.advisor-alter-felder input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.advisor-alter-felder input[type="number"] { width: 92px; }
.advisor-alter-datum input { width: 100%; min-width: 170px; }
.advisor-alter-felder input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.advisor-hinweis {
    margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: .82rem; line-height: 1.55; color: var(--muted);
}
.advisor-hinweis strong { color: var(--ink); }

.advisor-result { scroll-margin-top: var(--sprungabstand); }
.advisor-kopf { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-start; margin-bottom: 8px; }
.advisor-kopf-text { flex: 1 1 320px; }
/* Phasenbild: eigene Zeile, nicht mehr Spalte neben dem Text. */
.advisor-bild { margin: 4px auto 18px; max-width: 560px; }
.advisor-bild img {
    display: block; width: 100%; height: auto; border-radius: 14px;
    border: 1px solid var(--line); background: #fff;
}
.advisor-bild figcaption {
    margin-top: 8px; font-size: .84rem; color: var(--muted); line-height: 1.45;
}
.advisor-kopf-text h2 { margin-top: 0; }
.advisor-phase-spanne { margin: -6px 0 10px; font-size: .88rem; color: var(--muted); }
.advisor-pdf { margin: 16px 0 0; }
.advisor-pdf-tip { display: block; margin-top: 6px; font-size: .8rem; color: var(--muted); }

.chart-scroll { overflow-x: auto; }
.advisor-chart { display: block; width: 100%; min-width: 560px; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-tick { font-size: 11px; fill: var(--muted); }
.chart-aktivflaeche { fill: var(--blue-light); }
.chart-balken-milch { fill: var(--lila-mittel); }
.chart-balken-beikost { fill: var(--green); }
.chart-gruppe:hover .chart-balken-milch { fill: var(--blue); }
.chart-gruppe:hover .chart-balken-beikost { fill: var(--green-dark); }
.chart-legende { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.chart-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 14px; }
.chart-legende .chart-key:first-child { margin-left: 0; }
.chart-key-milch { background: var(--lila-mittel); }
.chart-key-beikost { background: var(--green); }

/* Balkendiagramm in Ratgeberartikeln.
   Die bisherigen chart-*-Klassen gehoeren zum Ernaehrungsberater und tragen
   dessen Farben im Namen. Diese hier sind allgemein: ein waagrecht
   scrollbarer Rahmen und Balken, die beim Ueberfahren ihren Titel zeigen.
   Die Erklaerung selbst steht als <title> im SVG - das liest auch ein
   Screenreader vor, ohne dass dafuer JavaScript noetig waere. */
.chart-wrap { width: 100%; overflow-x: auto; margin: 14px 0 10px; }
.chart-bar rect { transition: fill .15s ease; cursor: help; }
.chart-bar:hover rect, .chart-bar:focus rect { fill: var(--blue); }
.chart-bar:focus { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Portionstabelle des Ernaehrungsberaters. Bis September 2026 stand links
   daneben ein Tellerbild; die drei Spalten wurden dadurch so schmal, dass
   jedes Wort einzeln umbrach. Die Tabelle nimmt jetzt die volle Breite,
   auf schmalen Schirmen wird jede Zeile zu einer eigenen kleinen Karte. */
.portionen-tabelle { width: 100%; border-collapse: collapse; }
.portionen-tabelle thead th {
    padding: 6px 12px 8px; text-align: left; font-size: .74rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    border-bottom: 2px solid var(--line);
}
.portionen-tabelle tbody th, .portionen-tabelle tbody td {
    padding: 11px 12px; text-align: left; vertical-align: top; line-height: 1.45;
    border-bottom: 1px solid var(--line);
}
.portionen-tabelle tbody tr:last-child th, .portionen-tabelle tbody tr:last-child td { border-bottom: 0; }
.portionen-tabelle tbody tr:hover th, .portionen-tabelle tbody tr:hover td { background: var(--blue-light); }
.portionen-tabelle tbody th { font-weight: 700; color: var(--blue-dark); }
.portionen-tabelle .sp-was  { width: 26%; }
.portionen-tabelle .sp-mass { width: 28%; }
.portionen-tabelle .sp-wie  { width: 46%; }
@media (max-width: 560px) {
    /* Karten statt Spalten: die Kopfzeile entfaellt, jede Angabe traegt
       ihre Beschriftung selbst. */
    .portionen-tabelle thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
    .portionen-tabelle tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .portionen-tabelle tbody tr:last-child { border-bottom: 0; }
    .portionen-tabelle tbody th, .portionen-tabelle tbody td { display: block; width: auto; padding: 1px 0; border: 0; }
    .portionen-tabelle tbody th { font-size: 1rem; margin-bottom: 3px; }
    .portionen-tabelle tbody td::before { content: attr(data-label) ": "; color: var(--muted); font-size: .82rem; }
    .portionen-tabelle tbody tr:hover th, .portionen-tabelle tbody tr:hover td { background: none; }
}
.fig-quelle { margin: 12px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* Tellermodell des Ernaehrungsberaters. Als Zeichnung im Dokument, nicht als
   Bilddatei: Die frueheren Fotos lagen nie auf dem Server, die Seite zeigte
   an ihrer Stelle nur den Ersatztext. Jede Flaeche traegt ihren <title> und
   ist mit der Tastatur erreichbar - die Erklaerung braucht kein JavaScript. */
.teller-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 6px auto 0; }
.teller-rand { fill: #fff; stroke: var(--line); stroke-width: 2; }
/* Die Flaechen sind anklickbar (Beispiele im Erklaer-Popup), deshalb der
   Zeigefinger statt des Fragezeichens. */
.teller-teil { cursor: pointer; }
.teller-teil path { stroke: #fff; stroke-width: 3; transition: stroke .15s ease; }
.teller-teil text { fill: currentColor; text-anchor: middle; font-weight: 700; font-size: 20px; }
.teller-teil .teller-anteil { font-weight: 600; font-size: 15px; }
.teller-teil:hover path, .teller-teil:focus path { stroke: currentColor; }
.teller-teil:focus { outline: 2px solid var(--blue); outline-offset: 3px; }
.teller-gemuese { color: #2f7a41; }
.teller-gemuese path { fill: #e8f5ec; }
.teller-beilage { color: #8a5a00; }
.teller-beilage path { fill: #fdf1de; }
.teller-eiweiss { color: var(--blue-dark); }
.teller-eiweiss path { fill: var(--blue-light); }
.teller-wasser { color: #3f6484; }
.teller-wasser .teller-glas { fill: #fff; stroke: #c3d7e6; stroke-width: 3; }
.teller-wasser .teller-fuellung { fill: #eaf1f7; stroke: none; }
.teller-wasser:hover .teller-glas, .teller-wasser:focus .teller-glas { stroke: currentColor; }
.teller-wasser text { font-size: 18px; }

/* Tagesverlauf des Ernaehrungsberaters: eine Zeitachse aus Textbausteinen.
   Bewusst kein Diagramm - auf breiten Schirmen stehen die Mahlzeiten
   nebeneinander auf einer Linie, auf schmalen untereinander an einer
   senkrechten Linie. Beides bleibt vorlesbar und druckbar. */
.tagesleiste {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; gap: 18px 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tl-punkt {
    position: relative; padding: 26px 4px 0; text-align: center;
}
/* Die Linie: ein durchgehender Strich hinter allen Punkten. Sie entsteht aus
   je einem Segment pro Punkt, damit sie beim Umbruch mitwandert. */
.tl-punkt::before {
    content: ""; position: absolute; top: 9px; left: -5px; right: -5px;
    height: 3px; background: var(--line);
}
/* Die Linie beginnt am ersten und endet am letzten Punkt, statt ins Leere zu
   laufen. */
.tagesleiste .tl-punkt:first-child::before { left: 50%; }
.tagesleiste .tl-punkt:last-child::before { right: 50%; }
.tl-punkt::after {
    content: ""; position: absolute; top: 3px; left: 50%; margin-left: -8px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--line);
}
.tl-haupt::after { border-color: #2f7a41; background: #e8f5ec; }
.tl-zwischen::after { border-color: #b98a2a; background: #fdf1de; }
.tl-marke::after { border-color: var(--blue); background: var(--blue-light); }
.tl-zeit { display: block; font-size: .78rem; color: var(--muted); }
.tl-titel { display: block; font-weight: 700; color: var(--blue-dark); margin: 1px 0 4px; }
.tl-text { display: block; font-size: .86rem; line-height: 1.5; color: var(--ink); }
.tl-band {
    margin: 20px 0 0; padding: 10px 14px; border-radius: 10px;
    background: #eaf1f7; color: #33536e; font-size: .88rem; line-height: 1.55;
}
.tl-band strong { color: #24425c; }
.tl-warn-titel { margin: 22px 0 8px; font-weight: 700; color: var(--blue-dark); }
.tl-warnungen {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tl-warnung {
    padding: 12px 14px; border: 1px solid #f0d4d4; border-left: 4px solid #b13b3b;
    border-radius: 10px; background: #fdf7f7;
}
.tl-warnung p { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; }
.tl-warnung p:last-child { margin-bottom: 0; }
.tl-warnung-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tl-warnung-titel { font-weight: 700; color: #8f2f2f; }
.tl-warnung-wann { font-size: .78rem; color: var(--muted); }
.tl-tun { color: #2f7a41; }
.tl-tun::before { content: "Besser: "; font-weight: 700; }

/* Tagescheck: Eingabe eines Tages und der daraus gezeichnete Teller.
   Der Abschnitt existiert nur mit JavaScript - ohne bleibt er hidden. */
.advisor-tagescheck {
    margin: 26px 0 0; padding: 18px 20px 20px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft);
}
.advisor-tagescheck h3 { margin-top: 0; }
.tc-eingabe { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 16px 0 0; }
.tc-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tc-block-titel { margin: 0 0 8px; font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tc-feld {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--line);
}
.tc-feld:last-child { border-bottom: 0; }
.tc-feld-text { display: flex; flex-direction: column; min-width: 0; }
.tc-feld-titel { font-weight: 600; font-size: .92rem; }
.tc-feld-beispiel { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.tc-feld-aktiv .tc-feld-titel { color: var(--blue-dark); }
.tc-steuer { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tc-knopf {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; color: var(--blue-dark); font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.tc-knopf:hover, .tc-knopf:focus-visible { border-color: var(--blue); background: var(--blue-light); }
.tc-zahl { min-width: 30px; text-align: center; font-weight: 700; font-size: 1rem; color: var(--ink); }
.tc-aktionen { margin: 14px 0 0; }
.tc-ergebnis { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.tc-ergebnis-titel { margin: 0 0 10px; font-weight: 700; color: var(--blue-dark); }
/* Was zu aendern ist - steht ueber allem anderen und ist deshalb auch
   optisch der Block, den man zuerst sieht. */
.tc-plan {
    margin: 0 0 22px; padding: 16px 18px;
    border: 1px solid var(--lila-linie); border-left: 5px solid var(--blue);
    border-radius: 12px; background: #fff;
}
.tc-plan-gut { border-color: #b6ddc2; border-left-color: #2f7a41; background: #f6fbf7; }
.tc-plan-titel { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--blue-dark); }
.tc-plan-gut .tc-plan-titel { color: #2f7a41; }
.tc-plan-text { margin: 0 0 14px; font-size: .88rem; line-height: 1.55; color: var(--muted); }

/* Balken je Gruppe: eingetragene Menge, daneben die Richtung. Der Pfeil
   traegt nie die Aussage allein - neben ihm steht immer der Text, und der
   Zeilenrahmen ist zusaetzlich gefaerbt. */
.tc-balken { display: grid; gap: 8px; }
.tc-balken-zeile {
    display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 1fr) minmax(150px, 1.3fr);
    align-items: center; gap: 6px 12px;
    padding: 7px 10px; border-radius: 9px; border-left: 4px solid var(--line); background: var(--bg-soft);
}
.tc-balken-name { font-weight: 600; font-size: .9rem; }
.tc-balken-spur { display: block; height: 22px; border-radius: 6px; background: var(--line); overflow: hidden; }
.tc-balken-wert {
    display: flex; align-items: center; justify-content: flex-end;
    height: 100%; min-width: 22px; padding: 0 6px; border-radius: 6px;
    font-size: .8rem; font-weight: 700; color: #fff; background: var(--blue);
}
/* Die Null steht ausserhalb der Fuellung, sonst waere sie unsichtbar. */
.tc-balken-wert.tc-balken-null {
    min-width: 0; padding: 0; background: none; color: var(--muted);
    justify-content: flex-start; overflow: visible;
}
.tc-balken-wert.tc-balken-null { padding-left: 6px; }
.tc-balken-marke { display: flex; align-items: baseline; gap: 6px; }
.tc-balken-pfeil { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.tc-balken-text { font-size: .84rem; line-height: 1.4; }
.tc-balken-weniger, .tc-balken-weg { border-left-color: #b13b3b; background: #fdf7f7; }
.tc-balken-weniger .tc-balken-wert, .tc-balken-weg .tc-balken-wert { background: #b13b3b; }
.tc-balken-weniger .tc-balken-pfeil, .tc-balken-weg .tc-balken-pfeil,
.tc-balken-weniger .tc-balken-text, .tc-balken-weg .tc-balken-text { color: #8f2f2f; }
.tc-balken-mehr { border-left-color: #2f7a41; background: #f6fbf7; }
.tc-balken-mehr .tc-balken-wert { background: #2f7a41; }
.tc-balken-mehr .tc-balken-pfeil, .tc-balken-mehr .tc-balken-text { color: #1f6b36; }
.tc-balken-passt { border-left-color: var(--lila-hell); }
.tc-balken-passt .tc-balken-wert { background: var(--lila-mittel); }
.tc-balken-passt .tc-balken-pfeil, .tc-balken-passt .tc-balken-text { color: var(--muted); }

/* Die beiden Teller nebeneinander: empfohlen und eingetragen. */
.tc-vergleich { display: flex; flex-wrap: wrap; gap: 18px 26px; justify-content: center; }
.tc-teller-block { margin: 0; flex: 1 1 220px; max-width: 260px; text-align: center; }
.tc-teller-name { margin-top: 6px; font-size: .84rem; font-weight: 700; color: var(--blue-dark); }
.tc-teller-hinweis { margin: 12px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.tc-teller { max-width: 100%; margin: 0 auto; }
.tc-teller .teller-teil text { font-size: 17px; }
.tc-teller .teller-teil .teller-anteil { font-size: 15px; }
.tc-teller { flex: 0 1 260px; max-width: 260px; margin: 0; }
.tc-leer { fill: var(--bg-soft); }
.tc-legende { flex: 1 1 220px; list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.tc-legende li { padding: 3px 0 3px 20px; position: relative; }
.tc-legende li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 3px; }
.tc-legende-gemuese::before { background: #e8f5ec; border: 1px solid #2f7a41; }
.tc-legende-beilage::before { background: #fdf1de; border: 1px solid #8a5a00; }
.tc-legende-eiweiss::before { background: var(--blue-light); border: 1px solid var(--blue-dark); }
.tc-meldungen { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tc-meldung { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; background: #fff; }
.tc-meldung p { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; }
.tc-meldung p:last-child { margin-bottom: 0; }
.tc-meldung-titel { font-weight: 700; }
.tc-gut { border-left-color: #2f7a41; background: #f6fbf7; }
.tc-gut .tc-meldung-titel { color: #2f7a41; }
.tc-hinweis { border-left-color: #b98a2a; background: #fffdf8; }
.tc-hinweis .tc-meldung-titel { color: #8a5a00; }
.tc-warnung { border-left-color: #b13b3b; background: #fdf7f7; }
.tc-warnung .tc-meldung-titel { color: #8f2f2f; }
.tc-tun { color: #2f7a41; }
.tc-tun::before { content: "Besser: "; font-weight: 700; }
.tc-gut .tc-tun::before { content: ""; }
.tc-quelle { font-size: .78rem !important; color: var(--muted); }
.tc-schluss { margin: 16px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.55; }

.pc-verweis {
    margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
    background: var(--blue-light); font-size: .9rem; line-height: 1.5;
}

/* ---------- Produkt-Check ---------- */
/* Der Buchstabe steht nie allein: In der Kachel folgt ihm immer der Satz,
   der ihn einordnet. Das ist der Zweck des Werkzeugs. */
.pc-klasse { margin: 0 0 26px; }
.pc-klasse-kurz { margin: -6px 0 10px; color: var(--muted); font-size: .92rem; }
.pc-skala { display: flex; gap: 6px; margin: 0 0 12px; }
.pc-note {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    font-weight: 800; font-size: 1.05rem; color: #fff;
}
.pc-note-a { background: #1a7a3c; }
.pc-note-b { background: #6aa532; }
.pc-note-c { background: #c8a200; color: #3a2e00; }
.pc-note-d { background: #d97d1a; }
.pc-note-e { background: #c0392b; }
.pc-suche { scroll-margin-top: var(--sprungabstand); }
.pc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 10px; }
.pc-feld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 280px; }
.pc-feld span { font-size: .86rem; color: var(--muted); }
.pc-feld input {
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: #fff;
}
.pc-feld input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pc-alterhinweis { margin: 4px 0 0; font-size: .86rem; color: var(--muted); }
.pc-status { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.pc-abschnitt-titel { margin: 20px 0 8px; font-weight: 700; color: var(--blue-dark); }
.pc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pc-treffer-knopf {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font: inherit; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pc-treffer-knopf:hover, .pc-treffer-knopf:focus-visible { border-color: var(--blue); background: var(--blue-light); }
.pc-treffer-name { font-weight: 600; }
.pc-treffer-unter { font-size: .8rem; color: var(--muted); }
.pc-detail { margin: 20px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.pc-titel { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--blue-dark); }
.pc-unter { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.pc-werte { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pc-wert { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 1px; }
.pc-wert-titel { font-size: .8rem; color: var(--muted); }
.pc-wert-zahl { font-size: 1.25rem; font-weight: 800; }
.pc-wert-wort { font-weight: 700; font-size: .9rem; }
.pc-wert-einheit { font-size: .76rem; color: var(--muted); }
.pc-gruen { border-color: #b6ddc2; background: #f2faf5; }
.pc-gruen .pc-wert-zahl, .pc-gruen .pc-wert-wort { color: #1f6b36; }
.pc-gelb { border-color: #f0dcb4; background: #fffdf6; }
.pc-gelb .pc-wert-zahl, .pc-gelb .pc-wert-wort { color: #8a5a00; }
.pc-rot { border-color: #eec4c4; background: #fdf6f6; }
.pc-rot .pc-wert-zahl, .pc-rot .pc-wert-wort { color: #a83232; }
.pc-unbekannt .pc-wert-zahl { font-size: 1rem; color: var(--muted); font-weight: 600; }
.pc-klassen-zeile { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 14px 0 0; }
.pc-kachel { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pc-kachel-titel { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pc-kachel-text { font-size: .86rem; line-height: 1.5; color: var(--ink); }
.pc-nova { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .88rem; }
.pc-nova-1 { background: #e8f5ec; color: #1f6b36; }
.pc-nova-2 { background: #eef4f9; color: #3f6484; }
.pc-nova-3 { background: #fdf1de; color: #8a5a00; }
.pc-nova-4 { background: #fdeaea; color: #a83232; }
.pc-meldungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pc-meldung { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; background: #fff; }
.pc-meldung p { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; }
.pc-meldung p:last-child { margin-bottom: 0; }
.pc-meldung-titel { font-weight: 700; }
.pc-meldung.pc-gut { border-left-color: #2f7a41; background: #f6fbf7; }
.pc-meldung.pc-gut .pc-meldung-titel { color: #2f7a41; }
.pc-meldung.pc-hinweis { border-left-color: #b98a2a; background: #fffdf8; }
.pc-meldung.pc-hinweis .pc-meldung-titel { color: #8a5a00; }
.pc-meldung.pc-warnung { border-left-color: #b13b3b; background: #fdf7f7; }
.pc-meldung.pc-warnung .pc-meldung-titel { color: #8f2f2f; }
.pc-quelle { font-size: .78rem !important; color: var(--muted); }
.pc-alternativen { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.55; }
.pc-alternativen li { margin-bottom: 4px; }
.pc-datenquelle { margin: 16px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 560px) {
    /* Senkrechte Achse: die Linie laeuft links, die Punkte sitzen darauf. */
    .tagesleiste { grid-template-columns: 1fr; gap: 0; }
    .tl-punkt { padding: 0 0 16px 28px; text-align: left; }
    .tl-punkt::before { top: 0; bottom: 0; left: 7px; right: auto; width: 3px; height: auto; }
    .tl-punkt:last-child::before { bottom: 50%; }
    .tl-punkt::after { top: 2px; left: 0; margin-left: 0; }
    .tl-zeit { display: inline; margin-right: 8px; }
    .tl-titel { display: inline; }
    .tl-text { margin-top: 3px; }
}

.advisor-wissen { scroll-margin-top: var(--sprungabstand); }
.wissen-liste { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wissen-karte {
    padding: 16px 18px; background: #fff; border: 1px solid var(--line);
    border-left: 4px solid var(--blue); border-radius: 10px;
}
.wissen-karte h3 { margin: 6px 0 8px; font-size: 1.05rem; }
.wissen-karte p { margin: 0 0 8px; font-size: .92rem; line-height: 1.6; }
.wissen-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; font-size: .74rem; }
.wissen-meta span { padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); }
.wissen-meta .wissen-jahr { background: var(--blue-light); color: var(--blue-dark); font-weight: 700; }
.wissen-folge { color: var(--ink); }
.wissen-quelle { margin: 0 !important; font-size: .8rem !important; color: var(--muted); }
.night-divider { stroke: #fff; stroke-width: 2; }
.night-outline { fill: none; stroke: var(--line); stroke-width: 1; rx: 4; }
.fig-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.fig-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.fig-legend-swatch-rem { background: #d9534f; }
.fig-legend-swatch-deep { background: var(--lila-tief); }
.night-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.night-stats strong { color: var(--blue-dark); }

.clock-wrap { display: flex; justify-content: center; margin: 6px 0 10px; }
#clock-svg { width: 100%; max-width: 300px; height: auto; }
.clock-face { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.clock-tick { stroke: var(--line); stroke-width: 1; }
.clock-tick-major { stroke: var(--muted); stroke-width: 1.5; }
.clock-hour-label { font-size: 11px; fill: var(--muted); }
.clock-sleep-arc { fill: none; stroke: var(--blue); stroke-width: 30; stroke-linecap: round; opacity: .82; }
.clock-marker { fill: #fff; stroke: var(--blue-dark); stroke-width: 2.5; }
.clock-marker-label { font-size: 12px; font-weight: 700; fill: var(--blue-dark); }

.age-slider-wrap { max-width: 420px; margin: 4px auto 6px; text-align: center; }
.age-slider-wrap label { display: block; margin-bottom: 6px; font-size: .92rem; }
.age-slider-wrap label strong { color: var(--blue-dark); }
.age-slider-wrap input[type="range"] { width: 100%; accent-color: var(--blue); }
.slider-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.clock-readout { text-align: center; font-size: .92rem; margin: 10px 0 0; color: var(--muted); }
.clock-readout strong { color: var(--blue-dark); }

.article-body .source-list { font-size: .88rem; color: var(--muted); }
.article-body .source-list li { margin-bottom: 7px; }
@media (max-width: 620px) { .article-body .toc ol { columns: 1; } }

/* ---------- Interaktive Artikel-Grafiken (Fieber: Messmethode, Alarmzeichen-Ampel) ---------- */
.ampel-panel { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.ampel-row { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.ampel-row:last-child { border-bottom: none; }
.ampel-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.ampel-row.is-red { background: #fdeaea; }
.ampel-row.is-red .ampel-dot { background: #c9302c; }
.ampel-row.is-yellow { background: #fef6e7; }
.ampel-row.is-yellow .ampel-dot { background: var(--accent); }
.ampel-row.is-green { background: #eef8f0; }
.ampel-row.is-green .ampel-dot { background: var(--green-dark); }
.ampel-row-title { font-weight: 700; margin: 0 0 4px; }
.ampel-row p { margin: 0; font-size: .92rem; }
.ampel-action {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: .95rem;
}
.ampel-action.is-red { background: #c9302c; color: #fff; }
.ampel-action.is-yellow { background: var(--accent); color: #4a3400; }
.ampel-action.is-green { background: var(--green-dark); color: #fff; }
.method-panel { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.method-panel h4 { margin: 0 0 8px; color: var(--blue-dark); font-size: 1.05rem; }
.method-panel p { margin: 0 0 10px; }
.method-panel .method-not { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .88rem; color: var(--muted); }
/* Ueberschrift innerhalb eines .method-panel. Wurde von den Umschalter-Figuren
   schon verwendet, hatte aber keine eigene Regel und fiel auf den Absatzstil
   zurueck - eine Panelueberschrift sah damit aus wie ihr erster Satz. */
.method-panel .method-title { margin: 0 0 10px; color: var(--blue-dark); font-size: 1.05rem; font-weight: 600; }

/* Vergleichsliste des Ballaststoff-Rechners (Ratgeber "Staerke bei Kindern").
   Jede Zeile nennt Stelle, Zahl, einen Balken zum Groessenvergleich und die
   Herleitung. Die eigenen Umrechnungen sind schraffiert, damit sie nicht wie
   ein Behoerdenwert aussehen - dieselbe Unterscheidung wie in den Diagrammen. */
.st-rechner-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.st-rechner-liste li { margin: 0 0 14px; }
.st-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-name { font-weight: 600; color: var(--blue-dark); font-size: .95rem; }
.st-zahl { font-weight: 700; color: var(--blue-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-spur { display: block; height: 9px; margin: 5px 0 4px; background: var(--line); border-radius: 5px; overflow: hidden; }
.st-balken { display: block; height: 100%; background: var(--lila); border-radius: 5px; }
.st-balken.is-eigen {
    background-image: repeating-linear-gradient(45deg, var(--lila) 0 2px, var(--lila-linie) 2px 6px);
}
.st-erl { display: block; font-size: .84rem; color: var(--muted); }
.method-reliability { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.method-reliability.high { background: #eef8f0; color: var(--green-dark); }
.method-reliability.medium { background: #fef6e7; color: #8a6300; }

/* ---------- Fieber-Thermostat ---------- */
.thermostat-panel { padding: 8px 4px 4px; }
.thermostat-stepdesc { font-size: .92rem; color: var(--ink); background: var(--bg-soft); border-radius: 8px; padding: 10px 14px; margin: 0 0 28px; min-height: 2.6em; }
.thermostat-track { position: relative; height: 90px; margin: 0 10px 18px; border-top: 3px solid var(--line); }
.thermostat-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); padding-top: 6px; font-variant-numeric: tabular-nums; }
.thermostat-marker { position: absolute; transform: translateX(-50%); transition: left .5s ease; text-align: center; white-space: nowrap; }
.thermostat-marker-soll { top: -30px; color: var(--fever, #c9302c); }
.thermostat-marker-soll .thermostat-marker-icon { display: block; font-size: 1.2rem; line-height: 1; color: #c9302c; }
.thermostat-marker-soll .thermostat-marker-label { display: block; font-size: .72rem; font-weight: 700; color: #c9302c; }
.thermostat-marker-ist { top: 8px; }
.thermostat-marker-ist .thermostat-marker-icon { display: block; font-size: 1.3rem; line-height: 1; }
.thermostat-marker-ist .thermostat-marker-label { display: block; font-size: .72rem; font-weight: 700; color: var(--blue-dark); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-top: 2px; }
.thermostat-readout { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.thermostat-readout strong { color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.thermostat-feeling { font-weight: 600; color: var(--ink); }

/* ---------- Fieber vs. Überhitzung Vergleich ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
.compare-col { border-radius: 10px; padding: 16px 14px; text-align: center; }
.compare-col-fever { background: #fdeaea; }
.compare-col-heat { background: #fef2e2; }
.compare-heading { font-weight: 700; font-size: 1.02rem; margin: 0 0 10px; }
.compare-step { background: rgba(255,255,255,.7); border-radius: 8px; padding: 8px 10px; font-size: .88rem; }
.compare-arrow { font-size: 1rem; color: var(--muted); line-height: 1.6; }
.compare-summary { text-align: center; font-size: .92rem; color: var(--ink); margin: 0; }
@media (max-width: 620px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---------- Alters-/Temperaturkurve (Zeitstrahl) ---------- */
.tempchart-wrap { width: 100%; overflow-x: auto; }
#tempchart-svg { width: 100%; height: auto; min-width: 560px; overflow: visible; }
.tempchart-grid line { stroke: var(--line); stroke-width: 1; }
.tempchart-axislabel { font-size: 12px; fill: var(--muted); text-anchor: end; font-variant-numeric: tabular-nums; }
.tempchart-noband { fill: var(--bg-soft); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tempchart-nobandcard { fill: #fff; stroke: var(--blue); stroke-width: 1.5; filter: drop-shadow(0 2px 6px rgba(111, 58, 140,.12)); }
.tempchart-nobandicon-circle { fill: var(--blue); }
.tempchart-nobandicon { font-size: 13px; font-weight: 700; font-style: italic; font-family: Georgia, serif; fill: #fff; text-anchor: middle; }
.tempchart-nobandtitle { font-size: 12.5px; font-weight: 700; fill: var(--blue-dark); text-anchor: middle; }
.tempchart-nobandlabel { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.tempchart-refline { stroke: #c9302c; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .6; }
.tempchart-reflabel { font-size: 11px; fill: #c9302c; opacity: .85; }
.tempchart-redline { stroke: #c9302c; stroke-width: 4; stroke-linecap: round; }
.tempchart-reddot { fill: #c9302c; }
.tempchart-linelabel-red { font-size: 12px; fill: #a02622; font-weight: 700; text-anchor: middle; }
.tempchart-amberline { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.tempchart-amberdot { fill: var(--accent); }
.tempchart-linelabel-amber { font-size: 12px; fill: #8a6300; font-weight: 700; text-anchor: middle; }
.tempchart-connector { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 3; }
.tempchart-guide { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; }
.timeline-point { cursor: pointer; }
.timeline-point line { stroke: var(--line); stroke-width: 1.5; }
.timeline-dot { fill: #fff; stroke: var(--blue); stroke-width: 2; transition: fill .15s ease; }
.timeline-point:hover .timeline-dot, .timeline-point:focus .timeline-dot, .timeline-point.active .timeline-dot { fill: var(--blue); }
.timeline-emoji { font-size: 20px; text-anchor: middle; }
.timeline-label { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.timeline-point.active .timeline-label { fill: var(--blue-dark); font-weight: 700; }
.timeline-fact { margin-top: 18px; padding: 12px 16px; background: var(--blue-light); border-radius: 8px; font-size: .9rem; color: var(--ink); min-height: 2.6em; }

/* ---------- Körper-Diagramm (Messpunkte) ---------- */
.body-diagram-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: center; }
#body-diagram { width: 220px; height: auto; flex-shrink: 0; }
.child-skin { fill: #f6cba3; }
.child-hair { fill: #6b4a35; }
.child-clothing { fill: var(--blue-light); stroke: var(--blue); stroke-width: 2; }
.child-clothing-dark { fill: var(--blue); opacity: .18; }
.child-accent { fill: var(--blue); opacity: .55; }
.child-collar { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.child-cheek { fill: #f2a2a2; opacity: .55; }
.child-eye { fill: #4a3527; }
.child-eye-shine { fill: #fff; }
.child-mouth { fill: none; stroke: #b4675a; stroke-width: 3; stroke-linecap: round; }
.body-hotspot circle:first-of-type { fill: rgba(255, 255, 255, .8); stroke: var(--blue); stroke-width: 2; cursor: pointer; }
.body-hotspot-dot { fill: var(--blue); pointer-events: none; }
.body-hotspot:hover circle:first-of-type, .body-hotspot:focus circle:first-of-type, .body-hotspot.active circle:first-of-type { fill: var(--blue); }
.body-hotspot:hover .body-hotspot-dot, .body-hotspot:focus .body-hotspot-dot, .body-hotspot.active .body-hotspot-dot { fill: #fff; }
.body-infocard { flex: 1; min-width: 220px; background: var(--bg-soft); border-radius: 10px; padding: 16px 18px; align-self: center; }
.body-infocard-hint { color: var(--muted); font-size: .9rem; margin: 0; }
.body-infocard-title { font-weight: 700; color: var(--blue-dark); margin: 0 0 6px; }
.body-infocard p:last-child { margin-bottom: 0; }

/* ---------- Kassen (Logo-Raster) ---------- */
.article-body .kassen-lead { font-size: 1.05rem; margin-bottom: .4em; }
.article-body .kassen-group { margin-top: 2.2em; }
.article-body .kassen-group-title {
    font-size: 1.15rem; color: var(--blue-dark); margin: 0 0 .9em;
    padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.article-body .kassen-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.article-body .kassen-grid li {
    display: grid; place-items: center; min-height: 92px; padding: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.article-body .kassen-grid li:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.article-body .kassen-grid a { display: block; line-height: 0; }
.article-body .kassen-grid img { max-height: 60px; width: auto; margin: 0; border-radius: 0; object-fit: contain; }
/* Für BVAEB und SVS gibt es kein Logo in der Mediathek – sie tragen ihren
   Namen als Text, damit die Kachel dieselbe Größe behält wie die daneben. */
.article-body .kassen-grid a.kassen-name {
    line-height: 1.25; text-align: center; font-weight: 700; color: var(--blue-dark);
    font-size: 1.15rem; text-decoration: none;
}
.article-body .kassen-grid a.kassen-name span {
    display: block; margin-top: 4px; font-weight: 400; font-size: .78rem; color: var(--muted);
}
.article-body .kassen-fussnote { margin: 1em 0 0; font-size: .9rem; color: var(--muted); }
.article-body .kassen-note {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center;
}
.article-body .kassen-card-img { margin: 0; border-radius: 8px; }
.article-body .kassen-note p { margin: 0; }
.article-body .kassen-hint { margin-top: 2em; padding: 12px 16px; background: var(--bg-soft); border-radius: 8px; font-size: .95rem; }
@media (max-width: 620px) {
    .article-body .kassen-note { grid-template-columns: 1fr; }
}

/* ---------- Alerts ---------- */
.alert { padding: 14px 18px; border-radius: 10px; margin: 20px 0; }
.alert-success { background: #e6f6ea; color: var(--green-dark); border: 1px solid #bce5c6; }
.alert-error { background: #fdeaea; color: #b13b3b; border: 1px solid #f3c2c2; }

/* ---------- Forms (allgemein) ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); max-width: 560px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; font-family: inherit;
}
.form-row textarea { resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--blue-light); border-color: var(--blue); }
/* Fehlermeldung steht als eigener Block UNTER dem Feld, nie darüber. */
.field-error { display: block; color: #b13b3b; font-size: .88rem; margin-top: 4px; }
/* Nur das beanstandete Feld wird rot markiert. */
.form-row input.is-invalid, .form-row select.is-invalid, .form-row textarea.is-invalid {
    border-color: #c9302c; background: #fdf6f6;
}
.form-row input.is-invalid:focus, .form-row select.is-invalid:focus, .form-row textarea.is-invalid:focus {
    outline: 2px solid #f3cdcd; border-color: #c9302c;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
/* Datumsfelder auf iOS: Safari gibt dem nativen Feld eine eigene Mindestbreite
   und Höhe. Es sprengte dadurch Spalte und Rahmen (Perzentilenrechner, 28.09.2026)
   und stand leer als graue Fläche da. Ohne native Optik gelten Breite, Polsterung
   und Hintergrund wie bei allen anderen Feldern; die Datumsauswahl bleibt. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; background-color: #fff; color: inherit;
}
.form-row input[type="date"], .form-row input[type="time"], .form-row input[type="datetime-local"] {
    display: block; min-height: calc(1.5em + 22px); line-height: 1.5;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }
/* Labels in eine gemeinsame Rasterzeile, Eingabefelder in die nächste, Fehlermeldungen
   in eine dritte – so stehen die Felder auf gleicher Höhe, auch wenn ein Label
   (z. B. mit "(optional)") umbricht oder nur eines der Felder einen Fehler zeigt.
   Ohne die dritte Zeile landet die Meldung im Feld statt darunter. */
@supports (grid-template-rows: subgrid) {
    .form-grid { grid-template-rows: auto auto auto; align-items: stretch; }
    .form-grid > .form-row { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
    .form-grid > .form-row > label { align-self: start; }
    .form-grid > .form-row > input,
    .form-grid > .form-row > select,
    .form-grid > .form-row > textarea { align-self: start; }
    .form-grid > .form-row > .field-error { align-self: start; }
}
.radio-group { display: flex; gap: 18px; }
.radio-group label { font-weight: 500; display: flex; align-items: center; gap: 6px; }

/* ---------- Result box (Rechner) ---------- */
.result-box { background: var(--blue-light); border-radius: var(--radius); padding: 24px; margin-top: 24px; }
/* Sprungziel nach dem Absenden eines Rechners (site.js). Der Abstand haelt den
   klebenden Kopf frei; der Fokusring bleibt fuer die Tastatur sichtbar, nicht
   aber beim programmatischen Sprung. */
[data-ergebnis] { scroll-margin-top: var(--sprungabstand); }
[data-ergebnis]:focus:not(:focus-visible) { outline: none; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-actions-hint { margin: 10px 0 0; font-size: .86rem; color: var(--muted); }
.result-value { font-size: 2rem; font-weight: 800; color: var(--blue-dark); }
.result-table th, .result-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- Suche ---------- */
.nav-search { font-size: 1.1rem; }
.search-form { display: flex; gap: 10px; margin: 20px 0 30px; }
.search-form input { flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; }
.search-form input:focus { outline: 2px solid var(--blue-light); border-color: var(--blue); }

/* ---------- Notfall-Infobox ---------- */
.emergency-box { background: #3a1c1c; border: 1px solid #5a2a2a; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 30px; }
.emergency-box h3 { color: #ffb3b3; margin: 0 0 12px; font-size: 1rem; }
.emergency-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 24px; }
.emergency-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #4a2424; padding: 4px 0; }
/* Lange Wörter (Vergiftungsinformation …) trennen, statt die Nummer aus dem Kasten zu schieben */
.emg-label { color: #e0c4c4; font-size: .92rem; min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.emg-number { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- Karte / Maps-Consent ---------- */
.map-embed { margin: 30px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-embed .map-canvas { width: 100%; height: 420px; display: block; background: var(--bg-soft); }
.map-consent { background: var(--blue-light); padding: 30px; text-align: center; }
.map-consent h3 { color: var(--blue-dark); }
.map-consent p { color: var(--muted); max-width: 520px; margin: 8px auto; }
.map-alt { font-size: .9rem; }

/* Leaflet-Popup an die Website-Optik anpassen */
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font); }
.map-popup strong { display: block; color: var(--blue-dark); font-size: 1rem; margin-bottom: 4px; }
.map-popup p { margin: 0 0 8px; line-height: 1.5; }
.map-popup a { color: var(--blue-dark); }
.map-popup-hours { border-collapse: collapse; font-size: .85rem; width: 100%; }
.map-popup-hours th, .map-popup-hours td { text-align: left; padding: 1px 0; }
.map-popup-hours th { color: var(--muted); font-weight: 400; padding-right: 10px; white-space: nowrap; }

/* ---------- Consent-Banner ---------- */
.consent-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #332b39; color: var(--lila-flaeche); z-index: 200; box-shadow: 0 -2px 16px rgba(0,0,0,.25); }
.consent-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; flex-wrap: wrap; }
.consent-inner p { margin: 0; font-size: .92rem; flex: 1; min-width: 260px; }
.consent-inner a { color: var(--lila-hell); }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* Umriss-Knopf auf dem dunklen Banner: --blue ergaebe nur 2,44:1 */
.consent-banner .btn-outline { color: var(--lila-hell); border-color: var(--lila-hell); }
.consent-banner .btn-outline:hover { color: #fff; }

/* ---------- Footer / Kontaktblock ---------- */
.site-footer { background: #332b39; color: var(--lila-flaeche); margin-top: 60px; padding: 50px 0 24px; }
.site-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.site-footer a { color: var(--lila-hell); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; flex-wrap: wrap; gap: 12px; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.copyright { color: var(--lila-mittel); font-size: .9rem; margin: 0; }

/* ---------- Rechner-Extras ---------- */
.optional { font-weight: 400; color: var(--muted); font-size: .85rem; }
.disclaimer { margin-top: 24px; padding: 14px 16px; background: var(--bg-soft); border-radius: 8px; font-size: .9rem; color: var(--muted); }
.result-hint { font-size: .9rem; color: var(--muted); margin-top: 12px; }

/* Messtabelle im Rechnerformular: erste Zeile aktuelle Messung, darunter frühere */
.measure-block { margin-bottom: 18px; }
.measure-legend { font-weight: 600; color: var(--blue-dark); margin: 0 0 4px; }
.measure-block .hint { margin-top: 0; }
.measure-rows { margin-top: 12px; }

/* Zusatzblock im Rechnerformular: Größe der Eltern */
.form-extra { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }
.form-extra > summary { cursor: pointer; font-weight: 600; color: var(--blue-dark); }
.form-extra[open] > summary { margin-bottom: 10px; }
.form-extra .hint { margin-top: 4px; }
.form-extra .form-grid { margin-top: 12px; }
.measure-rows { display: grid; gap: 10px; }
.measure-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.2fr; gap: 10px; align-items: start; }
.measure-row .form-row { margin-bottom: 0; }
.measure-row label { font-size: .78rem; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
.measure-row input { padding: 8px 10px; font-size: .95rem; }
/* Wie bei .form-grid: Beschriftungen in eine gemeinsame Rasterzeile, Eingabefelder
   in die nächste. Sonst rutscht das Feld einer Spalte nach unten, sobald ihre
   Beschriftung umbricht ("Kopfumfang (cm)" auf schmalen Bildschirmen). */
@supports (grid-template-rows: subgrid) {
    .measure-row { grid-template-rows: auto auto auto; align-items: stretch; }
    .measure-row > .form-row { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
    .measure-row > .form-row > label,
    .measure-row > .form-row > input,
    .measure-row > .form-row > .field-error { align-self: start; }
}
@media (max-width: 620px) { .measure-row { grid-template-columns: 1fr 1fr; } }

/* Wachstumsgeschwindigkeit und Zielgröße im Ergebnis */
.result-velocity, .result-target { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.result-velocity > h3, .result-target > h3 { margin: 0 0 6px; }
.velocity-block { margin-top: 18px; }
.velocity-block h4 { margin: 0 0 6px; font-size: 1rem; color: var(--blue-dark); }
/* Einordnung des Ergebnisses in einem Satz, vor der Tabelle. Bewusst ohne
   Signalfarbe: Eine Perzentile ist keine Note, und wer unter der 3. liegt, ist
   nicht krank. Hervorgehoben wird ueber Groesse und Rahmen, nicht ueber Rot/Gruen. */
.result-einordnung { margin: 0 0 20px; padding: 14px 18px; background: #fff; border-left: 4px solid var(--lila); border-radius: 8px; }
.result-einordnung .einordnung-satz { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.result-einordnung p + p { margin-top: .6em; }
.result-einordnung .result-hint { margin-bottom: 0; }
.velocity-note { margin: 10px 0 0; padding: 10px 14px; background: #fff; border-left: 3px solid var(--line); border-radius: 8px; font-size: .95rem; }
.velocity-note.is-ok { background: #e6f6ea; border-left-color: var(--green-dark); color: var(--green-dark); }
.velocity-note.is-watch { background: #fff3df; border-left-color: #a86a14; color: #7a4d0f; }
.velocity-segments { margin-top: 12px; }
.velocity-segments summary { cursor: pointer; color: var(--blue); font-size: .92rem; }
.schedule-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.vacc-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .95rem; }
.vacc-table th, .vacc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hint-cell { color: var(--muted); font-size: .88rem; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-free { background: #e6f6ea; color: #2f7a41; }
.badge-due { background: #fff3df; color: #8a5a00; }
.badge-future { background: var(--blue-light); color: var(--blue-dark); }

/* ---------- Dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.dash-nav { list-style: none; padding: 0; margin: 0; position: sticky; top: 90px; }
.dash-nav a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink); }
.dash-nav a:hover, .dash-nav a.active { background: var(--blue-light); text-decoration: none; }
.child-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
@media (max-width: 800px) { .dash-grid { grid-template-columns: 1fr; } }

.muted { color: var(--muted); }
.form-foot { margin-top: 16px; font-size: .95rem; }
.dash-head { margin-bottom: 20px; }
.dash-head h1 { margin-bottom: 2px; }
.dash-user { margin: 0; font-size: .88rem; color: var(--muted); }
.dash-user a { color: var(--muted); text-decoration: underline; }
.dash-user a:hover { color: var(--blue); }
.add-form { margin: 10px 0 20px; }
.add-form summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inline-form input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; }
.link-del { background: none; border: 0; color: #b13b3b; cursor: pointer; font-size: 1.1rem; line-height: 1; }

/* Aktionsspalte der Messwerttabelle: Aendern und Loeschen nebeneinander.
   Das Formular des Loeschknopfs ist ein Blockelement - ohne flex saesse es
   unter dem Verweis und die Zeile waere doppelt so hoch. */
.row-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

/* ---------- Messwerttabelle des Eltern-Portals ----------
   Sie ist eine Arbeitsflaeche, keine Darstellung: Eltern suchen hier den
   Ausreisser, den sie eben vertippt haben. Deshalb Zebrastreifen und
   Zeilenhervorhebung zum Spurhalten, rechtsbuendige Zahlen mit festen
   Ziffernbreiten zum Vergleichen untereinander, und Aendern/Loeschen
   sichtbar statt versteckt. Bewusst ohne Ampelfarben - eine Perzentile ist
   keine Note. */
.messwert-tabelle { width: 100%; border-collapse: collapse; }
.messwert-tabelle th, .messwert-tabelle td { padding: 10px 9px; vertical-align: middle; }
.messwert-tabelle th:first-child, .messwert-tabelle td:first-child { padding-left: 2px; }
.messwert-tabelle th:last-child, .messwert-tabelle td:last-child { padding-right: 2px; }
.messwert-tabelle tbody tr { border-bottom: 1px solid var(--line); }
.messwert-tabelle tbody tr:nth-child(even) { background: var(--bg-soft); }
.messwert-tabelle tbody tr:hover { background: var(--lila-flaeche); }
.messwert-tabelle tbody tr:last-child { border-bottom: 0; }

/* Zahlen gehoeren untereinander: gleiche Ziffernbreite, rechtsbuendig. */
.messwert-tabelle .sp-zahl, .messwert-tabelle td.zahl {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.messwert-tabelle td.zahl { font-weight: 600; }
.messwert-tabelle td.zahl small { font-weight: 400; color: var(--muted); margin-left: 2px; }
.messwert-tabelle .leer { color: var(--lila-hell); }

.messwert-tabelle .datum-zelle { white-space: nowrap; font-weight: 600; line-height: 1.25; }
/* Das Alter steht unter dem Datum, nicht in einer eigenen Spalte - es sortiert
   ohnehin gleich, und neun Spalten passten nicht nebeneinander. */
.messwert-tabelle .alter-zeile {
  display: block; color: var(--muted); font-size: .78rem; font-weight: 400;
}

/* Eine Perzentile statt dreier gestapelter Plaketten - der Rest im Tooltip. */
.messwert-tabelle .sp-pz, .messwert-tabelle .pz-zelle { text-align: right; white-space: nowrap; }
.messwert-tabelle .pz {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--lila-flaeche); color: var(--blue-dark); font-size: .84rem;
  font-variant-numeric: tabular-nums; cursor: help;
}
.messwert-tabelle .pz abbr { text-decoration: none; font-size: .78rem; opacity: .75; margin-left: 2px; }
.messwert-tabelle .pz-mehr { font-size: .72rem; opacity: .6; margin-left: 3px; }

.messwert-tabelle .anlass-zelle { font-size: .88rem; color: var(--muted); }
.messwert-tabelle .notiz { display: inline-block; margin-top: 2px; color: var(--muted); }

/* Die Geburtszeile stammt aus den Basisdaten und ist nicht zu loeschen.
   Ein Balken links genuegt als Unterschied - keine zweite Farbe. */
.messwert-tabelle tr.ist-geburt td:first-child { box-shadow: inset 3px 0 0 var(--lila); }

/* Aendern und Loeschen: sichtbar, gleich gross, am rechten Rand. */
/* Das Flex sitzt im inneren div, NICHT auf der Zelle: display:flex auf einem
   <td> nimmt es aus dem Spaltenlayout der Tabelle - die Zelle legt sich dann
   ueber die Nachbarspalte, statt eine eigene Breite zu bekommen. */
.messwert-tabelle .sp-tun { width: 1%; white-space: nowrap; text-align: right; }
.messwert-tabelle .row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.messwert-tabelle .link-edit, .messwert-tabelle .link-del {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 3px 10px; border: 1px solid var(--line);
  border-radius: 6px; font-size: .82rem; text-decoration: none; background: #fff;
}
.messwert-tabelle .link-edit { color: var(--blue-dark); }
.messwert-tabelle .link-edit:hover, .messwert-tabelle .link-edit:focus-visible {
  background: var(--lila-flaeche); border-color: var(--lila); text-decoration: none;
}
.messwert-tabelle .link-del { color: #b13b3b; font-size: 1rem; line-height: 1; min-width: 32px; }

/* ---------- Gefahrenzone: Profil loeschen ----------
   Abgesetzt vom Rest der Seite, damit der Knopf, der alles entfernt, nicht
   neben dem steht, der speichert. Rot ist hier kein Ampelsignal, sondern die
   uebliche Kennzeichnung fuer einen Schritt ohne Rueckweg. */
.gefahrenzone {
  margin-top: 48px; padding: 20px 22px; border: 1px solid #e8c4c4;
  border-radius: var(--radius); background: #fdf7f7;
}
.gefahrenzone h2 { margin: 0 0 8px; font-size: 1.05rem; color: #9c3232; }
.gefahrenzone p { margin: 0 0 14px; font-size: .92rem; }
.gefahren-haken {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px;
  font-size: .9rem; cursor: pointer;
}
.gefahren-haken input { margin-top: 3px; flex: 0 0 auto; }
.btn-gefahr {
  background: #fff; border: 1px solid #c56c6c; color: #9c3232;
}
.btn-gefahr:hover, .btn-gefahr:focus-visible { background: #9c3232; border-color: #9c3232; color: #fff; }
.messwert-tabelle .link-del:hover, .messwert-tabelle .link-del:focus-visible {
  background: #fdeaea; border-color: #d99; 
}

/* Schmale Schirme: Alter und Anlass treten zurueck, damit Datum, Werte und
   die beiden Schaltflaechen ohne Querscrollen sichtbar bleiben. */
/* Schmale Schirme: enger setzen und den Anlass zuruecknehmen, damit Datum,
   Werte und die beiden Schaltflaechen ohne Querscrollen sichtbar bleiben. */
@media (max-width: 720px) {
  .messwert-tabelle th, .messwert-tabelle td { padding: 8px 5px; font-size: .92rem; }
  .messwert-tabelle .anlass-zelle, .messwert-tabelle th:nth-child(7) { display: none; }
  .messwert-tabelle .link-edit { padding: 3px 7px; }
}
.row-actions form { margin: 0; }
.link-edit { color: var(--blue-dark); font-size: .85rem; text-decoration: underline; }
.link-edit:hover, .link-edit:focus-visible { text-decoration: none; }
.vacc-list { list-style: none; padding: 0; }
.vacc-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------- Statistik: Kennzahlen, Diagramme, Tabellen ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 22px; }
.stat-tile { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stat-value { display: block; font-size: 1.4rem; font-weight: 700; color: var(--blue-dark); line-height: 1.3; }
.stat-value small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.stat-sub { display: block; font-size: .78rem; color: var(--muted); }

/* ---------- Statistik-Erklärungen (Hover-Hinweis + Klick-Popup) ---------- */
.stat-tile[data-explain-hint] {
    position: relative; cursor: pointer; padding-right: 34px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.stat-tile[data-explain-hint]:hover,
.stat-tile[data-explain-hint]:focus-visible {
    border-color: var(--blue); box-shadow: 0 4px 14px rgba(142, 75, 175, .16); outline: none;
}
.stat-tile[data-explain-hint]::before {
    content: "?"; position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--blue); color: #fff; font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.stat-term {
    font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
    cursor: pointer; position: relative; font-weight: 600;
    border-bottom: 2px dotted var(--blue);
}
.stat-term:hover, .stat-term:focus-visible { color: var(--blue-dark); outline: none; }
.stat-tooltip {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
    min-width: 200px; max-width: 280px; width: max-content;
    background: var(--ink); color: #fff; font-size: .8rem; font-weight: 400; line-height: 1.45;
    text-transform: none; letter-spacing: normal;
    padding: 10px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease; z-index: 30;
}
.stat-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--ink);
}
[data-explain-hint]:hover .stat-tooltip,
[data-explain-hint]:focus-visible .stat-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) { .stat-tooltip { max-width: 220px; font-size: .76rem; } }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.chart-card { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 6px; background: #fff; cursor: zoom-in; }
.chart-card:hover, .chart-card:focus-visible { border-color: var(--blue); outline: none; box-shadow: 0 0 0 2px var(--blue-light); }
.chart-card figcaption { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.chart { width: 100%; height: auto; display: block; }
/* Perzentilkurven direkt im Rechnerergebnis. Anders als im Kinderprofil gibt es hier
   keine Lightbox, deshalb auch kein Zoom-Cursor und keine Hover-Hervorhebung. */
.result-charts { margin-top: 24px; }
.result-charts h3 { margin: 0 0 12px; }
.result-charts .chart-card { cursor: default; margin-bottom: 14px; }
.result-charts .chart-card:hover { border-color: var(--line); box-shadow: none; }
.chart-grid-line, .chart .chart-grid { stroke: var(--line); stroke-width: 1; }
.chart .chart-tick { font-size: 10px; fill: var(--muted); }
.chart .chart-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .chart-area { fill: var(--blue-light); }
.chart .chart-dot { fill: #fff; stroke: var(--blue-dark); stroke-width: 2; }
/* Messpunkt: Kurzinfo beim Überfahren (natives <title>), ausführliche
   Erklärung beim Anklicken (site.js). Der unsichtbare Trefferkreis liegt
   unter dem sichtbaren Punkt – mit r=4 ist ein Punkt am Telefon sonst
   kaum zu treffen. */
.chart .chart-point { cursor: pointer; }
.chart .chart-hit { fill: transparent; stroke: none; }
.chart .chart-point:hover .chart-dot { stroke-width: 3.5; fill: var(--blue-light); }
.chart.chart-percentile .chart-area { fill: var(--blue-light); opacity: .55; }
/* Perzentillinien: Median kräftig, die übrigen gestrichelt in der Lila-Skala (27.09.2026) */
.chart .chart-percentile-line { fill: none; stroke: var(--lila-mittel); stroke-width: 1.3; stroke-dasharray: 5 4; }
.chart .chart-percentile-line.is-median { stroke: var(--lila); stroke-width: 2.6; stroke-dasharray: none; }
.chart .chart-percentile-label { font-size: 10px; font-weight: 600; fill: var(--lila-mittel); }
.chart .chart-percentile-label.is-median { font-weight: 800; fill: var(--lila-dunkel); }
/* Zielbereich (Elternzielgröße) am rechten Rand der Prognosekurve */
.chart .chart-band { fill: var(--blue); opacity: .16; }
.chart .chart-band-line { stroke: var(--blue-dark); stroke-width: 2; }
.chart .chart-band-label { font-size: 9px; font-weight: 700; fill: var(--blue-dark); }

.growth-lightbox { position: fixed; inset: 0; background: rgba(var(--lila-schleier), .6); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 24px; }
.growth-lightbox[hidden] { display: none; }
.growth-lightbox-inner { position: relative; background: #fff; border-radius: 12px; padding: 22px 24px 24px; max-width: 1400px; width: 100%; max-height: 94vh; overflow-y: auto; }
.growth-lightbox-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.growth-lightbox-close:hover { color: var(--ink); }
.growth-lightbox-title { margin: 0 20px 12px 0; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.growth-lightbox-chart svg { width: 100%; height: auto; max-height: calc(94vh - 170px); }
/* Hauptkurven (volle Breite) öffnen keine Vergrößerung mehr – nur der Historie-Knopf */
.chart-card.ist-gross { cursor: default; }
.chart-card.ist-gross:hover, .chart-card.ist-gross:focus-within { border-color: var(--line); box-shadow: none; }
.wachstum-historie-knopf { margin: 10px 0 4px; }
.growth-lightbox-history-toggle { margin-top: 14px; }
.growth-lightbox-history { margin-top: 14px; }
.growth-deviation-chart { margin-bottom: 16px; }
.growth-deviation-chart svg { width: 100%; height: auto; }
.growth-deviation-caption { margin: 0 0 6px; font-size: .8rem; color: var(--muted); }
body.growth-lightbox-open { overflow: hidden; }

.table-scroll { overflow-x: auto; position: relative; }   /* relative: absolut gesetzte .sr-only-Texte bleiben im Scrollbereich statt die Seite zu verbreitern */
.admin-table input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: .9rem; font-family: inherit; width: 100%; min-width: 90px; }

/* ---------- Kinderprofil: Übersicht, Timeline, Bereiche ---------- */
/* Kinder-Umschalter: ein Chip pro Kind, nur das aktive Kind wird groß angezeigt */
.child-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.child-chip {
    --chip-accent: var(--blue-dark); --chip-accent-soft: var(--blue-light); --chip-accent-line: var(--lila-linie);
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font: inherit; font-size: .92rem; color: var(--ink); cursor: pointer;
}
.child-chip.is-boy { --chip-accent: #3a6ea5; --chip-accent-soft: #e2edfa; --chip-accent-line: #b9d2ea; }
.child-chip.is-girl { --chip-accent: #b8437f; --chip-accent-soft: #fbe4ef; --chip-accent-line: #efc2d5; }
.child-chip:hover { text-decoration: none; border-color: var(--chip-accent-line); background: var(--bg-soft); }
.child-chip.is-active { border-color: var(--chip-accent); background: var(--chip-accent-soft); }
.child-chip.is-active .chip-name { font-weight: 700; color: var(--chip-accent); }
.chip-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--chip-accent-line); }
.child-chip.is-active .chip-avatar { border-color: var(--chip-accent); }
.chip-age { color: var(--muted); }
.child-chip-add { padding: 8px 16px; border-style: dashed; color: var(--blue); }
.child-chip-add:hover { border-color: var(--blue); color: var(--blue-dark); }
/* „＋ Messen“ neben jedem Kind, nur am Handy; am PC fällt die Zeile weg (display: contents) */
.child-switch-zeile { display: contents; }
.child-chip-messen { display: none; }
@media (max-width: 599px) {
    .child-switch-zeile { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; min-width: 0; }
    .child-switch-zeile .child-chip { min-width: 0; }
    .child-switch-zeile .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .child-switch-zeile .chip-age { flex: 0 0 auto; white-space: nowrap; }
    .child-chip-messen {
        display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 16px;
        border-radius: 999px; background: var(--lila); color: #fff; font-size: .92rem; font-weight: 600;
        text-decoration: none; white-space: nowrap;
    }
    .child-chip-messen:hover, .child-chip-messen:focus-visible { background: var(--lila-dunkel); color: #fff; text-decoration: none; }
}
/* iPhone SE: Platz für den Namen – das Alter steht ohnehin in der Karte darunter */
@media (max-width: 379px) {
    .child-switch-zeile .chip-age { display: none; }
    .child-chip-messen { padding: 0 12px; }
}

.child-tile {
    /* Akzentfarbe je Kind – nur noch als Akzent an Avatar-Ring und Name */
    --tile-accent: var(--blue-dark);
    --tile-accent-line: var(--lila-linie);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff;
}
.child-tile.is-boy { --tile-accent: #3a6ea5; --tile-accent-line: #b9d2ea; }
.child-tile.is-girl { --tile-accent: #b8437f; --tile-accent-line: #efc2d5; }
.child-tile[hidden] { display: none; }

.child-tile-head { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.child-avatar {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--tile-accent-line);
}
.child-avatar-svg { display: block; width: 100%; height: 100%; }

/* Das Bild fuehrt zu den Basisdaten. Es muss sichtbar anklickbar sein, sonst
   probiert es niemand: Zeigefinger, ein Stift beim Ueberfahren, und ein
   deutlicher Fokusrahmen fuer die Tastatur. */
.child-avatar-link { position: relative; display: block; cursor: pointer; text-decoration: none; }
.child-avatar-link:hover, .child-avatar-link:focus-visible { border-color: var(--tile-accent); }
.child-avatar-link:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; }
.child-avatar-stift {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--lila-schleier), .55); opacity: 0; transition: opacity .12s ease;
}
.child-avatar-stift svg {
  width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.child-avatar-link:hover .child-avatar-stift,
.child-avatar-link:focus-visible .child-avatar-stift { opacity: 1; }
/* Auf Geraeten ohne Mauszeiger gibt es kein Ueberfahren - dort steht der
   Stift dauerhaft, sonst waere nicht zu erkennen, dass das Bild etwas tut. */
@media (hover: none) {
  .child-avatar-stift { opacity: 1; background: rgba(var(--lila-schleier), .35); }
  .child-avatar-stift svg { width: 18px; height: 18px; }
}
.child-tile h2 { margin: 0 0 2px; font-size: 1.3rem; color: var(--tile-accent); }
.child-tile-age { color: var(--muted); font-size: .9rem; margin: 0; }

.child-section-title { margin: 0 0 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
/* Überblick / Jetzt typisch / Außerdem festhalten als eigene Bereiche (02.10.2026):
   je ein sehr helles Farbfeld, dazwischen Luft; die Kacheln stehen weiß darauf */
.child-tile .child-section-title { margin-bottom: 10px; line-height: 1.3; }
.child-tile .child-ueberblick, .child-tile .ms-jetzt, .child-tile .child-more { margin: 14px 0 0; padding: 14px 16px 16px; border-radius: 12px; }
.child-tile .child-ueberblick { background: #faf7fc; }
.child-tile .ms-jetzt { background: #f7f8fb; }
.child-tile .child-more { background: #fbf9f6; }
/* Größe und Gewicht eintragen (14.10.2026): der häufigste Grund fürs Portal, darum
   als eigener, farbig gerahmter Kasten über dem Überblick statt hinter „Wachstum“ */
.child-messen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; padding: 16px 18px; border: 2px solid var(--lila); border-radius: 12px; background: var(--lila-flaeche); }
.child-messen-text { flex: 1 1 260px; min-width: 0; }
.child-messen h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--ink); }
.child-messen p { margin: 0; font-size: .95rem; }
.child-messen-werte { list-style: none; margin: 4px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.child-messen-werte li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.child-messen-werte span { color: var(--muted); font-size: .9rem; }
.child-messen-werte strong { font-size: 1.15rem; }
.child-messen-werte em { font-style: normal; font-size: .9rem; color: var(--lila-dunkel, var(--ink)); }
.child-messen-wann { color: var(--muted); font-size: .88rem !important; }
.child-messen-hinweis { margin-top: 6px !important; font-size: .88rem !important; }
.child-messen-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
    .child-messen { padding: 14px 12px; margin-left: -6px; margin-right: -6px; }
    .child-messen-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
}
.child-tile .child-sections-leer a { background: rgba(255, 255, 255, .7); }
.child-tile .ms-jetzt-eintrag { border-bottom-color: rgba(0, 0, 0, .07); }
@media (max-width: 560px) {
    .child-tile .child-ueberblick, .child-tile .ms-jetzt, .child-tile .child-more { padding: 12px 10px 12px; margin-left: -6px; margin-right: -6px; }
}
/* Bereiche als erkennbare Kacheln (02.10.2026): Rahmen, Fläche und Pfeil zeigen, dass man draufklicken kann. */
.child-sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.child-sections a { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--lila-hell); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: .95rem; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s; }
.child-sections a::after { content: "›"; margin-left: auto; padding-left: 6px; font-size: 1.4rem; line-height: 1; color: var(--lila); }
.child-sections a:hover, .child-sections a:focus-visible { text-decoration: none; background: var(--lila-flaeche); border-color: var(--lila); }
.child-sections .tile-icon { font-size: 1.05rem; width: 1.4em; text-align: center; }
.tile-badge {
    min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
    background: var(--blue-light); color: var(--blue-dark); font-size: .8rem; font-weight: 700;
}
.child-more { margin-top: 14px; }
/* Leere Bereiche: gestrichelt mit Plus und Kurzbeschreibung – sichtbar als „hier geht noch mehr“ */
.child-sections-leer a { border-style: dashed; background: transparent; box-shadow: none; font-weight: 600; align-items: flex-start; }
.child-sections-leer a::after { content: "+"; font-size: 1.2rem; align-self: center; }
.child-sections-leer .tile-text { display: flex; flex-direction: column; min-width: 0; }
.child-sections-leer .tile-lead { font-weight: 400; font-size: .8rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 560px) {
    /* Am Handy eine Spalte, kompakt ohne Beschreibung – zweispaltig brachen die Namen mitten im Wort */
    .child-sections-leer { grid-template-columns: 1fr; gap: 6px; }
    .child-sections-leer a { min-height: 44px; padding: 6px 12px; align-items: center; }
    .child-sections-leer .tile-lead { display: none; }
}
.child-more summary { cursor: pointer; padding: 6px 10px; font-size: .9rem; font-weight: 600; color: var(--lila); }
.child-more summary:hover { color: var(--blue); }
.child-more .child-sections { margin-top: 4px; }
.child-more .child-sections a { font-weight: 500; }

.child-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 22px 0 0; }
.child-link-more { font-size: .95rem; }

.child-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.child-head h1 { margin-bottom: 2px; color: var(--blue-dark); }
.child-age { color: var(--muted); margin: 0; }
.child-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 26px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.child-nav a { padding: 6px 12px; border-radius: 999px; font-size: .88rem; color: var(--ink); border: 1px solid transparent; }
.child-nav a:hover { background: var(--bg-soft); text-decoration: none; }
.child-nav a.active { background: var(--blue); color: #fff; }

.progress-card, .suggest-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; background: #fff; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.progress-head h2 { margin: 0; font-size: 1.15rem; color: var(--blue-dark); }
.progress-percent { font-weight: 700; color: var(--blue-dark); }
.progress-bar { height: 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; margin: 10px 0; }
.progress-bar span { display: block; height: 100%; background: var(--blue); }
.progress-hint { font-size: .8rem; margin: 0 0 10px; }
.progress-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; }
.progress-list .done { color: var(--green-dark); }
.progress-list .open { color: var(--muted); }
.suggest-card h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--blue-dark); }
.suggest-list { list-style: none; margin: 0; padding: 0; }
.suggest-list li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.suggest-list li:last-child { border-bottom: 0; }

.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 26px; }
.section-card { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; color: var(--ink); }
.section-card:hover { border-color: var(--blue); box-shadow: var(--shadow); text-decoration: none; }
.section-icon { font-size: 1.4rem; display: block; }
.section-name { display: block; font-weight: 700; color: var(--blue-dark); margin-top: 4px; }
.section-meta { display: block; font-size: .8rem; color: var(--muted); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .85rem; color: var(--ink); }
.chip:hover { border-color: var(--blue); text-decoration: none; }
.chip-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.chip-done { background: var(--blue-light); border-color: var(--blue-light); color: var(--blue-dark); }
.chip-muted { color: var(--muted); background: var(--bg-soft); }
.chip-area { font-size: .72rem; color: var(--muted); }
.filter-row { margin-top: 14px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl-marker { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-light); font-size: 1.05rem; }
.tl-date { margin: 0; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tl-age { text-transform: none; letter-spacing: 0; }
.tl-title { margin: 2px 0 0; font-weight: 700; color: var(--blue-dark); }
.tl-lines { list-style: none; margin: 4px 0 0; padding: 0; color: var(--muted); font-size: .9rem; }
.tl-note { margin: 6px 0 0; font-size: .9rem; font-style: italic; color: var(--muted); }
.tl-actions { margin: 0; }

.ms-area { margin-bottom: 26px; }
.ms-area h3 { color: var(--blue-dark); margin-bottom: 8px; }
.ms-list { list-style: none; margin: 0; padding: 0; }
.ms-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.ms-mark { width: 20px; color: var(--muted); }
.ms-done .ms-mark { color: var(--green-dark); font-weight: 700; }
.ms-label { flex: 1; min-width: 0; }
.ms-age { display: block; font-size: .76rem; color: var(--muted); }
.ms-date { font-size: .85rem; color: var(--blue-dark); font-weight: 600; }
.ms-add { font-size: .82rem; }

.teeth-map { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: #fff; margin-bottom: 10px; }
.teeth-row-label { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.teeth-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tooth { display: grid; justify-items: center; gap: 3px; text-decoration: none; }
.tooth-shape { display: block; width: 30px; height: 34px; border: 2px solid var(--line); border-radius: 8px 8px 12px 12px; background: #fff; }
.tooth-done .tooth-shape { background: var(--blue); border-color: var(--blue-dark); }
.tooth-date { font-size: .65rem; color: var(--muted); min-height: 1em; }
.tooth:hover .tooth-shape { border-color: var(--blue); }

.food-group { margin-bottom: 18px; }
.food-group h4 { margin: 0 0 8px; font-size: 1rem; color: var(--blue-dark); }

.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 22px; }
.type-card { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: .9rem; }
.type-card:hover { border-color: var(--blue); text-decoration: none; }
.type-card.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.stat-value-text { font-size: 1rem; line-height: 1.35; }

@media (max-width: 620px) {
    .tl-item { grid-template-columns: 30px minmax(0, 1fr) auto; }
}

/* ---------- Startseite: Eltern-Portal ---------- */
/* Startseite: Einladung zum Eltern-Konto – persönlich, mit Foto aus der
   Ordination, ohne Diagramm und ohne Fachbegriffe */
.portal-karte {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center;
    background: linear-gradient(135deg, var(--lila-flaeche), #fff 70%);
    border: 1px solid var(--lila-linie); border-radius: 20px; padding: 26px;
}
.portal-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% center;
               border-radius: 16px; box-shadow: var(--shadow); display: block; }
.portal-eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--blue); font-weight: 700; font-size: .8rem; margin: 0 0 6px; }
.portal-text h2 { margin: 0 0 12px; color: var(--blue-dark); font-size: 1.45rem; line-height: 1.25; }
.portal-text p { margin-top: 0; }
.portal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
@media (max-width: 720px) {
    .portal-karte { grid-template-columns: 1fr; padding: 18px; gap: 20px; }
}

/* ---------- 24-Stunden-Schlafprotokoll ---------- */
.state-sleep    { --state-color: var(--lila-tief); }   /* Schlaf */
.state-awake    { --state-color: var(--lila-flaeche); }   /* wach */
.state-meal     { --state-color: #58b368; }   /* Mahlzeit */
.state-restless { --state-color: #f4a72c; }   /* Unruhe */
.state-crying   { --state-color: #d9534f; }   /* Schreien */
.state-empty    { --state-color: #ffffff; }

.sleep-add > summary { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.sleep-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.sleep-hint { margin: 0 0 12px; font-size: .82rem; color: var(--muted); }
.legend-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: .85rem;
}
.legend-btn:hover { border-color: var(--blue); }
.legend-btn.active { border-color: var(--blue); background: var(--blue-light); font-weight: 600; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--state-color); }

.sleep-grid { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.sleep-half-label { margin: 0 0 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sleep-half-label + .sleep-hours { margin-top: 0; }
.sleep-grid .sleep-half-label ~ .sleep-half-label { margin-top: 16px; }
.sleep-hours, .sleep-cells { display: grid; grid-template-columns: repeat(48, 1fr); }
.sleep-hours { margin-bottom: 2px; }
.sleep-hours span { grid-column: span 4; font-size: .68rem; color: var(--muted); text-align: left; }
.sleep-cell {
    height: 40px; padding: 0; border: 0; border-right: 1px solid #fff; cursor: pointer;
    background: var(--state-color); touch-action: none;
}
.sleep-cell:nth-child(4n) { border-right: 1px solid var(--line); }
.sleep-cell.state-empty { background: var(--bg-soft); }
.sleep-cell:hover { outline: 2px solid var(--blue); outline-offset: -2px; }
.sleep-form { max-width: none; }

.sleep-day-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sleep-day-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.sleep-day-head { display: flex; align-items: center; gap: 12px; }
.sleep-day-label { flex: 0 0 auto; width: 68px; font-size: .85rem; font-weight: 700; color: var(--blue-dark); }
.sleep-day-row {
    flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(96, 1fr);
    height: 18px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
.sleep-mini { background: var(--state-color); }
.sleep-mini.state-empty { background: var(--bg-soft); }
.sleep-day-head .link-del { flex: 0 0 auto; }
.sleep-day-stats {
    margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    font-size: .85rem; color: var(--muted);
}
.sleep-day-stats strong { color: var(--ink); }
.badge-cry { background: #fdeaea; color: #b13b3b; }
.sleep-day-note { margin: 6px 0 0; font-size: .82rem; font-style: italic; color: var(--muted); }
@media (max-width: 480px) {
    .sleep-day-label { width: 52px; font-size: .78rem; }
}

/* ---------- Beurteilung & Schlafberatung ---------- */
.sleep-review { margin: 0 0 26px; }
.sleep-review-intro { font-size: .88rem; margin: 0 0 14px; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.review-item {
    --review-color: var(--muted); --review-bg: var(--bg-soft);
    display: flex; gap: 12px; padding: 14px 16px; background: #fff;
    border: 1px solid var(--line); border-left: 4px solid var(--review-color); border-radius: 10px;
}
.review-item.level-good  { --review-color: var(--green-dark); --review-bg: #edf7ef; }
.review-item.level-hint  { --review-color: #c98a13;           --review-bg: #fdf4e3; }
.review-item.level-check { --review-color: #c0533b;           --review-bg: #fceeea; }
.review-item.level-info  { --review-color: var(--blue);       --review-bg: var(--blue-light); }
.review-mark {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--review-bg); color: var(--review-color);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; line-height: 1;
}
.review-body { min-width: 0; }
.review-body h4 { margin: 2px 0 4px; font-size: .98rem; color: var(--review-color); }
.review-text { margin: 0; font-size: .92rem; }
.review-tips { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; color: var(--muted); }
.review-tips li { margin-bottom: 4px; }
.review-tips li::marker { color: var(--review-color); }
.review-disclaimer {
    margin: 14px 0 0; padding: 12px 14px; background: var(--bg-soft);
    border-radius: 8px; font-size: .82rem; color: var(--muted);
}
.sleep-stage-hint { font-size: .85rem; margin: 0 0 12px; }
.ms-auto {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--blue-light); color: var(--blue-dark);
    font-size: .72rem; font-weight: 600; vertical-align: 1px; white-space: nowrap;
}

/* ---------- Popup-Dialoge (natives <dialog>) ---------- */
dialog.app-dialog {
    border: 0; border-radius: var(--radius); padding: 24px 26px;
    box-shadow: 0 20px 60px rgba(var(--lila-schleier),.25); max-width: 380px; width: calc(100% - 40px);
}
dialog.app-dialog::backdrop { background: rgba(var(--lila-schleier),.45); }
dialog.app-dialog h3 { margin: 0 0 16px; color: var(--blue-dark); }
dialog.app-dialog .form-row { margin-bottom: 14px; }
dialog.app-dialog select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* Newsletter-Bestätigung (Double-Opt-In-Hinweis nach der Anmeldung) */
dialog.newsletter-dialog { max-width: 460px; text-align: left; }
dialog.newsletter-dialog .newsletter-dialog-icon { font-size: 2rem; line-height: 1; margin-bottom: 10px; }
dialog.newsletter-dialog h3 { margin: 0 0 12px; font-size: 1.15rem; }
dialog.newsletter-dialog p { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; }
dialog.newsletter-dialog .newsletter-dialog-hint {
    background: var(--blue-light); border-radius: 8px; padding: 12px 14px;
    font-size: .9rem; color: var(--muted);
}
dialog.newsletter-dialog .newsletter-dialog-hint strong { color: var(--ink); }
dialog.newsletter-dialog .newsletter-dialog-hint p:last-of-type { margin-bottom: 10px; }
dialog.newsletter-dialog .newsletter-dialog-hint .btn { white-space: nowrap; }
dialog.newsletter-dialog.is-error h3 { color: #a8324a; }
/* Ohne JavaScript (kein showModal) bleibt der Dialog als zentrierte Hinweisbox sichtbar */
dialog.newsletter-dialog[open]:not(:modal) {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 60; background: var(--bg); border: 1px solid var(--line);
}

/* Kurzerklärung zu statistischen Werten (Stat-Kacheln, einzelne Kennzahlen im Fließtext) */
/*
 * Kein "position: relative" hier: Ein modaler Dialog wird vom Browser von sich aus
 * in der Bildschirmmitte gehalten. Eine eigene Positionsangabe nimmt ihm das und
 * setzt ihn an den Anfang des Dokuments – wer weit unten in einem langen Text auf
 * eine Kennzahl tippte, bekam das Popup dann außerhalb des Sichtbereichs.
 * Als Bezugsrahmen für den Schließen-Knopf genügt der Dialog auch so.
 */
dialog.stat-explain-dialog {
    text-align: left;
    /* Die Breite setzt site.js nach der Textlänge; diese Werte gelten, solange
       kein Skript läuft, und begrenzen sie auf schmalen Geräten. */
    width: calc(100% - 40px);
    max-width: min(50vw, 820px);
    min-width: min(380px, calc(100vw - 40px));
    max-height: min(82vh, 760px); overflow-y: auto;
}
@media (max-width: 760px) {
    dialog.stat-explain-dialog { max-width: calc(100vw - 32px); }
}
dialog.stat-explain-dialog .stat-explain-title { margin: 0 28px 12px 0; font-size: 1.1rem; color: var(--blue-dark); }
dialog.stat-explain-dialog .stat-explain-body p { margin: 0 0 10px; font-size: .95rem; line-height: 1.55; color: var(--ink); }
dialog.stat-explain-dialog .stat-explain-body p:last-child { margin-bottom: 0; }
dialog.stat-explain-dialog .stat-explain-close {
    position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg-soft); border: 1px solid var(--line); font-size: 1.1rem; line-height: 1;
    cursor: pointer; color: var(--muted);
}
dialog.stat-explain-dialog .stat-explain-close:hover { color: var(--ink); }

/* ---------- Galerie ---------- */
.gallery-grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gallery-item {
    display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: none; cursor: zoom-in; aspect-ratio: 4 / 3; box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-item:hover, .gallery-item:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(111, 58, 140, .18); }
.gallery-item:hover img { transform: scale(1.04); }
dialog.lightbox-dialog { max-width: min(90vw, 900px); padding: 0; background: transparent; box-shadow: none; }
dialog.lightbox-dialog img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
dialog.lightbox-dialog .lightbox-close {
    position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 1.3rem; line-height: 1;
    cursor: pointer; color: var(--ink);
}

/* ---------- Rechner im Kinderprofil ---------- */
.calc-context { background: var(--blue-light); border-radius: 8px; padding: 8px 14px; font-size: .92rem; display: inline-block; }
.hint { font-size: .9rem; margin-top: -8px; }
.save-box { border: 1px solid var(--blue); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; background: #fff; }
.save-box h3 { margin: 0 0 4px; color: var(--blue-dark); font-size: 1.05rem; }
.save-box .muted { font-size: .9rem; margin-top: 0; }
.save-box select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
/* Speicher-Kasten oben im Ergebnis (22.10.2026): Sprungziel unter dem festen Kopf, unten nur ein Verweis */
#speichern { scroll-margin-top: 130px; }
.save-box-verweis { margin: 18px 0 0; font-weight: 600; }

/* ---------- Error pages ---------- */
.error-page { padding: 80px 0; }
.error-page h1 { font-size: 5rem; color: var(--blue); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero-inner, .newsletter-inner { grid-template-columns: 1fr; }
    .nav-toggle { display: flex; }
    .main-nav {
        position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        box-shadow: var(--shadow); padding: 12px; display: none;
        /* Aufgeklappt wird das Menü schnell länger als der Schirm. Ohne eigenen
           Scrollbereich schiebt das Mausrad dann die Seite darunter weg und die
           unteren Einträge bleiben unerreichbar. */
        max-height: calc(100vh - var(--header-h, 150px) - 8px);
        overflow-y: auto; overscroll-behavior: contain;
    }
    .main-nav.open { display: block; }
    .main-nav .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding-left: 16px; min-width: 0; display: none;
        max-height: none; overflow: visible;
    }
    .has-sub.open .sub-menu { display: block; }
    .form-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Interaktive Elemente im Schlaf-Ratgeber
   (Elternleitfaden, Wachfenster-Tagesleiste, Sicherer Schlaf, Methodenfilter,
    Koffein-Restkurve, Abend-Timeline)
   ========================================================================= */

/* ---------- gemeinsame Bausteine ---------- */
.if-controls { display: grid; gap: 16px; margin-bottom: 18px; }
.if-field > label, .if-field > .if-legend {
    display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.if-field select, .if-field input[type="time"], .if-field input[type="number"] {
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-family: inherit; font-size: .92rem; background: #fff; color: var(--ink); max-width: 100%;
}
.if-field input[type="range"] { width: 100%; accent-color: var(--blue); }
.if-range-value { font-weight: 700; color: var(--blue-dark); }
.if-note {
    margin: 14px 0 0; padding: 12px 16px; background: var(--blue-light);
    border-radius: 8px; font-size: .88rem; line-height: 1.55;
}
.if-note strong { color: var(--blue-dark); }
.if-hint { font-size: .84rem; color: var(--muted); margin: 6px 0 0; }
.if-btn {
    padding: 9px 20px; border-radius: 999px; border: 1px solid var(--blue);
    background: var(--blue); color: #fff; font: inherit; font-size: .9rem;
    font-weight: 600; cursor: pointer; transition: background .15s ease;
}
.if-btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.if-btn[disabled] { opacity: .45; cursor: not-allowed; }
.if-btn-ghost { background: #fff; color: var(--blue-dark); }
.if-btn-ghost:hover { background: var(--blue-light); color: var(--blue-dark); }
.if-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }

/* ---------- Elternleitfaden (Fragebogen) ---------- */
.guide-figure { padding-bottom: 22px; }
.guide-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.guide-progress-track { flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.guide-progress-bar { height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width .25s ease; }
.guide-progress-text { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.guide-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.guide-step[hidden] { display: none; }
.guide-question { font-size: 1.08rem; font-weight: 700; color: var(--blue-dark); margin: 0 0 4px; padding: 0; }
.guide-sub { font-size: .88rem; color: var(--muted); margin: 0 0 14px; }
.guide-options { display: grid; gap: 8px; }
.guide-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.guide-option:hover { border-color: var(--blue); background: var(--bg-soft); }
.guide-option input { margin: 3px 0 0; accent-color: var(--blue); flex: none; }
.guide-option-text { font-size: .93rem; line-height: 1.45; }
.guide-option-text small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.guide-option.is-checked { border-color: var(--blue); background: var(--blue-light); }
.guide-option input:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }

.guide-result[hidden] { display: none; }
.guide-verdict { border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.guide-verdict h3 { margin: 0 0 6px; font-size: 1.1rem; }
.guide-verdict p { margin: 0 0 8px; font-size: .95rem; line-height: 1.6; }
.guide-verdict p:last-child { margin-bottom: 0; }
.guide-verdict-red { background: #fdeaea; border-left: 5px solid #c9302c; }
.guide-verdict-red h3 { color: #a02622; }
.guide-verdict-amber { background: #fdf3e3; border-left: 5px solid var(--accent); }
.guide-verdict-amber h3 { color: #9c6a12; }
.guide-verdict-green { background: #eef8f0; border-left: 5px solid var(--green-dark); }
.guide-verdict-green h3 { color: var(--green-dark); }
.guide-verdict-blue { background: var(--blue-light); border-left: 5px solid var(--blue); }
.guide-verdict-blue h3 { color: var(--blue-dark); }
.guide-verdict ul { margin: 8px 0 0; padding-left: 1.2em; font-size: .93rem; }
.guide-verdict li { margin-bottom: 4px; }

.guide-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.guide-card { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; padding: 14px 18px; }
.guide-card h4 { margin: 0 0 6px; font-size: .98rem; color: var(--blue-dark); }
.guide-card p { margin: 0 0 8px; font-size: .92rem; line-height: 1.55; }
.guide-card p:last-child { margin-bottom: 0; }
.guide-card ul { margin: 0 0 8px; padding-left: 1.15em; font-size: .92rem; line-height: 1.5; }
.guide-card-src { font-size: .8rem; color: var(--muted); }
.guide-section-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; font-weight: 700; }
.guide-recap { font-size: .86rem; color: var(--muted); margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.guide-recap strong { color: var(--ink); }

/* ---------- Wachfenster-Tagesleiste ---------- */
.day-svg-wrap { margin: 4px 0 2px; }
.day-block-sleep { fill: var(--lila-tief); }
.day-block-nap { fill: var(--lila); opacity: .85; }
.day-block-wake { fill: var(--lila-flaeche); stroke: var(--line); stroke-width: 1; }
.day-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.day-stats strong { color: var(--blue-dark); }
.fig-legend-swatch-night { background: var(--lila-tief); }
.fig-legend-swatch-nap { background: var(--lila); }
.fig-legend-swatch-awake { background: var(--lila-flaeche); border: 1px solid var(--line); }

/* ---------- Sicherer Schlaf: Hotspots ---------- */
.crib-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
.crib-svg-wrap { width: 100%; max-width: 640px; margin: 0 auto; }
.crib-svg-wrap svg { border-radius: 10px; overflow: hidden; }
.cw-cap { font-size: 12px; fill: var(--muted); }
.crib-hotspot { cursor: pointer; }
.crib-hotspot circle.hs-ring { fill: var(--lila); opacity: .2; }
.crib-hotspot line.hs-leader { stroke: var(--lila-dunkel); stroke-width: 1.4; opacity: .55; }
.crib-hotspot circle.hs-leader-end { fill: var(--lila-dunkel); opacity: .7; }
.crib-hotspot.active line.hs-leader, .crib-hotspot.active circle.hs-leader-end { opacity: 1; }
.crib-hotspot circle.hs-dot { fill: var(--lila); stroke: #fff; stroke-width: 2; }
.crib-hotspot text.hs-num { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.crib-hotspot:hover circle.hs-dot, .crib-hotspot.active circle.hs-dot { fill: var(--lila-dunkel); }
.crib-hotspot.active circle.hs-ring { opacity: .4; }
.crib-hotspot:focus { outline: none; }
.crib-hotspot:focus-visible circle.hs-ring { opacity: .55; }
.crib-detail { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: var(--bg-soft); }
.crib-detail h4 { margin: 0 0 8px; font-size: 1rem; color: var(--blue-dark); }
.crib-detail p { margin: 0 0 8px; font-size: .92rem; line-height: 1.55; }
.crib-detail p:last-child { margin-bottom: 0; }
.crib-detail-src { font-size: .8rem; color: var(--muted); }
.crib-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.crib-list button {
    padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font: inherit; font-size: .82rem; cursor: pointer; transition: all .15s ease;
}
.crib-list button:hover { border-color: var(--blue); }
.crib-list button.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; }
.crib-frame { fill: none; stroke: var(--lila-mittel); stroke-width: 5; stroke-linejoin: round; }
.crib-bar { stroke: var(--lila-hell); stroke-width: 3.5; stroke-linecap: round; }
.crib-mattress { fill: var(--lila-flaeche); stroke: var(--line); stroke-width: 1.5; }
.crib-body { fill: #fff; stroke: var(--muted); stroke-width: 1.5; }
.crib-sack { fill: var(--lila-flaeche); stroke: var(--lila); stroke-width: 1.5; }
.crib-room { fill: var(--bg-soft); stroke: var(--line); stroke-width: 1.5; }
.crib-face { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }

/* ---------- Methodenfilter ---------- */
.method-filters { display: grid; gap: 16px; margin-bottom: 18px; }
.method-count { font-size: .86rem; color: var(--muted); margin: 0 0 12px; }
.method-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.method-card { border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px; background: #fff; }
.method-card[hidden] { display: none; }
.method-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; }
.method-card h4 { margin: 0; font-size: 1rem; color: var(--blue-dark); }
.method-badge {
    font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.method-badge-best { background: #eef8f0; color: var(--green-dark); }
.method-badge-likely { background: var(--blue-light); color: var(--blue-dark); }
.method-badge-thin { background: #fdf3e3; color: #9c6a12; }
.method-card p { margin: 0 0 8px; font-size: .92rem; line-height: 1.55; }
.method-card p:last-child { margin-bottom: 0; }
.method-meta { font-size: .82rem; color: var(--muted); }
.method-empty { padding: 16px 18px; background: var(--bg-soft); border-radius: 10px; font-size: .92rem; color: var(--muted); }
.method-empty[hidden] { display: none; }
.method-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: 2px; }

/* ---------- Koffein-Restkurve ---------- */
.caffeine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.caf-band { fill: var(--lila); opacity: .16; }
.caf-line { fill: none; stroke: var(--lila); stroke-width: 2.5; stroke-linecap: round; }
.caf-bedline { stroke: var(--lila-dunkel); stroke-width: 1.5; stroke-dasharray: 5 4; }
.caf-limit { stroke: #c9302c; stroke-width: 1.5; stroke-dasharray: 3 3; }
.caf-limit-label { font-size: 11px; fill: #c9302c; }
.caf-readout { margin: 14px 0 0; font-size: .95rem; line-height: 1.6; }
.caf-readout strong { color: var(--blue-dark); }
.fig-legend-swatch-caf { background: var(--lila-hell); }
.fig-legend-swatch-cafline { background: var(--lila); }

/* ---------- Abend-Timeline ---------- */
/* Die Uhrzeit steht allein in der obersten Zeile, die Schieberegler darunter. */
.evening-bedtime { margin-bottom: 18px; }
.evening-bedtime .if-field > label { min-height: 0; }
.evening-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px; margin-bottom: 20px; }
/* Labels reservieren feste 2-zeilige Höhe, damit die Regler in jeder Zeile auf
   gleicher Höhe sitzen, unabhängig davon, ob ein Label 1 oder 2 Zeilen braucht. */
.evening-sliders .if-field { display: flex; flex-direction: column; }
.evening-sliders .if-field > label { min-height: 3.3em; }
.evening-sliders .if-range-value-line { margin: 0 0 6px; font-size: .88rem; white-space: nowrap; color: var(--ink); }
.evening-sliders .if-field input[type="range"],
.evening-sliders .if-field input[type="time"] { margin-top: auto; }
.ev-axis { stroke: var(--line); stroke-width: 1.5; }
.ev-lane-label { font-size: 12px; fill: var(--ink); font-weight: 600; }
.ev-bar-screen { fill: #d9534f; opacity: .78; }
.ev-bar-light { fill: #f4a72c; opacity: .82; }
.ev-bar-active { fill: #58b368; opacity: .78; }
.ev-bar-ritual { fill: var(--lila); opacity: .85; }
.ev-bed-line { stroke: var(--lila-dunkel); stroke-width: 2; }
.ev-bed-label { font-size: 11px; fill: var(--lila-dunkel); font-weight: 700; }
.ev-gap-label { font-size: 11px; fill: var(--muted); }
.ev-feedback { display: grid; gap: 8px; margin-top: 16px; }
.ev-feedback-item { font-size: .89rem; line-height: 1.5; padding: 9px 14px; border-radius: 8px; background: var(--bg-soft); border-left: 4px solid var(--line); }
.ev-feedback-item.is-tight { border-left-color: var(--accent); background: #fdf9f2; }
.ev-feedback-item.is-ok { border-left-color: var(--green-dark); background: #f4fbf6; }

/* ---------- Trigger-Protokoll (Nägelkauen: Beobachtungswoche) ---------- */
.tp-daybar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tp-day {
    flex: 1 1 0; min-width: 62px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; font: inherit; font-size: .8rem; color: var(--muted); cursor: pointer; text-align: center;
}
.tp-day:hover { border-color: var(--blue); }
.tp-day.is-active { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 700; }
.tp-day.has-data { border-color: var(--lila-hell); }
.tp-day-num { display: block; font-weight: 700; color: var(--ink); }
.tp-day.is-active .tp-day-num { color: var(--blue-dark); }
.tp-day-dots { display: block; margin-top: 3px; font-size: .75rem; color: var(--blue); min-height: 1em; }

.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 4px 0 0; }
.tp-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
    font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; text-align: left;
}
.tp-btn:hover { border-color: var(--blue); background: var(--blue-light); }
.tp-btn:active { transform: translateY(1px); }
.tp-btn.has-data { border-color: var(--blue); background: var(--blue-light); }
.tp-btn-count {
    flex: none; min-width: 24px; padding: 1px 7px; border-radius: 999px; text-align: center;
    background: var(--line); color: var(--muted); font-size: .8rem; font-weight: 700;
}
.tp-btn.has-data .tp-btn-count { background: var(--blue); color: #fff; }

.tp-bars { margin: 0; }
.tp-bar-row { display: grid; grid-template-columns: 150px 1fr 42px; align-items: center; gap: 10px; margin-bottom: 7px; }
.tp-bar-label { font-size: .86rem; color: var(--ink); }
.tp-bar-track { display: block; height: 20px; background: var(--bg-soft); border-radius: 5px; overflow: hidden; }
.tp-bar-fill { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 5px; transition: width .25s ease; }
.tp-bar-fill.is-top { background: var(--blue-dark); }
.tp-bar-value { font-size: .84rem; font-weight: 700; color: var(--blue-dark); text-align: right; }

.tp-summary { background: var(--blue-light); border-left: 5px solid var(--blue); border-radius: 10px; padding: 14px 18px; margin-top: 18px; }
.tp-summary h4 { margin: 0 0 6px; font-size: .95rem; color: var(--blue-dark); }
.tp-summary p { margin: 0 0 8px; font-size: .92rem; line-height: 1.6; }
.tp-summary p:last-child { margin-bottom: 0; }
.tp-empty { color: var(--muted); font-size: .92rem; margin: 0; }
.tp-report {
    width: 100%; min-height: 210px; margin-top: 12px; padding: 12px 14px; font-family: inherit; font-size: .86rem;
    line-height: 1.6; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}

@media (max-width: 560px) {
    .tp-bar-row { grid-template-columns: 110px 1fr 38px; gap: 7px; }
    .tp-bar-label { font-size: .8rem; }
}

/* ---------- Responsive / Print für die interaktiven Elemente ---------- */
@media (max-width: 720px) {
    .crib-layout { grid-template-columns: 1fr; }
    .guide-progress { flex-wrap: wrap; }
    .article-figure { padding: 16px 14px 14px; }
}

@media print {
    .guide-progress, .guide-step, .if-btn-row, .if-controls,
    .method-filters, .crib-list, .evening-sliders, .caffeine-grid { display: none !important; }
    .article-figure { break-inside: avoid; border-color: #ccc; }
    .tp-grid, .tp-daybar { display: none !important; }
}

/* --- Literaturrecherche (Adminbereich) ---------------------------------- */
.research-form { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 24px 0 32px; }
.research-field { margin-bottom: 16px; }
.research-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.research-field input[type="text"], .research-field select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    font: inherit; background: #fff;
}
.research-field input[type="text"]:focus, .research-field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.research-hint { color: var(--muted); font-size: .85rem; margin: 6px 0 0; }
.research-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.research-progress { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 32px; }
.research-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.research-bar-fill { height: 100%; width: 0; background: var(--blue); transition: width .3s ease; }
.research-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.research-step { padding: 6px 10px; border-radius: 6px; background: var(--bg-soft); color: var(--muted); font-size: .9rem; }
.research-step.is-active { background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }
.research-step.is-done { background: #e6f6ea; color: var(--green-dark); }
.research-step.is-failed { background: #fdeaea; color: #b13b3b; }

.research-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; }
.research-tab {
    padding: 8px 16px; border: 1px solid var(--line); border-bottom: none;
    border-radius: 8px 8px 0 0; background: var(--bg-soft); color: var(--muted);
    font: inherit; cursor: pointer;
}
.research-tab.is-active { background: #fff; color: var(--ink); font-weight: 600; border-color: var(--blue); }
.research-panel { display: none; border: 1px solid var(--line); border-radius: 0 8px 8px 8px; padding: 16px 18px; }
.research-panel.is-active { display: block; }
.research-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.research-panel-head .research-hint { margin: 0; }
.research-panel-actions { display: flex; gap: 8px; align-items: center; }
.research-output {
    width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8rem; line-height: 1.5; padding: 12px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--bg-soft); resize: vertical;
}
.research-note { color: var(--muted); font-size: .85rem; max-width: 420px; }
.result-table tr.is-retracted { background: #fdeaea; }
.result-table tr.is-retracted a { color: #b13b3b; }
.stat-value.stat-warn { color: #b13b3b; }

/* ---------- Newsletter-Administration ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border-bottom: 1px solid var(--line); margin: 4px 0 22px; padding-bottom: 8px; }
.subnav-link { padding: 7px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.subnav-link:hover { background: var(--bg-soft); text-decoration: none; }
.subnav-link.is-active { background: var(--blue-light); color: var(--blue-dark); }
.subnav-right { margin-left: auto; font-weight: 500; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.filter-bar input[type="search"] { min-width: 220px; padding: 8px 12px; border: 1px solid var(--line);
    border-radius: 8px; font: inherit; }
.filter-bar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }

.add-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; margin: 0 0 22px; background: var(--bg-soft); }
.add-panel > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.form-inline-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0 14px; }
.form-inline-row input, .form-inline-row select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.form-inline-row input[name="email"] { min-width: 240px; }
.form-inline { display: inline-block; margin: 0; }
.form-hint { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }

.cell-input { width: 100%; min-width: 150px; padding: 6px 8px; border: 1px solid var(--line);
    border-radius: 6px; font: inherit; background: var(--bg); }
.cell-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; white-space: nowrap; }
.cell-actions select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }

.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 22px 0; }
.pager-info { color: var(--muted); font-size: .9rem; }

/*
 * Bare Badge = positiver Status (bestätigt/OK/versendet).
 *
 * Die Abwandlungen stehen hier noch einmal, und zwar notgedrungen: Sie sind
 * weiter oben in der Datei definiert und haben dieselbe Gewichtung wie diese
 * Regel - die spätere gewinnt. Dadurch erschienen alle Abzeichen grün, also
 * in der Farbe für "in Ordnung": der Entwurf eines Artikels, ein Bounce im
 * Newsletter, die nach der Freigabe geänderte Dosierungsregel und - auf einer
 * öffentlichen Seite - die Gefahrenangabe eines Rückrufs ("Ersticken").
 * Wer hier ein Abzeichen ergänzt, setzt es unter diese Zeile.
 */
.badge { background: #e6f6ea; color: #2f7a41; }
.badge-muted { background: var(--lila-flaeche); color: var(--muted); }
.badge-free { background: #e6f6ea; color: #2f7a41; }
.badge-due { background: #fff3df; color: #8a5a00; }
.badge-future { background: var(--blue-light); color: var(--blue-dark); }
.badge-cry { background: #fdeaea; color: #b13b3b; }

.mail-preview { background: var(--bg); border: 1px solid var(--line); max-height: 480px; overflow: auto; }

/* ---------- Redaktion: Artikelübersicht und -editor ---------- */
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: end; gap: 14px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; margin-bottom: 18px;
}
.filter-searchbox { display: flex; flex-direction: column; gap: 8px; flex: 1 1 340px; }
.filter-search { display: flex; gap: 8px; }
.filter-search input {
    flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-family: inherit; font-size: .95rem; min-width: 0;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.filter-field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.result-count { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.empty-hint { color: var(--muted); padding: 24px 0; }

.article-table td { vertical-align: top; }
/* Zahlenspalten aus einer Pipe-Tabelle (Ausrichtung "---:" der Vorlage).
   Rechtsbündig gesetzte Zahlen lassen sich der Größe nach vergleichen,
   linksbündige nicht. */
.article-table th.zahl, .article-table td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.article-title { font-weight: 600; display: block; }
.article-path { display: block; font-size: .82rem; color: var(--muted); font-family: ui-monospace, "Consolas", monospace; }
.article-path-missing { font-style: italic; font-family: inherit; }
.article-snippet { display: block; margin-top: 6px; font-size: .85rem; color: var(--muted); max-width: 60ch; }
.article-cats { font-size: .85rem; color: var(--muted); max-width: 22ch; }
.article-actions { white-space: nowrap; }
.article-actions .btn { margin-right: 6px; }
.article-table mark { background: #fdf0a8; color: inherit; padding: 0 1px; border-radius: 2px; }

.pager { display: flex; align-items: center; gap: 14px; margin: 18px 0 40px; }
.pager-info { color: var(--muted); font-size: .9rem; }

.article-form { margin-top: 8px; }
.article-form .form-row { margin-bottom: 16px; }
.article-form label { display: block; font-weight: 600; margin-bottom: 5px; }
.article-form input[type="text"], .article-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-family: inherit; font-size: .97rem;
}
.field-hint { font-weight: 400; color: var(--muted); font-size: .85rem; }

.editor-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
    background: var(--bg-soft); padding: 8px 10px;
}
.editor-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.editor-tools.is-disabled { opacity: .4; pointer-events: none; }
.ed-btn {
    border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer;
    padding: 5px 9px; font-size: .85rem; font-family: inherit; color: var(--ink);
}
.ed-btn:hover { background: var(--blue-light); border-color: var(--blue); }
.editor-modes { display: flex; gap: 4px; }
.ed-mode {
    border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer;
    padding: 5px 14px; font-size: .85rem; font-family: inherit; color: var(--muted);
}
.ed-mode.is-active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

.editor-wrap { border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: #fff; }
.editor-canvas {
    min-height: 480px; max-height: 70vh; overflow-y: auto; padding: 20px 24px;
    outline: none; line-height: 1.65;
}
.editor-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-light); }
.editor-canvas img { max-width: 100%; height: auto; }
.editor-canvas table { max-width: 100%; }
.editor-source {
    width: 100%; min-height: 480px; max-height: 70vh; border: 0; padding: 16px 18px;
    font-family: ui-monospace, "Consolas", monospace; font-size: .85rem; line-height: 1.6;
    resize: vertical; outline: none;
}
.editor-note { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }

.meta-box, .revision-box {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 20px 0;
    background: var(--bg-soft);
}
.meta-box summary, .revision-box summary { cursor: pointer; font-weight: 600; color: var(--blue-dark); }
.meta-box[open] summary, .revision-box[open] summary { margin-bottom: 12px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0 40px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-right: auto; }
.check-row input { width: 18px; height: 18px; }
/* --- Checklisten zum Abhaken -------------------------------------------
   Im Artikel sind die Punkte mehrzeilig; die Box gehört dann nach oben zur
   ersten Zeile, nicht in die Mitte des Absatzes. Ein gesetzter Haken bleibt
   auch ohne Auswertung sichtbar – die Zeile tritt zurück. */
.article-body .check-row { align-items: flex-start; gap: 10px; margin-bottom: 8px; line-height: 1.45; }
.article-body .check-row input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--blue); }
/* Erledigtes tritt zurueck. Nicht bei Risikolisten: dort sind gerade die
   angekreuzten Zeilen die wichtigen - sie duerfen nicht ausgegraut wirken. */
.article-body .method-panel:not([data-modus="risiko"]) .check-row.is-checked { color: var(--muted); }
.article-body .method-panel[data-modus="risiko"] .check-row.is-checked { color: var(--blue-dark); }

/* Auswertungsfeld: die Erkenntnis, nicht der Zählerstand. Farbton nach
   Ergebnis, wie bei .rg-befund – dieselbe Farbsprache im ganzen Ratgeber. */
.article-body .check-erkenntnis {
    margin-top: 16px; padding: 14px 16px; border-top: 0; border-radius: 10px;
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
    font-size: .95rem; color: var(--ink);
}
.article-body .check-erkenntnis.is-gruen { background: #eaf7ec; border-color: #cbe8d1; border-left-color: var(--green-dark); }
.article-body .check-erkenntnis.is-gelb  { background: #fff6e5; border-color: #f3e2c0; border-left-color: var(--accent); }
.article-body .check-erkenntnis.is-rot   { background: #fdeaea; border-color: #f2cfcf; border-left-color: #c9302c; }

.article-body .check-stand {
    display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
    margin: 0 0 8px; font-size: .84rem; color: var(--muted);
}
/* Ohne Umbruch schob der Knopf "Haken loeschen" auf schmalen Schirmen die
   ganze Seite nach rechts: Balken, Zahl und Knopf sind alle drei
   umbruchgeschuetzt und passen zusammen nicht in 350 px. */
.article-body .check-balken {
    flex: 0 0 88px; height: 6px; border-radius: 3px;
    background: rgba(0, 0, 0, .09); overflow: hidden;
}
.article-body .check-balken > span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.article-body .check-zahl { white-space: nowrap; }
/* Weg zurueck: bei gemerkten Listen loescht der Knopf zugleich das im
   Browser Gespeicherte. Steht rechts in der Fortschrittszeile. */
.article-body .check-reset {
    margin-left: auto; padding: 2px 6px; border: 0; background: none;
    font: inherit; color: var(--muted); text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; white-space: nowrap; border-radius: 4px;
}
.article-body .check-reset:hover { color: var(--blue-dark); }
.article-body .check-reset:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.article-body .check-gemerkt { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }

.article-body .check-urteil { margin: 0; line-height: 1.55; }
.article-body .check-urteil strong { color: var(--blue-dark); }
.article-body .check-erkenntnis.is-rot .check-urteil strong { color: #a5221e; }

.article-body .check-liste-titel { margin: 12px 0 4px; font-weight: 700; font-size: .9rem; }
.article-body .check-liste { margin: 0; padding-left: 20px; }
.article-body .check-liste li { margin: 5px 0; line-height: 1.5; }
.article-body .check-liste b { font-weight: 700; }
.article-body .check-ziel { white-space: nowrap; font-size: .88em; }
.article-body .check-nachsatz { margin: 12px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

@media print {
    .article-body .check-erkenntnis { background: #fff; }
}


@media (max-width: 700px) {
    .filter-searchbox { flex: 1 1 100%; }
    .editor-canvas, .editor-source { min-height: 320px; }
}

/* Sortierbare Spaltenköpfe der Redaktionsübersicht */
.article-table .th-sort { padding: 0; }
.article-table .th-sort a {
    display: block; padding: 10px 12px; color: inherit; text-decoration: none;
    white-space: nowrap; font-weight: 700;
}
.article-table .th-sort a:hover { background: var(--blue-light); color: var(--blue-dark); }
.article-table .th-sort.is-sorted a { color: var(--blue-dark); }
.article-table .sort-arrow { font-size: .7em; vertical-align: 1px; }

/* Sortierbare Spaltenköpfe, die site.js aus table[data-sortable] baut.
   Der Kopf bleibt eine Überschrift; die Schaltfläche erbt deren Aussehen. */
.th-sort .sort-btn {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 700; color: inherit;
    white-space: nowrap; cursor: pointer;
}
.th-sort .sort-btn:hover { color: var(--blue-dark); text-decoration: underline; }
.th-sort .sort-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.th-sort.is-sorted .sort-btn { color: var(--blue-dark); }
.th-sort .sort-arrow { font-size: .7em; vertical-align: 1px; }
.th-sort .sort-arrow.is-idle { opacity: .35; font-size: .85em; }
.th-sort .sort-btn:hover .sort-arrow.is-idle { opacity: .8; }

/* Schalter „Groß-/Kleinschreibung beachten“ in der Suchleiste */
.filter-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: .88rem; color: var(--muted);
}
.filter-check input { width: 17px; height: 17px; cursor: pointer; }
.filter-check:hover span { color: var(--ink); }

/* Suchbegriff in der Trefferzeile: Leerzeichen am Rand müssen sichtbar bleiben */
.search-term {
    white-space: pre; background: var(--blue-light); border-radius: 4px;
    padding: 2px 6px; font-family: ui-monospace, "Consolas", monospace;
    font-size: .88em; color: var(--ink);
}

/* ---------- Ernährungsberater: Lebensmittel-Nachschlagewerk ---------- */
.food-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; }
.food-item {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--line); border-left-width: 5px; border-radius: var(--radius);
    padding: 14px 16px; background: #fff;
}
.food-item.food-gruen { border-left-color: var(--green); }
.food-item.food-gelb  { border-left-color: var(--accent); }
.food-item.food-rot   { border-left-color: #c0392b; }
.food-dot { font-size: 1.1rem; line-height: 1.5; }
.food-gruen .food-dot { color: var(--green-dark); }
.food-gelb  .food-dot { color: var(--accent); }
.food-rot   .food-dot { color: #c0392b; }
.food-body { min-width: 0; }
.food-name { margin: 0 0 4px; font-size: 1.02rem; color: var(--ink); }
.food-verdict {
    font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    padding: 2px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
.food-gruen .food-verdict { background: #e8f5e9; color: var(--green-dark); }
.food-gelb  .food-verdict { background: #fdf3e0; color: #9a6410; }
.food-rot   .food-verdict { background: #fdecea; color: #a8324a; }
.food-note { margin: 0 0 6px; font-size: .94rem; line-height: 1.55; }
.food-group { margin: 0; font-size: .82rem; color: var(--muted); }
.advisor-result .stat-value-text { font-size: 1rem; line-height: 1.5; }

@media (max-width: 560px) {
    .food-verdict { display: inline-block; margin: 4px 0 0; }
}

/* Zweite Menüebene: Untermenüs klappen seitlich auf */
.has-sub-2 { position: relative; }
.has-sub-2 > a::after {
    content: '\203A'; float: right; color: var(--muted); font-size: 1.05em; line-height: 1;
}
.sub-menu-2 {
    list-style: none; margin: 0; padding: 8px; position: absolute; top: -8px; left: 0;
    background: #fff; box-shadow: var(--shadow); border-radius: 10px; min-width: 220px;
    opacity: 0; visibility: hidden; transform: translateX(6px); z-index: 60;
    /* Versteckt liegt die Ebene über ihrem Menü (left: 0), erst geöffnet rechts daneben:
       Bei left: 100% verbreiterten die unsichtbaren Menüs die Seite, zwischen 900 und
       ~1100 px gab es einen waagrechten Scrollbalken (02.10.2026). Das Zurückspringen
       wartet, bis das Ausblenden fertig ist. */
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s, left 0s linear .15s;
    /* Wie weit unten die zweite Ebene beginnt, hängt vom Eintrag ab – site.js
       misst das beim Aufklappen und schreibt das Ergebnis nach --sub2-max.
       Der Vorgabewert greift, solange noch nichts gemessen wurde. */
    max-height: var(--sub2-max, calc(100vh - var(--header-h, 150px) - 16px));
    overflow-y: auto; overscroll-behavior: contain;
}
.has-sub-2:hover > .sub-menu-2, .has-sub-2:focus-within > .sub-menu-2 {
    left: 100%; opacity: 1; visibility: visible; transform: translateX(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s, left 0s;
}
.has-sub-2.nach-links:hover > .sub-menu-2, .has-sub-2.nach-links:focus-within > .sub-menu-2 { left: auto; right: 100%; }
.sub-menu-2 li a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--ink); }
.sub-menu-2 li a:hover { background: var(--blue-light); text-decoration: none; }

/* Reicht der Platz nach rechts nicht, öffnet die letzte Gruppe nach links */
@media (max-width: 1180px) {
    .has-sub-2:last-of-type .sub-menu-2 { left: auto; right: 100%; transform: translateX(-6px); }
    .has-sub-2:last-of-type:hover > .sub-menu-2 { transform: translateX(0); }
}

@media (max-width: 900px) {
    .sub-menu-2 {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding-left: 14px; min-width: 0; display: none;
        max-height: none; overflow: visible;
    }
    .has-sub-2.open > .sub-menu-2 { display: block; }
    .has-sub-2 > a::after { content: '\002B'; font-weight: 700; }
    .has-sub-2.open > a::after { content: '\2212'; }
}

/* ---------------------------------------------------------------------------
   Werkzeuge für Eltern
   Gemeinsame Bausteine der Werkzeugseiten (Übersicht, Zeitfenster, Quellen,
   häufige Fragen). Die Zeitfenster-Balken sind bewusst reines CSS und kein
   SVG: Sie wachsen mit der Schriftgröße mit, brechen auf schmalen Displays
   nicht um und bleiben ohne JavaScript bedienbar.
--------------------------------------------------------------------------- */

.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.breadcrumbs li + li::before { content: '›'; margin: 0 8px; opacity: .5; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

.tool-group { margin-bottom: 34px; }
.tool-group > .muted { margin-top: -8px; margin-bottom: 14px; }

/* Zeitachse über den Balken – dieselbe Skala für alle Meilensteine einer Seite */
.ms-scale { position: relative; height: 20px; margin: 18px 0 6px; font-size: .75rem; color: var(--muted); }
.ms-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ms-tick:first-child { transform: none; }
.ms-tick:last-child { transform: translateX(-100%); }

.ms-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ms-item:last-child { border-bottom: 0; }
.ms-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.ms-label { font-weight: 600; }
.ms-range { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.ms-range abbr { text-decoration: none; color: var(--blue); cursor: help; }

.ms-bar { position: relative; height: 14px; margin: 8px 0 6px; background: var(--bg-soft);
          border-radius: 999px; overflow: visible; }
.ms-window { position: absolute; top: 0; height: 100%; border-radius: 999px;
             background: var(--blue-light); border: 1px solid var(--blue); }
.is-open .ms-window { background: #e6f6ea; border-color: var(--green-dark); }
/* Senkrechter Strich für das aktuelle Alter, überragt den Balken oben und unten */
.ms-now { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--accent); }
.ms-now::after { content: ''; position: absolute; left: -3px; top: -4px;
                 width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.ms-text { margin: 4px 0 0; font-size: .95rem; color: var(--muted); }
.ms-save { margin-top: 8px; }
.ms-earlier { margin-top: 22px; }
.ms-earlier ul { margin-top: 8px; }
.ms-earlier summary { cursor: pointer; font-weight: 600; }

/* Häufige Fragen: aufklappbar, damit die Seite kurz bleibt und trotzdem
   vollständig im Quelltext steht (Suchmaschinen lesen auch geschlossene). */
.tool-faq { margin-top: 34px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; padding-right: 20px; }
.faq-item summary::marker { color: var(--blue); }
.faq-item p { margin: 8px 0 4px; color: var(--muted); }

.tool-sources { margin-top: 34px; }
.tool-sources .source-list { list-style: none; padding: 0; font-size: .9rem; color: var(--muted); }
.tool-sources .source-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.tool-sources .source-list li:last-child { border-bottom: 0; }
.tool-sources .source-list em { color: var(--ink); font-style: normal; }

.tool-flags { margin-top: 30px; padding: 18px 20px; border-left: 4px solid var(--accent);
              background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.tool-flags h2 { margin-top: 0; }
.warn-list { margin: 12px 0; padding-left: 20px; }
.warn-list li { margin-bottom: 8px; }

.tool-explain { margin-top: 34px; }
.tool-links { margin-top: 30px; }

/* Schaltfläche, die wie ein Link aussieht (Löschen der gemerkten Angaben) */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue);
           text-decoration: underline; cursor: pointer; }
.kind-kontext-hinweis { margin-top: 10px; }

@media (max-width: 560px) {
    .ms-head { flex-direction: column; gap: 2px; }
    .ms-range { white-space: normal; }
}

/* ---------- Dosierungsrechner unter einer Medikamentenseite ---------- */
/*
 * Ein Bausatz für alle Präparate, nicht ein Entwurf für eines.
 *
 * Hier steht kein Medikamentenname, keine Einheit und keine Darreichungsform.
 * Der Block bekommt seinen Inhalt aus der Regel des jeweiligen Präparats; das
 * Stylesheet gibt nur die Form vor - dieselbe für Zäpfchen, Saft, Tropfen,
 * Nasenspray und Filmtabletten.
 *
 * Die Breite hängt nicht am Fenster, sondern an der Spalte, in der der Rechner
 * steht: Auf einer Beipackzettelseite bleibt neben ihm die Kontaktspalte
 * stehen, auf einer breiten Seite nicht. Deshalb Container-Anfragen statt
 * Bildschirmbreiten - derselbe Baustein sitzt so an beiden Orten richtig.
 */
.dosis-rechner {
    /* Farben des Bausteins. Sie leiten sich aus der Farbwelt der Seite ab, damit
       der Rechner nicht wie ein Fremdkörper im Beipackzettel steht. */
    --dk-flaeche:     #fff;
    --dk-grund:       var(--bg-soft);
    --dk-linie:       var(--line);
    --dk-linie-stark: var(--lila-linie);
    --dk-ton:         var(--blue);
    --dk-ton-dunkel:  var(--blue-dark);
    --dk-ton-hell:    var(--blue-light);
    --dk-gut:         #e8f5ec;
    --dk-gut-dunkel:  #2f7a41;
    --dk-warn:        #fdf1de;
    --dk-warn-dunkel: #8a5a00;
    --dk-stop:        #fdecec;
    --dk-stop-dunkel: #a32620;
    --dk-rund:        22px;
    --dk-rund-klein:  14px;
    --dk-schatten:    0 8px 24px rgba(111, 58, 140, .06);

    container-type: inline-size;
    container-name: dosis;

    margin: 2.4em 0 1.6em;
    padding: 26px 26px 24px;
    border: 1px solid var(--dk-linie);
    border-radius: var(--dk-rund);
    background: var(--dk-grund);
}

.dosis-symbol { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- Kopf: welches Präparat, und was der Rechner damit tut ---- */
.dosis-kopf { margin-bottom: 18px; }
.dosis-titel {
    font-size: 1.55rem; line-height: 1.2; margin: 0 0 6px;
    color: var(--dk-ton-dunkel);
}
.dosis-produkt {
    margin: 0 0 10px; font-size: 1.02rem; font-weight: 600; color: var(--dk-ton);
}
.dosis-lead { margin: 0; color: var(--muted); max-width: 62ch; }

/* Die Eckdaten des Präparats. Zurückhaltend gesetzt, aber vollständig - wer
   zwei Packungen zu Hause hat, muss hier sehen, um welche es geht.
   Flex statt Raster: Jede Zeile wird von ihren Zellen ganz gefüllt, egal ob
   eine Regel drei oder fünf Angaben trägt - es bleibt keine leere Restzelle.
   Die Trennlinien sind Ränder der Zellen; der um 1px verschobene linke und
   obere Rand der jeweils ersten Zelle verschwindet unter overflow: hidden. */
.dosis-kontext {
    display: flex; flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--dk-linie);
    border-radius: var(--dk-rund-klein);
    background: var(--dk-flaeche);
    box-shadow: var(--dk-schatten);
    overflow: hidden;
}
.dosis-kontext > div {
    flex: 1 1 140px; min-width: 0;
    margin: -1px 0 0 -1px; padding: 12px 16px;
    border-left: 1px solid var(--dk-linie); border-top: 1px solid var(--dk-linie);
}
.dosis-kontext > .dosis-kontext-name { flex: 2 1 220px; }
.dosis-kontext dt {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 3px;
}
.dosis-kontext dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.dosis-kontext-name dd { color: var(--dk-ton-dunkel); font-size: 1rem; }
/* Die Fußzeile: woher die Angaben stammen. Eine Zeile über die volle Breite,
   Bezeichnung und Text nebeneinander, sobald Platz ist. */
.dosis-kontext > .dosis-kontext-quelle {
    flex-basis: 100%;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
    padding: 10px 16px;
    background: var(--dk-ton-hell);
}
.dosis-kontext-quelle dt { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--dk-ton-dunkel); }
.dosis-kontext-quelle dt .dosis-symbol { width: 16px; height: 16px; }
.dosis-kontext-quelle dd { font-weight: 500; font-size: .9rem; color: var(--ink); }

/* ---- Pflichthinweis. Er steht vor dem Formular und nicht erst im Ergebnis ---- */
.dosis-disclaimer {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 20px; padding: 14px 18px;
    background: var(--dk-warn);
    border: 1px solid #f3d9b4;
    border-radius: var(--dk-rund-klein);
    font-size: .95rem; line-height: 1.55;
    color: var(--dk-warn-dunkel);
}
.dosis-disclaimer > svg { margin-top: 2px; color: var(--dk-warn-dunkel); }
.dosis-disclaimer strong { color: var(--dk-warn-dunkel); }
.dosis-disclaimer-zusatz { display: block; margin-top: 3px; font-size: .89rem; }

.dosis-intern {
    display: block;
    margin: 0 0 18px; padding: 12px 16px;
    background: var(--dk-ton-hell);
    border: 1px solid var(--lila-linie);
    border-radius: var(--dk-rund-klein);
    font-size: .9rem;
}
.dosis-intern code { font-size: .85em; background: #fff; padding: 1px 5px; border-radius: 4px; }

/* ---- Zwei Karten: links die Eingaben, rechts die Auskunft ---- */
.dosis-raster { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }

.dosis-karte {
    background: var(--dk-flaeche);
    border: 1px solid var(--dk-linie);
    border-radius: var(--dk-rund);
    box-shadow: var(--dk-schatten);
    padding: 20px 22px 22px;
}

.dosis-kartenkopf { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.dosis-kartenkopf h3 {
    margin: 0 0 2px; font-size: 1.12rem; color: var(--dk-ton-dunkel); line-height: 1.3;
}
.dosis-kartenkopf p { margin: 0; font-size: .9rem; color: var(--muted); }
.dosis-symbolfeld {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 12px;
    background: var(--dk-ton-hell); color: var(--dk-ton-dunkel);
}
.dosis-symbolfeld-gruen { background: var(--dk-gut); color: var(--dk-gut-dunkel); }

/* ---- Formular ---- */
/* align-items:end laesst die Eingabefelder auf einer Linie stehen, auch wenn
   eine Beschriftung zweizeilig umbricht - sonst sitzt ein Feld hoeher als
   das daneben. */
.dosis-felder { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end; }
.dosis-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dosis-feld label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.dosis-optional { font-weight: 400; color: var(--muted); }
.dosis-feld input {
    width: 100%; min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--dk-linie-stark);
    border-radius: var(--dk-rund-klein);
    font: inherit; font-size: 1rem;
    background: var(--dk-flaeche); color: var(--ink);
}
/* Auch der Platzhalter muss lesbar sein: 4,5:1 gegen Weiss. */
.dosis-feld input::placeholder { color: var(--muted); opacity: 1; }
.dosis-feld input:focus-visible {
    outline: 3px solid var(--dk-ton-hell);
    outline-offset: 0;
    border-color: var(--dk-ton);
}
.dosis-feld input[aria-invalid="true"] { border-color: var(--dk-stop-dunkel); background: var(--dk-stop); }
/* Ein Fehler steht als Satz da und nicht nur als Farbe am Rahmen. */
.dosis-feldfehler {
    margin: 0; font-size: .86rem; font-weight: 600; color: var(--dk-stop-dunkel);
}

.dosis-aktion { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.dosis-rechner .btn { border-radius: var(--dk-rund-klein); }
.dosis-rechner .btn-primary { background: var(--dk-ton-dunkel); border-color: var(--dk-ton-dunkel); }
.dosis-rechner .btn-primary:hover { background: var(--dk-ton); border-color: var(--dk-ton); }
.dosis-knopf { padding: .8em 1.6em; }
/* Beide Schaltflaechen bleiben mit dem Finger treffbar - .btn-sm allein
   bliebe knapp unter den 44 px, die eine Fingerkuppe braucht. */
.dosis-aktion .btn { min-height: 46px; display: inline-flex; align-items: center;
    justify-content: center; }

/* ---- Ergebnis ---- */
.dosis-ergebnis {
    border-radius: var(--dk-rund-klein);
    padding: 18px 20px;
    background: var(--dk-gut);
    border: 1px solid #cfe7d6;
}
.dosis-ergebnis h4 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ink); }
.dosis-ergebnis p { margin: 0 0 8px; }
.dosis-ergebnis > :last-child { margin-bottom: 0; }

.dosis-ergebnis.is-start,
.dosis-ergebnis.is-laden { background: var(--dk-gut); }
.dosis-ergebnis.is-eingabe { background: var(--dk-stop); border-color: #f2cfcd; }
.dosis-ergebnis.is-eingabe h4 { color: var(--dk-stop-dunkel); }
.dosis-ergebnis.is-gesperrt { background: var(--dk-stop); border-color: #f2cfcd; }
.dosis-ergebnis.is-gesperrt h4 { color: var(--dk-stop-dunkel); }
.dosis-ergebnis.is-hinweis { background: var(--dk-warn); border-color: #f3d9b4; }
.dosis-ergebnis.is-hinweis h4 { color: var(--dk-warn-dunkel); }
.dosis-ergebnis.is-uneindeutig { background: var(--dk-warn); border-color: #f3d9b4; }

/* Ausgangs- und Zwischenzustand: angedeutete Zeilen, damit der Platz nicht
   leer wirkt - ohne Zahlen, die es noch gar nicht gibt. */
.dosis-platzhalter { display: grid; gap: 9px; }
.dosis-balken {
    display: block; height: 12px; border-radius: 999px;
    background: rgba(47, 122, 65, .16);
}
.dosis-balken:nth-child(1) { width: 82%; }
.dosis-balken:nth-child(2) { width: 58%; }
.dosis-balken:nth-child(3) { width: 70%; }
.dosis-platzhalter p { margin: 6px 0 0; font-size: .92rem; color: var(--dk-gut-dunkel); }
.dosis-ergebnis.is-laden .dosis-balken { animation: dosis-puls 1.1s ease-in-out infinite; }
@keyframes dosis-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .dosis-ergebnis.is-laden .dosis-balken { animation: none; }
}

/* Die Werte aus der Zeile der Packungsbeilage. Bezeichnung oben, Wert groß
   darunter - die Einheit steckt im Wert und kommt aus der Packungsbeilage. */
.dosis-kacheln { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 14px; }
.dosis-kachel {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--dk-flaeche);
    border: 1px solid #cfe7d6;
    border-radius: var(--dk-rund-klein);
    padding: 12px 14px;
}
.dosis-label {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.dosis-wert { font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.dosis-kachel-haupt { border-color: var(--dk-gut-dunkel); }
.dosis-kachel-haupt .dosis-wert { font-size: 1.3rem; color: var(--dk-gut-dunkel); }
.dosis-kachel-zeit .dosis-wert { font-variant-numeric: tabular-nums; }
.dosis-fussnote { margin-top: 3px; font-size: .84rem; font-weight: 400; color: var(--muted); }

.dosis-herkunft { font-size: .88rem; color: var(--muted); }
.dosis-grundlage { font-size: .9rem; color: var(--muted); }
.dosis-uneindeutig {
    font-weight: 700; color: var(--dk-warn-dunkel);
    padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .6);
}
.dosis-anmerkungen { margin: 0 0 12px; padding-left: 1.2em; font-size: .92rem; }
.dosis-anmerkungen li { margin-bottom: 6px; }
.dosis-verweis { font-size: .92rem; font-weight: 600; }
.dosis-cta {
    display: inline-block; margin-top: 4px;
    font-weight: 700; color: var(--dk-ton-dunkel);
    text-decoration: underline; text-underline-offset: 3px;
}

.dosis-tipp {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 14px 0 0; padding: 12px 16px;
    background: var(--dk-warn); border: 1px solid #f3d9b4;
    border-radius: var(--dk-rund-klein);
    font-size: .89rem; line-height: 1.5; color: var(--dk-warn-dunkel);
}
.dosis-tipp > svg { margin-top: 2px; }
.dosis-tipp strong { color: var(--dk-warn-dunkel); }
.dosis-noscript { margin: 14px 0 0; font-size: .93rem; }

/* ---- Was der Rechner macht ---- */
.dosis-erklaerung {
    margin-top: 18px; padding: 20px 22px 22px;
    background: var(--dk-flaeche);
    border: 1px solid var(--dk-linie);
    border-radius: var(--dk-rund);
    box-shadow: var(--dk-schatten);
}
.dosis-erklaerung-karten {
    display: grid; gap: 12px; grid-template-columns: 1fr;
    margin: 0; padding: 0; list-style: none;
}
.dosis-erklaerung-karten li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    background: var(--dk-ton-hell);
    border-radius: var(--dk-rund-klein);
}
.dosis-erklaerung-karten svg { margin-top: 2px; color: var(--dk-ton-dunkel); }
.dosis-erklaerung-karten strong {
    display: block; font-size: .97rem; color: var(--dk-ton-dunkel); margin-bottom: 2px;
}
/* display:block, damit die eigene Zeilenhoehe greift - als inline-Element
   behaelt der Text die Zeilenhoehe des groesseren Elternblocks. */
.dosis-erklaerung-karten span {
    display: block; font-size: .88rem; color: var(--muted); line-height: 1.5;
}

/* ---- Hinweise und Warnungen, Auslegung, Nachweis ---- */
.dosis-warnungen, .dosis-auslegung {
    margin-top: 16px;
    background: var(--dk-flaeche);
    border: 1px solid var(--dk-linie);
    border-radius: var(--dk-rund);
    box-shadow: var(--dk-schatten);
    padding: 16px 22px;
}
.dosis-warnungen summary, .dosis-auslegung summary {
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer; font-weight: 600; color: var(--dk-ton-dunkel);
    list-style: none;
}
.dosis-warnungen summary::-webkit-details-marker,
.dosis-auslegung summary::-webkit-details-marker { display: none; }
.dosis-warnungen summary::after, .dosis-auslegung summary::after {
    content: "▾"; margin-left: auto; font-size: .9rem; color: var(--muted);
    transition: transform .15s ease;
}
.dosis-warnungen[open] summary::after, .dosis-auslegung[open] summary::after { transform: rotate(180deg); }
.dosis-warnungen summary:focus-visible, .dosis-auslegung summary:focus-visible {
    outline: 3px solid var(--dk-ton-hell); outline-offset: 3px; border-radius: 8px;
}
.dosis-warnungen summary > svg { margin-top: 2px; color: var(--dk-warn-dunkel); }
.dosis-warnungen summary strong { display: block; font-size: 1.05rem; }
.dosis-warnungen-anzahl { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); }
.dosis-warnungen ul { margin: 14px 0 0; padding-left: 1.2em; font-size: .93rem; }
.dosis-warnungen li { margin-bottom: 8px; }
.dosis-warnungen li:last-child { margin-bottom: 0; }

.dosis-auslegung { font-size: .92rem; }
.dosis-auslegung dl { margin: 12px 0 0; }
.dosis-auslegung dt { font-weight: 600; margin-top: 10px; }
.dosis-auslegung dd { margin: 2px 0 0; }
.dosis-auslegung .muted { display: block; color: var(--muted); }

.dosis-quelle { margin: 16px 0 0; font-size: .86rem; color: var(--muted); }
.dosis-quelle em { color: var(--ink); font-style: normal; }

/* ---- Übergang in die vollständige Gebrauchsinformation ---- */
.dosis-weiter {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 16px 0 0; padding: 14px 18px;
    background: var(--dk-ton-hell);
    border-radius: var(--dk-rund-klein);
    font-size: .93rem; line-height: 1.55;
    scroll-margin-top: var(--sprungabstand);
}
.dosis-weiter > svg { margin-top: 2px; color: var(--dk-ton-dunkel); }
.dosis-weiter strong { display: block; color: var(--dk-ton-dunkel); }

/* ---- Breite. Gemessen wird der Baustein, nicht das Fenster ---- */
@container dosis (min-width: 470px) {
    .dosis-felder { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
    .dosis-kacheln { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .dosis-kachel-haupt, .dosis-kachel-zeit { grid-column: 1 / -1; }
}
/* Drei nebeneinander erst, wenn jede Karte breit genug fuer einen Satz ist.
   Darunter steht jede als eigene Zeile - lesbarer als drei Spalten, in denen
   nach jedem dritten Wort umgebrochen wird. */
@container dosis (min-width: 900px) {
    .dosis-erklaerung-karten { grid-template-columns: repeat(3, 1fr); }
}
/*
 * Nebeneinander erst, wenn beide Karten wirklich Platz haben.
 *
 * Auf einer Beipackzettelseite bleibt neben dem Beitrag die Kontaktspalte
 * stehen; dem Rechner bleiben dort rund 730 px. Zwei Spalten daraus zu machen
 * hiesse: umbrechende Beschriftungen, gequetschte Datumsfelder und ein
 * Ergebnis, das in einer schmalen Saeule steht. Bis dahin steht die Auskunft
 * deshalb unter dem Formular und nimmt die volle Breite ein - dieselbe
 * Reihenfolge, mehr Luft. Ab 860 px teilt sich der Baustein wie im Entwurf.
 */
@container dosis (min-width: 860px) {
    .dosis-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* Nebeneinander wird jede Spalte schmaler - dann wieder eine Kachel je Zeile. */
    .dosis-kacheln { grid-template-columns: 1fr; }
}
@container dosis (min-width: 1020px) {
    .dosis-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; }
    .dosis-kacheln { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (max-width: 620px) {
    .dosis-rechner { padding: 18px 16px; border-radius: 16px; }
    .dosis-karte, .dosis-erklaerung { padding: 16px 16px 18px; border-radius: 16px; }
    .dosis-warnungen, .dosis-auslegung { padding: 14px 16px; border-radius: 16px; }
    .dosis-titel { font-size: 1.3rem; }
    .dosis-aktion .btn { width: 100%; text-align: center; }
}

/* Rueckmeldung unter einem Beitrag: "War dieser Beitrag hilfreich?" */
.feedback-box p { margin: 0 0 .5rem; }
.feedback-box p:last-child { margin-bottom: 0; }
.feedback-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Tagesverlauf der Seitenaufrufe im Adminbereich */
.verlauf { display: flex; align-items: flex-end; gap: 2px; height: 140px;
           padding: .5rem; background: var(--bg-soft); border-radius: 6px; overflow-x: auto; }
.verlauf-tag { flex: 1 1 4px; min-width: 4px; height: 100%; display: flex; align-items: flex-end; }
.verlauf-balken { display: block; width: 100%; background: var(--lila); border-radius: 2px 2px 0 0; }
.verlauf-achse { display: flex; justify-content: space-between; gap: 1rem;
                 font-size: .85rem; color: #666; margin: .25rem 0 1.5rem; }
/* Hinweis beim Überfahren des Verlaufs (verlauf-tipp.js) */
.verlauf-rahmen { position: relative; }
.verlauf-tag { cursor: crosshair; }
.verlauf-tag.ist-aktiv .verlauf-balken { background: var(--lila-dunkel); }
.verlauf-tag.ist-aktiv { background: rgba(142, 75, 175, .08); border-radius: 2px; }
.verlauf-hinweis { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 1px;
                   padding: 7px 11px; background: #fff; border: 1px solid var(--lila-linie); border-radius: 8px; box-shadow: var(--shadow);
                   font-size: .85rem; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums;
                   pointer-events: none; opacity: 0; transition: opacity .1s ease; }
.verlauf-hinweis.ist-sichtbar { opacity: 1; }
.verlauf-hinweis strong { color: var(--lila-dunkel); }
.verlauf-hinweis span { color: var(--ink); }
.stats-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 900px) { .stats-spalten { grid-template-columns: 1fr; } }
.child-head-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

/* Freigabeliste der Dosierungsrechner */
.dosis-texte { margin: .5rem 0 0; }
.dosis-texte dt { font-weight: 600; margin-top: .6rem; }
.dosis-texte dd { margin: .1rem 0 0; }

/* Leiste über der Liste: Reihenfolge links, Sammelschalter rechts. */
.dosis-leiste {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    align-items: flex-end; justify-content: space-between;
    margin: 22px 0 14px;
}
.dosis-leiste-titel {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.dosis-sortierung .chip-row { margin-bottom: 6px; }
.dosis-pfeil { margin-left: 4px; font-weight: 700; }
.dosis-richtungstext { margin: 0; }
/* Der Sammelschalter nuetzt nur mit JavaScript und traegt deshalb hidden.
   Ohne diese Zeile bliebe er sichtbar: .btn setzt display:inline-block, und
   die Browserregel fuer [hidden] verliert gegen jede Regel im Stylesheet. */
.dosis-leiste .btn[hidden] { display: none; }

/*
 * Ein Eintrag der Liste. Die Kopfzeile ist die ganze Klappfläche, deshalb
 * bekommt die Karte selbst keinen Innenabstand mehr - sonst läge ein toter
 * Rand um die anklickbare Fläche.
 */
/* Nach einer Entscheidung springt die Seite auf den Eintrag zurueck; ohne
   diesen Abstand laege er unter dem klebenden Seitenkopf. */
.dosis-eintrag { padding: 0; overflow: hidden; scroll-margin-top: var(--sprungabstand); }
.dosis-eintrag > summary {
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
    padding: 14px 18px 14px 42px;
    cursor: pointer; position: relative;
    list-style: none;
    border-radius: var(--radius);
}
.dosis-eintrag > summary::-webkit-details-marker { display: none; }
/* Eigenes Klappzeichen, damit es links steht und sich dreht. */
.dosis-eintrag > summary::before {
    content: "▸";
    position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted); font-size: .95rem;
    transition: transform .15s ease;
}
.dosis-eintrag[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.dosis-eintrag > summary:hover { background: var(--bg-soft); }
.dosis-eintrag > summary:focus-visible {
    outline: 2px solid var(--blue); outline-offset: -2px;
}
.dosis-eintrag[open] > summary {
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}

.dosis-eintrag-text { flex: 1 1 320px; min-width: 0; }
.dosis-eintrag-name {
    display: block; font-weight: 700; font-size: 1.05rem; color: var(--ink);
    line-height: 1.35;
}
.dosis-eintrag-name .badge { margin-left: 8px; vertical-align: middle; }
.dosis-eintrag-meta {
    display: block; font-size: .86rem; color: var(--muted); margin-top: 2px;
}

/* Rechts das Entscheidungsdatum - es begründet die Sortierung nach Datum und
   muss deshalb auch im zugeklappten Zustand sichtbar sein. */
.dosis-eintrag-datum {
    flex: 0 0 auto; text-align: right; font-size: .88rem;
    font-variant-numeric: tabular-nums;
}
.dosis-eintrag-datum-titel {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
}
.dosis-eintrag-datum .hint { display: block; }

.dosis-eintrag-koerper { padding: 16px 18px 20px; }
.dosis-eintrag-koerper > :first-child { margin-top: 0; }
.dosis-eintrag-koerper h3 { margin-top: 1.4em; }

@media (max-width: 700px) {
    .dosis-eintrag > summary { padding: 12px 14px 12px 36px; }
    /* Untereinander ist die Zeile hoch; das Klappzeichen gehoert dann neben
       den Namen und nicht in die Mitte des Blocks. */
    .dosis-eintrag > summary::before { left: 14px; top: 16px; transform: none; }
    .dosis-eintrag[open] > summary::before { transform: rotate(90deg); }
    .dosis-eintrag-datum { flex-basis: 100%; text-align: left; }
    .dosis-eintrag-datum .hint { display: inline; }
    .dosis-eintrag-koerper { padding: 14px; }
}

/* Rueckrufzentrum: Liste der Meldungen */
.rueckruf-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.rueckruf { border: 1px solid var(--line); border-left: 4px solid var(--lila); border-radius: 8px;
            padding: 1rem 1.1rem; background: #fff; }
.rueckruf[hidden] { display: none; }
.rueckruf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.rueckruf-titel { font-size: 1.1rem; margin: 0 0 .2rem; }
.rueckruf-marke { margin: 0 0 .5rem; color: #444; }
.rueckruf-rat { margin: .5rem 0; padding: .55rem .75rem; background: var(--bg-soft); border-radius: 6px; }
.rueckruf-grund { margin: .5rem 0; color: #333; }
.rueckruf-details { margin: .5rem 0; }
.rueckruf-details summary { cursor: pointer; color: var(--lila); }
.rueckruf-quelle { margin: .6rem 0 0; }
.rueckruf-rechte { margin-top: 2rem; padding-top: .8rem; border-top: 1px solid #eee; font-size: .8rem; }

/* =========================================================================
   Augenfarben-Rechner
   Ein Stammbaum zum Anklicken, eine ausführliche Auswertung und eine
   druckfertige Fassung mit Briefkopf. Alle Augen kommen aus einer einzigen
   Vorratsgrafik (templates/partials/iris-sprite.php) und werden hier nur
   noch skaliert.
   ========================================================================= */

:root {
    --ec-blau:  #4a86bd;
    --ec-gruen: #6f9247;
    --ec-braun: #7a4a22;
}

/* ---------- Das Auge in seinen Größen ---------- */
.iris { display: block; border-radius: 50%; flex: none; }
.iris-xs { width: 20px;  height: 20px; }
.iris-sm { width: 26px;  height: 26px; }
.iris-md { width: 54px;  height: 54px; }
.iris-lg { width: 104px; height: 104px; }
.iris-xl { width: 148px; height: 148px; }
.iris-md, .iris-lg, .iris-xl { box-shadow: 0 2px 10px rgba(46, 42, 51, .18); }

/* ---------- Stammbaum ---------- */
.ec-form {
    background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 24px 20px;
    margin: 26px 0 34px;
    box-shadow: var(--shadow);
}
.ec-tree { display: grid; gap: 4px; }
.ec-tree-level { display: grid; gap: 16px; }

.ec-tree-grandparents { grid-template-columns: 1fr 1fr; gap: 18px; }
.ec-tree-grandparents[data-collapsed] { display: none; }
.ec-couple {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 12px 14px;
}
.ec-couple-title {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px; text-align: center;
}
.ec-couple-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ec-tree-parents { grid-template-columns: 1fr 1fr; margin-top: 10px; position: relative; }
.ec-tree-grandparents:not([data-collapsed]) + .ec-toggle + .ec-tree-parents::before,
.ec-tree-grandparents:not([data-collapsed]) + .ec-tree-parents::before {
    content: ""; position: absolute; top: -18px; left: 25%; right: 25%; height: 1px;
    background: var(--line);
}

.ec-tree-child { justify-items: center; margin-top: 8px; position: relative; padding-top: 26px; }
.ec-tree-child::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 22px;
    background: linear-gradient(180deg, var(--line), var(--blue)); transform: translateX(-50%);
}

/* ---------- Eine Person ---------- */
.ec-person {
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
    margin: 0; padding: 12px 12px 14px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ec-person:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.ec-person legend {
    font-weight: 700; font-size: .95rem; padding: 0 6px; color: var(--ink);
}
.ec-tree-parents .ec-person { padding: 18px 16px 20px; gap: 14px; }
.ec-tree-parents .ec-person legend { font-size: 1.05rem; }

.ec-choices { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ec-choice { cursor: pointer; }
.ec-choice input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.ec-chip {
    display: inline-block; padding: .34em .8em; border-radius: 999px;
    border: 2px solid var(--line); background: #fff;
    font-size: .82rem; font-weight: 600; color: var(--muted);
    transition: all .15s ease; white-space: nowrap;
}
.ec-chip::before {
    content: ""; display: inline-block; width: .62em; height: .62em; border-radius: 50%;
    margin-right: .45em; vertical-align: -.02em; background: currentColor; opacity: .75;
}
.ec-chip-blau  { color: var(--ec-blau); }
.ec-chip-gruen { color: var(--ec-gruen); }
.ec-chip-braun { color: var(--ec-braun); }
.ec-chip-none::before { display: none; }
.ec-choice:hover .ec-chip { border-color: currentColor; }
/* Die Hintergrundfarbe steht je Farbe ausgeschrieben da: "background: currentColor"
   zusammen mit "color: #fff" in derselben Regel ergaebe Weiss auf Weiss. */
.ec-choice input:checked + .ec-chip { color: #fff; }
.ec-choice input:checked + .ec-chip-blau  { background: var(--ec-blau);  border-color: var(--ec-blau); }
.ec-choice input:checked + .ec-chip-gruen { background: var(--ec-gruen); border-color: var(--ec-gruen); }
.ec-choice input:checked + .ec-chip-braun { background: var(--ec-braun); border-color: var(--ec-braun); }
.ec-choice input:checked + .ec-chip-none  { background: var(--muted);    border-color: var(--muted); }
.ec-choice input:checked + .ec-chip::before { background: #fff; opacity: .9; }
.ec-choice input:focus-visible + .ec-chip { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Der Umschalter für die Großeltern und die Karte mit den Zusatzangaben sind
   die beiden Stellen, an denen aus einer groben eine genaue Vorhersage wird.
   Als Textzeilen gingen sie unter, deshalb hier zwei angebotene Flächen im
   selben Zuschnitt: gestrichelter Rahmen als Einladung, durchgezogen sobald
   geöffnet, mit Zeichen rechts als Zustandsanzeige. */
.ec-toggle, .ec-extra > summary {
    display: flex; align-items: center; gap: 16px; width: 100%;
    padding: 15px 18px; text-align: left;
    background: linear-gradient(135deg, #fff 0%, var(--blue-light) 100%);
    border: 2px dashed var(--lila-linie); border-radius: 16px;
    color: var(--ink); font: inherit; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.ec-toggle { margin: 14px 0 2px; }
.ec-toggle:hover, .ec-extra > summary:hover {
    border-color: var(--blue); box-shadow: 0 4px 16px rgba(111, 58, 140, .12);
}
.ec-toggle:active, .ec-extra > summary:active { transform: translateY(1px); }
.ec-toggle:focus-visible, .ec-extra > summary:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px;
}

/* Vier leere Augen als Vorschau dessen, was sich hinter der Fläche auftut. */
.ec-toggle-augen { display: flex; flex: none; }
.ec-toggle-augen .iris { border: 2px solid #fff; }
.ec-toggle-augen .iris + .iris { margin-left: -9px; }

.ec-toggle-text, .ec-extra-text { flex: 1; min-width: 0; }
.ec-toggle-text strong, .ec-extra-text strong {
    display: block; font-size: 1.02rem; color: var(--blue-dark);
}
.ec-toggle-text > span, .ec-extra-text > span {
    display: block; font-size: .86rem; color: var(--muted); margin-top: 3px; line-height: 1.45;
}

.ec-toggle-zeichen, .ec-extra-zeichen {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    font-size: 1.35rem; line-height: 1; color: var(--blue); font-weight: 600;
}
.ec-toggle.is-offen, .ec-extra[open] > summary { border-style: solid; border-color: var(--lila-linie); }
.ec-extra[open] .ec-extra-zeichen { transform: rotate(45deg); }

.ec-child-node {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--blue-light); border: 2px solid var(--line); border-radius: 18px;
    padding: 18px 28px 20px; min-width: 240px;
}
.ec-child-title {
    font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--blue-dark);
}
.ec-child-value { font-weight: 700; color: var(--blue-dark); text-align: center; }
#ec-child-iris { transition: opacity .2s ease; }

/* ---------- Zusatzangaben ---------- */
.ec-extra { margin-top: 20px; }
/* Das voreingestellte Dreieck weicht dem eigenen Zeichen rechts. */
.ec-extra > summary { list-style: none; }
.ec-extra > summary::-webkit-details-marker { display: none; }
.ec-extra > summary::marker { content: ''; }
.ec-extra-body {
    display: grid; gap: 20px; margin: -6px 0 0; padding: 22px 20px 18px;
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px;
    background: #fff;
}
.ec-field label, .ec-field-label { display: block; font-weight: 600; margin-bottom: 6px; }
.ec-field select {
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
    font: inherit; background: #fff; max-width: 100%;
}
.ec-field-hint { color: var(--muted); font-size: .86rem; margin: 8px 0 0; }
.ec-siblings { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-siblings select { flex: 1 1 190px; }

.ec-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.ec-privacy { color: var(--muted); font-size: .84rem; margin: 12px 0 0; }

/* ---------- Ergebnis ---------- */
.ec-output { margin-top: 8px; }
.ec-result-head { margin-bottom: 18px; }
.ec-result-hero {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    background: linear-gradient(135deg, #fff, var(--blue-light));
    border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin-bottom: 22px;
}
.ec-hero-eye { flex: none; animation: ec-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes ec-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ec-hero-text { flex: 1 1 260px; }
.ec-hero-lead { font-size: 1.15rem; margin: 0 0 .2em; }
.ec-hero-value { font-size: 3rem; font-weight: 800; line-height: 1; margin: .1em 0; color: var(--blue-dark); }
.ec-hero-note { color: var(--muted); font-size: .9rem; margin: 0; }

.ec-bars { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; }
.ec-bar-row { display: grid; grid-template-columns: 190px 1fr 74px; align-items: center; gap: 14px; }
.ec-bar-label { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.ec-bar-track { background: var(--bg-soft); border-radius: 999px; height: 22px; overflow: hidden; }
.ec-bar-fill {
    display: block; height: 100%; border-radius: 999px;
    transform-origin: left center; animation: ec-grow .55s cubic-bezier(.2, .8, .3, 1);
}
@keyframes ec-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ec-fill-blau  { background: linear-gradient(90deg, #8ec3e8, var(--ec-blau)); }
.ec-fill-gruen { background: linear-gradient(90deg, #b6c98a, var(--ec-gruen)); }
.ec-fill-braun { background: linear-gradient(90deg, #c69a63, var(--ec-braun)); }
.ec-bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ec-bar-row.is-lead .ec-bar-value { color: var(--blue-dark); font-size: 1.08rem; }

/* ---------- Abschnitte der Auswertung ---------- */
.ec-block { margin: 38px 0; }
.ec-block h2 {
    font-size: 1.4rem; padding-bottom: .3em; border-bottom: 2px solid var(--blue-light);
}
.ec-block h3 { margin-top: 1.4em; }
.ec-caption { color: var(--muted); font-size: .86rem; }
.ec-note { background: var(--bg-soft); border-left: 3px solid var(--blue); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.ec-muted { color: var(--muted); }

/* ---------- Hundert Kinder ---------- */
.ec-hundred {
    display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px;
    max-width: 560px; margin: 18px 0 10px;
}
.ec-hundred .iris { width: 100%; height: auto; aspect-ratio: 1; }

/* ---------- Tabellen ---------- */
.ec-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .95rem; }
.ec-table th, .ec-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.ec-table thead th {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); border-bottom-width: 2px;
}
.ec-table tbody th { font-weight: 600; }
.ec-table tbody th .iris { display: inline-block; vertical-align: -7px; margin-right: 6px; }
.ec-table td { font-variant-numeric: tabular-nums; }
.ec-table .is-strong { font-weight: 700; }
/* Bewusst dieselbe Farbe fuer beide Richtungen: Eine Augenfarbe ist weder ein
   guter noch ein schlechter Befund. Die Richtung zeigt allein das Vorzeichen. */
.ec-table .is-up, .ec-table .is-down { color: var(--blue-dark); font-weight: 600; }
.ec-table-data .ec-cell-share { display: block; font-weight: 700; }
.ec-table-data .ec-cell-n { display: block; font-size: .78rem; color: var(--muted); }
.ec-table-data .ec-cell-total { font-weight: 600; color: var(--muted); }

/* ---------- Beitrag der Angaben ---------- */
.ec-contrib { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.ec-contrib li { display: grid; grid-template-columns: 230px 1fr 78px; align-items: center; gap: 14px; }
.ec-contrib-who { display: flex; align-items: center; gap: 9px; font-size: .93rem; }
.ec-contrib-multi {
    font-size: .74rem; background: var(--blue-light); color: var(--blue-dark);
    padding: .2em .6em; border-radius: 999px; font-weight: 600;
}
.ec-contrib-track { background: var(--bg-soft); border-radius: 999px; height: 14px; overflow: hidden; }
.ec-contrib-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--lila-mittel), var(--blue));
    transform-origin: left center; animation: ec-grow .55s cubic-bezier(.2, .8, .3, 1);
}
.ec-contrib-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9rem; }

.ec-callout {
    background: var(--bg-soft); border: 1px solid var(--line); border-left: 4px solid var(--accent);
    border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 20px 0;
}
.ec-callout h3 { margin-top: 0; font-size: 1.05rem; }
.ec-callout p:last-child { margin-bottom: 0; }
.ec-callout-kein_abstammungsnachweis { border-left-color: #b4453a; }
.ec-callout-kein_krankheitswert { border-left-color: var(--green); }

/* ---------- Anlagen der Eltern ---------- */
.ec-parents { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.ec-parent-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: #fff; }
.ec-parent-card h3 { display: flex; align-items: center; gap: 12px; margin-top: 0; font-size: 1.1rem; }
.ec-genotype { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.ec-genotype li { display: grid; grid-template-columns: 42px 1fr 62px; align-items: center; gap: 10px; }
.ec-gt-label { font-weight: 700; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ec-gt-track { background: var(--bg-soft); border-radius: 999px; height: 12px; overflow: hidden; }
.ec-gt-fill {
    display: block; height: 100%; border-radius: 999px; background: var(--blue);
    transform-origin: left center; animation: ec-grow .55s cubic-bezier(.2, .8, .3, 1);
}
.ec-gt-value { text-align: right; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.ec-parent-note { margin: 0; font-size: .92rem; }

/* ---------- Vorhersagegüte als Ringe ---------- */
.ec-accuracy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.ec-acc-card { text-align: center; }
.ec-acc-card h3 { margin: 12px 0 2px; font-size: 1rem; }
.ec-acc-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.ec-acc-ring {
    width: 108px; height: 108px; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--blue) calc(var(--anteil) * 1%), var(--bg-soft) 0);
    position: relative;
}
.ec-acc-ring::before {
    content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%;
}
.ec-acc-ring span { position: relative; font-weight: 800; font-size: 1.3rem; color: var(--blue-dark); }

/* ---------- Zeitleiste des Farbwechsels ---------- */
.ec-timeline {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin: 22px 0; position: relative;
}
.ec-timeline::before {
    content: ""; position: absolute; top: 7px; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, #cfe3f4, var(--ec-braun));
}
.ec-tl-step { text-align: center; position: relative; padding-top: 22px; font-size: .88rem; }
.ec-tl-dot {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 3px solid var(--blue);
}
.ec-tl-step strong { display: block; }
.ec-tl-step span { color: var(--muted); }

/* ---------- Quellen ---------- */
.ec-source-list { font-size: .88rem; color: var(--muted); padding-left: 1.3em; }
.ec-source-list li { margin-bottom: .7em; }
.ec-source-list strong { color: var(--ink); }
.ec-source-list a { word-break: break-all; }
.ec-source-type { font-style: italic; }

/* ---------- Druckfassung mit Briefkopf ---------- */
.ec-report-body { background: var(--bg-soft); }
.ec-report {
    max-width: 820px; margin: 0 auto; padding: 34px 42px 42px;
    background: #fff; box-shadow: 0 6px 30px rgba(46, 42, 51, .12);
}
.ec-report-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.ec-report-tip { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .86rem; }

.ec-letterhead {
    display: flex; align-items: center; gap: 22px;
    padding: 18px 0 16px; border-bottom: 3px solid var(--blue);
}
.ec-letterhead-logo { width: 84px; height: 84px; border-radius: 12px; object-fit: contain; }
.ec-letterhead-text p { margin: 0; line-height: 1.4; }
.ec-letterhead-domain {
    font-size: 1.5rem; font-weight: 800; color: var(--blue); letter-spacing: -.01em;
}
.ec-letterhead-name { font-weight: 700; }
.ec-letterhead-sub, .ec-letterhead-addr { color: var(--muted); font-size: .86rem; }

.ec-report-title { margin: 26px 0 10px; }
.ec-report-title h1 { margin-bottom: .15em; }
.ec-report-sub { color: var(--muted); margin: 0; }

.ec-input-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.ec-input-item {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.ec-input-item .iris { grid-row: span 2; }
.ec-input-item.is-empty { opacity: .55; }
.ec-input-role { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.ec-input-value { font-weight: 600; font-size: .9rem; }
.ec-input-meta { list-style: none; padding: 0; margin: 14px 0 0; font-size: .9rem; display: grid; gap: 4px; }

.ec-report-footer {
    margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--blue-light);
    color: var(--muted); font-size: .82rem;
}
.ec-report-footer p { margin: 0 0 4px; }
.ec-report-url { word-break: break-all; font-size: .74rem; }
.ec-report-legal { margin-top: 10px; font-style: italic; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 720px) {
    .ec-tree-grandparents { grid-template-columns: 1fr; }
    .ec-tree-parents { grid-template-columns: 1fr; }
    .ec-parents { grid-template-columns: 1fr; }
    .ec-accuracy { grid-template-columns: 1fr; }
    .ec-bar-row { grid-template-columns: 1fr; gap: 6px; }
    .ec-bar-value { text-align: left; }
    .ec-contrib li { grid-template-columns: 1fr; gap: 5px; }
    .ec-contrib-value { text-align: left; }
    .ec-hundred { grid-template-columns: repeat(10, 1fr); }
    .ec-timeline { grid-template-columns: 1fr 1fr; row-gap: 20px; }
    .ec-timeline::before { display: none; }
    .ec-input-grid { grid-template-columns: 1fr; }
    .ec-report { padding: 22px 18px 30px; }
    .ec-letterhead { flex-direction: column; text-align: center; gap: 12px; }
    .ec-hero-value { font-size: 2.4rem; }
}

/* ---------- Als PDF sichern ---------- */
@media print {
    @page { margin: 14mm 12mm; }
    .ec-report-body { background: #fff; }
    .ec-report { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .ec-report-toolbar { display: none !important; }
    /* Ohne diese Angabe drucken die Browser Farbverläufe und Balken weiß. */
    .ec-report, .ec-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ec-block, .ec-result, .ec-parent-card, .ec-callout, .ec-acc-card,
    .ec-table, .ec-hundred, .ec-letterhead { break-inside: avoid; }
    .ec-block h2 { break-after: avoid; }
    .ec-report-footer { break-before: avoid; }
    .ec-hero-eye, .ec-bar-fill, .ec-contrib-fill, .ec-gt-fill { animation: none; }
    .stat-term { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
    .stat-term .stat-tooltip { display: none; }
}

/* ---------- Druckfassung des Ernaehrungsplans ---------- */
.nutrition-report .nr-lead { font-size: 1.02rem; }
.nutrition-report .nr-kurz { margin-top: 6px; }
.nutrition-report .nr-spalten { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.nutrition-report .nr-spalten > div { flex: 1 1 280px; }
.nutrition-report .nr-spalten h2 { margin-top: 0; }
.nutrition-report .nr-tabelle { width: 100%; font-size: .9rem; }
.nutrition-report .nr-tabelle td { vertical-align: top; }
.nutrition-report .nr-name { width: 32%; }
.nutrition-report .nr-gruppe { font-size: .78rem; color: var(--muted); }
.nutrition-report .nr-ampel-intro { color: var(--muted); font-size: .9rem; }
/* Die Ampelfarbe traegt hier die Aussage - deshalb steht sie am Rand der
   Ueberschrift und nicht nur im Text, damit sie auch im Ausdruck sofort
   auffindbar ist. */
.nutrition-report .nr-ampel-titel {
    margin: 22px 0 8px; padding-left: 10px; font-size: 1.02rem;
    border-left: 5px solid var(--line);
}
.nutrition-report .nr-rot   { border-left-color: #c0392b; }
.nutrition-report .nr-gelb  { border-left-color: var(--accent); }
.nutrition-report .nr-gruen { border-left-color: var(--green-dark); }
.nutrition-report .nr-erkenntnis { margin: 0 0 16px; }
.nutrition-report .nr-erkenntnis h3 { margin: 0 0 4px; font-size: 1rem; }
.nutrition-report .nr-erkenntnis p { margin: 0 0 5px; font-size: .9rem; }
.nutrition-report .nr-quelle { font-size: .76rem; color: var(--muted); word-break: break-word; }

@media print {
    .nutrition-report .nr-tabelle tr { break-inside: avoid; }
    .nutrition-report .nr-ampel-titel { break-after: avoid; }
    .nutrition-report .nr-erkenntnis { break-inside: avoid; }
    .nutrition-report .nr-quelle a { text-decoration: none; color: inherit; }
}

/* =========================================================================
   Haarfarben-, Blutgruppen- und Endgrößen-Rechner
   Die drei Werkzeuge teilen sich das Gerüst des Augenfarben-Rechners: Die
   Klassen mit dem Vorsatz ec- sind kein Kürzel für "eye color" mehr, sondern
   für "Eltern-Kind-Rechner" – Formular, Stammbaum, Ergebnisbalken, Abschnitte,
   Tabellen und Druckfassung sehen überall gleich aus. Hier steht nur, was je
   Werkzeug eigen ist.
   ========================================================================= */

:root {
    --hc-blond:       #c99b3d;
    --hc-hellbraun:   #a3703f;
    --hc-dunkelbraun: #5a3a22;
    --hc-schwarz:     #241f25;
    --hc-rot:         #b8501d;

    --bg-a:  #b5241a;
    --bg-b:  #c1621a;
    --bg-ab: var(--lila-dunkel);
    --bg-0:  #6d1414;
}

/* ---------- Haarsträhne und Blutstropfen in ihren Größen ---------- */
/* Dieselben Stufen wie bei der Iris, damit ein Stammbaum in allen drei
   Rechnern exakt gleich hoch ist. */
.haar, .blut { display: block; flex: none; }
.haar { border-radius: 50%; }
.haar-xs, .blut-xs { width: 20px;  height: 20px; }
.haar-sm, .blut-sm { width: 26px;  height: 26px; }
.haar-md, .blut-md { width: 54px;  height: 54px; }
.haar-lg, .blut-lg { width: 104px; height: 104px; }
.haar-xl, .blut-xl { width: 148px; height: 148px; }
.haar-md, .haar-lg, .haar-xl { box-shadow: 0 2px 10px rgba(46, 42, 51, .18); }
.blut-md, .blut-lg, .blut-xl { filter: drop-shadow(0 2px 6px rgba(46, 42, 51, .22)); }

/* ---------- Haarfarben: Auswahlflächen und Balken ---------- */
.hc-chip-blond       { color: var(--hc-blond); }
.hc-chip-hellbraun   { color: var(--hc-hellbraun); }
.hc-chip-dunkelbraun { color: var(--hc-dunkelbraun); }
.hc-chip-schwarz     { color: var(--hc-schwarz); }
.hc-chip-rot         { color: var(--hc-rot); }
.ec-choice input:checked + .hc-chip-blond       { background: var(--hc-blond);       border-color: var(--hc-blond); }
.ec-choice input:checked + .hc-chip-hellbraun   { background: var(--hc-hellbraun);   border-color: var(--hc-hellbraun); }
.ec-choice input:checked + .hc-chip-dunkelbraun { background: var(--hc-dunkelbraun); border-color: var(--hc-dunkelbraun); }
.ec-choice input:checked + .hc-chip-schwarz     { background: var(--hc-schwarz);     border-color: var(--hc-schwarz); }
.ec-choice input:checked + .hc-chip-rot         { background: var(--hc-rot);         border-color: var(--hc-rot); }

.hc-fill-blond       { background: linear-gradient(90deg, #f0dca8, var(--hc-blond)); }
.hc-fill-hellbraun   { background: linear-gradient(90deg, #d3ab7f, var(--hc-hellbraun)); }
.hc-fill-dunkelbraun { background: linear-gradient(90deg, #9a7a5c, var(--hc-dunkelbraun)); }
.hc-fill-schwarz     { background: linear-gradient(90deg, #6d6474, var(--hc-schwarz)); }
.hc-fill-rot         { background: linear-gradient(90deg, #efa268, var(--hc-rot)); }

/* Fünf Farbnamen brauchen mehr Platz in der Beschriftungsspalte als drei. */
.hc-page .ec-bar-row { grid-template-columns: 210px 1fr 74px; }
.hc-accuracy { grid-template-columns: repeat(4, 1fr); }
.hc-sub {
    margin: 18px 0 6px; font-size: .8rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.hc-gt-label { font-family: inherit; font-size: .82rem; font-weight: 600; }
.ec-parent-card .ec-genotype li { grid-template-columns: 72px 1fr 62px; }
.hc-liste { margin: 12px 0; padding-left: 1.2em; }
.hc-liste li { margin-bottom: .4em; }

/* Die Verteilung der Helligkeitsanlage als kleines Säulenbild: links hell,
   rechts dunkel. Ein ausgewachsenes Diagramm wäre zu schwer für eine
   Nebenaussage, ganz weglassen ließe die Aussage unbelegt. */
.hc-dosis {
    display: flex; align-items: flex-end; gap: 2px; height: 46px;
    padding: 4px 6px; margin: 6px 0 8px;
    background: linear-gradient(90deg, #fdf6e6, #ded0c0 45%, #4a3a30);
    border-radius: 8px;
}
.hc-dosis-bar {
    flex: 1; min-height: 2px; border-radius: 2px 2px 0 0;
    background: rgba(111, 58, 140, .78);
}
.hc-timeline::before { background: linear-gradient(90deg, #f0dca8, var(--hc-dunkelbraun)); }

/* ---------- Blutgruppen ---------- */
.bg-person .ec-choices + .ec-choices { margin-top: -2px; }
.bg-choices .ec-chip { font-size: .8rem; }
.bg-chip-A  { color: var(--bg-a); }
.bg-chip-B  { color: var(--bg-b); }
.bg-chip-AB { color: var(--bg-ab); }
.bg-chip-0  { color: var(--bg-0); }
.ec-choice input:checked + .bg-chip-A  { background: var(--bg-a);  border-color: var(--bg-a); }
.ec-choice input:checked + .bg-chip-B  { background: var(--bg-b);  border-color: var(--bg-b); }
.ec-choice input:checked + .bg-chip-AB { background: var(--bg-ab); border-color: var(--bg-ab); }
.ec-choice input:checked + .bg-chip-0  { background: var(--bg-0);  border-color: var(--bg-0); }
.bg-chip-none, .bg-rh-none { color: var(--muted); }
.bg-chip-none::before, .bg-rh-none::before { display: none; }
.ec-choice input:checked + .bg-chip-none,
.ec-choice input:checked + .bg-rh-none { background: var(--muted); border-color: var(--muted); }
.bg-rh-plus  { color: var(--blue-dark); }
.bg-rh-minus { color: #57606a; }
.ec-choice input:checked + .bg-rh-plus  { background: var(--blue-dark); border-color: var(--blue-dark); }
.ec-choice input:checked + .bg-rh-minus { background: #57606a; border-color: #57606a; }

.bg-fill-A  { background: linear-gradient(90deg, #e8695c, var(--bg-a)); }
.bg-fill-B  { background: linear-gradient(90deg, #ef9a4e, var(--bg-b)); }
.bg-fill-AB { background: linear-gradient(90deg, var(--lila-mittel), var(--bg-ab)); }
.bg-fill-0  { background: linear-gradient(90deg, #a83c3c, var(--bg-0)); }
.bg-fill-rhplus  { background: linear-gradient(90deg, var(--lila-mittel), var(--blue)); }
.bg-fill-rhminus { background: linear-gradient(90deg, #9aa2ab, #57606a); }

.bg-sub-head {
    margin: 22px 0 10px; font-size: .82rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); border: 0; padding: 0;
}
.bg-rh-badge {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; font-weight: 800; color: #fff; flex: none;
}
.bg-rh-badge-plus  { background: var(--blue); }
.bg-rh-badge-minus { background: #57606a; }

.ec-bar-row.is-out { opacity: .5; }
.ec-bar-row.is-out .ec-bar-value { font-size: .82rem; font-weight: 600; color: var(--muted); }

.bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.bg-cell {
    border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px;
    text-align: center; background: #fff;
}
.bg-cell.is-out { background: var(--bg-soft); opacity: .55; }
.bg-cell-name { display: block; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.bg-cell-rh { font-size: .9em; vertical-align: super; color: var(--blue); }
.bg-cell-value { display: block; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }

.bg-out-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0; }
.bg-out-list li {
    border: 1px solid var(--line); border-radius: 999px; padding: .3em .9em;
    background: var(--bg-soft); color: var(--muted); text-decoration: line-through;
}
.bg-parent-tag {
    font-size: .74rem; font-weight: 600; background: var(--blue-light);
    color: var(--blue-dark); padding: .2em .6em; border-radius: 999px;
}
.bg-callout-wichtig { border-left-color: var(--accent); background: #fdf6e8; }
.bg-siblings { display: grid; gap: 10px; }
.bg-sibling { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px; align-items: center; }
.bg-sibling-title { font-size: .86rem; font-weight: 600; color: var(--muted); }
.bg-sibling select { min-width: 0; }

/* ---------- Endgrößen-Rechner ---------- */
.ah-block {
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
    padding: 14px 18px 18px; margin: 0 0 16px;
}
.ah-block legend {
    font-weight: 700; padding: 0 8px; color: var(--blue-dark); font-size: 1.02rem;
}
.ah-grandparents[data-collapsed] { display: none; }
.ah-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ah-field { display: flex; flex-direction: column; }
.ah-field label, .ah-label { font-weight: 600; margin-bottom: 6px; font-size: .94rem; }
.ah-input-wrap { position: relative; display: block; }
.ah-input-wrap input {
    width: 100%; padding: 10px 42px 10px 12px; border: 1px solid var(--line);
    border-radius: 8px; font: inherit; font-variant-numeric: tabular-nums;
}
.ah-input-wrap input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.ah-unit {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: .88rem; pointer-events: none;
}
.ah-hint { color: var(--muted); font-size: .82rem; margin-top: 6px; line-height: 1.4; }
.ah-alter { display: flex; gap: 8px; }
.ah-alter select {
    flex: 1; padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px;
    font: inherit; background: #fff; min-width: 0;
}
.ah-chip-m { color: #3a6ea5; }
.ah-chip-f { color: #b8437f; }
.ec-choice input:checked + .ah-chip-m { background: #3a6ea5; border-color: #3a6ea5; }
.ec-choice input:checked + .ah-chip-f { background: #b8437f; border-color: #b8437f; }
.ah-toggle-icon { display: flex; gap: 4px; }
.ah-person {
    width: 14px; height: 26px; border-radius: 7px 7px 3px 3px;
    background: #fff; border: 2px solid var(--lila-linie);
}
.ah-result-node { margin-top: 6px; }
.ah-child-value { font-size: 1.02rem; }

.ah-hero {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px;
    background: linear-gradient(135deg, #fff, var(--blue-light));
    border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; margin-bottom: 20px;
}
.ah-hero-label {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted);
}
.ah-hero-value {
    display: block; font-size: 2.9rem; font-weight: 800; line-height: 1.1;
    color: var(--blue-dark); font-variant-numeric: tabular-nums;
}
.ah-hero-value-sm { font-size: 1.9rem; }
.ah-hero-sub { display: block; color: var(--muted); font-size: .9rem; margin-top: 4px; }

.ah-chart { margin: 22px 0; }
.ah-chart svg { width: 100%; height: auto; }
.ah-chart figcaption { color: var(--muted); font-size: .86rem; margin-top: 6px; }
.ah-curve-fill { fill: var(--blue); opacity: .18; }
.ah-curve-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.ah-axis { stroke: var(--line); stroke-width: 1.5; }
.ah-tick { stroke: var(--line); stroke-width: 1; }
.ah-tick-label { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.ah-mean { stroke: var(--blue-dark); stroke-width: 2; stroke-dasharray: 5 4; }
.ah-mean-label { fill: var(--blue-dark); font-size: 13px; font-weight: 700; font-family: var(--font); }
.ah-tanner path { fill: var(--accent); }
.ah-tanner text { fill: var(--muted); font-size: 10px; font-family: var(--font); }

.ah-ranges tbody tr.is-strong td, .ah-ranges tbody tr.is-strong th { font-weight: 700; }
.ah-contrib td, .ah-contrib th { vertical-align: middle; }
.ah-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.ah-compare-card {
    border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fff;
}
.ah-compare-card.is-lead { border-color: var(--blue); background: var(--blue-light); }
.ah-compare-card h3 { margin: 0 0 8px; font-size: .95rem; }
.ah-compare-value {
    margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--blue-dark);
    font-variant-numeric: tabular-nums;
}
.ah-compare-sd { margin: 2px 0 0; color: var(--muted); font-size: .86rem; }
.ah-input-grid { grid-template-columns: repeat(3, 1fr); }
.ah-input-grid .ec-input-item { grid-template-columns: 1fr; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 720px) {
    .hc-page .ec-bar-row { grid-template-columns: 1fr; }
    .hc-accuracy { grid-template-columns: 1fr 1fr; }
    .bg-grid { grid-template-columns: 1fr 1fr; }
    .bg-sibling { grid-template-columns: 1fr; }
    .ah-hero { grid-template-columns: 1fr; }
    .ah-hero-value { font-size: 2.3rem; }
    .ah-input-grid { grid-template-columns: 1fr; }
}

/* ---------- Als PDF sichern ---------- */
@media print {
    .hc-dosis, .bg-grid, .bg-cell, .ah-hero, .ah-chart, .ah-compare-card { break-inside: avoid; }
    .ah-chart svg { max-height: 220px; }
}

/* Der Umschalter zeigt vier leere Symbole als Vorschau – bei Iris, Haarsträhne
   und Blutstropfen gleichermaßen leicht überlappend. */
.ec-toggle-augen .haar, .ec-toggle-augen .blut { border: 2px solid #fff; border-radius: 50%; }
.ec-toggle-augen .haar + .haar, .ec-toggle-augen .blut + .blut { margin-left: -9px; }

/* Die Auswahlfelder für das Alter tragen rechts den Aufklapppfeil; ohne
   zusätzlichen Innenabstand schneidet er die Beschriftung an. */
.ah-alter select { padding-right: 26px; }

/* ---------- Vererbungsrechner: die Auswahl, was gerechnet wird ---------- */
/* Die erste Frage des Rechners steht als Erstes im Formular. Vier Flächen,
   nicht vier Reiter: Reiter sehen nach Einstellungen aus, Flächen nach einer
   Frage, die beantwortet werden will. */
.vr-auswahl {
    border: 0; margin: 0 0 22px; padding: 0;
}
.vr-auswahl legend {
    padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--blue-dark);
    font-size: 1.05rem;
}
.vr-auswahl-liste {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.vr-option { cursor: pointer; display: block; }
.vr-option input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.vr-option-flaeche {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; border: 2px solid var(--line); border-radius: 14px;
    background: #fff; text-align: center;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.vr-option:hover .vr-option-flaeche { border-color: var(--blue); }
.vr-option input:checked + .vr-option-flaeche {
    border-color: var(--blue); background: var(--blue-light);
    box-shadow: 0 4px 14px rgba(111, 58, 140, .12);
}
.vr-option input:focus-visible + .vr-option-flaeche {
    outline: 2px solid var(--blue); outline-offset: 2px;
}
.vr-option-icon { font-size: 1.7rem; line-height: 1; }
.vr-option-text { font-weight: 600; font-size: .92rem; color: var(--ink); }
.vr-option input:checked + .vr-option-flaeche .vr-option-text { color: var(--blue-dark); }
.vr-noscript { margin: 10px 0 0; font-size: .86rem; color: var(--muted); }

/* Am Fuß der Seite noch einmal die übrigen drei Rechner: Wer wegen der
   Augenfarbe gekommen ist, soll erfahren, dass es die Haarfarbe auch gibt. */
.vr-weiter { margin: 38px 0; }
.vr-weiter h2 {
    font-size: 1.4rem; padding-bottom: .3em; border-bottom: 2px solid var(--blue-light);
}
.vr-weiter ul {
    list-style: none; padding: 0; margin: 18px 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.vr-weiter a {
    display: flex; align-items: center; gap: 12px; height: 100%;
    border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
    background: #fff; text-decoration: none; color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vr-weiter a:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.vr-weiter-icon { font-size: 1.6rem; line-height: 1; flex: none; }
.vr-weiter strong { display: block; color: var(--blue-dark); }
.vr-weiter strong + span { display: block; color: var(--muted); font-size: .86rem; line-height: 1.4; }

@media (max-width: 720px) {
    .vr-auswahl-liste { grid-template-columns: 1fr 1fr; }
    .vr-option-flaeche { flex-direction: row; justify-content: center; gap: 8px; padding: 12px 10px; }
    .vr-option-icon { font-size: 1.3rem; }
}

@media print {
    .vr-auswahl, .vr-weiter { display: none; }
}

/* Das Monatsfeld trägt die längere Beschriftung und bekommt deshalb etwas mehr
   Platz als das Jahresfeld. */
.ah-alter { display: grid; grid-template-columns: 1fr 1.15fr; }
.ah-alter select { width: 100%; }

/* ---------- Ratgeber aus mehreren Seiten (Übersicht + Kapitel) ----------
   Ein Ratgeber mit mehreren hundert Abschnitten liest sich als eine einzige
   Seite nicht mehr: Das Inhaltsverzeichnis wird unübersichtlich, die Seite
   lädt lange, und wer ein Kapitel weiterschickt, schickt immer alles mit.
   Deshalb trägt die Übersichtsseite Aufmacher, Kurzantworten, Werkzeuge und
   die Kapitelübersicht, und jedes Kapitel steht auf einer eigenen Adresse.
   Die Abschnittsnummern laufen über alle Kapitel durch, damit ein Verweis wie
   „Abschnitt 128“ eindeutig bleibt.

   Die Klassen heißen rg-*, weil guide-* im Stylesheet schon für die
   Schritt-für-Schritt-Leitfäden vergeben ist.

   ## Zur Farbwelt

   Es gibt hier keine eigene Palette. Die --rg-* weiter unten sind Namen für
   das, was oben im :root schon steht: Violett var(--lila) ist und bleibt die
   Hausfarbe, Warnrot steht ausschließlich dort, wo etwas dringend sein kann.
   Ein Ratgeber, der sich farblich vom Rest der Seite löst, wirkt wie eine
   fremde Anzeige – und genau das soll er nicht.

   ## Zur Breite

   Die Inhaltsspalte ist wegen der Kontaktleiste rund 780 px breit, unter
   1000 px Fensterbreite aber plötzlich deutlich breiter. Nach Fensterbreite
   umzuschalten ginge deshalb regelmäßig daneben. Die Raster hier zählen
   stattdessen selbst (auto-fit) oder fragen die Spaltenbreite (@container). */

/* --- Volle Breite, sobald die Kontaktspalte zu Ende ist -------------------
   Die Kontaktspalte ist rund 1.300 px hoch, ein ausführlicher Ratgeber
   zehnmal so lang. Im Raster blieb der Text über die ganze Länge 780 px
   schmal, während rechts daneben mehrere Bildschirmhöhen leere Fläche
   standen.

   Gelöst über einen schwebenden Platzhalter am Anfang des Beitrags: Der
   Inhalt fließt oben an ihm vorbei und nimmt sich unterhalb die volle
   Breite. Die Kontaktspalte selbst steht absolut in dem so freigehaltenen
   Raum – sie bleibt damit im Quelltext hinter dem Beitrag und wird von
   Vorleseprogrammen und Suchmaschinen weiterhin nach dem Inhalt gelesen.

   Ihre Höhe kennt nur der Browser (angemeldet steht ein Kasten mehr darin);
   site.js misst sie und schreibt sie in --kontaktspalte-h. Der Vorgabewert
   deckt den Regelfall ab, damit vor dem ersten Messen nichts überlappt.

   Gilt nur für mehrteilige Ratgeber (.article-ratgeber): Dort ist der Text
   lang genug, dass sich der Umbau lohnt, und dort ist er geprüft. */
@media (min-width: 1001px) {
    .layout:has(> .layout-main > .article-ratgeber) {
        display: block;
        position: relative;
        min-height: var(--kontaktspalte-h, 1340px);
    }
    .layout:has(> .layout-main > .article-ratgeber) > .contact-side {
        position: absolute; top: 0; right: 0; width: 280px;
    }
    .article-ratgeber::before {
        content: ""; float: right;
        width: 320px; height: var(--kontaktspalte-h, 1340px);
    }
    /*
     * Ein Kasten mit Rand oder Fläche darf nicht unter die Kontaktspalte
     * rutschen - nur die Zeilen eines Fließtextes weichen einem schwebenden
     * Element von selbst aus, der Kasten selbst bleibt darunter liegen.
     * flow-root gibt jedem Baustein einen eigenen Formatierungskontext:
     * Damit wird er neben der Kontaktspalte schmaler statt zu verschwinden -
     * und unterhalb von ihr wieder so breit wie die Seite.
     *
     * :where() sorgt dafür, dass die Regel jede Auseinandersetzung um die
     * Gewichtung verliert: Raster und Flexboxen behalten ihr display.
     */
    :where(.article-ratgeber) > :where(nav, header, section, aside, p, ul, ol, figure, table),
    :where(.article-ratgeber .article-body) > :where(p, ul, ol, dl, h2, h3, h4, h5,
        details, blockquote, figure, table, pre, nav, section, aside, div) {
        display: flow-root;
    }

    /*
     * Breit heisst nicht: Fliesstext ueber die ganze Seite. Eine Zeile mit
     * 1.100 px fasst rund 140 Zeichen - das Auge verliert am Zeilenende die
     * naechste Zeile. Begrenzt wird deshalb genau das, was gelesen wird:
     * Absaetze, Aufzaehlungen im Text, die Saetze in den Kaesten.
     *
     * Alles andere nimmt die volle Breite - Ueberschriften samt ihrer Linie,
     * Kartenraster, Werkzeuge, Grafiken, Tabellen, die Kapiteluebersicht.
     * Ein Kartenraster ist kein Fliesstext; es schmaler zu halten verschenkt
     * genau den Platz, um den es hier ging.
     */
    .article-ratgeber .article-body > p,
    .article-ratgeber .article-body > ul:not([class]),
    .article-ratgeber .article-body > ol:not([class]),
    .article-ratgeber .article-body > dl,
    .article-ratgeber .article-body > blockquote,
    .article-ratgeber .article-body .rg-schluss > p,
    .article-ratgeber .article-body .rg-aufbau > p,
    .article-ratgeber .article-body .rg-band > p,
    .article-ratgeber .article-body .rg-kurz li,
    .article-ratgeber .article-body .rg-hinweis p,
    .article-ratgeber .article-body .rg-alarm > p { max-width: 860px; }
}

:root {
    --rg-primary:      var(--blue);
    --rg-primary-dark: var(--blue-dark);
    --rg-primary-soft: var(--blue-light);
    --rg-surface:      #fff;
    --rg-surface-soft: var(--bg-soft);
    --rg-border:       var(--line);
    --rg-border-stark: var(--lila-linie);
    --rg-text:         var(--ink);
    --rg-muted:        var(--muted);
    /* Neutrale Hinweise: ein zurückhaltendes Blaugrau, kein zweites Violett –
       sonst sieht ein Hinweis aus wie eine Handlungsaufforderung. */
    --rg-info:         #4a6b96;
    --rg-info-soft:    #eef3f9;
    --rg-warn:         #c9302c;
    --rg-warn-text:    #a02622;
    --rg-warn-soft:    #fdeaea;
    --rg-warn-tint:    #fef6f5;
    --rg-warn-line:    #f3c6c5;
    --rg-radius:       18px;
    --rg-radius-gross: 24px;
    /* Karten tragen ihre Struktur über Rand und Fläche. Der Schatten deutet
       Tiefe nur an; mehr würde die Seite unruhig machen. */
    --rg-schatten:     0 8px 30px rgba(46, 42, 51, .05);
}

/* --- Aufmacher der Übersichtsseite --------------------------------------- */
/* Text links, Bild rechts. Auf schmalen Schirmen stehen erst Überschrift,
   Anriss, Schaltflächen und Eckdaten, dann das Bild: Wer auf dem Telefon
   liest, soll nicht an einer Illustration vorbeiscrollen müssen. */
.rg-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    margin: 4px 0 34px;
}
.rg-hero-eyebrow {
    margin: 0 0 10px; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--rg-primary);
}
.rg-hero h1 {
    font-size: clamp(2.3rem, 5.4cqi + .9rem, 3.05rem);
    line-height: 1.06; margin: 0 0 .38em; color: var(--rg-primary-dark);
    letter-spacing: -.015em;
}
.rg-hero-sub {
    margin: 0; font-size: 1.06rem; line-height: 1.6; color: var(--rg-muted);
    max-width: 46ch;
}
.rg-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.rg-hero-cta .btn { min-height: 44px; display: inline-flex; align-items: center; padding-left: 1.15em; padding-right: 1.15em; }

.rg-hero-meta {
    list-style: none; display: flex; flex-wrap: wrap; gap: 7px 18px;
    margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rg-border);
    font-size: .86rem; color: var(--rg-muted);
}
.rg-hero-meta li { display: flex; align-items: center; gap: 7px; margin: 0; }
.rg-hero-meta a { color: var(--rg-primary-dark); }

.rg-hero-bild { border-radius: var(--rg-radius-gross); overflow: hidden; background: var(--rg-primary-soft); }
.rg-hero-bild img,
.rg-hero-bild .rg-hero-svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rg-hero-svg-grund  { fill: var(--rg-primary-soft); }
.rg-hero-svg-kreis  { fill: #fff; opacity: .55; }
.rg-hero-svg-kreis2 { fill: #fff; opacity: .8; }
.rg-hero-svg-ring   { fill: none; stroke: var(--rg-primary); stroke-width: 1.5; opacity: .28; }
.rg-hero-svg-strich { fill: none; stroke: var(--rg-primary-dark); stroke-linecap: round; stroke-linejoin: round; }
.rg-hero-svg-funkeln { fill: var(--rg-primary); opacity: .3; }

@media (min-width: 660px) {
    .rg-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 41%); gap: 20px 30px; }
}

/* --- Zeichen ------------------------------------------------------------- */
/* Ein Stil für die ganze Seite: keine Füllung, gleiche Strichstärke.
   Die Zeichen stehen immer neben einer Beschriftung, nie an ihrer Stelle. */
.rg-icon {
    width: 26px; height: 26px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.rg-icon-sm { width: 17px; height: 17px; stroke-width: 1.7; opacity: .75; }

.article-body .rg-kicker {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--rg-primary-dark); font-weight: 700; margin: 0 0 6px;
}

/* --- Blättern am Kopf eines Kapitels --------------------------------------
   Links zurück, rechts weiter, dazwischen die Standortangabe. Am Fuß steht
   dieselbe Bewegung noch einmal ausführlich mit Kapitelnamen - aber Kapitel
   mit 52 Abschnitten sind tausende Pixel lang, und wer über die Suche mitten
   hineinspringt, käme sonst nur durch Scrollen weiter. */
.article-body .rg-weg {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 20px; padding: 0 0 10px;
    border-bottom: 1px solid var(--rg-border);
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
/* Zwei Pfeile, sonst nichts. Wohin sie führen, sagt der title beim
   Überfahren und das aria-label beim Vorlesen - sichtbarer Text daneben
   machte aus der Zeile wieder eine Leiste. */
.article-body .rg-weg > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    border: 1px solid var(--rg-border-stark); border-radius: 12px;
    background: var(--rg-surface); color: var(--rg-primary-dark);
    font-size: 1.15rem; line-height: 1; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.article-body .rg-weg > a:hover {
    background: var(--rg-primary-soft); border-color: var(--rg-primary);
}
.article-body .rg-weg > a:focus-visible { outline: 2px solid var(--rg-primary-dark); outline-offset: 2px; }
.article-body .rg-weg-zurueck::before { content: "←"; }
.article-body .rg-weg-weiter::after   { content: "→"; }
.article-body .rg-weg-hier {
    color: var(--rg-muted); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; text-align: center;
}
.article-body .rg-weg-hier a { color: var(--rg-primary-dark); }

/* Eckdatenzeile der Kapitelseiten (auf der Übersicht steht sie im Aufmacher). */
.article-body .rg-meta {
    list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin: 0 0 1.8em; padding: 0 0 14px; border-bottom: 1px solid var(--rg-border);
    font-size: .88rem; color: var(--rg-muted);
}
.article-body .rg-meta li { margin: 0; }
.article-body .rg-meta a { color: var(--rg-primary-dark); }

/* --- Medizinischer Hinweis ------------------------------------------------
   Bewusst nicht rot. Der Hinweis sagt, dass ein Text keine Untersuchung
   ersetzt – das ist wichtig, aber kein Alarm. Wäre er rot, wäre die
   Warnfarbe auf dieser Seite schon aufgebraucht, bevor es um Atemnot geht. */
.article-body .rg-hinweis {
    background: var(--rg-surface-soft); border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius); padding: 20px 22px; margin: 0 0 2.2em;
}
.article-body .rg-hinweis > summary {
    cursor: pointer; font-weight: 700; color: var(--rg-text); list-style: none;
    display: flex; align-items: center; gap: 12px;
}
.article-body .rg-hinweis > summary::-webkit-details-marker { display: none; }
.article-body .rg-hinweis > summary::after {
    content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1;
    color: var(--rg-muted); font-weight: 400;
}
.article-body .rg-hinweis[open] > summary::after { content: "–"; }
.article-body .rg-hinweis-zeichen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--rg-info-soft); color: var(--rg-info);
}
.article-body .rg-hinweis p { margin: 12px 0 0; font-size: .96rem; }
.article-body .rg-hinweis p:first-of-type { margin-top: 14px; }
/* --- Notfallkasten --------------------------------------------------------
   Der einzige Kasten der Seite, der wirklich rot ist. Weiter unten kann man
   Zeichen antippen und einordnen lassen; hier stehen die fünf, bei denen es
   nichts einzuordnen gibt. Wer sein Kind mit einer zunehmenden Schwellung im
   Gesicht vor sich hat, klickt keine Kästchen an. */
.article-body .rg-alarm {
    background: var(--rg-warn-tint); border: 1px solid var(--rg-warn-line);
    border-left: 5px solid var(--rg-warn);
    border-radius: var(--rg-radius); padding: 20px 24px 22px; margin: 0 0 2.4em;
}
.article-body .rg-alarm h2 {
    display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 0; border: 0; font-size: 1.18rem; color: var(--rg-warn-text);
}
.article-body .rg-alarm-zeichen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
    background: var(--rg-warn-soft); color: var(--rg-warn);
}
.article-body .rg-alarm-liste {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: grid; gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.article-body .rg-alarm-liste li {
    margin: 0; padding: 9px 12px 9px 34px; position: relative;
    background: #fff; border: 1px solid var(--rg-warn-line); border-radius: 11px;
    font-size: .93rem; line-height: 1.45;
}
/* Der Punkt ist Schmuck; die Bedeutung steht im Text daneben. */
.article-body .rg-alarm-liste li::before {
    content: ""; position: absolute; left: 14px; top: 1.05em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--rg-warn);
}
.article-body .rg-alarm p { margin: 14px 0 0; font-size: .95rem; }
.article-body .rg-alarm-mehr a { color: var(--rg-warn-text); font-weight: 600; }
.article-body .rg-alarm-mehr span { margin: 0 6px; color: var(--rg-warn-line); }

/* Kleine Zeile über einer Überschrift: Sie sagt, welcher Art der folgende
   Abschnitt ist, und macht die lange Seite überfliegbar. */
.article-body .rg-eyebrow {
    margin: 2.6em 0 -.2em; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--rg-primary);
}
.article-body .rg-eyebrow + h2 { margin-top: .35em; }

/* Abgesetztes Band am Seitenende für die Kapitelübersicht. */
.article-body .rg-band {
    background: var(--rg-surface-soft); border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-gross); padding: 8px 28px 30px; margin: 2.8em 0 0;
}
.article-body .rg-band > .rg-eyebrow:first-child { margin-top: 1.6em; }
.article-body .rg-band .rg-kapitel a { background: var(--rg-surface); }


/* --- Kurzantworten als Karten --------------------------------------------
   Zehn lange Sätze als nummerierte Liste liest niemand, der es eilig hat.
   Sechs Karten zum Überfliegen, darunter die Checkliste zum Abhaken und der
   vollständige Wortlaut zum Aufklappen – mit allen Mengenangaben. */
.article-body .rg-karten {
    list-style: none; margin: 1.3em 0 1.8em; padding: 0;
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr));
}
/* Sechs Karten gehen in zwei Reihen zu dritt auf. Vier und zwei sieht nach
   Rest aus - und die Seite ist breit genug, dass das auffiele. */
@media (min-width: 900px) {
    .article-body .rg-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.article-body .rg-karte {
    margin: 0; background: var(--rg-surface); border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius); padding: 20px 19px 21px;
}
.article-body .rg-karte-zeichen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 13px; border-radius: 14px;
    background: var(--rg-primary-soft); color: var(--rg-primary-dark);
}
.article-body .rg-karte h3 {
    margin: 0 0 7px; font-size: 1.02rem; line-height: 1.3; color: var(--rg-text);
}
.article-body .rg-karte p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--rg-muted); }

/* Der volle Wortlaut. Er steht im Quelltext immer da – zugeklappt ist er
   nur aus dem Weg, nicht aus der Seite. */
.article-body .rg-wortlaut {
    border: 1px solid var(--rg-border); border-radius: var(--rg-radius);
    background: var(--rg-surface-soft); padding: 0 20px; margin: 0 0 2.2em;
}
.article-body .rg-wortlaut > summary {
    cursor: pointer; font-weight: 600; padding: 15px 0; list-style: none;
    display: flex; align-items: center; gap: 12px; min-height: 44px;
}
.article-body .rg-wortlaut > summary::-webkit-details-marker { display: none; }
.article-body .rg-wortlaut > summary::after {
    content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1;
    color: var(--rg-muted); font-weight: 400;
}
.article-body .rg-wortlaut[open] > summary::after { content: "–"; }
.article-body .rg-wortlaut-sub { color: var(--rg-muted); font-weight: 400; font-size: .9rem; }
.article-body .rg-kurz { margin: 0 0 18px; }
.article-body .rg-kurz ol { padding-left: 1.3em; }
.article-body .rg-kurz li { margin-bottom: .7em; }

/* Aufbau des Ratgebers – Nachschlagetext, kein Einstiegstext. */
.article-body .rg-aufbau {
    border: 1px solid var(--rg-border); border-radius: var(--rg-radius);
    padding: 0 20px; margin: 0 0 2.2em;
}
.article-body .rg-aufbau > summary {
    cursor: pointer; font-weight: 600; padding: 15px 0; list-style: none;
    display: flex; align-items: center; gap: 12px; min-height: 44px;
}
.article-body .rg-aufbau > summary::-webkit-details-marker { display: none; }
.article-body .rg-aufbau > summary::after {
    content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1;
    color: var(--rg-muted); font-weight: 400;
}
.article-body .rg-aufbau[open] > summary::after { content: "–"; }
.article-body .rg-aufbau p { margin: 0 0 18px; font-size: .95rem; color: var(--rg-muted); }

/* Fortlaufende Abschnittsnummer vor der Überschrift eines Kapitels. */
.article-body .rg-nr {
    display: inline-block; min-width: 2.1em; margin-right: .5em; padding: 0 .35em;
    background: var(--rg-primary-soft); color: var(--rg-primary-dark); border-radius: 8px;
    font-size: .72em; font-weight: 700; text-align: center; vertical-align: .12em;
}

/* --- Die drei Werkzeuge --------------------------------------------------- */
/* Zwei nebeneinander, die Suche darunter über die volle Breite. Drei
   gleich breite Spalten waren gleich breit, aber nicht gleich hoch: Die
   Warnzeichen brauchen fünfzehn Zeilen, die Suche vor der ersten Eingabe
   drei - daneben stand ein Loch von 1.000 Pixeln. */
.article-body .rg-werkzeuge {
    display: grid; gap: 16px; margin: 1.3em 0 2.6em;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    align-items: start;
}
.article-body .rg-werkzeuge > .rg-werkzeug--breit { grid-column: 1 / -1; }
.article-body .rg-werkzeug {
    background: var(--rg-surface); border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius); padding: 20px 19px 21px;
    /* Der klebende Kopf verdeckt sonst genau das Werkzeug, zu dem die
       Schaltflaeche im Aufmacher gesprungen ist. */
    scroll-margin-top: var(--sprungabstand);
}
.article-body .rg-werkzeug-zeichen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin: 0 0 13px; border-radius: 14px;
    background: var(--rg-primary-soft); color: var(--rg-primary-dark);
}
.article-body .rg-werkzeug h3 { margin: 0 0 5px; font-size: 1.05rem; line-height: 1.3; }
.article-body .rg-werkzeug-sub { margin: 0 0 14px; font-size: .87rem; color: var(--rg-muted); line-height: 1.5; }
.article-body .rg-werkzeug label {
    display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px;
}
.article-body .rg-werkzeug select,
.article-body .rg-werkzeug input[type="search"] {
    width: 100%; padding: 11px 12px; font: inherit; font-size: .94rem; min-height: 44px;
    border: 1px solid var(--rg-border-stark); border-radius: 12px;
    background: #fff; color: var(--rg-text);
}
.article-body .rg-werkzeug select:focus,
.article-body .rg-werkzeug input[type="search"]:focus { outline: 2px solid var(--rg-primary); outline-offset: 1px; }

/* Die Warnzeichen-Karte ist die einzige, die aus dem ruhigen Grundton
   ausbricht – warm getönt, nicht schreiend. Rot bleibt dem Ergebnis
   vorbehalten, das nach dem Antippen erscheint. */
.article-body .rg-werkzeug--warn { background: var(--rg-warn-tint); border-color: var(--rg-warn-line); }
.article-body .rg-werkzeug--warn h3 { color: var(--rg-warn-text); }
.article-body .rg-werkzeug--warn .rg-werkzeug-zeichen { background: var(--rg-warn-soft); color: var(--rg-warn); }
.article-body .rg-werkzeug--warn .rg-zeichen label { background: #fff; border-color: var(--rg-warn-line); }

/* Altersstufen als Schaltflächen. site.js blendet sie ein und das
   Auswahlfeld aus – ohne Skript bleibt das Auswahlfeld die Bedienung.
   Die drei [hidden] unten sind nötig, weil die Browserregel für [hidden]
   gegen jede eigene display-Angabe verliert: Ohne sie blitzen die
   Schaltflächen auf, bevor site.js läuft, und die Beschriftung des
   Auswahlfelds bliebe danach stehen. */
.article-body .rg-chips[hidden],
.article-body .rg-werkzeug label[hidden],
.article-body .rg-werkzeug select[hidden] { display: none; }
.article-body .rg-chips {
    display: grid; gap: 8px; margin: 0 0 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
}
.article-body .rg-chip {
    min-height: 44px; padding: 8px 10px; font: inherit; font-size: .82rem; font-weight: 600;
    line-height: 1.25; cursor: pointer; text-align: center;
    border: 1px solid var(--rg-border-stark); border-radius: 12px;
    background: #fff; color: var(--rg-text); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.article-body .rg-chip:hover { background: var(--rg-primary-soft); border-color: var(--rg-primary); }
.article-body .rg-chip[aria-pressed="true"] {
    background: var(--rg-primary); border-color: var(--rg-primary); color: #fff;
}
.article-body .rg-chip:focus-visible { outline: 2px solid var(--rg-primary-dark); outline-offset: 2px; }
/* Sechs Altersstufen gehen in zwei Reihen zu dritt auf; automatisch
   verteilt ergaben sich vier und zwei. */
@media (min-width: 900px) {
    .article-body .rg-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Der Themenwähler hat vierzehn Chips statt sechs: zu dritt wären das fünf
   Reihen. Zu viert sind es vier, und die kurzen Themennamen passen. */
@media (min-width: 900px) {
    .article-body .rg-chips--themen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ergebnisfeld. Nicht .guide-verdict verwenden: die Klasse gehört den
   Schritt-für-Schritt-Leitfäden und ist dort anders eingefärbt. */
.article-body .rg-befund {
    margin-top: 14px; padding: 15px 16px; border-radius: 14px;
    background: var(--rg-surface-soft); border-left: 4px solid var(--rg-border-stark); font-size: .94rem;
}
.article-body .rg-befund-leer { color: var(--rg-muted); }
.article-body .rg-befund.is-rot    { background: var(--rg-warn-soft); border-left-color: var(--rg-warn); }
.article-body .rg-befund.is-gelb   { background: #fff6e5; border-left-color: var(--accent); }
.article-body .rg-befund.is-gruen  { background: #eaf7ec; border-left-color: var(--green-dark); }
.article-body .rg-befund strong { display: block; margin-bottom: 2px; font-size: 1.02rem; }
.article-body .rg-befund p { margin: 6px 0 0; }
.article-body .rg-befund-kicker {
    margin: 0 0 4px !important; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--rg-muted);
}
.article-body .rg-befund-was {
    margin: 8px 0 2px !important; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--rg-primary-dark);
}
.article-body .rg-befund-cta { margin-top: 12px !important; }

/* Die fünfzehn Zeichen brechen ab etwa 480 px Kartenbreite in zwei
   Spalten um. Untereinander wären sie eine Kolonne, die niemand zu Ende
   liest - und die Karte doppelt so hoch wie ihre Nachbarin. */
.article-body .rg-zeichen {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.article-body .rg-zeichen li { margin: 0; }
.article-body .rg-zeichen label {
    display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
    background: var(--rg-surface-soft); border: 1px solid var(--rg-border); border-radius: 12px;
    padding: 10px 12px; cursor: pointer; font-size: .9rem; line-height: 1.45;
}
.article-body .rg-zeichen input { margin-top: .25em; flex: 0 0 auto; accent-color: var(--rg-warn); }

/* Treffer der Abschnittssuche: Titel oben, Kapitel darunter. Nebeneinander
   bräuchte jede Zeile mehr Platz, als die Karte hat. */
.article-body .rg-treffer { list-style: none; margin: 12px 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.article-body .rg-treffer li { margin: 0; border-top: 1px solid var(--rg-border); }
.article-body .rg-treffer a {
    display: block; padding: 9px 4px; color: var(--rg-text); text-decoration: none; font-size: .9rem;
    border-radius: 8px;
}
.article-body .rg-treffer a:hover { color: var(--rg-primary-dark); background: var(--rg-surface-soft); }
.article-body .rg-treffer-nr {
    display: inline-block; min-width: 2.2em; color: var(--rg-muted); font-size: .8rem;
}
.article-body .rg-treffer-kap {
    display: block; margin-left: 2.2em; color: var(--rg-muted); font-size: .8rem;
}
/* In der breiten Karte passen Nummer, Titel und Kapitel in eine Zeile. */
@media (min-width: 900px) {
    .article-body .rg-werkzeug--breit .rg-treffer a {
        display: flex; gap: 14px; align-items: baseline; padding: 9px 8px;
    }
    .article-body .rg-werkzeug--breit .rg-treffer-kap {
        display: block; margin: 0 0 0 auto; text-align: right; white-space: nowrap;
    }
    .article-body .rg-werkzeug--breit .rg-treffer { max-height: 420px; }
}
.article-body .rg-treffer-leer { color: var(--rg-muted); font-size: .88rem; margin: 12px 0 0; }

/* --- Kapitelübersicht: Navigation und Vorschau ----------------------------
   Links die vollständige Liste mit siebzehn echten Verweisen, rechts eine
   Vorschau des Kapitels, über das gerade die Maus fährt oder das den
   Tastaturfokus hat. Angeklickt führt jeder Eintrag zum Kapitel – ein
   Verweis, der sich beim Anklicken anders verhält, als er aussieht, wäre
   eine Falle. Ohne Zeigegerät und in schmalen Spalten bleibt es bei der
   Liste; die Vorschauen wiederholen ohnehin die Kapitelseiten. */
.rg-explorer { margin: 1.2em 0 2.4em; }
.rg-explorer-vorschau { display: none; }

.article-body .rg-kapitel { list-style: none; margin: 1.2em 0 0; padding: 0; }
.article-body .rg-kapitel li { margin: 0 0 9px; }
.article-body .rg-kapitel a {
    display: flex; gap: 14px; align-items: baseline; text-decoration: none;
    background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: 14px;
    padding: 13px 17px; color: var(--rg-text); transition: background .15s ease, border-color .15s ease;
}
.article-body .rg-kapitel a:hover { border-color: var(--rg-primary); background: var(--rg-primary-soft); }
.article-body .rg-kapitel .is-current a { border-color: var(--rg-primary); background: var(--rg-primary-soft); }
/* Platz fuer zwei Ziffern und den Punkt. Frueher stand hier "XVII." und
   brauchte 3,2 em - arabisch reicht die Haelfte, und die Kapitelnamen
   ruecken entsprechend nach links. */
.article-body .rg-kapitel-nr {
    color: var(--rg-primary-dark); font-weight: 700; font-size: .86rem;
    min-width: 1.9em; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.article-body .rg-kapitel-titel { font-weight: 600; }
.article-body .rg-kapitel-zahl { margin-left: auto; color: var(--rg-muted); font-size: .84rem; white-space: nowrap; }

.article-body .rg-vorschau { display: none; }
.article-body .rg-vorschau:first-child { display: block; }
.article-body .rg-explorer.is-bereit .rg-vorschau:first-child { display: none; }
.article-body .rg-explorer.is-bereit .rg-vorschau.is-aktiv { display: block; }
.article-body .rg-vorschau-kicker {
    margin: 0 0 6px; font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--rg-muted);
}
.article-body .rg-vorschau h3 { margin: 0 0 10px; font-size: 1.16rem; line-height: 1.3; }
.article-body .rg-vorschau h3 a { color: var(--rg-primary-dark); text-decoration: none; }
.article-body .rg-vorschau h3 a:hover { text-decoration: underline; }
.article-body .rg-vorschau-text { margin: 0 0 16px; font-size: .93rem; color: var(--rg-muted); line-height: 1.6; }
.article-body .rg-vorschau-liste { list-style: none; margin: 0; padding: 0; }
.article-body .rg-vorschau-liste li { margin: 0; border-top: 1px solid var(--rg-border); }
.article-body .rg-vorschau-liste a {
    display: block; padding: 9px 4px; font-size: .92rem; color: var(--rg-text); text-decoration: none;
}
.article-body .rg-vorschau-liste a:hover { color: var(--rg-primary-dark); }
.article-body .rg-vorschau-nr {
    display: inline-block; min-width: 2.4em; color: var(--rg-muted); font-size: .8rem;
}
.article-body .rg-vorschau-mehr { margin: 10px 0 0; font-size: .84rem; color: var(--rg-muted); }
.article-body .rg-vorschau-cta { margin: 18px 0 0; }

@media (hover: hover) and (min-width: 740px) {
    .rg-explorer {
        display: grid; grid-template-columns: 254px minmax(0, 1fr);
        gap: 22px; align-items: stretch;
    }
    /* Die Liste ist siebzehn Einträge lang, die Vorschau kurz: Ohne
       mitlaufende Vorschau stünde die Antwort zum letzten Kapitel weit
       oberhalb des Zeigers. Klebrig ist deshalb die Karte selbst, nicht
       ihr Behälter – der reicht bis ans Ende der Liste und gibt der
       Karte damit den ganzen Weg zum Mitlaufen. */
    .rg-explorer-vorschau { display: block; }
    .article-body .rg-explorer.is-bereit .rg-vorschau.is-aktiv,
    .article-body .rg-explorer .rg-vorschau:first-child {
        background: var(--rg-surface); border: 1px solid var(--rg-border);
        border-radius: var(--rg-radius); padding: 22px 24px 24px; box-shadow: var(--rg-schatten);
        position: sticky; top: var(--sprungabstand);
    }
    .article-body .rg-explorer .rg-kapitel { margin: 0; }
    .article-body .rg-explorer .rg-kapitel li { margin: 0 0 2px; }
    .article-body .rg-explorer .rg-kapitel a {
        gap: 10px; padding: 9px 12px; border-radius: 11px;
        border-color: transparent; background: transparent; font-size: .9rem;
        align-items: flex-start;
    }
    .article-body .rg-explorer .rg-kapitel a:hover,
    .article-body .rg-explorer .rg-kapitel a:focus-visible {
        background: var(--rg-primary-soft); border-color: transparent;
    }
    .article-body .rg-explorer .rg-kapitel a.is-vorschau {
        background: var(--rg-primary-soft); color: var(--rg-primary-dark);
    }
    .article-body .rg-explorer .rg-kapitel a.is-vorschau .rg-kapitel-titel { font-weight: 700; }
    .article-body .rg-explorer .rg-kapitel-nr { min-width: 1.7em; }
    .article-body .rg-explorer .rg-kapitel-titel { font-weight: 500; line-height: 1.35; }
    .article-body .rg-explorer .rg-kapitel-zahl { display: none; }
}

/* --- Blättern zwischen Kapiteln --- */
.article-body .rg-pager {
    display: grid; gap: 14px; margin: 2.6em 0 1.6em;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.article-body .rg-pager a {
    display: block; text-decoration: none; color: var(--rg-text);
    border: 1px solid var(--rg-border); border-radius: 14px; padding: 13px 17px;
}
.article-body .rg-pager a:hover { border-color: var(--rg-primary); background: var(--rg-primary-soft); }
.article-body .rg-pager-dir { display: block; font-size: .78rem; color: var(--rg-muted); text-transform: uppercase; letter-spacing: .06em; }
.article-body .rg-pager-titel { display: block; font-weight: 600; margin-top: 2px; }
.article-body .rg-pager .is-weiter { text-align: right; }

.article-body .rg-schluss {
    background: var(--rg-primary-soft); border-radius: var(--rg-radius);
    padding: 6px 26px 20px; margin-top: 1.4em;
}

@media (max-width: 560px) {
    .article-body .rg-kapitel a { flex-wrap: wrap; gap: 4px 14px; }
    .article-body .rg-kapitel-zahl { margin-left: 0; width: 100%; }
    .article-body .rg-hinweis,
    .article-body .rg-karte,
    .article-body .rg-werkzeug { padding-left: 16px; padding-right: 16px; }
    .article-body .rg-schluss { padding-left: 18px; padding-right: 18px; }
}

/* Kapitel-Inhaltsverzeichnis: Die Nummern laufen ueber den ganzen Ratgeber
   durch, die Zaehlung der Liste selbst wuerde daneben in die Irre fuehren. */
.article-body .toc.rg-toc ol { list-style: none; padding-left: 0; }
.article-body .toc.rg-toc li a { display: flex; gap: .5em; align-items: baseline; }
.article-body .rg-toc-nr { flex: 0 0 2.4em; color: var(--rg-muted); font-size: .86em; }

/* --- Kleinigkeiten, die mehrere Verwaltungsansichten brauchen ------------ */
.inline-form { display: inline; }
.row-warn { background: #fff6f6; }
/* --- Entstehungshinweis am Beitragsfuß -------------------------------------
   Kleiner und leiser als der "Wichtige Hinweis" oben: Das ist eine Auskunft
   über die Herstellung, keine Botschaft an die Leserin. Deshalb kein Kasten
   mit Fläche, nur eine abgesetzte Zeile über einer dünnen Linie - und
   zugeklappt, damit sie den Abschluss des Beitrags nicht besetzt. */
.ki-hinweis {
    margin: 2.4em 0 1.6em; padding-top: 1.1em;
    border-top: 1px solid var(--line);
    font-size: .9rem; color: var(--muted);
}
.ki-hinweis > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; color: var(--muted);
}
.ki-hinweis > summary:hover { color: var(--ink); }
.ki-hinweis > summary::-webkit-details-marker { display: none; }
.ki-hinweis > summary::after {
    content: "+"; margin-left: auto; font-size: 1.1rem; line-height: 1; font-weight: 400;
}
.ki-hinweis[open] > summary::after { content: "–"; }
.ki-hinweis-zeichen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: var(--rg-info-soft, #eef2fb); color: var(--rg-info, #4a6fa5);
}
.ki-hinweis-zeichen svg { width: 15px; height: 15px; }
.ki-hinweis p { margin: .9em 0 0; line-height: 1.6; max-width: 62em; }

/* Herkunft einer Karte: der Ratgeber über dem Kapiteltitel. Klein und in
   der Marke, damit klar ist, dass es eine Zugehörigkeit ist und keine
   zweite Überschrift. */
.card-herkunft {
  margin: 0 0 2px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--lila-dunkel); text-transform: uppercase;
}

/* ---------- Evidenzkarte (Studienatlas) ----------
   Eine filterbare Liste aufklappbarer Studienkarten, erstmals im Ratgeber
   "Vitamin D bei Kindern": 91 Kernquellen mit Design, Stichprobe, Endpunkt,
   Ergebnis und Einschränkungen. Alle Karten stehen im HTML; das Skript des
   Bausteins blendet nur ein und aus. */
.article-body .ev-filter { display: grid; gap: 10px; margin: 0 0 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.article-body .ev-filter label { display: flex; flex-direction: column; gap: 4px;
    font-size: .8rem; font-weight: 600; color: var(--muted); }
.article-body .ev-filter select,
.article-body .ev-filter input[type="search"] { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 8px; font: inherit; font-size: .9rem; font-weight: 400; color: var(--ink); background: #fff; }
.article-body .ev-filter select:focus,
.article-body .ev-filter input[type="search"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.article-body .ev-zahl { margin: 0 0 10px; font-size: .85rem; color: var(--muted); }
.article-body .ev-karten { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.article-body .ev-karte { margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.article-body .ev-karte[open] { background: var(--bg-soft); }
.article-body .ev-karte > summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
    padding: 10px 0; cursor: pointer; list-style: none; font-size: .92rem; line-height: 1.4; }
.article-body .ev-karte > summary::-webkit-details-marker { display: none; }
.article-body .ev-karte > summary::after { content: "+"; margin-left: auto; font-weight: 700; color: var(--blue-dark); }
.article-body .ev-karte[open] > summary::after { content: "–"; }
.article-body .ev-karte-id { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .78rem;
    padding: 1px 6px; border-radius: 6px; background: var(--blue-light); color: var(--blue-dark); }
.article-body .ev-karte-jahr { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
.article-body .ev-karte-meta { flex-basis: 100%; font-size: .8rem; color: var(--muted); }
.article-body .ev-karte > p { margin: 0 0 8px; font-size: .92rem; }
.article-body .ev-karte > p:first-of-type { margin-top: 2px; }
.article-body .ev-karte-felder { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px;
    margin: 6px 0 10px; font-size: .86rem; }
.article-body .ev-karte-felder dt { color: var(--muted); font-weight: 600; }
.article-body .ev-karte-felder dd { margin: 0; }
.article-body .ev-karte-beleg { padding-bottom: 12px; font-size: .82rem; color: var(--muted); }
.article-body .ev-tabelle { margin: 12px 0 0; }
.article-body .ev-tabelle > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--blue-dark); }
@media (max-width: 560px) {
    .article-body .ev-karte-felder { grid-template-columns: 1fr; gap: 1px 0; }
    .article-body .ev-karte-felder dd { margin: 0 0 6px; }
}

/* ---------- Fachrechner ----------
   Etikett auf der Kachel und Hinweiskasten ueber dem Formular. Kein Rot, keine
   Warnfarbe: Der Kasten warnt nicht, er ordnet ein, wer hier angesprochen wird. */
.fach-etikett {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--lila-dunkel); background: var(--lila-flaeche); border: 1px solid var(--lila-linie);
    border-radius: 999px; padding: 2px 9px; line-height: 1.4; white-space: nowrap;
}
.tool-card.is-fach .fach-etikett { grid-column: 1 / -1; justify-self: start; margin: -2px 0 2px; }
.fach-hinweis {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px;
    background: var(--lila-flaeche); border-left: 5px solid var(--lila); border-radius: 8px;
    padding: 12px 16px; margin: 0 0 18px; font-size: .92rem;
}
.fach-hinweis p { margin: 0; flex: 1 1 320px; }
.fach-hinweis .fach-etikett { margin-top: 2px; }

/* Ergebnispaare (zwei Referenzen nebeneinander) und kopierbare Dokumentation */
.result-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 18px; align-items: start; } /* zwei fünfspaltige Tabellen passen erst ab 1.120 px nebeneinander, sonst untereinander */
.result-pair > * { min-width: 0; }
.result-pair .result-table { margin-top: 0; }
.result-charts .chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.result-charts .chart-pair .chart-card { margin-bottom: 0; }
.doku-block { margin-top: 18px; }
.doku-block textarea {
    width: 100%; min-height: 9em; font: .86rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--ink);
    resize: vertical;
}
.doku-block .doku-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.doku-block .doku-ok { font-size: .86rem; color: var(--green-dark); }
.ref-table-hinweis { font-size: .86rem; color: var(--muted); margin: 6px 0 0; }

/* ---------- Fachrechner-Freigabe (/admin/freigaben) und Regelwerk-Ansicht ---------- */
.freigabe-entscheidung { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.freigabe-entscheidung input[type="text"] { flex: 1 1 260px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.regelwerk-ansicht { font-size: .92rem; }
.regelwerk-abschnitt { margin-top: 18px; }
.regelwerk-abschnitt > h3 { margin: 0 0 8px; font-size: 1rem; text-transform: capitalize; }
.regelwerk-regel { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.regelwerk-regel h4 { margin: 0 0 6px; font-size: .98rem; }
.regelwerk-regel h4 code { font-weight: 400; font-size: .8rem; color: var(--muted); margin-left: 6px; }
.regelwerk-regel p { margin: 0 0 6px; }
.regelwerk-meta { font-size: .84rem; }
.regelwerk-felder { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0; }
.regelwerk-felder dt { font-weight: 700; color: var(--muted); font-size: .84rem; }
.regelwerk-felder dd { margin: 0; min-width: 0; overflow-x: auto; }
.regelwerk-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 6px 0; }
.regelwerk-tabelle th, .regelwerk-tabelle td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.regelwerk-tabelle th { background: var(--bg-soft); font-weight: 700; }
.regelwerk-liste { margin: 4px 0 6px 18px; padding: 0; }

/* Zweite Perzentile (deutsche Referenz) in der Messwerttabelle des Kinderprofils */
.pz-kh { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* Wochen+Tage nebeneinander (Gestationsalter) */
.input-pair { display: flex; align-items: center; gap: 8px; }
.input-pair input { width: 5.5em; }
.link-list { padding-left: 1.2em; }
.link-list li { margin: 4px 0; }

/* Nachschlagetabellen: hervorgehobene Zeile des gewählten Alters */
.result-table tr.ist-aktiv td { background: var(--lila-flaeche); font-weight: 700; }

/* Suche im Fachkonto */
.dash-suche { margin-bottom: 18px; }
.dash-suche .input-pair input { width: auto; flex: 1 1 260px; }

/* Werkzeug-Uebersicht: zwei Bereiche (Eltern / Fach) */
.lead .fach-etikett { vertical-align: middle; }

/* Fachrechner mit mehreren Modi (Flüssigkeitsrechner, Perfusor): Feldgruppen je Modus */
.radio-group-wrap { flex-wrap: wrap; row-gap: 8px; }
fieldset.modus-felder { border: 1px solid var(--lila-linie); border-radius: 8px; padding: 12px 16px 4px; margin: 18px 0 0; }
fieldset.modus-felder legend { font-weight: 600; color: var(--lila-dunkel); padding: 0 6px; }
fieldset.modus-felder[hidden] { display: none; }
.feld-gruppe-titel { font-weight: 600; margin: 14px 0 6px; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .form-grid-3 { grid-template-columns: 1fr; } }
.result-table tr.ist-summe td { border-top: 2px solid var(--lila-linie); }

/* Score-Werkzeug: Score-Auswahl als Chips, Befunde als Radio-Gruppen mit Punkten */
.score-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.score-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--lila-linie); border-radius: 999px; font-size: .92rem; text-decoration: none; color: var(--lila-dunkel); background: #fff; }
.score-chip:hover { background: var(--lila-flaeche); }
.score-chip.ist-aktiv { background: var(--lila-dunkel); border-color: var(--lila-dunkel); color: #fff; }
fieldset.score-item { border: 1px solid var(--lila-linie); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 14px; }
fieldset.score-item legend { font-weight: 600; padding: 0 6px; }
fieldset.score-item.ist-fehlend { border-color: #b13b3b; }
.score-optionen { display: grid; gap: 6px; }
.score-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.score-option:hover { background: var(--lila-flaeche); }
.score-option:has(input:checked) { border-color: var(--lila-dunkel); background: var(--lila-flaeche); }
.score-punkte { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lila-dunkel); min-width: 1.6em; text-align: right; }
.score-stufen { margin-top: 22px; }
.chip-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Ergebnisse aller Rechner als PDF (drucken.js) ---------- */
.druck-leiste { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--lila-linie); }
#druck-ansicht { display: none; }
@media print {
    .druck-nur-ergebnis body > *:not(#druck-ansicht) { display: none !important; }
    .druck-nur-ergebnis #druck-ansicht { display: block; }
    #druck-ansicht { font-size: 11pt; color: #000; }
    #druck-ansicht .druck-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 2px solid #8e4baf; padding-bottom: 6px; margin-bottom: 14px; }
    #druck-ansicht .druck-kopf-titel { font-size: 15pt; font-weight: 700; }
    #druck-ansicht .druck-kopf-meta { font-size: 9pt; color: #555; text-align: right; }
    #druck-ansicht .result-box, #druck-ansicht .ms-result, #druck-ansicht .advisor-result { background: #fff; border: 0; padding: 0; margin: 0; box-shadow: none; }
    #druck-ansicht .result-table, #druck-ansicht .chart-card, #druck-ansicht figure, #druck-ansicht .doku-block, #druck-ansicht li { break-inside: avoid; }
    #druck-ansicht h2, #druck-ansicht h3 { break-after: avoid; }
    #druck-ansicht .druck-text { white-space: pre-wrap; border: 1px solid #bbb; padding: 8px; font-size: 10pt; }
    #druck-ansicht .disclaimer, #druck-ansicht .druck-fuss { font-size: 9pt; color: #444; border-top: 1px solid #bbb; padding-top: 8px; margin-top: 14px; }
    #druck-ansicht .tool-sources { font-size: 9pt; }
    #druck-ansicht .tool-sources a { color: inherit; text-decoration: none; }
    #druck-ansicht, #druck-ansicht * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #druck-ansicht .stat-term { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
    #druck-ansicht .stat-tooltip, #druck-ansicht .fach-hinweis, #druck-ansicht .result-hint a { display: none; }
    #druck-ansicht svg { max-width: 100%; height: auto; }
}

/* Perzentilenrechner: drei Referenzbereiche (WHO / Ärzte / CDC) */
.ref-bereich { margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--lila-linie); }
.ref-bereich:first-of-type { margin-top: 12px; border-top: 0; padding-top: 0; }
.ref-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.2rem; color: var(--lila-dunkel); }
.ref-nummer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lila-dunkel); color: #fff; font-size: .95rem; flex: 0 0 28px; }
.ref-wer { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.ref-bereich-kh { background: var(--lila-flaeche); margin-left: -18px; margin-right: -18px; padding: 18px; border-radius: 10px; border-top: 0; }
.ref-bereich .result-charts { margin-top: 14px; }
.ref-bereich .result-charts .chart-card + .chart-card { margin-top: 12px; }

/* =========================================================================
   Mobil-Feinschliff (26.09.2026)
   Gemessen auf 375 px Breite über 15 Seitenarten. Ein Block, damit er sich
   bei geteilter Arbeit an dieser Datei eindeutig zuordnen lässt.
   ========================================================================= */

/* Von site.js erzeugte Hülle um Tabellen, die keinen Scrollbereich hatten.
   Bewusst nicht .table-wrap (in Beipackzetteln mit Rahmen und Schatten);
   die Abstände überträgt das Skript von der Tabelle. */
.tabelle-scroll { overflow-x: auto; }

/* Lange Adressen (Quellenlisten, Verweise) brechen um, statt die Seite
   breiter als den Schirm zu machen. Trifft nur Wörter, die sonst
   überstünden; Tabellenbreiten bleiben unberührt. */
.article-body { overflow-wrap: break-word; }

/* Suchfeld mit Knopf: Ohne min-width: 0 behielt das Feld seine
   Mindestbreite und schob den Knopf 6 px über den Rand. */
.search-form input { min-width: 0; }

/* Klebender Kopf: auf 360 px war er 208 px hoch – ein Viertel des
   Bildschirms, auf jeder Seite, dauerhaft. Die Kontaktleiste brach in drei
   Zeilen um. Jetzt eine Zeile (Telefon + Status; die E-Mail steht in der
   Kontaktspalte und im Fuß) und ein kleineres Logo: rund 110 px. */
@media (max-width: 600px) {
    .topbar-inner { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; gap: 10px; }
    .topbar-contact .topbar-sep,
    .topbar-contact a:not(.topbar-phone) { display: none; }
    .topbar-phone { display: inline-block; padding: 8px 0; white-space: nowrap; }
    .topbar-status { white-space: nowrap; }
    .header-main { padding-top: 6px; padding-bottom: 6px; }
    .logo img { height: 60px; }
    /* Notfallnummern im Fuß: Bezeichnung und Nummer dürfen untereinander
       rutschen, sonst ragte die Nummer auf 320 px über den Rand. */
    .emergency-list li { flex-wrap: wrap; }
}

/* iPhone SE (320 px): Abends und am Wochenende steht "Derzeit geschlossen"
   statt "Jetzt geöffnet" - die Zeile war dann 3 px breiter als der Schirm.
   Schmalerer Rand und etwas kleinere Schrift geben Luft für beide Texte. */
@media (max-width: 360px) {
    .topbar { font-size: .85rem; }
    .topbar-inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
    .topbar-status { gap: 6px; }
}

/* Hauptbedienelemente mindestens 44 px (Menüknopf war 42 × 35). */
@media (max-width: 900px) {
    .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
}

/* Eingabefelder unter 16 px lassen iOS beim Antippen die Seite heranzoomen –
   betraf u. a. alle Messfelder des Perzentilenrechners (15,2 px). */
@media (max-width: 900px) {
    /* :is() gibt allen drei die Gewichtung des längsten Selektors – sonst
       verlor select gegen Regeln wie .if-field select (14,7 px). */
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
        select, textarea) { font-size: 16px; }
}

/* Geschlechtswahl der Rechner: 13 × 13 px große Kreise; die ganze Zeile
   ist Tippfläche, war aber nur so hoch wie der Text. */
@media (max-width: 900px) {
    .radio-group label { min-height: 44px; }
    .radio-group input[type="radio"] { width: 20px; height: 20px; margin: 0; }
}

/* Die Kontaktspalte steht unter 1000 px unter dem Inhalt in voller Breite:
   dort kein Text mehr unter 14 px. */
@media (max-width: 1000px) {
    /* 1fr heißt minmax(auto, 1fr): Die Kontaktspalte zwang die einzige
       Spalte auf 312 px Mindestbreite – auf 320-px-Geräten stand jede Seite
       14 px über. */
    .layout { grid-template-columns: minmax(0, 1fr); }
    .contact-side { min-width: 0; }
    .side-sub, .side-note, .side-link, .route-form label { font-size: .875rem; }
}

/* ---------- Mobile Startseite (26.09.2026) ----------
   templates/partials/home-mobil.php: Kontakt mit Anrufen/Navigieren, dann der
   Perzentilenrechner, die übrigen Rechner zum Aufklappen, zuletzt das Portal.
   Auf dem Handy ersetzt dieser Block Kacheln, Portal-Werbung und Kontaktspalte
   der Startseite - die Seite war dort über 6.000 px lang, der Kontakt stand erst
   nach rund sieben Bildschirmhöhen. Begrüßungstext und -bild bleiben auf
   Wunsch des Betreibers (26.09.2026) als Erstes stehen. */
.home-mobil { display: none; }
@media (max-width: 700px) {
    .home-mobil { display: block; padding: 12px 0 0; }
    .is-home .home-ordi, .is-home .home-werkzeuge, .is-home .home-portal, .is-home .contact-side { display: none; }

    .hm-kontakt {
        background: #fff; border: 1px solid var(--lila-linie); border-radius: var(--radius);
        padding: 14px 16px; margin-bottom: 14px;
    }
    .hm-status { margin: 0; font-weight: 600; }
    .hm-status .status-dot { margin-right: 4px; }
    .hm-hinweis { margin: 2px 0 10px; font-size: .92rem; color: var(--muted); }
    .hm-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
              padding: 0 10px; font-size: 1rem; white-space: nowrap; }
    /* KIN-42: Knopf zur Online-Akutbuchung neben Anrufen - darf umbrechen, Navigieren darunter ueber die ganze Breite */
    .hm-btn-termin { white-space: normal; text-align: center; line-height: 1.2; padding: 4px 8px; }
    .hm-btn-breit { grid-column: 1 / -1; }
    .hm-notfall { margin: 10px 0 0; font-size: .92rem; }
    .hm-notfall a { white-space: nowrap; }

    .hm-auf { margin-top: 12px; }
    .hm-auf > summary {
        cursor: pointer; font-weight: 600; color: var(--lila-dunkel);
        min-height: 44px; display: flex; align-items: center; justify-content: space-between;
        list-style: none;
    }
    .hm-auf > summary::-webkit-details-marker { display: none; }
    .hm-auf > summary::after { content: "\25BE"; font-size: 1.1rem; transition: transform .15s ease; }
    .hm-auf[open] > summary::after { transform: rotate(180deg); }
    .home-mobil > .hm-auf {
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        padding: 2px 16px; margin: 0 0 14px;
    }
    .hm-auf-inhalt { padding-bottom: 8px; }
    .hm-auf-inhalt .side-hours { width: 100%; margin: 6px 0 10px; }
    /* Ordination als Felder, zwei je Zeile (partials/ordi-kacheln) */
    .hm-ordi-kacheln { margin: 0 0 14px; }
    .hm-ordi-kacheln .ordi-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hm-ordi-kacheln .ordi-kachel { padding: 14px 10px 12px; }
    .hm-ordi-kacheln .ordi-symbol { width: 44px; height: 44px; margin-bottom: 4px; }
    .hm-ordi-kacheln .ordi-kachel small { font-size: .78rem; }

    .hm-perzentil { margin-bottom: 14px; }
    .hm-perzentil { border-color: var(--lila-linie); color: var(--ink); text-decoration: none; }
    .hm-perzentil:hover, .hm-perzentil:focus-visible { border-color: var(--lila); text-decoration: none; }
    .hm-perzentil h2 { font-size: 1.1rem; margin: 6px 0 4px; color: var(--lila-dunkel); }
    .hm-perzentil p { margin-bottom: 12px; }
    .hm-perzentil-los {
        grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 44px;
        border-radius: 999px; background: var(--lila); color: #fff; font-weight: 600;
    }
    .hm-werkzeuge { list-style: none; margin: 0 0 8px; padding: 0; }
    .hm-werkzeuge li { border-top: 1px solid var(--line); }
    .hm-werkzeuge a { display: flex; gap: 10px; align-items: center; min-height: 44px; }

    .hm-portal { padding: 4px 0 8px; }
    .hm-portal p { margin: 0 0 8px; font-size: .95rem; }
}

/* ---------- Wissenswertes und Ratgeber ----------
   templates/pages/wissen.php: Einstieg mit Suchfeld und einem Feld je Bereich.
   templates/pages/ratgeber.php: die Ratgeber als Bildkarten mit Filterfeld.
   Eigenes Präfix wz-: .wissen-karte und .wissen-liste gehören dem
   Ernährungsberater (templates/calculators/nutrition-advisor.php). */
.wz-kopf {
    background: linear-gradient(135deg, var(--lila-flaeche), #fff 80%);
    border: 1px solid var(--lila-linie); border-radius: var(--radius);
    padding: 16px 18px; margin: 18px 0 30px; box-shadow: var(--shadow);
}
.wz-kopf-klebt { position: sticky; top: var(--header-h, 0px); z-index: 5; }
.wz-suche {
    display: flex; align-items: center; gap: 10px; background: #fff; color: var(--lila);
    border: 1px solid var(--lila-hell); border-radius: 999px; padding: 4px 18px;
}
.wz-suche:focus-within { border-color: var(--lila); box-shadow: 0 0 0 3px var(--lila-flaeche); }
.wz-suche input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 9px 0; font: inherit; font-size: 1rem; color: var(--ink); background: none; }
.wz-suche .btn { flex: 0 0 auto; margin: 4px -12px 4px 0; }
.wz-leer { margin: 12px 0 0; }
.wz [hidden] { display: none !important; }

/* Einstieg: Bereiche als Felder mit Symbol */
.wz-bereiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.wz-feld {
    display: flex; align-items: flex-start; gap: 14px; height: 100%; box-sizing: border-box; padding: 18px;
    background: #fff; border: 1px solid var(--lila-linie); border-radius: var(--radius); color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wz-feld:hover, .wz-feld:focus-visible { border-color: var(--lila); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.wz-feld .ordi-symbol { flex: 0 0 auto; margin: 0; }
.wz-feld:hover .ordi-symbol { background: var(--lila); color: #fff; }
.wz-feld-text { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.wz-feld-text strong { color: var(--lila-dunkel); font-size: 1.05rem; }
.wz-feld-text small { color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* Ratgeber als Bildkarten */
.wz-karten { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.wz-karte {
    display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; color: var(--ink);
    border: 1px solid var(--lila-linie); border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wz-karte:hover, .wz-karte:focus-visible { border-color: var(--lila); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.wz-karte img, .wz-karte-ersatz { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.wz-karte-ersatz { display: grid; place-items: center; background: linear-gradient(135deg, var(--lila-flaeche), var(--lila-linie)); color: var(--lila); }
.wz-karte-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.wz-karte strong { color: var(--lila-dunkel); font-size: 1rem; line-height: 1.3; }
.wz-karte small { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.wz-karte em { margin-top: auto; padding-top: 4px; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--lila); }

@media (max-width: 620px) { .wz-kopf-klebt { position: static; } }
@media (prefers-reduced-motion: reduce) { .wz-feld:hover, .wz-karte:hover { transform: none; } }

/* ---------- Perzentilenrechner (27.09.2026) ----------
   templates/calculators/percentile.php: kurzer Kopf mit Hinweis-Kärtchen,
   Formular in drei nummerierten Schritten, Junge/Mädchen als Bildauswahl.
   Farben Junge #3a6ea5, Mädchen #b8437f wie überall auf der Seite. */
.pz-kopf { background: linear-gradient(135deg, var(--lila-flaeche), #fff 75%); border-radius: var(--radius); padding: 22px 24px 18px; margin: 6px 0 22px; }
.pz-kopf h1 { margin: 0 0 8px; color: var(--lila-dunkel); }
.pz-kopf .lead { margin: 0 0 14px; }
.pz-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pz-chips li { background: #fff; border: 1px solid var(--lila-linie); color: var(--lila-dunkel); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }
.pz-chips li::before { content: '✓'; color: var(--lila); margin-right: 6px; }
.pz-tipps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .9rem; }
.pz-tipps a::after { content: ' →'; }

.pz-form { max-width: none; padding: 26px 28px; }
.pz-schritt { margin-bottom: 24px; }
.pz-schritt-titel, .pz-form .form-extra > summary { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; color: var(--lila-dunkel); margin: 0 0 14px; }
.pz-nr { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--lila); color: #fff; font-size: .9rem; font-weight: 700; }

.pz-geschlecht { border: 0; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.pz-geschlecht legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.pz-wahl { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer;
           background: #fff; border: 2px solid var(--line); border-radius: var(--radius); font-weight: 700; font-size: 1.05rem;
           transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.pz-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pz-wahl svg { flex: 0 0 auto; }
.pz-wahl:hover { border-color: var(--lila-hell); }
.pz-wahl-junge:has(input:checked) { border-color: #3a6ea5; background: rgba(58, 110, 165, .06); color: #3a6ea5; box-shadow: 0 2px 10px rgba(58, 110, 165, .15); }
.pz-wahl-maedchen:has(input:checked) { border-color: #b8437f; background: rgba(184, 67, 127, .06); color: #b8437f; box-shadow: 0 2px 10px rgba(184, 67, 127, .15); }
.pz-wahl:has(input:checked)::after { content: '✓'; margin-left: auto; font-size: 1.1rem; }
.pz-wahl:has(input:focus-visible) { outline: 3px solid var(--lila-hell); outline-offset: 2px; }

.pz-form .measure-block { margin-bottom: 24px; }
.pz-form .measure-block > .hint { margin: -6px 0 0; }
.pz-grenzen { display: block; font-size: .82rem; margin-top: 2px; }
.pz-form .measure-rows { background: linear-gradient(135deg, var(--lila-flaeche), var(--bg-soft)); border: 1px solid var(--lila-linie); border-radius: var(--radius); padding: 16px 16px 18px; }
.pz-form .measure-row label { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--lila-dunkel); margin-bottom: 6px; }
.pz-symbol { flex: 0 0 auto; color: var(--lila); }
.pz-form .measure-row input { padding: 11px 12px; font-size: 1rem; border-color: var(--lila-linie); background: #fff; border-radius: 10px; }
.pz-form .measure-row input:focus { border-color: var(--lila); outline: 3px solid var(--lila-flaeche); }
.measure-row > .form-row > .pz-einheit { align-self: start; }
.pz-einheit { position: relative; display: block; }
.pz-einheit input { width: 100%; box-sizing: border-box; padding-right: 42px !important; }
.pz-einheit::after { content: attr(data-einheit); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--lila); font-weight: 700; font-size: .85rem; pointer-events: none; }
.pz-form .pz-schritt + .pz-schritt { border-top: 1px dashed var(--lila-linie); padding-top: 22px; }
.pz-form .pz-schritt .form-grid .form-row { margin-bottom: 0; }
.pz-weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 0; }
.pz-weitere .hint { margin: 0; font-size: .85rem; }
.pz-form .form-extra { padding: 14px 18px; }
.pz-form .form-extra > summary { margin: 0; list-style: none; }
.pz-form .form-extra > summary::-webkit-details-marker { display: none; }
.pz-form .form-extra > summary::after { content: '▾'; margin-left: auto; color: var(--lila); }
.pz-form .form-extra[open] > summary { margin-bottom: 10px; }
.pz-form .form-extra[open] > summary::after { transform: rotate(180deg); }
.pz-form .form-extra summary .optional { font-weight: 400; }

.pz-actions .btn-primary { width: 100%; justify-content: center; font-size: 1.1rem; padding: 14px 20px; }
.pz-konto { text-align: center; }

@media (max-width: 560px) {
    .pz-kopf { padding: 18px 16px 14px; }
    .pz-form { padding: 18px 16px; }
    .pz-geschlecht { gap: 8px; }
    .pz-wahl { min-width: 0; padding: 8px 10px; gap: 8px; font-size: .95rem; }
    .pz-wahl svg { width: 38px; height: 38px; }
    .pz-wahl:has(input:checked)::after { display: none; }
}

/* Perzentilenrechner: Geburtsdatum mit Altersanzeige, Frühgeburt als Frage mit
   Schieberegler, Häkchen an erledigten Schritten (Skript in percentile.php) */
.pz-geburt { max-width: 360px; margin-bottom: 18px; }
.pz-geburt label, .pz-frueh legend { font-weight: 700; color: var(--ink); }
.pz-alter { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--lila-flaeche);
            border: 1px solid var(--lila-linie); color: var(--lila-dunkel); font-weight: 600; font-size: .95rem;
            animation: pz-auf .25s ease; }
@keyframes pz-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.pz-frueh { border: 0; margin: 0; padding: 0; min-width: 0; }
.pz-frueh legend { padding: 0; margin-bottom: 8px; }
.pz-frueh-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-frueh-wahl label { position: relative; cursor: pointer; }
.pz-frueh-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pz-frueh-wahl span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--line);
                      background: #fff; font-weight: 600; transition: border-color .15s ease, background .15s ease; }
.pz-frueh-wahl label:hover span { border-color: var(--lila-hell); }
.pz-frueh-wahl input:checked + span { border-color: var(--lila); background: var(--lila-flaeche); color: var(--lila-dunkel); }
.pz-frueh-wahl input:focus-visible + span { outline: 3px solid var(--lila-hell); outline-offset: 2px; }

.pz-frueh-regler { display: none; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius);
                   background: var(--bg-soft); border: 1px solid var(--lila-linie); }
.pz-frueh:has(input[value="ja"]:checked) .pz-frueh-regler { display: block; animation: pz-auf .25s ease; }
.pz-frueh-regler label { display: block; font-weight: 600; margin-bottom: 8px; }
.pz-frueh-regler output { display: inline-block; min-width: 2ch; padding: 0 8px; border-radius: 8px; background: var(--lila); color: #fff; font-weight: 700; text-align: center; }
.pz-frueh-regler input[type="range"] { width: 100%; accent-color: var(--lila); margin: 4px 0 0; }
.pz-regler-skala { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.pz-frueh-regler .hint { margin: 10px 0 0; font-size: .88rem; }

.pz-nr.ist-fertig { font-size: 0; }
.pz-nr.ist-fertig::after { content: '✓'; font-size: .95rem; }
.pz-gedimmt { opacity: .45; }

/* ---------- Ergebnis Perzentilen-/BMI-Rechner (27.09.2026) ----------
   templates/calculators/_result.php: Kopf mit Illustration, je Messwert eine
   Karte mit Balken 0–100. Eine Farbe für alle Lagen – gezeigt, nicht bewertet
   (keine Ampel). */
.erg-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.erg-kopf h2 { margin: 0; }
.erg-kopf .kind-avatar { flex: 0 0 auto; }
.erg-kind { margin: 2px 0 0; font-size: 1.1rem; color: var(--lila-dunkel); }
.erg-korrigiert { display: inline-block; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--lila-linie); font-size: .85rem; color: var(--lila-dunkel); }

.erg-karten { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.erg-karte { background: #fff; border: 1px solid var(--lila-linie); border-radius: var(--radius); padding: 16px 18px 14px; box-shadow: var(--shadow); }
.erg-karte p { margin: 0; }
.erg-karte-kopf { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--lila-dunkel); font-size: .92rem; }
.erg-karte-kopf svg { color: var(--lila); }
.erg-wert { margin-top: 8px !important; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.erg-wert span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.erg-perzentile { margin-top: 2px !important; font-weight: 700; color: var(--lila); }
/* Kurzurteil: beide Zustände in Lila, unterschieden durch die Form (keine Ampel) */
.erg-lage { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px !important; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.erg-lage svg { flex: 0 0 auto; width: 14px; height: 14px; }
.erg-lage-ok { background: var(--lila-flaeche); color: var(--lila-dunkel); border: 2px solid var(--lila-flaeche); }
.erg-lage-rat { background: #fff; color: var(--lila-dunkel); border: 2px solid var(--lila); }

.erg-balken { position: relative; height: 14px; margin: 30px 0 4px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); }
.erg-band { position: absolute; left: 3%; width: 94%; top: 0; bottom: 0; border-radius: 999px; background: var(--lila-linie); }
.erg-band span { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font-size: .7rem; font-weight: 600; color: var(--muted); }
.erg-mitte { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #fff; }
.erg-punkt { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
             background: var(--lila); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(var(--lila-schleier), .35);
             animation: erg-punkt .6s ease-out; }
@keyframes erg-punkt { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
.erg-skala { position: relative; height: 14px; font-size: .7rem; color: var(--muted); }
.erg-skala span { position: absolute; transform: translateX(-50%); }
.erg-satz { margin-top: 8px !important; font-size: .88rem; line-height: 1.45; color: var(--ink); }

.erg-zahlen { margin: 12px 0 16px; }
.ref-bereich-who > .result-einordnung { margin-top: 20px; }
.einordnung-liste { margin: 4px 0 12px; padding-left: 1.2em; }
.einordnung-liste li { margin-bottom: 4px; }
.erg-zahlen > summary { cursor: pointer; font-weight: 600; color: var(--lila-dunkel); font-size: .92rem; }
.erg-zahlen[open] > summary { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .erg-punkt { animation: none; } }

/* PDF-Knopf rechts im Kopf des Ergebnisses (Perzentilen- und BMI-Rechner). Er löst
   den Knopf aus, den drucken.js unten an jedes Ergebnis hängt – dieselbe Druckansicht. */
.erg-kopf .erg-pdf { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; white-space: nowrap; }
@media (max-width: 560px) {
    .erg-kopf { flex-wrap: wrap; }
    .erg-kopf .erg-pdf { margin-left: 0; width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   Perzentilenkurven (Chart::percentileChart, 27.09.2026)
   Bänder P3–P97 / P15–P85, Messmarke mit Falllinie, Fadenkreuz
   (site.js), Reiter und Lesehilfe im Perzentilenrechner.
   ------------------------------------------------------------------ */
.chart .pz-band-weit { fill: var(--lila-flaeche); }
.chart .pz-band-mitte { fill: var(--lila-linie); opacity: .8; }
.chart .chart-grid-x { opacity: .45; }
.chart .chart-einheit { font-size: 11px; font-weight: 700; fill: var(--muted); }
.chart .chart-achse { font-size: 11px; fill: var(--muted); }
.chart.chart-percentile .chart-line { stroke: var(--lila-tief); stroke-width: 2.5; }
.chart.chart-percentile .chart-dot { fill: var(--lila-tief); stroke: #fff; stroke-width: 2; }
.chart.chart-percentile .chart-point:hover .chart-dot { fill: var(--lila-dunkel); stroke-width: 2.5; }
.chart .pz-halo { fill: var(--lila); opacity: .2; transform-box: fill-box; transform-origin: center; animation: pz-puls 2.4s ease-in-out infinite; pointer-events: none; }
.chart .pz-fall { stroke: var(--lila-dunkel); stroke-width: 1.3; stroke-dasharray: 3 3; }
.chart .pz-leitlinie { stroke: var(--lila-tief); stroke-width: 1; stroke-dasharray: 2 2; opacity: .75; }
/* Ablesezeile des Fadenkreuzes – unter dem Diagramm statt als Kasten darin */
.pz-ablesung { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 2.9em; margin: 6px 0 0; padding: 6px 12px; border-radius: 10px; background: var(--lila-flaeche); font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pz-ablesung-alter { color: var(--lila-tief); margin-right: 4px; }
.pz-ablesung-wert { color: var(--text, #332b39); white-space: nowrap; }
.pz-ablesung-wert.is-median { font-weight: 800; color: var(--lila-dunkel); }
.chart .pz-marke rect { fill: var(--lila-tief); }
.chart .pz-marke text { fill: #fff; font-size: 12px; font-weight: 700; }
.chart .pz-band { transform-box: view-box; transform-origin: 50% 100%; animation: pz-ein .7s ease-out both; }
.chart .pz-band-mitte { animation-delay: .12s; }
.chart .pz-kreuz { pointer-events: none; }
.chart .pz-kreuz line { stroke: var(--lila-tief); stroke-width: 1; opacity: .55; }
.chart .pz-kreuz circle { fill: #fff; stroke: var(--lila-mittel); stroke-width: 2; }
.chart .pz-kreuz circle.is-median { stroke: var(--lila); }
.chart .pz-kreuz-wert { font-size: 11px; font-weight: 600; fill: var(--lila-tief); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.chart .pz-kreuz-wert.is-median { font-weight: 800; fill: var(--lila-dunkel); }
svg.chart-percentile[data-pz] { cursor: crosshair; touch-action: pan-y; }
svg.chart-percentile:focus { outline: none; }
svg.chart-percentile:focus-visible { outline: 2px solid var(--lila); outline-offset: 4px; border-radius: 6px; }
@keyframes pz-ein { from { opacity: 0; transform: scaleY(.85); } to { opacity: 1; transform: none; } }
@keyframes pz-puls { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.35); opacity: .08; } }
@media (prefers-reduced-motion: reduce) {
    .chart .pz-band, .chart .pz-halo { animation: none; }
}

/* Reiter wie Karteikarten: Sie hängen direkt an der Kurvenkarte, der aktive
   verschmilzt mit ihr, die übrigen stehen als eigene Flächen daneben – so ist
   auf einen Blick klar, dass man umschalten kann (27.09.2026, Bernds Hinweis:
   als Pillen sahen sie wie Beschriftungen aus). */
.pz-reiter-kopf[hidden] { display: none; }
.pz-reiter-titel { margin: 6px 0 8px; font-size: .88rem; font-weight: 700; color: var(--lila-tief); }
.pz-reiter-titel::after { content: " ↓"; color: var(--lila); }
.pz-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 0 0 10px; border-bottom: 3px solid var(--lila); }
.pz-reiter button { font: inherit; font-weight: 700; font-size: 1rem; padding: 11px 22px 10px; margin-bottom: -1px; border: 1px solid var(--lila-hell); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--lila-flaeche); color: var(--lila-dunkel); cursor: pointer; box-shadow: inset 0 -6px 8px -6px rgba(var(--lila-schleier), .18); transition: background .15s ease, color .15s ease, transform .15s ease; }
.pz-reiter button:hover { background: var(--lila-linie); transform: translateY(-2px); }
.pz-reiter button[aria-selected="true"] { background: var(--lila); border-color: var(--lila); color: #fff; box-shadow: none; transform: none; padding-top: 13px; margin-top: -2px; }
.pz-reiter button:focus-visible { outline: 2px solid var(--lila-dunkel); outline-offset: 2px; }
[data-pz-reiter] .pz-karte { border-top: 0; border-radius: 0 0 12px 12px; }
/* Druckbild der Rechner-Ergebnisse (27.09.2026, „besser lesbar und formatiert"):
   Seitenfuß mit Seitenzahl, jede Referenz auf neuer Seite, kompakte Kurven
   (drei passen auf eine Seite), dunklerer Text, kein Farbband über ganze Seiten. */
@page {
    size: A4;
    margin: 14mm 14mm 16mm;
    @bottom-left { content: "kinderarzt.net"; font-family: "Segoe UI", Arial, sans-serif; font-size: 8pt; color: #666; }
    @bottom-right { content: "Seite " counter(page) " von " counter(pages); font-family: "Segoe UI", Arial, sans-serif; font-size: 8pt; color: #666; }
}
@media print {
    #druck-ansicht { --muted: #444; --text: #111; color: #111; line-height: 1.45; }
    #druck-ansicht p, #druck-ansicht li, #druck-ansicht td { orphans: 3; widows: 3; }
    /* Kein erzwungener Umbruch vor jeder Referenz – er ließ halbleere Seiten zurück.
       Überschrift und Einleitung bleiben dafür beim folgenden Inhalt. */
    #druck-ansicht .ref-bereich + .ref-bereich { border-top: 1px solid #d9cfe0; margin-top: 14px; padding-top: 10px; }
    #druck-ansicht .ref-titel, #druck-ansicht .ref-wer { break-after: avoid; }
    #druck-ansicht .ref-bereich-kh { background: none; margin-left: 0; margin-right: 0; padding: 0; border-radius: 0; }
    #druck-ansicht .ref-titel { font-size: 14pt; break-after: avoid; }
    #druck-ansicht .ref-wer { font-size: 9.5pt; margin-bottom: 8px; }
    #druck-ansicht .result-table { font-size: 10pt; width: 100%; }
    #druck-ansicht .result-table th, #druck-ansicht .result-table td { padding: 4px 8px; }
    #druck-ansicht .result-charts { margin-top: 8px; }
    #druck-ansicht .chart-card, #druck-ansicht .pz-karte { padding: 8px 10px 4px; margin: 0 0 8px; border: 1px solid #d9cfe0; border-radius: 8px; box-shadow: none; break-inside: avoid; }
    #druck-ansicht .chart-card figcaption { font-size: 10pt; margin-bottom: 2px; text-transform: none; letter-spacing: 0; color: #4a2a63; }
    #druck-ansicht svg.chart { display: block; width: 100%; max-height: 58mm; }
    #druck-ansicht .chart .chart-tick, #druck-ansicht .chart .chart-achse, #druck-ansicht .chart .chart-einheit { fill: #333; }
    #druck-ansicht .chart .chart-grid { stroke: #ddd; }
    #druck-ansicht .chart .chart-percentile-label { fill: #6f3a8c; }
    #druck-ansicht .chart .chart-percentile-label.is-median { fill: #4a2a63; }
    #druck-ansicht .chart .pz-halo { display: none; }
    #druck-ansicht .pz-lesehilfe { margin: 0 0 10px; padding: 6px 10px; font-size: 8.5pt; border-radius: 8px; break-inside: avoid; }
    #druck-ansicht .pz-lesehilfe-titel { font-size: 9pt; margin-bottom: 4px; }
    #druck-ansicht .pz-lesehilfe ul { grid-template-columns: repeat(4, auto); gap: 2px 14px; }
    #druck-ansicht .result-einordnung, #druck-ansicht .result-table, #druck-ansicht .stat-cards, #druck-ansicht .erg-karten { break-inside: avoid; }
}
/* Druck (auch Strg+P ohne drucken.js): alle Kurven untereinander, ohne Reiter. */
@media print {
    .pz-karte[hidden] { display: grid !important; }
    .pz-reiter-kopf, .pz-lesehilfe-tipp, .chart .pz-kreuz, .pz-ablesung { display: none !important; }
    [data-pz-reiter] .pz-karte { border-top: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; break-inside: avoid; }
    .chart .pz-band, .chart .pz-halo { animation: none; }
}

.pz-karte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 18px; padding: 16px 18px 12px; }
.pz-karte[hidden] { display: none; }
.pz-karte figcaption { grid-column: 1 / -1; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--lila-tief); }
/* Lesehilfe als Leiste unter der Kurve: Als Seitenspalte drückte sie die
   Kurve in der Inhaltsspalte auf 450 px und die Beschriftung unter 8 px. */
.pz-lesehilfe { background: var(--lila-flaeche); border: 1px solid var(--lila-linie); border-radius: 14px; padding: 12px 16px; font-size: .86rem; line-height: 1.4; margin-top: 8px; }
.pz-lesehilfe-titel { margin: 0 0 8px; font-weight: 800; color: var(--lila-tief); font-size: .92rem; }
.pz-lesehilfe ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px; }
.pz-lesehilfe li { display: flex; gap: 8px; align-items: center; }
.pz-lesehilfe li strong { white-space: nowrap; }
.pz-lesehilfe-tipp { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--lila-linie); color: var(--muted); }
.pz-lesehilfe-tipp + .pz-lesehilfe-tipp { margin-top: 0; padding-top: 2px; border-top: 0; }
.pz-muster { flex: 0 0 auto; display: inline-block; width: 22px; height: 12px; border-radius: 4px; vertical-align: -1px; }
.pz-muster-mitte { background: var(--lila-linie); }
.pz-muster-weit { background: #fff; border: 1px solid var(--lila-linie); }
.pz-muster-median { height: 3px; border-radius: 2px; background: var(--lila); align-self: center; }
.pz-muster-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--lila-tief); box-shadow: 0 0 0 4px rgba(142, 75, 175, .2); }

/* ---- Eltern-Konto: Speicher-Hinweis, Bestätigung, Passwort anzeigen (29.09.2026) ----
   .save-hint steht direkt unter der Ergebnis-Überschrift (_save-hint.php), damit
   Abgemeldete das Speichern im ersten Bildschirm sehen - der Kasten .save-box unter
   dem langen Ergebnis wurde am Handy kaum erreicht. */
.save-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--lila-hell); border-left: 4px solid var(--lila);
    box-shadow: 0 2px 8px rgba(var(--lila-schleier), .08); }
.save-hint-text { flex: 1 1 260px; margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.save-hint-text strong { color: var(--blue-dark); }
.save-hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; }
.save-hint-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.save-hint-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; color: var(--blue-dark); }
@media (max-width: 600px) {
    .save-hint { padding: 12px 14px; }
    .save-hint-actions { width: 100%; }
    .save-hint-actions .btn { flex: 1 1 auto; }
}

.resend-box { text-align: left; margin: 0 0 20px; padding: 16px 18px; border-radius: var(--radius);
    background: var(--bg-soft); border: 1px solid var(--lila-linie); max-width: 560px; }
.page-narrow.text-center .resend-box { margin-left: auto; margin-right: auto; }
.resend-titel { margin: 0 0 4px; color: var(--blue-dark); }
.resend-box .muted { margin: 0 0 12px; font-size: .92rem; overflow-wrap: anywhere; }
.resend-box .form-row { margin-bottom: 12px; }
.resend-form { margin: 0; }

.pw-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 6px;
    padding: 4px 12px; border: 1px solid var(--lila-linie); border-radius: 999px; background: #fff;
    color: var(--blue-dark); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.pw-toggle[hidden] { display: none; }
.pw-toggle::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; box-sizing: border-box; }
.pw-toggle[aria-pressed="true"] { background: var(--lila-flaeche); border-color: var(--blue); }
.pw-toggle[aria-pressed="true"]::before { background: currentColor; box-shadow: inset 0 0 0 2px #fff; }
.pw-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Ergebnistabellen der Rechner (29.09.2026): Auf 375 px waren sie breiter als
   der Schirm (Perzentil 472 px, BMI 422 px, Fach 597 px), die ganze Seite ließ
   sich seitlich verschieben. Jetzt scrollt nur die Tabelle selbst. */
@media (max-width: 640px) {
    .result-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .result-table th, .result-table td { padding: 6px 8px; }
}

/* Fallenfeld gegen Bots im Registrierformular (AuthController::botVerdacht) */
.hp-feld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Admin-Startseite ----------
   Arbeitsbereiche als Kacheln statt einer Reihe großer Pillen-Knöpfe;
   die Kontentabelle als Arbeitsliste: kleine Kopfzeile, Zahlen rechtsbündig,
   Datumswerte ohne Umbruch, Löschen zurückhaltend bis zum Hover. */
.admin-kacheln { list-style: none; margin: 4px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.admin-kachel {
    display: flex; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 12px 14px;
    background: #fff; border: 1px solid var(--lila-linie); border-radius: var(--radius); color: var(--ink); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-kachel:hover, .admin-kachel:focus-visible { border-color: var(--lila); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.admin-symbol { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
                background: var(--lila-flaeche); color: var(--lila); transition: background .15s ease, color .15s ease; }
.admin-kachel:hover .admin-symbol, .admin-kachel:focus-visible .admin-symbol { background: var(--lila); color: #fff; }
.admin-kachel-text { display: flex; flex-direction: column; min-width: 0; }
.admin-kachel strong { color: var(--lila-dunkel); font-size: .98rem; line-height: 1.3; }
.admin-kachel small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .admin-kachel:hover { transform: none; } }

.admin-stats .stat-tile { background: #fff; border-color: var(--lila-linie); border-left: 4px solid var(--lila); padding: 14px 18px; }
.admin-stats .stat-value { font-size: 1.8rem; line-height: 1.2; font-variant-numeric: tabular-nums; }

.admin-h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-anzahl { font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--lila-flaeche); color: var(--lila-dunkel); }

.admin-konten-rahmen { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-konten { width: 100%; border-collapse: collapse; font-size: .93rem; }
.admin-konten th { position: sticky; top: 0; background: var(--bg-soft); font-size: .72rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--muted); white-space: nowrap; padding: 11px 10px; }
.admin-konten td { padding: 9px 10px; vertical-align: middle; }
/* Konto-Protokoll auf /admin/nutzer/{id} (22.10.2026) */
.admin-geburt { color: var(--muted, #666); font-size: .8rem; white-space: nowrap; }
.konto-befund th { width: 14em; text-align: left; vertical-align: top; }
.konto-befund .befund-problem td { color: #a1262b; font-weight: 600; }
.konto-verlauf { font-size: .82rem; }
.konto-verlauf td { vertical-align: top; overflow-wrap: anywhere; }
.konto-verlauf .konto-vorher { color: #666; background: #fafafa; }
.konto-verlauf .konto-ereignis td:nth-child(3) { font-weight: 600; }
.konto-verlauf .konto-problem td { background: #fdecec; }
.konto-verlauf .konto-neuer-browser td { border-top: 2px solid #8e4baf; }
.admin-konten tbody tr:last-child td { border-bottom: 0; }
.admin-konten tbody tr:hover { background: var(--lila-flaeche); }
.admin-konten .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.admin-konten .datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-konten .admin-mail a { font-weight: 600; }
.admin-konten .admin-mail, .admin-konten .admin-name { white-space: nowrap; }
.admin-kuerzen { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.admin-konten .admin-name { color: var(--muted); }
.admin-konten .admin-mail .admin-kuerzen { max-width: 230px; }
.admin-konten .inline-form { margin: 0; }
.admin-rolle { padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: .88rem; color: var(--ink); cursor: pointer; }
.admin-rolle:hover, .admin-rolle:focus { border-color: var(--lila); }
.admin-aktion { text-align: right; }
.admin-loeschen { background: #fff; border: 1px solid #e3b8b8; border-radius: 8px; padding: 4px 12px; font: inherit; font-size: .85rem; font-weight: 600;
                  color: #b13b3b; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.admin-loeschen:hover, .admin-loeschen:focus-visible { color: #fff; background: #b13b3b; border-color: #b13b3b; }
/* Wahrscheinliche Bot-Konten: rot hinterlegt, damit sie beim Aufräumen auffallen. */
.admin-konten tr.admin-bot td { background: #fdeeee; color: #8a2f2f; }
.admin-konten tr.admin-bot:hover td { background: #fbe1e1; }
.admin-konten tr.admin-bot td:first-child { box-shadow: inset 4px 0 0 #c94a4a; }
.admin-konten tr.admin-bot .admin-mail a, .admin-konten tr.admin-bot .admin-name { color: #8a2f2f; font-weight: 500; }
.admin-bot-badge { background: #c94a4a; color: #fff; }
/* Löschen ohne Neuladen (admin-konten.js) */
.admin-konten tr.ist-weg td { opacity: 0; background: #fbe1e1; transition: opacity .25s ease, background .25s ease; }
.admin-konten td.ist-zusammen { padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
.admin-zusammen { overflow: hidden; transition: height .3s ease; }
.admin-protokoll tr.ist-neu td { animation: admin-neu 1.6s ease; }
@keyframes admin-neu { from { background: #fff4c7; } to { background: transparent; } }
.admin-protokoll tr.admin-protokoll-bot td { color: #8a2f2f; }
.admin-protokoll-hinweis { margin: -4px 0 12px; font-size: .9rem; }
.admin-meldung { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 300; max-width: calc(100% - 32px);
                 padding: 10px 18px; border-radius: 10px; background: #2f7a41; color: #fff; font-size: .95rem; box-shadow: 0 8px 24px rgba(0,0,0,.18);
                 opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.admin-meldung.ist-fehler { background: #b13b3b; }
.admin-meldung.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .admin-zusammen, .admin-konten tr.ist-weg td { transition: none; } .admin-protokoll tr.ist-neu td { animation: none; } }

/* ---------- Wachstumsseite der Eltern ----------
   Gewicht, Größe und BMI nach WHO groß untereinander, je mit letztem Wert
   und einem Satz zur Perzentile; alles Weitere zugeklappt darunter.
   Bewusst ohne Ampelfarben: Die Perzentile ist eine Lage, keine Note. */
.wachstum-haupt { display: flex; flex-direction: column; gap: 22px; margin: 18px 0 22px; }
.wachstum-karte { background: #fff; border: 1px solid var(--lila-linie); border-radius: 16px; padding: 20px 22px 14px; box-shadow: var(--shadow); }
.wachstum-kopf { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: start; margin-bottom: 10px; }
.wachstum-wert h3 { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lila); }
.wachstum-zahl { margin: 2px 0 0; font-size: 2.1rem; font-weight: 800; line-height: 1.15; color: var(--lila-tief); font-variant-numeric: tabular-nums; }
.wachstum-zahl small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.wachstum-wann { margin: 4px 0 0; font-size: .88rem; color: var(--muted); }
.wachstum-perzentile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 92px; padding: 10px 14px;
                       border-radius: 14px; background: var(--lila-flaeche); color: var(--lila-dunkel); text-align: center; }
.wachstum-pz { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wachstum-pz-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.wachstum-satz { grid-column: 1 / -1; margin: 6px 0 0; padding: 10px 14px; border-left: 4px solid var(--lila-hell); border-radius: 0 10px 10px 0;
                 background: var(--bg-soft); font-size: .98rem; line-height: 1.45; }
.wachstum-karte .chart-card { border: 0; padding: 0; box-shadow: none; }
.wachstum-karte .chart-card:hover, .wachstum-karte .chart-card:focus-visible { box-shadow: none; }
.wachstum-karte .chart-card figcaption { display: none; }
.wachstum-karte .chart-card svg.chart { display: block; width: 100%; height: auto; }

.wachstum-mehr { margin: 0 0 28px; border: 1px solid var(--lila-linie); border-radius: 16px; background: #fff; }
.wachstum-mehr > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 22px; cursor: pointer; list-style: none; }
.wachstum-mehr > summary::-webkit-details-marker { display: none; }
.wachstum-mehr > summary::before { content: '+'; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
                                   background: var(--lila-flaeche); color: var(--lila); font-weight: 700; align-self: center; }
.wachstum-mehr[open] > summary::before { content: '–'; }
.wachstum-mehr > summary:hover .wachstum-mehr-titel { color: var(--lila); }
.wachstum-mehr-titel { font-weight: 700; color: var(--lila-dunkel); font-size: 1.05rem; }
.wachstum-mehr-text { color: var(--muted); font-size: .9rem; }
.wachstum-mehr .chart-grid { padding: 0 18px 4px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
@media (max-width: 600px) {
    .wachstum-karte { padding: 16px 14px 10px; border-radius: 14px; }
    .wachstum-zahl { font-size: 1.7rem; }
    .wachstum-perzentile { min-width: 76px; padding: 8px 10px; }
    .wachstum-pz { font-size: 1.4rem; }
    .wachstum-mehr > summary { padding: 14px 14px; }
    .wachstum-mehr .chart-grid { padding: 0 10px 4px; }
}
/* Hinweis über einem Diagrammpunkt (site.js, „Diagrammpunkte: Hinweis beim Überfahren“) */
.chart-hinweis { position: fixed; z-index: 2100;   /* über der Zoom-Ansicht (2000) */ display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; max-width: 260px;
                 background: var(--lila-tief); color: #fff; border-radius: 10px; box-shadow: 0 8px 22px rgba(var(--lila-schleier), .28);
                 font-size: .85rem; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .08s ease; }
.chart-hinweis.ist-sichtbar { opacity: 1; }
.chart-hinweis strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.chart-hinweis span { color: var(--lila-flaeche); }
.chart .chart-point.ist-aktiv .chart-dot { fill: var(--lila-dunkel); stroke: var(--lila-dunkel); stroke-width: 3; }

/* Zoom der Zeitachse (site.js, „Diagramme zoomen“) */
.chart-zoom-rahmen { position: relative; }
.chart-zoom-lauf { position: relative; height: 14px; margin-top: 4px; display: none; border-radius: 7px; background: var(--lila-flaeche); box-shadow: inset 0 0 0 1px var(--lila-hell); cursor: pointer; touch-action: none; }
.chart-zoom-daumen { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; background: var(--lila-mittel); cursor: grab; }
.chart-zoom-daumen:hover, .chart-zoom-daumen.ist-am-ziehen { background: var(--lila); }
.chart-zoom-daumen.ist-am-ziehen { cursor: grabbing; }
.chart-zoom-rahmen.ist-gezoomt .chart-zoom-lauf { display: block; }
.chart-zoom { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.chart-zoom-name { font-size: .82rem; color: var(--muted); margin-right: 2px; }
.chart-zoom-knopf { width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--lila-mittel); border-radius: 50%; background: #fff; color: var(--lila-tief);
                    font-family: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer; }
.chart-zoom-knopf:hover:not(:disabled) { background: var(--lila-flaeche); }
.chart-zoom-knopf:disabled { opacity: .35; cursor: default; }
.chart-zoom-knopf:focus-visible, .chart-zoom-schieber:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
.chart-zoom-schieber { width: min(220px, 40vw); accent-color: var(--lila); cursor: pointer; }
/* In schmalen Karten schrumpft der Schieber, statt die Leiste links aus der Karte zu schieben. */
.chart-zoom { min-width: 0; }
.chart-zoom-schieber { flex: 0 1 220px; width: auto; min-width: 48px; }
/* Admin-Kundenansicht: Perzentilkurven brauchen Breite, also eine je Zeile, sonst werden die Achsen unlesbar. */
.admin-chart-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr)); }
.chart-zoom-rahmen.ist-gezoomt svg.chart { -webkit-user-select: none; user-select: none; }
@media (pointer: fine) { .chart-zoom-rahmen.ist-gezoomt svg.chart:not([data-pz]) { cursor: grab; } }
.chart-zoom-rahmen.ist-am-ziehen svg.chart { cursor: grabbing; }
@media print { .chart-zoom, .chart-zoom-lauf { display: none !important; } }
/* Dashboard „Jetzt typisch“: Kann es schon / Noch nicht (02.10.2026) */
.ms-jetzt { margin: 18px 0 0; font-size: .9rem; }
.ms-jetzt-liste { list-style: none; margin: 0; padding: 0; }
.ms-jetzt-eintrag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.ms-jetzt-eintrag:last-child { border-bottom: 0; }
.ms-jetzt-titel { margin: 0; min-width: 0; }
.ms-jetzt-alter { font-size: .82rem; color: var(--muted); margin-left: 6px; }
.ms-jetzt .btn-sm { padding: 4px 12px; font-size: .82rem; min-height: 0; }
.ms-jetzt-nein { background: none; border: 0; min-height: 36px; padding: 4px 8px; font: inherit; font-size: .82rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.ms-jetzt-nein:hover { color: var(--lila); }
.ms-jetzt-aktion { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.ms-jetzt-aktion form { margin: 0; }
.ms-jetzt-kann > summary { list-style: none; cursor: pointer; }
.ms-jetzt-kann > summary::-webkit-details-marker { display: none; }
.ms-jetzt-kann[open] { flex-basis: 100%; }
/* Aufgeklappt: Titel oben, Auswahl darunter über die volle Breite */
.ms-jetzt-eintrag:has(.ms-jetzt-kann[open]) { flex-direction: column; align-items: stretch; }
.ms-jetzt-kann[open] > summary { display: none; }
.ms-seit fieldset { margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.ms-seit legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.ms-seit-wahl { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 0; cursor: pointer; }
.ms-seit-wahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--lila); }
.ms-seit-datum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: .92rem; color: var(--muted); }
.ms-seit-datum input { width: auto; max-width: 100%; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background-color: #fff; color: var(--ink); }
.ms-noch-nicht { font-size: .82rem; color: var(--muted); margin-right: 8px; }
/* Rechner-Speicherkasten für Konten ohne Kind (20.10.2026): .inline-form ist weiter oben auf display:inline gesetzt */
.save-neu .inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.save-neu .inline-form input { flex: 1 1 12em; min-width: 0; max-width: 100%; font-size: 16px; }
/* Gründe für Akuttermine pflegen (KIN-97), /admin/online-buchung */
.admin-gruende { list-style: decimal; padding-left: 1.6em; margin: 0 0 16px; }
.admin-grund { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
.admin-grund.is-ausgeblendet { opacity: .6; }
.admin-grund-name { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 18rem; min-width: 0; margin: 0; }
.admin-grund-name input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.admin-grund-knopf { margin: 0; }
.admin-grund-hinweis { font-size: .85rem; color: var(--muted, #666); }
.admin-grund-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-grund-neu input[type="text"] { flex: 1 1 14rem; min-width: 0; }