/* =====================================================================
   juergen-graf.net — Wasser-Design
   Übersetzung des Design-Entwurfs in Klassen mit Media Queries.
   Farbanpassungen gegenüber dem Entwurf (WCAG 2.1 AA, 4,5:1):
     Akzent   #a5664a -> #9f6347
     Grauton  #8b7f78 -> #7b706a
   ===================================================================== */

/* --- Schriften (selbst gehostet, SIL Open Font License) -------------- */

@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* --- Farben und Grundmaße -------------------------------------------- */

:root {
  --grund:        #faf7f3;
  --karte:        rgba(255, 255, 255, 0.94);
  --karte-rand:   #ece5db;
  --warm:         rgba(242, 236, 226, 0.92);
  --warm-rand:    rgba(231, 220, 205, 0.85);
  --linie:        #eae2d8;
  --zitat-linie:  #d8c3b1;

  --tinte:        #2e2b28;
  --text:         #57504a;
  --text-lead:    #4c453f;
  --text-karte:   #6b625b;
  --grau:         #7b706a;
  --grau-tief:    #6e645e;   /* für Nebentext auf dem warmen Band */

  --akzent:        #9f6347;
  --akzent-dunkel: #8d543b;

  --band:        #9f6347;   /* Hinweisband über der Kopfzeile */
  --band-text:   #fdf6ef;
  --band-punkt:  #f0c9ac;

  --fuss-grund:   #33302d;
  --fuss-hell:    #f4ece2;
  --fuss-text:    #e8e0d6;
  --fuss-neben:   #b3a89d;
  --fuss-rubrik:  #c49a7d;
  --fuss-linie:   #46423d;
  --fuss-grau:    #a19a91;

  --serif: "Lora", Georgia, serif;
  --sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Zeilenmass — Breite der Inhaltsspalte und damit die maximale
     Laenge einer Fliesstextzeile. Bilder, Karten, Baender und Listen
     uebernehmen ueber .breit dieselbe Breite, damit alle Inhalte
     buendig stehen.
     Die Untergrenze setzt die Kopfzeile: Marke und die sieben
     Menuepunkte brauchen zusammen rund 1021px, seit „Mein Angebot"
     den frueheren Punkt „Angebote" ersetzt — sonst bricht die
     Menuezeile um. Bei Source Sans 3 (wght 400) in 17.5px und einer
     mittleren Zeichenbreite von 7.47px sind 1040px rund 139 Zeichen. */
  --zeilenmass: 1040px;
  --seitenrand: 32px;
  --spalte: calc(var(--zeilenmass) + 2 * var(--seitenrand));   /* 1104px */
}

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wasser-Hintergrund: ab 900 px das volle Bild, darunter die rechte
   Bildhälfte im Hochformat unter einem kräftigeren Verlauf. Der Verlauf
   ist in dieselbe Fläche eingebacken, damit nur eine feste Ebene
   existiert. Die Höhe ist 100lvh statt inset: 0 — die größte
   Viewport-Höhe ändert sich nicht, wenn die mobile Adressleiste ein-
   und ausblendet, das Bild wird beim Scrollen also nie neu skaliert. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(250, 247, 243, 0.82) 0%,
      rgba(250, 247, 243, 0.92) 34%,
      rgba(250, 247, 243, 0.97) 100%),
    url("/res/wasser-bambus-hoch-800.jpg") center top / cover no-repeat;
  background-image:
    linear-gradient(180deg,
      rgba(250, 247, 243, 0.82) 0%,
      rgba(250, 247, 243, 0.92) 34%,
      rgba(250, 247, 243, 0.97) 100%),
    image-set(
      url("/res/wasser-bambus-hoch-800.webp") type("image/webp"),
      url("/res/wasser-bambus-hoch-800.jpg")  type("image/jpeg"));
}

@media (min-width: 900px) {
  body::before {
    background:
      linear-gradient(180deg,
        rgba(250, 247, 243, 0.62) 0%,
        rgba(250, 247, 243, 0.80) 34%,
        rgba(250, 247, 243, 0.90) 100%),
      url("/res/wasser-bambus-1600.jpg") center top / cover no-repeat;
    background-image:
      linear-gradient(180deg,
        rgba(250, 247, 243, 0.62) 0%,
        rgba(250, 247, 243, 0.80) 34%,
        rgba(250, 247, 243, 0.90) 100%),
      image-set(
        url("/res/wasser-bambus-1600.webp") type("image/webp"),
        url("/res/wasser-bambus-1600.jpg")  type("image/jpeg"));
  }
}

