/* =========================================================================
   MUSTERGLANZ GEBÄUDEREINIGUNG GMBH — Köln
   Système de design complet. HTML + CSS purs, aucune dépendance.

   Direction artistique :
   Éditorial et calme. Un serif de titrage (Source Serif 4) pour la voix,
   un sans humaniste (Source Sans 3) pour l'information. Bleu d'encre très
   profond, papier blanc, un seul accent sarcelle. La profondeur vient de
   filets fins et d'ombres larges et basses, jamais de couleur en excès.

   Sommaire :
   01 Jetons          02 Réinitialisation   03 Typographie
   04 Grille & rythme 05 Accessibilité      06 En-tête
   07 Boutons         08 Hero               09 Bandeau de chiffres
   10 Cartes          11 Bloc encre         12 Listes & icônes
   13 Témoignages     14 Appel à l'action   15 Formulaire & contact
   16 Pages légales   17 Pied de page       18 WhatsApp
   19 Mouvement réduit 20 Impression
   ========================================================================= */


/* -------------------------------------------------------------------------
   01 · JETONS
   Changer --akzent et --akzent-tief suffit à basculer toute l'identité.
   ------------------------------------------------------------------------- */

:root {
  /* Encres et papiers */
  --tinte:        #0A2232;   /* encre profonde : texte, fonds sombres */
  --tinte-2:      #12354C;   /* encre secondaire, surfaces sombres */
  --grau:         #59748A;   /* texte secondaire — 4,9:1 sur blanc */
  --linie:        #E6ECF1;   /* filets, bordures de cartes */
  --papier:       #FFFFFF;   /* fond dominant */
  --dunst:        #F5F8FA;   /* fond alterné, froid */
  --auf-dunkel:   #C9D8E4;   /* texte secondaire sur encre — 11,2:1 */

  /* Accent unique */
  --akzent:       #0FA694;   /* sarcelle : aplats, icônes, graphiques */
  --akzent-tief:  #0B7D70;   /* même teinte, lisible en texte — 5,0:1 */
  --akzent-hauch: #E7F5F2;   /* voile d'accent, très dilué */

  /* Polices — pile de repli complète, le site tient sans Google Fonts */
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
           Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Segoe UI", Candara, Calibri,
           "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique fluide */
  --fs-display: clamp(2.5rem, 1.45rem + 3.6vw, 4.25rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.6vw, 3.35rem);
  --fs-h2:      clamp(1.8rem, 1.35rem + 1.7vw, 2.65rem);
  --fs-h3:      1.3rem;
  --fs-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-klein:   0.9375rem;
  --fs-mikro:   0.8125rem;

  /* Rythme */
  --raum-1: .25rem;  --raum-2: .5rem;   --raum-3: .75rem;  --raum-4: 1rem;
  --raum-5: 1.5rem;  --raum-6: 2rem;    --raum-7: 3rem;    --raum-8: 4rem;
  --sektion: clamp(4.5rem, 3rem + 6vw, 8rem);
  --rand:    clamp(1.25rem, .75rem + 2.4vw, 3rem);
  --breite:  1200px;
  --mass:    64ch;              /* mesure de lecture confortable */

  /* Ombres — larges, basses, jamais dures */
  --schatten-1: 0 1px 2px rgba(10,34,50,.04), 0 2px 8px rgba(10,34,50,.045);
  --schatten-2: 0 2px 4px rgba(10,34,50,.03), 0 14px 32px rgba(10,34,50,.075);
  --schatten-3: 0 4px 10px rgba(10,34,50,.04), 0 30px 64px rgba(10,34,50,.13);

  /* Rayons */
  --r-1: 6px;   --r-2: 10px;   --r-3: 16px;   --r-4: 22px;

  /* Mouvement */
  --dauer: 200ms;
  --kurve: cubic-bezier(.22,.61,.36,1);
}


/* -------------------------------------------------------------------------
   02 · RÉINITIALISATION
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset {
  margin: 0; padding: 0;
}

ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--akzent-hauch); color: var(--tinte); }


/* -------------------------------------------------------------------------
   03 · TYPOGRAPHIE
   ------------------------------------------------------------------------- */

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}


h1, h2, .serif {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.006em;
}

h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.0625rem; }

p + p { margin-top: var(--raum-4); }

a { color: var(--akzent-tief); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 600; }

