/* ==========================================================================
   Musikschule Bachrain / Fulda — Entwurf B: "Konzertprogramm" (Redesign)
   Editoriale Handschrift: Musik-Magazin / Programmheft.
   Markenfarben der Live-Seite (Petrol/Tiefblau + präziser Rot-Akzent),
   Notenlinien-Signatur, übergroße Sektions-Ziffern, Duotone-Fotografie,
   viel Weißraum, GSAP-gesteuerte Bewegung.
   --------------------------------------------------------------------------
   1. Tokens · 2. Reset/Base · 3. Typo · 4. Layout · 5. Header/Nav
   6. Buttons · 7. Eyebrow/Section-Head/Signatur · 8. Cards
   9. Sektionen (Hero, Index, Statement, Split, Preise, Team, Fakten, Kontakt, CTA)
   10. Formulare · 11. Footer · 12. GSAP-Hooks & Utilities · 13. Responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN-TOKENS
   ========================================================================== */
:root {
  /* --- Markenfarben (Plum → Magenta, Live-Seite) --- */
  --brand-deep:   #3A2030;  /* dunkles Maroon/Plum – Verlaufsanfang, dunkle Baender/Statement/Footer */
  --brand:        #9C1F78;  /* Magenta-Violett – Primaer (CTA, aktiver Nav-Unterstrich) */
  --brand-bright: #C42A97;  /* kraeftiges Magenta – NUR Deko/Akzentpunkt, NICHT Text */
  --brand-mid:    #6E2258;  /* mittleres Violett */
  --ink:          #2A1622;  /* fast-schwarzes Plum – Headlines/Text */
  --brand-text:   #8A1E69;  /* AA-sicheres Magenta fuer Links/kleinen Text auf Weiss */
  --bg:           #F8F5F7;  /* sehr helles plum-getoentes BG */
  --surface:      #FFFFFF;  /* Karten/Flaechen */
  --surface-2:    #FCFAFB;
  --muted:        #6B5560;  /* gedaempftes Mauve-Grau (AA auf --bg) */

  /* helles Lila-Magenta fuer Text/Akzente AUF dunklen Baendern (AA-sicher) */
  --accent-light: color-mix(in srgb, var(--brand-bright) 42%, #fff);

  /* Marken-Verlauf (Hero + Statement + Page-Hero) */
  --brand-gradient: linear-gradient(118deg, #3A2030 0%, #6E2258 48%, #A81E82 100%);

  /* --- Linien --- */
  --line:        color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 22%, transparent);
  --line-petrol: color-mix(in srgb, var(--brand) 45%, transparent);

  /* --- Aliase: alte Tokennamen auf die neuen Plum-Tokens umbiegen --- */
  --petrol:             var(--brand);
  --petrol-deep:        var(--brand-deep);
  --sky:                var(--brand-bright);
  --red:                var(--brand-bright);
  --red-ink:            var(--brand-text);
  --brass:              var(--brand);
  --brass-deep:         var(--brand-deep);
  --line-ink:           var(--line);
  --line-brass:         var(--line);
  --line-brass-strong:  var(--line-strong);

  /* --- Typografie --- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-lead:    clamp(1.12rem, 1.02rem + 0.5vw, 1.35rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --fs-h1:      clamp(2.7rem, 1.9rem + 3.8vw, 5rem);
  --fs-display: clamp(3rem, 2rem + 5.5vw, 6.5rem);

  /* --- Abstaende --- */
  --space-section: clamp(4rem, 3rem + 5vw, 8.5rem);
  --container:  1220px;
  --container-narrow: 880px;

  --radius: 4px;
  --shadow-soft: 0 22px 60px -34px rgba(42, 22, 34, 0.5);
  --transition: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

[id] { scroll-margin-top: 110px; }

:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--sky); color: var(--ink); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }
p + p { margin-top: 1.1rem; }
strong { font-weight: 600; color: var(--ink); }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--petrol-deep); font-weight: 400; }

.text-link {
  color: var(--petrol);
  border-bottom: 1px solid var(--line-petrol);
  transition: color var(--transition), border-color var(--transition);
  padding-bottom: 1px;
}
.text-link:hover { color: var(--red-ink); border-color: var(--red-ink); }

