/*
 * P&B Gebäudereinigung – Gestaltung nach dem Styleguide „P&B Gebäudereinigung“
 * (Stand 06.11.2026): fein, gepflegt, hochwertig. Creme/Beige als Grund,
 * Anthrazit für Schrift, Gold nur als Akzent (Faustregel 70 / 20 / 10).
 *
 * Aufbau „Handy zuerst“: Die Grundregeln gelten für schmale Handys (ab 320 px).
 * Darunter folgen Erweiterungen für größere Bildschirme:
 *   ab 600 px  großes Handy quer / kleines Tablet
 *   ab 960 px  Tablet quer / Computer
 * Alle Größen in rem, damit die Seite mit der Schriftgröße des Geräts mitwächst
 * (Barrierefreiheit: Text bis 200 % vergrößerbar, WCAG 1.4.4).
 */

/* ---------- Schriften: liegen auf dieser Website, kein Google-Server (DSGVO) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schriften/inter-latin-400-normal.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: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../schriften/inter-latin-500-normal.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: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../schriften/poppins-latin-300-normal.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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schriften/poppins-latin-400-normal.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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../schriften/poppins-latin-500-normal.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;
}

/* ---------- Farben und Maße aus dem Styleguide (tokens.json) ---------- */
:root {
  --creme: #F7F3EC;            /* Seitenhintergrund */
  --surface-raised: #FFFFFF;   /* Karten, Formular */
  --beige: #E6DCCB;            /* warme Flächen: Symbolkreise, Hinweisboxen */
  --beige-soft: #F0E9DD;       /* Abschnittshintergrund */
  --anthrazit: #2F2D2A;        /* Schrift, Überschriften (12,4:1 auf creme) */
  --warmgrau: #6B645B;         /* Nebentext (5,3:1 auf creme) – nicht auf beige! */
  --goldsand: #B89B6E;         /* Akzent: Linien, Funkeln – nie für kleine Schrift auf hell */
  --goldsand-strong: #86683D;  /* Gold für Links und kleine Akzentschrift (4,7:1) */
  --line: #E2D9CA;             /* Trennlinien, Kartenrahmen (nur Zierde) */
  --feldrand: #6B645B;         /* Rahmen von Eingabefeldern: braucht 3:1 (WCAG 1.4.11) */
  --dunkel: #2F2D2A;           /* dunkle Markenfläche, in beiden Modi gleich */
  --auf-dunkel: #F7F3EC;       /* Schrift auf „dunkel“ (immer hell) */
  --auf-dunkel-neben: #C9C1B5; /* Nebentext auf „dunkel“ (7,7:1) */
  --auf-dunkel-linie: #57524B;
  --on-anthrazit: #F7F3EC;     /* Schrift auf anthrazit-Knöpfen */
  --knopf-hover: #86683D;
  --auf-knopf-hover: #FFFFFF;
  --danger: #A8473A;           /* nur Fehlermeldungen */
  --platzhalter: #E6DCCB;

  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* 4-px-Raster */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-round: 999px;
  --shadow-sm: 0 1px 2px rgba(47, 45, 42, 0.06), 0 6px 16px rgba(47, 45, 42, 0.06);

  --rand: var(--space-4);       /* Seitenrand: Handy 16 px */
  --abschnitt: var(--space-12); /* Abstand zwischen Abschnitten: Handy 48 px */
  --kopf-hoehe: 4.5rem;
  color-scheme: light;
}

