@import url("https://api.fontshare.com/v2/css?f[]=zodiak@400,500,700&f[]=satoshi@400,500,700&display=swap");

:root {
  --papier: #FAF8F4;
  --papier-tief: #F2EEE7;
  --tinte: #1B211E;
  --tinte-leise: #5C635E;
  /* Tiefgrün ist zurückgenommen: es bewertet nur noch. Verwendung ausschliesslich in der
     grünen Ampel (--ampel-gruen), im Vertrauensband und im Prototyp-Hinweisstreifen.
     Alles, was vorher nur dekorativ grün war, traegt jetzt Marineblau.
     Kontrast --kiefer auf --papier 6,07:1. */
  --kiefer: #1F6B4A;
  --kiefer-hell: #E2F0E8;
  --terrakotta: #DC6428;
  --terrakotta-tief: #BC521B;   /* eine Stufe dunkler, für Flächen und kleine Schrift mit Kontrastbedarf */
  --linie: #DED8CE;

  /* Markenfarben aus dem neuen Zeichen: Türkis --wasser und Marineblau --wasser-tief.
     --wasser ist ausschliesslich Grafikfarbe (Logo, Zierlinie, Akzentlinien).
     Niemals Text, niemals Knopf: gemessen 2,44:1 auf --papier, 2,24:1 auf --papier-tief,
     2,59:1 auf --flaeche-karte — das reicht nur für grosse grafische Elemente.
     --wasser-tief traegt Text, Links und ruhige Flaechen: 10,45:1 auf --papier,
     9,58:1 auf --papier-tief, 11,08:1 auf --flaeche-karte, 9,38:1 auf --wasser-hell.
     Handlungsfarbe bleibt --terrakotta. */
  --wasser: #06B2BE;
  --wasser-tief: #123E63;
  --wasser-hell: #E4EDF8;

  --ampel-gruen: #2F8A5B;
  --ampel-gelb: #C08A2E;
  --ampel-grau: #8A8F8C;

  --flaeche-karte: #FFFFFF;
  --schatten: 0 1px 2px rgba(27, 33, 30, .04), 0 8px 24px rgba(27, 33, 30, .05);

  --serif: "Zodiak", "Iowan Old Style", Georgia, serif;
  --grotesk: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  --mass: 68ch;
  --rand: clamp(1.25rem, 5vw, 3rem);
}

html[data-modus="dunkel"] {
  --terrakotta-tief: #F0854B;
  --papier: #151917;
  --papier-tief: #1D2220;
  --tinte: #EDE9E1;
  --tinte-leise: #A9B0AA;
  --kiefer: #6FC79A;
  --kiefer-hell: #1C302A;
  --terrakotta: #F0854B;
  --linie: #333B36;
  /* Marineblau ist auf dunklem Grund unsichtbar und wird aufgehellt (#123E63 → #7FB4E8).
     Das Türkis bleibt unveraendert und ist auf dunklem Grund kontraststark genug (6,86:1
     auf --papier), bleibt aber Grafikfarbe. Gemessene Kontraste (dunkel):
     --wasser-tief #7FB4E8 auf --papier 8,11:1, auf --papier-tief 7,37:1,
     auf --flaeche-karte 7,54:1, auf --wasser-hell 6,27:1; --tinte auf --wasser-hell 11,34:1. */
  --wasser: #06B2BE;
  --wasser-tief: #7FB4E8;
  --wasser-hell: #1E2E44;
  --ampel-gruen: #74CE9C;
  --ampel-gelb: #E0B25C;
  --ampel-grau: #A6ADA9;
  --flaeche-karte: #1B201E;
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 10 4 3;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-top: 2.4em; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.4rem); margin-top: 2em; }
h4 { font-size: 1.08rem; font-family: var(--grotesk); font-weight: 700; margin-top: 1.8em; }

p, ul, ol, dl { margin: 0 0 1.15em; }
li { margin-bottom: .45em; }

a {
  color: var(--wasser-tief);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .18s ease, background-color .18s ease;
}
a:hover { color: var(--terrakotta-tief); }

:focus-visible {
  outline: 3px solid var(--terrakotta);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 700; }

/* ---------- Grundraster ---------- */

.huelle { width: 100%; max-width: 78rem; margin: 0 auto; padding: 0 var(--rand); }
.lesestrecke { max-width: var(--mass); margin-left: auto; margin-right: auto; }
.abschnitt { padding-block: clamp(3rem, 7vw, 5.5rem); }
.abschnitt--tief { background: var(--papier-tief); }

.trenner { border: 0; border-top: 1px solid var(--linie); margin: 3rem 0; }

/* ---------- Prototyp-Streifen ---------- */

.hinweisstreifen {
  background: var(--kiefer-hell);
  color: var(--tinte);
  font-size: .82rem;
  letter-spacing: .02em;
  text-align: center;
  padding: .4rem var(--rand);
  border-bottom: 1px solid var(--linie);
}

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.marke:hover { color: var(--wasser-tief); }
.marke svg { color: var(--wasser-tief); flex-shrink: 0; width: 34px; height: 34px; }
.marke__wort { display: block; white-space: nowrap; }
.marke__zusatz { display: block; font-family: var(--grotesk); font-size: .66rem; letter-spacing: .085em; text-transform: uppercase; color: var(--tinte-leise); white-space: nowrap; margin-top: .12rem; }

