/* ===========================================================================
   MBK FLOW 2035 — Designsystem für rueckstausicher.com
   ---------------------------------------------------------------------------
   Farbentscheidung, bewusst abweichend vom Masterprompt:
   Der Prompt nennt „MBK-Blau". Das gibt es nicht. Die Marke MBK-Scharf ist
   Schwarz / Rot #f1080d / Grau / Weiß. Statt eine Markenfarbe zu erfinden,
   trägt die Tiefe die Navy-Welt (Umgebung, Material, Wasser), das MBK-Rot
   bleibt die Signalfarbe für Marke, Handlung und Schaden, und Cyan ist
   ausschließlich die MESSEBENE: Scan, Sensorik, Diagnose. Damit ist Cyan
   semantisch belegt statt dekorativ — und die Seite bleibt MBK-Scharf.
   =========================================================================== */
:root {
  /* Tiefe: neutrales Schwarz in Abstufungen — kein Farbstich, die Marke kennt nur Schwarz/Grau/Weiß/Rot */
  --t0: #070707;
  --t1: #0c0c0c;
  --t2: #131313;
  --t3: #1e1e1e;

  /* Material */
  --stahl: #8a8a8a;
  --stahl-hell: #bdbdbd;

  /* Technische Ebene: Beschriftung, Kanten, Zustaende.
     Bewusst neutral - die einzige Akzentfarbe der Marke ist Rot. */
  --scan: #c9c9c9;
  --scan-weich: rgba(255, 255, 255, .085);
  --scan-kante: rgba(255, 255, 255, .28);

  /* Marke */
  --rot-glut: #f1080d;

  --text-2035: #ededed;
  --text-leise: #a0a0a0;

  /* Glas */
  --glas: rgba(23, 23, 23, .58);
  --glas-kante: rgba(175, 175, 175, .22);
  --glas-licht: rgba(255, 255, 255, .07);

  --spur: .14em;
  --rhythmus: clamp(4rem, 9vw, 9rem);
  --panel-radius: 2px;
}

/* --- Typografie: groß, präzise, viel Raum -------------------------------- */
.e-eyebrow {
  font-size: clamp(.68rem, 1.1vw, .78rem); font-weight: 700; letter-spacing: var(--spur);
  text-transform: uppercase; color: var(--scan); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem; justify-content: flex-end;
}
.e-eyebrow::after { content: ""; width: 1.8rem; height: 1px; background: var(--scan-kante); flex: none; order: 2; }
.e-eyebrow--rot { color: var(--rot-glut); }
.e-eyebrow--rot::after { background: rgba(241, 8, 13, .55); }

.e-titel {
  font-size: clamp(2.3rem, 7vw, 5.4rem); line-height: .97; letter-spacing: -.035em;
  font-weight: 700; margin: 0 0 1.2rem; color: #fff; text-wrap: balance; text-align: right;
}
.e-titel em { font-style: normal; color: var(--rot); }
.e-titel--rot em { color: var(--rot); }
.e-titel--klein { font-size: clamp(1.8rem, 4.2vw, 3.1rem); }

.e-lead { font-size: clamp(1.02rem, 1.4vw, 1.26rem); line-height: 1.6; color: var(--text-leise); max-width: 46ch; margin: 0 0 1.8rem; }
.e-lead strong { color: var(--text-2035); font-weight: 600; }

.e-label { font-size: .68rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--scan); font-variant-numeric: tabular-nums; }

/* --- Glasflächen: Tiefe statt Schlagschatten ----------------------------- */
.e-glas {
  position: relative; background: var(--glas); border: 1px solid var(--glas-kante);
  border-radius: var(--panel-radius); backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--glas-licht), 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.e-glas::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none; opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32) 20%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.32) 80%, transparent);
}
.e-glas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px); background-size: 3px 3px;
}
.e-glas > * { position: relative; z-index: 1; }

