/* DSP Cockpit (ein Produkt von Tempoblick), Gestaltung "Fantastic".
   Ergaenzt stil.css (Grundlagen, Formulare, Tabellen) und haengt alles an
   body.stil-neu. Stand nach den Aenderungswuenschen vom 23.09.2026: Farben
   gesaenftigt (kein Neon), Lichtspuren statt Nebel im Hero, Hebel der
   Vorschau als Zeilen mit Kennzahl-Begriffen, Vorteile als Schalttafel
   (Tabs), kein Abzeichen, kein Laufband, kein Schlusssatz, kein Fantastic in
   der Fusszeile, kein Zeigerlicht; die Lichtspuren liegen fest hinter der
   ganzen Seite. Aufbau: Tokens, Grund, Kopfzeile, Knoepfe, Hero mit
   Lichtspuren und Cockpit-Vorschau, Anmeldung mit Orbit, Vorteile, FAQ,
   Kontakt, Fusszeile, Unterseiten, Team-Bereich, Bewegung, Druck, schmale
   Geraete.

   Muster nach 21st.dev / Magic UI / Aceternity, in reinem CSS nachgebaut:
   Container Scroll, Spotlight, Border Beam, Glowing Effect, Blur Fade, Text
   Rotate, Radial Orbital, Number Ticker, Tabs (JS in buehne.js), Lichtspuren
   (lichtspuren.js).

   Kontraste (WCAG 2, nachgerechnet): Text-1 #F2F5F9 auf #07090F 18,4:1,
   Text-2 #A9B3C1 9,3:1, Text-3 #7E8898 5,6:1, Akzent #3FA79B 6,8:1,
   Akzent hell #7FCFC3 11,0:1, Bernstein #D9A441 8,9:1, dunkler Text
   #06201C auf Akzent 5,9:1, Status gruen/rot/gelb 13,8 / 11,3 / 13,6:1.
   Kopfzeile bei 375 px: Marke 118 + Knopf 122 + Schalter 44 + Luecken 24 =
   308 px von 343 px. */

/* ============================================================ Tokens */
body.stil-neu {
  --bg: #07090F;
  --bg-2: #0B0E16;
  --bg-3: #10141D;
  --karte: rgba(255, 255, 255, .035);
  --karte-fest: #0F131C;
  --glas: rgba(11, 14, 22, .62);
  --linie: rgba(255, 255, 255, .09);
  --linie-stark: rgba(255, 255, 255, .16);
  --text-1: #F2F5F9;
  --text-2: #A9B3C1;
  --text-3: #7E8898;
  --text-invers: #06201C;
  --text-invers-2: #06201C;
  --akzent: #3FA79B;
  --akzent-2: #5CBFB2;
  --akzent-dunkel: #7FCFC3;
  --akzent-hell: rgba(63, 167, 155, .12);
  --amber: #D9A441;
  --status-ja: #4ADE80;  --status-ja-bg: rgba(74, 222, 128, .1);
  --status-nein: #FCA5A5; --status-nein-bg: rgba(252, 165, 165, .1);
  --status-offen: #FCD34D; --status-offen-bg: rgba(252, 211, 77, .1);
  --font-titel: 'Geist', 'Geist Ersatz', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Geist', 'Geist Ersatz', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --radius-s: 8px; --radius: 12px; --radius-l: 20px; --radius-xl: 28px;
  --fokus: 0 0 0 2px var(--bg), 0 0 0 4px var(--akzent);
  --max-breite: 1152px;
  --schatten: 0 30px 80px -30px rgba(0, 0, 0, .8);
  --leicht: cubic-bezier(.16, 1, .3, 1);
  --ink: var(--text-1); --ink2: var(--text-2); --ink3: var(--text-2); --ink4: var(--text-3); --ink5: var(--text-3);
  --rand: var(--linie); --rand-aktiv: var(--akzent);
  --gruen: var(--status-ja); --gelb: var(--status-offen); --orange: var(--status-offen); --rot: var(--status-nein);
  --fortschritt: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
/* Filmkorn ueber allem, sehr leise. */
body.stil-neu::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@property --w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ============================================================ Grund */
body.stil-neu ::selection { background: rgba(63, 167, 155, .35); color: var(--text-1); }
body.stil-neu a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.stil-neu a:hover { color: var(--akzent-dunkel); }
body.stil-neu h1, body.stil-neu h2, body.stil-neu h3, body.stil-neu h4 {
  font-family: var(--font-titel); color: var(--text-1); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance;
}
body.stil-neu h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0 0 14px; }
body.stil-neu h3 { font-size: 1.25rem; margin: 0 0 8px; letter-spacing: -.015em; }
body.stil-neu p { color: var(--text-2); }
body.stil-neu .klein { font-size: .875rem; }
body.stil-neu .leise { color: var(--text-3); }
body.stil-neu .kicker {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  color: var(--akzent); margin: 0 0 12px; text-transform: none;
}
body.stil-neu .huelle { max-width: var(--max-breite); padding: 0 24px; }
body.stil-neu section.block { padding: 112px 0; position: relative; }
body.stil-neu .abschnitt-kopf { max-width: 720px; margin-bottom: 44px; }
body.stil-neu .abschnitt-kopf p { font-size: 1.125rem; margin: 0; }
body.stil-neu .abschnitt-kopf p + p { margin-top: 14px; }
body.stil-neu :focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 6px; }
body.stil-neu .sprung { background: var(--akzent); color: var(--text-invers); }
body.stil-neu main { display: block; }

/* Fortschrittsleiste oben */
.stil-neu .fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none;
  background: linear-gradient(90deg, var(--akzent), var(--akzent-2), var(--amber));
  transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0));
}
/* Lichtspuren (lichtspuren.js): fest hinter der ganzen Seite, laufen beim
   Scrollen mit. Alles Sichtbare liegt darueber (main, Fusszeile). */
.stil-neu canvas.lichtspuren { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.6s ease; }
.stil-neu canvas.lichtspuren.bereit { opacity: 1; }
.stil-neu main, .stil-neu footer.fuss { position: relative; z-index: 2; }

/* Reveal: Blur-Fade beim Erscheinen, nur mit js-anim (kopf.js). Ohne
   JavaScript oder mit reduzierter Bewegung ist alles sofort sichtbar. */
html.js-anim .stil-neu [data-reveal]:not([data-worte]) {
  opacity: 0; transform: translateY(22px); filter: blur(8px);
  transition: opacity .9s var(--leicht), transform .9s var(--leicht), filter .9s var(--leicht);
}
html.js-anim .stil-neu [data-reveal].ist-da { opacity: 1; transform: none; filter: none; }
html.js-anim .stil-neu .einblenden { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--leicht), transform .8s var(--leicht); }
html.js-anim .stil-neu .einblenden.sichtbar { opacity: 1; transform: none; }

