/* ==========================================================================
   Variante C — "Raster"
   --------------------------------------------------------------------------
   White Base, harte Konturen, farbige Felder. Das Raster wird sichtbar
   gemacht, Sektionen sind geblockte Bento-Flaechen. Eine einzige Akzentfarbe
   traegt alles Farbige; Schwarz und Weiss bilden Flaeche und Kontur.

   Gleiche Klassennamen wie A und B - nur andere Gestaltung.
   ========================================================================== */


/* ============================================================ 1  Tokens == */

:root {
  /* Hell ist der Grundzustand */
  --paper:   #FFFFFF;
  --tint:    #F2F0EC;
  --tint-2:  #E6E3DD;
  --ink:     #0E0E10;
  --ink-dim: #55555E;
  --ink-faint:#8A8A93;

  --coral:   #DE340C;
  --blue:    #DE340C;
  --lime:    #DE340C;

  --accent:      var(--coral);
  --accent-ink:  #FFFFFF;

  --scrim:      rgba(14, 14, 16, 0.78);
  --scrim-soft: rgba(14, 14, 16, 0.45);

  --border-w: 2px;
  --border:   var(--border-w) solid var(--ink);
  --shadow:   6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);

  --radius:    0px;
  --radius-lg: 0px;
  --maxw:      1320px;
  --maxw-narrow: 760px;
  --gutter:    clamp(1.15rem, 4vw, 3rem);
  --gap:       clamp(0.85rem, 2vw, 1.5rem);

  --font-display: system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--2: clamp(0.67rem, 0.65rem + 0.10vw, 0.73rem);
  --step--1: clamp(0.78rem, 0.75rem + 0.16vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.08rem + 0.80vw, 1.75rem);
  --step-2:  clamp(1.75rem, 1.32rem + 1.90vw, 2.90rem);
  --step-3:  clamp(2.30rem, 1.55rem + 3.40vw, 4.80rem);
  --step-4:  clamp(2.00rem, 1.30rem + 6.40vw, 7.60rem);

  --tracking-caps: 0.10em;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur:  180ms;

  /* Zusaetzlicher Abstand fuer Spruenge zum Kontaktformular. Die
     Kontakt-Knoepfe bekommen diesen Wert als scroll-margin-top dazu (siehe
     Regel unten), damit der Abschnitt beim Sprung etwas tiefer sitzt als ein
     normaler Sprung auf denselben Abschnitt - das wirkt ruhiger, weil die
     Ueberschrift nicht direkt unter dem Klebekopf klebt. */
  --kontakt-versatz: 30px;
}

:root[data-theme="dark"] {
  --paper:   #101014;
  --tint:    #1A1A20;
  --tint-2:  #24242C;
  --ink:     #F4F4F2;
  --ink-dim: #A8A8B2;
  --ink-faint:#7A7A85;

  --coral:   #FF7A5C;
  --blue:    #FF7A5C;
  --lime:    #FF7A5C;

  --accent:     var(--coral);
  --accent-ink: #101014;

  --scrim:      rgba(16, 16, 20, 0.8);
  --scrim-soft: rgba(16, 16, 20, 0.5);

  --shadow:    6px 6px 0 var(--coral);
  --shadow-sm: 4px 4px 0 var(--coral);
}

/* Systemeinstellung Dunkelmodus - wirkt auch ohne JavaScript.
   Der Ausschluss von data-theme="light" laesst die ausdrueckliche Wahl der
   Nutzerin vorgehen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #101014;
    --tint:    #1A1A20;
    --tint-2:  #24242C;
    --ink:     #F4F4F2;
    --ink-dim: #A8A8B2;
    --ink-faint:#7A7A85;
    
    --coral:   #FF7A5C;
    --blue:    #FF7A5C;
    --lime:    #FF7A5C;
    
    --accent:     var(--coral);
    --accent-ink: #101014;
    
    --scrim:      rgba(16, 16, 20, 0.8);
    --scrim-soft: rgba(16, 16, 20, 0.5);
    
    --shadow:    6px 6px 0 var(--coral);
    --shadow-sm: 4px 4px 0 var(--coral);
  }
}



/* Lange Woerter wie "Musikproduktion" duerfen auf sehr schmalen Geraeten
   notfalls umbrechen, statt die Seite waagerecht aufzuziehen. */
.hero__title,
.section__title,
.page-title,
.detail-dialog__title {
  overflow-wrap: break-word;
}


/* ==================================================== 2  Reset / Basis == */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-transform: none;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-underline-offset: 0.2em; }
a:hover { color: var(--coral); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}


/* ==================================================== 3  Hilfsklassen == */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7em 1.2em;
  border: var(--border);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; color: var(--paper); }

.mono { font-family: var(--font-mono); font-size: var(--step--1); }


/* ==================================================== 4  Kopfbereich == */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand__name { font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em; }
.brand__tag {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-dim);
}

.nav-list {
  display: flex; align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
  font-size: var(--step--1);
  font-weight: 700;
}

.nav-list a {
  display: inline-block;
  padding: 0.45em 0.75em;
  border: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.nav-list a:hover { border-color: var(--ink); }
.nav-list a[aria-current="true"] { background: var(--lime); border-color: var(--ink); }

.site-header__tools { display: flex; align-items: center; gap: 0.4rem; }

.theme-toggle, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border: var(--border);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.theme-toggle:hover, .nav-toggle:hover { background: var(--lime); color: var(--accent-ink); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }

.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

.nav-toggle { display: none; }

.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 1.1rem; height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }


/* =========================================================== 5  Hero == */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: var(--border);
  background: var(--ink);
}

.hero__media { position: absolute; inset: 0; z-index: -1; }

.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: grayscale(0.2) contrast(1.05);
  opacity: 0.9;
}

/* Farbige Schleier als Signatur dieser Variante */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14, 14, 16, 0.88) 0%, rgba(14, 14, 16, 0.55) 55%, rgba(222, 52, 12, 0.5) 100%);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(80vh, 46rem);
  padding-block: clamp(3rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4rem);
  color: #FFFFFF;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  align-self: flex-start;
  padding: 0.4em 0.9em;
  background: var(--lime);
  border: var(--border);
  border-color: #0E0E10;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 1.5rem;
}

.hero__title {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin-bottom: 0.45em;
  max-width: 15ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero__sub {
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Knoepfe: harte Kanten, Versatz-Schatten --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.85em 1.5em;
  border: var(--border-w) solid #0E0E10;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover {
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--primary {
  background: var(--coral);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--coral); color: var(--accent-ink); }

.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--lime); color: var(--accent-ink); }

.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--blue); color: var(--accent-ink); }

.btn.is-done { background: var(--lime); color: var(--accent-ink); }

/* Knoepfe im Hero liegen auf dem Foto */
.hero .btn { border-color: #0E0E10; }
.hero .btn--ghost { background: #FFFFFF; color: #0E0E10; }
.hero .btn--ghost:hover { background: var(--lime); }


.hero--lesson .hero__img { object-position: 50% 42%; }



/* ======================================================== 6  Abschnitte == */

/* Sprungziele: halten den Abschnitt unter dem Klebekopf frei (Kopfhoehe
   74 px + Atem, gemessen 88 px). Bewusst scroll-margin-top am Ziel statt
   scroll-padding-top am <html>: scroll-padding wirkte auch auf das Fokussieren
   eines Formularfelds und zog die Seite beim Anklicken nach - das Formular
   rutschte dann unter dem Zeiger weg. scroll-margin-top gilt nur beim Scrollen
   zu einem Element, nicht beim Fokus. */
.band {
  padding-block: clamp(3rem, 8vw, 6rem);
  border-bottom: var(--border);
  scroll-margin-top: 5.5rem;
}
.band--elev { background: var(--tint); }

/* Jeder Sprung auf das Kontaktformular landet 30px tiefer als ein normaler
   Sprung auf denselben Abschnitt: der Abstand setzt sich aus dem Kopfabstand
   plus --kontakt-versatz zusammen. Das betrifft alle Kontakt-Knoepfe
   ("Kontakt aufnehmen", "Kostenloses Kennenlerngespräch", die "Anfragen" an
   den Preiskarten) und den Menue-Link "Kontakt" gleichermassen - ein
   einheitlicher Landepunkt wirkt ruhiger als zwei verschiedene. Der Wert
   sitzt am Ziel (#kontakt), nicht am Knopf: scroll-margin liest der Browser
   vom angesprungenen Element. */
#kontakt { scroll-margin-top: calc(5.5rem + var(--kontakt-versatz)); }

.section__head { margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }

.section__title {
  display: flex; flex-direction: column; gap: 0.25em;
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 0.4em;
}

#testimonials-title,
#faq-title { text-align: center; }

.section__lead { max-width: 60ch; color: var(--ink-dim); margin: 0; }


.page-title { font-size: var(--step-3); margin-bottom: 1.5rem; }


/* ======================================================= 7  Audio-Player == */

.player {
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.player__main {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas:
    "art transport meta volume"
    "progress progress progress progress";
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: var(--border-w) solid var(--ink);
}
:root[data-theme="dark"] .player__main { border-bottom-color: var(--coral); }

.player__art {
  grid-area: art;
  width: clamp(3.5rem, 8vw, 4.5rem);
  aspect-ratio: 1;
  background: var(--tint);
  border: var(--border-w) solid var(--ink);
  overflow: hidden;
}
:root[data-theme="dark"] .player__art { border-color: var(--coral); }
.player__art.is-empty { opacity: 0.4; }
.player__art-img { width: 100%; height: 100%; object-fit: cover; }

.player__transport { grid-area: transport; display: flex; align-items: center; gap: 0.35rem; }

.player__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 2px solid transparent;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.player__btn:hover:not(:disabled) { border-color: var(--ink); }
.player__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.player__btn svg { width: 1.05rem; height: 1.05rem; }

.player__btn--play {
  width: 3.25rem; height: 3.25rem;
  background: var(--coral);
  border: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.player__btn--play:hover:not(:disabled) {
  background: var(--coral);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.player__btn--play svg { width: 1.35rem; height: 1.35rem; }
.player__btn--play.is-playing { background: var(--lime); color: var(--accent-ink); }

.player__meta { grid-area: meta; min-width: 0; }

.player__title {
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.player__artist {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-dim);
}

.player__progress {
  grid-area: progress;
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
}

.player__bar {
  position: relative; flex: 1;
  height: 10px;
  background: var(--tint-2);
  border: 2px solid var(--ink);
  cursor: pointer;
  touch-action: none;
}
:root[data-theme="dark"] .player__bar { border-color: var(--coral); }
.player__bar::before { content: ""; position: absolute; inset: -12px 0; }
.player__bar.is-disabled { cursor: not-allowed; opacity: 0.5; }

.player__bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: var(--coral);
}

.player__bar-knob {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 22px;
  margin-left: -4px;
  background: var(--ink);
  transform: translateY(-50%);
}
:root[data-theme="dark"] .player__bar-knob { background: var(--coral); }

.player__volume-wrap { grid-area: volume; display: flex; align-items: center; gap: 0.4rem; }

.player__volume {
  -webkit-appearance: none; appearance: none;
  width: clamp(4rem, 11vw, 7rem);
  height: 8px;
  background: var(--tint-2);
  border: 2px solid var(--ink);
  cursor: pointer;
}
:root[data-theme="dark"] .player__volume { border-color: var(--coral); }
.player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 16px;
  background: var(--coral);
  border: 0;
}
.player__volume::-moz-range-thumb {
  width: 12px; height: 16px;
  background: var(--coral);
  border: 0; border-radius: 0;
}
.player__volume::-moz-range-track { background: var(--tint-2); height: 8px; }

.player__error {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--coral);
}

.player__list { display: grid; }
@media (min-width: 48rem) {
  .player__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
}

.player__list-item { border-top: var(--border-w) solid var(--ink); }
:root[data-theme="dark"] .player__list-item { border-top-color: var(--coral); }
@media (min-width: 48rem) {
  .player__list-item + .player__list-item { border-left: var(--border-w) solid var(--ink); }
  :root[data-theme="dark"] .player__list-item + .player__list-item { border-left-color: var(--coral); }
}
.player__list-item:first-child { border-top: 0; }
@media (min-width: 48rem) { .player__list-item:first-child { border-top: 0; } }

.player__list-btn {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.85rem 1rem;
  text-align: left;
  border: 0;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.player__list-btn:hover { background: var(--tint); }
.player__list-item.is-active .player__list-btn {
  background: var(--lime);
  color: var(--accent-ink);
}

.player__list-index { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; }

.player__list-text { display: flex; flex-direction: column; min-width: 0; }
.player__list-title { font-weight: 700; font-size: var(--step-0); }
.player__list-artist { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-dim); }
.player__list-item.is-active .player__list-artist { color: var(--ink); }

.player__list-state { font-weight: 700; }


/* ============================================== 8  Filter und Karten == */

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.filter-chip {
  padding: 0.45em 1em;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--step--1);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.filter-chip:hover { background: var(--lime); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.filter-chip[aria-pressed="true"] {
  background: var(--blue);
  color: var(--accent-ink);
}

/* --- Bento-Raster --- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
}

@media (min-width: 60rem) {
  /* Featured-Karten doppelt so breit - daraus entsteht der Bento-Effekt */
  .project-card--featured { grid-column: span 2; }
  .project-card--featured .project-card__media { aspect-ratio: 16 / 10; }
}

.project-card {
  display: flex; flex-direction: column;
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.project-card.is-hidden { display: none; }

.project-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--tint);
  overflow: hidden;
  border-bottom: var(--border-w) solid var(--ink);
}
:root[data-theme="dark"] .project-card__media { border-bottom-color: var(--coral); }

.project-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.project-card:hover .project-card__img { transform: scale(1.03); }

.project-card__placeholder {
  display: grid; place-items: center;
  height: 100%; padding: 1rem;
  text-align: center;
  font-weight: 700;
  color: var(--ink-faint);
}

.project-card__category {
  position: absolute; top: 0; left: 0;
  padding: 0.3em 0.75em;
  background: var(--lime);
  border-right: var(--border-w) solid #0E0E10;
  border-bottom: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.project-card__actions {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem;
  background: linear-gradient(0deg, rgba(14, 14, 16, 0.72), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.project-card:hover .project-card__actions,
.project-card:focus-within .project-card__actions { opacity: 1; }
@media (hover: none) { .project-card__actions { opacity: 1; } }

.project-card__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--coral);
  border: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.project-card__play:hover { background: var(--lime); color: var(--accent-ink); transform: scale(1.06); }
.project-card__play svg { width: 1.1rem; height: 1.1rem; }

/* Der Play-Knopf auf der Karte zeigt beim laufenden Titel ein Pause-Symbol.
   Beide Symbole liegen im Knopf, sichtbar ist immer nur eines. */
.project-card__play .icon-pause { display: none; }
.project-card__play.is-current .icon-play { display: none; }
.project-card__play.is-current .icon-pause { display: block; }


.project-card__info {
  padding: 0.5em 0.9em;
  background: var(--paper);
  border: var(--border-w) solid #0E0E10;
  color: #0E0E10;
  font-weight: 700;
  font-size: var(--step--1);
}
.project-card__info:hover { background: var(--blue); color: var(--accent-ink); }

.project-card__body {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: clamp(0.9rem, 2vw, 1.35rem);
  flex: 1;
}

.project-card__title { font-size: var(--step-1); font-weight: 800; margin: 0; }
.project-card__artist {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.project-card__text { margin: 0; font-size: var(--step--1); color: var(--ink-dim); }

/* --- Chips als farbige Pillen --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.chip {
  padding: 0.2em 0.6em;
  background: var(--blue);
  color: var(--accent-ink);
  border: 2px solid #0E0E10;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
}

.chip--tag { background: var(--tint-2); color: var(--ink); }
:root[data-theme="dark"] .chip--tag { background: transparent; color: var(--ink-dim); border-color: var(--ink-dim); }

.filter-empty, .data-note, .empty-note {
  display: none;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: var(--border);
  background: var(--tint);
  font-size: var(--step--1);
  font-weight: 700;
}
.filter-empty.is-visible { display: block; }
.data-note:not([hidden]) { display: block; }
.empty-note { display: block; }


/* ============================ 9  Leistungen, Über mich, Kontakt ======= */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap);
}

.service {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* Jede Leistung bekommt ihre eigene Farbe - Wiedererkennung */
.service:nth-child(1) { border-top: 8px solid var(--coral); }
.service:nth-child(2) { border-top: 8px solid var(--blue); }
.service:nth-child(3) { border-top: 8px solid var(--lime); }

.service__title { font-size: var(--step-1); margin: 0; }
.service__text { margin: 0; font-size: var(--step--1); color: var(--ink-dim); }

.service__link {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.45em 0.9em;
  border: var(--border-w) solid var(--ink);
  background: var(--tint);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--step--1);
}
.service__link:hover { background: var(--blue); color: var(--accent-ink); }

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .about { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.about__media { border: var(--border); box-shadow: var(--shadow); background: var(--tint); }

.about__body p { color: var(--ink-dim); max-width: 58ch; }

.clients__label {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.clients { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.clients__item {
  padding: 0.3em 0.75em;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-weight: 700;
  font-size: var(--step--1);
}

/* ------------------------------------------------------ Zitate-Karussell -- */

/* Der Streifen scrollt waagerecht und rastet je Karte ein. Das geht auch
   ohne JavaScript (Wischen, Pfeiltasten bei Fokus). Die beiden Knoepfe
   darunter sind nur eine Bequemlichkeit. */
.testimonials__viewport {
  margin-top: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Der Fokusrahmen liegt aussen; ohne Platz waere er oben abgeschnitten.
     Links und rechts setzt `.is-carousel` daraus den Karussell-Rand
     (--karussell-rand), damit die aktive Karte mittig steht. */
  padding: 0.35rem;
}
/* Platz links und rechts, damit die erste und die letzte Karte mittig
   einrasten koennen. Den Wert berechnet `setzeRaender()` in ds-ui.js aus der
   halben Rahmenbreite minus der halben Kartenbreite; ohne ihn klemmte die
   erste Karte links am Rand. Faellt der Wert aus (kein Karussell), bleibt das
   normale Polster von 0.35rem. */
.testimonials__viewport.is-carousel { padding-inline: var(--karussell-rand, 0.35rem); }
.testimonials__viewport::-webkit-scrollbar { display: none; }
.testimonials__viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.testimonials__grid {
  display: grid;
  grid-auto-flow: column;
  /* Breite der Karten. Vorgabe fuer den Fall ohne JavaScript; im Karussell
     setzt `setzeRaender()` in ds-ui.js `--karussell-karte` in px. Bewusst
     nicht von der Innenkastenbreite des Rahmens abgeleitet: die Zentrierung
     setzt seitlichen Innenabstand, der den Innenkasten verkleinert - ein
     Prozentwert dort haenge dann von seinem eigenen Ergebnis ab und die Karte
     schrumpfte mit jedem Aufbau weiter. */
  grid-auto-columns: var(--karussell-karte, min(30rem, 80%));
  gap: var(--gap);
  margin: 0;
  padding: 0;
}
/* Nur im Karussell waechst die Kastenbreite mit dem Inhalt, statt am Rahmen zu
   kleben. Sonst bliebe sie beim Innenkasten stehen und der hintere
   Karussell-Rand fiele aus `scrollWidth` heraus - die letzten Karten liessen
   sich dann nicht mehr mittig holen. Im Raster (data-static, Archive) gilt
   weiter die normale Breite, sonst liefe es auf die Inhaltsbreite auf. */
.testimonials__viewport.is-carousel .testimonials__grid {
  width: max-content;
}

/* Auf breiten Schirmen kein Karussell, wenn nur ein oder zwei Zitate da sind:
   dann stehen sie nebeneinander. Mobil bleibt es immer der scrollbare
   Streifen. Das Attribut setzt renderTestimonials(); die Regel greift nur
   ab 56rem, darunter bleibt der Streifen unberuehrt. */
@media (min-width: 56rem) {
  .testimonials__viewport[data-static] { overflow: visible; padding: 0; }
  .testimonials__viewport[data-static] .testimonials__grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  .testimonials__viewport[data-static="1"] .testimonials__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .testimonials__viewport[data-static="2"] .testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.testimonial {
  margin: 0;
  /* Mittig einrasten: die hervorgehobene Karte steht in der Mitte, links und
     rechts schaut je ein Stueck der Nachbarn hervor. Den noetigen Platz an
     den beiden Enden legt `setzeRaender()` in ds-ui.js an - ohne ihn klemmte
     die erste Karte links am Rand und die letzte liesse sich nie in die Mitte
     holen. */
  scroll-snap-align: center;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  /* Der Fokus der Karussell-Karte: die im Streifen sichtbare Karte steht
     voll, die uebrigen treten zurueck. Ohne JavaScript bleibt alles bei 1 -
     die Archivfassungen zeigen die Karten als Raster, dort gibt es nichts
     zu fokussieren. */
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.testimonials__viewport.is-carousel .testimonial { opacity: 0.45; transform: scale(0.96); }
.testimonials__viewport.is-carousel .testimonial.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .testimonials__viewport.is-carousel .testimonial { transform: none; }
}

.testimonial__quote {
  margin: 0 0 1.1rem;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Der Autor steht links, das Marken-Symbol rechts in derselben Zeile. */
.testimonial__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.testimonial__author { font-weight: 800; }
.testimonial__role { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); }

.testimonial__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--border);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.testimonial__brand:hover { background: var(--accent); color: var(--accent-ink); }
.testimonial__brand-svg { display: block; }
.testimonial.is-placeholder { border-style: dashed; }
.testimonial.is-placeholder .testimonial__quote { color: var(--ink-dim); font-weight: 400; }

.testimonials__note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
}

.testimonials__controls {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.testimonials__controls[hidden] { display: none; }
.testimonials__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.testimonials__nav:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.testimonials__nav:disabled { opacity: 0.4; cursor: default; }
.testimonials__nav svg { display: block; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Kontaktbereich der Unterrichtsseite: einspaltig und zentriert, damit das
   Formular die volle Breite bekommt. Die geteilte Zwei-Spalten-Regel oben
   gilt weiter fuer die Startseite, die nur Text und Knoepfe enthaelt. */
.contact--center { grid-template-columns: minmax(0, 1fr); }

.contact__lead { color: var(--ink-dim); max-width: 56ch; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.contact__mail { margin-top: 1.5rem; }
.contact__mail a {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--coral);
  overflow-wrap: anywhere;
}
.contact__mail a:hover { color: var(--coral); }
.contact__mail--large a { font-size: var(--step-2); }

.contact--center { text-align: center; }
.contact--center .contact__lead { margin-inline: auto; }
.contact__actions--center { justify-content: center; }

/* Die Sektion ist ein einspaltiges Raster mit grossem Zeilenabstand (48 px).
   Titel, Einleitung und Formular ruecken hier enger zusammen - vorher lagen
   zwischen Einleitung und Formular rund 94 px (48 Rasterabstand + 28 Rand am
   Formular), das wirkte auseinandergerissen. */
.contact--center { row-gap: 0; }
.contact--center .contact__lead { margin-bottom: 0; }
.contact--center .contact-form { margin-top: 1.25rem; }

.contact__note {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border: var(--border);
  background: var(--tint);
  font-size: var(--step--1);
  max-width: 58ch;
  margin-inline: auto;
}
.contact__note-label { margin-right: 0.5rem; }
.contact__note .contact__mail { margin-top: 0.35rem; }

/* Der Kopierknopf steht jetzt im Hinweiskasten: als schlichter Textlink
   statt als zweiter grosser Knopf. */
.contact__copy {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  border-bottom: var(--border-w) solid var(--ink-dim);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.contact__copy:hover { color: var(--ink); border-bottom-color: var(--ink); }
.contact__copy.is-done { color: var(--ink); border-bottom-color: var(--ink); }

.contact__privacy {
  margin-top: 1rem;
  font-size: var(--step--2);
  color: var(--ink-dim);
  max-width: 58ch;
  margin-inline: auto;
}
.contact__privacy a { color: var(--ink); }

/* ------------------------------------------------------ Kontaktformular -- */

.contact-form { margin-top: 1.75rem; text-align: left; }

.contact-form__set {
  display: grid;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Kein gap: die Luecke zwischen Beschriftung und Eingabefeld liess den
   Inhalt beim Fokussieren um einige Pixel rutschen. Das Feld traegt seinen
   Abstand ueber den Abstand der Reihe. */
.field { display: grid; gap: 0 }

.field__label {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-weight: 700;
  font-size: var(--step--1);
}
.field__req { color: var(--accent); font-weight: 800; }
.field__optional {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-dim);
}

.field__input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: var(--border);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-0);
}
.field__input--area { resize: vertical; min-height: 9rem; }

/* Der graue Beispieltext verschwindet beim Tippen von selbst. Ein eigener
   Fokusrahmen, weil die harte Kontur hier nicht doppelt wirken soll. */
.field__input::placeholder { color: var(--ink-dim); opacity: 1; }
.field__input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.field__error {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
}
.field__input[aria-invalid="true"] { border-color: var(--accent); }

/* Honeypot: nicht per display:none verstecken - manche Bots ueberspringen
   das. Aus dem Sichtfeld schieben, aus der Tabreihenfolge nehmen. */
.field--honig {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem;
}

.contact-form__status {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
}
.contact-form__status.is-ok { color: var(--ink); }
.contact-form__status.is-error { color: var(--accent); }

/* Der Hinweis auf den Bestaetigungs-Umweg erscheint nur ohne JavaScript.
   Der Kopf der Seite setzt "has-js" sofort per Inline-Skript; fehlt es,
   bleibt der Hinweis stehen. */
.contact-form__noscript {
  margin: 0;
  font-size: var(--step--2);
  color: var(--ink-dim);
}
.has-js .contact-form__noscript { display: none; }

.contact-form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

.teaser {
  padding: clamp(1.35rem, 3vw, 2rem);
  border: var(--border);
  background: var(--lime);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
}

.teaser__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 0.6rem;
}
.teaser__title { font-size: var(--step-1); margin-bottom: 0.5rem; }
.teaser__text { font-size: var(--step--1); margin-bottom: 1.25rem; }
.teaser .btn { background: #0E0E10; color: #FFFFFF; border-color: #0E0E10; }
.teaser .btn:hover { background: #FFFFFF; color: #0E0E10; }


/* ================================ 10  Unterricht ===================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; }
}

/* Quadratisches Portraet im Ueber-mich-Abschnitt: die Spalte gibt die Breite
   vor, die Hoehe folgt 1:1. So bleibt das Bild in jeder Spaltenbreite quadratisch. */
.split__media--square img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Abstand zwischen Absatzblock und nachfolgendem Knopf. Ohne Regel stoesst
   der Knopf direkt an den letzten Absatz (gemessen: 0 px). 2.5rem liess den
   Knopf noch an den Textblock kleben; der Wunsch war mehr Luft, daher 3.25rem. */
.split__text > div + .btn,
.split__text > p + .btn { margin-top: 3.25rem; }

/* --- Stepper: Kreise auf einer Linie --- */
.steps {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  margin-top: 1.75rem;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.step::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: 0;
  width: 2px;
  background: var(--ink);
}
:root[data-theme="dark"] .step::before { background: var(--coral); }
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }

.step__num {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--blue);
  border: var(--border-w) solid var(--ink);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: var(--step-1);
}

.step__title { font-size: var(--step-1); margin: 0 0 0.2rem; }
.step__text { margin: 0; color: var(--ink-dim); font-size: var(--step--1); }

/* Der Abschluss des Ablaufs ist ein Knopf zum Kontaktformular, kein Satz.
   Der farbige Kasten der alten Fassung entfaellt, der Knopf steht frei. */
.steps__closing--cta {
  margin: 1.75rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}

.video {
  position: relative; margin: 0;
  border: var(--border);
  background: var(--tint);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.video__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.video__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.85rem;
  background: rgba(14, 14, 16, 0.5);
  border: 0;
  color: #FFFFFF;
  transition: background-color var(--dur) var(--ease);
}
.video__play:hover { background: rgba(14, 14, 16, 0.68); color: #FFFFFF; }

.video__play-icon {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  background: var(--coral);
  border: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  transition: transform var(--dur) var(--ease);
}
.video__play:hover .video__play-icon { transform: scale(1.07); }
.video__play-icon svg { width: 1.6rem; height: 1.6rem; }

.video__play-label { font-weight: 800; font-size: var(--step-0); }


.video.is-playing .video__play,
.video.is-playing .video__poster { display: none; }

.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.bullet-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.bullet-row li {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.7rem 0.9rem;
  border: var(--border);
  background: var(--paper);
  font-weight: 600;
  font-size: var(--step--1);
}
.bullet-row li::before { content: "→"; color: var(--coral); font-weight: 800; flex: none; }

.topics {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

/* Bereich mit Bild: Bild links, Text rechts. Ohne Bild bleibt der Block
   einspaltig (grid-template-columns wird dann nicht gesetzt). */
.topic-block:has(.topic-block__media) {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.topic-block__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--border);
  box-shadow: var(--shadow-sm);
}
.topic-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 48rem) {
  .topic-block:has(.topic-block__media) { grid-template-columns: 1fr; }
  .topic-block__media { max-width: 26rem; }
}

.topic-block__body { min-width: 0; }

/* Akkordeon eines Bereichs. Der Kopf ist zugleich der Schalter: Bild, Titel
   und Untertitel stehen immer da, Kurztext und Einzelthemen klappen darunter
   auf. Natives <details> wie beim FAQ-Aufklapper, nur mit groesserem Kopf -
   hier stehen drei breite Bloecke untereinander, nicht sieben schmale. */
.topic-block {
  scroll-margin-top: 5.5rem; /* Sprung auf #topic-<key> nicht unter den Kopf */
}
.topic-block__block {
  border-top: var(--border);
}
/* Drei Spalten: Kaestchen, Kopf (Titel + Untertitel), Zustandstext. Der
   Kurztext bekommt darunter die vollen zwei rechten Spalten. */
.topic-block__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.9rem;
  padding: 0.75rem 0;
  cursor: pointer;
  list-style: none;
}
.topic-block__summary::-webkit-details-marker { display: none; }

/* Kaestchen mit Pfeil, dasselbe Muster wie im FAQ-Aufklapper, nur groesser. */
.topic-block__icon {
  grid-column: 1; grid-row: 1;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: var(--border);
  background: var(--accent);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.topic-block__icon::after {
  content: "";
  border-left: 0.35rem solid var(--accent-ink);
  border-top: 0.28rem solid transparent;
  border-bottom: 0.28rem solid transparent;
  transform: translateX(0.06rem);
}
.topic-block__block[open] > .topic-block__summary .topic-block__icon { transform: rotate(90deg); }
.topic-block__summary:hover .topic-block__icon { filter: brightness(1.08); }

.topic-block__head {
  grid-column: 2; grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
  min-width: 0;
}
.topic-block__title { font-size: var(--step-1); font-weight: 800; }
.topic-block__subtitle { font-size: var(--step--1); color: var(--ink-dim); }

.topic-block__toggle {
  grid-column: 3; grid-row: 1;
  align-self: center;
  flex: none;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.topic-block__toggle-label--open { display: none; }
.topic-block__block[open] > .topic-block__summary .topic-block__toggle-label { display: none; }
.topic-block__block[open] > .topic-block__summary .topic-block__toggle-label--open { display: inline; }

/* Kurztext unter dem Kopf, ueber die zwei rechten Spalten (ab Spalte 2), damit
   er am Titel beginnt und nicht unter dem Kaestchen. */
.topic-block__intro {
  grid-column: 2 / -1; grid-row: 2;
  margin-top: 0.15rem;
  max-width: 62ch;
  color: var(--ink-dim);
}

/* Einzug unter dem Titel, damit die Einzelthemen am Text beginnen und nicht
   unter dem Kaestchen. Auf schmalen Geraeten entfaellt er, dort fehlt die
   Breite. */
.topic-block__panel { padding: 0.9rem 0 0.5rem 2.5rem; }

@media (max-width: 40rem) {
  .topic-block__panel { padding-left: 0; }
  .topic-block__toggle { display: none; } /* Pfeil zeigt den Zustand bereits */
}

.topic-block__list {
  list-style: none;
  margin: 0;
  padding: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.1rem 2.2rem;
}
.topic-block__item {
  display: grid;
  gap: 0.15rem;
  padding-left: 1.1rem;
  border-left: var(--border-w) solid var(--accent);
}
.topic-block__item-title { font-size: var(--step-0); }
.topic-block__item-text { font-size: var(--step--1); color: var(--ink-dim); }

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
  align-items: start;
}

.price-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow);
}

/* Farbcodierung der Tarife */
.price-card:nth-child(1) { border-top: 8px solid var(--coral); }
.price-card:nth-child(2) { border-top: 8px solid var(--blue); }
.price-card:nth-child(3) { border-top: 8px solid var(--lime); }

.price-card--recommended { background: var(--tint); }

.price-card__badge {
  position: absolute; top: -0.9rem; right: 1rem;
  margin: 0;
  padding: 0.3em 0.85em;
  background: var(--lime);
  border: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
}

.price-card__title { font-size: var(--step-1); margin: 0; }
.price-card__term { margin: 0; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); }

.price-card__price {
  display: flex; align-items: baseline; gap: 0.35rem;
  margin: 0.25rem 0 0.5rem;
  padding-bottom: 0.85rem;
  border-bottom: var(--border-w) solid var(--ink);
}
.price-card__currency { font-size: var(--step-1); font-weight: 700; }
.price-card__amount { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.price-card__unit { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); }

.price-card__features {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.price-card__features li { display: flex; gap: 0.6rem; align-items: baseline; }
.price-card__features li::before { content: "▪"; color: var(--coral); flex: none; font-size: 0.8em; }

.price-card__cta { margin-top: auto; width: 100%; }
.price-card__note {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--ink-dim);
}

/* Fussnote im Kasten: sie betrifft das Angebot und darf auffallen.
   Der USt-Hinweis ist eine reine Angabe und bleibt deshalb schlicht. */
.price-footnote {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.5em 1em;
  background: var(--lime);
  border: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  font-weight: 700;
  font-size: var(--step--1);
}

.price-vat { margin-top: 0.85rem; font-size: var(--step--1); color: var(--ink-dim); }

.accordion-list { display: grid; gap: 0.5rem; }

.accordion {
  border: var(--border);
  background: var(--paper);
}

.accordion__summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-size: var(--step-0);
  font-weight: 700;
  list-style: none;
  transition: background-color var(--dur) var(--ease);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after {
  content: "+";
  flex: none;
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--coral);
  transition: transform var(--dur) var(--ease);
}
.accordion[open] > .accordion__summary::after { content: "−"; }
.accordion__summary:hover { background: var(--tint); }
.accordion[open] > .accordion__summary { background: var(--tint); }

