/* Wagner Heinen — Stylesheet
   Farben, Typografie und Raster stammen 1:1 aus dem Entwurf
   (Downloads/Wagner Heinen Website), hier als wartbares Stylesheet
   statt Inline-Styles, plus die im Entwurf fehlenden Breakpoints. */

@import url('schriften.css');

/* ── Design-Token ─────────────────────────────────────────────────
   Heller Satz auf :root. Der dunkle Satz wird an zwei Stellen gesetzt:
   ueber prefers-color-scheme (Systemeinstellung) und ueber
   [data-theme="dark"] (manuelle Wahl im Kopf). [data-theme="light"]
   gewinnt umgekehrt gegen die Systemeinstellung. Nur Farben werden
   umdefiniert — kein Abstand, keine Groesse. */
:root {
  color-scheme: light;

  /* Flaechen */
  --bg:              oklch(0.97 0.01 90);    /* Seitenhintergrund */
  --bg-weiss:        #fff;                   /* Karten, helle Baender */
  --flaeche-matt:    oklch(0.93 0.02 250);   /* Icon-Kacheln, Schilder */
  --dunkel:          oklch(0.22 0.03 250);   /* Topbar, Fuss, Kennzahlen */
  --navy:            oklch(0.28 0.05 250);   /* dunkle Kontrastbaender */
  --navy-hell:       oklch(0.35 0.06 250);
  --kopf-bg:         oklch(0.97 0.01 90 / 0.85);
  --hero-schein:     oklch(0.93 0.02 250);   /* Radialverlauf im Hero */
  --kreis-bg:        oklch(0.9 0.01 250);

  /* Schrift */
  --text:            oklch(0.24 0.02 250);
  --text-mittel:     oklch(0.4 0.03 250);
  --text-leise:      oklch(0.45 0.03 250);
  --text-still:      oklch(0.53 0.03 250);
  --text-label:      oklch(0.5 0.06 250);

  /* Farbe, die IMMER auf einer dunklen Flaeche liegt — in beiden Modi hell */
  --auf-marke:       oklch(0.97 0.01 90);
  --auf-dunkel:      oklch(0.85 0.02 250);
  --auf-dunkel-leise:oklch(0.75 0.02 250);
  --auf-dunkel-label:oklch(0.6 0.03 250);
  --band-label:      oklch(0.75 0.05 250);

  /* Marke auf dem Seitenhintergrund (Unterstriche, Icons, Fokus) */
  --marke-auf-seite: oklch(0.28 0.05 250);
  --akzent:          oklch(0.45 0.1 250);
  --wh-farbe:        oklch(0.28 0.05 250);

  /* Primaerknopf */
  --knopf-bg:        oklch(0.28 0.05 250);
  --knopf-bg-hover:  oklch(0.35 0.06 250);
  --knopf-text:      oklch(0.97 0.01 90);
  /* Heller Knopf auf dunklem Band — in beiden Modi gleich */
  --knopf-hell-bg:      oklch(0.97 0.01 90);
  --knopf-hell-bg-hover:#fff;
  --knopf-hell-text:    oklch(0.28 0.05 250);

  /* Linien und Zierrat */
  --linie:           oklch(0.92 0.005 250);
  --linie-kraeftig:  oklch(0.75 0.02 250);
  --zier:            oklch(0.7 0.03 250);    /* grosse Ziffern, Anfuehrung */
  --zier-leise:      oklch(0.85 0.01 250);   /* Ablauf-Linie */

  --gruen:           oklch(0.6 0.15 150);
  --rot:             oklch(0.55 0.19 25);

  /* Platzhalter-Warnfarben */
  --warn-rand:       oklch(0.62 0.11 60);
  --warn-flaeche-a:  oklch(0.93 0.04 75 / 0.5);
  --warn-flaeche-b:  oklch(0.96 0.02 75 / 0.5);
  --warn-text:       oklch(0.42 0.08 60);
  --warn-marker-bg:  oklch(0.93 0.04 75);
  --box-bg:          oklch(0.96 0.03 75);
  --box-rand:        oklch(0.82 0.07 70);
  --box-text:        oklch(0.35 0.06 55);
  --box-stark:       oklch(0.3 0.08 50);

  --serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', Georgia, serif;
  --sans:    'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --breite:  1440px;
  --rand:    64px;
  --schatten-karte: 0 1px 3px oklch(0.24 0.02 250 / 0.08);
  --schatten-hoch:  0 8px 30px oklch(0.24 0.02 250 / 0.18);
}

