/* Die Webseite von ZQ Sound — dieselben Farben wie die Programme: dunkel,
   Orange für das Wichtigste, Cyan für „läuft". Keine Schriften und nichts
   von fremden Servern: so fragt der Browser nur hier an, und es braucht
   keinen Cookie-Hinweis.

   Gestaltung (23. Oktober 2026): ruhig und groß wie die Produktseiten
   großer Hardware-Hersteller — viel Dunkelraum, sehr große, eng gesetzte
   Überschriften, kurze Sätze, große Bilder mit weichen Schatten. Orange
   nur für das, was man anklicken soll; alles andere in Grautönen, damit
   das Orange auffällt. Startseite, englische Seite und Unterseiten teilen
   sich dieses eine Stylesheet. */

:root {
  /* Die Farben genau wie in X5Styleworks (Source/UI/Theme.h) und im Logo
     (Nutzer, 23. Oktober 2026: „keine Schätzwerte"). Wer eine Farbe
     braucht, nimmt eine von hier — so sehen Seite, App und Bildschirmfotos
     gleich aus. Kontraste auf --bg: --text 15,6:1, --text-2 6,8:1,
     --text-3 5,7:1, --accent 8,7:1, --cyan 9,4:1. */
  --bg: #0f0f0f;            /* App: background */
  --bg-raised: #171717;     /* App: panel — Karten, Kacheln */
  --bg-raised-2: #1c1c1c;   /* App: rollBackground — zweite Fläche */
  --bg-raised-3: #242424;   /* App: surface — Knöpfe und Felder */
  --roll-key: #161616;      /* App: Zeilen der schwarzen Tasten im Piano Roll */
  --line: rgba(255, 255, 255, .10);   /* App: border (0x1affffff) */
  --line-strong: #3a3a3a;   /* App: Rand von Auswahlfeldern und Menüs */
  --text: #e8e8e8;          /* App: text */
  --text-2: #9a9a9a;        /* App: glyph — Fließtext neben Überschriften */
  --text-3: #8c8c8c;        /* App: caption — Kleingedrucktes */
  --accent: #ff9500;        /* App: selection — Orange heißt „ausgewählt" */
  --accent-hover: #ff9f17;  /* App: selection.brighter (0.1f) */
  --on-accent: var(--bg);   /* Schrift auf Orange: 8,7:1 */
  --cyan: #32c8d2;          /* App: on — eingeschaltet, läuft */
  /* Rot der Aufnahme. Auf --bg nur 4,2:1 — darum nie als Schriftfarbe für
     Text, nur als Markierung daneben. */
  --record: #d93b30;
  --logo-red: #cd0406;      /* Logo: Mittelwert des roten X */
  --silver: #d0d1d4;        /* Logo: Mittelwert des Silbers */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --space: clamp(96px, 12vw, 168px);
  --radius-l: 28px;
  --radius-m: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Höhe der klebenden Leiste; auf dem Handy kommt die Zeile mit den
     Abschnitten dazu (unten). Sprungziele halten diesen Abstand. */
  --top-height: 52px;
  /* Drei Schatten übereinander: ein naher, harter für die Kante und zwei
     weite, weiche — so „schwebt" das Fenster, statt einen Rand zu haben. */
  --shadow-window: 0 2px 6px rgba(0, 0, 0, .45), 0 30px 60px -12px rgba(0, 0, 0, .6),
                   0 70px 140px -30px rgba(0, 0, 0, .55);
  /* Kacheln wie die Seitenleisten der App: flach in --bg-raised, ein
     feiner Rand und oben eine Spur Licht. */
  --tile-bg: var(--bg-raised);
  --tile-edge: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .05);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Der Abstand oben hält Sprungziele (#preis …) unter der klebenden Leiste frei. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-height) + 24px);
       -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Spalte über die ganze Höhe: auf kurzen Unterseiten (Kaufen, Impressum)
   steht der Fuß dann unten statt mitten im Fenster.
   overflow-wrap: lange Wörter und E-Mail-Adressen brechen auf schmalen
   Handys um, statt die Seite seitlich zu verbreitern. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
       margin: 0; background: var(--bg); color: var(--text);
       font: 17px/1.55 var(--font); letter-spacing: -.011em; overflow-wrap: break-word;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body > main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
strong { font-weight: 600; }
/* Wörter mit Bindestrich, die nicht am Strich umbrechen sollen. */
.nobr { white-space: nowrap; }
/* Überschriften gleichmäßig umbrechen, Absätze ohne einzelnes Wort in der
   letzten Zeile — ältere Browser ignorieren das einfach. */
h1, h2, h3, .lead, summary { text-wrap: balance; }
p { text-wrap: pretty; }
/* Sichtbarer Fokus für alle, die mit der Tastatur unterwegs sind. Die Form
   folgt den runden Ecken des Elements von selbst. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(255, 149, 0, .35); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Unsichtbar, bis man mit Tab hineinkommt: springt über den Kopf. */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 999px;
        background: var(--accent); color: var(--on-accent); font-weight: 600; transition: top .2s; }
