/* ==========================================================================
   DK Solutions – Stylesheet der Website dksolutions-handwerk.de

   Schriften: lokal auf dem eigenen Webspace, keine Verbindung zu Google.
   Inter und Inter Display (The Inter Project Authors), SIL Open Font License 1.1,
   siehe fonts/OFL.txt.
   Überschriften vorläufig in Inter Display. Für Archivo: archivo-700.woff2 und
   archivo-800.woff2 nach fonts/ legen, die beiden Blöcke unten einkommentieren
   und in --dk-font-titel "Archivo" an den Anfang setzen.
   ========================================================================== */


@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-display-700.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-display-800.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/archivo-800.woff2") format("woff2"); }
*/

/* ==========================================================================
   DK Solutions – Basis-Styles
   Markenfarben, Typografie und Grundkomponenten für Website, Landingpages
   und HTML-Grafiken. Die Werte entsprechen references/marke.md – Änderungen
   zuerst dort festlegen.
   Schriften: Archivo (Titel) und Inter (Text). In der Vorschau über
   Google Fonts laden, für die Live-Website lokal hosten.

   Flächen: Standard ist hell. .dk-grau = hellgraue Fläche, .dk-dunkel =
   Dunkelblau, .dk-schwarz = Schwarz, .dk-hell = weiße Insel (z. B. eine
   Formular-Karte) innerhalb einer dunklen Fläche. Komponenten lesen ihre
   Farben aus den --ctx-Variablen und passen sich so automatisch an.
   ========================================================================== */

:root {
  /* Markenfarben */
  --dk-weiss: #FFFFFF;
  --dk-schwarz: #111111;
  --dk-blau: #1457D9;
  --dk-dunkelblau: #0B1F3A;
  --dk-hellgrau: #F4F6F8;
  --dk-linie: #DDE2E8;

  /* Abgeleitete Töne – nur Mischungen/Transparenzen der Markenfarben */
  --dk-text-2: #545454;                        /* Sekundärtext, 7,6:1 auf Weiß */
  --dk-feldrahmen: #888888;                    /* Eingabefelder, 3,5:1 */
  --dk-blau-hover: #144CBB;                    /* 85 % Blau + 15 % Schwarz */
  --dk-blau-flaeche: rgba(20, 87, 217, 0.08);  /* dezente blaue Hinterlegung */
  --dk-weiss-2: rgba(255, 255, 255, 0.78);     /* Sekundärtext auf Dunkelblau, 10,4:1 */
  --dk-linie-dunkel: rgba(255, 255, 255, 0.16);

  /* Schrift: Archivo für Überschriften und Zahlen, Inter für Text und Bedienung */
  --dk-font-titel: "Inter Display", "Inter", Arial, system-ui, sans-serif;
  --dk-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Typo-Skala (Handy → Desktop). Jede Rolle hat genau eine Größe. */
  --dk-t-display: clamp(2rem, 1.25rem + 3.4vw, 4rem);         /* Hero-Headline: 34 → 64 px */
  --dk-t-abschnitt: clamp(1.625rem, 1.083rem + 2.22vw, 2.75rem); /* Abschnitt (H2): 26 → 44 px */
  --dk-t-block: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);    /* Kasten-Überschrift: 22 → 28 px */
  --dk-t-element: clamp(1.1875rem, 1.13rem + 0.25vw, 1.25rem); /* Karten-Titel (H3): 19 → 20 px */
  --dk-t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);      /* Einleitung: 18 → 21 px */
  --dk-t-text: 1.0625rem;                                     /* Fließtext und Listentitel: 17 px */
  --dk-t-klein: 0.9375rem;                                    /* Sekundärtext, Hinweise: 15 px */
  --dk-t-mini: 0.8125rem;                                     /* Überzeilen, Rechtliches: 13 px */

  /* Form und Raster */
  --dk-radius: 12px;
  --dk-radius-klein: 8px;
  --dk-max: 1200px;
  --dk-rand: clamp(20px, 5vw, 40px);
  --dk-abschnitt: clamp(64px, 9vw, 120px);
  --dk-header: 72px;
  --dk-uebergang: 180ms ease;

  color-scheme: light;
}

/* ---------- Farbkontext: hell (Standard) und dunkel ---------- */

:root,
.dk-hell {
  --ctx-text: var(--dk-schwarz);
  --ctx-text-2: var(--dk-text-2);
  --ctx-akzent: var(--dk-blau);          /* Links, Überzeilen, Akzentwörter */
  --ctx-akzent-hover: var(--dk-blau-hover);
  --ctx-akzent-linie: none;              /* Unterstreichung von Akzentwörtern */
  --ctx-invers: var(--dk-weiss);
  --ctx-karte: var(--dk-weiss);
  --ctx-rand: var(--dk-linie);
  --ctx-hinterlegung: var(--dk-blau-flaeche);
}

