/* gocreate Generatoren – Designsystem
   Basis: Brand System GoCreate (Outfit, Beere #7F2052, Sonne #FCD757, Papier #FBFAF8)
   Neu aufgebaut 20.07.2026 nach den Design-Vorlagen in ../design-vorlagen/
   Farbverhaeltnis-Richtwert: ~70% neutral, 25% Beere, 5% Sonne.
   Kleine Icons: Lucide (lucide.dev, ISC-Lizenz), als Inline-SVG im HTML. */

/* Outfit selbst gehostet (Variable Font, OFL-Lizenz) – keine Google-Fonts-Ladung,
   damit keine IP-Uebertragung an Google-Server (Datenschutz). */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/outfit-variable.woff2") format("woff2");
}

/* ---------- 1. Tokens (Design-System) ----------
   EINE Quelle fuer Farben, Typo, Abstaende, Form. Neue Seiten/Komponenten
   IMMER mit diesen Tokens bauen, keine neuen harten Werte erfinden.
   Die Werte spiegeln den gewachsenen Bestand (Stand 24.07.2026) – dadurch
   war die Einfuehrung optisch neutral. Aenderung hier wirkt ueberall. */

:root {
  /* --- Farben: Marke --- */
  --beere: #7F2052;             /* Primaerfarbe: Buttons, Links, Akzente */
  --beere-dunkel: #641941;      /* Hover/aktiv, dunkler Footer */
  --sonne: #FCD757;             /* Akzent (sparsam, ~5%): Badges, Footer-Titel */
  --sonne-dunkel: #e6b32e;      /* Sonne als Text auf hellem Grund (Lesbarkeit) */
  --sonne-hell: #FDF4DC;        /* sanfte Gelb-Flaeche fuer Hinweis-Boxen */
  --rosa: #F6E9EA;              /* warmes Rosé wie die Blobs der Haupticons */
  --rosa-tief: #EFDCDF;         /* Blobs, staerkere Rosé-Flaechen */

  /* --- Farben: Flaechen & Text --- */
  --papier: #FDF9F4;            /* Seitenhintergrund */
  --weiss: #fff;                /* Karten */
  --text: #231a1f;              /* Fliesstext, Ueberschriften */
  --text-sanft: #4a4144;        /* Untertitel, Beschreibungen */
  --text-leise: #857a7e;        /* Metazeilen, Hinweise, Labels */
  --linie: #ece4e8;             /* Rahmen, Trennlinien */

  /* --- Farben: Status --- */
  --gruen: #2fa36b;             /* verfuegbar, Erfolg */
  --warn: #c0392b;              /* Fehler, Validierung */

  /* --- Typo-Skala (px, gewachsener Bestand) --- */
  --schrift-xxs: 12px;          /* Kleinstes: Rechtshinweise */
  --schrift-xs: 12.5px;         /* Labels, Uppercase-Titel */
  --schrift-s: 13.5px;          /* Metazeilen, Checkbox-Text */
  --schrift-m: 14.5px;          /* Standard-UI: Formulare, Teaser */
  --schrift-l: 15.5px;          /* Buttons, betonte UI */
  --schrift-fliess: 16.5px;     /* Fliesstext in Artikeln/Rechtsseiten */
  --schrift-xl: 18px;           /* Untertitel, kleine Ueberschriften */

  /* --- Schriftgewichte (Outfit variable 300–700) --- */
  --fett-normal: 400;
  --fett-mittel: 500;           /* UI-Labels, Links im Footer */
  --fett-halb: 600;             /* Ueberschriften, Buttons */

  /* --- Abstands-Skala --- */
  --abstand-xxs: 4px;
  --abstand-xs: 8px;
  --abstand-s: 12px;
  --abstand-m: 18px;
  --abstand-l: 26px;
  --abstand-xl: 40px;
  --abstand-xxl: 64px;          /* Sektionsabstand */

  /* --- Layout-Breiten --- */
  --inhalt-breite: 1200px;      /* .container */
  --inhalt-polster: 24px;       /* seitliches Polster */
  --kopf-hoehe: 66px;           /* klebender Header (Desktop) – für sticky-Spalten */
  --text-breite: 860px;         /* Lesebreite Rechtsseiten/Artikel, alle Danke-Seiten */
  --karten-breite-schmal: 780px;/* einzige erlaubte Abweichung: Formularkarte /feedback/ */
  --karte-polster: 26px;        /* Innenabstand Karten */

  /* --- Form --- */
  --radius-klein: 8px;
  --radius: 10px;
  --radius-gross: 16px;
  --radius-rund: 999px;         /* Pillen, Badges */
  --schatten-sanft: 0 2px 10px rgba(127, 32, 82, 0.05);
  --schatten-karte: 0 12px 34px rgba(127, 32, 82, 0.09);
  --schatten-knopf: 0 6px 18px rgba(127, 32, 82, 0.28);

  /* --- Bewegung & Fokus --- */
  --uebergang: .2s ease;
  --fokus-ring: 2px solid var(--beere);
  --fokus-abstand: 2px;
}

/* Tastatur-Fokus einheitlich sichtbar (Barrierefreiheit) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--fokus-ring);
  outline-offset: var(--fokus-abstand);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 2. Basis ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", -apple-system, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--papier);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 0 var(--inhalt-polster);
}

/* Kicker: kleine Beere-Ueberzeile in Grossbuchstaben */
.kicker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beere);
}

/* Inline-Icon (Lucide-SVG) erbt Textfarbe */
.ikon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.2em;
  stroke: currentColor;
}

/* Gelber Check-Kreis (Listenpunkte wie in den Vorlagen) */
.check-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--sonne);
  color: var(--weiss);
}

.check-kreis .ikon { width: 12px; height: 12px; }

.check-kreis.umriss {
  background: transparent;
  border: 2px solid var(--sonne);
  color: var(--sonne);
}

/* Punktraster als Deko (Beere-Punkte) */
.punkte {
  position: absolute;
  width: 120px;
  height: 90px;
  background-image: radial-gradient(rgba(127, 32, 82, 0.35) 2px, transparent 2.5px);
  background-size: 18px 18px;
  pointer-events: none;
}

/* ---------- 3. Knoepfe ---------- */

.knopf,
.cta-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: var(--schrift-l);
  font-weight: 500;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
}

.knopf:hover { border-color: var(--beere); color: var(--beere); }

.knopf.primaer,
.cta-knopf {
  background: var(--beere);
  color: var(--weiss);
  border-color: var(--beere);
  box-shadow: var(--schatten-knopf);
}

.knopf.primaer:hover,
.cta-knopf:hover {
  background: var(--beere-dunkel);
  color: var(--weiss);
  transform: translateY(-1px);
}

.knopf:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

/* Gelber Umriss-Knopf („Bald verfuegbar") */
.knopf.sonne-umriss {
  border: 1.5px solid var(--sonne);
  background: var(--weiss);
  color: var(--sonne-dunkel);
  box-shadow: none;
  cursor: default;
}

.knopf.sonne-umriss:hover { transform: none; }

/* Heller Knopf auf dunklem Grund */
.knopf-hell {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--sonne);
  color: var(--text);
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.15s ease;
}

.knopf-hell:hover { background: #f5c93a; transform: translateY(-1px); }

/* ---------- 4. Header ---------- */

header.site-header {
  padding: 15px 0;
  border-bottom: none;
  background: var(--beere);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(100, 25, 65, 0.22);
}

header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Logo als Bild (Variante D: zweizeiliges helles Logo für den Beere-Header). */
.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.site-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.site-nav a {
  font-size: var(--schrift-m);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  margin-left: 20px;
  /* Menuepunkte bleiben als Ganzes zusammen: zwischen 720 und 860 px bricht
     die Nav sonst mitten im Namen um („Über" / „gocreate your business").
     Gefunden 25.08.2026 bei der Tablet-Pruefung. */
  white-space: nowrap;
}

.site-nav a:hover, .site-nav a.aktiv { color: #fff; }

/* Burger-Button: nur auf schmalen Viewports sichtbar (siehe Media-Query) */
.nav-toggle { display: none; }

/* ---------- 5. Hero ---------- */

.hero {
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
}

.hero .container { position: relative; }

.hero-split {
  display: grid;
  gap: 44px;
  align-items: center;
}

.hero h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  max-width: 640px;
  animation: einblenden 0.5s ease both;
}

.hero h1 em {
  font-style: normal;
  color: var(--beere);
  display: block;
}

/* Unterzeile direkt unter der H1: sagt in einem Halbsatz, wofuer das Werkzeug
   genau da ist (z. B. "Die Datenschutzerklaerung fuer deine Website").
   Global, damit jede Generator-Seite dieselbe Optik hat. */
.hero p.hero-unterzeile {
  margin-top: 14px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  max-width: 560px;
  animation: einblenden 0.5s ease 0.08s both;
}

.hero p.hero-unterzeile + p.untertitel { margin-top: 14px; }

.hero p.untertitel {
  margin-top: 20px;
  font-size: 17.5px;
  font-weight: 400;
  color: var(--text-sanft);
  max-width: 560px;
  animation: einblenden 0.5s ease 0.12s both;
}

.hero .cta-knopf { margin-top: 28px; animation: einblenden 0.5s ease 0.18s both; }

.hero .hinweis-klein {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-leise);
  animation: einblenden 0.5s ease 0.24s both;
}

/* Bild-Spalte: Illustration bringt ihren eigenen Beere-Blob mit */
.hero-visual {
  position: relative;
  animation: einblenden 0.6s ease 0.2s both;
}

.hero-visual img { display: block; width: 100%; }

/* Vertrauens-Zeile unter dem CTA (Icon + zwei Zeilen Text) */
.zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 34px;
  animation: einblenden 0.5s ease 0.3s both;
}

.zahl {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.zahl strong, .zahl span { white-space: nowrap; }

.zahl .check-kreis.umriss { margin-top: 3px; }

.zahl strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.zahl span {
  font-size: var(--schrift-s);
  font-weight: 400;
  color: var(--text-leise);
}

/* ---------- 6. Sektions-Koepfe ---------- */

.sektion-kopf {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 38px;
}

.sektion-kopf h2 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 6px;
}

.sektion-kopf p {
  margin-top: 10px;
  font-size: var(--schrift-fliess);
  font-weight: 400;
  color: var(--text-sanft);
}

/* ---------- 7. Tool-Karten (Portal) ---------- */

.tool-sektion { padding-top: 40px; padding-bottom: 26px; }

.generator-karten {
  display: grid;
  gap: 20px;
  padding: 8px 0 30px;
}

.generator-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 26px 26px 0;
  box-shadow: var(--schatten-sanft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  animation: einblenden 0.5s ease both;
}

.generator-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(127, 32, 82, 0.35);
  box-shadow: var(--schatten-karte);
}

.generator-karte.bald:hover {
  transform: none;
  border-color: var(--linie);
  box-shadow: var(--schatten-sanft);
}

.generator-karte:nth-child(2) { animation-delay: 0.07s; }
.generator-karte:nth-child(3) { animation-delay: 0.14s; }
.generator-karte:nth-child(4) { animation-delay: 0.21s; }

.generator-karte .tool-bild {
  width: 132px;
  height: 132px;
  align-self: center;
  margin-bottom: 8px;
}

.generator-karte h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.generator-karte > p {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.6;
  margin-bottom: 14px;
}

.check-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 8px;
}

.check-liste li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--schrift-s);
  font-weight: 400;
  color: var(--text-sanft);
}

.check-liste .check-kreis { width: 17px; height: 17px; margin-top: 2px; }
.check-liste .check-kreis .ikon { width: 10px; height: 10px; }

.generator-karte .knopf {
  width: 100%;
  margin-top: auto;
  font-size: var(--schrift-m);
  padding: 12px 18px;
}

/* Status-Zeile am Kartenfuss, durch Linie abgetrennt */
.karten-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% + 52px);
  margin: 18px -26px 0;
  padding: 13px 26px;
  border-top: 1px solid var(--linie);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-sanft);
}

.status-punkt {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--gruen);
}

.status-punkt.gelb { background: var(--sonne); }

/* ---------- 8. Oesterreich-Band ---------- */

.at-band {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--rosa);
  border-radius: var(--radius-gross);
  padding: 22px 28px;
  margin: 10px 0 56px;
}

.at-band .flagge {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-rund);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(127, 32, 82, 0.18);
}

.at-band .band-text { flex: 1 1 340px; }

.at-band strong { font-size: var(--schrift-l); font-weight: 600; }

