/* VIVYT: Entwurf v5 (19.10.2026). Dunkler Raum, Horizontlicht in den Logofarben, Glas.
   Orientierung: cosmoq.framer.website. Richtung: PRODUCT.md, Abschnitt «Richtung». */

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

:root {
  /* Logofarben, am Signet gemessen */
  --mint: #5bd9c1;
  --petrol: #2b6d81;
  --blau: #235472;
  --navy: #192e59;
  --stahl: #84a8cc;

  --grund: #05070d;
  --grund-2: #0a0f1a;
  --flaeche: rgba(255, 255, 255, 0.035);
  --flaeche-2: rgba(255, 255, 255, 0.065);
  --rand: rgba(255, 255, 255, 0.08);
  --rand-2: rgba(255, 255, 255, 0.15);
  --text: #f3f6fa;
  --text-2: #c2cddc;
  --text-3: #9aa9bf;

  --verlauf: linear-gradient(115deg, var(--mint) 0%, #8fd8e0 38%, var(--stahl) 70%, #6f92c4 100%);
  --radius: 20px;
  --weich: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text-2);
  font: 400 1rem/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
h1, h2, h3, h4 { color: var(--text); margin: 0; }

h1 {
  font-size: clamp(2.35rem, 1rem + 5.4vw, 5.75rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0.35em 0 0.3em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 1.25rem + 2.7vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 450;
  text-wrap: balance;
}
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 550; margin-bottom: 0.45em; }

.lead { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; max-width: 58ch; margin: 1.1rem 0 0; }
.klein { font-size: 0.85rem; color: var(--text-3); }
.mitte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mitte .lead { margin-inline: auto; }

:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(91, 217, 193, 0.35); color: #fff; }

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: #fff; color: var(--grund); padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.sprung:focus { top: 16px; }

/* ---------- Raster ---------- */

.rahmen { width: min(100% - 40px, 1200px); margin-inline: auto; position: relative; z-index: 1; }
.rahmen--breit { width: min(100% - 32px, 1240px); }
main > section { position: relative; padding: clamp(72px, 8vw, 116px) 0; }
/* Was von der Seite hereinfährt, steht während der Fahrt ausserhalb: hier abschneiden (v4-Falle) */
main > section, .fuss { overflow-x: clip; }
main > section.eng-oben { padding-top: 24px; }

/* ---------- Knöpfe ---------- */

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.mitte .knoepfe { justify-content: center; }
.knoepfe--stapel { flex-direction: column; align-items: stretch; margin-top: 1.4rem; }
.knoepfe--stapel .knopf { justify-content: center; }

.knopf {
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 44px; padding: 0.65em 1.2em;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 0.95rem/1.2 inherit; letter-spacing: -0.005em;
  color: var(--text); text-decoration: none; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.35s, color 0.25s;
}
.knopf--gross { min-height: 52px; padding: 0.85em 1.55em; font-size: 1rem; }
.knopf--klein { min-height: 40px; padding: 0.5em 1em; font-size: 0.875rem; }
.knopf--licht {
  background:
    radial-gradient(ellipse 80% 120% at 50% 120%, rgba(91, 217, 193, 0.45), transparent 70%) padding-box,
    linear-gradient(180deg, #132232, #070c14) padding-box,
    linear-gradient(115deg, #f0fffc, var(--mint) 35%, var(--stahl) 75%, #6f92c4) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 4px rgba(91, 217, 193, 0.1),
              0 0 28px -4px rgba(91, 217, 193, 0.65), 0 14px 40px -12px rgba(91, 217, 193, 0.7);
  font-weight: 550;
}
.knopf--licht:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -16px 28px -12px rgba(91, 217, 193, 0.95),
              0 0 0 5px rgba(91, 217, 193, 0.12), 0 16px 50px -8px rgba(91, 217, 193, 0.85);
}
.knopf--licht .knopf-nr { color: #dff7f2; }
.knopf--glas { background: rgba(255, 255, 255, 0.06); border-color: var(--rand-2); backdrop-filter: blur(10px); }
.knopf--glas:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); }
.knopf-nr { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 450; }

.ikon { width: 1.15em; height: 1.15em; flex: none; }
.ikon--fest { fill: currentColor; stroke: none; }
.ikon--haken { color: var(--mint); width: 1.05em; height: 1.05em; margin-top: 0.22em; }

.pille {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 3px 10px; border: 1px solid var(--rand-2); border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.pille--lauf { color: var(--mint); border-color: rgba(91, 217, 193, 0.4); }
.pille--licht { background: var(--verlauf); border-color: transparent; color: var(--grund); font-weight: 600; }

/* ---------- Kopf ---------- */

.kopf { position: fixed; inset: 0 0 auto; z-index: 50; padding: 16px 0; }
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(5, 7, 13, 0.74); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--rand);
  opacity: 0; transition: opacity 0.3s;
}
.kopf--fest::before { opacity: 1; }
.kopf-innen {
  width: min(100% - 32px, 1240px); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.logo { justify-self: start; display: block; }
.logo img { height: 30px; width: auto; }
.nav {
  display: flex; gap: 2px; padding: 5px;
  border: 1px solid var(--rand-2); border-radius: 999px;
  background: rgba(12, 16, 26, 0.55); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav a {
  padding: 8px 16px; border-radius: 999px; font-size: 0.9rem; font-weight: 450;
  color: var(--text-2); text-decoration: none; transition: color 0.2s, background-color 0.2s;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current] { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.kopf-cta { justify-self: end; }
.menu { display: none; }

/* ---------- Horizont ---------- */

.horizont {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  /* flache Ellipse, gut dreimal so breit wie der Bildschirm: am Rand nur eine leichte Kurve */
  --scheitel: 560px; --strahl: 460px; --breite: max(1100px, 290vw); --form: 6 / 1;
}
.horizont::before {
  /* Lichtvorhang wie bei Cosmoq, in den Logofarben: links Mint mit hellen Kernen, rechts Stahlblau,
     die Mitte ruhiger (dort steht die Schrift). Reicht vom Bogen bis ganz nach oben. */
  content: ""; position: absolute; left: 50%; top: calc(var(--scheitel) - var(--strahl));
  width: 120%; height: calc(var(--strahl) + 240px); transform: translateX(-50%);
  background:
    radial-gradient(ellipse 2.2% 70% at 24% calc(100% - 240px), rgba(91, 217, 193, 0.5), transparent 72%),
    radial-gradient(ellipse 3.5% 92% at 28.5% calc(100% - 240px), rgba(91, 217, 193, 0.8), transparent 72%),
    radial-gradient(ellipse 1.6% 86% at 32% calc(100% - 240px), rgba(235, 255, 250, 0.85), transparent 72%),
    radial-gradient(ellipse 4% 100% at 35.5% calc(100% - 240px), rgba(91, 217, 193, 0.95), transparent 72%),
    radial-gradient(ellipse 2% 82% at 39.5% calc(100% - 240px), rgba(170, 240, 228, 0.8), transparent 72%),
    radial-gradient(ellipse 5% 72% at 44% calc(100% - 240px), rgba(43, 155, 150, 0.6), transparent 72%),
    radial-gradient(ellipse 3% 64% at 50% calc(100% - 240px), rgba(43, 109, 129, 0.5), transparent 72%),
    radial-gradient(ellipse 2.2% 80% at 55% calc(100% - 240px), rgba(190, 215, 245, 0.7), transparent 72%),
    radial-gradient(ellipse 2% 90% at 59% calc(100% - 240px), rgba(210, 230, 255, 0.85), transparent 72%),
    radial-gradient(ellipse 4.5% 100% at 63% calc(100% - 240px), rgba(111, 146, 196, 0.95), transparent 72%),
    radial-gradient(ellipse 2% 86% at 67% calc(100% - 240px), rgba(132, 168, 204, 0.9), transparent 72%),
    radial-gradient(ellipse 3.5% 80% at 71.5% calc(100% - 240px), rgba(70, 115, 190, 0.8), transparent 72%),
    radial-gradient(ellipse 2.5% 62% at 76% calc(100% - 240px), rgba(132, 168, 204, 0.5), transparent 72%),
    linear-gradient(90deg, transparent 14%, rgba(91, 217, 193, 0.42) 28%, rgba(91, 217, 193, 0.6) 37%, rgba(30, 80, 100, 0.35) 50%,
      rgba(111, 146, 196, 0.6) 62%, rgba(63, 110, 180, 0.42) 72%, transparent 86%);
  /* drei Masken geschnitten: nach oben dünner werdend, aber bis zum Rand; seitlich auslaufend;
     unter dem Scheitel weich nach unten (keine Kante) */
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) min(35%, calc(100% - 330px)), #000 calc(100% - 300px), rgba(0, 0, 0, 0.35) calc(100% - 170px), transparent 100%),
    linear-gradient(90deg, transparent 6%, #000 26%, #000 74%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) min(35%, calc(100% - 330px)), #000 calc(100% - 300px), rgba(0, 0, 0, 0.35) calc(100% - 170px), transparent 100%),
    linear-gradient(90deg, transparent 6%, #000 26%, #000 74%, transparent 94%);
  mask-composite: intersect;
  filter: blur(12px);
}
.horizont > span {
  position: absolute; left: 50%; width: var(--breite); aspect-ratio: var(--form); border-radius: 50%;
  translate: -50% 0;
}
/* Der Bogen ist nur Licht, keine dunkle Scheibe (Wunsch 19.10.2026: keine Linie, fliessend in
   den Hintergrund mit den Wellen). Ein elliptisches Lichtband: aussen kurz, innen lang auslaufend.
   Sichtbar ist nur die Mitte der Ellipse (rund 33 % bis 67 %): dort liegen die Farbstopps. */
.horizont .bogen {
  top: calc(var(--scheitel) - 70px); filter: blur(30px);
  background: linear-gradient(90deg, #192e59 22%, #6f92c4 33%, #84a8cc 40%, #5bd9c1 46%, #eafffb 50%,
    #5bd9c1 54%, #2b9a9a 59%, #2b6d81 65%, #235472 72%, #192e59 80%);
  /* nur die obere Hälfte der Ellipse, sonst erscheint ihre Unterseite als zweiter Bogen */
  -webkit-mask-image: radial-gradient(closest-side, transparent 45%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.28) 76%,
    rgba(0, 0, 0, 0.65) 86%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 0.45) 95%, rgba(0, 0, 0, 0.12) 98%, transparent 100%), linear-gradient(180deg, #000 0%, #000 22%, transparent 45%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(closest-side, transparent 45%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.28) 76%,
    rgba(0, 0, 0, 0.65) 86%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 0.45) 95%, rgba(0, 0, 0, 0.12) 98%, transparent 100%), linear-gradient(180deg, #000 0%, #000 22%, transparent 45%);
  mask-composite: intersect;
}
.buehne { position: relative; margin-top: 104px; }
.held > .mitte { z-index: 2; }
.horizont--held { inset: auto; left: 50%; top: 0; width: 100vw; height: 100%; translate: -50% 0; overflow: visible; --scheitel: -28px; --strahl: 900px; }
/* Seitenkopf und Fuss: das Licht läuft über das Abschnittsende hinaus aus, statt dort abzubrechen;
   der nächste Abschnitt liegt darüber */
.horizont--klein, .horizont--fuss { bottom: -320px; }
.fuss .rahmen { position: relative; z-index: 1; }
.horizont--klein { --scheitel: calc(100% - 40px - 320px); --strahl: 620px; }
.horizont--klein::before { opacity: 0.8; }
.horizont--fuss { --scheitel: calc(100% - 70px - 320px); --strahl: calc(clamp(220px, 30vw, 400px) - 90px); }  /* = Bühnenhöhe − 90 px: beginnt immer innerhalb der Bühne */
/* Fuss: der Vorhang beginnt mitten auf der Seite, darum läuft er nach oben ganz ins Dunkel aus
   (sonst harte Kante an der Oberkante der Bühne); gedämpft, damit er ruhig hinter dem V liegt */
.horizont--fuss::before {
  opacity: 0.55;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) min(40%, calc(100% - 330px)), #000 calc(100% - 300px), rgba(0, 0, 0, 0.35) calc(100% - 170px), transparent 100%),
    linear-gradient(90deg, transparent 10%, #000 30%, #000 70%, transparent 90%);
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) min(40%, calc(100% - 330px)), #000 calc(100% - 300px), rgba(0, 0, 0, 0.35) calc(100% - 170px), transparent 100%),
    linear-gradient(90deg, transparent 10%, #000 30%, #000 70%, transparent 90%);
}
.horizont--fuss .bogen { opacity: 0.6; }

/* Sterne, sehr schwach */
.held::before, .schluss::before, .seitenkopf::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 31%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 78% 48%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 22%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1px 1px at 6% 81%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 55% 77%, rgba(255, 255, 255, 0.4), transparent 60%);
  background-size: 520px 420px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 75%);
}

