@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(fonts/archivo.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url(fonts/source-sans-3.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;
}

/* ══ Palette ══
   Ein durchgehender Grund statt Hell-Dunkel-Wechsel. Papier warm-neutral,
   aber bewusst nicht Creme. Rot ist Schriftfarbe, keine Füllfläche. */
:root{
  --paper:#EDECE7;
  --paper-2:#F6F5F2;
  --ink:#15192A;
  --red:#C1272F;
  --red-lit:#A81F27;
  --rule:#D3D1C9;
  --muted:#656762;      /* gemessen 4,84:1 auf Papier — #6A6C67 lag mit 4,49 knapp unter AA */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(1.25rem,4.5vw,4.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --head-h:4rem;
  /* Linke Satzkante des Heros: identisch mit der Inhaltskante von .wrap,
     damit Überschrift und Seiteninhalt auf einer Linie stehen. */
  --kante:max(var(--gutter),calc((100vw - 70rem)/2 + var(--gutter)));          /* feste Kopfhöhe, damit der Hero exakt den Rest füllt */
  /* Abschnittsrhythmus. Vorher hatte jeder Abschnitt seinen eigenen clamp() —
     gemessene Lücken 305/184/151/56/96/64/104 px nebeneinander. Eine Stufe,
     Ausnahmen nur mit Absicht. */
  --sek:clamp(3.25rem,7vw,6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Korn gegen die Vektor-Sterilität — fixiert, damit es nicht mitscrollt */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;text-decoration:none;font-family:var(--display);font-size:.8125rem}
.skip:focus{left:0}

/* ══ Kopfleiste ══ schmale Leiste, kein mittiges Farbband */
/* Fest über dem Inhalt statt im Fluss: anfangs nicht sichtbar, kommt beim
   Scrollen herein. Deshalb darf er auch keine Höhe mehr belegen. */
/* Klebt oben und nimmt beim Anscrollen Farbe an — sie fährt jetzt sofort ein
   (24px), nicht erst nach halber Bildschirmhöhe. */
.top{background:var(--ink);color:var(--paper-2);position:fixed;inset:0 0 auto 0;z-index:60;
  transform:translateY(-100%);opacity:0;pointer-events:none;
  box-shadow:0 1px 0 rgba(246,245,242,.10);
  transition:transform .3s var(--expo),opacity .2s ease}
.top.sichtbar{transform:none;opacity:1;pointer-events:auto}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:var(--head-h);padding-inline:var(--gutter)}
.top img{width:clamp(8.5rem,11vw,11rem)}
.top nav a{font-size:1rem}
.top img{width:9.5rem;height:auto}
.top nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.25rem)}
.top a{color:inherit;text-decoration:none;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 560;font-size:.9375rem;
  padding-block:.25rem;border-bottom:1.5px solid transparent;transition:border-color .25s var(--ease)}
.top nav a:hover,.top nav a[aria-current]{border-color:var(--red)}

/* ══ Hero ══ Vollbild, Text mittig darauf.
   Der Scrim ist Pflicht: ohne ihn steht der Text ungeschützt auf der Menge —
   genau der Fehler der alten Seite. */
/* Der Kopf steht im Fluss, also muss er abgezogen werden — sonst ist der Hero
   immer um die Kopfhöhe zu hoch und passt nie ganz auf den Bildschirm. */
/* ══ Hero ══ Vollbild mit wechselnden Aufnahmen.
   Vier echte Einsatzfotos statt Stockmaterial. Der Text steht links, nicht
   mittig gestapelt — und die Abdunklung ist eine FLÄCHE, kein weicher Verlauf:
   ein gleichmässiger Ton nimmt dem Bild nichts von seiner Zeichnung, während
   die zwei übereinandergelegten Verläufe vorher jedes Foto zur grauen Suppe
   gemacht haben. Deckung unten gegen die echten Pixel gemessen. */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--paper-2);
  display:grid;align-items:end;overflow:hidden;
  padding:calc(var(--head-h) + clamp(2rem,5vh,4rem)) var(--gutter)
          clamp(3.5rem,8vh,5.5rem) var(--gutter)}
.hero-bilder{position:absolute;inset:0}
.hero-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;opacity:0;animation:heroWechsel 40s linear infinite}
.hero-bilder img:nth-child(1){animation-delay:0s}
.hero-bilder img:nth-child(2){animation-delay:8s}
.hero-bilder img:nth-child(3){animation-delay:16s}
.hero-bilder img:nth-child(4){animation-delay:24s}
.hero-bilder img:nth-child(5){animation-delay:32s}
/* Halten bis 28%, dann ausblenden — das nachfolgende Bild ist da schon voll da,
   sonst blitzt zwischen zwei Aufnahmen der Grund durch. */
@keyframes heroWechsel{
  0%{opacity:0} 2.5%{opacity:1} 22%{opacity:1} 24.5%{opacity:0} 100%{opacity:0}
}
/* Gleichmässige Fläche, kein Verlauf. Deckung nicht geschätzt: bei allen vier
   Aufnahmen wurde das hellste Pixel im Text- und Kopfbereich gesucht; ab 0,62
   hält weisser Text 4,5:1, 0,64 ist der Puffer. */
.hero-bilder::after{content:"";position:absolute;inset:0;background:rgba(17,20,36,.64)}

.hero-satz{position:relative;z-index:2;max-width:44rem}

/* Bildmarke im freien rechten Feld: gleicher Abstand zur rechten Kante wie
   der Satz zur linken, gleiche Unterkante wie die Schaltflächen. Vollständig
   sichtbar — angeschnitten liest sich der Schriftzug darin wie ein Fehler.
   z-index 1 setzt sie über .hero-bilder::after (den Bildschleier). */
.hero-wasser{position:absolute;z-index:1;pointer-events:none;
  right:var(--gutter);bottom:clamp(3.5rem,8vh,5.5rem);
  width:min(27vw,26rem);height:auto;opacity:.34}
/* Unter 72rem wird der Satz so breit, dass rechts daneben nichts mehr frei
   ist — gemessen an den Buchstabenkanten: bei 1100px berührte die Marke die
   Überschrift. Ab hier wandert sie deshalb ins freie obere Feld, unter die
   Kopfzeile (die ist head-h + 2.75rem hoch). */
@media (max-width:72rem){
  .hero-wasser{top:calc(var(--head-h) + 3.25rem);bottom:auto;
    width:min(30vw,15rem);opacity:.28}
}
@media (max-width:48rem){
  /* Am Handy gehört die Marke zur Textgruppe: im Fluss, mittig, unmittelbar
     über dem Satz. Der Hero bündelt seine Zeilen dafür unten. position:relative
     statt static, sonst läge sie hinter dem absolut gesetzten Foto. */
  /* Auf niedrigen Fenstern (Safari mit Leisten: ~640–700px) wird der Hero
     höher als der Schirm. Deshalb hängen Marke, Lücke und Polster an der
     Fensterhöhe; oben bleibt die Kopfzeile (head-h + 2.75rem) frei. */
  .hero{align-content:end;
    padding-top:calc(var(--head-h) + 3.25rem);padding-bottom:clamp(2.25rem,5vh,3.5rem)}
  /* Mittig über dem TEXT, nicht über dem Schirm: --text-mitte (px ab linker
     Satzkante) misst ein Skript an der Überschrift. Ohne Skript: Heromitte. */
  .hero-wasser{position:relative;inset:auto;transform:none;z-index:1;
    justify-self:start;margin-left:var(--text-mitte,50%);translate:-50% 0;
    width:min(58vw,17rem,21vh);
    margin-bottom:clamp(.75rem,2.5vh,1.75rem);opacity:.24}
}

.hero-marke{display:flex;align-items:center;gap:.75rem;margin:0 0 clamp(1.25rem,3vh,2rem);
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-2)}
.hero h1{font-family:var(--display);font-variation-settings:"wdth" 74,"wght" 860;
  font-size:clamp(2.6rem,6.1vw,5.25rem);line-height:.94;letter-spacing:-.022em;
  margin:0 0 clamp(1.25rem,2.6vh,1.75rem);overflow-wrap:break-word}
.hero h1 span{display:block}
.hero .lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;
  margin:0 0 clamp(1.75rem,4vh,2.75rem);max-width:44ch;color:#EDECE7;text-wrap:pretty}
