/* Neugestaltung masdemas.de, Gestaltungslinie Entwurf 6 "Bewegung"
   (Klick-Dummy in _masdemas/masdemas_web-ideas/02_plakativ/).

   Gilt fuer alle Seiten mit layout: layouts/plakativ.njk. Die Seiten behalten
   ihre Bausteine und Klassen (hero, chapter-tag, cards, icard, faq-item, form
   ...), diese Datei gibt ihnen das neue Aussehen. So aendert sich beim Umstellen
   einer Seite nur das Layout, die Texte bleiben unberuehrt.

   Regeln der Domain: Content Security Policy mit style-src 'self', deshalb
   keine style-Attribute im HTML, alles steht hier. Schriften liegen lokal.
   Text ist immer #000 oder #fff (Hausregel), Amber nur als Flaeche, Marke und
   Akzentwort. Grosse Schrift immer mit rem-Deckel (Rueckmeldung 24.10.2026). */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --nacht:#0b0907;--glut:#f59e0b;--beige:#f7f2eb;--karte:#1a1612;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(1rem,4vw,3.5rem);
  --breite:88rem;
  --kopf-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Werte, die chat.css vom bisherigen Layout erwartet */
  --ink:#000;--card:#fff;--paper:#f7f2eb;--paper-2:#f2e9de;--line:#e6ddd0;--line-2:#d8cdbb;
  --clay:#f59e0b;--clay-soft:#fde7c0;--clay-softer:#fdf4e4;--link:#8a5a06;
  --font:var(--text);--r:16px;--r-sm:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:#000;font-family:var(--text);font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-is-open,html:has(body.menu-is-open){overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
h1,h2,h3,p,li,dd,dt{overflow-wrap:break-word}
h2,h3{hyphens:auto}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--glut);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;background:#000;color:#fff;padding:.7rem 1rem;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{top:1rem}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--glut);z-index:70;transition:width .12s linear}

/* ---------- Kopfleiste: liegt oben, immer mit festem Grund ----------
   Sie liegt nie durchsichtig ueber einem Bild, sondern hat immer die Farbe
   des Abschnitts darunter (plakativ.js setzt --fest-bg), Schrift und Logo
   schalten auf Dunkel weiss. So ist das Menue auf jeder Flaeche lesbar
   (Rueckmeldung 25.10.2026: auf dem dunklen Foto nicht lesbar). Der Schatten
   kommt erst beim Scrollen dazu. */
.leiste{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--kopf-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--gutter);background:var(--fest-bg,var(--beige));color:#000;transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s}
.leiste__logo img{height:25px;width:136px}
.leiste.fest{box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.07)}
.leiste.fest-dunkel{color:#fff}
.leiste.fest-dunkel.fest{box-shadow:0 1px 0 rgba(255,255,255,.1)}
.leiste.fest-dunkel .leiste__logo img{filter:invert(1)}
.leiste__nav{display:flex;gap:1.6rem;font-size:.92rem;font-weight:600}
.leiste__nav a{text-decoration:none;padding:.3rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.leiste__nav a:hover,.leiste__nav a[aria-current="page"]{background-size:100% 2px}
.nav-toggle{display:none;font:600 .92rem var(--text);color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:.5rem 1.05rem;cursor:pointer}
@media (max-width:920px){.leiste__nav{display:none}.nav-toggle{display:inline-block}}

.mobile-nav{position:fixed;inset:0;z-index:60;background:#000;color:#fff;padding:5rem var(--gutter) 2rem;overflow-y:auto}
.mobile-nav[hidden]{display:none}
.mobile-nav__close{position:absolute;top:1.1rem;right:var(--gutter);font:600 .92rem var(--text);color:#fff;background:none;border:1px solid #fff;border-radius:999px;padding:.5rem 1.05rem;cursor:pointer}
.mobile-nav__links{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.mobile-nav__links a{font:800 2.4rem/1.15 var(--display);font-variation-settings:"wdth" 75;text-decoration:none}
.mobile-nav__links a[aria-current="page"]{color:var(--glut)}

/* ---------- Knoepfe ---------- */
.btn,.replay{display:inline-flex;align-items:center;gap:.6rem;font:700 1rem/1 var(--text);text-decoration:none;padding:1.05rem 1.55rem;border-radius:999px;border:1px solid currentColor;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:#000;color:#fff;border-color:#000}
.btn-primary:hover{background:var(--glut);color:#000;border-color:var(--glut)}
.btn-ghost{background:none}
.btn-ghost:hover{background:#000;color:#fff;border-color:#000}

/* ---------- Kopfbereich der Seite: hell, grosse Schrift, kein Foto ----------
   Beige statt Foto mit dunklem Verlauf (Entscheidung User 25.10.2026): ein
   passendes Foto gibt es nicht fuer jede Seite, und der Kopf soll nicht dunkel
   wirken. Leistungsseiten zeigen rechts eine Kopf-Szene (siehe unten),
   Textseiten nur die Schrift. */
.hero{position:relative;min-height:76vh;min-height:76svh;display:flex;align-items:center;padding:calc(var(--kopf-h) + 3rem) var(--gutter) clamp(3rem,8vh,5.5rem);background:var(--beige);color:#000;overflow:hidden}
.hero .grid-hero{width:100%;max-width:var(--breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.hero .grid-hero:has(.kopf-szene){grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero .grid-hero>div:first-child{position:relative;z-index:1;max-width:60rem}
.hero-figure{display:none}
.hero:not(:has(.kopf-szene)){min-height:60vh;min-height:60svh}
/* Textseiten ohne Kopf-Szene: Ueberschrift ueber die volle Breite, darunter
   links der Einleitungssatz, rechts Angaben und Knoepfe. So bleibt keine
   leere Haelfte stehen. */
@media (min-width:901px){
  .hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur))>div:first-child{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(2rem,6vw,6rem)}
  .hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur))>div:first-child>.kick,.hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur))>div:first-child>h1{grid-column:1 / -1;justify-self:start}
  .hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur)) h1{max-width:22ch}
  .hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur))>div:first-child>.sub{grid-column:1;grid-row:3 / span 2;margin-top:2rem}
  .hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur))>div:first-child>.text-small{grid-column:2;grid-row:3;margin-top:2.1rem}
  .hero .grid-hero:not(:has(.kopf-szene,.kontakt-figur,.danke-figur))>div:first-child>.hero-actions{grid-column:2;grid-row:4;align-self:end}
}
.hero .kick{display:inline-flex;align-items:center;gap:.6rem;font:700 .8rem var(--mono);letter-spacing:.05em;margin-bottom:1.2rem}
.hero .kick .dot{width:8px;height:8px;border-radius:50%;background:var(--glut)}
/* Hauptueberschrift: Woerter brechen nie mitten durch (kein "Wiederkehren-de"),
   stattdessen passt sich die Groesse an. Neben einer Kopf-Szene ist die Spalte
   schmaler, dort ist die Schrift kleiner. */
