/* ============================================================
   uhl-tools.de — Stylesheet
   ============================================================
   Gestaltungsidee: die Seite soll technisch kompetent UND
   nachbarschaftlich wirken. Zwei Dinge, die sich normalerweise
   beissen — Agentur-Blau wirkt beliebig, Terminal-Optik schreckt
   eine Friseurin ab.

   Der Weg dahin:
   - WARMER Grund statt kuehlem Blaugrau. Papier, nicht Dashboard.
   - PRAEZISION statt Weichzeichner: Haarlinien, klare Raster, kaum
     Schatten. Das ist das handwerkliche Signal.
   - MONOSPACE nur fuer Daten und Marken (Kicker, Preise, Domain).
     Wo Zahlen stehen, sieht man das Werkzeug; der Fliesstext
     bleibt normal lesbar.
   - EIN Akzent (Petrol). Norddeutsch, ruhig, nicht Corporate-Blau.

   Keine externen Ressourcen: Lato liegt unter assets/fonts, die
   Monospace kommt aus dem System. Die Seite laedt nichts nach.
   ============================================================ */

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

/* ── Farben & Masse ──────────────────────────────────────── */
:root {
  --paper: #faf8f4;
  --surface: #ffffff;
  --sunk: #f3efe8;
  --line: #e4ded2;
  --line-strong: #cdc4b4;
  --ink: #1b1a17;
  --muted: #6b6459;
  --accent: #0d6e64;
  --accent-hover: #0a564e;
  --accent-soft: #e2efec;
  --accent-line: #a8d2cb;
  /* 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: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: 'Lato', system-ui, -apple-system, Segoe UI, sans-serif;

  --radius: 10px;
  --radius-sm: 5px;
  --max-w: 1080px;
  --gutter: clamp(1.125rem, 4vw, 2rem);
}

:root[data-theme="dark"] {
  --paper: #171613;
  --surface: #201e1a;
  --sunk: #1b1a16;
  --line: #322e27;
  --line-strong: #4a443a;
  --ink: #f2ede4;
  --muted: #a99f90;
  --accent: #5cc4b3;
  --accent-hover: #86d6c8;
  --accent-soft: #15302c;
  --accent-line: #2d5c55;
  --on-accent: #0d1f1c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171613;
    --surface: #201e1a;
    --sunk: #1b1a16;
    --line: #322e27;
    --line-strong: #4a443a;
    --ink: #f2ede4;
    --muted: #a99f90;
    --accent: #5cc4b3;
    --accent-hover: #86d6c8;
    --accent-soft: #15302c;
    --accent-line: #2d5c55;
    --on-accent: #0d1f1c;
  }
}

/* ── 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: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 900;
}
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(--accent);
  color: #fff;
  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.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  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 ─────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Rueckfall fuer Browser ohne color-mix: dann eben deckend. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--paper); }
}

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

.nav-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.15;
}
.logo-name { font-weight: 900; font-size: 1.0625rem; letter-spacing: -0.02em; }
.logo-domain {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
/* Die aktive Seite ist markiert, nicht nur eingefaerbt — Farbe
   allein reicht fuer Farbfehlsichtige nicht. */
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 0.4rem;
  cursor: pointer;
}

/* ── Knöpfe ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-sm);
  border: 1px 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); }

/* ── Abschnitte ──────────────────────────────────────────── */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: var(--sunk); }

.section-head { max-width: 640px; margin-bottom: 2.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.5rem, 3.4vw, 2.125rem); margin-bottom: 0.75rem; }
/* 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 ─────────────────────────────── */
.hero { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero-inner { max-width: 760px; }
.hero h1 {
  font-size: clamp(2.125rem, 6vw, 3.5rem);
  margin-bottom: 1.25rem;
}
.hero-sub {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }

/* Die drei 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(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  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: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* ── 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.6875rem;
  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; }

.modul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 1.25rem;
}
.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:last-child { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

.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: 900; color: #fff; letter-spacing: -0.02em; margin-top: 8px; }
.ref-branche {
  font-family: var(--mono);
  font-size: 0.6875rem;
  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; }
.ref-preview-hundetraining { background: linear-gradient(150deg, #2a0417, #8f0049); }
.ref-preview-hundetraining .ref-branche { color: #f7a8cd; }
.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.6875rem;
  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.75rem; }
.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.6875rem;
  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.6875rem;
  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; }

.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(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta h2 { font-size: clamp(1.25rem, 2.6vw, 1.625rem); margin-bottom: 0.4rem; }
.cta p { color: var(--muted); margin: 0; max-width: 46ch; }

/* ── 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 {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
  background: var(--sunk);
}
.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.8125rem; color: var(--muted); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ── Mobil ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .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(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--accent); }
  .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; }
}