/* =========================================================
   tanzahrt · Tanz- und Ballettschule
   Redesign 2026
   ========================================================= */

:root{
  --ink:        #17110d;
  --ink-soft:   #2a201a;
  --cream:      #f7f2ea;
  --cream-deep: #efe6d9;
  --paper:      #fdfbf7;
  --rose:       #b57a63;   /* dusty terracotta accent */
  --rose-deep:  #9c6350;
  --gold:       #c3a367;
  --muted:      #574c42;
  --line:       rgba(23,17,13,.12);
  --ok:         #3f7d54;   /* Erfolgsmeldungen und geprüfter Spam-Schutz */

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ff-script:  'Alex Brush', cursive;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  font-weight:400;
  font-size:1.04rem;
  color:var(--ink);
  background:var(--paper);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist zwingend, sobald ein Bild die Attribute width und height
   trägt (gegen Layout-Shift): ohne das würden die Attribute die Höhe fixieren
   und Bilder stauchen. Regeln mit eigener Höhe (.g-item, .photo-grid,
   .lightbox) haben höhere Spezifität und bleiben unberührt. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
#probetraining,#anfahrt,#faq,#stationen{scroll-margin-top:100px}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* Nur für Screenreader und Suchmaschinen: ergänzt die Überschrift um den
   Ortsbezug, der unmittelbar darüber auch sichtbar steht („Sinzig · Zehnthof"). */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:500;color:var(--rose);margin-bottom:1rem;
}
.eyebrow.light{color:var(--gold)}
.section-title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.08;
  letter-spacing:.005em;
}
.section-head.center{text-align:center;max-width:760px;margin:0 auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ff-body);font-weight:400;font-size:.86rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 2.1em;border-radius:2px;
  transition:all .4s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--rose);color:#fff}
