/* Visvero Website v3 – "Du machst den Job. KI den Rest."
   Farben und Schriften aus dem Brand-Kit (visvero-brand-kit/marke/tokens.json).
   Schriften selbst gehostet, keine Verbindung zu Google. */

@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/InterTight.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --grund: #0A0B10;
  --grund-2: #10121A;
  --hellblau: #3FA9F0;
  --violett: #8A5CF6;
  --indigo: #4F46E5;
  --weiss: #FFFFFF;
  --nebentext: #A1A7B3;
  --tinte: #12151A;
  --linie: rgba(255, 255, 255, 0.10);
  --verlauf: linear-gradient(90deg, #3FA9F0 0%, #8A5CF6 60%, #4F46E5 100%);
  --verlauf-diagonal: linear-gradient(135deg, #3FA9F0 0%, #8A5CF6 60%, #4F46E5 100%);
  --schrift-headline: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius: 28px;
  --radius-klein: 18px;
  --breite: 1180px;
  --rand: clamp(16px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--schrift-headline); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin: 0 0 0.5em; }
:focus-visible { outline: 3px solid var(--hellblau); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--weiss); color: var(--tinte); padding: 10px 16px; border-radius: 10px; }
.springen:focus { left: 8px; }

/* Hintergrund-Leuchten: Hellblau führt, Violett nur als Zweitfarbe */
.leuchten {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 8% -5%, rgba(63, 169, 240, 0.22), rgba(63, 169, 240, 0) 70%),
    radial-gradient(ellipse 50% 40% at 100% 30%, rgba(138, 92, 246, 0.13), rgba(138, 92, 246, 0) 70%),
    var(--grund);
}

/* ---------- Lichtwesen (js/lichtwesen/) ---------- */
/* Liegt über dem statischen Leuchten; ohne WebGL bleibt nur das Leuchten als Hintergrund. */
.lichtwesen { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; transition: opacity .5s ease; }
.ohne-webgl .lichtwesen { display: none; }

/* Glas-Chips auf der Startseite: Aufgaben, die "die KI gerade erledigt" */
.chips { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.chip {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; white-space: nowrap;
  width: 290px; overflow: hidden; /* feste Breite: Aufgaben wechseln, ohne neu zu messen */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(63, 169, 240, 0.15), 0 16px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 15px; line-height: 1.2; color: #E6E9EE; opacity: 0; transform: translate(-50%, -50%) scale(.9);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .9, .2, 1);
}
.chip.da { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.chip i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--verlauf-diagonal); box-shadow: 0 0 22px rgba(63, 169, 240, 0.5); }
.chip i svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip b { display: block; font: 700 15px/1.2 var(--schrift-headline); }
.chip small { display: block; font-size: 12.5px; color: var(--nebentext); margin-top: 2px; }
.chip .haken { margin-left: 6px; color: #5EE0A0; font-weight: 700; opacity: 0; transition: opacity .4s ease .5s; }
.chip.fertig .haken { opacity: 1; }
@media (max-width: 760px) { .chip { font-size: 13px; padding: 9px 14px 9px 9px; width: 240px; } .chip i { width: 28px; height: 28px; } .chip small { display: none; } }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 16, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.kopf-logo { display: flex; align-items: center; flex: none; }
.kopf-logo img { height: 40px; width: auto; }
.menue { display: flex; align-items: center; gap: 6px; }
.menue a {
  text-decoration: none; font-weight: 500; font-size: 16px; color: #D6DAE1;
  padding: 10px 14px; border-radius: 999px; transition: color .2s, background .2s;
}
.menue a:hover, .menue a[aria-current="page"] { color: var(--weiss); background: rgba(255, 255, 255, 0.07); }
.menue a.knopf { color: var(--weiss); margin-left: 8px; padding: 10px 20px; }
.menue-knopf {
  display: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--linie);
  background: rgba(255, 255, 255, 0.05); color: var(--weiss); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background .25s;
}
.menue-knopf span::before, .menue-knopf span::after { content: ""; position: absolute; left: 0; }
.menue-knopf span::before { top: -7px; }
.menue-knopf span::after { top: 7px; }
.menue-knopf[aria-expanded="true"] span { background: transparent; }
.menue-knopf[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .menue-knopf { display: inline-flex; }
  .menue {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--rand) 24px;
    background: rgba(10, 11, 16, 0.97);
    border-bottom: 1px solid var(--linie);
    display: none;
  }
  .menue.offen { display: flex; }
  .menue a { font-size: 20px; padding: 14px 16px; border-radius: 14px; }
  .menue a.knopf { margin: 8px 0 0; text-align: center; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--schrift-headline); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  text-decoration: none; color: var(--weiss); cursor: pointer;
  padding: 16px 28px; border-radius: 999px; border: 0;
  background: var(--verlauf-diagonal);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 10px 40px rgba(63, 169, 240, 0.28);
  transition: transform .2s, box-shadow .2s;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 14px 50px rgba(63, 169, 240, 0.4); }