/* ============================================================ Kopfzeile */
body.stil-neu .kopf {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; background: none; border: 0; box-shadow: none;
}
body.stil-neu .kopf .huelle {
  pointer-events: auto; max-width: 1080px; height: 60px; display: flex; align-items: center; gap: 12px;
  padding: 0 10px 0 20px; border-radius: 999px; position: relative;
  background: rgba(10, 13, 20, .55); border: 1px solid var(--linie);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .3s, box-shadow .3s, transform .3s;
}
body.stil-neu.gescrollt .kopf .huelle { background: rgba(10, 13, 20, .78); box-shadow: 0 16px 50px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
body.stil-neu .marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-1); }
body.stil-neu .marke img { width: 28px; height: 28px; display: block; }
body.stil-neu .marke .wort { font-family: var(--font-titel); font-size: 1.05rem; letter-spacing: -.01em; color: var(--text-1); font-weight: 400; white-space: nowrap; }
body.stil-neu .marke .wort b { font-weight: 700; }
body.stil-neu nav.haupt { margin-left: auto; display: flex; align-items: center; gap: 4px; }
body.stil-neu nav.haupt a:not(.knopf) {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color .25s, background .25s;
}
body.stil-neu nav.haupt a:not(.knopf):hover { color: var(--text-1); background: rgba(255, 255, 255, .05); }
body.stil-neu nav.haupt a:not(.knopf).aktiv { color: var(--text-1); }
/* Tubelight: ein Lichtstrich ueber dem aktiven Punkt. */
body.stil-neu nav.haupt a:not(.knopf)::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 0; height: 2px; border-radius: 2px; transform: translateX(-50%);
  background: var(--akzent); box-shadow: 0 0 12px 2px rgba(63, 167, 155, .55); transition: width .35s var(--leicht), opacity .3s; opacity: 0;
}
body.stil-neu nav.haupt a:not(.knopf).aktiv::before { width: 60%; opacity: 1; }
body.stil-neu nav.haupt .knopf { margin-left: 8px; }
body.stil-neu .menue-schalter { display: none; }
body.stil-neu .knopf.nur-schmal { display: none; }

/* ============================================================ Knoepfe */
/* Nach dem Vorbild "Animated Generate Button" (21st.dev), auf unsere Farben
   uebertragen und nach Ahmads Wunsch (23.09.2026) ohne Schimmern in Ruhe:
   Glaskoerper mit Lichtkante oben und ein schmaler dunkler Ring aussen (als
   Schatten mit Ausdehnung). Beim Hover saugt der Knopf kleine Lichtpunkte aus
   seiner Umgebung auf (Partikel aus buehne.js) und laedt sich von der Mitte
   nach aussen mit Farbe auf (clip-path-Kreis). Buchstaben liegen einzeln in
   .buchstabe (buehne.js, Versatz --i) fuer den Ausbruch beim Klick. Voll =
   Teal-Glas fuer die Hauptaktion, Glas = neutrales Glas. */
body.stil-neu .knopf {
  --licht: 127, 207, 195;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; font: 500 .95rem/1 var(--font-text); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .25s var(--leicht), box-shadow .4s, background .4s, border-color .4s, color .4s;
  isolation: isolate; white-space: nowrap;
}
body.stil-neu .knopf.gross { height: 54px; padding: 0 28px; font-size: 1.02rem; }
body.stil-neu .knopf.klein { height: 40px; padding: 0 18px; font-size: .9rem; }
/* Fuellung: beim Hover waechst die Farbe als Kreis aus der Mitte, je laenger
   der Zeiger bleibt, desto voller (1,8 s bis in die Ecken); beim Verlassen
   zieht sie sich in .6 s zurueck. 80 % Radius decken jede Knopfbreite ab. */
body.stil-neu .knopf.voll::before, body.stil-neu .knopf.glas::before, body.stil-neu .knopf.linie::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, #7FCFC3, #5CBFB2 30%, var(--akzent) 60%, #2F8C82);
  clip-path: circle(0% at 50% 50%); transition: clip-path .6s var(--leicht), filter .4s;
}
body.stil-neu .knopf.glas::before, body.stil-neu .knopf.linie::before {
  background: radial-gradient(circle at 50% 50%, rgba(127, 207, 195, .55), rgba(63, 167, 155, .3) 70%);
}
body.stil-neu .knopf.voll:hover::before, body.stil-neu .knopf.glas:hover::before, body.stil-neu .knopf.linie:hover::before {
  clip-path: circle(80% at 50% 50%); transition: clip-path 1.8s cubic-bezier(.35, .05, .55, .95), filter .4s;
}
/* Partikel: beim Hover fliegen kleine Lichtpunkte von aussen auf den Knopf zu
   und werden in der Mitte aufgesogen (Elemente aus buehne.js: Winkel --w,
   Abstand --r, Versatz --d). Sie laufen nur, solange der Zeiger drauf liegt. */
body.stil-neu .knopf-partikel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
body.stil-neu .knopf-partikel i {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: #BFF0E8; box-shadow: 0 0 6px 1px rgba(127, 207, 195, .9); opacity: 0;
  transform: rotate(var(--w, 0deg)) translateX(var(--r, 80px)) scale(.5);
}
body.stil-neu .knopf.voll:hover .knopf-partikel i { animation: partikel-sog 1.1s ease-in calc(var(--d, 0) * 1s) infinite; }
@keyframes partikel-sog {
  0% { transform: rotate(var(--w, 0deg)) translateX(var(--r, 80px)) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(var(--w, 0deg)) translateX(6px) scale(.15); opacity: 0; }
}
body.stil-neu .knopf.voll {
  background: linear-gradient(180deg, rgba(63, 167, 155, .30), rgba(63, 167, 155, .16) 55%, rgba(6, 32, 28, .55));
  color: var(--text-1); font-weight: 600; border-color: rgba(var(--licht), .35);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 2px 2px rgba(255, 255, 255, .12), inset 0 4px 4px rgba(255, 255, 255, .06), inset 0 8px 8px rgba(255, 255, 255, .04),
    inset 0 -8px 8px -6px rgba(var(--licht), .35), inset 0 -16px 16px -8px rgba(var(--licht), .2),
    0 0 0 4px rgba(7, 9, 15, .85), 0 0 0 5px rgba(255, 255, 255, .07),
    0 10px 30px -12px rgba(63, 167, 155, .55);
}
body.stil-neu .knopf.voll:hover {
  transform: translateY(-1px); color: var(--text-1); border-color: rgba(var(--licht), .6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .26), inset 0 2px 2px rgba(255, 255, 255, .14), inset 0 4px 4px rgba(255, 255, 255, .07), inset 0 8px 8px rgba(255, 255, 255, .04),
    inset 0 -8px 8px -6px rgba(var(--licht), .6), inset 0 -16px 16px -8px rgba(var(--licht), .35),
    0 0 0 4px rgba(7, 9, 15, .85), 0 0 0 5px rgba(var(--licht), .18),
    0 16px 40px -14px rgba(63, 167, 155, .85);
}
body.stil-neu .knopf.voll:active { transform: translateY(0); background: linear-gradient(180deg, rgba(63, 167, 155, .42), rgba(63, 167, 155, .24) 55%, rgba(6, 32, 28, .5)); border-color: rgba(var(--licht), .8); }
body.stil-neu .knopf.voll:active::before { filter: brightness(1.15); }
body.stil-neu .knopf.glas, body.stil-neu .knopf.linie {
  background: rgba(255, 255, 255, .04); color: var(--text-1); border-color: var(--linie-stark);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .16), inset 0 2px 2px rgba(255, 255, 255, .08), inset 0 4px 4px rgba(255, 255, 255, .04),
    0 0 0 4px rgba(7, 9, 15, .85), 0 0 0 5px rgba(255, 255, 255, .06);
}
body.stil-neu .knopf.glas:hover, body.stil-neu .knopf.linie:hover {
  background: rgba(255, 255, 255, .07); border-color: rgba(var(--licht), .45); color: var(--text-1); transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .2), inset 0 2px 2px rgba(255, 255, 255, .1), inset 0 4px 4px rgba(255, 255, 255, .05),
    inset 0 -8px 8px -6px rgba(var(--licht), .35), inset 0 -16px 16px -8px rgba(var(--licht), .2),
    0 0 0 4px rgba(7, 9, 15, .85), 0 0 0 5px rgba(var(--licht), .14);
}
/* Tastaturfokus bleibt sichtbar, auch ueber den Schatten-Ringen. */
body.stil-neu .knopf.voll:focus-visible, body.stil-neu .knopf.glas:focus-visible, body.stil-neu .knopf.linie:focus-visible { box-shadow: var(--fokus); border-radius: 999px; }
/* Buchstaben: ruhig in Weiss, beim Hover weiter weiss (auf Glas mit Schein,
   auf Voll mit leisem Schatten gegen die Fuellung); beim Klick ein kurzer
   Ausbruch (Klasse puls). */
