/* ==========================================================================
   /gesangsunterricht — nur was diese Seite unverwechselbar macht
   Reihenfolge (website-bauen 2B.1): 1 Hero · 2 Sektions-Bausteine
   3 Zustaende auf dunklem Grund · 4 Lesegroessen klein (zuletzt)
   Steckbrief: pages/003_2026-10-28_gesangsunterricht/hero-steckbrief.md
   ========================================================================== */

/* ── 1 Hero „B weich" (Adrian 29.10.): Vollbild, Filmtitel unten links, warmes Braun statt Schwarz,
   abgedunkelt nur hinter dem Text, goldene Notenlinie (js/seiten/gesang-hero.js). Kontrast am Bild gemessen. ── */
.hero-gesang { position: relative; height: min(100svh, 900px); min-height: 660px; display: flex; align-items: flex-end;
  background: #3a2a1f; color: var(--color-on-dark); overflow: hidden; }
.hg-bild { position: absolute; inset: 0; overflow: hidden; }  /* Ken Burns und mobiles Band: Bild nie ueber die Kante */
.hg-bild picture { position: absolute; inset: 0; }
.hg-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%; }
.hg-vignette { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, #231b15 0%, rgba(35, 27, 21, .85) 6%, rgba(35, 27, 21, 0) 20%),  /* Naht: unten in den Ton der Stimm-Buehne */
    radial-gradient(ellipse 48% 34% at 30% 52%, rgba(40, 28, 20, .64) 0%, rgba(40, 28, 20, .34) 55%, rgba(40, 28, 20, 0) 100%),
    linear-gradient(90deg, rgba(40, 28, 20, .66) 0%, rgba(40, 28, 20, .42) 34%, rgba(40, 28, 20, .06) 60%, rgba(40, 28, 20, 0) 72%),
    linear-gradient(0deg, rgba(40, 28, 20, .8) 0%, rgba(40, 28, 20, .6) 26%, rgba(40, 28, 20, .2) 48%, rgba(40, 28, 20, 0) 62%); }
.hg-staff { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%; pointer-events: none; }
.hg-inhalt { position: relative; z-index: 2; text-shadow: 0 1px 18px rgba(30, 20, 14, .45); padding: 0 0 clamp(40px, 6vh, 64px); }
.hg-h1 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0;
  color: var(--color-on-dark); }  /* Elfenbein statt Gold: bei 1920 px lag Gold stellenweise unter 4,5:1 */
