/* =========================================================================
   Gesundes Leben, Verein zur Gesundheitspflege
   Stylesheet der Vereinswebsite

   Die Gestaltung folgt dem Etikett und dem Logo:
   weisse Flaeche, fast schwarze Schrift, Blattgruen als einzige Buntfarbe,
   geometrische Groteske in Versalien mit weiter Sperrung fuer Kleintitel.

   Zwei Schriften:  Montserrat (Titel), Barlow (Fliesstext)
   Drei Farben:     Schwarz #0a0a0a, Blattgruen #55933a, Weiss

   Leitgedanke der Ueberarbeitung: weniger Kaesten, mehr Linien und Luft.
   Vorher war fast jeder Block eine weisse Karte mit 1px Rahmen. Wenn alles
   gleich schwer ist, fuehrt nichts, und die Seite wirkt zusammengesteckt.
   Jetzt tragen Linien und Abstaende die Gliederung, und eine Karte ist die
   Ausnahme, die etwas hervorhebt.
   ========================================================================= */

/* ---------- Schriften ---------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Gestaltungswerte -------------------------------------------- */

:root {
  /* Schwarz wie auf dem Etikett */
  --schwarz: #0a0a0a;
  --tinte: #141714;
  --tinte-weich: #4b524a;
  --tinte-hell: #656c63;   /* dunkel genug fuer 4,5:1 auf Weiss */

  /* Blattgruen aus dem Logo, dunkleres Gruen von der Etikett-Unterzeile */
  --gruen: #55933a;
  --gruen-tief: #47772d;
  --gruen-dunkel: #375d23;
  --gruen-band: #22371a;
  --gruen-blass: #eff5eb;

  /* Flaechen */
  --weiss: #ffffff;
  --flaeche: #f5f7f3;
  --linie: #e3e8de;
  --linie-zart: #eef1ea;

  --radius: 3px;
  --radius-gross: 10px;

  --spalte: 1140px;
  /* Zeilenlaenge. 33rem sind bei 18,75px Wurzel rund 620px, in Barlow bei
     21px Schriftgroesse etwa 64 Zeichen. Angenehm sind 60 bis 70. */
  --lesespalte: 33rem;

  /* Eine Abstandsleiter statt Einzelwerten. Vorher stand ueberall ein
     anderer Wert (1.15 / 1.25 / 1.35 / 1.6 / 1.75rem), und genau daran
     erkennt man zusammengesteckte Seiten. */
  --a1: .35rem;
  --a2: .7rem;
  --a3: 1.1rem;
  --a4: 1.6rem;
  --a5: 2.4rem;
  --a6: 3.4rem;

  --schatten-zart: 0 1px 2px rgba(10, 10, 10, .04), 0 6px 18px rgba(10, 10, 10, .05);
  --schatten: 0 2px 4px rgba(10, 10, 10, .05), 0 14px 34px rgba(10, 10, 10, .08);

  --titel: "Montserrat", "Segoe UI", -apple-system, sans-serif;
  --text: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Grundlagen --------------------------------------------------- */

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

/* Rasterspalten duerfen nie an einem langen Wort aufreissen.
   Ohne min-width:0 setzt der laengste unteilbare Inhalt die Spaltenbreite
   und die Seite scrollt am Handy quer. */
.aufmacher__raster > *,
.belege__liste > *,
.paar > *,
.kacheln > *,
.vitrine > *,
.schritte > *,
.fuss__raster > * { min-width: 0; }

html {
  /* Wurzelgroesse statt body-Groesse: fast alle Masse hier stehen in rem, und
     rem misst am Wurzelelement. Wer nur den body hochsetzt, bekommt groesseren
     Fliesstext neben unveraenderten Ueberschriften und Knoepfen.
     117.1875 % sind 18,75px. Damit liegt der Fliesstext bei 21px, was diese
     Leserschaft ohne Lesebrille schafft. Breakpoints in Media Queries bleiben
     davon unberuehrt, die rechnen immer mit 16px. */
  font-size: 117.1875%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.125rem;       /* 21px */
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--gruen-dunkel); }
a:hover { color: var(--gruen-band); }

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

