/* ==========================================================================
   TESTVERSION – Designrichtung "Klarwasser"
   Ergänzt style.css, überschreibt nur Farben, Schrift und Rundungen.
   Layout, Inhalte und Bilder bleiben unverändert.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --orange:        #C1622D;
  --orange-hell:   #D97D46;
  --ueberschrift:  #163832;
  --text:          #3F4A47;
  --creme:         #FBF2EA;
  --sand:          #F5E4D2;
  --linie:         #e2e8e6;

  --faq-bg:            #ffffff;
  --faq-bg-active:     #E4EEEC;
  --faq-border:        #e2e8e6;
  --faq-border-active: #9FC4BC;
  --faq-focus:         #C1622D;
  --faq-icon-bg:       #163832;
  --faq-icon-color:    #ffffff;
  --faq-text:          #3F4A47;
  --faq-title:         #163832;

  --font: "IBM Plex Sans", system-ui, sans-serif;
  --radius: 8px;
}

body { font-family: "IBM Plex Sans", system-ui, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; }

.abschnitt--creme .karte { border-color: var(--linie); }

/* Test: Wenn ein "kopf--akzent"-Kasten (eigene Cream-Box) in einem bereits
   getönten Abschnitt liegt, keine Box-in-Box bilden – Überschrift sitzt
   direkt auf der Flächenfarbe. */
.abschnitt--creme .kopf--akzent { background: transparent; }

.hinweis { border-left-color: var(--orange); }

/* Test: Seitenkopf (oberster Abschnitt der Unterseiten) standardmäßig in der
   matten, warmen Zebra-Fläche statt Weiß. */
.seitenkopf { background: var(--creme); border-bottom: 1px solid var(--linie); }

/* Schmales, getöntes Titelband nur für Augenbraue + H1. Rest des Textes
   bleibt wie ursprünglich links neben dem Foto auf Weiß. */
.hero-titel {
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem);
}
.hero-titel h1 { margin-bottom: 0; }

/* "Teufelskreis durchbrechen" (5 Schritte, Stress-Seite): auf Desktop als
   3x2-Raster anordnen (3 oben, 2 unten), alle Boxen gleich groß. Eigene
   Klasse statt :has(.schritt) – sonst greift die Regel versehentlich auch
   auf andere Seiten mit "schritt"-Karten (z.B. raster--2fest bei Trauma). */
@media (min-width: 900px) {
  .raster--teufelskreis { grid-template-columns: repeat(3, 1fr); }
}

/* "Wie Hypnosetherapie wirkt" (5 Karten, Hypnose-Seite): auf Desktop 3 oben,
   2 unten – die untere, unvollständige Reihe soll zentriert stehen statt
   linksbündig. Grid kann das nicht von allein, daher Flexbox mit
   justify-content:center nur ab Desktop-Breite. */
@media (min-width: 900px) {
  .raster--wirkt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .raster--wirkt > .karte {
    flex: 0 1 340px;
  }
}