/* ============================================================
   Salsa Company — Onepager "El Calor" (portiert aus dem MVP)
   Block-Theme-Variante: Hero/Tanz = core/cover, Buttons = core/button.
   Tokens kommen aus theme.json; Fonts sind selbst-gehostet (gleiche Namen).
   ============================================================ */
:root{
  --paper:#FBF6EE; --paper-2:#F7EFE3; --night:#160F0B; --night-2:#241813;
  --ink:#1B1310; --ink-soft:#6A5C52; --red:#E5032F; --red-deep:#B0122A;
  --salsa:#E5032F; --salsa-deep:#B0122A; --bachata:#E39600; --bachata-deep:#7E5A00;
  --kizomba:#0E8A6E; --kizomba-deep:#0B6152; --zouk:#7A3FC0; --zouk-deep:#57268F;
  /* Hip Hop: Blau, weil Rot, Orange, Gruen und Violett schon vergeben sind und
     die fuenf Stile im Plan nebeneinander stehen. */
  --hiphop:#1B6AC9; --hiphop-deep:#11478A;
  --line:rgba(27,19,16,.12); --line-light:rgba(255,255,255,.16);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1);
  /* Hoehe der fixen Kopfzeile im Ausgangszustand. Wird vom Ferienbalken gebraucht,
     der sonst darunter verschwindet. */
  --hdr-h:82px;
}
@media(max-width:720px){:root{--hdr-h:74px}}
/* ⚠️ Zwischen 721 und 1149 px bricht die Navigation auf ZWEI Zeilen um und die
   Kopfzeile ist dann **124 px** hoch statt 82. Das Burger-Menü greift nur bis
   720 px, darüber steht die volle Navigation — und die passt erst ab 1150 px
   in eine Zeile.

   Ohne diese Korrektur rutscht alles, was sich auf `--hdr-h` verlässt, um 42 px
   zu weit nach oben: Ferien-Hinweis, Bildköpfe, Bildbänder. Beim Ferien-Hinweis
   verdeckt die fixe Kopfzeile dann den Text — betrifft Tablets im Querformat
   und schmale Laptop-Fenster.

   Gemessen am 2026-11-11 bei 740 / 820 / 900 / 1000 / 1100 / 1150 / 1200 px.
   Wer einen Navigationspunkt hinzufügt oder wegnimmt, muss hier nachmessen:
   die 1149 px sind die Breite, ab der die heutige Navigation einzeilig passt. */
@media(min-width:721px) and (max-width:1149px){:root{--hdr-h:124px}}
body{overflow-x:hidden}
.serif{font-family:var(--font-serif);font-weight:400;font-style:italic;letter-spacing:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.section{padding:clamp(64px,9vw,128px) 0}
/* Enger Anschluss an die Seiten-Einleitung: wenn direkt unter .page-intro kein
   Vorspann mehr steht, wirkt die volle Sektionsluft wie ein Loch (Kia, 2026-11-02). */
.section--eng{padding-top:clamp(18px,2.2vw,32px)}

/* ---------- Buttons (core/button) ---------- */
.wp-block-button__link{font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1;
  padding:18px 28px;border-radius:10px;box-shadow:0 10px 30px -8px rgba(229,3,47,.55);
  transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s}
.wp-block-button__link:hover{transform:translateY(-2px);background:var(--red-deep)}
.wp-block-button.is-ghost .wp-block-button__link{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.wp-block-button.is-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px #fff}
.wp-block-button.is-dark .wp-block-button__link{background:var(--ink);color:var(--paper);box-shadow:none}
.wp-block-button.is-dark .wp-block-button__link:hover{background:#000}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s var(--ease),box-shadow .35s,padding .35s;background:transparent}
.hdr .hdr-inner{max-width:var(--maxw);margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr .brand{position:relative;display:inline-block;width:138px;height:38px}
.hdr .brand .logo{position:absolute;inset:0;background-repeat:no-repeat;background-position:left center;background-size:contain;transition:opacity .35s var(--ease)}
.hdr .brand .logo--light{background-image:url(../img/logo-light.png)}
.hdr .brand .logo--dark{background-image:url(../img/logo-dark.webp)}
body.home .hdr.at-top .logo--light{opacity:1}body.home .hdr.at-top .logo--dark{opacity:0}
.hdr.scrolled .logo--light{opacity:0}.hdr.scrolled .logo--dark{opacity:1}
/* Nav = core/navigation-Block (Menue im Site Editor pflegbar, Hamburger-Overlay mobil) */
.hdr .hdr-inner>*{margin-block-start:0}
.hdr .nav{display:flex;align-items:center;font-family:var(--font-body);color:var(--ink)}
body.home .hdr.at-top .nav{color:#fff}
.hdr .nav button{color:inherit;background:none;border:0}
.hdr .nav .wp-block-navigation__container{gap:30px;align-items:center}
.hdr .nav a{font-family:var(--font-body);font-weight:600;font-size:15.5px;color:var(--ink);opacity:.85;position:relative;transition:opacity .2s;text-decoration:none}
.hdr .nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--red);transition:width .25s var(--ease)}
.hdr .nav a:hover{opacity:1}.hdr .nav a:hover::after{width:100%}
body.home .hdr.at-top .nav a{color:#fff;opacity:.92}
.hdr.scrolled{background:rgba(251,246,238,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.scrolled .hdr-inner{padding:14px 32px}
/* CTA-Button im Header (eigener Button-Block, bleibt auch mobil neben dem Burger) */
.hdr .hdr-cta .wp-block-button__link{padding:11px 20px;font-size:14.5px;box-shadow:none}
/* Dropdown (Submenu) im El-Calor-Stil */
.hdr .nav .wp-block-navigation__submenu-container{min-width:200px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -20px rgba(27,19,16,.55)}
.hdr .nav .wp-block-navigation__submenu-container a{color:var(--ink) !important;opacity:1;padding:9px 13px;border-radius:9px;font-size:15px;white-space:nowrap}
.hdr .nav .wp-block-navigation__submenu-container a::after{display:none}
.hdr .nav .wp-block-navigation__submenu-container a:hover{background:var(--paper-2)}
/* Burger-Button: erbt die Header-Textfarbe (weiss ueber dem Hero, sonst dunkel) */
.hdr .wp-block-navigation__responsive-container-open{color:var(--ink)}
body.home .hdr.at-top .wp-block-navigation__responsive-container-open{color:#fff}
/* Offenes Mobil-Overlay: Paper-Karte, grosse dunkle Links (Weiss-Regeln duerfen nicht greifen) */
/* height:100dvh erzwingen: WP-Core laesst das fixed-Overlay kollabieren, wenn man das
   Menue NACH dem Scrollen oeffnet (Box-Hoehe 0 -> Inhalt scheint durch) */
.hdr .wp-block-navigation__responsive-container.is-menu-open{padding:96px 28px 32px;background:var(--paper);color:var(--ink);height:100vh;height:100dvh;overflow:auto}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{gap:16px;align-items:flex-start;justify-content:flex-start;text-align:left}
.hdr .wp-block-navigation__responsive-container.is-menu-open a{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink) !important;opacity:1}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{min-width:0;padding:4px 0 0 14px;background:transparent;border:0;box-shadow:none}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{font-size:18px;font-weight:700;padding:6px 0}
/* Burger schon ab <=720px (Core wuerde erst <600px umschalten): zwischen 600-720px
   die Inline-Nav verstecken und den Open-Button zeigen */
@media (min-width:600px) and (max-width:720px){
  .hdr .nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
  .hdr .nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
}

/* ---------- Hero: ruhiges, dezent "tanzendes" rotes Farbfeld hinter dem Text ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 68% 42%,#260a0f 0%,var(--night) 58%)}
/* weisser Streifen oben: Block-Layout-Margin der Startseiten-main neutralisieren */
.home main{margin-top:0}
/* Tanz-Karten nutzen weiterhin core/cover -> diese Overrides bleiben */
.tanz .wp-block-cover__image-background{object-fit:cover}
.tanz .wp-block-cover__background{background-color:transparent !important}

/* Hintergrund-Deko OHNE Markup (kein wp:html im Seiteninhalt): zwei weiche rote Blobs als
   Pseudo-Elemente von .hero; der Scrim haengt als ::before unter dem Textgrid (eigener
   Stacking-Context von .hero__grid, z-index:-1 -> ueber den Blobs, unter dem Inhalt). */
.hero::before,.hero::after{content:"";position:absolute;z-index:0;border-radius:50%;filter:blur(95px);will-change:transform;pointer-events:none}
.hero::before{width:46vw;height:46vw;left:30%;top:22%;background:radial-gradient(circle,var(--red),transparent 62%);opacity:.30;animation:hero-dance1 28s ease-in-out infinite}
.hero::after{width:40vw;height:40vw;right:2vw;top:6%;background:radial-gradient(circle,var(--red-deep),transparent 62%);opacity:.28;animation:hero-dance2 34s ease-in-out infinite}
/* Scrim: haelt den (linken) Textbereich ruhig & kontrastreich */
.hero__grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,9,6,.82) 0%,rgba(15,9,6,.5) 42%,rgba(15,9,6,.12) 78%),
             linear-gradient(180deg,rgba(15,9,6,.35),rgba(15,9,6,0) 34%,rgba(15,9,6,.5))}

/* Textinhalt */
.hero__grid{position:relative;z-index:2;max-width:var(--maxw);min-height:100svh;margin:0 auto;padding:120px 32px 80px;display:grid;grid-template-columns:1fr minmax(360px,540px);gap:clamp(28px,4vw,64px);align-items:center}
.hero__inner{display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:#fff;opacity:.9;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.hero .eyebrow::before{content:"";width:42px;height:2px;background:var(--red);display:inline-block}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.4vw,60px);color:#fff;max-width:15ch;line-height:1.04;letter-spacing:-.02em;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero h1 .serif{color:#fff}
.hero .hero__sub{font-size:clamp(17px,1.5vw,21px);max-width:46ch;margin:26px 0 34px;color:rgba(255,255,255,.9)}
.hero .hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .hero__trust{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14.5px;color:rgba(255,255,255,.82)}
.hero .hero__trust p{display:inline-flex;align-items:center;gap:9px;margin:0}
.hero .hero__trust p::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}
/* Foto-Panel: begrenzte Breite (<=540px) -> nie hochskaliert -> gestochen scharf; KEIN Overlay
   (unverfaelscht). Bild ist ein core/image aus der Mediathek -> im Editor per "Ersetzen"
   tauschbar (Querformat, mind. 1100px breit hochladen). */
.hero__media{justify-self:end;width:100%;max-width:540px;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);outline:1px solid rgba(255,255,255,.10);outline-offset:-1px}
.hero__media>*{margin-block-start:0}
.hero__media figure{margin:0;line-height:0}
.hero__media img{display:block;width:100%;height:auto;aspect-ratio:1167/700;object-fit:cover}

/* dezentes "Tanzen": langsame, organische Bewegung der Blobs */
@keyframes hero-dance1{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(5vw,-3vw,0) scale(1.12)}66%{transform:translate3d(-3vw,3vw,0) scale(1.05)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes hero-dance2{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-4vw,3vw,0) scale(1.1)}66%{transform:translate3d(3vw,-2vw,0) scale(1.16)}100%{transform:translate3d(0,0,0) scale(1)}}

@media(max-width:1024px){
  /* Split aufloesen -> stapeln: Foto OBEN, Text darunter */
  .hero__grid{grid-template-columns:1fr;min-height:auto;padding:108px 24px 76px;gap:30px;text-align:center}
  .hero__media{order:-1;justify-self:center;max-width:520px}
  .hero__inner{align-items:center}
  .hero .eyebrow{justify-content:center}
  .hero h1,.hero .hero__sub{margin-inline:auto}
  .hero .hero__cta,.hero .hero__trust{justify-content:center}
}
@media(max-width:720px){
  .hero{background:radial-gradient(120% 90% at 50% 26%,#260a0f,var(--night) 62%)}
  .hero__grid::before{background:linear-gradient(180deg,rgba(15,9,6,.5),rgba(15,9,6,.18) 40%,rgba(15,9,6,.62))}
  .hero::before{left:50%;margin-left:-23vw;top:18%}
  .hero__inner{align-items:center}
  .hero .eyebrow{justify-content:center}
  .hero h1,.hero .hero__sub{margin-inline:auto}
  .hero .hero__cta,.hero .hero__trust{justify-content:center}
}

/* ---------- Event-Slider (Poster im Querformat, Auto-Crossfade, Datum darunter) ---------- */
/* Slides sind native Bloecke (Bild + Datum). Stapelung im selben Grid-Feld -> Stage nimmt die
   Hoehe der Slides an; onepager.js blendet alle 6s ueber und erzeugt klickbare Punkte.
   Ohne JS bleibt das erste Poster sichtbar (.event-slide:first-child unten). */
.events-band{background:var(--paper-2)}
.events-band .wrap{max-width:760px;text-align:center}
.events-band .wrap>*{margin-block-start:0}
.events-band h2{font-family:var(--font-display);font-size:clamp(28px,4.4vw,52px);letter-spacing:-.02em;margin:12px 0 0}
.events__stage{display:grid;max-width:680px;margin:28px auto 0}
.events__stage>.event-slide{grid-area:1 / 1}
/* Fallback ohne JS: nur das erste Poster zeigen (sonst wuerden alle 5 stapeln) */
.events__stage:not(.is-live)>.event-slide:not(:first-child){display:none}
/* JS aktiv (.is-live): alle stapeln + alle 6s ueberblenden */
.events__stage.is-live>.event-slide{opacity:0;visibility:hidden;transition:opacity .8s var(--ease);pointer-events:none}
.events__stage.is-live>.event-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.event-slide>*{margin-block-start:0}
.event-slide__poster{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px -34px rgba(27,19,16,.55)}
.event-slide__poster img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.event-slide__date{margin:18px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.4vw,22px);color:var(--ink);letter-spacing:.01em}
/* Navigationspunkte (von onepager.js erzeugt) */
.events__dots{display:flex;justify-content:center;gap:11px;margin:20px 0 0;padding:0;list-style:none}
.events__dots li{margin:0}
.events__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(27,19,16,.22);cursor:pointer;transition:background .2s,transform .2s}
.events__dots button:hover{background:rgba(27,19,16,.45)}
.events__dots button.is-active{background:var(--red);transform:scale(1.3)}
.events__more{margin:24px auto 0}
.events__more a{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--red-deep);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;transition:color .2s var(--ease)}
.events__more a:hover{color:var(--red)}
.events__hint{margin:14px auto 0;font-size:13px;color:var(--ink-soft);font-style:italic}

