/* passwortheld.de: gesamtes CSS für alle Seiten
   Reihenfolge: Schrift, Tokens, Grundlagen, Kopf, Hero, Abschnitte, Preis, FAQ, Kontakt, Fuß,
   Einwilligungs-Banner, Rechtsseiten, Ratgeber-Seiten, Bewegung */

@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinte: #2A2E39;
  --gruen: #23C7A2;
  --gruen-hell: #5FDDC0;
  --nacht: #212530;
  --nacht-2: #2B303D;
  --weiss: #FFFFFF;
  --flaeche: #F4F5F7;
  --linie: #DFE2E8;
  --leise: #5E6472;
  --leise-dunkel: #C3C8D4;
  --radius: 16px;
  --schatten: 0 18px 50px rgba(20, 24, 34, 0.14);
  --breite: 1120px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 500;
}

[id] { scroll-margin-top: 88px; }
[hidden] { display: none !important; }

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

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.wrap-schmal { max-width: 820px; }

.skip { position: absolute; left: 8px; top: 8px; z-index: 100; padding: 12px 16px; background: var(--weiss); color: var(--tinte); transform: translateY(-300%); }
.skip:focus { transform: none; }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid var(--gruen);
  border-radius: 999px;
  background: var(--gruen);
  color: var(--tinte);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.knopf:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); transform: translateY(-1px); }