.knopf.zweit { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px var(--linie) inset; }
.knopf.zweit:hover { background: rgba(255, 255, 255, 0.1); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Text-Bausteine ---------- */
.kicker {
  display: inline-block; font-family: var(--schrift-headline); font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hellblau);
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(63, 169, 240, 0.45); background: rgba(63, 169, 240, 0.10);
  margin-bottom: 22px;
}
.verlauf-text { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.riesig { font-size: clamp(52px, 11vw, 148px); letter-spacing: -0.05em; line-height: 0.98; }
.gross { font-size: clamp(36px, 6vw, 72px); }
.mittel { font-size: clamp(26px, 3.4vw, 40px); }
.einleitung { font-size: clamp(19px, 2vw, 23px); color: #C9CED7; max-width: 720px; }
.leise { color: var(--nebentext); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(72px, 10vw, 130px) 0; }
.abschnitt.eng { padding: clamp(48px, 6vw, 80px) 0; }
.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.held { padding: clamp(72px, 12vw, 160px) 0 clamp(56px, 8vw, 110px); }
.held .einleitung { margin: 28px 0 40px; }

/* Zwei Spalten am Desktop: Text links, Lichtwesen rechts daneben, kein Text über dem Wesen.
   Der rechte Innenabstand hält den Text links vom Wesen (Ort und Größe aus steuerung.js, Größe folgt der
   Fensterhöhe). Breite Abschnitte (.breit) nutzen die volle Breite, das Wesen sitzt dort klein oben rechts. */
@media (min-width: 901px) {
  main > section:not(.breit) > .huelle { padding-right: max(var(--rand), calc(min(100vw, var(--breite)) / 2 - 28vw + 28.5vh + 24px)); }
  main > section.held > .huelle { padding-right: max(var(--rand), calc(min(100vw, var(--breite)) / 2 - 22vw + 33vh + 24px)); }
  .held .riesig { font-size: clamp(52px, 7.6vw, 120px); }
  .huelle.rechtstext { max-width: var(--breite); } /* Textspalte links statt schmaler Mitte */
}
/* Handy: Wesen oben, Text darunter (steuerung.js dimmt das Wesen, sobald Text oben drüber liegt) */
@media (max-width: 900px) {
  .held { padding-top: max(72px, calc(36vh - 72px)); }
}

/* Headline fährt zeilenweise hoch, der Verlauf schimmert (wie Probe) */
h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
h1 .zeile > span { display: inline-block; transform: translateY(110%); animation: hoch 1.1s cubic-bezier(.2, .9, .2, 1) forwards; }
h1 .zeile:nth-child(2) > span { animation-delay: .12s; }
h1 .zeile:nth-child(3) > span { animation-delay: .24s; }
h1 .zeile > .verlauf-text { background-size: 200% 100%; animation: hoch 1.1s cubic-bezier(.2, .9, .2, 1) .24s forwards, schimmer 6s ease-in-out 1.4s infinite; }
@keyframes hoch { to { transform: none; } }
@keyframes schimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ---------- Glas-Karten ---------- */
.glas {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(63, 169, 240, 0.10), 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.karte { padding: clamp(26px, 3vw, 40px); }
.karte h3 { font-size: clamp(24px, 2.4vw, 30px); }
.karte p:last-child { margin-bottom: 0; }
.raster { display: grid; gap: 20px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .raster.drei, .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .raster.zwei, .raster.drei, .raster.vier { grid-template-columns: minmax(0, 1fr); }
}

/* Zwei Wege auf der Startseite */
.weg {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 300px;
  padding: clamp(28px, 4vw, 48px); text-decoration: none; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.weg:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(63, 169, 240, 0.35), 0 30px 80px rgba(0, 0, 0, 0.45); }
.weg h2 { font-size: clamp(34px, 4.6vw, 56px); margin-bottom: 14px; }
.weg p { color: #C9CED7; font-size: 19px; max-width: 440px; }
.weg .pfeil { font-family: var(--schrift-headline); font-weight: 700; color: var(--hellblau); font-size: 19px; margin-top: 24px; }
.weg::after {
  content: ""; position: absolute; width: 320px; height: 320px; right: -110px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 169, 240, 0.28), rgba(63, 169, 240, 0) 70%); pointer-events: none;
}
.weg.violett::after { background: radial-gradient(circle, rgba(138, 92, 246, 0.28), rgba(138, 92, 246, 0) 70%); }

/* Nummern und Listen */
.nummer {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px;
  font-family: var(--schrift-headline); font-weight: 800; font-size: 22px; background: var(--verlauf-diagonal);
  box-shadow: 0 0 30px rgba(63, 169, 240, 0.3); margin-bottom: 20px;
}
.haken { list-style: none; padding: 0; margin: 0 0 1em; }
.haken li { position: relative; padding-left: 32px; margin-bottom: 10px; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 18px; height: 10px;
  border-left: 3px solid var(--hellblau); border-bottom: 3px solid var(--hellblau); transform: rotate(-45deg);
}
/* "Was du dir sparst": Kreuz statt Haken */
.haken.kreuz li::before { content: "\00D7"; top: -0.12em; width: auto; height: auto; border: 0; transform: none; font-size: 1.4em; line-height: 1; color: var(--nebentext); }

/* Säulen auf "Für Betriebe" */
.saeule { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.saeule + .saeule { margin-top: clamp(56px, 8vw, 100px); }
@media (max-width: 880px) { .saeule { grid-template-columns: minmax(0, 1fr); } }
.stufen { display: grid; gap: 16px; }
.stufe { padding: 26px 30px; }
.stufe h3 { font-size: 26px; margin-bottom: 8px; }
.stufe .stufe-nr { font-family: var(--schrift-headline); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--hellblau); margin-bottom: 8px; }

/* Feed-Vorschau */
.feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feed img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-klein); border: 1px solid var(--linie); }
@media (max-width: 680px) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .feed img { border-radius: 10px; } }