/* Auf Dunkelblau/Schwarz ist blaue Schrift zu kontrastarm (2,7:1 bzw. 3,1:1):
   Text wird weiß, Blau bleibt für Linien, Punkte und Button-Flächen. */
.dk-dunkel,
.dk-schwarz {
  --ctx-text: var(--dk-weiss);
  --ctx-text-2: var(--dk-weiss-2);
  --ctx-akzent: var(--dk-weiss);
  --ctx-akzent-hover: var(--dk-weiss);
  --ctx-akzent-linie: underline;
  --ctx-invers: var(--dk-dunkelblau);
  --ctx-karte: rgba(255, 255, 255, 0.04);
  --ctx-rand: var(--dk-linie-dunkel);
  --ctx-hinterlegung: rgba(255, 255, 255, 0.10);
}
.dk-schwarz { --ctx-invers: var(--dk-schwarz); }

.dk-grau { background: var(--dk-hellgrau); }
.dk-dunkel { background: var(--dk-dunkelblau); color: var(--dk-weiss); }
.dk-schwarz { background: var(--dk-schwarz); color: var(--dk-weiss); }
.dk-hell { background: var(--dk-weiss); color: var(--dk-schwarz); }

/* ---------- Grundlagen ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--dk-header);
}

body {
  margin: 0;
  background: var(--dk-weiss);
  color: var(--dk-schwarz);
  font-family: var(--dk-font-text);
  font-size: var(--dk-t-text);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--dk-font-titel);
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--dk-t-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--dk-t-abschnitt); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h3, h4 { font-size: var(--dk-t-element); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }

/* Rollen für Elemente, deren HTML-Tag nicht zur Optik passt */
.dk-blocktitel { font-family: var(--dk-font-titel); font-size: var(--dk-t-block); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.dk-listentitel { font-family: var(--dk-font-text); font-size: var(--dk-t-text); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
strong, b { font-weight: 600; }
p { margin: 0 0 1em; max-width: 65ch; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--ctx-akzent); text-underline-offset: 0.18em; }
a:hover { color: var(--ctx-akzent-hover); }

.dk-gross { font-size: var(--dk-t-lead); line-height: 1.55; }
.dk-leise { color: var(--ctx-text-2); }
.dk-klein { font-size: var(--dk-t-klein); line-height: 1.5; }

/* Einzelnes Wort in einer Headline hervorheben (auf dunklen Flächen: weiß mit blauer Unterstreichung) */
.dk-akzent {
  color: var(--ctx-akzent);
  text-decoration-line: var(--ctx-akzent-linie);
  text-decoration-color: var(--dk-blau);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.14em;
}

/* Überzeile mit kurzer blauer Linie */
.dk-ueberzeile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--dk-font-text);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ctx-akzent);
}
.dk-ueberzeile::before { content: ""; flex: none; width: 32px; height: 2px; background: var(--dk-blau); }

/* Akzentlinie als eigenes Element */
.dk-linie { display: block; width: 48px; height: 3px; margin: 0 0 24px; border: 0; background: var(--dk-blau); }

/* ---------- Layout ---------- */

.dk-container {
  width: 100%;
  max-width: calc(var(--dk-max) + 2 * var(--dk-rand));
  margin-inline: auto;
  padding-inline: var(--dk-rand);
}
.dk-abschnitt { padding-block: var(--dk-abschnitt); }

/* ---------- Buttons ---------- */

.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--dk-radius-klein);
  font: 600 1rem/1.2 var(--dk-font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dk-uebergang), border-color var(--dk-uebergang), color var(--dk-uebergang);
}
.dk-btn--primaer { background: var(--dk-blau); color: var(--dk-weiss); }
.dk-btn--primaer:hover { background: var(--dk-blau-hover); color: var(--dk-weiss); }
.dk-btn--sekundaer { background: transparent; color: var(--ctx-text); border-color: var(--ctx-text); }
.dk-btn--sekundaer:hover { background: var(--ctx-text); color: var(--ctx-invers); }
.dk-btn:disabled { opacity: 0.6; cursor: progress; }

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

/* ---------- Karten ---------- */

.dk-karte {
  background: var(--ctx-karte);
  border: 1px solid var(--ctx-rand);
  border-radius: var(--dk-radius);
  padding: clamp(22px, 3vw, 32px);
}
.dk-karte h3 { margin-bottom: 8px; }
.dk-karte p { margin: 0; color: var(--ctx-text-2); }

/* ---------- Formular (am besten auf heller Fläche bzw. in einer .dk-hell-Karte) ---------- */

.dk-feld { display: grid; gap: 6px; }
.dk-feld label { font-size: var(--dk-t-klein); font-weight: 600; }
.dk-optional { font-weight: 400; color: var(--ctx-text-2); }

