/* =============================================================================
   MUSTERWEG UMZÜGE GMBH — feuille de styles unique

   DIRECTION ARTISTIQUE
   Neutres froids, contraste franc, typographie display large et serrée.
   Blanc et gris très clair pour respirer, une seule section très sombre par
   page en ponctuation, un vert saturé comme unique accent.

   Les partis pris qui font l'écart avec un gabarit daté :
   — pas de beige, pas de serif : gris froids et grotesque serré
   — titres très grands, interlettrage négatif (-0.03em), interligne < 1
   — arrondis nets de 12 à 20 px, pas la zone tiède des 8 px
   — séparation par le filet et l'aplat, pas par l'ombre portée
   — corps de texte à 17 px, interligne 1.6

   SOMMAIRE
   01 Variables            02 Base            03 Typographie
   04 Utilitaires / a11y   05 En-tête & nav   06 Boutons
   07 Formulaires          08 Sections        09 Hero
   10 Repères              11 Frise étapes    12 Cartes
   13 Chiffres             14 Tableaux        15 Encadrés
   16 Images               17 Pied de page    18 WhatsApp
   19 Écrans               20 Mouvement réduit 21 Impression
   ============================================================================= */

/* -----------------------------------------------------------------------------
   01 VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Neutres froids ---------------------------------------------------------- */
  --blanc:     #FFFFFF;
  --gris-0:    #FAFAFA;   /* fond de page */
  --gris-1:    #F4F4F5;   /* sections alternées */
  --gris-2:    #ECECEE;   /* survols et surfaces creusées */
  --linie:     #E4E4E7;   /* filets */
  --linie-fein:#EFEFF1;   /* filets très discrets */

  /* Encre ------------------------------------------------------------------- */
  --tinte:     #101114;   /* texte principal, boutons pleins */
  --tinte-2:   #16181C;   /* sections profondes, pied de page */
  --tinte-3:   #26292F;   /* surfaces dans le sombre */
  --tinte-4:   #383C44;   /* bordures dans le sombre */
  --grau:      #5B5F66;   /* texte secondaire (6,1:1 sur blanc) */

  /* Accent — vert saturé ----------------------------------------------------- */
  --akzent:       #067A46;  /* liens, chiffres, boutons d'accent (5,4:1) */
  --akzent-dunkel:#05633A;
  --akzent-hell:  #34D399;  /* accent lisible sur fond sombre (9,2:1) */
  --akzent-blass: #ECFAF3;

  /* Rôles — bascule dans .band-tief et à l'impression ------------------------ */
  --fond:        var(--gris-0);
  --text:        var(--tinte);
  --text-schwach:var(--grau);
  --regel:       var(--linie);
  --flaeche:     var(--blanc);
  --akzent-akt:  var(--akzent);
  --fokus:       var(--tinte);

  /* Typographie -------------------------------------------------------------- */
  --display: "Inter Tight", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-schrift: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Échelle ------------------------------------------------------------------ */
  --t-xs:  0.8125rem;
  --t-s:   0.9375rem;
  --t-m:   1.0625rem;   /* 17 px : plus généreux que le 16 px par défaut */
  --t-l:   1.1875rem;
  --t-xl:  1.5rem;
  --t-2xl: 2rem;
  --t-3xl: 2.75rem;

  /* Rythme -------------------------------------------------------------------- */
  --raum:   clamp(4.5rem, 10vw, 8rem);
  --gosse:  clamp(1.25rem, 4vw, 2.75rem);
  --breite: 78rem;

  /* Arrondis — francs, jamais tièdes ------------------------------------------ */
  --r-s:    10px;
  --r-m:    16px;
  --r-l:    24px;
  --r-pill: 999px;

  --tempo:  200ms;
  --courbe: cubic-bezier(0.16, 1, 0.3, 1);

  /* Ombres — rares et très larges, jamais des halos mous --------------------- */
  --ombre: 0 1px 2px rgba(16, 17, 20, 0.04), 0 12px 32px -8px rgba(16, 17, 20, 0.12);
}

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--fond);
  color: var(--text);
  font-family: var(--text-schrift);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
}


