/* =====================================================================
   IMVIA — Neugestaltung 15.10.2026. Designsystem: ../DESIGN_SYSTEM.md
   Idee: Ein Auftritt besteht aus Ebenen – Website, Feed und Marke liegen
   als violett getönte Glasschichten übereinander.
   ===================================================================== */

:root{
  --bg:#0c0a14; --bg-2:#14101f; --bg-3:#1b1629;
  --ink:#f3f0fa; --ink-2:#b6afc9; --ink-3:#8c84a3;
  --lila:#c7b8ff; --lila-2:#8b74ff; --lila-tief:#2a1f52;
  --line:rgba(199,184,255,.14); --line-2:rgba(199,184,255,.26);
  --glas:rgba(30,24,52,.55);
  --font-display:"Sentient",Georgia,"Times New Roman",serif;
  --font-sans:"Switzer","Helvetica Neue",Arial,sans-serif;
  --maxw:1320px; --pad:clamp(18px,5vw,72px);
  --abstand:clamp(96px,14vw,200px);
  --r-paneel:16px; --r-buehne:28px;
  /* ---- Bewegungssystem (19.10.2026). Hier ändern, main.js liest Dauern und Wege von hier ----
     Wirkung: ruhig, präzise, geschichtet. Bewegung kommt an und steht dann still. */
  --d-druck:.14s;    /* Rückmeldung beim Drücken */
  --d-hover:.2s;     /* Hover und Fokus */
  --d-zustand:.3s;   /* Menü, Akkordeon, kleine Zustandswechsel */
  --d-flaeche:.45s;  /* große Flächen (Galerie-Paneele, Entstehungs-Ebenen) */
  --d-reveal:.55s;   /* Abschnitte einblenden */
  --d-hero:.85s;     /* einmalige Hero-Choreografie */
  --staffel:.06s;    /* Versatz innerhalb einer Gruppe, gesamt höchstens 0,3 s */
  --e-ein:cubic-bezier(.22,1,.36,1);     /* Eintritte, entspricht GSAP power4.out */
  --e-zustand:cubic-bezier(.4,0,.2,1);   /* Zustandswechsel */
  --w-klein:3px;     /* Wege kleiner Bedienelemente */
  --w-reveal:18px;   /* Weg beim Einblenden */
  /* alte Namen bleiben als Verweis, damit Unterseiten und Menü weiter stimmen */
  --ease:var(--e-ein); --t1:var(--d-hover); --t2:var(--d-zustand); --t3:var(--d-reveal);
  /* Insel-Menü in der Marke */
  --insel-bg:#17122a; --insel-rand:rgba(199,184,255,.22); --insel-text:#f3f0fa; --insel-leise:#9d95b6;
  --insel-akzent:#c7b8ff; --insel-trenner:rgba(199,184,255,.12); --insel-schleier:rgba(8,6,15,.86); --insel-oben:1.1rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
::selection{background:var(--lila);color:var(--bg)}
:focus-visible{outline:2px solid var(--lila);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--lila);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.rahmen{width:min(100% - 2*var(--pad), var(--maxw));margin-inline:auto}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  background:var(--lila);color:#140f24;font:600 1rem/1 var(--font-sans);text-decoration:none;
  transition:transform var(--d-druck) var(--e-zustand),background-color var(--d-hover) var(--e-zustand),box-shadow var(--d-hover) var(--e-zustand)}
.knopf:hover{background:#d6cbff;box-shadow:0 10px 40px -12px rgba(139,116,255,.8)} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.knopf:active{transform:scale(.97);transition-duration:60ms}
.knopf span{transition:transform var(--d-hover) var(--e-zustand)}
.knopf:hover span,.knopf:focus-visible span{transform:translateX(var(--w-klein))}
.knopf--glas{background:rgba(255,255,255,.04);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.knopf--glas:hover{background:rgba(199,184,255,.1);box-shadow:inset 0 0 0 1px var(--lila)}
.knopf--klein{min-height:42px;padding:0 18px;font-size:.9375rem}
.knopf[disabled]{opacity:.6;cursor:progress}
.link-pfeil{display:inline-flex;gap:.4em;color:var(--lila);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(199,184,255,.4);padding-bottom:2px}
.link-pfeil:hover{border-color:var(--lila)}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:900;display:flex;justify-content:space-between;align-items:center;
  padding:calc(var(--insel-oben) + 2px) clamp(18px,3vw,40px) 0;pointer-events:none}
.kopf > *{pointer-events:auto}
.kopf::before{content:"";position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(var(--bg) 55%,rgba(12,10,20,0));transition:opacity var(--t2)}
.kopf.ist-gescrollt::before{opacity:1}
.kopf-marke img{width:112px;height:auto}
.insel-logo > img{width:30px !important;height:auto !important;max-width:none;object-fit:contain;top:3px}
@media (max-width:720px){ .kopf-cta{display:none} .kopf-marke img{width:92px} }

/* ---------- Hero: Bühne als abgerundete Ebene im Fenster ---------- */
.hero{padding:10px;min-height:100svh;display:flex}
.hero-buehne{position:relative;flex:1;border-radius:var(--r-buehne);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 60% at 78% 42%, rgba(139,116,255,.30), transparent 70%), /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
    radial-gradient(50% 50% at 10% 100%, rgba(42,31,82,.9), transparent 70%), /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
    linear-gradient(180deg,#120e20 0%,#0f0b1b 100%);
  box-shadow:inset 0 0 0 1px var(--line);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center;
  padding:clamp(110px,14vh,150px) clamp(22px,5vw,80px) clamp(40px,8vh,90px);gap:clamp(24px,4vw,60px)}
.hero-text{position:relative;z-index:3}
.hero-kicker{display:block;font:500 .8125rem/1.5 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lila);margin-bottom:1.6rem}
.hero-ort{white-space:nowrap}.hero-ort::before{content:"· ";color:var(--ink-3)}
@media (max-width:1200px){ .hero-ort{display:block;margin-top:.3em}.hero-ort::before{content:none} }
.hero-claim{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,5.4vw,6.2rem);line-height:.98;letter-spacing:-.025em;color:var(--ink)}
.hero-claim em{font-style:normal;color:var(--lila)}
.hero-lead{margin-top:1.8rem;max-width:34ch;font-size:clamp(1.0625rem,1.35vw,1.25rem);color:var(--ink-2)}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}