/* ---------- Erster Bildschirm ---------- */

main > section.held { padding: 144px 0 40px; overflow: clip; }
.held h1 { max-width: 14ch; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 14px 6px 8px; border: 1px solid var(--rand-2); border-radius: 999px;
  background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(8px);
  font-size: 0.85rem; color: var(--text);
}
.badge img { border-radius: 4px; }
/* Ohne Schweizerkreuz (.de/.at) gleich viel Luft auf beiden Seiten */
.badge:not(:has(img)) { padding-left: 14px; }
.hinweis { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--text-2); text-shadow: 0 1px 14px rgba(5, 7, 13, 0.95); }
.held .knopf--glas, .seitenkopf .knopf--glas { background: rgba(5, 7, 13, 0.5); }
.hinweis a { color: var(--text); text-underline-offset: 3px; white-space: nowrap; }

.konsole {
  position: relative; z-index: 1; margin: 0;
  border: 1px solid var(--rand-2); border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 25, 40, 0.82), rgba(7, 10, 17, 0.94));
  backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -20px 80px -30px rgba(91, 217, 193, 0.45),
              0 50px 120px -30px rgba(0, 0, 0, 0.9);
}
.konsole-leiste {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid var(--rand); font-size: 0.85rem; color: var(--text-2);
}
.konsole-titel { flex: 1; }
.ampel { display: flex; gap: 6px; }
.ampel i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.konsole-raster { display: grid; grid-template-columns: 1.55fr 1fr; }
.konsole-gespraech { padding: 24px; }
.konsole-seite { padding: 24px; border-left: 1px solid var(--rand); display: flex; flex-direction: column; gap: 18px; }
.konsole-h { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--text); }
.anruf-kopf { display: flex; align-items: center; gap: 12px; }
.anruf-kopf strong { display: block; color: var(--text); font-weight: 550; }
.anruf-kopf .klein { display: block; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: var(--grund);
  background: var(--mint) var(--verlauf);
  box-shadow: 0 0 24px -4px rgba(91, 217, 193, 0.6);
}
.live { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(91, 217, 193, 0.18), 0 0 14px var(--mint); }
.welle { width: 100%; height: 56px; margin: 18px 0; fill: var(--mint); opacity: 0.75; }
.chat { display: flex; flex-direction: column; gap: 10px; }
/* Mehrere Beispielgespräche übereinander: gleiche Höhe, kein Springen beim Wechsel */
.gespraeche { display: grid; }
.gespraech { grid-area: 1 / 1; transition: opacity 0.5s var(--weich), visibility 0.5s; }
.gespraech:not(.aktiv) { visibility: hidden; opacity: 0; }
.blase {
  max-width: 86%; padding: 10px 14px; border-radius: 16px;
  font-size: 0.92rem; line-height: 1.45; color: var(--text);
  border: 1px solid var(--rand);
}
.blase--ivi { background: rgba(91, 217, 193, 0.09); border-color: rgba(91, 217, 193, 0.24); border-top-left-radius: 6px; }
.blase--kunde { background: rgba(255, 255, 255, 0.05); margin-left: auto; border-top-right-radius: 6px; }
.wer { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.ergebnis {
  display: inline-flex; gap: 8px; margin: 18px 0 0; padding: 9px 14px;
  border: 1px solid rgba(91, 217, 193, 0.3); border-radius: 12px;
  background: rgba(91, 217, 193, 0.07); font-size: 0.88rem; color: var(--text);
}

.anrufliste li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rand); }
.anrufliste li:last-child { border-bottom: 0; }
.anrufliste--knapp li { padding: 12px 0; }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.punkt--lauf { background: var(--stahl); box-shadow: 0 0 0 4px rgba(132, 168, 204, 0.18); }
.zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; }
.zeile-text strong { color: var(--text); font-weight: 500; font-size: 0.92rem; }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; }
.werte div { padding: 14px 12px; border: 1px solid var(--rand); border-radius: 14px; background: var(--flaeche); }
.werte dt { font-size: 1.35rem; font-weight: 550; letter-spacing: -0.02em; color: var(--text); }
.werte dd { font-size: 0.78rem; color: var(--text-3); }