.skip:focus { top: 10px; text-decoration: none; }

/* ---------- Kopf ---------- */
/* Milchglas: der Inhalt scheint beim Scrollen verschwommen durch. Ohne
   backdrop-filter wird die Leiste fast deckend, damit Text lesbar bleibt.
   Der Grund ist --bg (15, 15, 15) mit Deckkraft. */
.top { position: sticky; top: 0; z-index: 50; background: rgba(15, 15, 15, .94);
       border-bottom: 1px solid var(--line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top { background: rgba(15, 15, 15, .72);
         -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: var(--top-height); }
/* gap statt Leerzeichen: in einem Flex-Feld wird „ZQ" zu einem eigenen
   Stück, und dessen Leerzeichen am Ende fällt weg — ohne gap stünde dort
   „ZQSound". Der Name ist „ZQ Sound", mit Leerzeichen. */
.brand { display: inline-flex; align-items: center; gap: .28em; min-height: 44px;
         color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.top nav { flex: 1; display: flex; justify-content: center; gap: clamp(20px, 3vw, 40px); }
/* Polster plus gleich großer negativer Rand: die Fläche zum Antippen
   wächst auf mindestens 44 px, der sichtbare Abstand bleibt. */
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px;
             color: var(--text-2); font-size: 14px;
             white-space: nowrap; transition: color .2s; }
.top nav a:hover { color: var(--text); text-decoration: none; }
.top .actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
/* Klein und ruhig wie auf solchen Seiten üblich — die Fläche zum Antippen
   ist trotzdem 44 px hoch (::after reicht über den Knopf hinaus). */
.cta { position: relative; display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--accent);
       color: var(--on-accent); font-size: 13px; font-weight: 600; line-height: 1.45; white-space: nowrap; transition: background .2s; }
.cta::after { content: ""; position: absolute; inset: -8px -6px; }
.cta:hover { background: var(--accent-hover); text-decoration: none; }
/* Der Sprachumschalter: „EN" bzw. „DE" ist ein Feld von 44 × 44 px; der
   negative Rand nimmt den Leerraum wieder heraus, damit es optisch eng
   bleibt. */
.lang { display: flex; align-items: center; color: var(--text-3); font-size: 13px; white-space: nowrap; }
.lang strong { color: var(--text); font-weight: 600; }
.lang > span { padding: 0 6px; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
          margin: 0 -12px; color: var(--text-2); }
.lang a:hover { color: var(--text); text-decoration: none; }
/* Auf Unterseiten zeigt die Navigation, wo man ist. */
.top nav a[aria-current="page"] { color: var(--text); }

/* ---------- Knöpfe ---------- */
/* Pillen wie überall auf solchen Seiten; gilt auch für <button> im
   Kontaktformular, darum Schrift und Rand ausdrücklich gesetzt. Die Fläche
   wie die Knöpfe der App: --bg-raised-3 mit --line-strong. */
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px;
          border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-raised-3);
          color: var(--text); font: 600 17px/1.2 var(--font); letter-spacing: -.01em; text-align: center; cursor: pointer;
          transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.button:hover { border-color: var(--text-3); text-decoration: none; }
.button:active { transform: scale(.98); }
.button.primary { background: var(--accent); color: var(--on-accent); border-color: transparent;
                  box-shadow: 0 10px 30px -10px rgba(255, 149, 0, .6); }
.button.primary:hover { background: var(--accent-hover); }

/* ---------- Bühne ---------- */
.hero { position: relative; overflow-x: clip; text-align: center;
        padding: clamp(48px, 6vw, 80px) 0 clamp(16px, 3vw, 40px); }
/* Das Logo liegt auf Schwarz; „lighten" lässt das Schwarz im Hintergrund
   aufgehen, so gibt es keine sichtbare Bildkante. */