/* Dunkler Satz. Identisch in beiden Selektoren gehalten — einmal fuer die
   Systemeinstellung, einmal fuer die manuelle Wahl. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dunkelmodus: 1; }
}
:root[data-theme="dark"] { --dunkelmodus: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:              oklch(0.19 0.025 250);
    --bg-weiss:        oklch(0.24 0.03 250);
    --flaeche-matt:    oklch(0.31 0.04 250);
    --dunkel:          oklch(0.145 0.02 250);
    --navy:            oklch(0.29 0.045 250);
    --navy-hell:       oklch(0.35 0.05 250);
    --kopf-bg:         oklch(0.19 0.025 250 / 0.85);
    --hero-schein:     oklch(0.26 0.05 250);
    --kreis-bg:        oklch(0.34 0.03 250);

    --text:            oklch(0.95 0.01 90);
    --text-mittel:     oklch(0.85 0.015 250);
    --text-leise:      oklch(0.79 0.015 250);
    --text-still:      oklch(0.70 0.02 250);
    --text-label:      oklch(0.76 0.07 250);

    --auf-dunkel:      oklch(0.87 0.02 250);
    --auf-dunkel-leise:oklch(0.78 0.02 250);
    --auf-dunkel-label:oklch(0.68 0.03 250);
    --band-label:      oklch(0.78 0.06 250);

    --marke-auf-seite: oklch(0.80 0.06 250);
    --akzent:          oklch(0.80 0.08 250);
    --wh-farbe:        oklch(0.93 0.015 90);

    --knopf-bg:        oklch(0.90 0.035 250);
    --knopf-bg-hover:  oklch(0.96 0.02 250);
    --knopf-text:      oklch(0.20 0.03 250);

    --linie:           oklch(0.33 0.02 250);
    --linie-kraeftig:  oklch(0.47 0.03 250);
    --zier:            oklch(0.58 0.04 250);
    --zier-leise:      oklch(0.38 0.02 250);

    --gruen:           oklch(0.72 0.16 150);
    --rot:             oklch(0.70 0.17 25);

    --warn-rand:       oklch(0.68 0.11 65);
    --warn-flaeche-a:  oklch(0.32 0.05 65 / 0.55);
    --warn-flaeche-b:  oklch(0.27 0.03 65 / 0.55);
    --warn-text:       oklch(0.86 0.08 70);
    --warn-marker-bg:  oklch(0.36 0.06 65);
    --box-bg:          oklch(0.27 0.04 65);
    --box-rand:        oklch(0.42 0.07 65);
    --box-text:        oklch(0.88 0.06 70);
    --box-stark:       oklch(0.94 0.05 75);

    --schatten-karte:  0 1px 3px oklch(0 0 0 / 0.35);
    --schatten-hoch:   0 8px 30px oklch(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:              oklch(0.19 0.025 250);
  --bg-weiss:        oklch(0.24 0.03 250);
  --flaeche-matt:    oklch(0.31 0.04 250);
  --dunkel:          oklch(0.145 0.02 250);
  --navy:            oklch(0.29 0.045 250);
  --navy-hell:       oklch(0.35 0.05 250);
  --kopf-bg:         oklch(0.19 0.025 250 / 0.85);
  --hero-schein:     oklch(0.26 0.05 250);
  --kreis-bg:        oklch(0.34 0.03 250);

  --text:            oklch(0.95 0.01 90);
  --text-mittel:     oklch(0.85 0.015 250);
  --text-leise:      oklch(0.79 0.015 250);
  --text-still:      oklch(0.70 0.02 250);
  --text-label:      oklch(0.76 0.07 250);

  --auf-dunkel:      oklch(0.87 0.02 250);
  --auf-dunkel-leise:oklch(0.78 0.02 250);
  --auf-dunkel-label:oklch(0.68 0.03 250);
  --band-label:      oklch(0.78 0.06 250);

  --marke-auf-seite: oklch(0.80 0.06 250);
  --akzent:          oklch(0.80 0.08 250);
  --wh-farbe:        oklch(0.93 0.015 90);

  --knopf-bg:        oklch(0.90 0.035 250);
  --knopf-bg-hover:  oklch(0.96 0.02 250);
  --knopf-text:      oklch(0.20 0.03 250);

  --linie:           oklch(0.33 0.02 250);
  --linie-kraeftig:  oklch(0.47 0.03 250);
  --zier:            oklch(0.58 0.04 250);
  --zier-leise:      oklch(0.38 0.02 250);

  --gruen:           oklch(0.72 0.16 150);
  --rot:             oklch(0.70 0.17 25);

  --warn-rand:       oklch(0.68 0.11 65);
  --warn-flaeche-a:  oklch(0.32 0.05 65 / 0.55);
  --warn-flaeche-b:  oklch(0.27 0.03 65 / 0.55);
  --warn-text:       oklch(0.86 0.08 70);
  --warn-marker-bg:  oklch(0.36 0.06 65);
  --box-bg:          oklch(0.27 0.04 65);
  --box-rand:        oklch(0.42 0.07 65);
  --box-text:        oklch(0.88 0.06 70);
  --box-stark:       oklch(0.94 0.05 75);

  --schatten-karte:  0 1px 3px oklch(0 0 0 / 0.35);
  --schatten-hoch:   0 8px 30px oklch(0 0 0 / 0.5);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--akzent); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  text-wrap: pretty;
  /* Nie automatisch trennen — kein Trennstrich mitten im Wort.
     break-word greift nur, wenn ein Wort sonst aus dem Bild liefe, und
     bricht dann OHNE Bindestrich um. */
  hyphens: manual;
  overflow-wrap: break-word;
}
/* Silbentrennung NUR dort, wo wirklich einzelne ueberlange Komposita stehen:
   Seitentitel wie "Datenschutzerklaerung" und die Rechtstexte. Nicht global auf
   alle Ueberschriften — sonst trennt es auch kurze Woerter im Hero
   ("schaf-fen"), was mitten in der Kernaussage stoert. */