.dk-eingabe {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--dk-feldrahmen);
  border-radius: var(--dk-radius-klein);
  background: var(--dk-weiss);
  color: var(--dk-schwarz);
  font: 400 1rem/1.4 var(--dk-font-text); /* mind. 16 px – sonst zoomen iPhones */
  transition: border-color var(--dk-uebergang), box-shadow var(--dk-uebergang);
}
textarea.dk-eingabe { min-height: 140px; resize: vertical; }
select.dk-eingabe {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.dk-eingabe:focus { outline: none; border-color: var(--dk-blau); box-shadow: 0 0 0 3px rgba(20, 87, 217, 0.25); }

/* Fehler ohne Rot: klarer Text, Symbol, kräftiger Rahmen */
.dk-eingabe[aria-invalid="true"] { border: 2px solid var(--dk-schwarz); }
.dk-fehler { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--dk-t-klein); font-weight: 600; color: var(--ctx-text); }
.dk-fehler:empty { display: none; }
.dk-fehler::before {
  content: "!";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ctx-text);
  color: var(--ctx-invers);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Statusmeldung nach dem Absenden (mit aria-live verwenden) */
.dk-meldung {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--dk-blau);
  border-radius: 4px;
  background: var(--ctx-hinterlegung);
  color: var(--ctx-text);
}
.dk-meldung:empty { display: none; }

/* ---------- Platzhalter (müssen vor dem Livegang ersetzt werden) ---------- */

.dk-platzhalter {
  padding: 0 0.3em;
  border-radius: 4px;
  background: var(--ctx-hinterlegung);
  outline: 1.5px dashed var(--ctx-akzent);
  outline-offset: 1px;
}

.dk-bildplatzhalter {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 24px;
  border: 1px dashed var(--dk-feldrahmen);
  border-radius: var(--dk-radius);
  background:
    repeating-linear-gradient(138deg, transparent 0 22px, rgba(20, 87, 217, 0.09) 22px 23px),
    var(--dk-hellgrau);
  color: var(--dk-text-2);
  font-size: var(--dk-t-klein);
  text-align: center;
}

/* ---------- Hilfsklassen ---------- */

.dk-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.dk-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--dk-radius-klein);
  background: var(--dk-schwarz);
  color: var(--dk-weiss);
}
.dk-skip:focus { top: 16px; color: var(--dk-weiss); }

/* ==========================================================================
   Seiten: Startseite, Kundengewinnung, Mitarbeitergewinnung
   plus Rechtsseiten. Orientierung: Kundengewinnung = helle Flächen,
   Mitarbeitergewinnung = Dunkelblau. Linksbündige Raster, die
   42°-Diagonale des Logos als Motiv. Bewusst ein festes, helles Markenschema.
   ========================================================================== */
:root {
  --kopf-h: var(--dk-header);
  --leiste-h: 56px;
  --raster-linie: rgba(20, 87, 217, 0.06);
  --schatten-weich: 0 18px 40px -24px rgba(11, 31, 58, 0.35);
}

html { scroll-padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 12px); }
html.menue-offen { overflow: hidden; }
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--dk-weiss);
}
.seite { overflow-x: clip; }
[tabindex="-1"]:focus { outline: none; }
.dk-skip:hover { color: var(--dk-weiss); }

.dk-container {
  padding-left: max(var(--dk-rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dk-rand), env(safe-area-inset-right, 0px));
}

.ico {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keine automatische Silbentrennung: Auf dem iPhone zerhackt sie sonst Einleitungen und Titel.
   Lange Wörter in Überschriften bekommen gezielt weiche Trennstellen (­). */

/* ---------- Leistungsseiten: Platz für die Bereichsleiste ---------- */

body[data-seite="kundengewinnung"] [id],
body[data-seite="mitarbeitergewinnung"] [id] { scroll-margin-top: var(--leiste-h); }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--dk-weiss);
  border-bottom: 1px solid var(--dk-linie);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--kopf-h);
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--dk-schwarz);
  font: 700 1.125rem/1 var(--dk-font-titel);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.marke:hover { color: var(--dk-schwarz); }
.logo { width: 46.6px; height: 30px; flex: none; }

.hauptnav { display: none; }
.hauptnav ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.hauptnav a {
  display: block;
  padding-block: 8px;
  color: var(--dk-schwarz);
  font-size: var(--dk-t-klein);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hauptnav a:hover { color: var(--dk-blau); }
.hauptnav a[aria-current="page"] { color: var(--dk-blau); box-shadow: inset 0 -2px 0 var(--dk-blau); }

.kopf-aktionen { display: flex; align-items: center; gap: 12px; }
.kopf-cta { display: none; }
.menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--dk-linie);
  border-radius: var(--dk-radius-klein);
  background: var(--dk-weiss);
  color: var(--dk-schwarz);
  cursor: pointer;
}
@media (min-width: 640px) {
  .kopf-cta { display: inline-flex; min-height: 44px; padding: 10px 18px; }
}
@media (min-width: 1100px) {
  .hauptnav { display: block; }
  .menue-knopf { display: none; }
}