.btn-primary:hover{background:var(--rose-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(156,99,80,.6)}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* Der Knopf über die ganze Breite darf umbrechen: .btn setzt white-space:nowrap,
   wodurch die Beschriftung auf schmalen Geräten eine Mindestbreite erzwang und
   das Formular über den Rand schob. */
.btn-block{width:100%;margin-top:.5rem;white-space:normal}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.4rem 0;
  transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease);
}
.site-header.scrolled{
  background:rgba(253,251,247,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.75rem 0;
  box-shadow:0 1px 0 var(--line);
}
/* backdrop-filter erzeugt einen Bezugsrahmen und würde das position:fixed-Menü
   an den Header statt an den Viewport binden – daher bei offenem Menü deaktivieren. */
.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-inner{
  width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;flex-direction:column;line-height:1;color:#fff;transition:color .45s var(--ease)}
.scrolled .brand{color:var(--ink)}
/* Schriftzug in Jost kursiv 800 – der Schnitt kommt der Schrift des Logos am
   nächsten und ist zugleich die Hausschrift der Seite. Die Angabe wiederholt
   sich beim großen Schriftzug im Kopfbereich sowie in Footer und
   Rechtsseiten, siehe unten. */
/* Der Zeichenabstand ist so gewählt, dass der Schriftzug genau so breit
   erscheint wie der Slogan darunter. Er hängt damit an drei Werten: der
   Schriftgröße beider Zeilen und dem Zeichenabstand des Slogans. Ändert sich
   einer davon oder der Text, muss er neu bestimmt werden.
   Footer und Rechtsseiten setzen ihren eigenen Wert, siehe unten. */
.brand-word{font-family:var(--ff-body);font-style:italic;font-weight:800;font-size:1.7rem;letter-spacing:.311em}
.brand-sub{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;opacity:.8;margin-top:.35em}

.nav{display:flex;gap:1.6rem}
.nav a{
  position:relative;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:400;color:rgba(255,255,255,.9);transition:color .3s;padding:.2em 0;
  white-space:nowrap;
}
.scrolled .nav a{color:var(--ink-soft)}
/* Der Unterstrich wächst über transform statt über die Breite: transform wird
   vom Compositor bewegt und löst kein Neuberechnen der Anordnung aus. */
.nav a::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a:hover,.nav a.active{color:var(--rose)}

.btn-nav{
  padding:.7em 1.5em;font-size:.74rem;
  border-color:rgba(255,255,255,.5);color:#fff;
}
.scrolled .btn-nav{border-color:var(--rose);color:var(--rose)}
.btn-nav:hover{background:var(--rose);border-color:var(--rose);color:#fff}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:34px;height:26px;justify-content:center;z-index:110}
.nav-toggle span{display:block;height:2px;width:100%;background:#fff;transition:.35s var(--ease);transform-origin:center}
.scrolled .nav-toggle span{background:var(--ink)}
.nav-open .nav-toggle span{background:var(--ink)}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-bg{position:absolute;inset:-4%;background-size:cover;background-position:center 32%}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(23,17,13,.55) 0%,rgba(23,17,13,.25) 35%,rgba(23,17,13,.7) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(23,17,13,.5) 100%);
}
.hero-content{position:relative;z-index:2;color:#fff;padding:0 20px;max-width:900px}
.hero-kicker{font-size:.86rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.hero-title{
  /* Jost kursiv 800 – siehe Erläuterung beim Schriftzug im Kopf. Die Datei liegt
     selbst gehostet im Projekt, es entsteht kein Abruf bei Dritten. */
  font-family:var(--ff-body);font-style:italic;font-weight:800;
  font-size:clamp(3.4rem,12vw,8.4rem);line-height:.95;
  /* padding-left gleicht den Abstand hinter dem letzten Zeichen aus, damit der
     Schriftzug optisch mittig steht – der Wert muss dem Zeichenabstand folgen. */
  letter-spacing:.264em;padding-left:.264em;
  text-shadow:0 6px 44px rgba(0,0,0,.55);
}
.hero-lead{font-family:var(--ff-display);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.35rem);margin-top:.6rem;font-weight:500;text-shadow:0 3px 24px rgba(0,0,0,.6)}
.hero-sub{font-size:1.02rem;letter-spacing:.24em;text-transform:uppercase;margin-top:1.1rem;opacity:1;font-weight:400;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}

.hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:44px;border:1px solid rgba(255,255,255,.55);border-radius:14px;display:flex;justify-content:center;padding-top:8px}
.hero-scroll span{width:3px;height:8px;background:#fff;border-radius:2px;animation:scrolldot 1.8s infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}}

/* ---------- Ken Burns (dezente „Video"-Bewegung) ---------- */
.kenburns{animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{
  0%{transform:scale(1.05) translate(0,0)}
  100%{transform:scale(1.16) translate(-1.5%,-2%)}
}
/* Ruhigere Bewegung für den Startseiten-Hero, damit „tanzahrt" auf Brusthöhe bleibt */
.hero-bg.kenburns{animation:kenburns-hero 32s ease-in-out infinite alternate}
@keyframes kenburns-hero{
  0%{transform:scale(1.03)}
  100%{transform:scale(1.09) translateY(-1.4%)}
}

/* =========================================================
   SECTIONS base
   ========================================================= */
.section{padding:clamp(4.5rem,10vw,8rem) 0}
.intro{background:var(--paper)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.intro-text p{margin-bottom:1.2rem;color:var(--ink-soft);font-size:1.06rem}
.signature{font-family:var(--ff-script);font-size:2.6rem !important;color:var(--rose);margin-top:.4rem !important}

/* =========================================================
   ANGEBOT CARDS (bildhinterlegte Überschriften)
   ========================================================= */
.angebot{background:var(--cream);padding-bottom:clamp(4.5rem,10vw,8rem)}
.angebot .section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.cards{
  width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,48px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}
.card{
  position:relative;overflow:hidden;border-radius:4px;
  min-height:clamp(360px,46vw,520px);display:flex;align-items:flex-end;
  isolation:isolate;
}
.card-bg{position:absolute;inset:-3%;z-index:0;background-size:cover;background-position:center}
.kenburns-card .card-bg{animation-duration:30s}
.card:nth-child(2) .card-bg{animation-delay:-8s}
.card:nth-child(3) .card-bg{animation-delay:-16s}
.card-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,17,13,.05) 30%,rgba(23,17,13,.82) 100%);transition:background .5s}
.card:hover .card-scrim{background:linear-gradient(180deg,rgba(156,99,80,.25) 20%,rgba(23,17,13,.88) 100%)}
.card-body{position:relative;z-index:2;padding:2.2rem;color:#fff;width:100%}
.card-age{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.card-title{font-family:var(--ff-display);font-weight:500;font-size:2.6rem;line-height:1;margin:.35rem 0 .6rem}
.card-link{display:inline-block;margin-top:1.1rem;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--rose);padding-bottom:3px;transition:.3s}
.card:hover .card-link{color:var(--gold);border-color:var(--gold)}

/* =========================================================
   COURSE SECTIONS + bildhinterlegte Banner-Überschriften
   ========================================================= */
.course{padding-bottom:clamp(4rem,9vw,7rem);background:var(--paper)}
.course.alt{background:var(--cream)}
.course-banner{
  position:relative;height:clamp(240px,38vw,420px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.course-bg{position:absolute;inset:-4%;background-size:cover;background-position:center 35%;z-index:0}
.course-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,17,13,.45),rgba(23,17,13,.6))}
.course-banner-title{
  position:relative;z-index:2;color:#fff;
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:.02em;
  text-shadow:0 4px 30px rgba(0,0,0,.45);padding:0 20px;
}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.course-grid.three{grid-template-columns:repeat(3,1fr)}
.course-intro{
  text-align:center;font-family:var(--ff-display);font-style:italic;
  font-size:clamp(1.3rem,3vw,1.9rem);color:var(--ink-soft);
  max-width:820px;margin:0 auto clamp(2.5rem,5vw,3.5rem);line-height:1.4;
}
.course-block h3{font-family:var(--ff-display);font-weight:600;font-size:1.7rem;margin-bottom:.7rem;color:var(--ink)}
.course-block p{color:var(--muted);font-size:1.02rem}
/* Verweise in den Kursblöcken stehen auf Creme, nicht auf einem Bild – daher
   im Roséton und nicht in Weiß wie .card-link auf den Kacheln der Startseite. */
.course-block a{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);border-bottom:1px solid rgba(181,122,99,.45);padding-bottom:2px;transition:color .3s,border-color .3s}
.course-block a:hover{color:var(--rose-deep);border-color:var(--rose)}
.course-tag{display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-bottom:.7rem}

/* =========================================================
   NICOLE FAUST
   ========================================================= */
.nicole{background:var(--paper)}
.nicole-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.nicole-portrait{position:relative;max-width:420px}
.nicole-portrait img{width:100%;border-radius:4px;aspect-ratio:1/1;object-fit:cover;box-shadow:0 30px 60px -30px rgba(23,17,13,.5)}
.nicole-portrait::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--rose);border-radius:4px;z-index:-1}
.nicole-badge{position:absolute;top:-16px;right:-10px;background:var(--rose);color:#fff;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.55em 1.1em;border-radius:2px}
.nicole-text p{margin-bottom:1.15rem;color:var(--ink-soft);font-size:1.2rem;line-height:1.8}
.nicole-text .section-title{margin-bottom:1.4rem}

.timeline{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border-top:1px solid var(--line);
}
.timeline li{padding:1.8rem 1.2rem 0;border-left:1px solid var(--line);position:relative}
.timeline li:first-child{border-left:none}
.timeline li::before{content:"";position:absolute;top:-5px;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--rose)}
.tl-year{display:block;font-family:var(--ff-display);font-weight:600;font-size:1.5rem;color:var(--rose);margin-bottom:.4rem}
.tl-text{display:block;font-size:.92rem;color:var(--muted)}

