/*
Theme Name:   Marxer Theme
Theme URI:    https://gastrochem.li
Author:       Swiss Media Design GmbH
Author URI:   https://swissmediadesign.com
Description:  Handgeschriebenes Custom-Theme für die Marxer Gastrochem AG. Schweizer Industrie-Präzision: monumentale Typografie, radikal viel Weissraum, Cyan chirurgisch eingesetzt. Ohne Page Builder, ohne Framework-Ballast. Mobile-first.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  marxer-theme
Tags:         custom-menu, custom-logo, featured-images, translation-ready
*/

/* --------------------------------------------------------------------------
   1. Schriften (lokal, kein CDN). Inter = Lauftext, Archivo = Display.
   Archivo variable mit Weight- UND Width-Achse (62-125%): die breite
   Lage gibt Ziffern und Marken den Charakter von Industrie-Beschriftung.
   Beide OFL-lizenziert.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens. Light-only: Weiss/Fast-Schwarz, Cyan NUR für CTAs,
   Notfall-Element, Hover und ein Detail pro Sektion. --dark ist die eine
   bewusst dunkle Zone (Abschluss-CTA + Footer), kein Dark Mode.
   -------------------------------------------------------------------------- */
:root {
  /* Warmes Papier-/Naturweiss statt Labor-Grau: Showroom, nicht
     Kühlhaus. Das Chassis-Dunkel bleibt bewusst kühl (Stahl). */
  --bg: #fcfbf8;
  --bg-soft: #f4f1eb;
  --ink: #131416;
  --ink-soft: #4b4f52;
  --ink-faint: #6a6e71; /* AA-fest: 4.9:1 auf --bg, 4.5:1 auf --bg-soft. */
  --line: rgba(19, 20, 22, 0.12);
  --line-strong: rgba(19, 20, 22, 0.32);

  /* Marxer-Cyan: exakter Wert aus dem Logo (#009de1). */
  --accent: #009de1;
  --accent-hover: #007fb8;
  /* Button-Grund: minimal dunkler als die Markenfarbe, damit weisser
     Text WCAG AA erreicht (Weiss auf #007bb0 = 4.71:1, auf dem
     Hover-Ton #00639a = 6.45:1). Die Markenfarbe --accent bleibt für
     Linien, Labels, Punkte und Unterstreichungen unangetastet. */
  --accent-button: #007bb0;
  --accent-button-hover: #00639a;
  --accent-text: #007099; /* AA-fest als Textfarbe auf --bg und --bg-soft. */
  --accent-bright: #2fb4ef;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 157, 225, 0.09);

  /* Die eine dunkle Zone (Footer, Abschluss-CTA): das Maschinen-Chassis. */
  --dark: #101114;
  --dark-soft: #1a1c20;
  --dark-ink: #f4f5f4;
  --dark-ink-soft: #a2a6a9;
  --dark-line: rgba(255, 255, 255, 0.12);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 44rem;
  /* Lead-Typo + Lead-Lesebreite (Karriere-Lead; Dienstleistungs-Split ab
     Desktop). Einzige Quelle der Werte, genutzt von .mgc-lead und den
     Desktop-Regeln in 16d/Karriere. */
  --lead-lh: 1.35;
  --lead-ls: -0.012em;
  --lead-measure: 47.5rem;
  /* Typo-Skala (Phase C1, Max 31.08.2026): EINE Skala fuer die ganze Site.
     Werte = computed styles von /karriere/ (Kicker, H1, Lead, H2, Body,
     Caption), H3 aus der Basis (Karriere hat keine H3), h1-hero nur fuer
     den Startseiten-Hero. Nur diese acht Groessen-Tokens. */
  --fs-kicker: 0.8rem;
  --fs-h1: clamp(2.2rem, 5.6vw, 4.6rem);
  --fs-h1-hero: min(clamp(3.1rem, 11.5vw, 10.5rem), 13vh);
  --fs-lead: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
  --fs-h2: clamp(1.9rem, 4.5vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.55rem);
  --fs-body: 1.0625rem;
  --fs-caption: 0.68rem;
  /* Zeilenabstand-System (Auftrag Max 28.08.2026): genau drei Stufen,
     JEDE line-height-Deklaration der Site zeigt auf eine davon. */
  --lh-heading: 1.15; /* H1 bis H3, grosse Displaytitel und -zahlen */
  --lh-ui: 1.45;      /* kompakte Bloecke: Footer, Karten, Zeiten, Navigation, Buttons, Labels */
  --lh-text: 1.6;     /* Fliesstext und Absaetze */
  /* 115rem = 1840px: nutzt grosse Bildschirme (2560/1920) für Hero,
     Referenzen-Wand, Raster und Footer. Bis 1440px Viewport ändert
     sich nichts (dort deckelt die Fensterbreite). Fliesstext bleibt
     unabhängig begrenzt (section-head 62rem, CTA-Text 38rem usw.) -
     die Lesbarkeit hängt nicht am Container. */
  --wrap: 115rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* 1C (Entscheid 11.08.): Kopfzeile teilt die Inhaltskante. Der
     Header-Innenabstand ist jetzt identisch mit dem Content-Gutter,
     damit Logo, Nav und Topbar-Inhalt exakt auf der Kante der
     Sektionstitel stehen (mobil wie Desktop). */
  --gutter-header: var(--gutter);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3.5rem, 8vw, 6rem);
  --space-6: clamp(5rem, 12vw, 10rem);

  /* Präzision: harte Kanten. Eine minimale Fase, kein Weichzeichnen.
     28.08. (Max): Marxer ist flach, keine Schatten-/Glow-Tokens mehr. */
  --radius: 2px;

  /* Licht-Logik: Cyan leuchtet NUR in den dunklen Zonen (Auftakt und
     Finale) - dort wirkt es wie eine Lichtquelle. In den hellen
     Kapiteln ist Cyan strikt gedruckte Feinliner-Markierung, null Glow.
     Die Tokens werden darum ausschliesslich in Dunkelzonen-Selektoren
     verwendet (.hero, .cta-banner, .site-footer, .notfall-bar). */

  /* Duotone: seit 14.08. NUR noch fuer den Startseiten-Hero (dunkle
     Komposition mit Scrim). Alle Inhaltsbilder laufen dauerhaft in
     voller Farbe (Shane-Vorgabe: Touch kennt kein Hover). */
  --duotone: saturate(0.22) brightness(1.03) contrast(1.05);

  /* HUD/Mikro-Typo: technische Beschriftungen wie in einer Zeichnung. */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;

  --notfall-h: 2.25rem;
  /* Der Header behält in jeder Scroll-Position dieselbe Höhe
     (kein kompakter Scroll-Zustand), das Logo ebenso. */
  --header-h: 5.25rem;
}

/* Mobile-Vertikalrhythmus (Feinschliff 27.08.): die grossen Section-Abstaende
   sind auf Desktop kalibriert und wirken auf schmalen Screens wie Loecher.
   Hier site-weit per Breakpoint auf ~55% gekappt - wirkt ueber ALLE Sektionen,
   die --space-4/5/6 nutzen (Section-Padding, h2-Abstaende, Margins). Die
   Zeilenhoehe des Fliesstexts bleibt unberuehrt (kein line-height hier). */
@media (max-width: 40rem) {
  :root {
    --space-4: 1.4rem;
    --space-5: 2rem;
    --space-6: 2.8rem;
  }
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--notfall-h) + var(--header-h) + 1rem);
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* Monumental-Typo und Ziffern dürfen anschneiden, nie scrollen. */
}

/* Outline-Typo: nur Kontur, transparent gefüllt. Echte Textzeichen
   (selektier- und vorlesbar), rein visuell reduziert. */
.u-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.u-outline--white {
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
}

@supports not (-webkit-text-stroke: 2px #000) {
  .u-outline { color: inherit; }
}

/* HUD-Beschriftung: technische Mikro-Typo wie in einer Zeichnung. */
.hud {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hud::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.55em;
  vertical-align: 1px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Unterstrichene Textlinks nur im Fliesstext (nicht in Navigationen).
   :not([class]) hält Buttons und andere klassierte Links in Absätzen
   (z.B. .section-head__cta > .button) aus der Regel heraus. */
p a:not([class]),
.entry-content li a:not([class]),
.u-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

p a:not([class]):hover,
.entry-content li a:not([class]):hover,
.u-link:hover {
  color: var(--accent-text);
}

/* Dunkler Footer: Der helle Footer-Linkton hat Vorrang vor der
   Fliesstext-Regel oben (deren :not([class])-Fassung ist spezifischer
   als .site-footer a und färbte E-Mail, «Alle Öffnungszeiten» und
   «Bewertungen ansehen» dunkel auf dunkel). */
.site-footer p a:not([class]) {
  color: var(--dark-ink);
  text-decoration: none;
}

.site-footer p a:not([class]):hover {
  color: var(--accent);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
h4 { font-size: 1.1rem; letter-spacing: -0.01em; }

p {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}

/* WP-eigene UI (Admin-Bar) vom Lesemass-Deckel ausnehmen: Core setzt
   auf #wpadminbar ul kein max-width, die Basisregel liesse die Bar
   bei 44rem umbrechen. :where() hält die Spezifität bei 0-0-1, alle
   Komponenten-Konter (z.B. .main-nav ul) greifen unverändert. */
ul:where(:not(#wpadminbar *)),
ol:where(:not(#wpadminbar *)) {
  padding-left: 1.2rem;
  max-width: var(--measure);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-4) 0;
}

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* Dunkle Zonen: hellerer Ring, sonst saeuft der Fokus im Chassis ab. */
.site-top :focus-visible,
.hero :focus-visible,
.cta-banner :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--accent-bright);
}

.site-top.is-light :focus-visible {
  outline-color: var(--accent-hover);
}

/* Fokusring auf Akzent-Buttons: der globale accent-hover-Ring wäre vom
   neuen Button-Grund (#007bb0) kaum unterscheidbar. Tinte auf hellen
   Seiten (3.9:1 gegen den Button, 17:1 gegen den Grund), Weiss in den
   Dunkelzonen (4.7:1 gegen den Button, 19:1 gegen das Chassis). */
.button:focus-visible,
.main-nav .menu-item-cta > a:focus-visible {
  outline-color: var(--ink);
}

.hero .button:focus-visible,
.cta-banner .button:focus-visible,
.site-footer .button:focus-visible,
.site-top:not(.is-light) .main-nav .menu-item-cta > a:focus-visible {
  outline-color: #fff;
}

/* Helle/Ghost-Varianten behalten ihren eigenen Grund; dort bleibt der
   globale Akzentring sichtbar. */
.button--light:focus-visible,
.button--ghost:focus-visible {
  outline-color: var(--accent-hover);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   4. Layout-Helfer
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding: var(--space-6) 0;
}

.section--soft {
  background: var(--bg-soft);
}

/* Sektionskopf: riesige Outline-Ziffer als Kapitelmarke (01-05) hinter
   dem Titel, HUD-Kicker mit Fadenkreuz, monumentaler Titel. */
.section {
  position: relative;
}

.section-head {
  position: relative;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: 62rem;
}

/* C1.3: Sektions-Kicker der Startseite tragen die Kicker-Klasse
   (.page-header__kicker im Markup); hier nur noch Lage. */
.section-head__kicker {
  position: relative;
  z-index: 1;
}

.section-head__title {
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.section-head__text {
  margin-bottom: 0; /* Typo: .mgc-lead (Lead unter der Sektions-H2, C1.11) */
}

.section-head__cta {
  margin-top: var(--space-3);
}

/* Reveals: dezent, kurz, ease-out. Ein Uhrwerk, kein Feuerwerk. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

html.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Notfall-Leiste: permanent sichtbar, schmal, über dem Header.
   Der Cyan-Punkt ist die Statusleuchte der Maschine.
   -------------------------------------------------------------------------- */
.notfall-bar {
  position: relative;
  z-index: 120;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: var(--notfall-h);
  display: flex;
  align-items: center;
}

.notfall-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.notfall-bar {
  border-bottom: 1px solid var(--dark-line);
}

/* Status-Leuchte: lebendiger Puls, ohne Glow (28.08. flach). */
.notfall-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: mgc-pulse 2.6s ease-in-out infinite;
}

/* Puls ohne Glow-Halo: der Ring ist eine gedruckte Welle (Outline, kein
   box-shadow; 28.08. flach). */
@keyframes mgc-pulse {
  0%, 100% { outline: 0 solid rgba(0, 157, 225, 0.55); }
  50% { outline: 5px solid rgba(0, 157, 225, 0); }
}

.notfall-bar a {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.notfall-bar a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   6. Header & Navigation. Weiss, präzise Linie unten, sticky zusammen
   mit der Notfall-Leiste.
   -------------------------------------------------------------------------- */
.site-top {
  position: sticky;
  top: 0;
  z-index: 110;
}

/* Header: startet als Teil des dunklen Auftakts und wechselt über den
   hellen Kapiteln auf hell (JS setzt .is-light auf .site-top anhand
   der Zonen). Sanfte Transition, das Logo switcht mit. */
.site-header {
  /* Zwei Ebenen statt einer schwarzen Flaeche (Feinschliff 19.08.,
     revidiert Nachtrag 2 vom 15.08.; Ebenen gedreht per Shane-Feedback
     im Nachtrag): die Hauptnavigation bleibt auf dem tiefen Grund
     var(--dark) und verschmilzt mit dem Hero, die Notfall-Topbar
     liegt als HELLERE Anthrazit-Ebene (var(--dark-soft)) darueber.
     Der Farbsprung selbst ist die Trennkante, die Topbar-Hairline
     bleibt transparent. Hairline nach unten: der 1px-Slot bleibt,
     damit der is-light-Flip (setzt nur die border-FARBE) keinen
     Layoutsprung macht. */
  background: var(--dark);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Feine Kante zum Hero (Nachtrag 3, 15.08.): dezenter als die
     urspruenglichen 0.12 - der Header-BLOCK (Topbar+Header) bleibt
     eine Flaeche, nur nach unten trennt diese Hairline. is-light
     ueberschreibt die Farbe mit var(--line) wie bisher. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* Dunkelzonen: der Sticky-Wrapper selbst traegt denselben Grund wie
   Header und Topbar (Nachtrag 3) - sichtbar ist er nie (die Kinder
   decken), aber der Block ist damit auch box-seitig geschlossen. */
.site-top:not(.is-light) {
  background: var(--dark);
}

/* Dunkelzonen: die Notfall-Topbar ist die HELLERE Ebene
   (var(--dark-soft), Nachtrag 19.08.) ueber der dunkleren
   Hauptnavigation (var(--dark)). Die Trennlinie zum Header bleibt
   unsichtbar, der Farbsprung trennt. Ueber hellen Zonen (is-light)
   greift die Basisregel weiter: --ink mit Hairline, wie bisher. */
.site-top:not(.is-light) .notfall-bar {
  background: var(--dark-soft);
  border-bottom-color: transparent;
}

.site-top.is-light .site-header {
  background: rgba(252, 251, 248, 0.94);
  border-bottom-color: var(--line);
}

.main-nav a,
.nav-toggle__bar {
  transition: color 0.35s ease, background 0.35s ease;
}

.site-top.is-light .main-nav a {
  color: var(--ink-soft);
}

.site-top.is-light .main-nav a:hover,
.site-top.is-light .main-nav a:focus-visible,
.site-top.is-light .main-nav .current-menu-item > a,
.site-top.is-light .main-nav .current_page_item > a,
.site-top.is-light .main-nav .current_page_parent > a {
  color: var(--ink);
}

/* Heller Header: Cyan wird gedruckte Markierung, kein Glow. Der
   CTA-Text bleibt in allen Zuständen weiss - die generischen
   is-light-Regeln (höhere Spezifität) würden ihn sonst in Tinte
   färben: dunkel auf Cyan wirkt wie ein Fehler. */
.site-top.is-light .main-nav .menu-item-cta > a,
.site-top.is-light .main-nav .menu-item-cta > a:hover,
.site-top.is-light .main-nav .menu-item-cta > a:focus-visible {
  box-shadow: none;
  color: #fff;
}

.site-top.is-light .nav-toggle {
  border-color: var(--line);
}

.site-top.is-light .nav-toggle__bar {
  background: var(--ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}

/* 1C (Entscheid 11.08., ersetzt den Edge-to-edge-Entscheid vom
   16.07.): Das Kopfzeilen-INNENLEBEN (Logo, Nav, Kontakt-Button,
   Topbar-Inhalt) laeuft im selben max-width-Container wie der
   Seiteninhalt; nur der HINTERGRUND von Topbar und Header bleibt
   vollbreit. Auf sehr breiten Screens greift damit sichtbar
   dieselbe Begrenzung wie fuer den Inhalt. */
.notfall-bar__inner,
.site-header__inner {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-header);
  padding-right: var(--gutter-header);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.site-logo {
  position: relative;
}

.site-logo img {
  width: auto;
  /* Die viewBox ist auf den sichtbaren Inhalt zugeschnitten (0 0 595 99,
     vorher 606x164 mit 65 Einheiten Leerraum NUR unten) - die Flexbox-
     Mitte ist damit die optische Mitte der Schrift. Zielgrösse: die
     Schrift füllt den alten 60-65px-Kasten (Faktor 99/164), also ~29px
     mobil bis ~37.4px Desktop im 72/84px-Header. Das Logo bleibt in
     JEDER Scroll-Position gleich gross (konstanter Anker, wirkt
     ruhiger) - nur der Header wird kompakter und zieht sich um das
     Logo zusammen. Ausgeliefert wird das SVG (srcset), PNG nur
     2x-Fallback (1190x198, bleibt weit über der Darstellungsgrösse).
     1C: Grundmass in --logo-h; Default rendert die Empfehlung
     Variante a (+10%), ?logo=b schaltet auf +20% (body-Klasse). */
  --logo-h: clamp(1.8rem, 0.714vw + 1.625rem, 2.34rem);
  height: calc(var(--logo-h) * 1.1);
}

body.logo-var-b .site-logo img {
  height: calc(var(--logo-h) * 1.2);
}

/* Header-Verwandlung: beide Logo-Varianten im Markup, der Zustand
   (.site-top.is-light) blendet die passende ein. */
.site-logo__img--light {
  display: none;
}

.site-top.is-light .site-logo__img--dark {
  display: none;
}

.site-top.is-light .site-logo__img--light {
  display: block;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Die Basisregel deckelt ul/ol auf --measure (Lesemass) - für die
     Menüzeile aufheben, sonst läuft der letzte Punkt aus der Liste. */
  max-width: none;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2.1rem);
}

/* Schmale Desktop-Breiten (Burger übernimmt erst unter 60rem): Nav
   kompakter, damit alle acht Punkte plus CTA in die Zeile passen. */
@media (min-width: 60.0625rem) and (max-width: 68rem) {
  .main-nav ul {
    gap: 0.85rem;
  }

  .main-nav a {
    font-size: 0.88rem;
  }
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Unterstrich: sitzt knapp unter der Zeile, blendet animiert ein
   (Hover, Tastatur-Fokus und aktive Seite identisch). */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
  opacity: 0.9;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current_page_parent > a {
  color: #fff;
}

/* K09: Unterstrich NUR auf dem gehoverten/fokussierten Punkt und dem
   current-menu-item - nie auf Nachbarn (current_page_parent markierte
   z.B. den News-Punkt auf jeder Beitragsseite mit). */
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav .current-menu-item > a::after {
  transform: scaleX(1);
  opacity: 1;
}

/* CTA-Menüpunkt (Kontakt) als leuchtende Taste (Dunkelzone). */
.main-nav .menu-item-cta > a {
  background: var(--accent-button);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius);
  /* Button-Standard 28.08. (Auftrag Max): flach, kein Glow. */
  transition: background 0.2s ease;
}

.main-nav .menu-item-cta > a::after {
  display: none;
}

.main-nav .menu-item-cta > a:hover,
.main-nav .menu-item-cta > a:focus-visible {
  background: var(--accent-button-hover);
}

/* Dropdown (Desktop) */
.main-nav .menu-item-has-children {
  position: relative;
}

.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -1.15rem;
  min-width: 16rem;
  /* 28.08. (Auftrag Max): Standard = HELLES Panel (weisser Grund, Tinte,
     Hairline + weicher Schatten), Cyan-Oberkante = exakt die Panelbreite
     (border-top des Panels selbst). Ueber dunklem Grund (Startseite ueber
     dem Hero, oder jede Seite, die dunkel startet) schaltet der Header-
     Kontext .site-top:not(.is-light) auf das dunkle Panel um - theme.js
     setzt is-light anhand des Grunds, keine Seiten-IDs im CSS. */
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  display: block;
  /* 28.08. (Shane): kein Panel-Innenabstand mehr, der erste und letzte
     Eintrag liegen mit ihrem Grund buendig an Ober- und Unterkante; die
     Luft kommt aus dem Eintrag selbst (0.7rem statt 0.55rem). */
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out), visibility 0.22s;
}

/* 28.08. (Auftrag Max, Dropdown «Über uns»): das Panel (min-width 16rem) an
   left:-1.15rem eines kurzen Menuepunkts lief mit seiner Cyan-Oberkante
   bis unter den Kontakt-Button, und der Button lag darueber (.main-nav a
   ist position:relative und kommt im DOM spaeter, beide z-index auto).
   (1) Das Dropdown, auf das nur noch ein Punkt und der CTA folgen, klappt
   rechtsbuendig am eigenen Menuepunkt auf, endet also vor News und
   Button; (2) das Panel liegt per z-index ueber allen Header-Elementen. */
.main-nav .sub-menu {
  z-index: 5;
}

.main-nav .menu-item-has-children:has(+ li + .menu-item-cta) > .sub-menu,
.main-nav .menu-item-has-children:has(+ .menu-item-cta) > .sub-menu {
  left: auto;
  right: -1.15rem;
}

/* Offen per Hover (CSS), per Tastatur über die JS-Klasse is-offen
   (Escape kann so trotz Fokus schliessen, aria-expanded bleibt synchron);
   ohne JavaScript übernimmt :focus-within als Fallback. */
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children.is-offen > .sub-menu,
html.no-js .main-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Der Panel-Grund folgt dem Header-Zustand: dunkles Glas unter dem
   dunklen Header (Links hell), helles Glas im is-light-Zustand
   (Links in Tinte, Regeln weiter unten, desktop-gescoped). */
.main-nav .sub-menu a {
  display: block;
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft); /* 8.4:1 auf Weiss (AA/AAA) */
  transition: color 0.2s ease, background 0.2s ease;
}

.main-nav .sub-menu a::after {
  display: none;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
}

/* Aktiver Unterpunkt: satt und mit sanftem Akzent-Grund (gleiches
   Muster wie Hover) - bewusst ohne Passermarke, damit alle Einträge
   auf derselben X-Position beginnen. */
.main-nav .sub-menu .current-menu-item > a {
  color: var(--ink);
  font-weight: 600;
  background: var(--accent-soft);
}

/* Dunkler Header-Kontext (Startseite ueber dem Hero; jede Seite, die
   dunkel startet): dunkles, deckendes Panel wie bisher. Kontext-Schalter
   ist der bestehende is-light-Zustand von theme.js (Auftrag Max 28.08.). */
@media (min-width: 60.0625rem) {
  .site-top:not(.is-light) .main-nav .sub-menu {
    background: var(--dark-soft);
    border-color: var(--dark-line);
    border-top-color: var(--accent);
  }

  .site-top:not(.is-light) .main-nav .sub-menu a {
    color: var(--dark-ink-soft);
  }

  .site-top:not(.is-light) .main-nav .sub-menu a:hover,
  .site-top:not(.is-light) .main-nav .sub-menu a:focus-visible,
  .site-top:not(.is-light) .main-nav .sub-menu .current-menu-item > a {
    color: #fff;
    background: rgba(0, 157, 225, 0.14);
  }
}

.sub-toggle {
  display: none;
}

/* Teil 2: Deko-Peperoni existiert nur im Mobile-Menu-Overlay. */
.pep-deko {
  display: none;
}

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease, background 0.35s ease;
}