/* Mobilmenü */
.mobilmenue {
  position: fixed;
  z-index: 40;
  top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding-top: 8px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--dk-rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dk-rand), env(safe-area-inset-right, 0px));
  background: var(--dk-weiss);
}
.mobilmenue ul { margin: 0 0 28px; padding: 0; list-style: none; }
.mobilmenue li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--dk-linie);
  color: var(--dk-schwarz);
  font: 700 var(--dk-t-block)/1.2 var(--dk-font-titel);
  letter-spacing: -0.015em;
  text-decoration: none;
}
.mobilmenue li a small {
  display: block;
  margin-top: 4px;
  color: var(--dk-text-2);
  font: 400 var(--dk-t-klein)/1.4 var(--dk-font-text);
  letter-spacing: 0;
}
.mobilmenue li a .ico { color: var(--dk-blau); }
.mobilmenue li a[aria-current="page"] { color: var(--dk-blau); }
.mobilmenue .dk-btn { width: 100%; }
@media (min-width: 1100px) {
  .mobilmenue { display: none !important; }
}

/* ---------- Bereichsleiste: zeigt auf den Leistungsseiten, wo man ist ---------- */

.bereichsleiste {
  position: sticky;
  top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  z-index: 45;
  background: var(--dk-hellgrau);
  border-bottom: 1px solid var(--dk-linie);
}
.bereichsleiste-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--leiste-h);
}
.bereichsleiste-titel {
  margin: 0;
  color: var(--dk-text-2);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bereich-schalter {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--dk-linie);
  border-radius: 10px;
  background: var(--dk-weiss);
}
.bereich-schalter a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 7px;
  color: var(--dk-schwarz);
  font-size: var(--dk-t-klein);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.bereich-schalter a:hover { color: var(--dk-blau); }
.bereich-schalter a[aria-current="page"] { background: var(--dk-dunkelblau); color: var(--dk-weiss); }
.bereich-schalter .ico { display: none; width: 18px; height: 18px; }
.bereichsleiste .breit { display: none; }
@media (min-width: 640px) {
  .bereichsleiste .breit { display: inline; }
  .bereich-schalter .ico { display: block; }
}

/* ---------- Gemeinsame Abschnittsköpfe und Bausteine ---------- */

.abschnitt-kopf { max-width: 640px; }
.abschnitt-kopf h2 { margin-bottom: 16px; }
.abschnitt-kopf .dk-gross { margin: 0; }
.abschnitt-kopf--breit { max-width: 760px; margin-bottom: clamp(40px, 5vw, 56px); }

.check-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.check-liste li { display: flex; align-items: flex-start; gap: 12px; }
.check-liste .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--dk-blau); stroke-width: 2.25; }
.dk-dunkel .check-liste .ico { color: var(--dk-weiss); }

.liste-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dk-linie);
  border-radius: 10px;
  background: var(--dk-weiss);
  color: var(--dk-schwarz);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
.text-link .ico { width: 20px; height: 20px; }

.hinweis-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
  padding: 20px 22px;
  border-left: 3px solid var(--dk-blau);
  border-radius: 4px;
  background: var(--dk-weiss);
}
.hinweis-box > .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--dk-blau); }
.hinweis-box p { margin: 0; color: var(--dk-text-2); }
.hinweis-box strong { display: block; margin-bottom: 4px; color: var(--dk-schwarz); }

.bereich-abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 40px;
}

/* ---------- Hero (Startseite und Leistungsseiten) ---------- */

.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); }
.hero--grau { background: var(--dk-hellgrau); }
.hero-raster { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero-text { container-type: inline-size; min-width: 0; }
.hero h1 {
  margin-bottom: 24px;
  font-size: var(--dk-t-display);
  overflow-wrap: break-word;
}
@supports (font-size: 1cqi) {
  .hero h1 { font-size: clamp(1.75rem, 9.6cqi, 4rem); }
}
.hero .dk-gross { color: var(--ctx-text-2); max-width: 56ch; margin: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-hinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ctx-text-2);
  font-size: var(--dk-t-klein);
}
.hero-hinweis li { display: inline-flex; align-items: center; gap: 8px; }
.hero-hinweis .ico { width: 18px; height: 18px; color: var(--dk-blau); stroke-width: 2.25; }
.dk-dunkel .hero-hinweis .ico { color: var(--dk-weiss); }
@media (max-width: 479px) {
  .hero-ctas .dk-btn { width: 100%; }
}
@media (min-width: 1100px) {
  .hero-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* Schema „Weg zur Anfrage oder Bewerbung“ im Start-Hero */
.anfrageweg {
  position: relative;
  margin: 0;
  padding: clamp(20px, 4vw, 40px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background-color: var(--dk-hellgrau);
  background-image:
    linear-gradient(var(--raster-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-linie) 1px, transparent 1px);
  background-size: 28px 28px;
}
.anfrageweg-linien {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--dk-blau);
  stroke-width: 1.5;
  opacity: 0.35;
}
.anfrageweg-karte {
  max-width: 420px;
  padding: 24px 24px 6px;
  border: 1px solid var(--dk-linie);
  border-radius: var(--dk-radius);
  background: var(--dk-weiss);
  box-shadow: var(--schatten-weich);
}
.anfrageweg-karte .dk-ueberzeile { margin-bottom: 18px; }
.weg { position: relative; margin: 0; padding: 0; list-style: none; }
.weg::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 44px;
  left: 19px;
  width: 2px;
  background: var(--dk-blau);
  opacity: 0.25;
}
.weg li {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
}
.weg-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--dk-blau);
  border-radius: 50%;
  background: var(--dk-weiss);
  color: var(--dk-blau);
}
.weg-ico .ico { width: 20px; height: 20px; }
.weg strong { display: block; padding-top: 1px; }
.weg span.weg-text { display: block; color: var(--dk-text-2); font-size: var(--dk-t-klein); line-height: 1.45; }

