/* ==========================================================================
   Tyler Tweaks — Design-System
   Aufbau: Tokens · Basis · Layout · Navigation · Buttons · Sektionen ·
           Hero · App-Vorstellung · Preise · Kaufablauf · Vertrauen · FAQ ·
           Kundenbereich · Footer · Bewegung · Responsive
   ========================================================================== */

/* ========== 0. Schriftarten ==========
   Liegen im Ordner fonts/ und werden von hier ausgeliefert — nicht mehr von
   Google-Servern. Dadurch geht beim Seitenaufruf keine Besucher-IP an Dritte.

   Es sind Variable Fonts: eine Datei deckt alle Stärken ab, deshalb steht bei
   font-weight ein Bereich statt einer Zahl.

   font-display: swap sorgt dafür, dass der Text sofort erscheint (zunächst in
   der Systemschrift) und nicht erst, wenn die Datei geladen ist.

   Herkunft und Lizenz: siehe fonts/LIESMICH.txt (SIL Open Font License 1.1)
   ===================================== */

/* ---- Inter ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.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 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.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;
}

/* ---- Space Grotesk ---- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.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 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.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;
}

/* ========== 1. Tokens ========== */
:root {
  /* ---- Flächen ----
     Sechs Stufen statt fünf: Die Seite braucht eine Ebene zwischen Karte und
     Karten-Innenfläche, sonst verschwimmen verschachtelte Kästen. Der Grundton
     ist leicht blaustichig — reines Neutralgrau wirkt auf Monitoren schnell
     schmutzig. */
  --bg:          #06070e;
  --bg-2:        #090a14;
  --surface:     #0e1020;
  --surface-2:   #151829;
  --surface-3:   #1c2034;

  /* Linien */
  --line:        #1f2338;
  --line-strong: #30365a;

  /* ---- Text ----
     --muted erreicht auf --surface rund 5,4:1 Kontrast und bleibt damit auch
     in Kleinschrift gut lesbar. Nicht weiter abdunkeln. */
  --text:        #eef1f8;
  --text-2:      #c5cad9;
  --muted:       #969cb0;

  /* ---- Akzente ----
     Die -rgb-Varianten sind kein Luxus: An gut einem Dutzend Stellen braucht
     die Seite den Akzent mit Transparenz (Verläufe, Schimmer, weiche Flächen).
     Früher stand der Farbwert dort als Zahl im Code, was jede Farbänderung zu
     einer Suchen-und-Ersetzen-Aktion gemacht hat. Jetzt hängt alles hier. */
  --accent:        #6d8bff;
  --accent-rgb:    109, 139, 255;
  --accent-2:      #b07cff;
  --accent-2-rgb:  176, 124, 255;
  --accent-soft:   rgba(var(--accent-rgb), .10);
  --ok:            #3dd68c;
  --ok-rgb:        61, 214, 140;
  --ok-soft:       rgba(var(--ok-rgb), .10);
  --warn:          #f5b544;

  /* Die Risikostufe „Fortgeschritten" lief bisher über --accent-2 mit. Sobald
     ein Abschnitt seinen eigenen Ton bekommt, wäre das keine Risikoskala mehr,
     sondern die Abschnittsfarbe — bei einem Gold-Ton wären „Vorsicht" und
     „Fortgeschritten" sogar dieselbe Farbe. Deshalb fest verankert. */
  --risk-adv:      #b07cff;

  /* ---- Form ----
     Eine Stufe flacher als vorher. Sehr runde Ecken lassen Software-Oberflächen
     schnell nach Spielzeug aussehen. */
  --radius:      16px;
  --radius-sm:   11px;
  --radius-xs:   7px;
  --maxw:        1160px;
  --gutter:      20px;

  /* ---- Schatten ----
     Zwei Lagen statt einer: ein enger Schatten für die Kante, ein weiter für
     die Tiefe. Das wirkt ruhiger als ein einzelner großer Weichzeichner. */
  --shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 18px 44px rgba(0, 0, 0, .46);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .32);

  /* Schrift */
  --font:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head:   'Space Grotesk', 'Inter', system-ui, sans-serif;
  /* Für Kennzeilen, Zahlen und Etiketten. Bewusst keine eigene Datei: Cascadia
     Mono liegt jedem Windows 11 bei, Consolas jedem Windows 10 — und genau
     dort sitzt, wer diese Seite liest. */
  --font-mono:   'Cascadia Mono', 'Cascadia Code', 'SF Mono', Consolas, ui-monospace, monospace;
}

/* ========== 2. Basis ========== */
* { box-sizing: border-box; }

/* Das Attribut hidden schlägt jede Anzeigeart.

   Ohne diese Zeile ist "hidden" nur eine Empfehlung: Der Browser setzt dafür
   [hidden] { display: none }, und jede Klassenregel mit display:flex oder
   display:inline-flex gewinnt gegen diese Auswahl. Die Folge ist ein Element,
   das das Javascript für versteckt hält, während es sichtbar dasteht — der
   Knopf „Filter zurücksetzen" auf tweaks.html stand deshalb immer da, und die
   Rabattzeile im Warenkorb hätte es genauso getroffen.

   Für .konto-bereich gibt es weiter unten schon eine eigene Regel dafür. Die
   hier gilt für alles. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}

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

a { color: inherit; text-decoration: none; }

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

strong { color: var(--text); font-weight: 600; }

/* Tastatur-Fokus überall sichtbar — Grundlage für Barrierefreiheit */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprungmarke für Screenreader und Tastatur */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent);
  color: #05050a;
  border-radius: var(--radius-xs);
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

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

/* ========== 3. Layout ========== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-narrow { max-width: 840px; }

.muted { color: var(--muted); }

/* ---- Abschnittstöne ----
   Jeder Abschnitt kann seine eigene Akzentfarbe bekommen. Das funktioniert
   ohne eine einzige neue Komponentenregel, weil die Bausteine den Akzent
   ohnehin über die Variable beziehen: Eyebrow, Icons, Häkchen, Ränder,
   Verlaufs-Buttons, der Fokusring — alle ziehen automatisch mit.

   Beide Variablen-Paare sind Pflicht: .btn-primary, .badge und .flow-num sind
   Verläufe von --accent nach --accent-2. Wer nur --accent setzt, bekommt einen
   Verlauf von Gold nach Violett.

   --accent-soft muss ebenfalls in jedem Ton stehen. Es ist in :root als
   rgba(var(--accent-rgb), .10) deklariert und wird genau dort ausgerechnet;
   vererbt wird der fertige Wert. Ein --accent-rgb weiter unten im Baum ändert
   daran nichts mehr.

   Für die Palette gilt eine Regel: Ein Ton muss hell genug sein, denn auf den
   Verlaufs-Buttons steht fast schwarze Schrift (#05050a). Ab einer relativen
   Helligkeit von 0,18 sind die nötigen 4,5:1 erreicht. Cyan (0,53) und Gold
   (0,53) liegen darüber, sogar deutlich über dem bisherigen Blau (0,29).
   Nicht verwenden: Grüntöne nahe --ok, Rottöne nahe der Fehlerfarbe. */
.ton-cyan {
  --accent:       #22d3ee;
  --accent-rgb:   34, 211, 238;
  --accent-2:     #60a5fa;
  --accent-2-rgb: 96, 165, 250;
  --accent-soft:  rgba(var(--accent-rgb), .10);
}
.ton-gold {
  --accent:       #f5b544;
  --accent-rgb:   245, 181, 68;
  --accent-2:     #ffd479;
  --accent-2-rgb: 255, 212, 121;
  --accent-soft:  rgba(var(--accent-rgb), .10);
}
.ton-magenta {
  --accent:       #e879f9;
  --accent-rgb:   232, 121, 249;
  --accent-2:     #a78bfa;
  --accent-2-rgb: 167, 139, 250;
  --accent-soft:  rgba(var(--accent-rgb), .10);
}

.section { padding: 96px 0; position: relative; }
.section-alt {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}

/* Hintergrundebene für jeden Abschnitt.
   Bis Version 2.6.0 gab es Dekoration an genau zwei Stellen — hinter dem Hero
   und hinter dem Schlussaufruf. Die acht Abschnitte dazwischen waren flache
   Fläche, und genau daher kam der Eindruck, die Seite sei leer.

   Zwei Lagen in einem Pseudo-Element: ein weicher Schimmer in der Akzentfarbe
   des Abschnitts und darüber das feine Raster, das vorher nur der Hero hatte.
   Gesteuert wird alles über Variablen, damit ein Abschnitt zwei Zeilen braucht
   und keine eigene Regel.

   inset:0 statt Überstand ist Absicht: so kann die Ebene den Abschnitt nie
   verlassen und .section braucht kein overflow. Mit overflow:hidden würde die
   mitwandernde Bildspalte in #app (weiter unten, .app-shots) aufhören zu
   funktionieren, weil daraus ein eigener Scroll-Bereich wird. */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(var(--glow-w, 820px) var(--glow-h, 440px)
                    at var(--glow-x, 78%) var(--glow-y, 8%),
                    rgba(var(--accent-rgb), var(--glow-a, .09)), transparent 68%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  /* Nach unten auslaufen lassen, sonst endet das Raster an der Abschnittskante
     als sichtbare Abrisslinie. */
  mask-image: linear-gradient(#000 60%, transparent);
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
}

/* Ohne das malt die Ebene über den Text: ein absolut positioniertes
   Pseudo-Element kommt in der Stapelreihenfolge nach statischem Inhalt.
   Derselbe Grund, aus dem .hero-inner und .cta .wrap das schon länger tun. */
.section > .wrap { position: relative; z-index: 1; }

/* Naht zwischen zwei Abschnitten. Ersetzt dort die durchgehende graue Linie
   durch einen Strich, der zu den Rändern hin ausläuft. Nebenbei repariert das
   die Stelle in der Seitenmitte, an der zwei gleiche Flächen ohne Trennung
   aufeinandertreffen (Ablauf und Umfang sind beide kein section-alt). */
.section + .section::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .32), transparent);
}

/* Der Rhythmus der Startseite: abwechselnd rechts und links, damit beim
   Scrollen eine Bewegung entsteht und nicht acht gleiche Flecken. Stark dort,
   wo verkauft wird, schwach in den textlastigen Abschnitten — in FAQ und
   Umfang liest man, da darf im Rücken nichts flimmern. */
#app           { --glow-x: 78%; --glow-a: .12; }
#leistungen    { --glow-x: 16%; --glow-a: .07; }
#preise        { --glow-x: 80%; --glow-a: .12; }
#ablauf        { --glow-x: 18%; --glow-a: .07; }
#optimierungen { --glow-x: 78%; --glow-a: .04; }
#vertrauen     { --glow-x: 16%; --glow-a: .07; }
#faq           { --glow-x: 80%; --glow-a: .04; }
#support       { --glow-x: 18%; --glow-a: .07; }

