/* ============================================================
   StiefCon – lokale Schriften
   Kein Request an fonts.googleapis.com oder fonts.gstatic.com.
   Alle Dateien liegen unter /fonts/ auf dem eigenen Server.
   ============================================================ */

/* --- Space Grotesk (Überschriften) --- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Inter (Fließtext) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- IBM Plex Mono (Kapitälchen-Labels, Meta-Zeilen) --- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   StiefCon Consulting – Startseite
   Nachbau des Claude-Design-Exports als statisches CSS.
   Keine externen Requests. Werte 1:1 aus dem Design uebernommen.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Flaechen */
  --bg:            #05070d;
  --panel:         #080b14;
  --panel-2:       #070912;
  --panel-3:       #0a0e17;
  --panel-4:       #0a0e18;

  /* Text */
  --fg:            #e8ecf4;
  --fg-soft:       #c3cbd9;
  --fg-mut:        #a7b0c2;
  --fg-mut-2:      #9aa4b8;
  --fg-dim:        #8d97ad;
  --fg-dim-2:      #8b95a8;
  --fg-faint:      #7b8598;
  --fg-faint-2:    #6f7a8d;

  /* Akzente */
  --teal:          #2ee6c8;
  --teal-lite:     #7ff3e2;
  --teal-glow:     #d9fff7;
  --violet:        #6d5efc;
  --violet-lite:   #9a8ffd;
  --violet-lite-2: #8f83ff;

  /* Handlung – ausschliesslich Buttons (CLAUDE.md Abschnitt 8) */
  --orange:        #FF6D00;
  --orange-hover:  #FF9A4D;
  --on-orange:     #000000;

  /* Linien */
  --line-1:  rgba(255,255,255,.06);
  --line-2:  rgba(255,255,255,.07);
  --line-3:  rgba(255,255,255,.08);
  --line-4:  rgba(255,255,255,.09);
  --line-5:  rgba(255,255,255,.10);
  --line-6:  rgba(255,255,255,.12);
  --line-7:  rgba(255,255,255,.14);
  --line-8:  rgba(255,255,255,.16);
  --line-9:  rgba(255,255,255,.18);

  /* Schrift */
  --display: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Raster */
  --wrap:    1180px;
  --gutter:  28px;
  --ease:    cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-lite); }

img, svg, video, canvas { display: block; max-width: 100%; }

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

::selection { background: var(--teal); color: var(--bg); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Bewegung ---------- */

@keyframes dotIn {
  0%   { transform: translate(var(--fx), var(--fy)) scale(.4); opacity: 0 }
  60%  { opacity: 1 }
  100% { transform: translate(0,0) scale(1); opacity: 1 }
}
@keyframes introText {
  0%   { opacity: 0; transform: translateY(10px); letter-spacing: .34em }
  100% { opacity: 1; transform: translateY(0);    letter-spacing: .22em }
}
@keyframes pulseRing {
  0%   { transform: scale(.85); opacity: .7 }
  100% { transform: scale(1.9); opacity: 0 }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-9px) }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: none }
}
@keyframes marquee {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}
@keyframes lineIn {
  from { opacity: 0; transform: translateY(26px) }
  to   { opacity: 1; transform: none }
}

/* ⚠ Wie lineIn, aber MIT erhaltener Zentrierung - fuer alles, was per
   left:50% + translateX(-50%) mittig sitzt.
   Am 01.09. von Steven auf dem Handy gemeldet: Der Cookie-Banner stand nicht
   mittig, sondern ragte 165px rechts aus dem Bild. Die Breite war die ganze
   Zeit korrekt (min(560px, 100vw - 32px) = 361px auf einem 393px-Schirm) -
   falsch war die POSITION.
   Ursache: lineIn endet auf transform:none, und mit "both" bleibt dieser
   Endzustand stehen. Damit war das translateX(-50%) aus der .cookie-Regel
   dauerhaft geloescht, und der Banken sass mit seiner LINKEN Kante auf
   left:50%. Auf breiten Schirmen faellt das kaum auf, auf dem Handy ragt
   fast die halbe Breite hinaus.
   MERKE: Eine Animation mit transform in den Keyframes schlaegt IMMER das
   transform der Regel - beide gehoeren in dieselbe Keyframe-Kette.
   Betrifft nur den Banner; die anderen drei Nutzer von lineIn
   (.h1__line, .intro__mark, .ki__fall) sind nicht zentriert. */
@keyframes cookieIn {
  from { opacity: 0; transform: translateX(-50%) translateY(26px) }
  to   { opacity: 1; transform: translateX(-50%) }
}

/* Abschnitt 9: Reduced Motion respektieren. Die Canvas-Schleifen
   werden zusaetzlich in site.js gar nicht erst gestartet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
}

/* ---------- 4. Typografie ---------- */

.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-lite);
}
.kicker--teal { color: var(--teal); }
.kicker--teal-lite { color: var(--teal-lite); }

.h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 26px 0 0;
  text-wrap: balance;
}
.h1__line { display: block; animation: lineIn 1s var(--ease) .1s both; }
.h1__line--accent {
  color: var(--teal);
  background-image: linear-gradient(100deg, var(--teal) 20%, var(--violet) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-delay: .26s;
}

.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 16px 0 0;
}
.h2--tight { font-size: clamp(30px, 4vw, 48px); line-height: 1.06; }

.h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  margin: 20px 0 0;
}

.lede {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-mut-2);
  text-wrap: pretty;
}

/* ---------- 5. Layout ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding-bottom: 120px; }
.section__head { max-width: 660px; }

.page { position: relative; z-index: 1; }

/* Sprungziele duerfen nicht unter dem Sticky-Header landen.
   Der Kopf ist rund 77 px hoch, 90 px lassen etwas Luft. */
[id] { scroll-margin-top: 90px; }

/* ---------- 6. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  border: none;
  border-radius: 11px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  transition: background .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
}

/* Am 01.09. vor dem Livegang gefunden: Auf 375px lief "Kalender laden und
   Termin wählen" aus seinem Kasten heraus und wurde am Bildschirmrand
   abgeschnitten - "wählen" endete an der Kante. Ursache ist das nowrap oben.
   Heimtueckisch daran: Ein Elternelement hat overflow:hidden, deshalb meldete
   die Messung von document.scrollWidth SAUBERE NULL Ueberlauf. Der Knopf ragt
   nicht heraus, er wird abgeschnitten. Sichtbar nur im Bild, nicht in der Zahl.
   Dieselbe Familie wie der Vorher/Nachher-Abriss vom 29.08. (Uebergabe 12.11).
   Am Schreibtisch bleibt nowrap richtig, dort ist Platz genug. */