.zahl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Surtitre : petit filet sarcelle, puis le libellé */
.oberzeile {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--fs-mikro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent-tief);
  margin-bottom: var(--raum-4);
}

.oberzeile::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--akzent);
  border-radius: 2px;
}

.vorspann {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--grau);
  max-width: 52ch;
}

.klein  { font-size: var(--fs-klein); }
.mikro  { font-size: var(--fs-mikro); }
.gedaempft { color: var(--grau); }


/* -------------------------------------------------------------------------
   04 · GRILLE & RYTHME
   ------------------------------------------------------------------------- */

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

.huelle--schmal { max-width: 860px; }

.sektion { padding-block: var(--sektion); }
.sektion--kurz { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.sektion--dunst { background: var(--dunst); }
.sektion--oben-null { padding-top: 0; }

/* En-tête de section : aligné à gauche, mesure courte */
.sektion__kopf { max-width: 46ch; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.sektion__kopf p { margin-top: var(--raum-4); color: var(--grau); font-size: var(--fs-lead); line-height: 1.6; }
.sektion__kopf--mitte { margin-inline: auto; text-align: center; }
.sektion__kopf--mitte .oberzeile::before { display: none; }

.gitter { display: grid; gap: var(--raum-5); }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.gitter--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.fliesstext { max-width: var(--mass); }
.fliesstext p { color: var(--grau); }
.fliesstext p:first-child { color: var(--tinte); font-size: var(--fs-lead); line-height: 1.6; }

/* Utilitaires de rythme — usage ponctuel, jamais de style en ligne */
.abstand-oben { margin-top: var(--raum-6); }
.abstand-oben-klein { margin-top: var(--raum-3); }

/* Image pleine largeur, sans cadre */
.vollbild img {
  width: 100%;
  height: clamp(240px, 30vw, 440px);
  object-fit: cover;
}

.foto { filter: saturate(.96) contrast(1.02); }


/* -------------------------------------------------------------------------
   05 · ACCESSIBILITÉ
   ------------------------------------------------------------------------- */

.sprunglink {
  position: fixed;
  top: var(--raum-3);
  left: 50%;
  z-index: 300;
  transform: translate(-50%, -160%);
  background: var(--tinte);
  color: #fff;
  padding: .7rem 1.4rem;
  border-radius: var(--r-2);
  font-size: var(--fs-klein);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--schatten-3);
}

.sprunglink:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--akzent-tief);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.dunkel :focus-visible,
.hero :focus-visible { outline-color: var(--akzent); }

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


/* -------------------------------------------------------------------------
   06 · EN-TÊTE
   Blanc translucide et filet fin par défaut. Sur la page d'accueil, un
   script le rend transparent tant qu'il flotte au-dessus du hero.
   ------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linie);
  transition: background var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  min-height: 78px;
}

/* Un etat « au-dessus du hero » existait ici : en-tete transparent, texte
   blanc. Il ne pouvait pas fonctionner. L'en-tete est « position: sticky »,
   donc il occupe sa place dans le flux et le hero commence en dessous :
   « background: transparent » ne revelait pas la photo sombre mais le fond
   blanc de la page, et les liens blancs devenaient invisibles. Seul l'onglet
   actif restait lisible, parce qu'il a sa propre couleur.
   L'en-tete garde donc son fond depoli sur toutes les pages. */

/* Marque */
.marke {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  text-decoration: none;
  color: var(--tinte);
  flex: 0 0 auto;
}

.marke__zeichen { width: 34px; height: 34px; border-radius: var(--r-2); flex: 0 0 auto; }

.marke__text { display: flex; flex-direction: column; line-height: 1.15; }

.marke__wort {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.marke__zusatz {
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Navigation */
.nav { margin-left: auto; }

.nav ul { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }

.nav a {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-size: var(--fs-klein);
  color: var(--grau);
  text-decoration: none;
  transition: color var(--dauer) var(--kurve);
}

.nav a:hover { color: var(--tinte); }

/* Page active : un point sarcelle sous le libellé */
.nav a[aria-current="page"] { color: var(--tinte); font-weight: 600; }

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--akzent);
}

.kopf__aktion { flex: 0 0 auto; }

.nav-schalter {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--tinte);
}

.nav-schalter svg { width: 16px; height: 16px; }

