@import url('../fonts/fonts.css');

/* ==========================================================================
   NUVORA — Gestaltungssystem „Nachtglas"
   Nahschwarz als Grundfläche, Porzellan als Schrift, ein einziges kaltes Licht.
   Flächen sind Glasbühnen: Haarlinie, sehr flache Wölbung, Licht folgt dem Zeiger.
   Abschnittsköpfe stehen immer links, nie mittig.
   ========================================================================== */

/* --------------------------------------------------------------- Grundwerte */
:root {
  /* Flächen */
  --nacht:        #06070b;
  --nacht-2:      #090b11;
  --buehne:       #0c0f17;
  --buehne-2:     #11151f;
  --erhoben:      #161b27;

  /* Schrift */
  --porzellan:    #f2f4f8;
  --porzellan-2:  #c4cbdb;
  --dunst:        #8b93a8;
  --dunst-2:      #747c90;

  /* Linien */
  --linie:        rgba(242, 244, 248, .085);
  --linie-2:      rgba(242, 244, 248, .16);
  --linie-3:      rgba(242, 244, 248, .28);

  /* Licht */
  --signal:       #a6bcff;
  --signal-hell:  #cfdaff;
  --signal-tief:  #4d6cf5;
  --kalt:         #52e6d2;
  --warn:         #ffb457;

  /* Hellfläche (umgekehrter Abschnitt) */
  --hell:         #f2f4f8;
  --hell-2:       #e4e8f0;
  --hell-schrift: #0a0c12;
  --hell-dunst:   #5b6478;
  --hell-linie:   rgba(10, 12, 18, .12);

  /* Maße */
  --breite:       1320px;
  --breite-eng:   860px;
  --rand:         clamp(20px, 5vw, 64px);
  --radius:       18px;
  --radius-s:     10px;
  --radius-l:     26px;

  /* Bewegung */
  --weich:        380ms cubic-bezier(.2, .7, .2, 1);
  --schnell:      180ms cubic-bezier(.3, .7, .2, 1);

  /* Schriftfamilien */
  --satz: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --kursiv: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  color-scheme: dark;
}

/* --------------------------------------------------------------- Rücksetzung */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--porzellan-2);
  font-family: var(--satz);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  color: var(--porzellan);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

hr {
  border: 0;
  height: 1px;
  background: var(--linie);
  margin: 0;
}

::selection { background: var(--signal); color: #05060a; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------- Feines Rasterlicht
   Ein sehr schwaches senkrechtes Raster über der ganzen Seite. Gibt der
   Fläche Maß, ohne als Muster aufzufallen. */
.raster {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(242, 244, 248, .022) 0 1px,
      transparent 1px 25%);
  background-size: 100% 100%;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.15) 55%, transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.15) 55%, transparent);
}

/* ------------------------------------------------------------- Grundgerüst */
.huelle { position: relative; z-index: 1; }

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

.bahn-eng { max-width: calc(var(--breite-eng) + 2 * var(--rand)); }

section { position: relative; }

.feld { padding-block: clamp(72px, 10vw, 148px); }
.feld-schmal { padding-block: clamp(52px, 7vw, 96px); }

.feld + .feld { padding-top: 0; }

/* Trennung zwischen Abschnitten: eine Haarlinie, die nicht ganz durchläuft */
.saum { position: relative; }
.saum::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--rand);
  right: var(--rand);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linie-2) 12%, var(--linie-2) 88%, transparent);
}

/* ------------------------------------------------------------ Schriftgrade */
.riese {
  font-size: clamp(2.5rem, 5.5vw, 5.4rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--porzellan);
}

.gross {
  font-size: clamp(1.95rem, 4.1vw, 3.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.036em;
}

.mittel {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.16;
}

.klein-titel {
  font-size: 1.075rem;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.3;
  color: var(--porzellan);
}

.vorlauf {
  font-size: clamp(1.075rem, 1.55vw, 1.3rem);
  line-height: 1.58;
  font-weight: 350;
  color: var(--porzellan-2);
  letter-spacing: -.012em;
}

.text-dunst { color: var(--dunst); }
.klein { font-size: .935rem; line-height: 1.6; }
.winzig { font-size: .82rem; line-height: 1.55; letter-spacing: .002em; }

.kursiv {
  font-family: var(--kursiv);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

.licht-schrift {
  background: linear-gradient(96deg, var(--porzellan) 18%, var(--signal-hell) 52%, var(--kalt) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- Kapitelmarke
   Abschnittskopf: Marke mit vorangestellter Haarlinie, danach die Überschrift.
   Immer links, nie mittig. */
.marke {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 22px;
}
.marke::before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .65;
  flex: none;
}
.marke--hell { color: #405ff1; }   /* auf Porzellan: 4.62:1 statt 3.99:1 */

.kapitel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
@media (min-width: 940px) {
  .kapitel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
  }
  .kapitel__zusatz { padding-bottom: .35em; }
}

/* ------------------------------------------------------------------ Knöpfe */
/* Der Hauptknopf trägt einen kalten Verlauf, der beim Überfahren durchläuft.
   Fläche und Schein hängen an Variablen, damit die helle Umkehrfläche und die
   Linienfassung dieselbe Grundform mit anderen Werten benutzen können. */
.knopf {
  --k-bg: #c6d8ff;
  --k-verlauf: linear-gradient(104deg,
      #eef2ff 0%, #c2d0ff 26%, #9dc4f7 48%, #74ded4 74%, #d4f7ef 100%);
  --k-schrift: #05070d;
  --k-schein: 0 14px 36px -16px rgba(116, 172, 255, .75);
  --k-schein-hoch: 0 22px 48px -16px rgba(116, 190, 255, .95);
  --k-kante: rgba(255, 255, 255, .85);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--k-bg);
  background-image: var(--k-verlauf);
  background-size: 158% 100%;
  background-position: 8% 50%;
  color: var(--k-schrift);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.012em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--schnell),
              box-shadow var(--weich),
              background-position 780ms cubic-bezier(.2, .7, .2, 1),
              background-color var(--weich),
              border-color var(--weich),
              color var(--weich);
  box-shadow: inset 0 1px 0 var(--k-kante), var(--k-schein);
  overflow: hidden;
}
.knopf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.knopf:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: inset 0 1px 0 var(--k-kante), var(--k-schein-hoch);
}
.knopf:hover::after { transform: translateX(120%); }
.knopf:active { transform: translateY(0); }

.knopf__pfeil {
  width: 15px; height: 15px;
  flex: none;
  transition: transform var(--weich);
}
.knopf:hover .knopf__pfeil { transform: translateX(4px); }

/* Die Linienfassung bekommt beim Überfahren einen Verlaufsrand statt einer
   einfarbigen Linie – dieselbe Maskentechnik wie beim Randlicht der Tafeln. */
.knopf--linie {
  --k-bg: rgba(242, 244, 248, .015);
  --k-verlauf: none;
  --k-schrift: var(--porzellan);
  --k-schein: 0 0 0 rgba(0, 0, 0, 0);
  --k-schein-hoch: 0 16px 38px -22px rgba(166, 188, 255, .6);
  --k-kante: rgba(255, 255, 255, .07);
  border-color: var(--linie-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.knopf--linie::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(104deg, rgba(166, 188, 255, .95), rgba(82, 230, 210, .75));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--weich);
  pointer-events: none;
}
.knopf--linie:hover::before { opacity: 1; }
.knopf--linie::after { background: linear-gradient(100deg, transparent 20%, rgba(166,188,255,.16) 50%, transparent 80%); }
.knopf--linie:hover {
  border-color: transparent;
  background-color: rgba(242, 244, 248, .06);
}

.knopf--dunkel {
  --k-bg: #0a0c12;
  --k-verlauf: linear-gradient(104deg, #141b30 0%, #0a0c12 46%, #0e2036 100%);
  --k-schrift: var(--porzellan);
  --k-kante: rgba(255, 255, 255, .09);
  --k-schein: 0 12px 30px -18px rgba(10, 12, 18, .9);
  --k-schein-hoch: 0 20px 42px -18px rgba(10, 12, 18, 1);
}

.knopf--klein { padding: 10px 18px; font-size: .875rem; }
.knopf--breit { width: 100%; }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Textlink mit unterlegter Linie, die beim Zeigen durchläuft */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: .95rem;
  color: var(--porzellan);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--weich), color var(--weich);
}
.pfeil-link:hover { background-size: 100% 1px; color: var(--signal-hell); }
.pfeil-link svg { width: 14px; height: 14px; flex: none; transition: transform var(--weich); }
.pfeil-link:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------- Glasbühnen
   Grundelement der Seite. Haarlinie, flache Wölbung, oben ein Lichtsaum.
   Das Licht folgt dem Zeiger über --mx / --my (siehe nuvora.js). */
