/* ============================================================
   MG BAU, Glasfaser & Tiefbau
   Systeme repris du logo maison : marine #01033A, rouge #E5030B.
   Le logo ne contient aucun bleu ; l'ancienne palette venait de la
   carte de visite et a ete abandonnee le 3 septembre 2026.
   Photographie plein cadre, chrome minimal, tout en allemand.
   ============================================================ */

/* Les polices sont chargees par <link> dans le <head>, pas par @import :
   un @import ne demarre qu'apres le telechargement de cette feuille. */

:root {
  /* -- Couleurs relevees sur le logo maison -- */
  --nacht:      oklch(0.166 0.103 266);   /* #01033A , le fond de marque */
  --nacht-2:    oklch(0.235 0.095 266);   /* cadres et cartes sur le marine */
  --tief:       oklch(0.300 0.105 266);   /* pastilles d'icone */
  --signal:     oklch(0.580 0.237 029);   /* #E5030B , le « BAU », les actions */
  --signal-2:   oklch(0.500 0.204 029);   /* survol , 6,7:1 sous du blanc */
  /* Le rouge du logo ne fait que 3,9:1 sur le gris le plus fonce : sous AA
     pour du petit texte. Les remplissages gardent --signal (le blanc dessus
     passe a 4,8:1), le texte rouge sur fond clair prend celui-ci, 5,0:1. */
  --signal-text: oklch(0.520 0.213 029);
  --hell:       oklch(0.700 0.170 026);   /* le rouge eclairci, 7,0:1 sur le marine */

  /* Neutres teintes vers le marine de marque */
  --papier:     oklch(0.988 0.003 266);
  --papier-2:   oklch(0.962 0.006 266);
  --papier-3:   oklch(0.930 0.009 266);
  --linie:      oklch(0.884 0.013 266);
  --linie-dunkel: oklch(0.310 0.050 266);
  --text:       oklch(0.245 0.036 266);
  --text-leise: oklch(0.478 0.030 266);
  --text-hell:  oklch(0.975 0.005 266);
  --text-hell-leise: oklch(0.815 0.028 266);

  /* -- Espacement, echelle 4pt -- */
  --s-2xs: 4px;  --s-xs: 8px;   --s-sm: 12px;  --s-md: 16px;
  --s-lg: 24px;  --s-xl: 32px;  --s-2xl: 48px; --s-3xl: 72px; --s-4xl: 112px;

  /* -- Typographie : Archivo (la lettre du logo) + Hanken Grotesk -- */
  --schrift-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;

  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-md:  1.0625rem;
  --t-lg:  clamp(1.15rem, 0.95rem + 0.85vw, 1.5rem);
  --t-xl:  clamp(1.7rem, 1.15rem + 2.1vw, 2.6rem);
  --t-2xl: clamp(2.3rem, 1.35rem + 3.6vw, 4.1rem);
  --t-3xl: clamp(2.9rem, 1.5rem + 5.4vw, 5.6rem);

  --breite: 1220px;
  --lesebreite: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; background: var(--papier); color: var(--text);
  font-family: var(--schrift-text); font-size: var(--t-md); line-height: 1.68;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 var(--s-md);
  color: var(--nacht); text-wrap: balance;
  /* L'allemand empile les composes : « Datenschutzerklaerung » depasse un
     ecran de 320px en display. On coupe proprement plutot que de deborder. */
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: var(--t-3xl); font-weight: 900; font-style: italic; letter-spacing: -0.035em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
p  { margin: 0 0 var(--s-md); max-width: var(--lesebreite); overflow-wrap: break-word; hyphens: auto; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; }
a { color: inherit; }

.huelle { width: min(100% - 2 * var(--s-lg), var(--breite)); margin-inline: auto; }
.huelle-breit { width: min(100% - 2 * var(--s-lg), 1480px); margin-inline: auto; }
section { padding-block: var(--s-4xl); }

/* -- Etiquette de section -- */
/* Pas de filet devant l'etiquette. Le petit trait horizontal qui precedait
   chaque intitule se lisait comme un tiret cadratin, la signature meme qu'on
   chasse partout ailleurs dans le texte. La capitale espacee suffit a poser
   l'intitule, et sur mobile le trait restait orphelin quand l'etiquette
   passait sur deux lignes. */
/* L'etiquette n'est plus rouge. Elle ouvrait chaque section de chaque page,
   soit vingt-quatre fois : une couleur employee vingt-quatre fois ne signale
   plus de priorite, elle decore. Le rouge est desormais reserve aux actions.
   Meme raison qui avait fait retirer le filet decoratif qui la precedait. */
.etikett {
  display: block;
  font-family: var(--schrift-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--text-leise);
  margin-bottom: var(--s-lg);
}
.dunkel .etikett { color: var(--text-hell-leise); }

/* ============================ Barre de contact ============================ */
.oben {
  background: var(--nacht); color: var(--text-hell-leise);
  font-size: var(--t-xs); letter-spacing: 0.02em;
}
.oben-innen { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-lg); align-items: center; justify-content: space-between; padding-block: var(--s-xs); }
/* WCAG 2.5.8 demande 24x24 minimum hors liens en ligne dans un paragraphe.
   Les liens de la barre de contact tombaient a 22px de haut. */
