/* Selbst gehostete Schriften (04./05.09.2026): vorher kamen Marcellus und Jost von fonts.googleapis.com,
   damit ging bei jedem Aufruf die IP-Adresse an Google. Jetzt liegen die Dateien im Projekt. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   VANIDA Yoga & More — gemeinsames Stylesheet
   Stand 10.08.2026. Entwurfsfassung, etwa 75 Prozent.
   Der Feinschliff passiert beim Aufbau in Wix.
   ============================================================ */

:root{
  --cream:#f7f5ee; --cream-deep:#f1eee3; --beige:#e7e1d3; --sand:#e8e1d7;
  /* Die neutrale Tonleiter, Blendi 31.08.2026. Sie ersetzt die alte
     Salbei-Reihe: dieselben Helligkeitsstufen, aber warm-neutral statt
     gruen. Jeder Wert wurde gegen Creme, Creme-tief, Sand und das
     Ankuendigungsband nachgerechnet, alle Textkontraste steigen dabei.
     Die --sage-Namen bleiben als Alias bestehen, weil sie in rund
     dreissig Seiten als Inline-Style stehen; neue Regeln nehmen --ton. */
  --ton-050:#f4f1ea; --ton-100:#e9e4da; --ton-200:#d8d2c8;
  --ton-400:#a1978a;         /* nur Linien und Unterstriche, nie Text  */
  --ton-600:#6f6558;         /* Kicker und gedaempfter Text, 5,23:1    */
  --ton-neben:#645c50;       /* Nebentext, 6,04:1 auf Creme            */
  --sage-050:var(--ton-050); --sage-100:var(--ton-100); --sage-200:var(--ton-200);
  --sage-400:var(--ton-400); --sage-600:var(--ton-600);
  --ink:#443f38;             /* Fliesstext, 9,56:1 auf Creme           */
  --ink-deep:#37332d;        /* Ueberschriften, 11,50:1 auf Creme      */
  --terra:#9c6144; --terra-deep:#834f36;
  /* Farbentscheidung Vanessa 18.08.2026. Loest Gruen als Flaeche und
     Terrakotta als Aktionsfarbe ab. Alle Kombinationen ueber 4,5:1 geprueft. */
  --taupe-band:#d8d2c8;      /* Ankuendigungsband oben, 6,94:1 mit --ink        */
  --taupe-ruhig:#e8e1d7;     /* ruhige Flaechen, 8,04:1 mit --ink               */
  --taupe-dunkel:#3f3a34;    /* Fusszeile und Faktenband, 11,25:1 mit Weiss     */
  --taupe-hell:#e8e1d7;      /* Schrift auf dunklem Taupe, 8,67:1               */
  --taupe-label:#b3a896;     /* gedaempfte Labels auf dunklem Taupe, 4,80:1     */
  --aubergine:#5c4462;       /* Aktionsfarbe, 8,54:1 mit Weiss                  */
  --aubergine-deep:#4a3650;
  --atem-leer:#ded8cd;       /* Atemkreis leer, Wort darauf 7,94:1              */
  --atem-voll:#c1b8ba;       /* Atemkreis gefuellt, Wort darauf 5,80:1          */
  --atem-ring:#cfc7c4;       /* der mitlaufende Aussenring                      */
  --radius-bild:12px;        /* loest das Bogenmotiv ab, Wert von der Akademie-Seite */
  --level-sanft:#3fa249; --level-mittel:#7c83ce; --level-kraftvoll:#e94e42; --level-kids:#6cc7bc;
  --line:rgba(69,76,57,.16);
  --fd:'Marcellus',Georgia,serif;
  --fb:'Jost','Avenir Next',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:74px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:80px; --s8:96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--fb); font-weight:300; color:var(--ink); background:var(--cream);
  font-size:clamp(1.0625rem,.99rem + .35vw,1.1875rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--fd);font-weight:400;line-height:1.14;color:var(--ink-deep)}
h1{font-size:clamp(2.35rem,1.6rem + 3.1vw,3.85rem);letter-spacing:-.02em}
h2{font-size:clamp(1.85rem,1.35rem + 2.1vw,3rem);letter-spacing:-.015em}
h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem)}
p{max-width:68ch}
::selection{background:var(--sage-200);color:var(--ink-deep)}
:focus-visible{outline:2px solid var(--aubergine);outline-offset:3px}

.wrap{width:min(1240px,90vw);margin-inline:auto}
.narrow{width:min(780px,90vw);margin-inline:auto}
section{padding-block:clamp(var(--s7),6vw + 2rem,var(--s8))}
.bg-sand{background:var(--sand)}
.bg-sage{background:var(--sage-050)}
.bg-deep{background:var(--cream-deep)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s2);z-index:99;background:var(--ink);color:var(--cream);padding:.7rem 1.2rem;border-radius:99px}

.kicker{
  display:inline-flex;align-items:center;gap:.75rem;margin-bottom:var(--s3);
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage-600);font-weight:400;
}

/* ---------- Buttons ----------
   Grundfarbe ist das dunkle Salbeigrün der Marke.
   Terrakotta ist dem Schnupperpaket vorbehalten (.btn--haupt) und markiert
   damit genau eine Handlung. Laut DESIGN.md ist Terrakotta ein Akzent
   unter 5 Prozent der Fläche, kein Standard für jeden Knopf. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:1rem 2.1rem;border-radius:99px;cursor:pointer;
  font-family:var(--fb);font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--aubergine);background:var(--aubergine);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:var(--aubergine-deep);border-color:var(--aubergine-deep);transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(74,54,80,.5)}
/* Seit 18.08.2026 traegt Aubergine jede Hauptaktion. Die fruehere
   Terrakotta-Sonderregel fuer das Schnupperpaket ist damit hinfaellig,
   .btn--haupt bleibt als Klasse bestehen und sieht aus wie .btn. */
.btn--haupt{border-color:var(--aubergine);background:var(--aubergine);color:#fff}
.btn--haupt:hover{background:var(--aubergine-deep);border-color:var(--aubergine-deep);
  box-shadow:0 14px 30px -14px rgba(74,54,80,.5)}
.btn--ghost{background:transparent;color:var(--aubergine);border-color:var(--aubergine)}
.btn--ghost:hover{background:var(--aubergine);border-color:var(--aubergine);color:#fff;box-shadow:none}
.btn--sm{min-height:44px;padding:.7rem 1.5rem;font-size:.72rem}
.textlink{
  display:inline-flex;gap:.5rem;align-items:center;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--sage-400);padding-bottom:.35rem;
  color:var(--sage-600);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.textlink:hover{color:var(--ink-deep);border-color:var(--ink-deep)}
.micro{font-size:.9rem;color:var(--sage-600);margin-top:var(--s2)}

/* ---------- Kopf ---------- */
/* ---------- Eröffnungs-Banderole ----------
   Steht auf jeder Seite ganz oben, scrollt mit weg. Erste von drei Stellen,
   an denen die Neueröffnung genannt wird. */
.banderole{
  background:var(--taupe-band);color:var(--ink-deep);
  border-bottom:1px solid rgba(63,58,52,.16);
  font-size:.82rem;letter-spacing:.04em;
}
.banderole .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.35rem .9rem;padding-block:.6rem;text-align:center;
}
.banderole b{font-weight:500}
.banderole .punkt{
  display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--aubergine);flex:none;align-self:center;
}
.banderole a{
  border-bottom:1px solid currentColor;padding-bottom:1px;
  transition:opacity .3s var(--ease);
}
.banderole a:hover{opacity:.62}

header{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(247,245,238,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--s3)}
.logo{display:block;color:var(--ink-deep)}
.logo svg{width:clamp(118px,13vw,158px);height:auto;display:block}
.logo--foot svg{width:150px;color:var(--sage-100)}
nav ul{display:flex;gap:var(--s4);list-style:none}
nav a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);position:relative;padding-block:.4rem}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .3s var(--ease)}
nav a:hover::after,nav a[aria-current="page"]::after{width:100%}
/* ---------- Aufklappmenü „Über uns" ----------
   Bewusste Abweichung vom Üblichen: Auf Touch klappt hier NICHTS auf.
   Der erste Tipp auf einen Aufklapp-Punkt navigiert auf Touchgeräten oft
   schon, statt zu öffnen — dann ist der Menüpunkt kaputt. Deshalb erscheinen
   die Unterpunkte im Mobilmenü einfach eingerückt untereinander (siehe unten).
   Und „Über uns" hat selbst ein Ziel, sonst wäre der oberste Punkt ein
   toter Klick. */
.hat-unter{position:relative}
.nav-auf{
  background:none;border:0;padding:0 0 0 .3rem;cursor:pointer;color:inherit;
  font:inherit;line-height:1;vertical-align:middle;
}
.nav-auf::before{
  content:"";display:inline-block;width:.42em;height:.42em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);
  transition:transform .25s var(--ease);
}
.hat-unter .unter{
  position:absolute;top:calc(100% + .55rem);left:-.9rem;z-index:60;
  display:flex;flex-direction:column;gap:0;min-width:190px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-bild);
  box-shadow:0 18px 42px -22px rgba(63,58,52,.45);
  padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* visibility bewusst NICHT in der Transition: sie würde erst am Ende
     umschalten, und wenn die Transition nicht läuft (gedrosselter Tab),
     bliebe das Menü unsichtbar. Nur opacity und transform animieren. */
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.hat-unter .unter li{border:0}
.hat-unter .unter a{display:block;padding:.62rem .8rem;border-radius:8px;text-transform:none;
  letter-spacing:.02em;font-size:.9rem}
.hat-unter .unter a::after{display:none}
.hat-unter .unter a:hover{background:var(--taupe-ruhig)}
/* Öffnet per Maus, per Tastatur (focus-within) und per Knopf. Drei Wege,
   damit niemand ausgeschlossen ist. */
/* Der Offen-Zustand hängt am Container, nicht am Knopf. Ein
   Geschwister-Selektor auf den Knopf wäre feiner, aber er greift nicht
   überall gleich zuverlässig — data-offen ist eindeutig. */
.hat-unter:hover .unter,
.hat-unter:focus-within .unter,
.hat-unter[data-offen="true"] .unter{
  opacity:1;visibility:visible;transform:translateY(0);
}
.hat-unter:hover .nav-auf::before,
.hat-unter[data-offen="true"] .nav-auf::before{transform:translateY(-.05em) rotate(225deg)}

.nav-right{display:flex;align-items:center;gap:var(--s2)}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;
  min-height:44px;min-width:44px;align-items:center;justify-content:center}
.burger svg{display:block}

/* ---------- Mobilmenü ----------
   Wird von site.js aus der vorhandenen Navigation gebaut. Liegt unter dem
   Kopf, damit Logo und Schließen-Knopf sichtbar bleiben. */
.mobilmenue{
  position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:45;
  background:var(--cream);border-top:1px solid var(--line);
  padding:var(--s5) clamp(1rem,5vw,2rem) var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);
  overflow-y:auto;overscroll-behavior:contain;
  pointer-events:none;
}
/* Muss stehen, weil die Klassenregel oben sonst das hidden-Attribut
   überstimmt und das geschlossene Menü jeden Fingertipp abfängt. */
.mobilmenue[hidden]{display:none}
/* Bewusst ohne Ein- und Ausblenden. Weder Übergang noch Animation laufen in
   gedrosselten Tabs zuverlässig, und dann stünde das Menü unsichtbar offen.
   Es ist entweder da oder nicht da. Merksatz aus dem Prototyp v2:
   Inhalt nie von einer Animation abhängig machen. */
.mobilmenue.da{pointer-events:auto}
/* gap:0 muss sein, die Liste erbt sonst den Abstand der Kopfnavigation
   (nav ul{gap:var(--s4)}) und die Einträge stehen viel zu weit auseinander. */
