/*
 * Visera Intelligence – Stylesheet
 * Farben, Schriften, Raster und Grundbausteine aller Seiten. Hell, ruhig und editorial: Papier als Grund,
 * feine Haarlinien statt Kästen, kleine Radien, ein sanfter Verlauf oben auf jeder Seite.
 * Dunkel nur Pakete, Abschluss und Fuß.
 * Keine externen Ressourcen: Schriften liegen in ../fonts/.
 */

/* ---------- Schriften (nur verwendete Schnitte, Latin, WOFF2) ---------- */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */

:root {
  /* Weißer Grund (Inhaber-Wunsch 11.10.2026), Tinte fast schwarz mit einem Hauch Aubergine wie die dunkle Leiste. */
  --paper: #FFFFFF;
  --ink: #14111F;
  /* Karten auf Tinte. */
  --ink-soft: #221C33;
  /* Zartes Lavendel: Text in dunklen Abschnitten und Grundton der hellen Flächen. */
  --field: #DDD6FE;
  /* Akzentfamilie (Inhaber-Wunsch 11.10.2026, nach der Review-Intelligence-Oberfläche): Violett über Magenta und Pink bis Pfirsich. */
  --violet: #7C3AED;
  --fuchsia: #C026D3;
  --pink: #DB2777;
  --peach: #FB923C;
  /* Flächen mit weißer Schrift (Knöpfe, Goldfeld der Tab-Leiste, Logo-Kachel): Verlauf nur über die dunklen Töne, Weiß darauf bleibt lesbar. */
  --accent-gradient: linear-gradient(115deg, var(--violet) 0%, var(--fuchsia) 55%, var(--pink) 100%);
  /* Zierverlauf ohne Schrift darauf (Wortmarke, Linien, Unterstriche): läuft bis Pfirsich aus. */
  --accent-spectrum: linear-gradient(90deg, var(--violet) 0%, var(--pink) 60%, var(--peach) 100%);
  /* Heller Schleier für Hover auf Knöpfen (liegt unter der Schrift, nur opacity wird animiert). */
  --accent-sheen: color-mix(in srgb, white 16%, transparent);
  --on-accent: var(--white);

  /* Akzent als Schrift oder Linie auf Weiß: Violett, 5,7 : 1. */
  --accent: #7C3AED;
  /* Der Verlauf des Wechselworts im Hero läuft zwischen --accent-lo und --accent-hi (beide mindestens 3 : 1 auf Weiß). */
  --accent-lo: #7C3AED;
  --accent-hi: #DB2777;
  /* Helles Lavendel für Text und Linien auf Tinte, dazu ein helles Rosa für Verläufe in dunklen Überschriften. */
  --accent-light: #C4B5FD;
  --pink-light: #F9A8D4;
  /* Zarte graue Spur. */
  --track: color-mix(in srgb, var(--ink) 11%, var(--white));
  /* Fokusrahmen auf hellem Grund: Violett, deutlich über 3 : 1. */
  --focus: #7C3AED;
  --white: #FFFFFF;
  /* Haken bei den Zusagen und im Feed: Weiß auf diesem Grün 5,0 : 1. Grün steht nur für „erledigt, zugesagt“. */
  --success: #2F7D4F;
  --on-success: var(--white);

  /* Abgeleitet, nur aus den Farben oben gemischt. */
  /* Ruhiger Fließtext: 6,7 : 1 auf Papier, 7,4 : 1 auf Weiß. */
  --ink-muted: color-mix(in srgb, var(--ink) 74%, var(--paper));
  /* Zarte Feldblau-Fläche für wechselnde Abschnitte und Hinweise. */
  --tint: color-mix(in srgb, var(--field) 34%, var(--paper));
  /* Dunkle Leiste mit leichtem Glas: darunter Liegendes schimmert kaum sichtbar durch. */
  --ink-glass: color-mix(in srgb, var(--ink) 80%, transparent);
  --line: color-mix(in srgb, var(--ink) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  /* Ruhender Unterstrich der Textlinks: dünn, in gedämpfter Tinte. */
  --underline: color-mix(in srgb, var(--ink) 34%, transparent);
  --line-on-ink: color-mix(in srgb, var(--paper) 14%, transparent);
  /* Schwebende Menü-Leiste: fast deckende Tinte, damit sie auf Weiß nicht grau wirkt. */
  --ink-bar: color-mix(in srgb, var(--ink) 92%, transparent);
  --grid-line: color-mix(in srgb, var(--paper) 6%, transparent);
  --glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --glow-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  /* Zartes Blaugrau aus Feldblau und Papier: Hero läuft unten hinein, der Abschnitt „Für wen“ trägt es. Tinte darauf 14,6 : 1, gedämpfte Tinte 6,3 : 1. */
  --ground-soft: color-mix(in srgb, var(--field) 26%, var(--paper));
  /* Linien der Signal-Welle unten im Hero (leises digitales Element). */
  --wave: color-mix(in srgb, var(--ink) 16%, transparent);
  /* Weiche, diffuse Schatten: nur für schwebende Leisten und angehobene Karten. */
  --shadow-float: 0 14px 34px -16px color-mix(in srgb, var(--ink) 55%, transparent);
  --shadow-lift: 0 22px 44px -30px color-mix(in srgb, var(--ink) 45%, transparent);
  /* Zusage-Karten: ruhend zwei zarte Lagen, beim Überfahren tiefer (die zweite Lage blendet per opacity ein). */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 14px 30px -20px color-mix(in srgb, var(--ink) 26%, transparent);
  --shadow-hover: 0 2px 4px color-mix(in srgb, var(--ink) 7%, transparent), 0 28px 48px -24px color-mix(in srgb, var(--ink) 46%, transparent);

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Bezugsgröße der Signal-Welle im Hero (ihre Strecke und ihr Tempo sind in dieser Schriftgröße gerechnet). */
  --band-font: clamp(17px, 1.5vw, 20px);
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --max: 1280px;
  /* Im Querformat bleibt Text aus Kerbe und Kamera-Ausschnitt heraus (viewport-fit=cover); Flächen reichen weiter bis an den Rand. */
  --gutter: max(clamp(16px, 5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 80px;
  /* App-Leisten unter 960 px: oben das Logo, unten die Tab-Leiste (components.css). */
  --appbar-h: 56px;
  --tabbar-h: 58px;
  --paper-glass: color-mix(in srgb, var(--paper) 98%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 45%, transparent);
  /* Wischleisten blenden rechts aus, wenn es weitergeht (als Maske; die Farbe zählt nur als „deckend“). */
  --fade-end: linear-gradient(90deg, var(--ink) calc(100% - 40px), transparent);
  /* Zugweg beim Wegwischen des Fensters „Menü“; js/nav.js setzt ihn am Fenster. */
  --drag: 0px;
  /* Ein Abstand für alle Abschnitte, ein kleinerer zwischen Kopf und Inhalt eines Abschnitts. */
  --section-pad: clamp(64px, 8vw, 112px);
  --head-gap: clamp(28px, 3.6vw, 48px);
  --col-gap: clamp(32px, 6vw, 88px);
  --card-pad: clamp(18px, 2.4vw, 32px);
  --card-gap: clamp(12px, 1.4vw, 16px);

  /* Kleine Radien: Knöpfe, Chips und Karten höchstens 10 px, keine Pillen. */
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 10px;
  /* Nur die schwebende dunkle Leiste und der Menü-Knopf: deutlich weicher, aber keine Pille. Der Knopf in der Leiste sitzt konzentrisch darin
     (Radius der Leiste minus Innenabstand 6 px). --radius-tile: Kacheln mit Symbol. */
  --radius-bar: 22px;
  --radius-bar-inner: 16px;
  --radius-tile: 12px;
  /* Benachrichtigungen im Hero-Feed: großer Radius wie auf dem Handy. */
  --radius-note: 18px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Umbruch von Zwischentiteln (Karten, Fragen): breit ausgeglichen, schmal füllen sie die Zeile wie Fließtext. */
  --wrap-title: balance;
}

/* Schmal keine unnötigen Umbrüche (Inhaber-Wunsch 10.10.2026): Ausgeglichene Zeilen enden dort weit vor dem Rand. */
@media (max-width: 959px) {
  :root { --wrap-title: pretty; }
}

/* Auf dem Handy fester Seitenrand von 16 px. */
@media (max-width: 599px) {
  :root { --gutter: 16px; --header-h: 72px; }
}

/* ---------- Grundlagen ---------- */

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

/* Dunkle Leinwand: Beim Überziehen unten passt sie zum Fuß. Anker landen unter der schwebenden Leiste. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Fließtext und Listen füllen die Zeile und lassen kein einzelnes Wort in der letzten Zeile („pretty“). „balance“ (alle Zeilen
   gleich lang) nur für große Überschriften und Knöpfe; bei Absätzen enden die Zeilen damit unnötig früh (Inhaber-Wunsch 10.10.2026). */
p, figcaption { text-wrap: pretty; }
li, dd, dt { text-wrap: pretty; }
summary { text-wrap: var(--wrap-title); }

h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Keine einzelnen Wörter in der letzten Zeile einer Überschrift („an.“, „da.“); schmal füllen Zwischentitel die Zeile. */
h3, h4 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; text-wrap: var(--wrap-title); }

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

/* Links im Fließtext: dünn unterstrichen in gedämpfter Farbe, beim Überfahren in Messing.
   Der kleine Radius gilt nur für den Fokusrahmen; Klassen mit eigenem Radius gehen vor. */
a {
  color: inherit;
  border-radius: var(--radius-s);
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 4px;
}

@media (hover: hover) {
  a:hover { text-decoration-color: var(--accent); }
}

/* Fokus nur bei Tastaturbedienung: dezent, mit kleinem Radius und etwas Abstand. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Reiter nach Maus oder Touch (js/tabs.js setzt data-input): kein Rahmen, auch wenn ein Browser :focus-visible einmal zu großzügig auslegt. */
[data-tablist][data-input="pointer"] [role="tab"]:focus-visible { outline: none; }

::selection { background: var(--field); color: var(--ink); }

/* Gold auf Feldblau erreicht nur 3,1 : 1, deshalb dort Fokus in Tinte. */
.surface--field :focus-visible { outline-color: var(--ink); }

/* Nur für Screenreader sichtbar. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 8px;
  left: var(--gutter);
  z-index: 50;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: var(--paper);
  font: 700 17px/1.2 var(--font-head);
  transform: translateY(-200%);
}

.skip:focus { transform: none; }

/* ---------- Raster und Flächen ---------- */

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

/* Alle Abschnitte mit gleichem Abstand. Folgt Papier auf Papier, entfällt der obere, sonst stünde doppelt Luft. */
.section,
.surface { padding-block: var(--section-pad); }

.surface--paper + .surface--paper,
.section + .section { padding-top: 0; }

.band > .wrap { padding-block: var(--section-pad); }
.surface--field { background: var(--tint); }
.band--ink { background: var(--ink); color: var(--paper); }

/* Zarte blaugraue Fläche über die volle Breite (Abschnitt „Für wen“ der Startseite): Sie beginnt in genau dem Ton, in dem der Hero unten endet,
   damit keine Naht entsteht; unten endet sie mit einer feinen Kante, nach halbem Abstand (Inhaber-Wunsch 10.10.2026). */
.surface--soft {
  padding-bottom: calc(var(--section-pad) / 2);
  background: var(--ground-soft);
  border-bottom: 1px solid var(--line);
}

.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--head-gap) var(--col-gap);
}

