/* ============================================================
   CLYFT — Landingpage
   Farbschema hell: Hintergrund, Midnight, Elektroblau (Werte nur in :root)
   Schrift: Space Grotesk
   Mobile-first. Kein horizontales Scrollen. Ein CTA-Ziel.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;

  /* Palette — die einzigen Farbwerte im gesamten Stylesheet */
  --c-bg:            #FAFAF8;
  --c-midnight:      #060814;
  --c-accent:        #2F5BFF;
  --c-accent-hover:  #1F45E0;
  --c-accent-soft:   #E3EAFF;
  --c-text-2:        #5E6072;
  --c-text-2-dark:   #A3A6B5;
  --c-line:          #DCDCD6;
  --c-white:         #FFFFFF;

  /* Ergänzungen, freigegeben */
  --c-control:       #8A8D9A;   /* Grenzen von Feldern, Radios, Ghost-Button: 3,30:1 auf Weiß */
  --c-danger:        #B42318;   /* 6,57:1 auf Weiß */
  --c-danger-soft:   #FDECEA;
  --c-success:       #157A3E;   /* 5,41:1 auf Weiß */
  --c-success-soft:  #E7F5EC;
  --c-stone:         #EEF0F6;   /* kühler Neutralton mit einem Hauch Blau, für Flächen im Hintergrund */
  --c-on-accent-line:rgba(255,255,255,.28);   /* Trennlinien auf blauer Fläche */   /* warmer Neutralton für Flächen im Hintergrund */

  /* Transparente Ableitungen aus der Palette */
  --c-header-bg:     rgba(250,250,248,.9);
  --c-stickybar-bg:  rgba(255,255,255,.94);
  --c-pattern:       rgba(6,8,20,.05);
  --c-pattern-dot:   rgba(6,8,20,.10);
  --c-pattern-d:     rgba(255,255,255,.05);
  --c-pattern-dot-d: rgba(255,255,255,.10);
  --c-line-d:        rgba(255,255,255,.12);
  --c-surface-d:     rgba(255,255,255,.04);
  --c-surface-2-d:   rgba(255,255,255,.08);
  --c-shadow:        rgba(6,8,20,.10);
  --c-shadow-device: rgba(6,8,20,.30);
  --c-device-ring:   rgba(255,255,255,.08);
  --c-media-shade:   rgba(6,8,20,.48);
  --c-on-media:      rgba(255,255,255,.85);
  --c-on-media-dim:  rgba(255,255,255,.30);
  --c-spinner-track: rgba(255,255,255,.35);

  /* Hintergrund-Motive: Ringe, Raster, Punkte in sehr blassem Blau. Reine Linien und Flächen, kein Glow. */
  --c-deko-line:     rgba(47,91,255,.10);   /* Haarlinie: #5E6072 bleibt auch darauf über 4,5:1 */
  --c-deko-line-2:   rgba(47,91,255,.06);
  --c-deko-grid:     rgba(47,91,255,.045);
  --c-deko-grid-2:   rgba(47,91,255,.09);
  --c-deko-dot:      rgba(47,91,255,.20);
  --c-deko-white:    rgba(255,255,255,.9);
  --c-deko-line-d:   rgba(255,255,255,.08);
  --c-deko-line-d2:  rgba(255,255,255,.05);
  --c-deko-fill-d:   rgba(255,255,255,.03);

  /* Masken: steuern nur, wo ein Muster sichtbar ist — nie als Farbe zu sehen */
  --c-mask:          #000;
  --c-mask-95:       rgba(0,0,0,.95);
  --c-mask-50:       rgba(0,0,0,.50);

  /* Semantische Token, helle Grundeinstellung */
  --bg:                var(--c-bg);
  --surface:           var(--c-white);
  --surface-2:         var(--c-bg);
  --line:              var(--c-line);
  --line-soft:         var(--c-line);
  --t1:                var(--c-midnight);
  --t2:                var(--c-midnight);
  --t3:                var(--c-text-2);
  --t4:                var(--c-text-2);
  --accent:            var(--c-accent);
  --accent-hover:      var(--c-accent-hover);
  --accent-soft:       var(--c-accent-soft);
  --accent-text:       var(--c-accent);        /* nur Headlines, Links, einzelne Wörter */
  --accent-text-hover: var(--c-accent-hover);
  --on-accent:         var(--c-white);
  --on-soft:           var(--c-accent-hover);  /* Schrift und Symbole auf Akzentfläche: 5,85:1 */
  --control:           var(--c-control);
  --field-bg:          var(--c-white);
  --focus:             var(--c-accent);
  --pattern:           var(--c-pattern);
  --pattern-dot:       var(--c-pattern-dot);
  --device:            var(--c-midnight);
  --deko-fill:         var(--c-stone);
  --stone:             var(--c-stone);
  --deko-line:         var(--c-deko-line);
  --deko-line-2:       var(--c-deko-line-2);
  --deko-grid:         var(--c-deko-grid);
  --deko-grid-2:       var(--c-deko-grid-2);
  --deko-dot:          var(--c-deko-dot);

  /* Radien */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Raster */
  --maxw: 1160px;
  --gutter: 20px;

  /* Abstände (density 4 — standard/luftig) */
  --s-1: 8px;   --s-2: 12px;  --s-3: 16px;  --s-4: 24px;
  --s-5: 32px;  --s-6: 48px;  --s-7: 64px;  --s-8: 96px;

  /* Bewegung */
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Langer, weicher Auslauf — nur für die Scroll-Einblendungen. */
  --ease-glide: cubic-bezier(.22,1,.36,1);
  --dur:  220ms;
}

/* ---------- 1b. Schrift ----------
   Space Grotesk liegt lokal (SIL Open Font License), es wird keine Verbindung
   zu Google aufgebaut. Eine variable Datei deckt alle Stärken 300–700 ab. */
@font-face{
  font-family:"Space Grotesk";
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* Muss vor allen display-Regeln stehen: sonst gewinnt z. B. .btn{display:inline-flex}
   gegen das hidden-Attribut und ausgeblendete Elemente bleiben sichtbar. */
[hidden]{ display:none !important; }
/* 106,25 % = 17px statt 16px. Alle rem-Angaben skalieren mit, dadurch
   wächst die Seite gleichmäßig statt an einzelnen Stellen. */
html{ font-size:106.25%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }

body{
  background:var(--bg);
  color:var(--t1);
  font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size:1rem;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;          /* Schutz gegen horizontales Scrollen */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Gitterraster hinter Kopfbereich und Hero.
   Liegt als eigene Ebene über dem Farbverlauf, aber unter allen Inhalten.
   Absolut statt fixiert, damit es beim Scrollen mitwandert und oben bleibt. */
body::after{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:clamp(620px, 96vh, 1040px);
  z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  var(--pattern) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pattern) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:center top;
  /* Nach unten auslaufen lassen, sonst bricht das Raster hart ab. */
  -webkit-mask-image:linear-gradient(180deg, var(--c-mask-95) 0%, var(--c-mask-50) 45%, transparent 90%);
          mask-image:linear-gradient(180deg, var(--c-mask-95) 0%, var(--c-mask-50) 45%, transparent 90%);
}
@media (max-width:640px){
  body::after{ background-size:40px 40px; }
}

main,header,footer{ position:relative; z-index:1; }

/* ---------- 3. Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--s-8); position:relative; }

/* Midnight-Bereiche: Faktenleiste, Ablauf, Abschlussbox, Footer.
   Die Klasse stellt die semantischen Token um. Regeln dort: Text weiß,
   Sekundärtext hellgrau, Buttons blau mit weißer Schrift, keine blaue Schrift. */
.ton-dunkel{
  --bg:                var(--c-midnight);
  --surface:           var(--c-surface-d);
  --surface-2:         var(--c-surface-2-d);
  --line:              var(--c-line-d);
  --line-soft:         var(--c-line-d);
  --t1:                var(--c-white);
  --t2:                var(--c-white);
  --t3:                var(--c-text-2-dark);
  --t4:                var(--c-text-2-dark);
  --accent-text:       var(--c-white);
  --accent-text-hover: var(--c-white);
  --control:           var(--c-text-2-dark);
  --pattern:           var(--c-pattern-d);
  --pattern-dot:       var(--c-pattern-dot-d);
  --deko-fill:         var(--c-deko-fill-d);
  --deko-line:         var(--c-deko-line-d);
  --deko-line-2:       var(--c-deko-line-d2);
  --deko-grid:         var(--c-pattern-d);
  --deko-grid-2:       var(--c-line-d);
  --deko-dot:          var(--c-deko-line-d);
  background-color:var(--bg);
  color:var(--t1);
}
/* Sektionen sind auf die Inhaltsbreite begrenzt — die dunkle Fläche läuft
   deshalb als eigene Ebene über die volle Fensterbreite. */
.section.ton-dunkel{ background-color:transparent; }
.section.ton-dunkel::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  z-index:-2; pointer-events:none;
  background-color:var(--bg);
}