.mobilmenue ul{list-style:none;display:flex;flex-direction:column;gap:0}
.mobilmenue li{border-bottom:1px solid var(--line)}
.mobilmenue li a{
  display:block;padding:var(--s3) 0;
  font-family:var(--fd);font-size:1.45rem;color:var(--ink-deep);
}
.mobilmenue li a[aria-current="page"]{color:var(--sage-600)}
/* Im Mobilmenü kein Aufklappen: die Unterpunkte stehen offen und eingerückt.
   Der Pfeilknopf wird im Klon von site.js entfernt, diese Regel ist der Gurt
   dazu, falls er doch einmal mitkommt. */
.mobilmenue .nav-auf{display:none}
.mobilmenue .hat-unter .unter{
  position:static;opacity:1;visibility:visible;transform:none;
  background:none;border:0;box-shadow:none;padding:0;min-width:0;
  border-top:1px solid var(--line);
}
.mobilmenue .hat-unter .unter li{border-bottom:1px solid var(--line)}
.mobilmenue .hat-unter .unter li:last-child{border-bottom:0}
.mobilmenue .hat-unter .unter a{
  padding:var(--s2) 0 var(--s2) var(--s3);border-radius:0;
  font-family:var(--fd);font-size:1.12rem;color:var(--ink);
}
.mobilmenue .hat-unter .unter a:hover{background:none}
.mobilmenue .btn{width:100%}
.mobilmenue .mm-fuss{font-size:.84rem;color:var(--ton-neben);line-height:1.7;margin-top:auto}
body.menue-offen{overflow:hidden}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(var(--s4),2.5vw + .5rem,var(--s6)) clamp(var(--s6),5vw,var(--s7))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--s5),4vw,var(--s7));align-items:center}
/* Bei viel Text schwebt ein zentriertes Querbild in der Mitte der Spalte und
   findet keine Kante, an der es sich festhaelt. Diese Fassung setzt es oben
   buendig zur Ueberschrift und gibt ihm Hochformat, damit es die Textspalte
   traegt statt in ihr zu schwimmen. */
.split--oben{align-items:start}
.split--oben .arch img{aspect-ratio:4/5}
.hero p.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);margin-top:var(--s3);max-width:36ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* ---------- Hero, große Fassung ----------
   Das Bild läuft rechts aus dem Raster heraus bis an den Bildschirmrand und
   steht auf voller Höhe. Die Schrift bekommt ihre eigentliche Größe. Kein Text
   über dem Bild, das bleibt Vorgabe der Kundinnen. */
.hero--gross{padding-bottom:0;position:relative;overflow:hidden}
.hero-raster{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(var(--s4),3vw,var(--s6));align-items:center;
}
.hero--gross h1{
  font-size:clamp(2.55rem,1.45rem + 4.5vw,4.9rem);
  letter-spacing:-.025em;line-height:1.04;text-wrap:balance;
}
.hero--gross p.lead{max-width:34ch;margin-top:var(--s4)}
.hero-bild{
  align-self:stretch;display:flex;
  margin-right:calc((100vw - min(1240px,90vw)) / -2);
}
.hero-bild .arch{width:100%;height:clamp(400px,66vh,650px)}
.hero-bild .arch img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
/* Zweite Nennung der Eröffnung, ruhig unter den Knöpfen */
.hero-meta{
  display:flex;align-items:center;gap:.6rem;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line);
  /* eigener Ton statt --sage-600: der schafft bei dieser Größe nur 4,36:1 */
  font-size:.84rem;letter-spacing:.04em;color:var(--ton-neben);
}
.hero-meta b{color:var(--ink-deep);font-weight:500}
.hero-meta .punkt{
  display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--aubergine);flex:none;
}

/* ---------- Bilder und Platzhalter ---------- */
.arch{border-radius:var(--radius-bild);overflow:hidden}
.arch img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.arch--tall img{aspect-ratio:3/4}
.ph{
  position:relative;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(135deg,var(--sage-100) 0 14px,var(--sage-050) 14px 28px);
  border:1px solid var(--sage-200);color:var(--sage-600);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:var(--s4);
}
.ph span{max-width:26ch;line-height:1.6}
.ph--arch{border-radius:var(--radius-bild);aspect-ratio:3/2}
.ph--tall{border-radius:var(--radius-bild);aspect-ratio:3/4}
.ph--sq{border-radius:var(--radius-bild);aspect-ratio:1/1}

/* ---------- Faktenband ---------- */
.facts{background:var(--taupe-dunkel);color:var(--taupe-hell);padding-block:var(--s3);overflow:hidden}
.facts ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5)}
.facts li{font-size:.82rem;letter-spacing:.08em;white-space:nowrap}

/* ---------- Laufband ----------
   Ein Baustein, zwei Einsätze: Faktenband auf Mobil, Einwände auf allen Größen.
   Die zweite Reihe ist eine Kopie und für Screenreader ausgeblendet, damit der
   Übergang nahtlos ist. Ohne CSS-Animation bleibt es eine schlichte Liste,
   der Inhalt hängt also nicht an der Bewegung. */
.lauf{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lauf-spur{display:flex;width:max-content;animation:laufen var(--tempo,46s) linear infinite}
.lauf--retour .lauf-spur{animation-direction:reverse}
.lauf:hover .lauf-spur{animation-play-state:paused}
.lauf-reihe{display:flex;flex:none;list-style:none;align-items:center}
@keyframes laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Einwände ---------- */
.quotes{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block:var(--s5);list-style:none}
.quotes li{
  background:var(--cream);border:1px solid var(--line);
  border-radius:99px;padding:.65rem 1.35rem;font-size:1rem;color:var(--ink);
}
/* Einwände als Laufband: zwei Reihen, gegenläufig. Aus zwölf Sätzen auf einem
   Haufen wird eine Textur aus Stimmen, die man nicht abarbeiten muss. */
.einwaende{margin-block:var(--s5)}
.einwaende .lauf + .lauf{margin-top:var(--s2)}
.einwaende .lauf-reihe li{
  background:var(--cream);border:1px solid var(--line);border-radius:99px;
  padding:.65rem 1.35rem;font-size:clamp(.95rem,.92rem + .15vw,1.05rem);
  color:var(--ink);white-space:nowrap;margin-right:var(--s2);
}
.resolve{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);font-family:var(--fd);
  color:var(--ink-deep);margin-block:var(--s5) var(--s3);line-height:1.35}

/* ---------- Karten ---------- */
.cols{display:grid;gap:var(--s5);margin-top:var(--s6)}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:1rem}

/* ---------- Manifest ----------
   Vier Haltungen statt vier gleicher Kästchen. Die Aussage steht in der
   Displayschrift auf voller Größe, die Erklärung tritt daneben zurück.
   Feine Linien statt Rahmen, viel Luft: die Stelle wird zur Zäsur im Scrollen. */
.manifest{list-style:none;margin-top:clamp(var(--s5),4vw,var(--s7));border-top:1px solid var(--line)}
.manifest > li{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(var(--s3),3vw,var(--s6));
  padding-block:clamp(var(--s4),3.2vw,var(--s6));
  border-bottom:1px solid var(--line);align-items:start;
}
.m-satz{
  font-family:var(--fd);font-weight:400;
  font-size:clamp(1.45rem,1.05rem + 1.7vw,2.45rem);
  line-height:1.12;letter-spacing:-.018em;color:var(--ink-deep);
  text-wrap:balance;max-width:16ch;
}
.m-text{font-size:1rem;max-width:54ch;color:rgba(69,76,57,.86);padding-top:.35rem}
.step .num{
  display:grid;place-items:center;width:44px;height:44px;border-radius:99px;
  background:var(--sage-100);color:var(--ink-deep);font-family:var(--fd);
  font-size:1.1rem;margin-bottom:var(--s3);
}

/* ---------- Kurse und Intensität ---------- */
.courses{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block:var(--s5);list-style:none}
.courses li{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--sage-200);border-radius:99px;
  padding:.6rem 1.3rem;font-size:.95rem;background:var(--sage-050);
}
.dot{width:10px;height:10px;border-radius:99px;flex:none}
.dot--sanft{background:var(--level-sanft)}
.dot--mittel{background:var(--level-mittel)}
.dot--kraftvoll{background:var(--level-kraftvoll)}
.dot--kids{background:var(--level-kids)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);list-style:none;font-size:.9rem;color:var(--sage-600)}
.legend li{display:inline-flex;align-items:center;gap:.5rem}

/* ---------- Preise ---------- */
.price{width:100%;border-collapse:collapse;margin-block:var(--s5);font-size:1rem}
.price th{text-align:left;font-weight:400;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-600);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.price td{padding:var(--s3) 0;border-bottom:1px solid var(--line);vertical-align:top}
.price tr.hi td{background:var(--sage-100);font-weight:500}
.price tr.hi td:first-child{padding-left:var(--s3);border-radius:8px 0 0 8px}
.price tr.hi td:last-child{padding-right:var(--s3);border-radius:0 8px 8px 0}
.price td:last-child{text-align:right;white-space:nowrap}
.price .sub{display:block;font-size:.88rem;font-weight:300;color:var(--sage-600)}

/* ---------- Abschluss ---------- */
.final{text-align:center}
.final p{margin-inline:auto}
.reassure{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2) var(--s4);margin-block:var(--s5) var(--s4);font-size:.95rem;color:var(--sage-600)}
.reassure li::before{content:"✓  ";color:var(--sage-400)}

/* ---------- Sponsoren ---------- */
.sponsors{padding-block:clamp(var(--s6),4vw + 1rem,var(--s7));background:var(--cream-deep);border-top:1px solid var(--line)}
.sp-title{text-align:center;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-600);margin-bottom:var(--s5)}
.sp-row{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3) var(--s5)}
.sp{
  display:grid;place-items:center;text-align:center;width:150px;height:64px;padding:var(--s2);
  border:1px dashed var(--sage-200);border-radius:8px;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-400);
  filter:grayscale(1);opacity:.75;transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.sp:hover{filter:none;opacity:1}
.sp--main{width:210px;height:88px;border-color:var(--sage-400);color:var(--sage-600);filter:none;opacity:1;font-size:.72rem}

/* ---------- Einwand-Seite: Frage und Antwort ---------- */
.jump{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin-block:var(--s5)}
.jump a{
  display:inline-block;background:var(--cream);border:1px solid var(--line);
  border-radius:99px;padding:.55rem 1.15rem;font-size:.95rem;color:var(--ink);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.jump a:hover{background:var(--sage-100);border-color:var(--sage-400)}

.qa{border-top:1px solid var(--line);padding-block:clamp(var(--s5),4vw,var(--s6));scroll-margin-top:calc(var(--nav-h) + 16px)}
.qa:first-of-type{border-top:0}
.qa h2{
  font-size:clamp(1.35rem,1.15rem + 1vw,1.95rem);
  max-width:22ch;line-height:1.25;
}
.qa .also{
  display:block;font-family:var(--fb);font-size:1rem;color:var(--sage-600);
  margin-top:var(--s2);letter-spacing:0;
}
/* FAQ als natives Accordion (14.08.): details/summary, tastaturfest,
   ohne JS voll funktionsfähig. Nur die Antwort blendet weich ein. */
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);cursor:pointer;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover h2{color:var(--sage-600)}
.qa summary h2{transition:color .3s var(--ease)}
.q-zeichen{
  flex:none;width:34px;height:34px;position:relative;margin-top:.35rem;
  border:1px solid var(--sage-400);border-radius:99px;
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.q-zeichen::before,.q-zeichen::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
  width:12px;height:1.5px;transform:translate(-50%,-50%);
}
.q-zeichen::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] .q-zeichen{transform:rotate(45deg);background:var(--sage-100);border-color:var(--sage-600)}
.qa .antwort{margin-top:var(--s3)}
.qa[open] .antwort{animation:antwortAuf .5s var(--ease)}
@keyframes antwortAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qa .antwort p + p{margin-top:var(--s3)}
.qa .tipp{
  margin-top:var(--s3);padding:var(--s3) var(--s4);
  background:var(--sage-050);border-left:3px solid var(--sage-400);border-radius:0 10px 10px 0;
  font-size:1rem;
}
.qa .tipp b{font-weight:500;color:var(--ink-deep)}