body.stil-neu .knopf .knopf-text { position: relative; z-index: 1; display: inline-flex; }
body.stil-neu .knopf .buchstabe { display: inline-block; white-space: pre; transition: color .4s, text-shadow .4s; }
body.stil-neu .knopf.voll .buchstabe { color: #fff; }
body.stil-neu .knopf.glas:hover .buchstabe, body.stil-neu .knopf.linie:hover .buchstabe { color: #fff; text-shadow: 0 0 1px rgba(191, 240, 232, .9), 0 0 8px rgba(127, 207, 195, .6); }
body.stil-neu .knopf.voll:hover .buchstabe { color: #fff; text-shadow: 0 1px 2px rgba(6, 32, 28, .5); }
body.stil-neu .knopf.puls .buchstabe, body.stil-neu .knopf.puls:hover .buchstabe { animation: buchstabe-ausbruch .9s ease-in-out calc(var(--i, 0) * .04s) 1; }
@keyframes buchstabe-ausbruch { 50% { transform: scale(1.6); filter: blur(5px) brightness(1.6) drop-shadow(-18px 8px 10px rgba(127, 207, 195, .9)); } }
body.stil-neu .knopf.gefahr { background: rgba(252, 165, 165, .12); color: var(--status-nein); border-color: rgba(252, 165, 165, .35); }
body.stil-neu .knopf.gefahr:hover { background: rgba(252, 165, 165, .2); color: var(--status-nein); }
body.stil-neu .knopf.breit { width: 100%; }
body.stil-neu .aktionen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================ Hero */
body.stil-neu .held { position: relative; overflow: hidden; padding: 160px 0 60px; min-height: 100svh; background: none; }
/* Horizontglut: ein warmes Licht dort, wo die Strasse verschwindet. */
.stil-neu .held::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 28% at 50% 30%, rgba(217, 164, 65, .07), transparent 70%);
}
.stil-neu .held-inhalt { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
body.stil-neu .held h1 {
  font-size: clamp(3rem, 8.4vw, 7rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; margin: 0 0 22px; max-width: 12ch;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF3 55%, #9FB0C0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (background-clip: text) { body.stil-neu .held h1 { color: var(--text-1); background: none; } }
/* Wort-Reveal (Blur Fade pro Wort, buehne.js baut die Huellen). */
.stil-neu h1 .wort { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .08em; margin: 0 -.04em -.08em; }
.stil-neu h1 .wort-innen { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; }
html.js-anim .stil-neu h1 .wort-innen {
  transform: translateY(105%); opacity: 0; filter: blur(12px);
  transition: transform 1s var(--leicht) calc(var(--i, 0) * 120ms), opacity .8s ease calc(var(--i, 0) * 120ms), filter .8s ease calc(var(--i, 0) * 120ms);
}
html.js-anim .stil-neu h1.ist-da .wort-innen { transform: none; opacity: 1; filter: none; }
/* Text Rotate: die Benefit-Zeile faehrt vertikal aus der Zeile. */
body.stil-neu .rotator {
  position: relative; height: 1.4em; overflow: hidden; margin: 0 0 18px;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 500; color: var(--akzent); letter-spacing: -.01em; line-height: 1.4;
}
.stil-neu .rotator-wort { display: block; animation: rotator-rein .6s var(--leicht) both; will-change: transform; }
.stil-neu .rotator-wort.aus { animation: none; transition: transform .34s ease-in, opacity .3s ease-in, filter .3s ease-in; transform: translateY(-110%); opacity: 0; filter: blur(6px); }
@keyframes rotator-rein { from { transform: translateY(110%); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
body.stil-neu .held .unter { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 40ch; margin: 0 0 30px; color: var(--text-2); }
body.stil-neu .held .aktionen { justify-content: center; margin-bottom: 18px; }
body.stil-neu .mikrotext { font-size: .875rem; color: var(--text-3); max-width: 46ch; margin: 0; }

/* ---- Cockpit-Vorschau: Container Scroll */
.stil-neu .buehne-huelle { position: relative; z-index: 2; margin-top: 64px; }
.stil-neu .buehne { perspective: 1400px; --neigung: 44; --zoom: .9; --hub: 36; }
.stil-neu .cockpit {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  transform: translateY(calc(var(--hub) * 1px)) rotateX(calc(var(--neigung) * 1deg)) scale(var(--zoom)); transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(18, 23, 33, .96), rgba(9, 12, 18, .98));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 50px 140px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(63, 167, 155, .05), 0 0 120px -30px rgba(63, 167, 155, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
  will-change: transform;
}
/* Border Beam: ein Lichtstrahl wandert um den Rand. */
.stil-neu .cockpit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--w), transparent 0 78%, var(--akzent) 88%, var(--amber) 95%, transparent 100%);
  -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;
  animation: kreisen 7s linear infinite;
}
@keyframes kreisen { to { --w: 360deg; } }
.stil-neu .cockpit-kopf {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--linie);
  background: rgba(255, 255, 255, .02); font-family: var(--font-mono); font-size: .78rem; color: var(--text-3);
}
.stil-neu .cockpit-kopf .punkte { display: inline-flex; gap: 6px; }
.stil-neu .cockpit-kopf .punkte i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.stil-neu .cockpit-kopf .punkte i:first-child { background: rgba(63, 167, 155, .8); box-shadow: 0 0 10px rgba(63, 167, 155, .6); }
.stil-neu .cockpit-titel { color: var(--text-1); font-weight: 500; white-space: nowrap; }
/* Untertitel rechts vom Produktnamen, durch einen feinen Strich getrennt; auf schmalen Fenstern laeuft er mit Auslassung aus. */
.stil-neu .cockpit-untertitel { display: inline-flex; align-items: center; gap: 14px; min-width: 0; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stil-neu .cockpit-untertitel::before { content: ""; flex: none; width: 1px; height: 12px; background: var(--linie-stark); }
.stil-neu svg.strahlen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.stil-neu .strahl-basis { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.5; }
.stil-neu .strahl-licht { fill: none; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(127, 207, 195, .7)); }
/* Lichtimpuls: der helle Kopf, der am vorderen Ende des Segments entlang der Linie fliegt (buehne.js). */
.stil-neu .strahl-puls { fill: #F2FBF9; filter: drop-shadow(0 0 8px rgba(127, 207, 195, 1)); }
.stil-neu .cockpit-koerper {
  position: relative; z-index: 2; display: grid; grid-template-columns: .9fr .9fr 1.9fr; align-items: center; gap: 44px; padding: 40px 40px 28px;
}
.stil-neu .quelle, .stil-neu .hebel {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius-l);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--linie-stark); position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .4s, box-shadow .4s;
}
/* Kachel leuchtet auf, wenn ein Lichtimpuls ankommt oder abgeht (Klasse an, buehne.js):
   schnell an (.1 s) mit kleinem Plopp, langsam wieder aus (.4 s aus der Grundregel). */
.stil-neu .quelle.an, .stil-neu .hebel.an {
  border-color: rgba(63, 167, 155, .6); box-shadow: 0 0 40px -14px rgba(63, 167, 155, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .1s, box-shadow .1s; animation: kachel-plopp .45s var(--leicht);
}
@keyframes kachel-plopp { 35% { transform: scale(1.03); } 100% { transform: scale(1); } }
.stil-neu .quelle-symbol, .stil-neu .hebel-symbol { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--akzent); background: rgba(63, 167, 155, .1); margin-bottom: 8px; }
.stil-neu .quelle-symbol svg, .stil-neu .hebel-symbol svg { width: 20px; height: 20px; }
.stil-neu .quelle-titel, .stil-neu .hebel-titel { color: var(--text-1); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.stil-neu .quelle-text, .stil-neu .hebel-text { color: var(--text-3); font-size: .82rem; line-height: 1.4; }
.stil-neu .kern-knoten { display: flex; flex-direction: column; align-items: center; gap: 12px; justify-self: center; text-align: center; }
.stil-neu .kern-symbol {
  --ladung: 0;
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 40% 35%, rgba(63, 167, 155, .28), rgba(63, 167, 155, .06) 60%, transparent 100%);
  border: 1px solid rgba(63, 167, 155, .45); box-shadow: 0 0 60px -10px rgba(63, 167, 155, .55), inset 0 0 30px rgba(63, 167, 155, .12);
}
/* Laden des Kerns: die Fuellung wird mit --ladung heller, der Ring fuellt sich im Uhrzeigersinn,
   die Welle laeuft beim Aufploppen (Klasse voll) einmal nach aussen. Werte setzt buehne.js. */
.stil-neu .kern-fuellung {
  position: absolute; inset: 0; border-radius: 50%; opacity: var(--ladung);
  background: radial-gradient(circle at 50% 50%, rgba(127, 207, 195, .6), rgba(63, 167, 155, .3) 55%, transparent 78%);
}
.stil-neu .kern-ladung {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--akzent-2) calc(var(--ladung) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px rgba(63, 167, 155, .8));
}
.stil-neu .kern-welle { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--akzent-2); opacity: 0; pointer-events: none; }
.stil-neu .kern-symbol.voll { animation: ploppen .7s var(--leicht); }
/* Nach dem Plopp verschwinden Ring und Fuellung mit der Welle, statt sich zurueckzudrehen. */
.stil-neu .kern-symbol.entladen .kern-ladung, .stil-neu .kern-symbol.entladen .kern-fuellung { opacity: 0; transition: opacity .9s ease-out; }
.stil-neu .kern-symbol.voll .kern-welle { animation: welle .9s ease-out forwards; }
@keyframes ploppen { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes welle { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.stil-neu .kern-symbol::before, .stil-neu .kern-symbol::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(63, 167, 155, .22); animation: atmen 4s ease-in-out infinite;
}
.stil-neu .kern-symbol::after { inset: -30px; border-color: rgba(63, 167, 155, .12); animation-delay: 1s; }
@keyframes atmen { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.06); opacity: 1; } }
.stil-neu .kern-symbol img { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(63, 167, 155, .7)); }
.stil-neu .kern-name { font-family: var(--font-mono); font-size: .82rem; color: var(--text-1); }
/* Die vier Hebel untereinander, jede Kachel mit Anschlusspunkt links, an dem
   die Lichtlinie ankommt, und Kennzahl-Begriffen rechts (keine Werte). */