@media (max-width: 759px) {
  .btn { white-space: normal; }
}

/* Orange = Handlung. Nur hier. */
.btn--primary {
  padding: 15px clamp(18px, 5vw, 26px);
  background: var(--orange);
  color: var(--on-orange);
}
.btn--primary:hover { background: var(--orange-hover); color: var(--on-orange); transform: translateY(-1px); }

/* Container-Regeln wie ".mainnav a" und ".menu a" faerben ihre Links um und
   schlagen .btn--primary in der Spezifitaet. Ohne diese Gegenregel steht der
   orange Knopf dort mit hellgrauer statt schwarzer Schrift - genau so ist der
   Fehler am 26.08. aufgefallen (Nav-CTA und Burger-Menue betroffen). */
.mainnav .btn--primary, .menu .btn--primary { color: var(--on-orange); }
.mainnav .btn--primary:hover, .menu .btn--primary:hover { color: var(--on-orange); }

.btn--ghost {
  padding: 15px clamp(18px, 5vw, 26px);
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  font-weight: 500;
}
.btn--ghost:hover { border-color: rgba(46,230,200,.45); background: rgba(46,230,200,.06); color: var(--fg); }

.btn--outline {
  padding: 15px 22px;
  border: 1px solid var(--line-8);
  background: rgba(255,255,255,.03);
  color: var(--fg);
}
.btn--outline:hover { border-color: rgba(255,255,255,.3); color: var(--fg); }

.btn--sm { padding: 13px 20px; font-size: 15px; }
.btn--block { width: 100%; justify-content: center; text-align: center; padding: 16px 20px; }

.btn--pill { border-radius: 999px; }

/* ---------- 7. Wiederkehrende Bausteine ---------- */

.panel {
  border-radius: 20px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.03);
}

.dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.dot--violet { background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.dot--plain { box-shadow: none; width: 6px; height: 6px; }

/* Platzhalter-Flaechen (Abschnitt 11: bleiben sichtbar bis Material da ist) */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border: 1px dashed var(--line-9);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 12px, rgba(255,255,255,0) 12px 24px),
    var(--panel);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.6;
  padding: 0 16px;
}
.slot__sub { color: var(--fg-dim-2); }

/* Echte Bilder an den Stellen, an denen vorher eine Platzhalter-Flaeche stand.
   Mit dem Wegfall von .slot verschwinden Rahmen und Muster von selbst -
   ausser bei .hero__portrait: das setzt zusaetzlich border-style: dashed, und
   ohne die border-Kurzschreibweise aus .slot faellt die Breite auf den
   Vorgabewert medium (3px) zurueck. Darum hier ausdruecklich abraeumen. */
img.hero__portrait,
img.ueber__portrait,
img.quote__foto {
  border: 0;
  background: none;
  object-fit: cover;
}

/* .ueber__portrait bekommt seine Hoehe aus aspect-ratio, nicht aus einer
   CSS-Regel. Die height-Angabe im <img>-Tag wirkt aber als Praesentations-
   hinweis und wuerde aspect-ratio schlagen - der Kasten waere 420x1000 statt
   420x525, und object-fit: cover schnitte die Seiten weg. Auf schmalen
   Schirmen (Breite unter 420px) traefe dasselbe zu. height: auto gibt die
   Hoehe an aspect-ratio zurueck. Bei .hero__portrait und .quote__foto steht
   die Hoehe fest im CSS, die brauchen das nicht. */
img.ueber__portrait { height: auto; }

/* Beweis-Screenshots in den Leistungskarten. Sobald statt des
   Platzhalter-Kastens ein <img> drinsteht, muessen Rahmen und Streifenmuster
   weg - sonst schimmert das Muster an den Bildkanten durch.
   height: auto aus demselben Grund wie bei .ueber__portrait darueber: die
   Hoehe kommt aus aspect-ratio 16/10, und das height-Attribut im img-Tag
   wuerde sie schlagen. */
img.card__shot {
  /* Streifenmuster weg - das ist Platzhalter-Optik.
     Der Rahmen bleibt aber: .card__shot bringt oben border-color mit, und ein
     "border: 0" hier hat sie am 28.08. still aufgehoben. Die hellen Screenshots
     lagen dadurch ohne Kante auf der dunklen Karte und wirkten schwebend.
     Am 29.08. korrigiert - Kante plus weicher Schatten setzen sie auf. */
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  background: none;
  object-fit: cover;
  height: auto;
  width: 100%;
}

/* CTA-Band zwischen den Sektionen */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);
  border-radius: 20px;
  border: 1px solid var(--line-5);
  background: linear-gradient(150deg, rgba(46,230,200,.06), rgba(109,94,252,.045) 60%, rgba(255,255,255,.015));
}
.band__text {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
  max-width: 660px;
  text-wrap: pretty;
}
.band .btn { flex: none; padding: 15px 24px; }

/* ---------- 8. Feste Ebenen ---------- */

.net-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

.glow {
  position: fixed;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 1100px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(46,230,200,.10), rgba(109,94,252,.07) 45%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}

.noise {
  position: fixed; inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* Intro */
.intro {
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 34px;
  transition: opacity .7s ease;
  pointer-events: none;
}
.intro[hidden] { display: none; }
.intro.is-out { opacity: 0; }

/* Notbremse fuer den Fall, dass site.js gar nicht ankommt (Scriptblocker,
   Firmenproxy) – dann greift <noscript> naemlich NICHT, weil JavaScript an ist.
   site.js setzt als erstes .js auf <html>; sobald das da ist, greift die Regel
   nicht mehr und der normale Ablauf bleibt voellig unberuehrt. Die 3,4 s liegen
   bewusst hinter den 2,8 s des echten Intros. */
html:not(.js) .intro { animation: introNotbremse .6s 3.4s ease forwards; }
@keyframes introNotbremse {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.js) .intro { animation-delay: 0s; animation-duration: .01s; }
}
.intro__stage { position: relative; width: 190px; height: 110px; }
.intro__dot { position: absolute; border-radius: 50%; animation: dotIn 1.1s var(--ease) both; }
.intro__canvas { position: absolute; left: 0; top: 0; width: 190px; height: 110px; }
.intro__mark { height: 52px; width: auto; color: var(--fg); animation: lineIn .9s .9s var(--ease) both; }
.intro__word {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  animation: introText 1s .5s ease both;
}

/* Fortschritt */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 60;
  background: rgba(255,255,255,.05);
}
.progress__bar {
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--violet));
  box-shadow: 0 0 14px rgba(46,230,200,.7);
}