/* ---------- Kursseite ---------- */
/* Kursdetail: Bild links stehend, Kopf und Text rechts.
   Vorher lief das Foto als breites Band ueber beide Spalten — bei 3:4-Fotos
   in einem 1200:420-Rahmen blieben 26 Prozent der Bildhoehe uebrig, man sah
   Ruecken und Arme statt der Haltung. Jetzt behaelt das Bild sein Format. */
.kurs{
  border-top:1px solid var(--line);
  padding-block:clamp(var(--s5),4vw,var(--s6));
  scroll-margin-top:calc(var(--nav-h) + 16px);
  display:grid;
  grid-template-columns:minmax(0,210px) minmax(0,1fr);
  grid-template-areas:"bild kopf" "bild text";
  gap:var(--s2) clamp(var(--s4),3vw,var(--s5));align-items:start;
}
.kurs > div:nth-of-type(2){grid-area:kopf}
.kurs > .text{grid-area:text;margin-top:var(--s2)}
@media (max-width:720px){
  /* Am Handy nimmt ein stehendes Bild ueber die volle Breite zu viel Hoehe.
     Es bleibt deshalb schmal neben dem Titel, der Text rueckt darunter. */
  .kurs{grid-template-columns:112px minmax(0,1fr);
        grid-template-areas:"bild kopf" "text text"}
  .kurs > .text{margin-top:var(--s3)}
}
.kurs:first-of-type{border-top:0}
.kurs h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem)}
.kurs .meta{list-style:none;display:grid;gap:.5rem;margin-top:var(--s3);font-size:.95rem;color:var(--sage-600)}
.kurs .meta li{display:flex;gap:.6rem;align-items:baseline}
.kurs .meta b{font-weight:400;color:var(--ink);min-width:5.5rem;flex:none}
.kurs .text p + p{margin-top:var(--s3)}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s3);
  border:1px solid var(--sage-200);border-radius:99px;padding:.35rem 1rem;
  font-size:.85rem;background:var(--sage-050);color:var(--ink);
}

/* ---------- Stundenplan ---------- */
.tag{margin-top:var(--s5)}
.tag h3{
  font-family:var(--fb);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage-600);font-weight:400;padding-bottom:var(--s2);border-bottom:1px solid var(--line);
}
.slots{list-style:none;display:grid;gap:0}
.slot{
  display:grid;grid-template-columns:6.5rem 1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.slot .zeit{font-family:var(--fd);font-size:1.15rem;color:var(--ink-deep);white-space:nowrap}
.slot .zeit small{display:block;font-family:var(--fb);font-size:.82rem;color:var(--sage-600)}
.slot .name{display:flex;align-items:center;gap:.7rem;font-size:1.05rem}
.slot .wer{font-size:.95rem;color:var(--sage-600);text-align:right;white-space:nowrap}
.leer{padding:var(--s3) 0;color:var(--sage-400);font-size:.95rem;border-bottom:1px solid var(--line)}

.widgetbox{margin-top:var(--s6);border:1px solid var(--sage-200);border-radius:14px;background:#fff;padding:var(--s3)}
.widgetbox .kopf{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-600);padding:var(--s2) var(--s2) var(--s3)}

@media (max-width:860px){
  /* .kurs stand hier frueher auf einer Spalte. Das kollidierte mit dem neuen
     Zeilenlayout: die Regel kommt spaeter in der Datei und hat die 720er
     Fassung ueberschrieben, das Bild schrumpfte auf 27 px. Das Zeilenlayout
     traegt bis 720 px selbst, darunter greift die eigene Media-Query. */
  .slot{grid-template-columns:5.5rem 1fr;row-gap:.3rem}
  .slot .wer{grid-column:2;text-align:left}
}


/* ---------- Kontaktformular ---------- */
.kform{margin-top:var(--s5);max-width:34rem}
.kform .feld{margin-bottom:var(--s3)}
.kform label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-600);margin-bottom:.5rem}
.kform input,.kform textarea{
  width:100%;font-family:var(--fb);font-size:1rem;font-weight:300;color:var(--ink);
  background:var(--cream);border:1px solid var(--sage-200);border-radius:10px;
  padding:.85rem 1rem;min-height:52px;
}
.kform textarea{min-height:9rem;resize:vertical;line-height:1.55}
.kform input:focus,.kform textarea:focus{outline:none;border-color:var(--sage-400);background:#fff}
.kform .btn{margin-top:var(--s2)}


/* ---------- Kursbanner und Seitenband ---------- */
.kursbild{grid-area:bild;border-radius:var(--radius-bild);overflow:hidden}
/* height:auto ist Pflicht, sonst schlaegt ein height-Attribut die aspect-ratio. */
.kursbild img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;height:auto}
.bandbild{border-radius:14px;overflow:hidden;margin-top:var(--s5)}
.bandbild img{width:100%;aspect-ratio:1084/380;object-fit:cover;display:block}
@media (max-width:720px){
  .bandbild img{aspect-ratio:4/3}
}


/* ---------- Kurse nach Intensität gruppiert: vier Spalten ---------- */
.kgruppen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  margin-block:var(--s5);align-items:start;
}
.kgruppe{border-top:3px solid var(--gcol,var(--line));padding-top:var(--s3)}
.kgruppe--sanft{--gcol:var(--level-sanft)}
.kgruppe--mittel{--gcol:var(--level-mittel)}
.kgruppe--kraftvoll{--gcol:var(--level-kraftvoll)}
.kgruppe--kids{--gcol:var(--level-kids)}
.kg-titel{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--fb);font-weight:400;font-size:.78rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  margin-bottom:var(--s2);
}
.kg-titel .dot{width:12px;height:12px}
.kgruppe .courses{display:block;margin:0}
.kgruppe .courses li{
  display:block;border:0;border-radius:0;background:none;padding:0;
}
.kgruppe .courses a{
  display:block;padding:.65rem 0;font-size:.95rem;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),color .3s var(--ease);
}
.kgruppe .courses li:last-child a{border-bottom:0}
.kgruppe .courses a:hover{padding-left:.45rem;color:var(--aubergine)}
@media (max-width:900px){
  .kgruppen{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
}

/* ---------- Orbit mit Logo in der Mitte ---------- */
.orbit .mitte{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.orbit .mitte svg{width:78px;height:auto;color:var(--ink-deep)}

/* ---------- Offene Punkte im Entwurf ---------- */
.open{
  display:inline-block;border:1px dashed var(--aubergine);color:var(--aubergine-deep);
  background:rgba(92,68,98,.07);border-radius:6px;padding:.15rem .6rem;
  font-size:.85rem;letter-spacing:.02em;
}

/* ---------- Fuß ---------- */
footer{background:var(--taupe-dunkel);color:var(--taupe-hell);padding-block:var(--s7) var(--s5);font-size:.95rem}
footer h4{font-family:var(--fb);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--taupe-label);margin-bottom:var(--s3);font-weight:400}
footer ul{list-style:none;display:grid;gap:.6rem}
footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:var(--s5)}
.foot-bottom{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;color:var(--taupe-label);display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2) var(--s3);align-items:center}
.foot-bottom .foot-verein{justify-self:start}
.foot-bottom .foot-links{justify-self:end;white-space:nowrap}
/* KIT-Zeile (06.09.): am Schirm mittig zwischen Verein und Rechtslinks, am Handy als eigene Zeile dazwischen, alles zentriert. */
.foot-bottom .foot-kit{justify-self:center;margin:0;padding:0;width:auto;text-align:center;font-size:.72rem;color:rgba(232,225,215,.45)}
@media (max-width:720px){
  .foot-bottom{grid-template-columns:1fr;text-align:center;gap:var(--s2)}
  .foot-bottom .foot-verein,.foot-bottom .foot-links{justify-self:center;white-space:normal}
}

/* ============================================================
   Bewegung, Prototyp v2. Grundgedanke: Die Seite atmet.
   Ruhige Dauer (500 bis 700 ms), ease-out-quint, kein Federn.
   Jede Bewegung hier ist in Wix nachbaubar, siehe
   WIX-UMSETZUNG-motion.md.
   ============================================================ */

/* ---------- Einblendungen ----------
   Grundzustand: sichtbar. Das Skript versteckt beim Start nur, was unterhalb
   des Bildschirms liegt (.wart), und deckt es beim Näherkommen wieder auf.
   Fällt irgendetwas aus, ist die Seite einfach komplett da. */
.rv{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.wart{opacity:0;transform:translateY(16px)}

/* ---------- Lese-Linie am oberen Rand (Idee 13) ---------- */
.leselinie{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  background:var(--sage-400);transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none;
}

/* ---------- Überschrift Wort für Wort (Idee 07) ---------- */
.js [data-words] .wort{
  display:inline-block;opacity:0;transform:translateY(.45em);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.js [data-words].wach .wort{opacity:1;transform:none}

/* ---------- Lebendiges Bild, ein sehr langsamer Atemzug (Idee 02) ---------- */
@keyframes atmenzoom{
  from{transform:scale(1.02)} to{transform:scale(1.13) translate3d(-2.2%,-1.6%,0)}
}
/* Idee 02, nachgeschärft 14.08.: die alte Fassung (4,5 % über 26 s) war unsichtbar.
   Jetzt 11 % Drift über 22 s, alternate statt Sprung. */
.kenburns img{animation:atmenzoom 22s ease-in-out infinite alternate;transform-origin:62% 38%;will-change:transform}

/* ---------- Bilder öffnen sich wie ein Vorhang (Idee 09) ---------- */
.vorhang{transition:clip-path .8s var(--ease)}
.vorhang.wart{clip-path:inset(0 100% 0 0)}

/* ---------- Kreisender Leitspruch um das Grad-Zeichen (Idee 20) ---------- */
.orbit{position:relative;width:170px;height:170px;margin-inline:auto}
.orbit > svg{width:100%;height:100%;overflow:visible;animation:orbitdreh 46s linear infinite}
.orbit text{font-family:var(--fb);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;fill:var(--sage-600)}
.orbit::after{
  content:"";position:absolute;inset:38px;border:1px solid var(--sage-400);
  border-radius:99px;
}
@keyframes orbitdreh{to{transform:rotate(360deg)}}

/* ---------- Eine Minute Ruhe: der Atem-Kreis (Idee 22) ---------- */
.atem{text-align:center}
.atem-buehne{position:relative;width:min(240px,60vw);aspect-ratio:1;margin:var(--s5) auto var(--s4)}
/* Der Atemkreis läuft in der Taupe-Aubergine-Palette: leer ein ruhiges
   Taupe, gefüllt ein aufgehelltes Aubergine (32 Prozent auf Creme). So
   erzählt der Farbwechsel dasselbe wie die Größe — der Kreis füllt sich.
   Das Wort in der Mitte steht bei 7,94:1 auf dem leeren und 5,80:1 auf
   dem vollen Kreis, hält also in beiden Phasen. */
.atem-kreis{
  position:absolute;inset:0;border-radius:50%;cursor:pointer;
  background:var(--atem-leer);border:1px solid var(--atem-ring);
  transform:scale(.72);
  transition:transform 4s cubic-bezier(.37,0,.63,1),background 4s ease;
}
.atem-kreis::after{
  content:"";position:absolute;inset:-14%;border-radius:50%;
  border:1px solid var(--atem-ring);opacity:.7;
}
.atem-kreis.ein{transform:scale(1);background:var(--atem-voll)}
.atem-kreis.halten{transform:scale(1);background:var(--atem-voll);transition-duration:.6s}
.atem-kreis.aus{transform:scale(.72);background:var(--atem-leer);transition-duration:6s}
.atem-kreis.still{transition:none}
.atem-wort{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--fd);font-size:1.25rem;color:var(--taupe-dunkel);pointer-events:none;
}
.atem .micro{max-width:34ch;margin-inline:auto}

/* ---------- Mobile Buchungsleiste (Idee 29) ---------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  padding:10px clamp(14px,4vw,24px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,245,238,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.mcta.da{transform:none}
.mcta .btn{width:100%}
@media (max-width:720px){.mcta{display:block}}

/* ---------- Team-Porträts, einheitlich behandelt ---------- */
.arch--team{position:relative}
.arch--team img{
  aspect-ratio:4/5;filter:saturate(.82) sepia(.08) brightness(1.02);
  transition:transform 5s var(--ease),filter .8s var(--ease);
}
.arch--team:hover img{transform:scale(1.035);filter:saturate(.95) sepia(.04) brightness(1.03)}
.arch--team::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,transparent 62%,rgba(69,76,57,.16));
  mix-blend-mode:multiply;
}
.mono-ph{
  display:grid;place-items:center;aspect-ratio:4/5;
  border-radius:var(--radius-bild);
  background:linear-gradient(170deg,var(--sage-100),var(--sand));
  border:1px solid var(--sage-200);
}
.mono-ph b{
  font-family:var(--fd);font-weight:400;font-size:clamp(2.6rem,6vw,4rem);
  color:var(--sage-600);letter-spacing:.06em;
}
.mono-ph span{
  position:absolute;bottom:14px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage-600);
}
.mono-ph{position:relative}