h1, h2, h3, h4 {
  font-family: var(--titel);
  font-weight: 700;
  color: var(--schwarz);
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 .55em;
  text-wrap: balance;
  /* Deutsche Komposita wie "Allgemeine Geschaeftsbedingungen" sind laenger
     als eine Handy-Spalte. Ohne Trennung schiebt die Ueberschrift die Seite auf. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Die Stufen liegen bewusst weit auseinander. Vorher lagen h3 (1.5rem),
   Kartentitel (1rem) und Fliesstext (1.1875rem) so dicht beieinander, dass
   innerhalb eines Abschnitts nichts gefuehrt hat. */
h1 { font-size: clamp(2.05rem, 1.3rem + 2.7vw, 3.05rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.62rem, 1.2rem + 1.6vw, 2.15rem); }
h3 { font-size: 1.32rem; line-height: 1.26; letter-spacing: -.012em; }
h4 { font-size: 1.125rem; line-height: 1.35; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
p, li { text-wrap: pretty; }

strong { font-weight: 600; color: var(--schwarz); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--a6) 0;
}

/* ---------- Bausteine ---------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Schmal heisst hier: schmaler Satzspiegel, gleiche linke Kante.
   Mit `max-width` plus `margin:auto` waere der Block in der Seitenmitte
   gelandet und haette eine zweite linke Kante aufgemacht. Genau solche
   verrutschten Kanten lassen eine Seite zusammengesteckt wirken. */
.huelle--schmal > * { max-width: 42rem; }

/* Der Titelblock der Unterseiten. Vorher stand hier ein Inline-Stil mit
   max-width:820px, und weil die Huelle mittig sitzt, ruckte damit die
   linke Kante des Seitentitels um 160px nach rechts, waehrend alle
   Abschnitte darunter links blieben. Genau so entsteht der Eindruck,
   eine Seite sei aus Teilen zusammengesetzt. */
.seitenkopf { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.seitenkopf > * { max-width: 46rem; }

.nachsatz { margin-top: var(--a5); }

.band { padding-block: clamp(3.4rem, 6.5vw, 6rem); }
.band--eng { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); }

.band--flaeche { background: var(--flaeche); }
.band--gruen {
  background: var(--gruen-band);
  color: #d9e3d3;
}
.band--gruen h2,
.band--gruen h3 { color: #fff; }
.band--gruen a { color: #cadfbe; }
.band--gruen strong { color: #fff; }

/* Die kleinen Vorzeilen ueber den Ueberschriften sind raus. Sie hatten den
   Abschnitten ihren Auftakt gegeben, ohne den faengt jeder Abschnitt
   uebergangslos an. Ein kurzer gruener Strich ersetzt das: kein zusaetzlicher
   Text, aber derselbe Rhythmus, und dieselbe Zeichensprache wie im
   Mitgliederbereich. */
.band h2::before,
.seitenkopf h1::before {
  content: "";
  display: block;
  width: 1.9rem;
  height: 2px;
  background: var(--gruen);
  margin-bottom: var(--a3);
}
.mitte h2::before { margin-inline: auto; }
.band--gruen h2::before { background: #6ea94f; }
/* In Rechtstexten stehen zu viele Zwischentitel, da wuerde der Strich
   zum Muster statt zum Auftakt. */
.rechtstext h2::before { display: none; }

.vorspann {
  font-size: 1.22rem;
  line-height: 1.58;
  color: var(--tinte-weich);
  max-width: var(--lesespalte);
}
.band--gruen .vorspann { color: #bccdb4; }

/* Raster tragen ihren Abstand zur Ueberschrift selbst. Steht kein Text
   davor, faellt dieser Abstand mit der Polsterung des Bandes zusammen und
   reisst ein Loch. */
.huelle > .vitrine:first-child,
.huelle > .kacheln:first-child,
.huelle > .schritte:first-child,
.huelle > .video:first-child,
.huelle > .fragen:first-child { margin-top: 0; }

.lesespalte { max-width: var(--lesespalte); }
.mitte { margin-inline: auto; text-align: center; }
.mitte .vorspann { margin-inline: auto; }

/* Fliesstext in einer Textspalte bekommt die Lesebreite, egal wo er steht. */
.band p:not(.vorspann):not(.knopf-hinweis):not(.unterschrift) { max-width: var(--lesespalte); }
.mitte p { margin-inline: auto; }

/* ---------- Schaltflaechen ----------------------------------------------- */

/* Es gibt genau einen Hauptknopf: gruen gefuellt. Alles Zweitrangige ist ein
   Textlink. Vorher stand neben dem gruenen Knopf ein gleich grosser mit
   schwarzem Rahmen, und zwei gleich schwere Knoepfe nebeneinander heben
   einander auf. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.4rem;
  padding: .8rem 1.9rem;
  border: 2px solid var(--gruen-tief);
  border-radius: var(--radius);
  background: var(--gruen-tief);
  color: #fff;
  font-family: var(--titel);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.knopf:hover {
  background: var(--gruen-dunkel);
  border-color: var(--gruen-dunkel);
  color: #fff;
  transform: translateY(-1px);
}
.knopf:active { transform: translateY(0); }

.knopf--gross {
  min-height: 3.9rem;
  font-size: 1.1rem;
  padding-inline: 2.3rem;
}

/* Am Handy laeuft der Hauptknopf ueber die volle Breite. Das ist das
   groesste Klickziel, das die Spalte hergibt, und es erspart den Umbruch
   mitten in "Mitglied werden fuer 19 Euro". */
@media (max-width: 599px) {
  .knopf--gross { width: 100%; padding-inline: 1.1rem; }
  .knopfzeile { gap: .2rem 1rem; }
}

/* Zweitrangig heisst hier: Textlink mit Pfeil, kein zweiter Kasten. */
.knopf--leise {
  background: transparent;
  border-color: transparent;
  color: var(--gruen-dunkel);
  padding-inline: .2rem;
  min-height: 3.4rem;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: .32em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #b6cfa6;
}
.knopf--leise:hover {
  background: transparent;
  border-color: transparent;
  color: var(--gruen-band);
  text-decoration-color: var(--gruen);
  transform: none;
}
.knopf--leise { gap: .35rem; }
.knopf--leise::after { content: "\203A"; font-size: 1.25em; line-height: 1; text-decoration: none; }

/* Auf dunklem Grund kehrt sich die Schaltflaeche um:
   gruen auf gruen waere zu kontrastarm */
.band--gruen .knopf {
  background: #fff;
  border-color: #fff;
  color: var(--gruen-band);
}
.band--gruen .knopf:hover {
  background: var(--gruen-blass);
  border-color: var(--gruen-blass);
  color: var(--gruen-band);
}
.band--gruen .knopf--leise {
  background: transparent;
  border-color: transparent;
  color: #dcead4;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.band--gruen .knopf--leise:hover { color: #fff; text-decoration-color: #fff; }

.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  margin-top: var(--a5);
}
.knopfzeile--mitte,
.mitte .knopfzeile { justify-content: center; }
.mitte--abstand { margin-bottom: var(--a6); }

.knopf-hinweis {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinte-hell);
  margin-top: var(--a3);
  max-width: 30rem;
}
.mitte .knopf-hinweis { margin-inline: auto; }
.band--gruen .knopf-hinweis { color: #9aab92; }

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

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--schwarz);
  color: #fff;
  padding: .8rem 1.4rem;
  z-index: 200;
}
.sprungmarke:focus { left: .5rem; top: .5rem; color: #fff; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linie-zart);
  transition: box-shadow .2s ease;
}
.kopf[data-gescrollt="ja"] { box-shadow: var(--schatten-zart); }

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.6rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--schwarz);
  flex-shrink: 0;
}
.marke img { width: 122px; height: auto; }

.navigation {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.navigation__liste {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation__liste li { margin: 0; }

.navigation__liste a {
  color: var(--tinte);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.navigation__liste a:hover,
.navigation__liste a[aria-current="page"] {
  color: var(--gruen-dunkel);
  border-bottom-color: var(--gruen);
}

.kopf .knopf {
  min-height: 2.9rem;
  padding: .5rem 1.25rem;
  font-size: .9rem;
  /* Zweizeilig sah der Knopf im Kopf aus wie verrutscht. */
  white-space: nowrap;
}

.burger {
  display: none;
  margin-left: auto;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--schwarz);
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .burger { display: flex; }
  .navigation {
    position: fixed;
    inset: 4.6rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    margin-left: 0;
    display: none;
  }
  .navigation[data-offen="ja"] { display: flex; }
  .navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navigation__liste a {
    display: block;
    padding: .9rem 0;
    border-bottom: 1px solid var(--linie-zart);
    font-size: 1.125rem;
  }
  .navigation__liste a:hover,
  .navigation__liste a[aria-current="page"] { border-bottom-color: var(--linie-zart); }
  .kopf .knopf {
    margin-top: 1.25rem;
    min-height: 3.4rem;
    font-size: 1rem;
  }
}

/* ---------- Aufmacher ---------------------------------------------------- */

.aufmacher {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}

.aufmacher__raster {
  display: grid;
  gap: clamp(2.4rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.6rem, 5vw, 4.6rem);
}
@media (min-width: 900px) {
  /* Text bekommt mehr Platz als das Bild. Das Bild belegt, der Text verkauft. */
  .aufmacher__raster { grid-template-columns: 1.15fr .85fr; }
}

.aufmacher h1 { margin-bottom: .5em; }

/* Kurze Nutzenzeilen direkt unter dem Vorspann */
.aufmacher__punkte {
  list-style: none;
  margin: var(--a4) 0 0;
  padding: 0;
  max-width: var(--lesespalte);
}
.aufmacher__punkte li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .55rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinte-weich);
}
.aufmacher__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .56em;
  width: .8rem;
  height: .42rem;
  border-left: 2.5px solid var(--gruen);
  border-bottom: 2.5px solid var(--gruen);
  transform: rotate(-45deg);
}

/* Das Portraet ist der Aufmacher. Bei einer Zielgruppe, die dem Handel
   misstraut, traegt ein Gesicht mit Namen mehr als sechs Dosen. Die
   Bildunterschrift steht unter dem Bild und nicht darauf: alles, was auf
   einem Bild klebt, sieht nach Werbeaufkleber aus. */
.portraet { margin: 0; }

.portraet__bild {
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--flaeche);
}
.portraet__bild img { width: 100%; }