.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.sub { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ========== Aktions-Banner (warenkorb.js, KONFIG.aktion) ==========
   Sitzt über der Navigation und scrollt mit weg; die Navigation bleibt
   darunter wie gewohnt kleben. */
.aktion-banner {
  position: relative;
  z-index: 101;
  background: linear-gradient(90deg, #4f46e5, var(--accent) 45%, var(--accent-2));
  color: #fff;
  font-size: .95rem;
  line-height: 1.35;
}
.aktion-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 9px 46px 9px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  text-align: center;
}
.aktion-text strong { color: #fff; font-weight: 700; }
.aktion-code {
  margin-left: 4px;
  padding: 2px 10px;
  border: 1px dashed rgba(255, 255, 255, .8);
  border-radius: var(--radius-xs);
  background: rgba(6, 7, 14, .3);
  color: #fff;
  font: 700 .92rem var(--font-mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.aktion-code:hover { background: rgba(6, 7, 14, .45); }
.aktion-zeit { opacity: .95; }
.aktion-rest { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.aktion-los {
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  color: #0b0d1a;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.aktion-los:hover { background: #eef1f8; }
.aktion-zu {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  opacity: .8;
  cursor: pointer;
}
.aktion-zu:hover { opacity: 1; }
/* Streifen "Die Tweak App erscheint …" (warenkorb.js, KONFIG.appErscheint).
   Dieselbe Form, aber ruhiger: eine Ankündigung, kein Angebot — und so
   unterscheidbar, wenn beide übereinander stehen. */
.app-banner {
  background: #0c1426;
  border-bottom: 1px solid rgba(47, 123, 255, .45);
}
.app-banner .aktion-los { background: var(--accent); color: #fff; }
.app-banner .aktion-los:hover { background: #4a8dff; }
@media (max-width: 560px) {
  .aktion-banner { font-size: .86rem; }
  .aktion-inner { gap: 4px 10px; padding-left: 12px; }
}

/* ========== 4. Navigation ========== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.nav.scrolled {
  background: rgba(7, 7, 12, .88);
  border-bottom-color: var(--line);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--text);
  flex-shrink: 0;
}
.logo img { flex-shrink: 0; }
.logo strong { color: var(--accent); font-weight: 700; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  padding: 8px 13px;
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav-links a.is-active { color: var(--accent); }

/* Einträge, die es auf dem Desktop schon als Button rechts gibt —
   im ausgeklappten Menü sind sie aber nötig. */
.nav-links .nav-cta,
.nav-links .nav-only-mobile { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Burger — nur mobil sichtbar */
.nav-toggle {
  display: none;
  /* 44x44 ist die uebliche Mindestgroesse fuer ein Bedienelement, das mit
     dem Finger getroffen werden soll. Vorher 42 — kein grosser Unterschied,
     aber es gibt keinen Grund, knapp darunter zu bleiben. */
  width: 44px; height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ========== 5. Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease,
              background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05050a;
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), .22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), .34);
}

.btn-outline {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, .03);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-ghost { color: var(--muted); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); border-color: var(--line-strong); }

.btn-sm  { min-height: 38px; padding: 8px 17px; font-size: .88rem; }
.btn-lg  { min-height: 54px; padding: 15px 32px; font-size: 1.04rem; }
/* Buttons über die volle Breite dürfen umbrechen. Sonst erzwingt ihr
   längster Text auf schmalen Geräten die Breite des ganzen Rasters. */
.btn-block {
  display: flex;
  width: 100%;
  white-space: normal;
  text-wrap: balance;
}

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* ========== 6. Hero ========== */
.hero {
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: -30% 0 auto 0;
  height: 760px;
  background:
    radial-gradient(660px 340px at 50% 24%, rgba(var(--accent-rgb), .13), transparent 70%),
    radial-gradient(560px 320px at 18% 58%, rgba(var(--accent-2-rgb), .12), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 18%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 18%, #000 40%, transparent 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(var(--ok-rgb), .18);
}

.hero h1 {
  font-size: clamp(2.3rem, 6.6vw, 4.1rem);
  margin-bottom: .34em;
}
.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lead {
  max-width: 640px;
  margin: 0 auto 34px;
  color: var(--text-2);
  font-size: 1.12rem;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-meta {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: .88rem;
}

/* Vertrauensleiste direkt unter dem Hero */
.trustbar {
  list-style: none;
  padding: 0;
  margin: 56px auto 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.trustbar li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
}
.trustbar svg { width: 20px; height: 20px; color: var(--ok); flex-shrink: 0; }
.trustbar strong { display: block; font-size: .92rem; }
.trustbar span { color: var(--muted); font-size: .8rem; line-height: 1.4; }

/* ========== 7. Karten-Raster ========== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.card {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .42);
  /* Nur die Farbe, nicht die Kurzform background: Die würde das Licht unter
     dem Mauszeiger (Abschnitt 23) beim Überfahren wieder abschalten. */
  background-color: var(--surface-2);
}
.card h3 { font-size: 1.12rem; margin-bottom: .45em; }
.card p { color: var(--muted); font-size: .94rem; }

.icon {
  width: 44px; height: 44px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.icon svg { width: 22px; height: 22px; }
.icon-ok { background: var(--ok-soft); color: var(--ok); }

/* ========== 8. App-Vorstellung ========== */
.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
/* Rasterzellen dürfen von Haus aus nicht schmaler werden als ihr Inhalt. Die
   Bildschirmfotos sind breiter als eine Handyspalte — ohne das hier schiebt
   die Aufnahme die ganze Seite zur Seite, statt im Rahmen zu scrollen. */
.app-layout > * { min-width: 0; }

.shot-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.shot-tab {
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.shot-tab:hover { color: var(--text); }
.shot-tab[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.shot-panel[hidden] { display: none; }

/* Rahmen um die Bildschirmfotos. Die App bringt ihre eigene Titelleiste mit,
   der Rahmen hier setzt sie nur vom Seitenhintergrund ab. */
.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #0b0f18;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03);
}
.shot img { display: block; width: 100%; height: auto; }

.shot-caption {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .89rem;
  text-align: center;
}

/* Die Aufnahme ist gut 900 px kürzer als die Feature-Liste daneben. Ohne das
   hier stünde daneben eine leere Spalte. Statt die Lücke mit Füllmaterial zu
   stopfen, wandert die Spalte beim Scrollen mit — so steht das Bild immer
   neben dem Punkt, den man gerade liest.
   Erst ab 1041 px, darunter ist das Raster ohnehin einspaltig. Und erst ab
   860 px Höhe: passt die Spalte nicht auf den Schirm, klebt sie sonst oben
   fest und wird unten abgeschnitten. */
@media (min-width: 1041px) and (min-height: 860px) {
  .app-shots {
    position: sticky;
    /* 70 px Navigationsleiste plus Luft. */
    top: 92px;
  }
}

.shot-fakten {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.shot-fakten li {
  padding: 13px 18px;
  background: var(--surface);
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.5;
}
.shot-fakten strong { color: var(--text); font-weight: 600; }

/* Feature-Liste neben der App */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list .fi {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.feature-list .fi svg { width: 17px; height: 17px; }
.feature-list h3 { font-size: 1rem; margin: 0 0 .2em; }
.feature-list p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---- Noch nicht fertige Funktionen ----
   Bewusst sichtbar abgesetzt: Was hier steht, kann die App heute NICHT. Das
   Kürzel daneben sagt, woran man ist. Lieber ein ehrlicher Hinweis als ein
   Versprechen, das beim ersten Start enttäuscht. */
.feature-list li.geplant .fi {
  background: rgba(154, 157, 181, .10);
  color: var(--muted);
}
.feature-list li.geplant h3 { color: var(--text-2); }

.tag-geplant {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ========== 9. Preise ========== */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease;
}
.plan:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .38); }

.plan-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .08), var(--surface) 58%);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2), 0 22px 54px rgba(var(--accent-rgb), .1);
}
.plan-featured:hover { transform: translateY(-6px); }

.badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 17px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05050a;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-kind {
  display: inline-block;
  /* Die Karte ist ein Flex-Container; ohne align-self würde die Marke
     auf die volle Kartenbreite gestreckt. */
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plan h3 { font-size: 1.32rem; margin-bottom: .3em; }
.plan-desc { color: var(--muted); font-size: .93rem; margin: 0 0 22px; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.price .old {
  width: 100%;
  color: var(--muted);
  text-decoration: line-through;
  font-size: .95rem;
}
.price .amount {
  font-family: var(--font-head);
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1;
}
.price .cur { font-size: 1.5rem; font-weight: 600; color: var(--accent); }
.price .once { color: var(--muted); font-size: .85rem; margin-left: 4px; }

.save {
  margin: 10px 0 0;
  color: var(--ok);
  font-size: .87rem;
  font-weight: 600;
}

.features { list-style: none; padding: 0; margin: 24px 0 28px; }
.features li {
  position: relative;
  padding: 8px 0 8px 27px;
  color: var(--text-2);
  font-size: .93rem;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.features li:last-child { border-bottom: 0; }
.features li::before {
  content: '';
  position: absolute;
  left: 4px; top: 16px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.features li.off { color: var(--muted); opacity: .6; }
.features li.off::before {
  border: 0;
  top: 18px;
  width: 10px; height: 2px;
  background: var(--muted);
  transform: none;
}

.plan-buy { margin-top: auto; }
.plan-alt {
  margin: 12px 0 0;
  text-align: center;
  font-size: .84rem;
  color: var(--muted);
}
.plan-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Kurzes Hervorheben, wenn ein Hero-Button auf eine Karte springt */
@keyframes plan-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  35%      { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .38); }
}
.plan.flash {
  border-color: var(--accent);
  animation: plan-flash 1.6s ease;
}

.note {
  margin: 32px auto 0;
  max-width: 660px;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

/* ========== 10. Kaufablauf ========== */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: flowstep;
}
.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05050a;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
}
.flow-step h3 { font-size: 1.06rem; margin-bottom: .4em; }
.flow-step p { color: var(--muted); font-size: .92rem; margin: 0; }
.flow-step .flow-art { margin-bottom: 18px; }

/* Verbindungslinie zwischen den Schritten */
.flow-step::after {
  content: '';
  position: absolute;
  top: 50px; right: -13px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}
.flow-step:last-child::after { display: none; }

/* ========== 10b. Umfang: die 89 Optimierungen ==========
   Die Zahlen im HTML stammen aus dem Tweak-Katalog der App und sind dort
   durch Tests abgesichert (TweakCatalogTests). Wer sie hier ändert, ohne
   den Katalog zu ändern, macht die Seite falsch.
   ------------------------------------------------------------------ */
.opt-grid {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: die Kacheln ordnen sich vom Handy
     bis zum Ultrawide selbst um, ohne eigenen Haltepunkt. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}
/* Seit 2.7.0 ein Link in die gefilterte Liste auf tweaks.html — deshalb
   text-decoration hier ausdrücklich aus. Gebaut wird die Kachel von
   tweaks.js aus tweaks.json. */
.opt-cat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.opt-cat:hover {
  border-color: rgba(var(--accent-rgb), .42);
  background-color: var(--surface-2);
}
.opt-cat .n {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  /* Feste Breite, damit die Beschriftungen trotz ein- und zweistelliger
     Zahlen auf einer Linie beginnen. */
  min-width: 2ch;
  text-align: right;
}
.opt-cat .c {
  color: var(--text-2);
  font-size: .89rem;
  line-height: 1.3;
}
.opt-cat:hover .c { color: var(--text); }

/* Der Weg zur vollständigen Liste, unter dem Abschnitt "Umfang". */
.opt-alle {
  margin: 30px 0 0;
  text-align: center;
}

.risk-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.risk-card {
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
}
.risk-card p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}
.rk {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.rn {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
.rl {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.risk-safe     { border-left-color: var(--ok); }
.risk-safe .rn, .risk-safe .rl { color: var(--ok); }
.risk-caution  { border-left-color: var(--warn); }
.risk-caution .rn, .risk-caution .rl { color: var(--warn); }
.risk-advanced { border-left-color: var(--risk-adv); }
.risk-advanced .rn, .risk-advanced .rl { color: var(--risk-adv); }

.opt-note {
  margin-top: 26px;
  font-size: .9rem;
  max-width: 62ch;
}

/* ========== 11. Vertrauen ========== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.trust-card {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.trust-card h3 { font-size: 1.1rem; margin-bottom: .5em; }
.trust-card p { color: var(--muted); font-size: .93rem; }

.speclist { list-style: none; padding: 0; margin: 0; }
.speclist li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .91rem;
}
.speclist li:last-child { border-bottom: 0; }
.speclist dt, .speclist .k { color: var(--muted); }
.speclist .v { color: var(--text); font-weight: 600; text-align: right; }

.tag-ok, .tag-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-no { background: rgba(255, 255, 255, .05); color: var(--muted); }

/* „Das mache ich nicht" — Ehrlichkeitsblock */
.nolist { list-style: none; padding: 0; margin: 0; }
.nolist li {
  position: relative;
  padding: 8px 0 8px 28px;
  color: var(--text-2);
  font-size: .93rem;
}
.nolist li::before {
  content: '';
  position: absolute;
  left: 5px; top: 16px;
  width: 11px; height: 2px;
  background: var(--warn);
  border-radius: 2px;
}

/* ========== 12. FAQ ========== */
.faq details {
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq details[open] { border-color: rgba(var(--accent-rgb), .4); }
.faq summary {
  position: relative;
  padding: 18px 52px 18px 22px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 24px; top: 25px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.faq .faq-body { padding: 0 22px 22px; color: var(--muted); font-size: .95rem; }
.faq .faq-body p { margin-bottom: .8em; }

/* ========== 13. Abschluss-CTA ========== */
.cta {
  position: relative;
  padding: 92px 0;
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 280px at 50% 50%, rgba(var(--accent-2-rgb), .13), transparent 70%);
  pointer-events: none;
}
.cta .wrap { position: relative; }
.cta h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.cta .sub { margin: 0 auto 30px; max-width: 560px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ========== 14. Kundenbereich ========== */
.account {
  min-height: calc(100vh - 340px);
  padding: 64px 0 96px;
  position: relative;
}

/* Dieselbe Hintergrundebene wie bei den Abschnitten der Startseite. Die
   Anmeldeseiten waren vorher eine Karte auf schwarzer Fläche und damit die
   leersten Seiten der ganzen Website. */
.account::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 50% 12%, rgba(var(--accent-rgb), var(--glow-a, .13)), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  mask-image: linear-gradient(#000 55%, transparent);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
}
.account > .wrap { position: relative; z-index: 1; }

/* Konto und Kasse tragen dieselbe Klasse, haben aber viel mehr Inhalt — dort
   soll der Schimmer nur andeuten, nicht auftragen. */
.account.konto,
.account.kasse { --glow-a: .06; }

/* Nur die reinen Anmeldeseiten: dort steht eine einzelne Karte, und die
   min-height oben rechnet mit einem 340 px hohen Fuß, den diese Seiten gar
   nicht haben. Ohne das Zentrieren hängt die Karte oben und darunter steht
   schwarz. Bewusst eine Klasse im HTML statt :has() — die Datei kommt sonst
   ohne moderne Selektoren aus, und vier Wörter sind billiger als eine neue
   Anforderung an den Browser. */
.account-zentriert {
  display: flex;
  align-items: center;
  /* Die 340 px oben sind für Konto und Kasse gerechnet, die den vollen Fuß
     tragen. Hier bestehen Navigation und Fußzeile zusammen aus 229 px —
     mit dem alten Wert bliebe auf hohen Bildschirmen unterhalb der Fußzeile
     eine leere Fläche stehen. */
  min-height: calc(100vh - 230px);
}
.account-zentriert > .wrap { width: 100%; }

.login-card {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Farbkappe über die volle Breite. Zusammen mit dem Ton der jeweiligen Seite
   sind Anmelden, Registrieren und die beiden Passwortseiten auf einen Blick
   auseinanderzuhalten, ohne dass man die Überschrift lesen muss. */
.login-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.login-card h1 { font-size: 1.6rem; margin-bottom: .3em; }
.login-card .sub { font-size: .96rem; margin-bottom: 26px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: .89rem;
  font-weight: 600;
}
.field input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: 1.02rem;
  letter-spacing: .06em;
  transition: border-color .18s ease, background .18s ease;
}
.field input::placeholder { color: #55576e; letter-spacing: .06em; }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.field .hint { margin: 7px 0 0; color: var(--muted); font-size: .82rem; }

.form-msg {
  display: none;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  font-size: .9rem;
}
.form-msg.show { display: block; }
.form-msg.error {
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .35);
  color: #fca5a5;
}
.form-msg.ok {
  background: var(--ok-soft);
  border: 1px solid rgba(var(--ok-rgb), .35);
  color: var(--ok);
}

.login-foot {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}
.login-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Eingeloggter Bereich */
.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.dash-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .2em; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.panel {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h2 { font-size: 1.18rem; margin-bottom: .6em; }
.panel h3 { font-size: 1rem; margin-bottom: .5em; }
.panel-accent {
  border-color: rgba(var(--accent-rgb), .4);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), var(--surface) 60%);
}

.keyline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: .08em;
  word-break: break-all;
}
.keyline button {
  margin-left: auto;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  letter-spacing: normal;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .18s ease, border-color .18s ease;
}
.keyline button:hover { color: var(--accent); border-color: var(--accent); }

.dl-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .85rem;
}

/* Gestapelte Panels in einer Spalte brauchen Abstand */
.dash-col > .panel + .panel { margin-top: 20px; }
.dash-col > .panel[hidden] { display: none; }

/* Änderungsliste im Kundenbereich */
.loglist { list-style: none; padding: 0; margin: 0; }
.loglist li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.loglist li:first-child { padding-top: 0; }
.loglist li:last-child { border-bottom: 0; padding-bottom: 0; }
.loglist .ver {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.loglist .v {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
}
.loglist .d { color: var(--muted); font-size: .8rem; }
.loglist p { margin: 0; color: var(--muted); font-size: .9rem; }

.steps-mini { list-style: none; padding: 0; margin: 0; counter-reset: mini; }
.steps-mini li {
  position: relative;
  padding: 0 0 18px 38px;
  color: var(--muted);
  font-size: .92rem;
}
.steps-mini li:last-child { padding-bottom: 0; }
.steps-mini li::before {
  counter-increment: mini;
  content: counter(mini);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), .35);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
}
.steps-mini li::after {
  content: '';
  position: absolute;
  left: 13px; top: 30px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.steps-mini li:last-child::after { display: none; }
.steps-mini strong { color: var(--text); }

/* ========== 15. Footer ========== */
.footer {
  padding: 58px 0 32px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
/* Fünf Blöcke: Marke, Angebot, Konto, Support, Rechtliches.
   Die Spaltenzahl muss deshalb durch fünf teilbar aufgehen, sonst rutscht der
   letzte Block allein in eine zweite Zeile und reißt ein Loch ins Layout. */
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 34px;
}
.footer h4 { font-size: .95rem; margin-bottom: .8em; }
.footer p { margin: 8px 0 0; font-size: .92rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 8px; }
.footer ul a { color: var(--muted); font-size: .92rem; transition: color .18s ease; }
.footer ul a:hover { color: var(--accent); }

.disclaimer {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.copy { margin-top: 14px; color: var(--muted); font-size: .82rem; }

/* ========== 16. Bewegung ========== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ========== 17. Responsive ========== */
@media (max-width: 1040px) {
  .app-layout { grid-template-columns: 1fr; gap: 40px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step:nth-child(2)::after { display: none; }

  /* Fünf Spalten werden hier zu eng. Die vier Linklisten teilen sich die
     Breite, der Markenblock legt sich als eigene Zeile darüber. */
  .footer-inner { grid-template-columns: repeat(4, 1fr); }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
}

/* Die Navigation braucht früher Platz als der Rest des Layouts:
   Logo, sieben Einträge und zwei Buttons passen unter ~1060 px nicht
   mehr nebeneinander. Darunter wird daraus ein ausklappbares Menü. */
@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }
  .nav-inner { gap: 12px; }
  .nav-links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px var(--gutter) 18px;
    /* Deckend statt durchscheinend: Die Navigationsleiste hat selbst schon
       ein backdrop-filter. Ein zweites, verschachteltes lässt den Inhalt
       dahinter durchscheinen, statt ihn zu verdecken. */
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.open .nav-links {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-links a {
    padding: 13px 14px;
    font-size: 1rem;
    border-radius: var(--radius-xs);
  }
  .nav-actions .btn { display: none; }
  .nav-links .nav-cta {
    display: flex;
    margin-top: 8px;
    color: #05050a;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    justify-content: center;
    font-weight: 600;
  }
  .nav-links .nav-cta:hover { color: #05050a; }
  .nav-links .nav-only-mobile { display: block; }
}

@media (max-width: 900px) {
  .grid-3, .pricing, .trust-grid { grid-template-columns: 1fr; }
  /* Die Risikokarten untereinander. Die Kategorie-Kacheln darüber brauchen
     hier nichts: ihr auto-fit ordnet sich selbst um. */
  .risk-row { grid-template-columns: 1fr; }
  .plan-featured { order: -1; }
  .dash-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
  .trustbar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; }

  .section { padding: 64px 0; }
  .hero { padding: 56px 0 68px; }
  .cta { padding: 68px 0; }

  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }

  .trustbar { grid-template-columns: 1fr; margin-top: 40px; }
  .flow { grid-template-columns: 1fr; }
  .flow-step::after { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }

  .section-head { margin-bottom: 36px; }
  .plan { padding: 28px 22px; }
  .login-card { padding: 28px 22px; }
  .panel { padding: 24px 20px; }

  .dash-head { flex-direction: column; }
  .keyline { flex-wrap: wrap; font-size: .92rem; }
  .keyline button { margin-left: 0; width: 100%; }

  /* Ein 1160 px breites Fenster auf Handybreite gequetscht ist nicht mehr zu
     entziffern — von einer Aufnahme, auf der man nichts erkennt, hat niemand
     etwas. Deshalb behält sie hier eine Mindestbreite, und der Rahmen wird
     seitlich scrollbar. Lieber wischen als raten. */
  .shot { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
  /* max-width muss ausdrücklich weg: die allgemeine Regel img { max-width:100% }
     würde die Aufnahme sonst doch wieder auf die Rahmenbreite stauchen. */
  .shot img { width: 620px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   18. Konto, Kasse und Verwaltung

   Ergänzt das Design-System oben um alles, was mit Anmeldung, Kundenbereich,
   Kaufabschluss und Verwaltung zu tun hat. Verwendet ausschließlich die
   Tokens aus Abschnitt 1 — kein zweites Farbschema.
   ========================================================================== */

/* ---------- Navigation: Anmeldestatus ---------- */
.nav-auth { display: inline-flex; align-items: center; gap: 10px; }

.btn-konto {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.btn-konto:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface-3);
}
.btn-konto svg { width: 16px; height: 16px; }

.nav-links #nav-auth-mobil { display: none; }

/* ---------- Eingabefelder für normalen Text ----------
   Die Grundregel für .field input ist auf Lizenzschlüssel ausgelegt
   (monospace, gesperrt). Für Name, E-Mail und Passwort wäre das falsch. */
.field input.eingabe-text {
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: normal;
}
.field input.eingabe-text::placeholder { letter-spacing: normal; }
/* Auswahlfelder sehen aus wie Eingabefelder */
.field select.eingabe-text {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.field select.eingabe-text:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
/* Die Auswahlliste selbst kommt vom System — dunkel einfärben, sonst
   erscheint auf manchen Rechnern weiße Schrift auf weißem Grund. */
.field select.eingabe-text option {
  background: var(--surface);
  color: var(--text);
}

.field input:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--surface);
}
.field .hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.form-msg.warn {
  background: rgba(251, 191, 36, .1);
  border: 1px solid rgba(251, 191, 36, .35);
  color: var(--warn);
}

/* ---------- Hinweis- und Erfolgskästen ---------- */
.hinweis-kasten {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .92rem;
}
.hinweis-kasten p { margin: 0 0 10px; }
.hinweis-kasten p:last-child { margin-bottom: 0; }
.hinweis-kasten.ok {
  background: var(--ok-soft);
  border-color: rgba(var(--ok-rgb), .35);
}
.hinweis-kasten.warn {
  background: rgba(251, 191, 36, .08);
  border-color: rgba(251, 191, 36, .35);
}

.erfolg-kasten { text-align: center; padding: 8px 0 4px; }
.erfolg-kasten h2 { font-size: 1.35rem; margin-bottom: .4em; }
.erfolg-kasten p { color: var(--muted); font-size: .94rem; }
.erfolg-kasten .btn { margin-top: 18px; }

.erfolg-kasten.gross {
  padding: 40px 24px 32px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.erfolg-kasten.gross h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

.erfolg-symbol {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), .35);
  color: var(--accent);
}
.erfolg-symbol svg { width: 26px; height: 26px; }
.erfolg-symbol.gross {
  width: 72px; height: 72px;
  background: var(--ok-soft);
  border-color: rgba(var(--ok-rgb), .4);
  color: var(--ok);
}
.erfolg-symbol.gross svg { width: 34px; height: 34px; }

.lade-hinweis {
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- Statusanzeige ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.status .punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-an     { background: var(--ok-soft); color: var(--ok); }
.status-aus    { background: rgba(255, 255, 255, .05); color: var(--muted); }
.status-warten { background: rgba(251, 191, 36, .12); color: var(--warn); }

/* ---------- Kundenbereich: Aufbau ---------- */
.konto { padding-top: 40px; }

.konto-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.konto-kopf h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .2em; }

.konto-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.konto-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: sticky;
  top: 86px;
}
.konto-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--muted);
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.konto-nav button svg { width: 17px; height: 17px; flex-shrink: 0; }
.konto-nav button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.konto-nav button.an {
  color: var(--accent);
  background: var(--accent-soft);
}

.konto-inhalt { min-width: 0; }
.konto-bereich[hidden] { display: none; }

.bereich-titel {
  font-size: 1.3rem;
  margin: 0 0 16px;
}
.konto-bereich > .bereich-titel:not(:first-child) { margin-top: 36px; }
.bereich-sub { color: var(--muted); font-size: .93rem; margin: -8px 0 18px; }

.bereich-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bereich-kopf .bereich-titel { margin: 0; }

/* ---------- Produktkarten ---------- */
.produkt-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.produkt-karte,
.bestell-karte,
.lizenz-karte {
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bestell-karte + .bestell-karte,
.lizenz-karte + .lizenz-karte { margin-top: 16px; }

.produkt-kopf,
.bestell-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.produkt-kopf h3,
.bestell-kopf h3 { font-size: 1.08rem; margin: 0; }

.produkt-fuss { margin-top: 18px; }

.bestell-nummer {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.bestell-hinweis {
  margin: 14px 0 0;
  padding: 11px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: .87rem;
}
.bestell-hinweis.warn {
  background: rgba(251, 191, 36, .08);
  color: var(--warn);
}

/* ---------- Lizenzkarte ---------- */
.lizenz-karte.aktiv {
  border-color: rgba(var(--accent-rgb), .32);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .05), var(--surface) 55%);
}

/* PC-Bindung selbst lösen: Knopf und Erklärung nebeneinander, auf dem Handy
   untereinander. */
.pc-freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}
.pc-freigabe p { margin: 0; flex: 1 1 240px; }
.lizenz-label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.keyline .key-text { font-weight: 600; }
.keyline .key-kopieren {
  margin-left: auto;
  padding: 7px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: normal;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.keyline .key-kopieren:hover { background: rgba(var(--accent-rgb), .18); }
.keyline .key-kopieren.ok {
  background: var(--ok-soft);
  border-color: rgba(var(--ok-rgb), .4);
  color: var(--ok);
}

/* ---------- Leerer Bereich ---------- */
.leer-kasten {
  padding: 40px 28px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}
.leer-kasten h3 { font-size: 1.05rem; margin-bottom: .4em; }
.leer-kasten p { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }

/* ---------- Download ---------- */
.download-status {
  margin: 12px 0 0;
  font-size: .87rem;
}
.download-status.ok { color: var(--ok); }
.download-status.fehler { color: #fca5a5; }

.pruefsumme {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .78rem;
  word-break: break-all;
}
.pruefsumme code { font-family: 'Space Grotesk', ui-monospace, monospace; }

/* ---------- Laufzeit-Auswahl in der Preiskarte ---------- */
.laufzeit-wahl {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.laufzeit-wahl legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.laufzeit-knoepfe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.laufzeit-knoepfe button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.laufzeit-knoepfe button:hover {
  color: var(--text);
  border-color: var(--line-strong);
}
.laufzeit-knoepfe button.an {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), .5);
  color: var(--accent);
}
.lz-name  { font-size: .8rem; font-weight: 600; }
.lz-preis { font-size: .74rem; opacity: .8; }

/* Auf dem Handy den Preis auf den Laufzeit-Knoepfen anheben: .74rem sind
   dort knapp 12px, und das ist die Zahl, wegen der jemand den Knopf
   ueberhaupt drueckt. Die Knopfgroesse selbst (63x145) reicht laengst —
   es geht allein um die Lesbarkeit der Zahl. */
@media (max-width: 680px) {
  .lz-preis { font-size: .82rem; opacity: .9; }
}

/* ---------- Kasse ---------- */
.kasse-kopf { margin-bottom: 24px; }
.kasse-kopf h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0; }

.zurueck-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: .89rem;
  transition: color .16s ease;
}
.zurueck-link:hover { color: var(--accent); }
.zurueck-link svg { width: 15px; height: 15px; }

.kasse-panel { margin-bottom: 20px; }

.kasse-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.kasse-zeile h2 { font-size: 1.2rem; margin-bottom: .25em; }
.kasse-zeile p { font-size: .9rem; margin: 0; }

.kasse-preis {
  text-align: right;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.kasse-einmal {
  display: block;
  color: var(--muted);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 500;
}

.kasse-fuss {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

.bestell-nr {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .9rem;
}

.fertig-aktionen {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ---------- Verwaltung ---------- */
.admin-probleme { margin: 0 0 18px; }
.admin-probleme ul { margin: 6px 0 0; padding-left: 18px; }
.admin-probleme li + li { margin-top: 4px; }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.kennzahl {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.kennzahl .wert {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.kennzahl .label {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .8rem;
}

.suchfeld {
  min-height: 42px !important;
  max-width: 340px;
  font-size: .9rem !important;
}

.tabelle-rahmen {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.admin-tabelle th {
  padding: 13px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.admin-tabelle td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-tabelle tr:last-child td { border-bottom: 0; }
.admin-tabelle tr.inaktiv { opacity: .5; }
.admin-tabelle tr.notiz-zeile td {
  padding-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.admin-tabelle td.leer {
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}
.admin-tabelle .mono {
  font-family: 'Space Grotesk', ui-monospace, monospace;
  letter-spacing: .02em;
  /* Ein Lizenzschlüssel darf nicht mitten im Block umbrechen — die Tabelle
     scrollt stattdessen waagerecht. */
  white-space: nowrap;
}
.admin-tabelle .klein { font-size: .8rem; }
.zeile-klein { color: var(--muted); font-size: .78rem; }

.admin-tabelle .aktionen {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-tabelle .mini {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.admin-tabelle .mini:hover { color: var(--accent); border-color: var(--accent); }
.admin-tabelle .mini:disabled { opacity: .5; cursor: wait; }

.merker {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .nav-links #nav-auth-mobil { display: block; }
  .nav-links #nav-auth-mobil a { display: block; }
}

@media (max-width: 900px) {
  .konto-layout { grid-template-columns: 1fr; gap: 18px; }

  /* Aus der Seitenleiste wird eine waagerechte Leiste zum Wischen. */
  .konto-nav {
    position: static;
    flex-direction: row;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .konto-nav::-webkit-scrollbar { display: none; }
  .konto-nav button {
    width: auto;
    flex-shrink: 0;
    padding: 9px 14px;
    white-space: nowrap;
  }
  .konto-nav button svg { display: none; }
}

@media (max-width: 680px) {
  .konto { padding-top: 28px; }
  .konto-kopf { flex-direction: column; align-items: stretch; }
  .konto-kopf .btn { align-self: flex-start; }

  .produkt-gitter { grid-template-columns: 1fr; }
  .produkt-karte, .bestell-karte, .lizenz-karte { padding: 20px 18px; }

  .laufzeit-knoepfe { grid-template-columns: repeat(2, 1fr); }

  .kasse-zeile { flex-direction: column; gap: 12px; }
  .kasse-preis { text-align: left; }
  .fertig-aktionen .btn { width: 100%; }

  .erfolg-kasten.gross { padding: 32px 18px 26px; }

  .suchfeld { max-width: none; width: 100%; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kennzahl { padding: 14px 16px; }
  .kennzahl .wert { font-size: 1.25rem; }

  .admin-tabelle { font-size: .82rem; }
  .admin-tabelle th, .admin-tabelle td { padding: 10px 11px; }

  /* Der Kopieren-Knopf soll auch schmal gut treffbar bleiben. */
  .keyline .key-kopieren { margin-left: 0; width: 100%; }
}


/* ==========================================================================
   19. Impressum und Datenschutzerklärung

   Langer Fließtext, der sich gut lesen lassen muss — deshalb etwas größere
   Zeilenhöhe und eine schmalere Spalte als im Rest der Seite.
   ========================================================================== */

.rechtstext {
  padding: 56px 0 96px;
  line-height: 1.75;
  position: relative;
}

/* Hier wird gelesen, nicht geschaut: dieselbe Ebene wie sonst, aber auf der
   schwächsten Stufe. Sie nimmt der Seite das Brett-Gefühl, ohne sich
   vorzudrängen. */
.rechtstext::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 380px at 75% 4%, rgba(var(--accent-rgb), .05), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  mask-image: linear-gradient(#000 35%, transparent);
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
}
.rechtstext > .wrap { position: relative; z-index: 1; }

/* 840 px sind bei 16 px rund 95 Zeichen je Zeile. Zusammen mit der
   Zeilenhöhe 1.75 ist das der Hauptgrund, warum diese Seiten anstrengend zu
   lesen sind. 68 Zeichen liegen im bequemen Bereich. */
.rechtstext .wrap-narrow { max-width: 68ch; }

.rechtstext h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: .25em;
}

.rechtstext .stand {
  margin: 0 0 36px;
  color: var(--muted);
  font-size: .92rem;
}

/* Statt einer grauen Linie über die volle Spalte ein kurzer Akzentstrich.
   Aus einer Trennung wird damit eine Gliederung — man sieht, dass hier ein
   neuer Punkt anfängt, statt nur, dass der vorige aufgehört hat. */
.rechtstext h2 {
  position: relative;
  margin: 52px 0 .6em;
  padding-top: 26px;
  font-size: 1.22rem;
}
.rechtstext h2::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.rechtstext h2:first-of-type { margin-top: 0; padding-top: 0; }
.rechtstext h2:first-of-type::before { display: none; }

.rechtstext p { color: var(--text-2); }

.rechtstext ul {
  margin: 0 0 1em;
  padding-left: 22px;
  color: var(--text-2);
}
.rechtstext li { margin-bottom: .45em; }

.rechtstext a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rechtstext code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: .86em;
  color: var(--accent);
}

/* Kleingedruckter Betreiber-Hinweis unter einem Abschnitt */
.rechtstext .hinweis-klein {
  margin: -.3em 0 1em;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.6;
}

/* Deutlich sichtbarer Hinweis, dass noch Platzhalter drinstehen */
.platzhalter-warnung {
  margin: 0 0 40px;
  padding: 20px 22px;
  background: rgba(251, 191, 36, .08);
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: var(--radius-sm);
}
.platzhalter-warnung strong {
  display: block;
  margin-bottom: 8px;
  color: var(--warn);
  font-size: 1rem;
}
.platzhalter-warnung p {
  margin: 0;
  color: var(--text-2);
  font-size: .92rem;
}

.rechts-fuss {
  margin-top: 48px;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .92rem;
}
.rechts-fuss p { margin-bottom: .8em; }
.rechts-fuss p:last-child { margin-bottom: 0; }

/* Schnellzugriff ganz oben im Kundenbereich */
.schnellzugriff { margin-bottom: 28px; }
.schnellzugriff h2 { font-size: 1.25rem; margin: 0; }
.schnellzugriff .keyline { margin-bottom: 16px; }
.schnellzugriff .speclist { margin-bottom: 18px; }
.schnell-hinweis {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .85rem;
}

/* Zustimmung zu AGB und Widerruf auf der Kaufseite */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: .88rem;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color .18s ease;
}
.zustimmung:hover { border-color: var(--accent); }
.zustimmung input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.zustimmung a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zustimmung #zustimmung-digital { display: block; margin-top: 6px; }
.zustimmung #zustimmung-digital[hidden] { display: none; }

/* Dieselbe Zustimmung im Warenkorb, beim Kauf über paypal.me. */
.zustimmung[hidden] { display: none; }
#privat-zustimmung { margin: 18px 0 14px; }
.zustimmung .zustimmung-digital { display: block; margin-top: 6px; }
.zustimmung .zustimmung-digital[hidden] { display: none; }

/* Der Satz zur Dienstleistung (PC-Optimierung, Bundle) — auf beiden Seiten. */
.zustimmung #zustimmung-dienst,
.zustimmung .zustimmung-dienst { display: block; margin-top: 6px; }

/* Zahlungsanleitung nach der Bestellung über paypal.me */
.privat-schritte { margin: 4px 0 18px; padding-left: 20px; }
.privat-schritte li { margin: 0 0 8px; color: var(--muted); }
.privat-schritte li strong { color: var(--text); }

/* Muster-Widerrufsformular: liest sich wie ein Formular zum Ausdrucken,
   ohne eines zu sein. */
.muster-formular {
  margin: 20px 0;
  padding: 24px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  line-height: 1.9;
}
.muster-formular p { color: var(--text-2); margin-bottom: 1.2em; }
.muster-formular p:last-child { margin-bottom: 0; }
.muster-formular .muster-fuss {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

/* Technischer Hinweis, der nur den Betreiber etwas angeht — bewusst
   zurückhaltend, damit er im Ernstfall nicht wie eine Kundenmeldung wirkt. */
.betreiber-hinweis {
  margin: 20px 0 0;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
}

.rechtstext .zurueck {
  margin-top: 40px;
  font-size: .95rem;
}

/* Rechtslinks im Fußbereich — auf jeder Seite erreichbar, wie vorgeschrieben */
.rechtslinks {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .88rem;
}
.rechtslinks a {
  color: var(--muted);
  transition: color .16s ease;
}
.rechtslinks a:hover { color: var(--accent); }
.rechtslinks a.is-active { color: var(--text); }
.rechtslinks span { margin: 0 8px; opacity: .5; }

@media (max-width: 680px) {
  .rechtstext { padding: 36px 0 64px; }
  .rechtstext h2 { margin-top: 34px; }
  .platzhalter-warnung, .rechts-fuss { padding: 18px 16px; }
}

/* ========== 20. Kartenebenen ==========
   Dieselben vier Deklarationen — Polster, Fläche, 1px-Rand, Radius — standen
   bis Version 2.6.0 an neunzehn Stellen. Das Ergebnis war, dass eine beiläufige
   Aufzählungskachel genauso aussah wie die Karte, auf die es ankommt.

   Deshalb hier drei Stufen nach Rolle. Bewusst als angehängter Block und nicht
   verteilt in die bestehenden Regeln: was hier steht, legt sich über die
   Grundform, und ein Rückbau ist das Löschen dieses Abschnitts. Ebenso bewusst
   ohne eine einzige HTML-Änderung — ein Teil dieser Karten entsteht erst zur
   Laufzeit aus konto.js und admin.js.
   ====================================================================== */

/* Stufe 1 — zurückgenommen. Zählwerte und Merkmalskacheln: sie stützen die
   Aussage daneben, sie sind nicht selbst die Aussage.
   Nicht dabei: .shot-fakten li. Die Liste unter der App-Aufnahme trägt ganze
   Sätze, keine Zahlen — sie würde hier zu Unrecht nach hinten rücken. */
.opt-cat,
.kennzahl,
.trustbar li {
  background: var(--bg-2);
}

/* Stufe 2 — die normale Karte. Das Kantenlicht oben ist der ganze Trick:
   auf dunklem Grund hebt eine einzelne helle Linie eine Fläche spürbarer an
   als jede Änderung der Füllfarbe. */
.card,
.trust-card,
.panel,
.flow-step,
.risk-card,
.produkt-karte,
.bestell-karte,
.lizenz-karte,
.faq details {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Der Hover-Lift hing bisher nur an .card — ausgerechnet an sechs Karten, die
   gar nicht anklickbar sind, während .trust-card und .panel mit demselben
   Inhalt keinen hatten. Statt ihn zu streichen (das nähme der Seite Leben,
   also genau das Gegenteil des Ziels) bekommen alle Stufe-2-Karten denselben
   dezenten Hover. */
.trust-card,
.panel,
.flow-step,
.risk-card,
.produkt-karte,
.bestell-karte,
.lizenz-karte {
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.trust-card:hover,
.panel:hover,
.flow-step:hover,
.risk-card:hover,
.produkt-karte:hover,
.bestell-karte:hover,
.lizenz-karte:hover {
  border-color: rgba(var(--accent-rgb), .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Stufe 3 — die Karte, auf die es ankommt. Die Klassen dafür gab es längst,
   das HTML markiert diese Karten seit jeher; es fehlte nur die Auszeichnung. */
.plan-featured,
.panel-accent,
.lizenz-karte.aktiv,
.login-card,
.erfolg-kasten.gross {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 0 1px rgba(var(--accent-rgb), .22),
    var(--shadow);
}

/* Den Rand nur dort anheben, wo er heute noch der neutrale ist. Die drei
   anderen Stufe-3-Karten tragen längst einen Akzentrand — ein pauschales
   border-color würde ihn abschwächen statt ihn zu stärken. */
.login-card,
.erfolg-kasten.gross {
  border-color: var(--line-strong);
}

/* ========== 21. Warenkorb ==========
   Gekauft wird seit 2.7.0 nur noch über den Warenkorb: Die Preiskarte legt
   hinein, warenkorb.html bezahlt. Dieser Abschnitt deckt beides ab — den
   Knopf in der Navigation, die Rückmeldung auf der Preiskarte und die Seite
   selbst. Alles aus den Tokens in Abschnitt 1, kein zweites Farbschema.
   ====================================================================== */

/* ---------- Knopf in der Navigation ----------
   Bewusst kein .btn: Die Knöpfe in .nav-actions verschwinden unter 1060 px im
   ausklappbaren Menü. Der Warenkorb soll aber gerade auf dem Handy mit einem
   Griff erreichbar bleiben. */
.nav-korb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--muted);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.nav-korb svg { width: 20px; height: 20px; }
.nav-korb:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .05);
}
.nav-korb.voll,
.nav-korb.is-active { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); }

/* Die Zahl sitzt auf der Ecke des Symbols. Sie ist die einzige Stelle, an der
   die Seite von sich aus meldet, dass etwas wartet — deshalb im Akzent und
   nicht in Grau. */
.nav-korb-zahl {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px;
  padding: 0 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  color: #05050a;
  font-size: .72rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* ---------- Rückmeldung auf der Preiskarte ---------- */
.korb-hinweis {
  margin: 10px 0 0;
  color: var(--ok);
  font-size: .84rem;
  text-align: center;
}

/* Liegt das Paket schon im Warenkorb, führt derselbe Knopf nur noch dorthin.
   Er bleibt sichtbar, tritt aber einen Schritt zurück — die Entscheidung ist
   ja bereits gefallen. */
.btn.im-korb {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), .45);
}

/* ---------- Die Liste im Warenkorb ---------- */
.korb-liste { list-style: none; padding: 0; margin: 0; }

.korb-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.korb-zeile:first-child { padding-top: 0; }
.korb-zeile:last-child { padding-bottom: 0; border-bottom: 0; }

.korb-info { flex: 1 1 auto; min-width: 0; }
.korb-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
}
.korb-unter {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .86rem;
}

.korb-preis {
  flex-shrink: 0;
  text-align: right;
  font-family: var(--font-head);
  font-weight: 700;
}
.korb-jetzt { display: block; font-size: 1.15rem; }
/* Der Preis vor dem Rabatt. Durchgestrichen und zurückgenommen, damit klar
   ist, welche der beiden Zahlen gilt. */
.korb-alt {
  display: block;
  color: var(--muted);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: line-through;
}

.korb-weg {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.korb-weg svg { width: 16px; height: 16px; }
.korb-weg:hover {
  color: var(--warn);
  border-color: rgba(245, 181, 68, .45);
  background: rgba(245, 181, 68, .08);
}

/* ---------- Rabattcode ---------- */
.korb-code {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.korb-code .field { flex: 1 1 200px; margin: 0; }
.korb-code .btn { flex-shrink: 0; }

/* Steht ein Code, verschwindet das Formular und stattdessen steht da, was er
   bringt — in Euro, nicht nur in Prozent. */
.korb-code-aktiv {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--ok-soft);
  border: 1px solid rgba(var(--ok-rgb), .35);
  border-radius: var(--radius-sm);
}
.korb-code-marke {
  padding: 5px 12px;
  background: rgba(var(--ok-rgb), .16);
  border-radius: 999px;
  color: var(--ok);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .02em;
}
.korb-code-text { flex: 1 1 auto; color: var(--text-2); font-size: .92rem; }
.korb-code-aktiv button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: .86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.korb-code-aktiv button:hover { color: var(--text); }

/* ---------- Summe ---------- */
.korb-summe li { font-size: .95rem; }
.korb-abzug { color: var(--ok); }

.korb-gesamt {
  padding-top: 14px;
  font-family: var(--font-head);
  font-size: 1.1rem;
}
.korb-gesamt .k { color: var(--text); font-weight: 600; }
.korb-gesamt .v { color: var(--accent); font-size: 1.35rem; }

.korb-kasse { margin-top: 20px; }
.korb-kasse-hinweis {
  margin: 12px 0 0;
  font-size: .85rem;
  line-height: 1.6;
}

/* Ein Knopf ohne Ziel darf nicht aussehen wie einer mit. */
.btn.ist-aus {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.korb-fuss { margin-top: 20px; text-align: center; }
.korb-ausweg { margin: 14px 0 0; text-align: center; font-size: .9rem; }
.korb-ausweg a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Der Preis ohne Rabatt in der Kasse — dieselbe Rolle wie .korb-alt in der
   Liste, nur über dem großen Betrag. */
.kasse-preis-alt {
  display: block;
  color: var(--muted);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: line-through;
}

@media (max-width: 680px) {
  /* Die Zeile bleibt eine Zeile: Die Paketnamen sind kurz genug, und ein
     umgebrochener Löschknopf in einer eigenen Reihe sähe aus wie ein Fehler. */
  .korb-zeile { gap: 10px; }
  .korb-name { font-size: .98rem; }
  .korb-jetzt { font-size: 1.05rem; }
  .korb-code .btn { width: 100%; }
}

/* ========== 22. Druck ==========
   Betrifft in der Praxis die Rechtstexte: AGB, Widerruf und Datenschutz sind
   genau die Seiten, die Leute ausdrucken oder als PDF ablegen. Ohne das hier
   käme nach der Überarbeitung dunkles Papier mit Rasterlinien aus dem Drucker.
   ====================================================================== */
@media print {
  :root {
    --bg: #fff; --bg-2: #fff;
    --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --text: #000; --text-2: #1a1a1a; --muted: #444;
    --line: #bbb; --line-strong: #888;
    --accent: #000; --accent-rgb: 0, 0, 0;
  }

  body { background: #fff; color: #000; }

  /* Die Hintergrundebenen haben auf Papier nichts zu suchen. */
  .section::before,
  .section + .section::after,
  .account::before,
  .rechtstext::before,
  .hero-glow,
  .hero::after,
  .cta::before { display: none !important; }

  /* Navigation, Fußzeile und alles Anklickbare sind auf Papier tote Fracht. */
  .nav, .nav-toggle, .skip-link, .rechtslinks, .zurueck,
  .platzhalter-warnung { display: none !important; }

  .rechtstext { padding: 0; }
  .rechtstext .wrap-narrow { max-width: none; }
  .rechtstext h2 { break-after: avoid; }
  .rechtstext h2::before { background: #000; }
  .rechtstext p, .rechtstext li { break-inside: avoid; }

  /* Adressen im Impressum sind der Grund, aus dem gedruckt wird — die dürfen
     nicht über einen Seitenumbruch fallen. */
  .rechtstext address, .rechts-fuss { break-inside: avoid; }

  /* Ziel eines Verweises mitdrucken, sonst steht auf dem Papier nur ein Wort. */
  .rechtstext a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}


/* ==========================================================================
   23. Neuer Auftritt (2.8.1)

   Legt sich über alles darüber, wie Abschnitt 20: Rückbau ist das Löschen
   dieses Blocks. Was sich ändert, in einem Satz: mehr Tiefe, mehr Ruhe, klarere
   Hierarchie — größere Überschriften, Kennzeilen in Monospace, Karten mit
   Licht unter dem Mauszeiger, eine Preis-Karte mit umlaufender Kante.

   Bewusst ohne neue Schriftdatei und ohne fremde Quelle: Die
   Sicherheitsrichtlinie lässt Schriften nur von dieser Domain zu, und die
   Monospace-Schrift bringt Windows selbst mit (siehe --font-mono).

   Farben bleiben Blau und Violett wie in der App seit 2.8.0. Gold steht
   ausschließlich für "Empfehlung", damit es seine Bedeutung behält.
   ========================================================================== */

::selection { background: rgba(var(--accent-rgb), .38); color: #fff; }

:root {
  --gold:     #f5b544;
  --gold-rgb: 245, 181, 68;
}

/* ---------- Überschriften und Abstände ---------- */
h1, h2 { letter-spacing: -.035em; text-wrap: balance; }
h3 { letter-spacing: -.015em; }

.section { padding: 120px 0; }
.section-head { margin-bottom: 60px; }
.section h2 {
  font-size: clamp(2.05rem, 4.8vw, 3.2rem);
  line-height: 1.06;
  margin-bottom: .42em;
}
.sub { font-size: 1.07rem; line-height: 1.7; text-wrap: pretty; }

/* Kennzeile über der Überschrift: Monospace, weit gesperrt, mit leuchtendem
   Punkt in der Abschnittsfarbe. Vorher fetter Akzent-Text — der stand in
   Konkurrenz zur Überschrift, statt ihr den Weg zu zeigen. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
}
.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16), 0 0 14px rgba(var(--accent-rgb), .9);
}

/* Überschriften füllen sich beim Hereinscrollen von Grau zu Weiß.
   Reines CSS über eine Scroll-Zeitleiste — kein Zerlegen in Einzelwörter per
   Skript, denn mehrere Überschriften tragen Zahlen, die tweaks.js erst später
   einsetzt. Browser ohne animation-timeline zeigen sie einfach weiß; wer
   weniger Bewegung eingestellt hat, ebenfalls. "screen", damit auf Papier nie
   durchsichtiger Text landet. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head h2,
    .cta h2 {
      background: linear-gradient(90deg, var(--text) 0 44%, rgba(238, 241, 248, .22) 56% 100%)
                  100% 0 / 230% 100% no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: ueberschrift-fuellen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 40%;
    }
    @keyframes ueberschrift-fuellen { to { background-position: 0 0; } }
  }
}

/* ---------- Navigation ---------- */
.nav.scrolled {
  background: rgba(6, 7, 14, .74);
  border-bottom-color: rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.logo { gap: 11px; font-weight: 700; letter-spacing: -.01em; }
/* Das T aus der App, samt Kachel (favicon.svg). Der Radius folgt der Kachel in
   der Datei (12 von 64), damit der Schein nicht eckig absteht. */
.logo img {
  width: 36px; height: 36px;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(47, 123, 255, .35);
}
.logo strong {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.nav-links a[aria-current="page"],
.nav-links a.is-active { color: var(--text); }

/* Auf breiten Schirmen sitzen die Einträge in einer gemeinsamen Kapsel, und der
   aktuelle Abschnitt bekommt eine eigene Pille. Unter 1061 px ist dieselbe
   Liste das ausklappbare Menü — dort gilt das alles nicht. */
@media (min-width: 1061px) {
  .nav-links {
    margin-right: 6px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(14, 16, 32, .55);
  }
  .nav-links a { padding: 7px 14px; border-radius: 999px; font-size: .9rem; white-space: nowrap; }
  .nav-links a[aria-current="page"],
  .nav-links a.is-active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-2-rgb), .24));
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .38);
  }
}

/* Knapp über dem Umschaltpunkt zum Burger-Menü wird es eng — erst recht
   angemeldet, wo rechts drei Knöpfe stehen. Dort rücken die Einträge
   zusammen, und "Startseite" entfällt: Dasselbe Ziel hat das Logo daneben. */
@media (min-width: 1061px) and (max-width: 1220px) {
  .nav-inner { gap: 14px; }
  .nav-links { margin-right: 0; }
  .nav-links a { padding: 7px 10px; font-size: .87rem; }
  .nav-links > a:first-child { display: none; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-sm { padding: 8px 13px; }
}

.nav-korb { border-radius: 12px; background: rgba(255, 255, 255, .02); }

/* ---------- Knöpfe ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 28px rgba(var(--accent-rgb), .30);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 38px rgba(var(--accent-rgb), .42);
}
/* Ein Lichtstreif, der beim Überfahren einmal durchläuft. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-outline {
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- Licht unter dem Mauszeiger ----------
   script.js schreibt die Position als --mx/--my in die Karte, über der die
   Maus steht. Ohne Maus (Touch) oder ohne Skript stehen die Werte weit
   außerhalb, und die Ebene ist unsichtbar. Gesetzt wird nur background-image:
   Die Füllfarbe kommt weiter aus den Regeln oben. */
.card, .trust-card, .flow-step, .risk-card, .weg-karte, .opt-cat, .plan, .faq details {
  background-image:
    radial-gradient(460px circle at var(--mx, -1000px) var(--my, -1000px),
                    rgba(var(--accent-rgb), .09), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%);
}

.card, .trust-card, .flow-step, .risk-card, .plan, .panel { border-radius: 20px; }
.card { padding: 30px 28px; }
.icon {
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .20), rgba(var(--accent-2-rgb), .08));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22);
}
.icon-ok {
  background: linear-gradient(145deg, rgba(var(--ok-rgb), .20), rgba(var(--ok-rgb), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), .24);
}

/* ---------- Hero ---------- */
.hero { padding: 64px 0 104px; }

.hero-glow {
  inset: -24% -10% auto;
  height: 980px;
  background:
    radial-gradient(520px 320px at 50% 20%, rgba(var(--accent-rgb), .24), transparent 70%),
    radial-gradient(460px 320px at 20% 46%, rgba(var(--accent-2-rgb), .17), transparent 70%),
    radial-gradient(440px 300px at 82% 40%, rgba(34, 211, 238, .10), transparent 70%);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  to { transform: translate3d(0, 26px, 0) scale(1.07); }
}

/* Die große Marke über der Überschrift: das Logo als App-Kachel. Die Kachel
   selbst steckt in favicon.svg, hier kommt nur der Schein dazu. Der Radius folgt
   der Kachel in der Datei (12 von 64). */
.hero-marke {
  position: relative;
  width: 118px; height: 118px;
  margin: 0 auto 34px;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(155, 228, 255, .12),
    0 26px 60px rgba(47, 123, 255, .42),
    0 0 130px rgba(46, 197, 255, .28);
  animation: marke-schweben 6s ease-in-out infinite;
}
/* Zweiter, zarter Rahmen um die Kachel — gibt ihr Luft, ohne sie größer zu machen. */
.hero-marke::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 34px;
  border: 1px solid rgba(47, 123, 255, .24);
  background: rgba(47, 123, 255, .04);
  z-index: -1;
}
.hero-marke img {
  display: block;
  width: 100%; height: 100%;
}
@keyframes marke-schweben { 50% { transform: translateY(-8px); } }

.pill {
  padding: 8px 16px;
  margin-bottom: 26px;
  border-color: rgba(var(--accent-rgb), .30);
  background: rgba(14, 16, 32, .72);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  box-shadow: 0 0 28px rgba(var(--accent-rgb), .14);
}

.hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin-bottom: .4em;
}
.grad {
  background: linear-gradient(100deg, #8aa4ff, var(--accent) 30%, var(--accent-2) 70%, #d59bff);
  -webkit-background-clip: text;
  background-clip: text;
}
.lead { font-size: 1.14rem; line-height: 1.7; }

/* Zahlen aus dem Katalog, direkt unter den Knöpfen. Alles echte Werte: Die
   Anzahlen setzt tweaks.js aus tweaks.json, die Version kommt aus konfig.js. */
.hero-zahlen {
  list-style: none;
  padding: 0;
  margin: 46px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hero-zahlen li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
  padding: 11px 18px 11px 12px;
  background: rgba(14, 16, 32, .72);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s ease, transform .2s ease;
}
.hero-zahlen li:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); }
.hz-ico {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .13);
  color: var(--accent);
}
.hz-ico svg { width: 18px; height: 18px; }
.hz-zahl {
  display: block;
  min-height: 1.1em;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.hz-text {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Die Vertrauensleiste wird eine einzige Leiste mit Trennstrichen statt vier
   einzelner Kästen — neben den Zahlen darüber wären es sonst acht Kästen. */
.trustbar {
  gap: 0;
  margin-top: 26px;
  background: rgba(9, 10, 20, .6);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.trustbar li {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
.trustbar li:first-child { border-left: 0; }

/* ---------- Wegweiser ---------- */
#wegweiser { --glow-x: 50%; --glow-y: 0%; --glow-a: .08; }

.weg-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 46px;
}
/* Die Äste: ein Stamm von der Überschrift herunter, eine Schiene quer und von
   dort je ein Zweig zu jeder Karte. Mitte einer Spalte bei drei Spalten und
   20 px Abstand: (100% - 40px) / 6. */
.weg-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc((100% - 40px) / 6);
  right: calc((100% - 40px) / 6);
  height: 1px;
  background: linear-gradient(90deg, #22d3ee, var(--gold), #e879f9);
  opacity: .7;
}
.weg-grid::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -40px;
  width: 1px; height: 40px;
  background: linear-gradient(transparent, var(--gold));
}

.weg-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 24px 22px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.weg-karte::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -46px;
  width: 1px; height: 46px;
  background: linear-gradient(var(--accent), rgba(var(--accent-rgb), .15));
}
/* Knoten dort, wo der Zweig auf die Karte trifft */
.weg-karte::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2), 0 0 12px rgba(var(--accent-rgb), .9);
}
.weg-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 44px rgba(var(--accent-rgb), .12);
}
.weg-ico {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3);
  color: var(--accent);
}
.weg-ico svg { width: 21px; height: 21px; }
.weg-frage {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
}
.weg-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.weg-fuss svg { width: 14px; height: 14px; margin-left: auto; transition: transform .2s ease; }
.weg-karte:hover .weg-fuss svg { transform: translateY(3px); }

.weg-top {
  border-color: rgba(var(--gold-rgb), .45);
  background-image:
    radial-gradient(460px circle at var(--mx, -1000px) var(--my, -1000px), rgba(var(--gold-rgb), .10), transparent 45%),
    linear-gradient(180deg, rgba(var(--gold-rgb), .09), transparent 62%);
}

/* Das Etikett "Empfehlung" — Gold steht auf der ganzen Seite nur hierfür. */
.marke-gold,
.badge {
  padding: 5px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #ffd98a);
  color: #1c1303;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), .35);
}
.weg-top .marke-gold { position: absolute; top: -12px; right: 18px; }

/* ---------- Preise ---------- */
.plan { padding: 36px 30px 30px; }
.plan-kind { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; }
.plan h3 { font-size: 1.45rem; }
.price .amount { font-size: 3.4rem; letter-spacing: -.04em; }

/* Die hervorgehobene Karte bekommt eine Kante, die langsam umläuft. Ohne
   @property-Unterstützung steht der Verlauf still — sieht dann immer noch
   aus wie ein gezeichneter Rand. */
@property --kante {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.plan-featured {
  border-color: rgba(var(--accent-rgb), .22);
  /* Die Regel in Abschnitt 9 setzt die Kurzform background und damit die
     Füllfarbe auf durchsichtig — hier ausdrücklich zurück. */
  background-color: var(--surface);
  background-image:
    radial-gradient(460px circle at var(--mx, -1000px) var(--my, -1000px), rgba(var(--accent-rgb), .10), transparent 45%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .12), transparent 58%);
}
.plan-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--kante),
              rgba(var(--accent-rgb), .12) 0deg,
              var(--accent) 60deg,
              var(--accent-2) 120deg,
              rgba(var(--accent-2-rgb), .12) 180deg,
              rgba(var(--accent-rgb), .12) 240deg,
              var(--gold) 300deg,
              rgba(var(--accent-rgb), .12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: kante-drehen 7s linear infinite;
  pointer-events: none;
}
@keyframes kante-drehen { to { --kante: 360deg; } }
.plan-featured .amount {
  background: linear-gradient(100deg, #fff 20%, #c9d3ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.badge { top: -12px; }

/* ---------- Paketvergleich ---------- */
.vergleich-kopf { margin: 88px 0 26px; text-align: center; }
.vergleich-kopf h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .3em; }
.vergleich-kopf p { color: var(--muted); margin: 0; }

.vergleich-rahmen {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.vergleich {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .93rem;
}
.vergleich th,
.vergleich td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }
.vergleich tbody th {
  color: var(--text-2);
  font-weight: 500;
  text-align: left;
}
.vergleich thead th {
  padding-top: 26px;
  padding-bottom: 18px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  vertical-align: bottom;
}
.vergleich thead th:first-child {
  width: 40%;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: left;
  text-transform: uppercase;
}
.vg-preis {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
}
/* Die Bundle-Spalte ist eine durchgehende helle Bahn */
.vergleich .vg-top { background: rgba(var(--accent-rgb), .07); }
.vergleich thead .vg-top { border-radius: 0; }
.vergleich thead .vg-top .vg-preis { color: var(--accent); }
.vergleich thead .marke-gold { display: inline-block; margin-bottom: 10px; }
.vg-ja, .vg-nein { display: inline-block; vertical-align: middle; }
.vg-ja {
  width: 12px; height: 7px;
  margin-top: -4px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.vg-top .vg-ja { border-color: var(--accent); }
.vg-nein { width: 12px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.vg-text { color: var(--text); font-weight: 600; font-size: .86rem; }
/* Nur dort, wo die Tabelle breiter ist als der Schirm (siehe unten). */
.vergleich-hinweis { display: none; margin: 12px 0 0; color: var(--muted); font-size: .84rem; text-align: center; }

/* ---------- Ablauf der PC-Optimierung ---------- */
.zeitstrahl-kopf {
  margin: 72px 0 34px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}
.zeitstrahl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.zeitstrahl::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc((100% - 56px) / 10);
  right: calc((100% - 56px) / 10);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .45;
}
.zeitstrahl li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.zs-num {
  width: 46px; height: 46px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(var(--accent-rgb), .55);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgba(var(--accent-rgb), .28);
}
.zeitstrahl strong { font-family: var(--font-head); font-size: 1.03rem; }
.zs-text { color: var(--muted); font-size: .88rem; line-height: 1.5; max-width: 22ch; }

/* ---------- Kaufablauf ---------- */
.flow-num {
  background: var(--bg);
  border: 1px solid rgba(var(--accent-rgb), .55);
  color: var(--accent);
  font-family: var(--font-mono);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .25);
}
.flow-art { border-radius: 14px; background: rgba(6, 7, 14, .6); }
.flow-step::after {
  top: 46px; right: -15px;
  width: 12px; height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 10px rgba(var(--accent-rgb), .5);
  transform: none;
  z-index: 1;
}

/* ---------- Umfang: Bereiche als Karten ---------- */
.opt-grid {
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 14px;
}
.opt-cat {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 20px 20px 18px;
  background-color: var(--surface);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.opt-cat:hover { transform: translateY(-3px); }
/* Symbol links, daneben Name und darunter die Anzahl. Nebeneinander in einer
   Zeile stieß die Anzahl bei "Experimentell" an den Kartenrand. */
.opt-kopf {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
.opt-ico {
  grid-row: span 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .25);
  color: var(--accent);
}
.opt-ico svg { width: 19px; height: 19px; }
.opt-cat .c {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}
.opt-cat .n {
  min-width: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
}
.opt-cat .d { color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* Der dicke farbige linke Rand passte nicht mehr zu den runderen Ecken. Die
   Farbe trägt jetzt der leuchtende Punkt vor der Zahl. */
.risk-row .risk-card { border-left-width: 1px; border-left-color: var(--line); padding: 26px 24px; }
.risk-row .risk-card:hover { border-color: rgba(var(--accent-rgb), .30); }
.risk-card .rk { position: relative; padding-left: 16px; }
.risk-card .rk::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: currentColor;
}
.risk-safe .rk     { color: var(--ok); }
.risk-caution .rk  { color: var(--warn); }
.risk-advanced .rk { color: var(--risk-adv); }
.risk-card .rk::before { box-shadow: 0 0 12px currentColor; }

/* ---------- App-Vorstellung ---------- */
.shot-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: rgba(14, 16, 32, .7);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.shot-tab { border-color: transparent; background: transparent; }
.shot-tab[aria-selected="true"] {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .25), rgba(var(--accent-2-rgb), .18));
}
.shot {
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 30px 80px rgba(0, 0, 0, .6),
    0 0 90px rgba(var(--accent-rgb), .14);
}
.feature-list .fi {
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .25);
}

/* ---------- FAQ ---------- */
.faq details {
  margin-bottom: 12px;
  border-radius: 16px;
  transition: border-color .2s ease, background-color .2s ease;
}
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: rgba(var(--accent-rgb), .42); background-color: var(--surface-2); }
.faq summary {
  padding: 20px 64px 20px 24px;
  font-family: var(--font-head);
  font-size: 1.04rem;
}
/* Plus im Kreis statt Winkel; beim Öffnen dreht es sich zum Kreuz. */
.faq summary::after {
  right: 20px; top: 50%;
  width: 30px; height: 30px;
  margin-top: -15px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 11px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 11px no-repeat;
  transform: none;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.faq details[open] summary::after {
  top: 50%;
  transform: rotate(45deg);
  border-color: rgba(var(--accent-rgb), .5);
  background-color: var(--accent-soft);
}
.faq .faq-body { padding: 0 24px 22px; }

/* Aufklappen mit Bewegung, wo der Browser Höhen bis "auto" animieren kann.
   Überall sonst springt die Antwort auf wie bisher. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      height: 0;
      overflow: clip;
      transition: height .3s ease, content-visibility .3s allow-discrete;
    }
    .faq details[open]::details-content { height: auto; }
  }
}

/* ---------- Abschluss ---------- */
.cta { padding: 20px 0 120px; }
.cta::before { display: none; }
.cta-karte {
  position: relative;
  overflow: hidden;
  padding: 72px 32px;
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 28px;
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(var(--accent-rgb), .26), transparent 70%),
    radial-gradient(420px 240px at 12% 100%, rgba(var(--accent-2-rgb), .18), transparent 70%),
    radial-gradient(420px 240px at 88% 100%, rgba(34, 211, 238, .10), transparent 70%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow);
}
.cta-karte::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
}
.cta-karte > * { position: relative; z-index: 1; }

