/* ══════════════════════════════════════════════════════════════════════════════
   CLIMORA GmbH — Produktions-Stylesheet
   Herkunft: Exploration «Das Rad, in dem alles läuft» (c-rad.html, Runde 10.08.2026),
   vom Kunden am 10.08. gewählt. Übernommen #633.
   Schriften self-hosted (nDSG: kein Google-CDN, web-engine/doktrin/website-launch.md B2).
   Die Vorschau-Mechanik (Mitautor-Regler .mr-*, Konzept-Tag) ist bewusst NICHT übernommen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ---------- 1 · Schriften (lokal) ---------- */
/* Familjen Grotesk 400 latin-ext */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/familjen-grotesk-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Familjen Grotesk 400 latin */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/familjen-grotesk-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Familjen Grotesk 500 latin-ext */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/familjen-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Familjen Grotesk 500 latin */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/familjen-grotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Familjen Grotesk 600 latin-ext */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/familjen-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Familjen Grotesk 600 latin */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/familjen-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Familjen Grotesk 700 latin-ext */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Familjen Grotesk 700 latin */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 500 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 500 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 600 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 600 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 700 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 700 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- 2 · Basis aus der gewählten Exploration ---------- */

/* ═════════════════════════════════════════════════════════════════════════════
   CLIMORA GmbH · Konzept C «Das Rad, in dem alles läuft»
   Weiss ist der Grund. Blau #327BDF ist die einzige Farbe. Die Tiefe ist
   dasselbe Blau, dunkel gefahren (gleicher Farbton, 215 Grad).
   Kein Violett, kein Fremdton: was nicht aus dem Windrad kommt, ist hier keine
   Farbe.
   ═════════════════════════════════════════════════════════════════════════════ */
:root{
  --akzent:#327BDF;            /* Marken-Blau, vom Mitautor-Regler verstellbar */
  /* Dasselbe Blau, eine Spur satter: NUR fuer weisse Schrift auf blauer Flaeche
     und fuer blaue Schrift auf Weiss. #327BDF steht auf Weiss bei 4.2:1 und
     verfehlt damit die Lesbarkeits-Schwelle knapp. Fuer Linien, Marken und den
     Koerper des Rades bleibt das reine Marken-Blau. */
  --akzent-satt:#2A6ACB;
  --blau-tief:#1E5FB4;
  --marine:#0F2E5C;            /* dasselbe Blau in die Tiefe gefahren */
  --weiss:#FFFFFF;
  --papier:#F3F7FD;            /* Marken-Blau als hauchdünner Schleier */
  --tinte:#12161C;
  --grau:#5C6675;
  --linie:rgba(18,22,28,.12);
  --font-display:'Familjen Grotesk','Helvetica Neue',sans-serif;
  --font-text:'IBM Plex Sans','Helvetica Neue',sans-serif;
  --mr-skala:1; --mr-tempo:1; --mr-luft:1; --mr-laufweite:0em;
  --rad-tiefe:22;              /* Mitautor-Griff: Schichten des Körpers */
  --luft:calc(clamp(74px,8vw,132px) * var(--mr-luft,1));
  --rand:clamp(20px,5vw,64px);
}
/* Wo der Browser mischen kann, folgt der satte Ton der Farbe, die der Kunde im
   Regler waehlt. Sonst bleibt der statische Wert oben stehen. */
@supports (color: color-mix(in srgb, #000, #fff)){
  :root{ --akzent-satt: color-mix(in srgb, var(--akzent) 86%, #06172E); }
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--mr-skala,1)); scroll-behavior:smooth}
body{
  margin:0; background:var(--weiss); color:var(--tinte);
  font-family:var(--font-text); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,.disp{
  font-family:var(--font-display); font-weight:700; margin:0; line-height:1.01;
  letter-spacing:calc(-.024em + var(--mr-laufweite,0em)); text-wrap:balance;
}
.hg{max-width:1400px; margin:0 auto; padding-inline:var(--rand)}

/* Übertitel: gross genug, um gelesen zu werden. */
.kicker{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-family:var(--font-text); font-size:clamp(.95rem,1.15vw,1.16rem);
  font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--akzent-satt);
}
.kicker::before{content:""; width:34px; height:3px; background:var(--akzent); flex:0 0 auto}

/* ── NAV · Wegweiser-Leiste ─────────────────────────────────────────────── */
.nav-leiste{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:20px;
  padding:14px var(--rand); background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--linie);
}
.nav-marke{display:flex; align-items:center; gap:13px; text-decoration:none}
.nav-marke img{height:46px; width:46px}
.nav-wort{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  letter-spacing:-.015em; color:var(--tinte); line-height:1;
}
.nav-wort small{
  display:block; font-family:var(--font-text); font-size:.62rem; font-weight:600;
  letter-spacing:.22em; color:var(--grau); margin-top:4px;
}
.nav-anker{position:relative; display:flex; gap:30px; margin-left:auto; margin-right:26px}
.nav-anker a{
  font-size:1rem; font-weight:600; text-decoration:none; color:var(--tinte);
  padding:8px 0; transition:color .22s;
}
.nav-anker a:hover{color:var(--akzent)}
.nav-kante{
  position:absolute; left:0; bottom:-16px; height:3px; width:0;
  background:var(--akzent); pointer-events:none;
}
.nav-tel{
  font-weight:600; font-size:1rem; text-decoration:none; white-space:nowrap;
  color:#fff; background:var(--akzent-satt); padding:13px 22px;
  box-shadow:0 8px 18px -14px rgba(15,46,92,.9); transition:transform .2s, background .2s;
}
.nav-tel:hover{transform:translateY(-2px); background:var(--marine)}
.nav-wort small{white-space:nowrap}

/* ── Der Leistungen-Fächer (#645): vier Bereiche unter EINEM Nav-Punkt ──────
   Esteban: die Leiste war mit 7 Links überladen. Hover/Fokus öffnet per CSS,
   der Klick-Schalter (seite.js) deckt Touch/Tablet, Escape und Aussenklick. */
.nav-gruppe{position:relative}
.nav-gruppe-taste{
  display:flex; align-items:center; gap:8px; font-family:inherit;
  font-size:1rem; font-weight:600; color:var(--tinte); background:none;
  border:0; padding:8px 0; cursor:pointer; transition:color .22s;
}
.nav-gruppe-taste:hover{color:var(--akzent)}
.nav-gruppe-taste.ist-hier{color:var(--akzent-satt)}
.ng-pfeil{
  width:10px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .22s;
}
.nav-gruppe:hover .ng-pfeil, .nav-gruppe:focus-within .ng-pfeil,
.nav-gruppe.offen .ng-pfeil{transform:rotate(180deg)}
/* Unsichtbare Brücke NUR solange offen: die Maus quert die Lücke zwischen
   Taste und Fächer, ohne dass das Hover abreisst. Geschlossen existiert sie
   nicht und stiehlt darunterliegendem Inhalt keine Klicks. */
.nav-gruppe:hover::after, .nav-gruppe:focus-within::after, .nav-gruppe.offen::after{
  content:""; position:absolute; top:100%; left:-20px; right:-20px; height:14px;
}
.nav-faecher{
  position:absolute; top:calc(100% + 12px); left:-22px; min-width:270px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  border:1px solid var(--linie); box-shadow:0 30px 60px -34px rgba(15,46,92,.55);
  padding:8px 0; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s, transform .22s;
}
.nav-gruppe:hover .nav-faecher, .nav-gruppe:focus-within .nav-faecher,
.nav-gruppe.offen .nav-faecher{opacity:1; transform:translateY(0); pointer-events:auto}
.nav-faecher a{
  display:flex; align-items:baseline; gap:14px; padding:11px 22px;
  font-size:1rem; font-weight:600; color:var(--tinte); text-decoration:none;
  transition:background .15s, color .15s;
}
.nav-faecher a:hover{background:var(--papier); color:var(--akzent)}
.nav-faecher .nf-nr{
  font-family:var(--font-text); font-size:.76rem; font-weight:600;
  letter-spacing:.08em; color:var(--akzent-satt);
}
.nav-faecher a[aria-current="page"]{color:var(--akzent-satt)}
@media (prefers-reduced-motion: reduce){
  .nav-faecher, .ng-pfeil{transition:none}
}
@media(max-width:900px){ .nav-anker{display:none} .nav-marke img{height:42px;width:42px} }
@media(max-width:560px){
  .nav-leiste{padding:12px 18px; gap:12px}
  .nav-wort{font-size:1.3rem}
  .nav-wort small{font-size:.55rem; letter-spacing:.12em}
  .nav-tel{padding:12px 16px; font-size:.95rem}
}

/* ── HERO · «Der Climora-Blick» (#682, Vollbild seit Estebans zweiter Runde) ─
   Das Bild IST der Hero-Hintergrund: die Blick-Buehne fuellt den ganzen
   Viewport, die Aussage liegt links auf einem weichen Papier-Schleier
   darauf. Der Roentgen-Pinsel arbeitet ueber die GANZE Flaeche (auch unter
   dem Text), und im aufgedeckten Bild erscheinen die fuenf Bereiche als
   klickbare Marken an ihren echten Bauteilen (Kanal, Klimageraet, Rohre,
   Bodenheizung) - die 01-05-Ordnung der Site, neu verankert.
   Mechanik: Canvas 2D in index.html, kein WebGL. */
#hero{
  position:relative; overflow:hidden;
  min-height:calc(100svh - 75px);
  display:flex; align-items:center;
  /* Der Fuss-Abstand ist die Hoehe der Naht-Kurve plus Luft, und er gilt auf
     JEDER Breite (#708, Esteban: «auf dem Laptop im Hero sind die Referenzen
     wie frueher auf Mobile vom welligen Band abgeschnitten»). #bereiche zieht
     sich per negativem margin-top clamp(72px,10vw,132px) ueber den Hero; wo
     der Hero-Inhalt mittig steht und der Bildschirm flach ist, landet das
     Logo-Band als unterstes Element genau darin. Gemessen an der gebauten
     Seite: 1280x720 = 76 px Ueberlappung, 1440x800 = 53, 1512x850 = 30, erst
     ab 1920x1080 laeuft es frei. Der Fix von Runde 1 sass nur im 1000er-Block
     und deckte damit ausgerechnet die Laptop-Klasse nicht ab. */
  padding-block:clamp(26px,4vh,54px) calc(clamp(72px,10vw,132px) + 14px);
}
/* Vollbild weicht der Cursor dem Zeiger-Ring nur, wenn der Ring auch
   gerechnet wird (Review-Fix #682); Links behalten ihren Zeiger. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  #hero{cursor:none}
  #hero a{cursor:pointer}
}

/* Die Blick-Buehne fuellt den Hero */
.blick{position:absolute; inset:0; margin:0}
.blick img, .blick canvas{position:absolute; inset:0; width:100%; height:100%}
.blick img{object-fit:cover; display:block}
.blick canvas{pointer-events:none}

/* Papier-Schleier: traegt den Text links, laesst das Bild rechts frei */
.blick-schleier{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(243,247,253,.97) 0%, rgba(243,247,253,.9) 26%,
    rgba(243,247,253,.55) 46%, rgba(243,247,253,0) 64%)}

/* Text liegt AUF der Buehne */
#hero .hg{position:relative; z-index:3; width:100%}
.hero-kopf{max-width:620px}
.hero-beleg{margin:26px 0 0; color:var(--grau); font-size:.95rem; max-width:60ch;
  display:flex; align-items:center; gap:13px}
.hero-beleg b{color:var(--tinte); font-weight:600}
/* Muhas Kopf als runder Ausschnitt an der Gefuehrt-von-Zeile (#682) */
/* Seit #708 zeigt hier `muhamed-avatar.webp`, ein quadratischer Kopf-Zuschnitt
   aus dem Portrait (Quellfeld 140,20 bis 600,480). Vorher lief das ganze
   Hochformat durch einen Rund-Ausschnitt: ein 640x959-Bild in ein 44er-Rund
   gedeckt ergibt 44x66, sein Kopf beginnt bei Quellzeile 95 und landete damit
   knapp 4 Punkte unter der Oberkante - genau dort, wo die Rundung schon
   einbiegt, also war der Scheitel angeschnitten (Esteban #708, dreimal
   gemeldet). Kein Ausschnitt-Prozentwert loest das, weil die Breite bei
   `cover` voll gezeigt wird und der Kopf darum immer klein und oben sitzt.
   Die Loesung ist das Asset, nicht die Regel: der Avatar ist quadratisch,
   also stimmt 50/50 in jeder Groesse. */