/* Punkt-Navigation rechts */
.dotnav {
  position: fixed;
  right: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}
.dotnav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-faint-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dotnav__item:hover { color: var(--fg); }
.dotnav__label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .3s ease, max-width .3s ease;
}
.dotnav__mark {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.dotnav__item.is-active { color: var(--fg); }
.dotnav__item.is-active .dotnav__label { opacity: 1; max-width: 120px; }
.dotnav__item.is-active .dotnav__mark {
  background: var(--teal);
  box-shadow: 0 0 14px rgba(46,230,200,.8);
  transform: scale(1.5);
}
@media (max-width: 1199px) { .dotnav { display: none; } }

/* Schwebende CTA-Leiste */
.ctabar {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 140%);
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-6);
  background: rgba(8,11,20,.86);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
  transition: transform .5s var(--ease), opacity .4s ease;
  opacity: 0;
}
.ctabar.is-in { transform: translate(-50%, 0); opacity: 1; }
.ctabar__text { font-size: 14px; color: var(--fg-mut-2); white-space: nowrap; }
.ctabar .btn { padding: 13px 20px; border-radius: 999px; font-size: 15px; }

@media (max-width: 759px) {
  .ctabar {
    left: 12px; right: 12px;
    transform: translateY(140%);
    border-radius: 16px;
    justify-content: space-between;
  }
  .ctabar.is-in { transform: translateY(0); }
  .ctabar__text { white-space: normal; }
}

/* ---------- 9. Kopfbereich ---------- */

.header {
  position: sticky; top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(5,7,13,.72);
  border-bottom: 1px solid var(--line-2);
  transition: background .4s ease, border-color .4s ease;
}
.header.is-past {
  background: rgba(5,7,13,.92);
  border-bottom-color: rgba(46,230,200,.16);
}
.header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--fg); }
.brand__mark { height: 30px; width: auto; color: var(--fg); }
.brand__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
}
.mainnav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: var(--fg-mut);
  white-space: nowrap;
}
.mainnav a { color: var(--fg-mut); }
.mainnav a:hover { color: var(--fg); }
.mainnav .btn { padding: 12px 20px; border-radius: 9px; font-size: 15px; }

.iconbtn {
  padding: 14px;
  border-radius: 9px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg-mut);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.iconbtn:hover { border-color: rgba(46,230,200,.45); color: var(--fg); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  cursor: pointer;
}
.burger:hover { border-color: rgba(46,230,200,.45); }
.burger span { width: 17px; height: 1.5px; background: var(--fg); display: block; }

@media (max-width: 999px) {
  .mainnav > a:not(.mainnav__cta) { display: none; }
  .mainnav { gap: 12px; }
  .burger { display: flex; }
}

/* Unter 640 px passen Logo, CTA und Burger nicht mehr nebeneinander – der Kopf
   braeche in drei Zeilen um. Der CTA wandert deshalb ins Burger-Menue, wo er
   ganz oben steht; zusaetzlich faengt ihn die schwebende Leiste beim Scrollen ab. */
@media (max-width: 639px) {
  .header__inner { flex-wrap: nowrap; padding: 12px 16px; }
  .mainnav { display: none; }
  .brand__name { font-size: 17px; }
}

/* Mobiles Vollbildmenue */
.menu {
  position: fixed; inset: 0;
  z-index: 70;
  background: rgba(5,7,13,.96);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 32px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fadeUp .35s ease both;
}
.menu[hidden] { display: none; }
.menu__close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
}
.menu a {
  padding: 14px 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--line-2);
}
.menu .btn {
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: 12px;
  font-size: 16px;
  justify-content: center;
  border-bottom: none;
}

/* ---------- 10. Hero ---------- */

.hero { padding-top: 120px; padding-bottom: 90px; text-align: center; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(46,230,200,.3);
  border-radius: 999px;
  background: rgba(46,230,200,.06);
  font-family: var(--mono);
  font-size: clamp(9px, 2.5vw, 11px);
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-lite);
  text-align: left;
  max-width: min(92vw, 560px);
}
.hero__pulse { position: relative; width: 7px; height: 7px; display: block; flex: none; }
.hero__pulse span { position: absolute; inset: 0; border-radius: 50%; background: var(--teal); }
.hero__pulse span:last-child { animation: pulseRing 2s ease-out infinite; }

.hero__lede {
  max-width: 660px;
  margin: 30px auto 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg-mut-2);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 38px;
}
.hero__play {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(232,236,244,.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.hero__person { display: flex; align-items: center; gap: 13px; padding-left: 6px; }
.hero__portrait {
  flex: none;
  width: 96px; height: 96px;
  border-radius: 50%;
  border-style: dashed;
  border-color: rgba(255,255,255,.2);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,0) 8px 16px),
    var(--panel-3);
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.5;
  padding: 0;
}
.hero__personmeta {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}

.hero__trust {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.8;
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 74px;
}
.hero__scrollline {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, rgba(46,230,200,.7), transparent);
}
.hero__scrolltext {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- 11. Tool-Band ---------- */

.marquee {
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  background: rgba(255,255,255,.015);
  overflow: hidden;
  margin-bottom: 80px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__label {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 18px 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.marquee__sep { color: var(--teal); }

/* ---------- 12. Video ---------- */

.sec-video { padding-top: 20px; padding-bottom: 110px; }
.sec-video .section__head { margin-bottom: 40px; }

.player {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  box-shadow: 0 40px 120px -50px rgba(46,230,200,.35);
}
.player__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,.02);
}
.player__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.player__url { margin-left: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); }

.player__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 12px, rgba(255,255,255,0) 12px 24px),
    var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}
.player__video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--panel); }
.player__play {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(46,230,200,.5);
  background: rgba(46,230,200,.12);
  color: var(--teal);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.player__hint {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
  text-align: center;
  line-height: 1.7;
}

.sec-video__note { margin: 26px 0 22px; font-size: 16px; line-height: 1.6; color: var(--fg-mut-2); }

.steps3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-top: none;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.steps3__cell { padding: 26px 24px; background: var(--panel-2); }
.steps3__num { font-family: var(--mono); font-size: 11.5px; color: var(--teal); letter-spacing: .12em; }
.steps3__txt { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--fg-mut-2); }

/* ---------- 13. Vorher / Nachher ---------- */

.ba {
  position: relative;
  margin-top: 44px;
  border-radius: 22px;
  border: 1px solid var(--line-5);
  background: var(--panel);
  overflow: hidden;
}
.ba__glow {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(46,230,200,.09), rgba(109,94,252,.06) 55%, transparent);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.ba.is-on .ba__glow { opacity: 1; }

