/* =========================================================
   deingym. am Felsenkeller - Entwurf Medienmaster, V4
   Modern, hell, mit Farbverlaeufen. Schrift Poppins, weil sie
   dem geometrischen Charakter der Wortmarke entspricht.
   Logo wird als Originaldatei eingesetzt, nicht nachgebaut.
   ========================================================= */

@font-face{font-family:'Poppins';src:url('fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}:root{
  /* aus dem Original-Logo gemessen */
  --tuerkis:#1BAF9C;
  --tuerkis-hell:#4FD3BF;
  --tuerkis-blass:#D6F4EF;
  --gruen:#0A3D35;
  --gruen-tief:#062A24;
  --weiss:#FFFFFF;
  --nebel:#F5FBFA;
  --tinte:#0E2621;
  --grau:#48605A;
  --tuerkis-text:#0F7466;   /* Turkis-Variante, die auf Hell 4,5:1 schafft */
  --linie:rgba(10,61,53,.12);

  /* Verlaeufe: das prägende Element dieser Version */
  /* dunkel genug, dass weisser Text ueber die ganze Laenge lesbar bleibt */
  --vl-marke:linear-gradient(135deg,#0F7466 0%,#0C5A50 48%,#08322C 100%);
  --vl-hell:linear-gradient(160deg,#FFFFFF 0%,#EAF9F6 48%,#D6F4EF 100%);
  /* helles Ende gedeckelt, sonst faellt Text mit 82 % Deckkraft unter 4,5:1 */
  --vl-tief:linear-gradient(150deg,#08322C 0%,#0C4740 48%,#0E574D 100%);
  /* dezent halten: staerkerer Glanz hellt die Flaeche so weit auf,
     dass weisser Text unter 4,5:1 faellt */
  --vl-glanz:radial-gradient(120% 90% at 82% 8%,rgba(79,211,191,.16) 0%,rgba(79,211,191,0) 62%);
  --vl-text:linear-gradient(100deg,#0A3D35 0%,#1BAF9C 96%);

  --font:'Poppins',"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  --breite:1240px;
  --r:18px;
  --r-gross:30px;
  --schnell:.2s cubic-bezier(.2,.8,.2,1);
  --schatten:0 26px 60px -34px rgba(10,61,53,.55);
  --schatten-gross:0 40px 90px -44px rgba(10,61,53,.6);
}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-duration:.001ms!important}}body{margin:0;font-family:var(--font);font-size:17px;line-height:1.68;font-weight:400;
  color:var(--tinte);background:var(--weiss);overflow-x:hidden;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}a{color:var(--gruen)}:focus-visible{outline:3px solid var(--tuerkis);outline-offset:3px;border-radius:6px}.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:24px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:300;background:var(--gruen);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700}/* ---------- Typografie ---------- */
h1,h2,h3{margin:0 0 .44em;font-weight:800;line-height:1.06;letter-spacing:-.035em}h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}h3{font-size:clamp(1.12rem,1.8vw,1.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.24}h4{margin:0 0 .5em;font-size:.98rem;font-weight:700}p{margin:0 0 1.05em}.lead{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.66;color:var(--grau);max-width:56ch;font-weight:400}.dunkel .lead,.dunkel p,.buehne .lead,.buehne p{color:rgba(255,255,255,.88)}.verlauf{background:var(--vl-text);-webkit-background-clip:text;background-clip:text;color:transparent}.dunkel .verlauf{background:linear-gradient(100deg,#4FD3BF 0%,#BDF3E9 96%);-webkit-background-clip:text;background-clip:text;color:transparent}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin:0 0 18px;color:var(--tuerkis-text)}.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}.dunkel .eyebrow,.buehne .eyebrow{color:var(--tuerkis-hell)}/* ---------- Header: hell,damit das Originallogo wirkt ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--linie)}.header a{text-decoration:none;color:var(--gruen)}.header__in{display:flex;align-items:center;gap:22px;min-height:78px}.marke img{height:54px;width:auto}
@media (max-width:600px){.marke img{height:44px}}.nav{margin-left:auto;display:flex;align-items:center;gap:2px}.nav a{padding:10px 14px;font-size:.92rem;font-weight:600;border-radius:999px;
  color:var(--tinte);transition:background var(--schnell),color var(--schnell)}.nav a:hover{background:var(--tuerkis-blass);color:var(--gruen)}.nav a[aria-current="page"]{background:var(--tuerkis-blass);color:var(--gruen);font-weight:700}.btn-nav{background:var(--vl-marke);background-size:220% 220%;background-repeat:no-repeat;color:#fff!important;padding:12px 24px!important;margin-left:10px;
  box-shadow:0 12px 26px -14px rgba(27,175,156,.9);transition:transform var(--schnell),box-shadow var(--schnell)}.btn-nav:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(27,175,156,1)}
/* .nav a:hover setzt einen hellminten Hintergrund und ist spezifischer als
   .btn-nav:hover. Zusammen mit color:#fff!important ergab das weisse Schrift
   auf fast weissem Grund,der Button war beim Ueberfahren unlesbar. */
.nav a.btn-nav:hover{background:var(--vl-marke);background-size:220% 220%;background-repeat:no-repeat}.burger{display:none;margin-left:auto;background:var(--vl-marke);border:0;color:#fff;
  padding:11px 20px;font:inherit;font-size:.88rem;font-weight:700;border-radius:999px;cursor:pointer}
@media (max-width:1060px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    flex-direction:column;align-items:stretch;padding:12px 18px 20px;gap:2px;
    border-bottom:1px solid var(--linie);box-shadow:0 24px 40px -26px rgba(10,61,53,.45)}.nav.offen{display:flex}.nav a{padding:14px 16px;font-size:1rem;border-radius:14px}.btn-nav{margin:12px 0 0;text-align:center;justify-content:center}.burger{display:block}.header__in{position:relative}
}/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;font-weight:700;font-size:.98rem;border-radius:999px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform var(--schnell),box-shadow var(--schnell),background var(--schnell),color var(--schnell)}.btn:hover{transform:translateY(-3px)}.btn--mark,.dunkel a.btn--mark,.hell a.btn--mark{background:var(--vl-marke);background-size:220% 220%;background-repeat:no-repeat;color:#fff;box-shadow:0 18px 36px -18px rgba(27,175,156,.95)}.btn--mark:hover{box-shadow:0 26px 46px -18px rgba(27,175,156,1);color:#fff}.btn--weiss,.dunkel a.btn--weiss{background:#fff;color:var(--gruen);box-shadow:0 18px 36px -20px rgba(0,0,0,.5)}.btn--linie,.hell a.btn--linie{border-color:var(--linie);color:var(--gruen);background:transparent}.btn--linie:hover{border-color:var(--gruen);background:var(--gruen);color:#fff}.dunkel a.btn--linie,.buehne a.btn--linie{color:#fff;border-color:rgba(255,255,255,.5)}.dunkel a.btn--linie:hover,.buehne a.btn--linie:hover{background:#fff;border-color:#fff;color:var(--gruen)}.buehne a.btn--mark,.buehne a.btn--gruen{background:var(--tuerkis-hell);color:#08322C;box-shadow:0 20px 40px -18px rgba(79,211,191,.8)}.buehne a.btn--mark:hover,.buehne a.btn--gruen:hover{background:#fff;color:#08322C}/* Altnamen aus den Vorversionen */
.btn--gruen,.dunkel a.btn--gruen,.hell a.btn--gruen{background:var(--vl-marke);background-size:220% 220%;background-repeat:no-repeat;color:#fff;border-color:transparent;
  box-shadow:0 18px 36px -18px rgba(27,175,156,.95)}.btn--gruen:hover{color:#fff}.btn--mint,.dunkel a.btn--mint,.hell a.btn--mint{background:#fff;color:var(--gruen);border-color:transparent;
  box-shadow:0 18px 36px -20px rgba(0,0,0,.45)}.btn--mint:hover{color:var(--gruen)}.btn-reihe{display:flex;flex-wrap:wrap;gap:15px;margin-top:32px}
@media (max-width:560px){.btn-reihe{flex-direction:column;align-items:stretch}.btn-reihe .btn{width:100%}}/* ---------- Sektionen ---------- */
.sek{padding:clamp(64px,8vw,124px) 0;position:relative}.hell{background:var(--vl-hell)}.hell{background:linear-gradient(172deg,#E9F6F3 0%,#DAEFEA 100%)}
/* Weisse Boxen brauchen auf hellem Grund eine sichtbare Kante,sonst verschwimmen sie */
.hell .karte,.hell .klapp,.hell .preis,.hell .stimme,.hell .karte-platz{
  border-color:rgba(10,61,53,.16);box-shadow:0 18px 40px -26px rgba(10,61,53,.42)}
.hell .karte:hover,.hell .klapp:hover{box-shadow:0 30px 58px -26px rgba(10,61,53,.5)}.dunkel{background:var(--vl-tief);color:#fff;position:relative;overflow:hidden}.dunkel::before{content:"";position:absolute;inset:0;background:var(--vl-glanz);pointer-events:none}.dunkel>*{position:relative;z-index:1}.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:#fff}.dunkel a{color:var(--tuerkis-hell)}.dunkel strong{color:#fff}.kopf{max-width:760px;margin-bottom:clamp(34px,4vw,58px)}.kopf--breit{max-width:940px}.kopf--mitte{margin-inline:auto;text-align:center;max-width:800px}.kopf--mitte .lead{margin-inline:auto}.kopf--mitte .eyebrow::before{display:none}/* ---------- Hero ---------- */
.hero{background:var(--vl-hell);position:relative;overflow:hidden}.hero::before{content:"";position:absolute;width:70vw;height:70vw;right:-22vw;top:-30vw;border-radius:50%;
  background:radial-gradient(circle,rgba(27,175,156,.28) 0%,rgba(27,175,156,0) 66%)}.hero::after{content:"";position:absolute;width:46vw;height:46vw;left:-20vw;bottom:-26vw;border-radius:50%;
  background:radial-gradient(circle,rgba(79,211,191,.24) 0%,rgba(79,211,191,0) 68%)}.hero__in{position:relative;z-index:2;padding:clamp(58px,7vw,104px) 0 clamp(58px,7vw,100px);
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,64px);align-items:center}
@media (max-width:920px){.hero__in{grid-template-columns:1fr;padding-top:46px}}.hero h1{margin-bottom:.34em}.hero__lead{font-size:clamp(1.06rem,1.6vw,1.24rem);color:var(--grau);max-width:44ch;margin-bottom:0}.hero__bild{position:relative}.hero__bild img{width:100%;border-radius:var(--r-gross);box-shadow:var(--schatten-gross)}.hero__preis{position:absolute;right:-16px;bottom:-24px;background:#fff;color:var(--gruen);
  border-radius:22px;padding:18px 26px;text-align:center;box-shadow:var(--schatten)}.hero__preis b{display:block;font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.04em;
  background:var(--vl-text);-webkit-background-clip:text;background-clip:text;color:transparent}.hero__preis span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;margin-top:5px;color:var(--grau)}
@media (max-width:920px){.hero__preis{right:10px;bottom:-18px}}.fakten{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}.fakten li{background:rgba(255,255,255,.8);color:var(--gruen);border:1px solid var(--linie);
  border-radius:999px;padding:10px 20px;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:7px}.fakten li b{font-weight:800}/* ---------- Laufband ---------- */
.laufband{background:var(--vl-marke);color:#fff;overflow:hidden;padding:15px 0}/* Die Spur enthaelt den Text zweimal und faehrt um -50 %,also genau eine Kopie
   weit. Damit das lueckenlos wirkt,MUSS eine Kopie breiter sein als das Fenster,
   sonst laeuft die Leiste leer,bevor sie zurueckspringt. Deshalb ist der
   Eintragssatz im HTML mehrfach wiederholt,bis eine Kopie ueber 2560 px kommt.
   Die Laufdauer haengt an der Kopienbreite (Tempo rund 22 px/s) und steht
   deshalb als --dauer am Element. */
.laufband__spur{display:flex;width:max-content;animation:rollen var(--dauer,38s) linear infinite}.laufband:hover .laufband__spur{animation-play-state:paused}.laufband span{font-size:clamp(.95rem,1.5vw,1.16rem);font-weight:600;padding-inline:22px;
  display:flex;align-items:center;gap:22px;white-space:nowrap}.laufband span::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);flex:0 0 auto}
@keyframes rollen{from{transform:translateX(0)}to{transform:translateX(-50%)}}/* ---------- Raster ---------- */
.raster{display:grid;gap:clamp(16px,2vw,24px)}.raster--2{grid-template-columns:repeat(2,1fr)}.raster--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.raster--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.raster--2,.raster--3{grid-template-columns:1fr}}/* ---------- Karten ---------- */
.karte{background:#fff;border-radius:var(--r-gross);padding:30px 28px 32px;display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--linie);box-shadow:0 18px 44px -34px rgba(10,61,53,.5);
  transition:transform var(--schnell),box-shadow var(--schnell)}.karte:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgba(10,61,53,.55)}.dunkel .karte{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.karte h3{margin-bottom:2px}.karte p{margin:0;color:var(--grau);font-size:.96rem}.dunkel .karte p{color:rgba(255,255,255,.86)}.karte__nr,.karte p.karte__nr,.dunkel .karte p.karte__nr{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:16px;
  background:var(--vl-marke);background-size:220% 220%;background-repeat:no-repeat;color:#fff;font-weight:700;font-size:1rem;margin-bottom:12px}/* ---------- Bild-Kacheln ---------- */
.kachel{position:relative;width:100%;overflow:hidden;background:var(--gruen);margin:0;
  border-radius:var(--r-gross);box-shadow:0 20px 46px -32px rgba(10,61,53,.55)}.kachel img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.kachel:hover img{transform:scale(1.06)}.kachel figcaption{position:absolute;left:16px;bottom:16px;padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--gruen);font-weight:700;font-size:.8rem}.kachel--hoch{aspect-ratio:3/4}.kachel--quer{aspect-ratio:4/3}
/* Studio-Galerie: Masonry-Spalten, damit hohe und quere Kacheln sauber mischen */
.galerie{columns:3;column-gap:clamp(14px,1.5vw,20px)}
.galerie .kachel{margin-bottom:clamp(14px,1.5vw,20px);break-inside:avoid;display:block}
@media (max-width:900px){.galerie{columns:2}}
@media (max-width:560px){.galerie{columns:1}}
.kachel--quad{aspect-ratio:1/1}.app-phone{position:relative;width:min(360px,94%);margin:0 auto;background:linear-gradient(155deg,#202024,#0b0b0d);border-radius:44px;padding:12px;box-shadow:0 34px 66px -32px rgba(10,61,53,.6),0 6px 16px rgba(0,0,0,.32),inset 0 0 0 2px rgba(255,255,255,.06)}.app-phone__screen{position:relative;aspect-ratio:600/1214;border-radius:33px;overflow:hidden;background:#000}.app-phone__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}.app-phone__shot.is-active{opacity:1}.app-phone__island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:30%;height:14px;background:#000;border-radius:999px;z-index:3}@media (prefers-reduced-motion:reduce){.app-phone__shot{transition:none}}/* ---------- Preis ---------- */
.preis{background:#fff;color:var(--tinte);border-radius:var(--r-gross);padding:clamp(30px,3.6vw,46px);
  max-width:540px;box-shadow:var(--schatten-gross);border:1px solid var(--linie)}.dunkel .preis,.dunkel .preis h3,.dunkel .preis li,.dunkel .preis p{color:var(--tinte)}/* der Betrag bleibt Verlaufstext,auch in dunklen Sektionen */
.dunkel .preis__zahl strong,.dunkel .preis__zahl strong{
  background:var(--vl-text);-webkit-background-clip:text;background-clip:text;color:transparent}.dunkel .preis a:not(.btn){color:var(--gruen)}.preis__tarif{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--tuerkis-text);margin:0}.preis__zahl{display:flex;align-items:baseline;gap:12px;margin:8px 0 0;flex-wrap:wrap}.preis__zahl strong{font-size:clamp(3rem,7vw,4.2rem);font-weight:800;letter-spacing:-.05em;line-height:.98;
  background:var(--vl-text);-webkit-background-clip:text;background-clip:text;color:transparent}.preis__zahl span{font-weight:600;font-size:.95rem;color:var(--grau)}.preis__hinweis{font-size:.93rem;margin:10px 0 24px;padding-top:20px;border-top:1px solid var(--linie);color:var(--grau)}.liste{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px}.liste li{position:relative;padding-left:36px;font-size:1rem}.liste li::before{content:"";position:absolute;left:0;top:.16em;width:22px;height:22px;border-radius:8px;
  background:var(--tuerkis-blass);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D35' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat}.dunkel .liste li::before{background-color:rgba(255,255,255,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E")}.preis .liste li::before{background-color:var(--tuerkis-blass);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D35' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E")}/* ---------- Stimmen ---------- */
.stimme{background:#fff;border-radius:var(--r-gross);padding:28px 26px;display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--linie);box-shadow:0 18px 44px -34px rgba(10,61,53,.5);transition:transform var(--schnell)}.stimme:hover{transform:translateY(-6px)}.stimme blockquote{margin:0;font-size:1.02rem;line-height:1.6;font-weight:500}.stimme figcaption{font-size:.83rem;color:var(--grau);font-weight:600;margin-top:auto}.stimme__sterne{color:#8A6508;letter-spacing:.12em;font-size:1.02rem;margin:0}/* =========== Bento: Text,Bilder und Merkmale im selben Raster =========== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px);
  grid-auto-rows:minmax(150px,auto)}.bento>*{border-radius:26px;overflow:hidden;position:relative}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}.bento__text{grid-column:span 2;grid-row:span 2;padding:clamp(28px,3vw,42px);
  background:var(--vl-hell);border:1px solid var(--linie);display:flex;flex-direction:column;justify-content:center}.bento__text h2{margin-bottom:.3em}.bento__text .lead{margin-bottom:0}
@media (max-width:600px){.bento__text{grid-column:span 1;grid-row:span 1}}.bento__bild{grid-column:span 2;grid-row:span 2;background:var(--gruen)}.bento__bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.bento__bild:hover img{transform:scale(1.06)}.bento__bild figcaption{position:absolute;left:18px;bottom:18px;padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--gruen);font-weight:700;font-size:.82rem}
@media (max-width:600px){.bento__bild{grid-column:span 1;grid-row:span 1;aspect-ratio:4/3}}.bento__merkmal{padding:26px 24px;background:#fff;border:1px solid var(--linie);
  display:flex;flex-direction:column;gap:10px;justify-content:flex-start;
  transition:transform var(--schnell),box-shadow var(--schnell),background var(--schnell)}.bento__merkmal:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(10,61,53,.6)}.bento__merkmal svg{width:30px;height:30px;stroke:var(--tuerkis-text);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;transition:stroke var(--schnell)}.bento__merkmal:hover svg{stroke:var(--gruen)}.bento__merkmal b{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}.bento__merkmal span{font-size:.9rem;color:var(--grau);line-height:1.5}/* eine Kachel farbig als Blickfang */