.portraet figcaption {
  display: block;
  margin-top: var(--a3);
  padding-left: 1rem;
  border-left: 3px solid var(--gruen);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinte-hell);
}
.portraet__name {
  display: block;
  font-family: var(--titel);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--schwarz);
  margin-bottom: .15rem;
}

/* ---------- Signaturblock ------------------------------------------------ */
/* Am Ende des Gruendertextes: kleines rundes Bild, Name, Rolle, darunter der
   Schriftzug. Klein und rund, damit es das grosse Portraet im Aufmacher
   aufgreift statt mit ihm zu konkurrieren. */

.signatur {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: var(--a5);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie);
}
.signatur__portraet {
  flex: none;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  object-fit: cover;
  /* Der Kopf sitzt im Bild oben. Mittig zugeschnitten waere das Kinn ab. */
  object-position: center 20%;
}
.signatur__text { min-width: 0; }
.signatur__name {
  display: block;
  font-family: var(--titel);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--schwarz);
}
.signatur__rolle {
  display: block;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tinte-hell);
}
.signatur__zug {
  width: auto;
  max-width: 11rem;
  height: auto;
  margin-top: .8rem;
  /* Der Schriftzug liegt als dunkles Blau auf Weiss vor. multiply nimmt das
     Weiss heraus, damit er auch auf getoenten Flaechen wie Tinte wirkt. */
  mix-blend-mode: multiply;
}