/* Mobile Navigation */
@media (max-width: 60rem) {
  /* Mobiler Kopf: weniger hoch als am Desktop, damit die sticky
     Kopfzeile (Leiste + Header) dem kleinen Viewport nicht zu viel
     Höhe nimmt - das Logo wächst über die clamp trotzdem mit. */
  :root {
    --header-h: 4.5rem;
  }

  .nav-toggle {
    display: flex;
  }

  /* 1C: Logo mobil hart gedeckelt: nie breiter als ~65vw und nie
     breiter als der Innenraum. object-fit haelt die Proportion und
     setzt die sichtbare Kante linksbuendig auf die Inhaltskante. */
  .site-logo {
    min-width: 0;
  }

  .site-logo img {
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  /* 28.08. (Auftrag Max, Geraetebefund Shane): feste Reihenfolge und
     Abstaende Logo | Merkliste | Burger. Vorher reservierte das Logo-<a>
     immer seine Naturbreite (243px; das vw-max-width des Bildes zaehlt
     nicht fuer die Flex-Grundgroesse), Icon und Burger durften schrumpfen:
     der Burger wurde auf 18px gequetscht und rutschte mit sichtbarem
     Badge ueber den rechten Rand (390: bis 396px, 320: ganz draussen,
     auch das X im offenen Menue). Jetzt: Logo ist das einzige schrumpf-
     bare Element (max 65vw, object-fit haelt die Proportion), Icon und
     Burger sind fest, die Luecke ist enger; ein zweistelliger Zaehler
     verbreitert nur das Badge, nichts verschiebt sich nach draussen. */
  .site-header__inner {
    gap: 0.75rem;
  }

  .site-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 65vw;
  }

  .merkliste-toggle,
  .nav-toggle {
    flex: none;
  }

  .merkliste-toggle {
    padding: 0.5rem 0.35rem;
    gap: 0.35rem;
  }

  body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Offenes Menü: der Scroll-Lock fixiert den Body und versetzt ihn um
     die Scrollposition nach oben (top: -scrollY). Das sticky .site-top
     fiele dabei an seine Dokumentposition zurück und läge samt X-Knopf
     UND Overlay (der Header ist dessen Containing Block) genau scrollY
     Pixel über dem Viewport - das Menü öffnete unsichtbar und die
     Seite wirkte eingefroren. Solange das Menü offen ist, ankert die
     Kopfzeile deshalb direkt am Viewport; das Padding ersetzt ihren
     Platz im Fluss exakt, damit die gelockte Seite nicht verspringt. */
  body.nav-open {
    padding-top: var(--site-top-h, calc(var(--notfall-h) + var(--header-h)));
  }

  body.nav-open .site-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Notch-Schutz bei offenem Menü: der fixierte Kopf rückt unter
       die Safari-Leiste, das JS misst die Kopfhöhe inkl. Padding. */
    padding-top: env(safe-area-inset-top);
  }

  /* Vollbild-Overlay unterhalb von Notfall-Leiste + Header: eigene
     Ebene ÜBER dem Seiteninhalt, volle Resthöhe mit dvh (iOS-
     Adressleiste!), interner Scroll; der Body wird per JS gesperrt.
     Dunkles Chassis - der Header bleibt bei offenem Menü dunkel. */
  .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    /* ACHTUNG Containing Block: der backdrop-filter des Headers macht
       den Header zum Bezug für position: fixed. top zählt darum ab
       Header-OBERKANTE (--menu-top-local = Header-Höhe, via JS),
       die Höhe ab Viewport (--menu-top = Leiste + Header). */
    top: var(--menu-top-local, var(--header-h));
    height: calc(100vh - var(--menu-top, calc(var(--notfall-h) + var(--header-h))));
    height: calc(100dvh - var(--menu-top, calc(var(--notfall-h) + var(--header-h))));
    z-index: 105;
    display: flex;
    flex-direction: column;
    background: var(--dark);
    padding: 1.25rem var(--gutter-header) max(1.5rem, env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Deko-Peperoni (Adobe Stock 998870148, Entscheid Shane 14.08.):
     Foto-Freisteller statt der frueheren SVG-Kontur. Rechte
     Menuehaelfte, vertikal mittig, diagonal aufgestellt (Spitze
     unten links, Stiel oben rechts), bewusster Anschnitt der
     Bauchrundung am rechten Rand; overflow-x clip verhindert
     Scroll-Ueberlauf. Opacity im bestellten Korridor 0.2-0.35,
     damit das Rot lesbar bleibt und die Menuepunkte den Kontrast
     behalten. Hinter den Punkten (ul traegt z-index 1). */
  .main-nav {
    overflow-x: clip;
  }

  .main-nav .pep-deko {
    display: block;
    position: absolute;
    /* Neu gesetzt nach Shanes Marker-Skizze (iPhone-Screenshot 14.08.
       23:35): steile Diagonale (~67 Grad) von Hoehe Angebote/
       Referenzen hinunter in die linke untere Ecke, Spitze unten
       links, Stiel oben rechts, KOMPLETT weg von der rechten
       Chevron-Spalte (links verankert statt rechts). Zuruf 15.08.
       (Position/Diagonale abgenommen, NICHT mehr verschieben):
       5% kleiner (118->112vw) und deutlich dunkler - Opacity 0.14
       statt 0.22 (Richtwert war ~halbiert; 0.12 kippte im
       Screenshot-Vergleich in Unsichtbarkeit, 0.14 bleibt dezenter
       Akzent hinter muehelos dominierenden Menuetexten). left/bottom
       kompensieren die Schrumpfung, das Frucht-Zentrum bleibt
       pixelgleich (gemessen 199.6/621 vs. vorher 199.4/621 auf 390);
       der 2.15vw-Anteil im bottom gleicht die vw-basierte
       Hoehenaenderung gegen den vh-Anker aus. Chevron-Abstaende
       nach Zuruf: 375=37.9 / 390=35.5 / 430=65.4px (Soll min 8). */
    top: auto;
    bottom: calc(7vh + 2.15vw);
    /* Final-Zuruf 15.08. 00:08 (ersetzt den 16px-Zuruf): Zielbild
       = Stielansatz auf 390 mittig in der Luecke zwischen Wortende
       "Dienstleistungen" (x195) und Chevron-Box (x326), Mitte x261.
       Die bestellten "+6px" bezogen sich auf Shanes stalen
       Screenshot der Version OHNE die 16px; vermessen landet die
       Mitte bei +13px ab dieser Basis (Hilfslinien-Screenshot,
       Kelch symmetrisch auf der Mittellinie). Chevron-Abstaende
       375/390/430 = 25.9/23.9/52.4px (Soll min 8). */
    left: calc(-13.5vw + 13px);
    right: auto;
    width: 112vw;
    transform: rotate(-40deg);
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
  }

  .main-nav .pep-deko img {
    display: block;
    width: 100%;
    height: auto;
  }

  .main-nav ul {
    position: relative;
    z-index: 1;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav li {
    border-bottom: 1px solid var(--dark-line);
  }

  .main-nav a {
    display: block;
    font-family: var(--font-display);
    /* Verdichtungsstufen a+b (Entscheid Shane 14.08.), damit das Menü
       auf 375x667 ohne Scrollen passt: Padding 0.75rem statt 1rem,
       Schrift über das clamp-Raster mit Fussweite eine Stufe kleiner
       (Deckel bleibt die bisherige 1.5rem-Grösse, greift ab ~430px).
       Die Untermenü-Links haben eigene Werte und bleiben unberührt. */
    font-size: clamp(1.35rem, 6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    padding: 0.75rem 0;
  }

  .main-nav a::after {
    display: none;
  }

  /* Kontakt mobil wie jeder andere Menüpunkt (Entscheid Shane 14.08.):
     die Desktop-Pill-Regeln (Grund, Radius, Glow, Sonder-Padding)
     werden hier neutralisiert; das li erbt die Basis-Trennlinie. */
  .main-nav .menu-item-cta > a {
    background: transparent;
    padding: 0.75rem 0; /* spiegelt das Basis-Padding der Menüzeilen */
    border-radius: 0;
    box-shadow: none;
  }

  .main-nav .menu-item-cta > a:hover,
  .main-nav .menu-item-cta > a:focus-visible {
    background: transparent;
    box-shadow: none;
  }

  /* Fokusring wie bei den übrigen Punkten (Dunkelzonen-Ring); die
     Selektoren spiegeln die Pill-Fokusregeln, damit die Kaskade hier
     per Reihenfolge gewinnt. */
  .main-nav .menu-item-cta > a:focus-visible,
  .site-top:not(.is-light) .main-nav .menu-item-cta > a:focus-visible {
    outline-color: var(--accent-bright);
  }

  /* Untermenüs mobil: aufklappen über generierten Toggle. Der Punkt
     ist eine Flex-Zeile (align-items: center): Link und Toggle teilen
     die Zeilenachse, das geöffnete Untermenü bricht auf volle Breite
     um - der Chevron bleibt so in beiden Zuständen auf der Link-Zeile
     zentriert statt fix von oben positioniert. */
  .main-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .main-nav .menu-item-has-children > a {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* iOS-Notfallbefund Shane 14.08. 15:04: Doppel-Tipp aufs Akkordeon
     zoomte die Seite formatfuellend auf den 44px-Button (Element-Zoom
     von Safari, kein CSS-Groessenfehler). manipulation laesst Pinch
     fuer die Zugaenglichkeit zu und unterdrueckt nur den
     Doppeltipp-Zoom auf den Bedienelementen des Menues. */
  .main-nav a,
  .sub-toggle,
  .nav-toggle {
    touch-action: manipulation;
  }

  .sub-toggle {
    display: block;
    position: relative;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    cursor: pointer;
  }

  /* Chevron exakt mittig: -50% zentriert die 8px-Box, die weiteren
     -35%/+35% gleichen aus, dass die sichtbare Winkelform unter bzw.
     über der Boxmitte liegt (Diagonale/4 der rotierten Box). */
  .sub-toggle::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -85%) rotate(45deg);
    transition: transform 0.25s var(--ease-out);
  }

  .is-sub-open > .sub-toggle::before {
    transform: translate(-50%, -15%) rotate(225deg);
  }

  .main-nav .sub-menu {
    position: static;
    flex-basis: 100%; /* eigene Zeile unter Link + Toggle (Flex-Wrap) */
    min-width: 0;
    background: transparent; /* Overlay ist selbst dunkel, kein Panel-Glas */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.5rem 1rem;
    display: none;
    opacity: 1;
    /* inherit statt visible: visible würde das GESCHLOSSENE Overlay
       (visibility: hidden) übersteuern - unsichtbare, aber fokussier-
       und antippbare Links über dem Seiteninhalt. */
    visibility: inherit;
    transform: none;
  }

  .is-sub-open > .sub-menu {
    display: block;
  }

  .main-nav .sub-menu li {
    border-bottom: 0;
  }

  .main-nav .sub-menu a {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--dark-ink-soft);
    padding: 0.55rem 0;
  }

  /* Overlay ist dunkel: Hover/Fokus wie bisher hell (die helle Desktop-
     Panel-Variante darf hier nicht durchschlagen). */
  .main-nav .sub-menu a:hover,
  .main-nav .sub-menu a:focus-visible {
    color: #fff;
    background: rgba(0, 157, 225, 0.14);
  }

  /* Overlay ist dunkel: aktiver Unterpunkt in Weiss statt Tinte und
     ohne Akzent-Grund - die Links haben hier seitlich keine
     Innenabstände, ein Grund würde am Text kleben. */
  .main-nav .sub-menu .current-menu-item > a,
  .site-top.is-light .main-nav .sub-menu .current-menu-item > a {
    color: #fff;
    background: none;
  }
}

/* Header Mobile bis 430px (Auftrag Sammelpaket 15.08., Block A):
   Balken kompakter (--header-h 4.5rem -> 3.75rem = 60px) und das
   Logo in den gewonnenen Raum gezogen (--logo-h 2.3rem, gerendert
   ~40px = +28%), Proportionen unveraendert. Ergibt ~10px Atemrand
   oben/unten. --header-h speist scroll-padding-top, Menu-Offsets
   und nav-open-Fallbacks per var() automatisch; das JS misst die
   echte Kopfhoehe ohnehin nach. Topbar bleibt unangetastet.
   ACHTUNG Kaskade: MUSS nach der 60rem-Query stehen, die :root
   --header-h 4.5rem setzt (gleiche Spezifitaet, Reihenfolge
   entscheidet). */
@media (max-width: 26.875rem) {
  :root {
    --header-h: 3.75rem;
  }

  .site-logo img {
    --logo-h: 2.3rem;
  }
}

/* --------------------------------------------------------------------------
   7. Buttons: EINE Klasse site-weit (Shane 27.08.2026): Akzentblau wie der
   Header-Kontakt-Button (var(--accent-button), weisse Schrift, Glow,
   Hover dunkler + Glow-strong). Keine schwarzen Sonderfaelle mehr;
   Gravity-Forms-Buttons tragen dieselbe Klasse. Pfeil rückt beim Hover nach.
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent-button);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  /* Button-Standard 28.08. (Auftrag Max): EIN Primaer-Button sitewide -
     blaue Flaeche, weisser Text, kein box-shadow, kein Glow, kein
     Verlauf; Hover = eine Stufe dunkler, sonst nichts; Fokus = Outline
     (Regeln in Abschnitt Fokus). Nutzt: Header-Kontakt, CTA-Bloecke,
     Besuch vereinbaren, Merkliste Drucken, Gravity-Forms Absenden. */
  transition: background 0.22s ease;
}

.button:hover {
  background: var(--accent-button-hover);
}

.button--accent {
  background: var(--accent-button);
}

.button--accent:hover {
  background: var(--accent-button-hover);
}

.button--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.button--ghost:hover {
  background: transparent;
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.button--light {
  background: #fff;
  color: var(--ink);
}

.button--light:hover {
  background: var(--accent-button);
  color: #fff;
}

.button__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.25s var(--ease-out);
}

.button:hover .button__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   8. Hero: der dunkle Auftakt. Chassis-Dunkel mit feinem technischen
   Linienraster, monumentale weisse Typo über dem Duotone-Exponat,
   HUD-Koordinaten am Rand. Danach öffnet sich das Werkhallen-Tor:
   Cyan-Horizont als präzise Kante, das Dunkel läuft kontrolliert aus.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 120px),
    var(--dark);
  color: var(--dark-ink);
  overflow: clip;
  /* Exakt ein Bildschirm: Viewporthöhe minus Notfall-Bar + Header.
     --site-top-h misst theme.js zur Laufzeit (Resize-fest), der
     var()-Fallback nutzt die Layout-Tokens. dvh hält mobile
     Browserleisten stabil, die vh-Zeile ist der Fallback für
     ältere Browser. min-height statt height: auf sehr flachen
     Viewports wächst der Hero mit dem Inhalt, statt abzuschneiden. */
  min-height: calc(100vh - var(--site-top-h, calc(var(--notfall-h) + var(--header-h))));
  min-height: calc(100dvh - var(--site-top-h, calc(var(--notfall-h) + var(--header-h))));
}

/* Werkhallen-Tor, Teil 1: die leuchtende Horizont-Kante am Ende des
   Dunkels (Dunkelzone -> Glow erlaubt). */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 157, 225, 0.4) 55%, rgba(0, 157, 225, 0.12) 100%);
  z-index: 3;
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* Die vollbreite Textspalte liegt über der Bildbühne (z-1-Kontext)
     und schluckte dort alle Klicks, u.a. auf den Slideshow-Steuer-
     punkten. Leere Fläche durchlässig, echte Inhalte fangen wieder. */
  pointer-events: none;
  width: 100%;
  padding-top: clamp(2.5rem, 6vh, 6rem);
  padding-bottom: clamp(2.5rem, 6vh, 6rem);
}

/* Bild: absolute rechte Bühne, Stahl-Duotone, weicher Übergang ins
   Chassis, damit die Typo darüber laufen kann. */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(38%, 52vw, 58%);
  z-index: 1;
}

/* Hero-Slideshow (2026-08-11): Text-Slides als Stapel (Hoehe = die
   hoechste Variante, Buttons springen nicht), Fotos als Crossfade-
   Ebenen, Steuerpunkte 01/02/03 im Mono-Katalog-Stil. */
.hero__textstapel {
  display: grid;
  /* minmax(0,1fr): die gestapelten Slides duerfen die Spur nicht auf
     ihre max-content-Breite aufweiten (mobil lief der Text sonst aus
     dem Viewport) - gleiches Rezept wie beim Fakten-Grid. */
  grid-template-columns: minmax(0, 1fr);
}