.at-band p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sanft);
}

.at-band p b { font-weight: 500; color: var(--beere); }

.at-band .band-link {
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--beere);
  text-decoration: none;
  white-space: nowrap;
}

.at-band .band-link:hover { text-decoration: underline; }

/* ---------- 9. Nutzen-Sektion (Vorteile + Illustration) ---------- */

.nutzen-sektion { padding-top: 30px; padding-bottom: 40px; }

.nutzen-split {
  display: grid;
  gap: 44px;
  align-items: center;
}

.nutzen-split h2 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  margin-bottom: 26px;
}

.nutzen-split h2 em {
  font-style: normal;
  color: var(--beere);
  display: block;
}

.nutzen-punkte {
  display: grid;
  gap: 22px;
}

.nutzen-punkt {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.nutzen-punkt .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
}

.nutzen-punkt .icon-kreis .ikon { width: 21px; height: 21px; }

.nutzen-punkt strong {
  display: block;
  font-size: var(--schrift-fliess);
  font-weight: 600;
  margin-bottom: 2px;
}

.nutzen-punkt p {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
}

/* ---------- 9b. Info-Punkte („Warum diese Tools?") ---------- */

.info-sektion { padding-top: 34px; padding-bottom: 10px; }

.info-sektion .sektion-kopf { margin-bottom: 30px; }

.info-punkte {
  display: grid;
  gap: 14px;
}

.info-punkt {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 18px 20px;
  box-shadow: var(--schatten-sanft);
}

.info-punkt .check-kreis { margin-top: 3px; }

.info-punkt strong {
  display: block;
  font-size: var(--schrift-l);
  font-weight: 600;
  margin-bottom: 2px;
}

.info-punkt p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.55;
}

/* ---------- 9c. Wissens-Teaser (Rosa-Karte mit Illustration) ---------- */

.wissen-teaser {
  display: grid;
  gap: 0;
  align-items: center;
  background: var(--rosa);
  border-radius: var(--radius-gross);
  overflow: hidden;
  margin: 44px 0 10px;
}

.wissen-teaser .teaser-text { padding: 36px 38px; }

.wissen-teaser h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 6px 0 10px;
}

.wissen-teaser p {
  font-size: var(--schrift-l);
  font-weight: 400;
  color: var(--text-sanft);
  max-width: 520px;
}

.wissen-teaser .knopf { margin-top: 20px; }

.wissen-teaser .teaser-bild { align-self: stretch; }

.wissen-teaser .teaser-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 10. CTA-Band (dunkle Beere) + Footer ---------- */

.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--beere), var(--beere-dunkel) 90%);
  border-radius: var(--radius-gross);
  padding: 44px 46px;
  margin: 30px 0 0;
  color: var(--weiss);
  overflow: hidden;
}

.cta-band .punkte {
  right: 34px;
  bottom: 24px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 2px, transparent 2.5px);
}

.cta-band h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  position: relative;
}

.cta-band p {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  max-width: 620px;
  line-height: 1.7;
  position: relative;
}

.cta-band .knopf-hell { margin-top: 22px; position: relative; }

/* Alias fuer Bestandsseiten */
.webdesign-banner {
  position: relative;
  background: linear-gradient(120deg, var(--beere), var(--beere-dunkel) 90%);
  border-radius: var(--radius-gross);
  padding: 44px 46px;
  margin: 30px 0 60px;
  color: var(--weiss);
  overflow: hidden;
}

.webdesign-banner h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  position: relative;
}

.webdesign-banner p {
  font-size: var(--schrift-fliess);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  line-height: 1.7;
  position: relative;
}

.webdesign-banner .knopf-hell { margin-top: 22px; position: relative; }

/* CTA-Band in voller Breite: geht direkt in den Footer ueber (Design-Vorlage) */
.cta-band-voll {
  position: relative;
  background: linear-gradient(120deg, var(--beere), var(--beere-dunkel) 90%);
  border-radius: 28px 28px 0 0;
  margin-top: 70px;
  padding: 52px 0 56px;
  color: var(--weiss);
  overflow: hidden;
}

.cta-band-voll .container {
  display: grid;
  gap: 26px;
  align-items: center;
  position: relative;
}

.cta-band-voll h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.cta-band-voll p {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  max-width: 620px;
  line-height: 1.7;
}

.cta-band-voll .knopf-hell { justify-self: start; }

.cta-band-voll .punkte {
  right: 30px;
  bottom: 22px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 2px, transparent 2.5px);
}

/* Footer direkt unter dem CTA-Band: keine eigene Rundung, feine Trennlinie */
footer.site-footer.anschluss {
  border-radius: 0;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Text-Karte mit Deko („Was ist der …?") */
.prosa-karte {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 34px 36px;
  box-shadow: var(--schatten-sanft);
  overflow: hidden;
}

.prosa-karte .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
  margin-bottom: 14px;
}

.prosa-karte .icon-kreis .ikon { width: 23px; height: 23px; }

.prosa-karte h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.prosa-karte p {
  font-size: var(--schrift-l);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.7;
  max-width: none;
  margin-bottom: 12px;
}

.prosa-karte p:last-child { margin-bottom: 0; }

/* Auflockerung langer Prosa: Lead-Satz + scannbare Chip-Reihe (Pflichtangaben) */
.prosa-lead {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beere);
  margin: 22px 0 12px;
}
/* Linksbündige Checkliste (gemeinsame Fluchtlinie mit Überschrift/Fließtext) */
.prosa-karte ul.prosa-chips {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 30px;
  margin: 0;
  padding: 0;
}
.prosa-chips li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-sanft);
  line-height: 1.4;
}
.prosa-chips li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F2052' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 620px) {
  .prosa-chips { grid-template-columns: 1fr; }
}

.prosa-karte .punkte {
  top: 26px;
  right: 30px;
  opacity: 0.55;
}

/* Footer: dunkle Beere, weiche obere Rundung */
footer.site-footer {
  background: var(--beere-dunkel);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 28px 28px 0 0;
  padding: 38px 0 42px;
  margin-top: 64px;
}

footer.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-size: 15px;
  font-weight: 450;
}

footer.site-footer .footer-marke {
  line-height: 0;
}

footer.site-footer .footer-marke img {
  height: 26px;
  width: auto;
  display: block;
}

footer.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-right: 16px;
}

footer.site-footer a:last-child { margin-right: 0; }

footer.site-footer a:hover { color: var(--sonne); }

/* Mehrspaltiger anschluss-Footer: Marke | Nav-Gruppe (Tools+Recht, eng, links) | Newsletter (rechts) */
footer.site-footer.anschluss .container { display: block; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr;
  gap: 32px 48px;
  align-items: stretch;
}
.footer-marke-block { display: flex; flex-direction: column; }
.footer-marke-block .footer-marke { margin-bottom: 12px; }
.footer-marke-block > span { display: block; max-width: 300px; line-height: 1.65; }
.footer-copy {
  margin-top: auto; padding-top: 26px;
  font-size: 13px; color: rgba(255, 255, 255, 0.5);
}
.footer-navs { display: flex; gap: 36px; }
.footer-spalte { display: flex; flex-direction: column; gap: 12px; }
.footer-spalte a { margin: 0; font-weight: 500; }
.footer-titel {
  font-size: var(--schrift-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sonne); margin-bottom: 3px;
}

/* Newsletter-Block im Footer */
.footer-newsletter { display: flex; flex-direction: column; max-width: 400px; }
.footer-nl-text { margin: 6px 0 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.footer-nl-btn { width: auto; align-self: flex-start; margin-top: 8px; }

/* „Bald verfügbar"-Karte: Umriss-Knopf ist jetzt klickbar (öffnet Warteliste-Popup) */
.knopf.sonne-umriss.js-warteliste { cursor: pointer; }
.knopf.sonne-umriss.js-warteliste:hover { background: var(--sonne-hell); border-color: var(--sonne-dunkel); color: var(--sonne-dunkel); }

/* Pflicht-Einwilligung im Popup leicht betont */
.signup-check--pflicht { font-weight: 500; }

/* Gemeinsames Anmeldeformular (Footer + Popup) */
.signup-namen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signup-form input[type="text"]:not(.hp),
.signup-form input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--text);
  font: inherit; font-size: var(--schrift-m);
}
.signup-form input[type="email"] { margin-top: 10px; }
.signup-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-check {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  font-size: var(--schrift-s); line-height: 1.5; cursor: pointer;
}
.signup-check input { margin-top: 2px; accent-color: var(--beere); flex: none; }
.signup-btn {
  margin-top: 14px; width: 100%; background: var(--beere); color: #fff; border: none;
  border-radius: 10px; padding: 12px 18px; font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.signup-btn:hover { background: var(--beere-dunkel); transform: translateY(-1px); }
.signup-btn:disabled { opacity: .7; cursor: default; transform: none; }
.signup-hinweis { font-size: var(--schrift-xxs); color: var(--text-leise); margin-top: 10px; line-height: 1.5; }
.signup-hinweis a { color: inherit; text-decoration: underline; margin: 0; }
.signup-status { font-size: var(--schrift-s); margin-top: 10px; line-height: 1.5; }
.signup-status:empty { margin-top: 0; }
.signup-status.ok { color: var(--beere); font-weight: 500; }
.signup-status.fehler { color: var(--warn); }

/* Footer-Kontext (dunkle Beere) – helle Felder gegen weiche, translucente ersetzen */
.footer-newsletter .signup-form input[type="text"]:not(.hp),
.footer-newsletter .signup-form input[type="email"] {
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #fff;
}
.footer-newsletter .signup-form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.footer-newsletter .signup-check { color: rgba(255, 255, 255, 0.8); }
.footer-newsletter .signup-check input { accent-color: var(--sonne); }
.footer-newsletter .signup-btn { background: var(--sonne); color: var(--text); }
.footer-newsletter .signup-btn:hover { background: var(--sonne-dunkel); }
.footer-newsletter .signup-hinweis { color: rgba(255, 255, 255, 0.5); }
.footer-newsletter .signup-hinweis a { color: rgba(255, 255, 255, 0.7); }
.footer-newsletter .signup-status.ok { color: var(--sonne); }
.footer-newsletter .signup-status.fehler { color: #ffb4b4; }

/* Knopf, der wie ein Textlink aussieht (z. B. Cookie-Einstellungen im Fliesstext) */
.link-knopf {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--beere); text-decoration: underline; cursor: pointer;
}

/* Das Cookie-Banner kommt seit 23.09.2026 aus der gemeinsamen Code-Basis
   (public/cookie-consent/). Sein Aussehen steht in cookie-consent.css und im
   Projekt-Theme plattform-theme.css - hier gibt es dafuer nichts mehr. Die
   frueheren Regeln fuer #consent-banner sind entfallen. */

/* Button im Footer, der wie ein Footer-Link aussieht (Cookie-Einstellungen) */
.footer-link-knopf {
  background: none; border: none; padding: 0; font: inherit; text-align: left;
  color: rgba(255, 255, 255, 0.85); cursor: pointer; font-weight: var(--fett-mittel);
}
.footer-link-knopf:hover { color: var(--sonne); }

/* Warteliste-Popup (per assets/signup.js erzeugt) */
.signup-dialog {
  border: none; border-radius: var(--radius-gross); padding: 30px 28px 26px;
  max-width: 440px; width: calc(100% - 32px); max-height: 90vh; overflow: auto;
  color: var(--text); background: var(--weiss);
  inset: 0; margin: auto; /* native Modal-Zentrierung (Reset nullt sonst margin) */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.signup-dialog::backdrop { background: rgba(26, 10, 20, 0.55); }
.signup-dialog-x {
  position: absolute; top: 10px; right: 14px; border: none; background: none;
  font-size: 26px; line-height: 1; color: var(--text-leise); cursor: pointer;
}
.signup-dialog-x:hover { color: var(--beere); }
.signup-dialog-titel { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 0 30px 6px 0; }
.signup-dialog-text { color: var(--text-sanft); font-size: var(--schrift-m); line-height: 1.55; margin: 0 0 18px; }

/* ⚠️ Hier stand `@media (max-width: var(--text-breite))`. CSS-Variablen sind in
   Media Queries NICHT erlaubt – die Regel wurde vom Browser komplett ignoriert,
   und der Footer behielt auf dem Handy sein 3-Spalten-Raster (Seite lief 40 px
   über den Rand). Gefunden 25.08.2026. Wert entspricht --text-breite: 860px –
   wer den Token ändert, muss diese Zahl von Hand mitziehen. */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  /* Einspaltig gehoert das Copyright ans ENDE, nicht zwischen Marke und
     Navigation. `display: contents` loest den Marken-Block auf, damit seine
     Kinder eigene Rasterzeilen werden und `order` greifen kann. */
  .footer-marke-block { display: contents; }
  .footer-copy { order: 99; margin-top: 6px; padding-top: 0; }
  .footer-navs { gap: 48px; }
  .footer-newsletter { max-width: 460px; }
}
@media (max-width: 380px) {
  .signup-namen { grid-template-columns: 1fr; }
  .footer-navs { flex-wrap: wrap; gap: 28px; }
}

/* ---------- 11. Inhalts-Sektionen, Schritte, FAQ ---------- */

.inhalt-sektion { padding-top: 40px; padding-bottom: 16px; }

.inhalt-sektion h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.inhalt-sektion h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 26px 0 8px;
}