.buehne {
  position: relative;
  background:
    linear-gradient(180deg, var(--buehne) 0%, var(--nacht-2) 100%);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.buehne::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(166,188,255,.13), transparent 62%);
  opacity: 0;
  transition: opacity var(--weich);
  pointer-events: none;
  z-index: 0;
}
.buehne:hover::before { opacity: 1; }
.buehne::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,244,248,.24), transparent);
  pointer-events: none;
  z-index: 1;
}
.buehne > * { position: relative; z-index: 2; }

.buehne--still::before { display: none; }
.buehne--gross { border-radius: var(--radius-l); }
.buehne__innen { padding: clamp(22px, 3.2vw, 40px); }

/* Karte mit Lichtsaum am oberen Rand, ohne Zeigerlicht */
.tafel {
  background: linear-gradient(180deg, rgba(242,244,248,.045), rgba(242,244,248,.012));
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px);
  transition: border-color var(--weich), transform var(--weich), background var(--weich);
}
.tafel:hover { border-color: var(--linie-2); transform: translateY(-3px); }

/* ------------------------------------------------------------------- Kopf */
.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  transition: background var(--weich), border-color var(--weich), backdrop-filter var(--weich);
  border-bottom: 1px solid transparent;
}
.kopf[data-gescrollt='ja'] {
  background: rgba(6, 7, 11, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--linie);
}

.kopf__bahn {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 74px;
}

.wortmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--porzellan);
  flex: none;
}
.wortmarke__zeichen { width: 27px; height: 27px; align-self: center; flex: none; }
/* Derselbe Schnitt wie der große Schriftzug im Fuß: enges Kerning,
   Gewicht 800 – nur eben klein. */
.wortmarke__wort {
  font-size: clamp(1.42rem, 1.7vw, 1.62rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  text-transform: uppercase;
}
.wortmarke__zusatz {
  font-family: var(--kursiv);
  font-style: italic;
  font-size: .875rem;
  color: var(--dunst);
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 1099px) { .wortmarke__zusatz { display: none; } }

.kopf__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
@media (max-width: 979px) { .kopf__nav { display: none; } }

.kopf__link {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .925rem;
  font-weight: 550;
  color: var(--dunst);
  text-decoration: none;
  transition: color var(--schnell), background var(--schnell);
}
.kopf__link:hover { color: var(--porzellan); background: rgba(242,244,248,.05); }
.kopf__link[aria-current='page'] { color: var(--porzellan); }
.kopf__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1px;
  background: var(--signal);
}

.kopf__aktion { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 979px) { .kopf__aktion .knopf { display: none; } }

/* Schalter für das Menü auf kleinen Geräten */
.menue-schalter {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie-2);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
@media (max-width: 979px) { .menue-schalter { display: inline-flex; } }
.menue-schalter__strich {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: var(--porzellan);
  transition: background var(--schnell);
}
.menue-schalter__strich::before,
.menue-schalter__strich::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--porzellan);
  transition: transform var(--weich);
}
.menue-schalter__strich::before { top: -6px; }
.menue-schalter__strich::after { top: 6px; }
.menue-schalter[aria-expanded='true'] .menue-schalter__strich { background: transparent; }
.menue-schalter[aria-expanded='true'] .menue-schalter__strich::before { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded='true'] .menue-schalter__strich::after { transform: translateY(-6px) rotate(-45deg); }

/* Menütafel auf kleinen Geräten */
.menue {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(6, 7, 11, .96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 96px var(--rand) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--weich), visibility var(--weich);
}
.menue[data-offen='ja'] { opacity: 1; visibility: visible; }
.menue__liste { list-style: none; display: grid; gap: 2px; }
.menue__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--linie);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--porzellan);
  text-decoration: none;
}
.menue__link span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--dunst-2);
}
.menue__link:hover { color: var(--signal-hell); }
.menue__fuss { margin-top: 32px; display: grid; gap: 14px; }

.sprung {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--porzellan);
  color: #06070b;
  font-weight: 700;
  text-decoration: none;
}
.sprung:focus { left: 12px; }

/* ============================================================== Kopfbereich
   Zwei ungleiche Spalten. Links der Satz, rechts ein laufendes Gerät.
   Dahinter die Blende: eine einzige kalte Lichtquelle. */
.auftakt {
  position: relative;
  padding-top: clamp(100px, 11.5vw, 148px);
  padding-bottom: clamp(52px, 6.5vw, 88px);
  overflow: hidden;
}

.blende {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: -32%;
  left: 50%;
  width: min(1500px, 145vw);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(77, 108, 245, .20), transparent 70%),
    radial-gradient(closest-side at 62% 46%, rgba(82, 230, 210, .10), transparent 62%);
  filter: blur(18px);
  opacity: .95;
  animation: atmen 14s ease-in-out infinite;
}
.blende--klein { top: -60%; width: min(1050px, 120vw); opacity: .6; }

@keyframes atmen {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; }
  50%      { transform: translateX(-50%) scale(1.07); opacity: 1; }
}

/* Ein feiner Lichtbogen unter der Blende */
.bogen {
  position: absolute;
  z-index: 0;
  top: 46px;
  left: 50%;
  width: min(1180px, 118vw);
  height: 520px;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 1px solid rgba(166, 188, 255, .30);
  mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
  pointer-events: none;
}

.registerblatt__raster > *,
.kapitel > *,
.raster-2 > *,
.raster-3 > *,
.zwei > *,
.hellfeld__raster > *,
.preisfeld > * { min-width: 0; }

/* Der Kopfbereich trägt nur noch den Satz. Ohne zweite Spalte darf die
   Überschrift größer werden und über die volle Bahn laufen. */
.auftakt__satz {
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

/* Schriftzug über der Überschrift — gleiche Schrift, gleiche Farbe und
   derselbe Verlauf wie der große Zug im Fuß, nur kleiner. */
.auftakt__wort {
  font-size: clamp(2.9rem, 9.6vw, 8.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .86;
  margin: 0 0 clamp(16px, 2vw, 30px);
  color: transparent;
  background: linear-gradient(166deg,
      rgba(126, 158, 255, .36) 0%,
      rgba(96, 200, 236, .30) 34%,
      rgba(74, 224, 206, .26) 62%,
      rgba(242, 244, 248, .13) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  white-space: nowrap;
  /* Der Kasten legt sich um die Buchstaben statt um die ganze Spalte — sonst
     liefe der Lichtstreifen die halbe Zeit über leere Fläche. Die Schrift
     selbst rückt dadurch nicht, sie steht ohnehin links. */
  width: max-content;
  max-width: 100%;
}
.auftakt__satz .riese {
  font-size: clamp(2.7rem, 6.3vw, 6.1rem);
  margin-bottom: calc(28px - .21em);
}
.auftakt__satz .vorlauf { max-width: 62ch; margin-bottom: 34px; }

.losung {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  padding: 7px 8px 7px 16px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: rgba(242, 244, 248, .035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .8rem;
  font-weight: 600;
  color: var(--porzellan-2);
  letter-spacing: -.005em;
  padding-right: 18px;
  max-width: 100%;
}
@media (min-width: 560px) { .losung { white-space: nowrap; } }
.losung__punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kalt);
  box-shadow: 0 0 0 4px rgba(82, 230, 210, .16);
  flex: none;
}
.losung__marke {
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(242, 244, 248, .07);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dunst);
}

.beleg-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 30px;
  font-size: .845rem;
  color: var(--dunst);
}
.beleg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.beleg svg { width: 14px; height: 14px; color: var(--kalt); flex: none; }

