/* ==========================================================================
   Saldura – Landingpage
   Stylesheet, Mobile-First. Keine Frameworks.

   Aufbau:
     01  Schriften (lokal eingebunden)
     02  Design Tokens (Custom Properties)
     03  Reset & Basis
     04  Layout-Helfer
     05  Typografie
     06  Buttons
     07  Kopfbereich & Navigation
     08  Hero
     09  App-Fenster-Rahmen (Screenshots)
     10  Problem-Abschnitt
     11  Video
     12  Funktionsblöcke
     13  USP-Band
     14  Preise
     15  FAQ
     16  Kontakt & Formular
     17  Fußbereich
     18  Test-Panel Slogan-Varianten
     19  Scroll-Animationen & Barrierefreiheit
     20  Ergänzungen (Fortschritt, Scrollspy, mobile CTA-Leiste, Lightbox,
         Belegvorschau, Anbieterblock)
     21  Danke-Seite
     22  Screenshots vergrößern
   ========================================================================== */


/* ==========================================================================
   01 · SCHRIFTEN
   Lokal eingebunden — bewusst KEIN Google-Fonts-CDN (DSGVO).
   Beide Schriften sind Variable Fonts: eine Datei deckt 400–700 ab.
   ========================================================================== */

/* --- Cormorant Garamond (Überschriften) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-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;
}

/* --- DM Sans (Fließtext, UI) --- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/dm-sans-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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/dm-sans-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;
}


/* ==========================================================================
   02 · DESIGN TOKENS
   Werte aus 02_design-tokens.md (Kernpalette der Saldura-Desktop-App).
   ========================================================================== */

:root {
  /* --- Markenfarben (Kernpalette) --- */
  --color-primary:       #0A1628;  /* COLOR_NAVY   – Primärfarbe */
  --color-primary-hover: #162438;  /* Hover auf Navy-Flächen     */
  --color-accent:        #C49A3C;  /* COLOR_GOLD   – Akzent      */
  --color-accent-hover:  #D8AE4E;  /* Hover auf Gold             */
  --color-bg:            #F8F4EE;  /* COLOR_CREAM  – Hintergrund */
  --color-surface:       #FFFFFF;  /* Karten-/Formularflächen    */
  --color-surface-alt:   #F5F0EB;  /* COLOR_ROW_ALT              */
  --color-text:          #1A1A1A;  /* COLOR_TEXT                 */
  --color-text-light:    #F8F4EE;  /* Text auf Navy              */
  --color-muted:         #6B7280;  /* COLOR_MUTED                */
  --color-muted-light:   #9AA4B2;  /* Gedämpfter Text auf Navy   */
  --color-border:        #E5DDD0;  /* COLOR_BORDER               */
  --color-border-dark:   #24334A;  /* Rahmen auf Navy-Flächen    */

  /* --- Semantikfarben --- */
  --color-success:       #16A34A;  /* COLOR_SUCCESS */
  --color-error:         #DC2626;  /* COLOR_ERROR   */
  --color-warning:       #D97706;  /* COLOR_WARNING */
  --color-error-bg:      #FEE2E2;  /* COLOR_OVERDUE */
  --color-success-bg:    #F0FDF4;
  --color-warning-bg:    #FEF3C7;

  /* --- Typografie --- */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluide Schriftgrößen: skalieren zwischen Mobil und Desktop */
  --fs-h1:    clamp(2.35rem, 6.5vw, 4.4rem);
  --fs-h2:    clamp(1.8rem, 4.2vw, 3rem);
  --fs-h3:    clamp(1.3rem, 2.4vw, 1.75rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-tiny:  0.78rem;

  /* --- Abstände (8px-Raster) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --section-y: clamp(3.5rem, 9vw, 7rem);   /* vertikaler Abschnittsabstand */
  --shot-overlap: clamp(2rem, 7vw, 5.5rem); /* Hero-Screenshot ragt nach unten */

  /* --- Form & Tiefe ---
     Radien bewusst großzügiger als in der Desktop-App: Auf einer Verkaufs-
     seite liest sich 4 px hart und technisch, 10 px ruhig und wertig. Die
     App selbst bleibt bei ihren Qt-Werten – dort ist Dichte wichtiger. */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow-sm:  0 2px 8px rgba(10, 22, 40, 0.06);
  --shadow-md:  0 4px 20px rgba(10, 22, 40, 0.10);
  --shadow-lg:  0 18px 50px rgba(10, 22, 40, 0.22);

  /* Gold als Verlauf statt Vollton: die Akzentfläche wirkt dadurch metallisch
     statt stumpf und greift die goldene Summenzeile der Bildmarke auf. */
  --gold-sheen: linear-gradient(135deg, #D8AE4E 0%, #C49A3C 55%, #B08630 100%);

  /* Lichtkante für Karten: 1-px-Rahmen, oben hell, unten zurückgenommen.
     Wird über background-image auf den Rahmenbereich gelegt (border-box),
     die Fläche selbst liegt darüber (padding-box). */
  --edge-light: linear-gradient(180deg,
                  rgba(255, 255, 255, 0.9) 0%,
                  var(--color-border) 45%,
                  rgba(10, 22, 40, 0.08) 100%);

  --max-width:        1200px;
  --max-width-narrow: 820px;

  /* --- Bewegung ---
     `ease` ist der Browser-Default und sieht auch danach aus. Die beiden
     Kurven unten sind der Unterschied zwischen "geschaltet" und "bewegt":
     schneller Antritt, langes Ausrollen. */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);

  --transition: 180ms var(--ease-out-quart);
  --transition-slow: 620ms var(--ease-out-expo);

  /* Verzögerungsschritt für gestaffelte Einblendungen (siehe --i unten) */
  --stagger: 90ms;
}


/* ==========================================================================
   03 · RESET & BASIS
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Verhindert, dass der Sticky-Header Sprungziele überdeckt */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Waagrechtes Überlaufen abschneiden, ohne einen Scroll-Container zu
     erzeugen: `hidden` macht den Body zum Scroll-Container und bricht damit
     `position: sticky` in verschachtelten Kontexten (die Screenshot-Spalte
     der Funktionsblöcke hängt genau daran). `clip` schneidet nur ab. */
  overflow-x: hidden;
  /* Lange deutsche Komposita ("Auftragsbestätigungen") sollen notfalls
     umbrechen statt aus dem Layout zu laufen */
  overflow-wrap: break-word;
}

@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

/* Auf sehr schmalen Displays zusätzlich Silbentrennung erlauben.
   Funktioniert, weil <html lang="de"> gesetzt ist. */
@media (max-width: 30em) {
  h1, .section__title, .feature__title, .card__title,
  .price-card__name, .faq__q, .addons__title {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

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

a { color: inherit; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

/* Sichtbarer Fokus für Tastaturnutzung — nie entfernen (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprunglink: nur sichtbar, wenn er den Fokus hat */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}


/* ==========================================================================
   04 · LAYOUT-HELFER
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 3rem);
}

.wrap--narrow { max-width: var(--max-width-narrow); }

.section { padding-block: var(--section-y); }

/* Die Seite ist am Handy rund 30 Bildschirmhöhen lang. Abschnitte, die weit
   unten liegen, muss der Browser beim ersten Aufbau nicht durchrechnen –
   `content-visibility: auto` überspringt sie, bis sie in die Nähe des
   Blickfelds kommen.

   Bewusst NICHT auf #funktionen und #vergleich: Dort hängt eine mitlaufende
   Bildspalte (position: sticky) bzw. eine Grafik, deren Linienlängen per
   JavaScript gemessen werden. Beides braucht ein wirklich gerendertes
   Element – in einem übersprungenen Abschnitt käme als Länge 0 heraus.

   contain-intrinsic-size mit `auto` merkt sich die zuletzt gemessene Höhe;
   ohne die Angabe würde die Bildlaufleiste beim Scrollen springen. */
.section--at,
.section--faq,
.section--anbieter,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.section__head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }

.section__head--center {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}


/* ==========================================================================
   05 · TYPOGRAFIE
   ========================================================================== */

/* Tabellenziffern überall dort, wo Zahlen untereinander stehen oder sich
   verändern. Bei einem Fakturierungsprogramm ist die Ziffernausrichtung ein
   Qualitätssignal: Proportionalziffern lassen Beträge in einer Spalte
   flattern, und hochzählende Kennzahlen zappeln in der Breite mit. */
.price-card__amount,
.after-year__price,
.payoff__figure,
.hero__facts,
.mobile-cta__price,
.compare td,
.compare th,
.cost-chart,
.roi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.eyebrow {
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.eyebrow--light { color: var(--color-accent); }

.section__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section__lead {
  font-size: var(--fs-lead);
  color: var(--color-muted);
  margin-top: var(--space-2);
  max-width: 40em;
  text-wrap: pretty;
}

.section__head--center .section__lead { margin-inline: auto; }

/* Auf Navy-Flächen wird der gedämpfte Ton aufgehellt */
.section--usp .section__lead,
.section--contact .section__lead { color: var(--color-muted-light); }

/* Häkchenlisten (Funktionen, Preiskarten) */
.ticks {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.97rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.65rem;
  height: 0.35rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

/* Zitat-artige Schlussaussage im Problem-Abschnitt */
.pullquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.3;
  text-align: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  text-wrap: balance;
}
.pullquote strong {
  display: inline-block;
  font-weight: 700;
  color: var(--color-primary);
}


/* ==========================================================================
   06 · BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition),
              border-color var(--transition),
              color var(--transition),
              transform var(--transition),
              box-shadow var(--transition);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}
.btn--primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn--gold {
  background-color: var(--color-accent);
  background-image: var(--gold-sheen);
  color: var(--color-primary);
  border-color: var(--color-accent);
  font-weight: 700;
}
.btn--gold:hover {
  background-color: var(--color-accent-hover);
  background-image: linear-gradient(135deg, #E4BC5C 0%, #D8AE4E 55%, #C49A3C 100%);
  border-color: var(--color-accent-hover);
}

/* Sekundärer CTA auf dunklem Grund (Hero) */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-light);
  border-color: rgba(248, 244, 238, 0.38);
}
.btn--ghost:hover {
  background-color: rgba(248, 244, 238, 0.08);
  border-color: var(--color-accent);
  color: #fff;
}

