/* ===========================================================================
   MBK FLOW 2035 — die Hülle.
   ---------------------------------------------------------------------------
   Kopf, Formulare, FAQ, Sticky-Leiste und Fußbereich stammen aus der
   bestehenden hellen Website. Hier werden sie in dieselbe dunkle Welt geholt,
   OHNE ihr Markup zu ändern: Feldnamen, Reihenfolge, Validierung und
   Barrierefreiheit bleiben, wie sie sind.

   Alles greift ausschließlich innerhalb von .e-welt — die übrigen Seiten
   bleiben unberührt.
   =========================================================================== */

/* --- Kopf: liegt über der Welt, nicht davor ---------------------------- */
.e-welt .kopf {
  background: rgba(7, 7, 7, .55);
  border-bottom: 1px solid rgba(175, 175, 175, .14);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  color: var(--text-2035);
}
.e-welt .kopf__zeile { min-height: 60px; }
.e-welt .kopf__partner { color: var(--text-leise); border-left-color: var(--rot); }
/* Links der Navigation – nicht der Button „Rückstau-Check“: dessen Schrift bleibt Weiß (sonst #ededed auf Rot = 3,9 : 1;
   Befund Kontrasttest 05.10.2026) */
.e-welt .nav a:where(:not(.btn)),
.e-welt .nav__gruppe > details > summary { color: var(--text-2035); border-bottom-color: rgba(175, 175, 175, .12); }
/* Erste Ebene leicht zurueckgenommen, Hover/offen weiss mit Linie (site.css); Rot bleibt Signal */
.e-welt .nav > ul > li > a:not(.btn), .e-welt .nav__gruppe > details > summary { color: #cfcfcf; }
.e-welt .nav a:not(.btn):hover, .e-welt .nav a:not(.btn):focus-visible,
.e-welt .nav__gruppe > details > summary:hover, .e-welt .nav__gruppe > details[open] > summary { color: #fff; }
.e-welt .nav__unter a { color: #d6d6d6; }
.e-welt .nav__unter { border-left-color: rgba(175, 175, 175, .22); }
.e-welt .kopf__tel { color: var(--text-2035); border-color: var(--glas-kante); }
.e-welt .kopf__menue-icon,
.e-welt .kopf__menue-icon::before,
.e-welt .kopf__menue-icon::after { background: var(--text-2035); }
/* Aufgeklapptes Menü: deckender Grund, sonst liest man die Röhre mit. Kopf hier 61 px hoch. */
.e-welt .nav { background: #080808; border-bottom-color: rgba(175, 175, 175, .14); box-shadow: 0 24px 40px rgba(0, 0, 0, .6); max-height: calc(100vh - 61px); max-height: calc(100dvh - 61px); }
@media (min-width: 1024px) {
  .e-welt .nav { background: transparent; box-shadow: none; max-height: none; }
  .e-welt .nav__gruppe > details[open] > ul.nav__unter { background: rgba(13, 13, 13, .97); border-color: var(--glas-kante); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -30px rgba(0, 0, 0, .9); }
  .e-welt .nav__unter a:hover, .e-welt .nav__unter a:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }
}

/* --- Bühne blendet weich aus, statt zu springen ------------------------- */
.e-buehne { transition: opacity .35s linear; }

/* --- Erster Bildschirm: der Kopf darf die Überschrift nicht anschneiden - */
.e-hero { padding-top: clamp(5.5rem, 11vh, 9rem); }

/* --- Rückstau-Check: ruhige, dunkle Fläche ----------------------------- */
.e-welt .abschnitt--check {
  background: linear-gradient(180deg, var(--t0), var(--t1) 12%, var(--t1) 88%, var(--t0));
  color: var(--text-2035); position: relative; z-index: 2;
}
.e-welt .abschnitt--check h2,
.e-welt .abschnitt--check h3 { color: #fff; }
.e-welt .check-intro, .e-welt .check-alternativ,
.e-welt .feld__hinweis, .e-welt .check-wichtig { color: var(--text-leise); }
.e-welt .eyebrow, .e-welt .eyebrow--hell { color: var(--rot-glut); }

/* Formularkörper */
.e-welt .formular {
  background: rgba(16, 16, 16, .78); border: 1px solid var(--glas-kante); border-radius: var(--panel-radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text-2035);
}
.e-welt .formular label, .e-welt .feld__label, .e-welt .feld__frage { color: var(--text-2035); }
.e-welt .formular input[type="text"], .e-welt .formular input[type="tel"], .e-welt .formular input[type="email"],
.e-welt .formular input[type="number"], .e-welt .formular textarea, .e-welt .formular select {
  background: rgba(6, 6, 6, .8); border: 1px solid var(--feld-kante); border-radius: 2px; color: var(--text-2035);
}
@media (hover: hover) {
  .e-welt .formular input[type="text"]:hover, .e-welt .formular input[type="tel"]:hover, .e-welt .formular input[type="email"]:hover,
  .e-welt .formular textarea:hover, .e-welt .formular select:hover { border-color: var(--feld-kante-hover); }
}
.e-welt .formular input::placeholder, .e-welt .formular textarea::placeholder { color: #6e6e6e; }
.e-welt .formular input:focus-visible, .e-welt .formular textarea:focus-visible, .e-welt .formular select:focus-visible,
.e-welt .formular input:focus, .e-welt .formular textarea:focus, .e-welt .formular select:focus {
  outline: 2px solid var(--rot); outline-offset: 2px; border-color: #fff;
}
.e-welt .feld__fehler { color: var(--rot-glut); }

/* Auswahlchips: der wichtigste Bedienweg des Checks. Eine Kante (bisher Etikett UND Pille, also
   doppelt), technische Ecken, Auswahl = Umkehrung Weiss/Schwarz statt Rotflaeche, Fokusring nur bei
   Tastatur. Gilt fuer beide Formulare der Startseite (Check und Beratung). */
.e-welt { --feld-kante: #6b6b6b; --feld-kante-hover: #9a9a9a; }
.e-welt .formular .chip { background: none; border: 0; color: var(--text-2035); }
.e-welt .formular .chip span, .e-welt .formular .chips--gross .chip span {
  display: inline-flex; align-items: center; min-height: 46px; padding: .65rem 1rem; border: 1px solid var(--feld-kante); border-radius: 2px;
  background: rgba(255, 255, 255, .03); color: var(--text-2035); font-size: .95rem; font-weight: 600; line-height: 1.25;
  transition: background-color .15s, border-color .15s, color .15s;
}
.e-welt .formular .chips--gross .chip span { min-height: 52px; padding: .8rem 1.1rem; font-size: 1rem; }
@media (hover: hover) { .e-welt .formular .chip:hover span { border-color: var(--feld-kante-hover); } }
.e-welt .formular .chip input:checked + span { background: #f2f2f2; border-color: #f2f2f2; color: #0a0a0a; }
.e-welt .formular .chip--neutral input:checked + span { background: #bdbdbd; border-color: #bdbdbd; color: #0a0a0a; }
.e-welt .formular .chip input:focus-visible + span { outline: 2px solid var(--rot-glut); outline-offset: 3px; }
/* Mobil: grosse Auswahlfelder als ruhiges Raster gleicher Kacheln (eine Spalte unter ~360 px) */
@media (max-width: 599px) {
  .e-welt .formular .chips--gross { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
  .e-welt .formular .chips--gross .chip { display: block; min-width: 0; }
  .e-welt .formular .chips--gross .chip span { display: flex; width: 100%; height: 100%; padding: .7rem .8rem; font-size: .95rem; text-wrap: balance; }
}

/* Fortschritt: Grundlinie mit Knoten, Nummer ueber dem Wort. Aktiv = roter Knoten und rote Nummer,
   erledigt = heller Knoten und helle Teilstrecke, offen = Hohlknoten grau. Bisher lagen alle fuenf
   Schritte als rote Flaechen mit grauer Schrift darauf (aktiver Schritt nicht erkennbar). */
.e-welt .check__fortschritt { position: relative; gap: 0; margin: 0 0 2rem; background: none; }
.e-welt .check__fortschritt::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(255, 255, 255, .16); }
.e-welt .check__fortschritt > li {
  position: relative; background: none; border: 0; padding: 1.05rem .4rem 0 0; text-align: left;
  color: #8f8f8f; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
  overflow-wrap: normal; hyphens: none; transition: color .3s;
}
.e-welt .check__fortschritt > li::before { content: counter(f, decimal-leading-zero); display: block; margin-bottom: .2rem; font-size: .74rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.e-welt .check__fortschritt > li::after { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; box-sizing: border-box; background: var(--t1); border: 1px solid var(--feld-kante); transition: background-color .3s, border-color .3s; }
.e-welt .check__fortschritt > li.ist-fertig { color: #d4d4d4; background: linear-gradient(#d4d4d4, #d4d4d4) no-repeat 0 4px / 100% 1px; }
.e-welt .check__fortschritt > li.ist-fertig::after { background: #d4d4d4; border-color: #d4d4d4; }
.e-welt .check__fortschritt > li.ist-aktiv, .e-welt .check__fortschritt > li[aria-current="step"] { color: #fff; }
.e-welt .check__fortschritt > li.ist-aktiv::before, .e-welt .check__fortschritt > li[aria-current="step"]::before { color: var(--rot-glut); }
.e-welt .check__fortschritt > li.ist-aktiv::after, .e-welt .check__fortschritt > li[aria-current="step"]::after { background: var(--rot-glut); border-color: var(--rot-glut); box-shadow: 0 0 0 3px rgba(241, 8, 13, .22); }
@media (max-width: 479px) {
  .e-welt .check__fortschritt > li { font-size: .58rem; letter-spacing: .06em; padding-right: .2rem; }
  .e-welt .check__fortschritt > li::before { font-size: .7rem; }
}
/* Sehr schmal: offene und erledigte Schritte nur als Nummer, der aktive mit Namen */
@media (max-width: 379px) {
  .e-welt .check__fortschritt > li:not(.ist-aktiv):not([aria-current="step"]) { font-size: 0; letter-spacing: 0; }
  .e-welt .check__fortschritt > li::before { font-size: .7rem; }
}
/* Schrittfrage = Ueberschrift: hell und gross, Nummer rot; Unterfragen ohne Browserrahmen */
.e-welt .check__legende { color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.65rem); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 1.25rem; }
.e-welt .check__nr { display: inline-block; min-width: 2ch; margin-right: .5rem; font-variant-numeric: tabular-nums; color: var(--rot-glut); }
.e-welt .check__legende .grau { color: var(--text-leise); font-size: .7em; font-weight: 400; letter-spacing: 0; }
.e-welt .check fieldset.feld--frage { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.e-welt .check .feld__frage, .e-welt .check .feld:not(.feld--check) > label, .e-welt .check .feld__label { padding: 0; margin: 0 0 .6rem; font-size: .92rem; font-weight: 700; }
.e-welt .check .feld { margin-bottom: 1.4rem; }
.e-welt .check .chips + .feld__hinweis { margin: .7rem 0 0; }
.e-welt .check :is(input, select, textarea) ~ .feld__hinweis { margin: .5rem 0 0; }   /* Hinweis unter einem Feld lag mit -.4rem auf dessen Kante */
.e-welt .check .pflicht { color: var(--rot-glut); }
.e-welt .formular .feld--check input { accent-color: var(--rot-glut); }
.e-welt .formular .upload input[type=file] { border: 1px dashed var(--feld-kante); border-radius: 2px; background: rgba(255, 255, 255, .02); color: #d0d0d0; }
.e-welt .formular .upload-liste li { background: rgba(255, 255, 255, .04); border-left-color: #d4d4d4; }
.e-welt .check__nav { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.e-welt .formular .btn { border-radius: 2px; }
.e-welt .formular.check { padding: clamp(1.25rem, 2.6vw, 2.25rem); }
@media (prefers-reduced-motion: reduce) {
  .e-welt .check__fortschritt > li, .e-welt .check__fortschritt > li::after, .e-welt .formular .chip span { transition: none; }
}
.e-welt .check__schritt[hidden] { display: none !important; }

/* Knöpfe des Bestands an das neue System angleichen */
.e-welt .btn--primaer { background: var(--rot-aktion); border-color: var(--rot-aktion); color: #fff; }
/* Hover/Fokus dunkler statt heller: Weiß auf --rot-glut hätte nur 4,39 : 1 (Action-Rot, site.css) */
.e-welt .btn--primaer:hover, .e-welt .btn--primaer:focus-visible, .e-welt .btn--primaer:active { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }
/* Sticky-Leiste: kleine Schrift (.92rem). Weiß auf Markenrot ergibt 4,39 : 1 und
   verfehlt 4,5 : 1 (test/sticky.browser.test.mjs) — wie im Bestand (site.css)
   bleibt hier der dunkle Rotton des Bestands. */
.e-welt .leiste__cta, .e-welt .leiste__cta:hover, .e-welt .leiste__cta:focus-visible, .e-welt .leiste__cta:active { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.e-welt .btn--sekundaer {
  background: rgba(255, 255, 255, .04); border-color: var(--glas-kante); color: var(--text-2035);
}
.e-welt .btn--sekundaer:hover, .e-welt .btn--sekundaer:focus-visible { border-color: var(--scan-kante); color: #fff; }
/* Einwilligungsfeld: bleibt die weiße Box aller Seiten. Ohne eigene Schriftfarbe erbte
   sie die helle Schrift der dunklen Welt (gemessen 1,17 : 1, Titel, Text, Link und
   „Nur notwendige“ praktisch unsichtbar). test/speicher.test.mjs prüft ≥ 4,5 : 1. */
.e-welt .consent__box { color: var(--text); }
.e-welt .consent__box .btn--sekundaer { background: transparent; border-color: var(--text); color: var(--text); }
.e-welt .consent__box .btn--sekundaer:hover, .e-welt .consent__box .btn--sekundaer:focus-visible { background: var(--text); border-color: var(--text); color: #fff; }

/* Upload */
.e-welt .upload { border-color: var(--glas-kante); background: rgba(255, 255, 255, .02); }

/* --- FAQ ---------------------------------------------------------------- */
.e-welt .faq__eintrag { border-bottom: 1px solid var(--glas-kante); }
.e-welt .faq__eintrag summary { color: var(--text-2035); }
.e-welt .faq__eintrag summary:hover { color: var(--rot); }
.e-welt .faq__antwort { color: var(--text-leise); }
.e-welt .faq__antwort a, .e-welt .e-lead a, .e-welt .e-verfahren__text a { color: #fff; text-decoration-color: var(--rot); text-underline-offset: 3px; }

/* --- Karriere und Fußbereich ------------------------------------------- */
.e-welt .abschnitt--karriere { background: var(--t1); color: var(--text-2035); position: relative; z-index: 2; }
.e-welt .abschnitt--karriere h2, .e-welt .abschnitt--karriere h3 { color: #fff; }
.e-welt .fuss { background: var(--t0); border-top: 1px solid var(--glas-kante); color: var(--text-leise); position: relative; z-index: 2; }
.e-welt .fuss a { color: var(--text-2035); }
.e-welt .fuss a:hover, .e-welt .fuss a:focus-visible { color: var(--rot); }

/* --- Mobile Sticky-Leiste ----------------------------------------------- */
.e-welt .leiste { background: rgba(10, 10, 10, .96); border-top-color: var(--glas-kante); }
.e-welt .leiste__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }   /* vorher #111 auf dunkler Leiste: unsichtbar */
.e-welt .leiste__tel { color: var(--text-2035); border-color: var(--glas-kante); }

/* --- Zeigerzustand über technischen Punkten ---------------------------- */
body[data-zeiger="scan"] { cursor: crosshair; }

/* --- Kontrast: Text über der Bühne braucht immer einen Grund ----------- */
@media (max-width: 760px) {
  .e-welt .e-kapitel__inhalt > :not(.e-glas) { position: relative; }
}