.oben a { color: var(--text-hell); text-decoration: none; display: inline-flex; align-items: center; min-height: 26px; }
.oben a:hover { text-decoration: underline; text-underline-offset: 3px; }
.oben-liste { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-lg); align-items: center; }

/* ============================ En-tete ============================ */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--papier) 93%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); padding-block: var(--s-sm); }
.marke { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }

/* La mention est POSEE A COTE du logo, pas dedans, et hors du lien : c'est une
   legende de page, pas une partie de la marque. Le logo reste donc identique a
   celui de la facture de Mohamed, qui n'a rien a changer de ses documents.
   Hors du <a> aussi pour ne pas doubler le texte accessible du lien, qui dit
   deja « MG BAU, Glasfaser und Tiefbau, zur Startseite ». */
.marke-block { display: flex; align-items: center; flex-shrink: 0; }
.marke-zusatz {
  display: none;                 /* voir les fenetres ci-dessous */
  margin: 0 0 0 var(--s-md);
  padding-left: var(--s-md);
  /* Un filet de 1 px, pas un bandeau : il separe la legende de la marque sans
     se donner l'air d'en faire partie. C'est cette separation qui fait que la
     mention ne se lit pas comme la suite du logo. */
  border-left: 1px solid var(--linie);
  font-family: var(--schrift-display);
  /* 11 px, sous l'echelle : la mention doit rester nettement en dessous des
     13 px des liens de menu, sinon elle leur dispute le regard. */
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; line-height: 1.45;
  color: var(--text-leise); white-space: nowrap;
}
/* La mention n'apparait que la ou la rangee peut l'absorber, mesure a l'appui :
   elle ajoute 118 px au bloc de marque, et le menu horizontal complet en fait
   744. En dessous de 1080 px les deux ne tiennent plus, le menu se casse sur
   deux lignes et l'en-tete passe de 87 a 99 px. Plus bas, a partir de 939 px,
   le burger a remplace le menu et la place revient, jusqu'a 561 px ou le
   burger et le logo la reprennent. */
@media (min-width: 561px) and (max-width: 939px) { .marke-zusatz { display: block; } }
@media (min-width: 1080px)                       { .marke-zusatz { display: block; } }

/* Le logo est inline : une seule source SVG, colorisee par le contexte.
   Sur papier c'est marine + rouge ; sur le marine, ivoire + rouge eclairci,
   parce que le rouge du logo ne fait que 4,0:1 sur son propre marine. */
/* 62 px et pas 78 : l'en-tete est collant, sa hauteur est prise en permanence,
   et le logo etait seul a l'imposer (78 contre 52 pour le bouton, le plus haut
   des autres elements). Pas 52 non plus, ce qui l'alignerait pile sur la nav :
   les capitales de « MG BAU » tomberaient a 12 px, sous les 13 px des liens de
   menu, et le nom se lirait plus petit que « LEISTUNGEN ». A 62 elles font 14. */
.marke-zeichen { height: 62px; width: auto; display: block;
                 --logo-dunkel: var(--nacht); --logo-akzent: var(--signal); }
.fuss-zeichen  { height: 70px; width: auto; display: block;
                 --logo-dunkel: var(--text-hell); --logo-akzent: var(--hell); }