.inhalt-sektion p, .inhalt-sektion li {
  font-size: var(--schrift-fliess);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.7;
  max-width: 820px;
}

.inhalt-sektion ul, .inhalt-sektion ol {
  padding-left: 22px;
  margin: 10px 0;
}

.inhalt-sektion a { color: var(--beere); }

/* Schritte (Wie funktioniert's): grosse Nummer ragt oben links ueber die Karte */
.schritte {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

.schritt {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 36px 28px 30px;
  box-shadow: var(--schatten-sanft);
  text-align: center;
}

.schritt .nummer {
  position: absolute;
  top: -20px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-rund);
  background: var(--beere);
  color: var(--weiss);
  font-weight: 600;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(127, 32, 82, 0.3);
}

.schritt .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
  margin: 0 0 16px;
}

.schritt .icon-kreis .ikon { width: 34px; height: 34px; }

.schritt h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
}

.schritt p {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.65;
}

/* Info-Karten (Bestandsseiten) */
.karten {
  display: grid;
  gap: 20px;
  padding: 24px 0 56px;
}

.karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 30px 32px;
  background: var(--weiss);
  box-shadow: var(--schatten-sanft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: einblenden 0.5s ease both;
}

.karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte);
}

.karte:nth-child(2) { animation-delay: 0.08s; }
.karte:nth-child(3) { animation-delay: 0.16s; }

.karte h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.karte p {
  font-size: var(--schrift-l);
  color: var(--text-sanft);
  font-weight: 400;
  line-height: 1.65;
}

/* FAQ – kompakte weisse Zeilen wie in der Design-Vorlage */
.faq details {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq details:hover { border-color: rgba(127, 32, 82, 0.35); }

.faq summary {
  cursor: pointer;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  position: relative;
  padding-right: 46px;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--beere);
  font-size: 22px;
  font-weight: 400;
}

.faq details[open] summary::after { content: "–"; }

.faq details[open] summary { border-bottom: 1px solid var(--linie); }

.faq .antwort { padding: 14px 20px 18px; }

.faq .antwort p, .faq .antwort li {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.7;
}

.faq .antwort ul { padding-left: 20px; }

/* ---------- 12. Wissens-Hub + Artikel ---------- */

/* Suchfeld mit Lupe */
.suchfeld {
  position: relative;
  max-width: 460px;
  margin-top: 24px;
  animation: einblenden 0.5s ease 0.18s both;
}

.suchfeld .ikon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-leise);
  pointer-events: none;
}

.suchfeld input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 13px 18px 13px 44px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-rund);
  background: var(--weiss);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.suchfeld input:focus {
  outline: none;
  border-color: var(--beere);
  box-shadow: 0 0 0 4px rgba(127, 32, 82, 0.1);
}

/* Themen-Chips */
.themen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  animation: einblenden 0.5s ease 0.24s both;
}

/* Filter-Chips sind Tap-Ziele: mindestens 44 px hoch (Julias Vorgabe
   25.08.2026 – vorher 34 px und damit auf dem Handy fummelig). Die Höhe
   kommt aus min-height statt aus Padding, damit sie unabhängig von der
   Schriftmetrik verlässlich stimmt. */
.chip {
  font-family: inherit;
  font-size: var(--schrift-m);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--radius-rund);
  border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--text-sanft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.chip:hover { border-color: var(--beere); color: var(--beere); }

.chip.aktiv {
  background: var(--beere);
  border-color: var(--beere);
  color: var(--weiss);
}

/* Cluster-Karten */
.cluster-karten {
  display: grid;
  gap: 20px;
  padding: 8px 0 10px;
}

.cluster-karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 28px 26px 22px;
  box-shadow: var(--schatten-sanft);
}

.cluster-karte .cluster-bild {
  width: 96px;
  height: 96px;
  margin-bottom: 10px;
}

.cluster-karte .kicker { font-size: 11.5px; letter-spacing: 0.09em; }

.cluster-karte h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 5px 0 8px;
}

.cluster-karte > p {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.6;
  margin-bottom: 12px;
}

.cluster-karte .pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--beere);
  text-decoration: none;
  margin-bottom: 16px;
}

.cluster-karte .pillar-link:hover { text-decoration: underline; }

/* Hervorgehobener Artikel im Cluster */
.beliebt-row {
  display: block;
  background: var(--rosa);
  border-radius: var(--radius);
  padding: 13px 16px;
  text-decoration: none;
  margin-bottom: 4px;
}

.beliebt-row .beliebt-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sonne-dunkel);
}

.beliebt-row strong {
  display: block;
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--text);
  margin: 3px 0 2px;
}

.beliebt-row .meta { font-size: var(--schrift-xs); color: var(--text-leise); }

.beliebt-row:hover strong { color: var(--beere); }

/* Artikel-Zeilen im Cluster */
.cluster-artikel {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cluster-artikel li { border-bottom: 1px solid var(--linie); }

.cluster-artikel li:last-child { border-bottom: none; }

.cluster-artikel a {
  display: block;
  padding: 12px 4px;
  text-decoration: none;
}

.cluster-artikel strong {
  display: block;
  font-size: var(--schrift-m);
  font-weight: 500;
  color: var(--text);
}

.cluster-artikel a:hover strong { color: var(--beere); }

.cluster-artikel .meta { font-size: var(--schrift-xs); color: var(--text-leise); }

/* Meta-Zeile: Datum + Lesezeit mit kleinen Icons */
.meta-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--schrift-xs);
  color: var(--text-leise);
}

.meta-zeile span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.meta-zeile .ikon { width: 13px; height: 13px; }

.cluster-karte .meta-zeile { margin: -4px 0 14px; }

.cluster-karte .pillar-link { margin-bottom: 0; margin-top: auto; }

/* Blog-Uebersicht: Artikel-Karten mit Fotovorschau */
.blog-liste {
  display: grid;
  gap: 20px;
  padding: 8px 0 10px;
}

.blog-karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-sanft);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-karte:hover {
  transform: translateY(-3px);
  border-color: rgba(127, 32, 82, 0.35);
  box-shadow: var(--schatten-karte);
}

.blog-karte .blog-bild {
  aspect-ratio: 16 / 9;
  background: var(--rosa);
}

.blog-karte .blog-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-karte .blog-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 18px;
}

.blog-karte .kicker { font-size: 11.5px; letter-spacing: 0.09em; }

.blog-karte strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 5px 0 12px;
}

.blog-karte:hover strong { color: var(--beere); }

.blog-karte .meta-zeile { margin-top: auto; }

/* Platzhalter-Karte „Weitere Themen in Kuerze" */
.cluster-karte.bald-cluster {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.cluster-karte.bald-cluster .blob {
  width: 88px;
  height: 88px;
  border-radius: 46% 54% 55% 45% / 52% 46% 54% 48%;
  background: var(--rosa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-leise);
  font-size: 26px;
  margin-bottom: 14px;
}

.cluster-karte.bald-cluster h3 { font-size: 18px; }

.cluster-karte.bald-cluster p {
  font-size: var(--schrift-s);
  color: var(--text-leise);
  margin-bottom: 0;
}

/* Dunkles Band „Neu & hilfreich" */
.neu-band {
  background: linear-gradient(120deg, var(--beere), var(--beere-dunkel) 90%);
  border-radius: var(--radius-gross);
  padding: 34px 34px 30px;
  margin: 34px 0 10px;
  color: var(--weiss);
  position: relative;
  overflow: hidden;
}

.neu-band .band-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 22px;
  position: relative;
}

.neu-band h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.neu-band .band-kopf p {
  font-size: var(--schrift-m);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.neu-band .teaser-karten { margin-top: 0; position: relative; }

.neu-band .teaser-karte { border: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }

.neu-band .punkte {
  left: 26px;
  bottom: 18px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 2px, transparent 2.5px);
}

/* Vertrauenszeile unter dem Band */
.vertrauen-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px 40px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.vertrauen-band .nutzen-punkt { flex: 1 1 320px; }

.vertrauen-band .knopf { flex: none; }

.wissen-cluster {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  padding: 30px 32px;
  margin-bottom: 22px;
  box-shadow: var(--schatten-sanft);
}

.wissen-cluster .kicker { font-size: var(--schrift-xs); }

.wissen-cluster h2 {
  font-size: 23px;
  font-weight: 600;
  margin: 6px 0 8px;
}

.wissen-cluster > p {
  font-size: var(--schrift-l);
  font-weight: 400;
  color: var(--text-sanft);
  max-width: 720px;
}

.wissen-cluster .pillar-link {
  display: inline-block;
  margin: 10px 0 16px;
  color: var(--beere);
  font-weight: 500;
  font-size: var(--schrift-l);
}

.artikel-liste {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.artikel-liste a {
  display: block;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
  font-size: var(--schrift-l);
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.artikel-liste a:hover {
  border-color: var(--beere);
  background: var(--rosa);
}

.artikel-liste a span {
  display: block;
  font-size: var(--schrift-s);
  font-weight: 400;
  color: var(--text-leise);
  margin-top: 2px;
}

.artikel {
  max-width: 780px;
  padding-top: 48px;
  padding-bottom: 60px;
}

.artikel .kicker { font-size: 13px; }

.artikel h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 8px 0 12px;
}

.artikel .meta {
  font-size: 14px;
  color: var(--text-leise);
  margin-bottom: 28px;
}

.artikel h2 {
  font-size: 23px;
  font-weight: 600;
  margin: 32px 0 10px;
}

.artikel h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 8px;
}

.artikel p, .artikel li {
  font-size: var(--schrift-fliess);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.75;
}

.artikel ul, .artikel ol { padding-left: 22px; margin: 10px 0; }
.artikel a { color: var(--beere); }

.artikel .cta-box {
  border: 1px solid var(--linie);
  border-left: 4px solid var(--sonne);
  border-radius: var(--radius);
  background: var(--weiss);
  padding: 22px 26px;
  margin: 34px 0 8px;
}

.artikel .cta-box strong { font-weight: 600; color: var(--text); }

.artikel .zurueck {
  display: inline-block;
  margin-top: 26px;
  font-size: var(--schrift-m);
}

/* ---------- 12b. Artikel-Vorlage (Design-Vorlage „Artikel Beispiel") ---------- */

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--text-leise);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-leise);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--beere); }

.breadcrumb .trenner { color: var(--linie); }

.breadcrumb .aktuell { color: var(--text-sanft); font-weight: 500; }

/* Artikel-Hero */
.artikel-hero { padding: 30px 0 40px; }

.artikel-hero h1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 620px;
  margin: 8px 0 0;
}

.artikel-hero h1 em {
  font-style: normal;
  color: var(--beere);
  display: block;
}

.artikel-hero .untertitel {
  margin-top: 16px;
  font-size: var(--schrift-fliess);
  font-weight: 400;
  color: var(--text-sanft);
  max-width: 560px;
}

.artikel-hero .meta-zeile {
  margin-top: 18px;
  font-size: var(--schrift-s);
  gap: 6px 20px;
}

.artikel-hero .meta-zeile .ikon { width: 15px; height: 15px; }

.artikel-hero .meta-zeile .flagge-klein {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-rund);
  overflow: hidden;
  flex: none;
}

.artikel-hero .cta-knopf { margin-top: 24px; }

/* Hero-Bild-Variante fuer normale Artikel (breites Vorschaubild statt Icon) */
.hero-visual.artikel-bild img {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-karte);
}

/* freigestellte Illustration: ohne Rahmen-Optik */
.hero-visual.artikel-bild.frei img {
  border-radius: 0;
  box-shadow: none;
}

