/* ============================================================================
   Stormy Ac -- Grundlage fuer Startseite, Preise, Download-Seite und Dashboard.

   Richtung "Schwarz" (September 2026). Erst war alles schwarz mit Glas, rotem
   Gluehen, grossen runden Karten und Pillen mit Punkt -- das hat jeder mit
   napse.ac verwechselt. Dann kam "Kontrast" mit hellen Arbeitsflaechen; Weiss
   wollte der Betreiber nicht. Geblieben ist, was die Verwechslung ausgemacht hat,
   draussen zu lassen:
   - Kein Glas, kein Leuchten, keine Pillen, kleine Radien. Ein Zustand ist ein
     Wort mit einem kleinen Quadrat davor, eine Zahl ist eine Zahl.
   - Alle Knoepfe sind gleich: schwarz mit feiner Kante. Keine rote Flaeche.
   - Rot ist die Farbe des Logos und steht nur noch fuer eine Warnung (Belastet,
     Punkte, Fehler). Als Knopf- oder Stimmungsfarbe taugt es nicht.
   - Die Tiefe entsteht aus drei Stufen Schwarz und aus Haarlinien, nicht aus
     Schatten und Licht.
   Jeder Baustein benutzt nur Tokens. Die Anker (Kopfleiste, Seitenleiste,
   Fusszeile) sitzen eine Stufe tiefer als die Flaeche.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ------------------------------------------------------- */
:root, .hell {
  --bg: #0a0a0b;
  --canvas: #0a0a0b;
  --canvas-deep: #060607;

  --surface: #111113;
  --surface-raised: #161618;
  --surface-hover: #1c1c1f;
  --surface-glass: #111113;

  --fg: #f2f2f3;
  --fg-1: #d8d8db;
  --fg-2: #a0a0a7;
  --fg-3: #6c6c74;

  --line: #212125;
  --line-strong: #2b2b30;
  --line-hover: #3b3b41;

  --accent: #e5262b;
  --accent-2: #c81e23;
  --accent-light: #ff5a5f;
  --accent-deep: #8f0f13;
  --accent-soft: rgba(229, 38, 43, .10);
  --accent-line: rgba(255, 90, 95, .32);

  --mint: #45c08f;
  --mint-soft: rgba(69, 192, 143, .10);
  --mint-line: rgba(69, 192, 143, .28);
  --warn: #e3ae3f;
  --warn-dot: #e3ae3f;
  --warn-soft: rgba(227, 174, 63, .10);
  --warn-line: rgba(227, 174, 63, .28);
  --high: #e8864a;
  --crit: #ff6b70;

  /* Ein Knopf, ueberall gleich. */
  --knopf: #000000;
  --knopf-hover: #161618;

  --shadow-1: none;
  --shadow-2: 0 18px 44px -24px rgba(0, 0, 0, .9);
  --shadow: var(--shadow-2);

  color-scheme: dark;
}

/* Die Anker: eine Stufe tiefer als die Flaeche, mit etwas leiserer Linie. */
.dunkel, .site-header, .mobile-panel, .site-footer, .dash-side, .dash-burger {
  --bg: #060607;
  --canvas: #060607;
  --line: #1a1a1d;
  --line-strong: #26262a;
  --surface-hover: #151517;
  --surface-raised: #121214;
  color: var(--fg);
}

