/* Druvis Website · Raum: Glas, Licht und 3D (Overhaul 26.10.2026, Stand 3.1.1). Lädt auf allen Seiten nach site.css.
   Flüssiges Glas (Verlaufskante, Glanzlicht, Unschärfe nur an wenigen Stellen), Aurora-Licht und Körnung in den
   Navy-Bändern, 3D-Bühnen (raum.js) mit statischem Bild davor, neue Bausteine der Startseite (Linsen, Belegkette,
   Lernschleife, Tresor). Bewegung nur über transform/opacity bei no-preference; ohne JS bleibt alles sichtbar. */

:root{
  --raum-cyan:#4FD1FF;--raum-blau:#3878D0;--raum-indigo:#6C63FF;--raum-violett:#9B7BFF;
  --verlauf-ki:linear-gradient(120deg,#4FD1FF 0%,#3878D0 42%,#6C63FF 74%,#9B7BFF 100%);
  --verlauf-text:linear-gradient(100deg,#FFFFFF 0%,#BFE4FF 45%,#B9AEFF 100%);
  --glas-kante:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.14) 38%,rgba(79,209,255,.55) 70%,rgba(155,123,255,.75));
  --glas-flaeche:linear-gradient(150deg,light-dark(rgba(255,255,255,.78),rgba(255,255,255,.1)),light-dark(rgba(255,255,255,.42),rgba(255,255,255,.03)));
  --glas-unschaerfe:blur(20px) saturate(1.7);
  --glas-schatten:inset 0 1px 0 light-dark(rgba(255,255,255,.95),rgba(255,255,255,.2)),0 1px 2px light-dark(rgba(16,33,58,.05),rgba(0,0,0,.3)),0 22px 48px -20px light-dark(rgba(16,33,58,.3),rgba(0,0,0,.6)),0 40px 90px -45px rgba(76,90,230,.45)
}

/* ---------- Grundlicht der Seite: weiche Farbfelder hinter den hellen Abschnitten ---------- */
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 30% at 88% 12%,light-dark(rgba(79,209,255,.11),rgba(79,209,255,.08)),transparent 70%),radial-gradient(32% 28% at 6% 42%,light-dark(rgba(108,99,255,.08),rgba(108,99,255,.1)),transparent 70%),radial-gradient(36% 32% at 70% 88%,light-dark(rgba(56,120,208,.08),rgba(56,120,208,.1)),transparent 70%)}
.abschnitt--alt{background:color-mix(in srgb,var(--c-bg-alt) 72%,transparent)}