.chip-stapel {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 8px;
  margin-top: -18px;
}
.anfrage-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--dk-radius);
  background: var(--dk-dunkelblau);
  color: var(--dk-weiss);
  box-shadow: var(--schatten-weich);
  font-size: var(--dk-t-klein);
  line-height: 1.4;
}
.anfrage-chip strong { display: block; font-weight: 600; }
.anfrage-chip .chip-text { display: block; color: var(--dk-weiss-2); }
.chip-punkt {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dk-blau);
  box-shadow: 0 0 0 4px rgba(20, 87, 217, 0.35);
}
.dk-dunkel .anfrage-chip { background: var(--dk-weiss); color: var(--dk-schwarz); }
.dk-dunkel .anfrage-chip .chip-text { color: var(--dk-text-2); }
.dk-dunkel .chip-punkt { box-shadow: 0 0 0 4px rgba(20, 87, 217, 0.2); }

/* Beispiel-Anzeige auf den Leistungsseiten */
.anzeige-beispiel {
  display: grid;
  justify-items: center;
  margin: 0;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--dk-linie);
  border-radius: 16px;
  background-image:
    linear-gradient(var(--raster-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-linie) 1px, transparent 1px);
  background-size: 28px 28px;
}
.dk-dunkel .anzeige-beispiel {
  border-color: var(--dk-linie-dunkel);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.anzeige {
  position: relative;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  border: 1px solid var(--dk-linie);
  border-radius: 14px;
  background: var(--dk-weiss);
  color: var(--dk-schwarz);
  box-shadow: var(--schatten-weich);
}
.beispiel-marke {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border: 1px solid var(--dk-linie);
  border-radius: 6px;
  background: var(--dk-weiss);
  color: var(--dk-text-2);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.anzeige-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.anzeige-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dk-dunkelblau);
  color: var(--dk-weiss);
}
.anzeige-avatar .ico { width: 18px; height: 18px; }
.anzeige-absender { display: grid; line-height: 1.3; }
.anzeige-absender strong { font-size: var(--dk-t-klein); }
.anzeige-absender span { color: var(--dk-text-2); font-size: var(--dk-t-mini); }
.anzeige-text { margin: 0; padding: 0 16px 12px; font-size: var(--dk-t-klein); line-height: 1.45; }
.anzeige-bild {
  display: block;
  width: 100%;
  height: auto;
  background: var(--dk-dunkelblau);
  color: rgba(255, 255, 255, 0.42);
}
.anzeige-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--dk-hellgrau);
}
.anzeige-ziel { display: grid; min-width: 0; line-height: 1.3; }
.anzeige-ziel small { color: var(--dk-text-2); font-size: var(--dk-t-mini); }
.anzeige-ziel strong { font-size: var(--dk-t-klein); }
.anzeige-knopf {
  flex: none;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--dk-linie);
  color: var(--dk-schwarz);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  white-space: nowrap;
}
.anzeige-beispiel .chip-stapel { width: 100%; max-width: 380px; margin-top: -16px; padding-right: 12px; }

/* ---------- Leistungsbereiche (Startseite) ---------- */