/* --------------------------------------------------- Gerät im Kopfbereich */
.geraet {
  position: relative;
  max-width: 100%;
  border-radius: var(--radius-l);
  border: 1px solid var(--linie-2);
  background: linear-gradient(180deg, #12161f, #0a0c12);
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 60px 120px -50px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.5);
}
.geraet::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(166,188,255,.42), transparent 38%, transparent 62%, rgba(82,230,210,.26));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
}
.leiste__punkte { display: flex; gap: 6px; flex: none; }
.leiste__punkt { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,244,248,.16); }
.leiste__adresse {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(242,244,248,.055);
  border: 1px solid var(--linie);
  font-size: .74rem;
  color: var(--dunst);
  letter-spacing: .01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leiste__adresse svg { width: 11px; height: 11px; color: var(--kalt); flex: none; }

.schirm {
  position: relative;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 11;
}
.schirm iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Vorschau maßstäblich verkleinert – so wirkt die Miniseite wie ein Bildschirm.
   Der Maßstab wird in nuvora.js aus der tatsächlichen Breite gerechnet, damit
   die Vorschau die Fläche genau ausfüllt und das Raster nicht sprengt.
   Das Seitenverhältnis 16/11 sorgt dafür, dass die Höhe von 880 px immer passt. */
.schirm--klein iframe {
  max-width: none;
  width: 1280px;
  height: 880px;
  transform: scale(var(--massstab, .42));
  transform-origin: 0 0;
}

/* Marke auf dem Gerät */
.geraet__fahne {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: -15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(9, 11, 17, .92);
  border: 1px solid var(--linie-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .74rem;
  font-weight: 650;
  color: var(--porzellan-2);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.9);
}
.geraet__fahne b { color: var(--kalt); font-weight: 700; }

/* ---------------------------------------------------------------- Laufband */
.laufband {
  position: relative;
  border-block: 1px solid var(--linie);
  background: rgba(242, 244, 248, .018);
  overflow: hidden;
  padding-block: 15px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband__spur {
  display: flex;
  width: max-content;
  animation: schieben 46s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__satz {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;
  flex: none;
}
.laufband__stueck {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--dunst);
  white-space: nowrap;
}
.laufband__stueck::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--signal);
  opacity: .8;
  flex: none;
}
@keyframes schieben {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================== Vergleichspult
   Zwei laufende Miniseiten übereinander. Die neue Fassung wird beschnitten,
   der Griff verschiebt den Schnitt. Beide Fassungen sind bedienbar –
   Klicks landen in der Fassung, die an dieser Stelle sichtbar ist. */
.vergleich {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--buehne), var(--nacht-2));
  overflow: hidden;
  box-shadow: 0 60px 130px -60px rgba(0,0,0,.9);
}

/* Reiter für die Projekte */
.vergleich__reiter {
  display: flex;
  gap: 2px;
  padding: 10px 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.vergleich__reiter::-webkit-scrollbar { display: none; }

.projektreiter {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: var(--dunst);
  text-align: left;
  cursor: pointer;
  transition: background var(--schnell), color var(--schnell), border-color var(--schnell);
}
.projektreiter:hover { color: var(--porzellan-2); background: rgba(242,244,248,.04); }
.projektreiter[aria-selected='true'] {
  background: rgba(242,244,248,.055);
  border-color: var(--linie);
  color: var(--porzellan);
}
.projektreiter__name { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; }
.projektreiter__fach { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }

/* Bedienleiste */
.pult {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px clamp(14px, 2vw, 22px);
  border-block: 1px solid var(--linie);
  background: rgba(242,244,248,.02);
}

.schalterreihe {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: rgba(6,7,11,.6);
}
.schalterreihe__lauf {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  left: 3px;
  border-radius: 999px;
  background: var(--porzellan);
  transition: transform var(--weich), width var(--weich);
  pointer-events: none;
}
.schalter {
  position: relative;
  z-index: 1;
  padding: 8px 17px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dunst);
  font-size: .855rem;
  font-weight: 650;
  letter-spacing: -.008em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--schnell);
}
.schalter:hover { color: var(--porzellan); }
.schalter[aria-pressed='true'], .schalter[aria-selected='true'] { color: #06070b; }

.pult__rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.werkzeug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--linie-2);
  border-radius: 10px;
  background: transparent;
  color: var(--dunst);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--schnell), border-color var(--schnell), background var(--schnell);
}
.werkzeug:hover { color: var(--porzellan); border-color: var(--linie-3); background: rgba(242,244,248,.05); }
.werkzeug svg { width: 15px; height: 15px; flex: none; }
.werkzeug--quadrat { width: 38px; padding: 0; }

/* Bühne mit den beiden Fassungen */
.vergleich__buehne {
  position: relative;
  padding: clamp(16px, 2.4vw, 30px);
  background:
    radial-gradient(900px circle at 50% -10%, rgba(77,108,245,.10), transparent 60%),
    linear-gradient(180deg, rgba(242,244,248,.02), transparent);
}

.rahmen {
  position: relative;
  margin-inline: auto;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--linie-2);
  background: linear-gradient(180deg, #12161f, #0a0c12);
  padding: 8px;
  transition: max-width var(--weich);
  box-shadow: 0 40px 90px -46px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.06) inset;
}
.rahmen[data-geraet='mobil'] { max-width: 408px; border-radius: 30px; padding: 12px; }
.rahmen[data-geraet='desktop'] { max-width: 100%; }

.rahmen__leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 4px 10px;
}
.rahmen[data-geraet='mobil'] .rahmen__leiste { padding-bottom: 8px; }

.rahmen__schirm {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  height: clamp(430px, 60vh, 660px);
}
.rahmen[data-geraet='mobil'] .rahmen__schirm { border-radius: 20px; height: clamp(500px, 66vh, 700px); }

.ebene {
  position: absolute;
  inset: 0;
}
.ebene iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.ebene--neu {
  clip-path: inset(0 0 0 var(--schnitt, 0%));
  transition: clip-path var(--weich);
}
.vergleich[data-zieht='ja'] .ebene--neu { transition: none; }

/* Kennzeichnung der beiden Fassungen */
.ebene__schild {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--weich);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ebene__schild--alt { left: 12px; background: rgba(12,14,20,.82); color: #ffb457; border: 1px solid rgba(255,180,87,.4); }
.ebene__schild--neu { right: 12px; background: rgba(12,14,20,.82); color: var(--kalt); border: 1px solid rgba(82,230,210,.4); }
.vergleich[data-modus='vergleich'] .ebene__schild { opacity: 1; }

/* Griff */
.griff {
  position: absolute;
  z-index: 5;
  top: 0; bottom: 0;
  left: var(--schnitt, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--porzellan);
  box-shadow: 0 0 22px rgba(166,188,255,.8);
  cursor: ew-resize;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--weich), visibility var(--weich);
  touch-action: none;
}
.vergleich[data-modus='vergleich'] .griff { opacity: 1; visibility: visible; }
.griff::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--porzellan);
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.griff__zeichen {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 14px;
  color: #06070b;
  pointer-events: none;
}
.griff:focus-visible { outline: none; }
.griff:focus-visible::after { box-shadow: 0 0 0 3px var(--signal-tief), 0 8px 26px rgba(0,0,0,.5); }

/* Sperrfläche, damit das Ziehen nicht in den Rahmen fällt */
.sperre {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  cursor: ew-resize;
}
.vergleich[data-zieht='ja'] .sperre { display: block; }

/* Fußzeile des Pults */
.vergleich__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--linie);
  font-size: .81rem;
  color: var(--dunst-2);
}
.vergleich__hinweis { display: inline-flex; align-items: center; gap: 9px; }
.vergleich__hinweis svg { width: 14px; height: 14px; color: var(--signal); flex: none; }