.nav__schliessen {
  display: none;
  position: absolute;
  top: 1.4rem;
  right: var(--rand);
  padding: .5rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  font-size: var(--fs-klein);
  font-weight: 600;
}

@media (max-width: 960px) {
  .kopf__aktion { display: none; }
  .nav-schalter { display: inline-flex; margin-left: auto; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 160;
    margin: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--raum-6);
    padding: var(--rand);
    background: var(--papier);
  }

  .nav[data-offen="true"] { display: flex; }
  .nav__schliessen { display: inline-flex; }

  .nav ul { flex-direction: column; align-items: flex-start; gap: var(--raum-5); }

  .nav a {
    font-family: var(--serif);
    font-size: 1.75rem;
    color: var(--tinte);
  }

  .nav a[aria-current="page"]::after { left: -18px; bottom: 50%; margin: 0 0 -3px; }
  .nav .knopf { align-self: flex-start; }
}

/* Le bouton loge dans la navigation n'est destine qu'au tiroir mobile.
   Au-dessus de 960 px c'est « .kopf__aktion » qui le porte : rien ne le
   masquait, si bien que « Angebot anfordern » s'affichait deux fois et
   faisait passer le menu a la ligne. */
@media (min-width: 961px) {
  .nav > .knopf { display: none; }
}


/* -------------------------------------------------------------------------
   07 · BOUTONS
   ------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: var(--r-2);
  font-size: var(--fs-klein);
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition: background var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}

@media (max-width: 420px) {
  .knopf {
    white-space: normal;
    text-align: center;
    flex: 1 1 auto;
  }
}

.knopf svg { width: 16px; height: 16px; flex: 0 0 auto; }

.knopf--haupt {
  background: var(--akzent-tief);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10,34,50,.10), 0 10px 22px rgba(11,125,112,.22);
}

.knopf--haupt:hover {
  background: var(--tinte);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(10,34,50,.10), 0 16px 32px rgba(10,34,50,.22);
}

.knopf--rahmen {
  border: 1px solid var(--linie);
  background: var(--papier);
  color: var(--tinte);
}

.knopf--rahmen:hover { border-color: var(--tinte); transform: translateY(-2px); }

.knopf--geist {
  color: #fff;
  border: 1px solid rgba(255,255,255,.38);
}

.knopf--geist:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.75); }

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

/* Lien fléché : la flèche avance au survol */
.pfeil {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-klein);
  font-weight: 600;
  text-decoration: none;
  color: var(--akzent-tief);
}

.pfeil svg { width: 15px; height: 15px; transition: transform var(--dauer) var(--kurve); }
.pfeil:hover svg { transform: translateX(4px); }


/* -------------------------------------------------------------------------
   08 · HERO
   Photo pleine largeur, voile d'encre en dégradé diagonal. Le point le
   plus clair du voile reste à 70 % : le blanc du titre tient 4,8:1 même
   sur une zone totalement blanche de la photo.
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 82vh, 820px);
  padding-block: clamp(7rem, 14vh, 11rem) clamp(4rem, 9vw, 7rem);
  color: #fff;
  overflow: hidden;
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(6,22,34,.92) 0%, rgba(6,22,34,.80) 46%, rgba(6,22,34,.70) 100%);
}

.hero__innen { width: 100%; }
.hero .oberzeile { color: #fff; }
.hero .oberzeile::before { background: var(--akzent); }

.hero h1 {
  font-size: var(--fs-display);
  max-width: 17ch;
  color: #fff;
}

.hero__vorspann {
  margin-top: var(--raum-5);
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-top: var(--raum-6);
}

/* Trois preuves courtes, en bas du hero */
.hero__belege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-6);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--raum-5);
  border-top: 1px solid rgba(255,255,255,.18);
}

.hero__belege li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-klein);
  color: rgba(255,255,255,.9);
}

.hero__belege svg { width: 17px; height: 17px; color: var(--akzent); flex: 0 0 auto; }

/* Titre des pages intérieures */
.seitenkopf { padding-block: clamp(3.5rem, 3rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem); }
.seitenkopf h1 { max-width: 20ch; }
.seitenkopf p { margin-top: var(--raum-5); }

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--raum-5);
  font-size: var(--fs-mikro);
  color: var(--grau);
}