/* Layout: Sidebar + Inhalt */
.artikel-layout {
  display: grid;
  gap: 30px;
  align-items: start;
  padding-bottom: 30px;
}

.artikel-seite { display: grid; gap: 18px; }

.toc-karte {
  background: var(--rosa);
  border-radius: var(--radius-gross);
  padding: 22px 24px;
}

.toc-karte .toc-titel {
  font-size: var(--schrift-xxs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beere);
  margin-bottom: 10px;
}

.toc-karte ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-karte li { border-left: 2px solid var(--rosa-tief); }

.toc-karte a {
  display: block;
  padding: 6px 0 6px 14px;
  font-size: var(--schrift-m);
  font-weight: 500;
  color: var(--text-sanft);
  text-decoration: none;
}

.toc-karte a:hover { color: var(--beere); }

.toc-karte li:hover { border-left-color: var(--beere); }

.seiten-box {
  background: var(--rosa);
  border-radius: var(--radius-gross);
  padding: 22px 24px;
}

.seiten-box .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-rund);
  background: var(--weiss);
  color: var(--beere);
  margin-bottom: 10px;
}

.seiten-box .icon-kreis .ikon { width: 18px; height: 18px; }

.seiten-box strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.seiten-box p {
  font-size: var(--schrift-s);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.6;
}

/* Artikel-Inhalt */
.artikel-inhalt { min-width: 0; }

.artikel-inhalt h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 38px 0 14px;
  scroll-margin-top: 24px;
}

.artikel-inhalt > h2:first-child, .artikel-inhalt > section:first-child h2 { margin-top: 0; }

.artikel-inhalt h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 8px;
}

.artikel-inhalt p, .artikel-inhalt li {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.75;
}

.artikel-inhalt p { margin-bottom: 12px; }

.artikel-inhalt ul, .artikel-inhalt ol { padding-left: 22px; margin: 10px 0; }

.artikel-inhalt a { color: var(--beere); }

/* Merk-Box (Kurz gesagt) und Tipp-Box (gelb) */
.merk-box, .tipp-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--radius-gross);
  padding: 18px 22px;
  margin: 6px 0 16px;
}

.merk-box { background: var(--rosa); }

.tipp-box { background: var(--sonne-hell); }

.merk-box .box-ikon, .tipp-box .box-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--weiss);
  color: var(--sonne-dunkel);
}

.merk-box .box-ikon { color: var(--beere); }

.box-ikon .ikon { width: 18px; height: 18px; }

.merk-box p, .tipp-box p {
  font-size: var(--schrift-l) !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

/* Checklisten-Karte (2-spaltig) */
/* Haken-Listen sehen ueberall GLEICH aus (Julia 22.09.2026: mal in einer
   weissen Karte, mal ohne - die Unterscheidung war willkuerlich und hat beim
   Lesen irritiert). Die Karte ist aufgeloest; stattdessen haelt eine feine
   Rosé-Linie links die Liste als Block zusammen, ohne wie ein Kasten zu
   wirken. `.check-karte` bleibt als Klasse bestehen, damit die Artikel nicht
   angefasst werden muessen - sie ist jetzt nur noch eine Huelle. */
.check-karte {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 18px 0;
  box-shadow: none;
}

/* Häkchen-Liste. 17.09.2026: Spalten statt Raster – im Raster teilten sich
   linker und rechter Punkt die Zeilenhöhe, neben einem zweizeiligen Punkt
   entstand eine Lücke. Jetzt läuft jede Spalte für sich, Abstand überall 10px. */
.check-grid {
  display: block;
  column-gap: 26px;
  list-style: none;
  padding: 0 0 0 18px !important;
  margin: 18px 0 !important;
  border-left: 2px solid var(--rosa-tief);
}
/* Innerhalb der Huelle nicht doppelt einruecken. */
.check-karte > .check-grid { margin: 0 !important; }

/* Die Punkte waren Flex-Container. Dadurch wurde JEDES Element im Punkt zu
   einer eigenen Flex-Spalte: Stand hinter dem Text ein Link, rutschte er in
   eine zweite Spalte nach rechts (Julias Screenshot 22.09.2026, "Rechts-
   Updates"). Jetzt laeuft der Inhalt als normaler Fliesstext, das Haekchen
   sitzt absolut davor. */
.check-grid li {
  display: block;
  position: relative;
  padding-left: 28px;
  margin: 0 0 10px !important;
  break-inside: avoid;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.check-grid li > .check-kreis {
  position: absolute;
  left: 0;
  top: 3px;
}

.check-grid li:last-child { margin-bottom: 0 !important; }
.check-grid .check-kreis { width: 18px; height: 18px; margin-top: 2px; }
.check-grid .check-kreis .ikon { width: 11px; height: 11px; }

/* Link zum Generator unten rechts in der Karte (Julia 17.09.2026) */
.check-karte .karten-link {
  display: flex;
  width: fit-content;
  margin-left: auto;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--beere);
  text-decoration: none;
}

.check-karte .karten-link:hover { text-decoration: underline; }

/* Ziel-Reihe: Icon-Kreise mit Label (Wer braucht ein Impressum?) */
.ziel-reihe {
  display: grid;
  gap: 18px;
  margin: 18px 0;
  text-align: center;
}

.ziel .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
  margin-bottom: 8px;
}

.ziel .icon-kreis .ikon { width: 26px; height: 26px; }

.ziel strong {
  display: block;
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.ziel span {
  font-size: var(--schrift-xs);
  color: var(--text-leise);
  line-height: 1.4;
}

/* Vergleichs-Tabelle */
.tabellen-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  margin: 6px 0 16px;
  overflow-x: auto;
  box-shadow: var(--schatten-sanft);
}

.tabellen-karte table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.tabellen-karte th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--beere);
  background: var(--rosa);
  padding: 12px 18px;
  /* Kein nowrap: Eine lange Spaltenueberschrift hat sonst dieselbe Wirkung
     wie eine lange Zelle und treibt die Tabelle ueber die Inhaltsbreite. */
}

.tabellen-karte td {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sanft);
  padding: 12px 18px;
  border-top: 1px solid var(--linie);
  vertical-align: top;
}

/* Kein nowrap mehr (Julia 22.09.2026): Bei einer langen ersten Zelle - etwa
   der Aufzaehlung der Kammerberufe im Impressum-Guide - wuchs die Tabelle auf
   1400 px und erzeugte selbst am Desktop einen Querbalken. Stattdessen darf
   die Spalte umbrechen und bekommt eine Mindestbreite, damit kurze Labels
   trotzdem nicht Silbe fuer Silbe brechen. */
.tabellen-karte td:first-child {
  font-weight: 600;
  color: var(--beere);
  min-width: 128px;
}

/* CTA-Karte im Artikel */
.artikel-cta {
  display: grid;
  gap: 20px;
  align-items: center;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 26px 28px;
  margin: 30px 0;
  box-shadow: var(--schatten-karte);
}

.artikel-cta .cta-bild { width: 92px; height: 92px; }

.artikel-cta h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
}

.artikel-cta p {
  font-size: var(--schrift-m) !important;
  margin: 0 !important;
}

.artikel-cta .cta-aktion { text-align: center; }

.artikel-cta .cta-aktion .hinweis-klein {
  display: block;
  margin-top: 8px;
  font-size: var(--schrift-xs);
  color: var(--text-leise);
}

/* Beeren-Karte „SEO-Erstgespräch“ unter der Artikel-CTA (BeratungCta.astro) */
.beratung-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--abstand-m);
  align-items: center;
  background: linear-gradient(120deg, var(--beere), var(--beere-dunkel) 90%);
  color: var(--weiss);
  border-radius: var(--radius-gross);
  padding: 26px 28px;
  margin: -14px 0 30px;
  box-shadow: var(--schatten-karte);
}
.beratung-cta h3 { font-size: 19px; font-weight: 600; margin: 0 0 4px; color: var(--weiss); }
.beratung-cta p { font-size: var(--schrift-m) !important; margin: 0 !important; color: rgba(255, 255, 255, 0.88) !important; }
.beratung-cta .knopf-hell { justify-self: start; position: relative; z-index: 1; }
.beratung-cta .punkte { right: 18px; bottom: 14px; background-image: radial-gradient(rgba(255, 255, 255, 0.25) 2px, transparent 2.5px); }
@media (min-width: 720px) {
  .beratung-cta { grid-template-columns: 1fr auto; }
  .beratung-cta .knopf-hell { justify-self: end; }
}

/* Trennlinie zwischen grossen Bereichen */
.trenner-linie {
  border: none;
  border-top: 1px solid var(--linie);
  margin: 30px 0;
}

/* Autorenbox (auf jedem Artikel) */
.autor-box {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--rosa);
  border-radius: var(--radius-gross);
  padding: 24px 26px;
  margin: 34px 0 0;
}

.autor-box .autor-bild {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--weiss);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(127, 32, 82, 0.18);
}

.autor-box .autor-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.autor-box .autor-text { flex: 1 1 320px; }

.autor-box .autor-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beere);
}

.autor-box strong a { color: inherit; text-decoration: none; }
.autor-box strong a:hover { color: var(--beere); }
.autor-box strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-top: 2px;
}

.autor-box .rolle {
  display: block;
  font-size: 13px;
  color: var(--text-leise);
  margin-bottom: 6px;
}

.autor-box p {
  font-size: var(--schrift-m) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Quellen am Artikelende */
.quellen-box {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 20px 24px;
  margin: 22px 0 0;
}

.quellen-box .quellen-titel {
  font-size: var(--schrift-xxs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beere);
  margin-bottom: 10px;
}

.quellen-box ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  gap: 7px;
}

.quellen-box li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: var(--schrift-s) !important;
  line-height: 1.55 !important;
  color: var(--text-sanft);
}

.quellen-box li .ikon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 3px;
  color: var(--beere);
}

/* Rechtlicher Hinweis (Haftungsausschluss) */
.hinweis-recht {
  font-size: var(--schrift-xs) !important;
  color: var(--text-leise) !important;
  line-height: 1.6 !important;
  margin: 18px 0 0 !important;
}

/* Passende Artikel: eigene Sektion unterhalb des Artikels */
/* Teaser-Raster, das sich selbst aufteilt (vorher als Inline-style je Artikel) */
.teaser-karten--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.artikel-weiter {
  border-top: 1px solid var(--linie);
  margin-top: 46px;
  padding-top: 36px;
  padding-bottom: 10px;
}

.artikel-weiter h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

/* Artikel-Hero: Illustration groesser */
.artikel-hero .hero-visual.tool-icon img { max-width: 520px; }

@media (min-width: 720px) {
  .artikel-hero .hero-split { grid-template-columns: 2fr 1fr; }
  .artikel-hero .hero-split:has(.artikel-bild) { grid-template-columns: 1.15fr 1fr; }
  .ziel-reihe { grid-template-columns: repeat(4, 1fr); }
  .check-grid { column-count: 2; }
  .artikel-cta { grid-template-columns: auto 1fr auto; }
}

@media (min-width: 1000px) {
  .artikel-layout { grid-template-columns: 264px 1fr; }
  /* unter dem klebenden Header + kleiner Abstand (Julia 17.09.2026) */
  .artikel-seite { position: sticky; top: calc(var(--kopf-hoehe) + var(--abstand-m)); }
}

/* ---------- 13. Rechtsseiten ---------- */

/* Rechtsseiten (Impressum/Datenschutz/AGB): volle Container-Breite, damit die
   linke Kante auf der Fluchtlinie des Headers/Logos sitzt (nicht mehr zentriert
   eingerückt). Der Fließtext bleibt für gute Lesbarkeit linksbündig begrenzt. */
/* Kopfband der Rechtsseiten (22.09.2026). Vorher begann Impressum,
   Datenschutz, AGB und Widerruf direkt mit einer kleinen Ueberschrift am
   linken Containerrand - ohne Anfang und ohne Bezug zum uebrigen Auftritt. */
.rechts-hero {
  background: var(--rosa);
  padding: 38px 0 30px;
  margin-bottom: 32px;
}
.rechts-hero .kicker { display: inline-block; margin-bottom: 10px; }
.rechts-hero h1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  max-width: var(--text-breite);
}
.rechts-hero .rechts-stand {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--text-leise);
}
.rechts-hero .rechts-stand em { font-style: normal; }

.rechtsseite {
  padding-top: 0;
  padding-bottom: 64px;
}
.rechtsseite > * {
  max-width: var(--text-breite);
}