.stil-neu .hebel-liste { display: grid; grid-template-columns: 1fr; gap: 14px; }
.stil-neu .hebel { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px 12px 16px; }
.stil-neu .hebel-symbol { margin-bottom: 0; flex: 0 0 auto; }
.stil-neu .hebel-text-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.stil-neu .hebel-kennzahlen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 1 auto; max-width: 44%; }
.stil-neu .hebel-kennzahl {
  font-family: var(--font-mono); font-size: .68rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(63, 167, 155, .35); color: var(--akzent-dunkel); background: rgba(63, 167, 155, .08);
}
.stil-neu .hebel-anschluss {
  position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%);
  background: var(--akzent); box-shadow: 0 0 10px rgba(63, 167, 155, .8), 0 0 0 3px rgba(9, 12, 18, 1);
  transition: transform .3s, box-shadow .3s;
}
.stil-neu .hebel.an .hebel-anschluss { transition: transform .1s, box-shadow .1s; }
.stil-neu .hebel.an .hebel-anschluss { transform: translateY(-50%) scale(1.5); box-shadow: 0 0 16px rgba(127, 207, 195, 1), 0 0 0 3px rgba(9, 12, 18, 1); }
/* Scorecard-Leiter: die Marke faehrt auf Fantastic. */
.stil-neu .standing { position: relative; z-index: 2; padding: 18px 40px 26px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
.stil-neu .standing-titel { font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); white-space: nowrap; }
.stil-neu .standing-leiter { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); padding: 4px; }
.stil-neu .stufe-feld { text-align: center; font-family: var(--font-mono); font-size: .8rem; padding: 8px 0; color: var(--text-3); position: relative; z-index: 1; transition: color .6s; }
.stil-neu .standing-marke {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 4)); border-radius: 999px;
  background: linear-gradient(135deg, rgba(63, 167, 155, .28), rgba(63, 167, 155, .1)); border: 1px solid rgba(63, 167, 155, .5);
  box-shadow: 0 0 30px -6px rgba(63, 167, 155, .7); transition: left 1.8s var(--leicht);
}
.stil-neu .standing.aktiv .standing-marke { left: calc(4px + (100% - 8px) * var(--ziel, 3) / var(--n, 4)); }
.stil-neu .standing.aktiv .stufe-feld.ziel { color: var(--text-1); font-weight: 500; }

/* ============================================================ Anmeldung */
body.stil-neu .anmeldung { background: radial-gradient(800px 400px at 15% 20%, rgba(63, 167, 155, .07), transparent 60%); }
.stil-neu .orbit-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; margin-bottom: 48px; }
/* Der Orbit misst sich selbst (Container-Einheiten): die Knoten sitzen auf
   dem aeusseren Ring, 34 px Luft rundum, damit nichts aus dem Kasten ragt.
   Die Bahn ist ein Punkt in der Mitte, der sich dreht; so hat die Drehung
   keinen ueberstehenden Rahmen, der die Seite breiter macht. */
