/* ═══════════════════════════════════════════════════════════════════════════
   NUVAR — das gemeinsame Aussehen aller Seiten, nach den Apple-Regeln.
   Liegt hier und nicht in jeder Seite, damit Startseite, Download, Tutorials
   und Changelog nicht auseinanderdriften. Wer eine Groesse aendern will,
   aendert sie EINMAL.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NUVAR — nach den Apple-Regeln gebaut (siehe apple-design-Skill).
   Die vier Entscheidungen, die alles andere nach sich ziehen:

   1. SYSTEMSCHRIFT statt Clash Display. Der Skill sagt es unmissverstaendlich:
      "Default to the platform's system font before a custom face; it already
      ships optical sizing, tracking tables, and legibility tuning." Auf dem Mac
      ist das SF Pro, auf Windows Segoe UI — beide sind fuer Bildschirmtext
      gebaut. Nebenbei fallen vier Webfont-Dateien weg.
   2. KEINE VERSALIEN in Ueberschriften. Apple setzt Ueberschriften in normaler
      Gross-/Kleinschreibung; Versalien lesen sich langsamer und nehmen der
      Typografie jede Form. Versalien bleiben nur, wo sie ein LABEL sind.
   3. LAUFWEITE HAENGT AN DER GROESSE. Der Skill: "Tracking is size-specific —
      never one value for all sizes." Grosse Schrift bekommt NEGATIVE Laufweite
      (sonst fallen die Buchstaben auseinander), kleine eine leicht positive.
      Darum unten pro Stufe ein eigener Wert, nie ein globales letter-spacing.
   4. EINE Akzentfarbe. Apple faehrt Blau und sonst Grauwerte. Hier ist es das
      Blau aus dem NUVAR-Zeichen. Das Gelb der alten Fassung ist raus — zwei
      Signalfarben nebeneinander heissen: keine ist ein Signal.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Flaechen — Apples eigene Werte: Weiss, das helle Grau, echtes Schwarz. */
  --w:#fff; --g:#f5f5f7; --k:#000;
  --ink:#1d1d1f;          /* Apples Textschwarz, nicht #000 — auf Weiss ruhiger */
  --ink-2:#6e6e73;        /* Zweite Ebene */
  --ink-3:#86868b;        /* Auf dunklem Grund */
  --accent:#1c9de6;       /* das Blau aus dem Zeichen — die EINZIGE Buntfarbe */
  --accent-h:#0f89cf;
  --line:rgba(0,0,0,.10);
  --line-d:rgba(255,255,255,.14);

  /* Laufweite je Groessenstufe. Genau das, was der Skill verlangt. */
  --tr-display:-.022em;
  --tr-head:-.018em;
  --tr-title:-.012em;
  --tr-body:-.004em;
  --tr-small:.012em;      /* klein = leicht AUSEINANDER, sonst klebt es */

  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",
       "Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Bewegung. Kein Federn bei Dingen, die man nicht anfassen kann — der Skill
     reserviert Federn fuer Gesten. Scroll-Einblendungen sind keine Geste. */
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{
  font-family:var(--ui);
  background:var(--w);
  color:var(--ink);
  /* Groesse in rem, damit die Systemschriftgroesse des Nutzers durchschlaegt
     (Dynamic Type). Der Skill: "Respect the user's text-size setting." */
  font-size:1.0625rem;    /* 17px — Apples Fliesstextgroesse */
  line-height:1.47;
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{display:block;max-width:100%}
::selection{background:rgba(28,157,230,.22)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── Raster ───────────────────────────────────────────────────────────────
   Apple faehrt zwei Breiten: 692px fuer Fliesstext (rund 60 Zeichen, die
   Lesegrenze) und 980px fuer alles mit Bild. Nicht "so breit wie geht". */
.w{max-width:980px;margin:0 auto;padding:0 22px}
.w-read{max-width:692px;margin:0 auto;padding:0 22px}
.w-wide{max-width:1440px;margin:0 auto;padding:0 22px}
.sec{padding:clamp(72px,10vw,130px) 0}
.sec-tight{padding:clamp(48px,6vw,80px) 0}
.grey{background:var(--g)}
.dark{background:var(--k);color:var(--g)}
.dark .sub,.dark .cap{color:var(--ink-3)}

/* ── Schriftstufen ────────────────────────────────────────────────────────
   Jede Stufe traegt IHRE Laufweite und IHREN Durchschuss. Gross = eng und
   dicht, klein = luftiger. Das ist die Regel aus dem Skill, in vier Zeilen. */
.t-display{font-size:clamp(2.5rem,6.2vw,4.5rem);line-height:1.05;letter-spacing:var(--tr-display);font-weight:600}
.t-head   {font-size:clamp(2rem,4.4vw,3rem);   line-height:1.08;letter-spacing:var(--tr-head);  font-weight:600}
.t-title  {font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:var(--tr-title); font-weight:600}
.t-lead   {font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.38;letter-spacing:var(--tr-title);font-weight:400;color:var(--ink-2)}
.sub{color:var(--ink-2)}
.cap{font-size:.75rem;line-height:1.35;letter-spacing:var(--tr-small);color:var(--ink-2)}
.eyebrow{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.006em;color:var(--accent);margin-bottom:.55em}
.center{text-align:center}
.mt-s{margin-top:.6em}.mt-m{margin-top:1.1em}.mt-l{margin-top:2.2em}

/* ── Knoepfe ──────────────────────────────────────────────────────────────
   Apples Pille: Radius 980px, 17px Schrift, 12/22 Innenabstand. Und der Punkt,
   den der Skill an die erste Stelle setzt: Rueckmeldung beim DRUECKEN, nicht
   beim Loslassen. `.press` wird per pointerdown gesetzt — `:active` allein
   greift auf Touch zu spaet. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35em;
  font:inherit;font-size:1.0625rem;line-height:1.176;letter-spacing:var(--tr-body);
  padding:12px 22px;border:0;border-radius:980px;cursor:pointer;
  background:var(--accent);color:#fff;
  transition:background .2s var(--ease),transform .1s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--accent-h)}
.btn.press,.btn:active{transform:scale(.97)}
.btn-2{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px currentColor}
.btn-2:hover{background:rgba(28,157,230,.08)}
.dark .btn-2{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.dark .btn-2:hover{background:rgba(255,255,255,.1)}
.btn-sm{font-size:.875rem;padding:8px 16px}
.btns{display:flex;gap:16px;flex-wrap:wrap}
.center .btns{justify-content:center}

/* Textlink mit Winkel — Apples zweiter Handlungsweg. Der Winkel rueckt beim
   Zeigen nach; das ist die "Andeutung in Richtung der Geste" aus dem Skill. */
.lnk{color:var(--accent);font-size:1.0625rem;display:inline-flex;align-items:center;gap:.18em}
.lnk::after{content:"›";font-size:1.25em;line-height:0;transform:translateY(-.02em);transition:transform .2s var(--ease)}
.lnk:hover::after{transform:translate(3px,-.02em)}

/* ── Kopfleiste ───────────────────────────────────────────────────────────
   Durchscheinende Ebene mit `backdrop-filter`, Inhalt laeuft darunter durch.
   Der Skill: "Build nav/toolbars as translucent layers with content scrolling
   underneath — not opaque bars." Statt einer 1px-Trennlinie gibt es die
   Kante NUR, wenn wirklich etwas darunter liegt (siehe `.scrolled`). */
#nav{
  position:sticky;top:0;z-index:100;height:48px;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
#nav.scrolled{box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.nav-in{max-width:1024px;margin:0 auto;padding:0 22px;height:100%;display:flex;align-items:center;gap:8px}
.nav-mark{width:17px;height:17px;flex:none}
.nav-name{font-size:.875rem;font-weight:600;letter-spacing:.01em}
/* Die Verweise nehmen den ganzen Raum zwischen Zeichen und Kaufknopf und stehen
   darin mittig — Apples Anordnung. Vorher hatten Name UND Verweisreihe je ein
   `margin-right:auto`; die erste gewinnt, und dann klebt „Example board"
   unmittelbar am Wort NUVAR. Im Schirmbild gemessen, nicht im Quelltext. */
.nav-links{display:flex;gap:26px;flex:1;justify-content:center}
.nav-links a{font-size:.75rem;color:var(--ink);opacity:.86;transition:opacity .2s}
.nav-links a:hover{opacity:1;color:var(--accent)}
.nav-buy{font-size:.75rem;color:#fff;background:var(--accent);padding:5px 11px;border-radius:980px;transition:background .2s,transform .1s}
.nav-buy.press{transform:scale(.96)}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:16px;cursor:pointer;padding:6px}

/* ── Hero ─────────────────────────────────────────────────────────────────
   Apples Ordnung auf jeder Produktseite: Eyebrow, Ueberschrift, ein Satz,
   die Handlungen — und DANN das Bild, gross und ohne Rahmen. Genau die
   Reihenfolge, die Ronny fuer den alten Hero schon verlangt hatte. */
/* Die Mitte kommt aus der Klasse `.center` am Textblock, NICHT aus einem
   `text-align` hier. Grund: `.btns` ist ein Flex-Kasten, und der hoert auf
   `text-align` gar nicht — die zwei Knoepfe im Hero standen deshalb links,
   waehrend alles darueber mittig stand. Zwei Mechanismen fuer dieselbe Sache
   sind einer zu viel; jetzt zieht ueberall dieselbe Klasse. */
#hero{padding:clamp(46px,7vw,80px) 0 0}
.hero-shot{margin-top:clamp(34px,5vw,58px)}
.hero-shot img{width:100%;height:auto;border-radius:clamp(10px,1vw,18px)}
.hero-note{margin-top:1.4em;font-size:.8125rem;color:var(--ink-2);letter-spacing:var(--tr-small)}

/* ── Bild-Abschnitt (Text oben, Bild darunter, volle Breite) ─────────────── */
.shot{margin-top:clamp(30px,4vw,52px)}
.shot img{width:100%;height:auto;border-radius:clamp(10px,1vw,18px)}
figcaption{margin-top:14px;text-align:center}

/* Ein 3,4:1-Panorama auf ein Telefon zu quetschen ergibt einen Fleck: 224 Karten
   auf 400 Pixeln zeigen nichts. Unter 760px behält das Bild darum eine
   Mindestbreite und ROLLT in seinem eigenen Rahmen — die Seite selbst nie. */
@media (max-width:760px){
  .shot-wide .rollbar{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:clamp(10px,1vw,18px)}
  .shot-wide .rollbar img{width:760px;max-width:none}
}

/* ── Wechselseitige Merkmale ──────────────────────────────────────────────
   Auf breiten Schirmen zwei Spalten, auf schmalen untereinander — und dann
   IMMER Bild unter Text, nie umgekehrt. Ein `direction:rtl`-Trick waere
   kuerzer, dreht aber auch die Lesefolge. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.duo-img img{width:100%;height:auto;border-radius:clamp(10px,1vw,16px)}
.duo + .duo{margin-top:clamp(56px,8vw,110px)}
.duo.flip .duo-txt{order:2}

/* ── Karten ───────────────────────────────────────────────────────────────
   Apples Kachel: heller Grund, grosszuegiger Radius, KEINE Linie, kein
   Schlagschatten. Die Flaeche selbst trennt. */
.cards{display:grid;gap:20px;margin-top:clamp(34px,4vw,54px)}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--g);border-radius:18px;padding:clamp(24px,2.6vw,34px)}
.dark .card{background:#141416}
.card h3{font-size:1.3125rem;line-height:1.2;letter-spacing:var(--tr-title);font-weight:600;margin-bottom:.45em}
.card p{color:var(--ink-2);font-size:1rem;line-height:1.45}
.dark .card p{color:var(--ink-3)}
.card .n{display:block;font-size:.75rem;font-weight:600;letter-spacing:var(--tr-small);color:var(--accent);margin-bottom:.9em}
.white .card{background:var(--w)}

/* ── Zahlen ───────────────────────────────────────────────────────────────
   Ohne Hochzaehlen. Eine Zahl, die von 0 hochlaeuft, ist eine Bewegung ohne
   Aussage — und der Skill sagt: Bewegung nur, wo sie etwas erklaert. */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.fig b{display:block;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;letter-spacing:var(--tr-display);font-weight:600}
.fig span{display:block;margin-top:.6em;font-size:.8125rem;letter-spacing:var(--tr-small);color:var(--ink-3)}

/* ── Vergleichstabelle ────────────────────────────────────────────────────── */
.tbl-wrap{margin-top:clamp(30px,4vw,50px);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;background:var(--w)}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.9375rem}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
thead th{font-size:.75rem;font-weight:600;letter-spacing:var(--tr-small);color:var(--ink-2);white-space:nowrap}
tbody td:first-child{color:var(--ink)}
td:not(:first-child),th:not(:first-child){text-align:center;color:var(--ink-2)}
.col-nu{background:rgba(28,157,230,.05)}
thead .col-nu{color:var(--accent);font-weight:600}
.yes{color:var(--accent);font-weight:600}
.no{color:var(--ink-3)}
tfoot td{font-weight:600;border-bottom:0}