@media (min-width: 1700px) {
  body::before {
    background-image:
      linear-gradient(180deg,
        rgba(250, 247, 243, 0.62) 0%,
        rgba(250, 247, 243, 0.80) 34%,
        rgba(250, 247, 243, 0.90) 100%),
      image-set(
        url("/res/wasser-bambus-2200.webp") type("image/webp"),
        url("/res/wasser-bambus-2200.jpg")  type("image/jpeg"));
  }
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-dunkel); text-decoration: underline; }

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

p, li { text-wrap: pretty; }

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

address { font-style: normal; }

/* --- Sprunglink ------------------------------------------------------- */

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinte);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 4px 0;
}
.sprunglink:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

/* --- Raster ----------------------------------------------------------- */

.breit {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 var(--seitenrand);
}
.schmal {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 700px) {
  .breit, .schmal { padding: 0 20px; }
}

/* --- Abschnitte ------------------------------------------------------- */

.hero              { padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 84px); }
.seitenkopf        { padding: clamp(44px, 7vw, 76px) 0 clamp(28px, 4vw, 44px); }
.seitenkopf-eng    { padding: clamp(40px, 6vw, 64px) 0 clamp(26px, 4vw, 40px); }
.abschnitt         { padding: clamp(32px, 5vw, 56px) 0; }
.abschnitt-schmal  { padding: clamp(20px, 3vw, 32px) 0; }
.abschnitt-unten   { padding: clamp(28px, 4vw, 40px) 0 clamp(56px, 8vw, 90px); }
.abschnitt-beidseitig { padding: clamp(44px, 7vw, 76px) 0 clamp(56px, 8vw, 90px); }

/* --- Typografie ------------------------------------------------------- */

.rubrik {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
  font-weight: 600;
  margin: 0 0 20px;
}

.h-gross {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(31px, 4.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--tinte);
  max-width: 22ch;
}

.h-seite {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(29px, 4.2vw, 44px);
  line-height: 1.16;
  margin: 0 0 24px;
  color: var(--tinte);
  max-width: 26ch;
}

.h-abschnitt {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.8vw, 29px);
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--tinte);
}

.h-zwischen {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 26px);
  line-height: 1.3;
  margin: 0 0 16px;
  color: var(--tinte);
}

.h-karte {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 24px);
  margin: 0 0 10px;
  color: var(--tinte);
}

.lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
  color: var(--text-lead);
  margin: 0;
  max-width: 64ch;
}
.lead strong { font-weight: 600; color: #3a352f; }

.text {
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--text);
  margin: 0 0 20px;
  max-width: var(--zeilenmass);
}
.text:last-child { margin-bottom: 0; }
.text strong { font-weight: 600; color: #3a352f; }

.text-gross {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
.text-gross strong { font-weight: 600; color: #3a352f; }

.text-neben {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--grau);
  margin: 0 0 14px;
  max-width: var(--zeilenmass);
}
.text-neben:last-child { margin-bottom: 0; }

.absatz       { margin-bottom: 22px; }
.absatz-gross { margin-bottom: 40px; }

.zitatzeile {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.55;
  color: #5c5049;
  margin: 28px 0 0;
  max-width: 56ch;
}

.zitatblock {
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--zitat-linie);
}
.zitatblock > p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.55;
  color: #5c5049;
  margin: 0;
}
.zitatblock > .text {
  font-family: var(--sans);
  font-style: normal;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
}

.rechtshinweis {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--grau);
  font-style: italic;
  margin: 0;
  max-width: var(--zeilenmass);
  border-top: 1px solid var(--linie);
  padding-top: 24px;
}

.zurueck {
  font-size: 14px;
  display: inline-block;
  margin-bottom: 26px;
}

.weiter {
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--akzent);
  font-weight: 600;
}

/* --- Hinweisband ------------------------------------------------------ */

/* Band und Kopfzeile hängen als ein Block oben fest. So stimmt der
   Abstand auch dann, wenn der Hinweis auf schmalen Geräten umbricht. */
.kopfbereich {
  position: sticky;
  top: 0;
  z-index: 60;
}

.hinweis {
  background: var(--band);
  color: var(--band-text);
}

.hinweis-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 11px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hinweis-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--band-punkt);
  flex: none;
}

.hinweis-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* --- Randnotiz -------------------------------------------------------- */

