/* coripo.de – eine Datei, keine Abhängigkeiten, keine externen Anfragen.
   Farben aus Coripo/Assets.xcassets/AccentColor (hell #7742B5, dunkel #9964D4). */

:root {
  --accent: #7742B5;
  --accent-soft: #efe8f8;
  --accent-ink: #5a2d91;
  --bg: #ffffff;
  --bg-alt: #f6f5f8;
  --text: #1d1d1f;
  --text-2: #5f5f66;
  --line: #e2e0e6;
  --card: #ffffff;
  --bezel: #1a1a1c;
  --shadow: 0 30px 80px rgba(40, 20, 70, 0.18);
  --radius: 22px;
  --max: 1160px;
  --top: 60px;
  color-scheme: light dark;
}

/* Dunkel: nach System, oder ausdrücklich über den Schalter im Kopf
   (data-theme an <html>, gesetzt von assets/js/theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #9964D4;
    --accent-soft: #2a2236;
    --accent-ink: #c4a5ec;
    --bg: #111013;
    --bg-alt: #18161c;
    --text: #f2f1f4;
    --text-2: #a8a6ae;
    --line: #2d2a33;
    --card: #1d1b21;
    --bezel: #2a2a2e;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --accent: #9964D4;
    --accent-soft: #2a2236;
    --accent-ink: #c4a5ec;
    --bg: #111013;
    --bg-alt: #18161c;
    --text: #f2f1f4;
    --text-2: #a8a6ae;
    --line: #2d2a33;
    --card: #1d1b21;
    --bezel: #2a2a2e;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Licht aus: Der Bühnen-Abschnitt ist immer dunkel, wie die Bühne. */
.lights-down {
  --accent: #9964D4;
  --accent-soft: #2a2236;
  --accent-ink: #c4a5ec;
  --bg: #111013;
  --bg-alt: #18161c;
  --text: #f2f1f4;
  --text-2: #a8a6ae;
  --line: #2d2a33;
  --card: #1d1b21;
  --bezel: #2a2a2e;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
  background: #0b0a0d; color: var(--text);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--top); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: clip;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Kopfzeile mit der Wortmarke aus assets/logo */

.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: var(--top); }
.brand { display: flex; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand svg { height: 26px; width: auto; }
.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.top nav a { color: var(--text-2); }
.top nav a:hover { color: var(--text); text-decoration: none; }
.theme-toggle {
  width: 34px; height: 30px; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--text-2); display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
.is-dark .theme-toggle .sun { display: block; }
.is-dark .theme-toggle .moon { display: none; }
.lang { font-size: 14px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.lang:hover { color: var(--text); text-decoration: none; }

@media (max-width: 760px) {
  .top nav { display: none; }
  .lang { margin-left: auto; }
  .js .theme-toggle { margin-left: auto; }
  .js .lang { margin-left: 0; }
}

/* Knopf zum App Store. Bis zum Start ohne Badge; danach das offizielle von
   Apple (Marketing-Richtlinien), nicht nachgebaut. */

.store {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--text); color: var(--bg);
  border-radius: 999px; padding: 12px 22px;
  font-weight: 600; font-size: 16px;
}
.store:hover { text-decoration: none; opacity: 0.9; }
.store.soon { background: var(--accent-soft); color: var(--accent-ink); cursor: default; }
.store.soon:hover { opacity: 1; }

/* Geräte: Apples Rahmen aus den Design Resources („Product Bezels“), auf den
   Umriss des Geräts zugeschnitten (assets/img/device). Der Bildschirm liegt
   darunter, genau in der Öffnung; die runden Ecken schneidet der Rahmen
   selbst. Die Maße sind aus den Rahmen vermessen (Bildschirmausschnitt in
   Prozent des Umrisses). */

.ipad, .phone, .mac { position: relative; }
.ipad::after, .phone::after, .mac::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: center / 100% 100% no-repeat;
}
/* Schatten auf einer eigenen Fläche hinter dem Gerät: ein drop-shadow am
   Rahmen fiele auch in das Loch für den Bildschirm. */
