/* ═══════════════════════════════════════════════════════════════════════════
   WEBAGENTUR SCHERZINGER — Design-System
   ═══════════════════════════════════════════════════════════════════════════

   Gestaltungsabsicht, damit spätere Änderungen sie nicht versehentlich
   zerlegen:

   Das hier ist die Seite eines Einzelunternehmers, der Websites baut. Sie muss
   das Gegenteil einer Agentur-Landingpage sein — kein Stockfoto-Team, kein
   „Wir gestalten digitale Erlebnisse", keine Farbverlaufs-Hero. Wer Websites
   verkauft, wird an der eigenen gemessen: Jede Nachlässigkeit hier ist ein
   Argument gegen das Angebot.

   Drei Entscheidungen tragen das Ganze:

   1. TYPOGRAFIE STATT DEKORATION. Es gibt keine Illustrationen und keine
      Icon-Wolken. Die Hierarchie entsteht aus Schriftgröße, Gewicht und
      Weißraum. Das ist schneller, altert besser und wirkt handwerklich.

   2. ZWEI FARBEN. Anthrazit und Kupfer, beide aus dem Logo. Kupfer ist der
      einzige Akzent und wird sparsam gesetzt — eine Farbe, die überall ist,
      betont nichts.

   3. DREI FLÄCHEN ALS KAPITEL. Papier (weiß), Papier-getönt und das dunkle
      Band. Das Band ist der Anker: Hero, Angebotsblock, Schluss-CTA. Nicht
      stumpf abwechselnd hell/dunkel — die Bänder gliedern die Seite.

   Der Preis steht above the fold. Das ist die zentrale Vorgabe des Inhabers
   und der Grund, warum der Hero kompakt gehalten ist statt bildschirmfüllend:
   Wer nach „was kostet eine Website" sucht, soll die Zahl sehen, bevor er
   scrollt — nicht ein Versprechen, das zur Zahl hinführt.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Schriften ──────────────────────────────────────────────────────────────
   Selbst gehostet aus static/fonts/, nicht von Google. Zwei Gründe: Ohne
   Verbindung zu Google-Servern braucht diese Seite kein Einwilligungsbanner
   (und die Datenschutzerklärung sagt das ausdrücklich zu), und der Font-Request
   startet parallel zum CSS statt danach.

   font-display: optional statt swap — mit swap tauscht der Browser die Schrift
   mitten im Seitenaufbau, der Text ändert seine Breite und schiebt das
   Hero-Formular nach unten (CLS). Mit optional wird der Webfont nur benutzt,
   wenn er im ersten Moment schon da ist; sonst bleibt für diesen Aufruf der
   Fallback. Beide Schriften sind preloaded und zusammen unter 55 KB, kommen
   also in aller Regel rechtzeitig. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/instrumentsans-latin.fa41c43a3d8e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/instrumentsans-latin-ext.1ff13d113ba4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/instrumentserif-latin.9b8dd1ecf641.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/instrumentserif-latin-ext.b160c869d0b2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metrisch angepasste Fallbacks.
   Arial ist schmaler als Instrument Sans — beim Umschalten springt der Text.
   size-adjust skaliert Arial auf dieselbe mittlere Zeichenbreite; die
   vertikalen Overrides bilden dann die Metriken des WEBFONTS nach, geteilt
   durch size-adjust (nicht Arials eigene Metriken — damit wird die Zeilenbox
   zu niedrig und der Sprung größer).

   Alle Zahlen aus den echten Fontdaten gerechnet (fontTools: xAvgCharWidth,
   sTypoAscender/-Descender/-LineGap), Skript siehe docs/.
   ⚠ Beim Austausch einer Schriftdatei MÜSSEN diese Werte neu berechnet werden. */
@font-face {
  font-family: 'Instrument Sans Fallback';
  /* Mehrere Namen, weil local('Arial') auf Linux — u. a. den PageSpeed-Servern —
     ins Leere greift; Liberation Sans ist metrisch identisch. */
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 127.89%;
  ascent-override: 75.85%;
  descent-override: 19.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif');
  size-adjust: 105.24%;
  ascent-override: 94.07%;
  descent-override: 29.46%;
  line-gap-override: 0%;
}


/* ── Tokens ─────────────────────────────────────────────────────────────────
   Keine Farbe, kein Abstand und keine Schriftgröße wird außerhalb dieses
   Blocks als Rohwert geschrieben. Wer einen Wert direkt ins Regelwerk tippt,
   nimmt ihn aus dem System heraus — und beim nächsten Feinschliff stimmt genau
   diese eine Stelle nicht mehr. */