/* Schmale Spalte neben dem Seitenkopf. Alle Zitate liegen im selben
   Rasterfeld uebereinander, sichtbar ist immer genau eines; der Wechsel
   laeuft ueber eine CSS-Animation, ohne JavaScript.
   Das Raster gibt der Spalte die Hoehe des laengsten Zitats — so springt
   der Text daneben beim Wechsel nicht.
   Unterhalb des vollen Zeilenmasses steht die Randnotiz unter dem Text
   (siehe die Media Query weiter unten); die Haarlinie bleibt, damit sie
   auch dort als Nebenstimme lesbar ist.
   Spaltenmass und Fuge sind die von .zweispalt — so steht die Haarlinie
   der Randnotiz auf der Startseite auf derselben Kante wie die des
   Zitatblocks im Abschnitt darunter. */
.mit-randnotiz {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 56px;
  row-gap: 0;
}

/* Der Text links steht in eigenen Rasterzeilen: Rubrik und Ueberschrift
   zusammen im .titelblock, darunter der Lead, darunter — nur auf
   /angebote — die Zitatzeile. */
.mit-randnotiz > .titelblock { grid-column: 1; grid-row: 1; }
.mit-randnotiz > .lead       { grid-column: 1; grid-row: 2; }
.mit-randnotiz > .zitatzeile { grid-column: 1; grid-row: 3; }

/* Die Randnotiz liegt in derselben Rasterzeile wie der Lead. Damit ist
   sie auf jeder Seite genau so hoch wie dieser Absatz — ohne festes Mass
   und ohne JavaScript —, und die Haarlinie reicht nicht bis zur
   Ueberschrift hinauf. */
.randnotiz {
  --fuge: 20px;   /* Abstand zwischen Haarlinie und Zitat */
  grid-column: 2;
  grid-row: 2;
  position: relative;
  container: randnotiz / size;
  border-left: 2px solid var(--zitat-linie);
  padding: 4px 0 4px var(--fuge);
}

/* Die Zitate stehen absolut in der Spalte. So bestimmt allein der Lead
   die Hoehe der Rasterzeile, und die Haarlinie ist genau so hoch wie er.
   Ein ausnahmsweise laengeres Zitat ragt oben und unten gleichmaessig
   ueber die Linie hinaus, statt sie zu strecken. */
.zitate {
  position: absolute;
  /* Der absolute Kasten haengt am Innenrand der Linie, nicht am
     Textbeginn — die Fuge steht deshalb hier noch einmal, statt aus
     dem padding der Randnotiz zu kommen. */
  inset: 0 0 0 var(--fuge);
  display: grid;
  align-items: center;
  min-width: 0;
}

.zitat {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  animation: zitat-blende var(--zitat-lauf) linear infinite;
}

.zitat-text {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.6;
  color: #5c5049;
}