/* ── Preis ────────────────────────────────────────────────────────────────── */
.price{background:var(--g);border-radius:22px;padding:clamp(30px,4vw,52px);text-align:center}
.price .amt{font-size:clamp(3rem,6vw,4.2rem);line-height:1;letter-spacing:var(--tr-display);font-weight:600}
.price .per{font-size:1.0625rem;color:var(--ink-2);margin-left:.35em}
.incl{list-style:none;margin:1.8em auto 0;max-width:420px;text-align:left}
.incl li{padding:9px 0 9px 26px;position:relative;color:var(--ink-2);font-size:1rem;border-bottom:1px solid var(--line)}
.incl li:last-child{border-bottom:0}
.incl li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);transform:rotate(-45deg)}
.req{margin-top:1.6em;font-size:.875rem;color:var(--ink-2);line-height:1.7}
.req b{color:var(--ink);font-weight:600}

/* ── Fragen ───────────────────────────────────────────────────────────────
   `<details>` bleibt die Grundlage (Tastatur und Vorlesen kennen es), die
   Hoehe wird aber von Hand gefahren, damit es sich oeffnet statt zu springen.
   Der Skill: jede Bewegung soll unterbrechbar sein — darum laeuft sie ueber
   eine Feder in JS und nicht ueber eine feste `transition`. */