/* Kühle Fläche („Was bringt dir das?"). Blau als Schrift wird hier
   dunkler gesetzt: das helle Akzentblau hätte auf dieser Fläche nur 4,54:1. */
.ton-soft{
  --bg:                var(--c-stone);
  --accent-soft:       var(--c-white);
  --accent-text:       var(--c-accent-hover);   /* 6,11:1 */
  --accent-text-hover: var(--c-midnight);
  --deko-fill:         var(--c-white);
  --deko-line:         var(--c-deko-white);
}

/* Weiße Fläche: Faktenleiste und Ablauf. Karten darauf im Seitengrau,
   damit sie sich vom Band abheben. */
.ton-weiss{
  --bg:                var(--c-white);
  --surface:           var(--c-bg);
  --surface-2:         var(--c-white);
  background-color:var(--bg);
}
.section.ton-weiss{ background-color:transparent; }

/* Blaue Fläche: Faktenleiste und Abschlussbox. Auf Elektroblau besteht nur
   reines Weiß die Kontrastprüfung (5,17:1) — auch der kleinere Text ist
   deshalb weiß, nur in kleinerer Schrift. Buttons kehren sich um: weiße
   Fläche mit blauer Schrift (7,03:1). */
.ton-blau{
  --bg:                var(--c-accent);
  --surface:           var(--c-surface-2-d);
  --surface-2:         var(--c-surface-d);
  --line:              var(--c-on-accent-line);
  --line-soft:         var(--c-on-accent-line);
  --t1:                var(--c-white);
  --t2:                var(--c-white);
  --t3:                var(--c-white);
  --t4:                var(--c-white);
  --accent:            var(--c-white);
  --accent-hover:      var(--c-white);
  --on-accent:         var(--c-accent-hover);
  --accent-text:       var(--c-white);
  --accent-text-hover: var(--c-white);
  --control:           var(--c-on-accent-line);
  --focus:             var(--c-white);
  --pattern:           var(--c-pattern-d);
  --pattern-dot:       var(--c-pattern-dot-d);
  --deko-fill:         var(--c-surface-2-d);
  --deko-line:         var(--c-line-d);
  --deko-line-2:       var(--c-surface-2-d);
  background-color:var(--bg);
  color:var(--t1);
}

/* ---- Hintergrund-Motive ----
   Eine gemeinsame Formensprache statt einzelner Texturen: Ringe (Reichweite),
   Raster (Struktur), schräge Kanten (Bewegung). Ebene ::before trägt Fläche
   und Formen, ::after die feine Textur. Beide laufen über die volle Breite. */
.bg::before,
.bg::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  pointer-events:none;
}
.bg::before{ z-index:-2; }
.bg::after{ z-index:-1; }

/* Hero: Halbkreis hinter den Telefonen, Ringe laufen nach oben aus */
.hero{ position:relative; }
.hero::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
  --rg:clamp(56px, 10vw, 92px);
  background:radial-gradient(circle at 50% 100%,
      var(--deko-fill) 0 calc(var(--rg) * 3 - 1px),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 4 - 2px),
      var(--deko-line) calc(var(--rg) * 4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4 - .8px),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 5 - 2px),
      var(--deko-line) calc(var(--rg) * 5 - 1.2px),
      var(--deko-line) calc(var(--rg) * 5 - .8px),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 6 - 2px),
      var(--deko-line) calc(var(--rg) * 6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 6 - .8px),
      transparent calc(var(--rg) * 6),
      transparent calc(var(--rg) * 6),
      transparent calc(var(--rg) * 7 - 2px),
      var(--deko-line) calc(var(--rg) * 7 - 1.2px),
      var(--deko-line) calc(var(--rg) * 7 - .8px),
      transparent calc(var(--rg) * 7),
      transparent calc(var(--rg) * 7),
      transparent calc(var(--rg) * 8 - 2px),
      var(--deko-line) calc(var(--rg) * 8 - 1.2px),
      var(--deko-line) calc(var(--rg) * 8 - .8px),
      transparent calc(var(--rg) * 8),
      transparent calc(var(--rg) * 8),
      transparent calc(var(--rg) * 9 - 2px),
      var(--deko-line) calc(var(--rg) * 9 - 1.2px),
      var(--deko-line) calc(var(--rg) * 9 - .8px),
      transparent calc(var(--rg) * 9));
  -webkit-mask-image:linear-gradient(0deg, var(--c-mask) 0%, var(--c-mask) 30%, transparent 86%);
          mask-image:linear-gradient(0deg, var(--c-mask) 0%, var(--c-mask) 30%, transparent 86%);
}