/* ---------- Intro / Stats ---------- */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end}
.intro h2{font-family:var(--font-display);font-size:clamp(30px,4vw,52px);max-width:16ch;line-height:1.06;letter-spacing:-.02em}
.intro .intro__lead{color:var(--ink-soft);font-size:19px;max-width:42ch;margin-top:20px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.stat{background:var(--paper);padding:26px 24px}
.stat .stat__n{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1;color:var(--red);letter-spacing:-.03em}
.stat .stat__l{font-size:14.5px;color:var(--ink-soft);margin-top:8px;font-weight:600}

/* ---------- Steps ---------- */
.steps{background:var(--paper-2)}
.steps .steps__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:54px}
.steps .steps__head h2{font-family:var(--font-display);font-size:clamp(30px,4.4vw,58px);letter-spacing:-.02em}
.steps__lead{color:var(--ink-soft);max-width:30ch}
.tanze__eyebrow{color:var(--red)}
.steps .steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step{position:relative;padding-top:30px;border-top:2px solid var(--ink)}
.step .step__n{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--red);letter-spacing:.1em}
.step h3{font-family:var(--font-display);font-size:26px;line-height:1.12;margin:14px 0 12px}
.step p{color:var(--ink-soft);font-size:16.5px;margin:0}

/* ---------- Tänze ---------- */
.tanze__head{text-align:center;max-width:640px;margin:0 auto 56px}
.tanze__head h2{font-family:var(--font-display);font-size:clamp(32px,5vw,64px);letter-spacing:-.02em}
.tanze__head p{color:var(--ink-soft);margin-top:18px;font-size:19px}
.tanze__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tanz.wp-block-cover{aspect-ratio:3/4;border-radius:18px;overflow:hidden;align-items:flex-end;min-height:0}
/* Verlauf unter der Schrift. Die Stufen sind gemessen, nicht geraten: mit dem alten
   zweistufigen Verlauf lagen Bachata (3,67) und Kizomba (3,32) unter den 4,5, die die
   kleine weisse Schrift braucht. Der Knick bei 55/70% hebt genau das Band an, in dem
   Titel und Zeile stehen; oberhalb von 28% bleibt das Foto unberuehrt, damit die
   Gesichter klar bleiben. */
.tanz .wp-block-cover__background{background:linear-gradient(180deg,rgba(10,6,4,0) 28%,rgba(10,6,4,.42) 55%,rgba(10,6,4,.72) 70%,rgba(10,6,4,.88) 100%) !important;opacity:1 !important}
.tanz .wp-block-cover__inner-container{width:100%;padding:22px;color:#fff}
.tanz h3{font-family:var(--font-display);font-size:27px;margin:0;color:#fff}
.tanz p{font-size:14px;color:rgba(255,255,255,.82);margin:5px 0 0}
/* Badge im Textfluss (NICHT absolut): sitzt als Pille sauber ueber dem Titel und ueberdeckt ihn
   nicht; der inner-container behaelt seinen Default-z-index -> Titel/Texte bleiben ueber dem Overlay.
   .tanz .tanz__tag noetig, um die hoehere Spezifitaet von ".tanz p" zu schlagen. */
.tanz .tanz__tag{display:inline-block;margin:0 0 10px;background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:100px}
/* Ganze Tanz-Karte anklickbar: Stretched-Link ueber die Karte (relativ zur .tanz),
   sichtbarer "Mehr erfahren"-Hinweis als Affordance. Der Link liegt z-index ueber Bild+Text.
   WP positioniert .wp-block-cover__inner-container (position:relative) -> er ist der
   Bezugsrahmen des inset:0-Links. Damit der Link die GANZE Karte deckt (nicht nur den
   Textblock unten), strecken wir den inner-container auf volle Kartenhoehe und halten den
   Inhalt unten (flex column + justify-end). align-self:flex-start haelt die Tag-Pille schmal. */
.tanz{position:relative}
.tanz .wp-block-cover__inner-container{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
.tanz .tanz__tag{align-self:flex-start}
.tanz .tanz__link{position:absolute;inset:0;z-index:3}
.tanz .tanz__more{font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;margin:9px 0 0;opacity:.85;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.tanz:hover .tanz__more{opacity:1;transform:translateX(3px)}
.tanz:hover h3{text-decoration:underline;text-underline-offset:3px}

/* ---------- Stundenplan ---------- */
.plan-band{background:var(--paper-2)}
.plan-head{text-align:center;max-width:640px;margin:0 auto 52px}
.plan-head h2{font-family:var(--font-display);font-size:clamp(32px,5vw,64px);letter-spacing:-.02em}
.plan-head p{color:var(--ink-soft);margin-top:18px;font-size:19px}
/* Wochen-Raster (Kalender): Tage als gleich breite Spalten — Spaltenzahl folgt der Anzahl
   der Tagesspalten (auto-flow), damit z. B. ein Samstag per Pattern einfuegbar ist. */
.cal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;max-width:1080px;margin:0 auto;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
/* WP-Auto-"block-gap" (margin-block-start auf Nicht-erste-Kinder) im Kalender abschalten -> sonst
   sitzt Spalte 1 24px hoeher als der Rest; Abstaende kommen aus grid-/flex-gap. */
.cal>*,.cal__col>*,.cal__events>*{margin-block-start:0}
.cal__col{background:var(--paper);display:flex;flex-direction:column}
.cal__day{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.01em;text-align:center;
  margin:0;padding:14px 6px;color:var(--ink);background:var(--paper-2);border-bottom:1px solid var(--line)}
.cal__events{display:flex;flex-direction:column;gap:10px;padding:12px;flex:1}
.cal__ev{position:relative;border-radius:12px;padding:12px 12px 12px 24px;background:#fff;border:1px solid var(--line);
  overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cal__ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--ink)}
.cal__ev:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(27,19,16,.4)}
.cal__ev .cal__time{margin:0;font-weight:800;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cal__ev .cal__style{margin:3px 0 0;font-weight:700;font-size:14.5px;color:var(--ink)}
.cal__ev .cal__lvl{margin:7px 0 0;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
/* Saal — Stuttgart hat vier Tanzflaechen (La Pachanga, Barcelona, New York,
   Havanna — P-0016), es laufen also mehrere
   Kurse zur selben Zeit. Bewusst leiser als das Level: die Angabe muss da sein,
   soll das Raster aber nicht dominieren. */
.cal__ev .cal__raum{margin:4px 0 0;font-size:11px;font-weight:600;color:var(--ink-soft);opacity:.85}
.cal__ev .cal__raum::before{content:"⌂ ";opacity:.7}
/* Farbcodierung nach Tanzstil */
.cal__ev--salsa{background:rgba(229,3,47,.13)}
.cal__ev--salsa::before{background:var(--salsa)}
.cal__ev--salsa .cal__style{color:var(--salsa-deep)}
.cal__ev--salsa .cal__lvl{color:var(--salsa-deep)}
.cal__ev--bachata{background:rgba(227,150,0,.20)}
.cal__ev--bachata::before{background:var(--bachata)}
.cal__ev--bachata .cal__style{color:var(--bachata-deep)}
.cal__ev--bachata .cal__lvl{color:var(--bachata-deep)}
.cal__ev--kizomba{background:rgba(14,138,110,.16)}
.cal__ev--kizomba::before{background:var(--kizomba)}
.cal__ev--kizomba .cal__style{color:var(--kizomba-deep)}
.cal__ev--kizomba .cal__lvl{color:var(--kizomba-deep)}
.cal__ev--zouk{background:rgba(122,63,192,.16)}
.cal__ev--zouk::before{background:var(--zouk)}
.cal__ev--zouk .cal__style{color:var(--zouk-deep)}
.cal__ev--zouk .cal__lvl{color:var(--zouk-deep)}
.cal__ev--hiphop{background:rgba(27,106,201,.15)}
.cal__ev--hiphop::before{background:var(--hiphop)}
.cal__ev--hiphop .cal__style{color:var(--hiphop-deep)}
.cal__ev--hiphop .cal__lvl{color:var(--hiphop-deep)}
/* Legende (echte Bloecke: Gruppe + Absaetze -> im Editor pflegbar) */
.cal__legend{display:flex;justify-content:center;gap:24px;margin:24px 0 0;font-size:13.5px}
.cal__legend>*{margin-block-start:0}
.cal__key{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-soft);margin:0}
.cal__key::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--ink)}
.cal__key--salsa::before{background:var(--salsa)}
.cal__key--bachata::before{background:var(--bachata)}
.cal__key--kizomba::before{background:var(--kizomba)}
.cal__key--zouk::before{background:var(--zouk)}
.cal__key--hiphop::before{background:var(--hiphop)}
.plan__more{text-align:center;margin:42px auto 0;font-size:17px;color:var(--ink)}
.plan__hint{text-align:center;margin:10px auto 0;font-size:14px;color:var(--ink-soft)}
.plan__cta{margin-top:32px}

/* ---------- Stundenplan: lange Namen in engen Spalten (2026-11-12) ----------
   Das Wochenraster hat SIEBEN Tagesspalten. Selbst auf dem breitesten Schirm
   deckelt `max-width:1080px` sie bei 153 px, und davon gehen 62 px für
   Abstände, Rahmen und den Farbbalken ab — für den Text bleiben 91 px, bei
   1024 px Fenster sogar nur 72 px.

   „FORTGESCHRITTEN" braucht in Versalien 108 px und wurde deshalb
   **abgeschnitten**. Das fiel so lange nicht auf, weil `.cal__ev` auf
   `overflow:hidden` steht: Es gab nicht einmal einen Rollbalken als Hinweis.
   Betroffen waren außerdem „Mittelstufe", „Showgroup" und die Kursnamen
   „Hip Hop Fortgeschritten" und „Offener Übungsabend".
   Nachgemessen am 2026-11-12 bei 930 / 1000 / 1024 / 1280 / 1600 px.

   Drei Hebel, alle nur hier oben — unterhalb von 921 px steht der Tages-Stapel
   (weiter unten im Responsive-Teil), der reichlich Platz hat:
   1. Abstände straffen, Farbbalken von 10 auf 7 px: +12 px für den Text.
   2. Die Versalien etwas weniger sperren.
   3. Umbruch erlauben. Die weichen Trennstellen setzt `salsa_trennhilfe()` in
      `mu-plugins/45-salsa-stundenplan.php`; `overflow-wrap` ist nur das Netz
      für Wörter, die dort nicht aufgeführt sind.

   ⚠️ `hyphens:auto` allein reicht NICHT. Browser ohne deutsche Trennmuster
   trennen gar nicht — am 2026-11-12 nachgemessen, siehe `docs/GOTCHAS.md`.
   Wer die Trennhilfe im PHP entfernt, bekommt harte Brüche mitten im Wort
   („FORTGESCHRIT/TEN"). */
@media(min-width:921px){
  .cal__events{padding:10px}
  .cal__ev{padding:12px 10px 12px 18px}
  .cal__ev::before{width:7px}
  .cal__ev>p{hyphens:auto;overflow-wrap:break-word}
  .cal__ev .cal__lvl{letter-spacing:.03em}
}

/* ---------- Testimonial ---------- */
.quote{background:var(--night);color:var(--paper);position:relative;overflow:hidden;text-align:center}
.quote::before{content:"\201C";position:absolute;top:-.18em;left:24px;font-family:var(--font-serif);font-style:italic;font-size:clamp(220px,30vw,440px);color:rgba(229,3,47,.16);line-height:1;z-index:0}
.quote .wrap{position:relative;z-index:1;max-width:980px}
.quote .quote__stars{color:var(--red);font-size:20px;letter-spacing:4px;margin-bottom:26px}
.quote blockquote,.quote .quote__text{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(28px,4.6vw,56px);line-height:1.18;letter-spacing:-.01em;margin:0;color:var(--paper)}
.quote .quote__by{margin-top:30px;font-size:15px;letter-spacing:.06em;color:rgba(255,255,255,.66);text-transform:uppercase;font-weight:600}

/* ---------- Final CTA ---------- */
.cta-band{background:radial-gradient(120% 120% at 68% 42%,#2a0b10 0%,var(--night) 60%);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band .wrap{position:relative;z-index:1;max-width:760px}
.cta-band .eyebrow{color:rgba(255,255,255,.85);margin-bottom:18px}
.cta-band h2{font-family:var(--font-display);font-size:clamp(36px,6vw,82px);color:#fff;letter-spacing:-.02em}
.cta-band p{margin:22px auto 36px;font-size:19px;max-width:34ch;color:rgba(255,255,255,.92)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background:radial-gradient(45% 60% at 16% 22%,rgba(229,3,47,.40),transparent 62%),radial-gradient(52% 72% at 88% 92%,rgba(176,18,42,.42),transparent 64%)}
/* CTA-Button auf dem dunklen Band: rot statt dunkel (ueberschreibt is-dark) */
.cta-band .wp-block-button.is-dark .wp-block-button__link{background:var(--red);color:#fff;box-shadow:0 10px 30px -8px rgba(229,3,47,.55)}
.cta-band .wp-block-button.is-dark .wp-block-button__link:hover{background:var(--red-deep)}

/* ---------- Preise ---------- */
.preise-band{background:var(--paper)}
.price-head{text-align:center;max-width:640px;margin:0 auto 52px}
.price-head h2{font-family:var(--font-display);font-size:clamp(32px,5vw,64px);letter-spacing:-.02em}
.price-head p{color:var(--ink-soft);margin-top:18px;font-size:19px}
.price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
.price__grid>*{margin-block-start:0}
.price__card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:34px 26px;text-align:center}
.price__card>*{margin-block-start:0}
.price__card--featured{background:var(--night);color:var(--paper);border-color:var(--night);position:relative;box-shadow:0 30px 60px -28px rgba(0,0,0,.5)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);margin:0;background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.price__name{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--red-deep);margin:0}
.price__card--featured .price__name{color:#ff9a86}
.price__amount{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.4vw,48px);line-height:1.05;letter-spacing:-.02em;margin:10px 0 2px}
.price__per{font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--ink-soft)}
.price__card--featured .price__per{color:rgba(255,255,255,.7)}
.price__period{font-size:14px;color:var(--ink-soft);margin:0 0 16px}
.price__card--featured .price__period{color:rgba(255,255,255,.7)}
/* Staffel-Leiter: Laufzeit (12/6/3/1 Mon.) -> Monatspreis; je laenger, desto guenstiger */
.price__terms{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 22px;width:100%}
.price__terms>*{margin-block-start:0}
.price__term{background:rgba(27,19,16,.045);border-radius:10px;padding:10px 4px;text-align:center}
.price__term>*{margin-block-start:0}
.price__card--featured .price__term{background:rgba(255,255,255,.06)}
.price__term--best{background:rgba(229,3,47,.10);outline:1px solid rgba(229,3,47,.35);outline-offset:-1px}
.price__card--featured .price__term--best{background:rgba(229,3,47,.24);outline-color:rgba(255,154,134,.55)}
.price__term-d{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);margin:0;white-space:nowrap}
.price__card--featured .price__term-d{color:rgba(255,255,255,.6)}
.price__term-p{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink);margin:4px 0 0;line-height:1}
.price__card--featured .price__term-p{color:#fff}
.price__features{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;text-align:left;font-size:15px}
.price__features li{position:relative;padding-left:28px;color:var(--ink);margin:0}
.price__card--featured .price__features li{color:rgba(255,255,255,.9)}
.price__features li::before{content:"";position:absolute;left:2px;top:5px;width:13px;height:8px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
/* Preis-Karten farblich dem Tanzstil zugeordnet (konsistent mit Stundenplan) */
.price__card--salsa{background:rgba(229,3,47,.07);border-color:rgba(229,3,47,.32);box-shadow:inset 0 4px 0 var(--salsa)}
.price__card--salsa .price__name{color:var(--salsa-deep)}
.price__card--salsa .price__features li::before{border-color:var(--salsa)}
.price__card--bachata{background:rgba(227,150,0,.24);border-color:rgba(227,150,0,.5);box-shadow:inset 0 4px 0 var(--bachata)}
.price__card--bachata .price__name{color:var(--bachata-deep)}
.price__card--bachata .price__features li::before{border-color:var(--bachata)}
.price__card--kizomba{background:rgba(14,138,110,.08);border-color:rgba(14,138,110,.32);box-shadow:inset 0 4px 0 var(--kizomba)}
.price__card--kizomba .price__name{color:var(--kizomba-deep)}
.price__card--kizomba .price__features li::before{border-color:var(--kizomba)}
.price__card .wp-block-buttons{margin-top:auto;justify-content:center;display:flex}
.price__note{text-align:center;margin:30px auto 0;font-size:13.5px;color:var(--ink-soft);font-style:italic;max-width:640px}

/* ---------- Erfolge / Auszeichnungen ---------- */
.creds-band{background:var(--night);color:var(--paper);text-align:center}
.creds-band .wrap>*{margin-block-start:0}
.creds-band .eyebrow{color:var(--red);display:flex;justify-content:center}
.creds-band h2{font-family:var(--font-display);font-size:clamp(30px,4.6vw,58px);letter-spacing:-.02em;color:#fff;max-width:18ch;margin:14px auto 0}
.creds-band h2 .serif{color:#fff}
.creds__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:18px;overflow:hidden;max-width:980px;margin:44px auto 0}
.creds__grid>*{margin-block-start:0}
.cred{background:rgba(255,255,255,.02);padding:30px 18px}
.cred>*{margin-block-start:0}
.cred__n{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1;color:var(--red);letter-spacing:-.02em;margin:0}
.cred__l{font-size:13.5px;color:rgba(255,255,255,.72);margin:12px 0 0;font-weight:600;line-height:1.35}
.creds__note{margin:34px auto 0;font-size:17px;color:rgba(255,255,255,.82);max-width:62ch;line-height:1.6}
.creds__hint{margin:14px auto 0;font-size:13px;color:rgba(255,255,255,.45);font-style:italic}

/* ---------- Standort / Anfahrt ---------- */
.standort__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.standort__grid>*{margin-block-start:0}
.standort__info>*{margin-block-start:0}
.standort__info h2{font-family:var(--font-display);font-size:clamp(30px,4.4vw,54px);letter-spacing:-.02em;margin:14px 0 0}
.standort__addr{font-size:19px;line-height:1.55;margin:24px 0 0;color:var(--ink)}
.standort__hint{color:var(--ink-soft);margin:14px 0 28px;font-size:16px}
.standort__map{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/11;box-shadow:0 26px 60px -34px rgba(27,19,16,.5)}
.standort__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92)}
.map-consent{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:clamp(20px,4vw,40px);background:var(--paper-2);color:var(--ink)}
.map-consent__title{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.4vw,21px);margin:0}
.map-consent__txt{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:34ch;margin:0}
.map-consent__txt a{color:var(--red-deep)}
.map-consent__btn{margin-top:4px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--paper);background:var(--red);border:0;border-radius:999px;padding:11px 22px;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.map-consent__btn:hover{background:var(--red-deep);transform:translateY(-1px)}
.map-consent__btn:focus-visible{outline:2px solid var(--red-deep);outline-offset:3px}
@media(max-width:920px){
  .price__grid{grid-template-columns:1fr;max-width:420px}
}
@media(max-width:860px){
  .standort__grid{grid-template-columns:1fr;gap:26px}
  .standort__map{order:-1;aspect-ratio:16/10}
}
@media(max-width:760px){
  .creds__grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Footer (echte Bloecke: columns/list/social-links -> Site-Editor-pflegbar) ---------- */
.site-footer{background:var(--night);color:rgba(255,255,255,.72);padding:80px 0 36px}
.site-footer .footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-light)}
.site-footer .footer__top>.wp-block-column{width:auto;flex:none}
.site-footer .wp-block-column>*{margin-block-start:0}
.site-footer img{height:40px;margin-bottom:20px;width:auto}
.site-footer .footer-logo{display:block;width:150px;height:40px;background:url(../img/logo-light.png) left center/contain no-repeat;margin-bottom:20px}
.site-footer .footer__about{font-size:15px;max-width:34ch;color:rgba(255,255,255,.6)}
.site-footer h4{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.site-footer .footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.site-footer .footer__list li{margin:0}
.site-footer .footer__list a{font-size:15px;color:rgba(255,255,255,.7);transition:color .2s;text-decoration:none}
.site-footer .footer__list a:hover{color:var(--red)}
.site-footer .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:26px;font-size:13.5px;color:rgba(255,255,255,.5)}
.site-footer .footer__bottom>*{margin-block-start:0}
.site-footer .footer__bottom p{margin:0}
.site-footer .footer__bottom a{color:inherit}
/* Social-Links (core/social-links, Stil "nur Logos"): runde El-Calor-Buttons */
.site-footer .footer__social{display:flex;flex-direction:row;gap:14px !important;margin:0;padding:0}
.site-footer .footer__social .wp-block-social-link{margin:0;background:none}
.site-footer .footer__social .wp-block-social-link a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-light);transition:all .2s;text-decoration:none;padding:0}
.site-footer .footer__social .wp-block-social-link a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- Unterseiten (nicht Startseite): Header solide, Inhalt lesbar ---------- */
body:not(.home) .hdr,body:not(.home) .hdr.at-top{background:rgba(251,246,238,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
body:not(.home) .hdr .nav a{color:var(--ink);opacity:1}
body:not(.home) .logo--light{opacity:0}
body:not(.home) .logo--dark{opacity:1}
.page-main{padding-top:clamp(110px,14vh,160px)}
.legal{max-width:820px;margin:0 auto;padding:0 32px}
.legal h1{font-size:clamp(32px,5vw,54px);margin:0 0 1.2rem}
.legal h2{font-family:var(--font-display);font-size:clamp(22px,3vw,30px);margin:2.2rem 0 .6rem;color:var(--ink)}
.legal h3{font-family:var(--font-display);font-size:1.2rem;margin:1.4rem 0 .4rem}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1rem;padding-left:1.2rem}
.legal a{color:var(--red)}
.legal .note{background:var(--paper-2);border-left:3px solid var(--red);padding:1rem 1.2rem;border-radius:0 8px 8px 0;color:var(--ink-soft);font-size:.95rem}

/* ---------- Reveal-on-Scroll ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .intro{grid-template-columns:1fr;gap:40px}
  .site-footer .footer__top{grid-template-columns:1fr 1fr;gap:34px}
  .tanze__grid{grid-template-columns:repeat(2,1fr)}
  /* Kalender: Tages-Stapel statt Spalten; Kurse 2-spaltig je Tag */
  .cal{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;max-width:600px}
  .cal__day{text-align:left;padding:13px 16px;font-size:16px}
  .cal__events{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  /* mobil: Burger (core/navigation-Overlay) + kompakter CTA-Button */
  .hdr .hdr-inner{gap:14px;padding:18px 20px}
  .hdr .hdr-cta .wp-block-button__link{padding:10px 16px;font-size:14px}
  .steps .steps__grid{grid-template-columns:1fr;gap:0}
  .step{padding:24px 0;border-top:1px solid var(--line)}
  .step:first-child{border-top:2px solid var(--ink)}
  /* Kalender mobil: ein Kurs je Reihe, Karte horizontal & kompakt (1 Zeile statt 3) */
  .cal__events{grid-template-columns:1fr;gap:8px;padding:10px}
  .cal__ev{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;padding:11px 14px 11px 16px}
  .cal__ev .cal__time{margin:0;font-size:15px}
  .cal__ev .cal__style{margin:0;font-size:14.5px}
  .cal__ev .cal__lvl{margin:0 0 0 auto;font-size:11px}
  .cal__day{padding:11px 16px}
  .cal__legend{flex-wrap:wrap;gap:14px 24px}
}
@media(max-width:460px){
  .tanze__grid{grid-template-columns:1fr}
  .site-footer .footer__top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .events__stage>.event-slide{transition:none}
  .reveal{opacity:1 !important;transform:none !important}
  .hero::before,.hero::after{animation:none !important}
}

/* ===================================================================
   Über-uns-Unterseiten (Team / Tanzlehrer) — eigenes Template page-sub
   =================================================================== */
.page-sub{padding-top:clamp(104px,13vh,150px)}
.team-intro{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.team-intro .eyebrow{margin-bottom:16px}
.team-intro h1{font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.02em;font-size:clamp(38px,6.4vw,72px);margin:0 0 18px}
.team-intro .team-lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:62ch;margin:0}
.team-intro .team-note{margin-top:16px;font-size:13.5px;color:var(--ink-soft);font-style:italic}

/* Generischer Unterseiten-Intro (Privatkurse / Gutscheine / FAQ …) */
.page-intro{max-width:var(--maxw);margin:0 auto;padding:0 32px 8px}
.page-intro>*{margin-block-start:0}
.page-intro .eyebrow{margin-bottom:16px}
.page-intro h1{font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.02em;font-size:clamp(38px,6.4vw,72px);margin:0 0 18px}
.page-intro .page-lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:60ch;margin:0}
.page-intro .team-note{margin-top:16px;font-size:13.5px;color:var(--ink-soft);font-style:italic}