.bereiche { display: grid; gap: 20px; }
.bereiche > * { min-width: 0; }
.bereich-karte {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--dk-linie);
  border-radius: 16px;
  background: var(--dk-weiss);
}
.bereich-karte.dk-dunkel { border-color: var(--dk-dunkelblau); background: var(--dk-dunkelblau); }
.bereich-kopf { display: flex; align-items: center; gap: 14px; }
.bereich-kopf .dk-ueberzeile { margin: 0; }
.bereich-kopf .dk-ueberzeile::before { display: none; }
.bereich-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--dk-blau-flaeche);
  color: var(--dk-blau);
}
.dk-dunkel .bereich-ico { background: rgba(255, 255, 255, 0.08); color: var(--dk-weiss); }
.bereich-karte h3 { margin: 0; }
.bereich-karte > p { margin: 0; }
.bereich-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: auto;
  padding-top: 8px;
}
.bereiche-hinweis { display: flex; align-items: flex-start; gap: 10px; max-width: 70ch; margin: 24px 0 0; }
.bereiche-hinweis .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--dk-blau); }
@media (min-width: 960px) {
  .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ausgangslage und Ansatz ---------- */

.problem-raster { display: grid; gap: clamp(32px, 5vw, 64px); }
.problem-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.problem-liste li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  padding-block: 24px;
  border-top: 1px solid var(--dk-linie);
}
.problem-liste li:last-child { border-bottom: 1px solid var(--dk-linie); }
.problem-liste h3 { margin-bottom: 6px; }
.problem-liste p { margin: 0; color: var(--dk-text-2); }
@media (min-width: 960px) {
  .problem-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .problem-raster .abschnitt-kopf { position: sticky; top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 32px); }
}

.loesung {
  display: grid;
  gap: 28px;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: 16px;
  background: var(--dk-hellgrau);
}
.loesung h3 { margin-bottom: 12px; }
.loesung p { color: var(--dk-text-2); }
@media (min-width: 960px) {
  .loesung { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 56px; }
}

/* ---------- Zielgruppen ---------- */

.fuer-wen-raster { display: grid; gap: clamp(32px, 5vw, 64px); }
.gewerke { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gewerke li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px;
  border-radius: var(--dk-radius);
  background: var(--dk-weiss);
}
.gewerke .ico { width: 28px; height: 28px; margin-top: 1px; color: var(--dk-blau); }
.gewerke h3 { margin: 0 0 6px; }
.gewerke p { margin: 0; color: var(--dk-text-2); font-size: var(--dk-t-klein); line-height: 1.5; }
.gewerke p strong { color: var(--dk-schwarz); }
.gewerke-fuss { margin: 20px 0 0; color: var(--dk-text-2); }

.foto-platzhalter {
  position: relative;
  display: grid;
  max-width: 100%;
  aspect-ratio: 16 / 11;
  margin: 32px 0 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--dk-dunkelblau);
  color: rgba(255, 255, 255, 0.34);
}
.bauzeichnung { width: 100%; height: 100%; }
@media (min-width: 520px) {
  .gewerke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .fuer-wen-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .foto-platzhalter { aspect-ratio: 4 / 4.2; }
}

/* ---------- Ablauf ---------- */