/* Sekundärer CTA auf hellem Grund (Preiskarte) */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover { background-color: var(--color-primary); color: var(--color-text-light); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn--lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ==========================================================================
   07 · KOPFBEREICH & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-primary);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition),
              background-color var(--transition);
}

/* Glasfläche statt Volltonbalken. Der Kopfbereich ist das Element, das der
   Besucher über 30 Bildschirmhöhen hinweg am längsten sieht – dass die Seite
   darunter durchscheint, ist der billigste Tiefeneindruck, den es gibt.
   Nur mit Backdrop-Unterstützung, sonst bliebe der Balken durchsichtig und
   die Navigation stünde auf dem Text. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background-color: rgba(10, 22, 40, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  /* Über dem Hero (ebenfalls Navy) soll der Kopf nicht als hellerer Streifen
     aufliegen – erst beim Scrollen wird die Glasfläche sichtbar. */
  .site-header:not(.is-scrolled) { background-color: var(--color-primary); }
}

/* Klasse wird von script.js beim Scrollen gesetzt */
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(10, 22, 40, 0.35);
  border-bottom-color: var(--color-border-dark);
}

/* Das mobile Ausklappmenü liegt auf der Glasfläche auf und braucht deshalb
   einen eigenen, deckenden Grund – sonst liest man den Seiteninhalt durch
   die Menüpunkte hindurch. */
.site-nav.is-open {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  text-decoration: none;
  margin-right: auto;
  line-height: 1;
}

/* Die Bildmarke erbt ihre Farbe über currentColor vom Schriftzug. Die
   Belegzeilen im Inneren sind über opacity abgestuft – dadurch funktioniert
   dieselbe Marke auf Navy (Gold) wie auf Creme (Navy), ohne zweite Datei. */
.wordmark__mark {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  transition: transform 420ms var(--ease-out-expo);
}
/* Die goldene Summenzeile zieht beim Überfahren kurz durch – dieselbe
   Geste, die das Produkt beschreibt: unter dem Strich bleibt etwas übrig. */
.wordmark:hover .wordmark__mark { transform: translateY(-2px) rotate(-3deg); }

.wordmark__text { display: inline-block; }

/* Navigation: mobil als Ausklappmenü unter dem Header */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-primary);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  display: none;
}
.site-nav.is-open { display: block; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) clamp(1.15rem, 5vw, 3rem) var(--space-2);
}
.site-nav__list a {
  display: block;
  padding: 0.75rem 0;
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 1px solid rgba(229, 221, 208, 0.1);
  transition: color var(--transition);
}
.site-nav__list li:last-child a { border-bottom: none; }
.site-nav__list a:hover { color: var(--color-accent); }

/* CTA im Header erst ab Tablet einblenden (mobil ist der Hero-CTA nah genug) */
.site-header__cta { display: none; }

/* Burger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  margin-inline: auto;
  background-color: var(--color-text-light);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 62em) {
  .nav-toggle { display: none; }
  .site-header__cta { display: inline-flex; }

  .site-nav {
    position: static;
    display: block;
    background: none;
    border: none;
    margin-right: var(--space-2);
  }
  .site-nav__list {
    flex-direction: row;
    gap: clamp(1rem, 2.2vw, 1.85rem);
    padding: 0;
  }
  .site-nav__list a {
    padding: 0.25rem 0;
    border-bottom: none;
    position: relative;
  }
  /* Feine goldene Unterstreichung beim Hover */
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--transition);
  }
  .site-nav__list a:hover::after { transform: scaleX(1); }
}


/* ==========================================================================
   08 · HERO
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  padding-top: clamp(3rem, 8vw, 5.5rem);
  padding-bottom: var(--shot-overlap);
  /* Schneidet den goldenen Lichtschein ab, der über die Kanten hinausreicht.
     `hidden` wäre hier falsch: Es macht den Hero zu einem eigenen
     Scroll-Container, und die Parallaxe des Screenshots (animation-timeline:
     view()) würde ihren Scrollweg dann gegen diese Box messen statt gegen
     die Seite – sie liefe nie an. `clip` schneidet ab, ohne zu scrollen. */
  overflow: hidden;
}

@supports (overflow: clip) {
  .hero { overflow: clip; }
}

/* Dezenter goldener Lichtschein hinter der Headline */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(90rem, 150%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(196, 154, 60, 0.16), transparent 62%);
  pointer-events: none;
}

.hero__inner { position: relative; text-align: center; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(196, 154, 60, 0.45);
  border-radius: 999px;
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.hero__badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-success);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.015em;
  max-width: 16em;
  margin-inline: auto;
  text-wrap: balance;
}
/* <em> dient hier als Farbakzent, nicht als Kursivierung
   (die Kursiv-Schnitte sind bewusst nicht geladen) */
.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}

.hero__lead {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: rgba(248, 244, 238, 0.82);
  max-width: 38em;
  margin: var(--space-3) auto 0;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* Fakten als gerahmte Badges. Der Rahmen ist bewusst sehr leise (8 % Weiß):
   Fünf kräftig umrandete Felder nebeneinander sähen aus wie eine Werkzeug-
   leiste, nicht wie Zusicherungen. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: rgba(248, 244, 238, 0.88);
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background-color: rgba(248, 244, 238, 0.05);
  border: 1px solid rgba(248, 244, 238, 0.14);
  border-radius: 999px;
  line-height: 1.3;
  transition: background-color var(--transition), border-color var(--transition),
              transform var(--transition);
}
.hero__facts li:hover {
  background-color: rgba(196, 154, 60, 0.10);
  border-color: rgba(196, 154, 60, 0.45);
  transform: translateY(-2px);
}
.hero__facts svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--color-accent);
}

/* Anbieter-Signale: eine Stufe leiser als die Produktfakten, ohne Rahmen.
   Sie sollen gefunden werden, wenn jemand danach sucht – nicht um
   Aufmerksamkeit mit den Kaufargumenten konkurrieren. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem clamp(1rem, 3vw, 1.85rem);
  margin-top: var(--space-3);
  font-size: var(--fs-tiny);
  color: var(--color-muted-light);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero__trust svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  color: rgba(248, 244, 238, 0.55);
}
.hero__trust a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 154, 60, 0.4);
}
.hero__trust a:hover { border-bottom-color: var(--color-accent); }

/* Screenshot ragt in den nächsten Abschnitt hinein */
.hero__shot {
  margin: clamp(2.5rem, 6vw, 4rem) 0 calc(var(--shot-overlap) * -2);
}

@media (min-width: 40em) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   09 · APP-FENSTER-RAHMEN
   Rahmt die Screenshots wie ein Programmfenster.
   ========================================================================== */