:root {
  /* Marke — beide Werte stammen aus dem Logo-SVG. */
  --ws-tinte:        #16191F;   /* Anthrazit: Text, dunkle Bänder */
  --ws-tinte-hoch:   #1E232C;   /* Karten auf dunklem Grund */
  --ws-tinte-rand:   #2C333E;   /* Hairline auf dunklem Grund */

  --ws-kupfer:       #C2703D;   /* Marken-Akzent. 3,70:1 auf Weiß —
                                   für Flächen, Linien und große Zahlen,
                                   NIE für Fließtext auf hellem Grund. */
  --ws-kupfer-tief:  #9E5528;   /* 5,55:1 auf Weiß — Textfarbe und Buttons */
  --ws-kupfer-tief-hover: #8F4A22;  /* 6,6:1 auf Weiß — Hover des Primaerknopfs */
  --ws-kupfer-hell:  #E9A87A;   /* auf dunklem Grund */
  --ws-kupfer-hauch: #FAF4EF;   /* getönte Fläche, ~6 % Akzent */

  /* Neutrals, leicht warm getönt — ein kühles Grau neben Kupfer wirkt schmutzig. */
  --ws-papier:       #FFFFFF;
  --ws-papier-ton:   #F7F5F2;   /* getönte Fläche, sichtbar, nicht laut */
  --ws-papier-tief:  #EFEBE5;
  --ws-linie:        #E3DDD5;
  --ws-linie-stark:  #CFC7BC;

  --ws-text:         #16191F;   /* 16,1:1 auf Weiß */
  --ws-text-2:       #55606F;   /* 6,4:1  — sekundärer Fließtext */
  --ws-text-3:       #616A76;   /* 5,5:1  — Meta, Labels, Platzhalter */
  --ws-text-invers:  #F4F2EF;
  --ws-text-invers-2:#B5BCC6;   /* 7,9:1 auf --ws-tinte */

  --ws-gruen:        #1F6B47;   /* Bestätigung, 5,5:1 auf Weiß */
  --ws-rot:          #A32E28;   /* Fehler, 6,4:1 auf Weiß */

  /* Abstände — eine Skala, keine Zufallswerte. */
  --ws-1:  0.25rem;   /*  4px */
  --ws-2:  0.5rem;    /*  8px */
  --ws-3:  0.75rem;   /* 12px */
  --ws-4:  1rem;      /* 16px */
  --ws-5:  1.5rem;    /* 24px */
  --ws-6:  2rem;      /* 32px */
  --ws-7:  3rem;      /* 48px */
  --ws-8:  4rem;      /* 64px */
  --ws-9:  6rem;      /* 96px */
  --ws-10: 8rem;      /* 128px */

  /* Typografie. clamp() skaliert fluide zwischen 360 px und 1440 px Viewport,
     damit es zwischen den Breakpoints keine Sprünge gibt. */
  --ws-schrift:       'Instrument Sans', 'Instrument Sans Fallback', system-ui, sans-serif;
  --ws-schrift-serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;

  --ws-t-xs:   0.8125rem;                              /* 13px — Meta */
  --ws-t-sm:   0.875rem;                               /* 14px */
  --ws-t-base: 1rem;                                   /* 16px */
  --ws-t-lg:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
  --ws-t-xl:   clamp(1.25rem, 1.14rem + 0.48vw, 1.5rem);
  --ws-t-2xl:  clamp(1.5rem, 1.32rem + 0.8vw, 1.9375rem);
  --ws-t-3xl:  clamp(1.875rem, 1.55rem + 1.45vw, 2.625rem);
  --ws-t-4xl:  clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --ws-t-5xl:  clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);

  --ws-radius:    10px;
  --ws-radius-sm: 6px;
  --ws-radius-lg: 16px;

  /* Schatten mehrschichtig und weich — ein einzelner harter Schatten sieht
     nach Bootstrap aus, ein Glow nach Dashboard-Template. */
  --ws-schatten-1: 0 1px 2px rgba(22, 25, 31, 0.04),
                   0 2px 6px rgba(22, 25, 31, 0.05);
  --ws-schatten-2: 0 1px 2px rgba(22, 25, 31, 0.05),
                   0 4px 12px rgba(22, 25, 31, 0.06),
                   0 12px 28px rgba(22, 25, 31, 0.05);
  --ws-schatten-3: 0 2px 4px rgba(22, 25, 31, 0.06),
                   0 8px 20px rgba(22, 25, 31, 0.09),
                   0 24px 56px rgba(22, 25, 31, 0.10);

  --ws-breite:     1180px;   /* Inhaltsbreite */
  --ws-breite-eng: 760px;    /* Lesebreite für Fließtext */

  --ws-tempo:  180ms;
  --ws-kurve:  cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── Reset & Basis ──────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Damit ein Sprung zu #anker nicht unter der Navigation landet. */
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--ws-schrift);
  font-size: var(--ws-t-base);
  line-height: 1.65;
  color: var(--ws-text);
  background: var(--ws-papier);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Verhindert horizontales Wischen auf dem Handy, wenn ein Element
     versehentlich breiter wird als der Viewport. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;   /* verhindert die einsame Schlusszeile mit einem Wort */
}

p { margin: 0 0 var(--ws-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ws-kupfer-tief); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ws-tinte); }

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

ul, ol { margin: 0 0 var(--ws-4); padding-left: 1.25em; }
li { margin-bottom: var(--ws-2); }

hr { border: 0; border-top: 1px solid var(--ws-linie); margin: var(--ws-7) 0; }

/* Ein sichtbarer, ruhiger Fokusring. :focus-visible statt :focus — sonst
   sieht ihn auch, wer mit der Maus klickt, und das sieht nach Fehler aus. */
:focus-visible {
  outline: 2px solid var(--ws-kupfer-tief);
  outline-offset: 3px;
  border-radius: 2px;
}
.ws-band :focus-visible { outline-color: var(--ws-kupfer-hell); }

::selection { background: var(--ws-kupfer); color: #fff; }

.ws-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sprunglink für Tastatur- und Screenreader-Nutzung. Liegt versteckt und wird
   beim Fokussieren sichtbar — der erste Tab-Stopp der Seite. */
.ws-skip {
  position: absolute; top: -100px; left: var(--ws-4); z-index: 200;
  background: var(--ws-tinte); color: var(--ws-text-invers);
  padding: var(--ws-3) var(--ws-5); border-radius: var(--ws-radius);
  text-decoration: none; font-weight: 600;
}
.ws-skip:focus { top: var(--ws-3); color: var(--ws-text-invers); }


/* ── Layout-Primitive ───────────────────────────────────────────────────── */

.ws-huelle {
  width: 100%;
  max-width: var(--ws-breite);
  margin-inline: auto;
  padding-inline: var(--ws-5);
}
.ws-huelle--eng { max-width: var(--ws-breite-eng); }

.ws-abschnitt { padding-block: var(--ws-9); }
.ws-abschnitt--knapp { padding-block: var(--ws-7); }

/* Die drei Flächen. Sie sind das Kapitelsystem der Seite — beim Scrollen soll
   erkennbar sein, wo ein Thema aufhört und das nächste anfängt. */
.ws-flaeche-ton  { background: var(--ws-papier-ton); }
.ws-flaeche-tief { background: var(--ws-papier-tief); }

.ws-band {
  background: var(--ws-tinte);
  color: var(--ws-text-invers);
}
.ws-band h1, .ws-band h2, .ws-band h3 { color: var(--ws-text-invers); }
.ws-band p  { color: var(--ws-text-invers-2); }
.ws-band a:not(.ws-knopf) { color: var(--ws-kupfer-hell); }

/* Übergang zwischen zwei Volltonflächen: eine feine Linie statt harter Kante. */
.ws-flaeche-ton + .ws-flaeche-ton,
.ws-abschnitt + .ws-flaeche-ton { border-top: 1px solid var(--ws-linie); }


/* ── Abschnitts-Kopf ────────────────────────────────────────────────────────
   Feste Einheit: Eyebrow (mit kurzer Akzentlinie), Titel, Untertitel. Überall
   dieselbe, damit die Seite einen erkennbaren Takt bekommt. */

.ws-kopf { max-width: 46rem; margin-bottom: var(--ws-7); }
.ws-kopf--mitte { margin-inline: auto; text-align: center; }

.ws-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ws-3);
  font-size: var(--ws-t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ws-kupfer-tief);
  margin-bottom: var(--ws-4);
}
.ws-eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; flex: none;
  background: var(--ws-kupfer); border-radius: 2px;
}
.ws-kopf--mitte .ws-eyebrow::before { display: none; }
.ws-band .ws-eyebrow { color: var(--ws-kupfer-hell); }