/* Die erste Ueberschrift steht direkt unter dem Kopfband: kein Abstand und
   keine Trennlinie nach oben, sonst doppelt sich die Kante des Kopfbands. */
.rechtsseite > h2:first-child { margin-top: 0; }

/* Kompakt und ohne Trennlinien (Julia 22.09.2026): Die Striche zwischen den
   Abschnitten zerhackten die Seite, und die Abstaende waren zu grosszuegig
   fuer Texte, die man nachschlaegt statt liest. Die Gliederung traegt jetzt
   allein die Beere-Ueberschrift. */
.rechtsseite h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--beere);
  margin: 22px 0 6px;
}

.rechtsseite h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 4px;
}

.rechtsseite p, .rechtsseite li {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-sanft);
}
.rechtsseite p { margin: 0 0 10px; }
.rechtsseite li { margin-bottom: 4px; }

.rechtsseite ul, .rechtsseite ol { padding-left: 20px; }

/* Fassungszeile am Ende der Rechtsseiten (24.09.2026). */
.rechts-fassung {
  margin-top: var(--abstand-m);
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  font-size: 14px !important;
  color: var(--text-leise) !important;
}

/* Teil-Ueberschriften der Nutzungsbedingungen (h2) heben sich von den
   Abschnitten (h3) ab - vorher war alles gleich gross. */
.rechtsseite h3 {
  color: var(--text);
  margin: 22px 0 6px;
}

/* Druckansicht der Rechtsseiten (22.09.2026). Paragraf 11 ECG verlangt, dass
   man AGB speichern und wiedergeben kann - eine Pflicht zum PDF gibt es
   nicht (siehe doku/recherche-agb-pdf-pflicht-2026-09-22.md), wohl aber den
   Anspruch, dass der Ausdruck brauchbar ist. Ohne diese Regeln landeten
   Navigation, Consent-Banner und Footer mit auf dem Papier. */
@media print {
  .site-header,
  .site-footer,
  .cc-root,
  .nach-oben,
  .signup-dialog { display: none !important; }
  .rechts-hero {
    background: none;
    padding: 0 0 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid #ccc;
  }
  .rechtsseite { padding: 0; }
  .rechtsseite > * { max-width: none; }
  .rechtsseite h2 { break-after: avoid; }
  .rechtsseite p, .rechtsseite li { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

.rechtsseite a { color: var(--beere); }

/* ---------- 14. Wizard ---------- */

.wizard-bereich { padding-top: 24px; padding-bottom: 80px; }

.wizard-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 34px 30px;
  background: var(--weiss);
  box-shadow: var(--schatten-karte);
}

.fortschritt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.fortschritt .zaehler {
  font-size: var(--schrift-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beere);
  white-space: nowrap;
}

.fortschritt .balken {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-rund);
  background: var(--rosa-tief);
  overflow: hidden;
}

.fortschritt .balken span {
  display: block;
  height: 100%;
  border-radius: var(--radius-rund);
  background: linear-gradient(90deg, var(--beere), #a34775);
  transition: width 0.4s ease;
}

.schritt-inhalt { animation: einblenden 0.35s ease both; }

.wizard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linie);
}

.wizard-tab {
  font-family: inherit;
  font-size: var(--schrift-m);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-rund);
  border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--text-leise);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.wizard-tab.besucht {
  color: var(--beere);
  border-color: var(--beere);
}

.wizard-tab.besucht:hover { background: var(--rosa); }

.wizard-tab.aktiv {
  background: var(--beere);
  border-color: var(--beere);
  color: var(--weiss);
}

.wizard-tab.gesperrt { opacity: 0.5; cursor: default; }

.schritt-erklaerung {
  font-size: var(--schrift-fliess);
  font-weight: 400;
  color: var(--text-sanft);
  max-width: 760px;
  margin: -12px 0 22px;
  line-height: 1.6;
}

.tab-tipp {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-leise);
  margin-bottom: 16px;
}

.pflicht-box {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--beere);
  border-radius: var(--radius);
  background: var(--rosa);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.pflicht-box h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pflicht-box p {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  margin-bottom: 8px;
}

.pflicht-box ul { padding-left: 18px; }

.pflicht-box li {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  margin-bottom: 2px;
}

.wizard-karte h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.feld { margin-bottom: 18px; }

.feld label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

/* "Von vorn beginnen" steht klein neben dem Speicher-Hinweis unter dem
   Formular - sichtbar genug zum Finden, leise genug, um nicht versehentlich
   geklickt zu werden (22.09.2026). */
.neu-beginnen {
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-leise);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.neu-beginnen:hover { color: var(--beere); }

.optional-hinweis {
  font-weight: 400;
  color: var(--text-leise);
}

.feld .erklaerung, .erklaerung {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-leise);
  margin-top: 4px;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
}

.feld input,
.feld select,
.feld textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--beere);
  box-shadow: 0 0 0 4px rgba(127, 32, 82, 0.12);
}

.feld textarea {
  min-height: 84px;
  resize: vertical;
}

/* Zwei Felder nebeneinander (Julia 17.09.2026: Formulare kompakter).
   Wizard-Helfer reihe([...]). Am Handy untereinander – ausser PLZ/Ort, die
   bleiben auch schmal nebeneinander (PLZ ist kurz). */
.feld-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--abstand-m);
  align-items: start;
}
.feld-reihe.plz-ort { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
@media (max-width: 640px) {
  .feld-reihe:not(.plz-ort) { grid-template-columns: minmax(0, 1fr); }
}

.optionen {
  display: grid;
  gap: 8px;
}

/* Optionskarte: Auswahlpunkt und Titel auf EINER Zeile, Beschreibung
   darunter buendig mit dem Titel (Julia 17.09.2026). Gilt ueberall, wo
   .option verwendet wird. ".optionen .option" statt nur ".option", weil
   ".feld label { display: block }" sonst gewinnt und den Punkt ueber den
   Titel schiebt – genau das war der Fehler. */
.optionen .option,
.option {
  display: flex;
  gap: var(--abstand-s);
  align-items: flex-start;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  /* 22.09.2026 kompakter (Julia: die Schritte wirkten zu voll) */
  padding: 11px 14px;
  cursor: pointer;
  background: var(--weiss);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.option:hover { border-color: var(--beere); }

.option.gewaehlt {
  border-color: var(--beere);
  background: var(--rosa);
  box-shadow: 0 0 0 1px var(--beere) inset;
}

.option input {
  flex: none;
  margin: 0.3em 0 0;
  accent-color: var(--beere);
}

.option .option-text strong {
  display: block;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
}

.option .option-text span {
  font-size: var(--schrift-s);
  font-weight: 400;
  color: var(--text-leise);
  line-height: 1.45;
}

.checkzeile {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--schrift-l);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
  cursor: pointer;
}

.checkzeile input {
  margin-top: 4px;
  accent-color: var(--beere);
}

/* Zustimmungs- und Newsletter-Häkchen im letzten Schritt: bewusst OHNE
   Kasten. Darüber stehen die zwei Auswahlkarten (kostenlos / ohne
   Quellenangabe) – mit Rahmen sah das Häkchen wie eine dritte Auswahl aus
   (Julia 22.09.2026). Ohne Rahmen ist sofort klar: oben wählen, hier
   zustimmen. */
.checkzeile-schlicht {
  font-size: var(--schrift-m);
  align-items: flex-start;
  margin: var(--abstand-s) 0 var(--abstand-m);
  padding: 0;
  background: none;
  border: 0;
}
.checkzeile-schlicht + .checkzeile-schlicht { margin-top: calc(var(--abstand-s) * -1); }

/* Häkchen innerhalb eines .feld (AVV, freiwillige Abschnitte, 17.09.2026):
   sonst greift ".feld label" (block, halbfett) und das Kästchen klebt am Text. */
.feld label.checkzeile { display: flex; font-size: var(--schrift-m); font-weight: 400; margin: var(--abstand-xs) 0 0; }
.feld .frage-kopf + label.checkzeile { margin-top: 0; }

.checkzeile.klein {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  margin-bottom: 8px;
}

/* Dienste-Katalog */
.kategorie {
  border-top: 1px solid var(--linie);
  padding: 18px 0 8px;
}

.kategorie h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 2px;
}

.kategorie .erklaerung { margin-bottom: 12px; }

.modul {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 4px 16px 0;
  margin-bottom: 10px;
  background: var(--weiss);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.modul:hover { border-color: var(--beere); }

/* Kompaktere Dienste-Listen (Julia 18.09.2026): schmalere Zeilen, bei mehr als
   drei Optionen zwei Spalten. Ein Modul mit Zusatzfeldern nimmt die volle
   Breite, damit die Felder darunter Platz haben. */
.modul-liste { display: grid; gap: 8px; }
@media (min-width: 720px) {
  .modul-liste.zweispaltig { grid-template-columns: 1fr 1fr; }
  .modul-liste.zweispaltig > .modul:has(.modul-optionen),
  .modul-liste.zweispaltig > .modul:has(.folgefelder) { grid-column: 1 / -1; }
}
.modul-liste .modul { margin-bottom: 0; }
.modul-liste .modul .checkzeile { padding: 8px 0; align-items: center; }
/* Häkchen und Text auf einer Linie (Julia 18.09.2026) */
.modul-optionen .checkzeile,
.folgefelder .checkzeile { align-items: center; }
.modul-optionen .checkzeile input,
.folgefelder .checkzeile input { margin-top: 0; }
.modul-optionen > .erklaerung:first-child { margin-top: 4px; }
/* Zwischenüberschrift, wenn ein Dienste-Tab mehrere Auswahl-Gruppen hat (17.09.2026) */
.modul-gruppe { font-size: var(--schrift-s); font-weight: var(--fett-halb); color: var(--text); margin: var(--abstand-m) 0 var(--abstand-xs); }
.modul-gruppe:first-of-type { margin-top: 0; }
.modul .feld-eingerueckt { margin-bottom: 14px; }

.modul.aktiv {
  border-color: var(--beere);
  background: var(--rosa);
}

.modul .checkzeile {
  padding: 10px 0;
  margin-bottom: 0;
}

.modul .modul-optionen { margin: 0 0 14px 28px; }

.modul-optionen {
  margin: 2px 0 14px 30px;
  padding: 12px 16px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
}

.modul-optionen .erklaerung { margin: 0 0 8px; }

.premium-badge {
  display: inline-block;
  background: var(--sonne);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-rund);
  margin-left: 8px;
  vertical-align: 1px;
}

.premium-box {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--sonne);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 8px 0 18px;
  background: var(--papier);
}

.premium-box h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.premium-box p {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
}

.premium-hinweis {
  margin-top: 14px;
  font-size: var(--schrift-m);
  color: var(--text-sanft);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--sonne);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.wizard-navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

/* Folgefragen, die an einer Checkbox haengen (z. B. die Verarbeitung der
   Kontaktanfragen unter „Meine Website hat ein Kontaktformular"): eingerueckt
   mit Beere-Kante, damit die Zugehoerigkeit sichtbar ist. */
/* Felder, die erst nach einer Auswahl erscheinen: eingerückt und farbig
   hinterlegt, damit sichtbar bleibt, dass sie zur Frage darüber gehören
   (Julia 18.09.2026: „es springt und ich bin optisch verwirrt"). */
.folgefelder {
  background: var(--papier);
  border-radius: var(--radius);
  padding: 14px 16px 2px;
  margin: 0 0 var(--abstand-m) var(--abstand-m);
  border-left: 3px solid var(--beere);
  animation: folgefeld-auf 0.25s ease both;
}
.folgefelder > .feld:last-child,
.folgefelder > .feld-reihe:last-child { margin-bottom: 8px; }
@keyframes folgefeld-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .folgefelder { animation: none; } }

.feld-eingerueckt {
  margin-left: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--rosa-tief);
}

@media (max-width: 719px) {
  .feld-eingerueckt { margin-left: 0; padding-left: 12px; }
}

.fehlermeldung {
  color: #a4262c;
  font-size: var(--schrift-s);
  margin-top: 14px;
  display: none;
}

.fehlermeldung.sichtbar { display: block; }

/* Leere Pflichtfelder nach "Weiter" (Julia 24.09.2026): kraeftig rot
   umrandet, Beschriftung rot. box-shadow statt dickerem Rahmen, damit das
   Feld nicht um ein Pixel springt. Unbeantwortete Auswahlfragen bekommen nur
   eine rote Frage - nicht die Antwortkarten, sonst saehen beide falsch aus. */