@media (max-width: 700px) {
  .pult { gap: 9px; }
  .pult__rechts { margin-left: 0; width: 100%; }
  .schalter { padding: 8px 13px; font-size: .8rem; }
}

/* Gegenüberstellung: was sich ändert */
.wandel {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 26px;
}
@media (min-width: 780px) { .wandel { grid-template-columns: repeat(3, 1fr); } }
.wandel__feld { background: var(--nacht-2); padding: 22px clamp(18px, 2vw, 26px); }
.wandel__alt, .wandel__neu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .925rem;
  line-height: 1.5;
}
.wandel__alt { color: var(--dunst-2); margin-bottom: 12px; }
.wandel__neu { color: var(--porzellan); font-weight: 600; }
.wandel__zeichen { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.wandel__alt .wandel__zeichen { color: var(--dunst-2); }
.wandel__neu .wandel__zeichen { color: var(--kalt); }

/* ================================================================ Register
   Leistungen als Reiterwerk: waagerechte Reiter, darunter eine große Bühne. */
.register__reiter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--linie);
  scrollbar-width: none;
}
.register__reiter::-webkit-scrollbar { display: none; }

.registerreiter {
  flex: none;
  position: relative;
  padding: 11px 20px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--dunst);
  font-size: .9rem;
  font-weight: 620;
  letter-spacing: -.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--schnell), border-color var(--schnell), background var(--schnell);
}
.registerreiter:hover { color: var(--porzellan); border-color: var(--linie-2); }
.registerreiter[aria-selected='true'] {
  color: #06070b;
  background: var(--porzellan);
  border-color: var(--porzellan);
}

.registerblatt { display: none; }
.registerblatt[data-aktiv='ja'] { display: block; animation: aufblenden 460ms cubic-bezier(.2,.7,.2,1) both; }

@keyframes aufblenden {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.registerblatt__raster {
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .registerblatt__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.merkliste { list-style: none; display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
.merkliste li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 2px;
  background: var(--nacht);
  font-size: .96rem;
  color: var(--porzellan-2);
}
.merkliste svg { width: 17px; height: 17px; margin-top: 3px; color: var(--kalt); flex: none; }
.merkliste b { color: var(--porzellan); font-weight: 650; }

/* ============================================================== Protokoll
   Der Ablauf als Tabelle. Kein Karussell aus nummerierten Karten. */
.protokoll {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: .96rem;
}
.protokoll caption {
  text-align: left;
  font-size: .82rem;
  color: var(--dunst-2);
  padding-bottom: 14px;
}
.protokoll th {
  font-size: .705rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dunst-2);
  padding: 0 18px 13px 0;
  border-bottom: 1px solid var(--linie-2);
  vertical-align: bottom;
}
.protokoll td {
  padding: 20px 18px 20px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  color: var(--porzellan-2);
}
.protokoll tr:last-child td { border-bottom: 0; }
.protokoll tbody tr { transition: background var(--schnell); }
.protokoll tbody tr:hover { background: rgba(242,244,248,.028); }
.protokoll__phase {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--porzellan);
  font-weight: 700;
  letter-spacing: -.016em;
}
.protokoll__zahl {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--signal);
  flex: none;
}
.protokoll__dauer { color: var(--dunst); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 800px) {
  .protokoll, .protokoll tbody, .protokoll tr, .protokoll td { display: block; width: 100%; }
  .protokoll thead { display: none; }
  .protokoll tr { padding: 20px 0; border-bottom: 1px solid var(--linie); }
  .protokoll tr:last-child { border-bottom: 0; }
  .protokoll td { padding: 0 0 10px; border: 0; }
  .protokoll td:last-child { padding-bottom: 0; }
  .protokoll td[data-kopf]::before {
    content: attr(data-kopf);
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dunst-2);
    margin-bottom: 5px;
  }
}

/* ========================================================== Werkzeug-Block
   Der Abschnitt über die Arbeitsweise mit KI. Zwei Spalten, keine Symbole. */
.gegenueber {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 860px) { .gegenueber { grid-template-columns: 1fr 1fr; } }
.gegenueber__spalte { background: var(--nacht-2); padding: clamp(24px, 3vw, 38px); }
.gegenueber__spalte--betont { background: linear-gradient(180deg, rgba(166,188,255,.055), rgba(9,11,17,1)); }
.gegenueber__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linie);
}
.gegenueber__kopf h3 { font-size: 1.08rem; letter-spacing: -.02em; }
.gegenueber__mal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--linie-2);
  color: var(--dunst);
  flex: none;
}
.gegenueber__mal svg { width: 15px; height: 15px; }
.gegenueber__spalte--betont .gegenueber__mal { color: var(--signal); border-color: rgba(166,188,255,.32); }
.punktliste { list-style: none; display: grid; gap: 13px; }
.punktliste li {
  display: flex;
  gap: 12px;
  font-size: .95rem;
  line-height: 1.55;
}
.punktliste li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--dunst-2);
}
.gegenueber__spalte--betont .punktliste li::before { background: var(--signal); }

/* Ausgezeichneter Satz */
.ausspruch {
  font-family: var(--kursiv);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.65rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--porzellan);
  max-width: 22ch;
  text-wrap: balance;
}
.ausspruch--breit { max-width: 30ch; }

/* ================================================================= Preise */
.preisfeld {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
@media (min-width: 900px) { .preisfeld { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.preistafel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 42px);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--buehne), var(--nacht-2));
  overflow: hidden;
}
.preistafel--licht::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(166,188,255,.5), transparent 46%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.preistafel__zahl {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 8px;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.042em;
  color: var(--porzellan);
  line-height: 1;
}
.preistafel__einheit { font-size: 1rem; font-weight: 600; color: var(--dunst); letter-spacing: -.01em; }
.preistafel__liste { list-style: none; display: grid; gap: 12px; margin: 24px 0; }
.preistafel__liste li { display: flex; gap: 12px; font-size: .95rem; line-height: 1.5; }
.preistafel__liste svg { width: 16px; height: 16px; margin-top: 3px; color: var(--kalt); flex: none; }
.preistafel__fuss { margin-top: auto; padding-top: 22px; }

.notiz {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-left: 2px solid var(--signal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: rgba(166,188,255,.045);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--porzellan-2);
}
.notiz svg { width: 17px; height: 17px; margin-top: 2px; color: var(--signal); flex: none; }
.notiz b { color: var(--porzellan); }
.notiz--warnung { border-left-color: var(--warn); background: rgba(255,180,87,.055); }
.notiz--warnung svg { color: var(--warn); }

/* ================================================================= Fragen */
.frage {
  border-bottom: 1px solid var(--linie);
}
.frage__knopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 22px 2px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--porzellan);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.35;
  transition: color var(--schnell);
}
.frage__knopf:hover { color: var(--signal-hell); }
.frage__kreuz {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
}
.frage__kreuz::before, .frage__kreuz::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--weich), opacity var(--weich);
}
.frage__kreuz::before { width: 13px; height: 1.5px; }
.frage__kreuz::after  { width: 1.5px; height: 13px; }
.frage__knopf[aria-expanded='true'] .frage__kreuz::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.frage__blatt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--weich);
}
.frage__blatt[data-offen='ja'] { grid-template-rows: 1fr; }
.frage__inhalt { overflow: hidden; }
.frage__inhalt > div { padding: 0 46px 24px 2px; color: var(--dunst); font-size: .97rem; line-height: 1.62; }
.frage__inhalt a { color: var(--signal-hell); }

/* ============================================================= Hellfläche
   Ein einziger heller Abschnitt am Seitenende. Kehrt die Seite um. */
