/* ============================================================
   modvio — Landing v4. Neuaufbau von oben, Sektion für Sektion.

   ⚠️ Die Design-Tokens stehen seit dem 18.08.2026 NICHT mehr hier,
   sondern in `ci.css` — der einzigen Quelle fuer alle Seiten der neuen
   Fassung. Hier keinen `:root` wieder aufmachen: eine zweite Definition
   macht den Wert davon abhaengig, welche Datei zuletzt geladen wurde.

   Kantig: Radius 0 auf Flächen, 4px auf Knöpfen.
   Prinzip: das Modulraster der Wortmarke — als Rasternetz, als
   quadratische Marken, als Modulkacheln.

   ⚠️ Zum Grundton stand hier bis zum 18.08.2026: „Farbentscheid
   (17.08.2026 mit User): WEISS als Grund, kein warmes Sand mehr … ein
   sehr leichter Blau-Schleier … EIN kühles Grau". Das war ueberholt und
   ist deshalb entfernt: weiter unten in derselben Datei stand unter
   „Wärmer und weicher" ein ZWEITER `:root`, der spaeter kam und auf warm
   umstellte. Ausgeliefert wird warm — `--paper:#F8F7F4`, `--line:#E6E3DC`,
   Blau-Kanal NIEDRIGER als Rot; ein Blau-Schleier waere umgekehrt. So
   auch auf neu.modvio.de gemessen (rgb(248,247,244)). Beide Bloecke sind
   jetzt in `ci.css` zusammengefuehrt — dort steht der warme Stand EINMAL.
   ============================================================ */
@font-face{font-family:"Plus Jakarta Sans";font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans.woff2) format("woff2")}
/* Handschrift NUR fuer die Auszeichnung „Docs“ im Fuss. Selbst gehostet wie alles andere,
   kein Google-Aufruf beim Seitenaufruf. Caveat SemiBold, SIL Open Font License 1.1 (Lizenztext
   liegt daneben: fonts/OFL-Caveat.txt). Auf 79 Zeichen zusammengeschnitten, 12,6 statt 51,2 KB —
   Grundlatein plus Umlaute, damit ein anderes Wort dort nicht auf die Ersatzschrift faellt. */
@font-face{font-family:"Caveat";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/caveat-docs.woff2) format("woff2")}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fs);color:var(--ink);background-color:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;background-image:
  linear-gradient(rgba(11,18,32,.026) 1px,transparent 1px),
  linear-gradient(90deg,rgba(11,18,32,.026) 1px,transparent 1px),
  radial-gradient(820px 560px at 4% 7%,rgba(36,86,232,.075),transparent 68%),
  radial-gradient(700px 500px at 97% 19%,rgba(36,86,232,.065),transparent 70%),
  radial-gradient(880px 600px at 10% 38%,rgba(36,86,232,.06),transparent 70%),
  radial-gradient(760px 540px at 94% 55%,rgba(36,86,232,.065),transparent 70%),
  radial-gradient(840px 580px at 14% 72%,rgba(36,86,232,.055),transparent 70%),
  radial-gradient(720px 520px at 92% 88%,rgba(36,86,232,.06),transparent 70%);background-size:104px 104px,104px 104px,auto,auto,auto,auto,auto,auto;background-position:center top,center top,0 0,0 0,0 0,0 0,0 0,0 0}
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue-deep)}
::selection{background:#D9E4FF}
.wrap{width:var(--mx);margin:0 auto}
h1,h2,h3{font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.7rem,5.2vw,4.5rem);letter-spacing:-.047em;line-height:.98}
h2{font-size:clamp(2.2rem,4.2vw,3.6rem);letter-spacing:-.042em}
h3{font-size:1.12rem;letter-spacing:-.024em}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.eyebrow::before{content:"";flex:0 0 auto;width:7px;height:7px;background:var(--blue);border-radius:2px}

/* Die kleinen Akzent-Quadrate sind Zellen des Zeichens in klein — sie tragen dieselbe
   Rundung wie das Zeichen selbst (30 % der Kante, siehe .mark .mk i). Vorher standen hier
   drei Werte nebeneinander: 0, 2px und gar keine Angabe. EINE Zeile zum Zurueckdrehen:
   diesen Block loeschen, dann sind alle wieder scharfkantig. */