.beleg-kopf{flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  object-fit:cover; object-position:50% 50%;
  box-shadow:0 0 0 2px #fff, 0 8px 18px -10px rgba(15,46,92,.8)}

/* Die Vertrauens-Rondelle: Stationen als echte Logos + Nachweise/Projekte als
   Wortmarken, im langsamen Lauf (pausiert unter der Hand; reduced-motion =
   stehende Reihe). ZWEI identische Haelften -> -50% trifft exakt die Naht,
   kein Sprung (der #682-Bug der ersten Fassung: gap-basierte Haelften waren
   ungleich breit). */
.vertraut{margin:20px 0 0; max-width:520px}
.vertraut-band{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.vertraut-zug{display:flex; width:max-content; padding-block:5px}
.vertraut-halb{display:flex; align-items:center; flex:0 0 auto}
.vertraut-halb a{flex:0 0 auto; display:inline-flex; align-items:center;
  margin-right:30px; text-decoration:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:.88rem; color:rgba(92,102,117,.75); transition:color .2s, opacity .2s}
.vertraut-halb a:hover{color:var(--akzent-satt)}
.vertraut-halb img{display:block; height:17px; width:auto;
  opacity:.55; filter:grayscale(1); transition:opacity .2s, filter .2s}
.vertraut-halb a:hover img{opacity:1; filter:none}
/* Climora selbst schliesst die Reihe: Windrad + Wortmarke */
.vertraut-climora{gap:8px}
.vertraut-climora span{font-size:.92rem; letter-spacing:.04em}
@media (prefers-reduced-motion: no-preference){
  .vertraut-zug{animation:vertrautLauf 34s linear infinite}
  .vertraut-band:hover .vertraut-zug,
  .vertraut-zug:focus-within{animation-play-state:paused}
}
@keyframes vertrautLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .vertraut-halb{flex-wrap:wrap; row-gap:12px}
  .vertraut-halb[aria-hidden="true"]{display:none}
}
/* Die Gewerke leuchten im Marken-Blau (gleiche Grammatik wie .name-akzent);
   angeklebte Satzzeichen bleiben Tinte */
h1.hero-h1 .gw{color:var(--akzent-satt)}
h1.hero-h1 .gw .bu-satz{color:var(--tinte)}

/* Die fuenf Bereichs-Marken im Roentgen-Bild: unsichtbar, bis der Blick
   ihr Bauteil aufdeckt; per Tastatur immer erreichbar (focus zeigt sie).
   DREI FASSUNGEN, am echten Objekt vergleichbar ueber ?marken=a|b|c
   (Default b): a weisser Chip · b Messpunkt (HUD) · c grosse Plakette. */
.blick-marken{position:absolute; inset:0; z-index:2; pointer-events:none}
a.blick-marke{
  position:absolute; display:inline-flex; align-items:center;
  text-decoration:none; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .4s, transform .4s;
}
a.blick-marke.zeigt, a.blick-marke:focus-visible{opacity:1; pointer-events:auto}
a.blick-marke:focus-visible{outline:2px solid var(--akzent); outline-offset:3px}
a.blick-marke .bm-nr{font-family:var(--font-text); font-weight:600;
  letter-spacing:.08em; font-variant-numeric:tabular-nums}
a.blick-marke .bm-kern{display:inline-flex; align-items:baseline; gap:9px;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  line-height:1}

/* ── Fassung A · der weisse Chip (erste Fassung) ── */
.marken-a a.blick-marke{transform:translate(-50%,-50%) translateY(6px)}
.marken-a a.blick-marke.zeigt, .marken-a a.blick-marke:focus-visible{
  transform:translate(-50%,-50%)}
.marken-a .bm-punkt, .marken-a .bm-linie{display:none}
.marken-a .bm-kern{
  font-size:clamp(.92rem,1.05vw,1.06rem); color:var(--tinte);
  background:rgba(255,255,255,.94); border:1px solid var(--linie);
  padding:10px 14px; box-shadow:0 14px 28px -20px rgba(15,46,92,.9);
  transition:border-color .2s, color .2s}
.marken-a .bm-kern .bm-nr{font-size:.72em; color:var(--akzent-satt)}
.marken-a a.blick-marke:hover .bm-kern{border-color:var(--akzent); color:var(--akzent-satt)}

/* ── Fassung B · MESSPUNKT (Default): der Puls sitzt exakt auf dem
      Bauteil, die Messlinie zeichnet sich, die Marine-Plakette schiebt
      nach - die HUD-Sprache der Roentgen-These. ── */
.marken-b a.blick-marke{transform:translate(-7px,-50%)}
.marken-b a.blick-marke[data-seite="links"]{
  flex-direction:row-reverse; transform:translate(calc(-100% + 7px),-50%)}
.marken-b .bm-punkt{position:relative; width:14px; height:14px; flex:0 0 auto;
  border-radius:50%; background:var(--akzent-satt);
  box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.marken-b .bm-punkt::after{content:""; position:absolute; inset:-4px;
  border-radius:50%; border:2px solid var(--akzent-satt); opacity:0}
.marken-b a.blick-marke.zeigt .bm-punkt::after{animation:bmPuls 2.2s ease-out infinite}
@keyframes bmPuls{
  0%{transform:scale(.6); opacity:.9}
  70%{transform:scale(2.1); opacity:0}
  100%{transform:scale(2.1); opacity:0}
}
.marken-b .bm-linie{width:clamp(28px,3vw,52px); height:2px; flex:0 0 auto;
  background:var(--marine); transform:scaleX(0); transform-origin:left center;
  transition:transform .35s .08s cubic-bezier(.16,1,.3,1)}
.marken-b a.blick-marke[data-seite="links"] .bm-linie{transform-origin:right center}
.marken-b a.blick-marke.zeigt .bm-linie,
.marken-b a.blick-marke:focus-visible .bm-linie{transform:scaleX(1)}
.marken-b .bm-kern{
  font-size:clamp(.95rem,1.08vw,1.1rem); color:#fff; background:var(--marine);
  padding:11px 15px; box-shadow:0 16px 32px -20px rgba(6,17,36,.95);
  opacity:0; transform:translateX(-8px);
  transition:opacity .3s .18s, transform .3s .18s, background .2s}
.marken-b a.blick-marke[data-seite="links"] .bm-kern{transform:translateX(8px)}
.marken-b a.blick-marke.zeigt .bm-kern,
.marken-b a.blick-marke:focus-visible .bm-kern{opacity:1; transform:translateX(0)}
.marken-b .bm-kern .bm-nr{font-size:.7em; color:rgba(163,199,246,.95)}
.marken-b a.blick-marke:hover .bm-kern{background:var(--akzent-satt)}

/* ── Fassung C · grosse Plakette: die Nummer monumental ── */
.marken-c a.blick-marke{transform:translate(-50%,-50%) translateY(8px)}
.marken-c a.blick-marke.zeigt, .marken-c a.blick-marke:focus-visible{
  transform:translate(-50%,-50%)}
.marken-c .bm-punkt, .marken-c .bm-linie{display:none}
.marken-c .bm-kern{flex-direction:column; align-items:flex-start; gap:4px;
  background:rgba(255,255,255,.96); border:1px solid var(--linie);
  padding:14px 18px 13px; box-shadow:0 22px 44px -26px rgba(15,46,92,.9);
  transition:border-color .2s}
.marken-c .bm-kern .bm-nr{font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; letter-spacing:-.02em; color:var(--akzent-satt)}
.marken-c .bm-kern .bm-wort{font-size:clamp(.95rem,1.08vw,1.1rem); color:var(--tinte)}
.marken-c a.blick-marke:hover .bm-kern{border-color:var(--akzent)}

/* Der Zeiger-Ring: rund wie eine Linse, lebt im ganzen Hero */
.blick-zeiger{
  position:absolute; z-index:5; width:64px; height:64px; border-radius:50%;
  border:2px solid var(--akzent-satt); pointer-events:none; opacity:0;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(50,123,223,.12), inset 0 0 22px rgba(50,123,223,.16);
  transition:opacity .3s;
}
#hero.wach .blick-zeiger{opacity:1}
@media (hover:none){ .blick-zeiger{display:none} }

@media(max-width:1000px){
  /* Der Fuss-Abstand ist die Hoehe der Naht-Kurve plus etwas Luft (#708).
     Solange der Text hier unten ankert, landet sein letztes Element - das
     Logo-Band - sonst in genau den 72 bis 132 px, die sich #bereiche per
     negativem margin-top ueber den Hero zieht. Gemessen auf 960 px: die
     weisse Welle lief mitten durch «ETHzuerich» und «CLIMORA». Muhas Befund
     kam vom Handy, der Defekt sitzt aber im ganzen Bereich bis 1000 px. */
  #hero{min-height:calc(100svh - 65px); align-items:flex-end;
    padding-block:clamp(20px,3vh,40px) calc(clamp(72px,10vw,132px) + 14px)}
  /* Schmal traegt der Schleier von unten: Bild oben frei, Text unten lesbar */
  .blick-schleier{background:linear-gradient(0deg,
    rgba(243,247,253,.97) 0%, rgba(243,247,253,.88) 34%,
    rgba(243,247,253,.35) 58%, rgba(243,247,253,0) 74%)}
  .hero-kopf{max-width:100%}
  /* Schmal liegt der Text ueber dem Bild: die Bauteil-Chips wuerden mit ihm
     kollidieren, dort traegt der wandernde Blick das Erlebnis allein. */
  a.blick-marke{display:none}
}

.hero-kopf{position:relative}
h1.hero-h1{font-size:clamp(2.5rem,5.2vw,4.5rem)}
h1.hero-h1 .wort{display:inline-block; white-space:nowrap}
h1.hero-h1 .bu{display:inline-block; will-change:transform}
.hero-lead{
  font-size:clamp(1.06rem,1.32vw,1.28rem); color:var(--grau);
  max-width:52ch; margin:28px 0 0;
}
.hero-griffe{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:34px}
.taste-voll{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:600;
  font-size:1.1rem; color:#fff; background:var(--akzent-satt); padding:18px 32px;
  box-shadow:0 12px 24px -18px rgba(15,46,92,.95); transition:transform .2s, background .2s;
}
.taste-voll:hover{transform:translateY(-2px); background:var(--marine)}
.taste-leer{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600;
  font-size:1.1rem; color:var(--tinte); padding:17px 6px;
  border-bottom:3px solid var(--akzent); transition:color .2s;
}
.taste-leer:hover{color:var(--akzent-satt)}

/* ── DIE SIGNATUR · Nabe mit vier Zuleitungen ───────────────────────────── */
.buehne-kopf{margin-top:clamp(34px,4vw,58px)}
.buehne-kopf h2{font-size:clamp(1.7rem,2.9vw,2.5rem); max-width:20ch}
.buehne-kopf p{margin:14px 0 0; color:var(--grau); font-size:1.08rem; max-width:52ch}

/* Der Punkt-Kreis wird von den Toren der UNTERSEITEN weiterverwendet (.tore li),
   darum bleibt seine Basis hier stehen, obwohl die Hero-Tore weg sind. */
.tor-punkt{
  position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  border:3px solid rgba(50,123,223,.42); display:grid; place-items:center;
  transition:border-color .24s, background .24s;
}
.tor-punkt::after{
  content:""; width:16px; height:16px; border-radius:50%; background:rgba(50,123,223,.3);
  transition:background .24s, transform .24s;
}

@media(max-width:900px){
  .tor-punkt{width:44px; height:44px}
  .hero-lead{margin-top:20px}
  .hero-griffe{margin-top:24px; gap:12px}
  .taste-voll{width:100%; justify-content:center}
  .taste-leer{padding:10px 0}
}

/* ── DIE VIER BEREICHE ──────────────────────────────────────────────────── */
/* #637 Esteban: «die Sektionen sind zu weit vertikal auseinander, es dauert ein bisschen
   zu lange beim Scrollen». Die vier Bereiche selbst sind gelobt («an sich mega cool»),
   darum wird NUR der Abstand gekürzt, nichts an ihrer Gestalt. */
/* Die NAHT (#682, dritte Fassung): die Bereiche-Sektion kommt als
   LUFTSTROM-KURVE ueber den unteren Rand der Hero-Buehne. Zwei Stromlinien
   laufen der weissen Kante voraus - dieselbe Sprache wie der Blick.
   Aufbau: .naht (die Kurve, liegt ueber dem Bild) + .bereiche-koerper
   (traegt Grundfarbe und Abstaende, beginnt erst NACH der Kurve). */
#bereiche{position:relative; z-index:4; padding:0; background:none;
  margin-top:calc(-1 * clamp(72px,10vw,132px))}
.naht{height:clamp(72px,10vw,132px);
  filter:drop-shadow(0 -16px 26px rgba(15,46,92,.16))}
.naht svg{display:block; width:100%; height:100%}
.naht-flaeche{fill:var(--weiss)}
.naht-luft{fill:none; stroke:var(--akzent-satt); stroke-width:2;
  opacity:.5; vector-effect:non-scaling-stroke}
.naht-luft-2{opacity:.22}
.bereiche-koerper{
  background:linear-gradient(180deg,var(--weiss) 0%, var(--papier) 22%, var(--papier) 100%);
  padding-block:calc(var(--luft) * .45) calc(var(--luft) * .66)}
#bereiche h2{font-size:clamp(2rem,3.8vw,3.4rem); max-width:18ch}
/* Der Bild-Block bestimmte bisher die Höhe: ein 4:3-Bild auf halber Spaltenbreite ist
   rund 680px hoch, der Textblock daneben rund 400px, und `align-items:center` liess den
   Rest als tote Luft stehen. Jetzt spannt das Bild auf die Höhe des Textes (mit einer
   Untergrenze, damit es Gewicht behält) statt umgekehrt. Das ist der eigentliche
   Treiber der Seitenlänge, nicht die Abstände. */
.bereich{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(24px,4vw,72px); align-items:stretch;
  margin-top:clamp(32px,3.4vw,58px);
}
.bereich .bereich-inhalt{align-self:center}
.bereich:nth-child(even) .bereich-bild{order:-1}
/* Zwei Klassen tief, sonst gewinnt `.bereich p` und die Nummer wird winzig. */
.bereich .bereich-nr{
  font-family:var(--font-display); font-weight:700; font-size:clamp(3.6rem,7.4vw,6.6rem);
  line-height:.88; color:transparent; -webkit-text-stroke:2px rgba(50,123,223,.46);
  letter-spacing:-.03em; margin:0 0 6px; max-width:none;
}
/* Die Bereichs-Nummer auf den Leistungsseiten: dasselbe grosse blasse Zeichen wie im
   Index. Sie ERSETZT die Augenbraue «Bereich 03» (Esteban #637: «wo man einfach 01 bis 04
   sieht, das sieht so schön aus, da braucht es keine Augenbrauen»). Ein Zeichen, keine
   Textzeile: es liest sich als Ordnungszahl, nicht als Etikett über der Überschrift. */
