/* =========================================================
   LAVADA NICOLINI — Grundsystem
   Farben aus der Live-CSS der alten Seite gemessen:
   Magenta #EB71BE · Cyan #53DFEE
   ========================================================= */

/* ---------- Schriften, self-hosted (keine CDN-Mietverträge) ---------- */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../fonts/bricolage-grotesque.woff2") format("woff2-variations");
  font-weight:200 800; font-stretch:75% 100%; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight:600; font-display:swap;
}

/* ---------- Marken-Token ---------- */
:root{
  /* Grund und Schrift */
  --paper:#FBFAFB;
  --paper-2:#F2EEF1;
  --ink:#14111C;
  --ink-2:#4C4458;
  --ink-3:#8B8397;
  --line:#E4DDE3;

  /* Marke */
  --magenta:#EB71BE;
  --cyan:#53DFEE;
  --marmor:#F4D8DE;
  /* dunklere Varianten fuer Text — die Markenfarben sind auf Weiss zu hell */
  --magenta-ink:#A81C6B;
  --cyan-ink:#0A7A8A;

  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --shell:min(1240px,100% - 2.5rem);
  --step:clamp(3rem,5.5vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--display); font-size:clamp(16px,1.05vw,18px); line-height:1.6;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Der Grund: echter Marmor, wie auf der Originalseite ----------
   Die Textur liegt hinter allem und wird von einer Papierschicht
   gedaempft — sichtbar genug, um Tiefe zu geben, ruhig genug zum Lesen. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:image-set(url("../img/grund/marmor.avif") type("image/avif"),
                             url("../img/grund/marmor.webp") type("image/webp"));
  background-size:cover;background-position:center;
  opacity:1;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 8%, color-mix(in srgb,var(--magenta) 13%,transparent), transparent 62%),
    radial-gradient(90% 70% at 12% 42%, color-mix(in srgb,var(--cyan) 11%,transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb,var(--paper) 34%,transparent), color-mix(in srgb,var(--paper) 46%,transparent));
}
/* Baender liegen ueber dem Grund und duerfen ihn durchscheinen lassen */
.band{position:relative}
/* Einzelne Abschnitte duerfen ruhig ganz weiss sein — das ist der Kontrast,
   der den Marmor auf den anderen erst wirken laesst. */
.band--hell{background:color-mix(in srgb,white 62%,transparent)}
.band--weiss{background:#FFFFFF}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--magenta-ink);outline-offset:3px;border-radius:3px}

.shell{width:var(--shell);margin-inline:auto}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0;
}

/* ---------- Kopfzeile ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.top.is-stuck{border-bottom-color:var(--line)}
.top__in{display:flex;align-items:center;gap:2rem;padding:1.05rem 0}
.wordmark{display:flex;align-items:center;text-decoration:none;flex:none}
.wordmark__bild{
  height:26px;width:auto;display:block;
  /* Das Logo ist schwarz — auf dunklen Baendern wird es umgekehrt */
  transition:filter .3s ease;
}
.top--dunkel .wordmark__bild{filter:invert(1)}
@media (max-width:520px){.wordmark__bild{height:21px}}
.nav{display:flex;gap:1.6rem;margin-left:auto}
.nav a{
  text-decoration:none;font-size:.95rem;color:var(--ink-2);
  position:relative;padding-block:.25rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--magenta);transition:right .32s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  padding:.72rem 1.15rem;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--magenta-ink);border-color:var(--magenta-ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:transparent;color:var(--magenta-ink);border-color:var(--magenta-ink)}
.btn{white-space:nowrap}
.btn__kurz{display:none}
.nav-toggle{display:none}

/* ---------- Hero: die Verwandlung ---------- */
.hero{position:relative;padding:clamp(2rem,5vw,4rem) 0 clamp(2rem,4vw,3.4rem);overflow:clip}
.hero__grid{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:0}
}

.hero__figure{position:relative;order:-1;justify-self:center;width:min(100%,560px)}
@media (min-width:900px){.hero__figure{order:0;justify-self:end;width:122%;margin-right:-8%;margin-left:-14%}
  .hero__copy{position:relative;z-index:2}}

/* Der Lichthof hinter der Figur — von Stein zu Marke */
.hero__halo{
  position:absolute;inset:-14% -10% -6%;border-radius:50%;z-index:0;
  background:
    radial-gradient(58% 58% at 34% 34%, color-mix(in srgb,var(--magenta) 70%,transparent), transparent 70%),
    radial-gradient(52% 52% at 72% 66%, color-mix(in srgb,var(--cyan) 62%,transparent), transparent 72%);
  filter:blur(52px);
  opacity:var(--halo,.85);
  transition:opacity 1.6s cubic-bezier(.2,.7,.2,1);
}
.hero__buste{position:relative;z-index:1;width:100%;
  filter:var(--stone,none);
  transition:filter 2.2s cubic-bezier(.25,.8,.25,1);
  will-change:filter;
}

/* Startzustand nur, wenn JS lebt — sonst ist die Figur sofort fertig sichtbar */
.js .hero__figure{--stone:grayscale(1) contrast(.82) brightness(1.06);--halo:0}
.js .hero__figure.is-revealed{--stone:none;--halo:.85}

.hero__copy{position:relative;z-index:2}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:.98;letter-spacing:-.045em;
  font-weight:700;margin:1.1rem 0 0;text-wrap:balance;
}
/* Eine Farbe, kein Verlauf. Das echte Magenta #EB71BE hat auf Weiss zu
   wenig Kontrast fuer Fliesstext — deshalb dieselbe Loesung wie auf der
   alten Seite: die Zeile bekommt einen gefuellten Balken, die Schrift
   darin ist weiss. Die Hausfarbe traegt, die Lesbarkeit bleibt. */
.hero h1 .turn{
  display:inline-block;background:var(--magenta);color:#fff;
  padding:.02em .28em .1em;border-radius:4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero__lead{
  font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-2);
  max-width:46ch;margin:1.4rem 0 2rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- Vertrauensleiste ---------- */
.trust{border-top:1px solid var(--line);margin-top:clamp(1.5rem,3vw,2.4rem);padding-top:1.6rem}
.trust__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.1rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.trust__list li{display:flex;flex-direction:column;gap:.2rem}
.trust__n{
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.trust__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Abschnitts-Rhythmus ---------- */
.band{padding:var(--step) 0}
.band--ink{
  background-color:var(--ink);color:var(--paper);
  background-image:
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 48%,transparent), color-mix(in srgb,var(--ink) 48%,transparent)),
    image-set(url("../img/grund/dunkel.avif") type("image/avif"),
              url("../img/grund/dunkel.webp") type("image/webp"));
  background-size:cover;background-position:center;
}
.band--ink .eyebrow{color:color-mix(in srgb,var(--cyan) 80%,white)}
.band--ink .lead{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.band__head{max-width:34ch}
.band h2{
  font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.04;letter-spacing:-.035em;
  font-weight:700;margin:.9rem 0 0;text-wrap:balance;
}
.lead{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--ink-2);max-width:56ch;margin:1.1rem 0 0}

.rail{
  display:grid;gap:1.2rem;margin-top:clamp(2rem,4vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.tile{
  border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.5rem;
  background:color-mix(in srgb,var(--paper) 60%,white);
  display:flex;flex-direction:column;gap:.55rem;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease;
}
.band--ink .tile{background:color-mix(in srgb,white 6%,transparent);border-color:color-mix(in srgb,white 14%,transparent)}
.tile:hover{transform:translateY(-4px);border-color:var(--magenta)}
.tile__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--magenta-ink)}
.band--ink .tile__n{color:var(--cyan)}
.tile h3{margin:0;font-size:1.18rem;letter-spacing:-.02em;line-height:1.25}
.tile p{margin:0;color:var(--ink-2);font-size:.97rem}
.band--ink .tile p{color:color-mix(in srgb,var(--paper) 66%,transparent)}

/* ---------- Fusszeile (Platzhalter fuer den Ausbau) ---------- */
.foot{border-top:1px solid var(--line);padding:2.6rem 0 3.4rem;color:var(--ink-3);font-size:.9rem}
.foot__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between}

/* ---------- Einblendungen: Sicherheitsnetz eingebaut ----------
   Ohne JS ist alles sichtbar. Erst .js schaltet den Startzustand ein. */
.js .rise{opacity:0;transform:translateY(18px)}
.js .rise.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---------- Handy ---------- */
@media (max-width:820px){
  .nav{display:none}
  .top__in{gap:1rem}
  /* Kurzform, sonst bricht der Knopf zweizeilig um */
  .btn--top{margin-left:auto;padding:.62rem .95rem;font-size:.72rem}
  .btn--top .btn__lang{display:none}
  .btn--top .btn__kurz{display:inline}
  .hero__cta .btn{width:100%;justify-content:center}
  .trust__list{gap:1.4rem 1.6rem;grid-template-columns:repeat(2,1fr)}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .hero__figure{--stone:none;--halo:.85}
  .js .rise{opacity:1;transform:none}
}

/* =========================================================
   Der Kernabschnitt: Prinzipien zum Anfassen
   Grundsatz: ohne JS ist alles lesbar — die Aufloesungen
   stehen dann einfach offen da.
   ========================================================= */
.probe{
  border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.5rem,3vw,2.6rem);
  background:color-mix(in srgb,white 70%,var(--paper));
  margin-top:clamp(1.4rem,3vw,2.2rem);
}
.probe__head{max-width:52ch}
.probe__n{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-ink);margin:0 0 .5rem;
}
.probe h3{margin:0;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:-.03em;line-height:1.15}
.probe__sub{margin:.55rem 0 0;color:var(--ink-2)}
.probe__zwischen{margin:0 0 1rem;color:var(--ink-2)}

.wahl{display:grid;gap:.9rem;margin-top:1.5rem;grid-template-columns:1fr}
@media (min-width:720px){
  .wahl{grid-template-columns:repeat(2,1fr)}
  .wahl--3{grid-template-columns:repeat(3,1fr)}
}
.karte{
  appearance:none;font:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:white;color:inherit;
  padding:1.25rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.karte:hover{border-color:var(--magenta);transform:translateY(-3px)}
.karte[aria-pressed="true"]{
  border-color:var(--magenta-ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--magenta) 45%,transparent);
}
.karte[data-gewaehlt="alt"]{opacity:.5}
.karte__t{font-weight:700;letter-spacing:-.01em;font-size:1.02rem}
.karte__t em{font-style:normal;color:var(--magenta-ink)}
.karte__p{font-family:var(--mono);font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.karte__d{color:var(--ink-2);font-size:.92rem}
.karte--satz{justify-content:center;min-height:6.5rem}
.karte--satz .karte__t{font-size:1.1rem;line-height:1.35}

/* Aufloesung */
.probe__aufloesung{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  max-width:64ch;
}
.js [data-zu]{display:none!important}
.js .probe__aufloesung:not([data-zu]){animation:auf .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.probe__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-ink);margin:0 0 .6rem;
}
.probe__aufloesung p{margin:0 0 .8rem;color:var(--ink-2)}
.probe__aufloesung p:last-child{margin-bottom:0}
.probe__aufloesung em{font-style:normal;color:var(--ink);font-weight:600}

/* Baustein 03: Blickbuehne — als erkennbare Beispielseite,
   sonst haelt man die grauen Balken fuer Deko statt fuer ein Layout. */