.bento__merkmal--stark{background:var(--vl-marke);border-color:transparent;color:#fff}.bento__merkmal--stark svg{stroke:var(--tuerkis-hell)}.bento__merkmal--stark:hover svg{stroke:#fff}.bento__merkmal--stark span{color:rgba(255,255,255,.88)}.bento__merkmal--stark b{color:#fff}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bento>*{animation:auftauchen linear both;animation-timeline:view();animation-range:entry 0% entry 46%}.bento>*:nth-child(3){animation-range:entry 4% entry 50%}.bento>*:nth-child(4){animation-range:entry 8% entry 54%}.bento>*:nth-child(5){animation-range:entry 12% entry 58%}.bento>*:nth-child(6){animation-range:entry 16% entry 62%}
  }
}/* =========== Probetraining: Bildcollage statt braver Spalten =========== */
.testen{position:relative;overflow:hidden;isolation:isolate;color:#fff}.testen__grund{position:absolute;inset:0;z-index:-2}.testen__grund img{width:100%;height:100%;object-fit:cover}.testen::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(112deg,#062A24 18%,rgba(6,42,36,.93) 44%,rgba(10,61,53,.68) 72%,rgba(15,116,102,.5) 100%)}.testen h1,.testen h2,.testen h3{color:#fff}.testen .lead,.testen p{color:rgba(255,255,255,.9)}.testen .eyebrow{color:var(--tuerkis-hell)}.testen__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,64px);align-items:center}
@media (max-width:960px){.testen__in{grid-template-columns:1fr}}/* Riesenzahl als Blickfang */
.gratis{display:flex;align-items:flex-start;gap:18px;margin:0 0 28px}.gratis b{font-size:clamp(4.2rem,11vw,7.4rem);font-weight:800;line-height:.82;letter-spacing:-.06em;
  background:linear-gradient(120deg,#4FD3BF 0%,#BDF3E9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}.gratis span{font-size:.94rem;font-weight:700;line-height:1.35;padding-top:10px;
  border-left:3px solid var(--tuerkis-hell);padding-left:16px;color:#fff}/* gestaffelte,angeschraegte Bildcollage */
.collage{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:26px 0}.collage figure{margin:0;border-radius:26px;overflow:hidden;position:relative;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.8);transition:transform .4s cubic-bezier(.2,.8,.2,1)}.collage figure img{width:100%;height:100%;object-fit:cover;display:block}.collage figure:nth-child(1){aspect-ratio:3/4;transform:rotate(-3deg) translateY(-14px)}.collage figure:nth-child(2){aspect-ratio:3/4;transform:rotate(2.5deg) translateY(24px)}.collage figure:nth-child(3){aspect-ratio:16/10;grid-column:span 2;transform:rotate(-1deg)}.collage figure:hover{transform:rotate(0) translateY(-10px) scale(1.03);z-index:3}.collage__stempel{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:4;
  width:132px;height:132px;border-radius:50%;background:var(--tuerkis-hell);color:#062A24;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.75);border:5px solid rgba(255,255,255,.85)}.collage__stempel b{font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.04em}.collage__stempel span{font-size:.64rem;font-weight:800;letter-spacing:.14em;margin-top:4px}
@media (prefers-reduced-motion:no-preference){
  .collage__stempel{animation:stempeln 6s ease-in-out infinite}
}
@keyframes stempeln{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-9deg) scale(1.07)}}
@media (max-width:560px){.collage__stempel{width:96px;height:96px}.collage__stempel b{font-size:1.4rem}}/* Ablauf hier waagerecht statt untereinander */
.testen .ablauf{grid-template-columns:repeat(3,1fr);gap:20px}.testen .ablauf li{grid-template-columns:1fr;gap:14px;padding:0}.testen .ablauf li:not(:last-child)::after{left:36px;right:auto;top:36px;bottom:auto;
  width:calc(100% - 8px);height:3px;
  background:linear-gradient(to right,var(--tuerkis-hell),rgba(79,211,191,.12))}.testen .ablauf__ikon{grid-row:auto}
@media (max-width:760px){
  .testen .ablauf{grid-template-columns:1fr}.testen .ablauf li{grid-template-columns:74px 1fr;gap:22px;padding:18px 0}.testen .ablauf li:not(:last-child)::after{left:36px;top:76px;bottom:-4px;width:3px;height:auto;
    background:linear-gradient(to bottom,var(--tuerkis-hell),rgba(79,211,191,.12))}
}/* ---------- Schritte als Ablauf mit Symbolen ---------- */
.ablauf{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:a;position:relative}.ablauf li{counter-increment:a;position:relative;display:grid;grid-template-columns:74px 1fr;
  gap:22px;padding:22px 0 26px;align-items:start}/* durchgehende Linie zwischen den Symbolen */
.ablauf li:not(:last-child)::after{content:"";position:absolute;left:36px;top:76px;bottom:-4px;width:3px;
  border-radius:3px;background:linear-gradient(to bottom,var(--tuerkis-hell),rgba(79,211,191,.12))}.ablauf__ikon{grid-row:span 2;width:72px;height:72px;border-radius:24px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--schnell),background var(--schnell),box-shadow var(--schnell)}.ablauf li:hover .ablauf__ikon{transform:translateY(-5px) rotate(-4deg);
  background:var(--tuerkis-hell);box-shadow:0 18px 34px -16px rgba(79,211,191,.9)}.ablauf__ikon svg{width:32px;height:32px;stroke:var(--tuerkis-hell);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--schnell)}.ablauf li:hover .ablauf__ikon svg{stroke:#08322C}/* Nummer als Plakette am Symbol */
.ablauf__ikon::after{content:"0" counter(a);position:absolute;right:-9px;bottom:-9px;
  min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--tuerkis-hell);
  color:#08322C;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}.ablauf h3{margin:6px 0 4px;font-size:1.2rem}.ablauf p{margin:0}.hell .ablauf__ikon{background:var(--tuerkis-blass);border-color:transparent}.hell .ablauf__ikon svg{stroke:var(--tuerkis-text)}.hell .ablauf li:not(:last-child)::after{
  background:linear-gradient(to bottom,var(--tuerkis),rgba(27,175,156,.1))}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ablauf li{animation:schrittrein linear both;animation-timeline:view();animation-range:entry 0% entry 46%}.ablauf li:nth-child(2){animation-range:entry 6% entry 52%}.ablauf li:nth-child(3){animation-range:entry 12% entry 58%}
  }
}
@keyframes schrittrein{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}/* ---------- Schritte ---------- */
.schritte{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:22px}.schritte li{counter-increment:s;display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start}.schritte li::before{content:"0" counter(s);display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:18px;background:var(--vl-marke);background-size:220% 220%;background-repeat:no-repeat;color:#fff;font-weight:700;font-size:1.1rem}.dunkel .schritte li::before{background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.schritte h3{margin-bottom:4px;font-size:1.14rem}.schritte p{margin:0;color:var(--grau)}.dunkel .schritte p{color:rgba(255,255,255,.86)}/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,62px);align-items:center}.split--umgekehrt>*:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--umgekehrt>*:first-child{order:0}}/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:900px}.faq details{background:#fff;border-radius:var(--r);border:1px solid var(--linie);
  box-shadow:0 14px 34px -30px rgba(10,61,53,.5);transition:box-shadow var(--schnell)}.faq details[open]{box-shadow:0 22px 46px -30px rgba(10,61,53,.55)}.faq summary{padding:21px 26px;font-weight:600;cursor:pointer;list-style:none;font-size:1.04rem;
  display:flex;justify-content:space-between;gap:18px;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"";width:26px;height:26px;flex:0 0 auto;border-radius:9px;background:var(--tuerkis-blass);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D35' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat;transition:transform var(--schnell)}.faq details[open] summary::after{transform:rotate(45deg)}.faq__inhalt{padding:0 26px 24px;max-width:74ch;color:var(--grau)}.faq__inhalt p:last-child{margin-bottom:0}/* ---------- Formular ---------- */
.form{display:grid;gap:17px;max-width:640px}.feld{display:grid;gap:7px}.feld label{font-weight:600;font-size:.9rem}.feld input,.feld textarea{font:inherit;font-size:1rem;padding:15px 18px;border:1px solid var(--linie);
  border-radius:14px;background:#fff;color:var(--tinte);width:100%;transition:border-color var(--schnell),box-shadow var(--schnell)}.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--tuerkis);box-shadow:0 0 0 4px rgba(27,175,156,.18)}.feld textarea{min-height:150px;resize:vertical}.zustimmung{display:flex;gap:13px;align-items:flex-start;font-size:.92rem;color:var(--grau)}.zustimmung input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--tuerkis)}.dunkel .feld label{color:#fff}.dunkel .zustimmung{color:rgba(255,255,255,.86)}/* ---------- Anfahrt ---------- */
.karte-platz{background:#fff;border:1px solid var(--linie);border-radius:var(--r-gross);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:46px 28px;min-height:260px;margin-top:28px;box-shadow:0 18px 44px -34px rgba(10,61,53,.5)}.karte-platz p{margin:0;color:var(--grau);max-width:44ch;font-size:.95rem}.dunkel .karte-platz{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}.dunkel .karte-platz p{color:rgba(255,255,255,.86)}/* ---------- Widget ---------- */
.widget-rahmen{border-radius:var(--r-gross);overflow:hidden;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten)}/* Der Tarifkasten im Formular ist fest 364 px breit und waechst nicht mit.
   In voller Seitenbreite fuellt er nur ein Fuenftel und schwimmt in weisser Flaeche.
   Deshalb: Rahmen auf 760 px kappen und den Inhalt um 1,25 vergroessern.
   Der Kasten liegt damit bei rund 455 px sichtbarer Breite,und die Schrift
   im Formular kommt naeher an die 17 px der uebrigen Seite. */
.widget-rahmen{max-width:760px;margin-inline:auto}
.widget-rahmen__zoom{width:100%}
/* Rueckfallhoehe ohne JavaScript: das Formular braucht in Schritt 1 rund 1010 px.
   Mit JavaScript setzt der Hoehen-Listener eine exakte Hoehe und hebt min-height auf. */
.widget-rahmen iframe{display:block;width:100%;min-height:1040px;border:0}
@media (max-width:820px){
  /* schmale Fenster: kein Vergroessern,Formular nutzt die volle Breite */
  .widget-rahmen{max-width:none}
  .widget-rahmen__zoom{width:100%;transform:none}
}
@media (max-width:600px){.widget-rahmen iframe{min-height:1180px}}.widget-hinweis{background:var(--vl-tief);color:#fff;border-radius:var(--r);padding:19px 26px;font-size:.95rem;margin-bottom:26px}.widget-hinweis strong{color:var(--tuerkis-hell)}/* ---------- Fussleiste ---------- */
.fuss{background:var(--vl-tief);color:rgba(255,255,255,.78);padding:clamp(56px,6vw,86px) 0 32px;font-size:.95rem;
  position:relative;overflow:hidden}.fuss::before{content:"";position:absolute;inset:0;background:var(--vl-glanz);pointer-events:none}.fuss>*{position:relative;z-index:1}.fuss a{color:rgba(255,255,255,.78);text-decoration:none}.fuss a:hover{color:var(--tuerkis-hell)}.fuss h4{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-weight:700}.fuss__raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;position:relative}
@media (max-width:860px){.fuss__raster{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:520px){.fuss__raster{grid-template-columns:1fr}}.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}.fuss__logo{height:34px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}.fuss__claim{font-size:1.35rem;font-weight:800;color:#fff;margin:22px 0 0;letter-spacing:-.03em}.fuss__social{display:flex;gap:12px;position:absolute;right:0;bottom:2px}@media(max-width:860px){.fuss__social{position:static;margin-top:22px}}.fuss__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fff;transition:background .2s,border-color .2s,color .2s}.fuss__social a:hover{background:var(--tuerkis-hell);border-color:var(--tuerkis-hell);color:var(--gruen)}.fuss__social svg{width:20px;height:20px}/* =========== Grosser Bild-Hero: Menschen statt Hanteln =========== */
.buehne{position:relative;background:#08322C;color:#fff;overflow:hidden;isolation:isolate}.buehne__streifen{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;z-index:0}.buehne__streifen img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}.buehne__streifen div{overflow:hidden;position:relative}.buehne__streifen div:nth-child(2){transform:translateY(-3%)}.buehne__streifen div:nth-child(3){transform:translateY(3%)}.buehne__streifen div:nth-child(4){display:none}
@media (min-width:1100px){.buehne__streifen div:nth-child(4){display:block}}
@media (max-width:760px){.buehne__streifen{grid-template-columns:repeat(2,1fr)}.buehne__streifen div:nth-child(3){display:none}}.buehne::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,#08322C 24%,rgba(8,50,44,.94) 46%,rgba(8,50,44,.62) 70%,rgba(8,50,44,.45) 100%)}.buehne__in{position:relative;z-index:2;padding:clamp(72px,11vw,150px) clamp(26px,4.5vw,44px) clamp(56px,7vw,104px)}.buehne--klein .buehne__in{padding:clamp(58px,8vw,104px) clamp(26px,4.5vw,44px) clamp(48px,6vw,80px)}.buehne .fakten li a{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none}.buehne .fakten li a:hover{color:var(--tuerkis-hell)}.buehne.buehne--klein h1{font-size:clamp(2.4rem,6.2vw,4.8rem);max-width:100%}/* Kein Chip und keine Versalien: beides zerstoert die Logo-Anmutung,und Tuerkis auf Tuerkis liess das kursive "dein" verschwinden. */
.buehne p.buehne__slogan{display:block;font-size:clamp(1.1rem,2vw,1.5rem);
  letter-spacing:-.03em;margin:0 0 18px;background:none;padding:0;text-transform:none}.buehne p.buehne__slogan i{color:var(--tuerkis-hell)}.buehne h1{font-size:clamp(3rem,9.5vw,7.4rem);line-height:.9;letter-spacing:-.045em;
  margin:0 0 .28em;max-width:14ch;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}.buehne h1 em{font-style:normal;background:linear-gradient(96deg,#4FD3BF 0%,#BDF3E9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1.1;padding-block:.12em;margin-block:-.12em}.buehne__lead{font-size:clamp(1.06rem,1.7vw,1.32rem);color:rgba(255,255,255,.88);max-width:48ch;margin:0}.buehne .fakten li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.buehne .fakten li b{color:var(--tuerkis-hell)}/* Hero mit einem einzigen grossen Studiobild statt Streifen */
.buehne--bild .buehne__streifen{grid-template-columns:1fr}.buehne--bild .buehne__streifen div:nth-child(n+2){display:none}.buehne--bild .buehne__streifen div{transform:none}.buehne--bild::after{background:linear-gradient(98deg,#08322C 22%,rgba(8,50,44,.9) 48%,rgba(8,50,44,.5) 78%,rgba(8,50,44,.3) 100%)}
/* Hero mit Studio-Freisteller: Verlauf deckt nur die Textseite ab,damit die
   Modelle rechts in vollem Tuerkis stehen bleiben.Rechts nur ein Hauch,damit
   die Kante zwischen Verlauf und Bild nicht sichtbar bricht. */
.buehne--modell::after{background:linear-gradient(96deg,#08322C 0%,rgba(8,50,44,.95) 30%,rgba(8,50,44,.74) 48%,rgba(8,50,44,.16) 62%,rgba(8,50,44,.06) 100%)}
/* Waagerecht 58 %: bis rund 1440 px wird seitlich beschnitten,der Wert haelt die
   Modelle im Bild. Senkrecht 15 %: ab rund 1600 px ist der Hero breiter als das
   Bildformat,dann wird oben und unten beschnitten. Bei "center" faellt der
   Schnitt gleichmaessig aus und kappt ab 1920 px die Koepfe (bei 2560 px um
   161 px). Mit 15 % geht der Schnitt fast vollstaendig nach unten in die Beine. */
.buehne--modell .buehne__streifen img{object-position:58% 15%;filter:none}
/* Plakette aus dem Gesichtsbereich nach unten rechts */
.buehne--modell .plakette{top:auto;bottom:9%;right:5%}
@media (max-width:760px){
  /* Handy: eng zugeschnittenes Paar-Bild (per <picture>, modell-mobil.webp) im
     Vollbild, damit BEIDE Modelle mit Kopf-Luft drauf sind. Text liegt als
     Overlay ueber den Koerpern, die Gesichter oben bleiben frei. Kompakt, damit
     "Angebot sichern" schon beim ersten Blick sichtbar ist. */
  .buehne--modell .buehne__streifen img{object-position:center top}
  .buehne--modell::after{background:linear-gradient(180deg,rgba(8,50,44,0) 26%,rgba(8,50,44,.28) 42%,rgba(8,50,44,.82) 60%,#08322C 100%)}
  .buehne--modell .buehne__in{padding-top:clamp(196px,31vh,262px);display:flex;flex-direction:column;align-items:flex-start}
  /* Button gleich nach der Headline, damit er trotz Cookie-Banner sofort sichtbar ist */
  .buehne--modell .buehne__slogan{order:1}
  .buehne--modell h1{order:2}
  .buehne--modell .btn-reihe{order:3;margin:2px 0 18px}
  .buehne--modell .buehne__lead{order:4;margin:0}
  .buehne--modell .fakten{order:5;margin-top:16px}
}
/* Dauerzoom nur auf grossen Zeigegeraeten und mit will-change, sonst
   rechnet der Browser eine bildschirmfuellende Flaeche endlos neu. */
@media (prefers-reduced-motion:no-preference) and (min-width:900px) and (pointer:fine){
  .buehne--bild .buehne__streifen img{animation:langsamzoom 26s ease-in-out infinite alternate;
    will-change:transform;backface-visibility:hidden}
}
@keyframes langsamzoom{from{transform:scale(1.01)}to{transform:scale(1.06)}}/* Sektionen mit Bild im Hintergrund */
.bildgrund{position:relative;color:#fff;overflow:hidden;isolation:isolate}.bildgrund__bild{position:absolute;inset:0;z-index:-2}.bildgrund__bild img{width:100%;height:100%;object-fit:cover}.bildgrund::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(8,50,44,.96) 26%,rgba(8,50,44,.86) 56%,rgba(12,71,64,.7) 100%)}.bildgrund h1,.bildgrund h2,.bildgrund h3,.bildgrund h4{color:#fff}.bildgrund .lead,.bildgrund p{color:rgba(255,255,255,.9)}.bildgrund .eyebrow{color:var(--tuerkis-hell)}.bildgrund a:not(.btn){color:var(--tuerkis-hell)}.bildgrund strong{color:#fff}.bildgrund .karte{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bildgrund .karte p{color:rgba(255,255,255,.88)}.bildgrund .schritte p{color:rgba(255,255,255,.88)}.bildgrund .liste li::before{background-color:rgba(255,255,255,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E")}.bildgrund a.btn--linie{color:#fff;border-color:rgba(255,255,255,.5)}.bildgrund a.btn--linie:hover{background:#fff;border-color:#fff;color:var(--gruen)}.bildgrund a.btn--mark,.bildgrund a.btn--gruen{background:var(--tuerkis-hell);color:#08322C}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bildgrund__bild img{animation:grundfahrt linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes grundfahrt{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1.12) translateY(3%)}}/* =========== Wortmarke: exakt wie im Logo aufgebaut ===========
   "dein" kursiv und tuerkis,der Rest gerade. Auf hellem Grund
   dunkelgruen wie im Original,auf dunklem Grund weiss. */
.wortmarke{font-weight:800;letter-spacing:-.035em;color:var(--gruen)}.wortmarke i{font-style:italic;font-weight:800;color:var(--tuerkis)}.dunkel .wortmarke,.bildgrund .wortmarke,.fuss .wortmarke,.buehne .wortmarke{color:#fff}.dunkel .wortmarke i,.bildgrund .wortmarke i,.fuss .wortmarke i,.buehne .wortmarke i{color:var(--tuerkis-hell)}/* Helle Flaechen INNERHALB dunkler Sektionen: dort waere Weiss unsichtbar.
   Betrifft die Preisbox,Karten und Stimmen. */
.dunkel .preis .wortmarke,.dunkel .preis .wortmarke,.bildgrund .preis .wortmarke,.dunkel .stimme .wortmarke,.hell .wortmarke{color:var(--gruen)}.dunkel .preis .wortmarke i,.bildgrund .preis .wortmarke i,.dunkel .stimme .wortmarke i,.hell .wortmarke i{color:var(--tuerkis-text)}/* Nebliges Bild hinter einer dunklen Flaeche: nur zu ahnen,nicht zu lesen */
.dunkel--neblig{position:relative;overflow:hidden;isolation:isolate}.dunkel__bild{position:absolute;inset:0;z-index:-2}/* nicht zu stark vergroessern,sonst erkennt man den Raum nicht mehr */
.dunkel__bild img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:blur(4px) saturate(.85);transform:scale(1.02);opacity:.5}.dunkel--neblig::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgba(8,50,44,.9) 0%,rgba(12,71,64,.84) 48%,rgba(14,87,77,.78) 100%)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .dunkel__bild img{animation:nebelzug linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes nebelzug{from{transform:scale(1.02) translateY(-1.2%)}to{transform:scale(1.02) translateY(1.2%)}}/* Anfahrtskarte gross und mittig statt schmalem Kasten */
.karte-platz--gross{min-height:340px;padding:52px 34px;background:var(--vl-hell);border:1px solid var(--linie)}.karte-platz--gross p:first-child{font-size:1.3rem;font-weight:700;color:var(--gruen)}/* Werbezeile als eigene,ruhige Sektion */
.werbezeile{text-align:center;font-size:clamp(1.7rem,4.6vw,3.2rem);
  margin:0;line-height:1.16;text-wrap:balance}.werbezeile--links{text-align:left}#anmeldung{scroll-margin-top:90px}/* Preisplakette,gross und schraeg */
.plakette{position:absolute;right:4%;top:16%;z-index:3;background:var(--tuerkis-hell);color:#08322C;
  border-radius:26px;padding:22px 28px;text-align:center;transform:rotate(5deg);
  box-shadow:0 26px 56px -22px rgba(0,0,0,.7)}.plakette b{display:block;font-size:2.6rem;font-weight:800;line-height:.95;letter-spacing:-.05em}.plakette span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;margin-top:6px}.plakette small{display:block;font-size:.66rem;font-weight:600;margin-top:8px;padding-top:8px;
  border-top:2px solid rgba(8,50,44,.25)}
@media (max-width:1100px){.plakette{display:none}}.fuss__unten{margin-top:42px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 22px;font-size:.86rem}
.fuss__unten>span:first-child{justify-self:start}
.fuss__unten>span:last-child{justify-self:end}
.fuss__credit{justify-self:center;text-align:center;white-space:nowrap;opacity:.85}
.fuss__credit a{color:inherit;border-bottom:1px solid rgba(255,255,255,.28);text-decoration:none;transition:color .2s,border-color .2s}
.fuss__credit a:hover{color:var(--tuerkis-hell);border-color:var(--tuerkis-hell)}
@media(max-width:720px){.fuss__unten{grid-template-columns:1fr;justify-items:center;text-align:center;gap:9px}.fuss__unten>span{justify-self:center}}/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:76ch}.agb-liste{margin:.4em 0 0;padding-left:1.4em}.agb-liste li{margin:.55em 0;padding-left:.25em}.rechtstext h2{font-size:clamp(1.4rem,2.8vw,2rem);margin-top:1.7em}.rechtstext h2:first-of-type{margin-top:.6em}.rechtstext h3{font-size:1.14rem;margin-top:1.5em}.hinweis{background:#FFF8E6;border-radius:var(--r);border-left:6px solid #D9A93B;padding:20px 26px;margin-bottom:34px}.hinweis p:last-child{margin-bottom:0}.hinweis strong{color:#7A5A10}

/* =====================================================================
   EFFEKTE
   Alles rein mit CSS, kein JavaScript. Bewegt werden nur transform,
   opacity und filter, damit nichts ruckelt. Wer im System
   "weniger Bewegung" eingestellt hat, sieht die Seite ruhig.
   ===================================================================== */

/* 1. Beim Scrollen auftauchen, versetzt pro Spalte */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sek .karte,.sek .stimme,.sek .kachel,.preis,.sek .schritte li,.faq details{
      animation:auftauchen linear both;animation-timeline:view();animation-range:entry 0% entry 44%}.raster>*:nth-child(2){animation-range:entry 3% entry 48%}.raster>*:nth-child(3){animation-range:entry 6% entry 52%}/* Ueberschriften ziehen sich beim Reinscrollen zusammen */
    .sek h2{animation:kopfrein linear both;animation-timeline:view();animation-range:entry 0% entry 38%}/* Bilder im Hero-Streifen laufen leicht gegen die Scrollrichtung */
    .buehne__streifen div{animation:parallax linear both;animation-timeline:view();animation-range:exit 0% exit 100%}.buehne__streifen div:nth-child(2){--weg:-11%}.buehne__streifen div:nth-child(3){--weg:-5%}.buehne__streifen div:nth-child(4){--weg:-14%}
  }
}
@keyframes auftauchen{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
@keyframes kopfrein{from{opacity:0;transform:translateY(20px);letter-spacing:.01em}to{opacity:1;transform:none;letter-spacing:-.035em}}
@keyframes parallax{to{transform:translateY(var(--weg,-8%))}}

/* 2. Laufband, das beim Scrollen Fahrt aufnimmt */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* Dauer auch hier aus --dauer,sonst haengt das Tempo an einer festen Zahl
       und passt nicht mehr zur Kopienbreite. */
    .laufband__spur{animation:rollen var(--dauer,38s) linear infinite,schub linear both;
      animation-timeline:auto,scroll();animation-range:normal,0% 100%}
  }
}
@keyframes schub{to{transform:translateX(-3%)}}

/* 3. Markenverlauf, der langsam wandert */
@media (prefers-reduced-motion:no-preference){
  .btn--mark,.btn--gruen,.btn-nav,.karte__nr,.schritte li::before{
    /* background-repeat MUSS hier stehen. Der Verlauf ist mit 220 % groesser als
       der Button,und "wandern" verschiebt background-position. Beim Standardwert
       "repeat" kachelt er dabei: das dunkle Verlaufsende stoesst auf den hellen
       Anfang der naechsten Kachel und erzeugt eine harte senkrechte Kante mitten
       im Button. Sie sieht aus,als waere der Button ausgeschnitten. Da der
       Verlauf ohnehin groesser als die Flaeche ist,deckt er auch ohne
       Wiederholung in jeder Position vollstaendig ab. */
    background-repeat:no-repeat;
    background-size:220% 220%;animation:wandern 9s ease-in-out infinite alternate}
}
@keyframes wandern{from{background-position:0% 50%}to{background-position:100% 50%}}/* 4. Karten heben sich mitsamt Lichtkante */
.karte,.stimme{position:relative;overflow:hidden}.karte::after,.stimme::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 34%);
  opacity:0;transition:opacity var(--schnell)}.karte:hover::after,.stimme:hover::after{opacity:1}.dunkel .karte::after{
  background:linear-gradient(130deg,rgba(79,211,191,.3) 0%,rgba(79,211,191,0) 40%)}/* 5. Bildkacheln: Zoom plus aufziehender Farbschleier */
.kachel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,50,44,.62) 0%,rgba(8,50,44,0) 52%);
  opacity:.5;transition:opacity .45s ease}.kachel:hover::after{opacity:1}.kachel figcaption{transform:translateY(0);transition:transform var(--schnell),background var(--schnell)}.kachel:hover figcaption{transform:translateY(-4px);background:var(--tuerkis-hell)}/* 6. Buttons bekommen einen Lichtstreifen beim Ueberfahren */
.btn{position:relative;overflow:hidden;isolation:isolate}.btn::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.2,.8,.2,1)}.btn:hover::before{left:130%}/* 7. Fakten-Pillen kippen leicht an */
.fakten li{transition:transform var(--schnell),background var(--schnell)}.fakten li:hover{transform:translateY(-3px) rotate(-1.5deg)}

/* 8. Preisplakette atmet */
@media (prefers-reduced-motion:no-preference){
  .plakette{animation:atmen 5.5s ease-in-out infinite}
}
@keyframes atmen{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-12px)}}/* 9. Navigation: Unterstrich waechst aus der Mitte */
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:5px;height:2px;border-radius:2px;
  background:var(--tuerkis);transition:left var(--schnell),right var(--schnell)}.nav a:hover::after{left:16px;right:16px}.nav a.btn-nav::after,.nav a[aria-current="page"]::after{display:none}