.ipad::before, .phone::before, .mac::before {
  content: ""; position: absolute; z-index: -1; box-shadow: var(--shadow);
}
/* Der Bildschirm ist eine eigene Ebene unter dem Rahmen: Was darin per
   z-index übereinander blendet (Einstieg, Pedal), bleibt darin und kommt nie
   über die Ecken des Rahmens. Damit an der Kante nichts durchblitzt, reicht
   nur der schwarze Grund (als Schatten) unter den Rahmen, nicht das Bild:
   2 px wären bei einem klein gezeigten Gerät 10 bis 25 Bildpunkte, und die
   Knöpfe am Rand klebten am Rahmen, obwohl die App ihnen Abstand lässt.
   Der Bildschirm trägt die Rundung der Öffnung (aus den Rahmen vermessen),
   sonst stünden die Ecken des Schattens außen über das Gerät hinaus – beim
   schmalen iPhone-Rahmen sichtbar. */
.screen { position: absolute; z-index: 1; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #000; }
.screen picture { display: contents; }
.screen img, .screen video { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* iPad Pro 13″ (M5), Space Black. Bildschirm 2752 × 2064. */
.ipad { aspect-ratio: 2936 / 2249; }
.ipad::after { background-image: url(/assets/img/device/ipad13-land.webp); }
.ipad::before { inset: 0.3% 0.2%; border-radius: 4.6% / 6%; }
.ipad .screen { left: 3.202%; top: 4.224%; width: 93.733%; height: 91.774%; border-radius: 2.19% / 2.91%; }
.ipad.portrait { aspect-ratio: 2249 / 2936; }
.ipad.portrait::after { background-image: url(/assets/img/device/ipad13-port.webp); }
.ipad.portrait::before { inset: 0.2% 0.3%; border-radius: 6% / 4.6%; }
.ipad.portrait .screen { left: 4.002%; top: 3.202%; width: 91.774%; height: 93.733%; border-radius: 2.92% / 2.19%; }

/* iPhone 17 Pro, Silber. Bildschirm 1206 × 2622, die Dynamic Island trägt der Rahmen. */
.phone { aspect-ratio: 1318 / 2717; }
.phone::after { background-image: url(/assets/img/device/iphone17pro.webp); }
.phone::before { inset: 0.4% 0.8%; border-radius: 17% / 8.3%; }
.phone .screen { left: 4.249%; top: 1.767%; width: 91.502%; height: 96.503%; border-radius: 15.39% / 7.08%; }

/* MacBook Pro 14″ (M5), Space Black. Bildschirm 3024 × 1964 samt Notch. */
.mac { width: 100%; aspect-ratio: 3805 / 2297; }
.mac::after { background-image: url(/assets/img/device/macbookpro14.webp); }
.mac::before { left: 1%; right: 1%; bottom: 1%; height: 6%; border-radius: 0 0 40% 40% / 0 0 100% 100%; }
.mac .screen { left: 10.276%; top: 2.438%; width: 79.474%; height: 85.503%; border-radius: 1.29% 1.29% 0 0 / 1.98% 1.98% 0 0; background: var(--bg-alt); }


/* Einstieg: das iPad richtet sich beim Scrollen auf und blättert durch drei
   Ansichten. Ohne JavaScript (oder mit reduzierter Bewegung) steht es still. */

.hero { padding: 56px 0 40px; text-align: center; }
.hero-text { max-width: 820px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.03; letter-spacing: -0.03em; margin: 0 0 20px; font-weight: 760;
}
.hero .lead { font-size: clamp(18px, 2vw, 22px); color: var(--text-2); margin: 0 auto 28px; max-width: 36em; }
.hero .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--text-2); }
.hero .facts li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 6px; }

.showcase { margin: 48px auto 0; max-width: 1040px; }
.showcase { transform-origin: 50% 0; will-change: transform; }
.showcase .screen img { position: absolute; inset: 0; transition: opacity 0.5s ease; }
.showcase .screen img + img { opacity: 0; }
/* Beim Wechsel blendet nur die neue Ansicht ein, über der alten, die bis zum
   Ende voll stehen bleibt. Zwei halb durchsichtige Bilder übereinander ließen
   sonst den Grund durchscheinen. */