.hellfeld {
  background: var(--hell);
  color: var(--hell-schrift);
  border-radius: clamp(24px, 4vw, 40px);
  padding: clamp(38px, 6vw, 84px);
  position: relative;
  overflow: hidden;
}
.hellfeld::before {
  content: '';
  position: absolute;
  top: -55%; right: -18%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77,108,245,.18), transparent 70%);
  pointer-events: none;
}
.hellfeld h2, .hellfeld h3 { color: var(--hell-schrift); }
.hellfeld p { color: var(--hell-dunst); }
.hellfeld .marke { color: #405ff1; }   /* auf Porzellan: 4.62:1 statt 3.99:1 */
.hellfeld__raster { position: relative; display: grid; gap: clamp(26px, 4vw, 60px); }
@media (min-width: 900px) {
  .hellfeld__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.hellfeld .knopf {
  --k-bg: #0a0c12;
  --k-verlauf: linear-gradient(104deg, #151d34 0%, #0a0c12 44%, #0d2338 100%);
  --k-schrift: var(--porzellan);
  --k-kante: rgba(255, 255, 255, .10);
  --k-schein: 0 14px 34px -18px rgba(10, 12, 18, .8);
  --k-schein-hoch: 0 22px 46px -18px rgba(10, 12, 18, .95);
}
.hellfeld .knopf::after { background: linear-gradient(100deg, transparent 20%, rgba(166,188,255,.30) 50%, transparent 80%); }
.hellfeld .knopf--linie {
  --k-bg: transparent;
  --k-verlauf: none;
  --k-schrift: var(--hell-schrift);
  --k-kante: rgba(0, 0, 0, 0);
  --k-schein: 0 0 0 rgba(0, 0, 0, 0);
  --k-schein-hoch: 0 12px 28px -20px rgba(10, 12, 18, .5);
  border-color: var(--hell-linie);
}
.hellfeld .knopf--linie::before {
  background: linear-gradient(104deg, rgba(77, 108, 245, .8), rgba(47, 160, 145, .7));
}
.hellfeld .knopf--linie:hover { background-color: rgba(10, 12, 18, .05); }
.hellfeld__liste { list-style: none; display: grid; gap: 14px; }
.hellfeld__liste li { display: flex; gap: 12px; font-size: .97rem; color: var(--hell-dunst); line-height: 1.5; }
.hellfeld__liste svg { width: 17px; height: 17px; margin-top: 3px; color: var(--signal-tief); flex: none; }

/* ================================================================ Formular
   Das einzige Formular der Seite steht auf /kontakt. */
.formular { display: grid; gap: 18px; }
.formular__paar { display: grid; gap: 18px; }
@media (min-width: 620px) { .formular__paar { grid-template-columns: 1fr 1fr; } }

.feldgruppe { display: grid; gap: 8px; }
.feldgruppe > label {
  font-size: .81rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--porzellan-2);
}
.feldgruppe > label .pflicht { color: var(--signal); }
.feldgruppe__hinweis { font-size: .8rem; color: var(--dunst-2); }

.eingabe {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--linie-2);
  border-radius: 12px;
  background: rgba(242,244,248,.035);
  color: var(--porzellan);
  font-size: .98rem;
  transition: border-color var(--schnell), background var(--schnell), box-shadow var(--schnell);
  appearance: none;
}
.eingabe::placeholder { color: var(--dunst-2); }
.eingabe:hover { border-color: var(--linie-3); }
.eingabe:focus {
  outline: none;
  border-color: var(--signal);
  background: rgba(242,244,248,.06);
  box-shadow: 0 0 0 3px rgba(166,188,255,.16);
}
textarea.eingabe { min-height: 148px; resize: vertical; line-height: 1.6; }
select.eingabe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}
select.eingabe option { background: var(--buehne-2); color: var(--porzellan); }

.wahlreihe { display: flex; flex-wrap: wrap; gap: 9px; }
.wahl { position: relative; }
.wahl input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.wahl span {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--dunst);
  cursor: pointer;
  transition: all var(--schnell);
}
.wahl input:checked + span { background: var(--porzellan); border-color: var(--porzellan); color: #06070b; }
.wahl input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }
.wahl span:hover { color: var(--porzellan); border-color: var(--linie-3); }
.wahl input:checked + span:hover { color: #06070b; }

.haken {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--dunst);
  cursor: pointer;
}
.haken input {
  flex: none;
  width: 19px; height: 19px;
  margin: 2px 0 0;
  border: 1px solid var(--linie-3);
  border-radius: 5px;
  background: rgba(242,244,248,.04);
  appearance: none;
  cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell);
}
.haken input:checked {
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306070b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--signal);
}
.haken input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.haken a { color: var(--signal-hell); }

.honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.fehler {
  display: none;
  font-size: .84rem;
  color: #ff9a8a;
}
.eingabe[aria-invalid='true'] { border-color: #ff9a8a; box-shadow: 0 0 0 3px rgba(255,154,138,.14); }
.feldgruppe[data-fehler='ja'] .fehler { display: block; }

/* ================================================================== Fuß */
.fuss {
  position: relative;
  border-top: 1px solid var(--linie);
  padding-top: clamp(52px, 6vw, 84px);
  padding-bottom: 34px;
  overflow: hidden;
}
.fuss__wort {
  font-size: clamp(3.4rem, 17vw, 15rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .82;
  color: transparent;
  background: linear-gradient(180deg, rgba(242,244,248,.17), rgba(242,244,248,.03));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  margin-bottom: clamp(28px, 4vw, 48px);
  white-space: nowrap;
}
.fuss__band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
}
.fuss__navi { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.fuss__navi a {
  font-size: .91rem;
  color: var(--dunst);
  text-decoration: none;
  transition: color var(--schnell);
}
.fuss__navi a:hover { color: var(--porzellan); }
.fuss__rechts { display: grid; gap: 10px; justify-items: start; }
@media (min-width: 900px) { .fuss__rechts { justify-items: end; text-align: right; } }
.fuss__klein { font-size: .82rem; color: var(--dunst-2); }
.fuss__klein a { color: var(--dunst); text-decoration: none; }
.fuss__klein a:hover { color: var(--porzellan); }

/* ====================================================== Einblenden beim Rollen */
.zeigen {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 760ms cubic-bezier(.2,.7,.2,1), transform 760ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}
.zeigen[data-sichtbar='ja'] { opacity: 1; transform: none; will-change: auto; }

/* -------------------------------------------------------------- Werkzeuge */
.nur-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mitte-eng { max-width: 66ch; }
.abstand-oben { margin-top: clamp(26px, 3.4vw, 44px); }
.abstand-oben-klein { margin-top: 18px; }
.reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.raster-2 { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 760px) { .raster-2 { grid-template-columns: 1fr 1fr; } }
.raster-3 { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 720px)  { .raster-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .raster-3 { grid-template-columns: repeat(3, 1fr); } }

.platzhalter-band {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 30px;
  border: 1px dashed rgba(255,180,87,.45);
  border-radius: var(--radius-s);
  background: rgba(255,180,87,.06);
  color: #ffcf94;
  font-size: .9rem;
  line-height: 1.55;
}
.platzhalter-band svg { width: 17px; height: 17px; margin-top: 2px; flex: none; }
.platzhalter-band b { color: #ffe0b8; }

/* ========================================================== Rechtsdokumente
   Lange Texte bekommen ein stehendes Inhaltsverzeichnis und nummerierte
   Abschnitte. Der gerade gelesene Abschnitt wird im Verzeichnis markiert. */
.rechtslayout { display: grid; gap: clamp(34px, 4vw, 76px); }
@media (min-width: 1080px) {
  .rechtslayout { grid-template-columns: 258px minmax(0, 1fr); }
}

.rechtsnav__innen { position: static; }
@media (min-width: 1080px) {
  .rechtsnav__innen {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--linie-2) transparent;
    padding-right: 6px;
  }
  .rechtsnav__innen::-webkit-scrollbar { width: 4px; }
  .rechtsnav__innen::-webkit-scrollbar-thumb {
    background: var(--linie-2);
    border-radius: 2px;
  }
}
.rechtsnav .marke { margin-bottom: 16px; }

.rechtsnav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--linie);
}
.rechtsnav__liste a {
  display: flex;
  gap: 12px;
  margin-left: -1px;
  padding: 8px 0 8px 17px;
  border-left: 1px solid transparent;
  font-size: .87rem;
  line-height: 1.38;
  color: var(--dunst);
  text-decoration: none;
  transition: color var(--schnell), border-color var(--schnell);
}
.rechtsnav__liste a:hover { color: var(--porzellan-2); border-left-color: var(--linie-3); }
.rechtsnav__liste a[data-aktiv='ja'] { color: var(--porzellan); border-left-color: var(--signal); }
.rechtsnav__nr {
  flex: none;
  padding-top: .12em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--dunst-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--schnell);
}
.rechtsnav__liste a[data-aktiv='ja'] .rechtsnav__nr { color: var(--signal); }
.rechtsnav__stand {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--dunst-2);
}
.rechtsnav__stand b { color: var(--porzellan-2); font-weight: 650; }