.hero .logo { width: min(400px, 76%); margin: 0 auto clamp(20px, 2.6vw, 32px); mix-blend-mode: lighten; }
.hero h1 { margin: 0 auto; font-size: clamp(28px, 8.6vw, 88px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.hero h1 .line { display: block; }
.hero .lead { max-width: 640px; margin: 24px auto 0; color: var(--text-2);
              font-size: clamp(19px, 2vw, 24px); line-height: 1.4; letter-spacing: -.015em; }
.hero .buttons { margin-top: 36px; }
.hero .note { margin: 18px 0 0; color: var(--text-3); font-size: 16px; }
/* Die Oberkante des Fensters soll auf üblichen Bildschirmen schon zu sehen
   sein — sie lädt zum Weiterscrollen ein. */
.hero .stage { margin-top: clamp(48px, 6vw, 72px); }

/* Das Fenster mit dem Bildschirmfoto: feiner heller Rand als Ring (nimmt
   keinen Platz), weicher großer Schatten. */
.stage { position: relative; isolation: isolate; }
.window { margin: 0; overflow: hidden; border-radius: clamp(10px, 1.2vw, 16px); background: var(--bg);
          box-shadow: 0 0 0 1px var(--line), var(--shadow-window); }
.window picture, .window img { display: block; width: 100%; height: auto; }
/* Ein leichtes Leuchten hinter dem Fenster — Orange wie die App, mit einem
   Hauch Cyan (beide genau --accent und --cyan, nur durchscheinend). Liegt
   hinter dem Fenster (isolation an .stage). */
.stage.glow::before { content: ""; position: absolute; z-index: -1; inset: 2% -5% -6%; pointer-events: none;
                      background: radial-gradient(50% 50% at 50% 45%, rgba(255, 149, 0, .30), transparent 75%),
                                  radial-gradient(30% 40% at 92% 80%, rgba(50, 200, 210, .18), transparent 70%);
                      filter: blur(56px); }
.stage.glow.cool::before { background: radial-gradient(50% 45% at 30% 60%, rgba(50, 200, 210, .16), transparent 72%),
                                       radial-gradient(45% 45% at 72% 40%, rgba(255, 149, 0, .14), transparent 72%); }

/* ---------- Abschnitte ---------- */
/* overflow-x: clip schneidet nur seitlich ab (Leuchten am Handy), lässt
   die Schatten nach unten aber frei und macht keinen eigenen Scrollbereich. */
.section { padding: var(--space) 0 0; overflow-x: clip; }
main > .section:last-child { padding-bottom: var(--space); }
.section-head { max-width: 820px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.01em; }
.section h2 { margin: 0; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -.032em; font-weight: 700; }
/* Grauer Absatz, das Wichtigste darin weiß — liest sich in einem Blick. */
.section .lead { margin: 22px 0 0; color: var(--text-2); font-size: clamp(19px, 2vw, 24px); line-height: 1.42; letter-spacing: -.015em; }
.section-head.center .lead { margin-inline: auto; max-width: 700px; }
.lead strong { color: var(--text); }

/* Bild und Text nebeneinander; .flip: Bild links. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
/* Neben einem Bild ist die Spalte schmal — etwas kleiner, damit die
   Überschrift in zwei Zeilen passt statt in drei. */
.split h2 { font-size: clamp(34px, 4.3vw, 52px); }
.story-text .lead { margin-top: 20px; }

/* ---------- Kacheln (neun Funktionen) ---------- */
/* Sechs Spalten, damit Kacheln halb, ein Drittel oder zwei Drittel breit
   sein können — gleich große Kacheln wirken wie eine Liste. */
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; grid-column: span 3; display: flex; flex-direction: column; min-height: 300px; overflow: hidden;
        padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-l); background: var(--tile-bg); box-shadow: var(--tile-edge); }
.tile.span-2 { grid-column: span 2; }
.tile.span-4 { grid-column: span 4; }
/* Text immer unten, das Bildchen oben — so liegen die Überschriften einer
   Reihe auf einer Linie, egal wie lang der Text ist. */