/* ---------- Abschnittskopf ---------- */

.braue {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 1.2rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
}
.braue-zeichen {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  border: 1px solid var(--rand-2);
  background: radial-gradient(circle, var(--mint) 0 2.5px, rgba(91, 217, 193, 0.25) 3.5px, transparent 6px), rgba(255, 255, 255, 0.04);
}
.kopfzeile {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 24px 48px;
  padding-bottom: 32px; margin-bottom: 48px; border-bottom: 1px solid var(--rand);
}
.kopfzeile h2 { max-width: 18ch; }
.kopfzeile-satz { margin: 0; max-width: 40ch; justify-self: end; }

/* ---------- Karten ---------- */

.glas {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.karte {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 28px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s;
}
.karte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(91, 217, 193, 0.1), transparent 70%);
}
.karte:hover { border-color: var(--rand-2); }
.karte p { margin: 0; }
.karte p + p { margin-top: 0.8em; }
.karte .haken-liste { margin: 0.6rem 0 1rem; }
.karte .nr { display: block; margin-bottom: 36px; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--mint); }
.raster-3, .raster-4 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.haken-liste li { display: flex; gap: 10px; padding: 5px 0; }
.haken-liste strong { color: var(--text); font-weight: 550; }
.haken-liste--glas { margin-top: 2rem; }
.haken-liste--glas li { padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); color: var(--text); }

.mehr {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  color: var(--mint); font-weight: 500; text-decoration: none; transition: gap 0.25s var(--weich);
}
.mehr:hover { gap: 12px; }
.mehr .ikon { width: 1em; height: 1em; }

/* ---------- Aussage ---------- */

