@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/instrument-serif-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/instrument-serif-italic.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/karla-400.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/uploads/fonts/karla-600.woff2') format('woff2')}

body:has(.gv-seite){background:#F1F3EE}
/* ⭐ Der Grund, warum auf den sechs gv-seite-Seiten gruene Balken standen:
   .wp-site-blocks hat background:#16281F, und JEDE Luecke zwischen zwei
   Abschnitten zeigt diese Farbe. Der Rumpf ist hier aber cremefarben
   (Zeile darueber), deshalb reicht es, den Block durchsichtig zu machen —
   dann zeigt jede Fuge Creme statt Tannengruen.
   ⚠️ Das ersetzt die Jagd auf einzelne Luecken. Gemessen waren es zwei
   Quellen (30 px Gruppen-Polsterung, 19 px Blockabstand main/footer), und
   es waeren jederzeit neue dazugekommen. Auf den .seite-Seiten steht der
   Rumpf selbst auf #16281F, dort darf das NICHT gemacht werden. */
body:has(.gv-seite) .wp-site-blocks{background:transparent}
/* Dieselbe Lage auf /kontakt/: Rumpf ist creme (#F1F3EE), der Block
   darueber dunkel. Nach dem Entfernen von .ko-auslauf am 24.09.2026 wurde
   die Fuge zum Fussbereich sichtbar. ⚠️ Nur fuer Seiten mit cremefarbenem
   Rumpf; auf .seite-Seiten steht der Rumpf selbst auf #16281F. */
body:has(.ko-wrap) .wp-site-blocks{background:transparent}

/* Seiten ohne dunklen Vollbild-Hero: die Kopfzeile braucht einen eigenen
   Hintergrund, sonst steht weisse Schrift auf weissem Grund. */
body.gv-ohne-hero #gv-kopf{
  background:rgba(22,40,31,.97);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  box-shadow:0 2px 20px rgba(0,0,0,.18)}

/* ENTFERNT 16.09.2026 - war die Ursache des aufgeblasenen Kopfbereichs.
   Hier stand frueher ein Verlauf, der weisse Schrift ueber einem hellen
   Hero-FOTO lesbar halten sollte. Damit sein "z-index:-1" greift, brauchte
   er "position:relative" auf #gv-kopf - und genau das hat das
   "position:fixed" aus dem Header-Template ausgehebelt (Spezifitaet 0-2-1
   gegen 0-1-0). Die Kopfleiste stand dadurch auf der Startseite im Fluss,
   nahm 86 px Platz ein und wurde von "top:34px" zusaetzlich nach unten
   versetzt. Zusammen mit dem Platzhalter und dem Container-Abstand ergab
   das 322 px Kopfzone, wo 118 px gebraucht sind - gemessen 204 px leere
   dunkelgruene Flaeche auf 1440, 1920 und 2560 px.

   Der Verlauf selbst wird seit dem eigenen dunklen Grund der Leiste
   (siehe "Kopfleiste: sicherer Grund auf ALLEN Seiten") nicht mehr
   gebraucht. Beides faellt deshalb ersatzlos weg. */
body.gv-ohne-hero .wp-site-blocks > main{padding-top:96px}
body.gv-ohne-hero{background:#F1F3EE}
body.gv-ohne-hero .entry-content{max-width:800px;margin-left:auto;margin-right:auto}
body.gv-ohne-hero .wp-block-post-title{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2rem,1.6rem + 1.6vw,2.9rem);
  color:#16281F;max-width:800px;margin:0 auto 26px;line-height:1.15}
body.gv-ohne-hero .entry-content p,
body.gv-ohne-hero .entry-content li{font-family:'Karla',sans-serif;font-size:16.5px;line-height:1.75;color:#333d34}
body.gv-ohne-hero .entry-content h2,
body.gv-ohne-hero .entry-content h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:#16281F;margin-top:34px}
body.gv-ohne-hero .entry-content a{color:#8A5F14}
body:has(.gv-seite) .wp-site-blocks > main{margin-block-start:0 !important}
body:has(.gv-seite) main > .wp-block-group{padding-block-start:0 !important}
body:has(.gv-seite) .entry-content{margin-block-start:0 !important}
body:has(.gv-seite) .wp-block-post-title{display:none}

.gv-seite{--pine:#16281F;--pine-2:#1F3D33;--gold:#C99A44;--gold-hi:#E0B565;--paper:#F1F3EE;--ink:#1B221D;--muted:#5C6B62;
  font-family:'Karla',sans-serif;color:var(--ink);margin:0 calc(50% - 50vw)}
.gv-seite *{box-sizing:border-box}

.gv-hero{position:relative;overflow:hidden;background:var(--pine);color:#fff;padding:150px 24px 92px;
  background-image:
    radial-gradient(70% 130% at 78% 12%, rgba(201,154,68,.26) 0%, transparent 58%),
    radial-gradient(50% 100% at 12% 88%, rgba(201,154,68,.12) 0%, transparent 60%),
    linear-gradient(165deg,var(--pine-2)0%,var(--pine)62%);
  background-size:180% 180%, 170% 170%, 100% 100%;
  animation:gvLicht 26s ease-in-out infinite}
@keyframes gvLicht{
  0%{background-position:70% 10%, 10% 90%, 0 0}
  50%{background-position:40% 40%, 40% 60%, 0 0}
  100%{background-position:70% 10%, 10% 90%, 0 0}
}
@media (prefers-reduced-motion:reduce){.gv-hero{animation:none}}
.gv-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.34'/%3E%3C/svg%3E")}
.gv-hero-inner{max-width:1120px;margin:0 auto}
.gv-hero-text{max-width:660px}
.gv-eyebrow{font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.gv-eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);flex-shrink:0}
.gv-hero h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2.1rem,1.6rem + 2.4vw,3.5rem);line-height:1.1;margin:0 0 22px;text-wrap:balance}
.gv-hero h1 em{font-style:italic;color:var(--gold-hi)}
.gv-lede{font-size:18px;line-height:1.65;color:rgba(255,255,255,.87);max-width:52ch;margin:0}

/* ======================================================================
   Kopfbereich der Unterseiten: Schriftfarbe absichern (17.09.2026)

   Gemessen auf /reha-sport/, /fitness/ und /ruecken-und-gelenke/: Kicker
   und Einleitung standen in rgb(51,61,52) - dunkles Gruengrau auf einem
   Foto, das der Schleier auf 88 Prozent abdunkelt. Kontrastverhaeltnis
   1,1 bis 1,3 zu 1, also praktisch unsichtbar. Die Ueberschrift darueber
   ist weiss und tadellos, deshalb sah es aus wie eine gewollte Leerflaeche
   und nicht wie ein Fehler.

   Ursache: ".gv-seite p" setzt die Fliesstextfarbe #333d34 und hat mit
   0-1-1 mehr Gewicht als ".gv-lede" mit 0-1-0. Auf der Startseite heisst
   der Rahmen ".seite", dort greift die Regel nicht - deshalb war nur die
   Unterseiten-Bauform betroffen und es fiel lange niemandem auf.

   Die Hero-Texte bekommen deshalb ausdruecklich mehr Gewicht als die
   allgemeine Fliesstextregel. Nicht per !important: die naechste
   Fliesstextregel wuerde sonst dasselbe Wettruesten ausloesen.
   ====================================================================== */
.gv-seite .gv-hero .gv-lede,
.gv-hero .gv-lede{color:rgba(255,255,255,.87)}
.gv-seite .gv-hero .gv-eyebrow,
.gv-hero .gv-eyebrow{color:var(--gold-hi)}
.gv-seite .gv-hero h1,
.gv-hero h1{color:#fff}
.gv-seite .gv-hero h1 em,
.gv-hero h1 em{color:var(--gold-hi)}

/* Farbverlaeufe: Streifenbildung vermeiden.
   Zwei Ursachen, beide behandelt. Erstens grosse Farbspruenge ueber wenige
   Pixel - dagegen viele enge Stuetzpunkte statt drei weit auseinander
   liegender, und mehr Hoehe pro Verlauf. Zweitens die 8-Bit-Farbtiefe des
   Bildschirms, die feine Abstufungen auf ganze Stufen rundet und dadurch
   sichtbare Baender erzeugt - dagegen der Rauschfilm weiter unten, der die
   Stufenkanten aufbricht (derselbe Trick, den Bildbearbeitung "Dithering"
   nennt). */
.gv-blende{height:210px;margin-bottom:-1px;position:relative;background:linear-gradient(180deg,#16281f 0.0%,#1e3027 3.8%,#27382f 7.7%,#2f3f37 11.5%,#38473f 15.4%,#404f47 19.2%,#49574f 23.1%,#515f57 26.9%,#59665f 30.8%,#626e67 34.6%,#6a766f 38.5%,#737e77 42.3%,#7b867f 46.2%,#848e86 50.0%,#8c958e 53.8%,#949d96 57.7%,#9da59e 61.5%,#a5ada6 65.4%,#aeb5ae 69.2%,#b6bcb6 73.1%,#bec4be 76.9%,#c7ccc6 80.8%,#cfd4ce 84.6%,#d8dcd6 88.5%,#e0e3de 92.3%,#e9ebe6 96.2%,#f1f3ee 100.0%)}
.gv-auslauf{height:225px;margin-top:-1px;position:relative;background:linear-gradient(180deg,#f1f3ee 0.0%,#e8ebe6 3.8%,#e0e2dd 7.7%,#d7dad5 11.5%,#ced2cd 15.4%,#c6cac4 19.2%,#bdc1bc 23.1%,#b4b9b4 26.9%,#abb1ab 30.8%,#a3a9a3 34.6%,#9aa09b 38.5%,#919892 42.3%,#89908a 46.2%,#808882 50.0%,#777f79 53.8%,#6f7771 57.7%,#666f68 61.5%,#5d6660 65.4%,#555e58 69.2%,#4c564f 73.1%,#434e47 76.9%,#3a453f 80.8%,#323d36 84.6%,#29352e 88.5%,#202d26 92.3%,#18241d 96.2%,#0f1c15 100.0%)}
.gv-blende::after,.gv-auslauf::after,.gv-band-tief::after,.gv-band-warm::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E")}

/* display:flow-root haelt den Randabstand des letzten Absatzes IM
   Abschnitt. Ohne ihn rutscht er heraus (margin collapse, weil unten
   0 Polsterung steht) und legt den dunklen .wp-site-blocks-Hintergrund
   als gruenen Balken frei. Belegt 24.09.2026 auf /7-tage-gutschein/. */
.gv-band{background:var(--paper);padding:20px 24px 0;display:flow-root}
.gv-band.gv-luft{padding-top:82px}

.gv-band-warm{position:relative;background:var(--paper);padding:88px 24px 84px;margin-top:40px}
.gv-band-warm::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0)0%,rgba(201,154,68,.075)18%,rgba(201,154,68,.075)82%,rgba(0,0,0,0)100%)}
.gv-band-warm > *{position:relative}

.gv-band-tief{position:relative;color:#fff;padding:96px 24px 92px;margin-top:40px;overflow:hidden;
  background:
    radial-gradient(46% 70% at 22% 42%, rgba(201,154,68,.22) 0%, transparent 66%),
    linear-gradient(180deg,#f1f3ee 0.0%,#e5e8e2 2.8%,#d9dcd7 5.6%,#ccd1cc 8.3%,#c0c6c0 11.1%,#b4bbb4 13.9%,#a8afa9 16.7%,#9ca49e 19.4%,#909992 22.2%,#848e86 25.0%,#77827b 27.8%,#6b776f 30.6%,#5f6c64 33.3%,#536058 36.1%,#47554d 38.9%,#3a4a42 41.7%,#2e3f36 44.4%,#22332a 47.2%,#16281f 50.0%,#22332a 52.8%,#2e3f36 55.6%,#3a4a42 58.3%,#47554d 61.1%,#536058 63.9%,#5f6c64 66.7%,#6b7770 69.4%,#77827b 72.2%,#848e86 75.0%,#909992 77.8%,#9ca49e 80.6%,#a8afa9 83.3%,#b4bbb4 86.1%,#c0c6c0 88.9%,#ccd1cc 91.7%,#d9dcd7 94.4%,#e5e8e2 97.2%,#f1f3ee 100.0%)}
.gv-seite .gv-band-tief h2,
.gv-seite .gv-band-tief h3{color:#fff}
.gv-seite .gv-band-tief p,
.gv-seite .gv-band-tief p.gv-sub{color:rgba(255,255,255,.84)}
.gv-seite .gv-band-tief .gv-kicker{color:var(--gold-hi)}
.gv-band-tief > *{position:relative}
.gv-seite .gv-band-tief .gv-karte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gv-seite .gv-band-tief .gv-karte h3{color:#fff}
.gv-seite .gv-band-tief .gv-karte p{color:rgba(255,255,255,.82)}
.gv-seite .gv-band-tief .gv-nummer{color:var(--gold-hi)}
.gv-seite .gv-band-tief .gv-liste li{color:rgba(255,255,255,.86)}
.gv-seite .gv-band-tief .gv-hinweis{color:rgba(255,255,255,.62)}
.gv-seite .gv-band-tief a.gv-karte-link::after{color:var(--gold-hi)}
.gv-inner{max-width:1120px;margin:0 auto}
.gv-inner.gv-schmal{max-width:760px}
.gv-kicker{font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8A5F14;margin:0 0 16px;display:block}
.gv-seite h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(1.7rem,1.4rem + 1.2vw,2.4rem);color:var(--pine);margin:0 0 20px;line-height:1.2}
.gv-seite h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:21px;color:var(--pine);margin:0 0 12px}
.gv-seite p{font-size:17px;line-height:1.75;color:#333d34;margin:0 0 20px}
.gv-seite p.gv-sub{font-size:16.5px;color:var(--muted);max-width:62ch}
.gv-zitat{border-left:3px solid var(--gold);padding-left:24px;margin:36px 0}
.gv-zitat p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:21px;line-height:1.5;color:var(--pine);margin:0 0 8px}
.gv-zitat span{font-size:14px;color:var(--muted)}

.gv-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:44px 0 0}
.gv-karte{background:#fff;border:1px solid rgba(22,40,31,.1);border-radius:12px;padding:30px 28px;
  box-shadow:0 20px 42px -30px rgba(58,40,18,.42);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
@media (hover:hover) and (pointer:fine){
  .gv-karte{position:relative}
  .gv-karte::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(201,154,68,.13),transparent 62%)}
  .gv-karte:hover{transform:translateY(-5px);box-shadow:0 30px 52px -28px rgba(58,40,18,.5)}
  .gv-karte:hover::before{opacity:1}
}
@media (prefers-reduced-motion:reduce){.gv-karte,.gv-karte:hover{transform:none;transition:none}}
.gv-karte h3{margin-bottom:10px}
.gv-karte p{font-size:15.5px;line-height:1.7;margin:0}
.gv-nummer{font-family:'Instrument Serif',Georgia,serif;font-size:2rem;line-height:1;color:#8A5F14;display:block;margin-bottom:12px}

/* Karten, die auf eine andere Seite fuehren, muessen als Link erkennbar sein */
a.gv-karte-link{text-decoration:none;display:block;position:relative;padding-bottom:52px}
a.gv-karte-link::after{content:"Mehr erfahren →";position:absolute;left:28px;bottom:26px;
  font-family:'Karla',sans-serif;font-weight:600;font-size:14.5px;color:#8A5F14;transition:transform .2s}
a.gv-karte-link:hover::after{transform:translateX(4px)}
@media (max-width:700px){a.gv-karte-link{padding-bottom:48px}a.gv-karte-link::after{left:24px;bottom:22px}}

.gv-liste{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 28px}
.gv-liste li{position:relative;padding-left:26px;font-size:16px;line-height:1.65;color:#333d34}
.gv-liste li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(201,154,68,.18)}

.gv-fakten{position:relative;z-index:3;overflow:hidden;margin-top:-64px;padding-top:64px;
  background:radial-gradient(60% 140% at 15% 30%, rgba(201,154,68,.22) 0%, transparent 60%),
             radial-gradient(50% 120% at 85% 70%, rgba(201,154,68,.14) 0%, transparent 60%),
             var(--pine-2);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px);
          mask-image:linear-gradient(180deg,transparent 0,#000 64px)}
.gv-fakten-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)}
.gv-fakten-grid div{padding:34px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.14);color:#fff}
.gv-fakten-grid div:last-child{border-right:none}
.gv-wert{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.9rem,1.6rem + 1.2vw,2.7rem);color:var(--gold-hi);display:block;line-height:1}
.gv-wert-label{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:8px;display:block;line-height:1.5}

/* 78 oben gegen 8 unten war nur stimmig, solange .gv-auslauf folgte.
   Der ist am 24.09.2026 raus, deshalb angeglichen an den Rhythmus der
   Nachbarabschnitte (gv-band-warm 88/84, gv-band-tief 96/92). */
.gv-cta-band{background:var(--paper);padding:78px 24px 72px}
.gv-cta{max-width:880px;margin:0 auto;position:relative;overflow:hidden;color:#fff;border-radius:14px;padding:54px 52px;
  background:linear-gradient(135deg,var(--pine-2)0%,var(--pine)100%);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  box-shadow:0 32px 64px -20px rgba(22,40,31,.5),0 14px 28px -14px rgba(22,40,31,.32)}
.gv-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 170% at 88% -25%,rgba(201,154,68,.3)0%,transparent 55%)}
.gv-cta::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--gold)0%,var(--gold-hi)45%,transparent 100%)}
.gv-cta-text{position:relative;max-width:52ch}
.gv-cta-eyebrow{font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);display:block;margin:0 0 14px}
.gv-cta h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:normal;font-size:clamp(1.6rem,1.4rem + 1vw,2.1rem);color:#fff;margin:0 0 12px;line-height:1.15}
.gv-cta h2 em{font-style:italic;color:var(--gold-hi)}
.gv-cta p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.82);margin:0}
.gv-knopf{position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15.5px;color:var(--pine);background:var(--gold);
  padding:16px 30px;border-radius:2px;text-decoration:none;transition:transform .2s,background .2s;min-height:52px}
.gv-knopf:hover{background:var(--gold-hi);transform:translateY(-2px)}
.gv-knopf span{transition:transform .2s}
.gv-knopf:hover span{transform:translateX(4px)}
.gv-knopf-hell{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.gv-knopf-hell:hover{background:rgba(255,255,255,.08);border-color:#fff}

.gv-hinweis{font-size:13px;line-height:1.6;color:var(--muted);max-width:70ch;margin:30px 0 0}

@media (max-width:860px){.gv-fakten-grid{grid-template-columns:1fr}.gv-fakten-grid div{border-right:none;border-bottom:1px solid rgba(255,255,255,.14)}}
@media (max-width:700px){
  .gv-hero{padding:126px 20px 74px}
  .gv-blende{height:180px}
  .gv-auslauf{height:170px}
  .gv-band{padding-left:20px;padding-right:20px}
  .gv-band.gv-luft{padding-top:70px}
  .gv-cta-band{padding:70px 20px 64px}
  .gv-cta{padding:40px 28px}
  .gv-karte{padding:26px 24px}
  .gv-raster{gap:18px;margin-top:34px}
  .gv-knopf{width:100%;justify-content:center}
}

/* Sichtbarkeit haengt NIE an JavaScript: Ruhezustand ist sichtbar,
   animiert wird nur die Bewegung. Faellt das Skript aus, steht der Text da. */
.gv-seite .reveal{opacity:1;transform:translateY(22px);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.gv-seite .reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.gv-seite .reveal,.gv-seite .reveal.in{transform:none;transition:none}}

body.gv-ohne-hero .entry-content > h1:first-of-type{display:none}

/* Sichtbarkeit darf niemals von einer Animation abhaengen. Einzelne Seiten
   setzen in ihrem eigenen <style> noch .reveal{opacity:0} und blenden erst
   per Skript ein. Bleibt das Skript stehen (Fehler, alter Browser, blockiertes
   JS), ist die halbe Seite unsichtbar. Deshalb hier fest: der Inhalt ist immer
   sichtbar, animiert wird ausschliesslich die Bewegung. */
.reveal{opacity:1 !important}

/* ============================================================
   Foto-Hero fuer Unterseiten (07.09.2026)
   Vorher trugen 18 von 20 Seiten einen reinen Farbverlauf als Kopf.
   Ohne Bild wirkt jede Seite wie die vorige, das ist der Kern des
   Baukasten-Eindrucks. Diese Variante legt ein Foto darunter; alles
   andere (Schrift, Abstaende, Blende) bleibt unveraendert, damit die
   Seiten trotzdem aus einem Haus stammen.
   ============================================================ */
.gv-hero.gv-hero-bild{
  padding:0;animation:none;background:var(--pine);
  display:flex;align-items:flex-end;
  /* Hoehe folgt der Fensterbreite, nie einer festen Zahl: sonst wird das
     Bild auf breiten Schirmen proportional flacher und schneidet Koepfe ab. */
  min-height:clamp(400px,calc(100vw / 2.6),700px)}
.gv-hero.gv-hero-bild::after{display:none}
.gv-hero-media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 46%;z-index:0}
.gv-hero-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(10,17,13,.88) 0%,rgba(10,17,13,.74) 26%,
      rgba(10,17,13,.46) 46%,rgba(10,17,13,.22) 64%,rgba(10,17,13,.10) 84%,
      rgba(10,17,13,.18) 100%),
    linear-gradient(180deg,rgba(10,17,13,.42) 0%,rgba(10,17,13,0) 24%,
      rgba(10,17,13,0) 58%,rgba(12,20,16,.72) 100%)}