/* Prosa-Spalte (lesbarer Fließtext auf Unterseiten) */
.prose{max-width:820px}
.prose>*{margin-block-start:0}
.prose h2{font-family:var(--font-display);font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;margin:0 0 18px}
/* Luft ÜBER einer Zwischenüberschrift — und zwar mehr als darunter (18px),
   damit sie zum folgenden Text gehört und nicht zum vorangehenden.
   Nötig geworden am 2026-11-10: bis dahin stand in einem .prose-Block fast
   immer nur EINE h2, direkt am Anfang, wo der Abschnitt selbst schon Luft
   gibt. Seit /raeume/ vier Zwischenüberschriften hat, klebten sie am
   Absatz darüber. Betrifft genauso /kursinhalte/ (7 h2) und /fragen/ (6).
   Die erste bleibt ausgenommen, sonst entsteht dort doppelte Luft. */
.prose>h2:not(:first-child){margin-top:clamp(40px,5vw,64px)}
.prose p{color:var(--ink-soft);font-size:18px;line-height:1.65;margin:0 0 16px;max-width:62ch}
.prose .prose__list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:62ch}
/* Was nach einer Hakenliste kommt, braucht Luft. Die Liste selbst hat unten keinen
   Abstand, und `.prose>*{margin-block-start:0}` loescht den des naechsten Blocks —
   der Absatz klebte an der Liste (2026-11-10, Festival-Liste auf /raeume/). Nur wenn
   wirklich etwas folgt, sonst entstuende am Abschnittsende doppelte Luft. */
.prose .prose__list + *{margin-top:clamp(20px,2.4vw,30px)}
.prose .prose__list li{position:relative;padding-left:30px;font-size:18px;color:var(--ink);line-height:1.5}
.prose .prose__list li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:9px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}
.prose .prose__list li strong{color:var(--ink);font-weight:700}
.prose .prose__rate{font-size:18px;color:var(--ink);margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px;max-width:62ch}
.prose .prose__note{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft);font-style:italic;font-weight:400}

/* Chips (Anlässe o. ä.) */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.chips>*{margin-block-start:0}
.chip{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:15px;font-weight:600;color:var(--ink)}

/* FAQ-Akkordeon (native core/details) */
.faq{max-width:820px;display:flex;flex-direction:column;gap:12px}
.faq>*{margin-block-start:0}
.faq .faq__item{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden}
.faq .faq__item summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2vw,20px);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .2s}
.faq .faq__item summary::-webkit-details-marker{display:none}
.faq .faq__item summary::after{content:"+";font-family:var(--font-body);font-weight:400;font-size:26px;line-height:1;color:var(--red);flex:0 0 auto;transition:transform .25s var(--ease)}
.faq .faq__item[open] summary::after{transform:rotate(45deg)}
.faq .faq__item summary:hover{color:var(--red-deep)}
.faq .faq__item>p,.faq .faq__item .wp-block-paragraph{margin:0;padding:0 24px 22px;color:var(--ink-soft);font-size:16.5px;line-height:1.6;max-width:64ch}
.faq .faq__item a{color:var(--red);font-weight:600}

/* ---------- Anmeldung vorbereiten (/anmeldung/) ----------
   ⚠️ Der Kasten oben ist keine Deko. Er sagt, dass hier KEIN Vertrag zustande
   kommt — davon haengt ab, dass die Seite ohne Kuendigungsbutton und
   Widerrufsbelehrung auskommt (§ 312k, § 312g BGB). Deshalb traegt er die
   Signalfarbe und steht vor allem anderen. Nicht kleiner machen, nicht nach
   unten schieben. Begruendung: mu-plugins/71-salsa-anmeldung.php. */
.anm-klarstellung{margin:0;padding:18px 22px;border-radius:14px;
  background:rgba(229,3,47,.07);box-shadow:inset 0 0 0 1px rgba(229,3,47,.22);
  font-size:16px;line-height:1.6;color:var(--ink);max-width:68ch}
.anm-klarstellung strong{color:var(--red-deep)}

.anm-waehlen{border:0;padding:0;margin:0 0 22px;min-width:0}
.anm-waehlen legend{padding:0;margin:0 0 12px;font-weight:700;font-size:15px;
  color:var(--ink)}
.anm-paesse{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
/* Die ganze Karte ist die Schaltflaeche — ein 2 mm grosser Radiopunkt waere auf
   dem Handy nicht zu treffen. Der Punkt selbst bleibt sichtbar, damit man sieht,
   dass man genau eines waehlt. */
.anm-pass{display:grid;gap:3px;padding:14px 16px;border-radius:13px;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);
  cursor:pointer;min-width:0;
  transition:box-shadow .18s var(--ease),background .18s var(--ease)}
.anm-pass input{margin:0 0 5px;accent-color:var(--red)}
.anm-pass__name{font-weight:700;font-size:16px;color:var(--ink)}
.anm-pass__wofuer{font-size:13.5px;color:var(--ink-soft)}
.anm-pass__preis{font-size:13.5px;font-weight:700;color:var(--red-deep);
  font-variant-numeric:tabular-nums}
.anm-pass:has(input:checked){background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--red)}
.anm-pass:has(input:focus-visible){outline:2px solid var(--red-deep);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .anm-pass:hover{box-shadow:inset 0 0 0 1.5px rgba(229,3,47,.45)}
}

/* Antworten aus mehreren Absaetzen (z. B. die Preisfrage). Der Abstand sitzt am
   Kasten, nicht an jedem Absatz — sonst klafft zwischen zwei Absaetzen eine
   Luecke und unter dem letzten keine. */
.faq .faq__item .faq__antwort{padding:0 24px 22px;max-width:64ch}
.faq .faq__item .faq__antwort p{margin:0 0 11px;color:var(--ink-soft);
  font-size:16.5px;line-height:1.6}
.faq .faq__item .faq__antwort p:last-child{margin-bottom:0}