.nav { display: flex; align-items: center; gap: var(--s-lg); }
.nav a {
  font-family: var(--schrift-display);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; color: var(--text-leise);
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.nav a:hover { color: var(--signal-text); border-bottom-color: var(--signal); }
.nav a[aria-current="page"] { color: var(--nacht); border-bottom-color: var(--signal); }
.nav a.knopf { color: #fff; border-bottom: 1px solid transparent; letter-spacing: 0.09em; }
.nav a.knopf:hover { color: #fff; border-bottom-color: transparent; }

/* ============================ Boutons ============================ */
.knopf {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 14px 26px; text-decoration: none;
  background: var(--signal); color: #fff;
  border: 1px solid transparent; min-height: 48px;
  transition: background .18s, transform .18s;
}
.knopf:hover { background: var(--signal-2); transform: translateY(-1px); }
.knopf-leer { background: transparent; color: var(--text-hell); border-color: color-mix(in oklch, var(--text-hell) 45%, transparent); }
.knopf-leer:hover { background: color-mix(in oklch, var(--text-hell) 12%, transparent); }
.knopf-linie { background: transparent; color: var(--nacht); border-color: var(--nacht); }
.knopf-linie:hover { background: var(--nacht); color: #fff; }

/* ============================ Hero plein cadre ============================ */
.buehne {
  position: relative; isolation: isolate;
  min-height: min(88vh, 820px);
  display: flex; align-items: flex-end;
  padding-block: var(--s-4xl) var(--s-3xl);
  background: var(--nacht); color: var(--text-hell); overflow: hidden;
}
.buehne-mit-anspruch { padding-bottom: calc(var(--s-3xl) + 56px); }
.buehne-bild {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.72) contrast(1.04);
}
.buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Le marine passe par le token : ecrit en dur, il avait rate la bascule
     de palette du 3 septembre 2026 et gardait le bleu de la carte. */
  background:
    linear-gradient(96deg, color-mix(in oklch, var(--nacht) 95%, transparent) 0%, color-mix(in oklch, var(--nacht) 88%, transparent) 42%, color-mix(in oklch, var(--nacht) 44%, transparent) 80%, color-mix(in oklch, var(--nacht) 14%, transparent) 100%),
    linear-gradient(to top, color-mix(in oklch, var(--nacht) 85%, transparent) 0%, transparent 42%);
}
.buehne h1 { color: var(--text-hell); max-width: 15ch; margin-bottom: var(--s-lg); }
.buehne p { color: var(--text-hell-leise); font-size: var(--t-lg); max-width: 39ch; }
.buehne .etikett { color: var(--text-hell-leise); }
.buehne-inhalt { max-width: 780px; }
/* 34rem plafonne le groupe : sans cela il remplit son conteneur, et sur la
   404 ou celui-ci fait toute la largeur les boutons s'etiraient a 604 px,
   deux bandeaux. 34rem vaut 544 px, soit deux fois le plus large des libelles
   (261 px pour « Referenzen ansehen ») plus l'ecart : c'est la plus petite
   valeur ou les deux tiennent cote a cote SANS etre comprimes, donc sans que
   min-width ne rompe l'egalite. */
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-sm);
                  margin-top: var(--s-xl); max-width: 34rem; }
/* Les boutons d'un groupe se partagent la ligne A EGALITE, et passent en
   pleine largeur des qu'ils n'y tiennent plus.

   base 0 plus grow 1 : chacun recoit la meme part, d'ou l'egalite. Sans quoi
   la part se calcule sur la largeur du texte et « Referenzen ansehen » sortait
   dix pixels plus large que « Kapazität anfragen », un ecart juste assez petit
   pour se lire comme un defaut.

   min-width: max-content : un bouton ne se laisse jamais comprimer sous son
   texte. Quand les deux n'y tiennent plus, ils passent a la ligne et occupent
   toute la largeur, sans aucun point de rupture.

   Pas de seuil en pixels de fenetre, justement : c'est le CONTENEUR qui decide.
   Il fait 780 px dans le heros et 574 px dans la colonne de l'appel a contact,
   et le meme seuil ne pouvait pas convenir aux deux. */
.buehne-knoepfe .knopf { flex: 1 1 0; min-width: max-content; justify-content: center; }
/* Empiles, les deux boutons prennent toute la largeur. A la taille du contenu
   ils faisaient 261 et 251 px pour 342 disponibles : deux bords droits qui se
   ratent de 10 px, ce qui se lit comme un defaut et non comme un choix. La
   hierarchie tient au remplissage, plein pour l'action principale et filet
   pour la seconde, pas a la largeur. Le bouton du formulaire de contact est
   deja a 100 %, le heros s'aligne dessus.
   600 px et pas 572, la largeur ou ils cessent de tenir cote a cote : entre
   les deux ils tiendraient, mais a l'etroit. */