/* Wortrolle (Showcase 015): Wörter rollen nach oben durch */
.rolle{display:inline-block;height:1.65em;overflow:hidden;vertical-align:top;color:var(--ink);font-weight:600;white-space:nowrap}
.rolle-spur{display:flex;flex-direction:column}
.rolle-spur span{display:block;width:max-content;height:1.65em;line-height:1.65em}
@media (prefers-reduced-motion:reduce){ .rolle-spur span:not(:first-child){display:none} }

/* ---------- Layer-Bühne ---------- */
.ebenen{position:relative;z-index:2;height:min(64vh,640px);transform-style:preserve-3d}
.ebenen-glut{position:absolute;inset:12% 6% 6% 14%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,116,255,.45),transparent);filter:blur(40px)} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.ebene{position:absolute;will-change:transform}
.ebene--hinten{left:0;top:4%;width:78%}
.ebene--mitte{right:0;top:24%;width:82%}
.ebene--vorn{left:10%;bottom:-2%;width:clamp(150px,15vw,220px)}
.ebene--marke{right:4%;top:0;width:clamp(78px,7vw,108px)}
.fenster{border-radius:14px;overflow:hidden;background:#0d0a16;
  box-shadow:0 0 0 1px rgba(199,184,255,.2),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(139,116,255,.45)} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.fenster-leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:rgba(27,22,41,.92);border-bottom:1px solid var(--line)}
.fenster-leiste i{width:8px;height:8px;border-radius:50%;background:rgba(199,184,255,.28)}
.fenster-leiste span{margin-left:10px;font-size:.75rem;color:var(--ink-3);letter-spacing:.02em}
.fenster img{width:100%;aspect-ratio:16/10;object-fit:cover}

.handy{position:relative;border-radius:30px;padding:7px;background:#09070f;
  box-shadow:0 0 0 1px rgba(199,184,255,.35),0 50px 90px -30px rgba(0,0,0,.95),0 0 80px -10px rgba(139,116,255,.55)} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.handy video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:24px;background:#000}
.handy-label{position:absolute;left:16px;bottom:16px;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(12,10,20,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 10px;border-radius:999px}
.muenze{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),rgba(139,116,255,.22) 45%,rgba(42,31,82,.7)); /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 20px 50px -15px rgba(139,116,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.muenze img{width:58%}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero-buehne{grid-template-columns:1fr;padding-top:118px;gap:46px}
  .ebenen{height:min(92vw,470px)}
  .ebene--vorn{width:clamp(120px,32vw,170px)}
}

/* ---------- Kapitel ---------- */
.kapitel{padding-block:var(--abstand) 0}
.kapitel--eng{padding-top:calc(var(--abstand)*.7)}
.kapitel-kopf{max-width:980px;margin-bottom:clamp(40px,6vw,72px)}
.kapitel-nr{display:flex;gap:.8em;align-items:baseline;font:500 .8125rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem}
.kapitel-nr span{color:var(--lila);font-feature-settings:"tnum"}
.kapitel-titel{font-family:var(--font-display);font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.02em}
.kapitel-titel .leise{display:block;color:var(--ink-3)}
.kapitel-text{margin-top:1.4rem;max-width:58ch;color:var(--ink-2)}

/* ---------- Akkordeon-Galerie (vermessen an reactbits: Abstand 10 px, Radius 16 px, flex 1 → 4,33, 0,6 s power3.out) ---------- */
.galerie{display:flex;gap:10px;height:clamp(420px,62vh,620px)}
.paneel{position:relative;flex:1 1 0;min-width:0;padding:0;border:0;border-radius:var(--r-paneel);overflow:hidden;cursor:pointer;
  background:var(--bg-2);color:#fff;font:inherit;text-align:left;box-shadow:inset 0 0 0 1px var(--line);
  transition:flex-grow var(--d-flaeche) var(--e-ein)}
.paneel.is-aktiv{flex-grow:2.6}
.paneel picture,.paneel picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.paneel picture img{filter:grayscale(1) brightness(.62);transform:scale(1.04);
  transition:filter var(--d-flaeche) var(--e-zustand),transform var(--d-hero) var(--e-ein)}
/* geöffnet: Hintergrund wird unscharf, darüber das ganze Motiv eingepasst – nichts abgeschnitten, auch nicht das Reel */
.paneel.is-aktiv picture img{filter:blur(22px) brightness(.42) saturate(1.2);transform:scale(1.15)}
.paneel-voll{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px 18px 64px;opacity:0;
  transition:opacity var(--d-zustand) var(--e-zustand);pointer-events:none}