main > section.aussage { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 56px); }
.aussage-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.aussage-text {
  margin: 0; max-width: 26em; font-size: clamp(1.45rem, 1rem + 1.6vw, 2.25rem); line-height: 1.3; letter-spacing: -0.022em;
  font-weight: 450; color: var(--text); text-wrap: pretty;
}
.aussage-text span { color: var(--text-3); }
.kugel {
  /* dunkles Glas statt Farbflecken: feiner Verlaufsrand, ein weiches Leuchten von unten */
  position: relative; justify-self: center; width: min(280px, 66vw); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid transparent;
  background:
    radial-gradient(110% 80% at 50% 118%, rgba(91, 217, 193, 0.34), transparent 62%) padding-box,
    radial-gradient(80% 60% at 50% -10%, rgba(132, 168, 204, 0.12), transparent 70%) padding-box,
    linear-gradient(180deg, #0e1727, #070b13) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(132, 168, 204, 0.16) 32%, rgba(255, 255, 255, 0.03) 58%, rgba(91, 217, 193, 0.55)) border-box;
  box-shadow: 0 50px 100px -40px rgba(91, 217, 193, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.012);
}
.kugel-v {
  width: 30%; aspect-ratio: 138 / 128;
  background: linear-gradient(170deg, #ffffff 10%, #c8f2e9 55%, var(--stahl));
  -webkit-mask: url("../img/vivyt-signet-gross.png") center / contain no-repeat;
  mask: url("../img/vivyt-signet-gross.png") center / contain no-repeat;
}
.kugel-text { color: var(--text-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.34em; padding-left: 0.34em; }

/* ---------- Bento ---------- */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento .karte { grid-column: span 2; display: flex; flex-direction: column; }
.bento .karte--breit { grid-column: span 3; }
.karte--bild { padding: 0; }
.karte-text { padding: 0 28px 28px; margin-top: auto; }
.bild { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; isolation: isolate; --l1: 91, 217, 193; --l2: 43, 109, 129; }
.bild--raus { --l1: 132, 168, 204; --l2: 35, 84, 114; }
.bild--chat { --l1: 91, 217, 193; --l2: 25, 46, 89; }
.bild--stimme { --l1: 132, 168, 204; --l2: 43, 109, 129; }
.bild::before {
  /* weiches Licht hinter dem Gegenstand, läuft innerhalb der Fläche ganz aus (keine Kante) */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 42% 42% at 50% 45%, rgba(var(--l1), 0.26), rgba(var(--l2), 0.12) 50%, transparent 100%);
}
.kern {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; margin-bottom: 34px;
  color: rgb(var(--l1)); border: 1px solid transparent;
  background:
    radial-gradient(100% 80% at 50% 120%, rgba(var(--l1), 0.32), transparent 65%) padding-box,
    linear-gradient(180deg, #101a2a, #070b13) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, 0.5), rgba(var(--l1), 0.12) 40%, rgba(var(--l1), 0.55)) border-box;
  box-shadow: 0 24px 50px -24px rgba(var(--l1), 0.6);
}
.kern .ikon { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.bild--chat { gap: 10px; align-content: center; justify-items: stretch; padding: 0 20% 34px; }
.bild--chat { padding: 0 14% 34px; }
.bild--chat .b {
  display: block; width: fit-content; max-width: 86%; padding: 8px 12px; border-radius: 14px;
  font-size: 0.82rem; line-height: 1.35; color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.b1 { background: rgba(91, 217, 193, 0.1); border-color: rgba(91, 217, 193, 0.25) !important; border-top-left-radius: 5px !important; }
.b2 { justify-self: end; background: rgba(255, 255, 255, 0.05); border-top-right-radius: 5px !important; }
.b3 { display: flex !important; gap: 4px; background: rgba(91, 217, 193, 0.1); border-color: rgba(91, 217, 193, 0.25) !important; border-top-left-radius: 5px !important; }
.b3 i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); opacity: 0.8; }
.kern-pfeil {
  position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #0b1220; border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(var(--l1)); rotate: 135deg;
}
.bild--raus .kern-pfeil { rotate: -45deg; }
.kern-pfeil .ikon { width: 16px; height: 16px; fill: none; stroke: currentColor; filter: none; }
.welle--klein { width: 70%; height: 90px; margin: 0 0 34px; fill: var(--stahl); opacity: 0.9; }
.karte--aufruf {
  justify-content: flex-end;
  background:
    radial-gradient(ellipse 90% 70% at 50% 115%, rgba(91, 217, 193, 0.38), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.karte--aufruf p { color: var(--text); }
.karte--aufruf h3 { font-size: 1.65rem; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Zahlen ---------- */

.zahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--rand); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
.zahl { display: flex; flex-direction: column; padding: 30px 26px; background: var(--grund); }
.zahl-vor { font-size: 0.8rem; color: var(--text-3); min-height: 1.3em; }
.zahl-wert {
  font-size: clamp(2.3rem, 1.6rem + 2vw, 3.3rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.035em;
  color: var(--mint); background: var(--verlauf); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; margin: 4px 0 10px; width: fit-content;
}
.zahl-text { font-size: 1rem; }

/* ---------- Schritte ---------- */

.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.schritte--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schritte li { position: relative; padding-top: 22px; border-top: 1px solid var(--rand-2); }
.schritte li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px;
  background: var(--verlauf); box-shadow: 0 0 12px rgba(91, 217, 193, 0.7);
}
.schritte .nr { display: block; margin-bottom: 40px; font-size: 0.85rem; color: var(--mint); font-variant-numeric: tabular-nums; }
.schritte p { margin: 0; }

/* ---------- Anbindung ---------- */

.anbindung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; }
.anbindung-liste { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.anbindung-liste li { padding: 26px 0; border-top: 1px solid var(--rand-2); }
.anbindung-liste li:last-child { border-bottom: 1px solid var(--rand-2); }
.anbindung-liste p { margin: 0; }
.anbindung-feld {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; padding: 48px 32px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(43, 109, 129, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.anbindung-feld .kugel { width: 170px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips li {
  padding: 8px 15px; border: 1px solid var(--rand-2); border-radius: 999px;
  background: rgba(255, 255, 255, 0.045); font-size: 0.9rem; color: var(--text);
}
.chips--gross { justify-content: flex-start; }
.chips--gross li { padding: 12px 20px; font-size: 1rem; }
.chips .chips-mehr { border-style: dashed; color: var(--text-2); background: none; }

/* ---------- Zwei Spalten ---------- */

.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.zwei--text { align-items: start; }
.zwei h2 { max-width: 16ch; }
.fliesstext p { font-size: 1.1rem; color: var(--text-2); }
.bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.bereiche li {
  display: flex; align-items: baseline; gap: 14px; padding: 20px 0; border-top: 1px solid var(--rand-2);
  color: var(--text); font-size: 1.1rem; font-weight: 500; line-height: 1.3;
}
.bereiche .nr { font-size: 0.8rem; color: var(--mint); font-variant-numeric: tabular-nums; }

/* ---------- Preise ---------- */

.pakete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.paket {
  position: relative; display: flex; flex-direction: column; padding: 28px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.paket--hervor {
  border-color: transparent;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(91, 217, 193, 0.16), transparent 70%) padding-box, linear-gradient(180deg, #0f1726, #070b13) padding-box, var(--verlauf) border-box;
  box-shadow: 0 30px 90px -36px rgba(91, 217, 193, 0.65);
}
.paket-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paket-kopf h3 { margin: 0; font-size: 1.05rem; }
.preis { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 10px; color: var(--text); }
.preis-vor, .preis-nach { font-size: 0.9rem; color: var(--text-2); }
.betrag { font-size: 3rem; line-height: 1; font-weight: 500; letter-spacing: -0.04em; }
.betrag--text { font-size: 2rem; letter-spacing: -0.03em; }
.paket-text { font-size: 0.92rem; min-height: 4.5em; }
.paket .knopf { justify-content: center; margin: 8px 0 22px; }
.paket .haken-liste { border-top: 1px solid var(--rand); padding-top: 18px; font-size: 0.92rem; }
/* Konfigurator: links wählen, rechts der Preis; das Ergebnis trägt den Verlaufsrand wie .paket--hervor */
.konfig { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.konfig fieldset { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.konfig legend { margin-bottom: 14px; padding: 0; color: var(--text); font-weight: 550; }
.wahl.wahl--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl--drei .wahl-karte { padding: 16px 18px; align-content: start; }
.wahl-karte:has(input:checked) {
  border-color: transparent;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(91, 217, 193, 0.14), transparent 70%) padding-box, linear-gradient(180deg, #0f1726, #0a1019) padding-box, var(--verlauf) border-box;
}
.wahl-karte:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }
.konfig-preis {
  position: sticky; top: 100px; padding: 30px; border: 1px solid transparent; border-radius: var(--radius);
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(91, 217, 193, 0.16), transparent 70%) padding-box, linear-gradient(180deg, #0f1726, #070b13) padding-box, var(--verlauf) border-box;
  box-shadow: 0 30px 90px -36px rgba(91, 217, 193, 0.65);
}
.konfig-titel { margin: 0; color: var(--text-2); font-size: 0.92rem; }
.konfig-preis .preis { margin: 14px 0 6px; }
.konfig-einrichtung { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.konfig-preis .knopf { justify-content: center; width: 100%; margin: 22px 0; }
.konfig-preis .haken-liste { border-top: 1px solid var(--rand); padding-top: 18px; font-size: 0.92rem; }
@media (max-width: 900px) { .konfig { grid-template-columns: minmax(0, 1fr); } .konfig-preis { position: static; } }
@media (max-width: 560px) {
  .wahl.wahl--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wahl--drei .wahl-karte { padding: 14px 10px; text-align: center; }
  .wahl--drei .wahl-karte strong { font-size: 0.95rem; }
  .wahl--drei .wahl-karte span { display: none; }
  .konfig-preis { padding: 24px; }
}
.fussnote { margin: 28px 0 0; text-align: center; font-size: 0.9rem; color: var(--text-3); }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq details { border: 1px solid var(--rand); border-radius: 16px; background: var(--flaeche); transition: border-color 0.25s, background-color 0.25s; }
.faq details[open] { border-color: var(--rand-2); background: var(--flaeche-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px; cursor: pointer; list-style: none; color: var(--text); font-weight: 500; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 14px; height: 14px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--text-2); border-radius: 2px; transition: rotate 0.3s var(--weich); }
.plus::after { rotate: 90deg; }
details[open] .plus::after { rotate: 0deg; }
.faq-a { padding: 0 22px 20px; }
.faq-a ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }
.faq-a li { margin: 0.3em 0; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- Schluss ---------- */

main > section.schluss { padding: clamp(100px, 12vw, 160px) 0 clamp(20px, 3vw, 40px); overflow: clip; }
.schluss::after {
  content: ""; position: absolute; inset: auto 0 -40%; height: 90%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 50% 100%, rgba(43, 109, 129, 0.35), rgba(25, 46, 89, 0.15) 50%, transparent 75%);
}
.schluss h2 { max-width: 20ch; }
.schluss-nummer {
  display: block; margin: 1.6rem 0 0.2rem; text-decoration: none;
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.8rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--mint); background: var(--verlauf); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums;
}

/* ---------- Seitenkopf ---------- */

.seitenkopf { position: relative; overflow-x: clip; padding: 168px 0 150px !important; }
main > .seitenkopf + section { padding-top: 56px; }
.seitenkopf h1 { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.4rem); max-width: 20ch; }
.seitenkopf--kurz { padding-bottom: 130px !important; }
.seitenkopf--kurz h1 { margin-bottom: 0; }

/* ---------- Funktionen: Reiter ---------- */

.reiter {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 32px; padding: 5px;
  border: 1px solid var(--rand-2); border-radius: 999px; background: var(--flaeche); overflow-x: auto;
}
.reiter button {
  padding: 10px 22px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 0.95rem/1.2 inherit; color: var(--text-2); white-space: nowrap; transition: color 0.2s, background-color 0.2s;
}
.reiter button:hover { color: var(--text); }
.reiter button[aria-selected="true"] { background: #fff; color: var(--grund); }
.paneele { padding: clamp(24px, 4vw, 48px); }
.paneel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.paneel + .paneel { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rand); }
.paneel[hidden] { display: none; }
.js .paneel + .paneel { margin-top: 0; padding-top: 0; border-top: 0; }
.paneel h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.paneel .haken-liste { margin-top: 1.6rem; }
.tafel { margin: 0; overflow: hidden; background: rgba(5, 7, 13, 0.55); }
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rand); color: var(--text); font-size: 0.92rem; }
.tafel .chat { padding: 18px; }
.chat-eingabe { margin: 0 18px 18px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; font-size: 0.88rem; color: var(--text-3); }

.zwischen { margin: 64px 0 20px; font-size: 1.25rem; }
.proben { display: flex; flex-wrap: wrap; gap: 10px; }
.probe {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; min-height: 44px;
  border: 1px solid var(--rand-2); border-radius: 999px; background: var(--flaeche);
  color: var(--text); text-decoration: none; font-weight: 500; transition: border-color 0.2s, background-color 0.2s;
}
.probe:hover { background: var(--flaeche-2); }
.probe-zeichen { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--mint) var(--verlauf); flex: none; }
.probe-zeichen::before {
  content: ""; position: absolute; left: 11px; top: 9px;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--grund);
}
.probe.spielt { border-color: var(--mint); }
.probe.spielt .probe-zeichen::before { left: 10px; top: 10px; width: 10px; height: 10px; border: 0; background: linear-gradient(90deg, var(--grund) 0 3px, transparent 3px 7px, var(--grund) 7px); }

.tafel-fuss { display: flex; gap: 8px; margin: 0; padding: 14px 18px; border-top: 1px solid var(--rand); font-size: 0.88rem; color: var(--text); }

.technik { padding: 6px 28px; }
.technik div { padding: 18px 0; border-bottom: 1px solid var(--rand); }
.technik div:last-child { border-bottom: 0; }
.technik dt { color: var(--text); font-weight: 550; }
.technik dd { margin-top: 4px; }

/* ---------- Referenzen ---------- */

.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.video {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche);
  transition: border-color 0.25s;
}
.video:hover { border-color: var(--rand-2); }
.video-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video-bild img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--weich); }
.video:hover .video-bild img { scale: 1.03; }
.play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(5, 7, 13, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px);
}
.play::before { content: ""; position: absolute; left: 24px; top: 19px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.video-text { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; }
.video-text strong { color: var(--text); font-weight: 550; font-size: 1.05rem; }

/* ---------- Kontakt ---------- */

.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.kontakt h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 0.8rem; }
.kontaktwege dl div { padding: 16px 0; border-bottom: 1px solid var(--rand); }
.kontaktwege dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.kontaktwege dd { margin-top: 4px; color: var(--text); }
.kontaktwege dd a { text-underline-offset: 3px; }
.karte--klein { padding: 24px; margin-top: 16px; }
.karte--klein .knopf { margin-top: 16px; }
.formular { padding: clamp(24px, 3.5vw, 40px); }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.feld span { font-size: 0.85rem; color: var(--text-2); }
.feld input, .feld textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rand-2); border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(91, 217, 193, 0.22); }
.formular .knopf { width: 100%; justify-content: center; margin: 6px 0 14px; }
.formular .klein { margin: 0; }