.hg-h1::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--ci-gold); }
.hg-hook { margin-top: 14px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 5.6vw, 5.25rem);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--color-on-dark); }
.hg-hook .z { display: block; }
.hg-hook .z2 { font-style: italic; color: var(--ci-gold-l); padding-left: .9em; }
.hg-zeile { display: grid; grid-template-columns: minmax(0, 46ch) auto; gap: 40px; align-items: end; margin-top: 76px; }
.hg-sub { font-size: var(--fs-lead); color: rgba(246, 239, 228, .88); }
.hg-aktion { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hg-proof { font-size: .875rem; color: rgba(246, 239, 228, .82); flex-direction: column; gap: 2px; }
.hg-proof .sterne { color: var(--ci-gold); }
.hg-proof b { color: var(--color-on-dark); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .hg-bild img { animation: hg-kb 16s var(--ease) both; transform-origin: 62% 25%; }
  .hg-hook .z { animation: hg-auf 1.1s var(--ease) both; }
  .hg-hook .z2 { animation-delay: .14s; } .hg-hook .z3 { animation-delay: .28s; }
  .hg-zeile { animation: hg-auf 1s var(--ease) .45s both; }
}
@keyframes hg-kb { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes hg-auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .hero-gesang { display: block; height: auto; min-height: 0; background: linear-gradient(180deg, #3a2a1f 55%, #231b15 100%); }
  .hg-bild { position: relative; height: auto; aspect-ratio: 4 / 3; }  /* = Format der Mobil-Bilddatei 900x675, kein Beschnitt */
  .hg-bild img { object-position: 70% 20%; }
  .hg-vignette { background: linear-gradient(0deg, rgba(58, 42, 31, 1) 0%, rgba(58, 42, 31, .5) 22%, rgba(58, 42, 31, 0) 46%); }
  .hg-staff { height: 120px; bottom: 0; }
  .hg-inhalt { padding: 18px 0 40px; }
  .hg-h1 { font-size: .875rem; }
  .hg-hook { margin-top: 8px; font-size: clamp(1.875rem, 8.2vw, 2.375rem); line-height: 1.06; }
  .hg-hook .z2 { padding-left: 0; }
  .hg-zeile { display: block; margin-top: 14px; }
  .hg-sub { font-size: 1rem; line-height: 1.6; }
  .hg-aktion { margin-top: 20px; align-items: stretch; }
  .hg-aktion .btn { width: 100%; }
  .hg-proof { font-size: 1rem; }
}
.hg-proof { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hg-proof .sterne { letter-spacing: 2px; }

/* ── 2 Sektions-Bausteine ────────────────────────────────────────────── */
/* Block 2: Stimmwellen auf dunkler Buehne */
.stimm-buehne { padding: var(--section-pad) 0 0; background-image: linear-gradient(180deg, #231b15 0%, var(--color-dark-2) 260px, var(--color-dark) 70%); }  /* Naht: beginnt im Ton des Hero-Fusses */
.stimm-buehne .stimm-text { max-width: 660px; margin-inline: auto; text-align: center; }
.stimm-buehne .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.stimm-buehne h2 { margin: 16px 0 20px; }
.stimm-buehne .chip { margin-top: 26px; }
.stimm-box {
  position: relative; height: clamp(240px, 24vw, 340px); margin-top: clamp(8px, 2vw, 24px);
  cursor: crosshair; touch-action: pan-y;
}
.stimm-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stimm-box::after { /* Buehnenkante: weicher Uebergang in den hellen Teil */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 107, .5), transparent);
}

/* Block 3: Stunde */
.stunde .duo-text > h2 { margin-bottom: 28px; }
.stunde .punkte + .prose { margin-top: 4px; }
/* Block 4: Kundenstimme, Bruecke in den Fuer-wen-Teil */
.bruecke { margin-top: 30px; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--color-accent-d); }
.sec--paper .stimme { margin-top: 64px; }
/* Block 5 Profis: gebaute Grafik Ziele/Staerken/Schwaechen -> Strategie */
.strategie { max-width: 500px; justify-self: center; width: 100%; }
.strategie svg { width: 100%; height: auto; overflow: visible; }
.strategie .weg { fill: none; stroke: var(--ci-gold); stroke-width: 1.5; opacity: .55; }
.strategie .weg--an { stroke: var(--ci-bronze); stroke-width: 2.5; opacity: 1; stroke-dasharray: 340; stroke-dashoffset: 0; }
html.js .strategie .weg--an { stroke-dashoffset: 340; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
html.js .strategie.is-in .weg--an { stroke-dashoffset: 0; }
.strategie .knoten circle { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.5; }
.strategie .knoten--an circle { fill: var(--color-alt); stroke: var(--ci-bronze); stroke-width: 2; }
.strategie text { font-family: var(--font-sans); font-size: 19px; font-weight: 600; fill: var(--color-text); text-anchor: middle; }
.strategie .ziel circle { fill: var(--color-dark-2); }
.strategie .ziel text { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 27px; fill: var(--color-on-dark-2); }
/* Block 5 Erwachsene: ohne Foto (Bild-Luecke), typografischer Partner */
.erwachsene-inner > h2 { max-width: 22ch; }
.erwachsene-text { display: grid; gap: clamp(20px, 4vw, 64px); margin-top: 32px; }
@media (min-width: 960px) { .erwachsene-text { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.erwachsene-lead {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.2;
  color: var(--color-accent-d); padding-left: 24px; border-left: 2px solid var(--ci-gold);
}
/* Erwachsene: gebaute Grafik, aufsteigende Melodie auf der Notenlinie (= Fortschritte) */
.fortschritt { margin-top: 28px; max-width: 420px; }
.fortschritt svg { width: 100%; height: auto; overflow: visible; }
.fortschritt .linien line { stroke: var(--ci-gold); stroke-width: 1; opacity: .6; }
.fortschritt .note ellipse { fill: var(--ci-bronze); }
.fortschritt .note line { stroke: var(--ci-bronze); stroke-width: 2; }
html.js .fortschritt .note { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.3s + var(--i) * .12s); }
html.js .fortschritt.is-in .note { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .fortschritt .note { opacity: 1; transform: none; } }
/* Block 6: Konzertfoto mit Parallaxe im Bogen */
.media-par .par-rahmen { overflow: hidden; border-radius: var(--radius-arch); aspect-ratio: 4 / 5; box-shadow: 0 50px 90px -50px rgba(60, 40, 20, .6); }
.media-par .par-rahmen img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.media-bogen, .media-rund { max-width: 520px; justify-self: center; width: 100%; }
.media-rund { max-width: none; }
.media-schmal { max-width: 420px; }
/* Block 9: Bild als Link auf /klavierunterricht */
.media-link { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.media-link img { width: 100%; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .media-link:hover img { transform: scale(1.04); } }

/* Block 6 Klassik: dunkles Band (Design-Runde 29./30.10.), Konzertsaal als Hintergrund, Kernpassage gross in Gold-Kursiv
   (Muster Startseite 2b .konzert-kern). Quelle nur 1200 px breit: Bild bleibt abgedunkelt und leicht weich, nie scharf im Vollformat. */
.klassik-band { position: relative; overflow: hidden; background: var(--color-dark); color: var(--color-on-dark);
  padding-block: clamp(80px, 8vw, 124px) clamp(72px, 7vw, 108px); }
.kb-bild { position: absolute; inset: 0; overflow: hidden; }
.kb-bild picture { position: absolute; inset: 0; }
.kb-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; transform: scale(1.12); filter: saturate(.9); will-change: transform; }
.kb-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 11, 9, .94) 0%, rgba(13, 11, 9, .86) 34%, rgba(13, 11, 9, .42) 62%, rgba(13, 11, 9, .2) 100%),
              linear-gradient(0deg, rgba(13, 11, 9, .7) 0%, rgba(13, 11, 9, 0) 30%), linear-gradient(180deg, rgba(13, 11, 9, .6) 0%, rgba(13, 11, 9, 0) 22%); }
.kb-inhalt { position: relative; z-index: 1; }
.kb-text { max-width: 620px; }
.klassik-band h2 { color: var(--color-on-dark); }
.klassik-band .prose { margin-top: 22px; }
.klassik-band .prose p { color: rgba(246, 239, 228, .84); }
.kb-kern { margin-top: 30px; padding-left: 24px; border-left: 2px solid var(--color-line-gold);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.4; color: var(--color-on-dark-2); }
.kb-caption { position: absolute; z-index: 1; right: var(--gutter); bottom: 18px; max-width: 46ch; text-align: right;
  font-size: .8125rem; color: rgba(246, 239, 228, .72); }
@media (max-width: 899px) {
  .klassik-band { padding-top: 0; }
  .kb-bild { position: relative; height: 62vw; max-height: 440px; }
  .kb-bild img { object-position: 50% 40%; }
  .kb-bild::after { background: linear-gradient(0deg, var(--color-dark) 0%, rgba(13, 11, 9, 0) 50%); }
  .kb-inhalt { margin-top: -32px; }
  .kb-caption { position: static; margin: 26px var(--gutter) 0; text-align: left; }
}

/* ── 3 Zustaende auf dunklem Grund ───────────────────────────────────── */

/* ── 4 Lesegroessen klein (immer zuletzt) ────────────────────────────── */
@media (max-width: 899px) {
  .stimm-box { height: 240px; }
  .sec--paper .stimme { margin-top: 56px; }
  .erwachsene-lead { padding-left: 18px; }
}