/* ==========================================================================
   Heldenlohn — Landingpage
   Design-System: "Broadsheet" (Newsprint). Serif Source Serif 4, Papierweiß,
   near-black Text, Cyan/Magenta als sparsame Prozess-Akzente.
   Tokens gespiegelt aus design/wireframes/_ds/.../styles.css und den
   App-Tokens unter app/lib/core/theme/.
   Keine externen Requests: Schrift lokal gehostet, Icons inline als SVG.
   ========================================================================== */

/* — Schrift lokal (DSGVO: keine Google-Fonts-CDN) ------------------------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/sourceserif4-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: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/sourceserif4-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;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourceserif4-latin-italic.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: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourceserif4-latin-ext-italic.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;
}

/* — Tokens ---------------------------------------------------------------- */
:root {
  --color-bg: #f6f3ec;
  --color-surface: #ece7dc;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;

  --color-process-yellow: #edbb00;

  /* — Die Münze aus dem Logo -----------------------------------------------
     Bis hierher war Gold nur die Füllfarbe der Bildmarke und tauchte auf der
     Seite nirgends auf — deshalb wirkte sie kühl, obwohl das Zeichen warm ist.
     Diese vier Werte stammen direkt aus `icon-mark.svg`: Deckfläche, Schattenrand
     und zwei abgeleitete Tinten für Flächen und Linien.

     Gold trägt **keinen** Text: 4,5:1 gegen Papier erreicht es nicht. Es ist
     Kante, Ring und Fläche — und der Text darauf bleibt near-black. */
  --color-gold: #edbb00;
  --color-gold-deep: #c98a17;
  --color-gold-tint: #fbf1d3;
  --color-gold-line: color-mix(in srgb, #c98a17 45%, transparent);

  /* Wärmeres Papier: derselbe Helligkeitswert, nur nicht mehr neutralgrau.
     Der Unterschied ist winzig und genau deshalb richtig — die Seite soll nach
     Papier aussehen, nicht nach Bildschirm. */
  --color-paper-warm: #f6f3ec;

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --heading-weight: 600;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;
  --space-12: 60px;
  --space-16: 80px;
  --space-24: 120px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --measure: 1180px;
  --measure-narrow: 760px;
}

/* — Reset / Basis --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
p {
  margin: 0 0 var(--space-3);
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.text-muted {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* — Layout-Helfer --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section {
  padding-block: var(--space-24);
}
.section--tight {
  padding-block: var(--space-16);
}
.section-head {
  max-width: var(--measure-narrow);
  margin-bottom: var(--space-8);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: var(--heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent);
}
/* Gerändelte Kante — die Riffelung am Münzrand, als Linie gelesen. Rein
   dekorativ und deshalb ohne eigene Bedeutung für Screenreader. */
hr.reeded-rule {
  width: min(100% - 2 * var(--space-6), var(--measure));
  margin-inline: auto;
}
.reeded-rule {
  height: 6px;
  border: 0;
  margin: var(--space-6) 0;
  background: repeating-linear-gradient(
    90deg,
    var(--color-gold-deep) 0 1px,
    transparent 1px 5px
  );
  opacity: 0.55;
}
.center .kicker {
  justify-content: center;
}
h1 {
  font-size: clamp(40px, 7vw, 74px);
}
h2 {
  font-size: clamp(30px, 4.4vw, 46px);
}
h3 {
  font-size: clamp(21px, 2.4vw, 27px);
}
.lead {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* Newsprint-Textur: feines Halftone-Raster für Akzentflächen */
.halftone-bg {
  position: relative;
}
.halftone-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-text) 6%, transparent) 30%,
    transparent 32%
  );
  background-size: 4px 4px;
  opacity: 0.6;
}

/* — Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease, color 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-accent-600);
}
.btn-primary:active {
  background: var(--color-accent-700);
}
.btn-secondary {
  border-color: var(--color-divider);
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.btn-ghost {
  color: var(--color-accent);
  padding-inline: var(--space-2);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.btn-lg {
  font-size: 17px;
  padding: 15px 26px;
}
.btn-block {
  width: 100%;
}

/* App-Store-Badges (eigene, textbasierte Variante — keine fremden Assets) */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.store-badge:hover {
  opacity: 0.88;
}
.store-badge:active {
  transform: translateY(1px);
}
.store-badge svg {
  width: 26px;
  height: 26px;
  flex: none;
}
.store-badge .store-badge__sub {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  line-height: 1.1;
}
.store-badge .store-badge__main {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 18px;
  line-height: 1.1;
}
/* Apples Abzeichen bringt seinen eigenen Rahmen mit — Hintergrund, Rundung und
   Kontur stecken in der Grafik. Unser Pillen-Stil käme darüber und wäre ein
   zweiter Rahmen um denselben Knopf; Apples Richtlinien verlangen zudem, das
   Motiv unverändert zu lassen.
   Die Höhe ist an die Play-Pille angeglichen, damit keins der beiden
   Abzeichen wichtiger aussieht als das andere. */