.numeric { font-family: var(--font-display); font-feature-settings: "lnum" 1; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.section > .container { position: relative; z-index: 1; }

.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: #fff; }
.section--petrol { background: var(--petrol-deep); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--petrol h1, .section--petrol h2, .section--petrol h3 { color: #fff; }

.rule-top { border-top: 1px solid var(--line); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Uebergroße Sektions-Ziffer (Programmheft-Charakter) */
.sec-num {
  position: absolute;
  top: clamp(0.75rem, 3vw, 2.25rem);
  right: clamp(0.5rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 13vw, 12rem);
  line-height: 0.72;
  letter-spacing: -0.03em;
  color: var(--sky);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.section--ink .sec-num, .section--petrol .sec-num { color: var(--sky); opacity: 0.15; }

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */
/* Header bleibt beim Scrollen visuell konstant — keine Scroll-Zustandsanimation. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 84px; padding-block: 0.7rem;
}

.brand { display: grid; grid-template-columns: auto auto; column-gap: 0.7rem; align-items: center; line-height: 1; }
/* Rundes Logo-Badge (10.09.2026: neues Baeren-Logo von Klaus).
   Bewusst ein echtes <img> statt des frueheren background-image auf ::before —
   so ist es ein Bild im Dokument statt reiner Dekoration: es kann vorgeladen
   werden (fetchpriority im Header), erscheint auch ohne Stylesheet und laesst
   sich austauschen, ohne CSS anzufassen. Quelldatei ist quadratisch, den Kreis
   macht border-radius; object-fit deckt Rundungsreste ab. */
.brand__logo {
  grid-row: 1 / 3; grid-column: 1; align-self: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; object-fit: cover;
  border: 1.5px solid var(--brand);
}
/* Header traegt seit 10.09.2026 nur noch das Logo, keinen Schriftzug.
   56px ist die Obergrenze: der Header hat min-height 84px bei 0.7rem
   padding-block, also 61,6px Innenraum — und die mobile Navigation ist mit
   inset: 84px fest an genau diese Kopfhoehe geknuepft. Ein groesseres Badge
   schoebe den Header auseinander und risse eine Luecke ueber dem Menue. */
.brand--mark { grid-template-columns: auto; column-gap: 0; }
.brand--mark .brand__logo { grid-row: 1; width: 56px; height: 56px; }
.brand__name {
  grid-column: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase;
}
.brand__sub {
  grid-column: 2;
  font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--petrol); margin-top: 0.42rem;
}

.main-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav-list a {
  position: relative; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--ink);
  padding-block: 0.35rem; transition: color var(--transition);
  white-space: nowrap; /* sechs Navigationspunkte: keine Wortumbrueche in Labels */
}
/* Der Konversions-Knopf darf nie umbrechen und nie schrumpfen */
.main-nav > .btn { white-space: nowrap; flex: none; }
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.nav-list a:hover { color: var(--petrol); }
.nav-list a:hover::after, .nav-list a.is-active::after { transform: scaleX(1); }
.nav-list a.is-active { color: var(--ink); }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn--sm { padding: 0.58rem 1.15rem; font-size: 0.76rem; }

/* Magenta = einziger, sparsam gesetzter Konversions-Akzent (Primaer) */
.btn-solid { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.btn-solid:hover { background: var(--brand-mid); border-color: var(--brand-mid); }

.btn-outline { background: transparent; color: var(--petrol-deep); border: 1px solid var(--line-strong); }
.btn-outline:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }

/* Auf dunklen Baendern (inkl. Hero/Page-Hero mit Marken-Verlauf) */
.section--ink .btn-outline, .section--petrol .btn-outline, .hero .btn-outline, .page-hero .btn-outline { color: #fff; border-color: color-mix(in srgb, #fff 55%, transparent); }
.section--ink .btn-outline:hover, .section--petrol .btn-outline:hover, .hero .btn-outline:hover, .page-hero .btn-outline:hover { background: #fff; color: var(--brand-deep); border-color: #fff; }
/* Primary auf Dunkel = weisser Button mit Magenta-Text (Kontrast hoch) */
.section--ink .btn-solid, .section--petrol .btn-solid, .hero .btn-solid, .page-hero .btn-solid { background: #fff; color: var(--brand-text); border-color: #fff; }
.section--ink .btn-solid:hover, .section--petrol .btn-solid:hover, .hero .btn-solid:hover, .page-hero .btn-solid:hover { background: var(--brand-bright); color: #fff; border-color: var(--brand-bright); }

/* Text-CTA mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em; color: var(--petrol);
  transition: gap var(--transition), color var(--transition);
}
.arrow-link .arrow { transition: transform var(--transition); }
.arrow-link:hover { color: var(--red-ink); }
.arrow-link:hover .arrow { transform: translateX(5px); }
.section--ink .arrow-link, .section--petrol .arrow-link, .hero .arrow-link, .page-hero .arrow-link { color: var(--accent-light); }
.section--ink .arrow-link:hover, .section--petrol .arrow-link:hover, .hero .arrow-link:hover, .page-hero .arrow-link:hover { color: #fff; }

/* ==========================================================================
   7. EYEBROW · SECTION-HEAD · NOTENLINIEN-SIGNATUR
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--petrol-deep);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.eyebrow--center { justify-content: center; }
.section--ink .eyebrow, .section--petrol .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--accent-light); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.55; }
.section--ink .section-head p, .section--petrol .section-head p { color: color-mix(in srgb, #fff 82%, transparent); }

.hairline { height: 1px; background: var(--line); border: 0; }

/* Notenlinien-Signatur (5-Linien-System) */
.stave { display: block; width: 100%; color: var(--line-petrol); }
.stave svg { width: 100%; height: 44px; display: block; }
.stave line { stroke: currentColor; stroke-width: 1; }
.section--ink .stave, .section--petrol .stave { color: color-mix(in srgb, var(--sky) 65%, transparent); }
.stave-divider { padding-block: clamp(1.5rem, 3vw, 2.75rem); }

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--line-petrol); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.card__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid var(--line-petrol); border-radius: 50%; margin-bottom: 1.4rem; color: var(--petrol);
}
.card__icon svg { width: 25px; height: 25px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.card__meta { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrol); margin-bottom: 0.85rem; }
.card p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; }
.card .arrow-link { margin-top: auto; padding-top: 1.35rem; }
.card__links { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; margin-top: 0.9rem; }
.card__links a { font-size: 0.88rem; font-weight: 500; color: var(--petrol); border-bottom: 1px solid var(--line-petrol); padding-bottom: 1px; transition: color var(--transition), border-color var(--transition); }
.card__links a:hover { color: var(--red-ink); border-color: currentColor; }

/* ---------- Partner-Logos (flowkey, music2me, Skoove, KAWAI) ----------
   Fremde Wortmarken in Originalfarbe — so will es Klaus, und so erkennen die
   Schueler sie wieder. Damit die vier Fremdfarben die Seite nicht zerreissen,
   liegen sie ruhig (kein Rahmen, kein Hover-Kasten) und sind OPTISCH gleich
   hoch ausgerichtet, nicht rechnerisch: flowkey ist eine Schreibschrift mit
   Unterlaenge, music2me traegt einen Claim unter dem Wort, Skoove und KAWAI
   sind reine Wortmarken ohne Unterlaenge. Gleiche Pixelhoehe wuerde flowkey
   und music2me deshalb zu klein wirken lassen. Die Werte sind einzeln
   eingestellt, nicht aus dem Seitenverhaeltnis gerechnet. */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.15rem; margin-top: 1.1rem; }
.logo-row a {
  display: inline-flex; align-items: center; border-bottom: 0;
  opacity: 0.9; transition: opacity var(--transition), transform var(--transition);
}
.logo-row a:hover { opacity: 1; transform: translateY(-2px); }
.logo-row img { display: block; width: auto; }
.logo-row img[data-logo="flowkey"]  { height: 34px; }
.logo-row img[data-logo="music2me"] { height: 34px; }
.logo-row img[data-logo="skoove"]   { height: 26px; }
.logo-row img[data-logo="kawai"]    { height: 20px; }
/* In der Karte nach unten schieben, damit die Logos ueber alle drei Karten
   hinweg auf einer Linie sitzen — gleiche Mechanik wie bei .arrow-link. */
.card .logo-row { margin-top: auto; padding-top: 1.35rem; }
/* Im 3-Spalten-Raster hat eine Karte nur ~276 px Innenbreite. Mit den Groessen
   von oben brechen die drei Lernsoftware-Logos dort auf zwei Zeilen um (2+1,
   sieht schief aus). Darum in der Karte eine Stufe kleiner — dann passen sie
   in eine Zeile. Aussen, im breiten Partner-Streifen, bleibt es bei den
   groesseren Werten. */
.card .logo-row img[data-logo="flowkey"]  { height: 28px; }
.card .logo-row img[data-logo="music2me"] { height: 28px; }
.card .logo-row img[data-logo="skoove"]   { height: 22px; }

/* ---------- Aushaenge / Flyer ----------
   Klaus' Flyer sind fertige Plakate mit eigener Ueberschrift, eigenem Stoerer
   und eigener WhatsApp-Nummer. Deshalb stehen sie NICHT als Seitenbild im
   Text, sondern als das, was sie sind: zwei Aushaenge zum Anklicken. Bewusst
   auf 720 px Gesamtbreite gedeckelt — ueber die volle Spaltenbreite gezogen
   wuerden sie die Seite dominieren, und bei ~340 px Anzeigebreite liefert die
   1024-px-Vorlage noch rund die dreifache Pixeldichte, bleibt auf Retina also
   scharf. Kein Lightbox-JS: der Link zeigt direkt auf die Bilddatei, damit
   Speichern und Drucken ohne Umweg gehen. */
.flyer-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem); max-width: 720px; margin-inline: auto;
}
.flyer {
  display: block; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.flyer:hover, .flyer:focus-visible { border-color: var(--line-petrol); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.flyer img { display: block; width: 100%; height: auto; }
.flyer__caption {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.8rem 1rem; font-size: 0.9rem; font-weight: 500; color: var(--petrol);
  border-top: 1px solid var(--line);
}
.flyer__caption .arrow { flex: none; }
@media (max-width: 560px) {
  .flyer-row { grid-template-columns: 1fr; max-width: 380px; }
}

/* Nummerierte Ablauf-Karten */
.step {
  position: relative; padding: clamp(1.6rem, 2.5vw, 2.2rem); padding-top: 2.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.step__num {
  position: absolute; top: -0.3rem; left: clamp(1.6rem, 2.5vw, 2.2rem);
  font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 700;
  line-height: 1; color: var(--sky); opacity: 0.85;
}
.step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; margin-top: 1.6rem; }
.step p { color: var(--muted); font-size: 0.98rem; }

/* ==========================================================================
   9. SEKTIONEN
   ========================================================================== */

/* --- HERO (asymmetrischer Split, Marken-Verlauf + Klangwelle) --- */
.hero {
  position: relative; isolation: isolate; overflow: clip; color: #fff;
  background: var(--brand-gradient); /* Fallback UNTER dem Three.js-Canvas */
  padding-block: clamp(3rem, 3rem + 3vw, 6rem) var(--space-section);
}
/* Three.js-Klangwellen-Ebene */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* Lesbarkeits-Scrim: links abdunkeln, rechts Welle sichtbar lassen */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 80%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 34%, transparent) 46%, transparent 74%);
}
.hero > .container { position: relative; z-index: 2; }
.hero__grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero__content { max-width: 620px; }
.hero-title { font-size: var(--fs-display); line-height: 1.04; margin: 0.5rem 0 1.6rem; color: #fff; }
.hero-title .word { display: inline-block; }
/* Masken-Reveal: jedes Wort in einer Overflow-Huelle (Padding fuer Unterlaengen) */
.hero-title .wordmask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__caption { font-size: var(--fs-lead); color: color-mix(in srgb, #fff 86%, transparent); max-width: 42ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

/* gerahmtes Duotone-Foto (weisse Matte als „gerahmter Druck" auf der Verlaufswand) */
.hero__photo {
  position: relative; padding: 10px; border: 1px solid color-mix(in srgb, #fff 25%, transparent); background: var(--surface);
  justify-self: end; width: 100%; max-width: 460px; box-shadow: var(--shadow-soft);
}
.hero__photo .duotone { display: block; aspect-ratio: 3 / 4; }
.hero__aside-caption {
  margin-top: 1rem; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, #fff 68%, transparent); text-align: right;
}

/* Duotone-Fotografie (Petrol) */
.duotone { position: relative; overflow: hidden; background: var(--petrol-deep); }
.duotone img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.duotone::after { content: ""; position: absolute; inset: 0; background: var(--petrol); mix-blend-mode: color; pointer-events: none; }
.duotone::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--petrol-deep) 55%, transparent));
}

