/* ==========================================================================
   Fischer Haustechnik — Anthrazit & Messing
   Tokens und Regeln folgen DESIGN.md.
   Dunkler Grund, ein Messing-Akzent, keine Schatten, nur transform/opacity/filter.
   ========================================================================== */

:root{
  /* Flaechen */
  --ground:#0E1013;
  --panel:#1A1F26;
  --panel-2:#252B34;

  /* Schrift */
  --text:#F2F4F7;
  --muted:#9AA3AF;
  --muted-dim:#7E8794;

  /* Linien */
  --line:rgba(242,244,247,.10);
  --line-strong:rgba(242,244,247,.18);

  /* Akzent */
  --brass:#B8934F;
  --brass-lt:#D4B678;
  /* Gold als FLAECHE bleibt in beiden Themen das Markengold. Gold als TEXT
     muss auf Warmweiss dunkler werden: #B8934F erreicht dort nur 2,56:1. */
  --brass-fill:#B8934F;
  /* Gold fuer grosse Ziffern. Ab 24px gilt die 3:1-Schwelle, deshalb darf es
     auf hell heller sein als das Textgold (#96742F: 3,9 auf Grund, 3,4 auf
     Panel). Bei #7E5F26 lasen sich die Zahlen braun statt golden. */
  --brass-display:#D4B678;
  --brass-wash:rgba(184,147,79,.12);
  --brass-edge:rgba(184,147,79,.35);
  --on-brass:#141414;

  /* Schriftfamilien */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Schriftskala. Fuenf Textstufen mit echten Spruengen statt fuenfzehn
     Groessen im Abstand von ein bis zwei Prozent. Wer keine Stufen setzt,
     bekommt keine Hierarchie, sondern Brei. */
  --t-2xs:.75rem;    /* 12px  Mono-Etiketten, Kategorien */
  --t-xs:.875rem;    /* 14px  Metadaten, Bildunterschriften */
  --t-sm:1rem;       /* 16px  Kleintext, Navigation, Kartentext */
  --t-base:1.125rem; /* 18px  Fliesstext */
  --t-md:1.375rem;   /* 22px  Lead */
  --t-lg:clamp(1.375rem,1.9vw,1.625rem);  /* 22-26px  h3 */
  --t-xl:clamp(2.25rem,4.4vw,3.5rem);     /* 36-56px  h2 */
  --t-2xl:clamp(2.25rem,6vw,4.75rem);     /* 36-76px  h1 */
  --t-3xl:clamp(4rem,10.5vw,9.75rem);     /* 64-156px Kennzahlen */
  /* Bauteileigene Anzeigegrade. Sie stehen hier und nicht im Bauteil, damit
     die Regel "kein font-size mit direktem Wert" ohne Ausnahme gilt. */
  --t-svc:clamp(1.5rem,2.7vw,2.375rem);   /* 24-38px  Leistungstitel */
  --t-stat:clamp(1.75rem,3.4vw,2.75rem);  /* 28-44px  Kennzahl im Band */
  --t-zahl:clamp(2.5rem,5vw,4rem);        /* 40-64px  Zahl in der Tuer */
  --t-notruf:clamp(2.5rem,6.6vw,5.25rem); /* 40-84px  Notdienstnummer */
  --t-ghost:clamp(5rem,11vw,10rem);       /* 80-160px Ordnungszahl im Grund */
  --t-mark:22vw;                          /*          Schriftzug in der Fussleiste */
  --t-path:clamp(1.625rem,2.5vw,2.375rem);/* 26-38px  Ueberschrift im Wegepanel */
  --t-hero:clamp(2.5rem,5.75vw,4.5rem);   /* 40-72px  h1 im Hero */

  /* Abstandsskala. Vorher zwoelf Einzelwerte ohne Verhaeltnis zueinander. */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2.25rem; --s6:3.5rem; --s7:5rem; --s8:7.5rem;

  /* Raum */
  --gutter:clamp(1.25rem,4vw,3rem);
  --section:clamp(4.5rem,8vw,8rem);
  --max:1280px;

  /* Eine Radienregel fuer die ganze Seite: keine. Scharfe Kanten lesen sich
     technisch statt freundlich-generisch und passen zum Gewerk. */
  --radius:0px;
  --radius-sm:0px;
  --ease:cubic-bezier(.16,.84,.35,1);
  --ease-lang:cubic-bezier(.22,.61,.24,1);
}

/* ==========================================================================
   Helles Thema fuer einzelne Abschnitte
   Der Skill verbietet in 4.11 Abschnitte, die mitten auf der Seite ins
   Gegenteil kippen, und nennt eine Ausnahme fuer eine bewusst gesetzte
   Farbdramaturgie. Der Auftrag verlangt genau die: dunkel, hell, dunkel,
   hell, dunkel. Umgesetzt als lokale Token, nicht als zweites Stylesheet -
   jedes Bauteil funktioniert dadurch unveraendert in beiden Flaechen.
   Alle Werte sind gegen Grund UND Panel geprueft, Minimum 4,5:1.
   ========================================================================== */
.on-light{
  --ground:#F4F2ED;      /* warmweiss, kein kaltes Weiss */
  --panel:#E8E4DA;       /* 1,14 Flaechenkontrast, bewusst knapp */
  --panel-2:#DFDACE;
  --text:#14171A;        /* 16,1:1 auf Grund */
  --muted:#54595F;       /* 6,3:1 auf Grund, 5,7:1 auf Panel */
  --muted-dim:#5F656C;   /* 5,3:1 auf Grund, 4,7:1 auf Panel */
  --line:rgba(20,23,26,.13);
  --line-strong:rgba(20,23,26,.22);
  --brass:#7E5F26;       /* Textgold hell: 5,3:1 statt 2,6:1 */
  --brass-lt:#5F461A;
  --brass-wash:rgba(126,95,38,.09);
  --brass-edge:rgba(126,95,38,.32);
  --brass-display:#96742F;
  background:var(--ground);
  color:var(--text);
}
/* Umrissbuttons brauchen auf hell eine sichtbare Kante. */
.on-light .btn--ghost{border-color:rgba(20,23,26,.28);color:var(--text)}
.on-light .btn--ghost:hover{background:rgba(20,23,26,.05);border-color:var(--brass)}
/* Auf dunklem Grund sinken Fotos durch eine leichte Abdunklung ein. Auf
   Warmweiss ist genau das falsch: dort sollen sie leuchten. */
.on-light img{filter:none}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:var(--t-base);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}
a{color:var(--brass);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--brass-lt)}

/* Oberflaechen, die der Browser sonst selbst faerbt. Ohne diese vier Regeln
   traegt die Seite an ihren Raendern fremdes Design. */