/* Steinfarbenes Band mit weißen Ringen und schräger Unterkante */
.bg--soft{ --sl:clamp(24px, 4.5vw, 64px); --rg:clamp(34px, 5.5vw, 58px); }
.bg--soft::before,
.bg--soft::after{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--sl)), 0 100%); }
.bg--soft::before{
  background:
    radial-gradient(circle at 100% 0%,
      var(--deko-fill) 0 calc(var(--rg) * 1.4 - 1px),
      transparent calc(var(--rg) * 1.4),
      transparent calc(var(--rg) * 2.4 - 2px),
      var(--deko-line) calc(var(--rg) * 2.4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 2.4 - .8px),
      transparent calc(var(--rg) * 2.4),
      transparent calc(var(--rg) * 2.4),
      transparent calc(var(--rg) * 3.4 - 2px),
      var(--deko-line) calc(var(--rg) * 3.4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 3.4 - .8px),
      transparent calc(var(--rg) * 3.4),
      transparent calc(var(--rg) * 3.4),
      transparent calc(var(--rg) * 4.4 - 2px),
      var(--deko-line) calc(var(--rg) * 4.4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4.4 - .8px),
      transparent calc(var(--rg) * 4.4),
      transparent calc(var(--rg) * 4.4),
      transparent calc(var(--rg) * 5.4 - 2px),
      var(--deko-line) calc(var(--rg) * 5.4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 5.4 - .8px),
      transparent calc(var(--rg) * 5.4),
      transparent calc(var(--rg) * 5.4),
      transparent calc(var(--rg) * 6.4 - 2px),
      var(--deko-line) calc(var(--rg) * 6.4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 6.4 - .8px),
      transparent calc(var(--rg) * 6.4)),
    radial-gradient(circle at 0% 100%,
      transparent 0px,
      transparent calc(var(--rg) * 2 - 2px),
      var(--deko-line) calc(var(--rg) * 2 - 1.2px),
      var(--deko-line) calc(var(--rg) * 2 - .8px),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 3 - 2px),
      var(--deko-line) calc(var(--rg) * 3 - 1.2px),
      var(--deko-line) calc(var(--rg) * 3 - .8px),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 4 - 2px),
      var(--deko-line) calc(var(--rg) * 4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4 - .8px),
      transparent calc(var(--rg) * 4)),
    var(--bg);
}
.bg--soft::after{
  background-image:radial-gradient(var(--deko-dot) 1.2px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(30% 45% at 8% 22%, var(--c-mask), transparent 72%);
          mask-image:radial-gradient(30% 45% at 8% 22%, var(--c-mask), transparent 72%);
}

/* Große Scheibe links mit Umlaufbahn, Ring und Punktfeld rechts */
.bg--kreis{ --k:clamp(130px, 24vw, 320px); --od:5px; }
/* Auf schmalen Schirmen läge der Punkt auf der Umlaufbahn in der Überschrift. */
@media (max-width:719px){ .bg--kreis{ --od:-1px; } }
.bg--kreis::before{
  background:
    radial-gradient(circle at calc(var(--k) * .955) calc(24% - var(--k) * .955),
      var(--accent) 0 var(--od), transparent calc(var(--od) + 1px)),
    radial-gradient(circle at 0% 24%,
      var(--deko-fill) 0 calc(var(--k) * 1 - 1px),
      transparent calc(var(--k) * 1),
      transparent calc(var(--k) * 1.35 - 2px),
      var(--deko-line) calc(var(--k) * 1.35 - 1.2px),
      var(--deko-line) calc(var(--k) * 1.35 - .8px),
      transparent calc(var(--k) * 1.35)),
    radial-gradient(circle at 100% 90%,
      transparent 0px,
      transparent calc(var(--k) * 0.62 - 2px),
      var(--deko-line) calc(var(--k) * 0.62 - 1.2px),
      var(--deko-line) calc(var(--k) * 0.62 - .8px),
      transparent calc(var(--k) * 0.62),
      transparent calc(var(--k) * 0.62),
      transparent calc(var(--k) * 0.9 - 2px),
      var(--deko-line) calc(var(--k) * 0.9 - 1.2px),
      var(--deko-line) calc(var(--k) * 0.9 - .8px),
      transparent calc(var(--k) * 0.9));
}
.bg--kreis::after{
  background-image:radial-gradient(var(--deko-dot) 1.2px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(28% 36% at 100% 90%, var(--c-mask), transparent 75%);
          mask-image:radial-gradient(28% 36% at 100% 90%, var(--c-mask), transparent 75%);
}

/* Blaupause: feines und grobes Raster, Punkte auf den Kreuzungen */
.bg--blueprint{ --gz:88px; }
.bg--blueprint::before,
.bg--blueprint::after{
  -webkit-mask-image:radial-gradient(80% 72% at 50% 46%, var(--c-mask) 30%, transparent 100%);
          mask-image:radial-gradient(80% 72% at 50% 46%, var(--c-mask) 30%, transparent 100%);
}
.bg--blueprint::before{
  background-image:
    linear-gradient(to right,  var(--deko-grid-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--deko-grid-2) 1px, transparent 1px),
    linear-gradient(to right,  var(--deko-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--deko-grid) 1px, transparent 1px);
  background-size:
    var(--gz) var(--gz), var(--gz) var(--gz),
    calc(var(--gz) / 4) calc(var(--gz) / 4), calc(var(--gz) / 4) calc(var(--gz) / 4);
  background-position:center top;
}
.bg--blueprint::after{
  background-image:radial-gradient(circle, var(--deko-dot) 0 2.2px, transparent 2.8px);
  background-size:var(--gz) var(--gz);
  background-position:calc(50% + var(--gz) / 2) calc(var(--gz) / 2 + .5px);
}

/* Band mit schrägen Kanten und Ringen aus der Ecke */
.bg--schraeg{ --sl:clamp(28px, 5vw, 72px); --rg:clamp(48px, 8vw, 96px); }
.bg--schraeg::before,
.bg--schraeg::after{ clip-path:polygon(0 var(--sl), 100% 0, 100% calc(100% - var(--sl)), 0 100%); }
.bg--schraeg::before{ background-color:var(--bg); }
.bg--schraeg::after{
  background:
    radial-gradient(circle at 100% 100%,
      transparent 0px,
      transparent calc(var(--rg) * 3 - 2px),
      var(--deko-line) calc(var(--rg) * 3 - 1.2px),
      var(--deko-line) calc(var(--rg) * 3 - .8px),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 4 - 2px),
      var(--deko-line) calc(var(--rg) * 4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4 - .8px),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 5 - 2px),
      var(--deko-line) calc(var(--rg) * 5 - 1.2px),
      var(--deko-line) calc(var(--rg) * 5 - .8px),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 6 - 2px),
      var(--deko-line) calc(var(--rg) * 6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 6 - .8px),
      transparent calc(var(--rg) * 6),
      transparent calc(var(--rg) * 6),
      transparent calc(var(--rg) * 7 - 2px),
      var(--deko-line) calc(var(--rg) * 7 - 1.2px),
      var(--deko-line) calc(var(--rg) * 7 - .8px),
      transparent calc(var(--rg) * 7)),
    radial-gradient(circle at 0% 0%,
      var(--deko-fill) 0 calc(var(--rg) * 1 - 1px),
      transparent calc(var(--rg) * 1),
      transparent calc(var(--rg) * 2 - 2px),
      var(--deko-line-2) calc(var(--rg) * 2 - 1.2px),
      var(--deko-line-2) calc(var(--rg) * 2 - .8px),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 3 - 2px),
      var(--deko-line-2) calc(var(--rg) * 3 - 1.2px),
      var(--deko-line-2) calc(var(--rg) * 3 - .8px),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 4 - 2px),
      var(--deko-line-2) calc(var(--rg) * 4 - 1.2px),
      var(--deko-line-2) calc(var(--rg) * 4 - .8px),
      transparent calc(var(--rg) * 4));
}