.brotkrumen a { color: var(--grau); text-decoration: none; }
.brotkrumen a:hover { color: var(--tinte); text-decoration: underline; }
.brotkrumen li + li::before { content: "/"; margin-right: .5rem; color: var(--linie); }
.brotkrumen ol { display: contents; }


/* -------------------------------------------------------------------------
   09 · BANDEAU DE CHIFFRES
   Carte blanche qui chevauche le bas du hero — c'est elle qui donne la
   profondeur de la page d'accueil.
   ------------------------------------------------------------------------- */

.kennzahlen { position: relative; z-index: 5; }
.kennzahlen--ueberlappt { margin-top: clamp(-5rem, -4vw, -3rem); }

.kennzahlen__karte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  box-shadow: var(--schatten-3);
  overflow: hidden;
}

.kennzahlen__karte > li {
  padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
  border-right: 1px solid var(--linie);
}

.kennzahlen__karte > li:last-child { border-right: 0; }

@media (max-width: 700px) {
  .kennzahlen__karte > li { border-right: 0; border-bottom: 1px solid var(--linie); }
  .kennzahlen__karte > li:last-child { border-bottom: 0; }
}

.kennzahl__wert {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinte);
}

.kennzahl__wert em { font-style: normal; color: var(--akzent-tief); }

.kennzahl__text {
  display: block;
  margin-top: .55rem;
  font-size: var(--fs-mikro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grau);
}


/* -------------------------------------------------------------------------
   10 · CARTES
   ------------------------------------------------------------------------- */

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  transition: transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}

.karte:hover {
  transform: translateY(-3px);
  border-color: rgba(15,166,148,.35);
  box-shadow: var(--schatten-2);
}

.karte h3 { margin-bottom: var(--raum-3); }
.karte p { color: var(--grau); font-size: var(--fs-klein); }
.karte .pfeil { margin-top: auto; padding-top: var(--raum-5); }

/* Index numéroté discret en tête de carte */
.karte__index {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin-bottom: var(--raum-5);
  font-size: var(--fs-mikro);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--akzent-tief);
}

.karte__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

/* Vignette d'icône */
.symbol {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--raum-5);
  border-radius: var(--r-2);
  background: var(--akzent-hauch);
  color: var(--akzent-tief);
}

.symbol svg { width: 22px; height: 22px; }

/* Carte principale : la prestation qui porte le contrat récurrent */
.karte--kern {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 1rem + 2.6vw, 3rem);
  background: var(--tinte);
  border-color: var(--tinte);
  color: #fff;
}

.karte--kern:hover { transform: none; border-color: var(--tinte); box-shadow: var(--schatten-3); }
.karte--kern h3 { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.015em; }
.karte--kern p { color: var(--auf-dunkel); font-size: var(--fs-body); }
.karte--kern .symbol { background: rgba(15,166,148,.16); color: var(--akzent); }

.etikett {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  margin-bottom: var(--raum-4);
  border-radius: 999px;
  background: rgba(15,166,148,.16);
  color: var(--akzent);
  font-size: var(--fs-mikro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Étapes : grand chiffre en serif */
.schritt__nummer {
  display: block;
  margin-bottom: var(--raum-4);
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--linie);
  transition: color var(--dauer) var(--kurve);
}

.karte:hover .schritt__nummer { color: var(--akzent); }


/* -------------------------------------------------------------------------
   11 · BLOC ENCRE
   ------------------------------------------------------------------------- */

.dunkel {
  position: relative;
  isolation: isolate;
  background: var(--tinte);
  color: #fff;
  padding-block: var(--sektion);
  overflow: hidden;
}

/* Halo très diffus, pour que l'aplat ne soit pas mort */
.dunkel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%; left: 50%;
  width: min(1100px, 120%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(15,166,148,.16) 0%, rgba(15,166,148,0) 62%);
}

.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .oberzeile { color: var(--akzent); }
.dunkel .sektion__kopf p, .dunkel p { color: var(--auf-dunkel); }
.dunkel a { color: #fff; }

.saeule h3 { margin-bottom: var(--raum-3); }
.saeule p { font-size: var(--fs-klein); }


/* -------------------------------------------------------------------------
   12 · LISTES & ICÔNES
   ------------------------------------------------------------------------- */

.haken { margin-top: var(--raum-5); }

.haken li {
  position: relative;
  padding-left: 1.9rem;
  margin-top: var(--raum-3);
  font-size: var(--fs-klein);
  color: var(--grau);
}

.haken li::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--akzent-hauch) no-repeat center / .72rem .72rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l4 4.1 8-9' fill='none' stroke='%230B7D70' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dunkel .haken li { color: var(--auf-dunkel); }