::selection{background:var(--brass-fill);color:var(--on-brass)}
::-moz-selection{background:var(--brass-fill);color:var(--on-brass)}
:root{color-scheme:dark;scrollbar-color:#2C333C var(--ground)}
input,textarea,select{caret-color:var(--brass)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:#2C333C;border-radius:0;border:3px solid var(--ground)}
::-webkit-scrollbar-thumb:hover{background:#3A424D}
/* Ziffern in Tabellen, Uhrzeiten und Nummern laufen sonst unterschiedlich breit. */
.mono,.hours b,.tl__year,.alarm__num,.step__n,.topbar,.job__meta,.refrow__loc,
.ref__loc,.field label,.crumbs{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{font-family:var(--display);color:var(--text);margin:0;font-weight:400;line-height:1.1;
  /* Deutsche Komposita sprengen sonst die Spalte: "Datenschutzerklaerung"
     braucht bei 40px 364px, die Spalte hat bei 375px Fenster nur 335px.
     Mit lang="de" trennt der Browser korrekt statt hart umzubrechen.
     hyphenate-limit-chars haelt die Trennung von normalen Woertern fern:
     erst ab zwoelf Zeichen wird getrennt, sonst wurde aus "arbeitet"
     ein "ar-beitet". Wo die Eigenschaft fehlt, bleibt es beim alten
     Verhalten - das ist ein kosmetischer, kein funktionaler Verlust. */
  overflow-wrap:break-word;hyphens:auto;
  -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;
  hyphenate-limit-chars:12 5 5}
h1{font-size:var(--t-2xl);letter-spacing:-.035em;font-weight:400}
h2{font-size:var(--t-xl);letter-spacing:-.03em;font-weight:400}
h3{font-size:var(--t-lg);letter-spacing:-.02em;font-weight:500}
h4{font-size:var(--t-base);letter-spacing:-.01em;font-weight:500}
p{margin:0 0 var(--s3);max-width:58ch}
h2+p,h2+.lead,h3+p,h1+.lead{margin-top:1.25rem}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--panel{
  background:var(--panel);
  border-block:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(184,147,79,.10)
}
.lead{font-size:var(--t-md);color:var(--muted);max-width:44ch;line-height:1.45}
.muted{color:var(--muted)}
.small{font-size:var(--t-sm)}
.skip{position:absolute;left:-9999px;top:0;background:var(--brass-fill);color:var(--on-brass);padding:.75rem var(--s3);z-index:200}
.skip:focus{left:1rem;top:1rem}
:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:0
}

/* Kein Eyebrow / Kicker ueber Ueberschriften: die Ueberschrift traegt sich
   selbst. Die Einordnung leistet der Brotkrumenpfad im Seitenkopf. */

/* ---------- Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem var(--s4);border-radius:0;
  font-family:var(--body);font-size:var(--t-sm);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .08s ease
}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brass-fill);color:var(--on-brass)}
.btn--primary:hover{background:#D4B678;color:var(--on-brass)}
.btn--ghost{border-color:var(--brass-edge);color:var(--text);background:transparent}
.btn--ghost:hover{background:var(--panel-2);border-color:var(--brass-edge);color:var(--text)}
.btn--lg{min-height:58px;padding:1.05rem var(--s5);font-size:var(--t-sm)}
.btn--block{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:.85rem}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:500;
  color:var(--brass);text-decoration:none;font-size:var(--t-sm)
}
.tlink svg{transition:transform .25s var(--ease)}
.tlink:hover{color:var(--brass-lt)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- Top utility bar ------------------------------------------- */
.topbar{background:#0A0C0F;border-bottom:1px solid var(--line)}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.06em
}
.topbar__hours{color:var(--muted-dim)}
/* Notdienst optisch von der normalen Erreichbarkeit trennen: eigene Kante,
   eigener Ton. Vorher standen beide als gleichwertige Links nebeneinander. */
.topbar__links{display:flex;align-items:center;gap:0}
.topbar__links a{padding-inline:1.25rem}
.topbar__links a:first-child{border-right:1px solid var(--line);padding-right:1.5rem}
.topbar a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding-block:.6rem}
.topbar a:hover{color:var(--text)}
.topbar a svg{color:var(--brass)}
.topbar__emergency{color:var(--brass-lt)!important;letter-spacing:.08em}
.topbar__emergency::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

/* ---------- Header ---------------------------------------------------- */
/* Die Kopfleiste verdichtet sich beim Scrollen, statt nur die Linie zu
   wechseln: Hoehe und Logo gehen zurueck, der Grund wird deckend. Der
   Zustand kommt vom IntersectionObserver in main.js, nicht von einem
   Scroll-Listener. */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(14,16,19,.86);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background-color .4s var(--ease)
}
.header.is-stuck{border-bottom-color:var(--line-strong);background:rgba(14,16,19,.97)}
.header__bar{
  display:flex;align-items:center;gap:1.25rem;min-height:112px;
  transition:min-height .4s var(--ease)
}
.header.is-stuck .header__bar{min-height:88px}
/* Die Marke bekommt einen eigenen Bereich, keinen Rest neben der
   Navigation. Der Mindestbreite wegen: das Zeichen ist gestapelt
   (Symbolreihe ueber Schriftzug, 2,27:1) - Hoehe kostet hier Breite. */
.brand{
  display:flex;align-items:center;flex:none;text-decoration:none;
  padding-inline-end:clamp(.5rem,1vw,1rem)
}
.brand img{height:78px;width:auto;transition:height .4s var(--ease)}
.header.is-stuck .brand img{height:62px}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{
  font-size:var(--t-xs);color:#C2CAD4;text-decoration:none;padding:.85rem .34rem;
  letter-spacing:.012em;position:relative;transition:color .18s var(--ease);white-space:nowrap
}
.nav a::after{
  content:"";position:absolute;left:.55rem;right:.55rem;bottom:.55rem;height:1.5px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease)
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header__actions{display:flex;align-items:center;gap:.75rem;flex:none}
.header__actions .btn{padding-inline:var(--s3)}
.header__tel{
  display:none;align-items:center;gap:.5rem;text-decoration:none;color:var(--text);
  font-family:var(--mono);font-size:var(--t-sm);padding:.5rem .25rem
}
.header__tel svg{color:var(--brass)}
.burger{
  display:none;width:48px;height:48px;border:1px solid var(--line-strong);
  background:transparent;border-radius:var(--radius-sm);
  align-items:center;justify-content:center;cursor:pointer
}
.burger span{display:block;width:20px;height:1.5px;background:var(--text);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--text);
  transition:transform .25s var(--ease)
}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobilenav{
  display:none;border-top:1px solid var(--line);background:var(--ground);
  grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)
}
.mobilenav__inner{overflow:hidden;min-height:0}
.mobilenav.is-open{grid-template-rows:1fr}
.mobilenav.is-open .mobilenav__inner{overflow-y:auto;max-height:calc(100dvh - 116px)}
.mobilenav ul{padding:.25rem 0 1rem}
/* Nur die Menuepunkte, nicht die Buttons darunter - sonst gewinnt diese
   Regel gegen .btn--primary und der Button-Text wird unlesbar. */
.mobilenav ul a{
  display:block;padding:.9rem var(--gutter);font-size:var(--t-base);color:var(--text);
  text-decoration:none;border-bottom:1px solid var(--line)
}
.mobilenav ul a:hover,.mobilenav ul a[aria-current="page"]{background:var(--brass-wash);color:var(--brass-lt)}
.mobilenav__cta{padding:1.15rem var(--gutter) 0;display:grid;gap:.6rem}

/* ---------- Page head (Unterseiten) ----------------------------------- */
.pagehead{background:var(--panel);border-bottom:1px solid var(--line)}
/* Nicht die Breite des Containers deckeln: das Element traegt auch die
   Klasse .container, und deren margin-inline:auto zentriert den schmaleren
   Kasten. Der Seitentitel stand dadurch 192px weiter innen als jeder
   Abschnitt darunter. Gedeckelt wird der Text, nicht der Container. */
.pagehead__inner{padding-block:clamp(3rem,5.5vw,4.5rem)}
.pagehead h1{max-width:22ch}
.crumbs{
  font-size:var(--t-xs);color:var(--muted-dim);margin-bottom:1.5rem
}
.crumbs a{color:var(--muted-dim);text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.crumbs span{margin:0 .5rem;opacity:.5}

/* ==========================================================================
   Hero: ein Foto, eine Aussage
   Navigation, darunter ein Bild ueber die volle Breite, die Ueberschrift
   direkt darauf. Keine Karte, kein Rahmen, kein zweiter Textbereich.

   ZWEI STELLEN ZUM NACHJUSTIEREN, sonst nichts:
     --hero-pos   Bildausschnitt (object-position)
     --hero-hoch  Hoehe des Heros
   Der Bildpfad steht ausschliesslich im Markup in _build/pages_a.py.
   ========================================================================== */
.hero{
  --hero-pos:50% 54%;          /* Ausschnitt: nach dem Bildtausch hier schieben */
  --kopf:157px;                /* Infozeile 45 + Kopfleiste 112 */
  --hero-hoch:calc(100svh - var(--kopf));
  position:relative;overflow:hidden;
  height:var(--hero-hoch);min-height:34rem;
  background:var(--ground)
}
.hero__foto{position:absolute;inset:0;margin:0}
.hero__foto img{
  width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos);
  display:block
}