.knopf-klein { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.knopf-voll { width: 100%; }
.knopf-linie { background: transparent; border-color: currentColor; color: inherit; }
.knopf-linie:hover { background: rgba(255, 255, 255, 0.1); border-color: currentColor; }

/* Kopf */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.marke { display: inline-flex; align-items: center; padding: 8px 0; }
.marke img, .marke svg { display: block; width: auto; height: 30px; }

/* Animiertes Logo im Kopf der Startseite, Ablauf wie im Instagram-Intro:
   drei Punkte erscheinen wie getippte Passwortzeichen, der vierte duckt sich, springt und wird grün,
   danach kommt der Schriftzug. Alle paar Sekunden hüpft der grüne Punkt noch einmal.
   Reines CSS, läuft ohne JavaScript. Maße in Einheiten der SVG (viewBox 0 0 1449.95 187). */
.logo-lauf { overflow: visible; }
.logo-lauf .lp { transform-box: fill-box; transform-origin: center; animation: logo-punkt 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.logo-lauf .lp1 { animation-delay: 0.15s; }
.logo-lauf .lp2 { animation-delay: 0.35s; }
.logo-lauf .lp3 { animation-delay: 0.55s; }
@keyframes logo-punkt { from { transform: scale(0); } to { transform: scale(1); } }
/* Der Sprungpunkt startet als vierter Punkt in der Reihe: 18,38 weiter links und 80,06 tiefer */
.logo-lauf .lsx { animation: logo-quer 0.5s cubic-bezier(0.3, 0.1, 0.3, 1) 1.2s both; }
.logo-lauf .lsy { animation: logo-hoch 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both; }
@keyframes logo-quer { from { transform: translateX(-18.38px); } to { transform: translateX(0); } }
@keyframes logo-hoch { from { transform: translateY(80.06px); } to { transform: translateY(0); } }
.logo-lauf .lsp { transform-box: fill-box; transform-origin: 50% 100%; animation: logo-vier 0.45s linear 0.75s both, logo-strecken 0.2s ease-out 1.2s forwards, logo-farbe 0.35s ease-out 1.2s both; }
@keyframes logo-vier { 0% { transform: scale(0); } 42% { transform: scale(1.12); } 62% { transform: scale(1); } 78% { transform: scale(1); } 100% { transform: scale(1.1, 0.82); } }
@keyframes logo-strecken { from { transform: scale(0.92, 1.1); } to { transform: scale(1); } }
@keyframes logo-farbe { from { fill: #2A2E39; } to { fill: #23C7A2; } }
.logo-lauf .ll { stroke-dasharray: 1 2; animation: logo-linie 0.3s ease-out both; }
.logo-lauf .ll1 { animation-delay: 1.45s; }
.logo-lauf .ll2 { animation-delay: 1.55s; }
@keyframes logo-linie { from { stroke-dashoffset: -1.1; opacity: 0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
.logo-lauf .lw { animation: logo-wort 0.5s ease-out 1.6s both; }
@keyframes logo-wort { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.logo-lauf .lhop { animation: logo-huepfer 9s ease-in-out 5s infinite; }
@keyframes logo-huepfer { 0%, 7%, 100% { transform: translateY(0); } 3.5% { transform: translateY(-30px); } }
.nav { display: flex; align-items: center; gap: 28px; font-size: 1rem; font-weight: 700; }
.nav a:not(.knopf) { padding: 10px 0; text-decoration: none; }
.nav a:not(.knopf):hover { text-decoration: underline; text-decoration-color: var(--gruen); }
.nav-knopf {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.nav-knopf-balken { position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-knopf-balken::before, .nav-knopf-balken::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-knopf-balken::before { top: -6px; }
.nav-knopf-balken::after { top: 6px; }

/* Hero */
.hero { position: relative; background: var(--nacht); color: var(--weiss); padding: 72px 0 80px; overflow: hidden; }
.hero-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
.dachzeile { margin-bottom: 18px; color: var(--gruen); font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.06; }
.akzent { color: var(--gruen); }
.fest { white-space: nowrap; }
.hero-unter { margin-top: 24px; max-width: 34em; color: var(--leise-dunkel); font-size: 1.25rem; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-hinweis { margin-top: 22px; max-width: 38em; color: var(--leise-dunkel); font-size: 1rem; }

.mock { margin: 0; }
.mock-karte {
  background: var(--weiss);
  color: var(--tinte);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  padding: 22px;
}
.mock-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.mock-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.2rem; font-weight: 800; }
.mock-marke { flex: none; white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: var(--flaeche); color: var(--leise); font-size: 0.875rem; font-weight: 700; }
.mock-liste { list-style: none; margin: 0; padding: 0; }
.mock-liste li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.mock-bild { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--tinte); color: var(--weiss); font-weight: 800; }
.mock-eintrag { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mock-eintrag b { font-weight: 800; }
.mock-eintrag span { color: var(--leise); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-code { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--nacht); color: var(--weiss); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.mock-ring { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--gruen); border-right-color: rgba(255, 255, 255, 0.25); }
.mock-pw { flex: none; color: var(--leise); font-size: 1.5rem; line-height: 1; letter-spacing: 0.06em; }
.mock-fuss { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.mock-fuss span { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linie); color: var(--leise); font-size: 0.875rem; font-weight: 700; }
.mock-fuss span { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.mock-fuss span.aktiv { border-color: var(--tinte); background: var(--tinte); color: var(--weiss); }
/* Bewegte Karte (hero.js mit GSAP): Zeitring als SVG, Codezahl als eigener Block */
.mock-lauf { will-change: transform; }
.mock-zahl { display: inline-block; }
.mock-ring-lauf { width: 18px; height: 18px; border: 0; }
.mock-ring-lauf svg { display: block; width: 18px; height: 18px; transform: rotate(-90deg); }
.mock-ring-spur, .mock-ring-zeit { fill: none; stroke-width: 3; }
.mock-ring-spur { stroke: rgba(255, 255, 255, 0.25); }
.mock-ring-zeit { stroke: var(--gruen); stroke-linecap: round; }
.mock figcaption { margin-top: 12px; color: var(--leise-dunkel); font-size: 0.875rem; text-align: center; }

/* Abschnitte */
.abschnitt { padding: 88px 0; }
.abschnitt-grau { background: var(--flaeche); }
.abschnitt-dunkel { background: var(--nacht); color: var(--weiss); }
.einleitung { margin-top: 18px; max-width: 42em; color: var(--leise); font-size: 1.2rem; }

.karten { display: grid; gap: 20px; margin: 40px 0 0; padding: 0; list-style: none; }
.karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karte { padding: 26px 24px 28px; border-radius: var(--radius); background: var(--weiss); }
.karte p { margin-top: 10px; color: var(--leise); font-size: 1.0625rem; }
.karte-linie { border: 1px solid var(--linie); }
ol.karten { counter-reset: karte; }
ol.karten .karte { counter-increment: karte; }
ol.karten .karte::before {
  content: counter(karte);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--weiss);
  font-weight: 800;
}

/* Kurzvideo im Abschnitt Lösung. Auf der Seite steht nur das Vorschaubild als Link, app.js setzt das Video erst nach
   dem Klick ein. Ohne JavaScript öffnet der Link die Videodatei. Das feste Seitenverhältnis hält den Platz frei,
   damit beim Laden und beim Einsetzen des Videos nichts verrutscht. */
.loesung-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center; }
.film { margin: 0; }
.film-start, .film video { display: block; width: 100%; height: auto; aspect-ratio: 36 / 41; border-radius: 24px; background: var(--flaeche); box-shadow: var(--schatten); }
.film-start { position: relative; overflow: hidden; }
.film-start img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-knopf { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.72), 0 16px 36px rgba(20, 24, 34, 0.28); transition: transform 0.15s ease, background-color 0.15s ease; }
.film-knopf svg { display: block; width: 38px; height: 38px; margin-left: 4px; fill: var(--tinte); }
.film-start:hover .film-knopf { background: var(--gruen-hell); transform: scale(1.06); }
.film-start:focus-visible { outline-offset: 5px; border-radius: 24px; }
/* Erklärvideo direkt unter dem Hero: am Rechner und auf dem Tablet quer (16:9), auf dem Handy hochkant (9:16).
   Die Grenze von 620px steht gleich in app.js (HANDY) und im picture-Element der index.html. */
.abschnitt-video { padding: 64px 0; }
.erklaer-film { max-width: 960px; margin: 0 auto; }
.erklaer-film .film-start, .erklaer-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--flaeche); box-shadow: var(--schatten); }
.erklaer-film picture { display: block; width: 100%; height: 100%; }
.erklaer-film .film-knopf { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.erklaer-film .film-knopf svg { width: 44px; height: 44px; }
/* Ablaufvideo im Abschnitt „So läuft es im Einzelnen“: gleicher Aufbau, linksbündig und so breit wie die Liste der sieben Schritte */
.ablauf-film { max-width: 860px; margin: 28px 0 0; }
/* Video auf einer Ratgeber-Seite: über dem ersten Abschnitt, so breit wie der Text. Kommt aus video_template in _site.json */
.ratgeber-film { margin: 0 0 52px; }
/* Text nur für Vorleseprogramme */
.nur-vorlesen { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.symbol { display: block; width: 44px; height: 44px; margin-bottom: 18px; fill: var(--tinte); }
.symbol-gruen { fill: var(--gruen); }
.symbol-haken { fill: none; stroke: var(--gruen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.hinweis { margin-top: 28px; padding: 20px 24px; border-left: 6px solid var(--gruen); border-radius: 0 var(--radius) var(--radius) 0; background: var(--flaeche); font-size: 1.0625rem; }

.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 44px 0 0; padding: 0; list-style: none; }
.schritte li { position: relative; }
.schritte li::before { content: ""; position: absolute; left: 68px; right: -14px; top: 27px; height: 3px; border-radius: 3px; background: var(--linie); }
.schritte li:last-child::before { display: none; }
.schritt-nr { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%; background: var(--tinte); color: var(--weiss); font-size: 1.4rem; font-weight: 800; }
.schritt-nr-gruen { background: var(--gruen); color: var(--tinte); }
.schritte p { margin-top: 10px; color: var(--leise); font-size: 1.0625rem; }

.zwischen { margin-top: 72px; font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.ablauf-liste { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: ablauf; max-width: 860px; }
.ablauf-liste li { counter-increment: ablauf; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 24px; margin-top: 12px; border-radius: var(--radius); background: var(--weiss); }
.ablauf-liste h4 { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.ablauf-liste h4::before { content: counter(ablauf) ". "; }
.ablauf-liste p { margin-top: 6px; color: var(--leise); font-size: 1.0625rem; }
.wer { justify-self: start; padding: 5px 14px; border-radius: 999px; background: var(--flaeche); border: 2px solid var(--tinte); font-size: 0.9375rem; font-weight: 800; }
.wer-wir { background: var(--gruen); border-color: var(--gruen); }
.wer-sie { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.ablauf-knopf { margin-top: 32px; }

.punkt h3 { color: var(--gruen); }
.punkt p { margin-top: 10px; color: var(--leise-dunkel); font-size: 1.0625rem; }

/* Preis */
.preis-raster { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; margin-top: 40px; align-items: start; }
.preis-karte { padding: 32px; border-radius: 24px; background: var(--nacht); color: var(--weiss); box-shadow: var(--schatten); }
.preis-name { color: var(--gruen); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9375rem; }
.preis-zahl { margin-top: 10px; font-size: 1.25rem; font-weight: 700; }
.preis-zahl span { display: inline-block; margin-right: 6px; font-size: clamp(2.8rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.preis-zusatz { margin: 10px 0 24px; color: var(--leise-dunkel); font-size: 1rem; }
.preis-recht { margin-top: 14px; color: var(--leise-dunkel); font-size: 0.9375rem; text-align: center; }
.rechnung { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 1rem; }
.rechnung caption { padding-bottom: 8px; color: var(--leise-dunkel); font-weight: 800; text-align: left; }
.rechnung th, .rechnung td { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); font-weight: 500; text-align: left; vertical-align: top; }
.rechnung td { padding-left: 16px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechnung tfoot th, .rechnung tfoot td { border-top: 2px solid var(--gruen); font-weight: 800; }
.preis-klein { margin-top: 14px; color: var(--leise-dunkel); font-size: 0.9375rem; }

.preis-listen h3 { margin-top: 28px; }
.preis-listen h3:first-child { margin-top: 0; }
.paket-preis { margin-top: 6px; color: var(--leise); font-size: 1rem; }
.preis-listen .hinweis { margin-top: 18px; }
.liste { margin: 14px 0 0; padding: 0; list-style: none; font-size: 1.0625rem; }
.liste li { position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--linie); }
.liste li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 14px; height: 14px; border-radius: 50%; }
.liste-ja li::before { background: var(--gruen); }
.liste-nein li { color: var(--leise); }
.liste-nein li::before { background: transparent; border: 3px solid #B5BAC6; }

/* FAQ */
.faq { margin-top: 32px; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { position: relative; display: block; padding: 20px 44px 20px 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 3px solid var(--tinte); border-bottom: 3px solid var(--tinte); transform: rotate(45deg); transition: transform 0.15s ease; }
.faq details[open] summary::after { margin-top: -3px; transform: rotate(-135deg); }
.faq details p { padding: 0 44px 22px 0; color: var(--leise); }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.kontakt-wege { margin: 28px 0 0; padding: 0; list-style: none; }
.kontakt-wege li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.kontakt-wege span { flex: none; width: 96px; color: var(--leise); font-size: 1rem; font-weight: 700; }
.kontakt-wege a { display: inline-block; padding: 4px 0; font-weight: 800; overflow-wrap: anywhere; }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 28px; border-radius: 24px; background: var(--weiss); box-shadow: var(--schatten); }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld-breit { grid-column: 1 / -1; }
.feld label { font-size: 1rem; font-weight: 800; }
.optional { color: var(--leise); font-weight: 500; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 2px solid #C4C9D4;
  border-radius: 12px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-size: 1.0625rem;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--tinte); }
.formular-hinweis { margin-top: 12px; color: var(--leise); font-size: 0.9375rem; }
.formular-status { margin-top: 12px; padding: 12px 16px; border-radius: 12px; border-left: 6px solid var(--linie); background: var(--flaeche); font-size: 1rem; font-weight: 700; }
.formular-status-ok { border-left-color: var(--gruen); }
.formular-status-fehler { border-left-color: #C0392B; }
.knopf:disabled { opacity: 0.6; cursor: progress; transform: none; }
/* Falle für automatische Einsendungen: für Menschen unsichtbar und nicht per Tastatur erreichbar */
.falle { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Fuß */
/* Drei Spalten: Marke mit Kontakt, Ratgeber (zweispaltige Liste), Rechtliches */
.fuss { padding: 64px 0 36px; background: var(--nacht); color: var(--leise-dunkel); font-size: 1rem; }
.fuss a { color: var(--weiss); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.7fr) minmax(0, 0.6fr); gap: 40px 64px; align-items: start; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.fuss-marke img { display: block; width: auto; height: 26px; margin-bottom: 16px; }
.fuss-marke p { max-width: 30em; }
.fuss-kontakt { margin: 18px 0 22px; padding: 0; list-style: none; }
.fuss-kontakt a { display: inline-block; padding: 5px 0; font-weight: 700; }
.fuss .knopf { color: var(--tinte); }
.fuss-titel { margin-bottom: 10px; color: var(--gruen); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fuss-spalte ul { margin: 0; padding: 0; list-style: none; }
.fuss-spalte li { break-inside: avoid; }
.fuss-ratgeber ul { columns: 2; column-gap: 40px; }
.fuss-spalte a, .fuss-knopf { display: inline-block; padding: 7px 0; color: var(--leise-dunkel); font-weight: 600; text-decoration: none; }
.fuss-spalte a:hover, .fuss-knopf:hover { color: var(--weiss); text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fuss-knopf { border: 0; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.fuss-ende { display: flex; flex-wrap: wrap; gap: 12px 48px; align-items: flex-start; justify-content: space-between; margin-top: 28px; font-size: 0.9375rem; }
.fussnote { max-width: 56em; }
.fuss-zeile { white-space: nowrap; }

/* Einwilligungs-Banner */
.banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  max-width: 720px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: 0 auto;
  padding: 22px 24px 24px;
  border-radius: 20px;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--linie);
}
.banner h2 { font-size: 1.25rem; }
.banner p { margin-top: 8px; font-size: 1rem; color: var(--leise); }
.banner-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.banner .knopf { min-height: 48px; background: var(--weiss); border-color: var(--tinte); color: var(--tinte); }
.banner .knopf:hover { background: var(--flaeche); }

/* Rechtsseiten */
.recht { padding: 56px 0 88px; }
.recht h1, .recht h2, .recht h3, .recht h4 { hyphens: auto; overflow-wrap: anywhere; text-wrap: wrap; }
.recht h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); }
.recht h2 { margin-top: 48px; font-size: 1.6rem; }
.recht h3 { margin-top: 32px; }
.recht h4 { margin: 24px 0 0; font-size: 1.0625rem; font-weight: 800; }
.recht p, .recht ul, .recht ol { margin-top: 12px; }
.recht p, .recht li { overflow-wrap: anywhere; }
.recht ul { padding-left: 1.3em; }
.recht li { margin-top: 6px; }
.recht-stand { color: var(--leise); }
.recht-zurueck { display: inline-block; margin-top: 44px; padding: 6px 0; font-weight: 800; }
.agb-toc { margin: 28px 0 8px; padding: 20px 22px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.recht .agb-toc__title { margin: 0 0 10px; color: var(--leise); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.agb-toc ol { margin: 0; padding: 0; list-style: none; columns: 260px 2; column-gap: 28px; }
.recht .agb-toc li { margin: 0 0 4px; font-size: 1rem; line-height: 1.4; break-inside: avoid; }
.recht .agb-toc a { display: inline-block; padding: 3px 0; text-decoration: none; }
.recht .agb-toc a:hover { text-decoration: underline; text-decoration-color: var(--gruen); }
.recht h2.agb-part { margin-top: 56px; }
.recht .agb-stand { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 0.9375rem; }

/* Ratgeber-Seiten: entstehen aus _www/Werkzeuge/ratgeber, die Klassen guide-* und crumbs gibt das Werkzeug vor */
.ratgeber-kopf { padding: 36px 0 56px; background: var(--nacht); color: var(--weiss); }
.ratgeber-kopf h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; hyphens: auto; overflow-wrap: break-word; }
.ratgeber-kopf .hero-unter { max-width: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: 20px; color: var(--leise-dunkel); font-size: 0.9375rem; font-weight: 700; }
.crumbs a { display: inline-block; padding: 10px 0; color: var(--weiss); }
.guide-meta { margin-top: 20px; color: var(--leise-dunkel); font-size: 0.9375rem; }
.guide { padding: 56px 0 80px; }
.guide-sec { margin-bottom: 52px; }
.guide-sec:last-child { margin-bottom: 0; }
.guide-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); hyphens: auto; overflow-wrap: break-word; }
.guide-body h3 { margin-top: 30px; }
.guide-body p, .guide-body ul, .guide-body ol { margin-top: 14px; }
.guide-body ul, .guide-body ol { padding-left: 1.3em; }
.guide-body li { margin-top: 6px; }
.guide-body p, .guide-body li { overflow-wrap: break-word; }
.guide-body code { padding: 1px 6px; border-radius: 6px; background: var(--flaeche); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
.guide-note { margin-top: 22px; padding: 18px 22px; border-left: 6px solid var(--gruen); border-radius: 0 var(--radius) var(--radius) 0; background: var(--flaeche); font-size: 1.0625rem; }
.guide-note p:first-child { margin-top: 0; }
/* Breite Tabellen rollen in ihrem Rahmen, die Seite selbst wird nie breiter als der Bildschirm */
.guide-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 1rem; hyphens: auto; }
.guide-table th, .guide-table td { padding: 12px 14px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.guide-table th { background: var(--flaeche); font-weight: 800; }
.guide-table tbody tr:last-child td, .guide-table tbody tr:last-child th { border-bottom: 0; }
.autor { margin-top: 56px; padding: 22px 24px; border: 1px solid var(--linie); border-radius: var(--radius); font-size: 1.0625rem; }
.guide-body .autor p { margin-top: 8px; }
.guide-body .autor .autor-titel { margin-top: 0; color: var(--leise); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ratgeber-angebot { max-width: 560px; margin-top: 32px; }
/* Seite für nicht gefundene Adressen */
.nicht-gefunden .ratgeber-liste { margin-top: 20px; padding-left: 0; }
.nicht-gefunden .ratgeber-liste li { margin-top: 0; }
.nicht-gefunden .knopf { margin-top: 8px; }
.nicht-gefunden .ratgeber-liste + p { margin-top: 32px; }
.guide-related { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.guide-related a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border: 2px solid var(--tinte); border-radius: 999px; background: var(--weiss); font-size: 1.0625rem; font-weight: 800; text-decoration: none; }
.guide-related a:hover { background: var(--tinte); color: var(--weiss); }
/* Ratgeber-Übersicht auf der Startseite */
.ratgeber-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.ratgeber-liste a { display: block; height: 100%; padding: 22px 24px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); text-decoration: none; }
.ratgeber-liste a:hover { border-color: var(--tinte); }
.ratgeber-liste b { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.ratgeber-liste span { display: block; margin-top: 8px; color: var(--leise); font-size: 1.0625rem; }

/* Schmale Bildschirme */
@media (max-width: 980px) {
  .fuss-raster { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); gap: 36px 48px; }
  .fuss-marke { grid-column: 1 / -1; }
  /* minmax(0, …): Die Spalte richtet sich nach dem Bildschirm, nicht nach dem breitesten Inhalt der Karte */
  .hero-raster { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mock { max-width: 520px; }
  .loesung-kopf { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .film { width: 100%; max-width: 420px; margin: 0 auto; }
  .karten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preis-raster, .kontakt-raster { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .nav-knopf { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 20px 30px rgba(20, 24, 34, 0.12);
  }
  .nav.offen { display: flex; }
  .nav a:not(.knopf) { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.125rem; }
  .nav .knopf { margin-top: 16px; }
  .karten-3, .schritte { grid-template-columns: 1fr; }
  .schritte li::before { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 1.0625rem; }
  .abschnitt { padding: 64px 0; }
  .abschnitt-video { padding: 40px 0 48px; }
  .erklaer-film .film-start, .erklaer-film video { aspect-ratio: 9 / 16; }
  .erklaer-film .film-knopf { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .erklaer-film .film-knopf svg { width: 38px; height: 38px; }
  .hero { padding: 48px 0 60px; }
  .hero-unter { font-size: 1.125rem; }
  .hero-knoepfe .knopf { width: 100%; }
  .karten-4 { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr; padding: 22px; }
  .ablauf-liste li { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .ablauf-knopf .knopf { width: 100%; }
  .preis-karte { padding: 24px; }
  .mock-karte { padding: 16px; }
  .mock-code { padding: 6px 10px; font-size: 0.9375rem; }
  .banner-knoepfe { grid-template-columns: 1fr; }
  .faq summary { font-size: 1.125rem; }
  .ratgeber-kopf { padding: 24px 0 44px; }
  .guide { padding: 40px 0 60px; }
  .guide-table { min-width: 520px; font-size: 0.9375rem; }
  .guide-table th, .guide-table td { padding: 10px; }
  .ratgeber-liste { grid-template-columns: 1fr; }
  .guide-related a { width: 100%; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 32px; }
  .fuss-ratgeber ul { columns: 1; }
  .fuss-marke .knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .faq summary::after, .film-knopf { transition: none; }
  .logo-lauf * { animation: none !important; }
  .knopf:hover, .film-start:hover .film-knopf { transform: none; }
}