:root {
  --r-btn: 8px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  /* Bleibt definiert, damit alte Inline-Angaben gueltig bleiben. Benutzt wird es
     fuer keine Flaeche mehr. */
  --r-pill: 999px;

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --w-hero: 1180px;
  --w-main: 1104px;
  --w-tight: 880px;
  --pad: 32px;
  --gap-section: 104px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* die Kopfleiste ist 64 Pixel hoch */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
.mono { font-family: var(--font-mono); }
.dim { color: var(--fg-3); }

.deco { pointer-events: none; }

/* hidden heisst unsichtbar, auch wenn ein Inline-Stil display setzt. Sonst stand
   unter jeder kurzen Tabelle die leere Blaetterleiste -- auf Schwarz fiel das nicht
   auf, auf Weiss schon. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--fg); color: var(--canvas); padding: 10px 16px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.shell { width: 100%; max-width: var(--w-main); margin: 0 auto; padding: 0 var(--pad); }
.shell-hero { max-width: var(--w-hero); }
.shell-tight { max-width: var(--w-tight); }

section { position: relative; }
.section-pad { padding: var(--gap-section) 0; }

/* ---------- Kleine Bausteine --------------------------------------------- */
/* Eine Beschriftung ueber einer Zahl oder einem Abschnitt. Schrift statt Rahmen. */
.micro-label {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3); font-weight: 500;
}

/* Frueher eine Pille mit Rahmen und Punkt. Jetzt eine Textzeile: Wer sie lesen will,
   liest sie, und sonst stoert sie nicht. */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-2);
}
a.pill:hover { color: var(--fg); }
.pill .dot { width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); flex-shrink: 0; }
.pill .dot.mint { background: var(--mint); }
.pill svg { width: 14px; height: 14px; flex-shrink: 0; }

.minitag {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3); white-space: nowrap;
}

/* ---------- Knoepfe ------------------------------------------------------ */
/* Ein Knopf fuer alles: schwarz, feine Kante, helle Schrift. Hauptaktion und
   Nebenaktion unterscheiden sich nicht in der Farbe -- der Betreiber wollte die
   Knoepfe einheitlich, und rote Flaechen waren Teil der Verwechslung mit napse.ac.
   Die Klassen .btn-primary und .btn-accent bleiben bestehen und sehen gleich aus. */
.btn, .btn-primary, .btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-btn);
  border: 1px solid var(--line-strong); background: var(--knopf);
  color: var(--fg); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover, .btn-primary:hover, .btn-accent:hover { background: var(--knopf-hover); border-color: var(--line-hover); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Download-Seite: der PIN als Knopf, ein Klick kopiert ihn (pin-kopieren.js). */
.pin-kopieren {
  display: block; width: 100%; padding: 18px 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 34px; letter-spacing: 8px; color: var(--fg);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pin-kopieren:hover { border-color: var(--line-hover); background: var(--surface-hover); }
.pin-kopieren:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 2px; }
.pin-kopieren.kopiert { border-color: var(--mint-line); }
.pin-hinweis { color: var(--fg-3); font-size: 12px; line-height: 1.6; margin: 8px 0 18px; min-height: 19px; }

/* ---------- Karte -------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  position: relative; box-shadow: var(--shadow-1);
}
.card-hover { transition: border-color .2s var(--ease); }
.card-hover:hover { border-color: var(--line-hover); }

/* ---------- 1. Kopfleiste ------------------------------------------------ */
/* Eine durchgehende dunkle Leiste statt einer schwebenden Glaskapsel. Sie steht
   fest oben, ohne Unschaerfe darunter -- die war Teil des Glas-Eindrucks. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: 64px; display: flex; align-items: center; gap: 24px;
  padding: 0 max(var(--pad), calc((100% - 1152px) / 2));
  background: var(--bg); border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.compact { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Das Zeichen steht frei. Die Kachel darum war ein weiteres Kaestchen mit Rahmen. */
.brand-tile { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; object-fit: contain; }
.brand-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-links a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-btn);
  font-size: 13.5px; font-weight: 500; color: var(--fg-2);
  transition: color .18s var(--ease), background .18s var(--ease);
}
/* In der Leiste reicht das Wort; Symbole gibt es im mobilen Menue. */
.nav-links a svg { display: none; }
.nav-links a:hover { color: var(--fg); background: var(--surface-hover); }

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-actions .btn { height: 36px; padding: 0 14px; font-size: 13px; box-shadow: none; }
/* Kopfleiste der Unterseiten: nur Zeichen und Sprachwahl, die steht rechts. */
.kopf-sprache { margin-left: auto; display: flex; }

.nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; cursor: pointer;
  margin-left: auto;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .close-ic { display: none; }
