/* ============================================================
   Latent Webdesign & KI — Token-System

   Signature: der Wellen-Hero. Linien pendeln zwischen Rauschen und
   paralleler Ordnung — „latent" als Bewegung. Das ist die eine Stelle
   mit Boldness; alles andere hält bewusst still.

   Typo: Paarung auf der Kontrastachse. Bitter (Slab) trägt Display,
   Hanken Grotesk Body und UI. Herkunft der Slab ist die Welt der Zielgruppe —
   Firmenschild, Preisaushang — nicht die Editorial-Ecke.

   Ein Akzent (Emailschild-Blau), höchstens 3× pro Viewport: primärer CTA
   und aktiver Navigationszustand. Sonst tragen Ink-Stufen die Hierarchie.

   Radius: --r-s für Flächen, --r-pill für Buttons. Schatten: keine —
   Flächen trennen sich über Haarlinien und Papier/Panel-Wechsel.
   ============================================================ */

:root{
  /* Farben — monochrom, KÜHL, kein Akzentton.
     Vorher lief die Seite auf warmem Off-White (#FAF9F7/#F1F0EC). Das ist die
     Cream/Bone/Parchment-Familie von der Bannliste — und meine eigene
     Wiederholung aus Cosmatae und Geodril. Ersetzt durch kühles Neutral:
     die Welt der Zielgruppe ist Emailschild, Zinkblech, weißer Handzettel,
     nicht Pergament. Warmes Papier war eine Design-Welt-Affektiertheit.
     Drei Textstufen, alle gegen --paper UND --panel gemessen.
     --hairline ist eine Linienfarbe und darf NIE Text tragen. */
  --paper:      #F3F4F5;
  --panel:      #E7E9EA;
  --ink:        #121416;
  --ink-soft:   rgba(18,20,22,.72);   /* Sekundärtext, Lead, Fließtext */
  --ink-mute:   rgba(18,20,22,.62);   /* Labels, Meta — untere Grenze */
  --hairline:   rgba(18,20,22,.14);   /* nur Linien */
  --deep:       #101214;            /* dunkle Bühne (Hero-Motion, Kontakt) */
  --deep-text:  #EFF1F3;
  --deep-mute:  rgba(239,241,243,.64);  /* 6.7:1 auf --deep */
  --deep-line:  rgba(239,241,243,.18);

  /* Akzent — EIN Ton, gedecktes Emailschild-Blau. Herkunft: die emaillierten
     Schilder an Werkstatt und Ladenzeile. Bewusst nicht Terrakotta/Clay und
     nicht Acid-Grün (Bannliste), und nicht das Grün aus Geodril.
     Floor: höchstens 3 Vorkommen pro Viewport — hier primärer CTA und aktiver
     Navigationszustand, sonst nichts. Auf der dunklen Bühne reicht der dunkle
     Ton nicht (1,9:1), deshalb eine aufgehellte Variante. */
  --accent:         #12495C;
  --accent-hi:      #0D3A4A;        /* Hover auf hellem Grund */
  --accent-on-deep: #6FB8D0;        /* 8,5:1 auf --deep */

  --focus:      #121416;            /* Alt-Referenzen aus Markup laufen auf Ink */

  /* Aliase für Inline-Styles aus der ersten Iteration.
     --ink-faint lief früher auf 40% Alpha = 2.6:1 und fiel durch;
     es zeigt jetzt auf --ink-mute, damit Alt-Markup automatisch passt. */
  --ink-faint:  var(--ink-mute);
  --ink-60:     var(--ink-soft);
  --ink-40:     var(--ink-mute);
  --line:       var(--hairline);

  /* Typografie — Paarung auf der Kontrastachse Serif ↔ Sans.
     Zwischenschritt war EINE Grotesk-Familie in mehreren Gewichten. Das erfüllt
     die Font-Ökonomie, aber Display, Body, Nav und UI liefen dann auf demselben
     Neo-Grotesk und der Gewichtssprung musste die ganze typografische Arbeit
     machen — genau das Muster von der Bannliste.
     Bitter (Slab) trägt jetzt Display: kräftige Serifen, keine Didone-Eleganz.
     Herkunft ist die Welt der Zielgruppe — altes Firmenschild, gedruckte
     Preisliste. Hanken Grotesk bleibt Body und UI und hält still. */
  --f-display:  'Bitter', Georgia, 'Times New Roman', serif;
  --f-body:     'Hanken Grotesk', system-ui, sans-serif;
  --f-mono:     'Hanken Grotesk', system-ui, sans-serif;

  --w-display:  500;   /* Display-Grundgewicht */
  --w-accent:   700;   /* Betonung im Display — ersetzt die Kursive */

  --fs-label:   13px;
  --fs-s:       14.5px;
  --fs-body:    16.5px;
  --fs-lead:    clamp(17px, 2vw, 21px);
  --fs-h3:      clamp(21px, 2.2vw, 26px);
  --fs-h2:      clamp(32px, 4.4vw, 56px);
  --fs-h1:      clamp(36px, 5.9vw, 96px);

  /* Raster */
  --sec:        clamp(88px, 12vw, 176px);
  --gutter:     clamp(20px, 4vw, 36px);
  --maxw:       1240px;

  --r-s:  12px;        /* der EINE Flaechen-Radius */
  --r-m:  var(--r-s);  /* Alt-Alias aus der ersten Iteration */
  --r-pill: 999px;     /* Form, kein zweiter Radius */

  --ease: cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- Typo-Rollen ---------- */
h1,h2,.display{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  letter-spacing:-0.045em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:1.02}
h2{font-size:var(--fs-h2)}
h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);letter-spacing:-0.02em;line-height:1.25}