/* --- PAGE-HERO (Unterseiten: gleicher Marken-Verlauf + ruhige Klangwelle) --- */
.page-hero {
  position: relative; isolation: isolate; overflow: clip; color: #fff;
  background: var(--brand-gradient);
  padding-block: clamp(3.5rem, 5vw, 6rem) clamp(2.75rem, 4vw, 4rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 78%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 32%, transparent) 50%, transparent 82%);
}
.page-hero > .container { position: relative; z-index: 2; max-width: var(--container-narrow); }
.page-hero h1 { margin-bottom: 1.25rem; color: #fff; }
.page-hero p { color: color-mix(in srgb, #fff 86%, transparent); font-size: var(--fs-lead); line-height: 1.55; max-width: 62ch; }

/* --- EDITORIALER INSTRUMENTEN-INDEX (Inhaltsverzeichnis) --- */
.index-list { border-top: 1px solid var(--line-strong); }
.index-row { border-bottom: 1px solid var(--line); }
.index-link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.15rem, 2.2vw, 1.7rem);
  transition: background var(--transition), padding-inline var(--transition);
}
.index-row__no {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--petrol); opacity: 0.75; min-width: 2ch;
}
.index-row__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.6rem); line-height: 1.05; color: var(--ink);
  transition: color var(--transition);
}
.index-row__meta { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.index-row__arrow { color: var(--red-ink); opacity: 0; transform: translateX(-6px); transition: opacity var(--transition), transform var(--transition); }
.index-link:hover { background: color-mix(in srgb, var(--sky) 12%, transparent); padding-inline: 1rem; }
.index-link:hover .index-row__name { color: var(--petrol-deep); }
.index-link:hover .index-row__arrow { opacity: 1; transform: none; }

/* --- LEITBILD-Liste (zweispaltig, feine Linien) --- */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4.5rem); }
.feature-list li { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1.35rem; border-top: 1px solid var(--line); }
.feature-list li .fl-mark { flex: none; color: var(--petrol); font-family: var(--font-display); font-weight: 700; line-height: 1.4; }
.feature-list li p { margin: 0; color: var(--ink); }
.feature-list li p span { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 0.15rem; }

