/* {{APP}} — Website. Eine Datei, keine Abhängigkeiten, kein JavaScript.

   Farben: die App hält Terracotta für DATEN frei und lässt Interaktion neutral. Auf der
   Website gibt es kein System-Blau zu erben, darum ist der Primärknopf Graphit und
   Terracotta bleibt Akzent (Kapitelmarken, Zahlen, Hervorhebungen). Der Grundton ist warm
   statt reinweiss — das trägt die Wärme, die sonst über Knopffarben käme.

   Hell und dunkel kommen aus denselben Tokens; jede Farbe wird auf :root definiert und im
   Dunkel-Block nur umdefiniert. */

:root {
  --bg: #fbfaf8;
  --bg-tint: #f2efea;
  --bg-deep: #16150f;
  --card: #ffffff;
  --fg: #1c1b1a;
  --fg-2: #56534e;
  --fg-3: #6f6c67;
  --fg-on-deep: #f7f4ee;
  --fg-on-deep-2: #b8b2a6;
  --line: rgba(28, 27, 26, 0.1);
  --line-soft: rgba(28, 27, 26, 0.055);
  --terra: #b5552e;
  --terra-soft: rgba(181, 85, 46, 0.1);
  --btn: #1c1b1a;
  --btn-fg: #ffffff;
  /* Zwei Lagen mit klarer Aufgabe: eine dichte, kurze Lage setzt die Kante, eine weite
     und blasse gibt Tiefe. Ein einzelner grosser Weichzeichner sieht aus wie Nebel. */
  --shadow-s: 0 1px 2px rgba(28, 27, 26, 0.06), 0 4px 10px -6px rgba(28, 27, 26, 0.1);
  /* Screenshot-Schatten: als drop-shadow-FILTER, nicht als box-shadow — siehe .shot img. */
  --shot-shadow: drop-shadow(0 14px 26px rgba(28, 27, 26, 0.22));
  --radius: 16px;
  --radius-l: 22px;
  --max: 1140px;
  --max-narrow: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f11;
    --bg-tint: #17171a;
    /* Im Hellen setzt sich das Band ab, weil es dunkel ist. Im Dunkeln muss es dafür
       HELLER und wärmer werden als der Grund, sonst verschwindet der Abschnitt. */
    --bg-deep: #1e1a16;
    --card: #1a1a1d;
    --fg: #f2f0ec;
    --fg-2: #a8a49d;
    --fg-3: #8d8981;
    --fg-on-deep: #f2f0ec;
    --fg-on-deep-2: #9c978e;
    --line: rgba(255, 255, 255, 0.11);
    --line-soft: rgba(255, 255, 255, 0.06);
    --terra: #e0906e;
    --terra-soft: rgba(224, 144, 110, 0.14);
    --btn: #f2f0ec;
    --btn-fg: #14140f;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 10px -6px rgba(0, 0, 0, 0.5);
    --shot-shadow: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
/* Kurz genug, dass es niemand als Animation wahrnimmt, lang genug, dass ein Hover nicht
   schnappt. Wer Bewegung abgestellt hat, bekommt keine. */
a, .btn, .tile, summary { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, opacity 120ms ease; }
@media (prefers-reduced-motion: reduce) {
  a, .btn, .tile, summary { transition: none; }
}
/* Unterstrichen wird nur, was im FLIESSTEXT steht. Ein pauschales `li a` erwischte sonst
   Navigation und Fusszeile mit. */
p a, .prose a, .split-text li a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:hover, .prose a:hover, .split-text li a:hover { text-decoration-thickness: 2px; }
.foot-grid a:hover, .nav a:hover, .subnav a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; height: auto; display: block; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 600; color: var(--fg); }
/* Preise und Beträge auf gleicher Laufweite, sonst tanzen die Ziffern. */
.amount, .price { font-variant-numeric: tabular-nums; }
::selection { background: var(--terra-soft); color: var(--fg); }

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.021em;
  line-height: 1.1;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.25rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.75rem); letter-spacing: -0.026em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); letter-spacing: -0.018em; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

/* Kopfleiste (56) plus die Kapitelleiste der Funktionsseite (rund 46): ohne diesen
   Abstand landet ein Ankersprung unter beiden. */