/* 10. Verlaufstext schimmert */
@media (prefers-reduced-motion:no-preference){
  .verlauf,.buehne h1 em,.preis__zahl strong,.hero__preis b{
    background-size:220% 100%;animation:schimmer 7s ease-in-out infinite alternate}
}
@keyframes schimmer{from{background-position:0% 0}to{background-position:100% 0}}/* 11. FAQ oeffnet weich */
.faq__inhalt{animation:aufklappen .3s cubic-bezier(.2,.8,.2,1)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* =========== Google-Karte, direkt sichtbar =========== */
/* Nur die Kachel MIT Karte umstylen. Ungescopt hat diese Regel frueher jede
   Inhaltskarte auf --nebel gefaerbt,wodurch weisse Boxen auf hellem Grund
   unsichtbar wurden. */
.karte:has(>iframe){position:relative;border-radius:var(--r-gross);overflow:hidden;
  border:1px solid var(--linie);box-shadow:var(--schatten);background:var(--nebel);margin-top:26px}
.karte iframe,.karte>iframe{display:block;width:100%;height:420px;min-height:420px;border:0;filter:saturate(.92)}
@media (max-width:600px){.karte iframe,.karte>iframe{height:320px;min-height:320px}}
/* Kartenkachel mit Google-Karte: Karte randlos,Button in eigener Leiste darunter */
.karte:has(>iframe){padding:0;gap:0}
.karte:has(>iframe) .karte__btn{margin:20px 26px 26px}
/* In dunklen Sektionen darf die Kartenkachel nicht hell bleiben,sonst schwebt
   ein grauer Kasten im Dunkelgruen. */
.dunkel .karte:has(>iframe){background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
/* Der tuerkise Leuchtschatten der Buttons wirkt auf dunklem Grund wie ein
   Schmutzrand. Dort ein neutraler Schatten. */
.dunkel a.btn--mark,.dunkel a.karte__btn{box-shadow:0 16px 34px -22px rgba(0,0,0,.7)}
.dunkel a.btn--mark:hover,.dunkel a.karte__btn:hover{box-shadow:0 22px 44px -22px rgba(0,0,0,.8)}
.karte__btn{position:static;align-self:flex-start;padding:13px 24px;font-size:.9rem}
@media (max-width:520px){.karte__btn{align-self:stretch;justify-content:center}}

/* =========== Kontaktdaten als saubere Liste =========== */
.kontaktdaten{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:0}
.kontaktdaten li{display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--linie)}
.kontaktdaten li:last-child{border-bottom:0}
.kontaktdaten .kd__label{font-size:.76rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tuerkis-text)}
.kontaktdaten .kd__wert{font-size:1.04rem;line-height:1.45;margin:0}
.kontaktdaten .kd__wert a{font-weight:700;text-underline-offset:3px}
.dunkel .kontaktdaten li{border-color:rgba(255,255,255,.16)}
.dunkel .kontaktdaten .kd__label{color:var(--tuerkis-hell)}
@media (max-width:520px){.kontaktdaten li{grid-template-columns:1fr;gap:3px}}

