/* =====================================================================
   Studio Pianissimo — Stylesheet
   Eigenständige Website (kein Squarespace mehr). Gegliedert nach
   Abschnitten, in der Reihenfolge, in der sie auf der Seite erscheinen.
   ===================================================================== */

/* Squarespaces globale Standard-Schriftarten (Design → Schriftarten):
   Überschriften = Droid Sans, Absätze = Nunito Sans. Manrope bleibt für
   Elemente mit echtem, gemessenem Override (z.B. .hero-eyebrow).
   Poppins war früher ebenfalls eingebunden, wurde aber nirgends
   verwendet und ist deshalb entfallen. */
/* Lokal ausgelieferte Schriften - ersetzt die frueheren @import-Zeilen
   von fonts.googleapis.com. Dadurch baut die Seite KEINE Verbindung mehr
   zu Google auf (die IP jedes Besuchers ging sonst an Google, s. LG
   Muenchen I, 3 O 17493/20). Die Dateien liegen unter assets/fonts/.
   Nur die Zeichensaetze latin + latin-ext, mehr braucht Deutsch nicht.
   font-display: swap laesst den Text sofort in der Ersatzschrift
   erscheinen, statt ihn bis zum Laden unsichtbar zu halten. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/droid-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/droid-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/unbounded-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/unbounded-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/unbounded-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/unbounded-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   Farbpalette
   Feste, konkrete Farben statt HSL-Bausteinen - ohne LESS-Compiler
   (nur noch Squarespace-Altlast) reicht das, jede Farbe direkt per
   var(--name) zu verwenden.
   --------------------------------------------------------------------- */
:root {
  --white: #FFFFFF;
  --lightAccent: #D6D6D6;
  --accent: #D92020;
  --yellow: #FBCD1B;
  --darkAccent: #333333;
  --black: #1A1A1A;

  /* Gleiche fluid-size-Formel wie zuvor bei der Road Section, jetzt als
     eigene Variable statt Squarespaces globalem --maxPageWidth. */
  --max-page-width: 2000px;

  /* Gemeinsame Container-Breite (Rezensionen, FAQ, Next Steps, etc.).
     Live gegen die echte Seite gemessen: dort kein fester Wert, sondern
     min(2000px, 100vw - 8vw) - der Rand ist ein durchgehender 4vw-
     Gutter, keine feste Content-Breite, die irgendwann fix wird. Der
     feste 1288px-Wert vorher war nicht gemessen, sondern ein Platz-
     halter aus dem allerersten Entwurf. Die padding-Werte auf
     .content-container & Co. kommen jetzt zusätzlich zu diesem
     proportionalen Gutter oben drauf (nicht mehr der einzige Rand). */
  --content-width: min(var(--max-page-width), calc(100vw - 8vw));

  /* Globale Schriftgrößen-Skala, 1:1 aus Squarespace übernommen (Design
     → Schriftarten → Überschriften/Absätze). Die Zahlen sind keine
     direkten rem-Werte, sondern "size-value"-Eingaben für dieselbe
     fluid-clamp-Formel, die schon bei der Road Section (.sq-phase-number/
     .sq-phase-title) verwendet wird - bei sehr breiten Bildschirmen
     nähern sie sich (Wert × 1rem) an, werden auf schmalen Bildschirmen
     aber über vw sanft kleiner. */
  --heading-1-size-value: 1.7;
  --heading-2-size-value: 5;
  --heading-3-size-value: 4;
  --heading-4-size-value: 1.6;
  --paragraph-1-size-value: 2.2;
  --paragraph-2-size-value: 1.4;
  --paragraph-3-size-value: 1.2;
}

/* ---------------------------------------------------------------------
   Fluid-Schriftgrößen-Formel (identisch zur Road Section)
   Einmal pro Stufe definiert, damit sie überall im Stylesheet gleich
   berechnet wird: var(--fluid-h1) etc. direkt in font-size einsetzbar.
   --------------------------------------------------------------------- */
:root {
  --fluid-h1: min(calc((var(--heading-1-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-1-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--heading-1-size-value) * 1rem)));
  --fluid-h2: min(calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-2-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--heading-2-size-value) * 1rem)));
  --fluid-h3: min(calc((var(--heading-3-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-3-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--heading-3-size-value) * 1rem)));
  --fluid-h4: min(calc((var(--heading-4-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-4-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--heading-4-size-value) * 1rem)));
  --fluid-p1: min(calc((var(--paragraph-1-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--paragraph-1-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--paragraph-1-size-value) * 1rem)));
  --fluid-p2: min(calc((var(--paragraph-2-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--paragraph-2-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--paragraph-2-size-value) * 1rem)));
  --fluid-p3: min(calc((var(--paragraph-3-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--paragraph-3-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--paragraph-3-size-value) * 1rem)));
}