@media (max-width: 600px) {
  .buehne-knoepfe { display: grid; grid-template-columns: 1fr; }
  /* Tout bouton d'appel a l'action prend la largeur, pas seulement ceux du
     heros. La regle precedente ne visait que .buehne-knoepfe, un conteneur
     qui n'existe que sur l'accueil : la 404, les pages Leistungen et
     Referenzen gardaient des boutons a la largeur de leur texte, avec des
     bords droits en dents de scie et une cible plus petite.
     La nav est exclue : elle a sa propre mise en colonne. */
  .knopf { width: 100%; justify-content: center; }
  .nav .knopf { width: auto; }
  /* dans un groupe, c'est le flex ci-dessus qui gouverne */
  .buehne-knoepfe .knopf { width: auto; }
}

/* Le faisceau de fibre : le motif de la carte de visite, redessine en SVG.
   Il jaillit du bord bas, donc il sort de la tranchee au lieu de flotter. */
.buehne-faser {
  /* Le faisceau occupe le quart haut-droit : il croise le titre, jamais le
     paragraphe : des brins clairs sur du texte courant, c'est illisible. */
  position: absolute; right: -5%; top: 0; width: min(64%, 940px);
  z-index: -1; mix-blend-mode: screen; pointer-events: none;
}
/* ============================ Menu burger ============================ */
.burger {
  display: none; align-items: center; gap: var(--s-xs);
  background: none; border: 0; cursor: pointer; padding: 10px 4px;
  min-height: 48px; color: var(--nacht);
  font-family: var(--schrift-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.burger-strich, .burger-strich::before, .burger-strich::after {
  display: block; width: 24px; height: 2px; background: currentColor;
  transition: transform .22s, opacity .18s;
}
.burger-strich { position: relative; }
.burger-strich::before, .burger-strich::after { content: ''; position: absolute; left: 0; }
.burger-strich::before { top: -7px; }
.burger-strich::after  { top: 7px; }
.burger[aria-expanded="true"] .burger-strich { background: transparent; }
.burger[aria-expanded="true"] .burger-strich::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-strich::after  { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .burger-strich, .burger-strich::before, .burger-strich::after { transition: none; }
}

@media (max-width: 900px) {
  .buehne-faser { width: 128%; right: -34%; top: -4%; opacity: .6; }
}

/* Le bandeau de la carte : bouclier + ZUVERLAESSIG. SAUBER. PROFESSIONELL. */
.anspruch {
  position: absolute; inset: auto 0 0 0;
  background: color-mix(in oklch, var(--nacht) 72%, transparent);
  border-top: 1px solid color-mix(in oklch, var(--text-hell) 14%, transparent);
  backdrop-filter: blur(6px);
}
.anspruch-innen { display: flex; align-items: center; gap: var(--s-sm); padding-block: 15px; }
.anspruch svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--hell); fill: none; stroke-width: 1.7; }
.anspruch span {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--text-hell);
}
@media (max-width: 560px) { .anspruch span { letter-spacing: .12em; font-size: .72rem; } }

/* Hero court, pour les pages interieures */
.buehne-kurz { min-height: min(56vh, 500px); padding-block: var(--s-3xl) var(--s-2xl); }
.buehne-kurz h1 { font-size: var(--t-2xl); max-width: 18ch; }

/* ============================ Bande de declaration ============================ */
.aussage { text-align: center; padding-block: var(--s-4xl); }
.aussage p {
  max-width: 26ch; margin-inline: auto;
  font-family: var(--schrift-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.14;
  letter-spacing: -0.03em; color: var(--nacht);
}
/* Les trois mots restent marine : en rouge plein cadre, l'accent devient
   la dominante. Seuls les points prennent le rouge, comme la ponctuation
   de la carte de visite. */
.aussage p em { font-style: italic; font-weight: 900; }
.aussage p .pkt { font-style: normal; color: var(--signal); }
.aussage p.aussage-text { margin-top: var(--s-lg); max-width: 56ch; margin-inline: auto; color: var(--text-leise); font-family: var(--schrift-text); font-size: var(--t-md); font-weight: 400; letter-spacing: normal; }

/* ============================ Zones sombres ============================ */
.dunkel { background: var(--nacht); color: var(--text-hell); }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: var(--text-hell); }
.dunkel p { color: var(--text-hell-leise); }
.grau { background: var(--papier-2); }