.ws-kopf h2 {
  font-size: var(--ws-t-3xl);
  margin-bottom: var(--ws-4);
}
.ws-kopf p {
  font-size: var(--ws-t-lg);
  color: var(--ws-text-2);
  line-height: 1.6;
}
.ws-band .ws-kopf p { color: var(--ws-text-invers-2); }

/* Serif für die großen Überschriften. Sie ist der einzige Zierrat der Seite
   und trägt den handwerklichen Ton — deshalb nur H1 und Abschnittstitel,
   nie in Fließtext oder UI. */
.ws-serif {
  font-family: var(--ws-schrift-serif);
  font-weight: 400;
  letter-spacing: -0.012em;
}


/* ── Knöpfe ─────────────────────────────────────────────────────────────────
   Eine primäre Aktion je Ansicht. Die sekundäre ist deutlich leiser — zwei
   gleich laute Knöpfe nebeneinander sind keine Wahl, sondern eine Zögerpause. */

.ws-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ws-2);
  padding: 0.8125rem var(--ws-5);
  min-height: 48px;              /* Touch-Ziel, nicht unterschreiten */
  font-family: inherit;
  font-size: var(--ws-t-base); font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--ws-radius);
  text-decoration: none; cursor: pointer;
  transition: background var(--ws-tempo) ease,
              border-color var(--ws-tempo) ease,
              transform var(--ws-tempo) var(--ws-kurve),
              box-shadow var(--ws-tempo) ease;
}

.ws-knopf--primaer {
  background: var(--ws-kupfer-tief); color: #fff;
  box-shadow: var(--ws-schatten-1);
}
.ws-knopf--primaer:hover {
  background: var(--ws-kupfer-tief-hover); color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ws-schatten-2);
}
.ws-knopf--primaer:active { transform: translateY(0); }

.ws-knopf--sekundaer {
  background: transparent; color: var(--ws-text);
  border-color: var(--ws-linie-stark);
}
.ws-knopf--sekundaer:hover {
  background: var(--ws-papier-ton); color: var(--ws-text);
  border-color: var(--ws-text-3);
}

/* Auf dunklem Grund braucht die primäre Aktion eine helle Fläche — ein
   kupferner Knopf auf Anthrazit hat zu wenig Kontrast zum Untergrund. */
.ws-band .ws-knopf--primaer,
.ws-knopf--hell {
  background: var(--ws-papier); color: var(--ws-tinte);
  box-shadow: none;
}
.ws-band .ws-knopf--primaer:hover,
.ws-knopf--hell:hover { background: #fff; color: var(--ws-tinte); transform: translateY(-1px); }

.ws-band .ws-knopf--sekundaer {
  color: var(--ws-text-invers); border-color: var(--ws-tinte-rand);
}
.ws-band .ws-knopf--sekundaer:hover {
  background: var(--ws-tinte-hoch); color: var(--ws-text-invers);
  border-color: var(--ws-text-3);
}

.ws-knopf--breit { width: 100%; }

/* Kleine Variante — ausschliesslich fuer die Navigationsleiste, wo ein Knopf in
   voller Hoehe die 68px-Zeile sprengen wuerde. Nicht im Inhalt verwenden: Dort
   unterschreitet sie das 44px-Touch-Ziel. */
.ws-knopf--klein { padding: 0.55rem var(--ws-4); min-height: 40px; font-size: var(--ws-t-sm); }
.ws-knopf[disabled], .ws-knopf[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Textlink mit Pfeil — für tertiäre Wege, die keinen Knopf verdienen. */
.ws-weiter {
  display: inline-flex; align-items: center; gap: var(--ws-2);
  font-weight: 600; text-decoration: none;
  color: var(--ws-kupfer-tief);
}
.ws-weiter::after {
  content: "→";
  transition: transform var(--ws-tempo) var(--ws-kurve);
}
.ws-weiter:hover::after { transform: translateX(3px); }


/* ── Navigation ─────────────────────────────────────────────────────────── */

.ws-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--ws-linie);
}
.ws-nav__innen {
  display: flex; align-items: center; gap: var(--ws-5);
  min-height: 68px;
}
.ws-nav__logo { flex: none; display: flex; align-items: center; }
.ws-nav__logo img { height: 34px; width: auto; }