.buehne-nr{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,5vw,4.4rem); line-height:.9; letter-spacing:-.03em;
  color:var(--akzent); opacity:.24; margin:0 0 6px;
}

/* #637 Esteban: «ich will immer dass man die Titel grösser macht, also Heizung grösser,
   Lüftung/Klima grösser, Sanitär grösser». Deutlich grösser, und die lange Zeile
   «Facility Management» darf dabei umbrechen statt zu schrumpfen. */
.bereich h3{
  font-size:clamp(2.6rem,5.4vw,4.8rem); line-height:1.02; letter-spacing:-.022em;
  margin-bottom:20px; text-wrap:balance;
}
.bereich p{margin:0; color:var(--grau); font-size:1.12rem; max-width:46ch}
.bereich-punkte{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.bereich-punkte li{display:flex; align-items:baseline; gap:14px; font-size:1.08rem; font-weight:500}
.bereich-punkte li::before{content:""; flex:0 0 auto; width:11px; height:11px; background:var(--akzent)}
/* #637 Esteban: «dann soll es immer so sein dass man unterhalb jeder Sektion einen
   Knopf hat, dass man auf die Unterseite kommt». Umriss statt gefüllt: vier gefüllte
   Marken-Knöpfe auf einer Seite machen aus dem Blau Tapete (Anti-Muster #627). Der
   Ruhezustand ist vollständig, Hover verstärkt nur. */
.bereich-tor{
  display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  text-decoration:none; font-weight:600; font-size:1.06rem;
  color:var(--marine); background:var(--weiss);
  padding:15px 24px; border:2px solid var(--akzent);
  transition:background .2s, color .2s, transform .2s;
}
.bereich-tor span{transition:transform .2s}
.bereich-tor:hover{background:var(--akzent); color:#fff; transform:translateY(-2px)}
.bereich-tor:hover span{transform:translateX(6px)}
.bereich-tor:focus-visible{outline:3px solid var(--akzent); outline-offset:3px}

.bereich-bild{position:relative; overflow:hidden; background:#DCE6F4; min-height:clamp(300px,30vw,430px)}
.bereich-bild img{width:100%; height:100%; aspect-ratio:auto; object-fit:cover; will-change:transform}
.bereich-bild figcaption{
  position:absolute; left:0; bottom:0; margin:0; padding:9px 16px;
  background:rgba(15,46,92,.86); color:#fff; font-size:.84rem; font-weight:500; letter-spacing:.04em;
}
/* Die dritte Zeile bricht den Zickzack: das Bild laeuft ueber die volle Breite,
   der Text sitzt als weisse Karte in seiner unteren Kante. */
.bereich-breit{grid-template-columns:1fr; gap:0}
.bereich-breit .bereich-bild{order:-1}
.bereich-breit .bereich-bild img{aspect-ratio:21/8; object-position:50% 56%}
.bereich-breit .bereich-inhalt{
  position:relative; z-index:2; width:min(720px,94%);
  margin:clamp(-96px,-6vw,-40px) 0 0 clamp(0px,3vw,54px);
  background:var(--weiss); padding:clamp(24px,3vw,44px) clamp(22px,2.6vw,44px);
}
.bereich-breit .bereich-bild figcaption{left:auto; right:0; bottom:auto; top:0}
@media(max-width:900px){
  .bereich{grid-template-columns:1fr; gap:22px; margin-top:56px}
  .bereich:nth-child(even) .bereich-bild{order:0}
  .bereich-breit{gap:0}
  .bereich-breit .bereich-bild{order:-1}
  .bereich-breit .bereich-bild img{aspect-ratio:16/10}
  .bereich-breit .bereich-inhalt{width:100%; margin:-40px 0 0 0; padding:22px 20px}
}

/* ── DER BETRIEB · wer geradesteht ──────────────────────────────────────── */
/* #637: Sektion gekürzt (Esteban «prägnanter, und nicht Doppelung haben»). Der volle
   Werdegang steht auf seiner eigenen Seite, hier nur die Spitze plus der Weg dorthin. */
.person-spitze{
  margin:30px 0 0; font-size:1.16rem; line-height:1.62; color:var(--tinte);
  max-width:52ch; padding-left:20px; border-left:3px solid var(--akzent);
}
.person-spitze b{font-weight:600}
#person .bereich-tor{margin-top:26px}

#person{padding-block:calc(var(--luft) * .74); background:var(--weiss)}
.person-raster{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(26px,4.4vw,80px); align-items:start}
.person-bild{position:relative; overflow:hidden; background:var(--papier)}
.person-bild img{width:100%; height:clamp(480px,56vw,860px); object-fit:cover; object-position:50% 16%}
.person-bild figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:18px 20px;
  background:linear-gradient(0deg, rgba(15,46,92,.92), rgba(15,46,92,0));
  color:#fff; font-size:1rem; font-weight:600;
}
#person h2{font-size:clamp(2rem,3.8vw,3.4rem)}
/* Der Name trägt die Markenfarbe: der eine Farbpunkt der Sektion (#644). */
#person h2 .name-akzent{color:var(--akzent-satt)}
/* EIN Zeilen-Muster für Abschlüsse UND Stationen (#644, dritte Runde: der Mix aus
   Versal-Labels, zwei Familien und fünf Grössen biss sich). Zwei Rollen, fertig:
   leises Label links (Textschrift, grau, EINE Grösse) · starker Wert rechts
   (Hausschrift, fett, EINE Grösse) · optional eine ruhige Detail-Zeile. */
.werdegang{margin:44px 0 0; display:flex; flex-direction:column}
.quali{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.station{display:grid; grid-template-columns:158px minmax(0,1fr); gap:22px; padding:24px 0; border-top:1px solid var(--linie); align-items:start}
.quali .station:last-of-type{border-bottom:1px solid var(--linie)}
.station .jahre{font-size:1rem; font-weight:600; color:var(--grau); padding-top:12px}
.station .arbeitgeber{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.5rem); letter-spacing:-.02em; line-height:1.08;
}
.station .funktion{display:block; margin-top:8px; font-size:1.05rem; color:var(--grau); line-height:1.5}
@media(hover:hover){
  .station[data-foto]{cursor:default}
  .station .arbeitgeber{transition:transform .45s cubic-bezier(.16,1,.3,1), color .3s}
  .station:hover .arbeitgeber{transform:translateX(12px); color:var(--akzent-satt)}
}

/* Die schwebende Bild-Vorschau am Zeiger (Russo-Muster, #644): fixiert, folgt
   der Maus, zwei gestapelte Bilder blenden beim Zeilenwechsel über. */
.person-vorschau{
  /* Breite skaliert mit dem Fenster: auf kleineren Schirmen deutlich kleiner,
     damit die Vorschau die Zeilen nicht verdeckt (#645, Esteban-Befund). */
  position:fixed; z-index:70; width:clamp(200px,23vw,430px); aspect-ratio:4/3;
  pointer-events:none; overflow:hidden; opacity:0; transform:scale(.94);
  box-shadow:0 30px 70px -30px rgba(15,46,92,.6);
}
.person-vorschau img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.person-vorschau img.an{z-index:2}

/* Touch/schmal: das Bild blendet inline unter der aktiven Zeile auf. */
.station-foto{max-height:0; overflow:hidden; transition:max-height .7s cubic-bezier(.16,1,.3,1)}
/* `height:auto` ist hier PFLICHT und nicht Kosmetik (#708, Muhas erster Befund
   am Handy: «die Bilder vom Flughafen Zürich und der ETH sind komisch
   abgeschnitten»). Die beiden img-Tags tragen echte width/height-Attribute
   (1600x1200 und 1600x797). Sind BEIDE Achsen definit - Breite aus dem CSS,
   Höhe aus dem HTML-Attribut - dann greift `aspect-ratio` gar nicht mehr.
   Gemessen: das Flughafen-Bild lief so mit 350x1200 statt 350x219, wurde also
   auf ein Fünftel seiner Breite beschnitten (ein senkrechter Streifen quer
   durchs Flugfeld, 1.78x hineingezoomt) und vom `max-height`-Deckel der
   Hülle zusätzlich oben abgeschnitten. Zwei Beschnitte übereinander, und vom
   Flughafen war weder Terminal noch Flugzeug zu sehen. */
.station-foto img{width:100%; height:auto; aspect-ratio:16/10;
  object-fit:cover; object-position:50% 54%; margin-top:14px}
@media(hover:none), (max-width:900px){
  .station.aktiv .station-foto{max-height:64vw}
  .person-vorschau{display:none}
}
@media(max-width:900px){
  .person-raster{grid-template-columns:1fr; gap:28px}
  .station{grid-template-columns:1fr; gap:6px}
  .station .jahre{padding-top:0}
}

/* ── DAS BAND ───────────────────────────────────────────────────────────── */
#band{position:relative; overflow:hidden; background:var(--marine)}
#band img{width:100%; height:clamp(300px,42vw,560px); object-fit:cover; object-position:50% 42%; opacity:.62; will-change:transform}
.band-text{
  position:absolute; inset:auto 0 0 0; padding:clamp(26px,4vw,60px) var(--rand);
  background:linear-gradient(0deg, rgba(15,46,92,.94), rgba(15,46,92,.55) 60%, rgba(15,46,92,0));
}
.band-text .kicker{color:#8CB6EE}
.band-text .kicker::before{background:#8CB6EE}
.band-satz{
  margin:0; max-width:24ch; color:#fff;
  font-family:var(--font-display); font-weight:700; line-height:1.04;
  letter-spacing:calc(-.024em + var(--mr-laufweite,0em));
  font-size:clamp(1.8rem,3.6vw,3.2rem);
}
.band-quelle{
  position:absolute; right:0; top:0; margin:0; padding:9px 16px;
  background:rgba(15,46,92,.86); color:#fff; font-size:.84rem; font-weight:500; letter-spacing:.04em;
}

/* ── DER WEG ZUR OFFERTE ────────────────────────────────────────────────── */
#offerte{padding-block:calc(var(--luft) * .6); background:var(--papier)}
#offerte h2{font-size:clamp(1.7rem,2.8vw,2.5rem); max-width:24ch}
.off-raster{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(22px,3vw,48px); margin-top:clamp(22px,3vw,40px); align-items:stretch}
.off-karte{background:var(--weiss); padding:clamp(22px,2.6vw,36px); border:1px solid var(--linie)}
.off-schritt{
  font-family:var(--font-text); font-size:.9rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--akzent-satt); margin:0 0 14px;
}
.betreff-chips{display:flex; flex-wrap:nowrap; gap:10px; margin:0 0 22px; padding:0; border:0}
.betreff-chips legend{padding:0; margin:0 0 14px; font-size:1.06rem; font-weight:600}
.chip{
  cursor:pointer; background:var(--weiss); border:2px solid var(--linie);
  padding:11px 13px; font:inherit; font-weight:600; font-size:.95rem; color:var(--tinte);
  white-space:nowrap; flex:0 1 auto; min-width:0;
  transition:border-color .2s, background .2s, color .2s;
}
.chip .chip-nr{font-family:var(--font-display); font-weight:700; font-size:.82em; color:rgba(50,123,223,.55); margin-right:7px; letter-spacing:.02em}
.chip:hover{border-color:var(--akzent-satt); color:var(--akzent-satt)}
.chip[aria-pressed="true"] .chip-nr{color:rgba(255,255,255,.75)}
.chip[aria-pressed="true"]{border-color:var(--akzent-satt); background:var(--akzent-satt); color:#fff}
.feld-reihe{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.feld{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.feld label{font-size:.98rem; font-weight:600}
.feld input, .feld textarea{
  font:inherit; font-size:1.02rem; padding:14px 16px; border:1px solid var(--linie);
  background:var(--weiss); color:var(--tinte);
}
.feld input:focus, .feld textarea:focus{outline:2px solid var(--akzent); outline-offset:1px; border-color:var(--akzent)}
.feld textarea{min-height:96px; resize:vertical}
.off-senden{
  display:inline-flex; align-items:center; gap:12px; margin-top:8px; cursor:pointer;
  font:inherit; font-family:var(--font-display); font-weight:700; font-size:1.18rem;
  letter-spacing:-.01em; color:#fff; background:var(--akzent-satt); border:0; padding:17px 32px;
  box-shadow:0 12px 26px -20px rgba(15,46,92,.95); transition:transform .2s, background .2s;
}
.off-senden:hover{transform:translateY(-2px); background:var(--marine)}
.off-hinweis{margin:16px 0 0; font-size:.96rem; color:var(--grau)}
.off-direkt{background:var(--marine); color:#fff; padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column}
.off-direkt h3{font-size:1.5rem; color:#fff; margin-bottom:20px}
.off-empfang{display:flex; align-items:center; gap:18px; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid rgba(234,241,251,.22)}
/* Der Ausschnitt sitzt hoeher als beim Hero-Portrait, weil das Rund hier
   groesser ist: bei 14 Prozent stiess der Haaransatz an die obere Rundung und
   wirkte gekappt (#708, Esteban: «das Bild bei Offerte anfragen von seinem
   Kopf ist auf Mobile bei der Stirn ein bisschen abgeschnitten»). Bei 4
   Prozent liegen rund 11 statt 6 Bildpunkte Luft ueber dem Kopf. */
.off-empfang img{flex:0 0 auto; width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:50% 50%}
.off-empfang p{margin:0; font-size:1.04rem; color:#C6D6EC}
.off-empfang b{color:#fff}
/* #652 (Esteban): Bild + Name sind der Weg zur Person (ueber-uns). Der Pfeil
   zeigt es an und wandert beim Hover, der Name faerbt sich hell-akzent. */
a.off-empfang{text-decoration:none; transition:border-color .25s}
a.off-empfang:hover{border-color:rgba(234,241,251,.5)}
a.off-empfang b{transition:color .22s}
a.off-empfang:hover b{color:var(--akzent)}
.oe-pfeil{display:inline-block; color:var(--akzent); font-weight:600; margin-left:6px; transition:transform .22s}
a.off-empfang:hover .oe-pfeil{transform:translateX(6px)}
a.off-empfang:focus-visible{outline:2px solid #fff; outline-offset:4px}
.off-tel{
  display:block; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.2vw,1.9rem); color:#fff; text-decoration:none; margin-bottom:6px;
}
.off-tel:hover{color:#BFD6F6}
.off-direkt p{margin:0 0 18px; color:#C6D6EC; font-size:1.04rem; line-height:1.6}
.off-direkt a{color:#fff}
@media(max-width:900px){ .off-raster{grid-template-columns:1fr} .feld-reihe{grid-template-columns:1fr} .betreff-chips{flex-wrap:wrap} }

/* ── FOOTER «Das Schlusswort» (#644, Estebans Wahl) ─────────────────────────
   Ordnung in grossen Zeilen (das Werdegang-Muster der Person-Sektion) plus die
   Wortmarke als Monument mit dem echten, langsam drehenden Windrad. */
.fuss-a{position:relative; background:var(--marine); color:#EAF1FB; padding:clamp(44px,5vw,72px) var(--rand) 0; overflow:hidden}
.fa-raster{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,90px); align-items:start}
.fa-zeilen{display:flex; flex-direction:column}
.fa-zeile{
  display:flex; align-items:baseline; gap:22px; padding:18px 0; text-decoration:none;
  border-top:1px solid rgba(234,241,251,.18); color:#EAF1FB;
}
.fa-zeile:last-of-type{border-bottom:1px solid rgba(234,241,251,.18)}
.fa-nr{font-family:var(--font-display); font-weight:700; font-size:1rem; color:#5E8FD4; min-width:2.4ch; transition:color .25s}
.fa-wert{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.018em; line-height:1.05;
  font-size:clamp(1.7rem,2.8vw,2.6rem); transition:transform .35s cubic-bezier(.16,1,.3,1), color .25s;
}
.fa-pfeil{margin-left:auto; font-size:1.5rem; color:#5E8FD4; transition:transform .35s cubic-bezier(.16,1,.3,1), color .25s}
.fa-zeile:hover .fa-wert, .fa-zeile:focus-visible .fa-wert{transform:translateX(12px); color:#fff}
.fa-zeile:hover .fa-nr{color:var(--akzent)}
.fa-zeile:hover .fa-pfeil, .fa-zeile:focus-visible .fa-pfeil{transform:translateX(8px); color:var(--akzent)}
.fa-fakten{display:flex; flex-direction:column}
.fa-fakt{display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; padding:15px 0; border-top:1px solid rgba(234,241,251,.18); align-items:baseline}
.fa-fakt:last-of-type{border-bottom:1px solid rgba(234,241,251,.18)}
.fa-fakt .was{font-size:.98rem; font-weight:600; color:#7FAAE8}
.fa-fakt .wert{font-size:1.12rem; color:#EAF1FB; font-weight:500}
.fa-fakt .wert a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.fa-fakt .wert a:hover{border-bottom-color:#fff}
/* ── Profil-Zeichen im Fuss (#708, t-1688) ────────────────────────────────
   Instagram, LinkedIn und das Google-Unternehmensprofil als anklickbare
   Piktogramme. Gezeichnete Striche im Marine-Hell der Fuss-Skala, kein
   Fremdlogo und keine Icon-Bibliothek: die Fuss-Sprache ist Linie, und ein
   eingefaerbtes Markenlogo waere der einzige Fremdkoerper darin.
   Instagram und LinkedIn stehen zusaetzlich im `sameAs` des Schemas, damit
   Google die Profile hart mit DIESER Firma verknuepft - das ist zugleich
   Entitaets-Arbeit gegen die Namenskollision. Der Google-Maps-Eintrag gehoert
   NICHT in `sameAs` (er ist kein Profil der Firma im Netz, sondern Googles
   eigener Datensatz), darum steht er nur als Griff hier. */
.fa-profile .wert{display:flex; align-items:center; gap:14px}
.fa-profile .wert a{display:grid; place-items:center; width:40px; height:40px;
  color:#9FBDE6; transition:color .22s, transform .22s;
  /* Die Fuss-Werte sind unterstrichene Textlinks; unter einem Zeichen ist der
     Strich ein Fremdkoerper (am Blatt gesehen: drei Striche unter den drei
     Piktogrammen). */
  text-decoration:none; border-bottom:0}
.fa-profile .wert a:hover, .fa-profile .wert a:focus-visible{color:#fff; transform:translateY(-2px)}
.fa-profile svg{width:23px; height:23px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.fa-profile svg .voll{fill:currentColor; stroke:none}

.fa-cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:26px; align-self:flex-start;
  color:var(--marine); background:#fff; text-decoration:none; font-family:var(--font-display);
  font-weight:700; font-size:1.14rem; padding:18px 30px; transition:transform .2s, background .2s;
}
.fa-cta:hover{transform:translateY(-2px); color:var(--marine); background:#DCE8FA}
/* Das Monument: die Wortmarke füllt die Breite, das echte Rad dreht langsam mit. */
.fa-monument{
  position:relative; margin-top:clamp(30px,4vw,52px);
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,30px);
}
.fa-monument .fa-rad{
  height:clamp(44px,8vw,120px); width:auto; filter:brightness(0) invert(1); opacity:.96;
  animation:radlauf calc(26s / var(--mr-tempo,1)) linear infinite;
}
.fa-monument span{
  font-family:var(--font-display); font-weight:700; letter-spacing:.02em; line-height:.9;
  font-size:clamp(54px,12.5vw,184px); color:#fff; white-space:nowrap; user-select:none;
}
.fuss-zeile{
  margin-top:clamp(22px,3vw,38px); padding:18px 0 22px; border-top:1px solid rgba(234,241,251,.2);
  display:flex; justify-content:space-between; gap:14px 28px; flex-wrap:wrap;
  font-size:.92rem; color:#9FBDE6;
}
.fuss-zeile a{color:#C6D6EC}
.fuss-zeile .recht{max-width:74ch}
.fuss-sig a{color:#EAF1FB; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(234,241,251,.4)}
.fuss-sig a:hover{color:#fff; border-bottom-color:#fff}
@media(max-width:900px){
  .fa-raster{grid-template-columns:1fr; gap:20px}
}

/* ── Ruhige Fassung ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rad-standbild.dreht, .rad-griff.winkt, .fa-monument .fa-rad{animation:none}
  *{transition-duration:.01ms !important}
}


/* ══════════════════════════════════════════════════════════════════════════════
   3 · UNTERSEITEN — die Schicht, die die Exploration noch nicht hatte.
   Der One-Pager kannte nur Anker; die Produktions-Site hat echte Seiten.
   Gleiche Tokens, gleiche Typo, gleicher Rhythmus, nur ohne die 3D-Bühne.
   ══════════════════════════════════════════════════════════════════════════════ */

/* --- Nav: aktive Seite markieren (statt Anker-Kante) --- */
/* #645: auf direkte Kinder gescopet — die Bereichs-Links leben jetzt im Fächer
   und bekommen dort ihre eigene Markierung, nicht diesen Unterstrich. */
.nav-anker > a[aria-current="page"]{ color:var(--tinte); font-weight:600; }
.nav-anker > a[aria-current="page"]::after{
  content:""; display:block; height:2px; background:var(--akzent);
  margin-top:6px; border-radius:2px;
}

/* --- Seiten-Kopf: der ruhige Ersatz fürs Hero-Rad --- */
.s-kopf{
  padding:calc(var(--luft) * .78) var(--rand) calc(var(--luft) * .52);
  background:var(--papier);
  border-bottom:1px solid var(--linie);
  position:relative; overflow:hidden;
}
.s-kopf-inner{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }
.s-kopf .kicker{ margin-bottom:18px; }
.s-kopf h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,5.4vw,74px); line-height:1.02;
  letter-spacing:-.025em; margin:0; max-width:16ch; color:var(--tinte);
}
.s-kopf .s-lead{
  font-size:clamp(17px,1.35vw,20px); line-height:1.62; color:var(--grau);
  max-width:56ch; margin:26px 0 0;
}
/* Das Windrad als ruhiges Wasserzeichen — dasselbe Zeichen wie im Hero, nur still. */
.s-kopf-zeichen{
  position:absolute; right:-90px; top:50%; transform:translateY(-50%);
  width:min(46vw,430px); opacity:.06; pointer-events:none; z-index:1;
  filter:grayscale(1);
}
@media (max-width:860px){ .s-kopf-zeichen{ right:-140px; opacity:.045; } }

/* --- Fliesstext-Bahn --- */
.bahn{ padding:var(--luft) var(--rand); }
.bahn-inner{ max-width:1180px; margin:0 auto; }
.bahn.hell{ background:var(--weiss); }
.bahn.papier{ background:var(--papier); }
.bahn + .bahn{ border-top:1px solid var(--linie); }

.satz{ max-width:66ch; }
.satz h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px,2.9vw,40px); line-height:1.14;
  letter-spacing:-.02em; margin:0 0 20px; color:var(--tinte);
}
.satz h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,1.7vw,23px); line-height:1.25;
  margin:40px 0 12px; color:var(--tinte);
}
.satz p{ font-size:17px; line-height:1.72; color:var(--grau); margin:0 0 18px; }
.satz p strong{ color:var(--tinte); font-weight:600; }
.satz a:not(.taste-voll):not(.taste-leer){
  color:var(--akzent-satt); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}

/* --- Leistungs-Liste: Haarlinien statt Karten --- */
.zug{ list-style:none; padding:0; margin:34px 0 0; border-top:1px solid var(--linie); }
.zug li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--linie);
}
.zug .nr{
  font-family:var(--font-display); font-size:13px; font-weight:600;
  color:var(--akzent-satt); letter-spacing:.16em; padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.zug strong{ display:block; font-size:17px; color:var(--tinte); margin-bottom:5px; font-weight:600; }
.zug span{ font-size:15.5px; line-height:1.62; color:var(--grau); }

/* --- Kachel-Reihe (verwandte Bereiche, Referenz-Karten) --- */
.reihe{
  display:grid; gap:1px; margin-top:40px;
  background:var(--linie); border:1px solid var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.reihe > *{ background:var(--weiss); padding:26px 24px; display:block; }
a.kachel{ text-decoration:none; transition:background .2s; }
a.kachel:hover{ background:var(--papier); }
.kachel .kicker{ margin-bottom:10px; }
.kachel strong{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:19px; color:var(--tinte); margin-bottom:8px; letter-spacing:-.01em;
}
.kachel p{ font-size:15px; line-height:1.6; color:var(--grau); margin:0; }

/* --- Bild --- */
figure.bild{ margin:38px 0 0; }
figure.bild img{
  width:100%; height:auto; display:block;
  border:1px solid var(--linie); background:var(--papier);
}
figure.bild figcaption{
  font-size:13px; color:var(--grau); margin-top:10px; line-height:1.5;
}

/* --- Fakten-Paar (Kontakt, Eckdaten) --- */
/* Die Lebenslauf-Trennung (harte Fall-Regel: Flughafen und ETH sind SEIN Werdegang,
   nicht Climoras Kundenliste) steht direkt unter den Stationen, wo sie gilt. */
.trennsatz{
  margin:26px 0 0; padding-left:18px; border-left:3px solid var(--linie);
  font-size:15.5px; line-height:1.62; color:var(--grau);
}
.trennsatz a{color:var(--marine); text-decoration:none; border-bottom:1px solid var(--akzent)}
.trennsatz a:hover{color:var(--akzent-satt)}

.fakten{ list-style:none; padding:0; margin:0; }
.fakten li{
  display:grid; grid-template-columns:clamp(120px,18vw,170px) 1fr; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--linie); align-items:baseline;
}
.fakten dt, .fakten .was{
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grau); font-weight:600;
}
.fakten .wert{ font-size:17px; color:var(--tinte); line-height:1.5; }
.fakten .wert a{ color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie); }
.fakten .wert a:hover{ border-bottom-color:var(--akzent); }

/* --- Abschluss-Ruf am Seitenende --- */
.ruf{
  background:var(--marine); color:var(--weiss);
  padding:calc(var(--luft) * .82) var(--rand);
}
.ruf-inner{ max-width:1180px; margin:0 auto; }
.ruf h2{
  font-family:var(--font-display); font-weight:600; color:var(--weiss);
  font-size:clamp(26px,3vw,42px); line-height:1.12;
  letter-spacing:-.02em; margin:0 0 16px; max-width:18ch;
}
.ruf p{ color:rgba(255,255,255,.74); font-size:17px; line-height:1.65; max-width:52ch; margin:0 0 30px; }
.ruf .taste-voll{ background:var(--weiss); color:var(--marine); }
.ruf .taste-voll:hover{ background:var(--papier); }
.ruf .taste-leer{ border-color:rgba(255,255,255,.34); color:var(--weiss); }
.ruf .taste-leer:hover{ border-color:var(--weiss); background:rgba(255,255,255,.07); }
.ruf-griffe{ display:flex; gap:14px; flex-wrap:wrap; }

/* --- Platzhalter: sichtbar unfertig, nie versehentlich live --- */
.luecke{
  border:1px dashed var(--akzent); background:rgba(50,123,223,.05);
  padding:20px 22px; margin:26px 0; border-radius:2px;
}
.luecke::before{
  content:"FEHLT NOCH"; display:block; font-size:11px; font-weight:700;
  letter-spacing:.18em; color:var(--akzent-satt); margin-bottom:8px;
}
.luecke p{ margin:0; font-size:15px; line-height:1.6; color:var(--grau); }

/* --- Legal-Seiten: schmal und ruhig --- */
.legal .satz{ max-width:74ch; }
.legal .satz h2{ font-size:clamp(21px,2.1vw,27px); margin-top:44px; }
.legal .satz h2:first-child{ margin-top:0; }
.legal .satz p, .legal .satz li{ font-size:16px; line-height:1.7; }
.legal .satz ul{ padding-left:20px; margin:0 0 18px; color:var(--grau); }
.legal .satz li{ margin-bottom:7px; }

@media print{ .nav-leiste, .ruf, .fa-monument{ display:none; } }


/* ── Zweispaltige Inhaltsbahn ────────────────────────────────────────────────
   Gemessen #633: eine 66ch-Kolonne in einem 1180px-Container liess 43% der Fläche
   tot. Die Lesebreite bleibt (Fliesstext gehört nicht über 70 Zeichen), aber der
   FÜHRENDE Block wandert nach links und trägt die Fläche mit. Beim Scrollen bleibt
   er stehen, damit man immer weiss, in welchem Abschnitt man liest. */
.bahn-zwei{
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(0,1.55fr);
  gap:clamp(40px,5vw,86px);
  align-items:start;
}
.bahn-zwei > .fuehrt{ position:sticky; top:104px; }
.bahn-zwei > .fuehrt h2{ margin-bottom:16px; }
.bahn-zwei > .fuehrt p{
  font-size:16px; line-height:1.66; color:var(--grau); margin:0; max-width:38ch;
}
.bahn-zwei > .traegt > *:first-child{ margin-top:0; }
.bahn-zwei .zug{ margin-top:0; }
.bahn-zwei .zug li{ padding:26px 0; }
.bahn-zwei .zug strong{ font-size:18.5px; }
.bahn-zwei .zug span{ font-size:16px; }
@media (max-width:900px){
  .bahn-zwei{ grid-template-columns:1fr; gap:34px; }
  .bahn-zwei > .fuehrt{ position:static; }
}

/* Bild bewusst als Bruch über die volle Bahn, mit Luft davor */
figure.bild.voll{ margin-top:clamp(48px,6vw,84px); }

/* Drei Geschwister-Bereiche gehören in EINE Reihe. Das auto-fit-Raster liess bei
   drei Kacheln eine leere vierte Zelle stehen, was wie ein Fehler aussieht. */
.reihe.drei{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .reihe.drei{ grid-template-columns:1fr; } }


/* ══════════════════════════════════════════════════════════════════════════════
   4 · DIE BÜHNE DER UNTERSEITEN + DIE VIER ANLAGEN-SCHEMATA
   Esteban #633: «die Unterseiten müssen eigene Elemente haben» UND
   «es muss schon Brandfarben-konform sein».

   KORREKTUR der ersten Fassung: die Bühne war dunkel (marine). Das verstiess gegen
   die Brand-Direktive #626 («Weiss als Hauptfarbe, Brand-Identität») und gegen die
   Startseite, die hell ist und das blaue Windrad als einzigen kräftigen Ton führt.
   Jetzt: heller Grund, derselbe zarte blaue Schleier wie #hero, das Schema als
   grosses Marken-blaues Gerät. Eine Farbe, hell, viel Luft.
   ══════════════════════════════════════════════════════════════════════════════ */

.buehne{
  position:relative; overflow:hidden;
  padding:calc(var(--luft)*.60) var(--rand) calc(var(--luft)*.56);
  background:var(--weiss);
}
/* derselbe Schleier wie auf der Startseite, damit die Seiten eine Familie sind */
.buehne::before{
  content:""; position:absolute; inset:-30% -10% auto -20%; height:130%;
  background:radial-gradient(54% 48% at 70% 36%, rgba(50,123,223,.15), rgba(50,123,223,0) 70%);
  pointer-events:none;
}
.buehne-inner{
  max-width:1180px; margin:0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(280px,1.02fr) minmax(0,1.12fr);
  gap:clamp(30px,4vw,68px); align-items:center;
}
.buehne h1{
  font-family:var(--font-display); font-weight:700; color:var(--tinte);
  font-size:clamp(46px,6.6vw,96px); line-height:.96;
  letter-spacing:-.035em; margin:0; max-width:11ch;
}
.buehne .s-lead{
  font-size:clamp(17px,1.4vw,20.5px); line-height:1.6;
  color:var(--grau); max-width:46ch; margin:26px 0 0;
}
.buehne-griffe{ display:flex; gap:13px; flex-wrap:wrap; margin-top:36px; }
@media (max-width:940px){
  .buehne-inner{ grid-template-columns:1fr; gap:30px; }
  .buehne h1{ max-width:none; }
}

/* ── Das Schema: Markenblau auf hellem Grund ──────────────────────────────── */
.schema{ display:block; width:100%; height:auto; overflow:visible; }
.schema path, .schema rect, .schema circle{ vector-effect:non-scaling-stroke; }

.schema .huelle path{ stroke:rgba(18,22,28,.16); stroke-width:1.4; }
.schema .huelle .geschoss{ stroke:rgba(18,22,28,.09); stroke-dasharray:3 8; }
.schema .schacht path{ stroke:rgba(18,22,28,.20); stroke-width:1.5; }
.schema .kante-schwach{ stroke:rgba(18,22,28,.09) !important; }

/* Die tragende Leitung: volles Markenblau, das kräftigste Element im Bild */
.schema .vorlauf, .schema .steig, .schema .anlage{
  stroke:var(--akzent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
/* Die zurücklaufende, kühlere Seite: dasselbe Blau, weniger Präsenz */
.schema .ruecklauf, .schema .fall, .schema .abzweig-fall path{
  stroke:rgba(50,123,223,.34); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.schema .abzweig path{ stroke:var(--akzent); stroke-width:2.2; stroke-linecap:round; }

.schema .erzeuger rect, .schema .koerper rect, .schema .filter rect{
  stroke:var(--marine); stroke-width:2; fill:var(--weiss);
}
.schema .erzeuger path, .schema .koerper path, .schema .filter path{
  stroke:rgba(15,46,92,.34); stroke-width:1.5;
}
.schema .erzeuger .kern{ fill:var(--akzent); stroke:none; }
.schema .zapf circle{ stroke:var(--marine); stroke-width:2; fill:var(--weiss); }
.schema .lamellen path{ stroke:rgba(50,123,223,.20); stroke-width:1.4; }
.schema .klappe circle{ stroke:var(--marine); stroke-width:2; fill:var(--weiss); }
.schema .klappe-blatt{ stroke:var(--akzent); stroke-width:2.8; stroke-linecap:round;
  transform-origin:344px 265px; animation:klappe 9s ease-in-out infinite; }
@keyframes klappe{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-42deg)} }

/* Der wandernde Puls */
.schema .fluss, .schema .strom, .schema .wasser, .schema .jahr{
  stroke:var(--marine); stroke-width:2.4; stroke-linecap:round; fill:none;
  stroke-dasharray:18 620; animation:schemapuls 7s linear infinite;
}
.schema .strom{ stroke-dasharray:24 740; stroke-width:2.2; }
.schema .wasser{ stroke-dasharray:16 480; }
.schema .jahr{ stroke-dasharray:12 600; stroke-width:3; }
@keyframes schemapuls{ from{stroke-dashoffset:638} to{stroke-dashoffset:0} }
.schema .f2, .schema .s2, .schema .w2{ animation-delay:-2.3s; }
.schema .f3, .schema .s3{ animation-delay:-4.6s; }
.schema .s4{ animation-delay:-1.2s; }

.schema .messpunkt circle, .schema .stagnation circle, .schema .vorgezogen circle{
  stroke:var(--akzent); stroke-width:2; fill:var(--weiss);
}
.schema .messpunkt path, .schema .vorgezogen path{ stroke:var(--akzent); stroke-width:2; }
.schema .stagnation circle, .schema .vorgezogen circle{
  fill:none; animation:atmen 4.5s ease-in-out infinite;
}
@keyframes atmen{ 0%,100%{opacity:.28} 50%{opacity:1} }

.schema .punkte circle{ stroke:var(--akzent); stroke-width:2; fill:var(--weiss); }
.schema .zeit path{ stroke:rgba(18,22,28,.2); stroke-width:1.4; }
.schema .marke text{
  fill:var(--grau); font-family:var(--font-text);
  font-size:12px; font-weight:600; letter-spacing:.14em;
}

.schema [data-stelle]{ transition:opacity .3s; }
.buehne.zeigt-stelle .schema [data-stelle]{ opacity:.2; }
.buehne.zeigt-stelle .schema [data-stelle].wach{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .schema .fluss, .schema .strom, .schema .wasser, .schema .jahr,
  .schema .klappe-blatt, .schema .stagnation circle, .schema .vorgezogen circle{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   5 · DIE TORE — dieselbe Geste wie die Wege-Tore der Startseite
   Die magere Nummern-Liste der ersten Fassung ist ersetzt: weisse Fläche, blaue
   Kante links, Punkt, grosser Titel. Wer die Startseite kennt, kennt dieses Ding.
   ══════════════════════════════════════════════════════════════════════════════ */
.tore{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.tore li{
  position:relative; background:var(--weiss);
  border:1px solid var(--linie); border-left:3px solid var(--akzent);
  padding:28px 30px 28px 26px;
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  transition:border-color .22s, box-shadow .22s, transform .22s;
}
.tore li:hover, .tore li:focus-within{
  border-color:rgba(50,123,223,.42); border-left-color:var(--akzent-satt);
  box-shadow:0 18px 38px -30px rgba(15,46,92,.85);
  transform:translateX(2px);
}
.tor-punkt{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(50,123,223,.42);
  display:grid; place-items:center;
  transition:border-color .22s, background .22s;
}
.tor-punkt::after{
  content:""; width:13px; height:13px; border-radius:50%;
  background:var(--akzent); transition:transform .22s;
}
.tore li:hover .tor-punkt{ border-color:var(--akzent); background:rgba(50,123,223,.07); }
.tore li:hover .tor-punkt::after{ transform:scale(1.18); }
.tor-wort strong{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,1.8vw,25px); line-height:1.18;
  letter-spacing:-.018em; color:var(--tinte); margin-bottom:7px;
}
.tor-wort span{ display:block; font-size:16px; line-height:1.62; color:var(--grau); }
.tor-nr{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  color:var(--akzent-satt); letter-spacing:.18em; font-variant-numeric:tabular-nums;
}
@media (max-width:700px){
  .tore li{ grid-template-columns:auto 1fr; padding:22px; gap:16px; }
  .tore .tor-nr{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   6 · VEREDELUNG: Navigation und Knöpfe (Esteban #633)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Die Leiste bekommt Tiefe beim Scrollen, statt hart auf dem Inhalt zu liegen */
.nav-leiste{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.nav-leiste.getragen{
  border-bottom-color:var(--linie);
  box-shadow:0 12px 30px -28px rgba(15,46,92,.9);
  background:rgba(255,255,255,.94);
}
/* Der Unterstrich wächst aus der Mitte, statt einfach da zu sein */
.nav-anker a{ position:relative; }
.nav-anker a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--akzent); border-radius:2px;
  transform:scaleX(0); transform-origin:center; transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.nav-anker a:hover::after{ transform:scaleX(.55); }
.nav-anker a[aria-current="page"]{ color:var(--tinte); font-weight:600; }
.nav-anker a[aria-current="page"]::after{ transform:scaleX(1); }

/* Der Telefon-Knopf: das eine gefüllte Blau der Leiste */
.nav-tel{
  background:var(--akzent); color:var(--weiss);
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 10px 24px -18px rgba(50,123,223,.9);
}
.nav-tel:hover{
  background:var(--akzent-satt); transform:translateY(-1px);
  box-shadow:0 14px 28px -18px rgba(50,123,223,.95);
}
.nav-tel:active{ transform:translateY(0); }

/* Knöpfe: gefüllt trägt, leer begleitet. Kein Glow (Anti-Slop 7), nur Ton + Bewegung. */
.taste-voll{
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 12px 26px -20px rgba(15,46,92,.9);
}
.taste-voll:hover{ transform:translateY(-1.5px); box-shadow:0 16px 32px -20px rgba(15,46,92,.95); }
.taste-voll:active{ transform:translateY(0); }
.taste-leer{ transition:border-color .2s, background .2s, transform .2s; }
.taste-leer:hover{ transform:translateY(-1.5px); }
.taste-voll:focus-visible, .taste-leer:focus-visible, .nav-tel:focus-visible,
.nav-anker a:focus-visible, .tore li:focus-visible{
  outline:2px solid var(--akzent); outline-offset:3px;
}

/* ── Footer-Anlagenzug: Klickflächen + der eine Sammelpunkt (Esteban #633) ─── */

/* Das Schema trägt die rechte Hälfte, es ist kein Beiwerk. */
.buehne-bild{ position:relative; }
.buehne-bild .schema{ width:100%; max-width:none; }
@media (min-width:941px){
  .buehne-inner{ grid-template-columns:minmax(300px,.94fr) minmax(0,1.3fr); }
}
/* Die Nachbar-Bereiche in derselben Tor-Sprache statt als flache Kacheln */
.reihe.drei{ background:transparent; border:0; gap:14px; }
.reihe.drei > *{ border:1px solid var(--linie); border-left:3px solid rgba(50,123,223,.5); padding:24px; }
a.kachel{ transition:border-color .22s, box-shadow .22s, transform .22s; }
a.kachel:hover{
  background:var(--weiss); border-left-color:var(--akzent);
  border-color:rgba(50,123,223,.4);
  box-shadow:0 18px 38px -30px rgba(15,46,92,.85); transform:translateY(-2px);
}
.kachel strong{ font-size:20px; }

/* Nasszellen im Sanitär-Schnitt: ruhige Räume, kein Blickfang */
.schema .zapf rect{ stroke:rgba(18,22,28,.22); stroke-width:1.5; fill:rgba(50,123,223,.045); }
.schema .stagnation .kern{ fill:var(--akzent); stroke:none; }

/* Nasszellen sichtbar machen: sie waren so blass, dass der Weg des Wassers
   ins Leere lief. Ein Raum muss als Raum lesbar sein. */
.schema .zapf rect{ stroke:rgba(18,22,28,.34) !important; fill:rgba(50,123,223,.07) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   7 · DER BILD-BRUCH (Esteban #633: «das Bild ist einfach so reingeklatscht»)
   Das Symbolbild bekommt eine Aufgabe statt eines Platzes: es trägt eine Bahn,
   und daneben steht der eine Satz, der die Seite erdet.
   ══════════════════════════════════════════════════════════════════════════════ */
.bruch{ padding:0; background:var(--papier); border-top:1px solid var(--linie); }
.bruch-inner{
  max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);
  align-items:stretch; gap:0;
}
.bruch-bild{ position:relative; overflow:hidden; min-height:clamp(320px,42vw,540px); }
.bruch-bild img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.bruch-bild figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 22px; font-size:12px; letter-spacing:.06em;
  color:var(--weiss); background:linear-gradient(to top, rgba(15,46,92,.72), rgba(15,46,92,0));
}
.bruch-wort{
  padding:clamp(38px,4.6vw,74px) clamp(30px,4vw,62px);
  display:flex; flex-direction:column; justify-content:center;
  background:var(--weiss); border-left:1px solid var(--linie);
}
.bruch-wort .kicker{ margin-bottom:18px; }
.bruch-wort p{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(21px,2.1vw,29px); line-height:1.34;
  letter-spacing:-.015em; color:var(--tinte); margin:0; max-width:24ch;
}
.bruch-wort p + p{
  font-family:var(--font-text); font-weight:400; font-size:16px;
  line-height:1.66; color:var(--grau); margin-top:20px; max-width:38ch;
  letter-spacing:0;
}
@media (max-width:900px){
  .bruch-inner{ grid-template-columns:1fr; }
  .bruch-bild{ min-height:260px; }
  .bruch-wort{ border-left:0; border-top:1px solid var(--linie); }
}

/* ── Nachbar-Bereiche als echte Tore, nicht als flache Kacheln ────────────── */
.nachbarn{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
a.nachbar{
  display:grid; grid-template-rows:auto auto 1fr auto; gap:10px;
  background:var(--weiss); text-decoration:none;
  border:1px solid var(--linie); border-left:3px solid rgba(50,123,223,.5);
  padding:28px 26px 24px;
  transition:border-color .22s, box-shadow .22s, transform .22s;
}
a.nachbar:hover{
  border-left-color:var(--akzent); border-color:rgba(50,123,223,.4);
  box-shadow:0 20px 40px -32px rgba(15,46,92,.9); transform:translateY(-2px);
}
a.nachbar .n-nr{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  color:var(--akzent-satt); letter-spacing:.18em;
}
a.nachbar strong{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,1.7vw,23px); line-height:1.2;
  letter-spacing:-.018em; color:var(--tinte);
}
a.nachbar span{ font-size:15.5px; line-height:1.6; color:var(--grau); }
a.nachbar .n-pfeil{
  color:var(--akzent); font-size:19px; margin-top:8px;
  transition:transform .22s; transform-origin:left center;
}
a.nachbar:hover .n-pfeil{ transform:translateX(5px); }
@media (max-width:820px){ .nachbarn{ grid-template-columns:1fr; } }

/* Das Markenzeichen als Bühnen-Element der Nicht-Leistungsseiten. Dieselbe Rolle,
   die das WebGL-Rad auf der Startseite hat, nur ruhig: ein grosses Zeichen, das die
   rechte Hälfte trägt. Die Leistungsseiten führen ihr Anlagen-Schema, diese hier
   führen das Zeichen selbst. */
.buehne-zeichen{ position:relative; display:grid; place-items:center; }
.buehne-zeichen img{
  width:min(100%,420px); height:auto; display:block;
  animation:radlauf-ruhig 70s linear infinite;
}
.buehne-zeichen::before{
  content:""; position:absolute; width:min(96%,400px); aspect-ratio:1;
  border:1px dashed rgba(50,123,223,.28); border-radius:50%;
}
@keyframes radlauf-ruhig{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){ .buehne-zeichen img{ animation:none; } }

/* ── LEGAL-SEITEN-RAD · Basis des 3D-Rad-Bausteins (assets/js/rad3d.js) ─────
   Seit dem Hero-Neubau (#682) nutzen NUR noch Impressum/Datenschutz/AGB das
   Rad. Diese Basis-Regeln sind beim Neubau aus dem alten Index-Hero hierher
   umgezogen (Lehren-Datei F5: kein totes Rad-CSS im Hero liegen lassen);
   die Buehnen-Masse dazu stehen direkt darunter (.buehne-rad). */
.rad-halter{
  position:relative; z-index:2; width:100%; max-width:800px; margin-inline:auto;
  aspect-ratio:1/1; display:grid; place-items:center; touch-action:pan-y;
}
.rad-licht{
  position:absolute; inset:-8%; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side at 50% 46%, rgba(50,123,223,.22), rgba(50,123,223,.05) 58%, rgba(255,255,255,0) 78%);
}
#radGlas{position:absolute; inset:-6%; width:112%; height:112%; z-index:2; touch-action:none; cursor:grab}
#radGlas:active{cursor:grabbing}
.rad-standbild{position:absolute; width:70%; z-index:1}
.rad-standbild.dreht{animation:radlauf calc(26s / var(--mr-tempo,1)) linear infinite}
@keyframes radlauf{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.rad-griff{
  position:absolute; z-index:3; width:62%; aspect-ratio:1/1; border-radius:50%;
  border:2px dashed rgba(50,123,223,.42); pointer-events:none; opacity:.9;
}
.rad-griff.winkt{animation:winken calc(3.4s / var(--mr-tempo,1)) ease-in-out infinite}
@keyframes winken{
  0%,100%{transform:rotate(0deg) scale(1); opacity:.55}
  45%{transform:rotate(16deg) scale(1.03); opacity:1}
}

/* ── Das Zeichen als KÖRPER auf der Bühne (Impressum · Datenschutz · AGB) ────
   Esteban #676: auf diesen drei Seiten trägt nicht das flache Zeichen die rechte
   Hälfte, sondern derselbe 3D-Körper wie im Hero der Startseite - nur das Rad,
   ohne den Marken-Kranz. Das ganze Verhalten (Schichten, Drehung, Neigung,
   Greif-Ring, Ruhezustand) kommt aus den .rad-*-Regeln weiter oben; hier steht
   NUR, wie gross das Rad auf dieser Bühne steht.

   ZWEITE RUNDE #676, Esteban: «das Rad ist zu klein» und «bei Datenschutz und
   AGB ist es über den Text hinweg». Beides hing am selben Punkt: die Bühne war
   auf die SCHEMA-Hälfte der Leistungsseiten zugeschnitten (1180px innen, rechte
   Spalte 1.3fr), und darin blieben für das Rad 600px - gegen 800px im Hero.
   Darum trägt die Rad-Bühne jetzt einen eigenen Modifikator statt einer
   Anpassung an der geteilten .buehne, die alle Leistungsseiten mitträfe. */
.buehne .rad-halter{ width:100%; margin-inline:auto; margin-top:0; }
/* .buehne trägt overflow:hidden, der Canvas steht 6% über den Halter hinaus.
   Auf der Bühne braucht er diesen Überstand nicht (kein Kranz, dessen Schrift
   sonst abschneidet), darum sitzt er hier bündig und kann nie beschnitten
   werden. Der Renderer misst das Canvas-Rechteck selbst, das bleibt scharf. */
.buehne #radGlas{ inset:0; width:100%; height:100%; }

/* Der Modifikator: dieselbe Breite wie der Hero-Container (.hg, 1400px) und
   dasselbe Rad-Mass (800px). Damit steht das Zeichen auf einer Legal-Seite so
   gross wie auf der Startseite - was Esteban verlangt hat, als er die beiden
   Seiten nebeneinander sah.

   NUR ab 941px: schmal stapelt .buehne-inner auf eine Spalte, und diese Regel
   ist spezifischer als der Mobil-Umbruch weiter oben. Ohne die Schranke hielt
   sie das Zwei-Spalten-Raster bis hinunter auf 420px durch und quetschte das
   Rad auf 88 Pixel. Genau so gemessen, bevor die Schranke drin war.

   DRITTE RUNDE #676, Esteban: «der Hero ist zu lange, man muss zu weit
   scrollen» und «die Wörter werden komisch getrennt». Beides waren Folgen der
   zweiten Runde, und beide hingen an derselben Stelle:

   ZU HOCH, weil das Rad-Feld quadratisch ist, das Rad darin aber nur 70 Prozent
   füllt. Bei 800px Breite standen also 240px transparente Luft in der Bühne und
   schoben den eigentlichen Text auf y=1150 hinunter. Der Halter ist darum nicht
   mehr quadratisch, sondern 72 Prozent so hoch wie breit - genau das Mass, das
   das sichtbare Rad braucht. Der Canvas BLEIBT quadratisch und steht oben und
   unten über (dort ist er ohnehin durchsichtig), sonst würde das Rendering
   verzerrt: der Renderer misst das Canvas-Rechteck und rechnet mit aspect 1.

   KOMISCH GETRENNT, weil ich die linke Spalte auf .82fr geschrumpft hatte, um
   rechts Platz für das grosse Rad zu machen. In 96px Schrift passte danach nicht
   einmal «Datenschutz-» in eine Zeile, also nahm der Browser BEIDE gesetzten
   Trennstellen und machte drei Zeilen daraus. Die Spalte trägt jetzt 1fr und die
   11ch-Fessel fällt: eine Trennstelle genügt, das Wort bricht wie im Duden.
   Das Rad verliert dabei 80px und bleibt mit 720px deutlich grösser als die
   600px, die Esteban zu klein waren. */
/* Diese vier Regeln gelten auf JEDER Breite - schmal war die Buehne sonst hoeher
   als auf dem Desktop (710px bei 940 gegen 504px bei 1280), weil das Rad dort
   wieder quadratisch wurde und seine tote Luft zurueckkam.

   .88 statt .72 seit der Kamera-Korrektur (rad3d.js, Abstand 7.4 statt 10): das
   Rad fuellt seinen Canvas jetzt zu 85 statt 62 Prozent, es braucht also kaum
   noch beschnitten zu werden. Das Feld ist damit schmaler UND hoeher-ausgenutzt
   zugleich - dasselbe Rad in weniger Buehne. */
.buehne-rad .rad-halter{ aspect-ratio:1 / .88; }
.buehne-rad #radGlas{
  inset:auto; left:0; top:50%;
  width:100%; height:auto; aspect-ratio:1 / 1;
  transform:translateY(-50%);
}
.buehne-rad .rad-licht{
  inset:auto; left:-4%; top:50%; width:108%; height:auto; aspect-ratio:1 / 1;
  transform:translateY(-50%);
}
/* Die Buehne atmet hier so knapp wie moeglich: sie traegt nur Titel und Zeichen,
   der Inhalt soll nicht erst nach einem ganzen Bildschirm anfangen. .22/.24 ist
   das Minimum, bei dem der Titel oben und die erste Sach-Ueberschrift unten noch
   Luft haben; darunter klebt die Buehne an der Navigation. */
.buehne-rad{ padding-block:calc(var(--luft)*.22) calc(var(--luft)*.24); }

/* Der Greif-Ring sass auf 62 Prozent des Feldes - das passte zur alten Kamera,
   bei der das Rad nur 62 Prozent fuellte. Seit der naeheren Kamera ragt das Rad
   ueber ihn hinaus, und ein Ring INNERHALB des Rades sagt nichts mehr aus. Er
   legt sich jetzt wieder aussen herum. */
.buehne-rad .rad-griff{ width:94%; }

/* KEINE eigene Schriftgroesse hier. In der dritten Runde stand an dieser Stelle
   ein Verkleinern der Ueberschrift auf 60px, und Esteban hat es zu Recht
   zurueckgewiesen: «du kannst nicht das Problem fixen indem du die Uebertitel
   einfach kleiner machst». Die Messung gibt ihm recht - die Buehne war 616px
   hoch, davon 513 das Rad und nur 174 der ganze Textblock. Die Ueberschrift war
   nie die Ursache, das Verkleinern hat die Hoehe darum auch kaum bewegt. Die
   Ueberschrift traegt wieder ihr normales .buehne-Mass (bis 96px). */

@media (min-width:941px){
  .buehne-rad .buehne-inner{
    max-width:1400px;
    grid-template-columns:minmax(340px,1fr) minmax(0,1.15fr);
  }
  /* Die Spalte begrenzt die Zeile schon; 11ch wuerde nur zusaetzlich trennen. */
  .buehne-rad h1{ max-width:none; }
  /* 620px statt 720px: mit der naeheren Kamera zeigt ein 620er Feld ein
     GROESSERES Rad als das alte 720er Feld, weil kein Drittel mehr an tote
     Luft geht. Weniger Buehne, mehr Zeichen. */
  .buehne-rad .rad-halter{ max-width:min(100%, 620px); }
}

/* DIE ÜBERDECKUNG, an der Wurzel: .buehne h1 begrenzt die BOX auf 11ch, aber
   ein deutsches Kompositum bricht nicht von selbst. «Datenschutzerklärung» und
   «Geschäftsbedingungen» liefen darum 411 bis 456 Pixel aus ihrer Spalte heraus
   und legten sich über das Rad - gemessen, nicht geschätzt. Die Box war dabei
   immer korrekt, weshalb eine Kollisionsprüfung auf Element-Rechtecken das nie
   gesehen hat: sichtbar ist die Schrift, nicht die Box.
   hyphens:manual statt auto, mit Absicht: Chromes automatische Trennung machte
   aus «Datenschutzerklärung» ein «Daten-schutzer-klärung» - sprachlich falsch
   und in 96px Schrift nicht zu übersehen. Getrennt wird darum nur dort, wo im
   Text ein weiches Trennzeichen (­) steht, gesetzt in seiten.py. Das ist
   der einzige Weg, bei dem eine Überschrift dieser Grösse zuverlässig richtig
   bricht. overflow-wrap bleibt als Netz für jedes künftige lange Wort ohne
   gesetzte Trennstelle: dann bricht es hart, aber es läuft nie über das Rad.
   Gilt für JEDE Bühne, nicht nur die drei. */
.buehne h1{ hyphens:manual; overflow-wrap:break-word; }

@media (max-width:940px){
  /* Schmal steht das Rad unter dem Text und wird kleiner, damit die Angaben
     darunter noch im Bild anfangen. */
  .buehne .rad-halter{ max-width:min(88vw, 480px); }
}

.off-stoerung{margin:14px 0 0 !important; font-size:.96rem !important; color:#9FBDE6 !important}

/* Das Zitat von Muha füllt die Mitte der blauen Karte (#644). Bis das echte
   Interview-Zitat da ist, steht die Stelle als sichtbare Lücke im Site-Standard. */
.off-zitat{flex:1; display:flex; flex-direction:column; justify-content:center; margin:18px 0}
.off-zitat .zitat-zeichen{
  font-family:var(--font-display); font-weight:700; font-size:3.4rem; line-height:.6;
  color:rgba(143,182,236,.55);
}
/* Das schliessende Füsschen (Kunden-Wunsch 13.08., #650): gleiches Zeichen,
   rechtsbündig unter dem Zitat. */
.off-zitat .zitat-zeichen.zz-ende{align-self:flex-end; margin-top:14px}
.off-zitat blockquote{
  margin:10px 0 0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.4; color:#EAF1FB; letter-spacing:-.01em;
}
.off-zitat figcaption{margin-top:12px; font-size:.95rem; color:#9FBDE6}
.off-zitat .luecke{border-color:rgba(198,214,236,.5); background:rgba(234,241,251,.06)}
.off-zitat .luecke p{color:#C6D6EC}

/* ── Nav-Standort-Markierung stabil (#650d, Esteban 14.08.) ─────────────────
   Vorher: der aktuelle Fächer-Eintrag verlor seine Satt-Färbung an die
   spätere Unterstrich-Regel (Zeile ~1148) und trug stattdessen eine Linie
   über die VOLLE Fächer-Breite, die wie ein Trennstrich las; die
   Leistungen-Taste selbst hatte als Standort gar keine Linie und wirkte je
   nach Maus-Position wechselhaft. Jetzt: die Taste trägt Farbe + Linie in
   ALLEN Zuständen (zu, Hover, Fächer offen, Maus im Fächer); im Fächer
   markiert Farbe + Grund den Standort, Linien gibt es dort keine. */
.nav-gruppe-taste{position:relative}
.nav-gruppe-taste::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--akzent); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.nav-gruppe-taste:hover::after{transform:scaleX(.55)}
.nav-gruppe-taste.ist-hier::after,
.nav-gruppe:hover .nav-gruppe-taste.ist-hier::after,
.nav-gruppe.offen .nav-gruppe-taste.ist-hier::after,
.nav-gruppe:focus-within .nav-gruppe-taste.ist-hier::after{transform:scaleX(1)}
.nav-faecher a::after{display:none}
.nav-faecher a[aria-current="page"]{color:var(--akzent-satt); background:var(--papier)}
.nav-faecher a[aria-current="page"]:hover{color:var(--akzent-satt)}

/* ── Referenz-Liste (#650k): Leistungsumfang einer Referenz als ruhige
   Punkte-Liste im Muster der Bereichs-Punkte. */
.ref-liste{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.ref-liste li{display:flex; align-items:baseline; gap:12px; line-height:1.55}
.ref-liste li::before{content:""; flex:0 0 auto; width:9px; height:9px; background:var(--akzent)}
.ref-quelle{margin-top:14px; font-size:.9rem; color:var(--grau)}

/* ═══ MOBIL-NAVIGATION (#705) ═════════════════════════════════════════════
   Der Defekt, den das behebt (Esteban, am Geraet gesehen): unter 900 px stand
   `.nav-anker{display:none}` OHNE Ersatz. Auf dem Handy war die Navigation
   damit komplett weg - kein Burger, null sichtbare Links, gemessen. Man kam
   von der Startseite zu KEINER Unterseite. Bei einem Betrieb, dessen Kunden
   die Seite im Keller auf dem Telefon aufmachen, ist das der teuerste Fehler
   der ganzen Site.
   Das Panel oeffnet unter der Leiste, traegt dieselbe 01-05-Ordnung wie Nav,
   Footer und Offerte-Chips, und schliesst per Escape, Aussenklick und Klick
   auf einen Link. */
.nav-burger{display:none; background:none; border:0; padding:10px; cursor:pointer;
  width:46px; height:46px; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; border-radius:8px;}
.nav-burger span{display:block; width:22px; height:2px; background:var(--tinte);
  border-radius:2px; transition:transform .22s ease, opacity .18s ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
/* Der mittlere Balken wird nicht nur unsichtbar, er wird BREITENLOS (#708).
   Grund: die zwei gedrehten Balken belegen zusammen nur 17 px Breite, der
   mittlere aber 22 px - er steht also links und rechts je 2.5 px ueber das X
   hinaus. Solange er nur `opacity:0` trug, blieben diese zwei Ueberstaende
   auf Geraeten sichtbar, die die Deckkraft verzoegert oder gar nicht mit
   dem Transform zusammen zeichnen: zwei Punkte neben dem X (Muhamed am
   eigenen Handy, in Chromium und WebKit nicht reproduzierbar). `scaleX(0)`
   nimmt ihm die Flaeche selbst, damit kann kein Rest mehr stehenbleiben. */
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0; transform:scaleX(0)}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobil{display:none; position:fixed; left:0; right:0; z-index:60;
  background:var(--weiss); border-bottom:1px solid var(--linie);
  box-shadow:0 18px 40px rgba(18,22,28,.14);
  padding:14px 18px 22px; max-height:calc(100dvh - 68px); overflow-y:auto;}
.nav-mobil .nm-titel{margin:12px 0 4px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grau); font-weight:600;}
.nav-mobil a{display:flex; align-items:center; gap:12px; padding:14px 6px;
  min-height:52px; text-decoration:none; color:var(--tinte); font-weight:600;
  font-size:17px; border-bottom:1px solid var(--linie);}
.nav-mobil a[aria-current="page"]{color:var(--akzent-satt)}
.nav-mobil .nm-nr{font-size:13px; color:var(--grau); font-weight:600; min-width:22px}
.nav-mobil .nm-ruf{margin-top:16px; background:var(--akzent); color:var(--weiss);
  justify-content:center; border-radius:10px; border-bottom:0;}
.nav-mobil .nm-tel{justify-content:center; color:var(--akzent-satt); border-bottom:0;}

@media(max-width:900px){
  .nav-burger{display:flex}
  .nav-mobil.offen{display:block}
}

/* ═══ MOBIL: weniger Text, mehr Struktur (#705, Esteban am Geraet) ════════
   Sein Befund: auf dem Handy stapelt sich unter jedem Titel ein Erklaersatz,
   den man beim Scrollen ohnehin ueberspringt. Auf dem Laptop traegt derselbe
   Satz, weil er neben und nicht unter dem Titel steht.
   Darum wird hier NUR auf Mobil ausgeblendet, nie geloescht: dieselbe Seite,
   zwei Lesearten. Wer die Datei spaeter liest, soll den Satz im Generator
   finden und nicht glauben, er sei verlorengegangen. */
@media(max-width:900px){
  /* 1) Der Lead-Satz unter dem Bereichs-Titel auf der Startseite.
        «02 Lueftung» plus die drei Punkte plus der Griff sagen es schon. */
  .bereich-inhalt > h3 + p{display:none}

  /* 2) Die Erklaersaetze im Offerte-Weg, auf JEDER Seite mit dieser Sektion.
        Die drei Schritt-Titel und die Piktogramme bleiben - sie sind die
        Aussage, der Satz darunter war die Fussnote. */
  .mr-weg .mrw-satz{display:none}
}

/* ═══ MOBIL-HERO + KOPFLEISTE AUFGERAEUMT (#705) ══════════════════════════
   Estebans Befund am Geraet: «der Hero ist komplett am Arsch», «der Text über
   dem Hero-Bild ist ein bisschen blöd und ist ein durcheinander».

   Was gemessen war: auf 390 px stapelten sich SECHS Bloecke uebereinander -
   H1 ueber drei Zeilen, ein vierzeiliger Lead, zwei Griffe, die Beleg-Zeile
   mit Portrait und darunter das Logo-Band. Kein Fokuspunkt, und der Blick
   findet keinen Einstieg. Auf dem Laptop traegt dieselbe Folge, weil sie in
   einer Spalte neben dem Bild steht statt darunter.

   Der Schnitt: EINE Aussage, EINE Handlung, EIN Beleg. Alles, was auf dem
   kleinen Schirm doppelt vorkommt oder nur erklaert, faellt weg - nichts wird
   geloescht, es steht auf dem Laptop unveraendert. */
@media(max-width:900px){

  /* 1) Der Lead-Absatz. Die H1 sagt bereits «Wir halten Heizung, Lueftung,
        Klima und Sanitaer in Betrieb» - der Absatz darunter wiederholt das in
        Prosa und kostet vier Zeilen im ersten Bildschirm. */
  .hero-lead{display:none}

  /* 2) Die Telefon-Nummer als zweiter Griff. Sie steht in der Kopfleiste als
        blaue Taste, im Burger-Panel und im Fuss. Drei Meter weiter unten ein
        viertes Mal, direkt neben dem Hauptgriff, schwaecht nur den Hauptgriff. */
  .hero-griffe .taste-leer{display:none}
  .hero-griffe .taste-voll{width:100%; justify-content:center}

  /* 3) Die Roentgen-Marken. Der Hero-Einfall ist ein Pinsel, der dem Cursor
        folgt - auf einem Touch-Geraet gibt es keinen Cursor. Die Marken
        schwebten darum an festen Stellen ueber dem Bild, ohne den Mechanismus,
        der sie erklaert. Die fuenf Bereiche stehen direkt darunter als eigene
        Sektion und im Burger-Panel. */
  .blick-marken{display:none}

  /* 4) Die Beleg-Zeile bleibt: sie ist der Vertrauens-Anker (eidg. diplomiert,
        Gesicht dazu). Nur enger gesetzt. */
  .hero-beleg{margin-top:18px; gap:12px}
  .hero-beleg .beleg-kopf{width:44px; height:44px}
}

/* Die Kopfleiste auf schmalen Geraeten: Logo, Wortmarke, blaue Telefon-Taste
   und Burger draengten sich auf 390 px zu viert; das X klebte am Rand.
   ZURUECKGENOMMEN (#708, Muhamed am Geraet): die Telefon-Taste verschwand
   beim Oeffnen des Menues, weil das Panel die Nummer selbst traegt. Die
   Rechnung ging nicht auf - die Taste ist 125 px breit, mit der Luecke
   133 px, und genau um diese 133 px sprang der Burger beim Antippen nach
   links (gemessen auf 390 px: left 298 zu, left 165 offen). Das Auge liest
   diesen Sprung als Fehler, nicht als Aufraeumen. Muhas Vorgabe woertlich:
   die Nummer muss stehen bleiben, Burger und X muessen auf genau derselben
   Stelle bleiben. Die doppelte Nummer im offenen Panel ist der kleinere
   Preis; sie ist dort ohnehin der bequemere Griff fuer den Daumen. */
@media(max-width:560px){
  .nav-leiste{gap:8px}
  .nav-wort small{display:none}
  .nav-tel{padding:11px 14px; font-size:.9rem}
}

/* Das Vertrauens-Laufband auf schmalen Geraeten (#705).
   Estebans Befund: «die Referenzen werden dort irgendwie abgeschnitten».
   Ursache gemessen: die Ausblend-Maske des Bandes steht auf 8% je Seite. Auf
   1440 px sind das 115 px und ein Logo verschwindet weich; auf 390 px sind es
   31 px, und ein rund 100 px breites Logo wird mitten im Wort hart gekappt -
   man liest «...rich» und «CLIMOR». Die Maske muss relativ zur Logo-Breite
   wachsen, nicht relativ zur Bildschirmbreite. */
@media(max-width:900px){
  .vertraut-band{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  }
  /* Und Luft nach unten, damit das Band nicht auf der Kante des ersten
     Bildschirms klebt. */
  .vertraut{margin-bottom:10px}
}

/* ═══ MOBIL-HERO · ZWEITE RUNDE (#708, Muhamed am eigenen Handy) ══════════
   Vier seiner Punkte hängen an EINER Ursache, darum stehen sie hier zusammen:
   «der Hero sitzt zu tief» · «den Titel kann man grösser machen dafür weiter
   oben» · «die Referenzen sind unten abgeschnitten vom welligen Band» · «das
   Bild im Hintergrund ist zu cluttert und hat auf dem Handy nicht den Nutzen,
   den es auf dem PC hat».

   Die gemeinsame Ursache, gemessen auf 390 px: seit #682 ankert der schmale
   Hero seinen Text UNTEN (`align-items:flex-end` im 1000px-Block, Schleier
   von unten). Der Textblock begann damit erst bei y 459 von 779, also im
   letzten Drittel. Daraus folgt alles Weitere:
   · der Titel steht tief und muss klein bleiben, weil unter ihm noch Griff,
     Beleg-Zeile und Logo-Band Platz finden müssen (er lag auf 40 px, dem
     blossen clamp-Boden der Laptop-Kurve: 5.2vw sind auf 390 px nur 20 px,
     also war die Grösse dort gar nicht entschieden, sondern übriggeblieben);
   · das Logo-Band als unterstes Element landet in genau den 72 px, die sich
     die Naht-Kurve von #bereiche über den Hero zieht
     (`#bereiche{margin-top:calc(-1 * clamp(72px,10vw,132px))}`) - deshalb
     lief die weisse Welle mitten durch «Flughafen Zürich» und «CLIMORA»;
   · und das Bild trägt vollflächig NUR Hintergrund: auf dem Laptop steht der
     Text links NEBEN dem Bild, auf dem Handy liegt er DARÜBER. Der Blick
     wandert dann hinter der Schrift, und was bleibt, ist ein heller Wirrwarr.

   Die Umkehr: der Text ankert oben, der Schleier trägt von oben, und die
   untere Hälfte des Heros gehört wieder dem Bild allein. Der Titel darf
   dadurch wachsen, und der ganze Block (Titel, Griff, Name, Referenzen)
   rückt als Einheit nach oben - Muhas Punkt «auch seinen Namen und die
   Referenzen höher». Nichts wird gelöscht und nichts umsortiert. */
@media(max-width:900px){
  #hero{
    align-items:flex-start;
    padding-block:clamp(16px,2.4vh,28px) calc(clamp(72px,10vw,132px) + 14px);
  }

  /* DAS BILD TRAEGT DIE GANZE SEKTION (Esteban-Direktive #708, woertlich:
     «das Bild im Hintergrund im Hero muss die ganze Sektion ueberdecken,
     nicht nur dort wo ETH Zuerich und Flughafen steht»).

     Die erste Fassung dieser Runde deckte bis 65 % der Hoehe fast voll ab,
     damit die Schrift ruhig steht - und machte damit genau die obere Haelfte
     wieder zu weissem Grund. Der Schleier ist jetzt ein SCHLEIER: er nimmt
     dem Bild ueberall etwas Kontrast, aber nirgends seine Anwesenheit, und
     laeuft nach unten ganz aus. Das Bild ist hell (weisses Atrium), darum
     traegt es dunkle Schrift auch bei .58 Deckung - die zwei grauen Zeilen
     darunter werden im selben Zug auf Tinte gehoben, statt den Schleier
     wieder zuzuziehen (siehe unten). */
  .blick-schleier{background:linear-gradient(180deg,
    rgba(243,247,253,.72) 0%, rgba(243,247,253,.66) 34%,
    rgba(243,247,253,.58) 52%, rgba(243,247,253,.4) 70%,
    rgba(243,247,253,.16) 86%, rgba(243,247,253,0) 100%)}

  /* Der Titel trägt den ersten Bildschirm jetzt allein, also bekommt er die
     Grösse dafür. Eigene Kurve statt des Laptop-clamp-Bodens: auf 390 px
     rund 49 px statt 40. Die Laufweite zieht mit, sonst wird die grosse
     Zeile luftig statt dicht. */
  h1.hero-h1{font-size:clamp(3.05rem,12.4vw,3.9rem); letter-spacing:-.03em}

  /* Das Logo-Band steht jetzt weit über der Naht-Kurve, es braucht die
     Notluft von #705 nicht mehr; dafür etwas mehr Abstand nach oben, damit
     es sich von der Beleg-Zeile löst und als eigene Reihe liest. */
  .vertraut{margin:26px 0 0}
}

/* ═══ MOBIL · MUHAS ZWEITE RUNDE (#708) ═══════════════════════════════════
   Alles hier ist Mobil-only und geht auf konkrete Fundstellen zurueck, die
   Muhamed bzw. Esteban am Geraet benannt haben. Die Reihenfolge folgt der
   Seite von oben nach unten. */
@media(max-width:900px){

  /* 1) DIE ZWEI GRAUEN ZEILEN IM HERO STEHEN JETZT AUF BILD, nicht mehr auf
        weissem Grund. Damit der Schleier duenn bleiben darf (das Bild soll
        die ganze Sektion tragen), werden Beleg-Zeile und Logo-Band selbst
        krefaeftiger, statt den Grund wieder zuzuziehen. */
  .hero-beleg{color:var(--tinte)}
  .hero-beleg b{font-weight:700}

  /* 2) «Schau doch dass die Referenzen nicht so durchsichtig sind»
        (Esteban #708). Die Logos liefen auf .55 Deckung plus Graustufe und
        einer 75-prozentigen Textfarbe - auf weissem Laptop-Grund eine leise
        Reihe, auf einem Foto einfach nicht mehr da. */
  /* REIHENFOLGE IM LOGO-BAND (#708, Esteban): seine eigene Marke zuerst, dann
     die Stationen von der juengsten zur aelteren - also Climora, Flughafen
     Zuerich, ETH Zuerich. Damit liest das Band in derselben Richtung wie der
     Werdegang weiter unten auf der Seite (Flughafen 2024-2025 vor ETH
     2017-2024) statt gegenlaeufig. Die Quelle bleibt unangetastet: das Band
     besteht aus zwei identischen Haelften, deren gleiche Breite den nahtlosen
     Lauf traegt, und `order` verschiebt nur die Sicht, nicht die Breite. */
  /* Die Kopfleiste war rechts nicht buendig (#708, Esteban: «der Burger ist
     nicht gleich weit entfernt wie das Logo zu links»). Gemessen auf 390 px:
     das Windrad begann 18 px vom linken Rand, der Burger-Kasten endete 46 px
     vor dem rechten. Zwei Ursachen uebereinander. Erstens packt eine Flexbox
     ohne `justify-content` alles nach links und laesst die Restbreite HINTER
     dem letzten Element stehen - hier 28 px. `margin-right:auto` an der Marke
     schiebt die Luecke dorthin, wo sie hingehoert, zwischen Wortmarke und
     Telefon-Taste. Zweitens ist der Burger ein 46er Knopf um ein 22er Zeichen,
     seine Striche sassen also nochmal 12 px weiter innen als seine Kante; der
     negative Rand richtet die STRICHE am Rand aus, nicht den Kasten, denn das
     Auge misst am Zeichen. */
  .nav-marke{margin-right:auto}
  .nav-burger{margin-right:-12px}

  .vertraut-halb a:nth-child(1){order:3}
  .vertraut-halb a:nth-child(2){order:2}
  .vertraut-halb .vertraut-climora{order:1}
  /* REIHENFOLGE IM LOGO-BAND (#708, Esteban): seine eigene Marke zuerst, dann
     die Stationen von der juengsten zur aelteren - also Climora, Flughafen
     Zuerich, ETH Zuerich. Damit liest das Band in derselben Richtung wie der
     Werdegang weiter unten auf der Seite (Flughafen 2024-2025 vor ETH
     2017-2024) statt gegenlaeufig. Die Quelle bleibt unangetastet: das Band
     besteht aus zwei identischen Haelften, deren gleiche Breite den nahtlosen
     Lauf traegt, und `order` verschiebt nur die Sicht, nicht die Breite. */
  .vertraut-halb a:nth-child(1){order:3}
  .vertraut-halb a:nth-child(2){order:2}
  .vertraut-halb .vertraut-climora{order:1}
  .vertraut-halb a{color:rgba(18,22,28,.92)}
  .vertraut-halb img{opacity:.92; filter:grayscale(1) contrast(1.08)}
  .vertraut-climora span{color:var(--tinte)}

  /* 3) DER WERDEGANG KLAPPT NICHT MEHR VON SELBST AUF (Muhamed: «auf Mobile
        legt es extrem wenn man diese Bilder durchgeht, und sie klappen
        faelschlicherweise auf, sie sind immer aufgeklappt»).
        Ursache im JS (index.html): unter 901 px oeffnete ein ScrollTrigger
        jede Station automatisch, sobald sie in das Band 58 % bis 42 % kam.
        Weil das Oeffnen die Seite verlaengert, verschob sich das Band unter
        dem Finger sofort wieder - vier Bilder animierten `max-height` waehrend
        des Scrollens gegeneinander. Das ist die Ruckelei.
        Jetzt: Tippen oeffnet, Tippen schliesst, immer nur eines, und OHNE
        Hoehen-Animation. Eine Layout-Animation auf vier Bildern ist auf dem
        Handy nie fluessig; das Sofort-Aufblenden ist ehrlicher und schneller. */
  /* Aufklappen MIT Bewegung (#708 zweite Korrektur, Esteban: «wenn man drauf
     klickt, muss es animiert aufploppen, nicht so hart wie jetzt»). In der
     ersten Fassung war die Animation ganz raus, weil vier gleichzeitig
     laufende Hoehen-Animationen die Ruckelei erzeugten. Die Ursache war aber
     das automatische Aufklappen beim Scrollen, nicht die Animation an sich:
     jetzt ist immer nur EINE Station offen, und eine einzelne Hoehen-Fahrt
     traegt jedes Geraet. Das Bild kommt mit einem kurzen Weg von oben dazu. */
  .station-foto{transition:max-height .42s cubic-bezier(.16,1,.3,1)}
  .station-foto img{opacity:0; transform:translateY(-10px);
    transition:opacity .3s ease .06s, transform .38s cubic-bezier(.16,1,.3,1) .06s}
  .station.aktiv .station-foto img{opacity:1; transform:none}
  .station{cursor:pointer}

  /* 4) «Um welchen Bereich geht es» stand auf drei ungleichen Zeilen mit
        Luecken (109, 106 / 92, 103 / 198 px breit). Jetzt ein festes Raster:
        zwei gleich breite Spalten, Facility Management ueber beide. */
  .betreff-chips{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .betreff-chips .chip{width:auto; justify-content:flex-start}
  .betreff-chips .chip:last-child{grid-column:1 / -1}

  /* 5) Der Senden-Knopf sass linksbuendig in einer Karte, die sonst ueber die
        ganze Breite laeuft (Esteban: «der Offerte-Anfragen-Knopf ist nicht im
        Zentrum»). Er nimmt jetzt die Breite des Formulars, wie der Griff im
        Hero. */
  .off-senden{width:100%; justify-content:center}

  /* 6) DER FUSS. Zwei Befunde: die Label-Wert-Zeilen brachen mitten im Wert
        um («Referenzen · Muhamed Saljii» stand auf zwei Zeilen), und die
        Schluss-Zeilen stapelten sich zu dritt. Die Label-Wert-Zeilen laufen
        jetzt zweispaltig (Etikett links, Wert rechts), der Wert bricht an
        gesetzten Stellen statt beliebig. */
  /* Etikett UND Wert auf EINER Zeile (#708 zweite Korrektur, Esteban:
     «Standort, Telefon, Mail und Mehr, das soll alles jeweils auf eine Zeile
     kommen, sonst ist der Footer viel zu lang»). Gestapelt waren es acht
     Zeilen fuer vier Angaben. Nebeneinander passt es, wenn der Wert klein
     genug gesetzt ist: der laengste ist «Neuchlenstrasse 24 · 9200 Gossau SG»,
     der bei .8 rem rund 200 px misst; mit dem Etikett und der Fuge bleiben
     rund 60 px Reserve auf 350 px. `nowrap` ist der Riegel: bricht es doch,
     laeuft es sichtbar ueber statt still zweizeilig zu werden. */
  .fa-fakt{display:flex; align-items:baseline; justify-content:space-between;
    gap:14px}
  .fa-fakt .was{white-space:nowrap; flex:0 0 auto}
  .fa-fakt .wert{white-space:nowrap; text-align:right; font-size:.8rem;
    line-height:1.5}

  /* Der weisse Griff im Fuss stand linksbuendig in einer sonst mittig
     gesetzten Spalte. */
  .fa-cta{width:100%; justify-content:center}

  /* 7) DIE SCHLUSS-ZEILE WAR DREISTOECKIG (Esteban: «Impressum, Datenschutz,
        gebaut von der Signalfabrik, geprueft von Seonar und seine Firma, das
        sind drei Zeilen, das ist ueberladen»). Nichts davon darf weg: die
        Rechtslinks sind Pflicht, die Signatur gehoert uns. Also werden es
        zwei Zeilen statt drei - Recht und Firmenzeile teilen sich die erste,
        die Signatur nimmt die zweite. Die Reihenfolge dreht nur die Sicht,
        die Quelle bleibt wie sie ist. */
  .fuss-zeile{display:flex; flex-wrap:wrap; align-items:baseline;
    column-gap:8px; row-gap:6px; font-size:.86rem}
  .fuss-zeile .recht{order:1}
  .fuss-zeile > span:last-child{order:2}
  .fuss-zeile .fuss-sig{order:3; flex-basis:100%}
  /* Der Ort steht in derselben Ansicht schon in der Standort-Zeile. Ohne ihn
     passen Rechtslinks und Firmenzeile zusammen auf eine Zeile (338 von 350
     px), mit ihm waeren es 405 und die Zeile bricht wieder um. */
  .fuss-zeile .fz-ort{display:none}
}