.nav-toggle[aria-expanded="true"] .open-ic { display: none; }
.nav-toggle[aria-expanded="true"] .close-ic { display: block; }

.mobile-panel {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 8px var(--pad) 16px; display: none;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .8);
}
.mobile-panel.open { display: block; }
/* Nur die Menuezeilen, nicht die Knoepfe darunter: Die Zeilenregel galt vorher auch
   fuer sie, gab ihnen graue Schrift und nahm ihnen die untere Kante. */
.mobile-panel a:not(.btn) {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px; min-height: 44px;
  font-size: 15px; color: var(--fg-2); border-bottom: 1px solid var(--line);
}
.mobile-panel a:not(.btn) svg { width: 17px; height: 17px; color: var(--fg-3); }
.mobile-panel a:not(.btn):hover, .mobile-panel a:not(.btn):focus-visible { color: var(--fg); }
.mobile-panel .panel-actions { display: grid; gap: 8px; padding-top: 14px; }
.mobile-panel .btn { width: 100%; height: 44px; }

/* ---------- 2. Titelbereich ---------------------------------------------- */
/* Ein mittig gesetzter Block, der sich von oben nach unten liest: Kennung, Name,
   ein Absatz, zwei Knoepfe; darunter die vier Zahlen in einer Reihe. Vorher standen
   Text, Zahlen und Knoepfe in drei Spalten mit Trennlinien und darunter ein
   Beispielbefund als Tabelle -- jedes Teil ordentlich, zusammen unruhig. Links
   ausgerichtet blieb die rechte Haelfte leer und wirkte unfertig; mittig steht der
   Block im Gleichgewicht. Die Abschnitte darunter bleiben links in ihrem Raster. */
.hero { background: var(--bg); padding: 96px 0 88px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-bg, .hero-stempel, .orb, .star, .hero-noise, .hero-vignette { display: none; }

.hero-text { max-width: 640px; margin: 0 auto; text-align: center; }
.hero-kennung { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 18px; }
.hero h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.05em; margin-bottom: 22px; }
.hero-lead { font-size: 17px; line-height: 1.7; color: var(--fg-2); max-width: 56ch; margin: 0 auto; }
.hero-lead strong { color: var(--fg); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.hero-cta .btn { height: 44px; padding: 0 18px; font-size: 14px; }

/* Vier Zahlen in einer Reihe, getrennt wie die Schritte im Ablauf. */
.hero-kennzahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 860px; margin: 72px auto 0;
  border-top: 1px solid var(--line-strong); text-align: center;
}
.hero-kennzahlen > div { padding: 24px 12px 0; min-width: 0; }
.hero-kennzahlen > div + div { border-left: 1px solid var(--line); }
.hero-kennzahlen .w { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; line-height: 1; }
/* Die Beschriftung darf umbrechen: In manchen Sprachen ist sie doppelt so lang wie im
   Deutschen und liefe auf dem Telefon sonst aus ihrer Spalte. */
.hero-kennzahlen .l { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-top: 10px; text-wrap: balance; }

/* Zustand ohne Behaelter: ein kleines Quadrat und das Wort. Dieselbe Form wie im
   Dashboard -- ein Zustand sieht ueberall gleich aus. */