/* Dunkler Modus des Geräts: Werte aus dem Styleguide (Thema „Dunkel“) */
@media (prefers-color-scheme: dark) {
  :root {
    --creme: #1A1918;
    --surface-raised: #24221F;
    --beige: #2E2B27;
    --beige-soft: #211F1C;
    --anthrazit: #F2EDE4;
    --warmgrau: #ABA398;
    --goldsand: #C9AE82;
    --goldsand-strong: #D6BF96;
    --line: #3A3631;
    --feldrand: #8C857B;
    --on-anthrazit: #1A1918;
    --knopf-hover: #D6BF96;
    --auf-knopf-hover: #1A1918;
    --danger: #E08B7C;
    --platzhalter: #4A453E;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

@media (min-width: 960px) {
  :root {
    --rand: var(--space-16);      /* Seitenrand Computer: 64 px */
    --abschnitt: var(--space-16); /* Abschnittsabstand Computer: 64 px */
    --kopf-hoehe: 5rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sprungziele und Tastaturfokus nie unter dem festen Kopf verstecken (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--anthrazit);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.625;          /* body 16/26 */
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Lange deutsche Wörter („Treppenhausreinigung“) auf schmalen Handys
     trennen statt über den Rand laufen zu lassen – aber nur lange Wörter. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--anthrazit);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.55rem + 2.2vw, 3rem); line-height: 1.17; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem); line-height: 1.3; }
/* h3 ohne „balance“: sonst stünde z. B. „Grund-“ allein in der ersten Zeile */
h3 { font-size: 1.125rem; line-height: 1.45; text-wrap: pretty; }
@media (min-width: 960px) { h3 { font-size: 1.25rem; line-height: 1.4; } }

p { margin: 0; }

a { color: var(--goldsand-strong); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--anthrazit); }

/* Sichtbarer Tastaturfokus überall (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--goldsand-strong);
  outline-offset: 3px;
  border-radius: 2px;
}
main:focus { outline: none; }

::selection { background: var(--beige); color: var(--anthrazit); }

/* Nur für Bildschirmleser sichtbar */
.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* „Zum Inhalt springen“ – erscheint beim ersten Tab (WCAG 2.4.1) */
.sprunglink {
  position: absolute;
  left: var(--space-4);
  top: -6rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--anthrazit);
  color: var(--on-anthrazit);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  text-decoration: none;
}
.sprunglink:focus { top: var(--space-2); color: var(--on-anthrazit); }

.rahmen {
  width: 100%;
  max-width: calc(70rem + 2 * var(--rand));   /* Inhaltsbreite max. 1120 px */
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Fehlender Wert aus inc/firma.php – fällt vor dem Online-Stellen sofort auf */
.platzhalter {
  background: var(--platzhalter);
  color: var(--anthrazit);
  border-radius: var(--radius-sm);
  padding: 0 0.3em;
  font-style: normal;
}

/* ---------- Bausteine ---------- */

/* Abschnitts-Kennzeichnung: Poppins in Großbuchstaben, weit gesperrt, mit Goldlinie */
.label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--warmgrau);
}
.label::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--goldsand);
}

.einleitung { font-size: 1.0625rem; line-height: 1.6; color: var(--warmgrau); max-width: 38rem; }
@media (min-width: 960px) { .einleitung { font-size: 1.125rem; line-height: 1.55; } }

/* Knöpfe: mindestens 48 px hoch – bequem mit dem Daumen zu treffen */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.knopf-voll { background: var(--anthrazit); color: var(--on-anthrazit); }
.knopf-voll:hover { background: var(--knopf-hover); color: var(--auf-knopf-hover); }
.knopf-rand { border-color: var(--anthrazit); color: var(--anthrazit); background: transparent; }
.knopf-rand:hover { border-color: var(--goldsand-strong); color: var(--goldsand-strong); }
.knopf[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.knopf-symbol { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } }

.karte {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Linien-Symbole: 1,5 px, gerade Enden, Gold nur im Funkeln */
.symbol {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--anthrazit);
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.symbol .gold { fill: var(--goldsand); stroke: none; }

.symbol-kreis {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-round);
  background: var(--beige);
}