.zitat-autor {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* Ist der Kasten niedrig — der Lead also nur drei Zeilen lang —, passt
   ein dreizeiliges Zitat samt Autorenzeile nicht mehr hinein (116px
   gegen 99px). Die langen Zitate ruecken dort eine Stufe kleiner und
   etwas enger zusammen. Gemessen wird der Kasten selbst, nicht die
   Seite: die Regel greift damit von allein auf jeder Seite und bei
   jeder Fensterbreite, und sie loest sich wieder, sobald der Lead
   laenger wird. */
@container randnotiz (max-height: 110px) {
  .zitat-lang .zitat-text {
    font-size: 15.5px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
}

/* Die zweispaltige Randnotiz lebt nur beim vollen Zeilenmass (ab
   1104px). Darunter wird die Spalte so schmal, dass die Zitate mehr
   Zeilen brauchen, als der Lead daneben hoch ist — dann steht die
   Randnotiz besser unter dem Text, wo sie allen Platz hat.
   Einspaltig steht alles in der Reihenfolge des Quelltextes; die
   Randnotiz haelt selbst Abstand nach oben, damit die Zeilenfuge nicht
   auch zwischen Ueberschrift und Lead auftaucht. */
@media (max-width: 1103px) {
  .mit-randnotiz { grid-template-columns: 1fr; }
  .mit-randnotiz > * { grid-column: 1; grid-row: auto; }
  .randnotiz { margin-top: 32px; container-type: normal; }
  .zitate { position: static; }
}

/* Ohne Bewegung bleibt das erste Zitat stehen — dasselbe, das auch
   Vorleseprogrammen angeboten wird. */
@media (prefers-reduced-motion: reduce) {
  .zitat { animation: none; }
  .zitat:first-child { opacity: 1; }
}

/* Taktzeiten, Blendkurve und die Versaetze der einzelnen Zitate setzt
   build.py ein: sie haengen an der Anzahl der Zitate in daten.py. */
:root {
  --zitat-lauf: 1140s;   /* 19 Zitate zu je 60s */
}

@keyframes zitat-blende {
  0%                      { opacity: 0; }
  0.1053%                 { opacity: 1; }
  5.1579%                 { opacity: 1; }
  5.2632%, 100%           { opacity: 0; }
}

.zitat:nth-child(1) { animation-delay: 0s; }
.zitat:nth-child(2) { animation-delay: -60s; }
.zitat:nth-child(3) { animation-delay: -120s; }
.zitat:nth-child(4) { animation-delay: -180s; }
.zitat:nth-child(5) { animation-delay: -240s; }
.zitat:nth-child(6) { animation-delay: -300s; }
.zitat:nth-child(7) { animation-delay: -360s; }
.zitat:nth-child(8) { animation-delay: -420s; }
.zitat:nth-child(9) { animation-delay: -480s; }
.zitat:nth-child(10) { animation-delay: -540s; }
.zitat:nth-child(11) { animation-delay: -600s; }
.zitat:nth-child(12) { animation-delay: -660s; }
.zitat:nth-child(13) { animation-delay: -720s; }
.zitat:nth-child(14) { animation-delay: -780s; }
.zitat:nth-child(15) { animation-delay: -840s; }
.zitat:nth-child(16) { animation-delay: -900s; }
.zitat:nth-child(17) { animation-delay: -960s; }
.zitat:nth-child(18) { animation-delay: -1020s; }
.zitat:nth-child(19) { animation-delay: -1080s; }

/* --- Kopfzeile -------------------------------------------------------- */

.kopf {
  position: relative;
  background: rgba(250, 247, 243, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(234, 226, 216, 0.9);
}

.kopf-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.marke:hover { text-decoration: none; }

.marke-bild {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}

.marke-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.marke-name {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.1;
  color: var(--tinte);
}

.marke-beruf {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grau);
  white-space: nowrap;
}

/* Hauptmenü — Aufklappfeld ohne JavaScript */

.menu-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 28px;
}

.menu-punkt { position: relative; }

.menu-link {
  display: inline-block;
  font-size: 15.5px;
  color: #57504a;
  padding: 6px 0 8px;
  border-bottom: 2px solid transparent;
}
.menu-link:hover {
  color: var(--akzent);
  text-decoration: none;
}
.menu-link.aktiv {
  color: var(--tinte);
  border-bottom-color: var(--akzent);
}

.untermenu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: -18px;
  width: 232px;
  background: #fffdfa;
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(60, 45, 32, 0.10);
  display: none;
}

/* Unsichtbare Brücke zwischen Menüpunkt und Aufklappfeld,
   damit das Feld beim Überfahren nicht zuklappt */
.hat-unterpunkte::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 100%;
  height: 12px;
}

.hat-unterpunkte:hover .untermenu,
.hat-unterpunkte:focus-within .untermenu {
  display: block;
  top: calc(100% + 10px);
}

.untermenu-link {
  display: block;
  font-size: 15px;
  color: #57504a;
  padding: 11px 14px;
  border-radius: 3px;
}
.untermenu-link:hover {
  background: #f6efe6;
  color: var(--akzent);
  text-decoration: none;
}
.untermenu-link.aktiv { color: var(--akzent); font-weight: 600; }

/* Burger-Schalter — erscheint unter 1000 px */

.menu-schalter { position: absolute; opacity: 0; }

.menu-knopf {
  display: none;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 2px;
  color: #57504a;
  font-size: 15px;
  -webkit-user-select: none;
  user-select: none;
}

.menu-balken,
.menu-balken::before,
.menu-balken::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tinte);
  border-radius: 1px;
  transition: transform 0.2s;
}
.menu-balken { position: relative; }
.menu-balken::before { position: absolute; top: -7px; }
.menu-balken::after  { position: absolute; top: 7px; }

.menu-schalter:focus-visible + .menu-knopf {
  outline: 2px solid var(--akzent-dunkel);
  outline-offset: 3px;
}

/* Marke und die sieben Menuepunkte brauchen zusammen rund 1021px
   Innenbreite. Die Kopfzeile stellt sie erst ab 1104px Fensterbreite
   bereit (dort greift ihre Hoechstbreite), darunter uebernimmt der
   Burger. Sonst bricht die Menuezeile um. */