.zst { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.zst i { width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; flex-shrink: 0; }
.zst.rot { color: var(--accent-light); }
.zst.gelb { color: var(--warn); }
.zst.gruen { color: var(--mint); }

/* ---------- Abschnittskopf ----------------------------------------------- */
/* Nummer in der Marginalie, Ueberschrift im Satzspiegel: eine Akte hat nummerierte
   Abschnitte, eine Verkaufsseite hat Kacheln. */
.abschnitt {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0 24px;
  padding-top: 20px; border-top: 1px solid var(--line-hover); margin-bottom: 48px;
}
.abschnitt-text { min-width: 0; }
.abschnitt-nr { font-size: 12px; letter-spacing: .08em; color: var(--fg-3); padding-top: 4px; font-weight: 600; }
.abschnitt-marke { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.abschnitt h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.045em; margin-bottom: 14px; }
.abschnitt p { color: var(--fg-2); font-size: 16px; line-height: 1.75; max-width: 62ch; }

/* Abwechselnd zwei Stufen Schwarz, damit die Abschnitte ohne Rahmen auseinanderfallen. */
.section-pad { border-bottom: 1px solid var(--line); }
#workflow { background: #0e0e10; }

/* ---------- 3. Pruefbereiche als Verzeichnis ----------------------------- */
/* Je Bereich eine Zeile: Nummer, Name, ein Satz. Das kleine Quadrat vor der Nummer
   traegt die Farbe des Bereichs. Untertitel und Modullisten sind entfallen, ebenso
   die drei Spalten darunter ("Ein Score", "Volle Fundstellen", "Keine Blackbox"). */
.areas { border-top: 1px solid var(--line-strong); }
.area {
  display: grid; grid-template-columns: 78px minmax(0, .7fr) minmax(0, 2fr); gap: 0 24px;
  padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
/* Quadrat und Nummer als Text, nicht als Flex: So liegt die Nummer auf derselben
   Grundlinie wie Name und Satz. */
.area-num { font-size: 12px; letter-spacing: .08em; color: var(--fg-3); font-weight: 600; white-space: nowrap; }
.area-num::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 1.5px; background: var(--tone); margin-right: 10px; vertical-align: 1px; }
.area h3 { font-size: 21px; font-weight: 800; letter-spacing: -.035em; }
.area p { font-size: 15px; color: var(--fg-2); line-height: 1.65; }

/* ---------- 4. Ablauf in drei Schritten ---------------------------------- */
/* Drei Spalten, getrennt durch Haarlinien: Nummer, Schritt, ein oder zwei Saetze.
   Vorher sechs Zeilen untereinander; drei Schritte erfasst man nebeneinander mit
   einem Blick. */
.workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.wstep { padding: 26px 28px 6px 0; min-width: 0; }
.wstep + .wstep { padding-left: 28px; border-left: 1px solid var(--line); }
.wstep-n { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--fg-3); }
.wstep h3 { font-size: 19px; margin: 18px 0 8px; }
.wstep p { font-size: 15px; color: var(--fg-2); line-height: 1.7; }

/* ---------- 5. Preise (Preisseite) -------------------------------------- */
.tarife { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-hover); margin-bottom: 60px; }
.tarif { padding: 30px 30px 30px 0; min-width: 0; }
.tarif + .tarif { padding-left: 30px; border-left: 1px solid var(--line); }
.tarif-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.tarif-marke { color: var(--fg); font-weight: 600; }
.tarif-preis { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -.045em; margin: 16px 0 6px; }
.tarif-note { font-size: 14px; color: var(--fg-2); margin-bottom: 22px; }
.tarif .btn { width: 100%; justify-content: center; }
.tarif-hebt { position: relative; }
.tarif-hebt::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--fg); }