.hauptmenue { display: flex; align-items: center; gap: 1.05rem; }
.hauptmenue a {
  color: var(--tinte);
  text-decoration: none;
  font-size: .95rem;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.hauptmenue a:hover { color: var(--wasser-tief); border-bottom-color: var(--wasser-tief); }
.hauptmenue a[aria-current="page"] { border-bottom-color: var(--terrakotta); }

.kopf__werkzeuge { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.marke { min-width: 0; }


.knopf-modus, .knopf-menue {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--tinte);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-family: var(--grotesk);
  font-size: .82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.knopf-modus:hover, .knopf-menue:hover { border-color: var(--wasser-tief); color: var(--wasser-tief); }
.knopf-menue { display: none; }

@media (max-width: 82rem) {
  .hauptmenue {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: .5rem var(--rand) 1.4rem;
    box-shadow: var(--schatten);
  }
  .hauptmenue.ist-offen { display: flex; }
  .hauptmenue a { padding: .85rem 0; border-bottom: 1px solid var(--linie); font-size: 1.05rem; }
  .hauptmenue a[aria-current="page"] { color: var(--wasser-tief); }
  .knopf-menue { display: inline-flex; }
}

@media (max-width: 30rem) {
  .kopf__zeile { gap: .5rem; min-height: 3.9rem; }
  .marke { font-size: .95rem; gap: .45rem; }
  .marke svg { width: 26px; height: 26px; }
  .marke__zusatz { font-size: .59rem; letter-spacing: .06em; }
  .knopf-modus, .knopf-menue { padding: .38rem .58rem; font-size: .76rem; }
  .kopf .huelle { padding: 0 1rem; }
}

/* ---------- Handlungsknöpfe ---------- */

.tat {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--terrakotta-tief);
  color: #FFF8F4;
  border: 1px solid var(--terrakotta-tief);
  padding: .85rem 1.5rem;
  border-radius: 4px;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.tat:hover { background: #963F13; color: #FFF8F4; transform: translateY(-1px); }
html[data-modus="dunkel"] .tat:not(.tat--ruhig) { color: #201310; }
html[data-modus="dunkel"] .tat:not(.tat--ruhig):hover { background: #F0A279; color: #201310; }
html[data-modus="dunkel"] .tat--ruhig:hover { color: var(--tinte); }

.tat--ruhig {
  background: transparent;
  color: var(--wasser-tief);
  border-color: var(--wasser-tief);
}
.tat--ruhig:hover { background: var(--wasser-hell); color: var(--wasser-tief); }

.textlink-weiter {
  display: inline-block;
  font-weight: 500;
  color: var(--wasser-tief);
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero__raster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 62rem) {
  .hero__raster { grid-template-columns: 1.05fr .95fr; }
}
.hero__vorzeile {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wasser-tief);
  margin-bottom: 1rem;
}
.hero p.hero__text { font-size: 1.2rem; color: var(--tinte-leise); max-width: 34rem; }
/* Hero-Bild: das Wasserfoto ist stark gesaettigt. Saettigung und Helligkeit werden leicht
   zurueckgenommen, damit das Blau neben Papier- und Kiefertoenen nicht vorlaut wirkt.
   Das Bild ist breit (2000 x 923); der Zuschnitt bleibt auf 3:2 bzw. 16:9 mobil, weil die
   Wasserflaeche eine gleichmaessige Textur ist und an keiner Stelle ein Motiv beschnitten wird. */
.hero__bild img { border-radius: 6px; box-shadow: var(--schatten); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.hero__bild--wasser img {
  aspect-ratio: 3 / 2;
  object-position: center 58%;
  filter: saturate(.78) brightness(.94) contrast(1.02);
}
@media (max-width: 61.99rem) {
  .hero__bild--wasser img { aspect-ratio: 16 / 9; }
}
html[data-modus="dunkel"] .hero__bild--wasser img { filter: saturate(.72) brightness(.8) contrast(1.02); }
.hero__taten { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }

/* Absenderzeile im Hero: rundes Portraet und zwei Zeilen Text unter dem Wasserbild.
   Bewusst ohne Karte, ohne Rahmen und ohne Schatten - nur eine Haarlinie trennt sie vom Bild.
   Sie schliesst die Leerflaeche in der rechten Spalte und gibt den Ich-Texten ein Gesicht,
   ohne mit dem Handlungsknopf links um Aufmerksamkeit zu konkurrieren. */
.hero__saeule { display: grid; }
.heroperson {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 1.1rem .25rem 0;
  border-top: 1px solid var(--linie);
}
.heroperson__bild {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none;
  aspect-ratio: auto;
}
.heroperson__text { margin: 0; min-width: 0; }
.heroperson__satz {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinte);
  margin: 0;
}
.heroperson__name { font-size: .82rem; line-height: 1.4; color: var(--tinte-leise); margin: .4rem 0 0; hyphens: none; }
.heroperson__name span { white-space: nowrap; }
@media (max-width: 30rem) {
  .heroperson { align-items: flex-start; }
  .heroperson__bild { width: 64px; height: 64px; }
  .heroperson__name span { white-space: normal; }
}

/* ---------- Vertrauensleiste ---------- */

.vertrauen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--papier-tief); }
.vertrauen__raster { display: grid; gap: 1.25rem 2.5rem; padding: 1.75rem 0; }
@media (min-width: 48rem) { .vertrauen__raster { grid-template-columns: repeat(3, 1fr); } }
.vertrauen__punkt { font-size: .98rem; line-height: 1.5; }
.vertrauen__punkt strong { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin-bottom: .2rem; }

/* ---------- Karten ---------- */

.karten { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .karten--drei { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .karten--zwei { grid-template-columns: repeat(2, 1fr); } }

.karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-decoration: none;
  color: var(--tinte);
  box-shadow: var(--schatten);
  transition: border-color .18s ease, transform .18s ease;
}
a.karte:hover { border-color: var(--wasser-tief); transform: translateY(-2px); color: var(--tinte); }
.karte h3 { margin: 0 0 .3em; font-size: 1.22rem; }
.karte p { margin: 0; color: var(--tinte-leise); font-size: 1rem; }
.karte__frage { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wasser-tief); }
.karte__weiter { margin-top: auto; padding-top: .9rem; color: var(--wasser-tief); font-weight: 500; font-size: .95rem; }

/* ---------- Kästen ---------- */

.kasten {
  background: var(--wasser-hell);
  border-left: 3px solid var(--wasser-tief);
  border-radius: 0 6px 6px 0;
  padding: 1.4rem 1.5rem;
  margin: 2rem 0;
}
.kasten > :last-child { margin-bottom: 0; }
.kasten h3, .kasten h4 { margin-top: 0; }

.kasten--warnung {
  background: color-mix(in srgb, var(--terrakotta) 10%, var(--papier));
  border-left-color: var(--terrakotta);
}
.kasten--erfahrung {
  background: var(--papier-tief);
  border-left-color: var(--ampel-grau);
  border: 1px dashed var(--linie);
  border-left: 3px solid var(--ampel-grau);
}
.kasten--wichtig {
  background: var(--flaeche-karte);
  border: 1px solid var(--wasser-tief);
  border-left: 6px solid var(--wasser-tief);
  box-shadow: var(--schatten);
}

.aerztlicher-hinweis {
  font-size: .92rem;
  color: var(--tinte-leise);
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
  margin-top: 2.5rem;
}

.impuls {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 2.5rem 0;
  box-shadow: var(--schatten);
}
.impuls p { margin-bottom: 1rem; }
.impuls > :last-child { margin-bottom: 0; }
.impuls > p > strong { font-family: var(--serif); font-weight: 500; }

/* ---------- Ampel ---------- */

.ampel-punkt {
  display: inline-block;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ampel-punkt--gruen { background: var(--ampel-gruen); }
.ampel-punkt--gelb { background: var(--ampel-gelb); }
.ampel-punkt--grau { background: var(--ampel-grau); }

.ampel-block { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--linie); }
.ampel-block__titel { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.ampel-block--gruen { border-top-color: var(--ampel-gruen); }
.ampel-block--gelb { border-top-color: var(--ampel-gelb); }
.ampel-block--grau { border-top-color: var(--ampel-grau); }

.ampel-uebersicht { display: grid; gap: .75rem; margin: 2rem 0; }
.ampel-zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem 1rem;
  align-items: start;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .95rem 1.1rem;
}
.ampel-zeile__thema { font-weight: 700; font-size: 1rem; grid-column: 2; }
.ampel-zeile__wissen { color: var(--tinte-leise); font-size: .97rem; grid-column: 2; }
.ampel-zeile > .ampel-punkt { grid-column: 1; grid-row: 1; margin-top: .45rem; }
@media (min-width: 44rem) {
  .ampel-zeile { grid-template-columns: auto minmax(11rem, 17rem) 1fr; align-items: center; }
  .ampel-zeile__wissen { grid-column: 3; grid-row: 1; }
  .ampel-zeile > .ampel-punkt { margin-top: 0; }
}

/* ---------- Tabellen ---------- */

.tabellenrahmen { margin: 2rem 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .98rem; }
th, td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-family: var(--grotesk); font-weight: 700; font-size: .88rem; letter-spacing: .03em; text-transform: uppercase; color: var(--tinte-leise); }