.rechtstext { max-width: 74ch; }
.rechtsabschnitt { scroll-margin-top: 112px; }
.rechtsabschnitt + .rechtsabschnitt {
  margin-top: clamp(30px, 3.4vw, 50px);
  padding-top: clamp(30px, 3.4vw, 50px);
  border-top: 1px solid var(--linie);
}
.rechtsabschnitt h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  font-size: clamp(1.18rem, 1.9vw, 1.55rem);
  letter-spacing: -.028em;
  line-height: 1.24;
}
.rechtsabschnitt__nr {
  flex: none;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.rechtsabschnitt__inhalt p,
.rechtsabschnitt__inhalt li { color: var(--porzellan-2); font-size: .99rem; line-height: 1.72; }
.rechtsabschnitt__inhalt ul,
.rechtsabschnitt__inhalt ol { padding-left: 22px; margin: 0 0 1.05em; }
.rechtsabschnitt__inhalt li { margin-bottom: 7px; }
.rechtsabschnitt__inhalt ul { list-style: disc; }
.rechtsabschnitt__inhalt ol { list-style: decimal; }
.rechtsabschnitt__inhalt a { color: var(--signal-hell); }
.rechtsabschnitt__inhalt b { color: var(--porzellan); font-weight: 650; }

/* Anschrift und Kontaktwege als eigene Fläche */
.rechtskarte {
  display: grid;
  gap: 22px;
  margin: 0 0 1.15em;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(242, 244, 248, .045), rgba(242, 244, 248, .012));
}
@media (min-width: 620px) { .rechtskarte { grid-template-columns: 1fr 1fr; } }
.rechtskarte__anschrift {
  margin: 0;
  color: var(--porzellan) !important;
  font-weight: 600;
  line-height: 1.7;
}
.rechtskarte__wege { margin: 0; }
.rechtskarte__wege dt {
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dunst-2);
}
.rechtskarte__wege dd { margin: 3px 0 14px; color: var(--porzellan); }
.rechtskarte__wege dd:last-child { margin-bottom: 0; }

/* Aufzählung der Betroffenenrechte */
.rechteliste { list-style: none !important; padding-left: 0 !important; }
.rechteliste li { position: relative; padding-left: 26px; }
.rechteliste li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
}

/* Kennzahlen */
.kennreihe { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .kennreihe { grid-template-columns: repeat(3, 1fr); } }
.kenn { background: var(--nacht-2); padding: clamp(22px, 2.6vw, 30px); }
.kenn__wert {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--porzellan);
  line-height: 1;
  margin-bottom: 9px;
}
.kenn__wort { font-size: .91rem; color: var(--dunst); line-height: 1.5; }

/* Nach oben */
.nach-oben {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie-2);
  border-radius: 50%;
  background: rgba(9,11,17,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--porzellan-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--weich), visibility var(--weich), transform var(--weich), border-color var(--schnell);
}
.nach-oben[data-zeigen='ja'] { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { border-color: var(--linie-3); color: var(--porzellan); }
.nach-oben svg { width: 17px; height: 17px; }

/* --------------------------------------------- Rücksicht auf Bewegungswunsch */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .zeigen { opacity: 1; transform: none; }
  .laufband__spur { animation: none; }
  .blende { animation: none; }
}

/* ------------------------------------------------------------ Druckfassung
   Auf Papier zählt nur der Text. Alles wird auf Schwarz gezwungen — sonst
   blieben Überschriften mit background-clip: text unsichtbar und heller
   Fließtext auf weißem Papier unlesbar. */
@media print {
  /* Bildschirmschmuck fällt weg */
  .kopf, .menue, .nach-oben, .laufband, .raster, .koernung, .fortschritt,
  .blende, .bogen, .vergleich, .geraet, .auftakt__wort, .fuss__wort,
  .rechtsnav, .sprung { display: none !important; }

  /* Jede Farbe auf Schwarz, jede Fläche auf Weiß */
  *, *::before, *::after {
    background: transparent !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000 !important;
  }
  body { background: #fff !important; font-size: 11pt; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }

  a { text-decoration: underline; }
  /* Adressen ausschreiben, damit sie auf Papier nachvollziehbar bleiben */
  .rechtsabschnitt__inhalt a[href^="http"]::after,
  .rechtsabschnitt__inhalt a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; }

  /* Ränder statt Flächen, damit Karten erkennbar bleiben */
  .tafel, .buehne, .preistafel, .rechtskarte, .notiz, .gesamtdauer,
  .hellfeld, .gegenueber__spalte { border: 1px solid #999 !important; }

  /* Mehrspaltige Raster auf eine Spalte legen — sonst quetscht sich der Text
     beim Druck in die Restbreite einer ausgeblendeten Spalte. */
  .rechtslayout, .rechtskarte, .kapitel, .raster-2, .raster-3, .zwei,
  .registerblatt__raster, .preisfeld, .gegenueber, .wandel, .kennreihe,
  .hellfeld__raster, .branchenfeld, .zahlung__schritte, .schnell {
    display: block !important;
  }
  .rechtstext, .bahn, .mitte-eng, .auftakt__satz { max-width: none !important; }
  .rechtskarte__wege { margin-top: 10pt; }

  .feld, .feld-schmal, .auftakt { padding-block: 12pt !important; }
  .rechtsabschnitt, .kapitel, section { break-inside: avoid-page; }
  h1, h2, h3 { break-after: avoid-page; }
}

/* Vorschau im Kopfbereich ist Schaufenster, nicht Bedienfläche –
   bedient wird das Vergleichspult weiter unten. */
.schirm--klein { pointer-events: none; }

/* ---------------------------------------------- Schmale Geräte, Nachträge */

/* Ohne sichtbare Hauptnavigation muss der Menüknopf nach rechts rücken. */
@media (max-width: 979px) {
  .kopf__aktion { margin-left: auto; }
}

/* Im Vergleichspult bleibt auf dem Telefon nur das Nötige stehen. */
.nur-breit { display: inline; }
@media (max-width: 700px) {
  .nur-breit { display: none; }
  .projektreiter { padding: 11px 13px; }
  .projektreiter__name { font-size: .875rem; }
  .projektreiter__fach { font-size: .68rem; }
  .werkzeug span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .werkzeug { width: 38px; padding: 0; }
  .pult { gap: 8px; }
  .pult__rechts { margin-left: auto; width: auto; }
}

/* Der Griff braucht auf Berührungsgeräten mehr Fläche. */
@media (pointer: coarse) {
  .griff::after { width: 54px; height: 54px; }
}

/* Kennzeichnung von Datei- und Feldnamen in Hinweisen */
code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .92em;
  letter-spacing: 0;
}