.ba__top {
  position: relative;
  padding: clamp(24px,3.4vw,40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.ba__state {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
  transition: color .5s ease;
}
.ba.is-on .ba__state { color: var(--teal-lite); }

.ba__switch {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-6);
  background: rgba(5,7,13,.6);
}
.ba__btn {
  padding: 14px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  background: transparent;
  color: var(--fg-faint);
  transition: background .4s ease, color .4s ease;
}
.ba__btn[data-ba-off].is-on { background: rgba(255,255,255,.08); color: var(--fg); }
.ba__btn[data-ba-on].is-on  { background: rgba(46,230,200,.18); color: var(--teal-lite); }

.ba__body { position: relative; padding: 0 clamp(24px,3.4vw,40px) clamp(10px,2vw,18px); }
.ba__line {
  position: absolute;
  left: calc(clamp(24px,3.4vw,40px) + 4px);
  top: 26px; bottom: 26px;
  width: 1px;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--teal), var(--violet));
  box-shadow: 0 0 12px rgba(46,230,200,.45);
  transition: transform 1s var(--ease);
  pointer-events: none;
}
.ba.is-on .ba__line { transform: scaleY(1); }

.ba__rows { display: flex; flex-direction: column; }
.ba__row { display: flex; align-items: center; gap: 18px; height: 54px; }

.ba__dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
  background: transparent;
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.ba.is-on .ba__dot {
  border-color: transparent;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.ba.is-on .ba__dot--violet { background: var(--violet); box-shadow: 0 0 12px var(--violet); }

.ba__pair { display: grid; justify-items: start; }
.ba__before, .ba__after {
  grid-area: 1 / 1;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  white-space: nowrap;
  transition: opacity .5s ease, transform .6s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.ba__before { border: 1px dashed var(--line-9); color: var(--fg-dim); opacity: 1; }
.ba__after  { border: 1px solid rgba(46,230,200,.32); background: rgba(46,230,200,.07); color: var(--fg); opacity: 0; transform: translateX(8px); }
.ba__row:nth-child(odd)  .ba__before { transform: rotate(-1.3deg); }
.ba__row:nth-child(even) .ba__before { transform: rotate(1.1deg); }
.ba.is-on .ba__before { opacity: 0; transform: translateX(-6px); }
.ba.is-on .ba__after  { opacity: 1; transform: none; }
.ba__detail { color: var(--teal-lite); font-weight: 600; }

.ba__foot {
  position: relative;
  padding: 0 clamp(24px,3.4vw,40px) clamp(24px,3.4vw,40px);
  display: grid;
}
.ba__foot-before, .ba__foot-after {
  grid-area: 1 / 1;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 520px;
  transition: opacity .5s ease;
}
.ba__foot-before { color: var(--fg-faint-2); opacity: 1; }
.ba__foot-after  { color: var(--fg-mut); opacity: 0; }
.ba.is-on .ba__foot-before { opacity: 0; }
.ba.is-on .ba__foot-after  { opacity: 1; }

/* Mobil muessen die Zeilen umbrechen duerfen.
   Am 29.08. im Ganzseitenbild bei 375 px aufgefallen: Durch das
   white-space: nowrap oben (Zeile 1077) passte "Angebot geht automatisch
   raus - 4 Minuten statt 40" nicht in eine Zeile. Weil .ba auf
   overflow: hidden steht, wurde der Satz abgeschnitten - und war nicht
   erreichbar, weil es keinen waagerechten Scrollbalken gibt. Auf dem Handy
   endete die staerkste Aussage der Sektion mitten im Wort.
   Das nowrap bleibt am Schreibtisch noetig, weil Vorher- und Nachher-Text
   uebereinander in derselben Rasterzelle liegen und weich ueberblenden.
   Die feste Zeilenhoehe muss hier mit weg, sonst ueberlappen zwei Zeilen. */
@media (max-width: 759px) {
  .ba__before,
  .ba__after { white-space: normal; }
  .ba__row {
    height: auto;
    min-height: 54px;
    padding: 5px 0;
  }
}

.band-wrap { padding-bottom: 110px; }

/* ---------- 14. Punkte-Check ---------- */

.conn {
  position: relative;
  margin-top: 44px;
  padding: clamp(22px,3vw,36px);
  border-radius: 22px;
  border: 1px solid var(--line-4);
  background: rgba(255,255,255,.02);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.conn__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.conn__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
.chip {
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.03);
  color: var(--fg-mut-2);
  font-family: var(--body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.chip:hover { border-color: rgba(255,255,255,.32); }
.chip.is-on { border-color: rgba(46,230,200,.55); background: rgba(46,230,200,.12); color: var(--teal-glow); }

.hub {
  position: relative;
  z-index: 1;
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid rgba(46,230,200,.28);
  background: linear-gradient(160deg, rgba(46,230,200,.09), rgba(109,94,252,.07));
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hub__count { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-lite); }
.hub__items { display: grid; gap: 11px; }
.hub__item { display: flex; align-items: flex-start; gap: 12px; }
.hub__item .dot { margin-top: 7px; }
.hub__name { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-lite); }
.hub__why { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--fg); }
.hub__cta { margin-top: auto; align-self: flex-start; white-space: normal; }
.hub__note { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint-2); }

@media (max-width: 759px) {
  .conn__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .chip { white-space: nowrap; }
}

/* ---------- 15. Ablauf ---------- */

.section__head--narrow { max-width: 640px; }

.track {
  position: relative;
  margin-top: 62px;
  display: grid;
  grid-template-columns: 56px 1fr;
}
.track__rail { position: relative; }
.track__line {
  position: absolute;
  left: 27px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--line-4);
}
.track__fill {
  position: absolute;
  left: 27px; top: 14px;
  width: 2px; height: 0;
  background: linear-gradient(180deg, var(--teal), var(--violet));
  box-shadow: 0 0 16px rgba(46,230,200,.6);
}
.track__steps {
  display: grid;
  gap: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.track__step { position: relative; padding-left: 18px; }
.track__node {
  position: absolute;
  left: -46px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line-9);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.track__step.is-on .track__node {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 18px rgba(46,230,200,.65);
  transform: scale(1.12);
}
.track__num { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint-2); letter-spacing: .14em; }
.track__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.02em;
  margin: 9px 0 0;
}
.track__txt { margin: 11px 0 0; max-width: 620px; font-size: 16px; line-height: 1.65; color: var(--fg-mut-2); }

/* ---------- 16. Über mich ---------- */

.ueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ueber__portrait {
  border-radius: 20px;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  width: 100%;
  font-size: 12px;
  letter-spacing: .14em;
}
.ueber__txt { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--fg-mut-2); text-wrap: pretty; }
.ueber__txt + .ueber__txt { margin-top: 18px; }
.ueber__meta {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-lite);
}

/* ---------- 17. Leistungen ---------- */

.leist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.leist__head > div { max-width: 600px; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
@media (max-width: 859px) { .cards { grid-template-columns: minmax(0, 1fr); } }

.card {
  padding: 32px 28px;
  border-radius: 18px;
  border: 1px solid var(--line-4);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  display: flex;
  flex-direction: column;
  transition: border-color .35s ease, transform .35s ease;
}
.card:hover { border-color: rgba(46,230,200,.4); transform: translateY(-4px); }
.card__icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(46,230,200,.12);
  border: 1px solid rgba(46,230,200,.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__icon--violet { background: rgba(109,94,252,.14); border-color: rgba(109,94,252,.3); }
.card__icon .dot { width: 8px; height: 8px; }
.card__txt { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-mut-2); text-wrap: pretty; }
.card__example {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--teal-lite);
  text-wrap: pretty;
}
.card__dauer {
  margin-top: auto;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-3);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}
.card__shot {
  margin-top: 20px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border-color: var(--line-8);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,0) 10px 20px),
    var(--panel);
}
/* Bildunterschrift unter den Beweis-Screenshots.
   Am 29.08. ergaenzt: Ohne sie erkennt ein Besucher in zwei Sekunden nur
   "irgendein Werkzeug-Screenshot" - der Beweis kam nicht an. Beim Ads-Bild
   benennt sie ausserdem die Schwaerzung, sonst liest sich der schwarze Block
   wie ein kaputtes Bild statt wie Zurueckhaltung. */
.card__quelle {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-faint-2);
}

.card__link {
  margin-top: 22px;
  align-self: flex-start;
  padding: 12px 20px;
  border-radius: 11px;
  border: 1px solid var(--line-8);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color .3s ease;
}
.card__link:hover { border-color: rgba(255,255,255,.32); color: var(--fg); }

/* Reserve-Slots aus dem Design – stehen bereit, sind aber ausgeblendet */
.einstieg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 32px;
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.025);
}
.einstieg[hidden] { display: none; }
.einstieg__text { flex: 1; min-width: 240px; }
.einstieg__zeile { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--fg-soft); }
.einstieg__preis { font-family: var(--display); font-size: 20px; font-weight: 700; }

.leadmagnet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: clamp(24px,3vw,34px);
  border-radius: 20px;
  border: 1px solid rgba(46,230,200,.24);
  background: linear-gradient(150deg, rgba(46,230,200,.07), rgba(109,94,252,.05) 60%, rgba(255,255,255,.015));
}
.leadmagnet__text { flex: 1; min-width: 260px; }
.leadmagnet__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px);
  letter-spacing: -.02em;
  margin: 12px 0 0;
}
.leadmagnet__sub { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-mut-2); }
.leadmagnet__form { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.leadmagnet__note { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint-2); line-height: 1.6; }

/* ---------- Formularfelder (gemeinsam) ---------- */

.feld {
  padding: 15px 17px;
  border-radius: 11px;
  border: 1px solid var(--line-7);
  background: rgba(5,7,13,.55);
  color: var(--fg);
  font-family: var(--body);
  font-size: 15px;
  outline: none;
  width: 100%;
}
.feld:focus { border-color: var(--teal); }
.feld::placeholder { color: var(--fg-faint-2); }

/* ---------- 18. Stimmen ---------- */

.section__head--wide { max-width: 680px; }

.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 24px;
  margin-top: 44px;
}
/* Pflicht, sobald ein Element ein eigenes display bekommt: das hidden-Attribut
   liefert display:none nur aus dem Browser-Standard und wird von JEDER
   Autoren-Regel geschlagen. Ohne diese Zeile bleiben die Kacheln trotz
   hidden sichtbar. Gleiches Muster wie .einstieg[hidden] (Zeile 1336). */
.voices[hidden] { display: none; }
.voice { display: flex; flex-direction: column; gap: 16px; margin: 0; scroll-snap-align: start; }
.voice__slot {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  border: 1px solid var(--line-4);
  border-style: solid;
  gap: 14px;
  font-size: 11.5px;
  letter-spacing: .1em;
  line-height: 1.7;
  animation: floatY 7s var(--d, 0s) ease-in-out infinite;
}
.voice__play {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(46,230,200,.45);
  background: rgba(46,230,200,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 15px;
}
.voice__play--violet { border-color: rgba(109,94,252,.45); background: rgba(109,94,252,.1); color: var(--violet-lite-2); }
.voice__quote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-soft); text-wrap: pretty; }
.voice__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
  line-height: 1.6;
}

.case {
  margin-top: 32px;
  padding: clamp(26px,3.4vw,40px);
  border-radius: 22px;
  border: 1px solid rgba(46,230,200,.28);
  background: linear-gradient(150deg, rgba(46,230,200,.08), rgba(109,94,252,.05) 60%, rgba(255,255,255,.015));
}
.case__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.02em;
  margin: 14px 0 0;
}
.case__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
  margin-top: 28px;
}
.case__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}
.case__label--teal { color: var(--teal-lite); }
.case__txt { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-mut-2); }
.case__txt--strong { color: var(--fg); }
.case__quote { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--line-5); }
.case__quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--fg);
  text-wrap: pretty;
}
.case__quote figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}