/* Bühne hinter den Paketen */
.bg--buehne{ --rg:clamp(150px, 32vw, 400px); }
.bg--buehne::before{
  background:radial-gradient(circle at 50% 58%,
      var(--deko-fill) 0 calc(var(--rg) * 1 - 1px),
      transparent calc(var(--rg) * 1),
      transparent calc(var(--rg) * 1.22 - 2px),
      var(--deko-line) calc(var(--rg) * 1.22 - 1.2px),
      var(--deko-line) calc(var(--rg) * 1.22 - .8px),
      transparent calc(var(--rg) * 1.22));
}
.bg--buehne::after{
  background-image:radial-gradient(var(--deko-dot) 1.2px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(34% 26% at 0% 0%, var(--c-mask), transparent 75%),
                     radial-gradient(34% 26% at 100% 100%, var(--c-mask), transparent 75%);
          mask-image:radial-gradient(34% 26% at 0% 0%, var(--c-mask), transparent 75%),
                     radial-gradient(34% 26% at 100% 100%, var(--c-mask), transparent 75%);
}

/* Halbe Scheibe am rechten Rand, Schraffur von links */
.bg--schraffur{ --rg:clamp(80px, 16vw, 220px); }
.bg--schraffur::before{
  background:radial-gradient(circle at 100% 50%,
      var(--deko-fill) 0 calc(var(--rg) * 1 - 1px),
      transparent calc(var(--rg) * 1),
      transparent calc(var(--rg) * 1.3 - 2px),
      var(--deko-line) calc(var(--rg) * 1.3 - 1.2px),
      var(--deko-line) calc(var(--rg) * 1.3 - .8px),
      transparent calc(var(--rg) * 1.3),
      transparent calc(var(--rg) * 1.3),
      transparent calc(var(--rg) * 1.6 - 2px),
      var(--deko-line) calc(var(--rg) * 1.6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 1.6 - .8px),
      transparent calc(var(--rg) * 1.6));
}
.bg--schraffur::after{
  background-image:repeating-linear-gradient(135deg,
    var(--deko-grid-2) 0 1px, transparent 1px 14px);
  -webkit-mask-image:radial-gradient(46% 70% at 0% 40%, var(--c-mask), transparent 75%);
          mask-image:radial-gradient(46% 70% at 0% 40%, var(--c-mask), transparent 75%);
}

@media (max-width:720px){
  .bg--blueprint{ --gz:64px; }
}

.section--tight{ padding-block:var(--s-7); }
@media (max-width:640px){
  .section{ padding-block:64px; }
  .section--tight{ padding-block:48px; }
}

/* Trenner laufen zu den Rändern aus — eine durchgehende Linie wirkt hart. */
.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,
    transparent, var(--line) 22%, var(--line) 78%, transparent);
}

/* ---------- 4. Typografie ---------- */
h1,h2,h3,h4{
  font-weight:600; line-height:1.08; letter-spacing:-.025em; text-wrap:balance;
  /* Deutsche Komposita wie „Unternehmensgegenstand" sprengen sonst schmale
     Spalten. Bricht nur, wenn es sonst überliefe. */
  overflow-wrap:break-word;
}

.h-display{ font-size:clamp(2.35rem, 8.2vw, 4.6rem); font-weight:600; }
.h-1{ font-size:clamp(1.95rem, 5.6vw, 3.1rem); }
.h-2{ font-size:clamp(1.45rem, 3.4vw, 2rem); }
.h-3{ font-size:clamp(1.05rem, 2.1vw, 1.2rem); letter-spacing:-.01em; }

.lead{
  font-size:clamp(1.03rem, 2.1vw, 1.2rem);
  color:var(--t2); line-height:1.62; max-width:60ch;
  text-wrap:pretty;
}
.body{ color:var(--t2); text-wrap:pretty; overflow-wrap:break-word; }
/* Abschlusszeile vor dem Button — deutlich über Fließtext, unter Überschrift. */
.kicker{
  font-size:clamp(1.18rem, 2.7vw, 1.45rem);
  font-weight:600; line-height:1.35; letter-spacing:-.015em;
  color:var(--t1); text-wrap:balance;
}
.small{ font-size:.94rem; color:var(--t3); }
.tiny{ font-size:.84rem; color:var(--t4); }

.accent{ color:var(--accent-text); }
strong{ color:var(--t1); font-weight:600; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.735rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text);
}
.eyebrow::before{
  content:""; width:22px; height:1px; flex:none;
  background:linear-gradient(90deg, transparent, var(--accent-text));
}
.eyebrow--center{ justify-content:center; flex-wrap:wrap; }
/* Auf schmalen Schirmen bricht das Eyebrow um — der Strich hängt dann frei. */
@media (max-width:560px){
  .eyebrow--center::before{ display:none; }
  .eyebrow{ font-size:.7rem; letter-spacing:.12em; }
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-height:52px; padding:14px 26px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-size:1rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  transition:transform var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn svg{ flex:none; }

.btn--primary{
  background:var(--accent); color:var(--on-accent);       /* 5,17:1 */
}
.btn--primary:hover{
  background:var(--accent-hover);                          /* 7,03:1 */
  transform:translateY(-2px);
}
.btn--primary:active{ background:var(--accent-hover); }
.btn--ghost{
  background:var(--surface); color:var(--t1);
  border-color:var(--control);
}
.btn--ghost:hover,
.btn--ghost:active{
  background:var(--stone); color:var(--t1);                /* 17,51:1 */
  border-color:var(--t1);
}

.btn--lg{ min-height:58px; padding:16px 34px; font-size:1.06rem; }
.btn--block{ width:100%; }

.btn:active{ transform:translateY(0) scale(.985); }

/* Deaktiviert. WCAG nimmt inaktive Bedienelemente von der Kontrastpflicht aus,
   die Schrift bleibt trotzdem lesbar. */
.btn:disabled,
.btn[aria-disabled="true"]{
  background:var(--c-line); color:var(--c-text-2);
  border-color:var(--c-line);
  cursor:not-allowed; transform:none;
}

/* Textlink mit Pfeil */
.link{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px;
  color:var(--accent-text); font-weight:500; text-decoration:none;
  transition:gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover,
.link:active{ gap:11px; color:var(--accent-text-hover); }

/* Fokus — nie entfernen */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

::selection{ background:var(--accent-soft); color:var(--c-midnight); }   /* 16,61:1 */

/* ---------- 6. Karten ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:var(--s-4);
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* Interaktive Karten: anheben beim Drüberfahren, Symbol wächst leicht mit. */
.card--hover{
  transition:transform 260ms var(--ease),
             border-color 260ms var(--ease),
             background-color 260ms var(--ease),
             box-shadow 260ms var(--ease);
}
.card--hover .svc__ico,
.card--hover .goal__ico{ transition:transform 260ms var(--ease); }

@media (hover:hover){
  /* .card wird mitgeschrieben, damit die Regel spezifischer ist als
     .reveal[data-in="true"]{transform:none} weiter unten — sonst wird der
     Anhebe-Effekt still geschluckt. Nicht "vereinfachen". */
  .card.card--hover:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
    background:var(--surface);
    box-shadow:0 20px 40px -28px var(--c-shadow);   /* neutral, kein Glow */
  }
  .card.card--hover:hover .svc__ico,
  .card.card--hover:hover .goal__ico{ transform:scale(1.09); }
}

/* Auf dem Handy gibt es keinen Hover — dort ist der Druck die Rückmeldung. */
.card.card--hover:active{
  transform:translateY(-1px) scale(.995);
  border-color:var(--accent);
  background:var(--surface);
  transition-duration:90ms;
}

/* ---------- 7. Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  /* Am Seitenanfang durchsichtig, damit das Gitterraster durchscheint.
     Hintergrund und Weichzeichner kommen erst beim Scrollen dazu. */
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease);
}
.site-header[data-scrolled="true"]{
  border-bottom-color:var(--line-soft);
  background:var(--c-header-bg);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.nav{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s-4);
  min-height:68px;
}
.nav__links{ display:none; align-items:center; gap:var(--s-5); }
.nav__links a{
  font-size:.94rem; color:var(--t2); text-decoration:none;
  padding-block:8px;
  transition:color var(--dur) var(--ease);
}
.nav__links a:hover{ color:var(--t1); }
.nav__cta{ min-height:44px; padding:10px 20px; font-size:.93rem; }

@media (min-width:900px){
  /* Ohne Logo: Navigation mittig, Button rechts. */
  .nav{ min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; }
  .nav__links{ display:flex; grid-column:2; }
  .nav__cta{ grid-column:3; justify-self:end; }
}
/* Unterseiten haben nur den Zurück-Link — der steht links. */
.book .nav{ display:flex; justify-content:flex-start; }
/* Unterseiten laden kein Scroll-Skript, ihr Header bekäme also nie einen
   Hintergrund. Beim Scrollen läge der Zurück-Link sonst über dem Inhalt. */