/* Tafeln, die selbst ein Verweis sind (Fehlerseite, Dankseite) */
a.tafel {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.tafel .klein-titel { transition: color var(--schnell); }
a.tafel:hover .klein-titel { color: var(--signal-hell); }
a.tafel .gegenueber__mal { color: var(--signal); border-color: rgba(166, 188, 255, .3); }

/* ==========================================================================
   Feinheiten — Licht, Korn und Bewegung
   Alles hier ist Zugabe: Fällt eine dieser Eigenschaften im Browser aus,
   bleibt die Seite unverändert lesbar.
   ========================================================================== */

/* Eigenschaften anmelden, damit sie sich weich überblenden lassen. */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --glanz { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --atem  { syntax: '<number>'; inherits: false; initial-value: 0; }

/* ------------------------------------------------- Schrift unter dem Zeiger
   Ruhezustand: reines Porzellanweiß. Unter dem Zeiger wandert ein kaltes
   Licht durch die Buchstaben. Nur aktiv, wenn der Browser color-mix und
   background-clip beherrscht — sonst bleibt die Schrift schlicht weiß. */
.riese--licht { color: var(--porzellan); }

/* Wichtig: background-clip: text malt ausschließlich innerhalb des
   Elementkastens. Bei diesen sehr engen Zeilenhöhen ragen Ober- und
   Unterlängen (g, q, j, p, Umlautpunkte) über den Kasten hinaus und würden
   abgeschnitten. Der Zuschlag vergrößert nur die Malfläche — die Abstände
   werden über negative Ränder wieder ausgeglichen, das Layout bleibt gleich. */
.riese--licht,
.auftakt__wort,
.fuss__wort {
  padding-top: .21em;
  margin-top: -.21em;
}
.riese--licht {
  padding-bottom: .21em;
  margin-bottom: -.21em;
}

@supports (background-clip: text) and (color: color-mix(in oklab, red, blue)) {
  .riese--licht,
  .fuss__wort,
  .auftakt__wort {
    background-image: radial-gradient(34rem circle at var(--mx) var(--my),
      #ffffff 0%,
      color-mix(in oklab, var(--signal-hell) calc(var(--glanz) * 100%), var(--porzellan)) 17%,
      color-mix(in oklab, var(--kalt)        calc(var(--glanz) * 94%), var(--porzellan)) 36%,
      color-mix(in oklab, var(--signal)      calc(var(--glanz) * 72%), var(--porzellan)) 56%,
      var(--porzellan) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: --glanz 520ms cubic-bezier(.2, .7, .2, 1),
                --mx 200ms linear,
                --my 200ms linear;
  }
  .riese--licht:hover { --glanz: 1; }

  /* Der Schriftzug im Fuß bleibt gedämpft und reagiert nur auf den Zeiger. */
  .fuss__wort {
    background-image: radial-gradient(30rem circle at var(--mx) var(--my),
      color-mix(in oklab, var(--kalt) calc(var(--glanz) * 55%), rgba(242,244,248,.30)) 0%,
      color-mix(in oklab, var(--signal) calc(var(--glanz) * 40%), rgba(242,244,248,.14)) 34%,
      rgba(242, 244, 248, .035) 72%);
  }
  .fuss__wort:hover { --glanz: 1; }

  /* Der Schriftzug im Kopf trägt dauerhaft Farbe. Drei Ebenen übereinander:
     zuoberst das Licht unter dem Zeiger, in der Mitte ein Streifen, der in
     Abständen langsam hindurchwandert, zuunterst der ruhende Farbton, der
     leise heller und wieder dunkler atmet. Bewegt wird nur die mittlere
     Ebene — die beiden anderen behalten ihre Position, damit das Zeigerlicht
     dort bleibt, wo der Zeiger ist. Die beiden Takte sind absichtlich nicht
     teilerfremd zueinander gewählt, damit sich nie ein sichtbares Muster
     wiederholt. */
  .auftakt__wort {
    background-image:
      radial-gradient(28rem circle at var(--mx) var(--my),
        rgba(140, 240, 226, calc(var(--glanz) * .60)) 0%,
        rgba(178, 198, 255, calc(var(--glanz) * .44)) 38%,
        rgba(242, 244, 248, 0) 72%),
      linear-gradient(104deg,
        rgba(242, 244, 248, 0) 0%,
        rgba(242, 244, 248, 0) 30%,
        rgba(150, 176, 255, .34) 39%,
        rgba(226, 234, 255, .62) 46%,
        rgba(255, 255, 255, .74) 49%,
        rgba(104, 232, 216, .58) 54%,
        rgba(104, 232, 216, .16) 60%,
        rgba(242, 244, 248, 0) 68%,
        rgba(242, 244, 248, 0) 100%),
      linear-gradient(166deg,
        rgba(126, 158, 255, calc(.36 + var(--atem) * .20)) 0%,
        rgba(96, 200, 236, calc(.30 + var(--atem) * .17)) 34%,
        rgba(74, 224, 206, calc(.26 + var(--atem) * .15)) 62%,
        rgba(242, 244, 248, .13) 100%);
    background-size: 100% 100%, 320% 100%, 100% 100%;
    background-position: 0 0, 140% 50%, 0 0;
    animation: schriftzugglanz 7.5s linear infinite,
               schriftzugatem 9.2s ease-in-out infinite;
  }
  .auftakt__wort:hover { --glanz: 1; }
}

/* Der Streifen wandert in gut der Hälfte des Takts hindurch und ruht dann —
   so wirkt es wie ein wiederkehrendes Aufleuchten, nicht wie ein Ladebalken. */
@keyframes schriftzugglanz {
  0%,   6%   { background-position: 0 0, 140% 50%, 0 0; }
  62%, 100%  { background-position: 0 0, -40% 50%, 0 0; }
}

/* Zwischen den Durchgängen bleibt der Schriftzug in Bewegung: der Grundton
   wird ganz leise heller und wieder dunkler. */
@keyframes schriftzugatem {
  0%, 100% { --atem: 0; }
  50%      { --atem: 1; }
}

@media (forced-colors: active) {
  .riese--licht, .fuss__wort, .auftakt__wort { color: CanvasText; background: none; }
}

/* ------------------------------------------------------ Fortschritt am Rand */
.fortschritt {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.fortschritt span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--signal-tief), var(--signal) 45%, var(--kalt));
  box-shadow: 0 0 14px rgba(82, 230, 210, .55);
  will-change: transform;
}

/* ------------------------------------------------------------------- Korn
   Ein sehr feines Rauschen über der ganzen Fläche. Nimmt dem Schwarz das
   Digitale und lässt Verläufe weicher wirken. */
.koernung {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* --------------------------------------------------- Randlicht auf Flächen
   Ein Lichtsaum, der auf dem Rand der Fläche dem Zeiger folgt. */
.tafel, .preistafel, .branche, .schnellfeld { position: relative; }
.tafel::after,
.preistafel::after,
.branche::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(14rem circle at var(--mx) var(--my),
              rgba(166, 188, 255, .85), rgba(82, 230, 210, .30) 42%, transparent 72%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--weich);
  pointer-events: none;
}
.tafel:hover::after,
.preistafel:hover::after,
.branche:hover::after { opacity: 1; }

/* --------------------------------------------------- Zweites Licht im Kopf */
.blende--zweit {
  top: -6%;
  left: 30%;
  width: min(920px, 92vw);
  background: radial-gradient(closest-side, rgba(82, 230, 210, .13), transparent 66%);
  animation: schweben 24s ease-in-out infinite;
  filter: blur(28px);
}
@keyframes schweben {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: .75; }
  34%      { transform: translate(-38%, -7%) scale(1.14); opacity: 1; }
  67%      { transform: translate(-60%, 5%) scale(.92); opacity: .6; }
}

/* Der Punkt in der Marke schlägt ruhig – ein Lebenszeichen. */
.losung__punkt { animation: puls 2.6s ease-in-out infinite; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 4px rgba(82, 230, 210, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(82, 230, 210, .04); }
}
.losung b { color: var(--porzellan); font-weight: 700; }

/* ------------------------------------------- Gestaffeltes Einblenden im Kopf */
.auftakt__satz > *:nth-child(1) { --verzug:   0ms; }
.auftakt__satz > *:nth-child(2) { --verzug: 110ms; }
.auftakt__satz > *:nth-child(3) { --verzug: 210ms; }
.auftakt__satz > *:nth-child(4) { --verzug: 310ms; }
.auftakt__satz > *:nth-child(5) { --verzug: 400ms; }
.auftakt__satz > *:nth-child(6) { --verzug: 480ms; }