img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--tinte); color: #fff; }

/* -----------------------------------------------------------------------------
   03 TYPOGRAPHIE
   Grande, serrée, contrastée. C'est ce qui sépare une page de 2025 d'une
   page de 2016 bien plus sûrement que la palette.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 6.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  font-weight: 600;
}
h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
}
h3 {
  font-size: var(--t-xl);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
h4 { font-size: var(--t-l); line-height: 1.3; letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.vorspann {
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--text-schwach);
  max-width: 52ch;
}

/* Surtitre : pastille discrète, en casse normale */
.marker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.32rem;
  border: 1px solid var(--regel);
  border-radius: var(--r-pill);
  background: var(--flaeche);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-schwach);
  margin: 0 0 1.35rem;
}
.marker::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--akzent-akt);
  flex: 0 0 auto;
}

a {
  color: var(--akzent-akt);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  transition: color var(--tempo) var(--courbe),
              text-decoration-color var(--tempo) var(--courbe);
}
a:hover { color: var(--akzent-dunkel); text-decoration-color: currentColor; }

strong, b { font-weight: 600; color: var(--text); }

ul, ol { padding-left: 1.15rem; margin: 0 0 1.1em; }
li { margin-bottom: 0.4em; }

.liste { list-style: none; padding-left: 0; }
.liste li { position: relative; padding-left: 1.7rem; margin-bottom: 0.65em; }
.liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.66em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--akzent-akt);
}

/* -----------------------------------------------------------------------------
   04 UTILITAIRES ET ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--gosse);
}

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

.sprung {
  position: absolute;
  left: 1rem; top: -6rem;
  z-index: 200;
  background: var(--tinte);
  color: #fff;
  font-weight: 500;
  font-size: var(--t-s);
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-s);
  transition: top var(--tempo) var(--courbe);
}
.sprung:focus { top: 1rem; color: #fff; }

.nur-sr {
  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;
}

.eng { max-width: 46rem; }
.filet { border: 0; border-top: 1px solid var(--regel); margin: 0; }

/* -----------------------------------------------------------------------------
   05 EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--gris-0) 80%, transparent);
  backdrop-filter: saturate(1.8) blur(16px);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  border-bottom: 1px solid var(--linie-fein);
}

.kopf-innen {
  position: relative;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.85rem var(--gosse);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marke {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-decoration: none;
  color: var(--tinte);
  margin-right: auto;
  line-height: 1.05;
}
.marke:hover { color: var(--tinte); }
.marke-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.035em;
}
.marke-zusatz {
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  color: var(--grau);
  font-weight: 450;
}

.haupt-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0; padding: 0;
}
.haupt-nav li { margin: 0; }

/* État actif en pastille pleine, pas en soulignement */
.haupt-nav a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--grau);
  text-decoration: none;
  transition: color var(--tempo) var(--courbe),
              background-color var(--tempo) var(--courbe);
}
.haupt-nav a:hover { color: var(--tinte); background: var(--gris-2); }
.haupt-nav a[aria-current="page"] { color: var(--tinte); background: var(--gris-2); font-weight: 500; }