/* ---------- Demo: Website-Feld (erster Bildschirm) und Bühne auf assistent.html ---------- */

.held-demo { width: min(640px, 100%); margin: 34px auto 0; }
.held-feld {
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 20px; border-radius: 999px;
  border: 1px solid var(--rand-2); background: rgba(8, 12, 20, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 70px -34px rgba(91, 217, 193, 0.45);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.held-feld:focus-within { border-color: rgba(91, 217, 193, 0.65); box-shadow: 0 0 0 4px rgba(91, 217, 193, 0.14), 0 30px 70px -34px rgba(91, 217, 193, 0.6); }
.held-feld > .ikon { width: 20px; height: 20px; color: var(--text-3); }
.held-feld input { flex: 1; min-width: 0; padding: 11px 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.05rem; outline: none; }
.held-feld input::placeholder { color: var(--text-3); }
.held-feld .knopf { flex: none; }
.hinweis-trenner { margin: 0 0.7em; color: var(--text-3); }
@media (max-width: 560px) {
  .held-feld { flex-wrap: wrap; border-radius: 22px; padding: 8px 8px 8px 16px; }
  .held-feld .knopf { width: 100%; justify-content: center; }
}

.assistent { position: relative; overflow: hidden; min-height: 100vh; padding: calc(var(--kopfhoehe, 72px) + 56px) 0 96px; }
/* Kompakter Kopf: die Bühne soll im ersten Bildschirm liegen */
.assistent h1 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem); }
.assistent .lead { margin-top: 14px; max-width: 46ch; }
.erzeuger { margin-top: 26px; display: grid; justify-items: center; gap: 22px; }
.erzeuger [hidden] { display: none !important; }
.js .demo-ohne-js { display: none; }
.demo-ohne-js { margin: 0; color: var(--text-2); text-align: center; }
.demo-ohne-js a { color: var(--mint); white-space: nowrap; }
.erzeuger-raum { position: relative; display: grid; place-items: center; width: min(440px, 84vw, 50vh); min-width: 260px; aspect-ratio: 1; }
.kugel--erzeuger {
  --kraft: 0; width: 44%; z-index: 2;
  box-shadow: 0 50px 100px -40px rgba(91, 217, 193, calc(0.3 + var(--kraft) * 0.4)),
              0 0 calc(var(--kraft) * 90px) rgba(91, 217, 193, calc(var(--kraft) * 0.3)),
              0 0 0 10px rgba(255, 255, 255, 0.012);
  transition: box-shadow 0.7s var(--weich);
}
.kranz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--mint); }
.kranz g:nth-child(3n) rect { fill: var(--stahl); }
.kranz rect { transform-box: fill-box; transform-origin: 50% 100%; scale: 1 0; opacity: 0.85; transition: scale 0.7s var(--weich); transition-delay: calc(var(--i, 0) * 9ms); }
.erzeuger.klingt .kranz rect { scale: 1 1; }
.fortschritt { position: absolute; inset: 8%; width: 84%; height: 84%; rotate: -90deg; overflow: visible; }
.fortschritt circle { fill: none; stroke-linecap: round; }
.fortschritt-spur { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.fortschritt-bogen {
  stroke: var(--mint); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  filter: drop-shadow(0 0 6px rgba(91, 217, 193, 0.7)); transition: stroke-dashoffset 0.8s var(--weich);
}
.erzeuger.sucht .fortschritt-bogen { stroke-dasharray: 16 84; stroke-dashoffset: 0; }
.erzeuger.klingt .fortschritt, .erzeuger.ruft .fortschritt { opacity: 0; transition: opacity 0.6s; }
.chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chip {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; opacity: 0;
  padding: 8px 15px; border-radius: 999px; font-size: 0.86rem; color: var(--text);
  background: rgba(12, 18, 30, 0.9); border: 1px solid rgba(91, 217, 193, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}
.anrufring { position: absolute; inset: 28%; border-radius: 50%; border: 1px solid rgba(91, 217, 193, 0.55); opacity: 0; }
.erzeuger-status { margin: 0; min-height: 1.6em; text-align: center; font-size: 1.08rem; color: var(--text-2); }
.erzeuger-status strong { color: var(--text); font-weight: 600; }
.erzeuger-form { width: min(640px, 100%); display: grid; gap: 14px; }
.erzeuger-satz { margin: 0; text-align: center; color: var(--text-2); }
.erzeuger-wahl { width: min(640px, 100%); display: grid; gap: 16px; }
.wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wahl-karte {
  display: grid; gap: 6px; padding: 20px 22px; border-radius: 18px; text-align: left; cursor: pointer;
  color: var(--text-2); font: inherit; font-size: 0.92rem; border: 1px solid var(--rand-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: border-color 0.25s, background-color 0.25s, transform 0.25s var(--weich);
}
.wahl-karte strong { color: var(--text); font-size: 1.08rem; font-weight: 600; }
.wahl-karte:hover, .wahl-karte:focus-visible { border-color: rgba(91, 217, 193, 0.65); transform: translateY(-2px); outline: none; }
.erzeuger-gewaehlt { margin: -4px 0 0; text-align: center; color: var(--text-3); font-size: 0.9rem; }
.erzeuger-gewaehlt strong { color: var(--text); font-weight: 600; }
.erzeuger-link { margin-left: 0.6em; padding: 0; border: 0; background: none; color: var(--mint); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 560px) { .wahl { grid-template-columns: minmax(0, 1fr); } }
.erzeuger-fertig { display: grid; justify-items: center; gap: 14px; max-width: 520px; text-align: center; color: var(--text-2); }
.erzeuger-fertig p { margin: 0; }
.demo-einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; color: var(--text-2); cursor: pointer; text-align: left; }
.demo-einwilligung input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mint); }
.demo-einwilligung a { color: var(--mint); }
.demo-fehler { margin: 0; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 129, 137, 0.4); background: rgba(255, 129, 137, 0.08); color: #ffc4c8; text-align: center; }