.ws-nav__liste {
  display: flex; align-items: center; gap: var(--ws-1);
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.ws-nav__liste li { margin: 0; }
.ws-nav__liste a {
  display: block; padding: var(--ws-2) var(--ws-3);
  font-size: var(--ws-t-sm); font-weight: 500;
  color: var(--ws-text-2); text-decoration: none;
  border-radius: var(--ws-radius-sm);
  transition: color var(--ws-tempo) ease, background var(--ws-tempo) ease;
}
.ws-nav__liste a:hover { color: var(--ws-text); background: var(--ws-papier-ton); }
.ws-nav__liste a[aria-current="page"] { color: var(--ws-text); font-weight: 600; }

/* ⚠ Der Knopf in der Navigation ist AUCH ein `.ws-nav__liste a`.
   `.ws-nav__liste a` hat Spezifitaet (0,2,1) und schlaegt damit
   `.ws-knopf--primaer` (0,1,0): Der Knopftext wurde grau statt weiss gerendert
   und war auf dem kupfernen Grund praktisch unlesbar. Aufgefallen ist das erst
   am Bildschirm — `check_kontrast` prueft die Tokens, nicht ihre Anwendung.

   Deshalb hier ausgeschrieben statt mit !important: Ein !important in der
   Navigation wuerde beim naechsten Knopf-Zustand (Hover, Fokus) dieselbe Falle
   an anderer Stelle aufmachen. */
.ws-nav__liste a.ws-knopf { color: #fff; }
.ws-nav__liste a.ws-knopf--primaer { background: var(--ws-kupfer-tief); }
.ws-nav__liste a.ws-knopf--primaer:hover { background: var(--ws-kupfer-tief-hover, #8F4A22); color: #fff; }
.ws-nav__liste a.ws-knopf--sekundaer { color: var(--ws-text); background: transparent; }

.ws-nav__tel {
  display: inline-flex; align-items: center; gap: var(--ws-2);
  font-size: var(--ws-t-sm); font-weight: 600;
  color: var(--ws-text); text-decoration: none;
  padding: var(--ws-2) var(--ws-3);
}
.ws-nav__tel:hover { color: var(--ws-kupfer-tief); }

.ws-nav__schalter {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--ws-linie);
  border-radius: var(--ws-radius-sm);
  width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--ws-text);
}


/* ── Hero ───────────────────────────────────────────────────────────────────
   Der wichtigste Abschnitt der Seite. Zwei Spalten: links das Angebot in
   Worten und Zahlen, rechts das Formular als weiße Insel auf dem dunklen Band.

   Bewusst NICHT bildschirmfüllend. Ein 100vh-Hero mit einer großen Aussage und
   einem Pfeil nach unten schiebt genau das aus dem Blick, weshalb die Leute
   hier sind: den Preis. */

.ws-hero {
  position: relative;
  background: var(--ws-tinte);
  color: var(--ws-text-invers);
  overflow: hidden;
  padding-block: var(--ws-8) var(--ws-9);
}

/* Sehr zurückhaltender Lichtschein hinter der Formularkarte — gibt dem Band
   Tiefe, ohne dass man ihn als Effekt wahrnimmt. Opazität bewusst unter 0.08. */
.ws-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58rem 34rem at 78% 8%, rgba(194, 112, 61, 0.16), transparent 62%);
  pointer-events: none;
}
.ws-hero > * { position: relative; }

.ws-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--ws-8);
  align-items: start;
}

.ws-hero h1 {
  font-size: var(--ws-t-5xl);
  line-height: 1.04;
  margin-bottom: var(--ws-5);
  max-width: 15ch;
}
/* Die Zahl in der Überschrift ist der Blickfang der Seite. Kupfer-hell, weil
   sie auf dunklem Grund steht. */
.ws-hero h1 .ws-zahl { color: var(--ws-kupfer-hell); white-space: nowrap; }

.ws-hero__sub {
  font-size: var(--ws-t-lg);
  color: var(--ws-text-invers-2);
  max-width: 42ch;
  margin-bottom: var(--ws-6);
}

/* Die drei Preise als Zeilen, nicht als Karten. Karten würden hier drei
   gleichwertige Angebote suggerieren — es ist aber ein Weg mit einer
   Verzweigung. */
.ws-hero__preise {
  display: flex; flex-wrap: wrap; gap: var(--ws-3);
  margin-bottom: var(--ws-6);
  padding: 0; list-style: none;
}
.ws-hero__preis {
  flex: 1 1 8rem;
  margin: 0;
  padding: var(--ws-4);
  background: var(--ws-tinte-hoch);
  border: 1px solid var(--ws-tinte-rand);
  border-radius: var(--ws-radius);
}
.ws-hero__preis b {
  display: block;
  font-size: var(--ws-t-2xl); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ws-hero__preis span {
  display: block; margin-top: var(--ws-1);
  font-size: var(--ws-t-xs); line-height: 1.4;
  color: var(--ws-text-invers-2);
}

.ws-hero__vertrauen {
  display: flex; flex-wrap: wrap; gap: var(--ws-2) var(--ws-5);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--ws-t-sm); color: var(--ws-text-invers-2);
}
.ws-hero__vertrauen li {
  display: flex; align-items: center; gap: var(--ws-2); margin: 0;
}
.ws-hero__vertrauen svg { flex: none; color: var(--ws-kupfer-hell); }


/* ── Angebotskarte (das Formular im Hero) ───────────────────────────────────
   Weiße Insel auf dem dunklen Band. Der Kontrastsprung macht sie zum
   dominanten Element der Seite — und genau dort soll die Handlung passieren. */

.ws-karte-anfrage {
  background: var(--ws-papier);
  color: var(--ws-text);
  border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-schatten-3);
  overflow: hidden;
}
.ws-karte-anfrage__kopf {
  padding: var(--ws-5) var(--ws-5) var(--ws-4);
  border-bottom: 1px solid var(--ws-linie);
  background: var(--ws-kupfer-hauch);
}
.ws-karte-anfrage__kopf h2 {
  font-size: var(--ws-t-xl);
  margin-bottom: var(--ws-2);
  color: var(--ws-text);
}
.ws-karte-anfrage__kopf p {
  font-size: var(--ws-t-sm); color: var(--ws-text-2); margin: 0;
}
.ws-karte-anfrage__leib { padding: var(--ws-5); }
.ws-karte-anfrage__fuss {
  padding: var(--ws-3) var(--ws-5) var(--ws-5);
  font-size: var(--ws-t-xs); color: var(--ws-text-3); line-height: 1.5;
}


/* ── Formulare ──────────────────────────────────────────────────────────── */

.ws-feld { margin-bottom: var(--ws-4); }
.ws-feld:last-of-type { margin-bottom: var(--ws-5); }

.ws-feld label {
  display: block; margin-bottom: var(--ws-2);
  font-size: var(--ws-t-sm); font-weight: 600; color: var(--ws-text);
}
.ws-feld__pflicht { color: var(--ws-kupfer-tief); }

.ws-feld input[type="text"],
.ws-feld input[type="email"],
.ws-feld input[type="tel"],
.ws-feld select,
.ws-feld textarea {
  width: 100%;
  padding: 0.75rem var(--ws-4);
  min-height: 48px;
  font-family: inherit; font-size: var(--ws-t-base);
  color: var(--ws-text); background: var(--ws-papier);
  border: 1px solid var(--ws-linie-stark);
  border-radius: var(--ws-radius);
  transition: border-color var(--ws-tempo) ease, box-shadow var(--ws-tempo) ease;
}
.ws-feld textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