/* Beweis-Block */
.beweis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 880px) { .beweis { grid-template-columns: minmax(0, 1fr); } }

/* Person */
.person { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.person img { width: 100%; border-radius: var(--radius); border: 1px solid var(--linie); }
@media (max-width: 760px) { .person { grid-template-columns: minmax(0, 1fr); } .person img { max-width: 220px; } }

/* Abschluss-Band */
.band { text-align: center; padding: clamp(40px, 6vw, 80px) var(--rand); }
.band h2 { margin-bottom: 18px; }
.band .einleitung { margin: 0 auto 32px; }
.band .knopf-reihe { justify-content: center; }

/* Formular */
.formular { display: grid; gap: 16px; max-width: 560px; }
.feld label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.feld input[type="text"], .feld input[type="email"] {
  width: 100%; font: inherit; color: var(--weiss); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 14px 16px;
}
.feld input:focus { outline: none; border-color: var(--hellblau); box-shadow: 0 0 0 3px rgba(63, 169, 240, 0.25); }
.einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #C9CED7; }
.einwilligung input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--hellblau); }
.hinweis { font-size: 15px; color: var(--nebentext); }
.status-bald {
  display: inline-block; font-family: var(--schrift-headline); font-weight: 700; color: var(--hellblau);
  padding: 8px 14px; border-radius: 999px; background: rgba(63, 169, 240, 0.12); border: 1px solid rgba(63, 169, 240, 0.4);
}
.hinweis.status { color: var(--weiss); font-weight: 600; padding: 12px 16px; border-radius: 12px; background: rgba(63, 169, 240, 0.12); border: 1px solid rgba(63, 169, 240, 0.4); }
.hinweis.status.fehler { background: rgba(240, 90, 90, 0.12); border-color: rgba(240, 90, 90, 0.5); }
[hidden] { display: none !important; }