@media (max-width: 1103px) {
  .menu-knopf { display: flex; }

  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fffdfa;
    border-bottom: 1px solid var(--karte-rand);
    box-shadow: 0 18px 34px rgba(60, 45, 32, 0.12);
    max-height: calc(100vh - 134px);
    overflow-y: auto;
  }
  .menu-schalter:checked ~ .menu { display: block; }

  .menu-schalter:checked + .menu-knopf .menu-balken { background: transparent; }
  .menu-schalter:checked + .menu-knopf .menu-balken::before { top: 0; transform: rotate(45deg); }
  .menu-schalter:checked + .menu-knopf .menu-balken::after  { top: 0; transform: rotate(-45deg); }

  .menu-liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 0;
  }

  .menu-link {
    display: block;
    padding: 13px 32px;
    font-size: 16.5px;
    border-bottom: none;
    border-left: 3px solid transparent;
  }
  .menu-link.aktiv { border-left-color: var(--akzent); background: #f6efe6; }

  /* Unterpunkte sind auf dem Handy immer sichtbar, leicht eingerückt */
  .untermenu {
    display: block;
    position: static;
    width: auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .hat-unterpunkte::after { display: none; }
  .hat-unterpunkte:hover .untermenu,
  .hat-unterpunkte:focus-within .untermenu { top: auto; }

  .untermenu-link {
    padding: 11px 32px 11px 56px;
    font-size: 15.5px;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .kopf-innen { padding: 10px 20px; gap: 14px; }
  .hinweis-innen { padding: 10px 20px; gap: 10px; }
  .hinweis-text { font-size: 14px; }
  .marke { gap: 12px; }
  .marke-bild { width: 44px; height: 44px; }
  .marke-name { font-size: 20px; }
  /* Die Berufszeile bleibt auch auf dem Handy stehen. Gemessen in
     Source Sans 3: "HEILPRAKTIKER (PSYCHOTHERAPIE)" braucht in 10px
     mit 0.06em Sperrung rund 162px — bei 360px Fensterbreite stehen
     der Markenschrift neben Bild und Burger rund 181px zur Verfuegung. */
  .marke-beruf { font-size: 10px; letter-spacing: 0.06em; }
}

/* Noch schmalere Geraete: Raender und Sperrung weiter zurueckgenommen,
   damit die Berufszeile auf einer Zeile bleibt statt zu verschwinden. */
@media (max-width: 359px) {
  .kopf-innen { padding: 10px 16px; }
  .marke { gap: 10px; }
  .marke-beruf { font-size: 9px; letter-spacing: 0.02em; }
}

/* --- Inhalt ----------------------------------------------------------- */

.inhalt { min-height: 55vh; }

.zweispalt {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 899px) {
  .zweispalt { grid-template-columns: 1fr; gap: 32px; }
}

/* Karten */

.karte {
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
  padding: 28px 32px;
}
.karte h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--tinte);
}
.karte p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-karte);
  margin: 0;
}
.karte p strong { font-weight: 600; color: #3a352f; }

.kartenstapel {
  display: grid;
  gap: 20px;
}

/* Angebotskarten der Startseite */

.kartenpaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 899px) {
  .kartenpaar { grid-template-columns: 1fr; gap: 24px; }
}

.angebotskarte {
  display: block;
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
  overflow: hidden;
  color: inherit;
  transition: box-shadow 0.25s, transform 0.25s;
}
.angebotskarte:hover {
  box-shadow: 0 16px 38px rgba(60, 45, 32, 0.11);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

.angebotskarte-bild {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.bild-hypno { object-position: center center; }
.bild-atem  { object-position: 62% 40%; }

.angebotskarte-text {
  display: block;
  padding: 26px 28px 30px;
}
.angebotskarte-text h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  margin: 0 0 12px;
  color: var(--tinte);
}
.angebotskarte-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-karte);
  margin: 0 0 18px;
}

/* Grosse Angebotskarten der Angebotsseite */

.kartenstapel-gross {
  display: grid;
  gap: 28px;
}

.angebot-breit {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
  overflow: hidden;
  color: inherit;
  transition: box-shadow 0.25s;
}
.angebot-breit:hover {
  box-shadow: 0 16px 38px rgba(60, 45, 32, 0.11);
  text-decoration: none;
  color: inherit;
}

.angebot-breit picture {
  display: block;
  height: 100%;
  min-height: 280px;
}

.angebot-breit-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.angebot-breit-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
}
.angebot-breit-text h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.7vw, 28px);
  margin: 0 0 14px;
  color: var(--tinte);
}
.angebot-breit-text p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-karte);
  margin: 0 0 20px;
}