/* ============================ Leistungen ============================ */
.leistungen { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
@media (min-width: 760px)  { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .leistungen { grid-template-columns: repeat(4, 1fr); } }
.leistung { background: var(--papier); padding: var(--s-2xl) var(--s-lg) var(--s-2xl) 0; }
.leistung:not(:first-child) { padding-left: var(--s-lg); }
@media (max-width: 1119px) { .leistung, .leistung:not(:first-child) { padding-inline: var(--s-lg); } }
.leistung-zeichen {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--tief); display: grid; place-items: center;
  margin-bottom: var(--s-lg);
}
.leistung-zeichen svg { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.leistung h3 { margin-bottom: var(--s-xs); }
.leistung p { font-size: var(--t-sm); color: var(--text-leise); }

/* ============================ Grilles et images ============================ */
.raster { display: grid; gap: var(--s-xl); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.paar-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
@media (max-width: 520px) { .paar-bilder { grid-template-columns: 1fr; } }
.paar { display: grid; gap: var(--s-3xl); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.rahmen { position: relative; overflow: hidden; background: var(--nacht-2); }
.rahmen-hoch  { aspect-ratio: 4 / 5; }
.rahmen-quer  { aspect-ratio: 3 / 2; }
.rahmen-breit { aspect-ratio: 16 / 9; }
figure { margin: 0; }
figcaption { font-size: var(--t-xs); color: var(--text-leise); margin-top: var(--s-xs); }
.dunkel figcaption { color: var(--text-hell-leise); }

/* -- Bande photo pleine largeur, texte pose dessus -- */
.streifen { position: relative; isolation: isolate; overflow: hidden; background: var(--nacht); }
.streifen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.streifen::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg, color-mix(in oklch, var(--nacht) 93%, transparent) 0%, color-mix(in oklch, var(--nacht) 78%, transparent) 48%, color-mix(in oklch, var(--nacht) 42%, transparent) 100%); }
.streifen .huelle { position: relative; padding-block: var(--s-4xl); }

/* ============================ Chiffres ============================ */
.kennzahlen {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
}
.kennzahl { padding: var(--s-xl) var(--s-lg) var(--s-xl) 0; }
.kennzahl:not(:first-child) { padding-left: var(--s-lg); border-left: 1px solid color-mix(in oklch, var(--text-hell) 26%, transparent); }
@container (max-width: 420px) { .kennzahl, .kennzahl:not(:first-child) { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in oklch, var(--text-hell) 22%, transparent); } .kennzahl:first-child { border-top: 0; } }
/* Les quatre chiffres avaient la meme taille et la meme couleur : quatre
   valeurs traitees pareil ne hierarchisent rien. Un indicateur porte, les
   trois autres l'appuient. Le principal est la duree de chantier continue,
   le signal qui compte pour un donneur d'ordre : on est reste dix-huit mois. */
.zahl {
  font-family: var(--schrift-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.8rem); line-height: 0.94;
  color: var(--text-hell); font-variant-numeric: tabular-nums; letter-spacing: -0.035em;
}
.kennzahl-haupt .zahl {
  font-size: clamp(2.8rem, 1.5rem + 4.2vw, 4.4rem);
  color: var(--hell);
}
.zahl-text { font-size: var(--t-sm); color: var(--text-hell-leise); margin-top: var(--s-xs); max-width: 24ch; }

/* ============================ Equipe ============================ */
.person { }
.person .rahmen { aspect-ratio: 4 / 5; margin-bottom: var(--s-md); }
.person .rahmen img { filter: saturate(0.92); }
.person h3 { margin-bottom: 2px; font-size: var(--t-md); }
/* Ni le role sous un nom ni le fil d'etapes ne signalent une priorite ou un
   etat : c'est le meme emploi decoratif du rouge que les etiquettes de section.
   Le rouge ne reste que la ou il porte une fonction : survol, page courante,
   erreur de formulaire, et les liens. */
.person .rolle {
  font-family: var(--schrift-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-leise);
}
.dunkel .person .rolle { color: var(--text-hell-leise); }
.person p { font-size: var(--t-sm); color: var(--text-leise); margin-top: var(--s-xs); }
.dunkel .person p { color: var(--text-hell-leise); }