/* Rechtstexte */
.rechtstext { max-width: 820px; }
.rechtstext h1 { font-size: clamp(38px, 6vw, 64px); }
.rechtstext h2 { font-size: 26px; margin-top: 2em; }
.rechtstext h3 { font-size: 20px; margin-top: 1.5em; letter-spacing: -0.02em; }
.rechtstext p, .rechtstext li { color: #D6DAE1; }
.rechtstext a { color: var(--hellblau); }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); padding: 56px 0 40px; margin-top: 40px; }
.fuss-oben { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.fuss-claim { font-family: var(--schrift-headline); font-weight: 800; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.04em; margin: 18px 0 0; }
.fuss-logo img { height: 36px; width: auto; }
.fuss nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 40px; align-content: start; }
.fuss nav a { text-decoration: none; color: #C9CED7; }
.fuss nav a:hover { color: var(--weiss); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--nebentext); }
.fuss-unten a { color: var(--nebentext); }
.link-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--nebentext); text-decoration: underline; cursor: pointer; }

/* Einblenden beim Scrollen */
.js .einblenden { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .einblenden.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .einblenden { opacity: 1; transform: none; transition: none; }
  .knopf, .weg { transition: none; }
  h1 .zeile > span, h1 .zeile > .verlauf-text { animation: none; transform: none; }
  .chip, .lichtwesen { transition: none; }
}

.feld textarea {
  width: 100%; font: inherit; color: var(--weiss); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 14px 16px; resize: vertical;
}
.feld textarea:focus { outline: none; border-color: var(--hellblau); box-shadow: 0 0 0 3px rgba(63, 169, 240, 0.25); }
.weg h3 { font-size: clamp(24px, 2.6vw, 32px); overflow-wrap: anywhere; }

/* ---------- Bausteine (js/bausteine.js) ---------- */
/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--linie); border-radius: 20px; background: rgba(255, 255, 255, 0.04); padding: 0 24px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative; font-family: var(--schrift-headline); font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--hellblau); transition: transform .25s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--hellblau); outline-offset: 4px; border-radius: 8px; }
.faq details > p { margin: 0 0 22px; color: #C9CED7; }
.mehr { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 12px; }
.mehr > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--hellblau); padding: 6px 0; }
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after { content: " +"; }
.mehr[open] > summary::after { content: " –"; }
.mehr > summary:focus-visible { outline: 2px solid var(--hellblau); outline-offset: 4px; border-radius: 8px; }

/* Tabelle: unter 760 px wird jede Zeile zur Karte (Spaltenkopf per data-label) */
.tabelle { overflow-x: auto; }
.tabelle table { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-family: var(--schrift-headline); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--nebentext); }
.tabelle td.zeilenkopf { font-weight: 700; } /* erste Spalte: Zeilenbeschriftung */
@media (max-width: 760px) {
  .tabelle { overflow: visible; }
  .tabelle table, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle thead tr, .tabelle thead th { display: block; width: 1px; } /* Kopfzellen bleiben für Screenreader, ragen aber nicht über den Rand */
  .tabelle tr { margin-bottom: 14px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; background: rgba(255, 255, 255, 0.04); padding: 8px 18px; }
  .tabelle td { border-bottom: 1px solid var(--linie); padding: 12px 0; overflow-wrap: anywhere; }
  .tabelle td:last-child { border-bottom: 0; }
  .tabelle td.zeilenkopf { font-family: var(--schrift-headline); font-size: 20px; }
  .tabelle td.zeilenkopf::before { display: none; }
  .tabelle td::before { content: attr(data-label); display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nebentext); margin-bottom: 2px; }
}