/* ---------- Recht ---------- */

.rechtstext { max-width: 72ch; margin-inline: auto; }
.rechtstext h2 { font-size: 1.5rem; margin: 2.2em 0 0.6em; letter-spacing: -0.015em; }
.rechtstext h3 { margin: 1.6em 0 0.5em; }
.rechtstext a { color: var(--mint); overflow-wrap: anywhere; }
.rechtstext ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }

/* ---------- Fuss ---------- */

.fuss { position: relative; overflow-x: clip; }
.fuss-buehne { position: relative; height: clamp(220px, 30vw, 400px); display: grid; place-items: end center; }
.fuss-v {
  position: relative; z-index: 1; width: clamp(170px, 24vw, 330px); aspect-ratio: 138 / 128; margin-bottom: clamp(40px, 6vw, 80px);
  background: linear-gradient(180deg, #ffffff 0%, var(--mint) 45%, var(--stahl) 80%, rgba(132, 168, 204, 0.2) 100%);
  -webkit-mask: url("../img/vivyt-signet-gross.png") center / contain no-repeat;
  mask: url("../img/vivyt-signet-gross.png") center / contain no-repeat;
}
.fuss .rahmen { padding-top: 56px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss-marke img { height: 34px; width: auto; margin-bottom: 18px; }
.fuss-marke p { max-width: 38ch; font-size: 0.95rem; }
.fuss-h { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.fuss-h ~ .fuss-h { margin-top: 28px; }
.fuss ul li { padding: 4px 0; font-size: 0.95rem; }
.fuss a { text-decoration: none; transition: color 0.2s; }
.fuss a:hover { color: var(--text); }
.fuss-leiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 56px; padding: 24px 0 40px; border-top: 1px solid var(--rand); font-size: 0.85rem; color: var(--text-3);
}
.fuss-leiste span:last-child { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------- Bewegung (aus v4 übernommen, 19.10.2026) ----------
   Einzelne Elemente: data-auf="links|rechts|hoch|pop|kipp|zoom|weich".
   Container: data-auf-kinder="links|pop|mix|hoch" ziehen ihre Kinder gestaffelt nach.
   Kinder bewegen sich über translate/scale/rotate, damit sie das transform von
   data-kippen nicht überschreiben; data-auf selbst nutzt transform und steht darum nie
   auf einem Element mit data-kippen. Ohne Wunsch nach Bewegung bleibt der Endzustand. */

/* Klangfeld */
.klangfeld {
  position: absolute; left: 0; right: 0; top: 0; height: min(100%, 900px); width: 100%; z-index: 0; pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 92%);
}
.schluss .klangfeld { top: auto; bottom: 0; opacity: 0.4; }

/* Kopf weicht beim Runterscrollen aus */
.kopf { transition: translate 0.4s var(--weich); }
.kopf.weg { translate: 0 -110%; }

/* Karten neigen sich zur Maus, ein Lichtfleck folgt ihr */
[data-kippen] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--hoch, 0px));
  transition: transform 0.5s var(--weich), border-color 0.3s, box-shadow 0.5s var(--weich);
}
[data-kippen]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 217, 193, 0.14), transparent 45%);
}
[data-kippen]:hover { --hoch: -4px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8), 0 0 50px -24px rgba(91, 217, 193, 0.5); }
[data-kippen]:hover::after { opacity: 1; }
.video { position: relative; }