.paneel.is-aktiv .paneel-voll{opacity:1;transition-delay:.18s}
.paneel::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(12,10,20,.78));pointer-events:none}
.paneel-label{position:absolute;z-index:1;left:22px;bottom:22px;display:flex;align-items:center;gap:12px;white-space:nowrap;
  font:600 1.0625rem/1.2 var(--font-sans);opacity:0;transform:translateY(6px);transition:opacity var(--d-zustand) var(--e-zustand),transform var(--d-reveal) var(--e-ein)}
.paneel-label::before{content:"";width:3px;height:1.4em;border-radius:2px;background:var(--lila)}
.paneel.is-aktiv .paneel-label{opacity:1;transform:none;transition-delay:.12s}
.paneel:focus-visible{outline:2px solid var(--lila);outline-offset:3px}

.projekt-info{margin-top:28px;min-height:150px}
.projekt-eintrag{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:clamp(16px,4vw,56px);align-items:start;
  padding-top:24px;border-top:1px solid var(--line)}
.projekt-eintrag h3{font-family:var(--font-display);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1}
.projekt-eintrag h3 span{display:block;margin-top:.35em;font:500 .9375rem/1.4 var(--font-sans);color:var(--ink-3)}
.projekt-eintrag p{color:var(--ink-2)}
.projekt-eintrag[hidden]{display:none}

@media (max-width:900px){
  .galerie{flex-direction:column;height:auto}
  .paneel{flex:none;height:92px;transition:height var(--d-flaeche) var(--e-ein)}
  .paneel.is-aktiv{height:min(72vw,380px)}
  .paneel[data-projekt="ozcars-reel"].is-aktiv{height:min(150vw,620px)}
  .paneel-voll{padding:10px 10px 52px}
  .paneel-label{opacity:1;transform:none;bottom:50%;translate:0 50%;font-size:.9375rem}
  .paneel.is-aktiv .paneel-label{bottom:18px;translate:0 0}
  .projekt-eintrag{grid-template-columns:1fr}
}

/* ---------- Leitsatz (015): Maske = Zeilenhöhe. Bei Sentient 1,12 em, weil die Oberlängen über 1 em hinausragen ---------- */
.leitsatz{padding-top:var(--abstand)}
.leitsatz-text{font-family:var(--font-display);font-size:clamp(2.6rem,8.4vw,8.6rem);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.leitsatz-text em{font-style:normal;color:var(--lila)}
.wort{display:inline-block;height:1.12em;overflow:hidden;vertical-align:top}
.wort-innen{display:block}
.wort-innen > span{display:block;height:1.12em;line-height:1.12}

/* ---------- Leistungen ---------- */
.disziplinen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.8fr);gap:14px}
.disziplin{position:relative;padding:clamp(26px,3vw,40px);border-radius:var(--r-buehne);background:linear-gradient(160deg,var(--bg-3),var(--bg-2));
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.disziplin::before{content:"";position:absolute;inset:-40% -40% auto auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,116,255,.22),transparent);pointer-events:none} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.disziplin-art{font:500 .8125rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lila)}
.disziplin h3{margin-top:1.2rem;font-family:var(--font-display);font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.08}
.disziplin > p:not(.disziplin-art){margin-top:1rem;color:var(--ink-2)}
.punkte{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:10px}
.punkte li{display:flex;gap:12px;align-items:baseline;padding-top:10px;border-top:1px solid var(--line);color:var(--ink)}
.punkte li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lila);translate:0 -2px}
@media (max-width:1000px){ .disziplinen{grid-template-columns:1fr} }

/* Physik-Kiste */
/* Leistungen: drei Zeilen statt Karten. Text links, rechts eine echte Arbeit als Grafik; Haarlinie trennt die Zeilen. */
.leistungen{display:grid}
.leistung{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;
  padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line)}