/* Leuchtrand: .glas-Karten, Position aus --mx/--my (js/bausteine.js) */
.glas::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, -100px) var(--my, -100px), rgba(63, 169, 240, 0.9), rgba(138, 92, 246, 0.5) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (hover: hover) { .glas:hover::before { opacity: 1; } }
.glas.tipp::before { opacity: 1; }

/* Rückruf: fester Knopf unten rechts mit Panel */
.rueckruf-knopf, .rueckruf-panel { position: fixed; right: 16px; z-index: 60; }
.rueckruf-knopf {
  bottom: 16px; display: none; cursor: pointer; border: 0; color: var(--weiss); font: 700 16px/1 var(--schrift-headline);
  padding: 14px 22px; border-radius: 999px; background: var(--verlauf-diagonal); box-shadow: 0 10px 40px rgba(63, 169, 240, 0.35);
}
.js .rueckruf-knopf { display: block; }
.rueckruf-knopf:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; }
.rueckruf-panel { bottom: 76px; width: min(320px, calc(100vw - 32px)); padding: 22px; background-color: rgba(16, 18, 26, 0.92); display: grid; gap: 10px; }
.rueckruf-panel[hidden] { display: none; }
.rueckruf-panel p { margin: 0 0 4px; font: 700 18px/1.3 var(--schrift-headline); }
.rueckruf-panel a { display: block; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px var(--linie) inset; text-decoration: none; color: var(--weiss); overflow-wrap: anywhere; }
.rueckruf-panel a:hover, .rueckruf-panel a:focus-visible { background: rgba(255, 255, 255, 0.12); outline: none; }
.klaro-offen .rueckruf-knopf, .klaro-offen .rueckruf-panel { display: none; }
.menue-offen .rueckruf-knopf, .menue-offen .rueckruf-panel { display: none; }
@media (max-width: 900px) { .held-sichtbar .rueckruf-knopf, .held-sichtbar .rueckruf-panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .glas::before, .faq summary::after { transition: none; } }

/* ---------- Visualisierungen (18.10.): Balken, Zeitleiste, Tagesvergleich, Fluss, Sprungleiste ---------- */
/* Gestaffeltes Einblenden: Karten in Rastern und Stufen kommen nacheinander */
.js .raster > .einblenden:nth-child(2), .js .stufen > .einblenden:nth-child(2) { transition-delay: .08s; }
.js .raster > .einblenden:nth-child(3), .js .stufen > .einblenden:nth-child(3) { transition-delay: .16s; }
.js .raster > .einblenden:nth-child(4), .js .stufen > .einblenden:nth-child(4) { transition-delay: .24s; }
.js .raster > .einblenden:nth-child(5) { transition-delay: .32s; }
.js .raster > .einblenden:nth-child(6) { transition-delay: .4s; }