.app-window {
  /* position hier und nicht erst auf .app-window--zoomable (Abschnitt 22):
     Die Lupe wird absolut in dieser Ecke platziert und braucht dafür einen
     positionierten Vorfahren. Stünde die Angabe unten bei --zoomable, käme
     sie im Stylesheet NACH `.feature__media { position: sticky }` und würde
     es bei gleicher Spezifität überschreiben – die Screenshots blieben dann
     beim Scrollen nicht stehen. Genau das war der Fall, und es fiel nicht
     auf, weil die Klasse erst zur Laufzeit von script.js gesetzt wird. */
  position: relative;
  margin: 0;
  background-color: var(--color-primary);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.app-window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.5rem 0.5rem 0.85rem;
  background-color: #06101d;
  border-bottom: 1px solid var(--color-border-dark);
}

.app-window__title {
  margin-right: auto;
  font-size: var(--fs-tiny);
  color: var(--color-muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fensterknöpfe in Windows-Manier: Titel links, Bedienelemente rechts.
   Vorher standen hier die drei runden Punkte von macOS – auf einem Produkt,
   das ausdrücklich nur unter Windows läuft, ein Widerspruch, den genau die
   Leute bemerken, die das Programm später bedienen sollen.
   Rein aus Rahmen gezeichnet, damit keine Icon-Datei nötig ist. */
.app-window__controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: none;
  padding-right: 0.35rem;
}

.app-window__ctl {
  display: block;
  width: 10px;
  height: 10px;
  flex: none;
  opacity: 0.55;
}
/* Minimieren: nur der untere Strich */
.app-window__ctl--min {
  height: 1px;
  background-color: var(--color-muted-light);
  align-self: flex-end;
  margin-bottom: 1px;
}
/* Maximieren: leeres Rechteck */
.app-window__ctl--max {
  border: 1px solid var(--color-muted-light);
  border-radius: 1px;
}
/* Schließen: zwei gekreuzte Linien */
.app-window__ctl--close {
  position: relative;
  opacity: 0.65;
}
.app-window__ctl--close::before,
.app-window__ctl--close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  width: 12px;
  height: 1px;
  background-color: var(--color-muted-light);
}
.app-window__ctl--close::before { transform: rotate(45deg); }
.app-window__ctl--close::after  { transform: rotate(-45deg); }

.app-window img {
  width: 100%;
  height: auto;
  display: block;
}

/* Der Such-Dialog ist kein Vollbild-Screenshot: heller Rahmen, damit er
   im Layout nicht zu klein und verloren wirkt */
.app-window--dialog img {
  background-color: var(--color-bg);
  padding: clamp(0.75rem, 2vw, 1.75rem);
}


/* ==========================================================================
   10 · PROBLEM-ABSCHNITT
   ========================================================================== */

.section--problem {
  background-color: var(--color-bg);
  /* zusätzlicher Platz, weil der Hero-Screenshot hereinragt */
  padding-top: calc(var(--section-y) + var(--shot-overlap));
}

.cards {
  display: grid;
  gap: var(--space-2);
}

/* Lichtkante statt flacher Linie: Der Rahmen läuft oben hell an und unten
   dunkel aus, als läge Licht von oben auf der Karte. Technisch zwei
   Hintergründe – die Fläche auf der padding-box, der Verlauf auf der
   border-box. Der Rahmen selbst ist deshalb transparent, und der
   Hover-Zustand tauscht den Verlauf statt der border-color. */
.card {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    var(--edge-light) border-box;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    var(--gold-sheen) border-box;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-accent);
  background-color: var(--color-surface-alt);
}
.card__icon svg { width: 1.35rem; height: 1.35rem; }

.card__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.card p {
  font-size: 0.94rem;
  color: var(--color-muted);
  line-height: 1.65;
}

@media (min-width: 46em) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72em) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   11 · VIDEO
   ========================================================================== */

.section--video { background-color: var(--color-surface-alt); }

/* Platzhalter, solange das Video nicht produziert ist.
   Seitenverhältnis 16:9, mit Mindesthöhe für schmale Displays. */
.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 21rem;
  /* Ohne die Breitenbegrenzung leitet der Browser auf schmalen Displays die
     Breite aus min-height × 16/9 ab (≈ 597 px) – die Seite bekam dadurch
     einen horizontalen Scrollbalken. */
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background-color: var(--color-primary);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Feines Raster im Hintergrund – deutet eine Videofläche an */
.video-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248, 244, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 244, 238, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.video-placeholder__inner {
  position: relative;
  text-align: center;
  max-width: 32rem;
}

.video-placeholder__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 9vw, 5.5rem);
  height: clamp(4rem, 9vw, 5.5rem);
  margin: 0 auto var(--space-3);
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  /* Sanfter Puls, damit die Fläche nicht tot wirkt */
  animation: pulse 2.8s ease-in-out infinite;
}
.video-placeholder__play svg {
  width: 45%;
  height: 45%;
  margin-left: 8%; /* optischer Ausgleich des Dreiecks */
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 154, 60, 0.35); }
  50%      { box-shadow: 0 0 0 14px rgba(196, 154, 60, 0); }
}

.video-placeholder__label {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--color-text-light);
}

.video-placeholder__note {
  font-size: 0.95rem;
  color: var(--color-muted-light);
  margin: 0.35rem 0 var(--space-3);
}

/* Styling für das später eingebundene echte Video */
.video-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: var(--color-primary);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.video-sub {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-top: var(--space-3);
}


/* ==========================================================================
   12 · FUNKTIONSBLÖCKE
   ========================================================================== */

.feature {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
  border-top: 1px solid var(--color-border);
}
.feature:first-of-type { border-top: none; padding-top: 0; }

.feature__num {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.45;
  margin-bottom: var(--space-1);
}

.feature__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  text-wrap: balance;
}

.feature__text {
  color: var(--color-muted);
  max-width: 34em;
  text-wrap: pretty;
}

/* Hervorgehobenes Einzelargument innerhalb eines Funktionsblocks */
.feature__callout {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.feature__callout strong {
  display: block;
  font-size: 1.02rem;
  color: var(--color-text);
  margin-bottom: 0.15rem;
}

.feature__media { align-self: center; }

/* Hochformat-Screenshot (Erfassungsmaske Eingangsrechnung).
   Ohne Breitenbegrenzung würde der 840×1020-Dialog in der zweispaltigen
   Anordnung rund 740 px hoch und den Funktionsblock sprengen.

   "width: 100%" ist hier zwingend: Ein Grid-Item mit automatischen
   Seitenrändern streckt sich nicht mehr, sondern fällt auf Shrink-to-fit
   zurück. Da das Bild wegen max-width:100% eine Min-Content-Breite von 0 hat,
   würde dann die Titelzeile (white-space: nowrap) die Breite bestimmen –
   der Screenshot wäre nur rund 300 px breit. */
.app-window--portrait {
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
}

@media (min-width: 56em) {
  .feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* start statt center: Nur so hat die Bildspalte oben einen festen
       Anfang, an dem sie sich festhalten kann. */
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4.5rem);

    /* Damit die Bildspalte überhaupt etwas zum Stehenbleiben hat, braucht
       jeder Block Weg. Die langen Blöcke (02, 03) bringen ihn über den Text
       mit, die kurzen (01, 04, 05) bekommen ihn hier. min() verhindert, dass
       auf niedrigen Fenstern künstliche Leere entsteht.

       Der Wert ist ein Kompromiss: hoch genug, dass auch der kürzeste Block
       (04, „Ein Suchfeld für alles") noch Haftweg hat, niedrig genug, dass
       dort neben dem kurzen Text keine halbe Bildschirmhöhe Leere steht.
       Wird ein Screenshot ausgetauscht, hier gegenprüfen: Ist ein Bild höher
       als dieser Wert, klebt in seinem Block nichts mehr. */
    min-height: min(80vh, 42rem);

    /* Ohne diese Zeile bliebe die Zeile so hoch wie ihr höherer Inhalt, und
       das min-height oben wäre für die Bildspalte wirkungslos: Der
       Haftbereich eines sticky-Elements ist sein Grid-Bereich, nicht der
       Container. Bei `1fr` füllt die einzige Zeile den ganzen Block – erst
       damit hat die Bildspalte Weg, an dem sie sich entlanghangeln kann. */
    grid-template-rows: 1fr;
  }

  /* Die Bildspalte bleibt stehen, während der Text daneben durchläuft, und
     wird vom nächsten Funktionsblock abgelöst. Das ist der Grund, warum die
     Screenshots nicht mehr als Bildergalerie wirken, sondern als Bildschirm,
     auf dem sich etwas abspielt: Man sieht dieselbe Fläche, und der Inhalt
     wechselt – statt fünfmal an einem Bild vorbeizuscrollen.

     Hängt daran, dass der Body KEIN Scroll-Container ist – siehe
     `overflow-x: clip` in Abschnitt 03. Mit `hidden` klebt hier nichts. */
  .feature__media {
    position: sticky;
    /* Kopfbereich (4,25 rem) plus Luft */
    top: 6rem;
    align-self: start;
  }

  /* Die kurzen Blöcke (04, 05) füllen die Mindesthöhe nicht aus. Ohne diese
     Zeile sammelte sich der Rest als Leere unter dem Text und sähe aus wie
     ein Fehler; mittig gesetzt verteilt er sich oben und unten und liest
     sich als Absicht. */
  .feature__body { align-self: center; }

  /* Jede zweite Reihe spiegeln: Text rechts, Bild links */
  .feature--reverse .feature__body  { order: 2; }
  .feature--reverse .feature__media { order: 1; }
}