.book .site-header{
  background:var(--c-header-bg);
  border-bottom-color:var(--line-soft);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

/* ---------- 8. Hero ---------- */
.hero{ padding-top:clamp(48px, 9vw, 88px); padding-bottom:0; text-align:center; }
.hero__inner{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4); }
.hero h1{ max-width:16ch; }
.hero .lead{ max-width:52ch; margin-inline:auto; }
.hero__actions{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  width:100%; max-width:340px; margin-top:var(--s-2);
}
.hero__actions .btn{ width:100%; }
@media (min-width:560px){
  .hero__actions{ max-width:none; width:auto; }
  .hero__actions .btn{ width:auto; }
}
.hero__note{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px;
  font-size:.85rem; color:var(--t3);
}
.hero__note span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.hero__note svg{ color:var(--accent-text); }

/* Telefon-Bühne */
.stage{
  position:relative;
  margin-top:var(--s-6);
  padding-bottom:var(--s-6);
}
@media (min-width:980px){ .stage{ padding-bottom:var(--s-7); } }
.stage__phones{
  display:flex; align-items:flex-end; justify-content:center;
  gap:0;
  perspective:1400px;
}
.phone{
  position:relative; flex:none;
  width:150px;
  /* Keine feste Gehäusehöhe mehr: der Bildschirm gibt sie über sein
     Seitenverhältnis vor (9:16, exakt das Format der Reels). Sonst müsste
     das Video beschnitten werden — und zwar dort, wo die Untertitel stehen. */
  border-radius:24px;
  padding:6px;
  background:var(--device);
  box-shadow:0 30px 60px -30px var(--c-shadow-device), 0 0 0 1px var(--c-device-ring);
}
/* Handy: alle drei nebeneinander, aber überlappend gestaffelt. Nebeneinander
   ohne Überlappung blieben bei 375px nur ~100px pro Gerät — dann ist im Video
   nichts mehr zu erkennen. So bleibt das mittlere lesbar, die anderen schauen
   dahinter hervor. Breiten in vw, damit es von 320px an aufgeht. */
.phone{ width:30vw; max-width:150px; }
.phone--c{ width:40vw; max-width:190px; z-index:2; }
.phone--l{ transform:rotate(-7deg) translateX(18%)  translateY(14px); z-index:1; }
.phone--r{ transform:rotate(7deg)  translateX(-18%) translateY(14px); z-index:1; }

@media (min-width:720px){
  .stage__phones{ gap:24px; }
  .phone{ width:184px; max-width:none; }
  .phone--c{ width:230px; max-width:none; }
  .phone--l{ transform:rotate(-6deg) translateY(20px) scale(.9); }
  .phone--r{ transform:rotate(6deg)  translateY(20px) scale(.9); }
}
.phone__screen{
  position:relative; width:100%; aspect-ratio:9/16;
  border-radius:19px; overflow:hidden;
  /* Verlauf bleibt als Grundfläche, solange das Video noch nicht da ist */
  background:var(--device);
  isolation:isolate;
}

/* Video randlos im Rahmen — 9:16 in einem etwas schmaleren Gehäuse,
   deshalb cover statt contain. */
.reel{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:transparent;
  border:0;
}
/* Leichte Abdunklung oben und unten, damit die Reel-Elemente lesbar bleiben,
   ohne das Bild flach zu machen. */
.phone__screen::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--c-media-shade) 0%, transparent 18%,
                                     transparent 74%, var(--c-media-shade) 100%);
}
/* Reel-Fortschrittsbalken */
.reelbar{ position:absolute; top:11px; left:10px; right:10px; z-index:2; display:flex; gap:4px; }
.reelbar i{ flex:1; height:2px; border-radius:2px; background:var(--c-on-media-dim); }
.reelbar i.on{ background:var(--c-on-media); }
/* Icon-Leiste rechts */
.reelrail{
  position:absolute; right:9px; bottom:18px; z-index:2;
  display:flex; flex-direction:column; gap:14px;
  color:var(--c-on-media);
}
.reelrail svg{ width:17px; height:17px; }
@media (max-width:719px){
  .reelrail{ right:6px; bottom:12px; gap:9px; }
  .reelrail svg{ width:12px; height:12px; }
  .reelbar{ top:8px; left:7px; right:7px; gap:3px; }
  .phone{ padding:4px; border-radius:18px; }
  .phone__screen{ border-radius:15px; }
}
/* Kein eigener Untertitel-Block mehr: die Videos tragen ihren Text
   bereits eingebrannt. Zwei Textebenen übereinander wirken unsauber. */
/* Bei laufendem Video wäre ein Play-Knopf widersprüchlich — entfällt. */

/* Schwebende Faktenkarten */
.floatcard{
  display:none;
  position:absolute;
  align-items:center; gap:9px;
  padding:11px 15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:.855rem; font-weight:500; color:var(--t1);
  white-space:nowrap;
  box-shadow:0 14px 30px -20px var(--c-shadow);
}
.floatcard svg{ color:var(--accent-text); flex:none; }
@media (min-width:980px){
  .floatcard{ display:inline-flex; }
  .fc-1{ top:14%;  left:2%; }
  .fc-2{ top:44%;  left:-2%; }
  .fc-3{ top:20%;  right:1%; }
  .fc-4{ top:52%;  right:-2%; }
}
@media (min-width:1200px){
  .fc-1{ left:6%; } .fc-2{ left:2%; } .fc-3{ right:5%; } .fc-4{ right:1%; }
}

/* ---------- 9. Faktenleiste ---------- */
.factbar{
  border-block:1px solid var(--line-soft);
  background:var(--bg);
}
.factbar ul{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line-soft);
}
.factbar li{
  background:var(--bg);
  padding:var(--s-4) var(--s-3);
  display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;
}
.factbar b{ font-size:1.02rem; font-weight:600; color:var(--t1); letter-spacing:-.01em; }
.factbar span{ font-size:.82rem; color:var(--t3); }
@media (min-width:820px){
  .factbar ul{ grid-template-columns:repeat(4,1fr); }
  .factbar li{ padding:var(--s-5) var(--s-4); }
}

/* ---------- 10. Split-Sektionen ---------- */
.split{
  display:grid; gap:var(--s-6);
  align-items:center;
}
@media (min-width:960px){
  .split{ grid-template-columns:1fr 1fr; gap:var(--s-8); }
  .split--rev .split__media{ order:2; }
}
/* Rasterzellen haben min-width:auto und wachsen sonst über die Spur hinaus,
   sobald der Inhalt eine Mindestbreite verlangt. */
.split > *{ min-width:0; }
.split__body{ display:flex; flex-direction:column; gap:var(--s-4); align-items:flex-start; }
.split__body h2{ max-width:15ch; }

/* „Was macht Clyft" — die fünf Zeilen sind der Kern der Sektion, deshalb
   werden sie groß gesetzt und an einer Akzentlinie aufgereiht. Kein Kasten,
   keine Symbole: die Größe trägt, nicht die Dekoration. */
.willst{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s-4); text-align:center;
}
.willst__titel{ max-width:16ch; }

.willst__label{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text);
}