/* --- STATEMENT-BAND (full-bleed, Marken-Verlauf) --- */
.statement-band { text-align: center; overflow: clip; background: var(--brand-gradient); }
.statement { text-align: center; }
.statement__quote {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display);
  line-height: 1.04; letter-spacing: -0.02em; color: #fff; will-change: transform;
}
.statement__quote em { font-style: italic; color: var(--accent-light); }
.statement__cite { margin-top: 1.75rem; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, #fff 75%, transparent); }

/* --- SPLIT (Text + Duotone-Medium) --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.split__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: var(--petrol-deep); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.split__media::after { content: ""; position: absolute; inset: 0; background: var(--petrol); mix-blend-mode: color; pointer-events: none; }
.split__media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--petrol-deep) 55%, transparent)); }
.split__body h2 { margin-bottom: 1.35rem; }
.split__body p { color: var(--muted); }
.split__body p + p { margin-top: 1rem; }
.split__body .btn, .split__body .arrow-link { margin-top: 1.9rem; }

/* --- FAKTEN --- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.fact { text-align: center; padding: 0.5rem clamp(1rem, 2vw, 1.75rem); border-left: 1px solid color-mix(in srgb, #fff 18%, transparent); }
.fact:first-child { border-left: 0; }
.fact__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1; color: var(--accent-light); }
.fact__label { margin-top: 0.85rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, #fff 78%, transparent); }

/* --- PREISE --- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.price-card--feature { border-color: var(--line-petrol); background: var(--surface-2); box-shadow: var(--shadow-soft); }
.price-card__tag { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--petrol); margin-bottom: 0.9rem; }
.price-card h3 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.price-card__sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.price-card__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 0.35rem; }
.price-card__price .per { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }
.price-card ul { margin: 1.5rem 0 0; display: grid; gap: 0; }
.price-card ul li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.96rem; color: var(--ink); padding-block: 0.55rem; border-top: 1px solid var(--line); }
.price-card ul li:first-child { border-top: 0; padding-top: 0; }
.price-card ul li .tick { color: var(--petrol); flex: none; margin-top: 0.15rem; }
.price-card .btn { margin-top: 1.9rem; align-self: flex-start; }

.price-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.price-table caption { text-align: left; color: var(--muted); margin-bottom: 1rem; }
.price-table th, .price-table td { text-align: left; padding: 1.05rem 1rem; border-bottom: 1px solid var(--line); }
.price-table thead th { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol); font-weight: 600; border-bottom: 1px solid var(--line-petrol); }
.price-table tbody tr { transition: background var(--transition); }
.price-table tbody tr:hover { background: color-mix(in srgb, var(--sky) 10%, transparent); }
.price-table td.amount { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); text-align: right; white-space: nowrap; }
.price-table td:first-child, .price-table th:first-child { padding-left: 0; }
.price-table td:last-child, .price-table th:last-child { padding-right: 0; }

.addon-list { display: grid; gap: 0; }
.addon-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1.15rem; border-top: 1px solid var(--line); }
.addon-list li:first-child { border-top: 0; }
.addon-list .addon__name { font-weight: 500; }
.addon-list .addon__name span { display: block; font-weight: 400; color: var(--muted); font-size: 0.92rem; margin-top: 0.2rem; }
.addon-list .addon__price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--petrol-deep); white-space: nowrap; flex: none; }

/* --- TEAM --- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); }
/* Vier Lehrkraefte: eigene Spaltenzahl, damit keine verwaiste Karte in Reihe 2 steht */
.team-grid--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 2.8vw, 2.5rem); }
.team-grid--4 .member__avatar { width: 96px; height: 96px; font-size: 2rem; }
.member { text-align: center; }
.member__avatar {
  width: 118px; height: 118px; margin: 0 auto 1.5rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-petrol); background: color-mix(in srgb, var(--sky) 14%, transparent);
  font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--petrol-deep);
}
/* Avatar als echtes Foto — Duotone, damit Fotos und Buchstaben-Avatare zusammen ruhig wirken */
.member__avatar--photo { padding: 0; overflow: hidden; background: var(--petrol-deep); position: relative; }
/* object-position hoeher als die Mitte: bei Hochkant-Portraits sitzt sonst der
   Oberkoerper im Kreis statt des Gesichts. */