.ansatz { position: relative; overflow: hidden; }
.ansatz-linien {
  position: absolute;
  top: -40px;
  right: -80px;
  width: min(620px, 90vw);
  height: auto;
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
  mask-image: linear-gradient(to left, #000 30%, transparent);
}
.ansatz .dk-container { position: relative; }
.schritte { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.schritte li { padding-top: 24px; border-top: 1px solid var(--dk-linie-dunkel); }
.schritt-nr {
  display: block;
  font: 800 clamp(2.5rem, 2.1rem + 1.6vw, 3rem)/1 var(--dk-font-titel);
  letter-spacing: -0.03em;
  color: var(--dk-weiss);
}
.schritte .dk-linie { margin: 20px 0 20px; }
.schritte h3 { margin-bottom: 8px; }
.schritte p { margin: 0; color: var(--dk-weiss-2); }
.transparenz {
  display: grid;
  gap: 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--dk-linie-dunkel);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.transparenz h3 { margin-bottom: 8px; }
.transparenz p { margin: 0; color: var(--dk-weiss-2); }
@media (min-width: 640px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (min-width: 1024px) {
  .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .transparenz { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}

/* ---------- Leistungsseiten: Weg, Bausteine, Kanäle, Kennzahlen ---------- */

.kette { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kette li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--dk-linie);
  border-radius: var(--dk-radius);
  background: var(--dk-weiss);
}
.kette li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 41px;
  bottom: -13px;
  width: 2px;
  height: 12px;
  background: var(--dk-blau);
}
.kette-nr {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dk-blau);
  color: var(--dk-weiss);
  font: 800 1.0625rem/1 var(--dk-font-titel);
}
.kette h3 { margin: 2px 0 4px; }
.kette p { margin: 0; color: var(--dk-text-2); font-size: var(--dk-t-klein); line-height: 1.5; }
.kette li.kette-du { border-style: dashed; border-color: var(--dk-feldrahmen); background: var(--dk-hellgrau); }
.kette li.kette-du .kette-nr { background: var(--dk-dunkelblau); }
.kette-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--dk-text-2);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kette-hinweis { display: flex; align-items: flex-start; gap: 10px; max-width: 70ch; margin: 24px 0 0; }
.kette-hinweis .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--dk-blau); }
@media (min-width: 1024px) {
  .kette { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kette li { grid-template-columns: 1fr; }
  .kette li:not(:last-child)::after { top: 41px; right: -17px; bottom: auto; left: auto; width: 18px; height: 2px; }
}

.bausteine { display: grid; gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.bausteine li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding-block: 22px;
  border-top: 1px solid var(--dk-linie);
}
.bausteine h3 { margin: 2px 0 4px; }
.bausteine p { margin: 0; color: var(--dk-text-2); font-size: var(--dk-t-klein); line-height: 1.5; }
@media (min-width: 720px) {
  .bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .bausteine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kanaele { display: grid; gap: 20px; }
.kanal { display: grid; align-content: start; gap: 14px; }
.kanal-kopf { display: flex; align-items: center; gap: 14px; }
.kanal-kopf h3 { margin: 0; }
.dk-karte .kanal-fazit { padding-top: 14px; border-top: 1px solid var(--dk-linie); font-size: var(--dk-t-klein); }
.kanal-fazit strong { color: var(--dk-schwarz); }
@media (min-width: 768px) {
  .kanaele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kennzahlen { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.kennzahl {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--dk-linie);
  border-radius: var(--dk-radius);
  background: var(--dk-weiss);
}
.kennzahl h3 { margin: 6px 0 0; }
.kennzahl p { margin: 0; color: var(--dk-text-2); font-size: var(--dk-t-klein); line-height: 1.5; }
@media (min-width: 560px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zwei-spalten { display: grid; gap: 20px; }
.zwei-spalten .dk-karte { display: grid; align-content: start; gap: 18px; }
.zwei-spalten h3 { margin: 0; }
@media (min-width: 860px) {
  .zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Über uns ---------- */

.ueber-raster { display: grid; gap: clamp(40px, 6vw, 72px); }
.ueber-raster .dk-gross { margin-bottom: 20px; }
.personen {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--dk-linie);
}
.personen-titel {
  margin: 0;
  color: var(--dk-text-2);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.personen-liste { display: grid; gap: 16px; }
.person { display: flex; align-items: center; gap: 16px; }
.person-initialen {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--dk-dunkelblau);
  color: var(--dk-weiss);
  font: 700 1.25rem/1 var(--dk-font-titel);
  letter-spacing: 0.02em;
}
.person-daten { display: grid; gap: 8px; min-width: 0; }
.person-daten p { margin: 0; }
.person-name { font: 700 var(--dk-t-element)/1.25 var(--dk-font-titel); letter-spacing: -0.01em; }
.person-ort { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--dk-text-2); font-size: var(--dk-t-klein); }
.person-ort .ico { width: 18px; height: 18px; }
@media (min-width: 520px) {
  .personen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.arbeitsweise { padding: clamp(24px, 4vw, 40px); border-radius: 16px; background: var(--dk-hellgrau); }
.arbeitsweise h3 { margin-bottom: 24px; }
.prinzipien { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.prinzipien li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.prinzipien .ico { width: 22px; height: 22px; margin-top: 2px; color: var(--dk-blau); stroke-width: 2.25; }
.prinzipien strong { display: block; margin-bottom: 2px; }
.prinzipien span { color: var(--dk-text-2); font-size: var(--dk-t-klein); line-height: 1.5; }
@media (min-width: 960px) {
  .ueber-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- FAQ ---------- */

.faq-raster { display: grid; gap: clamp(32px, 5vw, 64px); }
.faq-liste {
  border: 1px solid var(--dk-linie);
  border-radius: var(--dk-radius);
  background: var(--dk-weiss);
}
.faq-liste details + details { border-top: 1px solid var(--dk-linie); }
.faq-liste summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-radius: var(--dk-radius);
  font: 600 var(--dk-t-text)/1.4 var(--dk-font-text);
  list-style: none;
  cursor: pointer;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--dk-blau), var(--dk-blau)) center / 16px 2px no-repeat,
    linear-gradient(var(--dk-blau), var(--dk-blau)) center / 2px 16px no-repeat;
}
.faq-liste details[open] summary::after { background-size: 16px 2px, 0 0; }
.faq-liste summary:hover { color: var(--dk-blau); }
.faq-liste summary:focus-visible { outline-offset: -3px; }
.faq-antwort { padding: 0 24px 22px; color: var(--dk-text-2); }
.faq-antwort p { margin: 0; }
.faq-antwort p + p { margin-top: 12px; }
@media (min-width: 960px) {
  .faq-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}

/* ---------- Kontakt ---------- */

.kontakt-raster { display: grid; gap: clamp(40px, 6vw, 72px); }
.kontakt-text { min-width: 0; }
.kontakt-punkte { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.kontakt-punkte li { display: flex; align-items: flex-start; gap: 12px; }
.haken {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dk-blau);
  color: var(--dk-weiss);
}
.haken .ico { width: 14px; height: 14px; stroke-width: 2.75; }
.telefon-block {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--dk-linie-dunkel);
}
.telefon-label {
  margin: 0;
  color: var(--dk-weiss-2);
  font-size: var(--dk-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.anruf-nummer {
  margin: 0;
  color: var(--ctx-text);
  font: 800 clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem)/1.1 var(--dk-font-titel);
  letter-spacing: -0.01em;
  user-select: all;
}
.anruf-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.anruf-aktionen .dk-btn { flex: 1 1 180px; }
.kopier-status { margin: 0; }
.kopier-status:empty { display: none; }

.formular { display: grid; gap: 20px; padding: clamp(24px, 4vw, 40px); border-radius: 16px; }
.formular h3 { margin: 0; }
.formular-intro { margin: -12px 0 0; color: var(--dk-text-2); }
.anliegen { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.anliegen legend { margin-bottom: 10px; padding: 0; font-size: var(--dk-t-klein); font-weight: 600; }
.anliegen-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.option { position: relative; display: inline-flex; }
.option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.option span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1.5px solid var(--dk-feldrahmen);
  border-radius: var(--dk-radius-klein);
  background: var(--dk-weiss);
  color: var(--dk-schwarz);
  font-size: var(--dk-t-klein);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dk-uebergang), background-color var(--dk-uebergang);
}
.option span::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--dk-feldrahmen);
  border-radius: 50%;
  background: var(--dk-weiss);
}
.option input:checked + span { border-color: var(--dk-blau); background: var(--dk-blau-flaeche); }
.option input:checked + span::before { border-color: var(--dk-blau); background: var(--dk-blau); box-shadow: inset 0 0 0 3px var(--dk-weiss); }
.option input:focus-visible + span { outline: 3px solid var(--dk-blau); outline-offset: 2px; }
.anliegen.ist-fehlerhaft .option span { border: 2px solid var(--dk-schwarz); }
.felder { display: grid; gap: 18px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis { margin: 0; color: var(--dk-text-2); }
.formular-senden { width: 100%; }
.formular-vorschau { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--dk-text-2); }
.formular-vorschau .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--dk-blau); }
@media (min-width: 560px) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld-breit { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .kontakt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */

.rechtsseite { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 104px); }
.dk-container.rechts-innen { max-width: calc(760px + 2 * var(--dk-rand)); }
.rechtsseite h1 { margin-bottom: 24px; font-size: var(--dk-t-abschnitt); }
.rechtsseite h2 { margin: 36px 0 10px; font-size: var(--dk-t-element); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.rechtsseite p { margin: 0 0 8px; }
.rechtsseite ul { margin: 0 0 12px; padding-left: 1.25em; }
.rechtsseite li { margin-bottom: 4px; }
.rechts-einleitung { color: var(--dk-text-2); font-size: var(--dk-t-lead); line-height: 1.55; }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-weight: 600;
  text-decoration: none;
}
.zurueck .ico { width: 20px; height: 20px; }