.ws-feld input:focus, .ws-feld select:focus, .ws-feld textarea:focus {
  outline: none;
  border-color: var(--ws-kupfer-tief);
  box-shadow: 0 0 0 3px rgba(158, 85, 40, 0.16);
}
.ws-feld input::placeholder, .ws-feld textarea::placeholder { color: var(--ws-text-3); }

.ws-feld select {
  appearance: none;
  /* Pfeil als Data-URI statt Icon-Font — spart eine Anfrage. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236B7480' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ws-4) center;
  padding-right: var(--ws-8);
}

.ws-feld__hinweis {
  margin: var(--ws-2) 0 0;
  font-size: var(--ws-t-xs); color: var(--ws-text-3);
}
.ws-feld--fehler input, .ws-feld--fehler select, .ws-feld--fehler textarea {
  border-color: var(--ws-rot);
}
.ws-feld__fehler {
  margin: var(--ws-2) 0 0;
  font-size: var(--ws-t-sm); font-weight: 500; color: var(--ws-rot);
}

/* Honeypot. Nicht display:none und nicht type="hidden" — beides erkennen Bots.
   Das Feld ist für Menschen unerreichbar (aus dem Blickfeld geschoben, nicht
   fokussierbar), für einen Bot, der stumpf alle Felder ausfüllt, aber sichtbar. */
.ws-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ws-meldung {
  padding: var(--ws-4) var(--ws-5);
  border-radius: var(--ws-radius);
  border: 1px solid;
  margin-bottom: var(--ws-5);
  font-size: var(--ws-t-sm);
}
.ws-meldung--gut    { background: #EEF6F1; border-color: #BFDCCC; color: #14512F; }
.ws-meldung--fehler { background: #FBEFEE; border-color: #EBC7C4; color: #7E241F; }


/* ── Karten & Raster ────────────────────────────────────────────────────── */

.ws-raster { display: grid; gap: var(--ws-5); }
.ws-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ws-karte {
  position: relative;
  padding: var(--ws-6);
  background: var(--ws-papier);
  border: 1px solid var(--ws-linie);
  border-radius: var(--ws-radius);
  transition: transform var(--ws-tempo) var(--ws-kurve),
              box-shadow var(--ws-tempo) ease,
              border-color var(--ws-tempo) ease;
}
.ws-karte:hover {
  transform: translateY(-2px);
  box-shadow: var(--ws-schatten-2);
  border-color: var(--ws-linie-stark);
}
.ws-karte h3 { font-size: var(--ws-t-xl); margin-bottom: var(--ws-3); }
.ws-karte p  { color: var(--ws-text-2); }

/* Akzentkante statt eingefärbter Fläche — hebt hervor, ohne laut zu werden. */
.ws-karte--akzent { border-left: 3px solid var(--ws-kupfer); }

.ws-karte__nummer {
  font-family: var(--ws-schrift-serif);
  font-size: var(--ws-t-2xl);
  color: var(--ws-kupfer);
  line-height: 1;
  margin-bottom: var(--ws-3);
  display: block;
}

/* Häkchenliste — das einzige Icon der Seite, als Inline-SVG-Maske im CSS. */
.ws-haken { list-style: none; padding: 0; margin: 0; }
.ws-haken li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: var(--ws-3);
  color: var(--ws-text-2);
}
.ws-haken li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 1.05rem; height: 1.05rem;
  background: var(--ws-kupfer);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.9 10.5l1.4-1.4 2.3 2.3 7-7 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ws-band .ws-haken li { color: var(--ws-text-invers-2); }
.ws-band .ws-haken li::before { background: var(--ws-kupfer-hell); }


/* ── Preistafel ─────────────────────────────────────────────────────────────
   Zwei Wege zur Website nebeneinander, darunter die Zusatzleistungen. Der
   empfohlene Weg ist hervorgehoben — aber nicht mit „BELIEBT"-Fähnchen, das
   niemand glaubt, sondern über Fläche und Rahmen. */

.ws-preise { display: grid; gap: var(--ws-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ws-preis {
  display: flex; flex-direction: column;
  padding: var(--ws-6);
  background: var(--ws-papier);
  border: 1px solid var(--ws-linie);
  border-radius: var(--ws-radius-lg);
}
.ws-preis--empfohlen {
  border-color: var(--ws-kupfer);
  box-shadow: var(--ws-schatten-2);
}
.ws-preis__marke {
  align-self: flex-start;
  font-size: var(--ws-t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ws-kupfer-tief);
  background: var(--ws-kupfer-hauch);
  padding: var(--ws-1) var(--ws-3);
  border-radius: 999px;
  margin-bottom: var(--ws-4);
}
.ws-preis h3 { font-size: var(--ws-t-lg); color: var(--ws-text-2); font-weight: 600; margin-bottom: var(--ws-2); }

.ws-preis__betrag {
  display: flex; align-items: baseline; gap: var(--ws-2);
  margin-bottom: var(--ws-2);
}
.ws-preis__betrag b {
  font-size: var(--ws-t-4xl); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ws-preis__betrag span { font-size: var(--ws-t-base); color: var(--ws-text-3); }

.ws-preis__ust { font-size: var(--ws-t-xs); color: var(--ws-text-3); margin-bottom: var(--ws-5); }
.ws-preis__liste { flex: 1; margin-bottom: var(--ws-5); }
.ws-preis .ws-knopf { margin-top: auto; }

/* Zusatzleistungen als schlichte Tabelle — bei Preisen ist eine Tabelle
   ehrlicher als Karten: man kann sie vergleichen. */
.ws-tabelle { width: 100%; border-collapse: collapse; font-size: var(--ws-t-sm); }
.ws-tabelle th, .ws-tabelle td {
  text-align: left; padding: var(--ws-3) var(--ws-4);
  border-bottom: 1px solid var(--ws-linie);
}
.ws-tabelle th { font-weight: 600; color: var(--ws-text); }
.ws-tabelle td:last-child {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.ws-tabelle tr:last-child th, .ws-tabelle tr:last-child td { border-bottom: 0; }

/* Tabellen dürfen die Seite nie horizontal schieben — sie scrollen selbst. */
.ws-scrollbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ── Antwort-zuerst-Block ───────────────────────────────────────────────────
   Steht auf jeder Unterseite direkt unter der H1 und beantwortet die Frage der
   Überschrift in zwei bis drei Sätzen, bevor irgendetwas erklärt wird.

   Zwei Gründe: Menschen lesen die ersten Zeilen und entscheiden dann. Und
   KI-Antwortsysteme zitieren genau solche Blöcke — .ws-antwort-text ist das
   speakable-Ziel im Schema. Wer hier einen Werbesatz hinschreibt, verschenkt
   die wertvollste Stelle der Seite. */

.ws-antwort {
  padding: var(--ws-5) var(--ws-6);
  background: var(--ws-kupfer-hauch);
  border-left: 3px solid var(--ws-kupfer);
  border-radius: 0 var(--ws-radius) var(--ws-radius) 0;
  margin-bottom: var(--ws-7);
}
.ws-antwort-text {
  font-size: var(--ws-t-lg);
  line-height: 1.6;
  color: var(--ws-text);
  margin: 0;
}


/* ── Referenzen ─────────────────────────────────────────────────────────── */

.ws-referenz {
  display: flex; flex-direction: column;
  padding: var(--ws-5) var(--ws-6);
  background: var(--ws-papier);
  border: 1px solid var(--ws-linie);
  border-radius: var(--ws-radius);
  text-decoration: none; color: inherit;
  transition: transform var(--ws-tempo) var(--ws-kurve),
              box-shadow var(--ws-tempo) ease, border-color var(--ws-tempo) ease;
}
.ws-referenz:hover {
  transform: translateY(-2px);
  box-shadow: var(--ws-schatten-2);
  border-color: var(--ws-linie-stark);
  color: inherit;
}
.ws-referenz__branche {
  font-size: var(--ws-t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ws-kupfer-tief); margin-bottom: var(--ws-3);
}
.ws-referenz h3 { font-size: var(--ws-t-lg); margin-bottom: var(--ws-2); }
.ws-referenz__ort { font-size: var(--ws-t-sm); color: var(--ws-text-3); margin-bottom: var(--ws-4); }
.ws-referenz p { font-size: var(--ws-t-sm); color: var(--ws-text-2); flex: 1; }
.ws-referenz__url {
  margin-top: var(--ws-4);
  font-size: var(--ws-t-sm); font-weight: 600; color: var(--ws-kupfer-tief);
  display: inline-flex; align-items: center; gap: var(--ws-2);
}
.ws-referenz__url::after { content: "↗"; }


/* ── Ablauf (nummerierte Schritte) ──────────────────────────────────────── */

.ws-ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ws-5); }
.ws-ablauf li {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--ws-4);
  align-items: start; margin: 0;
}
.ws-ablauf__nr {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  font-family: var(--ws-schrift-serif); font-size: var(--ws-t-lg);
  color: var(--ws-kupfer-tief);
  background: var(--ws-kupfer-hauch);
  border-radius: 50%;
}
.ws-band .ws-ablauf__nr { background: var(--ws-tinte-hoch); color: var(--ws-kupfer-hell); }
.ws-ablauf h3 { font-size: var(--ws-t-base); margin-bottom: var(--ws-1); }
.ws-ablauf p { font-size: var(--ws-t-sm); color: var(--ws-text-2); margin: 0; }
.ws-band .ws-ablauf p { color: var(--ws-text-invers-2); }


/* ── FAQ ────────────────────────────────────────────────────────────────────
   <details>/<summary> statt JavaScript. Der Text steht damit im HTML, auch
   wenn er zugeklappt ist — Crawler und KI-Systeme lesen ihn, und die Seite
   funktioniert ohne Skript. */

.ws-faq { border-top: 1px solid var(--ws-linie); }
.ws-faq details { border-bottom: 1px solid var(--ws-linie); }
.ws-faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ws-4);
  padding: var(--ws-5) 0;
  font-size: var(--ws-t-lg); font-weight: 600;
  cursor: pointer; list-style: none;
}
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after {
  content: ""; flex: none;
  width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--ws-kupfer-tief);
  border-bottom: 2px solid var(--ws-kupfer-tief);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--ws-tempo) var(--ws-kurve);
}
.ws-faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.ws-faq summary:hover { color: var(--ws-kupfer-tief); }
.ws-faq__antwort { padding: 0 0 var(--ws-5); color: var(--ws-text-2); max-width: 62ch; }