.feld.feld-fehlt input,
.feld.feld-fehlt select,
.feld.feld-fehlt textarea {
  border-color: var(--warn);
  box-shadow: 0 0 0 2px var(--warn);
}
.feld.feld-fehlt > label,
.feld.feld-fehlt .frage-kopf label,
.feld.frage-fehlt > .frage-kopf label {
  color: var(--warn);
  font-weight: 600;
}

.erfolg {
  text-align: center;
  padding: 24px 0;
}

.erfolg h2 { margin-bottom: 10px; }

.erfolg p {
  color: var(--text-sanft);
  font-weight: 400;
  max-width: 460px;
  margin: 0 auto;
}

.erfolg .premium-hinweis {
  max-width: 460px;
  margin: 16px auto 0;
  text-align: left;
}

.versteckt { display: none !important; }

/* ---------- 14c. Wizard mit Fortschritts-Seitenleiste ---------- */

.wizard-karte.wizard-layout {
  display: grid;
  padding: 0;
  overflow: hidden;
}

.wizard-seite {
  background: var(--rosa);
  padding: 26px 20px;
}

.fortschritt-titel {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beere);
  margin-bottom: 16px;
  padding: 0 8px;
}

.gruppe { margin-bottom: 2px; }

.gruppe-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.2s ease;
}

.gruppe-kopf:hover:not(:disabled) { background: rgba(127, 32, 82, 0.07); }
.gruppe-kopf:disabled { cursor: default; }

.gruppe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--weiss);
  color: var(--text-leise);
  transition: background 0.2s ease, color 0.2s ease;
}

.gruppe-icon .ikon { width: 18px; height: 18px; }

.gruppe.aktiv .gruppe-icon,
.gruppe.erledigt .gruppe-icon { background: var(--beere); color: var(--weiss); }

.gruppe-text { flex: 1; min-width: 0; }

.gruppe-text strong {
  display: block;
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.gruppe.offen .gruppe-text strong { color: var(--text-leise); }

.gruppe-text span { font-size: var(--schrift-xxs); color: var(--text-leise); }

.gruppe-status {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-rund);
  border: 2px solid var(--rosa-tief);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--weiss);
}

.gruppe-status.aktiv {
  border-color: var(--beere);
  background: var(--beere);
  box-shadow: 0 0 0 3px rgba(127, 32, 82, 0.15);
}

.gruppe-status.erledigt { border-color: var(--beere); background: var(--beere); }
.gruppe-status .ikon { width: 11px; height: 11px; }

.gruppe-schritte {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 50px;
}

.gruppe-schritt {
  font-size: var(--schrift-s);
  font-weight: 500;
  color: var(--text-leise);
  padding: 6px 8px;
  border-radius: var(--radius-klein);
}

.gruppe-schritt[data-schritt] { cursor: pointer; }
.gruppe-schritt[data-schritt]:hover { color: var(--beere); background: rgba(127, 32, 82, 0.06); }
.gruppe-schritt.aktiv { color: var(--beere); font-weight: 600; }
.gruppe-schritt.erledigt { color: var(--text-sanft); }

.wizard-haupt { padding: 30px 28px 26px; min-width: 0; }

.fortschritt-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.fortschritt-kopf .zaehler {
  font-size: var(--schrift-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--beere);
  white-space: nowrap;
}

.fortschritt-kopf .balken {
  flex: 1;
  min-width: 80px;
  height: 6px;
  border-radius: var(--radius-rund);
  background: var(--rosa-tief);
  overflow: hidden;
}

.fortschritt-kopf .balken span {
  display: block;
  height: 100%;
  border-radius: var(--radius-rund);
  background: linear-gradient(90deg, var(--beere), #a34775);
  transition: width 0.4s ease;
}

.fortschritt-kopf .prozent { font-size: 13px; font-weight: 600; color: var(--beere); }

.fortschritt-kopf .zeit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--schrift-xs);
  color: var(--text-leise);
  border-left: 1px solid var(--linie);
  padding-left: 14px;
  white-space: nowrap;
}

.fortschritt-kopf .zeit .ikon { width: 14px; height: 14px; }

/* Hinweis-Kasten oben im Wizard (erster Schritt) – vorher Inline-Styles mit
   festen Farbwerten in wizard.js. */
/* Hinweis über dem ersten Schritt: gelb, damit er sich von den Feldern abhebt
   (Julia 18.09.2026). */
.wizard-hinweis {
  margin: 0 0 var(--abstand-m);
  padding: 12px 16px;
  background: var(--sonne-hell);
  border-left: 3px solid var(--sonne-dunkel);
  border-radius: var(--radius-klein);
  font-size: var(--schrift-s);
  line-height: 1.55;
  color: var(--text);
}

/* „Warum fragen wir das?" */
.frage-kopf {
  display: flex;
  justify-content: space-between;
  /* center statt baseline (Julia 17.09.2026): Fragezeichen und Text sitzen
     auf einer Hoehe mit der Frage, nicht tiefer. */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.frage-kopf > label { margin: 0; }

details.warum { font-size: 13px; }

details.warum summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--beere);
  font-weight: 500;
  list-style: none;
  white-space: nowrap;
}

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

details.warum summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-rund);
  border: 1.5px solid var(--beere);
  font-size: 10px;
  font-weight: 600;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Aufgeklappt hebt sich der Hinweis klar vom Formular ab (Julia 22.09.2026):
   eigene Flaeche, Rahmen und ein kraeftiger Balken in Beere. */
details.warum p {
  margin: 10px 0 2px;
  font-size: var(--schrift-s);
  font-weight: 400;
  color: var(--text-sanft);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--beere);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  max-width: 640px;
  line-height: 1.55;
}

/* Das Fragezeichen wird beim Aufklappen gefuellt - man sieht, was offen ist. */
details.warum[open] > summary::before {
  background: var(--beere);
  color: var(--weiss);
}

/* Steht der Aufklapper unter einem Feld-Label (textfeld mit "warum"),
   darf die ganze Zeile die Breite nutzen. */
.feld > .frage-kopf > details.warum { margin-left: auto; }

/* „Automatisch enthalten"-Aufklapper */
details.auto-box,
div.auto-box {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  margin-bottom: 22px;
  overflow: hidden;
}

details.auto-box summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
}

details.auto-box summary::-webkit-details-marker { display: none; }
/* Seit 17.09.2026 im letzten Schritt als offene Box (kein Aufklapper). */
div.auto-box .auto-titel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }

.auto-box .auto-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
  align-items: center;
  justify-content: center;
  flex: none;
}

.auto-box .auto-icon .ikon { width: 16px; height: 16px; }
.auto-box .auto-chevron { margin-left: auto; color: var(--text-leise); display: inline-flex; transition: transform 0.2s ease; }
.auto-box[open] .auto-chevron { transform: rotate(180deg); }
.auto-box .auto-inhalt { padding: 0 16px 16px; }

.auto-box .auto-inhalt p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sanft);
  margin-bottom: 8px;
}

.auto-box .auto-inhalt ul { padding-left: 18px; }
.auto-box .auto-inhalt li { font-size: 14px; font-weight: 400; color: var(--text-sanft); margin-bottom: 2px; }

/* Fuss mit Speicher-Hinweis */
.wizard-fuss { margin-top: 26px; }

.speicher-hinweis {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--schrift-xs);
  color: var(--text-leise);
  margin-bottom: 14px;
}

.speicher-hinweis .ikon { width: 14px; height: 14px; color: var(--gruen); flex: none; }

@media (min-width: 860px) {
  .wizard-karte.wizard-layout { grid-template-columns: 268px 1fr; }
  .wizard-seite { border-right: 1px solid var(--linie); }
  .wizard-haupt { padding: 36px 40px 30px; }
}

@media (max-width: 859px) {
  /* Mobile: detaillierte Fortschritts-Seitenleiste ausblenden – die kompakte
     Leiste ("Schritt X von Y" + Balken) im Kopf bleibt sichtbar (gängige Praxis
     bei mehrstufigen Formularen auf kleinen Screens). */
  .wizard-seite { display: none; }
}

/* ---------- 14b. Generator-Landingpage (System fuer alle Generatoren) ---------- */

/* Hero-Variante: grosses Tool-Icon rechts, buendig an der Inhaltsbreite */
.hero-split:has(.tool-icon) { align-items: center; }

.hero-visual.tool-icon img {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: 0;
}

.hero .stand-zeile {
  margin-top: 16px;
  font-size: var(--schrift-s);
  color: var(--text-leise);
  animation: einblenden 0.5s ease 0.3s both;
}

.hero .stand-zeile b { font-weight: 500; color: var(--beere); }

/* Dienste-Kategorien + Oesterreich-Karte */
.dienste-split {
  display: grid;
  gap: 22px;
  align-items: start;
  margin-top: 24px;
}

.kategorie-chips {
  display: grid;
  gap: 10px;
}

.kategorie-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.kategorie-chip .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
}

.kategorie-chip .icon-kreis .ikon { width: 16px; height: 16px; }

.at-karte {
  background: var(--rosa);
  border-radius: var(--radius-gross);
  padding: 30px 30px;
}

.at-karte .flagge {
  display: inline-block;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-rund);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(127, 32, 82, 0.18);
  margin-bottom: 14px;
}

.at-karte h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
}

.at-karte p {
  font-size: var(--schrift-m);
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.65;
}

/* Leistungs-Karten („Was der Generator erstellt") */
.leistungen {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.leistung {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 22px 24px;
  box-shadow: var(--schatten-sanft);
}

.leistung .icon-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-rund);
  background: var(--rosa);
  color: var(--beere);
}

.leistung .icon-kreis .ikon { width: 20px; height: 20px; }

.leistung strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.leistung p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sanft);
  line-height: 1.6;
}

/* FAQ zweispaltig auf Desktop */
.faq-grid {
  display: grid;
  gap: 0 18px;
  align-items: start;
}

/* Artikel-Teaser-Karten */
.teaser-karten {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.teaser-karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 20px 22px;
  text-decoration: none;
  box-shadow: var(--schatten-sanft);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.teaser-karte:hover {
  transform: translateY(-3px);
  border-color: rgba(127, 32, 82, 0.35);
  box-shadow: var(--schatten-karte);
}

.teaser-karte .kicker { font-size: 11.5px; letter-spacing: 0.09em; }

.teaser-karte strong {
  font-size: var(--schrift-l);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 5px 0 10px;
}

.teaser-karte .meta {
  margin-top: auto;
  font-size: var(--schrift-xs);
  color: var(--text-leise);
}

.alle-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--beere);
  text-decoration: none;
}

.alle-link:hover { text-decoration: underline; }

/* ---------- 15. Animation + Responsive ---------- */

@keyframes einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 720px) {
  .hero h1 { font-size: 47px; }
  .hero-split { grid-template-columns: 0.95fr 1.2fr; gap: 36px; }
  .nutzen-split { grid-template-columns: 1fr 1.2fr; gap: 36px; }
  .zahlen { flex-wrap: nowrap; }
  .info-punkte { grid-template-columns: 1fr 1fr; }
  .wissen-teaser { grid-template-columns: 1.1fr 1fr; }
  .dienste-split { grid-template-columns: 1.55fr 1fr; }
  .kategorie-chips { grid-template-columns: 1fr 1fr; }
  .leistungen { grid-template-columns: 1fr 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr 1fr; }
  .teaser-karten { grid-template-columns: repeat(4, 1fr); }
  .hero-split:has(.tool-icon) { grid-template-columns: 2fr 1fr; }
  .cta-band-voll .container { grid-template-columns: 1.7fr auto; }
  .prosa-karte { padding: 40px 44px; }
  .cluster-karten { grid-template-columns: 1fr 1fr; }
  .blog-liste { grid-template-columns: 1fr 1fr; }
  .karten { grid-template-columns: 1fr 1fr 1fr; }
  .schritte { grid-template-columns: 1fr 1fr 1fr; }
  .generator-karten { grid-template-columns: 1fr 1fr; }
  .wizard-karte { padding: 42px 48px; }
}