.faq{border-bottom:1px solid var(--line);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:1.0625rem;font-weight:600;letter-spacing:var(--tr-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.8px solid var(--ink-2);border-bottom:1.8px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 0 24px;color:var(--ink-2);max-width:64ch}

/* ── Video ────────────────────────────────────────────────────────────────── */
.vid{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;background:#000;margin-top:clamp(28px,3.5vw,44px)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Fusszeile ────────────────────────────────────────────────────────────── */
.foot{background:var(--g);padding:44px 0 32px;font-size:.75rem;color:var(--ink-2);letter-spacing:var(--tr-small)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.foot h5{font-size:.75rem;font-weight:600;color:var(--ink);margin-bottom:.9em}
.foot a{display:block;padding:4px 0;color:var(--ink-2);transition:color .15s}
.foot a:hover{color:var(--accent)}
.foot-bot{padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;line-height:1.6}

/* ── Einblenden beim Scrollen ─────────────────────────────────────────────
   Klein halten. Der Skill warnt vor grossen bewegten Flaechen; 20px und eine
   knappe Kurve reichen, um Struktur zu geben, ohne dass die Seite wackelt. */
.rv{opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ── Schmale Schirme ──────────────────────────────────────────────────────── */
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo.flip .duo-txt{order:0}
  .c3,.c2{grid-template-columns:1fr}
  .figs{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{position:fixed;top:48px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    padding:0 22px;max-height:0;overflow:hidden;transition:max-height .35s var(--ease);border-bottom:.5px solid var(--line)}
  .nav-links.open{max-height:70vh}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .burger{display:block;order:3}
  /* Auf schmalen Schirmen verlaesst die Verweisreihe den Fluss (position:fixed),
     und damit faellt auch ihr `flex:1` weg — Name, Kaufknopf und Klapptaste
     ruecken sonst alle nach links zusammen.
     Der Abstand gehoert an den KAUFKNOPF, nicht an den Namen: der Name ist ein
     <span> INNERHALB des Zeichen-Verweises, ein `margin-right:auto` schiebt dort
     nur gegen den eigenen Elternteil und ist von aussen wirkungslos. Genau das
     stand hier zuerst — und im Schirmbild bei 430 px aenderte sich nichts. */
  .nav-buy{margin-left:auto}
}

/* ── Zugaenglichkeit ──────────────────────────────────────────────────────
   Drei getrennte Signale, drei getrennte Antworten — genau wie der Skill es
   verlangt. "Reduced motion" heisst nicht "keine Rueckmeldung", sondern eine
   sanftere: die Einblendung bleibt als reines Aufblenden. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .rv{transition:opacity .3s linear;transform:none}
  .btn,.nav-buy{transition:background .2s}
  .btn.press,.btn:active{transform:none}
  .lnk:hover::after{transform:translateY(-.02em)}
}
@media (prefers-reduced-transparency:reduce){
  #nav{background:var(--w);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
  .nav-links{background:var(--w);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:#3d3d40;--ink-3:#b0b0b6;--line:rgba(0,0,0,.28)}
  #nav{background:var(--w);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
  .card{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
  .btn-2{box-shadow:inset 0 0 0 2px currentColor}
}

/* ── Unterseiten ──────────────────────────────────────────────────────────
   Download, Tutorials, Changelog und die Rechtstexte teilen sich denselben
   Aufbau: schmaler Kopf, dann Bloecke. Apple macht das genauso — eine
   Unterseite ist keine zweite Marke. */
.sub-hero{padding:clamp(56px,7vw,92px) 0 clamp(28px,3.5vw,44px);text-align:center}
.sub-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.06;letter-spacing:var(--tr-display);font-weight:600}
.sub-hero .sub{margin-top:.7em;font-size:1.0625rem}

.block{background:var(--g);border-radius:18px;padding:clamp(24px,3vw,36px);margin-bottom:20px;text-align:left}
.block h2{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;letter-spacing:var(--tr-title);font-weight:600;margin-bottom:.7em}
.block p{color:var(--ink-2);margin-bottom:.7em}
.block p:last-child{margin-bottom:0}
.block b{color:var(--ink);font-weight:600}
.block code{font-size:.92em;background:rgba(0,0,0,.06);padding:2px 7px;border-radius:5px}

/* Download-Kachel: die Handlung steht vorn, die Beschreibung daneben. */
.dl{background:var(--w);border-radius:14px;padding:20px 22px;margin-bottom:12px}
.dl .os{font-size:.75rem;font-weight:600;letter-spacing:var(--tr-small);color:var(--accent);margin-bottom:.9em}
.dl-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dl-row .meta{font-size:.8125rem;color:var(--ink-2)}

/* Nummerierte Schritte — die Ziffer traegt den Akzent, sonst nichts. */
.steps{counter-reset:s;list-style:none}
.steps li{position:relative;padding:9px 0 9px 40px;color:var(--ink-2)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:8px;
  width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600}

/* Hinweiskasten — eine Kante in der Akzentfarbe, kein Kasten im Kasten. */
.note{border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin:16px 0 0;
  color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.note b{color:var(--ink);font-weight:600}

/* ── Changelog ────────────────────────────────────────────────────────────
   Eine Fassung je Block, die Nummer als Ueberschrift, das Datum daneben.
   Apple setzt Versionshinweise als schlichte Liste — keine Kaesten um Kaesten. */
.rel{padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--line)}
.rel:last-child{border-bottom:0}
.ver{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:1em}
.ver .v{font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;letter-spacing:var(--tr-head);font-weight:600}
.ver .tag{font-size:.6875rem;font-weight:600;letter-spacing:var(--tr-small);color:#fff;
  background:var(--accent);padding:3px 9px;border-radius:980px}
.ver .date{font-size:.8125rem;color:var(--ink-2);letter-spacing:var(--tr-small);margin-left:auto}
.rel ul{list-style:none}
.rel li{position:relative;padding:7px 0 7px 18px;color:var(--ink-2);line-height:1.5}
.rel li::before{content:"";position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.rel li b{color:var(--ink);font-weight:600}

/* Rechtstexte: Fliesstext mit Zwischenueberschriften, sonst nichts. */
.legal h2{font-size:1.125rem;margin-top:1.8em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-2);line-height:1.6}
.legal a{color:var(--accent)}
.legal ul,.legal ol{margin:.4em 0 .8em 1.2em}
.legal li{padding:3px 0}

/* Im Rechtstext ist `.note` ein eingeschobener Halbsatz („— nachfolgend
   ‚Anbieter‘ —"), kein Hinweiskasten. Eine blaue Kante daneben behauptet eine
   Wichtigkeit, die der Halbsatz nicht hat — im Schirmbild der AGB gesehen. */
.legal span.note{display:inline;border:0;padding:0;margin:0;font-size:.9375rem;color:var(--ink-3)}