.leistung h3{font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.06;letter-spacing:-.01em}
.leistung-text p{margin:1rem 0 1.4rem;max-width:46ch;color:var(--ink-2)}
.leistung-bild{margin:0}
.leistung-bild figcaption{margin-top:12px;font-size:.875rem;color:var(--ink-3)}
.leistung-bild .fenster{box-shadow:0 0 0 1px var(--line-2),0 40px 80px -40px rgba(0,0,0,.9)}
.leistung-bild--reel{display:grid;justify-items:center}
.leistung-bild--reel .handy{width:min(240px,62%);transform:rotate(-3deg)}
.leistung-bild--reel .handy img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:24px}
.leistung-bild--reel figcaption{text-align:center}
/* Markenblatt: Zeichen, Farben, Schriften als kleines Gestaltungsblatt */
.markenblatt{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px;aspect-ratio:16/10}
.markenblatt > div{border-radius:var(--r-paneel);box-shadow:inset 0 0 0 1px var(--line)}
.mb-logo{grid-row:span 2;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,var(--lila-tief),var(--bg-2) 70%)}
.mb-logo img{width:52%;height:auto}
.mb-farben{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.mb-farben i{position:relative;background:var(--f);box-shadow:inset 0 0 0 1px var(--line)}
.mb-farben b{position:absolute;left:8px;bottom:8px;font:600 .625rem/1 var(--font-sans);letter-spacing:.04em;color:#140f24;writing-mode:vertical-rl;transform:rotate(180deg)}
.mb-farben i:nth-child(3) b{color:var(--ink-2)}
.mb-schrift{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:6px 12px;padding:14px 18px;background:var(--bg-2)}
.mb-aa{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;color:var(--ink)}
.mb-aa--serif{font-family:var(--font-display)}
.mb-aa--sans{font-family:var(--font-sans);font-weight:600}
.mb-schrift span:not(.mb-aa){font-size:.8125rem;line-height:1.3;color:var(--ink-2)}
.mb-schrift small{font-size:.75rem;color:var(--ink-3)}
@media (max-width:900px){
  .leistung{grid-template-columns:1fr}
  .leistung-text p{margin-bottom:1.1rem}
}
@media (max-width:480px){ .mb-schrift{grid-template-columns:auto 1fr;padding:12px} .mb-farben b{font-size:.5625rem} }
.kiste{position:relative;margin-top:14px;border-radius:var(--r-buehne);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);
  padding:28px clamp(22px,3vw,40px);overflow:hidden}
.kiste-hinweis{font:500 .8125rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kiste-teile{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.teil{display:inline-flex;align-items:center;height:54px;padding:0 24px;border-radius:999px;font:600 1.0625rem/1 var(--font-sans);
  background:var(--bg-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);user-select:none;-webkit-user-select:none;white-space:nowrap}
.teil--lila{background:var(--lila);color:#140f24;box-shadow:none}
.teil--hell{background:#efeaff;color:#140f24;box-shadow:none}
.kiste.ist-physik{height:clamp(280px,28vw,360px)}
.kiste.ist-physik .kiste-teile{position:absolute;inset:0;margin:0}
.kiste.ist-physik .teil{position:absolute;left:0;top:0;cursor:grab;touch-action:none;will-change:transform}
.kiste.ist-physik .teil.zieht{cursor:grabbing}
.kiste.ist-physik .kiste-hinweis{position:relative;z-index:2;pointer-events:none}

/* ---------- Prozess: Signature-Moment „Entstehung“ ----------
   Desktop: Schritte links, Mockup klebt rechts und legt je Schritt eine Ebene auf.
   Handy: Mockup über den Schritten, Phasen per Knopf; einmaliger Durchlauf beim ersten Sichtkontakt.
   Ohne JS / reduzierte Bewegung: Endzustand „Live“ (data-zustand="4"). */
.prozess{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:center}
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.4vh,26px)}
/* Jeder Schritt ist ein Satz. Links eine Haarlinie, die sich beim Scrollen mit Lila füllt (--fuell 0…1). */
.schritt{position:relative;padding:4px 0 4px clamp(18px,2vw,28px);--fuell:0}
.schritt::before,.schritt::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px}
.schritt::before{background:var(--line)}
.schritt::after{background:var(--lila);transform-origin:50% 0;transform:scaleY(var(--fuell));transition:transform var(--d-zustand) var(--e-ein)}
.schritt.ist-erledigt::after{opacity:.45}
.schritt h3{margin:0;font:inherit}
.schritt-satz{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-size:clamp(1.9rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink);
  transition:color var(--d-zustand) var(--e-zustand)}
.schritt p{margin:.55rem 0 0;max-width:42ch;font-size:1rem;line-height:1.6;color:var(--ink-2);transition:color var(--d-zustand) var(--e-zustand)}
.schritt p b{font-weight:600;color:var(--ink)}
/* Erst wenn das Skript steuert, treten die nicht aktiven Sätze zurück (ohne JS bleibt alles voll lesbar) */
.ist-bereit .schritt:not(.ist-aktiv) .schritt-satz{color:var(--ink-3)}
.ist-bereit .schritt:not(.ist-aktiv) p,.ist-bereit .schritt:not(.ist-aktiv) p b{color:var(--ink-3)}
.ist-bereit .schritt:not(.ist-aktiv) .schritt-satz:hover{color:var(--ink-2)}
.ist-bereit .schritt.ist-aktiv,.ist-bereit .schritt.ist-erledigt{--fuell:1}
/* Scroll-Spur (nur PC mit Bewegung): Abschnitt bleibt stehen, jede Phase bekommt rund einen halben Bildschirm Scrollweg */
.prozess-spur.ist-gesteuert{height:calc(100vh + 4 * 48vh)}
.prozess-spur.ist-gesteuert .prozess{position:sticky;top:0;height:100vh;padding-top:64px}
.prozess-spur.ist-gesteuert .schritt.ist-aktiv{--fuell:var(--fortschritt,1)}
.entstehung{margin:0}
.ent-notiz{margin-top:14px;font-size:.875rem;color:var(--ink-3)}
.ent-notiz a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.ent-notiz a:hover{color:var(--lila);text-decoration-color:var(--lila)}
.entstehung-buehne{position:relative;padding:0 0 9% 0}
.ent-flaeche{position:relative;aspect-ratio:16/10;overflow:hidden;background:#100c1b}
.ent-flaeche > *{position:absolute;inset:0}
.ent-url{position:relative;display:inline-grid;margin-left:10px}
.ent-url > span{grid-area:1/1;margin:0 !important;transition:opacity var(--d-zustand) var(--e-zustand)}
.ent-url--live{opacity:0}
.ent-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 .6875rem/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:#b9f5c9;
  opacity:0;transform:translateX(6px);transition:opacity var(--d-zustand) var(--e-zustand),transform var(--d-zustand) var(--e-ein)}
.ent-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ee29a}
/* Ebene 1: Satzspiegel, 12 Spalten */
.ent-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6%;padding:0 4%}
.ent-raster i{background:rgba(199,184,255,.07);border-inline:1px solid rgba(199,184,255,.12);transform-origin:50% 0;
  transition:transform var(--d-flaeche) var(--e-ein),opacity var(--d-zustand) var(--e-zustand)}