:target { scroll-margin-top: 112px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; }
.narrow { max-width: var(--max-narrow); }
.muted { color: var(--fg-2); }
.small { font-size: 0.9rem; color: var(--fg-3); }
.center { text-align: center; }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); color: var(--fg-2); line-height: 1.5; }

/* Die kleine Zeile über einer Überschrift. Kapitelmarke, kein Schmuck. */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}

/* ---------- Kopf ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.nav .brand {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Derselbe Grund wie beim Hero-Icon, eine Ebene kleiner: Das Icon ist eine cremeweisse
   Kachel auf cremeweissem Grund, ohne Schatten bleibt von ihm nur die dünne Kurve übrig.
   Die Deckkraft liegt HÖHER als im Hero (0.18 statt 0.12) und der Radius kleiner: Bei 25 px
   ist die Kante alles, was das Icon von der Fläche trennt, ein weicher Schatten verpufft. */
.nav .brand img {
  width: 28px;
  height: 28px;
  flex: none;
  /* Zwei Lagen mit verschiedenen Aufgaben. Die erste hat NULL Versatz und minimalen Radius:
     Das ist die Kontur, die die cremeweisse Kachel vom cremeweissen Grund trennt. Ein
     `border` täte das nicht, er läge um die BILDBOX, und das PNG trägt einen transparenten
     Rand um die Kachel; `drop-shadow` folgt der Silhouette. Die zweite Lage ist der Tiefen-
     schatten wie beim Hero-Icon, nur enger. */
  filter: drop-shadow(0 0 0.5px rgba(28, 27, 26, 0.38))
          drop-shadow(0 1px 2.5px rgba(28, 27, 26, 0.14));
}
.nav nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; font-size: 0.94rem; }
.nav nav a { color: var(--fg-2); }
.nav nav a:hover { color: var(--fg); }
.nav nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}
.lang a, .lang span { padding: 4px 10px; color: var(--fg-3); }
.lang a:hover { color: var(--fg); background: var(--line-soft); }
.lang [aria-current="true"] { color: var(--fg); background: var(--line-soft); }

/* Auf schmalen Schirmen rutscht die Navigation in eine zweite, seitlich scrollbare Zeile.
   Sie einfach auszublenden hiesse, dass ein Telefon nur noch über den Fuss weiterkommt. */
@media (max-width: 800px) {
  .nav .wrap { flex-wrap: wrap; height: auto; padding-top: 11px; padding-bottom: 4px; }
  .nav nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav ul { gap: 20px; padding: 10px 0 9px; }
  .nav nav li { flex: none; }
  .subnav { position: static; }
  :target { scroll-margin-top: 24px; }
}

/* ---------- Knöpfe und Badge ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  background: var(--btn);
  color: var(--btn-fg);
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: 0.86; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: var(--line-soft); opacity: 1; }

/* Apples Badge liegt als Original-SVG bei (schwarz für hell, weiss für dunkel).
   Höhe fest, damit die von Apple vorgegebene Proportion sicher stimmt. Nachgezeichnet
   wird er nicht: Apples Richtlinien für Marketing-Ressourcen verlangen das gelieferte
   Asset. Was ihn leicht aussehen lässt, ist nicht eine andere Zeichnung, sondern der
   Platz um ihn herum — darum steht er allein und die Notiz rückt darunter. */
.badge { display: inline-block; }
.badge:hover { opacity: 0.86; }
.badge img { height: 50px; width: auto; }
.badge-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.badge-row .note { font-size: 0.88rem; color: var(--fg-3); max-width: 32ch; }
.center .badge-row, .hero .badge-row { align-items: center; }