.kopf-aktion {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: 1rem;
}
.kopf-tel {
  font-weight: 500;
  font-size: var(--t-s);
  color: var(--tinte);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.kopf-tel:hover { color: var(--akzent); }

.menu-schalter { display: none; }
.menu-knopf { display: none; }

/* -----------------------------------------------------------------------------
   06 BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font-family: var(--text-schrift);
  font-weight: 500;
  font-size: var(--t-s);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--tempo) var(--courbe),
              border-color var(--tempo) var(--courbe),
              color var(--tempo) var(--courbe),
              transform var(--tempo) var(--courbe);
}
.btn:active { transform: scale(0.985); }

/* Action principale : encre pleine */
.btn-primaer { background: var(--tinte); color: #fff; }
.btn-primaer:hover { background: #2A2D33; color: #fff; }

/* Accent : vert */
.btn-akzent { background: var(--akzent); color: #fff; }
.btn-akzent:hover { background: var(--akzent-dunkel); color: #fff; }

/* Secondaire : contour net */
.btn-linie {
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--regel);
}
.btn-linie:hover { border-color: var(--text); background: var(--flaeche); color: var(--text); }

.btn-breit { width: 100%; }
.btn + .btn { margin-left: 0.5rem; }

/* -----------------------------------------------------------------------------
   07 FORMULAIRES
   -------------------------------------------------------------------------- */
.feld { margin-bottom: 1.05rem; }

.feld > label,
.feldsatz > legend {
  display: block;
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.4rem;
  padding: 0;
}

input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--regel);
  border-radius: var(--r-s);
  font-family: var(--text-schrift);
  font-size: var(--t-s);
  line-height: 1.45;
  transition: border-color var(--tempo) var(--courbe);
}
input::placeholder, textarea::placeholder { color: var(--text-schwach); opacity: 0.7; }
input:hover, select:hover, textarea:hover { border-color: var(--text-schwach); }
/* Pas de « outline: none » : le contour de focus global doit rester visible. */
input:focus, select:focus, textarea:focus { border-color: var(--text); }
textarea { min-height: 8rem; resize: vertical; }

.feldsatz {
  border: 1px solid var(--regel);
  border-radius: var(--r-m);
  padding: 1.4rem 1.4rem 0.6rem;
  margin: 0 0 1.25rem;
}
.feldsatz > legend {
  padding-inline: 0.5rem;
  font-family: var(--display);
  font-size: var(--t-l);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.feld-reihe { display: grid; gap: 0 0.9rem; grid-template-columns: 1fr; }

.wahl { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.7rem; }
.wahl input {
  width: 1.1rem; height: 1.1rem;
  margin: 0.28rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--akzent-akt);
}
.wahl label { font-size: var(--t-s); line-height: 1.55; color: var(--text); margin: 0; }
.radio-reihe { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

.pflicht { color: var(--akzent-akt); }
.hinweis { font-size: var(--t-s); color: var(--text-schwach); max-width: 58ch; }

/* Carte de demande de devis */
.anfrage-box {
  background: var(--flaeche);
  border: 1px solid var(--regel);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--ombre);
}
.band-tief .anfrage-box { box-shadow: none; }
.anfrage-box h2 {
  font-size: var(--t-xl);
  letter-spacing: -0.028em;
  margin-bottom: 0.3em;
}
.anfrage-box .hinweis { margin-top: 0.85rem; }

/* -----------------------------------------------------------------------------
   08 SECTIONS
   -------------------------------------------------------------------------- */
.band { padding-block: var(--raum); overflow: hidden; }

.band-ton {
  background: var(--gris-1);
  --flaeche: var(--blanc);
}

/* La seule surface très sombre : une fois par page, en ponctuation */
.band-tief {
  background: var(--tinte-2);
  color: #fff;
  --text: #FFFFFF;
  --text-schwach: #A6ABB4;
  --regel: var(--tinte-4);
  --flaeche: var(--tinte-3);
  --akzent-akt: var(--akzent-hell);
  --fokus: #FFFFFF;
}
.band-tief h1, .band-tief h2, .band-tief h3, .band-tief h4 { color: #fff; }
.band-tief strong { color: #fff; }
.band-tief .marker { background: transparent; border-color: var(--tinte-4); }
.band-tief .btn-primaer { background: #fff; color: var(--tinte); }
.band-tief .btn-primaer:hover { background: var(--gris-1); color: var(--tinte); }
.band-tief .btn-akzent { background: var(--akzent-hell); color: var(--tinte); }
.band-tief .btn-akzent:hover { background: #5CDFAE; color: var(--tinte); }
.band-tief .btn-linie { background: transparent; color: #fff; border-color: var(--tinte-4); }
.band-tief .btn-linie:hover { border-color: #fff; color: #fff; background: transparent; }

/* En-tête de page interne */
.seitenkopf {
  background: var(--gris-0);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.seitenkopf h1 { margin-bottom: 0.3em; }

.pfad {
  font-size: var(--t-s);
  color: var(--grau);
  margin-bottom: 1.35rem;
}
.pfad a { color: var(--grau); text-decoration: none; }
.pfad a:hover { color: var(--tinte); text-decoration: underline; }
.pfad .trenner { color: var(--text-schwach); padding-inline: 0.45rem; }

.zwei-spalten {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

/* -----------------------------------------------------------------------------
   09 HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--gris-0);
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.hero-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.hero h1 { margin-bottom: 0.32em; }
.hero h1 .zeile { display: block; }
.hero h1 .akzent { color: var(--akzent); }

/* Bandeau d'image pleine largeur, juste sous le hero */
.hero-bild {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--gris-1);
  border: 1px solid var(--linie);
}
.hero-bild img { width: 100%; height: auto; display: block; }

/* -----------------------------------------------------------------------------
   10 REPÈRES
   -------------------------------------------------------------------------- */
.merkmale {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--regel);
  border: 1px solid var(--regel);
  border-radius: var(--r-m);
  overflow: hidden;
}
.merkmale li {
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--flaeche);
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--text);
}

/* -----------------------------------------------------------------------------
   11 FRISE DES ÉTAPES
   -------------------------------------------------------------------------- */
.frise-huelle { overflow: hidden; }

.frise {
  list-style: none;
  margin: 0; padding: 0 0 1rem;
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--regel) transparent;
}

.frise > li {
  flex: 1 0 clamp(13.5rem, 21vw, 17rem);
  scroll-snap-align: start;
  margin: 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--regel);
  border-radius: var(--r-m);
  background: var(--flaeche);
}

.frise .nummer {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-s);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--akzent-akt);
  margin-bottom: 1.75rem;
}
.frise h3 { font-size: var(--t-l); margin-bottom: 0.4em; }
.frise p { font-size: var(--t-s); color: var(--text-schwach); max-width: none; line-height: 1.55; }

.frise::-webkit-scrollbar { height: 4px; }
.frise::-webkit-scrollbar-track { background: transparent; }
.frise::-webkit-scrollbar-thumb { background: var(--regel); border-radius: 4px; }

.frise-hinweis { font-size: var(--t-s); color: var(--text-schwach); margin-top: 0.4rem; }

/* -----------------------------------------------------------------------------
   12 CARTES
   -------------------------------------------------------------------------- */
.raster {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
  grid-template-columns: 1fr;
}

.karte {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--regel);
  border-radius: var(--r-m);
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  transition: border-color var(--tempo) var(--courbe),
              transform var(--tempo) var(--courbe);
}
.karte:hover, .karte:focus-within {
  border-color: var(--text-schwach);
  transform: translateY(-3px);
}

.karte h3 {
  font-size: var(--t-l);
  margin-bottom: 0.45em;
  padding-right: 2rem;
}
.karte p { color: var(--text-schwach); font-size: var(--t-s); line-height: 1.55; }

.karte-link { color: inherit; text-decoration: none; }
.karte-link::before { content: ""; position: absolute; inset: 0; }
.karte-link:hover { color: var(--akzent-akt); }

.karte .lot {
  position: absolute;
  top: 1.4rem; right: 1.5rem;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-s);
  font-weight: 500;
  line-height: 1;
  color: var(--text-schwach);
}