/* Auf schmalen Hochformat-Screens (Handy) nutzt Squarespace für die
   Fluid-Schriftgrößen NICHT dieselbe vw-basierte Formel wie oben,
   sondern eine vh-basierte (min(100vh, 900px) statt vw als Bezugsgröße)
   - exakt dasselbe Muster, das für --phase-number-size-value/
   --phase-title-size-value in der Road Section schon existiert, aber
   bisher nirgendwo sonst übernommen war. Live an mehreren Elementen
   (H1/H2/P1) bei 320px UND 375px Breite exakt gegengerechnet und
   pixelgenau bestätigt - ohne diesen Block wich z.B. .about-heading
   auf 375px Breite um über 30% von der echten Seite ab (34px statt
   55px), weil die vw-Formel bei sehr schmalen Breiten viel stärker
   schrumpft als Squarespaces tatsächliche Formel. Gleiche Media-Query
   wie bei der Road Section (max-width:767px + orientation:portrait). */
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --fluid-h1: calc((var(--heading-1-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    --fluid-h2: calc((var(--heading-2-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    --fluid-h3: calc((var(--heading-3-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    --fluid-h4: calc((var(--heading-4-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    --fluid-p1: calc((var(--paragraph-1-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    --fluid-p2: calc((var(--paragraph-2-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    --fluid-p3: calc((var(--paragraph-3-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
  }
}

/* Basis-Größen für unklassifizierte Überschriften - greift überall dort,
   wo keine spezifischere Klasse (z.B. .hero-title mit real gemessenem
   Squarespace-Override) etwas anderes festlegt. letter-spacing:-0.02em
   entspricht Squarespaces globaler Überschriften-Einstellung (Design →
   Schriftarten → Überschriften → Zeichenabstand) - fehlte bisher
   komplett (0 statt -0.02em), wodurch alle Überschriften etwas zu
   breit gesetzt waren. line-height je Ebene nach Squarespaces Formel
   berechnet (1.2em * (1 + (1 - size-value) / 25), size-value = 1.7 /
   5 / 4 / 1.6 für H1-H4) - gilt nur für Überschriften in nativer
   Größe; Klassen, die auf Absatz-Größen umschalten (z.B.
   .teacher-heading), überschreiben das explizit auf 1.2. */
h1, h2, h3, h4 {
  font-family: 'Droid Sans', sans-serif;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fluid-h1); line-height: 1.166; }
h2 { font-size: var(--fluid-h2); line-height: 1.008; }
h3 { font-size: var(--fluid-h3); line-height: 1.056; }
h4 { font-size: var(--fluid-h4); line-height: 1.171; }

/* ---------------------------------------------------------------------
   Reset & Basis
   --------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  /* KEIN overflow-x:hidden hier (nur auf html, s.o.) - overflow auf
     body bricht position:sticky bei Nachfahren-Elementen (z.B. das
     Klavier in der Road Section), weil body dadurch selbst zum
     Scroll-Container wird, obwohl das eigentliche Scrollen weiterhin
     auf html/dem Viewport passiert. */
  overscroll-behavior-x: none;
  background-color: var(--lightAccent);
  color: var(--black);
  /* Squarespaces native Standardschrift für Absätze - Manrope bleibt
     Ausnahme für Elemente mit echtem, gemessenem Override. */
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  /* Squarespaces globale Absatz-Einstellung (Design → Schriftarten →
     Absätze → Zeilenhöhe): 1.2em - gilt als Basis für alle normalen
     Textabsätze. Überschriften haben eigene, unabhängig davon
     gemessene line-height-Werte und bleiben unberührt. */
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, p, ul, ol {
  margin: 0;
}

.content-container {
  /* Live gegen die echte Seite gemessen: Squarespace arbeitet mit
     einem 24-spaltigen Kachel-Raster; ab der Klavierunterricht-Section
     (und allen Sections danach) sitzt der Content-Block in der
     äußersten Spalte (= reiner 4vw-Gutter, ohne Extra-Padding), bei
     Hero/Rezensionen/Über-mich davor eine Spalte weiter innen (s.
     Overrides unten). padding:0 hier entspricht "keine Extra-Spalte" -
     ein kleiner Rest-Puffer bleibt trotzdem (1/96 der Content-Breite =
     ein Viertel einer Rasterspalte), damit es nicht ganz so knapp wie
     auf der echten Seite (dort exakt 0) wirkt. */
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 calc(var(--content-width) / 96);
}

.highlight-reviews-section .content-container,
.about-section .content-container {
  /* Live gegen die echte Seite gemessen (per grid-column-Wert direkt
     im DOM abgelesen): dort sitzt der Inhalt dieser beiden Sections
     eine Rasterspalte weiter innen als ab Klavierunterricht - der
     Extra-Abstand entspricht exakt einer Spaltenbreite des 24er-
     Rasters (content-width/24; verifiziert bei 1400px UND 1920px
     Breite: 54px bzw. 74px zusätzlich, beides = content-width/24). */
  padding: 0 calc(var(--content-width) / 24);
}

.section-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-heading {
  /* Entspricht Squarespaces nativer H2-Standardgröße (Wert 5) - alle
     Verwendungen dieser Klasse sitzen auf echten <h2>-Elementen.
     line-height per Formel: 1.2em * (1 + (1-5)/25) = 1.008 (war zuvor
     ungemessene 1.25). */
  font-size: var(--fluid-h2);
  font-weight: 700;
  line-height: 1.008;
  margin-bottom: 16px;
}

.section-lead {
  font-size: 1.1rem;
  line-height: 1.2;
  max-width: 67%;
}

/* Text-Größen-Utility, ersetzt Squarespaces natives ".sqsrte-small"
   (Fließtext-Stil "Absatz 3") - entspricht Wert 1.2 aus der globalen
   Skala. ".sqsrte-medium" (Road Section) bleibt beim Originalnamen, s.
   Regel weiter unten bei "Deine Reise". */
.text-small {
  font-size: var(--fluid-p3);
  line-height: 1.2;
}

/* =====================================================================
   Header / Navigation
   ===================================================================== */
.site-header {
  /* Bewusst NICHT sticky - der Header bleibt oben am Seitenanfang und
     scrollt mit dem Rest der Seite weg, statt beim Scrollen fixiert
     stehen zu bleiben. position:relative (statt static) nur, damit das
     mobile Dropdown-Menü (.site-nav, position:absolute/top:100%) sich
     weiterhin relativ zum Header statt zur ganzen Seite positioniert. */
  position: relative;
  background-color: var(--darkAccent);
}

.site-header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.site-logo img {
  /* Live auf der echten Seite gemessen (1280px Breite): Logo dort
     ~89px hoch - vorher mit 44px deutlich zu klein. */
  height: 80px;
  width: auto;
}

.site-logo-text {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--white);
  line-height: 1.2;
}

.site-logo-text span {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lightAccent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  /* Live auf der echten Seite gemessen (1280px Breite): Menüpunkte dort
     ~19px - vorher mit 0.95rem (15.2px) deutlich zu klein. */
  color: var(--lightAccent);
  font-weight: 600;
  font-size: 1.15rem;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Der CTA-Button steht im Markup zweimal (einmal fürs Desktop-Layout in
   .site-header-actions, einmal am Ende von .site-nav fürs mobile
   Dropdown-Menü) - hier auf Desktop ausgeblendet, damit er nicht doppelt
   erscheint; die Mobile-Media-Query weiter unten blendet ihn dort wieder
   ein und versteckt stattdessen die Desktop-Variante. */
.site-nav .shiny-button {
  display: none;
}

.site-nav a:hover {
  color: var(--white);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--white);
}

@media (max-width: 1080px) {
  /* Breakpoint bewusst höher als die übrigen 900px-Breakpoints der
     Seite: Logo, volles Menü (6 Punkte) und CTA-Button passen bei
     900-1000px nicht mehr nebeneinander (live gemessen: Überlauf ab
     ~1000px, sicher passend erst ab ~1050px) - das Menü muss hier
     schon früher aufs mobile Dropdown umschalten, sonst läuft der
     Header rechts über den Viewport hinaus. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background-color: var(--black);
    padding: 12px 24px 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: none;
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    width: 100%;
    padding: 10px 0;
  }
  .nav-toggle {
    display: flex;
  }
  .site-header-actions .shiny-button {
    display: none;
  }
  .site-nav .shiny-button {
    display: inline-flex;
    margin-top: 10px;
  }
}

/* =====================================================================
   Gemeinsamer Button-Stil ("Melde dich bei mir!")
   ===================================================================== */
.shiny-button {
  position: relative;
  background: linear-gradient(90deg, var(--accent) 0%, #ff6000 100%);
  color: var(--white) !important;
  font-size: 22px;
  font-weight: bold;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.shiny-button:hover {
  background: linear-gradient(90deg, #b81a1a 0%, #e67e00 100%);
  transform: translateY(-2px);
}

.shiny-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: shine-effect 4s infinite;
}

@keyframes shine-effect {
  0% { left: -100%; }
  50% { left: 200%; }
  100% { left: 200%; }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero-section {
  /* padding-top schafft bewusst Abstand zwischen Header und Text - auf
     der echten Seite übernimmt das der Header selbst (dort kein
     separater, sticky Header-Balken davor), bei uns braucht es dafür
     diesen expliziten Abstand. */
  position: relative;
  background-color: var(--darkAccent);
  overflow: hidden;
  padding: 56px 0 64px 0;
}

.hero-bg-image {
  /* Horizontale Position/Breite 1:1 vom Original übernommen (dort per
     section-background::before mit left:30%/width:70% gesetzt) - vorher
     fälschlich inset:0 (volle Breite), wodurch das Bild zu weit links
     begann. Vertikal auf Wunsch bündig mit der Header-Unterkante
     (top:0) statt mit Abstand - .hero-section beginnt bereits direkt
     nach dem Header, top:0 reicht daher aus. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  width: 70%;
  z-index: 1;
  background-image: url('../img/hero-klavierunterricht.webp');
  background-size: cover;
  background-position: center;
}

/* Original nutzt statt einer Maske auf dem Bild selbst einen separaten
   Overlay-Layer (section-background::after) mit drei überlagerten
   Gradienten (rechts, oben, unten) in der Hintergrundfarbe - dadurch
   gibt es zusätzlich zum horizontalen auch einen vertikalen Übergang
   oben und unten, den eine reine Bild-Maske nicht abbilden kann. Die
   "to bottom"-Stops sind wie beim Top-Offset oben um 80px nach vorne
   verschoben (0/40/170 statt 0/120/250, gleiche 130px-Fade-Breite).
   Fade-Ziel bewusst rgba(51,51,51,0) statt des Keywords "transparent" -
   Browser interpolieren zu "transparent" hin als Schwarz-transparent
   (rgba(0,0,0,0)), nicht als "gleiche Farbe, nur durchsichtig". Dadurch
   entstand in der Mitte des Verlaufs ein sichtbar dunklerer, leicht
   grauer Schleier statt einer sauberen Blende - wirkte wie eine Kante.
   rgba(51,51,51,0) hält die Farbe konstant und interpoliert nur die
   Deckkraft. */
.hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--darkAccent) 0%, var(--darkAccent) 40%, rgba(51, 51, 51, 0) 70%),
    linear-gradient(to bottom, var(--darkAccent) 0px, rgba(51, 51, 51, 0) 130px),
    linear-gradient(to top, var(--darkAccent) -50px, var(--darkAccent) 10px, rgba(51, 51, 51, 0) 250px);
}

.hero-inner {
  /* Anders als die übrigen Sections KEIN auf --content-width begrenzter,
     zentrierter Container - der Hero ist auf der echten Seite "randlos"
     gesetzt, Textspalte und Bild sind direkt in Prozent der vollen
     Viewport-Breite positioniert (live nachgemessen bei 1440px UND
     1920px Breite: Textspalte startet beide Male bei ~7.9vw und ist
     ~65vw breit - eindeutig prozentual, kein fester px-Wert). */
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-content {
  width: 65%;
  padding-left: 7.9%;
  padding-right: 24px;
  box-sizing: border-box;
}

.hero-eyebrow {
  /* War auf der echten Seite ein <h1> ohne eigenes Font-Size-Override -
     entspricht damit der nativen H1-Standardgröße (Wert 1.7). Steht
     jetzt (SEO: h1 vor h2 mit Klavierunterricht+Ort) als eigenes
     Element direkt in .hero-inner statt in .hero-content. Auf Desktop
     per margin (statt padding) positioniert, damit die Box selbst -
     nicht nur der Text darin - exakt bei der Textspalte darunter
     beginnt (padding hätte links wie rechts leeren Raum INNERHALB der
     Box gelassen, was im lokalen Editor als überbreiter, den Text
     überragender Hover-/Fokus-Rahmen auffiel). Rechts endet die Box
     am Content-Rand, dieselbe max()-Formel wie .content-container mit
     max-width:var(--content-width) - hier manuell nachgebaut, weil
     .hero-inner selbst randlos/ohne max-width ist. */
  box-sizing: border-box;
  width: calc(100% - 7.9% - max(24px, calc((100% - var(--content-width)) / 2)));
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fluid-h1);
  font-weight: 400;
  line-height: 1.167;
  margin: 0 0 4px 7.9%;
  display: block;
}

.hero-title {
  /* Per DevTools-Computed-Styles auf der echten Seite gegengecheckt:
     die section-scoped Regel setzt zwar font-weight:400 !important,
     bewusste Design-Entscheidung hier trotzdem für 700 (kräftiger,
     gewünscht). letter-spacing kommt von der globalen h1-h4-Regel
     (--heading-font-letter-spacing). line-height per Formel berechnet:
     1.2em * (1 + (1-5)/25) ≈ 1.008. */
  font-family: 'Droid Sans', sans-serif;
  font-size: 5vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--yellow);
  line-height: 1.008;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.4rem;
  }
}

.hero-title .highlight {
  /* Handgezeichener, geschwungener Unterstrich mit "Schlaufe" am Ende -
     auf der echten Seite generiert Squarespaces Editor dafür per JS
     ein individuelles SVG (data-shape="underlineCurve", ein Bezier-Pfad
     als Handschrift-Strich). Hier als statisches SVG nachgebaut, per
     background-size:100% automatisch auf die tatsächliche Textbreite
     gestreckt (viewBox-Seitenverhältnis wird dabei bewusst ignoriert -
     genau das sorgt dafür, dass der Strich bei jeder Textlänge passt,
     ohne dass wir ihn dynamisch neu zeichnen müssten). */
  position: relative;
  display: inline-block;
}

.hero-title .highlight::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 0.32em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M12,30 C90,20 180,14 270,13 C310,12 340,13 366,14 C378,12 386,18 388,30 C389,36 386,42 380,39' fill='none' stroke='%23ff6000' stroke-width='20' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.hero-subtext {
  /* Entspricht Squarespaces nativer "Absatz 1"-Größe (Wert 2.2). */
  color: var(--white);
  font-size: var(--fluid-p1);
  line-height: 1.2;
  margin-bottom: 24px;
}

.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-bullets li {
  /* Entspricht Squarespaces nativer "Absatz 3"-Größe (Wert 1.2). */
  position: relative;
  padding-left: 22px;
  color: var(--white);
  font-size: var(--fluid-p3);
  line-height: 1.2;
}

.hero-bullets li::before {
  content: ">";
  color: var(--yellow);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.hero-bullets .highlight {
  color: var(--yellow);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.hero-rating {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-rating-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-rating-google {
  width: 32px;
  height: 32px;
  flex: none;
}

.hero-rating-stars {
  color: var(--yellow);
  letter-spacing: 2px;
  font-size: 32px;
  line-height: 1;
  /* Das "★"-Zeichen füllt seine Textzeile durch die Schriftmetriken
     nicht symmetrisch - der sichtbare Glyph sitzt sonst ca. 2px über
     der geometrischen Zeilenmitte (per Canvas-Textmetriken gemessen),
     wodurch er trotz align-items:center nicht exakt auf Höhe der
     Google-Logo-Mitte sitzt. Feinjustage per Nudge nach unten. */
  transform: translateY(2px);
}

.hero-rating-text {
  /* Entspricht Squarespaces nativer "Absatz 3"-Größe (Wert 1.2). */
  color: var(--lightAccent);
  font-size: var(--fluid-p3);
  line-height: 1.2;
}

@media (max-width: 900px) {
  .hero-content {
    width: 65%;
    min-width: 280px;
    max-width: 400px;
    padding-left: 24px;
  }
  .hero-bg-image {
    /* left/width NICHT überschrieben - bleiben bei den Desktop-Werten
       (30%/70%, s. Basisregel oben). Live gegen die echte Seite
       nachgemessen (::before-Pseudo-Element des section-background,
       320px UND 375px Breite): die horizontale Position bleibt exakt
       gleich wie auf Desktop, nur top/height ändern sich. Vorher stand
       hier fälschlich left:0/width:100% (volle Breite) - dadurch wurde
       die Box auf dem Bildschirm sichtbar größer dargestellt als im
       Original, was wie ein Reinzoomen ins Bild wirkte. Auf Wunsch
       schrittweise angehoben: 220px -> 100px -> 80px - Maske unten
       entsprechend mitverschoben. */
    top: 80px;
    bottom: auto;
    height: 400px;
  }
  .hero-section::after {
    /* Ausgangswerte live nachgemessen (::after-Pseudo-Element, 320px
       UND 375px Breite), dann um denselben Versatz wie .hero-bg-image
       oben mitverschoben: der obere Fade ("to bottom") folgt 1:1
       (220->100->80, 380->260->240), der untere Fade ("to top") ist
       relativ zur Bildunterkante verankert und verschiebt sich daher
       gegenläufig um denselben Betrag (30->150->170, 250->370->390),
       damit er weiterhin exakt an der (jetzt höher liegenden)
       Bildunterkante endet. */
    bottom: auto;
    height: 650px;
    background-image:
      linear-gradient(to right, var(--darkAccent) 0%, var(--darkAccent) 40%, rgba(51, 51, 51, 0) 70%),
      linear-gradient(to bottom, var(--darkAccent) 0px, var(--darkAccent) 80px, rgba(51, 51, 51, 0) 240px),
      linear-gradient(to top, var(--darkAccent) 0px, var(--darkAccent) 170px, rgba(51, 51, 51, 0) 390px);
  }
  .hero-section {
    padding-top: 32px;
  }
  .hero-eyebrow-wrap {
    /* Trägt den vollen Breite-Ausbruch (Bleed) - die Eyebrow selbst
       bleibt ein normales Block-Element ohne eigene Breiten-/Padding-
       Regeln und füllt einfach die (bereits eingerückte) Content-Box
       dieses Wrappers. Dadurch umschließt der Editor-Hover-/Fokus-
       Rahmen (der die Elementbox der Eyebrow selbst umrandet) exakt
       den eingerückten Bereich statt bis zum Viewport-Rand zu reichen -
       gleiches Muster wie bei .hero-bullets/.hero-bullet-item (dort
       trägt die <ul> den Bleed, die editierbaren <li> sitzen bereits
       natürlich in deren Padding-Box). Anders als bei .hero-title-wrap
       (dessen Elternelement .hero-content ein eigenes padding-left
       hat) sitzt dieser Wrapper direkt und randlos in .hero-inner -
       daher OHNE negatives margin-left, sonst würde die Box nach
       links aus dem Viewport rutschen. */
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  .hero-eyebrow {
    /* Mobile bleibt beim padding-Modell (Box randlos, Text per Padding
       eingerückt) - der Box-Fix oben betrifft nur Desktop. Horizontale
       Einrückung übernimmt jetzt .hero-eyebrow-wrap; hier die
       Desktop-Breitenformel (s. Basisregel) und den Desktop-margin-left
       zurücksetzen, damit die Eyebrow einfach die Content-Box des
       Wrappers füllt. */
    width: 100%;
    margin: 0 0 4px 0;
  }
  .hero-content {
    padding-top: 0;
  }
  .hero-title-wrap {
    /* Gleiches Bleed-Muster wie .hero-eyebrow-wrap oben - bricht aus
       der schmalen .hero-content-Spalte aus (deren Breite jetzt auf
       Mobile per Pixel-Floor begrenzt ist, s. .hero-content oben) und
       spannt sich genau wie die Eyebrow über die volle Breite. */
    width: 100vw;
    margin-left: -24px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  .hero-bullets {
    /* Gleicher Ausbruch wie .hero-title oben. */
    width: 100vw;
    margin-left: -24px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  .hero-actions {
    /* Gleicher Ausbruch wie .hero-title/.hero-bullets oben - sonst
       bleibt der Button auf die schmale .hero-content-Spalte begrenzt
       (280-400px Pixel-Floor, s. .hero-content oben) und der Text
       "Melde dich bei mir!" bricht bei größerer Schrift dort um. */
    width: 100vw;
    margin-left: -24px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    /* Sterne zuerst, Button darunter (umgekehrte DOM-Reihenfolge). */
    flex-direction: column-reverse;
    align-items: flex-start;
    /* Größerer Abstand zwischen Sternen und Button, damit der Button
       weiter nach unten rutscht. */
    gap: 36px;
  }
  .hero-rating {
    margin-left: 0;
  }
  .hero-actions .shiny-button {
    align-self: center;
  }
}

/* =====================================================================
   Große Rezensionen (2 hervorgehobene Testimonials direkt unter dem Hero)
   ===================================================================== */
.highlight-reviews-section {
  background: linear-gradient(200deg, var(--darkAccent) 70%, var(--accent) 100%);
  padding: 56px 0;
}

@media (max-width: 900px) {
  .highlight-reviews-section {
    /* Zitate-Sektion rutscht auf Mobile näher an den Hero heran. */
    padding-top: 24px;
  }
}

.testimonial-grid {
  /* minmax(320px, 1fr) allein lässt die Karten auf sehr schmalen
     Bildschirmen (< ca. 350px, z.B. iPhone SE) über den Viewport
     hinauslaufen, da die 320px-Mindestbreite dort nicht mehr in den
     verfügbaren Platz passt - min(320px, 100%) deckelt die
     Mindestbreite zusätzlich auf die tatsächlich verfügbare Breite. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 30px;
  width: 100%;
  margin: 0 auto;
}

.testimonial-card {
  background-color: var(--white);
  color: var(--black);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.testimonial-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
  position: relative;
  padding-left: 130px;
}

.quote-icon {
  /* Live gegen die echte Seite gemessen: dort erbt das Element eine
     bereits in px fixierte line-height von einem Vorfahren mit viel
     kleinerer Schriftgröße - unabhängig von der eigenen riesigen
     font-size (~0.095-0.11 des eigenen font-size, je nach Breakpoint).
     Bei uns (unitless line-height:1.5 vom body geerbt) wurde daraus
     1.5*288px≈432px, was die Line-Box weit über das Zeichen hinaus
     aufblies und es dadurch sichtbar nach unten verschob. Statt das
     mit festen px-Werten pro Breakpoint nachzubauen, hier unitless
     (skaliert automatisch mit font-size mit, kein Magic Number pro
     Breakpoint nötig). */
  font-family: Georgia, serif;
  font-size: 18rem;
  line-height: 0.1;
  color: var(--yellow);
  position: absolute;
  left: 0;
  top: 100px;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
}

.testimonial-card .stars {
  color: var(--yellow);
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.author-info {
  font-size: 1.3rem;
  line-height: 1.2;
  color: inherit;
}

.author-info strong {
  font-weight: 700;
}

.testimonial-body {
  font-size: 1.2rem;
  line-height: 1.2;
  color: inherit;
  opacity: 0.9;
}

.testimonial-body p {
  margin: 0 0 15px 0;
}

.testimonial-body p:last-child {
  margin: 0;
}

@media (max-width: 768px) {
  .testimonial-card {
    padding: 30px 20px;
  }
  .testimonial-header {
    padding-left: 90px;
  }
  .quote-icon {
    font-size: 12rem;
    top: 65px;
  }
}

/* =====================================================================
   Über mich (Martina) + Stats
   ===================================================================== */
.about-section {
  background-color: var(--white);
  padding: 72px 0;
}

.about-grid {
  /* Links 33%, rechts 67% - als fr- statt %-Einheiten, weil %-Spalten,
     die zusammen 100% ergeben, PLUS ein zusätzliches gap den Container
     um genau die gap-Breite überlaufen lassen (gap wird bei %-Spalten
     oben draufgerechnet statt vorher abgezogen) - das war die Ursache
     für den rechten Rand-Überlauf bei mittleren Bildschirmbreiten.
     fr-Einheiten verteilen den Platz dagegen korrekt NACH Abzug des
     gaps. */
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 48px;
  align-items: start;
}

.about-portrait-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-portrait {
  /* Freigestelltes PNG mit transparentem Hintergrund - sitzt bewusst
     ohne Kreisausschnitt, Rahmen oder Beschnitt direkt auf dem
     Seitenhintergrund. Deshalb kein border-radius/aspect-ratio/
     object-fit: das Bild behält sein eigenes Seitenverhältnis. */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 20px 0;
  /* Rechts und unten ist der Körper im Zuschnitt hart abgeschnitten -
     wie im Hero (.hero-section::after) wird die Kante ausgeblendet,
     hier aber per mask statt per Farbverlauf-Overlay: das PNG ist
     freigestellt, ein deckender Verlauf in Sectionfarbe würde den
     transparenten Hintergrund mit einfärben. mask blendet stattdessen
     das Bild selbst nach transparent aus und funktioniert damit auf
     jedem Untergrund. */
  /* Bewusst KEIN linearer Zwei-Stopp-Verlauf: der fällt zwar rechnerisch
     sauber auf 0, wird aber nahe der vollen Deckkraft am stärksten
     wahrgenommen und liest sich dort als schwache Kante. Die
     Zwischenstopps ziehen den Abfall am oberen Ende in die Länge
     (ease-out) und machen den Ansatz unsichtbar. */
  -webkit-mask-image:
    linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 9%, rgba(0,0,0,0.7) 19%, rgba(0,0,0,0.92) 28%, #000 36%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 5%, rgba(0,0,0,0.65) 11%, rgba(0,0,0,0.9) 16%, #000 22%);
  mask-image:
    linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 9%, rgba(0,0,0,0.7) 19%, rgba(0,0,0,0.92) 28%, #000 36%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 5%, rgba(0,0,0,0.65) 11%, rgba(0,0,0,0.9) 16%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.about-portrait-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.about-portrait-name {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.5rem;
}

.about-portrait-role {
  color: var(--darkAccent);
  font-size: 1.15rem;
  line-height: 1.2;
}

.about-heading {
  /* Droid Sans ist nur in Schnittstärke 700 geladen - 800 würde nicht
     matchen. */
  font-size: var(--fluid-h2);
  font-weight: 700;
  margin-bottom: 40px;
  /* Nutzt bewusst den zusätzlichen rechten Rand der Section (s.
     .about-section .content-container, eine Rasterspalte extra) mit,
     damit die Zeile mehr Platz hat und seltener umbricht - nur die
     Überschrift bricht hier absichtlich aus dem sonst für Absätze/
     Stats geltenden Randabstand aus. */
  margin-right: calc(-1 * var(--content-width) / 24);
}

.about-text p {
  font-size: var(--fluid-p3);
  margin-bottom: 16px;
  line-height: 1.2;
  color: var(--darkAccent);
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-cta {
  margin-top: 72px;
}

.about-more-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--black);
  text-decoration: underline;
}

/* Stats-Leiste: die drei Kennzahlen (Jahre/Schüler/Unternehmen) oben in
   einer Reihe, die 5-Sterne-Bewertung darunter als eigener, voll
   breiter Kasten - damit sie als Abschluss stärker heraussticht statt
   zwischen den anderen Zahlen unterzugehen. */
.stats-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 40px 0 0 0;
}

.stats-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stat-box {
  background: linear-gradient(154deg, var(--darkAccent) 70%, var(--accent) 100%);
  border-radius: 12px;
  padding: 20px 10px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #404040;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.stats-row .stat-box {
  flex: 1;
  min-width: 150px;
}

.stat-box-rating {
  width: 100%;
  padding: 28px 10px;
}

.stat-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.stat-box-rating .stat-number {
  font-size: 3rem;
}

.stat-text {
  font-size: 1rem;
  color: var(--white);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 6px;
}

@media (max-width: 600px) {
  .stats-row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Mobile Reihenfolge im Über-mich-Abschnitt: Überschrift, dann Bild,
   dann Text/Stats, Button ganz unten. Weil Überschrift und Bild in
   verschiedenen Spalten-Wrappern stecken, lösen die beiden Wrapper sich
   per display:contents auf - ihre Kinder werden dadurch direkte
   Flex-Items von .about-grid und lassen sich frei per order sortieren.
   Name/Rolle/"Mehr über mich" entfallen auf Mobile ganz.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .about-grid {
    display: flex;
    flex-direction: column;
    /* .about-grid hat auf Desktop align-items:start - in der Flex-Spalte
       waere das die Querachse und wuerde jedes Element auf Inhaltsbreite
       schrumpfen lassen. */
    align-items: stretch;
    gap: 24px;
  }
  .about-portrait-col,
  .about-content-col {
    display: contents;
  }
  .about-heading {
    order: 1;
    /* Desktop hat 40px margin-bottom - auf Mobile reicht der Flex-gap
       als Abstand zum Bild darunter. */
    margin-bottom: 0;
  }
  .about-portrait { order: 2; }
  .about-text { order: 3; }
  .stats-container { order: 4; }
  .about-cta {
    order: 5;
    margin-top: 0;
  }
  .about-portrait-meta {
    display: none;
  }
}

/* =====================================================================
   Klavierunterricht (4er-Karten-Grid)
   ===================================================================== */
.feature-section {
  background: linear-gradient(210deg, var(--lightAccent) 70%, var(--darkAccent) 85%, var(--accent) 100%);
  padding: 72px 0;
}

.feature-eyebrow-row {
  /* Eyebrow + Unterzeile gehen über die volle Content-Breite - erst
     darunter startet die 50/50-Spaltenaufteilung (.feature-columns). */
  margin-bottom: 56px;
}

.feature-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.feature-heading-eyebrow {
  /* Auf der echten Seite die GROSSE Überschrift dieses Abschnitts (ein
     natives <h2> ohne Override, Wert 5) - "super effizient..." darunter
     ist dort die kleinere Unterzeile (Absatz 1), s. .feature-heading.
     Text steht im HTML in normaler Groß-/Kleinschreibung ("Klavier­
     unterricht") und wird nur optisch per CSS großgeschrieben - reiner
     Großbuchstaben-Text im Markup kann von Suchmaschinen als Spam-
     Signal gewertet werden. */
  color: var(--accent);
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  font-size: var(--fluid-h2);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.feature-heading {
  /* Entspricht Squarespaces nativer "Absatz 1"-Größe (Wert 2.2) - keine
     eigene Überschrift, sondern die Unterzeile unter dem großen Eyebrow. */
  font-size: var(--fluid-p1);
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}

.feature-heading .accent {
  color: var(--accent);
}

.feature-text p {
  font-size: var(--fluid-p3);
  color: var(--black);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 16px;
}

.feature-image-group {
  /* Überlappende Bildkomposition statt nebeneinander: das große Bild
     oben links, das kleinere Foto unten rechts darüber. padding-bottom/
     -right auf dem Container schaffen den nötigen Platz, damit das
     überlappende zweite Bild nicht aus dem Layout herausragt. */
  position: relative;
  margin-top: 24px;
  padding-bottom: 10%;
  padding-right: 10%;
}

.feature-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.feature-image-main {
  width: 85%;
}

.feature-image-main img {
  /* Bildausschnitt links verankern - bei Bedarf wird rechts
     abgeschnitten statt zentriert zuzuschneiden. */
  object-position: left center;
}

.feature-image-secondary {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  z-index: 1;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.feature-image-secondary img {
  object-position: 75% center;
}

.feature-image img {
  /* Beide Bilder teilen sich sonst uneinheitliche Seitenverhältnisse
     (das zweite Foto ist deutlich breiter als hoch) - aspect-ratio +
     object-fit:cover sorgt für ein einheitliches, sauber zuschneidbares
     Format bei beiden Bildern. */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.custom-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

@media (max-width: 600px) {
  .custom-card-grid {
    grid-template-columns: 1fr;
  }
}

.custom-card {
  background-color: var(--white);
  border-radius: 12px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.custom-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.custom-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  color: var(--yellow);
}

.custom-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.custom-card h3 {
  color: var(--darkAccent);
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 15px 0;
  line-height: 1.0;
  min-height: 2.0em;
}

.custom-card p {
  color: var(--darkAccent);
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 900px) {
  .feature-columns {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Deine Reise als Klavierschüler (Road Section)
   1:1 aus website.css übernommen - nur die hsl(var(--x-hsl))/~"..."-
   Wrapper entfernt (kein LESS mehr) und Squarespace-Variablen durch
   unsere eigenen ersetzt. Layout/Scroll-Sync-Logik unverändert, bewusst
   nicht "aufgeräumt": die Werte sind auf die Pixelgeometrie der Bühne
   abgestimmt (s. Kommentare) und hängen eng mit road.js zusammen.
   ===================================================================== */
.road-outer-section {
  background-color: var(--darkAccent);
  padding: 72px 0 0 0;
}

.road-outer-heading {
  max-width: var(--content-width);
  margin: 0 auto 56px auto;
  padding: 0 calc(var(--content-width) / 96);
  color: var(--white);
}

.road-outer-heading .section-eyebrow {
  /* Auf der echten Seite die GROSSE Überschrift dieses Abschnitts (ein
     natives <h2> ohne Override, Wert 5) - "Vom Anfänger zum
     Klavierprofi..." darunter ist dort die kleinere Unterzeile
     (Absatz 2), s. .road-journey-heading. Keine Großbuchstaben mehr
     hier, da es jetzt die Hauptüberschrift ist, nicht mehr ein kleines
     Eyebrow-Label - Letter-Spacing aber wie jede andere H2 auf
     -0.02em (Squarespaces globale Überschriften-Einstellung), nicht
     mehr "normal" wie beim kleinen Eyebrow-Label. line-height per
     Formel: 1.2em * (1 + (1-5)/25) = 1.008. */
  display: block;
  color: var(--yellow);
  font-size: var(--fluid-h2);
  font-weight: 700;
  line-height: 1.008;
  text-transform: none;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.road-outer-heading .road-journey-heading {
  /* Entspricht Squarespaces nativer "Absatz 2"-Größe (Wert 1.4) - daher
     wie .teacher-heading explizit Absatz- statt H2-Zeilenhöhe/-abstand,
     da sonst der H2-Tag-Default (der Squarespace für Überschriften
     enger berechnet als für Fließtext) greifen würde. */
  font-size: var(--fluid-p2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}

.road-outer-heading .section-lead {
  color: var(--lightAccent);
}

.sq-road-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
@media (min-width: 901px) {
  .sq-road-section {
    padding-bottom: 60px;
  }
}
@media (max-width: 900px) {
  .sq-road-section {
    padding-bottom: 40px;
  }
}

.sq-content-flow {
  position: relative;
}

.sq-road-track {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: calc(100% + 330px);
  background-color: #c5c5c5;
  clip-path: inset(0 0 0 0 round 15px);
  z-index: 1;
}

.sq-fill-anchor,
.sq-piano-anchor {
  position: sticky;
  top: 35vh;
  width: 100%;
  height: 0px;
}

.sq-road-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5000px;
  background-color: #ff4c4c;
}

.sq-piano-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(100% + 330px);
  pointer-events: none;
  z-index: 10;
}

.sq-piano {
  position: absolute;
  bottom: -40px;
  left: 50%;
  margin-left: -40px;
  width: 80px; height: 80px;
  will-change: transform;
  opacity: 0;
  pointer-events: none;
}

.sq-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

.sq-icon.active { opacity: 1; }

#icon-fluegel { transform: scale(1.5); }
#icon-kidspiano { transform: scale(0.9); }
#icon-klavier { transform: scale(0.8); }

.sq-timeline-row {
  display: flex;
  align-items: stretch;
  gap: 250px;
  max-width: 1300px;
  margin: 0 auto 180px auto;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}

.sq-timeline-row:last-child { margin-bottom: 0px; }
.sq-phase-final-wrapper .sq-timeline-row:last-child { margin-bottom: 180px; }

.sq-col-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

:root {
  --phase-number-size-value: 8;
  --phase-title-size-value: 3;
  --phase-title-size-value-mobile: 2.25;
}

.sq-intro-box {
  margin: 0 0 25px 0;
}

.sq-title-wrap {
  margin: 0 0 32px 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.sq-title-wrap .sq-phase-number {
  color: var(--white) !important;
  margin: 0 !important;
  line-height: 0.85;
  flex: 0 0 auto;
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .sq-title-wrap .sq-phase-number {
    font-size: calc((var(--phase-number-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem) !important;
  }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .sq-title-wrap .sq-phase-number {
    font-size: min(calc((var(--phase-number-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--phase-number-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--phase-number-size-value) * 1rem))) !important;
  }
}

.sq-title-wrap .sq-phase-title {
  margin: 0 !important;
  padding: 0;
  line-height: 0.9;
  width: fit-content;
  text-wrap: balance;
  color: #EC3D37 !important; /* Kompromiss zwischen Akzentrot und Lesbarkeit auf dunklem Grund, s. Git-Historie */
  box-sizing: border-box;
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .sq-title-wrap .sq-phase-title {
    font-size: calc((var(--phase-title-size-value-mobile) - 1) * calc(.012 * min(100vh, 900px)) + 1rem) !important;
  }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .sq-title-wrap .sq-phase-title {
    font-size: min(calc((var(--phase-title-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--phase-title-size-value) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--phase-title-size-value) * 1rem))) !important;
  }
}

.sq-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
}

.sq-intro-box p {
  /* Entspricht Squarespaces nativer "Absatz 2"-Größe (Wert 1.4) - hatte
     zuvor gar keine echte Größenzuweisung (0.95em war nur ein Platzhalter). */
  margin: 0 !important;
  color: var(--white) !important;
  font-size: var(--fluid-p2) !important;
}

.sq-phase-card {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  margin-top: 0;
}

.sq-video-block {
  display: flex;
  flex-direction: column;
}

.sq-caption-wrap {
  margin-top: 0;
  padding: 8px 12px;
  background-color: #000000;
  border-radius: 0 0 6px 6px;
  box-sizing: border-box;
}

.sq-content-img {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #35363a 0%, #1c1d1f 100%);
  border: 1px solid #4a4a4d;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sq-content-img::before {
  content: "Video laden...";
  color: #888;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
}

.sq-content-img video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.sq-video-caption {
  margin: 0 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  text-align: center;
  font-style: italic;
}

.custom-stat-card {
  background-color: #35363a;
  border-radius: 6px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #ffffff;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-section {
  padding: 17.5px 30px;
  border-bottom: 1px solid #4a4a4d;
}
.stat-section:first-child { padding-top: 35px; }
.stat-section:last-child {
  padding-bottom: 35px;
  border-bottom: none;
}

.stat-section h2 {
  font-size: 34px !important;
  font-weight: 400 !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px;
  color: var(--yellow) !important;
}

.stat-eyebrow {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #9a9a9d !important;
}

.stat-section p {
  font-size: 16px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: #d1d1d1 !important;
  font-weight: 400 !important;
}

.sq-phase-final-wrapper {
  position: relative;
}
.sq-phase-final-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: linear-gradient(to bottom, var(--darkAccent) 0%, 70%, var(--lightAccent) 100%);
}
@media (min-width: 901px) {
  .sq-phase-final-wrapper::before {
    height: calc(100% + 580px);
  }
}
@media (max-width: 900px) {
  .sq-phase-final-wrapper::before {
    height: calc(100% + 220px);
  }
}

.sq-checker-wrapper {
  position: relative;
  margin: -373px auto 0 auto;
  --buehnen-breite: 90vw;
  width: var(--buehnen-breite);
  height: 713px;
  z-index: 2;
  pointer-events: none;
  perspective: 1072px;
  perspective-origin: center 347px;
}

.sq-checker-stage {
  width: 100%;
  height: 100%;
  background-image: repeating-conic-gradient(#000000 0% 25%, #ffffff 0% 50%);
  background-size: 80px 80px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 65%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 65%);
  transform: rotateX(87deg);
  transform-origin: center bottom;
}

.sq-fluegel-shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 119px;
  height: 137px;
  margin-left: -20px;
  margin-top: 0;
  pointer-events: none;
  will-change: transform, filter, opacity;
  transform-origin: center center;
  transform: scaleX(2.2) scaleY(1.8);
  opacity: 0.6;
}

.sq-fluegel-shadow svg {
  width: 100%;
  height: 100%;
  fill: #000000;
  transform: rotate(55deg);
  transform-origin: center center;
}

@media (max-width: 900px) {
  .sq-timeline-row {
    flex-direction: column;
    gap: 0;
    padding-left: 95px;
    padding-right: 14px;
  }
  .sq-col-left,
  .sq-phase-card {
    text-align: left;
    align-self: stretch;
  }
  .sq-phase-card {
    margin-top: 20px;
  }
  .sq-road-track {
    left: 48px;
    margin-left: -15px;
    height: 100%;
  }
  .sq-piano-wrapper {
    height: 100%;
  }
  .sq-piano {
    left: 48px;
    margin-left: -40px;
  }
  .custom-stat-card { margin: 0; }
  .stat-section { padding: 25px 20px; }
  .stat-eyebrow { font-size: 11px !important; }
  .stat-section h2 { font-size: 34px !important; }
  .stat-section h3 { font-size: 13px !important; }
  .stat-section p { font-size: 15px !important; }
  .stat-section {
    position: relative;
    cursor: pointer;
    padding-right: 50px;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  .stat-section::before,
  .stat-section::after {
    content: "";
    position: absolute;
    top: var(--icon-top, 33px);
    right: 20px;
    width: 16px;
    height: 3px;
    background-color: #9a9a9d;
    transition: transform 0.2s ease;
  }
  .stat-section::after {
    transform: rotate(90deg);
  }
  .stat-section.is-open::after {
    transform: rotate(0deg);
  }
  .stat-section p {
    display: none;
  }
  .stat-section:not(.is-open) h2 {
    margin-bottom: 0 !important;
  }
  .stat-section.is-open p {
    display: block;
    font-size: 17px !important;
    margin-right: -30px !important;
  }
  .sq-checker-wrapper {
    display: none;
  }
}

/* =====================================================================
   Vorspiele & Events (unendlich laufendes Karussell)
   ===================================================================== */
.events-section {
  background: linear-gradient(200deg, var(--darkAccent) 50%, var(--accent) 100%);
  padding: 72px 0;
}

.events-heading {
  max-width: var(--content-width);
  margin: 0 auto 32px auto;
  padding: 0 calc(var(--content-width) / 96);
  color: var(--white);
}

.events-heading .section-eyebrow {
  /* War bisher das kleine, unauffällige 13px-Eyebrow-Label (Basis-
     Regel .section-eyebrow) - soll aber wie in anderen Abschnitten
     (z.B. "Deine Reise") als große, echte Überschrift wirken. Weiß
     statt Akzentfarbe, nur das "&"-Zeichen (im HTML separat als
     .accent verpackt) bleibt rot. line-height/letter-spacing nach der
     H2-Formel wie überall sonst. */
  color: var(--white);
  font-size: var(--fluid-h2);
  font-weight: 700;
  line-height: 1.008;
  letter-spacing: -0.02em;
}

.events-heading .section-eyebrow .accent {
  color: var(--accent);
}

.events-heading .section-lead {
  /* Gleiche Formatierung wie .road-journey-heading ("Vom Anfänger zum
     Klavierprofi...") - Squarespaces "Absatz 2"-Größe (Wert 1.4), nicht
     die größere Absatz-1-Größe (var(--fluid-p1)), die hier vorher
     versehentlich verwendet wurde und deutlich zu groß wirkte. */
  font-size: var(--fluid-p2);
  font-weight: 400;
  color: var(--lightAccent);
}

:root {
  /* WICHTIG - wurzelrelative Pfade (/assets/...), KEINE relativen (../):
     Relative url() in CSS-Custom-Properties loest der Browser gegen das
     DOKUMENT auf, nicht gegen dieses Stylesheet. "../img/..." wuerde
     hier also zu "/img/..." statt "/assets/img/..." und 404 liefern.
     Die Variablen werden per data-bg in main.js gesetzt (Karussell). */
  --img-studioso: url('/assets/img/events/event-studioso.webp');
  --img-concerto: url('/assets/img/events/event-concerto-breisach.webp');
  --img-lounge: url('/assets/img/events/event-lounge-ballonwettbewerb.webp');
  --img-geschichten: url('/assets/img/events/event-klaviergeschichten.webp');
  --img-deluxe: url('/assets/img/events/event-kitkat-klavier-deluxe.webp');
  --img-wettbewerbe: url('/assets/img/events/event-wettbewerbe.webp');
}

.infinite-carousel-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.infinite-carousel-track {
  display: flex;
  width: calc(100% * (12 / 3));
}

.infinite-carousel-track.run-animation {
  animation: scrollCarousel 60s linear infinite;
}

.carousel-card-container {
  width: calc(100% / 12);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
}

.carousel-card {
  background-color: var(--darkAccent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-radius: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

.carousel-card li span {
  color: var(--yellow) !important;
  font-weight: bold;
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: block;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.05);
}

.card-middle {
  background-color: var(--darkAccent);
  width: 100%;
  padding: 30px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-bottom {
  width: 100%;
  padding: 30px 40px 40px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.carousel-card h3 {
  font-size: 3rem;
  font-weight: 600;
  margin: 0;
  color: var(--white) !important;
  font-family: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 20px;
}

.carousel-card .subtitle {
  font-size: 1.3rem;
  margin: 0 0 30px 0;
  color: var(--white) !important;
  line-height: 1.2;
  opacity: 0.9;
}

.carousel-card ul {
  list-style: none;
  padding: 0;
  margin: auto 0 0 0;
  text-align: left;
  width: 100%;
}

.carousel-card li {
  margin-bottom: 15px;
  font-size: 1.2rem;
  color: var(--white) !important;
  line-height: 1.2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

@keyframes scrollCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 960px) {
  .infinite-carousel-track { width: calc(100% * (12 / 2)); }
}

@media (max-width: 600px) {
  .infinite-carousel-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .infinite-carousel-wrapper::-webkit-scrollbar {
    display: none;
  }
  .infinite-carousel-track,
  .infinite-carousel-track.run-animation {
    animation: none !important;
    width: max-content;
  }
  .carousel-card-container {
    width: 85vw;
    scroll-snap-align: center;
    padding: 8px;
  }
  .carousel-card-container:nth-child(n+7) {
    display: none;
  }
  .card-middle {
    padding: 15px 20px;
  }
  .card-bottom {
    padding: 15px 20px 20px 20px;
  }
}

/* =====================================================================
   Rezensionen (Bento-Grid)
   ===================================================================== */
.reviews-section {
  background: linear-gradient(154deg, var(--darkAccent) 20%, var(--accent) 100%);
  padding: 72px 0;
}

.reviews-heading {
  max-width: var(--content-width);
  margin: 0 auto 32px auto;
  padding: 0 calc(var(--content-width) / 96);
  color: var(--white);
}

.reviews-main-heading strong {
  color: var(--yellow);
}

.bento-reviews-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "annette annette hannah raluca"
    "katharina lilly laura laura";
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0;
}

.bento-card {
  border-radius: 15px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.bento-card-primary {
  background-color: var(--white);
  color: var(--black);
}

.bento-card-secondary {
  background-color: var(--darkAccent);
  color: var(--lightAccent);
}

.bento-card-primary::before {
  content: "";
  position: absolute;
  bottom: -10%;
  right: -8%;
  width: 75%;
  height: 75%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cg fill='none' stroke='lightgrey' stroke-opacity='0.25' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 160 C20 160 10 155 8 145 C6 135 12 128 20 125 L20 160Z'/%3E%3Cpath d='M20 125 C20 125 18 80 40 55 C65 25 110 15 160 12 C210 9 260 18 280 35 C295 48 292 65 280 75 C265 87 230 88 200 88 L200 160 L20 160Z'/%3E%3Cpath d='M200 88 C200 88 220 90 235 100 C248 109 250 125 245 138 C240 150 228 158 210 160 L200 160Z'/%3E%3Cpath d='M20 160 L280 160'/%3E%3Cpath d='M40 160 L40 175 C40 177 42 178 44 178 L56 178 C58 178 60 177 60 175 L60 160'/%3E%3Cpath d='M200 160 L200 175 C200 177 202 178 204 178 L216 178 C218 178 220 177 220 175 L220 160'/%3E%3Cpath d='M40 175 L40 185 C40 187 42 190 46 190 L54 190 C58 190 60 187 60 185 L60 175'/%3E%3Cpath d='M200 175 L200 185 C200 187 202 190 206 190 L214 190 C218 190 220 187 220 185 L220 175'/%3E%3Cpath d='M55 55 L55 130'/%3E%3Cpath d='M70 45 L70 130'/%3E%3Cpath d='M85 38 L85 130'/%3E%3Cpath d='M100 33 L100 130'/%3E%3Cpath d='M115 29 L115 130'/%3E%3Cpath d='M130 26 L130 130'/%3E%3Cpath d='M145 24 L145 130'/%3E%3Cpath d='M160 23 L160 130'/%3E%3Cpath d='M175 23 L175 130'/%3E%3Cpath d='M190 24 L190 130'/%3E%3Cpath d='M63 50 L63 118' stroke-width='1.5'/%3E%3Cpath d='M78 41 L78 118' stroke-width='1.5'/%3E%3Cpath d='M93 35 L93 118' stroke-width='1.5'/%3E%3Cpath d='M108 30 L108 118' stroke-width='1.5'/%3E%3Cpath d='M138 25 L138 118' stroke-width='1.5'/%3E%3Cpath d='M153 24 L153 118' stroke-width='1.5'/%3E%3Cpath d='M168 24 L168 118' stroke-width='1.5'/%3E%3Cpath d='M55 130 L200 130'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  pointer-events: none;
}

.pos-annette   { grid-area: annette; }
.pos-hannah    { grid-area: hannah; }
.pos-raluca    { grid-area: raluca; }
.pos-katharina { grid-area: katharina; }
.pos-lilly     { grid-area: lilly; }
.pos-laura     { grid-area: laura; }

.bento-card .stars { font-size: 0.9rem; margin-bottom: 8px; position: relative; z-index: 1; }

.bento-card h4 {
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 8px 0;
  font-family: inherit;
  color: inherit;
  position: relative;
  z-index: 1;
}

.bento-card p {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0;
  font-family: inherit;
  white-space: pre-line;
  color: inherit;
  position: relative;
  z-index: 1;
}

.bento-read-more {
  display: none;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .bento-reviews-wrapper {
    display: flex;
    flex-direction: column;
    width: auto;
    /* -19px Bleed war gegen den alten, festen 24px-Container-Rand
       kalibriert - seit der Umstellung auf proportionale Ränder
       (s. .content-container) schrumpft der Rand auf sehr schmalen
       Screens unter 19px, wodurch der Bleed über den Viewport
       hinauslief. max() begrenzt den Bleed auf das, was der aktuelle
       Rand tatsächlich hergibt. */
    margin-left: max(-19px, calc(var(--content-width) / 96 * -1));
    margin-right: max(-19px, calc(var(--content-width) / 96 * -1));
  }
  .bento-card p.needs-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
    overflow: hidden;
  }
  .bento-card p.needs-clamp.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .bento-read-more.is-visible {
    display: inline-block;
  }
}

/* =====================================================================
   Das Studio (Foto-Bilderstreifen, darunter Überschrift + Absatz)
   ===================================================================== */
.studio-intro {
  max-width: var(--content-width);
  margin: 0 auto;
  /* Oben der knappe Abstand, weil der Text zum Bilderstreifen direkt
     darüber gehört; unten der grosse, der den Abschnitt vom nächsten
     trennt. Vor dem Umsortieren stand der Text über dem Streifen und
     die Werte waren entsprechend vertauscht. */
  padding: 40px 0 72px 0;
  text-align: center;
}

.studio-intro-heading {
  font-size: var(--fluid-h2);
  font-weight: 700;
  line-height: 1.008;
  margin-bottom: 16px;
}

.studio-intro-text {
  font-size: var(--fluid-p2);
  color: var(--darkAccent);
  line-height: 1.4;
}

/* =====================================================================
   Foto-Galerie (schmaler Bilderstreifen unter den Rezensionen)
   Live gegen die echte Seite gemessen: auf Desktop eine einzelne
   randlose Reihe aus 5 Bildern im Breitenverhältnis 2:3:3:3:2, auf
   Mobile 3 Zeilen (2 Bilder / 1 großes / 2 Bilder).
   ===================================================================== */
.photo-strip {
  display: grid;
  grid-template-columns: 2fr 3fr 3fr 3fr 2fr;
  height: 380px;
}

.photo-strip-item {
  overflow: hidden;
}

.photo-strip-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .photo-strip {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 220px;
    height: auto;
  }
  .photo-strip-item:nth-child(3) {
    grid-column: 1 / span 2;
  }
}

/* =====================================================================
   Deine nächsten Schritte
   ===================================================================== */
.next-steps-section {
  background-color: var(--lightAccent);
  padding: 72px 0;
}

.next-steps-heading {
  max-width: var(--content-width);
  margin: 0 auto 40px auto;
  padding: 0 calc(var(--content-width) / 96);
  text-align: center;
  /* Stand vorher als Inline-style im HTML - dort brach es den lokalen
     Editor, dessen Feld-Selektoren in server.py auf das exakte Start-Tag
     matchen. Farbangaben deshalb immer hier, nie inline. */
  color: var(--black);
}

.next-steps-intro {
  max-width: 800px;
  margin: -16px auto 40px auto;
  padding: 0 calc(var(--content-width) / 96);
  text-align: center;
  font-size: var(--fluid-p2);
  /* ebenfalls von einem Inline-style hierher verschoben, s. oben */
  color: var(--accent);
  line-height: 1.4;
}

.next-steps {
  display: flex;
  justify-content: center;
  gap: 28px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 calc(var(--content-width) / 96);
  flex-wrap: wrap;
  box-sizing: border-box;
}

.next-steps-cta {
  text-align: center;
  margin-top: 48px;
}

.step {
  flex: 1 1 280px;
  max-width: 411px;
  text-align: left;
  padding: 40px 36px 56px 36px;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.step-number-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.step-icon-wrap {
  margin-bottom: 8px;
}

.step-icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
}
@media (min-width: 769px) {
  .step-icon {
    width: 96px;
    height: 96px;
  }
}

.step-number {
  font-size: clamp(3.75rem, 6.5vw, 5.25rem);
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  line-height: 1.065;
  letter-spacing: normal;
  margin: 0;
  color: var(--black);
}

.step-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 600;
  margin-top: 18px;
  color: var(--darkAccent);
  line-height: 1.25;
}

.step-text {
  font-family: 'Bricolage Grotesque', sans-serif;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.75;
  line-height: 1.2;
}

/* =====================================================================
   Deine Lehrerin
   ===================================================================== */
.teacher-section {
  background-color: var(--white);
  padding: 72px 0;
}

.teacher-layout {
  /* Live gegen die echte Seite gemessen (1400px Breite): Bild-Spalte
     476px, Text-Spalte 747px von 1288px Content-Breite = ca. 38/62. */
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 48px;
  align-items: start;
}

.teacher-portrait {
  /* Auf der echten Seite ein anderes, nicht-kreisförmiges Bild als im
     Über-mich-Abschnitt (dort IMG_6004, hier IMG_5092) - randlos, ohne
     Namensbeschriftung darunter (der Name steht stattdessen groß und
     rot rechts daneben, s. .teacher-name). */
  width: 100%;
  height: auto;
  display: block;
}

.teacher-eyebrow {
  /* Live gegen die echte Seite gemessen: Absatz-2-Größe (Wert 1.4),
     normale Absatz-Schrift (Nunito Sans, kein Heading-Font-Override). */
  display: block;
  font-size: var(--fluid-p2);
  font-weight: 400;
  color: var(--darkAccent);
  margin-bottom: 4px;
}

.teacher-name {
  /* Live gegen die echte Seite gemessen: natives <h2> (Wert 5) in
     Akzentfarbe - vorher fehlte diese große Namens-Überschrift
     komplett, "Deine Lehrerin" lief stattdessen fälschlich in
     Absatz-2-Größe als einzige Überschrift. */
  color: var(--accent);
  margin-bottom: 24px;
}

.custom-accordion {
  width: 100%;
}
.custom-accordion-divider {
  height: 1px;
  background-color: var(--black);
}
.custom-accordion-item-title-wrap {
  margin: 0;
}
.custom-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.custom-accordion-title {
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 28px);
  line-height: 1.2;
  color: var(--black) !important;
}
.custom-accordion-icon {
  flex: none;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
.custom-accordion-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.custom-accordion-trigger[aria-expanded="true"] .custom-accordion-arrow {
  transform: rotate(225deg);
}
.custom-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.custom-accordion-panel-inner {
  width: 70%;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.custom-accordion-panel-inner p {
  margin: 0 0 15px 0 !important;
  color: var(--darkAccent) !important;
}
.custom-accordion-panel-inner p:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .custom-accordion-panel-inner {
    width: 100%;
  }
  .teacher-layout {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-section {
  background-color: var(--black);
  padding: 72px 0;
}

.faq-heading .faq-main-heading {
  /* Auf der echten Seite ein <h3> (Wert 4), nicht die native H2-Größe
     wie die übrigen Section-Überschriften dieser Seite - deshalb auch
     die H3- statt H2-Zeilenhöhe: 1.2em * (1 + (1-4)/25) = 1.056 (das
     <h2>-Tag hier würde sonst den H2-Wert 1.008 vererben). */
  font-size: var(--fluid-h3);
  line-height: 1.056;
}

.faq-heading {
  max-width: var(--content-width);
  margin: 0 auto 32px auto;
  padding: 0 calc(var(--content-width) / 96);
  color: var(--white);
  text-align: center;
}

.custom-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 100%;
  box-sizing: border-box;
}
.custom-faq-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.custom-faq-item {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
}
.custom-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.custom-faq-question {
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.2;
  color: var(--white) !important;
}
.custom-faq-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 16px;
}
.custom-faq-icon-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: var(--white);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.custom-faq-icon-bar--vertical {
  transform: translateY(-50%) rotate(90deg);
}
.custom-faq-trigger[aria-expanded="true"] .custom-faq-icon-bar--vertical {
  transform: translateY(-50%) rotate(0deg);
}
.custom-faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.custom-faq-panel-inner {
  padding: 0 22px 20px 22px;
  box-sizing: border-box;
}
.custom-faq-panel-inner p {
  margin: 0 0 10px 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.custom-faq-panel-inner p:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .custom-faq {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =====================================================================
   Kontakt (Formular + Karte)
   ===================================================================== */
.contact-section {
  background-color: var(--white);
  padding: 72px 0;
}

.contact-heading {
  margin-bottom: 56px;
  text-align: center;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 40px;
  align-items: start;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form-row-submit {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--black);
}

.contact-field label .required {
  font-weight: 400;
  color: var(--darkAccent);
  opacity: 0.7;
}

.contact-field input,
.contact-field textarea {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: var(--lightAccent);
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
  color: var(--black);
  resize: vertical;
}

.contact-field textarea {
  min-height: 57px;
  height: 57px;
  /* Von Hand vergrösserbar - der Browser zeichnet dafür den üblichen
     Anfasser in die rechte untere Ecke. Nur vertikal, damit das Feld
     nicht aus dem Formularraster ausbricht.
     overflow muss dafür "auto" statt "hidden" sein: bei hidden blenden
     manche Browser den Anfasser aus. Das Auto-Wachsen beim Tippen
     bleibt erhalten und tritt zurück, sobald von Hand gezogen wurde
     (s. autoGrow in main.js). */
  resize: vertical;
  overflow-y: auto;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Honeypot gegen Spam-Bots. Bewusst NICHT display:none oder
   visibility:hidden - manche Bots erkennen das und lassen das Feld dann
   aus. Stattdessen aus dem sichtbaren Bereich geschoben, für Menschen
   also unerreichbar, für einen Bot aber ein ganz normales Feld. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rückmeldung nach dem Absenden. Ohne Inhalt unsichtbar (das hidden-
   Attribut im HTML), die Farben setzt main.js über die Zustandsklassen. */
.contact-status {
  margin: 16px 0 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: var(--fluid-p3);
  line-height: 1.4;
}

.contact-status.is-erfolg {
  background-color: rgba(14, 138, 22, 0.1);
  border: 1px solid rgba(14, 138, 22, 0.35);
  color: #0E6B12;
}

.contact-status.is-fehler {
  background-color: rgba(217, 32, 32, 0.08);
  border: 1px solid rgba(217, 32, 32, 0.35);
  color: var(--accent);
}

/* Während des Sendens: Knopf gesperrt und sichtbar gedämpft. */
.contact-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.contact-submit {
  align-self: end;
  margin-top: 4px;
  white-space: nowrap;
}

.contact-form-col {
  display: flex;
  flex-direction: column;
}

.contact-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0;
  text-align: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--black);
}

.contact-or::before,
.contact-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
}

.contact-whatsapp {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.contact-whatsapp:hover {
  transform: translateY(-4px) scale(1.05);
}

.contact-whatsapp svg {
  width: 160px;
  height: 160px;
}

.contact-map {
  border-radius: 16px;
  overflow: hidden;
  height: 480px;
  min-height: 320px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-map-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  box-sizing: border-box;
  background-color: var(--lightAccent);
  border: none;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  overflow: hidden;
}

.contact-map-placeholder::before {
  /* Weichgezeichneter Kartenausschnitt als Hintergrund - eigener,
     lokal gespeicherter Screenshot (../img/karte-anfahrt.webp), damit
     beim Seitenaufruf keine Verbindung zu Google hergestellt wird.
     inset:-12px + scale sorgt dafür, dass der unscharfe Rand des
     Blurs nicht als harte Kante am Container-Rand sichtbar wird. */
  content: "";
  position: absolute;
  inset: -12px;
  background-image: url('../img/karte-anfahrt.webp');
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.contact-map-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
}

.contact-map-placeholder:hover::before {
  transform: scale(1.1);
}

.contact-map-placeholder-pin,
.contact-map-placeholder-title,
.contact-map-placeholder-hint {
  position: relative;
  z-index: 1;
}

.contact-map-placeholder-pin {
  font-size: 2.5rem;
  line-height: 1;
}

.contact-map-placeholder-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
}

.contact-map-placeholder-hint {
  max-width: 320px;
  font-size: 0.85rem;
  color: var(--lightAccent);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-form-row {
    grid-template-columns: 1fr;
  }

  /* Auf dem Handy zuerst WhatsApp, dann "oder", dann das Formular -
     der schnellste Weg zuerst, statt die Besucher an einem langen
     Formular vorbeiscrollen zu lassen. Umgesetzt per flex order statt
     durch Umsortieren im HTML, damit die Desktop-Reihenfolge
     (Formular zuerst) unverändert bleibt.
     .contact-form-col ist bereits flex-direction: column, s. oben. */
  .contact-whatsapp {
    order: 1;
    /* Die Abstände steckten bisher im "oder"-Trenner darüber; als
       erstes Element braucht der Knopf jetzt selbst einen Abstand zur
       Überschrift. */
    margin-top: 8px;
  }

  .contact-or {
    order: 2;
  }

  .contact-form {
    order: 3;
  }
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer {
  background-color: var(--lightAccent);
  padding: 28px 0;
}

.site-footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 calc(var(--content-width) / 96);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 24px;
  font-size: 0.85rem;
  color: var(--darkAccent);
}

.site-footer-copyright {
  white-space: nowrap;
}

.site-footer-legal {
  display: flex;
  gap: 24px;
  justify-self: end;
}

.site-footer-legal a {
  color: var(--darkAccent);
  text-decoration: none;
}

.site-footer-legal a:hover {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer-legal {
    justify-self: center;
  }
}

/* Klaviertastatur-Widget als Social-Link-Leiste in der Fußzeile - vom
   Nutzer als fertiges Snippet vorgegeben, nur die Farbwerte/Struktur
   übernommen, keine eigene Umbenennung der Klassen. */
.piano-keyboard.nav-bar-version {
  display: block;
  position: relative;
  width: 260px;
  max-width: 100%;
  height: 60px;
  justify-self: center;
}

.piano-key {
  display: flex;
  position: absolute;
  top: 0;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px !important;
  transition: all 0.08s ease-in-out;
  border-radius: 0 0 4px 4px;
}

.piano-key svg {
  width: 60%;
  aspect-ratio: 1 / 1;
  display: block;
}

.white-key {
  width: calc(100% / 4);
  height: 100%;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0;
  border-top: none;
  border-right: none;
  z-index: 1;
  box-shadow: 0px 4px 0px #C2C2C2, 0px 3px 5px rgba(0, 0, 0, 0.05);
}

.key-c { left: 0; }
.key-d { left: calc(100% / 4 * 1); }
.key-e { left: calc(100% / 4 * 2); }
.key-f { left: calc(100% / 4 * 3); border-right: 1px solid #D0D0D0; }

.black-key {
  width: 7%;
  height: 58%;
  background-color: var(--black);
  z-index: 2;
  box-shadow: 0px 3px 0px #000000, 0px 3px 4px rgba(0, 0, 0, 0.2);
  cursor: default;
}

.key-cis { left: calc((100% / 4 * 1) - 3.5%); }
.key-dis { left: calc((100% / 4 * 2) - 3.5%); }

.white-key:hover {
  transform: translateY(2px);
  box-shadow: 0px 2px 0px #C2C2C2, 0px 2px 3px rgba(0, 0, 0, 0.05);
}

.black-key:hover {
  transform: translateY(2px);
  box-shadow: 0px 1px 0px #000000, 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* =====================================================================
   Impressum & Datenschutzerklärung
   ===================================================================== */
.legal-hero {
  background-color: var(--darkAccent);
  padding: 64px 0 40px 0;
}

.legal-hero .content-container {
  max-width: var(--content-width);
}

.legal-hero-eyebrow {
  display: block;
  color: var(--lightAccent);
  font-weight: 600;
  font-size: var(--fluid-p2);
  margin-bottom: 8px;
}

.legal-hero h1 {
  color: var(--white);
  font-size: var(--fluid-h2);
  font-weight: 700;
}

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px calc(var(--content-width) / 96) 96px calc(var(--content-width) / 96);
}

.legal-body h2 {
  font-size: var(--fluid-h4);
  font-weight: 700;
  color: var(--accent);
  margin: 40px 0 12px 0;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  font-size: var(--fluid-p3);
  color: var(--darkAccent);
  line-height: 1.5;
  margin-bottom: 14px;
}

.legal-body ul {
  margin: 0 0 14px 22px;
  padding: 0;
}

.legal-body li {
  font-size: var(--fluid-p3);
  color: var(--darkAccent);
  line-height: 1.5;
  margin-bottom: 6px;
}

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
}

.legal-body strong {
  color: var(--black);
}

.legal-updated {
  margin-top: 48px;
  font-size: 0.85rem;
  color: var(--darkAccent);
  opacity: 0.7;
}