/* ---------- Kurs-Chips: am Handy seitlich blättern (Idee 14) ---------- */


/* ============================================================
   Nachtschicht 13./14.08. — Wünsche der Damen aus der Ideenwerkstatt
   vom 23.07. (Nr. 2, 5, 10, 14, 15, 16, 27, 28, sinngemäß 3/30).
   Grundzustand ist immer sichtbar, kein Inhalt hängt an JS.
   Wix-Übersetzung je Baustein in WIX-UMSETZUNG-motion.md.
   ============================================================ */

/* ---------- Idee 05 · Begrüßung je nach Tageszeit, mit Kurs-Tipp ---------- */
.gruss{font-size:1rem;color:var(--ton-neben);margin-bottom:.35rem}
.gruss .g-icon{margin-right:.45rem}
.g-tipp{font-size:.88rem;color:var(--ton-neben);margin-bottom:var(--s3);max-width:52ch}
.g-tipp b{font-weight:500;color:var(--ink-deep)}
.g-tipp a{border-bottom:1px solid var(--sage-400);white-space:nowrap}
.g-tipp a:hover{border-color:var(--ink-deep);color:var(--ink-deep)}

/* ---------- Idee 14 · Kursgalerie zum seitlichen Stöbern ---------- */
.kg-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.kg-pfeile{display:flex;gap:var(--s1);flex:none}
.kg-pfeile button{
  width:46px;height:46px;border-radius:99px;cursor:pointer;
  border:1px solid var(--ink);background:none;color:var(--ink);
  font-size:1.05rem;display:grid;place-items:center;
  transition:background .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease);
}
.kg-pfeile button:hover{background:var(--ink);color:var(--cream)}
.kg-pfeile button[disabled]{opacity:.3;pointer-events:none}
.kgalerie{
  display:flex;gap:clamp(var(--s3),2.5vw,var(--s4));
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:var(--s5);padding-bottom:var(--s3);
  margin-right:calc((100vw - min(1240px,90vw)) / -2);
  padding-right:calc((100vw - min(1240px,90vw)) / 2);
  scrollbar-width:none;
}
.kgalerie::-webkit-scrollbar{display:none}
.kkarte{flex:0 0 min(300px,74vw);scroll-snap-align:start}
/* Blendi 16.08. (#17): Fotoleiste statt der halbrunden Bilder —
   die Galerie-Karten sind jetzt gerade, der Bogen bleibt den großen
   Einzelbildern vorbehalten. */
.kkarte .kbild{
  border-radius:14px;
  overflow:hidden;aspect-ratio:3/4;
}
.kkarte .kbild img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) sepia(.05);
  transition:transform 4s var(--ease),filter .8s var(--ease);
}
.kkarte:hover .kbild img{transform:scale(1.05);filter:saturate(.95) sepia(.02)}
.kkarte .kbild.ph{aspect-ratio:3/4;height:auto}
.kkarte h3{margin-top:var(--s3);font-size:1.3rem}
.kkarte .kmeta{
  display:flex;align-items:center;gap:.55rem;margin-top:.45rem;
  font-size:.85rem;color:var(--ton-neben);
}
.kkarte .kmeta .dot{flex:none}
.kg-hinweis{display:none;color:var(--ton-neben)}

/* ---------- Idee 15 · Zahlen, die etwas sagen ---------- */
.zahlen-band{display:flex;flex-wrap:wrap;gap:var(--s4) clamp(var(--s5),5vw,var(--s7));margin-top:var(--s5)}
.zb{display:flex;flex-direction:column}
.zb-zahl{
  font-family:var(--fd);font-size:clamp(2.1rem,1.7rem + 1.7vw,3.2rem);
  line-height:1;color:var(--ink-deep);font-variant-numeric:tabular-nums;
}
.zb-label{font-size:.85rem;color:var(--ton-neben);margin-top:.4rem}

/* Idee 10 (Lotus im Orbit) war eingebaut, auf Blendis Wunsch am 14.08.
   wieder auf die VANIDA-Wortmarke zurückgestellt. */

/* ---------- Ideen 03/30 sinngemäß · Blütenblätter nach der Atemübung ---------- */
.blattregen{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:50%}
.blattregen .bfall{
  position:absolute;top:-12%;
  animation:blattFallen var(--d,6.5s) linear var(--v,0s) forwards;
  opacity:0;color:var(--sage-400);
}
.blattregen .bfall svg{
  display:block;width:var(--g,16px);height:auto;
  animation:blattWiegen 2.4s ease-in-out infinite alternate;
}
@keyframes blattFallen{
  0%{transform:translateY(0) rotate(var(--r0,-10deg))}
  6%{opacity:.6}
  85%{opacity:.45}
  100%{transform:translateY(125%) rotate(var(--r1,50deg));opacity:0}
}
@keyframes blattWiegen{from{transform:translateX(-9px) rotate(-7deg)}to{transform:translateX(9px) rotate(7deg)}}

/* ---------- Idee 27 · Impuls des Tages ---------- */
.impuls{max-width:36rem;margin-inline:auto;text-align:center;padding-block:var(--s3)}
.impuls .i-label{
  display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ton-neben);margin-bottom:var(--s3);
}
.impuls .i-text{
  font-family:var(--fd);font-size:clamp(1.35rem,1.15rem + 1vw,1.9rem);
  line-height:1.32;color:var(--ink-deep);text-wrap:balance;margin-inline:auto;
}
.impuls .micro{margin-top:var(--s3)}

/* ---------- Blog-Übersicht (14.08.) ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4);margin-top:var(--s5)}
.bkarte .bbild{border-radius:14px;overflow:hidden;aspect-ratio:3/2}
.bkarte .bbild img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) sepia(.05)}
.bkarte--plan .bbild img{filter:saturate(.45) sepia(.08) brightness(1.03)}
.bmonat{
  display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ton-neben);margin-top:var(--s3);
}
.bkarte h3{font-size:1.15rem;line-height:1.3;margin-top:.4rem;max-width:30ch}
.bkarte p{font-size:.95rem;color:rgba(69,76,57,.86);margin-top:.45rem;max-width:36ch}
@media (max-width:1000px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.blog-grid{grid-template-columns:1fr;gap:var(--s5)}}

/* ---------- Idee 28 · Ein Blick zu uns (Instagram) ---------- */
.insta-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5)}
.insta-k{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;display:block}
.insta-k img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) sepia(.05);transition:transform 3.2s var(--ease)}
.insta-k:hover img{transform:scale(1.06)}
.insta-k .insta-lage{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(56,62,47,.45);color:var(--cream);
  font-size:.85rem;letter-spacing:.12em;
  opacity:0;transition:opacity .35s var(--ease);
}
.insta-k:hover .insta-lage,.insta-k:focus-visible .insta-lage{opacity:1}

/* ---------- Eröffnungs-Einladung (Popup zur Feier am 10.10.) ----------
   Demo: erscheint nur mit ?feier=1 in der Adresse. Live-Schaltung erst
   nach Blendis Freigabe (Schalter FEIER_LIVE in site.js).
   Einmal pro Besuch, schließbar mit X, Escape und Klick daneben. */
.feier-schleier{
  position:fixed;inset:0;z-index:90;
  background:rgba(56,62,47,.38);
  display:grid;place-items:center;padding:var(--s3);
}
.feier-karte{
  position:relative;background:var(--cream);color:var(--ink);
  border-radius:var(--radius-bild);
  max-width:26rem;width:100%;text-align:center;
  padding:clamp(var(--s6),8vw,var(--s7)) var(--s5) var(--s5);
  box-shadow:0 30px 80px -30px rgba(56,62,47,.5);
}
.feier-karte .kicker{justify-content:center}
.feier-karte h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem)}
.feier-datum{
  font-family:var(--fd);font-size:clamp(2.2rem,1.8rem + 2vw,3rem);
  color:var(--ink-deep);line-height:1.1;margin-top:var(--s2);
}
.feier-karte ul{
  list-style:none;margin-top:var(--s3);font-size:.95rem;line-height:2;
}
.feier-karte .btn{margin-top:var(--s4);width:100%}
.feier-karte .feier-neben{display:block;margin-top:var(--s2);font-size:.85rem;color:var(--ton-neben)}
.feier-karte .feier-neben a{border-bottom:1px solid var(--sage-400)}
.feier-zu{
  position:absolute;top:14px;right:14px;width:40px;height:40px;
  border:1px solid var(--line);border-radius:99px;background:var(--cream);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:1rem;
}
.feier-zu:hover{background:var(--sage-050)}
body.feier-offen{overflow:hidden}
/* Flyer-Fassung (04.09.): Bild links, Text rechts, am Handy untereinander mit
   dem Flyer als Kopf. Die Karte darf breiter werden als die Textkarte. */
.feier-karte--flyer{max-width:56rem;padding:0;text-align:left;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr)}
.feier-karte--flyer .feier-flyer{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1414/2000}
.feier-karte--flyer .feier-text{padding:clamp(var(--s5),5vw,var(--s7)) var(--s5) var(--s5);align-self:center}
.feier-karte--flyer .kicker{justify-content:flex-start}
.feier-karte--flyer .feier-datum{font-size:clamp(1.5rem,1.1rem + 1.3vw,2rem);white-space:nowrap}
.feier-karte--flyer .feier-zeile{margin-top:var(--s2);color:var(--ton-neben)}
.feier-karte--flyer .feier-zu{background:rgba(247,245,238,.92)}
/* Countdown im Popup (10.09.): vier ruhige Kacheln, Ziffern in der Serifen-
   schrift, tabellarisch, damit nichts springt. Wechselnde Stellen rutschen
   kurz von unten nach. */
.feier-count{display:flex;align-items:stretch;gap:.35rem;margin-top:var(--s3)}
.fc-box{flex:1 1 0;min-width:0;text-align:center;background:var(--cream-deep);border:1px solid var(--line);
  border-radius:calc(var(--radius-bild) * .5);padding:.55rem .25rem .5rem}