/* =========================================================
   LEITMOTIV (full-bleed image band)
   ========================================================= */
.leitmotiv{position:relative;overflow:hidden;padding:clamp(5rem,12vw,9rem) 0;text-align:center}
.leitmotiv-bg{position:absolute;inset:-4%;z-index:0;background-size:cover;background-position:center;animation-duration:34s}
.leitmotiv-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,17,13,.82),rgba(23,17,13,.72))}
.leitmotiv-inner{position:relative;z-index:2;max-width:860px;color:var(--cream)}
.big-quote{font-family:var(--ff-display);font-style:italic;font-weight:500;font-size:clamp(2.2rem,6vw,4rem);line-height:1.1;margin:.5rem 0}
.quote-author{display:block;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem;font-style:normal}
.leitmotiv-text{font-size:1.08rem;line-height:1.8;color:rgba(247,242,234,.9)}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-section{background:var(--cream)}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:1120px;margin:clamp(2.5rem,5vw,3.5rem) auto 0}
.gallery .g-item{flex:0 0 calc((100% - 2rem) / 3)}
.g-item{overflow:hidden;border-radius:3px;margin:0;aspect-ratio:3/2}
.g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.g-item:hover img{transform:scale(1.06)}

/* =========================================================
   NIETZSCHE quote band
   ========================================================= */
.quote-band{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);text-align:center;padding:clamp(5rem,10vw,8rem) 20px}
.quote-bg{position:absolute;inset:-4%;z-index:0;background-size:cover;background-position:center 30%}
.quote-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(23,17,13,.78),rgba(23,17,13,.72)),
    radial-gradient(120% 100% at 50% 50%,transparent 25%,rgba(23,17,13,.6) 100%);
}
.quote-inner{position:relative;z-index:2}
.script-quote{font-family:var(--ff-script);font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.2;color:#fff;max-width:20ch;margin:0 auto 1.2rem;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.quote-band cite{font-size:.92rem;letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:rgba(247,242,234,.95);text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt{background:var(--paper)}
.kontakt-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem)}
.kontakt-lead{color:var(--ink-soft);margin:1.2rem 0 2.2rem;font-size:1.2rem;line-height:1.8}
.contact-list li{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.ci-label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);padding-top:.2em}
.ci-value{color:var(--ink-soft);font-size:1.1rem}
.ci-value a:hover{color:var(--rose)}