.enthalten { border-top: 1px solid var(--line); padding-top: 26px; }
.enthalten h3 { font-size: 17px; margin-bottom: 18px; }
.enthalten ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 34px; }
.enthalten li { position: relative; padding-left: 17px; font-size: 14.5px; color: var(--fg-2); line-height: 1.6; }
.enthalten li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 1px; background: var(--fg-3); }
.enthalten-note { margin-top: 26px; font-size: 13.5px; color: var(--fg-3); }
.enthalten-note a { color: var(--fg); margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 6. Fragen ---------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line-hover); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 0 24px;
  width: 100%; text-align: left; padding: 22px 0; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
}
.faq-nr { font-size: 11px; letter-spacing: .08em; color: var(--fg-3); }
.faq-q .qt { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }
.faq-q:hover .qt { color: var(--fg-1); }
.faq-chev { width: 16px; height: 16px; color: var(--fg-3); transition: transform .3s var(--ease); }
.faq-item[data-open="true"] .faq-chev { transform: rotate(180deg); color: var(--fg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .38s var(--ease); }
.faq-item[data-open="true"] .faq-a { max-height: 420px; }
.faq-a-inner { padding: 0 0 24px 102px; color: var(--fg-2); font-size: 15px; line-height: 1.75; max-width: 74ch; }

/* ---------- 7. Fusszeile ------------------------------------------------- */
/* Zwei Zeilen: links Zeichen und ein Satz, rechts Rechtliches und Vermerk. */
.site-footer { background: var(--bg); padding: 44px 0 40px; }
.footer-zeilen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 32px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand img, .footer-brand svg { width: 26px; height: 26px; object-fit: contain; }
.footer-brand span { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.footer-satz { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; }
.footer-vermerk { font-size: 12.5px; color: var(--fg-3); text-align: right; }
.footer-legal { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; }
.footer-legal a { color: var(--fg-3); }
.footer-legal a:hover { color: var(--fg); }
.footer-legal span { color: var(--fg-3); opacity: .4; }

/* ---------- Bewegung ----------------------------------------------------- */
/* Nur Einblenden, ohne Unschaerfe. Die Unschaerfe gehoerte zum Glas. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ---------- Schmale Fenster ---------------------------------------------- */
@media (max-width: 1080px) {
  :root { --pad: 24px; --gap-section: 84px; }
  /* Die Verweise und Knoepfe wandern ins Menue; die Sprachwahl bleibt in der Leiste,
     neben dem Menueknopf -- wer die Seite nicht lesen kann, soll sie nicht erst im
     Menue suchen muessen. */
  .site-header { gap: 10px; }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-actions > .btn { display: none; }
  .nav-toggle { display: flex; margin-left: 0; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; --gap-section: 64px; }
  .abschnitt { grid-template-columns: 1fr; gap: 0; }
  .abschnitt-nr { display: inline; padding: 0; margin-right: 10px; }
  .abschnitt-marke { display: inline; }
  .abschnitt h2 { margin-top: 14px; }

  .hero { padding: 56px 0 56px; }
  .hero-lead { font-size: 16px; }
  /* Beide Knoepfe gleich breit untereinander, statt dass einer umbricht. */
  .hero-cta .btn { flex: 1 1 100%; }
  /* Die Zahlen zwei mal zwei, ohne senkrechte Linien. */
  .hero-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .hero-kennzahlen > div, .hero-kennzahlen > div + div { padding: 20px 8px 4px; border-left: 0; }

  .area { grid-template-columns: 1fr; gap: 8px; }

  /* Die drei Schritte untereinander; die senkrechten Haarlinien werden waagerecht. */
  .workflow { grid-template-columns: 1fr; }
  .wstep, .wstep + .wstep { padding: 22px 0; border-left: 0; }
  .wstep + .wstep { border-top: 1px solid var(--line); }
  .wstep-n { font-size: 26px; }
  .wstep h3 { margin-top: 12px; }

  .tarife { grid-template-columns: 1fr; }
  .tarif { padding: 26px 0; }
  .tarif + .tarif { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .faq-q { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 14px; }
  .faq-a-inner { padding-left: 0; }

  /* Fuss untereinander: Zeichen, Satz, Rechtliches, Vermerk. */
  .footer-zeilen { grid-template-columns: 1fr; gap: 12px; }
  .footer-satz { order: 1; }
  .footer-legal { order: 2; justify-content: flex-start; }
  .footer-vermerk { order: 3; text-align: left; }
}

/* ---------- Ruhigere Bewegung ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .faq-a { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Tastaturfokus ------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fg-2); outline-offset: 2px; border-radius: 6px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ---------- Rechtszeile auf den Unterseiten ------------------------------ */
/* §5 DDG verlangt das Impressum staendig verfuegbar, also von jeder Seite aus. */
.legal-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--fg-3);
}
.legal-foot a { color: var(--fg-3); text-decoration: none; }
.legal-foot a:hover { color: var(--fg); }
.legal-foot span { opacity: .4; }