/* Kennzahl groß plus Balkendiagramm */
.kennzahl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kennzahl-gross { font: 800 clamp(88px, 14vw, 168px)/0.9 var(--schrift-headline); letter-spacing: -0.05em; }
.kennzahl-gross small { font-size: 0.42em; letter-spacing: -0.02em; }
.kennzahl-text { color: #C9CED7; font-size: 19px; margin-top: 16px; max-width: 360px; }
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.balken li { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 14px; align-items: center; }
.balken .beschriftung { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: #D6DAE1; }
.balken .spur { grid-column: 1 / 2; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.balken .fuellung { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--verlauf); transition: width 1.3s cubic-bezier(.2, .9, .2, 1); box-shadow: 0 0 18px rgba(63, 169, 240, 0.5); }
.balken li:nth-child(2) .fuellung { transition-delay: .1s; } .balken li:nth-child(3) .fuellung { transition-delay: .2s; }
.balken li:nth-child(4) .fuellung { transition-delay: .3s; } .balken li:nth-child(5) .fuellung { transition-delay: .4s; }
.balken li:nth-child(6) .fuellung { transition-delay: .5s; }
.balken .wert { font: 800 22px/1 var(--schrift-headline); text-align: right; }
.sichtbar .balken .fuellung, html:not(.js) .balken .fuellung { width: var(--wert); }
.quelle { font-size: 14px; color: var(--nebentext); margin-top: 18px; }
.quelle a { color: var(--nebentext); }
@media (max-width: 760px) { .kennzahl { grid-template-columns: minmax(0, 1fr); } }

/* Zeitleiste: am Desktop waagerecht, am Handy senkrecht; die Linie zeichnet sich beim Erscheinen */
.zeitleiste { --n: 4; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; }
.zeitleiste::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: var(--verlauf);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .9, .2, 1); box-shadow: 0 0 14px rgba(63, 169, 240, 0.6);
}
.sichtbar.zeitleiste::before, .sichtbar .zeitleiste::before, html:not(.js) .zeitleiste::before { transform: scaleX(1); }
.zeitleiste > li { position: relative; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * .22s + .2s); }
.sichtbar.zeitleiste > li, .sichtbar .zeitleiste > li, html:not(.js) .zeitleiste > li { opacity: 1; transform: none; }
.zeitleiste .punkt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  font: 800 18px/1 var(--schrift-headline); background: #0E1018; border: 2px solid var(--hellblau); box-shadow: 0 0 0 6px var(--grund), 0 0 24px rgba(63, 169, 240, 0.45);
  margin-bottom: 18px;
}
.zeitleiste .wann { display: block; font: 700 13px/1.2 var(--schrift-headline); letter-spacing: .12em; text-transform: uppercase; color: var(--hellblau); margin-bottom: 6px; }
.zeitleiste h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 8px; }
.zeitleiste p { color: #C9CED7; font-size: 17px; margin: 0; }
@media (max-width: 760px) {
  .zeitleiste { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 0; }
  .zeitleiste::before { left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .sichtbar.zeitleiste::before, .sichtbar .zeitleiste::before { transform: scaleY(1); }
  .zeitleiste > li { padding-left: 72px; }
  .zeitleiste .punkt { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Senkrechte Zeitleiste (für lange Texte, auch am Desktop) */
.zeitleiste.senkrecht { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 28px; }
.zeitleiste.senkrecht::before { left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
.sichtbar.zeitleiste.senkrecht::before, .sichtbar .zeitleiste.senkrecht::before, html:not(.js) .zeitleiste.senkrecht::before { transform: scaleY(1); }
.zeitleiste.senkrecht > li { padding-left: 72px; min-height: 52px; }
.zeitleiste.senkrecht .punkt { position: absolute; left: 0; top: 0; margin: 0; font-size: 15px; }
.zeitleiste.senkrecht h3, .zeitleiste.senkrecht h4 { margin: 4px 0 6px; }

/* Tagesvergleich: ein Tag, zwei Spuren (ohne / mit) */
.tag { display: grid; gap: 14px; }
.tag-kopf, .tag-zeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.tag-kopf span { font: 700 14px/1 var(--schrift-headline); letter-spacing: .12em; text-transform: uppercase; color: var(--nebentext); padding: 0 4px; }
.tag-kopf .mit { color: var(--hellblau); }
.tag-zeit { font: 800 20px/1.2 var(--schrift-headline); padding-top: 18px; }
.tag-zeit small { display: block; font: 600 13px/1.3 var(--schrift-text); color: var(--nebentext); }
.tag-zelle { padding: 18px 20px; border-radius: 18px; font-size: 17px; }
.tag-zelle.ohne { background: rgba(255, 255, 255, 0.035); border: 1px dashed rgba(255, 255, 255, 0.14); color: #A9AFBA; }
.tag-zelle.mit { background: linear-gradient(160deg, rgba(63, 169, 240, 0.16), rgba(138, 92, 246, 0.08)); border: 1px solid rgba(63, 169, 240, 0.35); color: #E6E9EE; }
.js .tag-zeile .mit { opacity: 0; transform: translateX(16px); transition: opacity .6s ease .35s, transform .6s ease .35s; }
.js .tag-zeile.sichtbar .mit { opacity: 1; transform: none; }
.tag-fazit { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; font: 700 18px/1.3 var(--schrift-headline); }
.tag-fazit .ohne { color: var(--nebentext); padding: 0 20px; } .tag-fazit .mit { color: #5EE0A0; padding: 0 20px; }
@media (max-width: 760px) {
  .tag-kopf { display: none; }
  .tag-zeile, .tag-fazit { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tag-zeit { padding-top: 6px; }
  .tag-zelle::before { content: attr(data-label); display: block; font: 700 12px/1 var(--schrift-headline); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; opacity: .8; }
  .tag-fazit .ohne, .tag-fazit .mit { padding: 0; }
  .tag-fazit > span:first-child { display: none; }
}

/* Fluss: Schritte mit Pfeilen, ein Lichtpunkt wandert durch */
.fluss { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; position: relative; }
.fluss li { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font: 700 16px/1.3 var(--schrift-headline); text-align: center; }
.fluss li:not(:last-child)::after { content: "\2192"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--hellblau); font-size: 18px; z-index: 1; }
.fluss li { animation: fluss-puls 4s ease-in-out infinite; }
.fluss li:nth-child(2) { animation-delay: 1s; } .fluss li:nth-child(3) { animation-delay: 2s; } .fluss li:nth-child(4) { animation-delay: 3s; }
@keyframes fluss-puls { 0%, 30%, 100% { border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } 10% { border-color: rgba(63, 169, 240, 0.8); box-shadow: 0 0 24px rgba(63, 169, 240, 0.45); } }
@media (max-width: 680px) {
  .fluss { grid-template-columns: minmax(0, 1fr); }
  .fluss li:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%); }
}

/* Wellen (Fahrplan): drei Abschnitte auf einer Leiste */
.wellen { display: grid; grid-template-columns: 1fr 1.3fr 1.6fr; gap: 6px; margin: 16px 0 20px; }
.wellen span { position: relative; padding: 12px 14px; font: 700 15px/1.2 var(--schrift-headline); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.wellen span::before { content: ""; position: absolute; inset: 0; background: var(--verlauf); opacity: .25; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .9, .2, 1); }
.wellen span:nth-child(1)::before { opacity: .55; } .wellen span:nth-child(2)::before { opacity: .35; transition-delay: .25s; } .wellen span:nth-child(3)::before { transition-delay: .5s; }
.sichtbar .wellen span::before, html:not(.js) .wellen span::before { transform: none; }
.wellen span b { position: relative; display: block; } .wellen span small { position: relative; display: block; font: 500 13px/1.3 var(--schrift-text); color: #C9CED7; margin-top: 2px; }
@media (max-width: 520px) { .wellen { grid-template-columns: minmax(0, 1fr); } }

/* Sprungleiste (Für Betriebe): klebt unter dem Kopf, markiert den aktuellen Abschnitt */
.sprungleiste { position: sticky; top: 72px; z-index: 40; background: rgba(10, 11, 16, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--linie); }
.sprungleiste .huelle { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.sprungleiste .huelle::-webkit-scrollbar { display: none; }
.sprungleiste a { flex: none; text-decoration: none; color: #C9CED7; font: 700 15px/1 var(--schrift-headline); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linie); transition: background .25s, color .25s, border-color .25s; }
.sprungleiste a:hover { color: var(--weiss); border-color: rgba(63, 169, 240, 0.5); }
.sprungleiste a.aktiv { color: var(--weiss); background: rgba(63, 169, 240, 0.18); border-color: rgba(63, 169, 240, 0.7); }
body.mit-sprungleiste main [id] { scroll-margin-top: 140px; }
.zeitleiste-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(63, 169, 240, 0.6); text-underline-offset: 5px; }
.zeitleiste-link:hover { text-decoration-color: var(--hellblau); }
@media (max-width: 900px) { .sprungleiste .huelle { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  .balken .fuellung, .zeitleiste::before, .zeitleiste > li, .wellen span::before, .js .tag-zeile .mit { transition: none; }
  .fluss li { animation: none; }
  .js .raster > .einblenden, .js .stufen > .einblenden { transition-delay: 0s; }
}

/* ---------- Grafiken Runde 2 (18.10.): Ampel, Zahlenvergleich, Treppe, Gegenüberstellung, Prompt, Vergleichsspalte ---------- */
.ampel { display: grid; gap: 10px; margin: 6px 0 18px; padding: 16px; border-radius: 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--linie); max-width: 520px; }
.ampel-zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: center; }
.ampel-zeile b { display: block; font-family: var(--schrift-headline); } .ampel-zeile small { display: block; color: #C9CED7; font-size: 15px; }
.ampel-licht { width: 24px; height: 24px; border-radius: 50%; opacity: .25; transition: opacity .5s ease, box-shadow .5s ease; }
.gruen .ampel-licht { background: #3DDC84; } .gelb .ampel-licht { background: #F5C542; } .rot .ampel-licht { background: #F05A5A; }
.sichtbar .ampel-licht, html:not(.js) .ampel-licht { opacity: 1; }
.sichtbar .gruen .ampel-licht { box-shadow: 0 0 16px #3DDC84; transition-delay: .2s; }
.sichtbar .gelb .ampel-licht { box-shadow: 0 0 16px #F5C542; transition-delay: .5s; }
.sichtbar .rot .ampel-licht { box-shadow: 0 0 16px #F05A5A; transition-delay: .8s; }
.sichtbar .rot .ampel-licht { animation: ampel-blink 2.4s ease-in-out 1.4s 2; }
@keyframes ampel-blink { 50% { opacity: .45; } }

.zahlenvergleich { display: grid; gap: 8px; margin: 18px 0 22px; max-width: 560px; }
.zv-kopf, .zv-zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.zv-kopf span { font: 700 12px/1.2 var(--schrift-headline); letter-spacing: .1em; text-transform: uppercase; color: var(--nebentext); text-align: center; }
.zv-kopf span:first-child { text-align: left; }
.zv-zeile > span { color: #D6DAE1; font-size: 16px; }
.zv-zeile b { text-align: center; padding: 10px 0; border-radius: 14px; font: 800 26px/1 var(--schrift-headline); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linie); }
.zv-zeile b:last-child { background: rgba(63, 169, 240, 0.14); border-color: rgba(63, 169, 240, 0.4); }

.treppe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; }
.treppe .stufe-1 { min-height: 280px; } .treppe .stufe-2 { min-height: 340px; } .treppe .stufe-3 { min-height: 400px; border-color: rgba(63, 169, 240, 0.35); }
.treppe .karte h3 { margin-bottom: 10px; }
.treppe-basis { margin-top: 20px; padding: 16px 22px; border-radius: 18px; background: rgba(63, 169, 240, 0.10); border: 1px solid rgba(63, 169, 240, 0.35); font-weight: 600; }
@media (max-width: 860px) { .treppe { grid-template-columns: minmax(0, 1fr); } .treppe .stufe-1, .treppe .stufe-2, .treppe .stufe-3 { min-height: 0; } }

.gegenueber { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 32px; }
.gegenueber .fluss { margin: 14px 0; }
.gegenueber .fluss li { font-size: 15px; padding: 12px 10px; hyphens: manual; }
.gegenueber-oder { font: 800 18px/1 var(--schrift-headline); color: var(--hellblau); text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 760px) { .gegenueber { grid-template-columns: minmax(0, 1fr); } .gegenueber-oder { text-align: center; } }

.prompt mark { color: inherit; padding: 1px 3px; border-radius: 4px; }
.teil1 { background: rgba(63, 169, 240, 0.22); } .teil2 { background: rgba(138, 92, 246, 0.25); }
.teil3 { background: rgba(61, 220, 132, 0.18); } .teil4 { background: rgba(245, 197, 66, 0.2); }
.prompt-legende { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.prompt-legende span { padding: 4px 10px; border-radius: 999px; }

/* Vergleich: Visvero-Spalte hervorgehoben (letzte Spalte) */
#vergleich th:last-child { color: var(--hellblau); }
#vergleich td:last-child { background: rgba(63, 169, 240, 0.10); font-weight: 600; color: var(--weiss); }
#vergleich tbody tr:first-child td:last-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
#vergleich tbody tr:last-child td:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
@media (max-width: 760px) { #vergleich td:last-child { border-radius: 12px; padding-left: 12px; padding-right: 12px; } }
@media (prefers-reduced-motion: reduce) { .ampel-licht { transition: none; animation: none !important; } }