/* -----------------------------------------------------------------------------
   13 CHIFFRES — très grands, très serrés
   -------------------------------------------------------------------------- */
.kennzahlen {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.kennzahlen li { margin: 0; }

.zahl {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--text);
}
.zahl .einheit {
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-schwach);
  margin-left: 0.18em;
}
.zahl-akzent { color: var(--akzent-akt); }
/* Pas d'opacité ici : à 0,75 le suffixe tombait à 4,3:1, sous le seuil AA. */
.zahl-akzent .einheit { color: var(--akzent-akt); }

.zahl-text {
  display: block;
  font-size: var(--t-s);
  line-height: 1.45;
  color: var(--text-schwach);
  margin-top: 0.7rem;
  max-width: 24ch;
}

/* -----------------------------------------------------------------------------
   14 TABLEAUX
   -------------------------------------------------------------------------- */
.tabelle-huelle {
  overflow-x: auto;
  border: 1px solid var(--regel);
  border-radius: var(--r-m);
  background: var(--flaeche);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 32rem;
}
caption {
  text-align: left;
  font-size: var(--t-s);
  color: var(--text-schwach);
  padding: 1.15rem 1.35rem 0;
}
th, td {
  text-align: left;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: top;
  font-size: var(--t-s);
}
.band-ton th, .band-ton td, .band-tief th, .band-tief td { border-bottom-color: var(--regel); }
thead th {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-schwach);
  border-bottom: 1px solid var(--regel);
  white-space: nowrap;
}
tbody th { font-weight: 500; color: var(--text); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--tempo) var(--courbe); }
tbody tr:hover { background: var(--gris-1); }
.band-tief tbody tr:hover { background: var(--tinte-3); }
td.volumen {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-l);
  letter-spacing: -0.025em;
  color: var(--text);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   15 ENCADRÉS
   -------------------------------------------------------------------------- */