@media (min-width: 900px) {
  .angebot-breit-getauscht picture { order: 2; }
  .angebot-breit-getauscht .angebot-breit-text { order: 1; }
}

@media (max-width: 899px) {
  .angebot-breit { grid-template-columns: 1fr; }
  .angebot-breit picture { min-height: 0; height: 220px; }
  .angebot-breit-text { padding: 26px 28px 30px; }
}

/* Seitenbild der Therapieseiten */

.seitenbild {
  width: 100%;
  height: clamp(220px, 38vw, 420px);
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.bild-hypno-kopf { object-position: center 55%; }
.bild-atem-kopf  { object-position: 60% 35%; }

/* Textblock mit Bild daneben — die Bilddatei ist bereits auf die
   Motivmitte zugeschnitten (werkzeug/bilder.py), der Zuschnitt bleibt
   daher mittig. Das Bild steht rechts, auf schmalen Schirmen rutscht es
   unter den Text. */

.text-bild-reihe {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  margin: 0 0 40px;
}
.text-bild-reihe .h-zwischen { margin-top: 0; }
.text-bild-reihe .text:last-child { margin-bottom: 0; }

.text-bild-figur { margin: 0; }
.text-bild-figur img {
  width: 100%;
  height: clamp(260px, 30vw, 380px);
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

@media (max-width: 899px) {
  .text-bild-reihe {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .text-bild-figur img { height: clamp(200px, 46vw, 300px); }
}

.bildunterschrift {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--grau);
  margin: 12px 0 0;
}

/* Warmes Band */

.band-warm {
  background: var(--warm);
  border: 1px solid var(--warm-rand);
  border-radius: 4px;
  padding: clamp(26px, 4vw, 44px);
}

/* Auf dem warmen Band reicht der Kontrast des Akzents und des Grautons
   für Kleintext nicht — dunklere Stufen derselben Töne. */
.band-warm .rubrik,
.kontaktstreifen a:not(.knopf) { color: var(--akzent-dunkel); }
.kontaktstreifen a:not(.knopf):hover { color: var(--akzent-dunkel); }
.band-warm .text-neben,
.band-warm .kartenquelle { color: var(--grau-tief); }

/* Indikationsliste */

.indikationsliste {
  list-style: disc;
  padding-left: 22px;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 11px 34px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text);
}

/* Steht das warme Band in der rechten Spalte neben dem Text, ist die
   Liste einspaltig. */
.text-bild-reihe .indikationsliste {
  grid-template-columns: 1fr;
}

.aufzaehlung {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  display: grid;
  gap: 14px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text);
  max-width: var(--zeilenmass);
}
.aufzaehlung strong { font-weight: 600; color: #3a352f; }

/* Phasen der Atemsitzung */

.phasenreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.phase h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  margin: 0 0 10px;
  color: var(--tinte);
}
.phase p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-karte);
  margin: 0;
}

/* Ablauf: die vier Schritte */

.schritte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Die vier Schritte stehen nebeneinander: engere Karten, damit die
   schmalen Spalten nicht zu eng gesetzt wirken. */
.schritte .schritt {
  padding: 26px 22px;
}
.schritte .schritt h3 {
  font-size: 18.5px;
  line-height: 1.35;
}
.schritte .schritt p {
  font-size: 15.5px;
  line-height: 1.7;
  hyphens: auto;
}
@media (max-width: 1103px) {
  .schritte { grid-template-columns: 1fr 1fr; gap: 20px; }
  .schritte .schritt { padding: 28px 32px; }
  .schritte .schritt h3 { font-size: 20px; }
  .schritte .schritt p { font-size: 16.5px; line-height: 1.75; }
}
@media (max-width: 640px) {
  .schritte { grid-template-columns: 1fr; }
}

.ziffer {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Preiskarten */

.preisreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.preiskarte {
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
  padding: 32px 34px;
}
.preiskarte-frei {
  background: var(--warm);
  border-color: var(--warm-rand);
}
.preiskarte-titel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 18px;
  color: var(--tinte);
}
.preis-gross {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--akzent);
  margin: 0 0 8px;
  line-height: 1.15;
}
.preis-einheit {
  font-size: 19px;
  color: var(--text-karte);
  white-space: nowrap;
}
.preis-klein {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-karte);
  margin: 0;
}
.preis-dauer {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 600;
  margin: 0 0 12px;
}

/* Kontaktstreifen */

.kontaktstreifen {
  background: var(--warm);
  border: 1px solid var(--warm-rand);
  border-radius: 4px;
  padding: 38px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .kontaktstreifen { padding: 28px 24px; }
}