/* =========== Partnerkarten mit Logo =========== */
a.partner{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;text-decoration:none;color:inherit}
.partner__kopf{background:var(--vl-hell);padding:24px;display:flex;align-items:center;justify-content:center;
  min-height:100px;border-bottom:1px solid var(--linie)}
.partner__kopf img{max-height:36px;width:auto}
.partner__wort{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;color:var(--gruen)}
.partner__wort i{font-style:italic;color:var(--tuerkis-text)}
.partner__text{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.partner__text b{font-size:1.06rem;letter-spacing:-.02em}
.partner__text p{margin:0;color:var(--grau);font-size:.95rem}
.partner__mehr{margin-top:auto;padding-top:14px;font-weight:700;font-size:.9rem;color:var(--tuerkis-text);
  display:inline-flex;align-items:center;gap:7px;transition:gap var(--schnell)}
.partner__mehr::after{content:"\2192"}
a.partner:hover .partner__mehr{gap:13px}
a.partner:hover .partner__kopf{background:var(--tuerkis-blass)}
/* =========== Offizielle Store-Badges =========== */
.stores{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}
.store{display:inline-flex;border-radius:10px;transition:transform var(--schnell),filter var(--schnell)}
.store img{height:47px;width:auto;display:block}
.store:hover{transform:translateY(-3px);filter:brightness(1.12)}
.store:focus-visible{outline:3px solid var(--tuerkis-hell);outline-offset:4px}
@media (max-width:420px){.stores{flex-direction:column;align-items:flex-start}}
.raster--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.raster--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.raster--4{grid-template-columns:1fr}}
/* =========== Aufklappbare Partner-Anleitungen =========== */
.klappliste{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;max-width:none}
@media (max-width:980px){.klappliste{grid-template-columns:1fr;max-width:900px}}
.klapp{background:#fff;border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;
  box-shadow:0 16px 38px -32px rgba(10,61,53,.55);transition:box-shadow var(--schnell)}