.kontakt-form{background:var(--cream);padding:clamp(1.8rem,4vw,2.8rem);border-radius:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field{margin-bottom:1.2rem;display:flex;flex-direction:column}
.field label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
/* Formularelemente bringen eine Eigenbreite mit: ein select richtet sich an
   seiner längsten Option aus (hier 314px), ein input an size=20 (230px).
   Dadurch schob das Formular die Seite auf schmalen Geräten waagerecht über den
   Rand. min-width:0 allein genügt bei select nicht – erst die prozentuale
   Breite nimmt die Eigenbreite aus der Mindestbreite des Formulars heraus.
   Wirkt zusammen mit box-sizing:border-box aus dem Reset. */
.field input,.field select,.field textarea{width:100%;min-width:0}
.field input,.field textarea{
  font-family:var(--ff-body);font-size:1rem;font-weight:300;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:.85em 1em;transition:border-color .3s,box-shadow .3s;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(181,122,99,.12)}
.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--muted);margin:.4rem 0 1.4rem}
.checkbox input{margin-top:.28em;accent-color:var(--rose);width:16px;height:16px;flex-shrink:0}
.checkbox a{color:var(--rose);text-decoration:underline}
.form-note{margin-top:1rem;font-size:.92rem;min-height:1.2em}
.form-note.ok{color:var(--ok)}
.form-note.err{color:#b0442f}

/* =========================================================
   KONTAKTFORMULAR – Honeypot & AltCha
   ========================================================= */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.kontakt-form altcha-widget{display:block;margin:0 0 1.4rem;
  --altcha-border-width:1px;
  --altcha-border-radius:3px;
  --altcha-color-base:var(--paper);
  --altcha-color-border:var(--line);
  --altcha-color-text:var(--ink-soft);
  --altcha-color-border-focus:var(--rose);
  --altcha-color-error-text:#b0442f;
  --altcha-color-active:var(--rose);
  --altcha-max-width:100%;
}
/* Das Kästchen der Bibliothek ist ein gewöhnliches Kontrollfeld und käme sonst
   im Browserblau. Der Haken erscheint in der Erfolgsfarbe der Seite, die Größe
   entspricht dem Kästchen für die Datenschutz-Zustimmung darüber. */
.kontakt-form altcha-widget input[type="checkbox"]{
  accent-color:var(--ok);width:16px;height:16px;
}
/* Der Ladekringel und das Logo daneben in Roséton statt Grau. */
.kontakt-form altcha-widget .altcha-logo,
.kontakt-form altcha-widget svg{color:var(--rose)}

/* =========================================================
   ANFAHRT / KARTE mit Consent-Gate
   ========================================================= */
.map-section{background:var(--cream)}
.map-wrap{
  position:relative;aspect-ratio:16/10;max-width:1000px;
  margin:clamp(2rem,4vw,3rem) auto 0;border-radius:5px;overflow:hidden;
  background:var(--ink);box-shadow:0 18px 40px -22px rgba(23,17,13,.55);
}
.map-holder{position:absolute;inset:0}
.map-holder iframe{width:100%;height:100%;border:0;display:block}
.map-consent{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.2rem,4vw,2.5rem);text-align:center;
  background:radial-gradient(120% 120% at 50% 30%,#241a15,#17110d);
}
.map-consent-card{max-width:540px;color:var(--cream)}
.map-consent-card h3{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.8rem}
.map-consent-card p{color:rgba(247,242,234,.82);font-size:1rem;line-height:1.65;margin-bottom:1.1rem}
.map-remember{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;color:rgba(247,242,234,.85);margin-bottom:1.4rem;cursor:pointer}
.map-remember input{accent-color:var(--rose);width:16px;height:16px}
.map-consent-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center}
.map-alt-link{font-size:.9rem;letter-spacing:.02em;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.map-alt-link:hover{color:var(--cream)}
.map-consent-note{margin-top:1.3rem;font-size:.85rem;color:rgba(247,242,234,.6)}
.map-consent-note a{color:rgba(247,242,234,.85);text-decoration:underline}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:center;text-align:center;margin-top:1.6rem}
.map-actions-note{font-size:.9rem;color:var(--muted)}
/* Widerruf der Karten-Einwilligung – eigene Zeile, bewusst zurückhaltend.
   flex-basis:100% sorgt für den Umbruch; [hidden] muss die Flex-Anzeige schlagen. */