.showcase .screen img.leaving { transition: none; }
.captions { list-style: none; margin: 30px auto 0; padding: 0; display: flex; justify-content: center; gap: 10px 34px; flex-wrap: wrap; }
.captions li { font-size: 16px; color: var(--text-2); max-width: 15em; text-align: left; padding-left: 14px; border-left: 3px solid var(--line); transition: color 0.3s, border-color 0.3s; }
.captions li b { display: block; color: var(--text); font-size: 17px; }
.captions li.on { color: var(--text); border-color: var(--accent); }

/* Mit Animation: ein hoher Abschnitt, darin eine Bühne, die stehen bleibt.
   Die Bühne ist so hoch wie das Fenster bei eingeklappter Adressleiste (lvh):
   Mit svh schnitt sie das iPad über dem unteren Rand ab, sobald Safari die
   Leiste beim Scrollen verkleinert, und darunter blieb ein leerer Streifen.
   Ausgeklappt reicht sie nur unter den Rand; die Größe des iPads richtet sich
   weiter nach svh. */
.anim .hero { padding: 0; height: 330vh; }
.anim .hero .stick {
  position: sticky; top: var(--top); height: calc(100vh - var(--top)); height: calc(100lvh - var(--top));
  display: flex; flex-direction: column; justify-content: flex-start; padding-top: 40px; overflow: hidden;
}
.anim .hero-text { will-change: transform, opacity; }
/* Unter dem iPad stehen Punkte und Bildtext; die 200 px halten ihnen Platz
   frei, damit das iPad auch in einem niedrigen Fenster nichts davon hinausschiebt. */
.anim .showcase { width: min(1040px, 92vw, calc((100svh - var(--top) - 200px) * 1.305)); }
.anim .captions { display: none; }
.caption-now { display: none; }
.anim .caption-now {
  display: block; margin: 14px 0 0; text-align: center;
  font-size: clamp(18px, 2vw, 22px); font-weight: 650; line-height: 1.35; transition: opacity 0.3s;
}
.caption-now span { color: var(--text-2); font-weight: 400; }
.dots { display: none; }
.anim .dots { display: flex; gap: 9px; justify-content: center; margin-top: 18px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); opacity: 0.35; transition: background 0.3s, opacity 0.3s; }
.dots i.on { background: var(--accent); opacity: 1; }

@media (max-width: 760px) {
  .hero { padding-top: 36px; }
  .anim .hero .stick { padding-top: 24px; }
  .anim .showcase { width: 94vw; margin-top: 28px; }
}

/* Drei Geräte, drei Rollen */