/* ── Über mich ──────────────────────────────────────────────────────────── */

.ws-person { display: grid; grid-template-columns: 220px 1fr; gap: var(--ws-7); align-items: start; }

/* Platzhalter für das Profilbild. Er sieht bewusst wie ein Platzhalter aus und
   nicht wie eine Silhouette-Grafik — ein echtes Foto kommt nach. */
.ws-person__bild {
  aspect-ratio: 1;
  border-radius: var(--ws-radius-lg);
  background: var(--ws-papier-tief);
  border: 1px solid var(--ws-linie);
  display: flex; align-items: center; justify-content: center;
  color: var(--ws-text-3); font-size: var(--ws-t-sm); text-align: center;
  padding: var(--ws-4);
  overflow: hidden;
}
.ws-person__bild img { width: 100%; height: 100%; object-fit: cover; }


/* ── Fußzeile ───────────────────────────────────────────────────────────── */

.ws-fuss { background: var(--ws-tinte); color: var(--ws-text-invers-2); padding-block: var(--ws-8) var(--ws-6); }
.ws-fuss__raster {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--ws-6);
  margin-bottom: var(--ws-7);
}
.ws-fuss h2 {
  font-size: var(--ws-t-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ws-text-invers); margin-bottom: var(--ws-4);
}
.ws-fuss ul { list-style: none; padding: 0; margin: 0; }
.ws-fuss li { margin-bottom: var(--ws-2); font-size: var(--ws-t-sm); }
.ws-fuss a { color: var(--ws-text-invers-2); text-decoration: none; }
.ws-fuss a:hover { color: #fff; text-decoration: underline; }
.ws-fuss__logo { height: 30px; width: auto; margin-bottom: var(--ws-4); }
/* <address> kursiviert von Haus aus — hier sind es Kontaktdaten, kein Zitat. */
.ws-adresse { font-style: normal; }
.ws-fuss__ende {
  border-top: 1px solid var(--ws-tinte-rand);
  padding-top: var(--ws-5);
  display: flex; flex-wrap: wrap; gap: var(--ws-3) var(--ws-5);
  justify-content: space-between;
  font-size: var(--ws-t-xs);
}


/* ── Eintritts-Animation ────────────────────────────────────────────────────
   Nur opacity und transform — beides läuft auf dem Compositor und erzwingt
   kein Layout. Alles andere (height, top, margin) ruckelt auf schwachen
   Geräten. Ohne JavaScript bleibt der Inhalt sichtbar: Die Regel greift erst,
   wenn das Skript die Klasse gesetzt hat. */

.ws-js [data-ws-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms var(--ws-kurve), transform 460ms var(--ws-kurve);
}
.ws-js [data-ws-reveal].ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ws-js [data-ws-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ── Responsiv ──────────────────────────────────────────────────────────────
   Mobile-first wäre sauberer, aber dieses Projekt ist am Desktop entworfen und
   die Umkehr wäre eine reine Umschreibarbeit ohne Nutzen. Wichtig ist, dass
   jeder Breakpoint hier steht und nicht verstreut in den Komponenten. */

@media (max-width: 1080px) {
  .ws-hero__raster { grid-template-columns: 1fr; gap: var(--ws-7); }
  .ws-hero h1 { max-width: 18ch; }
  .ws-karte-anfrage { max-width: 32rem; }
  .ws-fuss__raster { grid-template-columns: 1fr 1fr; gap: var(--ws-6); }
}

@media (max-width: 860px) {
  .ws-nav__liste, .ws-nav__tel { display: none; }
  .ws-nav__schalter { display: inline-flex; }
  .ws-nav__liste.ist-offen {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ws-papier);
    border-bottom: 1px solid var(--ws-linie);
    box-shadow: var(--ws-schatten-2);
    padding: var(--ws-3) var(--ws-5) var(--ws-5);
    gap: 0;
  }
  .ws-nav__liste.ist-offen a { padding: var(--ws-4) var(--ws-2); font-size: var(--ws-t-base); }
  .ws-nav__liste.ist-offen li + li { border-top: 1px solid var(--ws-linie); }

  .ws-raster--2, .ws-raster--3, .ws-preise { grid-template-columns: 1fr; }
  .ws-person { grid-template-columns: 1fr; gap: var(--ws-5); }
  .ws-person__bild { max-width: 200px; }
  .ws-abschnitt { padding-block: var(--ws-8); }
}

@media (max-width: 620px) {
  .ws-huelle { padding-inline: var(--ws-4); }
  .ws-hero { padding-block: var(--ws-6) var(--ws-7); }
  .ws-hero h1 { max-width: none; }
  /* Auf dem Handy stehen die drei Preise untereinander: nebeneinander wäre
     jede Zahl so klein, dass sie ihren Zweck verliert. */
  .ws-hero__preise { flex-direction: column; gap: var(--ws-2); }
  .ws-hero__preis { display: flex; align-items: baseline; gap: var(--ws-3); padding: var(--ws-3) var(--ws-4); }
  .ws-hero__preis b { font-size: var(--ws-t-xl); }
  .ws-hero__preis span { margin-top: 0; }
  .ws-karte { padding: var(--ws-5); }
  .ws-preis { padding: var(--ws-5); }
  .ws-antwort { padding: var(--ws-4) var(--ws-5); }
  .ws-fuss__raster { grid-template-columns: 1fr; gap: var(--ws-5); }
  .ws-abschnitt { padding-block: var(--ws-7); }
}

@media print {
  .ws-nav, .ws-karte-anfrage, .ws-fuss { display: none; }
  body { color: #000; background: #fff; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ERWEITERUNG — neue Bausteine ans Dateiende, nicht zwischen die Blöcke oben.
   Wer eine Regel mittendrin ergänzt, überschreibt leicht etwas, das weiter
   unten schon dasselbe Property setzt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nachsatz unter einem Block — kleiner, ruhiger, kein eigener Abschnitt. */
.ws-nachsatz {
  margin-top: var(--ws-5);
  font-size: var(--ws-t-sm);
  color: var(--ws-text-3);
}
.ws-band .ws-nachsatz { color: var(--ws-text-invers-2); }

/* Brotkrume */
.ws-brotkrumen { margin-bottom: var(--ws-5); font-size: var(--ws-t-sm); }
.ws-brotkrumen ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ws-2);
  list-style: none; margin: 0; padding: 0;
}
.ws-brotkrumen li { margin: 0; display: flex; align-items: center; gap: var(--ws-2); }
.ws-brotkrumen li + li::before { content: "/"; color: var(--ws-linie-stark); }
.ws-brotkrumen a { color: var(--ws-text-3); text-decoration: none; }
.ws-brotkrumen a:hover { color: var(--ws-kupfer-tief); text-decoration: underline; }
.ws-brotkrumen [aria-current] { color: var(--ws-text-2); }

/* Schluss-CTA im dunklen Band */
.ws-cta {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--ws-7); align-items: center;
}
.ws-cta h2 { font-size: var(--ws-t-3xl); margin-bottom: var(--ws-3); }
.ws-cta p { max-width: 52ch; margin: 0; }
.ws-cta__aktionen { display: flex; flex-direction: column; gap: var(--ws-3); min-width: 15rem; }