/* Keine Silbentrennung, nirgends. Ueberlange Komposita wie
   "Datenschutzerklaerung" werden ueber die Schriftgroesse geloest (siehe
   .seitenkopf h1 weiter unten), nicht durch Trennstriche mitten im Wort. */

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

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--auf-marke);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--auf-marke); }

.huelle {
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: var(--rand);
}

.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Wortmarke ────────────────────────────────────────────────── */
.wortmarke { display: flex; align-items: center; gap: 12px; }
.wortmarke:hover { color: inherit; }
.wh {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1;
  color: var(--wh-farbe);
  font-size: 34px;
}
.wh span { margin-left: -3px; }
.wortmarke-strich { width: 1px; height: 26px; background: var(--linie-kraeftig); }
.wortmarke-name {
  font-family: var(--serif);
  font-size: 19px; font-weight: 600;
  white-space: nowrap; color: var(--text);
}

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar {
  background: var(--dunkel);
  color: var(--auf-dunkel-leise);
  font-size: 13px;
}
.topbar .huelle {
  padding-block: 8px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.topbar a { color: var(--auf-dunkel); }
.topbar a:hover { color: var(--auf-marke); }
.topbar-kontakt { display: flex; gap: 24px; flex-wrap: wrap; }

/* Auf dem Handy entfaellt die Topbar komplett. Sie kostete dort ueber 30 px
   Hoehe fuer Angaben, die im Menue und im Seitenfuss ohnehin stehen — und
   drueckte den eigentlichen Inhalt nach unten. Ab 900 px, also sobald die
   Navigation ausgeklappt ist, kommt sie zurueck. */
.topbar { display: none; }
@media (min-width: 900px) {
  .topbar { display: block; }
}

/* ── Kopfzeile / Navigation ───────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--kopf-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle {
  padding-block: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
/* Umschalter und Menue-Knopf bleiben nebeneinander, wenn die Navigation klappt */
.kopf-werkzeuge { display: flex; align-items: center; gap: 10px; }
.nav a[aria-current="page"] {
  border-bottom: 2px solid var(--marke-auf-seite);
  padding-bottom: 2px;
}
/* ── Umschalter hell/dunkel ───────────────────────────────────── */
.modus-schalter {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: none; border: 1px solid var(--linie);
  border-radius: 10px; cursor: pointer;
  color: var(--text-leise);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.modus-schalter:hover { color: var(--marke-auf-seite); border-color: var(--linie-kraeftig); }
.modus-schalter svg { width: 19px; height: 19px; }

/* Angezeigt wird das Symbol des Modus, in den man wechselt. */
.modus-sonne { display: none; }
.modus-mond  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modus-sonne { display: block; }
  :root:not([data-theme="light"]) .modus-mond  { display: none; }
}
:root[data-theme="dark"] .modus-sonne { display: block; }
:root[data-theme="dark"] .modus-mond  { display: none; }

/* Ohne JavaScript hat der Schalter keine Wirkung — dann ausblenden.
   Die Systemeinstellung greift trotzdem weiter. */
.kein-js .modus-schalter { display: none; }

.nav-schalter {
  display: none;
  background: none; border: 1px solid var(--linie);
  border-radius: 8px; padding: 9px 12px; cursor: pointer;
  font: inherit; color: var(--text); line-height: 0;
}
.nav-schalter svg { width: 22px; height: 22px; }

@media (max-width: 560px) {
  .kopf .huelle { gap: 10px; }
  .modus-schalter { width: 38px; height: 38px; }
  .wortmarke { gap: 9px; }
  .wortmarke-name { font-size: 17px; }
}

/* Sehr schmale Geraete: nur das Monogramm. Der volle Name steckt weiterhin
   im aria-label des Links, Screenreader verlieren also nichts. */
@media (max-width: 420px) {
  .kopf .wortmarke-strich,
  .kopf .wortmarke-name { display: none; }
  .kopf-werkzeuge { gap: 8px; }
  .nav-schalter { padding: 9px 10px; }
}

@media (max-width: 900px) {
  .nav-schalter { display: block; }
  .nav {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-hoch);
    padding: 8px var(--rand) 20px;
    display: none;
  }
  .nav[data-offen="true"] { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--linie);
    font-size: 17px;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--linie); color: var(--akzent); }
  .nav .knopf-voll { margin-top: 14px; text-align: center; }
  /* Ohne JavaScript bleibt die Navigation sichtbar statt unerreichbar */
  .kein-js .nav { display: flex; position: static; box-shadow: none; padding: 8px 0 0; }
  .kein-js .nav-schalter { display: none; }
}