.fc-n{display:block;font-family:var(--fd);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);line-height:1;
  color:var(--ink-deep);font-variant-numeric:tabular-nums;overflow:hidden}
.fc-n.wechsel{animation:fcTick .45s var(--ease)}
@keyframes fcTick{from{transform:translateY(.45em);opacity:0}to{transform:none;opacity:1}}
.fc-l{display:block;margin-top:.35rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ton-neben)}
.fc-sep{align-self:center;font-family:var(--fd);font-size:1.4rem;color:var(--taupe-label);padding-bottom:1rem}
.fc-los{display:block;margin-top:var(--s3);font-family:var(--fd);font-size:1.25rem;color:var(--aubergine)}
@media (prefers-reduced-motion:reduce){.fc-n.wechsel{animation:none}}
@media (max-width:640px){
  .feier-schleier{align-items:end;padding:0}
  /* Am Handy (06.09.): der Flyer komplett, nicht angeschnitten. Er sitzt als
     ganzes Bild auf dunklem Grund (seine eigene Farbe), darunter nur noch
     Datum und Knopf. Was auf dem Flyer steht, wird nicht wiederholt. */
  .feier-karte--flyer{grid-template-columns:1fr;max-height:94vh;overflow:auto;border-radius:var(--radius-bild) var(--radius-bild) 0 0}
  .feier-karte--flyer .feier-flyer{aspect-ratio:auto;width:100%;height:auto;max-height:64vh;object-fit:contain;object-position:center;background:#2B2B2B}
  .feier-karte--flyer .feier-text{padding:var(--s3) var(--s4) var(--s4)}
  .feier-karte--flyer .kicker,.feier-karte--flyer .feier-zeile,.feier-karte--flyer h2{display:none}
  .feier-karte--flyer .feier-datum{font-size:1.15rem;margin:0 0 var(--s2)}
  .feier-karte--flyer .feier-count{margin:0 0 var(--s3);gap:.3rem}
  .feier-karte--flyer .fc-box{padding:.45rem .2rem .4rem}
  .feier-karte--flyer .fc-n{font-size:1.35rem}
  .feier-karte--flyer .fc-sep{display:none}
  .feier-karte--flyer .feier-neben{display:block;margin-top:var(--s2)}
}
.widgetbox--woche{padding:var(--s3) var(--s2)}
/* Lasche für die Einladung, links an den Rand geklebt, senkrechte Schrift. */
.feier-lasche{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:80;
  writing-mode:vertical-rl;
  font:inherit;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--aubergine);color:#fff;border:0;cursor:pointer;
  padding:.95rem .6rem;border-radius:0 10px 10px 0;
  box-shadow:0 6px 18px rgba(20,18,15,.25);
  transition:background .25s var(--ease),padding .25s var(--ease);
}
.feier-lasche span{display:block;transform:rotate(180deg)}
.feier-lasche:hover{background:#4a3650;padding-left:.8rem}
.feier-lasche:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
/* Beim Scrollen tritt die Lasche zurück, damit sie den Text nicht verdeckt. */
.feier-lasche{transition:background .25s var(--ease),padding .25s var(--ease),opacity .3s var(--ease)}
.feier-lasche.scrollt{opacity:.3}
/* Am Handy (06.09.) keine senkrechte Lasche am Rand, die stand im Text. Stattdessen
   eine kleine Pille rechts unten, über der Buchungsleiste, sobald die da ist. */
@media (max-width:640px){
  .feier-lasche{left:auto;right:12px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none;
    writing-mode:horizontal-tb;font-size:.62rem;padding:.6rem .9rem;border-radius:99px}
  .feier-lasche span{transform:none}
  .feier-lasche:hover{padding-left:.9rem}
  .mcta.da ~ .feier-lasche{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ---------- Weniger Bewegung, volle Ruhe ---------- */
@media (prefers-reduced-motion:reduce){
  .rv,.rv.wart,.js [data-words] .wort{opacity:1;transform:none;transition:none}
  .vorhang,.vorhang.wart{clip-path:none;transition:none}
  .kenburns img{animation:none}
  .orbit > svg{animation:none}
  .mcta{transition:none}
  .arch--team img,.arch--team:hover img{transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  /* Laufbänder stehen still und werden von Hand schiebbar, die zweite
     Reihe verschwindet, damit nichts doppelt dasteht. */
  .lauf-spur{animation:none;width:auto}
  .lauf{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .lauf-reihe[aria-hidden="true"]{display:none}
  .hero-figur .licht{animation:none}
  /* Nachtschicht-Bausteine: keine Blätter, keine Zooms */
  .blattregen{display:none}
  .kkarte .kbild img,.kkarte:hover .kbild img{transform:none;transition:filter .8s}
  .insta-k img,.insta-k:hover img{transform:none}
  .qa[open] .antwort{animation:none}
  .q-zeichen{transition:none}
}

/* ---------- Schmale Fenster ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr;gap:var(--s5)}
  .cols--3{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-raster{grid-template-columns:1fr;gap:var(--s5)}
  .hero-bild{margin-right:0}
  .hero-bild .arch{height:clamp(320px,46vh,460px)}
  .manifest > li{grid-template-columns:1fr;gap:var(--s2)}
  .m-satz{max-width:22ch}
  .m-text{padding-top:0}
}
@media (max-width:720px){
  /* Nur wenn JavaScript läuft, verschwindet die Navigation hinter dem Knopf.
     Sonst bliebe die Seite ohne jede Navigation zurück. Scope auf header,
     damit die Liste im Mobilmenü selbst nicht mitversteckt wird. */
  header nav ul{flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:.82rem}
  .cols--2,.cols--3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .facts ul{gap:var(--s1) var(--s3)}
  .hero-actions .btn{width:100%}
  .price td:last-child{text-align:left}
  /* Faktenband läuft auf Mobil, statt in vier Zeilen zu brechen */
  .facts .fakten-statisch{display:none}
  .facts .lauf{display:block}
  .facts .lauf-reihe li{margin-right:var(--s4);font-size:.8rem}
  /* Banderole kurz halten, sie darf den ersten Bildschirm nicht auffressen */
  .banderole .b-lang{display:none}
  .banderole{font-size:.76rem}
  .banderole .wrap{gap:.25rem .6rem;padding-block:.5rem}
  /* Galerie: Pfeile weg, Wisch-Hinweis hin; Instagram zweispaltig */
  .kg-pfeile{display:none}
  .kg-hinweis{display:block}
  .insta-reihe{grid-template-columns:1fr 1fr;gap:var(--s2)}
}
/* Auf breiten Fenstern steht das Faktenband still, und das Mobilmenü hat
   dort nichts verloren */
@media (min-width:721px){
  .facts .lauf{display:none}
}

/* Die Navigation muss frueher hinter den Knopf als der Rest des Layouts.
   Sechs Punkte plus Schnuppern-Knopf brauchen rund 870 px; bis 720 blieb
   sie stehen und ragte auf Tablets und schmalen Fenstern aus der Seite —
   auf einem iPad im Hochformat (768 px) lief die Seite waagrecht ueber.
   Alles andere schaltet weiterhin bei 720 um. */
@media (max-width:900px){
  .js header nav ul{display:none}
  .js .burger{display:flex}
}
@media (min-width:901px){
  .mobilmenue{display:none}
}


/* ---------- Hero-Kombi: Stile-Strom + Linienfigur mit Lauflicht ----------
   Blendis Wahl 17.08.: Variante 5 (Marquee der Stunden, blass hinter allem)
   plus Variante 3 (Figur in einer Farbe, alle sechs Sekunden ein Lichtschein).
   Die Texte sind die der Startseite, unveraendert. */
.hero--kombi{background:var(--cream-deep)}
.hero-laerm{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;pointer-events:none}
.hero-laerm .lauf{-webkit-mask-image:none;mask-image:none;overflow:hidden}
.hero-laerm li{font-family:var(--fd);font-size:clamp(1.2rem,1rem + 1.2vw,2rem);color:var(--ink);opacity:.10;
  white-space:nowrap;margin-right:3.5rem;list-style:none}
.hero-laerm li::before{content:none}
.hero--kombi .hero-raster{position:relative}
/* Lichtungen: weiche Creme-Wolken, in denen der Stile-Strom verstummt */
.hero--kombi .hero-inhalt{position:relative}
.hero--kombi .hero-inhalt::before{content:"";position:absolute;inset:-6% -16% -6% -24%;
  background:radial-gradient(ellipse at 46% 50%, var(--cream-deep) 48%, transparent 80%);pointer-events:none}
.hero--kombi .hero-inhalt > *{position:relative}
.hero-figur{align-self:end;display:flex;justify-content:center;position:relative;min-width:0}
.hero-figur::before{content:"";position:absolute;inset:-10% -14%;
  background:radial-gradient(ellipse at 50% 62%, var(--cream-deep) 46%, transparent 74%)}
.hero-figur svg{position:relative;width:min(100%,540px);height:auto;display:block}
.hero-figur .licht{animation:lichtlauf 6s linear infinite}
@keyframes lichtlauf{from{transform:translateX(-900px)}to{transform:translateX(3600px)}}
/* Begruessung und Kurstipp als Uebertitel: mittig ueber dem ganzen Hero,
   beide zusammen in EINER Lichtung, damit der Stile-Strom dahinter
   verstummt und keine Wolke die andere Zeile ueberdeckt. Der eigene
   Stacking-Kontext (z-index:0) haelt die Lichtung unter dem Text. */
.hero-ueber{
  position:relative;z-index:0;width:fit-content;margin:0 auto var(--s2);
  text-align:center;padding:.3rem 1.6rem;
}
.hero-ueber::before{content:"";position:absolute;inset:-30% -10%;z-index:-1;
  background:radial-gradient(ellipse at 50% 50%, var(--cream-deep) 45%, transparent 80%);pointer-events:none}
.hero-ueber .gruss{margin-bottom:.15rem}
.hero-ueber .g-tipp{margin-bottom:0;max-width:none}
@media (max-width:820px){
  .hero-figur{margin-top:var(--s4)}
  .hero-figur svg{width:min(64vw,360px)}
}

/* ============================================================
   Team-Karussell (Coverflow)
   Nachgebaut nach dem Vorbild, das den Damen gefällt. Vier Lagen,
   die mittlere Karte vorne und farbig, die Nachbarn treten gestaffelt
   zurück. Bilder eckig mit 12 px, Seitenverhältnis 3:4 — das ist der
   Ersatz für das frühere Bogenmotiv.
   Ohne JavaScript bleibt ein schlichtes Raster stehen, damit die
   Trainer:innen in jedem Fall sichtbar sind.
   ============================================================ */
.team__buehne{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(16px,2vw,24px);list-style:none;
}
.team__karte{margin:0}
/* height:auto muss sein: das height-Attribut am <img> gewinnt sonst gegen
   aspect-ratio und die Karte wird 1200 px hoch. */
.team__karte img{border-radius:var(--radius-bild);aspect-ratio:3/4;object-fit:cover;width:100%;height:auto}
.team__karte figcaption{display:block;margin-top:var(--s2)}
.team__pfeil,.team__info,.team__punkte{display:none}

.js .team{position:relative}
.js .team__buehne{
  display:block;position:relative;height:var(--teamh,440px);
  overflow-x:clip;margin:0;padding:0;
}
.js .team__karte{
  position:absolute;left:50%;top:0;width:var(--teamw,260px);margin:0;
  transform:translateX(-50%);cursor:pointer;will-change:transform,opacity;
  transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);
}
.js .team__karte img{
  box-shadow:0 10px 34px rgba(63,58,52,.14);
  transition:box-shadow .55s var(--ease);
}
.js .team__karte[data-lage="fern"]{opacity:0;pointer-events:none}
.js .team__karte[data-lage="rand"]{opacity:.42;filter:saturate(.42)}
.js .team__karte[data-lage="seite"]{opacity:.72;filter:saturate(.55)}
.js .team__karte[data-lage="mitte"]{filter:saturate(1);z-index:10;cursor:default}
.js .team__karte[data-lage="mitte"] img{box-shadow:0 22px 60px rgba(63,58,52,.24)}
.js .team__karte figcaption{display:none}

.js .team__pfeil{
  display:grid;place-items:center;position:absolute;top:var(--teampf,200px);z-index:20;
  width:48px;height:48px;padding:0;border-radius:99px;cursor:pointer;
  background:var(--cream);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 2px 12px rgba(63,58,52,.08);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.js .team__pfeil:hover{transform:scale(1.08);border-color:var(--aubergine);
  box-shadow:0 6px 20px rgba(63,58,52,.14)}
.js .team__pfeil svg{width:20px;height:20px}
.js .team__pfeil--zurueck{left:0}
.js .team__pfeil--vor{right:0}

.js .team__info{display:block;text-align:center;margin-top:var(--s3);min-height:96px}
.js .team__info h3{margin:0 0 .25rem;font-size:1.3rem}
.js .team__info .rolle{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage-600);margin-bottom:.5rem}
.js .team__info p{margin:0 auto;font-size:.95rem;color:var(--sage-600);max-width:44ch}
.js .team__info.wechselt{animation:team-ein .4s var(--ease)}
@keyframes team-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.js .team__punkte{display:flex;justify-content:center;gap:.55rem;margin-top:var(--s3);list-style:none}
.js .team__punkte button{
  width:9px;height:9px;padding:0;border-radius:99px;cursor:pointer;
  border:0;background:var(--sage-200);transition:background .25s,transform .25s;
}
.js .team__punkte button[aria-current="true"]{background:var(--aubergine);transform:scale(1.25)}

/* Vertretung: eigener, sichtbarer Abschnitt unter dem Karussell.
   Bewusst nicht aufklappbar — versteckt läse sich das wie eine Rangordnung. */
.vertretung{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  display:grid;grid-template-columns:200px 1fr;gap:clamp(var(--s3),3vw,var(--s5));
  align-items:start;
}
.vertretung img{border-radius:var(--radius-bild);aspect-ratio:3/4;object-fit:cover;width:100%;height:auto}
@media (max-width:640px){
  .vertretung{grid-template-columns:1fr;gap:var(--s3)}
  .vertretung img{max-width:220px}
}

@media (prefers-reduced-motion:reduce){
  .js .team__karte{transition:none}
  .js .team__info.wechselt{animation:none}
}

/* Schlusssatz der Sektion „Ständig unter Strom". Die Damen wollten ihn
   hervorgehoben; als abgesetzte Zeile wirkt er ruhiger als fett im Fließtext. */
.ausklang{
  font-family:var(--fd);
  font-size:clamp(1.15rem,1.05rem + .55vw,1.5rem);
  line-height:1.35;color:var(--ink-deep);max-width:30ch;
}

/* ---------- Zweifel-Wolke auf ist-yoga ----------
   Dunkles Taupe nach Wunsch der Damen, die Chips purzeln gestaffelt ein.
   Vorbild ist eine Seite, die ihnen gefällt; das Muster ist nachgebaut,
   nicht kopiert. Ohne Bewegungswunsch stehen die Chips einfach da. */
.zweifel{background:var(--taupe-dunkel);color:var(--taupe-hell);
  padding-block:clamp(var(--s6),5vw,var(--s7))}
.zweifel .kicker{color:var(--taupe-label)}
.zweifel .jump{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
/* Zwoelf Chips als Flatterband waren schwer zu lesen: der Rand mit 0,28
   Deckung kam nur auf 2,07:1 gegen den Grund, die Pillen zerflossen zu
   einer Textwolke. Jetzt hat jede eine eigene Flaeche und einen Rand bei
   3,47:1 — die Form bleibt, die Kanten werden sichtbar. Der Text steht
   unveraendert bei 7,42:1. */
.zweifel .jump{gap:.7rem}
.zweifel .jump a{
  display:inline-block;padding:.68rem 1.25rem;border-radius:99px;
  background:rgba(232,225,215,.06);
  border:1px solid rgba(232,225,215,.5);color:var(--taupe-hell);
  font-size:.95rem;line-height:1.35;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.zweifel .jump a:hover{background:rgba(232,225,215,.12);border-color:rgba(232,225,215,.55);
  transform:translateY(-2px)}
.js .purzel li{opacity:0;transform:translateY(-14px) rotate(-2deg)}
/* Der Endzustand steht HART in der Regel, die Animation liefert nur den Weg
   dorthin (deshalb backwards statt forwards). In gedrosselten Tabs läuft die
   Animation nicht — mit forwards blieben die Chips dann für immer unsichtbar.
   Merksatz aus Prototyp v2: Inhalt nie von einer Animation abhängig machen. */
.js .purzel.faellt li{
  opacity:1;transform:none;
  animation:purzeln .55s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes purzeln{
  0%{opacity:0;transform:translateY(-14px) rotate(-2deg)}
  70%{opacity:1;transform:translateY(3px) rotate(.5deg)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .purzel li{opacity:1;transform:none}
  .js .purzel.faellt li{animation:none}
}

/* ---------- Kopfzeile auf schmalen Geräten ----------
   Auf 375 px waren Logo (118 px) und die rechte Gruppe (202 px) zusammen
   breiter als der Container (338 px), der Kopf lief über. Der Knopf wird
   deshalb kompakter; ausblenden wäre falsch, weil die mobile Buchungsleiste
   erst nach 640 px Scroll erscheint. */
@media (max-width:430px){
  .nav-right{gap:var(--s1)}
  .nav-right .btn--sm{padding:.6rem .85rem;font-size:.66rem;letter-spacing:.1em;min-height:40px}
  .logo svg{width:104px}
  .burger{min-width:40px}
}

/* Die Einwand-Chips auf der Startseite laufen als Marquee. Auf dunklem
   Taupe brauchen sie helle Schrift und einen hellen Rand, sonst
   verschwinden sie in der Fläche. */
.zweifel .einwaende .lauf-reihe li{
  background:rgba(232,225,215,.08);border-color:rgba(232,225,215,.28);
  color:var(--taupe-hell);
}
.zweifel h2{color:var(--taupe-hell)}
.zweifel p{color:var(--taupe-hell)}
.zweifel .textlink{color:var(--taupe-label);border-color:var(--taupe-label)}
.zweifel .textlink:hover{color:var(--taupe-hell);border-color:var(--taupe-hell)}

/* ============================================================
   Hero mit Hintergrundvideo
   Das Video ist hell und rechts von der Trainerin belegt, links steht
   die Gruppe. Der Text sitzt deshalb links auf einem Creme-Verlauf, der
   nach rechts durchsichtig wird — so bleibt die Trainerin frei im Bild.
   Ein dunkles Kino-Overlay wäre kontrastreicher, würde aber die helle,
   ruhige Markenwelt brechen.
   ============================================================ */
.hero--video{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--cream);
  padding-block:0;
  min-height:clamp(560px,78vh,760px);
  display:flex;align-items:center;
}
.hero-video{position:absolute;inset:0;z-index:0}
.hero-video video{
  width:100%;height:100%;object-fit:cover;
  /* Rechtsbündig ausrichten: die Trainerin steht im rechten Bilddrittel
     und darf beim Beschneiden nicht als Erstes wegfallen. */
  object-position:72% center;
  display:block;
}
/* Der Schleier trägt den Text. Links fast deckend, rechts offen. */
.hero-schleier{
  position:absolute;inset:0;
  background:
    /* Stops gegen echte Videoframes gerechnet: schlechtester Kontrast im
       Textbereich 6,33:1, bei 52 % noch 5,19:1. Bei 70 % liegt die Deckkraft
       bei 0,27, dort steht die Trainerin und bleibt sichtbar. */
    linear-gradient(100deg,
      rgba(247,245,238,.97) 0%,
      rgba(247,245,238,.95) 30%,
      rgba(247,245,238,.86) 50%,
      rgba(247,245,238,.34) 66%,
      rgba(247,245,238,.06) 82%),
    linear-gradient(to top, rgba(63,58,52,.10), rgba(63,58,52,0) 40%);
}
/* ---- Testvariante: Taupe statt Creme ----
   Mit <body class="taupe-hero"> oder ?overlay=taupe umschaltbar.
   Taupe ist dunkler als Creme, deshalb braucht der Verlauf mehr Deckkraft,
   um denselben Kontrast zu halten: gerechnet 5,17:1 statt 4,41:1 mit den
   Creme-Werten. Der Preis ist etwas weniger sichtbares Video bei 70 %
   (0,36 statt 0,27 Deckkraft). */
.taupe-hero .hero-schleier{
  background:
    linear-gradient(100deg,
      rgba(232,225,215,.98) 0%,
      rgba(232,225,215,.96) 30%,
      rgba(232,225,215,.92) 50%,
      rgba(232,225,215,.40) 68%,
      rgba(232,225,215,.06) 84%),
    linear-gradient(to top, rgba(63,58,52,.10), rgba(63,58,52,0) 40%);
}
.taupe-hero .hero--video{background:var(--taupe-ruhig)}

.hero-video-inhalt{position:relative;z-index:1;width:min(1240px,90vw)}
.hero--video .hero-inhalt{max-width:46ch}
/* Der Übertitel war früher über der ganzen Breite zentriert. Über dem
   Video reichte er bis 76 % und damit weit in die transparente Zone,
   wo er kaum noch lesbar war. Jetzt gehört er zum Textblock links. */
.hero--video .hero-ueber{
  /* Die Grundregel setzt margin:0 auto und width:fit-content — beides muss
     hier weg, sonst bleibt der Block mittig stehen. Auch die Lichtung
     dahinter entfällt, der Schleier übernimmt das. */
  width:auto;max-width:44ch;
  margin:0 0 var(--s3);
  padding-left:0;padding-right:0;
  text-align:left;
}
.hero--video .hero-ueber::before{display:none}
.hero--video .hero-ueber .gruss,
.hero--video .hero-ueber .g-tipp{justify-content:flex-start;text-align:left}
.hero--video h1{margin-top:.2em}
.hero--video .lead{max-width:38ch}

/* Ohne JavaScript oder bei reduzierter Bewegung bleibt das Posterbild
   stehen. Das Video wird dann von site.js pausiert. */
@media (prefers-reduced-motion:reduce){
  .hero-video video{display:none}
  .hero-video{background:url(hero-poster.jpg) center/cover no-repeat}
}

@media (max-width:820px){
  .hero--video{min-height:clamp(520px,72vh,660px)}
  /* Überschreibt den Hintergrund, den site.js gesetzt hat. */
  .hero-video{background-image:url(hero-poster-hoch.jpg) !important;
    background-size:cover !important;background-position:center !important}
  /* Auf schmalen Schirmen wird der Schleier von unten geführt statt von
     links: hochkant beschnitten steht die Trainerin sonst hinter dem Text. */
  /* Hochkant füllt der Text die ganze Höhe, deshalb muss der Schleier
     durchgehend tragen. Gegen das Posterbild gerechnet: schlechtester
     Wert 4,80:1 über die gesamte Textzone. Das Bild schimmert dezent
     durch, statt den Text zu gefährden. */
  /* Gegen das gewählte Hochformat-Poster gerechnet (Sekunde 6.5, Ausschnitt
     53 %, mittlere Helligkeit nur 76/255 — dunkle Kleidung im Nahbereich).
     Schlechtester Wert 5,24:1 über die gesamte Textzone. Der Schleier muss
     hier kräftiger sein als beim helleren Ausschnitt zuvor. */
  .hero-schleier{
    background:
      linear-gradient(to bottom,
        rgba(247,245,238,.93) 0%,
        rgba(247,245,238,.89) 45%,
        rgba(247,245,238,.83) 75%,
        rgba(247,245,238,.70) 100%);
  }
  /* Taupe-Testvariante, hochkant. Gerechnet 5,10:1. */
  .taupe-hero .hero-schleier{
    background:
      linear-gradient(to bottom,
        rgba(232,225,215,.96) 0%,
        rgba(232,225,215,.93) 45%,
        rgba(232,225,215,.88) 75%,
        rgba(232,225,215,.78) 100%);
  }
  /* Kein object-fit-Beschnitt aus dem 16:9-Bild: hochkant blieben davon nur
     29 % der Breite übrig, und übrig blieb ein Ausschnitt aus Rücken und
     Beinen. Stattdessen ein eigenes Hochformat-Poster mit Gruppe und Raum. */
  .hero-video video{object-position:64% center}
  .hero--video .hero-inhalt{max-width:none}
  .hero--video .lead{max-width:none}
}

/* ============================================================
   Ballastkiste in „Was dich abhält"
   Die Sätze fallen in eine Kiste und lassen sich anfassen. Das Muster
   stammt von der Akademie für Neuromentaltraining (anderer Kunde), die
   Damen haben es selbst als Vorbild genannt — nachgebaut, nicht kopiert,
   in der Taupe-Palette und mit ihren eigenen Sätzen.
   Kernidee: Ballast, den man ablegen kann. Der Auflöser darunter
   („Keiner dieser Sätze ist ein Grund") ist die Pointe der Section.
   ============================================================ */
.kiste-huelle{margin-block:var(--s5)}
/* Grundzustand ist der ruhende Stapel: ohne JavaScript, ohne die
   Bibliothek und bei reduzierter Bewegung liegen die Saetze schlicht als
   Liste in der Kiste. Erst .kiste--physik macht daraus die Spielflaeche.
   Andersherum waeren die Saetze unsichtbar, sobald das Skript ausbleibt. */
.kiste{
  position:relative;margin-top:var(--s4);
  border-radius:var(--radius-bild);overflow:hidden;
  background:linear-gradient(180deg,#312d28 0%,#3f3a34 46%);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.35),0 20px 46px rgba(20,18,15,.22);
  padding:clamp(20px,3.2vw,32px);
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;align-content:center;
  min-height:clamp(300px,36vw,420px);
}
.kiste--physik{display:block;padding:0;
  height:clamp(300px,36vw,420px);min-height:0}
/* touch-action:none braucht nur, wer die Saetze auch ziehen kann. Am Handy
   wird nicht gezogen (siehe site.js), dort muss der Finger die Seite
   scrollen duerfen — sonst klebt man in der Kiste fest. */
@media (min-width:700px){.kiste--physik{touch-action:none}}
/* Am Handy passt kaum ein zweiter Satz neben den ersten, der Haufen wird
   also fast so hoch wie die Zahl der Saetze. Zwoelf Reihen zu rund 38 px
   brauchen etwa 460 px, dazu Luft zum Fallen. Die kleinere Schrift laesst
   ausserdem oefter zwei Saetze nebeneinander liegen. */
@media (max-width:699px){
  .kiste--physik{height:clamp(440px,135vw,560px)}
  .kiste--physik .ekarte{font-size:.82rem;padding:.5rem 1rem}
}
/* Wartet die Physik nur noch auf ihren Start, bleibt der Stapel unsichtbar,
   damit die Sätze nicht erst liegen und dann noch einmal fallen (Blendi am
   Handy, 04.09.). Die Höhe ist schon die der Spielfläche, damit beim Start
   nichts springt. Bleibt die Physik aus, nimmt site.js die Klasse zurück. */
.kiste--wartet{height:clamp(300px,36vw,420px);min-height:0}
.kiste--wartet .ekarte{opacity:0}
@media (max-width:699px){.kiste--wartet{height:clamp(440px,135vw,560px)}}
.kiste *{user-select:none;-webkit-user-select:none}
/* Die Seitenwände laufen nach hinten zusammen, das gibt Tiefe */
.kiste__wand{position:absolute;top:0;bottom:0;width:54px;pointer-events:none}
.kiste__wand--l{left:0;background:linear-gradient(90deg,rgba(0,0,0,.30),transparent);
  clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)}
.kiste__wand--r{right:0;background:linear-gradient(270deg,rgba(0,0,0,.30),transparent);
  clip-path:polygon(100% 0,0 8%,0 92%,100% 100%)}
.kiste__kante{position:absolute;left:0;right:0;top:0;height:15px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.40),transparent)}
.kiste__boden{position:absolute;left:0;right:0;bottom:0;height:60px;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.26),transparent)}

/* Bis die Physik startet, liegen alle Karten übereinander in der Ecke.
   Deshalb erst einblenden, wenn es losgeht. */
.ekarte{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(.9rem,.86rem + .18vw,1.02rem);line-height:1.2;
  padding:.62rem 1.25rem;border-radius:99px;border:1px solid;
}
/* In der Spielflaeche liegen die Saetze bis zum Start uebereinander in der
   Ecke, deshalb erst einblenden, wenn es losgeht. */
.kiste--physik .ekarte{position:absolute;top:0;left:0;will-change:transform;
  opacity:0;transition:opacity .25s var(--ease)}
/* Der Greifzeiger nur dort, wo auch gegriffen werden kann. */
@media (min-width:700px){.kiste--physik .ekarte{cursor:grab}}
.kiste--physik.ist-los .ekarte{opacity:1}
.kiste--physik .ekarte:active{cursor:grabbing}
/* Jede Karte trägt einen eigenen Rand. Ohne ihn verschmelzen zwei
   gleichfarbige Pillen im Stapel zu einer Fläche. Die Aubergine-Karte
   steht mit 1,32:1 fast unsichtbar auf dem Kistengrund, sie braucht
   den hellen Rand zwingend. */
.ekarte--voll{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.ekarte--kontur{background:transparent;color:var(--taupe-hell);border-color:rgba(232,225,215,.42)}
.ekarte--aubergine{background:var(--aubergine);color:#fff;border-color:rgba(232,225,215,.5)}
.ekarte.ist-gegriffen{z-index:5;box-shadow:0 12px 28px rgba(20,18,15,.5);cursor:grabbing}

.kiste__tipp{display:flex;align-items:flex-start;gap:.55rem;margin-top:var(--s3);
  font-size:.84rem;color:var(--taupe-label)}
.kiste__tipp svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;stroke:currentColor;
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Liegen die Sätze still da, wäre der Hinweis eine Lüge. */
.kiste__tipp{display:none}
@media (min-width:700px){.kiste--physik ~ .kiste__tipp{display:flex}}
@media (prefers-reduced-motion:reduce){.kiste--physik ~ .kiste__tipp{display:none}}

/* ---------- „Alles ablegen": die Sätze werden zu einem ---------- */
/* Der Knopf sammelt die zwölf Einwände ein und lässt einen Satz übrig.
   Das ist die Pointe der Section in einer Geste: Ballast lässt sich
   ablegen. Beides ist umkehrbar, niemand soll sich ausgesperrt fühlen. */
.kiste__satz{
  position:absolute;inset:0;margin:0;display:grid;place-items:center;
  padding:var(--s4);text-align:center;pointer-events:none;
  font-family:var(--fd);font-weight:400;line-height:1.15;letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);color:var(--cream);
  opacity:0;transform:scale(.94);
  transition:opacity .7s var(--ease) .35s,transform .7s var(--ease) .35s;
}
.kiste.ist-eins .kiste__satz{opacity:1;transform:none}
/* Die Karten fahren zur Mitte und lösen sich auf. Die Physik steht in
   diesem Moment still, sonst würde sie die Transform-Werte je Bild
   überschreiben. */
.kiste.sammelt .ekarte{
  transition:transform .85s var(--ease),opacity .7s var(--ease);
  opacity:0;pointer-events:none;
}
.kiste.sammelt .kiste__boden,.kiste.sammelt .kiste__kante{opacity:.5;transition:opacity .7s var(--ease)}

.kiste__leiste{display:flex;justify-content:center;margin-top:var(--s4)}
/* Blendi, 05.09.: Der Knopf soll auffallen und zum Klicken einladen. Deshalb
   gefüllt in Creme statt als Kontur, dazu ein ruhiger Puls (weicher Lichtring,
   alle 2,6 s). Der Puls endet, sobald abgelegt wurde oder bei reduzierter Bewegung. */
.kiste__knopf{
  font:inherit;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  min-height:52px;padding:.95rem 2.2rem;border-radius:99px;cursor:pointer;
  background:var(--cream);color:var(--ink-deep);border:1px solid var(--cream);
  box-shadow:0 10px 28px rgba(20,18,15,.38);
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
@keyframes knopfPuls{
  0%{box-shadow:0 10px 28px rgba(20,18,15,.38),0 0 0 0 rgba(247,245,238,.55);transform:scale(1)}
  35%{transform:scale(1.035)}
  70%{box-shadow:0 10px 28px rgba(20,18,15,.38),0 0 0 16px rgba(247,245,238,0);transform:scale(1)}
  100%{box-shadow:0 10px 28px rgba(20,18,15,.38),0 0 0 0 rgba(247,245,238,0);transform:scale(1)}
}
/* Der Puls kommt erst mit .pulst, gesetzt von site.js, sobald alle Sätze liegen. */
.kiste__knopf.pulst{animation:knopfPuls 2.6s var(--ease) infinite}
.kiste__knopf:hover{background:var(--aubergine);color:#fff;border-color:var(--aubergine);
  transform:translateY(-2px);animation:none}
.kiste.ist-eins ~ .kiste__leiste .kiste__knopf,
.kiste__knopf[aria-pressed="true"]{animation:none;box-shadow:0 6px 18px rgba(20,18,15,.3)}
@media (prefers-reduced-motion:reduce){.kiste__knopf{animation:none}}
.kiste__knopf:focus-visible{outline:2px solid var(--taupe-hell);outline-offset:3px}
/* Ohne Physik gibt es nichts einzusammeln, was wie ein Ablegen aussähe —
   dort blendet der Knopf die Liste schlicht aus und den Satz ein. */
.kiste__leiste{display:none}
.js-kiste .kiste__leiste{display:flex}

/* ---------- Bild mit Unterschrift ---------- */
/* Bei einem Foto mit zwei Personen ist die Zuordnung sonst Ratesache.
   Die Zeile steht bewusst unter dem Bild, nicht darauf: sie ist Beleg,
   nicht Gestaltung. --ton-neben steht mit 6,04:1 auf Creme. */
.bildblock{margin:0}
.bildblock figcaption{
  margin-top:var(--s2);font-size:.85rem;line-height:1.5;color:var(--ton-neben);
  text-align:center;
}

/* ---------- VANIDA Community: die Mitgliedschaft ---------- */
/* Sie gehoert nicht in die Preistabelle. Die Tabelle listet Angebote, die
   man einzeln kauft; die Mitgliedschaft wirkt auf alle anderen Zeilen und
   steht deshalb als eigener Block darunter. Als Tabellenzeile las sie sich
   wie ein weiteres, teureres Abo — genau das Missverstaendnis, das die
   Damen aufgeloest haben wollten. */
.mitglied{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(var(--s4),3vw,var(--s6));
  align-items:start;margin-top:var(--s6);padding:clamp(var(--s4),3vw,var(--s5));
  background:var(--taupe-ruhig);border-radius:var(--radius-bild);
}
.mitglied__zahl{display:flex;flex-direction:column;min-width:8ch}
.mitglied__euro{
  font-family:var(--fd);font-weight:400;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.8rem,2rem + 2.6vw,4rem);color:var(--aubergine);
  display:flex;align-items:baseline;gap:.3rem;
}
.mitglied__waehrung{font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ton-neben)}
.mitglied__takt{margin-top:.35rem;font-size:.95rem;color:var(--ink)}
.mitglied__art{margin-top:.15rem;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ton-neben)}
.mitglied__inhalt h3{font-size:1.35rem}
.mitglied__inhalt > p{margin-top:var(--s2);max-width:52ch}
.mitglied__liste{list-style:none;margin-top:var(--s3);display:grid;gap:.5rem}
.mitglied__liste li{position:relative;padding-left:1.5rem;font-size:.98rem}
.mitglied__liste li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--aubergine);
}
.mitglied .micro{margin-top:var(--s3)}
@media (max-width:640px){
  .mitglied{grid-template-columns:1fr;gap:var(--s3)}
  .mitglied__zahl{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:.6rem}
  .mitglied__takt,.mitglied__art{margin-top:0}
}