.klapp[open]{box-shadow:0 26px 54px -30px rgba(10,61,53,.6)}
.klapp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:22px;
  padding:22px 26px;transition:background var(--schnell)}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary:hover{background:var(--vl-hell)}
.klapp__logo{flex:0 0 auto;width:150px;display:flex;align-items:center}
.klapp__logo img{max-height:32px;width:auto}
.klapp__text{display:flex;flex-direction:column;gap:2px;flex:1}
.klapp__text b{font-size:1.12rem;letter-spacing:-.02em}
.klapp__text span{font-size:.93rem;color:var(--grau)}
.klapp summary::after{content:"";flex:0 0 auto;width:30px;height:30px;border-radius:10px;
  background:var(--tuerkis-blass);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D35' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  background-size:17px;background-position:center;background-repeat:no-repeat;
  transition:transform var(--schnell),background-color var(--schnell)}
.klapp[open] summary::after{transform:rotate(45deg);background-color:var(--tuerkis-hell)}
.klapp__inhalt{padding:4px 26px 30px;border-top:1px solid var(--linie);
  animation:aufklappen .32s cubic-bezier(.2,.8,.2,1)}
.klapp__inhalt>p:first-child{margin:22px 0 20px;color:var(--grau)}
.klapp__inhalt .ablauf li{padding:16px 0}
.klapp__inhalt .stores{margin-top:24px}
@media (max-width:640px){
  .klapp summary{flex-wrap:wrap;gap:14px;padding:20px}
  .klapp__logo{width:auto}
  .klapp__inhalt{padding:4px 20px 26px}
}
/* Klappbox als Karte im Dreier-Raster */
.klappliste .klapp summary{flex-direction:column;align-items:flex-start;gap:14px;padding:26px 24px}
.klappliste .klapp__logo{width:auto;min-height:34px}
.klappliste .klapp summary::after{position:absolute;right:22px;top:26px}
.klappliste .klapp{position:relative}
.klappliste .klapp__text b{font-size:1.16rem}
.klapp__link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;
  font-size:.92rem;color:var(--tuerkis-text);text-underline-offset:4px;transition:gap var(--schnell)}