@media (max-width: 46rem) {
  table.stapelt thead { display: none; }
  table.stapelt tr {
    display: block;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--flaeche-karte);
    padding: .5rem .9rem;
    margin-bottom: .9rem;
  }
  table.stapelt td { display: block; border: 0; padding: .45rem 0; }
  table.stapelt td + td { border-top: 1px solid var(--linie); }
  table.stapelt td::before {
    content: attr(data-spalte);
    display: block;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    margin-bottom: .15rem;
  }
}

/* ---------- Zeitleiste ---------- */

.zeitleiste { margin: 2.5rem 0; }
.tag {
  border-left: 2px solid var(--linie);
  padding: 0 0 2rem 1.6rem;
  position: relative;
}
.tag::before {
  content: "";
  position: absolute;
  left: -.44rem; top: .45rem;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: var(--wasser-tief);
}
.tag:last-child { border-left-color: transparent; }
.tag h3 { margin-top: 0; }
.tag__marke { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wasser-tief); }
.tag dl { display: grid; gap: .35rem .9rem; margin: .8rem 0 0; }
.tag dt { font-weight: 700; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-leise); }
.tag dd { margin: 0 0 .7rem; }
.tag p { margin: .7rem 0; }
.tag__hinweis {
  margin-top: 1rem !important;
  padding: .7rem .9rem;
  border-left: 3px solid var(--wasser-tief);
  background: var(--flaeche-karte);
  border-radius: 0 4px 4px 0;
  font-size: .95rem;
}

/* ---------- Aufklappbares ---------- */

details {
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--flaeche-karte);
  padding: .2rem 1.1rem;
  margin: 1rem 0;
}
summary {
  cursor: pointer;
  font-weight: 700;
  padding: .9rem 0;
  font-size: 1rem;
}
summary:hover { color: var(--wasser-tief); }
details[open] summary { border-bottom: 1px solid var(--linie); margin-bottom: .9rem; }

/* ---------- Schritte ---------- */

.schritte { display: grid; gap: 1rem; counter-reset: schritt; margin: 2rem 0; }
@media (min-width: 58rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritt {
  border-top: 2px solid var(--linie);
  padding-top: 1rem;
  position: relative;
}
.schritt__zahl { font-family: var(--serif); font-size: 1.6rem; color: var(--wasser-tief); display: block; line-height: 1; margin-bottom: .5rem; }
.schritt h3 { margin: 0 0 .35em; font-size: 1.12rem; }
.schritt p { font-size: .97rem; color: var(--tinte-leise); margin: 0; }
.schritt--wichtig { border-top-color: var(--terrakotta); }
.schritt__stempel {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terrakotta-tief);
  border: 1px solid var(--terrakotta-tief);
  border-radius: 999px;
  padding: .1rem .55rem;
  margin-bottom: .5rem;
}

/* ---------- Angebotsleiter ---------- */

.angebot {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schatten);
}
.angebot__preis { font-family: var(--serif); font-size: 1.55rem; color: var(--wasser-tief); margin: .2rem 0 .6rem; }
.angebot ul { padding-left: 1.1rem; font-size: .97rem; color: var(--tinte-leise); }
.angebot .tat, .angebot .textlink-weiter { margin-top: auto; }

/* ---------- Formular ---------- */

.formular { display: grid; gap: 1.1rem; max-width: 32rem; }
label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: .35rem; }
input[type="text"], input[type="email"], input[type="number"] {
  width: 100%;
  font-family: var(--grotesk);
  font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--flaeche-karte);
  color: var(--tinte);
}
input:focus { border-color: var(--wasser-tief); }
.einwilligung { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; line-height: 1.5; }
.einwilligung input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.einwilligung label { font-weight: 400; margin: 0; }
.feldhinweis { font-size: .88rem; color: var(--tinte-leise); }

.bestaetigung {
  border: 1px solid var(--wasser-tief);
  background: var(--wasser-hell);
  border-radius: 6px;
  padding: 1.75rem;
}

/* ---------- Eignungscheck ---------- */