/* ---------- Drei Saetze untereinander ---------- */
/* Nebeneinander in einem Absatz liefen die drei Zitate zu einem Satzband
   zusammen und man las sie als einen Gedanken. Untereinander ist jedes
   fuer sich zu hoeren — so hat Vanessa sie auch aufgeschrieben. */
.zitatzeilen{
  list-style:none;margin-top:var(--s4);display:grid;gap:.5rem;
  font-family:var(--fd);font-weight:400;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  line-height:1.35;color:var(--ink-deep);
}

/* Bandbild in offener Hoehe: fuer Motive, denen der schmale Streifen den
   Kopf abschneidet. */
/* height:auto ist Pflicht: das height-Attribut im HTML schlaegt sonst die
   aspect-ratio und das Bild steht in seiner Originalhoehe da. Derselbe
   Stolperstein wie bei den Karussellkarten. */
.bandbild--offen img{aspect-ratio:3/2;height:auto}
@media (max-width:720px){.bandbild--offen img{aspect-ratio:3/2}}

/* ============================================================
   Kursraster: die Uebersicht ueber alle Kurse
   Dieselbe Kachelform wie die Kursleiste der Startseite, damit sie
   wiedererkannt wird. Sie beantwortet die Frage „welche gibt es",
   der Kurs-Finder darueber die Frage „welcher passt zu mir".
   Am Handy zwei Kacheln nebeneinander: sechs Reihen statt elf Bloecke.
   ============================================================ */