/* ---------- Navy-Bänder: tiefer Verlauf, Aurora, Waben, Körnung ---------- */
.band{background-color:#0B1830;background-image:radial-gradient(55% 45% at 88% 0,rgba(79,209,255,.17),transparent 70%),radial-gradient(48% 58% at 0 100%,rgba(108,99,255,.2),transparent 70%),radial-gradient(70% 55% at 50% -8%,rgba(141,187,245,.14),transparent 70%),url("/assets/img/muster-sechseck.svg"),linear-gradient(180deg,#10223F,#0A1529);background-size:auto,auto,auto,110.85px 192px,auto}
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E")}
.band h2,.band h3{color:#fff}
.verlauf{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
:not(.band)>.wrap .verlauf-hell,.verlauf-hell{background:linear-gradient(100deg,var(--c-link),light-dark(#5B4FE0,#B9AEFF));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Glas ---------- */
.glas{position:relative;background:var(--glas-flaeche);border:0;border-radius:22px;box-shadow:var(--glas-schatten)}
.glas::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--glas-kante);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.85}
.glas--klar{-webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe)}
.band .glas{background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px -30px rgba(0,0,0,.7),0 30px 80px -50px rgba(79,209,255,.4)}
.band .glas::before{opacity:.55}

/* Kopfzeile: Glas mit Verlaufslinie */
.kopf.ist-gescrollt::before{background:color-mix(in srgb,var(--c-bg) 90%,transparent);border-bottom-color:transparent;box-shadow:0 1px 0 color-mix(in srgb,var(--c-border) 70%,transparent),0 18px 40px -26px rgba(16,33,58,.35)}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:var(--verlauf-ki);opacity:0;transition:opacity var(--t)}
.kopf.ist-gescrollt::after{opacity:.55;translate:0 -10px}

/* Karten: Glas ohne Unschärfe, Verlaufskante beim Zeigen */
.karte,.preiskarte,.branche,.messwert,.stufe{background:linear-gradient(160deg,color-mix(in srgb,var(--c-surface) 97%,transparent),color-mix(in srgb,var(--c-surface) 80%,transparent));border-color:color-mix(in srgb,var(--c-border) 80%,transparent);border-radius:20px;box-shadow:inset 0 1px 0 var(--lichtkante),var(--shadow-1)}
.karte::before,.preiskarte::before,.stufe::before{inset:0;height:auto;border-radius:inherit;padding:1px;background:var(--glas-kante);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity var(--t)}
.karte--link:hover::before,.karte[data-tilt].ist-tilt::before,.preiskarte--empfohlen::before{opacity:1}
.karte--link:hover{border-color:transparent;box-shadow:inset 0 1px 0 var(--lichtkante),var(--shadow-3)}
.band :is(.karte,.messwert,.stufe){background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 50px -30px rgba(0,0,0,.6)}
.karte__icon{color:#fff;background:linear-gradient(145deg,#56C8F5 -20%,#3878D0 45%,#6458E8 115%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(30,25,110,.25),0 10px 20px -8px rgba(76,90,230,.55)}
.stufe__nr,.zeitstrahl>li::before{background:linear-gradient(160deg,#4FB8F0,#3878D0 45%,#6458E8)}

/* Knöpfe: Verlauf mit Glanz, zweiter Knopf als Glas */
.btn{border-radius:14px}
.btn--primaer{background:linear-gradient(115deg,#2F6BC1 0%,#3F5FD8 55%,#5B4FE0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 30px -10px rgba(76,90,230,.7)}
.btn--primaer:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 38px -10px rgba(76,90,230,.85),0 0 0 4px rgba(108,99,255,.16)}
.btn--sekundaer{background:color-mix(in srgb,var(--c-surface) 55%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)}
.band .btn--sekundaer{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* Chips und Oberzeilen als Glaspillen */
.chip{box-shadow:inset 0 1px 0 var(--lichtkante),inset 0 0 0 1px color-mix(in srgb,var(--c-blue) 18%,transparent)}
.oberzeile{padding:.3rem .8rem .3rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--c-blue) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-blue) 24%,transparent),inset 0 1px 0 var(--lichtkante)}
.band .oberzeile{color:#CFE5FF;background:rgba(141,187,245,.12);box-shadow:inset 0 0 0 1px rgba(141,187,245,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.abschnitt__kopf.mitte{margin-inline:auto}

/* Messwerte mit Verlaufszahl */
.messwert__zahl{background:linear-gradient(100deg,var(--c-text) 10%,var(--c-link) 70%,light-dark(#5B4FE0,#B9AEFF));-webkit-background-clip:text;background-clip:text;color:transparent}
.band .messwert__zahl{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.5rem,1.5rem + 4.5vw,5rem) clamp(6.5rem,4.5rem + 6vw,10rem)}
.hero::before{background:radial-gradient(34% 42% at 74% 38%,rgba(79,209,255,.32),transparent 70%),radial-gradient(30% 38% at 60% 60%,rgba(108,99,255,.34),transparent 70%),radial-gradient(28% 36% at 12% 90%,rgba(111,168,240,.2),transparent 70%),radial-gradient(30% 40% at 98% 88%,rgba(155,123,255,.26),transparent 70%)}
.hero__boden{position:absolute;left:-30%;right:-30%;bottom:0;height:46%;z-index:-1;pointer-events:none;transform:perspective(560px) rotateX(64deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(125,178,244,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(125,178,244,.2) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to top,#000 0,transparent 80%);mask-image:linear-gradient(to top,#000 0,transparent 80%)}
.hero h1{max-width:none;font-size:clamp(2.1rem,1.5rem + 2.6vw,3.3rem)}
@media (min-width:600px){.hero__text{container-type:inline-size}.hero h1{font-size:clamp(2.1rem,7.8cqi,3.3rem)}}
.hero__betont{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text}
.hero__marke .chip{background:rgba(141,187,245,.13);box-shadow:inset 0 0 0 1px rgba(141,187,245,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.hero__belege{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-6) 0 0;padding:0}
.hero__belege li{display:inline-flex;align-items:center;gap:.45rem;margin:0;padding:.4rem .8rem;border-radius:999px;color:#E3EEFC;font-size:var(--fs-sm);font-weight:600;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.16)}
.hero__belege .i{width:18px;height:18px;color:#8FD8FF}
@media (min-width:960px){.hero__raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.vertrauen__liste{background:color-mix(in srgb,var(--c-surface) 82%,transparent);-webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe);border-color:transparent;border-radius:26px;box-shadow:var(--glas-schatten)}

/* ---------- 3D-Bühne (raum.js) ---------- */
.raum{position:relative;width:min(100%,600px);aspect-ratio:1;margin:0 auto;user-select:none;-webkit-user-select:none}
.raum__bild,.raum__leinwand{position:absolute;inset:0;width:100%;height:100%}
.raum__bild{object-fit:contain;transition:opacity .9s var(--ease)}
.raum__leinwand{opacity:0;transition:opacity .9s var(--ease)}
.raum--bereit .raum__leinwand{opacity:1}
.raum--bereit .raum__bild{opacity:0}
.raum__licht{position:absolute;inset:14% 10% 18%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(79,209,255,.32),rgba(108,99,255,.16) 55%,transparent);filter:blur(18px);transition:opacity .8s var(--ease)}
/* Stufen: ein Farbring hinter den Scheiben, der sich langsam dreht (psychedelisch, aber leise; ohne Unschärfe). Es
   dreht nur der Verlauf im runden, beschnittenen Ring, so ragt beim Drehen nichts über den Rand. */
.raum--stufen .raum__licht{inset:4%;filter:none;opacity:.55;overflow:hidden;background:none;-webkit-mask:radial-gradient(closest-side,transparent 36%,#000 60%,transparent 100%);mask:radial-gradient(closest-side,transparent 36%,#000 60%,transparent 100%)}
.raum--stufen .raum__licht::before{content:"";position:absolute;inset:0;background:conic-gradient(from 90deg,rgba(79,209,255,.6),rgba(108,99,255,.55),rgba(240,120,210,.45),rgba(155,123,255,.55),rgba(79,209,255,.6))}
@media (prefers-reduced-motion:no-preference){.raum--stufen .raum__licht::before{animation:farbring 26s linear infinite}}
@keyframes farbring{to{rotate:1turn}}
.raum__hinweis{position:absolute;left:50%;bottom:1%;translate:-50% 0;display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.35rem .8rem;border-radius:999px;color:#E3EEFC;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;background:rgba(10,21,41,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.raum__hinweis .i{width:16px;height:16px}
.raum--bereit .raum__hinweis{opacity:1}
/* Ein Klick auf die Form öffnet die Live-Demo: Link über der Form im Platz; unterwegs eine Klickfläche über dem Funken */
.raum__ziel{position:absolute;inset:12%;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.raum__ziel:focus-visible,.begleiter__ziel:focus-visible{outline:2px solid var(--raum-cyan);outline-offset:4px}
.raum:not(.band .raum) .raum__hinweis{background:rgba(16,33,58,.74)}
.raum:has(.raum__ziel:hover) .raum__hinweis{background:rgba(56,120,208,.72)}
/* Begleiter (raum.js): eine Leinwand über der Seite, die von Platz zu Platz reist; Klicks gehen hindurch. Ist er
   bereit, treten die Bilder der Plätze zurück; Hinweis, Etiketten, Licht und Klick gibt es dort, wo er angedockt ist. */
.begleiter{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);will-change:transform}
.begleiter--an.begleiter--sichtbar{opacity:1}
.begleiter__ziel{position:fixed;left:0;top:0;z-index:41;width:100px;height:100px;border-radius:50%;pointer-events:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.begleiter__ziel--an{pointer-events:auto}
.raum-reise .raum__bild{opacity:0}
.raum-reise .raum__leinwand{opacity:1;transition:none}
.raum-reise .raum--angedockt .raum__hinweis{opacity:1}
.raum-reise .raum:not(.raum--angedockt) .raum__etiketten li,.raum-reise .raum:not(.raum--angedockt) .raum__licht{opacity:0}
.raum-reise .raum:not(.raum--angedockt) .raum__ziel{pointer-events:none}
.raum__etiketten{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);list-style:none;margin:0;padding:0;pointer-events:none}
.raum__etiketten li{display:inline-flex;align-items:center;gap:.45rem;margin:0;padding:.3rem .7rem .3rem .35rem;border-radius:999px;color:#E8F1FD;font-size:var(--fs-xs);font-weight:700;line-height:1.25;white-space:nowrap;background:rgba(10,21,41,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:opacity .4s var(--ease),background-color .4s var(--ease)}
.raum__etiketten b{display:grid;place-items:center;width:1.45rem;height:1.6rem;color:#fff;font-size:.75rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#4FB8F0,#3878D0 45%,#6458E8)}
.raum__etiketten small{color:#A9D9FF;font-size:inherit;font-weight:600}
.raum--etiketten .raum__etiketten{inset:0;display:block}
.raum--etiketten .raum__etiketten li{position:absolute;left:0;top:0;margin-top:-.85rem}
.raum__etiketten .i{width:16px;height:16px;margin-left:.15rem;color:#8FD8FF}
.raum:not(.raum--etiketten) .raum__etiketten~.raum__hinweis{top:0;bottom:auto}
.unterhaube .raum:not(.raum--etiketten) .raum__hinweis{display:none}
[data-aktiv="1"] .raum__etiketten li:not([data-anker="1"]),[data-aktiv="2"] .raum__etiketten li:not([data-anker="2"]),[data-aktiv="3"] .raum__etiketten li:not([data-anker="3"]),[data-aktiv="4"] .raum__etiketten li:not([data-anker="4"]){opacity:.55}
[data-aktiv="1"] .raum__etiketten [data-anker="1"],[data-aktiv="2"] .raum__etiketten [data-anker="2"],[data-aktiv="3"] .raum__etiketten [data-anker="3"],[data-aktiv="4"] .raum__etiketten [data-anker="4"]{background:rgba(56,120,208,.55)}

/* ---------- Linsen: „Was ist Ihnen wichtig?“ ---------- */
.linsen-abschnitt{padding-block:clamp(2.5rem,2rem + 2.5vw,4rem) clamp(1rem,.5rem + 2vw,2.5rem)}
.linsen-abschnitt h2{font-size:var(--fs-2xl);text-align:center}
.linsen{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));list-style:none;margin:0;padding:0}
.linsen>li{margin:0}
.linse{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem var(--space-3);align-items:center;height:100%;padding:var(--space-5);color:var(--c-text);text-decoration:none;transition:translate var(--t),box-shadow var(--t)}
.linse .karte__icon{grid-row:1/3;width:52px;height:52px;border-radius:15px}
.linse b{font-size:var(--fs-lg);line-height:1.3}
.linse small{grid-column:2;color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.45}
.linse>.i{grid-row:1/3;grid-column:3;width:22px;height:22px;color:var(--c-link);transition:translate var(--tf)}
.linse:hover{box-shadow:inset 0 1px 0 var(--lichtkante),var(--shadow-3)}
.linse:hover>.i{translate:4px 0}
@media (min-width:600px){.linse{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:var(--space-6) var(--space-5) var(--space-5)}.linse .karte__icon{margin-bottom:var(--space-3)}.linse>.i{position:absolute;top:var(--space-6);right:var(--space-5)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.linse:hover{translate:0 -3px}}
:target:is(#antworten,#lernen,#sicherheit,#preise) .abschnitt__kopf h2,:target:is(#antworten,#lernen,#sicherheit,#preise)>.wrap>h2{text-decoration:underline;text-decoration-color:var(--raum-cyan);text-decoration-thickness:3px;text-underline-offset:.25em}

/* ---------- Unter der Haube: Erzählung mit 3D-Stufen ---------- */
.unterhaube .erzaehlung__karte{background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.unterhaube .erzaehlung__karte p{color:var(--band-text-2)}
/* Kein overflow:hidden hier: Es macht das Band zum Scroll-Container, dann klebt die Bühne nicht (Seite clippt waagrecht) */
.band.unterhaube{overflow:visible}
.unterhaube .stufe__tempo{display:inline-flex;align-items:center;gap:.35rem;margin:0;padding:.2rem .65rem;border-radius:999px;color:#BFE4FF;font-size:var(--fs-xs);font-weight:700;background:rgba(79,209,255,.12);box-shadow:inset 0 0 0 1px rgba(79,209,255,.3)}
.unterhaube .stufe__tempo .i{width:15px;height:15px}
@media (min-width:960px){
.js .unterhaube .erzaehlung__karte{background:transparent;border-color:transparent;box-shadow:none}
.js .unterhaube .ist-aktiv .erzaehlung__karte{background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(79,209,255,.18)}
.js .unterhaube .erzaehlung__schritt:not(.ist-aktiv) .stufe__nr{background:rgba(255,255,255,.12);color:#CFE0F5}
.erzaehlung__buehne .raum{width:100%}}
.unterhaube .erzaehlung__buehne{display:block}
@media (max-width:959px){.unterhaube .erzaehlung__buehne{order:-1;width:100%;max-width:440px;margin:0 auto var(--space-4)}}
.unterhaube .erzaehlung__raster{display:grid}
.unterhaube .buehne__fortschritt{display:none}

/* ---------- Belegkette: Frage, Antwort, Fundstelle ---------- */
.kette{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);list-style:none;margin:0;padding:0;counter-reset:glied}
@media (min-width:960px){.kette{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
.kette__glied{position:relative;display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:var(--space-6) var(--space-5) var(--space-5)}
.kette__glied h3{margin:0;font-size:var(--fs-lg)}
.kette__glied>p{margin:0;font-size:var(--fs-sm)}
.kette__nr{display:grid;place-items:center;width:40px;height:45px;color:#fff;font-weight:800;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#4FB8F0,#3878D0 45%,#6458E8)}
@media (min-width:960px){.kette__glied:not(:last-child)::after{content:"";position:absolute;top:4.1rem;right:calc(-1 * clamp(1.5rem,1rem + 2vw,2.5rem));width:clamp(1.5rem,1rem + 2vw,2.5rem);height:3px;border-radius:3px;background:var(--verlauf-ki);background-size:200% 100%;box-shadow:0 0 14px rgba(79,209,255,.55)}}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){.kette__glied:not(:last-child)::after{animation:strom 2.4s linear infinite}}
@keyframes strom{to{background-position:-200% 0}}
.mini{margin-top:auto;padding:var(--space-4);border-radius:16px;font-size:var(--fs-sm);line-height:1.5;background:var(--app-surface);color:var(--app-text-2);box-shadow:inset 0 0 0 1px var(--app-border),0 14px 30px -18px rgba(16,33,58,.4)}
.mini--frage p{margin:0 0 0 auto;width:fit-content;max-width:92%;padding:.55em .85em;border-radius:1em 1em .3em 1em;background:linear-gradient(115deg,#2F6BC1,#5B4FE0);color:#fff;font-weight:600}
.mini p{margin:0}
.mini .szene__herkunft{margin-bottom:.55rem}
.mini .szene__belege{margin-top:.6rem}
.mini mark{display:block;margin-top:.5rem;padding:.35em .5em;border-radius:.4em;background:var(--app-mark);color:var(--app-text);box-shadow:inset .2em 0 0 #E0A100}
.mini__datei{display:flex;align-items:center;gap:.4rem;color:var(--app-text);font-weight:700}
.mini__datei .i{width:18px;height:18px;color:var(--app-link)}

/* ---------- Lernschleife (SVG) ---------- */
.schleife{position:relative;width:min(100%,540px);margin:0 auto}
.schleife svg{display:block;width:100%;height:auto;overflow:visible}
.schleife__schein{fill:none;stroke:rgba(79,209,255,.08);stroke-width:22}
.schleife__bahn{fill:none;stroke:url(#schleife-verlauf);stroke-width:3}
.schleife__puls{fill:none;stroke:#BFE4FF;stroke-width:5;stroke-linecap:round;stroke-dasharray:28 972;filter:drop-shadow(0 0 6px rgba(79,209,255,.9))}
@media (prefers-reduced-motion:no-preference){.schleife__puls{animation:umlauf 7s linear infinite}}
@keyframes umlauf{to{stroke-dashoffset:-1000}}
.schleife__pfeil{fill:none;stroke:#8FD8FF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.schleife__station{fill:url(#schleife-glas);stroke:rgba(191,228,255,.8);stroke-width:1.6}
.schleife__station--ziel{fill:url(#schleife-ziel);stroke:#C8F1FF;filter:drop-shadow(0 0 10px rgba(79,209,255,.65))}
.schleife__glanz{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.schleife__nr{fill:#fff;font:800 15px var(--font-sans);text-anchor:middle;dominant-baseline:central}
.schleife__text{fill:#E3EEFC;font:700 15px var(--font-sans);text-anchor:middle}
.schleife__klein{fill:#A9BAD0;font:600 12.5px var(--font-sans);text-anchor:middle}
.schleife__l{text-anchor:end}
.schleife__r{text-anchor:start}
.schleife__mitte{fill:#fff;font:800 22px var(--font-sans);text-anchor:middle}
.schleife__mitte-klein{fill:#BFE4FF;font:700 13px var(--font-sans);text-anchor:middle}
.schleife__legende{display:none;gap:var(--space-2);list-style:none;margin:var(--space-4) 0 0;padding:0}
.schleife__legende li{display:flex;align-items:center;gap:.6rem;margin:0;padding:.5rem .8rem .5rem .5rem;border-radius:14px;color:#fff;font-size:var(--fs-sm);font-weight:700;line-height:1.3;background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.schleife__legende b{flex:none;display:grid;place-items:center;width:1.6rem;height:1.8rem;font-size:.8rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#4FB8F0,#3878D0 45%,#6458E8)}
.schleife__legende small{margin-left:auto;color:var(--band-muted);font-size:var(--fs-xs);font-weight:600;text-align:right}
@media (max-width:599px){.schleife{overflow:clip}.schleife svg{width:140%;margin:-11% -20%}.schleife__text,.schleife__klein{display:none}.schleife__nr{font-size:22px}.schleife__mitte{font-size:30px}.schleife__mitte-klein{font-size:17px}.schleife__legende{display:grid}}
.lernen-fakten{display:grid;gap:var(--space-3);list-style:none;margin:var(--space-6) 0 0;padding:0}
.lernen-fakten li{display:flex;gap:var(--space-3);align-items:flex-start;margin:0;padding:var(--space-4);border-radius:16px;color:var(--band-text-2);background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lernen-fakten .i{color:#8FD8FF;margin-top:.15rem}
.lernen-fakten b{color:#fff}

/* ---------- Tresor: Sicherheit ---------- */
.tresor{display:grid;gap:clamp(2rem,1rem + 3vw,4rem);align-items:center}
@media (min-width:960px){.tresor{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.tresor .raum{max-width:520px}
.fakten{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));list-style:none;margin:var(--space-6) 0 var(--space-6);padding:0}
.fakten li{display:flex;gap:var(--space-3);align-items:flex-start;margin:0;padding:var(--space-4);border-radius:16px;font-size:var(--fs-sm);color:var(--band-text-2);background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fakten .i{flex:none;width:22px;height:22px;color:#8FD8FF}
.fakten b{display:block;color:#fff;font-size:var(--fs-md)}

/* ---------- Preise kurz: Glaskarten ---------- */
.preise-kurz li{border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--c-surface) 96%,transparent),color-mix(in srgb,var(--c-surface) 78%,transparent));box-shadow:inset 0 1px 0 var(--lichtkante),var(--shadow-2)}
.preise-kurz li.empfohlen{border:0;box-shadow:inset 0 1px 0 var(--lichtkante),var(--shadow-3),0 0 0 2px #5B6BE0}
.preise-kurz .zahl{background:linear-gradient(100deg,var(--c-text),var(--c-link));-webkit-background-clip:text;background-clip:text;color:transparent}
.preiskarte--empfohlen{border:0;box-shadow:inset 0 1px 0 var(--lichtkante),var(--shadow-3),0 0 0 2px #5B6BE0}

/* ---------- Seitenköpfe der Produktseiten: dunkel mit Licht und 3D ---------- */
.seitenkopf--raum{border-bottom:0}
.seitenkopf--raum .seitenkopf__raster{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:center}
@media (min-width:960px){.seitenkopf--raum .seitenkopf__raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.seitenkopf--raum h1{color:#fff}
.seitenkopf--raum .einleitung{color:var(--band-text-2)}
.seitenkopf--raum .pfad a{color:var(--band-text-2)}
.seitenkopf--raum .pfad li{color:var(--band-muted)}
.seitenkopf--raum .stand{color:var(--band-muted)}
.seitenkopf--raum .raum{max-width:440px}
@media (max-width:959px){.seitenkopf--raum .raum{max-width:300px}}

/* ---------- Stationen des Begleiters auf den Produktseiten: neben Überschrift und Einleitung ---------- */
.station .raum{max-width:420px}
.station--gruppe{display:grid;gap:var(--space-4) var(--space-6);align-items:center;margin-bottom:var(--space-5)}
.station--gruppe .gruppe__kopf{margin-bottom:var(--space-3)}
.station--gruppe .einleitung{margin-bottom:0}
.station--gruppe .raum{max-width:280px}
@media (min-width:700px){.station--gruppe{grid-template-columns:minmax(0,1fr) minmax(0,280px)}}
@media (max-width:899px){.station .raum{max-width:320px}}

/* ---------- Einblenden: mit leichter Neigung aus der Tiefe (Warp beim Scrollen) ---------- */
@keyframes einblenden{from{opacity:0;translate:0 38px;scale:.955;rotate:1 0 0 14deg}to{opacity:1;translate:none;scale:none;rotate:none}}
@media (prefers-reduced-motion:no-preference){.js:not(.sd) .einblenden-wartet{rotate:1 0 0 12deg}.js:not(.sd) .einblenden-da{rotate:none;transition:opacity .7s var(--ease),translate .8s var(--ease),scale .8s var(--ease),rotate .9s var(--ease)}}

@media print{.raum,.begleiter,.begleiter__ziel,.hero__boden,.band::after,body::before{display:none!important}}