/* ---------- Kopf mit Logo und Menü ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
  border-bottom: 1px solid var(--line);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--kopf-hoehe);
}
.kopf-logo { display: block; flex: none; border-radius: var(--radius-sm); }
/* Mindestgröße laut Styleguide: Querformat 160 px breit */
.kopf-logo img { width: 10rem; }

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--anthrazit);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.menue-symbol { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menue-auf { display: none; }
.menue-knopf[aria-expanded="true"] .menue-zu { display: none; }
.menue-knopf[aria-expanded="true"] .menue-auf { display: inline; }
/* Ganz schmale Handys: nur das Symbol, der Name bleibt für Bildschirmleser */
@media (max-width: 359px) {
  .menue-knopf { padding: 0 var(--space-3); }
  .menue-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Aufgeklapptes Menü auf dem Handy: volle Breite unter dem Kopf */
.hauptmenue {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--kopf-hoehe));
  max-height: calc(100dvh - var(--kopf-hoehe));
  overflow-y: auto;
  background: var(--creme);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(47, 45, 42, 0.08);
}
.hauptmenue.offen { display: block; }
.hauptmenue ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--rand) var(--space-6);
}
.hauptmenue a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--anthrazit);
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-decoration: none;
}
.hauptmenue a:hover { color: var(--goldsand-strong); }
.hauptmenue .menue-aktion a {
  justify-content: center;
  margin-top: var(--space-6);
  border-bottom: 0;
  color: var(--on-anthrazit);
}
.hauptmenue .menue-aktion a:hover { color: var(--auf-knopf-hover); }

@media (min-width: 960px) {
  .kopf-logo img { width: 11rem; }
  .menue-knopf { display: none; }
  .hauptmenue,
  .hauptmenue.offen {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .hauptmenue ul { display: flex; align-items: center; gap: var(--space-6); padding: 0; }
  .hauptmenue a { min-height: 3rem; border: 0; font-size: 0.9375rem; }
  .hauptmenue .menue-aktion { margin-left: var(--space-2); }
  .hauptmenue .menue-aktion a { margin: 0; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
}

/* ---------- Einstieg (oben auf der Startseite) ---------- */
/* Auf dem Handy: zuerst Schrift und Knöpfe (der wichtigste Knopf ist ohne
   Scrollen sichtbar), dann das Foto, dann die drei Stichpunkte. Dafür gibt
   .held-text seine Kinder an das Raster weiter (display: contents) und die
   Reihenfolge wird über „order“ gesetzt. Ab 720 px steht das Foto rechts. */
.held { padding-block: var(--space-12) var(--space-12); }

.held-raster { position: relative; display: grid; gap: var(--space-6); }
.held-text { display: contents; }
.held-text > * { order: 0; }
.held-text h1 { max-width: 15ch; }
.held-bild { order: 1; position: relative; margin: var(--space-2) var(--space-3) var(--space-4) 0; }
.held-text .fakten { order: 2; }

/* Fotos allgemein: füllen ihren Rahmen, Ausschnitt mittig */
.foto { display: block; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-color-scheme: dark) {
  .foto img { filter: brightness(0.88); }   /* helle Fotos blenden im dunklen Modus nicht */
}

.held-foto {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* feiner Goldrahmen, leicht versetzt hinter dem Foto */
.held-bild::before {
  content: "";
  position: absolute;
  inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  border: 1px solid var(--goldsand);
  border-radius: var(--radius-lg);
}
/* Zeichen im beigen Kreis, überlappt die Fotoecke */
.held-zeichen {
  position: absolute;
  z-index: 2;
  left: var(--space-4);
  bottom: -1.5rem;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-round);
  background: var(--beige);
  box-shadow: 0 0 0 5px var(--creme);
}
.held-zeichen picture, .held-zeichen img { display: block; width: 2.6rem; }

.aktionen { display: grid; gap: var(--space-3); margin-top: var(--space-2); }

.fakten {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--warmgrau);
}
.fakten li { display: flex; gap: var(--space-3); align-items: baseline; }
.fakten li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-round);
  background: var(--goldsand);
  transform: translateY(-0.15em);
}

@media (min-width: 600px) {
  .aktionen { display: flex; flex-wrap: wrap; }
}

@media (min-width: 720px) {
  .held-raster {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-12);
    align-items: center;
  }
  .held-text { display: grid; gap: var(--space-6); max-width: 40rem; align-content: center; }
  .held-text > *, .held-text .fakten { order: 0; }
  .held-bild { order: 0; margin: 0 var(--space-3) var(--space-3) 0; }
  .held-foto { aspect-ratio: 4 / 5; }
  .held-zeichen { width: 5rem; height: 5rem; left: -1.5rem; bottom: 2rem; }
  .held-zeichen picture, .held-zeichen img { width: 3.2rem; }
}