.stil-neu .orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; overflow: hidden; overflow: clip; }
.stil-neu .orbit-ring { position: absolute; inset: 34px; border-radius: 50%; border: 1px solid var(--linie-stark); }
.stil-neu .orbit-ring.mitte { inset: calc(34px + 12%); border-style: dashed; border-color: rgba(255, 255, 255, .12); animation: drehen 80s linear infinite reverse; }
.stil-neu .orbit-ring.innen { inset: calc(34px + 22%); border-color: rgba(63, 167, 155, .25); box-shadow: inset 0 0 50px rgba(63, 167, 155, .07), 0 0 60px -20px rgba(63, 167, 155, .3); }
.stil-neu .orbit-bahn { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: drehen 40s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.stil-neu .orbit.halt .orbit-bahn, .stil-neu .orbit.halt .orbit-knoten-innen, .stil-neu .orbit.halt .orbit-ring.mitte { animation-play-state: paused; }
.stil-neu .orbit-knoten {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; text-decoration: none; border-radius: 50%;
  transform: rotate(var(--a)) translate(calc(50cqw - 34px)) rotate(calc(-1 * var(--a)));
}
.stil-neu .orbit-knoten:nth-child(1) { --a: -90deg; }
.stil-neu .orbit-knoten:nth-child(2) { --a: 30deg; }
.stil-neu .orbit-knoten:nth-child(3) { --a: 150deg; }
.stil-neu .orbit-knoten-innen {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(12, 16, 24, .9); border: 1px solid var(--linie-stark); color: var(--text-1);
  font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: drehen 40s linear infinite reverse; transition: border-color .3s, box-shadow .3s, transform .3s;
}
.stil-neu .orbit-knoten:hover .orbit-knoten-innen, .stil-neu .orbit-knoten.aktiv .orbit-knoten-innen, .stil-neu .orbit-knoten:focus-visible .orbit-knoten-innen {
  border-color: var(--akzent); box-shadow: 0 0 30px -4px rgba(63, 167, 155, .7), inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--akzent);
}
.stil-neu .orbit-knoten:nth-child(1) .orbit-knoten-innen { animation-delay: 0s; }
.stil-neu .kern {
  position: absolute; inset: calc(34px + 26%); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px;
  background: radial-gradient(circle at 45% 40%, rgba(63, 167, 155, .18), rgba(12, 16, 24, .95) 70%);
  border: 1px solid rgba(63, 167, 155, .3); box-shadow: 0 0 80px -20px rgba(63, 167, 155, .6);
  --anteil: 0;
}
.stil-neu .kern .ring { position: absolute; inset: -9%; width: 118%; height: 118%; transform: rotate(-90deg); }
.stil-neu .ring-spur { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3; }
.stil-neu .ring-wert {
  fill: none; stroke: var(--akzent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 339.3;
  stroke-dashoffset: calc(339.3 * (1 - var(--anteil))); transition: stroke-dashoffset 1.8s var(--leicht);
  filter: drop-shadow(0 0 6px rgba(63, 167, 155, .8));
}
.stil-neu .kern-zahl { font-family: var(--font-mono); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 500; color: var(--text-1); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stil-neu .kern-text { font-size: .82rem; color: var(--text-3); }
.stil-neu .stufen { display: grid; gap: 14px; }
body.stil-neu .karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-l); padding: 26px 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); position: relative;
}
body.stil-neu .karte.stufe { padding: 22px 26px 22px 26px; transition: border-color .35s, box-shadow .35s, transform .35s var(--leicht), background .35s; }
body.stil-neu .karte.stufe::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(63, 167, 155, .5), transparent); opacity: 0; transition: opacity .35s; }
body.stil-neu .karte.stufe.betont, body.stil-neu .karte.stufe:hover { border-color: rgba(63, 167, 155, .45); box-shadow: 0 20px 50px -30px rgba(63, 167, 155, .6), inset 0 1px 0 rgba(255, 255, 255, .06); background: rgba(63, 167, 155, .05); transform: translateY(-2px); }
body.stil-neu .karte.stufe.betont::before, body.stil-neu .karte.stufe:hover::before { opacity: 1; }
.stil-neu .stufe-marke {
  position: absolute; top: 20px; right: 22px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .9rem; color: var(--text-2); border: 1px solid var(--linie-stark); background: rgba(255, 255, 255, .03);
}
body.stil-neu .karte.stufe .kicker { margin-bottom: 6px; padding-right: 48px; }
body.stil-neu .karte.stufe h3 { font-size: 1.2rem; padding-right: 48px; }
body.stil-neu .karte.stufe p:last-child { margin: 0; font-size: .98rem; }
body.stil-neu .karte.balken-karte { margin-bottom: 20px; padding: 24px 28px; }
.stil-neu .balken-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.stil-neu .balken-label { font-family: var(--font-titel); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; color: var(--text-1); letter-spacing: -.02em; }
.stil-neu .balken-label.ausverkauft { color: var(--amber); }
.stil-neu .balken { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; position: relative; }
.stil-neu .balken-fuellung {
  display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2F8C82, var(--akzent), var(--amber));
  box-shadow: 0 0 20px rgba(63, 167, 155, .55); transition: width 1.4s var(--leicht); position: relative; overflow: hidden;
}
.stil-neu .balken-fuellung::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: glanz-balken 3.2s ease-in-out 1.2s infinite; }
@keyframes glanz-balken { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.stil-neu .balken.ausverkauft .balken-fuellung { background: var(--amber); }
body.stil-neu .balken-legende { margin: 12px 0 0; color: var(--text-3); font-family: var(--font-mono); font-size: .8rem; }

/* ---- Glowing Effect: Leuchtrand am Formular folgt dem Zeiger (--start, --aktiv aus buehne.js). */
.stil-neu [data-leuchtrand] { --start: 0; --aktiv: 0; --spread: 34; }
.stil-neu [data-leuchtrand]::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  opacity: var(--aktiv); transition: opacity .4s;
  background: conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), transparent 0deg, var(--akzent), var(--akzent-2), var(--amber), transparent calc(var(--spread) * 2deg));
  -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;
}
body.stil-neu .karte.formular-karte { padding: 34px 36px; background: rgba(255, 255, 255, .03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stil-neu .formular-kopf { margin-bottom: 22px; transition: margin-bottom .5s var(--leicht); }
body.stil-neu .formular-titel { font-size: 1.6rem; margin: 0; }
/* Zugeklapptes Formular (Klasse zu an der Karte, nur mit js-anim): der Kopf
   ist der Schalter, die Felder klappen ueber eine Rasterzeile (0fr -> 1fr)
   auf und ploppen dabei leicht. Nach dem Aufklappen gibt buehne.js mit der
   Klasse frei den Ueberlauf wieder frei (Fokusringe, Partikel). */
.stil-neu [data-aufklapp] .formular-kopf { cursor: pointer; }
body.stil-neu .formular-schalter {
  all: unset; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: inherit; font: inherit; border-radius: 8px;
}
body.stil-neu .formular-schalter:focus-visible { box-shadow: var(--fokus); }
.stil-neu .schalter-pfeil { flex: none; color: var(--akzent-dunkel); transform: rotate(180deg); transition: transform .5s var(--leicht), color .3s; }
.stil-neu [data-aufklapp] .formular-kopf:hover .schalter-pfeil { color: #fff; }
.stil-neu .formular-felder { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--leicht); }
.stil-neu .formular-innen { min-height: 0; overflow: hidden; transition: opacity .45s var(--leicht) .1s, transform .55s cubic-bezier(.34, 1.4, .64, 1) .05s; }
.stil-neu .formular-karte.frei .formular-innen { overflow: visible; }
html.js-anim .stil-neu .formular-karte.zu .formular-kopf { margin-bottom: 0; }
html.js-anim .stil-neu .formular-karte.zu .schalter-pfeil { transform: rotate(0deg); }
html.js-anim .stil-neu .formular-karte.zu .formular-felder { grid-template-rows: 0fr; }
html.js-anim .stil-neu .formular-karte.zu .formular-innen { opacity: 0; transform: translateY(-10px) scale(.985); overflow: hidden; transition: opacity .3s, transform .4s var(--leicht); }
body.stil-neu .pflicht-hinweis { color: var(--text-3); margin: 0 0 16px; }
body.stil-neu .formular { display: grid; gap: 18px; }
body.stil-neu .zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
body.stil-neu .feld { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
body.stil-neu .feld label, body.stil-neu .feld legend { font-size: .9rem; font-weight: 500; color: var(--text-1); }
body.stil-neu .feld legend { padding: 0; margin-bottom: 10px; }
body.stil-neu .feld .leise { color: var(--text-3); font-weight: 400; }
body.stil-neu input[type=text], body.stil-neu input[type=email], body.stil-neu input[type=tel], body.stil-neu input[type=number], body.stil-neu input[type=password], body.stil-neu textarea, body.stil-neu select {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--radius); font: inherit; color: var(--text-1);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linie-stark); transition: border-color .25s, box-shadow .25s, background .25s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.stil-neu textarea { min-height: 150px; resize: vertical; }
body.stil-neu input::placeholder, body.stil-neu textarea::placeholder { color: var(--text-3); }
body.stil-neu input:focus-visible, body.stil-neu textarea:focus-visible, body.stil-neu select:focus-visible {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(63, 167, 155, .18), 0 0 30px -10px rgba(63, 167, 155, .6); background: rgba(63, 167, 155, .04);
}
body.stil-neu [aria-invalid="true"], body.stil-neu [aria-invalid="true"] input { border-color: var(--status-nein); }
body.stil-neu .praeferenz { display: grid; gap: 10px; }
body.stil-neu .wahl {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--linie); background: rgba(255, 255, 255, .025); color: var(--text-2); font-size: .95rem; line-height: 1.45;
  transition: border-color .25s, background .25s, transform .25s var(--leicht);
}
body.stil-neu .wahl:hover { border-color: var(--linie-stark); background: rgba(255, 255, 255, .05); }
body.stil-neu .wahl:has(input:checked) { border-color: rgba(63, 167, 155, .55); background: rgba(63, 167, 155, .07); color: var(--text-1); }
body.stil-neu .wahl:has(input:focus-visible) { box-shadow: var(--fokus); }
body.stil-neu .wahl input[type=radio] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 50%;
  border: 1.5px solid var(--linie-stark); background: transparent; display: grid; place-items: center; transition: border-color .2s, box-shadow .2s;
}
body.stil-neu .wahl input[type=radio]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); transform: scale(0); transition: transform .25s var(--leicht); }
body.stil-neu .wahl input[type=radio]:checked { border-color: var(--akzent); box-shadow: 0 0 14px rgba(63, 167, 155, .5); }
body.stil-neu .wahl input[type=radio]:checked::before { transform: scale(1); }
body.stil-neu .wahl input[type=radio]:focus-visible { outline: none; box-shadow: none; }
body.stil-neu .einwilligung { display: flex; gap: 14px; align-items: flex-start; font-size: .92rem; color: var(--text-2); cursor: pointer; }
body.stil-neu .einwilligung input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 6px;
  border: 1.5px solid var(--linie-stark); background: rgba(255, 255, 255, .03); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s;
}
body.stil-neu .einwilligung input[type=checkbox]::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--text-invers); border-bottom: 2px solid var(--text-invers); transform: rotate(-45deg) scale(0) translate(1px, -1px); transition: transform .2s var(--leicht); }
body.stil-neu .einwilligung input[type=checkbox]:checked { background: var(--akzent); border-color: var(--akzent); }
body.stil-neu .einwilligung input[type=checkbox]:checked::before { transform: rotate(-45deg) scale(1) translate(1px, -1px); }
body.stil-neu .einwilligung input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--fokus); }
body.stil-neu .falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
body.stil-neu .absenden { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
body.stil-neu .absenden .klein { max-width: 30ch; line-height: 1.4; }
body.stil-neu .meldung { padding: 14px 18px; border-radius: var(--radius); border: 1px solid; margin-bottom: 18px; font-size: .95rem; }
body.stil-neu .meldung.gut { background: var(--status-ja-bg); border-color: rgba(74, 222, 128, .35); color: var(--status-ja); }
body.stil-neu .meldung.fehler { background: var(--status-nein-bg); border-color: rgba(252, 165, 165, .35); color: var(--status-nein); }
body.stil-neu .meldung.info { background: var(--akzent-hell); border-color: rgba(63, 167, 155, .35); color: var(--akzent); }

/* ============================================================ Vorteile (Schalttafel) */
body.stil-neu .vorteile { padding-top: 120px; }
.stil-neu .tafel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.stil-neu .tafel-liste { display: grid; gap: 8px; position: sticky; top: 100px; }
.stil-neu .tafel-reiter {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; padding: 16px 18px; border-radius: var(--radius-l);
  background: rgba(255, 255, 255, .025); border: 1px solid var(--linie); color: var(--text-2);
  font: 500 1.02rem/1.3 var(--font-titel); letter-spacing: -.015em; cursor: pointer; position: relative; text-wrap: balance;
  transition: background .3s, border-color .3s, color .3s;
}
.stil-neu .tafel-reiter:hover { background: rgba(255, 255, 255, .05); color: var(--text-1); }
.stil-neu .tafel-reiter[aria-selected="true"] { background: rgba(63, 167, 155, .08); border-color: rgba(63, 167, 155, .45); color: var(--text-1); }
.stil-neu .tafel-reiter[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 2px; border-radius: 2px; background: var(--akzent); box-shadow: 0 0 12px rgba(63, 167, 155, .7); }
.stil-neu .tafel-reiter:focus-visible { box-shadow: var(--fokus); outline: none; }
.stil-neu .tafel-reiter .vorteil-symbol { width: 40px; height: 40px; border-radius: 12px; }
.stil-neu .tafel-reiter .vorteil-symbol svg { width: 20px; height: 20px; }
.stil-neu .tafel-buehne { position: relative; min-height: 380px; }
body.stil-neu .karte.vorteil {
  padding: 34px 36px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); isolation: isolate; overflow: hidden;
}
.stil-neu .tafel:not(.aktiv) .karte.vorteil + .karte.vorteil { margin-top: 16px; }
.stil-neu .tafel.aktiv .karte.vorteil.offen { animation: auf .5s var(--leicht); }
/* Magic Card: Lichtfleck am Zeiger (--mx, --my aus buehne.js). */
body.stil-neu .karte.vorteil::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(63, 167, 155, .14), transparent 62%);
}
body.stil-neu .karte.vorteil:hover::before { opacity: 1; }
body.stil-neu .karte.vorteil > * { position: relative; z-index: 1; }
.stil-neu .vorteil-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.stil-neu .vorteil-symbol {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--akzent); flex: 0 0 auto;
  background: rgba(63, 167, 155, .1); border: 1px solid rgba(63, 167, 155, .25);
}
.stil-neu .vorteil-symbol svg { width: 24px; height: 24px; }
body.stil-neu .karte.vorteil h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0; }
.stil-neu .vorteil-teaser { color: var(--text-1); font-size: 1.1rem; margin: 0 0 14px; max-width: 56ch; }
.stil-neu .vorteil-detail { margin: 0 0 20px; max-width: 64ch; }
.stil-neu .dahinter-titel { font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); margin: 0 0 8px; }
.stil-neu .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stil-neu .chip { font-family: var(--font-mono); font-size: .78rem; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(63, 167, 155, .35); background: rgba(63, 167, 155, .08); color: var(--text-1); }
.stil-neu .nachsatz { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: .95rem; max-width: 64ch; }
@keyframes auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============================================================ FAQ */
body.stil-neu .faq-abschnitt { border-top: 1px solid var(--linie); }
.stil-neu .faq-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.stil-neu .faq-kopf { position: sticky; top: 110px; }
body.stil-neu .faq-kopf h2 { margin: 0; }
.stil-neu .faq-liste { border-top: 1px solid var(--linie); }
body.stil-neu details.faq { border-bottom: 1px solid var(--linie); }
body.stil-neu details.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px;
  font-family: var(--font-titel); font-size: 1.1rem; font-weight: 500; color: var(--text-1); letter-spacing: -.01em; transition: color .25s;
}
body.stil-neu details.faq summary::-webkit-details-marker { display: none; }
body.stil-neu details.faq summary::after, body.stil-neu details.faq summary::before { content: none; display: none; }
.stil-neu .faq-plus { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie-stark); flex: 0 0 auto; transition: border-color .3s, background .3s; }
.stil-neu .faq-plus i { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--text-1); transform: translate(-50%, -50%); transition: transform .35s var(--leicht); }
.stil-neu .faq-plus i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
body.stil-neu details[open] .faq-plus i:last-child { transform: translate(-50%, -50%) rotate(0deg); }
body.stil-neu details.faq summary:hover { color: var(--akzent-dunkel); }
body.stil-neu details.faq summary:focus-visible { box-shadow: var(--fokus); }
body.stil-neu details.faq[open] summary { color: var(--akzent-dunkel); }
.stil-neu .faq-antwort { padding: 0 4px 22px; animation: auf .4s var(--leicht); }
.stil-neu .faq-antwort p { margin: 0; max-width: 62ch; }