@media (min-width: 1000px) {
  .generator-karten { grid-template-columns: repeat(4, 1fr); }
  .cluster-karten { grid-template-columns: repeat(3, 1fr); }
  .cluster-karte.bald-cluster { grid-column: 1 / -1; flex-direction: row; gap: 22px; text-align: left; padding: 20px 28px; }
  .cluster-karte.bald-cluster .blob { margin-bottom: 0; flex: none; }
  .blog-liste { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 719px) {
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 33px; }
  .hero-visual { max-width: 440px; margin: 0 auto; }
  .sektion-kopf h2 { font-size: 26px; }
  .nutzen-split h2 { font-size: 26px; }
  .generator-karte { padding: 22px 20px 0; }
  .karten-status { width: calc(100% + 40px); margin: 16px -20px 0; padding: 12px 20px; }
  .at-band { padding: 20px 22px; }
  .wissen-teaser .teaser-text { padding: 28px 24px; }
  .cta-band, .webdesign-banner { padding: 34px 26px; }
  .wizard-karte { padding: 26px 20px; }
  footer.site-footer { border-radius: 18px 18px 0 0; }
  .cta-band-voll { border-radius: 18px 18px 0 0; }

  /* Hero-Vertrauensbadges: Icon ÜBER dem Text, alle drei nebeneinander in einer Reihe */
  .zahlen { flex-wrap: nowrap; gap: 8px; margin-top: 26px; }
  .zahl { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
  .zahl .check-kreis.umriss { margin-top: 0; }
  .zahl strong, .zahl span { white-space: normal; }
  .zahl strong { font-size: var(--schrift-xs); line-height: 1.25; }
  .zahl span { font-size: 12.5px; line-height: 1.3; }

  /* Generator-Hero: kleines Icon oben rechts auf Hoehe der Ueberschrift */
  .hero-split:has(.tool-icon) { position: relative; }
  .hero-visual.tool-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    margin: 0;
    animation: none;
  }
  .hero-visual.tool-icon img { width: 82px; max-width: 82px; margin: 0; }
  .hero-split:has(.tool-icon) .kicker,
  .hero-split:has(.tool-icon) h1 { padding-right: 98px; }

  /* Responsives Menue: Burger statt umbrechender Nav */
  header.site-header .container { flex-wrap: nowrap; align-items: center; position: relative; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 9px 8px;
    margin-left: auto;
    background: none;
    border: 0;
    border-radius: var(--radius-klein);
    cursor: pointer;
    flex: none;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 24px;
    right: 24px;
    flex-direction: column;
    align-items: stretch;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 6px;
    box-shadow: 0 18px 40px rgba(100, 25, 65, 0.12);
  }
  .site-header.nav-offen .site-nav { display: flex; }
  .site-nav a {
    margin-left: 0;
    padding: 13px 16px;
    font-size: 16px;
    border-radius: 10px;
    color: var(--text-sanft);
  }
  .site-nav a:hover, .site-nav a.aktiv { background: var(--sonne-hell); color: var(--beere); }
  .nav-offen .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-offen .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-offen .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Rechts-Updates (Band auf /wissen/, seit 25.08.2026) ---------- */
.updates-band {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 24px 26px; margin: 28px 0 8px;
}
.updates-band .band-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.updates-band .band-kopf h2 { font-size: 22px; margin: 0 0 4px; }
.updates-band .band-kopf p { margin: 0; color: var(--text-sanft); font-size: 14.5px; }
.updates-alle { font-size: 14.5px; font-weight: 600; color: var(--beere); white-space: nowrap; }
.updates-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.updates-liste li + li { border-top: 1px solid var(--linie); }
.updates-liste a {
  display: flex; gap: 14px; align-items: baseline; padding: 11px 0;
  text-decoration: none; color: var(--text); transition: color .15s ease;
}
.updates-liste a:hover { color: var(--beere); }
.updates-liste time { font-size: 13px; color: var(--text-leise); font-variant-numeric: tabular-nums; flex: none; min-width: 96px; }
.updates-liste span { font-size: 15.5px; font-weight: 500; line-height: 1.45; }
@media (max-width: 640px) {
  .updates-band .band-kopf { flex-direction: column; align-items: flex-start; }
  .updates-liste a { flex-direction: column; gap: 2px; }
}

/* ---------- Sprungmarken: Abstand unter dem klebenden Header ---------- */
/* Der Header ist position:sticky – ohne scroll-margin landet ein Anker
   direkt unter der Leiste (Julias Befund 25.08.2026 auf der SEO-Seite). */
:target { scroll-margin-top: 130px; }
[id] { scroll-margin-top: 130px; }
@media (max-width: 719px) { :target, [id] { scroll-margin-top: 110px; } }

/* ---------- Nach-oben-Knopf (seit 25.08.2026) ---------- */
/* Wird von assets/nav.js auf jeder Seite erzeugt – nicht je Seite einbauen.
   Unten rechts, weil der Consent-Banner unten links sitzt. */
.nach-oben {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--beere);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(100, 25, 65, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background .2s ease;
  z-index: 90; /* unter Consent-Banner und Popups */
}
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--beere-dunkel); }
.nach-oben svg { width: 22px; height: 22px; }
@media (max-width: 719px) {
  .nach-oben { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .nach-oben { transition: opacity .01s, visibility .01s; transform: none; }
}

/* ---- Fristen-Übersicht im Wizard ----------------------------------------
   Zeigt vor der Entscheidung, was tatsächlich im Dokument landet und woher
   die Frist kommt. Anlass: Julia am 07.09.2026 – wer "nur Kriterien" wählt,
   weiß sonst nicht, was das heißt, und die fertige Erklärung liest niemand. */
.frist-uebersicht {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0 22px;
}
.frist-titel {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-leise);
}
/* Breite Tabellen dürfen die Seite nicht schieben – sie scrollen in sich. */
.frist-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.frist-tabelle thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.frist-tabelle td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  line-height: 1.5;
}
.frist-tabelle tr:last-child td { border-bottom: none; }
.frist-tabelle td:first-child { color: var(--text); min-width: 170px; }
.frist-tabelle td:nth-child(2) { color: var(--text-sanft); min-width: 150px; }
.frist-tabelle td textarea { display: block; resize: vertical; line-height: 1.4; width: 100%; min-width: 220px; font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--text); }
.frist-tabelle td textarea:focus { outline: none; border-color: var(--beere); }

.frist-marke {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.frist-fix { background: var(--rosa-tief); color: var(--beere-dunkel); }
.frist-begruendet { background: var(--sonne-hell); color: #7a5c00; }
.frist-frei { background: #eef1f0; color: var(--text-leise); }
.frist-quelle {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-leise);
  max-width: 46ch;
}
.frist-leer { color: var(--text-leise); font-size: 13px; }

@media (max-width: 620px) {
  .frist-tabelle thead { display: none; }
  .frist-tabelle tbody, .frist-tabelle tr, .frist-tabelle td { display: block; width: 100%; }
  .frist-tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .frist-tabelle tr:last-child { border-bottom: none; }
  .frist-tabelle td { border: none; padding: 2px 0; }
  .frist-tabelle td:first-child { font-weight: 600; }
  .frist-quelle { max-width: none; }
}

/* ============================================================================
   DANKE-SEITEN (17.09.2026) – Kauf (/kauf-danke/), kostenlose Nutzung
   (/kostenlos-danke/) und Feedback teilen sich Karte, Haken und die Empfehlungen
   ("Kennst du schon?", Komponente src/components/DankeEmpfehlungen.astro).
   Konfetti: public/assets/konfetti.js.
   BREITE (Julia 17.09.2026): ALLE Danke-Seiten nutzen .danke-hero + .danke-wrap
   (= --text-breite). Keine seiteneigenen Hero-/Wrap-Klassen mehr anlegen.
   ========================================================================== */
.danke-hero { position: relative; overflow: hidden; background: var(--papier); padding: 48px 0 80px; }
.danke-wrap { max-width: var(--text-breite); margin: 0 auto; }
.danke-karte { text-align: center; }
.danke-haken {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: var(--radius-rund);
  background: var(--rosa); color: var(--beere);
  display: flex; align-items: center; justify-content: center;
}
.danke-karte h1 { font-size: 29px; font-weight: var(--fett-halb); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 12px; }
.danke-karte .danke-untertitel { color: var(--text-sanft); font-size: 17px; line-height: 1.6; max-width: 540px; margin: 0 auto; }
.danke-karte .danke-untertitel strong { color: var(--text); }

.danke-karte .danke-frage, .feedback-danke .danke-frage { font-size: 23px; font-weight: var(--fett-halb); letter-spacing: -0.01em; margin: 36px 0 2px; }
.danke-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-m); text-align: left; margin: var(--abstand-l) 0 var(--abstand-xs); }
.danke-cta {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  background: var(--weiss); text-decoration: none; color: var(--text);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.danke-cta:hover { border-color: var(--beere); box-shadow: var(--schatten-karte); transform: translateY(-4px); }
.danke-cta-bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--rosa); }
.danke-cta-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.danke-cta:hover .danke-cta-bild img { transform: scale(1.045); }
.danke-cta-inhalt { display: flex; flex-direction: column; gap: var(--abstand-xs); padding: 20px 22px 22px; flex: 1; }
.danke-cta-kicker {
  align-self: flex-start; font-size: 11.5px; font-weight: var(--fett-halb); letter-spacing: .08em; text-transform: uppercase;
  color: var(--beere); background: var(--rosa); padding: 4px 10px; border-radius: var(--radius-rund);
}
.danke-cta-kicker.sonne { color: var(--sonne-dunkel); background: var(--sonne-hell); }
.danke-cta strong { font-size: 19px; font-weight: var(--fett-halb); letter-spacing: -0.01em; line-height: 1.25; }
.danke-cta-text { font-size: var(--schrift-m); color: var(--text-sanft); line-height: 1.55; }
.danke-cta-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-xs);
  align-self: flex-start; margin-top: auto; padding: 11px 20px;
  background: var(--beere); color: #fff; border-radius: var(--radius);
  font-size: var(--schrift-m); font-weight: var(--fett-halb); box-shadow: var(--schatten-knopf);
  transition: background .2s ease;
}
.danke-cta:hover .danke-cta-knopf { background: var(--beere-dunkel); }
.danke-cta-knopf .ikon { width: 17px; height: 17px; transition: transform .2s ease; }
.danke-cta:hover .danke-cta-knopf .ikon { transform: translateX(3px); }
.danke-zurueck { margin-top: 20px; }
.danke-zurueck a { font-size: var(--schrift-m); color: var(--text-leise); }
@media (max-width: 640px) { .danke-ctas { grid-template-columns: 1fr; } }

/* ============================================================================
   RECHTS-UPDATES (17.09.2026) – Vorlage src/layouts/UpdateLayout.astro,
   Übersicht /wissen/updates/, Komponenten UpdateHinweis + WissenZeitleiste.
   Hero, Kicker, Metazeile, Trennlinie und Fließtext kommen von den
   Wissensartikeln (.artikel-hero, .artikel-inhalt) – hier nur das Eigene.
   ========================================================================== */
.update-hero h1 { max-width: var(--text-breite); }
.update-hero .untertitel { max-width: var(--text-breite); }
/* Hero enger an die Trennlinie (17.09.2026 abends, Julia: zu viel Abstand
   zwischen „Veröffentlicht" und Linie) + Erklärbox im Hero der Übersicht */
.update-hero { padding-bottom: var(--abstand-xxs); }
.update-hero .untertitel + .untertitel { margin-top: var(--abstand-s); }
.update-cta { display: flex; flex-wrap: wrap; gap: var(--abstand-s); margin-top: var(--abstand-m); }
/* Meldung: Text 2/3, Bild 1/3. Mobil rutscht das Bild zwischen H1 und
   Beschreibung (Julia 17.09.2026) – daher drei Rasterbereiche statt zwei Spalten. */
.update-hero-split {
  display: grid;
  gap: 0 var(--abstand-xl);
  grid-template-areas: "kopf" "bild" "text";
}
.update-kopf { grid-area: kopf; }
.update-text { grid-area: text; }
.update-bild { grid-area: bild; margin-top: var(--abstand-m); }
.update-bild img { max-width: 400px; margin: 0; }
@media (min-width: 720px) {
  .artikel-hero .update-hero-split,
  .artikel-hero .update-hero-split:has(.artikel-bild) {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "kopf bild" "text bild";
  }
  .update-bild { margin-top: 0; align-self: center; }
  .update-bild img { margin-left: auto; }
}

.update-layout {
  display: grid;
  gap: var(--abstand-xl);
  align-items: start;
  padding-bottom: var(--abstand-xxl);
}
.update-inhalt { min-width: 0; max-width: var(--text-breite); }
.update-seite { display: grid; gap: var(--abstand-m); }
@media (min-width: 1000px) {
  .update-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .update-seite { position: sticky; top: calc(var(--kopf-hoehe) + var(--abstand-m)); }
}

.update-hinweis {
  background: var(--sonne-hell);
  border-left: 3px solid var(--sonne-dunkel);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 var(--abstand-l);
}
.update-inhalt > .update-hinweis:not(:first-child) { margin-top: var(--abstand-l); }
.update-hinweis > strong { display: block; font-size: var(--schrift-l); font-weight: var(--fett-halb); margin-bottom: 4px; }
.update-hinweis p { margin: 0; font-size: var(--schrift-m); line-height: 1.6; color: var(--text-sanft); }
.update-hinweis p strong { color: var(--text); }

.update-quelle {
  font-size: var(--schrift-m);
  padding: 14px 18px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.update-quelle span { color: var(--text-leise); }
.update-quelle a { color: var(--beere); }
.update-haftung { margin-top: var(--abstand-m); font-size: var(--schrift-s); color: var(--text-leise); line-height: 1.6; }
.update-zurueck { margin-top: var(--abstand-m); font-size: var(--schrift-m); }
.update-zurueck a { color: var(--beere); text-decoration: none; }
.update-zurueck a:hover { text-decoration: underline; }

.update-liste { display: grid; gap: var(--abstand-m); }
.update-karte {
  display: block; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 22px 24px; text-decoration: none; color: var(--text);
  transition: border-color var(--uebergang), box-shadow .25s ease, transform var(--uebergang);
}
.update-karte:hover { border-color: var(--beere); box-shadow: var(--schatten-karte); transform: translateY(-3px); }
.update-karte h2 { font-size: 20px; font-weight: var(--fett-halb); line-height: 1.3; margin: 6px 0; letter-spacing: -0.01em; }
.update-karte p { margin: 0 0 12px; color: var(--text-sanft); font-size: var(--schrift-l); line-height: 1.6; }
.update-leer { color: var(--text-sanft); }

/* Zeitleiste in der Seitenspalte */
.zeitleiste-karte { background: var(--rosa); border-radius: var(--radius-gross); padding: 22px 24px; }
.zeitleiste-titel {
  font-size: var(--schrift-xxs); font-weight: var(--fett-halb); letter-spacing: .1em;
  text-transform: uppercase; color: var(--beere); margin-bottom: var(--abstand-s);
}
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste li { position: relative; padding: 0 0 var(--abstand-m) 20px; border-left: 2px solid var(--rosa-tief); }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: var(--radius-rund); background: var(--weiss); border: 2px solid var(--beere);
}
.zeitleiste-meta { display: block; font-size: var(--schrift-xxs); color: var(--text-leise); margin-bottom: 2px; }
.zeitleiste a { font-size: var(--schrift-m); font-weight: var(--fett-mittel); color: var(--text); text-decoration: none; line-height: 1.4; }
.zeitleiste a:hover { color: var(--beere); }
.zeitleiste-alle { display: inline-block; margin-top: var(--abstand-m); font-size: var(--schrift-s); color: var(--beere); font-weight: var(--fett-mittel); text-decoration: none; }
.zeitleiste-alle:hover { text-decoration: underline; }

/* ============================================================================
   GENERATOR-SEITEN: Sprung-Knopf zum Wizard (17.09.2026) – Komponente
   src/components/GeneratorSprung.astro. Aufbau aller Generator-Seiten:
   Hero → Inhalte (2× Sprung-Knopf dazwischen) → FAQ → Wizard → Mehr zum Thema.
   ========================================================================== */
.generator-sprung { display: flex; justify-content: center; padding-top: var(--abstand-l); padding-bottom: var(--abstand-s); }


/* ---- Eine Zeilenform fuer alles Anklickbare (22.09.2026) -----------------
   Haekchen, Einfachauswahl und Ja/Nein sehen gleich aus: ein Kasten je
   Antwort (.modul), Kaestchen bzw. Kreis links, Text rechts, gewaehlt = rosa.
   Beschreibungen sind eine leise zweite Zeile. Vorher gab es Dropdowns,
   Karten mit Titel + Text und lose Haekchen nebeneinander. */
.modul > label.checkzeile { margin: 0; padding: 10px 0; align-items: center; font-size: var(--schrift-m); font-weight: 400; }
.modul > label.checkzeile input { margin-top: 0; }
.modul > label.checkzeile > span { line-height: 1.4; }
.modul > label.checkzeile small { display: block; font-size: var(--schrift-s); color: var(--text-leise); margin-top: 2px; }
.wahl-liste { margin-bottom: 4px; }
.feld > .modul { margin-bottom: 8px; }
/* Haekchen innerhalb eines aufgeklappten Blocks bleiben schlicht - sonst
   staende ein Kasten im Kasten. */
.folgefelder .modul, .modul-optionen .modul, .feld-eingerueckt .modul {
  border: 0; padding: 0; background: transparent; margin-bottom: 4px;
}
.folgefelder .modul > label.checkzeile, .modul-optionen .modul > label.checkzeile { padding: 6px 0; }

/* Letzter Schritt "Rechtliche Hinweise und Nutzungsbedingungen" (22.09.2026):
   die Hinweise als ruhiger Fliesstext, darunter die Zustimmungen. Ersetzt den
   gelben Kasten auf Schritt 1. */
.hinweis-text { margin-bottom: var(--abstand-m); max-width: 680px; }
.hinweis-text p { font-size: var(--schrift-m); line-height: 1.6; color: var(--text-sanft); margin: 0 0 10px; }
.hinweis-text p:last-child { margin-bottom: 0; }

/* Kein Kreis mehr (Julia 22.09.2026): auch eine Einfachauswahl bekommt das
   eckige Kaestchen, damit alles Anklickbare gleich aussieht. Kaestchen und
   Kreis werden beide selbst gezeichnet - so sind sie garantiert identisch. */
.checkzeile input[type="checkbox"],
.checkzeile input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--text-leise);
  border-radius: 4px;
  background: var(--weiss);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.checkzeile input[type="checkbox"]:hover,
.checkzeile input[type="radio"]:hover { border-color: var(--beere); }
.checkzeile input[type="checkbox"]:checked,
.checkzeile input[type="radio"]:checked {
  border-color: var(--beere);
  background: var(--beere) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 13px no-repeat;
}
.checkzeile input[type="checkbox"]:focus-visible,
.checkzeile input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(127, 32, 82, 0.18); }

/* Unterfragen unter einem Dienst (22.09.2026): fette Frage links, die
   Antworten in derselben Zeile, ein leiser Hinweis darunter. Spart Platz
   gegenueber den frueheren Karten mit Titel + Text. */
.unterfrage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 6px 0; }
.unterfrage + .unterfrage { border-top: 1px solid var(--linie); }
.unterfrage-label { font-size: var(--schrift-m); font-weight: var(--fett-halb); color: var(--text); }
.unterfrage-hinweis { flex-basis: 100%; font-size: var(--schrift-s); color: var(--text-leise); line-height: 1.45; }
.unterfrage > .modul { border: 0; padding: 0; background: transparent; margin: 0; }
.unterfrage > .modul > label.checkzeile { padding: 2px 0; font-weight: var(--fett-halb); }
.optionen-inline { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.optionen-inline .checkzeile { margin: 0; padding: 2px 0; align-items: center; font-size: var(--schrift-m); }
.optionen-inline .checkzeile.aktiv > span { color: var(--beere); font-weight: var(--fett-halb); }
.modul-optionen > .unterfrage:first-child { padding-top: 0; }

/* Handy (22.09.2026, Mobil-Pruefung): Unterfragen und aufgeklappte Bloecke
   ruecken weniger ein - bei 375px Breite blieben sonst nur ~200px fuer die
   Antworten, und Inline-Optionen brachen in zwei Zeilen. */
@media (max-width: 719px) {
  .modul .modul-optionen, .modul-optionen { margin-left: 8px; padding-left: 12px; padding-right: 12px; }
  .folgefelder { margin-left: 4px; padding-left: 12px; padding-right: 12px; }
  .wizard-fuss .speicher-hinweis { flex-wrap: wrap; }
}

/* Tabellen am Handy (Julia 22.09.2026): statt seitlich zu scrollen, klappt
   jede Zeile zu einem Block - erste Spalte als Titel, die anderen darunter.
   Bei drei und mehr Spalten steht vor jeder Zelle die Spaltenueberschrift
   (data-label, gesetzt vom kleinen Script im Artikel-Layout). */
@media (max-width: 640px) {
  .tabellen-karte { overflow-x: visible; }
  .tabellen-karte table { min-width: 0; }
  .tabellen-karte thead { display: none; }
  .tabellen-karte table, .tabellen-karte tbody, .tabellen-karte tr, .tabellen-karte td { display: block; }
  .tabellen-karte tr { padding: 12px 16px; border-top: 1px solid var(--linie); }
  .tabellen-karte tr:first-child { border-top: 0; }
  .tabellen-karte td { padding: 2px 0; border-top: 0; white-space: normal; }
  .tabellen-karte td:first-child { font-size: 15px; padding-bottom: 4px; white-space: normal; }
  .tabellen-karte td:first-child:empty { display: none; }
  .tabellen-karte table.spalten-3 td:not(:first-child)::before,
  .tabellen-karte table.spalten-4 td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-top: 6px;
  }
}

/* Gelbe Knoepfe tragen IMMER schwarzen Text (Julia 22.09.2026) - auch dort,
   wo eine Link-Regel des Umfelds (.artikel-inhalt a, .beratung-cta a ...)
   sonst Beere durchdruecken wuerde. */
a.knopf-hell, .artikel-inhalt a.knopf-hell, .beratung-cta a.knopf-hell, .cta-band-voll a.knopf-hell,
a.knopf-hell:hover, a.knopf-hell:visited, .artikel-inhalt a.knopf-hell:hover { color: var(--text); text-decoration: none; }
a.knopf-hell .ikon { color: var(--text); stroke: currentColor; }

/* ---- Wissensbereich (Julia 22.09.2026) ----------------------------------
   Die Guide-Kachel ist als Ganzes der Link; Suche und Themenfilter stehen
   unter "Alle Artikel" statt im Hero. */
a.cluster-karte { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
a.cluster-karte:hover { text-decoration: none; }
a.cluster-karte .pillar-link { margin-top: auto; }
.artikel-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 22px; }
.artikel-filter .suchfeld { flex: 1 1 280px; max-width: 420px; margin: 0; }
.artikel-filter .themen-chips { margin: 0; }
@media (min-width: 900px) { .cluster-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* "Warum fragen wir das?" (22.09.2026): zu steht der Aufklapper rechts neben
   der Frage; offen nimmt er die ganze Zeile ein und bleibt LINKS buendig -
   vorher hing er beim Aufklappen in der Mitte. */
details.warum[open] { flex: 1 1 100%; margin-left: 0; }
.feld > .frage-kopf > details.warum[open] { margin-left: 0; }
details.warum > summary { justify-content: flex-start; }
details.warum[open] > p { max-width: none; }

/* ---- Wissen: Guides-Band (Julia 22.09.2026, zweite Fassung) -------------
   Der Hero ohne Suchfeld ist kuerzer. Das Band in Beere ist so breit wie der
   Inhalt (nicht die volle Seite), die weissen Kacheln ruecken darin ein.
   Kompakter: weniger Luft unter dem Bild, fettes Thema-Label, kuerzere
   Abstaende, halb so viel Platz unter dem Link. Die Kachel setzt die
   Textfarbe explizit - sonst erbt die H3 das Weiss des Bands. */
.hero.hero-wissen { padding-bottom: 20px; }
.guides-band {
  position: relative;
  background: linear-gradient(120deg, var(--beere), var(--beere-dunkel) 90%);
  border-radius: var(--radius-gross);
  color: var(--weiss);
  padding: 30px 28px 30px;
  margin: 0 0 32px;
}
.guides-band .sektion-kopf h2 { color: var(--weiss); }
.guides-band .sektion-kopf p { color: rgba(255, 255, 255, 0.85); }
.guides-band .cluster-karten { padding: 0; gap: 18px; }
.guides-band .cluster-karte { color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); border-color: transparent; padding: 22px 24px 12px; }
.guides-band .cluster-karte:hover { transform: translateY(-4px); }
.guides-band .cluster-karte .cluster-bild { margin-bottom: 0; }
.guides-band .cluster-karte .kicker { color: var(--beere); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.guides-band .cluster-karte h3 { color: var(--text); margin: 2px 0 3px; }
.guides-band .cluster-karte > p { margin-bottom: 6px; }
.guides-band .cluster-karte .meta-zeile { margin: -2px 0 8px; }