.hero__slide-text {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.hero__slide-text.ist-aktiv {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

.hero--slideshow .hero__slide-text.ist-aktiv .hero__line > span {
  /* Ersetzt die mgc-line-in-Basisanimation; muss deshalb explizit im
     sichtbaren Endzustand enden (Basis steht auf translateY(108%)). */
  animation: mgc-hero-zeile 0.6s var(--ease-out) both;
  animation-delay: calc(var(--l) * 90ms);
}

@keyframes mgc-hero-zeile {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hero__foto.ist-aktiv {
  opacity: 1;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__steuer {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  display: flex;
  gap: 1rem;
  z-index: 2;
}

.hero__inner > * {
  pointer-events: auto;
}

.hero__steuer-punkt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: 0;
  border-top: 1.5px solid transparent;
  /* Trefferzone min. 32x32px, Ziffer oben an der Unterstrich-Kante. */
  min-width: 32px;
  min-height: 32px;
  padding: 0.35rem 0.4rem 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero__steuer-punkt:hover,
.hero__steuer-punkt:focus-visible {
  color: #fff;
}

.hero__steuer-punkt.ist-aktiv {
  color: #fff;
  border-top-color: var(--accent);
}

/* Desktop: Die Leiste soll auf der Viewportmitte zentriert stehen.
   Ihr Containing Block ist aber .hero__media (rechte Bühne, Breite
   clamp(38%,52vw,58%)) - left:50% hiesse "Mitte der Bühne", und das
   alte left:1.1rem setzte die linke Gruppenkante fast exakt auf die
   Viewportmitte. Deshalb viewportbezogen: rechte Kante 50vw von der
   rechten Bühnenkante (= Viewportrand), dann um die halbe eigene
   Breite zurück. */
@media (min-width: 56.0625rem) {
  .hero__steuer {
    left: auto;
    right: 50vw;
    transform: translateX(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide-text,
  .hero__slide-text.ist-aktiv,
  .hero__foto {
    transition: none;
  }

  .hero--slideshow .hero__slide-text.ist-aktiv .hero__line > span {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

.hero__media picture,
.service-card__media picture {
  display: contents;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nachtrag Sammelpaket 15.08. (ersetzt B4/C6): Graufilter der
     Slideshow ueberall raus - Farben schimmern gedaempft durch
     (roter Boden, Messing, Gruen), Overlay/Abdunkelung bleiben,
     die Headline dominiert weiter. Desktop bewusst dezenter als
     die Mobile-Stufe (dort saturate 0.95 in der 430px-Query).
     Das --duotone-Token selbst bleibt unangetastet (andere
     Sektionen nutzen es weiter). */
  filter: saturate(0.68) brightness(0.84) contrast(1.03);
}

/* Übergang ins Chassis-Dunkel: links satt, wird zur Bildmitte frei -
   die Zone, in der die Outline-Zeile über dem Bild läuft, bleibt so
   dunkel genug, dass die weisse Kontur knackig steht. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--dark) 0%, rgba(16, 17, 20, 0.84) 30%, rgba(16, 17, 20, 0.38) 58%, rgba(16, 17, 20, 0.06) 82%),
    linear-gradient(0deg, var(--dark) 0%, rgba(16, 17, 20, 0) 26%);
}

/* K05-Sonderverlauf ENTFERNT (Block C, 15.08.): die Regel hing am
   alten Ausstellungs-Slide (data-hero-foto="1"); im 5er-Pool traefe
   sie willkuerlich S2. Alle Slides laufen auf dem Standard-Verlauf. */

/* Block C: die fuenf Textstapel sind inhaltsgleich (stehender Text).
   Nur der erste faehrt beim Laden ein; die uebrigen duerfen beim
   Bildwechsel NICHT neu animieren, sonst flackerte der identische
   Text alle 7 Sekunden. */
.hero--slideshow .hero__slide-text:not(:first-child) .hero__line > span,
.hero--slideshow .hero__slide-text.ist-aktiv:not(:first-child) .hero__line > span {
  animation: none;
  transform: none;
  opacity: 1;
}

/* Caption ist seit Block C ein Link auf die jeweilige Referenz:
   HUD-Stil bleibt, Interaktion dezent (Hover/Fokus weiss). */
.hero__caption-link {
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero__caption-link:hover,
.hero__caption-link:focus-visible {
  color: #fff;
}

/* HUD-Label am Bild wie in einer technischen Zeichnung. Rechts
   raeumt es die Ecke des Scroll-nach-oben-Pfeils (.to-top: fixed,
   right 1.1rem, Breite 2.8rem): beim Scrollen durch den Hero teilten
   sich beide sonst dieselbe Ecke (Feinschliff 19.08.). */
.hero__media .hud {
  position: absolute;
  right: calc(1.1rem + 2.8rem + 1.2rem);
  bottom: 1.1rem;
  z-index: 2;
  color: var(--dark-ink-soft);
}

/* Koordinaten vertikal am linken Seitenrand: der Ort als Signatur. */
.hero__coords {
  position: absolute;
  left: 0.35rem;
  bottom: clamp(3rem, 8vw, 6.5rem);
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  user-select: none;
}

/* Monumentale weisse Headline: überlagert das Bild. Zeile 2 als
   präzise Konturlinie. */
.hero__title {
  /* K06: font-family explizit, nicht geerbt. Slide 1 ist ein h1 und
     bekam Archivo über die h1-Regel; Slides 2/3 sind divs und erbten
     Inter - dessen Überlappungs-Konturen zeichnen unter
     -webkit-text-stroke Striche durch e/f/t. Archivo rendert sauber. */
  font-family: var(--font-display);
  /* 390px: Untergrenze 3.1rem füllt die Zeile «Kältetechnik» fast
     randvoll - kraftvoll, ohne umzubrechen. Dazwischen skaliert 11.5vw
     zügig auf die monumentale Desktop-Lage. Der 13vh-Deckel hält den
     Hero auf flachen Fenstern (z.B. 1280x800) exakt in der
     Bildschirmhöhe - drei Zeilen plus Lead und Buttons passen dann
     ohne Überlauf. */
  font-size: var(--fs-h1-hero); /* C1: einzige eigene H1-Groesse der Site */
  font-weight: 640;
  /* 0.99 statt 0.94 (Ergaenzung 15.08.): bei 0.94 beruehrte die
     Kontur-Zeile mit Unterlaengen (g in «massgebaut»/«durchgeplant»)
     fast die Nachbarzeile (Tintenbedarf gemessen 0.927em + Stroke).
     0.99 = mind. 0.06em Luft auf allen fuenf Sets bei 1920; auf 390
     bleiben alle Headlines dreizeilig, der 375er-Fold haelt. */
  line-height: var(--lh-heading);
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-3);
  color: #fff;
  max-width: none;
}

/* Volle Deckung der weissen Kontur: über dem Duotone-Bild muss die
   Outline-Zeile wie graviert stehen. */
.hero__title .u-outline--white {
  -webkit-text-stroke: clamp(1.6px, 0.22vw, 3px) rgba(255, 255, 255, 0.95);
}

/* Jede Zeile der Headline fährt einzeln ein (CSS-only, kein FOUC):
   satt und schnell, ease-out, knapper Stagger - ein Uhrwerk. */
.hero__line {
  display: block;
  overflow: hidden;
  /* Luft für Unterlängen und negatives Letter-Spacing beim Clipping:
     0.22em deckt g/j/p/q/y bei line-height 0.99 (0.06em reichte nur
     für Satzzeichen; sichtbar gekappt bei «Tag» und «Ruggell»).
     Negative Marge kompensiert, der Zeilenrhythmus bleibt identisch. */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.hero__line > span {
  display: block;
  transform: translateY(108%);
  animation: mgc-line-in 0.8s var(--ease-out) both;
  animation-delay: calc(var(--l, 0) * 100ms);
}

@keyframes mgc-line-in {
  to { transform: none; }
}

html.no-js .hero__line > span {
  transform: none;
  animation: none;
}

.hero__akzent {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 var(--space-3);
}

.hero__akzent::before {
  content: "";
  flex: none;
  width: 2.6rem;
  height: 2px;
  background: var(--accent);
}

.hero__text {
  font-size: 1.12rem;
  color: var(--dark-ink-soft);
  max-width: 32rem;
  margin-bottom: var(--space-4);
}

/* Buttons im dunklen Hero: leuchtende Taste + weisse Kontur. */
.hero .button--ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

.hero .button--ghost:hover {
  color: var(--accent-bright);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

@media (max-width: 56rem) {
  .hero__coords {
    display: none;
  }

  /* Gestapelter Hero: die Bildbuehne blutet je eine Gutter-Breite ueber
     die Viewportkanten (full-bleed), das absolute right der Caption
     verliert dadurch genau diesen Betrag. Gutter dazurechnen, damit die
     .to-top-Ecke (1.1rem + 2.8rem) frei bleibt (Feinschliff 19.08.);
     unter 26.875rem greift die eigene Mobile-Regel weiter unten. */
  .hero__media .hud {
    right: calc(var(--gutter) + 1.1rem + 2.8rem + 1.2rem);
  }

  /* Mobil stapelt der Flex-Hero als Spalte (Typo zuerst, Bild als
     full-bleed Exponat darunter) statt Inhalt und Bild nebeneinander
     zu quetschen. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .hero__inner {
    padding-bottom: 0;
  }

  .hero__media {
    position: relative;
    inset: auto;
    width: auto;
    height: 62vw;
    margin: var(--space-4) calc(-1 * var(--gutter)) 0;
  }

  .hero__media::before {
    background: linear-gradient(0deg, rgba(16, 17, 20, 0) 60%, var(--dark) 100%);
  }

  .hero__ctas .button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Hero-Slideshow Mobile bis 430px (Sammelpaket 15.08., Block B):
   Topbar + Header + Hero = MINDESTENS ein sichtbarer Viewport (svh
   haelt die iOS-Leisten ruhig, vh ist der Fallback; --site-top-h
   misst theme.js). Komposition: die Slideshow liegt vollflaechig
   HINTER dem Text (statt 62vw-Bild unterm Textstapel =
   Schwarz-Scrollen), der Textblock ankert unten, der vertikale
   Verlauf sitzt nur hinter der Textzone - die obere Bildzone bleibt
   frei, soweit der Viewport sie hergibt. Steuerpunkte links unten,
   Caption rechts unten, CTA-Unterkante 3.4rem darueber = keine
   Ueberlappung. B4: Graufilter mobil raus, Farbe leicht gedaempft
   (saturate 0.95 + brightness 0.85), Lesbarkeit kommt vom Verlauf. */
@media (max-width: 26.875rem) {
  .hero {
    justify-content: flex-end;
    /* Viewport-Hoehe als UNTERGRENZE statt als harte Hoehe (Fix
       15.08. nachmittags, iPhone-Befund 13:38): der Textstapel ist
       unten verankert; war er hoeher als (Viewport - Kopfzeile),
       lief er OBEN aus dem Hero und verschwand unter dem sticky
       Header - "Grossküchen," war auf 390 angeschnitten (echtes
       Safari-Viewport ~660px sichtbar, Hero 563px < Stapel 596px).
       Mit min-height waechst der Hero mit dem Inhalt: die erste
       Headline-Zeile beginnt immer an der Hero-Oberkante + 1.5rem
       padding-top des Inners = 24px Luft unter dem Header-Block.
       Der Abstand haengt damit am Dokumentfluss unter der sticky
       Kopfzeile (und ueber --site-top-h an deren gemessener Hoehe),
       nicht an einem festen Pixelwert. Auf hohen Viewports aendert
       sich nichts; auf flachen (375x667) ragt nur die Punktleiste
       ~14px unter den Fold, Headline bis sekundaerer CTA bleiben
       sichtbar. */
    min-height: calc(100vh - var(--site-top-h, calc(var(--notfall-h) + var(--header-h))));
    min-height: calc(100svh - var(--site-top-h, calc(var(--notfall-h) + var(--header-h))));
  }

  .hero__inner {
    padding-top: 1.5rem;
    /* 3.9rem: unter den CTAs stapeln sich jetzt Caption (bottom
       2.4rem) und Punktleiste (0.75rem) - 12px Luft zur Caption. */
    padding-bottom: calc(3.9rem + env(safe-area-inset-bottom));
  }

  .hero__media {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
  }

  .hero__media img {
    /* Feinschliff 15.08. (Shane 01:24, dunkle Slides unsichtbar):
       KEINE Abdunkelung mehr am Bild selbst - das dunkle Schwert-
       Motiv braucht jedes Licht; die Lesbarkeit kommt komplett vom
       Verlauf, helle Motive zaehmt die satte Textzone. */
    filter: saturate(0.95) brightness(1);
  }

  .hero__media::before {
    /* Verlaufsstopps in PX VON UNTEN statt in Prozent (Fix 15.08.
       nachmittags): der Textstapel ankert unten in festen
       Pixel-Abstaenden (Fliesstext 202-369px ab Hero-Unterkante),
       Prozentstopps wanderten auf echten Geraeten (kleinerer
       sichtbarer Viewport = kuerzerer Hero) aus der Textzone -
       gemessen 1.44:1 Fliesstext-Kontrast auf dem Landgasthof-
       Mühle-Motiv. Pixelstopps decken die Textzone hoehenunabhaengig:
       0.8-0.72 hinter Fliesstext und CTAs (Pixel-Sampling aller
       fuenf Motive: schwaechste Stelle >= 7:1, Ziel 4.5:1), darueber
       Auslauf ueber die Headline-Zone (0.3 -> 0.12), ab 656px frei
       (0.03) - das Motiv bleibt oben sichtbar. Der Top-Scrim ist
       unveraendert. */
    background:
      linear-gradient(0deg, var(--dark) 0, rgba(16, 17, 20, 0.92) 64px, rgba(16, 17, 20, 0.8) 200px, rgba(16, 17, 20, 0.72) 372px, rgba(16, 17, 20, 0.3) 452px, rgba(16, 17, 20, 0.12) 548px, rgba(16, 17, 20, 0.03) 656px),
      linear-gradient(180deg, rgba(16, 17, 20, 0.35) 0%, rgba(16, 17, 20, 0) 18%);
  }

  /* Textebene neu austariert (Auftrag 15.08. 01:45): Der Fliesstext
     geht Richtung Weiss mit dezentem Schatten - Lesbarkeit ohne das
     Bild wieder abzudunkeln, der Sichtbarkeits-Gewinn bleibt. */
  .hero__text {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 3px rgba(16, 17, 20, 0.55);
  }

  /* Caption zieht von oben rechts nach UNTEN rechts (Chip aufgeloest):
     die obere Zone atmet - Header, freie Bildzone, Headline sauber
     gestaffelt, keine Beruehrung mehr moeglich. Unten sitzt sie im
     satten Teil des Verlaufs (kein eigener Grund noetig), einzeilig,
     rechtsbuendig ueber der Punktleiste; die Baender ueberlappen sich
     vertikal nicht (Caption ~38-51px, Punkte ~12-32px ab Unterkante). */
  .hero__media .hud {
    top: auto;
    bottom: 2.4rem;
    left: auto;
    /* Ecke des .to-top-Pfeils freihalten (right 1.1rem + 2.8rem
       Breite, Feinschliff 19.08.): das Caption-Band (2.4rem ab
       Unterkante) laeuft sonst horizontal in die Pfeilflaeche. */
    right: calc(var(--gutter-header) + 3.9rem);
    max-width: calc(100% - 2rem - 3.9rem);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.6);
  }

  /* Indikatoren dezent: feine Punkte statt 01-05-Zahlen, aktiver
     Zustand = kleine Accent-Pille. Trefferzone bleibt 28px pro Punkt
     (plus Abstand), Bedienung unveraendert ueber dieselben Buttons. */
  .hero__steuer {
    left: var(--gutter-header);
    bottom: 0.75rem;
    gap: 0.35rem;
  }

  .hero__steuer-punkt {
    font-size: 0;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-top: 0;
    position: relative;
  }

  .hero__steuer-punkt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.2s ease, width 0.2s ease;
  }

  .hero__steuer-punkt.ist-aktiv::before {
    width: 16px;
    background: var(--accent);
  }

  /* 375x667 lief der Stapel ueber (Headline oben gekappt): vertikale
     Kosten massvoll verdichtet - Texte wortgleich, nur Groessen und
     Margen. Auf 390/844 entsteht dadurch etwas mehr freie Bildzone
     oben, gewollt. */
  .hero__title {
    margin-bottom: 0.9rem;
  }

  .hero__akzent {
    margin-bottom: 0.8rem;
  }

  .hero__text {
    font-size: 1.02rem;
    margin-bottom: 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   9. Fakten-Zeile: gedruckte Katalog-Tabelle. Monumentale Ziffern in
   der breiten Archivo-Lage (Industrie-Beschriftung), Cyan-Feinliner
   als obere und untere Druck-Linie. Count-up beim Reinscrollen.
   -------------------------------------------------------------------------- */
/* Werkhallen-Tor, Teil 2: die erste helle Fläche empfängt mit einem
   weichen Auslauf des Dunkels unter der Cyan-Kante - kein harter
   Farbschnitt, aber auch kein Parallax-Zirkus. */
.fakten {
  position: relative;
  /* Kennzahlen-Variante A: EINE feine Akzentlinie oben (der
     Cyan-Horizont unter dem dunklen Hero), unten offen - die
     Akzentfarbe gliedert, statt den Block einzurahmen. */
  background: var(--bg);
  border-top: 2px solid var(--accent);
  /* Ziffern tragen ~0.097em Innenluft überm Versal-Ink (Digit-
     Leading, per Canvas-TextMetrics gemessen) - der Ausgleich sitzt
     auf padding-top und skaliert mit der Zahlgrösse, damit Zahl und
     Label OPTISCH mittig stehen, nicht nur geometrisch. */
  --zahl-groesse: clamp(2.4rem, 5.6vw, 4.4rem);
  --ink-ausgleich: calc(0.097 * var(--zahl-groesse));
  --fakten-pad: clamp(1.7rem, 3.2vw, 2.8rem);
}

.fakten__grid {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: lange Labels («Ansprechpartner von
     A-Z») dürfen die Spur nicht aufweiten - alle vier Spalten sind
     exakt gleich breit, Inhalt in jeder Zelle identisch zentriert. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fakten__item {
  min-width: 0;
  text-align: center;
  padding: calc(var(--fakten-pad) - var(--ink-ausgleich)) clamp(0.8rem, 1.6vw, 1.6rem) var(--fakten-pad);
  border-left: 1px solid rgba(19, 20, 22, 0.09);
}

.fakten__item:first-child {
  border-left: 0;
}

.fakten__zahl {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--zahl-groesse);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.fakten__zahl sup {
  font-size: 0.5em;
  color: var(--accent);
  top: -0.7em;
}

.fakten__label {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: var(--lh-ui);
  color: var(--ink-faint);
}

@media (max-width: 48rem) {
  .fakten__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fakten__item {
    border-top: 1px solid var(--line);
  }

  .fakten__item:nth-child(-n+2) {
    border-top: 0;
  }

  .fakten__item:nth-child(odd) {
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   10. Servicesäulen: vier Karten, Linien-Icons zeichnen sich beim
   Reinscrollen. Nummerierung als Präzisions-Detail.
   -------------------------------------------------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  --card-pad: clamp(1.5rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: var(--card-pad);
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s ease;
}

.service-card:hover {
  background: var(--bg-soft);
}

a.service-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Bildkopf: randlos bis an die Kartenkante (zieht das Karten-Padding
   zurück), darunter folgt die Ablauf-Schiene. */
.service-card__media {
  display: block;
  position: relative;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0.35rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* Ablauf-Schiene: eine durchgehende Linie durch alle vier Karten
   (läuft über die negativen Ränder durch die 1px-Fugen des Rasters),
   darauf die Nummern als dunkle Katalog-Marken - der echte Prozess
   Beratung -> Service als sichtbare Konstruktionslinie. Immer lesbar,
   egal wie hell das Bild darüber ist. */
.service-card__schiene {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.2rem;
  margin-top: 0.2rem;
}

.service-card__schiene::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--card-pad) - 1px);
  right: calc(-1 * var(--card-pad) - 1px);
  top: 50%;
  height: 1px;
  background: var(--line-strong);
}

.service-card__schiene-num {
  position: relative;
  z-index: 1;
  padding: 0.3rem 0.55rem;
  background: var(--dark);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: var(--lh-ui);
}

.service-card--foto h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 1.15rem 0 0.55rem;
  transition: color 0.2s ease;
}

.service-card:hover h3,
a.service-card:focus-visible h3 {
  color: var(--accent-button);
}

.service-card__pfeil {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent);
  transition: transform 0.25s var(--ease-out);
}

.service-card:hover .service-card__pfeil {
  transform: translateX(4px);
}

/* Doppelklasse noetig: ".service-card p" (Z. ~1833, margin 0) hat
   gleiche Spezifitaet und steht spaeter - die alte 1.1rem-Regel war
   dadurch seit jeher wirkungslos, der echte Abstand 0px. */
.service-card.service-card--foto p {
  margin: 0 0 var(--space-3);
}

/* Ruhige Unterkante trotz ungleicher Textlängen: die Mehr-Zeile
   dockt am Kartenende an und steht mit --space-3 Luft als eigener
   Abschluss der Karte (14.08.). */
.service-card__mehr {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

.service-card:hover .service-card__mehr,
a.service-card:focus-visible .service-card__mehr {
  color: var(--accent-button);
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.service-card:hover .service-card__media img {
  transform: scale(1.03);
}

.service-card__num {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.service-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1.3rem;
  stroke: var(--ink);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card__icon * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out), stroke 0.25s ease;
  transition-delay: calc(var(--stagger, 0) * 90ms + 150ms);
}

.reveal.is-in .service-card__icon *,
html.no-js .service-card__icon * {
  stroke-dashoffset: 0;
}

.service-card:hover .service-card__icon * {
  stroke: var(--accent);
}

.service-card h3 {
  margin-bottom: 0.6rem;
}

.service-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 60rem) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. Referenzen-Grid (Herzstück): grosse bildstarke Kacheln,
   asymmetrisches Raster. Bilder ziehen beim Hover ruhig auf.
   -------------------------------------------------------------------------- */
.referenz-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}

/* Galerie-Stil: Bild mit Bildunterschrift, kein Karten-Chrome. */
.referenz-card {
  position: relative;
  display: block;
  grid-column: span 2;
}

.referenz-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Komponierte Ausstellungswand (Startseite), selbstheilend: EINE
   Hero-Referenz (span 4, 16:9), daneben und darunter kleine (span 2,
   4:3) und mittlere Exponate (span 3, 3:2). Die nth-child-Mengenlogik
   befördert Waisen-Karten, sodass JEDE Anzahl in vollen Zeilen endet -
   die Anzahl ist im Customizer einstellbar (Standard 7):
   4 -> [4+2][3+3] · 5 -> [4+2][2+2+2] · 6 -> [4+2][3+3][3+3] ·
   7 -> [4+2][2+2+2][3+3] · 8 -> [4+2][2+2+2][2+2+2] ·
   Einzel-Waise (9, 12, ...) -> Panorama in voller Breite. */
@media (min-width: 56.0625rem) {
  .referenz-grid--home .referenz-card {
    display: flex;
    flex-direction: column;
  }

  .referenz-grid--home .referenz-card .referenz-card__body {
    flex: none;
  }

  .referenz-grid--home .referenz-card:first-child {
    grid-column: span 4;
  }

  .referenz-grid--home .referenz-card:first-child .referenz-card__media {
    aspect-ratio: 16 / 9;
  }

  /* Die Partner-Kachel neben dem Hero füllt dessen Zeilenhöhe aus,
     statt eine Leerfläche unter ihrer Bildunterschrift zu lassen. */
  .referenz-grid--home .referenz-card:nth-child(2) .referenz-card__media {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  /* Selbstheilung A - Waisen-PAAR (letzte Karte auf 3n+1, z.B. bei
     4 oder 7): die letzten beiden werden Mittel-Exponate. */
  .referenz-grid--home .referenz-card:nth-last-child(2):nth-child(3n),
  .referenz-grid--home .referenz-card:last-child:nth-child(3n+1) {
    grid-column: span 3;
  }

  .referenz-grid--home .referenz-card:nth-last-child(2):nth-child(3n) .referenz-card__media,
  .referenz-grid--home .referenz-card:last-child:nth-child(3n+1) .referenz-card__media {
    aspect-ratio: 3 / 2;
  }

  /* Selbstheilung B - Einzel-Waise (9, 12, ...): Panorama. */
  .referenz-grid--home .referenz-card:last-child:nth-child(3n) {
    grid-column: span 6;
  }

  .referenz-grid--home .referenz-card:last-child:nth-child(3n) .referenz-card__media {
    aspect-ratio: 21 / 9;
  }

  /* Selbstheilung C - genau 6 Einträge: Karten 3-6 werden zum ruhigen
     2x2-Block aus Mittel-Exponaten (gewinnt per Spezifität gegen B). */
  .referenz-grid--home .referenz-card:first-child:nth-last-child(6) ~ .referenz-card:nth-child(n+3) {
    grid-column: span 3;
  }

  .referenz-grid--home .referenz-card:first-child:nth-last-child(6) ~ .referenz-card:nth-child(n+3) .referenz-card__media {
    aspect-ratio: 3 / 2;
  }

  /* Sonderfall: eine einzige Referenz -> volle Breite. */
  .referenz-grid--home .referenz-card:only-child {
    grid-column: span 6;
  }
}

/* Referenz-Bilder dauerhaft in voller Farbe (14.08., Touch kennt
   kein Hover); Hover behält den Zoom. Flach, kein Schatten (28.08.). */
.referenz-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.referenz-card:hover .referenz-card__media img {
  transform: scale(1.03);
}

/* Katalog-Nummer als gedrucktes Etikett auf dem Exponat (Archiv-Karten,
   Fig. NN aus dem Loop-Index). Rein dekorativ (aria-hidden). */
.referenz-card__fig {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  padding: 0.3rem 0.55rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}

/* Karten-Fallback ohne Bild: typografische Kachel. */
.referenz-card__noimg {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
  background:
    linear-gradient(135deg, var(--bg-soft) 0%, #e7e9e8 100%);
}

.referenz-card__noimg span {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: var(--lh-ui);
  color: var(--ink-faint);
}

/* Bildunterschrift als linksbündige Spalte: Titel oben, Kategorie-Label
   IMMER exakt darunter - die Beziehung ist auf jeder Karte identisch,
   egal wie lang der Titel ist. */
.referenz-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.8rem 0.1rem 0;
}

/* Titelzeile robust gegen Zweizeiler (Testfall «Heilpädagogisches
   Zentrum Protekta, Schaan»): IMMER zwei Zeilen reserviert und per
   line-clamp auf zwei gedeckelt - Umbrüche verschieben das Raster
   nicht, alle Bildunterschriften einer Zeile fluchten. */
.referenz-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-heading);
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Titel-Hover in Tinte statt Blau: kollidiert nicht mit den dauerhaft
   blauen Kategorie-Labels, funktioniert über geklammerte Zweizeiler
   und verschiebt nichts. */
.referenz-card:hover .referenz-card__title,
.referenz-card:focus-visible .referenz-card__title {
  text-decoration-color: var(--ink);
}

/* Kategorie-Label als das eine Cyan-Detail der Karte (AA-fest:
   --accent-text 4.9:1 auf --bg-soft). */
.referenz-card__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

.referenz-card__meta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55em;
  vertical-align: 1px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat;
}

@media (max-width: 56rem) {
  .referenz-grid {
    grid-template-columns: 1fr 1fr;
  }

  .referenz-card,
  .referenz-grid--home .referenz-card:first-child {
    grid-column: span 2;
  }

  .referenz-grid--home .referenz-card:first-child .referenz-card__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 36rem) and (max-width: 56rem) {
  .referenz-card {
    grid-column: span 1 !important;
  }

  /* Startseiten-Wand im 2-Spalter: Hero volle Breite im 16:9, der Rest
     paarweise. Selbstheilung: steht die letzte Karte allein (gerade
     Position), nimmt sie die volle Breite ein - nie eine halbleere
     Schlusszeile. */
  .referenz-grid--home .referenz-card:first-child,
  .referenz-grid--home .referenz-card:last-child:nth-child(even) {
    grid-column: span 2 !important;
  }

  .referenz-grid--home .referenz-card:first-child .referenz-card__media,
  .referenz-grid--home .referenz-card:last-child:nth-child(even) .referenz-card__media {
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   12. Produktkategorien: Split-Ansicht. Links der Index (kompakter Kopf +
   Liste mit Produktanzahl), rechts eine Bild-Bühne, die die aktive
   Kategorie zeigt - ein Bild, das wechselt, statt zehn Kacheln.
   Zeilenwechsel nur über Farbe (kein Layoutsprung); Cyan bleibt der
   Metazeile vorbehalten. CTA-Ziel ist die Ganzjahres-Ausstellung.
   -------------------------------------------------------------------------- */
.produkt-split {
  display: grid;
  grid-template-columns: 45fr 55fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro buehne"
    "index buehne";
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: stretch;
}

.produkt-split__intro {
  grid-area: intro;
  min-width: 0;
}

/* Kompakter Titel (Rezept der Ausstellungs-Zeile darunter): die
   Monumental-Typo gehört in dieser Sektion den Kategorienamen. */
.produkt-split__titel {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}

.produkt-split__text {
  margin: 0; /* Typo: .mgc-lead */
  max-width: var(--lead-measure);
}

.produkt-split__index {
  grid-area: index;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.produkt-split__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Inaktive Zeilen gedimmt, aber AA-fest (--ink-faint: 4.9:1 auf --bg);
   aktiv/hover/fokus nur über Farbe - nichts springt. */
.produkt-split__zeile {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

.produkt-split__zeile:hover,
.produkt-split__zeile:focus-visible,
.produkt-split__zeile.ist-aktiv {
  color: var(--ink);
}

.produkt-split__name {
  flex: 1 1 auto;
  min-width: 0;
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
}

.produkt-split__zahl {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.produkt-split__alle {
  margin-top: auto;
  padding-top: var(--space-2);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.produkt-split__alle:hover {
  color: var(--accent-text);
}

.produkt-split__alle:hover .button__arrow {
  transform: translateX(4px);
}

/* Die Bühne: gesamte Fläche verlinkt auf die aktive Kategorie. Alle
   Bilder liegen gestapelt im Markup, gewechselt wird nur Sichtbarkeit
   (kein Netz-Roundtrip beim Hover; lazy lädt beim Herannahen). */
.produkt-split__buehne {
  grid-area: buehne;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* aspect-ratio reserviert die Fläche (CLS 0); wächst die Liste, streckt
   flex die Bühne einfach mit - nie ein leeres Loch. */
.produkt-split__rahmen {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-soft);
}

.produkt-split__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Sanfter Crossfade beim Kategoriewechsel (2026-08-11). */
  transition: opacity 0.45s ease, transform 0.8s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .produkt-split__bild {
    transition: none;
  }
}

.produkt-split__bild.ist-aktiv {
  opacity: 1;
}

.produkt-split__buehne:hover .produkt-split__bild.ist-aktiv {
  transform: scale(1.03);
}

.produkt-split__bild--platzhalter {
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #e7e9e8 100%);
}

.produkt-split__bild--platzhalter span {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: var(--lh-ui);
  color: var(--ink-faint);
}

.produkt-split__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* Freiraum rechts, damit die nowrap-Metazeile nicht unter den
     fixierten Scroll-nach-oben-Pfeil geraet (2026-08-11). */
  padding-right: 4rem;
}

.produkt-split__caption-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Metazeile im Mono-HUD-Stil (Rezept der Referenzkarten): das eine
   Cyan-Detail der Sektion. */
.produkt-split__caption-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

/* Mobil: Bühne über der Liste, nur das aktive Bild liegt im Layout -
   die übrigen bleiben display:none und damit ungeladen (lazy). */
@media (max-width: 60rem) {
  .produkt-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "intro"
      "buehne"
      "index";
  }

  .produkt-split__rahmen {
    flex: none;
  }

  .produkt-split__bild:not(.ist-aktiv) {
    display: none;
  }

  /* Lange Namen + Nowrap-Meta: die Metazeile bricht als Ganzes in die
     zweite Zeile, statt am Viewport-Rand abgeschnitten zu werden. */
  .produkt-split__caption {
    flex-wrap: wrap;
  }
}

/* Ausstellungs-Schau: die Ganzjahres-Ausstellung gross gezeigt (ersetzt
   die frühere Mini-Collage). Vollbreite Galerie mit Lightbox, in Farbe -
   hier wird man empfangen. Kein Bild über nativer Grösse: die 1600px-
   Aufnahmen tragen Gross- und Normalzellen, die 800px-Aufnahmen stehen
   in kleiner bzw. der breiten Schlusszelle. */
.ausstellung-schau {
  margin: var(--space-4) 0 var(--space-5);
}

.ausstellung-schau__hud {
  margin-bottom: 0.9rem;
}

.ausstellung-schau__galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
}

.ausstellung-schau__bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* 28.08. (Auftrag Max): kein Drop-Shadow mehr, die Site ist flach
     (Hairlines, Eckwinkel); Abgrenzung nur noch ueber die 1px-Hairline,
     die Labels tragen die Struktur. Theme-eigene Regel, kein Plugin. */
  border: 1px solid var(--line);
}

.ausstellung-schau__bild picture {
  display: contents;
}

.ausstellung-schau__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.ausstellung-schau__bild:hover img {
  transform: scale(1.03);
}

.ausstellung-schau__bild--gross {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.ausstellung-schau__bild--breit {
  grid-column: span 2;
  /* Doppelte Breite bei gleicher Reihenhöhe wie die 4:3-Zellen. */
  aspect-ratio: 8 / 3;
}

/* Gefasste CTA-Buehne (14.08.): Panel im Kartenstil der Produktkarten
   (1px-Linie, heller Grund minimal abgesetzt), links Kicker/Titel/
   Infozeile, rechts der Button vertikal mittig. */
.ausstellung-schau__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  padding: var(--space-4);
}

.ausstellung-schau__zeile > div {
  flex: 1 1 26rem;
  max-width: var(--measure);
}


.ausstellung-schau__titel {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

/* Infozeile: Segmente als inline-block brechen an den Trennpunkten,
   nie mitten im Satz. */
.ausstellung-schau__info {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.ausstellung-schau__info-teil {
  display: inline-block;
}

/* Voranmeldung-Hinweis (Nachtrag 24): dezent unter der Infozeile, der
   Link nimmt den Akzent nur beim Hover an. */
.ausstellung-schau__anmeldung {
  margin: 0.5rem 0 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

.ausstellung-schau__anmeldung a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ausstellung-schau__anmeldung a:hover,
.ausstellung-schau__anmeldung a:focus-visible {
  color: var(--accent);
}

.ausstellung-schau__trenner {
  color: var(--ink-faint);
  padding: 0 0.2em;
}

/* Mobile: horizontal wischbare Reihe (scroll-snap) statt acht gestapelter
   Bilder - hält die Sektion kompakt, lazy lädt nur Sichtbares. */
@media (max-width: 56rem) {
  .ausstellung-schau__galerie {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0.6rem;
    padding-bottom: 0.4rem;
  }

  .ausstellung-schau__bild,
  .ausstellung-schau__bild--gross,
  .ausstellung-schau__bild--breit {
    flex: 0 0 min(78vw, 22rem);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  /* CTA-Panel gestapelt: Kicker, Titel, Infozeile, Button volle Breite. */
  .ausstellung-schau__zeile {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /* Die 26rem-Flexbasis der Textspalte wirkt im Column-Modus als
     HOEHE (Hauptachse gedreht) und riss ein Leereloch vor dem
     Button - gestapelt zaehlt nur die natuerliche Hoehe. */
  .ausstellung-schau__zeile > div {
    flex: 0 0 auto;
  }

  .ausstellung-schau__zeile .button {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   13. Über-uns-Teaser: asymmetrisch. Links das Menschen-Panel
   «Ihr direkter Draht» (IN FARBE, nie Duotone - das Herz neben dem
   kühlen Stahl), rechts die Familiengeschichte mit der 1990-Marke.
   -------------------------------------------------------------------------- */
.ueber-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  /* 28.08. (Auftrag Max): Standard-Gap statt clamp bis 5rem (80px), beide
     Spalten oben buendig; die Textspalte bekommt das Panel-Padding als
     Oberrand, damit die Kicker «Ihr direkter Draht» und «Über uns ...»
     auf derselben Hoehe beginnen. */
  gap: var(--space-4);
  align-items: start;
}

.ueber-teaser__text {
  padding-top: calc(clamp(1.5rem, 3vw, 2.4rem) + 1px);
}

.ueber-teaser__media {
  position: relative;
  z-index: 1;
}

/* Helles Panel wie ein Katalog-Datenblatt: weisse Fläche auf dem
   kühlen Hellgrau der Sektion, harte Kanten, eine Cyan-Grundlinie. */
.draht-panel {
  max-width: 30rem;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.draht-panel__titel {
  margin: 0 0 1.4rem;
}

/* Team-Foto (2026-08-14: neue Adobe-Freistellung ohne Saum, dieselbe
   Datei wie /ueber-uns/): steht auf der Cyan-Grundlinie, sie ist
   Standfläche. Nie über der nativen Quellbreite (490px) anzeigen,
   nur verkleinern - Hochskalieren macht die Freistellung matschig. */
.draht-panel__foto {
  display: block;
  margin: 0 calc(-1 * clamp(1.5rem, 3vw, 2.4rem));
  border-bottom: 2px solid var(--accent);
}

.draht-panel__foto img {
  width: min(100%, 490px);
  height: auto;
  display: block;
  margin-inline: auto;
  filter: none; /* Menschen NIE im Duotone. */
}

.draht-panel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.draht-panel__person {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}

.draht-panel__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: var(--lh-heading);
}

.draht-panel__rolle {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: var(--lh-ui);
}

.draht-panel__mail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;
}

.draht-panel__mail:hover {
  color: var(--accent-hover);
}

/* Telefon als direkter Draht: klickbar, präzise, ohne Knopf-Pomp. */
.draht-panel__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.15rem;
  font-family: var(--font-display);
  font-stretch: 110%;
  font-size: 1.25rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color 0.2s ease;
}

.draht-panel__tel svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  stroke: var(--accent);
}

.draht-panel__tel:hover {
  color: var(--accent-hover);
}

/* Gründungsjahr als riesige Outline-Marke hinter dem Text. */
.ueber-teaser__grid {
  position: relative;
}

.ueber-teaser__1990 {
  position: absolute;
  right: 0; /* 28.08.: nicht ueber das Content-Raster hinaus */
  top: -0.35em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 13rem);
  font-weight: 650;
  line-height: var(--lh-heading);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(19, 20, 22, 0.12);
  pointer-events: none;
  user-select: none;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .ueber-teaser__1990 { color: rgba(19, 20, 22, 0.05); }
}

@media (max-width: 56rem) {
  .ueber-teaser__grid {
    grid-template-columns: 1fr;
  }

  /* Mobil zuerst die Geschichte, dann der direkte Draht - das Panel
     schliesst die Sektion als Handschlag ab. */
  .ueber-teaser__media {
    order: 1;
  }

  .draht-panel {
    max-width: none;
  }

  .ueber-teaser__text {
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   14. Abschluss-CTA: die dunkle Zone beginnt wieder. Monumental, ruhig,
   mit Cyan-Horizont als Auftakt und Kapitelziffer 05.
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  overflow: clip;
  background: var(--dark);
  color: var(--dark-ink);
  /* 28.08. (Max): kompakt - Sektion passt auf Desktop in ca. 60vh. */
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

/* Inhalt (Titel, Text, Buttons) als Gruppe links, Peperoni-Reihe mit Caption
   rechts, vertikal mittig zur Gruppe. Mobil gestapelt, Peperoni klein. */
.cta-banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
}

.cta-banner__inhalt {
  min-width: 0;
}

.cta-banner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
}

.cta-banner .wrap {
  position: relative;
}

.cta-banner__title {
  color: #fff;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 22ch;
  margin-bottom: var(--space-2);
  position: relative;
}

.cta-banner__text {
  color: var(--dark-ink-soft);
  font-size: 1.1rem;
  max-width: 38rem;
  margin-bottom: var(--space-3);
}

.cta-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* --------------------------------------------------------------------------
   15. Footer: Fortsetzung der dunklen Zone, präzise Spalten.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--dark);
  color: var(--dark-ink-soft);
  border-top: 1px solid var(--dark-line);
  font-size: 0.95rem;
  overflow: clip;
}

/* Kompakter Footer: nur noch Info-Grid und Rechtliches-Zeile. */
.site-footer__hours {
  margin: 0.5rem 0 0.4rem;
  font-size: 0.88rem;
}

.site-footer a {
  color: var(--dark-ink);
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer__grid {
  /* Gemeinsamer Kopf-Abstand der Titelzeilen in Spalte 2-4 (2026-08-11). */
  --footer-kopf: 1.3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.8rem, 4vw, 2.75rem) 0;
}

.site-footer .site-footer__titel {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.site-footer__direkt {
  margin-top: 0.8rem;
}

.site-footer address {
  font-style: normal;
  line-height: var(--lh-ui);
}

/* Vier gleichwertige Spalten (nur Desktop - darunter greifen die
   2-Spalten-/1-Spalten-Regeln weiter unten): Spalte 1 minimal breiter
   wegen der Logo-Laufweite, Spalte 4 (Notfall) leicht betont. */
@media (min-width: 60.0625rem) {
  .site-footer__grid--v2 {
    grid-template-columns: 1.35fr 1.05fr 1fr 1.15fr;
    align-items: stretch;
  }
}

/* Jede Spalte als Flex-Säule: die gefassten Blöcke strecken sich auf
   Zeilenhöhe, ihr letztes Element dockt unten an - keine Spalte endet
   angeschnitten oder leer. */
.site-footer__grid--v2 > div {
  display: flex;
  flex-direction: column;
}

.site-footer__grid--v2 address {
  margin: 0;
}

/* Öffnungszeiten (Spalte 2) als dezente Fläche: die «ruhige
   Schwester» des Notfall-Rahmens - Surface + Haarlinie statt
   Passermarken. Der Passermarken-Rahmen bleibt exklusiv beim
   Notfall-Block (USP Nr. 1, ein Rahmen = ein Fokus). */
.footer-zeiten {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: var(--footer-kopf, 1.3rem) 1.4rem 1.3rem;
}

.footer-zeiten .site-footer__titel {
  margin-bottom: 0.85rem;
}

/* Live-Status = stärkstes Element der Spalte: grösser, weiss, satter
   grüner Punkt mit feinem Schein (Dunkelzone). Kein Puls - im Footer
   pulsiert nur der Notfall-Punkt. */
.footer-zeiten .mgc-hours__status {
  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;
  margin: 0 0 0.55rem;
  /* Punkt-Titel-Gespann wie in der Notfall-Karte: haengender Einzug,
     Umbruchzeilen teilen eine Textkante, Punkt ankert an Zeile 1. */
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-zeiten .mgc-hours__status .mgc-hours__dot {
  flex: none;
  margin-top: 0.32em;
}

.footer-zeiten .mgc-hours__status.is-open .mgc-hours__dot {
  width: 9px;
  height: 9px;
  background: #2ec46c;
}

.footer-zeiten .site-footer__hours {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  color: var(--dark-ink);
}

.footer-zeiten__link {
  margin: auto 0 0;
  font-size: 0.85rem;
}

/* Google-Bewertungen (Spalte 3): «Geprüft wie unsere Anlagen» - die
   5.0 als Messwert nach der Abnahme (HUD-Mono-Label, tabellarische
   Ziffer), Sterne in Chromstahl-Weiss statt Gold; Cyan erscheint nur
   im Hover. Anzahl der Bewertungen bewusst nicht ausgeschrieben. */
.footer-rating {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Titelzeile buendig mit den Karten-Spalten: derselbe Kopf-Abstand
     wie footer-zeiten/footer-notfall plus deren Border-Staerke als
     unsichtbare Oberkante - gleiche Boxstruktur, keine Magic Numbers
     (2026-08-11). */
  border-top: 1px solid transparent;
  padding-top: var(--footer-kopf, 1.3rem);
}

.footer-rating__mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-ink-soft);
  margin-bottom: 0.55rem;
}

.footer-rating__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  text-decoration: none;
}

.footer-rating__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: var(--lh-heading);
  transition: color 0.2s ease;
}

.footer-rating__stars {
  display: inline-flex;
  gap: 0.18rem;
  color: #f4f5f4;
  transition: color 0.2s ease;
  transform: translateY(1px); /* optische Grundlinie zur grossen Ziffer */
}

.footer-rating__stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
}

.footer-rating__link:hover .footer-rating__num,
.footer-rating__link:hover .footer-rating__stars {
  color: var(--accent-bright);
}

.footer-rating__text {
  margin: 0.8rem 0 0.9rem;
  font-size: 0.88rem;
  max-width: 17rem;
}

.footer-rating__mehr {
  margin: auto 0 0;
  font-size: 0.85rem;
}

/* Notfall-Block (Spalte 4) unverändert - nur auf Zeilenhöhe strecken
   und den Hinweis unten andocken, für die bündige Unterkante. */
.site-footer__grid--v2 .footer-notfall {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.site-footer__grid--v2 .footer-notfall p {
  margin-top: auto;
  padding-top: 0.5rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.5rem;
}

/* Notfall-Block im Footer: das stärkste Element des Leitstands.
   Präziser Cyan-Rahmen mit Plan-Ecken (Passermarken), kein Leuchten. */
.footer-notfall {
  position: relative;
  border: 1.5px solid var(--accent);
  padding: var(--footer-kopf, 1.3rem) 1.4rem 1.3rem;
}

.footer-notfall::before,
.footer-notfall::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
}

.footer-notfall::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
  border-color: #fff;
}

.footer-notfall::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
  border-color: #fff;
}

.footer-notfall__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.footer-notfall__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: mgc-pulse 2.6s ease-in-out infinite;
}

.footer-notfall__tel {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.45vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer-notfall p {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

/* Notfall-Karte Premium (2026-08-11, Entscheid: Variante A verbindlich):
   Die Nummer dominiert, ein helles blaues Segment wandert ruhig auf dem
   bestehenden Rahmen einmal in ~7 s um die Karte. */
@property --mgc-ringwinkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.footer-notfall__ring {
  position: absolute;
  inset: -1.5px;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--mgc-ringwinkel),
    transparent 0turn 0.78turn, var(--accent-bright) 0.88turn, transparent 0.96turn);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: mgc-ring-umlauf 7s linear infinite;
}

@keyframes mgc-ring-umlauf {
  to { --mgc-ringwinkel: 360deg; }
}

/* Hierarchie und 8er-Raster: Punkt an der ersten Label-Zeile
   verankert, Nummer als groesste Type der Karte, Loch vor dem
   Wochenend-Text geschlossen. */
.footer-notfall__label {
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.footer-notfall__label::before {
  flex: none;
  margin-top: 0.24em;
}

.footer-notfall__tel {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  transition: color 0.2s ease;
}

.footer-notfall__tel:hover,
.footer-notfall__tel:focus-visible {
  color: var(--accent-bright);
}

.site-footer__grid--v2 .footer-notfall p {
  margin-top: 1rem;
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-notfall__ring {
    display: none;
  }

  .footer-notfall__label::before {
    animation: none;
  }
}

/* Heller Kontext (Kontaktseite): gedruckte Feinliner-Marke statt
   Leitstand-Leuchten. Passermarken-Ecken in Fast-Schwarz, Nummer in
   Tinte, kein Glow. */
.footer-notfall--hell {
  margin-top: 1.3rem;
}

.footer-notfall--hell::before,
.footer-notfall--hell::after {
  border-color: var(--ink);
}

.footer-notfall--hell .footer-notfall__label {
  color: var(--accent-text);
}

.footer-notfall--hell .footer-notfall__tel {
  color: var(--ink);
}

.footer-notfall--hell p {
  color: var(--ink-soft);
}

/* In der hellen Zone leuchtet nichts: Puls ja, Glow nein. */
.footer-notfall--hell .notfall-bar__dot,
.kontakt-info .mgc-hours__dot,
.entry-content .mgc-hours__dot {
  box-shadow: none;
}

/* Mitgliedschaften/Badges (Nachtrag 23): dezente Zeile ueber dem
   Footer-Abschluss. Heller Chip, weil der Footer dunkel ist; das Logo
   ruht entsaettigt und leicht gedaempft, bei Hover volle Farbe. */
.site-footer__badges {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.2rem 0 0;
}

.site-footer__badges-label {
  font-family: var(--font-display, inherit);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-ink-faint, var(--dark-ink-soft));
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
}

.footer-badge img {
  display: block;
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter 0.3s var(--ease-out, ease), opacity 0.3s var(--ease-out, ease);
}

.footer-badge:hover img,
.footer-badge:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .footer-badge img {
    transition: none;
  }
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.3rem 0;
  border-top: 1px solid var(--dark-line);
  font-size: 0.85rem;
}

.site-footer__bottom .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.site-footer__bottom li {
  margin: 0;
}

.site-footer__bottom a {
  color: var(--dark-ink-soft);
}

/* Credit-Link: Hover in derselben Akzentfarbe wie die
   Rechtsmenü-Links (.site-footer a:hover), Unterstrich bleibt. */
.site-footer__bottom > span a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Footer-Neuaufbau 27.08.2026 (SMD-Vorbild, Shane): vier Spalten am
   Desktop (Kontakt | News + Projekte | Partner + Social | Bewertungen),
   darunter die Rechtszeile (Footer-Nav entfernt, Shane 27.08.). Unter 60rem
   greifen die bestehenden 2-/1-Spalten-Regeln von .site-footer__grid. */
@media (min-width: 60.0625rem) {
  .site-footer__grid--v3 {
    grid-template-columns: 1.35fr 1.2fr 0.95fr 1.05fr;
    align-items: start;
  }
}

.site-footer__grid--v3 > .site-footer__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-footer__grid--v3 address {
  margin: 0;
}

/* Kontakt: T:/E: als ruhige Zweizeiler-Liste, Kuerzel in Ink-Faint. */
.site-footer__grid--v3 .site-footer__direkt {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.8rem 0 0;
}

.site-footer__direkt-k {
  display: inline-block;
  min-width: 1.4em;
  color: var(--dark-ink-faint, var(--dark-ink-soft));
}

/* Kontaktdetails (Auftrag Max 28.08.): Adresszeilen in Weiss wie Telefon
   und E-Mail, damit der Block EINE Ebene hat; nur die Kuerzel T:/E:
   bleiben gedaempft. Gezielt auf den Footer-Kontaktblock, keine Variable. */
.site-footer__grid--v3 .site-footer__kontakt address,
.site-footer__grid--v3 .site-footer__kontakt .site-footer__direkt a {
  color: var(--dark-ink);
}

/* Nachtrag Max 28.08.: die Kuerzel T:/E: in der Akzentfarbe (dasselbe
   Blau wie die Titelstriche), Nummer und Mail bleiben weiss. */
.site-footer__grid--v3 .site-footer__kontakt .site-footer__direkt-k {
  color: var(--accent);
}

/* Oeffnungszeiten-Karte in Spalte 1 (Shane 27.08., Neusatz): dichte Karte
   in HUD-Sprache (Hairline + Cyan-Eckwinkel wie Pikett-/Partner-Kacheln,
   keine Rundung), Status als Inline-Badge, kompakte Zeilen mit Label und
   Zeit nah beieinander, Sa-So-Pikett samt Nummer als eine Einheit. */
/* 28.08. (Auftrag Max): Titel, Akzentstrich und Status-Badge stehen
   UEBER der Box; die Box (Hairline, Grund, Cyan-Eckwinkel) beginnt erst
   bei der Zeile Mo-Fr, also an der Liste. Der Container selbst ist nur
   noch das unsichtbare Raster. Alle Regeln bleiben auf
   .footer-zeiten--tabelle gescoped (Kontaktseite unberuehrt). */
.footer-zeiten--tabelle {
  flex: 0 0 auto;
  margin-top: 1.3rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Kopfzeile (Shane 27.08.): Titel links, Status-Badge rechts auf einer
   Linie. Die Karte wird zum Raster, .mgc-hours gibt seine Kinder per
   display:contents frei (Status -> Kopfzeile rechts, Liste -> Zeile 2). */
.footer-zeiten--tabelle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
}

.footer-zeiten--tabelle .site-footer__titel {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.footer-zeiten--tabelle .mgc-hours {
  display: contents;
}

/* Feinschliff 28.08. (Auftrag Max): EIN Rhythmuswert (--fz-rhythmus) fuer
   Boxkante->Zeile 1, Zeile 1->Linie, Linie->Zeile 2, Zeile 2->Boxkante;
   die Zeilen tragen den vertikalen Abstand, die Box nur den seitlichen.
   Spaltentrenner: 1px-Vertikale in Linienfarbe zwischen Label- und
   Wertspalte (bei 1.1rem + 3.4rem + halber Spaltenabstand), ueber die
   Inhaltshoehe (Rhythmuswert oben und unten ausgespart). */
.footer-zeiten--tabelle .mgc-hours__list {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Kopfzeile: das Badge sitzt rechts auf der Titelzeile (nur Platzierung,
   das Aussehen der Box und des Badges kommt aus der gemeinsamen
   Komponente .mgc-hours--karte, siehe Abschnitt Oeffnungszeiten). */
.footer-zeiten--tabelle .mgc-hours__status {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* Wird die Karte selbst zu schmal (Innenbreite unter 22.5rem = Titel +
   Badge passen nicht mehr nebeneinander, z.B. 4-Spalten-Raster
   knapp ueber 60rem Viewport), rutscht das Badge buendig unter den Titel;
   Container-Query auf der Karte, damit es von der Spaltenbreite abhaengt,
   nicht vom Viewport. */
.footer-zeiten--tabelle {
  container-type: inline-size;
}

@container (max-width: 22.5rem) {
  .footer-zeiten--tabelle {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-zeiten--tabelle .mgc-hours__status {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 0.8rem; /* 28.08. (Max): Titel->Badge = Badge->Box (0.8rem) */
  }

  .footer-zeiten--tabelle .mgc-hours__list {
    grid-row: 3;
  }
}

/* Fallback ohne Container-Queries: unter 30rem Viewport dasselbe. */
@media (max-width: 30rem) {
  .footer-zeiten--tabelle {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-zeiten--tabelle .mgc-hours__status {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 0.8rem; /* 28.08. (Max): Titel->Badge = Badge->Box (0.8rem) */
  }

  .footer-zeiten--tabelle .mgc-hours__list {
    grid-row: 3;
  }
}

/* Pikett-Nummer als Teil der Sa-So-Zelle: direkt unter dem Wortlaut,
   gleiche Kante, keine Solo-Zeile. */
.mgc-hours__tel {
  display: block;
  margin-top: 0.1rem;
  font-weight: 650;
  color: #fff;
  white-space: nowrap;
}

.site-footer__titel--abstand {
  margin-top: 1.6rem;
}

/* Letzte News / Letzte Projekte: Miniatur + Titel, wie im SMD-Footer. */
.footer-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.site-footer .footer-feed li {
  margin: 0;
}

.footer-feed__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.footer-feed__thumb {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-feed__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-feed__title {
  font-size: 0.9rem;
  line-height: var(--lh-ui);
}

.footer-feed__mehr {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
}

.site-footer__note {
  font-size: 0.88rem;
  margin: 0;
}


/* Social-Kanaele (Shane 27.08., Neubau): gefuellte Akzent-Pills mit
   Markenglyphe + Beschriftung im Stil der Site-Buttons; Glyphen aus
   FA-Brands (eigene viewBox je Marke, gleiche optische Hoehe). */
.site-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.site-footer .site-footer__socials li {
  margin: 0;
}

.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.05rem 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--accent-button);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.22s var(--ease-out);
}

.site-footer__socials a svg {
  height: 18px;
  width: auto;
  display: block;
  flex: none;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
  background: var(--accent-button-hover);
  color: #fff;
}

/* Footer-Titel mit Akzentstrich davor (Sammelblock 27.08., Shane): Mass
   und Abstand wie die Hero-Akzentzeile «Alles aus einer Hand» (2.6rem,
   2px, Cyan, Glow), Titel bleiben weiss. Gilt fuer alle Footer-Titel
   inkl. Pikett-Label. */
.site-footer .site-footer__titel,
.site-footer .footer-notfall__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.site-footer .site-footer__titel::before,
.site-footer .footer-notfall__label::before {
  content: "";
  flex: none;
  width: 2.6rem;
  height: 2px;
  border-radius: 0; /* Pikett-Label: ersetzt den runden Puls-Punkt */
  background: var(--accent);
  animation: none;
}

/* Bewertungen als Karte (Shane 27.08.): dunkler Kartengrund, Hairline +
   HUD-Eckwinkel wie die Partner-Kacheln; Google-G, grosse Bewertung mit
   Sternen, Satz mit Textlink, Umriss-Pill zum Google-Profil. */
.site-footer__grid--v3 .footer-rating--karte {
  flex: 0 0 auto;
  border-top: 0;
  padding-top: 0;
}

/* Pikett-Kachel oben in Spalte 3: Abstand zum folgenden Partner-Titel. */
.site-footer__grid--v3 .footer-notfall + .footer-partner .site-footer__titel--abstand {
  margin-top: 1.5rem;
}

.footer-rating__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.85rem 1rem 0.9rem;
}

.footer-rating__karte::before,
.footer-rating__karte::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
}

.footer-rating__karte::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.footer-rating__karte::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

.footer-rating__glogo {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
}

.footer-rating__karte .footer-rating__link {
  gap: 0.55rem;
}

.footer-rating__karte .footer-rating__num {
  font-size: 1.7rem;
}

.footer-rating__karte .footer-rating__stars svg {
  width: 14px;
  height: 14px;
}

.footer-rating__karte .footer-rating__text {
  margin: 0 0 0.15rem;
  max-width: none;
  font-size: 0.85rem;
  line-height: var(--lh-ui);
  color: var(--dark-ink-soft);
}

.footer-rating__textlink {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-rating__textlink:hover {
  color: var(--accent-bright);
}

.footer-rating__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.9rem 0.42rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.footer-rating__pill img {
  width: 16px;
  height: 16px;
  display: block;
}

.footer-rating__pill:hover,
.footer-rating__pill:focus-visible {
  color: #fff;
  border-color: var(--accent);
  background: rgba(0, 157, 225, 0.12);
}

/* Pikett-Kachel in Spalte 4: natuerliche Hoehe, kein Strecken. */
.site-footer__grid--v3 .footer-notfall {
  flex: 0 0 auto;
}

/* Partner-Kacheln (Shane-Entscheid 27.08.): Spalte 3 zwischen Bewertungen und
   Folgen Sie uns, helle Kacheln mit farbigen Logos, Marxer-Leitstand-Stil -
   keine Rundung, kein Schatten, Mono-Label, HUD-Eckwinkel. */
.site-footer__grid--v3 .footer-partner {
  flex: 0 0 auto;
}

.footer-partner__kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.footer-partner__kachel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.4rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border-radius: 0;
}

.footer-partner__kachel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 3.5rem;
  transition: transform 0.3s var(--ease-out, ease);
}

.footer-partner__kachel:hover img,
.footer-partner__kachel:focus-visible img {
  transform: scale(1.03);
}

/* HUD-Eckwinkel (Passermarken) in Cyan wie die Pikett-Kachel, Kachelkante
   bleibt hart; Hover hellt die Winkel auf. (Shane-Entscheid 27.08.) */
.footer-partner__kachel::before,
.footer-partner__kachel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  transition: border-color 0.2s ease;
}

.footer-partner__kachel::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.footer-partner__kachel::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

.footer-partner__kachel:hover::before,
.footer-partner__kachel:hover::after,
.footer-partner__kachel:focus-visible::before,
.footer-partner__kachel:focus-visible::after {
  border-color: var(--accent-bright);
}

@media (prefers-reduced-motion: reduce) {
  .footer-partner__kachel img {
    transition: none;
  }
}


@media (max-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 40rem) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}

/* Öffnungszeiten-Block (Footer + Kontakt) */
.mgc-hours__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}