/* ---------- Belege: drei Marken unter dem Aufmacher ---------------------- */
/*
   Drei Marken mit voellig verschiedenem Eigengewicht: eine schwarze
   Wortmarke, eine rot-weisse Flagge, eine kleine gruene Wortmarke. Frueher
   sassen sie in drei Kaesten nebeneinander und wirkten hingelegt.
   Jetzt: eine ruhige Zeile mit Trennlinien, jede Marke auf gleicher
   Grundlinie und in gleicher Hoehe, darunter genau ein Wort. Die Plakette
   traegt die Ordnung, nicht die Marke.
*/

/* Die Leiste braucht eine eigene Flaeche, sonst laeuft sie zwischen dem
   weissen Aufmacher und dem Abschnitt darunter einfach mit. Blasses Gruen
   aus der Palette: hebt sich nach oben und unten ab, ohne eine vierte Farbe
   einzufuehren. Der Abschnitt darunter steht dafuer auf Weiss. */
.belege {
  border-top: 1px solid #dde8d4;
  border-bottom: 1px solid #dde8d4;
  background: var(--gruen-blass);
}
.belege__liste {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .belege__liste { grid-template-columns: repeat(3, 1fr); }
}

.beleg {
  margin: 0;
  padding: var(--a4) 0;
  border-top: 1px solid #dde8d4;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.beleg:first-child { border-top: 0; }
@media (min-width: 820px) {
  .beleg {
    border-top: 0;
    border-left: 1px solid #dde8d4;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a3);
    padding: var(--a5) var(--a5) var(--a5) var(--a4);
  }
  .beleg:first-child { border-left: 0; padding-left: 0; }
  .beleg:last-child { padding-right: 0; }
}

/* Feste Hoehe fuer alle drei, sonst bestimmt die groesste Marke die Zeile. */
.beleg__plakette {
  flex: none;
  display: flex;
  align-items: center;
  height: 1.6rem;
}
.beleg__marke { width: auto; }
.beleg__marke--hs { width: 4.6rem; height: auto; }
/* ablefy stellt sein Logo nur in 68 x 17 bereit. Hochskaliert wuerde es
   ausfransen, deshalb steht es in Originalgroesse. */
.beleg__marke--ablefy { width: 68px; height: 17px; }
.beleg__flagge {
  width: 2rem;
  height: 1.33rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
}

.beleg__titel {
  font-family: var(--titel);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--schwarz);
  min-width: 0;
}