.map-revoke{
  flex:0 0 100%;font-size:.88rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;padding:.2rem 0;
}
.map-revoke:hover,.map-revoke:focus-visible{color:var(--rose-deep)}
.map-revoke[hidden]{display:none}

/* =========================================================
   SIEGEL / FÖRDERUNG
   ========================================================= */
/* Der Förderhinweis hat bewusst KEINEN eigenen Innenabstand: Der Abstand nach
   oben kommt aus der Angebots-Sektion, der nach unten aus der folgenden Sektion.
   Da beide denselben Wert nutzen, sitzt der Block automatisch mittig – und das
   auf jeder Bildschirmbreite. Der cremefarbene Hintergrund entspricht dem der
   Nachbarsektionen, sodass keine Kante entsteht. */
.seals-section{background:var(--cream)}
.seals{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem}
.seals-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2rem,5vw,3.5rem)}
.seals-logos .seal{height:76px;width:auto;border-radius:3px}
.seals-note{max-width:660px;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* =========================================================
   PROBETRAINING – Formular-Select, Schritte
   ========================================================= */
.field select{
  font-family:var(--ff-body);font-size:1rem;font-weight:400;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.85em 1em;
  transition:border-color .3s,box-shadow .3s;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b57a63' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;background-size:1.1em;padding-right:2.6em;
}
.field select:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(181,122,99,.12)}

.steps{margin-top:2.2rem;display:grid;gap:1.3rem}
.steps-title{font-family:var(--ff-display);font-weight:600;font-size:1.35rem;color:var(--ink);margin-bottom:.4rem}
.step{display:flex;gap:1rem;align-items:flex-start}
.step-num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--rose);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:600;font-size:1.15rem}
.step-txt h3{font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:.1rem}
.step-txt p{font-size:.96rem;color:var(--muted);line-height:1.55}

/* =========================================================
   FAQ (native <details>, barrierearm)
   ========================================================= */
.faq-section{background:var(--cream)}
.faq{max-width:820px;margin:clamp(2rem,4vw,3rem) auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem .4rem;display:flex;justify-content:space-between;
  align-items:center;gap:1.2rem;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.35rem);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ff-body);font-weight:300;font-size:1.6rem;line-height:1;
  color:var(--rose);transition:transform .3s var(--ease);flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 .4rem 1.5rem}
.faq details p{color:var(--ink-soft);line-height:1.75;margin:0 0 .8rem}
.faq details p:last-child{margin-bottom:0}

/* =========================================================
   GALERIE-SEITE (Masonry) & Galerie-Verweis
   ========================================================= */

.gallery-cta{text-align:center;max-width:640px;margin:clamp(2rem,4vw,3rem) auto 0}
.gallery-cta p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 1.6rem}

/* =========================================================
   LIGHTBOX (Galerie-Bilder)
   ========================================================= */
.gallery img,.photo-grid img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(23,17,13,.93);padding:clamp(12px,4vw,48px)}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:3px;box-shadow:0 30px 80px -20px #000}
.lb-btn{position:absolute;background:rgba(247,242,234,.12);border:1px solid rgba(247,242,234,.3);color:#fff;
  width:52px;height:52px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.lb-btn:hover{background:var(--rose);border-color:var(--rose)}
.lb-close{top:clamp(12px,3vh,28px);right:clamp(12px,3vw,28px)}
.lb-prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lb-prev{left:8px}.lb-next{right:8px}.lb-btn{width:44px;height:44px}}

/* =========================================================
   STICKY-CTA (Probestunde), immer erreichbar
   ========================================================= */
.sticky-cta{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:90;
  display:inline-flex;align-items:center;gap:.55em;background:var(--rose);color:#fff;
  padding:.95em 1.5em;border-radius:100px;font-family:var(--ff-body);font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:0 14px 34px -10px rgba(156,99,80,.7);
  opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto}
.sticky-cta:hover{background:var(--rose-deep);color:#fff}
.sticky-cta svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:600px){
  .sticky-cta{font-size:.72rem;letter-spacing:.1em;gap:.5em;padding:.85em 1.15em;bottom:16px;right:16px;left:auto;max-width:calc(100vw - 32px)}
  .sticky-cta svg{width:16px;height:16px}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink);color:rgba(247,242,234,.84)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem clamp(1.4rem,2.5vw,2.5rem);padding:clamp(3.5rem,7vw,5rem) clamp(20px,5vw,48px) 3rem}
/* Der Schriftzug ist ein Wort und kann nicht umbrechen. In Jost fällt er breiter
   aus als zuvor in Arial und schob den Fußbereich auf sehr schmalen Geräten über
   den Rand. Ab etwa 457px Breite greift unverändert 2rem, darunter skaliert er mit. */