/* ---------- Fußbereich ---------- */
.footer {
  position: relative;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  border-top-color: transparent;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .45), transparent);
}
/* Ein Listenpunkt, dessen Link noch kein Ziel hat (Discord-Einladung), soll
   keine leere Zeile hinterlassen. */
.footer ul li:has(> a[hidden]) { display: none; }

.footer h4 {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- Konto- und Kassenseiten ---------- */
.login-card { border-radius: 22px; }
.field input { border-radius: 11px; }
.field input:focus,
.field select.eingabe-text:focus { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }

/* ---------- Gestaffeltes Einblenden ----------
   Die Abschnitte blenden schon als Ganzes ein (.reveal). Die Karten darin
   kommen jetzt kurz nacheinander. Über translate statt transform, damit der
   Hover-Lift der Karten (transform) unberührt bleibt; deshalb stehen dessen
   Übergänge hier noch einmal mit in der Liste. */
@media (prefers-reduced-motion: no-preference) {
  .reveal :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > * {
    opacity: 0;
    translate: 0 18px;
    transition:
      opacity .6s ease var(--d, 0s),
      translate .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
      transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .reveal.visible :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > * {
    opacity: 1;
    translate: none;
  }
  .reveal :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > :nth-child(2) { --d: .08s; }
  .reveal :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > :nth-child(3) { --d: .16s; }
  .reveal :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > :nth-child(4) { --d: .24s; }
  .reveal :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > :nth-child(5) { --d: .32s; }
  .reveal :is(.grid-3, .pricing, .trust-grid, .flow, .weg-grid, .risk-row, .zeitstrahl) > :nth-child(n+6) { --d: .4s; }
}

/* ---------- Schmale Schirme ---------- */
@media (max-width: 900px) {
  .weg-grid { grid-template-columns: 1fr; padding-top: 0; gap: 16px; }
  .weg-grid::before, .weg-grid::after,
  .weg-karte::before, .weg-karte::after { display: none; }
  /* Die Empfehlung zuerst, wie bei den Preiskarten */
  .weg-top { order: -1; margin-top: 10px; }

  .trustbar li { border-left: 0; border-top: 1px solid var(--line); }
  .trustbar li:nth-child(-n+2) { border-top: 0; }
  .trustbar li:nth-child(even) { border-left: 1px solid var(--line); }

  .zeitstrahl { grid-template-columns: 1fr; gap: 0; max-width: 460px; margin-inline: auto; }
  .zeitstrahl::before {
    top: 22px; bottom: 22px;
    left: 22px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
  }
  .zeitstrahl li {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 16px;
    align-items: start;
    padding-bottom: 22px;
    text-align: left;
  }
  .zeitstrahl li:last-child { padding-bottom: 0; }
  .zs-num { grid-row: span 2; margin: 0; }
  .zeitstrahl strong { padding-top: 2px; }
  .zs-text { max-width: none; }
}

@media (max-width: 680px) {
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 40px; }
  .hero { padding: 40px 0 72px; }
  .hero-marke { width: 92px; height: 92px; border-radius: 17px; margin-bottom: 28px; }
  .hero-marke::before { inset: -10px; border-radius: 26px; }
  .pill { font-size: .62rem; letter-spacing: .12em; }

  .hero-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-zahlen li { min-width: 0; padding: 10px 12px 10px 10px; gap: 10px; }
  .hz-ico { width: 32px; height: 32px; }

  .trustbar li { border-left: 0 !important; border-top: 1px solid var(--line); }
  .trustbar li:first-child { border-top: 0; }
  .trustbar li:nth-child(2) { border-top: 1px solid var(--line); }

  .vergleich-kopf { margin-top: 64px; }
  .vergleich { min-width: 540px; font-size: .88rem; }
  .vergleich th, .vergleich td { padding: 13px 12px; }
  /* Beim seitlichen Wischen bleibt die Beschriftung der Zeile stehen, sonst
     sieht man Häkchen ohne zu wissen, wofür. */
  .vergleich thead th:first-child,
  .vergleich tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 150px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .vergleich-hinweis { display: block; }

  .cta { padding-bottom: 80px; }
  .cta-karte { padding: 52px 20px; border-radius: 22px; }

  /* Längster Knopftext der Seite: passte auf 390 px nicht in eine Zeile und
     wurde rechts abgeschnitten. */
  .opt-alle .btn { white-space: normal; text-wrap: balance; }
  .opt-cat { padding: 18px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-marke, .plan-featured::before { animation: none; }
}

/* ==========================================================================
   24. Werkstatt (2.9.0)

   Legt sich wie Abschnitt 23 über alles darüber; Rückbau ist das Löschen
   dieses Blocks. Zwei Dinge ändern sich:

   1. Die Farben der App. Blau-Schwarz wie Tyler seit 2.8.0 (Themes/Colors.xaml
      im App-Projekt): Akzent #2F7BFF, Cyan #2EC5FF, Grund #05070C. Das Violett
      ist weg. Gold bleibt die Farbe für "Empfehlung", Rot wie in der App die
      für die Risikostufe "Fortgeschritten".
   2. Werkstatt statt Weltraum: Messraster statt weichem Nebel, Knöpfe wie
      Schalter statt Pillen, nummerierte Abschnitte wie auf einem
      Prüfprotokoll, ein Messband unter dem Hero und die Kennzahlen als
      Datenblatt.

   Keine erfundenen Messwerte: Was nach Anzeige aussieht, zeigt echte Zahlen
   aus tweaks.json und konfig.js. Vorher/Nachher-FPS kommen erst dazu, wenn es
   echte Messungen gibt.
   ========================================================================== */

:root {
  --bg:          #05070c;
  --bg-2:        #080b12;
  --surface:     #0d121c;
  --surface-2:   #131a27;
  --surface-3:   #1b2436;
  --line:        #1a2233;
  --line-strong: #27324a;

  --text:        #edf2fc;
  --text-2:      #c3ccdd;
  /* Wie TextSecondary in der App. Auf --surface rund 7:1. */
  --muted:       #94a3bf;

  /* #3D8BFF statt #2F7BFF aus der App: Der Akzent steht hier auch als Schrift
     auf dunklem Grund, und dafür braucht er etwas mehr Helligkeit (5,5:1).
     Auf den Verlaufs-Knöpfen trägt er weiter die fast schwarze Schrift. */
  --accent:        #3d8bff;
  --accent-rgb:    61, 139, 255;
  --accent-2:      #2ec5ff;
  --accent-2-rgb:  46, 197, 255;
  --accent-soft:   rgba(var(--accent-rgb), .10);
  --risk-adv:      #ff6b6b;

  /* Kantiger: Werkzeug, kein Spielzeug. */
  --radius:      12px;
  --radius-sm:   9px;
  --radius-xs:   6px;

  /* Messraster: grobe Linien alle 80 px, feine alle 16 px. Das Messband unter
     dem Hero hat dieselbe Teilung, damit Striche und Raster übereinander
     liegen. */
  --raster:      rgba(61, 139, 255, .05);
  --raster-fein: rgba(61, 139, 255, .022);
}

/* ---------- Abschnittstöne ----------
   Cyan und Gold bleiben. Aus Magenta wird Stahlblau: hell genug für die
   dunkle Schrift auf den Verlaufs-Knöpfen, aber klar vom Akzent getrennt. */
.ton-cyan {
  --accent:       #2ec5ff;
  --accent-rgb:   46, 197, 255;
  --accent-2:     #7fd8ff;
  --accent-2-rgb: 127, 216, 255;
  --accent-soft:  rgba(var(--accent-rgb), .10);
}
.ton-stahl {
  --accent:       #8fb4ff;
  --accent-rgb:   143, 180, 255;
  --accent-2:     #5b9bff;
  --accent-2-rgb: 91, 155, 255;
  --accent-soft:  rgba(var(--accent-rgb), .10);
}

::selection { background: rgba(var(--accent-rgb), .40); }

/* ---------- Messraster ---------- */
.section::before {
  background:
    radial-gradient(var(--glow-w, 820px) var(--glow-h, 440px)
                    at var(--glow-x, 78%) var(--glow-y, 8%),
                    rgba(var(--accent-rgb), var(--glow-a, .09)), transparent 68%),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px),
    linear-gradient(var(--raster-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.hero::after {
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px),
    linear-gradient(var(--raster-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

/* Messband an der Unterkante des Hero: lange Striche alle 80 px, kurze alle
   16 px — dieselbe Teilung wie das Raster darüber. */
.hero::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .55) 0 1px, transparent 1px 80px)
      left bottom / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .28) 0 1px, transparent 1px 16px)
      left bottom / 100% 7px no-repeat,
    linear-gradient(rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .35))
      left bottom / 100% 1px no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* ---------- Nummerierte Abschnitte ----------
   Die Kennzeile über jeder Abschnittsüberschrift bekommt ihre laufende Nummer
   wie ein Prüfschritt: 01, 02, … Gezählt wird per CSS, damit ein neuer
   Abschnitt nichts umnummerieren muss. Der Zusatz / "" hält die Nummer vom
   Vorlesen fern; Browser ohne diese Schreibweise nehmen die Zeile davor. */
body { counter-reset: abschnitt; }
.section-head .eyebrow { counter-increment: abschnitt; }
.eyebrow::before { border-radius: 2px; }
.section-head .eyebrow::before {
  content: counter(abschnitt, decimal-leading-zero);
  content: counter(abschnitt, decimal-leading-zero) / "";
  width: auto; height: auto;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(var(--accent-rgb), .10);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
  color: var(--accent);
  font-size: .68rem;
  letter-spacing: .08em;
  line-height: 1;
}

/* ---------- Schalter statt Pillen ---------- */
.btn { border-radius: 10px; }
.btn-sm { border-radius: 9px; }

.pill {
  border-radius: 8px;
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(13, 18, 28, .8);
}

.nav.scrolled { background: rgba(5, 7, 12, .8); }
.nav-korb { border-radius: 10px; }
@media (min-width: 1061px) {
  .nav-links { border-radius: 12px; background: rgba(13, 18, 28, .6); }
  .nav-links a { border-radius: 8px; }
}

.shot-tabs { border-radius: 12px; background: rgba(13, 18, 28, .7); }
.shot-tab { border-radius: 8px; }

.marke-gold, .badge { border-radius: 6px; }

/* ---------- Karten ----------
   Kleinere Radien und eine kurze Markierung oben links in der Farbe des
   Abschnitts, wie ein Etikett an einem Gehäuse. Die Liste der Ebenen wird
   hier vollständig neu gesetzt; die hervorgehobenen Karten (.plan-featured,
   .weg-top) setzen ihre eigenen Farben darunter noch einmal. */
.card, .trust-card, .flow-step, .risk-card, .plan, .panel,
.weg-karte, .opt-cat, .vergleich-rahmen, .shot { border-radius: 14px; }
.trustbar { border-radius: 14px; background: rgba(8, 11, 18, .6); }
.faq details { border-radius: 12px; }
.login-card { border-radius: 16px; }
.cta-karte { border-radius: 18px; }
.flow-art { background: rgba(5, 7, 12, .6); }

.card, .trust-card, .flow-step, .risk-card, .weg-karte, .opt-cat, .plan {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    radial-gradient(460px circle at var(--mx, -1000px) var(--my, -1000px),
                    rgba(var(--accent-rgb), .09), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%);
  background-size: 26px 2px, auto, auto;
  background-position: 22px 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.plan-featured {
  background-image:
    linear-gradient(var(--accent-2), var(--accent-2)),
    radial-gradient(460px circle at var(--mx, -1000px) var(--my, -1000px),
                    rgba(var(--accent-rgb), .10), transparent 45%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .12), transparent 58%);
}
.weg-top {
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    radial-gradient(460px circle at var(--mx, -1000px) var(--my, -1000px),
                    rgba(var(--gold-rgb), .10), transparent 45%),
    linear-gradient(180deg, rgba(var(--gold-rgb), .09), transparent 62%);
}

.icon, .weg-ico, .opt-ico, .feature-list .fi { border-radius: 9px; }

/* ---------- Verläufe in Schrift ---------- */
.grad {
  background: linear-gradient(100deg, #7fb0ff, var(--accent) 30%, var(--accent-2) 72%, #9be4ff);
  -webkit-background-clip: text;
  background-clip: text;
}
.plan-featured .amount {
  background: linear-gradient(100deg, #fff 20%, #bfe3ff);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Die Äste im Wegweiser in den Farben der drei Karten */
.weg-grid::before { background: linear-gradient(90deg, #2ec5ff, var(--gold), #8fb4ff); }

/* ---------- Kennzahlen als Datenblatt ----------
   Vorher vier einzelne Kästen. Jetzt ein Gerät mit vier Kanälen: eine Leiste,
   Trennstriche, Kanalnummer oben rechts, eine Skala unten und die Ziffern mit
   leichtem Nachleuchten wie auf einer Anzeige. Die Werte selbst setzen weiter
   tweaks.js und konfig.js ein. */
.hero-zahlen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 940px;
  margin: 58px auto 0;
  background: linear-gradient(180deg, rgba(19, 26, 39, .92), rgba(8, 11, 18, .92));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .45);
  counter-reset: kanal;
}
/* Beschriftung auf der Kante, wie bei einem Formularrahmen. Absolut
   positioniert zählt sie im Raster nicht als Zelle. */
.hero-zahlen::before {
  content: 'Datenblatt';
  position: absolute;
  top: -9px; left: 20px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 18px;
  text-transform: uppercase;
}
.hero-zahlen li {
  counter-increment: kanal;
  position: relative;
  min-width: 0;
  gap: 14px;
  padding: 24px 20px 28px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.hero-zahlen li:first-child { border-left: 0; }
.hero-zahlen li:hover { transform: none; border-color: var(--line); }
.hero-zahlen li::before {
  content: counter(kanal, decimal-leading-zero);
  content: counter(kanal, decimal-leading-zero) / "";
  position: absolute;
  top: 9px; right: 12px;
  color: #5a6886;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
}
.hero-zahlen li::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px; bottom: 11px;
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .5) 0 1px, transparent 1px 8px);
  mask-image: linear-gradient(90deg, #000 25%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent);
}
.hz-ico {
  border-radius: 8px;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3);
}
.hz-zahl {
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), .55);
}