.member__avatar--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.member__avatar--photo::after { content: ""; position: absolute; inset: 0; background: var(--petrol); mix-blend-mode: color; pointer-events: none; }
.member h3 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.member__role--tbd { color: var(--muted); font-style: italic; text-transform: none; letter-spacing: 0.02em; }
.member__role { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol); margin-bottom: 1rem; }
.member p { color: var(--muted); font-size: 0.96rem; line-height: 1.65; }

/* --- KONTAKT / STANDORTE --- */
.location-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.location { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.5rem); }
.location .card__meta { margin-bottom: 1.1rem; }
.location h3 { font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.location address { font-style: normal; color: var(--ink); line-height: 1.9; }
.location address .muted { color: var(--muted); }
.contact-line { display: flex; gap: 0.7rem; align-items: baseline; padding-block: 0.35rem; }
.contact-line .lbl { color: var(--petrol); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; min-width: 74px; flex: none; }

/* --- GOOGLE-MAPS-KARTE MIT VORSCHALTKNOPF (nur kontakt.html) ---------------
   Ersetzt am 10.09.2026 die stilisierte Platzhalterkarte.

   Warum ein Knopf davor und nicht direkt das iframe: schon das Laden des
   iframes uebertraegt IP-Adresse, Browserkennung und Bildschirmdaten an
   Google in die USA. Das ist eine eigenstaendige Verarbeitung, fuer die es
   nach Art. 6 Abs. 1 lit. a DSGVO eine vorherige Einwilligung braucht — die
   Erklaerung steht deshalb VOR dem Klick, nicht darunter.

   Bewusst OHNE localStorage/Cookie: die Einwilligung gilt nur fuer diesen
   Seitenaufruf. Damit bleibt die Aussage in datenschutz.html §2 wahr, dass
   die Seite nichts im Browser des Besuchers speichert. Preis dafuer: wer die
   Seite neu laedt, muss erneut klicken. Das ist hier die guenstigere Seite
   des Tauschs — ein Consent-Banner waere fuer eine Karte unverhaeltnismaessig.

   Die feste aspect-ratio verhindert, dass die Seite beim Einsetzen des
   iframes springt: der Kasten ist vorher exakt so gross wie nachher. */
.map-consent__frame {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden;
  aspect-ratio: 4 / 3; min-height: 320px;
}
.map-consent__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-consent__gate {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 0.8rem;
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center;
}
.map-consent__gate svg { width: 36px; height: 36px; color: var(--red-ink); }
.map-consent__lead { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.map-consent__text { max-width: 40ch; font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
.map-consent__note { max-width: 40ch; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

/* Umschalter Zentrale / Aussenstelle. Erscheint erst mit der Karte — vorher
   gaebe es nichts umzuschalten. */
.map-consent__switch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.map-consent__switch[hidden] { display: none; }   /* Autor-CSS schlägt das UA-hidden — wie bei .piano-stage__fallback explizit verstecken */
.map-consent__tab {
  padding: 0.5rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.map-consent__tab:hover { color: var(--brand-text); border-color: var(--line-petrol); }
.map-consent__tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.map-consent__tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- PARTNER- / AUSZEICHNUNGS-LEISTE (KAWAI, flowkey …) --- */
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 3rem); }
/* Platzhalter-Kachel, bis die echten Logodateien vorliegen */
.partner {
  display: grid; place-items: center; min-width: 150px; min-height: 72px;
  padding: 0.9rem 1.6rem; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); text-align: center;
}
.partner__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol-deep); }
.partner__sub { display: block; margin-top: 0.25rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* Siegel-Variante: hervorgehobene Auszeichnung */
.partner--seal { border-style: solid; border-color: var(--line-petrol); background: color-mix(in srgb, var(--sky) 10%, var(--surface)); }

/* --- QR-PANEL (Premium Music Card: Bestellweg per Scan) --- */
.qr-panel { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Weisse Matte wie beim gerahmten Hero-Druck — der QR bleibt auf Weiss, sonst scannt er schlechter */
.qr-frame {
  flex: none; background: var(--surface); padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); text-align: center; width: clamp(220px, 26vw, 300px);
}
.qr-frame img { width: 100%; height: auto; }
.qr-frame figcaption {
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  overflow-wrap: anywhere;
}
.qr-url {
  display: inline-block; margin-top: 0.35rem; font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0; text-transform: none; font-size: 0.86rem; color: var(--brand-text);
}
/* Nummerierte Kurzanleitung neben dem Code */
.qr-steps { display: grid; gap: 0.9rem; margin-top: 1.75rem; counter-reset: qrstep; }
.qr-steps li { display: flex; gap: 0.9rem; align-items: baseline; color: var(--muted); font-size: 0.98rem; }
.qr-steps li::before {
  counter-increment: qrstep; content: counter(qrstep, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: var(--petrol);
  flex: none; min-width: 2ch;
}

/* --- CTA-Band --- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1.25rem; }
.cta-band p { color: color-mix(in srgb, #fff 82%, transparent); font-size: var(--fs-lead); max-width: 52ch; margin: 0 auto 2.25rem; }
.cta-band .hero__actions { justify-content: center; }

/* --- Prosa / Notiz / Downloads --- */
.prose { max-width: 68ch; }
.prose p { color: var(--muted); }
.prose h2, .prose h3 { color: var(--ink); }

/* --- LANGTEXT-DOKUMENTE (Impressum, Datenschutz) --------------------------
   Eigener Typo-Rhythmus, weil hier zwölf Überschriften hintereinander stehen.
   Die globalen h2/h3 sind Display-Größen für EINE Sektionsüberschrift pro
   Abschnitt (h2 geht bis 3.25rem = 52px) — in einem Dokument wirkt das wie
   ein Plakat. Ausserdem haben h1-h4 global bewusst KEINE Margins; den Abstand
   bringt sonst immer die Komponente mit (.section-head, .card h3 usw.).
   .prose allein bringt keinen, daher hier.

   Alles fluid in rem + vw nach der Konvention des Stylesheets: kein fester
   Breakpoint, die Werte wachsen stufenlos mit der Viewport-Breite.
   1rem = 16px (das Root bleibt unangetastet).                             */
.prose--doc {
  /* Schriftgrößen */
  --doc-fs-body:  clamp(1rem,      0.96rem + 0.22vw, 1.125rem);   /* 16 → 18px */
  --doc-fs-h2:    clamp(1.375rem,  1.2rem  + 0.6vw,  1.75rem);    /* 22 → 28px */
  --doc-fs-h3:    clamp(1.125rem,  1.05rem + 0.3vw,  1.3125rem);  /* 18 → 21px */
  --doc-fs-small:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14 → 15px */

  /* Abstände. Vor einer Überschrift viel, darunter wenig — die Überschrift
     soll sichtbar zum Text GEHÖREN, der ihr folgt, nicht zum Absatz davor. */
  --doc-space-h2: clamp(2.25rem,   1.6rem  + 2vw,    3.25rem);    /* 36 → 52px */
  --doc-space-h3: clamp(1.5rem,    1.2rem  + 1vw,    2rem);       /* 24 → 32px */
  --doc-space-p:  clamp(0.9rem,    0.85rem + 0.3vw,  1.2rem);     /* 14 → 19px */
  --doc-lede:     clamp(0.5rem,    0.42rem + 0.25vw, 0.75rem);    /*  8 → 12px */

  /* Zeilenbreite. Ersetzt die 68ch der Basisklasse — hier darf es breiter
     sein, weil Rechtstexte überflogen und nicht am Stück gelesen werden. */
  max-width: clamp(34rem, 28rem + 22vw, 52rem);                   /* 544 → 832px */
  font-size: var(--doc-fs-body);
}

/* Grundrhythmus: jedes Geschwisterelement bekommt Luft nach oben ... */
.prose--doc > * + * { margin-top: var(--doc-space-p); }
/* ... ausser dem ersten, das sitzt am Abschnittsanfang. */
.prose--doc > :first-child { margin-top: 0; }

.prose--doc h2 {
  font-size: var(--doc-fs-h2);
  line-height: 1.25;          /* global 1.1 — zu eng für „Umsatzsteuer-Identifikationsnummer" */
  margin-top: var(--doc-space-h2);
  margin-bottom: var(--doc-lede);
}
.prose--doc h3 {
  font-size: var(--doc-fs-h3);
  line-height: 1.3;
  margin-top: var(--doc-space-h3);
  margin-bottom: var(--doc-lede);
}
/* Der Abstand unter einer Überschrift kommt allein aus deren margin-bottom,
   sonst addiert sich der Grundrhythmus dazu und die Bindung geht verloren. */
.prose--doc h2 + *,
.prose--doc h3 + * { margin-top: 0; }

/* Listen: schlicht, mit Notenfarbe im Marker. NICHT .feature-list nehmen —
   die ist ein zweispaltiges Raster mit Trennlinien und erwartet die
   Struktur <span class="fl-mark">♪</span><p>Titel<span>Unter</span></p>. */
.prose--doc ul { padding-left: 1.4rem; }
.prose--doc ul li { color: var(--muted); }
.prose--doc ul li + li { margin-top: var(--doc-lede); }
.prose--doc ul li::marker { color: var(--brass-deep); }

.prose--doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;    /* lange Adressen dürfen brechen */
}

.prose--doc hr { margin-top: var(--doc-space-h3); }
.prose--doc .note { margin-top: var(--doc-space-h3); }
.prose--doc .form__note { font-size: var(--doc-fs-small); }

.note { border-left: 2px solid var(--red); background: var(--surface); padding: 1.3rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.96rem; color: var(--ink); }
.note strong { color: var(--petrol-deep); }

.downloads { display: flex; flex-wrap: wrap; gap: 1rem; }
.download { display: inline-flex; align-items: center; gap: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1.25rem; font-size: 0.9rem; transition: border-color var(--transition), color var(--transition); }
.download:hover { border-color: var(--line-petrol); color: var(--petrol); }
.download svg { width: 20px; height: 20px; color: var(--petrol); }

/* Editoriale Kurs-Liste (Label-Spalte + Fliesstext) */
.course { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2.25rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.course:first-of-type { border-top: 0; }
.course__head .eyebrow { margin-bottom: 0.8rem; }
.course__head h3 { font-size: var(--fs-h3); }
.course__head .price-hint { margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--petrol-deep); }
.course__head .price-hint small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }
.course__body p { color: var(--muted); }
.course__body p + p { margin-top: 0.9rem; }
.course__body .course__meta { margin-top: 1.2rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol); }