.split__head { flex: 1 1 280px; max-width: 420px; }
.split__body { flex: 2 1 480px; min-width: 0; max-width: 780px; }

.lead {
  margin-top: 18px;
  color: var(--ink-muted);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

.band--ink .lead { color: var(--field); }

/* Kopf eines Abschnitts: Überschrift und Einleitung, darunter der Inhalt. */
.section-head {
  max-width: 760px;
  margin-bottom: var(--head-gap);
}

.section-head .lead { max-width: 36em; }

/* ---------- Logo ---------- */

/* Wortmarke „Visera“ in Tinte (Inhaber-Wunsch 11.10.2026). */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font: 900 clamp(30px, 2.8vw, 38px)/1 var(--font-head);
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* Lila i-Punkt als Akzent: Das „i“ bleibt ein echter Buchstabe, eingefärbt über die Schrift mit harter Kante zwischen Punkt
   (Violett) und Stamm (Tinte); --logo-dot-cut liegt in der Lücke über der x-Höhe (Archivo 900, Zeilenhöhe 1). */
.logo__i {
  --logo-dot-cut: 29%;
  --logo-dot: var(--accent);
  --logo-stem: var(--ink);
  background: linear-gradient(to bottom, var(--logo-dot) var(--logo-dot-cut), var(--logo-stem) var(--logo-dot-cut));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Im dunklen Menü: helle Wortmarke, Punkt in Lavendel. */
.sheet .logo__i { --logo-dot: var(--accent-light); --logo-stem: var(--paper); }

/* ---------- Knopf ---------- */

/* Reines, flaches Gold (ohne Verlauf) mit weißer Schrift ohne Schatten (fett, feiner Schatten). Kleiner Radius, keine Pille. Beim Überfahren legt sich ein heller Schleier darüber
   (::after unter der Schrift, nur opacity). */
/* Knopftexte, die umbrechen, verteilen sich gleichmäßig auf zwei Zeilen: kein einzelnes Wort („Bau“) und kein Umbruch in
   „E-Commerce“. */
.button { text-wrap: balance; }

.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 32px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--accent-gradient);
  color: var(--on-accent);
  font: 700 19px/1.2 var(--font-head);
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button::after,
.nav .nav__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent-sheen);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .button:hover::after,
.nav .nav__cta:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .button { transition: transform 0.2s var(--ease-out); }
  @media (hover: hover) {
    .motion .button:hover { transform: translateY(-2px); }
  }
  .motion .button::after,