.devices { padding: 110px 0; background: var(--bg-alt); }
.section-head { max-width: 760px; margin: 0 0 48px; }
.section-head h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 740; }
.section-head p { font-size: 20px; color: var(--text-2); margin: 0; }
.roles { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 22px; }
.role { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 34px; overflow: hidden; display: flex; flex-direction: column; }
.role .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.role h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 10px; }
.role p { color: var(--text-2); margin: 0; font-size: 17px; }
.role .device { margin-top: auto; padding-top: 30px; }
.role.star { grid-row: span 2; }
.role.star h3 { font-size: 34px; }
.role.star .device { display: flex; justify-content: center; }
.role.star .ipad { width: min(78%, 400px); }
.role.mac-role .device { padding-left: 6%; padding-right: 6%; }
.role.phone-role { flex-direction: row; gap: 26px; align-items: flex-end; }
.role.phone-role .device { flex: 0 0 34%; padding-top: 0; margin-bottom: -60px; }
.role.phone-role blockquote { margin: 0 0 12px; font-size: 21px; line-height: 1.3; font-weight: 650; color: var(--text); }
.together { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.together li { font-size: 16px; color: var(--text-2); }
.together b { display: block; color: var(--text); font-size: 17px; }

@media (max-width: 900px) {
  .roles { grid-template-columns: 1fr; }
  .role.star { grid-row: auto; }
  .together { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .role { padding: 26px; }
  .role.phone-role { flex-direction: column; align-items: stretch; }
  .role.phone-role .device { flex: none; width: 52%; margin: 0 auto -60px; padding-top: 10px; }
}

/* Sammeln und ordnen: erst wie Songs hereinkommen (Kacheln), dann die
   Begriffe der Bibliothek als Liste, Begriff links, Erklärung rechts */
.structure { padding: 100px 0; }
.structure h3.sub-h { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 18px; }
.structure .tiles + h3.sub-h { margin-top: 56px; }
.intake .tile h4 { margin: 0 0 8px; font-size: 18px; }
.terms { margin: 0; max-width: 980px; display: grid; grid-template-columns: 210px 1fr; border-top: 1px solid var(--line); }
.terms dt, .terms dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.terms dt { font-weight: 700; font-size: 19px; line-height: 1.4; padding-right: 24px; }
.terms dt::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; vertical-align: 0.12em;
}
.terms dd { color: var(--text-2); font-size: 17px; }
.find-note { max-width: 980px; margin: 20px 0 0; font-size: 15.5px; color: var(--text-2); }
.term {
  max-width: 980px; margin: 30px 0 0; padding: 18px 22px;
  border-left: 3px solid var(--accent); background: var(--bg-alt); border-radius: 0 14px 14px 0;
  font-size: 16px; color: var(--text-2);
}
.term b { color: var(--text); }
.term code { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
@media (max-width: 700px) {
  .structure { padding: 72px 0; }
  .terms { grid-template-columns: 1fr; }
  .terms dt { border-bottom: 0; padding-bottom: 4px; }
  .terms dd { padding-top: 0; }
}

/* Abschnitte zum Weg eines Songs: Text oben, das iPad groß darunter */

.story { padding: 110px 0; }
.story.alt { background: var(--bg-alt); }
.story .head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; margin-bottom: 56px; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.story h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 740; }
.story .lage { font-size: 20px; color: var(--text-2); margin: 0; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.points li { padding-left: 26px; position: relative; }
.points li::before {
  content: ""; position: absolute; left: 4px; top: 0.6em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.points strong { font-weight: 650; }
.note { font-size: 15px; color: var(--text-2); margin-top: 18px; }
.story .ipad { max-width: 980px; margin: 0 auto; }

@media (max-width: 860px) {
  .story, .devices { padding: 72px 0; }
  .story .head { grid-template-columns: 1fr; margin-bottom: 36px; }
}

/* Über dem Bildschirm: dieselbe Lage wie .screen, aber ohne Beschnitt – eine
   Lupe darf über den Rand hinausragen. Koordinaten darin in Prozent des
   Screenshots, also unabhängig von der Größe, in der das Gerät steht. */

.over { position: absolute; z-index: 3; pointer-events: none; }
.ipad .over { left: 3.202%; top: 4.224%; width: 93.733%; height: 91.774%; }
.ipad.portrait .over { left: 4.002%; top: 3.202%; width: 91.774%; height: 93.733%; }

/* Lupe: ein Ausschnitt in Originalauflösung, größer gezeigt. --x/--y ist ihre
   Mitte, --sx/--sy die Stelle, die sie zeigt; dazwischen ein Trichter. */
.lupe {
  position: absolute; margin: 0; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--ar, 1);
  border-radius: 50%; overflow: hidden; background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(20, 10, 40, 0.1), 0 22px 44px rgba(20, 10, 40, 0.3);
}
.lupe.wide { border-radius: 999px; }
/* Zwei Reihen Kapseln: Die Pille schnitte ihre Ecken ab. */
.lupe.box { border-radius: 22px; }
.lupe img { width: 100%; height: 100%; object-fit: cover; }
.lupe-spot {
  position: absolute; left: var(--sx); top: var(--sy); width: var(--sw, 9%); aspect-ratio: var(--sar, 1);
  transform: translate(-50%, -50%); border-radius: 999px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(20, 10, 40, 0.18), 0 4px 12px rgba(20, 10, 40, 0.25);
}
.lupe-spot.box { border-radius: 12px; }
/* Trichter von der Stelle zur Lupe: Ohne ihn hielt man die Lupe für einen Teil
   der App. Gezeichnet in Prozent der Fläche (viewBox 100 × 100, verzerrt), die
   Striche deshalb ohne Skalierung und der Schatten am <svg> statt an der Linie. */
.lupe-cone {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(20, 10, 40, 0.45));
}
.lupe-cone polygon { fill: rgba(255, 255, 255, 0.3); }
:root.is-dark .lupe-cone polygon { fill: rgba(255, 255, 255, 0.1); }
.lupe-cone line { stroke: #fff; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.anim .lupe, .anim .lupe-spot, .anim .lupe-cone { opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.anim .lupe { transform: translate(-50%, -50%) scale(0.7); transition-delay: 0.25s; }
.anim .lupe-cone { transition-delay: 0.15s; }
.anim .in .lupe, .anim .in .lupe-spot, .anim .in .lupe-cone { opacity: 1; }
.anim .in .lupe { transform: translate(-50%, -50%) scale(1); }

/* Bildunterschrift zur Lupe: unter dem Gerät, in der Spalte der Lupe darüber
   (--left/--right als Anteil der Gerätebreite, aus build_sections.py). Ein
   Innenabstand in Prozent bezöge sich auf die Spalte und nicht aufs Gerät,
   deshalb die Breite von .story .ipad noch einmal. Das Lupen-Zeichen hängt
   links heraus, damit der Text an der Kante der Lupe beginnt. */
.lupe-note {
  --device: min(100%, 980px);
  display: flex; gap: 8px; max-width: 980px; margin: 20px auto 0;
  padding: 0 calc(var(--device) * var(--right, 0)) 0 max(0px, calc(var(--device) * var(--left, 0) - 26px));
  font-size: 15px; line-height: 1.5; color: var(--text-2);
}
.lupe-note svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--text); }
.lupe-note strong { color: var(--text); font-weight: 650; }
@media (max-width: 860px) { .lupe-note { padding: 0; } }