/* ---------- Zweispalter mit Bild ---------------------------------------- */

.paar {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .paar { grid-template-columns: 1fr 1fr; }
  .paar--bild-links .paar__bild { order: -1; }
  .paar--schmales-bild { grid-template-columns: 380px 1fr; }
}

.paar__bild img {
  width: 100%;
  border-radius: var(--radius-gross);
}

.zitat {
  font-family: var(--titel);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--schwarz);
  border-left: 3px solid var(--gruen);
  padding-left: 1.4rem;
  margin: var(--a5) 0;
  max-width: var(--lesespalte);
}
.band--gruen .zitat { color: #fff; border-left-color: var(--gruen); }

.unterschrift { margin-top: var(--a4); font-size: .95rem; color: var(--tinte-hell); }
.unterschrift strong {
  display: block;
  font-family: var(--titel);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--schwarz);
  letter-spacing: -.015em;
}

/* ---------- Bildband ueber die volle Breite ------------------------------ */

.bildband {
  position: relative;
  overflow: hidden;
}
.bildband img {
  width: 100%;
  height: clamp(13rem, 30vw, 23rem);
  object-fit: cover;
  /* hoch angesetzt, damit beim breiten Zuschnitt die Gesichter im Bild bleiben */
  object-position: center 28%;
}

/* ---------- Kachelraster ------------------------------------------------- */
/* Die einzige Stelle, an der Kaesten bleiben: hier sind es vier gleichrangige
   Leistungen, und der Kasten haelt sie als Gruppe zusammen. */

.kacheln {
  display: grid;
  gap: 1rem;
  margin-top: var(--a6);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kacheln--vier { grid-template-columns: repeat(4, 1fr); } }

.kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--a5) 1.6rem;
  display: flex;
  flex-direction: column;
}
.band--gruen .kachel {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .13);
}
/* In einer 240px-Spalte passt kein "Einnahmeempfehlungen" am Stueck. Ohne
   Silbentrennung riss Chrome das Wort mitten im Buchstabenlauf auseinander. */