.motion .nav .nav__cta::after { transition: opacity 0.25s var(--ease-out); }
}

.text-link {
  position: relative;
  display: inline-block;
  padding-block: 4px 5px;
  color: var(--ink);
  font: 700 17px/1.3 var(--font-head);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Trefferfläche mindestens 44 px hoch, ohne Lage oder Linien zu verschieben: ein durchsichtiger Rand außerhalb der Innenfläche
   (die Linien sitzen in der Innenfläche), negative Außenabstände gleichen ihn aus. */
.text-link {
  border-block: 7px solid transparent;
  margin-block: -7px;
}

.text-link::before,
.text-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  pointer-events: none;
}

.text-link::before { border-top: 1px solid var(--underline); }

.text-link::after {
  border-top: 1px solid var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.text-link:focus-visible::after { transform: scaleX(1); }

@media (hover: hover) {
  .text-link:hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .text-link::after { transition: transform 0.35s var(--ease-out); }
}

/* ---------- Dunkle Bühne: Raster und Goldschimmer (dunkler Abschlusskasten der Startseite) ---------- */

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

/* Feines Raster, zu den Rändern hin ausgeblendet. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 70% 35%, black 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 85% at 70% 35%, black 25%, transparent 80%);
  pointer-events: none;
}

/* Großer, weicher Goldschimmer; wandert nur mit Bewegung und Skript. */
.stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  left: calc(50% - min(550px, 70vw));
  width: min(1100px, 140vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--glow), var(--glow-soft) 55%, transparent);
  pointer-events: none;
}