/* ---------- Fußzeile ---------- */

.fuss { padding-block: clamp(48px, 6vw, 72px) 32px; }
.fuss-raster { display: grid; gap: 36px; }
.fuss .marke,
.fuss .marke:hover { color: var(--dk-weiss); text-decoration: none; }
.fuss-marke p { max-width: 40ch; margin: 16px 0 0; color: var(--dk-weiss-2); font-size: var(--dk-t-klein); }
.fuss-titel {
  margin: 0 0 14px;
  color: var(--dk-weiss-2);
  font: 600 var(--dk-t-mini)/1.2 var(--dk-font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fuss ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--dk-t-klein); }
.fuss a { color: var(--dk-weiss); text-decoration: none; }
.fuss a:hover { color: var(--dk-weiss); text-decoration: underline; }
.fuss-kontakt span.label { display: block; color: var(--dk-weiss-2); font-size: var(--dk-t-mini); }
.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--dk-linie-dunkel);
  color: var(--dk-weiss-2);
  font-size: var(--dk-t-mini);
}
.fuss-unten p { margin: 0; }
@media (min-width: 720px) {
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fuss-raster { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

/* ---------- Überschriften in Inter Display ----------
   Inter Display läuft enger als Archivo, deshalb die Laufweite der großen
   Überschriften leicht öffnen. Mit Archivo diesen Block wieder entfernen. */

h1 { letter-spacing: -0.012em; }
h2 { letter-spacing: -0.008em; }

/* ---------- Live-Website: Hinweisseiten (Danke, Fehler 404) ---------- */

.hinweisseite { min-height: 55vh; }
.hinweisseite .dk-ueberzeile { margin-bottom: 12px; }
.hinweis-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* E-Mail-Adresse nie umbrechen; die Kontaktspalte im Footer bekommt dafür mehr Platz */
.mail { white-space: nowrap; }
@media (min-width: 1024px) {
  .fuss-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.9fr); }
}