/* ==========================================================================
   Pflege – kurz und leicht erklärt
   Gemeinsames Stylesheet für alle Seiten
   Stand: August 2026
   --------------------------------------------------------------------------
   Aufbau:
   1. Farben & Grundlagen        6. Karten & Textbausteine
   2. Barrierefreiheit           7. Rechner & Werkzeuge
   3. Kopfbereich                8. Glossar & Suche
   4. Navigation                 9. Druckvorlagen
   5. Werkzeugleiste            10. Fußbereich & Cookie-Hinweis
   ========================================================================== */

/* ------------------------------------------------------- 1. Grundlagen -- */
:root {
  --green: #2c6fb5;
  --green-dark: #1f4e80;
  --green-light: #e6eff7;
  --bg: #f7f9fc;
  --text: #2d2d2d;
  --text-soft: #555;
  --card: #ffffff;
  --border: #d8e1ec;
  --font-head: Georgia, "Times New Roman", serif;
  --rot: #c0504d;
  --rot-dunkel: #a3231f;
  --rot-hell: #fdecea;
  --gelb: #d4a843;
  --gelb-hell: #fff8e8;
  --gelb-text: #6b5a2e;
  --gruen-echt: #2c9c78;
}

html { font-size: clamp(15px, 1.15vw, 20px); scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1.125rem;
}

main { max-width: 60rem; margin: 0 auto; padding: 2.4rem 1.5rem 4.4rem; }

h2 {
  font-family: var(--font-head); color: var(--green-dark);
  font-size: 1.75rem; margin-bottom: 8px; letter-spacing: -0.2px;
}

.intro {
  color: var(--text-soft); font-size: 1.08rem; margin-bottom: 32px;
  padding-bottom: 22px; border-bottom: 2px solid var(--border);
}

.breadcrumb { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 14px; }
.breadcrumb a { color: var(--green); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* -------------------------------------------------- 2. Barrierefreiheit -- */

/* Sprunglink für Tastatur- und Screenreader-Nutzung */
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--green-dark); padding: 0.8rem 1.2rem;
  font-weight: 700; border: 3px solid var(--green); border-radius: 0 0 8px 0;
}
.skiplink:focus { left: 0; }

/* Sichtbarer Fokusrahmen auf allen bedienbaren Elementen */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Schriftgröße – umschaltbar über die Werkzeugleiste */
html[data-schrift="gross"]  { font-size: clamp(17px, 1.35vw, 23px); }
html[data-schrift="groesser"] { font-size: clamp(19.5px, 1.6vw, 27px); }

/* Dunkelmodus – umschaltbar über die Werkzeugleiste.
   Alle Farbpaare erreichen WCAG-Stufe AAA (mindestens 7:1).            */
html[data-modus="dunkel"] {
  color-scheme: dark;
  --green: #8ec5f5;          /* Links und Akzente */
  --green-dark: #a9d3f7;     /* Überschriften */
  --green-light: #232e3b;    /* getönte Flächen */
  --bg: #161c24;
  --card: #1e252f;
  --text: #f2f5f9;
  --text-soft: #d6dde5;
  --border: #3a4553;
  --rot: #e0837e;
  --rot-dunkel: #f2a9a4;
  --rot-hell: #2b1a19;
  --gelb: #e0bd6a;
  --gelb-hell: #2a2418;
  --gelb-text: #f5dda6;
  --gruen-echt: #6ecfa8;
}

/* Grundflächen */
html[data-modus="dunkel"] body { background: var(--bg); color: var(--text); }

/* Auf dunklem Grund wirken dünne Buchstaben dünner, als sie sind
   (Irradiation). Etwas mehr Strichstärke gleicht das aus – nur im
   Fließtext, damit die Serifenüberschriften nicht klobig werden. */