@media (min-width: 960px) {
  .held { padding-block: var(--space-16) var(--space-16); }
  .held-raster { gap: var(--space-16); }
  .fakten { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abschnitt); }
/* Raster-Spalten dürfen schmaler werden als ihr breitester Inhalt – sonst
   schiebt z. B. ein langer Auswahltext die ganze Seite nach rechts. */
.held-raster > *, .ueber-raster > *, .kontakt-raster > *, .zielgruppen > *, .fuss-raster > * { min-width: 0; }
.leistungen, .zielgruppen, .werte, .personen, .schritte, .kontaktwege, .ueber-raster, .kontakt-raster, .fuss-raster {
  grid-template-columns: minmax(0, 1fr);
}
.abschnitt-warm { background: var(--beige-soft); }

.abschnitt-kopf {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  max-width: 42rem;
}

/* Leistungen: auf dem Handy untereinander, Symbol links neben dem Text */
.leistungen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.leistung { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); }
.leistung > div { min-width: 0; }
.leistung p { margin-top: var(--space-1); font-size: 0.9375rem; line-height: 1.55; color: var(--warmgrau); }

@media (min-width: 600px) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .leistung { flex-direction: column; padding: var(--space-6); }
  .leistung p { margin-top: var(--space-2); }
}
@media (min-width: 960px) {
  .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Für wen */
.zielgruppen { display: grid; gap: var(--space-4); }
/* Karte mit Foto oben bis an den Rand; die Ecken rundet die Karte (overflow) */
.zielgruppe { padding: 0; overflow: hidden; }
.karte-foto { aspect-ratio: 16 / 9; }
.zielgruppe-inhalt { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); }
.zielgruppe-inhalt > p { color: var(--warmgrau); }
@media (min-width: 960px) {
  .zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .zielgruppe-inhalt { padding: var(--space-8); }
}

/* Bildreihe unter den Leistungen: Handy = ein großes, zwei kleine Fotos */
.bildreihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.bildreihe .foto { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; }
.bildreihe .foto:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
@media (min-width: 720px) {
  .bildreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .bildreihe .foto,
  .bildreihe .foto:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
}

.haken-liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
}
.haken-liste li { display: flex; gap: var(--space-3); align-items: baseline; line-height: 1.5; }
/* feines Häkchen aus zwei Linien in Gold-stark (3:1 als Symbol erreicht) */
.haken-liste li::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 1.5px solid var(--goldsand-strong);
  border-bottom: 1.5px solid var(--goldsand-strong);
  transform: translateY(-0.2em) rotate(-45deg);
}

/* Anspruch: dunkles Markenband */
.abschnitt-dunkel { background: var(--dunkel); color: var(--auf-dunkel); }
.abschnitt-dunkel h2,
.abschnitt-dunkel h3 { color: var(--auf-dunkel); }
.abschnitt-dunkel .label { color: var(--auf-dunkel-neben); }
.abschnitt-dunkel :focus-visible { outline-color: var(--auf-dunkel); }

.werte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}
.wert {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-content: start;   /* alle Überschriften auf einer Höhe, auch bei ungleich langem Text */
  padding-top: var(--space-6);
  border-top: 1px solid var(--goldsand);
}
.wert-funkeln { grid-row: span 2; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; fill: var(--goldsand); }
.wert p { color: var(--auf-dunkel-neben); font-size: 0.9375rem; line-height: 1.6; }
@media (min-width: 600px) {
  .werte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .wert { grid-template-columns: 1fr; }
  .wert-funkeln { grid-row: auto; margin: 0 0 var(--space-2); }
}

/* Über uns */
.ueber-raster { display: grid; gap: var(--space-8); }
.ueber-text { display: grid; gap: var(--space-4); align-content: start; }
.ueber-seite { display: grid; gap: var(--space-4); }