/* Loop im Player: Spur, Füllung und Knauf liegen nachgebaut über dem
   Screenshot (Maße und Farben daraus gemessen) und laufen von A nach B. */
.loopbar { --bg: #f3f4f2; --track: #dbdcda; --fill: #7742b5; }
:root.is-dark .loopbar { --bg: #141912; --track: #2b302a; --fill: #9964d4; }
.loopbar { position: absolute; display: none; background: var(--bg); }
.loopbar.on { display: block; }
.loopbar i { position: absolute; display: block; }
.loopbar .track { left: 1.282%; right: 1.282%; top: 38.3%; height: 20%; border-radius: 99px; background: var(--track); }
.loopbar .fill { left: 1.282%; top: 38.3%; height: 20%; border-radius: 99px; background: var(--fill); width: var(--fillw, 50%); }
.loopbar .knob {
  top: 10%; height: 80%; width: 9.49%; left: var(--knob, 50%); transform: translateX(-50%);
  border-radius: 99px; background: #fff; box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.16);
}

/* Drei Arten des Scrollens, unter dem Player im Abschnitt „Üben“ */
.scroll-ways { margin-top: 90px; }
.scroll-ways h3.sub-h { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; }
.scroll-ways .intro { font-size: 19px; color: var(--text-2); margin: 0 0 30px; max-width: 760px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio .tile h4 { margin: 0 0 8px; font-size: 18px; }
.scroll-ways .after { font-size: 16px; color: var(--text-2); margin: 24px 0 0; max-width: 860px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* PDF mit Pencil: Ebenen in einem SVG (Koordinaten = Punkte des iPad,
   1032 × 1376), jeder Strich deckt sich über eine Maske auf, der Pencil folgt
   seiner Spitze. */
.pencil-scene { position: relative; width: min(100%, 460px); margin: 0 auto; }
.pencil-scene .screen svg { display: block; width: 100%; height: 100%; }
.pencil {
  position: absolute; left: 0; top: 0; width: 78%; height: auto; z-index: 4; pointer-events: none;
  transform-origin: 0 50%; will-change: transform;
  filter: drop-shadow(14px 22px 14px rgba(20, 10, 40, 0.3));
}
.pencil-scene:not(.ready) .pencil { opacity: 0; }

/* Fußpedal: Live-Modus, wie die App blättert (motion.js). Je Song ein Blatt
   von oben bis eine Pedalseite tiefer, darüber Notch und Säule als eigene
   Ebenen (tools/shots/pedal.py misst die Werte nach). */
.pedal-scene { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 10%; isolation: isolate; }
/* Bühnenlicht: Ein schwarzes iPad auf schwarzem Grund verschwände sonst. */
.lights-down .pedal-scene::before, .lights-down .flatlay::before {
  content: ""; position: absolute; inset: -14% -10% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 52% 48% at 50% 42%, rgba(153, 100, 212, 0.26), rgba(153, 100, 212, 0.08) 55%, rgba(153, 100, 212, 0) 75%);
}
/* Das Blatt: 2752 × 3567 px, 1503 px (751,5 pt) tiefer liegt eine Pedalseite. */
.pedal-scene .sheet { position: absolute; inset: 0; background: #000; --dim: 0; --edge: 0; }
.pedal-scene .sheet + .sheet { transform: translateX(100%); }
.pedal-scene .scroll { position: absolute; left: 0; top: 0; width: 100%; }
.pedal-scene .screen .scroll img { display: block; height: auto; }
/* Die Scrollhilfe (PagePositionMarker): 4 pt breit, 3 pt vom Rand, über dem,
   was vor dem Tritt unten stand (824…1012 pt im Blatt). */
.pedal-scene .mark {
  position: absolute; left: 0.218%; width: 0.291%; top: 46.201%; height: 10.541%;
  border-radius: 99px; background: #9964d4; opacity: 0;
}
/* Songwechsel (SheetTurn): Das untere Blatt dunkelt ab, das obere trägt an der
   Kante 16 pt Schatten und im Dunkeln eine helle Linie von 1 pt. */
.pedal-scene .sheet::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim); pointer-events: none; }
.pedal-scene .sheet::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 1.163%; opacity: var(--edge); pointer-events: none;
  background: linear-gradient(to right, transparent 93.75%, rgba(255, 255, 255, 0.25) 0),
    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1925) 65%, rgba(0, 0, 0, 0.55));
}
.pedal-scene .notch, .pedal-scene .column { position: absolute; inset: 0; z-index: 3; }
.pedal-scene .notch + .notch, .pedal-scene .column + .column { opacity: 0; }
/* Mit Beschriftung 16 Einheiten höher als zuvor; die Oberkante bleibt, wo sie
   war, der Zuwachs geht nach unten. */
