@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Inter-Regular.woff) format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Inter-SemiBold.woff) format('woff')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/InterTight-Regular.woff) format('woff')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/InterTight-SemiBold.woff) format('woff')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/InterTight-Bold.woff) format('woff')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Fraunces-Regular.woff) format('woff')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Fraunces-SemiBold.woff) format('woff')}
/* =========================================================
   base.css - Startpunkt für style.css einer Variante
   Tokens in :root aus dem Steckbrief (02-richtungen.md) füllen.
   Komponenten unten sind bewusst schlicht; Charakter kommt aus
   Tokens, Typografie und Layoutentscheidungen der Variante.
   ========================================================= */

/* ---------- 1. Tokens (je Variante ersetzen) ---------- */
:root {
  /* Farben - 4-6 benannte Werte aus dem Steckbrief */
  --grund: #ffffff;
  --flaeche: #f3f4f6;
  --text: #16181d;
  --text-2: #4b5563;
  --linie: #d9dbe0;
  --akzent: #1f4e79;
  --akzent-text: #ffffff;
  --akzent-2: #c98a2b;

  /* Schriften - Google Fonts <link> im <head>, Fallback hier */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typo-Skala (rem) - im Steckbrief festgelegt */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.5rem;
  --t-3xl: clamp(2.5rem, 5.5vw, 4.25rem);
  --lh-text: 1.6;
  --lh-tight: 1.1;

  /* Raster und Abstände */
  --max: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 7rem;

  /* Form */
  --radius: 4px;
  --linie-staerke: 1px;
  --schatten: none;

  /* Bewegung - Charakter aus Achse 5 */
  --dauer-kurz: 220ms;
  --dauer-lang: 900ms;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-m);
  line-height: var(--lh-text);
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ---------- 3. Typografie ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
.lead { font-size: var(--t-l); color: var(--text-2); max-width: 60ch; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-2); }
.klein { font-size: var(--t-s); color: var(--text-2); }

/* ---------- 4. Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.abschnitt { padding-block: var(--s-5); }
.abschnitt--gross { padding-block: var(--s-6); }
.abschnitt--flaeche { background: var(--flaeche); }
.raster { display: grid; gap: var(--s-3); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stapel > * + * { margin-top: var(--s-2); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Skip-Link */
.skip { position: absolute; left: -999px; top: var(--s-1); background: var(--akzent); color: var(--akzent-text); padding: var(--s-1) var(--s-2); z-index: 100; }
.skip:focus { left: var(--s-2); }

/* ---------- 5. Header / Navigation ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--grund);
  border-bottom: var(--linie-staerke) solid transparent;
  transition: padding var(--dauer-kurz) var(--kurve), border-color var(--dauer-kurz), background var(--dauer-kurz);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); }
.header.is-kompakt { border-bottom-color: var(--linie); }
.header.is-kompakt .wrap { padding-block: var(--s-1); }
.logo { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.nav ul { display: flex; gap: var(--s-3); }
.nav a { text-decoration: none; padding-block: var(--s-1); position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--akzent); transition: right var(--dauer-kurz) var(--kurve); }
.nav a:hover::after, .nav a.is-current::after { right: 0; }
.menue-btn { display: none; background: none; border: var(--linie-staerke) solid var(--linie); border-radius: var(--radius); padding: var(--s-1) var(--s-2); }
@media (max-width: 1023px) {
  .nav { position: fixed; inset: 0; background: var(--grund); padding: var(--s-6) var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--dauer-kurz), visibility var(--dauer-kurz); z-index: 60; }
  .nav.is-offen { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; gap: var(--s-2); font-size: var(--t-xl); }
  .menue-btn { display: inline-block; z-index: 70; position: relative; }
  body.menue-offen { overflow: hidden; }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.8em 1.4em; border-radius: var(--radius);
  border: var(--linie-staerke) solid var(--akzent);
  background: var(--akzent); color: var(--akzent-text);
  text-decoration: none; font-weight: 600; line-height: 1;
  transition: background var(--dauer-kurz), color var(--dauer-kurz), border-color var(--dauer-kurz);
}
.btn:hover { background: color-mix(in srgb, var(--akzent) 85%, black); }
.btn--sekundaer { background: transparent; color: var(--text); border-color: var(--linie); }
.btn--sekundaer:hover { border-color: var(--text); }
.btn--gross { padding: 1em 1.8em; font-size: var(--t-l); }

/* ---------- 7. Hero (Grundgerüst, je Variante umbauen) ---------- */
.hero { position: relative; overflow: hidden; min-height: min(88vh, 900px); display: grid; align-items: end; }
.hero__medium { position: absolute; inset: 0; }
.hero__medium img, .hero__medium video { width: 100%; height: 100%; object-fit: cover; }
.hero__inhalt { position: relative; padding-block: var(--s-5); }
.hero__inhalt .lead { margin-top: var(--s-3); }
.hero__cta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero--ohne-medium { min-height: 0; align-items: center; padding-block: var(--s-6); }

/* ---------- 8. Komponenten ---------- */
.karte { padding: var(--s-3); border: var(--linie-staerke) solid var(--linie); border-radius: var(--radius); background: var(--grund); }
.karte h3 { margin-bottom: var(--s-1); }
.kennzahl { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.kennzahl + .klein { margin-top: var(--s-1); }
.zitat { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.35; max-width: 32ch; }
.zitat + figcaption { margin-top: var(--s-2); }
.akkordeon details { border-top: var(--linie-staerke) solid var(--linie); }
.akkordeon details:last-child { border-bottom: var(--linie-staerke) solid var(--linie); }
.akkordeon summary { cursor: pointer; padding-block: var(--s-2); font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after { content: "+"; }
.akkordeon details[open] summary::after { content: "–"; }
.akkordeon .inhalt { padding-bottom: var(--s-2); max-width: 68ch; }
.formular { display: grid; gap: var(--s-2); max-width: 560px; }
.formular label { display: grid; gap: 0.35em; font-size: var(--t-s); }
.formular input, .formular select, .formular textarea { padding: 0.7em 0.9em; border: var(--linie-staerke) solid var(--linie); border-radius: var(--radius); background: var(--grund); }
.formular textarea { min-height: 8em; resize: vertical; }
.hinweis { padding: var(--s-2); background: var(--flaeche); border-radius: var(--radius); }
.footer { padding-block: var(--s-5); border-top: var(--linie-staerke) solid var(--linie); font-size: var(--t-s); }
.footer .raster { gap: var(--s-4); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- 9. Bewegung ---------- */
/* Reveal: Element bekommt data-reveal, cinematic.js setzt is-sichtbar */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve); transition-delay: var(--verzoegerung, 0ms); }
[data-reveal].is-sichtbar { opacity: 1; transform: none; }

/* C02 Zeilen-Maske: jede Zeile in <span class="zeile"><span>…</span></span> */
.zeile { display: block; overflow: hidden; }
.zeile > span { display: block; transform: translateY(110%); transition: transform var(--dauer-lang) var(--kurve); }
.is-bereit .zeile > span { transform: none; }
.is-bereit .zeile:nth-child(2) > span { transition-delay: 80ms; }
.is-bereit .zeile:nth-child(3) > span { transition-delay: 160ms; }
.is-bereit .zeile:nth-child(4) > span { transition-delay: 240ms; }

/* C03 Ken-Burns */
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.kenburns { animation: kenburns 10s var(--kurve) forwards; transform-origin: 50% 40%; }

/* C01 Vorhang */
.vorhang { position: fixed; inset: 0; background: var(--akzent); z-index: 90; transform-origin: top; transition: transform var(--dauer-lang) var(--kurve); }


/* C06 Verlaufs-Atem */
@keyframes atem { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.atem { background-size: 200% 200%; animation: atem 24s ease-in-out infinite; }

/* C07 Schärfezug */
.schaerfezug { filter: blur(18px); transform: scale(1.04); transition: filter 1200ms var(--kurve), transform 1200ms var(--kurve); }
.is-bereit .schaerfezug { filter: blur(0); transform: none; }

/* C09 Horizontaler Zug: Inhalt im Markup doppelt */
.zug { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.zug__spur { display: flex; gap: var(--s-4); width: max-content; animation: zug 40s linear infinite; }
.zug:hover .zug__spur { animation-play-state: paused; }
@keyframes zug { to { transform: translateX(-50%); } }

/* C11 Spot */
.spot { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--akzent) 28%, transparent), transparent 70%); }

/* Reduced motion - nicht überschreiben */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal], .zeile > span, .schaerfezug { opacity: 1 !important; transform: none !important; filter: none !important; }
  .vorhang { display: none !important; }
}