.klapp__link::after{content:"\2197"}
.klapp__link:hover{gap:13px}
/* Boxen stehen offen: Klappzeichen und Klick-Optik entfallen */
.klappliste .klapp summary{cursor:default}
.klappliste .klapp summary:hover{background:transparent}
.klappliste .klapp summary::after{display:none}
.klappliste .klapp__inhalt{animation:none}
/* Partnerbox ohne Aufklappen, Logo mit eigener Markenflaeche */
.klappliste .klapp__kopf{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:26px 24px}
.klapp__logo{display:flex;align-items:center;justify-content:center;height:56px;width:auto;
  border-radius:10px;overflow:hidden}
.klapp__logo img{height:56px;width:auto;display:block;border-radius:10px}
.klapp__inhalt{padding:0 24px 30px;border-top:1px solid var(--linie)}
.klapp__inhalt>p:first-child{margin:22px 0 20px;color:var(--grau)}
/* Logohoehe gegen die aeltere max-height-Regel durchsetzen */
.klappliste .klapp .klapp__logo img{height:56px;max-height:56px;width:auto}
@media (max-width:640px){.klappliste .klapp .klapp__logo img{height:46px;max-height:46px}}
/* Nur das Logo, mittig im Kopf der Box */
.klappliste .klapp__kopf{align-items:center;justify-content:center;padding:32px 24px 28px}
.klappliste .klapp .klapp__logo{margin-inline:auto}
/* Heller Trennstreifen zwischen zwei dunklen Bloecken */
.laufband--hell{background:var(--tuerkis-hell);color:#08322C}
.laufband--hell span::after{background:rgba(8,50,44,.45)}
/* =========== Probetrainings-Block als abgesetztes Fenster =========== */
.sek.testen{background:var(--nebel);padding-block:clamp(36px,5vw,64px)}
.sek.testen::before{display:none}
.sek.testen .testen__grund{display:none}
.sek.testen>.wrap{max-width:calc(var(--breite) + 48px)}
.testen__fenster{position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-gross);padding:clamp(34px,4.5vw,64px);
  box-shadow:0 44px 90px -46px rgba(10,61,53,.7);border:1px solid rgba(255,255,255,.14)}