.krsektion{background:var(--cream-deep)}
.krraster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(var(--s3),2.2vw,var(--s4));margin-top:var(--s5);
}
.krkarte{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius-bild);
  transition:transform .3s var(--ease);
}
.krkarte:hover{transform:translateY(-3px)}
.krkarte:focus-visible{outline:2px solid var(--aubergine);outline-offset:4px}
.krbild{display:block;border-radius:var(--radius-bild);overflow:hidden}
.krbild img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;height:auto;
  filter:saturate(.85) sepia(.05);
  transition:transform 4s var(--ease),filter .8s var(--ease);
}
.krkarte:hover .krbild img{transform:scale(1.05);filter:saturate(.95) sepia(.02)}
.krtitel{display:block;font-family:var(--fd);font-weight:400;
  font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);line-height:1.2;
  color:var(--ink-deep);margin-top:var(--s2)}
.krmeta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-top:.3rem;font-size:.84rem;line-height:1.4;color:var(--ton-neben)}
.krmeta .dot{flex:none}
@media (max-width:560px){
  .krraster{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .krmeta{font-size:.76rem;gap:.35rem}
}

/* ============================================================
   Sonderformate „Nicht jede Woche"
   Vorher standen beide in einem Zweispalter. Flow for Two brachte Bild und
   vier Absaetze mit, Yoga Special kein Bild und drei kurze Zeilen — die
   linke Karte wurde doppelt so hoch wie die rechte, oben ein Loch, unten
   Leerraum. Die zwei Formate SIND ungleich; deshalb stehen sie jetzt
   untereinander, jedes in der Form, die zu ihm passt. Flow for Two nimmt
   dieselbe Gestalt wie die elf Kurse darueber, das haelt die Seite ruhig.
   ============================================================ */
.kurs-h{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem)}
.tlink{border-bottom:1px solid var(--ton-400)}