.hero h1{font:800 min(7.4vw,11vh,6.4rem)/.95 var(--display);letter-spacing:-.035em;max-width:14ch;overflow-wrap:normal;hyphens:manual}
.hero .grid-hero:has(.kopf-szene) h1{font-size:min(4.8vw,9vh,4.8rem)}
.hero h1 .accent{color:var(--glut)}
.hero .sub{max-width:46ch;margin-top:1.3rem;font-size:1.15em}
.hero .text-small{margin-top:1rem;font-size:.9rem;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media (scripting: enabled) and (prefers-reduced-motion:no-preference){
  .hero .grid-hero>div:first-child>*{animation:auftauchen 1s var(--ease) both}
  .hero .grid-hero>div:first-child>h1{animation-delay:.1s}
  .hero .grid-hero>div:first-child>p{animation-delay:.22s}
  .hero .grid-hero>div:first-child>.hero-actions{animation-delay:.34s}
}
@keyframes auftauchen{from{opacity:0;transform:translateY(.6em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Kopf-Szene Webdesign: eine Seite entsteht ----------
   Nur Gestaltung aus dieser Datei, kein eingebettetes Fenster, deshalb auch
   unter der Sicherheitsregel von masdemas.de erlaubt. Der Endzustand ist der
   normale Zustand, die Animation spielt nur den Weg dorthin einmal ab (bei
   reduzierter Bewegung sofort fertig). Ablauf: Fenster, graue Platzhalter,
   Ueberschrift waechst und wird schwarz, Akzent wird Amber, Knopf rund und
   Amber, Bild, zuletzt die Handy-Ansicht. */
.kopf-szene{--t:5.2s;position:relative;width:100%;max-width:36rem;justify-self:end;margin-bottom:6%}
.ks-fenster{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 70px -20px rgba(60,40,10,.28);animation:ks-fenster var(--t) var(--ease) .2s both}
.ks-leiste{height:30px;background:#f2e9de;display:flex;align-items:center;gap:6px;padding:0 12px}
.ks-leiste i{width:9px;height:9px;border-radius:50%;background:#d8cdbb}
.ks-seite{display:grid;grid-template-columns:1.15fr 1fr;gap:6%;padding:7% 7% 9%;aspect-ratio:16/10}
.ks-text{display:flex;flex-direction:column;gap:10px;justify-content:center}
.kopf-szene span{display:block;border-radius:4px;transform-origin:0 50%}
.ks-nav{height:8px;width:40%;background:#e6ddd0;margin-bottom:8px;animation:ks-nav var(--t) var(--ease) .2s both}
.ks-titel{height:22px;width:92%;background:#000;animation:ks-titel var(--t) var(--ease) .2s both}
.ks-titel--akzent{width:68%;background:var(--glut);animation-name:ks-akzent}
.ks-zeile{height:7px;width:88%;background:#e6ddd0;margin-top:4px;animation:ks-zeile var(--t) var(--ease) .2s both}
.ks-zeile--kurz{width:60%;margin-top:0}
.kopf-szene .ks-knopf{height:22px;width:44%;margin-top:8px;background:var(--glut);border-radius:999px;animation:ks-knopf var(--t) var(--ease) .2s both}
.kopf-szene .ks-bild{border-radius:10px;background:linear-gradient(150deg,#fde7c0 0,var(--glut) 120%);animation:ks-bild var(--t) var(--ease) .2s both}
.ks-handy{position:absolute;right:-3%;bottom:-12%;width:27%;aspect-ratio:9/18;background:#fff;border-radius:18px;padding:16px 10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 0 0 5px #000,0 24px 50px -16px rgba(0,0,0,.4);animation:ks-handy var(--t) var(--ease) .2s both}
.ks-handy .ks-nav{width:50%;height:5px;margin-bottom:4px}
.ks-handy .ks-bild{height:28%;flex:none}
.ks-handy .ks-titel{height:11px;width:90%}
.ks-handy .ks-titel--akzent{width:64%}
.ks-handy .ks-zeile{height:5px;width:86%}
.ks-handy .ks-knopf{height:12px;width:54%;margin-top:4px}
@keyframes ks-fenster{0%{opacity:0;transform:translateY(18px) scale(.97)}10%,100%{opacity:1;transform:none}}
@keyframes ks-nav{0%,10%{transform:scaleX(0)}18%,100%{transform:none}}
@keyframes ks-titel{0%,14%{transform:scaleX(0);height:9px;background:#d8cdbb}24%,38%{transform:none;height:9px;background:#d8cdbb}48%,100%{transform:none;height:22px;background:#000}}
@keyframes ks-akzent{0%,18%{transform:scaleX(0);height:9px;background:#d8cdbb}28%,38%{transform:none;height:9px;background:#d8cdbb}48%,52%{transform:none;height:22px;background:#000}60%,100%{transform:none;height:22px;background:var(--glut)}}
@keyframes ks-zeile{0%,22%{transform:scaleX(0)}32%,100%{transform:none}}
@keyframes ks-knopf{0%,26%{transform:scaleX(0);background:#d8cdbb;border-radius:3px}36%,62%{transform:none;background:#d8cdbb;border-radius:3px}72%,100%{transform:none;background:var(--glut);border-radius:999px}}
@keyframes ks-bild{0%,70%{opacity:0;transform:scale(.94)}80%,100%{opacity:1;transform:none}}
@keyframes ks-handy{0%,80%{opacity:0;transform:translate(16px,22px)}94%,100%{opacity:1;transform:none}}
/* Die Handy-Teile bauen sich mit dem Handy zusammen auf, nicht vorher */
.kopf-szene .ks-handy span{animation:none}
/* Zum Schluss wird aus dem Entwurf die fertige Seite: echte Arbeitsproben
   blenden ueber den Entwurf (Rueckmeldung 25.10.2026: nur orange Flaechen
   wirkten leer). Endzustand ist die fertige Seite. */
.ks-seite{position:relative}
.kopf-szene .ks-echt{position:absolute;inset:0;border-radius:0;overflow:hidden;background:#fff;animation:ks-echt .9s var(--ease) 5.5s both}
.kopf-szene .ks-handy .ks-echt{border-radius:13px;inset:5px;animation:ks-echt .9s var(--ease) 6.1s both}
.ks-echt img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ks-handy .ks-echt img{object-position:50% 0}
@keyframes ks-echt{from{opacity:0}to{opacity:1}}

/* ---------- Kopf-Szene Grafikdesign: ein Flyer entsteht im Raster ----------
   DIN-lang-Blatt (99 x 210 mm) mit Raster aus quadratischen Modulen (3 x 7),
   Elemente rasten in die Module ein, daneben Farbpalette laut Styleguide
   (#042F2E, #0F766E, #14B8A6, Weiss) und Schriftmuster. Zum Schluss blendet
   die echte Vorderseite ein, dann die Schnittmarken: sie sitzen auf der
   Verlaengerung der Schnittkante, mit Abstand ausserhalb des Blatts
   (Rueckmeldung 24.10.2026). Endzustand: fertiger Flyer mit Marken. */
.kopf-szene--grafik{aspect-ratio:10/9}
.kg-blatt{position:absolute;left:9%;top:4%;height:92%;aspect-ratio:99/210;background:#fff;padding:18px 20px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -20px rgba(4,47,46,.35);animation:kb-auf .7s var(--ease) .2s both}
.kg-raster{position:relative;width:100%;aspect-ratio:3/7;background-image:linear-gradient(90deg,rgba(20,184,166,.55) 1px,transparent 1px),linear-gradient(0deg,rgba(20,184,166,.55) 1px,transparent 1px);background-size:33.333% 14.2857%;box-shadow:inset -1px -1px 0 rgba(20,184,166,.55);animation:kg-raster .9s var(--ease) .8s both}
.kopf-szene .kg-el{position:absolute;border-radius:2px;transform-origin:0 0;animation:kg-el .55s var(--ease) both}
.kopf-szene .kg-el--titel{left:0;top:3%;width:100%;height:6%;background:#042F2E;animation-delay:1.6s}
.kopf-szene .kg-el--titel2{left:0;top:11%;width:72%;height:6%;background:#0F766E;animation-delay:1.85s}
.kopf-szene .kg-el--bild{left:0;top:28.57%;width:66.67%;height:28.57%;background:linear-gradient(160deg,#0F766E,#042F2E);animation-delay:2.15s}
.kopf-szene .kg-el--zahl{left:66.67%;top:28.57%;width:33.33%;height:28.57%;background:#14B8A6;animation-delay:2.4s}
.kopf-szene .kg-el--text{left:0;top:62%;width:100%;height:2.2%;background:#9fb9b6;animation-delay:2.7s}
.kopf-szene .kg-el--text2{left:0;top:67%;width:78%;height:2.2%;background:#9fb9b6;animation-delay:2.85s}
.kopf-szene .kg-el--logo{left:0;top:85.71%;width:33.33%;height:14.29%;background:#042F2E;animation-delay:3.1s}
.kopf-szene .kg-echt{position:absolute;inset:0;overflow:hidden;animation:ks-echt .9s var(--ease) 4.6s both}
.kg-echt img{width:100%;height:100%;object-fit:cover}
/* Schnittmarken: 1 px, 10 px lang, 8 px Abstand zur Schnittkante */
.kg-marken{position:absolute;inset:-18px;pointer-events:none;--m:#000;background:
  linear-gradient(var(--m),var(--m)) 0 18px/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) 18px 0/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) 100% 18px/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) calc(100% - 18px) 0/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) 0 calc(100% - 18px)/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) 18px 100%/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) 100% calc(100% - 18px)/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) calc(100% - 18px) 100%/1px 10px no-repeat;
  animation:kb-bild .6s var(--ease) 5.4s both}
.kg-palette{position:absolute;right:4%;top:8%;width:38%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kopf-szene .kg-palette span{aspect-ratio:1;border-radius:12px;box-shadow:0 12px 28px -14px rgba(4,47,46,.5);transform-origin:50% 50%;animation:kg-farbe .6s var(--ease) both}
.kopf-szene .kg-palette span:nth-child(1){background:#042F2E;animation-delay:3.3s}
.kopf-szene .kg-palette span:nth-child(2){background:#0F766E;animation-delay:3.45s}
.kopf-szene .kg-palette span:nth-child(3){background:#14B8A6;animation-delay:3.6s}
.kopf-szene .kg-palette span:nth-child(4){background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 12px 28px -14px rgba(4,47,46,.4);animation-delay:3.75s}
.kg-typo{position:absolute;right:4%;top:58%;width:38%;display:flex;flex-direction:column;gap:9px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 40px -18px rgba(60,40,10,.3);animation:kb-auf .6s var(--ease) 3.9s both}
.kopf-szene .kg-typo span{background:#042F2E;animation:ks-zeile .8s var(--ease) 4.1s both}
.kopf-szene .kg-typo .kg-t1{height:22px;width:62%}
.kopf-szene .kg-typo .kg-t2{height:12px;width:80%;background:#0F766E}
.kopf-szene .kg-typo .kg-t3{height:5px;width:100%;background:#c9d6d4}
.kopf-szene .kg-typo .kg-t3.kurz{width:58%}
@keyframes kg-raster{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes kg-el{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes kg-farbe{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}

/* ---------- Kopf-Szene Automatisierung: der Bestell-Ablauf ----------
   Die fuenf Stationen aus dem Praxisbeispiel (Bestellung im Shop, Webhook,
   n8n, Fachwoerterbuch, E-Mail), echte Logos von WooCommerce und n8n. Ein
   Datenpaket laeuft von Station zu Station, jede leuchtet beim Eintreffen
   auf, am Ende ein Haken. Positionen in Prozent der Szene (Format 10:8). */
.kopf-szene--ablauf{aspect-ratio:10/8;background:#fff;border-radius:18px;background-image:radial-gradient(circle,#e6ddd0 1.2px,transparent 1.6px);background-size:22px 22px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 70px -20px rgba(60,40,10,.28);animation:ks-fenster 6.4s var(--ease) .2s both}
.ka-knoten{position:absolute;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 14px 30px -14px rgba(60,40,10,.35);animation:kb-auf .6s var(--ease) var(--d) both,ka-an .5s var(--ease) var(--an) forwards}
.ka-knoten img{width:62%;height:auto}
.ka-knoten svg{width:42%;height:42%;stroke:#000;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ka-1{left:15%;top:27%;--d:.3s;--an:2.3s}
.ka-2{left:50%;top:27%;--d:.5s;--an:3.1s}
.ka-3{left:85%;top:27%;--d:.7s;--an:3.9s}
.ka-4{left:85%;top:73%;--d:.9s;--an:4.7s}
.ka-5{left:50%;top:73%;--d:1.1s;--an:5.5s}
.kopf-szene .ka-linie{position:absolute;background:radial-gradient(circle,#b9ad9c 1.2px,transparent 1.7px) 0 50%/9px 3px repeat-x;height:3px;margin-top:-1.5px;animation:ks-zeile .5s var(--ease) 1.5s both}
.ka-l1{left:26%;top:27%;width:13%}.ka-l2{left:61%;top:27%;width:13%}
.kopf-szene .ka-l3{left:85%;top:40.75%;width:3px;height:18.5%;margin:0 0 0 -1.5px;background:radial-gradient(circle,#b9ad9c 1.2px,transparent 1.7px) 50% 0/3px 9px repeat-y;transform-origin:50% 0}
.ka-l4{left:61%;top:73%;width:13%;transform-origin:100% 50%}
.kopf-szene .ka-paket{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:4px;background:var(--glut);box-shadow:0 0 16px var(--glut);opacity:0;animation:ka-paket 3.6s var(--ease) 2.1s both}
.kopf-szene .ka-haken{position:absolute;left:50%;top:73%;width:34px;height:34px;margin:4% 0 0 5%;border-radius:50%;background:#2f9e63;display:grid;place-items:center;animation:kg-farbe .5s var(--ease) 5.9s both}
.ka-haken svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes ka-an{to{box-shadow:0 0 0 2px var(--glut),0 0 30px rgba(245,158,11,.3),0 14px 30px -14px rgba(60,40,10,.35)}}
@keyframes ka-paket{0%{opacity:1;left:15%;top:27%}22%{left:50%;top:27%}44%{left:85%;top:27%}66%{left:85%;top:73%}88%{opacity:1;left:50%;top:73%}100%{opacity:0;left:50%;top:73%}}

/* ---------- Kopf-Szene KI: Anfrage, System, Ergebnisse, Pruefung ----------
   Eine Anfrage geht in das KI-gestuetzte System, das nacheinander seine
   Skripte ansteuert. Es entstehen Text, Bild und Video (die Felder der
   Seite). Danach prueft ein Mensch Punkt fuer Punkt, zuletzt die Freigabe.
   Inhaltlich wie auf der Seite: Ergebnisse werden kontrolliert. */
.kopf-szene--ki{aspect-ratio:10/9}
.ki-karte{position:absolute;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 44px -20px rgba(60,40,10,.32);animation:kb-auf .6s var(--ease) var(--d,0s) both}
.ki-anfrage{--d:.3s;left:0;top:6%;width:30%;padding:14px;display:flex;flex-direction:column;gap:8px;border-bottom-left-radius:4px}
.kopf-szene .ki-anfrage span{height:6px;background:#d8cdbb}
.kopf-szene .ki-anfrage span:first-child{height:9px;width:70%;background:#000}
.kopf-szene .ki-anfrage span:last-child{width:55%}
.kopf-szene .ki-linie{position:absolute;left:30.5%;top:16%;width:6%;height:3px;background:radial-gradient(circle,#b9ad9c 1.2px,transparent 1.7px) 0 50%/9px 3px repeat-x;animation:ks-zeile .4s var(--ease) .9s both}
.ki-kern{--d:1.1s;left:37%;top:6%;width:25%;aspect-ratio:1;background:#000;display:grid;place-items:center}
.kopf-szene .ki-funke{width:42%;aspect-ratio:1;background:var(--glut);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:ki-dreh 1.6s var(--ease) 1.3s both}
.ki-skripte{position:absolute;left:37%;top:37%;width:25%;display:grid;gap:7px}
.kopf-szene .ki-skripte span{height:16px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px #d8cdbb;animation:kb-auf .4s var(--ease) both,ki-skript .4s var(--ease) forwards}
.kopf-szene .ki-skripte span:nth-child(1){animation-delay:1.5s,1.9s}
.kopf-szene .ki-skripte span:nth-child(2){animation-delay:1.6s,2.2s}
.kopf-szene .ki-skripte span:nth-child(3){animation-delay:1.7s,2.5s}
.ki-ergebnis{width:33%;right:0;height:19%;overflow:hidden}
.ki-text{--d:2.7s;top:4%;padding:12px;display:flex;flex-direction:column;gap:7px}
.kopf-szene .ki-text span{height:5px;background:#d8cdbb}
.kopf-szene .ki-text span:first-child{height:8px;width:64%;background:#000}
.ki-bild{--d:3s;top:27%;background:linear-gradient(180deg,#fdf4e4,#fde7c0)}
.kopf-szene .ki-sonne{position:absolute;right:14%;top:16%;width:18%;aspect-ratio:1;border-radius:50%;background:var(--glut)}
.kopf-szene .ki-berg{position:absolute;left:-6%;bottom:0;width:70%;height:62%;background:#0F766E;clip-path:polygon(0 100%,48% 8%,100% 100%)}
.kopf-szene .ki-berg+.ki-berg{left:36%;width:74%;height:48%;background:#042F2E}
.ki-video{--d:3.3s;top:50%;background:#000;display:grid;place-items:center}
.kopf-szene .ki-play{width:22%;aspect-ratio:1;background:var(--glut);clip-path:polygon(18% 0,100% 50%,18% 100%)}
.kopf-szene .ki-zeit{position:absolute;left:10%;right:10%;bottom:12%;height:3px;background:rgba(255,255,255,.3)}
.kopf-szene .ki-zeit::after{content:"";position:absolute;inset:0 60% 0 0;background:var(--glut)}
.ki-pruefung{--d:3.8s;left:0;top:73%;width:62%;padding:14px 16px;display:flex;gap:14px;align-items:center}
.ki-person{flex:none;width:42px;height:42px;border-radius:50%;background:#f2e9de;position:relative;overflow:hidden}
.kopf-szene .ki-person span{position:absolute;left:50%;border-radius:50%;background:#000}
.kopf-szene .ki-person span:first-child{top:22%;width:34%;height:34%;margin-left:-17%}
.kopf-szene .ki-person span:last-child{top:64%;width:76%;height:70%;margin-left:-38%}
.ki-liste{flex:1;display:grid;gap:8px}
.ki-zeile{display:flex;align-items:center;gap:8px}
.kopf-szene .ki-haken{flex:none;width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px #b9ad9c;animation:ki-gruen .3s var(--ease) forwards}
.ki-zeile:nth-child(1) .ki-haken{animation-delay:4.3s}
.ki-zeile:nth-child(2) .ki-haken{animation-delay:4.7s}
.ki-zeile:nth-child(3) .ki-haken{animation-delay:5.1s}
.kopf-szene .ki-zeile i{display:block;flex:1;height:5px;border-radius:3px;background:#d8cdbb}
.kopf-szene .ki-freigabe{position:absolute;left:58%;top:71%;width:36px;height:36px;border-radius:50%;background:#2f9e63;display:grid;place-items:center;animation:kg-farbe .5s var(--ease) 5.6s both}
.ki-freigabe svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes ki-dreh{from{transform:rotate(-180deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes ki-skript{to{background:#fdf4e4;box-shadow:inset 0 0 0 1px var(--glut)}}
@keyframes ki-gruen{to{background:#2f9e63;box-shadow:none}}

/* ---------- Kopf-Szene barrierefreie PDF-Formulare ----------
   DIN-A4-Blatt, Beschriftungen und Felder entstehen, eine Markierung geht
   der Reihe nach durch die Felder (feste Reihenfolge), der Lautsprecher
   daneben steht fuer das Vorleseprogramm, das jedes Feld ansagt. Zum
   Schluss das echte fertige Formular aus den Arbeitsproben, dazu ein Haken. */
.kopf-szene--pdf{aspect-ratio:10/9}
.kp-blatt{position:absolute;left:3%;top:20%;height:78%;aspect-ratio:210/297;background:#fff;padding:22px 24px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -20px rgba(60,40,10,.3);animation:kb-auf .7s var(--ease) .2s both}
.kopf-szene .kp-titel{height:12px;width:46%;background:#000;animation:ks-zeile .6s var(--ease) .7s both}
.kp-feld{position:absolute;left:24px;right:24px;height:10%;display:flex;flex-direction:column;gap:6px}
.kp-f1{top:18%}.kp-f2{top:33%}.kp-f3{top:48%}.kp-f4{top:63%}
.kopf-szene .kp-feld span:first-child{height:6px;width:34%;background:#9b8f80;animation:ks-zeile .5s var(--ease) var(--d) both}
.kopf-szene .kp-feld span:last-child{flex:1;border-radius:6px;box-shadow:inset 0 0 0 1px #d8cdbb;animation:kb-bild .5s var(--ease) calc(var(--d) + .15s) both}
.kp-f1{--d:1s}.kp-f2{--d:1.2s}.kp-f3{--d:1.4s}.kp-f4{--d:1.6s}
.kopf-szene .kp-knopf{position:absolute;left:24px;top:81%;width:34%;height:6%;border-radius:999px;background:var(--glut);animation:kg-farbe .5s var(--ease) 1.9s both}
/* Markierung: springt der Reihe nach in die Felder, Hoehe wie ein Feldkasten */
.kopf-szene .kp-fokus{position:absolute;left:20px;right:20px;height:7%;border-radius:8px;box-shadow:0 0 0 3px var(--glut),0 0 22px rgba(245,158,11,.35);opacity:0;animation:kp-fokus 3.4s var(--ease) 2.3s both}
@keyframes kp-fokus{0%{opacity:0;top:20.6%}6%,20%{opacity:1;top:20.6%}26%,45%{top:35.6%}51%,70%{top:50.6%}76%,94%{opacity:1;top:65.6%}100%{opacity:0;top:65.6%}}
.kp-ton{position:absolute;right:4%;top:68%;width:22%;aspect-ratio:1;border-radius:18px;background:#000;display:grid;place-items:center;animation:kb-auf .6s var(--ease) 2s both}
.kp-ton svg{width:52%;height:52%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kp-ton .kp-lautsprecher{stroke:#fff;stroke-width:1.8}
.kp-ton .kp-welle{stroke:var(--glut);stroke-width:1.8;opacity:.25;animation:kp-welle .85s ease-in-out 2.5s 4}
.kp-ton .kp-welle+.kp-welle{animation-delay:2.62s}
@keyframes kp-welle{40%{opacity:1}100%{opacity:.25}}
.kopf-szene .kp-echt{position:absolute;inset:0;overflow:hidden;animation:ks-echt .9s var(--ease) 5.9s both}
.kp-echt{background:#fff}
.kp-echt img{width:100%;height:100%;object-fit:contain;object-position:50% 0}
.kopf-szene .kp-haken{position:absolute;left:52%;top:84%;width:44px;height:44px;border-radius:50%;background:#2f9e63;display:grid;place-items:center;animation:kg-farbe .5s var(--ease) 6.5s both}
.kp-haken svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* Hinten das echte Werkzeug: Browserfenster mit dem Formular-Baukasten */
.kp-browser{position:absolute;right:0;top:0;width:66%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 50px -20px rgba(60,40,10,.3);animation:kb-auf .6s var(--ease) .2s both}
.kp-browser .ks-leiste{height:22px}
.kp-browser .ks-leiste i{width:7px;height:7px}
.kp-browser img{width:100%;height:auto}

/* Fall-Teaser mit Bestell-Vorschau (Automatisierung, Startseite) */
.cteaser{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center;margin-top:clamp(1.8rem,4vh,3rem)}
.cteaser__visual{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.8rem;align-items:center}
.cteaser__arrow{display:grid;place-items:center}
.cteaser__arrow svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cteaser h3{font:800 min(2.4vw,2rem)/1.1 var(--display);letter-spacing:-.02em}
.cteaser p{margin-top:.8rem;max-width:58ch}
.cteaser__link{display:inline-block;margin-top:1.2rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.mockdoc{background:#fff;color:#000;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 44px -22px rgba(60,40,10,.4)}
.mockdoc__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.65rem .95rem;background:#f2e9de;font:700 .76rem var(--mono)}
.mockdoc__lang{padding:.08rem .45rem;border-radius:6px;font-size:.7rem;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.mockdoc.es .mockdoc__lang{background:var(--glut);box-shadow:none}
.mockdoc__body{padding:.95rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.75rem}
.mockline{display:flex;flex-direction:column;gap:.15rem}
.mockline+.mockline{padding-top:.75rem;box-shadow:inset 0 1px 0 #e6ddd0}
.mockline b{font-size:.92rem;line-height:1.3}
.mockline span{font-size:.8rem;line-height:1.45}
.mockline .mfr{align-self:flex-start;margin-top:.3rem;font:700 .68rem var(--mono);padding:.1rem .55rem;border-radius:999px;background:#fdf4e4;box-shadow:inset 0 0 0 1px #fde7c0}
.mockdoc__meta{font:400 .72rem var(--mono)}

/* Vorher / Nachher (Praxisbeispiel) */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin-top:clamp(1.8rem,4vh,3rem)}
.ba__panel{border-radius:16px;overflow:hidden;background:color-mix(in srgb,currentColor 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);display:flex;flex-direction:column}
.ba__panel img{width:100%;height:auto}
.ba__cap{padding:1.15rem 1.35rem 1.4rem}
.ba__tag{display:block;font:700 .72rem var(--mono);letter-spacing:.06em;margin-bottom:.5rem}
.ba__cap h3{font:700 1.3rem/1.2 var(--display)}
.ba__cap ul{margin:.7rem 0 0;padding-left:1.15rem;display:grid;gap:.35rem;font-size:.96rem}
.ba__cap li::marker{color:var(--glut)}

/* Ablaufplan: Bestellung, Workflow, Bestell-Mails (Praxisbeispiel) */
.cflow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center;margin-top:clamp(1.8rem,4vh,3rem)}
.cflow__col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.cflow__label{font:700 .78rem var(--mono);letter-spacing:.05em}
.dunkel .cflow__label{color:var(--glut)}
.cflow__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cflow__steps li{display:flex;align-items:center;gap:.7rem;padding:.55rem 1.1rem .55rem .55rem;border-radius:999px;font-weight:700;font-size:.92rem;white-space:nowrap;background:color-mix(in srgb,currentColor 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent)}
.dunkel .cflow__steps li{background:var(--karte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.cflow__steps i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--glut);color:#000;font:700 .78rem var(--mono);flex:none}
.cflow__hint{margin-top:1.6rem;max-width:64ch;font-size:.96rem}

/* Logo-Zeile "Welche Software kommt zum Einsatz" */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;gap:2.4rem;margin:1.8rem 0 1.4rem}
.logo-strip img{height:30px;width:auto}
.logo-note{font-size:.84rem;max-width:64ch;margin-top:1.4rem}

/* Zwischenueberschriften im Fliesstext (Artikel, Rechtstexte) */
.prose h3{font:700 1.4rem/1.2 var(--display);letter-spacing:-.01em;margin:2.2rem 0 .6rem}
.prose h2{font:800 1.9rem/1.1 var(--display);letter-spacing:-.02em;margin:2.6rem 0 .8rem}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.2rem;display:grid;gap:.35rem;margin:.8rem 0}
.prose li::marker{color:var(--glut)}

/* Rechtsseiten (Impressum, Datenschutz, AGB, Barrierefreiheit): Kopf ruhig,
   Hauptueberschrift am Rechner in einer Zeile (Hausregel, auch bei
   "Erklaerung zur Barrierefreiheit fuer Dienstleistungen"). Am Handy greifen
   die weichen Trennstellen im Text. Danach der Rechtstext als Lesespalte. */
.hero:has(+ section.legal){min-height:0;padding-bottom:clamp(2rem,5vh,3rem)}
main>.hero:has(+ section.legal) .grid-hero h1{font-size:min(3vw,2.9rem);max-width:none;white-space:nowrap}
section.legal{padding-top:clamp(3rem,7vh,4.5rem)}
/* Zwischenueberschriften der Rechtstexte bleiben klar unter der H1 */
section.legal .wrap>h2,section.legal .prose h2{font:800 min(2.4vw,1.9rem)/1.15 var(--display);letter-spacing:-.015em;max-width:none;margin:2.6rem 0 .7rem}
section.legal .prose h3{font:700 1.25rem/1.25 var(--display);margin:1.8rem 0 .5rem}
section.legal .prose h4{font:700 1.05rem/1.3 var(--text);margin:1.4rem 0 .4rem}
section.legal .prose{margin-top:0}
section.legal .prose p,section.legal .prose li{font-size:1rem}
section.legal .prose a{word-break:break-word}

/* Aufzaehlung von Fakten (/ueber-masdemas) */
.fakten-liste{margin:1.8rem 0 0;padding-left:1.2rem;display:grid;gap:.6rem;max-width:68ch;line-height:1.6}
.fakten-liste li::marker{color:var(--glut)}
.fakten-liste a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.fakten-liste + .text-large{margin-top:2.2rem}

/* Liste eingesetzter Software als Pillen */
.tools{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 1.4rem}
.tools span{font:700 .9rem var(--mono);padding:.6rem 1.1rem;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent)}
.dunkel .tools span{background:var(--karte)}
.tools+.text-small{max-width:64ch}

/* ---------- Kopf-Szene HTML5-Banner: vier Formate bauen sich auf ----------
   Leaderboard oben, Medium Rectangle links, Skyscraper rechts, Mobile Banner
   unten (Formate wie auf der Seite genannt). Je Banner erscheinen Bild,
   Zeilen und zuletzt der Knopf, der Amber wird. --d staffelt die Banner. */
.kopf-szene--banner{aspect-ratio:10/9}
.kb{--d:.2s;position:absolute;background:#fff;border-radius:8px;overflow:hidden;display:flex;gap:12px;padding:16px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 22px 50px -18px rgba(60,40,10,.3);animation:kb-auf .7s var(--ease) var(--d) both}
.kb--leader{--d:.2s;left:0;top:0;width:100%;height:12%;align-items:center;padding:0 16px;gap:16px}
.kb--rect{--d:.9s;left:0;top:18%;width:62%;aspect-ratio:6/5;flex-direction:column;gap:12px;padding:18px}
.kb--sky{--d:1.6s;right:0;top:18%;width:19%;aspect-ratio:4/15;flex-direction:column;gap:10px;padding:12px 10px}
.kb--mobil{--d:2.3s;left:0;top:82%;width:62%;height:10.5%;align-items:center;padding:0 14px;gap:14px}
.kopf-szene .kb-bild{flex:none;position:relative;overflow:hidden;border-radius:5px;background:linear-gradient(150deg,#fde7c0 0,var(--glut) 130%);animation:kb-bild .6s var(--ease) calc(var(--d) + .3s) both}
/* Motiv je Format: gezeichnetes Bild (Sonne, zwei Berge) in eigenen Farben,
   wie das Bild in der KI-Animation. Kein Kundenmotiv, damit ein Flyer nicht
   ueberall auftaucht (Rueckmeldung 25.10.2026). */
.kopf-szene .kb-sonne{position:absolute;right:14%;top:14%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--glut)}
.kopf-szene .kb-berg{position:absolute;left:-8%;bottom:0;width:72%;height:64%;clip-path:polygon(0 100%,48% 6%,100% 100%);background:#0F766E}
.kopf-szene .kb-berg+.kb-berg{left:34%;width:76%;height:48%;background:#042F2E}
.kopf-szene .kb--leader .kb-bild{background:linear-gradient(180deg,#e9f3f1,#c9e4df)}
.kopf-szene .kb--rect .kb-bild{background:linear-gradient(180deg,#fdf4e4,#fde7c0)}
.kopf-szene .kb--rect .kb-berg{background:#000}
.kopf-szene .kb--rect .kb-berg+.kb-berg{background:#5c4a32}
.kopf-szene .kb--sky .kb-bild{background:linear-gradient(180deg,#0b0907,#2b2011)}
.kopf-szene .kb--sky .kb-sonne{background:#fde7c0;width:34%;top:10%}
.kopf-szene .kb--sky .kb-berg{background:var(--glut);height:50%}
.kopf-szene .kb--sky .kb-berg+.kb-berg{background:#9b6a12;height:36%}
.kopf-szene .kb--mobil .kb-sonne{width:34%;top:8%;right:8%}
.kb--leader .kb-bild{width:16%;height:66%}
.kb--rect .kb-bild{height:48%}
.kb--sky .kb-bild{height:48%}
.kb--mobil .kb-bild{width:13%;height:66%}
.kb-text{flex:1;display:flex;flex-direction:column;gap:9%;justify-content:center;min-width:0}
.kb--rect .kb-text,.kb--sky .kb-text{flex:none;gap:.45em}
.kopf-szene .kb-zeile{height:9px;width:90%;background:#000;animation:ks-zeile 1.4s var(--ease) calc(var(--d) + .4s) both}
.kopf-szene .kb-zeile--kurz{width:60%;background:#d8cdbb;height:6px}
.kb--leader .kb-zeile,.kb--mobil .kb-zeile{height:7px}
.kopf-szene .kb-knopf{flex:none;align-self:flex-start;width:30%;height:16%;border-radius:999px;background:var(--glut);transform-origin:50% 50%;animation:kb-knopf 1.2s var(--ease) calc(var(--d) + .6s) both}
.kb--leader .kb-knopf,.kb--mobil .kb-knopf{align-self:center;width:15%;height:44%}
.kb--sky .kb-knopf{width:100%;height:7%;margin-top:auto}
@keyframes kb-auf{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes kb-bild{from{opacity:0}to{opacity:1}}
@keyframes kb-knopf{0%,30%{transform:scale(0);background:#d8cdbb}55%{transform:scale(1.12);background:#d8cdbb}70%{transform:scale(1)}100%{transform:scale(1);background:var(--glut)}}

/* ---------- Kopf-Szene Online-Marketing: gefunden werden ----------
   Suchfeld fuellt sich, vier Treffer erscheinen, der eigene Treffer (Amber)
   rueckt von Platz 3 auf Platz 1, zuletzt erscheint eine KI-Antwort, die ihn
   als Quelle nennt. Masse in em, damit alles mit der Breite skaliert. */
.kopf-szene--suche{font-size:clamp(9px,1.05vw,15px)}
.km-fenster{position:relative;background:#fff;border-radius:16px;padding:1.6em 1.8em 2.2em;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 70px -20px rgba(60,40,10,.28);animation:ks-fenster 5.4s var(--ease) .2s both}
.km-feld{display:flex;align-items:center;gap:.8em;height:3em;padding:0 1.1em;border-radius:999px;box-shadow:inset 0 0 0 1px #e6ddd0}
.kopf-szene .km-lupe{flex:none;width:1.1em;height:1.1em;border-radius:50%;box-shadow:inset 0 0 0 .18em #000}
.kopf-szene .km-eingabe{height:.7em;width:46%;background:#000;animation:km-tippen 1.1s steps(6,end) .6s both}
.km-treffer{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:.6em}
.km-treffer li{height:4.2em;border-radius:10px;padding:.8em 1em;display:flex;flex-direction:column;gap:.45em;background:#faf7f2;animation:km-treffer .5s var(--ease) both}
.km-treffer li:nth-child(1){animation-delay:1.7s}.km-treffer li:nth-child(2){animation-delay:1.85s}.km-treffer li:nth-child(3){animation-delay:2s}.km-treffer li:nth-child(4){animation-delay:2.15s}
.kopf-szene .km-titel{height:.75em;width:58%;background:#9b8f80}
.kopf-szene .km-zeile{height:.5em;width:86%;background:#e6ddd0}
.kopf-szene .km-zeile--kurz{width:38%;height:.45em;background:#d8cdbb}
/* Der eigene Treffer steht am Ende oben (Endzustand), die Animation holt ihn von Platz 3 */
.km-treffer .km-eigen{background:#fff5e4;box-shadow:inset 0 0 0 1px var(--glut);animation:km-treffer .5s var(--ease) 2s both,km-hoch 1s var(--ease) 2.9s both}
.km-eigen .km-titel{background:#000}
.km-treffer .km-schiebt{animation:km-treffer .5s var(--ease) 1.7s both,km-runter 1s var(--ease) 2.9s both}
.km-treffer .km-schiebt + .km-schiebt{animation-delay:1.85s,2.9s}
.km-antwort{position:absolute;right:-6%;bottom:-14%;width:52%;background:#000;color:#fff;border-radius:14px;padding:1.1em 1.2em 1.3em;display:flex;flex-direction:column;gap:.55em;box-shadow:0 24px 50px -16px rgba(0,0,0,.45);animation:km-antwort .8s var(--ease) 4.1s both}
.km-funke{width:1.3em;height:1.3em;background:var(--glut);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);margin-bottom:.2em}
.kopf-szene .km-antwort .km-zeile{background:rgba(255,255,255,.55);width:92%}
.kopf-szene .km-antwort .km-zeile--kurz{width:64%}
.kopf-szene .km-quelle{width:42%;height:1.2em;border-radius:999px;background:var(--glut);margin-top:.3em}
@keyframes km-tippen{from{transform:scaleX(0)}to{transform:none}}
@keyframes km-treffer{from{opacity:0;transform:translateY(.6em)}to{opacity:1}}
@keyframes km-hoch{from{transform:translateY(9.6em)}to{transform:none}}
@keyframes km-runter{from{transform:translateY(-4.8em)}to{transform:none}}
@keyframes km-antwort{from{opacity:0;transform:translateY(1.2em) scale(.96)}to{opacity:1;transform:none}}

/* Kopf mit Figur (Kontakt, Werkzeug-Anfrage, Danke, 404): Figur steht frei
   auf dem Beige, ihr JPG traegt denselben Ton eingebrannt. Spalte der Figur
   nur so breit wie die Figur. */
.hero .grid-hero.kontakt-grid{grid-template-columns:minmax(0,1fr) auto}
.hero .grid-hero.danke-grid{grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
.kontakt-figur{display:flex;justify-content:flex-end}
.kontakt-loewe{height:320px;width:auto}
.danke-figur{display:flex;justify-content:center}
.danke-qex{height:280px;width:auto}
.fehler-qex{width:380px;max-width:100%;height:auto}
.hero .kick .dot.dot--fehler{background:#d9483b}
.fehler-weiter{margin-top:2rem}
.fehler-weiter + .hero-actions{margin-top:.8rem}
.fehler-weiter + .hero-actions .btn{padding:.7rem 1.1rem;font-size:.92rem}
.danke-insta{display:flex;align-items:flex-start;gap:.55rem;max-width:40ch;margin-top:1.6rem}
.danke-insta svg{width:18px;height:18px;flex:none;margin-top:.2rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.danke-insta a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@keyframes loewe-einflug{from{opacity:0;transform:translate(90px,26px) rotate(7deg) scale(.94)}to{opacity:1;transform:none}}
@media (scripting: enabled) and (prefers-reduced-motion:no-preference){.kontakt-loewe{opacity:0;animation:loewe-einflug 1.1s cubic-bezier(.22,1.15,.36,1) .15s forwards}}
/* Folgt das Formular direkt auf den beigen Kopf, wird es weiss, damit nicht
   zwei gleiche Flaechen aufeinander liegen. Das Siegel darunter rueckt an. */
main>.hero + #kontakt{--k-bg:#fff}
main>section:not(.legal):has(.siegel-row){padding-top:0}
.siegel-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;margin-top:1rem}
@media (max-width:760px){
  .hero .grid-hero.kontakt-grid,.hero .grid-hero.danke-grid{grid-template-columns:minmax(0,1fr);justify-items:start}
  .kontakt-figur{justify-content:flex-start}
  .kontakt-loewe{height:200px}
  .danke-qex{height:180px}
  .fehler-qex{width:260px}
}

/* ---------- Startseite: Startbuehne aus Entwurf 6 ----------
   Dunkle Karte mit dem Film "Eine Website entsteht". Am Rechner schrumpft sie
   beim Scrollen (--p, plakativ.js), Schrift und Film ruecken mit nach innen,
   danach blendet sie aus (--q) und das erste Kapitel faehrt darueber. Der
   Knopf "Animation anhalten" haengt direkt unter dem Film und wandert mit,
   damit ihn der KI-Assistent unten rechts nie verdeckt (Wunsch 25.10.2026).
   Am Handy: Ablauf von oben nach unten, kein Schrumpfen. */
main>section.buehne{--p:0;--q:0;position:relative;padding:0;background:#fff;color:#fff}
.buehne__klebt{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;transform:scale(calc(1 - var(--q) * .04))}
.buehne__karte{--it:calc(var(--p) * (var(--kopf-h) + 3vh));--is:calc(var(--p) * 6vw);--ib:calc(var(--p) * 5vh);position:absolute;inset:0;background:var(--nacht);display:flex;align-items:center;padding:calc(var(--kopf-h) + 2rem) calc(var(--gutter) + var(--is) + 1vw) 3rem;clip-path:inset(var(--it) var(--is) var(--ib) var(--is))}
.buehne__karte::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 75% 50%,rgba(245,158,11,.08),transparent 70%);pointer-events:none}
.buehne__inhalt{position:relative;width:100%;max-width:var(--breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.buehne__text{transform-origin:0 50%;transform:scale(calc(1 - var(--p) * .16))}
.buehne .kick{display:inline-flex;align-items:center;gap:.6rem;font:700 .8rem var(--mono);letter-spacing:.05em;margin-bottom:1.3rem}
.buehne .kick .dot{width:8px;height:8px;border-radius:50%;background:var(--glut)}
/* Hauptueberschrift: jeder Satz eine Zeile (min-content), "Digitale Loesungen." bleibt zusammen */
.buehne h1{font:800 min(5vw,9.6vh,5.6rem)/.98 var(--display);font-variation-settings:"wdth" 75;letter-spacing:-.03em;width:min-content;max-width:100%;overflow-wrap:normal;hyphens:manual}
.buehne h1 .accent{color:var(--glut);white-space:nowrap}
.buehne .hero-actions{margin-top:2rem}
.buehne .btn-primary{background:var(--glut);color:#000;border-color:var(--glut)}
.buehne .btn-primary:hover{background:#fff;border-color:#fff}
.buehne .btn-ghost{color:#fff}
.buehne .btn-ghost:hover{background:#fff;color:#000;border-color:#fff}
.buehne__motion{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;transform-origin:100% 50%;transform:scale(calc(1 - var(--p) * .1))}
.motion{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.motion iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;transform:scale(var(--s,.4));pointer-events:none}
.buehne .motion{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
/* Hochkant-Fassung fuer das Handy (1080 x 1620): am Rechner aus, am Handy statt
   der Querfassung. Ohne Randverlauf, die Ablaufkarten reichen fast bis zum Rand. */
.motion--hochkant{display:none;aspect-ratio:2/3}
.motion--hochkant iframe{width:1080px;height:1620px}
.buehne .motion--hochkant{-webkit-mask-image:none;mask-image:none}
@media (max-width:900px){.motion--quer{display:none}.motion--hochkant{display:block}}
.film-knopf{font:700 .75rem var(--mono);letter-spacing:.04em;color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:.55rem .9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.film-knopf svg{width:12px;height:12px;fill:currentColor}
.film-knopf:hover{background:#fff;color:#000;border-color:#fff}
@media (min-width:901px) and (scripting: enabled) and (prefers-reduced-motion:no-preference){
  main>section.buehne{height:230vh}
  /* Gegen die weisse Luecke nach dem Startbild: das erste Kapitel faehrt schon
     waehrend des Schrumpfens wie ein Blatt ueber die Karte (Entwurf 6) */
  main>section.buehne + section{margin-top:-62vh;z-index:2;box-shadow:0 -24px 60px rgba(0,0,0,.22)}
}
@media (max-width:900px){
  main>section.buehne{--p:0!important;--q:0!important}
  .buehne__klebt{position:relative;height:auto;overflow:visible;transform:none}
  .buehne__karte{position:relative;clip-path:none;display:block;padding:calc(var(--kopf-h) + 2.2rem) var(--gutter) 3rem}
  .buehne__inhalt{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .buehne__text,.buehne__motion{transform:none}
  .buehne h1{font-size:min(10.4vw,7vh,3.6rem)}
}

/* Startseite: Leistungskarten als Ganzes verlinkt (wie live), "Mehr erfahren" unten */
a.scard{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s var(--ease)}
a.scard:hover{box-shadow:inset 0 0 0 1px var(--glut),0 18px 40px -22px rgba(60,40,10,.4);transform:translateY(-3px)}
a.scard .body{display:flex;flex-direction:column;flex:1}
.scard .more{margin-top:auto;padding-top:.9rem;font-weight:700;font-size:.95rem}
a.scard:hover .more{text-decoration:underline;text-underline-offset:3px}

/* KI-Hinweis: Teil des Kopfbereichs. Liegt als ruhige Kennzeichnung oben im
   Kopfbereich, buendig mit dem Text darunter, statt als eigener Streifen ueber
   der Seite (Rueckmeldung 25.10.2026: lag ausserhalb des Layouts). Steht weiter
   vor der Ueberschrift, damit er vor dem Text gelesen wird. */
main{position:relative}
.ki-hinweis{position:absolute;z-index:2;top:calc(var(--kopf-h) + 1.4rem);left:0;right:0;padding:0 var(--gutter);color:#000;pointer-events:none}
/* Kapsel buendig mit dem Textraster (gleiche linke Kante wie die Ueberschrift) */
.ki-hinweis__inner{pointer-events:auto;display:flex;align-items:center;gap:.6rem;width:fit-content;max-width:min(100%,var(--breite));margin:0 auto 0 max(0px,calc((100% - var(--breite)) / 2));padding:.45rem .95rem .45rem .5rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);background:rgba(255,255,255,.7)}
.ki-hinweis__icon{flex:none;width:22px;height:22px}
.ki-hinweis p{font-size:.8rem;line-height:1.4}
/* ~ statt +: zwischen Hinweis und Kopfbild kann die Artikel-Auszeichnung (JSON-LD) stehen */
.ki-hinweis ~ .hero{padding-top:calc(var(--kopf-h) + 5.5rem)}
@media (max-width:600px){.ki-hinweis__inner{border-radius:14px;align-items:flex-start}.ki-hinweis ~ .hero{padding-top:calc(var(--kopf-h) + 8rem)}}

/* ---------- Kapitel: Abschnitte mit grosser Ueberschrift ---------- */
main>section{position:relative;padding:calc(var(--kopf-h) + clamp(2rem,5vh,4rem)) var(--gutter) clamp(3.5rem,9vh,6.5rem);background:var(--k-bg,#fff);color:var(--k-fg,#000)}
main>section.alt{--k-bg:var(--beige)}
main>section.dunkel{--k-bg:var(--nacht);--k-fg:#fff}
main>section.hero{padding-top:calc(var(--kopf-h) + 3rem)}
.wrap{max-width:var(--breite);margin:0 auto}
.chapter-tag{display:flex;align-items:center;gap:.5rem;font:700 .8rem var(--mono);letter-spacing:.06em;margin-bottom:1rem}
.chapter-tag .no::after{content:"\00B7";margin-left:.5rem}
.dunkel .chapter-tag{color:var(--glut)}
/* Grosse Ueberschriften ohne Silbentrennung: "Leistun-gen" wirkt bei dieser
   Groesse wie ein Fehler. Dafuer genug Breite fuer die laengsten Woerter. */
.wrap>h2{font:800 min(5.2vw,4.8rem)/.98 var(--display);letter-spacing:-.035em;max-width:24ch;hyphens:manual}
.accent{color:var(--glut)}
.sum,.section-sub{max-width:54ch;margin-top:1.2rem;font-size:1.12em}
.section-sub{font:700 .9rem var(--mono);letter-spacing:.04em}
.text-large{max-width:64ch;font-size:1.12em;margin-top:2rem}
.text-small{font-size:.92rem}
.text-large a,.text-small a,.prose a,.icard p a,.faktenblock a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:2.4rem}

/* Einblenden beim Erreichen (main.js setzt .in). Ohne Skript bleibt alles sichtbar. */
@media (scripting: enabled){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin-top:clamp(1.8rem,4vh,3rem)}
.cards+.cards{margin-top:clamp(.8rem,1.6vw,1.2rem)}
.scard,.icard{padding:1.15rem 1.25rem 1.35rem;border-radius:16px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);background:color-mix(in srgb,currentColor 4%,transparent)}
.alt .scard,.alt .icard{background:#fff;box-shadow:none}
.dunkel .scard,.dunkel .icard{background:var(--karte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* Kartenbilder ungeschnitten wie auf der Live-Seite: quadratische Bilder
   bleiben quadratisch (Logo mittig), Bilder mit KI-Kennzeichen 4:3 */
.scard .shot img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:1rem}
.scard .shot--43 img{aspect-ratio:4/3}
.scard .num,.vs-label{display:block;font:700 .72rem var(--mono);letter-spacing:.06em;margin-bottom:.5rem}
.dunkel .vs-label{color:var(--glut)}
.scard h3,.icard h3{font:700 1.3rem/1.2 var(--display);letter-spacing:-.01em}
.scard p,.icard p{font-size:.96rem;line-height:1.55;margin-top:.5rem}
.icard h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.icard h3 a:hover{background-size:0 2px}
.icard .ic{width:46px;height:46px;border-radius:12px;background:var(--glut);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.icard .ic svg{width:24px;height:24px;stroke:#000;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Karten mit Status und Funktionsliste (Plugins auf /wordpress, Werkzeuge):
   zwei nebeneinander, Knopf immer unten buendig */
.wz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin-top:clamp(1.8rem,4vh,3rem)}
.icard.wz-card{display:flex;flex-direction:column}
.wz-marken{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.wz-status{display:inline-flex;align-items:center;gap:.45rem;font:700 .72rem var(--mono);letter-spacing:.04em;padding:.3rem .7rem;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent)}
.wz-status .dot{width:8px;height:8px;border-radius:50%;background:var(--glut)}
.wz-status{white-space:nowrap}
.wz-status svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wz-stufen{margin:.9rem 0 0;padding-left:1.1rem;display:grid;gap:.4rem;font-size:.94rem;line-height:1.5}
.wz-stufen li::marker{color:var(--glut)}
.wz-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:1.4rem}
/* Werkzeug-Karten (/werkzeuge): Bild mit hellem Schleier und Schild
   "Noch nicht freigeschaltet", Knoepfe unten buendig */
.scard.wz-card{display:flex;flex-direction:column}
.wz-card .body{display:flex;flex-direction:column;flex:1}
.wz-card .shot--43{position:relative;border-radius:10px;overflow:hidden;margin-bottom:1rem}
.wz-card .shot--43 img{margin:0;border-radius:0;object-position:50% 0}
.wz-card .shot--43::after{content:"";position:absolute;inset:0;background:rgba(247,242,235,.55)}
.wz-schloss{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;font:700 .8rem var(--mono);color:#fff;background:#000;border-radius:999px;padding:.65rem 1.1rem;box-shadow:0 10px 28px -10px rgba(0,0,0,.6)}
.wz-schloss svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wz-card .body p.wz-hinweis,.wz-hinweis{font-size:.9rem;line-height:1.5;padding:.75rem .95rem;border-radius:10px;background:var(--beige);margin-top:.9rem}
.alt .wz-hinweis{background:#fff}
.wz-actions .btn{padding:.75rem 1.1rem;font-size:.92rem}
.wz-actions .btn-primary,.btn-primary.wz-anfrage{background:var(--glut);border-color:var(--glut);color:#000}
.wz-actions .btn-primary:hover,.btn-primary.wz-anfrage:hover{background:#000;border-color:#000;color:#fff}
.wz-plugins{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem 1.6rem;margin-top:1.4rem}
.wz-plugins .ic{margin-bottom:0}
.wz-cta-hinweis{margin-top:.9rem;font-size:.92rem}
@media (max-width:768px){.wz-plugins{grid-template-columns:1fr;align-items:start}}
.dunkel .wz-actions .btn-primary{background:var(--glut);border-color:var(--glut);color:#000}
.dunkel .wz-actions .btn-primary:hover{background:#fff;border-color:#fff}

/* Weiterfuehrende Links als Pillen */
.related{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.8rem,4vh,2.6rem)}
.related a{font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:.7rem 1.15rem;transition:background-color .2s,color .2s,border-color .2s}
.related a:hover{background:var(--glut);border-color:var(--glut);color:#000}

/* ---------- Fliesstext und Fakten ---------- */
.prose{margin-top:1.8rem}
.prose>*{max-width:68ch}
.prose p{font-size:1.04em;line-height:1.7}
.prose p+p{margin-top:1rem}
/* Nummerierte Schritte als geschlossene Kaesten wie die Karten, damit klar
   ist, was zusammengehoert (Rueckmeldung 25.10.2026: Nummern wirkten, als
   gehoerten sie zum Text darunter). Abstand nach unten trennt sie vom Fliesstext. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin:clamp(1.8rem,4vh,3rem) 0 clamp(2rem,5vh,3.2rem)}
.step{padding:1.15rem 1.25rem 1.35rem;border-radius:16px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);background:color-mix(in srgb,currentColor 4%,transparent)}
.alt .step{background:#fff;box-shadow:none}
.dunkel .step{background:var(--karte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.step .snum{width:46px;height:46px;border-radius:12px;background:var(--glut);color:#000;display:grid;place-items:center;font:700 1.1rem var(--mono);margin-bottom:1rem}
.step h3{font:700 1.3rem/1.2 var(--display);letter-spacing:-.01em}
.step p{font-size:.96rem;line-height:1.55;margin-top:.5rem}
.steps+.prose{margin-top:0}
.faktenblock{margin-top:clamp(1.8rem,4vh,2.8rem);max-width:64rem}
.faktenblock dl{display:grid;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);box-shadow:inset 0 1px 0 color-mix(in srgb,currentColor 30%,transparent)}
.faktenblock dt,.faktenblock dd{padding:.85rem 0;box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor 15%,transparent)}
.faktenblock dt{font:700 .78rem/1.9 var(--mono);letter-spacing:.05em;padding-right:1.2rem}
.faktenblock dd{line-height:1.55}
.stand{font:400 .85rem var(--mono);margin-top:2.4rem}

/* Gegenueberstellung: Thema links, beide Systeme rechts nebeneinander */
.vs-topic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.7fr);gap:1.2rem clamp(1.5rem,3vw,3rem);margin-top:clamp(2rem,5vh,3.2rem);padding-top:1.6rem;box-shadow:inset 0 1px 0 color-mix(in srgb,currentColor 22%,transparent)}
/* Der Thementitel laeuft beim Lesen langer Karten mit */
.vs-topic h3{font:800 min(2.4vw,2rem)/1.05 var(--display);letter-spacing:-.02em;position:sticky;top:calc(var(--kopf-h) + 1.5rem);align-self:start}
.vs-topic .cards{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- Ablauf "So entsteht eine Website" (Animation aus main.js) ---------- */
.journey{margin-top:clamp(1.8rem,4vh,3rem)}
.journey__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.journey__eyebrow{font:700 .8rem var(--mono);letter-spacing:.05em}
.dunkel .journey__eyebrow{color:var(--glut)}
.replay{font:700 .75rem var(--mono);letter-spacing:.04em;padding:.55rem .9rem;background:none;color:inherit;gap:.45rem}
.replay svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.replay:hover{background:var(--glut);color:#000;border-color:var(--glut)}
.replay.is-playing{opacity:.55;pointer-events:none}
.jstrip{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2.4rem}
.jstage{--dot:rgba(255,255,255,.4);position:relative;display:flex;flex-direction:column;gap:1rem;min-width:0}
.jstage::after{content:"";position:absolute;top:90px;right:-2.4rem;width:2.4rem;height:2px;background:radial-gradient(circle,var(--dot) 1px,transparent 1.5px) 0 50%/8px 2px repeat-x}
.jstage:last-child::after{display:none}
.jstage.lit{--dot:var(--glut)}
.jstage__canvas{position:relative;height:180px;border-radius:16px;background:var(--karte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .35s,box-shadow .35s,background-color .35s}
.jstage.on .jstage__canvas{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--glut),0 0 28px rgba(245,158,11,.22)}
.jstage.done .jstage__canvas{background:#2b2011;box-shadow:inset 0 0 0 1px rgba(245,158,11,.55)}
.jstage__hd{display:flex;align-items:center;gap:.6rem}
.jstage__num{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.1);font:700 .82rem var(--mono);flex:none;transition:background-color .3s,color .3s}
.jstage.on .jstage__num,.jstage.done .jstage__num{background:var(--glut);color:#000}
.jstage__t{font:700 1.15rem/1.2 var(--display)}
.jstage__d{display:block;font-size:.92rem;margin-top:.35rem}
.cv-icon{width:76px;height:76px;border-radius:18px;background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px rgba(245,158,11,.45);display:grid;place-items:center}
.cv-icon svg{width:38px;height:38px;stroke:var(--glut);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cv-mock{width:66px;height:82px;background:#fff;border-radius:9px;padding:8px;display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.cv-mock .bar{height:10px;border-radius:3px;background:#d8cdbb;flex:none}
.cv-mock .img{flex:1;border-radius:4px;background:#f2e9de}
.cv-mock .ln{height:4px;border-radius:3px;background:#e6ddd0;flex:none}
.cv-mock .ln.s{width:62%}
.cv-mock.color .bar{background:var(--glut)}
.cv-mock.color .img{background:#fde7c0}
.cv-mock.color .ln{background:#cbb89a}
.cv-mock.color .ln.s{background:var(--glut)}
.cv-screen{width:82px;height:66px;background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.45);display:flex;flex-direction:column}
.cv-screen .top{height:13px;background:#f2e9de;display:flex;align-items:center;gap:3px;padding:0 6px}
.cv-screen .top i{width:4px;height:4px;border-radius:50%;background:#d8cdbb}
.cv-screen .body{flex:1;display:flex;flex-direction:column;gap:4px;padding:7px}
.cv-screen .body b{height:8px;width:70%;border-radius:3px;background:var(--glut)}
.cv-screen .body u{height:5px;border-radius:3px;background:#d8cdbb;text-decoration:none}
.cv-screen .body u.s{width:55%}
.cv-badge{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--glut);color:#000}
.cv-badge svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cv-badge.green{background:#2f9e63;color:#fff}
/* Datei-Paket (Uebergabe im Grafik-Ablauf) */
.cv-files{position:relative;width:66px;height:80px}
.cv-files span{position:absolute;width:50px;height:66px;border-radius:8px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.cv-files span:nth-child(1){left:0;top:8px;transform:rotate(-7deg);background:#fde7c0}
.cv-files span:nth-child(2){left:12px;top:4px;transform:rotate(5deg)}
.cv-files span:nth-child(3){left:7px;top:0;background:linear-gradient(160deg,#fff,#fde7c0)}

/* ---------- Haeufige Fragen (aufklappbar ohne Skript) ---------- */
.faq-liste{margin-top:clamp(1.8rem,4vh,3rem);display:grid;gap:.7rem;max-width:64rem}
.faq-item{border-radius:14px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);transition:box-shadow .2s,background-color .2s}
.faq-item[open]{background:color-mix(in srgb,currentColor 4%,transparent)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.25rem;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary h3{font:700 1.15rem/1.3 var(--display)}
.faq-item summary:focus-visible{outline-offset:-3px;border-radius:14px}
.faq-item__icon{flex:none;width:30px;height:30px;border-radius:999px;background:var(--glut);display:grid;place-items:center;transition:transform .25s var(--ease)}
.faq-item__icon svg{width:16px;height:16px;stroke:#000;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.faq-item[open] .faq-item__icon{transform:rotate(180deg)}
.faq-item__body{padding:0 1.25rem 1.2rem}
.faq-item__body p{max-width:70ch}
.faq-item__body p+p{margin-top:.75rem}

/* ---------- Kontaktbereich: Ueberschrift links, Formular rechts ---------- */
#kontakt .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 clamp(2rem,5vw,5rem);align-items:start}
#kontakt .wrap>*{grid-column:1}
#kontakt .wrap>h2{font-size:min(3.9vw,3.6rem)}
#kontakt .wrap>h2 .accent{display:block}
#kontakt .form{grid-column:2;grid-row:1 / span 5}
.form{display:grid;gap:1rem}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.form-group{display:grid;gap:.4rem}
.form-group.honeypot{display:none}
.form-group label{font-weight:700;font-size:.95rem}
.form-group input,.form-group textarea,.form-group select{font:inherit;font-size:1rem;color:inherit;padding:.9rem 1rem;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.dunkel .form-group input,.dunkel .form-group textarea,.dunkel .form-group select{background:color-mix(in srgb,currentColor 4%,transparent)}
.form-group input::placeholder,.form-group textarea::placeholder{color:inherit;opacity:.75}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--glut);box-shadow:0 0 0 3px rgba(245,158,11,.3)}
.form-group textarea{resize:vertical;min-height:8.5rem}
.form-group select{width:100%;max-width:100%;min-width:0}
.form-checkbox label{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;font-size:.92rem;line-height:1.5}
.form-checkbox input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--glut);flex:none}
.form-checkbox a{font-weight:700}
.form-group.fehlt input,.form-group.fehlt textarea,.form-group.fehlt select{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.2)}
.form button[type=submit]{justify-self:start;font:700 1rem/1 var(--text);padding:1.05rem 1.55rem;border-radius:999px;border:1px solid #000;background:#000;color:#fff;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.form button[type=submit]:hover{background:var(--glut);border-color:var(--glut);color:#000}
.form-hinweis{margin-top:1.4rem;padding:1rem 1.1rem;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #c0392b;font-size:.95rem}
.form-hinweis[hidden]{display:none}
.formular__test{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;padding:1rem 1.1rem;border-radius:14px;background:color-mix(in srgb,currentColor 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent)}
.formular__test[hidden]{display:none}
.formular__test b{font:700 .72rem var(--mono);background:var(--glut);color:#000;padding:.2rem .5rem;border-radius:4px}
.formular__test a{font-weight:700}

/* ---------- Fuss ---------- */
footer{background:#000;color:#fff;padding:3rem var(--gutter) 3.5rem;display:grid;gap:1.4rem;font-size:.95rem}
footer>*{width:100%;max-width:var(--breite);margin:0 auto}
footer .brand img{height:25px;width:136px;filter:invert(1)}
footer .flinks{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-weight:600}
footer .flinks a,footer .social a{text-decoration:none}
footer .flinks a:hover,footer .social a:hover{text-decoration:underline}
footer .social a{display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
footer .social svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1100px){
  .jstrip{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .jstage:nth-child(2n)::after{display:none}
  .vs-topic{grid-template-columns:1fr}
  .vs-topic h3{font-size:1.6rem;position:static}
}
@media (max-width:900px){
  main>section{padding-top:calc(var(--kopf-h) + 2.5rem)}
  .wrap>h2{font-size:min(9vw,2.8rem)}
  section.legal .wrap>h2,section.legal .prose h2{font-size:1.45rem}
  .hero h1,.hero .grid-hero:has(.kopf-szene) h1{font-size:min(10vw,8vh,3.6rem)}
  main>.hero:has(+ section.legal) .grid-hero h1{font-size:min(8vw,2.4rem);white-space:normal;hyphens:manual}
  .hero .grid-hero:has(.kopf-szene){grid-template-columns:minmax(0,1fr)}
  .kopf-szene{justify-self:start;max-width:26rem;margin:0 0 10%}
  /* Am Handy endet alles innerhalb der Szene, nichts klebt am Bildschirmrand */
  .km-antwort,.ks-handy{right:0}
  #kontakt .wrap{grid-template-columns:minmax(0,1fr)}
  #kontakt .form{grid-column:1;grid-row:auto;margin-top:1.8rem}
  #kontakt .wrap>h2{font-size:9vw}
  .ba,.cflow,.cteaser,.cteaser__visual{grid-template-columns:minmax(0,1fr)}
  .cflow__steps li{white-space:normal}
  .cteaser__arrow{transform:rotate(90deg)}
  .cteaser h3{font-size:1.5rem}
}
@media (max-width:760px){
  .jstrip{grid-template-columns:1fr;gap:2.4rem}
  .jstage::after,.jstage:nth-child(2n)::after{display:block;top:auto;bottom:-2.4rem;right:auto;left:2rem;width:2px;height:2.4rem;background:radial-gradient(circle,var(--dot) 1px,transparent 1.5px) 50% 0/2px 8px repeat-y}
  .jstage:last-child::after{display:none}
  .vs-topic .cards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .form-row{grid-template-columns:1fr}
  .faktenblock dl{grid-template-columns:1fr}
  .faktenblock dt{padding-bottom:0;box-shadow:none}
  .faktenblock dd{padding-top:.2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media (prefers-reduced-motion:reduce) and (scripting: enabled){
  .reveal{opacity:1;transform:none}
}