@media (max-width: 680px) {
  .hero-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 46px; }
  .hero-zahlen li { gap: 10px; padding: 20px 14px 26px; }
  .hero-zahlen li:nth-child(odd) { border-left: 0; }
  .hero-zahlen li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-zahlen li::after { left: 14px; right: 14px; }
  .hz-zahl { font-size: 1.25rem; }
  .cta-karte { border-radius: 16px; }
}

@media print {
  .hero-marke, .hero-zahlen, .weg-grid::before, .weg-grid::after,
  .plan-featured::before, .cta-karte::after, .footer::before { display: none !important; }
}

/* ==========================================================================
   25. Startseite ohne App-Vorstellung (2.9.0)

   Vorbild realdarkzy.de: oben nur der Name, riesig; darunter die Pakete
   nicht mehr als drei Karten nebeneinander, sondern als breite Blöcke
   untereinander — links, was drin ist, rechts Preis und Kaufknopf.

   Die Blöcke tragen weiter die Klasse .plan, weil script.js daran Preis,
   Name und Kaufknopf findet. Alles, was .plan als schmale Karte gebaut hat
   (Flex-Spalte, Anheben beim Überfahren), wird hier für .produkt
   zurückgenommen.
   ========================================================================== */

/* ---------- Der Name ----------
   Mit .hero davor, sonst gewinnt .hero h1 aus Abschnitt 23. */