.lead{font-size:var(--fs-lead);line-height:1.65;color:var(--ink-soft);font-weight:400}
.mute{color:var(--ink-soft)}

/* Kicker: der EINE Eyebrow pro Seitenabschnitt, nicht pro Sektion.
   Zählregel: max. 1 pro 3 Sektionen. Funktionale Beschriftungen
   (Vorher/Nachher, Formularfelder) benutzen .lbl, nicht .kicker. */
.kicker{
  font-family:var(--f-body);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
}
.kicker::before{content:none}

/* .lbl — sachliche Beschriftung. Kein Uppercase-Tracking, damit sie nicht
   als weiterer Eyebrow gelesen wird. */
.lbl{
  font-family:var(--f-body);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  display:block;
}

/* Betonung im Display: Gewichtssprung 500 -> 700 innerhalb der Slab.
   Kursive wäre die Reflexlösung und stand in zwei Vorprojekten; von Bitter
   liegt ohnehin nur der aufrechte Schnitt lokal. */
.focus-mark{font-weight:var(--w-accent);white-space:normal;padding:0}
.focus-mark::before,.focus-mark::after{content:none}

/* Reticle-Ecken abgeschafft */
.reticle::before,.reticle::after,
.reticle>.rt::before,.reticle>.rt::after{content:none}