.hero-do{display:flex;align-items:center;gap:1.25rem 2rem;flex-wrap:wrap}
.hero .tlink{color:var(--paper-2);border-color:rgba(255,255,255,.45)}
.hero .tlink:hover{color:#fff;border-color:#fff}
/* Kopfzeile. Am Desktop spannt sie über die Inhaltsbreite: Logo an der linken
   Satzkante, Menü an der rechten — vorher klebten beide links zusammen und
   rechts standen 694px leer. Am Handy ist die Breite knapp, dort zählt nur,
   dass beides in eine Zeile passt. */
/* Die Haarlinie hat die Zeile eingeschnürt: Logo und Menü klemmten knapp
   darüber. Jetzt ohne Linie, mit mehr Höhe und Luft — die Kopfzeile liegt
   locker über dem Bild, statt in einem Kasten zu sitzen. */
.hero .kopf-offen{justify-content:space-between;gap:clamp(1.5rem,4vw,3rem);
  padding-inline:var(--gutter);height:calc(var(--head-h) + 2.75rem);align-items:center}
.hero .kopf-offen nav{gap:clamp(1.25rem,2.8vw,2.75rem)}
.hero .kopf-offen a{font-size:1rem}
/* Das Logo war 152x20px neben einer 84px-Überschrift — ohne jede Präsenz.
   Und zwischen Logo und Menü standen 533px ohne Verbindung: die Haarlinie
   auf Inhaltsbreite fasst beide Enden zu einer Kopfzeile zusammen. */
.hero .kopf-offen img{width:clamp(9.5rem,13vw,13.5rem)}


@media (prefers-reduced-motion:reduce){
  .hero-bilder img{animation:none;opacity:0}
  .hero-bilder img:nth-child(1){opacity:1}
}
@media (max-width:56rem){
  .hero{padding-inline:var(--gutter)}
  .hero .kopf-offen{padding-inline:var(--gutter)}
}

/* ══ Aktionen ══ eine echte Aktion + ein Textlink, nicht Filled+Ghost */
/* kein Anheben beim Hover — das ist der billigste aller Effekte */
.act{display:inline-flex;align-items:center;gap:.75rem;background:var(--ink);color:var(--paper-2);
  padding:.95rem 1.5rem;text-decoration:none;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 660;font-size:.9375rem;position:relative;
  overflow:hidden;transition:color .5s var(--expo)}
.act::before{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--expo)}
.act:hover::before,.act:focus-visible::before{transform:scaleX(1)}
.act > *{position:relative}
/* Der Hero-Knopf ist die eine laute Stelle: Rot als Fläche, sonst nirgends */
.hero .act{background:var(--red);padding:1.1rem 2rem;font-size:1rem}
.hero .act::before{background:var(--paper-2)}
.hero .act:hover,.hero .act:focus-visible{color:var(--ink)}
.act svg{width:1.0625rem;height:.7rem;transition:transform .22s var(--ease)}
.act:hover svg{transform:translateX(4px)}
.tlink{color:var(--ink);text-decoration:none;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;font-size:.9375rem;
  border-bottom:1.5px solid var(--rule);padding-bottom:.15rem;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.tlink:hover{color:var(--red);border-color:var(--red)}

/* ══ Leistungen ══ Zeilen in Grosstypo statt drei gleicher Karten */
/* Ohne Maximalbreite lief der Inhalt bei 1440 über 1296 px — die Spalten
   zogen auseinander und alles rutschte nach rechts. */
.wrap{max-width:70rem;margin-inline:auto;padding-inline:var(--gutter)}
.lead-label{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.rows{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
/* Offen statt Aufklapper: Titel links, Beschreibung und Schaltfläche rechts.
   Die drei Sätze sind kürzer als die Bedienung, die sie verstecken würde. */
.row{border-bottom:1px solid var(--rule);display:grid;
  gap:clamp(.875rem,2vw,1.25rem);padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.row h2{font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 820;
  font-size:clamp(1.75rem,3.9vw,3.25rem);line-height:1;letter-spacing:-.012em;margin:0}
.row-in{display:grid;justify-items:start;gap:clamp(1.25rem,2.5vw,1.75rem)}
.row-in p{margin:0;color:var(--muted);line-height:1.6;max-width:52ch;text-wrap:pretty}
/* Am Handy zentriert wie die Unterseiten-Punkte: Überschrift, Text und
   Schaltfläche mittig. Ab 56rem stehen sie ohnehin zwei-/dreispaltig. */
@media (max-width:56rem){
  .row{text-align:center}
  .row-in{justify-items:center}
  .row-in p{margin-inline:auto}
}
@media (min-width:56rem){
  /* Mittig statt oben bündig: sonst sitzt der Titel oben und die Schaltfläche
     auf halber Höhe daneben — zwei verschiedene Höhen in einer Zeile. */
  .row{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:center;
    column-gap:clamp(2rem,5vw,4rem)}
}
/* Ab hier bleiben neben dem Text noch gut 27rem — genug, dass die Schaltfläche
   daneben passt statt darunter. Darunter bliebe für den Text sonst zu wenig. */
@media (min-width:72rem){
  .row-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;
    column-gap:clamp(1.5rem,3vw,2.5rem)}
  .row-in .act{white-space:nowrap}
}

/* ══ Zitat ══ Rot als Schrift in Grösse, nicht als Füllfläche */
/* oben knapper als unten — optisch ausgeglichen, nicht mathematisch */
.belief{padding-block:var(--sek)}
/* Das vollständige Zitat sind sechs Zeilen — in Schlagzeilengrösse erschlägt
   das den Abschnitt. Kleiner gesetzt liest es sich als Zitat, nicht als Titel. */
/* Mittig gesetzt: der Block bricht bewusst aus der linksbündigen Seite aus
   und wird dadurch zum Innehalten. Roter Strich statt Anführungszeichen. */
.belief{text-align:center}
.belief blockquote{margin:0 auto;max-width:24ch;font-family:var(--display);
  font-variation-settings:"wdth" 80,"wght" 760;color:var(--red);
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.015em;
  text-wrap:balance}
.belief blockquote::before{content:"";display:block;width:3rem;height:2px;
  background:var(--red);margin:0 auto clamp(1.5rem,3vw,2.25rem)}
.belief .who{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.9375rem;color:var(--muted);margin:1.5rem 0 0}
.belief .after{display:grid;justify-items:center;gap:1.75rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--rule);
  padding-top:clamp(1.75rem,3vw,2.5rem)}
.belief .after p{margin:0;color:var(--muted);max-width:62ch;text-wrap:pretty}

/* ══ Fuss ══ keine Vierspalten-Linkfarm */
.foot{background:var(--ink);color:var(--paper-2);padding:clamp(3rem,6vw,4.5rem) 0 0}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(2rem,6vw,5rem);align-items:start;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
/* height:auto zwingend: ohne sie hält das height="40"-Attribut die Höhe fest,
   während die Breite auf 10,5rem geht — das Logo wird horizontal gestaucht
   (7,5:1 gequetscht auf 4,2:1). Wie beim Kopf-Logo. */
.foot img{width:10.5rem;height:auto;margin-bottom:1.5rem}
.foot address{font-style:normal;line-height:1.7;color:#B9BAC2}
.foot address a{color:#B9BAC2}
.foot-nav{display:flex;flex-wrap:wrap;gap:.6rem 2rem;list-style:none;margin:0;padding:0}
.foot-nav a{color:var(--paper-2);text-decoration:none;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 560;font-size:.9375rem;
  border-bottom:1.5px solid transparent;transition:border-color .25s var(--ease)}
.foot-nav a:hover{border-color:var(--red)}
.foot-end{border-top:1px solid rgba(255,255,255,.14);padding-block:1.25rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  font-size:.875rem;color:#8E909B}

/* ══ Bewegung ══
   Keine Einblende-Animationen. Alles steht sofort da. Bewegung gibt es nur
   noch als Rückmeldung auf Hover und Fokus. */
:root{ --expo:cubic-bezier(.16,1,.3,1); }

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

/* ══ Responsive ══ */
@media (max-width:64rem){
  .belief .after{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:44rem){
  .top nav{gap:1rem}
  .top nav a{font-size:.875rem}
  .top img{width:8rem}
  .hero-do{gap:1.25rem}
  .foot-end{flex-direction:column}
}

/* ══════════ Bausteine der Unterseiten ══════════
   Aus dem alten System übernommen, aber auf die neue Palette gesetzt und
   ohne Einblende-Animationen. */

/* Seitenkopf — kompakte Fassung des Hero, gleiche Mittelachse */
/* Seitenkopf spricht dieselbe Sprache wie der Hero: linksbündig an derselben
   Satzkante, Foto sichtbar statt fast schwarz. Vorher mittig gesetzt in einem
   dunklen Kasten — eine ganz andere Seite als die Startseite. */
.page-head{position:relative;background:var(--ink);color:var(--paper-2);text-align:left;
  display:grid;align-items:end;overflow:hidden;
  padding:calc(var(--head-h) + clamp(2.5rem,7vh,5rem)) var(--gutter)
          clamp(2.5rem,6vh,4rem) var(--kante)}
.page-head h1{font-family:var(--display);font-variation-settings:"wdth" 74,"wght" 860;
  font-size:clamp(2.4rem,5.4vw,4.5rem);line-height:.95;letter-spacing:-.022em;
  margin:0;max-width:14ch;text-wrap:balance}
.page-lead{margin:1.25rem 0 0;max-width:46ch;color:var(--paper-2);
  font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.6;text-wrap:pretty}
/* Kopfzeile wie auf der Startseite: Logo mit Präsenz, Haarlinie als Anker */
/* position:absolute muss hier wiederholt werden — .page-head > *:not(.bg)
   setzt sonst relative und die Kopfzeile rutscht in den Fluss, direkt auf die
   Überschrift (gemessen: 0px Abstand). */
.page-head .kopf-offen{position:absolute;inset:0 0 auto 0;z-index:2;
  justify-content:space-between;padding-inline:var(--gutter);
  height:calc(var(--head-h) + 2.75rem);align-items:center}
.page-head .kopf-offen img{width:clamp(9.5rem,13vw,13.5rem)}

@media (max-width:56rem){
  .page-head{padding-inline:var(--gutter)}
  .page-head .kopf-offen{padding-inline:var(--gutter);align-items:center;
    padding-bottom:0;height:calc(var(--head-h) + 1rem)}
}

.section{padding-block:var(--sek)}
.section.tight{padding-block:calc(var(--sek)*.55)}

/* Unterleistungen: Titel links, Text rechts */
.stack{display:grid;gap:clamp(2rem,4vw,3rem)}
/* Wechselnde Seiten statt immer Titel links / Text rechts. Ohne den Wechsel
   sitzt der gesamte Lesetext jeder Seite auf der rechten Hälfte. */
/* Nummerierte Aufstellung. Die Ziffer gibt der Reihe einen Anker; vorher
   standen Titel links und Text rechts ohne Ordnungszeichen. */
/* Handy: Ziffer und Titel als eigene, mittige Zeile über dem Text. Am Desktop
   löst sich diese Zeile auf und beide gehen in ihre eigene Rasterspalte. */
.block{display:grid;gap:clamp(.9rem,2.5vw,1.25rem);
  border-top:1px solid var(--rule);padding-top:clamp(1.5rem,3vw,2rem);
  --nr-groesse:clamp(1.75rem,3.5vw,2.75rem);
  --titel-groesse:clamp(1.125rem,2vw,1.5rem)}
.kopf{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.15rem .7rem;text-align:center}
.block-nr{font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 850;
  font-size:var(--nr-groesse);line-height:1;color:var(--red);
  font-variant-numeric:tabular-nums;
  /* In der mittigen Kopfzeile am Handy sitzt die Ziffer optisch mittig zum
     Titel — auf gleicher Grundlinie ragte sie nach oben heraus. */
  transform:translateY(calc(.349 * var(--nr-groesse) - .343 * var(--titel-groesse)))}
.block h3{margin:0;font-family:var(--display);
  font-variation-settings:"wdth" 82,"wght" 780;
  font-size:var(--titel-groesse);line-height:1.1;letter-spacing:-.008em}
.block .text p{margin:0;color:var(--muted);max-width:62ch;line-height:1.6;text-wrap:pretty}
/* Vorspann. Er eröffnet den Abschnitt, sah aber wie gewöhnlicher Fliesstext
   aus: gleiche Schrift, gleiche Farbe, nur eine Spur grösser. Jetzt in der
   Hausschrift der Überschriften, 1,6-fache Grösse des Fliesstexts und mit
   rotem Strich darüber — als Vorspann erkennbar, ohne der H1 Konkurrenz zu
   machen. (Gesperrte Versalien wären für ganze Sätze unlesbar.) */
.einleitung{margin:0 auto clamp(2.25rem,4.5vw,3.25rem);max-width:38rem;
  font-family:var(--display);font-variation-settings:"wdth" 84,"wght" 700;
  font-size:clamp(1.375rem,2.6vw,2rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);text-wrap:pretty;text-align:center}
/* Kein roter Strich mehr: seit die aktive Seite in der Leiste darüber rot
   unterstrichen ist, standen zwei rote Striche 40 px übereinander. */

/* Prozess — hier trägt die Nummer echte Information, es ist eine Abfolge */
/* Ohne Nummernkacheln: die Reihenfolge steht in der Zeile selbst. */
/* Fünf Felder als durchgehendes Band, das von hell nach dunkel läuft — der
   Aufstieg, von dem der Satz darüber spricht, wird dadurch sichtbar. Vorher
   standen dort fünf kleine Beschriftungen mit Strichen dazwischen. */
.stufen{list-style:none;margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:2px}
.stufen li{background:var(--ink);color:var(--paper-2);padding:.9rem 1.1rem;
  display:flex;align-items:baseline;gap:.7rem}
.stufen li:nth-child(1){background:#2A3050}
.stufen li:nth-child(2){background:#232945}
.stufen li:nth-child(3){background:#1D2339}
.stufen li:nth-child(4){background:#191E31}
.stufen li:nth-child(5){background:#15192A}
.stufen .nr{font-family:var(--display);font-variation-settings:"wdth" 82,"wght" 800;
  font-size:.8125rem;color:#F4696E;font-variant-numeric:tabular-nums}
.stufen .t{font-family:var(--display);font-variation-settings:"wdth" 84,"wght" 700;
  font-size:1.0625rem}
@media (min-width:52rem){
  .stufen{grid-template-columns:repeat(5,minmax(0,1fr))}
  .stufen li{flex-direction:column;gap:.4rem;padding:1.1rem 1.15rem 1.35rem}
}
/* Stufenband und Punkteliste stehen im selben Abschnitt — den Abstand, den
   vorher die Abschnittsgrenze gab, trägt das Band selbst. */
.stufen + .stack{margin-top:clamp(2.25rem,4.5vw,3.25rem)}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);text-align:left}
.stat{border-top:2px solid var(--red);padding-top:1.125rem}
.stat .v{font-family:var(--display);font-variation-settings:"wdth" 80,"wght" 850;
  font-size:clamp(2rem,4.5vw,3.25rem);line-height:1;letter-spacing:-.02em;display:block;
  font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.875rem;color:#A9A8A2;display:block;margin-top:.625rem}

/* Partner-Logos — eigener Rahmen je Kachel, sonst bleiben leere Zellen stehen */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:.75rem;margin:0;padding:0;list-style:none}
.logos li{background:transparent;border:1px solid var(--rule);display:grid;place-items:center;
  align-content:center;padding:1.625rem 1.125rem;min-height:8.5rem}
.logos img{height:auto;max-width:100%;object-fit:contain}
.logos .name{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 560;
  font-size:.75rem;color:var(--muted);margin-top:.875rem;text-align:center;line-height:1.4}

/* Team */
.bios{display:grid;gap:clamp(2rem,4vw,3rem)}
.bio{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(1.25rem,3.5vw,2.5rem);
  align-items:start;border-top:1px solid var(--rule);padding-top:clamp(1.5rem,3vw,2rem);
  --bio-titel:1.3125rem}
/* Foto auf Texthöhe wie bei den Leistungspunkten: absolut gesetztes Bild in
   einer gestreckten Fläche, damit es keine eigene Höhe ins Raster einbringt.
   Der Ausschnitt sitzt höher, sonst schneidet der flachere Beschnitt Köpfe ab. */
.bio-bild{margin:0;overflow:hidden;position:relative;align-self:stretch;min-height:10rem}
.bio-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 28%;filter:grayscale(1) contrast(1.04)}
/* Wie bei den Leistungspunkten: der Name beginnt auf der Oberkante des
   Porträts. Zeilenschulter und Oberlänge sassen sonst 4,58 px darunter
   (gemessen bei 21 px Schriftgrösse, das sind 0,218 der Grösse). */
.bio > div{margin-top:calc(-.218 * var(--bio-titel))}
.bio h3{font-family:var(--display);font-variation-settings:"wdth" 82,"wght" 780;
  font-size:var(--bio-titel);line-height:1.15;letter-spacing:-.01em;margin:0 0 .2rem}
.bio .role{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.8125rem;color:var(--red);display:block;margin-bottom:1rem}
.bio p{margin:0 0 1rem;color:var(--muted);max-width:68ch;text-wrap:pretty}
.bio p:last-child{margin-bottom:0}
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:clamp(1.25rem,2.5vw,1.75rem)}
.crew figure{margin:0}
.crew img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:filter .5s var(--expo)}
.crew figure:hover img{filter:grayscale(0) contrast(1)}
.crew figcaption{margin-top:.75rem}
.crew .n{font-family:var(--display);font-variation-settings:"wdth" 84,"wght" 760;
  font-size:.9375rem;display:block}
.crew .r{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 560;
  font-size:.75rem;color:var(--muted);display:block;margin-top:.15rem}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.dl{margin:0;display:grid;gap:1.5rem}
.dl dt{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.8125rem;color:var(--muted);margin-bottom:.3rem}
.dl dd{margin:0;font-size:1.0625rem}
.dl a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  transition:color .4s var(--expo),border-color .4s var(--expo)}
.dl a:hover{color:var(--red);border-color:var(--red)}
.form{display:grid;gap:1.125rem}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.8125rem;color:var(--muted)}
.field input,.field textarea{font-family:var(--body);font-size:1rem;padding:.8rem .95rem;
  border:1.5px solid var(--rule);background:#fff;color:var(--ink);border-radius:0}
.field input:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.field textarea{min-height:8.5rem;resize:vertical}
.form .act{justify-self:start;margin-top:.25rem}
/* Erfolgshinweis nach dem Absenden (öffnet das E-Mail-Programm) */
.form-ok{margin:.25rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--ink)}
.form-ok a{color:var(--red)}
.map{border:1px solid var(--rule);aspect-ratio:16/7;width:100%}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.04)}

/* Abschlussband */
.cta-band{background:var(--ink);color:var(--paper-2);padding-block:clamp(2.75rem,6vw,4rem)}
.cta-band .row2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.cta-band h2{font-family:var(--display);font-variation-settings:"wdth" 80,"wght" 820;
  font-size:clamp(1.375rem,2.6vw,2rem);line-height:1.1;letter-spacing:-.015em;margin:0;max-width:24ch}
.cta-band .act{background:var(--red)}
.cta-band .act::before{background:var(--paper-2)}
.cta-band .act:hover,.cta-band .act:focus-visible{color:var(--ink)}

@media (max-width:60rem){
  .block{grid-template-columns:1fr;gap:.875rem}
  /* Am Handy ist die Kopfzeile zentriert — der Satz darunter und der Aufklapper
     ziehen mit, sonst steht die Überschrift mittig und der Text linksbündig. */
  .block .text{text-align:center}
  .block .text p{margin-inline:auto}
  /* Kasten über die volle Spalte — mit justify-self:center schrumpfte er auf
     die Breite von „Mehr dazu“ und der aufgeklappte Text stand in einer
     89-px-Spalte. Mittig wirkt nur die Zusammenfassungszeile; der
     aufgeklappte Fliesstext bleibt linksbündig lesbar. */
  .block .mehr{justify-self:stretch;text-align:center}
  .block .mehr-in{text-align:left}
  .contact{grid-template-columns:1fr}
  .bio{grid-template-columns:minmax(0,10rem) minmax(0,1fr)}
}
@media (max-width:44rem){
  .stats{grid-template-columns:1fr;gap:1.5rem}
  /* Einspaltig: das Foto steht über dem Text und behält sein Quadrat. */
  .bio{grid-template-columns:1fr}
  .bio-bild{max-width:11rem;aspect-ratio:1;min-height:0}
  .cta-band .row2{flex-direction:column;align-items:flex-start}
}

/* ══════════ Bildköpfe und Bildbänder ══════════
   Jede Unterseite bekommt ein eigenes Bild statt einer leeren dunklen Fläche.
   Gleiche Machart wie der Hero, nur niedriger. */
.page-head.has-img{min-height:clamp(22rem,52vh,32rem);
  overflow:hidden;min-height:clamp(20rem,52vh,30rem);display:grid;align-content:center}
.page-head .bg{position:absolute;inset:0;z-index:0}
.page-head .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Gleiche gemessene Fläche wie im Hero — die zwei Verläufe vorher haben das
   Foto praktisch schwarz gemacht. */
.page-head .bg::after{content:"";position:absolute;inset:0;background:rgba(17,20,36,.64)}
/* Kopfzeile ausnehmen: sie liegt absolut über dem Bild. Gleiche Spezifität
   wie .page-head .kopf-offen, steht aber später — also hier ausschliessen. */
.page-head > *:not(.bg):not(.kopf-offen){position:relative;z-index:1}

/* Bildband zwischen Textabschnitten — bricht die Textwüste auf */
.band{position:relative;height:clamp(16rem,42vh,26rem);overflow:hidden;background:var(--ink)}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:saturate(.68) contrast(1.04)}
/* Deckung gemessen, nicht geschätzt: über der hellen Hauswand hinter dem Zitat
   kam Weiss mit .28/.46 nur auf 2,56:1 — unter dem Minimum von 3:1 für grosse
   Schrift. Mit .48/.62 sind es 4,4:1, das Bild bleibt dabei gut erkennbar. */
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,25,42,.48),rgba(21,25,42,.62))}
.band-quote{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:var(--gutter);text-align:center}
.band-quote p{margin:0;max-width:28ch;color:#fff;font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 820;
  font-size:clamp(1.25rem,3vw,2.25rem);line-height:1.15;letter-spacing:-.018em;
  text-wrap:balance;text-shadow:0 2px 24px rgba(21,25,42,.7)}