.mgc-hours__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-faint);
}

.mgc-hours__status.is-open .mgc-hours__dot { background: #1fa15a; }
.mgc-hours__status.is-lunch .mgc-hours__dot { background: #d9a400; }
.mgc-hours__status.is-closed .mgc-hours__dot { background: #9a9a9a; }
.mgc-hours__status.is-pikett .mgc-hours__dot { background: var(--accent); animation: mgc-pulse 2.6s ease-in-out infinite; }

.mgc-hours__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mgc-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--dark-line);
}

.mgc-hours__row.is-today {
  font-weight: 650;
  color: #fff;
}

.entry-content .mgc-hours__row {
  border-bottom-color: var(--line);
}

.entry-content .mgc-hours__row.is-today {
  color: var(--ink);
}

.mgc-hours__win {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Oeffnungszeiten als KARTE (Auftrag Max 28.08.2026, eine Komponente fuer
   Footer UND /kontakt/): [mgc_oeffnungszeiten layout="karte"] setzt
   .mgc-hours--karte. Badge, umrandete Box mit Cyan-Eckwinkeln, zwei
   Spalten (Labels links, Werte an gemeinsamer Kante), vertikaler
   Spaltentrenner, EIN Rhythmuswert, gleich hohe Zeilen mittig, beide
   Wertzeilen gleiches Gewicht. Farben ueber Tokens: Standard = dunkler
   Grund (Footer), .kontakt-info schaltet auf die helle Palette um -
   Struktur und Masse sind identisch, nur die Palette folgt dem Grund.
   -------------------------------------------------------------------------- */
.mgc-hours--karte {
  --hk-ink: var(--dark-ink);
  --hk-ink-today: #fff;
  --hk-line: rgba(255, 255, 255, 0.1);
  --hk-rand: rgba(255, 255, 255, 0.12);
  --hk-grund: rgba(255, 255, 255, 0.04);
  --hk-badge-ink: #fff;
  --hk-badge-grund: rgba(255, 255, 255, 0.06);
  --hk-badge-rand: rgba(255, 255, 255, 0.14);
}

.kontakt-info .mgc-hours--karte {
  --hk-ink: var(--ink);
  --hk-ink-today: var(--ink);
  --hk-line: var(--line);
  --hk-rand: var(--line-strong);
  --hk-grund: var(--bg-soft);
  --hk-badge-ink: var(--ink);
  --hk-badge-grund: rgba(19, 20, 22, 0.04);
  --hk-badge-rand: var(--line-strong);
}

/* Badge: Punkt und Text exakt auf einer Linie. */
.mgc-hours--karte .mgc-hours__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.28rem 0.7rem 0.28rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: var(--lh-ui);
  color: var(--hk-badge-ink);
  background: var(--hk-badge-grund);
  border: 1px solid var(--hk-badge-rand);
}

.mgc-hours--karte .mgc-hours__status .mgc-hours__dot {
  margin: 0;
  width: 8px;
  height: 8px;
}

.mgc-hours--karte .mgc-hours__status.is-open {
  border-color: rgba(46, 196, 108, 0.4);
  background: rgba(46, 196, 108, 0.1);
}

.mgc-hours--karte .mgc-hours__status.is-open .mgc-hours__dot {
  width: 9px;
  height: 9px;
  background: #2ec46c;
}

.mgc-hours--karte .mgc-hours__status.is-pikett {
  border-color: rgba(0, 157, 225, 0.45);
  background: rgba(0, 157, 225, 0.1);
}

/* Box: die Zeilen sind gleich hohe Grid-Rows, Label und Wert mittig,
   die Trennlinie liegt exakt zwischen den Zeilen; der Spaltentrenner
   sitzt bei 1.1rem + 3.4rem + halbem Spaltenabstand, oben und unten um
   den Rhythmuswert ausgespart. */
.mgc-hours--karte .mgc-hours__list {
  --fz-rhythmus: 0.7rem;
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  margin-top: 0.8rem;
  padding: 0 1.1rem;
  font-size: 0.86rem;
  background-color: var(--hk-grund);
  background-image: linear-gradient(var(--hk-line), var(--hk-line));
  background-repeat: no-repeat;
  /* 15:30 (Max): Spaltenlinie durchgehend von Box-Oberkante bis -Unterkante. */
  background-size: 1px 100%;
  background-position: 4.95rem 0;
  border: 1px solid var(--hk-rand);
}

.mgc-hours--karte .mgc-hours__list::before,
.mgc-hours--karte .mgc-hours__list::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
}

.mgc-hours--karte .mgc-hours__list::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.mgc-hours--karte .mgc-hours__list::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

.mgc-hours--karte .mgc-hours__row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 0.9rem;
  align-items: center;
  align-content: center;
  margin: 0; /* .site-footer li setzt sonst 0.5rem Abstand */
  padding: var(--fz-rhythmus) 0;
  border-bottom-color: var(--hk-line);
}

.mgc-hours--karte .mgc-hours__row:last-child {
  border-bottom: 0;
}

.mgc-hours--karte .mgc-hours__row.is-today {
  color: var(--hk-ink-today);
}

/* Beide Tageslabels gleich fett (Max 15:30), unabhaengig vom Heute-Zustand. */
.mgc-hours--karte .mgc-hours__day {
  color: var(--hk-ink);
  font-weight: 650;
}

/* Beide Wertzeilen gleichwertig: Zeiten und «Wochenend-Pikett bei
   Notfällen» in derselben Farbe und demselben Gewicht, unabhaengig vom
   Heute-Zustand; die Tageslabels behalten ihr Gewicht aus der Zeile. */
.mgc-hours--karte .mgc-hours__time {
  text-align: left;
  line-height: var(--lh-ui);
  color: var(--hk-ink);
  font-weight: 650;
}

.mgc-hours--karte .mgc-hours__win {
  white-space: normal; /* Pikett-Wortlaut darf umbrechen */
}

/* Scroll-to-top */
.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  background: var(--accent-button); /* 27.08.: kein schwarzer Sonderfall */
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out), visibility 0.25s, background 0.2s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--accent-button-hover);
}

.to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* --------------------------------------------------------------------------
   16. Unterseiten: Page-Header + Inhalts-Fluss
   -------------------------------------------------------------------------- */
.page-header {
  padding: var(--space-5) 0 var(--space-4);
}

.page-header__kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
}

.page-header__kicker::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--accent);
}

.page-header h1 {
  font-size: var(--fs-h1); /* C1.9: eine H1-Groesse (Karriere), Hero ausgenommen */
  letter-spacing: -0.04em;
  margin-bottom: 0;
  max-width: 20ch;
}

/* /karriere/ (Verdichtung Max 28.08.2026 abends; Desktop-Konsistenz Max
   31.08.2026): Kompakt-Header wie die Dienstleistungs-Unterseiten, dann
   INTRO (Warum-Absatz | CAD-Seitenansicht in Spaltenbreite, ganzes Motiv),
   «WAS UNS AUSMACHT» als Textband (Kicker + H2 | Absatz + Faktenliste,
   Teamfoto seit 31.08. entfernt), «OFFENE STELLEN» (Kicker + H2 + Status |
   Ansprechperson + Mailzeile) und das FORMULAR mit dem Werkstattbild in
   voller Formularhoehe daneben. Kicker = .page-header__kicker (dieselbe
   Komponente wie der Seitenkopf, keine eigene Variante). Leitplanke Max:
   maximale Dichte bei sauberer Lesbarkeit. Mobil (Shane: «perfekt», abgenommen)
   bleibt die Reihenfolge Status, Ansprechperson, Formular, Mailzeile; die
   Desktop-Regeln stehen ausschliesslich im min-width-Block unten.
   Flach, keine Schatten. */
.karriere {
  --karriere-breite: var(--lead-measure);
  padding: var(--space-2) 0 var(--space-4);
}

.karriere-block + .karriere-block,
.karriere-intro + .karriere-block {
  margin-top: var(--space-5);
}

.karriere-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.karriere-warum {
  margin: 0;
  max-width: 34rem;
  /* Typo: .mgc-lead (Basis, Abschnitt 16d). */
}

.karriere-bild {
  margin: 0;
  max-width: none;
}

.karriere-bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Intro-Bild (Korrektur 2 Max 28.08. abends): CAD-Seitenansicht 3:2 statt
   Werkstatt-Hochformat, fuellt ihre Spalte im natuerlichen Format
   (Breite der Spalte, Hoehe nach Seitenverhaeltnis, kein Beschnitt). */

/* Was uns ausmacht: reines Textband (Kopf mit Kicker + H2, Absatz,
   Faktenliste). Mobil gestapelt im Element-Gap, Desktop als Zweispalter
   (siehe min-width-Block). */
.karriere-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.karriere-text__titel,
.karriere-status__titel {
  margin: 0;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
}

.karriere-text__absatz {
  margin: 0; /* Typo: .mgc-lead (Lead unter der H2 «Was uns ausmacht», C1.11) */
}

.karriere-text .karriere-fakten {
  margin-top: 0;
}

/* Bewerbung: Status + Formular links in Lesebreite, Ansprechperson und
   Mailzeile rechts als Sticky-Spalte (Grid-Areas, mobil aufgeloest). */
.karriere-block--2 {
  display: grid;
  grid-template-columns: minmax(0, var(--karriere-breite)) minmax(0, 1fr);
  grid-template-areas:
    "status seite"
    "form seite";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--space-3);
  align-items: start;
}

.karriere-status {
  grid-area: status;
}

.karriere-status__text {
  margin: 0.5rem 0 0; /* Typo: .mgc-lead (Lead unter der H2 «Offene Stellen», C1.11) */
}

.karriere .karriere-formular {
  grid-area: form;
  padding-bottom: 0;
}

.karriere .karriere-formular > * {
  max-width: none;
}

/* Dichte (Max): Feldabstand knapp, «Ihre Nachricht» halb so hoch. Felder,
   Pflichtangaben, Validierung und Uploads bleiben unveraendert. */
.karriere .karriere-formular .gform_wrapper .gform_fields {
  row-gap: 0.65rem;
}

.karriere .karriere-formular .gform_wrapper textarea {
  height: 9rem;
  min-height: 9rem;
}

.karriere-seite {
  grid-area: seite;
  position: sticky;
  top: calc(var(--notfall-h) + var(--header-h) + var(--space-3));
  max-width: 30rem;
}

.karriere-seite .karriere-ansprech {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 0;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.karriere-ansprech::before,
.karriere-ansprech::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
}

.karriere-ansprech::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.karriere-ansprech::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

.karriere-ansprech__label {
  margin-right: 0.3rem;
}

.karriere-ansprech__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.karriere-ansprech__rolle {
  color: var(--ink-soft);
}