/* ============================================================ Kontakt */
.stil-neu .kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
body.stil-neu .kontakt .abschnitt-kopf { margin: 0; position: sticky; top: 110px; }

/* ============================================================ Fusszeile */
body.stil-neu .fuss { position: relative; overflow: hidden; border-top: 1px solid var(--linie); padding: 48px 0 32px; background: none; }
.stil-neu .fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; }
.stil-neu .fuss-marke p { margin: 8px 0 0; }
.stil-neu .fuss-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.stil-neu .fuss-links a { color: var(--text-2); text-decoration: none; font-size: .95rem; padding: 6px 0; }
.stil-neu .fuss-links a:hover, .stil-neu .fuss-links a[aria-current="page"] { color: var(--text-1); }
body.stil-neu .fuss .unten { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linie); color: var(--text-3); font-size: .875rem; }

/* ============================================================ Unterseiten */
body.stil-neu .seitenkopf { padding: 150px 0 36px; }
body.stil-neu .seitenkopf h1, body.stil-neu .seitenkopf .unter, body.stil-neu .seitenkopf .kicker { max-width: 760px; }
body.stil-neu .seitenkopf.knapp { padding-bottom: 20px; }
body.stil-neu .seitenkopf h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin: 0 0 12px; }
body.stil-neu .seitenkopf .unter { font-size: 1.1rem; color: var(--text-2); margin: 0; }
body.stil-neu section.block.eng { padding: 32px 0 96px; }
/* Rechtstexte: die Karte ist fast deckend, damit die Lichtspuren dahinter das
   Lesen langer Texte nicht stoeren; sie bleiben um die Karte herum sichtbar. */