.store-badge--apple {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  line-height: 0;
}
.store-badge--apple img {
  display: block;
  height: 50px;
  width: auto;
}
.store-badge--apple:hover {
  opacity: 0.85;
}

/* Googles Abzeichen, gleich hoch wie Apples daneben.
   Die frühere Annahme, die Datei bringe einen Rand aus Leerraum mit und müsse
   deshalb 62 statt 50 Pixel hoch stehen, stimmt für diese Datei nicht: Der
   Knopf füllt die Zeichenfläche fast vollständig aus (`viewBox 0 0 238.96
   70.87`, äußeres Rechteck 239,17 × 70,87). Bei 62 Pixeln stand das Abzeichen
   deshalb sichtbar größer da als Apples.
   Die Breiten unterscheiden sich trotzdem — 169 gegen 150 Pixel —, weil die
   beiden Abzeichen verschiedene Seitenverhältnisse haben. Gleiche Höhe ist
   das Maß, das zählt; Googles Richtlinie verlangt nur, dass das Play-Abzeichen
   nicht kleiner ist als das eines anderen Anbieters daneben. */
.store-badge--play {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  line-height: 0;
}
.store-badge--play img {
  display: block;
  height: 50px;
  width: auto;
}
.store-badge--play:hover {
  opacity: 0.85;
}
.cta-final .store-badge--play {
  background: transparent;
  border: 0;
}

.store-badge[aria-disabled="true"] {
  cursor: default;
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-divider);
}
.store-badge[aria-disabled="true"]:hover {
  opacity: 1;
}

/* — Header / Nav ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}
.nav__brand img {
  height: 48px;
  width: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  color: inherit;
  text-decoration: none;
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover {
  color: var(--color-accent);
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
}
.nav__toggle svg {
  width: 22px;
  height: 22px;
}
.nav__toggle .icon-close {
  display: none;
}
.nav[data-open="true"] .nav__toggle .icon-open {
  display: none;
}
.nav[data-open="true"] .nav__toggle .icon-close {
  display: block;
}

/* — Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-24);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}
/* Die Münze hinter der Schlagzeile.
   Das SVG trägt zusätzlich `width`/`height` im Markup — ohne sie füllte es
   ohne diese Regel den ganzen Textblock aus. Genau das passierte am
   20.08.2026 bei einem Besucher mit altem Stylesheet im Cache: neues Markup,
   alte Regeln, Münze riesig und grau. Feste Maße am Element sind der Gurt zum
   Hosenträger; der Hosenträger sind die versionierten Asset-Adressen.
   Sie steht bewusst NICHT als Bild neben dem Text, sondern liegt hinter ihm —
   eine Prägung im Papier, kein zweites Motiv, das mit dem Telefon-Mockup um
   Aufmerksamkeit ringt. Auf schmalen Schirmen verschwindet sie ganz: Dort ist
   jeder Pixel für den Text da. */
.hero__coin {
  position: absolute;
  /* Weit nach links und unten aus dem Textblock heraus: Der erste Entwurf lag
     hinter „Aus Aufgaben" und machte die Schlagzeile fleckig. Eine Prägung im
     Papier darf man ahnen, lesen muss man den Text. */
  bottom: -175px;
  left: -215px;
  width: 340px;
  height: 340px;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1200px) {
  .hero__coin {
    left: -240px;
  }
}
.hero__copy {
  position: relative;
}
.hero__copy > *:not(.hero__coin) {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero__coin {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__coin {
    transition: transform 0.4s ease;
  }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
  background: var(--color-accent-2-100);
  border: 1px solid color-mix(in srgb, var(--color-accent-2) 25%, transparent);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.hero__eyebrow svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.hero h1 {
  margin-bottom: var(--space-4);
}
.hero h1 em {
  font-style: italic;
  color: var(--color-accent);
}
.hero__lead {
  max-width: 34ch;
  margin-bottom: var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-6);
}
.hero__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.hero__note svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex: none;
}
.hero__masthead-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.hero__masthead-rule::before,
.hero__masthead-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--color-divider);
}