/* --- Buttons: magnetisch, aber zurückhaltend ---------------------------- */
.e-btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 54px;
  padding: .95rem 1.7rem; border: 1px solid transparent; border-radius: var(--panel-radius);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; text-align: center;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .25s, border-color .25s, color .25s;
}
.e-btn--primaer { background: var(--rot-aktion); color: #fff; border-color: var(--rot-aktion); }   /* Action-Rot, siehe site.css */
.e-btn--primaer:hover, .e-btn--primaer:focus-visible, .e-btn--primaer:active { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }
.e-btn--geist { background: rgba(255,255,255,.04); color: var(--text-2035); border-color: var(--glas-kante); }
.e-btn--geist:hover, .e-btn--geist:focus-visible { border-color: var(--scan-kante); color: #fff; background: var(--scan-weich); }
.e-btn:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.e-btn--primaer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
}
.e-btn--primaer:hover::after { transform: translateX(110%); transition: transform .8s ease; }

/* --- Sektionsgerüst ------------------------------------------------------ */
.e-welt { background: var(--t0); color: var(--text-2035); }
.e-kapitel { position: relative; min-height: 100svh; display: flex; align-items: center; padding: var(--rhythmus) 0; }
.e-kapitel__inhalt { width: min(100% - 2.5rem, 1240px); margin-inline: auto; position: relative; z-index: 2; }
.e-spalten { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .e-spalten--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.e-panel { --kipp: 0deg; padding: clamp(1.4rem, 2.4vw, 2.2rem); transform: perspective(1400px) rotateY(var(--kipp)); transition: transform .9s cubic-bezier(.22,1,.36,1); }

/* --- Marker an der Geometrie -------------------------------------------- */
/* Der Punkt sitzt genau auf der Weltkoordinate (left/top in px aus der Bühne);
   die Beschriftung läuft nach rechts bzw. mit data-seite="links" nach links. */
.e-marker {
  position: absolute; left: 0; top: 0; transform: translate(-6.5px, -50%); z-index: 3; display: flex; align-items: center; gap: .6rem;
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.e-marker[data-seite="links"] { flex-direction: row-reverse; transform: translate(calc(-100% + 6.5px), -50%); }
.e-marker[data-seite="links"] .e-marker__linie { transform: scaleX(-1); }
.e-marker[data-sichtbar] { opacity: 1; }
.e-marker__punkt { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--scan-hell, #e9e9e9); position: relative; flex: none; }
.e-marker__punkt::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.e-marker--schaden .e-marker__punkt { border-color: var(--rot); }
.e-marker--schaden .e-marker__punkt::after { background: var(--rot); }
.e-marker__linie { width: clamp(26px, 4vw, 52px); height: 1px; background: linear-gradient(90deg, var(--scan-kante), transparent); flex: none; }
.e-marker__text { background: rgba(11, 11, 11,.82); border: 1px solid var(--glas-kante); padding: .3rem .6rem; white-space: normal; max-width: 22rem; line-height: 1.35; font-size: .66rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; }
/* Kompaktform: gleicher Wortlaut, schmaler umbrochen, kurze Leitlinie. experience2035.js
   setzt data-form="kompakt" nur, wenn die Langform auf keiner Seite frei steht
   (Kapitelnavigation, Text, RSE-Führungslinie, 0,56·W) – typisch 1180–1300 px. */
@media (min-width: 1180px) {
  .e-marker[data-form="kompakt"] .e-marker__text { max-width: 14rem; }
  .e-marker[data-form="kompakt"] .e-marker__linie { width: 16px; }
}

/* --- System-Navigator ---------------------------------------------------- */
.e-nav-system { position: fixed; left: clamp(.9rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); z-index: 40; display: none; }
@media (min-width: 1180px) { .e-nav-system { display: block; } }
.e-nav-system ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.e-nav-system a { display: grid; grid-template-columns: 2.2rem auto; align-items: center; gap: .55rem; padding: .5rem 0; text-decoration: none; color: var(--text-leise); font-size: .66rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; opacity: .45; transition: opacity .3s, color .3s; }
.e-nav-system a::before { content: ""; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.45); transition: transform .4s ease; }
.e-nav-system a:hover, .e-nav-system a:focus-visible { opacity: .9; }
.e-nav-system [aria-current="true"] { opacity: 1; color: #fff; }
.e-nav-system [aria-current="true"]::before { transform: scaleX(1); }

/* --- Reduzierte Bewegung ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .e-btn, .e-panel, .e-marker, .e-nav-system a, .e-nav-system a::before { transition: none !important; }
  .e-btn--primaer::after { display: none; }
  .e-panel { transform: none !important; }
}

/* --- Markenfassung im Kopf ------------------------------------------------
   Der Kopf ist auf allen 32 Seiten derselbe und traegt zwei Logodateien: die
   normale fuer hellen Grund, die invertierte fuer die dunkle Erlebnisseite.
   Die Regel MUSS hier stehen, in dem Stylesheet, das jede Seite laedt. Stand
   sie nur in huelle2035.css (laedt allein die Startseite), zeigten alle anderen
   31 Seiten beide Logos uebereinander. */
.kopf__logo-dunkel { display: none; }
.e-welt .kopf__logo-hell { display: none; }
.e-welt .kopf__logo-dunkel { display: block; }