.cta-pair { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Abschnitte ---------- */

section { padding: clamp(76px, 10vw, 132px) 0; overflow-x: clip; }
/* Ein getönter Abschnitt ist eine Fläche mit zwei Kanten, kein Übergang. Der Verlauf, der
   hier früher ein- und ausblendete, machte aus jeder Abschnittsgrenze einen Nebelstreifen;
   die Haarlinie sagt dasselbe in einem Pixel. */
section.tinted {
  background: var(--bg-tint);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
section.tight { padding-top: clamp(44px, 5vw, 68px); padding-bottom: clamp(44px, 5vw, 68px); }
.section-head { max-width: 58ch; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head p { margin-top: 18px; color: var(--fg-2); font-size: 1.14rem; }
.section-head + * { margin-top: clamp(44px, 5vw, 64px); }

hr.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* Der Absatz zur Herkunft des Namens. Schmal und zentriert, damit er als Nachwort gelesen
   wird und nicht als weiteres Verkaufsargument. */
.origin { max-width: 52ch; margin: 0 auto; text-align: center; }
.origin h2 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.origin p { margin-top: 18px; color: var(--fg-2); }
.origin .more { margin-top: 24px; font-size: 0.95rem; }

/* ---------- Hero ---------- */

/* Der Hero ist eine ruhige Fläche. Hier lagen drei weichgezeichnete Terracotta-Wolken,
   die die Seite oben füllen sollten; sie haben sie vor allem verwaschen. Was den Anfang
   trägt, sind Icon, Zeile und Weissraum, nicht der Hintergrund. */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0 clamp(48px, 6vw, 76px);
  text-align: center;
  overflow: hidden;
}

.hero .appicon {
  width: clamp(118px, 11vw, 158px);
  height: auto;
  margin: 0 auto clamp(26px, 3vw, 38px);
  /* Der Schatten muss sein. Das Icon ist selbst cremeweiss und steht auf cremeweissem
     Grund — ohne ihn löst es sich in der Fläche auf. Zwei enge Lagen statt der einen
     wolkigen von früher: eine setzt die Kante, eine hebt es von der Seite ab. */
  filter: drop-shadow(0 1px 2px rgba(28, 27, 26, 0.12))
          drop-shadow(0 12px 24px rgba(28, 27, 26, 0.16));
}
/* Zwei Zeilen statt drei, und der Bruch fällt zwischen die Sätze. Die Spans sind
   `inline-block`: damit hält der Browser jeden Satz zusammen und bricht bevorzugt
   dazwischen, statt mitten in „Auf deinem Mac." — auf dem Telefon dürfen sie weiter
   intern umbrechen, was ein <br> verhindert hätte. `balance` muss dafür weg, sonst
   verteilt es die Wörter wieder gleichmässig über beide Zeilen. */
.hero h1 { max-width: 34ch; margin: 0 auto; text-wrap: wrap; }   /* `wrap`, nicht `normal`: das ist kein gültiger text-wrap-Wert (W3C-Validator
      2026-09-03). Ungültige Deklarationen verwirft der Browser, also blieb das
      `balance` der h1-Grundregel in Kraft — genau das, was hier weg sollte. */
.hero h1 span { display: inline-block; }
.hero .lead { max-width: 46ch; margin: 24px auto 0; }
/* Der Store-Badge steht allein und bekommt Luft; was daneben stand, rückt darunter. */
.hero .cta-pair { justify-content: center; margin-top: clamp(34px, 4vw, 44px); flex-direction: column; gap: 22px; }
.hero .fineprint { margin-top: 18px; font-size: 0.9rem; color: var(--fg-3); }

/* Der Hero-Screenshot darf breiter sein als der Textcontainer und unten aus dem
   Abschnitt laufen: ein angeschnittenes Fenster wirkt wie eine laufende App, ein
   brav eingepasstes wie ein Katalogbild. */
.shot {
  margin: clamp(48px, 7vw, 84px) auto 0;
  max-width: min(1320px, 96vw);
  position: relative;
}
.shot img { margin: 0 auto; }
/* WARUM drop-shadow und kein box-shadow, und warum kein Rand und kein border-radius:
   die Screenshots tragen einen TRANSPARENTEN Rand mit dem macOS-Fensterschatten (gemessen
   2026-08-29: 58 px seitlich, 40 oben, 77 unten bei 1600 × 1043). box-shadow, border und
   border-radius greifen an der Datei-Box und liegen damit sichtbar NEBEN dem Fenster —
   ein doppelter Rahmen. drop-shadow folgt der Silhouette und sitzt am Fenster. */
.split figure img { filter: var(--shot-shadow); }
/* Angeschnitten heisst angeschnitten: eine gerade Kante, hinter der der nächste Abschnitt
   beginnt. Vorher lief hier eine Maske aus, die das Fenster unten ausfransen liess.
   `object-fit` schneidet im Bild selbst. Kein eigener Schatten: er läge unter der
   Schnittkante und machte genau die Weichheit wieder auf, die hier weg soll. Der
   Fensterschatten der Datei trägt oben und seitlich. */
.shot.crop img {
  height: clamp(340px, 46vw, 620px);
  width: 100%;
  object-fit: cover;
  object-position: top center;
}
.shot figcaption { margin-top: 18px; font-size: 0.88rem; color: var(--fg-3); text-align: center; }

/* ---------- Text/Bild im Wechsel ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split + .split { margin-top: clamp(64px, 8vw, 104px); }
/* Gespiegelt heisst: Text nach rechts UND die breite Spalte nach links. Nur die order zu
   drehen liesse das Bild in der schmalen Textspalte zurück. */
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); }
.split.flip .split-text { order: 2; }
.split-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.split-text .eyebrow + h2 { margin-top: 0; }
.split-text p { color: var(--fg-2); margin-top: 16px; }
.split-text ul { margin: 18px 0 0; padding: 0; list-style: none; }
.split-text ul li {
  color: var(--fg-2);
  padding-left: 22px;
  position: relative;
}
.split-text ul li + li { margin-top: 9px; }
.split-text ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--terra);
}
.split figure { margin: 0; }