.tile h3 { margin: auto 0 8px; padding-top: 28px; font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.022em; font-weight: 700; }
.tile p { margin: 0; color: var(--text-2); font-size: 17px; line-height: 1.45; }
.icon { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke: none; }
.tile .icon { color: var(--accent); }
/* Das Programmbild leuchtet im Rot des Logos. */
.tile .app-icon { width: 72px; height: 72px; filter: drop-shadow(0 10px 24px rgba(205, 4, 6, .3)); }
/* Wo es geht: jede Kachel belegt drei Zeilen des äußeren Rasters (Bild,
   Überschrift, Text). So stehen die Überschriften einer Reihe genau auf
   einer Linie, auch wenn die Texte verschieden lang sind. */
@supports (grid-template-rows: subgrid) {
  .tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-height: 0; }
  /* Unten an der Zeile: einzeilige Überschriften rücken an ihren Text. */
  .tile h3 { margin-top: 0; align-self: end; }
  .tile > :first-child { align-self: start; }
}

/* Große Zahlen in Silber wie im Logo: oben hell, unten dunkler, aus den
   Tönen von Logo und App — Orange bleibt den Knöpfen. */
.stat { display: flex; gap: 32px; }
.stat b { display: block; color: var(--silver); font-size: clamp(56px, 6vw, 80px); line-height: .95; letter-spacing: -.045em; font-weight: 700; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat b, .steps .step::before { background: linear-gradient(180deg, var(--text) 0%, var(--silver) 45%, var(--text-2) 100%);
                                  -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.stat small { display: block; margin-top: 8px; color: var(--text-3); font-size: 14px; font-weight: 600; letter-spacing: 0; }

/* Eine kleine Piano Roll als Bild für „Schreiben wie in deiner DAW" —
   gezeichnet wie der Piano Roll der App (Source/UI/PianoRoll.cpp): Grund
   --bg-raised-2, Zeilen der schwarzen Tasten --roll-key, Taktstriche weiß
   34 %, Schläge 15 %, jeder zweite Takt eine Spur heller. 16 Spalten (vier
   Takte zu vier Schlägen), 6 Zeilen. Nur Schmuck. */
.roll { position: relative; height: clamp(150px, 16vw, 190px); border-radius: 14px; overflow: hidden;
        background:
          linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px) 0 0 / 25% 100%,
          linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 6.25% 100%,
          linear-gradient(90deg, transparent 25%, rgba(255,255,255,.018) 25%, rgba(255,255,255,.018) 50%,
                                 transparent 50%, transparent 75%, rgba(255,255,255,.018) 75%),
          linear-gradient(180deg, var(--bg-raised-2) 50%, var(--roll-key) 50%) 0 0 / 100% calc(100% / 3);
        box-shadow: inset 0 0 0 1px var(--line); }
/* Noten wie in der App: Farbe nach Tonhöhe (pitchColour, über den
   Quintenzirkel), Deckkraft nach Anschlag — hier 86 % wie im Bild
   editor.webp —, Rand in der Farbe × 0,625 (darker (0.6f)), Ecken 2 px. */
.roll span { position: absolute; left: calc(var(--x) * 6.25% + 1px); top: calc(var(--y) * 100% / 6 + 4px);
             width: calc(var(--w) * 6.25% - 1px); height: calc(100% / 6 - 8px); border-radius: 2px;
             background: var(--n); box-shadow: inset 0 0 0 1px var(--n); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .roll span { background: color-mix(in srgb, var(--n) 86%, transparent);
               box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n) 62.5%, #000); }
}
/* Buchstabe der Klasse = Farbe, Ton dahinter: o = G, g = E, r = C,
   y = D, l = A, p = F, c = H — die Töne aus editor.webp. */
.roll .o { --n: #eb9846; } .roll .g { --n: #46eb46; } .roll .r { --n: #eb4646; }
.roll .y { --n: #ebeb46; } .roll .l { --n: #98eb46; } .roll .p { --n: #eb4698; }
.roll .c { --n: #46eb98; }
/* Die Abspiellinie in --cyan wie in der App. */
.roll .playhead { position: absolute; top: 0; bottom: 0; left: 38%; width: 2px; background: var(--cyan);
                  box-shadow: 0 0 12px rgba(50, 200, 210, .8); }

/* ---------- Preis ---------- */
.price-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); max-width: 1040px; margin: 0 auto;
              overflow: hidden; border-radius: 32px; background: var(--tile-bg);
              box-shadow: var(--tile-edge); }
.price-main { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
              padding: clamp(32px, 5vw, 64px); }
/* Ein schwaches Orange hinter dem Preis zieht den Blick dorthin. */
.price-main::before { content: ""; position: absolute; z-index: -1; inset: -30% 10% 30% -30%; pointer-events: none;
                      background: radial-gradient(closest-side, rgba(255, 149, 0, .16), transparent); filter: blur(30px); }
.price-main h3 { margin: 0; color: var(--text-2); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.amount { margin: 10px 0 0; font-size: clamp(76px, 10vw, 120px); line-height: 1; letter-spacing: -.05em; font-weight: 700; white-space: nowrap; }
/* Bis wann der Einführungspreis gilt und was danach kommt — gut lesbar
   gleich unter dem Preis, kein durchgestrichener „statt"-Preis. */
.until { margin: 16px 0 0; color: var(--accent); font-weight: 600; }
.price-note { margin: 8px 0 32px; color: var(--text-2); }
/* Die Fakten auf der zweiten Fläche der App — eine Stufe heller. */
.price-facts { list-style: none; margin: 0; display: grid; align-content: center; gap: 30px;
               padding: clamp(32px, 5vw, 64px); background: var(--bg-raised-2); border-left: 1px solid var(--line); }
.price-facts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
.price-facts .icon { width: 28px; height: 28px; color: var(--text-2); margin-top: 1px; }
.price-facts h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.015em; }
.price-facts p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.5; }

/* ---------- Laden ---------- */
/* Große Ziffern über einer feinen Linie statt Kreisen — ruhiger. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: clamp(24px, 4vw, 56px); counter-reset: step; }
.step { counter-increment: step; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.step::before { content: counter(step); display: block; margin-bottom: 18px; color: var(--silver);
                font-size: clamp(52px, 5.5vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.step h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.step p { margin: 0; color: var(--text-2); }

.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(64px, 8vw, 104px); }
.download { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 4vw, 48px);
            border-radius: var(--radius-l); background: var(--tile-bg); box-shadow: var(--tile-edge); }
.download h3 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.025em; }
.download .sys { margin: 8px 0 28px; color: var(--text-2); font-size: 16px; }
.download .hint { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 16px; line-height: 1.55; }

/* ---------- Fragen ---------- */
/* Eine ruhige Liste mit Haarlinien statt Kästen; das Plus dreht sich beim
   Öffnen zum Kreuz. */
.faq { max-width: 860px; margin: 0 auto; border-bottom: 1px solid var(--line); }
details { border-top: 1px solid var(--line); }
details summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 20px 0;
                  list-style: none; cursor: pointer; font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; letter-spacing: -.015em; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--text-2);
                         background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
                                     linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
                         transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details summary:hover::after { color: var(--text); }