.willst__liste{
  position:relative;
  margin-top:var(--s-2);
  padding-left:clamp(22px, 4vw, 36px);
  text-align:left;
  display:flex; flex-direction:column;
  gap:clamp(10px, 1.7vw, 18px);
}
/* Senkrechte Linie, die die Zeilen zusammenhält und nach unten ausläuft. */
.willst__liste::before{
  content:"";
  position:absolute; left:0; top:.34em; bottom:.34em;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent) 0%, transparent 100%);
}
.willst__liste li{
  font-size:clamp(1.32rem, 4.1vw, 2.1rem);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.25;
  color:var(--t1);
  text-wrap:balance;
}

.willst__ende{
  margin-top:var(--s-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
}

/* Zeilen laufen nacheinander ein — als Animation, damit die Verzögerung
   nichts anderes ausbremst. */
.js .willst__liste[data-in="true"] li{ animation:willstEin 560ms var(--ease) both; }
.js .willst__liste[data-in="true"] li:nth-child(1){ animation-delay:.06s; }
.js .willst__liste[data-in="true"] li:nth-child(2){ animation-delay:.14s; }
.js .willst__liste[data-in="true"] li:nth-child(3){ animation-delay:.22s; }
.js .willst__liste[data-in="true"] li:nth-child(4){ animation-delay:.30s; }
.js .willst__liste[data-in="true"] li:nth-child(5){ animation-delay:.38s; }
@keyframes willstEin{
  from{ opacity:0; transform:translateX(-16px); }
  to{ opacity:1; transform:none; }
}

/* ---------- 11. Ziel-Karten ---------- */
.goals{ display:grid; gap:var(--s-3); }
@media (min-width:760px){ .goals{ grid-template-columns:1fr 1fr; gap:var(--s-4); } }
.goal{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); }
.goal__ico{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--accent);
  color:var(--on-accent);                   /* Symbol 5,17:1 */
  margin-bottom:var(--s-1);
}

/* ---------- 12. Leistungsraster ---------- */
.grid-3{ display:grid; gap:var(--s-3); }
@media (min-width:640px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .grid-3{ grid-template-columns:repeat(3,1fr); gap:var(--s-4); } }

.svc{ display:flex; flex-direction:column; gap:10px; padding:var(--s-4) var(--s-4) var(--s-5); }
.svc__ico{
  align-self:flex-start; margin-bottom:10px;
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);           /* 5,17:1 */
}
.svc h3{ font-size:1.05rem; }
.svc p{ font-size:.95rem; color:var(--t3); line-height:1.55; }

/* ---------- 13. Ablauf ---------- */
.steps{ display:grid; gap:var(--s-3); }
@media (min-width:700px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .steps{ grid-template-columns:repeat(5,1fr); gap:var(--s-2); align-items:stretch; } }

.step{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4);
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  background:var(--surface);
}
.step__n{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--accent);
  font-size:.9rem; font-weight:600; color:var(--on-accent);   /* 5,17:1 */
  font-variant-numeric:tabular-nums;
}
.step h3{ font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--t1); }
.step p{ font-size:.94rem; color:var(--t3); line-height:1.55; flex:1; }
.step__meta{
  padding-top:var(--s-3);
  border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--t4);
}
/* Der aktive Schritt: weiß, blauer Rahmen, leichter neutraler Schatten. */
.step--active{
  border-color:var(--accent);
  background:var(--c-white);
  box-shadow:0 18px 36px -26px var(--c-shadow);
}
.step--active p{ color:var(--t2); }
.step--active .btn{ min-height:46px; padding:11px 18px; font-size:.92rem; }

/* ---------- 14. Pakete ---------- */
.pakete{ display:grid; gap:var(--s-4); }
@media (min-width:760px){ .pakete{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .pakete{ grid-template-columns:repeat(3,1fr); } }

.paket{
  position:relative;
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-5) var(--s-4);
}
.paket__name{ font-size:1.6rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; }

.paket__liste{ gap:13px; }
.paket__liste li{ font-size:.96rem; }
/* Die beiden Mengenangaben führen die Liste an und stehen etwas kräftiger. */
.paket__liste li:nth-child(-n+2){ color:var(--t1); font-weight:500; }

/* Buttons stehen bündig am unteren Kartenrand, egal wie lang die Liste ist. */
.paket__cta{ margin-top:auto; }

/* Hervorgehobenes mittleres Paket */
.paket--top{
  border-color:var(--accent);
  background:var(--surface);
}
.paket--top .paket__name{ color:var(--accent-text); }
.paket__badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center;
  padding:5px 14px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- 15. Häufige Fragen ---------- */
.faq{
  display:flex; flex-direction:column; gap:10px;
  max-width:820px; margin-inline:auto; width:100%;
}
.faq__item{
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  background:var(--surface);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq__item[open]{ border-color:var(--accent); background:var(--surface); }
@media (hover:hover){ .faq__item:hover{ border-color:var(--accent); } }

.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:60px; padding:16px var(--s-4);
  cursor:pointer;
  font-size:1.05rem; font-weight:500; line-height:1.4; color:var(--t1);
  list-style:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Das voreingestellte Dreieck entfernen — auch in Safari. */
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::marker{ content:""; }
.faq__item summary:focus-visible{ outline:2px solid var(--focus); outline-offset:-3px; }

.faq__chevron{
  flex:none; color:var(--accent-text);
  transition:transform 260ms var(--ease);
}
.faq__item[open] .faq__chevron{ transform:rotate(180deg); }

.faq__antwort{
  padding:0 var(--s-4) var(--s-4);
  border-top:1px solid var(--line-soft);
  margin-top:-1px;
}
.faq__antwort p{
  padding-top:var(--s-3);
  color:var(--t2); line-height:1.62; text-wrap:pretty;
}

/* Die Höhe animiert clyft.js über die Web Animations API — dort ist der
   Zielwert bekannt, in CSS nicht. Hier bleibt nur das Einblenden des Texts,
   leicht verzögert, damit er nicht schon im halb offenen Spalt steht. */
@media (prefers-reduced-motion: no-preference){
  .faq__item[open] .faq__antwort{ animation:faqAuf 260ms var(--ease) 90ms both; }
}
@keyframes faqAuf{
  from{ opacity:0; }
  to{ opacity:1; }
}
/* Während des Zuklappens läuft die Öffnen-Animation nicht erneut an. */
.faq__item[data-schliesst="true"] .faq__antwort{ animation:none; }

/* ---------- 16. Abschluss-CTA ---------- */
/* Der Abschluss nimmt das Raster aus dem Kopfbereich wieder auf — die Seite
   schließt damit optisch dort, wo sie begonnen hat. Ein zentrierter Block:
   Überschrift, Knopf, Randnotiz. Nichts daneben, das ablenkt. */
.close{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:0 30px 60px -44px var(--c-shadow);   /* neutral, kein Glow */
  padding:var(--s-7) var(--s-4);
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s-5); text-align:center;
}
@media (min-width:900px){ .close{ padding:var(--s-8) var(--s-7); } }