.hero .hero-name {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto .3em;
  /* Etwas Luft unter der Grundlinie, sonst schneidet background-clip das
     y unten ab. */
  padding-bottom: .06em;
  font-size: clamp(3rem, 14vw, 8.75rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  background: linear-gradient(100deg, var(--accent) 0%, #e9f1ff 46%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 10px 46px rgba(var(--accent-rgb), .38));
}
.hero .hero-cta { margin-top: 6px; }

/* ---------- Wegweiser in der neuen Reihenfolge ----------
   Stahlblau (Optimierung), Gold (Bundle), Cyan (App) — wie die Blöcke. */
.weg-grid::before { background: linear-gradient(90deg, #8fb4ff, var(--gold), #2ec5ff); }

/* ---------- Die Paket-Blöcke ---------- */
.produkte { display: grid; gap: 32px; }

.produkt {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px 48px;
  align-items: start;
  padding: 44px;
}
.produkt:hover,
.plan-featured.produkt:hover { transform: none; }
/* Unter 900 px schiebt Abschnitt 17 die hervorgehobene Karte nach vorn.
   Hier bleibt die Reihenfolge wie im Wegweiser. */
.produkte .plan-featured { order: 0; }

.produkt-info { min-width: 0; }

.produkt-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.produkt-marken .plan-kind {
  margin: 0;
  background: rgba(var(--accent-rgb), .10);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .30);
  color: var(--accent);
}

.produkt h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -.035em;
  margin-bottom: .35em;
}
.produkt .plan-desc {
  max-width: 58ch;
  margin-bottom: 26px;
  color: var(--text-2);
  font-size: 1.04rem;
  line-height: 1.7;
}

/* Merkmale in zwei Spalten, wo die Blockbreite es hergibt */
.features-2 { columns: 2; column-gap: 32px; }
.features-2 li { break-inside: avoid; }
.produkt-info .features { margin: 0 0 4px; }

/* ---------- "Was ich einstelle" ---------- */
.produkt-zwischen {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.produkt-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.produkt-punkte li {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: rgba(5, 7, 12, .45);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pp-ico {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3);
  color: var(--accent);
}
.pp-ico svg { width: 18px; height: 18px; }
.produkt-punkte h4 { font-size: .98rem; margin: 2px 0 .25em; }
.produkt-punkte p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* ---------- Kasse rechts: Preis und Kaufknopf ---------- */
.produkt-kasse {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(5, 7, 12, .55) 60%);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(var(--accent-rgb), .12);
}
.kasse-meta { margin: 10px 0 0; color: var(--muted); font-size: .88rem; }
.produkt-kasse .features { margin: 22px 0 26px; }
.produkt-kasse .laufzeit-wahl + .price { margin-bottom: 22px; }

/* ---------- Ablauf über die ganze Breite ---------- */
.produkt-ablauf {
  grid-column: 1 / -1;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.produkt-ablauf .zeitstrahl-kopf { margin: 0 0 30px; }
/* Der Ring um die Nummer verdeckt die Linie dahinter und muss deshalb die
   Farbe der Fläche haben, auf der er steht — hier die des Blocks. */
.produkt .zs-num {
  background: var(--surface);
  box-shadow: 0 0 0 6px var(--surface), 0 0 26px rgba(var(--accent-rgb), .28);
}

/* ---------- Bundle ---------- */
.produkt-bundle {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  align-items: stretch;
}
.produkt-bundle .amount {
  background: linear-gradient(100deg, #fff 10%, #ffd98a);
  -webkit-background-clip: text;
  background-clip: text;
}
.produkt-kaufzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.produkt-kaufzeile .plan-buy { flex: 1 1 260px; margin: 0; }

/* Zeichnung links: zwei Teile, die zu einem werden. Die Teile haben eine
   feste Höhe, damit die senkrechte Linie genau an ihren Mitten anfängt und
   aufhört (66 / 2 = 33). */
.bundle-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 28px 16px;
  background: rgba(5, 7, 12, .5);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bb-teile { position: relative; display: grid; gap: 40px; }
.bb-teil {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 66px;
  padding: 0 18px;
  background: var(--bg);
  border: 1px solid rgba(143, 180, 255, .5);
  border-radius: 9px;
  white-space: nowrap;
  box-shadow: 0 0 22px rgba(143, 180, 255, .12);
}
.bb-teil.bb-app { border-color: rgba(46, 197, 255, .5); box-shadow: 0 0 22px rgba(46, 197, 255, .12); }
.bb-teil strong { font-family: var(--font-head); font-size: .98rem; }
.bb-teil small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bb-teil::after,
.bb-teile::after,
.bb-ziel::before {
  content: '';
  position: absolute;
  background: rgba(var(--gold-rgb), .6);
}
.bb-teil::after { left: 100%; top: 50%; width: 28px; height: 1px; }
.bb-teile::after { right: -28px; top: 33px; bottom: 33px; width: 1px; }
.bb-ziel::before { right: 100%; top: 50%; width: 28px; height: 1px; }
.bb-ziel {
  position: relative;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .18), rgba(var(--gold-rgb), .04));
  border: 1px solid rgba(var(--gold-rgb), .75);
  border-radius: 10px;
  color: #ffd98a;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 0 34px rgba(var(--gold-rgb), .25);
}
/* Knoten, wo die beiden Linien zusammenlaufen */
.bb-ziel::after {
  content: '';
  position: absolute;
  right: calc(100% + 24px);
  top: calc(50% - 4px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), .9);
}

/* ---------- Schmale Schirme ---------- */
@media (max-width: 960px) {
  .produkt,
  .produkt-bundle { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 34px 28px; }
}

@media (max-width: 600px) {
  .produkt,
  .produkt-bundle { padding: 26px 18px; }
  .produkt-punkte { grid-template-columns: minmax(0, 1fr); }
  .features-2 { columns: 1; }
  .produkt-kasse { padding: 24px 18px 20px; }
  /* Die Zeichnung ist reine Dekoration und passt hier nicht mehr in die Breite. */
  .bundle-bild { display: none; }
}

/* ==========================================================================
   26. App-Vorschau im App-Paket (3.0)

   Echte Aufnahmen aus der App, übereinander gestapelt; script.js blendet
   eine nach der anderen ein. Oben auf der Seite bleibt es beim Namen
   (Abschnitt 25) — die Vorschau steht im Paket, wo es um die App geht.
   Das Seitenverhältnis steht fest, damit nichts springt, solange die
   Bilder noch laden.
   ========================================================================== */
.app-demo { margin: 26px 0 0; }
.app-demo-bilder {
  position: relative;
  aspect-ratio: 1400 / 900;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-rgb), .26);
  background: #05070d;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}