.footer-brand .brand-word{font-family:var(--ff-body);font-style:italic;font-weight:800;font-size:clamp(1.6rem,7vw,2rem);letter-spacing:.18em;color:var(--cream);display:block;margin-bottom:.8rem}
.footer-brand p{font-size:.95rem;line-height:1.6}
.footer-area{margin-top:.9rem!important;font-size:.85rem;color:rgba(247,242,234,.6);max-width:34ch}
.footer-col h2{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
.footer-col p{font-size:.95rem;margin-bottom:.7rem}
.footer-col a:hover{color:var(--cream)}
.footer-nav{display:flex;flex-direction:column;gap:.6rem}
.footer-nav a{font-size:.95rem}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  border-top:1px solid rgba(247,242,234,.12);
  padding:1.6rem clamp(20px,5vw,48px);font-size:.85rem;
}
.legal-nav{display:flex;gap:1.8rem}
.legal-nav a:hover{color:var(--cream)}
.footer-copyright{
  text-align:center;border-top:1px solid rgba(247,242,234,.12);
  padding:1.6rem clamp(20px,5vw,48px);font-size:.85rem;color:rgba(247,242,234,.6);margin:0;
}

/* =========================================================
   PAGE HERO (Unterseiten – bildhinterlegte Überschrift)
   ========================================================= */
.page-hero{
  position:relative;height:clamp(320px,58vh,560px);min-height:320px;
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
}
.page-hero-bg{position:absolute;inset:-4%;z-index:0;background-size:cover;background-position:center 35%}
.page-hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(23,17,13,.62) 0%,rgba(23,17,13,.5) 45%,rgba(23,17,13,.72) 100%),
    radial-gradient(130% 100% at 50% 45%,transparent 35%,rgba(23,17,13,.5) 100%);
}
.page-hero-inner{position:relative;z-index:2;color:#fff;padding:0 20px;max-width:900px}
.page-hero .ph-kicker{font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.page-hero h1{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.8rem,7.2vw,5.4rem);line-height:1;letter-spacing:.02em;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.page-hero .ph-sub{
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.35rem,3vw,2.1rem);
  margin-top:.8rem;font-weight:500;color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.65);
}
.page-hero .ph-cite{display:block;margin-top:.9rem;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* =========================================================
   FEATURE BAND (bildhinterlegte Bild-Text-Sektion)
   ========================================================= */
.feature-band{
  position:relative;overflow:hidden;
  min-height:clamp(360px,56vh,540px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.feature-band-bg{position:absolute;inset:-4%;z-index:0;background-size:cover;background-position:center}
.feature-band-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(23,17,13,.6) 0%,rgba(23,17,13,.5) 50%,rgba(23,17,13,.66) 100%),
    radial-gradient(120% 100% at 50% 50%,transparent 30%,rgba(23,17,13,.55) 100%);
}
.feature-band-inner{position:relative;z-index:2;color:#fff;max-width:840px;padding:clamp(2.5rem,6vw,4rem) 22px}
.feature-band .fb-kicker{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.feature-band .fb-quote{
  font-family:var(--ff-display);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.24;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.feature-band .fb-cite{display:block;margin-top:1.4rem;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,242,234,.85);font-style:normal}

/* =========================================================
   PROSE (Fließtext der Unterseiten)
   ========================================================= */
.prose{max-width:780px;margin:0 auto}
/* Die Eyebrow-Zeile im Prosa-Block ist eine echte Überschrift (<h2>). Die Werte
   entsprechen exakt dem, was zuvor über `.prose p` vererbt wurde, damit die
   Darstellung unverändert bleibt. */
.prose .eyebrow{
  text-align:center;color:var(--ink-soft);
  font-size:1.2rem;line-height:1.8;margin-bottom:1.6rem;
}
.prose .subhead{
  font-family:var(--ff-display);font-weight:500;text-align:center;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.12;margin-bottom:2.2rem;
}
/* Steht der Zwischentitel am Ende des Blocks, käme sein unterer Abstand zum
   Innenabstand des Abschnitts hinzu – wie bei .prose p unterdrückt. */
.prose .subhead:last-child{margin-bottom:0}
/* Fließtext einheitlich: 1.2rem / 1.8 – gilt ebenso fuer .nicole-text p,
   .subsection p und .kontakt-lead. */
.prose p{color:var(--ink-soft);font-size:1.2rem;line-height:1.8;margin-bottom:1.6rem}
.prose p:last-child{margin-bottom:0}
.lead-quote{
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.4rem,3.4vw,2.1rem);
  color:var(--rose);text-align:center;line-height:1.4;margin:0 auto 2.5rem;max-width:40ch;
}

/* subsection with heading (Erwachsene: Ballett / Jazz) */
.subsection{max-width:820px;margin:0 auto}
.subsection + .subsection{margin-top:clamp(2.5rem,5vw,4rem)}
.subsection h2,.subsection h3,.prose h2.block-title{
  font-family:var(--ff-display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.2rem);
  color:var(--ink);margin-bottom:.4rem;text-align:center;
}
.subsection .st-tag{display:block;text-align:center;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:.7rem}
.subsection p{color:var(--ink-soft);font-size:1.2rem;line-height:1.8;margin-bottom:1.4rem}

/* =========================================================
   VIDEOS (Aufführungen) – Platzhalter
   ========================================================= */
.videos{background:var(--cream)}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;max-width:1000px;margin:clamp(2rem,4vw,3rem) auto 0}
.video-card{margin:0}
/* Bei ungerader Kachelzahl stünde die letzte allein links – sie rückt statt
   dessen mittig unter die Reihe darüber, wie in der Bildergalerie. */
.video-grid>.video-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .8rem)}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;
  background:var(--ink);box-shadow:0 18px 40px -22px rgba(23,17,13,.55);
}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
/* Nur sichtbar, wenn der Browser das video-Element gar nicht unterstützt. */
.video-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:var(--cream);font-size:.95rem;line-height:1.6}
.video-fallback a{color:var(--gold);text-decoration:underline}
/* Platzhalter-Ansicht */
.video-ph{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.video-ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,13,.35),rgba(23,17,13,.62))}
.video-play{
  position:relative;z-index:1;width:64px;height:64px;border-radius:50%;
  background:rgba(247,242,234,.92);display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.video-play::after{content:"";margin-left:4px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.video-card:hover .video-play{transform:scale(1.08);background:#fff}
.video-badge{
  position:absolute;z-index:1;top:.85rem;left:.85rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--cream);background:rgba(23,17,13,.6);border:1px solid rgba(247,242,234,.35);
  padding:.4em .8em;border-radius:2px;backdrop-filter:blur(3px);
}
.video-card figcaption{
  margin-top:1rem;text-align:center;
  font-family:var(--ff-display);font-weight:500;font-size:1.3rem;color:var(--ink);
}
.video-card figcaption span{display:block;font-family:var(--ff-body);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);margin-top:.25rem}

/* Einzelnes Video (zentriert) */
.video-single{max-width:860px;margin:clamp(2rem,4vw,3rem) auto 0}
.video-single .video-card figcaption{font-size:1.4rem}

/* =========================================================
   FOTO-GALERIE (quadratische Aufführungs-Fotos)
   ========================================================= */
/* Zwei Hochformat-Aufnahmen nebeneinander. Das feste Seitenverhältnis gleicht
   den kleinen Unterschied zwischen beiden Vorlagen aus, damit sie unten auf
   gleicher Höhe abschließen. */
.portrait-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem);max-width:760px;margin:clamp(2.5rem,5vw,4rem) auto 0}
.portrait-pair figure{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--ink)}
.portrait-pair img{width:100%;height:100%;object-fit:cover;display:block}