/* ===== Advinq CI – Tokens hell (Papier) und Bühne dunkel (.dunkel) ===== */
:root{
  --grund:#F6F2EA; --flaeche:#FFFDF8; --text:#14181A; --text-2:#5C6570; --linie:#E3DDD0;
  --akzent:#C8552A; --akzent-2:#C8552A; --akzent-text:#F6F2EA;
  --btn:#14181A; --btn-text:#F6F2EA; --btn-wipe:#343C42; --btn-wipe-text:#FFFDF8; --btn-pfeil:#E86A3A;
  --logo-ring:#14181A; --logo-tail:#C8552A;
  --font-mark:"Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:Fraunces, Georgia, "Times New Roman", serif;
  --kurve:cubic-bezier(.16,1,.3,1);
}
.dunkel{
  --grund:#0B0F14; --flaeche:#141A21; --text:#E6EAEF; --text-2:#9AA3AD; --linie:#1E2630;
  --akzent:#E86A3A; --akzent-2:#E86A3A; --akzent-text:#0B0F14;
  --btn:#E86A3A; --btn-text:#0B0F14; --btn-wipe:#F39B76; --btn-wipe-text:#0B0F14; --btn-pfeil:#0B0F14;
  --logo-ring:#FFFFFF; --logo-tail:#E86A3A;
  background:var(--grund); color:var(--text); color-scheme:dark;
}
[hidden]{display:none!important}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text)}
.logo svg{flex:none}
.wortmarke{font-family:var(--font-mark);font-weight:600;letter-spacing:-.02em;line-height:1}
.akz{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.klein{font-size:var(--t-s);color:var(--text-2)}

/* ---- M27 Team-Zeichen ---- */
.tmark{position:relative;aspect-ratio:1}
.tmark svg{width:100%;height:100%;display:block;overflow:visible}
.tmark .seg{fill:none;stroke:var(--logo-ring);stroke-width:10;stroke-dasharray:30;stroke-dashoffset:0;
  animation:a-zeichnen .8s cubic-bezier(.3,.7,.2,1) both, a-arbeit 6s ease-in-out infinite;transition:stroke .35s,opacity .35s,stroke-width .35s}
.tmark .schweif{stroke:var(--logo-tail);stroke-width:10;stroke-dasharray:10;stroke-dashoffset:0;animation:a-zeichnen10 .5s cubic-bezier(.3,.7,.2,1) both;transition:stroke-width .35s,opacity .35s}
.tmark.is-fokus .seg,.tmark.is-fokus .schweif{opacity:.18;animation-play-state:paused}
.tmark.is-fokus .is-an{opacity:1;stroke:var(--akzent);stroke-width:13}
.tmark.is-fokus .schweif.is-an{stroke:var(--logo-tail)}
@keyframes a-zeichnen{from{stroke-dashoffset:30}}
@keyframes a-zeichnen10{from{stroke-dashoffset:10}}
@keyframes a-arbeit{0%,100%{opacity:.45}8%,22%{opacity:1}30%{opacity:.45}}
.rolle{display:grid;gap:.25rem;text-align:left;background:none;border:0;border-top:1px solid var(--linie);padding:1rem 0;color:var(--text);width:100%;font:inherit}
.rolle b{font-family:var(--font-mark);font-size:1.15rem;display:flex;align-items:center;gap:.6rem}
.rolle b::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--text-2);transition:background .3s,transform .3s var(--kurve)}
.rolle span{color:var(--text-2);font-size:var(--t-s);max-width:52ch}
.rolle[aria-pressed="true"] b::before,.rolle:hover b::before{background:var(--akzent);transform:scale(1.3)}
.rolle--sie b::before{background:var(--akzent)}

/* ---- M26 Orbit ---- */
.orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin-inline:auto}
.orbit .bahn{position:absolute;inset:6%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--text) 28%,transparent)}
.orbit .bahn.b2{inset:24%;border-style:solid;border-color:var(--linie)}
.orbit .dreh{position:absolute;inset:6%;animation:a-dreh 52s linear infinite}
.orbit .funke{position:absolute;inset:6%;animation:a-dreh 7s linear infinite}
.orbit .funke i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--akzent);box-shadow:0 0 18px var(--akzent)}
.orbit .chip{position:absolute;transform:translate(-50%,-50%)}
.orbit .chip span{display:inline-flex;align-items:center;gap:.45rem;height:2.1rem;padding:0 .85rem;border-radius:999px;background:var(--flaeche);color:var(--text);
  border:1px solid var(--linie);font:600 .8rem/1 var(--font-mark);white-space:nowrap;animation:a-zurueck 52s linear infinite}
.orbit .chip span i{width:.45rem;height:.45rem;border-radius:50%;background:var(--text-2)}
.orbit .chip.heiss span i{background:var(--akzent)}
.orbit .kern{position:absolute;inset:0;display:grid;place-items:center}
.orbit .kern .tmark{width:36%}
.orbit .puls{position:absolute;left:50%;top:50%;width:32%;aspect-ratio:1;margin:-16% 0 0 -16%;border-radius:50%;border:1.5px solid var(--akzent);animation:a-ping 3.4s ease-out infinite;opacity:0}
.orbit .puls.p2{animation-delay:1.7s}
@keyframes a-dreh{to{transform:rotate(360deg)}}
@keyframes a-zurueck{to{transform:rotate(-360deg)}}
@keyframes a-ping{0%{transform:scale(.7);opacity:.8}100%{transform:scale(2.3);opacity:0}}

/* ---- M28 Freigabe-Demo ---- */
.demo{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;overflow:hidden;color:var(--text)}
.demo__leiste{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--linie);font:600 .78rem/1 var(--font-mark);color:var(--text-2)}
.demo__leiste i{width:.6rem;height:.6rem;border-radius:50%;background:var(--linie)}
.demo__leiste span{margin-left:.6rem}
.demo__koerper{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.demo__inbox{padding:1.2rem;display:grid;gap:.8rem;align-content:start;border-right:1px solid var(--linie)}
.demo__tag{padding:1.2rem}
.demo__titel{font:600 1rem/1.2 var(--font-mark);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .2rem}
.demo__titel small{font:400 .82rem var(--font-text);color:var(--text-2)}
.post{border:1px solid var(--linie);border-radius:10px;padding:.9rem 1rem;background:var(--grund);display:grid;gap:.35rem;transition:opacity .45s,transform .45s var(--kurve)}
.post.is-frei{opacity:0;transform:translateX(40px)}
.post__kopf{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-2)}
.post__kanal{font-weight:600;color:var(--text)}
.post__titel{font:600 1rem/1.3 var(--font-mark)}
.post__text{font-size:.88rem;color:var(--text-2)}
.post__ki{font-size:.74rem;color:var(--text-2);font-style:italic}
.post__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.3rem}
.post__wer{margin-left:auto;font-size:.76rem;color:var(--text-2)}
.demo__fertig{padding:1rem;border:1px dashed var(--akzent);border-radius:10px;font-weight:600}
.plan{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.15rem;position:relative}
.plan::before{content:"";position:absolute;left:2.85rem;top:.6rem;bottom:.6rem;width:1px;background:var(--linie)}
.plan li{display:grid;grid-template-columns:2.6rem 1fr;column-gap:1rem;padding:.45rem 0;position:relative;font-size:.86rem}
.plan li::before{content:"";position:absolute;left:2.6rem;top:.85rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--grund);border:1.5px solid var(--text-2)}
.plan time{font:600 .8rem/1.6 var(--font-mark);font-variant-numeric:tabular-nums;color:var(--text-2)}
.plan span{font-weight:600}
.plan small{grid-column:2;color:var(--text-2);font-size:.76rem}
.plan li.is-neu{animation:a-neu .7s var(--kurve)}
.plan li.is-neu::before{background:var(--akzent);border-color:var(--akzent)}
@keyframes a-neu{from{opacity:0;transform:translateX(-14px)}}
.demo__hinweis{padding:.7rem 1rem;border-top:1px solid var(--linie);font-size:.78rem;color:var(--text-2)}
@media (max-width:767px){.demo__koerper{grid-template-columns:1fr}.demo__inbox{border-right:0;border-bottom:1px solid var(--linie)}}

/* ---- M29 Paketfinder ---- */
.finder{display:grid;gap:.8rem;padding:1.4rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--flaeche)}
.finder label{font:600 1.05rem/1.3 var(--font-mark);display:flex;justify-content:space-between;gap:1rem}
.finder output{font-variant-numeric:tabular-nums;min-width:2ch;text-align:right;color:var(--text)}
.finder input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;--wert:28.6%;
  background:linear-gradient(90deg,var(--akzent) var(--wert),var(--linie) var(--wert));cursor:pointer}