body.stil-neu .karte.rechtstext { max-width: 820px; padding: 34px 38px; background: rgba(15, 19, 28, .88); }
body.stil-neu .karte.rechtstext h2 { font-size: 1.35rem; margin: 30px 0 10px; }
body.stil-neu .karte.rechtstext h2:first-child { margin-top: 0; }
body.stil-neu .karte.rechtstext h3, body.stil-neu .wie-h3 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--text-1); font-weight: 600; }
body.stil-neu .karte.rechtstext p, body.stil-neu .karte.rechtstext li { max-width: 68ch; }
body.stil-neu .liste { padding-left: 20px; margin: 0 0 16px; }
body.stil-neu .liste li { margin-bottom: 8px; }
body.stil-neu .platzhalter { color: var(--amber); border-bottom: 1px dashed rgba(217, 164, 65, .5); }
body.stil-neu .vorformatiert { font-family: var(--font-mono); font-size: .85rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; white-space: pre-wrap; color: var(--text-2); }
body.stil-neu .raster { display: grid; gap: 18px; }
body.stil-neu .raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.stil-neu .karte.schritt-karte { padding: 26px 28px; }
body.stil-neu .karte-symbol, body.stil-neu .ablauf-symbol { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--akzent); background: rgba(63, 167, 155, .1); margin-bottom: 14px; }
body.stil-neu .karte-symbol svg, body.stil-neu .ablauf-symbol svg { width: 22px; height: 22px; }
body.stil-neu .karte.fehler-karte { max-width: 560px; margin: 0 auto; text-align: center; padding: 40px 36px; }
body.stil-neu .zahl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
body.stil-neu .plakette { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; font-family: var(--font-mono); border: 1px solid; }
body.stil-neu .plakette.ja { color: var(--status-ja); background: var(--status-ja-bg); border-color: rgba(74, 222, 128, .35); }
body.stil-neu .plakette.nein { color: var(--status-nein); background: var(--status-nein-bg); border-color: rgba(252, 165, 165, .35); }
body.stil-neu .plakette.offen { color: var(--status-offen); background: var(--status-offen-bg); border-color: rgba(252, 211, 77, .35); }