details summary:focus-visible { outline-offset: 6px; border-radius: 6px; }
details p { margin: -4px 0 26px; max-width: 700px; color: var(--text-2); }

/* ---------- Unterseiten: Rechtliches, Kontakt, Kaufen ---------- */
/* Eine ruhige Textspalte in Lesebreite (etwa 70 Zeichen). Die Überschrift
   groß und eng wie auf der Startseite, die Abschnitte darunter klein und
   mit einer Haarlinie getrennt — so findet man in langen Texten (AGB,
   Datenschutz) schnell die Stelle. */
.legal { max-width: 720px; padding: clamp(56px, 8vw, 112px) 0 clamp(80px, 10vw, 144px); }
/* Die Größe folgt auf dem Handy der Breite: „Datenschutzerklärung" ist ein
   Wort und muss in eine Zeile passen (sonst bräche es mitten im Wort), und
   „Widerruf und Erstattung" soll nicht mit einem Wort allein enden. */
.legal h1 { margin: 0 0 clamp(28px, 4vw, 44px); font-size: clamp(28px, calc((100vw - 2 * var(--gutter)) / 11), 64px);
            line-height: 1.05; letter-spacing: -.032em; font-weight: 700; hyphens: manual; }
.legal h2 { margin: clamp(36px, 5vw, 48px) 0 12px; padding-top: clamp(22px, 3vw, 28px); border-top: 1px solid var(--line);
            font-size: clamp(20px, 2vw, 22px); line-height: 1.3; letter-spacing: -.015em; }