html[data-modus="dunkel"] p,
html[data-modus="dunkel"] li,
html[data-modus="dunkel"] dd,
html[data-modus="dunkel"] dt,
html[data-modus="dunkel"] td,
html[data-modus="dunkel"] th,
html[data-modus="dunkel"] figcaption,
html[data-modus="dunkel"] label { font-weight: 500; }
html[data-modus="dunkel"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html[data-modus="dunkel"] header {
  background: linear-gradient(135deg, #0d1926 0%, #14283d 55%, #1b3a56 100%);
}
html[data-modus="dunkel"] #hauptnav,
html[data-modus="dunkel"] .nav-toggle { background: #0f1824; }
html[data-modus="dunkel"] .nav-panel { background: var(--card); border-color: var(--border); }
html[data-modus="dunkel"] .werkzeugleiste { background: var(--card); border-color: var(--border); }
html[data-modus="dunkel"] footer { background: #0d1926; }

/* Kästen und Karten */
html[data-modus="dunkel"] .card,
html[data-modus="dunkel"] .werkzeug-karte,
html[data-modus="dunkel"] .duo-box,
html[data-modus="dunkel"] .grafik,
html[data-modus="dunkel"] .formular,
html[data-modus="dunkel"] .rechner,
html[data-modus="dunkel"] .start-box,
html[data-modus="dunkel"] .autor,
html[data-modus="dunkel"] .video-wrap,
html[data-modus="dunkel"] .bald,
html[data-modus="dunkel"] .krank-item,
html[data-modus="dunkel"] .grid-item,
html[data-modus="dunkel"] .organ-kachel,
html[data-modus="dunkel"] .beispiel {
  background: var(--card); border-color: var(--border); box-shadow: none;
}
html[data-modus="dunkel"] .weiter,
html[data-modus="dunkel"] .seiten-toc,
html[data-modus="dunkel"] .start-link,
html[data-modus="dunkel"] .artikel-leiste,
html[data-modus="dunkel"] .az-leiste a,
html[data-modus="dunkel"] .card th { background: var(--green-light); }
html[data-modus="dunkel"] .seiten-toc a,
html[data-modus="dunkel"] .organ-leiste a,
html[data-modus="dunkel"] .knopf.sekundaer,
html[data-modus="dunkel"] .balken { background: var(--card); border-color: var(--border); }

/* Farbige Hinweisboxen */
html[data-modus="dunkel"] .merksatz,
html[data-modus="dunkel"] .gegen-ja { background: #182b24; color: #a6ebcd; }
html[data-modus="dunkel"] .alert,
html[data-modus="dunkel"] .gegen-nein { background: var(--rot-hell); color: #f7bfbb; }
html[data-modus="dunkel"] .note { background: var(--gelb-hell); color: var(--gelb-text); }
html[data-modus="dunkel"] .merksatz strong,
html[data-modus="dunkel"] .gegen-ja strong { color: #a8ecd0; }
html[data-modus="dunkel"] .alert strong,
html[data-modus="dunkel"] .gegen-nein strong { color: #f8c4c0; }
html[data-modus="dunkel"] .fast-box { background: var(--card); border-color: var(--rot); }
html[data-modus="dunkel"] .fast-box p,
html[data-modus="dunkel"] .fast-box strong { color: var(--rot-dunkel); }

/* Bedienelemente */
html[data-modus="dunkel"] .suchfeld,
html[data-modus="dunkel"] input,
html[data-modus="dunkel"] select,
html[data-modus="dunkel"] textarea {
  background: var(--card); color: var(--text); border-color: var(--border);
}
html[data-modus="dunkel"] .wl-knopf { background: var(--green-light); color: var(--text); border-color: var(--border); }
html[data-modus="dunkel"] .such-treffer mark { background: #e8c86a; color: #161c24; }
html[data-modus="dunkel"] .skiplink { background: var(--card); color: var(--green-dark); }
html[data-modus="dunkel"] a:focus-visible,
html[data-modus="dunkel"] button:focus-visible,
html[data-modus="dunkel"] input:focus-visible { outline-color: #f0b429; }

/* Flächen mit fest verdrahteter heller Farbe – ohne diese Regeln
   stünde helle Schrift auf hellem Grund. */
html[data-modus="dunkel"] .hero {
  background: linear-gradient(135deg, #1d2836 0%, #223447 100%);
  border: 1px solid var(--border);
}
html[data-modus="dunkel"] .hero h2 { color: var(--green-dark); }
html[data-modus="dunkel"] .hero p { color: var(--text); }
html[data-modus="dunkel"] .hero-sub { color: var(--green); opacity: 1; }

html[data-modus="dunkel"] .krank-feature {
  background: linear-gradient(135deg, #2b1e1d 0%, #33211f 100%);
  border-color: var(--border);
}
html[data-modus="dunkel"] .krank-feature h3 { color: #f2b9b4; }
html[data-modus="dunkel"] .krank-feature p { color: var(--text-soft); }

html[data-modus="dunkel"] #hauptnav .nav-panel,
html[data-modus="dunkel"] #hauptnav .nav-panel.breit,
html[data-modus="dunkel"] .werkzeugleiste,
html[data-modus="dunkel"] .grafik,
html[data-modus="dunkel"] .rechner,
html[data-modus="dunkel"] .optionen label,
html[data-modus="dunkel"] .glossar-eintrag,
html[data-modus="dunkel"] .such-treffer .treffer,
html[data-modus="dunkel"] .yt-box a,
html[data-modus="dunkel"] .chips a,
html[data-modus="dunkel"] .video-card,
html[data-modus="dunkel"] .az-leiste,
html[data-modus="dunkel"] .feld select,
html[data-modus="dunkel"] .feld input[type="number"],
html[data-modus="dunkel"] .feld input[type="text"] {
  background: var(--card); color: var(--text); border-color: var(--border);
}
html[data-modus="dunkel"] .stand,
html[data-modus="dunkel"] .ergebnis.leer,
html[data-modus="dunkel"] table tr.alt { background: var(--green-light); color: var(--text-soft); }
html[data-modus="dunkel"] #hauptnav .nav-panel a { color: var(--text); }
html[data-modus="dunkel"] #hauptnav .nav-panel a:hover,
html[data-modus="dunkel"] #hauptnav .nav-panel a:focus { background: var(--green-light); color: var(--green-dark); }
html[data-modus="dunkel"] .profil-kreis img { background: var(--card); }

/* Bilder etwas abdunkeln, damit sie nicht blenden */
html[data-modus="dunkel"] img:not(.profil-kreis img) { filter: brightness(0.92); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------ 3. Kopfbereich -- */
header {
  background: linear-gradient(135deg, #1f4e80 0%, #2c6fb5 55%, #4a9fd8 100%);
  color: #fff; padding: 34px 20px 26px; text-align: center;
}
header h1 {
  font-family: var(--font-head); font-size: 2.1rem;
  font-weight: 700; letter-spacing: -0.3px;
}
header h1 a { color: #fff; text-decoration: none; }
header p { font-size: 1.05rem; opacity: 0.92; margin-top: 8px; font-weight: 300; letter-spacing: 0.3px; }

/* ------------------------------------------------------- 4. Navigation -- */
/* Hohe Spezifität über die ID, damit ältere Seiten mit eigenem
   nav-CSS zuverlässig überschrieben werden.                              */

.nav-toggle {
  display: none; width: 100%; background: var(--green-dark); color: #fff;
  border: none; font-family: inherit; font-size: 1.05rem; font-weight: 600;
  padding: 0.85rem 1rem; cursor: pointer; text-align: left;
  position: sticky; top: 0; z-index: 21;
}
.nav-toggle span { float: right; opacity: 0.85; font-weight: 400; font-size: 0.9rem; }

#hauptnav {
  background: var(--green-dark);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: block;
}

#hauptnav .nav-liste {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  max-width: 78rem; gap: 0;
}

#hauptnav .nav-liste > li { position: relative; }

#hauptnav .nav-liste > li > a,
#hauptnav .nav-knopf {
  display: block; color: #e6eff7; background: none; border: none;
  font-family: inherit; font-size: 0.98rem; line-height: 1.4;
  padding: 14px 16px; text-decoration: none; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}

#hauptnav .nav-liste > li > a:hover,
#hauptnav .nav-knopf:hover { background: rgba(255,255,255,0.1); color: #fff; }

#hauptnav .nav-liste > li > a.active,
#hauptnav .nav-knopf.active {
  background: var(--bg); color: var(--green-dark);
  font-weight: 600; border-bottom: 3px solid var(--green);
}

#hauptnav .nav-knopf .pfeil {
  display: inline-block; margin-left: 6px; font-size: 0.7em;
  transform: translateY(-1px); opacity: 0.8;
}
#hauptnav .nav-gruppe.offen > .nav-knopf .pfeil { transform: translateY(-1px) rotate(180deg); }

/* Aufklapp-Bereich */
#hauptnav .nav-panel {
  display: none; position: absolute; top: 100%; left: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--green);
  border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(31,78,128,0.22);
  padding: 14px 8px; min-width: 17rem;
}
#hauptnav .nav-gruppe.offen > .nav-panel { display: block; }

/* Zwei Spalten für große Bereiche */
#hauptnav .nav-panel.breit { min-width: 34rem; display: none; }
#hauptnav .nav-gruppe.offen > .nav-panel.breit { display: grid; }
#hauptnav .nav-panel.breit { grid-template-columns: 1fr 1fr; gap: 0 10px; }
#hauptnav .nav-panel.dreispaltig { min-width: 50rem; grid-template-columns: 1fr 1fr 1fr; }

/* Panels am rechten Rand nach innen ausrichten */
#hauptnav .nav-liste > li:nth-last-child(-n+3) .nav-panel { left: auto; right: 0; }

#hauptnav .nav-panel a {
  display: block; color: var(--text); background: none;
  padding: 7px 14px; font-size: 0.94rem; line-height: 1.35;
  text-decoration: none; border: none; border-radius: 6px;
}
#hauptnav .nav-panel a:hover,
#hauptnav .nav-panel a:focus { background: var(--green-light); color: var(--green-dark); }
#hauptnav .nav-panel a.active { background: var(--green-light); color: var(--green-dark); font-weight: 700; }

#hauptnav .nav-titel {
  display: block; font-family: var(--font-head); color: var(--green-dark);
  font-size: 0.86rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 10px 14px 4px; opacity: 0.75;
}
#hauptnav .nav-spalte + .nav-spalte .nav-titel { padding-top: 10px; }
#hauptnav .nav-spalte a + .nav-titel { padding-top: 12px; }

/* Handy-Ansicht */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  #hauptnav { display: none; position: static; box-shadow: none; }
  #hauptnav.open { display: block; }
  #hauptnav .nav-liste { flex-direction: column; align-items: stretch; }
  #hauptnav .nav-liste > li > a,
  #hauptnav .nav-knopf {
    width: 100%; text-align: left; padding: 0.85rem 1.2rem; font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  #hauptnav .nav-knopf { display: flex; justify-content: space-between; align-items: center; }
  #hauptnav .nav-panel,
  #hauptnav .nav-panel.breit {
    position: static; box-shadow: none; border: none; border-radius: 0;
    min-width: 0; width: 100%; padding: 6px 0 10px;
    background: #f0f5fa; grid-template-columns: 1fr;
  }
  #hauptnav .nav-liste > li:nth-last-child(-n+3) .nav-panel { right: auto; left: auto; }
  #hauptnav .nav-panel a { padding: 0.6rem 2rem; font-size: 0.98rem; border-radius: 0; }
  #hauptnav .nav-titel { padding: 8px 2rem 2px; }
  #hauptnav .nav-gruppe.offen > .nav-panel.breit { display: block; }
  #hauptnav .nav-panel.dreispaltig { min-width: 0; }
}

/* --------------------------------------------------- 5. Werkzeugleiste -- */
.werkzeugleiste {
  background: #fff; border-bottom: 1px solid var(--border);
}
.werkzeugleiste-inner {
  max-width: 60rem; margin: 0 auto; padding: 0.5rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  justify-content: space-between;
}
.wl-knopf {
  font-family: inherit; font-size: 0.85rem; color: var(--green-dark);
  background: var(--green-light); border: 1px solid var(--border);
  padding: 0.35rem 0.8rem; border-radius: 2rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.wl-knopf:hover { background: #d4e6f5; }
.wl-knopf[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.wl-knopf:disabled { opacity: 0.4; cursor: default; }
.wl-knopf:disabled:hover { background: var(--green-light); }
.wl-gruppe { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.wl-gruppe .wl-label { font-size: 0.82rem; color: var(--text-soft); }

@media (max-width: 600px) {
  .werkzeugleiste-inner { padding: 0.5rem 1rem; }
  .wl-gruppe .wl-label { display: none; }
}

/* --------------------------------------------- 6. Karten & Bausteine -- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 28px; margin-bottom: 22px; box-shadow: 0 2px 6px rgba(31,78,128,0.06);
}
.card h3 { font-family: var(--font-head); color: var(--green); font-size: 1.28rem; margin-bottom: 10px; }
.card p { color: var(--text-soft); margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card ul, .card ol { margin: 10px 0 0 22px; color: var(--text-soft); }
.card li { margin-bottom: 6px; }
.card a { color: var(--green); }

/* Variante mit betonter Überschrift (Krankheitsseiten) */
.card.gross h3 {
  color: var(--green-dark); font-size: 1.45rem; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 3px solid var(--green-light);
  letter-spacing: -0.2px;
}
.card h4 {
  color: var(--green); font-size: 1.12rem; font-weight: 700;
  margin: 22px 0 8px; padding-left: 12px; border-left: 4px solid var(--green);
}

.note {
  background: var(--gelb-hell); border-left: 4px solid var(--gelb); padding: 16px 20px;
  border-radius: 6px; margin-top: 24px; color: var(--gelb-text); font-size: 0.96rem;
}
.note-top { margin-top: 0; margin-bottom: 24px; }
.note a { color: var(--gelb-text); font-weight: 600; }

.alert {
  background: var(--rot-hell); border-left: 4px solid var(--rot); padding: 18px 22px;
  border-radius: 6px; margin: 22px 0; color: #7d2b28; font-size: 0.98rem;
}
.alert strong { color: var(--rot-dunkel); }
.alert ul { margin: 10px 0 0 22px; }
.alert li { margin-bottom: 5px; }
.alert a { color: #7d2b28; font-weight: 600; }

.merksatz {
  background: var(--green-light); border-radius: 10px; padding: 18px 22px;
  margin: 18px 0; text-align: center;
}
.merksatz strong {
  font-family: var(--font-head); font-size: 1.3rem; color: var(--green-dark);
  display: block; margin-bottom: 6px;
}
.merksatz p { color: var(--text-soft); font-size: 0.95rem; margin: 0; }

.phase { border-left: 4px solid var(--green-light); padding-left: 18px; margin: 6px 0 20px; }
.phase h4 {
  color: var(--green-dark); font-family: var(--font-head); font-size: 1.15rem;
  margin: 0 0 6px; padding-left: 0; border-left: none;
}

.weiter { background: var(--green-light); border-radius: 12px; padding: 20px 24px; margin-top: 28px; }
.weiter h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.15rem; margin-bottom: 10px; }
.weiter a { color: var(--green-dark); font-weight: 600; }

.tag {
  display: inline-block; background: var(--green-light); color: var(--green-dark);
  font-size: 0.82rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}

/* Zwei Kästen nebeneinander */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 6px; }
.duo-box { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.duo-head { color: #fff; font-weight: 700; padding: 10px 14px; font-size: 0.98rem; }
.duo-body { padding: 12px 14px; font-size: 0.9rem; color: var(--text-soft); }
.duo-body ul { margin: 4px 0 0 18px; }
.duo-body li { margin-bottom: 4px; }

/* Tabellen */
.tbl-wrap { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
table th { background: var(--green-light); padding: 10px 12px; border: 1px solid var(--border); text-align: left; color: var(--green-dark); }
table td { padding: 10px 12px; border: 1px solid var(--border); color: var(--text-soft); }
table tr.alt { background: #f7f9fc; }
table td.c { text-align: center; }

/* Zeitleiste */
.tl { list-style: none; margin: 14px 0 0 6px; padding-left: 20px; border-left: 3px solid var(--green-light); }
.tl li { position: relative; padding: 0 0 16px 12px; color: var(--text-soft); font-size: 0.95rem; }
.tl li:last-child { padding-bottom: 2px; }
.tl li::before {
  content: ""; position: absolute; left: -29px; top: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--green-light);
}
.tl li.tl-open::before { background: #c98a1e; }
.tl li strong { color: var(--text); }

/* Grafiken */
.grafik { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 16px 12px; margin: 18px 0 6px; }
.grafik svg { width: 100%; height: auto; display: block; }
.grafik figcaption { color: var(--text-soft); font-size: 0.88rem; text-align: center; margin-top: 10px; font-style: italic; }

/* Schritt-für-Schritt-Liste */
.schritte { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: schritt; }
.schritte li {
  position: relative; counter-increment: schritt;
  padding: 0 0 14px 3rem; color: var(--text-soft);
}
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.schritte li strong { color: var(--text); }

/* Ja/Nein-Gegenüberstellung */
/* zwei Spalten nur, wenn genug Platz ist – sonst untereinander (Handy, große Schrift) */
.gegen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 14px; margin-top: 14px; }
.gegen-box { border-radius: 10px; padding: 14px 18px; font-size: 0.94rem; min-width: 0; }
.gegen-ja { background: #eaf6f1; border-left: 4px solid var(--gruen-echt); color: #1f5c48; }
.gegen-nein { background: var(--rot-hell); border-left: 4px solid var(--rot); color: #7d2b28; }
.gegen-box strong { display: block; margin-bottom: 6px; }
.gegen-box ul { margin: 6px 0 0 18px; }

/* Raster für Übersichtsseiten */
/* Spaltenbreite in rem (bei Standardschrift ≈ 230 px): wächst mit Schriftgröße und großen Bildschirmen mit. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 16px; margin-top: 22px; }
.grid-item {
  background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--green);
  border-radius: 10px; padding: 18px 20px; text-decoration: none; display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}
.grid-item:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(44,111,181,0.15); }
.grid-item h4 { color: var(--green-dark); font-size: 1.1rem; margin-bottom: 6px; }
.grid-item p { color: var(--text-soft); font-size: 0.95rem; margin: 0; }
.grid-item .mehr { display: inline-block; margin-top: 10px; color: var(--green); font-size: 0.88rem; font-weight: 700; }

.group-title {
  font-family: var(--font-head); font-size: 1.25rem; color: var(--green-dark); font-weight: 700;
  margin: 34px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--border);
}
.group-sub { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 6px; }

/* Quellen- und Standangabe */
.stand {
  margin-top: 30px; padding: 14px 18px; border-radius: 8px;
  background: #eef3f8; border: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text-soft); line-height: 1.55;
}
.stand strong { color: var(--green-dark); }
.stand a { color: var(--green); }

/* Kasten "Aus der Praxis": Erfahrung des Autors, in der Ich-Form (seit September 2026) */
.praxis {
  margin: 20px 0 4px; padding: 16px 20px 14px; border-radius: 10px;
  background: var(--green-light); border-left: 4px solid var(--gruen-echt);
}
.praxis p { color: var(--text); margin: 0 0 10px; }
.praxis .praxis-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-dark); margin-bottom: 6px;
}
.praxis .praxis-autor {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 0.88rem; color: var(--text-soft);
}
.praxis .praxis-autor img { border-radius: 50%; object-fit: cover; flex: none; }
.praxis .praxis-autor a { color: var(--green-dark); font-weight: 600; }
@media print {
  .praxis { background: none; border-left: 2pt solid #999; padding: 4pt 0 4pt 10pt; break-inside: avoid; }
  .praxis .praxis-autor img { display: none; }
}

/* Quellenverzeichnis am Seitenende (seit September 2026) */
.quellen {
  margin-top: 28px; padding: 18px 22px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 0.9rem; color: var(--text-soft); line-height: 1.55;
}
.quellen h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.15rem; margin-bottom: 6px; }
.quellen p { margin-bottom: 10px; }
.quellen ol { margin: 0 0 0 1.4rem; padding: 0; }
.quellen li { margin-bottom: 7px; padding-left: 2px; overflow-wrap: anywhere; }
.quellen li:last-child { margin-bottom: 0; }
.quellen a { color: var(--green); font-weight: 600; }
.quellen cite { font-style: normal; font-weight: 600; color: var(--text); }
@media print {
  .quellen { border: none; padding: 0; margin-top: 12pt; font-size: 8.5pt; }
  .quellen a { font-weight: 600; color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------ 7. Werkzeuge -- */
.rechner { background: #fff; border: 2px solid var(--green-light); border-radius: 12px; padding: 24px 26px; margin-bottom: 22px; }
.rechner h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.3rem; margin-bottom: 6px; }
.rechner .hinweis { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 18px; }

.frage { border-top: 1px solid var(--border); padding: 16px 0 4px; }
.frage:first-of-type { border-top: none; }
.frage legend, .frage .frage-text {
  font-weight: 700; color: var(--text); font-size: 1rem;
  margin-bottom: 4px; display: block;
}
.frage .erlaeuterung { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 10px; }
.optionen { display: flex; flex-wrap: wrap; gap: 8px; border: none; padding: 0; margin: 0; }
.optionen label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--border); border-radius: 2rem;
  padding: 0.4rem 0.9rem; font-size: 0.92rem; color: var(--text-soft);
  cursor: pointer; background: #fff;
}
.optionen label:hover { background: var(--green-light); }
.optionen input { accent-color: var(--green); width: 1.05rem; height: 1.05rem; }
.optionen input:checked + span { font-weight: 700; color: var(--green-dark); }

.ergebnis {
  margin-top: 22px; padding: 20px 24px; border-radius: 10px;
  background: var(--green-light); border: 2px solid var(--green);
}
.ergebnis h4 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.25rem; margin-bottom: 8px; padding: 0; border: none; }
.ergebnis .punktzahl { font-size: 2.2rem; font-weight: 700; color: var(--green-dark); font-family: var(--font-head); line-height: 1.1; }
.ergebnis .grad { font-size: 1.1rem; font-weight: 700; color: var(--green-dark); margin: 6px 0 10px; }
.ergebnis p { color: var(--text-soft); font-size: 0.95rem; margin-bottom: 8px; }
.ergebnis.leer { background: #f1f4f8; border-color: var(--border); }

.balken { height: 14px; border-radius: 7px; background: #fff; border: 1px solid var(--border); overflow: hidden; margin: 10px 0 14px; }
.balken > span { display: block; height: 100%; background: linear-gradient(90deg, #4a9fd8, #1f4e80); width: 0; transition: width 0.3s; }

.feld { margin-bottom: 14px; }
.feld label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.feld select, .feld input[type="number"], .feld input[type="text"] {
  font-family: inherit; font-size: 1rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--text); width: 100%; max-width: 22rem;
}
.knopf {
  font-family: inherit; font-size: 1rem; font-weight: 700;
  background: var(--green); color: #fff; border: 2px solid var(--green);
  padding: 0.65rem 1.5rem; border-radius: 2rem; cursor: pointer;
}
.knopf:hover { background: var(--green-dark); border-color: var(--green-dark); }
.knopf.sekundaer { background: #fff; color: var(--green-dark); }
.knopf.sekundaer:hover { background: var(--green-light); }

.werkzeug-karte {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; text-decoration: none; display: flex; gap: 14px;
  align-items: flex-start; transition: transform 0.15s, box-shadow 0.15s;
}
.werkzeug-karte:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(44,111,181,0.15); }
.werkzeug-karte .icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.werkzeug-karte h4 { color: var(--green-dark); font-size: 1.08rem; margin-bottom: 4px; font-family: var(--font-head); }
.werkzeug-karte p { color: var(--text-soft); font-size: 0.92rem; margin: 0; }

/* --------------------------------------------------- 8. Glossar & Suche -- */
.az-leiste {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0 26px;
  padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
.az-leiste a, .az-leiste span {
  display: inline-block; min-width: 2rem; text-align: center;
  padding: 0.3rem 0.4rem; border-radius: 6px; font-weight: 700;
  font-size: 0.92rem; text-decoration: none;
}
.az-leiste a { background: var(--green-light); color: var(--green-dark); }
.az-leiste a:hover { background: var(--green); color: #fff; }
.az-leiste span { color: #b6c2d1; }

.glossar-block { margin-bottom: 26px; }
.glossar-block h3 {
  font-family: var(--font-head); font-size: 1.6rem; color: var(--green-dark);
  border-bottom: 3px solid var(--green-light); padding-bottom: 4px; margin-bottom: 10px;
}
.glossar-eintrag {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 8px;
}
.glossar-eintrag dt { font-weight: 700; color: var(--green-dark); margin-bottom: 3px; }
.glossar-eintrag dd { margin: 0; color: var(--text-soft); font-size: 0.96rem; }
.glossar-eintrag dd a { color: var(--green); }
.nach-oben { font-size: 0.82rem; color: var(--green); text-decoration: none; float: right; font-weight: 600; }

/* Suche */
.suchfeld-wrap { position: relative; display: flex; gap: 0.5rem; flex: 1; min-width: min(12rem, 100%); max-width: 26rem; }
.suchfeld {
  font-family: inherit; font-size: 0.92rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border); border-radius: 2rem; width: 100%;
  background: #fff; color: var(--text);
}
.such-treffer { margin-top: 20px; }
.such-treffer .treffer {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; margin-bottom: 12px; display: block; text-decoration: none;
}
.such-treffer .treffer:hover { border-color: var(--green); box-shadow: 0 4px 12px rgba(44,111,181,0.12); }
.such-treffer .treffer h4 { color: var(--green-dark); font-family: var(--font-head); font-size: 1.12rem; margin-bottom: 3px; }
.such-treffer .treffer .bereich { font-size: 0.78rem; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.such-treffer .treffer p { color: var(--text-soft); font-size: 0.93rem; margin: 5px 0 0; }
.such-treffer mark { background: #ffeaa0; color: inherit; padding: 0 2px; border-radius: 2px; }
.such-status { color: var(--text-soft); font-size: 0.95rem; margin-top: 14px; }

/* --------------------------------------------------- 9. Druckvorlagen -- */
.druck-hinweis {
  background: var(--green-light); border-radius: 10px; padding: 16px 20px;
  margin-bottom: 22px; font-size: 0.95rem; color: var(--text-soft);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.formular { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; margin-bottom: 20px; }
.formular h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.2rem; margin-bottom: 12px; }
.zeile { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.zeile > div { flex: 1; min-width: 10rem; }
.linie { border-bottom: 1px solid #9aa8b8; height: 1.9rem; margin-top: 2px; }
.linie.hoch { height: 3.4rem; }
.beschriftung { font-size: 0.8rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.kaestchen { display: inline-block; width: 1rem; height: 1rem; border: 1.5px solid #6b7a8d; border-radius: 3px; margin-right: 0.4rem; vertical-align: -2px; }
.check-liste { list-style: none; margin: 0; padding: 0; }
.check-liste li { padding: 6px 0; border-bottom: 1px dotted var(--border); color: var(--text-soft); font-size: 0.96rem; }
.check-liste li:last-child { border-bottom: none; }

@media print {
  header, #hauptnav, .nav-toggle, .werkzeugleiste, footer,
  .druck-hinweis, .weiter, .skiplink, .nicht-drucken { display: none !important; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.35; }
  main { max-width: none; padding: 0; }

  /* Auf Vorlagenseiten beginnt das Formular direkt oben */
  main:has(.druck-kopf) > h2,
  main:has(.druck-kopf) > .intro,
  main:has(.druck-kopf) > .breadcrumb { display: none; }

  .druck-kopf { display: block !important; border-bottom: 2px solid #333; margin-bottom: 10pt; padding-bottom: 5pt; }
  .card { break-inside: avoid; page-break-inside: avoid; }
  .card, .formular { box-shadow: none; border-color: #999; }
  .formular { padding: 0 0 10pt; border: none; border-radius: 0; margin-bottom: 10pt; }
  .formular h3 { margin-bottom: 8pt; }
  tr, .zeile, .check-liste li { break-inside: avoid; page-break-inside: avoid; }
  .druck-kopf-klein { display: block !important; font-weight: 700; color: #1f4e80;
    border-bottom: 1px solid #333; margin-bottom: 8pt; padding-bottom: 3pt; font-size: 11pt; }
  thead { display: table-header-group; }
  table { font-size: 9.5pt; }
  table th, table td { padding: 5pt 6pt; }
  /* Formulartabellen etwas kompakter, damit ein Blatt eine Seite bleibt */
  .formular table { font-size: 9pt; }
  .formular table th, .formular table td { padding: 3.2pt 6pt; }
  .formular .zeile { margin-bottom: 6pt; }
  a { text-decoration: none; color: #000; }
  .linie { border-bottom: 1px solid #333; }
  .stand { background: none; border: none; border-top: 1px solid #999; padding: 6pt 0 0; font-size: 8pt; }
}
.druck-kopf { display: none; }
.druck-kopf-klein { display: none; }
.druck-kopf h2, .druck-kopf .druck-titel { font-size: 1.5rem; margin: 0 0 4px; }
.druck-kopf h1 { font-family: Georgia, serif; font-size: 16pt; margin: 0; }
.druck-kopf p { font-size: 9pt; color: #444; margin: 2pt 0 0; }
/* Titel der Druckvorlagen: wie die Überschriften der Seite (seit 01.10.2026) */
.druck-kopf .druck-titel { font-family: Georgia, "DejaVu Serif", serif; font-weight: 700;
  color: #1f4e80; font-size: 16pt; margin: 0 0 2pt; }
@media print {
  /* Tabellenbeschriftungen sind für Screenreader; im Ausdruck der Vorlagen stören sie */
  main:has(.druck-kopf) caption { display: none; }
}

/* ------------------------------- 10. Fußbereich & Cookie-Hinweis -- */
footer { background: var(--green-dark); color: #cfdff0; text-align: center; padding: 24px 20px; font-size: 0.9rem; }
footer a { color: #fff; text-decoration: underline; margin: 0 12px; }
.footer-nav { margin-bottom: 10px; }

.yt-box {
  background: linear-gradient(135deg, #1f4e80 0%, #2c6fb5 100%); color: #fff;
  border-radius: 12px; padding: 26px 28px; margin-top: 30px; text-align: center;
}
.yt-box h3 { font-size: 1.3rem; margin-bottom: 8px; }
.yt-box p { opacity: 0.92; margin-bottom: 16px; }
.yt-box a {
  display: inline-block; background: #fff; color: var(--green-dark); text-decoration: none;
  font-weight: 600; padding: 12px 26px; border-radius: 30px; transition: transform 0.15s;
}
.yt-box a:hover { transform: scale(1.04); }
.yt-box a + a { margin-left: 10px; }
@media (max-width: 600px) {
  .yt-box a { display: block; }
  .yt-box a + a { margin-left: 0; margin-top: 10px; }
}


/* Startseite */
.hero { background: linear-gradient(135deg, #e6eff7 0%, #d4e6f5 100%); border-radius: 14px; padding: 36px 32px; margin-bottom: 30px; text-align: center; }
.hero h2 { font-family: var(--font-head); color: var(--green-dark); font-size: 2.1rem; }
.hero p { color: var(--text-soft); font-size: 1.12rem; max-width: 620px; margin: 14px auto 0; }
.hero-sub { color: var(--green-dark); font-weight: 600; font-size: 1rem; margin-top: 18px; opacity: 0.85; }
.start-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; margin-bottom: 30px; }
.start-box h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.35rem; margin-bottom: 6px; }
.start-box > p { color: var(--text-soft); font-size: 0.98rem; margin-bottom: 18px; }
.start-list { display: grid; gap: 12px; }
.start-link { display: block; text-decoration: none; background: var(--green-light); border-radius: 10px; padding: 14px 18px; transition: background 0.15s, transform 0.15s; }
.start-link:hover { background: #d4e6f5; transform: translateX(4px); }
.start-link strong { color: var(--green-dark); font-size: 1.02rem; display: block; }
.start-link span { color: var(--text-soft); font-size: 0.93rem; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips a {
  background: #fff; border: 1px solid #f0d5d2; color: #a83f3c; text-decoration: none;
  padding: 8px 15px; border-radius: 22px; font-size: 0.95rem; font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
.chips a:hover { background: #a83f3c; color: #fff; transform: translateY(-2px); }
.chips a.alle { background: #a83f3c; color: #fff; }
.krank-feature { background: linear-gradient(135deg, #fdf3f2 0%, #fbe9e7 100%); border: 1px solid #f0d5d2; border-radius: 14px; padding: 26px 28px; margin-bottom: 30px; }
.krank-feature h3 { font-family: var(--font-head); color: #a83f3c; font-size: 1.35rem; margin-bottom: 6px; }
.krank-feature > p { color: var(--text-soft); font-size: 0.98rem; margin-bottom: 16px; }
.autor { background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--green); border-radius: 12px; padding: 22px 26px; margin-top: 30px; }
.autor h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.18rem; margin-bottom: 8px; }
.autor p { color: var(--text-soft); font-size: 0.97rem; margin-bottom: 10px; }
.autor a { color: var(--green); font-weight: 600; }

/* Krankheitsübersicht */
.krank-item {
  background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--green);
  border-radius: 10px; padding: 20px 22px; text-decoration: none; display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}
.krank-item:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(44,111,181,0.15); }
.krank-item h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.18rem; margin-bottom: 6px; }
.krank-item p { color: var(--text-soft); font-size: 0.94rem; margin: 0; }
.krank-item .mehr { display: inline-block; margin-top: 10px; color: var(--green); font-size: 0.88rem; font-weight: 700; }
.a-herz { border-left-color: #c0504d !important; } .a-herz h4 { color: #a83f3c; }
.a-hirn { border-left-color: #8a5cc4 !important; } .a-hirn h4 { color: #5e3a96; }
.a-stoff { border-left-color: #d4823a !important; } .a-stoff h4 { color: #b35e1f; }
.a-beweg { border-left-color: #2c9c78 !important; } .a-beweg h4 { color: #1f7a5c; }
.a-geriatrie { border-left-color: #3a9d9d !important; } .a-geriatrie h4 { color: #1f7a7a; }
.a-krank, .a-pall { border-left-color: #c0504d !important; }
.a-krank h4, .a-pall h4 { color: #a83f3c; }
.a-zuhause, .a-amb, .a-vor { border-left-color: #2c9c78 !important; }
.a-zuhause h4, .a-amb h4, .a-vor h4 { color: #1f7a5c; }
.a-hilf { border-left-color: #d4823a !important; } .a-hilf h4 { color: #b35e1f; }
.a-stat, .a-std { border-left-color: #5b6fc4 !important; }
.a-stat h4, .a-std h4 { color: #3f52a0; }
.a-tag { border-left-color: #3a9d9d !important; } .a-tag h4 { color: #1f7a7a; }
.a-grad, .a-faq { border-left-color: #2c6fb5 !important; }
.a-grad h4, .a-faq h4 { color: #1f4e80; }
.a-reform { border-left-color: #c98a1e !important; } .a-reform h4 { color: #9c6a12; }
.a-recht { border-left-color: #8a5cc4 !important; } .a-recht h4 { color: #5e3a96; }
.a-werkzeug { border-left-color: #2c9c78 !important; } .a-werkzeug h4 { color: #1f7a5c; }

/* Videos */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.3rem; margin-top: 26px; }
.video-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; }
.video-wrap:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(44,111,181,0.18); }
.video-card { text-decoration: none; display: block; }
.artikel-leiste { border-top: 1px solid var(--border); background: var(--green-light); padding: 0.75rem 1.1rem; margin-top: auto; }
.artikel-leiste a { color: var(--green-dark); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.video-thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1f4e80, #2c6fb5); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.video-thumb .play-icon { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s; }
.video-card:hover .play-icon { transform: scale(1.12); background: #fff; }
.video-thumb .play-icon::after { content: ""; border-style: solid; border-width: 0.65rem 0 0.65rem 1.05rem; border-color: transparent transparent transparent var(--green-dark); margin-left: 0.25rem; }
.video-info { padding: 1rem 1.1rem 1.2rem; }
.video-info h3 { font-family: var(--font-head); color: var(--green-dark); font-size: 1.05rem; margin-bottom: 0.35rem; }
.video-info p { color: var(--text-soft); font-size: 0.9rem; margin: 0; }
.video-info .watch-hint { display: inline-block; margin-top: 0.7rem; color: var(--green); font-size: 0.85rem; font-weight: 600; }

/* Profilkarte */
.profil-karte { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.profil-kreis {
  position: relative; width: 8rem; height: 8rem; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg,#2c6fb5,#1f4e80);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: #fff; flex-shrink: 0;
}
.profil-kreis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* Aufzählungen in Karten und Hinweisboxen */
.card ul { margin: 10px 0 0 22px; color: var(--text-soft); }
.card ul li { margin-bottom: 6px; }
.alert ul li { margin-bottom: 5px; }

/* Trennlinie unter Kartenüberschriften */
.card h3 {
  padding-bottom: 10px;
  border-bottom: 3px solid var(--green-light);
  letter-spacing: -0.2px;
}

/* Videokarte auf Artikelseiten */
.seiten-video { max-width: 420px; margin: 28px 0; }
.seiten-video .video-info h3 { margin: 0 0 4px; }

/* Beschreibungen auf der Videoseite */
.video-text { color: var(--text); font-size: 0.94rem; line-height: 1.55; margin: 0.7rem 0 0.4rem; padding: 0 1rem; }
.video-meta { color: var(--text-soft); font-size: 0.84rem; font-style: italic; margin: 0 0 0.6rem; padding: 0 1rem; }

/* Kleine Bildschirme */
@media (max-width: 720px) {
  .duo, .gegen { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  header h1 { font-size: 1.5rem; }
  main { padding: 1.6rem 1rem 3rem; }
  .card, .rechner, .formular { padding: 18px 18px; }
  .hero, .start-box, .krank-feature { padding: 22px 18px; }
  table, thead, tbody, th, td, tr { display: block; }
  .tbl-wrap table thead { display: none; }
  .tbl-wrap table td { border: none; padding: 4px 0; }
  .tbl-wrap table tr { border-bottom: 1px solid var(--border); padding: 10px 0; display: block; }
  .tbl-wrap table td::before { content: attr(data-th) " "; font-weight: 700; color: var(--green-dark); }
}

/* --------------------------------------------- 6b. Organseiten -------- */

/* Seitenkopf: Organsymbol neben der Überschrift */
.organ-kopf { display: flex; align-items: center; margin-bottom: 8px; }
.organ-kopf h2 { margin-bottom: 0; }
.organ-symbol {
  flex: 0 0 auto; width: 58px; height: 58px; margin-right: 16px; border-radius: 50%;
  background: var(--green-light); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--green-dark);
}
.organ-symbol svg { width: 32px; height: 32px; display: block; }

/* Kachelübersicht aller Organseiten */
.organ-gitter-titel {
  font-family: var(--font-head); color: var(--green-dark); font-size: 1.45rem;
  margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--green-light);
  letter-spacing: -0.2px;
}
.organ-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 16px; margin: 6px 0 22px;
}
.organ-kachel {
  display: block; text-decoration: none; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(31,78,128,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.organ-kachel:hover, .organ-kachel:focus-visible {
  border-color: var(--green); box-shadow: 0 6px 16px rgba(31,78,128,0.14); transform: translateY(-2px);
}
.organ-kachel svg { width: 34px; height: 34px; display: block; color: var(--green); margin-bottom: 12px; }
.organ-kachel .organ-name {
  display: block; font-family: var(--font-head); color: var(--green-dark);
  font-size: 1.18rem; font-weight: 700; margin-bottom: 4px;
}
.organ-kachel span.organ-text { display: block; color: var(--text-soft); font-size: 0.95rem; line-height: 1.5; }

/* Leiste zum Wechseln zwischen den Organseiten */
.organ-leiste { margin-top: 30px; }
.organ-leiste h3 {
  font-family: var(--font-head); color: var(--green-dark); font-size: 1.05rem;
  margin-bottom: 10px; font-weight: 700;
}
.organ-leiste ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.organ-leiste li { margin: 0 8px 8px 0; }
.organ-leiste a {
  display: inline-block; padding: 7px 15px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--green-dark); text-decoration: none; font-size: 0.95rem; line-height: 1.35;
}
.organ-leiste a:hover { background: var(--green-light); border-color: var(--green); }
.organ-leiste a[aria-current="page"] {
  background: var(--green); border-color: var(--green); color: #fff; font-weight: 600;
}

/* Barrierefreiheit und Ausgabe */
@media (prefers-reduced-motion: reduce) {
  .organ-kachel { transition: none; }
  .organ-kachel:hover, .organ-kachel:focus-visible { transform: none; }
}

@media (max-width: 560px) {
  .organ-symbol { width: 46px; height: 46px; margin-right: 12px; }
  .organ-symbol svg { width: 26px; height: 26px; }
  .organ-kachel { padding: 16px 18px; }
}

@media print {
  .organ-leiste, .organ-symbol { display: none !important; }
  .organ-kachel { box-shadow: none; border-color: #999; break-inside: avoid; }
}

/* ------------------------------ 11. Seitenspezifische Bausteine -------- */
/* Zuvor als <style>-Blöcke in einzelnen Seiten; hier zusammengeführt,
   damit es nur noch eine Stelle für Gestaltung gibt.                     */

/* Tabellen innerhalb einer Karte (altersdepression.html) */
.card table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.98rem; color: var(--text-soft); }
.card th, .card td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.card th { color: var(--green-dark); font-weight: 700; background: var(--green-light); }

/* Listen in den Duo-Kästen (ambulante-pflege.html, hilfsmittel.html) */
.duo-body ul li { margin-bottom: 4px; }

/* Hervorhebung "alle" in der Themenleiste (index.html) */
.chips a.alle:hover { background: #8c2f2c; }

/* Platzhalterkarte für angekündigte Themen (krankheiten.html) */
.bald { background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 20px 22px; color: var(--text-soft); }
.bald h4 { color: var(--text-soft); font-family: var(--font-head); font-size: 1.18rem; margin-bottom: 6px; }
.bald p { font-size: 0.94rem; margin: 0; }

/* FAST-Schema beim Schlaganfall (schlaganfall.html) */
.fast { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0 6px; }
.fast-box { background: #fff; border: 2px solid #c0504d; border-radius: 10px; padding: 16px 18px; }
.fast-box .letter { font-family: var(--font-head); font-size: 2.2rem; font-weight: 700; color: #c0504d; line-height: 1; margin-bottom: 6px; }
.fast-box strong { display: block; color: #7d2b28; margin-bottom: 4px; }
.fast-box p { font-size: 0.9rem; color: var(--text-soft); margin: 0; }

/* Artikelleiste (videos.html) */
.artikel-leiste a:hover { text-decoration: underline; }

/* Vorlese-Knopf in der Werkzeugleiste */
.wl-vorlesen[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green-dark); }
/* Sichtbar nur, wenn das Kopf-Skript Sprachausgabe gefunden hat – so steht
   die Werkzeugleiste schon beim ersten Zeichnen fertig da und springt nicht. */
.wl-vorlesen { display: none; }
html[data-vorlesen] .wl-vorlesen { display: inline-flex; }

/* Downloadseite */
.dl-zeile { margin-top: 10px; font-size: 0.9rem; color: var(--text-soft); }
/* „.card a.dl-knopf“ ist nötig: Sonst färbt die allgemeine Regel „.card a“
   die Schrift blau – blau auf blau, der Knopf wirkte leer (bis 3.10.2026). */
.dl-knopf, .card a.dl-knopf { display: inline-block; background: var(--green); color: #fff; border-radius: 2rem;
  padding: 0.45rem 1.1rem; margin-right: 6px; font-weight: 700; text-decoration: none;
  max-width: 100%; text-align: center; }
.dl-knopf:hover, .dl-knopf:focus-visible,
.card a.dl-knopf:hover, .card a.dl-knopf:focus-visible { background: var(--green-dark); color: #fff; }
.dl-meta { white-space: nowrap; }
/* Download-Karten: Spaltenbreite in rem, damit sie mit der Schrift mitwächst
   (feste 230px wurden auf großen Bildschirmen und mit A+ zu schmal), und die
   Textspalte darf nie breiter werden als die Karte. */
.grid.grid-dl { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.werkzeug-karte > .wk-text, .werkzeug-karte > span:not(.icon) { flex: 1 1 auto; min-width: 0; }
html[data-modus="dunkel"] .dl-knopf,
html[data-modus="dunkel"] .card a.dl-knopf,
html[data-modus="dunkel"] .dl-knopf:hover, html[data-modus="dunkel"] .dl-knopf:focus-visible,
html[data-modus="dunkel"] .card a.dl-knopf:hover, html[data-modus="dunkel"] .card a.dl-knopf:focus-visible { color: #12171f; }
@media print { .dl-zeile { display: none; } }

/* ---------------------------- 12. Abschnittsübersicht ------------------ */
/* "Auf dieser Seite" – Sprungmarken am Anfang langer Seiten.             */

.seiten-toc {
  background: var(--green-light);
  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: 10px;
  padding: 16px 20px 14px;
  margin: 0 0 26px;
}
.seiten-toc h3 {
  font-family: var(--font-head); font-size: 1.02rem; color: var(--green-dark);
  margin: 0 0 10px; letter-spacing: 0.02em; text-transform: uppercase;
}
.seiten-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.seiten-toc li { margin: 0; }
.seiten-toc a {
  display: inline-block; background: #fff; border: 1px solid var(--border);
  border-radius: 2rem; padding: 0.4rem 0.95rem;
  font-size: 0.94rem; color: var(--green-dark); text-decoration: none;
}
.seiten-toc a:hover, .seiten-toc a:focus-visible {
  background: var(--green); color: #fff; border-color: var(--green-dark);
}

/* Damit die Sprungziele nicht unter der klebenden Navigation verschwinden */
main h3[id], main h2[id] { scroll-margin-top: 5.5rem; }


@media (max-width: 600px) {
  .seiten-toc ul { flex-direction: column; gap: 0; }
  .seiten-toc a { display: block; border: none; border-bottom: 1px solid var(--border);
    border-radius: 0; padding: 0.6rem 0.2rem; background: transparent; }
  .seiten-toc li:last-child a { border-bottom: none; }
}

@media print { .seiten-toc { display: none !important; } }

/* Musterformulierungen auf pflegeplanung.html */
.beispiel {
  background: #fbfcfe; border: 1px solid var(--border); border-left: 4px solid var(--green);
  border-radius: 8px; padding: 14px 18px; margin: 10px 0 20px;
  font-size: 0.95rem; line-height: 1.65; color: var(--text-soft);
}
.beispiel strong { color: var(--green-dark); }
.card h4 { font-family: var(--font-head); font-size: 1.1rem; color: var(--text);
  margin: 22px 0 4px; }

/* Autorenzeile unter dem Inhalt */
.autorzeile {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 14px 2px; margin: 26px 0 18px;
}
.autorzeile img { border-radius: 50%; object-fit: cover; flex: none; }
.autorzeile p { margin: 0; font-size: 0.92rem; color: var(--text-soft); line-height: 1.55; }
.autorzeile strong { color: var(--text); }
.autorzeile a { color: var(--green-dark); }
@media (max-width: 520px) { .autorzeile { gap: 12px; } .autorzeile img { width: 44px; height: 44px; } }
@media print { .autorzeile { display: none !important; } }

/* Widerruf der Einwilligung */
.fn-knopf {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.fn-knopf:hover, .fn-knopf:focus-visible { color: #fff; }

/* Angesprungener Glossareintrag kurz hervorheben */
.glossar-eintrag:target,
dt:target { scroll-margin-top: 5.5rem; }
dt:target { background: var(--gelb-hell); box-shadow: -8px 0 0 var(--gelb); border-radius: 3px; }
html[data-modus="dunkel"] dt:target { background: var(--gelb-hell); }

/* Hinweis auf das Merkblatt am Ende der Krankheitsseiten */
.merkblatt-hinweis {
  background: var(--green-light); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; margin: 26px 0 18px;
  font-size: 0.95rem; color: var(--text-soft);
}
.merkblatt-hinweis strong { color: var(--green-dark); }
.merkblatt-hinweis .dl-knopf { margin-left: 6px; margin-top: 8px; }
@media print { .merkblatt-hinweis { display: none !important; } }
.merkblatt-liste { list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 18px; }
.merkblatt-liste li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.merkblatt-liste .dl-meta { color: var(--text-soft); font-size: 0.85rem; }

/* ---------------------------- 13. Formulierungs-Baukasten ------------- */
.bk-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-klein { display: block; font-size: 0.85rem; color: var(--text-soft);
  font-weight: 400; margin: 12px 0 4px; }
.bk-klein-inline { font-size: 0.85rem; color: var(--text-soft); font-weight: 400; }
.bk-hilfe { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 8px; }

#bkFormular fieldset.feld,
#psFormular fieldset.feld { border: none; padding: 0; margin-bottom: 18px; }
#bkFormular legend,
#psFormular legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; padding: 0; }
#bkFormular textarea,
#bkFormular input[type="text"],
#bkFormular input[type="date"],
#psFormular textarea,
#psFormular input[type="text"] {
  font-family: inherit; font-size: 1rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--text); width: 100%; max-width: 34rem;
}
#bkFormular .optionen { margin-bottom: 4px; }
.bk-massnahmen label { align-items: flex-start; border-radius: 10px; text-align: left; }
.bk-massnahmen em { display: block; font-style: normal; font-size: 0.8rem;
  color: var(--text-soft); margin-top: 2px; }

#bkAusgabe { font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: 0.95rem; line-height: 1.6; max-width: none; }
.bk-knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.bk-check-kopf { font-weight: 700; margin-top: 16px; }
.bk-check { list-style: none; margin: 4px 0 0; padding: 0; }
.bk-check li { position: relative; padding: 7px 0 7px 26px; font-size: 0.93rem;
  border-bottom: 1px dotted var(--border); }
.bk-check li:last-child { border-bottom: none; }
.bk-check span { position: absolute; left: 0; font-weight: 700; }
.bk-ok { color: var(--text-soft); }
.bk-ok span { color: var(--gruen-echt); }
.bk-offen span { color: var(--rot); }

/* Ohne diese Regeln stünde im Dunkelmodus dunkle Schrift auf weißem Grund –
   die ID-Regeln oben sind spezifischer als die allgemeinen Formularregeln. */
html[data-modus="dunkel"] #bkFormular textarea,
html[data-modus="dunkel"] #bkFormular input[type="text"],
html[data-modus="dunkel"] #bkFormular input[type="date"],
html[data-modus="dunkel"] #psFormular textarea,
html[data-modus="dunkel"] #psFormular input[type="text"] {
  background: var(--card); color: var(--text); border-color: var(--border);
}

@media print {
  #bkFormular > h3, #bkFormular > .hinweis, #bkFormular > .feld,
  #bkFormular > fieldset, .bk-knopfreihe { display: none; }
  #bkFormular { border: none; padding: 0; }
  #psFormular > h3, #psFormular > .hinweis { display: none; }
  #psFormular { border: none; padding: 0; }
  .ergebnis { background: #fff; border: 1px solid #999; }
  #bkAusgabe { border: none; width: 100%; min-height: 130mm; font-size: 10.5pt; }
  .bk-check li { border-bottom: none; padding: 3pt 0 3pt 20pt; }
}

/* Tabellenbeschriftung: sagt Menschen wie Maschinen, was die Tabelle zeigt. */
table caption {
  caption-side: top; text-align: left; font-size: 0.88rem; color: var(--text-soft);
  line-height: 1.5; padding: 0 2px 8px; font-style: normal;
}
/* Auf dem Handy werden Tabellen zu Blöcken – die Beschriftung muss mitgehen,
   sonst schrumpft sie auf eine schmale Spalte. */
@media (max-width: 600px) { table caption { display: block; width: auto; } }

/* -------------- 13b. Baukasten: breite Seite, mitlaufendes Ergebnis ---- */
main.breit { max-width: 78rem; }
/* Nur das Werkzeug nutzt die volle Breite. Fließtext bleibt bei 60rem –
   längere Zeilen lesen sich schlechter. Linksbündig, damit die Kante
   mit dem Formular fluchtet. */
@media (min-width: 1000px) {
  main.breit > *:not(#bkFormular):not(#psFormular) { max-width: 60rem; }
}

/* Der Abstand nach oben wird per JS aus der tatsächlichen Höhe der
   Navigation gesetzt – sie ändert sich mit der Schriftgrößen-Einstellung. */
.bk-spalten { --bk-top: 5rem; }

.bk-klappen { display: none; }

@media (min-width: 1000px) {
  .bk-spalten {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: 1.6rem; align-items: start;
  }
  .bk-ausgabe {
    position: sticky; top: var(--bk-top);
    max-height: calc(100vh - var(--bk-top) - 1.5rem); overflow: auto;
    margin-top: 0;
  }
}

@media (max-width: 999px) {
  .bk-ausgabe {
    position: sticky; top: var(--bk-top); z-index: 5;
    max-height: 48vh; overflow: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,0.13);
  }
  .bk-spalten { display: flex; flex-direction: column; }
  .bk-eingabe { order: 2; }
  .bk-ausgabe { order: 1; margin-bottom: 1.4rem; }
  .bk-ausgabe #bkAusgabe { min-height: 8rem; }
  .bk-klappen {
    display: inline-block; float: right; font: inherit; font-size: 0.8rem;
    font-weight: 400; background: none; border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 10px; color: var(--text-soft); cursor: pointer;
  }
  .bk-ausgabe.zu { max-height: 3.4rem; overflow: hidden; }
  .bk-ausgabe.zu > *:not(h4) { display: none; }
}

html[data-modus="dunkel"] .bk-ausgabe {
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

@media print {
  .bk-ausgabe { position: static; max-height: none; overflow: visible; box-shadow: none; }
  .bk-klappen { display: none; }
  main.breit { max-width: none; }
}

/* Ausweichlösung, falls position:sticky beim Nutzer nicht greift –
   wird per JS über die Klasse am body aktiviert. */
@media (max-width: 999px) {
  body.bk-ohne-sticky .bk-ausgabe {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    border-radius: 12px 12px 0 0; margin: 0; max-height: 42vh;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.2); z-index: 60;
  }
  body.bk-ohne-sticky .bk-eingabe { padding-bottom: 44vh; }
  body.bk-ohne-sticky .bk-ausgabe.zu { max-height: 3.4rem; }
  body.bk-ohne-sticky.bk-zu .bk-eingabe { padding-bottom: 0; }
}

/* ---------------------------- 14. Pruefungssimulation ----------------- */
/* Nutzt die Spalten-, Klapp- und Check-Regeln aus Abschnitt 13.
   Eigen sind nur die Fallkarte und die aufgedeckten Stolpersteine. */
.ps-fallkarte {
  background: var(--green-light); border: 1px solid #cdddef;
  border-radius: 10px; padding: 16px 18px; margin: 4px 0 20px;
}
.ps-fallkarte h4 { font-family: var(--font-head); color: var(--green-dark);
  font-size: 1.1rem; margin: 0 0 6px; }
.ps-fallkarte p { margin: 0 0 8px; font-size: 0.95rem; }
.ps-fallkarte ul { margin: 4px 0 0; padding-left: 1.2rem; }
.ps-fallkarte li { font-size: 0.95rem; margin-bottom: 5px; }
.ps-fallkarte .ps-meta { color: var(--text-soft); font-size: 0.9rem; }

#psStolper { margin-top: 4px; }
.ps-stolper, .ps-fragen { margin: 4px 0 0; padding-left: 1.2rem; }
.ps-stolper li, .ps-fragen li { font-size: 0.93rem; margin-bottom: 8px; }
.ps-stolper li { list-style: none; position: relative; padding-left: 4px; }
.ps-stolper li::before { content: "→"; position: absolute; left: -1.1rem;
  color: var(--green-dark); font-weight: 700; }

html[data-modus="dunkel"] .ps-fallkarte { background: var(--card);
  border-color: var(--border); }

/* ------------------------------------------ 15. Grafiken im Farbschema -- */
/* Grafiken mit der Klasse .thema zeichnen mit den Farbvariablen der Seite
   und folgen damit automatisch dem Dunkelmodus. Schriftgrößen stehen in
   den SVG-Einheiten (viewBox 340 breit); die Breite ist begrenzt, damit
   die Beschriftung am Desktop nicht übergroß wird.                        */
:root {
  --gruen-text: #1d7356;
  /* Pflegegrad-Stufen: ein Farbton, von hell nach dunkel (geprüft) */
  --pg1: #86b6ef; --pg2: #5598e7; --pg3: #2a78d6; --pg4: #1c5cab; --pg5: #104281;
  --pg-dunkeltext: #0d2a4d;
  /* zwei Datenreihen (geprüft, farbfehlsichtig unterscheidbar) */
  --kat1: #2c6fb5; --kat2: #d4a843;
}
html[data-modus="dunkel"] {
  --gruen-text: #7fd8b4;
  --pg1: #b7d3f6; --pg2: #86b6ef; --pg3: #5598e7; --pg4: #2a78d6; --pg5: #1c5cab;
  --kat1: #3987e5; --kat2: #c98500;
}
.grafik.thema svg { max-width: var(--gb, 30rem); margin: 0 auto; }
.grafik.thema text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.grafik.thema .t   { fill: var(--text); }
.grafik.thema .ts  { fill: var(--text-soft); }
.grafik.thema .th  { fill: var(--green-dark); font-family: var(--font-head); font-weight: 700; }
.grafik.thema .ta  { fill: var(--green); }
.grafik.thema .tr  { fill: var(--rot-dunkel); }
.grafik.thema .tg  { fill: var(--gruen-text); }
.grafik.thema .tw  { fill: #fff; }
.grafik.thema .tpg { fill: var(--pg-dunkeltext); }
.grafik.thema .b   { font-weight: 700; }
.grafik.thema .f-karte   { fill: var(--card); }
.grafik.thema .f-flaeche { fill: var(--green-light); }
.grafik.thema .f-akzent  { fill: var(--green); }
.grafik.thema .f-rot     { fill: var(--rot); }
.grafik.thema .f-rothell { fill: var(--rot-hell); }
.grafik.thema .f-gruen   { fill: var(--gruen-echt); }
.grafik.thema .f-gelbhell{ fill: var(--gelb-hell); }
.grafik.thema .f-linie   { fill: var(--border); }
.grafik.thema .f-figur   { fill: var(--text-soft); }
.grafik.thema .f-kat1    { fill: var(--kat1); }
.grafik.thema .f-kat2    { fill: var(--kat2); }
.grafik.thema .f-gelb    { fill: var(--gelb); }
.grafik.thema .s-rand    { stroke: var(--border); }
.grafik.thema .s-akzent  { stroke: var(--green); }
.grafik.thema .s-rot     { stroke: var(--rot); }
.grafik.thema .s-gruen   { stroke: var(--gruen-echt); }
.grafik.thema .s-figur   { stroke: var(--text-soft); }
.grafik.thema .s-soft    { stroke: var(--text-soft); }
.grafik.thema .s-karte   { stroke: var(--card); }
.grafik.thema .pg1 { fill: var(--pg1); } .grafik.thema .pg2 { fill: var(--pg2); }
.grafik.thema .pg3 { fill: var(--pg3); } .grafik.thema .pg4 { fill: var(--pg4); }
.grafik.thema .pg5 { fill: var(--pg5); }
.grafik.thema .pfeil-a { fill: var(--green); }
.grafik.thema .pfeil-r { fill: var(--rot); }
.grafik.thema .pfeil-g { fill: var(--gruen-echt); }
.grafik.thema .pfeil-s { fill: var(--text-soft); }
html[data-modus="dunkel"] .grafik.thema .tpg-d { fill: var(--pg-dunkeltext); }
@media (max-width: 600px) {
  .grafik.thema { padding: 10px 5px 10px; }
  .card .grafik.thema { margin-left: -13px; margin-right: -13px; }
  .alert .grafik.thema { margin-left: -17px; margin-right: -19px; }
}

/* Ältere Grafiken mit festen Farben: im Dunkelmodus auf hellem Grund
   zeigen, damit die dunkle Schrift lesbar bleibt. */
html[data-modus="dunkel"] .grafik:not(.thema) svg {
  background: #fbfcfe; border-radius: 8px; padding: 10px;
}
.grafik.thema figcaption { max-width: 34rem; margin-left: auto; margin-right: auto; }


/* ------------------------------------------- Aktuell / Neu & geändert -- */
/* Feste, datierte Liste – bewusst kein Laufband (lesbar, barrierefrei).   */
.card ul.aktuell-liste, ul.aktuell-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 16px; }
ul.aktuell-liste > li { margin: 0; border-left: 3px solid var(--green); padding: 1px 0 1px 14px; }
ul.aktuell-liste time { display: block; font-size: 0.84rem; color: var(--text-soft); margin-bottom: 1px; }
ul.aktuell-liste .titel { font-weight: 700; color: var(--green-dark); }
ul.aktuell-liste a.titel { text-decoration: none; }
ul.aktuell-liste a.titel:hover, ul.aktuell-liste a.titel:focus { text-decoration: underline; }
ul.aktuell-liste p { margin: 3px 0 0; color: var(--text-soft); font-size: 0.97rem; }
.aktuell-mehr { margin-top: 18px; font-size: 0.97rem; }
.aktuell-mehr a { color: var(--green); font-weight: 600; }

/* Lange Wörter („Bewegungseinschränkung“) brechen nur dann um, wenn sie sonst
   bei großer Schrift auf schmalen Handys über den Rand ragen würden. */
main { overflow-wrap: break-word; }

/* Glossar: geplante Begriffe (Pflegereform) */
.glossar-eintrag .geplant { font-weight: 400; font-size: 0.85em; color: var(--text-soft); }

/* Knöpfe im Dunkelmodus: helle Fläche braucht dunkle Schrift (vorher weiß auf hellblau) */
html[data-modus="dunkel"] .knopf:not(.sekundaer),
html[data-modus="dunkel"] .knopf:not(.sekundaer):hover { color: #12171f; }

/* ------------------------------------------------ Fristen-Wecker ------ */
.feld input[type="date"] {
  font-family: inherit; font-size: 1rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--text); width: 100%; max-width: 22rem; min-height: 2.6rem;
}
html[data-modus="dunkel"] .feld input[type="date"] { background: var(--card); color: var(--text); border-color: var(--border); color-scheme: dark; }
.feld .feld-zusatz { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-soft); margin-top: 2px; }
.fw-status { font-weight: 700; color: var(--green-dark); margin: 18px 0 0; min-height: 1.5em; }
.fw-ergebnis { margin-top: 10px; min-height: 8rem; }
.fw-hinweise { list-style: none; margin: 0 0 14px; padding: 0; }
.fw-hinweise li { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 0.95rem;
  background: var(--card); border-left: 4px solid var(--green); color: var(--text); }
.fw-hinweise li.warn { border-left-color: var(--gelb); background: var(--gelb-hell); color: var(--gelb-text); }
.fw-hinweise li.ok { border-left-color: var(--gruen-echt, #2e8b57); }
.fw-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.fw-knoepfe .knopf { max-width: 100%; }
.fw-klein { font-size: 0.85rem; color: var(--text-soft); margin-bottom: 10px; }
.fw-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.fw-liste li { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--green);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.fw-liste li.frist { border-left-color: var(--gelb); }
.fw-liste time { display: block; font-size: 0.88rem; font-weight: 700; color: var(--green-dark); }
.fw-liste .fw-titel { display: block; margin-top: 2px; color: var(--text); font-size: 1.02rem; font-weight: 700; }
.fw-liste summary { list-style: none; cursor: pointer; position: relative; padding-right: 2.4rem; }
.fw-liste summary::-webkit-details-marker { display: none; }
.fw-liste summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1.7rem; height: 1.7rem; line-height: 1.55rem; text-align: center; border-radius: 50%;
  border: 1px solid var(--border); font-weight: 700; color: var(--green-dark); }
.fw-liste details[open] > summary::after { content: "−"; }
.fw-liste .fw-text { margin-top: 8px; }
.fw-liste a { color: var(--green); }
#wecker .feld select { max-width: 30rem; }
.ergebnis .fw-liste p { font-size: 0.92rem; margin: 0 0 6px; }
.ergebnis .fw-liste p.fw-links { font-size: 0.88rem; margin: 0; }

/* Startseite: Schnellstart */
.wecker-box { border-left: 5px solid var(--green); }
.wecker-start { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.wecker-start .feld { margin-bottom: 0; flex: 1 1 12rem; min-width: 0; }
.wecker-start .feld select { max-width: none; }
.wecker-start .knopf { display: inline-block; text-decoration: none; text-align: center; max-width: 100%; }
.wecker-klein { font-size: 0.85rem; color: var(--text-soft); margin: 12px 0 0; }
.marke-neu { display: inline-block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; background: var(--green); color: #fff; border-radius: 1rem; padding: 2px 9px; vertical-align: 0.25em; margin-left: 6px; }
html[data-modus="dunkel"] .marke-neu { color: #12171f; }
html[data-modus="dunkel"] .wecker-box { border-left-color: var(--green); }

@media print {
  #wecker .feld, #wecker > .hinweis, .fw-knoepfe, .fw-klein, .fw-links { display: none !important; }
  #wecker { border: none; padding: 0; }
  .fw-ergebnis { background: #fff; border: none; padding: 0; min-height: 0; }
  .fw-liste li { break-inside: avoid; page-break-inside: avoid; padding: 6pt 8pt; }
  .fw-liste summary { padding-right: 0; }
  html.fw-druck main > *:not(#wecker):not(h2):not(.stand) { display: none !important; }
  .fw-liste summary::after { display: none; }
}