.dunkel .haken li::before {
  background-color: rgba(15,166,148,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l4 4.1 8-9' fill='none' stroke='%230FA694' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* -------------------------------------------------------------------------
   13 · TÉMOIGNAGES
   ------------------------------------------------------------------------- */

.stimme {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}

.stimme:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }

.stimme__zeichen {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: .8;
  color: var(--akzent);
  opacity: .45;
  margin-bottom: var(--raum-3);
}

.stimme blockquote {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.stimme figcaption {
  margin-top: auto;
  padding-top: var(--raum-5);
  font-size: var(--fs-mikro);
  color: var(--grau);
}

.stimme figcaption strong { display: block; color: var(--tinte); font-size: var(--fs-klein); }


/* -------------------------------------------------------------------------
   14 · APPEL À L'ACTION
   ------------------------------------------------------------------------- */

.aufruf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding: clamp(2rem, 1.5rem + 3vw, 3.75rem);
  border-radius: var(--r-4);
  background: var(--dunst);
  border: 1px solid var(--linie);
}

.aufruf h2 { max-width: 18ch; }
.aufruf p { margin-top: var(--raum-4); color: var(--grau); }

.aufruf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  align-items: center;
}

.aufruf__hinweis { margin-top: var(--raum-4); font-size: var(--fs-klein); color: var(--grau); }


/* -------------------------------------------------------------------------
   15 · FORMULAIRE & CONTACT
   ------------------------------------------------------------------------- */

.kontakt-gitter {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 960px) {
  .kontakt-gitter { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .kontakt-gitter__seite { position: sticky; top: 6.5rem; }
}

.formular {
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  box-shadow: var(--schatten-1);
}

.formular > h2 { font-size: 1.6rem; margin-bottom: var(--raum-2); }
.formular__intro { color: var(--grau); font-size: var(--fs-klein); margin-bottom: var(--raum-6); }

.feld-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--raum-4);
}

.feld + .feld, .feld-paar + .feld, .feld + .feld-paar, .feld-paar + .feld-paar { margin-top: var(--raum-4); }
.feld-paar > .feld + .feld { margin-top: 0; }

.feld label {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--fs-klein);
  font-weight: 600;
}

.feld__hinweis {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-mikro);
  font-weight: 400;
  color: var(--grau);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: .75rem .95rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  font-size: var(--fs-body);
  transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}

.feld input::placeholder, .feld textarea::placeholder { color: #9BB0C0; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: #C7D5DF; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(15,166,148,.16);
}

.feld textarea { min-height: 9.5rem; resize: vertical; }

.feld select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2359748A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.1rem;
}

.feld--zustimmung {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: var(--raum-6);
  padding: var(--raum-4);
  background: var(--dunst);
  border-radius: var(--r-2);
}

.feld--zustimmung input {
  width: 1.1rem; height: 1.1rem;
  margin-top: .3rem;
  flex: 0 0 auto;
  accent-color: var(--akzent-tief);
}

.feld--zustimmung label { margin: 0; font-weight: 400; font-size: var(--fs-klein); color: var(--grau); }

.pflicht { color: var(--akzent-tief); }

.formular .knopf { margin-top: var(--raum-5); }
.formular__fuss { margin-top: var(--raum-4); font-size: var(--fs-mikro); color: var(--grau); }

/* Colonne d'informations */
.infoblock {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  background: var(--dunst);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
}

.infoblock + .infoblock { margin-top: var(--raum-5); }
.infoblock h3 { margin-bottom: var(--raum-4); }

.infozeile {
  display: flex;
  gap: var(--raum-4);
  padding-block: var(--raum-3);
}

.infozeile + .infozeile { border-top: 1px solid var(--linie); }
.infozeile svg { width: 19px; height: 19px; color: var(--akzent-tief); flex: 0 0 auto; margin-top: .28rem; }
.infozeile__wert { font-style: normal; font-size: var(--fs-klein); color: var(--grau); }
.infozeile__wert strong { display: block; color: var(--tinte); font-size: var(--fs-body); font-weight: 600; }
.infozeile__wert a { color: var(--tinte); text-decoration: none; }
.infozeile__wert a:hover { color: var(--akzent-tief); text-decoration: underline; }