.accordion__body {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-dim);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 74ch;
}


/* =========================================================== 11 Dialoge == */

.detail-dialog {
  width: min(64rem, calc(100vw - 2rem));
  max-height: min(88vh, 50rem);
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
}
:root[data-theme="dark"] .detail-dialog { border-color: var(--coral); }

.detail-dialog::backdrop { background: rgba(14, 14, 16, 0.78); }

.detail-dialog.is-fallback-open,
.detail-dialog[open] { display: block; position: fixed; inset: 1rem; margin: auto; z-index: 60; }

.detail-dialog__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 46rem) {
  .detail-dialog__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.detail-dialog__media { background: var(--tint); border-right: 0; }
@media (min-width: 46rem) { .detail-dialog__media { border-right: 3px solid var(--ink); } }
.detail-dialog__media img { width: 100%; height: 100%; object-fit: cover; }

.detail-dialog__body {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.detail-dialog__category {
  align-self: flex-start;
  margin: 0;
  padding: 0.25em 0.7em;
  background: var(--lime);
  border: 2px solid #0E0E10;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
}

.detail-dialog__title { font-size: var(--step-2); margin: 0; }
.detail-dialog__artist { margin: 0; font-family: var(--font-mono); color: var(--ink-dim); }
.detail-dialog__text { color: var(--ink-dim); font-size: var(--step--1); }

.detail-dialog__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 1rem; }

.detail-dialog__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  z-index: 2;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  color: var(--ink);
  font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.detail-dialog__close:hover { background: var(--coral); color: var(--accent-ink); }



/* ================================ 12  Rechtstexte, Fußzeile =========== */

.legal__note {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: var(--lime);
  border: var(--border-w) solid #0E0E10;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: var(--step--1);
}

.legal__block { margin-bottom: 2rem; }
.legal__block h2 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.legal__block p { color: var(--ink-dim); font-size: var(--step--1); margin-bottom: 0.4rem;   overflow-wrap: anywhere;
}
.legal__back { margin-top: 2.5rem; }

.site-footer { padding-block: 2.5rem; }

.site-footer__inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
}