.blick{margin-top:.9rem}
.blick__label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:1.5rem 0 .5rem;
}
.blick__flaeche{
  appearance:none;border:1px solid var(--line);border-radius:14px;background:white;
  width:100%;aspect-ratio:16/10;position:relative;cursor:crosshair;padding:0;overflow:hidden;display:block;
}
.blick__browser{
  position:absolute;inset:0 0 auto 0;height:9%;background:var(--paper-2);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.35rem;padding:0 .8rem;
}
.blick__browser i{width:7px;height:7px;border-radius:50%;background:#CFC7CE;display:block}
.blick__browser em{
  font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--ink-3);
  margin-left:.7rem;background:white;border-radius:999px;padding:.15rem .6rem;
}
.blick__seite{position:absolute;inset:9% 0 0 0;display:block}
.blick__logo{
  position:absolute;left:5%;top:6%;font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--ink-2);
}
.blick__nav{position:absolute;right:5%;top:7%;display:flex;gap:.5rem}
.blick__nav b{display:block;width:26px;height:5px;border-radius:3px;background:#DED7DD}
.blick__titel{
  position:absolute;left:5%;top:24%;font-size:clamp(.95rem,2.4vw,1.7rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05;color:var(--ink);
}
.blick__sub{
  position:absolute;left:5%;top:52%;width:38%;font-size:.62rem;line-height:1.5;color:var(--ink-3);
}
.blick__cta{
  position:absolute;left:5%;top:72%;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  background:var(--ink);color:white;padding:.4rem .8rem;border-radius:999px;
}
.blick__foto{
  position:absolute;right:5%;top:20%;width:34%;height:56%;border-radius:8px;
  background:linear-gradient(150deg,#E6DFE5,#D3CAD2);
}
.blick__kachel{
  position:absolute;bottom:6%;height:9%;border-radius:5px;background:var(--paper-2);
}
/* eigene Klassen statt nth-of-type — dort zaehlen alle Spans mit */
.blick__kachel--a{left:5%;width:26%}
.blick__kachel--b{left:34%;width:26%}
.blick__kachel--c{left:63%;width:26%}
.blick__marke,.blick__ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:5}
.js .blick__marke[data-zu],.js .blick__ring[data-zu]{display:none}
.blick__marke{width:16px;height:16px;background:var(--ink);box-shadow:0 0 0 3px white}
.blick__ring{
  width:17%;aspect-ratio:1;border:3px solid var(--magenta-ink);left:23%;top:38%;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--magenta) 22%,transparent);
  animation:puls 2.4s ease-in-out infinite;
}
@keyframes puls{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.blick__ring{animation:none}}

.probe__schluss{
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;font-size:1.08rem;color:var(--ink-2);max-width:60ch;
}
.probe__schluss a{color:var(--magenta-ink);font-weight:600;text-underline-offset:4px}

/* =========================================================
   Arbeiten: Kacheln, Branchenfilter, Vollansicht im Rahmen
   ========================================================= */
.filterleiste{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:clamp(1.8rem,3vw,2.6rem) 0 1.6rem;
}
.filter{
  appearance:none;font:inherit;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .9rem;border-radius:999px;
  border:1px solid color-mix(in srgb,white 22%,transparent);
  background:transparent;color:color-mix(in srgb,var(--paper) 74%,transparent);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.filter:hover{color:var(--paper);border-color:color-mix(in srgb,var(--cyan) 70%,transparent)}
.filter.is-aktiv{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}

.arbeiten{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
}
.arbeit{margin:0}
.js .arbeit[data-aus]{display:none}
.arbeit__knopf{
  appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;
  background:color-mix(in srgb,white 6%,transparent);
  border:1px solid color-mix(in srgb,white 13%,transparent);
  border-radius:16px;padding:0;overflow:hidden;color:inherit;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease;
}
.arbeit__knopf:hover{transform:translateY(-5px);border-color:var(--cyan)}
.arbeit__bild{display:block;overflow:hidden;background:#0d0b12}
.arbeit__bild img{width:100%;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.arbeit__knopf:hover .arbeit__bild img{transform:scale(1.035)}
.arbeit__fuss{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:1.05rem 1.15rem .3rem;
}
.arbeit__nr{font-family:var(--mono);font-size:.7rem;color:var(--cyan)}
.arbeit__name{font-weight:700;letter-spacing:-.02em;font-size:1.06rem}
.arbeit__branche{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 55%,transparent);margin-left:auto;
}
.arbeit__satz{
  display:block;padding:.4rem 1.15rem 1.25rem;
  color:color-mix(in srgb,var(--paper) 66%,transparent);font-size:.94rem;line-height:1.5;
}

/* --- Vollansicht --- */
.schau{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:clamp(.75rem,3vw,2.5rem);
  background:color-mix(in srgb,#0B0910 88%,transparent);
  backdrop-filter:blur(6px);
}
.js .schau[data-zu]{display:none}
.schau__box{
  width:min(1080px,100%);height:min(88vh,100%);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;background:#17141F;
  border:1px solid color-mix(in srgb,white 14%,transparent);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
/* Fensterbalken ohne Adresszeile — die Adresse bleibt bewusst unsichtbar */
.schau__leiste{
  display:flex;align-items:center;gap:.8rem;flex:none;
  padding:.7rem 1rem;border-bottom:1px solid color-mix(in srgb,white 12%,transparent);
  background:#1E1A28;
}
.schau__punkte{display:flex;gap:.4rem}
.schau__punkte i{width:10px;height:10px;border-radius:50%;background:#3A3348;display:block}
.schau__titel{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:#9C93AC;margin-inline:auto;
}
.schau__zu{
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:#9C93AC;font-size:1.6rem;line-height:1;padding:0 .3rem;
}
.schau__zu:hover{color:white}
.schau__fenster{flex:1;overflow-y:auto;overflow-x:hidden;background:white;overscroll-behavior:contain}
.schau__fenster img{width:100%;display:block}

@media (max-width:640px){
  .schau__box{height:92vh}
  .arbeiten{grid-template-columns:1fr}
}

.js .hero__figure.is-revealed .hero__halo{opacity:.35}

/* =========================================================
   Preis: zwei Stufen, keine Matrix
   ========================================================= */
.stufen{
  display:grid;gap:1.2rem;margin-top:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:860px){.stufen{grid-template-columns:1fr 1.12fr;align-items:start}}
.stufe{
  border:1px solid var(--line);border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem);
  background:white;display:flex;flex-direction:column;gap:.7rem;
}
.stufe--gross{
  border-color:var(--magenta);
  box-shadow:0 0 0 1px var(--magenta), 0 24px 60px -30px color-mix(in srgb,var(--magenta) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--magenta) 5%,white),white 42%);
}
.stufe__n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-ink);margin:0;
}
.stufe h3{margin:0;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.03em;line-height:1.15}
.stufe__preis{
  margin:.2rem 0 .1rem;font-size:clamp(2.1rem,4vw,3rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.stufe__preis span{color:var(--ink-3);font-weight:400}
.stufe__lauf{
  margin:0 0 .5rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;
  color:var(--ink-2);line-height:1.4;
}
.stufe__lauf b{font-weight:600;color:var(--ink-1,#1a1520)}
.stufe__lauf span{color:var(--ink-3)}
.stufe__d{margin:0;color:var(--ink-2)}
.stufe__liste{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.stufe__liste li{position:relative;padding-left:1.5rem;color:var(--ink-2);font-size:.98rem}
.stufe__liste li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;border-radius:2px;
  background:var(--magenta);
}
.stufe__fuss{
  margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);
  color:var(--ink);font-weight:600;
}
.warum{
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.2rem);
  border-radius:20px;background:var(--paper-2);max-width:74ch;
}
.warum__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-ink);margin:0 0 .6rem;
}
.warum__satz{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.03em;margin:0 0 .7rem}
.warum p:last-child{margin:0;color:var(--ink-2)}

/* =========================================================
   Iris: die Nachtseite derselben Marke
   ========================================================= */
.band--nacht{
  background-color:#0C0A12;color:#EFEAF2;position:relative;overflow:clip;
  background-image:
    linear-gradient(180deg, rgba(12,10,18,.58), rgba(12,10,18,.58)),
    image-set(url("../img/grund/dunkel.avif") type("image/avif"),
              url("../img/grund/dunkel.webp") type("image/webp"));
  background-size:cover;background-position:center;
}
.band--nacht .eyebrow{color:var(--cyan)}
.band--nacht h2{max-width:16ch}
.band--nacht .lead{color:#B7AEC4}
.iris__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.iris__grid{grid-template-columns:1.15fr .85fr}}
.iris__punkte{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.85rem;max-width:52ch}
.iris__punkte li{padding-left:1.4rem;position:relative;color:#B7AEC4}
.iris__punkte li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}
.iris__punkte strong{color:#EFEAF2;font-weight:600}
.iris__satz{
  margin:1.8rem 0 1.6rem;font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-weight:700;letter-spacing:-.02em;max-width:32ch;
}
.btn--hell{background:var(--cyan);border-color:var(--cyan);color:#0C0A12}
.btn--hell:hover{background:var(--magenta);border-color:var(--magenta);color:#0C0A12}

/* Das echte Iris-Auge aus dem Iris-Repo. Der schwarze Rand des
   Videos wird weich ausgeblendet, damit kein Rechteck stehenbleibt. */
.iris__auge{position:relative;aspect-ratio:1;width:min(100%,440px);justify-self:center}
.auge__video{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  --maske:radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,.6) 68%, transparent 78%);
  -webkit-mask-image:var(--maske); mask-image:var(--maske);
}
/* Der Schein darum kommt aus der Marke, nicht aus dem Video. */
.iris__auge::after{
  content:"";position:absolute;inset:-22%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--cyan) 30%,transparent) 0%, transparent 66%);
  filter:blur(28px);
}
@media (prefers-reduced-motion:reduce){
  .auge__video{animation:none}
}