.app-demo-bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.app-demo-bilder img.ist-aktiv { opacity: 1; }
.app-demo-text {
  margin-top: 12px;
  min-height: 1.5em;
  color: var(--text-2);
  font-size: .9rem;
}
.app-demo-punkte { display: flex; gap: 6px; margin-top: 10px; }
.app-demo-punkte button {
  width: 22px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.app-demo-punkte button[aria-current="true"] { width: 34px; background: var(--accent); }
.app-demo-punkte button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   27. Nachtblau (4.1)

   Legt sich wie die Abschnitte 23 bis 26 über alles darüber; Rückbau ist das
   Löschen dieses Blocks. Die Website folgt damit dem Nachtblau der App 4.1
   (Themes/Colors.xaml im App-Projekt):

   1. Hauptknöpfe in tiefem Blau mit weißer Schrift, Glanzkante oben und
      blauem Schein — statt des hellen Cyan-Verlaufs mit schwarzer Schrift.
      Weiß auf #2563EB hat 5,2:1, auf #1D4ED8 6,7:1. Beim Überfahren wird nur
      der Schein stärker, nicht die Fläche heller, sonst fiele der Kontrast
      unter 4,5:1. Gold bleibt die Farbe für „Empfehlung“ und behält seinen
      Knopf.
   2. Die aktive Stelle im Menü als nachtblaue Fläche wie in der Seitenleiste
      der App, dazu eine Bildlaufleiste in Blau.
   3. Die Naht zwischen den Abschnitten leuchtet in der Mitte.
   4. Das Band zum PC-Score-Test unter dem Namen (score-test.html).
   ========================================================================== */

:root {
  --nacht:      #1d4ed8;
  --nacht-hell: #2563eb;
  --nacht-rgb:  29, 78, 216;
}

html { scrollbar-color: #24345a var(--bg); }

/* ---------- Hauptknöpfe ---------- */
.btn-primary {
  background: linear-gradient(180deg, var(--nacht-hell) 0%, var(--nacht) 100%);
  color: #fff;
  border-color: rgba(147, 197, 253, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 8px 26px rgba(var(--nacht-rgb), .45),
    0 0 36px rgba(var(--nacht-rgb), .22);
}
.btn-primary:hover {
  border-color: rgba(147, 197, 253, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 12px 34px rgba(var(--nacht-rgb), .6),
    0 0 54px rgba(37, 99, 235, .4);
}
.btn-primary::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
}

.ton-gold .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05050a;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 28px rgba(var(--accent-rgb), .30);
}
.ton-gold .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 38px rgba(var(--accent-rgb), .42);
}

/* ---------- Menü ---------- */
.nav-links a:hover { background: rgba(var(--nacht-rgb), .18); }
.nav-links a.is-active,
.nav-links a[aria-current="page"] {
  color: #fff;
  background: rgba(var(--nacht-rgb), .42);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .25);
}