/* Auf breiten Schirmen laufen die Fenster über die Spaltenkante hinaus und werden
   am Rand angeschnitten. Das ist der Unterschied zwischen einer laufenden App und
   einem eingepassten Katalogbild; `overflow-x: clip` am Abschnitt fängt es ab. */
@media (min-width: 1100px) {
  .split > figure { margin-right: -14%; }
  .split.flip > figure { margin-right: 0; margin-left: -14%; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.flip { grid-template-columns: 1fr; }
  .split.flip .split-text { order: 0; }
  .split + .split { margin-top: 72px; }
  /* In eine Telefonbreite gepresst ist von einem Mac-Fenster nichts mehr zu erkennen.
     Darum wächst es hier über die Spalte hinaus und wird am Rand angeschnitten. */
  .split > figure { margin: 0 -26px; }
  .split figure img { width: 132%; max-width: none; }
  .shot.crop img { height: clamp(320px, 52vw, 420px); }
  /* Der Ausschnitt beginnt RECHTS der Seitenleiste und endet an der rechten Fensterkante:
     bei 129 % Breite und −24,8 % Versatz liegt die linke Kante auf 19,2 % des Bildes, die
     rechte auf 96,7 %. Gemessen am Bild selbst (site/src/img/uebersicht-hell.png, 1600 px):
     das Fenster beginnt bei 3,6 %, die Seitenleiste endet bei 18,3 %, der Inhalt fängt kurz
     danach an. Vorher standen hier 148 % / −26 %; das liess einen Streifen Seitenleiste samt
     halb angeschnittenem Auswahlbalken stehen, weshalb das Bild auf dem Telefon wie ein
     Fehler aussah und nicht wie ein Ausschnitt (Nutzer-Befund 2026-08-30).

     Die negativen Ränder an der Figur sind dafür NÖTIG, nicht Kosmetik: ohne sie beginnt das
     Bild an der Innenkante des 26-px-Polsters von `.wrap`, und der Überhang schiebt genau
     diese 26 px wieder in den sichtbaren Bereich. Weil das ein fester Wert ist und die
     Prozente mit der Breite wachsen, verschöbe sich der Ausschnitt mit jeder Schirmbreite
     (gemessen: 13 % auf einem Telefon, 17 % auf einem Tablet — die Seitenleiste kam auf
     beiden zurück). Mit den Rändern liegt die Figur auf der vollen Schirmbreite und die
     beiden Prozentwerte oben gelten überall.
     `.shot.crop img` muss mitgenannt werden: es setzt oben eine eigene Breite, und der
     Versatz ohne die Überbreite risse rechts eine Lücke. */
  /* Ohne Polster darunter: die gerade Schnittkante stösst direkt an die Kante des nächsten
     Abschnitts, und genau das soll sie sagen. Der Streifen Hintergrund dazwischen liess sie
     wie ein abgeschnittenes Bild aussehen statt wie ein weiterlaufendes Fenster. */
  .hero { padding-bottom: 0; }
  .shot { margin-inline: -26px; max-width: none; }
  .shot img, .shot.crop img { width: 129%; max-width: none; margin-left: -24.8%; }
}

/* ---------- Karten-Raster ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: var(--shadow-s);
}
.band .tile .icon { color: #e0906e; }
.tile :is(h2, h3) { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.018em; }
.tile p { margin-top: 10px; color: var(--fg-2); font-size: 0.97rem; }

/* Kleinteiliges Raster ohne Kartenrahmen: die Nebensachen, die den Alltag ausmachen. */
.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  /* 54 statt 38: Die Haarlinie über jedem Eintrag trug 16 px eigenes `padding-top`. Mit ihr
     fiel der optische Zeilenabstand auf 38 px, die Blöcke rückten also zusammen, obwohl nur
     ein Strich verschwinden sollte. 38 + 16 hält ihn genau dort, wo er war. */
  gap: 54px 44px;
}
/* Die Stufe der Rastertitel richtet sich nach der Seite: h2 auf der Startseite, wo sie
   direkt unter dem Hero-h1 stehen, sonst h3 unter der Abschnitts-Überschrift. Sie sahen
   vorher als h4 überall gleich aus und sprangen dabei über eine Ebene — 28 Verstösse im
   W3C-Validator, und für einen Screenreader eine Gliederung mit Löchern. Das Aussehen hängt
   ab hier an der Regel, nicht am Element (die Werte sind die des früheren h4). */