.karriere-mail {
  margin: var(--space-2) 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Drittes Bild in der Sticky-Spalte (Shane): mobil nicht gezeigt, damit
   die abgenommene Mobile-Ansicht unveraendert bleibt. */
.karriere-bild--seite {
  display: none;
}

@media (max-width: 56rem) {
  .karriere-intro {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }

  .karriere-bild {
    max-width: 26rem;
  }

  .karriere-bild--intro {
    max-width: none;
  }

  /* Reihenfolge wie bisher (Shane 28.08.: mobil perfekt): Status,
     Ansprechperson, Formular, Mailzeile; die Sticky-Spalte loest sich auf. */
  .karriere-block--2 {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .karriere-status,
  .karriere .karriere-formular,
  .karriere-seite {
    grid-area: auto;
  }

  .karriere-seite,
  .karriere-kontakt,
  .karriere-links {
    display: contents;
  }

  .karriere-status {
    order: 1;
  }

  .karriere-seite .karriere-ansprech {
    order: 2;
  }

  .karriere .karriere-formular {
    order: 3;
  }

  .karriere-mail {
    order: 4;
  }
}

/* Karriere Desktop-Split (Max Nachtrag 31.08.2026 nach Shanes Screenshot
   10:01, ersetzt die Nachtraege davor; der Hero-Nachtrag «Jetzt bewerben»/
   «1990» ist hinfaellig). NUR ab 56.01rem, Mobile abgenommen und
   unveraendert (DOM-Reihenfolge bleibt, die Wrapper sind display: contents).
   Der Karriere-Block ist EIN Raster 4/12 | 8/12 mit Standard-Gap space-4:
   - KOPF VOLLBREIT: Kicker + H1 im Seitenkopf, der Lead-Absatz spannt beide
     Spalten in der bisherigen Zeilenbreite (max-width --karriere-breite =
     47.5rem, die Breite der 7/12-Spalte bei 1440). Der Zweispalter beginnt
     darunter.
   - LINKS (1/3): nur das Werkstatt-Hochformat 2:3 in Spaltenbreite ohne
     Beschnitt plus Caption, sticky (top = Header + space-4) ab 1000px
     Viewporthoehe, darunter scrollt es normal.
   - RECHTS (2/3), einspaltig: «Was uns ausmacht» (Kicker, H2, Lead-Absatz,
     Faktenliste), CAD-Bild als Zwischenbild (3:2-Kasten, Cover, Kopf oben),
     «Offene Stellen» (Kicker, H2, Satz, Ansprechperson-Karte, Mail, Formular
     in voller Spaltenbreite). Reihenfolge per Grid-Areas, das Mobile-DOM
     (CAD vor «Was uns ausmacht», Mail nach Formular) bleibt.
   Kicker = .page-header__kicker (Max 31.08.). Abstaende: Bloecke space-4,
   innerhalb der Bewerbung space-3, Karte->Mail space-2. Seitenausklang =
   derselbe Token wie /ueber-uns/ (.entry-content, space-6; Max Padding-
   Nachtrag 31.08.). Flach, keine Schatten. GF-Dichte (Max Runde 3) bleibt:
   row-gap 0.33rem, Textarea 7.75rem. */
@media (min-width: 56.01rem) {
  /* Raster 4/8, Gap und Ausrichtung kommen von .mgc-split (Basis, 16d);
     hier nur die Karriere-eigenen Areas. */
  .karriere {
    --karriere-sticky-top: calc(var(--notfall-h) + var(--header-h) + var(--space-4));
    grid-template-areas:
      "lead lead"
      "bild team"
      "bild cad"
      "bild stellen"
      "bild kontakt"
      "bild form";
    row-gap: 0;
    padding-top: 0;
    padding-bottom: var(--space-6);
  }

  .karriere-intro,
  .karriere-links,
  .karriere-block--3,
  .karriere-block--2,
  .karriere-seite {
    display: contents;
  }

  /* Kopf: Lead vollbreit ueber beiden Spalten, Zeilenbreite wie bisher. */
  .karriere-warum {
    grid-area: lead;
    max-width: var(--karriere-breite);
  }

  /* Linke Spalte: Werkstattbild 2:3 ohne Beschnitt, sticky. */
  .karriere-bild--seite {
    grid-area: bild;
    align-self: start;
    display: block;
    margin: var(--space-4) 0 0;
    max-width: none;
  }

  @media (min-height: 1000px) {
    .karriere-bild--seite {
      position: sticky;
      top: var(--karriere-sticky-top);
    }
  }

  /* Rechte Spalte */
  .karriere-text {
    grid-area: team;
    margin-top: var(--space-4);
  }

  .karriere-text__absatz {
    max-width: var(--lead-measure);
  }

  /* CAD-Zwischenbild: Hoehe auf 3:2 begrenzt, Kopf oben vollstaendig. */
  .karriere-bild--intro {
    grid-area: cad;
    margin-top: var(--space-4);
  }

  .karriere-bild--intro img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 0;
  }

  .karriere-status {
    grid-area: stellen;
    margin-top: var(--space-4);
  }

  .karriere-status__text {
    max-width: var(--lead-measure);
  }

  .karriere-kontakt {
    grid-area: kontakt;
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .karriere-seite .karriere-mail {
    margin: 0;
  }

  .karriere .karriere-formular {
    grid-area: form;
    margin-top: var(--space-3);
  }

  .karriere .karriere-formular .gform_wrapper .gform_fields {
    row-gap: 0.33rem;
  }

  .karriere .karriere-formular .gform_wrapper textarea {
    height: 7.75rem;
    min-height: 7.75rem;
  }
}

/* Kompakter Seitenkopf (28.08., Auftrag Max, /dienstleistungen/): H1 eine
   Stufe kleiner, Abstaende darunter gestrafft, damit die Leistungs-Karten
   im ersten Viewport stehen. Gesetzt per Klasse aus page.php, keine ID. */
.page-header--kompakt {
  padding: var(--space-4) 0 var(--space-3);
}

.page-header--kompakt .page-header__lead {
  margin-top: var(--space-2);
}

/* Abschliessender Text nach den Leistungen (28.08.): die frueheren
   Einleitungsabsaetze, Wortlaut unveraendert, als ruhiger Schluss. */
.entry-content .dienst-abschluss {
  margin-top: var(--space-5);
}

/* Massstrich unter dem Seitentitel (Cyan-Basislinie mit Teilstrichen,
   .page-header h1::after / .referenz-hero h1::after / .error-404 h1::after)
   entfernt: Runde 2 Olivia-Feedback 27.08.2026, Block 7 ("blaues Raster
   unter Sektionstiteln"). Die K20-Ausnahme fuer Referenz-Archive ist damit
   gegenstandslos und ebenfalls weg. */

/* Katalog-Header (Referenz-Archiv): Kapitelziffer + HUD-Zeile. Die
   Ziffer darf anschneiden, aber nie horizontales Scrollen erzeugen. */
.page-header--katalog {
  overflow: clip;
}

.page-header--katalog .wrap {
  position: relative;
}

.page-header--katalog h1,
.page-header--katalog .page-header__kicker,
.page-header--katalog .page-header__lead {
  position: relative;
  z-index: 1;
}

.page-header__hud {
  margin: var(--space-3) 0 0;
  position: relative;
  z-index: 1;
}

/* C1.4/C1.8: die Subline ist der Lead der Seite, Lead-Typo und -Lesebreite
   wie /karriere/ (Klasse .mgc-lead im Markup, hier nur Farbe, Mass, Abstand). */
.page-header__lead {
  color: var(--ink);
  max-width: var(--lead-measure);
  margin: var(--space-3) 0 0;
}

.entry-content {
  padding-bottom: var(--space-6);
}

.entry-content > * {
  max-width: var(--measure);
}

/* Ruhiger Seitenausklang: das letzte Inhalts-Element gibt seinen
   Bottom-Margin ab, der Abstand zum Abschluss-CTA ist damit auf
   JEDER Seite identisch das entry-content-Padding (Befund Shane
   14.08.: /ueber-uns/ endete nach dem Umbau tiefer als die anderen
   Seiten, weil jedes Schluss-Element andere Margins mitbringt). */
.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content h2 {
  margin-top: var(--space-5);
}

.entry-content h3 {
  margin-top: var(--space-4);
}

.entry-content figure {
  margin: var(--space-4) 0;
  max-width: none;
}

.entry-content img {
  width: 100%;
}

.entry-content .alignwide,
.entry-content .breakout {
  max-width: none;
}

/* Punkte-Liste mit Cyan-Quadrat statt Bullet. */
.entry-content ul:not([class]) {
  list-style: none;
  padding-left: 0;
}

.entry-content ul:not([class]) > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
}

.entry-content ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

/* Rechtsseiten ruhig, volle Lesbarkeit. */
.entry-content--legal h2 {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   16b. Katalog-Bausteine für Kernseiten-Inhalte (Dienstleistungen,
   Über uns): Exponat-Figuren mit Fig.-Beschriftung, Timeline,
   Direkter-Draht-Block, Teamliste. Menschen IMMER in Farbe.
   -------------------------------------------------------------------------- */
/* Exponat-Figur: Stahl-Duotone im Ruhezustand, Hover = volle Farbe.
   Caption als HUD-Mikrotypo, wie eine Abbildung im Industriekatalog. */
.entry-content .mgc-fig {
  margin: var(--space-3) 0 var(--space-4);
}

/* Ueber uns (page-id-11), Aufbau 28.08.2026 (Shane): Einleitung als
   Split, Text und Datenblatt links, Gebaeudefoto rechts in voller
   3:2-Rahmung. Das Querformat-Band vom 25.08. (max-height + object-fit
   cover) schnitt Dach und Himmel ab, deshalb kein Beschnitt mehr. Volle
   Inhaltsbreite, das Foto darf gross sein. */
.entry-content .mgc-ueber-intro,
.mgc-ueber-intro {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin: 0 0 var(--space-5);
}



.entry-content .mgc-ueber-intro .mgc-fig,
.mgc-ueber-intro__foto {
  margin: 0;
}

/* Datenblatt: Typenschild-Tabelle in HUD-Mikrotypo mit Hairlines, wie
   eine Spezifikation im Industriekatalog. Ohne Cyan-Flaeche, das eine
   Akzent-Detail der Sektion bleibt die Bildlegende.
   28.08. (Grundsatz-Regel Max fuer zweispaltige Listen): jede Zeile ist
   EIN Grid-Container (Label max-content | 1fr), die Trennlinie liegt als
   border-bottom an der ZEILE (durchgehend, keine Luecke, kein Stummel),
   Label und Wert sitzen per align-items: baseline auf einer Linie. */
.entry-content .mgc-datenblatt,
.mgc-datenblatt {
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.mgc-datenblatt__zeile {
  display: grid;
  /* 28.08. (Nachtrag Max): feste Label-Spalte, damit alle Werte an EINER
     Kante beginnen (gilt fuer /ueber-uns/ und /karriere/, eine Komponente). */
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.mgc-datenblatt > .mgc-datenblatt__zeile > dt,
.mgc-datenblatt > .mgc-datenblatt__zeile > dd {
  margin: 0;
  padding: 0;
  line-height: var(--lh-text);
}

.mgc-datenblatt dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mgc-datenblatt dd {
  color: var(--ink);
}

@media (max-width: 56rem) {
  .entry-content .mgc-ueber-intro,
  .mgc-ueber-intro {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Schmal: Label ueber dem Wert gestapelt, die Zeile bleibt EIN Container
   mit EINER Linie. */
@media (max-width: 30rem) {
  .mgc-datenblatt__zeile {
    grid-template-columns: 1fr;
    row-gap: 0.1rem;
  }
}

.mgc-fig img {
  border: 1px solid var(--line); /* 28.08. flach: Rand statt Schatten */
}

.mgc-fig figcaption {
  margin-top: 0.75rem;
}

/* Timeline: Cyan-Feinliner als Achse, Passermarken als Stationen,
   Jahreszahlen in der breiten Archivo-Lage (Industrie-Beschriftung). */
.entry-content .mgc-timeline,
.mgc-timeline {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  position: relative;
}

/* Achse: dezente Spur, darueber zeichnet ::after den Fortschritt in
   vollem Akzent-Blau (scrollgekoppelt via --mgc-tl, JS setzt die
   Klasse mgc-timeline--js; ohne JS oder mit reduced-motion steht die
   Linie statisch in fetter Endform). */
.mgc-timeline::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 3px;
  width: 3px;
  background: rgba(0, 157, 225, 0.22);
}

.mgc-timeline::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 3px;
  width: 3px;
  background: var(--accent);
  transform-origin: top center;
}

.mgc-timeline--js::after {
  transform: scaleY(var(--mgc-tl, 0));
}

.mgc-timeline > li {
  position: relative;
  padding: 0 0 var(--space-3) 2.2rem;
}

.mgc-timeline > li:last-child {
  padding-bottom: 0;
}

/* Station als Passermarke: weisses Quadrat mit Cyan-Feinliner, sitzt
   exakt auf der Achse. */
.mgc-timeline > li::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: -1px;
  width: 11px;
  height: 11px;
  background: var(--bg);
  border: 2px solid var(--accent);
  transition: background-color 0.3s ease, transform 0.3s var(--ease-out);
}

.mgc-timeline__jahr {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  font-stretch: 125%;
  font-size: 1.2rem;
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.mgc-timeline > li p {
  margin: 0;
  color: var(--ink-soft);
}

/* Aktivierung: erreicht die Linienspitze eine Station, fuellt sich
   die Passermarke und die Jahreszahl zieht dezent nach. Rueckwaerts-
   scrollen laesst den Zustand bewusst stehen (kein Flackern). */
.mgc-timeline--js > li.ist-aktiv::before {
  background: var(--accent);
  transform: scale(1.12);
}

.mgc-timeline--js .mgc-timeline__jahr {
  opacity: 0.35;
  transform: translateY(3px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}

.mgc-timeline--js > li.ist-aktiv .mgc-timeline__jahr {
  opacity: 1;
  transform: none;
}

/* reduced-motion: Uebergaenge aus, der Fuellstand laeuft trotzdem
   scrollgekoppelt mit (Klasse setzt theme.js). */
.mgc-timeline--ruhig > li::before,
.mgc-timeline--ruhig .mgc-timeline__jahr {
  transition: none;
}

/* Geschichte: Timeline und Inhaber-Foto nebeneinander. Die Achse
   erzählt, das Foto verkauft (Menschen immer in Farbe). */
/* Phase D (Max 31.08.2026): Sektionssprache von Karriere. Kopf (Kicker
   «Chronik» + H2) vollbreit, darunter das Paar Timeline | Foto als 6/6 ueber
   die Basis .mgc-split.mgc-split--6 (Desktop), mobil gestapelt wie bisher.
   Foto in Originalproportion in Spaltenbreite. */
.mgc-geschichte {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin: var(--space-3) 0 var(--space-4);
}

/* Kopf (Kicker + H2) in Inhaltsseiten: traegt den Sektionsabstand, die H2
   darin startet ohne eigenen Abstand (der Kicker traegt space-2 zur H2). */
/* Nur direkte Kinder des Inhalts (z. B. /ueber-uns/); in den Sektionen der
   Dienstleistungs-Unterseiten traegt die Sektion den Abstand. */
.entry-content > .mgc-kopf {
  margin-top: var(--space-5);
  max-width: none;
}

.entry-content .mgc-kopf > h2 {
  margin-top: 0;
}

.entry-content .mgc-geschichte .mgc-timeline,
.mgc-geschichte .mgc-timeline {
  margin: 0;
}

.entry-content .mgc-geschichte .mgc-fig,
.mgc-geschichte__foto {
  margin: 0;
}

@media (max-width: 56rem) {
  .mgc-geschichte__foto {
    max-width: 28rem;
  }
}

/* Ganzjahres-Ausstellung: hervorgehobenes Panel mit Cyan-Feinliner-
   Oberkante (das eine Akzent-Detail der Sektion), Bild randlos. */
.entry-content .mgc-ausstellung,
.mgc-ausstellung {
  max-width: min(64rem, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  margin: var(--space-3) 0 var(--space-2);
}

/* Bildergruppe: ein Leitbild (Bar/Aufenthaltsbereich) über zwei
   Thumbnails (Gerätevielfalt, Schulungsküche), Hairline-Fugen aus dem
   Panel-Grund. Füllt die Spaltenhöhe exakt (cover statt fixe Ratio). */
.mgc-ausstellung__galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2px;
}

.mgc-ausstellung__galerie picture {
  display: block;
  overflow: hidden;
  min-height: 0;
}

.mgc-ausstellung__galerie picture:first-child,
.mgc-ausstellung__leitbild {
  grid-column: 1 / -1;
}

.entry-content .mgc-ausstellung__galerie img,
.mgc-ausstellung__galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgc-ausstellung__body {
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.mgc-ausstellung__body > p:first-child {
  margin-top: 0;
}

.entry-content .mgc-ausstellung__titel,
.mgc-ausstellung__titel {
  margin: var(--space-3) 0 0.8rem;
  font-size: 1.05rem;
}

.entry-content .mgc-ausstellung__cta,
.mgc-ausstellung__cta {
  margin: var(--space-3) 0 0;
}

@media (max-width: 56rem) {
  .entry-content .mgc-ausstellung,
  .mgc-ausstellung {
    grid-template-columns: 1fr;
  }

  /* Gestapelt braucht die Galerie feste Proportionen statt Spaltenhöhe. */
  .mgc-ausstellung__galerie {
    grid-template-rows: none;
  }

  .mgc-ausstellung__galerie picture:first-child {
    aspect-ratio: 16 / 9;
  }

  .mgc-ausstellung__galerie picture:not(:first-child) {
    aspect-ratio: 4 / 3;
  }
}

/* Querverweis-Leiste der Dienstleistungs-Unterseiten: HUD-Label und
   Hairline-Chips, wie die Filter-Pills, aber ruhiger. */
.entry-content .mgc-quernav,
.mgc-quernav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.mgc-quernav__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.6rem;
}

.mgc-quernav a {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mgc-quernav a:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   16c. Dienstleistungs-Unterseiten (Beratung, Planung, Montage, Service):
   EIN Template (28.08., Shane «richtig gut», Regeln Max). Kopf kompakt mit
   Laufnummer, Auftakt als Split (Intro in Lesebreite | Bild ungeschnitten,
   natuerliches Format, 1px Rand, Plus-Caption), Leistungspunkte als
   Karten mit Icon-Kopfzeile in zwei Spalten, Hinweise gerahmt mit
   Passermarken, Quernav als Karten-Leiste; Abschluss-CTA-Box entfernt
   (28.08. abends, Max: der dunkle CTA-Banner vor dem Footer uebernimmt).
   Flach: keine Schatten. Unter 56rem alles einspaltig.
   -------------------------------------------------------------------------- */
.page-header__nr {
  flex: none;
  margin-left: 0.9rem;
  white-space: nowrap; /* Laufnummer bricht mobil nicht («01 /» + «04») */
  color: var(--ink-faint);
  letter-spacing: 0.16em;
}

.entry-content.dienst-seite > * {
  max-width: none;
}

/* Seitenausklang auf Standard-Sektionsgap (28.08. abends, Befund Shane:
   zu viel Weissraum vor dem dunklen Banner). */
.entry-content.dienst-seite {
  padding-bottom: var(--space-5);
}

.dienst-auftakt {
  /* 28.08. (Max, Breiten-Fix): Text links, Bild rechts an der Content-Kante,
     Bildhoehe begrenzt (skaliert, nicht beschnitten), beide oben buendig -
     Paar wie Text | Button im Abschlussblock. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center; /* Balance-Regel Max: Text mittig zur Bildhoehe */
  margin: var(--space-2) 0 0;
}

.dienst-auftakt__text {
  position: relative;
}

.dienst-auftakt__text > p:last-child {
  margin-bottom: 0;
}

.entry-content .dienst-auftakt .mgc-fig,
.dienst-auftakt__bild {
  margin: 0;
  max-width: 100%;
  justify-self: end;
}

.dienst-auftakt__bild img {
  /* Blueprint 31.08.: Originalproportion in Spaltenbreite, kein Band. */
  display: block;
  width: 100%;
  height: auto;
}

.dienst-block {
  margin-top: calc(var(--space-5) - var(--space-3)); /* + padding = ein Sektions-Gap */
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-strong);
}

.dienst-block > :last-child,
.dienst-block__text > :last-child,
.entry-content .dienst-block .mgc-timeline,
.entry-content .dienst-block .dienst-punkte,
.dienst-seite .dienst-block .footer-notfall--hell {
  margin-bottom: 0;
}

/* Block ohne H2 (nur eine Box): kein doppelter Abstand nach der Hairline. */
.dienst-seite .dienst-block > :first-child {
  margin-top: 0;
}

/* Zweitbild und die Box danach gehoeren inhaltlich zusammen (Max 28.08.
   abends): nur ein Element-Gap (Figure-Mass des Themes, space-4), keine
   Hairline dazwischen. */
.dienst-bild + .dienst-block {
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: 0;
}

/* Kicker-Hierarchie (Max 28.08., Korrektur): EIN Kicker pro Seite im
   Seitenkopf; Sektionstitel sind grosse H2 ohne Strich (wie «Die Geschichte
   seit 1990» auf /ueber-uns/); kleine Versalien nur an Captions, Leiste und
   Box-Labels. .mgc-kicker bleibt als Muster verfuegbar. */
.mgc-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.mgc-kicker::before {
  content: "";
  flex: none;
  width: 2.6rem;
  height: 2px;
  background: var(--accent);
}

.entry-content .dienst-block h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
}

.entry-content .dienst-block > p,
.entry-content .dienst-block__text > p {
  max-width: var(--measure);
}

/* Zweites Bild nach dem Leistungsumfang (Shanes Wahl 28.08., Breitenregel
   Max): volle Content-Breite wie Punkte-Grid und Hinweisbox, Hoehe auf
   ca. 55-60vh begrenzt (object-fit cover, zentriert), Plus-Caption darunter
   linksbuendig. Abstand davor und danach = ein Sektions-Gap. */
.entry-content .dienst-bild,
.dienst-bild {
  margin: var(--space-5) 0 0;
  max-width: none;
}

.dienst-bild img {
  /* Blueprint 31.08.: kein Cover-Band mehr, Originalproportion. */
  display: block;
  width: 100%;
  height: auto;
}

/* Leistungskarten (Icon-Runde, Max 28.08. abends; Befund Shane: zu viel
   Blau, uneinheitlich): Hairline-Rahmen, Kopfzeile mit Line-Icon (Tinte,
   Akzentblau nur als Detail) und kleiner Laufnummer daneben, Text darunter.
   Kein Akzentbalken mehr. Zwei Spalten volle Breite, Gap = halbes
   Sektions-Gap, alle Karten gleich hoch (grid-auto-rows), eine letzte
   ungerade Karte (05) laeuft ueber beide Spalten. */
.entry-content .dienst-punkte,
.dienst-punkte {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: calc(var(--space-5) / 2);
  counter-reset: dienst-punkt;
}

.dienst-punkte > li {
  counter-increment: dienst-punkt;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1rem, 1.5vw, 1.3rem) clamp(1.05rem, 1.7vw, 1.4rem);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 1rem;
  line-height: var(--lh-text);
  color: var(--ink);
}

.dienst-punkte > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.entry-content .dienst-punkte p,
.dienst-punkte p {
  margin: 0;
  max-width: none;
}

.dienst-punkt__kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.dienst-punkt__kopf::after {
  content: counter(dienst-punkt, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--ink-faint);
}

.dienst-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ink);
}

.dienst-icon__akzent {
  stroke: var(--accent);
}

.dienst-icon__akzent--voll {
  fill: var(--accent);
  stroke: none;
}

/* Planung: CAD-Plan zuerst in voller Content-Breite, ungeschnitten
   (Kontur-Scan auf Weiss, gerahmt), Caption darunter; die Karten folgen im
   Zweispalter (Max 28.08. abends, ersetzt den Split Liste | Plan). */
.entry-content .dienst-plan,
.dienst-plan {
  margin: var(--space-3) 0 0;
  max-width: none;
}

.dienst-plan img {
  /* Blueprint 31.08.: Originalproportion, kein Rahmen mit fester Hoehe. */
  display: block;
  width: 100%;
  height: auto;
}

.dienst-plan + .dienst-punkte {
  margin-top: var(--space-4);
}

/* Montage: Timeline links, Monteure-Foto rechts als Sticky-Bild im
   natuerlichen Format ohne Beschnitt, Caption darunter (Max 28.08. abends;
   ersetzt das Vollbreit-Bild unter der Timeline). Sticky-Kante = Notfall-
   Leiste + Header + ein Element-Gap. */
.dienst-block--split {
  display: grid;
  /* Textspalte hoechstens Lesebreite (die Timeline ist ohnehin auf
     --measure gekappt), der Rest gehoert dem Foto; auf schmaleren
     Desktops 55 %, damit das Foto nicht zum Briefmarkenformat wird. */
  grid-template-columns: minmax(0, min(var(--measure), 55%)) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.entry-content .dienst-block--split .mgc-fig,
.dienst-block__bild {
  position: sticky;
  top: calc(var(--notfall-h) + var(--header-h) + var(--space-3));
  margin: 0;
  max-width: none;
}

.dienst-block__bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hinweisbox: flach, gerahmt, Passermarken (statt Akzent-Balken links). */
.dienst-seite .mgc-infobox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  margin: var(--space-3) 0 0;
  max-width: none;
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem); /* 28.08. abends: kompakter */
  border: 1.5px solid var(--accent); /* Rahmen wie .footer-notfall--hell */
  background: var(--bg);
}

.dienst-seite .mgc-infobox p {
  margin: 0;
  max-width: var(--measure);
}

.entry-content .dienst-seite-hinweis__button,
.dienst-seite .mgc-infobox .button {
  margin: 0;
}

.dienst-seite .mgc-infobox::before,
.dienst-seite .mgc-infobox::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
}

/* Eckwinkel der Hinweisbox in Tinte, wie bei der hellen Pikett-Box. */
.dienst-seite .mgc-infobox::before,
.dienst-seite .mgc-infobox::after {
  border-color: var(--ink);
}

.dienst-seite .mgc-infobox::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.dienst-seite .mgc-infobox::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

/* Pikett-Box (Service, Max 28.08. abends): Inhalt unveraendert, aber auf
   Lesebreite begrenzt (etwa halbe Content-Breite, linksbuendig), Padding
   knapp, Kicker | Nummer | Satz eng gestapelt. Nummer bleibt tel-Link. */
.dienst-seite .footer-notfall--hell {
  margin-top: var(--space-3);
  max-width: min(var(--measure), 50%);
  padding: 0.9rem 1.15rem 0.95rem;
}

.dienst-seite .footer-notfall--hell .footer-notfall__label {
  margin-bottom: 0.3rem;
}

.dienst-seite .footer-notfall--hell p {
  margin-top: 0.25rem;
}

/* Pikett-Box in der Infobox (Max Nachtrag 31.08.): auf /service/ traegt die
   Infobox Rahmen, Eckwinkel, Padding und Spaltenbreite (Skelett der
   Ausstellung-Box), rechts der Button «Jetzt anrufen» als tel-Link. Der
   innere Pikett-Block gibt seinen eigenen Rahmen ab, Label, Nummer und Satz
   behalten ihre Typo. Die Footer-Variante bleibt unberuehrt. */
.dienst-seite .mgc-infobox--pikett .footer-notfall--hell {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
}

.dienst-seite .mgc-infobox--pikett .footer-notfall--hell::before,
.dienst-seite .mgc-infobox--pikett .footer-notfall--hell::after {
  content: none;
}

/* Quernav als Prozess-Indikator (Max 28.08. abends): Label | vier Schritte
   01-04 in fester Reihenfolge; der aktuelle Schritt ist kein Link (span,
   aria-current, muted, «Sie sind hier» in der Label-Typo statt Pfeil).
   Ab 88rem eine Zeile (darunter klebt «03 Montage Sie sind hier» zusammen,
   gemessen bei 1290px), 56-88rem Label oben + 2x2, unter 56rem gestapelt. */
.entry-content .dienst-quernav,
.dienst-quernav {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-5); /* Standard-Sektionsgap (28.08. abends) */
  padding-top: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.dienst-quernav .mgc-quernav__label {
  align-self: center;
  margin: 0;
  padding: 1.1rem 1.6rem 1.1rem 0;
}