.site-footer__brand { margin: 0; font-family: var(--font-mono); font-size: var(--step--1); }

.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--step--1); font-weight: 700; }
.site-footer__links a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.site-footer__links a:hover { border-bottom-color: var(--coral); color: var(--ink); }

.noscript {
  padding-block: 1.5rem;
  border-top: var(--border);
  font-size: var(--step--1);
}


/* ========================================================= 13 Responsive == */

@media (max-width: 61.99rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    background: var(--paper);
    border-bottom: var(--border);
    transform: translateY(-130%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
    z-index: 39;
  }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.75rem var(--gutter) 1.5rem; }
  .nav-list li { border-bottom: 2px solid var(--tint-2); }
  .nav-list a { display: block; padding: 0.9rem 0.5rem; border: 0; }

  .nav-list.is-open { visibility: visible; }
  .nav.is-open { transform: translateY(0); }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 47.99rem) {
  .hero__inner { min-height: auto; padding-block: 3.5rem 2.5rem; }
  .hero__title { max-width: 100%; }
  .hero__sub { font-size: var(--step-0); }

  .player__main {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "art meta volume"
      "transport transport transport"
      "progress progress progress";
    row-gap: 0.9rem;
  }
  .player__transport { justify-content: center; }
  .player__volume { width: 100%; min-width: 3.5rem; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .detail-dialog__actions .btn { flex: 1; }
  .price-card__badge { right: 0.5rem; }
}

@media (max-width: 26rem) {
  .player__volume-wrap { flex-direction: column-reverse; gap: 0.15rem; }
  .price-card__amount { font-size: var(--step-2); }
  .btn { padding: 0.8em 1.1em; }
}


/* ============================================== Bewegung reduzieren == */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .project-card:hover,
  .project-card:hover .project-card__img { transform: none; }
  .btn:hover { transform: none; box-shadow: var(--shadow-sm); }
}