.check { max-width: 44rem; margin: 0 auto; }
.check__balken { height: 5px; background: var(--linie); border-radius: 999px; overflow: hidden; margin-bottom: .6rem; }
.check__balken span { display: block; height: 100%; background: var(--wasser-tief); width: 0; transition: width .3s ease; }
.check__stand { font-size: .85rem; color: var(--tinte-leise); margin-bottom: 1.75rem; }
.frage {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: var(--schatten);
}
.frage h2 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.frage__erlaeuterung { color: var(--tinte-leise); font-size: 1rem; }
.antworten { display: grid; gap: .7rem; margin: 1.5rem 0 0; }
.antwort {
  text-align: left;
  font-family: var(--grotesk);
  font-size: 1.02rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .95rem 1.1rem;
  cursor: pointer;
  color: var(--tinte);
  transition: border-color .15s ease, background-color .15s ease;
}
.antwort:hover { border-color: var(--wasser-tief); background: var(--wasser-hell); }
.check__fuss { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.knopf-zurueck {
  background: transparent;
  border: 0;
  color: var(--tinte-leise);
  font-family: var(--grotesk);
  font-size: .95rem;
  cursor: pointer;
  text-decoration: underline;
  padding: .4rem 0;
}
.knopf-zurueck:hover { color: var(--wasser-tief); }

.frage__direkt { margin: 1.2rem 0 0; }
.frage__direkt button {
  background: transparent;
  border: 0;
  color: var(--wasser-tief);
  font-family: var(--grotesk);
  font-size: .95rem;
  cursor: pointer;
  text-decoration: underline;
  padding: .4rem 0;
  text-align: left;
}
.frage__direkt button:hover { color: var(--tinte); }
#frage-titel:focus { outline: none; }

.ergebnis { border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche-karte); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--schatten); }
.ergebnis__kopf { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.ergebnis__kennung { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.ergebnis--gruen { border-top: 5px solid var(--ampel-gruen); }
.ergebnis--gelb { border-top: 5px solid var(--ampel-gelb); }
.ergebnis--rot { border-top: 5px solid var(--terrakotta); }
.ergebnis h2 { margin-top: 0; }
.ergebnis__gruende { margin: 1.25rem 0; padding-left: 1.1rem; }
.ergebnis__gruende li { margin-bottom: .6rem; }

.nicht-sichtbar { display: none !important; }

/* ---------- Bilder im Text ---------- */

.bildblock { margin: 2.5rem 0; }
.bildblock img { border-radius: 6px; box-shadow: var(--schatten); width: 100%; object-fit: cover; }
.bildblock figcaption { font-size: .88rem; color: var(--tinte-leise); margin-top: .6rem; }

/* ---------- Fuß ---------- */

.fuss { background: var(--papier-tief); border-top: 1px solid var(--linie); margin-top: 4rem; padding-block: 3rem 2.5rem; font-size: .95rem; }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 { font-family: var(--grotesk); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 .9rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss a { color: var(--tinte); }
.fuss a:hover { color: var(--wasser-tief); }
.fuss__schluss { border-top: 1px solid var(--linie); margin-top: 2.5rem; padding-top: 1.25rem; color: var(--tinte-leise); font-size: .88rem; }

/* ---------- Einblenden ---------- */

@media (prefers-reduced-motion: no-preference) {
  .blendet-ein { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .blendet-ein.ist-da { opacity: 1; transform: none; }
}

.springmarke {
  position: absolute;
  left: -9999px;
  background: var(--wasser-tief);
  color: var(--papier);
  padding: .7rem 1.1rem;
  z-index: 100;
}
.springmarke:focus { left: 1rem; top: .5rem; }

/* ---------- Zierlinie: ruhiges Trennmotiv aus dem W-Strich ---------- */

.abschnitt + .abschnitt::before,
.zierlinie {
  content: "";
  display: block;
  width: 122px;
  height: 26px;
  margin: 0 auto 3.4rem;
  background: url("../bilder/zierlinie.svg") no-repeat center center;
  background-size: 122px 26px;
}
html[data-modus="dunkel"] .abschnitt + .abschnitt::before,
html[data-modus="dunkel"] .zierlinie {
  background-image: url("../bilder/zierlinie-dunkel.svg");
}
.zierlinie { margin: 2.8rem auto; }
@media (max-width: 40rem) {
  .abschnitt + .abschnitt::before, .zierlinie {
    width: 104px; height: 22px; background-size: 104px 22px; margin-bottom: 2.4rem;
  }
}

/* ---------- Mitgliedsstufen des Fastenkanals ---------- */

.stufen { display: grid; gap: 1.25rem; margin-top: 2rem; align-items: stretch; }
@media (min-width: 52rem) { .stufen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .stufen { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 76rem) { .stufen--vier { grid-template-columns: repeat(4, 1fr); } }
.stufe {
  display: flex;
  flex-direction: column;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--linie);
  border-radius: 8px;
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: var(--schatten);
  min-width: 0;
}
.stufe--empfohlen { border-color: var(--wasser-tief); border-top-color: var(--wasser-tief); }
.stufe__marke {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--grotesk);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--wasser-tief);
  border-radius: 999px;
  padding: .25rem .6rem;
  margin-bottom: .7rem;
}
.stufe__platzhalter { display: block; height: 1.85rem; }
@media (max-width: 76rem) { .stufe__platzhalter { display: none; } }
.stufe h3 { margin: 0 0 .25em; font-size: 1.12rem; overflow-wrap: break-word; }
.stufe__preis { font-family: var(--serif); font-size: 1.5rem; color: var(--wasser-tief); margin: .1rem 0 .1rem; line-height: 1.2; }
.stufe__zahl { font-size: .86rem; color: var(--tinte-leise); margin: 0 0 .8rem; }
.stufe ul { margin: 0 0 1rem; padding-left: 1.05rem; font-size: .93rem; color: var(--tinte-leise); }
.stufe ul li { margin-bottom: .35rem; overflow-wrap: break-word; }
.stufe__wem { font-size: .9rem; margin: 0 0 1rem; }
.stufe .tat, .stufe .textlink-weiter { margin-top: auto; align-self: flex-start; }
.stufen__fuss { margin-top: 1.75rem; }
.stufen__fuss .feldhinweis { margin-top: .8rem; }

/* ---------- Begrüßungsvideo, Zwei-Klick-Lösung ---------- */

.videokarte {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 8px;
  box-shadow: var(--schatten);
  padding: 1rem;
  min-width: 0;
}
.videoflaeche {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--papier-tief);
}
.videoflaeche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.videoflaeche__abspiel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 33, 30, .34);
}
.videoflaeche__abspiel span {
  font-family: var(--grotesk);
  font-size: .95rem;
  font-weight: 700;
  color: #FFF8F4;
  background: var(--terrakotta-tief);
  border-radius: 999px;
  padding: .7rem 1.15rem;
}
html[data-modus="dunkel"] .videoflaeche__abspiel span { color: #17110C; }
.videoflaeche:hover .videoflaeche__abspiel span, .videoflaeche:focus-visible .videoflaeche__abspiel span { background: var(--wasser-tief); color: var(--papier); }
.videokarte__titel { font-family: var(--serif); font-size: 1.05rem; margin: .85rem 0 .3rem; }
.videokarte__hinweis { font-size: .84rem; color: var(--tinte-leise); margin: 0; }
.videokarte iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }
.videofilm {
  display: block;
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
  aspect-ratio: 478 / 850;
  border-radius: 6px;
  background: #12181c;
  outline: none;
}
.videoblock { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 58rem) { .videoblock { grid-template-columns: .82fr 1.18fr; } }
.videoblock__punkte { list-style: none; margin: 0; padding: 0; }
.videoblock__punkte li { padding-left: 1.5rem; position: relative; margin-bottom: .9rem; color: var(--tinte-leise); }
.videoblock__punkte li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; border-radius: 999px; background: var(--wasser-tief); }
.videoblock__punkte strong { color: var(--tinte); }
@media (min-width: 48rem) { .vertrauen__raster--vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .vertrauen__raster--vier { grid-template-columns: repeat(4, 1fr); } }
.vertrauen__punkt a { color: inherit; }

/* Breite Vergleichstabelle: darf aus der Lesestrecke heraustreten */
.tabellenrahmen--breit {
  width: min(74rem, calc(100vw - 2 * var(--rand)));
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 46rem) { .tabellenrahmen--breit { width: 100%; margin-left: 0; transform: none; } }
.stufe__wem { margin-top: auto; }
.stufe .tat, .stufe .textlink-weiter { margin-top: .2rem; }
.stufe__marke { white-space: nowrap; }
/* Nur die Preisspalte bleibt unumbrochen. Die Leistungsspalte MUSS umbrechen,
   sonst sprengt die Tabelle jede Bildschirmbreite. */
.tabelle-stufen th:nth-child(2), .tabelle-stufen td:nth-child(2) { white-space: nowrap; }
.tabelle-stufen td:nth-child(3) { min-width: 20rem; }
/* Keine automatische Trennung: sie zerlegt "Fastenbegleiter" zu "Fastenbegle-iter". */
.tabelle-stufen th, .tabelle-stufen td { hyphens: manual; }
.tabelle-stufen th:nth-child(4), .tabelle-stufen td:nth-child(4) { min-width: 11.5rem; }
.tabelle-stufen .tat { white-space: nowrap; font-size: .92rem; }
@media (max-width: 46rem) {
  /* Im gestapelten Modus darf keine Mindestbreite stehen bleiben, sonst laeuft
     die Karte seitlich aus dem Bildschirm. */
  .tabelle-stufen th, .tabelle-stufen td { white-space: normal !important; min-width: 0 !important; }
}

/* Kostenlose Einstiegsstufe: schmales Band ueber den Bezahlstufen (Startseite) */
.stufe-null {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px dashed var(--wasser-tief);
  border-radius: 14px;
  background: var(--wasser-hell);
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.stufe-null__text { flex: 1 1 24rem; }
.stufe-null__marke {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wasser-tief);
  margin: 0 0 .35rem;
}
.stufe-null h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.stufe-null p:last-of-type { margin: 0; font-size: .94rem; color: var(--tinte-leise); }
.stufe-null .tat { flex: 0 0 auto; }
@media (max-width: 40rem) { .stufe-null { padding: 1.15rem 1.15rem; } .stufe-null .tat { width: 100%; text-align: center; } }