/* Auf niedrigen Fenstern (Laptop im Zug, geteilter Bildschirm) hätte ein
   angehefteter Screenshot keinen Platz mehr – dann lieber normal mitlaufen. */
@media (min-width: 56em) and (max-height: 34rem) {
  .feature { min-height: 0; }
  .feature__media { position: static; }
}


/* ==========================================================================
   12b · BELEGE (Muster-PDF + Erfassungsmaske)
   Screenshot links, Download-Panel rechts – ab 62em zweispaltig.
   ========================================================================== */

.section--belege { background-color: var(--color-surface-alt); }

.belege {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}

.belege__caption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.6;
}

.belege__download {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.belege__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.belege__text {
  font-size: 0.94rem;
  color: var(--color-muted);
  line-height: 1.65;
}

.belege__files {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.belege__files span {
  display: block;
  margin-top: 0.55rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.55;
}

.belege__note {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.6;
}

@media (min-width: 62em) {
  .belege { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}


/* ==========================================================================
   12c · ÖSTERREICH (Steuer, Steuerberater, BAO)
   Nutzt die Karten-Optik des Problem-Abschnitts, aber mit Listen statt
   Fließtext – hier will der Leser prüfen, nicht überzeugt werden.
   ========================================================================== */

.section--at { background-color: var(--color-bg); }

/* Kompakte Variante der Häkchenliste für die Karten */
.ticks--tight { margin-top: var(--space-2); }
.ticks--tight li { font-size: 0.9rem; line-height: 1.55; }

/* Offen benannte Einschränkung innerhalb einer Karte */
.card__caveat {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: 0.86rem !important;
  line-height: 1.55;
}

.at-note {
  max-width: 60rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}

.at-note__title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.at-note__cols {
  display: grid;
  gap: var(--space-2);
}
.at-note__cols p {
  font-size: 0.94rem;
  color: var(--color-muted);
  line-height: 1.65;
}
.at-note__cols strong { color: var(--color-text); }

.at-note__foot {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.6;
}

@media (min-width: 52em) {
  .at-note__cols { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}


/* ==========================================================================
   13 · USP-BAND (100 % lokal)
   ========================================================================== */

.section--usp {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.usp {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.usp__list {
  display: grid;
  gap: var(--space-2);
}
.usp__list li {
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-accent);
  font-size: 0.94rem;
  color: var(--color-muted-light);
  line-height: 1.6;
}
.usp__list strong {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-bottom: 0.15rem;
}

/* „Und wenn es Saldura nicht mehr gibt?" – Panel auf der Navy-Fläche.
   Bewusst nicht als weiße Karte: es ist Teil derselben Argumentation. */
.usp__exit {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--color-border-dark);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.03);
}

.usp__exit-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.usp__exit > p {
  font-size: 0.98rem;
  color: var(--color-muted-light);
  line-height: 1.7;
  max-width: 52em;
}
.usp__exit strong { color: var(--color-text-light); }

.usp__exit-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.usp__exit-list li {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border-dark);
  font-size: 0.92rem;
  color: var(--color-muted-light);
  line-height: 1.6;
}

@media (min-width: 56em) {
  .usp {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 5rem);
  }
  .usp__list { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
  .usp__exit-list { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
}


/* ==========================================================================
   13b · EHRLICHER VERGLEICH · GRENZEN · BEISPIELRECHNUNG

   Die Vergleichstabelle steht bewusst auf der hellen Fläche zwischen
   Navy-USP-Band und Preisen: Sie ist die letzte Station vor der
   Kaufentscheidung.

   Mobil klappt die Tabelle in gestapelte Karten um – jede Zelle bekommt
   ihre Spaltenüberschrift über data-label. Deshalb MUSS jede neue <td>
   und jedes <th scope="row"> ein data-label tragen, sonst steht die Zelle
   auf dem Handy ohne Bezug da.
   ========================================================================== */

.section--compare { background-color: var(--color-surface-alt); }

.compare {
  max-width: 62rem;
  margin-inline: auto;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare__caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.compare__table th,
.compare__table td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--color-border);
}

.compare__table thead th {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: none;
}

.compare__table tbody th {
  font-weight: 700;
  color: var(--color-text);
}

.compare__table tbody td { color: var(--color-muted); }

.compare__table tbody tr:nth-child(even) { background-color: var(--color-surface-alt); }
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: none; }

/* Urteil je Zeile. „them" ist bewusst genauso kräftig gesetzt wie „us" –
   eine kleingedruckte Niederlage wäre keine. */
.verdict {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.verdict--us    { background-color: var(--color-success-bg); color: #15803D; }
.verdict--them  { background-color: var(--color-warning-bg); color: #92400E; }
.verdict--draw  { background-color: var(--color-surface-alt); color: var(--color-muted); }

.compare__note {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.65;
}

/* ---- Mobil: Tabelle als gestapelte Karten ---- */
@media (max-width: 51.999em) {
  .compare__table,
  .compare__table tbody,
  .compare__table tr,
  .compare__table th,
  .compare__table td { display: block; }

  /* Kopfzeile nur optisch entfernen – für Screenreader bleibt sie erhalten */
  .compare__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .compare__table tr {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .compare__table tr:last-child { border-bottom: none; }

  .compare__table tbody th,
  .compare__table td {
    border-bottom: none;
    padding: 0.15rem 1rem;
  }

  .compare__table tbody th {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
  }

  /* Spaltenüberschrift wandert vor die Zelle */
  .compare__table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: 0.5rem;
  }
  .compare__table td:last-child::before { margin-bottom: 0.25rem; }
}

/* ---- Beispielrechnung ---- */
.payoff {
  max-width: 62rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-lg);
}

.payoff__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.payoff__grid {
  display: grid;
  gap: var(--space-3);
}

.payoff__item p:last-child {
  font-size: 0.92rem;
  color: var(--color-muted-light);
  line-height: 1.65;
}

.payoff__figure {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

.payoff__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.4rem 0 0.5rem;
}

.payoff__assumptions {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-small);
  color: var(--color-muted-light);
  line-height: 1.65;
}
.payoff__assumptions strong { color: var(--color-text-light); }
.payoff__assumptions a { color: var(--color-accent); }

@media (min-width: 52em) {
  .payoff__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}


/* ==========================================================================
   14 · PREISE
   ========================================================================== */

.section--pricing { background-color: var(--color-bg); }

.price-grid {
  display: grid;
  gap: var(--space-3);
  max-width: 58rem;
  margin-inline: auto;
}

.price-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.5rem);
  transition: transform var(--transition), box-shadow var(--transition);
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

/* Hervorgehobene Karte (Mehrplatz) */
.price-card--featured {
  position: relative;
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
/* Die empfohlene Karte hebt sich beim Überfahren deutlicher – sie soll sich
   anfassen lassen wie die Entscheidung, zu der sie rät. */
.price-card--featured:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

.price-card__flag {
  position: absolute;
  top: 0;
  right: clamp(1.6rem, 4vw, 2.5rem);
  transform: translateY(-50%);
  padding: 0.35rem 0.85rem;
  background-color: var(--color-accent);
  background-image: var(--gold-sheen);
  color: var(--color-primary);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(196, 154, 60, 0.45);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Ein Satz, der genau an der Entscheidungsstelle steht: unter dem Betrag,
   über der Häkchenliste. Nicht als Häkchen ausgeführt, damit er nicht als
   sechster Ausstattungspunkt gelesen wird, sondern als Antwort. */
.price-card__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--space-2);
  padding: 0.7rem 0.9rem;
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.price-card__hint svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-top: 0.15em;
  color: var(--color-muted);
}
.price-card__hint strong { color: var(--color-text); }

.price-card__hint--gold {
  background-color: rgba(196, 154, 60, 0.10);
  border-left-color: var(--color-accent);
}
.price-card__hint--gold svg { color: var(--color-accent); }
.price-card__hint--gold strong { color: var(--color-primary); }

.price-card__name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.price-card__for {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-top: 0.15rem;
  min-height: 2.6em; /* hält beide Karten auf gleicher Höhe */
}

.price-card__amount {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  margin-top: var(--space-2);
}
.price-card__amount .cur {
  font-size: 0.45em;
  font-weight: 400;
  vertical-align: 0.55em;
  margin-right: 0.15em;
  color: var(--color-muted);
}

.price-card__note {
  font-size: var(--fs-small);
  color: var(--color-accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

.price-card .ticks {
  margin-block: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Button immer unten bündig, unabhängig von der Listenlänge */
.price-card .btn { margin-top: auto; }

/* Umsatzsteuer-Klarstellung direkt unter dem Betrag: „netto oder brutto?"
   ist bei der Zielgruppe die erste Rückfrage. */
.price-card__tax {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.55;
}

/* Kosten ab dem zweiten Jahr – vier Zahlen statt einer Beschwichtigung */
.after-year {
  max-width: 62rem;
  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.after-year__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-bottom: var(--space-3);
}

.after-year__grid {
  display: grid;
  gap: var(--space-3);
}

.after-year__item p:last-child {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.after-year__price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.after-year__price span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-muted);
}

.after-year__label {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0.35rem 0 0.5rem;
}

.after-year__rule {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--color-muted);
}
.after-year__rule strong { color: var(--color-text); }

@media (min-width: 46em) {
  .after-year__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .after-year__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Zusatzleistungen: bewusst zurückhaltend, kein dritter Tarif */
.addons {
  max-width: 46rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: var(--space-3);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}
.addons__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.addons p {
  font-size: 0.94rem;
  color: var(--color-muted);
  line-height: 1.65;
}
.addons a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

@media (min-width: 48em) {
  .price-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}


/* ==========================================================================
   15 · FAQ
   ========================================================================== */

.section--faq { background-color: var(--color-surface-alt); }

.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}
/* Standard-Dreieck entfernen (Safari/Chrome) */
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent); }