.lageplan {
  margin-top: var(--raum-5);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  overflow: hidden;
}

.lageplan img { width: 100%; }


/* -------------------------------------------------------------------------
   16 · PAGES LÉGALES
   ------------------------------------------------------------------------- */

.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: 1.45rem; margin-top: var(--raum-8); }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { margin-top: var(--raum-6); }
.rechtstext p, .rechtstext ul { margin-top: var(--raum-4); color: var(--grau); font-size: var(--fs-klein); }

.rechtstext li { position: relative; padding-left: 1.15rem; margin-top: .35rem; }

.rechtstext li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--akzent);
}

.ergaenzen {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: var(--r-1);
  background: var(--akzent-hauch);
  color: var(--akzent-tief);
  font-size: var(--fs-mikro);
  font-weight: 600;
  letter-spacing: .05em;
}

.hinweisbox {
  max-width: 68ch;
  margin-bottom: var(--raum-7);
  padding: var(--raum-5);
  background: var(--dunst);
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: var(--fs-klein);
  color: var(--grau);
}


/* -------------------------------------------------------------------------
   17 · PIED DE PAGE
   ------------------------------------------------------------------------- */

.fuss {
  background: var(--tinte);
  color: var(--auf-dunkel);
  padding-block: clamp(3.5rem, 3rem + 3vw, 5.5rem) var(--raum-6);
}

.fuss__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--raum-7) var(--raum-6);
}

.fuss__marke { grid-column: span 1; }
@media (min-width: 900px) { .fuss__marke { grid-column: span 2; max-width: 30ch; } }

.fuss .marke { color: #fff; }
.fuss .marke__zusatz { color: rgba(255,255,255,.55); }
.fuss__text { margin-top: var(--raum-4); font-size: var(--fs-klein); color: var(--auf-dunkel); }

.fuss h2 {
  font-family: var(--sans);
  font-size: var(--fs-mikro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: var(--raum-4);
}

.fuss li + li { margin-top: .45rem; }

.fuss a {
  font-size: var(--fs-klein);
  color: var(--auf-dunkel);
  text-decoration: none;
}

.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss address { font-style: normal; font-size: var(--fs-klein); }

.fuss__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--raum-7);
  padding-top: var(--raum-5);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--fs-mikro);
  color: rgba(255,255,255,.55);
}


/* -------------------------------------------------------------------------
   18 · WHATSAPP
   ------------------------------------------------------------------------- */

.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--tinte);
  color: #fff;
  box-shadow: 0 2px 6px rgba(10,34,50,.16), 0 14px 30px rgba(10,34,50,.24);
  transition: transform var(--dauer) var(--kurve), background var(--dauer) var(--kurve);
}

.wa:hover { transform: translateY(-3px); background: var(--akzent-tief); }
.wa svg { width: 26px; height: 26px; }


/* -------------------------------------------------------------------------
   19 · MOUVEMENT RÉDUIT
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .karte:hover, .stimme:hover, .knopf:hover, .wa:hover { transform: none; }
  .pfeil:hover svg { transform: none; }
}


/* -------------------------------------------------------------------------
   20 · IMPRESSION
   ------------------------------------------------------------------------- */

@media print {
  .kopf, .wa, .nav, .nav-schalter, .sprunglink, .hero__bild, .knopf, .lageplan { display: none !important; }

  body { color: #000; background: #fff; font-size: 10.5pt; }

  .hero, .dunkel, .karte--kern, .fuss {
    background: #fff !important;
    color: #000 !important;
    min-height: 0;
    padding-block: 1.25rem;
  }

  .hero::before, .dunkel::before { display: none; }
  .hero h1, .hero__vorspann, .dunkel h2, .dunkel h3, .dunkel p,
  .karte--kern h3, .karte--kern p, .fuss a, .fuss address { color: #000 !important; }

  .karte, .stimme, .formular, .infoblock, .aufruf, .kennzahlen__karte {
    box-shadow: none;
    border: 1px solid #BBB;
    break-inside: avoid;
  }

  .kennzahlen--ueberlappt { margin-top: 0; }
  .sektion { padding-block: 1.25rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}