/* ── Knoepfe ──────────────────────────────────────────────────── */
.knopf-voll, .knopf-rand, .knopf-hell, .knopf-hell-rand {
  display: inline-block;
  padding: 17px 34px;
  border-radius: 8px;
  font-weight: 600; font-size: 16px;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.knopf-voll { background: var(--knopf-bg); color: var(--knopf-text); }
.knopf-voll:hover { background: var(--knopf-bg-hover); color: var(--knopf-text); transform: translateY(-2px); }
.knopf-rand { border: 1.5px solid var(--linie-kraeftig); }
.knopf-rand:hover { border-color: var(--marke-auf-seite); color: var(--text); }
.knopf-hell { background: var(--knopf-hell-bg); color: var(--knopf-hell-text); }
.knopf-hell:hover { background: var(--knopf-hell-bg-hover); color: var(--knopf-hell-text); transform: translateY(-2px); }
.knopf-hell-rand { border: 1.5px solid oklch(0.97 0.01 90 / 0.5); color: var(--auf-marke); }
.knopf-hell-rand:hover { border-color: var(--auf-marke); color: var(--auf-marke); }

.kopf .knopf-voll { padding: 11px 22px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .knopf-voll:hover, .knopf-hell:hover { transform: none; }
}

/* ── Abschnitte & Ueberschriften ──────────────────────────────── */
.abschnitt { padding-block: 104px; }
.abschnitt-schmal { padding-block: 88px; }
@media (max-width: 900px) { .abschnitt { padding-block: 72px; } .abschnitt-schmal { padding-block: 60px; } }
@media (max-width: 720px) { .abschnitt { padding-block: 56px; } .abschnitt-schmal { padding-block: 48px; } }

.label {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-label); font-weight: 600;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(29px, 4.2vw, 44px);
  font-weight: 700; margin: 0; line-height: 1.15;
}
.h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
.fliess { font-size: 17px; line-height: 1.65; color: var(--text-mittel); margin: 0; }

/* ── Platzhalter (muessen vor dem Livegang ersetzt werden) ────── */
.platzhalter {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  min-height: 200px; height: 100%;
  border: 2px dashed var(--warn-rand);
  border-radius: 20px;
  background:
    repeating-linear-gradient(45deg,
      var(--warn-flaeche-a) 0 12px,
      var(--warn-flaeche-b) 12px 24px);
  color: var(--warn-text);
  font-size: 14px; font-weight: 600; text-align: center;
  padding: 24px;
}
.platzhalter--eckig { border-radius: 0; }
.platzhalter::before {
  content: "Platzhalter";
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--warn-rand); color: oklch(0.16 0.03 60);
  padding: 3px 9px; border-radius: 99px;
}
.platzhalter-text { font-weight: 500; max-width: 30ch; line-height: 1.5; }

/* Textplatzhalter im Fliesstext */
.platzhalter-inline {
  background: var(--warn-marker-bg);
  border-bottom: 2px dashed var(--warn-rand);
  padding: 1px 5px; border-radius: 3px;
  font-style: normal;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1000px 600px at 85% 10%, var(--hero-schein), transparent), var(--bg);
}
.hero .huelle {
  padding-block: 88px 96px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 28px; }

/* Einspaltiger Hero: mittig gesetzt, Textbreite begrenzt, damit die
   Zeilenlaenge lesbar bleibt statt ueber die volle Seite zu laufen. */
.hero--einspaltig .huelle {
  grid-template-columns: 1fr;
  padding-block: 104px 108px;
  justify-items: center;
}
.hero--einspaltig .hero-text { align-items: center; text-align: center; max-width: 62ch; }
.hero--einspaltig h1 { font-size: clamp(38px, 6vw, 68px); max-width: 17ch; }
.hero--einspaltig .hero-vorspann { max-width: 58ch; }
.hero--einspaltig .merker { align-self: center; }
.hero--einspaltig .knopfreihe,
.hero--einspaltig .belege { justify-content: center; }
@media (max-width: 720px) {
  .hero--einspaltig .huelle { padding-block: 64px 68px; }
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5.6vw, 62px);
  font-weight: 700; line-height: 1.08; margin: 0;
}
.hero h1 em {
  font-family: var(--display);
  font-style: italic; font-weight: 500; color: var(--akzent);
}
.hero-vorspann {
  font-size: clamp(17px, 2vw, 19px); line-height: 1.65;
  color: var(--text-mittel); margin: 0; max-width: 50ch;
}
.merker {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: var(--bg-weiss); border: 1px solid var(--linie);
  border-radius: 99px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; color: var(--text-label);
}
.merker-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }
.knopfreihe { display: flex; gap: 16px; flex-wrap: wrap; }
.belege {
  display: flex; gap: 28px; font-size: 14px;
  color: var(--text-still); flex-wrap: wrap;
}
.hero-bild { position: relative; }
.hero-bild-rahmen {
  position: absolute; inset: 24px -24px -24px 24px;
  border: 1.5px solid var(--linie-kraeftig); border-radius: 20px;
}
.hero-bild-flaeche { position: relative; height: 480px; }
.hero-karte {
  position: absolute; left: -28px; bottom: 36px;
  background: var(--bg-weiss); border-radius: 14px;
  box-shadow: var(--schatten-hoch);
  padding: 16px 22px; display: flex; align-items: center; gap: 14px;
}
.hero-karte-text { font-size: 13px; line-height: 1.4; }
.hero-karte-text span { color: var(--text-still); }

@media (max-width: 1000px) {
  .hero .huelle { grid-template-columns: 1fr; gap: 48px; padding-block: 56px 64px; }
  .hero-bild-rahmen { inset: 16px -16px -16px 16px; }
  .hero-bild-flaeche { height: 340px; }
  .hero-karte { left: 12px; bottom: -20px; }
}
@media (max-width: 560px) {
  .hero-karte { position: static; margin-top: 20px; }
  .hero-bild-rahmen { display: none; }
}