/* Eigenes Plus-/Minus-Zeichen */
.faq__q::after {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.35em;
  background-image:
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 100% 1.5px, 1.5px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after {
  transform: rotate(90deg);
  background-size: 100% 1.5px, 0 100%;
}

.faq__a {
  padding-bottom: var(--space-3);
  max-width: 44em;
}
.faq__a p {
  color: var(--color-muted);
  font-size: 0.97rem;
}
.faq__a p + p { margin-top: var(--space-2); }
.faq__a strong { color: var(--color-text); font-weight: 700; }

/* Erste Zeile der OneDrive-Antwort deutlich hervorheben */
.faq__answer-lead {
  font-weight: 700;
  color: var(--color-error) !important;
}

/* Die OneDrive-Klarstellung optisch markieren – sie ist die
   wichtigste Missverständnis-Vorbeugung auf der Seite */
.faq__item--important[open] {
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-warning);
  padding-left: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}


/* ==========================================================================
   16 · KONTAKT & FORMULAR
   ========================================================================== */

.section--contact {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.contact {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
}

.contact__direct {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.contact__direct li {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-dark);
}
.contact__label {
  display: block;
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  margin-bottom: 0.15rem;
}
.contact__direct a {
  font-size: 1.1rem;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.contact__direct a:hover { border-bottom-color: var(--color-accent); }

.contact__hint {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-muted-light);
}

/* --- Formular --- */
.form {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}

.field { margin-bottom: var(--space-2); }

.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.97rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.1);
}

/* Fehlerzustand, wird von script.js gesetzt */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.field__error {
  display: none;
  margin-top: 0.3rem;
  font-size: var(--fs-tiny);
  color: var(--color-error);
}
.field__error.is-visible { display: block; }

.req { color: var(--color-error); }

.field-row { display: grid; gap: var(--space-2); }

/* Datenschutz-Checkbox */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-top: var(--space-3);
}
.field--check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  accent-color: var(--color-primary);
}
.field--check label {
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-muted);
  margin-bottom: 0;
}
.field--check a { color: var(--color-primary); text-decoration-color: var(--color-accent); }
.field--check .field__error { grid-column: 1 / -1; }

/* Honeypot: für Menschen unsichtbar, für Bots ein sichtbares Feld.
   Bewusst NICHT display:none — manche Bots ignorieren solche Felder. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form .btn { margin-top: var(--space-3); }

/* Statusmeldung nach dem Absenden */
.form__status {
  display: none;
  margin-top: var(--space-2);
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.94rem;
  line-height: 1.55;
}
.form__status.is-success {
  display: block;
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: #166534;
}
.form__status.is-error {
  display: block;
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error);
  color: #B91C1C;
}

.form__legal {
  margin-top: var(--space-2);
  font-size: var(--fs-tiny);
  color: var(--color-muted);
  line-height: 1.55;
}

@media (min-width: 34em) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 62em) {
  .contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}


/* ==========================================================================
   17 · FUSSBEREICH
   ========================================================================== */

.site-footer {
  background-color: #06101d;
  color: var(--color-muted-light);
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--space-3);
  font-size: var(--fs-small);
}

.site-footer__top {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-dark);
}

.wordmark--footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-right: 0;          /* das auto aus .wordmark gilt hier nicht */
  margin-bottom: 0.6rem;
}

.site-footer__claim {
  max-width: 24em;
  line-height: 1.6;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.site-footer__head {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-1);
}

.site-footer__nav ul { display: grid; gap: 0.4rem; }
.site-footer__nav a {
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer__nav a:hover { color: var(--color-accent); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
  padding-top: var(--space-3);
  font-size: var(--fs-tiny);
}
.site-footer__mwp a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__mwp a:hover { border-bottom-color: var(--color-accent); }

@media (min-width: 56em) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-5); }
}


/* ==========================================================================
   18 · SCROLL-ANIMATIONEN & BARRIEREFREIHEIT
   ========================================================================== */

/* Elemente mit .reveal blenden beim Scrollen ein.
   Es gibt zwei Wege dorthin, in dieser Reihenfolge:

     1. Rückfallebene – script.js setzt .is-visible per IntersectionObserver.
        Greift in Firefox und in allem, was älter ist.
     2. Vorzugsweg – scroll-getriebene Animation (`animation-timeline: view()`),
        ohne JavaScript. Der Unterschied ist spürbar: Die Einblendung hängt
        an der Scrollposition statt an einem Timer, sie folgt also der Hand
        des Besuchers statt einer Stoppuhr.

   Ohne JavaScript UND ohne Timeline-Unterstützung bleibt alles sichtbar
   (siehe html:not(.js) weiter unten) – niemand steht je vor einer leeren Seite. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  /* Gestaffelt: jedes Element einer Reihe startet einen Tick später als sein
     Vorgänger. --i wird von .stagger gesetzt (siehe unten). */
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Fallback: Ist JS deaktiviert, wird .js nie gesetzt → alles sichtbar */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* Setzt den Staffel-Index für die Kinder einer Reihe. Bewusst per nth-child
   statt per Inline-Style im HTML: Die Reihenfolge steht ohnehin im Markup,
   sie muss nicht zusätzlich hineingeschrieben werden. */
.stagger > *:nth-child(1) { --i: 0; }
.stagger > *:nth-child(2) { --i: 1; }
.stagger > *:nth-child(3) { --i: 2; }
.stagger > *:nth-child(4) { --i: 3; }
.stagger > *:nth-child(5) { --i: 4; }
.stagger > *:nth-child(6) { --i: 5; }

/* --- Scroll-getriebene Fassung ------------------------------------------- */

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Nur Deckkraft, ohne Verschiebung. Gebraucht für Elemente, die ein
   angeheftetes Kind enthalten – Begründung direkt darunter. */
@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Die Funktionsblöcke blenden ohne Verschiebung ein, und das ist keine
   Geschmacksfrage:

   Ein Element mit transform wird zum Containing Block für seine Nachfahren.
   Das gilt auch für eine Identitätsmatrix – und genau die bleibt stehen,
   wenn eine Animation mit `fill: both` auf `transform: none` endet
   (berechnet: matrix(1, 0, 0, 1, 0, 0), also "hat ein transform").

   Folge: Die angeheftete Bildspalte im Block hätte sich nicht mehr am
   Fenster orientiert, sondern am Block selbst – sie wäre stehen geblieben,
   aber an der falschen Stelle, und nie oben angekommen. Deshalb hier kein
   transform, weder in der Übergangs- noch in der Scroll-Fassung. */