.quotes {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.quote {
  margin: 0;
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid var(--line-4);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote__txt { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-soft); text-wrap: pretty; }
.quote__who { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.quote__foto {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border-color: rgba(255,255,255,.2);
  background: var(--panel-3);
  font-size: 9.5px;
  letter-spacing: .1em;
  padding: 0;
}
.quote__name { display: block; font-size: 14.5px; font-weight: 600; color: var(--fg); }
.quote__firma { display: block; margin-top: 2px; font-size: 13px; color: var(--fg-faint); }

@media (max-width: 759px) {
  .voices {
    grid-template-columns: repeat(3, 78vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }
}

/* ---------- 19. Shop ---------- */

.guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  gap: 16px;
  margin-top: 42px;
  /* Ohne das waren Zeile 1 und 2 unterschiedlich hoch, weil jede Zeile sich
     an ihrem laengsten Titel ausrichtet. */
  grid-auto-rows: 1fr;
}
/* Sieben Guides in drei Spalten liessen die siebte allein links in der
   letzten Zeile stehen ("Waisenkarte"). Ab 920px sind es immer genau drei
   Spalten - dort rueckt eine allein stehende letzte Karte in die Mitte.
   Der Selektor greift nur, wenn die letzte Karte auch wirklich die erste
   ihrer Zeile ist; bei sechs oder acht Karten passiert nichts. */
@media (min-width: 920px) {
  .guides > .guide:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.guide {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid var(--line-4);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  color: var(--fg);
  transition: border-color .3s ease, transform .3s ease;
}
.guide:hover { border-color: rgba(46,230,200,.55); transform: translateY(-3px); color: var(--fg); }
.guide--kern {
  border-color: rgba(46,230,200,.42);
  background: linear-gradient(180deg, rgba(46,230,200,.09), rgba(109,94,252,.04));
}
.guide__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide__tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}
.guide__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.guide__desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-mut-2); }
.guide__foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.guide__preis { font-family: var(--display); font-size: 22px; font-weight: 700; white-space: nowrap; }
.guide__alt { font-size: 12.5px; color: var(--fg-faint-2); text-decoration: line-through; white-space: nowrap; }
.guide__alt:empty { display: none; }
.guide__mehr { margin-left: auto; font-size: 13.5px; color: var(--teal); white-space: nowrap; }

.dienst {
  margin-top: 58px;
  padding: 34px 30px;
  border-radius: 22px;
  border: 1px solid rgba(109,94,252,.22);
  background: linear-gradient(150deg, rgba(109,94,252,.1), rgba(46,230,200,.05) 60%, rgba(255,255,255,.015));
}
.dienst__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px; }
.dienst__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.02em;
  margin: 0;
}
.dienst__sub { font-size: 14.5px; color: var(--fg-mut-2); }
.dienst__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-top: 26px;
}
.dienst__karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--line-5);
  background: rgba(5,7,13,.5);
  color: var(--fg);
  transition: border-color .3s ease;
}
.dienst__karte:hover { border-color: rgba(109,94,252,.55); color: var(--fg); }
.dienst__name { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.dienst__preis {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--teal-lite);
}

.shop__foot { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.shop__foot .btn { padding: 15px 26px; }
.shop__note { font-size: 13.5px; color: var(--fg-faint-2); }

/* ---------- 20. FAQ ---------- */

/* Die FAQ lief mit 900px mittig, waehrend jede andere Sektion 1180px
   linksbuendig laeuft - zwei Musterbrueche auf einmal. Seit 01.09. laeuft
   sie im selben Raster wie alles andere; die Lesbarkeit der Antworten
   sichert stattdessen .faq__body mit max-width. */
.faq__h { margin: 0 0 40px; font-size: clamp(32px, 4.4vw, 50px); }
.faq { display: grid; gap: 12px; }
.faq__item {
  border: 1px solid var(--line-4);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.faq__h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}
.faq__btn:hover { color: var(--teal); }
.faq__sign {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--fg-dim);
  font-family: var(--body);
}
.faq__body {
  padding: 0 22px 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-mut-2);
  max-width: 700px;
}
.faq__body[hidden] { display: none; }

/* ---------- 21. Kontakt ---------- */

.sec-kontakt { padding-bottom: 110px; }

/* ⚠ Der teuerste Fehler dieses Projekts, gefunden am 01.09. von Steven auf
   seinem Handy - NACH dem Livegang, weil drei Messungen ihn nicht sahen.
   Was falsch war: minmax(300px, 1fr) verlangt eine Spalte von mindestens
   300px. Auf einem 375px-Schirm bleiben hier aber nur 249px uebrig
   (375 minus 56 Sektionsrand, minus 68 Kastenpolster, minus 2 Rahmen).
   Die Spalte wurde trotzdem 300px breit, 51px liefen ueber - und das
   overflow:hidden unten hat sie stillschweigend abgeschnitten. Formularfelder,
   Absenden-Knopf und Hinweistexte endeten mitten im Nichts.
   Warum keine Messung das fand: Der Ueberlauf blieb INNERHALB des Kastens,
   die Seite selbst hatte sauber scrollWidth == clientWidth. Wer nur die Seite
   gegen den Viewport prueft, sieht so etwas nie.
   Der Fix ist min(300px, 100%): Bei genug Platz bleibt es bei 300px, sonst
   nimmt die Spalte 100% des VORHANDENEN Platzes. Kann nie ueberlaufen, braucht
   keine Media Query. Am 01.09. auf alle zehn auto-fit-Raster der Seite
   angewendet, nicht nur auf dieses - der Fehler war ein Muster, kein Einzelfall.
   MERKE: Jedes minmax(<feste Breite>, 1fr) in einem Kasten mit eigenem
   Innenabstand ist ein solcher Fehler im Wartezustand. */
.kontakt {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--line-5);
  background: linear-gradient(150deg, rgba(46,230,200,.1), rgba(109,94,252,.08) 55%, rgba(255,255,255,.02));
  padding: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px;
  align-items: start;
  overflow: hidden;
}
.kontakt__wasserzeichen {
  position: absolute;
  right: -60px; bottom: -70px;
  height: 340px; width: auto;
  color: var(--fg);
  opacity: .05;
  pointer-events: none;
}
.kontakt__links { position: relative; }
.kontakt__lede { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--fg-mut); max-width: 440px; text-wrap: pretty; }

.kontakt__punkte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--fg-mut-2);
}
.kontakt__punkte li { display: flex; align-items: center; gap: 11px; }

.kontakt__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.kontakt__aktionen .btn--primary { padding: 15px 24px; }
.btn--tel:hover { border-color: rgba(46,230,200,.45); }
.kontakt__hinweis { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint-2); }