/* Bloc sombre posé dans une section claire */
.stahl-block {
  background: var(--tinte-2);
  color: #fff;
  --text: #FFFFFF;
  --text-schwach: #A6ABB4;
  --regel: var(--tinte-4);
  --flaeche: var(--tinte-3);
  --akzent-akt: var(--akzent-hell);
  --fokus: #FFFFFF;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: var(--r-l);
  overflow: hidden;
}
.stahl-block h2, .stahl-block h3 { color: #fff; }
.stahl-block .marker { background: transparent; border-color: var(--tinte-4); }
.stahl-block .btn-primaer { background: #fff; color: var(--tinte); }

/* Citation : grand display, sans filet ni guillemet décoratif */
.parole {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text);
  max-width: 20ch;
  margin: 0 0 1.25rem;
}

/* Encadré d'information */
.notiz {
  background: var(--gris-1);
  border: 1px solid var(--regel);
  border-radius: var(--r-m);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.band-ton .notiz { background: var(--blanc); }
.notiz p { font-size: var(--t-s); line-height: 1.55; color: var(--text); }
.band-tief .notiz, .stahl-block .notiz {
  background: var(--tinte-3);
  border-color: var(--tinte-4);
}
.band-tief .notiz p, .stahl-block .notiz p { color: #E7E9EC; }

/* Marqueur de contenu à compléter */
.ergaenzen {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  background: var(--gris-2);
  color: var(--tinte);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.55rem;
}
.band-tief .ergaenzen, .stahl-block .ergaenzen { background: var(--tinte-4); color: #fff; }

.referenz-kopf { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; align-items: baseline; }
.referenz-kopf .ort { font-size: var(--t-s); color: var(--text-schwach); }

/* Listes de données */
.daten { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1.5rem; margin: 0; }
.daten dd + dt { margin-top: 1rem; }
.daten dt { font-size: var(--t-s); color: var(--text-schwach); }
/* minmax(0, 1fr) : autorise la colonne de valeur à passer sous sa largeur
   minimale de contenu — sans cela un mot comme
   « Umsatzsteuer-Identifikationsnummer » pousse la grille hors de l'écran. */
.daten dd { margin: 0; font-size: var(--t-s); overflow-wrap: break-word; }

/* -----------------------------------------------------------------------------
   16 IMAGES
   -------------------------------------------------------------------------- */
.foto {
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  background: var(--gris-1);
  border: 1px solid var(--linie);
}
.band-tief .foto { border-color: var(--tinte-4); }
figure { margin: 0; }
figcaption {
  font-size: var(--t-s);
  color: var(--text-schwach);
  margin-top: 0.9rem;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   17 PIED DE PAGE
   -------------------------------------------------------------------------- */
.fuss {
  background: var(--tinte-2);
  color: #A6ABB4;
  --text: #FFFFFF;
  --text-schwach: #A6ABB4;
  --fokus: #FFFFFF;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  overflow: hidden;
}
.fuss-raster { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.fuss h2 {
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #8B9098;
  margin-bottom: 1.15em;
}
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 0.6em; }
.fuss a { color: #D3D6DA; text-decoration: none; font-size: var(--t-s); }
.fuss a:hover { color: #fff; }
.fuss p { font-size: var(--t-s); max-width: 38ch; line-height: 1.55; }
.fuss address { font-style: normal; font-size: var(--t-s); line-height: 1.75; }

.fuss-unten {
  border-top: 1px solid var(--tinte-4);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: #8B9098;
}

/* -----------------------------------------------------------------------------
   18 BOUTON WHATSAPP FLOTTANT — cercle de 52 px
   -------------------------------------------------------------------------- */
.wa-knopf {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 90;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--tinte);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: background-color var(--tempo) var(--courbe),
              transform var(--tempo) var(--courbe);
}
.wa-knopf:hover { background: var(--akzent); color: #fff; transform: translateY(-3px); }
.wa-knopf svg { width: 25px; height: 25px; fill: currentColor; display: block; }

/* -----------------------------------------------------------------------------
   19 ADAPTATION AUX ÉCRANS
   -------------------------------------------------------------------------- */
@media (max-width: 61.25rem) {
  .kopf-innen { padding-right: calc(var(--gosse) + 3.5rem); }

  /* Case à cocher transparente posée sur le bouton dessiné : elle sert de
     commande, reste atteignable au clavier et referme le menu ouvert. */
  .menu-schalter {
    display: block;
    position: absolute;
    top: 50%; right: var(--gosse);
    transform: translateY(-50%);
    width: 2.6rem; height: 2.6rem;
    margin: 0; opacity: 0; z-index: 120;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .menu-knopf {
    display: flex;
    position: absolute;
    top: 50%; right: var(--gosse);
    transform: translateY(-50%);
    width: 2.6rem; height: 2.6rem;
    z-index: 115;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linie);
    border-radius: var(--r-s);
    background: var(--blanc);
    font-size: 0;
    color: var(--tinte);
  }
  .menu-knopf .balken { position: relative; }
  .menu-knopf .balken,
  .menu-knopf .balken::before,
  .menu-knopf .balken::after {
    display: block;
    width: 1.05rem; height: 1.5px;
    border-radius: 2px;
    background: var(--tinte);
    transition: transform var(--tempo) var(--courbe), opacity var(--tempo) var(--courbe);
  }
  .menu-knopf .balken::before,
  .menu-knopf .balken::after { content: ""; position: absolute; left: 0; }
  .menu-knopf .balken::before { top: -5px; }
  .menu-knopf .balken::after  { top: 5px; }

  .menu-schalter:focus-visible + .menu-knopf { outline: 2px solid var(--tinte); outline-offset: 3px; }

  .haupt-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--gris-0);
    padding: 5.5rem var(--gosse) 2rem;
    overflow-y: auto;
  }
  .menu-schalter:checked ~ .haupt-nav { display: block; }
  .menu-schalter:checked + .menu-knopf .balken { background: transparent; }
  .menu-schalter:checked + .menu-knopf .balken::before { top: 0; transform: rotate(45deg); }
  .menu-schalter:checked + .menu-knopf .balken::after  { top: 0; transform: rotate(-45deg); }

  .haupt-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .haupt-nav a {
    padding: 0.9rem 0.9rem;
    border-radius: var(--r-s);
    font-family: var(--display);
    font-size: var(--t-2xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--tinte);
  }

  .kopf-tel { display: none; }
  .kopf-aktion { margin-left: 0; }
}

@media (min-width: 26rem) {
  .feld-reihe { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 30rem) {
  .daten { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.5rem 1.5rem; }
  .daten dd + dt { margin-top: 0; }
}

@media (min-width: 48rem) {
  .raster-2 { grid-template-columns: repeat(2, 1fr); }
  .raster-3 { grid-template-columns: repeat(2, 1fr); }
  .merkmale { grid-template-columns: repeat(4, 1fr); }
  .kennzahlen { grid-template-columns: repeat(4, 1fr); }
  .kennzahlen-2 { grid-template-columns: repeat(2, 1fr); }
  .zwei-spalten { grid-template-columns: 1.05fr 1fr; }
  .zwei-spalten-schmal { grid-template-columns: 1fr 1.55fr; }
  .fuss-raster { grid-template-columns: 1.5fr 1fr 1fr; }
  .feld-reihe-3 { grid-template-columns: repeat(3, 1fr); }
  .wa-knopf { right: 1.75rem; bottom: 1.75rem; }
}

@media (min-width: 62rem) {
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
  .hero-raster { grid-template-columns: 1.2fr 0.8fr; gap: clamp(3rem, 6vw, 6rem); }
  .frise-hinweis { display: none; }
}

/* -----------------------------------------------------------------------------
   20 MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .frise { scroll-snap-type: none; }
  .karte:hover, .wa-knopf:hover, .btn:active { transform: none; }
}

/* -----------------------------------------------------------------------------
   21 IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --blanc: #FFFFFF; --gris-0: #FFFFFF; --gris-1: #FFFFFF; --gris-2: #FFFFFF;
    --linie: #BBBBBB; --linie-fein: #DDDDDD;
    --tinte: #000000; --tinte-2: #FFFFFF; --tinte-3: #FFFFFF; --tinte-4: #999999;
    --grau: #333333;
    --akzent: #000000; --akzent-dunkel: #000000; --akzent-hell: #000000;
    --akzent-blass: #FFFFFF;
    --fond: #FFFFFF; --text: #000000; --text-schwach: #333333;
    --regel: #BBBBBB; --flaeche: #FFFFFF; --akzent-akt: #000000;
  }

  /* Aucune animation sur papier : un fond en cours de transition pourrait
     être capturé avec son ancienne couleur. */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
  }

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

  .kopf { position: static; background: #fff; backdrop-filter: none; border-bottom: 1px solid #000; }
  .wa-knopf, .menu-knopf, .menu-schalter, .haupt-nav, .sprung,
  .frise-hinweis { display: none !important; }

  /* Les surfaces sombres redeviennent du papier : sans cela elles s'impriment
     en aplat noir et le texte blanc disparaît. */
  .band-tief, .stahl-block, .fuss {
    background: #fff !important;
    color: #000 !important;
    --text: #000000; --text-schwach: #333333; --akzent-akt: #000000;
    --regel: #BBBBBB; --flaeche: #FFFFFF;
    border: 1px solid #BBBBBB;
  }
  .band-tief h1, .band-tief h2, .band-tief h3, .band-tief h4,
  .stahl-block h2, .stahl-block h3, .fuss h2,
  .band-tief strong, .fuss a, .fuss p, .fuss address { color: #000 !important; }

  /* Règles à deux classes : elles l'emportent sur les règles print à une
     seule classe, il faut donc les neutraliser nommément. */
  .band-tief .notiz, .stahl-block .notiz { background: #fff; border-color: #BBB; }
  .band-tief .notiz p, .stahl-block .notiz p { color: #000; }
  .band-tief .ergaenzen, .stahl-block .ergaenzen { background: #fff; color: #000; border: 1px solid #999; }
  .band-tief .btn-akzent, .band-tief .btn-primaer, .band-tief .btn-linie,
  .stahl-block .btn-primaer { background: #fff; color: #000; border: 1px solid #000; }

  .band, .seitenkopf, .hero, .fuss { padding-block: 1.2rem; }
  .karte, .notiz, .anfrage-box, .feldsatz, .tabelle-huelle, .merkmale li {
    background: #fff; border-color: #BBB;
  }
  .btn { border: 1px solid #000; color: #000; background: #fff; }
  input, select, textarea { color: #000 !important; background: #fff !important; border-color: #999 !important; }

  .frise { overflow: visible; display: block; }
  .frise > li { padding: 0.4rem 0; border: 0; border-top: 1px solid #DDD; border-radius: 0; }

  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  h1, h2, h3 { page-break-after: avoid; }
  table, figure, .karte { page-break-inside: avoid; }
}