/* ---------- Begleitungsleiter: drei Stufen ---------- */

.leiter { display: grid; gap: 1.25rem; margin-top: 2rem; align-items: stretch; }
/* Drei Karten: unter 76 rem gestapelt in einer Spalte, damit keine einzelne Karte
   allein in einer zweiten Reihe haengt oder gequetscht wirkt. */
@media (min-width: 76rem) { .leiter { grid-template-columns: repeat(3, 1fr); } }
.leiterstufe {
  display: flex;
  flex-direction: column;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--linie);
  border-radius: 8px;
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: var(--schatten);
  min-width: 0;
}
.leiterstufe--2 { border-top-color: var(--wasser); }
.leiterstufe--3 { border-top-color: var(--wasser-tief); }
.leiterstufe__zahl {
  font-family: var(--grotesk);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.leiterstufe__punkte { display: flex; gap: .3rem; margin: .55rem 0 .7rem; }
.leiterstufe__punkte i { width: .5rem; height: .5rem; border-radius: 999px; border: 1px solid var(--linie); background: transparent; }
.leiterstufe__punkte i.ist-voll { background: var(--wasser-tief); border-color: var(--wasser-tief); }
.leiterstufe h3 { margin: 0 0 .35em; font-size: 1.12rem; overflow-wrap: break-word; }
.leiterstufe__wem { font-size: .88rem; color: var(--wasser-tief); margin: 0 0 .6rem; font-weight: 700; }
.leiterstufe p { font-size: .95rem; color: var(--tinte-leise); }
.leiterstufe__preis { font-family: var(--serif); font-size: 1.3rem; color: var(--tinte); margin: auto 0 .8rem; line-height: 1.25; }
.leiterstufe .textlink-weiter { align-self: flex-start; }

/* ---------- Fachkreis-Balken unterhalb der Mitgliedsstufen ----------
   Der Professional-Zugang ist keine Verbraucherstufe. Er steht deshalb als eigener,
   liegender Balken unter den Saeulen: andere Form, andere Flaeche, eigene Kennung. */

.fachbalken {
  margin-top: 1.5rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--wasser-tief);
  border-left: 6px solid var(--wasser-tief);
  border-radius: 0 10px 10px 0;
  background: var(--wasser-hell);
  display: grid;
  gap: 1.25rem 2rem;
}
@media (min-width: 62rem) { .fachbalken { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.fachbalken__kennung {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wasser-tief);
  border: 1px solid var(--wasser-tief);
  border-radius: 999px;
  padding: .18rem .6rem;
  margin: 0 0 .6rem;
}
.fachbalken h3 { margin: 0 0 .4rem; font-size: 1.18rem; }
.fachbalken p { font-size: .96rem; margin: 0 0 .7rem; }
.fachbalken ul { margin: 0 0 .8rem; padding-left: 1.05rem; font-size: .93rem; color: var(--tinte-leise); }
.fachbalken li { margin-bottom: .3rem; }
.fachbalken__preis { font-family: var(--serif); font-size: 1.4rem; color: var(--tinte); margin: 0 0 .5rem; }
.fachbalken__wege { display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: center; }
.fachbalken > :last-child > :last-child { margin-bottom: 0; }

/* ---------- Newsletter-Einladung nach den drei Stufen ---------- */

.brief-einladung {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--wasser);
  border-radius: 10px;
  background: var(--flaeche-karte);
  box-shadow: var(--schatten);
  display: grid;
  gap: 1.25rem 2.5rem;
}
@media (min-width: 62rem) { .brief-einladung { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.brief-einladung h2 { margin: 0 0 .5rem; font-size: clamp(1.35rem, 2.8vw, 1.8rem); }
.brief-einladung p { margin: 0 0 .8rem; }
.brief-einladung ul { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .97rem; color: var(--tinte-leise); }
.brief-einladung li { margin-bottom: .4rem; }
.brief-einladung > div > :last-child { margin-bottom: 0; }

/* Breite Bausteine (Säulen, Fachkreis-Balken) dürfen wie die breite Tabelle
   aus der Lesestrecke heraustreten. */
.aus-lesestrecke {
  width: min(74rem, calc(100vw - 2 * var(--rand)));
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 46rem) { .aus-lesestrecke { width: 100%; margin-left: 0; transform: none; } }

/* In den schmalen Spalten (Stufen, Leiter, Fachbalken, Karten) wird nicht getrennt:
   die automatische Trennung liefert dort Trennstellen mitten in zusammengesetzten
   Woertern ("fastener-fahren", "Interessier-ten-Level"). Die Spalten sind breit
   genug, dass ohne Trennung nichts ueberlaeuft. */
.stufe, .stufe li, .leiterstufe, .fachbalken, .fachbalken li, .karte, .stufe-null,
.shopbalken, .shopbalken li {
  hyphens: manual;
}

/* ── Shop-Balken: ein prominenter, klar abgesetzter Einstieg in den Shop ───────
   Traegt die Handlungsfarbe --terrakotta, weil hier gekauft wird. Bewusst als
   voller Balken ueber die Breite, damit er sich von den Karten unterscheidet. */
.shopbalken {
  border: 1px solid var(--terrakotta);
  border-left: 6px solid var(--terrakotta);
  border-radius: 0 10px 10px 0;
  background: var(--flaeche-karte);
  box-shadow: var(--schatten);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: 1.4rem 2.5rem;
}
@media (min-width: 62rem) {
  .shopbalken { grid-template-columns: 1.25fr 1fr; align-items: center; }
}
.shopbalken__kennung {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terrakotta-tief);
  border: 1px solid var(--terrakotta-tief);
  border-radius: 999px;
  padding: .18rem .6rem;
  margin: 0 0 .7rem;
}
.shopbalken h2 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
.shopbalken p { margin: 0 0 .7rem; font-size: 1rem; }
.shopbalken > :last-child > :last-child { margin-bottom: 0; }
.shopbalken ul {
  margin: 0 0 1rem;
  padding-left: 1.05rem;
  font-size: .95rem;
  color: var(--tinte-leise);
}
.shopbalken li { margin-bottom: .35rem; }
.shopbalken__wege { display: flex; flex-wrap: wrap; gap: .9rem 1.35rem; align-items: center; }

/* Fachbalken in einer schmalen Lesestrecke: einspaltig, damit die rechte Spalte nicht zerläuft */
.fachbalken--einspaltig { grid-template-columns: 1fr; }
@media (min-width: 62rem) { .fachbalken--einspaltig { grid-template-columns: 1fr; } }
.fachbalken--einspaltig > div + div { border-top: 1px solid var(--linie); padding-top: 1.1rem; }

/* Umschalter zwischen den beiden Evidenzseiten (ein Menüpunkt, zwei Seiten) */
.unterreiter{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:1.75rem 0 0;
  padding:0; list-style:none;
  border-top:1px solid var(--linie);
  padding-top:1.25rem;
}
.unterreiter__hinweis{
  flex:0 0 100%;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinte-leise); margin:0 0 .35rem;
}
.unterreiter a{
  display:inline-block;
  padding:.55rem 1.05rem;
  border:1px solid var(--linie);
  border-radius:999px;
  font-size:.95rem;
  line-height:1.3;
  text-decoration:none;
  color:var(--tinte);
  background:transparent;
  transition:background .18s ease, border-color .18s ease;
}
.unterreiter a:hover{ border-color:var(--tinte-leise); background:var(--papier-tief); }
.unterreiter a[aria-current="page"]{
  background:var(--tinte);
  border-color:var(--tinte);
  color:var(--papier);
  font-weight:600;
}
@media (max-width:520px){
  .unterreiter a{ width:100%; text-align:center; }
}