@keyframes stage-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(-16%, 12%, 0) scale(1.08); }
  66% { transform: translate3d(8%, 6%, 0) scale(0.94); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .stage::after { animation: stage-drift 24s ease-in-out infinite; will-change: transform; }
}

/* ---------- Wie eine App auf dem Handy ---------- */

/* Kein grauer Blitz beim Antippen (Android), kein Doppeltipp-Zoom; Knöpfe, Leisten und Reiter markieren beim langen Drücken
   keinen Text. Die sichtbare Rückmeldung übernimmt :active weiter unten. */
html { -webkit-tap-highlight-color: transparent; }

a,
button,
summary,
label,
select,
input,
textarea,
[role="tab"] { touch-action: manipulation; }

button,
.button,
.appbar__menu,
.tabbar,
.faq summary,
.sheet__list a {
  -webkit-user-select: none;
  user-select: none;
}

/* Schmal: Beim Über-den-Rand-Ziehen zeigt iOS den Seitengrund; hell wie Kopf und Tab-Leiste statt Tinte. */
@media (max-width: 959px) {
  html { background: var(--paper); }

  /* Nichts darf seitlich überstehen, sonst wackelt die Seite beim Wischen (z. B. der Schatten des Hero-Feeds).
     clip statt hidden: kein eigener Scrollbereich, mitlaufende Leisten (sticky) bleiben intakt. */
  main { overflow-x: clip; }
}