.kachel h3 { margin-bottom: .45rem; font-size: 1.1rem; hyphens: auto; overflow-wrap: normal; }
.kachel p { font-size: 1rem; line-height: 1.52; color: var(--tinte-weich); margin: 0; max-width: none; }
.band--gruen .kachel p { color: #bccdb4; }

.kachel__nummer {
  font-family: var(--titel);
  font-size: .74rem;
  font-weight: 700;
  color: var(--gruen-tief);
  display: block;
  margin-bottom: var(--a3);
  letter-spacing: .12em;
}
.band--gruen .kachel__nummer { color: #a9d094; }

/* ---------- Produktvitrine ---------------------------------------------- */

/* minmax(0, 1fr) statt 1fr: sonst setzt die kleinste Wortbreite die Spalte
   und lange Woerter wie "Wasserstoffperoxid" sprengen das Raster */
.vitrine {
  display: grid;
  gap: 1rem;
  margin-top: var(--a6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ware {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: .9rem .9rem 1.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ware__bild {
  aspect-ratio: 1 / 1;
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--a3);
}
.ware__bild img { width: 100%; height: 100%; object-fit: contain; }

.ware__name {
  font-family: var(--titel);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--schwarz);
  margin: 0 0 .35rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ware__menge { font-size: .88rem; color: var(--tinte-hell); margin: 0 0 var(--a3); max-width: none; }
.ware__preis {
  margin-top: auto;
  font-family: var(--titel);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--schwarz);
  max-width: none;
}
.ware__preis span {
  display: block;
  font-family: var(--text);
  font-size: .72rem;
  font-weight: 400;
  color: var(--tinte-hell);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-top: .2rem;
}
.ware[data-vergriffen="ja"] .ware__bild { opacity: .45; }

.vitrine__hinweis {
  margin-top: var(--a5);
  font-size: 1rem;
  color: var(--tinte-hell);
  text-align: center;
}
.vitrine__hinweis a { font-weight: 500; }

/* ---------- Ablauf in Schritten ------------------------------------------ */
/* Nummer und Titel in einer Zeile, ohne Kasten: drei Schritte sind eine
   Abfolge, keine drei gleichwertigen Karten. Die Linie oben bindet sie
   an dasselbe Raster wie die Verlustliste. */

.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: var(--a6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--a4) var(--a5);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .schritte { grid-template-columns: repeat(3, 1fr); } }

.schritte li {
  counter-increment: schritt;
  position: relative;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--gruen);
  border-radius: 0;
  padding: var(--a3) 0 0;
  margin: 0;
}

.schritte li::before {
  content: "Schritt " counter(schritt);
  display: block;
  font-family: var(--titel);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gruen-tief);
  margin-bottom: .5rem;
}
.schritte h3 { margin: 0 0 .45rem; font-size: 1.18rem; }
.schritte p { font-size: 1rem; line-height: 1.52; color: var(--tinte-weich); margin-bottom: .6rem; max-width: none; }
.schritte a { font-weight: 500; word-break: break-word; }

/* ---------- Beitragskarte ------------------------------------------------ */
/* Hier darf ein Kasten sein: das ist der Moment, in dem es um Geld geht,
   und er soll sich vom Rest abheben. */

.beitrag {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: clamp(2rem, 4vw, 3rem);
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

.beitrag__marke {
  display: inline-block;
  font-family: var(--titel);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gruen-tief);
  background: var(--gruen-blass);
  border-radius: 100px;
  padding: .4rem 1.1rem;
  margin-bottom: var(--a4);
}

.beitrag__preis {
  font-family: var(--titel);
  font-size: clamp(3rem, 1.9rem + 4.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--schwarz);
  line-height: 1;
  display: block;
}
.beitrag__einheit {
  font-size: 1rem;
  color: var(--tinte-hell);
  display: block;
  margin-top: .55rem;
}

.beitrag__liste { list-style: none; margin: var(--a5) 0; padding: 0; text-align: left; }
.beitrag__liste li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinte-weich);
}
.beitrag__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: .85rem;
  height: .46rem;
  border-left: 2.5px solid var(--gruen);
  border-bottom: 2.5px solid var(--gruen);
  transform: rotate(-45deg);
}
.beitrag .knopf { width: 100%; }

/* ---------- Fragen ------------------------------------------------------- */

.fragen { margin-top: var(--a6); border-top: 1px solid var(--linie); }

.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--titel);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--schwarz);
  line-height: 1.4;
  letter-spacing: -.012em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--gruen-dunkel); }
.frage summary::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 1.8rem;
  width: .62rem;
  height: .62rem;
  border-right: 2.5px solid var(--gruen);
  border-bottom: 2.5px solid var(--gruen);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.frage[open] summary::after { transform: rotate(-135deg); top: 2.05rem; }
