/* =========================================================================
   Kinderarzt Dr. Monika Peter – Stylesheet
   Farbwelt von kinderarzt.net (Violett #8e4baf)
   ========================================================================= */

:root {
    /* Farben von kinderarzt.net (Violett #8e4baf). Die Variablennamen sind historisch. */
    --blue:        #8e4baf;
    --blue-dark:   #6f3a8c;
    --blue-light:  #f3ecf8;
    --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(110, 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; }
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; }
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; }

/* ---------- 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; }

.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; }
@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; }
.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; }
.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 */

/* ---------- 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; }
.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(110,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; }
.article-body .toc li { margin-bottom: 5px; break-inside: avoid; }
.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: 100px; 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: #cfc6d8; 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: #c9a9dc; }
.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: #4a2a63; }
.fig-light { fill: #b08fc7; }
.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; }

/* ---------- Interaktive Artikel-Grafiken (Schlafzyklus-Nacht, Chronotyp-Uhr) ---------- */
.article-figure .fig-intro { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
.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; }
.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: #4a2a63; }
.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); }
.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(110,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; }
.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; }
/* 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; }
.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 #e7dcf0; 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(200px, 1fr)); gap: 8px 24px; }
.emergency-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #4a2424; padding: 4px 0; }
.emg-label { color: #e0c4c4; font-size: .92rem; }
.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: #efe9f3; 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: #d7bde8; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Footer / Kontaktblock ---------- */
.site-footer { background: #332b39; color: #ded7e4; margin-top: 60px; padding: 50px 0 24px; }
.site-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.site-footer a { color: #d7bde8; }
.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: #8d8296; 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; }
.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 #e7dcf0; 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: var(--green-dark); }
.badge-due { background: #fff3df; color: #a86a14; }
.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; }
.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); }

.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; }
.chart.chart-percentile .chart-area { fill: var(--blue-light); opacity: .55; }
.chart .chart-percentile-line { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.chart .chart-percentile-line.is-median { stroke-dasharray: none; opacity: .85; }
.chart .chart-percentile-label { font-size: 9px; fill: var(--muted); }

.growth-lightbox { position: fixed; inset: 0; background: rgba(20, 15, 30, .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: 720px; width: 100%; max-height: 90vh; 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; }
.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; }
.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: #d9c3e8;
    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: #c05a86; --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); }

.child-tile {
    /* Akzentfarbe je Kind – nur noch als Akzent an Avatar-Ring und Name */
    --tile-accent: var(--blue-dark);
    --tile-accent-line: #d9c3e8;
    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: #c05a86; --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%; }
.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); }
.child-sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 18px; }
.child-sections a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: .95rem; color: var(--ink); }
.child-sections a:hover { text-decoration: none; background: var(--bg-soft); }
.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: 8px; }
.child-more summary { cursor: pointer; padding: 6px 10px; font-size: .88rem; color: var(--muted); }
.child-more summary:hover { color: var(--blue); }
.child-more .child-sections { margin-top: 4px; }
.child-more .child-sections a { color: var(--muted); }
.child-more .child-sections a:hover { color: var(--ink); }

.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 ---------- */
.portal-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 26px; align-items: center; }
.portal-text p { margin-top: 0; }
.portal-list { margin: 0 0 18px; padding-left: 1.1em; color: var(--muted); font-size: .95rem; }
.portal-list li { margin-bottom: 4px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.portal-figure { margin: 0; }
.portal-figure svg { width: 100%; height: auto; display: block; }
.portal-figure figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.promo-bg { fill: var(--bg-soft); }
.promo-band { fill: var(--blue-light); }
.promo-grid line { stroke: var(--line); stroke-width: 1; }
.promo-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.promo-dots circle { fill: #fff; stroke: var(--blue-dark); stroke-width: 2; }
.promo-label { font-size: 10px; fill: var(--muted); }
@media (max-width: 720px) { .portal-promo { grid-template-columns: 1fr; } }


/* ---------- 24-Stunden-Schlafprotokoll ---------- */
.state-sleep    { --state-color: #6f3a8c; }   /* Schlaf */
.state-awake    { --state-color: #f3ecf8; }   /* 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(30,20,40,.25); max-width: 380px; width: calc(100% - 40px);
}
dialog.app-dialog::backdrop { background: rgba(30,20,40,.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);
}

/* ---------- 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(110, 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; }

/* ---------- 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;
    }
    .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;
    }
    .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: #4a2a63; }
.day-block-nap { fill: #8e4baf; opacity: .85; }
.day-block-wake { fill: #f6f1fa; 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: #4a2a63; }
.fig-legend-swatch-nap { background: #8e4baf; }
.fig-legend-swatch-awake { background: #f6f1fa; 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: #8e4baf; opacity: .2; }
.crib-hotspot line.hs-leader { stroke: #6f3a8c; stroke-width: 1.4; opacity: .55; }
.crib-hotspot circle.hs-leader-end { fill: #6f3a8c; opacity: .7; }
.crib-hotspot.active line.hs-leader, .crib-hotspot.active circle.hs-leader-end { opacity: 1; }
.crib-hotspot circle.hs-dot { fill: #8e4baf; 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: #6f3a8c; }
.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: #b08fc7; stroke-width: 5; stroke-linejoin: round; }
.crib-bar { stroke: #c9a9dc; stroke-width: 3.5; stroke-linecap: round; }
.crib-mattress { fill: #efe7f5; stroke: var(--line); stroke-width: 1.5; }
.crib-body { fill: #fff; stroke: var(--muted); stroke-width: 1.5; }
.crib-sack { fill: #f3ecf8; stroke: #8e4baf; stroke-width: 1.5; }
.crib-room { fill: #fcfafd; 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: #8e4baf; opacity: .16; }
.caf-line { fill: none; stroke: #8e4baf; stroke-width: 2.5; stroke-linecap: round; }
.caf-bedline { stroke: #6f3a8c; 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: #c9a9dc; }
.fig-legend-swatch-cafline { background: #8e4baf; }

/* ---------- 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: #8e4baf; opacity: .85; }
.ev-bed-line { stroke: #6f3a8c; stroke-width: 2; }
.ev-bed-label { font-size: 11px; fill: #6f3a8c; 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: #c9a9dc; }
.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) */
.badge { background: #e6f6ea; color: var(--green-dark); }
.badge-muted { background: #efeaf4; color: var(--muted); }

.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; }
.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; }

@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; }

/* 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);
}