.eigene{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(255,255,255,.12)}
.eigene__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7E7590;margin:0 0 1.4rem;
}
.eigene__rail{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.eigene__ding h3{margin:0 0 .35rem;font-size:1.12rem;letter-spacing:-.02em;color:var(--cyan)}
.eigene__ding p{margin:0;color:#9E95AE;font-size:.96rem}

/* Kopfzeile wechselt die Seite, sobald sie ueber einem dunklen Band steht */
.top--dunkel{background:color-mix(in srgb,#0C0A12 84%,transparent);color:#EFEAF2}
.top--dunkel.is-stuck{border-bottom-color:rgba(255,255,255,.12)}
.top--dunkel .nav a{color:#B7AEC4}
.top--dunkel .nav a:hover{color:#fff}
.top--dunkel .nav a::after{background:var(--cyan)}
.top--dunkel .wordmark .mark{color:var(--cyan)}
.top--dunkel .btn{background:var(--cyan);border-color:var(--cyan);color:#0C0A12}
.top--dunkel .btn:hover{background:var(--magenta);border-color:var(--magenta)}

/* Ankersprünge aus der Navigation dürfen nicht unter der Kopfzeile landen */
section[id]{scroll-margin-top:5.2rem}

.foot__logo{height:24px;width:auto;opacity:.72}
.foot__in{align-items:center}

/* =========================================================
   Vorher / Nachher — funktioniert auch ohne JavaScript,
   weil der Regler ein echtes <input type=range> ist.
   ========================================================= */
.vgl{margin:clamp(2rem,4vw,3rem) 0 0}
/* Marken stehen ueber dem Bild, nicht darauf — sonst decken sie die Headline ab */
.vgl__marken{display:flex;justify-content:space-between;margin:0 0 .6rem}
.vgl__marke{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2);
}
.vgl__marke--r{background:color-mix(in srgb,var(--magenta) 18%,transparent);color:var(--magenta-ink)}
/* Bildschirmrahmen: gibt der Aufnahme Luft und erklaert, dass es eine Seite ist */
.vgl__rahmen{
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--paper-2);box-shadow:0 24px 60px -30px rgba(20,17,28,.4);
}
.vgl__leiste{
  display:flex;align-items:center;gap:.8rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--ink) 4%,var(--paper));
}
.vgl__punkte{display:flex;gap:5px;flex:none}
.vgl__punkte i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent);display:block}
.vgl__adresse{
  font-family:var(--mono);font-size:.7rem;color:var(--ink-3);
  padding:.22rem .7rem;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vgl__buehne{
  position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/3;isolation:isolate;
}
.vgl__bild{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Die alte Seite liegt darueber und wird von links her aufgedeckt */
.vgl__alt{
  position:absolute;inset:0;overflow:hidden;
  width:var(--schnitt,50%);
  border-right:2px solid var(--magenta);
}
.vgl__alt .vgl__bild{width:var(--buehne,100%);max-width:none}
/* Der echte Regler liegt unsichtbar ueber der ganzen Buehne */
.vgl__regler{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  appearance:none;background:transparent;cursor:ew-resize;
}
.vgl__regler::-webkit-slider-thumb{appearance:none;width:46px;height:100%;background:transparent;cursor:ew-resize}
.vgl__regler::-moz-range-thumb{width:46px;height:100%;background:transparent;border:0;cursor:ew-resize}
.vgl__regler:focus-visible{outline:3px solid var(--magenta-ink);outline-offset:3px}
.vgl__griff{
  position:absolute;top:50%;left:var(--schnitt,50%);z-index:4;
  transform:translate(-50%,-50%);pointer-events:none;
  width:46px;height:46px;border-radius:50%;
  background:white;box-shadow:0 6px 24px rgba(20,17,28,.28);
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.vgl__griff i{width:2px;height:14px;border-radius:2px;background:var(--magenta-ink);display:block}
.vgl__unter{
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:baseline;justify-content:space-between;
  margin-top:1rem;color:var(--ink-2);font-size:.95rem;
}
.vgl__wege{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline}
.vgl__ganz{
  appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
  color:var(--magenta-ink);font-weight:600;padding:0;text-decoration:none;
}
.vgl__ganz--still{color:var(--ink-3);font-weight:500}
.vgl__ganz:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){
  .vgl__unter{flex-direction:column;gap:.5rem}
  .vgl__adresse{font-size:.62rem}
}

/* ---------- Preis: Feinheiten ---------- */
.stufe__liste--stark li{color:var(--ink)}
.stufe__liste--stark li strong{display:block;margin-bottom:.1rem}
.stufe__liste li em{font-style:normal;font-weight:600}
.stufe__fuss--leise{color:var(--ink-2);font-weight:400;font-size:.95rem}
.warum__punkt{margin-top:1rem!important;color:var(--ink)!important;font-weight:600}

/* ---------- Eigene Produkte ---------- */
.eigene__fuss{margin:1.6rem 0 0;color:#9E95AE;font-size:.96rem}
.eigene__fuss a{color:var(--cyan);text-underline-offset:4px}

/* ---------- WhatsApp: dauerhaft erreichbar ---------- */
.wa{
  position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);z-index:90;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.1rem;border-radius:999px;text-decoration:none;
  background:#1FAB55;color:#fff;font-weight:600;font-size:.95rem;
  box-shadow:0 12px 30px -10px rgba(31,171,85,.6), 0 2px 8px rgba(20,17,28,.18);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.wa:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(31,171,85,.7)}
.wa svg{width:22px;height:22px;flex:none}
@media (max-width:640px){
  .wa{padding:.85rem;gap:0}
  .wa__text{display:none}
}
@media (prefers-reduced-motion:reduce){.wa{transition:none}}

/* =========================================================
   Der rote Faden: eine Marmorfigur pro Abschnitt.
   Text und Figur sollen ineinandergreifen, nicht nebeneinander
   stehen — deshalb ueberlappen sie sich, und ein Lichthof
   liegt unter beiden. Das haelt sie zusammen.
   ========================================================= */
.kopf-mit-figur{
  display:grid;gap:0;align-items:center;grid-template-columns:1fr;
  position:relative;
}
@media (min-width:940px){
  .kopf-mit-figur{
    /* Die Spalten ueberlappen bewusst: die Figur greift in den Text hinein */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .kopf-mit-figur .band__head{
    position:relative;z-index:2;max-width:none;padding-right:clamp(1rem,3vw,2.5rem);
    padding-block:0;
  }
  .kopf-mit-figur .band__head h2{max-width:15ch}
  .kopf-mit-figur .band__head .lead{max-width:34ch}
  .motiv{
    grid-column:2;grid-row:1;
    margin-left:clamp(-11rem,-9vw,-3rem);      /* greift nach links unter den Text */
    margin-right:clamp(-7rem,-6vw,-1.5rem);    /* und laeuft rechts aus dem Bild */
    width:calc(100% + clamp(5rem,11vw,11rem));
  }
}
.motiv{margin:0;position:relative;z-index:1;justify-self:stretch;width:100%;
  filter:drop-shadow(0 34px 60px rgba(20,17,28,.22))}
/* Eine Deckelhoehe fuer alle Figuren: sonst reisst eine grosse Buste
   eine Luecke neben den kurzen Text, und eine kleine wirkt verloren.
   So haben alle Abschnitte dasselbe Verhaeltnis. */
/* Die Figur fuellt ihre Spalte und laeuft nach aussen ueber.
   Auf der alten Seite sind die Figuren rund die halbe Fensterbreite —
   gemessen 51 %, 81 %, 93 %. Auf 620 px gedeckelt war sie halb so gross. */
.motiv img{
  width:100%;height:auto;display:block;
  max-height:min(84vh,860px);object-fit:contain;
}
/* Der Lichthof liegt unter Text UND Figur — das verbindet beide */
.kopf-mit-figur::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-18% -12% -18% 8%;
  background:
    radial-gradient(58% 62% at 68% 48%, color-mix(in srgb,var(--magenta) 26%,transparent), transparent 72%),
    radial-gradient(52% 58% at 90% 70%, color-mix(in srgb,var(--cyan) 22%,transparent), transparent 74%);
  filter:blur(58px);
}
.band--ink .motiv,.band--nacht .motiv{filter:drop-shadow(0 34px 60px rgba(0,0,0,.6))}
.band--ink .kopf-mit-figur::before,.band--nacht .kopf-mit-figur::before{
  background:
    radial-gradient(58% 62% at 68% 48%, color-mix(in srgb,var(--magenta) 34%,transparent), transparent 72%),
    radial-gradient(52% 58% at 90% 70%, color-mix(in srgb,var(--cyan) 30%,transparent), transparent 74%);
}
@media (max-width:939px){
  .motiv{display:none}
  .kopf-mit-figur::before{display:none}
}

/* ---------- Baustein 01: der Anker ---------- */
.anker__hinweis{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;
  margin:1.4rem 0 1.6rem;padding:.9rem 1.1rem;border-radius:12px;
  background:var(--paper-2);color:var(--ink);
}
.anker__label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.anker__hinweis strong{font-variant-numeric:tabular-nums}
.schaetzer{display:flex;flex-direction:column;gap:.7rem;max-width:640px}
.schaetzer__wert{
  font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--magenta-ink);
}
.schaetzer__regler{
  appearance:none;width:100%;height:8px;border-radius:999px;margin:0;
  background:var(--magenta);cursor:ew-resize;
}
.schaetzer__regler::-webkit-slider-thumb{
  appearance:none;width:30px;height:30px;border-radius:50%;background:white;cursor:grab;
  box-shadow:0 3px 12px rgba(20,17,28,.3);border:2px solid var(--magenta-ink);
}
.schaetzer__regler::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:white;cursor:grab;
  box-shadow:0 3px 12px rgba(20,17,28,.3);border:2px solid var(--magenta-ink);
}
.schaetzer__regler:disabled{opacity:.55;cursor:default}
.schaetzer__skala{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.68rem;color:var(--ink-3);
}
.btn--klein{align-self:flex-start;padding:.62rem 1rem;font-size:.72rem;margin-top:.4rem}
.btn:disabled{opacity:.5;pointer-events:none}

/* ---------- Baustein 02: Pupillen ---------- */
.wahl--bild{margin-top:1.5rem}
.karte--bild{padding:0;overflow:hidden;position:relative;align-items:stretch}
.karte--bild img{width:100%;height:auto;display:block}
.karte--bild .karte__t{
  position:absolute;left:.8rem;top:.8rem;
  font-family:var(--mono);font-size:.78rem;
  background:color-mix(in srgb,#14111C 76%,transparent);color:#fff;
  padding:.28rem .62rem;border-radius:999px;backdrop-filter:blur(6px);
}
.probe__folge{
  margin-top:1rem!important;padding-top:.9rem;border-top:1px solid var(--line);
  color:var(--ink)!important;font-weight:600;
}

/* Beim Pupillen-Test darf die nicht gewaehlte Karte NICHT abgedunkelt werden —
   sonst sehen die beiden Bilder unterschiedlich aus und die Aufloesung
   ("es ist zweimal dasselbe Bild") wirkt wie eine Luege. */
.karte--bild[data-gewaehlt="alt"]{opacity:1}
.karte--bild[aria-pressed="true"]{box-shadow:0 0 0 3px var(--magenta-ink)}

/* =========================================================
   Motto: Rahmen vor Inhalt
   ========================================================= */
.rahmen__kopf{max-width:44ch}
.wein{
  display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  grid-template-columns:1fr;margin:clamp(2.2rem,5vw,3.6rem) 0 0;
}
@media (min-width:860px){.wein{grid-template-columns:1fr auto 1fr}}
.wein__seite h3{margin:1.1rem 0 .4rem;font-size:1.2rem;letter-spacing:-.02em}
.wein__seite p{margin:0;color:#B7AEC4;font-size:.98rem;max-width:38ch}
.wein__seite--gut h3{color:var(--cyan)}
/* Das Bild fuellt die Kachel im eigenen Seitenverhaeltnis —
   so kann weder Karton noch Flasche an einer Kante abgeschnitten werden. */
.wein__bild{
  aspect-ratio:4/3;border-radius:16px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0B0910;
}
.wein__bild img{width:100%;height:100%;object-fit:cover;display:block}
.wein__bild--flasche{
  border-color:color-mix(in srgb,var(--cyan) 32%,transparent);
  background:radial-gradient(70% 70% at 50% 45%, color-mix(in srgb,var(--cyan) 14%,transparent), transparent 72%);
}
.wein__mitte{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.wein__gleich{font-size:2rem;font-weight:700;color:#6E6580}
.wein__note{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#6E6580}
.motto{margin-top:clamp(2.2rem,5vw,3.4rem);max-width:66ch}
.motto__satz{font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.motto__folge{margin:1rem 0 0;color:#B7AEC4}

/* =========================================================
   Passen wir zusammen? — Kartenstapel
   ========================================================= */
.check{margin-top:clamp(1.8rem,4vw,2.8rem);max-width:660px}
.check__stapel{position:relative;min-height:230px}
.check__karte{
  border:1px solid var(--line);border-radius:18px;background:white;
  padding:1.6rem 1.7rem;margin:0;
}
.js .check__karte{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease}
.js .check__karte[data-weg]{opacity:0;pointer-events:none}
.js .check__karte[data-weg="ja"]{transform:translateX(38%) rotate(5deg)}
.js .check__karte[data-weg="nein"]{transform:translateX(-38%) rotate(-5deg)}
.check__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--ink-3);margin:0 0 .5rem}
.check__karte h3{margin:0 0 .45rem;font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:-.025em}
.check__karte p{margin:0;color:var(--ink-2)}
.check__knoepfe{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.btn--warn{background:transparent;color:var(--magenta-ink);border-color:var(--magenta-ink)}
.btn--warn:hover{background:var(--magenta-ink);color:white}
.check__ende{
  margin-top:1.4rem;padding:1.5rem 1.7rem;border-radius:18px;
  background:var(--paper-2);border:1px solid var(--line);
}
.js .check__ende[data-zu]{display:none}
.check__ende h3{margin:.2rem 0 .6rem;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.03em}
.check__ende p{margin:0;color:var(--ink-2)}
.check__ende-cta{margin-top:1.1rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* =========================================================
   Ablauf
   ========================================================= */
.ablauf{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ablauf__schritt{
  border-top:2px solid var(--line);padding-top:1.1rem;position:relative;
  transition:border-color .3s ease;
}
.ablauf__schritt:hover{border-top-color:var(--magenta)}
.ablauf__n{font-family:var(--mono);font-size:.76rem;color:var(--magenta-ink);letter-spacing:.14em}
.ablauf__schritt h3{margin:.4rem 0 .4rem;font-size:1.1rem;letter-spacing:-.02em}
.ablauf__schritt p{margin:0;color:var(--ink-2);font-size:.96rem}

/* Vollansicht: Scroll-Aufnahme statt Standbild */
.schau__film{width:100%;display:block;background:#0F0D14}
.js .schau__film[data-zu]{display:none}
.js .schau__fenster img[data-zu]{display:none}
.arbeit__bild{position:relative}
.arbeit__film{
  position:absolute;left:.7rem;top:.7rem;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--cyan);color:#0C0A12;padding:.26rem .55rem;border-radius:999px;font-weight:600;
}

/* ---------- Frontline ---------- */
.fl__zahlen{display:grid;gap:1.2rem 2.6rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:clamp(1.8rem,4vw,2.6rem) 0 0;padding-bottom:1.6rem;border-bottom:1px solid rgba(255,255,255,.14)}
.fl__n{display:block;font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.fl__t{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 55%,transparent)}
/* --- Warum sieben Seiten statt einer --- */
.fl__warum{
  margin-top:clamp(2rem,4.5vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:.9rem 3rem;grid-template-columns:1fr;
}
.fl__warum h3{margin:0;font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:-.025em;max-width:20ch}
.fl__warum p{margin:0;color:color-mix(in srgb,var(--paper) 68%,transparent);max-width:56ch}
.fl__warum strong{color:var(--paper)}
@media (min-width:960px){
  .fl__warum{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .fl__warum h3{grid-row:span 2}
}

/* --- Das Dach: eine grosse Kachel --- */
.welt-dach{
  margin-top:clamp(2rem,4vw,2.8rem);
  display:grid;gap:1.4rem 2.4rem;align-items:center;grid-template-columns:1fr;
}
@media (min-width:900px){ .welt-dach{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }
.welt-dach__bild,.welt-kachel__bild{
  display:block;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#151220;
}
.welt-dach__bild img,.welt-kachel__bild img{
  width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.welt-dach__bild:hover img,.welt-kachel__bild:hover img{transform:scale(1.04)}
.welt-dach__label{
  margin:0 0 .5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);
}
.welt-dach__text h3{margin:0 0 .6rem;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.03em}
.welt-dach__text p{margin:0;color:color-mix(in srgb,var(--paper) 68%,transparent)}
.welt-dach__mehr{margin-top:.9rem!important}
.welt-dach__mehr a{color:var(--cyan);text-decoration:none;font-weight:600;font-size:.95rem}
.welt-dach__mehr a:hover{text-decoration:underline;text-underline-offset:4px}

/* --- Die fuenf Welten --- */
.welt-gitter{
  display:grid;gap:1.4rem;margin-top:clamp(1.6rem,3.4vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.welt-kachel h3{margin:.9rem 0 .35rem;font-size:1.08rem;letter-spacing:-.02em}
.welt-kachel p{margin:0;color:color-mix(in srgb,var(--paper) 64%,transparent);font-size:.95rem}

/* --- Die App als Geraet --- */
.welt-app{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.8rem,3.4vw,2.4rem);
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:1.6rem 2.6rem;align-items:center;
  grid-template-columns:1fr;justify-items:start;
}
@media (min-width:820px){ .welt-app{grid-template-columns:auto minmax(0,1fr)} }
.welt-app__geraet{
  width:clamp(170px,42vw,240px);border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);background:#0D0B14;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.welt-app__geraet img{width:100%;height:auto;display:block}
.welt-app__text h3{margin:0 0 .6rem;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.03em}
.welt-app__text p{margin:0;color:color-mix(in srgb,var(--paper) 68%,transparent);max-width:52ch}
.fl__fuss{margin:clamp(1.8rem,4vw,2.6rem) 0 0;max-width:60ch;font-weight:600}

/* ---------- Globalplayer ---------- */
.global{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:clamp(1.8rem,4vw,2.8rem)}
.global__fall{border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem;background:white}
.global__marke{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-ink);margin:0 0 .6rem}
.global__fall h3{margin:0 0 .4rem;font-size:1.08rem;letter-spacing:-.02em}
.global__fall p{margin:0;color:var(--ink-2);font-size:.95rem}
.global__fuss{margin-top:1.6rem;max-width:62ch;color:var(--ink-2)}

/* ---------- Presse ---------- */
/* =========================================================
   Presse als Heft: vier Beitraege, einer sichtbar, zum Blaettern.
   Ohne Skript stehen alle vier untereinander und sind vollstaendig lesbar.
   ========================================================= */
.heft{margin-top:clamp(1.8rem,4vw,2.6rem)}
.heft__stapel{display:grid;gap:clamp(2rem,5vw,3.4rem)}
.js .heft__stapel{display:block;position:relative}
.js .heft__seite[data-weg]{display:none}
.heft__kopf{margin-bottom:.9rem}
.heft__quelle{
  margin:0 0 .35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta-ink);
}
.heft__seite h3{margin:0;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.03em;max-width:24ch}
.heft__zitat{
  margin:0 0 1.2rem;padding-left:1rem;border-left:2px solid var(--magenta);
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--ink-2);max-width:60ch;
}
/* Das Papier: der echte Beitrag, im Rahmen scrollbar */
.heft__papier{
  max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain;
  border-radius:12px;border:1px solid var(--line);background:#fff;
  box-shadow:0 24px 60px -34px rgba(20,17,28,.45);
}
.heft__papier:focus-visible{outline:3px solid var(--magenta-ink);outline-offset:3px}
.heft__papier img{width:100%;height:auto;display:block}
.heft__fuss{margin:.9rem 0 0;font-size:.88rem;color:var(--ink-3)}
.heft__fuss a{color:var(--magenta-ink);text-decoration:none;font-weight:600}
.heft__fuss a:hover{text-decoration:underline;text-underline-offset:4px}
/* Steuerung — nur mit Skript sinnvoll */
.heft__steuer{display:none}
.js .heft__steuer{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.4rem;
}
.heft__pfeil{
  appearance:none;cursor:pointer;font:inherit;font-size:1.1rem;line-height:1;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.heft__pfeil:hover{border-color:var(--magenta);color:var(--magenta-ink)}
.heft__pfeil[disabled]{opacity:.35;cursor:default}
.heft__punkte{display:flex;gap:.55rem}
.heft__punkt{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:.4rem;
}
.heft__punkt span{
  display:block;width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 20%,transparent);transition:background .2s ease,transform .2s ease;
}
.heft__punkt[aria-current="true"] span{background:var(--magenta);transform:scale(1.25)}

/* ---------- Kontakt ---------- */
.kontakt__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:1000px){.kontakt__grid{grid-template-columns:1.25fr .75fr}}
.motiv--kontakt{width:min(100%,320px)}
.kontakt__deckel{margin:1.4rem 0 0;padding:.9rem 1.1rem;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#B7AEC4;max-width:56ch}
.kontakt__deckel strong{color:var(--cyan)}
.form{margin-top:1.8rem;display:flex;flex-direction:column;gap:.9rem;max-width:640px}
.form__zeile{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:620px){.form__zeile{grid-template-columns:1fr 1fr}}
.form__feld{display:flex;flex-direction:column;gap:.4rem}
.form__feld > span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#9E95AE}
.form__feld em{font-style:normal;text-transform:none;letter-spacing:0}
.form input,.form textarea{
  font:inherit;color:#EFEAF2;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:.8rem .95rem;width:100%;
  transition:border-color .2s ease,background .2s ease;
}
.form input::placeholder,.form textarea::placeholder{color:#6E6580}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--cyan);background:rgba(255,255,255,.08)}
.form input[aria-invalid="true"]{border-color:var(--magenta)}
.form__fuss{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.3rem}
.form__hinweis{font-size:.9rem;color:#9E95AE}
.form__hinweis[data-art="fehler"]{color:var(--magenta)}
.form__hinweis[data-art="gut"]{color:var(--cyan)}
.kontakt__wege{margin:1.4rem 0 0;color:#9E95AE;font-size:.95rem}
.kontakt__wege a{color:var(--cyan);text-underline-offset:4px}
.foot__links a{color:var(--ink-2);text-decoration:none}
.foot__links a:hover{color:var(--magenta-ink)}
@media (max-width:1020px){.nav{gap:1.1rem;font-size:.9rem}}

/* ---------- Bekannt aus: Presselogos im Hero ---------- */
.bekannt{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.bekannt__label{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .85rem;
}
.bekannt__reihe{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:1rem 1.6rem;
}
.bekannt__reihe img{
  height:20px;width:auto;display:block;
  opacity:.62;filter:grayscale(1);
  transition:opacity .3s ease, filter .3s ease;
}
.bekannt__reihe li:hover img{opacity:1;filter:grayscale(0)}
.bekannt__siegel img{height:46px;opacity:.8;filter:none}
@media (max-width:520px){
  .bekannt__reihe{gap:.9rem 1.2rem}
  .bekannt__reihe img{height:17px}
  .bekannt__siegel img{height:38px}
}

/* ---------- Globalplayer mit echten Logos ---------- */
.global__marke{display:flex;align-items:center;min-height:30px}
.global__marke img{height:26px;width:auto;display:block;filter:grayscale(1);opacity:.78;transition:filter .3s ease,opacity .3s ease}
.global__fall:hover .global__marke img{filter:grayscale(0);opacity:1}

/* ---------- Figuren deutlich groesser ---------- */
@media (min-width:940px){
  /* Runde 8: dieselbe Haelfte wie die --links-Variante weiter unten.
     Vorher stand hier clamp(300px,32vw,470px) — das deckelte die Figur
     bei 461 px, waehrend die gespiegelten Abschnitte auf 620 px standen. */
  .kopf-mit-figur{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.motiv{width:100%}
.motiv--kontakt{width:min(100%,430px)}
.iris__auge{width:min(100%,520px)}

/* =========================================================
   Kundenstimmen — echte Aufnahmen, kein geschriebenes Zitat
   ========================================================= */
.stimmen{display:grid;gap:.9rem;margin-top:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.stimme{
  /* umbruchfaehig, damit die Abschrift eine eigene Zeile bekommt
     und nicht zwischen Knopf und Namen gequetscht wird */
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:0;
  align-content:start;
  border:1px solid var(--line);border-radius:16px;background:white;
  padding:1rem 1.2rem;transition:border-color .25s ease,transform .25s ease;
}
/* Eine aufgeklappte Abschrift darf die Nachbarkarten nicht mitwachsen lassen */
.stimme{align-self:start}
.stimme:hover{border-color:var(--magenta);transform:translateY(-2px)}
.stimme__play{
  appearance:none;border:0;cursor:pointer;flex:none;position:relative;
  width:52px;height:52px;border-radius:50%;color:white;
  background:var(--ink);
  display:grid;place-items:center;
}
.stimme__initialen{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.04em;
  transition:opacity .25s ease;
}
.stimme__symbol{width:20px;height:20px;opacity:0;transition:opacity .25s ease;position:relative}
.stimme__play:hover .stimme__initialen,.stimme[data-laeuft] .stimme__initialen{opacity:0}
.stimme__play:hover .stimme__symbol,.stimme[data-laeuft] .stimme__symbol{opacity:1}
.stimme__aus{display:none}
.stimme[data-laeuft] .stimme__an{display:none}
.stimme[data-laeuft] .stimme__aus{display:block}
.stimme__text{flex:1 1 8rem;min-width:0}
.stimme__name{margin:0;font-weight:700;letter-spacing:-.01em;font-size:1.02rem}
.stimme__firma{margin:.1rem 0 .5rem;color:var(--ink-2);font-size:.88rem}
.stimme__balken{height:4px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.stimme__balken span{display:block;height:100%;width:0;border-radius:999px;
  background:var(--magenta)}
.stimme__zeit{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;flex:none}

/* ---------- Sofortbefund ---------- */
.befund{
  margin-top:1.4rem;padding:1.3rem 1.5rem;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
}
.js .befund[data-zu]{display:none}
.befund__kopf{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;margin:0 0 1rem}
.befund__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.befund__seite{font-family:var(--mono);font-size:.82rem;color:#B7AEC4}
.befund__liste{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.befund__liste li{display:flex;gap:.8rem;align-items:flex-start;font-size:.96rem;color:#C4BBD0}
.befund__zeichen{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;margin-top:.1rem;
}
.befund__zeichen[data-art="gut"]{background:color-mix(in srgb,var(--cyan) 22%,transparent);color:var(--cyan)}
.befund__zeichen[data-art="warnung"]{background:color-mix(in srgb,var(--magenta) 26%,transparent);color:var(--magenta)}
.befund__zeichen[data-art="neutral"]{background:rgba(255,255,255,.1);color:#9E95AE}
.befund__liste b{color:#EFEAF2;font-weight:600}
.befund__fuss{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);
  color:#9E95AE;font-size:.92rem}
.form__hinweis[data-art="laeuft"]{color:var(--cyan)}
.stufe__ab{font-size:.42em;font-weight:600;color:var(--ink-3);vertical-align:.35em;margin-right:.12em;letter-spacing:0}

/* Drei Stufen statt zwei */
@media (min-width:1080px){.stufen{grid-template-columns:1fr 1.08fr 1.08fr}}
@media (min-width:860px) and (max-width:1079px){.stufen{grid-template-columns:1fr 1fr}}
.stufe--voll{
  border-color:var(--cyan-ink);
  box-shadow:0 0 0 1px var(--cyan-ink), 0 24px 60px -30px color-mix(in srgb,var(--cyan) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 6%,white),white 42%);
}
.stufe--voll .stufe__n{color:var(--cyan-ink)}
.stufe--voll .stufe__liste li::before{background:var(--cyan)}

/* ---------- Eingang zur Scrollwelt ---------- */
.tuer{padding:0}
.tuer__flaeche{
  display:block;position:relative;overflow:clip;text-decoration:none;color:#EFEAF2;
  min-height:clamp(340px,46vh,520px);
  background-color:#0A0810;
  background-image:image-set(url("../img/welt/gesicht-1200.avif") type("image/avif"),
                             url("../img/welt/gesicht-1200.webp") type("image/webp"));
  background-size:cover;background-position:center 38%;
  display:grid;align-items:center;
}
.tuer__flaeche::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(10,8,16,.94) 0%, rgba(10,8,16,.7) 42%, rgba(10,8,16,.2) 78%);
  transition:background .5s ease;
}
.tuer__flaeche:hover::after{background:linear-gradient(100deg, rgba(10,8,16,.9) 0%, rgba(10,8,16,.6) 42%, rgba(10,8,16,.1) 78%)}
.tuer__inhalt{
  position:relative;z-index:2;display:block;
  width:var(--shell);margin-inline:auto;max-width:min(46rem,90vw);
  padding-block:clamp(2.4rem,6vw,4rem);
}
.tuer__inhalt .eyebrow{color:var(--cyan);display:block;margin-bottom:.9rem}
.tuer__titel{
  display:block;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.03;letter-spacing:-.035em;
  font-weight:700;margin-bottom:.9rem;max-width:16ch;
}
.tuer__text{display:block;color:#B7AEC4;max-width:42ch;margin-bottom:1.6rem}
.tuer__knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.8rem 1.3rem;border-radius:999px;background:var(--cyan);color:#0A0810;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s ease;
}
.tuer__flaeche:hover .tuer__knopf{transform:translateX(6px);background:var(--magenta)}
.check__folge{
  margin-top:.9rem!important;padding-top:.8rem;border-top:1px solid var(--line);
  color:var(--ink-3)!important;font-size:.9rem;
}
.check__nochmal{
  appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;padding:0;
  margin-top:1rem;color:var(--ink-3);font-size:.92rem;text-decoration:underline;text-underline-offset:4px;
}
.check__nochmal:hover{color:var(--magenta-ink)}
.check__stapel{min-height:290px}

/* ---------- Terminbuchung ueber Zeitero ---------- */
.termin{
  margin-top:clamp(1.8rem,3.6vw,2.6rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid rgba(255,255,255,.16);
}
.termin__label{
  margin:0 0 .4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);
}
.termin h3{margin:0 0 .6rem;font-size:clamp(1.2rem,2.3vw,1.6rem);letter-spacing:-.03em}
.termin__text{margin:0 0 1.1rem;color:color-mix(in srgb,var(--paper) 68%,transparent);max-width:52ch}
.termin__text strong{color:var(--paper)}

/* =========================================================
   Nach dem Launch: wo Kunden heute suchen.
   Ohne Skript stehen beide Faelle untereinander — beide sind
   die Aussage, keiner ist Beiwerk.
   ========================================================= */
.kanal{margin-top:clamp(1.8rem,4vw,2.6rem)}
.kanal__wahl{display:none}
.js .kanal__wahl{
  display:inline-flex;gap:.3rem;padding:.3rem;margin-bottom:1.2rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);
}
.kanal__reiter{
  appearance:none;border:0;cursor:pointer;font:inherit;font-size:.92rem;
  padding:.5rem 1.1rem;border-radius:999px;background:transparent;color:var(--ink-2);
  transition:background .2s ease,color .2s ease;
}
.kanal__reiter[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.kanal__buehne{display:grid;gap:clamp(1.6rem,3.6vw,2.4rem)}
.js .kanal__bild[data-weg]{display:none}
.kanal__frage{
  margin:0 0 .8rem;font-family:var(--mono);font-size:.86rem;color:var(--ink-3);
}
.kanal__treffer,.kanal__antwort{
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  padding:clamp(1rem,2.4vw,1.4rem);max-width:44rem;
}
.kanal__url{margin:0 0 .25rem;font-size:.82rem;color:var(--ink-3)}
.kanal__titel{margin:0 0 .3rem;font-size:1.1rem;color:#1a0dab;font-weight:600;letter-spacing:-.01em}
.kanal__text{margin:0;font-size:.95rem;color:var(--ink-2)}
.kanal__antwort{border-left:3px solid var(--cyan)}
.kanal__antwort-text{margin:0 0 .8rem;font-size:1rem;line-height:1.6;color:var(--ink-2)}
.kanal__antwort-text strong{color:var(--ink)}
.kanal__quelle{margin:0;font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.kanal__erklaerung{margin:1rem 0 0;max-width:56ch;color:var(--ink-2)}
.kanal__erklaerung strong{color:var(--ink)}
.kanal__fuss{
  margin-top:clamp(2rem,4vw,2.8rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.kanal__fuss h3{margin:0 0 .6rem;font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:-.025em}
.kanal__fuss p{margin:0;max-width:60ch;color:var(--ink-2)}
.kanal__mehr{margin-top:.9rem!important}
.kanal__mehr a{color:var(--magenta-ink);text-decoration:none;font-weight:600}
.kanal__mehr a:hover{text-decoration:underline;text-underline-offset:4px}

/* =========================================================
   Teamseite
   ========================================================= */
.koepfe{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:1fr;margin-top:clamp(1.8rem,4vw,2.6rem)}
@media (min-width:820px){ .koepfe{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kopf__bild{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);
  max-width:380px;
}
.kopf__bild img{width:100%;height:auto;display:block}
.kopf__rolle{
  margin:1rem 0 .3rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta-ink);
}
.kopf h3{margin:0 0 .6rem;font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.03em}
.kopf__text{margin:0;color:var(--ink-2);max-width:46ch}
.koepfe__fuss{margin-top:clamp(1.6rem,3.4vw,2.2rem);font-weight:600;max-width:56ch}

/* --- Das Rad --- */
.mannschaft{
  display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:start;
  grid-template-columns:1fr;margin-top:clamp(1.8rem,4vw,2.6rem);
}
@media (min-width:900px){ .mannschaft{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
.mannschaft__rad svg{width:100%;height:auto;max-width:440px;display:block;margin-inline:auto}
.rad__name{fill:#EFEAF2;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.5px}
.rad__unter{fill:#8D8398;font-family:var(--mono);font-size:8px;letter-spacing:1.4px}
.rad__knoten circle{
  fill:#151122;stroke:rgba(255,255,255,.28);
  transition:fill .25s ease,stroke .25s ease;
}
.rad__knoten text{fill:#C4BBD0;font-family:var(--mono);font-size:8.5px;letter-spacing:.8px}
.js .rad__knoten{cursor:pointer}
.rad__knoten[data-an] circle{fill:var(--magenta);stroke:var(--magenta)}
.rad__knoten[data-an] text{fill:#EFEAF2}

.mannschaft__liste{display:grid;gap:1.2rem}
.rolle{
  padding:1.1rem 1.2rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  transition:border-color .25s ease,background .25s ease;
}
.rolle h3{margin:0 0 .4rem;font-size:1.05rem;letter-spacing:-.02em}
.rolle p{margin:0;color:color-mix(in srgb,var(--paper) 64%,transparent);font-size:.95rem}
.js .rolle[data-aus]{opacity:.42}
.rolle[data-an]{border-color:var(--magenta);background:color-mix(in srgb,var(--magenta) 9%,transparent)}
.mannschaft__fuss{margin-top:clamp(1.8rem,3.6vw,2.4rem);font-weight:600;max-width:60ch}
.mannschaft__fuss a{color:var(--cyan);text-decoration:none}
.mannschaft__fuss a:hover{text-decoration:underline;text-underline-offset:4px}

/* --- Echtes Netz --- */
.netz__gitter{
  display:grid;gap:1.4rem;margin-top:clamp(1.8rem,4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.netz__ding{padding-top:1rem;border-top:2px solid var(--ink)}
.netz__label{
  margin:0 0 .4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.netz__ding h3{margin:0 0 .5rem;font-size:1.2rem;letter-spacing:-.025em}
.netz__ding p{margin:0;color:var(--ink-2);font-size:.95rem}
.netz__mehr{margin-top:.8rem!important}
.netz__mehr a{color:var(--magenta-ink);text-decoration:none;font-weight:600}
.netz__mehr a:hover{text-decoration:underline;text-underline-offset:4px}
.netz__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.8rem,3.6vw,2.4rem)}

/* ---------- Fragen: aufklappbar, ohne Skript vollstaendig lesbar ---------- */
.fragen{margin-top:clamp(1.8rem,4vw,2.6rem);max-width:56rem}
.frage{border-top:1px solid var(--line)}
.frage:last-child{border-bottom:1px solid var(--line)}
.frage summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.1rem 0;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary h3{margin:0;font-size:clamp(1.02rem,1.9vw,1.22rem);letter-spacing:-.02em;flex:1}
.frage summary::after{
  content:"+";flex:none;font-family:var(--mono);font-size:1.2rem;color:var(--magenta-ink);
  transition:transform .25s ease;
}
.frage[open] summary::after{transform:rotate(45deg)}
.frage summary:hover h3{color:var(--magenta-ink)}
.frage > p{margin:0 0 1.3rem;max-width:62ch;color:var(--ink-2)}

/* ---------- Kundenstimmen: die Abschrift zum Mitlesen ---------- */
.stimme__abschrift{flex:0 0 100%;margin-top:.2rem}
.stimme__abschrift summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.stimme__abschrift summary::-webkit-details-marker{display:none}
.stimme__abschrift summary::after{content:"+";font-size:.9rem;color:var(--magenta-ink)}
.stimme__abschrift[open] summary::after{content:"–"}
.stimme__abschrift summary:hover{color:var(--magenta-ink)}
.stimme__abschrift p{
  margin:.7rem 0 .2rem;font-size:.92rem;line-height:1.6;color:var(--ink-2);max-width:62ch;
}

/* ---------- Hero: das Versprechen ----------
   Zwei Zeilen, nicht drei Paare: was dabei herauskommt, und fuer wen.
   Die Zuordnung war vorher irrefuehrend. */
.hero__mehr{
  margin:1.6rem 0 2rem;padding-left:.9rem;border-left:2px solid var(--magenta);
  display:grid;gap:.25rem;max-width:36rem;
}
.hero__mehr strong{font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.02em}
.hero__mehr span{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

/* =========================================================
   Ablauf als Bahn: eine Linie, fünf Halte.
   Ohne Skript und ohne Bewegung bleibt es eine nummerierte Liste —
   die Linie ist Schmuck, nicht Bedeutungstraeger.
   ========================================================= */
.bahn{
  list-style:none;margin:clamp(2rem,4.5vw,3rem) 0 0;padding:0;
  display:grid;gap:clamp(1.4rem,3vw,2.2rem);position:relative;
}
.bahn__halt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;position:relative}
/* Die durchgehende Linie zwischen den Marken */
.bahn__halt::before{
  content:"";position:absolute;left:23px;top:48px;bottom:calc(-1 * clamp(1.4rem,3vw,2.2rem));
  width:2px;background:var(--magenta);
  opacity:.32;
}
.bahn__halt:last-child::before{display:none}
.bahn__marke{
  width:48px;height:48px;border-radius:50%;flex:none;position:relative;z-index:1;
  display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--magenta);
  font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--magenta-ink);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.bahn__halt:hover .bahn__marke{background:var(--magenta);color:#fff;transform:scale(1.06)}
.bahn__karte{
  border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,white 72%,transparent);
  padding:clamp(1rem,2.4vw,1.5rem);transition:border-color .3s ease,transform .3s ease;
}
.bahn__halt:hover .bahn__karte{border-color:var(--magenta);transform:translateY(-2px)}
.bahn__dauer{
  margin:0 0 .35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.bahn__karte h3{margin:0 0 .5rem;font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.025em}
.bahn__text{margin:0;color:var(--ink-2);max-width:56ch}
.bahn__folge{
  margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.9rem;max-width:56ch;
}
.bahn__summe{margin-top:clamp(1.6rem,3.4vw,2.2rem);font-weight:600;max-width:56ch}
/* Ab Tablet stehen die Karten versetzt — das nimmt der Liste das Formularhafte */
@media (min-width:900px){
  .bahn__halt:nth-child(even) .bahn__karte{margin-left:clamp(2rem,6vw,5rem)}
}

/* Der Vorspann ueber dem Umschalter */
.kanal__vor{margin:0 0 1.2rem;max-width:60ch;color:var(--ink-2)}

/* =========================================================
   Am Finger bedienbar.
   Alles, was man antippt, braucht eine Flaeche — nicht nur Text.
   Gilt nur fuer Geraete ohne Maus, damit die Zeilen am Rechner
   nicht auseinandergerissen werden.
   ========================================================= */
@media (pointer:coarse){
  /* Eigenstaendige Verweise: der Textlink bekommt eine Trefferflaeche */
  .kanal__mehr a,.welt-dach__mehr a,.netz__mehr a,.mannschaft__fuss a,
  .vgl__ganz,.heft__fuss a,.kontakt__wege a,.foot__links a,.eigene__fuss a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* Regler: am Finger muss man ihn treffen koennen */
  .probe input[type="range"],.anker__regler{min-height:44px}
  input[type="range"]{height:44px}
  input[type="range"]::-webkit-slider-thumb{height:28px;width:28px}
  /* Die Punkte im Heft und in der Welt */
  .heft__punkt{padding:.8rem}
  /* Die Wortmarke ist der Weg zurueck nach oben — sie braucht Flaeche */
  .wordmark{display:inline-flex;align-items:center;min-height:44px}
  .stimme__abschrift summary,.frage summary{min-height:44px}
}

/* ---------- Kundenstimmen: schwarzer Knopf, Buchstaben in einer Hausfarbe ----------
   Kein Verlauf. Damit die Reihe trotzdem lebt, wechseln sich Cyan und
   Magenta ab — aber immer eine Farbe je Knopf. */
.stimme__play{background:var(--ink)}
.stimme__initialen{color:var(--cyan)}
.stimme:nth-child(even) .stimme__initialen{color:var(--magenta)}
.stimme__symbol{color:var(--paper)}
.stimme[data-laeuft] .stimme__play{background:var(--magenta-ink)}

/* ---------- Figur mal links, mal rechts ----------
   Marco: „irgendwie wirkt das komisch, wenn alle Köpfe rechts sind."
   Jeder zweite Abschnitt dreht die Spalten um. Auf dem Handy bleibt
   die Reihenfolge Text-zuerst, weil die Figur dort ohnehin entfällt. */
@media (min-width:940px){
  .kopf-mit-figur--links{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kopf-mit-figur--links .band__head,
  .kopf-mit-figur--links .rahmen__kopf{grid-column:2;grid-row:1;
    padding-right:0;padding-left:clamp(1rem,3vw,2.5rem)}
  .kopf-mit-figur--links .motiv{
    grid-column:1;grid-row:1;
    margin-left:clamp(-7rem,-6vw,-1.5rem);
    margin-right:clamp(-11rem,-9vw,-3rem);
  }
  .kopf-mit-figur--links::before{inset:-18% 8% -18% -12%}
}

/* ---------- Das KI-Team: Fach über dem Namen ---------- */
.rolle__fach{
  margin:0 0 .25rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);
}
.rad__hinweis{
  margin:.9rem 0 0;text-align:center;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#8D8398;
}
.mannschaft__liste{max-height:none}
.rad__knoten text{font-size:7.5px}
@media (min-width:900px){
  /* Zehn Karten sind eine lange Spalte — das Rad bleibt daneben stehen */
  .mannschaft{align-items:start}
  .mannschaft__rad{position:sticky;top:6rem}
}

/* ---------- Woran „der größte" gemessen ist ---------- */
.fl__woran{
  margin-top:.9rem!important;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.14);
  color:color-mix(in srgb,var(--paper) 58%,transparent)!important;font-size:.92rem;
}

/* ---------- Blick-Test: Gerüst statt Text ----------
   Die Kacheln stehen fuer Logo, Ueberschrift, Fliesstext und Knopf.
   Ohne lesbaren Text schaut man auf die Anordnung — darum geht es hier. */
.blick__logo{display:block;width:78px;height:14px;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 62%,transparent)}
.blick__titel{display:grid;gap:10px}
.blick__titel b{display:block;height:20px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 78%,transparent)}
.blick__titel b:first-child{width:64%}
.blick__titel b:last-child{width:44%}
.blick__sub{display:grid;gap:6px}
.blick__sub b{display:block;height:7px;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 26%,transparent)}
.blick__sub b:first-child{width:82%}
.blick__sub b:last-child{width:58%}
.blick__cta{display:block;width:112px;height:26px;border-radius:999px;
  background:var(--ink)}
.blick__browser em{display:inline-block;min-width:96px;height:8px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 18%,transparent)}

/* ---------- Das KI-Team im Iris-Abschnitt ----------
   Auf der Startseite reicht die Aufzaehlung; die ausfuehrlichen
   Beschreibungen stehen auf der Teamseite. */
.crew{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(255,255,255,.14);
}
.crew__label{
  margin:0 0 .5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);
}
.crew h3{margin:0 0 .8rem;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.03em}
.crew__vor{margin:0 0 1.6rem;max-width:64ch;color:#B7AEC4}
.crew__liste{
  list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.crew__liste li{
  display:grid;gap:.15rem;padding:.75rem .9rem;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.crew__liste strong{font-size:.98rem;letter-spacing:-.01em}
.crew__fach{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);
}
.crew__tut{font-size:.88rem;color:color-mix(in srgb,var(--paper) 58%,transparent)}
.crew__fuss{margin:1.4rem 0 0;max-width:60ch;font-weight:600}
.crew__fuss a{color:var(--cyan);text-decoration:none}
.crew__fuss a:hover{text-decoration:underline;text-underline-offset:4px}

/* =========================================================
   Hero auf dem Handy — Anordnung wie auf der Originalseite:
   Überschrift mittig oben, darunter die Büste gross, ganz unten
   das dunkle Band mit den Presselogos. Auf dem Rechner bleibt
   der zweispaltige Aufbau unangetastet.
   ========================================================= */
@media (max-width:899px){
  /* Aufbau wie auf der Originalseite: ueber der Figur steht NUR die
     Headline. Alles andere — Fliesstext, Versprechen, Knoepfe — kommt
     darunter. Sonst schiebt der Text die Buste unter die Falte und man
     sieht beim Aufmachen nur Buchstaben. */
  .hero__grid{display:flex;flex-direction:column;gap:0}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1;text-align:center;margin-inline:auto}
  .hero h1{order:2;text-align:center;font-size:clamp(2.3rem,8.6vw,3.4rem);margin:.6rem 0 0}
  .hero__figure{order:3;width:min(100%,540px);margin:.4rem auto 0;align-self:center}
  .hero__lead{order:4;text-align:center;margin:1.4rem auto 0;max-width:36ch}
  .hero__mehr{
    order:5;margin:1.4rem auto 0;text-align:center;width:fit-content;
    border-left:0;border-top:2px solid var(--magenta);padding-left:0;padding-top:.7rem;
  }
  .hero__cta{order:6;justify-content:center;margin-top:1.6rem}
  .bekannt{
    order:7;margin:1.8rem calc(50% - 50vw) 0;width:100vw;
    padding:1.2rem clamp(1rem,5vw,2rem);background:var(--ink);
  }
  .bekannt__label{text-align:center;color:color-mix(in srgb,var(--paper) 52%,transparent)}
  .bekannt__reihe{
    display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem;
    place-items:center;margin-top:.8rem;
  }
  .bekannt__reihe img{filter:invert(1) grayscale(1);opacity:.82;height:19px}
  .bekannt__siegel{grid-column:1/-1}
  .bekannt__siegel img{filter:grayscale(1) invert(1) brightness(1.9);height:44px;opacity:.95}
}

/* =========================================================
   Keine halben Zeilen.
   Bleibt in einem zweispaltigen Raster ein Eintrag allein uebrig,
   zieht er sich ueber die ganze Breite. Sonst steht daneben ein
   leeres Feld — und genau das faellt auf.
   ========================================================= */
@media (max-width:720px){
  .trust__list > li:last-child:nth-child(odd),
  .fl__zahlen > div:last-child:nth-child(odd),
  .crew__liste > li:last-child:nth-child(odd),
  .netz__gitter > *:last-child:nth-child(odd),
  .welt-gitter > *:last-child:nth-child(odd),
  .eigene__rail > *:last-child:nth-child(odd),
  .stimmen > *:last-child:nth-child(odd),
  .bekannt__reihe > li:last-child:nth-child(odd),
  .arbeiten > *:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:721px) and (max-width:1039px){
  .fl__zahlen > div:last-child:nth-child(3n+1),
  .crew__liste > li:last-child:nth-child(3n+1),
  .stimmen > *:last-child:nth-child(3n+1){grid-column:1/-1}
}

/* ---------- Preisstufen: eingeklappt, bis man mehr wissen will ---------- */
.stufe__klapp summary{list-style:none;cursor:pointer;display:grid;gap:.2rem;padding:0}
.stufe__klapp summary::-webkit-details-marker{display:none}
.stufe__mehr{
  margin-top:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta-ink);
  display:inline-flex;align-items:center;gap:.4rem;
}
.stufe__mehr::after{content:"+";font-size:1rem;line-height:1}
.stufe__klapp[open] .stufe__mehr::after{content:"–"}
.stufe__inhalt{padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line)}
.band--ink .stufe__mehr,.band--nacht .stufe__mehr{color:var(--cyan)}

/* --- Halbe Zeilen schliessen, auf allen Breiten --- */
.trust__list > li:last-child:nth-child(odd),
.eigene__rail > *:last-child:nth-child(odd),
.bekannt__reihe > li:last-child:nth-child(odd){grid-column:1/-1}

/* Acht Stimmen gehen in zwei oder vier Spalten auf — nie in drei,
   sonst bleibt in der letzten Zeile ein Feld leer. */
.stimmen{grid-template-columns:1fr}
@media (min-width:640px){.stimmen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.stimmen{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Drei Kacheln nebeneinander statt fuenf Spalten mit Luecken */
.fl__zahlen{grid-template-columns:1fr}
@media (min-width:640px){.fl__zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.eigene__rail{grid-template-columns:1fr}
@media (min-width:720px){.eigene__rail{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Die vier Globalplayer-Belege: zwei oder vier, nie drei */
.global-gitter,.band--hell .kachelreihe{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.global-gitter,.band--hell .kachelreihe{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Fuenf Frontline-Welten: die letzte fuellt die Zeile */
.welt-gitter > *:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:1040px){.welt-gitter > *:last-child:nth-child(odd){grid-column:auto}}

/* Die vier Globalplayer-Belege: zwei oder vier Spalten, nie drei oder fuenf —
   sonst bleibt rechts ein Feld leer. */
.global{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (min-width:980px){.global{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:520px){.global{grid-template-columns:1fr!important}}

/* Runde 8: kein Motiv ueber den linken Fensterrand */
@media (min-width:940px) and (max-width:1139px){
  .kopf-mit-figur--links .motiv{margin-left:0}
}

/* Runde 8: Wischen und lesbare Radschrift */
/* ---------- Die Karten lassen sich wischen ----------
   Senkrecht gehoert die Geste weiter der Seite, sonst scrollt das Handy
   nicht mehr. Waagerecht uebernimmt das Skript. */
.check__karte{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.check__stapel .check__karte:first-child{cursor:grab}
.check__stapel .check__karte[data-wischt]{cursor:grabbing}

/* Waehrend des Ziehens sagt ein Schild, was gerade gilt. --wisch waechst
   von 0 auf 1, je weiter die Karte vom Platz ist. */
.check__karte[data-wischt]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:calc(var(--wisch,0) * .55);
}
.check__karte[data-wischt="ja"]::after{background:color-mix(in srgb,var(--cyan) 40%,transparent)}
.check__karte[data-wischt="nein"]::after{background:color-mix(in srgb,var(--magenta) 34%,transparent)}
.check__karte[data-wischt]::before{
  position:absolute;top:1rem;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.35rem .6rem;border-radius:6px;color:var(--paper);
  opacity:var(--wisch,0);
}
.check__karte[data-wischt="ja"]::before{
  content:"Trifft zu";right:1rem;background:var(--cyan-ink,#0E7490);
}
.check__karte[data-wischt="nein"]::before{
  content:"Trifft nicht zu";left:1rem;background:var(--magenta-ink);
}
@media (prefers-reduced-motion:reduce){
  .check__karte[data-wischt]::before,.check__karte[data-wischt]::after{transition:none}
}

/* ---------- Rad: Namen stehen jetzt neben den Knoten ----------
   Im Knoten deckelte der Kreis die Schrift auf 6,3 Pixel (gemessen, 375 px
   Fenster). Draussen ist Platz — darum diese Groesse. */
.rad__knoten text{font-size:14.5px}

/* Runde 9: die Klappe */
/* ---------- Abschnitte aufklappen ----------
   Gemessen waren es 39,7 Bildschirmhoehen auf dem Handy. Ueberschrift,
   Vorspann und Buste bleiben stehen — das ist die Geschichte. Der Rest
   oeffnet sich nur, wenn jemand ihn wirklich will.

   <details> braucht kein JavaScript, ist per Tastatur bedienbar, und der
   Text bleibt im Dokument — Such- und Antwortmaschinen lesen ihn weiter. */
.falt{margin-top:clamp(1.4rem,3vw,2.2rem)}
.falt__knopf{
  list-style:none;cursor:pointer;display:grid;gap:.28rem;
  /* Grosszuegige Flaeche: der Knopf ist auf dem Handy oft das Erste,
     was jemand trifft. Mindestens 48 px hoch. */
  padding:.95rem 3rem .95rem 1.15rem;min-height:48px;position:relative;
  border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--paper-2) 60%,transparent);
  transition:border-color .2s ease,background .2s ease;
}
.falt__knopf::-webkit-details-marker{display:none}
.falt__knopf:hover{border-color:var(--magenta-ink);background:color-mix(in srgb,var(--marmor) 34%,transparent)}
.falt__wort{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-ink);
}
.falt__sub{font-size:.95rem;color:var(--ink-2);line-height:1.4}

/* Das Zeichen rechts: plus, im offenen Zustand minus */
.falt__knopf::after{
  content:"+";position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.5rem;line-height:1;color:var(--magenta-ink);
}
.falt[open] .falt__knopf::after{content:"–"}
.falt[open] .falt__knopf{
  border-color:transparent;background:transparent;
  padding-left:0;padding-right:3rem;
}
.falt__inhalt{padding-top:clamp(1rem,2.4vw,1.6rem)}

/* Auf den dunklen Baendern dreht sich die Farbgebung um */
.band--ink .falt__knopf,.band--nacht .falt__knopf{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
}
.band--ink .falt__knopf:hover,.band--nacht .falt__knopf:hover{
  border-color:var(--cyan);background:rgba(255,255,255,.09);
}
.band--ink .falt__wort,.band--nacht .falt__wort,
.band--ink .falt__knopf::after,.band--nacht .falt__knopf::after{color:var(--cyan)}
.band--ink .falt__sub,.band--nacht .falt__sub{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.band--ink .falt[open] .falt__knopf,.band--nacht .falt[open] .falt__knopf{
  border-color:transparent;background:transparent;
}

@media (prefers-reduced-motion:reduce){.falt__knopf{transition:none}}

/* Runde 10: Rechtstexte */
/* ---------- Impressum und Datenschutz ----------
   Lange Fliesstexte brauchen eine schmale Spalte, sonst verliert das Auge
   beim Zeilenwechsel die Zeile. 68 Zeichen sind die uebliche Obergrenze. */
.recht{max-width:68ch;padding-block:clamp(2.5rem,7vw,5rem)}
.recht h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.03em;margin:.4rem 0 1.4rem}
.recht h2{
  font-size:clamp(1.15rem,2.4vw,1.5rem);letter-spacing:-.02em;
  margin:2.6rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.recht h3{font-size:1.05rem;margin:1.8rem 0 .5rem}
.recht p,.recht li{color:var(--ink-2);line-height:1.7}
.recht p{margin:0 0 1rem}
.recht .lead{color:var(--ink);font-size:1.08rem}
.recht ol,.recht ul{margin:0 0 1rem;padding-left:1.3rem;display:grid;gap:.7rem}
.recht li{padding-left:.2rem}
.recht a{color:var(--magenta-ink);text-underline-offset:3px}
.recht code{
  font-family:var(--mono);font-size:.86em;background:var(--paper-2);
  padding:.12em .4em;border-radius:4px;
}
.recht__fuss{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.95rem;
}

/* Runde 13: die Figuren duerfen wirken */
/* ---------- 1. Die Figurenspalte bekommt mehr als die Haelfte ----------
   Runde 8 hat beide Varianten auf saubere 50/50 gebracht. Das war richtig
   gegen das Springen, aber es ist zu brav: der Text braucht keine halbe
   Seite, die Figur schon. 57 zu 43. */
@media (min-width:940px){
  .kopf-mit-figur{grid-template-columns:minmax(0,.75fr) minmax(0,1fr)}
  .kopf-mit-figur--links{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
  /* Weiter nach aussen greifen — ueber den Rand ist ausdruecklich erwuenscht */
  .kopf-mit-figur .motiv{margin-right:clamp(-9rem,-7vw,-2rem)}
  .kopf-mit-figur--links .motiv{margin-left:clamp(-9rem,-7vw,-2rem)}
}

/* ---------- 2. Der Hoehendeckel war zu niedrig ----------
   min(84vh,860px) hat die Figur auf breiten Spalten wieder eingefangen,
   weil object-fit:contain dann seitlich Luft laesst statt zu fuellen. */
.motiv img{max-height:min(96vh,1180px)}

/* ---------- 3. Der Kontaktkopf war auf 430 px gedeckelt ----------
   Das ist der Abschnitt, den Marco genannt hat: viel Text, winziger Kopf.
   Der Deckel faellt weg, die Figur fuellt ihre Spalte wie alle anderen. */
.motiv--kontakt{width:100%}
@media (min-width:940px){.motiv--kontakt{width:100%}}

/* ---------- 4. Auf dem Handy sind die Figuren ganz ausgeblendet ----------
   Das bleibt so — dort steht der Text allein, und eine Figur zwischen
   Ueberschrift und Text wuerde den Lesefluss zerschneiden. Aber der
   Kontaktkopf, der auf dem Handy sichtbar ist, darf die volle Breite. */
@media (max-width:939px){
  .motiv--kontakt{display:block;width:min(100%,520px);margin-inline:auto}
}

/* Runde 13b: der Kontaktkopf */
/* Marco: „Ich sehe bei Kontakt so viel Text links und rechts, einfach ein
   kleiner Kopf. Das muss riesig sein."
   Ursache war nicht nur der 430-px-Deckel, sondern das Raster daneben:
   1.25fr .75fr gab der Figur nur 37 % der Breite. Jetzt fast die Haelfte,
   und sie greift nach aussen ueber den Rand. */
@media (min-width:1000px){
  .kontakt__grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
  .motiv--kontakt{margin-right:clamp(-7rem,-5vw,-1.5rem)}
}

/* Runde 16: die Figur sitzt auf der Abschnittskante */
@media (min-width:940px){
  /* Nur Baender MIT Figur beschneiden. Ein pauschales overflow auf .band
     wuerde das sticky Rad auf der Teamseite kaputtmachen. */
  .band:has(.kopf-mit-figur){overflow:clip}

  /* Die Figur steht nicht mehr mittig in der Luft, sondern sitzt unten auf */
  .kopf-mit-figur{align-items:end}
  .kopf-mit-figur .motiv{
    align-self:end;
    /* Laeuft durch das Bandpolster hindurch und wird von der Kante
       geschnitten. Der Zuschlag bestimmt, WIE VIEL abgeschnitten wird. */
    margin-bottom:calc(-1 * var(--step) - clamp(1.5rem,4vw,4.5rem));
    margin-top:calc(-1 * clamp(1rem,3vw,3rem));
  }

  /* Der Deckel darf jetzt hoeher sein — beschnitten wird ohnehin unten */
  .motiv img{max-height:min(112vh,1400px)}

  /* Die Klappe muss ueber der Figur liegen und anklickbar bleiben */
  .falt{position:relative;z-index:3}
  .band__head{position:relative;z-index:2}
}

/* Der Kontaktkopf sitzt ebenfalls auf der Kante auf */
@media (min-width:1000px){
  .kontakt__grid{align-items:end}
  .motiv--kontakt{
    align-self:end;
    margin-bottom:calc(-1 * var(--step) - clamp(1rem,3vw,3rem));
  }
  .band:has(.motiv--kontakt){overflow:clip}
}

/* Runde 16b: die Klappe ist eine Karte, kein Schleier */
/* Seit die Figur bis zur Abschnittskante laeuft, liegt sie hinter der
   Klappleiste. Halbdurchsichtig sah das nach Fehler aus — auf Marcos
   alter Seite sitzt die Bueste hinter einer MASSIVEN Karte. Also massiv. */
.falt__knopf{background:var(--paper)}
.falt__knopf:hover{background:color-mix(in srgb,var(--marmor) 30%,var(--paper))}
.band--ink .falt__knopf,.band--nacht .falt__knopf{
  background:color-mix(in srgb,var(--ink) 88%,black);
  border-color:rgba(255,255,255,.18);
}
.band--ink .falt__knopf:hover,.band--nacht .falt__knopf:hover{
  background:color-mix(in srgb,var(--ink) 78%,black);
  border-color:var(--cyan);
}
/* Im geoeffneten Zustand faellt die Karte weg, dann darf die Figur wieder
   durchscheinen — der Inhalt darunter braucht keinen Kasten. */
.falt[open] .falt__knopf,
.band--ink .falt[open] .falt__knopf,
.band--nacht .falt[open] .falt__knopf{background:transparent;border-color:transparent}
/* Der Inhalt selbst braucht dann aber einen ruhigen Grund */
.falt[open] .falt__inhalt{position:relative;z-index:3}

/* Runde 17: Klickbarkeit wiederherstellen

   Gemessen: die erste FAQ-Frage und die erste Preisstufe waren nach dem
   Umbau aus Runde 16 NICHT MEHR ANKLICKBAR — der Playwright-Klick lief in
   den Timeout. Ich hatte den Stapelplatz nur der Klappe (.falt) gegeben
   und die anderen Bloecke vergessen.

   Diese Regel loest das allgemein: jedes direkte Kind der Huelle bekommt
   einen Stapelplatz, die Figur bekommt den untersten. Damit entscheidet
   die Reihenfolge im Dokument — die Figur steht zuerst, alles danach liegt
   darueber. Auch Bloecke, die spaeter dazukommen. */
.band .shell > *{position:relative;z-index:1}
.kopf-mit-figur .motiv{z-index:0}

/* Runde 18: Team-Netz nach Vorbild des Iris-Dashboards */
/* Dunkle Karte wie im Dashboard: Kopfzeile mit Zaehler, Projektzeile,
   Rad, darunter die Liste. Das Rad selbst bleibt 400 viewBox-Einheiten
   breit und skaliert mit der Karte. */
.netz-karte{
  background:rgba(15,12,22,.72);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:clamp(.9rem,2vw,1.3rem);
  backdrop-filter:blur(8px);
}
.netz-karte + .netz-karte{margin-top:.75rem}
.netz-karte__kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;
  padding-bottom:.55rem;margin-bottom:.35rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.netz-karte__titel{
  font-family:var(--mono);font-size:.66rem;letter-spacing:1.6px;
  text-transform:uppercase;color:#B6ADC2;
}
.netz-karte__zaehler{
  font-family:var(--mono);font-size:.62rem;letter-spacing:1.1px;
  color:var(--cyan);
}
.netz-karte__projekt{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin:0 0 .3rem;font-size:.76rem;
}
.netz-karte__projekt-label{
  font-family:var(--mono);font-size:.58rem;letter-spacing:1.3px;
  text-transform:uppercase;color:#7E7489;
}
.netz-karte__projekt-name{color:#EFEAF2;font-weight:600}
.netz-karte__projekt-alter{font-family:var(--mono);font-size:.6rem;color:#7E7489}

/* ---------- Wege ----------
   Ruhig im Normalfall. Ueber ihnen wandern die Impulse. */
.netz-linie{
  stroke:rgba(255,255,255,.10);stroke-width:1;
  transition:stroke .25s ease,opacity .25s ease;
}
.netz-linie.betont{stroke:rgba(83,223,238,.7);stroke-width:1.6}
.netz-linie.blass{opacity:.22}

/* ---------- Impulse ----------
   Ein Strichmuster mit genau EINEM Strich, Luecke = Linienlaenge; das
   Muster wandert per stroke-dashoffset. Deshalb kommt die Laenge jeder
   Linie als --len aus der Zeichnung. Nur GPU-Eigenschaften, keine
   Zeichenschleife im Skript. */
.netz-puls{
  stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:var(--strich,15px) var(--len);
  stroke-dashoffset:var(--strich,15px);
  opacity:0;
  filter:drop-shadow(0 0 6px rgba(83,223,238,.9));
  animation:netzPuls 9s linear infinite;
  animation-delay:var(--verz,0s);
  pointer-events:none;
}
/* Ausblenden statt anhalten: ein pausierter Impuls bliebe als heller
   Strich mitten auf der Linie stehen — die Keyframe-Deckkraft schlaegt
   jede normale opacity-Regel. */
.netz-puls.blass{display:none}
/* Sichtbar nur im ersten Sechstel des Zyklus. Genau dadurch sind nie
   alle 26 gleichzeitig unterwegs, sondern dauerhaft rund vier. */
@keyframes netzPuls{
  0%{stroke-dashoffset:var(--strich,15px);opacity:0}
  3%{opacity:.95}
  15%{stroke-dashoffset:calc(-1 * var(--len));opacity:.95}
  18%{stroke-dashoffset:calc(-1 * var(--len));opacity:0}
  100%{stroke-dashoffset:calc(-1 * var(--len));opacity:0}
}

/* ---------- Knoten ----------
   Symbol auf einer Scheibe. Alle leuchten — sie sind alle im Dienst. */
.netz-knoten{color:var(--cyan);transition:color .25s ease,opacity .25s ease}
.js .netz-knoten{cursor:pointer}
.netz-knoten use{filter:drop-shadow(0 0 7px rgba(83,223,238,.85))}
.netz-scheibe{
  fill:rgba(9,12,19,.92);
  stroke:rgba(83,223,238,.45);stroke-width:1.2;
  animation:knotenAtem 4.4s ease-in-out infinite;
}
/* Versetzt anfangen, sonst pulsieren zehn Knoten im Gleichtakt wie eine
   Alarmanlage. */
.netz-knoten:nth-of-type(3n) .netz-scheibe{animation-delay:-1.4s}
.netz-knoten:nth-of-type(3n+1) .netz-scheibe{animation-delay:-2.9s}
@keyframes knotenAtem{
  0%,100%{stroke-opacity:.42}
  50%{stroke-opacity:.85}
}
.netz-knoten.betont{color:#EFEAF2}
.netz-knoten.betont .netz-scheibe{
  fill:rgba(235,113,190,.16);stroke:var(--magenta);stroke-width:1.6;
  animation:none;
}
.netz-knoten.betont use{filter:drop-shadow(0 0 11px rgba(235,113,190,1))}
.netz-knoten.blass{opacity:.26}
.netz-knoten:focus-visible{outline:none}
.netz-knoten:focus-visible .netz-scheibe{stroke:#EFEAF2;stroke-width:1.8}

/* ---------- Liste unter dem Rad ---------- */
.netz-liste{display:flex;flex-direction:column;max-height:19rem;overflow-y:auto}
.netz-zeile{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:.2rem .7rem;
  width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.05);
  padding:.42rem .2rem;color:inherit;font:inherit;
  transition:opacity .25s ease,background .2s ease;
}
.js .netz-zeile{cursor:pointer}
.netz-zeile:last-child{border-bottom:0}
.netz-zeile__name{color:#EFEAF2;font-weight:600;font-size:.84rem}
.netz-zeile__fach{
  grid-column:1;font-size:.7rem;color:#8D8398;
}
.netz-zeile__stand{
  grid-row:1;grid-column:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:1.1px;
  color:var(--cyan);
}
.netz-zeile.betont{background:rgba(235,113,190,.10)}
.netz-zeile.betont .netz-zeile__stand{color:var(--magenta)}
.netz-zeile.blass{opacity:.32}
.netz-zeile:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* Das Rad darf in der Karte groesser werden als die alten 440 px — die
   Namen stehen jetzt nicht mehr aussen daneben. */
.mannschaft__rad .netz-rad{max-width:none;overflow:visible}

/* Flache Fenster: die Karte plus Liste ist hoeher als der Bildschirm,
   sticky wuerde dann oben festhaengen und den Rest verdecken. Merksatz
   aus dem Layout-Skill: Layoutfehler haengen an der HOEHE. */
@media (max-height:780px){
  .mannschaft__rad{position:static}
  .netz-liste{max-height:12rem}
}

@media (prefers-reduced-motion:reduce){
  /* Ganz ausblenden statt einfrieren — ein stehender heller Strich
     mitten auf der Linie saehe nach Fehler aus. */
  .netz-puls{display:none}
  .netz-scheibe{animation:none}
}

/* Runde 20: die Liste wird nicht mehr angeschnitten */
/* Aus dem Dashboard uebernommen, wo die Spalte fest im Bildschirm sitzt.
   Hier scrollt die Seite selbst — ein Kasten mit eigenem Scrollbalken
   schneidet nur die oberste Zeile an und versteckt die Haelfte des Teams. */
.netz-liste{max-height:none;overflow:visible}
@media (max-height:780px){ .netz-liste{max-height:none} }

/* Runde 20b: die Wege muessen sichtbar sein, sonst schweben die Impulse */
/* Aus dem Dashboard kam .09 — dort sitzt das Netz auf einer dichten,
   hellen Glaskarte. Hier steht es auf fast schwarzem Grund, und in der
   Aufnahme sah es aus, als schwebten die Impulse frei im Raum statt auf
   einem Weg zu laufen. Der Weg muss erkennbar sein, sonst zeigt die
   Animation nicht, WER mit wem redet. */
.netz-linie{stroke:rgba(255,255,255,.17)}

/* Runde 21: Netz gross in die Mitte, Mannschaft in Reihen darunter */
/* ---------- 1. Eine Spalte ----------
   .mannschaft war ein Raster aus zwei Spalten. Solange das steht, kann
   das Netz gar nicht gross werden — es ist auf die halbe Breite
   gedeckelt, egal welche max-width innen steht. */
.mannschaft{display:block}
@media (min-width:900px){
  .mannschaft{grid-template-columns:none}
  /* Sticky ergibt ohne Nebenspalte keinen Sinn mehr. */
  .mannschaft__rad{position:static}
}

/* ---------- 2. Das Netz wird gross ----------
   Der alte Deckel von 440 px stammt aus der Zeit als Nebenspalte. */
.mannschaft__rad{margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.mannschaft__rad .netz-rad{
  max-width:min(100%,760px);
  margin-inline:auto;
  overflow:visible;
}
.netz-karte{max-width:900px;margin-inline:auto}

/* ---------- 3. Der Name erscheint erst auf Klick ---------- */
.netz-name{
  fill:#EFEAF2;
  font-family:var(--mono);
  font-size:11px;              /* viewBox-Einheiten, skaliert mit dem Rad */
  letter-spacing:.6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.netz-knoten.betont .netz-name{opacity:1}
/* Ein blasser Knoten soll seinen Namen nicht doch noch zeigen. */
.netz-knoten.blass .netz-name{opacity:0}

/* ---------- 4. Die Mannschaft fuellt die Breite ----------
   Vorher eine einspaltige Kette von zehn Karten neben dem Rad. Jetzt
   teilen sie sich die Zeile: breit fuenf, dann vier, drei, zwei, eine. */
.mannschaft__liste{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);
  align-items:start;
}

/* ---------- 5. Reste der zweiten Liste ---------- */
.netz-karte--liste,.netz-liste,.netz-zeile{display:none}

/* Runde 22: Fokusrahmen, blasse Knoten, volle Kartenreihen */
/* ---------- 1. Kein Browser-Rahmen um den Knoten ----------
   :focus-visible allein reicht nicht — beim Klicken mit der Maus greift
   es nicht, und der Browser zeichnet trotzdem seinen Kasten. */
.netz-knoten:focus,
.netz-knoten:focus-visible{outline:none}
/* Sichtbar bleibt der Fokus ueber die Scheibe. Wer mit der Tastatur
   durchgeht, sieht also weiterhin, wo er steht. */
.netz-knoten:focus-visible .netz-scheibe{
  stroke:#EFEAF2;stroke-width:2;
}

/* ---------- 2. Unbeteiligte treten zurueck, verschwinden aber nicht ---------- */
.netz-knoten.blass{opacity:.42}
.netz-linie.blass{opacity:.3}

/* ---------- 3. Der Name bleibt auch ueber einer Linie lesbar ---------- */
.netz-name{
  paint-order:stroke;
  stroke:rgba(10,8,15,.92);
  stroke-width:3px;
  stroke-linejoin:round;
}

/* ---------- 4. Jede Kartenreihe ist voll ----------
   auto-fit ergab bei zehn Karten 4 + 4 + 2. Zehn teilt sich glatt nur
   durch 5, 2 und 1 — deshalb feste Stufen statt auto-fit. */
@media (min-width:1180px){
  .mannschaft__liste{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:620px) and (max-width:1179px){
  .mannschaft__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:619px){
  .mannschaft__liste{grid-template-columns:minmax(0,1fr)}
}

/* Runde 23, Teil A wirkt in den BILDERN (siehe _flach.py): die 6 %
   durchsichtiger Rand unter jeder Figur sind weg. Teil B — die Figur an
   den Abschnitt statt an ihre Rasterzeile zu haengen — habe ich hier
   zurueckgenommen: zweiter Anlauf, zweites Mal sieben Figuren 0 Punkte
   breit und groessere Luecken als vorher. Er braucht eine schmalere
   Inhaltsspalte, und das ist eine Gestaltungsentscheidung, keine
   Fehlerbehebung. */
.motiv img{object-position:bottom}

/* Runde 23, Teil C: der Zuschlag ist die Klappe, keine Fensterbreite */
@media (min-width:940px){
  .kopf-mit-figur .motiv{
    margin-bottom:calc(-1 * var(--step) - 7rem);
    margin-top:calc(-1 * clamp(1rem,3vw,3rem));
  }
}

/* Runde 24: Netz ganz in Blau, ohne Kasten */
/* ---------- Kein Kasten mehr ----------
   Der Rahmen kam aus dem Dashboard, wo jede Kachel eine Glaskarte ist.
   Hier steht die Grafik allein auf der Seite. */
.netz-karte{
  background:none;border:0;padding:0;backdrop-filter:none;
  max-width:none;margin-inline:auto;
}
.netz-karte__kopf,.netz-karte__projekt{display:none}

/* ---------- Der angetippte Knoten leuchtet blau statt rosa ---------- */
.netz-knoten.betont .netz-scheibe{
  fill:rgba(83,223,238,.16);
  stroke:#A9F2FB;
  stroke-width:1.8;
  animation:none;
}
.netz-knoten.betont use{filter:drop-shadow(0 0 12px rgba(83,223,238,1))}
.netz-knoten.betont{color:#EAFBFE}

/* Runde 25: die Hero-Figur sitzt auf der Abschnittskante */
@media (min-width:900px){
  .hero__figure{align-self:end}
  .hero__figure{
    /* Verschieben statt negativer Rand: die Figur steht in einem Raster
       mit align-items:center — ein Rand verkleinert ihren Kasten, und die
       Zentrierung schiebt sie wieder zurueck. Gemessen kamen so nur 211
       der noetigen 259 px an. transform greift nach dem Layout.
       12,8rem = der von der Fensterbreite unabhaengige Teil (Awardleiste
       samt Abstand), dazu das Hero-Polster aus derselben Angabe wie oben. */
    /* Runde 26: Die Awardleiste steht nicht mehr unter der Bildzeile.
       Auszugleichen ist damit nur noch das Polster der Hero. */
    transform:translateY(clamp(2rem,4vw,3.4rem));
  }
  /* Die Awards muessen ueber der Figur liegen, nicht darunter. */
  .hero .trust{position:relative;z-index:2}
}

/* Runde 26: die Vertrauensleiste ist ein eigener Abschnitt */
.trustband{padding-bottom:clamp(1.4rem,3vw,2.4rem)}
/* Der Trennstrich der Leiste ersetzt den Abstand nach oben — sie sitzt
   jetzt direkt unter der Hero und braucht keinen eigenen Vorlauf. */
.trustband .trust{margin-top:0;padding-top:clamp(1.4rem,3vw,2.2rem)}

/* Runde 26b: die letzten 16 px.
   Zweimal danebengetippt: weder das Bild noch das <picture> waren schuld
   (beide stehen jetzt trotzdem auf Block, das schadet nicht). Gemessen
   ergab .hero__figure margin-bottom 16px — das ist die Voreinstellung des
   Browsers fuer <figure> (margin: 1em 40px). Die Regeln ab 900 px setzen
   nur margin-right und margin-left, der untere blieb stehen. */
.hero__figure{margin-bottom:0}
.hero__figure picture,.hero__buste{display:block}