/* Druck-Rückmeldung: Was man antippt, gibt kurz nach (nur transform bzw. opacity). */
.button:active,
.nav .nav__cta:active,
.appbar__menu:active,
.tabbar__item:active,
.faq summary:active,
.sheet__list a:active { transform: scale(0.97); }

.price__main:active { transform: scale(0.99); }

.text-link:active,
.sheet__close:active,
.footer__nav a:active { opacity: 0.6; }

/* ---------- Seitenwechsel wie in einer App (View Transitions; Chrome, Edge, Safari ab 18.2) ---------- */

/* Der Inhalt blendet über; Kopf, Tab-Leiste und die breite Leiste bleiben dabei stehen (view-transition-name in components.css).
   Nur ohne Wunsch nach reduzierter Bewegung; sonst und ohne Unterstützung im Browser ein normaler Seitenwechsel. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: page-out 0.14s ease both; }

  ::view-transition-new(root) { animation: page-in 0.26s var(--ease-out) both; }
}

@keyframes page-out {
  to { opacity: 0; }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------- Einblenden beim Scrollen (js/reveal.js) ---------- */

/* Nur mit Skript und Bewegung: Was beim Laden schon sichtbar ist, markiert das Skript vorher. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }

  .reveal-ready .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Schmal kürzer und ruhiger: Beim Wischen soll Inhalt sofort da sein, nicht erst hochgleiten. */
@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  .reveal-ready .reveal { transition-duration: 0.35s; }
  .reveal-ready .reveal:not(.is-visible) { transform: translateY(8px); }
}

/* ---------- Pakete und Preise ---------- */

.prices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--white);
}

/* Die ganze Karte ist der Knopf: ohne Skript ein Link zum Formular, mit js/packages.js öffnet er das Fenster mit den Inhalten. */
.price__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 32px;
  min-height: 44px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.price__text { flex: 1 1 260px; min-width: 0; }