/* Ortsliste — Textlinks statt Karten. Zwölf Karten für zwölf Ortsnamen wären
   viel Fläche für wenig Information. */
.ws-orte { display: flex; flex-wrap: wrap; gap: var(--ws-2); }
.ws-orte a {
  padding: var(--ws-2) var(--ws-4);
  font-size: var(--ws-t-sm); font-weight: 500;
  color: var(--ws-text-2); text-decoration: none;
  background: var(--ws-papier-ton);
  border: 1px solid var(--ws-linie);
  border-radius: 999px;
  transition: background var(--ws-tempo) ease, color var(--ws-tempo) ease,
              border-color var(--ws-tempo) ease;
}
.ws-orte a:hover {
  background: var(--ws-kupfer-hauch); color: var(--ws-kupfer-tief);
  border-color: var(--ws-kupfer);
}
.ws-flaeche-ton .ws-orte a { background: var(--ws-papier); }

/* Zweispaltiger Fließtext-Block (Über mich, Leistungsseiten) */
.ws-text { max-width: 68ch; }
.ws-text h2 { font-size: var(--ws-t-2xl); margin: var(--ws-7) 0 var(--ws-4); }
.ws-text h3 { font-size: var(--ws-t-lg); margin: var(--ws-6) 0 var(--ws-3); }
.ws-text > :first-child { margin-top: 0; }