/* Hochformatiges Porträt neben dem Lesetext (Über mich) */
.bildblock--portraet { max-width: 290px; float: right; margin: .2rem 0 1.4rem 2rem; }
.bildblock--portraet img { aspect-ratio: auto; }
@media (max-width: 46rem) {
  .bildblock--portraet { float: none; max-width: 100%; margin: 1.6rem 0; }
}

/* ---------- Slogan der bisherigen Startseite ---------- */

.hero__slogan {
  margin: .9rem 0 1.1rem;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.35;
  color: var(--wasser-tief);
  max-width: 34em;
}
html[data-modus="dunkel"] .hero__slogan { color: var(--wasser-hell); }

/* ---------- Direkt weiter (schmaler Streifen) ---------- */

.direktstreifen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem 1.6rem;
  padding: 1.1rem 1.4rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.direktstreifen__titel {
  margin: 0;
  font-family: var(--grotesk);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  flex: 0 0 auto;
}
.direktstreifen__wege { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.direktstreifen__wege a {
  font-family: var(--grotesk);
  font-size: .97rem;
  font-weight: 600;
  color: var(--wasser-tief);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.direktstreifen__wege a:hover { border-bottom-color: var(--wasser-tief); }
html[data-modus="dunkel"] .direktstreifen__wege a { color: var(--wasser-hell); }
html[data-modus="dunkel"] .direktstreifen__wege a:hover { border-bottom-color: var(--wasser-hell); }
@media (max-width: 40rem) {
  .direktstreifen { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .direktstreifen__wege { flex-direction: column; gap: .55rem; }
}

/* ---------- Sozialkanaele im Fussbereich ---------- */

.fuss__sozial {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.fuss__sozial-titel {
  margin: 0;
  font-family: var(--grotesk);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.fuss__sozial ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.3rem;
}
.fuss__sozial li { margin: 0; }
.fuss__sozial a {
  font-family: var(--grotesk);
  font-size: .95rem;
  font-weight: 600;
  color: var(--wasser-tief);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.fuss__sozial a:hover { border-bottom-color: var(--wasser-tief); }
html[data-modus="dunkel"] .fuss__sozial a { color: var(--wasser-hell); }
html[data-modus="dunkel"] .fuss__sozial a:hover { border-bottom-color: var(--wasser-hell); }
@media (max-width: 40rem) {
  .fuss__sozial { flex-direction: column; align-items: flex-start; }
  .fuss__sozial ul { gap: .5rem 1.1rem; }
}

/* ---------- Zeitstrahl: was wann gebraucht wird ---------- */
.strahl { margin-top: 2rem; }
.strahl__phasen {
  list-style: none; margin: 0; padding: 3.4rem 0 0; position: relative;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr);
}
.strahl__phasen::before {
  content: ""; position: absolute; top: 2.4rem; left: .4rem; right: 1.6rem; height: 3px;
  background: linear-gradient(to right, var(--wasser-hell), var(--wasser) 20%, var(--wasser) 80%, var(--wasser-hell));
  border-radius: 3px;
}
.strahl__phasen::after {
  content: ""; position: absolute; top: 1.95rem; right: 1rem;
  border-left: .7rem solid var(--wasser); border-top: .45rem solid transparent; border-bottom: .45rem solid transparent;
}
.strahl__phase { position: relative; }
.strahl__zeit {
  position: absolute; top: -3.4rem; left: .1rem; margin: 0;
  font-family: var(--grotesk); font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--wasser-tief);
}
.strahl__punkt {
  position: absolute; top: -1.55rem; left: 0; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--wasser); border: 3px solid var(--papier-tief);
}
.strahl__karte {
  background: var(--flaeche-karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 1.2rem 1.2rem 1rem; box-shadow: var(--schatten); height: 100%;
  display: flex; flex-direction: column;
}
.strahl__titel { font-size: clamp(1.1rem, 2.1vw, 1.35rem); margin: 0 0 .35rem; }
.strahl__satz { font-size: .95rem; color: var(--tinte-leise); margin: 0 0 .9rem; }
.strahl__waren { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.strahl__waren li { margin: 0; }
.strahl__ware {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--grotesk); font-size: .95rem; font-weight: 600; text-decoration: none;
  color: var(--tinte); background: var(--papier-tief); border: 1px solid transparent;
  border-radius: 9px; padding: .55rem .7rem; transition: border-color .15s, background .15s;
}
.strahl__ware:hover, .strahl__ware:focus-visible { border-color: var(--wasser); background: var(--wasser-hell); }
.strahl__zeichen { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: var(--wasser-tief); }
.strahl__zeichen--gross { width: 2.1rem; height: 2.1rem; }
.strahl__name { flex: 1 1 auto; }
.strahl__preis { font-weight: 500; font-size: .87rem; color: var(--tinte-leise); white-space: nowrap; }
.strahl__ware:hover .strahl__preis { color: var(--tinte); }
.strahl__preis--gratis { color: var(--kiefer); font-weight: 700; }
.strahl__spanne { margin: 1rem calc((100% - 2.5rem) / 6) 0; }
.strahl__begleitung {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  text-decoration: none; color: inherit; background: var(--flaeche-karte);
  border: 1px solid var(--linie); border-radius: 14px; border-bottom: 3px solid var(--kiefer);
  padding: 1rem 1.3rem; box-shadow: var(--schatten); transition: border-color .15s;
  position: relative;
}
.strahl__begleitung::before, .strahl__begleitung::after {
  content: ""; position: absolute; top: -1px; width: 1.1rem; height: 3px;
  background: var(--kiefer); opacity: .35; border-radius: 2px;
}
.strahl__begleitung::before { left: -1.1rem; }
.strahl__begleitung::after { right: -1.1rem; }
.strahl__begleitung__rechts { flex: 0 0 auto; text-align: right; }
.strahl__anfrage { margin: .6rem 0 0; text-align: right; }
.strahl__anfrage a {
  display: inline-block; font-family: var(--grotesk); font-size: .88rem; font-weight: 600;
  text-decoration: none; color: #fff; background: var(--kiefer); border-radius: 999px;
  padding: .5rem 1.1rem; white-space: nowrap; transition: opacity .15s;
}
.strahl__anfrage a:hover, .strahl__anfrage a:focus-visible { opacity: .85; }
.strahl__begleitung h3 { margin: .1rem 0 .3rem; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.strahl__begleitung > div > p:last-child { margin: 0; font-size: .95rem; color: var(--tinte-leise); }
.strahl__begleitung-preis {
  margin: 0; flex: 0 0 auto; text-align: right; font-family: var(--grotesk);
  font-size: 1.05rem; font-weight: 700; color: var(--kiefer); white-space: nowrap;
}
.strahl__begleitung-preis span { display: block; margin-top: .25rem; font-size: .78rem; font-weight: 500; line-height: 1.45; color: var(--tinte-leise); }
.strahl__beratung { margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--linie); }
.strahl__beratung-titel {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-family: var(--grotesk); font-size: .87rem; font-weight: 700; color: var(--tinte);
}
.strahl__beratung-wege { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.strahl__beratung-wege a {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; flex: 1 1 5.2rem;
  font-family: var(--grotesk); font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--tinte); background: var(--papier-tief); border: 1px solid transparent;
  border-radius: 9px; padding: .4rem .3rem; text-align: center; transition: border-color .15s, background .15s;
}
.strahl__beratung-wege a:hover, .strahl__beratung-wege a:focus-visible { border-color: var(--wasser); background: var(--wasser-hell); }
.strahl__beratung-wege span { font-weight: 500; font-size: .78rem; color: var(--tinte-leise); }
.strahl__basis {
  display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1.6rem;
  text-decoration: none; color: inherit; background: var(--wasser-hell);
  border: 1px solid var(--linie); border-top: 3px solid var(--wasser);
  border-radius: 14px; padding: 1.1rem 1.3rem; transition: border-color .15s;
}
.strahl__basis:hover, .strahl__basis:focus-visible { border-color: var(--wasser); }
.strahl__basis h3 { margin: .15rem 0 .3rem; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.strahl__basis p { margin: 0; font-size: .96rem; color: var(--tinte-leise); }
.strahl__zeit--basis { position: static; }
@media (max-width: 52rem) {
  .strahl__phasen { grid-template-columns: 1fr; gap: 1.6rem; padding: .4rem 0 0 2.4rem; }
  .strahl__phasen::before {
    top: .6rem; bottom: 1.2rem; left: 1rem; right: auto; width: 3px; height: auto;
    background: linear-gradient(to bottom, var(--wasser-hell), var(--wasser) 20%, var(--wasser) 80%, var(--wasser-hell));
  }
  .strahl__phasen::after {
    top: auto; bottom: .5rem; left: .58rem; right: auto;
    border-left: .45rem solid transparent; border-right: .45rem solid transparent;
    border-top: .7rem solid var(--wasser); border-bottom: 0;
  }
  .strahl__zeit { position: static; margin: 0 0 .4rem; }
  .strahl__punkt { top: .25rem; left: -1.93rem; }
  .strahl__basis { margin-left: 0; }
  .strahl__spanne { margin: 1.4rem 0 0; }
  .strahl__begleitung { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .strahl__begleitung-preis { text-align: left; }
  .strahl__anfrage { text-align: left; }
  .strahl__begleitung::before, .strahl__begleitung::after { display: none; }
}

/* ---------- Eignungscheck, Fassung 20 Fragen (09.09.2026) ---------- */
.frage__abschnitt {
  border-left: 3px solid var(--wasser-tief);
  background: var(--wasser-hell);
  padding: .85rem 1.1rem;
  border-radius: 0 8px 8px 0;
  color: var(--tinte);
  font-size: 1rem;
  margin: 0 0 1.75rem;
}
.antwort--gewaehlt {
  border-color: var(--wasser-tief);
  background: var(--wasser-hell);
  box-shadow: inset 0 0 0 1px var(--wasser-tief);
}
.ergebnis__baustein {
  border-top: 1px solid var(--linie);
  padding-top: 1.35rem;
  margin-top: 1.6rem;
}
.ergebnis__ware {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.1rem;
  padding: .9rem 1.1rem;
  margin-top: .7rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche-karte);
  text-decoration: none;
  color: inherit;
}
.ergebnis__ware:hover {
  border-color: var(--wasser-tief);
  background: var(--wasser-hell);
}
.ergebnis__ware-text { display: block; }
.ergebnis__ware-text strong { display: block; color: var(--wasser-tief); }
.ergebnis__ware-text span {
  display: block;
  margin-top: .2rem;
  color: var(--tinte-leise);
  font-size: .94rem;
}
.ergebnis__ware-preis {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 34rem) {
  .ergebnis__ware { flex-direction: column; gap: .45rem; }
}

/* Newsletter-Anker direkt unter dem Hero: erstes Angebot der Seite, ruhig gesetzt. */
.newsletteranker {
  display: grid;
  gap: .9rem 2rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--wasser);
  border-radius: 10px;
  background: var(--flaeche-karte);
}
@media (min-width: 52rem) { .newsletteranker { grid-template-columns: 1fr auto; } }
.newsletteranker__satz { margin: .35rem 0 0; font-size: 1rem; }
.newsletteranker__tat { text-align: left; }
@media (min-width: 52rem) { .newsletteranker__tat { text-align: right; } }

/* ---------- Quellenapparat der Evidenzseite ---------- */

.quellenmarke { font-size: .72em; line-height: 0; white-space: nowrap; }
.quellenmarke .quellenzeiger {
  color: var(--wasser-tief);
  text-decoration: none;
  font-weight: 600;
  padding: 0 .05em;
}
.quellenmarke .quellenzeiger:hover { text-decoration: underline; }

.quellenliste { margin: 1.5rem 0 0; padding-left: 1.6rem; }
.quellenliste li {
  margin-bottom: .6rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}
.quellenliste li:target {
  background: var(--wasser-hell);
  border-radius: 4px;
  padding: .15rem .4rem;
  margin-left: -.4rem;
}
.quellenliste a { color: var(--tinte); }

/* Platzhaltertext in Evidenzdokumenten im Aufbau */
.platzhalter-text {
  color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
  padding-left: .9rem;
}

/* Das hidden-Attribut muss staerker sein als display-Regeln wie .formular { display: grid } */
[hidden] { display: none !important; }

/* ---------- Shop: Sprungziele nicht unter die sticky Kopfzeile schieben ---------- */
html { scroll-padding-top: 6rem; }
#my-store-110985225,
#my-store-110985225 .ec-store,
#my-store-110985225 [class*="ecwid-productBrowser"] { scroll-margin-top: 6rem; }

/* ============================================================
   Aufklappmenü "Fasten verstehen" (Punkt 1.1)
   ============================================================ */
.menue-gruppe { position: relative; display: flex; align-items: center; }
.menue-gruppe__knopf {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tinte);
  font-family: inherit;
  font-size: .95rem;
  padding: .3rem 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  white-space: nowrap;
}
.menue-gruppe__knopf:hover { color: var(--wasser-tief); border-bottom-color: var(--wasser-tief); }
.menue-gruppe[data-aktuell="true"] > .menue-gruppe__knopf { border-bottom-color: var(--terrakotta); }
.menue-gruppe__pfeil {
  width: .5rem; height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-15%, -15%);
  transition: transform .18s ease;
}
.menue-gruppe__knopf[aria-expanded="true"] .menue-gruppe__pfeil { transform: rotate(-135deg) translate(-15%, -15%); }

.menue-gruppe__klappe {
  display: none;
  position: absolute;
  top: calc(100% + .55rem);
  left: -1rem;
  min-width: 15.5rem;
  flex-direction: column;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: .6rem;
  box-shadow: var(--schatten);
  padding: .4rem;
  z-index: 60;
}
.menue-gruppe__knopf[aria-expanded="true"] + .menue-gruppe__klappe { display: flex; }
/* Brücke über den Abstand zwischen Knopf und Klappe: ohne sie verlässt der
   Mauszeiger die Gruppe und das Menü schliesst, bevor ein Eintrag erreichbar ist. */
.menue-gruppe__klappe::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -.75rem;
  height: .75rem;
}
.menue-gruppe__klappe a {
  display: block;
  padding: .55rem .7rem;
  border-radius: .4rem;
  border-bottom: 0;
  font-size: .92rem;
  white-space: nowrap;
}
.menue-gruppe__klappe a:hover { background: var(--papier-tief); color: var(--wasser-tief); border-bottom: 0; }
.menue-gruppe__klappe a[aria-current="page"] { color: var(--wasser-tief); background: var(--wasser-hell); border-bottom: 0; }