/* Eine Farbe je Themengruppe. Kia am 2026-11-04: „ein bisschen farbfreudig, ein
   bisschen Design drin steckt und nicht nur einfach die Texte draufgeklatscht."
   Die Farbe sitzt als schmaler Streifen links am Kasten und am Pluszeichen —
   sie ordnet, statt zu schmuecken. Geoeffnet wird der Streifen breiter, damit
   man sieht, wo man gerade ist. */
.faq[class*="faq--"] .faq__item{position:relative;padding-left:4px}
.faq[class*="faq--"] .faq__item::before{content:"";position:absolute;
  inset:0 auto 0 0;width:4px;background:var(--faq-farbe);
  transition:width .2s var(--ease)}
.faq[class*="faq--"] .faq__item[open]::before{width:7px}
.faq[class*="faq--"] .faq__item summary::after{color:var(--faq-farbe)}
.faq[class*="faq--"] .faq__item summary:hover{color:var(--faq-farbe)}
.faq--salsa{--faq-farbe:var(--salsa)}
.faq--bachata{--faq-farbe:var(--bachata-deep)}
.faq--kizomba{--faq-farbe:var(--kizomba)}
.faq--zouk{--faq-farbe:var(--zouk)}

/* Team-Karten-Grid (3 -> 2 -> 1), Idiom wie .tanze__grid */
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.team__grid>*{margin-block-start:0}
.team__card{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center}
.team__card>*{margin-block-start:0}
.team__card figure{margin:0 0 16px}
.team__card figure{position:relative}
.team__card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:12px;display:block;cursor:zoom-in}
.team__card .team__ph{width:100%;aspect-ratio:4/5;border-radius:12px;margin:0 0 16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--paper) 0%,#EBDFC9 100%);border:1px solid var(--line);color:var(--red);font-family:var(--font-serif);font-style:italic;font-size:clamp(64px,9vw,92px);line-height:1;-webkit-user-select:none;user-select:none}
/* nativer WP-Lightbox-Button oben rechts übers Foto */
.team__card .wp-lightbox-container button.lightbox-trigger{top:10px;right:10px}
/* Lightbox-Großansicht: GANZES Bild zeigen (Default cover + 4:5-Box der Thumbnails
   beschnitt sonst hochformatige Fotos) */
.wp-lightbox-overlay img,.wp-lightbox-overlay .wp-block-image img{object-fit:contain !important;object-position:center !important}
.team__card h3{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.15;margin:0 0 6px;color:var(--ink)}
.team__role{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red-deep);margin:0 0 10px}
.team__bio{font-size:15px;line-height:1.5;color:var(--ink-soft);margin:0}
@media(max-width:920px){.team__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.team__grid{grid-template-columns:1fr}}

/* ===== Probestunde-Formular (salsa/probekurs) ============================ */
.pk-trust{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;font-size:14.5px;font-weight:600;color:var(--ink-soft);margin:0 auto 30px;max-width:680px;text-align:center}
.probekurs{max-width:560px;margin:0 auto}
.pk-form>*{margin-block-start:0}
.pk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pk-field{margin:0 0 18px}
.pk-field label,.pk-consent>span{font-family:var(--font-body)}
.pk-field>label{display:block;font-weight:600;font-size:14.5px;color:var(--ink);margin:0 0 7px}
.pk-req{color:var(--red)}
.pk-opt{font-weight:400;color:var(--ink-soft)}
.pk-field input,.pk-field select,.pk-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-height:50px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.pk-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.pk-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B1310' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.pk-field input:focus,.pk-field select:focus,.pk-field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(229,3,47,.18)}
.pk-field input::placeholder,.pk-field textarea::placeholder{color:var(--ink-soft);opacity:.7}
/* Fehlerzustand */
.pk-field.has-error input,.pk-field.has-error select,.pk-field.has-error textarea,.pk-consent.has-error input{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,3,47,.14)}
.pk-err{display:block;color:var(--red-deep);font-size:13px;line-height:1.4;margin-top:6px}
.pk-err:empty{margin:0}
/* Consent-Zeile */
.pk-consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-soft);margin:2px 0 8px;cursor:pointer}
.pk-consent input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red);cursor:pointer}
.pk-consent a{color:var(--red-deep);text-decoration:underline;text-underline-offset:2px}
/* Honeypot — off-screen, NICHT display:none (manche Bots überspringen sonst) */
.pk-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Turnstile-Widget */
.cf-turnstile{margin:14px 0 18px;min-height:65px}
/* Submit — gleiche Pill-Optik wie .wp-block-button__link */
.pk-submit{font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1;color:#fff;background:var(--red);border:0;border-radius:10px;padding:17px 32px;cursor:pointer;box-shadow:0 10px 30px -8px rgba(229,3,47,.55);transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.pk-submit:hover{transform:translateY(-2px);background:var(--red-deep)}
.pk-submit:focus-visible{outline:3px solid rgba(229,3,47,.4);outline-offset:3px}
.pk-submit:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
/* Ergebnis-/Fehlerzeile */
.pk-result{font-size:14.5px;margin:14px 0 0}
.pk-result:empty{margin:0}
.pk-result.is-error{color:var(--red-deep);font-weight:600}
.pk-noscript{display:block;font-size:14px;color:var(--ink-soft);margin-top:12px}
/* Erfolgs-Panel (ersetzt das Formular) */
.pk-success{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:34px 28px;text-align:center;max-width:560px;margin:0 auto}
.pk-success>*{margin-block-start:0}
.pk-success__h{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,4vw,32px);color:var(--ink);margin:0 0 10px}
.pk-success p:not(.pk-success__h){font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0}
@media(max-width:520px){.pk-row{grid-template-columns:1fr;gap:0}}


/* ---------- Ferien & Feiertage (mu-plugins/45-ferien.php) ----------
   Der Balken erscheint NUR, wenn Ferien laufen oder in Kuerze beginnen —
   ausserhalb dieser Zeitraeume gibt der Shortcode nichts aus, dann ist hier
   auch kein Platzhalter im Layout. */
/* ACHTUNG: .hdr ist position:fixed mit z-index:100 und liegt damit UEBER dem Balken.
   Ohne den oberen Abstand verdeckt der Header Text, Logo und Probestunde-Button
   gegenseitig. --hdr-h ist die Header-Hoehe im Ausgangszustand:
   22px Polster + 38px Logo + 22px Polster = 82px, mobil 18+38+18 = 74px. */
.ferien-balken{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 16px;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--hdr-h) + 12px) 32px 16px;
  background:var(--paper-2);border-bottom:2px solid var(--red);
  font-family:var(--font-body);font-size:15px;line-height:1.45;color:var(--ink);text-align:center}
.ferien-balken__text{font-weight:600}
/* Wegklicken. Steht rechts und faellt bewusst NICHT auf - wer den Hinweis
   braucht, soll ihn lesen, nicht zuerst das Kreuz finden. Auf den Kontakt- und
   Schnupperseiten gibt es den Knopf gar nicht erst (Kia, 2026-11-03). */
.ferien-balken__zu{flex:none;margin:0;padding:2px 9px;border:0;border-radius:6px;
  background:transparent;color:var(--ink-soft);font-size:20px;line-height:1;
  cursor:pointer;transition:background .2s,color .2s}
.ferien-balken__zu:hover{background:rgba(27,19,16,.08);color:var(--ink)}
.ferien__link{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ferien__link:hover{color:var(--red-deep)}
/* Im Balken das dunklere Rot: das Standardrot kommt auf dem hellen Papierton nur
   auf 4,20:1 und verfehlt damit die 4,5 fuer AA (gemessen 2026-11-03, 15px fett
   zaehlt nicht als Grossschrift). Mit --red-deep sind es 6,21:1. */
.ferien-balken .ferien__link{color:var(--red-deep)}
.ferien-balken .ferien__link:hover{color:var(--red)}

/* Kompakte Variante, z. B. unter dem Stundenplan. */
.ferien-zeile{margin:14px auto 0;max-width:70ch;padding:12px 18px;
  background:rgba(229,3,47,.06);border-left:3px solid var(--red);border-radius:4px;
  font-size:15px;line-height:1.5;color:var(--ink);text-align:left}

/* Uebersichtstabellen auf /ferien/. Schmale Bildschirme: seitlich scrollbar,
   damit die Seite selbst nie horizontal laeuft. */
.ferien-tabelle{margin:24px 0}
.ferien-tabelle__titel{margin:40px 0 12px;font-family:var(--font-display);font-size:22px}
.ferien-tabelle__t{width:100%;border-collapse:collapse;margin:0 0 8px;
  font-family:var(--font-body);font-size:15px;line-height:1.45;
  display:block;overflow-x:auto;white-space:nowrap}
.ferien-tabelle__t th,.ferien-tabelle__t td{padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.ferien-tabelle__t thead th{font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--line)}
.ferien-tabelle__t tbody th{font-weight:700;color:var(--ink)}
.ferien-tabelle__t tr.is-jetzt{background:rgba(229,3,47,.08)}
.ferien-tabelle__t tr.is-jetzt th:first-child::after{content:" — jetzt";color:var(--red);font-weight:700}
.ferien-tabelle__t tr.is-vorbei{opacity:.5}
@media(min-width:760px){
  .ferien-tabelle__t{display:table;white-space:normal}
}

/* ---------- Hinweis auf eine andere Filiale ----------
   Bewusst NICHT rot: Rot signalisiert Dringlichkeit (Ferien, Ausfall). Ein Verweis auf
   eine Schwesterfiliale ist eine Information, kein Alarm. Akzent ist deshalb die
   Kizomba-Farbe aus theme.json. Wiederverwendbar fuer weitere Filial-Hinweise. */
.filial-box{max-width:62ch;margin:28px auto 0;padding:22px 26px;text-align:left;
  background:var(--paper-2);border-left:4px solid var(--kizomba);border-radius:6px}
.filial-box__label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kizomba-deep);margin:0 0 6px}
.filial-box h3{font-family:var(--font-display);font-size:20px;line-height:1.25;margin:0 0 10px}
.filial-box p{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0 0 12px}
.filial-box__zeiten{list-style:none;margin:0 0 12px;padding:0;
  font-size:15.5px;line-height:1.7;font-variant-numeric:tabular-nums}
.filial-box__zeiten strong{display:inline-block;min-width:12.5em}
.filial-box__adresse{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px}
.filial-box a{color:var(--kizomba-deep);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.filial-box a:hover{color:var(--kizomba)}
@media(max-width:560px){
  .filial-box__zeiten strong{display:block;min-width:0}
}

/* ---------- Kopfzeile ueber dem Ferienbalken ----------
   Auf der Startseite ist Logo und Menue im Ausgangszustand weiss (ueber dem dunklen Hero).
   Steht oben der helle Ferienbalken, waere davon nichts zu sehen. Die Klasse setzt
   mu-plugins/45-ferien.php nur dann, wenn der Balken wirklich erscheint.
   Gleiche Spezifitaet wie die Weiss-Regeln, steht aber spaeter -> gewinnt. */
body.hat-ferienbalken .hdr.at-top .logo--light{opacity:0}
body.hat-ferienbalken .hdr.at-top .logo--dark{opacity:1}
body.hat-ferienbalken .hdr.at-top .nav{color:var(--ink)}
body.hat-ferienbalken .hdr.at-top .nav a{color:var(--ink);opacity:.85}
body.hat-ferienbalken .hdr.at-top .wp-block-navigation__responsive-container-open{color:var(--ink)}

/* ---------- Preistabelle auf /preise/ ----------
   Core-Tabellenblock, nur lesbarer gemacht. Schmale Bildschirme: seitlich scrollbar,
   damit die Seite selbst nie horizontal laeuft. */
.preis-tabelle{margin:26px 0}
.preis-tabelle table{width:100%;border-collapse:collapse;font-family:var(--font-body);
  font-size:15.5px;font-variant-numeric:tabular-nums;display:block;overflow-x:auto;white-space:nowrap}
.preis-tabelle th,.preis-tabelle td{padding:13px 16px;text-align:left;
  border-bottom:1px solid var(--line)}
.preis-tabelle thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;border-bottom:2px solid var(--line)}
.preis-tabelle tbody th{font-weight:700;color:var(--ink)}
.preis-tabelle tbody td:first-of-type{color:var(--red);font-weight:700}
.preis-tabelle tr:last-child th,.preis-tabelle tr:last-child td{border-bottom:none}
@media(min-width:760px){.preis-tabelle table{display:table;white-space:normal}}

/* ---------- Kursinhalte: je Tanz ein Band, je Level eine Karte ----------
   Kia am 2026-11-02: „Kursinhalte schöner gestalten … Farben auch anwenden.
   Von Level zu Level so unterschiedliche Farben."
   Umgesetzt als zwei Ebenen: die FARBE sagt, welcher Tanz (wie überall auf der
   Seite), die INTENSITÄT sagt, welches Level — A1 hell, A3 kräftig. So bleibt
   die Farbsprache der Seite heil und die Stufen sind trotzdem unterscheidbar. */
.kurs-tanz{padding:clamp(46px,6vw,84px) 0}
.kurs-tanz--salsa{background:rgba(229,3,47,.045)}
.kurs-tanz--bachata{background:rgba(227,150,0,.075)}
.kurs-tanz--kizomba{background:rgba(14,138,110,.055)}
.kurs-tanz--zouk{background:rgba(122,63,192,.055)}
.kurs-tanz__kopf{display:flex;align-items:center;gap:20px;margin:0 0 28px}
.kurs-tanz__kopf>*{margin-block-start:0}
/* object-position: die vier Fotos sind hochkant 3:4; ein mittiger Quadrat-Ausschnitt
   landet auf dem Oberkoerper und schneidet die Koepfe an. 20% holt die Gesichter herein. */
.kurs-tanz__foto{width:88px;height:88px;border-radius:18px;object-fit:cover;object-position:50% 20%;flex:none;display:block;
  box-shadow:0 12px 28px -16px rgba(27,19,16,.55);outline:1px solid rgba(255,255,255,.5);outline-offset:-1px}
/* Zwei Fotos eines Tanzes gehoeren enger zusammen als zum Titel daneben. */
.kurs-tanz__foto + .kurs-tanz__foto{margin-left:-10px}
.kurs-tanz__kopf h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;margin:0;
  font-size:clamp(30px,4.2vw,50px)}
.kurs-tanz--salsa .kurs-tanz__kopf h2{color:var(--salsa-deep)}
.kurs-tanz--bachata .kurs-tanz__kopf h2{color:var(--bachata-deep)}
.kurs-tanz--kizomba .kurs-tanz__kopf h2{color:var(--kizomba-deep)}
.kurs-tanz--zouk .kurs-tanz__kopf h2{color:var(--zouk-deep)}

/* Eine Farbe je Tanz, einmal als RGB-Tripel — damit die Stufen weiter unten
   mit rgba(var(--tanz), …) arbeiten koennen. */
.kurs-stufe--salsa{--tanz:229,3,47;--tanz-text:var(--salsa-deep)}
.kurs-stufe--bachata{--tanz:227,150,0;--tanz-text:var(--bachata-deep)}
.kurs-stufe--kizomba{--tanz:14,138,110;--tanz-text:var(--kizomba-deep)}
.kurs-stufe--zouk{--tanz:122,63,192;--tanz-text:var(--zouk-deep)}