.feature.reveal { transform: none; }

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view();
    /* Der Staffel-Versatz sitzt hier im Scrollbereich, nicht in einer
       Verzögerung: Bei scroll-getriebenen Animationen gibt es keine Zeit,
       an der man drehen könnte – es gibt nur Weg. */
    animation-range: entry calc(8% + var(--i, 0) * 4%)
                     cover calc(30% + var(--i, 0) * 4%);
    /* Die Übergangsfassung darf nicht zusätzlich mitlaufen */
    transition: none;
  }

  /* Siehe Begründung bei .feature.reveal weiter oben: kein transform,
     sonst klebt die Bildspalte am Block statt am Fenster. */
  .feature.reveal { animation-name: reveal-fade; }

  /* Der Hero-Screenshot bekommt weiter unten eine eigene Choreografie und
     darf deshalb nicht zusätzlich als .reveal animiert werden – zwei
     Animationen auf derselben transform-Eigenschaft schließen sich aus.
     Ausgeschlossen wird er dort, wo die eigene Animation gesetzt wird
     (Selektor .hero__shot.reveal), nicht hier: Eine eigene Ausschlussregel
     mit zwei Klassen wäre spezifischer als die Zuweisung und würde die
     Parallaxe gleich wieder abräumen. */
}

/* --- Hero-Screenshot: Auftritt und Abgang -------------------------------- */

@keyframes shot-in {
  from { opacity: 0; transform: translateY(38px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Beim Wegscrollen legt sich der Screenshot leicht zurück und tritt in den
   Hintergrund, statt einfach oben aus dem Bild zu rutschen. Er ragt bereits
   in den nächsten Abschnitt hinein (--shot-overlap) – die Bewegung macht aus
   dieser Überlappung einen Übergang. */
@keyframes shot-parallax {
  from { transform: none;                        opacity: 1; }
  to   { transform: translateY(-5%) scale(0.94); opacity: 0.5; }
}

@supports (animation-timeline: view()) {
  /* Zwei Klassen im Selektor, damit diese Zuweisung die allgemeine
     .reveal-Regel weiter oben sicher schlägt – der Screenshot trägt beide
     Klassen. Ein einfaches `.hero__shot` würde von `.reveal` überstimmt. */
  .hero__shot.reveal {
    animation: shot-in 900ms var(--ease-out-expo) both,
               shot-parallax linear both;
    /* Der Auftritt läuft auf der Uhr (auto), der Abgang am Scrollweg (view) */
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }
}

/* Nutzer, die Bewegung reduzieren möchten (Betriebssystem-Einstellung) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Scroll-getriebene Animationen kennen keine Dauer, an der sich drehen
     ließe – sie müssen ausdrücklich abgeschaltet werden. Sonst hielte der
     Hero-Screenshot den Endzustand der Parallaxe (verkleinert, halb
     durchsichtig) dauerhaft fest. */
  .reveal, .hero__shot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:hover, .card:hover, .price-card:hover { transform: none; }
}


/* ==========================================================================
   19 · RECHTSSEITEN (Impressum, Datenschutz, AGB, 404)
   Eigene Unterseiten mit demselben Kopf-/Fußbereich wie die Landingpage.
   Bewusst schmale Textspalte: Rechtstexte werden gelesen, nicht überflogen.
   ========================================================================== */

.legal-hero {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem);
}

.legal-hero__inner { max-width: var(--max-width-narrow); }

/* Überschriften bekommen ihre Schrift im Projekt über Klassen, nicht global.
   Auf den Rechtsseiten stehen h1/h2 ohne Klasse im Fließtext – die Zuweisung
   erfolgt daher hier über den Elementnamen. */
.legal-hero h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 5vw, 3.1rem);
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}

.legal-hero__lead {
  color: var(--color-muted-light);
  font-size: var(--fs-lead);
  max-width: 55ch;
}

/* Brotkrumen-Zeile: ein Weg zurück, ohne die Navigation aufzumachen */
.legal-hero__back {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: var(--fs-small);
  text-decoration: none;
}
.legal-hero__back:hover { text-decoration: underline; }

.legal {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(3.5rem, 9vw, 6rem);
}

.legal__inner { max-width: var(--max-width-narrow); }

.legal h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.legal p,
.legal li {
  color: var(--color-text);
  line-height: 1.75;
}

.legal p { margin-bottom: var(--space-2); }

.legal ul,
.legal ol {
  margin: 0 0 var(--space-2) 1.35rem;
  padding: 0;
  list-style: disc;
}
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 0.4rem; }

.legal a { color: var(--color-primary); }

/* Adress-/Datenblock: Bezeichnung links, Wert rechts, mobil untereinander */
.legal-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.5rem;
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.legal-dl dt {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-muted);
}

.legal-dl dd {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}
.legal-dl dd:last-child { margin-bottom: 0; }

@media (min-width: 40em) {
  .legal-dl {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }
  .legal-dl dt { padding-top: 0.15rem; }
  .legal-dl dd { margin-bottom: 0.55rem; }
}

/* Hervorgehobener Hinweiskasten (z. B. Kleinunternehmerregelung) */
.legal-note {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-note p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   PLATZHALTER-MARKIERUNG
   Noch fehlende Pflichtangaben werden sichtbar rot markiert, damit sie beim
   Korrekturlesen nicht übersehen werden. Vor dem Livegang müssen alle
   .todo-Elemente aus den HTML-Dateien verschwunden sein — danach kann diese
   Regel entfernt werden.
   --------------------------------------------------------------------------- */
.todo {
  display: inline-block;
  padding: 0.1em 0.45em;
  background-color: var(--color-error-bg);
  color: #7F1D1D;
  border: 1px dashed var(--color-error);
  border-radius: var(--radius);
  font-size: 0.92em;
  font-weight: 600;
}

/* Stand-Zeile am Ende eines Rechtstextes */
.legal__stand {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  text-align: center;
  padding: clamp(3.5rem, 12vw, 7rem) 0;
}
.notfound h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.notfound__code {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
}


/* ==========================================================================
   20 · ERGÄNZUNGEN
   Bausteine aus dem Review nach dem ersten Entwurf: Orientierung auf der
   langen Seite (Fortschritt, Scrollspy, Nach-oben), mobile Handlungsleiste,
   Belegvorschau samt Lightbox und der Anbieterblock.
   ========================================================================== */

/* --- 20.1 Lesefortschritt im Kopfbereich ---------------------------------- */

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--color-accent);
}


/* --- 20.2 Aktiver Navigationspunkt (Scrollspy) ---------------------------- */

.site-nav__list a.is-active { color: var(--color-accent); }

@media (min-width: 62em) {
  /* Nutzt die vorhandene Hover-Unterstreichung weiter */
  .site-nav__list a.is-active::after { transform: scaleX(1); }
}


/* --- 20.3 Heller Rahmenbutton (zweiter CTA im Hero) ----------------------- */
/* Kräftiger als .btn--ghost: Die Präsentation ist der einzige Zwischenschritt
   vor dem Kauf und darf nicht wie eine Notlösung aussehen. */

.btn--outline-light {
  background-color: rgba(248, 244, 238, 0.07);
  color: var(--color-text-light);
  border-color: rgba(248, 244, 238, 0.55);
}
.btn--outline-light:hover {
  background-color: var(--color-text-light);
  border-color: var(--color-text-light);
  color: var(--color-primary);
}

.hero__actions-note {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-muted-light);
  text-align: center;
}


/* --- 20.4 Ablauf in drei Schritten über dem Formular ---------------------- */

.contact__steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-width: 34em;
}
.contact__steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-muted-light);
}
.contact__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(196, 154, 60, 0.55);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.field__optional {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-muted);
}


/* --- 20.5 Vorschau der Muster-Belege -------------------------------------- */
/* Ein Download ist eine Entscheidung, ein Bild nicht: Der Beleg wird zuerst
   gezeigt und erst danach zum Öffnen angeboten. */

.beleg-preview {
  display: block;
  text-decoration: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition),
              box-shadow var(--transition),
              border-color var(--transition);
}
.beleg-preview:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
/* Oberer Ausschnitt der ersten Seite: Kopf und erste Positionen reichen,
   um den Eindruck zu vermitteln. */
.beleg-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}
.beleg-preview__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 0.72rem 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
}
.beleg-preview__label::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  transform: rotate(45deg);
}