/* Preiskarten: beim Überfahren läuft ein Rand in den Logofarben um */
@property --winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.paket::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--winkel), var(--mint), var(--stahl), var(--petrol), rgba(91, 217, 193, 0.15), var(--mint));
  -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);
  transition: opacity 0.4s var(--weich);
}
.paket:hover::before, .paket:focus-within::before { opacity: 1; }

/* Laufband der Branchen */
.laufband {
  display: flex; overflow: hidden; padding-block: 26px; border-block: 1px solid var(--rand);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.laufband ul { display: flex; flex: none; gap: 48px; padding-right: 48px; }
.laufband li {
  display: flex; align-items: center; gap: 48px; white-space: nowrap;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); font-weight: 450; letter-spacing: -0.02em; color: var(--text-2);
}
.laufband li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

/* Orbit der Systeme um das Signet */
.orbit { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 0.72; margin-inline: auto; perspective: 1100px; container-type: inline-size; }
.orbit-ebene { position: absolute; left: 0; right: 0; top: 50%; height: 100cqi; translate: 0 -50%; transform-style: preserve-3d; transform: rotateX(62deg); }
.bahn { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); }
.bahn--1 { inset: 4%; box-shadow: 0 0 60px rgba(91, 217, 193, 0.14) inset; }
.bahn--2 { inset: 26%; border-style: dashed; border-color: rgba(91, 217, 193, 0.34); }
.orbit-ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.knoten { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--w)) translateX(46cqi) rotateZ(calc(-1 * var(--w))); }
.knoten span {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; transform: rotateX(-62deg);
  padding: 7px 13px; border-radius: 999px; font-weight: 500; font-size: 0.82rem; color: var(--text);
  background: rgba(14, 20, 32, 0.85); border: 1px solid var(--rand-2); backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.7);
}
.k0 { --w: 0deg; } .k1 { --w: 40deg; } .k2 { --w: 80deg; } .k3 { --w: 120deg; } .k4 { --w: 160deg; }
.k5 { --w: 200deg; } .k6 { --w: 240deg; } .k7 { --w: 280deg; } .k8 { --w: 320deg; }
.orbit .kugel { position: absolute; left: 50%; top: 50%; width: 30cqi; max-width: 170px; translate: -50% -50%; }
.anbindung-feld { padding: 32px 16px; }

/* Ringe um den Hörer: Inbound läuft hinein, Outbound hinaus */
.ring {
  position: absolute; left: 50%; top: calc(50% - 17px); width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; border: 1px solid rgba(var(--l1), 0.45); opacity: 0;
}

/* Zeitleiste der Schritte */
.js [data-fortschritt] li::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--weich); }
.js [data-fortschritt] li.an::before { transform: none; }
.js [data-fortschritt] .nr { transition: color 0.4s, text-shadow 0.4s; color: var(--text-3); }
.js [data-fortschritt] li.an .nr { color: var(--mint); text-shadow: 0 0 12px rgba(91, 217, 193, 0.8); }