@media (max-width: 82rem) {
  .menue-gruppe { display: block; }
  .menue-gruppe__knopf {
    width: 100%;
    justify-content: space-between;
    padding: .85rem 0;
    border-bottom: 1px solid var(--linie);
    font-size: 1.05rem;
  }
  .menue-gruppe[data-aktuell="true"] > .menue-gruppe__knopf { color: var(--wasser-tief); border-bottom-color: var(--linie); }
  .menue-gruppe__klappe {
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--papier-tief);
    padding: .2rem 0 .5rem;
  }
  .menue-gruppe__klappe::before { display: none; }
  .menue-gruppe__klappe a { padding: .7rem .9rem; font-size: 1rem; border-bottom: 0; }
}

/* ============================================================
   Situationseingänge unter dem Hero (Punkt 1.2)
   ============================================================ */
.situationen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--papier-tief); padding: 2.2rem 0; }
.situationen__titel {
  font-family: var(--grotesk);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 1.1rem;
}
.situationen__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.situation {
  display: block;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: .7rem;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: var(--tinte);
  transition: border-color .18s ease, transform .18s ease;
}
.situation:hover { border-color: var(--wasser-tief); transform: translateY(-2px); }
.situation__wort { display: block; font-family: var(--serif); font-size: 1.18rem; line-height: 1.3; margin-bottom: .35rem; }
.situation__zusatz { display: block; font-family: var(--grotesk); font-size: .87rem; color: var(--tinte-leise); line-height: 1.45; }
.situation__ziel { display: block; font-family: var(--grotesk); font-size: .83rem; color: var(--wasser-tief); margin-top: .6rem; }
@media (max-width: 52rem) {
  .situationen__reihe { grid-template-columns: 1fr; gap: .7rem; }
}