/* --- 20.6 Lightbox für die Belegvorschau ---------------------------------- */

.lightbox {
  max-width: min(92vw, 44rem);
  max-height: 92vh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background-color: rgba(10, 22, 40, 0.84); }

.lightbox__img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background-color: #fff;
  box-shadow: var(--shadow-lg);
}
/* Innen in der Bildecke statt darüber: Bei hohen Bildern bleibt oberhalb
   des Rahmens kein Platz, dort landete der Knopf sonst im Seitenkopf. */
.lightbox__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  background-color: rgba(10, 22, 40, 0.82);
  border: 1px solid rgba(248, 244, 238, 0.35);
  border-radius: var(--radius);
  color: var(--color-text-light);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.lightbox__close:hover {
  background-color: var(--color-primary);
  border-color: var(--color-accent);
}
.lightbox__close svg { width: 1.1rem; height: 1.1rem; }
.lightbox__foot { margin-top: var(--space-2); text-align: center; }


/* --- 20.7 Mobile Handlungsleiste ------------------------------------------ */
/* Am Handy ist die Seite rund 30 Bildschirmhöhen lang und der Kopf-CTA
   ausgeblendet. Ohne diese Leiste gäbe es zwischen Hero und Formular
   keinen sichtbaren Weg zum Kontakt. */

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.6rem clamp(0.9rem, 4vw, 1.25rem);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background-color: rgba(10, 22, 40, 0.97);
  border-top: 1px solid var(--color-border-dark);
  box-shadow: 0 -6px 24px rgba(10, 22, 40, 0.3);
  transform: translateY(115%);
  transition: transform 220ms ease;
}
.mobile-cta[hidden] { display: none; }
.mobile-cta.is-visible { transform: none; }

.mobile-cta__price strong {
  display: block;
  color: var(--color-text-light);
  font-size: 0.97rem;
  line-height: 1.2;
}
.mobile-cta__price span {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-muted-light);
}
.mobile-cta__actions { display: flex; gap: 0.4rem; }
.mobile-cta .btn { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
.mobile-cta .btn:hover { transform: none; box-shadow: none; }
.mobile-cta .btn--outline {
  color: var(--color-text-light);
  border-color: rgba(248, 244, 238, 0.45);
}
.mobile-cta .btn--outline:hover {
  background-color: var(--color-text-light);
  color: var(--color-primary);
}

/* Sehr schmale Geräte: Der Preiszusatz weicht, damit beide Buttons ganz
   bleiben. Der Preis selbst bleibt stehen, er ist das Argument. */
@media (max-width: 24em) {
  .mobile-cta__price span { display: none; }
  .mobile-cta .btn { padding: 0.6rem 0.65rem; font-size: 0.78rem; }
}

@media (min-width: 62em) {
  .mobile-cta { display: none; }
}


/* --- 20.8 Zurück nach oben ------------------------------------------------ */

.to-top {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.5rem);
  bottom: clamp(0.9rem, 3vw, 1.5rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top svg { width: 1.15rem; height: 1.15rem; }

/* Über der mobilen Handlungsleiste parken, nicht darunter */
@media (max-width: 61.99em) {
  .to-top { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}


/* --- 20.9 Anbieterblock --------------------------------------------------- */
/* Beantwortet "wer ist das?" mit nachschlagbaren Registerdaten statt mit
   einem Porträt, direkt vor dem Formular, wo die Frage entsteht. */

.anbieter {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.anbieter__text {
  margin-top: var(--space-2);
  color: var(--color-muted);
  line-height: 1.7;
}
.anbieter__facts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.anbieter__facts dt {
  font-size: var(--fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.anbieter__facts dd {
  margin: 0.2rem 0 0;
  font-size: 0.96rem;
  line-height: 1.5;
}
.anbieter__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
}
.anbieter__links span { color: var(--color-muted); }

@media (min-width: 40em) {
  .anbieter__facts { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
}


/* --- 20.10 Gewonnene Zeilen im Vergleich ---------------------------------- */
/* Nur gewonnene Zeilen werden getönt. Verlorene bleiben neutral: rot
   markiert wäre aus einem ehrlichen Vergleich eine Selbstanklage. */

.compare__table tbody tr.is-win,
.compare__table tbody tr.is-win:nth-child(even) {
  background-color: var(--color-success-bg);
  box-shadow: inset 3px 0 0 rgba(22, 163, 74, 0.45);
}
/* Auf der getönten Zeile hätte das Urteil sonst dieselbe Fläche wie der
   Hintergrund und wäre keine Plakette mehr. */
.compare__table tbody tr.is-win .verdict--us { background-color: #DCFCE7; }


/* --- 20.11 Kennzahlen mit Zählanimation ----------------------------------- */
/* Feste Ziffernbreite, damit beim Hochzählen nichts springt. */

.payoff__figure { font-variant-numeric: tabular-nums; }


/* --- 20.12 Fußzeilen-Links: Mindestziel 24 px (WCAG 2.2) ------------------ */

.site-footer__nav a {
  display: inline-block;
  padding-block: 0.2rem;
}


/* --- 20.13 Primärbutton auf dunklem Grund --------------------------------- */
/* .btn--primary ist navy auf navy: Im Kopfbereich, im Hero und in der mobilen
   Leiste wäre damit ausgerechnet der wichtigste Button unsichtbar (er war es
   bis zum Review auch). Auf dunklen Flächen tritt er deshalb in Gold auf –
   der Farbe, die auf der ganzen Seite Handlung signalisiert. */

.site-header .btn--primary,
.hero .btn--primary,
.mobile-cta .btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 700;
}
.site-header .btn--primary:hover,
.hero .btn--primary:hover,
.mobile-cta .btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-primary);
}


/* ==========================================================================
   21 · DANKE-SEITE
   Eigene Seite nach dem Absenden (danke.html). Beantwortet die Frage, die
   nach dem Klick tatsächlich ansteht: was passiert jetzt und wann.
   ========================================================================== */

.danke {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.danke__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-3);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
}
.danke__icon svg { width: 1.6rem; height: 1.6rem; }

.danke__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.danke__lead {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Die drei Schritte stehen links ausgerichtet – eine zentrierte Aufzählung
   liest sich schlecht, auch wenn der Rest der Seite mittig steht. */
.danke__steps {
  counter-reset: dstep;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  text-align: left;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.danke__steps li {
  counter-increment: dstep;
  position: relative;
  padding-left: 2.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-muted);
}
.danke__steps li::before {
  content: counter(dstep);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
}
.danke__steps strong { color: var(--color-text); }

.danke__direct { margin-top: var(--space-4); }
.danke__direct-head {
  font-size: var(--fs-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
/* Kontaktzeilen mittig, anders als im Formularbereich auf dunklem Grund */
.danke__direct .contact__direct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: center;
}
.danke__direct .contact__direct a { color: var(--color-primary); }
/* Die Trennlinie stammt vom dunklen Kontaktbereich und hätte hier keine
   Funktion – auf hellem Grund bleiben nur Label und Angabe. */
.danke__direct .contact__direct li { padding-top: 0; border-top: none; }
.danke__direct .contact__label { color: var(--color-muted); }

.danke .notfound__links { margin-top: var(--space-4); }


/* ==========================================================================
   22 · SCREENSHOTS VERGRÖSSERN
   Die Bilder sehen wie Programmfenster aus – also erwartet man, sie öffnen
   zu können. Lupe und Klickfläche werden von script.js ergänzt; ohne
   JavaScript existiert beides nicht und es liegt auch keine tote
   Schaltfläche im Bild.
   ========================================================================== */

/* position steht bei .app-window (Abschnitt 09) – siehe Begründung dort. */
.app-window--zoomable img { cursor: zoom-in; }

.shot-zoom {
  position: absolute;
  top: 2.4rem;          /* unter der Fensterleiste */
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  background-color: rgba(10, 22, 40, 0.78);
  color: var(--color-text-light);
  border: 1px solid rgba(248, 244, 238, 0.28);
  border-radius: var(--radius);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  cursor: zoom-in;
  opacity: 0.72;
  transition: opacity var(--transition),
              background-color var(--transition),
              border-color var(--transition);
}
.shot-zoom svg { width: 0.95rem; height: 0.95rem; flex: none; }

.app-window--zoomable:hover .shot-zoom,
.shot-zoom:hover,
.shot-zoom:focus-visible {
  opacity: 1;
  background-color: var(--color-primary);
  border-color: var(--color-accent);
}

/* Auf schmalen Displays nur die Lupe – der Text nähme zu viel vom Bild weg */
@media (max-width: 34em) {
  .shot-zoom { top: 2.2rem; padding: 0.4rem; opacity: 0.85; }
  .shot-zoom span { display: none; }
}

/* Der Such-Dialog hat einen hellen Innenrand, dort sitzt die Lupe sonst
   auf dem Bild statt in der Ecke */
.app-window--dialog .shot-zoom { top: 2.4rem; right: 0.6rem; }


/* --- Großansicht: breite Fassung für Screenshots -------------------------- */
/* Belege sind hochkant (A4), Screenshots quer – deshalb zwei Breiten. */

.lightbox--wide { max-width: min(96vw, 72rem); }

.lightbox--wide .lightbox__img {
  max-height: 82vh;
  background-color: var(--color-primary);
}

.lightbox__caption {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: rgba(248, 244, 238, 0.72);
  text-align: center;
}
.lightbox__caption[hidden] { display: none; }
.lightbox__foot[hidden] { display: none; }


/* ==========================================================================
   23 · KOSTENVERLAUF & RECHNER
   Zwei Linien, eine Fläche, drei Bedienelemente. Bewusst ohne Diagramm-
   Bibliothek: Das Ganze ist Geometrie, die sich in wenigen Zeilen ausrechnen
   lässt – eine nachgeladene Bibliothek wäre hier mehr Gewicht als Inhalt.
   ========================================================================== */

.roi {
  max-width: 68rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.roi__head { margin-bottom: var(--space-4); }

.roi__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.roi__lead {
  margin-top: 0.4rem;
  max-width: 44em;
  color: var(--color-muted-light);
  font-size: 0.97rem;
  line-height: 1.65;
}

.roi__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}

@media (min-width: 58em) {
  .roi__grid { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
}

/* --- Bedienelemente ------------------------------------------------------- */

/* Ohne JavaScript rechnet nichts – dann sollen auch keine Regler dastehen,
   die nichts bewirken. Die Grafik behält ihre Voreinstellung. */
html:not(.js) .roi__field { display: none; }

.roi__controls {
  display: grid;
  gap: var(--space-3);
}

.roi__field label,
.roi__legend {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(248, 244, 238, 0.92);
  margin-bottom: 0.6rem;
}

.roi__inputrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.roi__value {
  min-width: 3.6rem;
  padding: 0.25rem 0.55rem;
  background-color: rgba(196, 154, 60, 0.14);
  border: 1px solid rgba(196, 154, 60, 0.4);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.roi__hint {
  margin-top: 0.4rem;
  font-size: var(--fs-tiny);
  color: var(--color-muted-light);
}

/* Schieberegler: in beiden Engines getrennt zu gestalten, daher die doppelten
   Regelsätze. accent-color allein reicht nicht – die Schiene bliebe hell und
   wäre auf Navy kaum zu sehen. --fill setzt script.js. */
.roi input[type="range"] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  margin: 0;
  background: linear-gradient(90deg,
              var(--color-accent) 0%,
              var(--color-accent) var(--fill, 27%),
              rgba(248, 244, 238, 0.18) var(--fill, 27%),
              rgba(248, 244, 238, 0.18) 100%);
  border-radius: 999px;
  cursor: pointer;
}
.roi input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: var(--gold-sheen);
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: grab;
  transition: transform var(--transition);
}
.roi input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.roi input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-image: var(--gold-sheen);
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: grab;
}
.roi input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border-radius: 999px;
}

/* Lizenzwahl als zwei Flächen statt als Radioknöpfe: Der eigentliche Knopf
   bleibt im DOM (Tastatur, Screenreader), sichtbar ist die Fläche. */
.roi__choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.roi__choice label { margin: 0; cursor: pointer; }
.roi__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.roi__choice span {
  display: block;
  padding: 0.65rem 0.5rem;
  background-color: rgba(248, 244, 238, 0.05);
  border: 1px solid rgba(248, 244, 238, 0.16);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-muted-light);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}
.roi__choice strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(248, 244, 238, 0.92);
  margin-bottom: 0.1rem;
}
.roi__choice input:checked + span {
  background-color: rgba(196, 154, 60, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.roi__choice input:checked + span strong { color: var(--color-accent); }
.roi__choice input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Ergebniswerte -------------------------------------------------------- */

.roi__results {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-dark);
}

.roi__result-label {
  display: block;
  font-size: var(--fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-light);
}

.roi__result-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.roi__result-value--gold { color: var(--color-accent); }

.roi__verdict {
  padding: var(--space-2);
  background-color: rgba(248, 244, 238, 0.05);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(248, 244, 238, 0.88);
}

.roi__note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--color-muted-light);
}
.roi__note strong { color: var(--color-text-light); }
.roi__note a { color: var(--color-accent); }