/* ================================================ Reveal-Animation == */

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.has-js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] { opacity: 1; transform: none; }
}

/* Die grosse Mailadresse ist in Monoschrift schnell breiter als ein schmales
   Geraet - deshalb hier frueh verkleinern. */
@media (max-width: 30rem) {
  .contact__mail--large a { font-size: var(--step-1); }
}


/* ==================================== 7b  Feste Player-Leiste ============= */

/* Der Player liegt als Leiste am unteren Bildrand und erscheint erst, wenn
   der erste Titel gestartet wurde. Der Platzhalter daneben haelt im
   Textfluss den Platz frei, den die Leiste sonst verdecken wuerde. */
.player--dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 -6px 18px rgba(14, 14, 16, 0.12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.player--dock.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              visibility 0s;
}

/* In der Leiste steht mehr nebeneinander - Polsterung und Abstaende enger. */
.player--dock .player__main {
  border-bottom: 0;
  padding: clamp(0.5rem, 1.5vw, 0.8rem) clamp(0.8rem, 2.5vw, 1.5rem);
  gap: clamp(0.5rem, 1.5vw, 1.1rem);
}
.player--dock .player__art { width: clamp(2.6rem, 7vw, 3.5rem); }
.player--dock .player__btn--play { width: 2.6rem; height: 2.6rem; box-shadow: none; }
.player--dock .player__btn--play svg { width: 1.15rem; height: 1.15rem; }