.photo-grid{display:grid;gap:1rem;max-width:1120px;margin:clamp(2rem,4vw,3rem) auto 0}
.photo-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.photo-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.photo-grid figure{margin:0;aspect-ratio:1;overflow:hidden;border-radius:3px;background:var(--ink)}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.photo-grid figure:hover img{transform:scale(1.06)}

/* =========================================================
   VERTICAL TIMELINE (Werdegang)
   ========================================================= */
.vtimeline{position:relative;max-width:760px;margin:0 auto}
.vtimeline li{position:relative;padding:0 0 2.2rem 3rem;border-left:1px solid var(--line)}
.vtimeline li:last-child{padding-bottom:0;border-left-color:transparent}
.vtimeline li::before{
  content:"";position:absolute;left:-16px;top:-.05em;width:32px;height:32px;border-radius:50%;
  background:var(--paper) url('../img/dancer.svg') no-repeat center / 21px 23px;
  border:1px solid var(--line);box-shadow:0 3px 10px -4px rgba(23,17,13,.3);
}
.vt-year{display:block;font-family:var(--ff-display);font-weight:600;font-size:1.15rem;color:var(--rose);margin-bottom:.15rem}
.vt-text{display:block;color:var(--muted);font-size:1.01rem;line-height:1.6}

/* =========================================================
   CONTACT STRIP (wiederkehrender Hinweis)
   ========================================================= */