.form { display: grid; gap: 14px; position: relative; }
.form__hint { margin-top: -4px; font-size: 12.5px; line-height: 1.55; color: var(--fg-faint-2); }
.form__fuss { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint-2); text-align: center; }
.form__oder { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.form__oder > span:first-child, .form__oder > span:last-child { flex: 1; height: 1px; background: var(--line-5); }
.form__oder-txt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Fehlerzustaende bleiben bewusst orange – 1:1 aus dem Design uebernommen,
   dokumentierte Abweichung von Abschnitt 8. */
.feld.is-fehler { border-color: var(--orange); }

.meldung {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 17px;
  border-radius: 11px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg);
}
.meldung[hidden] { display: none; }
.meldung--ok  { border: 1px solid rgba(46,230,200,.35); background: rgba(46,230,200,.08); }
.meldung--ok .dot { margin-top: 6px; }
.meldung--err { border: 1px solid rgba(255,109,0,.4); background: rgba(255,109,0,.08); }
.meldung__punkt {
  flex: none;
  margin-top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------- 22. Termin (Zwei-Klick-Freigabe) ---------- */

.termin {
  margin-top: 34px;
  border-radius: 22px;
  border: 1px solid var(--line-4);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  overflow: hidden;
}
.termin__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px clamp(22px,3vw,32px);
}
.termin__titel {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.termin__kopf .btn[hidden] { display: none; }

.termin__gate { padding: 0 clamp(22px,3vw,32px) 30px; }
.termin__gate[hidden] { display: none; }
.termin__gatebox {
  padding: clamp(22px,3vw,30px);
  border-radius: 16px;
  border: 1px dashed var(--line-8);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 10px, rgba(255,255,255,0) 10px 20px),
    var(--panel);
}
.termin__text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-soft); max-width: 640px; text-wrap: pretty; }
.termin__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.termin__aktionen .btn--primary { padding: 14px 22px; }
.termin__aktionen .btn--outline { padding: 14px 20px; font-weight: 400; }
.termin__fussnote {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-faint-2);
}
.termin__fusspunkt {
  flex: none;
  margin-top: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violet);
}

.termin__rahmen { padding: 0 clamp(14px,2vw,20px) 20px; }
.termin__rahmen[hidden] { display: none; }
.termin__rahmen iframe {
  width: 100%;
  height: min(78vh, 760px);
  border: 1px solid var(--line-3);
  border-radius: 16px;
  background: var(--bg);
  display: block;
}

/* ---------- 23. Footer ---------- */

.footer { border-top: 1px solid var(--line-2); background: rgba(5,7,13,.6); }
.footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 44px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__logo { height: 74px; width: auto; color: var(--fg); opacity: .9; margin-bottom: 16px; }
.footer__name { font-family: var(--display); font-weight: 600; font-size: 17px; }
.footer__claim { margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--fg-faint); max-width: 260px; }
.footer__kontakt { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.footer__kontakt a { color: var(--fg-mut); }
.footer__kontakt a:hover { color: var(--teal); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 26px; font-size: 14px; }
.footer__nav a { color: var(--fg-dim); }
.footer__nav a:hover { color: var(--fg); }

.footer__recht {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.linkbtn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim-2);
  text-decoration: none;   /* die Rechts-Links sind <a> – sollen aber aussehen wie vorher */
  transition: color .3s ease;
}
.linkbtn:hover { color: var(--fg-mut-2); }
.linkbtn--teal:hover { color: var(--teal); }

@media (max-width: 759px) {
  [data-taplist] a { padding: 10px 0; display: inline-block; }
}

/* ---------- 24. Rechts-Overlay ---------- */

.legal {
  position: fixed; inset: 0;
  z-index: 96;
  background: rgba(5,7,13,.98);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fadeUp .3s ease both;
}
.legal[hidden] { display: none; }

.legal__kopf {
  position: sticky; top: 0;
  z-index: 1;
  background: rgba(5,7,13,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* Hintergrund spannt voll, Inhalt bleibt auf 860px zentriert */
  padding: 16px max(24px, calc((100% - 860px) / 2 + 24px));
}
.legal__tabs { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.legal__tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}
.legal__tab:hover { border-color: rgba(46,230,200,.45); }
.legal__tab[aria-selected="true"] { background: rgba(46,230,200,.16); }
.legal__zu {
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg);
  font-size: 17px;
  cursor: pointer;
}
.legal__zu:hover { border-color: rgba(46,230,200,.45); }

.legal__seite { max-width: 860px; margin: 0 auto; padding: 48px 24px 110px; }
.legal__seite[hidden] { display: none; }
.legal__h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -.03em;
  margin: 0;
}
.legal__h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  margin: 34px 0 0;
  color: var(--fg);
}
.legal__p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--fg-mut-2); }
.legal__p strong { color: var(--fg-soft); font-weight: 600; }
.legal__block { margin: 12px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--fg-soft); }
.legal__liste { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal__liste li { font-size: 14.5px; line-height: 1.7; color: var(--fg-mut-2); }
.legal__kasten {
  margin-top: 26px;
  padding: 26px 24px;
  border-radius: 16px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.025);
}
.legal__zeilen { display: grid; gap: 18px; margin-top: 18px; }
.legal__zeilen > div {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint-2);
  border-bottom: 1px solid var(--line-7);
  padding-bottom: 8px;
}
.legal__aktion { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 25. Cookie-Banner ---------- */

.cookie__schleier {
  position: fixed; inset: 0;
  z-index: 94;
  background: rgba(3,5,10,.72);
  backdrop-filter: blur(4px);
}
.cookie__schleier[hidden] { display: none; }

.cookie {
  position: fixed;
  z-index: 95;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px;
  border: 1px solid var(--line-6);
  background: rgba(8,11,20,.97);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  padding: clamp(22px, 3vw, 30px);
  /* cookieIn statt lineIn - lineIn endet auf transform:none und loeschte damit
     die Zentrierung oben. Begruendung bei den Keyframes. */
  animation: cookieIn .5s var(--ease) both;
}
.cookie[hidden] { display: none; }
.cookie__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
.cookie__kicker .dot { width: 6px; height: 6px; box-shadow: 0 0 10px var(--teal); }
.cookie__h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
  margin: 14px 0 0;
}
.cookie__p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-mut-2); text-wrap: pretty; }

.cookie__details { display: grid; gap: 10px; margin-top: 20px; }
.cookie__details[hidden] { display: none; }
.cookie__zeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-3);
  background: rgba(255,255,255,.02);
}
.cookie__zeile > div:first-child { flex: 1; }
.cookie__name { font-size: 14px; font-weight: 600; }
.cookie__txt { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--fg-faint-2); }

.schalter {
  flex: none;
  width: 44px; height: 24px;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.06);
  padding: 0;
  transition: background .25s ease;
}
.schalter > span {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform .25s var(--ease);
}
.schalter[aria-checked="true"] { background: rgba(46,230,200,.3); }
.schalter[aria-checked="true"] > span { transform: translateX(20px); }
.schalter--fix {
  background: rgba(46,230,200,.25);
  border-color: rgba(46,230,200,.4);
  opacity: .6;
  cursor: default;
}
.schalter--fix > span { left: 23px; background: var(--teal); }

.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cookie__alle { flex: 1 1 160px; justify-content: center; padding: 13px 20px; font-size: 15px; }
.cookie__noetig {
  flex: 1 1 140px;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid var(--line-8);
  background: transparent;
  color: var(--fg);
  font-size: 14px;
  font-weight: 400;
}
.cookie__noetig:hover { border-color: rgba(255,255,255,.32); }
.cookie__mehr {
  flex: 0 0 auto;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-faint-2);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}