.dienst-quernav a,
.dienst-quernav__aktuell {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.dienst-quernav a {
  transition: color 0.2s ease, background 0.2s ease;
}

/* Aktueller Schritt: kein Link, kein Pfeil, kein Hover, Muted-Ton, kein Blau. */
.dienst-quernav__aktuell {
  color: var(--ink-faint);
  cursor: default;
}

.dienst-quernav__aktuell .dienst-quernav__num {
  color: var(--ink-faint);
}

.dienst-quernav__hier {
  margin-left: auto;
  padding-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
}

.dienst-quernav a::after {
  content: "\2192";
  margin-left: auto;
  color: var(--ink-faint);
  transition: color 0.2s ease, transform 0.25s var(--ease-out);
}

.dienst-quernav a:hover,
.dienst-quernav a:focus-visible {
  color: var(--accent-hover);
  background: var(--bg-soft);
}

.dienst-quernav a:hover::after {
  color: var(--accent);
  transform: translateX(3px);
}

.dienst-quernav__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

/* Mittlere Breiten: Label oben, Schritte 2x2 (eine Zeile wuerde
   «02 Planung Sie sind hier» quetschen). */
@media (max-width: 88rem) and (min-width: 56.01rem) {
  .entry-content .dienst-quernav,
  .dienst-quernav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dienst-quernav .mgc-quernav__label {
    grid-column: 1 / -1;
    padding: 0.9rem 0 0.4rem;
  }

  .dienst-quernav a,
  .dienst-quernav__aktuell {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0.2rem;
  }

  .dienst-quernav > :nth-child(odd):not(.mgc-quernav__label) {
    border-left: 1px solid var(--line);
    padding-left: 1.2rem;
  }
}

@media (max-width: 56rem) {
  .dienst-auftakt,
  .dienst-block--split {
    grid-template-columns: 1fr;
  }

  .entry-content .dienst-block--split .mgc-fig,
  .dienst-block__bild {
    position: static;
  }

  /* Einspaltig: Hoehe pro Karte natuerlich (gleiche Hoehe ist ein
     Zweispalter-Merkmal, mobil waere es nur Leerflaeche). */
  .entry-content .dienst-punkte,
  .dienst-punkte {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .dienst-seite .footer-notfall--hell {
    max-width: none;
  }

  .entry-content .dienst-quernav,
  .dienst-quernav {
    grid-template-columns: 1fr;
  }

  .dienst-seite .mgc-infobox {
    grid-template-columns: 1fr;
  }

  .entry-content .dienst-auftakt .mgc-fig,
  .dienst-auftakt__bild {
    justify-self: stretch;
  }

  .dienst-auftakt__bild img {
    width: 100%;
    height: auto;
  }

  .dienst-quernav .mgc-quernav__label {
    padding: 0.9rem 0 0.4rem;
  }

  .dienst-quernav a,
  .dienst-quernav__aktuell {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 0.95rem 0.2rem;
  }
}

/* --------------------------------------------------------------------------
   16d. Basis Zweispalter + Lead (Karriere und Dienstleistungs-Split) und
   Dienstleistungs-Split (Auftrag Max 31.08.2026, R1-R10; Nachtrag R2:
   Bild im Zweispalter = 6/6, Kicker + H2 links = 4/8; Phase B mit
   Praezisierungen: Intro Text links | Bild rechts, Service ohne Split-
   Intro). Scope: body.dienst-split (functions.php), alle vier Seiten.
   Statisch: keine Sticky-Elemente, keine neuen Animationen. Komponenten
   (Karten, Eckwinkel-Box, Timeline, Pikett-Box, Leiste) unveraendert in
   Logik und Optik, nur Position und Luft. Mobile: nur Kicker und die
   entfernten Trennlinien aendern sich. Umsetzung ausschliesslich per Grid
   hinter dem Desktop-Breakpoint, DOM-Reihenfolge bleibt (R10).
   -------------------------------------------------------------------------- */

/* Lead-Typo (Werte: Tokens --lead-* in :root). Karriere-Lead auf allen
   Viewports; die Desktop-only-Faelle (Karriere-Absatz, Dienst-Subline und
   -Fliesstext) nutzen dieselben Tokens in ihren min-width-Regeln. */
.mgc-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lead-lh);
  letter-spacing: var(--lead-ls);
}

/* .mgc-kopf: Wrapper Kicker (.page-header__kicker) + H2, links im
   Zweispalter. Ohne eigene Regeln: der Kicker traegt seinen Abstand zur
   Ueberschrift selbst (space-2), die H2 bleibt in Text und Groesse. */

/* Zweispalter-Basis: 4/8 mit Standard-Gap, Oberkanten buendig.
   Modifikator --6 fuer Bild links (R2a). Nur ab Desktop, mobil Stapel. */
@media (min-width: 56.01rem) {
  .mgc-split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-4);
    align-items: start;
  }

  .mgc-split--6 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* R6: keine vollbreiten Trennlinien zwischen Sektionen. Die Summe aus
   Margin + Padding bleibt space-5, damit mobil nur die Linie verschwindet;
   die Paar-Regel Zwischenbild -> Sektion (space-4) bleibt mobil bestehen. */
.dienst-split .dienst-block {
  margin-top: var(--space-5);
  padding-top: 0;
  border-top: 0;
}


/* BLUEPRINT Dienstleistungs-Unterseiten (Max 31.08.2026, final, ersetzt die
   Nachtraege E-H). Alle vier Seiten dasselbe Skelett, Desktop ab 56.01rem:
   1. Kopf + Intro als EIN 6/6-Zweispalter: main ist das Raster (Wrap-Masse
      uebernommen), Seitenkopf, Wrap, Inhalt und Intro geben ihre Box auf
      (display: contents). Links Kicker, H1, Subline (Lead), Fliesstext (Body);
      rechts das Intro-Bild in Originalproportion, Oberkante am Akzentstrich.
   2. «Im Detail»/«Ablauf»: Sektion = .mgc-split.mgc-split--6, Kopf (Kicker,
      H2, Lead) vollbreit in Zeile 1, Paar in Zeile 2 (Inhalt links, Bild
      rechts, unabhaengig von der DOM-Reihenfolge, Oberkanten buendig).
   3. Abschluss: mit H2 als 4/8 (.mgc-split), ohne H2 die Box vollbreit.
   4. Leiste: Sektionsabstand oben (margin) = unten (main-Padding) = space-5.
   Keine Baender mit fester Hoehe, keine Trennlinien, alle Abstaende ein
   Token pro Rolle; Mobile: DOM-Reihenfolge = Stapel, nur Kicker, Leads und
   die aufgeloesten Baender aendern sich. */
@media (min-width: 56.01rem) {
  .dienst-split main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: 0;
    align-items: start;
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter) var(--space-5);
  }

  .dienst-split main > .page-header,
  .dienst-split main > .page-header > .wrap,
  .dienst-split main > .wrap,
  .dienst-split .entry-content.dienst-seite,
  .dienst-split .dienst-auftakt,
  .dienst-split .dienst-auftakt__text {
    display: contents;
  }

  /* Linke Spalte des Kopfs: Kicker (traegt das fruehere Kopf-Padding), H1,
     Subline, Fliesstext. */
  .dienst-split main > .page-header .page-header__kicker,
  .dienst-split main > .page-header h1,
  .dienst-split main > .page-header .page-header__lead,
  .dienst-split .dienst-auftakt__text > p {
    grid-column: 1;
  }

  .dienst-split main > .page-header .page-header__kicker {
    margin-top: var(--space-4);
  }

  .dienst-split .dienst-auftakt__text > p:first-child {
    margin-top: var(--space-3);
  }

  /* Rechte Spalte: Intro-Bild ueber alle Kopfzeilen, Oberkante auf dem
     Akzentstrich des Kickers (Strich sitzt mittig in der Kicker-Zeile:
     Zeilenhoehe 1.6 x Kicker-Groesse, Strich 2px). */
  .dienst-split .dienst-auftakt .dienst-auftakt__bild {
    grid-column: 2;
    grid-row: 1 / span 6;
    justify-self: stretch;
    margin: calc(var(--space-4) + var(--fs-kicker) * 0.8 - 1px) 0 0;
  }

  /* Alles nach dem Intro laeuft ueber beide Spalten. */
  .dienst-split .entry-content.dienst-seite > :not(.dienst-auftakt) {
    grid-column: 1 / -1;
  }

  /* Abschluss-Sektionen 4/8 (Kicker + H2 links, Box rechts). */
  .dienst-split .dienst-block.mgc-split > .mgc-kopf {
    grid-column: 1;
    grid-row: 1;
  }

  .dienst-split .dienst-block.mgc-split > :not(.mgc-kopf) {
    grid-column: 2;
  }

  .dienst-split .dienst-block.mgc-split > .mgc-kopf + * {
    margin-top: 0;
  }

  /* Im-Detail-Sektion (Max Auftrag 31.08. 13:50 + Nachtrag 13:55): 6/6.
     Zeile 1 links Kicker, H2, Lead-Satz, rechts bleibt leer. Zeile 2 links das
     Bild (Originalproportion, Caption), rechts Karten bzw. Timeline; beide mit
     demselben Element-Gap (space-4) zum Kopf, damit Bildoberkante und erste
     Kartenzeile bzw. Marker 01 auf einer Linie liegen. Selektoren mit der
     Tiefe der generischen 4/8-Regeln (.mgc-split.mgc-split--6), damit sie
     diese sauber ueberstimmen. */
  .dienst-split .dienst-block.mgc-split.mgc-split--6 {
    grid-template-rows: auto auto;
    row-gap: 0;
  }

  .dienst-split .dienst-block.mgc-split.mgc-split--6 > .mgc-kopf {
    grid-column: 1;
    grid-row: 1;
  }

  .dienst-split .dienst-block.mgc-split.mgc-split--6 > figure {
    grid-column: 1;
    grid-row: 2;
    margin: var(--space-4) 0 0;
    max-width: none;
  }

  .dienst-split .dienst-block.mgc-split.mgc-split--6 > .dienst-punkte,
  .dienst-split .dienst-block.mgc-split.mgc-split--6 .mgc-timeline {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--space-4);
  }

  .dienst-split .dienst-block--split .dienst-block__text {
    display: contents;
  }

  .dienst-split .dienst-block--split .dienst-block__bild {
    position: static;
  }

  /* R8: Karten im Zweierraster mit Standard-Gap. */
  .dienst-split .dienst-punkte {
    gap: var(--space-4);
  }

  /* Pikett-Box (B10): Lesebreite, linksbuendig in der Spalte. */
  .dienst-split .dienst-block.mgc-split .footer-notfall--hell {
    max-width: var(--measure);
  }

  /* Leiste (R9): alle Zellen gleich hoch, gemeinsame Mittelachse. */
  .dienst-split .dienst-quernav .mgc-quernav__label {
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .dienst-split .dienst-quernav a,
  .dienst-split .dienst-quernav__aktuell {
    align-items: center;
  }
}

/* Karten-Text (C1.12): EIN Stil site-weit, Referenz sind die Leistungskarten
   von /beratung/ (.dienst-punkte). Komponenten behalten ihr Layout. */
.dienst-punkte > li,
.dienst-card__text,
.news-card__text,
.post-card p,
.mietgeraet-card__text,
.team-e__text {
  font-size: 1rem;
  line-height: var(--lh-text);
  color: var(--ink);
}

/* Complianz-Dokument (/cookie-richtlinie-eu/): Plugin-Typo auf die Skala. */
.cmplz-document h2 { font-size: var(--fs-h2); }
.cmplz-document h3 { font-size: var(--fs-h3); }
.cmplz-document p,
.cmplz-document li { font-size: var(--fs-body); line-height: var(--lh-text); }

/* CTA-Buttons im Seiteninhalt: Abstand, wenn zwei nebeneinander stehen. */
.entry-content .button {
  margin: 0 0.6rem 0.6rem 0;
}

/* Lieferanten-Logowand: ruhige weisse Kacheln mit Hairline-Fugen
   (Muster service-grid). Logos im Ruhezustand entsättigt (Duotone-
   Logik), Hover holt die Originalfarbe. Reine Bildelemente, KEINE
   Links. Kachelgrund ist echtes Weiss, weil die Alt-Logos weisse
   JPG-Hintergründe mitbringen. */
.entry-content .mgc-lieferanten,
.mgc-lieferanten {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  max-width: min(64rem, 100%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  /* Rasterlinien pro GEFUELLTER Zelle (box-shadow auf li) statt
     Linienfarbe als Containergrund: leere Restzellen der letzten
     Reihe zeigen so weder Hintergrund noch Rahmen (2026-08-11). */
  background: transparent;
  border: 0;
}

.mgc-lieferanten > li {
  margin: 0;
  position: relative; /* Bezug für die Hover-Akzentlinie. */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  /* Grid-Blowout verhindern: ohne min-width 0 diktiert die intrinsische
     Logo-Breite die Zellbreite und sprengt die 1fr-Spalten. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  padding: 0.6rem;
}

/* Logos IN FARBE ab dem ersten Frame (Entscheid Shane 14.08.:
   entsättigt waren sie schlecht erkennbar), beidachsig zentriert;
   die doppelte Höhen-Kappe (rem UND Zellanteil) zähmt die Ausreisser
   (HWM, Metagro, Ubert) auf ein einheitliches optisches Mass. */
.entry-content .mgc-lieferanten img,
.mgc-lieferanten img {
  /* EINE Regel fuer alle Logos (Shane 01.09.2026): jedes Logo fuellt
     75 % der Kachelbreite ODER 60 % der Kachelhoehe, je nachdem, was
     zuerst greift, mittig. Umsetzung ohne Prozent-Hoehen (die loesen in
     der Flex-Zelle nicht zuverlaessig auf): das Bild bekommt eine feste
     Box von 75 % Kachelbreite (Kachel = Zelle inkl. 2 x 0.6rem Padding,
     daher calc) im Verhaeltnis 15:8, das entspricht bei der 3:2-Kachel
     exakt 60 % der Kachelhoehe; object-fit: contain setzt das Logo
     mittig hinein. Gilt fuer alle Breakpoints, Kachel/Raster unveraendert. */
  width: calc(75% + 0.9rem);
  height: auto;
  aspect-ratio: 15 / 8;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: 50% 50%;
}

/* Hover final (Nachtrag 14.08.): die Zelle bleibt komplett statisch,
   einzig die 2px-Akzentlinie fährt per scaleX von links ein (Abstand
   zur Zellkante = Zell-Padding). Nur echte Zeiger (hover-Guard):
   Touch zeigt den Ruhezustand. Bei prefers-reduced-motion erscheint
   die Linie ohne Animation direkt. */
.mgc-lieferanten > li::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mgc-lieferanten > li:hover::after,
  .mgc-lieferanten > li:focus-visible::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgc-lieferanten > li::after {
    transition: none;
  }
}

/* Platzhalter der letzten Reihe entfernt (2026-08-11): leere
   Restzellen bleiben komplett leer, siehe Linien-Umbau oben. */

@media (max-width: 60rem) {
  .entry-content .mgc-lieferanten,
  .mgc-lieferanten {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 40rem) {
  .entry-content .mgc-lieferanten,
  .mgc-lieferanten {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Logo-Groesse: eine Regel fuer alle Breakpoints, siehe oben (01.09.2026). */
}

/* Team-Grid: Portrait-Karten im Katalog-Takt (3 / 2 / 1 Spalten).
   Portraits IN FARBE (Menschen nie im Duotone), einheitlich 3:4; ohne
   Foto ein typografisches Monogramm in der breiten Archivo-Lage.
   Hover: ruhiges Anheben mit Schatten, nichts hüpft. */
.entry-content .mgc-team,
.mgc-team {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  /* Bricht wie die Exponat-Figuren aus dem Lesemass aus, aber moderat:
     hält die Portraits nah an ihrer nativen Auflösung. */
  max-width: min(64rem, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}

.mgc-team > li {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out);
}

.mgc-team > li:hover {
  transform: translateY(-4px);
}

.mgc-team__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-soft);
}

.entry-content .mgc-team__foto,
.mgc-team__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Monogramm-Kachel: helles System wie die Angebots-Platzhalter
   (Entscheid Shane 14.08., ersetzt den dunklen Grund): Papier-Ton,
   feine Rahmenlinie, Initialen im Mono-Font. Greift generisch fuer
   jede Person ohne Beitragsbild; sobald ein Foto gesetzt wird,
   verschwindet die Kachel automatisch. */
.mgc-team__media--mono {
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--ink-faint);
  user-select: none;
}

.mgc-team__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 1.1rem 1.2rem 1.25rem;
}

.entry-content .mgc-team__name,
.mgc-team__name {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-heading);
  color: var(--ink);
}

/* Funktionen als dezente Etiketten statt Trennzeichen-Fliesstext. */
.mgc-team__rollen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

.mgc-team__rollen span {
  padding: 0.16rem 0.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.74rem;
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}

.mgc-team__mail {
  margin-top: auto;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

/* Kuvert-Icon als Maske: erbt die Textfarbe, auch beim Hover. */
.mgc-team__mail::before {
  content: "";
  flex: none;
  margin-top: 0.28em; /* optisch auf der ersten Zeile, falls die Adresse umbricht */
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mgc-team__mail:hover {
  color: var(--accent-hover);
}

@media (max-width: 60rem) {
  .entry-content .mgc-team,
  .mgc-team {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .entry-content .mgc-team,
  .mgc-team {
    /* Eine Spalte, aber gedeckelt: die 188px-Quellportraits der alten
       Site vertragen keine grosse Hochskalierung. */
    grid-template-columns: minmax(0, 24rem);
  }
}

/* --------------------------------------------------------------------------
   17. Referenz-Archiv: Filter-Pills + Grid
   -------------------------------------------------------------------------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}

.filter-pills__pill {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.filter-pills__pill:hover {
  background: var(--accent-button);
  border-color: var(--accent-button);
  color: var(--accent-ink);
}

/* Aktiver Pill (Auftrag Shane 26.08.): gleicher Blauton wie die Buttons
   im Header/CTA (var(--accent-button) #007bb0) statt des helleren Logo-
   Cyans, damit die Chips nicht als abweichender Ton auffallen. Weisse
   Schrift wie auf den Buttons (AA-fest 4.71:1), Passermarke weiss.
   Hover trägt dieselbe Button-Logik. */
.filter-pills__pill.is-active {
  background: var(--accent-button);
  border-color: var(--accent-button);
  color: var(--accent-ink);
}

.filter-pills__pill.is-active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55em;
  vertical-align: 1px;
  background: var(--accent-ink);
}

/* K22 Archiv-Grid: geschlossenes Katalograster. Alle Karten gleich
   gross mit 3:2-Exponat, keine Sonderspannen mehr (die 7n+1-Grosskachel
   riss vor jedem Zeilenumbruch eine leere Drittelspalte auf). Zeilen-
   gleiche Kartenhoehen: Grid streckt, das Bild bleibt 3:2, die
   Body-Zone traegt die Differenz. */
.referenz-grid--archiv .referenz-card {
  display: flex;
  flex-direction: column;
}

.referenz-grid--archiv .referenz-card__media {
  aspect-ratio: 3 / 2;
  flex: none;
}

/* --------------------------------------------------------------------------
   18. Referenz-Detailseite: grosse Bühne, Meta-Zeile, Galerie mit
   Lightbox. Die Seite lebt von den Bildern.
   -------------------------------------------------------------------------- */
.referenz-hero {
  padding: var(--space-5) 0 var(--space-4);
}

.referenz-hero h1 {
  max-width: 22ch;
  margin-bottom: var(--space-3);
}

/* Meta-Zeile im Katalog-Stil: Hairline-Raster, ein kurzer
   Cyan-Feinliner als gedruckte Markierung auf der Oberkante. */
.referenz-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}

.referenz-meta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--accent);
}

.referenz-meta__item {
  padding: 0.9rem 1.6rem 0.9rem 0;
  margin-right: 1.6rem;
  border-right: 1px solid var(--line);
}

.referenz-meta__item:last-child {
  border-right: 0;
}

/* Label als HUD-Mikrotypo mit Cyan-Fadenkreuz-Marker. */
.referenz-meta__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}

.referenz-meta__label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5em;
  vertical-align: 1px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat;
}

.referenz-meta__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.referenz-lead {
  /* Phase D: Typo/Farbe/Mass ueber .mgc-lead (Lead-Regel) bzw. Body, kein Override. */
  margin-bottom: var(--space-4);
}

/* Galerie: erstes Bild volle Breite, danach 2er-Raster mit bewusstem
   Rhythmus. Exponat-Prinzip wie im Archiv: Stahl-Duotone im
   Ruhezustand, Hover = volle Farbe + minimaler Zoom. */
.referenz-galerie__hud {
  margin: 0 0 var(--space-2);
}

.referenz-galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  padding-bottom: var(--space-5);
}

.referenz-galerie__item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-soft);
}

.referenz-galerie__item:first-child {
  grid-column: 1 / -1;
}

.referenz-galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.8s var(--ease-out);
}

.referenz-galerie__item:first-child img {
  aspect-ratio: 16 / 9;
}

.referenz-galerie__item:hover img {
  transform: scale(1.03);
}

/* Fig.-Etikett: gedruckt, unten links auf dem Exponat. */
.referenz-galerie__fig {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.35rem 0.6rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}

@media (max-width: 40rem) {
  .referenz-galerie {
    grid-template-columns: 1fr;
  }

  .referenz-galerie__item img,
  .referenz-galerie__item:first-child img {
    aspect-ratio: 4 / 3;
  }
}

/* Navigation zwischen Referenzen */
.referenz-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-3) 0 var(--space-5);
  border-top: 1px solid var(--line);
}

/* Lightbox */
.mgc-lightbox-overlay {
  position: fixed;
  inset: 0;
  /* Über dem Merkliste-Panel (210): die Lightbox ist modal, das Panel
     nicht - offen bleiben darf es, aber nie obenauf liegen. */
  z-index: 230;
  background: rgba(16, 17, 20, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 1rem;
}

.mgc-lightbox-overlay.is-open {
  display: flex;
}

/* Der Rahmen folgt dem Bild: keine festen Masse, kein aspect-ratio,
   width/height auto skaliert nie hoch - kleinere Bilder stehen
   zentriert in Originalgrösse. */
.mgc-lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  max-height: 85dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mgc-lightbox-overlay__close,
.mgc-lightbox-overlay__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  background: transparent;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mgc-lightbox-overlay__close:hover,
.mgc-lightbox-overlay__nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mgc-lightbox-overlay__close {
  top: 1rem;
  right: 1rem;
  font-size: 1.6rem;
  line-height: var(--lh-ui);
}

.mgc-lightbox-overlay__nav {
  top: 50%;
  transform: translateY(-50%);
}

.mgc-lightbox-overlay__nav svg {
  width: 1.3rem;
  height: 1.3rem;
}

.mgc-lightbox-overlay__nav--prev { left: 1rem; }
.mgc-lightbox-overlay__nav--next { right: 1rem; }

.mgc-lightbox-overlay__count {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--dark-ink-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   19. Mietgeräte: kleinere sachliche Kacheln (Fotos sind Schnappschüsse,
   werden nicht gross inszeniert).
   -------------------------------------------------------------------------- */
/* Angebote-Seite: Gerätegruppen als nummerierte Katalog-Sektionen
   (HUD-Zeile mit Positionszahl über dem Titel). */
.angebote-gruppe {
  margin-bottom: var(--space-4);
  /* Sprung-Anker (#occasionen/#mietgeraete, 14.08.): Sektionen tauchen
     unter der sticky Kopfzeile (Leiste + Header) auf, nicht darunter. */
  scroll-margin-top: calc(var(--notfall-h) + var(--header-h) + 1.5rem);
}


.angebote-gruppe__titel {
  margin-bottom: var(--space-3);
}

.angebote-gruppe__intro {
  margin-bottom: var(--space-3);
}

/* Sprungnavigation im Seitenkopf: Pill-Optik des Referenz-Archivs
   als reine Anker-Links, Abstand nach dem H1-Block statt der
   Archiv-Unterkante. --space-4 statt -3 (Befund Shane 14.08., Pills
   klebten am Kicker): entspricht der Header-Unterkante, Kicker und
   Pills lesen sich als eigener Block. */
.page-header__pills {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.mietgeraet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  padding-bottom: var(--space-5);
}

.mietgeraet-card {
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease;
}

.mietgeraet-card:hover {
  border-color: var(--line-strong);
}

.mietgeraet-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mietgeraet-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 0.8rem;
}

/* Mietgeraete-Bildzuschnitt (Auftrag Max 26.08. 2a): festes 4:3-Feld
   behalten, aber das KOMPLETTE Foto sichtbar lassen (Detail und
   Uebersicht). Ursache des Beschnitts: place-items:center erzeugt eine
   auto-hohe Grid-Zeile, die auf die natuerliche Bildhoehe waechst; die
   4:3-Box (aspect-ratio) schnitt den Ueberhang per overflow:hidden unten
   ab (gemessen: Bild 446x413 in 448x336-Box). Fix: Bild absolut auf die
   definierte Boxhoehe legen, object-fit:contain passt komplett ein,
   Restflaeche bleibt weiss, Bild zentriert. Nur Angebote/Mietgeraete:
   Detail ueber body.single-mietgeraet, Uebersicht ueber die
   mietgeraet-eigene Kartenklasse. */
.mietgeraet-card__media {
  position: relative;
}

body.single-mietgeraet .produkt-galerie__item > img,
body.single-produkt .produkt-galerie__item > img, /* 27.08.: auch Produkt-Galerie (mgc-card weich, Hochformate sonst geklippt) */
.mietgeraet-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

.mietgeraet-card__media svg {
  width: 2.4rem;
  height: 2.4rem;
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  fill: none;
}

/* Heller Platzhalter ohne Beitragsbild (Entscheid Shane 14.08.):
   gleiches 4:3-Feld wie die echten Produktbilder, Papier-Ton mit
   feiner Rahmenlinie, Linien-Icon und Vermerk im Kicker-Stil.
   Ersetzt den kompakten Kartenaufbau ohne Bildcontainer vom 11.08. */
.mietgeraet-card__media--platzhalter {
  align-content: center;
  gap: 0.55rem;
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mietgeraet-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.mietgeraet-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
}

.mietgeraet-card__text {
  margin: 0;
  flex: 1;
}

.mietgeraet-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-hover);
  margin-top: 0.3rem;
}

.mietgeraet-card__preis {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   19b. Produktkatalog (Stufe 3): Kategorie-Archive, Marken-Seiten,
   Produktdetail. Katalog-Fotos sind Freisteller auf Weiss -> contain +
   multiply (Muster Mietgeräte). Cyan bleibt Feinliner: Fokus, Hover,
   aktive Chips.
   -------------------------------------------------------------------------- */

/* Kachel-Raster der Archive und Suchtreffer. */
.produkt-katalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  padding-bottom: var(--space-4);
}

.produkt-card {
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.25s ease;
}

.produkt-card:hover {
  border-color: var(--line-strong);
}

/* Clientseitige Filter (Marken-Chips) blenden Kacheln per [hidden] aus -
   das display: flex der Karte würde die UA-Regel sonst überstimmen. */
.produkt-card[hidden],
[data-suche-verstecken][hidden] {
  display: none !important;
}

.produkt-card__media {
  /* Einheitliche 4:3-Bildflaeche aus dem bestehenden Raster (14.08.,
     ersetzt die 12rem-Festhoehe): Foto-Motive fuellen die Flaeche per
     --cover, Freisteller laufen per Basis-contain unbeschnitten auf
     Weiss. Basis OHNE Modus-Klasse = contain, weil die JS-gebauten
     Suchtreffer (theme.js) keine Klasse tragen koennen und contain
     nie anschneidet. */
  aspect-ratio: 4 / 3;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative; /* Containing Block fuer das absolut aufgespannte Bild (wie .mietgeraet-card__media) */
  border-bottom: 1px solid var(--line);
}

.produkt-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  padding: 0.5rem; /* A6: max 0.5rem, das Geraet fuellt die Flaeche. */
  transition: transform 0.8s var(--ease-out);
}

/* Foto-Motive: flaechenfuellend, Rahmenlinie direkt am Bild. */
.produkt-card__media--cover img {
  object-fit: cover;
  mix-blend-mode: normal;
  padding: 0;
}

.produkt-card:hover .produkt-card__media img {
  transform: scale(1.03);
}

/* Mobile-Produktkarten (Auftrag 14.08., Shane iPhone 390): im
   einspaltigen Raster dominierte die weisse 4:3-Buehne statt des
   Geraets - und hohe Bilder wurden sogar GEKLIPPT. Ursache: das
   height:100% der Basisregel laeuft ins Leere, weil place-items:
   center das Grid-Item nicht streckt und die Auto-Row auf die
   natuerliche Bildhoehe waechst (Prozent gegen Auto-Row = auto);
   das Bild rendert in Naturalproportion und overflow:hidden
   schneidet oben/unten ab (ELM-300: 416px Bild in 261px Box).
   27.08.2026 (Shane iPhone, Liebherr-Karte nur Tuer): die
   Absolut-Aufspannung (position:relative auf der Buehne, img
   absolute/inset:0) gilt jetzt auf ALLEN Breiten in den Basisregeln
   oben - gegen den definiten Containing Block funktioniert
   height:100%, object-fit contain zeigt jedes Geraet KOMPLETT, auch
   am Desktop; noetig, weil mgc-card seit 27.08. weich einpasst
   (Hochformate bleiben hoch). Mobil bleibt nur die quadratische
   Buehne (mehr Hoehe fuer die ueberwiegend hohen Freisteller). */