/* — Telefon-Mockup (aus Phone-Wireframe abgeleitet) ----------------------- */
.device {
  position: relative;
  /* `width: 300px` mit `max-width: 100%` genügt nicht: Die Prozentangabe
     bezieht sich auf den Elternteil, dessen Breite ihrerseits vom Inhalt
     abhängt — das Raster rechnet deshalb weiter mit 300 px Mindestbreite und
     wird auf schmalen Schirmen breiter als der Bildschirm. `min()` löst das
     ohne Zirkelschluss. */
  width: min(300px, 100%);
  aspect-ratio: 300 / 648;
  margin-inline: auto;
  background: #201e1d;
  border-radius: 44px;
  padding: 11px;
  box-shadow: 0 18px 44px rgba(45, 43, 43, 0.28),
    0 2px 6px rgba(45, 43, 43, 0.2);
}
.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.device__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 24px;
  background: #201e1d;
  border-radius: 14px;
  z-index: 30;
}
.device__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 4px;
  flex: none;
  z-index: 20;
  font-size: 13px;
  font-weight: var(--heading-weight);
}
.device__statusbar .icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.device__statusbar svg {
  width: 16px;
  height: 16px;
}
.device__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-3) 0;
}

/* Mini-UI innerhalb des Telefons */
.screen-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.screen-topbar h4 {
  font-size: 19px;
  margin: 0;
}
.screen-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent-2);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: var(--heading-weight);
}
.mini-balance {
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.mini-balance .label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.mini-balance .amount {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 30px;
  line-height: 1.1;
}
.mini-balance .amount span {
  color: var(--color-accent-300);
}
.mini-task {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 10px 11px;
  margin-bottom: var(--space-2);
}
.mini-task__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.mini-task__icon svg {
  width: 19px;
  height: 19px;
}
.mini-task__icon.is-magenta {
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-700);
}
.mini-task__text {
  flex: 1;
  min-width: 0;
}
.mini-task__title {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 14px;
  line-height: 1.2;
}
.mini-task__sub {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.mini-task__price {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 15px;
  color: var(--color-accent-700);
  flex: none;
}
.mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.mini-tag.ok {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.mini-tag.pending {
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
}

/* schwebende Notiz neben dem Gerät */
.hero__device-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.float-card {
  position: absolute;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  white-space: nowrap;
  z-index: 5;
}
.float-card svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.float-card--ai {
  top: 11%;
  left: -8px;
  color: var(--color-accent-700);
}
.float-card--ai svg {
  color: var(--color-accent);
}
.float-card--pay {
  bottom: 13%;
  right: -8px;
  color: var(--color-accent-2-700);
}
.float-card--pay svg {
  color: var(--color-accent-2);
}

/* — Logo-Zeile / Vertrauen ------------------------------------------------ */
.trust-strip {
  border-block: 1px solid var(--color-divider);
  padding-block: var(--space-6);
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-8);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.trust-item svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex: none;
}

/* — Feature-Raster -------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.feature {
  position: relative;
  background: color-mix(in srgb, var(--color-paper-warm) 40%, #ffffff);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  /* Goldhaarlinie an der Oberkante: die Prägekante der Münze, auf eine Karte
     übertragen. Nur 2 Pixel, aber sie nimmt der Fläche das Klinische. */
  background-image: linear-gradient(
    to right,
    var(--color-gold-deep),
    var(--color-gold) 45%,
    transparent 92%
  );
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: color-mix(in srgb, var(--color-paper-warm) 40%, #ffffff);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-text) 26%, transparent);
}
/* Medaillon statt Kachel.
   Die Bildmarke ist eine geprägte Münze: zwei versetzte Kreise, ein
   Innenring, ein eingelassener Stern. Genau diese drei Merkmale stecken hier —
   runde Fläche, zweiter Ring als `box-shadow`-Kranz, und ein Lichtrand oben mit
   Schattenkante unten, der die Prägung andeutet. Kein Bild, keine Datei: drei
   Schatten und ein Farbverlauf. */
.feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-gold) 30%, var(--color-bg)) 0%,
      var(--color-gold-tint) 55%,
      color-mix(in srgb, var(--color-gold-deep) 22%, var(--color-bg)) 100%
    );
  color: var(--color-accent-700);
  box-shadow:
    inset 0 0 0 1px var(--color-gold-line),
    inset 0 0 0 5px color-mix(in srgb, var(--color-gold-tint) 70%, transparent),
    inset 0 0 0 6px var(--color-gold-line),
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    0 1px 2px color-mix(in srgb, var(--color-gold-deep) 35%, transparent);
}
.feature__icon svg {
  width: 26px;
  height: 26px;
}
.feature:nth-child(3n + 2) .feature__icon {
  color: var(--color-accent-2-700);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-gold) 30%, var(--color-bg)) 0%,
      var(--color-gold-tint) 55%,
      color-mix(in srgb, var(--color-gold-deep) 22%, var(--color-bg)) 100%
    );
}
.feature h3 {
  font-size: 20px;
  margin: 0;
}
.feature p {
  margin: 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* — So funktioniert's (Schritte) ------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-text);
}
.step__num {
  position: absolute;
  top: -1px;
  left: 0;
  transform: translateY(-50%);
  background: var(--color-bg);
  padding-right: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.step__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-accent-700);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-gold) 26%, var(--color-bg)) 0%,
      var(--color-gold-tint) 60%,
      color-mix(in srgb, var(--color-gold-deep) 20%, var(--color-bg)) 100%
    );
  margin-bottom: var(--space-3);
  box-shadow:
    inset 0 0 0 1px var(--color-gold-line),
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
.step__icon svg {
  width: 44px;
  height: 44px;
}
.step h3 {
  font-size: 21px;
}
.step p {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: 0;
}