/* --- Diagramm ------------------------------------------------------------- */

.cost-chart { margin: 0; }

.cost-chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.cost-chart__grid line {
  stroke: rgba(248, 244, 238, 0.10);
  stroke-width: 1;
}
.cost-chart__grid text,
.cost-chart__xaxis text {
  fill: rgba(248, 244, 238, 0.45);
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.cost-chart__grid text { text-anchor: end; }
.cost-chart__xaxis text { text-anchor: middle; }

.cost-chart__area { fill: rgba(196, 154, 60, 0.16); }

.cost-chart__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Das Abo bekommt kein Rot: Die Tabelle darüber ist ehrlich, die Grafik darf
   nicht mit der Farbe urteilen, wo der Text es nicht tut. Ein warmer,
   gedämpfter Ton reicht, um die Linien zu unterscheiden. */
.cost-chart__line--abo     { stroke: #E5877A; }
.cost-chart__line--saldura { stroke: var(--color-accent); }

.cost-chart__marker-line {
  stroke: rgba(248, 244, 238, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.cost-chart__marker-dot {
  fill: var(--color-accent);
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

.cost-chart__endlabel {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-anchor: end;
}
.cost-chart__endlabel--abo     { fill: #E5877A; }
.cost-chart__endlabel--saldura { fill: var(--color-accent); }

/* Beim ersten Sichtbarwerden zeichnen sich die Linien von links nach rechts.
   Die Pfadlänge misst script.js und setzt sie als --len. */
.cost-chart.is-drawn .cost-chart__line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: line-draw 1100ms var(--ease-out-quart) forwards;
}
.cost-chart.is-drawn .cost-chart__line--abo { animation-delay: 180ms; }

@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}

.cost-chart.is-drawn .cost-chart__area,
.cost-chart.is-drawn .cost-chart__marker-dot,
.cost-chart.is-drawn .cost-chart__marker-line,
.cost-chart.is-drawn .cost-chart__endlabel {
  animation: fade-in 500ms var(--ease-out-quart) 900ms both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cost-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-muted-light);
}
.cost-chart__key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.cost-chart__key::before {
  content: "";
  width: 1.15rem;
  height: 2.5px;
  border-radius: 2px;
}
.cost-chart__key--saldura::before { background-color: var(--color-accent); }
.cost-chart__key--abo::before     { background-color: #E5877A; }

/* Auf schmalen Displays schrumpft das SVG auf gut 290 px Breite. Weil alle
   Maße darin im viewBox-System stehen (640 breit), wird aus 11 px Schrift
   dabei rund 5 px auf dem Schirm – unlesbar. Deshalb hier größere Werte im
   viewBox, die nach der Verkleinerung wieder bei etwa 10 px landen.

   Die Beschriftung der Betragsachse entfällt dabei: In dieser Größe bräuchte
   "1.500" mehr Platz nach links, als der Rand hergibt. Die beiden Zahlen, auf
   die es ankommt, stehen ohnehin an den Linienenden – und vollständig im
   Ergebnisblock darüber. Die Hilfslinien selbst bleiben, sie geben dem Auge
   den Maßstab. */
@media (max-width: 46em) {
  .cost-chart__grid text { display: none; }
  .cost-chart__xaxis text { font-size: 22px; }
  /* "Monate" ragt in dieser Größe über den rechten Rand hinaus */
  .cost-chart__xaxis text:last-child { display: none; }
  .cost-chart__endlabel { font-size: 24px; }
  .cost-chart__line { stroke-width: 5; }
  .cost-chart__marker-line { stroke-width: 2; }
  .cost-chart__marker-dot { r: 9px; stroke-width: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .cost-chart.is-drawn .cost-chart__line,
  .cost-chart.is-drawn .cost-chart__area,
  .cost-chart.is-drawn .cost-chart__marker-dot,
  .cost-chart.is-drawn .cost-chart__marker-line,
  .cost-chart.is-drawn .cost-chart__endlabel {
    animation: none !important;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}