/* ── Laufband ─────────────────────────────────────────────────── */
.laufband {
  background: var(--bg-weiss);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
.laufband-spur { display: flex; width: max-content; animation: laufband 28s linear infinite; }
.laufband-gruppe {
  display: flex; gap: 64px; padding: 22px 32px;
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--text-label); white-space: nowrap;
}
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
}

/* ── Karten-Raster ────────────────────────────────────────────── */
.kopfzeile-abschnitt {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; margin-bottom: 52px; flex-wrap: wrap;
}
.kopfzeile-abschnitt .label { display: block; margin-bottom: 12px; }
.mehr-link { font-weight: 600; font-size: 15px; white-space: nowrap; border-bottom: 1.5px solid var(--marke-auf-seite); }

.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 1000px) { .raster-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .raster-3, .raster-2 { grid-template-columns: 1fr; gap: 20px; } }

.karte {
  background: var(--bg-weiss); border-radius: 18px; padding: 40px 36px;
  box-shadow: var(--schatten-karte);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform 0.2s ease;
}
.karte:hover { transform: translateY(-6px); color: inherit; }
.karte--navy { background: var(--navy); color: var(--auf-marke); box-shadow: none; }
.karte--navy:hover { color: var(--auf-marke); }
.karte--navy .karte-text { color: var(--auf-dunkel); }
.karte-nummer { font-family: var(--display); font-size: 44px; color: var(--zier); line-height: 1; }
.karte--navy .karte-nummer { color: oklch(0.97 0.01 90 / 0.45); }
.karte h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0; }
.karte-text { font-size: 15px; line-height: 1.6; color: var(--text-leise); margin: 0; flex: 1; }
.karte-mehr { font-weight: 600; font-size: 14px; }

.karte-breit {
  background: var(--bg-weiss); border: 1px solid var(--linie); border-radius: 18px;
  padding: 28px 36px; display: flex; align-items: center; gap: 24px;
  transition: transform 0.2s ease;
}
.karte-breit:hover { transform: translateY(-4px); color: inherit; }
.karte-breit .karte-nummer { font-size: 34px; }
.karte-breit h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.karte-breit p { font-size: 14px; line-height: 1.55; color: var(--text-leise); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .karte:hover, .karte-breit:hover { transform: none; }
}
@media (max-width: 560px) {
  .karte { padding: 30px 24px; }
  .karte-breit { padding: 22px 20px; gap: 16px; }
}

/* ── Dunkler Abschnitt / Showcase ─────────────────────────────── */
.navy-flaeche { background: var(--navy); color: var(--auf-marke); }
.navy-flaeche .h2 { color: var(--auf-marke); }
.navy-flaeche .label { color: var(--band-label); }
.navy-flaeche .fliess { color: var(--auf-dunkel); }
.zweispalt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 72px; align-items: center;
}
.zweispalt--breit-links { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 1000px) {
  .zweispalt, .zweispalt--breit-links { grid-template-columns: 1fr; gap: 44px; }
}
.spalte { display: flex; flex-direction: column; gap: 24px; }
.strichliste { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }

.browser {
  background: var(--dunkel); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px oklch(0.1 0.02 250 / 0.5);
}
.browser-leiste {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid oklch(0.97 0.01 90 / 0.1);
}
.browser-punkt { width: 10px; height: 10px; border-radius: 50%; }
.browser-adresse { flex: 1; text-align: center; font-size: 12px; color: var(--auf-dunkel-leise); }
.browser-flaeche { display: block; aspect-ratio: 1200 / 651; overflow: hidden; }
.browser-flaeche img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ── Merkmal-Kacheln ──────────────────────────────────────────── */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
@media (max-width: 480px) { .kacheln { grid-template-columns: 1fr; } }
.kachel {
  background: var(--bg-weiss); border-radius: 14px; padding: 24px;
  box-shadow: var(--schatten-karte);
}
.kachel h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.kachel p { font-size: 14px; line-height: 1.55; color: var(--text-leise); margin: 0; }

.portraet-flaeche { height: 480px; }
@media (max-width: 1000px) { .portraet-flaeche { height: 360px; } }
.portraet-flaeche picture { display: block; height: 100%; }
/* height/width als Klasse, damit die globale img-Regel (height: auto) nicht greift */
.portraet-bild {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 20px;
}

/* ── Ablauf ───────────────────────────────────────────────────── */
.weiss-flaeche { background: var(--bg-weiss); border-top: 1px solid var(--linie); }
.ablauf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
@media (max-width: 1000px) { .ablauf { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 560px)  { .ablauf { grid-template-columns: 1fr; gap: 26px; } }
.schritt { display: flex; flex-direction: column; gap: 12px; }
.schritt-kopf { display: flex; align-items: center; gap: 12px; }
.schritt-zahl {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--auf-marke);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 20px; flex-shrink: 0;
}
.schritt-zahl--offen {
  background: none; border: 1.5px solid var(--marke-auf-seite); color: var(--marke-auf-seite);
}
.schritt-linie { flex: 1; height: 1.5px; background: var(--zier-leise); }
.schritt h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0; }
.schritt p { font-size: 14px; line-height: 1.55; color: var(--text-leise); margin: 0; }
.optional {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-still); vertical-align: middle;
}