/* ==========================================================================
   10. FORMULARE
   ========================================================================== */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.85rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition); width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 20%, transparent);
}
.field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A1E69' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.form__note { font-size: 0.85rem; color: var(--muted); }

/* Checkbox-/Radio-Zeile: Label normal lesbar, nicht im Eyebrow-Stil der .field-Labels */
.check-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.check-row input { flex: none; width: 18px; height: 18px; margin-top: 0.25rem; accent-color: var(--brand); }
.check-row label { font-size: 0.94rem; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; line-height: 1.55; }
.check-row label strong { color: var(--ink); font-weight: 500; }

/* Radio-Gruppe (z. B. Versand / Abholung) */
.radio-group { display: grid; gap: 0.75rem; }
.radio-group > .check-row label { color: var(--ink); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: color-mix(in srgb, #fff 80%, transparent); padding-block: clamp(3.5rem, 5vw, 5rem) 2rem; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; border-bottom: 1px solid color-mix(in srgb, #fff 16%, transparent); }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: var(--accent-light); }
.footer-col h4 { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-light); font-weight: 600; margin-bottom: 1.15rem; }
.footer-col p, .footer-col address { line-height: 1.85; font-style: normal; }
.footer-col a { transition: color var(--transition); }
.footer-col a:hover { color: var(--accent-light); }
.footer-links { display: grid; gap: 0.6rem; }
.footer-tagline { font-family: var(--font-display); font-size: 1.35rem; color: #fff; line-height: 1.3; margin: 1.25rem 0 1.5rem; max-width: 26ch; }
.footer-social { display: flex; gap: 0.9rem; margin-top: 0.5rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, #fff 22%, transparent); border-radius: 50%; transition: border-color var(--transition), color var(--transition), background var(--transition); }
.footer-social a:hover { border-color: var(--sky); color: var(--ink); background: var(--sky); }
.footer-social svg { width: 18px; height: 18px; }
.footer-rating, .rating-inline { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.footer-rating .stars, .rating-inline .stars { color: var(--accent-light); letter-spacing: 0.1em; }
.footer-bottom { padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: center; font-size: 0.85rem; color: color-mix(in srgb, #fff 62%, transparent); }
.footer-bottom a:hover { color: var(--accent-light); }

/* ==========================================================================
   Startseiten-Effekte (nur index.html)
   ========================================================================== */
/* Sticky-Split „Unsere Instrumente" — Head steht, Liste scrollt vorbei */
@media (min-width: 861px) {
  .program-split {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) 1.4fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .program-split .section-head { position: sticky; top: 14vh; margin-bottom: 0; max-width: none; }
}

/* Cursor-Vorschaubild auf dem Kurs-Index (Duotone, folgt dem Zeiger) */
.idx-preview {
  position: fixed; top: 0; left: 0; width: 220px; height: 280px; z-index: 150;
  pointer-events: none; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; will-change: transform;
}
.idx-preview img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }
.idx-preview::after { content: ""; position: absolute; inset: 0; background: var(--brand); mix-blend-mode: color; }

/* ==========================================================================
   12. GSAP-HOOKS & UTILITIES
   ========================================================================== */
/* FOUC-sicher: nur wenn JS + keine reduced-motion die Klasse setzt */
/* Einzelne Woerter verstecken (NICHT den Titel selbst): GSAP autoAlpha setzt
   visibility:inherit -> Woerter wuerden sonst die Verborgenheit des Titels erben. */
.gsap-on [data-anim], .gsap-on .reveal, .gsap-on [data-hero], .gsap-on .hero-title .word { visibility: hidden; }

/* Scroll-Fortschritt (per JS injiziert) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 200;
  background: linear-gradient(90deg, var(--petrol), var(--sky));
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

.text-center { text-align: center; }
.mt-sm { margin-top: 1rem; } .mt-md { margin-top: 2rem; } .mt-lg { margin-top: 3rem; }
.mx-auto { margin-inline: auto; } .max-narrow { max-width: var(--container-narrow); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .team-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact { border-left: 0; border-top: 1px solid color-mix(in srgb, #fff 18%, transparent); padding-block: 1.5rem; }
  .fact:first-child { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .hero__photo { justify-self: start; max-width: 380px; order: -1; }
  .hero__aside-caption { text-align: left; }
}

/* Burger-Grenze, zweimal angehoben — beides aus demselben Grund:
   860px  -> 1024px  weil der Konversions-Knopf abgeschnitten wurde.
   1024px -> 1199px  weil das Label „Music Card" am 03.09.2026 zu
                     „Premium Music Card" wurde. Aus der Schriftdatei
                     gemessen (Plus Jakarta Sans 400 @ 0.92rem):
                     79px -> 145px, die Summe aller sechs Labels
                     426px -> 492px. Zwischen 1025 und 1200px reicht der
                     Platz dafür nicht, ohne dass wieder etwas abschneidet.
   Wird das Label je wieder kuerzer, kann die Grenze zurueck auf 1024px. */
@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.75rem; box-shadow: var(--shadow-soft);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-list li { border-top: 1px solid var(--line); }
  .nav-list li:first-child { border-top: 0; }
  .nav-list a { display: block; padding: 1rem 0; font-size: 1.05rem; }
  .nav-list a::after { display: none; }
  .main-nav .btn { margin-top: 1.25rem; justify-content: center; }
}

@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 16 / 11; order: -1; }
  .price-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .location-grid { grid-template-columns: 1fr; }
  .course { grid-template-columns: 1fr; gap: 0.9rem; }
  .qr-panel { grid-template-columns: 1fr; }
  .qr-frame { width: min(300px, 100%); margin-inline: auto; order: -1; }
  .form__row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding-inline: 20px; }
  .index-link { grid-template-columns: auto 1fr; row-gap: 0.4rem; }
  .index-row__meta { grid-column: 2; text-align: left; white-space: normal; }
  .index-row__arrow { display: none; }
}

@media (max-width: 477px) {
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .btn { width: 100%; justify-content: center; }
  .facts { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   SPIELWIESE · interaktiver 3D-Flügel (index.html #spielwiese, js/piano.js)
   Farbwelt der Spline-Szene: Wand Lilarosa → Creme, Boden Mint, Teppich Plum-Pastell.
   ========================================================================== */
.piano-section { background: linear-gradient(180deg, var(--bg) 0%, #F5E7F0 50%, var(--bg) 100%); overflow: clip; }
.piano-stage { position: relative; }
.piano-stage__scene {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #E9D2E4 0%, #FBF1F6 48%, #BFE3D5 100%);
  box-shadow: var(--shadow-soft); outline-offset: 4px;
}
.piano-stage__scene:focus-visible { outline: 3px solid var(--brand); }
.piano-stage__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: pointer; }
.piano-stage__fallback {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem;
  padding: 2rem; text-align: center; color: var(--muted); font-size: 0.95rem;
}
.piano-stage__fallback[hidden] { display: none; }   /* Autor-CSS schlägt das UA-hidden — explizit verstecken */
.piano-stage__fallback img { width: min(60%, 420px); border-radius: 10px; opacity: 0.9; }
.piano-stage__loader {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  transition: opacity 0.4s, visibility 0.4s;
}
.piano-stage__loader span { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-bright); animation: pianoPulse 0.9s ease-in-out infinite alternate; }
@keyframes pianoPulse { from { transform: scale(0.7); opacity: 0.5; } to { transform: scale(1.15); opacity: 1; } }
.piano-stage.is-ready .piano-stage__loader { opacity: 0; visibility: hidden; }
.piano-stage__note {
  position: absolute; left: 50%; top: 7%; transform: translateX(-50%) translateY(6px);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem);
  color: var(--brand); text-shadow: 0 2px 18px rgba(255,255,255,0.9);
  opacity: 0; transition: opacity 0.22s, transform 0.22s; pointer-events: none;
}
.piano-stage__note.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.piano-stage__controls { margin-top: 1.6rem; display: grid; gap: 1.1rem; justify-items: center; }
.mini-keys { position: relative; display: flex; gap: 4px; height: 118px; width: min(100%, 580px); }
.mini-key {
  position: relative; flex: 1; border: 1px solid var(--line-strong); border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F9 100%);
  font: 700 0.95rem/1 var(--font-display); color: var(--ink);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.75rem;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: transform 0.07s ease, background-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.mini-key--white::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 2.2rem; height: 8px; border-radius: 4px;
  background: var(--key-color, var(--brand-bright)); opacity: 0.9;
}
.mini-key--black {
  position: absolute; top: 0; width: 8%; height: 58%; z-index: 2; flex: none;
  background: linear-gradient(180deg, #3A2030, #2A1622); border-color: #2A1622; color: #fff;
  border-radius: 0 0 8px 8px; box-shadow: 0 3px 0 #150a10;
}
.mini-key.is-down, .mini-key:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.mini-key--white.is-down, .mini-key--white:active { background: color-mix(in srgb, var(--key-color, var(--brand-bright)) 55%, #fff); }
.mini-key--black.is-down, .mini-key--black:active { background: var(--brand); }
.mini-key:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; z-index: 3; }

.piano-stage__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; align-items: center; justify-content: center; }
.piano-stage__actions .btn.is-playing { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.piano-stage__hint { font-size: 0.78rem; color: var(--muted); }
.piano-stage__hint kbd {
  display: inline-block; padding: 0.05rem 0.38rem; margin: 0 1px; border-radius: 4px;
  border: 1px solid var(--line-strong); background: #fff; font: inherit; font-size: 0.7rem; color: var(--ink);
}
@media (max-width: 760px) {
  .piano-stage__scene { aspect-ratio: 4 / 3; border-radius: 10px; }
  .piano-stage__hint { display: none; }
  .mini-keys { height: 96px; }
  .mini-key { font-size: 0.85rem; padding-bottom: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .piano-stage__loader span { animation: none; }
  .mini-key, .piano-stage__note, .piano-stage__loader { transition: none; }
}