/* ============================ Galerie ============================ */
/* Un mur de photos : ratio naturel, maconnerie en colonnes CSS, aucune legende
   sous les vignettes. Le detail est dans la grande vue. */
.galerie-schritte {
  font-family: var(--schrift-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-leise);
  margin-top: var(--s-md); max-width: none;
}
.galerie { columns: 3; column-gap: var(--s-sm); margin-top: var(--s-2xl); }
@media (max-width: 980px) { .galerie { columns: 2; } }
@media (max-width: 560px) { .galerie { columns: 1; } }

.galerie-feld {
  display: block; width: 100%; padding: 0; border: 0; background: var(--nacht-2);
  margin: 0 0 var(--s-sm); break-inside: avoid;
  cursor: zoom-in; font: inherit; color: inherit; overflow: hidden; position: relative;
}
.galerie-feld img {
  display: block; width: 100%; height: auto;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .4s;
}
.galerie-feld::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in oklch, var(--nacht) 0%, transparent);
  transition: background .45s;
}
.galerie-feld:hover img, .galerie-feld:focus-visible img { transform: scale(1.05); }
.galerie-feld:hover::after, .galerie-feld:focus-visible::after {
  background: color-mix(in oklch, var(--nacht) 26%, transparent);
}

/* Apparition en cascade, posee par le script et retiree a l'entree en champ */
.galerie-warte { opacity: 0; transform: translateY(14px); }
.galerie-feld { transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .galerie-warte { opacity: 1; transform: none; }
  .galerie-feld img { transition: none; }
}

/* -- Grande vue -- */
.leuchtkasten {
  border: 0; padding: 0; max-width: min(1100px, 94vw); max-height: 92vh;
  background: var(--nacht); color: var(--text-hell);
}
.leuchtkasten::backdrop { background: color-mix(in oklch, var(--nacht) 88%, transparent); }
.leuchtkasten img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
.lk-text { padding: var(--s-md) var(--s-lg); margin: 0; font-size: var(--t-sm); color: var(--text-hell-leise); max-width: none; }
.lk-text strong { display: block; color: var(--text-hell); font-weight: 600; }
.leuchtkasten button {
  position: absolute; border: 0; cursor: pointer; color: var(--text-hell);
  background: color-mix(in oklch, var(--nacht) 70%, transparent);
  font-family: var(--schrift-display); line-height: 1;
  min-width: 48px; min-height: 48px;
}
.lk-schliessen { top: 0; right: 0; font-size: 30px; }
.lk-pfeil { top: 50%; transform: translateY(-100%); font-size: 34px; }
.lk-zurueck { left: 0; }
.lk-vor { right: 0; }
.leuchtkasten button:hover { background: var(--signal); }

/* ============================ Tableau de references ============================ */
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabelle th, .tabelle td { text-align: left; padding: var(--s-md) var(--s-md) var(--s-md) 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.dunkel .tabelle th, .dunkel .tabelle td { border-bottom-color: var(--linie-dunkel); }
.tabelle th { font-family: var(--schrift-display); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; font-size: var(--t-xs); color: var(--text-leise); }
.dunkel .tabelle th { color: var(--text-hell-leise); }
.tabelle td:first-child { font-weight: 600; white-space: nowrap; }
/* Les annees s'alignent en colonne, sinon « 2025 » et « 2026 » dansent
   d'une ligne a l'autre. Pas d'alignement a droite : « Marz bis Juli
   2026 » est une periode ecrite en mots, pas un nombre. */
.tabelle td:last-child { font-variant-numeric: tabular-nums; }

@media (max-width: 660px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle tr { border-bottom: 1px solid var(--linie); padding-block: var(--s-md); }
  .dunkel .tabelle tr { border-bottom-color: var(--linie-dunkel); }
  .tabelle td { border: 0; padding: 0; }
  .tabelle td:first-child { white-space: normal; font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--s-2xs); }
  .tabelle td:last-child { font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; margin-top: var(--s-xs); opacity: .8; }
}

/* ============================ Formulaire ============================ */
.feld { display: block; margin-bottom: var(--s-md); }
.feld span { display: block; font-family: var(--schrift-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-leise); margin-bottom: var(--s-2xs); }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: var(--t-sm);
  padding: 13px 14px; border: 1px solid var(--linie); background: #fff; color: var(--text);
}
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }

/* ---- Formulaire de contact : erreurs, consentement, confirmation ---- */
.anfrage { background: var(--papier-2); padding: var(--s-xl); }
.anfrage h3 { margin-bottom: var(--s-lg); }
.anfrage .knopf { width: 100%; justify-content: center; border: 0; cursor: pointer; }

/* Le pot de miel doit rester dans le flux pour que les robots le remplissent :
   un display:none est trop souvent ignore par eux et par les gestionnaires de
   mots de passe. Hors ecran, il est invisible sans etre absent. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.feld-fehler input, .feld-fehler textarea { border-color: var(--signal); border-width: 2px; }
.feld-hinweis {
  display: block; margin-top: var(--s-2xs); font-style: normal;
  font-size: var(--t-xs); color: var(--signal-text);
}
.feld-fussnote { font-size: var(--t-xs); color: var(--text-leise); margin-top: var(--s-md); }

.einwilligung { display: flex; gap: var(--s-sm); align-items: flex-start; margin-bottom: var(--s-md); }
/* 20px + 2px de bordure, et le label entier reste cliquable : la cible depasse
   donc largement les 24px demandes par WCAG 2.5.8. */
.einwilligung input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--signal); }
.einwilligung span { font-size: var(--t-sm); color: var(--text-leise); line-height: 1.5; }
.einwilligung a { color: var(--signal-text); }

.erfolg, .misserfolg {
  padding: var(--s-md); margin-bottom: var(--s-lg);
  font-size: var(--t-sm); line-height: 1.55;
}
.erfolg    { background: color-mix(in oklch, var(--nacht) 8%, transparent); color: var(--text); }
.misserfolg{ background: color-mix(in oklch, var(--signal) 10%, transparent); color: var(--signal-text); }

/* ============================ Pied ============================ */
.fuss { background: var(--nacht); color: var(--text-hell-leise); padding-block: var(--s-3xl) var(--s-xl); font-size: var(--t-sm); }
.fuss-raster { display: grid; gap: var(--s-2xl); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
@media (min-width: 1000px) { .fuss-raster { grid-template-columns: repeat(4, 1fr); } }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
/* Cibles tactiles : les liens du pied faisaient 22px de haut, sous le minimum
   de 44px (WCAG 2.5.8). En blocs ils atteignent la hauteur requise. */
.fuss-liste a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss a { color: var(--text-hell); text-decoration-color: color-mix(in oklch, var(--text-hell) 40%, transparent); text-underline-offset: 3px; }
.fuss a:hover { text-decoration-color: var(--hell); }
.fuss h3 { font-family: var(--schrift-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-hell); margin: 0 0 var(--s-sm); }

/* ============================ Accessibilite ============================ */
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.dunkel :focus-visible, .fuss :focus-visible, .buehne :focus-visible, .oben :focus-visible { outline-color: var(--hell); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: var(--s-md); top: var(--s-md); z-index: 100; background: var(--signal); color: #fff; padding: var(--s-sm) var(--s-md); }

/* ============================ Petit ecran ============================ */

/* 939 et pas 900 : entre 901 et 939 px le menu horizontal ne tient plus sur
   une ligne, il se cassait en deux et l'en-tete passait de 87 a 99 px.
   Defaut anterieur a la mention, trouve en la mesurant. */
@media (max-width: 939px) {
  .kopf-innen { flex-wrap: wrap; gap: var(--s-xs) var(--s-md); padding-block: var(--s-xs) 0; }
  .marke-zeichen { height: 56px; }
  .burger { display: inline-flex; }
  .nav {
    order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; border-top: 1px solid var(--linie);
  }
  /* Repliee seulement quand le script a pu poser le bouton */
  .js .nav { display: none; }
  .js .nav.nav-offen { display: flex; }
  .nav a {
    font-size: var(--t-sm); min-height: 52px; border-bottom: 1px solid var(--linie);
    border-left: 0; padding-inline: 2px;
  }
  .nav a[aria-current="page"] { color: var(--signal-text); }
  .nav a.knopf { justify-content: center; margin-block: var(--s-md); border-bottom: 0; }
  section { padding-block: var(--s-3xl); }
  /* Plafond en pixels : sans lui, un viewport haut (tablette en portrait,
     fenetre etroite sur grand ecran) etire le hero a plusieurs milliers de px. */
  .buehne { min-height: min(74vh, 640px); }
  .buehne-kurz { min-height: min(52vh, 420px); }
  .paar { gap: var(--s-xl); }
}