/* ── Kennzahlen ───────────────────────────────────────────────── */
.kennzahlen { background: var(--dunkel); color: var(--auf-marke); }
.kennzahlen .huelle {
  padding-block: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; text-align: center;
}
@media (max-width: 800px) { .kennzahlen .huelle { grid-template-columns: repeat(2, 1fr); gap: 36px; } }
.kennzahl-wert { font-family: var(--serif); font-size: clamp(32px, 5vw, 44px); font-weight: 700; }
.kennzahl-text { font-size: 14px; color: var(--auf-dunkel-leise); margin-top: 4px; }

/* ── Stimmen ──────────────────────────────────────────────────── */
.stimme {
  background: var(--bg-weiss); border-radius: 18px; padding: 32px;
  box-shadow: var(--schatten-karte);
  display: flex; flex-direction: column; gap: 16px;
}
.stimme-zeichen {
  font-family: var(--display); font-size: 44px; line-height: 0.5;
  color: var(--zier); margin-top: 12px;
}
.stimme-zitat { font-size: 15px; line-height: 1.65; color: var(--text-mittel); margin: 0; flex: 1; }
.stimme-person { display: flex; align-items: center; gap: 12px; }
.stimme-kreis {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--kreis-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--text-label); flex-shrink: 0;
}
.stimme-name { font-size: 13px; line-height: 1.4; }
.stimme-name span { color: var(--text-still); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq details {
  background: var(--bg); border: 1px solid var(--linie);
  border-radius: 14px; padding: 22px 28px;
}
.faq summary {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--display); font-size: 26px;
  line-height: 1; color: var(--text-still); flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq p { font-size: 15px; line-height: 1.65; color: var(--text-leise); margin: 14px 0 0; }

/* ── Schluss-Aufruf ───────────────────────────────────────────── */
.aufruf .huelle {
  padding-block: 112px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
@media (max-width: 720px) { .aufruf .huelle { padding-block: 72px; } }
.aufruf .wh { font-size: 56px; color: var(--auf-marke); }
.aufruf h2 {
  font-family: var(--serif); font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 700; margin: 0; line-height: 1.15; max-width: 22ch;
}
.aufruf p { font-size: 17px; line-height: 1.6; color: var(--auf-dunkel); margin: 0; max-width: 50ch; }
.aufruf .knopfreihe { justify-content: center; }

/* ── Fusszeile ────────────────────────────────────────────────── */
.fuss { background: var(--dunkel); color: var(--auf-dunkel-leise); }
.fuss .huelle { padding-block: 56px 40px; }
.fuss a { color: var(--auf-dunkel); }
.fuss a:hover { color: var(--auf-marke); }
.fuss-raster {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 40px;
}
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; gap: 30px; } }
.fuss-marke { display: flex; flex-direction: column; gap: 14px; }
.fuss-marke .wortmarke { gap: 10px; }
.fuss-marke .wh { font-size: 28px; color: var(--auf-marke); }
.fuss-marke .wh span { margin-left: -2px; }
.fuss-marke .wortmarke-strich { height: 22px; background: oklch(0.97 0.01 90 / 0.4); }
.fuss-marke .wortmarke-name { color: var(--auf-marke); font-size: 17px; }
.fuss-marke p { font-size: 14px; line-height: 1.6; margin: 0; max-width: 40ch; }
.fuss-spalte { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.fuss-titel {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--auf-dunkel-label); margin-bottom: 4px;
}
.fuss-unten {
  border-top: 1px solid oklch(0.97 0.01 90 / 0.15);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 13px; flex-wrap: wrap;
}
.fuss-rechtlich { display: flex; gap: 24px; flex-wrap: wrap; }

/* ── Seitenkopf (Unterseiten) ─────────────────────────────────── */
.seitenkopf {
  background: radial-gradient(900px 500px at 80% 0%, var(--hero-schein), transparent), var(--bg);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf .huelle { padding-block: 72px 64px; }
.seitenkopf h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700; margin: 12px 0 0; line-height: 1.12; max-width: 20ch;
}
/* "Datenschutzerklaerung" ist das laengste Wort der Seite und passt bei 320 px
   nur bis etwa 26 px Schriftgroesse in eine Zeile. Lieber kleiner setzen als
   trennen — gemessen, nicht geschaetzt. */
@media (max-width: 420px) { .seitenkopf h1 { font-size: 28px; } }
@media (max-width: 360px) { .seitenkopf h1 { font-size: 25px; } }
.seitenkopf .fliess { margin-top: 20px; max-width: 62ch; }

/* ── Leistungen (Detailliste) ─────────────────────────────────── */
.leistung {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 40px; align-items: start;
  padding-block: 52px;
  border-top: 1px solid var(--linie);
}
.leistung:first-of-type { border-top: none; }
@media (max-width: 900px) {
  .leistung { grid-template-columns: 60px minmax(0, 1fr); gap: 20px 24px; padding-block: 40px; }
  .leistung-extra { grid-column: 1 / -1; }
}
/* Unter 480 px bleiben dem Textblock in der zweispaltigen Variante nur rund
   110 px — die Ueberschriften passen dort in keiner Groesse. Also einspaltig,
   Nummer darueber. */
@media (max-width: 480px) {
  .leistung { grid-template-columns: 1fr; gap: 10px; }
  .leistung .karte-nummer { font-size: 30px; }
}
.leistung .karte-nummer { font-size: 54px; }
@media (max-width: 900px) { .leistung .karte-nummer { font-size: 38px; } }
.leistung h2 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 30px); font-weight: 600; margin: 0 0 14px; }
.leistung p { font-size: 16px; line-height: 1.65; color: var(--text-leise); margin: 0; }
.leistung-liste {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 15px; line-height: 1.55; color: var(--text-leise);
}
.leistung-liste li { padding-left: 22px; position: relative; }
.leistung-liste li::before {
  content: "—"; position: absolute; left: 0; color: var(--linie-kraeftig);
}

/* ── Referenzen ───────────────────────────────────────────────── */
.projekt {
  background: var(--bg-weiss); border-radius: 18px; overflow: hidden;
  box-shadow: var(--schatten-karte);
  display: flex; flex-direction: column;
}
.projekt-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--flaeche-matt); }
.projekt-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.45s ease; }
.projekt:hover .projekt-bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .projekt:hover .projekt-bild img { transform: none; } }
/* Zwei Spalten fuer die vier Arbeitsproben */
.proben { gap: 32px; }
.projekt-inhalt { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.projekt-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-still); font-weight: 600;
}
.projekt-schild {
  background: var(--flaeche-matt); color: var(--marke-auf-seite);
  padding: 4px 10px; border-radius: 99px; letter-spacing: 0.06em;
}
.projekt h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0; }
.projekt p { font-size: 15px; line-height: 1.6; color: var(--text-leise); margin: 0; flex: 1; }
.projekt-link { font-weight: 600; font-size: 14px; border-bottom: 1.5px solid var(--marke-auf-seite); align-self: flex-start; }

/* ── Kontakt ──────────────────────────────────────────────────── */
.kontakt-raster {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px; align-items: start;
}
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; gap: 44px; } }

.kontakt-wege { display: flex; flex-direction: column; gap: 26px; }
.kontakt-weg { display: flex; gap: 18px; align-items: flex-start; }
.kontakt-zeichen {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--flaeche-matt); color: var(--marke-auf-seite);
  display: flex; align-items: center; justify-content: center;
}
.kontakt-zeichen svg { width: 20px; height: 20px; }
.kontakt-weg-titel {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--text-still); margin-bottom: 4px;
}
.kontakt-weg-wert { font-size: 17px; font-weight: 500; line-height: 1.45; }
.kontakt-hinweis {
  background: var(--bg-weiss); border: 1px solid var(--linie);
  border-radius: 14px; padding: 20px 24px;
  font-size: 14px; line-height: 1.6; color: var(--text-leise);
}
.kontakt-hinweis strong { color: var(--text); }

.formular {
  background: var(--bg-weiss); border: 1px solid var(--linie);
  border-radius: 18px; padding: 40px;
  box-shadow: var(--schatten-karte);
}
@media (max-width: 560px) { .formular { padding: 28px 22px; } }
.formular h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 26px; }
.feld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .feld-paar { grid-template-columns: 1fr; gap: 0; } }
.feld label { font-size: 14px; font-weight: 600; }
.feld label .optional-hinweis { font-weight: 400; color: var(--text-still); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 8px; padding: 13px 15px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--marke-auf-seite);
  box-shadow: 0 0 0 3px oklch(0.55 0.08 250 / 0.25);
}
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--rot); }
.formular-fuss { font-size: 13px; line-height: 1.6; color: var(--text-still); margin: 18px 0 0; }
.formular .knopf-voll { width: 100%; text-align: center; border: none; cursor: pointer; font-family: inherit; }
.honigtopf { position: absolute; left: -9999px; }

/* ── Rechtstexte ──────────────────────────────────────────────── */
.rechtstext { max-width: 78ch; }
.rechtstext h2 {
  font-family: var(--serif); font-size: 25px; font-weight: 600;
  margin: 48px 0 14px; line-height: 1.25;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
.rechtstext p, .rechtstext li {
  font-size: 16px; line-height: 1.7; color: var(--text-mittel);
  hyphens: manual;
  overflow-wrap: break-word;   /* nur als letzte Rettung, ohne Trennstrich */
}
.rechtstext p { margin: 0 0 14px; }
.rechtstext ul { margin: 0 0 14px; padding-left: 22px; }
.rechtstext li { margin-bottom: 8px; }
.rechtstext a { border-bottom: 1px solid var(--linie-kraeftig); }
.rechtstext code, .hinweisbox code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--flaeche-matt);
  padding: 2px 6px;
  border-radius: 4px;
}
.rechtstext dl { margin: 0 0 14px; }
.rechtstext dt { font-weight: 600; color: var(--text); margin-top: 14px; }
.rechtstext dd { margin: 4px 0 0; color: var(--text-mittel); }

.hinweisbox {
  background: var(--box-bg);
  border: 1px solid var(--box-rand);
  border-left: 4px solid var(--warn-rand);
  border-radius: 10px;
  padding: 18px 22px; margin: 0 0 32px;
  font-size: 15px; line-height: 1.6; color: var(--box-text);
}
.hinweisbox strong { color: var(--box-stark); }