/* Titelliste klappt aus der Leiste heraus, nach oben begrenzt. */
.player--dock .player__list {
  display: none;
  max-height: min(50vh, 22rem);
  overflow-y: auto;
  border-top: 1px solid var(--ink);
}
.player--dock.is-list-open .player__list { display: flex; flex-direction: column; }
.player--dock .player__list-item:first-child { border-top: 0; }

/* Lautstaerke, Listen-Knopf und Schliessen teilen eine Spalte, damit die
   Hauptzeile auch auf 360 px in einer Reihe bleibt. */
.player__tools {
  grid-area: volume;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.35rem;
  min-width: 0;
}
.player__tools .player__volume-wrap { display: flex; align-items: center; gap: 0.35rem; }

.player__list-toggle {
  flex: 0 0 auto;
  padding: 0.35em 0.7em;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.player__list-toggle:hover { color: var(--ink); border-color: var(--ink); }
.player__list-toggle[aria-expanded="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--accent-ink);
}

.player__btn--close { color: var(--ink-faint); }
.player__btn--close:hover:not(:disabled) { color: var(--ink); }

/* Auf schmalen Bildschirmen faellt der Fortschrittsbalken weg, damit Platz
   fuer Titel und Knoepfe bleibt. Die Zeitanzeige bleibt sichtbar. */
@media (max-width: 30rem) {
  .player--dock .player__bar { display: none; }
  .player__tools .player__volume-wrap { flex-direction: row; gap: 0.25rem; }
  .player__tools .player__volume { width: 3.2rem; }
}