/* — Split (Eltern / Kinder) ---------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  background: var(--color-divider);
}
.split__col {
  background: var(--color-surface);
  padding: var(--space-8);
}
.split__col--kids {
  background: var(--color-text);
  color: var(--color-bg);
}
.split__col--kids .split__label {
  color: var(--color-accent-300);
}
.split__col--kids .check-list svg {
  color: var(--color-accent-300);
}
.split__label {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  display: block;
}
.split__col h3 {
  font-size: 27px;
}
.check-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.check-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 16px;
}
.check-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-accent);
  margin-top: 2px;
}

/* — Screenshots-Galerie --------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: start;
}
.gallery__item {
  text-align: center;
  /* Einspaltig steht die Galerie auf `justify-items: center`; die Kachel wird
     damit so breit, wie ihre Bildunterschrift auf einer Zeile wäre — auf
     schmalen Schirmen breiter als der Bildschirm. Die Deckelung zwingt den
     Text zum Umbruch, statt die Seite zu verbreitern. */
  max-width: 100%;
}
.gallery__item .device {
  margin-bottom: var(--space-4);
}
.gallery__caption {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 17px;
}
.gallery__caption span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* Upload-/Erfolg-Mini-Screens */
.mini-proof {
  border: 1px dashed color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}
.mini-proof svg {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  margin: 0 auto var(--space-2);
}
.mini-proof .t {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 14px;
}
.mini-proof .s {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.mini-ai {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  margin-bottom: var(--space-2);
}
.mini-ai svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.mini-success {
  text-align: center;
  padding-top: var(--space-6);
}
.mini-success .burst {
  width: 74px;
  height: 74px;
  margin: 0 auto var(--space-3);
  color: var(--color-accent-2);
}
.mini-success .burst svg {
  width: 74px;
  height: 74px;
}
.mini-success .big {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 26px;
}
.mini-success .amount {
  color: var(--color-accent-700);
}

/* — Preise ---------------------------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 940px;
  margin-inline: auto;
}
.plan {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.plan--featured {
  border-color: var(--color-gold-deep);
  /* Zwei Ringe wie auf der Münze: außen die Prägekante in Gold, innen der
     Cyan-Faden der Marke. Der Preis steht damit in einem Rahmen, nicht in
     einem Kasten. */
  box-shadow:
    0 0 0 1px var(--color-gold),
    0 0 0 4px color-mix(in srgb, var(--color-gold-tint) 80%, transparent),
    var(--shadow-md);
  position: relative;
}
.plan__flag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Gold trägt den dunklen Text, nicht den hellen: Auf #edbb00 erreicht
     near-black rund 9:1, Weiß dagegen 1,9:1 — der Wimpel wäre sonst hübsch
     und unlesbar. */
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-deep) 100%);
  border: 1px solid var(--color-gold-deep);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.plan__name {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.plan--featured .plan__name {
  color: var(--color-accent-2-700);
}
.plan__price {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-1);
}
.plan__price small {
  font-size: 17px;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.plan__tag {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin-bottom: var(--space-6);
}
/* Steht dort, wo bis zum 13.08.2026 ein „Vormerken“-Knopf saß. Vormerken ergibt
   keinen Sinn mehr, seit die App eingereicht ist — der Hinweis sagt stattdessen,
   wo der Tarif tatsächlich zustande kommt. */
.plan__note {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.plan .check-list {
  margin-top: 0;
  margin-bottom: var(--space-6);
  flex: 1;
}
.plan .check-list li {
  font-size: 15px;
}

/* — FAQ (Accordion) ------------------------------------------------------- */
.faq {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.faq__item {
  border-bottom: 1px solid var(--color-divider);
}
.faq__item:first-child {
  border-top: 1px solid var(--color-divider);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 19px;
  color: var(--color-text);
}
.faq__q:hover {
  color: var(--color-accent);
}
.faq__icon {
  width: 24px;
  height: 24px;
  flex: none;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq__icon::before {
  top: 11px;
  left: 3px;
  width: 18px;
  height: 2px;
}
.faq__icon::after {
  top: 3px;
  left: 11px;
  width: 2px;
  height: 18px;
}
.faq__q[aria-expanded="true"] {
  color: var(--color-accent);
}
.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease;
}
.faq__a-inner {
  padding: 0 0 var(--space-4);
  max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.faq__a-inner p {
  margin-bottom: var(--space-2);
}
.faq__a-inner p:last-child {
  margin-bottom: 0;
}

/* — Abschluss-CTA --------------------------------------------------------- */
.cta-final {
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final .halftone-bg::before {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, #ffffff 10%, transparent) 30%,
    transparent 32%
  );
}
.cta-final h2 {
  color: var(--color-bg);
  max-width: 20ch;
  margin-inline: auto;
}
.cta-final h2 em {
  font-style: italic;
  color: var(--color-accent-300);
}
.cta-final p {
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  max-width: 46ch;
  margin: 0 auto var(--space-6);
  font-size: 18px;
}
.cta-final .btn-secondary {
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 40%, transparent);
}
.cta-final .btn-secondary:hover {
  background: color-mix(in srgb, var(--color-bg) 12%, transparent);
}
.cta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.cta-final .store-badge {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}
/* Apples Abzeichen bringt seinen Grund selbst mit — im dunklen Block steht
   dort die weiße Fassung. Die helle Platte der Zeile darüber würde sie
   verschlucken. */
.cta-final .store-badge--apple {
  background: transparent;
  border: 0;
}
.cta-final .store-badge[aria-disabled="true"] {
  background: transparent;
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 40%, transparent);
}

/* — Footer ---------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12) var(--space-8);
  margin-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.footer-brand img {
  height: 52px;
  margin-bottom: var(--space-3);
}
.footer-brand p {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  max-width: 32ch;
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: var(--space-3);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 15px;
}
.footer-col a:hover {
  color: var(--color-accent);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.footer-bottom a {
  color: inherit;
}

/* — Rechtstexte (Impressum / Datenschutz) --------------------------------- */
.legal {
  padding-block: var(--space-12) var(--space-16);
}
.legal__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.legal__inner h1 {
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: var(--space-2);
}
.legal__updated {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: var(--space-8);
}
.legal__inner h2 {
  font-size: 24px;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.legal__inner h3 {
  font-size: 19px;
  margin-top: var(--space-6);
}
.legal__inner p,
.legal__inner li {
  font-size: 16px;
  line-height: 1.65;
}
.legal__inner ul,
.legal__inner ol {
  padding-left: var(--space-4);
  margin-bottom: var(--space-4);
}
.legal__inner li {
  margin-bottom: var(--space-2);
}
.legal__inner address {
  font-style: normal;
  line-height: 1.7;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.legal-back svg {
  width: 18px;
  height: 18px;
}
.todo {
  background: var(--color-accent-2-100);
  border: 1px solid color-mix(in srgb, var(--color-accent-2) 30%, transparent);
  color: var(--color-accent-2-800);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
}
.note-box {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-block: var(--space-4);
  font-size: 15px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-block: var(--space-4);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.data-table th {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — No-JS-Fallback: ohne JavaScript alles sichtbar/bedienbar --------------- */
.no-js .reveal {
  opacity: 1;
  transform: none;
}
.no-js .faq__a {
  max-height: none;
}
.no-js .nav__toggle {
  display: none;
}

/* — Scroll-Reveal --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* — Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .hero__device-stage {
    order: -1;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .gallery {
    /* `1fr` hat eine automatische Mindestbreite: die Inhaltsbreite der Kachel.
       Die Spalte wurde damit breiter als ihr eigener Behälter — der Grund für
       den waagerechten Überlauf auf schmalen Schirmen. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    justify-items: center;
  }
  .footer-grid {
    /* `1fr` schrumpft nur bis zur Inhaltsbreite der längsten Zeile
       („Nutzungsbedingungen"). `minmax(0, 1fr)` hebt diese Sperre auf. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --space-24: 72px;
    --space-16: 56px;
  }
  body {
    font-size: 16px;
  }
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
  }
  .float-card {
    display: none;
  }
  .nav[data-open="true"] .nav__links {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .nav[data-open="true"] .nav__links a {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .split {
    grid-template-columns: 1fr;
  }
  .pricing {
    grid-template-columns: 1fr;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .float-card--ai {
    left: 0;
  }
  .float-card--pay {
    right: 0;
  }
  .cta-final {
    padding-inline: var(--space-4);
  }
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn,
  .hero__actions .store-badge {
    width: 100%;
  }
  /* Apples Abzeichen darf NICHT auf volle Breite gezogen werden — das
     verzerrte das Seitenverhältnis, und genau das untersagen die Richtlinien.
     Es bleibt bei seiner Größe und rückt nach links, wie die Pille darunter. */
  .hero__actions .store-badge--apple {
    width: auto;
    align-self: flex-start;
  }
}

/* ==========================================================================
   Handschrift — gezeichnete Kanten
   --------------------------------------------------------------------------
   Die Bildmarke ist eine Münze mit dicker Tuschekontur. Die Seite war dagegen
   glatt: Haarlinien, gerade Kanten, weiche Schatten. Dieser Block gibt ihr
   dieselbe Handschrift wie die Pressemappe — ohne die Struktur darüber
   anzufassen; er steht bewusst am Ende und überschreibt nur Kanten, Radien und
   Schatten.

   Warum ohne Bilder: Ein gezeichneter Rahmen als PNG müsste für jede Kartenbreite
   neu erzeugt und beim Skalieren verzerrt werden. Ein ungleichmäßiger
   `border-radius` (vier verschiedene Ecken, waagerecht und senkrecht getrennt)
   ergibt denselben Eindruck, bleibt aber in jeder Breite gleich dick — und
   kostet keinen einzigen zusätzlichen Request.

   Der versetzte Farbblock hinter jeder Karte ist der zweite Teil des Eindrucks:
   erst er lässt die Kante gezeichnet statt nur krumm wirken.
   ========================================================================== */

:root {
  /* Drei Kantenformen, damit nicht jede Karte gleich krumm ist. */
  --sketch-1: 14px 26px 16px 22px / 22px 14px 26px 16px;
  --sketch-2: 26px 14px 22px 16px / 14px 26px 16px 22px;
  --sketch-3: 18px 22px 26px 14px / 26px 16px 20px 18px;

  --sketch-line: 2px solid var(--color-text);
  --sketch-lift: 5px 5px 0 var(--color-gold);
  --sketch-lift-cyan: 5px 5px 0 var(--color-accent);
  --sketch-lift-magenta: 5px 5px 0 var(--color-accent-2);

  /* Gezogener Strich, als Datei-URI eingebettet — kein zusätzlicher Request. */
  --stroke-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'%3E%3Cpath d='M5 9 Q 40 3 78 8 T 140 6 T 195 9' fill='none' stroke='%23edbb00' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --stroke-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'%3E%3Cpath d='M5 9 Q 40 3 78 8 T 140 6 T 195 9' fill='none' stroke='%230088b0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'%3E%3Cpath d='M0 7 Q 20 2 40 6 T 80 7 T 120 5 T 160 8 T 200 5 T 240 7' fill='none' stroke='%23c98a17' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* — Kartenflächen --------------------------------------------------------- */
.feature,
.plan,
.faq__item,
.float-card,
.mini-proof,
.mini-ai,
.mini-success,
.note-box {
  border: var(--sketch-line);
  border-radius: var(--sketch-1);
  box-shadow: var(--sketch-lift);
}

/* Abwechselnde Kantenform und Farbe des versetzten Blocks: Drei gleiche Karten
   nebeneinander verraten sofort, dass die Krümmung aus einer Regel kommt. */
.feature:nth-child(3n + 2),
.step:nth-child(2n) {
  border-radius: var(--sketch-2);
  box-shadow: var(--sketch-lift-magenta);
}
.feature:nth-child(3n),
.step:nth-child(3n) {
  border-radius: var(--sketch-3);
  box-shadow: var(--sketch-lift-cyan);
}

/* Die Goldhaarlinie an der Oberkante hat ausgedient — die Kante selbst ist
   jetzt das Merkmal, beides zusammen wäre doppelt gemoppelt. */
.feature {
  background-image: none;
}

.feature:hover {
  transform: translate(-2px, -3px);
  box-shadow: 8px 9px 0 var(--color-gold);
  border-color: var(--color-text);
}
.feature:nth-child(3n + 2):hover {
  box-shadow: 8px 9px 0 var(--color-accent-2);
}
.feature:nth-child(3n):hover {
  box-shadow: 8px 9px 0 var(--color-accent);
}

/* Das Medaillon bekommt die Tuschekontur der Bildmarke. Der Innenring aus
   `inset`-Schatten bleibt — er ist die Prägung. */
.feature__icon {
  border: 2px solid var(--color-text);
}

/* — Hervorgehobener Tarif ------------------------------------------------- */
.plan--featured {
  border: 3px solid var(--color-text);
  border-radius: var(--sketch-2);
  box-shadow: 7px 7px 0 var(--color-accent-2);
}

/* — Knöpfe ---------------------------------------------------------------- */
/* Ein Knopf, der beim Drücken auf seinen eigenen Schatten rutscht: Der Versatz
   schrumpft, die Fläche wandert um denselben Betrag — dadurch wirkt er gedrückt
   statt nur verschoben. */
.btn-primary,
.btn-secondary {
  border: var(--sketch-line);
  border-radius: var(--sketch-1);
  box-shadow: 4px 4px 0 var(--color-text);
}
.btn-primary:hover,
.btn-secondary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--color-text);
}
.btn-primary:active,
.btn-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-text);
}
.btn-lg {
  border-radius: var(--sketch-2);
}

/* Im dunklen Schlussblock trägt der Schatten Gold — Tinte auf Tinte wäre
   unsichtbar. */
.cta-final .btn-primary,
.cta-final .btn-secondary {
  border-color: var(--color-bg);
  box-shadow: 4px 4px 0 var(--color-gold);
}

/* — Trennlinien ----------------------------------------------------------- */
/* Die geriffelte Linie war ein Streifenmuster aus geraden Strichen. Jetzt ist
   es eine gezogene Wellenlinie, die sich waagerecht wiederholt. */
.reeded-rule {
  height: 12px;
  background: var(--wave-gold) repeat-x center / 240px 12px;
  opacity: 0.75;
}

/* — Betonte Wörter in Überschriften --------------------------------------- */
/* „Heldentaten" bekommt den gezogenen Strich unter sich, statt nur Farbe zu
   sein. Der Strich sitzt auf der Grundlinie und wird über die Wortbreite
   gezogen — bei einem groben Strich fällt die Streckung nicht auf. */
h1 em,
h2 em {
  background: var(--stroke-cyan) no-repeat left bottom / 100% 0.22em;
  padding-bottom: 0.12em;
}
.cta-final h2 em {
  background-image: var(--stroke-gold);
}

/* — Kicker ---------------------------------------------------------------- */
.section-head .kicker::before {
  height: 3px;
  border-radius: 2px;
}

/* — Schlussblock ---------------------------------------------------------- */
.cta-final {
  border: 3px solid var(--color-text);
  border-radius: var(--sketch-3);
  box-shadow: 8px 8px 0 var(--color-gold);
}

/* — Bewegung sparsam ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .feature:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-primary:active,
  .btn-secondary:active {
    transform: none;
  }
}

/* Auf schmalen Schirmen fallen große Eckradien unangenehm auf, weil die Karten
   fast die ganze Breite einnehmen — dort wird der Schwung zurückgenommen. */
@media (max-width: 640px) {
  :root {
    --sketch-1: 10px 18px 12px 16px / 16px 10px 18px 12px;
    --sketch-2: 18px 10px 16px 12px / 10px 18px 12px 16px;
    --sketch-3: 14px 16px 18px 10px / 18px 12px 14px 14px;
  }
  .feature,
  .step,
  .plan,
  .faq__item,
  .mini-proof,
  .mini-ai,
  .mini-success,
  .note-box {
    box-shadow: 4px 4px 0 var(--color-gold);
  }
}

/* — Schritte -------------------------------------------------------------- */
/* Die Schritte waren nie Karten, sondern Textspalten unter einer Linie. Mit
   einer Kontur ohne Innenabstand klebte der Text an der Kante, und die
   Schrittzahl saß mitten auf dem Rand. Sie werden deshalb hier zu echten
   Karten gemacht — Rand, Luft, und die Zahl wandert nach innen. */
.step {
  padding: var(--space-4) var(--space-4) var(--space-6);
  border: var(--sketch-line);
  border-top: var(--sketch-line);
  border-radius: var(--sketch-1);
  box-shadow: var(--sketch-lift);
}
.step:nth-child(2n) {
  border-radius: var(--sketch-2);
  box-shadow: var(--sketch-lift-magenta);
}
.step:nth-child(3n) {
  border-radius: var(--sketch-3);
  box-shadow: var(--sketch-lift-cyan);
}
.step__num {
  position: static;
  transform: none;
  display: block;
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-2);
}
.step__icon {
  border: 2px solid var(--color-text);
}

/* — Zwei Perspektiven ----------------------------------------------------- */
/* Der geteilte Block bekommt eine Kontur um beide Hälften — innen bleibt die
   harte Kante zwischen hell und dunkel, sie ist der Witz des Bildes. */
.split {
  border: var(--sketch-line);
  border-radius: var(--sketch-2);
  box-shadow: var(--sketch-lift);
}

/* — Fragen ---------------------------------------------------------------- */
/* Ohne Abstand stößt der versetzte Block der einen Frage an die Kontur der
   nächsten. */
.faq__item + .faq__item {
  margin-top: var(--space-3);
}

/* — Dunkler Schlussblock -------------------------------------------------- */
/* Tinte auf Tinte ist unsichtbar: Auf dunklem Grund zeichnet Gold die Kante. */
.cta-final {
  border-color: var(--color-gold);
}

/* — Kleinteile ------------------------------------------------------------ */
/* Die Auszeichnung über der Schlagzeile und der Empfehlungs-Aufkleber am
   Premium-Tarif sind die letzten geraden Kanten im Blickfeld. Sie bekommen
   dieselbe Krümmung — ohne versetzten Block, dafür sind sie zu klein. */
.hero__eyebrow,
.plan__tag {
  border-radius: var(--sketch-1);
}

/* — Sehr schmale Schirme (bis 480 px) ------------------------------------- */
/* Zwei Fußzeilen-Spalten nebeneinander lassen für jede rund 125 Pixel — das
   unterschreitet die Breite des längsten Links deutlich, und er ragte über den
   Rand hinaus. Unter 480 Pixeln steht die Fußzeile deshalb einspaltig. */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* — Breite Tabellen ------------------------------------------------------- */
/* Die Verarbeitungstabellen der App-Datenschutzerklärung haben drei Spalten
   mit ganzen Sätzen darin; unter rund 800 Pixeln passen sie nicht, und auf dem
   Telefon schoben sie die ganze Seite zur Seite. Sie bekommen deshalb einen
   eigenen Schieberahmen: Die Tabelle bleibt eine Tabelle (wichtig für
   Screenreader), nur der Rahmen scrollt.
   `tabindex` setzt die Seite nicht — Firefox und Safari machen scrollbare
   Bereiche von sich aus per Tastatur erreichbar. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-4);
}
.table-scroll .data-table {
  min-width: 520px;
  margin-block: 0;
}

/* — Lange Wörter ---------------------------------------------------------- */
/* „Datenschutzerklärung", „Nutzungsbedingungen": Deutsche Komposita passen in
   großer Schrift nicht auf einen 320-Pixel-Schirm und schoben die Seite zur
   Seite. Silbentrennung greift, weil die Seiten `lang="de"` tragen; der
   Umbruch am Wortende ist die Rückfallebene, wenn der Browser nicht trennt. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Auch im Fließtext der Rechtsseiten stehen Wörter, die kein Browser umbricht —
   E-Mail-Adressen, Adressen von Diensten, lange Komposita. Auf 320 Pixeln
   schoben sie die Seite um wenige Pixel zur Seite; sichtbar wird das als
   waagerechter Wackler beim Scrollen. */
.legal p,
.legal li,
.legal td,
.legal th,
.legal dd {
  overflow-wrap: break-word;
}

/* — Fragen: Innenabstand ------------------------------------------------- */
/* Solange die Fragen nur durch eine Trennlinie geschieden waren, brauchte die
   Zeile keinen seitlichen Abstand — die Linie lief ohnehin über die ganze
   Breite. Seit jede Frage in einem eigenen Kasten sitzt, klebte der Text an
   der Kontur. Der Abstand gehört an Frage und Antwort gleichermaßen, sonst
   springt die Antwort beim Aufklappen nach links.
   Das Pluszeichen behält seinen Platz rechts; `padding` wirkt auf beide
   Enden des Flex-Kastens. */
.faq__q {
  padding: var(--space-4) var(--space-4);
}
.faq__a-inner {
  padding: 0 var(--space-4) var(--space-4);
}

/* Derselbe Fall wie bei den Fragen: Der Erfolgs-Bildschirm in der Attrappe
   hatte nur oben Abstand, weil er vorher keinen eigenen Rahmen trug. */
.mini-success {
  padding-inline: var(--space-4);
  padding-bottom: var(--space-4);
}