.ent-raster i:nth-child(n){transition-delay:calc(var(--n,0) * 25ms)}
/* Ebene 2: Wireframe an den echten Positionen der MARN-Startseite */
.ent-draht i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  border-radius:2px;background:rgba(199,184,255,.28);transform-origin:0 50%;
  transition:transform var(--d-flaeche) var(--e-ein),opacity var(--d-zustand) var(--e-zustand);transition-delay:calc(var(--n,0) * 30ms)}
.ent-draht i.ent-dick{background:rgba(199,184,255,.38)}
.ent-draht i.ent-umriss{background:none;box-shadow:inset 0 0 0 1px rgba(199,184,255,.5)}
.ent-draht i.ent-voll{background:rgba(243,240,250,.55)}
.ent-bildfeld{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(199,184,255,.14);stroke-width:.3;vector-effect:non-scaling-stroke;
  transition:opacity var(--d-zustand) var(--e-zustand)}
/* Ebene 3: Gestaltung legt sich von links über das Wireframe */
.ent-design img{width:100%;height:100%;object-fit:cover}
.ent-design{clip-path:inset(0 0 0 0);transition:clip-path var(--d-hero) var(--e-ein)}
.ent-linien i{position:absolute;background:#c7b8ff;opacity:.75;transition:opacity var(--d-zustand) var(--e-zustand)}
.ent-linie-v{left:calc(var(--x) * 1%);top:0;bottom:0;width:1px}
.ent-linie-h{top:calc(var(--y) * 1%);left:0;right:0;height:1px}
/* Ebene 4: Handy-Ansicht schiebt sich als vorderste Ebene davor */
.ent-handy{position:absolute;right:-3%;bottom:0;width:22%;padding:5px;border-radius:22px;background:#09070f;
  box-shadow:0 0 0 1px rgba(199,184,255,.3),0 30px 60px -20px rgba(0,0,0,.9);
  transition:transform var(--d-hero) var(--e-ein),opacity var(--d-zustand) var(--e-zustand)}
.ent-handy img{width:100%;height:auto;border-radius:17px}

/* Zustände */
.entstehung[data-zustand="1"] .ent-draht i{transform:scaleX(0);opacity:0}
.entstehung[data-zustand="1"] .ent-bildfeld{opacity:0}
.entstehung:is([data-zustand="1"],[data-zustand="2"]) .ent-design{clip-path:inset(0 100% 0 0)}
.entstehung:is([data-zustand="1"],[data-zustand="2"]) .ent-linien i{opacity:0}
.entstehung:not([data-zustand="4"]) .ent-handy{transform:translateY(24px);opacity:0}
.entstehung[data-zustand="4"] .ent-linien i{opacity:0}
.entstehung[data-zustand="4"] .ent-url--entwurf{opacity:0}
.entstehung[data-zustand="4"] .ent-url--live{opacity:1}
.entstehung[data-zustand="4"] .ent-live{opacity:1;transform:none}
.entstehung:is([data-zustand="3"],[data-zustand="4"]) .ent-raster i{opacity:0}

@media (max-height:760px) and (min-width:901px){
  .schritt-satz{font-size:clamp(1.6rem,2.6vw,2.4rem)}
  .schritt p{font-size:.9375rem;margin-top:.35rem}
}
@media (max-width:900px){
  .prozess{grid-template-columns:1fr;gap:36px}
  .entstehung{order:-1}
  /* Handy: die Grafik bleibt oben stehen, die Sätze laufen darunter durch */
  .prozess{align-items:start}
  .ist-bereit .entstehung{position:sticky;top:64px;z-index:3;align-self:start;padding:10px 0 14px;background:var(--bg);
    box-shadow:0 18px 18px -6px var(--bg)}
  .ist-bereit .ent-notiz{display:none}
  .ist-bereit .schritte{padding-bottom:6vh}
  .schritt-satz{font-size:clamp(1.75rem,7.4vw,2.4rem);min-height:48px;padding-block:6px}
  .schritt p{margin-top:.2rem}
  .ent-handy{right:0;width:24%}
}

/* Reel-Pause (WCAG 2.2.2: Bewegung über 5 s anhalten können) */
.reel-knopf{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(12,10,20,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);touch-action:manipulation;
  transition:background-color var(--d-hover) var(--e-zustand),transform var(--d-druck) var(--e-zustand)}
.reel-knopf::before,.reel-knopf::after{content:"";position:absolute;top:16px;width:4px;height:12px;border-radius:1px;background:#fff}
.reel-knopf::before{left:16px}.reel-knopf::after{right:16px}
.reel-knopf[data-pausiert]::before{left:18px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.reel-knopf[data-pausiert]::after{display:none}
.reel-knopf:hover{background:rgba(12,10,20,.85)}
.reel-knopf:active{transform:scale(.94)}

/* ---------- Agentur ---------- */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:880px}
.person{margin:0}
.person-bild{position:relative;border-radius:var(--r-buehne);overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.person-bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter var(--d-flaeche) var(--e-zustand),transform var(--d-hero) var(--e-ein)}
.person{cursor:pointer;outline-offset:6px;border-radius:var(--r-buehne)}
@media (hover:hover){ .person:hover .person-bild img{filter:none;transform:scale(1.02)} }
.person:focus-visible .person-bild img,.person.ist-farbig .person-bild img{filter:none}
.ki-hinweis{position:absolute;right:12px;bottom:12px;font-size:.75rem;color:#fff;background:rgba(12,10,20,.62);padding:4px 10px;border-radius:999px}
.person figcaption{margin-top:14px;color:var(--ink-2)}
.person figcaption strong{display:block;color:var(--ink);font-weight:600}
@media (max-width:560px){ .team{grid-template-columns:1fr} }

/* ---------- FAQ (H5: Höhe per Grid) ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,80px);align-items:start}
.faq-liste details{border-top:1px solid var(--line)}
.faq-liste details:last-child{border-bottom:1px solid var(--line)}
.faq-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:600 1.125rem/1.4 var(--font-sans)}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"+";flex:none;font-weight:400;font-size:1.5rem;line-height:1;color:var(--lila);transition:transform var(--d-zustand) var(--e-zustand)}
.faq-liste details[open] summary::after{transform:rotate(45deg)}
.faq-liste details > div{padding:0 0 22px;color:var(--ink-2);max-width:62ch}
@media (max-width:860px){ .faq{grid-template-columns:1fr} }

/* ---------- Kontakt ---------- */
.kontakt{padding:var(--abstand) 0}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:start;
  padding:clamp(28px,5vw,72px);border-radius:var(--r-buehne);
  background:radial-gradient(80% 90% at 0% 0%,rgba(139,116,255,.25),transparent 60%),var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)} /* generisch-ok: Lila ist Bestandsfarbe der Marke, Kundenwunsch 15.10.2026 */
.kontakt-direkt{margin-top:1.6rem;color:var(--ink-2)}
.kontakt-direkt a{color:var(--lila)}
.formular{display:grid;gap:8px}
.formular label{font-weight:600;font-size:.9375rem;margin-top:10px}
.formular input,.formular textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(12,10,20,.6);
  color:var(--ink);font:inherit;transition:border-color var(--d-hover) var(--e-zustand),box-shadow var(--d-hover) var(--e-zustand)}