/* Die Haarlinie der Kapitelmarke wächst beim Erscheinen aus dem Nichts. */
.zeigen .marke::before {
  width: 0;
  transition: width 760ms cubic-bezier(.2, .7, .2, 1) 220ms;
}
.zeigen[data-sichtbar='ja'] .marke::before { width: 34px; }

/* Zahlen bekommen einen Hauch Leuchten. */
.kenn__wert, .preistafel__zahl, .protokoll__zahl {
  text-shadow: 0 0 26px rgba(166, 188, 255, .22);
}

/* Der aktive Navigationspunkt glimmt. */
.kopf__link[aria-current='page']::after {
  box-shadow: 0 0 10px rgba(166, 188, 255, .9);
}

@media (prefers-reduced-motion: reduce) {
  .blende--zweit, .losung__punkt, .auftakt__wort { animation: none; }
  .zeigen .marke::before { width: 34px; transition: none; }
  .fortschritt { display: none; }
}

/* ============================================================ Für wen
   Ein schmaler Abschnitt mit den Branchen — bewusst offen endend. */
.branchenfeld { display: grid; gap: clamp(24px, 3.4vw, 52px); align-items: center; }
@media (min-width: 940px) {
  .branchenfeld { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.branchenfeld__satz { max-width: 46ch; }

.branchen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.branche {
  padding: 11px 19px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: rgba(242, 244, 248, .028);
  font-size: .92rem;
  font-weight: 600;
  color: var(--porzellan-2);
  letter-spacing: -.01em;
  transition: color var(--schnell), border-color var(--schnell),
              background var(--schnell), transform var(--schnell);
}
.branche:hover {
  color: var(--porzellan);
  border-color: var(--linie-3);
  background: rgba(242, 244, 248, .06);
  transform: translateY(-2px);
}
.branche:last-child {
  border-style: dashed;
  color: var(--dunst);
  font-family: var(--kursiv);
  font-style: italic;
  font-weight: 400;
  font-size: .98rem;
}
.branche:last-child:hover { color: var(--signal-hell); border-color: rgba(166, 188, 255, .5); }

/* --------------------------------------------------- Gesamtdauer im Ablauf */
.gesamtdauer {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 28px;
  padding: 13px 22px 13px 17px;
  border: 1px solid rgba(82, 230, 210, .3);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(82, 230, 210, .10), rgba(82, 230, 210, .02));
  font-size: .95rem;
  line-height: 1.45;
  color: var(--porzellan-2);
}
.gesamtdauer__zeichen { width: 18px; height: 18px; color: var(--kalt); flex: none; }
.gesamtdauer b { color: var(--porzellan); font-weight: 700; }
@media (max-width: 620px) {
  .gesamtdauer { align-items: flex-start; border-radius: var(--radius-s); padding: 14px 16px; }
  .gesamtdauer__zeichen { margin-top: 3px; }
}

/* Auf schmalen Geräten trägt die Marke nur die Kernaussage, sonst bricht sie um. */
@media (max-width: 560px) {
  .losung { white-space: nowrap; padding-right: 16px; }
  .losung__marke { display: none; }
}

/* Verzeichnis eines Rechtsdokuments: auf dem Telefon einklappbar,
   ab 1080 px immer offen und ohne Schalter. */
.rechtsnav__schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: rgba(242, 244, 248, .03);
  font-size: .88rem;
  font-weight: 650;
  color: var(--porzellan-2);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--schnell), background var(--schnell);
}
.rechtsnav__schalter::-webkit-details-marker { display: none; }
.rechtsnav__schalter:hover { border-color: var(--linie-3); background: rgba(242, 244, 248, .06); }
.rechtsnav__pfeil {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--dunst);
  transform: rotate(180deg);
  transition: transform var(--weich);
}
.rechtsnav__klapp[open] .rechtsnav__pfeil { transform: rotate(0deg); }
.rechtsnav__klapp[open] .rechtsnav__koerper { padding-top: 22px; }

@media (min-width: 1080px) {
  .rechtsnav__schalter { display: none; }
  .rechtsnav__klapp[open] .rechtsnav__koerper { padding-top: 0; }
}

/* ================================================================= Zahlung
   Der Festpreis, hälftig geteilt. Der Balken liest sich als Zeitachse:
   die erste Hälfte liegt vor dem Bauen, die zweite dahinter. */
.zahlung { display: grid; gap: 26px; }

.zahlung__balken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  height: 7px;
}
.zahlung__teil { border-radius: 999px; }
.zahlung__teil--eins {
  background: linear-gradient(90deg, var(--signal-tief), var(--signal) 55%, var(--kalt));
  box-shadow: 0 0 20px rgba(122, 176, 255, .45);
}
.zahlung__teil--zwei {
  background: rgba(242, 244, 248, .11);
  border: 1px solid var(--linie);
  box-sizing: border-box;
}

.zahlung__schritte {
  display: grid;
  gap: 26px;
  list-style: none;
}
@media (min-width: 720px) {
  .zahlung__schritte { grid-template-columns: 1fr 1fr; gap: 6px; }
  .zahlungsschritt { padding-right: clamp(20px, 4vw, 64px); }
}

.zahlungsschritt__anteil {
  margin: 0 0 4px;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: 1;
  color: var(--porzellan);
  text-shadow: 0 0 26px rgba(166, 188, 255, .22);
}
.zahlungsschritt__wann {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--signal);
}
.zahlungsschritt__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--dunst);
  max-width: 40ch;
}

/* ================================================== Größere Trefferflächen
   Reine Bedienbarkeit, keine Gestaltungsänderung: Die Flächen wachsen über
   ein Pseudoelement beziehungsweise über Innenabstand, der im Fluss keine
   Wirkung hat. Sichtbar verschiebt sich nichts. */

/* Die Wortmarke war nur 27 px hoch — im festen 74-px-Kopf ist Platz. */
.wortmarke { padding-block: 10px; }

/* Verweise in der Fußzeile waren 18 bis 24 px hoch. */
.fuss__navi a,
.fuss__klein a { position: relative; }
.fuss__navi a::after,
.fuss__klein a::after {
  content: '';
  position: absolute;
  inset: -7px -4px;
}

/* ============================================== Kontaktkarten: Klickantwort
   Beim Antippen glimmt die Karte kurz auf — ein weiches Licht vom Zeigerpunkt
   aus, dazu ein hellerer Rand. Kein Ring, keine Welle: nur ein Aufatmen. */
.tafel:has([data-kopieren])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(17rem circle at var(--mx, 50%) var(--my, 50%),
              rgba(166, 188, 255, .26), rgba(82, 230, 210, .09) 40%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.tafel[data-puls='ja']::before { animation: kartenglimmen 780ms cubic-bezier(.2, .7, .2, 1); }
.tafel[data-puls='ja']::after  { animation: randglimmen 780ms cubic-bezier(.2, .7, .2, 1); }
.tafel[data-puls='ja'] .pfeil-link { color: var(--signal-hell); background-size: 100% 1px; }

@keyframes kartenglimmen {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes randglimmen {
  0%   { opacity: .35; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Meldung und Zusatztext liegen übereinander — so wächst die Karte nicht,
   wenn die Rückmeldung erscheint. */
.kontaktweg__fuss { position: relative; }
.kontaktweg__zusatz,
.kontaktweg__meldung { display: block; transition: opacity var(--weich), transform var(--weich); }
.kontaktweg__meldung {
  position: absolute;
  inset: 0;
  color: var(--kalt);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
.kontaktweg__fuss[data-meldung='ja'] .kontaktweg__zusatz { opacity: 0; transform: translateY(-4px); }
.kontaktweg__fuss[data-meldung='ja'] .kontaktweg__meldung { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tafel[data-puls='ja']::before,
  .tafel[data-puls='ja']::after { animation: none; }
  .kontaktweg__zusatz, .kontaktweg__meldung { transition: none; }
}