.knopf .ikon--fest { transform-origin: 50% 50%; }
.fuss ul a { display: inline-block; transition: color 0.2s, translate 0.3s var(--weich); }
.fuss ul a:hover { translate: 4px 0; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-auf] { opacity: 0; transition: opacity 0.85s var(--weich), transform 0.85s var(--weich), filter 0.85s var(--weich); }
  .js [data-auf="links"]  { transform: translateX(-80px) rotate(-1deg); }
  .js [data-auf="rechts"] { transform: translateX(80px) rotate(1deg); }
  .js [data-auf="hoch"]   { transform: translateY(56px); }
  .js [data-auf="pop"]    { transform: scale(0.7) translateY(14px); transform-origin: center top; }
  .js [data-auf="kipp"]   { transform: perspective(900px) rotateX(-22deg) translateY(44px); transform-origin: center top; transition-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  .js [data-auf="zoom"]   { transform: scale(0.82) rotate(-4deg); }
  .js [data-auf="weich"]  { filter: blur(14px); transform: translateY(28px) scale(1.04); }
  .js [data-auf].da { opacity: 1; transform: none; filter: none; }

  .js [data-auf-kinder] > * { opacity: 0; translate: 0 40px; transition: opacity 0.72s var(--weich), translate 0.72s var(--weich), scale 0.72s var(--weich), rotate 0.72s var(--weich), transform 0.5s var(--weich), box-shadow 0.5s var(--weich), border-color 0.3s; }
  .js [data-auf-kinder="links"] > * { translate: -60px 0; }
  .js [data-auf-kinder="pop"] > * { translate: 0 24px; scale: 0.74; transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  .js [data-auf-kinder="mix"] > *:nth-child(3n + 1) { translate: -72px 0; rotate: -1.5deg; }
  .js [data-auf-kinder="mix"] > *:nth-child(3n + 2) { translate: 0 20px; scale: 0.72; transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  .js [data-auf-kinder="mix"] > *:nth-child(3n + 3) { translate: 72px 0; rotate: 1.5deg; }
  .js [data-auf-kinder].da > * { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
  .js [data-auf-kinder].da > :nth-child(2) { transition-delay: 0.07s; }
  .js [data-auf-kinder].da > :nth-child(3) { transition-delay: 0.14s; }
  .js [data-auf-kinder].da > :nth-child(4) { transition-delay: 0.21s; }
  .js [data-auf-kinder].da > :nth-child(5) { transition-delay: 0.28s; }
  .js [data-auf-kinder].da > :nth-child(6) { transition-delay: 0.35s; }
  .js [data-auf-kinder].da > :nth-child(7) { transition-delay: 0.42s; }
  .js [data-auf-kinder].da > :nth-child(8) { transition-delay: 0.49s; }
  .js [data-auf-kinder].da > :nth-child(n + 9) { transition-delay: 0.56s; }
  .js [data-auf-kinder].da > [data-kippen]:hover { transition-delay: 0s; }

  /* Beim Laden: die Überschrift Wort für Wort, danach der Rest des ersten Bildschirms */
  .wort { display: inline-block; animation: wortrein 0.7s var(--weich) both; animation-delay: calc(0.06s + var(--i, 0) * 0.045s); }
  .held .mitte > :not(h1), .seitenkopf .mitte > :not(h1) { animation: auftauchen 0.75s var(--weich) both; animation-delay: 0.45s; }
  .held .badge, .seitenkopf .braue { animation-delay: 0s !important; }
  .held .buehne { animation: auftauchen 1s var(--weich) 0.3s both; }
  .faq details[open] .faq-a { animation: klappauf 0.35s var(--weich) both; }

  /* Konsole: Wellenform pulsiert, das Gespräch läuft ab */
  /* Jeder Balken eine eigene Phase (Verzögerung setzt site.js), so läuft eine Welle durch statt Gruppen zu springen */
  .welle--anruf rect, .welle--klein rect, .welle--demo rect { transform-box: fill-box; transform-origin: center; animation: puls 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  .js .konsole.laeuft .msg { transition: opacity 0.5s var(--weich), transform 0.5s var(--weich); }
  .js .konsole.laeuft .msg:not(.zeigen) { opacity: 0; transform: translateY(10px) scale(0.97); }
  .live { animation: live 1.6s ease-in-out infinite; }
  .erzeuger.sucht .fortschritt { animation: suchen 1.1s linear infinite; }
  .erzeuger.klingt .kranz rect { animation: puls 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  .erzeuger.ruft .anrufring { animation: raus 2.6s var(--weich) infinite; }
  .erzeuger.ruft .anrufring:nth-child(2) { animation-delay: 0.85s; }
  .erzeuger.ruft .anrufring:nth-child(3) { animation-delay: 1.7s; }

  /* Kanäle */
  .bild--rein .ring { animation: rein 3.6s var(--weich) infinite; }
  .bild--raus .ring { animation: raus 3.6s var(--weich) infinite; }
  .bild .ring:nth-child(2) { animation-delay: 1.2s; }
  .bild .ring:nth-child(3) { animation-delay: 2.4s; }
  .bild--chat .b { animation: blase 4.5s var(--weich) infinite both; }
  .bild--chat .b2 { animation-delay: 0.6s; }
  .bild--chat .b3 { animation-delay: 1.2s; }
  .b3 i { animation: tippen 1.2s ease-in-out infinite; }
  .b3 i:nth-child(2) { animation-delay: 0.15s; }
  .b3 i:nth-child(3) { animation-delay: 0.3s; }

  .paket:hover::before, .paket:focus-within::before { animation: umlauf 3.2s linear infinite; }
  .laufband ul { animation: lauf 48s linear infinite; }
  .laufband:hover ul { animation-play-state: paused; }
  .orbit-ring { animation: drehen 60s linear infinite; }
  .knoten span { animation: gegen 60s linear infinite; }
  .knopf:hover .ikon--fest { animation: klingeln 0.6s var(--weich); }
}
@media (prefers-reduced-motion: reduce) {
  .laufband { overflow-x: auto; }
  .laufband ul[aria-hidden] { display: none; }
}
@keyframes wortrein { from { opacity: 0; transform: translateY(0.42em) rotate(1.2deg); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(16px); } }
@keyframes klappauf { from { opacity: 0; transform: translateY(-6px); } }
@keyframes puls { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes live { 50% { box-shadow: 0 0 0 8px rgba(91, 217, 193, 0.05), 0 0 18px var(--mint); } }
@keyframes rein { 0% { transform: scale(2); opacity: 0; } 40% { opacity: 0.6; } 100% { transform: scale(0.95); opacity: 0; } }
@keyframes raus { 0% { transform: scale(0.95); opacity: 0.6; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes blase { 0%, 8% { opacity: 0; transform: translateY(8px) scale(0.9); } 18%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes tippen { 50% { translate: 0 -3px; opacity: 1; } }
@keyframes umlauf { to { --winkel: 360deg; } }
@keyframes lauf { to { transform: translateX(-100%); } }
@keyframes drehen { to { transform: rotateZ(360deg); } }
@keyframes gegen { from { transform: rotateZ(0deg) rotateX(-62deg); } to { transform: rotateZ(-360deg) rotateX(-62deg); } }
@keyframes suchen { from { rotate: -90deg; } to { rotate: 270deg; } }
@keyframes klingeln { 20% { transform: rotate(-13deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }

/* ---------- Breiten ---------- */

@media (max-width: 1080px) {
  .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .karte, .bento .karte--breit { grid-column: auto; }
  .bento .karte--aufruf { grid-column: 1 / -1; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .kopf-innen { grid-template-columns: 1fr auto auto; gap: 10px; }
  .menu { display: block; position: relative; }
  .menu summary {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; cursor: pointer; list-style: none;
    border: 1px solid var(--rand-2); border-radius: 50%; background: rgba(12, 16, 26, 0.6); backdrop-filter: blur(14px);
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary span { display: block; width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: translate 0.25s, rotate 0.25s; }
  .menu[open] summary span:first-child { translate: 0 3.75px; rotate: 45deg; }
  .menu[open] summary span:last-child { translate: 0 -3.75px; rotate: -45deg; }
  .menu-liste {
    position: fixed; top: 76px; left: 16px; right: 16px; display: flex; flex-direction: column; padding: 8px;
    border: 1px solid var(--rand-2); border-radius: 20px; background: rgba(9, 13, 22, 0.97); backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  }
  .menu-liste a { padding: 14px 16px; border-radius: 12px; color: var(--text); text-decoration: none; font-size: 1.05rem; }
  .menu-liste a[aria-current] { background: rgba(255, 255, 255, 0.07); }
  .menu-liste .menu-ivi { color: var(--mint); }
  .kopfzeile { grid-template-columns: 1fr; }
  .kopfzeile-satz { justify-self: start; }
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zwei, .anbindung, .paneel, .kontakt, .aussage-raster { grid-template-columns: 1fr; gap: 40px; }
  .konsole-raster { grid-template-columns: 1fr; }
  .konsole-seite { border-left: 0; border-top: 1px solid var(--rand); }
  .faq, .videos { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .horizont { --form: 2.5 / 1; }  /* sonst ist die Scheibe zu dünn und das Licht fällt darunter durch */
  .rahmen { width: min(100% - 32px, 1200px); }
  main > section.held { padding-top: 128px; }
  .konsole { border-radius: 18px; }
  .konsole-gespraech, .konsole-seite { padding: 18px; }
  .konsole-leiste { padding: 12px 16px; }
  .konsole-titel { font-size: 0.8rem; }
  .horizont--held { --strahl: 820px; }
  .horizont--held::before { opacity: 0.85; }
  .buehne { margin-top: 120px; }
  .held .knoepfe .knopf, .schluss .knoepfe .knopf { width: 100%; justify-content: center; }
  .bento, .raster-3, .raster-4, .schritte, .schritte--2, .pakete, .bereiche, .felder { grid-template-columns: 1fr; }
  .bento .karte--aufruf { grid-column: auto; }
  .bild { height: 200px; }
  .konsole-seite { display: none; }
  .hinweis-nr { display: none; }
  .zahl { padding: 22px 18px; }
  .kopfzeile { margin-bottom: 36px; padding-bottom: 24px; }
  .paket-text { min-height: 0; }
  .reiter { width: 100%; }
  .reiter button { flex: 1; padding: 10px 12px; }
  .kopf-cta { padding-inline: 0.85em; }
  .seitenkopf { padding: 140px 0 150px !important; }
}

@media (max-width: 350px) {
  .knopf-nr { display: none; }
}

@media (max-width: 380px) {
  .zahl-wert { font-size: 2rem; }
  .kopf-cta .ikon { display: none; }
}