.cookie__mehr:hover { color: var(--fg); }
.cookie__speichern { margin-top: 14px; display: flex; justify-content: flex-end; }
.cookie__speichern[hidden] { display: none; }

/* ---------- 26. KI-Berater ---------- */

.ki {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  align-items: start;
}

/* Das Ergebnis-Panel war im Wartezustand nur rund 215px hoch und stand neben
   einem 580px hohen Formular - darunter klaffte ein Loch. Ab zwei Spalten
   zieht sich die Spalte jetzt auf die Hoehe des Formulars und der Wartetext
   sitzt mittig darin. Bei einer Spalte (mobil) bleibt alles wie gehabt,
   sonst wuerde der leere Kasten die Seite unnoetig strecken.
   Achtung: .ki hat align-items:start - ohne das Ueberschreiben hier wirkt
   min-height:100% auf .ki__ergebnis nicht. */
@media (min-width: 760px) {
  .ki { align-items: stretch; }
  .ki__ergebnis { display: flex; flex-direction: column; }
  /* Nur die beiden Wartezustaende werden gestreckt. Treffer und Fehler
     behalten ihr Blocklayout - dort wuerde ein Flex-Container die
     Innenabstaende der Karten veraendern. */
  .ki__leer:not([hidden]), .ki__laedt:not([hidden]) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.ki__rahmen {
  padding: 1px;
  border-radius: 21px;
  background: linear-gradient(150deg, rgba(46,230,200,.55), rgba(109,94,252,.4) 60%, rgba(255,255,255,.06));
}
.ki__box {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-4), var(--panel));
}
.ki__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ki__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(46,230,200,.35);
  background: rgba(46,230,200,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 14px;
}
.ki__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-lite);
}

.ki__beispiele { display: flex; flex-wrap: wrap; gap: 8px; }
.ki__bsp {
  padding: 14px 16px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg-mut-2);
  font-family: var(--body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.ki__bsp:hover { border-color: rgba(46,230,200,.45); color: var(--fg); }

.ki__feld { margin-top: 18px; line-height: 1.6; resize: vertical; }

.ki__consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; cursor: pointer; }
.ki__box-check { position: absolute; opacity: 0; width: 0; height: 0; }
.ki__checkmark {
  flex: none;
  margin-top: 2px;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--bg);
  transition: background .2s ease;
}
.ki__box-check:checked + .ki__checkmark { background: var(--teal); }
.ki__box-check:checked + .ki__checkmark::after { content: "✓"; }
.ki__box-check:focus-visible + .ki__checkmark { outline: 2px solid var(--teal); outline-offset: 3px; }
.ki__consenttext { font-size: 13px; line-height: 1.55; color: var(--fg-faint-2); }
.ki__mehr {
  padding: 0;
  border: none;
  background: none;
  color: var(--teal);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.ki__box > .btn { margin-top: 18px; }
.ki__warnung {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-mut-2);
}
/* Orange bleibt hier 1:1 wie im Design – dokumentierte Abweichung von Abschnitt 8 */
.ki__warnpunkt { flex: none; margin-top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.ki__fuss { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint-2); }

/* --- Ergebnisspalte --- */

.ki__ergebnis { min-height: 100%; }
.ki__ergebnislabel {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}
.ki__ergebnislabel--teal { color: var(--teal); }

.ki__leer {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 20px;
  border: 1px dashed var(--line-7);
  background: rgba(255,255,255,.015);
}
.ki__leer[hidden], .ki__laedt[hidden], .ki__fehler[hidden], .ki__treffer[hidden] { display: none; }
.ki__leertext { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--fg-faint); }
.ki__punkte { display: flex; gap: 8px; margin-top: 24px; }
.ki__punkte span { width: 7px; height: 7px; border-radius: 50%; background: rgba(46,230,200,.35); }
.ki__punkte span:nth-child(2) { background: rgba(46,230,200,.22); }
.ki__punkte span:nth-child(3) { background: rgba(46,230,200,.12); }

.ki__laedt {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 20px;
  border: 1px solid rgba(46,230,200,.25);
  background: linear-gradient(150deg, rgba(46,230,200,.08), rgba(109,94,252,.05));
}
.ki__huepfer { display: flex; gap: 9px; margin-top: 20px; }
.ki__huepfer span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal);
  animation: floatY 1.1s ease-in-out infinite;
}
.ki__huepfer span:nth-child(2) { animation-delay: .15s; }
.ki__huepfer span:nth-child(3) { background: var(--violet); animation-delay: .3s; }
.ki__laedttext { margin-top: 20px; font-size: 15px; color: var(--fg-mut-2); }

.ki__fehler {
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.02);
}
.ki__fehlertext { font-size: 15.5px; line-height: 1.65; color: var(--fg); }
.ki__fehler .btn { margin-top: 18px; }

.ki__treffer { display: grid; gap: 14px; }
.ki__faelle { display: grid; gap: 14px; }
.ki__fall {
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(46,230,200,.24);
  background: linear-gradient(150deg, rgba(46,230,200,.07), rgba(109,94,252,.04) 70%, rgba(5,7,13,.5));
  animation: lineIn .5s var(--ease) both;
}
.ki__fallkopf { display: flex; align-items: center; gap: 11px; }
.ki__fallblock {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint-2);
}
.ki__falltitel {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.ki__fallhow { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--fg-mut-2); }
.ki__fallgain {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-3);
  font-size: 13.5px;
  color: var(--teal-lite);
}

.ki__fazit {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.025);
}
.ki__note { margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg-soft); }
.ki__frage {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-5);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg);
}
.ki__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ki__aktionen .btn { padding: 13px 20px; font-size: 14.5px; }
.ki__kopieren {
  padding: 13px 18px;
  border-radius: 11px;
  border: 1px solid var(--line-6);
  background: transparent;
  color: var(--fg-mut-2);
  font-family: var(--body);
  font-size: 14.5px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.ki__kopieren:hover { color: var(--fg); border-color: rgba(255,255,255,.24); }
.ki__disclaimer { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint-2); }

/* Hinweis auf der englischen Seite: Rechtstexte bleiben deutsch */
.legal__hinweis {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(46,230,200,.25);
  background: rgba(46,230,200,.06);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* Sprachwechsel im mobilen Menue, weil der Kopf dort keinen Platz mehr hat */
.menu__lang {
  margin-top: 18px;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim) !important;
  border-bottom: none !important;
  padding: 8px 0 !important;
}