/* ============================================================
   Sprungleiste und Inhaltsverzeichnis (Punkt 1.3)
   ============================================================ */
.sprungleiste {
  position: sticky;
  top: var(--kopfhoehe, 4.4rem);
  z-index: 40;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  padding: .5rem 0;
}
.sprungleiste__rolle { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .15rem; }
.sprungleiste__rolle::-webkit-scrollbar { height: 4px; }
.sprungleiste__rolle::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 4px; }
.sprungleiste a {
  flex: 0 0 auto;
  font-family: var(--grotesk);
  font-size: .82rem;
  text-decoration: none;
  color: var(--tinte-leise);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .32rem .72rem;
  white-space: nowrap;
}
.sprungleiste a:hover { color: var(--wasser-tief); border-color: var(--wasser-tief); }
.sprungleiste a.ist-hier { background: var(--wasser-tief); border-color: var(--wasser-tief); color: var(--papier); }
html[data-modus="dunkel"] .sprungleiste a.ist-hier { color: var(--papier); }
.sprungleiste__wort { font-family: var(--grotesk); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 .45rem; }

.inhaltsuebersicht { border: 1px solid var(--linie); border-radius: .7rem; background: var(--flaeche-karte); padding: 1.3rem 1.5rem; margin: 0 0 2.2rem; }
.inhaltsuebersicht > p { font-family: var(--grotesk); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 .8rem; }
.inhaltsuebersicht ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.inhaltsuebersicht li { margin: 0 0 .45rem; font-size: .95rem; break-inside: avoid; }
.inhaltsuebersicht a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie); }
.inhaltsuebersicht a:hover { color: var(--wasser-tief); border-bottom-color: var(--wasser-tief); }
@media (max-width: 46rem) { .inhaltsuebersicht ol { columns: 1; } }

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
.tag[id], [data-sprungziel] { scroll-margin-top: 8.5rem; }

/* ---------- Medikamenten-Navigator (Suchfeld auf /medikamente/) ---------- */

.navigator {
  margin: 1.6rem 0 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 8px;
}
.navigator__marke {
  display: block;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: .4rem;
}
.navigator__feld {
  width: 100%;
  font: inherit;
  padding: .65rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--flaeche);
  color: inherit;
}
.navigator__feld:focus-visible { outline: 2px solid var(--wasser); outline-offset: 2px; }
.navigator__stand { margin: .55rem 0 0; font-size: .9rem; color: var(--tinte-leise); }

/* Ohne diese Regel bliebe eine ausgefilterte Zeile im gestapelten Modus sichtbar,
   weil table.stapelt tr auf display:block steht. */
tr[hidden], table.stapelt tr[hidden] { display: none; }

/* ---------- Getraenke-Abschnitt „Was darf ich trinken?" ---------- */

.trinken__marke {
  margin-bottom: .2rem;
  padding-left: .7rem;
  border-left: 4px solid var(--linie);
}
.trinken__marke--ja { border-left-color: #2f7d4f; }
.trinken__marke--vielleicht { border-left-color: #b8862b; }
.trinken__marke--nein { border-left-color: #a8452f; }
.trinken__kennung { margin: 0 0 .7rem; color: var(--tinte-leise); font-size: .95rem; }

/* Spaltenbreiten im Navigator: die Erklaerspalte braucht den meisten Platz. */
@media (min-width: 48rem) {
  #med-tabelle th:nth-child(1), #med-tabelle td:nth-child(1) { width: 17%; }
  #med-tabelle th:nth-child(2), #med-tabelle td:nth-child(2) { width: 21%; }
  #med-tabelle th:nth-child(3), #med-tabelle td:nth-child(3) { width: 47%; }
  #med-tabelle th:nth-child(4), #med-tabelle td:nth-child(4) { width: 15%; }
}

/* Ketose-Wertetabelle: Zahlenspalte nicht umbrechen */
@media (min-width: 48rem) {
  #ketose table td:first-child { white-space: nowrap; width: 18%; }
}


/* Weiter-Knopf der Mehrfachfrage im Eignungscheck */
.frage__weiter {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
}
.frage__weiter button {
  font-family: var(--grotesk);
  font-size: 1rem;
  padding: .7rem 1.7rem;
  border-radius: 6px;
  border: 1px solid var(--wasser-tief);
  background: var(--wasser-tief);
  color: #fff;
  cursor: pointer;
  transition: opacity .15s ease;
}
.frage__weiter button:hover:not([disabled]) { opacity: .88; }
.frage__weiter button[disabled] { opacity: .4; cursor: not-allowed; }
.frage__weiter-hinweis { color: var(--tinte-leise); font-size: .9rem; }