.spezial{
  margin-top:clamp(var(--s5),4vw,var(--s6));
  padding-top:clamp(var(--s5),4vw,var(--s6));
  border-top:1px solid var(--line);
}
.spezial__kopf p{margin-top:var(--s2);color:var(--ton-neben)}
.spezial__paar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:var(--s3);margin-top:var(--s4);
}
/* Gleiche Hoehe, weil hier beide Karten wirklich gleichwertig sind:
   zwei Varianten desselben Formats, kein Bild, aehnlich viel Text. */
.spezial__karte{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-bild);padding:var(--s4);
}
.spezial__karte h4{
  font-family:var(--fd);font-weight:400;font-size:1.2rem;
  color:var(--ink-deep);margin-bottom:var(--s2);
}
.spezial__karte p{margin:0;font-size:.98rem}
.spezial__fuss{margin-top:var(--s3);font-size:.9rem;color:var(--ton-neben)}

/* ---------- Personenvorstellung auf der Teamseite ---------- */
/* Sie nutzt dasselbe Gerüst wie ein Kursdetail, braucht aber mehr Bild:
   Ein Porträt neben vier Absätzen Text darf nicht so klein sein wie ein
   Kursfoto neben drei Zeilen. Vorher lag das Bild in einem gewöhnlichen
   div ohne grid-area und landete deshalb im 3:2-Rahmen von .arch — von
   einem 3:4-Porträt blieb die Hälfte übrig. */
.kurs--person{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.kurs--person .kursbild img{aspect-ratio:3/4}
.person-kurse{margin-top:var(--s2);font-size:.95rem;color:var(--ton-neben)}
/* Jede zweite Person spiegelt sich: Bild rechts, Text links. Das Raster
   wird umbenannt statt umsortiert, damit die Lesereihenfolge im Quelltext
   gleich bleibt — Bild, Name, Text, so hört es auch ein Screenreader. */
.kurs--person:nth-of-type(even){
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  grid-template-areas:"kopf bild" "text bild";
}
@media (max-width:720px){
  /* Am Handy steht das Bild immer links neben dem Namen und der Text
     darunter über die volle Breite. Der Wechsel bliebe hier ohne Wirkung
     und würde den Blick nur unruhig machen. */
  .kurs--person,
  .kurs--person:nth-of-type(even){
    grid-template-columns:130px minmax(0,1fr);
    grid-template-areas:"bild kopf" "text text";
  }
}

/* ---------- Impressum: Angaben als Liste ---------- */
.impressum-liste{list-style:none;margin-top:var(--s4);display:grid;gap:var(--s3)}
.impressum-liste li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.impressum-liste li:last-child{border-bottom:0}
.impressum-liste b{font-weight:400;color:var(--ton-neben);font-size:.9rem}
@media (max-width:560px){
  .impressum-liste li{grid-template-columns:1fr;gap:.2rem}
}

/* ============================================================
   Newsletter
   Vor der Eröffnung ist die Anmeldung der wichtigste Weg, Menschen zu
   halten, die noch überlegen. Deshalb eine eigene Section und nicht nur
   eine Zeile in der Fußzeile. Die Frequenz steht bewusst dabei: Wer weiß,
   worauf er sich einlässt, trägt sich eher ein.
   ============================================================ */
/* Die Section davor („Fang einfach an") liegt auf --sand, und --sand ist
   derselbe Wert wie --taupe-ruhig: #e8e1d7. Beide Bloecke verschmolzen
   deshalb zu einer Flaeche. Jetzt steht der Newsletter auf dem hellen
   Grundton der Seite, die Anmeldung selbst als abgesetzte Karte darauf.
   Zwei Kanten statt keiner, und der Schnupperpaket-Block bleibt der
   staerkere von beiden. */
.nl{background:var(--cream)}
.nl-karte{
  background:var(--taupe-ruhig);border-radius:var(--radius-bild);
  padding:clamp(var(--s5),4vw,var(--s6));
}
.nl-form{margin-top:var(--s4);max-width:36rem}
.nl-label{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ton-neben);margin-bottom:.5rem}
/* Zwei Felder nebeneinander, aber jedes mit eigener Beschriftung darueber.
   Beschriftung im Feld statt darueber verschwindet beim Tippen, dann weiss
   niemand mehr, was er gerade ausfuellt. */
.nl-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:var(--s3)}
.nl-gruppe{min-width:0}
.nl-zeile{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.nl-feld{
  width:100%;min-width:0;font:inherit;font-size:1rem;
  padding:.85rem 1.1rem;min-height:52px;
  border:1px solid var(--ton-400);border-radius:99px;
  background:var(--cream);color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.nl-feld::placeholder{color:var(--ton-neben);opacity:.75}
.nl-feld:focus{outline:none;border-color:var(--aubergine);
  box-shadow:0 0 0 3px rgba(92,68,98,.16)}
.nl-knopf{flex:0 0 auto}
.nl-fuss{margin-top:var(--s3);font-size:.88rem;line-height:1.55;color:var(--ton-neben);max-width:52ch}
.nl-fuss a{border-bottom:1px solid var(--ton-400)}
.nl .micro{margin-top:var(--s3)}
@media (max-width:560px){
  .nl-knopf{width:100%}
}

/* Rechtstexte (AGB, Datenschutz): ruhige Lesespalte, nummerierte Zwischentitel. */
.rechtstext h2{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);margin-top:var(--s6);scroll-margin-top:110px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin-top:var(--s3);max-width:68ch}
.rechtstext ul{margin:var(--s3) 0 0 1.2rem;max-width:68ch}
.rechtstext li{margin-top:.35rem}

/* Rückmeldung unter dem Newsletter-Formular */
.nl-status{margin-top:var(--s3);font-size:.95rem;line-height:1.5;color:var(--ink-deep);max-width:52ch}
.nl-status--fehler{color:#8E2620}
/* Nach dem Absenden (06.09.): Felder und Knopf weichen einer Bestätigungskarte. */
.nl-form.ist-fertig .nl-felder,.nl-form.ist-fertig .nl-zeile,.nl-form.ist-fertig .nl-fuss,.nl-form.ist-fertig .nl-status{display:none}
.nl-erfolg{
  margin-top:var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  padding:clamp(var(--s3),2.5vw,var(--s4));background:var(--cream);border:1px solid var(--line);border-radius:14px;max-width:36rem;
  animation:nlErfolg .5s var(--ease) both;
}
.nl-erfolg__haken{width:44px;height:44px;border-radius:50%;background:var(--aubergine);display:grid;place-items:center;flex:none}
.nl-erfolg__haken svg{width:22px;height:22px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nl-erfolg h3{font-family:var(--fd);font-weight:400;font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.2;margin:0}
.nl-erfolg p{margin-top:var(--s2);font-size:.95rem;line-height:1.55;color:var(--ink-deep)}
.nl-erfolg .micro{margin-top:var(--s2);color:var(--ton-neben)}
@keyframes nlErfolg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nl-erfolg{animation:none}}

/* Fußzeile (06.09.): Instagram mit Glyphe, KIT-Zeile klein und zurückhaltend. */
.foot-ig{display:inline-flex;align-items:center;gap:.45rem}
.foot-ig .ig{flex:none;opacity:.9}

.foot-kit a{color:inherit;border-bottom:1px solid rgba(232,225,215,.25);padding-bottom:1px}
.foot-kit a:hover{color:var(--taupe-hell)}
 (max-width:640px){.foot-kit{text-align:center}}