.formular input:focus,.formular textarea:focus{outline:none;border-color:var(--lila);box-shadow:0 0 0 3px rgba(199,184,255,.18)}
.formular textarea{resize:vertical;min-height:130px}
.formular [aria-invalid="true"]{border-color:#ff9f9f}
.formular-hinweis{margin-top:8px;font-size:.875rem;color:var(--ink-3)}
.formular-hinweis a{color:var(--ink-2)}
.formular .knopf{justify-self:start;margin-top:10px}
.formular-status{min-height:1.5em;font-weight:600}
.formular-status.ok{color:#b9f5c9}.formular-status.fehler{color:#ffb3b3}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){ .kontakt-raster{grid-template-columns:1fr} }

/* ---------- Fuß ---------- */
.fuss{padding:60px 0 40px;border-top:1px solid var(--line)}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr auto;gap:40px;align-items:start}
.fuss-marke{width:120px;margin-bottom:18px}
.fuss p{color:var(--ink-3);font-size:.9375rem}
.fuss a{color:var(--ink-2);text-decoration:none}
.fuss a:hover{color:var(--lila)}
.fuss nav{display:grid;gap:8px;font-size:.9375rem}
.fuss-zeile{margin-top:40px;font-size:.8125rem;color:var(--ink-3)}
@media (max-width:760px){ .fuss-raster{grid-template-columns:1fr} }

/* ---------- Bewegung: Startzustände nur unter html.motion ---------- */
.motion [data-reveal]:not([data-revealed]){opacity:0}
@media (prefers-reduced-motion:reduce){
  /* Zustandswechsel bleiben sichtbar, aber als kurzer Überblendschnitt statt Bewegung */
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .entstehung *{transition-duration:.12s !important;transition-delay:0s !important;transform:none !important}
  .schritt *,.schritt::after{transition-duration:.12s !important}
}

/* ---------- Showcase-Wand: Kacheln liegen schräg im Raum (rotateX/rotateZ), Spalten laufen beim Scrollen gegeneinander ---------- */
.showcase{position:relative;margin-top:var(--abstand);height:clamp(560px,92vh,900px);overflow:hidden;display:grid;place-items:center;isolation:isolate}
.wand{position:absolute;inset:0;perspective:1600px;z-index:-1;
  -webkit-mask-image:radial-gradient(62% 48% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(62% 48% at 50% 50%,#000 40%,transparent 100%)}
.wand-ebene{position:absolute;left:50%;top:50%;width:126%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
  transform:translate(-50%,-50%) rotateX(38deg) rotateZ(-28deg);transform-style:preserve-3d}
.wand-spalte{display:grid;gap:18px;align-content:start;will-change:transform}
.wand-spalte:nth-child(even){margin-top:-140px}
.kachel{border-radius:var(--r-paneel);overflow:hidden;background:var(--bg-2);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.9)}
.kachel img{width:100%;height:100%;object-fit:cover;object-position:left top;filter:saturate(.85) brightness(.75)}
.kachel--quer{aspect-ratio:16/10}
.kachel--hoch{aspect-ratio:9/16}
.showcase::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 40% at 50% 50%,rgba(12,10,20,.86),rgba(12,10,20,.2) 70%,transparent);pointer-events:none}
.showcase-text{text-align:center;padding:0 var(--pad);max-width:900px}
.showcase-titel{font-family:var(--font-display);font-size:clamp(2.6rem,6.6vw,6.4rem);line-height:1;letter-spacing:-.025em}
.showcase-titel .leise{color:var(--lila)}
.showcase-lead{margin:1.4rem auto 2rem;max-width:44ch;color:var(--ink-2)}
@media (max-width:760px){
  .wand-ebene{width:230%;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .wand-spalte{gap:12px}
}
.disziplin-mehr{margin-top:1.6rem}

/* ---------- Unterseiten ---------- */
.krumen{padding-top:110px;font-size:.875rem;color:var(--ink-3)}
.krumen a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(199,184,255,.4)}.krumen a:hover{color:var(--lila)}
.krumen span[aria-current]{color:var(--ink)}
.seite-kopf{padding:clamp(40px,7vw,90px) 0 0}
.seite-titel{font-family:var(--font-display);font-size:clamp(2.6rem,6.2vw,6rem);line-height:1;letter-spacing:-.025em;max-width:16ch}
.seite-titel .leise{display:block;color:var(--ink-3)}
.seite-lead{margin-top:1.6rem;max-width:56ch;font-size:clamp(1.0625rem,1.35vw,1.25rem);color:var(--ink-2)}
.seite-kopf--split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(30px,6vw,90px);align-items:center}
.handy--seite{max-width:280px;justify-self:center}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.karte{padding:clamp(24px,2.6vw,34px);border-radius:var(--r-buehne);background:linear-gradient(160deg,var(--bg-3),var(--bg-2));box-shadow:inset 0 0 0 1px var(--line)}
.karte h3{font-family:var(--font-display);font-size:1.5rem;line-height:1.15}
.karte p{margin-top:.8rem;color:var(--ink-2)}
.beispiele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.beispiel{display:block;text-decoration:none;padding:14px 14px 26px;border-radius:var(--r-buehne);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--d-hover) var(--e-zustand),transform var(--d-hover) var(--e-zustand)}
.beispiel:hover,.beispiel:focus-visible{box-shadow:inset 0 0 0 1px var(--lila)}
@media (hover:hover){ .beispiel:hover{transform:translateY(calc(-1 * var(--w-klein)))} }
.beispiel-bild{border-radius:var(--r-paneel);overflow:hidden;aspect-ratio:16/10}
.beispiel-bild img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform var(--d-hero) var(--e-ein)}
.beispiel:hover .beispiel-bild img,.beispiel:focus-visible .beispiel-bild img{transform:scale(1.03)}
.beispiel h3{margin:20px 12px 0;font-family:var(--font-display);font-size:1.7rem}
.beispiel h3 span{display:block;font:500 .9375rem/1.4 var(--font-sans);color:var(--ink-3);margin-top:.3em}
.beispiel p{margin:.8rem 12px 0;color:var(--ink-2)}
.messnotiz{margin-top:18px;font-size:.875rem;color:var(--ink-3);max-width:80ch}
.fall{padding-top:var(--abstand)}
.fall-kopf{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.fall-bild{border-radius:var(--r-buehne);overflow:hidden;box-shadow:0 0 0 1px var(--line-2),0 40px 80px -40px rgba(0,0,0,.9)}
.fall-bild img{width:100%;height:auto}
.fall-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);margin-top:40px}
.fall-raster h3{font-family:var(--font-display);font-size:1.6rem;margin-bottom:.8rem}
.fall-raster p{color:var(--ink-2)}
.fall-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.fall-bilder > div{border-radius:var(--r-paneel);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.artikel{max-width:820px}
.artikel-meta{margin-top:1.4rem;color:var(--ink-3);font-size:.9375rem}
.artikel-text{margin-top:20px}
.artikel-text h2{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;margin:2.4rem 0 .8rem}
.artikel-text p{color:var(--ink-2);margin-bottom:1rem}
.artikel-text a{color:var(--lila)}
.quelle{margin-top:2rem;font-size:.875rem}
.kontakt--kurz{padding-top:var(--abstand)}
.kontakt-knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-self:center}
@media (max-width:900px){
  .raster-3,.beispiele,.fall-raster,.fall-bilder,.seite-kopf--split{grid-template-columns:1fr}
  .krumen{padding-top:96px}
}
.artikel--recht{padding-top:clamp(30px,5vw,60px)}
.artikel--recht h2{font-family:var(--font-display);font-size:1.5rem;margin:2.2rem 0 .6rem}
.artikel--recht p,.artikel--recht li{color:var(--ink-2)}
.artikel--recht a{color:var(--lila)}
.legal-stand{color:var(--ink-3);font-size:.9375rem;margin-top:1rem}