/* Variante fuer die Preisseite: Der Kasten soll links und rechts buendig mit
   Tabelle und Hinweiszeile darueber abschliessen, statt frueher zu enden.
   Damit die Zeilen dabei nicht ueber die gesamte Breite laufen und unlesbar
   werden, wird der Text im Kasten auf Lesebreite begrenzt und mittig gesetzt. */
.hinweisbox-breit {
  padding: 24px 28px;
  text-align: center;
}
.hinweisbox-breit > * { max-width: 72ch; margin-inline: auto; }
@media (max-width: 700px) {
  .hinweisbox-breit { text-align: left; padding: 18px 20px; }
}

/* ── Danke-Seite ──────────────────────────────────────────────── */
.danke {
  min-height: 62vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 22px; padding-block: 88px;
}
.danke-haken {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--gruen); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.danke-haken svg { width: 32px; height: 32px; }
.danke h1 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; margin: 0; }
.danke p { font-size: 17px; line-height: 1.65; color: var(--text-mittel); margin: 0; max-width: 52ch; }

/* ── Sanftes Einblenden beim Scrollen ─────────────────────────── */
/* Wichtig: Inhalt ist standardmaessig SICHTBAR. Erst wenn nav.js laeuft und
   IntersectionObserver verfuegbar ist, setzt es .reveal-bereit auf <html> und
   blendet die Abschnitte beim Hereinscrollen ein. Faellt das Skript aus, wird
   blockiert oder ist JavaScript abgeschaltet, bleibt schlicht alles sichtbar —
   Text darf nie von einer Animation abhaengen, um lesbar zu sein. */
@media (prefers-reduced-motion: no-preference) {
  .einblenden { animation: einblenden 0.7s ease both; }

  .reveal-bereit .einblenden-scroll {
    opacity: 0;
    transform: translateY(18px);
  }
  .reveal-bereit .einblenden-scroll.sichtbar {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
}
@keyframes einblenden {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media print {
  .kopf, .topbar, .laufband, .aufruf, .nav-schalter { display: none; }
  body { background: #fff; }
}

/* ── Preise ───────────────────────────────────────────────────── */
.preis-kopf {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; margin-bottom: 36px;
}
.preis-kopf .label { display: block; margin-bottom: 10px; }
.preis-kopf .fliess { margin-top: 12px; max-width: 46ch; }
.preis-gross { text-align: right; }
.preis-zahl {
  display: block; font-family: var(--serif);
  font-size: clamp(40px, 6vw, 58px); font-weight: 700;
  line-height: 1; color: var(--marke-auf-seite);
}
.preis-zusatz { display: block; margin-top: 8px; font-size: 14px; color: var(--text-still); line-height: 1.5; }
@media (max-width: 640px) { .preis-gross { text-align: left; } }

.preis-liste { columns: 2; column-gap: 44px; }
.preis-liste li { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 800px) { .preis-liste { columns: 1; } }

/* Paketkarten */
.paket {
  background: var(--bg-weiss); border: 1px solid var(--linie);
  border-radius: 18px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.paket--betont { border-color: var(--marke-auf-seite); border-width: 2px; }
.paket-marke {
  position: absolute; top: -13px; left: 28px;
  background: var(--knopf-bg); color: var(--knopf-text);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 14px; border-radius: 99px;
}
.paket-name { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.paket-preis {
  font-family: var(--serif); font-size: 38px; font-weight: 700;
  line-height: 1.1; color: var(--marke-auf-seite);
}
.paket-preis span { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--text-still); }
.paket-brutto { font-size: 13px; color: var(--text-still); margin-bottom: 14px; }
.paket ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.paket li { font-size: 15px; line-height: 1.5; color: var(--text-leise); padding-left: 22px; position: relative; }
.paket li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--gruen); font-weight: 700;
}
.paket-fuss { margin: 0; font-size: 13.5px; color: var(--text-still); border-top: 1px solid var(--linie); padding-top: 14px; }

/* Vergleichstabelle */
.tabelle-huelle { overflow-x: auto; margin-top: 52px; }
.preis-tabelle { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.preis-tabelle th, .preis-tabelle td {
  border-bottom: 1px solid var(--linie); padding: 15px 14px;
  text-align: center; vertical-align: top;
}
.preis-tabelle thead th { border-bottom: 2px solid var(--linie-kraeftig); font-family: var(--serif); font-size: 17px; }
.preis-tabelle thead th span { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--marke-auf-seite); margin-top: 3px; }
.preis-tabelle th:first-child, .preis-tabelle td:first-child { text-align: left; width: 44%; }
.preis-tabelle td:first-child span { display: block; font-size: 13.5px; color: var(--text-still); margin-top: 3px; line-height: 1.45; }
.preis-tabelle td { color: var(--text-leise); }
.preis-tabelle .nein { color: var(--zier); }
.tabelle-hinweis { margin-top: 18px; font-size: 14px; color: var(--text-still); }

/* Beispiel-Bestätigungsmails auf der Arbeitsproben-Seite */
.mail-probe { margin: 0; }
.mail-probe picture { display: block; }
.mail-probe img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: var(--schatten-karte);
}
.mail-probe figcaption {
  margin-top: 12px; text-align: center;
  font-size: 14px; color: var(--text-still);
}