/* Gleich unter der großen Überschrift braucht es keine Linie. */
.legal h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p, .legal li { color: var(--text); line-height: 1.65; }
.legal p { margin: 0 0 16px; }
/* Ein Hinweis, der nicht überlesen werden soll: „Erst testen, dann kaufen". */
.legal .notice { padding: 16px 20px; border-left: 3px solid var(--accent); border-radius: 12px; background: var(--bg-raised); }
.consent { display: grid; gap: 18px; margin-top: 8px; }
.consent .check { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; cursor: pointer; }
.consent .check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.consent .button { justify-self: start; }
.consent .button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.legal li + li { margin-top: 8px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 1.3em; }
.legal li::marker { color: var(--text-3); }
.legal a:not(.button) { text-decoration: underline; text-decoration-color: rgba(255, 149, 0, .45);
                        text-decoration-thickness: 1px; text-underline-offset: .18em; }
.legal a:not(.button):hover { text-decoration-color: currentColor; }
.muted { color: var(--text-2); }
.hint { color: var(--text-2); font-size: 16px; }
.legal .hint, .legal .muted { color: var(--text-2); }
.todo { padding: 12px 16px; border: 1px solid var(--accent); border-radius: 12px; background: rgba(255, 149, 0, .12); color: var(--accent); }

/* Die Kopfzeile einer Unterseite, die keine Rechtstexte hat (Kontakt,
   Kaufen): Augenbraue und grauer Absatz wie auf der Startseite. */
.page-head .eyebrow { margin-bottom: 10px; color: var(--accent); }
/* Kurze Überschriften („Schreib uns.") so groß wie die der Startseite. */
.page-head h1 { margin-bottom: 0; font-size: clamp(34px, 5.6vw, 64px); }
.page-head .lead { margin: 20px 0 0; color: var(--text-2); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; letter-spacing: -.015em; }
.page-head .lead strong { color: var(--text); }

/* Kontaktformular: eine Karte wie die Kacheln, die Felder darin wie die
   Eingabefelder der App (--bg mit --line-strong), Fokus in Orange. Schrift
   17 px — unter 16 px vergrößern manche Handys die Seite beim Tippen. */
.contact { display: grid; gap: 22px; margin: clamp(32px, 5vw, 48px) 0 24px; padding: clamp(24px, 4vw, 40px);
           border-radius: var(--radius-l); background: var(--tile-bg); box-shadow: var(--tile-edge); }
.contact label { display: grid; gap: 8px; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.contact input, .contact textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-strong);
                                    border-radius: 14px; background: var(--bg); color: var(--text);
                                    font: 400 17px/1.5 var(--font); letter-spacing: -.011em;
                                    transition: border-color .2s, box-shadow .2s; }
.contact textarea { min-height: 180px; resize: vertical; }
.contact input:hover, .contact textarea:hover { border-color: var(--text-3); }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 149, 0, .2); }
/* Rot erst, wenn jemand schon getippt und wieder verlassen hat — nicht
   gleich beim Öffnen der Seite. */