/* Eine Karte je Level. Kia am 2026-11-02: „die Level und die Beschreibung von
   Level, alle mit der gleichen Schriftgroesse … am besten die Level mit so einem
   Hintergrundfarbe markieren, und die Texte dann darunter."
   Darum nur noch VIER Groessen auf der ganzen Seite: 22 Titel der Stufe,
   16 Fliesstext, 15 Zwischentitel, 14 Plaettchen; dazu 11,5 fuer die Labels.
   Die Stufe steckt im farbigen Kopfbalken, nicht mehr in der ganzen Flaeche. */
.kurs-stufe{background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin:0 0 16px}
.kurs-stufe>*{margin-block-start:0}

.kurs-stufe__kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 26px;background:rgba(var(--tanz),.10);
  border-bottom:1px solid rgba(var(--tanz),.22)}
.kurs-stufe--a2 .kurs-stufe__kopf{background:rgba(var(--tanz),.17)}
.kurs-stufe--a3 .kurs-stufe__kopf{background:rgba(var(--tanz),.26)}
.kurs-stufe__kopf>*{margin-block-start:0}
.kurs-stufe__abzeichen{flex:none;margin:0;padding:6px 13px;border-radius:8px;
  background:rgb(var(--tanz));color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.25}
/* Gold ist zu hell fuer weisse Schrift (WCAG AA) */
.kurs-stufe--bachata .kurs-stufe__abzeichen{color:#241813}
/* Und das Gruen muss fuer weisse Schrift bei 12 px eine Spur dunkler sein als
   die Bandfarbe: gemessen 4,30 statt der noetigen 4,5. */
.kurs-stufe--kizomba .kurs-stufe__abzeichen{background:#0C8368}
.kurs-stufe__kopf h3{font-family:var(--font-display);font-weight:700;margin:0;
  letter-spacing:-.01em;font-size:22px;line-height:1.2;color:var(--tanz-text)}

.kurs-stufe__koerper{padding:22px 26px 24px}
.kurs-stufe__koerper>*{margin-block-start:0}
/* „Ziel" ist ein Label ueber dem Satz, kein fettes Wort mittendrin. */
.kurs-stufe__ziel{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:66ch}
.kurs-stufe__ziel strong{display:block;margin:0 0 3px;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tanz-text)}

/* Zwei Arten von Zwischentitel — der Unterschied liegt in Farbe und Linie,
   nicht in der Schriftgroesse. */
.kurs-stufe__gruppe{font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tanz-text);margin:26px 0 0;padding-top:15px;
  border-top:1px solid rgba(var(--tanz),.22)}
.kurs-stufe__titel{font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);margin:20px 0 9px}
.kurs-stufe__gruppe + .kurs-stufe__titel{margin-top:13px}
.kurs-stufe__koerper>.kurs-stufe__ziel + *{margin-top:22px}
.kurs-stufe__koerper>p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0 0 9px;max-width:68ch}

/* Schrittnamen als Plaettchen statt als lange Aufzaehlung — 17 Zeilen
   untereinander liest niemand, 17 Plaettchen ueberfliegt man. */
.kurs-stufe__koerper ul,.kurs-stufe__koerper ol{list-style:none;display:flex;flex-wrap:wrap;
  gap:7px;margin:0;padding:0}
.kurs-stufe__koerper li{margin:0;font-size:14px;font-weight:600;line-height:1.3;
  background:rgba(var(--tanz),.12);border:1px solid rgba(var(--tanz),.26);color:var(--tanz-text);
  border-radius:8px;padding:6px 11px}

/* ---------- Kurskarten (fertige Motive mit eingebranntem Text) ----------
   Kia am 2026-11-02: „die 2 bilder auch bei Bachata stundenplan hinzufuegen."
   Keine Bildunterschrift: Kursname, Lehrkraefte und Adresse stehen schon im
   Bild. Das Raster faellt von selbst in eine Reihe, auch bei nur einer Karte. */
.kurskarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,232px));
  gap:18px;margin:24px 0 0}
.kurskarte{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 16px 34px -24px rgba(27,19,16,.65);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.kurskarte img{display:block;width:100%;height:auto}
.kurskarte:hover,.kurskarte:focus-visible{transform:translateY(-3px);
  box-shadow:0 24px 44px -22px rgba(27,19,16,.65)}
@media(prefers-reduced-motion:reduce){
  .kurskarte{transition:none}
  .kurskarte:hover,.kurskarte:focus-visible{transform:none}
}
@media(max-width:720px){
  .kurs-tanz__foto{width:64px;height:64px;border-radius:14px}
  .kurs-tanz__kopf{gap:14px;margin-bottom:22px}
  .kurs-stufe{border-radius:12px}
  .kurs-stufe__kopf{padding:13px 18px;gap:11px}
  .kurs-stufe__kopf h3{font-size:20px}
  .kurs-stufe__koerper{padding:18px 18px 20px}
}

/* ---------- Preiskarten ----------
   Kia am 2026-11-02: „ich fand das alte Webseite … finde ich schöner. Also wenn du
   sowas machen könntest, ein bisschen mit Farben." Die alte Seite hatte bunte
   Preiskarten mit Band; die Farbe war dort aber beliebig (blau, orange, gelb).
   Hier erzählt die Farbe etwas: je mehr Tänze im Pass stecken, desto mehr Farben
   trägt der Kopf. Ein Tanz = seine Farbe, zwei Tänze = zwei, alle = alle vier.
   Die ZAHLEN stehen in scripts/neubau/preisseite.php und stammen aus
   wiki/themen/preise-stuttgart.md — nicht von der alten Seite. */
.preise__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:18px;margin:26px 0 0}
.preis-karte{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
/* column-reverse: das Band steht im Markup NACH dem Titel, soll aber darueber
   stehen - so bleibt dem Titel die volle Breite. */
.preis-karte__kopf{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:11px;
  padding:20px 22px 18px;color:#fff}
.preis-karte__titel{min-width:0;width:100%}
.preis-karte__kopf h3{font-family:var(--font-display);font-weight:800;font-size:23px;
  line-height:1.15;letter-spacing:-.01em;margin:0;color:inherit}
/* Kein opacity: auf dem Salsa-Rot kam der Untertitel damit auf 3,88 statt der
   noetigen 4,5. Der Rangunterschied zum Titel kommt aus Groesse und Gewicht. */
.preis-karte__wofuer{font-size:13.5px;line-height:1.4;margin:6px 0 0;color:inherit}

/* Grau, nicht Schwarz (Kia, 2026-11-02: "die Farbe schwarz gefaellt mir nicht.
   Vielleicht eine andere Farbe, grau."). Warmes Grau, kein neutrales: neben
   Rot, Gold, Gruen und Violett wirkt ein kaltes Grau tot. Gemessen 5,28:1 gegen
   Weiss - die 4,5 fuer AA sind damit sicher. Flaeche statt Verlauf, wie bei den
   anderen Ein-Tanz-Karten; der Probe-Pass hat keine Tanzfarbe, weil er keinen
   Tanz auswaehlt. */
.preis-karte--probe .preis-karte__kopf{background:#736A64}
.preis-karte--salsa .preis-karte__kopf{background:var(--salsa)}
/* Gold ist zu hell fuer weisse Schrift (WCAG AA) — hier dunkle Schrift auf Gold. */
.preis-karte--bachata .preis-karte__kopf{background:var(--bachata);color:#241813}
.preis-karte--kizomba-zouk .preis-karte__kopf{
  background:linear-gradient(100deg,var(--kizomba-deep) 0%,var(--zouk-deep) 100%)}
.preis-karte--combi .preis-karte__kopf{
  background:linear-gradient(100deg,var(--salsa-deep) 0%,var(--bachata-deep) 100%)}
.preis-karte--alles .preis-karte__kopf{
  background:linear-gradient(100deg,var(--salsa-deep) 0%,var(--bachata-deep) 34%,
    var(--kizomba-deep) 67%,var(--zouk-deep) 100%)}

/* Das Band sitzt IM Kopf, nicht absolut darueber - sonst laeuft es bei langen
   Titeln wie „All you can dance" ueber die Ueberschrift. */
.preis-karte__band{flex:none;margin:0;padding:5px 11px;
  border-radius:100px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 12px -6px rgba(0,0,0,.5)}

.preis-karte__preis{display:flex;align-items:flex-start;gap:3px;margin:20px 22px 0;
  font-family:var(--font-display);line-height:1}
.preis-karte__zahl{font-size:52px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.preis-karte__euro{font-size:23px;font-weight:700;color:var(--ink);margin-top:5px}
.preis-karte__takt{margin:5px 22px 0;font-size:13px;color:var(--ink-soft)}

.preis-karte__staffel,.preis-karte__punkte{list-style:none;margin:16px 22px 0;padding:0}
.preis-karte__staffel li{display:flex;align-items:baseline;gap:8px;padding:7px 0;
  font-size:14.5px;border-top:1px solid var(--line)}
.preis-karte__staffel li span{color:var(--ink-soft)}
.preis-karte__staffel li strong{margin-left:auto;font-weight:700;color:var(--ink)}
.preis-karte__punkte li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;color:var(--ink-soft)}
.preis-karte__punkte li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}

.preis-karte__fuss{margin:auto 22px 0;padding:14px 0 0;font-size:12.5px;color:var(--ink-soft)}
.preis-karte__hinweis{margin:8px 22px 20px;padding:9px 12px;border-radius:9px;
  background:var(--paper-2);font-size:12.5px;line-height:1.45;color:var(--ink)}
.preis-karte__fuss:last-child{padding-bottom:20px}
.preise__fussnote{margin:22px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:70ch}

/* ---------- Bonuskarte und Privatstunde ----------
   Heisst bewusst .preis-liste und NICHT .preis-tabelle: die Klasse gibt es im Theme
   schon (Zeile ~671, eigene Innenabstaende, Rahmen und eine rote erste Spalte).
   Zwei Regelsaetze auf derselben Klasse sind eine Falle fuer die naechste Sitzung. */
.preise__tabellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;margin:0}
.preis-liste{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 24px 20px}
.preis-liste h3{font-family:var(--font-display);font-weight:800;font-size:21px;margin:0;color:var(--ink)}
.preis-liste__wofuer{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.preis-liste table{width:100%;border-collapse:collapse;margin:16px 0 0}
.preis-liste th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);padding:0 0 7px}
.preis-liste th:last-child,.preis-liste td:last-child{text-align:right}
.preis-liste td{padding:9px 0;font-size:15px;border-top:1px solid var(--line);color:var(--ink)}
.preis-liste td:last-child{font-weight:700;white-space:nowrap}
.preis-liste__fuss{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}

/* ---------- Abstaende auf der Preisseite ----------
   Kia am 2026-11-02: "Bei den Preisen gibt es ueberall zu viel Abstand.
   Vielleicht so eine ganz weiche, sanfte Linie durchgezogen, sodass man die
   Abstaende kleiner macht, geringer macht, aber durch eine weiche Linie so
   markiert." Statt der 64-128px von `.section` nur noch 34-56px, und jede
   Grenze zeigt eine Haarlinie. "Weich" heisst hier: ein Verlauf, der an beiden
   Enden auslaeuft - eine durchgezogene Linie wuerde die Seite in Kaesten
   schneiden. `section--preise` ersetzt auf dieser Seite `section--eng`: alle
   Abschnitte bekommen denselben Takt, sonst sitzt eine Linie mal eng, mal weit. */
.section--preise{position:relative;padding:clamp(34px,4.4vw,56px) 0}
.section--preise+.section--preise::before{content:"";position:absolute;top:0;
  left:50%;transform:translateX(-50%);width:min(var(--maxw),calc(100% - 64px));height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(27,19,16,.18) 16%,
    rgba(27,19,16,.18) 84%,transparent 100%)}

/* ---------- Geschenkgutschein ----------
   Kia am 2026-11-02: Gutschein zum Verschenken, Bestellung per E-Mail oder
   WhatsApp an die Nummer der Tanzschule.
   Der Streifen oben traegt alle vier Tanzfarben - wie die Karte "All you can
   dance", weil ein Gutschein fuer jeden Tanz gilt.
   KEINE Betraege und keine Gueltigkeit: die hat Kia noch nicht genannt, und
   geratene Zahlen auf einer Kundenseite sind ein Rechtsproblem. */
.gutschein{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;padding:32px 30px 28px}
.gutschein::before{content:"";position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(100deg,var(--salsa-deep) 0%,var(--bachata-deep) 34%,
    var(--kizomba-deep) 67%,var(--zouk-deep) 100%)}
.gutschein h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(25px,3vw,33px);line-height:1.1;letter-spacing:-.015em;
  margin:0;color:var(--ink)}
.gutschein__lead{margin:12px 0 0;font-size:16.5px;line-height:1.6;
  color:var(--ink-soft);max-width:62ch}
.gutschein__arten{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ink);max-width:62ch}
.gutschein__arten strong{font-weight:700}
.gutschein__schritte{list-style:none;counter-reset:g;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.gutschein__schritte li{counter-increment:g;position:relative;padding:1px 0 0 38px;
  font-size:14.5px;line-height:1.55;color:var(--ink)}
.gutschein__schritte li::before{content:counter(g);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--salsa);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:14px;
  display:grid;place-items:center}
/* Hinweis ohne Datum - ein "bis 20. Dezember" waere im Januar falsch. */
.gutschein__ferien{margin:22px 0 0;padding:12px 16px;border-radius:10px;
  background:var(--paper-2);font-size:14.5px;line-height:1.55;color:var(--ink)}