@media (max-width: 34rem) {
  .produkt-card__media {
    aspect-ratio: 1 / 1;
  }
}

.produkt-card__media svg {
  width: 2.4rem;
  height: 2.4rem;
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  fill: none;
}

.produkt-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.produkt-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
  color: var(--ink);
}

/* Marken/Kategorie als Hairline-Etiketten (Muster Team-Rollen). */
.produkt-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.produkt-card__marke,
.produkt-card__kategorie {
  padding: 0.16rem 0.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.72rem;
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}

.produkt-card__kategorie {
  background: transparent;
  color: var(--ink-faint);
}

.produkt-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-hover);
  margin-top: auto;
  padding-top: 0.3rem;
}

.produkt-card__cta svg {
  width: 1em;
  height: 1em;
  transition: transform 0.25s var(--ease-out);
}

.produkt-card:hover .produkt-card__cta svg {
  transform: translateX(4px);
}

/* Kategorie-Header: das importierte Headerbild als Exponat mit
   Fig.-Etikett; Bannerformate der alten Site werden ruhig beschnitten. */
.kategorie-header {
  position: relative;
  margin: 0 0 var(--space-4);
  overflow: hidden;
}

.kategorie-header img {
  display: block;
  width: 100%;
  max-height: clamp(13rem, 32vw, 24rem);
  object-fit: cover;
}

.kategorie-header__fig {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.35rem 0.6rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}

.kategorie-intro {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}


/* Instant-Suche: ein präzises Feld, Cyan nur im Fokus. */
.produkt-suche {
  margin: 0 0 var(--space-4);
}

.produkt-suche__feld {
  position: relative;
  max-width: 34rem;
}

.produkt-suche__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  color: var(--ink-faint);
  pointer-events: none;
}

.produkt-suche__feld input {
  width: 100%;
  padding: 0.85rem 1.1rem 0.85rem 2.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}

.produkt-suche__feld input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 157, 225, 0.35); /* wie mgc-form. */
}

.produkt-suche__feld input::placeholder {
  color: var(--ink-faint);
}

.produkt-suche__status {
  margin: var(--space-3) 0 var(--space-2);
}

.produkt-suche__ergebnisse {
  padding-bottom: var(--space-2);
}

/* Marken-Chips: Filter-Pills als Buttons. Die Kategorie-Chips der
   Produkte-Übersicht teilen die Optik. */
.marken-chips,
.kategorie-chips {
  margin-bottom: var(--space-3);
}

button.filter-pills__pill {
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  cursor: pointer;
}

button.filter-pills__pill.is-active {
  background: var(--accent-button);
}

.marken-chips__leer {
  margin: 0 0 var(--space-4);
}

/* Produkt-Galerie: Freisteller in weissen Zellen, Lightbox wie bei den
   Referenzen. Erstes Bild doppelt breit, Solo-Bild gedeckelt. */
.produkt-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  grid-auto-flow: dense;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  margin-bottom: var(--space-5);
}

.produkt-galerie__item {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.produkt-galerie__item:hover {
  border-color: var(--line-strong);
}

.produkt-galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 1.2rem;
  transition: transform 0.8s var(--ease-out);
}

.produkt-galerie__item:hover img {
  transform: scale(1.03);
}

/* Hauptbild als 2x2-Feld IM Raster statt formfreiem Ausreisser: bei
   gemischten Formaten (Hoch/Quer/Quadrat) bleibt das Raster dadurch
   immer geschlossen, dense stopft Restlücken. object-fit: contain
   zeigt jedes Geraet komplett, das Innenpolster gibt Luft. */
.produkt-galerie__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 4 / 3;
}

.produkt-galerie__item:first-child img {
  padding: 1.6rem;
}

/* Solo-Variante: nur noch von single-mietgeraet.php genutzt (die
   Produkt-Detailseiten rendern Einzelbilder seit 14.08. als
   .produkt-einzelbild in der Kopfzone). */
.produkt-galerie--solo {
  grid-template-columns: minmax(0, 28rem);
}

.produkt-galerie--solo .produkt-galerie__item:first-child {
  grid-column: span 1;
  grid-row: span 1;
}

@media (max-width: 40rem) {
  .produkt-galerie {
    grid-template-columns: 1fr 1fr;
  }
}

/* Detail-Gliederung (14.08., ersetzt das K17-Sticky-Layout): KOPFZONE
   zweispaltig (links Bild, rechts Kicker/H1/Meta/CTA, buendig ueber
   Grid-Stretch), darunter die INHALTSZONE in Lesebreite. Nichts klebt,
   mobil laeuft alles gestapelt in DOM-Reihenfolge. */
.produkt-kopf {
  padding: var(--space-4) 0 0;
}

.produkt-detail__titel {
  max-width: 24ch;
  margin-bottom: var(--space-3);
}

.produkt-kopf__info .referenz-meta {
  margin-bottom: var(--space-3);
}

.produkt-kopf__info .produkt-cta {
  margin-bottom: 0;
}

/* Unterlagen-Box im Kopf (A2): kompakt unter der CTA-Box; bei vielen
   Dokumenten laeuft die Spalte einfach weiter, die Liste wird nie
   abgeschnitten (A6). */
.merkblatt-panel--kopf {
  margin-top: var(--space-3);
}

.merkblatt-panel--kopf .merkblatt-panel__titel {
  font-size: 0.95rem;
  margin-bottom: var(--space-1);
}

/* Einzelbild: dieselbe cover/contain-Logik wie die Karten
   (mgc_bild_darstellungsmodus). Mobil eine feste 4:3-Flaeche,
   am Desktop fuellt es die Kopfspalte (absolute inset). */
.produkt-einzelbild {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.produkt-einzelbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.produkt-einzelbild--contain img {
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 0.5rem; /* A6: max 0.5rem, das Geraet fuellt die Flaeche. */
}

.produkt-kopf__medien .produkt-galerie {
  margin-bottom: 0;
}

/* In der Kopfspalte darf das Hauptbild nie mehr Spuren verlangen,
   als das Raster hat (span 2 erzwang nahe 960-1080px eine implizite
   Spur ausserhalb der Spalte): volle Zeile, egal wie viele Spuren
   auto-fill ergibt. */
.produkt-kopf__medien .produkt-galerie__item:first-child {
  grid-column: 1 / -1;
}

/* Inhaltszone (Auftrag Max 26.08. 2b): Der Kopfbereich bleibt
   zweispaltig (Bild links, Info rechts), die Inhaltszone laeuft
   darunter ueber die volle Inhaltsbreite und beginnt linksbuendig an
   der Bildkante (kein margin-inline:auto, keine Zonen-Kappe mehr). Die
   Lesebreite liegt auf dem Textblock selbst, damit auch kurze Texte
   keine leere Spalte erzeugen. Revidiert die B2-Zentrierung vom 14.08. */
.produkt-inhaltszone {
  padding: var(--space-4) 0;
}

.produkt-inhaltszone .marke-panel {
  margin-top: var(--space-4);
  max-width: var(--measure);
}

/* H1b: ganze Fettabsaetze aus dem Import treten leiser auf. */
.produkt-inhalt p strong {
  font-weight: 600;
}

.produkt-inhalt {
  /* Lesebreite auf dem Textblock (Auftrag 2b): volle Zone, aber der
     Fliesstext haelt eine angenehme Zeilenlaenge, linksbuendig. */
  max-width: var(--measure);
  padding-bottom: 0;
}

.produkt-inhalt > *:first-child {
  margin-top: 0;
}

.produkt-inhalt h2 {
  margin-top: var(--space-4);
}

.produkt-inhalt h2:first-child {
  margin-top: 0;
}

@media (min-width: 60.0625rem) {
  .produkt-kopf {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: stretch;
  }

  /* Ohne Bild laeuft die Kopf-Info einspaltig ueber die volle
     Breite statt in der 55%-Spur. */
  .produkt-kopf--solo {
    display: block;
  }

  /* Einzelbild-Fall: die Bildflaeche uebernimmt exakt die Hoehe der
     rechten Kopfspalte (absolute inset im gestreckten Grid-Item),
     beide Spalten schliessen buendig ab. min-height faengt extrem
     kurze Kopfspalten ab. */
  .produkt-kopf__medien--einzelbild {
    position: relative;
    min-height: 22rem;
  }

  .produkt-kopf__medien--einzelbild .produkt-einzelbild {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

/* MIETGERAETE-Detail (single-mietgeraet.php) nutzt weiterhin das
   K17-Zweispalten-Layout mit Sticky-Medien. Die Produkt-Detailseiten
   sind am 14.08. auf die Kopf/Inhalts-Gliederung oben umgezogen;
   eine Angleichung der Mietgeraete waere ein eigener Auftrag. */
.produkt-detail {
  padding: var(--space-4) 0;
}

.produkt-detail__info .referenz-meta {
  margin-bottom: var(--space-3);
}

.produkt-detail__info .produkt-cta {
  margin-bottom: var(--space-3);
}

.produkt-detail__info .merkblatt-panel {
  margin-top: var(--space-4);
}

.produkt-detail__info .marke-panel {
  margin-top: var(--space-3);
}

.produkt-detail__medien .produkt-galerie {
  margin-bottom: var(--space-3);
}

.produkt-detail__medien .produkt-galerie__item:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 60.0625rem) {
  .produkt-detail {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }

  .produkt-detail--solo {
    display: block;
  }

  .produkt-detail__medien {
    position: sticky;
    top: 8rem;
  }
}

/* Merkblätter: Download-Zeilen mit PDF-Icon und Dateigrösse. */
.merkblatt-panel__titel {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.mgc-merkblaetter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mgc-merkblaetter a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mgc-merkblaetter a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mgc-merkblaetter__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

.mgc-merkblaetter a:hover .mgc-merkblaetter__icon {
  color: var(--accent-hover);
}

.mgc-merkblaetter__body {
  min-width: 0;
}

.mgc-merkblaetter__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-ui);
  color: var(--ink);
}

.mgc-merkblaetter__meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Marken-Panel: Logo als Exponat OHNE externe Verlinkung, der Link führt
   intern auf die Marken-Seite. */
.marke-panel {
  padding: 1.1rem 1.2rem 1.25rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}

.marke-panel__hud {
  margin: 0 0 0.8rem;
}

.marke-panel__eintrag {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}

.marke-panel__eintrag + .marke-panel__eintrag {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.marke-panel__logo {
  display: grid;
  place-items: center;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
}

.marke-panel__logo img {
  width: auto;
  height: auto;
  max-width: 11rem;
  max-height: 3.2rem;
  object-fit: contain;
}

.marke-panel .u-link,
.produkt-cta p:last-child {
  margin: 0;
}

/* Marken-Seite: Kopf mit Logo-Exponat rechts, Portrait aus dem Import. */
.marke-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.marke-header__logo {
  display: grid;
  place-items: center;
  padding: 1rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
}

.marke-header__logo img {
  width: auto;
  height: auto;
  max-width: 13rem;
  max-height: 4.2rem;
  object-fit: contain;
}

.marke-portrait {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
}


.marke-portrait h3 {
  font-size: 1.15rem;
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   20. Formulare: sachlich, präzise Fokusränder.
   -------------------------------------------------------------------------- */
.mgc-form {
  max-width: var(--measure);
}

.mgc-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.mgc-form__feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mgc-form__feld--voll {
  grid-column: 1 / -1;
}

.mgc-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.mgc-form label .req {
  color: var(--accent-hover);
}

.mgc-form input[type="text"],
.mgc-form input[type="email"],
.mgc-form input[type="tel"],
.mgc-form select,
.mgc-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mgc-form input:focus,
.mgc-form select:focus,
.mgc-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 157, 225, 0.35); /* deutlich sichtbarer Fokusring. */
}

.mgc-form textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.mgc-form button[type="submit"] {
  margin-top: 1.2rem;
}

.mgc-form .form-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.9rem;
}

.mgc-form-success {
  border-left: 3px solid #1fa15a;
  background: var(--bg-soft);
  padding: 1.1rem 1.3rem;
}

.mgc-form-error {
  border-left: 3px solid #c8371e;
  background: var(--bg-soft);
  padding: 1.1rem 1.3rem;
}

@media (max-width: 40rem) {
  .mgc-form__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   20b. Formulare Gravity Forms (Kontakt ID 1, Bewerbung ID 2):
   gform_disable_css ist aktiv (functions.php), GF liefert nacktes Markup
   ohne eigenes Stylesheet. Sprache und Masse folgen .mgc-form oben,
   die Meldungsfarben sind dieselben wie .mgc-form-success/-error. Der
   Submit trägt von GF aus class="button" und läuft über die bestehende
   Button-Komponente (Abschnitt 7), kein Neubau. Selektoren decken das
   Div-Markup (GF 2.5+) und das Legacy-ul/li-Markup ab.
   -------------------------------------------------------------------------- */
.gform_wrapper {
  /* Volle Breite der Contentspalte. Auf der Karriere-Seite greift
     zusätzlich .entry-content > * (max-width --measure), das Formular
     fluchtet dort mit dem Textblock. */
  width: 100%;
}

/* GF nutzt fieldset/legend für Auswahl- und Einwilligungsfelder:
   UA-Rahmen weg, die Legende verhält sich wie ein Label. */
.gform_wrapper fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Feldliste: ruhiger vertikaler Rhythmus (Raster wie .mgc-form__grid);
   der Listen-Reset deckt das Legacy-Markup (ul/li) ab. */
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Karriere-Bewerbungsformular (GF ID 2, Auftrag Max 26.08.): laeuft ueber
   eine angenehme Breite statt in der schmalen Lesespalte zu klemmen, und
   Vorname/Nachname sowie E-Mail/Telefon stehen am Desktop zweispaltig
   nebeneinander, mobil untereinander. Nur Formular 2; das Kontaktformular
   (ID 1) liegt bewusst in seiner .kontakt-grid-Spalte und bleibt
   unveraendert. Feld-IDs: 3 Vorname, 4 Nachname, 5 E-Mail, 6 Telefon. */
.entry-content > #gform_wrapper_2 {
  max-width: min(100%, 56rem);
}

#gform_wrapper_2 .gform_fields {
  grid-template-columns: 1fr 1fr;
  column-gap: 1.4rem;
}

/* Standard volle Breite; die von Gravity Forms selbst als halbbreit
   markierten Felder (Vorname, Nachname, E-Mail, Telefon tragen
   .gfield--width-half) stehen zweispaltig. So bleibt die Zuordnung an
   den GF-Feldeinstellungen und nicht an fixen IDs. */
#gform_wrapper_2 .gform_fields > .gfield {
  grid-column: 1 / -1;
}

#gform_wrapper_2 .gform_fields > .gfield--width-half {
  grid-column: span 1;
}

@media (max-width: 40rem) {
  #gform_wrapper_2 .gform_fields {
    grid-template-columns: 1fr;
  }
  #gform_wrapper_2 .gform_fields > .gfield--width-half {
    grid-column: 1 / -1;
  }
}

/* Kontaktformular (GF ID 1, Auftrag Shane 26.08. «bei Kontakt auch so»):
   dieselbe Zweispaltigkeit wie Karriere, damit die Felder nicht ueber die
   volle Breite laufen. Firma/Ansprechperson und E-Mail/Telefon nebeneinander,
   Betreff/Nachricht/Datenschutz voll; mobil einspaltig. Das Kontaktformular
   traegt keine GF-eigenen Halb-Klassen, daher ueber die Feld-IDs
   (1 Firma, 3 Ansprechperson, 4 E-Mail, 5 Telefon). */
#gform_wrapper_1 .gform_fields {
  grid-template-columns: 1fr 1fr;
  column-gap: 1.4rem;
}

#gform_wrapper_1 .gform_fields > .gfield {
  grid-column: 1 / -1;
}

#gform_wrapper_1 #field_1_1,
#gform_wrapper_1 #field_1_3,
#gform_wrapper_1 #field_1_4,
#gform_wrapper_1 #field_1_5 {
  grid-column: span 1;
}

@media (max-width: 40rem) {
  #gform_wrapper_1 .gform_fields {
    grid-template-columns: 1fr;
  }
  #gform_wrapper_1 #field_1_1,
  #gform_wrapper_1 #field_1_3,
  #gform_wrapper_1 #field_1_4,
  #gform_wrapper_1 #field_1_5 {
    grid-column: 1 / -1;
  }
}

.gform_wrapper .gfield_label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: 0;
}

/* "(erforderlich)": klein und dezent statt GF-Signalrot, gleicher Ton
   wie die Pflichtmarkierung im alten Formular (.mgc-form label .req),
   mit Luft zum Label-Text. GF verschachtelt den Span doppelt (DOM am
   13.08. auf /kontakt/ verifiziert), darum neutralisiert die innere
   Regel Groesse und Abstand - sonst multiplizieren sich beide. */
.gform_wrapper .gfield_required {
  margin-left: 0.35em;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--accent-hover);
}

.gform_wrapper .gfield_required .gfield_required {
  margin-left: 0;
  font-size: 1em;
}

.gform_wrapper .gform_required_legend {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
  margin: 0 0 0.35rem;
}

/* Eingaben: identisch mit .mgc-form (Hairline --line-strong, --radius,
   Innenabstand 0.7/0.9rem). Ergibt gut 50px Höhe = sauberes Touch-Ziel;
   font: inherit = 17px Body-Grösse, kein iOS-Auto-Zoom. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gform_wrapper input[type="text"]:focus-visible,
.gform_wrapper input[type="email"]:focus-visible,
.gform_wrapper input[type="tel"]:focus-visible,
.gform_wrapper input[type="number"]:focus-visible,
.gform_wrapper input[type="url"]:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 157, 225, 0.35); /* wie mgc-form. */
}

.gform_wrapper textarea {
  min-height: 8.5rem;
  resize: vertical;
}

/* Select (Betreff-Dropdown): nativer Pfeil weg (Safari rendert ihn
   eigenwillig ausserhalb der Feldmitte), eigener Chevron als
   Hintergrundbild exakt vertikal zentriert. Strichbild wie die
   uebrigen Theme-Chevrons (2px, runde Kappen), Farbe = --ink
   (#131416, in data-URIs sind keine var() moeglich). padding-right
   haelt den Text vor dem Pfeil. */
.gform_wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23131416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 5 4.5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 12px auto;
}

/* Mehrteilige Felder (z.B. Name Vorname/Nachname): zweispaltig wie
   .mgc-form__grid, Sub-Labels als Mikrotypo. */
.gform_wrapper .ginput_complex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.gform_wrapper .ginput_complex span {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gform_wrapper .gform-field-label--type-sub {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* Feldbeschreibungen, auch die Upload-Regel "PDF, maximal 10 MB". */
.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0;
}

/* Datei-Upload (Bewerbung): gleicher Hairline-Rahmen wie die Eingaben,
   der Auswahl-Knopf als ruhige Nebentaste (Hover-Muster button--ghost). */
.gform_wrapper input[type="file"] {
  font: inherit;
  font-size: 0.92rem;
  width: 100%;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gform_wrapper input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 157, 225, 0.35);
}

/* Datei-Buttons der Upload-Felder (Auftrag Max 28.08.): neutral grau, sie
   duerfen nicht mit dem blauen Absenden-Button konkurrieren. Allgemeine
   Regel fuer alle GF-Upload-Felder (Formular 1 und 2). */
.gform_wrapper input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.95rem;
  margin-right: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gform_wrapper input[type="file"]::file-selector-button:hover {
  background: rgba(19, 20, 22, 0.08);
}

/* Datenschutz-Checkbox und Auswahlfelder: Kästchen in Markenfarbe,
   sauber an der ersten Textzeile ausgerichtet, Label bleibt Klickfläche
   (Touch-Ziel = Kästchen plus ganze Textzeile). */
.gform_wrapper .gchoice,
.gform_wrapper .ginput_container_consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}

.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent-button);
  cursor: pointer;
}

.gform_wrapper .gchoice label,
.gform_wrapper .ginput_container_consent label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Links im Feldtext (Datenschutzerklärung): gleiche Sprache wie die
   Fliesstext-Links oben, deren p-Regel greift hier nicht. */
.gform_wrapper .gfield a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.gform_wrapper .gfield a:hover {
  color: var(--accent-text);
}

/* Validierung in Theme-Sprache: Zusammenfassung oben als Block wie
   .mgc-form-error, am Feld kippt der Rahmen in den Fehlerton, die
   Meldung steht als kleine Zeile unter dem Feld. Kein GF-Rot. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
  border-left: 3px solid #c8371e;
  background: var(--bg-soft);
  padding: 1.1rem 1.3rem;
  margin: 0 0 var(--space-3);
}

.gform_wrapper .gform_submission_error {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.gform_wrapper .gform_validation_errors ol {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.gform_wrapper .gform_validation_error_link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #c8371e;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.gform_wrapper .gform_validation_error_link:hover {
  color: #c8371e;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: #c8371e;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font-size: 0.85rem;
  color: #c8371e;
  margin: 0;
}

/* Honeypot ("Zusätzliche Angabe") und admin-seitig versteckte Felder:
   ohne GF-CSS wären die Fangfelder sichtbar, hier hart ausgeblendet. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gfield_visibility_hidden {
  display: none !important;
}

/* Submit: GF vergibt selbst class="button", die Theme-Komponente greift
   direkt. Hier nur der Abstand (wie .mgc-form button[type="submit"]);
   margin 0 überstimmt die .entry-content .button-Doppelabstände auf
   der Karriere-Seite. */
.gform_wrapper .gform_footer {
  margin-top: 1.2rem;
}

.gform_wrapper .gform_footer .button {
  margin: 0;
}

/* Bestätigung nach dem Absenden: gleicher Block wie .mgc-form-success. */
.gform_confirmation_message {
  border-left: 3px solid #1fa15a;
  background: var(--bg-soft);
  padding: 1.1rem 1.3rem;
}

.gform_confirmation_message p:last-child {
  margin-bottom: 0;
}

/* Mobile: mehrteilige Felder einspaltig; die Touch-Ziele stehen schon
   (Eingaben ~46px, Checkbox-Label komplett klickbar). */
@media (max-width: 40rem) {
  .gform_wrapper .ginput_complex {
    grid-template-columns: 1fr;
  }
}

/* Kontaktseite: zweispaltig ab Tablet. */
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: var(--space-4);
  align-items: start;
}

/* 28.08. (Shane): Anker fuer die Ausstellungs-CTAs; der sticky Header
   darf den Formularkopf nicht verdecken. */
#kontakt-formular {
  scroll-margin-top: 7.5rem;
}

/* Kontaktseite (28.08., Shane «wirkt wie drei Teile»): Karte lebt in der
   Standort-Karte (letzter Block), Ausstellung schliesst ohne Riesenluecke
   direkt als Kapitel an. */
.kontakt-info__map .mgc-map {
  margin: 0;
  min-height: 15rem;
}

.kontakt-info__route {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
}

/* Leerflaeche vor dem Footer (Auftrag Max 28.08.): .ausstellung-schau
   bringt margin-bottom space-5 (bis 6rem) mit, der Wrapper darunter
   nochmals space-4; auf /kontakt/ fehlt zudem die dunkle CTA-Zone, also
   stand ~8.5rem leerer heller Grund direkt vor dem Footer. Im Kontakt-
   Kontext faellt der Sektions-Margin weg, es bleibt ein bewusster
   Abstand von 2.5rem. */
.kontakt-ausstellung {
  padding-bottom: var(--space-4);
}

.kontakt-ausstellung .ausstellung-schau {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* Info-Kasten katalog-präzise: Hairline-Rahmen mit kurzem
   Cyan-Feinliner auf der Oberkante, Zwischentitel als HUD-Mikrotypo.
   Kein sticky mehr (Auftrag Shane 26.08.): seit das Formular durch die
   Zweispaltigkeit kuerzer ist, wirkte das Mitlaufen beim Scrollen
   komisch. Die Spalte steht jetzt normal oben und scrollt mit der
   Seite; position: relative haelt die ::before-Markierung verankert. */
.kontakt-info {
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  position: relative;
}

.kontakt-info::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3.5rem;
  height: 2px;
  background: var(--accent);
}

.kontakt-info .kontakt-info__titel {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--space-3) 0 0.8rem; /* 28.08. (Max): gleicher Wert wie Badge->Box */
}

.kontakt-info .kontakt-info__titel::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55em;
  vertical-align: 1px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat;
}

.kontakt-info .kontakt-info__titel:first-child {
  margin-top: 0;
}

.kontakt-info address {
  font-style: normal;
  line-height: var(--lh-ui);
}

.kontakt-info__kontaktzeile {
  margin: 0.7rem 0 0;
}

@media (max-width: 56rem) {
  .kontakt-grid {
    grid-template-columns: 1fr;
  }

  /* relative statt static: die ::before-Markierung braucht weiterhin
     einen Positionierungskontext. */
  .kontakt-info {
    position: relative;
    top: auto;
  }
}

/* Google Map: lazy, klickbarer Fallback-Link. */
.mgc-map {
  margin: var(--space-4) 0;
  background: var(--bg-soft);
  min-height: 20rem;
  position: relative;
}

.mgc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* 25% Restsaettigung statt Vollentfaerbung (K34); Marker-Faerbung
     ist im iframe-Embed nicht einzeln steuerbar, nur der Gesamtfilter. */
  filter: grayscale(0.75) contrast(1.04);
}

.mgc-map__hinweis,
.mgc-map__link {
  padding: 1rem 1.2rem;
  margin: 0;
  font-size: 0.9rem;
}

.mgc-map.is-loaded .mgc-map__hinweis,
.mgc-map.is-loaded .mgc-map__link {
  display: none;
}

/* Complianz-Platzhalter (01.09.2026, N1-T): der Cookie-Blocker huellt das
   iframe in .cmplz-placeholder-parent und macht daraus bis zur
   Einwilligung den Platzhalter-Container. Der fuellt hier die Kartenbox
   (sonst 0 hoch, weil er nur das absolute iframe enthaelt) und traegt
   weder Rundung noch Schatten (Marxer-Stil). */
.mgc-map .cmplz-placeholder-parent {
  position: absolute;
  inset: 0;
}

.mgc-map .cmplz-blocked-content-container {
  border-radius: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   21. Blog/News-Liste & Pagination: ein Beitrag pro Zeile im
   Media-Objekt-Muster (Bild links, festes 16:9, Text rechts; ohne Bild
   volle Textbreite statt Platzhalter). Gilt auch für die Suchergebnisse,
   search.php nutzt dieselbe Karte (Entscheid Shane 13.08.). Datum
   bewusst ohne Anzeige: Dauerinserate sollen nicht veraltet wirken.
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-bottom: var(--space-5);
}

.post-card {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  transition: border-color 0.25s ease;
}

/* Beitrag ohne Bild: Textspalte übernimmt die volle Breite. */
.post-card--text {
  grid-template-columns: 1fr;
}

.post-card:hover {
  border-color: var(--line-strong);
}

/* Festes 16:9 unabhängig von der Texthöhe (align-self verhindert das
   Grid-Stretching, das die aspect-ratio überstimmen würde). */
.post-card__media {
  aspect-ratio: 16 / 9;
  align-self: start;
  overflow: hidden;
  background: var(--bg-soft);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.post-card:hover .post-card__media img {
  transform: scale(1.03);
}

.post-card__body {
  padding: 1.2rem 1.3rem 1.4rem;
  align-self: center;
}

.post-card__title {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.post-card__title a:hover {
  color: var(--accent-hover);
}

.post-card p {
  margin: 0 0 0.8rem;
}

/* Weiterlesen: Link-Optik kommt von .u-link (Fliesstext-Logik). */
.post-card__mehr {
  font-size: 0.92rem;
}

/* Mobile: gestapelt, Bild oben, Text darunter. */
@media (max-width: 40rem) {
  .post-card {
    grid-template-columns: 1fr;
  }

  .post-card__body {
    align-self: auto;
  }
}

/* --------------------------------------------------------------------------
   21b. News-Uebersicht Redesign (28.08.2026, Auftrag Max): «Aktuelles als
   Katalogblatt». Der neuste Beitrag ist der Aufmacher (zweispaltig,
   Bildbuehne links, Text rechts, Passermarken wie Pikett-/Partner-Kacheln,
   HUD-Kicker), alle weiteren stehen als kompakte Karten im auto-fill-
   Raster (3/2/1 Spalten). Bildbuehne: Freisteller (PNG) per contain mit
   Luft auf weisser Buehne, Fotos per cover. Kein Datum (Entscheid).
   -------------------------------------------------------------------------- */
.news-liste {
  padding-bottom: var(--space-5);
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease;
}

.news-card:hover {
  border-color: var(--line-strong);
}

.news-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease-out);
}