.kontaktstreifen-titel {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.4;
  color: var(--tinte);
  margin: 0 0 8px;
}
.kontaktstreifen-satz {
  font-size: 16px;
  color: var(--text-karte);
  margin: 0;
}
.kontaktstreifen-daten {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kontaktstreifen-telefon {
  font-size: 22px;
  font-weight: 600;
}
.kontaktstreifen-email {
  font-size: 16px;
  color: var(--text-karte);
}

/* Knöpfe */

.knopf {
  display: inline-block;
  background: var(--tinte);
  color: #faf7f3;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 26px;
  border: 1px solid var(--tinte);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}
.knopf:hover {
  background: #47423c;
  color: #faf7f3;
  text-decoration: none;
}

.knopf-rand {
  background: transparent;
  color: var(--tinte);
  border-color: #c9beb1;
}
.knopf-rand:hover {
  background: #f6efe6;
  color: var(--tinte);
}

.knopfreihe {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px 0;
}

/* --- Häufige Fragen --------------------------------------------------- */

.faq-rubrik {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  font-weight: 600;
  margin: 0 0 16px;
}
.faq + .faq-rubrik { margin-top: 44px; }

.faq {
  display: grid;
  gap: 10px;
}
.faq + .rechtshinweis { margin-top: 56px; }

.faq-punkt {
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: 4px;
}

.faq-frage {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 26px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinte);
  font-weight: 600;
  list-style: none;
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-frage::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: #c0b3a8;
  flex-shrink: 0;
}
.faq-punkt[open] > .faq-frage::after {
  content: "–";
  color: var(--akzent);
}

.faq-antwort {
  padding: 0 26px 24px;
}
.faq-antwort p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-karte);
  margin: 0 0 14px;
}
.faq-antwort p:last-child { margin-bottom: 0; }

/* --- Über mich -------------------------------------------------------- */

.ueber-gitter {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 899px) {
  .ueber-gitter { grid-template-columns: 1fr; gap: 36px; }
}

.ueber-seite {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 900px) {
  .ueber-seite { position: sticky; top: 110px; }
}
@media (max-width: 899px) {
  .ueber-seite { max-width: 300px; }
}

.portraet {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid #e2d8cb;
  border-radius: 4px;
  display: block;
}

.ueber-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--tinte);
  margin: 0 0 4px;
}
.ueber-titelzeile {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grau);
  margin: 0;
}

/* --- Kontakt ---------------------------------------------------------- */

.kontakt-gitter {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 899px) {
  .kontakt-gitter { grid-template-columns: 1fr; }
}

.kontaktkarte { padding: 38px 40px; }
@media (max-width: 700px) {
  .kontaktkarte { padding: 28px 24px; }
}

/* Diese drei Regeln gelten <p>-Elementen in der Karte. Ohne den
   .kontaktkarte-Vorsatz gewinnt .karte p (Spezifität 0,1,1) gegen eine
   einzelne Klasse (0,1,0) und setzt Schriftgröße, Farbe und margin: 0
   durch — unabhängig von der Reihenfolge in dieser Datei. */
.kontaktkarte .kontakt-name {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.3;
  color: var(--tinte);
  margin: 0 0 6px;
}
.kontaktkarte .kontakt-berufszeile {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--grau);
  margin: 0 0 40px;
}

.kontaktblock { margin-bottom: 22px; }
.kontaktblock:last-child { margin-bottom: 0; }

.kontaktkarte .kontakt-marke {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
  font-weight: 600;
  margin: 0 0 6px;
}
.kontakt-gross  { font-size: 22px; font-weight: 600; }
.kontakt-mittel { font-size: 18px; }
.kontakt-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

.zeiten {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.zeiten div { display: flex; gap: 8px; }
.zeiten dt { min-width: 92px; }
.zeiten dd { margin: 0; }

/* Formular */

.formular { padding: 38px 40px; }
@media (max-width: 700px) {
  .formular { padding: 28px 24px; }
}

.formular-vorspann {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-karte);
  margin: 0 0 24px;
}

.felder {
  display: grid;
  gap: 18px;
}

.feldpaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 560px) {
  .feldpaar { grid-template-columns: 1fr; }
}

.feld {
  display: grid;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: #3a352f;
}
.feld-zusatz { font-weight: 400; color: var(--grau); }

.feld input,
.feld textarea {
  font-family: inherit;
  font-size: 16.5px;
  color: var(--tinte);
  background: #fffdfa;
  border: 1px solid #d9cfc2;
  border-radius: 4px;
  padding: 11px 13px;
  width: 100%;
}
.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--akzent-dunkel);
  outline-offset: 1px;
  border-color: var(--akzent-dunkel);
}
.feld textarea { resize: vertical; min-height: 120px; }