/* ---------- Menü: Markenfarben (die Baustein-Datei setzt eigene Werte direkt an .insel) und Tippfläche ≥ 44 px ---------- */
.insel,.insel-overlay{--insel-bg:#17122a;--insel-rand:rgba(199,184,255,.22);--insel-text:#f3f0fa;--insel-leise:#9d95b6;
  --insel-akzent:#c7b8ff;--insel-trenner:rgba(199,184,255,.12);--insel-schleier:rgba(8,6,15,.86);--insel-oben:1.1rem}
.insel-knopf{height:44px;min-width:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Symbolfeld so groß wie die Tippfläche: zu sitzen die drei Striche genau in der Mitte des Kreises */
.insel-knopf__icon{width:44px;height:44px}
.insel-link{touch-action:manipulation}

/* ---------- Sprachwahl neben „Projekt anfragen“ ---------- */
.kopf-rechts{display:flex;align-items:center;gap:8px}
.sprache{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;padding:0 14px;border-radius:999px;
  font:600 .875rem/1 var(--font-sans);letter-spacing:.06em;color:var(--ink);text-decoration:none;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow var(--t2),background-color var(--t2)}
.sprache:hover{box-shadow:inset 0 0 0 1px var(--lila);background:rgba(199,184,255,.1)}

/* ---------- Layer-Bühne: Ebenen anklickbar, nach vorn holen ---------- */
.ebene{cursor:pointer;transition:filter var(--d-zustand) var(--e-zustand)}
.ebene.ist-vorn .fenster{filter:none}
.ebene:not(.ist-vorn) .fenster{filter:saturate(.75) brightness(.8)}

/* Video mit Bedienelementen: Fokusrahmen nach innen, weil die Handy-Hülle außen abschneidet */
.handy video:focus-visible{outline:2px solid var(--lila);outline-offset:-4px}

/* ---------- Einwilligung Besucherstatistik: ruhiges Panel unten (PC rechts, damit der Haupt-Knopf frei bleibt), beide Knöpfe gleichwertig ---------- */
.fuss-knopf{padding:0;border:0;background:none;font:inherit;color:var(--ink-2);text-align:left;cursor:pointer}
.fuss-knopf:hover{color:var(--lila)}
.einwilligung{position:fixed;left:16px;bottom:16px;z-index:1500;width:min(420px,calc(100vw - 32px));padding:20px 22px;border-radius:var(--r-paneel);
  background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -20px rgba(0,0,0,.8);color:var(--ink)}
.einwilligung h2{font-family:var(--font-display);font-size:1.35rem;line-height:1.15}
.einwilligung p{margin:.6rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.einwilligung a{color:var(--ink);text-underline-offset:3px}
.einwilligung-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.einwilligung-knoepfe button{min-height:44px;border-radius:999px;border:0;cursor:pointer;font:600 .9375rem/1 var(--font-sans);color:var(--ink);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color var(--d-hover) var(--e-zustand),box-shadow var(--d-hover) var(--e-zustand)}
.einwilligung-knoepfe button:hover{background:rgba(199,184,255,.1);box-shadow:inset 0 0 0 1px var(--lila)}
.einwilligung[hidden]{display:none}
@media (min-width:901px){ .einwilligung{left:auto;right:24px;bottom:24px} }

/* ---------- Standortkarte: eigenes Bild aus OpenStreetMap-Daten (claude-werkzeuge/karte-zeichnen.py), keine Verbindung zu Kartendiensten ---------- */
.standort{margin-top:clamp(56px,8vw,110px)}
.standort-titel{font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1;margin-bottom:20px}
.standort-karte{position:relative;margin:0}
.karte-bild{position:relative;aspect-ratio:16/10;border-radius:var(--r-buehne);overflow:hidden;background:#14101f;box-shadow:inset 0 0 0 1px var(--line)}
.karte-bild img{display:block;width:100%;height:100%}
.karte-ort,.karte-wir{text-shadow:0 0 6px #14101f,0 0 12px #14101f,0 0 18px #14101f;position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}
.karte-ort{font:500 .75rem/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.karte-ort--stadt{font:400 clamp(1rem,1.6vw,1.35rem)/1 var(--font-display);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.karte-wir{transform:translate(18px,-50%);font:600 .9375rem/1 var(--font-sans);color:var(--ink)}
.karte-info{position:absolute;justify-items:start;left:clamp(18px,3vw,36px);bottom:clamp(18px,3vw,36px);display:grid;gap:12px;padding:20px 22px;border-radius:var(--r-paneel);
  background:rgba(12,10,20,.82);box-shadow:inset 0 0 0 1px var(--line-2);backdrop-filter:blur(6px)}
.karte-adresse{font-family:var(--font-display);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.25}
.karte-quelle{margin-top:10px;font-size:.75rem;color:var(--ink-3)}
.karte-quelle a{color:var(--ink-2)}
@media (max-width:760px){
  .karte-info{position:static;margin-top:14px;background:var(--bg-2)}
  .karte-ort{display:none}
  .karte-ort--stadt{display:block;font-size:.875rem}
}

/* ---- Bewertung (26.10.2026): eine echte Google-Rezension, Anzahl offen genannt ---- */
.stimme{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,80px);align-items:start}
.stimme-wert{margin-top:1.4rem;color:var(--ink-2);font-feature-settings:"tnum"}
.stimme-sterne{color:#f2b84b;letter-spacing:.12em;margin-right:.4em}
.stimme-stand{display:block;margin-top:.3em;color:var(--ink-3);font-size:.875rem}
.stimme-links{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:12px 24px}
.stimme-zitat{margin:0;padding:clamp(26px,3.4vw,46px);border-radius:var(--r-buehne);background:linear-gradient(160deg,var(--bg-3),var(--bg-2));box-shadow:inset 0 0 0 1px var(--line)}
.stimme-zitat blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.2;letter-spacing:-.01em}
.stimme-zitat figcaption{margin-top:1.6rem;color:var(--ink-3)}
.stimme-zitat figcaption strong{display:block;color:var(--ink);font-weight:600}
@media (max-width:860px){ .stimme{grid-template-columns:1fr} }
.standort-text{max-width:62ch;color:var(--ink-2);margin-bottom:24px}
.standort-text a,.karte-adresse a{color:var(--lila)}
/* Regionsseite */
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;list-style:none;padding:0;margin:0}
.orte li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r-paneel);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.orte li span{color:var(--ink-3);font-feature-settings:"tnum";white-space:nowrap}
.stimme-uebersetzung{margin-top:1rem;color:var(--ink-2)}
.stimme-hinweis{margin-top:1.2rem;font-size:.875rem;color:var(--ink-3);max-width:60ch}.stimme-hinweis a{color:var(--ink-2)}