.personen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.person {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.person p { color: var(--warmgrau); font-size: 0.9375rem; }
/* Monogramm im Kreis – greift den Kreis im Logo auf; feiner Goldring außen */
.monogramm {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0.375rem;
  border-radius: var(--radius-round);
  background: var(--beige);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  color: var(--anthrazit);
}
.monogramm::after {
  content: "";
  position: absolute;
  inset: -0.375rem;
  border: 1px solid var(--goldsand);
  border-radius: var(--radius-round);
}

/* Hinweisbox in Beige: Text darauf immer anthrazit (Kontrast) */
.zeichen-box {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--beige);
}
.zeichen-box picture, .zeichen-box img { display: block; width: 3.5rem; }
.zeichen-box p { margin-top: var(--space-1); font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 600px) {
  .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person { flex-direction: column; text-align: center; padding: var(--space-6); }
}
@media (min-width: 960px) {
  .ueber-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: start; }
  .zeichen-box { padding: var(--space-6); }
}

/* Ablauf: auf dem Handy eine senkrechte Linie, die die Schritte verbindet */
.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}
.schritt {
  position: relative;
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
}
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--goldsand-strong);
}
.schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.5rem;
  bottom: calc(var(--space-6) * -1 + 0.5rem);
  width: 1px;
  background: var(--goldsand);
}
.schritt p { color: var(--warmgrau); font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 600px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  .schritt { grid-template-columns: 1fr; padding-top: var(--space-4); border-top: 1px solid var(--goldsand); }
  .schritt::before { grid-row: auto; font-size: 2.5rem; margin-bottom: var(--space-2); }
  .schritt:not(:last-child)::after { display: none; }
}
@media (min-width: 960px) {
  .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; gap: var(--space-8); }
.kontakt-text .abschnitt-kopf { margin-bottom: var(--space-6); }

.kontaktwege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kontaktweg {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--anthrazit);
  text-decoration: none;
}
a.kontaktweg { border-color: var(--feldrand); }
a.kontaktweg:hover { border-color: var(--goldsand-strong); color: var(--anthrazit); }
.kontaktweg .symbol { flex: none; }
.kontaktweg-art { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--warmgrau); }
.kontaktweg-wert { display: block; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }

@media (min-width: 960px) {
  .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
}

/* Formular */
.formular {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) { .formular { padding: var(--space-8); } }

.pflicht-hinweis { font-size: 0.875rem; color: var(--warmgrau); }
.pflicht { color: var(--danger); }

.feld { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.feld label { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.feld-paar { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .feld-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }

/* Eingabefelder: 16 px Schrift, sonst zoomt das iPhone beim Antippen hinein */
.formular input,
.formular select,
.formular textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-sm);
  background: var(--creme);
  color: var(--anthrazit);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.formular textarea { min-height: 8rem; resize: vertical; }
.formular input::placeholder,
.formular textarea::placeholder { color: var(--warmgrau); opacity: 1; }
.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible { outline: 2px solid var(--goldsand-strong); outline-offset: 1px; border-color: var(--goldsand-strong); }
.formular [aria-invalid="true"] { border: 2px solid var(--danger); }

/* Auswahlfeld mit eigenem, feinem Pfeil */
.auswahl { position: relative; }
.auswahl select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.auswahl::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--anthrazit);
  border-bottom: 1.5px solid var(--anthrazit);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.feld-fehler {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--danger);
  font-size: 0.875rem;
  line-height: 1.45;
}
.feld-fehler svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

.fehlerliste {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--creme);
}
.fehlerliste-titel { font-size: 1.0625rem; line-height: 1.4; }
.fehlerliste ul { margin: 0; padding-left: 1.2rem; }
.fehlerliste li { margin-top: var(--space-1); }
.fehlerliste a { color: var(--anthrazit); }
.fehlerliste:focus-visible { outline-offset: 2px; }