/* ============================================================ Team-Bereich */
body.stil-neu .karte.anmelde-karte { max-width: 460px; margin: 0 auto; padding: 34px 36px; }
body.stil-neu .anmeldung.block.eng { padding-top: 40px; }
body.stil-neu .karte.formular-karte.schmal { max-width: 640px; }
body.stil-neu .konto-abschnitt { margin-top: 36px; }
body.stil-neu .kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
body.stil-neu .karte.tabelle { padding: 0; overflow: hidden; }
body.stil-neu .tabelle-huelle { overflow-x: auto; }
body.stil-neu table { width: 100%; border-collapse: collapse; font-size: .92rem; }
body.stil-neu th, body.stil-neu td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--text-2); }
body.stil-neu th { color: var(--text-3); font-weight: 500; font-family: var(--font-mono); font-size: .78rem; background: rgba(255, 255, 255, .02); white-space: nowrap; }
body.stil-neu td b, body.stil-neu td strong { color: var(--text-1); }
body.stil-neu tr:last-child td { border-bottom: 0; }
body.stil-neu tbody tr:hover td { background: rgba(255, 255, 255, .025); }
body.stil-neu .zeilen-aktion { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.stil-neu .feld-klein { min-width: 180px; }
body.stil-neu .feld-klein input { min-height: 40px; padding: 8px 12px; }
body.stil-neu .haken { color: var(--status-ja); }
body.stil-neu .verwaltung-aktionen { margin-bottom: 20px; }
body.stil-neu .unten-aktionen { margin-top: 20px; }
body.stil-neu .rechts { text-align: right; }

/* ============================================================ Tippziele, Bewegung, Druck */
@media (pointer: coarse) {
  body.stil-neu .knopf.klein { height: 44px; }
  body.stil-neu nav.haupt a:not(.knopf) { min-height: 44px; }
  body.stil-neu .fuss-links a { padding: 10px 0; }
  body.stil-neu details.faq summary { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  body.stil-neu *, body.stil-neu *::before, body.stil-neu *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js-anim .stil-neu [data-reveal]:not([data-worte]), html.js-anim .stil-neu .einblenden { opacity: 1; transform: none; filter: none; }
  html.js-anim .stil-neu h1 .wort-innen { transform: none; opacity: 1; filter: none; }
  .stil-neu .cockpit { transform: none; }
  .stil-neu .standing-marke { left: calc(4px + (100% - 8px) * var(--ziel, 3) / var(--n, 4)); }
  .stil-neu .standing .stufe-feld.ziel { color: var(--text-1); }
  .stil-neu .kern-symbol::before, .stil-neu .kern-symbol::after { animation: none; }
  .stil-neu .kern-symbol { --ladung: 1; }
}
@media print {
  body.stil-neu { background: #fff; color: #222; }
  body.stil-neu::after, .stil-neu .fortschritt, .stil-neu canvas.lichtspuren, .stil-neu .held::before,
  .stil-neu .orbit, .stil-neu .buehne-huelle, body.stil-neu .kopf { display: none !important; }
  body.stil-neu .held { min-height: 0; padding: 20px 0; background: none; }
  body.stil-neu .held h1 { color: #111; background: none; -webkit-text-fill-color: #111; }
  body.stil-neu .karte { background: #fff; border: 1px solid #ccc; box-shadow: none; }
  .stil-neu .tafel { grid-template-columns: 1fr; }
  .stil-neu .tafel-liste { display: none; }
  .stil-neu .tafel.aktiv .karte.vorteil { display: block !important; }
  body.stil-neu h2, body.stil-neu h3, body.stil-neu p, body.stil-neu .vorteil-titel, body.stil-neu .vorteil-teaser { color: #111; }
  body.stil-neu section.block { padding: 24px 0; }
}

/* ============================================================ Schmale Geraete */
@media (max-width: 1100px) {
  .stil-neu .cockpit-koerper { gap: 28px; padding: 32px 28px 24px; grid-template-columns: .9fr .9fr 1.7fr; }
  .stil-neu .hebel-kennzahlen { max-width: 40%; }
}
@media (max-width: 960px) {
  body.stil-neu section.block { padding: 84px 0; }
  .stil-neu .orbit-raster { grid-template-columns: 1fr; gap: 36px; }
  .stil-neu .orbit { width: min(100%, 340px); }
  .stil-neu .tafel { grid-template-columns: 1fr; gap: 14px; }
  .stil-neu .tafel-liste { position: static; }
  .stil-neu .tafel-reiter { padding: 12px 14px; font-size: .95rem; }
  .stil-neu .tafel-buehne { min-height: 0; }
  .stil-neu .faq-raster, .stil-neu .kontakt-raster { grid-template-columns: 1fr; gap: 28px; }
  .stil-neu .faq-kopf, body.stil-neu .kontakt .abschnitt-kopf { position: static; }
  .stil-neu .cockpit-koerper { grid-template-columns: 1fr; gap: 20px; }
  /* Kopfzeile der Vorschau: der Untertitel bricht unter den Produktnamen um statt abgeschnitten zu werden. */
  .stil-neu .cockpit-kopf { flex-wrap: wrap; row-gap: 4px; }
  .stil-neu .cockpit-untertitel { flex-basis: 100%; white-space: normal; overflow: visible; }
  .stil-neu .cockpit-untertitel::before { display: none; }
  .stil-neu .quelle { max-width: 340px; }
  .stil-neu .kern-knoten { padding: 8px 0; }
  .stil-neu svg.strahlen { display: none; }
  .stil-neu .hebel-anschluss { display: none; }
  body.stil-neu .raster.drei { grid-template-columns: 1fr; }
  body.stil-neu .held { padding-top: 140px; }
}
@media (max-width: 860px) {
  body.stil-neu .kopf .huelle { height: 56px; padding: 0 8px 0 16px; border-radius: 22px; }
  body.stil-neu .menue-schalter {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; margin-left: auto;
    border: 1px solid var(--linie-stark); background: rgba(255, 255, 255, .04); color: var(--text-1); cursor: pointer;
  }
  body.stil-neu .knopf.nur-schmal { display: inline-flex; margin-left: auto; }
  body.stil-neu .menue-schalter { margin-left: 0; }
  body.stil-neu nav.haupt {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px; border-radius: 22px; background: rgba(10, 13, 20, .92); border: 1px solid var(--linie);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  }
  body.stil-neu nav.haupt.offen { display: flex; }
  body.stil-neu nav.haupt a:not(.knopf) { height: 48px; padding: 0 16px; border-radius: 14px; }
  body.stil-neu nav.haupt a:not(.knopf)::before { display: none; }
  body.stil-neu nav.haupt .knopf { margin: 6px 0 0; width: 100%; }
  body.stil-neu .zwei-spalten { grid-template-columns: 1fr; }
  body.stil-neu .karte.formular-karte { padding: 26px 22px; }
  body.stil-neu .karte.vorteil { padding: 24px 22px; }
  .stil-neu .standing { grid-template-columns: 1fr; gap: 10px; padding: 16px 20px 20px; }
}
@media (max-width: 640px) {
  body.stil-neu .huelle { padding: 0 16px; }
  body.stil-neu .held { padding: 112px 0 40px; min-height: 0; }
  body.stil-neu .held h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  body.stil-neu .held .aktionen { flex-direction: column; width: 100%; }
  body.stil-neu .held .aktionen .knopf { width: 100%; }
  .stil-neu .buehne-huelle { margin-top: 40px; }
  .stil-neu .cockpit-koerper { padding: 22px 16px 18px; }
  .stil-neu .hebel { flex-wrap: wrap; }
  .stil-neu .hebel-text-block { flex: 1 1 0; }
  .stil-neu .hebel-kennzahlen { max-width: none; justify-content: flex-start; width: 100%; padding-left: 48px; }
  /* Sechs Stufen passen nicht in eine Zeile: die Leiter wird zur Liste, die Marke zur Zeile. */
  .stil-neu .standing-leiter { grid-template-columns: 1fr; border-radius: 16px; }
  .stil-neu .stufe-feld { text-align: left; padding: 8px 14px; font-size: .78rem; }
  .stil-neu .standing-marke, .stil-neu .standing.aktiv .standing-marke { left: 4px; right: 4px; width: auto; bottom: auto; height: calc((100% - 8px) / var(--n, 4)); top: calc(4px + (100% - 8px) * var(--ziel, 3) / var(--n, 4)); transition: top 1.8s var(--leicht); }
  .stil-neu .standing:not(.aktiv) .standing-marke { top: 4px; }
  body.stil-neu .karte { padding: 22px 20px; }
  body.stil-neu .karte.stufe { padding: 20px 20px; }
  .stil-neu .stufe-marke { top: 16px; right: 16px; width: 30px; height: 30px; }
  body.stil-neu .karte.balken-karte { padding: 20px; }
  body.stil-neu details.faq summary { font-size: 1rem; padding: 18px 2px; }
  body.stil-neu .seitenkopf { padding-top: 120px; }
  body.stil-neu .karte.rechtstext { padding: 24px 20px; }
}
@media (max-width: 400px) {
  body.stil-neu .marke img { width: 24px; height: 24px; }
  body.stil-neu .marke .wort { font-size: .98rem; }
  body.stil-neu .knopf.klein { padding: 0 14px; }
}