/* ---------- Motion ---------- */
/* Hero-Reveal: sanftes Scharfziehen + Anheben, einmal orchestriert */
.focus-pull{animation:rise-focus 1.4s var(--ease) both}
@keyframes rise-focus{
  from{opacity:0;transform:translateY(26px);filter:blur(10px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.rise{opacity:0;animation:rise .9s var(--ease) forwards}
.rise.d1{animation-delay:.15s}
.rise.d2{animation-delay:.3s}
.rise.d3{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Scroll-Reveal — der Default ist SICHTBAR.
   Vorher stand opacity:0 unbedingt im Stylesheet: ohne JS blieben 8 von 10
   Blöcken unter dem Hero dauerhaft unsichtbar (gemessen). Zwei Sicherungen:

   1. @media (scripting: enabled) — ohne JS wird gar nicht erst versteckt,
      ohne Aufblitzen. Ältere Browser matchen die Query nicht und zeigen
      den Inhalt ebenfalls: die Degradierung geht in die sichere Richtung.
   2. reveal-safety — falls JS läuft, aber der Observer nie aufgesetzt wird
      (JS-Fehler, Skript 404), holt eine verzögerte Animation den Inhalt
      nach 4s auf denselben Endzustand wie .in. site.js bestellt diese
      Sicherung mit .js-reveal ab, sobald der Observer wirklich hängt —
      sonst würde sie nach 4s jeden weiteren Reveal überschreiben. */
@media (scripting: enabled){
  [data-reveal]{
    opacity:0;transform:translateY(44px);
    transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
    animation:reveal-safety 1ms linear 4s forwards;
  }
  [data-reveal].in{opacity:1;transform:none}

  /* Mask-Reveal für Bilder/Panels: Fläche öffnet sich, Inhalt zieht auf Maß */
  [data-reveal="mask"]{
    opacity:1;transform:none;
    clip-path:inset(16% 7% 16% 7% round var(--r-m));
    transition:clip-path 1.4s var(--ease);
    animation:mask-safety 1ms linear 4s forwards;
  }
  [data-reveal="mask"] img{
    transform:scale(1.08);transition:transform 1.6s var(--ease);
  }
  [data-reveal="mask"].in{clip-path:inset(0 0 0 0 round var(--r-m))}
  [data-reveal="mask"].in img{transform:none}
}
.js-reveal [data-reveal]{animation:none}
@keyframes reveal-safety{to{opacity:1;transform:none}}
@keyframes mask-safety{to{clip-path:inset(0 0 0 0 round var(--r-m))}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .focus-pull,.rise{opacity:1!important;transform:none!important;filter:none!important}
  .ruler-track{animation:none!important}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:15px;
  padding:16px 30px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .5s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hi)}
.btn-primary .dot{display:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-on-deep{background:var(--accent-on-deep);color:var(--ink)}
.btn-on-deep:hover{background:#8CCBE0}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  min-height:44px;border-bottom:1px solid var(--hairline);
  transition:border-color .35s ease;
}
.tlink:hover{border-color:var(--ink)}
.tlink svg{transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(243,244,245,.72);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,background .4s ease;
}
.site-header.scrolled{border-bottom-color:var(--hairline);background:rgba(243,244,245,.93)}
.site-header .bar{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-0.03em;display:inline-flex;align-items:baseline;gap:9px;min-height:44px;padding-block:6px}
.brand small{font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.dnav{display:flex;align-items:center;gap:30px}
.dnav a.nl{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:color .3s ease}
.dnav a.nl::after{
  content:"";position:absolute;left:0;right:100%;bottom:11px;height:1px;background:var(--ink);
  transition:right .5s var(--ease);
}
.dnav a.nl:hover{color:var(--ink)}
.dnav a.nl:hover::after{right:0}
.dnav a.nl[aria-current="page"]{color:var(--accent)}
.dnav a.nl[aria-current="page"]::after{right:0;background:var(--accent)}
.dnav .btn{padding:12px 24px;font-size:14px}
.burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--hairline);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;
}
.mnav{
  position:absolute;top:100%;left:0;right:0;
  display:none;flex-direction:column;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--paper);padding:12px var(--gutter) 26px;
  opacity:0;transform:translateY(-14px);pointer-events:none;visibility:hidden;
  transition:opacity .4s ease,transform .55s var(--ease),visibility 0s linear .45s;
}
.mnav a{
  font-family:var(--f-display);font-weight:600;font-size:22px;padding:16px 2px;letter-spacing:-0.02em;
  border-bottom:1px solid var(--hairline);color:var(--ink-soft);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .6s var(--ease);
}
.mnav a[aria-current="page"]{color:var(--accent);font-weight:700}
.mnav a.mcta{border:none;margin-top:18px;background:var(--accent);color:#fff;text-align:center;border-radius:var(--r-pill);padding:16px;font-family:var(--f-body);font-weight:600;font-size:15px;font-style:normal}
.mnav.open{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .45s ease,transform .6s var(--ease);
}
.mnav.open a{opacity:1;transform:none}
.mnav.open a:nth-child(1){transition-delay:.06s}
.mnav.open a:nth-child(2){transition-delay:.11s}
.mnav.open a:nth-child(3){transition-delay:.16s}
.mnav.open a:nth-child(4){transition-delay:.21s}
.mnav.open a:nth-child(5){transition-delay:.26s}
.mnav.open a:nth-child(6){transition-delay:.32s}
@media(max-width:840px){
  .dnav{display:none}
  .burger{display:inline-flex}
  .mnav{display:flex}
}

/* ---------- Sektionen ---------- */
.sec{padding:var(--sec) 0}
.sec-panel{background:var(--panel)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(44px,6vw,72px)}
.sec-head>div:first-child{flex:1 1 420px}
.sec-head .kicker,.sec-head .lbl{margin-bottom:20px}

/* ---------- Hero: full-bleed Motion-Bühne ---------- */
/* Der Textblock stand vorher unten angeschlagen: die oberen ~55% waren reine
   Wellenfläche, Botschaft und CTA klebten am unteren Rand, auf 390px lag der
   zweite Button auf der Faltkante. Jetzt sitzt der Block optisch zentriert,
   die Wellen atmen über UND unter ihm — das Merkmal rahmt die Aussage, statt
   sie wegzudrücken. */
.hero-stage{
  position:relative;overflow:hidden;background:var(--deep);color:var(--deep-text);
  /* Nicht 100svh: bei voller Viewporthöhe endete der Hero exakt auf der Falte,
     die leere untere Wellenfläche las wie das Seitenende — und der stärkste
     Beweis (Vorher/Nachher) lag komplett dahinter. Auf ~84svh schneidet die
     helle Folgesektion sichtbar an und ist selbst der Scroll-Hinweis. */
  min-height:clamp(540px,84svh,860px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Lesbarkeits-Scrim über der Text-Zone */
.hero-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,18,20,0) 0%,rgba(16,18,20,.5) 70%,rgba(16,18,20,.68) 100%);
}
.hero-content{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(96px,11vw,132px);   /* nur so viel, dass der Header freisteht */
  padding-bottom:clamp(72px,9vw,120px);
}
/* Lead und CTAs auf derselben linken Achse wie die Headline — vorher stand das
   Button-Paar per space-between weit rechts auf einer eigenen Achse. */
.hero-tail{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,3vw,34px)}
.hero-tail .lead{max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Mobil: justify-content:center hinterlässt unter dem CTA rund 200px tote
   dunkle Fläche — der Beweis rutscht dadurch komplett unter die Falte, auf
   genau dem Gerät, mit dem die Zielgruppe ankommt. Block unten ankern und
   Bühne kürzen, damit die helle Folgesektion direkt darunter ansetzt. */
@media(max-width:759px){
  /* Dritte Juror-Runde in Folge hat dieselbe Stelle genannt: ueber der
     Headline standen ~280px reine Textur ohne Information. Buehne weiter
     gekuerzt, damit der Leerraum oben schrumpft statt der Inhalt zu rutschen. */
  .hero-stage{min-height:min(64svh,560px);justify-content:flex-end}
  .hero-content{padding-top:clamp(88px,22vw,104px);padding-bottom:clamp(36px,6vw,48px)}
}
.hero-content .kicker{color:var(--deep-mute)}
.hero-content h1{color:var(--deep-text)}
.hero-content .lead{color:var(--deep-mute)}
/* Die Markenidee stand früher als vierte Textzeile im Hero und hat ihn über
   das Limit von 4 Elementen gebracht. Sie leitet jetzt den Beweis ein —
   dort trägt sie mehr, weil direkt darunter der Beleg steht. */
.ba-intro{
  max-width:44ch;margin-bottom:clamp(32px,4.5vw,56px);
  font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);
}
.ba-intro em{font-style:normal;font-weight:700;color:var(--ink)}

/* Header über dunklem Hero: transparent + helle Links, bis gescrollt wird */
body.home .site-header:not(.scrolled){
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.home .site-header:not(.scrolled) .brand,
body.home .site-header:not(.scrolled) .burger{color:var(--deep-text)}
body.home .site-header:not(.scrolled) .brand small{color:var(--deep-mute)}
body.home .site-header:not(.scrolled) .dnav a.nl{color:var(--deep-mute)}
body.home .site-header:not(.scrolled) .dnav a.nl:hover{color:var(--deep-text)}
body.home .site-header:not(.scrolled) .dnav a.nl[aria-current="page"]{color:var(--accent-on-deep)}
body.home .site-header:not(.scrolled) .dnav a.nl::after{background:var(--deep-text)}
body.home .site-header:not(.scrolled) .dnav a.nl[aria-current="page"]::after{background:var(--accent-on-deep)}
/* Auf dem Hero standen sonst zwei Pillen mit identischem Label im selben
   Viewport, in zwei Farben. Der Kopf-CTA wird zur Outline, damit die
   Akzent-Pille im Hero eindeutig die primäre Handlung ist. */
body.home .site-header:not(.scrolled) .btn-primary{background:transparent;color:var(--deep-text);border-color:var(--deep-line)}
body.home .site-header:not(.scrolled) .btn-primary:hover{background:transparent;border-color:var(--deep-text)}
body.home .site-header:not(.scrolled) .burger{border-color:var(--deep-line)}
body.home .site-header:not(.scrolled) .mnav{background:var(--deep);border-color:var(--deep-line)}
body.home .site-header:not(.scrolled) .mnav a{color:var(--deep-mute);border-color:var(--deep-line)}
body.home .site-header:not(.scrolled) .mnav a[aria-current="page"]{color:var(--accent-on-deep)}
body.home .site-header:not(.scrolled) .mnav a.mcta{background:var(--accent-on-deep);color:var(--ink)}

/* ---------- Editorial-Ticker ---------- */
.ruler{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  overflow:hidden;background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ruler-track{display:flex;width:max-content;animation:ruler-move 60s linear infinite}
.ruler-seg{display:flex;align-items:baseline}
.ruler-seg span{
  font-family:var(--f-display);font-weight:500;font-size:clamp(19px,2.1vw,25px);letter-spacing:-0.02em;
  color:var(--ink-mute);white-space:nowrap;padding:22px 0 24px;
}
.ruler-seg span::after{content:"·";margin:0 clamp(18px,2.4vw,34px);color:var(--ink-mute);font-size:.7em;vertical-align:.15em}
.ruler-seg span.svc{color:var(--ink);font-weight:700}
.ruler-seg span.svc::before{content:none}
@keyframes ruler-move{to{transform:translateX(-50%)}}

/* ---------- Leistungs-Liste, editorial ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hairline)}
.svc-grid.two{grid-template-columns:1fr}
.svc-grid>a,.svc-grid>div{
  display:grid;grid-template-columns:minmax(160px,.9fr) 1.4fr 1.6fr;gap:clamp(16px,3vw,48px);
  align-items:baseline;
  padding:clamp(26px,3.4vw,40px) 4px;border-bottom:1px solid var(--hairline);
  transition:background .4s ease,padding-left .5s var(--ease);
}
.svc-grid>a:hover{background:rgba(18,20,22,.03);padding-left:14px}
.svc-grid>div>p{grid-column:2/-1;max-width:68ch}
.svc-grid .kicker,.svc-grid .lbl{margin-bottom:0}
.svc-grid h3{margin-bottom:0}
.svc-grid p:not(.kicker):not(.lbl){font-size:var(--fs-s);line-height:1.65;color:var(--ink-soft)}
@media(max-width:840px){
  .svc-grid>a,.svc-grid>div{grid-template-columns:1fr;gap:10px;align-items:start}
}

/* ---------- Dunkle Bühne ---------- */
.deep-panel{
  background:var(--deep);color:var(--deep-text);
  border-radius:var(--r-m);overflow:hidden;
}
.deep-panel .kicker{color:var(--deep-mute)}
.deep-panel .lbl{color:var(--deep-text)}
.deep-panel .lead,.deep-panel .mute{color:var(--deep-mute)}
.deep-panel img{transition:transform 1.4s var(--ease)}
.deep-panel:hover img{transform:scale(1.025)}

/* ---------- Vorher/Nachher: zwei echte Screenshots, nebeneinander ----------
   Vorher war das ein Regler-Vergleich in einem Browser-Rahmen. Der Regler
   ist ausgerechnet durch die Überschrift beider Seiten gelaufen und hat auf
   390px beide Hälften unlesbar gemacht — der einzige echte Beweis der Seite
   hat nichts mehr kommuniziert. Zwei vollständige Bilder mit eigener
   Bildunterschrift sagen dasselbe und sind bei jeder Breite lesbar.
   Nebeneffekt: ein Signature-Kandidat weniger, der Wellen-Hero steht allein. */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
.shot{margin:0;min-width:0}
.shot .lbl{margin-bottom:10px}
.shot img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top center;
  border:1px solid var(--hairline);border-radius:var(--r-s);background:#fff;
}
.shot figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.ba-caption{margin-top:clamp(28px,4vw,44px);font-size:14.5px;line-height:1.6;color:var(--ink-soft);text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}
.ba-caption a{border-bottom:1px solid var(--hairline);padding-bottom:1px;font-weight:600;color:var(--ink);transition:border-color .3s ease}
.ba-caption a:hover{border-bottom-color:var(--ink)}
@media(max-width:719px){
  .ba-pair{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
}

/* ---------- Klartext-Aushang ----------
   Form aus der Welt der Zielgruppe: der Preisaushang im Schaufenster —
   Leistung links, Zahl rechts, Haarlinie dazwischen. Die Zahl trägt
   Display-Gewicht, weil sie hier das Argument ist. */
/* Asymmetrischer Split: Überschrift links, Aushang rechts. Vorher lag der
   Block in einem zentrierten 900px-Container — zusammen mit FAQ und Schluss-CTA
   waren das drei zentrierte Sektionen in Folge, was den Rhythmus-Floor reißt
   ("keine drei aufeinanderfolgenden Sektionen mit gleicher Struktur"). */
.rate-layout{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.rate-head{display:flex;flex-direction:column;gap:16px}
.rate-head p{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft)}
.rate-note{font-size:14.5px;line-height:1.7;color:var(--ink-mute)}

/* Die Zahlen standen vorher auf 38px Display-Gewicht. Das las als
   Big-Number/Small-Label-Kachel — genau das Statistik-Muster von der
   Bannliste. Jetzt Preisaushang-Maßstab: Zahl ist betont, aber keine
   Kennzahl, und drei der vier Werte sind ausgeschrieben statt numerisch. */
.rate{border-top:1px solid var(--ink)}
.rate>div{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 24px;padding:clamp(15px,1.9vw,20px) 2px;
  border-bottom:1px solid var(--hairline);
}
.rate dt{font-size:15.5px;line-height:1.55;color:var(--ink-soft);max-width:38ch}
.rate dd{
  font-weight:700;font-size:17px;line-height:1.4;
  letter-spacing:-0.01em;white-space:nowrap;
}
@media(max-width:759px){
  .rate-layout{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(22px,3vw,30px) 2px;
  font-family:var(--f-display);font-weight:600;font-size:clamp(17.5px,2.1vw,22px);letter-spacing:-0.02em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ind{
  flex:none;width:34px;height:34px;border:1px solid var(--hairline);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .6s var(--ease),background .3s ease,color .3s ease;
}
.faq details[open] summary .ind{transform:rotate(45deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.faq details p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);padding:0 2px 30px;max-width:64ch}

/* ---------- Karten ---------- */
.spec-card{border:1px solid var(--hairline);border-radius:var(--r-m);padding:clamp(24px,3vw,32px);background:#fff}
.spec-card .kicker,.spec-card .lbl{margin-bottom:14px}
.spec-card p{font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.spec-card.result{background:var(--deep);border-color:var(--deep);color:var(--deep-text)}
.spec-card.result p{color:rgba(239,241,243,.86)}
.spec-card.result .kicker{color:var(--deep-mute)}
.spec-card.result .lbl{color:var(--deep-text)}

.check-list li{display:flex;gap:12px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);padding:10px 0;border-bottom:1px solid var(--hairline)}
.check-list li:last-child{border-bottom:none}
.check-list .tick{flex:none;color:var(--ink);font-weight:600}

/* ---------- Formulare ---------- */
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px}
.inp{
  width:100%;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-s);
  padding:15px 16px;color:var(--ink);font-size:15px;font-family:var(--f-body);
  transition:border-color .3s ease;
}
.inp:focus{border-color:var(--ink);outline:none}
.inp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.inp::placeholder{color:var(--ink-mute)}
/* Felder auf der dunklen Bühne: ohne diese Regel erbt der Platzhalter
   dunkles Ink auf dunklem Grund und ist praktisch unsichtbar (1.1:1). */
.deep-panel .inp{color:var(--deep-text)}
.deep-panel .inp::placeholder{color:var(--deep-mute)}
.deep-panel .inp:focus{border-color:var(--deep-text)}
.deep-panel .inp:focus-visible{outline-color:var(--deep-text)}
.deep-panel .field label{color:var(--deep-mute)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.form-status{display:none;font-size:14px;line-height:1.6;color:var(--deep-mute);text-align:center;border:1px solid var(--deep-line);border-radius:var(--r-s);padding:12px 16px}
.form-status.show{display:block}
.form-done{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.4;text-align:center;padding:clamp(24px,4vw,48px) 0}
.form-done span{display:inline-block;margin-top:10px;font-family:var(--f-body);font-weight:400;font-size:15px;color:var(--deep-mute)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--hairline);background:var(--paper)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(36px,5vw,60px) clamp(24px,4vw,48px);padding:clamp(64px,9vw,104px) 0 clamp(32px,4vw,44px)}
.f-grid .kicker,.f-grid .lbl{margin-bottom:20px}
.f-grid nav{display:flex;flex-direction:column;font-size:14.5px;color:var(--ink-soft)}
.f-grid nav a{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;min-width:44px;border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease}
.f-grid nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.f-claim{font-family:var(--f-display);font-weight:500;font-size:clamp(23px,2.6vw,30px);letter-spacing:-0.03em;line-height:1.25;max-width:20ch;margin-top:16px}
.f-loc{margin-top:20px;font-size:14.5px;font-weight:400;color:var(--ink-soft)}
.f-loc::before{content:none}
.f-bottom{border-top:1px solid var(--hairline);padding:24px 0 34px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-mute)}
.f-bottom a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.f-bottom a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}

/* ---------- Hilfsraster ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(36px,5vw,72px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,40px)}

/* ---------- Case-Study-Raster ----------
   Vorher lagen die zwei Listen und der Ergebnis-Kasten als drei gleichrangige
   Elemente in einem auto-fit-Raster. Bei 700 bis 820px kippte das auf zwei
   Spalten, der Kasten rutschte allein in eine neue Zeile und stand gestaucht
   neben toter Fläche. Das Ergebnis ist aber ein Fazit, kein Nachbar der Listen:
   zwei Spalten für die Listen, der Kasten spannt immer über die volle Breite. */
.case-grid{
  padding:clamp(28px,4vw,48px) clamp(24px,4vw,52px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);align-items:start;
}
.case-grid>.spec-card.result{grid-column:1/-1}
@media(max-width:639px){
  .case-grid{grid-template-columns:1fr}
}

/* Die Hero-Headline sind zwei eigenstaendige Angebote, kein Satzgefuege.
   text-wrap:balance hat sie auf gleich lange Zeilen optimiert und dabei
   "Kunden / bringen." mitten im Begriff getrennt. Der Umbruch gehoert ans
   Satzende, deshalb hier ein harter <br> und kein Balancing. */
/* Headline traegt nur noch den einen Satz und darf dafuer voll aufdrehen.
   Die zweite Leistung steht als eigene Display-Zeile darunter: sie braucht
   einen vollstaendigen Satz, um verstanden zu werden, und den gibt eine
   Headline nicht her (gemessen: jede Fassung mit Kontext = 3 Zeilen Desktop,
   4 auf Mobil). Typografisch getrennt liest sie ausserdem als eigenes
   Angebot, nicht als Paket-Zusatz. */
.hero-h1{text-wrap:balance;max-width:22ch;font-size:clamp(42px,6.4vw,96px)}
.hero-second{
  margin-top:clamp(18px,2.2vw,26px);
  max-width:34ch;
  font-family:var(--f-display);font-weight:var(--w-display);
  font-size:clamp(20px,2.5vw,32px);letter-spacing:-0.025em;line-height:1.3;
  color:var(--deep-text);
}