/* Gerichteter Schleier statt flaechiger Abdunklung: unten und links deckt
   er, oben rechts bleibt das Bild offen. Gerechnet gegen den denkbar
   hellsten Bildpunkt ergibt die Textzone rund 0,91 Deckkraft - Warmweiss
   steht dort bei 14,5:1, Gold bei 8,8:1. Der Schleier traegt also
   unabhaengig davon, welches Foto spaeter eingesetzt wird. */
.hero__schleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Gerichtet, nicht flaechig. Die Hauptlast traegt der Verlauf von LINKS:
     dort steht der Text, und dort deckt er bis 26% Breite mit 0,90 und
     laeuft erst bei 80% aus. Die rechte Bildhaelfte bleibt bei 0,18 -
     genau dort sitzen die Markensymbole und der Schriftzug auf dem
     Fahrzeug, die sichtbar bleiben sollen.
     Nachgerechnet wurde nicht am Rand des Textblocks, sondern ueber
     dessen ganze Flaeche gegen den hellsten Bildpunkt (99,8. Perzentil),
     bei 1024, 1280, 1440 und 1920. Schwaechster Wert 4,58:1, Gold auf der
     zweiten Ueberschriftzeile. Alles ueber AA. */
  background:
    linear-gradient(to top,
      rgba(10,12,15,.55) 0%,rgba(10,12,15,.48) 14%,
      rgba(10,12,15,.34) 30%,rgba(10,12,15,.14) 48%,
      rgba(10,12,15,.02) 64%,rgba(10,12,15,0) 76%),
    linear-gradient(to right,
      rgba(10,12,15,.95) 0%,rgba(10,12,15,.92) 30%,
      rgba(10,12,15,.76) 42%,rgba(10,12,15,.38) 56%,
      rgba(10,12,15,.10) 68%,rgba(10,12,15,0) 80%),
    linear-gradient(to bottom,rgba(10,12,15,.40) 0%,rgba(10,12,15,0) 15%)
}

.hero__inhalt{
  position:absolute;z-index:2;
  left:clamp(1.25rem,8%,9.5rem);bottom:16%;
  max-width:min(46rem,72%)
}
.hero__ort{
  margin:0 0 var(--s4);font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass-lt)
}
.hero__h{margin:0}
.hero__h1,.hero__h2{
  display:block;font-family:var(--display);font-weight:400;
  font-size:var(--t-hero);line-height:.98;letter-spacing:-.045em
}
.hero__h1{color:#fff}
.hero__h2{color:var(--brass-lt)}
.hero__satz{
  margin:var(--s4) 0 0;max-width:46ch;
  font-size:var(--t-sm);color:#D8DDE4;line-height:1.6
}
.hero__akt{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  margin-top:var(--s5)
}
.hero__zweit{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);padding-block:.4rem;
  transition:color .25s var(--ease),border-color .25s var(--ease)
}
.hero__zweit:hover{color:var(--brass-lt);border-color:var(--brass)}
.hero__zweit svg{transition:transform .3s var(--ease)}
.hero__zweit:hover svg{transform:translateX(5px)}

/* Schmale Leiste am unteren Bildrand. Vier Woerter, zwei Nummern, eine
   Haarlinie - keine Kacheln. */
.hero__leiste{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem clamp(1.5rem,4vw,3rem);
  /* fluchtet mit der Ueberschrift statt mit dem Seitenrand */
  padding:var(--s3) clamp(1.25rem,8%,9.5rem);
  border-top:1px solid rgba(255,255,255,.14);
  /* Eigener Grund statt Verlass auf den Bildverlauf: so bleibt die Zeile
     auch nach einem Bildtausch lesbar, ohne dass jemand nachrechnen muss. */
  background:linear-gradient(to bottom,rgba(10,12,15,.90),rgba(10,12,15,.97));
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:#C3CAD3
}
.hero__gew{display:flex;flex-wrap:wrap;gap:.5rem clamp(1rem,2.4vw,2rem)}
.hero__gew li{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.hero__gew li:not(:last-child)::after{
  content:"";width:1px;height:.85em;background:rgba(255,255,255,.22)
}
.hero__kontakt{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem;margin:0}
.hero__kontakt a{
  display:inline-flex;align-items:center;gap:.5rem;color:#fff;
  text-decoration:none;letter-spacing:.06em;padding-block:.35rem;
  transition:color .2s var(--ease)
}
.hero__kontakt a:hover{color:var(--brass-lt)}
.hero__kontakt svg{color:var(--brass-lt)}
.hero__not{color:var(--brass-lt)!important;letter-spacing:.14em!important}

/* Auftakt: Bild ruhig heran, Schrift knapp danach. */
@media (prefers-reduced-motion:no-preference){
  .hero__foto img{animation:fotoAuf 1.6s var(--ease-lang) both}
  .hero__ort{animation:heroAuf .8s var(--ease-lang) .28s both}
  .hero__h1{animation:heroAuf .8s var(--ease-lang) .36s both}
  .hero__h2{animation:heroAuf .8s var(--ease-lang) .48s both}
  .hero__satz{animation:heroAuf .8s var(--ease-lang) .6s both}
  .hero__akt{animation:heroAuf .8s var(--ease-lang) .72s both}
  .hero__leiste{animation:heroAuf .8s var(--ease-lang) .86s both}
}
@keyframes fotoAuf{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}
@keyframes heroAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Trust bar ------------------------------------------------- */
.trustbar{background:var(--panel);border-bottom:1px solid var(--line)}
.trustbar__grid{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--line)}
.trustbar__item{
  padding:var(--s5) var(--s4);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.5rem;
  min-width:0;overflow-wrap:break-word;hyphens:auto
}
.trustbar__item svg{color:var(--brass)}
.trustbar__val{font-family:var(--display);font-size:var(--t-md);font-weight:400;letter-spacing:-.02em}
.trustbar__lbl{font-size:var(--t-sm);color:var(--muted);line-height:1.55;min-width:0;overflow-wrap:break-word}

/* ---------- Section head ---------------------------------------------- */
.shead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(1.25rem,3vw,3rem);align-items:end;margin-bottom:var(--s6)
}
.shead__aside{padding-bottom:.3rem}
/* Gestapelter Kopf: Ueberschrift, darunter eine Zeile. Im Wechsel mit .shead,
   damit nicht jeder Abschnitt gleich beginnt - der zweispaltige Kopf sass
   dreizehnmal auf acht Seiten und war das staerkste Template-Signal. */
.shead--stack{display:block;margin-bottom:var(--s6);max-width:42rem}
.shead--stack .lead{margin-top:1rem}
.shead--bare{margin-bottom:clamp(1.5rem,2.5vw,2rem)}

/* ---------- Card grids ------------------------------------------------ */
.grid{display:grid;gap:clamp(1rem,1.5vw,1.35rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--svc{grid-template-columns:repeat(6,1fr)}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1.5px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)
}
a.card:hover{background:var(--panel-2);border-color:var(--line-strong);transform:translateY(-3px)}
a.card:hover::before{transform:scaleX(1)}
.card h3{color:var(--text)}
.card__head{display:flex;align-items:center;gap:.75rem}
.card__head svg{color:var(--brass);flex:none}
.card__head h3{margin:0}
.card p{font-size:var(--t-sm);color:var(--muted);margin:0}
.card .tlink{margin-top:auto;padding-top:1rem}
/* Icons laufen in der Zeile mit, ohne eigene Kachel. Die gerahmte
   Icon-Kachel ueber der Ueberschrift ist die Standardform generierter
   Feature-Karten und wird hier bewusst nicht verwendet. */
.icon{color:var(--brass);flex:none;display:block}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.tags li{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--line);border-radius:0;padding:.28rem .65rem
}
.card--lead{grid-column:span 3;padding:0}
.card--lead .card__media{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2);border-bottom:1px solid var(--line)}
.card--lead .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card--lead:hover .card__media img{transform:scale(1.04)}
.card--lead .card__body{padding:var(--s5);display:flex;flex-direction:column;gap:.8rem;flex:1}
.card--half{grid-column:span 3}
.card--third{grid-column:span 2}

/* ---------- Split feature -------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--rev .split__media{order:-1}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split__media{overflow:hidden;background:var(--panel)}
.split__media img{width:100%;height:auto;display:block}
.split__media--photo img{aspect-ratio:4/3;object-fit:cover}
.split__box{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);padding:clamp(var(--s4),3vw,2.25rem)}
.figcap{
  font-size:var(--t-xs);color:var(--muted-dim);padding:.75rem .9rem 0;line-height:1.55
}
.split__media figure,figure .figcap{max-width:60ch}

.checks{display:grid;gap:.8rem;margin:1.6rem 0 2rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--t-base);color:var(--muted)}
.checks svg{color:var(--brass);flex:none;margin-top:.3rem}
.checks strong{font-weight:500;color:var(--text)}

/* ---------- Tiles ----------------------------------------------------- */
.tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden
}
.tile{background:var(--panel);padding:var(--s4);display:flex;flex-direction:column;gap:.65rem;transition:background-color .3s var(--ease)}
.tile:hover{background:var(--panel-2)}
.tile svg{color:var(--brass)}
.tile h4{font-family:var(--display)}
.tile p{font-size:var(--t-sm);color:var(--muted);margin:0}

/* ---------- Emergency ------------------------------------------------- */
.alarm{
  border:1px solid var(--brass-edge);border-radius:var(--radius);background:var(--panel);
  padding:clamp(var(--s4),3vw,2.25rem)
}
.alarm__label{
  display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.6rem
}
.alarm__label::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);flex:none;
  animation:pulse 2.4s var(--ease) infinite
}
.alarm__num{
  font-family:var(--mono);font-size:var(--t-xl);font-weight:500;
  color:var(--brass-lt);text-decoration:none;display:block;margin:0 0 1.25rem
}
.alarm__num:hover{color:var(--brass-lt);text-decoration:underline}
.hours{display:grid;gap:.55rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);color:var(--muted)}
.hours b{font-family:var(--mono);font-weight:500;color:var(--text);font-size:var(--t-xs);white-space:nowrap}

/* ---------- Steps ----------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--brass-edge)}
.step{padding:var(--s5) var(--s4) 0 0;position:relative}
.step::before{content:"";position:absolute;top:-4.5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--brass)}
.step__n{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;color:var(--brass);display:block;margin-bottom:.8rem}
.step h3{margin-bottom:.5rem}
.step p{font-size:var(--t-sm);color:var(--muted);margin:0}

/* ---------- References ------------------------------------------------ */
/* Referenzen als Zeilen statt als Karten mit Rasterflaeche. Ohne Projektfotos
   ist eine gerasterte Platzhalterflaeche eine Attrappe; eine gesetzte Zeile ist
   ehrlicher und laesst sich schneller ueberfliegen. */
.refrows{border-top:1px solid var(--line)}
.refrow{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.35rem clamp(1.5rem,3vw,3rem);align-items:baseline;
  padding:1.5rem .9rem;margin-inline:-.9rem;border-bottom:1px solid var(--line);
  border-radius:var(--radius-sm);transition:background-color .25s var(--ease)
}
.refrow:hover{background:var(--panel)}
.refrow__cat{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass)
}
.refrow__body h3{margin:0 0 .15rem}
.refrow__loc{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted-dim)
}
.refrow__body p{font-size:var(--t-sm);color:var(--muted);margin:.5rem 0 0;max-width:56ch}

.reflist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,3vw,3rem)}
.reflist li{padding:.8rem 0;border-bottom:1px solid var(--line);display:flex;gap:.9rem;align-items:baseline;font-size:var(--t-base);color:var(--muted)}
.reflist li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass);flex:none}

/* ---------- Timeline -------------------------------------------------- */
.timeline{position:relative;padding-left:2.4rem}
.timeline::before{content:"";position:absolute;left:5px;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
.tl{position:relative;padding-bottom:2rem}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-2.4rem;top:.5rem;width:11px;height:11px;border-radius:50%;
  background:var(--ground);border:1.5px solid var(--brass)
}
.tl--now::before{background:var(--brass)}
.tl__year{font-family:var(--mono);font-size:var(--t-md);font-weight:500;color:var(--brass-lt);display:block;margin-bottom:.25rem}
.tl p{font-size:var(--t-base);color:var(--muted);margin:0}

/* ---------- People ---------------------------------------------------- */
.person{background:transparent;overflow:hidden}
.person__img{aspect-ratio:1;overflow:hidden;background:var(--panel-2)}
.person__img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .9s var(--ease),filter .9s var(--ease)}
.person:hover .person__img img{transform:scale(1.04);filter:brightness(1)}
.person__body{padding:var(--s3) 0 0}
.person__body h3{margin-bottom:.2rem}
.person__role{font-size:var(--t-sm);color:var(--brass)}
.person__note{font-size:var(--t-sm);color:var(--muted);margin:.55rem 0 0}
.person--wide{grid-column:span 2}
/* Nach dem Wegfall des zweiten Portraets steht der Inhaber allein. Statt
   einer halbleeren Zweierreihe traegt ihn die vorhandene Split-Aufteilung:
   Bild links, Text rechts, senkrecht mittig. */
.person.split .person__body{padding:0}
/* Das Portraet ist 337px gross - mehr gibt die Vorlage nicht her. Die
   Spalte wird genau darauf gesetzt, damit es weder hochskaliert noch eine
   Luecke neben sich laesst. Der Text nimmt die restliche Breite. */
.person.split{grid-template-columns:21rem minmax(0,1fr);align-items:center}
.person--wide .person__img{aspect-ratio:16/10}
.person--wide .person__img img{object-position:center}

/* ---------- Jobs ------------------------------------------------------ */
.jobs{display:grid;border-top:1px solid var(--line)}
.job{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--line)
}
.job>div{transition:transform .3s var(--ease)}
.job:hover>div{transform:translateX(.7rem)}
.job h3{margin-bottom:.25rem}
.job__meta{font-size:var(--t-sm);color:var(--muted-dim);margin:0}

/* ---------- Partner logos --------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem}
.logos div{
  background:#EDEFF2;border-radius:0;height:88px;
  display:flex;align-items:center;justify-content:center;padding:1rem;
  transition:transform .3s var(--ease)
}
.logos div:hover{transform:translateY(-2px)}
.logos img{max-height:44px;width:auto;object-fit:contain}

/* ---------- CTA band -------------------------------------------------- */
.cta{background:var(--panel);border-block:1px solid var(--line);position:relative}
/* Der Abschnitt traegt .section UND das Raster polstert selbst. Beides
   zusammen ergab 272px Luft am Desktop. Die Polsterung des Rasters
   gewinnt, weil sie die groessere Aussage macht. */
.section.cta{padding-block:0}
.cta.on-light{background:var(--ground)}
.cta::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--brass-edge)}
/* Die Ueberschrift traegt rund 60 Prozent der Komposition und laeuft eine
   Stufe groesser als die uebrigen h2. Der Abschluss ist das letzte Kapitel
   der Seite, nicht ein Standardbaustein. */
.cta__grid{
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4.4fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center;
  padding-block:clamp(5rem,10vw,9rem)
}
.cta__grid h2{font-size:var(--t-2xl);max-width:16ch;letter-spacing:-.035em}
.cta__grid .lead{margin-top:var(--s4);max-width:40ch}
/* Zwei Handlungen untereinander, gleich breit. Nebeneinander gesetzte
   Buttons unterschiedlicher Textlaenge lesen sich als Versehen. */
.ctaacts{display:grid;gap:var(--s2);align-content:center}

/* ---------- Contact --------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.infolist{display:grid;gap:1.1rem;margin:1.4rem 0}
.infolist li{display:flex;gap:.85rem;align-items:flex-start}
.infolist svg{color:var(--brass);flex:none;margin-top:.25rem}
.infolist a{color:var(--text);text-decoration:none;display:inline-block;padding-block:.2rem}
.infolist a:hover{color:var(--brass-lt);text-decoration:underline}
.infolist span{display:block;font-size:var(--t-xs);color:var(--muted-dim);margin-bottom:.15rem}

form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(var(--s4),3vw,2.25rem)}
/* min-width:0 ist noetig, weil Rasterelemente sonst auf min-width:auto
   stehen und ein <input> seine Eigenbreite von rund 20 Zeichen behaelt.
   Bei 901px sprengte das zweispaltige Feldpaar den Container um 23px. */
.field{display:grid;gap:.4rem;margin-bottom:1.1rem;min-width:0}
.field label{font-size:var(--t-sm);font-weight:500;color:var(--muted);letter-spacing:0}
.field input,.field textarea,.field select{
  min-width:0;width:100%;
  font-family:var(--body);font-size:var(--t-base);color:var(--text);background:var(--ground);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .9rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-dim)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash)
}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.consent{display:flex;gap:.8rem;align-items:flex-start;margin:1.2rem 0;font-size:var(--t-sm);color:var(--muted)}
.consent input{margin-top:.15rem;width:24px;height:24px;accent-color:var(--brass);flex:none}
.formnote{font-size:var(--t-xs);color:var(--muted-dim);margin:1rem 0 0}
.map{overflow:hidden;border:1px solid var(--line);margin-top:var(--s3);background:var(--panel)}
.map iframe{width:100%;height:300px;border:0;display:block}

/* ---------- Prose (Recht) --------------------------------------------- */
.prose{max-width:70ch}
.prose h2{margin:2.5rem 0 1rem;font-size:var(--t-lg)}
.prose h3{margin:2rem 0 .7rem}
.prose p,.prose li{color:var(--muted)}
.prose ul{list-style:disc;padding-left:1.2rem;display:grid;gap:.4rem;margin-bottom:1.2rem}
.prose strong{color:var(--text);font-weight:500}
.note{border-left:2px solid var(--brass);padding:.25rem 0 .25rem 1rem;color:var(--muted)}

/* ---------- Footer ---------------------------------------------------- */
.footer{background:#0A0C0F;color:var(--muted);padding-top:clamp(4.5rem,7vw,7rem);border-top:1px solid var(--line)}
.footer h2{color:var(--text);font-family:var(--body);font-size:var(--t-2xs);letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:1.15rem}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:clamp(2rem,3.5vw,4rem)}
.footer a{color:var(--muted);text-decoration:none;font-size:var(--t-sm)}
/* Gestapelte Linklisten: Klickflaeche statt nur Textzeile. */
.footer ul a{display:inline-block;padding-block:.35rem}
.footer a:hover{color:var(--brass-lt)}
.footer ul{display:grid;gap:.15rem}
.footer__brand img{height:58px;width:auto;margin-bottom:var(--s4)}
.footer__brand p{font-size:var(--t-sm);color:var(--muted);max-width:34ch}
.footer__legal{
  margin-top:clamp(3.5rem,6vw,5.5rem);border-top:1px solid var(--line);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.75rem;align-items:center;justify-content:space-between;font-size:var(--t-xs)
}
.footer__legal ul{display:flex;gap:1.5rem}

/* ---------- Mobile action bar ----------------------------------------- */
.actionbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(10,12,15,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr;gap:.6rem
}
.actionbar a{min-height:50px;font-size:var(--t-xs);padding-inline:var(--s2);letter-spacing:.04em}

/* ---------- Menschen-Band ---------------------------------------------- */
/* Frueher ein Foto als Hintergrund mit dunklem Verlauf darueber. Auf
   Warmweiss ist das falsch: der Verlauf existiert nur, um Text auf einem
   dunklen Bild lesbar zu halten. Jetzt traegt das Foto ein eigenes Feld
   ueber die volle Breite, der Text steht darunter auf heller Flaeche.
   Nebenbei loest das den Zickzack: Hero und Tueren sind beide Text-plus-Bild
   nebeneinander, ein drittes waere laut Skill ein Fehler. */
.people{border-block:1px solid var(--line)}
.people__band{margin:0;overflow:hidden;background:var(--panel-2)}
.people__band img{
  width:100%;height:100%;object-fit:cover;object-position:center 44%;
  aspect-ratio:24/9;display:block;
  transition:transform 1.2s var(--ease)
}
.people:hover .people__band img{transform:scale(1.02)}
/* Oben deutlich weniger Luft als unten: so haengt der Text am Foto, statt
   als naechster Abschnitt darunter zu stehen. */
.people__inner{
  padding-block:clamp(2.25rem,4vw,3.5rem) clamp(4rem,8vw,7rem);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(1.75rem,4vw,4.5rem) clamp(2rem,5vw,5rem);align-items:start
}
.people h2{
  grid-column:1 / -1;font-size:var(--t-xl);max-width:19ch;
  margin-bottom:clamp(.5rem,2vw,1.5rem)
}
.people__text p{margin:0;max-width:44ch;font-size:var(--t-base);color:var(--muted)}
/* Die drei Aussagen tragen den Abschnitt und werden entsprechend gesetzt.
   Als Mono-Kleinschrift in einer Zeile gingen sie unter. */
.people__meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);margin:0;
  padding-top:var(--s4);border-top:1px solid var(--line)
}
.people__meta span{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.people__meta b{
  font-family:var(--display);font-size:var(--t-stat);
  font-weight:300;line-height:1;letter-spacing:-.03em;color:var(--brass-display);
  font-variant-numeric:tabular-nums
}
.people__meta i{
  font-style:normal;font-size:var(--t-xs);color:var(--muted-dim);line-height:1.4;
  min-width:0;overflow-wrap:break-word
}

/* ==========================================================================
   Zwei Wege  (loest die zweispaltigen Tueren ab)
   Der Abschnitt hat eine einzige Aufgabe: den Besucher einen von zwei Wegen
   waehlen lassen. Die Vorgaengerfassung erledigte das mit zwei Textbloecken,
   Aufzaehlungen und Kennzahlen. Jetzt tragen zwei grosse Bildflaechen die
   Entscheidung; die Einzelheiten stehen auf den Zielseiten.
   Keine Kaesten, keine Rahmen, keine Schatten, keine Rundungen.
   ========================================================================== */
/* Die ganze Zeile misst bei 76px 1013px und passte auf eine Zeile. 38rem
   erzwingt genau zwei ("Wo koennen wir Sie" / "unterstuetzen?") - das liest
   sich redaktioneller als eine lange Zeile. hyphens:manual, weil
   "unterstuetzen" mit zwoelf Zeichen sonst an der Trenngrenze liegt. */
.paths__kopf{max-width:38rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.paths__kopf h2{font-size:var(--t-2xl);letter-spacing:-.035em;hyphens:manual}
.paths__kopf .lead{margin-top:var(--s3);max-width:34ch}

.paths{display:flex;gap:clamp(.5rem,1.1vw,1rem)}
.path{
  position:relative;flex:1 1 0;min-width:0;
  height:clamp(27rem,42vw,40rem);
  overflow:hidden;text-decoration:none;color:#fff;
  transition:flex-grow .85s var(--ease-lang)
}
.path__img{position:absolute;inset:0;display:block}
/* Auf heller Flaeche gilt .on-light img{filter:none}; hier ist das richtig,
   die Bilder sollen leuchten. Der Verlauf uebernimmt die Lesbarkeit. */
.path__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease-lang)
}
.path:hover .path__img img,.path:focus-within .path__img img{transform:scale(1.035)}

/* Der Verlauf deckt nur unten. Bei 0,88 Deckkraft steht weisse Schrift auch
   auf dem hellstmoeglichen Foto bei 14,6:1 und Gold bei 7,5:1 - er traegt
   damit unabhaengig davon, was im Bild liegt. Die Aufhellung passiert
   vollstaendig oberhalb des Textes, im oberen Polster. */
.path__body{
  position:absolute;inset:auto 0 0 0;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  padding:clamp(5rem,9vw,8rem) clamp(1.75rem,3vw,2.75rem) clamp(1.75rem,3vw,2.75rem);
  background:linear-gradient(to top,
    rgba(10,12,15,.94) 0%, rgba(10,12,15,.90) 64%,
    rgba(10,12,15,.48) 86%, rgba(10,12,15,0) 100%)
}
.path__meta{display:flex;align-items:baseline;gap:.9rem}
.path__meta b{
  font-family:var(--mono);font-weight:400;font-size:var(--t-sm);
  color:#D4B678;letter-spacing:.08em;font-variant-numeric:tabular-nums
}
.path__meta i{
  font-style:normal;font-size:var(--t-2xs);letter-spacing:.2em;
  text-transform:uppercase;color:#E4E8ED
}
.path__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-path);line-height:1.08;
  letter-spacing:-.03em;color:#fff;margin-top:.35rem
}
/* Der Stuetzsatz kommt erst, wenn die Flaeche angesteuert wird.
   grid-template-rows statt max-height: das ist die einzige Form, die ohne
   Sprung auskommt und im System schon verwendet wird. */
.path__sub{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .7s var(--ease-lang),opacity .5s var(--ease-lang)
}
.path__sub > span{overflow:hidden;min-height:0;font-size:var(--t-sm);color:#DDE2E9;display:block}
.path:hover .path__sub,.path:focus-within .path__sub{grid-template-rows:1fr;opacity:1}
.path__cta{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--s2);
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:#D4B678
}
.path__cta svg{transition:transform .5s var(--ease-lang)}
.path:hover .path__cta svg,.path:focus-within .path__cta svg{transform:translateX(7px)}

/* Ab Tabletbreite dehnt sich die angesteuerte Flaeche auf rund 63 Prozent.
   Die andere bleibt bei 37 und damit klar sichtbar - sie faellt nicht
   zusammen. :focus-within steht bewusst nicht in einer hover-Abfrage,
   damit die Tastatur dieselbe Bewegung ausloest. */
@media (min-width:901px){
  .paths:has(.path:nth-child(1):hover) .path:nth-child(1),
  .paths:has(.path:nth-child(1):focus-within) .path:nth-child(1),
  .paths:has(.path:nth-child(2):hover) .path:nth-child(2),
  .paths:has(.path:nth-child(2):focus-within) .path:nth-child(2){flex-grow:1.72}
}

/* ---------- Leistungsindex: Zeilen statt Kartenteppich ----------------- */
.svcindex{border-top:1px solid var(--line)}
.svcrow{
  display:grid;grid-template-columns:auto minmax(0,13rem) minmax(0,1fr) auto;
  gap:1.25rem;align-items:center;text-decoration:none;color:inherit;
  padding:1.35rem .9rem;margin-inline:-.9rem;border-bottom:1px solid var(--line);
  border-radius:var(--radius-sm);transition:background-color .25s var(--ease)
}
.svcrow:hover{background:var(--panel)}
.svcrow svg{color:var(--brass);flex:none}
.svcrow h3{margin:0}
.svcrow p{font-size:var(--t-sm);color:var(--muted);margin:0}
.svcrow__go{color:var(--brass);transition:transform .25s var(--ease)}
.svcrow:hover .svcrow__go{transform:translateX(4px)}

/* ---------- Erklaerblock: Was die Entscheidung bestimmt ---------------- */
.factors{display:grid;gap:0;border-top:1px solid var(--line)}
.factor{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.4rem clamp(1.5rem,3vw,3rem);padding:var(--s4) 0;border-bottom:1px solid var(--line)
}
.factor dt{font-family:var(--display);font-weight:600;font-size:var(--t-base);letter-spacing:-.01em}
.factor dd{margin:0;color:var(--muted);font-size:var(--t-base);max-width:60ch}

/* ---------- Ablaufliste mit echter Reihenfolge ------------------------- */
.phases{counter-reset:phase;border-top:1px solid var(--brass-edge)}
.phase{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line)
}
.phase::before{
  counter-increment:phase;content:counter(phase);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--brass);
  padding-top:.2rem;font-variant-numeric:tabular-nums
}
.phase h3{margin:0 0 .35rem}
.phase p{margin:0;color:var(--muted);font-size:var(--t-base)}
.phase__when{
  display:block;font-family:var(--mono);font-size:var(--t-xs);color:var(--muted-dim);
  margin-top:.45rem
}

/* ---------- Zustaende -------------------------------------------------- */
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;pointer-events:none;cursor:not-allowed
}
.btn.is-busy{position:relative;color:transparent}
.btn.is-busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:1.1em;height:1.1em;
  border:2px solid var(--on-brass);border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash)
}
.field__err{
  font-size:var(--t-xs);color:var(--brass-lt);display:flex;align-items:center;gap:.45rem
}
.field__err::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass-lt);flex:none}
.empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.5rem);color:var(--muted);text-align:left
}
.empty h3{margin-bottom:.5rem}


/* ==========================================================================
   Kennzahlen  (loest die fuenfspaltige Vertrauensleiste ab)
   Fuenf gleich grosse Kaesten mit Icon lasen sich als Informationstabelle.
   Jetzt tragen drei Zahlen den Abschnitt, die beiden nicht zaehlbaren
   Aussagen stehen als ein Satz darunter. Kein Inhalt faellt weg.
   ========================================================================== */
/* Bruecke zwischen Hero und erster heller Flaeche: eine Stufe heller
   als der Hero, aber noch eindeutig dunkel. */
.facts{border-block:1px solid var(--line);background:#15191D}
.facts__inner{padding-block:clamp(3.5rem,7vw,6.5rem)}
.facts__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,5vw,5rem)
}
.fact{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.fact__n{
  font-family:var(--display);font-size:var(--t-3xl);font-weight:300;
  line-height:.86;letter-spacing:-.045em;color:var(--text);
  font-variant-numeric:tabular-nums
}
.fact:first-child .fact__n{color:var(--brass-display)}
.fact__l{
  font-size:var(--t-sm);color:var(--muted);line-height:1.5;max-width:28ch;
  min-width:0;overflow-wrap:break-word
}
.facts__note{
  margin:clamp(3rem,6vw,5rem) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--muted-dim);max-width:58ch
}

/* ==========================================================================
   Leistungsindex  (Herzstueck der Startseite)
   Sechs nummerierte Zeilen ueber die volle Breite statt sechs gleicher
   Kaestchen. Beim Ueberfahren blendet die zugehoerige Messing-Schemazeichnung
   gross im Hintergrund ein. Fotos gibt es fuer vier der sechs Gewerke nicht;
   eine gemischte Bebilderung waere unruhiger als gar keine.
   ========================================================================== */
/* Buehne: Liste links, grosses Bild rechts. Das Bild wechselt beim
   Ueberfahren und beim Tastaturfokus. Es klebt beim Scrollen, damit es
   waehrend der ganzen Liste sichtbar bleibt - sonst waere der Wechsel
   unterhalb der ersten Zeilen unsichtbar. */
.svcstage{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:start
}
.svcmedia{
  position:sticky;top:calc(92px + 2rem);
  aspect-ratio:5/4;overflow:hidden;
  background:#141821;border:1px solid var(--line)
}
.svcmedia__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .55s var(--ease),transform 1.1s var(--ease)
}
/* Die Schemazeichnungen sind 1200x750 und bringen ihren eigenen Grund mit.
   Beschnitten wuerden ihre Beschriftungen wegfallen, deshalb contain. */
.svcmedia__img--plan{object-fit:contain}
.svcmedia__img.is-on{opacity:1;transform:none}
/* Der Bildwechsel laeuft ohne JavaScript. :focus-within liefert damit die
   Tastaturbedienung geschenkt: dieselbe Regel, die beim Ueberfahren greift,
   greift beim Fokussieren. Ein zweiter Mechanismus daneben waere eine
   zweite Fehlerquelle. Das erste Bild traegt zusaetzlich .is-on und bleibt
   als unterste Schicht sichtbar, falls :has() fehlt. */