.contact input:user-invalid, .contact textarea:user-invalid { border-color: var(--record); }
.contact .send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.contact button:disabled { opacity: .6; cursor: default; }
.contact .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Antwort unter dem Knopf: Erfolg in --cyan (wie „läuft" in der App),
   Fehler in Schrift --text mit rotem Strich davor — Rot als Schrift wäre
   auf dem dunklen Grund zu schwach (4,2:1). */
.said { min-height: 1.5em; margin: 0; color: var(--cyan); font-weight: 600; }
/* Leer ohne Höhe, aber nicht ausgeblendet: sonst kündigt ein
   Bildschirmleser die Antwort nicht an (role="status"). */
.said:empty { min-height: 0; }
.send .said { flex: 1 1 200px; }
.said.error { padding-left: 14px; border-left: 3px solid var(--record); color: var(--text); font-weight: 500; }

/* Kaufen: nur Überschrift und eine Zeile — die Kasse legt sich darüber. */
.legal.buy { max-width: 640px; }
.buy #message { color: var(--text-2); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; }
.buy #after { color: var(--text); }

/* ---------- Fuß ---------- */
/* Die Links 44 px hoch — auf dem Handy liegen sie in Reihen untereinander
   und sollen sich nicht gegenseitig im Weg sein. */
footer { padding: 20px 0 36px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
footer .grow { flex: 1; min-height: 44px; display: flex; align-items: center; }
footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; color: var(--text-2); }
footer a:hover { color: var(--text); text-decoration: none; }
footer a[aria-current="page"] { color: var(--text); }

/* ---------- Einblenden ---------- */
/* Verdeckt wird nur, was seite.js mit „pending" markiert — ohne Skript
   bleibt alles sichtbar. Die Bühne bekommt einen kurzen Auftritt, aber nur
   mit der Klasse „motion", die ebenfalls nur das Skript setzt. */
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.pending { opacity: 0; transform: translateY(36px); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rise-stage { from { opacity: 0; transform: translateY(48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes playhead { from { left: 0; } to { left: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .motion .hero .rise { animation: rise 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms); }
  .motion .hero .rise-stage { animation: rise-stage 1.4s var(--ease) .35s both; }
  .motion .roll .playhead { animation: playhead 9s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .button, .skip, .cta, details summary::after, .contact input, .contact textarea { transition: none; }
  .reveal.pending { opacity: 1; transform: none; }
}
@media print {
  .top, .skip { position: static; }
  .reveal.pending { opacity: 1; transform: none; }
}

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile.span-2, .tile.span-3 { grid-column: span 1; }
  .tile.span-4 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Gestapelt erst der Text, dann das Bild — wie bei den übrigen Abschnitten. */
  .split.flip > div:not(.stage) { order: -1; }
  .price-card { grid-template-columns: minmax(0, 1fr); }
  .price-facts { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 734px) {
  /* Auf dem Handy: oben Name, „Testen" und Sprache; die Abschnitte als
     zweite Zeile darunter, über die ganze Breite verteilt — passt sie
     einmal nicht (große Schrift), lässt sie sich seitlich wischen, statt
     die Seite zu verbreitern. */
  :root { --top-height: 97px; }
  .top .wrap { flex-wrap: wrap; gap: 0 16px; min-height: 0; }
  .top .brand { min-height: 52px; }
  .top .actions { gap: 22px; }
  .cta { padding: 7px 16px; font-size: 14px; }
  .cta::after { inset: -5px -6px; }
  .lang { font-size: 14px; }
  .top nav { order: 3; flex: 0 0 auto; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter));
             padding: 0 var(--gutter); justify-content: space-between; gap: 20px; overflow-x: auto;
             border-top: 1px solid var(--line); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { font-size: 15px; }

  .bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile.span-4 { grid-column: auto; }
  .tile { min-height: 0; border-radius: 24px; }
  .steps, .downloads { grid-template-columns: minmax(0, 1fr); }
  .downloads { gap: 14px; }
  .hero .buttons .button { flex: 1 1 100%; max-width: 340px; }
  /* Die großen Bildschirmfotos zeigen ein ganzes Fenster; auf dem Handy
     wären Noten und Regionen darin winzig. Darum dort höher geschnitten
     (5 : 4): die volle Höhe mit Titelleiste bleibt, links und rechts
     fällt etwas weg — die Mitte mit Noten bzw. Regionen wird größer.
     --focus am Bild sagt, welcher Teil bleibt (0 % = linker Rand). */
  .window.crop img { aspect-ratio: 5 / 4; object-fit: cover; object-position: var(--focus, 50%) 50%; }
  /* Auf dem Handy reicht ein kürzerer Schatten — der lange läge sonst
     über dem nächsten Absatz. */
  .window { box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, .45), 0 24px 48px -16px rgba(0, 0, 0, .6); }
  .stage.glow::before { inset: 0 -2% -4%; filter: blur(40px); }
  .price-card { border-radius: 24px; }
  .download .button, .price-main .button { align-self: stretch; }
  .contact button { flex: 1 1 100%; }
  footer .grow { flex-basis: 100%; }
  footer .wrap { gap: 0 20px; }
}
/* Handy quer: wenig Höhe. Die Überschrift richtet sich dann auch nach der
   Höhe, damit Logo, Titel und Knöpfe zusammen ins Bild passen. */
/* Gemessen bei 844 × 390: mit den Abständen von oben lagen die Knöpfe ganz
   unter dem Rand — darum hier Logo kleiner und alles enger. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-top: 24px; }
  .hero .logo { width: min(220px, 40%); margin-bottom: 14px; }
  .hero h1 { font-size: clamp(32px, 10vh, 56px); }
  .hero .lead { margin-top: 14px; }
  .hero .buttons { margin-top: 20px; }
  /* Quer ist Platz genug für beide Knöpfe nebeneinander (unter 734 px
     Breite stünden sie sonst untereinander wie am Handy hochkant). */
  .hero .buttons .button { flex: 0 1 auto; }
  .legal { padding-top: 40px; }
}