.details :is(h2, h3) { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.details div :is(h2, h3) { margin-bottom: 8px; }
.details div p { color: var(--fg-2); font-size: 0.95rem; }
/* KEINE Haarlinie über den Einträgen (entfernt 2026-08-29). Sie sollte das Raster gliedern,
   ohne Kästen zu bauen, und war damit weder das eine noch das andere. Keine der drei
   Referenzen macht das: Bears CSS enthält NULL `border-top` (gemessen), nur volle Rahmen und
   zwei `border-bottom`. Der Zeilen- und Spaltenabstand des Rasters trennt bereits. Fehlt
   irgendwo die Gliederung, gehört der Abstand vergrössert, nicht ein Strich gezogen. */

/* Das Icon sitzt NEBEN dem Titel, nicht darüber, und steht dafür im `<h4>` beziehungsweise
   `<h3>` selbst. Zwei Formen nebeneinander — mal darüber, mal daneben — waren der Bruch, den
   der Nutzer sofort gesehen hat. Farbe wie die Kapitelmarken; gezeichnet als Inline-SVG, weil
   eine Bibliothek ein fremder Host wäre und der Build keinen zulässt. */
/* `flex-start`, nicht `center`: bei einem zweizeiligen Titel zentrierte sich das Icon
   zwischen beide Zeilen und schwebte in der Mitte. Es gehört auf die erste. */
.details :is(h2, h3), .tile :is(h2, h3) { display: flex; align-items: flex-start; gap: 10px; }
.details .ico, .tile .icon { color: var(--terra); flex: none; display: inline-flex; margin-top: 1px; }
.details .ico svg, .tile .icon svg { width: 21px; height: 21px; }
/* Der Fliesstext rückt unter den Titel-TEXT statt unter das Icon. Nur dort, wo es ein Icon
   gibt: ein Raster ohne Icon (Preisseite) stünde sonst schief eingerückt. */
.details div:has(.ico) p { padding-left: 31px; }

/* Breiter als das Standardraster: ein Titel mit Icon daneben braucht mehr Zeile, und von
   230 px blieben kaum acht Wörter je Zeile übrig. */
.details.iconlist { gap: 30px 44px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* Zwei Stufen nach unten, beide aus demselben Grund: eine Spalte lohnt sich erst ab der
   Breite, in der ein Satz in die Zeile passt. Mit den 230 px von oben standen auf einem
   Tablet drei Spalten à 246 px — die drei Schritte brachen nach fünf Wörtern um, und der
   dritte blieb als Rest in der linken Spalte hängen (Nutzer-Befund 2026-08-30). Die
   Mindestbreite oben bleibt, wo sie ist: sie hält die vier Einträge der Preisseite auf
   breiten Schirmen in einer Reihe. */
@media (max-width: 1000px) {
  .details, .details.iconlist { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 820px) {
  .details, .details.iconlist { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- Kapitel-Navigation der Funktionsseite ---------- */

.subnav {
  position: sticky;
  top: 56px;
  z-index: 15;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.subnav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 13px 26px;
  max-width: var(--max);
  margin: 0 auto;
  font-size: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { flex: none; }
.subnav a { color: var(--fg-2); white-space: nowrap; }
.subnav a:hover { color: var(--fg); }

.chapter { padding: clamp(56px, 7vw, 92px) 0; }
.chapter + .chapter { border-top: 1px solid var(--line-soft); }
.chapter.tinted { background: var(--bg-tint); border-top: 0; }

/* ---------- Dunkles Band (Vertrauen, Schluss-CTA) ---------- */

/* Das dunkle Band ist eine Karte auf der Seite, keine durchlaufende Bahn: gerundete
   Ecken und ein Rand Luft ringsum. Eine gleichmässige Fläche — die Verlaufswolke, die hier
   lag, hat die Karte fleckig gemacht statt tief. */
.band {
  position: relative;
  background: var(--bg-deep);
  color: var(--fg-on-deep);
  border-radius: clamp(18px, 2.4vw, 32px);
  margin: 0 clamp(12px, 2.5vw, 32px);
  overflow: hidden;
}
.band > .wrap { position: relative; }
.band h2, .band h3 { color: var(--fg-on-deep); }
.band p { color: var(--fg-on-deep-2); }
.band .eyebrow { color: #e0906e; }
.band .btn { background: var(--fg-on-deep); color: #14140f; }
.band .btn.ghost { background: transparent; color: var(--fg-on-deep); border-color: rgba(255, 255, 255, 0.24); }
.band .tile {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
.band .tile :is(h2, h3) { color: var(--fg-on-deep); }
.band .tile p { color: var(--fg-on-deep-2); }
.band .details :is(h2, h3) { color: var(--fg-on-deep); }
.band a { color: #e0906e; }

/* ---------- Preis ---------- */

.pricecard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-s);
  max-width: 520px;
}
.pricecard .amount {
  font-size: clamp(2.8rem, 5.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pricecard .amount small { font-size: 1rem; font-weight: 500; color: var(--fg-2); margin-left: 10px; letter-spacing: 0; }
.pricecard ul { list-style: none; margin: 26px 0 0; padding: 0; }
.pricecard li { color: var(--fg-2); padding-left: 26px; position: relative; }
.pricecard li + li { margin-top: 12px; }
.pricecard li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.42em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--terra);
  border-bottom: 2px solid var(--terra);
  transform: rotate(-45deg);
}
.pricecard .buy { margin-top: 30px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare .col { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.compare .col h3 { font-size: 1.05rem; font-weight: 600; }
.compare .col ul { list-style: none; margin: 14px 0 0; padding: 0; font-size: 0.96rem; }
.compare .col li { color: var(--fg-2); padding-left: 20px; position: relative; }
.compare .col li + li { margin-top: 8px; }
.compare .col li::before { content: "·"; position: absolute; left: 6px; color: var(--fg-3); }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

/* ---------- Fragen ---------- */

.faq { max-width: 76ch; }
.faq details { border-top: 1px solid var(--line-soft); padding: 20px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-3); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 12px; color: var(--fg-2); }
.faq details p + p { margin-top: 10px; }

/* ---------- Textseiten ---------- */

/* Nur oben und unten setzen: die padding-Kurzform würde den seitlichen Rand von .wrap
   löschen, und auf einem Telefon klebt der Text dann am Displayrand. Die 52px stecken
   in der max-width, damit die Textspalte weiterhin 72ch breit ist. */
.prose {
  max-width: calc(72ch + 52px);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(64px, 8vw, 104px);
}
.prose h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.prose .stand { margin-top: 12px; color: var(--fg-3); font-size: 0.9rem; }
.prose h2 { font-size: 1.4rem; margin: 46px 0 12px; }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--fg-2); }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 12px 0 0; }
.prose li + li { margin-top: 8px; }
.prose dl { margin: 16px 0 0; }
.prose dt { font-weight: 600; color: var(--fg); margin-top: 16px; }
.prose dd { margin: 4px 0 0; color: var(--fg-2); }

code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 6px;
}
.band code { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); }

/* ---------- Fuss ---------- */

footer {
  border-top: 1px solid var(--line-soft);
  padding: clamp(48px, 6vw, 72px) 0 56px;
  font-size: 0.92rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
}
.foot-grid h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li + li { margin-top: 10px; }
.foot-grid a { color: var(--fg-2); }
.foot-grid a:hover { color: var(--fg); }
.foot-brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.foot-brand + p { margin-top: 12px; color: var(--fg-3); max-width: 34ch; }
.foot-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  color: var(--fg-3);
  font-size: 0.86rem;
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

/* ---------- Bewegung ---------- */

/* Einblenden beim ersten Sichtbarwerden, EINMAL. Die Marke `html.reveal` setzt ein Skript im
   head, den Zustand `.da` der IntersectionObserver am Seitenende (beides in layout.html).

   Warum nicht `animation-timeline: view()`, das ohne JavaScript auskäme: eine Scroll-Timeline
   koppelt den Fortschritt fest an die Scrollposition. Beim Zurückscrollen läuft sie deshalb
   rückwärts, und „einmal und dann fertig" lässt sich darin nicht ausdrücken — keine Frage der
   Dosis, sondern des Werkzeugs. Drei Anläufe mit Ranges haben das nicht behoben und konnten es
   nicht (2026-08-29). Der Observer kann es mit einer Zeile: `unobserve`.

   Ohne die Marke ist nichts versteckt: kein IntersectionObserver, reduzierte Bewegung oder
   abgeschaltetes JavaScript ergeben eine Seite, auf der von Anfang an alles steht. */
html.reveal .section-head,
html.reveal .split,
html.reveal .tile,
html.reveal .details > div,
html.reveal .pricecard,
html.reveal .origin,
html.reveal .compare .col {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Die Sichtbar-Regel muss die Selektor-STRUKTUR der Ausgangsregel spiegeln, nicht nur `.da`
   nennen: `html.reveal .details > div` wiegt (0,2,2) und schlug ein blosses `html.reveal .da`
   (0,2,1) — die Rasterzellen blieben dann für immer unsichtbar, obwohl der Observer sie
   längst ausgelöst hatte. Gemessen 2026-08-29 („op 0" trotz gesetzter Klasse). */
html.reveal .section-head.da,
html.reveal .split.da,
html.reveal .tile.da,
html.reveal .details > div.da,
html.reveal .pricecard.da,
html.reveal .origin.da,
html.reveal .compare .col.da { opacity: 1; transform: none; }

/* Nebeneinanderliegendes kommt gleichzeitig ins Bild und soll nacheinander ankommen. Eine
   Verzögerung genügt dafür — bei der Scroll-Timeline brauchte es dafür verschobene Ranges. */
html.reveal .tiles .tile:nth-child(2), html.reveal .details > div:nth-child(2) { transition-delay: 90ms; }
html.reveal .tiles .tile:nth-child(3), html.reveal .details > div:nth-child(3) { transition-delay: 180ms; }
html.reveal .tiles .tile:nth-child(4), html.reveal .details > div:nth-child(4) { transition-delay: 270ms; }
html.reveal .details > div:nth-child(5) { transition-delay: 90ms; }
html.reveal .details > div:nth-child(6) { transition-delay: 180ms; }
html.reveal .details > div:nth-child(7) { transition-delay: 270ms; }
html.reveal .details > div:nth-child(8) { transition-delay: 360ms; }

/* Der Hero steht beim Laden schon da und blendet nicht ein. */
html.reveal .hero .section-head, html.reveal .hero .split { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* KEIN Hover-Effekt auf den Kacheln: sie sind Textblöcke ohne Link. Ein Anheben unter dem
     Zeiger verspricht einen Klick, den es nicht gibt — und es stritte sich mit der
     Einblendung um dieselbe `transform`-Eigenschaft. */

  /* Die aufgeklappte Antwort gleitet ein. Die HÖHE springt weiterhin: `interpolate-size:
     allow-keywords` kennt Safari 26.6 noch nicht (gemessen 2026-08-29), und ein
     max-height-Trick rät an der Texthöhe vorbei. */
  @supports selector(::details-content) {
    .faq details::details-content {
      opacity: 0;
      transition: opacity 180ms ease, content-visibility 180ms allow-discrete;
    }
    .faq details[open]::details-content { opacity: 1; }
  }
}

/* Skip-Link: für Tastatur und VoiceOver, unsichtbar bis fokussiert. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px; top: 12px;
  z-index: 50;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
}
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }