/* ============================================================
   werkgesellen.de — Stylesheet
   ============================================================
   Eigene Marke, Stand Oktober 2026:

   - KOBALT als Markenfarbe (Kopfbereich, Hero, Zeichen), GELB als
     Signal fuer Knoepfe und Hervorhebungen, Tinte-Blau fuer Text.
   - Bildmarke: zwei ineinander greifende Winkel bilden ein W
     ("Zwei Gesellen, ein Werk"). Wortmarke "werkgesellen" in Barlow ExtraBold.
   - Kanten flach und eckig wie das Zeichen, keine Verlaeufe.
   - Duzt die Betriebe (wie Kundenzugang und Mailtexte).

   Keine externen Ressourcen: Barlow liegt unter assets/fonts, die
   Monospace kommt aus dem System. Die Seite laedt nichts nach.
   Grundlage: www_uhl-tools/assets/css/style.css (Stand v15).
   ============================================================ */

/* ── Schrift ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* ── Farben & Masse ──────────────────────────────────────── */
:root {
  /* Marke: bleibt in beiden Modi gleich (Kopfbereich, Hero, Zeichen). */
  --brand: #2338ff;
  --brand-ink: #0b1033;
  --on-brand: #ffffff;
  --signal: #ffd60a;
  --on-signal: #0b1033;

  --paper: #f7f6f2;
  --surface: #ffffff;
  --sunk: #eeedf7;
  --line: #dcdbe8;
  --line-strong: #bdbcd0;
  --ink: #0b1033;
  --muted: #4f5378;
  --accent: #2338ff;
  --accent-hover: #1526c9;
  --accent-soft: #e8eaff;
  --accent-line: #b7bdff;
  /* Schrift AUF der Akzentflaeche. Hell-Modus: dunkler Akzent, also
     weisse Schrift. Dunkel-Modus: heller Akzent, also dunkle Schrift.
     Als Token, damit es nicht auf gestapelte Ueberschreibungen
     hinauslaeuft, bei denen die Reihenfolge entscheidet. */
  --on-accent: #ffffff;

  --mono: var(--sans);
  --sans: 'Barlow', system-ui, -apple-system, Segoe UI, sans-serif;

  --radius: 6px;
  --radius-sm: 3px;
  --max-w: 1120px;
  --gutter: clamp(1.125rem, 4vw, 2rem);
}

:root[data-theme="dark"] {
  --paper: #0a0e2a;
  --surface: #121842;
  --sunk: #0d1235;
  --line: #232a5e;
  --line-strong: #3a4290;
  --ink: #eef0ff;
  --muted: #a4a9d6;
  --accent: #8c98ff;
  --accent-hover: #aab3ff;
  --accent-soft: #1a2275;
  --accent-line: #3a47c0;
  --on-accent: #0a0e2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a0e2a;
    --surface: #121842;
    --sunk: #0d1235;
    --line: #232a5e;
    --line-strong: #3a4290;
    --ink: #eef0ff;
    --muted: #a4a9d6;
    --accent: #8c98ff;
    --accent-hover: #aab3ff;
    --accent-soft: #1a2275;
    --accent-line: #3a47c0;
    --on-accent: #0a0e2a;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--signal);
  color: var(--on-signal);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Das Werkzeug-Signal: Monospace fuer alles, was Angabe ist und
   nicht Satz — Kicker, Preise, Domains, Kennzeichnungen. */
.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.875rem;
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.6rem;
  vertical-align: 0.05em;
  background: var(--accent);
}

/* ── Kopfbereich ─────────────────────────────────────────── */
/* Der Kopf ist immer Kobalt, hell wie dunkel: er traegt die Marke. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand);
  color: var(--on-brand);
}
.site-header :focus-visible,
.hero :focus-visible,
.cta :focus-visible,
.gruender :focus-visible { outline-color: var(--signal); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--on-brand);
  line-height: 1;
}
.nav-logo:hover { color: var(--on-brand); }
.logo-mark { width: 48px; height: 32px; flex: none; display: block; }
.logo-name { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; }
.logo-name span { color: var(--signal); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  white-space: nowrap;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: #ffffff; }
/* Die aktive Seite ist markiert, nicht nur eingefaerbt - Farbe
   allein reicht fuer Farbfehlsichtige nicht. */
.nav-links a[aria-current="page"] {
  color: #ffffff;
  border-bottom-color: var(--signal);
}
.nav-links a.nav-cta {
  background: var(--signal);
  color: var(--on-signal);
  padding: 0.6rem 1.1rem;
  border: 0;
}
.nav-links a.nav-cta:hover { background: #ffe14d; color: var(--on-signal); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  color: #ffffff;
  padding: 0.4rem;
  cursor: pointer;
}

/* ── Knöpfe ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Auf Kobalt und dunklen Flaechen: gelber Hauptknopf, weisser Rand. */
.hero .btn-primary,
.cta .btn-primary {
  background: var(--signal);
  color: var(--on-signal);
}
.hero .btn-primary:hover,
.cta .btn-primary:hover { background: #ffe14d; color: var(--on-signal); }
.hero .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); }
.hero .btn-ghost:hover { color: #ffffff; border-color: #ffffff; }
.gruender .btn-primary { background: var(--brand-ink); color: #ffffff; }
.gruender .btn-primary:hover { background: #1b2470; color: #ffffff; }

/* ── Abschnitte ──────────────────────────────────────────── */
.section { padding: clamp(2.25rem, 5vw, 3.75rem) 0; }
/* Schmale Baender (z. B. Website auf Knopfdruck unter dem Kopf) */
.section-knapp { padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: var(--sunk); }

.section-head { max-width: 760px; margin-bottom: 1.75rem; }
.section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.is-centered .kicker { margin-left: auto; margin-right: auto; }

.section-title { font-size: clamp(1.625rem, 3.4vw, 2.375rem); margin-bottom: 0.6rem; }
/* Auf den Unterseiten ist der erste Abschnittstitel die h1 und
   damit das Thema der Seite - der darf groesser auftreten. */
h1.section-title { font-size: clamp(1.875rem, 4.5vw, 2.625rem); }
.section-sub { color: var(--muted); font-size: 1.0625rem; margin: 0; }

/* ── Startseite: Kopfbereich ─────────────────────────────── */
/* Der Hero ist eine Kobalt-Flaeche und geht nahtlos aus dem Kopf hervor. */
.hero {
  background: var(--brand);
  color: var(--on-brand);
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2rem, 4.5vw, 3.25rem);
}
/* Die zwei Zeilen ueber der Headline muessen neben der fetten Ueberschrift
   bestehen: der Starttermin als gelbe Marke, die Einordnung als echte Zeile. */
.hero-kopf .bald {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-signal);
  background: var(--signal);
  border: 0;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1rem;
}
.hero-kopf .bald::before { background: var(--on-signal); }
.hero-kopf .kicker {
  font-family: var(--sans);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--signal);
  margin-bottom: 0.75rem;
}
.hero-kopf .kicker::before { content: none; }
/* Links Aussage, Knoepfe und Zusicherungen, rechts gleich der Social-Check.
   Waechst das Formular (ohne Website), bleibt die linke Spalte stehen (sticky),
   statt eine leere Flaeche zu lassen. Am Handy loest sich die linke Spalte auf
   (display: contents): der Check kommt direkt nach der Aussage, vor den Knoepfen. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.hero-links { position: sticky; top: calc(72px + 1.5rem); display: grid; gap: 1.5rem; }
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 54ch;
  margin: 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "check" "tun" "fakten"; }
  .hero-links { display: contents; }
  .hero-kopf { grid-area: kopf; }
  .hero-check { grid-area: check; }
  .hero-actions { grid-area: tun; }
  .hero-facts { grid-area: fakten; }
}

/* Der Social-Check im Kopf: dieselbe Tinten-Karte wie .cta, nur dichter */
.hero-check .cta { padding: clamp(1.25rem, 3vw, 1.75rem); gap: 1.25rem; }
.hero-check .cta h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.hero-check .cta p { font-size: 1rem; }
.hero-check .check-ablauf { margin-top: 1.25rem; padding-top: 1rem; }
.hero-check .check-ablauf li { font-size: 0.75rem; }

/* Die Zusicherungen als Datenzeile, nicht als Fliesstext:
   Monospace und Trennstriche machen sie scanbar. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 1.25rem;
  margin: 0;
  list-style: none;
}
.hero-facts li { display: flex; align-items: center; gap: 0.45rem; }
.hero-facts li::before {
  content: '';
  width: 9px; height: 9px;
  background: var(--signal);
}

/* ── Vergleich (Baukasten / Agentur / Ich) ───────────────── */
.vergleich-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.vergleich-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.625rem 1.5rem;
}
.vergleich-card.is-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.vergleich-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.is-highlight .vergleich-kicker { color: var(--accent); }
.vergleich-card h3 { font-size: 1.125rem; margin-bottom: 1rem; }

.vergleich-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vergleich-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}
/* Zeichen als Pseudo-Element, damit Screenreader die Aussage
   vorlesen und nicht "Kreuz, Kreuz, Kreuz". */
.vergleich-list .is-contra::before,
.vergleich-list .is-pro::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.vergleich-list .is-contra::before { content: '\00d7'; color: var(--line-strong); }
.vergleich-list .is-pro::before { content: '\2713'; color: var(--accent); }

.fazit {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  max-width: 68ch;
}

/* ── Leistungskarten ─────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.625rem 1.5rem;
}
.card-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1.125rem;
}
.card-icon svg { width: 20px; height: 20px; }
.card h2, .card h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

.card--breit { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; }
.card--breit .card-icon { flex: 0 0 auto; margin-bottom: 0; }
.card--breit p { max-width: 70ch; }
@media (max-width: 620px) {
  .card--breit { display: block; }
  .card--breit .card-icon { margin-bottom: 1.125rem; }
}

/* ── Preise ──────────────────────────────────────────────── */
.preis-basis {
  display: grid;
  grid-template-columns: minmax(210px, 270px) 1fr;
  gap: 2rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 2rem 1.875rem;
  margin-bottom: 2.25rem;
}
.preis-kopf h2, .preis-kopf h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.preis-zahl { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.25rem; }
.preis-zahl strong {
  font-family: var(--mono);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.preis-zahl .preis-ab { font-family: var(--mono); font-size: 0.9375rem; color: var(--muted); }
.preis-zahl span { color: var(--muted); font-size: 0.9375rem; }
.preis-setup { font-family: var(--mono); color: var(--muted); font-size: 0.8125rem; }

.preis-was { font-weight: 700; margin-bottom: 0.875rem; }
.preis-liste { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.preis-liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.preis-liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.preis-gratis {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.preis-zwischen { color: var(--muted); margin-bottom: 1.25rem; }

/* 300px Mindestbreite: fuenf Module stehen auf dem Desktop als 3 + 2 statt
   4 + 1 mit einer verwaisten Karte in der zweiten Reihe. */
.modul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
/* Pakete: vier Karten, auf dem Desktop in einer Reihe. */
.paket-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paket-intro { margin-top: 2.75rem; }
.modul.paket p.paket-ersparnis {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.modul.paket p.paket-inhalt { color: var(--ink); margin-bottom: 0.5rem; }
.modul {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.375rem;
}
.modul h2, .modul h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.modul-preis {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9375rem;
  margin-bottom: 0.7rem;
}
.modul-preis span { font-weight: 400; color: var(--muted); font-size: 0.75rem; }

/* Die Einrichtungsgebuehr bekommt eine eigene Zeile, so wie im Basis-Block
   darueber. Vorher stand sie hinter einem Mittelpunkt in derselben Zeile und
   brach dort, wo gerade Platz war - der Betrag blieb oben haengen, "einmalig"
   rutschte allein in die naechste Zeile. Das nowrap haelt Zahl und Wort
   zusammen, auch wenn die Spalte schmal wird. */
.modul-setup { display: block; white-space: nowrap; }
.modul p:not(.modul-preis) { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
/* Welche anderen Bausteine ein Modul braucht - klein und abgesetzt, damit
   es beim Angebot keine Ueberraschung gibt, die Karte aber nicht dominiert. */
.modul p.modul-voraussetzung {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

.preis-fuss {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 64ch;
}

/* ── Referenzen ──────────────────────────────────────────── */
.referenzen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}
.ref-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ref-preview {
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
/* Angedeutete Browserleiste — die Vorschau soll als Website
   lesbar sein, ohne dass ein Screenshot noetig waere. */
.ref-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background: rgba(0, 0, 0, 0.28);
}
.ref-preview::after {
  content: '\25cf \25cf \25cf';
  position: absolute;
  top: 4px; left: 12px;
  font-size: 8px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.45);
}
.ref-name { font-size: 1.375rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-top: 8px; }
.ref-branche {
  font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.ref-domain {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}
.ref-preview-kneipe { background: linear-gradient(150deg, #0d1a12, #243a2c); }
.ref-preview-kneipe .ref-branche { color: #d9a441; }
.ref-preview-womoroute { background: linear-gradient(150deg, #1a3018, #3a5e30); }
.ref-preview-womoroute .ref-branche { color: #8fcc78; }
/* Hundetraining Norderstedt: helles Creme-Schema mit Signet-Logo,
   entsprechend dem Redesign der Kundenseite. Deshalb hier eine
   helle Browserleiste statt der dunklen der anderen Karten. */
.ref-preview-hundetraining {
  background: linear-gradient(150deg, #f3efe6, #e6e1d6);
  border-bottom: 1px solid #d5cfc3;
}
.ref-preview-hundetraining::before { background: rgba(44, 55, 66, 0.07); }
.ref-preview-hundetraining::after { color: rgba(44, 55, 66, 0.3); }
.ref-signet {
  width: 40px;
  height: 40px;
  margin-top: 12px;
  border: 2px solid #2c3742;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref-signet::before {
  content: '';
  width: 25px;
  height: 19px;
  background: #2c3742;
  -webkit-mask: url(../img/ref-hundetraining-signet.png) center / contain no-repeat;
  mask: url(../img/ref-hundetraining-signet.png) center / contain no-repeat;
}
.ref-preview-hundetraining .ref-name {
  margin-top: 9px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #2c3742;
}
.ref-preview-hundetraining .ref-branche {
  color: #6d7b87;
  letter-spacing: 0.12em;
  margin-top: 3px;
}
.ref-preview-hundetraining .ref-domain {
  color: rgba(60, 72, 84, 0.6);
  margin-top: 6px;
}
.ref-preview-platzhalter {
  background: var(--sunk);
  border-bottom: 1px dashed var(--line-strong);
}
.ref-preview-platzhalter::before,
.ref-preview-platzhalter::after { content: none; }
.ref-preview-platzhalter .ref-name { color: var(--muted); font-size: 1.125rem; }

.ref-body { padding: 1.375rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ref-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.ref-body h2, .ref-body h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.ref-body p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1rem; }

.ref-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.125rem; padding: 0; }
.ref-tags li {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
}

.ref-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
}
.ref-link:hover { gap: 0.5rem; }
.ref-link svg { width: 13px; height: 13px; }

/* ── Über mich ───────────────────────────────────────────── */
.ueber-grid {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.75rem;
  align-items: start;
  max-width: 720px;
}
/* Kein Foto vorhanden — also ein ehrliches Monogramm statt eines
   generischen Stockbilds. */
.monogramm {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}
.ueber-grid p { font-size: 1.0625rem; }
@media (max-width: 560px) {
  .ueber-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Kontakt ─────────────────────────────────────────────── */
.kontakt-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.15fr);
  gap: 2.5rem;
  align-items: start;
}
.kontakt-intro h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); margin-bottom: 0.875rem; }
.kontakt-intro p { color: var(--muted); }

.kontakt-direct { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.kontakt-direct-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.kontakt-direct-item:hover { border-color: var(--accent); color: var(--ink); }
.kd-icon { display: flex; color: var(--accent); }
.kd-text { display: flex; flex-direction: column; line-height: 1.3; }
.kd-label {
  font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kd-value { font-family: var(--mono); font-size: 0.9375rem; font-weight: 700; }

.kontakt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.form-group label {
  font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group textarea {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  width: 100%;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input:focus,
.form-group textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); opacity: 0.7; }

/* Feldfehler der Formularpruefung. Farbwerte wie bei .kontakt-status.is-error,
   damit beide Fehlerarten gleich aussehen. */
.field-error {
  font-size: 0.8125rem;
  color: #7f1d1d;
  margin: 0.35rem 0 0;
}
.form-group input.is-invalid,
.form-group textarea.is-invalid { border-color: #b91c1c; }
:root[data-theme="dark"] .field-error { color: #f4a7a7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-error { color: #f4a7a7; }
  :root:not([data-theme="light"]) .form-group input.is-invalid,
  :root:not([data-theme="light"]) .form-group textarea.is-invalid { border-color: #e06c6c; }
}

.kf-btn { width: 100%; justify-content: center; margin-top: 0.25rem; }

/* Honigtopf: absichtlich NICHT display:none — manche Bots fuellen
   nur Felder aus, die sie fuer sichtbar halten. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.kontakt-status {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  border: 1px solid var(--line);
}
.kontakt-status.is-success { background: #e8f5ee; border-color: #9fd3b6; color: #14532d; }
.kontakt-status.is-error { background: #fdecec; border-color: #f0b4b4; color: #7f1d1d; }
:root[data-theme="dark"] .kontakt-status.is-success { background: #0d2f1f; border-color: #1d5b3b; color: #8ee0b0; }
:root[data-theme="dark"] .kontakt-status.is-error { background: #3a1616; border-color: #6d2a2a; color: #f4a7a7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kontakt-status.is-success { background: #0d2f1f; border-color: #1d5b3b; color: #8ee0b0; }
  :root:not([data-theme="light"]) .kontakt-status.is-error { background: #3a1616; border-color: #6d2a2a; color: #f4a7a7; }
}

/* ── Abschluss-Aufruf ────────────────────────────────────── */
.cta {
  background: var(--brand-ink);
  border: 1px solid #2a3270;
  border-radius: var(--radius);
  color: #ffffff;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta .kicker { color: #aab3ff; }
.cta .kicker::before { background: var(--signal); }
.cta h2 { font-size: clamp(1.375rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.cta p { color: #c9ccf0; margin: 0; max-width: 52ch; }

/* Social-Check oben im Kopf, offen ab Start. Der Bereich ist hell wie
   dunkel Tinte, darum feste Farben wie bei .cta. Ohne JS bleibt das
   Formular hidden (noscript sichtbar), main.js nimmt hidden weg. */
.check-klappe { flex: 1 1 100%; min-width: 0; }

.check-label,
.check .form-group label {
  display: block;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aab3ff;
  margin-bottom: 0.4rem;
}
.check-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: #8f97d6; }

/* Adresszeile: festes https:// davor, Weiter-Knopf im Feld */
.check-adresse {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #2a3270;
  border-radius: var(--radius-sm);
  padding: 0.3rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.check-adresse:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.18); }
.check-praefix { align-self: center; padding: 0 0.15rem 0 0.6rem; color: #8f97d6; font-size: 1.125rem; user-select: none; }
.check-adresse input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  border: 0;
  padding: 0.6rem 0.4rem 0.6rem 0;
}
.check-adresse input:focus { outline: none; }
.check-adresse input::placeholder { color: #6f77b8; font-weight: 400; }
.check-adresse.is-invalid { border-color: #e06c6c; }
.check-weiter { padding: 0.6rem 1.1rem; flex: none; }

.check-ohne {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.6rem;
  font: inherit;
  font-size: 0.875rem;
  color: #aab3ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.check-ohne:hover { color: #ffffff; }

.check-schritt[data-schritt="2"] { margin-top: 1.25rem; animation: check-ein 0.3s ease both; }
@keyframes check-ein { from { opacity: 0; transform: translateY(6px); } }

.check .form-group input {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: #2a3270;
}
.check .form-group input::placeholder { color: #6f77b8; opacity: 1; }
.check .form-group input:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.check .form-group input.is-invalid { border-color: #e06c6c; }
.check .field-error { color: #f4a7a7; }
.check .einwilligung { color: #c9ccf0; }
.check .einwilligung input { accent-color: var(--signal); }
.check .einwilligung.is-invalid { color: #f4a7a7; }
.check-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.cta .check-hinweis { font-size: 0.8125rem; color: #8f97d6; }
.check-hinweis a { color: #c9ccf0; }
.check .kontakt-status.is-success { background: #0d2f1f; border-color: #1d5b3b; color: #8ee0b0; }
.check .kontakt-status.is-error { background: #3a1616; border-color: #6d2a2a; color: #f4a7a7; }

/* Ohne Website: Kurzprofil, Fotos, Logo, Hausfarbe und der Hinweis auf Website auf Knopfdruck */
.cta .check-kurz-intro { margin: 0 0 1rem; font-size: 0.9375rem; }
.check .form-group textarea {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: #2a3270;
  min-height: 96px;
}
.check .form-group textarea::placeholder { color: #6f77b8; opacity: 1; }
.check .form-group textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.check .form-group textarea.is-invalid { border-color: #e06c6c; }
.cta .check-zaehler { margin: 0.35rem 0 0; font-size: 0.8125rem; color: #8f97d6; }
.cta .check-zaehler.is-ok { color: #8ee0b0; }

.check-material { margin: 0.25rem 0 1.25rem; }
.check-material .check-label { display: block; margin-bottom: 0.25rem; }
.check-fotos {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
}
.check-fotos[hidden] { display: none; }
.check-bild {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #2a3270;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  animation: check-ein 0.25s ease both;
}
.check-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.check-bild img:not([src]), .check-bild img[src=""] { visibility: hidden; }
.check-bild.is-logo img { object-fit: contain; padding: 0.5rem; background: #ffffff; }
.check-bild.is-laedt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: check-laden 1.1s linear infinite;
}
@keyframes check-laden { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.check-bild-art {
  position: absolute; left: 0.3rem; bottom: 0.3rem;
  padding: 0.05rem 0.35rem;
  font-family: var(--mono); font-size: 0.6875rem;
  color: #ffffff; background: rgba(10, 14, 40, 0.8);
  border-radius: 2px;
}
.check-bild-weg {
  position: absolute; top: 0.25rem; right: 0.25rem;
  width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: 50%;
  color: #ffffff; background: rgba(10, 14, 40, 0.8);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
}
.check-bild-weg:hover { background: #b93838; }
.check-bild-weg:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

.check-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0.5rem; }
.check-datei,
.check-farbe {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px dashed #4a53a0;
  border-radius: var(--radius-sm);
  color: #c9ccf0;
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.check-datei:hover,
.check-farbe:hover { border-color: var(--signal); color: #ffffff; }
.check-datei:focus-within,
.check-farbe:focus-within { outline: 2px solid var(--signal); outline-offset: 1px; }
.check-datei input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.check-datei:has(input:disabled) { opacity: 0.45; cursor: not-allowed; border-color: #2a3270; color: #8f97d6; }
.check-farbe input {
  width: 1.4rem; height: 1.4rem;
  padding: 0; border: 1px solid #4a53a0; border-radius: 50%;
  background: none; cursor: pointer;
  opacity: 0.45;
}
.check-farbe.is-gesetzt input { opacity: 1; border-color: #ffffff; }
.check-farbe input::-webkit-color-swatch-wrapper { padding: 0; }
.check-farbe input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.check-farbe input::-moz-color-swatch { border: 0; border-radius: 50%; }
.check .check-rechte { font-size: 0.8125rem; }

.check-tipp {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #2a3270;
  border-left: 3px solid var(--signal);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}
.check-tipp b { display: block; margin-bottom: 0.25rem; color: #ffffff; }
.cta .check-tipp p { max-width: none; font-size: 0.9375rem; }
.cta .check-tipp p.check-hinweis { margin-top: 0.4rem; font-size: 0.8125rem; }
.check-tipp a { color: #ffffff; }

/* Ablaufleiste: der echte Ablauf, Schritt 1 leuchtet nach dem Absenden */
.check-ablauf {
  list-style: none;
  counter-reset: ablauf;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid #2a3270;
}
.check-ablauf li {
  counter-increment: ablauf;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #8f97d6;
}
.check-ablauf li::before {
  content: counter(ablauf);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid #3a4290;
  background: var(--brand-ink);
  font-weight: 800;
  color: #c9ccf0;
}
.check-ablauf li + li::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: 50%;
  width: 100%;
  border-top: 1px dashed #3a4290;
}
.check-ablauf li.is-aktiv { color: #ffffff; font-weight: 700; }
.check-ablauf li.is-aktiv::before {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
  animation: check-puls 1.8s ease-out infinite;
}
.check-ablauf li.is-fertig { color: #c9ccf0; }
.check-ablauf li.is-fertig::before { content: "\2713"; background: #2a3270; border-color: #6f77b8; color: #ffffff; }
.check-ablauf li.is-fertig + li::after,
.check-ablauf li.is-fertig + li.is-fertig::after { border-top-style: solid; border-top-color: #6f77b8; }
.check-ablauf li.is-fehler { color: #f4a7a7; }
.check-ablauf li.is-fehler::before { background: #3a1616; border-color: #e06c6c; color: #f4a7a7; animation: none; }
.cta .check-stand { margin: 1rem 0 0; text-align: center; font-size: 0.9375rem; color: #c9ccf0; max-width: none; }
.cta .check-stand.is-fertig { color: #8ee0b0; font-weight: 700; }
@keyframes check-puls {
  0% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(255, 214, 10, 0); }
}
@media (max-width: 620px) {
  .check-ablauf { grid-template-columns: 1fr; gap: 0.6rem; }
  .check-ablauf li { flex-direction: row; text-align: left; gap: 0.75rem; }
  .check-ablauf li + li::after { display: none; }
  .check-weiter { padding: 0.6rem 0.8rem; }
}
@media (max-width: 420px) {
  .check-weiter-wort { display: none; }
  .check-praefix { font-size: 1rem; padding-left: 0.4rem; }
  .check-adresse input { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .check-adresse,
  .check-datei,
  .check-farbe { transition: none; }
  .check-bild,
  .check-bild.is-laedt::after { animation: none; }
  .check-schritt[data-schritt="2"],
  .check-ablauf li.is-aktiv::before { animation: none; }
}
.art-check { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); }

/* ── Fließtextseiten (Impressum, Datenschutz) ────────────── */
.prose { max-width: 660px; }
.prose h1 { font-size: clamp(1.75rem, 4vw, 2.375rem); margin-bottom: 0.5rem; }
.prose .prose-meta { color: var(--muted); font-size: 0.9375rem; margin-bottom: 2.5rem; }
.prose h2 { font-size: 1.0625rem; margin: 2rem 0 0.5rem; }
.prose p { font-size: 0.9375rem; line-height: 1.7; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-decoration: none;
  margin-bottom: 2rem;
}

/* ── Fußbereich ──────────────────────────────────────────── */
.site-footer {
  padding: 2.5rem 0;
  background: var(--brand-ink);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-footer,
.site-footer p { font-family: var(--mono); font-size: 0.9375rem; color: #a4a9d6; }
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { color: var(--signal); text-decoration: underline; }

/* ── Mobil ───────────────────────────────────────────────── */
/* Sieben Menuepunkte: unter 980px kommt das Klappmenue, darueber wird der Abstand knapper */
@media (max-width: 1150px) { .nav-links { gap: 1.1rem; } }
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--brand);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-links.is-open { display: flex; }
  /* Block statt inline: sonst zaehlt das vertikale Padding nicht zur
     Zeilenhoehe, die Eintraege ueberlappen und die Linie schneidet in
     den naechsten Punkt. 48px Mindesthoehe als Tippflaeche. */
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--signal); }
  .nav-links a.nav-cta { justify-content: center; margin-top: 0.75rem; border-bottom: 0; }
  .nav { position: relative; }
}

@media (max-width: 820px) {
  .kontakt-layout { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 680px) {
  .preis-basis { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.625rem 1.25rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}


/* ════════════════════════════════════════════════════════════
   Werkgesellen: eigene Bausteine
   ════════════════════════════════════════════════════════════ */

/* ── "Bald"-Vermerk ─────────────────────────────────────────── */
.bald {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--signal);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
}
.bald::before { content: ''; width: 7px; height: 7px; background: var(--signal); }

/* ── Die Gesellen: Bereiche mit Namen ───────────────────────── */
/* Drei Bereiche oben, zwei unten; Name und Aufgabe stehen in einer Zeile */
.gesellen-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
.geselle-bereich {
  grid-column: span 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.geselle-bereich:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 900px) {
  .gesellen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geselle-bereich, .geselle-bereich:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 600px) { .gesellen-grid { grid-template-columns: minmax(0, 1fr); } }
.geselle-bereich h3 { font-size: 1.1875rem; margin-bottom: 0.25rem; }
.geselle-bereich > p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 0.6rem; }
.gesellen-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gesellen-liste li {
  padding: 0.4rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.9375rem; line-height: 1.45;
}
.gesellen-liste li:last-child { border-bottom: 0; }
.gesellen-liste b { font-weight: 800; margin-right: 0.35rem; }
.gesellen-liste span { color: var(--muted); }

/* ── So laeuft es: nummerierte Schritte ─────────────────────── */
.schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem;
  counter-reset: schritt;
}
.schritte li {
  counter-increment: schritt;
  border-top: 4px solid var(--accent);
  padding-top: 1rem;
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--accent);
  margin-bottom: 0.4rem;
}
.schritte h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.schritte p { color: var(--muted); font-size: 0.9688rem; }

/* ── Zwei Wege (Selbst / Betreut) ───────────────────────────── */
.wege-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.weg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column;
}
.weg.is-highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.weg-kicker { font-family: var(--mono); font-weight: 800; font-size: 0.875rem; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }
.weg h3 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.weg-preis { font-family: var(--mono); color: var(--accent); margin: 0.25rem 0 1rem; }
.weg-preis strong { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; }
.weg ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.weg li { margin: 0.25rem 0; }
.weg .weg-fuss { margin-top: auto; color: var(--muted); font-size: 0.875rem; }

/* ── Gruenderpreis ──────────────────────────────────────────── */
.gruender {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center;
  background: var(--signal);
  border: 1px solid var(--signal);
  color: var(--on-signal);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.gruender p { color: var(--on-signal); }
.gruender-zahl {
  font-family: var(--mono); font-weight: 700; color: var(--on-signal);
  font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 1;
  text-align: center;
}
.gruender-zahl small { display: block; font-size: 0.75rem; letter-spacing: 0.08em; margin-top: 0.35rem; }
.gruender h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
@media (max-width: 560px) { .gruender { grid-template-columns: 1fr; text-align: left; } .gruender-zahl { text-align: left; } }
/* Startseite: Preise als drei Karten nebeneinander (Selbst, Betreut, Gruenderplaetze) */
.wege-drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.gruender-karte { grid-template-columns: 1fr; align-content: start; gap: 0.75rem; padding: 1.5rem; }
.gruender-karte .gruender-zahl { text-align: left; }
.gruender-karte h3 { font-size: 1.1875rem; }
.gruender-karte .btn { margin-top: 0.75rem; }
.wege-mehr { margin: 1.25rem 0 0; font-weight: 700; }
.preise-weiter { margin: 1.25rem 0 0; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0; font-weight: 700; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--accent); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 1rem; color: var(--muted); max-width: 66ch; }
/* Fragen in zwei Spalten, am Handy untereinander */
.faq-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-items: start; }
.faq-spalten .faq { max-width: none; }
@media (max-width: 820px) {
  .faq-spalten { grid-template-columns: minmax(0, 1fr); }
  .faq-spalten .faq + .faq { border-top: 0; }
}

/* ── Anfrageformular: Auswahl, Haken ────────────────────────── */
.art-wahl { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.art-wahl legend { font-family: var(--mono); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.art-wahl label {
  display: flex; gap: 0.65rem; align-items: flex-start;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; cursor: pointer; background: var(--surface);
}
.art-wahl label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.art-wahl input { margin-top: 0.3rem; accent-color: var(--accent); }
.art-wahl b { display: block; }
.art-wahl span span { color: var(--muted); font-size: 0.875rem; }
.einwilligung { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.875rem; color: var(--muted); margin: 0.5rem 0 1.25rem; }
.einwilligung input { margin-top: 0.25rem; accent-color: var(--accent); flex: none; }
.einwilligung.is-invalid { color: #b42318; }
.form-hinweis { font-size: 0.8125rem; color: var(--muted); margin-top: 0.75rem; }

/* Neu-Hinweis: Leiste ueber dem Kopf, Marke in der Navigation und im Hero */
.neu-leiste {
  display: block;
  background: var(--signal);
  color: var(--on-signal);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
  padding: 0.55rem var(--gutter);
}
.neu-leiste:hover { color: var(--on-signal); text-decoration: underline; }
.neu-leiste:focus-visible { outline: 3px solid var(--on-signal); outline-offset: -3px; }
.neu-tag {
  display: inline-block;
  background: var(--on-signal);
  color: var(--signal);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius-sm);
  margin-right: 0.4rem;
  vertical-align: 0.05em;
}
.nav-links .nav-neu {
  display: inline-block;
  background: var(--signal);
  color: var(--on-signal);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-sm);
  margin-left: 0.3rem;
  vertical-align: 0.1em;
}
.hero .btn .neu-tag { background: var(--signal); color: var(--on-signal); margin: 0 0 0 0.5rem; }
.neu-karte { max-width: 56rem; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.neu-karte .neu-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.neu-karte .neu-kopf .weg-kicker { margin: 0; }
.neu-liste { margin: 0.5rem 0 1.25rem; padding-left: 1.1rem; }
/* Website auf Knopfdruck als Band: Text, Liste, Knopf nebeneinander */
.neu-band {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
}
.neu-band h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-bottom: 0.4rem; }
.neu-band p { margin: 0; }
.neu-band .neu-liste { margin: 0; font-size: 0.9375rem; }
.neu-band .weg-fuss { margin-top: 0.6rem; }
@media (max-width: 860px) { .neu-band { grid-template-columns: minmax(0, 1fr); } }
.neu-liste li { margin: 0.25rem 0; }

/* Rechtstexte mit Tabelle und Entwurfs-Hinweis (Abo-Bedingungen, Auftragsverarbeitung) */
.prose .prose-hinweis { background: var(--paper-2, #f1efe8); border-left: 3px solid var(--akzent, #ffd60a); padding: .75rem 1rem; margin: 0 0 2rem; font-size: .9375rem; }
.prose .tabelle-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line, #d9d6cc); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.prose th { font-weight: 700; }

/* Paketübersicht (Startseite und Abo-Bedingungen) */
.pt-titel { margin: 2rem 0 0.75rem; font-size: 1.25rem; }
.pt-wrap { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pt { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.pt th, .pt td { border-bottom: 1px solid var(--line); padding: .7rem 1rem; text-align: center; vertical-align: middle; }
.pt thead th { font-size: 1rem; font-weight: 800; background: var(--sunk); }
.pt tbody th { font-weight: 600; text-align: left; width: 40%; }
.pt tbody tr:last-child th, .pt tbody tr:last-child td { border-bottom: 0; }
.pt td { color: var(--ink); }
.pt .pt-ja { color: var(--accent); font-weight: 800; }
.pt .pt-nein { color: var(--line-strong); }
.pt th:nth-child(3), .pt td:nth-child(3) { background: var(--accent-soft); }
/* Handy: Merkmal als eigene Zeile, darunter die drei Pakete nebeneinander; kein seitliches Scrollen */
@media (max-width: 640px) {
  .pt-wrap { overflow: visible; }
  .pt, .pt thead, .pt tbody { display: block; }
  .pt tr { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .pt tbody tr:last-child { border-bottom: 0; }
  .pt th, .pt td { border-bottom: 0; padding: .5rem .4rem; font-size: .875rem; }
  .pt thead th:first-child { display: none; }
  .pt tbody th { grid-column: 1 / -1; width: auto; padding: .7rem .8rem .1rem; text-align: left; font-size: .8125rem; color: var(--muted); }
  .pt th:nth-child(3), .pt td:nth-child(3) { background: none; }
  .pt th:nth-child(3) { background: var(--accent-soft); }
}

/* Über uns */
.ueber-text { max-width: 680px; }
.ueber-text h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); margin-bottom: 0.75rem; }
.ueber-text p { font-size: 1.0625rem; line-height: 1.7; }
.ueber-text p + p { margin-top: 1rem; }
.ueber-lead { font-size: clamp(1.125rem, 2.4vw, 1.375rem) !important; color: var(--muted); margin-top: 0.5rem; }
.ueber-zahlen { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1rem; }
.ueber-zahlen li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.ueber-zahlen b { display: block; font-size: 2rem; line-height: 1.1; color: var(--accent); margin-bottom: 0.35rem; }
.ueber-zahlen span { color: var(--muted); font-size: 0.9375rem; }
.ueber-bild { margin: 0 0 2.5rem; }
.ueber-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: #e8eaff; }
.ueber-bild figcaption { color: var(--muted); font-size: 0.9375rem; margin-top: 0.6rem; }
.ueber-grundsaetze { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.ueber-grundsaetze li { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--signal); border-radius: var(--radius); padding: 1.25rem; }
.ueber-grundsaetze h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.ueber-grundsaetze p { color: var(--muted); margin: 0; }
.ueber-gruss { margin-top: 2rem; font-size: 1.0625rem; }

/* Fußbereich: Instagram und Facebook */
.footer-social { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-social a { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-social svg { flex: none; }