.gv-hero.gv-hero-bild .gv-hero-inner{position:relative;z-index:2;width:100%;
  padding:150px clamp(24px,5vw,56px) 66px}
@media (max-width:820px){
  .gv-hero.gv-hero-bild{min-height:0;display:block}
  .gv-hero-media{position:relative;inset:auto;height:min(32vh,240px);
    object-position:60% 48%;display:block}
  .gv-hero-schleier{height:min(32vh,240px);inset:auto;left:0;right:0;top:0;
    background:linear-gradient(180deg,rgba(10,17,13,.40) 0%,rgba(10,17,13,.08) 44%,
      rgba(22,40,31,1) 100%)}
  .gv-hero.gv-hero-bild .gv-hero-inner{padding:26px 22px 40px}
}

/* ============================================================
   Rhythmuswechsel gegen die Baukasten-Optik (07.09.2026)
   Bisher folgte auf jeder Seite Textblock auf Textblock, jeweils in
   voller Breite und immer gleich aufgebaut. Zwei Bausteine brechen das:
   ============================================================ */

/* 1. Bild und Text nebeneinander, im Wechsel der Seiten.
      Das Bild ragt bewusst aus der Textspalte heraus, damit keine
      saubere Blockkante entsteht. */
.gv-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.gv-split-bild{position:relative;border-radius:10px;overflow:hidden;
  box-shadow:0 32px 64px -34px rgba(22,40,31,.55)}
.gv-split-bild img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3}
.gv-split-text > :first-child{margin-top:0}
.gv-split.gv-split-gedreht .gv-split-bild{order:2}
.gv-split.gv-split-gedreht .gv-split-text{order:1}
@media (max-width:860px){
  .gv-split{grid-template-columns:1fr;gap:26px}
  .gv-split.gv-split-gedreht .gv-split-bild{order:0}
  .gv-split.gv-split-gedreht .gv-split-text{order:1}
  .gv-split-bild img{aspect-ratio:16/10}
}

/* 2. Die erste Sektion schiebt sich unter den Hero.
      Damit verschwindet die waagerechte Fuge zwischen Bild und Inhalt,
      die den gestapelten Eindruck erzeugt. */
.gv-band.gv-hebt{position:relative;z-index:3;margin-top:clamp(-96px,-7vw,-48px);
  background:transparent;padding-top:0}
.gv-hebt .gv-inner{background:var(--paper);border-radius:12px;
  padding:clamp(34px,4vw,58px) clamp(24px,4vw,54px);
  box-shadow:0 40px 80px -46px rgba(22,40,31,.5)}
@media (max-width:820px){
  .gv-band.gv-hebt{margin-top:-28px}
  .gv-hebt .gv-inner{border-radius:10px;padding:28px 22px}
}

/* 3. Kleine Zahlenreihe als Auflockerung zwischen zwei Textblöcken */
.gv-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px;background:rgba(22,40,31,.12);border-radius:10px;overflow:hidden;
  margin:44px 0 0}
.gv-zahlen div{background:var(--paper);padding:26px 22px;text-align:center}
.gv-band-tief .gv-zahlen{background:rgba(255,255,255,.14)}
.gv-band-tief .gv-zahlen div{background:rgba(22,40,31,.86)}
.gv-zahl{display:block;font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);line-height:1;color:var(--pine);
  margin:0 0 8px}
.gv-band-tief .gv-zahl{color:var(--gold-hi)}
.gv-zahl-text{font-size:13.5px;line-height:1.45;color:var(--muted)}
.gv-band-tief .gv-zahl-text{color:rgba(255,255,255,.72)}

/* ============================================================
   Rhythmus unterhalb der ersten Sektion (07.09.2026)
   Gemessen ueber alle 20 Seiten: das Kartenraster stand auf 17 davon,
   meist mehrfach, insgesamt 26 Raster mit 93 Karten. Es war praktisch
   das einzige Strukturmodul. Wer zwei Seiten hintereinander liest,
   sieht deshalb zweimal dasselbe, egal wie verschieden der Text ist.
   Die drei Bausteine hier sind echte Alternativen zum Raster, nicht
   Varianten davon: andere Leserichtung, anderes Gewicht, andere Kante.
   ============================================================ */

/* 1. Ablaufspur statt nummeriertem Kartenraster.
      Ein Ablauf ist eine Bewegung, keine Auswahl. Drei Karten
      nebeneinander behaupten Gleichrangigkeit, eine senkrechte Spur
      zeigt die Reihenfolge. Die Linie laeuft durch und erzeugt keine
      Fuge zwischen den Schritten. */
.gv-schritte{list-style:none;margin:44px 0 0;padding:0;position:relative;counter-reset:gvschritt}
.gv-schritte::before{content:"";position:absolute;left:23px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,rgba(201,154,68,0) 0%,var(--gold) 12%,var(--gold) 88%,rgba(201,154,68,0) 100%)}
.gv-schritte li{position:relative;padding:0 0 38px 74px;margin:0;counter-increment:gvschritt}
.gv-schritte li:last-child{padding-bottom:0}
.gv-schritte li::before{content:counter(gvschritt);position:absolute;left:0;top:-4px;
  width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',Georgia,serif;font-size:20px;line-height:1;
  color:var(--pine);background:var(--gold);
  box-shadow:0 0 0 7px var(--paper)}