.finder input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--text);border:4px solid var(--flaeche);box-shadow:0 0 0 1px var(--text)}
.finder input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--text);border:4px solid var(--flaeche)}
.finder__ergebnis{color:var(--text-2)}.finder__ergebnis b{color:var(--text)}
.paket{position:relative;display:grid;gap:.8rem;align-content:start;transition:border-color .4s,box-shadow .4s,transform .4s var(--kurve)}
.paket.is-passend{border-color:var(--akzent)!important;box-shadow:0 0 0 1px var(--akzent)}
.paket__marke{font:600 .78rem/1 var(--font-mark);color:var(--text-2)}
.paket__preis b{font:700 2.4rem/1 var(--font-mark);letter-spacing:-.02em;color:var(--text)}
.paket__preis small{color:var(--text-2)}
.paket__fuer{color:var(--text-2);font-size:var(--t-s)}
.haken{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:var(--t-s)}
.haken li{display:flex;gap:.55rem;align-items:baseline}
.haken li::before{content:"";flex:none;width:.7rem;height:.38rem;border-left:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(-45deg) translateY(-.15rem)}

/* ---- M22 Assistent ---- */
.assistent{display:grid;gap:1.2rem}
.assistent fieldset{border:0;padding:0;margin:0;display:grid;gap:1rem}
.assistent legend{font:600 1.35rem/1.2 var(--font-mark);margin-bottom:.4rem;padding:0}
.fortschritt{list-style:none;padding:0;margin:0 0 .4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;font-size:.78rem;color:var(--text-2)}
.fortschritt li{border-top:4px solid var(--linie);padding-top:.45rem}
.fortschritt li.is-aktiv{color:var(--text)}
.optionen{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.optionen--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.option{position:relative;display:block;cursor:pointer}
.option input,.chip input{position:absolute;opacity:0;pointer-events:none}
.option span{display:grid;gap:.25rem;padding:.9rem 1rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--flaeche);transition:border-color .3s,box-shadow .3s}
.option--gross span{padding:1.2rem}
.option b{font-family:var(--font-mark);font-size:1.05rem}
.option small{color:var(--text-2);font-size:.86rem}
.option input:checked+span,.chip input:checked+span{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
.option input:focus-visible+span,.chip input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip span{display:inline-block;padding:.55rem .85rem;border:1px solid var(--linie);border-radius:999px;background:var(--flaeche);font-size:.88rem}
.feld{display:grid;gap:.35rem;font-size:var(--t-s);font-weight:600}
.feld input,.feld select{font-weight:400;padding:.75rem .9rem;border:1px solid #8B949E;border-radius:var(--radius);background:var(--flaeche);color:var(--text);width:100%}
.felder{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.einwilligung{display:flex;gap:.6rem;font-size:.86rem;color:var(--text-2);align-items:flex-start}
.einwilligung input{margin-top:.25rem}
.einwilligung a{color:var(--text)}
.zusammenfassung dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0;font-size:.9rem;padding:1rem;border:1px dashed var(--linie);border-radius:var(--radius)}
.zusammenfassung dl div{display:contents}
.zusammenfassung dt{color:var(--text-2)}.zusammenfassung dd{margin:0;font-weight:600}
.assistent__knoepfe{display:flex;gap:.6rem;flex-wrap:wrap}
.is-fehlt{animation:a-wackel .4s}
@keyframes a-wackel{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hinweis{padding:1.2rem;border-left:3px solid var(--akzent);background:var(--flaeche);font-weight:600}

/* ---- Akkordeon ---- */
.akkordeon summary{font-family:var(--font-mark);font-size:1.05rem}
.akkordeon summary::after{color:var(--akzent);font-weight:400}
.akkordeon .inhalt p{color:var(--text-2)}

/* ---- Rechtliches ---- */
.recht h2{font-size:1.25rem;margin:2rem 0 .5rem;font-family:var(--font-mark)}
.recht p,.recht address{font-style:normal;color:var(--text-2);max-width:68ch}
.recht a{color:var(--text)}
@media (prefers-reduced-motion: reduce){.orbit .puls,.orbit .funke{display:none}.orbit .dreh,.orbit .chip span{animation:none}}

/* ===== Variante A – Orbit ===== */
:root{--radius:12px;--max:1240px;--font-display:var(--font-mark);
  --t-3xl:clamp(2.6rem,6vw,5.2rem);--t-2xl:clamp(2rem,3.6vw,3.1rem);--t-xl:1.45rem;--lh-tight:1.04}
h1,h2,h3{font-family:var(--font-mark);font-weight:700;letter-spacing:-.035em}
h3{font-weight:600;letter-spacing:-.02em}
.serif-i{font-family:var(--font-serif);font-style:normal;font-weight:400;letter-spacing:-.02em}
.header{background:#0B0F14;color:#E6EAEF}
.header .nav ul{gap:2rem}.header .nav a{font:600 .95rem/1 var(--font-mark);color:var(--text)}
.header .wrap{padding-block:1rem}
.header__aktion{display:flex;gap:.6rem;align-items:center}
.nav__mobil{display:none}
.menue-btn{color:var(--text);border-color:var(--linie)}
@media (max-width:1023px){.nav{background:#0B0F14}.nav__mobil{display:list-item}}
@media (max-width:479px){.header__aktion .btn{display:none}}

/* Hero */
.a-hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(6rem,10vw,9rem);overflow:hidden}
.a-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,#E86A3A 16%,transparent),transparent 62%);pointer-events:none}
.a-hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:clamp(40px,6vw,90px);background:var(--papier,#F6F2EA);border-radius:50% 50% 0 0/100% 100% 0 0}
.a-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.a-hero__einstieg{display:inline-flex;align-items:center;gap:.6rem;font:600 .95rem/1.2 var(--font-mark);color:var(--text-2);margin-bottom:1.4rem}
.a-hero h1{font-size:var(--t-3xl)}
.a-hero .lead{margin-top:1.5rem;color:var(--text-2);font-size:1.15rem;max-width:44ch}
.a-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.a-hero__status{margin-top:2.4rem;display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.88rem;color:var(--text-2)}
.a-hero__status span{display:inline-flex;align-items:center;gap:.5rem}
.a-hero__status i{width:.5rem;height:.5rem;border-radius:50%;background:#E86A3A;animation:puls 2s infinite}
.a-hero .orbit{width:min(100%,500px)}
@media (max-width:1023px){.a-hero .wrap{grid-template-columns:1fr}.a-hero .orbit{width:min(92%,420px)}}
@media (max-width:479px){.a-hero h1{font-size:2.5rem}.a-hero__cta .btn{width:100%;justify-content:center}.orbit .chip span{font-size:.68rem;height:1.7rem;padding:0 .55rem}}

/* Abschnitte */
.a-sek{padding-block:clamp(4rem,8vw,7rem)}
.a-sek__kopf{display:grid;gap:1rem;max-width:760px;margin-bottom:clamp(2rem,4vw,3.5rem)}
.a-sek__kopf p{color:var(--text-2);font-size:1.1rem;max-width:58ch}
.a-probleme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.a-probleme article{border-top:2px solid var(--text);padding-top:1.2rem}
.a-probleme h3{font-size:1.3rem;margin-bottom:.6rem}
.a-probleme p{color:var(--text-2)}
.a-loesung{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
  padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie)}
.a-loesung p{font:600 clamp(1.3rem,2.4vw,1.9rem)/1.2 var(--font-mark);letter-spacing:-.02em;max-width:30ch}
@media (max-width:767px){.a-probleme{grid-template-columns:1fr}}

/* Team */
.a-team .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.a-team .tmark{width:min(100%,420px);margin-inline:auto}
.a-team__unter{text-align:center;color:var(--text-2);margin-top:1.4rem;max-width:40ch;margin-inline:auto}
.a-team .rolle:last-child{border-bottom:1px solid var(--linie)}
.a-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--linie);padding-top:2rem}
.a-zahlen div{display:grid;gap:.3rem}
.a-zahlen b{font:700 clamp(2.4rem,5vw,4rem)/1 var(--font-mark);letter-spacing:-.04em}
.a-zahlen span{color:var(--text-2);font-size:.95rem}
.a-team .wrap.a-zahlen{grid-template-columns:repeat(3,1fr);align-items:start}
@media (max-width:1023px){.a-team .wrap:not(.a-zahlen){grid-template-columns:1fr}.a-team .tmark{width:min(62%,260px)}}

/* Ablauf (P09) */
.a-ablauf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem)}
.a-ablauf__kopf{position:sticky;top:110px;align-self:start}
.a-schritte{list-style:none;margin:0;padding:0;counter-reset:s}
.a-schritte li{position:relative;padding:1.6rem 0 1.6rem 4rem;border-top:1px solid var(--linie)}
.a-schritte li:last-child{border-bottom:1px solid var(--linie)}
.a-schritte li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:1.5rem;width:2.5rem;height:2.5rem;border-radius:50%;
  display:grid;place-items:center;font:700 1rem/1 var(--font-mark);border:1.5px solid var(--text);transition:background .4s,color .4s}
.a-schritte li:hover::before{background:var(--text);color:var(--grund)}
.a-schritte h3{font-size:1.35rem}
.a-schritte p{color:var(--text-2);margin-top:.4rem;max-width:52ch}
.a-schritte .marke{display:inline-block;margin-top:.7rem;font:600 .78rem/1 var(--font-mark);padding:.4rem .6rem;border-radius:999px;border:1px solid var(--linie);color:var(--text-2)}
.a-schritte .is-sie{background:#14181A;color:#E6EAEF;border-radius:var(--radius);padding-left:5rem;margin-inline:-1rem;padding-right:1rem;border:0}
.a-schritte .is-sie::before{left:1rem;border-color:#E86A3A;background:#E86A3A;color:#0B0F14}
.a-schritte .is-sie p{color:#9AA3AD}.a-schritte .is-sie .marke{border-color:#E86A3A;color:#E86A3A}
@media (max-width:1023px){.a-ablauf{grid-template-columns:1fr}.a-ablauf__kopf{position:static}}

/* Live-Einblick */
.a-einblick .demo{box-shadow:0 40px 80px -40px rgba(20,24,26,.45)}

/* Bento (P13) */
.a-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.kachel{position:relative;grid-column:span 2;display:grid;gap:.6rem;align-content:start;padding:1.4rem;border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie);overflow:hidden;text-decoration:none;color:var(--text)}
.kachel--breit{grid-column:span 3}
.kachel h3{font-size:1.15rem}
.kachel p{color:var(--text-2);font-size:.92rem}
.kachel .icon{color:var(--akzent)}
.viz{height:130px;border-radius:8px;background:var(--grund);border:1px solid var(--linie);margin-bottom:.4rem;position:relative;overflow:hidden;display:grid;place-items:center}
.viz-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:86%}
.viz-kal i{aspect-ratio:1.3;border-radius:3px;background:var(--linie)}
.viz-kal i.f{background:#14181A}.viz-kal i.k{background:var(--akzent)}
.kachel:hover .viz-kal i.f{animation:a-blink .9s var(--kurve)}
@keyframes a-blink{50%{opacity:.3}}
.viz-chat{display:grid;gap:6px;width:80%;font-size:.75rem}
.viz-chat p{padding:.4rem .6rem;border-radius:10px;background:var(--flaeche);border:1px solid var(--linie);justify-self:start;max-width:85%}
.viz-chat p.ich{justify-self:end;background:#14181A;color:#F6F2EA;border-color:#14181A}
.viz-linie path{fill:none;stroke:var(--text);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--kurve)}
.is-sichtbar .viz-linie path,.kachel.is-sichtbar .viz-linie path{stroke-dashoffset:0}
.viz-linie circle{fill:var(--akzent)}
.viz-mail{width:62%;display:grid;gap:5px;padding:10px;border-radius:6px;background:var(--flaeche);border:1px solid var(--linie)}
.viz-mail b{height:22px;border-radius:3px;background:#14181A}.viz-mail i{height:6px;border-radius:3px;background:var(--linie)}
.viz-mail em{justify-self:start;font:600 .66rem/1 var(--font-mark);font-style:normal;padding:.35rem .5rem;border-radius:4px;background:#14181A;color:#F6F2EA}
.viz-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 1rem}
.viz-chips span{font:600 .72rem/1 var(--font-mark);padding:.4rem .6rem;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche)}
.viz-chips span:nth-child(3n+1){border-color:var(--akzent)}
.a-mehr{margin-top:2rem}
@media (max-width:1023px){.a-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.kachel,.kachel--breit{grid-column:span 1}}
@media (max-width:599px){.a-bento{grid-template-columns:1fr}}

/* Pakete */
.a-pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch}
.a-pakete .paket{padding:1.6rem;border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie)}
.a-pakete .paket--top{background:#14181A;color:#E6EAEF;border-color:#14181A;--text:#E6EAEF;--text-2:#9AA3AD;--linie:#2A323A;--akzent:#E86A3A;--flaeche:#14181A;
  --btn:#E86A3A;--btn-text:#0B0F14;--btn-wipe:#F39B76;--btn-wipe-text:#0B0F14;--btn-pfeil:#0B0F14}
.a-pakete .paket h3{font-size:1.5rem}
.a-pakete .btn{justify-self:start;margin-top:auto}
.a-hinweis{margin-top:1.2rem;font-size:.86rem;color:var(--text-2)}
@media (max-width:1023px){.a-pakete{grid-template-columns:1fr}}

/* CTA-Band */
.a-cta{padding-block:clamp(4rem,8vw,7rem);text-align:center;position:relative;overflow:hidden}
.a-cta .tmark{width:120px;margin:0 auto 1.6rem}
.a-cta h2{font-size:var(--t-3xl);max-width:16ch;margin-inline:auto}
.a-cta p{color:var(--text-2);max-width:52ch;margin:1.2rem auto 0;font-size:1.1rem}
.a-cta .a-hero__cta{justify-content:center}
.a-cta__fakten{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin-top:2.4rem;font-size:.95rem;color:var(--text-2)}
.a-cta__fakten a{color:var(--text)}

/* Unterseiten */
.a-kopf{padding:clamp(3rem,6vw,5rem) 0 clamp(4.5rem,8vw,6.5rem);position:relative;overflow:hidden}
.a-kopf::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:clamp(30px,4vw,60px);background:#F6F2EA;border-radius:50% 50% 0 0/100% 100% 0 0}
.a-kopf .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.a-kopf h1{font-size:clamp(2.4rem,5vw,4.2rem);max-width:18ch}
.a-kopf p{color:var(--text-2);font-size:1.15rem;max-width:56ch;margin-top:1.2rem}
.a-kopf .tmark{width:150px}
@media (max-width:767px){.a-kopf .wrap{grid-template-columns:1fr}.a-kopf .tmark{display:none}}
.a-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem}
.a-rollen article{padding:1.5rem;border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie);display:grid;gap:.5rem;position:relative}
.a-rollen article svg{width:56px;height:56px}
.a-rollen article.sie{background:#14181A;color:#E6EAEF;border-color:#14181A}
.a-rollen article.sie p{color:#9AA3AD}
.a-rollen p{color:var(--text-2)}
.seg-mini path{fill:none;stroke:var(--linie);stroke-width:10}
.seg-mini path.an{stroke:var(--akzent)}
.seg-mini line{stroke:var(--linie);stroke-width:10}.seg-mini line.an{stroke:#E86A3A}
.a-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}
.a-liste .leistung-lang{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--linie)}
.a-liste .icon{color:var(--akzent)}
.a-liste h3{font-size:1.2rem}.a-liste p{color:var(--text-2);margin-top:.3rem}
@media (max-width:767px){.a-liste{grid-template-columns:1fr}}
.a-kanaele{display:flex;flex-wrap:wrap;gap:.6rem}
.a-kanaele span{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche);font:600 .9rem/1 var(--font-mark)}
.a-kanaele span i{width:.5rem;height:.5rem;border-radius:50%;background:#2F8F5B}
.a-kanaele span.bald i{background:var(--text-2)}
.a-kanaele span small{font:400 .78rem var(--font-text);color:var(--text-2)}
.a-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:1023px){.a-zwei{grid-template-columns:1fr}}
.a-immer{padding:1.6rem;border-radius:var(--radius);border:1px dashed var(--linie)}
.a-immer h2{font-size:1.4rem;margin-bottom:1rem}
.a-vertrauen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.a-vertrauen article{padding:1.6rem;border-radius:var(--radius);border:1px solid var(--linie);background:var(--flaeche);display:grid;gap:.6rem;align-content:start;position:relative}
.a-vertrauen .icon{color:var(--akzent)}
.a-vertrauen p{color:var(--text-2)}
@media (max-width:1023px){.a-vertrauen{grid-template-columns:repeat(2,1fr)}}@media (max-width:599px){.a-vertrauen{grid-template-columns:1fr}}
.a-kontakt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.a-kontakt aside{display:grid;gap:1.4rem;padding:1.6rem;border-radius:var(--radius);background:#14181A;color:#E6EAEF;position:sticky;top:100px}
.a-kontakt aside p{color:#9AA3AD}.a-kontakt aside a{color:#E6EAEF}
.a-kontakt aside b{display:block;font:600 .85rem/1.2 var(--font-mark);color:#E86A3A;margin-bottom:.3rem}
@media (max-width:1023px){.a-kontakt{grid-template-columns:1fr}.a-kontakt aside{position:static}}
.a-recht{max-width:760px}

/* Footer */
.footer{background:#0B0F14;color:#9AA3AD;border-top:0;padding-block:4rem 2rem}
.footer__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer .logo{color:#E6EAEF}
.footer__marke p{margin-top:1rem;max-width:32ch}
.footer__titel{font:600 .85rem/1 var(--font-mark);color:#E6EAEF;margin-bottom:.8rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.footer a{color:#E6EAEF}
.footer__unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid #1E2630;font-size:.82rem}
@media (max-width:1023px){.footer__raster{grid-template-columns:1fr 1fr}}@media (max-width:599px){.footer__raster{grid-template-columns:1fr}}
[data-tilt]{position:relative}

/* ===== Runde 2: aus B – Ein Tag mit Advinq ===== */
.a1-tag{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem)}
.a1-tag__kopf{position:sticky;top:110px;align-self:start}
.a1-tag__kopf p{color:var(--text-2);margin-top:1.2rem;max-width:40ch;font-size:1.05rem}
.a1-tag__kopf .uhr{display:block;margin-top:2rem;font:400 clamp(3rem,5.5vw,4.6rem)/1 var(--font-serif);font-variant-numeric:tabular-nums}
.a1-strecke{position:relative;padding-left:3.2rem}
.a1-strecke svg{position:absolute;left:0;top:0;width:24px;height:100%;overflow:visible}
.a1-strecke svg .grund{stroke:var(--linie);stroke-width:2;fill:none}
.a1-strecke svg .weg{stroke:var(--akzent);stroke-width:2.5;fill:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.a1-eintrag{padding:0 0 clamp(2.2rem,4.5vw,3.6rem);position:relative}
.a1-eintrag::before{content:"";position:absolute;left:-3.2rem;top:.9rem;width:12px;height:12px;margin-left:6px;border-radius:50%;background:var(--grund);border:2px solid var(--text)}
.a1-eintrag.sie::before{background:var(--akzent);border-color:var(--akzent)}
.a1-eintrag time{font:400 clamp(2.2rem,3.6vw,3.1rem)/1 var(--font-serif);font-variant-numeric:tabular-nums}
.a1-eintrag .wer{display:inline-block;margin-left:1rem;font:600 .82rem/1 var(--font-mark);padding:.35rem .6rem;border-radius:999px;border:1px solid var(--linie);color:var(--text-2);vertical-align:middle}
.a1-eintrag.sie .wer{background:#14181A;color:#E6EAEF;border-color:#14181A}
.a1-eintrag h3{margin-top:.8rem;font-size:1.3rem}
.a1-eintrag p{color:var(--text-2);margin-top:.4rem;max-width:52ch}
@media (max-width:1023px){.a1-tag{grid-template-columns:1fr}.a1-tag__kopf{position:static}.a1-tag__kopf .uhr{display:none}}

/* ===== Runde 2: aus C – M24 Fenster-Hero als Live-Einblick ===== */
.a1-fenster{height:200vh;position:relative}
.a1-fenster__buehne{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto 1fr;align-items:center;justify-items:center;overflow:hidden;padding:5.5rem 0 1.5rem}
.a1-fenster__kopf{text-align:center;max-width:720px;padding-inline:var(--gutter);margin-bottom:1.6rem}
.a1-fenster__kopf h2{font-size:clamp(2rem,3.6vw,3.1rem)}
.a1-fenster__kopf p{color:var(--text-2);margin-top:.8rem}
.a1-app{width:min(1180px,94vw);height:min(70vh,660px);display:grid;grid-template-columns:210px 1fr;background:var(--flaeche);border:1px solid #2A333D;
  border-radius:calc(26px - 16px * var(--p,0));transform:perspective(1400px) rotateX(max(0deg, calc(16deg * (1 - var(--p,0) * 1.6)))) scale(calc(.82 + .18 * var(--p,0)));
  transform-origin:50% 0;box-shadow:0 -1px 0 rgba(232,106,58,.4),0 60px 120px -40px rgba(232,106,58,.25);overflow:hidden}
.a1-app__seite{border-right:1px solid var(--linie);padding:1.1rem .8rem;display:grid;align-content:start;gap:.2rem;background:#0F141A}
.a1-app__seite .logo{margin:0 .4rem 1.2rem}
.a1-app__seite a{display:flex;justify-content:space-between;padding:.55rem .7rem;border-radius:7px;font:600 .86rem/1 var(--font-mark);color:var(--text-2);text-decoration:none}
.a1-app__seite a.an{background:#1E2630;color:var(--text)}
.a1-app__seite a b{background:#E86A3A;color:#0B0F14;border-radius:999px;font-size:.72rem;padding:.15rem .45rem}
.a1-app__haupt{overflow:auto;padding:1.1rem}
.a1-app .demo{border:0;background:transparent}
.a1-app .demo__leiste{display:none}
@media (max-width:1023px){.a1-fenster{height:auto}.a1-fenster__buehne{position:static;height:auto;padding:4rem 0}
  .a1-app{height:auto;grid-template-columns:1fr;transform:none;border-radius:16px}.a1-app__seite{display:none}}
@media (prefers-reduced-motion: reduce){.a1-app{transform:none!important;border-radius:16px!important}}

/* ===== Runde 3: hell ===== */
main{overflow-x:clip}
.header{background:color-mix(in srgb,#F6F2EA 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);color:var(--text);border-bottom:1px solid var(--linie)}
@media (max-width:1023px){.nav{background:#F6F2EA}}
.a-hero{background:radial-gradient(1200px 600px at 85% 10%,color-mix(in srgb,#C8552A 9%,transparent),transparent 60%),var(--grund)}
.a-hero::after{display:none}
.a-hero__status i{background:#C8552A}
body .laufband{background:#FFFDF8;color:#14181A;border-block:1px solid #E3DDD0}
.orbit .chip.folgt span{opacity:.5;border-style:dashed}
.orbit .chip span small{font:400 .7rem var(--font-text);color:var(--text-2)}
.a-team{background:#FFFDF8;border-block:1px solid var(--linie)}
.a-kopf{background:radial-gradient(900px 400px at 90% 0%,color-mix(in srgb,#C8552A 8%,transparent),transparent 60%)}
.a-kopf::after{display:none}

/* Browser-Rahmen für echte Screenshots */
.a2-browser{position:relative;border-radius:14px;background:#FFFDF8;border:1px solid var(--linie);box-shadow:0 1px 0 #fff inset,0 40px 90px -40px rgba(20,24,26,.35),0 12px 30px -18px rgba(20,24,26,.25);overflow:hidden}
.a2-browser__leiste{display:flex;align-items:center;gap:.4rem;height:38px;padding:0 .9rem;border-bottom:1px solid var(--linie);background:#F3EEE4}
.a2-browser__leiste i{width:10px;height:10px;border-radius:50%;background:#DDD5C6}
.a2-browser__leiste span{margin-inline:auto;font:500 .78rem/1 var(--font-text);color:var(--text-2);padding:.35rem 1.2rem;border-radius:7px;background:#FFFDF8;border:1px solid var(--linie)}
.a2-bilder{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F5F3EF}
.a2-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .6s var(--kurve),transform 1.4s var(--kurve)}
.a2-bilder img.an{opacity:1}

/* Produkt-Tour */
.a2-tour{position:relative;height:calc(100vh * 4.2)}
.a2-tour__buehne{position:sticky;top:0;height:100vh;display:grid;align-content:center;overflow:hidden;padding-top:60px}
.a2-tour .wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.a2-tour h2{font-size:var(--t-2xl);margin-bottom:1.6rem}
.a2-schritte{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.a2-schritte li{position:relative;padding:.85rem 0 .85rem 1.4rem;border-left:2px solid var(--linie);cursor:pointer;transition:border-color .4s}
.a2-schritte li b{display:block;font:600 .8rem/1 var(--font-mark);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
.a2-schritte li h3{font-size:1.2rem;margin-top:.35rem;color:var(--text-2);transition:color .4s}
.a2-schritte li p{color:var(--text-2);font-size:.95rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--kurve),opacity .4s,margin .4s}
.a2-schritte li.an{border-left-color:#C8552A}
.a2-schritte li.an b{color:#C8552A}.a2-schritte li.an h3{color:var(--text)}
.a2-schritte li.an p{max-height:8rem;opacity:1;margin-top:.4rem}
.a2-schritte li img{display:none}
.a2-tour__fortschritt{height:2px;background:var(--linie);margin-top:1.4rem;position:relative}
.a2-tour__fortschritt i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:#C8552A}
@media (max-width:1023px){
  .a2-tour{height:auto}.a2-tour__buehne{position:static;height:auto;padding-block:clamp(4rem,8vw,6rem)}
  .a2-tour .wrap{grid-template-columns:1fr}.a2-tour .a2-browser,.a2-tour__fortschritt{display:none}
  .a2-schritte li{border-left-color:#C8552A;cursor:default}.a2-schritte li h3{color:var(--text)}
  .a2-schritte li p{max-height:none;opacity:1;margin-top:.4rem}
  .a2-schritte li img{display:block;width:100%;margin-top:1rem;border-radius:10px;border:1px solid var(--linie);box-shadow:0 20px 40px -24px rgba(20,24,26,.35)}
}

/* Freigabe-Folge */
.a2-folge .a-sek__kopf{margin-inline:auto;text-align:center;justify-items:center}
.a2-folge__buehne{max-width:1120px;margin-inline:auto}
.a2-folge .a2-bilder img{transition:opacity .45s var(--kurve),transform .9s var(--kurve)}
.a2-folge .a2-bilder img.raus-hoch{transform:translateY(-14%);opacity:0}
.a2-folge .a2-bilder img.rein-hoch{transform:translateY(10%)}
.a2-maus{position:absolute;left:0;top:0;width:26px;height:26px;z-index:3;pointer-events:none;transition:left 1.1s cubic-bezier(.65,0,.35,1),top 1.1s cubic-bezier(.65,0,.35,1),transform .15s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.a2-maus.klick{transform:scale(.82)}
.a2-welle{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:3px solid #C8552A;z-index:2;opacity:0;pointer-events:none}
.a2-welle.los{animation:a2-welle .7s ease-out}
.a2-ring{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid #C8552A;box-shadow:0 0 0 9999px rgba(20,24,26,.0);z-index:2;opacity:0;transition:opacity .5s,box-shadow .6s;pointer-events:none}
.a2-ring.an{opacity:1;box-shadow:0 0 0 9999px rgba(20,24,26,.28)}
@keyframes a2-welle{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.a2-tabs{list-style:none;margin:1.4rem auto 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;max-width:1120px}
.a2-tabs li{cursor:pointer;padding-top:.9rem;border-top:2px solid var(--linie);position:relative}
.a2-tabs li::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:#C8552A}
.a2-tabs li.an::before{width:100%;transition:width var(--dauer,3s) linear}
.a2-tabs li.fertig::before{width:100%}
.a2-tabs b{display:block;font:600 .95rem/1.25 var(--font-mark)}
.a2-tabs span{display:block;color:var(--text-2);font-size:.85rem;margin-top:.3rem}
.a2-tabs li:not(.an) span{opacity:.7}
@media (max-width:767px){.a2-tabs{grid-template-columns:1fr}.a2-tabs li:not(.an){display:none}}

/* Handy */
.a2-handy .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.a2-handy__bild{position:relative;height:clamp(460px,52vw,640px)}
.a2-tel{position:absolute;width:clamp(210px,21vw,280px);aspect-ratio:390/844;border-radius:42px;background:#14181A;padding:10px;box-shadow:0 50px 90px -40px rgba(20,24,26,.5)}
.a2-tel img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:33px;display:block}
.a2-tel::before{content:"";position:absolute;left:50%;top:18px;width:30%;height:22px;margin-left:-15%;border-radius:12px;background:#14181A;z-index:2}
.a2-tel--1{left:8%;top:6%;transform:rotate(-6deg);animation:a2-schweb 7s ease-in-out infinite}
.a2-tel--2{left:42%;top:0;transform:rotate(4deg);animation:a2-schweb 7s ease-in-out -3.5s infinite;z-index:2}
@keyframes a2-schweb{50%{translate:0 -12px}}
.a2-handy ul{margin-top:1.4rem}
@media (max-width:1023px){.a2-handy .wrap{grid-template-columns:1fr}.a2-handy__bild{height:520px;max-width:520px;margin-inline:auto;width:100%}}
@media (prefers-reduced-motion:reduce){.a2-tel{animation:none}}

/* Video */
.a2-video__rahmen{position:relative;max-width:1120px;margin-inline:auto;border-radius:16px;overflow:hidden;background:#14181A;aspect-ratio:16/9;box-shadow:0 40px 90px -40px rgba(20,24,26,.45)}
.a2-video__rahmen video{width:100%;height:100%;display:block;object-fit:cover;background:#14181A}
.a2-video__start{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:.9rem;padding:clamp(.9rem,3vw,2rem);color:#F6F2EA;text-align:left;border:0;background:linear-gradient(transparent 55%,rgba(20,24,26,.28));cursor:pointer;font:inherit;width:100%}.a2-video__start[hidden]{display:none}.a2-video__start:hover i{transform:scale(1.06)}.a2-video__start i{transition:transform .2s;flex:none}@media (max-width:600px){.a2-video__rahmen .a2-video__start i{width:52px;height:52px;box-shadow:0 0 0 7px rgba(200,85,42,.25)}.a2-video__rahmen .a2-video__start i::after{border-left-width:15px;border-block-width:9px;margin-left:4px}.a2-video__rahmen .a2-video__start span{font-size:.8rem;padding:.4rem .75rem}}
.a2-video__start i{width:86px;height:86px;border-radius:50%;background:#C8552A;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(200,85,42,.25)}
.a2-video__start i::after{content:"";border-left:22px solid #fff;border-block:14px solid transparent;margin-left:6px}
.a2-video__start span{font:600 1rem/1 var(--font-mark);background:rgba(20,24,26,.6);padding:.55rem 1rem;border-radius:999px}
.a2-laeufer{padding:clamp(18px,3vw,28px) 0 clamp(22px,3.5vw,34px);overflow:hidden;display:grid;gap:12px}
.a2-laeufer__reihe{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.a2-laeufer__spur{display:flex;gap:14px;width:max-content;animation:a2-links 55s linear infinite}
.a2-laeufer__spur--rechts{animation-name:a2-rechts}
.a2-laeufer:hover .a2-laeufer__spur{animation-play-state:paused}
@keyframes a2-links{to{transform:translateX(-50%)}}
@keyframes a2-rechts{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.a2-laeufer__spur{animation:none}}
.a2-kapsel{display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:999px;background:color-mix(in srgb,#FFFDF8 70%,transparent);border:1px solid #E3DDD0;backdrop-filter:blur(6px);font:600 17px/1 var(--font-mark);color:#14181A;white-space:nowrap}
.a2-kapsel svg{flex:none}
.a2-kapsel--hervor{background:#14181A;color:#fff;border-color:#14181A}
@media (max-width:600px){.a2-kapsel{font-size:15px;padding:10px 16px 10px 12px}.a2-laeufer__spur{gap:10px}}
.a2-video .a-sek__kopf{margin-inline:auto;text-align:center;justify-items:center}
.a3-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.a3-gruppe{padding:1.8rem;border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie);display:grid;gap:.8rem;align-content:start}
.a3-gruppe h3{font-size:1.4rem}.a3-gruppe p{color:var(--text-2)}
@media (max-width:767px){.a3-gruppen{grid-template-columns:1fr}}
.a3-preis{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);padding:clamp(1.6rem,4vw,3rem);border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--linie)}
.a3-preis h2{font-size:var(--t-2xl)}.a3-preis p{color:var(--text-2);margin-top:1rem;max-width:48ch}.a3-preis h3{font-size:1.1rem;margin-bottom:.8rem}
@media (max-width:767px){.a3-preis{grid-template-columns:1fr}}
.recht mark.offen{background:#FFE98A;padding:0 3px;border-radius:3px}
.recht table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;display:block;overflow-x:auto}
.recht th,.recht td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
.recht .inhalt{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:1rem 1.4rem;margin-bottom:1.5rem}
.recht .hervor{background:var(--flaeche);border-left:3px solid #C8552A;padding:.8rem 1rem}

.kopf-anmelden{font:600 .95rem/1 var(--font-mark);color:var(--text);text-decoration:none;padding:.5rem .4rem}.kopf-anmelden:hover{color:#C8552A}
@media (max-width:479px){.kopf-anmelden{font-size:.88rem}}
.a2-hinweis-demo{text-align:center;color:var(--text-2);font-size:.85rem;margin-top:1rem}

/* ===== motion.css – Bewegungs-Baukasten (Tokens nötig: --akzent, --akzent-2, --text, --text-2, --flaeche, --linie, --kurve, --font-display, --font-text) ===== */
html{scroll-behavior:smooth}
::selection{background:var(--akzent-2);color:var(--text)}

/* Scroll-Fortschritt */
.scroll-balken{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--akzent-2);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* Vorhang / Seitenübergang */
.vorhang{position:fixed;inset:0;z-index:100;background:var(--akzent);display:grid;place-items:center;pointer-events:none;transform:translateY(0);transition:transform 620ms cubic-bezier(.77,0,.18,1)}
.vorhang b{font:700 clamp(2.5rem,7vw,5rem)/1 var(--font-display);color:#fff;letter-spacing:.02em;transform:skewX(-11deg);display:inline-block}
.vorhang b i{font-style:normal;color:var(--akzent-2)}
.vorhang.is-weg{transform:translateY(-101%)}
.vorhang.is-zu{transform:translateY(0);transition-duration:420ms}
.vorhang.is-zu:not(.is-weg){animation:vorhang-rein 420ms cubic-bezier(.77,0,.18,1)}
@keyframes vorhang-rein{from{transform:translateY(101%)}to{transform:translateY(0)}}

/* Cursor */
.hat-cursor,.hat-cursor a,.hat-cursor button,.hat-cursor summary,.hat-cursor label,.hat-cursor select,.hat-cursor [data-cursor]{cursor:none}
.hat-cursor input,.hat-cursor textarea{cursor:text}
.hat-cursor input[type=radio],.hat-cursor input[type=checkbox]{cursor:none}
.ohne-cursor .cursor-punkt,.ohne-cursor .cursor-ring{display:none}
.cursor-punkt,.cursor-ring{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor-an .cursor-punkt,.cursor-an .cursor-ring{opacity:1}
.cursor-punkt{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--akzent-2);box-shadow:0 0 0 1.5px var(--akzent)}
.cursor-ring{width:42px;height:42px;margin:-21px 0 0 -21px;display:grid;place-items:center}
.cursor-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--akzent);transition:transform .35s var(--kurve),background .35s,border-color .35s}
.cursor-ring span{position:relative;font:700 .8rem/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--kurve);white-space:nowrap}
.cursor-ring.is-gross::before{transform:scale(1.6);background:rgba(242,183,5,.18);border-color:var(--akzent-2)}
.cursor-ring.is-label::before{transform:scale(2.3);background:var(--akzent-2);border-color:var(--akzent-2)}
.cursor-ring.is-label span{opacity:1;transform:scale(1)}
.cursor-ring.is-dunkel::before{border-color:var(--akzent-2)}
.cursor-ring.is-dunkel.is-label span{color:var(--text)}
.cursor-ring.is-druck::before{transform:scale(.8)}
.cursor-ring.is-text::before{transform:scaleX(.08) scaleY(.7);border-radius:2px}

/* Split-Text */
.wort{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wort__i{display:inline-block;transform:translateY(110%) rotate(4deg);transition:transform 1s var(--kurve);transition-delay:calc(var(--i) * 38ms + var(--basis,0ms))}
[data-split].is-sichtbar .wort__i{transform:none}

/* Auto-Reveal */
.auto-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--kurve),transform .9s var(--kurve);transition-delay:var(--d,0ms)}
.auto-reveal.is-sichtbar{opacity:1;transform:none}
.split__bild.auto-reveal{transform:none;clip-path:inset(12% 0 0 0);opacity:1;transition:clip-path 1.2s var(--kurve)}
.split__bild.auto-reveal img{transform:scale(1.15);transition:transform 1.6s var(--kurve)}
.split__bild.auto-reveal.is-sichtbar{clip-path:inset(0)}
.split__bild.auto-reveal.is-sichtbar img{transform:none}

/* Scan-Effekt (Diagnose) */
[data-scan]{position:relative;overflow:hidden;isolation:isolate}
[data-scan] img{filter:grayscale(1) brightness(1.08) contrast(.9) sepia(.35) hue-rotate(175deg) saturate(1.4);transition:filter 1.1s var(--kurve) .55s,transform 1.4s var(--kurve)}
[data-scan].is-gescannt img{filter:none}
.scan-linie{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--akzent-2);box-shadow:0 0 22px 6px rgba(242,183,5,.55);transform:translateX(-10px);opacity:0;z-index:2;pointer-events:none}
.scan-linie::after{content:"";position:absolute;top:0;bottom:0;right:3px;width:90px;background:linear-gradient(90deg,rgba(242,183,5,0),rgba(242,183,5,.22))}
[data-scan].is-gescannt .scan-linie{animation:scanlauf 1.5s var(--kurve) forwards}
[data-scan].is-rescan .scan-linie{animation:scanlauf2 1.1s var(--kurve) forwards}
@keyframes scanlauf{0%{opacity:1;left:0}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes scanlauf2{0%{opacity:1;left:0}88%{opacity:1}100%{left:100%;opacity:0}}
.scan-chip{position:absolute;right:1rem;top:1rem;z-index:3;display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--text);font:700 .82rem/1 var(--font-text);padding:.5rem .7rem;box-shadow:0 6px 18px rgba(20,22,63,.18);opacity:0;transform:translateY(-8px);transition:opacity .4s 1.4s,transform .5s var(--kurve) 1.4s}
.scan-chip::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#16a34a;animation:puls 1.8s infinite}
[data-scan].is-gescannt .scan-chip{opacity:1;transform:none}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* Laufband */
.laufband{overflow:hidden;background:var(--akzent);color:#fff;border-block:1px solid rgba(255,255,255,.08)}
.laufband__spur{display:flex;width:max-content;animation:laufband 38s linear infinite}
.laufband__spur>*{flex:none;display:inline-flex;align-items:center;gap:1.4rem;padding:1.05rem 1.4rem 1.05rem 0;font:700 clamp(1.4rem,2.6vw,2.2rem)/1 var(--font-display);letter-spacing:.02em;white-space:nowrap}
.laufband__spur>* i{font-style:normal;color:var(--akzent-2);font-size:.7em}
.laufband:hover .laufband__spur{animation-play-state:paused}
@keyframes laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Buttons: Füll-Wischer */
.btn{position:relative;background-image:linear-gradient(var(--akzent-2),var(--akzent-2));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;transition:background-size .45s var(--kurve),color .3s,border-color .3s,transform .35s var(--kurve)}
.btn:hover{background-size:100% 100%;color:var(--text);border-color:var(--akzent-2)}
.btn--gelb,.btn--hell{background-image:linear-gradient(var(--akzent),var(--akzent))}
.btn--gelb:hover,.btn--hell:hover{color:#fff;border-color:var(--akzent);background-color:inherit}
.btn--gelb:hover{background-color:var(--akzent-2)}
.btn--hell:hover{background-color:#fff}
.btn--sekundaer{background-image:linear-gradient(var(--akzent),var(--akzent))}
.btn--sekundaer:hover{color:#fff;border-color:var(--akzent)}

/* Navigation: Unterstrich gleitet */
.nav a{position:relative;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;background:var(--akzent-2);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--kurve)}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1);transform-origin:0 50%}
.header{transition:box-shadow .3s,background .3s}
.ist-gescrollt .header{box-shadow:0 8px 30px rgba(20,22,63,.08)}

/* Live-Status im Kopf */
.live{display:inline-flex;align-items:center;gap:.5rem;font:600 .85rem/1 var(--font-text);color:var(--text-2);white-space:nowrap;padding:.45rem .7rem;border:1px solid var(--linie);border-radius:999px;background:#fff}
.live__punkt{width:.55rem;height:.55rem;border-radius:50%;background:#16a34a;animation:puls 1.8s infinite}
.is-zu .live__punkt,.live.is-zu .live__punkt{background:#e0a100;animation:none}
.live b{font-variant-numeric:tabular-nums;color:var(--text)}
@media (max-width:1180px){.live{display:none}}

/* Icons zeichnen sich beim Überfahren */
.icon :is(path,circle,rect,line,polyline){stroke-dasharray:1;stroke-dashoffset:0}
:is(a,article,.kachel,[data-tilt]):hover>.icon :is(path,circle,rect,line,polyline),:is(a,article,.kachel,[data-tilt]):hover .icon--zeichnen :is(path,circle,rect,line,polyline){animation:zeichnen 1s var(--kurve)}
@keyframes zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Tilt + Glare */
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--kurve),box-shadow .4s;transform-style:preserve-3d;will-change:transform}
[data-tilt].is-maus{transition:transform .08s linear,box-shadow .4s}
[data-tilt]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .4s;z-index:3;mix-blend-mode:soft-light}
[data-tilt].is-maus::after{opacity:1}

/* Unterseiten-Bausteine lebendiger */
.leistung-lang{position:relative;transition:background .35s,padding .45s var(--kurve)}
.leistung-lang::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--akzent-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--kurve)}
.leistung-lang:hover{background:linear-gradient(90deg,var(--flaeche),rgba(233,239,246,0));padding-left:1rem}
.leistung-lang:hover::before{transform:scaleX(1)}
.leistung-lang .icon{transition:transform .5s var(--kurve)}
.leistung-lang:hover .icon{transform:rotate(-12deg) scale(1.12)}
.liste-haken li{transition:transform .4s var(--kurve)}
.liste-haken li:hover{transform:translateX(8px)}
.tabelle tbody tr{transition:background .3s}
.tabelle tbody tr:hover{background:var(--flaeche)}
.tabelle tbody tr:hover td:first-child{color:var(--akzent-2);-webkit-text-stroke:1px var(--akzent)}
.fahrzeug{position:relative;overflow:hidden;background:#fff}
.fahrzeug__bild .icon{transition:transform .8s var(--kurve)}
.fahrzeug:hover .fahrzeug__bild .icon{transform:translateX(18px) scale(1.15)}
.fahrzeug:hover{box-shadow:0 24px 50px -20px rgba(20,22,63,.35)}
.marken li{transition:transform .35s var(--kurve),background .3s,color .3s}
.marken li:hover{transform:translateY(-4px) rotate(-2deg);background:var(--akzent);color:#fff}
.option{transition:transform .35s var(--kurve),box-shadow .3s,border-color .3s}
.option:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(20,22,63,.4)}
.chip span{transition:transform .3s var(--kurve),background .3s,color .3s}
.chip:hover span{transform:translateY(-2px)}
.akkordeon details[open] .inhalt{animation:aufklappen .55s var(--kurve)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.akkordeon summary{transition:padding .35s var(--kurve),color .3s}
.akkordeon summary:hover{padding-left:.6rem}
[data-schritt]:not([hidden]){animation:schritt-rein .55s var(--kurve)}
@keyframes schritt-rein{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.fortschritt li{position:relative;border-top-color:var(--linie)}
.fortschritt li::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px;background:var(--akzent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--kurve)}
.fortschritt li.is-aktiv::before{transform:scaleX(1)}
.footer a{transition:color .3s}
.footer a:hover{color:var(--akzent-2)}
.karte-svg circle{animation:pin-puls 2.2s var(--kurve) infinite;transform-box:fill-box;transform-origin:center}
@keyframes pin-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.seitenkopf--bild img{animation:kopfzoom 12s var(--kurve) forwards}
@keyframes kopfzoom{from{transform:scale(1.12)}to{transform:scale(1)}}

/* Vorschau-Bild (folgt Cursor) */
.vorschau{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/3;z-index:70;pointer-events:none;overflow:hidden;opacity:0;scale:.6;transition:opacity .3s,scale .45s var(--kurve);box-shadow:0 30px 60px -20px rgba(20,22,63,.5)}
.vorschau.is-an{opacity:1;scale:1}
.vorschau img{width:100%;height:100%;object-fit:cover}

/* Reduzierte Bewegung: alles still */
@media (prefers-reduced-motion: reduce){
  .vorhang{display:none}
  .auto-reveal,.wort__i,.split__bild.auto-reveal,.split__bild.auto-reveal img{opacity:1!important;transform:none!important;clip-path:none!important}
  .laufband__spur{animation:none}
  [data-scan] img{filter:none}.scan-linie{display:none}.scan-chip{opacity:1;transform:none}
  [data-tilt]{transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (hover:none){.vorschau,.cursor-punkt,.cursor-ring{display:none}}

/* Stufe 0: ruhig – nur Reveals und Hover, kein Split-Text-Versatz */
[data-stufe="0"] .auto-reveal{transform:translateY(10px);transition-duration:.45s}
[data-stufe="0"] .wort__i{transition-duration:.5s;transition-delay:0s!important}
/* Stufe 1: ruhiger – keine Laufband-Beschleunigung, kürzere Reveals */
[data-stufe="1"] .auto-reveal{transform:translateY(16px);transition-duration:.6s}
[data-stufe="1"] .wort__i{transition-duration:.7s}

/* ===== CI-Korrekturen nach motion.css ===== */
.btn{background-color:var(--btn);color:var(--btn-text);border:1px solid var(--btn);border-radius:var(--radius);font-family:var(--font-mark);font-weight:600;
  background-image:linear-gradient(var(--btn-wipe),var(--btn-wipe));padding:.85em 1.3em;gap:.55rem}
.btn:hover{color:var(--btn-wipe-text);border-color:var(--btn-wipe);background-color:var(--btn)}
.btn .pfeil{color:var(--btn-pfeil);transition:transform .35s var(--kurve)}
.btn:hover .pfeil{transform:translateX(3px)}
.btn--sekundaer{background-color:transparent;color:var(--text);border-color:color-mix(in srgb,var(--text) 35%,transparent);background-image:linear-gradient(var(--text),var(--text))}
.btn--sekundaer:hover{color:var(--grund);border-color:var(--text);background-color:transparent}
.btn--sekundaer .pfeil{color:var(--akzent)}
.btn--klein{padding:.55em .9em;font-size:.85rem}
.btn--gross{padding:1em 1.5em;font-size:1.05rem}
.btn:disabled{opacity:.6;cursor:default}
.vorhang{background:#0B0F14}
.vorhang b{font:600 clamp(2.5rem,7vw,4.5rem)/1 var(--font-mark);transform:none;letter-spacing:-.03em;color:#E6EAEF;display:inline-flex;align-items:center;gap:.35em}
.vorhang b svg{width:.9em;height:.9em;--logo-ring:#FFFFFF;--logo-tail:#E86A3A}
.laufband{background:#14181A;color:#E6EAEF;border-block:1px solid #1E2630}
.laufband__spur>*{font:600 clamp(1.1rem,2vw,1.6rem)/1 var(--font-mark);letter-spacing:-.01em}
.laufband__spur>* svg{width:.8em;height:.8em}
.cursor-ring.is-gross::before{background:color-mix(in srgb,var(--akzent) 16%,transparent);border-color:var(--akzent)}
.cursor-ring.is-label::before{background:#14181A;border-color:#14181A}
.cursor-ring.is-label span{color:#F6F2EA}
.cursor-punkt{background:var(--akzent);box-shadow:none}
.ist-gescrollt .header{box-shadow:none}
.nav a::after{background:var(--akzent)}
.fortschritt li::before{background:var(--akzent)}
.leistung-lang:hover{background:linear-gradient(90deg,var(--flaeche),transparent)}
.chip span{transition:transform .3s var(--kurve),border-color .3s}
.wrap.recht{max-width:none!important}
[data-tilt].auto-reveal.is-sichtbar{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* live_bauen.py: SEO-H1 der Startseite */
.a-hero h1.a-hero__einstieg{font:600 .95rem/1.2 var(--font-mark);letter-spacing:normal}
.a-hero h1.a-hero__einstieg svg{flex-shrink:0}
.a-hero__titel{margin:0;font-family:var(--font-mark);font-weight:700;letter-spacing:-.035em;font-size:var(--t-3xl);line-height:var(--lh-tight);text-wrap:balance}
@media (max-width:479px){.a-hero h1.a-hero__einstieg{font-size:.95rem}.a-hero__titel{font-size:2.5rem}}
/* live_bauen.py: Fußzeile mit Gruppe „Aufgaben“ (fünf Spalten ab 1024 px), SEO-Seiten, FAQ-Link auf Preise */
@media (min-width:1024px){.footer__raster{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.recht h3{font-size:1.05rem;margin:1.6rem 0 .4rem;font-family:var(--font-mark)}
.recht ol,.recht ul{color:var(--text-2);max-width:68ch;margin:.6rem 0;padding-left:1.3rem;display:grid;gap:.4rem}
.recht figure{margin:2rem 0}.recht figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--linie);display:block}
.recht figcaption{margin-top:.6rem;font-size:.92rem;color:var(--text-2)}
.faq-alle{margin-top:1.4rem}
.footer__gruppen{display:grid;gap:2rem;align-content:start}