.news-card__media--foto img {
  object-fit: cover;
}

/* Freisteller: nie anschneiden, mit Luft auf der weissen Buehne. */
.news-card__media--kontur img {
  object-fit: contain;
  box-sizing: border-box;
  padding: 7%;
}

.news-card:hover .news-card__media img {
  transform: scale(1.02);
}

.news-card__body {
  padding: 1.35rem 1.5rem 1.6rem;
}

.news-card__kicker {
  margin: 0 0 1rem;
}

.news-card__title {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

.news-card__title a:hover,
.news-card__title a:focus-visible {
  color: var(--accent-hover);
}

.news-card__text {
  margin: 0 0 1rem;
}

.news-card__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  transition: color 0.2s ease;
}

.news-card__mehr span {
  transition: transform 0.25s var(--ease-out);
}

.news-card__mehr:hover,
.news-card__mehr:focus-visible {
  color: var(--accent-hover);
}

.news-card__mehr:hover span {
  transform: translateX(3px);
}

/* Aufmacher: zweispaltig, Buehne links, Text rechts mittig, Passermarken. */
.news-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
}

.news-card--featured .news-card__media {
  aspect-ratio: auto;
  min-height: 22rem;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}

.news-card--featured .news-card__body {
  align-self: center;
  padding: clamp(1.6rem, 3vw, 2.8rem);
}

.news-card--featured .news-card__title {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}

.news-card--featured .news-card__text {
  font-size: 1.02rem;
  max-width: 34rem;
}

.news-card--featured::before,
.news-card--featured::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  transition: border-color 0.2s ease;
}

.news-card--featured::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.news-card--featured::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

.news-card--featured:hover::before,
.news-card--featured:hover::after {
  border-color: var(--accent-bright);
}

.news-card--text .news-card__body {
  padding-top: 1.6rem;
}

.news-liste__label {
  margin: var(--space-4) 0 1rem;
}

.news-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
}

@media (max-width: 56rem) {
  .news-card--featured {
    grid-template-columns: 1fr;
  }

  .news-card--featured .news-card__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .news-card--featured .news-card__body {
    align-self: auto;
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: var(--space-5);
}

.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pagination .page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* Aktive Seite im Akzentblau wie der Primaer-Button (28.08., Auftrag Max),
   flach, ohne Schatten; gilt fuer alle Archive (Referenzen, News, Suche). */
.pagination .page-numbers.current {
  background: var(--accent-button);
  border-color: var(--accent-button);
  color: #fff;
}

/* Einzelbeitrag: Navigation als Katalog-Fussleiste. */
/* --------------------------------------------------------------------------
   21c. Beitragsseite (News) Redesign 28.08.2026 (Auftrag Max): kompakter
   Kopf (Titel nie mehr als ~3 Zeilen), Anriss, Bildbuehne im Vokabular der
   Uebersicht (weisse Buehne, Passermarken, PNG contain / Foto cover),
   Fliesstext in Lesebreite, Abschluss = Ruecksprung + Vor/Zurueck +
   dezenter Kontakt-CTA. Kein Datum.
   -------------------------------------------------------------------------- */
.page-header--beitrag {
  padding-bottom: var(--space-3);
}

.page-header--beitrag h1 {
  max-width: 26ch;
}

.page-header--beitrag .page-header__lead {
  margin-top: var(--space-2);
}

.beitrag {
  padding-bottom: var(--space-5); /* 28.08. (Max): kompakt, ein Sektionsabstand */
}

/* Nachtrag Max 28.08.: Bild in Lesebreite (nicht Content-Breite) und
   max. 65 vh hoch; Freisteller auf Weiss gefasst (Hairline + Passermarken),
   echte Fotos randlos. */
.beitrag__bild {
  position: relative;
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  max-height: 65vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}

.beitrag__bild--foto {
  background: transparent;
  border: 0;
}

.beitrag__bild--foto::before,
.beitrag__bild--foto::after {
  content: none;
}

.beitrag__bild img {
  display: block;
  width: 100%;
  height: 100%;
}

.beitrag__bild--foto img {
  object-fit: cover;
}

.beitrag__bild--kontur img {
  object-fit: contain;
  box-sizing: border-box;
  padding: 5%;
}

.beitrag__bild::before,
.beitrag__bild::after,
.beitrag__cta::before,
.beitrag__cta::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
}

.beitrag__bild::before,
.beitrag__cta::before {
  top: -5px;
  left: -5px;
  border-width: 1.5px 0 0 1.5px;
}

.beitrag__bild::after,
.beitrag__cta::after {
  bottom: -5px;
  right: -5px;
  border-width: 0 1.5px 1.5px 0;
}

.beitrag__text {
  padding-bottom: 0;
}

/* 28.08. (Shane): Inhaltsbilder in Beitraegen bleiben in Lesebreite wie
   das Beitragsbild - die generische .entry-content figure { max-width: none }
   (Kernseiten-Exponate) gilt hier nicht. */
.beitrag__text figure,
.beitrag__text .mgc-fig {
  max-width: var(--measure);
}

.beitrag__abschluss {
  /* 28.08. (Max): geschlossener Abschlussblock - Zeile 1 Beitragsnavigation
     als Leiste (alt | Uebersicht | neu), Zeile 2 CTA-Box in voller
     Contentbreite. Phase D: die obere Linie gehoert der Leisten-Komponente
     (border-top an .beitrag__leiste), keine freie Sektions-Trennlinie. */
  margin-top: var(--space-4);
}

.beitrag__leiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.beitrag__leiste-zelle {
  min-width: 0;
}

.beitrag__leiste-zelle--neu {
  text-align: right;
}

.beitrag__leiste-zelle a {
  display: inline-block;
  max-width: 100%;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.beitrag__leiste-zelle a:hover,
.beitrag__leiste-zelle a:focus-visible {
  color: var(--accent-hover);
}

.beitrag__leiste .hud {
  display: block;
  margin: 0 0 0.2rem;
}

.beitrag__leiste-titel {
  display: block;
  color: inherit;
}

.beitrag__zurueck {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  transition: color 0.2s ease;
}

.beitrag__zurueck:hover,
.beitrag__zurueck:focus-visible {
  color: var(--accent-hover);
}

.beitrag__cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  margin-top: var(--space-3);
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.beitrag__cta .hud {
  margin: 0 0 0.5rem;
}

.beitrag__cta-text {
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 56rem) {
  .beitrag__leiste {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    text-align: left;
  }

  .beitrag__leiste-zelle--neu {
    text-align: left;
  }

  .beitrag__leiste-zelle:empty {
    display: none;
  }

  .beitrag__zurueck {
    justify-self: start;
    order: -1;
  }

  .beitrag__cta {
    grid-template-columns: 1fr;
  }
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.post-navigation div:last-child {
  text-align: right;
}

.post-navigation a {
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.post-navigation a:hover {
  color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   22. Suche & 404
   -------------------------------------------------------------------------- */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 30rem;
}

.search-form input[type="search"] {
  flex: 1;
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 157, 225, 0.35); /* deutlich sichtbarer Fokusring. */
}

.error-404 {
  padding: var(--space-6) 0;
  text-align: left;
}


.error-404__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: var(--lh-heading);
  color: var(--bg-soft);
  -webkit-text-stroke: 2px var(--line-strong);
  margin-bottom: var(--space-2);
}


.error-404__ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

/* --------------------------------------------------------------------------
   23. Karriere/News-Hinweisbox & allgemeine Infobox
   -------------------------------------------------------------------------- */
.mgc-infobox {
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  padding: 1.2rem 1.4rem;
  margin: var(--space-3) 0;
}

.mgc-infobox p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   23b. Merkliste: Merk-Buttons, Header-Zähler, Slide-over-Panel, Druck.
   Anfrageliste, kein Shop: keine Preise, bestehende Töne (Weiss/Tinte,
   Cyan chirurgisch), keine neuen Schriften.
   -------------------------------------------------------------------------- */

/* Merk-Button auf den Karten: runde 44px-Tapfläche oben rechts über dem
   Bild. Gemerkt = gefülltes Lesezeichen in Cyan. */
.merk-button {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.merk-button:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

.merk-button__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.merk-button.is-gemerkt {
  color: var(--accent-hover);
  border-color: var(--accent);
}

.merk-button.is-gemerkt .merk-button__icon {
  fill: currentColor;
}

/* Detail-Variante (Produktseite): normaler Button mit Label im
   Meta-Raster, keine Overlay-Position. */
.merk-button--detail {
  position: static;
  width: auto;
  height: auto;
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.referenz-meta__item--aktion {
  display: flex;
  align-items: center;
}

/* Stretched-Link: der Titel-Link macht die ganze Karte klickbar, der
   Merk-Button liegt mit höherem z-index darüber. */
.produkt-card__link {
  color: var(--ink);
}

.produkt-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Fokusring auf der ganzen Karte statt nur auf dem Titel-Link - das
   outline: none aber nur dort, wo :has() den Ersatz garantiert liefert. */
@supports selector(:has(a)) {
  .produkt-card__link:focus-visible {
    outline: none;
  }
}

.produkt-card:has(.produkt-card__link:focus-visible) {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* Mietgerät-Kacheln: Bezugspunkt für den Merk-Button. */
.mietgeraet-card {
  position: relative;
}

/* Header-Zähler: nur sichtbar, wenn mindestens ein Eintrag existiert.
   Am Desktop rechts neben dem Kontakt-CTA (die Navigation rückt per
   auto-Margin nach rechts), am Mobile links vom Burger. */
.merkliste-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.55rem;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}

.merkliste-toggle[hidden] {
  display: none;
}

.merkliste-toggle:hover {
  color: var(--accent-bright);
}

.site-top.is-light .merkliste-toggle {
  color: var(--ink);
}

.site-top.is-light .merkliste-toggle:hover {
  color: var(--accent-hover);
}

.merkliste-toggle__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.merkliste-toggle__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  background: var(--accent-button);
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

@media (min-width: 60.0625rem) {
  .main-nav {
    margin-left: auto;
  }
}

/* Mobile: DOM-Reihenfolge (Logo, Zähler, Burger) ist zugleich die
   Sichtreihenfolge; der auto-Margin schiebt Zähler und Burger nach
   rechts, wenn die Navigation als Overlay aus dem Fluss fällt. */
@media (max-width: 60rem) {
  .merkliste-toggle {
    margin-left: auto;
  }
}

/* Zwischenbreiten: die Nav-Kompaktregeln (Zeile ~599) sind auf 0px Luft
   abgestimmt - der Zähler braucht dort eine schmalere Tapfläche, und die
   Nav rückt NUR dann weiter zusammen, wenn der Zähler wirklich sichtbar
   ist (:has; ohne Support degradiert nur diese schmale Bandbreite). */
@media (min-width: 60.0625rem) and (max-width: 68rem) {
  .merkliste-toggle {
    padding: 0.5rem 0.25rem;
    gap: 0.3rem;
  }

  .site-header__inner:has(.merkliste-toggle:not([hidden])) {
    gap: 0.6rem;
  }

  .site-header__inner:has(.merkliste-toggle:not([hidden])) .main-nav ul {
    gap: 0.55rem;
  }

  .site-header__inner:has(.merkliste-toggle:not([hidden])) .main-nav a {
    font-size: 0.85rem;
  }
}

/* Slide-over-Panel: nicht-modal, die Seite dahinter bleibt bedienbar
   (weitersammeln). Über dem Sticky-Header (120), unter dem Skip-Link. */
.merkliste-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  width: min(27rem, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--line-strong);
  transform: translateX(100%);
  transition: transform 0.25s var(--ease-out);
}

.merkliste-panel[hidden] {
  display: none;
}

.merkliste-panel.is-offen {
  transform: none;
}

.merkliste-panel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.merkliste-panel__titel {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.merkliste-panel__schliessen {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.merkliste-panel__schliessen:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.merkliste-panel__schliessen svg {
  width: 1.05rem;
  height: 1.05rem;
}

.merkliste-panel__inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 1.3rem 1.4rem var(--space-3);
}

.merkliste-panel__leer p:first-child {
  color: var(--ink-soft);
}

.merkliste-panel__hinweis {
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  padding: 0.85rem 1rem;
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.merkliste-bereich + .merkliste-bereich {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-strong);
}

.merkliste-bereich__titel {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.merkliste-bereich__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  background: var(--ink);
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.merkliste-bereich__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.merkliste-eintrag {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: 0.8rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.merkliste-eintrag__media {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative; /* 27.08.: Miniatur absolut aufgespannt, hohe Suchtreffer-Bilder liefen ueber */
}

.merkliste-eintrag__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 0.2rem;
}

.merkliste-eintrag__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.merkliste-eintrag__titel {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--ink);
}

a.merkliste-eintrag__titel:hover {
  color: var(--accent-hover);
}

.merkliste-eintrag__meta {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.merkliste-eintrag__felder {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.merkliste-eintrag__felder input,
.merkliste-miete-meta__feld input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
}

.merkliste-eintrag__felder input:focus,
.merkliste-miete-meta__feld input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 157, 225, 0.18);
}

.merkliste-eintrag__entfernen {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease;
}

.merkliste-eintrag__entfernen:hover {
  color: var(--ink);
}

.merkliste-eintrag__entfernen svg {
  width: 0.95rem;
  height: 0.95rem;
}

.merkliste-miete-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.4rem 0 0.9rem;
}

.merkliste-miete-meta__feld--voll {
  grid-column: 1 / -1;
}

.merkliste-miete-meta__feld label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Fuss am unteren Panelrand verankert: die Listen scrollen im Inhalt,
   die Aktionen sitzen unabhängig von der Listenlänge immer gleich. */
.merkliste-panel__fuss {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line-strong);
  background: var(--bg);
}

.merkliste-panel__fuss[hidden] {
  display: none;
}

.merkliste-fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* display: flex bzw. inline-flex (.button) überstimmen die UA-Regel
   für [hidden] - ohne diese Regeln blieben ausgeblendete Aktionsblöcke
   und Buttons sichtbar (Muster .produkt-card[hidden]). */
.merkliste-fuss__zeile[hidden],
.button[hidden] {
  display: none;
}

.merkliste-bereich__leeren {
  padding: 0.4rem 0.2rem;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.merkliste-bereich__leeren:hover {
  color: var(--ink);
}

.merkliste-panel__druck {
  margin: 0;
  font-size: 0.88rem;
}

/* Druckansicht (/merkliste/): auch am Schirm ein ruhiges A4-Gefühl. */
/* 28.08. (Auftrag Max): der Block trug max-width 50rem UND die Klasse
   .wrap (margin auto) und wurde deshalb zentriert, der Kopf stand links.
   Jetzt laeuft der Container in der vollen Rasterbreite wie der Seiten-
   kopf (eine Achse), nur die Inhalte sind auf 50rem begrenzt und beginnen
   links. Gilt fuer Leerzustand, Bereiche und Aktionen gleichermassen. */
.merkliste-druck {
  max-width: var(--wrap);
}

.merkliste-druck > * {
  max-width: 50rem;
}

.druck-bereich {
  margin-bottom: var(--space-3);
}

.druck-bereich h2 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.druck-bereich__meta {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.druck-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.druck-eintrag {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.druck-eintrag__media {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative; /* 27.08.: wie .merkliste-eintrag__media */
}

.druck-eintrag__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 0.15rem;
}

.druck-eintrag__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
}

.druck-eintrag__body span {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.merkliste-druck__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin: var(--space-3) 0 var(--space-5);
}

@media (max-width: 40rem) {
  .merkliste-panel__kopf,
  .merkliste-panel__inhalt,
  .merkliste-panel__fuss {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .merkliste-eintrag {
    grid-template-columns: 2.9rem 1fr auto;
    gap: 0.6rem;
  }

  .merkliste-eintrag__media {
    width: 2.9rem;
    height: 2.9rem;
  }
}

/* --------------------------------------------------------------------------
   23c. Peperoni: nur im dunklen Abschluss-CTA. Die fünf Broschüren-
   Früchte als EIN Freisteller-Streifen aus dem Originalfoto - Abstände,
   Grössen und Reihenfolge exakt wie im Original. Sitzt bottom-bündig
   neben den Buttons auf der Akzent-Linie, darunter die Katalog-
   Beschriftung im Exponat-Stil («Fig. 00»).
   -------------------------------------------------------------------------- */
.cta-peperoni {
  margin: 0;
  align-self: center;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 56rem) {
  .cta-banner__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
  }

  .cta-peperoni {
    justify-self: start;
  }

  .cta-peperoni__gruppe img {
    width: clamp(12rem, 60vw, 20rem);
  }
}

.cta-peperoni__gruppe {
  display: block;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px solid var(--accent);
}

.cta-peperoni__gruppe img {
  display: block;
  width: clamp(18rem, 36vw, 35rem);
  height: auto;
}

.cta-peperoni__fig {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.35);
}

/* Peperoni-CTA Claim-Pool (27.08.2026, Shane FINAL): drei Claims im
   Markup, einer aktiv (PHP-Vorwahl, Inline-Snippet waehlt pro Aufruf
   neu). Grid-Stapel, damit die Caption die Hoehe des laengsten Claims
   haelt (kein Layout-Sprung beim Wechsel der Auswahl). Keine Animation. */
.cta-peperoni__fig--pool {
  display: grid;
}

.cta-peperoni__fig--pool .cta-peperoni__claim {
  grid-area: 1 / 1;
  visibility: hidden;
}

.cta-peperoni__fig--pool .cta-peperoni__claim.ist-aktiv {
  visibility: visible;
}

/* Peperoni-CTA (2026-08-11, Entscheid: Variante B verbindlich):
   Gruppe faehrt beim Scroll-Eintritt einmal ein, die Akzent-Linie
   zeichnet von links und bleibt stehen, Hover hebt die Gruppe. */
.cta-peperoni--var-b .cta-peperoni__gruppe {
  position: relative;
  border-bottom-color: transparent;
}

.cta-peperoni__linie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 1.5px;
  background: var(--accent);
  transform-origin: left center;
}

.cta-peperoni--var-b {
  pointer-events: auto;
}

.cta-peperoni--var-b .cta-peperoni__gruppe {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}

.cta-peperoni--var-b .cta-peperoni__linie {
  transform: scaleX(0);
  transition: transform 0.7s var(--ease-out) 0.35s;
}

.cta-peperoni--var-b.ist-sichtbar .cta-peperoni__gruppe {
  opacity: 1;
  transform: none;
}

.cta-peperoni--var-b.ist-sichtbar .cta-peperoni__linie {
  transform: scaleX(1);
}

.cta-peperoni--var-b:hover .cta-peperoni__gruppe {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-peperoni--var-b .cta-peperoni__gruppe {
    border-bottom-color: var(--accent);
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cta-peperoni__linie {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   24. Utility, Druck, Reduced Motion
   -------------------------------------------------------------------------- */
.u-nowrap { white-space: nowrap; }

@media print {
  .notfall-bar,
  .site-header,
  .to-top,
  .cta-banner,
  .merkliste-panel,
  .merk-button,
  .merkliste-druck__aktionen,
  .page-template-page-merkliste .site-footer {
    display: none !important;
  }

  /* Merkliste-Druck: sauberes A4 - nur Kopfzeile, Stand und Listen. */
  .page-template-page-merkliste .page-header {
    padding: 0 0 1rem;
  }

  .page-template-page-merkliste .page-header h1 {
    font-size: 22pt;
  }

  .page-template-page-merkliste .druck-bereich h2 {
    font-size: 14pt;
  }

  .page-template-page-merkliste .merkliste-druck,
  .page-template-page-merkliste .wrap {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .page-template-page-merkliste .druck-eintrag {
    break-inside: avoid;
  }

  .page-template-page-merkliste .druck-eintrag__media img {
    mix-blend-mode: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__line > span {
    transform: none;
    animation: none;
  }

  .service-card__icon * {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Team-Seite Variante E (25.08.2026): Bereiche mit Gruppenaufnahme links und
   Einzelportraits rechts, Draht-Panel-Sprache (Cyan-Linie, HUD-Mono).
   Entwurfs-Marken (.entwurf, .team-ph) bleiben sichtbar, bis die Texte
   freigegeben sind.
   ========================================================================== */
.entry-content .team-e,
.entry-content .team-e__intro,
.entry-content .team-e__opener,
.entry-content .team-e__raster,
.entry-content .team-e__karten {
  max-width: none;
  width: 100%;
}
.entry-content .team-e__karten {
  list-style: none;
  padding: 0;
}
.entry-content .team-e__karten > li {
  max-width: none;
  padding-left: 0;
}
.entry-content .team-e__karten > li::before {
  content: none;
}
.entwurf {
  /* Block 9 (27.08.): ENTWURF-Badges aus dem Frontend nehmen. Markup
     bleibt (nachvollziehbar, welche Texte noch ohne Kundenfreigabe sind). */
  display: none;
  font: 600 0.58rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a4a00;
  background: #ffe9b8;
  border: 1px solid #e0b860;
  padding: 0.18rem 0.4rem;
  margin: 0 0.45rem 0.1rem 0;
  vertical-align: middle;
}
mark.team-ph {
  background: #ffe9b8;
  color: #5a3a00;
  padding: 0 0.2rem;
}
.team-e__text {
  margin: 0;
}
.team-e__intro {
  margin: 0.5rem 0 1.6rem;
  border: 1px solid var(--line);
  padding: 1rem 1.2rem;
  background: var(--bg);
  max-width: min(44rem, 100%) !important;
}
.team-e__intro-label {
  margin: 0 0 0.5rem;
  color: var(--accent-text);
}
/* 28.08. (Nachtrag Max): EIN Abstandswert auf /team/ = var(--space-3):
   Gap zwischen den Karten (horizontal und vertikal, Reihenabstand) und
   Abstand Gruppenbild samt Caption -> Raster. Die Caption gehoert zum
   Bild (0.75rem darunter), danach folgt nur der Standard-Gap; das
   generische .entry-content figure-Margin (space-4) greift hier nicht. */
.entry-content .team-e__opener,
.team-e__opener {
  margin: 1.4rem 0 0;
}
.team-e__opener img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line); /* 28.08. flach: Rand statt Schatten */
}
.team-e__opener figcaption {
  margin-top: 0.5rem;
}
.team-e {
  margin: 3rem 0 0;
  padding-top: 1.2rem;
  border-top: 2px solid var(--accent);
}
.team-e__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.entry-content .team-e__titel,
.team-e__titel {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: var(--lh-heading);
}
.team-e__zahl {
  margin: 0;
  color: var(--ink-soft);
}
.team-e__raster {
  /* Block 5 (27.08.): Vorspann (team-e__lead) entfaellt, Karten laufen voll. */
  display: block;
}
.team-e__lead {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.team-e__gruppe {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.team-e__gruppe img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 2px solid var(--accent);
}
.team-e__gruppe figcaption {
  padding: 0.9rem 1.2rem;
}
.team-e__ohne {
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border-bottom: 2px solid var(--accent);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  justify-content: flex-end;
  background: var(--bg-soft);
  min-height: 18rem;
}
.team-e__nb {
  margin: 0 0 auto;
  align-self: flex-start;
  font: 700 0.8rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: #7a2a00;
  background: #ffd9c2;
  border: 2px solid #d9652a;
  padding: 0.5rem 0.8rem;
}
.team-e__karten {
  /* Block 8 (27.08.): durchgehendes 3er-Raster ueber alle Personen.
     28.08. (Auftrag Max): echte Luft zwischen den Karten als Grid-Gap am
     Container (var(--space-3), horizontal = vertikal) statt der
     1px-Hairline-Fuge, in der die Portraets verschmolzen. Spaltenzahl
     pro Breakpoint unveraendert (3 / 2 / 1). */
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.team-e__card {
  background: var(--bg);
  padding: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.team-e__num {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  background: var(--dark);
  color: var(--dark-ink);
  padding: 0.15rem 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}
.team-e__media {
  display: block;
  /* Shooting-Portraets sind Hochformat 2:3; Karte uebernimmt das Verhaeltnis,
     damit das Bild voll und ungeschnitten sitzt (kein Zoom, kein Beschnitt,
     keine Nachbearbeitung noetig). Feinschliff 27.08. */
  aspect-ratio: 5 / 6; /* 28.08. (Freigabe Shane): kompakter, Anschnitt unten; 5:6 damit Bild + Name + Tags bei 1440x900 unter dem Sticky-Header in den Viewport passen (gemessen: 4:5 = 19px zu hoch) */
  overflow: hidden;
  border-bottom: 2px solid var(--accent);
  background: var(--bg-soft);
}
.team-e__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
  object-position: center top; /* oben bleibt alles, unten faellt weg */
}
.team-e__card:hover .team-e__media img {
  transform: scale(1.03);
}
.team-e__media--mono {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.team-e__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem clamp(0.9rem, 1.6vw, 1.3rem) 0;
}
.entry-content .team-e__name,
.team-e__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: var(--lh-heading);
}
.team-e__rollen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}
.team-e__rollen span {
  border: 1px solid var(--line-strong);
  padding: 0.16rem 0.45rem;
  text-transform: uppercase;
}
/* Runde 2 (Olivia-Feedback, Entscheid Shane 27.08.): das blaue Plus der
   globalen HUD-Marke (.hud::before) entfaellt vor den Rollen-Tags ersatzlos. */
.team-e__rollen.hud::before {
  display: none;
}
/* Runde 2: Info-Zeilen (Eintrittsjahr, Praesenztage) unter den Rollen-Tags,
   Mono-Mikrotypo ohne Marke, ruhig zwischen Tags und Kurztext. */
.team-e__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}
@media (max-width: 56rem) {
  .team-e__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 36rem) {
  .team-e__karten {
    grid-template-columns: 1fr;
  }

  /* Mobil (Nachtrag Max 28.08.): Bild max. ~60 % der Bildschirmhoehe,
     damit Foto + Name + Tags in EINEN Viewport passen. */
  .team-e__media {
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 36rem) {
  .team-e__karten {
    grid-template-columns: 1fr;
  }
}

/* Dienstleistungen-Uebersichtsseite (Auftrag Shane 27.08.): eigenes,
   von der Startseite abgesetztes Layout. Zweispaltige, grosse Foto-Karten
   mit Passermarken-Nummer auf dem Bild, Titel und Beschreibung darunter.
   Marxer-Industriepraezision: Hairline-Rahmen, Cyan-Feinliner beim Hover,
   Bild als Exponat. Volle Inhaltsbreite (nicht die Lesemass-Kappe). */
.entry-content .dienst-grid {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.2vw, 2rem);
  margin: var(--space-4) 0 var(--space-2);
  list-style: none;
  padding: 0;
}
.entry-content .dienst-grid > .dienst-card {
  max-width: none;
  padding-left: 0;
}
.entry-content .dienst-grid > .dienst-card::before { content: none; }
.dienst-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.35s var(--ease-out);
}
.dienst-card:hover {
  border-color: var(--line-strong);
}
.dienst-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
}
.dienst-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.dienst-card:hover .dienst-card__media img { transform: scale(1.04); }
.dienst-card__num {
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
  color: #fff;
  padding: 0 0.5rem 0.35rem 0.7rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.dienst-card__num::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 2.4rem;
  height: 3px;
  background: var(--accent);
}
.dienst-card__body {
  padding: clamp(1.2rem, 2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.dienst-card__titel {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
}
.dienst-card__text {
  margin: 0;
  line-height: var(--lh-text);
  flex: 1;
}
.dienst-card__mehr {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.dienst-card:hover .dienst-card__mehr { color: var(--accent-hover); }
@media (max-width: 46rem) {
  .entry-content .dienst-grid { grid-template-columns: 1fr; }
}