.svcstage:not(:has(.svc:hover)):not(:has(.svc:focus-within)) .svcmedia__img[data-svc="1"],
.svcstage:has(.svc[data-svc="1"]:hover) .svcmedia__img[data-svc="1"],
.svcstage:has(.svc[data-svc="1"]:focus-within) .svcmedia__img[data-svc="1"],
.svcstage:has(.svc[data-svc="2"]:hover) .svcmedia__img[data-svc="2"],
.svcstage:has(.svc[data-svc="2"]:focus-within) .svcmedia__img[data-svc="2"],
.svcstage:has(.svc[data-svc="3"]:hover) .svcmedia__img[data-svc="3"],
.svcstage:has(.svc[data-svc="3"]:focus-within) .svcmedia__img[data-svc="3"],
.svcstage:has(.svc[data-svc="4"]:hover) .svcmedia__img[data-svc="4"],
.svcstage:has(.svc[data-svc="4"]:focus-within) .svcmedia__img[data-svc="4"],
.svcstage:has(.svc[data-svc="5"]:hover) .svcmedia__img[data-svc="5"],
.svcstage:has(.svc[data-svc="5"]:focus-within) .svcmedia__img[data-svc="5"],
.svcstage:has(.svc[data-svc="6"]:hover) .svcmedia__img[data-svc="6"],
.svcstage:has(.svc[data-svc="6"]:focus-within) .svcmedia__img[data-svc="6"]{opacity:1;transform:none}

/* Auf der Buehne ist die Ordnungszahl im Grund ueberfluessig: das Bild
   uebernimmt die Rueckmeldung. Zwei gleichzeitige Effekte sind Unruhe. */
.svcstage .svc__ghost{display:none}
/* Felder explizit setzen: sonst rutscht der Pfeil hinter die Beschreibung
   in eine dritte Zeile, weil diese ueber alle Spalten laeuft. */
.svcstage .svc__link{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;row-gap:.55rem
}
.svcstage .svc__n{grid-column:1;grid-row:1}
.svcstage .svc__t{grid-column:2;grid-row:1}
.svcstage .svc__go{grid-column:3;grid-row:1}
.svcstage .svc__d{grid-column:2;grid-row:2;max-width:52ch}
.svc.is-aktiv .svc__n{color:var(--brass-lt)}
.svc.is-aktiv{background:rgba(242,244,247,.022)}
.svc.is-aktiv::after{transform:scaleX(1)}
/* Das Bild in der Zeile ist die beruehrungsfreundliche Alternative: ohne
   Zeigegeraet gibt es kein Ueberfahren, also bekommt jede Zeile ihr Bild. */
.svc__inline{display:none}

.svclist{border-top:1px solid var(--line-strong);counter-reset:svc}
.svc{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.svc__link{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,23rem) auto;
  align-items:baseline;gap:clamp(1.25rem,3vw,3.25rem);
  padding:clamp(2rem,4vw,3.5rem) 0;
  text-decoration:none;color:inherit;position:relative;z-index:2;
  transition:padding-inline .45s var(--ease)
}
.svc__n{
  font-family:var(--mono);font-size:var(--t-base);color:var(--brass);
  letter-spacing:.08em;line-height:1.3;flex:none;min-width:2.4ch;
  transition:color .3s var(--ease)
}
.svc__t{
  font-family:var(--display);font-size:var(--t-svc);font-weight:400;
  letter-spacing:-.028em;color:var(--text);margin:0;line-height:1.1;
  min-width:0;overflow-wrap:break-word;hyphens:auto
}
.svc__d{
  font-size:var(--t-sm);color:var(--muted);margin:0;max-width:42ch;
  line-height:1.6
}
.svc__go{color:var(--brass);flex:none;transition:transform .45s var(--ease)}
/* Beim Ueberfahren faehrt die Ordnungszahl gross und fast unsichtbar von
   rechts ein. Fotos gibt es fuer vier der sechs Gewerke nicht, und die
   vorhandenen Schemazeichnungen sind 1200x750 gross - klein skaliert waeren
   sie Matsch. Eine Ziffer traegt alle sechs Zeilen gleich. */
.svc__ghost{
  /* Laeuft rechts aus der Zeile heraus und wird von .svc{overflow:hidden}
     beschnitten. Mittig gesetzt lag sie ueber dem Beschreibungstext. */
  position:absolute;right:-2rem;top:50%;
  font-family:var(--display);font-weight:300;line-height:.78;
  font-size:var(--t-ghost);letter-spacing:-.06em;
  color:var(--brass);font-variant-numeric:tabular-nums;
  transform:translate(28px,-50%);
  opacity:0;pointer-events:none;z-index:1;
  transition:opacity .55s var(--ease),transform .7s var(--ease)
}
.svc:hover .svc__ghost,.svc:focus-within .svc__ghost{opacity:.09;transform:translate(0,-50%)}
.svc:hover .svc__link,.svc:focus-within .svc__link{padding-inline:clamp(.5rem,1.4vw,1.5rem) 0}
.svc{transition:background-color .45s var(--ease)}
.svc:hover,.svc:focus-within{background:rgba(242,244,247,.022)}
.svc:hover .svc__go,.svc:focus-within .svc__go{transform:translateX(10px)}
.svc:hover .svc__n,.svc:focus-within .svc__n{color:var(--brass-lt)}
.svc::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);z-index:3
}
.svc:hover::after,.svc:focus-within::after{transform:scaleX(1)}

/* ==========================================================================
   Notdienst  (eigener Abschnitt)
   Die Nummer ist hier die Hauptsache und wird entsprechend gross gesetzt.
   Kein Rot, kein Blinken: der Abschnitt bleibt im System der Seite.
   ========================================================================== */
.notdienst{border-block:1px solid var(--line);background:var(--panel);position:relative}
.notdienst::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--brass-edge)}
.notdienst__inner{
  padding-block:clamp(4.5rem,9vw,8rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  gap:clamp(2rem,5vw,5rem);align-items:start
}
.notdienst__label{
  display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0 0 var(--s3)
}
.notdienst__label::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);
  flex:none;animation:pulse 2.4s var(--ease) infinite
}
.notdienst__num{
  display:block;font-family:var(--mono);font-weight:300;
  font-size:var(--t-notruf);line-height:1;letter-spacing:-.035em;
  color:var(--brass-lt);text-decoration:none;margin:0 0 var(--s4);
  font-variant-numeric:tabular-nums;transition:color .25s var(--ease)
}
.notdienst__num:hover{color:var(--text)}
.notdienst__text{font-size:var(--t-base);color:var(--muted);max-width:48ch;margin:0 0 var(--s5)}
/* Die Zeitenliste bringt ihre eigene Oberkante mit. Beide Kanten
   uebereinander ergaben eine doppelte Linie. */
.notdienst__aside{border-top:1px solid var(--line);padding-top:var(--s4)}
.notdienst__aside .hours{margin-top:0;padding-top:0;border-top:0}

/* ==========================================================================
   Fussleiste: grosser Schriftzug im Grund
   ========================================================================== */
.footer{position:relative;overflow:hidden}
/* Weit genug unten, dass nur die obere Haelfte stehen bleibt: der Schriftzug
   soll als Textur wirken, nicht als lesbares Wort ueber der Rechtszeile. */
.footer__mark{
  position:absolute;left:50%;bottom:-.42em;transform:translateX(-50%);
  font-family:var(--display);font-weight:400;font-size:var(--t-mark);line-height:.8;
  letter-spacing:-.055em;white-space:nowrap;pointer-events:none;user-select:none;
  color:rgba(242,244,247,.022);z-index:0
}
.footer .container{position:relative;z-index:1}
.footer__tel{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:var(--t-md)!important;color:var(--brass-lt)!important;
  margin-top:var(--s3);letter-spacing:-.01em
}
.footer__tel:hover{color:var(--text)!important}

/* ==========================================================================
   Bewegung: einmaliges Einblenden beim Eintritt in den Sichtbereich
   Getrieben von IntersectionObserver, nicht von einem Scroll-Listener.
   Ohne JavaScript bleibt alles sichtbar - deshalb setzt erst .js-reveal
   den Ausgangszustand.
   ========================================================================== */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)
}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .svc__ghost,.svc__link,.svc__go,.brand img,.header__bar,
  .svcmedia__img,.people__band img,
  .path,.path__img img,.path__sub,.path__cta svg{transition:none!important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width:1560px){ :root{--max:1420px} }
@media (max-width:1279px){
  .nav{display:none}
  .burger{display:flex}
  .mobilenav{display:grid}
  .header__actions .btn{display:none}
  .header__tel{display:flex}
  .logos{grid-template-columns:repeat(4,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--svc{grid-template-columns:repeat(4,1fr)}
  .card--lead{grid-column:span 4}
  .card--half,.card--third{grid-column:span 2}
  .trustbar__grid{grid-template-columns:repeat(3,1fr)}
  .trustbar__item:nth-child(n+4){border-top:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2,1fr);gap:0 1.5rem}
  .step:nth-child(n+3){margin-top:1.85rem;border-top:1px solid var(--brass-edge)}
  .svc__link{grid-template-columns:auto minmax(0,20rem) minmax(0,1fr) auto;gap:1.5rem}
}
@media (max-width:900px){
  /* Auf schmalen Schirmen ein hoher Ausschnitt statt eines Querformat-
     Streifens. Die Schrift rueckt weiter nach unten, der Schleier deckt
     dort entsprechend frueher. */
  /* Hochformat: das Bild wird seitlich stark beschnitten, die Hoehe passt
     exakt. Nur die X-Lage steuert also den Ausschnitt - sie zeigt die
     Belegschaft rechts der Fahrzeugfront. */
  .hero{--hero-hoch:84svh;--hero-pos:56% 50%;min-height:30rem}
  .hero__inhalt{left:clamp(1.25rem,6%,2.5rem);right:clamp(1.25rem,6%,2.5rem);
    bottom:12%;max-width:none}
  /* Im Hochformat wird das 16:9-Bild dreifach vergroessert - sichtbar ist
     nur knapp ein Drittel der Breite, und jedes Glanzlicht wird gross.
     Ein Schleier, der das allein auffaengt, reicht nicht: selbst bei 0,94
     bleibt Gold unter AA. Stattdessen wird das Bild selbst leicht gedimmt -
     das drueckt die Spitzlichter, laesst aber das ganze Bild als Bild
     stehen. Danach traegt ein Verlauf von 0,85. */
  .hero__foto img{filter:brightness(.70)}
  .hero__schleier{background:
    linear-gradient(to top,
      rgba(10,12,15,.90) 0%,rgba(10,12,15,.88) 30%,
      rgba(10,12,15,.85) 58%,rgba(10,12,15,.82) 70%,
      rgba(10,12,15,.48) 82%,rgba(10,12,15,.14) 92%,rgba(10,12,15,0) 98%),
    linear-gradient(to bottom,rgba(10,12,15,.45) 0%,rgba(10,12,15,0) 14%)}
  .hero__ort{margin-bottom:var(--s3)}
  .hero__satz{max-width:none;margin-top:var(--s3)}
  .hero__akt{width:100%;margin-top:var(--s4);gap:var(--s3)}
  .hero__akt .btn{flex:1 1 100%}
  .hero__leiste{justify-content:flex-start;gap:.55rem 1.25rem;padding-block:.7rem}
  .hero__gew{display:none}
  /* Ohne Zeigegeraet gibt es kein Ansteuern: beide Flaechen stehen
     untereinander und zeigen alles sofort. */
  .paths{flex-direction:column;gap:var(--s3)}
  .path{height:auto;aspect-ratio:4/5;flex:none}
  .path__sub{grid-template-rows:1fr;opacity:1}
  .path__body{padding-top:clamp(4rem,14vw,6rem)}
  .split,.split--rev,.split--even,.cta__grid,.contact,.shead{grid-template-columns:minmax(0,1fr)}
  /* Untereinander trennt eine Kante oben, nicht links. */
  .people__inner{grid-template-columns:minmax(0,1fr)}
  .refrow,.factor{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .refrow__body p{margin-top:.35rem}
  .svcrow{grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;row-gap:.35rem}
  .svcrow p{grid-column:2 / -1}
  .split--rev .split__media{order:0}
  .shead{align-items:start}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .footer__brand{grid-column:span 2}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .topbar__hours{display:none}
  .topbar__inner{justify-content:center}
  /* Notdienst: Nummer und Zeiten untereinander, Nummer bleibt die Hauptsache. */
  .notdienst__inner{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  /* Leistungszeile: Nummer und Titel oben, Beschreibung darunter ueber die
     volle Breite. Der Pfeil wandert in die Titelzeile. */
  .svc__link{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;row-gap:.6rem;gap:1.25rem
  }
  .svc__d{grid-column:1 / -1;max-width:60ch}
  .svc__ghost{--t-ghost:6rem;opacity:.07}
  .facts__grid{gap:var(--s5) var(--s4)}
}
@media (max-width:768px){
  html{scroll-padding-top:104px}
  .hero{--kopf:84px}
  .svcrow{grid-template-columns:auto minmax(0,1fr);row-gap:.4rem}
  .svcrow__go{display:none}
  .phase{grid-template-columns:auto minmax(0,1fr);gap:.9rem}
  body{padding-bottom:74px}
  .actionbar{display:grid}
  /* Die Infozeile des Heros wiederholt nur, was die feste Aktionsleiste
     ohnehin zeigt - und laege dahinter. Unterhalb 768 faellt sie weg. */
  .hero__leiste{display:none}
  .hero__ort{letter-spacing:.16em}
  .topbar{display:none}
  /* Auf dem Telefon war das Zeichen mit 30px ein Symbol, kein Absender.
     52px machen den Schriftzug lesbar; die Leiste waechst entsprechend. */
  .header__bar{min-height:84px}
  .brand img{height:52px}
  .brand{padding-inline-end:.5rem}
  .grid--2,.grid--3,.grid--svc,.reflist{grid-template-columns:minmax(0,1fr)}
  /* Auf dem Telefon zeigt ein 24:9-Ausschnitt zu wenig vom Bild. */
  .people__band img{aspect-ratio:4/3;object-position:center 46%}
  
  /* Drei Kennzahlen nebeneinander werden auf dem Telefon zu zwei plus eine:
     nebeneinander waeren sie zu schmal fuer "Auszubildende". */
  .facts__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .facts__grid .fact:nth-child(3){grid-column:1 / -1}
  .people__meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s4);justify-content:stretch
  }
  .people__meta span:nth-child(3){grid-column:1 / -1}
  .svc__ghost{display:none}
  /* Kein Zeigegeraet: Buehne raus, jede Zeile traegt ihr eigenes Bild. */
  .svcstage{grid-template-columns:minmax(0,1fr);gap:0}
  .svcmedia{display:none}
  .svc__inline{
    display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
    margin-bottom:var(--s5);background:var(--panel-2)
  }
  .svc__inline--plan{object-fit:contain}
  .svc__link{padding-block:var(--s5)}
  .card--lead,.card--half,.card--third,.person--wide{grid-column:span 1}
  .trustbar__grid{grid-template-columns:repeat(2,1fr)}
  .trustbar__item:nth-child(n+3){border-top:1px solid var(--line)}
  .trustbar__item{padding:var(--s4) 1.1rem}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{padding-right:0}
  .step:nth-child(n+2){margin-top:1.85rem;border-top:1px solid var(--brass-edge)}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .logos{grid-template-columns:repeat(3,1fr)}
  .field--row{grid-template-columns:minmax(0,1fr)}
  .job{grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
  .footer__legal{flex-direction:column;align-items:flex-start}
  .btnrow .btn{flex:1 1 100%}
  .mobilenav.is-open .mobilenav__inner{max-height:calc(100dvh - 84px)}
}
@media (max-width:480px){
  .facts__grid,.people__meta{grid-template-columns:minmax(0,1fr)}
  .facts__grid .fact:nth-child(3),.people__meta span:nth-child(3){grid-column:auto}
  .svc__link{grid-template-columns:auto minmax(0,1fr);gap:1rem}
  .svc__go{display:none}
}
@media (max-width:420px){ .logos{grid-template-columns:repeat(2,1fr)} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .header,.topbar,.actionbar,.mobilenav,.cta,form{display:none}
  body{background:#fff;color:#000}
}