.zustimmung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.zustimmung input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--akzent);
  flex-shrink: 0;
}

.honigtopf {
  position: absolute;
  left: -9999px;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.klartext-hinweis {
  font-size: 14px;
  line-height: 1.65;
  color: var(--grau);
  margin: 22px 0 0;
}

/* Meldungen der Formular-Antwortseiten */

.meldung {
  border-radius: 4px;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.meldung-gut    { background: #ecf2e6; color: #33471f; border: 1px solid #d4e0c8; }
.meldung-fehler { background: #fbede6; color: #6f2f19; border: 1px solid #efd4c6; }
.meldung .ohne-rand { margin: 0; }
.fehlerliste { margin: 8px 0 0; padding-left: 20px; }
.formular-breit { max-width: 640px; }
.danke-knopf { margin-top: 28px; }

/* Anfahrt */

.anfahrt-gitter {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 899px) {
  .anfahrt-gitter { grid-template-columns: 1fr; }
}

.kartenbild {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--karte-rand);
  display: block;
}
.kartenquelle {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grau);
  margin: 10px 0 0;
}

.anfahrt-liste {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  font-size: 16px;
  line-height: 1.6;
}
.anfahrt-liste dt { font-weight: 600; color: #3a352f; }
.anfahrt-liste dd { margin: 0; color: var(--text); }

.anfahrt-hinweis { margin-top: 22px; }

.weiterreihe {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--linie);
  padding-top: 26px;
}
.weiterreihe .weiter { font-size: 16px; }

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

.prosa h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.3;
  margin: 40px 0 12px;
  color: var(--tinte);
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  margin: 28px 0 10px;
  color: var(--tinte);
}
.prosa p, .prosa address, .prosa li {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
}
.prosa p, .prosa address { margin: 0 0 14px; }
.prosa ul { margin: 0 0 14px; padding-left: 22px; }
.prosa strong { font-weight: 600; color: #3a352f; }

/* --- Fehlerseite ------------------------------------------------------ */

.fehler {
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 96px);
}
.ziffer-gross {
  display: block;
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  color: var(--zitat-linie);
  margin-bottom: 18px;
}
.fehler-fuss { margin-top: 10px; }

/* --- Fusszeile -------------------------------------------------------- */

.fuss {
  background: var(--fuss-grund);
  color: var(--fuss-text);
  margin-top: 40px;
}

.fuss-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 64px 32px 30px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 899px) {
  .fuss-innen { grid-template-columns: 1fr; gap: 36px; padding: 48px 20px 24px; }
}

.fuss-rubrik {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fuss-rubrik);
  font-weight: 600;
  margin: 0 0 18px;
}
.fuss-rubrik-zweit { margin-top: 28px; }

.fuss-name {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--fuss-hell);
  margin: 0 0 4px;
}

.fuss-zeile {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--fuss-neben);
  margin: 0 0 8px;
}
.fuss-zeile a { color: var(--fuss-text); }
.fuss-zeile a:hover { color: #fff; }

.fuss-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15.5px;
  color: var(--fuss-neben);
}
.fuss-liste a { color: var(--fuss-text); }
.fuss-liste a:hover { color: var(--fuss-rubrik); }

.fuss-unten { border-top: 1px solid var(--fuss-linie); }

.fuss-unten-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
@media (max-width: 899px) {
  .fuss-unten-innen { padding: 18px 20px; }
}

.fuss-rechtliches {
  display: flex;
  align-items: center;
  gap: 22px;
}
.fuss-rechtliches a { font-size: 14px; color: var(--fuss-neben); }
.fuss-rechtliches a:hover { color: var(--fuss-text); }

.fuss-copyright {
  font-size: 14px;
  color: var(--fuss-grau);
  margin: 0;
}

/* --- Abstandshilfen --------------------------------------------------
   Stehen am Dateiende, damit sie gegen die Randregeln der Komponenten
   gewinnen (etwa das margin-Zurücksetzen des Zitatblocks). */

.abstand-oben       { margin-top: clamp(36px, 5vw, 56px); }
.abstand-oben-klein { margin-top: 26px; }
.ohne-abstand       { margin-top: 0; }

@media print {
  .kopf, .kopfbereich, .fuss, .menu-knopf, .randnotiz { display: none; }
  .mit-randnotiz { display: block; }
  body::before { display: none; }
}