.footswitch { position: absolute; right: 10%; bottom: -2.4%; width: 24%; z-index: 4; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6)); }
/* Aufgedruckt wie auf einem echten Pedal. Schriftgröße in Einheiten des SVG. */
.footswitch .label { font-size: 14.5px; font-weight: 650; letter-spacing: 0.09em; fill: #9a9aa2; text-anchor: middle; }
.footswitch .cap { transition: transform 0.12s ease; transform-box: fill-box; transform-origin: 50% 50%; }
.footswitch .cap.down { transform: translateY(3px) scale(0.95); }
.footswitch .led { fill: #2a2a2e; transition: fill 0.15s; }
.footswitch .led.on { fill: #7dff8a; filter: drop-shadow(0 0 4px #7dff8a); }

/* Ausdruck: Text über dem Papier im Bühnen-Abschnitt */
.print-text { max-width: 720px; margin: 100px auto 0; text-align: center; }
.print-text h3 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; }
.print-text p { font-size: 18px; color: var(--text-2); margin: 0; }
.print-text + .flatlay { margin-top: 48px; }

/* Ausdruck unter dem iPad: das Papier aus der App (A4), das iPad halb darauf.
   Beim Hinscrollen schaut das Papier unter dem iPad hervor. */
.flatlay { position: relative; max-width: 900px; margin: 72px auto 60px; aspect-ratio: 16 / 10; isolation: isolate; }
.flatlay .paper {
  position: absolute; left: 8%; top: 5%; width: 41%; height: auto; transform: rotate(-7deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 30px 60px rgba(0, 0, 0, 0.55); border-radius: 2px;
}
.flatlay .ipad { position: absolute; width: 41%; left: 46%; top: 2%; transform: rotate(4deg); }
.anim .flatlay .paper { transform: translateX(62%) rotate(1deg); transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; }
.anim .flatlay.in .paper { transform: rotate(-7deg); }
/* Unter der Abbildung und nicht an ihrer Kante: Das gedrehte Blatt ragt mit
   der linken Ecke über den Rand hinaus und stieß sonst an den Text. */
.flatlay figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 30px; text-align: center; font-size: 15px; color: var(--text-2); }

/* Zwischenstück vor der Bühne: Stimmgerät und Metronom, freigestellt und ohne
   Gerät drumherum, so wie sie in der App über dem Blatt schweben. Kacheln aus
   der App: 340 × 300 und 340 × 308 pt, Ecken 24 pt, dunkles Gehäuse in hell
   und dunkel (Views/Tools/WidgetChrome.swift). Unten geht der Abschnitt ins
   Dunkel der Bühne über. */
.interlude {
  --fade: 190px;
  padding: 100px 0 var(--fade);
  background: linear-gradient(to bottom, var(--bg) calc(100% - var(--fade)), color-mix(in srgb, var(--bg), #0b0a0d 10%) calc(100% - var(--fade) * 0.74),
    color-mix(in srgb, var(--bg), #0b0a0d 50%) calc(100% - var(--fade) * 0.42), color-mix(in srgb, var(--bg), #0b0a0d 90%) calc(100% - var(--fade) * 0.16), #0b0a0d);
}
/* Im Dunkeln gibt es nichts abzudunkeln; der Übergang bliebe nur Leerraum. */
:root.is-dark .interlude { --fade: 100px; }
.interlude .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px 72px; align-items: center; }
.interlude h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 740; }
.interlude .lage { font-size: 20px; color: var(--text-2); margin: 0 0 28px; }
.widgets { position: relative; aspect-ratio: 1.22; max-width: 600px; width: 100%; margin: 0 auto; }
/* Im Dunkeln etwas Licht dahinter, wie auf der Bühne: Dunkle Kacheln auf dunklem
   Grund verschwänden sonst. */
:root.is-dark .widgets::before {
  content: ""; position: absolute; inset: -18% -14%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(153, 100, 212, 0.22), rgba(153, 100, 212, 0.07) 55%, rgba(153, 100, 212, 0) 75%);
}
/* Die Kachel ist die Fläche der App-Kachel; ihr Bild reicht mit dem Schatten
   darüber hinaus (tools/shots/tiles.py: Rand 18 / 15 / 18 / 21 pt). Darüber
   liegen die wechselnden Streifen und der Zeiger, Maße in Punkten der Kachel. */
.widgets .widget { position: absolute; width: 57%; }
.widget.tuner { left: 0; top: 0; aspect-ratio: 340 / 300; transform: rotate(-4deg); }
.widget.metronome { right: 0; bottom: 0; aspect-ratio: 340 / 308; transform: rotate(3deg); z-index: 1; }
.widget picture { display: contents; }
.widget img { position: absolute; max-width: none; }
.widget .face { left: -5.294%; width: 110.588%; top: -5%; }
.widget.metronome .face { top: -4.870%; }
.widget .band, .widget .beat { position: absolute; opacity: 0; }
.widget .band.on, .widget .beat.on { opacity: 1; }
.widget .band img, .widget .beat img { position: static; width: 100%; }
.widget .band { left: 7.059%; top: 45.333%; width: 85.882%; }
.widget .beat { left: 30.588%; top: 9.740%; width: 38.824%; }
/* Zeiger: wie in TunerView, 4 pt breit, dreht um (170, 177), nur im
   Skalenfenster sichtbar. Ohne Bewegung steht er grün auf 0. */
.widget .needle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.widget .hand { fill: #35c759; }
.widget .hand.glow { filter: url(#needle-glow); }
.widget #needle-glow feDropShadow { flood-color: #35c759; flood-opacity: 0.8; }
:root.is-dark .widget .hand { fill: #31d158; }
:root.is-dark .widget #needle-glow feDropShadow { flood-color: #31d158; }
.anim .widget { opacity: 0; transition: opacity 0.6s ease, translate 0.9s cubic-bezier(0.2, 0.9, 0.3, 1); }
.anim .widget.tuner { translate: -6% 8%; }
.anim .widget.metronome { translate: 6% 12%; transition-delay: 0.15s; }
.anim .widgets.in .widget { opacity: 1; translate: 0 0; }
@media (max-width: 860px) {
  .interlude { --fade: 150px; padding-top: 72px; }
  :root.is-dark .interlude { --fade: 72px; }
  .interlude .wrap { grid-template-columns: 1fr; }
  .interlude .text { order: -1; }
}

/* Ein Abschnitt mit Bild und Text nebeneinander (PDF). */
.feature { padding: 110px 0; background: var(--bg-alt); }
.feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 72px; align-items: center; }
.feature h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 740; }
.feature .lage { font-size: 20px; color: var(--text-2); margin: 0 0 28px; }
@media (max-width: 860px) {
  .feature { padding: 72px 0; }
  .feature .wrap { grid-template-columns: 1fr; }
  .flatlay { aspect-ratio: 4 / 3.4; }
  .flatlay .paper { width: 50%; left: 2%; }
  .flatlay .ipad { width: 50%; left: 46%; }
}

/* Platzhalter für Bild oder Video, das noch aufgenommen werden muss.
   Verschwindet, sobald das Medium da ist (siehe README, Aufnahmeliste). */

.todo {
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 28px; min-height: 200px; width: 100%; font-size: 15px;
}
.todo b { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.screen .todo { border: 0; border-radius: 0; height: 100%; min-height: 0; padding: 8%; }

/* Für wen: Gruppen als Kacheln, darunter ehrlich, wann es weniger passt */
.audience { padding: 100px 0; }
.audience .tiles { margin-bottom: 22px; }
.not-for { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; }
.not-for h3 { margin: 0 0 12px; font-size: 19px; }
.not-for ul { margin: 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 8px; font-size: 16.5px; }
@media (max-width: 760px) { .audience { padding: 72px 0; } }

/* Außerdem: weitere Stärken als Kacheln, darunter der Standard als Liste */

.more { padding: 100px 0; }
.more.alt-bg { background: var(--bg-alt); }
.more h2 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.02em; margin: 0 0 10px; }
.more .sub { color: var(--text-2); margin: 0 0 40px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tile h3 { margin: 0 0 8px; font-size: 18px; }
.tile p { margin: 0; color: var(--text-2); font-size: 16px; }
.tile .badge { display: inline-block; font-size: 12px; font-weight: 650; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; margin-top: 12px; }

.cols { columns: 3 260px; column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.more .cols { margin-top: 40px; }
.cols li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.cols li span { color: var(--text-2); }

/* Schluss */

.closing { padding: 120px 0; text-align: center; }
.closing .wrap { max-width: 760px; }
.closing .mark { width: 54px; height: auto; margin: 0 auto 26px; color: var(--accent); }
.closing h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 16px; }
.closing p { color: var(--text-2); font-size: 20px; margin: 0 0 30px; }
.fine { list-style: none; padding: 0; margin: 40px auto 0; font-size: 14px; color: var(--text-2); display: grid; gap: 6px; }

/* Fuß */

.foot { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 14px; color: var(--text-2); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.foot a { color: var(--text-2); }
.foot .copy { margin-right: auto; }

/* Einfache Textseiten (Impressum, Support) */

.page { padding: 64px 0 96px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: 40px; letter-spacing: -0.02em; margin: 0 0 24px; }
.page h2 { font-size: 22px; margin: 36px 0 8px; }
.page p, .page li { color: var(--text-2); }
.page .todo { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}