.price h3 {
  margin-bottom: 4px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.price p { color: var(--ink-muted); font-size: 16px; line-height: 1.55; }

.price__amount {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 800 clamp(22px, 2.2vw, 28px)/1.1 var(--font-head);
  letter-spacing: -0.03em;
}

/* Pfeil: zeigt, dass sich die Karte öffnet. */
.price__amount::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* Auf dem dunkelblauen Balken (Pakete auf der Startseite): Karten in etwas hellerer Tinte,
   Titel und Preis in Papier, Erläuterung in Feldblau. */
.band--ink .price {
  border-color: var(--line-on-ink);
  background: var(--ink-soft);
}

.band--ink .price p { color: var(--field); }

.band--ink .price__amount::after { border-color: var(--accent-light); }

@media (hover: hover) {
  .band--ink .price:hover { border-color: var(--accent-light); }
  .price__main:hover .price__amount::after { transform: translateX(3px) rotate(45deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .price__amount::after { transition: transform 0.25s var(--ease-out); }
}

/* ---------- Kennzahlen („Warum Visera“) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--card-gap);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--white);
}

.fact dt { font: 800 21px/1.25 var(--font-head); letter-spacing: -0.02em; }

.fact dd { color: var(--ink-muted); font-size: 17px; line-height: 1.55; text-wrap: pretty; }

/* ---------- Häufige Fragen ---------- */

/* Keine Karten: volle Breite der Spalte, nur eine feine Haarlinie zwischen den Fragen. */
.faq {
  display: flex;
  flex-direction: column;
}

.faq details { border-bottom: 1px solid var(--line-strong); }
.faq details:first-child { border-top: 1px solid var(--line-strong); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 18px 0;
  font: 600 clamp(18px, 1.5vw, 20px)/1.35 var(--font-head);
  letter-spacing: -0.012em;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:focus-visible { outline-offset: 2px; border-radius: var(--radius-s); }

/* Lange Komposita („Auftragsverarbeitungsvertrag“) dürfen auf schmalen Geräten trennen, kurze Wörter nie. */
.faq__q {
  min-width: 0;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 14 5 5;
  overflow-wrap: break-word;
}

/* Ein schlichtes Plus, das sich beim Öffnen zum Kreuz dreht. */
.faq__plus {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding-bottom: 3px;
  color: var(--ink-muted);
  font: 600 26px/1 var(--font-head);
}

@media (hover: hover) {
  .faq summary:hover .faq__plus { color: var(--accent); }
}

.faq details[open] .faq__plus { transform: rotate(45deg); }

.faq details > p {
  max-width: 42em;
  padding: 0 52px 26px 0;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Die Antwort blendet weich ein und gleitet ein Stück herab (nur opacity und transform). */
@media (prefers-reduced-motion: no-preference) {
  .motion .faq__plus { transition: transform 0.3s var(--ease-out); }
  .motion .faq details[open] > p { transition: opacity 0.35s ease, transform 0.4s var(--ease-out); }

  @starting-style {
    .motion .faq details[open] > p { opacity: 0; transform: translateY(-6px); }
  }
}

@media (max-width: 599px) {
  .faq summary { min-height: 64px; padding-block: 16px; }
  .faq details > p { padding-right: 0; }
}

/* ---------- Abschluss der Startseite ---------- */

/* Dunkle Karte mit runden Ecken, Raster und Goldschimmer. */
.closing { padding-bottom: var(--section-pad); }

.closing__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border-radius: var(--radius-l);
  text-align: center;
}

.closing h2 {
  max-width: 16em;
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.closing__lead {
  max-width: 32em;
  margin-top: 20px;
  color: var(--field);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

.closing .button { margin-top: 32px; }

.closing__contact {
  max-width: 32em;
  margin-top: 24px;
  color: var(--field);
  font-size: 17px;
  line-height: 1.6;
}

.closing__contact a { color: var(--paper); text-decoration-color: var(--accent-light); }

@media (hover: hover) {
  .closing__contact a:hover { text-decoration-color: var(--paper); }
}

/* ---------- Fuß ---------- */

.site-footer {
  background: var(--ink);
  color: var(--field);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
  padding-block: 36px 40px;
  font-size: 16px;
}

.footer__nav { display: flex; flex-wrap: wrap; gap: 0 28px; }

.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (hover: hover) {
  .footer__nav a:hover { color: var(--paper); }
}

/* ---------- Vorschauseite (vor dem Start, hinter der Passwortsperre) ---------- */

.teaser-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* Linksbündig, vertikal mittig; die Breite muss gesetzt sein, sonst schrumpft .wrap im Flex-Layout. */
.teaser {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-block: clamp(64px, 12vh, 160px);
}

.teaser__logo {
  font: 900 clamp(64px, 12vw, 168px)/0.9 var(--font-head);
  letter-spacing: -0.045em;
}

/* Einziger Akzent: ein kurzer Messingstrich unter dem Logo (dekorativ). */
.teaser__logo::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: clamp(28px, 4vw, 44px);
  border-radius: 2px;
  background: var(--accent);
}

.teaser__claim {
  max-width: 24em;
  margin-top: clamp(24px, 3vw, 36px);
  font: 700 clamp(22px, 2.4vw, 30px)/1.25 var(--font-head);
  letter-spacing: -0.02em;
}

.teaser__lead {
  max-width: 34em;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.teaser__contact {
  margin-top: 28px;
  font: 700 19px/1.3 var(--font-head);
}

/* ---------- Rechtliche Seiten ---------- */

/* Rechtliche Seiten (Impressum, Datenschutz): Text über die volle Inhaltsbreite, bündig mit Logo und Leiste (Inhaber-Wunsch 10.10.2026). */
.legal {
  max-width: none;
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: var(--section-pad);
}

/* „Datenschutzerklärung“ muss bei 320 px in eine Zeile passen, notfalls trennt sie. */
.legal h1 {
  margin-bottom: clamp(28px, 3.6vw, 44px);
  font-size: clamp(28px, 8.2vw, 56px);
  letter-spacing: -0.04em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal section + section { margin-top: 32px; }

/* Mehrere Absätze in einem Abschnitt (Hosting, Kontaktformular) lassen etwas Luft. */
.legal p + p { margin-top: 12px; }

/* „Stand: …“ unter der Datenschutzerklärung, leiser als der Text. */
.legal .legal__date { margin-top: 40px; color: var(--ink-muted); font-size: 15px; }

.legal h2 {
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
}