.frage__inhalt {
  padding-bottom: var(--a4);
  max-width: var(--lesespalte);
  color: var(--tinte-weich);
  font-size: 1rem;
  line-height: 1.55;
}
.frage__inhalt p { max-width: none; }

/* ---------- Videorahmen -------------------------------------------------- */

.video {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten);
  background: var(--gruen-band);
  margin-top: var(--a5);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Zwei-Klick-Loesung: das Video laedt erst nach ausdruecklichem Klick */
.video__start {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background: var(--gruen-band);
  color: #fff;
  font-family: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2rem;
  text-align: center;
  transition: filter .2s ease;
}
.video__start:hover { filter: brightness(1.25); }

.video__pfeil {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--gruen);
  display: grid;
  place-content: center;
}
.video__pfeil::before {
  content: "";
  border-left: 1.1rem solid #fff;
  border-top: .69rem solid transparent;
  border-bottom: .69rem solid transparent;
  margin-left: .26rem;
}

.video__text {
  font-family: var(--titel);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.video__hinweis { font-size: .9rem; line-height: 1.5; color: #b3c4a9; max-width: 32rem; }

/* ---------- Merkkasten --------------------------------------------------- */

.merkkasten {
  background: var(--gruen-blass);
  border-left: 3px solid var(--gruen);
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
  padding: var(--a4) var(--a5);
  margin: var(--a5) 0;
  max-width: 40rem;
}
.merkkasten h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.merkkasten p { max-width: none; }
.merkkasten p:last-child { margin-bottom: 0; }
.merkkasten ul { margin-bottom: 0; }
.merkkasten li { font-size: 1rem; }

.hinweiskasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--a4) var(--a5);
  margin: var(--a5) 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 40rem;
}
.hinweiskasten p { max-width: none; }
.hinweiskasten strong { color: var(--schwarz); }

/* ---------- Rechtstexte -------------------------------------------------- */

.rechtstext { max-width: 40rem; font-size: 1rem; line-height: 1.62; }
.rechtstext h2 { font-size: 1.3rem; margin-top: var(--a6); }
.rechtstext h3 {
  font-size: 1.05rem;
  margin-top: var(--a5);
  font-family: var(--text);
  font-weight: 600;
  letter-spacing: 0;
}
.rechtstext p, .rechtstext li { color: var(--tinte-weich); max-width: none; }

/* ---------- Fussbereich -------------------------------------------------- */

.fuss {
  background: var(--gruen-band);
  color: #a9b9a0;
  padding-block: clamp(3rem, 5vw, 4.4rem) 2rem;
  font-size: .95rem;
  line-height: 1.6;
}
.fuss a { color: #d5e2cd; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss p { max-width: none; }

.fuss__raster { display: grid; gap: var(--a5); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr; }
}

.fuss h4 {
  color: #fff;
  font-family: var(--titel);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--a3);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .6rem; }

.fuss__marke {
  font-family: var(--titel);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: .7rem;
}

.fuss__unten {
  margin-top: var(--a6);
  padding-top: var(--a4);
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  justify-content: space-between;
  font-size: .88rem;
  color: #93a38b;
}

/* ---------- Mitlaufende Leiste am Handy ---------------------------------- */

.sockelleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 1.5rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -4px 20px rgba(10, 10, 10, .09);
  transform: translateY(105%);
  transition: transform .25s ease;
}
.sockelleiste[data-sichtbar="ja"] { transform: translateY(0); }

.sockelleiste__preis { flex-shrink: 0; line-height: 1.2; }
.sockelleiste__preis strong {
  display: block;
  font-family: var(--titel);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--schwarz);
}
.sockelleiste__preis span { font-size: .78rem; color: var(--tinte-hell); }
.sockelleiste .knopf {
  flex: 1;
  min-height: 3.1rem;
  font-size: .95rem;
  padding-inline: 1rem;
}

@media (max-width: 899px) {
  .sockelleiste { display: flex; }
  body { padding-bottom: 5.2rem; }
}

/* ---------- Kleinkram ---------------------------------------------------- */

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .kopf, .fuss, .knopf, .video, .sockelleiste { display: none; }
  body { font-size: 11pt; background: #fff; padding-bottom: 0; }
}