/* Falle für Programme: für Menschen unsichtbar und nicht erreichbar */
.feld-falle {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-datenschutz { font-size: 0.875rem; line-height: 1.5; color: var(--warmgrau); }
.formular-aktion .knopf { width: 100%; }
@media (min-width: 600px) { .formular-aktion .knopf { width: auto; min-width: 14rem; } }

/* ---------- Fußzeile ---------- */
.fuss {
  background: var(--dunkel);
  color: var(--auf-dunkel-neben);
  padding-block: var(--space-12) var(--space-8);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.fuss a { color: var(--auf-dunkel); }
.fuss a:hover { color: var(--goldsand); }
.fuss :focus-visible { outline-color: var(--auf-dunkel); }
.fuss-raster { display: grid; gap: var(--space-8); }
.fuss-logo { width: 10rem; }
.fuss-slogan {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--goldsand);
}
.fuss-titel {
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--auf-dunkel-neben);
}
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.fuss-liste a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss-liste li:not(:has(a)) { padding-block: 0.6rem; }
.fuss .platzhalter { background: var(--auf-dunkel-linie); color: var(--auf-dunkel); }
.fuss-unten {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--auf-dunkel-linie);
  font-size: 0.875rem;
}
@media (min-width: 600px) {
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .fuss { padding-block: var(--space-16) var(--space-8); }
  .fuss-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .fuss-marke { grid-column: auto; }
}

/* ---------- Textseiten: Impressum, Datenschutz, Barrierefreiheit, Bestätigung ---------- */
.textseite { padding-block: var(--space-12) var(--space-16); }
.textseite .rahmen > * { max-width: 46rem; }
.textseite h1 { font-size: clamp(1.875rem, 1.6rem + 1.3vw, 2.5rem); margin: var(--space-3) 0 var(--space-6); }
.textseite h2 { font-size: 1.375rem; margin: var(--space-12) 0 var(--space-3); }
.textseite h3 { font-size: 1.0625rem; margin: var(--space-6) 0 var(--space-2); }
.textseite p,
.textseite ul,
.textseite address { margin: 0 0 var(--space-4); }
.textseite ul { padding-left: 1.25rem; }
.textseite li { margin-bottom: var(--space-2); }
.textseite address { font-style: normal; }
.textseite .stand { color: var(--warmgrau); font-size: 0.9375rem; }
.textseite .knopf { margin-top: var(--space-4); }

.hinweis-box {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--beige);
  color: var(--anthrazit);
}
.hinweis-box a { color: var(--anthrazit); }

/* ---------- Hinweis „Entwurf zur Prüfung“ (nur im Entwurfs-Modus) ---------- */
/* Auf dem Handy unten wie ein Cookie-Banner (Daumen-Reichweite),
   ab Tablet mittig. Der Hintergrund wird abgedunkelt, die Seite ist bis zum
   Bestätigen gesperrt (showModal). */
.entwurf {
  width: calc(100% - 2 * var(--space-4));
  max-width: 34rem;
  margin: auto auto var(--space-4);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--anthrazit);
  box-shadow: 0 12px 40px rgba(47, 45, 42, 0.25);
}
.entwurf::backdrop { background: rgba(26, 25, 24, 0.6); }
.entwurf-inhalt { display: grid; gap: var(--space-4); padding: var(--space-6); }
.entwurf h2 { font-size: 1.375rem; }
.entwurf .knopf { width: 100%; }
.entwurf .knopf:focus-visible { outline-offset: 3px; }
@media (min-width: 600px) {
  .entwurf { margin: auto; }
  .entwurf-inhalt { padding: var(--space-8); }
  .entwurf .knopf { width: auto; min-width: 12rem; }
}
/* Ohne JavaScript: feste Leiste über dem Kopf */
.entwurf-leiste {
  margin: 0;
  padding: var(--space-3) var(--rand);
  background: var(--dunkel);
  color: var(--auf-dunkel);
  font-size: 0.9375rem;
  text-align: center;
}

/* ---------- Druck: nur Inhalt, kein Menü ---------- */
@media print {
  .kopf, .menue-knopf, .hauptmenue, .held-zier, .sprunglink, .formular { display: none !important; }
  body { background: #fff; color: #000; }
  .abschnitt-dunkel, .fuss { background: #fff; color: #000; }
}