.close{ --rg:clamp(56px, 10vw, 112px); }
.close::before,
.close::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.close::before{
  background-image:
    linear-gradient(to right,  var(--pattern) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pattern) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(110% 100% at 50% 0%, var(--c-mask), transparent 74%);
          mask-image:radial-gradient(110% 100% at 50% 0%, var(--c-mask), transparent 74%);
}
.close::after{
  background:
    radial-gradient(circle at 50% 135%,
      transparent 0px,
      transparent calc(var(--rg) * 2 - 2px),
      var(--deko-line) calc(var(--rg) * 2 - 1.2px),
      var(--deko-line) calc(var(--rg) * 2 - .8px),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 3 - 2px),
      var(--deko-line) calc(var(--rg) * 3 - 1.2px),
      var(--deko-line) calc(var(--rg) * 3 - .8px),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 4 - 2px),
      var(--deko-line) calc(var(--rg) * 4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4 - .8px),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 5 - 2px),
      var(--deko-line) calc(var(--rg) * 5 - 1.2px),
      var(--deko-line) calc(var(--rg) * 5 - .8px),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 6 - 2px),
      var(--deko-line) calc(var(--rg) * 6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 6 - .8px),
      transparent calc(var(--rg) * 6),
      transparent calc(var(--rg) * 6),
      transparent calc(var(--rg) * 7 - 2px),
      var(--deko-line) calc(var(--rg) * 7 - 1.2px),
      var(--deko-line) calc(var(--rg) * 7 - .8px),
      transparent calc(var(--rg) * 7)),
    radial-gradient(circle at 100% 0%,
      var(--deko-fill) 0 calc(var(--rg) * 1.5 - 1px),
      transparent calc(var(--rg) * 1.5),
      transparent calc(var(--rg) * 2.2 - 2px),
      var(--deko-line-2) calc(var(--rg) * 2.2 - 1.2px),
      var(--deko-line-2) calc(var(--rg) * 2.2 - .8px),
      transparent calc(var(--rg) * 2.2));
}
.close > *{ position:relative; z-index:1; }
.close .tiny{ max-width:46ch; }

/* Auf schmalen Displays greift der Daumen den Knopf über die volle Breite. */
@media (max-width:559px){ .close .btn{ width:100%; } }

/* .checks wird auch von den Paketlisten benutzt — bleibt deshalb hier stehen. */
.checks{ display:flex; flex-direction:column; gap:11px; width:100%; }
.checks li{ display:flex; gap:11px; align-items:flex-start; color:var(--t2); font-size:.98rem; line-height:1.5; }
.checks svg{ flex:none; margin-top:3px; color:var(--accent-text); }

/* ---------- 17. Footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); padding-block:var(--s-6) var(--s-5); }
.footer{ display:flex; flex-direction:column; gap:var(--s-4); }
.footer__top{ display:flex; flex-direction:column; gap:var(--s-3); }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.footer__links a{
  font-size:.9rem; color:var(--t3); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color var(--dur) var(--ease);
}
.footer__links a:hover{ color:var(--t1); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4);
  justify-content:space-between; align-items:center;
  padding-top:var(--s-4); border-top:1px solid var(--line-soft);
}
@media (min-width:820px){
  .footer__top{ flex-direction:row; justify-content:space-between; align-items:center; }
}

/* ---------- 18. Mobile Sticky-CTA ---------- */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:var(--c-stickybar-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  transform:translateY(105%);
  transition:transform 280ms var(--ease);
}
.stickybar[data-show="true"]{ transform:translateY(0); }
@media (min-width:900px){ .stickybar{ display:none; } }
body:has(.stickybar[data-show="true"]) .site-footer{ padding-bottom:96px; }

/* ---------- 19. Scroll-Reveal ---------- */
/* Nur die .js-Klasse blendet aus. Sie wird per Inline-Skript im <head>
   gesetzt. Fällt JavaScript aus, bleibt die Seite vollständig lesbar,
   statt dass unterhalb des Heros alles unsichtbar ist. */
.js .reveal{ opacity:0; transform:translateY(26px); }
/* Die Deckkraft ist vor der Bewegung fertig. Dadurch steht der Text schon
   lesbar da, während er die letzten Pixel noch ausgleitet — das nimmt dem
   Einblenden das Ruckartige. */
.reveal[data-in="true"]{
  opacity:1; transform:none;
  transition:opacity 660ms var(--ease-glide), transform 980ms var(--ease-glide);
}
.reveal-d1[data-in="true"]{ transition-delay:90ms; }
.reveal-d2[data-in="true"]{ transition-delay:180ms; }
.reveal-d3[data-in="true"]{ transition-delay:270ms; }
.reveal-d4[data-in="true"]{ transition-delay:360ms; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .reel{ /* Autoplay unterbleibt per JS, das Poster bleibt sichtbar */ }
  .stickybar{ transition:none; }
}

/* ---------- 20. Hilfsklassen ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--accent); color:var(--on-accent);
  padding:12px 20px; border-radius:var(--r-sm); text-decoration:none; font-weight:600;
  transition:top 160ms var(--ease);
}
.skip:focus{ top:12px; }
.stack{ display:flex; flex-direction:column; }
.gap-2{ gap:var(--s-2); } .gap-3{ gap:var(--s-3); }
.gap-4{ gap:var(--s-4); } .gap-5{ gap:var(--s-5); } .gap-6{ gap:var(--s-6); }
.center{ text-align:center; align-items:center; }
.center .lead{ margin-inline:auto; }
.mw-58{ max-width:58ch; }

/* ============================================================
   21. Buchungsseite
   ============================================================ */
.book{
  min-height:100svh;
  display:flex; flex-direction:column;
}
/* Flex-Kinder mit margin-inline:auto schrumpfen sonst auf Inhaltsbreite,
   dadurch greift max-width der .wrap nicht mehr. */
.book > *{ width:100%; }
.book__main{ flex:1; padding-block:var(--s-5) var(--s-7); }
#formular::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
  --rg:clamp(50px, 9vw, 110px);
  background:radial-gradient(circle at 100% 0%,
      transparent 0px,
      transparent calc(var(--rg) * 2 - 2px),
      var(--deko-line) calc(var(--rg) * 2 - 1.2px),
      var(--deko-line) calc(var(--rg) * 2 - .8px),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 2),
      transparent calc(var(--rg) * 3 - 2px),
      var(--deko-line) calc(var(--rg) * 3 - 1.2px),
      var(--deko-line) calc(var(--rg) * 3 - .8px),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 3),
      transparent calc(var(--rg) * 4 - 2px),
      var(--deko-line) calc(var(--rg) * 4 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4 - .8px),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 4),
      transparent calc(var(--rg) * 5 - 2px),
      var(--deko-line) calc(var(--rg) * 5 - 1.2px),
      var(--deko-line) calc(var(--rg) * 5 - .8px),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 5),
      transparent calc(var(--rg) * 6 - 2px),
      var(--deko-line) calc(var(--rg) * 6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 6 - .8px),
      transparent calc(var(--rg) * 6));
  -webkit-mask-image:linear-gradient(180deg, var(--c-mask) 0%, var(--c-mask) 40%, transparent 90%);
          mask-image:linear-gradient(180deg, var(--c-mask) 0%, var(--c-mask) 40%, transparent 90%);
}
@media (min-width:960px){
  #formular::before{
    background:radial-gradient(circle at 100% 0%,
      var(--deko-fill) 0 calc(var(--rg) * 1.6 - 1px),
      transparent calc(var(--rg) * 1.6),
      transparent calc(var(--rg) * 2.6 - 2px),
      var(--deko-line) calc(var(--rg) * 2.6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 2.6 - .8px),
      transparent calc(var(--rg) * 2.6),
      transparent calc(var(--rg) * 2.6),
      transparent calc(var(--rg) * 3.6 - 2px),
      var(--deko-line) calc(var(--rg) * 3.6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 3.6 - .8px),
      transparent calc(var(--rg) * 3.6),
      transparent calc(var(--rg) * 3.6),
      transparent calc(var(--rg) * 4.6 - 2px),
      var(--deko-line) calc(var(--rg) * 4.6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 4.6 - .8px),
      transparent calc(var(--rg) * 4.6),
      transparent calc(var(--rg) * 4.6),
      transparent calc(var(--rg) * 5.6 - 2px),
      var(--deko-line) calc(var(--rg) * 5.6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 5.6 - .8px),
      transparent calc(var(--rg) * 5.6),
      transparent calc(var(--rg) * 5.6),
      transparent calc(var(--rg) * 6.6 - 2px),
      var(--deko-line) calc(var(--rg) * 6.6 - 1.2px),
      var(--deko-line) calc(var(--rg) * 6.6 - .8px),
      transparent calc(var(--rg) * 6.6));
  }
}