.gutschein__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.gutschein__knopf{display:inline-block;font-family:var(--font-body);font-weight:700;
  font-size:15.5px;line-height:1;padding:16px 24px;border-radius:10px;
  background:var(--salsa);color:#fff;text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(229,3,47,.5);
  transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.gutschein__knopf:hover{transform:translateY(-2px);background:var(--red-deep);color:#fff}
.gutschein__knopf--leer{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.gutschein__knopf--leer:hover{background:var(--paper-2);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(27,19,16,.3)}
.gutschein__fuss{margin:20px 0 0;font-size:13px;line-height:1.55;color:var(--ink-soft)}

@media(max-width:720px){
  .preise__grid{grid-template-columns:1fr}
  .preis-karte__zahl{font-size:46px}
  .preis-liste{padding:20px 18px 18px}
  .gutschein{padding:26px 20px 24px}
  .section--preise+.section--preise::before{width:calc(100% - 40px)}
}

/* ---------- Ferientermine ----------
   Kia am 2026-11-02: "Ferientermine bitte die Seite schoener machen ... und das
   schoener und uebersichtlicher ordnen."
   Die Farbe sagt die Jahreszeit: Winter gruen, Fruehling gold, Sommer rot,
   Herbst violett - dieselben vier Farben wie die Taenze, damit die Seite nicht
   aus dem Haus faellt. Die Daten rechnet scripts/neubau/ferientermine-seite.php
   aus Ostern aus; abgetippte Feiertage waren der Grund, warum hier drei Jahre
   lang ein falscher Karfreitag stand. */
.section--ferien{padding:clamp(30px,4vw,52px) 0}
.ferien-seite .section-lead{margin:8px 0 0;font-size:16px;line-height:1.6;
  color:var(--ink-soft);max-width:62ch}
/* Die Abschnitte stehen jetzt alle in EINEM Kurzcode-Block, nicht mehr in eigenen
   Sektionen - deshalb der Abstand hier statt ueber `section`. */
.ferien-block{margin:clamp(36px,4.6vw,58px) 0 0}
.ferien-seite h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(25px,3vw,33px);line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--ink)}
.ferien-seite h3{font-family:var(--font-display);font-weight:800;font-size:17px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:30px 0 0;padding:0 0 10px;border-bottom:1px solid var(--line)}

/* Der naechste geschlossene Tag - das Einzige, was die meisten wissen wollen. */
.ferien-naechster{position:relative;border-radius:16px;overflow:hidden;
  padding:28px 30px 26px;color:#fff;background:var(--night)}
.ferien-naechster--winter{background:linear-gradient(120deg,var(--kizomba-deep),#0a4a3f)}
.ferien-naechster--fruehling{background:linear-gradient(120deg,var(--bachata-deep),#5c4200)}
.ferien-naechster--sommer{background:linear-gradient(120deg,var(--salsa-deep),#7d0d1e)}
.ferien-naechster--herbst{background:linear-gradient(120deg,var(--zouk-deep),#3d1a66)}
.ferien-naechster__label{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#fff}
.ferien-naechster__name{margin:12px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(27px,3.6vw,40px);line-height:1.05;letter-spacing:-.02em;color:#fff}
.ferien-naechster__datum{margin:8px 0 0;font-size:17px;color:#fff}
.ferien-naechster__rest{display:inline-block;margin:16px 0 0;padding:6px 13px;
  border-radius:100px;background:rgba(255,255,255,.17);font-size:13px;font-weight:700;color:#fff}

/* Alle Feiertage als kleine Karten. */
.ferien-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:14px;margin:18px 0 0}
.ferien-karte{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:17px 18px 16px;overflow:hidden}
.ferien-karte::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.ferien-karte--winter::before{background:var(--kizomba)}
.ferien-karte--fruehling::before{background:var(--bachata)}
.ferien-karte--sommer::before{background:var(--salsa)}
.ferien-karte--herbst::before{background:var(--zouk)}
/* Stille Tage: kein Feiertag, keine Jahreszeit - ein neutrales Grau, damit man
   sie auf einen Blick von den Feiertagen unterscheidet. */
.ferien-karte--still::before{background:#736A64}
.ferien-karte--still{background:var(--paper-2)}
.ferien-karte__tag{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.ferien-karte__monat{margin:2px 0 0;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ferien-karte__name{margin:12px 0 0;font-family:var(--font-body);font-weight:700;
  font-size:14.5px;line-height:1.3;color:var(--ink)}
.ferien-karte__wochentag{margin:3px 0 0;font-size:13px;color:var(--ink-soft)}

/* Die eigenen Ferien der Tanzschule (erst sichtbar, wenn Kia Termine nennt). */
.ferien-zeiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:16px;margin:18px 0 0}
.ferien-zeit{background:var(--paper-2);border-radius:14px;padding:20px 22px 18px}
.ferien-zeit h4{margin:0;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink)}
.ferien-zeit__spanne{margin:6px 0 0;font-size:16px;font-weight:700;color:var(--ink)}
.ferien-zeit__kurstage{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}

@media(max-width:720px){
  .ferien-gitter{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:11px}
  .ferien-karte{padding:14px 15px 13px}
  .ferien-karte__tag{font-size:29px}
  .ferien-naechster{padding:22px 20px 20px}
}

/* ---------- Kursstruktur: die drei Level auf einen Blick ----------
   Kia am 2026-11-03: "Mach es ein bisschen strukturierter, die Kurslevel einzeln
   und alles, was dann beinhaltet, darunter."
   Oben einmal erklaert, was A1/A2/A3 heisst - darunter je Tanz die Karten aus
   `.kurs-stufe` (dieselben wie auf /kursinhalte/, damit beide Seiten gleich
   aussehen). Die Leiste hier traegt KEINE Tanzfarbe: sie gilt fuer alle vier. */
.level-leiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:16px;margin:22px 0 0}
.level-karte{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:20px 22px 19px;overflow:hidden}
.level-karte::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--salsa),var(--bachata) 34%,var(--kizomba) 67%,var(--zouk))}
.level-karte__code{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:27px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.level-karte__name{margin:7px 0 0;font-family:var(--font-body);font-weight:700;
  font-size:15px;color:var(--ink)}
.level-karte__text{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
/* Die Zielgruppe ist der Kern der Aussage (Kia, 2026-11-03: A2 Hobby, A3 Profi) -
   deshalb nicht nur fett, sondern auch dunkler als der Rest. */
.level-karte__text strong{color:var(--ink);font-weight:700}

/* ---------- Kursstruktur: Kurse ausserhalb des A1-A3-Rasters ---------- */
.weiter-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:16px;margin:22px 0 0}
.weiter-karte{background:var(--paper-2);border-radius:14px;padding:22px 24px 20px}
.weiter-karte__wer{margin:0;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.weiter-karte__name{margin:9px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:19px;line-height:1.2;color:var(--ink)}
.weiter-karte__text{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* Personenkarten: der Name steht oben, das Fach darunter. Auf den anderen Seiten
   ist die obere Zeile eine Rubrik („Dein Tempo") und gehoert nach vorn — bei
   Menschen ist es der Name. Kia am 2026-11-03: „Mein Name soll drüber stehen."
   Nur die Abstaende drehen mit, Schriftgroessen und Farben bleiben. */
.weiter-karte--namezuerst .weiter-karte__name{margin:0}
.weiter-karte--namezuerst .weiter-karte__wer{margin:7px 0 0}

/* Genau vier Karten: 2x2 statt 3+1. Das Grundraster fuellt die Reihe mit so vielen
   Karten, wie hineinpassen — in der Lesebreite (.prose, 820px) sind das drei, die
   vierte stuende allein. Vier Dinge lesen sich in zwei Reihen zu zweit ruhiger.
   Eigene Klasse, damit die fuenf anderen Seiten mit .weiter-gitter unberuehrt bleiben. */
.weiter-gitter--zwei{grid-template-columns:repeat(2,1fr)}

@media(max-width:720px){
  .level-leiste,.weiter-gitter,.weiter-gitter--zwei{grid-template-columns:1fr}
}

/* ---------- Privatunterricht: die drei Stundenpreise ----------
   Kia am 2026-11-03: "nochmal die Preise da reinschreiben, dass sie nochmal die
   Preise vor Ort bei Privatunterricht nochmal drinsteht."
   Drei Karten statt einer Tabelle: die Zahl ist die Aussage, und je mehr Stunden,
   desto guenstiger - das sieht man so auf einen Blick.
   Dieselben Zahlen stehen auf /preise/. Wer eine aendert, aendert beide; das
   Skript bricht sonst ab. */
.privat-preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;margin:24px 0 0}
.privat-stufe{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px 22px 20px;text-align:center}
.privat-stufe--beste{border-color:rgba(229,3,47,.42);
  box-shadow:0 14px 34px -24px rgba(229,3,47,.6)}
.privat-stufe__band{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  margin:0;padding:4px 11px;border-radius:100px;background:var(--salsa);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap}
.privat-stufe__wieviel{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.privat-stufe__preis{display:flex;align-items:flex-start;justify-content:center;gap:3px;
  margin:10px 0 0;font-family:var(--font-display);line-height:1}
.privat-stufe__zahl{font-size:46px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.privat-stufe__euro{font-size:21px;font-weight:700;color:var(--ink);margin-top:4px}
.privat-stufe__je{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}
.privat-hinweis{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:68ch}
.privat-hinweis strong{color:var(--ink)}

/* Knapper Abschnitt: der kurze Text ueber dem Bildband und die Knoepfe darunter
   brauchen nicht den vollen Abschnittsabstand — sonst steht der Text einsam
   zwischen zwei grossen Luecken. Kia am 2026-11-03: „Oben unten drunter sind zu
   viel Abstand. Bitte ein bisschen die Abstände kleiner machen."
   Vorher 128 px oben und unten, jetzt rund ein Drittel davon. */
.privat--eng{padding-block:clamp(26px,3.6vw,44px)}
.privat--eng + .bildkopf--band{margin-block-start:0}
.bildkopf--band + .privat--eng{padding-top:clamp(20px,2.8vw,34px)}

@media(max-width:720px){
  .privat-preise{grid-template-columns:1fr}
  .privat-stufe__zahl{font-size:40px}
}

/* ---------- Tanz-Kachel mit zwei Bildern ----------
   Kia am 2026-11-03: "fuer Bachata zwei Bilder die immer rotieren im Hintergrund
   ... immer so ein bisschen hin und her rotiert."
   Das zweite Bild liegt deckungsgleich ueber dem ersten und wird ein- und
   ausgeblendet. 14 Sekunden Takt: lang genug, dass es nicht flackert, kurz genug,
   dass man es waehrend eines Besuchs einmal sieht. Die Ueberblendung dauert gut
   eine Sekunde - ein harter Schnitt wirkt wie ein Ladefehler.
   WICHTIG: Wer Animationen im System abgeschaltet hat, sieht nur das erste Bild.
   Eine Bewegung, die man nicht abstellen kann, ist fuer manche Leute ein echtes
   Problem, nicht nur Geschmackssache. */
.tanz__wechsel{opacity:0;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  will-change:opacity}

/* ZWEI Bilder (Bachata): das zweite blendet ueber dem ersten ein und wieder aus. */
.tanz__wechsel--zwei{animation-name:tanz-wechsel;animation-duration:14s}
@keyframes tanz-wechsel{
  0%,44%  {opacity:0}
  52%,94% {opacity:1}
  100%    {opacity:0}
}

/* DREI Bilder (Salsa: Kia, Andre, Ali) - Kia am 2026-11-03: "Ja, Salsa rotieren".
   21 Sekunden, also 7 je Bild. Die Reihenfolge der Schichten ist entscheidend:
   --b liegt ueber --a, --a ueber dem ersten Bild. Deshalb bleibt --a sichtbar,
   BIS --b vollstaendig deckt (67 %), und faellt erst danach auf 0. Wuerde --a
   frueher ausblenden, blitzte waehrend der Ueberblendung das erste Bild durch. */
.tanz__wechsel--a{animation-name:tanz-drei-a;animation-duration:21s}
.tanz__wechsel--b{animation-name:tanz-drei-b;animation-duration:21s}
@keyframes tanz-drei-a{
  0%,29%   {opacity:0}
  34%,67%  {opacity:1}
  72%,100% {opacity:0}
}
@keyframes tanz-drei-b{
  0%,62%   {opacity:0}
  67%,95%  {opacity:1}
  100%     {opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .tanz__wechsel{animation:none;opacity:0}
}

/* ---------- Ausbildungsstufen: die drei Einheiten je Stufe ----------
   Als Liste statt als Fliesstext mit Trennpunkten - drei Zeilen untereinander
   liest man, "A · B · C" ueberfliegt man. */
.ausb-module{list-style:none;margin:12px 0 0;padding:0}
.ausb-module li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;
  line-height:1.45;color:var(--ink-soft)}
.ausb-module li+li{border-top:1px solid var(--line)}
.ausb-module li::before{content:"";position:absolute;left:3px;top:13px;width:6px;height:6px;
  border-radius:50%;background:var(--salsa)}

/* ---------- Geschenkseite: Bild und Text nebeneinander ----------
   Kia am 2026-11-03: "dass es nicht so trocken nur Text drin ist."
   Das Bild steht NEBEN dem Text, nicht dahinter. Schrift ueber einem Foto
   braucht einen Verlauf und gemessenen Kontrast - daneben gestellt gibt es
   das Problem gar nicht erst. Auf schmalen Bildschirmen rutscht das Bild
   nach unten; dort zaehlt der Text zuerst. */
.geschenk-paar{display:grid;grid-template-columns:1fr minmax(240px,340px);
  gap:clamp(24px,4vw,48px);align-items:center}
/* Gespiegelt: steht das Bild im Markup VOR dem Text, muessen auch die Spalten
   tauschen - sonst landet das Bild in der breiten Spalte und der Text in der
   schmalen. Beim Nachmessen aufgefallen: 773px statt 340px. */
.geschenk-paar--links{grid-template-columns:minmax(240px,340px) 1fr}
.geschenk-paar__text>*:first-child{margin-top:0}
.geschenk-paar__text h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(25px,3vw,33px);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 14px;color:var(--ink)}
.geschenk-paar__text p{font-size:16.5px;line-height:1.65;color:var(--ink-soft);
  margin:0 0 12px;max-width:60ch}
.geschenk-paar__text p strong{color:var(--ink)}
.geschenk-paar__bild{border-radius:16px;overflow:hidden;
  box-shadow:0 26px 54px -32px rgba(27,19,16,.7)}
.geschenk-paar__bild img{display:block;width:100%;height:auto}

/* Anlaesse als Plaettchen - zehn Haekchen-Zeilen untereinander liest niemand. */
.geschenk-anlaesse{list-style:none;display:flex;flex-wrap:wrap;gap:9px;
  margin:22px 0 0;padding:0}
.geschenk-anlaesse li{margin:0;padding:8px 15px;border-radius:100px;
  background:rgba(229,3,47,.08);border:1px solid rgba(229,3,47,.22);
  font-size:14.5px;font-weight:600;color:var(--red-deep)}

@media(max-width:780px){
  .geschenk-paar{grid-template-columns:1fr}
  .geschenk-paar--links .geschenk-paar__bild{order:2}
  .geschenk-paar__bild{max-width:420px;margin:0 auto}
}

/* ---------- Geschenkseite: Kopfbild mit Text darauf ----------
   Kia am 2026-11-03: "das Bild ... mehr zu dem Text, soll als mehr als
   Hintergrund sein."
   Der Text steht RECHTS, wo das Foto fast nur weisse Ziegelwand zeigt.
   Darueber trotzdem ein Verlauf nach Papierton - damit es auch dann traegt,
   wenn das Bild einmal getauscht wird. Lesbarkeit darf nicht vom Motiv
   abhaengen. */
.geschenk-held{position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(27,19,16,.6)}
.geschenk-held__bild{display:block;width:100%;height:100%;object-fit:cover;
  object-position:18% 50%}
.geschenk-held::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(251,246,238,0) 28%,rgba(251,246,238,.82) 46%,
    rgba(251,246,238,.97) 58%)}
.geschenk-held__text{position:absolute;inset:0 0 0 auto;z-index:1;
  width:min(52%,520px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,3.4vw,44px) clamp(24px,3.4vw,44px) clamp(22px,3.4vw,44px) 0}
.geschenk-held__text>*{margin:0}
.geschenk-held__text h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(24px,2.9vw,33px);line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.geschenk-held__text p{margin:12px 0 0;font-size:clamp(14.5px,1.25vw,16.5px);
  line-height:1.6;color:var(--ink-soft)}

/* Schmale Bildschirme: Bild als Band OBEN, Text darunter. Fuer beides
   uebereinander ist kein Platz, und halb lesbarer Text ist schlimmer als
   gar kein Effekt. */
@media(max-width:820px){
  .geschenk-held{display:flex;flex-direction:column}
  .geschenk-held__bild{aspect-ratio:16/9}
  .geschenk-held::after{display:none}
  .geschenk-held__text{position:static;width:auto;background:var(--paper-2);
    padding:24px 22px 26px}
}

/* Das Kopfbild der Geschenkseite schliesst direkt an den Vorspann an.
   Kia am 2026-11-03: "mehr unter der Text ... Direkt darunter."
   Nachgemessen waren es 59px, und sie kamen aus DREI Quellen: 8px
   Innenabstand der Einleitung, 24px Blockabstand von WordPress zwischen
   zwei Gruppen, 27px Innenabstand der Sektion. Nur eine davon anzufassen
   haette kaum etwas gebracht. */
.page-intro + .section--held{margin-block-start:0;padding-top:14px}

/* ---------- Seitenkopf mit Titel und Vorspann AUF dem Bild ----------
   Genutzt von /geschenk/ und /ausbildung/.
   Kia am 2026-11-03: "der Text verschenke keine Gegenstand ... direkt auf dem
   Bild drauf."
   Der Kopf sitzt ganz oben, also unter der festen Kopfzeile - deshalb oben
   `--hdr-h` Platz, wie beim Ferienbalken. Der Text steht rechts, wo das Foto
   fast nur weisse Ziegelwand zeigt; der Verlauf sorgt dafuer, dass es auch
   bei einem anderen Bild noch traegt. */
/* Kein Blockabstand oben: der Kopf ist der erste Block der Seite, WordPress
   setzt dort sonst 24px Papierton ueber das Bild. */
.bildkopf{position:relative;overflow:hidden;
  min-height:clamp(320px,38vw,480px);display:flex}
.bildkopf{margin-block-start:0}
.bildkopf__bild{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:16% 50%}
.bildkopf::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(251,246,238,0) 26%,rgba(251,246,238,.84) 45%,
    rgba(251,246,238,.98) 58%)}
.bildkopf__text{position:relative;z-index:1;margin-left:auto;
  width:min(54%,560px);align-self:center;
  padding:calc(var(--hdr-h) + 18px) clamp(24px,4vw,56px) clamp(26px,3.4vw,44px) 0}
.bildkopf__text>*{margin:0}
.bildkopf__text .eyebrow{color:var(--ink-soft);margin-bottom:14px}
.bildkopf__text h1{font-family:var(--font-display);font-weight:800;
  line-height:1.04;letter-spacing:-.02em;font-size:clamp(30px,4.4vw,56px);color:var(--ink)}
.bildkopf__lead{margin-top:16px;font-size:clamp(16px,1.6vw,20px);
  line-height:1.55;color:var(--ink-soft)}

/* Schmale Bildschirme: Bild als Band oben, Text darunter auf Papierton. */
@media(max-width:820px){
  .bildkopf{flex-direction:column;min-height:0}
  .bildkopf__bild{position:static;aspect-ratio:16/10;height:auto;
    margin-top:var(--hdr-h)}
  .bildkopf::after{display:none}
  .bildkopf__text{width:auto;margin:0;background:var(--paper);
    padding:22px 24px 4px}
}

/* Gespiegelt: Text LINKS, Motiv rechts. Gebraucht auf /ausbildung/ - dort steht
   die Tanzschuelerin rechts im Bild, dahinter duerfte kein Text liegen.
   Der Verlauf dreht mit, sonst laege die Aufhellung auf der falschen Seite. */
/* Hoeherer Seitenkopf fuer /erfolg/. Das Siegerfoto ist hochkant aufgenommen und
   muss zwei Dinge zugleich zeigen: beide Gesichter (bei 21–45 % der Bildhoehe)
   und den Pokal darunter (ab 51 %). Kia am 2026-11-04: „ein bisschen weiter so
   dass man dem Pokal sieht im Bild." In den flachen 480 px der anderen Seiten
   passt nur eins von beidem — hier sind es bis zu 700. */
.bildkopf--hoch{min-height:clamp(420px,50vw,700px)}

.bildkopf--links .bildkopf__text{margin-left:0;margin-right:auto;
  padding-left:clamp(24px,4vw,56px);padding-right:0}
.bildkopf--links::after{background:linear-gradient(260deg,rgba(251,246,238,0) 26%,
  rgba(251,246,238,.84) 45%,rgba(251,246,238,.98) 58%)}
.bildkopf--links .bildkopf__bild{object-position:78% 50%}
@media(max-width:820px){
  .bildkopf--links .bildkopf__text{padding:22px 24px 4px}
}

/* ---------- Geteilter Seitenkopf: Foto LINKS, Text RECHTS daneben ----------
   Kia am 2026-11-13: „Dieser Teil von das Bild loeschen und das ganze Bild
   linksbuendig einbinden. Dass man nur die Frau und den Mann auf linker Seite
   sieht." Und zur Ferienseite: „ein schoenes Bild mit Strand, Palme, links und
   der Ferientermine-Text auf rechter Seite."

   WOFUER: Auf /hochzeitstanz/ und /private/ stehen zwei Menschen quer durch das
   ganze Bild. Im normalen Seitenkopf liegt der Text ueber ihnen - bei
   Hochzeitstanz verschwand der Braeutigam vollstaendig hinter der Schrift.
   Ein anderer Zuschnitt hilft dort nicht: je mehr man links wegschneidet, desto
   breiter stehen die beiden im verbleibenden Bild. Also bekommen Bild und Text
   je eine eigene Spalte - niemand liegt mehr hinter Schrift.

   UNTERSCHIED zum normalen `.bildkopf`: Raster statt Ueberlagerung, kein
   Verlauf (`::after`), Text auf Papierton statt auf dem Foto. Alles andere -
   Augenbraue, h1, Vorspann, schmale Bildschirme - bleibt gleich. */
/* KEINE eigene Hoehe. Kia am 2026-11-13: „Bei den Preisen das Bild Stueck oben
   und unten wegschneiden … Das ist nicht so hoch ist das Bild. So die
   Proportion ueberall auf alle Seiten muss gleich bleiben." Und: „sowie
   Stundenplan. Die Hoehe ist richtig gut."
   Der geteilte Kopf war mit 540 px hoeher als der normale (480 px) - dadurch
   sah man auf /preise/ zu viel Decke und zu viel Boden. Jetzt erbt er die
   Hoehe von `.bildkopf`, also genau die der Stundenplan-Seite, und `cover`
   schneidet Decke und Boden von selbst weg. Nicht wieder ueberschreiben:
   gleiche Hoehe auf allen Seiten ist Kias ausdruecklicher Wunsch. */
.bildkopf--geteilt{
  display:grid;
  grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  background:var(--paper)}
/* ⚠️ Das Foto liegt ABSOLUT in der linken Spalte (48 % Abstand von rechts) und
   ist damit aus dem Raster heraus. Grund: Als Rasterfeld bestimmt ein Bild die
   Zeilenhoehe mit seiner eigenen Hoehe - /preise/ war dadurch 923 px hoch statt
   480, /kursinhalte/ 595. Absolut gesetzt bestimmt nur noch der Text die Hoehe,
   und `min-height` von `.bildkopf` gilt wie auf allen anderen Seiten. */
.bildkopf--geteilt .bildkopf__bild{
  position:absolute;inset:0 48% 0 0;width:auto;height:100%;
  object-fit:cover;object-position:50% 50%}
.bildkopf--geteilt::after{display:none}
.bildkopf--geteilt .bildkopf__text{
  grid-column:2;width:auto;margin:0;align-self:center;
  padding:calc(var(--hdr-h) + 18px) clamp(24px,4vw,56px)
          clamp(26px,3.4vw,44px) clamp(24px,3.4vw,48px)}
/* Freigestellte Zeichnung statt Foto: `--motiv` zusaetzlich zu `--geteilt`.
   Gebraucht auf /kursinhalte/ fuer Kias Schrittdiagramm. Ein Foto darf man
   anschneiden, eine Zeichnung nicht - sonst fehlt ein Schuhabdruck. Deshalb
   `contain` statt `cover`; der weisse Grund des Bildes ist freigestellt, es
   steht also direkt auf dem Papierton. Oben Platz fuer die feste Kopfzeile. */
/* ⚠️ `box-sizing: border-box` ist Pflicht. Ein `img` steht standardmaessig auf
   `content-box`; der Innenabstand kaeme dann ZUSAETZLICH zu den 480 px dazu
   (gemessen: 594 px), und die Zeichnung ragte unten und links aus dem Kopf
   heraus - auf /anfahrt/ war der Punkt A abgeschnitten. */
/* Oben nur 60 % der Kopfzeilenhoehe statt der vollen. Kia am 2026-11-13: „Bei
   der Anfahrt unten ist das Bild A abgeschnitten. Tu mal das Bild ein bisschen
   hoeher. Oben ist viel Platz." Der Platz entsteht, weil ueber dem Seitenkopf
   zurzeit noch der Ferienbalken steht - dann wirkt der volle Abstand doppelt.
   60 % ruecken die Zeichnung sichtbar hoch und lassen trotzdem genug Luft,
   falls der Balken einmal weg ist und die feste Kopfzeile ueber dem Kopf liegt;
   `contain` zentriert die Zeichnung ohnehin, sie beginnt also noch tiefer. */
/* Die Zeichnung sitzt RECHTS in ihrer Spalte, also nah am Text. Kia am
   2026-11-13: „Das Bild für Anfahrt ist zu weit links, ein bisschen weiter
   rechts" und „Das Bild für Kursinhalte oben ist auch zu weit links. Weiter
   rechts, Richtung der Text." Bei `contain` bleibt links Luft uebrig - die
   schob die Zeichnung an den Bildschirmrand. */
.bildkopf--motiv .bildkopf__bild{
  box-sizing:border-box;
  object-fit:contain;
  object-position:100% 50%;
  padding:clamp(10px,1.6vw,26px);
  padding-top:calc(var(--hdr-h) * .6);
  padding-bottom:clamp(16px,2.2vw,34px);
  /* Links viel Luft, rechts fast keine: die Zeichnung rueckt damit nah an den
     Text und haelt zugleich Abstand zum Bildschirmrand. Kia am 2026-11-13:
     „Alle weiter rechts zu Text mindestens 2 cm Abstand zu Rand." */
  padding-left:clamp(40px,6vw,96px);
  padding-right:clamp(8px,1vw,14px)}

/* Weicher Uebergang statt harter Kante: `--weich` zusaetzlich zu `--geteilt`.
   Kia am 2026-11-13 zur Preise-Seite: „Das Bild soll da, wo der Text ist, am
   besten ineinander verschwommen. Nicht so in klarer Linie."
   Dafuer laeuft das Foto unter die Textspalte weiter und wird dort mit einer
   Maske ausgeblendet - es loest sich in den Papierton auf, statt an einer
   Kante zu enden. Der Text liegt darueber (z-index), beginnt aber erst dort,
   wo das Bild schon fast weg ist.
   Ohne `mask-image` (sehr alte Browser) bleibt es beim sauberen Zweispalter -
   deshalb steht alles in `@supports`. */
/* ⚠️ Das Bild bleibt in seiner Spalte und wird NICHT breiter gezogen. Erster
   Versuch am 13.11. war `inset:0` (Bild ueber die ganze Breite, Text darueber).
   Auf /preise/ sah das gut aus - der Saal ist leer. Auf /hochzeitstanz/ war
   danach der Braeutigam wieder weg, weil `cover` bei doppelter Breite links
   und rechts abschneidet. Jetzt loest sich nur die rechte Kante auf: gleicher
   Bildausschnitt wie vorher, nur ohne harte Linie. */
.bildkopf--weich .bildkopf__text{position:relative;z-index:1}
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .bildkopf--weich .bildkopf__bild{
    -webkit-mask-image:linear-gradient(to right,#000 66%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to right,#000 66%,rgba(0,0,0,0) 100%)}
}

/* Schmale Bildschirme: wie beim normalen Kopf - Bild oben, Text darunter.
   Das Bild muss hier zurueck ins Raster (`static`), sonst liegt es als
   absolutes Feld ueber dem Text. Die Maske muss weg, sonst verblasst es auch
   im Hochformat. */
@media(max-width:820px){
  .bildkopf--geteilt{grid-template-columns:1fr;min-height:0}
  .bildkopf--geteilt .bildkopf__bild{position:static;inset:auto;
    width:100%;height:auto;aspect-ratio:16/10;margin-top:var(--hdr-h);
    padding:0}
  .bildkopf--geteilt .bildkopf__text{grid-column:1;padding:22px 24px 4px}
  .bildkopf--weich .bildkopf__bild{-webkit-mask-image:none;mask-image:none}
  .bildkopf--motiv .bildkopf__bild{aspect-ratio:3/2;object-fit:contain;
    padding:clamp(10px,2.4vw,20px)}
}

/* Bildband mitten auf der Seite - derselbe Baustein wie der Seitenkopf, nur
   nicht als erster Block. Gebraucht auf /ausbildung/ bei „Und danach?".
   Unterschiede zum Kopf: kein Platz fuer die feste Kopfzeile noetig, h2 statt
   h1, und Luft nach oben und unten, weil ringsum Abschnitte stehen.
   Die Spiegelung steckt in der Grundform: hier steht der Text RECHTS, im Kopf
   der Ausbildungsseite links. Dadurch bleibt hier der Tanzlehrer frei. */
.bildkopf--band{min-height:clamp(300px,32vw,420px);
  margin-block:clamp(40px,6vw,72px)}
/* Band UND hoch: `.bildkopf--band` steht spaeter in dieser Datei als
   `.bildkopf--hoch` und haette sonst das letzte Wort. Beides zusammen braucht
   deshalb eine eigene Zeile — sonst bleibt ein hochkantes Foto bei 420 px und
   der untere Teil (auf /erfolg/ der Pokal) wird abgeschnitten. */
.bildkopf--band.bildkopf--hoch{min-height:clamp(380px,44vw,620px)}
/* Senkrechter Ausschnitt: das Band ist viel breiter als das Foto hoch ist, also
   schneidet `cover` oben und unten ab - bei 1440px bleiben nur 53 % uebrig.
   Mittig (50 %) faellt dabei der Kopf des Tanzlehrers weg, und genau den soll man
   sehen. Darum weit nach oben: 8 % laesst bei jeder Breite zwischen 1000 und
   1920px den Haaransatz (im Original bei y≈35 von 566) stehen. */
.bildkopf--band .bildkopf__bild{object-position:16% 8%}
.bildkopf--band .bildkopf__text{
  padding:clamp(28px,3.4vw,46px) clamp(24px,4vw,56px)}
.bildkopf--band .bildkopf__text h2{margin:0;font-family:var(--font-display);
  font-weight:800;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,40px);color:var(--ink)}
@media(max-width:820px){
  .bildkopf--band{margin-block:clamp(28px,6vw,44px)}
  .bildkopf--band .bildkopf__bild{margin-top:0}
  .bildkopf--band .bildkopf__text{padding:22px 24px 4px}
}

/* Tanzlehrer: Portraitraster.
   ⚠️ Die Fotos sind sehr unterschiedlich: 287×323 (fast quadratisch, Kopf und
   Schultern), 800×1297 (hochkant, ganze Figur), 500×756 und 1920×1864. Ohne
   festes Seitenverhaeltnis springen die Karten in der Hoehe. Gewaehlt ist 4:5:
   nah genug an den quadratischen Fotos (nur ~5 % seitlich weg) und bei den
   hochkanten schneidet es unten ab, nicht am Kopf.
   `object-position` 22 % von oben, damit das Gesicht sicher im Bild bleibt. */
.lehrer-gitter{display:grid;gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));margin:0}

/* Einleitungstext und Portraetraster gehoeren zusammen und standen trotzdem
   einen vollen Abschnitt auseinander: 128 px Polster unten + 24 px Rand +
   32 px Polster oben = 184 px (gemessen, nicht geschaetzt).
   Kia am 2026-11-03: „der Abstand von der Text bis zu Bilder von unserer
   Tanzlehrer ist ein großer Abstand … Soll nicht so großer Abstand dazwischen
   sein." Jetzt rund 44 px. Beide Regeln sind noetig — eine allein laesst die
   andere Haelfte des Abstands stehen. */
.section:has(+ .section .lehrer-gitter){padding-bottom:clamp(16px,2.4vw,28px)}
.section:has(.lehrer-gitter){margin-block-start:0;padding-top:clamp(8px,1.4vw,16px)}

/* Instagram-Link. Steht nur da, wo ein Konto eingetragen ist — nach Kias
   Entscheidung vom 2026-11-03 ist das nur seines und das der Tanzschule.
   Kia am selben Tag: „ein bisschen Link auch größer, dass es auffällt, ich
   möchte gerne natürlich dass viele Leute auf meine Instagram-Seite gehen."
   Deshalb kein stiller Textlink, sondern ein kleiner eigener Knopf. */
.lehrer-karte__ig{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;
  padding:7px 14px 7px 9px;border-radius:100px;background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(27,19,16,.14),0 2px 8px -4px rgba(27,19,16,.3);
  font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.lehrer-karte__ig .ig-zeichen{flex:0 0 auto;width:22px;height:22px;display:block}
.lehrer-karte__ig span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover) and (pointer:fine){
  .lehrer-karte__ig:hover{transform:translateY(-1px);color:var(--ink);
    box-shadow:inset 0 0 0 1px rgba(200,55,171,.45),0 10px 22px -12px rgba(200,55,171,.6)}
}
/* Gedrueckt gibt der Knopf nach — ohne das fuehlt er sich tot an. */
.lehrer-karte__ig:active{transform:scale(.97)}

/* Auf dem grossen Knopf (Instagram der Tanzschule) steht das Zeichen vor dem
   Namen. Es ist ein Bild mit eigenen Farben und bleibt daher auch auf Rot
   sichtbar; ein weisser Ring hebt es vom roten Grund ab. */
.gutschein__knopf .ig-zeichen{width:21px;height:21px;vertical-align:-5px;
  margin-right:9px;border-radius:6px;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.gutschein__knopf--leer .ig-zeichen{box-shadow:none}
.gutschein__knopf:active{transform:scale(.97)}
.lehrer-karte{margin:0;min-width:0}
/* ⚠️ `height:auto` ist Pflicht, nicht Kosmetik: die <img> tragen width- und
   height-Attribute (gegen Layout-Spruenge beim Laden). Ohne `height:auto`
   gewinnt das height-Attribut, `aspect-ratio` bleibt wirkungslos und die
   Karten stehen in wilden Hoehen nebeneinander - 1297 px neben 323 px. */
.lehrer-karte__bild{display:block;width:100%;max-width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:14px;
  background:var(--paper-2);box-shadow:0 20px 44px -30px rgba(27,19,16,.65)}
.lehrer-karte__name{font-family:var(--font-display);font-weight:800;
  font-size:18.5px;letter-spacing:-.012em;line-height:1.18;
  margin:12px 0 0;color:var(--ink)}
.lehrer-karte__stil{margin:3px 0 0;font-size:14px;line-height:1.4;
  color:var(--ink-soft)}
@media(max-width:420px){
  .lehrer-gitter{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  .lehrer-karte__name{font-size:16.5px}
}

/* Eine Seite, die mit einem Bildkopf BEGINNT, braucht den Abstand von
   `.page-sub` nicht. Der haelt auf normalen Unterseiten den Text von der festen
   Kopfzeile frei - und genau das macht der Bildkopf schon selbst
   (`padding: calc(var(--hdr-h) + 18px)` im Textblock). Beides zusammen ergab
   einen leeren Streifen von rund 147px ueber dem Bild. Kia am 2026-11-03:
   „nach oben gibt es so riesen weisse Abstand des Navi das kann man auch
   wegmachen." Betrifft /private/, /geschenk/ und /ausbildung/ gleichermassen. */
.page-sub:has(> .entry-content > .bildkopf:first-child),
.page-sub:has(> .entry-content > .bildband:first-child){
  margin-block-start:0;padding-block-start:0}

/* Bild als volles Band ueber die Fensterbreite, Titel und Vorspann DARUNTER.
   Gebraucht auf /private/: Kia wollte dort einen engen Ausschnitt („nur das
   Gesicht … und die Arme, Haende und Koerper"). Zwei Personen fuellen damit die
   ganze Breite - ein Textblock auf dem Bild deckte zwangslaeufig eine davon zu
   (erst die Taenzerin, nach dem Umstellen den Tanzlehrer). Darum hier Bild und
   Text untereinander statt uebereinander.
   `padding-top` haelt das Band von der festen Kopfzeile frei, so wie es sonst
   `.page-sub` taete - das ist fuer Seiten mit Bild oben abgeschaltet. */
.bildband{margin-block:0 clamp(22px,3vw,38px);padding-top:var(--hdr-h);
  background:var(--paper)}
.bildband img{display:block;width:100%;max-width:100%;height:auto}

/* Dasselbe Band mitten auf der Seite statt ganz oben: dort haelt der Kopfbereich
   keinen Platz fuer die feste Navigation frei, dafuer braucht es Luft nach beiden
   Seiten. Gegenstueck zu .bildkopf--band auf /ausbildung/ — nur ohne Text im Bild,
   weil das Privatunterricht-Foto keine freie Flaeche hat (siehe P-0019). */
.bildband--mitte{padding-top:0;margin-block:clamp(26px,4vw,48px) clamp(34px,5vw,60px)}
/* Bildunterschrift: sagt, was zu sehen ist, ohne dem Bild im Weg zu stehen.
   Dieselbe Breite wie der Fliesstext darueber, damit die Seite eine Kante hat. */
.bildband figcaption{max-width:var(--maxw);margin:12px auto 0;
  padding-inline:clamp(20px,5vw,40px);font-size:14px;line-height:1.55;
  color:var(--ink-soft)}


/* ===========================================================================
   Die Säle — Galerie auf /raeume/
   Fotos von Kia am 2026-11-09; Zuordnung aus gedaechtnis/themen/
   tanzraeume-stuttgart.md.

   ⚠️ Die Werte sind NICHT frei gewählt: Radius, Flächenton, Schriftgewicht,
   Abstände und Schriftgrößen sind Zeichen für Zeichen die der `.weiter-karte`
   (Zeile ~1110) — der Hauskarte, die auf /private/, /ausbildung/ und
   /kursinhalte/ steht. Eine Saalkarte ist eine Hauskarte mit Foto, sonst
   nichts. Kia am 2026-11-10: „so wie gleiche Konzept wie alle anderen Seiten".

   Beim ersten Anlauf standen hier eigene Variablennamen (--papier, --tinte,
   --calor, --schrift-anzeige). Die gibt es im Theme nicht — es griffen stumm
   die Fallbacks, und die vier Saalnamen standen in Georgia statt in
   Bricolage Grotesque. Darum: nur Variablen benutzen, die in `:root` stehen.
   =========================================================================== */
.saal-gitter{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:16px;
  margin:22px 0 0;
}
.saal-karte{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--paper-2);
  border-radius:14px;
  overflow:hidden;
}
.saal-karte__bild{
  display:block;
  width:100%;
  height:auto;          /* zwingend, sonst verzerrt es mit width/height-Attribut */
  aspect-ratio:3/2;
  object-fit:cover;
  background:var(--paper-2);
}
.saal-karte__text{padding:22px 24px 20px}
.saal-karte__groesse{
  margin:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.saal-karte__name{
  margin:9px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  line-height:1.2;
  color:var(--ink);
}
.saal-karte__text p{
  margin:9px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
}

/* Die Bar quer über die ganze Breite — sie gehört zu La Pachanga und ist
   das Argument für Feiern. */
.bar-band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px;
  margin:22px 0 0;
}
.bar-band img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:14px;
  background:var(--night-2);
}

/* ===========================================================================
   Die vier Festivals — Karten mit Bild, Termin und Link
   Kia am 2026-11-10: „Du kannst so eine Screenshot von Kuba Festival oder
   Bajata Festival … machen. Und das Screenshot oder das Bild benutzen für
   auch Verlinkung auf den Seite."

   Die ganze Karte ist der Link, nicht nur der Name — eine Kachel, die aussieht
   wie ein Plakat, will man anklicken, nicht die drei Wörter darunter. Dieselbe
   Idee wie die vier Tanz-Kacheln auf der Startseite.

   Werte wie bei `.saal-karte`: Papierton, 14 px Radius, kein Schatten. Nur das
   Seitenverhältnis ist anders (16:9 statt 3:2), weil die Aufnahmen von den
   Festival-Websites so zugeschnitten sind.
   =========================================================================== */
.fest-gitter{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:16px;
  margin:22px 0 0;
}
.fest-karte{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--paper-2);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform 180ms var(--ease);
}
/* Nur wo es einen Mauszeiger gibt. Am Handy klebt ein Hover-Zustand sonst
   nach dem Antippen fest. */
@media(hover:hover) and (pointer:fine){
  .fest-karte:hover{transform:translateY(-3px)}
  .fest-karte:hover .fest-karte__name{color:var(--red-deep)}
}
.fest-karte:active{transform:scale(.985)}
.fest-karte:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.fest-karte__bild{
  display:block;
  width:100%;
  height:auto;          /* zwingend, sonst verzerrt es mit width/height-Attribut */
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--night-2);
}
.fest-karte__text{padding:16px 18px 18px}
.fest-karte__termin{
  margin:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.fest-karte__name{
  margin:7px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  line-height:1.2;
  color:var(--ink);
  transition:color 180ms var(--ease);
}
/* Das kleine Zeichen sagt: Das öffnet eine andere Website. */
.fest-karte__name::after{content:" ↗";font-weight:400;color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){
  .fest-karte,.fest-karte__name{transition:none}
  .fest-karte:hover,.fest-karte:active{transform:none}
}
/* Ein zweiter Termin, wo es ihn gibt. Klein unter dem Namen — die Karte soll
   nicht mit zwei gleich großen Daten anfangen. Beim Latin Festival steht hier
   der Termin 2027, damit ab dem 8. Dezember 2026 kein vergangenes Datum
   allein dasteht. */
.fest-karte__danach{
  margin:5px 0 0;
  font-size:13px;
  line-height:1.4;
  color:var(--ink-soft);
}

/* ===========================================================================
   Seitenkopf mit Zeichen statt Foto  (.bildkopf--icon)
   ---------------------------------------------------------------------------
   WOFÜR: /termin-reservierung/, /kontakt/ und /anfahrt/ waren die einzigen
   Unterseiten ohne Bildkopf — nur ein Textkasten, rechts blieb die Fläche leer.
   Kia am 2026-11-11: „bei Terminreservierung Kontakt und Anfahrt … auf rechter
   Seite, wo leer ist … ein Icon groß … dass es nicht so langweilig aussieht."

   WARUM KEIN FOTO, obwohl P-0023 Bildköpfe verlangt: Für diese drei Seiten gibt
   es kein ehrliches Motiv. Ein beliebiges Stockfoto wäre Dekoration ohne
   Aussage. Das Zeichen sagt in einem Blick, worum es geht — und der Kopf behält
   Höhe, Textlage und Abstände des Bildkopfs, damit die Seite sich einreiht
   statt auszuscheren. Damit erfüllt sie den Maßstab aus P-0023 dem Sinn nach.

   DIE ZEICHEN stammen von Lucide (ISC-Lizenz, frei auch gewerblich) und stehen
   als Pfade IM HTML — nichts wird von fremden Servern nachgeladen, die Seite
   bleibt bei null Drittanbieter-Anfragen.
   =========================================================================== */
/* Der warme Schein liegt RADIAL um das Zeichen und läuft nach allen Seiten aus.
   Ein schräger Verlauf (erster Versuch) endete an der Unterkante des Kopfes mit
   einer sichtbaren waagerechten Kante — bei einem Foto erwartet das Auge so eine
   Kante, bei einer Farbfläche wirkt sie wie ein Fehler. */
.bildkopf--icon{
  background:
    radial-gradient(118% 150% at 82% 48%,
      var(--paper-2) 0%, rgba(247,239,227,.55) 38%, rgba(247,239,227,0) 68%),
    var(--paper);
  align-items:center;
  gap:clamp(16px,3vw,48px);
}
/* Der Verlauf des Foto-Kopfs gehört hier nicht hin: er macht Schrift über einem
   Bild lesbar. Ohne Bild wäre er nur ein Schleier. */
.bildkopf--icon::after{display:none}

.bildkopf--icon .bildkopf__text{
  margin-left:0;margin-right:auto;
  padding-left:clamp(24px,4vw,56px);padding-right:0;
}

.kopf-icon{
  position:relative;z-index:1;flex:0 0 auto;
  margin-right:clamp(24px,5vw,80px);
  display:grid;place-items:center;
  width:clamp(170px,22vw,280px);
  aspect-ratio:1;
}
/* Zwei Ringe: der innere trägt das Zeichen, der äußere ist ein Echo und nimmt
   der Fläche die Leere. Beide aus den Papiertönen — kein neues Grau. */
.kopf-icon::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--line);opacity:.55;
}
.kopf-icon::after{
  content:"";position:absolute;inset:11%;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--line);
}
.kopf-icon svg{
  position:relative;z-index:1;
  width:46%;height:46%;
  color:var(--red);
  /* Lucide zeichnet für 24 px mit Strichstärke 2. Zehnfach vergrößert wäre der
     Strich klobig — 1,25 trägt die Form, ohne plump zu wirken. */
  stroke-width:1.25;
}

@media(max-width:820px){
  .bildkopf--icon{
    flex-direction:column-reverse;   /* Zeichen oben, Text darunter */
    min-height:0;
    padding-bottom:clamp(18px,4vw,28px);
    gap:4px;
  }
  /* width:auto, NICHT 100 % — dieses Theme rechnet in content-box (es gibt kein
     globales border-box). Mit 100 % kämen die 2 × 24 px Innenabstand oben drauf:
     der Textblock wurde 423 px breit im 375-px-Fenster und der Vorspann rechts
     abgeschnitten (am 2026-11-11 auf dem Handy gesehen). `align-self` muss mit,
     weil `.bildkopf__text` von Haus aus auf `center` steht. */
  .bildkopf--icon .bildkopf__text{
    padding:4px 24px 0;width:auto;margin:0;align-self:stretch;
  }
  .kopf-icon{
    margin:calc(var(--hdr-h) + 14px) auto 0;
    width:clamp(108px,30vw,150px);
  }
}
@media(max-width:400px){
  .kopf-icon{width:96px}
}