/* Rechtstexte */
.ws-rechtstext { max-width: var(--ws-breite-eng); }
.ws-rechtstext h2 { font-size: var(--ws-t-xl); margin: var(--ws-7) 0 var(--ws-4); }
.ws-rechtstext h3 { font-size: var(--ws-t-base); margin: var(--ws-5) 0 var(--ws-2); }
.ws-rechtstext > :first-child { margin-top: 0; }
.ws-rechtstext p, .ws-rechtstext li { color: var(--ws-text-2); }
.ws-rechtstext address { font-style: normal; }

/* Seitenkopf der Unterseiten — heller als der Hero, damit die Startseite
   ihren Rang behält. */
.ws-seitenkopf { padding-block: var(--ws-8) var(--ws-6); background: var(--ws-papier-ton); border-bottom: 1px solid var(--ws-linie); }
.ws-seitenkopf h1 { font-size: var(--ws-t-4xl); margin-bottom: var(--ws-4); max-width: 22ch; }
.ws-seitenkopf__sub { font-size: var(--ws-t-lg); color: var(--ws-text-2); max-width: 60ch; margin: 0; }

/* Kennzahlenzeile */
.ws-fakten { display: flex; flex-wrap: wrap; gap: var(--ws-6); margin: 0; padding: 0; list-style: none; }
.ws-fakten li { margin: 0; }
.ws-fakten b {
  display: block; font-size: var(--ws-t-2xl); font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ws-fakten span { font-size: var(--ws-t-sm); color: var(--ws-text-3); }
.ws-band .ws-fakten span { color: var(--ws-text-invers-2); }

@media (max-width: 860px) {
  .ws-cta { grid-template-columns: 1fr; gap: var(--ws-5); }
  .ws-cta__aktionen { flex-direction: row; min-width: 0; }
  .ws-cta__aktionen .ws-knopf { flex: 1; }
}
@media (max-width: 620px) {
  .ws-cta__aktionen { flex-direction: column; }
  .ws-seitenkopf { padding-block: var(--ws-6) var(--ws-5); }
}

/* Wenige Hilfsklassen, damit in den Templates kein style="" steht. Bewusst
   knapp gehalten: Ein Utility-Wildwuchs hebelt das Token-System genauso aus
   wie ein Inline-Style, nur unauffälliger. */
.ws-titel-mittel { font-size: var(--ws-t-3xl); margin-bottom: var(--ws-4); }
.ws-block-titel  { font-size: var(--ws-t-2xl); margin-bottom: var(--ws-4); }
.ws-aktionen     { display: flex; flex-wrap: wrap; gap: var(--ws-3); margin-top: var(--ws-6); }
.ws-lesebreite   { max-width: var(--ws-breite-eng); }
.ws-abstand-oben { margin-top: var(--ws-7); }
/* Die Schrittueberschriften im Ablauf sind je nach Umgebung h3 oder h4 —
   auf der Kontaktseite stehen sie unter einer h3 und muessen dann h4 sein.
   Optisch bleiben beide gleich; die Ebene richtet sich nach dem Dokument,
   nicht nach dem Aussehen. */
.ws-ablauf h4 { font-size: var(--ws-t-base); margin: 0 0 var(--ws-1); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   FEINSCHLIFF nach der Prüfung am Bildschirm und auf sechs Geräten (01.09.2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* CTA-Band und Fußzeile sind beide anthrazit und stießen ohne Trennung
   aneinander — beim Scrollen wurde daraus eine einzige, sehr lange dunkle
   Fläche ohne erkennbares Ende. Eine Hairline genügt, um zwei Kapitel daraus
   zu machen; eine zweite Farbe wäre hier zu viel. */
.ws-band + .ws-fuss { border-top: 1px solid var(--ws-tinte-rand); }

/* Das Logo in der Fußzeile war bei 30 px so klein, dass die Wortmarke
   verschwamm. Es ist dort das einzige Markenzeichen — es darf gesehen werden. */
.ws-fuss__logo { height: 40px; }

/* ── Tippziele auf dem Handy ────────────────────────────────────────────────
   Gemessen mit tools/check_mobil.py: Die Weiter-Links und die Fußzeilen-Links
   waren 18–26 px hoch. Unter 44 px trifft ein Daumen unzuverlässig, und wer
   danebentippt, landet auf einer Seite, die er nicht wollte.

   Nur auf Touch-Geräten: Am Schreibtisch mit der Maus kosten 44 px hohe
   Textlinks nur Platz. `pointer: coarse` trifft genau die Geräte, um die es
   geht — nicht die Fensterbreite, die auch ein schmales Desktop-Fenster sein
   kann. */
@media (pointer: coarse) {
  .ws-weiter {
    min-height: 44px;
    align-items: center;
  }
  .ws-fuss li { margin-bottom: 0; }
  .ws-fuss li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ws-brotkrumen li { min-height: 36px; align-items: center; }
  .ws-karte-anfrage__fuss a,
  .ws-nachsatz a {
    display: inline-block;
    padding-block: var(--ws-2);
  }
}

/* Die Branchenzeile der Referenzkarten war bei einem Betrieb mit vier Gewerken
   vierzeilig und schob dessen Namen weit nach unten — drei Karten
   nebeneinander liefen dadurch sichtbar auseinander. Zwei Zeilen sind die
   Grenze, danach wird gekürzt.
   line-clamp braucht -webkit- auch in aktuellen Browsern; der Standardname
   allein greift noch nicht überall. */
.ws-referenz__branche {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}

/* Der Zusatz "+ 250 €/Monat" gehört optisch zur Zahl davor, nicht daneben —
   sonst liest jemand "500 €" und übersieht die Fortsetzung. Kleiner gesetzt,
   aber in derselben Zeile und derselben Farbe. */
.ws-hero__preis b small {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* Auf dem Handy stehen Zahl und Beschriftung nebeneinander — dort braucht
     die Beschriftung mehr Platz und darf umbrechen. */
  .ws-hero__preis { align-items: flex-start; }
  .ws-hero__preis span { line-height: 1.35; }
}