/* =========================================================
   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(-10rem,-8vw,-3rem);      /* greift nach links unter den Text */
    margin-right:clamp(-3rem,-3vw,-.5rem);     /* und laeuft rechts aus dem Raster */
    width:calc(100% + clamp(2rem,6vw,6rem));
  }
}
.motiv{margin:0;position:relative;z-index:1;justify-self:center;
  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. */
.motiv img{
  width:auto;max-width:100%;height:auto;display:block;margin-inline:auto;
  max-height:clamp(260px,30vw,400px);
}
/* 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){
  .kopf-mit-figur{grid-template-columns:minmax(0,1fr) clamp(300px,32vw,470px)}
}
.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(-3rem,-3vw,-.5rem);
    margin-right:clamp(-10rem,-8vw,-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){
  /* Text zuerst, Buste darunter — wie auf der Originalseite */
  .hero__figure{order:1;margin-top:1.6rem}
  .hero__copy{order:0;text-align:center}
  .hero__copy .eyebrow{margin-inline:auto}
  .hero h1{font-size:clamp(2.3rem,8.4vw,3.4rem);margin-top:.7rem}
  .hero h1 .turn{margin-top:.15em}
  .hero__lead{margin-inline:auto;max-width:34ch}
  .hero__mehr{
    margin-inline:auto;text-align:center;
    border-left:0;border-top:2px solid var(--magenta);
    padding-left:0;padding-top:.7rem;width:fit-content;
  }
  .hero__cta{justify-content:center}

  /* Die Büste gross und ganz — sie ist das Markenzeichen */
  .hero__figure{width:min(100%,520px)}
  .hero__buste{width:100%}

  /* Presselogos als dunkles Band am Fuss des Hero, zwei Spalten */
  .bekannt{
    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}
}