/* Handy: Einstieg, dann sofort das Formular, Vertrauensblock darunter.
   Der Nutzer kommt meist aus der Instagram-Bio und soll nicht scrollen müssen. */
.book__grid{ display:grid; gap:var(--s-5); }
.book__intro{ display:flex; flex-direction:column; gap:var(--s-2); }
.book__intro .body{ max-width:46ch; }
.book__trust{ display:flex; flex-direction:column; gap:var(--s-4); }
.book__trust .checks li{ font-size:.95rem; }

@media (min-width:940px){
  .book__grid{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-rows:auto 1fr;
    column-gap:var(--s-8); row-gap:var(--s-5);
    align-items:start;
  }
  .book__intro{ grid-column:1; grid-row:1; gap:var(--s-3); }
  .book__trust{ grid-column:1; grid-row:2; }
  .form-card{ grid-column:2; grid-row:1 / span 2; }
}

/* Formular-Karte */
.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-4) var(--s-6);
}
@media (min-width:640px){ .form-card{ padding:var(--s-6); } }

/* Fortschritt */
.progress{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--s-5); }
.progress__bar{
  height:4px; border-radius:4px; background:var(--line); overflow:hidden;
}
.progress__fill{
  height:100%; width:33.33%;
  background:var(--accent);
  border-radius:4px;
  transition:width 420ms var(--ease);
}
.progress__label{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3);
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t4);
}
.progress__label b{ color:var(--accent-text); font-weight:600; }

/* Schritte */
.fstep{ display:flex; flex-direction:column; gap:var(--s-4); }
.fstep__head{ display:flex; flex-direction:column; gap:8px; }
.fstep__head h2{ font-size:clamp(1.35rem,4.4vw,1.75rem); }
.fstep__head p{ font-size:.95rem; color:var(--t3); }

/* Auswahlkarten */
.choices{ display:flex; flex-direction:column; gap:10px; }
.choice{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:64px; padding:14px 18px;
  border:1px solid var(--control);
  border-radius:var(--r);
  background:var(--surface);
  cursor:pointer;
  /* Ohne das markiert ein Tipp auf dem Handy den Text, statt die Option
     auszuwählen — die Karte wirkt dann wie kaputt. */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (hover:hover){ .choice:hover{ border-color:var(--accent); background:var(--surface-2); } }
.choice input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.choice__mark{
  width:22px; height:22px; flex:none; border-radius:50%;
  border:1.5px solid var(--control);
  display:grid; place-items:center;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice__mark::after{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--on-accent); transform:scale(0);
  transition:transform 180ms var(--ease);
}
.choice__txt b{ display:block; font-size:1rem; font-weight:500; color:var(--t1); line-height:1.35; }
.choice__txt span{ display:block; font-size:.87rem; color:var(--t3); line-height:1.4; margin-top:2px; }

/* Der Punkt funktioniert über den Geschwister-Selektor — das versteht
   jeder Browser, auch ohne :has(). */
.choice input:checked + .choice__mark{ border-color:var(--accent); background:var(--accent); }
.choice input:checked + .choice__mark::after{ transform:scale(1); }

/* Kartenhintergrund: .is-on wird per JS gesetzt. Bewusst als eigene Regel —
   stünde :has() in derselben Selektorliste, würde ein Browser ohne :has()
   die komplette Regel verwerfen und auch .is-on wäre wirkungslos. */
.choice.is-on{
  border-color:var(--accent);
  background:var(--accent-soft);
}
/* Rückfall, falls das Skript nicht läuft (nur neuere Browser). */
.choice:has(input:checked){
  border-color:var(--accent);
  background:var(--accent-soft);
}
.choice:focus-within{ outline:2px solid var(--focus); outline-offset:3px; }

/* Felder */
.fields{ display:flex; flex-direction:column; gap:var(--s-4); }
@media (min-width:620px){
  .fields--2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
  .field--full{ grid-column:1 / -1; }
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.88rem; font-weight:500; color:var(--t2); }
.field label .opt{ color:var(--t4); font-weight:400; }

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  background:var(--field-bg);
  border:1px solid var(--control);
  border-radius:var(--r-sm);
  color:var(--t1);
  font-size:16px;               /* verhindert Zoom beim Fokus auf iOS */
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea{ min-height:112px; resize:vertical; line-height:1.55; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--t4); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  background:var(--field-bg);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled{
  background:var(--c-bg); border-color:var(--line);
  color:var(--t3); cursor:not-allowed;
}
.field .hint{ font-size:.82rem; color:var(--t4); }

/* Fehler direkt am Feld */
.field[data-error="true"] input,
.field[data-error="true"] select,
.field[data-error="true"] textarea{ border-color:var(--c-danger); }
.err{
  display:none;
  align-items:center; gap:6px;
  font-size:.84rem; color:var(--c-danger);
}
.field[data-error="true"] .err,
.choices[data-error="true"] + .err{ display:flex; }
.choices[data-error="true"] .choice{ border-color:var(--c-danger); }

/* Navigation im Formular */
.fnav{
  display:flex; flex-direction:column-reverse; gap:10px;
  margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);
}
@media (min-width:560px){
  .fnav{ flex-direction:row; align-items:center; justify-content:space-between; }
  .fnav .btn{ min-width:150px; }
}
.fnav .btn{ width:100%; }
@media (min-width:560px){ .fnav .btn{ width:auto; } }
.fnav__spacer{ display:none; }
@media (min-width:560px){ .fnav__spacer{ display:block; } }

.btn[aria-busy="true"]{ pointer-events:none; opacity:.72; }
.spinner{
  width:17px; height:17px; border-radius:50%;
  border:2px solid var(--c-spinner-track);
  border-top-color:var(--on-accent);
  animation:spin 700ms linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Erfolg */
.done{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4); text-align:center; padding-block:var(--s-4); }
.done__ico{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--c-success-soft);
  color:var(--c-success);                   /* 4,81:1 */
}
.done .lead{ max-width:44ch; }

/* Sammelfehler */
.formerr{
  display:none; gap:11px; align-items:flex-start;
  padding:14px 16px; margin-top:var(--s-4);
  border:1px solid var(--c-danger);
  border-radius:var(--r-sm);
  background:var(--c-danger-soft);
  color:var(--c-danger); font-size:.92rem; line-height:1.5;   /* 5,75:1 */
}
.formerr[data-show="true"]{ display:flex; }

/* ============================================================
   22. Rechtstexte
   ============================================================ */
.legal{ max-width:72ch; display:flex; flex-direction:column; gap:var(--s-4); }
.legal h1{ margin-bottom:var(--s-1); }
.legal h2{ margin-top:var(--s-5); }
.legal .body{ max-width:none; }
.legal a{ display:inline; min-height:0; }

.legal__list{
  display:flex; flex-direction:column; gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
}
.legal__list > div{
  background:var(--bg); padding:var(--s-3) var(--s-4);
  display:grid; gap:2px;
}
@media (min-width:620px){
  .legal__list > div{ grid-template-columns:minmax(0,15rem) 1fr; gap:var(--s-4); align-items:baseline; }
}
.legal__list dt{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t4); }
.legal__list dd{ margin:0; color:var(--t1); }