/* Kennzahlenband auf Papier — grosse Zahlen als eigener Moment */
.figures{background:var(--ink);color:var(--paper-2);padding-block:var(--sek)}
.figures .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3.5rem)}
.figures .f{border-top:2px solid var(--red);padding-top:1.125rem}
.figures .v{font-family:var(--display);font-variation-settings:"wdth" 80,"wght" 850;
  font-size:clamp(2.25rem,5.5vw,4rem);line-height:1;letter-spacing:-.014em;display:block;
  font-variant-numeric:tabular-nums}
.figures .l{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.9375rem;color:#A9A8A2;display:block;margin-top:.625rem}

/* Partnerleiste auf der Startseite */
.strip{padding-block:var(--sek)}
/* Fliessband. Sechs identische Listen in einer Spur; die Spur wandert um 50%,
   also um genau drei Listenbreiten — danach sieht sie wieder aus wie am Anfang,
   der Sprung ist unsichtbar. Sechs, nicht zwei: eine Spurhälfte muss breiter
   sein als das Fenster, sonst klafft einmal pro Umlauf rechts eine Lücke.
   Kein JavaScript, keine Kopie im Zugänglichkeitsbaum. */
.laufband{overflow:hidden}
.laufband-spur{display:flex;width:max-content;animation:laufband 110s linear infinite}
.laufband ul{display:flex;align-items:center;list-style:none;margin:0;
  padding:0 clamp(.875rem,2vw,1.75rem);gap:clamp(1.75rem,4vw,3.5rem)}
.laufband li{flex:none}
@keyframes laufband{to{transform:translateX(-50%)}}
/* Anhalten, damit man ein Logo auch ansehen kann */
.laufband:hover .laufband-spur,
.laufband:focus-within .laufband-spur{animation-play-state:paused}
/* Höhe UND Breite begrenzen: sonst wirkt ein breites Wortzeichen wie Greenpeace
   um ein Vielfaches präsenter als ein quadratisches wie ASB. */
.strip img{height:auto;object-fit:contain}

@media (max-width:44rem){
  .figures .grid{grid-template-columns:1fr;gap:1.5rem}
  .strip img{max-height:1.75rem}
}

/* ══════════ Inhalt: Kennzahlen-Kontext, Arbeiten, FAQ ══════════
   Keine neue Optik — dieselben Töne, Linien und Schriften. */
.figures .erk{margin:.5rem 0 0;font-size:.9375rem;color:#A9A8A2;max-width:26ch;line-height:1.5}

/* ══════════ Arbeiten bei uns ══════════
   Dunkles Band: bricht den durchgehenden Papierfluss und macht aus dem
   Abschnitt einen eigenen Moment. Jeder Punkt bekommt eine eigene Oberkante,
   damit die vier Spalten nicht ineinanderlaufen.
   Markenrot #C1272F kommt auf Tinte nur auf 2,99:1 — daher der aufgehellte
   Ton, gemessen 5,89:1. */
.arbeiten{background:var(--ink);color:var(--paper-2);padding-block:var(--sek);
  padding-inline:var(--gutter);max-width:none}
.arbeiten .lead-label{color:#A9A8A2;margin-bottom:clamp(2rem,4vw,3rem)}
.vorteile{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(2rem,3.5vw,3rem) clamp(1.75rem,3vw,3rem)}
.vorteile li{border-top:2px solid #F4696E;padding-top:1.125rem}
.vorteile h3{margin:0 0 .6rem;font-family:var(--display);
  font-variation-settings:"wdth" 86,"wght" 740;font-size:1.1875rem;letter-spacing:.005em}
.vorteile p{margin:0;color:#D9D8D3;line-height:1.6;font-size:.9375rem;text-wrap:pretty}
@media (min-width:46rem){ .vorteile{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:76rem){ .vorteile{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Zusatz und Knopf als eigene Zeile unter den vier Punkten, durch eine
   Haarlinie abgesetzt — nicht als fünfte Spalte danebengequetscht. */
.arbeiten-fuss{display:grid;gap:1.5rem;align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid rgba(246,245,242,.18);
  padding-top:clamp(1.75rem,3vw,2.5rem)}
.arbeiten-fuss p{margin:0;color:#D9D8D3;line-height:1.6;max-width:52ch}
.arbeiten-fuss .act{justify-self:start;background:#F4696E;color:var(--ink)}
.arbeiten-fuss .act::before{background:var(--paper-2)}
@media (min-width:56rem){
  .arbeiten-fuss{grid-template-columns:minmax(0,1fr) auto;gap:2.5rem}
  .arbeiten-fuss .act{justify-self:end}
}

.faq{padding-block:0 var(--sek)}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem;padding:1.25rem 0;
  font-family:var(--display);font-variation-settings:"wdth" 82,"wght" 780;
  font-size:clamp(1.0625rem,1.6vw,1.25rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--red);font-size:1.5rem;line-height:1;
  font-variation-settings:"wdth" 100,"wght" 500;transition:rotate .35s var(--expo)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0 0 1.5rem;max-width:64ch;color:var(--muted)}
.faq details a{color:var(--ink)}

/* ══════════ Tippziele ══════════
   Gemessen bei 390px: Kopfnavigation 33px, Textlinks 29px, Fusslinks 18px —
   alles unter den nötigen ~44px. Trefferfläche wächst über Polster plus
   Gegenrand, damit das Layout exakt gleich bleibt. Die sichtbaren Linien
   hängen ab jetzt am Text (text-decoration), nicht an der Boxkante — sonst
   würden sie mit dem Polster nach unten wandern. */
.top a{padding:1rem .4rem;margin:-1rem -.4rem;border-bottom:0;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{border-bottom:0;
  text-decoration:underline;text-decoration-color:var(--red);
  text-decoration-thickness:1.5px;text-underline-offset:.4em}
.tlink{border-bottom:0;padding:.65rem .3rem;margin:-.65rem -.3rem;
  text-decoration:underline;text-decoration-color:var(--rule);
  text-decoration-thickness:1.5px;text-underline-offset:.35em}
.tlink:hover{text-decoration-color:var(--red)}
.hero .tlink{text-decoration-color:rgba(255,255,255,.4)}
.hero .tlink:hover{text-decoration-color:#fff}
/* Ohne color erben diese Links das Browser-Blau — auf dunklem Grund
   unlesbar und auf jeder Seite sichtbar gewesen. */
.foot-nav a,.foot address a,.foot-end a{color:inherit;display:inline-block;
  padding:.6rem .3rem;margin:-.6rem -.3rem}
.dl a{border-bottom:0;display:inline-block;padding:.45rem .2rem;margin:-.45rem -.2rem;
  text-decoration:underline;text-decoration-color:var(--rule);
  text-decoration-thickness:1px;text-underline-offset:.3em}
.dl a:hover{color:var(--red);text-decoration-color:var(--red)}

/* Kopfnavigation bei Handybreite: kleiner und enger, damit nichts umbricht —
   ein zweizeiliger Link ragte aus der 64px-Leiste heraus. */
@media (max-width:44rem){
  .top-in{gap:1rem}
  .top nav{gap:.8rem}
  .top a{font-size:.8125rem}
  .top img{width:6.75rem}
}

/* ══════════ Offene Kopfzeile ══════════
   Liegt transparent auf Hero und Seitenkopf, damit die Menüpunkte von Anfang
   an sichtbar sind. Die deckende Leiste (.top) kommt zusätzlich beim Scrollen
   — dann blendet die offene aus, sonst stünden beide übereinander. */
.kopf-offen{position:absolute;inset:0 0 auto 0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:var(--head-h);padding-inline:var(--gutter);color:var(--paper-2);
  transition:opacity .3s ease}
.kopf-offen img{width:9.5rem;height:auto}
.kopf-offen nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.25rem)}
.kopf-offen a{color:inherit;text-decoration:none;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 560;font-size:.9375rem;white-space:nowrap;
  padding:1rem .4rem;margin:-1rem -.4rem}
.kopf-offen nav a:hover,.kopf-offen nav a[aria-current]{
  text-decoration:underline;text-decoration-color:var(--red);
  text-decoration-thickness:1.5px;text-underline-offset:.4em}
body.gescrollt .kopf-offen{opacity:0;pointer-events:none}

@media (max-width:44rem){
  .kopf-offen{gap:1rem}
  .kopf-offen nav{gap:.8rem}
  .kopf-offen a{font-size:.8125rem}
  .kopf-offen img{width:6.75rem}
}

/* ══════════ Die eine Zahl ══════════
   Drei gleichwertige Zahlen bedeuten, dass keine wichtig ist. 42.069 ist die
   einzige, die etwas erzählt — ungerade, also glaubwürdig, und sie steht für
   den Kern: so oft hat ein Gespräch mit einem Ja geendet. Die 14 steht direkt
   darunter schon als Logoleiste, die 169 gehört auf die Team-Seite. */
/* Direkt unter dem Hero und mittig: die Zahl ist der erste Satz nach dem Bild,
   sie soll frontal stehen und nicht an eine Kante gedrängt sein. */
.fakten{padding-block:var(--sek);text-align:center}
/* Vorzeile über der Kennzahl: gleiche Stimme wie die Zahl, rund ein Viertel
   so groß, dicht darüber gesetzt. */
.fakten .davor{display:block;font-family:var(--display);
  font-variation-settings:"wdth" 72,"wght" 900;
  font-size:clamp(1.375rem,3.6vw,3rem);line-height:1;letter-spacing:0;
  word-spacing:.06em;color:var(--red);margin-bottom:clamp(.1rem,.5vw,.35rem)}
.fakten .zahl{display:block;font-family:var(--display);
  font-variation-settings:"wdth" 72,"wght" 900;
  font-size:clamp(4rem,15vw,13rem);line-height:.85;letter-spacing:-.03em;
  color:var(--red);font-variant-numeric:tabular-nums}
.fakten p{margin:.75rem auto 0;max-width:36ch;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;text-wrap:balance}

/* ══════════ Feinschliff Interaktion ══════════ */
/* <button class="act"> im Formular: Browser-Rahmen weg, Zeigehand */
.act{border:0;cursor:pointer}
/* Druckgefühl beim Klicken — kein Anheben beim Hover, aber Rückmeldung beim Druck */
.act:active{transform:scale(.985)}
/* FAQ klappt weich auf, wo der Browser es kann; sonst sofort — beides korrekt */
.faq details{interpolate-size:allow-keywords}
.faq details::details-content{height:0;overflow:clip;
  transition:height .35s var(--expo),content-visibility .35s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq summary{transition:color .3s var(--expo)}
.faq summary:hover{color:var(--red)}


/* ══════════ Vertikaler Rhythmus ══════════
   Der Abstand zwischen zwei Abschnitten auf demselben Papiergrund gehört
   EINMAL dazwischen — sonst polstern beide und er verdoppelt sich. Der obere
   trägt ihn; Folge-Abschnitte starten bündig. Dunkle Bänder (.band, .cta-band,
   .figures) trennen selbst durch den Farbwechsel. */
main > :is(.wrap,.strip,.einblicke) + :is(.wrap,.strip,.einblicke){padding-top:0}
/* bewusste Ausnahme: die Zahl trägt die Seite und behält Luft nach oben */
main > :is(.wrap,.strip) + .fakten{padding-top:calc(var(--sek)*.5)}

/* ══════════ Langer Fliesstext (Impressum/Datenschutz) ══════════
   Lesebreite auf den Kindern, nicht am Abschnitt — .wrap zentriert per
   margin-inline:auto, ein max-width am Abschnitt zöge die Spalte aus der
   Kante, an der alle anderen Abschnitte stehen. */
.prose > :is(h2,h3,p,ul,ol){max-width:38rem}
.prose h2{
  margin:2.5em 0 .6em;
  font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 820;
  font-size:clamp(1.375rem,2.2vw,1.75rem);
  line-height:1.15;
  letter-spacing:.005em;
  text-wrap:balance;
  /* Komposita wie "Datenschutzgrundverordnung" sprengen sonst schmale
     Displays; Trennung greift über <html lang="de"> */
  hyphens:auto;
  overflow-wrap:break-word;
}
.prose h2:first-of-type{margin-top:1.25em}
.prose h3{
  margin:2em 0 .5em;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  hyphens:auto;
  overflow-wrap:break-word;
}
/* anywhere statt break-word: die Vorlage enthält Cookie-Werte als 700px
   lange Hex-Ketten. break-word ändert die Mindestbreite nicht und liess
   die Seite am Handy auf 726px aufgehen. */
.prose p,.prose li{font-size:1.0625rem;line-height:1.65;overflow-wrap:anywhere}
.prose p{margin:0 0 1em;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--red-lit);text-underline-offset:.16em;overflow-wrap:anywhere}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:650}
.prose h2[id]{scroll-margin-top:calc(var(--head-h) + 1rem)}

/* Eingeklapptes Inhaltsverzeichnis — 53 Abschnitte brauchen einen Einstieg.
   Navigationsmittel, kein Fliesstext: darf breiter sein als die Lesespalte. */
.toc{margin:0 0 3rem;border-block:1px solid var(--rule)}
.toc summary{
  padding-block:1rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.toc summary::marker{color:var(--red)}
.toc ol{margin:0 0 1.5rem;padding:0 0 0 1.4em;columns:17rem;column-gap:2.5rem;font-size:.9375rem}
.toc li{margin-bottom:.45em;break-inside:avoid;color:var(--muted)}
.toc a{color:inherit;text-decoration:none}
.toc a:hover{color:var(--red-lit);text-decoration:underline}


/* Bei reduzierter Bewegung steht das Band still und wird scrollbar —
   die globale Regel würde es sonst an sein Ende springen lassen. */
@media (prefers-reduced-motion:reduce){
  .laufband{overflow-x:auto}
  .laufband-spur{animation:none;transform:none}
  .laufband ul[aria-hidden]{display:none}
}


/* Social-Profile im Fuss — dieselbe Zeile wie die Adresse, keine Icon-Reihe */
.sozial{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.sozial a{display:inline-block;padding-block:.45rem;margin-block:-.45rem;
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.9375rem;color:inherit;text-decoration:none;
  border-bottom:1.5px solid rgba(255,255,255,.35);transition:border-color .2s var(--ease)}
.sozial a:hover{border-color:var(--red)}


/* ══════════ Hamburger ══════════
   Nur am Handy. Am Desktop ist Platz für die vier Punkte — dort ein Menü hinter
   einen Klick zu legen wäre eine Verschlechterung. */
.burger{display:none;align-items:center;gap:.6rem;background:none;border:0;padding:.7rem .4rem;
  margin-inline-end:-.4rem;color:inherit;cursor:pointer;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 640;font-size:.8125rem;letter-spacing:.08em;
  text-transform:uppercase}
.burger-i{position:relative;display:block;width:1.5rem;height:2px;background:currentColor}
.burger-i::before,.burger-i::after{content:"";position:absolute;left:0;width:100%;height:2px;
  background:currentColor;transition:transform .2s var(--ease),top .2s var(--ease)}
.burger-i::before{top:-.45rem}
.burger-i::after{top:.45rem}
[aria-expanded="true"] .burger-i{background:transparent}
[aria-expanded="true"] .burger-i::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .burger-i::after{top:0;transform:rotate(-45deg)}

.menue{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper-2);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(var(--head-h) + 1.25rem) var(--gutter) calc(var(--gutter) + 1rem)}
.menue[hidden]{display:none}
.menue nav{display:grid}
.menue a{font-family:var(--display);font-variation-settings:"wdth" 80,"wght" 800;
  line-height:1.1;color:inherit;text-decoration:none}
.menue a:hover,.menue a:focus-visible{color:var(--red)}
/* Trennlinien zwischen den Gruppen, nicht unter einzelnen Wörtern: die Linie
   hing vorher am Inline-Link und war deshalb nur so breit wie der Text —
   und nur dort, wo ein Untermenü folgte. Das sah aus wie eine Unterstreichung. */
.menue .menueliste{display:grid;gap:0}
.menue .menueliste > li{border-top:1px solid rgba(246,245,242,.14);padding-block:.85rem}
.menue .menueliste > li:first-child{border-top:0;padding-top:0}
.menue .menueliste > li > a{display:block;font-size:clamp(1.75rem,7.5vw,2.375rem)}
/* Unter der Liste blieb sonst eine halbe Bildschirmhöhe leer. Telefon und
   E-Mail sind am Handy ohnehin das, was am häufigsten gebraucht wird. */
.menue-fuss{margin-top:auto;padding-top:clamp(2rem,6vh,3.5rem);display:grid;gap:.5rem;
  justify-items:start}
.menue-fuss a{font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 620;
  font-size:1.0625rem;color:#C9C8C3;text-decoration:none;
  border-bottom:1px solid rgba(246,245,242,.28);padding-bottom:.15rem;
  min-height:2.75rem;display:inline-flex;align-items:center}
.menue-fuss a:hover,.menue-fuss a:focus-visible{color:#F4696E;border-color:#F4696E}
body.menue-offen{overflow:hidden}

@media (max-width:56rem){
  .burger{display:inline-flex}
  .kopf-offen nav,.top nav{display:none}
  /* Die Haarlinie gehört zur Desktop-Kopfzeile, am Handy stört sie */
  .hero .kopf-offen{align-items:center;padding-bottom:0;height:calc(var(--head-h) + 1rem)}
}

/* Schliessen-Knopf im Panel — der Burger liegt unter dem Panel, ohne eigenes X
   käme man auf Touch nur über einen Link wieder raus. */
.menue-zu{position:absolute;top:.65rem;right:var(--gutter);width:2.75rem;height:2.75rem;
  display:grid;place-items:center;background:none;border:1.5px solid rgba(246,245,242,.35);
  border-radius:50%;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.menue-zu:hover,.menue-zu:focus-visible{border-color:var(--red);color:var(--red)}


/* ══════════ Über uns: eigener Kopf ══════════
   Nicht dasselbe Schema wie die übrigen Unterseiten. Der Titel steht auf
   Papier — dort braucht er keinen Schleier —, darunter läuft ein Band echter
   Teamaufnahmen über die volle Breite. */
.uu-kopf{position:relative;background:var(--paper);color:var(--ink);text-align:center;
  padding:calc(var(--head-h) + clamp(3rem,8vh,6rem)) var(--gutter) clamp(2.5rem,6vh,4rem)}
.uu-kopf .hero-marke{color:var(--muted);justify-content:center}
.uu-kopf h1{font-family:var(--display);font-variation-settings:"wdth" 74,"wght" 860;
  font-size:clamp(2.6rem,6.1vw,5.25rem);line-height:.94;letter-spacing:-.022em;margin:0}
.uu-kopf .page-lead{margin:1.25rem auto 0;max-width:56ch;color:var(--muted)}
/* Kopfzeile auf Papier: Tinte statt Papierweiss */
.kopf-papier{color:var(--ink)}
.kopf-papier img{width:clamp(9.5rem,13vw,13.5rem)}
.uu-kopf .kopf-offen{justify-content:space-between;padding-inline:var(--gutter);
  height:calc(var(--head-h) + 2.75rem);align-items:center}
.uu-kopf .kopf-offen a{font-size:1rem}
.uu-kopf .kopf-offen nav{gap:clamp(1.25rem,2.8vw,2.75rem)}

/* Durchlaufende Galerie — dieselbe Mechanik wie das Partner-Fliessband:
   die Spur wandert um 50%, also um genau eine Bildfolge, dadurch nahtlos. */
.uu-galerie{overflow:hidden;background:var(--paper)}
.galerie-spur{display:flex;width:max-content;gap:2px;animation:laufband 90s linear infinite}
.uu-galerie figure{margin:0;flex:none;width:clamp(13rem,20vw,20rem);aspect-ratio:4/5;overflow:hidden}
.uu-galerie img{width:100%;height:100%;object-fit:cover;display:block}
.uu-galerie:hover .galerie-spur,
.uu-galerie:focus-within .galerie-spur{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .uu-galerie{overflow-x:auto}
  .galerie-spur{animation:none}
}


/* ══════════ Untere Hälfte auf volle Breite ══════════
   Ab "Arbeiten bei uns" stand der Inhalt in derselben 70rem-Spalte wie oben —
   auf grossen Schirmen wirkt die ganze Seite dadurch wie eine schmale Mitte.
   Unten spannt sie jetzt auf, die Lesebreiten regeln die Elemente selbst. */
/* --kante bildet genau die 70rem-Spalte nach — damit wäre nichts gewonnen.
   Der Gutter lässt die Abschnitte wirklich aufspannen; die Lesebreiten
   regeln die Elemente darin selbst (.row-in 64ch, .vorteile li 60ch). */
.belief,.faq{max-width:none;padding-inline:var(--gutter)}
@media (max-width:56rem){
  .belief,.faq{padding-inline:var(--gutter)}
}


/* Kopf und Fuss spannen wie die untere Seitenhälfte über die volle Breite —
   vorher standen sie in der schmalen 70rem-Spalte und wirkten eingeklemmt. */
.foot .wrap{max-width:none;padding-inline:var(--gutter)}




/* ══════════ Tippziele ══════════
   Gemessen bei 390px: Burger, Logo, Fusslinks und die Textlinks lagen unter
   den nötigen 24px. Polsterung mit Gegenmarge, damit nichts verrutscht. */
.burger{min-height:2.75rem}
.foot-end a{padding-block:.5rem;margin-block:-.5rem}
.kopf-offen > a:first-child,.top-in > a:first-child{display:inline-flex;align-items:center;
  min-height:2.75rem}
.tlink{display:inline-flex;align-items:center;min-height:2.75rem}


/* ══════════ Einblicke: Bildmosaik ══════════
   Dichtes Raster aus echten Einsatzaufnahmen. Feste Zeilenhöhe plus
   unterschiedliche Spannweiten ergeben das Mosaik; grid-auto-flow:dense füllt
   die Lücken auf, die durch die grossen Kacheln entstehen. */
.einblicke{padding-block:var(--sek);padding-inline:var(--gutter);max-width:none}
.einblicke-kopf{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.einblicke-kopf h2{margin:0;font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 820;
  font-size:clamp(1.9rem,4vw,3.25rem);line-height:1;letter-spacing:-.015em}
.mosaik{display:grid;gap:.3rem;grid-auto-flow:dense;
  grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(6rem,26vw,9rem)}
.mosaik figure{margin:0;overflow:hidden;grid-row:span 1;grid-column:span 1}
.mosaik img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:40rem){
  /* 4 Spalten: 2 grosse Kacheln (je 4 Zellen) + 8 kleine = 16 Zellen = 4 Reihen */
  .mosaik{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(6rem,13vw,9rem)}
  .mosaik figure:nth-child(1),
  .mosaik figure:nth-child(6){grid-column:span 2;grid-row:span 2}
}
@media (min-width:64rem){
  /* 6 Spalten: 4x(2x2)=16, 2x(2x1)=4, 4x(1x1)=4 -> 24 Zellen = genau 4 Reihen.
     Ohne diese Rechnung bleibt unten ein Loch stehen (gemessen 81% Füllung). */
  .mosaik{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(6rem,8.5vw,10rem)}
  .mosaik figure{grid-column:span 1;grid-row:span 1}
  .mosaik figure:nth-child(1),
  .mosaik figure:nth-child(4),
  .mosaik figure:nth-child(6),
  .mosaik figure:nth-child(9){grid-column:span 2;grid-row:span 2}
  .mosaik figure:nth-child(5),
  .mosaik figure:nth-child(10){grid-column:span 2;grid-row:span 1}
}


/* ══════════ Zitat, Fassung A: auf dem Foto ══════════
   Deckung 0,62 gemessen wie im Hero — weisser Text hält damit 4,5:1. */
.zitat-foto{position:relative;min-height:clamp(22rem,46vw,34rem);display:grid;
  align-items:end;overflow:hidden}
.zitat-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zitat-foto::after{content:"";position:absolute;inset:0;background:rgba(17,20,36,.62)}
.zitat-in{position:relative;z-index:1;padding:clamp(2rem,5vw,4rem) var(--gutter);max-width:40rem}
.zitat-foto blockquote{margin:0;font-family:var(--display);
  font-variation-settings:"wdth" 80,"wght" 780;color:var(--paper-2);
  font-size:clamp(1.4rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.zitat-foto .wer{margin:1rem 0 0;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;font-size:.9375rem;color:#D9D8D3}
.zitat-nach{padding-block:var(--sek);padding-inline:var(--gutter);max-width:none;
  display:grid;gap:1.75rem;align-items:start}
.zitat-nach p{margin:0;color:var(--muted);line-height:1.65;max-width:62ch}
@media (min-width:56rem){
  .zitat-nach{grid-template-columns:minmax(0,1fr) auto;gap:3rem}
  .zitat-nach .act{justify-self:end}
}

/* ══════════ Zitat, Fassung B: zweispaltig ══════════ */
.zitat-zwei{padding-block:var(--sek);padding-inline:var(--gutter);max-width:none;
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
.zitat-zwei blockquote{margin:0;font-family:var(--display);
  font-variation-settings:"wdth" 80,"wght" 780;color:var(--red);
  font-size:clamp(1.6rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.018em;
  max-width:20ch;text-wrap:balance}
.zitat-zwei .wer{margin:1.25rem 0 0;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;font-size:.9375rem;color:var(--muted)}
.zitat-zwei-t p{margin:0 0 1.75rem;color:var(--muted);line-height:1.65;max-width:54ch}
@media (min-width:56rem){ .zitat-zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }


/* ══════════ Menü mit Ebenen ══════════
   Der Seitenbaum war nirgends sichtbar: das Menü kannte nur die vier obersten
   Punkte. Aufklappen per Hover UND :focus-within — damit auch mit Tastatur
   erreichbar, ohne JavaScript. */
.menueliste{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.25rem);
  list-style:none;margin:0;padding:0}
.menueliste > li{position:relative}
.hat-unter > a::after{content:"";display:inline-block;width:.4em;height:.4em;
  margin-left:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);opacity:.6}
.untermenue{position:absolute;top:100%;left:-1rem;min-width:13rem;z-index:70;
  list-style:none;margin:0;padding:.5rem 0;background:var(--ink);
  border-top:2px solid var(--red);
  opacity:0;visibility:hidden;translate:0 .35rem;
  transition:opacity .18s var(--ease),translate .18s var(--ease),visibility .18s}
.hat-unter:hover .untermenue,
.hat-unter:focus-within .untermenue{opacity:1;visibility:visible;translate:0 0}
.untermenue a{display:block;padding:.6rem 1rem;color:var(--paper-2);white-space:nowrap;
  font-size:.9375rem;border-bottom:0}
.untermenue a:hover,.untermenue a:focus-visible{color:#F4696E;background:rgba(246,245,242,.06)}

/* ══════════ Geschwisternavigation ══════════
   Von einer Unterseite kam man im Inhalt gar nicht zu ihren Nachbarseiten. */
/* Dunkles Band direkt unter dem Seitenkopf, Inhalt mittig. Dasselbe Mittel wie
   beim Stufenband und beim Kontaktband; die aktive Seite steht in Rot. */
/* Kein Band, sondern die drei Namen in Schlagzeilengrösse auf Papier, mittig.
   Sie stehen näher am Inhalt darunter als am Seitenkopf darüber — deshalb der
   grosse Abstand oben, der kleine unten (und der folgende Abschnitt verliert
   seinen eigenen oberen Abstand, sonst wäre die Leiste unten weiter weg). */
.geschwister{padding:clamp(2.25rem,5vw,3.5rem) var(--gutter) 0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.4rem clamp(1.5rem,4vw,3rem)}
.geschwister + .section{padding-top:clamp(2rem,4vw,3rem)}
.geschwister-auf{width:100%;text-align:center;
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 640;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;margin-bottom:.45rem}
.geschwister-auf:hover{color:var(--ink)}
.geschwister-in{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem clamp(1.5rem,4vw,3rem)}
.geschwister-in a{font-family:var(--display);font-variation-settings:"wdth" 80,"wght" 780;
  font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.1;letter-spacing:-.012em;
  /* Gemessen: #83847E kam auf Papier nur auf 3,19:1, knapp über dem Minimum
     für grosse Schrift. Dieser Ton liegt bei 3,7:1 und bleibt trotzdem klar
     hinter der aktiven Seite zurück. */
  color:#787971;text-decoration:none;padding-block:.15rem}
.geschwister-in a:hover{color:var(--ink)}
.geschwister-in a[aria-current]{color:var(--ink);box-shadow:inset 0 -.13em 0 0 var(--red)}
@media (max-width:40rem){
  /* Nebeneinander brachen die drei Namen ungleich um (zwei oben, einer unten)
     und die Tippflächen waren nur 31 px hoch. Untereinander: sauber zentriert,
     jede Zeile ≥44 px tippbar; die aktive Seite in Rot statt unterstrichen. */
  .geschwister{padding-top:clamp(1.75rem,6vw,2.5rem)}
  .geschwister-in{flex-direction:column;gap:0;width:100%}
  .geschwister-in a{padding-block:.55rem;text-align:center}
  .geschwister-in a[aria-current]{box-shadow:none;color:var(--red)}
}

@media (max-width:56rem){
  /* Im Panel stehen die Ebenen untereinander — kein Aufklappen nötig */
  .menue .untermenue{position:static;opacity:1;visibility:visible;translate:none;
    background:none;border-top:0;padding:.35rem 0 0 1rem;min-width:0;display:grid}
  .menue .untermenue a{display:block;padding:.45rem 0;font-size:1.25rem;
    font-variation-settings:"wdth" 86,"wght" 640;color:#C9C8C3}
  .menue .hat-unter > a::after{display:none}
}






/* ══════════ Pfeile in Links ══════════
   Ein SVG ohne Breitenangabe füllt seinen Platz komplett aus. Die gezielte
   Regel ging bei Umbauten schon zweimal verloren — daher hier als Netz über
   alle Links, nicht nur über einzelne Klassen. */
a svg{flex:none;width:.85em;height:.6em}
.act svg{width:1.0625rem;height:.7rem}
.tlink svg{margin-left:.45em;vertical-align:.06em;transition:transform .22s var(--ease)}
.tlink:hover svg{transform:translateX(.3em)}


/* ══════════ Aufstellung mit Bild (I2) ══════════ */
.block-bild{margin:0;overflow:hidden;aspect-ratio:16/9;align-self:start}
.block-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:60rem){
  /* Drei Spalten: Ziffer, Textspalte, Bild. Die Kopfzeile löst sich auf,
     damit Ziffer und Titel in ihre eigene Spalte gehen. */
  /* Zeilenabstand über Margins statt row-gap: das Bild spannt über drei
     Zeilen, und ohne Aufklapper bliebe die dritte leer — ihr Gap machte das
     Bild sonst 8 px höher als den Text. */
  .block.hat-bild{grid-template-columns:auto minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;column-gap:clamp(1.25rem,3vw,2.5rem);row-gap:0}
  .block.hat-bild .kopf{display:contents}
  /* Ziffer und Titel beginnen auf der Oberkante des Bildes. Abgezogen wird
     jeweils die Strecke von der Kastenoberkante zur Versalhöhe (gemessen:
     0,131 der Zifferngrösse, 0,188 der Titelgrösse). */
  .block.hat-bild .block-nr{grid-column:1;grid-row:1;transform:none;
    margin-top:calc(-.131 * var(--nr-groesse))}
  .block.hat-bild h3{grid-column:2;grid-row:1;text-align:left;
    margin-top:calc(-.188 * var(--titel-groesse))}
  .block.hat-bild .text{grid-column:2;grid-row:2;margin-top:.6rem}
  .block.hat-bild .mehr{grid-column:2;grid-row:3;margin-top:.9rem}
  /* Das Bild nimmt die Höhe der Textspalte an, statt eine feste Fläche zu
     behaupten — so schliessen Text und Bild oben UND unten bündig ab. Absolut
     gesetzt, damit es keine eigene Höhe in die Rasterzeile einbringt. Der
     Ausschnitt sitzt höher, sonst schneidet der flache Beschnitt Köpfe ab. */
  .block.hat-bild .block-bild{grid-column:3;grid-row:1/span 3;margin:0;
    aspect-ratio:auto;align-self:stretch;min-height:8.5rem;position:relative}
  .block.hat-bild .block-bild img{position:absolute;inset:0;object-position:50% 38%}
}

/* ══════════ Aufklapper für den Rest des Punktes ══════════
   Ziffer, Titel, ein Satz und Bild stehen offen; alles Weitere liegt dahinter.
   Der Kasten füllt die Spalte — mit justify-self:start schrumpfte er auf die
   Breite des Wortes „Mehr dazu“ und der aufgeklappte Text stand in einer
   89 px schmalen Spalte. Kompakt wirkt nur die Zusammenfassung (inline-flex). */
.mehr summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:.6rem;min-height:2.75rem;font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 620;font-size:.9375rem;color:var(--ink);
  transition:color .25s var(--ease)}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::after{content:"+";color:var(--red);font-size:1.25rem;line-height:1;
  transition:rotate .3s var(--expo)}
.mehr[open] summary::after{rotate:45deg}
.mehr summary:hover,.mehr summary:focus-visible{color:var(--red)}
.mehr-in{padding-top:.5rem}
.mehr-in p{margin:0 0 1rem;color:var(--muted);max-width:62ch;line-height:1.6;text-wrap:pretty}
.mehr-in p:last-child{margin-bottom:0}

/* ══════════ Über uns: Papierstreifen vor dem dunklen Band ══════════
   Die Galerie stiess sonst mit voller Bildbreite direkt auf die Tintenfläche.
   Bewusst knapp gehalten: ein Satz, ein Link, wenig Höhe. */
.uu-zwischen{padding-block:clamp(2.5rem,5vw,3.75rem);background:var(--paper)}
.uu-zwischen .wrap{display:grid;justify-items:center;gap:1.25rem;text-align:center}
.uu-zwischen p{margin:0;max-width:44rem;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;text-wrap:pretty}

/* ══════════ Werte als dunkles Band (U2) ══════════
   Markenrot kommt auf Tinte nur auf 2,99:1 — daher der aufgehellte Ton. */
.werte-band{background:var(--ink);color:var(--paper-2);padding-block:var(--sek)}
.werte-in{padding-inline:var(--gutter)}
.werte-band .lead-label{color:#A9A8A2;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.werte{display:grid;gap:clamp(2rem,4vw,3rem)}
.wert{border-top:2px solid #F4696E;padding-top:1.125rem}
.wert h3{margin:0 0 .6rem;font-family:var(--display);
  font-variation-settings:"wdth" 86,"wght" 740;font-size:1.1875rem}
.wert p{margin:0 0 .75rem;color:#D9D8D3;line-height:1.6;font-size:.9375rem}
.wert p:last-child{margin-bottom:0}
@media (min-width:52rem){ .werte{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ══════════ Team: Porträts mit Namen ══════════
   Eine getrennte Namensliste neben einem Bildraster lässt sich keinem Gesicht
   zuordnen — der Name gehört unter das Porträt. Feste Spaltenzahl, damit die
   acht Kacheln in vollen Reihen aufgehen und keine Waise unten steht. */
.crew{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:34rem){ .crew{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ══════════ Partner: Aufstellung (P3) ══════════ */
.logos{display:grid;gap:0;list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule);grid-template-columns:1fr}
.logos li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2rem);align-items:center;border:0;background:none;
  border-bottom:1px solid var(--rule);padding-block:.875rem}
.logos img{height:auto;max-height:2.25rem;object-fit:contain;justify-self:start;
  width:auto;max-width:100%}
.p-name{font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 640;
  font-size:.9375rem}
.kein-logo{display:block}
@media (min-width:56rem){ .logos{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2.5rem,6vw,5rem)} }

/* ══════════ Kontakt: mittig ══════════
   Vorher lagen Daten und Formular in einem zweispaltigen Raster mit einem
   Bereich für die Karte, die aber gar nicht darin liegt — die rechte Hälfte
   blieb leer. Jetzt eine mittige Spalte, die Karte darunter über die Breite. */
.kontakt{display:grid;gap:clamp(2rem,4vw,3rem);justify-items:center;
  text-align:center;max-width:44rem;margin-inline:auto}
.kontakt .lead-label{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.kontakt .dl{justify-items:center}
.kontakt .form{width:100%;max-width:34rem;text-align:left;
  padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--rule)}
.kontakt .form .act{justify-self:center}
/* Karte auf dieselbe Spaltenbreite: eine 70rem breite Karte unter einem
   44rem breiten Block sieht aus wie zwei verschiedene Seiten. */
.karte-mitte{max-width:44rem;margin-inline:auto}
@media (min-width:44rem){
  .kontakt .dl{grid-template-columns:repeat(3,auto);justify-content:center;
    gap:1.5rem clamp(2rem,5vw,3.5rem);align-items:start}
}

/* Karte erst nach Klick (DSGVO): der Platzhalter hält die Fläche, bis das
   Google-iframe kommt. */
.map{position:relative;min-height:clamp(16rem,42vw,26rem);background:var(--paper-2)}
.map .karte-platz{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:1rem;padding:1.5rem;text-align:center;border:1px solid var(--rule)}
.map .karte-platz p{margin:0;max-width:34ch;color:var(--muted);font-size:.9375rem;line-height:1.5}
.map .karte-laden{padding:.8rem 1.4rem;background:var(--red);color:#fff;font-family:var(--display);
  font-variation-settings:"wght" 700,"wdth" 90;font-size:.9375rem}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}