/* ---------- Leuchtende Naht zwischen den Abschnitten ----------
   Die Naht aus Abschnitt 3 (.section + .section::after), nur in der Mitte
   heller und mit Schein. */
.section + .section::after {
  background: linear-gradient(90deg, transparent 8%, rgba(96, 165, 250, .6), transparent 92%);
  box-shadow: 0 0 16px rgba(var(--nacht-rgb), .8);
}

/* ---------- Band zum PC-Score-Test ---------- */
.score-band { position: relative; padding: 12px 0 28px; }

.score-band-karte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 18px;
  background:
    radial-gradient(520px 220px at 0% 50%, rgba(var(--nacht-rgb), .32), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 20px 60px rgba(0, 0, 0, .45),
    0 0 80px rgba(var(--nacht-rgb), .14);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.score-band-karte:hover {
  border-color: rgba(96, 165, 250, .55);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 26px 70px rgba(0, 0, 0, .5),
    0 0 100px rgba(var(--nacht-rgb), .26);
}

.score-band-ring {
  position: relative;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
}
.score-band-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-band-ring > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 700;
}
.score-band-spur { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.score-band-wert {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 230 327;
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .7));
}
@media (prefers-reduced-motion: no-preference) {
  .score-band-karte:hover .score-band-wert { stroke-dasharray: 300 327; }
  .score-band-wert { transition: stroke-dasharray .6s ease; }
}

.score-band-text { display: grid; gap: 4px; min-width: 0; }
.score-band-text .eyebrow { margin-bottom: 4px; }
.score-band-titel {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--text);
}
.score-band-sub { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.score-band-knopf { flex-shrink: 0; margin-left: auto; }

@media (max-width: 760px) {
  .score-band-karte { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px; }
  .score-band-ring { width: 72px; height: 72px; }
  .score-band-ring > span { font-size: 1.7rem; }
  .score-band-knopf { margin-left: 0; width: 100%; }
}