.contact-strip{background:var(--ink);color:var(--cream);text-align:center;padding:clamp(3rem,6vw,4.5rem) 20px}
.contact-strip p{max-width:660px;margin:0 auto 1.6rem;font-size:1.35rem;font-family:var(--ff-display);font-style:italic;color:var(--cream)}
.contact-strip .cs-meta{font-style:normal;font-family:var(--ff-body);font-size:1.02rem;letter-spacing:.04em;color:rgba(247,242,234,.88);margin-bottom:2rem}
.contact-strip .cs-meta a{color:var(--gold)}
.contact-strip .cs-meta a:hover{color:var(--cream)}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal-header{background:var(--ink);color:var(--cream);padding:8rem 0 3.5rem;text-align:center}
.legal-header .brand-word{font-family:var(--ff-body);font-style:italic;font-weight:800;font-size:1.5rem;letter-spacing:.18em;color:var(--cream)}
.legal-header h1{font-family:var(--ff-display);font-weight:500;font-size:clamp(2.2rem,5vw,3.2rem);margin-top:.8rem}
.legal-header a.back{display:inline-block;margin-top:1.4rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.legal-header a.back:hover{color:var(--cream)}
/* Die Rechtstexte enthalten lange Verweise ohne Leerzeichen (bis 63 Zeichen).
   overflow-wrap:anywhere senkt die Mindestbreite und verhindert so, dass die
   Seite auf schmalen Geräten waagerecht scrollt. */
.legal-body{max-width:820px;padding:clamp(3rem,7vw,5rem) clamp(20px,5vw,48px);overflow-wrap:anywhere}
.legal-body h2{font-family:var(--ff-display);font-weight:600;font-size:1.6rem;margin:2.4rem 0 .8rem;color:var(--ink)}
.legal-body h3{font-size:1.05rem;font-weight:500;margin:1.6rem 0 .5rem;color:var(--ink-soft)}
.legal-body h4{font-size:1rem;font-weight:500;margin:1.5rem 0 .4rem;color:var(--ink-soft)}
/* Der Reset entfernt Aufzählungszeichen – im Rechtstext werden sie gebraucht. */
.legal-body ul{list-style:disc;margin:0 0 1rem 1.35rem;color:var(--muted)}
.legal-body li{margin-bottom:.5rem;line-height:1.7}
.legal-body p{color:var(--muted);margin-bottom:1rem}
.legal-body a{color:var(--rose);text-decoration:underline}
.legal-body strong{color:var(--ink-soft);font-weight:500}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Hauptmenü klappt zum Hamburger, sobald die 8 Punkte nicht mehr sicher
   in eine Zeile passen (eigener Breakpoint, unabhängig vom Layout unten). */
@media (max-width:1120px){
  .nav,.btn-nav{display:none}
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:0;background:var(--cream);flex-direction:column;
    align-items:center;justify-content:center;gap:1.8rem;
    transform:translateY(-100%);transition:transform .55s var(--ease);z-index:105;
  }
  .nav-open .nav{transform:translateY(0);display:flex}
  .nav a{color:var(--ink-soft);font-size:1.1rem}
}
@media (max-width:960px){
  .intro-grid,.nicole-grid,.kontakt-grid,.course-grid,.course-grid.three{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .video-grid{grid-template-columns:1fr 1fr}
  .gallery .g-item{flex-basis:calc((100% - 1rem) / 2)}
  .photo-grid.cols-4{grid-template-columns:repeat(3,1fr)}
  .nicole-portrait{margin:0 auto}
  .timeline{grid-template-columns:1fr 1fr;gap:1.5rem 0}
  .timeline li{border-left:none;padding:1.4rem 1rem}
  .timeline li:nth-child(odd){border-left:none}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .video-grid{grid-template-columns:1fr}
  /* Einspaltig gibt es keine unvollständige Reihe mehr. justify-self muss mit
     zurückgesetzt werden, sonst schrumpft die Kachel auf ihre Inhaltsbreite. */
  .video-grid>.video-card:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
  .gallery .g-item{flex-basis:100%}
  .photo-grid.cols-3,.photo-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .portrait-pair{grid-template-columns:1fr;max-width:420px}
  .hero-title{letter-spacing:.144em;padding-left:.144em}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .contact-list li{grid-template-columns:1fr;gap:.2rem}
  .timeline{grid-template-columns:1fr}
  /* Karte/Consent auf Mobil: festes Seitenverhältnis aufheben, damit der
     Consent-Text nicht abgeschnitten wird */
  .map-wrap{aspect-ratio:auto;min-height:480px}
  .map-consent{overflow-y:auto;padding:1.6rem 1.2rem}
  .map-consent-card h3{font-size:1.35rem}
  .map-consent-card p{font-size:.92rem}
  .map-consent-actions{flex-direction:column;gap:.9rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .kenburns{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .hero-scroll span{animation:none}
}