.hero .note i,.cmp-h i,.cmp li i,.tile .cap i,.three li i,.modgrid .sq,
.lg-i.open s,.keeps-note i,.acc-b li i{border-radius:30%}
.claim .eyebrow::before{background:#7FA3FF}
/* Mittige Koepfe: der Akzent wandert mit in die Mitte. */
.sec-mid .eyebrow,.claim-head .eyebrow,.gal-head .eyebrow,.uc-head .eyebrow,.tel-in .eyebrow{justify-content:center}
.lede{font-size:clamp(1.04rem,1.2vw,1.17rem);color:var(--text);line-height:1.62;text-wrap:pretty}
.lede b{color:var(--ink);font-weight:600}
h2+.lede{margin-top:18px}
.sec{padding:var(--pad) 0}
.sec-tight{padding-top:clamp(30px,3.6vw,54px)}
.grey{background:color-mix(in srgb,var(--grey) 82%,transparent)}
.hr-top{border-top:1px solid var(--line)}
:where(section[id],div[id]){scroll-margin-top:calc(var(--nav-h) + 16px)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Knöpfe: kantig, flach, ein Akzent ---------- */
.btn,.btn-2,.btn-w,.btn-o{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:.98rem;font-weight:600;padding:15px 24px;border-radius:var(--r-btn);border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.btn{background:var(--blue);color:#fff}
.btn:hover{background:var(--blue-deep);color:#fff}
.btn-2{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-2:hover{border-color:var(--ink);color:var(--ink)}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{background:#E9EBEF;color:var(--ink)}
.btn-o{border-color:rgba(255,255,255,.34);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.65);color:#fff}
.btn svg,.btn-2 svg,.btn-w svg,.btn-o svg{width:17px;height:17px;flex:0 0 auto}
.btn-sm{padding:11px 17px;font-size:.9rem}
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:.94rem;font-weight:600;color:var(--blue-deep)}
.tlink svg{width:14px;height:14px;transition:transform .18s}
.tlink:hover svg{transform:translateX(3px)}

/* ---------- Wortmarke ---------- */
.mark{display:flex;align-items:center;gap:9px;font-size:1.16rem;font-weight:700;letter-spacing:-.045em;flex:0 0 auto}
.mark .mk{width:19px;height:19px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;flex:0 0 auto}
.mark .mk i{background:currentColor;border-radius:30%}
.mark .mk i.hl{background:var(--blue)}

/* ---------- Ankündigungsband über der Leiste ---------- */
.topbar{background:var(--grey);border-bottom:1px solid var(--line);text-align:center;padding:11px 20px;font-size:.86rem;color:var(--text)}
.topbar b{color:var(--ink);font-weight:700}
.topbar a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.topbar a:hover{color:var(--ink)}
@media(max-width:600px){.topbar{font-size:.79rem;padding:9px 14px;line-height:1.45}}

/* ---------- Navileiste: volle Breite, hell, mittiges Menü, kantig ----------
   Oben transparent, damit der Blau-Schleier durchläuft; ab 12 px Scroll legt
   sich Weiss darunter. Keine Größenänderung, kein Morphen. */
.nv{position:sticky;top:0;z-index:90;background:transparent;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,backdrop-filter .25s}
.nv.on{background:rgba(248,247,244,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nv-in{width:min(1240px,94vw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;height:var(--nav-h)}
.nv .mark{color:var(--ink);font-size:1.28rem}
.nv .mark:hover{color:var(--ink)}
.nv .mark .mk{width:21px;height:21px}
.nv-menu{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.nv-menu a{font-size:.95rem;font-weight:500;color:var(--ink-2);padding:10px 14px;white-space:nowrap;transition:color .15s}
.nv-menu a:hover{color:var(--blue-deep)}
.nv-r{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.nv-login{font-size:.95rem;font-weight:500;color:var(--ink-2);padding:10px 12px}
.nv-login:hover{color:var(--blue-deep)}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-btn);place-items:center;background:var(--grey);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.burger svg{width:20px;height:20px}
@media(max-width:1199px){.nv-menu,.nv-login{display:none}.burger{display:grid}.nv-in{grid-template-columns:auto 1fr}.nv-r{grid-column:2}}
/* Der Knopf BLEIBT schmal stehen (bis 19.08.2026 stand hier `display:none`) — er ist
   dadurch der erste Handlungsweg der Seite, statt dass der erste erst bei 610 px kommt.
   Platz auf 390 px: 350 nutzbar minus Wortmarke und Burger; die gekuerzte Beschriftung
   „WhatsApp" passt, die volle nicht. Gemessen, nicht geschaetzt. */
@media(max-width:640px){
  .nv-in{height:64px}
  .nv .mark{font-size:1.1rem}
  .nv-r{gap:7px}
  /* 44 px bleiben 44 px: unsere Touchziele sind der beste Wert im Vergleichsfeld
     (42 gegen 246 bei Clay) — der neue Knopf darf diese Zahl nicht verschlechtern. */
  .nv-r .btn{padding:0 13px;height:44px;font-size:.88rem;gap:7px;white-space:nowrap}
  .nv-r .btn svg{width:17px;height:17px}
}
.mnv{position:fixed;inset:0;z-index:95;background:var(--paper);display:flex;flex-direction:column;padding:18px clamp(22px,7vw,44px) 40px;opacity:0;visibility:hidden;transition:opacity .22s}
.mnv.open{opacity:1;visibility:visible}
.mnv-x{align-self:flex-end;width:46px;height:46px;border:1px solid var(--line);background:var(--grey);border-radius:var(--r-btn);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.mnv-x svg{width:19px;height:19px}
.mnv a{font-size:1.3rem;font-weight:700;letter-spacing:-.03em;padding:16px 0;border-bottom:1px solid var(--line)}
.mnv .btn{margin-top:24px;justify-content:center}

/* ---------- HERO ----------
   Das Weiss ist nie ganz weiss: Blau-Schleier von oben + das Modulraster,
   beide nach unten ausgeblendet. Der Schleier beginnt HINTER der Leiste,
   deshalb sitzt er als eigene Ebene mit negativem Versatz nach oben. */
.hero{position:relative;padding:clamp(30px,4vw,60px) 0 0}
.hero .wash{position:absolute;left:0;right:0;top:calc(-1*var(--nav-h));bottom:0;pointer-events:none;background:radial-gradient(115% 74% at 50% -6%,#E6EEFF 0%,rgba(238,243,254,.5) 40%,var(--paper) 72%)}
.hero .raster{position:absolute;left:0;right:0;top:calc(-1*var(--nav-h));bottom:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--grid) var(--grid);background-position:0 0;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hg{display:grid;grid-template-columns:1fr 1.14fr;gap:clamp(30px,4vw,60px);align-items:center;padding-bottom:clamp(44px,5.6vw,80px)}
@media(max-width:1000px){.hg{grid-template-columns:1fr;gap:36px}}
.hero h1{margin-top:22px;max-width:15ch}
.hero .lede{margin-top:24px;max-width:44ch}
.hero .row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
@media(max-width:600px){.hero .row .btn,.hero .row .btn-2{flex:1 1 100%;justify-content:center}}
.hero .note{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.84rem;color:var(--soft)}
.hero .note i{width:6px;height:6px;background:var(--green);flex:0 0 auto}
.mini{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3.2vw,40px);padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.mini .l{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mini b{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;letter-spacing:-.028em;color:var(--ink)}
.mini-l{flex:0 0 auto;width:17px;height:17px;color:var(--ink)}
.mini .sep{width:1px;height:16px;background:var(--line-2)}
/* Produktfenster läuft über die rechte Kante hinaus */
/* Anschnitt genau bis zur Fensterkante, nie darueber: 13vw war groesser als der
   rechte Seitenrand ((100vw - var(--mx))/2 = 100px bei 1440), damit lagen die
   Betraege im Angebots-Panel ausserhalb des Bildes — also genau der Beweis, den
   das Panel tragen soll (17.08.2026 gemessen). */
.shot{position:relative;width:calc(100% + (100vw - var(--mx))/2)}
@media(max-width:1000px){.shot{width:100%}}
.flag{position:absolute;left:-26px;bottom:34px;display:flex;align-items:center;gap:11px;background:var(--ink);color:#fff;padding:13px 16px;box-shadow:0 18px 40px -20px rgba(11,14,20,.5)}
.flag .ic{width:26px;height:26px;background:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.flag .ic svg{width:14px;height:14px}
.flag b{display:block;font-size:.8rem;font-weight:700;letter-spacing:-.01em}
.flag span{font-size:.71rem;color:#9CA3B0}
@media(max-width:1000px){.flag{position:static;display:inline-flex;margin-top:14px}}
@media(max-width:560px){.flag{display:none}}

/* ---------- Produktfenster: der ECHTE Panel-Screenshot ---------- */
/* Hier standen bis 19.08.2026 rund 50 Regeln fuer ein nachgebautes Produktfenster
   (.app-bar/.app-rail/.app-main/.app-side/.tbl/.st). Der Nachbau ist durch eine Aufnahme
   des echten Panels ersetzt (siehe hero-aufnahme.mjs) — damit sind die Regeln verwaist
   und weg. .shot bleibt: die Kundengeschichte benutzt es weiter. */
.shot .app-shot{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 20px 56px -32px rgba(11,14,20,.35)}

/* ---------- Anschluss-Band: das sinnvolle Grau ---------- */
/* ⚠️ Umbau 18.08.2026. Vorher: Ueberschrift links, daneben rechts eine Chip-Zeile
   plus ein zweiter Textblock — zwei Bloecke, die um dieselbe Aufmerksamkeit
   konkurrierten, und die Ueberschrift kam ueber 33 px nicht hinaus. Gemessen war
   der Abschnitt danach 0,0 % Bildflaeche und 78 % des Textes in EINER Groesse.
   Jetzt: Ueberschrift ueber die volle Breite, eine Lede darunter.
   Die Regeln .li-x/.li-p sind mit der Chip-Zeile entfallen (nirgends sonst
   benutzt, geprueft). */
/* Mittig, wie der Hero direkt darueber (`.hero-c` ist zentriert). Linksbuendig sass der
   Block als einziger auf der Achse daneben — und weil beide Zeilen kuerzer sind als ihre
   Zeile, riss rechts eine Luecke auf, die nach vergessenem Text aussah.
   ⚠️ `margin-inline:auto` gehoert zu jedem der beiden Blocks: sie haben eine `max-width`
   (36ch/52ch) und stuenden sonst trotz `text-align:center` weiter links im Kasten.

   ⚠️ 19.08.2026: Die Programme lagen bis heute als eigene Karte im Abschnitt DARUNTER
   (`.flick`, rund 120 Zeilen CSS plus 40 Zeilen Markup). Jetzt liegen sie als blasser
   Teppich HINTER diesem Text — die Ueberschrift sagt „drumherum", also gehoeren sie
   drumherum. Das spart den ganzen Block und erklaert sich ohne Beschriftung. */
.lead-in{position:relative;overflow:hidden;background:var(--grey);border-top:1px solid var(--line);
  padding:clamp(64px,7.5vw,104px) 0;text-align:center}
.lead-in .wrap{position:relative;z-index:1}

/* Der Teppich. Ungleich gross und leicht verdreht: eine saubere Reihe waere eine
   Logo-Leiste — gemeint ist das Gegenteil, naemlich Gewusel drumherum.
   ⚠️ Sie liegen OBEN und UNTEN, nicht seitlich. Gemessen (19.08.2026) ist neben der
   Textspalte nur 5–7 % Rand frei (bei 1920 px 17,7 %), ueber und unter dem Text dagegen
   je rund 26 % — der erste Versuch mit seitlichen Marken hatte 6 von 8 hinter der
   Schrift. Der Platz entscheidet hier, nicht die Deckkraft. */
.li-tepp{position:absolute;inset:0;pointer-events:none;color:var(--ink);z-index:0}
.li-tepp svg{position:absolute;fill:currentColor;opacity:.06;
  width:clamp(38px,4.4vw,64px);height:auto;aspect-ratio:1}
.li-tepp svg:nth-child(1){left:8%;top:3%;transform:rotate(-8deg)}
.li-tepp svg:nth-child(2){left:31%;top:7%;width:clamp(30px,3.4vw,50px);transform:rotate(7deg)}
.li-tepp svg:nth-child(3){left:56%;top:2%;width:clamp(34px,3.9vw,57px);transform:rotate(-4deg)}
.li-tepp svg:nth-child(4){left:79%;top:8%;width:clamp(29px,3.2vw,46px);transform:rotate(11deg)}
.li-tepp svg:nth-child(5){left:15%;bottom:4%;width:clamp(32px,3.6vw,53px);transform:rotate(6deg)}
.li-tepp svg:nth-child(6){left:39%;bottom:8%;width:clamp(28px,3.1vw,45px);transform:rotate(-9deg)}
.li-tepp svg:nth-child(7){left:63%;bottom:3%;transform:rotate(4deg)}
.li-tepp svg:nth-child(8){left:86%;bottom:9%;width:clamp(27px,3vw,43px);transform:rotate(-6deg)}
/* Auf dem Handy bricht die Ueberschrift auf mehr Zeilen um: gemessen bleiben oben und
   unten nur noch 18,7 % statt 26 %. Also naeher an die Kante, sonst steht die letzte
   Marke der Schrift auf den Fuessen. */
@media(max-width:640px){
  .li-tepp svg:nth-child(1){top:1.5%}.li-tepp svg:nth-child(2){top:3%}
  .li-tepp svg:nth-child(3){top:1%}.li-tepp svg:nth-child(4){top:3.5%}
  .li-tepp svg:nth-child(5){bottom:2%}.li-tepp svg:nth-child(6){bottom:3.5%}
  .li-tepp svg:nth-child(7){bottom:1%}.li-tepp svg:nth-child(8){bottom:3.5%}
}
.lead-in h2{font-size:clamp(1.9rem,3.9vw,3.05rem);letter-spacing:-.038em;line-height:1.06;
  max-width:36ch;margin-inline:auto}
.lead-in .li-lede{margin:clamp(14px,1.6vw,20px) auto 0;font-size:clamp(1.02rem,1.35vw,1.22rem);
  line-height:1.55;color:var(--soft);max-width:52ch;text-wrap:balance}
.lead-in .li-lede b{color:var(--ink);font-weight:700}

/* ---------- Gegenüberstellung: links das Graue, rechts das Klare ----------
   Das Grau ist hier kein Dekor, sondern die Aussage: die alte Seite ist stumpf. */
.cmp{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:clamp(28px,3.4vw,44px)}
.cmp-col{padding:clamp(22px,2.6vw,36px)}
.cmp-col.now{background:var(--grey)}
.cmp-col.new{background:#fff}
.cmp-col+.cmp-col{border-left:1px solid var(--line)}
@media(max-width:760px){.cmp{grid-template-columns:1fr}.cmp-col+.cmp-col{border-left:0;border-top:1px solid var(--line)}}
.cmp-h{display:flex;align-items:center;gap:10px;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.cmp-h i{width:9px;height:9px;flex:0 0 auto}
.cmp-col.now .cmp-h{color:var(--soft)}
.cmp-col.now .cmp-h i{background:var(--line-2)}
.cmp-col.new .cmp-h{color:var(--blue-deep)}
.cmp-col.new .cmp-h i{background:var(--blue)}
.cmp ul{list-style:none;margin-top:18px}
.cmp li{display:grid;grid-template-columns:17px 1fr;gap:13px;padding:13px 0;border-top:1px solid var(--line);font-size:.95rem;line-height:1.5;align-items:start}
.cmp li:first-child{border-top:0;padding-top:2px}
/* Kreis mit Kreuz bzw. Haken. Vorher waren beide Seiten dasselbe 9-px-Quadrat und
   damit optisch gleichwertig — links ist aber etwas kaputt und rechts erledigt. */
.cmp li i{width:17px;height:17px;border-radius:50%;margin-top:2px;flex:0 0 auto;display:grid;place-items:center}
.cmp li i svg{width:11px;height:11px}
.cmp-col.now li{color:var(--soft)}
.cmp-col.now li i{border:1.5px solid #C7CBD3;color:#9AA2B0}
.cmp-col.new li{font-weight:600;color:var(--ink);color:var(--ink-2)}
.cmp-col.new li i{background:var(--blue);color:#fff}
.cmp-fazit{grid-column:1/-1;border-top:1px solid var(--line);background:#fff;padding:clamp(18px,2.2vw,26px) clamp(22px,2.6vw,36px);font-size:1.02rem;font-weight:600;line-height:1.55}
@media(max-width:760px){.cmp-fazit{grid-column:1}}

/* ---------- Galerie: gebaute Beispiele, Kachel-Lauf (Mate-Muster) ---------- */
.gal-head{text-align:center;max-width:36ch;margin:0 auto}
.gal-head h2{margin-top:16px}
.gal-head .lede{margin:16px auto 0;max-width:54ch}
.rail{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:clamp(30px,4vw,50px);padding:0 0 34px}
.rail::-webkit-scrollbar{display:none}
.tile{flex:0 0 clamp(256px,28vw,368px);scroll-snap-align:center;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;overflow:hidden}
.tile:nth-child(even){margin-top:34px}
@media(max-width:600px){.tile:nth-child(even){margin-top:0}}
.tile .ph image-slot{width:100%;height:100%;display:block}
.tile .ph{flex:0 0 auto;aspect-ratio:3/2;background:repeating-linear-gradient(135deg,#F8F9FB 0 9px,#EFF1F5 9px 18px);display:grid;place-items:center;border-bottom:1px solid var(--line)}
.tile .ph span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;letter-spacing:.05em;color:var(--faint);text-align:center;padding:0 18px;line-height:1.6}
.tile img{width:100%;flex:0 0 auto;aspect-ratio:3/2;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.tile .cap{display:flex;align-items:center;gap:9px;padding:13px 15px}
.tile .cap i{width:8px;height:8px;background:var(--blue);flex:0 0 auto}
.tile .cap b{font-size:.86rem;font-weight:600;letter-spacing:-.012em}
.tile .cap span{margin-left:auto;font-size:.72rem;color:var(--faint);white-space:nowrap}
.gal-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.gal-foot .nav{display:flex;gap:10px}
.gal-foot button{width:44px;height:44px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-btn);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:border-color .16s}
.gal-foot button:hover{border-color:var(--ink)}
.gal-foot svg{width:16px;height:16px}

/* ---------- Wie es funktioniert: drei Ebenen ---------- */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:#fff;margin-top:clamp(28px,3.4vw,44px)}
.three>div{padding:clamp(22px,2.4vw,32px)}
.three>div+div{border-left:1px solid var(--line)}
@media(max-width:900px){.three{grid-template-columns:1fr}.three>div+div{border-left:0;border-top:1px solid var(--line)}}
.three .no{display:grid;place-items:center;width:30px;height:30px;background:var(--blue-tint);color:var(--blue-deep);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.three h3{margin-top:16px;line-height:1.24}
.three p{font-size:.93rem;color:var(--text);line-height:1.6;margin-top:10px}
.three ul{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.three li{display:grid;grid-template-columns:8px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--ink-2);line-height:1.45}
.three li:last-child{border-bottom:0}
.three li i{width:8px;height:8px;background:var(--blue);margin-top:6px}

/* ---------- Modul-Streifen: das Erkennungszeichen als Aussage ---------- */
.modstrip{margin-top:14px;border:1px solid var(--line);background:var(--warm);padding:clamp(20px,2.4vw,30px)}
.modstrip .ml{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);margin-bottom:16px}
.modstrip .ml span{letter-spacing:0;text-transform:none;font-weight:400;font-size:.86rem;color:var(--text)}
.modgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.modgrid>div{background:#fff;padding:18px 14px;min-height:98px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.modgrid .sq{width:10px;height:10px;background:var(--line-2);flex:0 0 auto}
.modgrid b{font-size:.85rem;font-weight:600;letter-spacing:-.01em}
.modgrid .own{grid-column:1/-1;background:var(--blue-tint);flex-direction:row;align-items:center;gap:14px;min-height:0;padding:16px 18px;justify-content:flex-start;flex-wrap:wrap}
.modgrid .own .sq{background:var(--blue)}
.modgrid .own p{font-size:.85rem;color:var(--text);line-height:1.5;flex:1 1 260px;min-width:0}
.modgrid .own em{position:static;font-style:normal;font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--blue);padding:5px 8px;flex:0 0 auto}
.modgrid .add b{color:var(--faint);font-weight:500}
.modgrid .add .sq{background:transparent;border:1px dashed var(--line-2)}
@media(max-width:900px){.modgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.modgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Der dunkle Halt in der Mitte der Seite ----------
   Die Seite war ein Stapel gleich grosser Rechtecke. Hier bricht sie: volle
   Breite, kein Rahmen, nur Typo — einmal auf der ganzen Strecke. */
.claim{background:var(--ink);color:#fff;padding:clamp(84px,11vw,152px) 0 clamp(60px,7vw,96px)}
.claim .eyebrow{color:#8F97A6}
.claim-head{text-align:center;max-width:100%;margin:0 auto}
.claim-head .eyebrow{justify-content:center}
.claim h2{color:#fff;font-size:clamp(2.3rem,5vw,4.1rem);letter-spacing:-.047em;line-height:1.04;margin:20px auto 0;max-width:19ch;text-wrap:balance}
.claim h2 em{font-style:normal;color:#7FA3FF}
.claim .after{margin:26px auto 0;font-size:1.06rem;color:#B7BDC8;line-height:1.62;max-width:52ch}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,6vw,84px);border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:820px){.reasons{grid-template-columns:1fr}}
.reasons>div{padding:clamp(24px,2.6vw,34px) clamp(18px,2.2vw,30px) 0 0}
.reasons>div+div{padding-left:clamp(18px,2.2vw,30px);border-left:1px solid rgba(255,255,255,.16)}
@media(max-width:820px){.reasons>div+div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}}
.reasons .no{display:grid;place-items:center;width:28px;height:28px;background:rgba(127,163,255,.16);color:#7FA3FF;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.reasons b{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.024em;margin-top:16px;color:#fff}
.reasons p{font-size:.93rem;color:#9CA3B0;line-height:1.6;margin-top:9px;max-width:38ch}

/* ---------- KI am Telefon: das Einzige auf der Seite, das man auslösen kann ---------- */
.tel-in{position:relative;max-width:min(1040px,100%);margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);padding:clamp(30px,4vw,60px) clamp(22px,3.5vw,52px)}
.tel-in>*{position:relative}
/* Die Flaeche um die Kachel: eigenes Raster plus Schleier, damit der Bereich lebt.
   Die Kachel selbst bleibt weiss und ruhig. */
#telefon{position:relative;overflow:hidden;background:none}
#telefon::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-color:color-mix(in srgb,var(--wash) 70%,transparent);background-image:linear-gradient(rgba(11,18,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,18,32,.045) 1px,transparent 1px),radial-gradient(64% 70% at 12% 6%,rgba(36,86,232,.13),transparent 68%),radial-gradient(60% 66% at 90% 88%,rgba(36,86,232,.11),transparent 70%);background-size:52px 52px,52px 52px,auto,auto;background-position:center top}
#telefon>.wrap{position:relative;z-index:1}
.tel-in h2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:24ch;margin:16px auto 0}
.tel-in .lede{margin:16px auto 0;max-width:46ch}
.telc-wrap{max-width:520px;margin:28px auto 0}
.telc-pill{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line-2);padding:5px 5px 5px 4px;text-align:left;transition:border-color .16s,box-shadow .16s}
.telc-pill:focus-within{border-color:var(--blue-ink);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.telc-pill input[type=tel]{flex:1 1 auto;min-width:0;font-family:inherit;font-size:1rem;color:var(--ink);background:none;border:0;padding:14px 12px}
.telc-pill input[type=tel]:focus{outline:none}
.telc-pill input[type=tel]::placeholder{color:var(--faint)}
.telc-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:.95rem;font-weight:600;padding:0 22px;border:0;border-radius:var(--r-btn);cursor:pointer;color:#fff;background:var(--blue);transition:background .16s}
.telc-go svg{width:16px;height:16px;flex:0 0 auto}
.telc-go:hover:not(:disabled){background:var(--blue-deep)}
.telc-go:disabled{opacity:.5;cursor:default}
.telbar-land,.telc-land{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 11px 0 14px;border-right:1px solid var(--line)}
.telbar-land select{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;cursor:pointer;font:inherit}
.telbar-land .cv{width:11px;height:11px;color:var(--faint);flex:0 0 auto}
.telbar-flag{width:20px;height:14px;overflow:hidden;display:block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(11,14,20,.1)}
.telbar-flag svg{display:block;width:20px;height:14px}
.telhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.telc-live{display:none;align-items:center;justify-content:center;gap:9px;margin-top:12px;font-size:.85rem;font-weight:600;color:var(--blue-deep)}
form[data-state=ruft] .telc-live{display:flex}
.telc-dot{width:8px;height:8px;background:var(--blue)}
.telmsg{margin-top:12px;font-size:.86rem;line-height:1.5;padding:11px 13px;background:var(--grey-2);color:var(--text);text-align:left}
.telmsg[hidden]{display:none}
.telmsg.ok{background:var(--green-tint);color:var(--green)}
.telmsg.err{background:#FBF0DE;color:#8A5A08}
.telmsg b{display:block;color:inherit;margin-bottom:2px}
.telc-note{margin-top:16px;font-size:.8rem;color:var(--soft);line-height:1.55}
.telc-note a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){.telc-pill{flex-wrap:wrap;padding:7px}.telc-land{order:1;padding:0 9px}.telc-pill input[type=tel]{order:2;flex:1 1 60%}.telc-go{order:3;flex:1 1 100%;justify-content:center;margin-top:7px;padding:14px}}

h1 em,h2 em{font-style:normal;color:var(--blue-ink)}
.claim h2 em{color:#7FA3FF}
/* ---------- Use-Case-Frage: was kann modvio in DEINEM Betrieb ---------- */
.uc-head{text-align:center;max-width:34ch;margin:0 auto}
.uc-head h2{margin-top:16px}
.uc-head .lede{margin:16px auto 0;max-width:52ch}

/* ============================ Branchen als Film-Kacheln ============================
   Anordnung nach Clay (Bento, ungleiche Kacheln), Kartenmaterial nach Webflow: der Film
   fuellt die Kachel, wird nach unten weichgezeichnet, der Text steht darauf.
   Hier standen bis 19.08.2026 rund 70 Regeln fuer einen Tab-Block (.uc-tabs/.uc-pan) —
   sechs Knoepfe, darunter ein Panel. Er zeigte immer nur EINE Branche und kostete einen
   Klick, bevor ueberhaupt etwas zu sehen war. .uc-head bleibt: daran haengt die
   Ueberschrift des Abschnitts, nicht die Tabs.
   ================================================================================= */
/* Waagerechte Reihe statt Bento (19.08.2026, Nutzerentscheid). Als Raster war der
   Abschnitt 2836 px hoch = 3,2 Bildschirme und nach den sechs Bereichen der zweitlaengste
   der Seite; als Reihe sind es rund 470 px. Alle Kacheln gleich gross: bei zwoelf
   gleichrangigen Branchen ist schwer zu begruenden, warum eine dreimal so viel Flaeche
   bekaeme. Preis der Loesung: man sieht nicht mehr alle auf einen Blick.
   ⚠️ scroll-snap NICHT auf mandatory: mit zwoelf Kacheln und Ziehen per Maus rastet das
   sonst bei jeder kleinen Bewegung ein. proximity laesst freies Ziehen zu und faengt nur
   am Ende. */
.br-reihe{display:flex;gap:clamp(10px,1.1vw,16px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding-bottom:2px;margin-top:clamp(20px,2.4vw,32px)}
/* Der eigene Balken ist WEG (20.08.2026). Er war als 6-px-Systembalken gestaltet und
   stand direkt unter den Kacheln — seit die Blaetter-Leiste darueber eine Schiene hat,
   sagte er dasselbe ein zweites Mal, nur ohne Zahl und ohne Griff. Zwei Fortschritts-
   anzeigen fuer denselben Weg sind schlechter als eine: das Auge muss entscheiden,
   welche gilt. Das Polster darunter (14 px) war nur Platz fuer ihn und faellt mit weg.
   ⚠️ Beide Zeilen noetig — `scrollbar-width` fuer Firefox, `::-webkit-scrollbar` fuer
   Chrome und Safari. Gescrollt wird dadurch nichts anders: Wischen, Ziehen, Mausrad und
   die Tab-Taste bleiben unberuehrt, und die Schiene ist selbst anfassbar. */
.br-reihe{scrollbar-width:none}
.br-reihe::-webkit-scrollbar{display:none}
.br-reihe .br-k{flex:0 0 clamp(272px,24vw,332px);aspect-ratio:3/4;scroll-snap-align:start}
/* ---- Blaetter-Leiste: Stand, Weg, Knoepfe ---------------------------------------
   Sie ist eine Zugabe fuer die Maus — Ziehen und Wischen funktionieren ohne sie.
   Ihre Aufgabe ist deshalb nicht das Blaettern allein, sondern die AUSKUNFT: dass es
   ueberhaupt weitergeht, und wie weit. Zwei nackte Pfeile konnten das nicht. */
.br-leiste{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(18px,2vw,26px)}
/* Dieselbe Sprache wie der Zaehler im Kartenstapel: Versalabstand, Ziffern auf fester
   Breite (sonst zappelt die Zahl beim Blaettern). */
.br-stand{flex:0 0 auto;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--faint)}
.br-stand b{color:var(--ink)}
.br-schiene{flex:1;height:3px;border-radius:2px;background:var(--line);position:relative;
  cursor:pointer;touch-action:none}
.br-fuell{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--blue);
  transition:width .18s ease,left .18s ease}
/* Ein Element mit Trennstrich, nicht zwei schwebende Kreise. */
.br-blaettern{flex:0 0 auto;display:flex;border:1px solid var(--line-2);border-radius:999px;
  background:#fff;overflow:hidden}
.br-blaettern button{width:46px;height:38px;border:0;background:none;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;transition:background .18s,color .18s}
.br-blaettern button+button{border-left:1px solid var(--line-2)}
.br-blaettern button:hover{background:var(--grey)}
/* Am Ende der Reihe wird der Pfeil grau, statt ins Leere zu klicken. */
.br-blaettern button:disabled{color:#C3C7CE;cursor:default;background:none}
.br-blaettern svg{width:16px;height:16px;fill:currentColor}
.br-blaettern button[data-br="-1"] svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.br-fuell{transition:none}}
.br-k{position:relative;overflow:hidden;border-radius:var(--r-l);display:flex;flex-direction:column;
  justify-content:space-between;text-decoration:none;isolation:isolate;background:var(--ink);
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.br-k:hover{transform:translateY(-4px)}
/* ⚠️ Die Textfarbe MUSS im Hover-Zustand wiederholt werden. Die Seite hat einen globalen
   a:hover-Stil, der sonst durchgreift — im Entwurf wurde beim Ueberfahren der ganze
   Kartentext blau, mitten auf dem laufenden Film. */
.br-k,.br-k:hover,.br-k:focus-visible{color:#fff}


.br-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.br-k:hover .br-v{transform:scale(1.06)}
/* Der Weichzeichner unter dem Text: das Bild bleibt oben scharf und wird nach unten weich,
   damit der Text auf einer ruhigen Flaeche steht statt auf bewegtem Bild. Die MASKE macht
   den Uebergang; ohne sie liegt eine sichtbare Kante quer ueber der Kachel.
   Gemessen (12 laufende Filme, Scrolldurchlauf): kostet 1 % Bildrate. */
.br-blur{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%)}
.br-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,18,.5) 0%,rgba(8,11,18,.1) 30%,rgba(8,11,18,.62) 72%,rgba(8,11,18,.88) 100%)}
.br-k>.br-kopf,.br-k>.br-fuss{position:relative;z-index:2}
/* Kein Zeichen mehr vor dem Namen: Kaffeebecher und Schere lasen sich als aufgeklebte
   Emojis, und das Bild der Kachel sagt die Branche ohnehin deutlicher als ein 19-px-Symbol. */
.br-kopf{display:flex;align-items:center;gap:9px;padding:clamp(16px,1.6vw,22px);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(8,11,18,.55)}
.br-fuss{display:flex;flex-direction:column;gap:7px;padding:clamp(16px,1.6vw,22px)}
.br-fuss b{font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.br-fuss small{font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.76);max-width:34ch}
@media(max-width:900px){.br-reihe .br-k{flex-basis:clamp(240px,62vw,300px)}}
@media(max-width:560px){.br-reihe .br-k{flex-basis:78vw}}
@media(prefers-reduced-motion:reduce){.br-k,.br-v{transition:none}.br-k:hover{transform:none}}


/* ---------- Einlauf: nur Fade-up ---------- */.rv-on .rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.rv-on .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on .rv{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- Kerninhalt: Baender statt Kacheln ---------- */
.bands{margin-top:clamp(30px,4vw,54px)}
.band{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(26px,3.4vw,52px);align-items:center;background:#fff;border:1px solid var(--line-2);padding:clamp(24px,3vw,42px);margin-top:clamp(16px,1.8vw,26px)}
.band:first-child{margin-top:0}
@media(max-width:940px){.band{grid-template-columns:1fr;gap:26px}}
/* Stapel: gleicher Haltepunkt, jede Karte deckt die vorige zu. */
@media(min-width:1000px) and (min-height:700px){
  .band{position:sticky;top:calc(var(--nav-h) + 16px);box-shadow:0 -18px 36px -26px rgba(11,18,32,.22)}
}
.band.nopin{position:static;box-shadow:none}
.bands{padding-bottom:clamp(8px,1vw,16px)}
.b-ix{display:flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.b-ix b{color:var(--blue-ink);font-weight:700}
.b-ix s{flex:1;height:1px;background:var(--line-2);text-decoration:none;max-width:70px}
.band h3{font-size:clamp(1.85rem,3.1vw,2.85rem);line-height:1.05;letter-spacing:-.035em;margin-top:16px;max-width:22ch}
.band .bp{font-size:1.04rem;color:var(--text);line-height:1.6;margin-top:18px;max-width:44ch}
.band ul{margin-top:clamp(20px,2.4vw,30px);max-width:44ch}
.band li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;padding:13px 0;border-top:1px solid var(--line)}
.band li i{width:9px;height:9px;background:var(--blue);flex:0 0 auto;margin-top:6px}
/* Mate-Prinzip: das weisse Produkt-Panel liegt auf einer blauen Matte. Die Matte ist
   ein ausgedehnter Schatten — kein zusaetzliches Element, keine Markup-Aenderung. */
.b-vis{border:1px solid var(--line-2);background:#fff;padding:clamp(15px,1.7vw,21px);box-shadow:0 0 0 clamp(11px,1.3vw,18px) #E7EEFF,0 1px 0 rgba(11,18,32,.04),0 26px 50px -32px rgba(11,18,32,.3)}
@media(max-width:940px){.b-vis{box-shadow:0 0 0 9px #E7EEFF,0 20px 44px -30px rgba(11,18,32,.3)}}
.b-cap{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;display:flex;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.b-note{margin-top:15px;background:rgba(31,95,255,.06);border:1px solid rgba(31,95,255,.2);padding:12px 14px;font-size:.86rem;font-weight:600;color:var(--blue-ink);display:flex;gap:10px;align-items:center}
.b-note i{width:9px;height:9px;background:var(--blue);flex:0 0 auto}
.cl>div{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.cl>div:last-child{border-bottom:0}
.cl i{width:9px;height:9px;background:var(--blue);flex:0 0 auto;margin-top:5px}
.cl i.off{background:var(--line-2)}
.cl b{font-size:.9rem;display:block}
.cl p{font-size:.86rem;color:var(--text);line-height:1.5;margin-top:4px}
.cl .t{margin-left:auto;font-size:.78rem;color:var(--faint);white-space:nowrap}
.iv-r,.iv-t{display:flex;justify-content:space-between;gap:20px;font-size:.9rem;padding:13px 0;border-bottom:1px solid var(--line)}
.iv-r span:last-child,.iv-t span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)}
.iv-t{font-weight:700;border-bottom:0;font-size:1rem}
.tl>div{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.tl>div:last-child{border-bottom:0}
.tl .n{width:23px;height:23px;border:1px solid var(--blue);color:var(--blue-ink);font-size:.7rem;font-weight:700;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.tl b{font-size:.92rem;display:block}
.tl p{font-size:.85rem;color:var(--text);line-height:1.5;margin-top:3px}
.tl .w{margin-left:auto;font-size:.78rem;color:var(--faint);white-space:nowrap}


/* ============================================================
   ABSCHLUSS + FUSS
   Die Klammer der Seite. Reihenfolge ist Absicht: Handlung (Blau,
   volle Flaeche) -> Entdecken (Bilder) -> Struktur (Weiss) ->
   Vertrauen -> Recht. Kantig wie der Rest, kein Radius auf Flaechen.
   ============================================================ */
.close{background:linear-gradient(180deg,#2555DC,#1B47C6);color:#fff;padding:clamp(60px,7vw,100px) 0;position:relative;overflow:hidden}
.close::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.10) 1px,transparent 1px);background-size:var(--grid) var(--grid);pointer-events:none}
.close::after{content:"";position:absolute;right:-40px;bottom:-70px;width:300px;height:300px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;pointer-events:none;opacity:.13;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 300 300%27%3E%3Crect width=%27142%27 height=%27142%27 rx=%2743%27 fill=%27%23fff%27/%3E%3Crect x=%27158%27 width=%27142%27 height=%27142%27 rx=%2743%27 fill=%27%23fff%27/%3E%3Crect y=%27158%27 width=%27142%27 height=%27142%27 rx=%2743%27 fill=%27%23fff%27/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* Mittig wie alle anderen Koepfe: eine Achse, Aktion darunter. */
.close-in{width:var(--mx);margin:0 auto;position:relative;display:grid;gap:clamp(26px,3vw,40px);justify-items:center;text-align:center}
.close-in>div{max-width:100%}
/* Voller Farbwert statt `rgba(255,255,255,.72)`: pixelgemessen kam die Augenbraue auf
   4,04:1 gegen den blauen Verlauf, noetig sind 4,5:1 fuer 12-px-Text. Gedimmt wird hier
   ausserdem grundsaetzlich nicht ueber Alpha — ein fester heller Ton ist berechenbar,
   ein Alphawert haengt am Verlauf darunter und wandert mit ihm. */
.close-k{display:flex;justify-content:center;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#DCE6FF}
.close-k s{flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:#fff}
.close h2{margin:16px auto 0;max-width:20ch;font-size:clamp(2.05rem,4.1vw,3.4rem);line-height:1.05;letter-spacing:-.028em;font-weight:700;text-wrap:balance}
.close h2 em{font-style:normal;color:rgba(255,255,255,.68)}
.close .cp{margin:18px auto 0;font-size:clamp(1rem,1.15vw,1.11rem);line-height:1.6;color:rgba(255,255,255,.87);max-width:46ch}
/* ⚠️ Gemessen 20.08.2026: 12 px Luecke zwischen zwei 54 px hohen Knoepfen und 6 px bis
   zur Fussnote — das stand sichtbar gequetscht (Kundenmeldung mit Screenshot). Ein Knopf
   braucht Luft im Verhaeltnis zu seiner eigenen Hoehe, nicht eine feste Kleinstzahl. */
.close-act{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:none;margin-top:clamp(26px,3vw,34px)}
.close-act .close-note{flex:1 0 100%;text-align:center;margin-top:20px}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 26px;border-radius:var(--r-btn);font-weight:700;font-size:1rem;text-decoration:none;transition:transform .16s,background .16s,box-shadow .16s}
.cbtn svg{width:19px;height:19px;flex:none}
.cbtn-w{background:#fff;color:var(--blue-deep);box-shadow:0 10px 26px -14px rgba(6,20,60,.5)}
.cbtn-w:hover{transform:translateY(-1px);background:#fff}
.cbtn-g{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.42)}
.cbtn-g:hover{background:rgba(255,255,255,.14)}
.close-note{margin-top:4px;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.86)}
.close-note i{display:inline-block;width:7px;height:7px;background:rgba(255,255,255,.6);margin-right:9px;vertical-align:2px}

/* Bilderstreifen: die Branchen als echtes Bild, nicht als Liste. */
.fstrip{display:grid;grid-template-columns:repeat(6,1fr);background:var(--ink)}
.fstrip a{position:relative;display:block;height:clamp(146px,14vw,196px);overflow:hidden;text-decoration:none}
.fstrip img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.5) contrast(1.04);transform:scale(1.02);transition:filter .3s,transform .5s}
.fstrip a:hover img{filter:none;transform:scale(1.06)}
.fstrip a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,20,.86) 0%,rgba(6,10,20,.18) 52%,transparent 78%)}
.fstrip b{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;font-size:.9rem;font-weight:600;line-height:1.25}
.fstrip a+a{box-shadow:-1px 0 0 rgba(255,255,255,.14)}
@media(max-width:1000px){.fstrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.fstrip{grid-template-columns:repeat(2,1fr)}}

/* Struktur */
.mf{background:var(--card);padding:clamp(48px,5.6vw,76px) 0 0}
.mf-in{width:var(--mx);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:clamp(22px,2.8vw,44px)}
@media(max-width:1000px){.mf-in{grid-template-columns:1fr 1fr;gap:34px}}
.mf-brand{max-width:34ch}
.mf-mark{display:inline-flex;align-items:center;gap:10px;font-size:1.34rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.mf-mk{width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.mf-mk i{background:var(--ink);border-radius:30%}
.mf-mk i:last-child{background:var(--blue)}
.mf-claim{margin-top:14px;font-size:.94rem;line-height:1.62;color:var(--text)}
.mf-claim b{color:var(--ink-2);font-weight:600}
.mf-soc{margin-top:20px;display:flex;gap:8px}
.mf-soc a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-btn);color:var(--ink-2);transition:border-color .16s,color .16s,background .16s}
.mf-soc a:hover{border-color:var(--blue-ink);color:var(--blue-ink);background:var(--blue-tint)}
.mf-soc svg{width:18px;height:18px}
.mf-col h4{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0}
/* Die vier Spalten sind <details>: breit stehen sie offen und sehen aus wie vorher,
   schmal klappen sie zu. Ohne das stapelten sie untereinander und der Fuss war
   1475 px = 1,7 Bildschirme — der zweitgroesste Block der ganzen Seite. */
.mf-col>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;cursor:default}
.mf-col>summary::-webkit-details-marker{display:none}
.mf-col>summary::marker{content:""}
.mf-chev{display:none;flex:0 0 auto;width:18px;height:18px;color:var(--faint);transition:transform .22s ease}
.mf-col nav{margin-top:14px;display:grid;gap:11px}
.mf-col a{font-size:.94rem;color:var(--text);text-decoration:none;width:fit-content;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
/* „modvio Docs“ im Fuss: die Marke bleibt Fliesstext, das Wort Docs ist eine handschriftliche
   Auszeichnung im Markenblau — wie eine Randnotiz. Der Grad steht auf 1.24em, weil Caveat eine
   kleine x-Hoehe hat und sonst neben der Grotesk zu zierlich wirkt; die leichte Drehung nimmt
   dem Wort das Gesetzte. Beides bewusst SPARSAM: eine zweite Schrift traegt genau eine Stelle. */
.mf-docs{font-family:"Caveat",ui-rounded,cursive;font-weight:600;font-size:1.24em;line-height:1;
  color:var(--indigo);margin-left:.06em;display:inline-block;transform:rotate(-3deg) translateY(-.02em)}
.mf-col a:hover .mf-docs{color:var(--blue-deep)}
.mf-col a:hover{color:var(--ink);border-color:var(--line-2)}

.mf-in{padding-bottom:clamp(34px,4vw,56px)}
/* Schlusszeile: keine graue Bank, nur eine Haarlinie. Drei Register in einer Reihe. */
.mf-bot{margin-top:0;border-top:1px solid var(--line)}
.mf-bot>div{width:var(--mx);margin:0 auto;padding:clamp(22px,2.4vw,30px) 0;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;font-size:.83rem;color:var(--faint)}
.mf-cr b{font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-right:9px}
.mf-geo{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.mf-geo i{width:6px;height:6px;background:var(--blue);flex:0 0 auto}
.mf-bot .mf-legal{display:flex;gap:clamp(14px,1.5vw,24px);flex-wrap:wrap;margin-left:auto}
.mf-bot a{color:var(--faint);text-decoration:none;transition:color .16s}

/* ---- Fuss auf dem Handy ------------------------------------------------------
   ⚠️ Dieser Block muss NACH allen `.mf-*`-Grundregeln stehen. Er stand zuerst davor
   und wurde still ueberstimmt: gleiche Spezifitaet, spaetere Regel gewinnt — der
   Pfeil blieb auf `display:none`, die Verweise auf `width:fit-content` (22 px hohe
   Ziele) und die Griffzeile auf `cursor:default`. Die Abfrage GRIFF, sie verlor nur
   die Kaskade; im Screenshot sah der Fuss trotzdem richtig aus, weil das Zuklappen
   am JS haengt und nicht an der CSS. Reihenfolge ist hier die halbe Regel. */
@media(max-width:640px){
  .mf-in{grid-template-columns:1fr;gap:0}
  .mf-brand{max-width:none;padding-bottom:20px}
  .mf-col{border-top:1px solid var(--line)}
  .mf-col>summary{min-height:48px;padding:13px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mf-col>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .mf-chev{display:block}
  .mf-col[open] .mf-chev{transform:rotate(180deg)}
  .mf-col nav{margin-top:0;padding-bottom:12px;gap:0}
  /* Aufgeklappt sind die Verweise volle 44-px-Zeilen statt 22-px-Textzeilen.
     Zugeklappt kostet das nichts, offen halbiert es die zu kleinen Ziele. */
  .mf-col a{width:auto;min-height:44px;display:flex;align-items:center}
  /* ---- Schlusszeile: luftig statt gequetscht ----
     Kundeneinwand 19.08.2026 am iPhone: „Ein Produkt von und so ist ein bisschen
     gequetscht". Gemessen war es eine Zeile zu breit — Wortmarke (17 + 60 px) plus
     „© 2026 · Ein Produkt von" (155) plus „BARZIK STUDIO" (105) plus zwei Abstaende
     ergaben 355 px auf 351 px Flaeche. Vier Pixel, drei Zeilenumbrueche.
     Die Wortmarke faellt hier weg: sie steht im selben Fuss drei Zeilen weiter oben
     schon einmal in gross. Damit passt der Rest auf eine Zeile. */
  .mf-cr{gap:6px}
  /* Zierde ohne Aussage — im knappen Fuss der erste Kandidat. */
  .mf-geo,.mf-lang{display:none}
  .mf-bot>div{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 0 26px}
  .mf-bot .mf-legal{margin-left:0;gap:18px}
  .mf-bot .mf-legal a{min-height:34px;display:flex;align-items:center}
  /* Mehr Luft um die Bloecke: der Fuss war der dichteste Teil der Seite. */
  .mf{padding-top:34px}
  .mf-claim{margin-top:12px;font-size:.92rem;line-height:1.55}
  .mf-soc{margin-top:18px;gap:10px}
}
.mf-bot a:hover{color:var(--blue-ink)}
@media(max-width:820px){.mf-bot>div{flex-direction:column;align-items:flex-start;gap:14px}.mf-bot .mf-legal{margin-left:0}}

/* ============================================================
   STUFEN · ANSCHLUSS · VERGLEICH · FRAGEN
   Muster von sondero.ai uebernommen: Umfang in drei Stufen statt Preisliste,
   Anschluss statt Umzug, Vergleich als Tabelle mit Merkmalzeilen, Fragen offen.
   ============================================================ */
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(30px,4vw,50px);border:1px solid var(--line-2);background:#fff}
@media(max-width:940px){.st-grid{grid-template-columns:1fr}}
.stp{padding:clamp(24px,2.6vw,36px);border-left:1px solid var(--line-2);display:flex;flex-direction:column;min-width:0}
.stp:first-child{border-left:0}
@media(max-width:940px){.stp{border-left:0;border-top:1px solid var(--line-2)}.stp:first-child{border-top:0}}
.stp.mid{background:#F7F9FF}
.st-n{display:flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.st-n b{color:var(--blue-ink);font-size:.86rem;letter-spacing:.06em}
.st-n s{flex:1;height:1px;background:var(--line-2);text-decoration:none}
.stp h3{font-size:clamp(1.32rem,1.8vw,1.62rem);letter-spacing:-.02em;line-height:1.16;margin-top:16px}
.stp p.sp{margin-top:12px;color:var(--soft);font-size:.95rem;line-height:1.55}
.stp dl{margin-top:auto;padding-top:20px}
.stp dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:700;padding-top:14px;border-top:1px solid var(--line);margin-top:14px}
.stp dl>dt:first-child{margin-top:0}
.stp dd{font-size:.92rem;margin-top:6px;line-height:1.5}
.st-foot{margin-top:clamp(20px,2.2vw,28px);display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--soft);max-width:74ch}
.st-foot i{width:9px;height:9px;background:var(--blue);flex:0 0 auto;margin-top:7px}
.st-foot b{color:var(--ink);font-weight:600}

/* Logo-Laufband: zwei Reihen, langsamer Gegenlauf per Skript (kein doppelter
   Inhalt — jede Kachel traegt eine eigene Ablage-Kennung). */
.lg{margin-top:clamp(26px,3vw,38px);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lg-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:1px}
.lg-row::-webkit-scrollbar{display:none}
.lg-row+.lg-row{margin-top:10px}
.lg-i{flex:0 0 auto;width:170px;border:1px solid var(--line-2);background:#fff;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;transition:border-color .16s,box-shadow .16s}
.lg-i:hover{border-color:rgba(31,95,255,.34);box-shadow:0 6px 20px -14px rgba(11,18,32,.4)}
.lg-i image-slot{width:100%;height:38px;display:block}
.lg-i b{font-size:.84rem;font-weight:600;letter-spacing:-.008em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-i em{font-style:normal;font-size:.74rem;color:var(--faint);font-weight:500;display:block;margin-top:2px}
.lg-i.open{border-color:rgba(31,95,255,.32);background:#F5F8FF;justify-content:center;align-items:flex-start;gap:6px}
.lg-i.open b{color:var(--blue-ink);white-space:normal}
.lg-i.open s{width:9px;height:9px;background:var(--blue);text-decoration:none;display:block}
/* Der Block steht MITTIG, der Text darin bleibt linksbuendig. Ueberschrift und
   Vorspann des Abschnitts sind zentriert; die Notiz klebte darunter am linken
   Rand und sah aus, als gehoere sie nicht dazu (Kundenbefund 20.08.2026).
   Den Text mitzuzentrieren waere falsch: die Marke davor wuerde vor der ersten
   Zeile haengen, und zentrierter Mehrzeiler liest sich schlechter. */
.keeps-note{display:flex;gap:14px;align-items:flex-start;margin:clamp(20px,2.2vw,28px) auto 0;font-size:.95rem;color:var(--soft);max-width:74ch}
.keeps-note i{width:9px;height:9px;background:var(--blue);flex:0 0 auto;margin-top:7px}
.keeps-note b{color:var(--ink);font-weight:600}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,34px);margin-top:clamp(34px,4vw,54px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
@media(max-width:940px){.tri{grid-template-columns:1fr;gap:26px}}
.tri h4{font-size:clamp(1.06rem,1.35vw,1.2rem);letter-spacing:-.018em;line-height:1.24}
.tri h4 em{font-style:normal;color:var(--faint)}
.tri p{margin-top:10px;font-size:.93rem;color:var(--soft);line-height:1.6}

.vt{margin-top:clamp(30px,4vw,50px);border:1px solid var(--line-2);background:#fff;overflow-x:auto}
.vt table{width:100%;border-collapse:collapse;min-width:720px}
.vt th,.vt td{text-align:left;padding:clamp(14px,1.5vw,19px) clamp(14px,1.6vw,22px);border-top:1px solid var(--line);vertical-align:top;font-size:.93rem;line-height:1.5}
.vt thead th{border-top:0;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:700}
.vt tbody th{font-weight:600;color:var(--ink);width:23%}
.vt .me{background:#F7F9FF;border-left:1px solid rgba(31,95,255,.22);border-right:1px solid rgba(31,95,255,.22)}
.vt thead .me{color:var(--blue-ink);font-size:.92rem;letter-spacing:-.01em;text-transform:none;font-weight:700;border-top:2px solid var(--blue)}
.vt .me b{font-weight:600}
.vt td{color:var(--soft)}
.vt .me{color:var(--ink)}

.faq{position:relative;margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line-2);background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:baseline;padding:clamp(19px,2.1vw,26px) 0;font-size:clamp(1.02rem,1.3vw,1.16rem);font-weight:600;letter-spacing:-.018em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--blue-ink);font-weight:400;font-size:1.4rem;line-height:1;transition:transform .18s}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--blue-ink)}
.faq .a{padding:0 0 clamp(20px,2.2vw,26px) 36px;max-width:76ch;color:var(--soft);font-size:.97rem;line-height:1.68}
.faq .a b{color:var(--ink);font-weight:600}
.faq-side{margin-top:clamp(26px,3vw,38px);display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.95rem;color:var(--soft)}


/* ---------- Schichten: warum Maßarbeit hier bezahlbar ist (dunkler Block) ---------- */
.lay{margin-top:clamp(44px,5vw,72px);border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(26px,3vw,38px)}
.lay-h{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#8A93A6}
.lay-r{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(14px,2.4vw,38px);align-items:baseline;padding:clamp(16px,1.9vw,23px) 0;border-bottom:1px solid rgba(255,255,255,.12)}
.lay-r:first-of-type{border-top:1px solid rgba(255,255,255,.12);margin-top:18px}
@media(max-width:700px){.lay-r{grid-template-columns:1fr;gap:8px}}
.lay-t{font-size:1.04rem;font-weight:700;letter-spacing:-.015em;color:#fff}
.lay-b b{display:block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8A93A6}
.lay-b em{font-style:normal;display:block;font-size:.96rem;color:#C3C9D4;line-height:1.58;text-wrap:pretty}
.lay-p{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8A93A6;white-space:nowrap}
.lay-r.own .lay-t{color:#9DB8FF}
.lay-r.own .lay-b b{color:#7FA3FF}
.lay-r.own .lay-b em{color:#E6EAF2}
.lay-r.own .lay-p{color:#7FA3FF}
.lay-f{margin-top:clamp(22px,2.4vw,30px);font-size:1.02rem;line-height:1.62;color:#C3C9D4;max-width:70ch}

/* Schnittstellen-Canvas: bestehende Systeme laufen sichtbar durch modvio. */
.connect-stage{position:relative;margin-top:clamp(34px,4vw,54px);overflow:hidden;border-radius:clamp(24px,3vw,38px);
  background:linear-gradient(145deg,#F5F8FF 0%,#EDF3FF 58%,#F8FAFF 100%);border:1px solid #D5E1FF;
  box-shadow:0 30px 70px -54px rgba(47,107,255,.58),inset 0 1px 0 rgba(255,255,255,.9)}
.connect-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.58;
  background-image:radial-gradient(rgba(47,107,255,.17) 1px,transparent 1px);background-size:20px 20px;
  mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000)}
.connect-top,.connect-foot{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(18px,2.2vw,26px) clamp(20px,3vw,38px);font-size:clamp(.72rem,.9vw,.82rem);font-weight:680;color:#75849A}
.connect-top{border-bottom:1px solid rgba(47,107,255,.12)}
.connect-top span:first-child{display:inline-flex;align-items:center;gap:9px;color:var(--blue-deep)}
.connect-top i{width:8px;aspect-ratio:1;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(47,107,255,.1)}
.connect-top span:last-child{letter-spacing:.09em;text-transform:uppercase;font-size:.68rem}
.connect-foot{justify-content:center;padding-top:14px;border-top:1px solid rgba(47,107,255,.12)}
/* „Was schon da ist" stand in --soft (#5C6371) auf der hellblauen Buehne und kam
   pixelgemessen auf 3,39:1 — zu wenig fuer 12-px-Text (4,5:1). --ink-2 loest das,
   ohne die Hierarchie umzuwerfen: der Zielbegriff rechts bleibt der blaue `strong`. */
.connect-foot span{color:var(--ink-2)}
.connect-foot svg{width:17px;height:17px;color:var(--blue)}.connect-foot strong{color:var(--blue-deep);font-weight:720}
.orb{position:relative;overflow:hidden;padding:clamp(42px,5vw,68px) 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.orb::before{content:"";position:absolute;left:5%;right:5%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#B8C9EC 18%,#B8C9EC 82%,transparent)}
.orb-run{display:flex;width:max-content;animation:orbrun 58s linear infinite alternate}
.orb>.orb-run:not(.orb-run-new){display:none}
.orb:hover .orb-run,.orb:focus-within .orb-run{animation-play-state:paused}
@keyframes orbrun{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 100% - 2px))}}
.orb-set{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(13px,1.5vw,20px);padding:0 clamp(18px,2vw,28px)}
.orb-i{flex:0 0 auto;width:clamp(84px,7.4vw,102px);height:clamp(78px,6.8vw,94px);border-radius:clamp(17px,1.7vw,22px);
  background:rgba(255,255,255,.94);border:1px solid rgba(28,49,82,.13);display:grid;place-items:center;padding:clamp(13px,1.2vw,17px);
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 14px 28px -22px rgba(11,18,32,.42),inset 0 1px 0 #fff;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.orb-b{width:100%;height:100%;max-height:32px;color:#35445A;opacity:.88}
.orb-i.has-label{grid-template-rows:minmax(0,1fr) auto;gap:7px}.orb-i.has-label .orb-b{max-height:28px}
.orb-label{font-size:.62rem;line-height:1;font-weight:720;color:#56657A;white-space:nowrap}
.orb-color{opacity:1}.orb-excel{color:#107C41}.orb-line{color:#2F6BFF}
.orb-w{font-size:.76rem;font-weight:700;letter-spacing:-.028em;line-height:1.18;text-align:center;color:var(--ink-2);text-wrap:balance;overflow-wrap:anywhere;hyphens:manual}
.orb-i:hover .orb-b{opacity:1}
.orb-i:hover{transform:translateY(-5px);border-color:#9EB7F2;box-shadow:0 18px 34px -24px rgba(47,107,255,.52)}
.orb-i.open{width:clamp(150px,13vw,178px);grid-template-columns:auto 1fr;gap:11px;padding-inline:16px;background:rgba(255,255,255,.64);
  border:1px dashed #8DAAFF;color:var(--blue-deep);place-items:center start}
.open-plus{width:34px;aspect-ratio:1;border-radius:11px;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:1.45rem;font-weight:450;box-shadow:0 10px 20px -12px rgba(47,107,255,.8)}
.open-copy{display:flex;flex-direction:column;gap:3px}.open-copy b{font-size:.78rem;line-height:1.05;text-align:left}.open-copy small{font-size:.64rem;color:#6A7890;white-space:nowrap}
.orb-mark{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(112px,10vw,132px);height:clamp(112px,10vw,132px);
  background:linear-gradient(145deg,#5688FF 0%,var(--blue) 50%,var(--blue-deep) 100%);border-radius:30%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.36);box-shadow:0 0 0 clamp(14px,1.5vw,20px) rgba(240,245,255,.94),0 0 74px 28px rgba(240,245,255,.92),0 24px 52px -18px rgba(47,107,255,.68);pointer-events:none}
.orb-mark::before{content:"";position:absolute;inset:-72%;background:radial-gradient(circle,rgba(47,107,255,.3),transparent 65%);z-index:-1}
/* Ohne die Wortmarke darunter traegt das Zeichen die Flaeche allein und darf groesser
   stehen — bei 46 % blieb ringsum zu viel leeres Blau. */
.orb-mk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(5px,.6vw,8px);width:54%}
.orb-mk i{aspect-ratio:1;background:#fff;border-radius:30%}
.orb-mk i:nth-child(4){background:rgba(255,255,255,.42)}

/* ---- Schnittstellen-Band auf dem Handy ---------------------------------------
   Das Mal in der Mitte ist fest 112–132 px breit. Auf 1440 px sind das 8 % der
   Buehne, auf 390 px sind es 29 % — es deckte die halbe Laufreihe zu, und links
   und rechts blieb je ein angeschnittenes Logo stehen (gemessen: SumUp halb,
   WhatsApp halb, Lexware verdeckt). Nicht die Reihe ist falsch, sondern das
   Groessenverhaeltnis: Kacheln UND Mal schrumpfen mit, die Blende gibt an den
   Raendern mehr frei. */
@media(prefers-reduced-motion:reduce){.orb-run{animation:none}}
/* Handy: Mal UND Kacheln kleiner, Blende offener, Ring deckend.
   Vorher (104 px Mal, 82 px Kacheln) deckte das Mal 27 % der Buehnenbreite — links
   und rechts stand je eine halbe Kachel, und der 11-px-Ring liess die verdeckten
   Nachbarn als weisse Rechteckreste durchschimmern (gemessen: SumUp halb, WhatsApp
   halb, Lexware verdeckt). Jetzt 74/66 px: mehr ganze Logos im Bild, und der feste
   24-px-Ring schneidet sauber ab, statt anzuschneiden. */
@media(max-width:640px){
  .connect-stage{margin-inline:-8px;border-radius:24px}
  .connect-top span:last-child{display:none}
  .connect-foot{font-size:.78rem;gap:9px}
  .orb{padding:30px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .orb-set{gap:9px;padding:0 12px}
  .orb-i{width:66px;height:62px;border-radius:14px}
  .orb-i.open{width:112px;padding-inline:11px;gap:8px}
  .orb-b{max-height:23px}
  .orb-w{font-size:.6rem}
  .orb-i.has-label .orb-b{max-height:20px}
  .orb-label{font-size:.55rem}
  .orb-mark{width:74px;height:74px;
    box-shadow:0 0 0 24px rgba(241,245,255,.99),0 0 56px 26px rgba(241,245,255,.99),
      0 18px 40px -16px rgba(47,107,255,.62)}
}

/* Ausklapper: fuenf Titel links, ein Fenster rechts. */
.acc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(26px,3.6vw,58px);align-items:stretch;margin-top:clamp(26px,3.2vw,44px)}
@media(max-width:940px){.acc{grid-template-columns:1fr;gap:26px}}
.acc-l{display:flex;flex-direction:column}
.acc-t{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid var(--line-2);padding:clamp(15px,1.7vw,21px) 0 clamp(15px,1.7vw,21px) clamp(16px,1.7vw,24px);cursor:pointer;font:inherit;color:var(--ink);transition:border-color .24s ease}
.acc-t.on{border-left-color:var(--blue-ink)}
.acc-t:hover .acc-h{color:var(--blue-ink)}
.acc-h{display:block;font-size:clamp(1.06rem,1.55vw,1.34rem);font-weight:700;letter-spacing:-.022em;line-height:1.24;text-wrap:pretty;transition:color .2s ease}
.acc-h s{display:block;text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.13em;color:var(--faint);margin-bottom:7px}
.acc-t.on .acc-h s{color:var(--blue-ink)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0}
.acc-b>span{overflow:hidden;display:block}
.acc-t.on .acc-b{grid-template-rows:1fr;opacity:1}
.acc-p2{display:block;margin-top:11px;font-size:.98rem;line-height:1.6;color:var(--soft);text-wrap:pretty}
.acc-b ul{list-style:none;margin:14px 0 4px;padding:0;display:flex;flex-direction:column;gap:9px}
.acc-b li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;font-size:.94rem;line-height:1.5;color:var(--ink)}
.acc-b li i{width:7px;height:7px;background:var(--blue);margin-top:7px}
.acc-r{position:relative;min-height:clamp(360px,34vw,470px);display:flex;flex-direction:column}
.acc-p{display:none}
.acc-p.on{display:flex;flex:1;flex-direction:column;animation:accIn .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes accIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.acc-k{margin:12px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.13em;color:var(--faint);text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.acc-p.on{animation:none}.acc-b{transition:none}}

/* Hero mittig, MINDESTENS auf Bildschirmhoehe. Text skaliert mit Breite UND Hoehe.
   ⚠️ Bis 19.08.2026 stand hier `height` statt `min-height`, und darunter hing ein
   nachgebautes, flaches Produktfenster. Mit dem echten Panel-Screenshot war das eine
   Falle: gemessen kamen vom Bild nur 15 % an (1440x900), auf einem 1280x800-Laptop
   9 % — sichtbar war die Kopfzeile, sonst nichts. Kennzahlen, Jahresverlauf, die
   anstehenden Zahlungen und die Modulliste, also der ganze Beweis, lagen unter der
   Kante. `min-height` laesst den Hero mit dem Bild wachsen; bei kurzem Inhalt steht
   er weiter bildschirmfuellend. */
.hero{position:relative;overflow:hidden}
.hero-in{min-height:calc(100svh - var(--nav-h) - 44px);display:grid;grid-template-rows:auto auto;padding-top:clamp(20px,4.4vh,58px);padding-bottom:clamp(28px,4vh,56px)}
.hero-c{width:min(900px,100%);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.5vh,20px);padding-bottom:clamp(20px,3.6vh,46px)}
.hpill{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 17px 8px 13px;background:#fff;border:1px solid var(--line-2);border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);position:relative}
.hpill::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:1;
  padding:2px;
  border-radius:inherit;
  pointer-events:none;
  background:conic-gradient(from var(--hpill-turn),transparent 0 252deg,rgba(47,107,255,.16) 282deg,var(--blue) 330deg,transparent 358deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:hpillOrbit 4s linear 1.2s infinite;
}
@property --hpill-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes hpillOrbit{to{--hpill-turn:360deg}}
.hpm{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:15px}
.hpm i{aspect-ratio:1;background:var(--ink);border-radius:30%}
.hpm i.hl{background:var(--blue)}
.hero h1{margin:0;font-size:clamp(2.25rem,min(7vw,8.4vh),5.1rem);line-height:1.02;letter-spacing:-.042em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--blue-ink)}
.hero .lede{max-width:56ch;margin:0;font-size:clamp(1rem,min(1.45vw,2.1vh),1.22rem);line-height:1.5}
.hero .row{justify-content:center;margin:clamp(4px,1vh,10px) 0 0}
.hero .note,.hero .mini{justify-content:center}
.hero .mini{margin-top:clamp(4px,1.2vh,14px)}
.hero .shot{width:min(1180px,100%);margin:0 auto;position:relative}
/* Der Ausblend-Verlauf am unteren Rand ist mit der Hoehenfixierung entfallen: er hat den
   Anschnitt kaschiert, und angeschnitten wird hier nichts mehr. */
.hscroll{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;align-items:center;gap:8px;margin:0;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);z-index:2}
.hscroll span{width:1px;height:22px;background:linear-gradient(180deg,var(--line-2),var(--blue))}

/* Attio-Prinzip, in modvio-Mitteln: dieselbe Buehne steht sofort, ihre Inhalte
   schaerfen sich in kurzen 100-ms-Stufen. Kein Loader und kein Layout-Sprung. */
@keyframes heroBuild{from{opacity:0;filter:blur(1.5px)}to{opacity:1;filter:blur(0)}}
@keyframes heroCanvas{from{opacity:0;filter:blur(3px);transform:translateY(18px)}to{opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:no-preference){
  .hero .hpill{animation:heroBuild .6s cubic-bezier(0,0,.58,1) 0s both}
  .hero h1{animation:heroBuild .6s cubic-bezier(0,0,.58,1) .1s both}
  .hero .lede{animation:heroBuild .6s cubic-bezier(0,0,.58,1) .2s both}
  .hero .row{animation:heroBuild .6s cubic-bezier(0,0,.58,1) .3s both}
  .hero .hclaims{animation:heroBuild .6s cubic-bezier(0,0,.58,1) .4s both}
  .hero .note{animation:heroBuild .6s cubic-bezier(0,0,.58,1) .5s both}
  .hero .mini{animation:heroBuild .6s cubic-bezier(0,0,.58,1) .6s both}
  .hero .shot{animation:heroCanvas .9s cubic-bezier(0,0,.58,1) .45s both}
}
@media(prefers-reduced-motion:reduce){.hpill::after{animation:none;background:var(--blue);opacity:.45}}
@media(max-width:940px){.hero-in{min-height:0;padding-bottom:clamp(26px,4vh,44px)}}
@media(max-height:600px){.hero-in{min-height:0}}

/* ============================================================================
   HANDY · der erste Bildschirm
   Grundlage ist MOBIL.md: gemessen an sevDesk, Qonto, Stripe, Clay und Personio.
   Was die alle im ersten Bildschirm haben und wir nicht hatten:
     1. einen Knopf in der Kopfzeile   (bei uns ausgeblendet — jetzt zurueck)
     2. ein Vertrauenssignal ueber der Kante (unser „Laeuft bei" lag darunter)
     3. EINEN dominanten Handlungsweg  (wir hatten drei gleich grosse)
     4. das Produkt sichtbar           (unser Bild begann erst weit darunter)
   Gedreht wird nur die REIHENFOLGE (`.hero-c` ist schon eine Flex-Spalte, also
   traegt `order` das ohne Eingriff in den Quelltext und ohne Folgen fuer Desktop).
   Weg faellt hier nichts, was es nicht anderswo vollstaendig gibt — vermerkt.
   ========================================================================== */
@media(max-width:640px){
  /* Die Pill sagt „Software-Werkstatt fuer den Mittelstand" — dasselbe tragen H1 und
     Vorspann eine Zeile weiter. Auf 390 px kostet sie zwei Zeilen fuer nichts. */
  .hero .hpill{display:none}

  .hero h1{font-size:clamp(2.1rem,9.2vw,2.7rem);line-height:1.06;letter-spacing:-.038em}
  .hero .lede{font-size:1rem;line-height:1.48;max-width:36ch}

  /* Vertrauen VOR die Aktion. Die Trennlinie der Zeile arbeitet hier als Absatz
     zwischen Versprechen und Beweis, nicht mehr als Fussleiste des Heros. */
  .hero .mini{order:3;margin-top:4px;padding-top:15px;gap:7px 11px}
  .hero .mini .l{width:100%}
  .hero .mini b{font-size:.84rem;gap:6px;letter-spacing:-.02em}
  .hero .mini .mini-l{width:15px;height:15px}
  .hero .mini .sep{display:none}

  /* ⚠️ `flex-wrap:nowrap` ist hier PFLICHT, nicht Kosmetik: die Reihe erbt `wrap` aus dem
     Zeilen-Layout, und in einer SPALTE umbricht `wrap` seitwaerts in eine zweite Spalte.
     Gemessen: „Erstgespraech" landete bei x=380 (ausserhalb der 390 px breiten Flaeche)
     und beide Knoepfe dehnten sich auf 122 px Hoehe. */
  .hero .row{order:4;flex-direction:column;flex-wrap:nowrap;align-items:stretch;width:100%;gap:9px}
  /* Der gruene Punkt ist ein Flex-Geschwister des Textes. Bricht der Text schmal auf
     zwei Zeilen um, steht der Punkt an der linken Kante des BREITESTEN Umbruchs und
     wirkt losgeloest neben der zweiten, kuerzeren Zeile. Schmal traegt der Satz allein. */
  .hero .note{order:5;margin-top:2px}
  .hero .note i{display:none}
  /* Das Panel vor die Nutzenliste. Sonst begaenne das Bild erst bei 808 px, also
     ausserhalb des ersten Bildschirms — sevDesk und Qonto zeigen das Produkt beide
     VOR den Nutzen-Stichpunkten. `.hclaims` steckt im Textblock, `.shot` daneben;
     `display:contents` loest den Textblock als Kasten auf, damit beide Geschwister
     werden und `order` ueber die Grenze hinweg greift. Nur hier, nur schmal. */
  .hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:clamp(10px,1.5vh,18px)}
  .hero-c{display:contents}
  .hero .shot{order:6;width:100%;align-self:stretch}
  .hero .hclaims{order:7;margin-top:4px}

  /* Ein Weg traegt sichtbar: WhatsApp bleibt gefuellt, das Erstgespraech steht als
     umrandeter Knopf dahinter. Der Rechner war der dritte gleich grosse Knopf und
     faellt hier weg — er hat weiter unten eine eigene Leiste ueber die volle Breite
     (`.calc-bar`), der Weg verschwindet also nicht von der Seite. */
  .hero .row .btn,.hero .row .btn-2{width:100%;justify-content:center}
  .hero .row .btn-q{display:none}

  /* Beiwerk, das schmal nur Zeilen kostet (Textstand bleibt einer, siehe HTML). */
  .tb-lang,.topbar b,.nv-btn-lang{display:none}
}

/* ---- Dauerhafte Handlungsleiste (nur Handy) ----------------------------------
   `hidden` im Quelltext, das Skript nimmt es weg. Breite Fenster sehen sie nie. */
.mob-bar{display:none}
@media(max-width:640px){
  .mob-bar:not([hidden]){
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:flex;gap:9px;align-items:center;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    /* ⚠️ KEIN backdrop-filter. Die Leiste ist gross und beim Scrollen dauerhaft
       sichtbar — ein Blur muesste den Hintergrund pro Bild neu abtasten und ruckelt
       (auf speed4you live so aufgetreten, samt Repaint-Geistern). Deckend ist hier
       nicht nur ruhiger, sondern sieht auch sauberer aus. */
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -10px 26px -18px rgba(11,18,32,.34);
    transform:translateY(102%);transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .mob-bar.an{transform:none}
  .mob-bar .btn{flex:1 1 auto;justify-content:center;height:50px;padding:0 14px;font-size:.95rem}
  .mob-bar .btn-2{flex:0 0 auto;height:50px;padding:0 16px;font-size:.92rem;align-items:center}
  /* Damit die Leiste den letzten Inhalt nie verdeckt. */
  body.mob-bar-an{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.mob-bar:not([hidden]){transition:none}}

/* Das Fenster fuellt die Hoehe der Titelspalte: Zeilen dehnen sich, kein Leerraum unten. */
/* ⚠️ Seit die sechs Bereiche eine eigene Szene tragen (port-szenen.mjs), rahmt .b-vis
   nicht mehr: die Szene bringt ihre eigene Buehne mit Rand und Toenung mit. Mit dem
   weissen Kasten UND dem blauen Halo darum lagen drei Rahmen ineinander — der Blick
   blieb am Rahmen haengen statt am Bild. .b-vis existiert nur in diesen fuenf Feldern
   (geprueft), die Aenderung wirkt sonst nirgends. */
.acc-p .b-vis{flex:0 1 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:0;
  background:none;border:0;padding:0;box-shadow:none}
.acc-p .cl,.acc-p .tl{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly}
.acc-p .b-vis>.iv-r{flex:1 1 auto;min-height:46px}
.acc-p .b-vis>.iv-t{flex:0 0 auto}
.acc-p .b-note{flex:0 0 auto}
@media(max-width:940px){.acc-p .b-vis>.iv-r{flex:0 0 auto;min-height:0}.acc-p .cl,.acc-p .tl{display:block}}




/* Zitat-Kacheln laufen im selben Band wie die Bilder. */
.tile.q{display:flex;flex-direction:column;background:var(--ink)}
.tile.q blockquote{flex:1;margin:0;padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,26px);font-size:clamp(1rem,1.16vw,1.1rem);line-height:1.5;letter-spacing:-.014em;color:#fff;text-wrap:pretty}
.tile.q blockquote::before{content:"„"}
.tile.q blockquote::after{content:"“"}
.tile.q .cap{border-top:1px solid rgba(255,255,255,.14)}
.tile.q .cap b{color:#fff}
.tile.q .cap span{color:#98A2B3}
.gal-note{max-width:62ch;margin:clamp(22px,2.6vw,32px) auto 0;text-align:center;font-size:.98rem;line-height:1.6;color:var(--soft);text-wrap:pretty}
.gal-note b{color:var(--ink);font-weight:700}

/* ---------- Wärmer und weicher: Radien und warme Neutralen ----------
   Die Werte (`--wash`, `--warm`, `--r-l/m/s`) stehen seit dem 18.08.2026 in
   `ci.css`, zusammen mit dem oberen Token-Block. Hier bleiben nur die Regeln. */
.sec.grey,.sec.wash{background:var(--wash)}
.b-vis>*,.app,.tile img,.tile .ph{border-radius:var(--r-m)}
.lay-r,.st-c,.iv-r,.iv-t,.cl>div,.tl>div{border-radius:0}
.vm{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:2px;width:15px;height:15px;vertical-align:-2px;margin-right:8px}
.vm b{background:currentColor;border-radius:2px}
.vm b:last-child{opacity:.55}

/* Vergleich: die Mitte ist die Antwort, links und rechts sind Auswege. */
.vt th.me{color:var(--blue-ink);font-size:1.02rem;letter-spacing:-.02em;text-transform:none;display:flex;align-items:center}
.vt thead th:not(.me),.vt td:not(.me){color:var(--soft)}
.vt td.me{background:#F3F7FF;color:var(--ink)}
.vt th.me{background:#F3F7FF;border-top:2px solid var(--blue)}
.vt tbody tr:last-child td.me{border-bottom-left-radius:var(--r-m);border-bottom-right-radius:var(--r-m)}

/* ---- Vergleich auf dem Handy -------------------------------------------------
   Die Tabelle hatte schon `overflow-x:auto`, aber `min-width:720px` bei 390 px
   Fensterbreite heisst: die dritte Spalte — ausgerechnet unsere — lag halb
   ausserhalb, ohne dass irgendetwas auf das Wischen hinwies.
   Jetzt: Kriterienspalte klebt links (man weiss immer, WAS verglichen wird),
   jede Wegspalte schnappt einzeln ein, und der Hinweis darueber sagt es. */
/* Die Umschalter gibt es nur schmal — breit stehen ohnehin alle drei Spalten nebeneinander. */
.vt-tabs{display:none}
@media(max-width:760px){
  .vt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
    margin:clamp(24px,3.4vw,34px) 0 10px;
    border:1px solid var(--line);border-radius:var(--r-btn);padding:4px;background:var(--grey)}
  /* 44 px Mindesthöhe: das ist ein Bedienelement auf einem Finger-Gerät, kein Etikett. */
  .vt-tabs button{min-height:44px;border:0;border-radius:calc(var(--r-btn) - 3px);background:none;
    font:inherit;font-size:.8rem;font-weight:600;letter-spacing:-.01em;color:var(--soft);
    cursor:pointer;padding:6px 4px;line-height:1.2;transition:background .16s,color .16s}
  .vt-tabs button[aria-pressed="true"]{background:#fff;color:var(--blue-deep);
    box-shadow:0 1px 2px rgba(11,18,32,.06),0 4px 12px -6px rgba(11,18,32,.18)}
  .vt{--vt-krit:104px;
    /* `mandatory` statt `proximity`: nach dem Wisch steht IMMER genau eine Spalte,
       nie anderthalb. Kundeneinwand 19.08.2026 zum Zwischenstand — angeschnittene
       Spalten lesen sich als gequetscht, auch wenn technisch alles erreichbar ist. */
    scroll-snap-type:x mandatory;scroll-padding-left:var(--vt-krit);
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .vt table{min-width:0;width:auto}
  /* Sticky braucht eine DECKENDE Flaeche, sonst scrollt der Text sichtbar darunter durch. */
  .vt thead th:first-child,.vt tbody th{position:sticky;left:0;z-index:2;background:#fff;
    width:var(--vt-krit);min-width:var(--vt-krit);max-width:var(--vt-krit);
    box-shadow:1px 0 0 var(--line);font-size:.83rem;
    padding-left:13px;padding-right:11px}
  /* Eine Wegspalte fuellt exakt den Rest: `--mx` ist die Wrap-Breite (90vw), davon ab
     geht die klebende Kriterienspalte und der 1-px-Rahmen links wie rechts. Ueber
     `--mx` gerechnet, nicht ueber `100vw` — sonst muesste das Wrap-Polster doppelt
     geraten werden und die Rechnung bricht bei jeder Breitenaenderung. */
  .vt thead th:not(:first-child),.vt td{
    width:calc(var(--mx) - var(--vt-krit) - 2px);
    min-width:calc(var(--mx) - var(--vt-krit) - 2px);
    scroll-snap-align:start}
  .vt th,.vt td{font-size:.87rem;line-height:1.45;padding-top:15px;padding-bottom:15px}
}

/* Zwei Wege, es zu erleben. */
.tel-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3vw,38px);text-align:left}
@media(max-width:860px){.tel-two{grid-template-columns:1fr}}
.tel-card{background:#fff;border:1px solid var(--line-2);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.tel-card.wa{background:var(--warm)}
.tel-k{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tel-k .sq{width:8px;height:8px;background:var(--blue);border-radius:2px}
.tel-card h3{margin:14px 0 0;font-size:clamp(1.24rem,1.6vw,1.5rem);letter-spacing:-.025em}
.tel-card>p{margin:10px 0 0;font-size:.98rem;line-height:1.6;color:var(--soft);text-wrap:pretty}
.tel-card .btn-wa{align-self:stretch}
.tel-card .telc-wrap,.tel-card .btn-wa{margin-top:22px}
.tel-fine{margin:14px 0 0;font-size:.82rem;color:var(--faint)}


/* ---------- Sauberer Abschluss: randlose Flaechen haben keine Ecken ---------- */
.close,.fstrip,.iorail,.mat{border-radius:0}

/* ---------- Gegenueberstellung: die rechte Seite ist die Belohnung ---------- */
.cmp{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-2)}
.cmp-col{padding:clamp(26px,3vw,40px)}
.cmp-col.now{background:var(--wash)}
.cmp-col.now .cmp-h{color:#5C6371}
.cmp-col.now li{color:var(--soft)}
.cmp-col.now li i{background:transparent;border:1.5px solid #C7CBD3;color:#9AA2B0}
/* ⚠️ Ohne `inset 3px 0 0 var(--blue)`: ein akzentfarbener Kantenstreifen ist genau
   das KI-Klischee aus §8. Die Seite unterscheidet sich ueber Toenung, Kopffarbe
   und Haken/Kreuz in den Bullets. */
.cmp-col.new{background:linear-gradient(180deg,#F2F7FF,#FFF 78%)}
.cmp-col.new .cmp-h{color:var(--blue-deep)}
.cmp-col.new li{color:var(--ink);font-weight:500}
.cmp-col.new li i{background:var(--blue);border:0}
.cmp-fazit{text-align:center;background:#fff;border-top:1px solid var(--line-2);margin:0;padding:clamp(22px,2.4vw,30px) clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.015em}

/* ---------- Ausklapper: linke Titel ueber die volle Fensterhoehe verteilen ---------- */
@media(min-width:941px){
  .acc-l{justify-content:space-between}
  .acc-t{padding-top:clamp(13px,1.5vw,18px);padding-bottom:clamp(13px,1.5vw,18px)}
}
#bauen{padding-bottom:clamp(58px,7vw,98px)}



/* ---------- Fragen: nur eine Haarlinie, keine Kaesten ---------- */
.faq details,.faq details[open]{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none;padding:0}
.faq summary{border:0;border-radius:0;background:none;box-shadow:none;outline:none;margin:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:''}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Mittiger Sektionskopf: gleiche Achse wie der Rest, kein Loch rechts. */
.sec-mid{max-width:62ch;margin:0 auto;text-align:center}
.sec-mid .eyebrow{justify-content:center}
.sec-mid .lede{margin-left:auto;margin-right:auto;max-width:58ch}

/* ================= Zwei Wege: EINE Definition, nichts darueber ================= */
.tel-two{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3vw,38px);text-align:left;align-items:stretch}
@media(min-width:1000px){.tel-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Beide Karten teilen EIN Zeilenraster (Kicker, Titel, Text, Aktion, Kleingedrucktes).
   Damit liegen Knopf und Fusszeile zwangslaeufig auf einer Linie — ohne Mindesthoehen. */
@media(min-width:1000px){
  .tel-two{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .tel-card{grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
}
.tel-card{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;overflow:hidden;padding:clamp(24px,2.6vw,34px)}
.tel-card>p{margin:10px 0 0}
.tel-card>.telc-wrap{align-self:end;padding-top:24px}
/* Die Chat-Karte bekommt in derselben Zeile eine Sprechzeile statt eines Lochs —
   exakt so hoch wie das Nummernfeld, damit beide Knoepfe auf einer Linie liegen. */
.wa-prev{box-sizing:border-box;min-width:0;max-width:100%;height:52px;margin:0 0 10px;display:flex;align-items:center;justify-content:flex-start;cursor:default;user-select:none}
/* Die Vorschau-Blase laeuft auf dieselbe Breite wie der Knopf darunter (`.btn-wa` ist
   `width:100%`). Vorher war sie nur so breit wie ihr Text, die rechte Kante sprang also
   mitten in der Karte — sichtbar schief. Ueber die BREITE geloest, nicht ueber die Textlaenge:
   ein auf Pixel getrimmter Satz bricht beim naechsten Wortwechsel oder Schriftgrad wieder. */
.wa-prev span{width:100%;box-sizing:border-box;max-width:100%;padding:9px clamp(13px,1.6vw,17px);border-radius:16px 16px 16px 4px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-size:clamp(.88rem,1.05vw,.95rem);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tel-card .telc-wrap,.tel-card form{max-width:none;margin:0}
.tel-card .telc-pill{display:flex;flex-wrap:wrap;gap:10px;min-width:0;background:none;border:0;padding:0;box-shadow:none}
.tel-card .telc-pill:focus-within{box-shadow:none}
.tel-card .telc-land{flex:0 0 auto;height:52px;padding:0 14px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-btn)}
.tel-card .telc-pill input[type=tel]{flex:1 1 150px;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-btn)}
.tel-card .telc-pill input[type=tel]:focus{border-color:var(--blue-ink);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
/* Die zwei Hauptknoepfe: identische Form, identische Hoehe, volle Kartenbreite. */
/* Im Pillen-Raster (Zeile) darf der Knopf die Breite fuellen ... */
.tel-card .telc-go,.tel-card .telc-btn{flex:1 0 100%}
/* ... in der Karte selbst (Spalte) NICHT die Hoehe: sonst waechst er ins Riesige. */
.tel-card .telc-go,.tel-card .telc-btn,.tel-card .btn-wa{box-sizing:border-box;width:100%;min-width:0;height:52px;min-height:52px;max-height:52px;margin-left:0;margin-right:0;margin-bottom:0;padding:0 clamp(12px,1.6vw,22px);display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-btn);font-size:1rem;font-weight:600}
.tel-fine{margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--faint);align-self:start}
.tel-fine a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.tel-card .btn-wa svg{width:18px;height:18px;flex:0 0 auto}
.tel-card .btn-wa{margin:0}

/* Die blaue Matte bleibt in der Karte. Der Versatz des Panels beim Oeffnen war die
   eigentliche Ursache — er ist raus; das Polster faengt die Mattenspreizung auf. */
.acc-r{overflow:hidden}
.acc-p{margin:0;padding:clamp(11px,1.3vw,17px)}
/* Das Fenster wird NICHT auf Spaltenhoehe gestreckt (sonst klaffen die Zeilen).
   Es steht als eigenes Objekt mittig in der Spalte — Luft oben und unten gleich. */
.acc-r{justify-content:center}
.acc-p.on{flex:0 1 auto}

.b-vis{box-shadow:0 0 0 clamp(10px,1.1vw,15px) #E7EEFF,0 1px 0 rgba(11,18,32,.04),0 22px 44px -30px rgba(11,18,32,.28)}
@media(max-width:940px){.b-vis{box-shadow:0 0 0 8px #E7EEFF,0 18px 40px -30px rgba(11,18,32,.28)}}


/* ============================================================
   ABLAUFBILD (Muster von sondero.ai): drei Knoten, gepunktete Kette,
   der mittlere ist modvio. Ersetzt die falschen Daten-Tabellen in den
   sechs Bereichen — ein Bild, das man in zwei Sekunden liest.
   ============================================================ */
.fl{display:flex;flex-direction:column;margin:clamp(15px,1.7vw,21px) 0 0}
.fl-n{position:relative;display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m);padding:13px 15px;box-shadow:0 1px 2px rgba(11,18,32,.04)}
.fl-n+.fl-n{margin-top:30px}
.fl-n+.fl-n::before{content:"";position:absolute;left:27px;top:-30px;height:30px;border-left:1px dashed var(--line-2)}
.fl-n+.fl-n::after{content:"";position:absolute;left:24px;top:-9px;width:6px;height:6px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transform:rotate(45deg)}
.fl-i{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--warm);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.fl-i svg{width:16px;height:16px;color:var(--soft)}
.fl-i image-slot{width:100%;height:100%}
.fl-mk{flex:0 0 auto;width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:5px;border-radius:8px;background:rgba(255,255,255,.16)}
.fl-mk i{background:#fff;border-radius:30%}
.fl-mk i:nth-child(4){background:rgba(255,255,255,.45)}
.fl-x{flex:1 1 auto;min-width:0}
.fl-x b{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.018em;line-height:1.3}
.fl-x em{display:block;font-style:normal;margin-top:3px;font-size:.83rem;color:var(--soft);line-height:1.45;text-wrap:pretty}
.fl-t{flex:0 0 auto;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.fl-n.mv{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;box-shadow:0 10px 24px -16px rgba(30,79,216,.7)}
.fl-n.mv .fl-x em{color:rgba(255,255,255,.9)}
.fl-n.mv .fl-t{color:rgba(255,255,255,.86)}
@media(max-width:520px){.fl-t{display:none}}

/* Zeichen neben der Wortmarke in der Schlusszeile. */
.mf-cr{display:inline-flex;align-items:center;gap:9px}
.mf-bot .bz{display:inline-flex;align-items:center;gap:6px;color:var(--soft)}
.mf-bot .bz svg{width:14px;height:14px;flex:0 0 auto}
.mf-bot .bz:hover{color:var(--ink)}
/* Vier Namen in der Laeuft-bei-Zeile brauchen etwas weniger Luft, sonst bricht sie
   schon auf dem Rechner um. */
@media(min-width:861px){.hero .mini{gap:11px}}
.mf-cr .mk{flex:0 0 auto;width:17px;height:17px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.mf-cr .mk i{background:var(--ink);border-radius:30%}
.mf-cr .mk i.hl{background:var(--blue)}

/* ============================================================
   SEITENENDE
   Muster von sondero: ein Aufmacherbild als Textur, die Handlung
   schwebt als Karte darauf. Bei uns kein Landschaftsmotiv, sondern
   der Betrieb selbst — gerastert wie ein Zeitungsdruck, damit es
   Stimmung tragt und nie mit dem Text konkurriert.
   ============================================================ */
.endzone{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(52px,7vw,110px);background:var(--paper)}
.endzone::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(11,18,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,18,32,.05) 1px,transparent 1px),radial-gradient(78% 46% at 50% 2%,rgba(36,86,232,.16),transparent 72%);background-size:52px 52px,52px 52px,auto;background-position:center top;-webkit-mask-image:linear-gradient(transparent 0,#000 16%,#000 62%,transparent 96%);mask-image:linear-gradient(transparent 0,#000 16%,#000 62%,transparent 96%)}

.endzone>*{position:relative;z-index:1}
/* Handlungsblock als schwebende Karte: das Bild laeuft an ihr vorbei. */
.close{width:min(var(--mx),100%);margin:0 auto;border-radius:var(--r-l);padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px);box-shadow:0 52px 96px -58px rgba(11,18,32,.72)}
.close-in{width:100%}
/* Fuss laesst die Textur durchscheinen, bleibt aber Papier unter dem Text. */
.mf{background:none}
.fstrip{position:relative;z-index:1;margin-top:clamp(30px,4vw,60px)}

@media print{.endzone::before,.endzone::after{display:none}}

/* ============================================================
   KUNDENSTIMMEN
   Eine Karte im Bild, automatischer Wechsel, Klick fuehrt in die
   Geschichte. Zitat auf Blau, Foto daneben — keine Kachelwand.
   ============================================================ */
.sw-box{position:relative;margin-top:clamp(26px,3.4vw,44px);overflow:hidden;border-radius:var(--r-l);border:1px solid var(--line);background:#fff}
/* `touch-action:pan-y` gibt das senkrechte Scrollen an den Browser ab und behaelt die
   waagerechte Geste fuer das Blaettern. Nur deshalb duerfen die touchmove-Horcher in der
   Landing passiv bleiben — ohne diese Zeile muesste dort `preventDefault()` stehen, und
   ein nicht-passiver touchmove auf einer Flaeche, ueber die man scrollt, kostet Bildrate. */
.sw-track{display:flex;touch-action:pan-y;transition:transform .62s cubic-bezier(.22,.61,.36,1)}
.sw-s{flex:0 0 100%;display:grid;grid-template-columns:1.02fr .98fr;color:inherit;text-decoration:none;min-width:0}
@media(max-width:860px){.sw-s{grid-template-columns:1fr}}
.sw-t{background:linear-gradient(160deg,#2555DC,#1B47C6);color:#fff;padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);justify-content:center}
.sw-brand{display:flex;align-items:center;gap:11px;font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:#fff}
.sw-cm{flex:0 0 auto;width:19px;height:19px;color:#fff}
.sw-s blockquote{font-size:clamp(1.16rem,1.75vw,1.62rem);font-weight:600;letter-spacing:-.026em;line-height:1.34;text-wrap:pretty}
.sw-s blockquote::before{content:"„"}
.sw-s blockquote::after{content:"“"}
.sw-who{font-size:.9rem;color:rgba(255,255,255,.82)}
.sw-go{margin-top:4px;display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:#fff}
.sw-go svg{width:16px;height:16px;transition:transform .2s}
.sw-s:hover .sw-go svg{transform:translateX(4px)}
.sw-i{position:relative;min-height:clamp(230px,26vw,380px);background:var(--grey);overflow:hidden}
.sw-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Pfeile: nur zwei Kreise auf der Kante, wie im Kachel-Lauf. */
.sw-a{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:var(--r-btn);border:1px solid var(--line-2);background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .16s,border-color .16s}
.sw-a:hover{border-color:var(--blue-ink);color:var(--blue-ink)}
.sw-a svg{width:17px;height:17px}
.sw-a.p{left:12px}
.sw-a.n{right:12px}
@media(max-width:860px){.sw-a{top:auto;bottom:12px;transform:none}}
.sw-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(16px,1.8vw,22px)}
.sw-dots button{width:26px;height:4px;border:0;border-radius:999px;background:var(--line-2);cursor:pointer;padding:0;transition:background .18s,width .18s}
.sw-dots button.on{background:var(--blue);width:40px}

/* Verschmolzener Block: Stimme oben, Lauf darunter, ein Fuss fuer beides. */
#stimmen{scroll-margin-top:calc(var(--nav-h) + 20px)}
#galerie .rail{margin-top:clamp(22px,2.6vw,34px)}
#galerie .sw-dots{margin-top:clamp(14px,1.6vw,20px)}

/* Dritter Weg im Hero: Text mit Zeichen, kein dritter Knopf. */
.btn-q{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 6px;font-size:.98rem;font-weight:600;color:var(--soft);text-decoration:none;transition:color .16s}
.btn-q svg{width:18px;height:18px}
.btn-q:hover{color:var(--blue-deep)}

/* ============================================================
   FEINSCHLIFF
   Weniger Haarlinien, mehr Flaeche: Karten trennen sich durch
   Fuellung und einen weichen Schatten, nicht durch einen Rahmen.
   ============================================================ */
.tel-card{box-shadow:none;background:var(--warm)}
.tel-card.wa{background:var(--grey-2)}
.hr-top{border-top:0}
.btn,.btn-2,.btn-w,.btn-o,.btn-wa{height:54px}
.btn{box-shadow:0 14px 30px -18px rgba(30,79,216,.65)}
.btn-2{background:#fff;border-color:var(--line-2)}
.btn-2:hover{border-color:var(--blue-ink);color:var(--blue-deep)}

/* Einstieg in den Rechner: eine Bank, kein Kasten. */
.calc-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2.2vw,28px);align-items:center;padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);background:#fff;border-radius:var(--r-l);text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 44px -28px rgba(11,18,32,.22);transition:box-shadow .2s,transform .2s}
.calc-bar:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(11,18,32,.05),0 26px 54px -30px rgba(11,18,32,.3)}
.cb-i{width:56px;height:56px;border-radius:16px;background:var(--blue);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.cb-i svg{width:22px;height:22px}
.cb-t b{display:block;font-size:1.06rem;letter-spacing:-.024em}
.cb-t em{display:block;margin-top:4px;font-style:normal;font-size:.94rem;color:var(--soft);line-height:1.5}
.cb-a{display:inline-flex;align-items:center;gap:9px;font-size:.96rem;font-weight:600;color:var(--blue-deep);white-space:nowrap}
.cb-a svg{width:16px;height:16px;transition:transform .2s}
.calc-bar:hover .cb-a svg{transform:translateX(4px)}
/* Auf dem Handy war die Bank ein Treppenmuster: Zeichen links, Text daneben in einer
   schmalen zweiten Spalte, der Knopf darunter wieder am linken Rand. Drei verschiedene
   Anfangskanten auf 350 px Breite. Gestapelt und mittig steht alles auf EINER Achse. */
@media(max-width:820px){
  .calc-bar{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:14px;
    padding:clamp(24px,6vw,30px) clamp(18px,5vw,26px)}
  .cb-a{justify-content:center}
}

/* ============================================================
   STIMMEN, ZWEITE FASSUNG
   Muster von mate: getoente Flaeche statt Vollton, dunkle Schrift,
   die Pointe fett, Foto randlos daneben, Pfeile ausserhalb.
   ============================================================ */
.sw-outer{position:relative;margin-top:clamp(26px,3.4vw,44px)}
.sw-box{position:relative;overflow:hidden;border-radius:22px;border:0;background:#fff;box-shadow:0 1px 2px rgba(11,18,32,.04),0 26px 60px -34px rgba(11,18,32,.26);margin-top:0}
.sw-s{grid-template-columns:1.08fr .92fr}
.sw-s.t1{background:#E3EAF8}
.sw-s.t2{background:#EAE5DB}
.sw-t{background:none;color:var(--ink);padding:clamp(28px,3.6vw,58px);gap:clamp(16px,1.8vw,24px)}
.sw-brand{display:block;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(11,18,32,.62)}
.sw-s blockquote{color:var(--ink);font-size:clamp(1.16rem,1.85vw,1.68rem);font-weight:500;letter-spacing:-.022em;line-height:1.45}
.sw-s blockquote b{font-weight:700}
.sw-s blockquote::before,.sw-s blockquote::after{content:none}
.sw-who{font-size:.92rem;color:rgba(11,18,32,.55)}
.sw-go{color:var(--blue-deep)}
.sw-i{min-height:clamp(280px,30vw,430px);background:transparent}
.sw-a{width:44px;height:44px;background:#fff;border:0;box-shadow:0 2px 6px rgba(11,18,32,.1),0 14px 30px -18px rgba(11,18,32,.4)}
.sw-a.p{left:-21px}
.sw-a.n{right:-21px}
@media(max-width:1360px){.sw-a.p{left:12px}.sw-a.n{right:12px}}
@media(max-width:860px){.sw-a{top:auto;bottom:14px;transform:none}.sw-a.p{left:14px}.sw-a.n{right:14px}}
.sw-dots{gap:7px}
.sw-dots button{width:7px;height:7px;border-radius:999px;background:rgba(11,18,32,.18)}
.sw-dots button.on{width:26px;background:var(--blue)}
.gal-note{margin-top:clamp(22px,2.6vw,32px)}

/* ============================================================
   BRANCHEN, ZWEITE FASSUNG
   Foto waehlt die Branche (der Streifen ueber dem Fuss ist entfallen),
   und statt vier Merkmalskacheln steht ein Satz aus dem Alltag.
   ============================================================ */

/* Kennzeilen unter den Aktionen: drei Zusagen, keine Kacheln. */
.hclaims{list-style:none;display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.4vw,34px);margin-top:clamp(20px,2.2vw,28px)}
.hclaims li{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:500;color:var(--soft)}
.hclaims svg{flex:0 0 auto;width:16px;height:16px;color:var(--blue-ink)}

/* Branchen-Auswahl heller: Foto in Farbe, Name auf Papier darunter. */

/* Branchen-Auswahl: Zeichen statt Stockfoto — nichts wirkt schneller beliebig
   als ein gekauftes Motiv. Echte Betriebsfotos ersetzen es, sobald sie da sind. */

/* ============================================================
   STIMMEN, DRITTE FASSUNG
   Muster von sondero: das Foto traegt die ganze Karte, darueber ein
   dunkler Schleier, Zitat in Weiss, Name unter einer Haarlinie.
   ============================================================ */
.sw-s{position:relative;display:block;grid-template-columns:none;min-height:clamp(300px,31vw,440px);isolation:isolate}
.sw-s.t1,.sw-s.t2{background:var(--ink)}
.sw-bg{position:absolute;inset:0 0 0 auto;width:56%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:saturate(.92) contrast(1.02);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%);mask-image:linear-gradient(90deg,transparent 0,#000 36%)}
.sw-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,13,26,.72) 0%,rgba(8,13,26,.34) 46%,transparent 64%)}
/* Unter 860 px steht das Zitat ueber der ganzen Karte — dort bleibt es beim Vollbild mit
   Schleier, sonst laege der Text auf dem Gesicht. */
@media(max-width:860px){
  .sw-bg{inset:0;width:100%;-webkit-mask-image:none;mask-image:none}
  .sw-veil{background:linear-gradient(180deg,rgba(8,13,26,.92) 0%,rgba(8,13,26,.86) 55%,rgba(8,13,26,.72) 100%)}
}
.sw-t{position:relative;z-index:2;background:none;color:#fff;max-width:min(640px,74%);height:100%;padding:clamp(28px,3.4vw,54px);
  display:grid;grid-template-rows:auto 1fr auto;gap:clamp(14px,1.6vw,20px)}
.sw-t blockquote{align-self:center;margin:0}
@media(max-width:860px){.sw-t{max-width:100%}}
.sw-brand{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.sw-mk i{background:rgba(255,255,255,.6)}
.sw-mk i:nth-child(4){background:#fff}
.sw-s blockquote{color:#fff;font-size:clamp(1.14rem,1.78vw,1.6rem);font-weight:500;letter-spacing:-.022em;line-height:1.48;text-wrap:pretty}
.sw-by{margin-top:0;align-self:end;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid rgba(255,255,255,.22);display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.sw-av{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;padding:9px}
.sw-av svg{width:100%;height:100%;color:#fff}
.sw-bn b{display:block;font-size:.95rem;color:#fff;letter-spacing:-.014em}
.sw-bn em{display:block;font-style:normal;font-size:.86rem;color:rgba(255,255,255,.7);margin-top:2px}
.sw-go{margin-left:auto;color:#fff;font-size:.93rem;font-weight:600;display:inline-flex;align-items:center;gap:9px}
.sw-a{background:rgba(255,255,255,.94)}
.hclaims{justify-content:center}

/* Nummernfeld: Platzhalter mittig, damit die Pille ruhig steht. */
.telc-pill input[name=telefon]{text-align:center}
.telc-pill input[name=telefon]::placeholder{text-align:center}

/* Warum das geht: vier knappe Gruende in einem Raster, kein zweiter Block. */
.claim .reasons{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(34px,4.4vw,64px);border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:1000px){.claim .reasons{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.claim .reasons{grid-template-columns:1fr}}
.claim .reasons>div{padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px);border-right:1px solid rgba(255,255,255,.16)}
.claim .reasons>div:last-child{border-right:0}
@media(max-width:1000px){.claim .reasons>div:nth-child(2n){border-right:0}.claim .reasons>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}}
@media(max-width:600px){.claim .reasons>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}.claim .reasons>div:last-child{border-bottom:0}}
.claim .reasons b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.022em;color:#fff}
.claim .reasons p{margin-top:10px;font-size:.94rem;line-height:1.6;color:#B7BDC8;text-wrap:pretty}
.claim{padding-bottom:clamp(40px,5vw,76px)}

/* ============================================================
   FUENF VISUALS · WIE ES FUNKTIONIERT
   Jede Ebene bekommt eine eigene Anatomie: Knotenbild, Kette,
   Balken, Zeitachse, Modulraster. Muster von sondero: weisse
   Flaeche, gepunktete Verbinder, kleine Zeichenkacheln, ein Blau.
   ============================================================ */
.vz{margin-top:clamp(16px,1.8vw,22px)}
.vz-ic{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--grey);color:var(--soft);display:grid;place-items:center}
.vz-ic svg{width:17px;height:17px}
.vz-mk{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.2);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.5px;padding:9px}
.vz-mk i{background:rgba(255,255,255,.62);border-radius:30%}
.vz-mk i:nth-child(4){background:#fff}

/* 01 Knotenbild */
.vz-nd3{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,.92fr) 30px minmax(0,1fr);align-items:center;gap:0}
.vz-side{display:grid;gap:12px}
.vz-n{display:flex;align-items:center;gap:11px;padding:13px 14px;background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(11,18,32,.05),0 12px 26px -20px rgba(11,18,32,.32)}
.vz-n b{display:block;font-size:.9rem;letter-spacing:-.016em}
.vz-n em{display:block;font-style:normal;font-size:.8rem;color:var(--faint);margin-top:2px;line-height:1.4}
.vz-join{position:relative;height:100%;min-height:96px}
.vz-join .v{position:absolute;left:50%;top:25%;bottom:25%;border-left:1px dashed var(--line-2)}
.vz-join .h1,.vz-join .h2{position:absolute;left:0;width:50%;border-top:1px dashed var(--line-2)}
.vz-join .h1{top:25%}
.vz-join .h2{bottom:25%}
.vz-join .out{position:absolute;left:50%;top:50%;width:50%;border-top:1px dashed var(--line-2)}
.vz-join.r .h1,.vz-join.r .h2{left:50%}
.vz-join.r .out{left:0}
.vz-core{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:clamp(16px,1.8vw,22px);border-radius:14px;background:var(--blue-deep);color:#fff;box-shadow:0 16px 34px -20px rgba(30,79,216,.6)}
.vz-core b{font-size:.98rem;letter-spacing:-.02em}
.vz-core em{font-style:normal;font-size:.84rem;color:rgba(255,255,255,.86);line-height:1.45}
@media(max-width:1080px){.vz-nd3{grid-template-columns:1fr;gap:12px}.vz-join{display:none}}

/* 02 Kette */
.vz-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.vz-step{position:relative;padding:0 clamp(8px,1vw,14px)}
.vz-step+.vz-step::before{content:"";position:absolute;left:0;top:22px;width:100%;border-top:1px dashed var(--line-2);z-index:0;transform:translateX(-50%)}
.vz-t{position:relative;z-index:1;display:inline-grid;place-items:center}
.vz-step b{display:block;margin-top:12px;font-size:.9rem;letter-spacing:-.016em}
.vz-step em{display:block;font-style:normal;font-size:.8rem;color:var(--faint);margin-top:3px;line-height:1.4}
.vz-step.on .vz-ic{background:var(--blue-deep);color:#fff;box-shadow:0 10px 22px -14px rgba(30,79,216,.7)}
.vz-step.on b{color:var(--blue-deep)}
@media(max-width:640px){.vz-chain{grid-template-columns:1fr 1fr;row-gap:20px}.vz-step+.vz-step::before{display:none}}
.vz-sum{margin-top:clamp(16px,1.8vw,22px);padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:.88rem;color:var(--faint)}
.vz-sum b{font-size:1.04rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* 03 Balken */
.vz-lg{display:flex;gap:20px;font-size:.8rem;color:var(--faint);margin-bottom:14px}
.vz-lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.vz-lg i.s{background:var(--line-2)}
.vz-lg i.i{background:var(--blue)}
.vz-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 54px;align-items:center;gap:14px;padding:9px 0}
.vz-nm b{display:block;font-size:.88rem;letter-spacing:-.014em}
.vz-nm em{display:block;font-style:normal;font-size:.76rem;color:var(--faint);margin-top:1px}
.vz-tr{height:8px;border-radius:999px;background:var(--grey-2);overflow:hidden}
.vz-tr i{display:block;height:100%;border-radius:999px;background:var(--blue)}
.vz-v{text-align:right;font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:600px){.vz-row{grid-template-columns:minmax(0,1fr) 48px}.vz-tr{grid-column:1/-1}}

/* 04 Zeitachse */
.vz-time{position:relative;padding-left:22px}
.vz-time::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;border-left:1px dashed var(--line-2)}
.vz-e{position:relative;display:flex;align-items:flex-start;gap:14px;padding:11px 0}
.vz-dot{position:absolute;left:-21px;top:15px;width:11px;height:11px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--line-2)}
.vz-e.on .vz-dot{background:var(--blue);box-shadow:0 0 0 3px rgba(36,86,232,.2)}
.vz-tx{flex:1 1 auto;min-width:0}
.vz-tx b{display:block;font-size:.92rem;letter-spacing:-.016em}
.vz-tx em{display:block;font-style:normal;font-size:.83rem;color:var(--faint);margin-top:3px;line-height:1.45}
.vz-w{flex:0 0 auto;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* 05 Modulraster */
.vz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.vz-c{min-height:clamp(84px,7.6vw,104px);border-radius:12px;background:var(--grey);display:grid;place-items:center;gap:7px;align-content:center;padding:10px 8px;text-align:center}
.vz-c.fill{background:#fff;box-shadow:0 1px 2px rgba(11,18,32,.05),0 14px 28px -20px rgba(11,18,32,.32)}
.vz-c em{font-style:normal;font-size:.75rem;color:var(--faint);line-height:1.3}
.vz-c.own{background:var(--blue-deep);box-shadow:0 16px 32px -18px rgba(30,79,216,.7)}
.vz-c.own em{color:#fff;font-weight:600}
@media(max-width:640px){.vz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Wechsler-Pfeile: ausserhalb der Karte, solange Platz ist — sonst in die
   untere rechte Ecke, nie in die Textspalte (muss zuletzt stehen, weil eine
   frühere .sw-t{padding:…}-Kurzform sonst den Innenabstand zurücksetzt). */
@media(max-width:1360px){
  .sw-a{top:auto;bottom:16px;transform:none}
  .sw-a.p{left:auto;right:68px}
  .sw-a.n{right:14px}
  .sw-t{padding-bottom:76px}
}

/* ============================================================
   FUENF SCHAUBILDER · WIE ES FUNKTIONIERT
   Muster von sondero: viel weisse Flaeche, gestrichelte Leitungen,
   darauf wenige Schilder mit Zeichen und fetter Beschriftung.
   Die Leitungen laufen hinter den Schildern durch und bis an den
   Rand — dadurch braucht kein Endpunkt exakt zu sitzen.
   Fuenf Anatomien: Zulauf, Treppe, Faecher, Kreis, Schiene.
   ============================================================ */
.fx{position:relative;aspect-ratio:1000/600;min-height:300px;margin:clamp(4px,.7vw,10px) 0}
.fx-w{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-l{position:absolute;pointer-events:none}
.fx-l.h{border-top:1px dashed var(--line-2)}
.fx-l.v{border-left:1px dashed var(--line-2)}
.fx-c{position:absolute;transform:translateY(-50%);z-index:1;display:inline-flex;align-items:center;gap:11px;white-space:nowrap;padding:14px 19px;border-radius:15px;background:#fff;box-shadow:0 1px 2px rgba(11,18,32,.07),0 20px 38px -24px rgba(11,18,32,.45)}
.fx-c>svg{flex:0 0 auto;width:21px;height:21px;color:var(--blue-ink)}
.fx-c b{font-size:1.04rem;font-weight:700;letter-spacing:-.022em;line-height:1.2;color:var(--ink)}
.fx-c.bl{background:var(--blue-deep);box-shadow:0 1px 2px rgba(11,18,32,.06),0 18px 34px -20px rgba(30,79,216,.72)}
.fx-c.bl>svg{color:#fff}
.fx-c.bl b{color:#fff}
.fx-mk{flex:0 0 auto;width:21px;height:21px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.5px}
.fx-mk i{background:rgba(255,255,255,.6);border-radius:30%}
.fx-mk i:nth-child(4){background:#fff}
.fx-c:not(.bl) .fx-mk i{background:rgba(36,86,232,.35)}
.fx-c:not(.bl) .fx-mk i:nth-child(4){background:var(--blue)}
/* Die freie Anordnung braucht Platz. Ist die Spalte schmal, laufen die
   Schilder als Kette untereinander — nie gequetscht ueber einander. */
@media(max-width:1240px){
  .fx{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;gap:11px}
  .fx-l,.fx-w{display:none}
  .fx-c{position:static;transform:none;align-self:flex-start;white-space:normal}
}

/* Taschenrechner-Zeichen: die vier Tasten unten rechts sind das modvio-Mal. */
.i-calc{width:28px;height:28px}
.cb-i .i-calc{width:34px;height:34px}

/* Ein Knopf, eine Bauform: auf Blau die weisse und die umrandete Variante,
   gleiche Hoehe, gleiches Zeichen, gleiche Beschriftung wie auf Weiss. */
.btn-w{box-shadow:0 12px 28px -16px rgba(6,20,60,.5)}
.btn-w:hover{background:#EDEFF3}
.close-act .btn-w,.close-act .btn-o{min-width:0}

/* Auf weissen Knoepfen wird das WhatsApp-Zeichen blau, nicht schwarz —
   sonst sitzt ein tiefschwarzes Mal in einer sonst blauen Aktion. */
.btn-w svg,.btn-2 svg{color:var(--blue-deep);fill:currentColor}
.btn svg,.btn-o svg,.mnv .btn svg{color:#fff;fill:currentColor}




/* ============================================================================
   Sechs Bereiche: Scroll-Geschichte statt Ausklapper

   Die Clay-Referenz liefert nur die Mechanik: ein Kapitel pro grosse Karte,
   spaetere Karten schieben sich beim nativen Scrollen ueber die vorige. Die
   Inhalte, Szenen, Typografie und Marke bleiben modvio. Kein Scroll-Hijacking,
   kein Scroll-Handler und kein dauerhaft laufender Motion-Layer.
   ========================================================================== */
#bauen .acc{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-top:clamp(30px,4vw,56px);
  align-items:stretch;
  isolation:isolate;
}
#bauen .acc-l,#bauen .acc-r{display:contents}

/* Auf schmalen Flaechen folgen Text und Szene derselben Karte direkt
   aufeinander. So wird Mobil nicht zum Desktop-Akkordeon in einer Spalte. */
#bauen .acc-t:nth-child(1){grid-area:1/1}
#bauen .acc-p:nth-child(1){grid-area:2/1}
#bauen .acc-t:nth-child(2){grid-area:3/1}
#bauen .acc-p:nth-child(2){grid-area:4/1}
#bauen .acc-t:nth-child(3){grid-area:5/1}
#bauen .acc-p:nth-child(3){grid-area:6/1}
#bauen .acc-t:nth-child(4){grid-area:7/1}
#bauen .acc-p:nth-child(4){grid-area:8/1}
#bauen .acc-t:nth-child(5){grid-area:9/1}
#bauen .acc-p:nth-child(5){grid-area:10/1}
#bauen .acc-t:nth-child(6){grid-area:11/1}
#bauen .acc-p:nth-child(6){grid-area:12/1}

#bauen .acc-t,#bauen .acc-p{
  box-sizing:border-box;
  position:relative;
  border-color:var(--story-border);
  background:var(--story-surface);
}
#bauen .acc-t:nth-child(odd),#bauen .acc-p:nth-child(odd){
  --story-accent:var(--blue);
  --story-accent-ink:var(--blue-ink);
  --story-accent-label:#fff;
  --story-surface:var(--blue-tint);
  --story-border:var(--blue-line);
  --story-title:#0D2450;
  --story-copy:#40516C;
}
#bauen .acc-t:nth-child(even),#bauen .acc-p:nth-child(even){
  --story-accent:var(--orange);
  --story-accent-ink:var(--orange-ink);
  --story-accent-label:#3A1E00;
  --story-surface:var(--orange-tint);
  --story-border:var(--orange-line);
  --story-title:#3D2104;
  --story-copy:#724516;
}

#bauen .acc-t{
  width:100%;
  margin:0;
  padding:clamp(34px,7vw,52px) clamp(24px,6vw,42px) 24px;
  border:1px solid var(--story-border);
  border-bottom:0;
  border-left-width:1px;
  border-radius:var(--r-l) var(--r-l) 0 0;
  color:var(--story-title);
  cursor:default;
}
#bauen .acc-h{
  display:block;
  margin:0;
  font-size:clamp(1.55rem,5.5vw,2.25rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.08;
  color:var(--story-title);
  text-wrap:balance;
}
#bauen .acc-step{
  display:flex;
  width:max-content;
  min-width:74px;
  height:32px;
  margin:0 0 clamp(26px,4vw,38px);
  padding:0 14px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--story-accent);
  color:var(--story-accent-label);
  font-size:.7rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  box-shadow:
    8px 0 0 color-mix(in srgb,var(--story-accent) 34%,transparent),
    16px 0 0 color-mix(in srgb,var(--story-accent) 25%,transparent),
    24px 0 0 color-mix(in srgb,var(--story-accent) 16%,transparent),
    32px 0 0 color-mix(in srgb,var(--story-accent) 9%,transparent);
}
#bauen .acc-step::after{content:" / 06"}
#bauen .acc-b{
  display:grid;
  grid-template-rows:1fr;
  opacity:1;
  transition:none;
}
#bauen .acc-b>span{overflow:visible}
#bauen .acc-p2{
  margin-top:clamp(18px,2.2vw,28px);
  max-width:46ch;
  color:var(--story-copy);
  font-size:1rem;
  line-height:1.62;
}
#bauen .acc-b ul{margin:clamp(20px,2.4vw,30px) 0 0;gap:0}
#bauen .acc-b li{
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  padding:10px 0;
  border-top:1px solid color-mix(in srgb,var(--story-accent) 20%,transparent);
  color:var(--story-title);
  font-size:.94rem;
  line-height:1.48;
}
#bauen .acc-b li:last-child{border-bottom:1px solid color-mix(in srgb,var(--story-accent) 20%,transparent)}
#bauen .acc-b li i{width:18px;height:1px;margin-top:.72em;background:var(--story-accent);border-radius:0}

#bauen .acc-p{
  display:flex;
  width:100%;
  margin:0 0 20px;
  padding:0 clamp(18px,4.5vw,32px) clamp(20px,5vw,34px);
  align-items:center;
  border:1px solid var(--story-border);
  border-top:0;
  border-radius:0 0 var(--r-l) var(--r-l);
}
#bauen .acc-p .b-vis{
  width:100%;
  flex:0 1 auto;
  gap:0;
  margin:0;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
#bauen .acc-p .b-note{
  margin-top:14px;
  border-color:color-mix(in srgb,var(--story-accent) 28%,transparent);
  background:color-mix(in srgb,var(--story-accent) 7%,#fff);
  color:var(--story-accent-ink);
}

/* In den orangefarbenen Kapiteln wird auch die Szene warm. Die Produktform
   bleibt identisch; nur die Akzentrolle wechselt. */
#bauen .acc-p:nth-child(even){
  --blue:var(--orange);
  --blue-deep:var(--orange-deep);
  --blue-ink:var(--orange-ink);
  --blue-tint:var(--orange-tint);
  --blue-line:var(--orange-line);
}
#bauen .acc-p:nth-child(even) .szene{
  background:radial-gradient(120% 95% at 50% 0%,#FFFFFF 0%,#FFF7EC 46%,#FFDDAE 100%);
}
#bauen .acc-p:nth-child(even) .szene::before{
  background-image:radial-gradient(rgba(247,147,26,.25) 1.3px,transparent 1.3px);
}
#bauen .acc-p:nth-child(even) .szene .obj,
#bauen .acc-p:nth-child(even) .szene .blatt,
#bauen .acc-p:nth-child(even) .szene .feld,
#bauen .acc-p:nth-child(even) .szene .akte,
#bauen .acc-p:nth-child(even) .szene .kachel{
  border-color:rgba(122,58,0,.16);
}
#bauen .acc-p:nth-child(even) .szene .bar{background:#FAD7A4}
#bauen .acc-p:nth-child(even) .szene .bar.d{background:#F3BD72}
#bauen .acc-p:nth-child(even) .szene .spuren path{stroke:rgba(247,147,26,.82)}

@media(min-width:941px){
  #bauen .acc{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
  #bauen .acc-t:nth-child(1){grid-area:1/1} #bauen .acc-p:nth-child(1){grid-area:1/2}
  #bauen .acc-t:nth-child(2){grid-area:2/1} #bauen .acc-p:nth-child(2){grid-area:2/2}
  #bauen .acc-t:nth-child(3){grid-area:3/1} #bauen .acc-p:nth-child(3){grid-area:3/2}
  #bauen .acc-t:nth-child(4){grid-area:4/1} #bauen .acc-p:nth-child(4){grid-area:4/2}
  #bauen .acc-t:nth-child(5){grid-area:5/1} #bauen .acc-p:nth-child(5){grid-area:5/2}
  #bauen .acc-t:nth-child(6){grid-area:6/1} #bauen .acc-p:nth-child(6){grid-area:6/2}
  #bauen .acc-t{
    min-height:580px;
    margin-bottom:22px;
    padding:clamp(42px,4vw,58px) clamp(34px,3.7vw,52px);
    border-right:0;
    border-bottom:1px solid var(--story-border);
    border-radius:clamp(26px,2.5vw,34px) 0 0 clamp(26px,2.5vw,34px);
  }
  #bauen .acc-p{
    min-height:580px;
    margin-bottom:22px;
    padding:clamp(30px,3vw,44px);
    border-top:1px solid var(--story-border);
    border-left:0;
    border-radius:0 clamp(26px,2.5vw,34px) clamp(26px,2.5vw,34px) 0;
  }
  #bauen .acc-h{font-size:clamp(1.9rem,2.55vw,2.75rem)}
}

@media(min-width:941px) and (min-height:640px){
  #bauen .acc{
    --story-frame:min(760px,calc(100svh - var(--nav-h) - 32px));
    --story-step:calc(var(--story-frame) - 48px);
    --story-hold:clamp(190px,26svh,280px);
    grid-template-rows:repeat(5,var(--story-step)) calc(var(--story-step) + var(--story-hold));
    padding-bottom:48px;
  }
  #bauen .acc-t,#bauen .acc-p{
    position:sticky;
    top:calc(var(--nav-h) + 16px);
    height:var(--story-frame);
    min-height:0;
    margin-bottom:0;
    align-self:start;
  }
  #bauen .acc-t:nth-child(1),#bauen .acc-p:nth-child(1){z-index:1}
  #bauen .acc-t:nth-child(2),#bauen .acc-p:nth-child(2){z-index:2}
  #bauen .acc-t:nth-child(3),#bauen .acc-p:nth-child(3){z-index:3}
  #bauen .acc-t:nth-child(4),#bauen .acc-p:nth-child(4){z-index:4}
  #bauen .acc-t:nth-child(5),#bauen .acc-p:nth-child(5){z-index:5}
  #bauen .acc-t:nth-child(6),#bauen .acc-p:nth-child(6){z-index:6}
}

/* Flache Laptop-Fenster (13" MacBook: 1440x900 ergibt real ~650px Innenhoehe).
   Dort ist der Rahmen nur noch ~534px hoch — mit den Desktop-Abstaenden passt
   die hoechste Karte (555px Inhalt, gemessen bei 1280px Breite) nicht hinein.
   Statt den Effekt wie bisher ganz abzuschalten, ruecken hier nur die Abstaende
   zusammen; ueber 760px Fensterhoehe bleibt alles unveraendert. */
@media(min-width:941px) and (min-height:640px) and (max-height:759px){
  #bauen .acc-t{padding:clamp(24px,3.6svh,42px) clamp(30px,3.2vw,46px)}
  #bauen .acc-p{padding:clamp(20px,3svh,36px)}
  #bauen .acc-step{margin-bottom:clamp(16px,3svh,26px)}
  #bauen .acc-h{font-size:clamp(1.72rem,2.3vw,2.2rem)}
  #bauen .acc-p2{margin-top:clamp(12px,2.2svh,20px);font-size:.95rem;line-height:1.55}
  #bauen .acc-b ul{margin-top:clamp(14px,2.4svh,22px)}
  #bauen .acc-b li{padding:8px 0;font-size:.9rem}
  /* Die Szene richtet sich sonst allein nach der Breite (aspect-ratio 643/488)
     und ragt im flachen Fenster unten aus der Karte. Hier gibt die Rahmenhoehe
     das Mass vor, die Breite folgt der Proportion. */
  #bauen .acc-p{align-items:stretch}
  #bauen .acc-p .b-vis{min-height:0;flex:1 1 auto;justify-content:center}
  #bauen .acc-p .szene{flex:1 1 auto;min-height:0;width:auto;max-width:100%;margin-inline:auto}
  #bauen .acc-p .b-note{flex:0 0 auto;margin-top:12px;padding:10px 12px;font-size:.82rem}
}
/* ⚠️ EINE KACHEL MEHR HEISST SIEBEN STELLEN, nicht eine. Beim Bau der sechsten am
   20.08.2026 fehlte genau diese z-index-Zeile: die neue Kachel klebte richtig,
   war korrekt gefaerbt und vollstaendig — und blieb trotzdem unsichtbar, weil die
   fuenfte (z-index 5) ueber ihr lag. Kein Fehler, kein Ueberlauf, Screenshot der
   Beweis. Die Liste:
     1. `grid-area` schmal  (Zeilen 2N-1 / 2N)
     2. `grid-area` breit   (Zeile N, Spalte 1 und 2)
     3. `grid-template-rows: repeat(N-1, …)` — die LETZTE Zeile traegt den Halteweg
     4. `z-index:N`                                          ← diese hier
     5. `.acc-step::after{content:" / 0N"}`
     6. `aria-label="Bereich x von N"` in JEDER Kachel + die Zahl in der H2
     7. `pruefe.mjs`: Anzahl, Farbfolge, Akzentfolge, Fortschrittstext */

@media(max-width:640px){
  #bauen .acc-step{margin-bottom:24px}
  #bauen .acc-p .b-note{font-size:.82rem;line-height:1.45}
}

@media(max-width:940px){
  #bauen .acc.acc-ready .acc-b{grid-template-rows:0fr;opacity:0}
  #bauen .acc.acc-ready .acc-b>span{overflow:hidden}
  #bauen .acc.acc-ready .acc-t.on .acc-b{grid-template-rows:1fr;opacity:1}
  #bauen .acc.acc-ready .acc-p{display:none}
  #bauen .acc.acc-ready .acc-p.on{display:flex}
  #bauen .acc.acc-ready .acc-t[role="button"]{cursor:pointer;touch-action:manipulation}
  #bauen .acc.acc-ready .acc-t[role="button"]:focus-visible{
    outline:2px solid var(--story-accent-ink);
    outline-offset:3px;
  }
  #bauen .acc.acc-ready .acc-t:not(.on){
    margin-bottom:12px;
    padding:18px 22px;
    border-bottom:1px solid var(--story-border);
    border-radius:var(--r-l);
  }
  #bauen .acc.acc-ready .acc-t:not(.on) .acc-h{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    align-items:center;
    font-size:1.08rem;
    line-height:1.25;
    letter-spacing:-.025em;
    text-wrap:pretty;
  }
  #bauen .acc.acc-ready .acc-t:not(.on) .acc-step{
    min-width:64px;
    height:28px;
    margin:0;
    padding:0 10px;
    font-size:.64rem;
  }
}

@media(prefers-reduced-motion:reduce){
  #bauen .acc{grid-template-rows:repeat(5,auto);padding-bottom:0}
  #bauen .acc-t,#bauen .acc-p{position:relative;top:auto;height:auto;min-height:0;margin-bottom:22px}
}



/* ============================================================================
   HANDY · Tippflaechen
   Steht bewusst am DATEIENDE: zwei Handy-Bloecke weiter oben wurden in dieser Datei
   von spaeteren Grundregeln still ueberstimmt (gleiche Spezifitaet, spaetere gewinnt).
   Hier kann das nicht mehr passieren.

   Gemessen unter `pointer: coarse` waren 17 echte Ziele unter 44 px — die kleinsten
   die Punkte des Stimmen-Wechslers mit 7 x 7 px. Vergroessert wird die TIPPFLAECHE,
   nicht das Aussehen: eine unsichtbare Huelle per ::after legt sich ueber das Element,
   der Punkt bleibt ein Punkt.
   (Nicht enthalten: `.telhp` — das ist der Honeypot gegen Spam-Roboter, `aria-hidden`
   und `tabindex="-1"`. Er ist kein Bedienziel und wird nicht angefasst.)
   ========================================================================== */
@media(pointer:coarse){
  /* ⚠️ `#swDots` ist eine ID, keine Klasse — mit `.swDots` griff die Regel nicht und
     die Punkte blieben bei 8 px Trefferhoehe (per elementFromPoint nachgemessen, nicht
     per Stilabfrage: die Stilabfrage haette „44 px" gemeldet, sobald die Regel
     irgendwo greift). Zweites Mal derselbe Fehler in dieser Datei, nach `.gespraech`.
     Nicht enthalten sind die beiden Fliesstext-Verweise in `.tel-fine` („wie das
     läuft", „Datenschutz"): Verweise INNERHALB eines Satzes sind von der
     Mindestgroesse ausgenommen, und eine 44-px-Huelle darum wuerde die Nachbarzeilen
     ueberdecken und deren Tipper schlucken. */
  #swDots button,.topbar a,.nv .mark,.mf-mark,.mf-bot .bz{position:relative}
  #swDots button::after,.topbar a::after,.nv .mark::after,.mf-mark::after,.mf-bot .bz::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:44px}
  .mf-soc a{width:44px;height:44px}
  .mf-bot .mf-legal a{min-height:44px}
  .br-blaettern button{width:44px;height:44px}
}

/* ============================================================================
   HANDY · was auf dem kleinen Schirm wegfaellt
   Kundenentscheid 19.08.2026 nach dem Durchklick am iPhone: „Platz schaffen und
   Unnoetiges weglassen". Beides bleibt auf Desktop unveraendert stehen — es ist
   eine Entscheidung ueber die kleine Flaeche, keine Streichung aus dem Angebot.
   ========================================================================== */
@media(max-width:640px){
  /* Der dunkle Block „Warum das geht" stand hier bis 20.08.2026 als mobile
     Ausblendung. Er ist seither GANZ weg — auch auf dem Desktop. Grund: er war
     der dritte Auftritt desselben Arguments. „Passt auf deinen Ablauf", „Bis es
     laeuft", „Wer betreibt es" und „Wenn sich etwas aendert" stehen als Zeilen
     in der Vergleichstabelle, „Server in Deutschland" und „Ein Ansprechpartner
     mit Namen. Kein Ticketsystem." als zwei der drei Karten im Anschluss-
     Abschnitt. Dass mobil monatelang niemand etwas vermisst hat, war der
     Hinweis. Die dunklen Regeln (`.claim`, `.reasons`) bleiben absichtlich
     stehen — sie sind der Baustein, falls der dunkle Auftritt an einer anderen
     Stelle gebraucht wird. */

  /* Die ganze Dreiergruppe (Server in Deutschland · E-Rechnung heute · Ansprechpartner).
     Kundenentscheid 19.08.2026 in zwei Schritten: erst der Ansprechpartner, dann die
     beiden uebrigen. Die Trennlinie darueber gehoert `.tri` selbst (`border-top`) und
     geht mit — es bleibt kein verwaister Strich stehen (geprueft).
     Was dadurch mobil noch traegt: „Gebaut in Deutschland, betrieben auf deutschen
     Servern" steht im Fuss-Claim, die E-Rechnung im Vorgang der sechs Bereiche.
     ⚠️ Der Abschnitt-Praefix ist Pflicht, nicht Kosmetik: `.tri` ist ein GETEILTER
     Baustein. Als der Website-Abschnitt am 20.08.2026 dieselbe Klasse benutzte, hat
     die damals noch praefixlose Regel dessen drei Karten mit ausgeblendet — mobil
     blieben dort nur Ueberschrift und Nebensatz, das ganze Argument (eigenes
     Aussehen · selbst pflegbar · haengt am System) war weg. Gemessen: drei Karten
     0 px breit, Abschnitt nur 602 px hoch, KEINE Meldung irgendwo. Wer `.tri` ein
     drittes Mal einsetzt, entscheidet hier bewusst mit. Gate: `pruefe.mjs` zaehlt
     die Karten des Website-Abschnitts auf dem Handy. */
  #anschluss .tri{display:none}
}

/* Die kleine Wortmarke in der Schlusszeile faellt schmal weg — sie steht im selben
   Fuss drei Zeilen darueber schon in gross, und die Zeile war mit ihr vier Pixel zu
   breit (Kundeneinwand „Ein Produkt von ist gequetscht", 19.08.2026).
   ⚠️ Diese zwei Regeln stehen hier unten und nicht oben im Fuss-Block: `.mf-cr .mk`
   setzt weiter unten in dieser Datei `display:grid`, gleiche Spezifitaet (0,2,0), und
   die SPAETERE Regel gewinnt. Im Fuss-Block ausgeblendet verschwand nur das <b>, das
   Mal blieb stehen — ein halber Zustand, schlechter als beide ganzen.
   Dritter Fall desselben Musters in dieser Datei, siehe MOBIL.md. */
@media(max-width:640px){
  .mf-cr .mk,.mf-cr>b{display:none}
}

/* Die Kuerzungs-Spans im Kopf-Knopf sind Flex-Kinder und bekamen dadurch den `gap:9px`
   des Knopfes ab: auf dem Desktop stand „Auf  WhatsApp  fragen" mit doppelter Luecke
   (im Bild gefunden, 19.08.2026 — keine Messung haette das gemeldet).
   `display:contents` loest die Spans als Kasten auf, der Text bleibt ein Textfluss.
   Schmal ueberschreibt die Handy-Regel das mit `display:none`; sie steht weiter oben,
   ist aber gleich spezifisch, deshalb hier die Breiten-Abfrage als Gegenstueck. */
@media(min-width:641px){
  .nv-btn-lang{display:contents}
}

/* ===== SZENEN-ANFANG — erzeugt von port-szenen.mjs, nicht von Hand editieren ===== */
/* Quelle je Szene: quelle/arbeit-szene-<nr>.html. Aenderungen dort machen und
   `node port-szenen.mjs` laufen lassen — nicht hier. */
/* ---------- Szene 01 ---------- */
/* ============================================================================
   Szene 01 — nach der Referenz farisschmidt.de neu gebaut.

   BEFUND 1 (aus dem Bildvergleich): in KEINER Referenzgrafik steht ein ganzer
   Satz. Dort stehen graue Platzhalterbalken und hoechstens EIN Wort oder EINE
   Zahl („ANGEBOT", „+75%", „Auftragsstatus"). Die Aussage traegt die Ueberschrift
   UEBER dem Bild, das Bild traegt Form und Material. Meine frueheren Fassungen
   waren Infografiken mit Saetzen darin — deshalb wirkten sie vorlagenhaft.
   Also: ein grosses Objekt, Inhalt aus Balken, genau ein Text.

   BEFUND 2 (gemessen, nicht geschaetzt): die Grafik sitzt in der echten Sektion
   in .b-vis — 643x488 (4:3) bei 1440, 550x433 bei 1180, 329x436 (3:4) auf dem
   Handy. Ich hatte in 16:9 entworfen; daher stand das Objekt in zu viel Luft.
   Die Buehne hier hat jetzt das ECHTE Format und die echte Breite, und alles
   darin ist in Container-Einheiten (cqw/cqh) bemasst, damit dieselbe Grafik in
   allen drei Slotbreiten gleich sitzt.

   BEFUND 3: angeschnitten werden in der Referenz OBJEKTE, nie Text. Das
   angeschnittene Textkaertchen am Rand ist ersatzlos raus.
   ========================================================================= */
/* ⚠️ Ohne border-box ist jedes Objekt um sein eigenes Padding BREITER als die
   angegebene Breite. Gemessen: .feld stand auf 86cqw und mass 356 statt 316 px und
   ragte dadurch auf dem Handy aus der Buehne. Die Breiten unten sind die tatsaechlich
   gewollten Aussenmasse. */
/* ---- Buehne im gemessenen Format des echten Slots (643x488). container-type:size
   macht cqw/cqh verfuegbar, damit die Grafik bei 550 und 329 px mitwaechst. */
.szene{container-type:size;position:relative;width:100%;margin:0;
  aspect-ratio:643/488;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%, #FFFFFF 0%, #F5F8FF 46%, #E9F0FF 100%);
  border:1px solid var(--blue-line)}
.szene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(47,107,255,.11) 1.3px, transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(66% 62% at 64% 50%, transparent 34%, #000 82%);
  mask-image:radial-gradient(66% 62% at 64% 50%, transparent 34%, #000 82%)}
/* ============================ Material ============================
   Aus der Referenz: Flaechen sind nie flaches Weiss — Verlauf, helle Oberkante,
   weit gestreuter Schatten.
   =============================================================== */
.szene .obj{background:linear-gradient(168deg,#FFFFFF 0%,#FAFCFF 55%,#F1F5FF 100%);
  border:1px solid rgba(47,107,255,.16);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 30px 54px -26px rgba(11,18,32,.42),
             inset 0 1px 0 rgba(255,255,255,.95)}
.szene .bar{display:block;height:1.3cqw;min-height:6px;border-radius:5px;background:#E7EDF8}
.szene .bar.d{background:#DAE3F3}
/* ---- Die Bahnen. Fein, nicht fett: der viewBox-Massstab ist 6,4 — eine
   stroke-width von 1,5 waere auf dem Schirm ein 10-px-Balken gewesen. */
.szene .spuren{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.szene .spuren path{fill:none;stroke:rgba(47,107,255,.5);stroke-width:.26;
  stroke-linecap:round;stroke-dasharray:.3 1.5}
/* ---- Die Kanaele. Nur Icon — eine Beschriftung waere wieder Infografik. */
.szene .kanal{position:absolute;z-index:3;width:8cqw;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:var(--blue);
  background:linear-gradient(165deg,#FFFFFF,#F2F6FF);
  box-shadow:0 1px 2px rgba(11,18,32,.06),0 14px 26px -14px rgba(11,18,32,.44),
             inset 0 1px 0 #fff}
.szene .kanal svg{width:46%;height:46%}
.szene .k1{left:10%;top:18%}
.szene .k2{left:4%;top:46%}
.szene .k3{left:12%;top:74%}
/* ---- Das Objekt: eine Terminkarte. Sie IST das Ergebnis — deshalb muss
   niemand darunterschreiben, dass es zum Termin geht. */
.szene .termin{position:absolute;z-index:4;left:66%;top:50%;transform:translate(-50%,-50%);
  width:49.8cqw;border-radius:3.2cqw;padding:3.4cqw}
.szene .tk{display:flex;align-items:center;gap:1.8cqw}
/* Die Wortmarke, wie die Seite sie auf hellem Grund selbst baut (landing-v4.css:85-88):
   vier Quadrate, drei in der Textfarbe, eines in Markenblau, Rundung 30 % der Kante —
   OHNE den schwarzen Kasten des Favicons. Der gehoert auf dunklen Grund. */
.szene .mk{width:5.2cqw;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%;flex:0 0 auto}
.szene .mk i{background:var(--ink);border-radius:30%}
.szene .mk i.hl{background:var(--blue)}
.szene .tk .bar{flex:1 1 auto;max-width:12cqw}
.szene .tage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1cqw;margin-top:3cqw}
.szene .tage span{height:5.4cqw;border-radius:1.4cqw;background:#EDF1FA}
.szene .tage span.an{background:linear-gradient(160deg,#D9E5FF,#C2D6FF)}
/* Der gebuchte Platz — einziger Text im ganzen Bild. */
.szene .slot{margin-top:1.7cqw;display:flex;align-items:center;gap:1.5cqw;
  border-radius:2.1cqw;padding:2.1cqw 2.4cqw;color:#fff;
  background:linear-gradient(150deg,#5A8CFF 0%,var(--blue) 52%,var(--blue-deep) 100%);
  box-shadow:0 12px 24px -10px rgba(47,107,255,.75), inset 0 1px 0 rgba(255,255,255,.35)}
.szene .slot svg{width:2.9cqw;min-width:13px;aspect-ratio:1;flex:0 0 auto}
.szene .slot b{font-size:2.5cqw;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.szene .tb{margin-top:2.8cqw;display:flex;flex-direction:column;gap:1.5cqw}
.szene .tb .bar:nth-child(1){width:82%}
.szene .tb .bar:nth-child(2){width:58%}
/* ---- Bestaetigt. Abzeichen mit Schein, wie in der Referenz. */
.szene .haken{position:absolute;z-index:5;right:-3cqw;bottom:-3cqw;width:8.4cqw;aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;color:#12A150;
  background:#F4FBF7;border:1px solid rgba(14,159,90,.30);
  box-shadow:0 0 0 .55cqw var(--card),0 1px 2px rgba(11,18,32,.04),
             0 14px 26px -14px rgba(11,18,32,.30)}
.szene .haken svg{width:48%;height:48%}
/* ============================ Bewegung ============================
   Auf den Bahnen laufen Punkte zur Karte, dann setzt das Abzeichen auf.
   Nur transform/opacity und stroke-dashoffset.
   =============================================================== */
@keyframes sz01-fliessen{to{stroke-dashoffset:-9}}
.szene .spuren path{animation:sz01-fliessen 2.6s linear infinite}
.szene .spuren path:nth-of-type(2){animation-duration:3.1s}
.szene .spuren path:nth-of-type(3){animation-duration:2.85s}
@keyframes sz01-auf{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
.szene .kanal{animation:sz01-auf .5s ease-out both}
.szene .k1{animation-delay:.15s}
.szene .k2{animation-delay:.35s}
.szene .k3{animation-delay:.55s}
/* ⚠️ Eigene Keyframes: die Karte steht auf translate(-50%,-50%). Ein Keyframe auf
   `transform:none` wuerde genau diese Zentrierung mitloeschen. */
@keyframes sz01-auf-mitte{
  from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}
  to  {opacity:1;transform:translate(-50%,-50%)}}
.szene .termin{animation:sz01-auf-mitte .6s cubic-bezier(.2,.7,.3,1) .3s both}
@keyframes sz01-setzen{0%{opacity:0;transform:scale(.5)} 65%{opacity:1;transform:scale(1.12)} 100%{opacity:1;transform:scale(1)}}
.szene .haken{animation:sz01-setzen .45s cubic-bezier(.3,0,.2,1) 1.1s both}
@media (prefers-reduced-motion: reduce){.szene .spuren path,.szene .kanal,.szene .haken,.szene .termin{animation:none}.szene .kanal,.szene .haken,.szene .termin{opacity:1}}
/* ---- Handy: gemessenes Slotformat 329x436 (3:4). Die Bahnen wuerden darin
   verzerren (preserveAspectRatio="none"), also raus; die Kanaele reihen sich
   ueber der Karte auf. Groessen bleiben in cqw und wachsen mit. */
@media(max-width:720px){.szene{aspect-ratio:329/436}.szene .spuren{display:none}.szene .termin{left:50%;top:58%;width:87cqw;border-radius:5.5cqw;padding:5.6cqw}.szene .mk{width:9cqw}.szene .tk{gap:2.8cqw}.szene .tk .bar{max-width:21cqw}.szene .bar{height:2.2cqw}.szene .tage{gap:1.8cqw;margin-top:5cqw}.szene .tage span{height:9cqw;border-radius:2.4cqw}.szene .slot{margin-top:3cqw;border-radius:3.6cqw;padding:3.6cqw 4cqw;gap:2.6cqw}.szene .slot svg{width:5cqw}.szene .slot b{font-size:4.3cqw}.szene .tb{margin-top:4.8cqw;gap:2.6cqw}.szene .kanal{top:9%;width:14cqw}.szene .k1{left:18%}.szene .k2{left:43%}.szene .k3{left:auto;right:18%}.szene .haken{right:-5cqw;bottom:-5cqw;width:15cqw;box-shadow:0 0 0 1.4cqw #FCFDFF,0 14px 26px -8px rgba(14,159,90,.7)}}
/* ---------- Szene 02 ---------- */
/* ============================================================================
   Szene 02 — dieselben drei Befunde wie Szene 01 (dort ausfuehrlich kommentiert):
   nur Balken statt Saetze, echtes Slotformat statt 16:9, angeschnitten werden
   Objekte statt Text.

   Raus: die Rechnungszeilen im Klartext („Splitt 0/32, 12 t · 428,00"), die
   Uhrzeit-Chips und das Kaertchen „Von Hand getippt" am Rand.
   Rein: ein Dokument, das ueber die UNTERE Kante laeuft, mit den Vorstufen
   dahinter — der Vorgang steckt in den Blaettern, das Ergebnis im Abzeichen.

   Der Verlaufsrahmen ums vordere Blatt ist nach dem ersten Bau wieder RAUS —
   Begruendung unten an .blatt.b3.
   ========================================================================= */
/* ⚠️ Ohne border-box ist jedes Objekt um sein eigenes Padding BREITER als die
   angegebene Breite. Gemessen: .feld stand auf 86cqw und mass 356 statt 316 px und
   ragte dadurch auf dem Handy aus der Buehne. Die Breiten unten sind die tatsaechlich
   gewollten Aussenmasse. */
/* ---- Buehne im gemessenen Slotformat, gleiche Handschrift wie Szene 01. */
.szene{container-type:size;position:relative;width:100%;margin:0;
  aspect-ratio:643/488;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%, #FFFFFF 0%, #F5F8FF 46%, #E9F0FF 100%);
  border:1px solid var(--blue-line)}
.szene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(47,107,255,.11) 1.3px, transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(58% 70% at 50% 66%, transparent 40%, #000 86%);
  mask-image:radial-gradient(58% 70% at 50% 66%, transparent 40%, #000 86%)}
.szene .bar{display:block;height:1.3cqw;min-height:6px;border-radius:5px;background:#E7EDF8}
.szene .bar.d{background:#DAE3F3}
/* ---- Das Dokument. Laeuft bewusst ueber die untere Kante hinaus.
   Hoehe und Ueberstand sind so gewaehlt, dass oben nur ~20 % Luft bleibt —
   mit 78cqh/-19% stand die obere Haelfte der Buehne leer. */
.szene .dok{position:absolute;z-index:2;left:50%;bottom:-12%;transform:translateX(-50%);
  width:47cqw;height:92cqh}
.szene .blatt{position:absolute;inset:0;border-radius:3.4cqw;
  background:linear-gradient(168deg,#FFFFFF 0%,#FAFCFF 55%,#F1F5FF 100%);
  border:1px solid rgba(47,107,255,.14);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 30px 54px -26px rgba(11,18,32,.42),
             inset 0 1px 0 rgba(255,255,255,.95)}
/* Die Vorstufen. Ohne Inhalt — sie zeigen nur, dass es eine Kette gibt. */
.szene .blatt.b1{transform:rotateZ(-6.5deg) translate(-12%,-3.5%) scale(.95);opacity:.62}
.szene .blatt.b2{transform:rotateZ(-3.2deg) translate(-5.5%,-1.8%) scale(.98);opacity:.82}
/* ⚠️ KEIN farbiger Rahmen ums vordere Blatt. Er las sich als Auswahl-Markierung
   („dieses Element ist angeklickt"), nicht als Material — und ein Akzentstreifen
   an einer Kante ist ohnehin genau das KI-Klischee aus §8. Die Tiefe kommt aus
   Verlauf, heller Oberkante und Schatten, der Akzent aus dem gruenen Abzeichen. */
.szene .blatt.b3{z-index:3}
.szene .innen{height:100%;padding:3.6cqw 3.8cqw;display:flex;flex-direction:column}
.szene .dk{display:flex;align-items:center;gap:1.9cqw}
/* Die Wortmarke, wie die Seite sie auf hellem Grund selbst baut (landing-v4.css:85-88):
   vier Quadrate, drei in der Textfarbe, eines in Markenblau, Rundung 30 % der Kante —
   OHNE den schwarzen Kasten des Favicons. Der gehoert auf dunklen Grund. */
.szene .mk{width:5.4cqw;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%;flex:0 0 auto}
.szene .mk i{background:var(--ink);border-radius:30%}
.szene .mk i.hl{background:var(--blue)}
.szene .dk .bar{flex:1 1 auto;max-width:13cqw}
.szene .dz{margin-top:4cqw;display:flex;flex-direction:column;gap:2.4cqw}
.szene .z{display:flex;align-items:center;justify-content:space-between;gap:2.4cqw;
  padding-bottom:2.4cqw;border-bottom:1px solid #EAEFF9}
.szene .z .bar:first-child{flex:1 1 auto}
.szene .z .bar:last-child{width:6cqw;flex:0 0 auto}
.szene .z:nth-child(2) .bar:first-child{max-width:74%}
.szene .z:nth-child(3) .bar:first-child{max-width:56%}
.szene .z:nth-child(4) .bar:first-child{max-width:66%}
.szene .z:nth-child(5) .bar:first-child{max-width:80%}
.szene .z:nth-child(6) .bar:first-child{max-width:62%}
/* Die Summe. Einzige Zahl im Bild — die Referenz setzt genauso „+75%" als
   einzigen Wert in ihre Grafik. */
.szene .ds{margin-top:3.4cqw;display:flex;align-items:center;justify-content:space-between;gap:2.4cqw}
.szene .ds .bar{width:9cqw}
.szene .ds b{font-size:3.1cqw;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
/* ---- Bezahlt. Es sitzt IN der Kopfzeile, nicht frei positioniert: dadurch liegt
   es garantiert auf derselben Mittellinie wie die Wortmarke, statt dass ich einen
   Abstand von Hand nachrechne, der bei jeder Groessenaenderung wieder verrutscht.
   Der negative rechte Rand laesst es ueber die Blattkante ragen. */
.szene .bezahlt{z-index:6;margin-left:auto;margin-right:-7cqw;
  display:inline-flex;align-items:center;gap:1.3cqw;border-radius:999px;
  padding:1.8cqw 2.8cqw;font-size:2.4cqw;font-weight:700;white-space:nowrap;
  background:#F4FBF7;border:1px solid rgba(14,159,90,.30);color:#0B6B45;
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 14px 26px -14px rgba(11,18,32,.30)}
.szene .bezahlt svg{width:2.8cqw;min-width:13px;aspect-ratio:1;flex:0 0 auto}
/* ============================ Bewegung ============================
   Die Blaetter legen sich nacheinander, dann setzt das Abzeichen auf.
   =============================================================== */
@keyframes sz02-legen{
  from{opacity:0;transform:rotateZ(var(--rz)) translate(var(--tx),calc(var(--ty) - 30px)) scale(var(--sc))}
  to  {opacity:var(--op);transform:rotateZ(var(--rz)) translate(var(--tx),var(--ty)) scale(var(--sc))}}
.szene .blatt.b1{--rz:-6.5deg;--tx:-12%; --ty:-3.5%;--sc:.95;--op:.62;animation:sz02-legen .55s cubic-bezier(.2,.7,.3,1) .1s both}
.szene .blatt.b2{--rz:-3.2deg;--tx:-5.5%;--ty:-1.8%;--sc:.98;--op:.82;animation:sz02-legen .55s cubic-bezier(.2,.7,.3,1) .45s both}
.szene .blatt.b3{--rz:0deg;   --tx:0%;   --ty:0%;   --sc:1;  --op:1;  animation:sz02-legen .55s cubic-bezier(.2,.7,.3,1) .8s both}
@keyframes sz02-setzen{0%{opacity:0;transform:scale(.5)} 65%{opacity:1;transform:scale(1.12)} 100%{opacity:1;transform:scale(1)}}
.szene .bezahlt{animation:sz02-setzen .45s cubic-bezier(.3,0,.2,1) 1.35s both}
@media (prefers-reduced-motion: reduce){.szene .blatt.b1,.szene .blatt.b2,.szene .blatt.b3,.szene .bezahlt{animation:none}.szene .blatt.b1{opacity:.62}.szene .blatt.b2{opacity:.82}.szene .blatt.b3,.szene .bezahlt{opacity:1}}
/* ---- Handy: gemessenes Slotformat 329x436 (3:4). */
@media(max-width:720px){.szene{aspect-ratio:329/436}.szene .dok{width:74cqw;height:80cqh;bottom:-9%}.szene .blatt{border-radius:5.4cqw}.szene .innen{padding:5.6cqw 5.8cqw}.szene .bar{height:2.1cqw}.szene .mk{width:9.2cqw}.szene .dk{gap:2.8cqw}.szene .dk .bar{max-width:21cqw}.szene .dz{margin-top:6cqw;gap:3.8cqw}.szene .z{gap:3.8cqw;padding-bottom:3.8cqw}.szene .z .bar:last-child{width:9cqw}.szene .ds{margin-top:5.4cqw}.szene .ds .bar{width:14cqw}.szene .ds b{font-size:4.9cqw}.szene .bezahlt{margin-right:-9cqw;font-size:3.9cqw;padding:2.8cqw 4.4cqw;gap:2cqw}.szene .bezahlt svg{width:4.4cqw}}
/* ---------- Szene 03 ---------- */
/* ============================================================================
   Szene 03 — dieselben drei Regeln wie 01 und 02 (dort ausfuehrlich kommentiert):
   Balken statt Saetze · echtes Slotformat (643x488 / 329x436), alles in cqw/cqh ·
   angeschnitten werden Objekte, nie Text.

   Eigener Objekttyp, damit sich die fuenf Szenen nicht wiederholen:
     01 hochkante Terminkarte mit Kanaelen und Bahnen
     02 hochkanter Belegstapel, unten angeschnitten
     03 QUERES Auswertungsfeld + kleines Handy davor   ← hier
   Zwei Objekte, weil die Aussage zwei Seiten hat: das Team stempelt am Handy,
   du siehst die Auswertung.

   ⚠️ Die eine Zahl im Bild ist bewusst eine BESCHREIBENDE Groesse (Stunden im
   Monat), keine Leistungsbehauptung. Ein „+75 %" wie in der Referenz waere hier
   eine Zahl, die wir nicht belegen koennen — und unbelegte Zahlen wandern erfah-
   rungsgemaess in Angebote und Slides weiter.
   ========================================================================= */
/* ⚠️ Ohne border-box ist jedes Objekt um sein eigenes Padding BREITER als die
   angegebene Breite. Gemessen: .feld stand auf 86cqw und mass 356 statt 316 px und
   ragte dadurch auf dem Handy aus der Buehne. Die Breiten unten sind die tatsaechlich
   gewollten Aussenmasse. */
.szene{container-type:size;position:relative;width:100%;margin:0;
  aspect-ratio:643/488;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%, #FFFFFF 0%, #F5F8FF 46%, #E9F0FF 100%);
  border:1px solid var(--blue-line)}
.szene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(47,107,255,.11) 1.3px, transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(66% 66% at 52% 48%, transparent 36%, #000 84%);
  mask-image:radial-gradient(66% 66% at 52% 48%, transparent 36%, #000 84%)}
.szene .bar{display:block;height:1.3cqw;min-height:6px;border-radius:5px;background:#E7EDF8}
.szene .bar.d{background:#DAE3F3}
/* Die Wortmarke, wie die Seite sie auf hellem Grund selbst baut (landing-v4.css:85-88):
   vier Quadrate, drei in der Textfarbe, eines in Markenblau, Rundung 30 % der Kante —
   OHNE den schwarzen Kasten des Favicons. Der gehoert auf dunklen Grund. */
.szene .mk{width:5.2cqw;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%;flex:0 0 auto}
.szene .mk i{background:var(--ink);border-radius:30%}
.szene .mk i.hl{background:var(--blue)}
/* ---- Das Auswertungsfeld. Quer, damit die Silhouette sich von 01 und 02 unterscheidet. */
.szene .feld{position:absolute;z-index:2;left:53%;top:44%;transform:translate(-50%,-50%);
  width:79cqw;border-radius:3.2cqw;padding:3.4cqw 3.6cqw;
  background:linear-gradient(168deg,#FFFFFF 0%,#FAFCFF 55%,#F1F5FF 100%);
  border:1px solid rgba(47,107,255,.16);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 34px 58px -28px rgba(11,18,32,.44),
             inset 0 1px 0 rgba(255,255,255,.95)}
.szene .fk{display:flex;align-items:center;gap:1.8cqw}
.szene .fk .bar{flex:1 1 auto;max-width:13cqw}
/* Die eine Zahl. Beschreibend, keine Behauptung. */
.szene .fw{margin-left:auto;font-size:3.4cqw;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
/* ---- Die Saeulen. Grau, eine in Markenblau — der Blick hat ein Ziel. */
.szene .saeulen{position:relative;margin-top:3.6cqw;display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));gap:2cqw;align-items:end;height:22cqw}
.szene .saeulen i{display:block;border-radius:1.2cqw;background:#E7EDF8}
.szene .saeulen i:nth-child(1){height:46%}
.szene .saeulen i:nth-child(2){height:62%}
.szene .saeulen i:nth-child(3){height:38%}
.szene .saeulen i:nth-child(4){height:72%}
.szene .saeulen i:nth-child(5){height:55%}
.szene .saeulen i:nth-child(6){height:81%}
.szene .saeulen i:nth-child(7){height:100%;
  background:linear-gradient(180deg,#5A8CFF 0%,var(--blue) 55%,var(--blue-deep) 100%);
  box-shadow:0 12px 22px -8px rgba(47,107,255,.7)}
/* Die Soll-Linie liegt UEBER den grauen und UNTER der blauen Saeule. */
.szene .soll{position:absolute;left:0;right:0;top:26%;height:0;
  border-top:.35cqw dashed rgba(47,107,255,.4)}
.szene .fb{margin-top:3cqw;display:flex;gap:2cqw}
.szene .fb .bar:nth-child(1){width:34%}
.szene .fb .bar:nth-child(2){width:22%}
/* ---- Das Handy davor. Zweites Objekt: dort wird gestempelt. */
/* Kleiner und weiter aussen als im ersten Bau: mit 20cqw an left:11% verdeckte es
   das halbe Diagramm und las sich als weisses Rechteck, nicht als Geraet. Jetzt
   ueberlappt es nur die untere linke Ecke des Feldes. */
.szene .handy{position:absolute;z-index:4;left:5%;bottom:8%;width:15cqw;aspect-ratio:1/1.95;
  border-radius:2.6cqw;padding:2.4cqw 1.3cqw 1.3cqw;transform:rotate(-7deg);
  background:linear-gradient(165deg,#FFFFFF,#EEF3FF);
  border:1px solid rgba(47,107,255,.18);
  box-shadow:0 1px 2px rgba(11,18,32,.06),0 26px 44px -20px rgba(11,18,32,.5),
             inset 0 1px 0 #fff}
/* Der Hoerer macht aus dem Rechteck ein Telefon — ohne ihn erkennt es niemand. */
.szene .hoerer{position:absolute;top:.95cqw;left:50%;transform:translateX(-50%);
  width:30%;height:.5cqw;border-radius:999px;background:#C4D2EA}
.szene .hs{height:100%;border-radius:1.9cqw;background:#FBFCFF;padding:1.3cqw;
  display:flex;flex-direction:column;gap:1cqw;box-shadow:inset 0 0 0 1px #EEF2FB}
.szene .hs .bar{height:1cqw;min-height:0}
.szene .hs .bar:nth-child(1){width:64%}
.szene .hs .bar:nth-child(2){width:44%}
.szene .hs .knopf{margin-top:auto;height:4.4cqw;border-radius:1.4cqw;
  background:linear-gradient(150deg,#5A8CFF,var(--blue-deep));
  box-shadow:0 8px 16px -6px rgba(47,107,255,.7)}
/* ============================ Bewegung ============================
   Die Saeulen wachsen der Reihe nach aus dem Boden, dann kippt das Handy herein.
   transform-origin unten, damit sie wirklich wachsen und nicht schweben.
   =============================================================== */
@keyframes sz03-wachsen{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.szene .saeulen i{transform-origin:bottom;animation:sz03-wachsen .5s cubic-bezier(.2,.7,.3,1) both}
.szene .saeulen i:nth-child(1){animation-delay:.10s}
.szene .saeulen i:nth-child(2){animation-delay:.19s}
.szene .saeulen i:nth-child(3){animation-delay:.28s}
.szene .saeulen i:nth-child(4){animation-delay:.37s}
.szene .saeulen i:nth-child(5){animation-delay:.46s}
.szene .saeulen i:nth-child(6){animation-delay:.55s}
.szene .saeulen i:nth-child(7){animation-delay:.66s}
@keyframes sz03-auf-mitte{
  from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}
  to  {opacity:1;transform:translate(-50%,-50%)}}
.szene .feld{animation:sz03-auf-mitte .55s cubic-bezier(.2,.7,.3,1) both}
/* ⚠️ Eigene Keyframes mit der Drehung darin: ein Keyframe auf `transform:none`
   wuerde das rotate(-7deg) mitloeschen. */
@keyframes sz03-kippen{
  from{opacity:0;transform:rotate(-7deg) translateY(12px)}
  to  {opacity:1;transform:rotate(-7deg) translateY(0)}}
.szene .handy{animation:sz03-kippen .5s cubic-bezier(.2,.7,.3,1) 1.0s both}
@media (prefers-reduced-motion: reduce){.szene .saeulen i,.szene .feld,.szene .handy{animation:none}.szene .saeulen i{transform:none}.szene .feld,.szene .handy{opacity:1}}
/* ---- Handy-Slot 329x436 (3:4): das Feld wird schmaler und hoeher, das kleine
   Handy rutscht nach unten, wo es nicht auf den Saeulen liegt. */
@media(max-width:720px){.szene{aspect-ratio:329/436}.szene .feld{left:52%;top:40%;width:92cqw;border-radius:5cqw;padding:5.4cqw 5.6cqw}.szene .bar{height:2.1cqw}.szene .mk{width:9cqw}.szene .fk{gap:2.8cqw}.szene .fk .bar{max-width:20cqw}.szene .fw{font-size:5.6cqw}.szene .saeulen{margin-top:5.6cqw;gap:2.6cqw;height:34cqw}.szene .saeulen i{border-radius:1.8cqw}.szene .soll{border-top-width:.6cqw}.szene .fb{margin-top:4.6cqw;gap:3cqw}.szene .handy{left:3%;bottom:4%;width:26cqw;border-radius:4.4cqw;padding:4cqw 2.2cqw 2.2cqw}.szene .hoerer{top:1.6cqw;height:.85cqw}.szene .hs{border-radius:3.2cqw;padding:2.2cqw;gap:1.7cqw}.szene .hs .bar{height:1.7cqw}.szene .hs .knopf{height:7.4cqw;border-radius:2.4cqw}}
/* ---------- Szene 04 ---------- */
/* ============================================================================
   Szene 04 — dieselben drei Regeln wie 01–03 (in 01 ausfuehrlich kommentiert):
   Balken statt Saetze · echtes Slotformat, alles in cqw/cqh · angeschnitten
   werden Objekte, nie Text.

   Eigener Objekttyp:
     01 hochkante Terminkarte + Kanaele + Bahnen
     02 hochkanter Belegstapel, unten angeschnitten
     03 queres Auswertungsfeld + kleines Handy
     04 KUNDENAKTE: runder Kopf statt eckigem, darunter der Verlauf als Reihe
        von Eintraegen an einem Strang                                  ← hier

   Erste Fassung hatte GAR keinen Text im Bild — sie war dadurch nichtssagend
   (Kundenbefund). Jetzt zwei Stellen, die den Vorgang lesbar machen: „7 Tage"
   an der liegengebliebenen Zeile und „Nachgefasst" als ausgehende Nachricht.
   Der Wecker aus der ersten Fassung ist raus: ein Glockensymbol sagt nur
   „Achtung", die Pille sagt, was passiert ist.
   ========================================================================= */
/* ⚠️ Ohne border-box ist jedes Objekt um sein eigenes Padding BREITER als die
   angegebene Breite. Gemessen: .feld stand auf 86cqw und mass 356 statt 316 px und
   ragte dadurch auf dem Handy aus der Buehne. Die Breiten unten sind die tatsaechlich
   gewollten Aussenmasse. */
.szene{container-type:size;position:relative;width:100%;margin:0;
  aspect-ratio:643/488;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%, #FFFFFF 0%, #F5F8FF 46%, #E9F0FF 100%);
  border:1px solid var(--blue-line)}
.szene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(47,107,255,.11) 1.3px, transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(60% 66% at 50% 50%, transparent 38%, #000 84%);
  mask-image:radial-gradient(60% 66% at 50% 50%, transparent 38%, #000 84%)}
.szene .bar{display:block;height:1.3cqw;min-height:6px;border-radius:5px;background:#E7EDF8}
.szene .bar.d{background:#DAE3F3}
/* ---- Die Akte. */
.szene .akte{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68cqw;border-radius:3.4cqw;padding:3.9cqw 4.1cqw;
  background:linear-gradient(168deg,#FFFFFF 0%,#FAFCFF 55%,#F1F5FF 100%);
  border:1px solid rgba(47,107,255,.16);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 34px 58px -28px rgba(11,18,32,.44),
             inset 0 1px 0 rgba(255,255,255,.95)}
/* Der Kopf ist RUND — das unterscheidet die Silhouette von den drei eckigen
   Marken-Quadraten der Szenen 01–03 auf den ersten Blick. */
.szene .ak{display:flex;align-items:center;gap:2.2cqw}
.szene .ava{width:8.4cqw;aspect-ratio:1;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;color:#7E92B4;
  background:linear-gradient(160deg,#DCE6FA,#BFCFEA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -6px rgba(11,18,32,.35)}
.szene .ava svg{width:50%;height:50%}
.szene .ak .bar:nth-of-type(1){width:44%}
.szene .ak .bar:nth-of-type(2){width:28%}
.szene .akn{display:flex;flex-direction:column;gap:1.3cqw;flex:1 1 auto}
/* ---- Der Verlauf: Eintraege untereinander.
   ⚠️ Ein senkrechter Strang hinter den Kacheln war gebaut und ist wieder RAUS: die
   getoente Flaeche des offenen Eintrags liegt darueber und zerschnitt ihn genau in
   der Mitte. Die Kachelreihe traegt den Rhythmus auch ohne — und ohne Strang ist es
   eine Liste statt eines Zeitstrahls, also ein Stueck weiter weg vom Diagramm. */
.szene .verlauf{position:relative;margin-top:3.6cqw;display:flex;flex-direction:column;gap:2.6cqw}
.szene .e{position:relative;display:flex;align-items:center;gap:2.2cqw}
.szene .e .sym{width:5.2cqw;aspect-ratio:1;border-radius:1.6cqw;flex:0 0 auto;display:grid;
  place-items:center;color:var(--blue);background:#E8EFFF;
  box-shadow:0 0 0 .55cqw #FBFCFF}
.szene .e .sym svg{width:52%;height:52%}
.szene .e .zeilen{display:flex;flex-direction:column;gap:1.1cqw;flex:1 1 auto}
.szene .e .zeilen .bar:nth-child(1){width:78%}
.szene .e .zeilen .bar:nth-child(2){width:46%}
.szene .e:nth-child(3) .zeilen .bar:nth-child(1){width:64%}
.szene .e:nth-child(3) .zeilen .bar:nth-child(2){width:38%}
/* Der offene Eintrag: getoente Flaeche statt farbigem Kantenstreifen (§8). */
.szene .e.offen{background:#FFF7E8;border-radius:2.2cqw;padding:1.8cqw;margin:-1.8cqw}
.szene .e.offen .sym{color:#9A6B12;background:#FBEBCB;box-shadow:0 0 0 .55cqw #FFF7E8}
/* Die Liegezeit. Ohne sie war die getoente Zeile nur „irgendwas ist anders" — mit ihr
   steht da: dieses Angebot wartet seit sieben Tagen auf Antwort. */
.szene .e.offen .tage{margin-left:auto;flex:0 0 auto;font-size:2.1cqw;font-weight:700;
  color:#8A5E0E;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* ---- Die ausgehende Nachricht. Sie ersetzt den Wecker aus dem ersten Bau: ein
   Glockensymbol sagt nur „Achtung", diese Pille sagt, was tatsaechlich passiert
   ist — das System hat von allein nachgefasst. Genau das ist die Aussage der
   Ueberschrift, und ohne sie blieb das Bild nichtssagend. */
.szene .antwort{position:absolute;z-index:5;right:-6cqw;bottom:-6.5cqw;
  display:inline-flex;align-items:center;gap:1.4cqw;border-radius:999px;
  padding:2cqw 3cqw;font-size:2.4cqw;font-weight:700;white-space:nowrap;
  background:#F3F7FF;border:1px solid rgba(47,107,255,.28);color:var(--blue-deep);
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 14px 26px -14px rgba(11,18,32,.30)}
.szene .antwort svg{width:2.9cqw;min-width:13px;aspect-ratio:1;flex:0 0 auto}
/* ============================ Bewegung ============================
   Die Eintraege reihen sich von oben nach unten auf, dann meldet sich der
   Wecker: er setzt auf und wackelt EINMAL. Kein Dauerzappeln.
   =============================================================== */
@keyframes sz04-auf-mitte{
  from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}
  to  {opacity:1;transform:translate(-50%,-50%)}}
.szene .akte{animation:sz04-auf-mitte .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes sz04-reihen{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
.szene .e{animation:sz04-reihen .45s ease-out both}
.szene .e:nth-child(1){animation-delay:.45s}
.szene .e:nth-child(2){animation-delay:.62s}
.szene .e:nth-child(3){animation-delay:.79s}
@keyframes sz04-melden{
  0%  {opacity:0;transform:scale(.6)}
  65% {opacity:1;transform:scale(1.09)}
  100%{opacity:1;transform:scale(1)}}
.szene .antwort{animation:sz04-melden .5s cubic-bezier(.3,0,.2,1) 1.15s both}
@media (prefers-reduced-motion: reduce){.szene .akte,.szene .e,.szene .antwort{animation:none}.szene .akte,.szene .e,.szene .antwort{opacity:1}}
/* ---- Handy-Slot 329x436 (3:4). */
@media(max-width:720px){.szene{aspect-ratio:329/436}.szene .akte{width:88cqw;border-radius:5.4cqw;padding:5.6cqw 5.8cqw}.szene .bar{height:2.1cqw}.szene .ava{width:13cqw}.szene .ak{gap:3.4cqw}.szene .akn{gap:2.1cqw}.szene .verlauf{margin-top:5.6cqw;gap:4.2cqw}.szene .e{gap:3.4cqw}.szene .e .sym{width:8cqw;border-radius:2.5cqw;box-shadow:0 0 0 .9cqw #FBFCFF}.szene .e .zeilen{gap:1.8cqw}.szene .e.offen{border-radius:3.4cqw;padding:2.8cqw;margin:-2.8cqw}.szene .e.offen .sym{box-shadow:0 0 0 .9cqw #FFF7E8}.szene .e.offen .tage{font-size:3.4cqw}.szene .antwort{right:-4cqw;bottom:-5cqw;font-size:3.8cqw;padding:3cqw 4.4cqw;gap:2.2cqw}.szene .antwort svg{width:4.4cqw}}
/* ---------- Szene 05 ---------- */
/* ============================================================================
   Szene 05 — dieselben drei Regeln wie 01–04 (in 01 ausfuehrlich kommentiert):
   Balken und Symbole statt Saetze · echtes Slotformat, alles in cqw/cqh ·
   ueber die Kante ragen Objekte, nie Text.

   Eigener Objekttyp — und diesmal bewusst OHNE die grosse Traegerflaeche, die
   01 bis 04 alle haben:
     01 hochkante Terminkarte + Kanaele + Bahnen
     02 hochkanter Belegstapel, unten angeschnitten
     03 queres Auswertungsfeld + kleines Handy
     04 Kundenakte mit rundem Kopf
     05 RASTER aus Bausteinen, freistehend, mit einer leeren Stelle    ← hier

   Das Bild ist die Aussage woertlich: acht Module stehen schon, in der Mitte ist
   eine Stelle frei, und der Baustein mit unserer Wortmarke setzt sich hinein.
   „Dein Ablauf wird ein Baustein neben allen anderen." Kein Text noetig.
   ========================================================================= */
.szene{container-type:size;position:relative;width:100%;margin:0;
  aspect-ratio:643/488;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%, #FFFFFF 0%, #F5F8FF 46%, #E9F0FF 100%);
  border:1px solid var(--blue-line)}
.szene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(47,107,255,.11) 1.3px, transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(56% 62% at 50% 48%, transparent 44%, #000 88%);
  mask-image:radial-gradient(56% 62% at 50% 48%, transparent 44%, #000 88%)}
/* ---- Das Raster. Freistehend, ohne Traegerflaeche — das ist die Silhouette,
   die 05 von den vier anderen Szenen unterscheidet. */
.szene .raster{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:53cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.2cqw}
.szene .kachel{aspect-ratio:1;border-radius:3.2cqw;display:grid;place-items:center;color:#93A6C4;
  background:linear-gradient(168deg,#FFFFFF 0%,#F8FAFF 55%,#EFF4FF 100%);
  border:1px solid rgba(47,107,255,.14);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 16px 30px -18px rgba(11,18,32,.4),
             inset 0 1px 0 rgba(255,255,255,.95)}
.szene .kachel svg{width:38%;height:38%}
/* Die freie Stelle. Gestrichelt, transparent — sie ist eine Luecke, kein Objekt. */
.szene .luecke{aspect-ratio:1;border-radius:3.2cqw;
  border:.4cqw dashed rgba(47,107,255,.34);background:rgba(47,107,255,.05)}
/* ---- Der eigene Baustein. Er liegt ueber der Luecke, leicht versetzt und
   angehoben — dadurch ist zu sehen, dass er gerade eingesetzt wird, und die
   Luecke bleibt darunter sichtbar. */
/* ⚠️ Groesse und Versatz sind gerechnet, nicht geschaetzt: eine Zelle misst
   (53 - 2*3,2) / 3 = 15,53cqw. Der erste Bau stand auf 20,6cqw und verdeckte die
   gestrichelte Luecke vollstaendig — damit war die Aussage weg. Jetzt knapp
   Zellengroesse und so versetzt, dass die Luecke unten rechts sichtbar bleibt. */
.szene .eigen{position:absolute;left:50%;top:50%;z-index:3;width:16.4cqw;aspect-ratio:1;
  border-radius:3.2cqw;display:grid;place-items:center;color:#fff;
  transform:translate(-64%,-68%) rotate(-5deg);
  background:linear-gradient(150deg,#5A8CFF 0%,var(--blue) 52%,var(--blue-deep) 100%);
  box-shadow:0 24px 40px -14px rgba(47,107,255,.7),0 8px 14px -8px rgba(11,18,32,.4),
             inset 0 1px 0 rgba(255,255,255,.4)}
/* Im eigenen Baustein steht die Wortmarke — er ist das Modul, das WIR bauen.
   Auf Blau: drei Quadrate gedaempft weiss, das vierte voll weiss, damit die
   Betonung dieselbe bleibt wie im blauen Quadrat auf hellem Grund. */
.szene .eigen .mk{width:42%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%}
.szene .eigen .mk i{background:rgba(255,255,255,.62);border-radius:30%}
.szene .eigen .mk i.hl{background:#fff}
/* ============================ Bewegung ============================
   Die bestehenden Kacheln setzen sich diagonal auf, dann kommt der eigene
   Baustein von oben und legt sich schraeg ueber die freie Stelle.
   =============================================================== */
@keyframes sz05-setzen{from{opacity:0;transform:translateY(9px) scale(.94)} to{opacity:1;transform:none}}
.szene .kachel,.szene .luecke{animation:sz05-setzen .45s cubic-bezier(.2,.7,.3,1) both}
/* Diagonale Welle: Verzoegerung nach Zeile+Spalte, nicht nach laufender Nummer —
   sonst laeuft es zeilenweise ab und wirkt wie eine Tabelle, die sich aufbaut. */
.szene .raster > :nth-child(1){animation-delay:.05s}
.szene .raster > :nth-child(2){animation-delay:.13s}
.szene .raster > :nth-child(4){animation-delay:.13s}
.szene .raster > :nth-child(3){animation-delay:.21s}
.szene .raster > :nth-child(5){animation-delay:.21s}
.szene .raster > :nth-child(7){animation-delay:.21s}
.szene .raster > :nth-child(6){animation-delay:.29s}
.szene .raster > :nth-child(8){animation-delay:.29s}
.szene .raster > :nth-child(9){animation-delay:.37s}
/* ⚠️ Eigene Keyframes mit Versatz UND Drehung darin: ein Keyframe auf
   `transform:none` wuerde beides mitloeschen und den Baustein in die Ecke werfen. */
@keyframes sz05-einsetzen{
  from{opacity:0;transform:translate(-64%,calc(-68% - 26px)) rotate(-13deg) scale(1.08)}
  to  {opacity:1;transform:translate(-64%,-68%) rotate(-5deg) scale(1)}}
.szene .eigen{animation:sz05-einsetzen .6s cubic-bezier(.25,.8,.35,1) .75s both}
@media (prefers-reduced-motion: reduce){.szene .kachel,.szene .luecke,.szene .eigen{animation:none;opacity:1}}
/* ---- Handy-Slot 329x436 (3:4). Das Raster bleibt 3x3, nur groesser im Rahmen. */
@media(max-width:720px){.szene{aspect-ratio:329/436}.szene .raster{width:80cqw;gap:4.8cqw}.szene .kachel,.szene .luecke{border-radius:5cqw}.szene .luecke{border-width:.7cqw}.szene .eigen{width:25cqw;border-radius:5cqw}}
/* ---------- Szene 06 ---------- */
/* ============================================================================
   Szene 06 — dieselben drei Regeln wie 01–05 (in 01 ausfuehrlich kommentiert):
   Balken und Symbole statt Saetze · echtes Slotformat, alles in cqw/cqh ·
   ueber die Kante ragen Objekte, nie Text.

   Eigener Objekttyp — sechster Umriss, mit keinem der fuenf zu verwechseln:
     01 hochkante Terminkarte + Kanaele + Bahnen
     02 hochkanter Belegstapel, unten angeschnitten
     03 queres Auswertungsfeld + kleines Handy
     04 Kundenakte mit rundem Kopf
     05 freistehendes Raster aus Bausteinen
     06 BROWSERFENSTER, links angeschnitten, mit zwei Zielkarten rechts   ← hier

   Die Kopfleiste mit den drei Punkten ist der Umriss: nur dieses Objekt sagt
   ohne ein einziges Wort „das ist eine Website". Angeschnitten wird links —
   02 schneidet unten, 05 gar nicht; so bleibt auch der Beschnitt unterscheidbar.

   Die Aussage ist der Ausgang, nicht das Aussehen. Eine schoene Seite koennte
   jeder Baukasten zeigen. Hier laeuft aus dem Absenden-Knopf ein Strang zu zwei
   Karten: Umschlag = die Anfrage liegt im Posteingang, Kalenderblatt mit
   markiertem Tag = der Termin steht drin. Deshalb ist das Fenster BEWUSST
   schmucklos (ein Motivblock, zwei Zeilen) und die beiden Zielkarten tragen die
   Farbe — das Auge landet am Ausgang, nicht auf der Gestaltung.
   ========================================================================= */
/* ⚠️ Ohne border-box ist jedes Objekt um sein eigenes Padding breiter als
   angegeben (in 04 gemessen: 356 statt 316 px). Die Masse unten sind Aussenmasse. */
.szene{container-type:size;position:relative;width:100%;margin:0;
  aspect-ratio:643/488;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%, #FFFFFF 0%, #F5F8FF 46%, #E9F0FF 100%);
  border:1px solid var(--blue-line)}
.szene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(color-mix(in srgb,var(--blue) 11%,transparent) 1.3px, transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(58% 64% at 46% 50%, transparent 40%, #000 86%);
  mask-image:radial-gradient(58% 64% at 46% 50%, transparent 40%, #000 86%)}
/* Der Balken ist in allen sechs Szenen dieselbe Grundform (jede Werkbank-Datei
   fuehrt ihn selbst, damit sie einzeln ansehbar bleibt).
   ⚠️ Er hat hier zuerst GEFEHLT — die Folge war kein Fehler, sondern ein leeres
   Bild: `<span class="bar">` ohne Regel ist 0 px hoch. Adresszeile, Textzeilen
   und die Zeilen in beiden Zielkarten waren unsichtbar, und die Szene sah aus
   wie ein Entwurf, dem der Inhalt fehlt. */
.szene .bar{display:block;height:1.3cqw;min-height:6px;border-radius:5px;background:#E7EDF8}
.szene .bar.d{background:#DAE3F3}
/* ---- Das Fenster. Links angeschnitten: die Seite hoert am Rand nicht auf,
   sie laeuft nur aus dem Bild. */
/* ⚠️ Alle Akzentfarben dieser Szene stehen als `color-mix` auf `var(--blue)`,
   nicht als festes `rgba(47,107,255,…)` wie in 01–05. Grund: diese Kachel ist
   die SECHSTE und damit `nth-child(even)` — das orange Kapitel. Dort biegt die
   Landing `--blue` auf `--orange` um; feste Blauwerte haetten das nicht
   mitgemacht, und im orangen Kapitel haette ein blaues Fenster gestanden.
   Die Alternative waere eine Ausnahmeliste in landing-v4.css gewesen, die jeder
   spaetere Umbau mitpflegen muss. Werte gleich, Kopplung weniger. */
.szene .fenster{position:absolute;z-index:2;left:-5cqw;top:50%;transform:translateY(-50%);
  width:63cqw;border-radius:3.2cqw;overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF 0%,#FAFCFF 55%,#F1F5FF 100%);
  border:1px solid color-mix(in srgb,var(--blue) 16%,transparent);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 34px 58px -28px rgba(11,18,32,.44),
             inset 0 1px 0 rgba(255,255,255,.95)}
/* Die Kopfleiste ist das erkennende Merkmal. Drei Punkte, eine Adresspille —
   mehr braucht ein Browser nicht, um als Browser gelesen zu werden. */
/* ⚠️ Das linke Polster ist GRÖSSER als der Anschnitt (7cqw gegen 5cqw). Beim
   ersten Bau war es 3cqw — der Anschnitt hat den ERSTEN der drei Punkte
   abgeschnitten und damit ausgerechnet das Zeichen halbiert, an dem das Objekt
   als Browser erkannt wird. Wer den Anschnitt aendert, zieht das Polster mit. */
.szene .leiste{display:flex;align-items:center;gap:1.5cqw;padding:2.2cqw 3cqw 2.2cqw 7cqw;
  background:color-mix(in srgb,var(--blue) 5%,transparent);border-bottom:1px solid color-mix(in srgb,var(--blue) 11%,transparent)}
.szene .pkt{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#D3DEF2;flex:0 0 auto}
.szene .adr{flex:1;height:3.4cqw;margin-left:1.4cqw;border-radius:999px;background:#fff;
  border:1px solid color-mix(in srgb,var(--blue) 13%,transparent);display:flex;align-items:center;padding:0 1.8cqw}
.szene .adr .bar{width:38%;height:.9cqw;min-height:4px}
.szene .seite{padding:3.4cqw 3.6cqw 4cqw}
/* Der Motivblock steht fuer das Bild der Seite. Kein Foto, keine Andeutung von
   Inhalt: sobald hier etwas Konkretes stuende, waere es die Website EINES
   Betriebs — und die Kachel behauptet gerade, dass es die eigene wird. */
.szene .motiv{height:16cqw;border-radius:2.2cqw;
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 16%,transparent) 0%,color-mix(in srgb,var(--blue) 7%,transparent) 58%,color-mix(in srgb,var(--blue) 13%,transparent) 100%);
  border:1px solid color-mix(in srgb,var(--blue) 10%,transparent)}
.szene .zeile{display:grid;gap:1.5cqw;margin-top:3cqw}
.szene .zeile .bar:nth-child(2){width:62%}
/* ---- Das Formular. Es ist der Ausgang der Seite, deshalb liegt hier der
   einzige gefuellte Knopf im ganzen Fenster. */
.szene .form{display:flex;align-items:center;gap:2cqw;margin-top:3.4cqw}
.szene .eing{flex:1;height:6.4cqw;border-radius:2cqw;background:#fff;
  border:1px solid color-mix(in srgb,var(--blue) 16%,transparent);display:flex;align-items:center;padding:0 2.2cqw}
.szene .eing .bar{width:52%}
.szene .senden{width:17cqw;height:6.4cqw;border-radius:2cqw;flex:0 0 auto;
  background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 74%,#fff) 0%,var(--blue) 52%,var(--blue-deep) 100%);
  box-shadow:0 10px 18px -8px color-mix(in srgb,var(--blue) 75%,transparent)}
/* ---- Die zwei Zielkarten. Sie liegen rechts und ueberlappen das Fenster
   NICHT — der Abstand ist der Weg, den der Strang zeigt. */
.szene .zk{position:absolute;z-index:3;right:3.5cqw;width:26cqw;padding:2.8cqw;
  border-radius:2.8cqw;display:grid;gap:2cqw;
  background:linear-gradient(168deg,#FFFFFF 0%,#F8FAFF 55%,#EFF4FF 100%);
  border:1px solid color-mix(in srgb,var(--blue) 14%,transparent);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 18px 32px -18px rgba(11,18,32,.42),
             inset 0 1px 0 rgba(255,255,255,.95)}
.szene .zk.oben{top:13%}
.szene .zk.unten{bottom:13%}
.szene .zs{width:8cqw;height:8cqw;border-radius:2.2cqw;display:grid;place-items:center;
  color:var(--blue);background:color-mix(in srgb,var(--blue) 9%,transparent)}
.szene .zs svg{width:56%;height:56%}
.szene .zt{display:grid;gap:1.4cqw}
.szene .zt .bar:nth-child(2){width:64%}
/* Der markierte Tag: ein gefuellter Punkt sagt „hier steht jetzt etwas"
   schneller als jede Zahl.
   ⚠️ Er sass zuerst unten rechts in der KARTE — dort lag er genau auf der
   oberen Zeile und sah aus wie der Griff eines Schiebereglers. Jetzt haengt er
   als Marke am Kalenderblatt, wo er hingehoert. */
.szene .zs{position:relative}
.szene .tag{position:absolute;top:-.9cqw;right:-.9cqw;width:2.8cqw;height:2.8cqw;
  border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 .7cqw #FBFCFF,0 2px 6px -2px rgba(11,18,32,.5)}
/* ---- Der Strang. Gleiche Sprache wie 01 und 04: duenn, gestrichelt, fliessend. */
.szene .spuren{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.szene .spuren path{fill:none;stroke:color-mix(in srgb,var(--blue) 50%,transparent);stroke-width:.26;
  stroke-linecap:round;stroke-dasharray:.3 1.5}
/* ============================ Bewegung ============================
   Erst steht die Seite, dann faellt der Knopf auf, dann kommen die Ziele.
   Die Reihenfolge IST die Aussage: das Formular kommt zuerst, das System danach.
   =============================================================== */
/* ⚠️ Eigene Keyframes: das Fenster steht auf translateY(-50%). Ein Keyframe auf
   `transform:none` wuerde genau diese Zentrierung mitloeschen. */
@keyframes sz06-auf-fenster{
  from{opacity:0;transform:translateY(calc(-50% + 10px))}
  to  {opacity:1;transform:translateY(-50%)}}
.szene .fenster{animation:sz06-auf-fenster .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes sz06-puls{0%,100%{box-shadow:0 10px 18px -8px color-mix(in srgb,var(--blue) 75%,transparent)}
  55%{box-shadow:0 10px 18px -8px color-mix(in srgb,var(--blue) 75%,transparent),0 0 0 1.6cqw color-mix(in srgb,var(--blue) 14%,transparent)}}
.szene .senden{animation:sz06-puls 2.8s ease-in-out .9s infinite}
@keyframes sz06-hoch-auf{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
@keyframes sz06-auf{from{opacity:0;transform:translateY(9px) scale(.96)} to{opacity:1;transform:none}}
.szene .zk{animation:sz06-auf .5s cubic-bezier(.2,.7,.3,1) both}
.szene .zk.oben{animation-delay:.62s}
.szene .zk.unten{animation-delay:.82s}
@keyframes sz06-fliessen{to{stroke-dashoffset:-9}}
.szene .spuren path{animation:sz06-fliessen 2.6s linear infinite}
/* ⚠️ KEIN `:nth-of-type()` auf die Bahnen hier. Die Szenen werden alle unter
   dasselbe `.szene` gescopet — nur Keyframes bekommen ein Praefix. Eine Regel
   `.szene .spuren path:nth-of-type(2)` haette also auch Szene 01 und 04 die
   Laufzeit ihrer zweiten Bahn umgestellt, still und ohne Meldung. Gleiche
   Klassennamen sind hier geteiltes Eigentum. */
@media (prefers-reduced-motion: reduce){.szene .fenster,.szene .senden,.szene .zk,.szene .spuren path{animation:none}.szene .fenster,.szene .zk{opacity:1}}
/* ---- Handy-Slot 329x436 (3:4). Quer nebeneinander geht dort nicht: das
   Fenster legt sich nach oben, die zwei Ziele reihen sich darunter. Die
   Bahnen wuerden im Hochformat verzerren (preserveAspectRatio="none") — raus,
   die Naehe uebernimmt ihre Arbeit. */
@media(max-width:720px){.szene{aspect-ratio:329/436}.szene .spuren{display:none}.szene .fenster{left:-5cqw;top:4%;transform:none;width:102cqw;border-radius:5cqw;
    animation:sz06-hoch-auf .55s cubic-bezier(.2,.7,.3,1) both}.szene .leiste{gap:2.4cqw;padding:3.4cqw 4.6cqw}.szene .pkt{width:2.4cqw;height:2.4cqw}.szene .adr{height:5.4cqw;border-radius:999px;padding:0 2.8cqw}.szene .adr .bar{height:1.4cqw}.szene .seite{padding:5cqw 5.4cqw 5.6cqw}.szene .motiv{height:24cqw;border-radius:3.4cqw}.szene .zeile{gap:2.4cqw;margin-top:4.4cqw}.szene .bar{height:2.1cqw}.szene .form{gap:3cqw;margin-top:5cqw}.szene .eing{height:9.6cqw;border-radius:3cqw;padding:0 3.4cqw}.szene .senden{width:26cqw;height:9.6cqw;border-radius:3cqw}.szene .zk{width:44cqw;padding:4.2cqw;border-radius:4.2cqw;gap:3cqw}.szene .zk.oben{top:auto;bottom:4.5%;left:3cqw;right:auto}.szene .zk.unten{top:auto;bottom:4.5%;right:3cqw}.szene .zs{width:12cqw;height:12cqw;border-radius:3.4cqw}.szene .tag{top:-1.3cqw;right:-1.3cqw;bottom:auto;width:4cqw;height:4cqw;
    box-shadow:0 0 0 1cqw #FBFCFF,0 2px 6px -2px rgba(11,18,32,.5)}.szene .zk.oben,.szene .zk.unten{animation-delay:.6s}}
/* ===== SZENEN-ENDE ===== */