.gv-schritte h3{margin:0 0 8px}
.gv-schritte p{font-size:16px;line-height:1.7;margin:0}
.gv-band-tief .gv-schritte li::before{box-shadow:0 0 0 7px #24352c}
.gv-band-tief .gv-schritte h3{color:#fff}
.gv-band-tief .gv-schritte p{color:rgba(255,255,255,.84)}
@media (max-width:700px){
  .gv-schritte::before{left:18px}
  .gv-schritte li{padding-left:58px;padding-bottom:32px}
  .gv-schritte li::before{width:37px;height:37px;font-size:17px;box-shadow:0 0 0 5px var(--paper)}
  .gv-band-tief .gv-schritte li::before{box-shadow:0 0 0 5px #24352c}
}

/* 2. Merkmale ohne Kartenrahmen.
      Sechs Karten nebeneinander sind sechs Kaesten und wiegen schwer.
      Dieselben sechs Punkte als zweispaltige Liste mit feiner Trennlinie
      lesen sich schneller und lassen die Flaeche ruhig. Fuer Aufzaehlungen,
      die beschreiben statt zur Auswahl zu stellen. */
.gv-merkmale{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:0 clamp(32px,4vw,64px);margin:40px 0 0}
.gv-merkmale > div{padding:26px 0;border-top:1px solid rgba(22,40,31,.13)}
.gv-merkmale h3{margin:0 0 7px;font-size:20px}
.gv-merkmale p{font-size:15.5px;line-height:1.7;margin:0;color:var(--muted)}
.gv-band-tief .gv-merkmale > div{border-top-color:rgba(255,255,255,.17)}
.gv-band-tief .gv-merkmale h3{color:#fff}
.gv-band-tief .gv-merkmale p{color:rgba(255,255,255,.76)}
@media (max-width:700px){.gv-merkmale{gap:0}.gv-merkmale > div{padding:22px 0}}

/* 3. Kernaussage gross und allein.
      Bricht die Abfolge Kicker - kursive H2 - Absatz, weil sie keinen
      Kicker und keine H2 hat. Ein Satz, der die Seite kurz anhaelt.
      Bewusst ohne Rahmen und ohne Hintergrund: kein weiterer Block,
      sondern eine Zaesur im Lesefluss. */
.gv-gross{max-width:26ch;margin:0 auto;text-align:center}
.gv-gross p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.65rem,1.2rem + 2vw,2.7rem);line-height:1.28;color:var(--pine);
  margin:0;text-wrap:balance}
.gv-gross p em{font-style:italic;color:#8A5F14}
.gv-gross span{display:block;font-family:'Karla',sans-serif;font-style:normal;
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:26px}
.gv-gross::after{content:"";display:block;width:54px;height:1px;background:var(--gold);
  margin:30px auto 0}
.gv-band-tief .gv-gross p{color:#fff}
.gv-band-tief .gv-gross p em{color:var(--gold-hi)}
.gv-band-tief .gv-gross span{color:rgba(255,255,255,.66)}
.gv-gross + .reveal{margin-top:46px}

/* Dunkles Band mit durchgehend dunklem Kern.
   Der Standardverlauf von .gv-band-tief ist nur in der Mitte dunkel und an
   beiden Kanten hell. Karten faengt das ab, weil sie einen eigenen Grund
   mitbringen. Rahmenlose Module haben den nicht: dort sinkt der Kontrast am
   unteren Rand auf gemessene 2,7 statt der noetigen 4,5. Diese Variante haelt
   die weichen Kanten (sonst entsteht wieder eine sichtbare Fuge) und legt
   dazwischen eine durchgehend dunkle Flaeche.

   11.09.2026, weicher Uebergang: Gemessen war an der Bandkante ein Sprung von
   0,00 auf 3,37 Helligkeitsstufen INNERHALB EINES PIXELS. Davor passierte
   nichts, dann fiel die Helligkeit schlagartig ab. Genau solche Knicke sieht
   das Auge als Linie, auch wenn dort gar keine Kante gezeichnet ist.
   Drei Korrekturen:
   - feste 150 px Uebergang statt 12 % (die haengen an der Bandhoehe: 663 px
     Band ergab 78 px, 906 px Band ergab 109 px, also ungleiche Wirkung)
   - Smootherstep, damit die Steigung an beiden Enden sanft gegen null laeuft
   - in Oklab gemischt, damit die Helligkeit gleichmaessig abnimmt
   Damit der Text trotzdem auf durchgehend dunklem Grund steht, wandert der
   Verlauf nach aussen: negatives margin zieht das Band in den Leerraum der
   Nachbarsektion, das groessere padding haelt den Textabstand exakt gleich
   (oben 40+96 = -34+170, unten 92 = 166-74). */
.gv-band-tief.gv-band-voll{
  margin-top:-34px;padding-top:170px;
  margin-bottom:-74px;padding-bottom:166px;
  background:
    radial-gradient(46% 70% at 22% 42%, rgba(201,154,68,.22) 0%, transparent 66%),
    linear-gradient(180deg,#f1f3ee 0px,#f1f3ee 5px,#f0f2ed 10px,#eff1ec 15px,#ecefe9 20px,#e8ebe6 25px,#e3e6e0 30px,#dcdfda 35px,#d3d7d2 40px,#c9cec8 45px,#bec4be 50px,#b2b9b2 55px,#a5ada6 60px,#97a099 65px,#89938c 70px,#7b867e 75px,#6e7a71 80px,#606d65 85px,#546259 90px,#49574e 95px,#3e4d44 100px,#35453c 105px,#2d3d34 110px,#26372e 115px,#213229 120px,#1d2e25 125px,#1a2b22 130px,#182920 135px,#16281f 140px,#16281f 145px,#16281f 150px,#16281f calc(100% - 150px),#16281f calc(100% - 145px),#16281f calc(100% - 140px),#182920 calc(100% - 135px),#1a2b22 calc(100% - 130px),#1d2e25 calc(100% - 125px),#213229 calc(100% - 120px),#26372e calc(100% - 115px),#2d3d34 calc(100% - 110px),#35453c calc(100% - 105px),#3e4d44 calc(100% - 100px),#49574e calc(100% - 95px),#546259 calc(100% - 90px),#606d65 calc(100% - 85px),#6e7a71 calc(100% - 80px),#7b867e calc(100% - 75px),#89938c calc(100% - 70px),#97a099 calc(100% - 65px),#a5ada6 calc(100% - 60px),#b2b9b2 calc(100% - 55px),#bec4be calc(100% - 50px),#c9cec8 calc(100% - 45px),#d3d7d2 calc(100% - 40px),#dcdfda calc(100% - 35px),#e3e6e0 calc(100% - 30px),#e8ebe6 calc(100% - 25px),#ecefe9 calc(100% - 20px),#eff1ec calc(100% - 15px),#f0f2ed calc(100% - 10px),#f1f3ee calc(100% - 5px),#f1f3ee calc(100% - 0px))}

/* Schmale Schirme: kuerzere Strecke, sonst frisst der Verlauf das ganze Band.
   Textabstand bleibt auch hier unveraendert (-20+110 = 90). */
@media (max-width:700px){
  .gv-band-tief.gv-band-voll{
    margin-top:-20px;padding-top:110px;
    margin-bottom:-44px;padding-bottom:106px;
    background:
      radial-gradient(46% 70% at 22% 42%, rgba(201,154,68,.22) 0%, transparent 66%),
      linear-gradient(180deg,#f1f3ee 0px,#f1f3ee 3px,#f0f2ed 6px,#eff1ec 9px,#ecefe9 12px,#e8ebe6 15px,#e3e6e0 18px,#dcdfda 21px,#d3d7d2 24px,#c9cec8 27px,#bec4be 30px,#b2b9b2 33px,#a5ada6 36px,#97a099 39px,#89938c 42px,#7b867e 45px,#6e7a71 48px,#606d65 51px,#546259 54px,#49574e 57px,#3e4d44 60px,#35453c 63px,#2d3d34 66px,#26372e 69px,#213229 72px,#1d2e25 75px,#1a2b22 78px,#182920 81px,#16281f 84px,#16281f 87px,#16281f 90px,#16281f calc(100% - 90px),#16281f calc(100% - 87px),#16281f calc(100% - 84px),#182920 calc(100% - 81px),#1a2b22 calc(100% - 78px),#1d2e25 calc(100% - 75px),#213229 calc(100% - 72px),#26372e calc(100% - 69px),#2d3d34 calc(100% - 66px),#35453c calc(100% - 63px),#3e4d44 calc(100% - 60px),#49574e calc(100% - 57px),#546259 calc(100% - 54px),#606d65 calc(100% - 51px),#6e7a71 calc(100% - 48px),#7b867e calc(100% - 45px),#89938c calc(100% - 42px),#97a099 calc(100% - 39px),#a5ada6 calc(100% - 36px),#b2b9b2 calc(100% - 33px),#bec4be calc(100% - 30px),#c9cec8 calc(100% - 27px),#d3d7d2 calc(100% - 24px),#dcdfda calc(100% - 21px),#e3e6e0 calc(100% - 18px),#e8ebe6 calc(100% - 15px),#ecefe9 calc(100% - 12px),#eff1ec calc(100% - 9px),#f0f2ed calc(100% - 6px),#f1f3ee calc(100% - 3px),#f1f3ee calc(100% - 0px))}
}

/* Der Rauschfilm setzte an der Sektionskante ebenso hart ein wie der
   Verlauf und erzeugte dort eine zweite feine Linie. Er klingt jetzt ueber
   dieselbe Strecke aus wie der Verlauf selbst. */
.gv-band-tief.gv-band-voll::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 150px,#000 calc(100% - 150px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 150px,#000 calc(100% - 150px),transparent 100%)}
@media (max-width:700px){
  .gv-band-tief.gv-band-voll::after{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%)}
}

/* 4. Erfahrungsberichte als Stimmen, nicht als Karten.
      Sechs Menschen, die etwas erzaehlen, gehoeren nicht in sechs gleiche
      Kaesten. Versetzte Spalten und ein Anfuehrungszeichen als Marke geben
      der Reihe einen anderen Takt als jedes Raster auf den uebrigen Seiten. */
.gv-stimmen{columns:2;column-gap:clamp(28px,3.4vw,56px);margin:44px 0 0}
.gv-stimmen > div{break-inside:avoid;-webkit-column-break-inside:avoid;
  padding:0 0 30px 30px;margin:0 0 30px;position:relative}
.gv-stimmen > div::before{content:"\201C";position:absolute;left:-2px;top:-12px;
  font-family:'Instrument Serif',Georgia,serif;font-size:52px;line-height:1;
  color:var(--gold);opacity:.62}
.gv-stimmen h3{margin:0 0 9px;font-size:19px}
.gv-stimmen p{font-size:15.5px;line-height:1.72;margin:0;color:#333d34}
.gv-band-tief .gv-stimmen h3{color:#fff}
.gv-band-tief .gv-stimmen p{color:rgba(255,255,255,.8)}
.gv-band-tief .gv-stimmen > div::before{color:var(--gold-hi)}
@media (max-width:760px){
  .gv-stimmen{columns:1}
  .gv-stimmen > div{padding-bottom:24px;margin-bottom:24px}
}

/* Der Ring um die Schrittzahl muss die Farbe des Grundes treffen, auf dem
   er liegt. Auf dem vollen dunklen Band ist das der Kernton, nicht der
   Zwischenton des auslaufenden Verlaufs. */
.gv-band-tief.gv-band-voll .gv-schritte li::before{box-shadow:0 0 0 7px #16281f}
@media (max-width:700px){
  .gv-band-tief.gv-band-voll .gv-schritte li::before{box-shadow:0 0 0 5px #16281f}
}

/* Kennzahl in einer Stimme, etwa das erreichte Gewicht. Sie ist der Beleg
   der Aussage und darf beim Umbau nicht verloren gehen. */
.gv-stimme-wert{display:block;font-family:'Instrument Serif',Georgia,serif;
  font-size:1.75rem;line-height:1;color:#8A5F14;margin:0 0 6px}
.gv-band-tief .gv-stimme-wert{color:var(--gold-hi)}

/* Hochformat im Bild-Text-Modul, etwa fuer ein Portraet.
   Das Standardmodul erzwingt 4:3; ein Hochformat wuerde darin beschnitten
   und der Kopf faellt heraus. Hier bestimmt das Bild sein Verhaeltnis selbst,
   die Spalte wird dafuer schmaler. */
.gv-split.gv-split-hoch{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.gv-split-hoch .gv-split-bild img{aspect-ratio:3/4}
@media (max-width:860px){
  .gv-split.gv-split-hoch{grid-template-columns:1fr}
  .gv-split-hoch .gv-split-bild{max-width:340px;margin:0 auto}
  .gv-split-hoch .gv-split-bild img{aspect-ratio:3/4}
}

/* ============================================================
   Startseite, zweiter Anlauf (07.09.2026)
   Gemessener Ausgangsbefund: kein Logo, keine Icons, keine Bewegung,
   Inhaltsspalte 760 px in einem 1440-px-Fenster, 272 px Abstand zwischen
   den Baendern und 77 Zeichen Text je 100 px Seitenhoehe. Das ergibt den
   duennen Eindruck. Die Bausteine hier folgen dem Standard der uebrigen
   Studio-Projekte (Skill fitness-website-paket).
   ============================================================ */

/* --- Symbolschrift, nur die tatsaechlich benutzten Zeichen ------------- */
@font-face{font-family:"tabler-icons";font-style:normal;font-weight:400;font-display:swap;
  src:url('/wp-content/uploads/fonts/tabler-icons.woff2') format("woff2")}
.ti{font-family:"tabler-icons" !important;speak:none;font-style:normal;font-weight:normal;
  font-variant:normal;text-transform:none;line-height:1;display:inline-block;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ti-barbell:before{content:"\eff0"}
.ti-stretching:before{content:"\f2db"}
.ti-heart-handshake:before{content:"\f0f3"}
.ti-shield-check:before{content:"\eb22"}
.ti-bath:before{content:"\ef48"}
.ti-ball-tennis:before{content:"\ec2a"}
.ti-sparkles:before{content:"\f6d7"}
.ti-brain:before{content:"\f59f"}
.ti-scale:before{content:"\ebc2"}
.ti-flame:before{content:"\ec2c"}
.ti-brand-google:before{content:"\ec1f"}
.ti-rosette-discount-check-filled:before{content:"\f746"}
.ti-phone:before{content:"\eb09"}
.ti-clock:before{content:"\ea70"}
.ti-mail:before{content:"\eae5"}   /* fehlte bis 18.09.2026 - das Zeichen neben der E-Mail-Adresse in der Servicezeile war deshalb auf JEDER Seite eine Luecke */
.ti-map-pin:before{content:"\eae8"}
.ti-check:before{content:"\ea5e"}
.ti-arrow-right:before{content:"\ea1f"}
/* ⚠️ Ein Zeichen, das hier NICHT steht, erscheint auf der Seite als
   nichts - kein Kaestchen, keine Meldung, nur eine Luecke. Die
   Schriftdatei enthaelt alle 5362 Tabler-Zeichen, die Zuordnung Name ->
   Zeichen steht aber nur hier, und sie ist von Hand gepflegt.
   Am 18.09.2026 fehlte auf der Reha-Sport-Seite das Zeichen der ersten
   Eckdatenkarte, waehrend die drei daneben da waren.
   Neues Zeichen gebraucht? Codepunkt aus der Schriftdatei lesen
   (fontTools, getBestCmap) und hier eintragen, nicht raten. */
.ti-prescription:before{content:"\ef99"}
.ti-star-filled:before{content:"\f6a6"}
.ti-users:before{content:"\ebf2"}
.ti-activity:before{content:"\ed23"}

/* --- Breitere Inhaltsspalte -------------------------------------------
   760 px Text in einem 1440 px breiten Fenster wirkt verloren. Der
   Hausstandard der uebrigen Projekte ist 1280. */
.gv-seite .gv-inner{max-width:1280px}
.gv-seite .gv-inner.gv-schmal{max-width:920px}

/* --- Logo in der Kopfzeile --------------------------------------------- */
#gv-kopf .gv-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
#gv-kopf .gv-logo img{display:block;height:46px;width:auto}
@media (max-width:820px){#gv-kopf .gv-logo img{height:38px}}

/* --- Leistungsraster: Symbol, Titel, ein Satz -------------------------
   Ersetzt auf der Startseite das Kartenraster. Kein Kasten, dafuer ein
   Symbol, das den Bereich sofort erkennbar macht. */
.gv-leistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:2px;background:rgba(22,40,31,.10);border-radius:14px;overflow:hidden;margin:52px 0 0}
.gv-leistung{background:var(--paper);padding:32px 28px 30px;text-decoration:none;display:block;
  position:relative;transition:background .28s ease}
.gv-leistung:hover{background:#fff}
.gv-leistung i{font-size:29px;color:var(--gold);display:block;margin:0 0 16px;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.gv-leistung:hover i{transform:translateY(-3px)}
.gv-leistung h3{margin:0 0 7px;font-size:20px}
.gv-leistung p{font-size:15px;line-height:1.62;color:var(--muted);margin:0}
.gv-leistung::after{content:"\ea1f";font-family:"tabler-icons";position:absolute;
  right:26px;bottom:26px;font-size:17px;color:var(--gold);opacity:0;
  transition:opacity .28s,transform .28s}
.gv-leistung:hover::after{opacity:1;transform:translateX(3px)}
.gv-band-tief .gv-leistungen{background:rgba(255,255,255,.13)}
.gv-band-tief .gv-leistung{background:rgba(22,40,31,.9)}
.gv-band-tief .gv-leistung:hover{background:rgba(28,48,38,.96)}
.gv-band-tief .gv-leistung h3{color:#fff}
.gv-band-tief .gv-leistung p{color:rgba(255,255,255,.76)}
.gv-band-tief .gv-leistung i{color:var(--gold-hi)}
@media (max-width:700px){.gv-leistungen{margin-top:36px}.gv-leistung{padding:26px 22px 24px}}

/* --- Echte Google-Rezensionen -----------------------------------------
   Vorher standen dort schlichte Textkarten ohne Sterne, ohne Herkunft und
   mit einem Knopf, der auf eine Maps-SUCHE zeigte statt auf das Profil. */
.gv-rezensionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:22px;margin:46px 0 0}
.gv-rezension{background:#fff;border:1px solid rgba(22,40,31,.1);border-radius:13px;
  padding:26px 26px 22px;display:flex;flex-direction:column;
  box-shadow:0 20px 42px -32px rgba(58,40,18,.4)}
.gv-rez-kopf{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.gv-rez-bild{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'Instrument Serif',Georgia,serif;font-size:19px;
  color:#fff;flex-shrink:0;line-height:1}
.gv-rez-wer{display:flex;flex-direction:column;min-width:0;flex:1}
.gv-rez-name{font-weight:600;font-size:15px;color:var(--pine);line-height:1.3}
.gv-rez-wann{font-size:13px;color:var(--muted);line-height:1.4}
.gv-rez-google{font-size:19px;color:#4285F4;flex-shrink:0}
.gv-rez-sterne{display:flex;align-items:center;gap:7px;margin-bottom:12px;
  color:#B87514;font-size:14px;letter-spacing:1px}
.gv-rez-echt{color:#4285F4;font-size:15px;letter-spacing:0}
.gv-seite .gv-rezension p{font-size:15px;line-height:1.68;color:#333d34;margin:0 0 16px}
.gv-rez-fuss{margin-top:auto;font-size:14px;font-weight:600;color:#8A5F14;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.gv-rez-fuss:hover{text-decoration:underline}
.gv-rez-bilanz{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.gv-rez-note{font-family:'Instrument Serif',Georgia,serif;font-size:2.5rem;
  color:var(--pine);line-height:1}
.gv-rez-bilanz .gv-rez-sterne{margin:0;font-size:17px}
.gv-rez-anzahl{font-size:14.5px;color:var(--muted)}
@media (max-width:700px){.gv-rezensionen{gap:16px;margin-top:34px}.gv-rezension{padding:22px}}

/* --- Pulslinie im dunklen Band ----------------------------------------
   Der Hausstandard verlangt in dunklen Sektionen Bewegung, die auf den
   Zeiger reagiert. Fuer ein Gesundheitszentrum ist die Herzkurve das
   naheliegende Motiv. Liegt hinter dem Inhalt und faengt keine Klicks ab. */
.gv-band-tief{position:relative}
#gv-puls{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.85}
.gv-band-tief > .gv-inner{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){#gv-puls{display:none}}

/* --- Zahlenband unter dem Hero ----------------------------------------
   Ersetzt die drei gleichfoermigen Faktenspalten durch eine Reihe, die
   direkt unter dem Bild sitzt und die Seite oben sofort traegt. */
/* ACHTUNG: Dieser Baustein sitzt im Hero-Block, nicht in .gv-seite. Die
   Farbvariablen sind aber nur INNERHALB von .gv-seite definiert. Stuenden
   hier var(--pine) und var(--gold-hi), fielen sie ersatzlos aus und es
   entstuende weisse Schrift auf hellem Grund. Deshalb feste Werte. */
.gv-eckdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:rgba(255,255,255,.12);position:relative;z-index:3;width:100%}
.gv-eckdaten > div{background:#16281F;padding:30px 26px;text-align:center;color:#fff}
.gv-eckdaten i{font-size:23px;color:#E0B565;display:block;margin:0 0 12px}
.gv-eckdaten b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1;color:#fff;margin:0 0 7px}
.gv-eckdaten span{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.74)}
@media (max-width:700px){.gv-eckdaten > div{padding:24px 18px}}

/* Text, der nur fuer Screenreader gedacht ist. Ohne diese Regel steht er
   sichtbar auf der Seite, etwa das Vorlese-Aequivalent der Sternereihe. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Die Quellenangabe unter einem Zitat erbt sonst das mittlere Grau, das nur
   auf hellem Grund gedacht ist. Auf dem dunklen Band fiel sie damit auf
   gemessene 2,65 statt der noetigen 4,5. */
.gv-seite .gv-band-tief .gv-zitat span{color:rgba(255,255,255,.72)}
.gv-seite .gv-band-tief .gv-zitat{border-left-color:var(--gold-hi)}
.gv-seite .gv-band-tief .gv-zitat p{color:#fff}

/* Der Goldton der Kicker und Textlinks lag auf dem hellen Papierton bei
   gemessenen 3,55 statt der noetigen 4,5. Gleicher Farbton, dunkler
   abgestuft: 5,04. Auf dunklem Grund gilt weiter das helle Gold. */

/* --- Ziele: was moechtest du erreichen ---------------------------------
   Der Leser sucht sich selbst im Angebot. Symbol, Ziel, ein Satz, der das
   Ergebnis beschreibt, nicht die Uebung. */
/* Sechs Ziele gehoeren in zwei Reihen zu drei. Bei auto-fit entstuenden
   vier plus zwei, und die halbleere zweite Reihe wirkt wie ein Fehler. */
.gv-ziele{display:grid;grid-template-columns:1fr;
  gap:clamp(20px,2.4vw,34px);margin:48px 0 0}
@media (min-width:620px){.gv-ziele{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.gv-ziele{grid-template-columns:repeat(3,1fr);gap:38px 44px}}
.gv-ziel{text-align:left}
.gv-ziel i{font-size:27px;color:#E0B565;display:block;margin:0 0 14px}
.gv-seite .gv-ziel h3{margin:0 0 6px;font-size:19px;color:#fff}
.gv-seite .gv-ziel p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.76);margin:0}
.gv-band .gv-ziel i,.gv-band-warm .gv-ziel i{color:#8A5F14}
.gv-seite .gv-band .gv-ziel h3,.gv-seite .gv-band-warm .gv-ziel h3{color:#16281F}
.gv-seite .gv-band .gv-ziel p,.gv-seite .gv-band-warm .gv-ziel p{color:#5C6B62}

/* --- Haeufige Fragen als aufklappbare Liste ---------------------------
   Spart Hoehe und laesst den Leser selbst waehlen. Ohne Skript: das
   details-Element bringt das Verhalten mit. */
.gv-fragen{margin:44px 0 0;border-top:1px solid rgba(22,40,31,.13)}
.gv-frage{border-bottom:1px solid rgba(22,40,31,.13)}
.gv-frage summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:'Instrument Serif',Georgia,serif;font-size:19px;color:#16281F;
  transition:color .2s}
.gv-frage summary::-webkit-details-marker{display:none}
.gv-frage summary:hover{color:#8A5F14}
.gv-frage summary::after{content:"+";position:absolute;right:8px;top:19px;
  font-family:'Karla',sans-serif;font-size:23px;color:#8A5F14;transition:transform .25s}
.gv-frage[open] summary::after{content:"−"}
.gv-seite .gv-frage p{font-size:16px;line-height:1.72;color:#333d34;margin:0 0 22px;
  max-width:74ch;padding-right:40px}
.gv-frage summary:focus-visible{outline:2px solid #8A5F14;outline-offset:3px}

/* ---------------------------------------------------------------
   Tastaturfokus, sichtbar auf hellem UND dunklem Grund (18.09.2026)

   ⚠️ Vorher gab es hier nur die eine Regel darueber. Der Fokus war
   trotzdem sichtbar - Chrome zeichnet von sich aus einen 2 px breiten
   bernsteinfarbenen Ring, und nichts im Stylesheet nimmt ihn weg.
   Gemessen mit echten Tabulatorspruengen: "focusVisible: true,
   outline: solid 2px rgb(229,151,0)".

   ⚠️ Meine erste Messung sagte das Gegenteil. Sie hatte den Fokus per
   element.focus() gesetzt - das loest ":focus-visible" NICHT aus, also
   wurde der ":focus"-Zustand gemessen, fuer den es keine Regel gibt.
   Fuenfter Fall in diesem Projekt, in dem ein Messwert log.

   Warum trotzdem eine eigene Regel: Der Standardring ist in jedem
   Browser anders (Safari blau, Firefox eigener Stil), er ist nur 2 px
   breit, und auf dem dunklen Kopfbild und im Fussbereich geht
   Bernstein auf Tannengruen unter. Der Ring hier ist breiter, hat
   Abstand zum Element und bekommt auf dunklem Grund einen zweiten,
   dunklen Ring aussen herum - damit ist er auf jedem Untergrund zu
   sehen.
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold-dark,#8A5F14);
  outline-offset:3px;
  border-radius:2px}

/* Auf dunklem Grund: heller Ring, damit er sich vom Foto abhebt. */
.kopf a:focus-visible, .kopf button:focus-visible,
.fotoband a:focus-visible, .fotoband button:focus-visible,
.abschluss-karte a:focus-visible, .abschluss-karte button:focus-visible,
#gv-kopf a:focus-visible, #gv-kopf button:focus-visible,
#gv-service a:focus-visible, #gv-overlay a:focus-visible,
footer a:focus-visible, .gv-fuss a:focus-visible,
.gv-hero a:focus-visible, .gv-cta a:focus-visible,
.gv-band-tief a:focus-visible{
  outline-color:#F3D79A;
  box-shadow:0 0 0 6px rgba(9,16,12,.6)}
@media (max-width:700px){.gv-frage summary{padding:18px 34px 18px 0;font-size:17.5px}}


/* ======================================================================
   Kopfleiste: sicherer Grund auf ALLEN Seiten (16.09.2026)

   Gemessen auf /reha-sport/: der Kontrast der weissen Menueschrift gegen
   ihren Hintergrund lag bei 1,17 zu 1. Das Menue war dort praktisch
   unlesbar - auf allen Unterseiten, unabhaengig von der Startseite.

   Ursache: Der Verlauf in #gv-kopf::before ist dafuer gedacht, weisse
   Schrift ueber einem dunklen Hero-FOTO lesbar zu halten. Wo oben kein
   Foto liegt, laeuft er ueber helle Flaeche und traegt nichts.

   Loesung: Die Leiste bekommt einen eigenen dunklen Grund. Auf Seiten mit
   Hero-Foto sitzt sie ohnehin ueber dunklem Bild, dort faellt es nicht
   auf; auf allen uebrigen macht es die Schrift ueberhaupt erst lesbar.
   ====================================================================== */
/* Der Goldschimmer stammt aus der Angebotsleiste, die am 16.09.2026
   entfernt wurde (drei Zeilen im Kopf waren eine zu viel). Andreas wollte
   den Verlauf behalten - er sitzt deshalb jetzt auf der Kopfleiste selbst.
   Zwei Hintergrundebenen statt eines Pseudoelements: dann gibt es keine
   Stapelreihenfolge, die den Inhalt ueberdecken koennte. */
#gv-kopf{background:
  /* Mitte auf dem Logo, nicht daneben. Der Schwerpunkt lag vorher bei
     calc(50% - 400px) und damit rund 90 px RECHTS neben dem Logo, also
     in der leeren Flaeche zwischen Logo und Menue - er betonte eine
     Leerstelle statt der Marke (Befund des Seitenpruefers, 16.09.2026).
     Aus --kopfspalte plus halber Logobreite ergibt sich die Logomitte
     auf jeder Breite von selbst, auch mobil. */
  radial-gradient(760px 260px at calc(var(--kopfspalte) + var(--logo-halb,56px)) 50%,
                  rgba(201,154,68,.26), transparent 72%),
  linear-gradient(100deg,#16281F 0%,#1F3D33 52%,#16281F 100%)}
#gv-kopf.scrolled{background:rgba(22,40,31,.97);backdrop-filter:blur(8px)}

/* Mobil: kleinere Ellipse UND einfarbiger Grund (16.09.2026, Befund des
   Seitenpruefers). Die 760-px-Ellipse war auf einem 390-px-Schirm breiter
   als die Leiste und damit praktisch flach - gewonnen hat dann die zweite
   Ebene, der 100-Grad-Verlauf, dessen Helligkeitsmitte bei 52 Prozent der
   Breite liegt. Auf dem Handy faellt das genau in die leere Luecke zwischen
   Logo und Menue-Knopf: gemessen lag der hellste Punkt bei x 160 bis 212,
   das Logo bei 63 - sieben Stufen dunkler als der Gipfel. Die Leiste las
   sich deshalb als gleichmaessig oliv eingewaschenes Band statt als Licht
   hinter der Marke.

   Zwei Schrauben, beide noetig: die Ellipse so klein, dass sie vor dem
   Menue-Knopf endet, und der Grund einfarbig, damit die beiden Ebenen
   nicht mehr gegeneinander arbeiten. */
@media (max-width:860px){
  #gv-kopf{background:
    radial-gradient(260px 150px at calc(var(--kopfspalte) + var(--logo-halb,43px)) 50%,
                    rgba(201,154,68,.30), transparent 72%),
    #16281F}
}


/* ======================================================================
   Platz fuer die feste Kopfzone (16.09.2026, korrigiert am selben Tag)

   Die Kopfleiste ist "position:fixed" und nimmt deshalb keinen Platz ein.
   Solange sie durchsichtig war, lief das Hero-Bild darunter durch - das
   war so gewollt. Seit sie einen eigenen dunklen Grund hat (sonst war die
   weisse Schrift auf hellen Seiten unlesbar) verdeckt sie den Anfang des
   Inhalts. Dazu kommt die Servicezeile darueber.

   Hier stand vorher die abgeschriebene Zahl 118 px (mobil 104 px). Genau
   solche Zweitschriften gehen auseinander: die Kopfzone bestand zeitweise
   aus DREI Platzreservierungen - diesem Abstand, der Leiste selbst (weil
   sie ihr "position:fixed" verloren hatte) und einem Platzhalter im
   Seiteninhalt. Gemessen 322 px, wo 118 gebraucht waren.

   Jetzt wird gerechnet statt abgeschrieben. Die beiden Hoehen stehen als
   Variablen im Header-Template und gelten auch mobil; dieser Abstand ist
   ihre Summe und kann deshalb gar nicht mehr davon abweichen. Die
   Rueckfallwerte greifen nur, falls das Header-Template fehlt.
   ====================================================================== */
.wp-site-blocks{
  padding-top:calc(var(--service-hoehe,32px) + var(--kopf-hoehe,86px));
  background:#16281F}
/* Der alte Pauschalabstand fuer Seiten ohne Hero faellt damit weg,
   sonst addiert er sich zum neuen. */
body.gv-ohne-hero .wp-site-blocks > main{padding-top:26px}


/* ######################################################################
   GESTALTUNGSSYSTEM DER NEUEN SEITEN  (umgezogen am 17.09.2026)

   Diese rund 860 Zeilen standen bis heute INLINE im Inhalt der
   Startseite. Damit waren sie auf genau einer Seite verfuegbar - fuer
   die 19 Unterseiten haette man sie kopieren muessen, also 19 Kopien
   von 47 KB.

   Genau diese Art Zweitschrift hat am 16. und 17.09. dreimal Schaden
   angerichtet: beim Abstand unter der Kopfzone, bei den Leistenhoehen
   und beim Hintergrund der Kopfleiste. Jedes Mal liefen zwei Fassungen
   auseinander, jedes Mal sah der Quelltext richtig aus.

   Deshalb stehen die Bausteine ab jetzt hier, an genau einer Stelle,
   und jede Seite kann sie benutzen. Die Bausteinnamen (.kopf,
   .abschnitt, .wechsel, .karten, .zahlen, .fotoband, .stimmen,
   .portraet, .abschluss) kommen auf den alten Unterseiten nicht vor -
   dort sind sie also wirkungslos, bis eine Seite umgebaut wird.

   ⚠️ Die drei Regeln, die die ALTEN Farbbaender neutralisieren, sind
   bewusst auf "body:has(.seite)" eingegrenzt. Ungescoped haetten sie
   den 18 noch nicht umgebauten Unterseiten die Baender weggenommen.
   ###################################################################### */

/* ======================================================================
   Entwurf 16.09.2026 — die Farbbänder verschwinden

   Bisher wechselten sich helle und dunkle Vollbreitenbänder ab. Jeder
   Wechsel erzeugt zwei waagerechte Übergänge, und die liest das Auge als
   Streifen, egal wie weich sie gerechnet sind. Deshalb gar keine
   Farbbänder mehr:

     - EIN durchgehender heller Grund für die ganze Seite
     - wo Abwechslung nötig ist, steht ein echtes Foto statt einer Farbe
     - Tiefe entsteht durch Schatten und Überlappung, nicht durch Streifen
     - dazu zwei sehr große, weiche Lichtflecken, die keine Kante haben

   Die Fotos stammen aus dem Shooting vom 08./14.09.2026.
   ====================================================================== */

:root{
  --pine:#16281F; --paper:#F1F3EE; --gold:#C99A44; --gold-hi:#E0B565;
  --gold-dark:#8A5F14; --ink:#16281F;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:'Karla',system-ui,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased}

/* Alte Bausteine stilllegen, die die Streifen erzeugt haben */
body:has(.seite) .gv-blende,body:has(.seite) .gv-auslauf{display:none!important}
body:has(.seite) .gv-band-warm::before{display:none!important}
body:has(.seite) .gv-band,body:has(.seite) .gv-band-warm,body:has(.seite) .gv-band.gv-luft{background:transparent!important}

/* ---------------------------------------------------------------
   Durchgehender Grund mit zwei weichen Lichtflecken.
   Sie sind grösser als der Bildschirm und laufen radial aus, deshalb
   entsteht nirgends eine waagerechte Kante.
   --------------------------------------------------------------- */
.seite{position:relative;background:var(--paper);overflow-x:hidden}
.seite::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 900px at 12% 14%, rgba(201,154,68,.10), transparent 60%),
    radial-gradient(1000px 800px at 88% 52%, rgba(46,110,78,.09), transparent 62%),
    radial-gradient(900px 700px at 30% 88%, rgba(201,154,68,.07), transparent 60%);
}
.seite > *{position:relative;z-index:1}

/* ---------------------------------------------------------------
   Angebotsleiste ENTFERNT 16.09.2026 (Andreas)
   Der Kopfbereich hatte drei Zeilen uebereinander: Servicezeile,
   Kopfleiste, Angebotsleiste. Die dritte ist raus - ihr Text war
   das dritte Gratis-Angebot im ersten Bildschirm, ihr Knopf das
   dritte Klickziel auf dasselbe Ding. Was bleiben sollte, war der
   Goldschimmer: der sitzt jetzt auf der Kopfleiste selbst
   (seiten.css, #gv-kopf).
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   2. Kopfbereich mit echtem Foto
   --------------------------------------------------------------- */
.kopf{position:relative;overflow:hidden;background:var(--pine);
  min-height:clamp(480px,calc(100vw / 2.3),780px);display:flex;flex-direction:column;
  justify-content:center}
/* Gemessen: die Koepfe der vorderen Personen liegen bei Bildzeile 227
   bis 387. Bei 42 Prozent begann der sichtbare Streifen erst bei Zeile 234,
   der Kopf rechts war angeschnitten. 18 Prozent laesst allen Koepfen Luft. */
.kopf-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;z-index:0}
/* ---------------------------------------------------------------
   Kopfbereich OHNE Foto (18.09.2026)

   Nicht jede Unterseite hat ein echtes Foto, das zu ihr gehoert. Die
   18 vorhandenen Kopfbilder der alten Unterseiten sind samt und
   sonders KI-erzeugt - dunkelgruene Waende, warmes Licht, leere
   Raeume. Sie waren am 07.09.2026 als ausdrueckliche Zwischenloesung
   gebaut, weil die KI bei Menschen an Geraeten reihenweise Fehler
   produzierte (Haende, die ins Leere greifen).

   ⚠️ Im alten Aussehen waren sie kleine Schmuckbilder. Im neuen sind
   sie vollflaechige Kopfbilder mit Text darauf - sie behaupten also
   "so sieht es bei uns aus". Direkt unter einer Startseite mit echten
   Studiofotos liest sich das als ein anderes Gebaeude.

   Deshalb diese Variante: Tannengrund mit demselben Goldschimmer, den
   die Kopfleiste traegt. Das ist ein gestalteter Zustand, keine
   Luecke - und sobald ein echtes Foto da ist, wird daraus eine Zeile
   Markup. */
.kopf.ohne-bild{background:
  radial-gradient(1100px 560px at 22% 30%, rgba(201,154,68,.20), transparent 68%),
  /* Der zweite Lichtfleck saß bei 84 Prozent Hoehe - also mitten in der
     150 px hohen Ausblendung nach unten. Daraus wurde ein heller
     Streifen quer ueber die ganze Breite, kurz bevor die Papierfarbe
     kommt. Bei einem Foto faellt das nicht auf, auf einfarbigem Grund
     schon. Jetzt sitzt er hoeher und bleibt im dunklen Teil. */
  radial-gradient(900px 460px at 86% 54%, rgba(46,110,78,.30), transparent 66%),
  linear-gradient(104deg,#132219 0%,#1F3D33 56%,#16281F 100%);
  min-height:clamp(380px,calc(100vw / 3.1),560px)}
.kopf.ohne-bild .kopf-schleier{display:none}
.kopf.ohne-bild::after{background:linear-gradient(180deg,
  rgba(241,243,238,0) 0%,
  rgba(241,243,238,0) calc(100% - 32px),
  rgba(241,243,238,.16) calc(100% - 22px),
  rgba(241,243,238,.52) calc(100% - 10px),
  #F1F3EE 100%)}
@media (max-width:860px){
  .kopf.ohne-bild{min-height:0;padding-top:18px}
}

.kopf-schleier{position:absolute;inset:0;z-index:1;background:
  linear-gradient(98deg,rgba(10,17,13,.88) 0%,rgba(10,17,13,.74) 30%,
    rgba(10,17,13,.46) 52%,rgba(10,17,13,.20) 74%,rgba(10,17,13,.26) 100%),
  linear-gradient(180deg,rgba(10,17,13,.42) 0%,rgba(10,17,13,0) 30%,
    rgba(10,17,13,0) 58%,rgba(12,20,16,.72) 100%)}
/* Das Bild endete unten als harte Linie, links und rechts neben den
   Eckdaten gut sichtbar. Jetzt laeuft es ueber die letzten 150 px in die
   Papierfarbe aus, dadurch verschwindet die Kante. */
/* Der Auslauf lag mit z-index:2 gleichauf mit .kopf-inner - und ein
   ::after wird zuletzt gezeichnet, also gewann er. Gemessen: der Knopf
   "7 Tage gratis testen" lief von rgb(205,162,82) oben nach
   rgb(216,188,132) unten, waehrend derselbe Knopf in der Kopfleiste
   sattes rgb(201,154,68) zeigt. Der Verlauf lag milchig ueber dem
   wichtigsten Klickziel der Seite, dem Umrissknopf daneben nahm er die
   untere Rahmenlinie. Andreas am 16.09.: "haben wir den weissen
   Farbverlauf mitten in den Button rein, was nicht sein darf".

   Zwei Aenderungen, beide noetig:
   1. z-index unter .kopf-inner (siehe dort z-index:3). Damit liegt kein
      Verlauf mehr ueber Text oder Knoepfen, egal wie hoch er ist.
   2. Die sichtbare Wirkung nach unten gezogen: bis 64 Prozent der Hoehe
      bleibt er vollstaendig durchsichtig. Gemessen enden die Knoepfe
      44 px ueber der Bildunterkante (mobil 38 px), der Verlauf faengt
      jetzt rund 54 px ueber der Kante an zu greifen - also unterhalb
      von ihnen. Der Umrissknopf ist durchsichtig, durch ihn hindurch
      waere der Verlauf sonst trotz z-index sichtbar geblieben. */
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  z-index:1;pointer-events:none;
  /* Nachgezogen 16.09.2026: Die Stopps standen in Prozent der
     Verlaufshoehe, der Abstand zum Knopf hing damit an der Hero-Hoehe.
     Gemessen blieben bei 1440 px nur 4 px Reserve - heute null Abweichung,
     aber das war Glueck, nicht Abstand: eine Ueberschriftenzeile mehr oder
     ein anderer Ersatzschriftschnitt, und der Knopf steht wieder im
     Verlauf. Die Stopps haengen jetzt in Pixeln an der UNTERKANTE. Der
     Anstieg belegt die letzten 32 px; die Knoepfe stehen mindestens 44 px
     darueber (mobil 38 px), also kann er sie nicht mehr erreichen. */
  background:linear-gradient(180deg,
    rgba(241,243,238,0) 0%,
    rgba(241,243,238,0) calc(100% - 32px),
    rgba(241,243,238,.16) calc(100% - 22px),
    rgba(241,243,238,.52) calc(100% - 10px),
    #F1F3EE 100%)}
/* Kein "width:100%" mehr (17.09.2026). Die Startseite rechnet mit
   content-box - "box-sizing:border-box" gilt nur innerhalb .gv-seite, also
   auf den Unterseiten. Hier addierte sich das Polster auf die volle Breite:
   gemessen war .kopf-inner bei 390 px Bildschirmbreite 438 px breit, der
   Umbruchpunkt lag 24 px AUSSERHALB. "overflow:hidden" am .kopf verdeckte
   es, solange die laengste Zeile kurz genug blieb - ein laengeres Wort oder
   eine groessere Systemschrift haette ohne Vorwarnung Buchstaben
   abgeschnitten. Ohne die Angabe fuellt der Block den Platz abzueglich
   seines Polsters, auf dem Rechner aendert sich dadurch nichts. */
/* Korrigiert 17.09.2026, zweiter Anlauf.
   Erster Versuch war, "width:100%" zu streichen - das nahm mobil den
   Ueberstand, liess den Block auf dem Rechner aber auf 772 px schrumpfen:
   als Flex-Element in einer Spalte verhindert "margin:0 auto", dass er
   sich streckt. Der Hero-Text stand danach bei 390 statt 130 px, also
   260 px neben der Achse aller uebrigen Inhalte. Gemessen und
   zurueckgenommen.

   Richtig ist border-box. Damit umfasst max-width das Polster mit, und
   der Block kann nicht breiter werden als sein Platz. Damit die Achse
   bleibt, muss die Maximalbreite die Spaltenbreite PLUS beide Polster
   sein - beides haengt jetzt an einer Variablen und kann nicht mehr
   auseinanderlaufen. */
.kopf-inner{--polster:clamp(20px,5vw,56px);
  box-sizing:border-box;position:relative;z-index:3;
  max-width:calc(1180px + 2 * var(--polster));margin:0 auto;width:100%;
  padding:96px var(--polster) 44px;color:#fff}
.kopf-inner > *{max-width:660px}
.kopf-marke{font-family:ui-monospace,Consolas,monospace;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 22px;
  display:flex;align-items:center;gap:12px}
.kopf-marke::before{content:"";width:34px;height:1px;background:var(--gold)}
.kopf h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.1rem,1.6rem + 2.6vw,3.8rem);line-height:1.08;margin:0 0 22px;
  color:#fff;text-wrap:balance}
.kopf h1 em{font-style:italic;color:var(--gold-hi)}
.kopf-lede{font-size:18px;line-height:1.62;color:rgba(255,255,255,.88);
  max-width:50ch;margin:0 0 30px}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap}
.knopf-gold{background:var(--gold);color:#16281F;font-weight:600;font-size:15.5px;
  padding:15px 28px;border-radius:2px;text-decoration:none;
  transition:background .2s,transform .2s}
.knopf-gold:hover{background:var(--gold-hi);transform:translateY(-2px)}
.knopf-klar{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);
  font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:2px;
  text-decoration:none;transition:border-color .2s,transform .2s}
.knopf-klar:hover{border-color:#fff;transform:translateY(-2px)}

/* Eckdaten sitzen auf der Kante des Kopfbilds und überlappen es.
   Überlappung statt Trennlinie: dadurch gibt es keine sichtbare Fuge. */
.eckdaten{position:relative;z-index:3;max-width:1180px;
  margin:-46px auto 0;padding:0 clamp(20px,5vw,56px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(22,40,31,.10)}
.eckdaten > div{background:#fff;padding:22px 18px;text-align:center;
  box-shadow:0 18px 50px -28px rgba(22,40,31,.5)}
.eckdaten i{color:var(--gold-dark);font-size:21px;display:block;margin-bottom:8px}
.eckdaten b{display:block;font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;font-size:19px;color:var(--pine);margin-bottom:3px}
.eckdaten span{font-size:13px;color:#5C6B62;line-height:1.4}
/* Wortpaare, die nie getrennt werden duerfen: "Reha-Sport", "Dr. Wolff",
   "Formular 56". Gemessen 18.09.2026 bei 1100 px: in der Eckdatenreihe
   stand "die aerztliche Verordnung fuer Reha-" / "Sport" - das eigene
   Schluesselwort der Seite getrennt, "Sport" allein auf der zweiten
   Zeile. Typografisch erlaubt, liest sich aber wie ein Fehler.

   ⚠️ Bewusst eine Klasse statt eines geschuetzten Trennstrichs:
   WordPress wandelt das kaufmaennische Und in Seiteninhalt um, eine
   Entitaet wie &#8209; steht danach als sichtbarer Text auf der Seite.
   Dieselbe Falle, die am 17.09. das ganze Effekt-Skript getoetet hat. */
.zusammen{white-space:nowrap}
@media (max-width:860px){.eckdaten{grid-template-columns:repeat(2,1fr);margin-top:-30px}}
@media (max-width:520px){.eckdaten{grid-template-columns:1fr}}
@media (max-width:860px){
  .kopf{min-height:0;display:block}
  .kopf-bild{position:relative;height:min(34vh,250px);display:block;
    object-position:50% 20%}
  /* ⚠️ Das "+ 1px" ist kein Schoenheitsfehler, sondern die Reparatur
     einer sichtbaren Naht. Bild und Schleier sind gleich hoch, ihre
     Unterkanten liegen aber 0,05 px auseinander (Bild 354,05 - Schleier
     354,00). Gerendert wurde daraus EINE helle Bildzeile ueber die volle
     Breite: gemessen (22,40,31) - (83,93,98) - (22,40,31) bei y=354.
     Genau an der Stelle, wo Foto und dunkler Textbereich zusammenstossen,
     also an der auffaelligsten Kante des mobilen Kopfbereichs.
     Der Verlauf endet ohnehin in der Tannenfarbe, ein Pixel mehr davon
     sieht niemand. Befund des Seitenpruefers 18.09.2026, bestand auch auf
     der Startseite. */
  .kopf-schleier{height:calc(min(34vh,250px) + 1px);background:linear-gradient(180deg,
    rgba(12,20,16,.30) 0%,rgba(12,20,16,.10) 44%,rgba(22,40,31,1) 100%)}
  /* Kein eigenes Polster mehr: der Hero folgt jetzt derselben Formel
     wie .abschnitt, clamp(20px,5vw,56px). Vorher standen hier feste
     22 bzw. 24 px - der Hero-Text lag dadurch mobil 4 px und bei 768 px
     sogar 16 px neben der Achse aller uebrigen Inhalte. */
  .kopf-inner{padding:26px var(--polster) 38px}
}

/* ⚠️ Zwischen 861 und 1180 px lief der Text in die helle Bildzone.

   Der Verlauf des Schleiers ist in Prozent der ELEMENTBREITE gerechnet,
   der Text hatte aber eine feste Hoechstbreite von 660 px. Bei 1440 px
   belegt er damit 55 Prozent der Breite und bleibt in der dunklen Zone;
   bei 900 px waren es 78 Prozent, und die Zeilenenden ragten in den
   Bereich mit nur noch 0,20 bis 0,46 Deckkraft. Gemessen 4,2:1, also
   unter der Schwelle von 4,5.

   ⚠️ Der erste Anlauf hat den SCHLEIER verstaerkt. Das war falsch
   herum: gemessen im Vergleich 1180 gegen 1181 px hat er die rechte
   Bildhaelfte von L=0,092 auf L=0,052 gedrueckt - also fast halbiert.
   Das Foto ist der Grund, warum dieser Kopfbereich kein Farbband ist;
   es abzudunkeln, bis der Text passt, gibt genau das wieder auf.

   Jetzt wird stattdessen die TEXTSPALTE schmaler. Damit endet der Text
   bei jeder Breite an ungefaehr derselben relativen Stelle wie bei
   1440 px, und der Schleier darf bleiben, wie er ist. Der Text bricht
   dadurch eine Zeile frueher um - das ist der ganze Preis. */
@media (min-width:861px) and (max-width:1180px){
  /* ⚠️ Hier stand zuerst ".kopf-inner > *". Das war ein Eigentor: die
     Regel hat dieselbe Spezifitaet wie ".kopf-lede{max-width:50ch}",
     steht aber spaeter - der Vorspann wurde dadurch BREITER statt
     schmaler (bei 900 px von rund 450 auf 504 px). Gemessen sank der
     Kontrast der Startseite daraufhin auf 3,68:1, also unter den
     Ausgangswert. Deshalb beide Elemente ausdruecklich benennen. */
  .kopf h1{max-width:clamp(400px,54vw,660px)}
  .kopf-lede{max-width:clamp(340px,44vw,50ch)}
  /* Die schmalere Spalte allein reicht nicht. Deshalb zusaetzlich ein
     maessiger Aufschlag auf den Schleier - rund die Haelfte dessen, was
     der erste Anlauf genommen hatte. Gemessen kostet er das Foto 28
     Prozent Helligkeit in der rechten Bildhaelfte (L 0,098 auf 0,071,
     Vergleich 1181 gegen 1180 px bei angehaltener Animation); der erste
     Anlauf hatte fast die Haelfte genommen. */
  .kopf-schleier{background:
    linear-gradient(98deg,rgba(10,17,13,.91) 0%,rgba(10,17,13,.82) 30%,
      rgba(10,17,13,.62) 52%,rgba(10,17,13,.34) 74%,rgba(10,17,13,.32) 100%),
    linear-gradient(180deg,rgba(10,17,13,.42) 0%,rgba(10,17,13,0) 30%,
      rgba(10,17,13,0) 58%,rgba(12,20,16,.72) 100%)}
}

/* ---------------------------------------------------------------
   3. Textabschnitte auf durchgehendem Grund
   --------------------------------------------------------------- */
.abschnitt{max-width:1180px;margin:0 auto;padding:clamp(72px,8vw,118px) clamp(20px,5vw,56px)}
/* Gemessen: der Einleitungsblock begann bei x=329, alles andere bei
   x=131 - zwei gleich gebaute Ueberschriften direkt untereinander,
   200 px versetzt. Die schmale Spalte bleibt, sitzt aber jetzt auf
   derselben linken Achse wie der Rest. */
.abschnitt.schmal{max-width:1180px}
.abschnitt.schmal > *{max-width:720px}
.kicker{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);
  display:block;margin-bottom:14px}
.abschnitt h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,1.3rem + 1.9vw,2.8rem);line-height:1.14;
  margin:0 0 20px;color:var(--pine);text-wrap:balance}
.abschnitt p{font-size:17px;line-height:1.72;color:#3A4A42;margin:0 0 18px}
.unter{font-size:17.5px;color:#4A5A52;max-width:62ch}

/* Kleingedrucktes, das trotzdem hingehoert: Vorbehalte zur Kostenuebernahme,
   Trägerschaft, Geltungsbereich. Steht auf mehreren Unterseiten und gehoert
   deshalb hierher, nicht in die einzelne Seite.

   ⚠️ Der Selektor heisst ".abschnitt .hinweis", nicht ".hinweis". Direkt
   darueber steht ".abschnitt p" mit Farbe und Schriftgroesse - das sind
   zwei Klassen plus Element (0-2-0). Ein blosses ".hinweis" (0-1-0)
   verliert dagegen, und zwar lautlos: die Regel steht da, sie greift nur
   nicht. Genau dieser Gleichstand hat am 16.09. den Goldschimmer
   verschluckt und am 17.09. die Vorspann-Texte dreier Unterseiten
   unlesbar gemacht. */
.abschnitt .hinweis{font-size:15px;line-height:1.66;color:#5C6B62;
  max-width:68ch;margin:0;padding:2px 0 2px 20px;
  border-left:2px solid rgba(201,154,68,.5)}

/* ---------------------------------------------------------------
   Punkteliste: mehrere gleichrangige Sachen nebeneinander, jede mit
   Ueberschrift und zwei Saetzen. Loest .gv-merkmale aus dem alten
   System ab (Fitness, Vitalitaet, Massagen, Back Check, Mentaltraining,
   Beauty-Lounge, Ruecken).

   Bewusst ohne Kasten: Karten gibt es auf der Startseite schon, und
   zwei verschiedene Kartenarten auf einer Seite sehen nach Baukasten
   aus. Hier traegt eine Haarlinie.
   --------------------------------------------------------------- */
.punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 54px;margin:42px 0 0}
.punkte > div{padding:26px 0 24px;border-top:1px solid rgba(22,40,31,.14)}
.abschnitt .punkte h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:21px;line-height:1.24;margin:0 0 8px;color:var(--pine)}
.abschnitt .punkte p{font-size:15.5px;line-height:1.7;margin:0;color:#4A5A52}
/* Im Fotoband steht dieselbe Liste auf dunklem Grund. */
.fotoband .punkte > div{border-top-color:rgba(255,255,255,.2)}
.fotoband .punkte h3{color:#fff}
.fotoband .punkte p{color:rgba(255,255,255,.82)}
@media (max-width:700px){.punkte{gap:0}.punkte > div{padding:22px 0 20px}}

/* ---------------------------------------------------------------
   Haken-Liste: kurze Aufzaehlungen, bei denen jeder Eintrag eine Zeile
   ist. Loest .gv-liste ab (7-Tage-Gutschein, Praeventionskurse).
   --------------------------------------------------------------- */
.liste{list-style:none;margin:28px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:13px 40px}
.abschnitt .liste li{position:relative;padding-left:28px;font-size:16px;
  line-height:1.66;color:#3A4A42;margin:0}
.liste li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}
.fotoband .liste li{color:rgba(255,255,255,.86)}

/* ---------------------------------------------------------------
   Leitsatz: ein Satz, der fuer sich steht, auf hellem Grund.
   Loest .gv-gross ab (Fitness, Ueber uns, Mentaltraining,
   Ganzheitliche Betrachtung).

   ⚠️ Nicht mit .zitat verwechseln: das gehoert in den Fotoband und
   ist auf weisse Schrift ueber dunklem Grund ausgelegt. Hier steht
   Tannengruen auf Papierfarbe.
   --------------------------------------------------------------- */
.leitsatz{max-width:26ch;margin:0 auto var(--luft-s);text-align:center}
.abschnitt .leitsatz p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.6rem);line-height:1.28;color:var(--pine);
  margin:0;text-wrap:balance}
.leitsatz p em{font-style:italic;color:var(--gold-dark)}
.abschnitt .leitsatz span{display:block;font-family:'Karla',sans-serif;font-style:normal;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#5C6B62;
  margin-top:24px}
.leitsatz::after{content:"";display:block;width:54px;height:1px;
  background:var(--gold);margin:26px auto 0}

/* ---------------------------------------------------------------
   Fragen und Antworten. Einspaltig und auf 760 px begrenzt, weil die
   Antworten mehrere Absaetze haben - in einem dreispaltigen Raster
   waere jede Spalte zu schmal zum Lesen. Deshalb NICHT .punkte
   zweckentfremden.
   --------------------------------------------------------------- */
.fragen{max-width:760px;margin:40px 0 0}
.fragen > div{padding:32px 0 6px;border-top:1px solid rgba(22,40,31,.14)}
.fragen > div:first-child{border-top:none;padding-top:8px}
.fragen .nummer{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);
  display:block;margin-bottom:10px}
.abschnitt .fragen h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:23px;line-height:1.22;margin:0 0 12px;color:var(--pine)}
.abschnitt .fragen p{font-size:16.5px;line-height:1.72;color:#3A4A42;margin:0 0 16px}

/* ---------------------------------------------------------------
   4. Foto-Abschnitt — ersetzt das dunkle Farbband.
   Der Übergang ist jetzt Bildinhalt statt Farbfuge.
   --------------------------------------------------------------- */
/* Kein Vollbreitenband mehr: das Foto ist ein Objekt auf der
   durchlaufenden Flaeche, eingerueckt und mit weit gestreutem Schatten.
   Damit gibt es oben und unten keine Kante ueber die ganze Breite,
   sondern ein Bild mit Rand - der Unterschied, der den Streifen nimmt. */
.fotoband{position:relative;max-width:1180px;
  margin:clamp(40px,6vw,86px) auto;border-radius:4px;overflow:hidden;
  min-height:clamp(540px,58vw,720px);display:flex;align-items:center;
  box-shadow:0 40px 110px -50px rgba(22,40,31,.75),
             0 4px 14px -6px rgba(22,40,31,.22)}
@media (max-width:1240px){.fotoband{margin-left:clamp(16px,3vw,32px);
  margin-right:clamp(16px,3vw,32px)}}
.fotoband-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;z-index:0}
/* Der Schleier war im Textbereich zu duenn: der Text stand teils auf
   hellen Bildstellen. Jetzt bleibt die linke Haelfte, wo der Text steht,
   durchgehend dunkel, und erst rechts davon wird das Bild frei. */
.fotoband-schleier{position:absolute;inset:0;z-index:1;background:
  linear-gradient(94deg,rgba(9,16,12,.93) 0%,rgba(9,16,12,.90) 30%,
    rgba(9,16,12,.84) 50%,rgba(9,16,12,.62) 68%,rgba(9,16,12,.40) 86%,
    rgba(9,16,12,.46) 100%),
  linear-gradient(180deg,rgba(9,16,12,.30) 0%,rgba(9,16,12,0) 22%,
    rgba(9,16,12,0) 76%,rgba(9,16,12,.34) 100%)}
.fotoband-inner{--polster:clamp(28px,5vw,64px);
  box-sizing:border-box;position:relative;z-index:2;
  max-width:calc(1180px + 2 * var(--polster));margin:0 auto;width:100%;
  padding:clamp(56px,6vw,88px) var(--polster);color:#fff}
.fotoband .kicker{color:var(--gold-hi)}
.fotoband h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,1.3rem + 1.9vw,2.8rem);line-height:1.14;color:#fff;
  margin:0 0 18px;max-width:22ch}
.fotoband .unter{color:rgba(255,255,255,.85);max-width:56ch;margin-bottom:8px}

/* Ablaufspur im Fotoband */
.schritte{list-style:none;margin:44px 0 0;padding:0;counter-reset:s;max-width:760px}
.schritte li{position:relative;padding:0 0 34px 74px;margin:0;counter-increment:s}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-4px;
  width:47px;height:47px;border-radius:50%;background:var(--gold);color:#16281F;
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',Georgia,serif;font-size:21px;
  box-shadow:0 0 0 7px rgba(255,255,255,.07)}
.schritte li::after{content:"";position:absolute;left:23px;top:47px;bottom:2px;
  width:1px;background:linear-gradient(180deg,rgba(201,154,68,.5),rgba(201,154,68,0))}
.schritte li:last-child::after{display:none}
.schritte h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:21px;color:#fff;margin:0 0 8px}
.schritte p{font-size:16.5px;line-height:1.68;color:rgba(255,255,255,.84);margin:0}

/* Dieselben Schritte auf hellem Grund. Noetig, weil nicht jede Seite ein
   Foto hat, das den Fotoband traegt - und die drei Schritte sind auf
   mehreren Unterseiten der Kern des Inhalts (Praeventionskurse, Ruecken
   und Gelenke, Squash, Magic Slim).

   ⚠️ Zwei Klassen plus Element, damit die weissen Farben oben
   ueberschrieben werden: ".schritte h3" ist 0-1-1, ".abschnitt .schritte h3"
   ist 0-2-1. Ein blosses ".schritte-hell h3" waere 0-1-1 gewesen und haette
   je nach Reihenfolge verloren. */
.abschnitt .schritte h3{color:var(--pine)}
.abschnitt .schritte p{color:#3A4A42}
.abschnitt .schritte li::before{box-shadow:0 0 0 7px rgba(201,154,68,.13)}
.abschnitt .schritte li::after{background:linear-gradient(180deg,
  rgba(201,154,68,.55),rgba(201,154,68,0))}

.zitat{margin:46px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.18);
  max-width:700px}
.zitat p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:19.5px;line-height:1.6;color:#fff;margin:0 0 12px}
.zitat span{font-size:13.5px;letter-spacing:.06em;color:var(--gold-hi)}

/* ---------------------------------------------------------------
   Der Fotoband auf schmalen Schirmen (18.09.2026)

   ⚠️ Am Rechner ist das Foto der Grund, auf dem der Text steht - eine
   breite Flaeche, die reichlich Bildinhalt zeigt. Auf dem Telefon geht
   diese Rechnung nicht auf: der Block ist dort 390 px breit und durch
   seinen Inhalt (Ueberschrift, drei Schritte, Zitat) 1247 px hoch.
   "object-fit:cover" schneidet daraus einen senkrechten Streifen von
   GEMESSEN 21 PROZENT DER BILDBREITE. Zu sehen war ein dunkler Fleck,
   ein Hosenbein und ein Turnschuh - kein Foto mehr, sondern ein Fehler.

   Deshalb mobil dieselbe Loesung wie beim Kopfbereich, und zwar aus
   demselben Grund: Das Foto wird zum Band oben, der Text steht darunter
   auf der Tannenfarbe. Das Bild zeigt dann wieder eine ganze Szene, und
   die Seite bleibt in ihrer eigenen Formensprache - der Besucher kennt
   diesen Aufbau vom Kopfbereich schon.

   Die Zeile "+ 1px" beim Schleier hat denselben Grund wie oben beim
   Kopfbereich: sonst schaut eine helle Bildzeile unter dem Verlauf
   hervor.
   --------------------------------------------------------------- */
@media (max-width:860px){
  .fotoband{display:block;min-height:0;background:var(--pine);
    margin-left:clamp(16px,3vw,32px);margin-right:clamp(16px,3vw,32px)}
  .fotoband-bild{position:relative;height:min(30vh,230px);display:block;
    object-position:50% 42%}
  .fotoband-schleier{height:calc(min(30vh,230px) + 1px);
    background:linear-gradient(180deg,rgba(9,16,12,.34) 0%,
      rgba(9,16,12,.10) 46%,var(--pine) 100%)}
  .fotoband-inner{padding-top:34px}
}

/* ---------------------------------------------------------------
   5. Leistungen — schwebende Karten auf dem durchgehenden Grund
   --------------------------------------------------------------- */
.leistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:22px;margin-top:48px}
.leistung{background:#fff;padding:32px 28px 30px;text-decoration:none;
  display:block;border-radius:3px;
  box-shadow:0 2px 6px -2px rgba(22,40,31,.10),0 24px 60px -34px rgba(22,40,31,.42);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s}
.leistung:hover{transform:translateY(-5px);
  box-shadow:0 4px 10px -2px rgba(22,40,31,.12),0 34px 74px -32px rgba(22,40,31,.5)}
.leistung i{color:var(--gold-dark);font-size:25px;display:block;margin-bottom:16px}
.leistung h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:20px;color:var(--pine);margin:0 0 10px}
.leistung p{font-size:15.5px;line-height:1.62;color:#4A5A52;margin:0}

/* ---------------------------------------------------------------
   6. Blick ins Haus — der Imagefilm, bewusst NICHT im Kopfbereich
   --------------------------------------------------------------- */
.film{max-width:1180px;margin:0 auto;padding:clamp(60px,7vw,100px) clamp(20px,5vw,56px)}
.film-rahmen{position:relative;border-radius:4px;overflow:hidden;
  box-shadow:0 30px 90px -40px rgba(22,40,31,.62);background:var(--pine)}
.film-rahmen video{display:block;width:100%;height:auto}
.film-text{max-width:620px;margin-bottom:34px}

/* ---------------------------------------------------------------
   7. Abschluss
   --------------------------------------------------------------- */
.abschluss{max-width:1180px;margin:clamp(30px,4vw,56px) auto clamp(70px,8vw,110px);
  padding:0 clamp(20px,5vw,56px)}
.abschluss-karte{position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(128deg,#1F3D33 0%,#16281F 64%);color:#fff;
  padding:clamp(48px,6vw,78px) clamp(28px,5vw,70px);
  box-shadow:0 34px 90px -44px rgba(22,40,31,.7)}
.abschluss-karte::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 16% 20%, rgba(201,154,68,.24), transparent 66%)}
.abschluss-karte > *{position:relative;z-index:2}
.abschluss-karte h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem);line-height:1.14;color:#fff;
  margin:0 0 18px;max-width:20ch}
.abschluss-karte h2 em{font-style:italic;color:var(--gold-hi)}
.abschluss-karte p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.86);
  max-width:56ch;margin:0 0 30px}
.abschluss-karte .kicker{color:var(--gold-hi)}


/* ---------------------------------------------------------------
   Bewertungen als schwebende Karten, gleiche Sprache wie die
   Leistungskacheln: Objekte auf durchlaufender Flaeche.
   --------------------------------------------------------------- */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin-top:46px}
.stimme{background:#fff;padding:30px 28px 26px;border-radius:3px;
  box-shadow:0 2px 6px -2px rgba(22,40,31,.10),0 24px 60px -34px rgba(22,40,31,.42)}
.stimme-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.stimme-bild{width:40px;height:40px;border-radius:50%;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:600;font-size:16px;flex:none}
.stimme-name{display:block;font-weight:600;font-size:15px;color:var(--pine)}
.stimme-wann{display:block;font-size:12.5px;color:#7A8880}
.stimme-google{margin-left:auto;color:#7A8880;font-size:17px}
.stimme-sterne{color:#B87514;letter-spacing:.09em;font-size:15px;margin-bottom:12px}
.stimme p{font-size:15.5px;line-height:1.68;color:#3A4A42;margin:0}
.bilanz{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(22,40,31,.12)}
.bilanz-note{font-family:'Instrument Serif',Georgia,serif;font-size:38px;
  color:var(--pine);line-height:1}
.bilanz-text{font-size:15px;color:#4A5A52}
.bilanz a{margin-left:auto;color:var(--gold-dark);font-weight:600;font-size:15px;
  text-decoration:none;border-bottom:1px solid rgba(138,95,20,.35);padding-bottom:2px}
.bilanz a:hover{border-bottom-color:var(--gold-dark)}
@media (max-width:620px){.bilanz a{margin-left:0}}

/* Auf schmalen Schirmen stand der Text bis an den rechten Rand.
   Etwas mehr Luft und eine Spur kleinere Ueberschrift. */
@media (max-width:520px){
    .kopf-inner{padding:26px var(--polster) 38px}
  /* Gemessen: die Ueberschrift lief bis an den rechten Rand. Kleinere
     Schrift, kein Ausgleichsumbruch und Silbentrennung als Notausgang -
     "Gesundheitszentrum" ist ein langes Wort auf schmalem Schirm. */
  .kopf h1{font-size:1.68rem;line-height:1.16;text-wrap:normal;
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .kopf-lede{font-size:16.5px}
  .abschnitt{padding-left:24px;padding-right:24px}
  .abschnitt h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .fotoband-inner{--polster:24px}
  .fotoband h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}


/* ---------------------------------------------------------------
   Einbettung ins Theme. seiten.css macht das ueber body:has(.gv-seite);
   diese Seite heisst .seite, deshalb hier noch einmal eigenstaendig:
   Seitentitel ausblenden und den Abstand des Theme-Containers auf null,
   damit der Kopfbereich direkt unter der Menueleiste sitzt.
   --------------------------------------------------------------- */
body:has(.seite) .wp-block-post-title{display:none}
body:has(.seite) .wp-site-blocks > main{margin-block-start:0 !important;padding-top:0 !important}
/* Gemessen: zwischen Kopfleiste (endet y=85) und Angebotsleiste (ab y=105)
   standen 19 px Papierfarbe - eine sichtbare Fuge genau dort, wo zwei
   dunkle Flaechen zusammenstossen sollen. Der Abstand kommt aus den
   Theme-Containern, deshalb alle auf null. */
body:has(.seite) .wp-site-blocks > main > *:first-child,
body:has(.seite) .entry-content > *:first-child,
body:has(.seite) .wp-block-post-content > *:first-child{margin-top:0 !important}
body:has(.seite) .entry-content,
body:has(.seite) .wp-block-post-content{padding-top:0 !important}
body:has(.seite) .seite{margin-top:0 !important}
body:has(.seite) main > .wp-block-group{padding-block-start:0 !important}
body:has(.seite) .entry-content{margin-block-start:0 !important}
body:has(.seite) .wp-block-post-content{margin-block-start:0 !important}

/* ---------------------------------------------------------------
   Einblenden nur, wenn JavaScript laeuft. Ohne diese Absicherung
   bleibt der Text unsichtbar, falls das Skript nicht durchkommt.
   --------------------------------------------------------------- */
/* ======================================================================
   16.09.2026, zweiter Durchgang: die Kaesten verschwinden

   Befund: jedes Element war ein weisser Kasten mit Schatten auf hellem
   Grund - Eckdaten, acht Leistungen, drei Bewertungen. Immer dieselbe
   Bauform untereinander. Mehr Grafik daneben zu stellen haette das nicht
   geloest, die Bauform selbst musste sich aendern.

   Vorbild sind unsere eigenen Seiten (Jonny M., Fitnesspoint Waldkirchen):
   Typografie als Gestaltungsmittel, Bild-Text-Wechsel statt Raster,
   Listen mit feinen Linien statt Kacheln. Hier bewusst ruhiger gehalten,
   die Zielgruppe ist aelter als bei einem Discount-Studio.
   ====================================================================== */

/* --- 1. Sektionstitel als Band, das ueber den Rand laeuft ------------- */
/* Das Titelband war mit 14 Prozent Deckkraft praktisch unsichtbar,
   gemessener Kontrast 1,25 zu 1. Jetzt kraeftiger und als Laufschrift,
   damit es als Gestaltungselement erkennbar ist und nicht als Fehler.

   Zwei Sicherungen: eine echte Farbe als Rueckfall, falls der Browser
   -webkit-text-stroke nicht kann (sonst waere die Schrift unsichtbar),
   und Stillstand bei reduzierter Bewegung. */
.titelband{position:relative;overflow:hidden;margin:clamp(70px,8vw,120px) 0 0;
  padding:0;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.titelband-lauf{display:flex;width:max-content;animation:titel-lauf 34s linear infinite}
.titelband span{display:block;white-space:nowrap;padding-right:.5em;
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(3.4rem,10vw,8.5rem);line-height:.92;
  color:rgba(22,40,31,.13);
  letter-spacing:-.01em}
@supports ((-webkit-text-stroke: 1px black)){
  .titelband span{color:transparent;-webkit-text-stroke:1.15px rgba(22,40,31,.34)}
}
@keyframes titel-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:700px){
  .titelband span{font-size:3.2rem}
  @supports ((-webkit-text-stroke: 1px black)){
    .titelband span{-webkit-text-stroke-width:.8px}
  }
}
@media (prefers-reduced-motion:reduce){
  .titelband-lauf{animation:none}
}

/* --- 2. Bereiche als Bild-Text-Wechsel statt Kachelraster ------------- */
.wechsel{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);align-items:center;
  margin:clamp(48px,6vw,88px) 0}
/* Umgedreht 17.09.2026 (Befund des Seitenpruefers): Vorher lag das Bild
   im ersten und dritten Block links. Direkt darunter beginnt das
   Kartenraster - ebenfalls mit einem Bild links auf derselben Achse.
   Das Auge las "dasselbe nochmal, kleiner" statt "jetzt kommt etwas
   anderes". Jetzt endet der letzte Wechselblock mit Text links, das
   Raster setzt dagegen an. Die Alternierung bleibt erhalten. */
/* ⚠️ Hier stand ".wechsel:nth-of-type(odd)". Das zaehlt ALLE
   <div>-Geschwister, nicht die Wechselbloecke: steht im selben
   <section> noch ein <div class="karten"> oder <div class="punkte">
   davor, verschiebt sich die Zaehlung und zwei Bilder stehen
   untereinander auf derselben Seite - lautlos, ohne dass irgendetwas
   meldet. Auf der Startseite ging es auf, weil dort zufaellig die
   richtige Reihenfolge stand.

   Bei 19 Unterseiten ist "geht zufaellig auf" keine Grundlage. Die
   Seite mit dem Bild rechts sagt es jetzt selbst: class="wechsel
   bild-rechts". Voreinstellung ist Bild links, in der Reihenfolge des
   Markups. Befund des Seitenpruefers 18.09.2026. */
.wechsel.bild-rechts .wechsel-bild{order:2}
.wechsel-bild{position:relative;border-radius:4px;overflow:hidden;
  box-shadow:0 34px 90px -46px rgba(22,40,31,.72)}
.wechsel-bild img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3}
.wechsel-marke{position:absolute;left:0;bottom:0;
  background:rgba(22,40,31,.88);color:#fff;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding:10px 18px}
.wechsel-text h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);line-height:1.16;
  color:var(--pine);margin:0 0 16px}
.wechsel-text p{font-size:16.5px;line-height:1.72;color:#3A4A42;margin:0 0 18px}
.wechsel-text a{color:var(--gold-dark);font-weight:600;font-size:15.5px;
  text-decoration:none;border-bottom:1px solid rgba(138,95,20,.32);
  padding-bottom:2px}
.wechsel-text a:hover{border-bottom-color:var(--gold-dark)}
@media (max-width:820px){
  .wechsel{grid-template-columns:1fr;gap:26px}
  .wechsel:nth-of-type(odd) .wechsel-bild{order:0}
}

/* --- 3. Die uebrigen Bereiche als Liste mit feinen Linien ------------- */
/* Andreas: "Was spricht dagegen, das doppelt zu fuehren, damit die Seite
   nicht zu lang wird?" Nichts - zweispaltig ab 900 px, das spart rund
   200 px Hoehe und wirkt aufgeraeumter. */
/* ---------------------------------------------------------------
   Bereichskarten statt Textliste (17.09.2026, Andreas: "Variante B
   finde ich sehr, sehr schoen")

   Vorher standen hier sechs reine Textzeilen. Nach drei grossen
   Bild-Text-Wechseln darueber las sich das wie ein Nachklapp - das
   Muster der Seite hoerte mitten drin auf.

   Der Name steht UNTER dem Bild, nicht darin. Im Bild braeuchte er
   einen Schleier, und der macht jedes Foto trueb - genau der Fehler,
   den wir im Hero gerade erst herausgenommen haben.

   box-sizing wird hier ausdruecklich gesetzt: "border-box" gilt auf
   dieser Seite NICHT global (nur innerhalb .gv-seite, also auf den
   Unterseiten). Ohne die Angabe addiert sich jedes Polster auf die
   Breite.
   --------------------------------------------------------------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.2vw,40px) clamp(20px,2.4vw,30px);
  margin:var(--luft-m) 0 0}
.karten *{box-sizing:border-box}
.karte{display:block;text-decoration:none;color:inherit}
/* display:block ist Pflicht: die Huelle ist ein <span> und damit von
   Haus aus inline - auf ein inline-Element wirkt "aspect-ratio" nicht.
   Im Entwurf ist der Name deshalb unten aus dem Bild gerutscht. */
.karte-bild{display:block;position:relative;aspect-ratio:4/3;
  overflow:hidden;border-radius:3px;background:var(--pine);
  box-shadow:0 18px 44px -26px rgba(22,40,31,.45)}
.karte-bild img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
/* Das Squashbild ist ein 2200x846-Panorama. Mittig zugeschnitten zeigte
   die Karte einen dunklen Tuerdurchgang und dahinter eine halbdurch-
   sichtige Figur hinter der Glaswand - das liest sich nicht als Foto,
   sondern als halb geladenes Bild. Rechts stehen zwei echte Spieler mit
   Schlaeger und Ball; dort wird die durchscheinende Figur zur
   Spiegelung, die sie ist. */
.karte-squash img{object-position:100% 50%}
.karte:hover .karte-bild img{transform:scale(1.045)}
.karte-name{display:block;margin:15px 0 5px;
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.12rem,1rem + .42vw,1.36rem);color:var(--pine);
  line-height:1.2;text-wrap:balance}
.karte-text{display:block;font-size:15px;line-height:1.58;color:#4A5A52}
.karte-mehr{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:14px;font-weight:600;color:var(--gold-dark);
  transition:gap .25s}
.karte:hover .karte-mehr{gap:13px}
@media (prefers-reduced-motion:reduce){
  .karte:hover .karte-bild img{transform:none}
}
@media (max-width:1100px){.karten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .karten{grid-template-columns:1fr}
  /* Sechs Karten untereinander machten mobil 20 Prozent der ganzen Seite
     aus - drei Bildschirme mit demselben Takt. Bei dieser Breite ist das
     Bild ohnehin Beiwerk, deshalb flacher: spart rund 65 px je Karte. */
  .karte-bild{aspect-ratio:16/9}
}

/* --- 4. Grosse Zahlen als Zaesur, nicht als Kasten -------------------- */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(22,40,31,.14);
  gap:clamp(24px,4vw,56px);margin:clamp(60px,7vw,100px) 0;
  padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid rgba(22,40,31,.14);
  border-bottom:1px solid rgba(22,40,31,.14)}
.zahl{text-align:center}
.zahl b{display:block;font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;font-size:clamp(3rem,2rem + 4vw,5.4rem);line-height:1;
  color:var(--pine);letter-spacing:-.02em}
.zahl b em{font-style:normal;color:var(--gold-dark);font-size:.52em;
  vertical-align:super;margin-left:2px}
.zahl span{display:block;margin-top:12px;font-size:15px;line-height:1.55;
  color:#5C6B62;max-width:22ch;margin-left:auto;margin-right:auto}
@media (max-width:700px){
  .zahlen{grid-template-columns:1fr;gap:34px;padding:34px 0}
}

/* --- 5. Bewertungen ohne Kasten, nur durch Linien getrennt ------------ */
.stimmen{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0}
.stimme{background:transparent;box-shadow:none;border-radius:0;
  padding:0 clamp(18px,2.4vw,34px);
  border-left:1px solid rgba(22,40,31,.14)}
.stimme:first-child{border-left:none;padding-left:0}
@media (max-width:920px){
  .stimme{border-left:none;padding:26px 0;
    border-top:1px solid rgba(22,40,31,.14)}
  .stimme:first-child{border-top:none;padding-top:0}
}

/* --- 6. Eckdaten ohne Kaesten, als Zeile mit Trennlinien -------------- */
.eckdaten{background:transparent;gap:0;
  margin:-30px auto 0;position:relative;z-index:3}
.eckdaten > div{background:rgba(255,255,255,.96);box-shadow:none;
  border-right:1px solid rgba(22,40,31,.10);
  backdrop-filter:blur(6px)}
.eckdaten > div:last-child{border-right:none}
@media (max-width:860px){.eckdaten > div{border-right:none;
  border-bottom:1px solid rgba(22,40,31,.10)}}

/* --- 7. entfaellt: gehoerte zur Angebotsleiste, siehe oben ------------ */

/* --- 8. Portraetsaeule, die ueber die Sektionskante ragt --------------
   Die letzte gerade Kante zwischen zwei Abschnitten wird hier gebrochen:
   das Bild beginnt oberhalb der Sektion und endet unterhalb. Oben ein
   Bogen, unten laeuft es weich aus - dadurch gibt es keinen Bildrand,
   an dem eine Linie entstehen koennte. */
.portraet{position:relative;max-width:1180px;margin:clamp(70px,8vw,120px) auto 0;
  padding:0 clamp(20px,5vw,56px);display:grid;
  grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,76px);align-items:center}
.portraet-text{padding:clamp(20px,3vw,40px) 0}
.portraet-text h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,1.3rem + 1.9vw,2.8rem);line-height:1.14;
  color:var(--pine);margin:0 0 20px}
.portraet-text p{font-size:17px;line-height:1.72;color:#3A4A42;margin:0 0 18px}
.portraet-signatur{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:19px;color:var(--pine);line-height:1.5}
/* Gemessen: das Bild verschwand hart hinter der Abschlusskarte, die
   Kante sah aus wie ein Schnitt. Jetzt endet der Auslauf oberhalb der
   Karte, das Bild verliert sich in der Flaeche statt abgeschnitten zu
   werden. Oben ragt es weiterhin in den vorigen Abschnitt. */
.portraet-bild{position:relative;align-self:end;
  margin-top:clamp(-120px,-7vw,-60px);margin-bottom:clamp(-40px,-2.5vw,-16px)}
.portraet-bild img{display:block;width:100%;height:auto;
  border-radius:50% 50% 4px 4px / 34% 34% 4px 4px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.18) 93%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.18) 93%,rgba(0,0,0,0) 100%)}
/* Lichtschein hinter der Saeule, damit sie nicht im Nichts steht */
.portraet-bild::before{content:"";position:absolute;inset:-12% -18% 6% -18%;
  z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,154,68,.22),rgba(201,154,68,0) 72%)}
@media (max-width:860px){
  .portraet{grid-template-columns:1fr;gap:0;margin-top:60px}
  .portraet-bild{margin:0 auto;max-width:420px;order:-1}
  .portraet-text{padding-top:18px}
}

/* ======================================================================
   Abstandsraster (16.09.2026)

   Gemessen war der Abstand zwischen zwei Abschnitten mal 40, mal 220 px -
   Verhaeltnis 5,5. Ursache: an jedem Uebergang addierten sich das
   padding-bottom des einen Bausteins und das margin-top des naechsten.

   Regel ab jetzt: Abstand wird NUR nach oben vergeben, nie nach unten.
   Dann kann sich nichts addieren, und der Abstand zwischen zwei Bloecken
   ist genau ein Wert. Wo zwei Bausteine zusammengehoeren (Titelband und
   sein Abschnitt), greift eine Nachbarschaftsregel.
   ====================================================================== */
:root{
  --luft-s:54px;    /* innerhalb eines Abschnitts */
  --luft-m:104px;   /* Standard zwischen zwei Abschnitten */
  --luft-l:136px;   /* vor einer Zaesur, bewusst mehr */
}
@media (max-width:820px){
  :root{--luft-s:38px;--luft-m:72px;--luft-l:80px}
  /* Auf schmalen Schirmen addierte sich bei der Zahlen-Zaesur der
     Abschnittsabstand mit deren eigenem Innenabstand: gemessene 155 px
     gegen 103 px im Rest. Der Innenabstand entfaellt hier. */
  .zahlen{padding-top:0}
}

/* Alles bekommt Luft nur nach oben */
.abschnitt{padding:var(--luft-m) clamp(20px,5vw,56px) 0;margin:0}
.titelband{margin:var(--luft-l) 0 0}
.zahlen{margin:var(--luft-l) 0 0;padding:var(--luft-s) 0 0;
  border-bottom:none;padding-bottom:0}
/* Das war der Rest von Punkt 5 des Prueferberichts: .abschnitt wurde
   zentriert, .film nicht - deshalb klebte "Blick ins Haus" weiter links. */
.film{padding:var(--luft-m) clamp(20px,5vw,56px) 0;margin:0 auto;max-width:1180px}
/* ⚠️ Hier stand "margin:var(--luft-m) auto 0" - eine Kurzschreibweise,
   die auch margin-left und margin-right setzt und damit die Medienabfrage
   weiter oben (Zeile ~1061, Einzug unter 1240 px) ueberschrieben hat.
   Gleiche Spezifitaet, spaetere Regel gewinnt.

   Folge, gemessen am 18.09.2026 auf der Musterseite: unter 1240 px lag
   der Fotoband an x=0 mit voller Fensterbreite - also wieder genau das
   vollbreite Farbband mit zwei harten waagerechten Kanten, das dieser
   Baustein ersetzen sollte. Das betraf jedes Telefon, jedes Tablet und
   jeden kleinen Laptop.

   Deshalb NUR die senkrechten Abstaende setzen, nie die Kurzform. */
.fotoband{margin-top:var(--luft-m);margin-bottom:0}
.portraet{margin:var(--luft-m) auto 0}
/* Die Abschlusskarte lief ohne jeden Abstand in den Fussbereich: beide
   sind dunkel, also stand da ein durchgehender Block, aus dem links und
   rechts zwei cremefarbene Zipfel ragten (das Polster der Karte). Die
   Karte hatte sichtbar keine Unterkante. Gemessen 18.09.2026 bei 1440 px:
   in der Seitenmitte kein einziger Pixel Papierfarbe zwischen beidem.
   Befund des Seitenpruefers - und er stammt von der Startseite, die
   Musterseite hat ihn nur geerbt. */
/* ⚠️ Unten "--luft-s", nicht "--luft-m". Der Theme-Fussbereich bringt
   rund 76 px eigenes Polster mit; mit dem vollen Abstand addiert sich das
   auf 180 px, und das ist 1,6-mal so viel wie jeder andere Abschnittsabstand
   der Seite. Gemessen 18.09.2026: Startseite Median 109, groesster 179 -
   das Messskript meldete die freigegebene Startseite daraufhin als
   "ungleichmaessig". Mit --luft-s liegt der letzte Abstand bei 130 und das
   Verhaeltnis wieder bei 1,23. Befund des Seitenpruefers, und es war mein
   eigener Fehler beim Beheben des vorigen. */
.abschluss{margin:var(--luft-m) auto var(--luft-s);padding:0 clamp(20px,5vw,56px)}
.wechsel{margin:var(--luft-m) 0 0}


/* Zusammengehoerendes ruecht zusammen: das Titelband gehoert zu seinem
   Abschnitt, dazwischen gehoert kein voller Abstand. */
.titelband + .abschnitt{padding-top:var(--luft-s)}

/* ⚠️ Hier stand .seite{padding-bottom:var(--luft-s)}. Die Regel war
   seit dem 16.09.2026 wirkungslos, weil weiter unten
   "body:has(.seite) .seite" mit 0-2-0 dasselbe ueberschrieben hat.
   Sie sah richtig aus, stand im Abstandsraster an der erwarteten
   Stelle und hat nie etwas getan. Genau so entstehen die Faelle, in
   denen man eine Zahl aendert und sich nichts bewegt.
   Das untere Seitenpolster wird an EINER Stelle vergeben, weiter
   unten bei "body:has(.seite) .seite". */

/* Innerhalb der Abschnitte */
.leistungen{margin-top:var(--luft-s)}
.stimmen{margin-top:var(--luft-s)}
.film-text{margin-bottom:var(--luft-s)}

/* ---------------------------------------------------------------
   Der Prueferbericht vom 16.09.2026, Punkt 2 und 9.

   seiten.css legt bei Seiten mit Hero einen dunklen Verlauf ueber die
   Kopfleiste (#gv-kopf::before), damit weisse Schrift auf einem Foto
   lesbar bleibt. Auf dieser Seite sitzt aber die dunkle Angebotsleiste
   ganz oben, kein Foto - der Schleier lag also ueber hellem Grund und
   sah aus wie ein Bild, das nicht geladen hat.

   Dazu der cremefarbene Balken unter dem Footer: Abstand des
   Theme-Containers, hier nicht gewollt.
   --------------------------------------------------------------- */
/* KORREKTUR 16.09.2026, zweiter Anlauf.
   Der erste Versuch schaltete den dunklen Schleier ueber der Kopfleiste
   ab, weil er ueber hellem Grund wie ein Ladefehler aussah. Damit war
   aber auch das weg, was die weisse Menueschrift lesbar gemacht hat:
   gemessener Kontrast danach 1,12 im Menue und 1,01 beim Logo - also
   weiss auf weiss.

   Richtige Loesung: Die Kopfleiste bekommt denselben dunklen Grund wie
   die Angebotsleiste direkt darunter. Oben entsteht so eine
   durchgehende dunkle Zone statt eines grauen Schleiers ueber Creme,
   und die weisse Schrift steht sicher. */
/* ENTFERNT 16.09.2026: Das war eine zweite, mit !important durchgesetzte
   Kopie des Kopfleisten-Hintergrunds aus seiten.css. Solche Zweitschriften
   laufen auseinander - hier hat sie den Goldschimmer verschluckt, der auf
   die Leiste sollte: die Aenderung stand in seiten.css, gerendert wurde
   weiter die alte Kopie. Das Aussehen der Kopfleiste steht jetzt an genau
   einer Stelle, in seiten.css. */
/* Die Kopfzone ist fest positioniert und verdeckt sonst den Anfang.
   Derselbe Wert wie global in seiten.css, hier nochmal ausdruecklich,
   weil die Regeln dieser Seite spaeter geladen werden. */
body:has(.seite) .wp-site-blocks{padding-bottom:0 !important}
/* Platz fuer die feste Kopfzone. Zwei Versuche ueber die Theme-Container
   haben nicht gegriffen, deshalb ein eigener Platzhalter als erstes
   Element - der wirkt unabhaengig davon, welche Theme-Regel gewinnt.
   Hoehe: Servicezeile 32 + Kopfleiste 86 = 118 px, mobil 29 + 75 = 104. */
/* .kopfabstand ENTFERNT 16.09.2026 - war die dritte Platzreservierung
   fuer dieselbe Kopfzone. Den Abstand vergibt seitdem allein
   .wp-site-blocks in seiten.css, und zwar gerechnet aus den Hoehen der
   beiden Leisten statt als abgeschriebene Zahl. */
/* Zweite Runde: 59 px Papierfarbe standen weiter unter dem Footer.
   Der Abstand kommt nicht vom Wrapper, sondern vom letzten Kind des
   Body-Containers. */
body:has(.seite) .wp-site-blocks > *:last-child{margin-bottom:0 !important}
body:has(.seite) footer,
body:has(.seite) .wp-block-template-part:last-of-type{margin-bottom:0 !important}
html:has(.seite),body:has(.seite){background:#16281F}
/* ⚠️ Hier stand bis 18.09.2026 padding-bottom:0. Das war die
   Reparatur eines Papierstreifens UNTER der Fusszeile und hat den
   Fehler nicht geloest, sondern umgefaerbt: seitdem klaffte an
   derselben Stelle ein 90 px hoher TANNENGRUENER Balken, weil dort
   .wp-site-blocks durchscheint. Drei Pruefagenten haben ihn am
   18.09. unabhaengig voneinander gemeldet, auch auf der laengst
   freigegebenen Startseite.
   Der Abstand geht jetzt wieder nach innen, wo er Papierfarbe hat. */
body:has(.seite) .seite{padding-bottom:var(--luft-m)}

/* ---------------------------------------------------------------
   Punkt 5 und 6: die Seite hatte zwei linke Achsen und stand nicht
   mittig. Ursache war ein "margin:0" im Abstandsraster, das die
   Zentrierung von .abschnitt ausgehebelt hat - links 56 px Rand,
   rechts 204 px. Jetzt liegen alle Textachsen auf derselben Linie.
   --------------------------------------------------------------- */
.abschnitt{max-width:1180px;margin:0 auto}
.fotoband-inner{--polster:clamp(24px,4vw,56px)}
.abschluss-karte{padding-left:clamp(24px,4vw,56px);padding-right:clamp(24px,4vw,56px)}

/* ---------------------------------------------------------------
   Punkt 4 des Prueferberichts: Der Film zeigte die nackte schwarze
   HTML5-Leiste mitten in einer gestalteten Seite. Jetzt liegt ein
   Standbild mit eigenem Abspielknopf davor, die Bedienelemente kommen
   erst nach dem Klick.
   --------------------------------------------------------------- */
.film-rahmen{position:relative}
.film-start{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;
  width:100%;height:100%;cursor:pointer;background:transparent;
  display:flex;align-items:center;justify-content:center}
.film-start::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,16,12,.10),rgba(9,16,12,.42));
  transition:background .3s}
.film-start:hover::before{background:linear-gradient(180deg,rgba(9,16,12,.04),rgba(9,16,12,.30))}
.film-knopf{position:relative;z-index:3;display:flex;align-items:center;
  justify-content:center;width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);
  border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 14px 44px -12px rgba(9,16,12,.6);
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.film-start:hover .film-knopf{transform:scale(1.07)}
.film-knopf::after{content:"";width:0;height:0;margin-left:5px;
  border-left:clamp(17px,1.8vw,23px) solid #16281F;
  border-top:clamp(11px,1.2vw,15px) solid transparent;
  border-bottom:clamp(11px,1.2vw,15px) solid transparent}
.film-hinweis{position:absolute;left:clamp(18px,2.5vw,30px);right:auto;bottom:clamp(16px,2vw,26px);
  z-index:3;text-align:left;color:#fff;font-size:14px;letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(9,16,12,.7)}
@media (prefers-reduced-motion:reduce){
  .film-start:hover .film-knopf{transform:none}
}

/* Punkt 10: Film und Portraet standen nur rund 20 px auseinander, zwei
   dunkle Flaechen fast auf Stoss. Das Portraet ragt jetzt weniger weit
   nach oben und bekommt den groesseren Abstand. */
.portraet{margin-top:calc(var(--luft-l) + 30px)}
.portraet-bild{margin-top:clamp(-84px,-5vw,-46px)}

/* Sanftes Einblenden beim Scrollen */
html.js-an .auf{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
html.js-an .auf.da{opacity:1;transform:none}
/* ⚠️ "print" gehoert hier zwingend dazu.

   Die Startzustaende der Effekte gelten sonst auch auf Papier: wer die
   Seite laedt, oben liest und dann Strg+P drueckt, bekommt einen
   Ausdruck, bei dem 8 von 12 Seiten VOLLSTAENDIG LEER sind - Einleitung,
   alle drei Bild-Text-Wechsel, alle sechs Karten, Kennzahlen,
   Bewertungen, Film, Portraet und Abschlusskarte fehlen. Gemessen am
   echten Ausdruck, 17.09.2026.

   Der beforeprint-Haken im Skript reicht dafuer NICHT: er setzt die
   Kennzahlen auf ihren Endwert, aber der ganze Abschnitt ist zu diesem
   Zeitpunkt unsichtbar. Es braucht die CSS-Seite. */
@media (prefers-reduced-motion:reduce), print {
  html.js-an .auf{opacity:1;transform:none;transition:none}
}

/* ===================================================================
   Vier Effekte (17.09.2026, von Andreas freigegeben)

   Alle vier laufen mit CSS und rund 40 Zeilen JavaScript. Kein React,
   kein Zusatzpaket: die schoenen Effekte aus den bekannten
   React-Bibliotheken sind fast alle CSS, und die Bibliothek haette
   rund 130 KB auf eine Seite gelegt, die ohnehin 14 Bilder laedt.

   ⚠️ Alle vier schalten sich bei "Bewegung reduzieren" ab. Das ist
   hier keine Formalie: ein Teil der Zielgruppe kommt nach einer
   Operation oder mit Rueckenbeschwerden.
   =================================================================== */

/* 1. Kennzahlen zaehlen hoch.
      tabular-nums ist noetig, sonst springt die Zahl beim Zaehlen in
      der Breite und die ganze Zeile zappelt. */
.zahl b{font-variant-numeric:tabular-nums}

/* 2. Die Karten kommen nacheinander statt alle auf einmal.
      Versatz von 90 ms - klein genug, dass man ihn nicht bewusst
      bemerkt, gross genug, dass es gebaut wirkt statt geschaltet. */
html.js-an .karten .karte{opacity:0;transform:translateY(24px)}
html.js-an .karten.gestaffelt .karte{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js-an .karten.gestaffelt .karte:nth-child(1){transition-delay:0s}
html.js-an .karten.gestaffelt .karte:nth-child(2){transition-delay:.09s}
html.js-an .karten.gestaffelt .karte:nth-child(3){transition-delay:.18s}
html.js-an .karten.gestaffelt .karte:nth-child(4){transition-delay:.27s}
html.js-an .karten.gestaffelt .karte:nth-child(5){transition-delay:.36s}
html.js-an .karten.gestaffelt .karte:nth-child(6){transition-delay:.45s}

/* 3. Die drei grossen Bilder werden aufgedeckt: eine Flaeche in
      Papierfarbe faehrt nach links weg, das Bild kommt leicht aus dem
      Zoom. Nur fuer den Bild-Text-Wechsel, nicht fuer jedes Bild -
      sonst wird es zur Masche. */
html.js-an .wechsel-bild::after{content:"";position:absolute;inset:0;z-index:3;
  background:var(--paper);transform-origin:right;pointer-events:none;
  transition:transform 1.1s cubic-bezier(.75,0,.18,1)}
html.js-an .wechsel-bild img{transform:scale(1.07);
  transition:transform 1s cubic-bezier(.16,.8,.24,1)}
html.js-an .wechsel-bild.auf-da::after{transform:scaleX(0)}
html.js-an .wechsel-bild.auf-da img{transform:none}

/* 4. Das Kopfbild bekommt einen sehr langsamen Zug: 7 Prozent ueber
      26 Sekunden und zurueck. So langsam, dass man es nicht als
      Bewegung wahrnimmt - das Bild wirkt nur nicht mehr wie ein
      Standbild. Transform statt width/height, damit es auf der
      Grafikkarte laeuft und nichts neu berechnet wird. */
/* Zwei Durchlaeufe statt endlos: ueber dem Bild steht Text, und eine
   Bewegung, die laenger als ein paar Sekunden neben Inhalt laeuft und
   sich nicht anhalten laesst, ist ein Barrierefreiheitsproblem. Der
   Eindruck "kein Standbild" beim Ankommen bleibt, wer verweilt bekommt
   Ruhe. Befund des Seitenpruefers, 17.09.2026. */
html.js-an .kopf-bild{animation:gvZug 26s ease-in-out 2 alternate;
  will-change:transform}
@keyframes gvZug{from{transform:scale(1)}to{transform:scale(1.07)}}

@media (prefers-reduced-motion:reduce), print {
  html.js-an .karten .karte{opacity:1;transform:none;transition:none}
  html.js-an .wechsel-bild::after{display:none}
  html.js-an .wechsel-bild img{transform:none;transition:none}
  html.js-an .kopf-bild{animation:none}
}

/* Was sonst noch nur fuers Papier gilt. */
@media print {
  /* Die feste Kopfzone wiederholt sich sonst auf JEDER Seite des
     Ausdrucks, jeweils mit rund 15 Prozent der Seitenhoehe. Bei zwoelf
     Seiten sind das zwoelf Menueleisten. */
  /* ⚠️ "!important" ist hier noetig, nicht bequem. Die Kopfleiste
     bekommt ihr "position:fixed" aus dem <style>-Block der
     Kopfvorlage (Beitrag 34). Der steht im Koerper der Seite, also
     NACH seiten.css - bei gleicher Spezifitaet (beides #gv-kopf, 1-0-0)
     gewinnt er. Diese Regel stand seit 17.09. hier und hat nie
     gegriffen: gemessen am 18.09. im echten Ausdruck wiederholte sich
     die dunkle Kopfleiste auf JEDER der sieben Seiten.
     Feste Elemente malt Chrome im Seitenlayout auf jedes Blatt. */
  #gv-service, #gv-kopf { position: static !important; }
  /* Dasselbe fuer die Menue-Ueberlagerung: sie ist unsichtbar, aber
     "position:fixed" mit vollflaechigem dunklem Grund. */
  #gv-overlay { display: none !important; }
  /* ⚠️ Der Seitengrund ist Tannengruen, damit beim Ueberscrollen unter
     dem Fussbereich nicht Papierfarbe aufblitzt. Auf Papier wird daraus
     eine VOLLFLAECHIG dunkelgruene A4-Seite, jedes Mal wenn der Inhalt
     kurz vor der Seitengrenze endet - gemessen 18.09.2026: zwei von
     sieben Seiten fast vollstaendig dunkel. Auf Papier gibt es kein
     Ueberscrollen, also braucht es den dunklen Grund dort nicht. */
  html:has(.seite), body:has(.seite) { background: #fff; }
  /* ⚠️ Der dunkle Grund sitzt nicht nur auf <html> und <body>, sondern
     auch auf .wp-site-blocks (seiten.css, Abschnitt Kopfzone). Gemessen
     am 18.09.2026 im Druckmedium: dieser eine Container ist 5514 px hoch
     und deckt die ganze Seite - also faerbt er jedes Blatt dunkel, auf
     dem der Inhalt vor dem unteren Rand endet. Im Ausdruck der
     Musterseite war ein halbes A4-Blatt vollflaechig tannengruen. */
  .wp-site-blocks { background: #fff !important; }
  /* Der Platz, der fuer die feste Kopfzone freigehalten wird, wird auf
     Papier nicht gebraucht. */
  .wp-site-blocks { padding-top: 0 !important; }
  /* Grosse dunkle Flaechen kosten Toner und bringen auf Papier nichts. */
  .kopf-schleier, .fotoband-schleier { display: none; }
  /* Verweise ins Leere: auf Papier kann man nichts anklicken. */
  #gv-menu-btn { display: none; }
  /* Der Film druckt als leere Flaeche - gemessen war es eine ganze
     leere Seite mitten im Ausdruck. Der Text darueber bleibt stehen,
     damit klar ist, dass es einen Rundgang gibt. */
  .film-rahmen { display: none; }
  /* Kein Nachlauf am Ende: sonst entsteht eine zusaetzliche leere Seite. */
  .seite, body:has(.seite) .seite { padding-bottom: 0 !important; }
  .abschluss { margin-bottom: 0 !important; }
  footer, .wp-block-template-part:last-of-type {
    margin-bottom: 0 !important; padding-bottom: 0 !important; }
  /* Das Fusspolster schiebt den Inhalt ueber die letzte Seitengrenze und
     erzeugt damit ein leeres Schlussblatt. Auf Papier braucht es das nicht. */
  .gv-fuss, .gv-fuss-unten { padding-bottom: 0 !important; margin-bottom: 0 !important; }

  /* Zusammengehoeriges nicht ueber die Seitengrenze trennen.
     Gemessen im Ausdruck: "4,7 von 5" stand noch auf Seite 1, "bei 75
     Google-Bewertungen" schon auf Seite 2 - Wert ohne Bezug. Und der
     Umbruch schnitt oben in die Kartenbilder. */
  .karte, .eckdaten > div, .zahl, .stimme, .wechsel { break-inside: avoid; }

  /* ⚠️ Ueberschriften nicht ueber die Seitengrenze reissen. Gemessen am
     18.09.2026 im echten Ausdruck der Musterseite: "So kommst du zu
     deinem / Rehasport in Hof" stand mit der ersten Zeile auf Seite 4,
     mit der zweiten - oben angeschnitten - auf Seite 5. Der Kicker
     "IN DREI SCHRITTEN" blieb allein auf der Vorseite zurueck.
     "break-after:avoid" haelt Kicker und Ueberschrift bei ihrem Text. */
  .abschnitt h2, .fotoband h2, .abschluss-karte h2, .kopf h1,
  .wechsel-text h3, .schritte h3, .punkte h3 { break-inside: avoid; break-after: avoid; }
  .kicker, .kopf-marke { break-after: avoid; }
  .schritte li, .punkte > div, .liste li { break-inside: avoid; }

  /* Auf Papier kann man den Rundgang nicht anklicken. Mit dem Rahmen ist
     auch die Zeile "Rundgang ansehen" verschwunden - also steht hier,
     WO man ihn findet. */
  .film-text::after {
    content: "Den Rundgang finden Sie auf gesundheitszentrum-vollert.de";
    display: block; margin-top: 10px;
    font-size: 12px; color: #5C6B62; }
}




/* ######################################################################
   LESEHILFE — Ergaenzungen fuer DIESE Seite

   Das Bedienfeld, die Schriftvergroesserung und die allgemeinen Regeln
   fuer Kontrast, Bewegung und unterstrichene Verweise stecken im Plugin
   "Lesehilfe" (zenker-lesehilfe). Hier steht nur, was das Plugin auf
   einem fremden Theme nicht wissen kann.

   ⚠️ Die Klassen kommen vom Plugin (zlh-kontrast, zlh-ruhe). Wird das
   Plugin deaktiviert, greift hier nichts mehr - das ist gewollt und
   richtig.
   ###################################################################### */

/* Bei "Mehr Kontrast" wird der Schleier ueber Kopfbild und Fotoband
   dichter. Das Plugin kann das nicht: es kennt weder .kopf-schleier noch
   .fotoband-schleier, und ein pauschales Abdunkeln aller Bilder waere auf
   fremden Seiten falsch. */
body.zlh-kontrast .kopf-schleier{background:
  linear-gradient(98deg,rgba(6,11,8,.96) 0%,rgba(6,11,8,.92) 40%,
    rgba(6,11,8,.80) 62%,rgba(6,11,8,.60) 82%,rgba(6,11,8,.55) 100%),
  linear-gradient(180deg,rgba(6,11,8,.5) 0%,rgba(6,11,8,0) 30%,
    rgba(6,11,8,0) 58%,rgba(6,11,8,.8) 100%)}
body.zlh-kontrast .fotoband-schleier{background:
  linear-gradient(94deg,rgba(4,9,6,.97) 0%,rgba(4,9,6,.94) 40%,
    rgba(4,9,6,.86) 62%,rgba(4,9,6,.7) 86%,rgba(4,9,6,.72) 100%)}
body.zlh-kontrast .kopf-lede,
body.zlh-kontrast .fotoband .unter,
body.zlh-kontrast .schritte p,
body.zlh-kontrast .abschluss-karte p{color:#fff}

/* Bei "Bewegung anhalten" muessen zusaetzlich die Startzustaende der
   Effekte aufgehoben werden. Das Plugin schaltet nur Animationen und
   Uebergaenge ab - ein Element, das bei opacity 0 startet und erst durch
   einen Uebergang sichtbar wird, bliebe dann unsichtbar. */
body.zlh-ruhe .auf{opacity:1 !important;transform:none !important}
body.zlh-ruhe .karten .karte{opacity:1 !important;transform:none !important}
body.zlh-ruhe .wechsel-bild img{transform:none !important}
body.zlh-ruhe .wechsel-bild::after{display:none !important}
body.zlh-ruhe .kopf-bild{animation:none !important;transform:none !important}


/* ######################################################################
   TERMINBUCHUNG  (18.09.2026)

   Aufbau bewusst wie beim Beckenboden-Kalender in Dessau: eine WOCHE auf
   einmal, nicht alles hintereinander.

   ⚠️ Der Unterschied zu Dessau: Dort gab es eine Handvoll Termine, da
   konnte man sie unter der Wochenueberschrift einfach untereinander
   auflisten. Hier sind es 126 in vierzehn Tagen - 11 an jedem Werktag.
   Dieselbe Liste waere hier eine Bildschirmlaenge Fliesstext aus
   Uhrzeiten, und genau davor hat Andreas gewarnt.

   Deshalb: Woche als Leiste mit sieben Tagen, jeder Tag mit der Zahl
   seiner freien Termine. Erst nach der Tagesauswahl kommen die Uhrzeiten,
   und die passen in zwei Reihen.
   ###################################################################### */

.gv-termin{max-width:780px}
.gv-termin-lade{font-size:16px;color:#5C6B62;padding:22px 0}

/* --- Wochenleiste --------------------------------------------------- */
.gv-termin-woche{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:30px 0 14px}
.gv-termin-woche b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:20px;color:var(--pine)}
.gv-termin-blaettern{display:flex;gap:8px}
.gv-termin-blaettern button{width:42px;height:42px;cursor:pointer;
  border:1px solid rgba(22,40,31,.2);background:#fff;border-radius:2px;
  color:var(--pine);font-size:17px;line-height:1;
  transition:border-color .15s,background .15s}
.gv-termin-blaettern button:hover:not([disabled]){border-color:var(--gold);background:#fff}
.gv-termin-blaettern button[disabled]{opacity:.35;cursor:default}

.gv-termin-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.gv-termin-tage button{min-height:74px;cursor:pointer;padding:9px 4px;
  border:1px solid rgba(22,40,31,.18);background:#fff;border-radius:3px;
  font-family:'Karla',system-ui,sans-serif;line-height:1.25;color:var(--pine);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:border-color .15s,background .15s}
.gv-termin-tage button .wt{font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#5C6B62}
.gv-termin-tage button .tg{font-size:19px;font-family:'Instrument Serif',Georgia,serif}
.gv-termin-tage button .fr{font-size:11px;color:var(--gold-dark)}
.gv-termin-tage button:hover:not([disabled]){border-color:var(--gold)}
.gv-termin-tage button[aria-pressed="true"]{background:var(--pine);border-color:var(--pine)}
.gv-termin-tage button[aria-pressed="true"] .wt,
.gv-termin-tage button[aria-pressed="true"] .tg{color:#fff}
.gv-termin-tage button[aria-pressed="true"] .fr{color:var(--gold-hi)}
.gv-termin-tage button[disabled]{background:rgba(22,40,31,.035);color:#9AA69F;
  border-color:rgba(22,40,31,.08);cursor:default}
.gv-termin-tage button[disabled] .wt,.gv-termin-tage button[disabled] .tg{color:#9AA69F}
@media (max-width:620px){
  .gv-termin-tage{grid-template-columns:repeat(4,1fr)}
  .gv-termin-tage button{min-height:66px}
}

/* --- Uhrzeiten ------------------------------------------------------ */
.gv-termin-zeiten{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.gv-termin-zeiten button{min-width:88px;min-height:46px;cursor:pointer;
  border:1px solid rgba(22,40,31,.2);background:#fff;border-radius:2px;
  padding:10px 14px;font:15.5px/1 'Karla',system-ui,sans-serif;color:var(--pine);
  transition:border-color .15s,background .15s}
.gv-termin-zeiten button:hover{border-color:var(--gold)}
.gv-termin-zeiten button[aria-pressed="true"]{background:var(--gold);
  border-color:var(--gold);color:#16281F;font-weight:600}
.gv-termin-leer{font-size:15.5px;color:#5C6B62;margin:22px 0 0}

/* --- Formular ------------------------------------------------------- */
.gv-termin-formular{margin:30px 0 0;display:none}
.gv-termin-formular[data-offen="ja"]{display:block}
.gv-termin-gewaehlt{background:#fff;border-left:3px solid var(--gold);
  padding:14px 16px;margin:0 0 20px;font-size:16px;color:var(--pine)}
.gv-termin-gewaehlt b{font-weight:600}
.gv-termin-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.gv-termin-felder{grid-template-columns:1fr}}
.gv-termin-feld{display:flex;flex-direction:column;gap:5px}
.gv-termin-feld.weit{grid-column:1 / -1}
.gv-termin-feld label{font-size:13.5px;color:#4A5A52;font-weight:600}
.gv-termin-feld input,.gv-termin-feld textarea{
  border:1px solid rgba(22,40,31,.22);border-radius:2px;padding:11px 12px;
  font:16px/1.4 'Karla',system-ui,sans-serif;color:var(--pine);background:#fff;
  min-height:46px;box-sizing:border-box;width:100%}
.gv-termin-feld textarea{min-height:88px;resize:vertical}
.gv-termin-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gv-termin-haken{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;
  font-size:14.5px;line-height:1.55;color:#4A5A52}
.gv-termin-haken input{margin-top:3px;width:18px;height:18px;flex:none}
.gv-termin-senden{margin-top:22px}
.gv-termin-meldung{margin:18px 0 0;padding:14px 16px;border-radius:2px;
  font-size:15.5px;line-height:1.6}
.gv-termin-meldung[data-art="fehler"]{background:#FBEFE8;color:#7A2E12;
  border-left:3px solid #B4441A}
.gv-termin-fertig{background:#fff;border-left:3px solid #2E6E4E;
  padding:24px 26px;margin:26px 0 0}
.gv-termin-fertig h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:23px;color:var(--pine);margin:0 0 10px}
.gv-termin-fertig p{font-size:16px;line-height:1.7;color:#3A4A42;margin:0 0 10px}
.gv-termin-fertig p:last-child{margin-bottom:0}

/* ===============================================================
   BUCHUNGSSEITE MOBIL: Kalender ueber die Falz (18.09.2026)

   Regel: das Conversion-Element beginnt mobil nach hoechstens rund
   190 px. Gemessen wurde auf /beratungsgespraech/ bei 390 px Breite
   ein Wert von 1244 px, der erste freie Termin lag bei 1563 px. Das
   sind knapp zwei Bildschirme Scrollen bis zur eigentlichen Aufgabe
   der Seite.

   Die Hoehe kam aus drei Quellen, hier nach Groesse geordnet:
     517 px  .eckdaten, vier gestapelte Kacheln zu je 129 px
     310 px  .kopf-inner, davon 107 px allein die Lede
     252 px  .kopf-bild als eigenes Band UEBER dem Text

   Drei Eingriffe, alle nur unterhalb 860 px und nur auf dieser Seite:

   1. Das Foto kostet keine Hoehe mehr. Statt als eigenes Band ueber
      dem Text zu stehen, liegt es wieder HINTER ihm, so wie auf dem
      Rechner. Damit faellt das Bild nicht weg, es ist nur nicht mehr
      additiv. Das ist der Grund, warum hier die mobilen Regeln
      zurueckgenommen und nicht etwa neue Bildregeln geschrieben werden.

   2. Die Lede entfaellt. Sie wiederholt, was der Kalender unmittelbar
      danach ohnehin zeigt.

   3. Die Eckdaten wandern UNTER die Buchung. Sie sind Beiwerk. Vier
      Kacheln Beiwerk vor dem Kalender zu stapeln, ist auf einer
      Buchungsseite die falsche Reihenfolge.

   ⚠️ Der Schleier bekommt hier bewusst einen eigenen, gleichmaessig
   dunklen Verlauf. Der mobile Standardschleier ist fuer ein 250 px
   hohes Bildband gerechnet und beginnt oben mit nur 0,30 Deckkraft.
   Ueber einem flachen Kopf stuende die Schrift damit im hellen Teil
   des Fotos. Genau dieser Fehler war am 18.09. schon einmal mit 4,2:1
   gemessen worden.

   ⚠️ display:flex auf .seite macht auch .seite::before zum Flex-Kind.
   Das ist unbedenklich, weil es absolut positioniert ist und damit aus
   dem Fluss faellt. Geprueft, nicht angenommen.
   =============================================================== */
@media (max-width:860px){
  .seite.buchung{display:flex;flex-direction:column}
  .seite.buchung > *{order:4}
  .seite.buchung > .kopf{order:1}
  .seite.buchung > .buchungsblock{order:2}
  .seite.buchung > .eckdaten{order:3}

  /* ⚠️ Kein Foto im flachen Kopf.
     Erster Anlauf war, das Bild hinter den Text zu legen statt darueber.
     Das loeste zwar die Hoehe, brachte aber ein neues Problem: bei 125 px
     ist von einem 2200 px breiten Foto nichts mehr zu erkennen, und der
     Pruefagent sah als Einziges einen Hinterkopf, der genau hinter dem
     Wort "entscheiden." stand. Ein Bild, das man nicht erkennt, aber an
     dem ein Kopf haengt, ist schlechter als kein Bild.
     Desktop behaelt das Foto, dort ist der Kopfbereich gross genug. */
  .buchung .kopf-bild{display:none}
  .buchung .kopf-schleier{display:none}
  .buchung .kopf::after{display:none}

  .buchung .kopf-inner{padding:22px var(--polster) 26px}
  .buchung .kopf-marke{margin-bottom:12px}
  .buchung .kopf h1{margin-bottom:0}
  .buchung .kopf-lede{display:none}

  /* Der Minusabstand zieht die Kacheln auf dem Rechner ueber das Foto.
     Unter der Buchung wuerde er sie in den Kalender schieben. */
  .buchung .eckdaten{margin-top:var(--luft-s)}
  .buchung .buchungsblock{padding-top:var(--luft-s)}
}

/* ===============================================================
   DER LEERE GRUENE BALKEN UEBER DER FUSSZEILE (18.09.2026)

   Drei Pruefagenten haben unabhaengig voneinander dasselbe gemeldet:
   zwischen Abschlusskarte und Fusszeile steht ein rund 90 px hoher,
   voellig leerer dunkelgruener Balken, darunter eine harte Kante.
   Gemessen: Balken rgb(22,40,31), Fusszeile rgb(15,28,21).

   Es ist KEIN leerer Block. Es ist durchscheinender Theme-Hintergrund:

     .seite            endet bei 8566   <- unser Papier hoert hier auf
     .wp-block-group   endet bei 8636   <- 70 px Polster AUSSERHALB davon
     Fusszeile beginnt bei 8655         <- dazu 19 px Abstand der Vorlage
     .wp-site-blocks   ist tannengruen  <- und scheint durch beide Luecken

   ⚠️ Der Fehler steht auch auf der bereits freigegebenen Startseite,
   dort ueber 89 px. Er ist nie aufgefallen, weil jede Einzelmessung
   stimmte: Abstaende richtig, Farben richtig, kein Ueberlauf. Sichtbar
   wird er nur, wenn jemand hinsieht.

   ⚠️ Der naheliegende Weg waere gewesen, .wp-site-blocks einfach hell
   einzufaerben. Das ist falsch: dasselbe Element traegt oben 118 px
   Polster hinter der festen Kopfleiste, und dort ist Dunkelheit
   erwuenscht. Ein heller Streifen zwischen Kopfleiste und Bild waere
   der gleiche Fehler, nur oben.

   Deshalb werden die beiden Luecken geschlossen und der Abstand wandert
   nach INNEN, wo er die Papierfarbe hat. Die Hoehe bleibt damit gleich,
   nur die Farbe stimmt.
   =============================================================== */
/* ⚠️ !important ist hier kein Notnagel. Die Blockvorlage schreibt
   padding-bottom:var(--wp--preset--spacing--60) als INLINE-Stil an das
   Element. Gegen einen Inline-Stil verliert jede Regel aus einer
   Datei, egal wie spezifisch sie ist. Ohne !important passiert hier
   nichts, und das sah man der Regel nicht an: sie war korrekt,
   sie traf das Element, und sie wirkte trotzdem nicht. */
.wp-site-blocks > main:has(.seite) > .wp-block-group{padding-bottom:0 !important}
.wp-site-blocks > main:has(.seite) + .wp-block-template-part{margin-block-start:0}

/* ===============================================================
   VIER EINTRAEGE IM DREIERRASTER (19.09.2026)

   .punkte ist ein auto-fit-Raster mit minmax(300px,1fr). Bei 1240 px
   Inhaltsbreite passen genau drei Spalten hinein. Auf drei Seiten stehen
   dort aber VIER Eintraege, und der vierte landete allein in Reihe zwei:

     massagen-entspannung  Oelmassage · Druckpunkt · Nach dem Training
                           / Sauna und Wellness
     praeventionskurse     Bewegung · Ernaehrung · Stressbewaeltigung
                           / Suchtmittelkonsum
     vitalitaet            Bewegung · Ernaehrung · Erholung
                           / Muskulatur als Schutz

   Rechts daneben blieben rund 800 x 160 px leer, und weil jede Zelle
   oben eine Haarlinie traegt, endete diese Linie in Reihe zwei mitten
   im Nichts. Das liest sich als fehlender Inhalt, nicht als Absicht.

   ⚠️ Die Mengenabfrage ist Absicht. .punkte wird auf denselben Seiten
   auch mit zwei, drei und sechs Eintraegen benutzt, und dort stimmt das
   auto-fit-Verhalten. Eine pauschale Spaltenzahl haette die anderen
   Raster kaputtgemacht, um eines zu reparieren. Getroffen wird nur, wo
   ein viertes Kind existiert und ein fuenftes nicht.

   Vier Spalten statt 2x2: die Eintraege sind kurz (eine Ueberschrift,
   zwei bis drei Zeilen). Bei 2x2 stuenden sie in 600 px breiten Spalten
   und saehen verloren aus. Bei vier Spalten bleibt die Reihe eine Reihe.
   Drei Spalten kommen bei genau vier Eintraegen nie mehr vor.
   =============================================================== */
@media (min-width:1080px){
  .punkte:has(> :nth-child(4)):not(:has(> :nth-child(5))){
    grid-template-columns:repeat(4,1fr)
  }
}
@media (min-width:640px) and (max-width:1079px){
  .punkte:has(> :nth-child(4)):not(:has(> :nth-child(5))){
    grid-template-columns:repeat(2,1fr)
  }
}

/* ===============================================================
   „ANSEHEN →" AUF EINER HOEHE (19.09.2026)

   Der Verweis hing am Ende des Fliesstextes. Weil die Texte
   unterschiedlich lang sind, landete er mal am Zeilenende, mal allein
   auf einer dritten Zeile, und in einer Dreierreihe standen die drei
   Verweise auf drei verschiedenen Hoehen. Zwei Pruefagenten haben das
   unabhaengig gemeldet, dazu den zweiten Teil: mitten im Satz klebend
   erkennt man ihn kaum als Handlungsangebot.

   Der Verweis steht jetzt als eigener Absatz und wird mit margin-top:auto
   an die UNTERKANTE der Zelle geschoben. Rasterzellen einer Reihe sind
   gleich hoch, also stehen die Verweise damit immer auf einer Linie,
   unabhaengig von der Textlaenge. Keine abgeschriebene Hoehe, kein
   Nachmessen bei jeder Textaenderung.
   =============================================================== */
.punkte > div{display:flex;flex-direction:column}
.punkte > div > p.mehr{margin:auto 0 0;padding-top:16px}
.mehr a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;font-size:15.5px;color:var(--gold-dark);text-decoration:none;
  border-bottom:2px solid rgba(201,154,68,.42);padding-bottom:2px;
  transition:border-color .2s,color .2s}
.mehr a:hover{color:var(--pine);border-bottom-color:var(--gold)}

/* ===============================================================
   SCHLUSSKASTEN: DIE RECHTE HAELFTE WAR LEER (19.09.2026)

   Der Kasten ist rund 1070 px breit, der Text darin auf 56 Zeichen
   begrenzt, also etwa 640 px. Die restlichen gut 40 Prozent blieben
   leer, auf jeder der zwoelf Seiten dieselbe Luecke an derselben Stelle.
   Drei Pruefagenten haben es gemeldet.

   ⚠️ Die Textbreite wird NICHT aufgezogen. 56 Zeichen sind die lesbare
   Zeilenlaenge; eine Zeile ueber die ganze Kastenbreite waere gut 90
   Zeichen lang und damit schlechter zu lesen als vorher. Stattdessen
   wandern die Knoepfe nach rechts neben den Text.

   Alle zwoelf Karten sind gleich gebaut (kicker > h2 > p > knopfreihe),
   nachgezaehlt, nicht angenommen. Deshalb sind feste Rasterplaetze hier
   zulaessig.
   =============================================================== */
@media (min-width:1000px){
  .abschluss-karte{display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(44px,5vw,90px);align-items:center}
  .abschluss-karte > .kicker{grid-column:1;grid-row:1}
  .abschluss-karte > h2{grid-column:1;grid-row:2}
  .abschluss-karte > p{grid-column:1;grid-row:3;margin-bottom:0}
  .abschluss-karte > .knopfreihe{grid-column:2;grid-row:1 / 4;
    flex-direction:column;align-items:stretch;align-self:center}
  .abschluss-karte > .knopfreihe > a{text-align:center;white-space:nowrap}
}

/* Gestapelte Knoepfe auf dem Handy: gleiche Breite.
   Vorher richteten sie sich nach der Textlaenge, "09281 62211 anrufen"
   war breiter als "Kontakt aufnehmen", und die Treppe rechts fiel auf. */
@media (max-width:620px){
  .knopfreihe{flex-direction:column;align-items:stretch}
  .knopfreihe > a{text-align:center}
}

/* ===============================================================
   LEITSATZ STAND 230 PX NEBEN SEINEM TEXT (19.09.2026)

   Auf /ruecken-und-gelenke/ steht "Nicht warten. Starten." mittig, der
   Absatz direkt darunter linksbuendig. Gemessen: der Leitsatz lag bei
   x 360 bis 1080, der Absatz bei x 130 bis 850. Ein Pruefagent nannte
   es "ein verwaister Rest, der nicht zum Folgetext gehoert".

   ⚠️ Es war kein Gestaltungsfehler, sondern wieder Spezifitaet.
   .leitsatz bringt max-width:26ch mit (0-1-0), aber
   .abschnitt.schmal > * setzt max-width:720px (0-2-0) und gewinnt.
   Aus 26ch wurden 720 px, und das zusammen mit margin:0 auto hat den
   Kasten im ABSCHNITT zentriert statt ueber der Textspalte.

   ⚠️ Nicht mit einer ausgerechneten Randbreite geloest. Der Kasten
   bekommt einfach dieselbe Breite und denselben linken Rand wie seine
   Geschwister, die Schrift darin bleibt zentriert. Damit sitzt die Zeile
   ueber der Textspalte, ohne dass irgendwo eine Zahl steht, die bei der
   naechsten Breitenaenderung nachgezogen werden muss.
   =============================================================== */
.abschnitt.schmal > .leitsatz{margin-left:0;margin-right:0}

/* ===============================================================
   ZEITKNOEPFE SAHEN NICHT NACH KNOEPFEN AUS (19.09.2026)

   Weisse Flaechen mit einer Haarlinie von 20 Prozent Deckkraft auf
   fast weissem Papier (#F1F3EE). Zwei Pruefagenten lasen sie als
   Beschriftung statt als Schaltflaeche, und das auf der Seite, deren
   einzige Aufgabe die Buchung ist.

   Kein lautes Element daraus machen: die Uhrzeit bleibt ruhig, bekommt
   aber eine erkennbare Kante, etwas Gewicht und eine Standflaeche.
   Der gewaehlte Zustand bleibt unveraendert golden gefuellt.
   =============================================================== */
.gv-termin-zeiten button{border-color:rgba(22,40,31,.34);font-weight:600;
  box-shadow:0 2px 0 rgba(22,40,31,.07);
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.gv-termin-zeiten button:hover{border-color:var(--gold);background:#FFFDF8;
  transform:translateY(-1px);box-shadow:0 3px 0 rgba(201,154,68,.35)}
.gv-termin-zeiten button[aria-pressed="true"]{box-shadow:none;transform:none}

/* ===============================================================
   RECHTS NEBEN DEM KALENDER WAR PLATZ (19.09.2026)

   Gemessen auf /beratungsgespraech/ bei 1440 px: der Buchungsabschnitt
   ist 1292 px breit, der Kalender darin auf 780 px gedeckelt. Ueber die
   ganze Hoehe des Blocks blieben rechts rund 400 px leer, und ein
   Pruefagent las das als "da fehlt was".

   ⚠️ Der Deckel bleibt fuer das FORMULAR. Die Begruendung fuer 780 px
   war nie der Kalender, sondern die Eingabefelder: bei voller Breite
   waeren Vorname und Nachname je knapp 600 px breit, und ein 600 px
   breites Feld fuer acht Buchstaben sieht falsch aus. Deshalb waechst
   hier nur der Kalender, und das Formular behaelt seine Breite.

   Die sieben Tageskacheln gewinnen dadurch von rund 105 auf 160 px,
   was sie nebenbei deutlich besser treffbar macht.
   =============================================================== */
@media (min-width:1000px){
  .gv-termin{max-width:none}
  .gv-termin-formular{max-width:780px}
}

/* ===============================================================
   FAQ: 460 PX LEERE FLAECHE UEBER 1700 PX SCROLLWEG (19.09.2026)

   Die Fragenspalte ist 720 px breit, der Abschnitt 1180. Rechts daneben
   blieb ueber die gesamte Liste nichts. Bei einem kurzen Textblock ist
   das eine gewollte Satzspiegelform, bei sechs Fragen hintereinander
   ist es eine lange leere Bahn.

   ⚠️ Die Fragenspalte wird NICHT breiter gemacht. 720 px sind rund 80
   Zeichen und damit schon am oberen Rand der lesbaren Zeilenlaenge.
   Stattdessen wandert die Ueberschrift nach links daneben und bleibt
   beim Scrollen stehen. Damit ist die Flaeche belegt, und man weiss auf
   jeder Hoehe der Liste noch, worum es geht.

   ⚠️ Eingegrenzt auf Abschnitte, die wirklich .fragen enthalten.
   .abschnitt.schmal steht auf fast jeder Seite; eine pauschale
   Umstellung haette ueberall den Satzspiegel geaendert, um eine Seite
   zu verbessern.
   =============================================================== */
@media (min-width:1200px){
  /* ⚠️ grid-template-rows MUSS gesetzt werden. Ohne die Angabe
     verteilt das Raster die Hoehe der uebergreifenden Fragenliste
     gleichmaessig auf beide Zeilen, und die Ueberschrift rutschte damit
     850 px unter ihren eigenen Kicker. Gemessen, nicht vermutet:
     Kicker bei y=200, Ueberschrift bei y=900.
     auto fuer den Kicker, 1fr fuer den Rest. */
  .abschnitt.schmal:has(> .fragen){
    display:grid;grid-template-columns:330px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(48px,5vw,88px);align-items:start}
  .abschnitt.schmal:has(> .fragen) > .kicker{grid-column:1;grid-row:1;margin-bottom:14px}
  .abschnitt.schmal:has(> .fragen) > h2{grid-column:1;grid-row:2;
    position:sticky;top:150px;margin-top:0}
  .abschnitt.schmal:has(> .fragen) > .fragen{grid-column:2;grid-row:1 / 3;
    margin-top:0;max-width:none}
}

/* ---------------------------------------------------------------
   Kopfbilder mit Personen: Kopf nie abschneiden (12.10.2026)

   Gemessen mit /home/andreas-zenker/claude/werkzeuge/kopfcheck.py in 8
   Fenstergroessen (375 bis 3440 px): mit dem frueheren 50% 18% plus Zoom
   waren auf 6 von 6 Seiten mit Personenfoto Koepfe angeschnitten, bei
   breiten Fenstern (Kopfbereich 780 px hoch) blieben nur die Augen.

   Deshalb: je Foto ein eigener Bildmittelpunkt (Kopfbereich am Original
   gemessen, Prozent von links / von oben), kein Zoom auf Kopfbildern, und
   auf breiten Fenstern ist der Kopfbereich mindestens ein Drittel so hoch
   wie breit. Neues Foto als Kopfbild = hier eine Zeile ergaenzen und
   kopfcheck.py laufen lassen. LANDINGPAGE-STANDARD.md, Punkt C.
   --------------------------------------------------------------- */
.kopf-bild[src*="krafttraining-geraet"]{object-position:65% 48%}   /* Kopf x 55-76, y 33-66 */
.kopf-bild[src*="krafttraining-senior"]{object-position:58% 46%}   /* Kopf x 47-70, y 29-63 */
.kopf-bild[src*="gymnastikkurs-arme"]{object-position:50% 48%}     /* Koepfe x 15-88, y 33-64 */
.kopf-bild[src*="hero-squash"]{object-position:85% 62%}            /* Spieler x 62-93, y 55-70 */
.kopf-bild[src*="gymnastikkurs-gruppe"]{object-position:50% 32%}   /* Koepfe x 5-88, y 24-46 */
html.js-an .kopf-bild{animation:none}
@media (min-width:861px){
  .kopf:has(> .kopf-bild){min-height:max(clamp(480px,calc(100vw / 2.3),780px),min(calc(100vw / 3),88vh))}
}