.testen__fenster .testen__grund{display:block;position:absolute;inset:0;z-index:-2}
.testen__fenster .testen__grund img{width:100%;height:100%;object-fit:cover}
.testen__fenster::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(112deg,#062A24 20%,rgba(6,42,36,.94) 46%,rgba(10,61,53,.72) 74%,rgba(15,116,102,.55) 100%)}
@media (max-width:560px){.testen__fenster{border-radius:var(--r);padding:26px 20px}}
/* =========== Kleine Bildcollage neben den Schritten =========== */
.mini-collage{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-bottom:34px}
.mini-collage figure{margin:0;border-radius:22px;overflow:hidden;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.75);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mini-collage figure img{width:100%;height:100%;object-fit:cover;display:block}
.mini-collage figure:nth-child(1){aspect-ratio:4/3;transform:rotate(-1.5deg)}
.mini-collage figure:nth-child(2){aspect-ratio:1/1;transform:rotate(2deg) translateY(16px)}
.mini-collage figure:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:3}
.mini-collage__marke{position:absolute;right:-10px;top:-14px;z-index:4;
  width:92px;height:92px;border-radius:50%;background:var(--tuerkis-hell);color:#08322C;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:4px solid rgba(255,255,255,.85);box-shadow:0 16px 34px -14px rgba(0,0,0,.7);transform:rotate(-8deg)}
.mini-collage__marke b{font-size:1.35rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.mini-collage__marke span{font-size:.56rem;font-weight:800;letter-spacing:.12em;margin-top:3px}
@media (prefers-reduced-motion:no-preference){
  .mini-collage__marke{animation:atmen 6s ease-in-out infinite}
}
@media (max-width:560px){.mini-collage__marke{width:74px;height:74px}.mini-collage__marke b{font-size:1.1rem}}
/* Das Grundbild im Fenster muss die Ausblend-Regel der Sektion schlagen */
.sek.testen .testen__fenster .testen__grund{display:block;position:absolute;inset:0;z-index:-2}
.sek.testen .testen__fenster .testen__grund img{width:100%;height:100%;object-fit:cover;opacity:1}
/* =========== Zwei gegenlaeufige Schraegbaender =========== */
.doppelband{position:relative;height:150px;overflow:hidden;background:var(--nebel);
  margin-block:-1px;z-index:2}
.doppelband__band{position:absolute;left:-6%;width:112%;padding:13px 0;overflow:hidden;
  box-shadow:0 12px 30px -14px rgba(10,61,53,.5)}
.doppelband__band--a{top:22px;transform:rotate(-2.4deg);background:var(--tuerkis-hell);color:#08322C}
.doppelband__band--b{top:74px;transform:rotate(1.8deg);background:var(--gruen);color:#fff}
.doppelband__spur{display:flex;width:max-content}
.doppelband span{font-size:clamp(.92rem,1.5vw,1.14rem);font-weight:700;padding-inline:20px;
  display:flex;align-items:center;gap:20px;white-space:nowrap}
.doppelband span::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .doppelband__band--a .doppelband__spur{animation:rollen 30s linear infinite}
  .doppelband__band--b .doppelband__spur{animation:rollen 26s linear infinite reverse}
}
@media (max-width:560px){
  .doppelband{height:126px}
  .doppelband__band--a{top:16px}
  .doppelband__band--b{top:62px}
}
/* Buttons im Probetrainings-Fenster: die Sektion ist hell, das Fenster dunkel.
   Ohne diese Regel erbt der Umriss-Button die dunkle Textfarbe und verschwindet. */
.testen__fenster a.btn--linie{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.testen__fenster a.btn--linie:hover{background:#fff;border-color:#fff;color:var(--gruen)}
.testen__fenster a.btn--mark,.testen__fenster a.btn--gruen{background:var(--tuerkis-hell);color:#08322C;
  box-shadow:0 20px 40px -18px rgba(79,211,191,.75)}
.testen__fenster a.btn--mark:hover,.testen__fenster a.btn--gruen:hover{background:#fff;color:#08322C}
/* =========== Ruhige Merkleiste, ohne Bewegung =========== */
.merkleiste{background:var(--tuerkis-hell);color:#08322C}
.merkleiste__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 0;padding:20px 24px}
.merkleiste span{font-size:clamp(.92rem,1.4vw,1.08rem);font-weight:700;
  padding-inline:clamp(16px,2.4vw,34px);position:relative}
.merkleiste span+span::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:6px;height:6px;border-radius:50%;background:rgba(8,50,44,.4)}
@media (max-width:620px){
  .merkleiste__in{flex-direction:column;gap:10px;padding:20px}
  .merkleiste span+span::before{display:none}
}
/* 72-Stunden-Hinweis unter der Nullpreis-Zahl */
.dauer{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;padding:11px 20px;
  border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  font-size:.95rem;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dauer strong{color:var(--tuerkis-hell);font-weight:800}

/* =========== Video-Hero (nur Variante index-video.html) =========== */
.buehne--video .buehne__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 8%;z-index:0;transform:scale(1.1) translateX(4%);transform-origin:center top}
.buehne--video .plakette{top:auto;bottom:9%;right:5%}
.buehne--video::after{background:linear-gradient(100deg,rgba(8,50,44,.93) 0%,rgba(8,50,44,.72) 32%,rgba(11,78,69,.36) 56%,rgba(15,116,102,.08) 100%),rgba(15,116,102,.20)}
@media (max-width:760px){.buehne--video::after{background:linear-gradient(180deg,rgba(8,50,44,.5) 0%,rgba(8,50,44,.85) 100%),rgba(15,116,102,.3)}}
/* Studio-Seite: dunkles Frauen-Video, Frau steht rechts -> keine Verschiebung, leichterer Verlauf, leichter Gruen-Tint */
.buehne--video-dunkel .buehne__video{object-position:center 22%;transform:scale(1.06);transform-origin:center top}
.buehne--video-dunkel::after{background:linear-gradient(100deg,rgba(8,50,44,.88) 0%,rgba(8,50,44,.56) 40%,rgba(8,50,44,.16) 66%,rgba(8,50,44,0) 100%),rgba(11,78,69,.18)}