/* =========================================================
   TOKENS — Farbpalette 1:1 aus dem bestehenden Bulma-fremden
   Referenz-Stylesheet übernommen, hier als Basis für die
   Bulma-CSS-Variablen (--bulma-*) und eigene Komponenten.
   ========================================================= */
:root {
  /* Sagt dem Browser, dass die Seite Hell/Dunkel selbst vollständig
     handhabt (Umschalter oben, [data-theme] steuert alle Farben).
     Ohne das schaltet z.B. Chromes automatische Dunkel-Einfärbung
     bei manchen Elementen (grossflächige <a>, Formularfelder) eigene
     Farben dazu, unabhängig vom eigenen Umschalter — sichtbar u.a. an
     schwarzen Kacheln im Overlay-Menü trotz Hellmodus. */
  color-scheme: light;

  /* Brand */
  --blue-900: #00263D;
  --blue-700: #004F9F;
  --blue-100: #E1EFF7;
  --cyan:     #0093D6;
  --cyan-soft:#4FC0EE;

  /* Light theme */
  --bg:        #F7F9FA;
  --bg-elev:   #FFFFFF;
  --bg-subtle: #EDF1F4;
  --bg-inset:  #E2E8ED;
  --ink:       #0A141C;
  --ink-2:     #263039;
  --ink-3:     #5D6C77;
  --ink-4:     #6E7C86;
  --rule:      #DDE3E8;
  --rule-strong: #B9C2CA;
  --accent:    var(--blue-900);
  --link:      #006B9E;
  --link-hover: var(--blue-900);

  /* Type */
  --f-sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-serif:'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-fast: 180ms cubic-bezier(.2,.7,.2,1);
  --t-med:  360ms cubic-bezier(.2,.7,.2,1);
  /* Weiche Auslauf-Kurve für ruhige, "teure" Bewegungen (Karten, Symbole) */
  --svc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --topbar-h: 68px;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Abstand von der Unterkante der Topbar bis zur Rubrik im Seitenkopf.
     Jeder Kopfbereich zieht diesen einen Wert, damit das türkise Label auf
     jeder Seite an derselben Stelle beginnt, egal ob die Seite mit einem
     Hero, einer Karte oder einem Pagehead anfängt. */
  --head-top: clamp(24px, 3vw, 40px);

  /* Senkrechter Innenabstand der Abschnitte auf unternehmen.html. Zwei
     benachbarte Abschnitte ergeben zusammen den Abstand zwischen ihnen,
     bei 1440 px also 144 px. Die Vorlagen brachten 128 px je Seite mit,
     macht 256 px Lücke — das fiel gegenüber den übrigen Seiten auf, die
     mit Bulmas .section bei rund 96 px liegen. */
  --section-y: clamp(44px, 5.2vw, 72px);

  /* Typografie des Seitenkopfs. Titel und Lede ziehen überall dieselben
     Werte, egal ob die Seite mit hero-plain, hero-card, split-hero oder
     pagehead beginnt. Vorher hatte jede Kopfart ihre eigene Staffelung,
     nämlich vier verschiedene Titelgrößen und vier Ledegrößen. */
  --head-h1:       clamp(32px, 4.2vw, 52px);
  --head-h1-lh:    1.08;
  --head-lede:     17px;
  --head-lede-max: 58ch;

  /* Footer (immer dunkel, unabhängig vom Theme) */
  --footer-bg: #061219;
  --footer-fg: rgba(234,241,245,0.7);
  --footer-fg-strong: #EAF1F5;
  --footer-rule: rgba(255,255,255,0.08);
  --footer-accent: var(--cyan);

  /* ── Bulma-Variablen auf die Markenpalette gemappt ────────
     Bulma 1.x liest seine Farben aus CSS Custom Properties,
     dadurch reicht dieses Mapping ohne eigenen Sass-Build. */
  --bulma-scheme-main: var(--bg);
  --bulma-scheme-main-bis: var(--bg-elev);
  --bulma-background: var(--bg-subtle);
  --bulma-border: var(--rule);
  --bulma-border-hover: var(--rule-strong);
  --bulma-text: var(--ink-2);
  --bulma-text-strong: var(--ink);
  --bulma-link: var(--link);
  --bulma-link-hover: var(--link-hover);
  --bulma-primary: var(--blue-900);
  --bulma-primary-invert: #fff;
  /* Bulma 1.x errechnet Button-/Tag-/Notification-Farben intern aus
     --bulma-primary-h/-s/-l (siehe .button.is-primary im CDN-CSS), nicht
     aus --bulma-primary selbst — das ist dort nur ein daraus abgeleiteter
     hsla()-Wert. Ohne diese drei Bausteine blieb z.B. .button.is-primary
     auf Bulmas Standard-Türkis (171deg) stehen, obwohl --bulma-primary
     schon korrekt auf Navy zeigte. Werte = HSL von --blue-900 (#00263D). */
  --bulma-primary-h: 202.6deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 12%;
  --bulma-primary-invert-l: 100%;
  --bulma-info: var(--cyan);
  --bulma-info-invert: #fff;
  /* Gleicher Mechanismus für --bulma-info (--cyan, #0093D6). */
  --bulma-info-h: 198.8deg;
  --bulma-info-s: 100%;
  --bulma-info-l: 42%;
  --bulma-info-invert-l: 100%;
  --bulma-family-primary: var(--f-sans);
  --bulma-family-code: var(--f-mono);
  --bulma-body-background-color: var(--bg);
  --bulma-body-color: var(--ink-2);
  --bulma-radius: 10px;
  --bulma-radius-large: 16px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #061219;
  --bg-elev:   #0D1A22;
  --bg-subtle: #12212A;
  --bg-inset:  #172A34;
  --ink:       #EAF1F5;
  --ink-2:     #C6D2DA;
  --ink-3:     #93A2AC;
  --ink-4:     #66757F;
  --rule:      rgba(255,255,255,0.08);
  --rule-strong: rgba(255,255,255,0.18);
  --accent:    #E1EFF7;
  --blue-100:  #16283A;
  --link:       var(--cyan-soft);
  --link-hover: #FFFFFF;
}

/* Auf schmalen Bildschirmen rückt der Seitenkopf näher an die Topbar.
   Geändert wird das Token, nicht die einzelne Kopfart, damit Hero, Karte,
   Pagehead und Startseite gemeinsam wandern. */
@media (max-width: 768px) { :root { --head-top: 20px; } }

/* =========================================================
   RESET / BASE
   ========================================================= */
html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--f-sans);
}
a { color: inherit; }
[hidden] { display: none !important; }
body.menu-open { overflow: hidden; }

.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Rubrik über der Seitenüberschrift — das türkise Label, das ursprünglich
   nur im Konstruktions-Hero stand. Ein einziges Muster für alle Seitenköpfe,
   damit jede Seite oben gleich anfängt: Mono, Versalien, Akzentfarbe, keine
   Linie. .eyebrow und .kicker sind bewusst Synonyme, weil beide Schreibweisen
   im Bestand vorkommen. Die Farbe zieht --link, wechselt also im Dunkelmodus
   automatisch von #006B9E auf #4FC0EE. */
.eyebrow,
.pagehead .kicker {
  display: block; margin-bottom: 14px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--link);
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  /* Leichter als vorher (war saturate(180%) blur(14px)): eine volle Breite,
     fixierte Leiste mit backdrop-filter zwingt den Browser, den Weichzeichner
     bei jedem Scroll/Repaint neu zu berechnen - u. a. Ursache für spürbares
     Ruckeln/Hängenbleiben (z. B. beim Ziehen einer Textmarkierung) in
     Firefox und Chrome. will-change hält die Ebene vorberechnet, statt sie
     bei jedem Frame neu anzulegen. */
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  will-change: backdrop-filter;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-med);
}
.topbar.is-scrolled { border-bottom-color: var(--rule); }
.topbar.menu-open-state { background: var(--bg); border-bottom-color: var(--rule); }

.topbar-left { display: flex; align-items: center; gap: 40px; height: 100%; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 4px; }

.brand { display: flex; align-items: center; }
.brand-logo { height: 27px; width: auto; }
.brand-logo--white { display: none; }
[data-theme="dark"] .brand-logo--blue { display: none; }
[data-theme="dark"] .brand-logo--white { display: block; }
.topbar.menu-open-state .brand-logo--blue { display: block; }
.topbar.menu-open-state .brand-logo--white { display: none; }

.primary-nav { display: flex; align-items: center; gap: 2px; height: 100%; list-style: none; margin: 0; padding: 0; }
.primary-nav > li { height: 100%; }
.nav-link {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: inherit; position: relative;
  transition: color var(--t-fast); white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px;
  height: 1px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast);
}
.primary-nav > li:hover .nav-link::after,
.nav-link.is-current::after { transform: scaleX(1); }

/* Dropdown für "Lösungen" — zeigt bei Hover/Fokus die vier Lösungsbereiche.
   Nur relevant, solange .primary-nav selbst sichtbar ist (ab 1180px);
   darunter übernimmt die Unterliste im Overlay-Menü (.menu-sublist). */
.nav-drop { position: relative; }
/* Für Dropdowns nahe am rechten Rand der Leiste (Unternehmen): Karte am
   rechten statt am linken Rand des Auslösers ausrichten, sonst liefe sie
   auf schmaleren Desktop-Breiten (ab 1180px) über den Viewport hinaus. */
.nav-drop--end .nav-drop-panel { left: auto; right: 0; }
.nav-link--drop { gap: 4px; }
.nav-drop-caret { width: 11px; height: 11px; flex: none; transition: transform var(--t-fast); }
.nav-drop:hover .nav-drop-caret,
.nav-drop:focus-within .nav-drop-caret { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute; top: 100%; left: 0;
  padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear var(--t-fast);
  pointer-events: none;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition-delay: 0s;
}
.nav-drop-panel-inner {
  min-width: 340px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--bulma-radius-large);
  box-shadow: 0 24px 48px -24px rgba(6,18,25,0.28);
  padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .nav-drop-panel-inner { box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6); }

.nav-drop-item {
  display: block;
  padding: 11px 14px; border-radius: 10px;
  transition: background var(--t-fast);
}
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: var(--bg-subtle); }
.nav-drop-item-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.nav-drop-item.is-current .nav-drop-item-title { color: var(--link); }

.nav-actions { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
.lang {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  padding: 8px 10px; border-radius: 999px;
}
.lang button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 2px 4px; opacity: 0.5; transition: opacity var(--t-fast); }
.lang button.is-active { opacity: 1; }
.lang button:hover { opacity: 1; }
.lang button[aria-disabled="true"] { opacity: 0.34; cursor: not-allowed; }
.lang button[aria-disabled="true"]:hover { opacity: 0.34; }
.lang span { opacity: 0.3; }
.lang--menu { display: inline-flex !important; padding: 0; margin-bottom: 28px; font-size: 13px; letter-spacing: 0.12em; }
.lang--menu button { padding: 6px 8px; }
/* Seit es die englische Fassung gibt, ist die andere Sprache ein Link auf
   die Schwesterseite und die aktuelle nur noch Text. Gleiche Optik wie die
   fruehere Knopf-Fassung, damit sich in der Leiste nichts verschiebt. */
.lang a, .lang .lang-current { font: inherit; color: inherit; padding: 2px 4px; opacity: 0.5; transition: opacity var(--t-fast); }
.lang .lang-current { opacity: 1; }
.lang a:hover { opacity: 1; color: inherit; }
.lang--menu a, .lang--menu .lang-current { padding: 6px 8px; }

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: none; border: 0; color: inherit; cursor: pointer;
  transition: background var(--t-fast);
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn svg { width: 17px; height: 17px; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 16px; margin-left: 6px;
  border-radius: 999px;
  background: var(--blue-900); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; transition: background var(--t-fast), transform var(--t-fast);
}
.nav-cta:hover { background: var(--cyan); transform: translateY(-1px); color: #fff; }
/* Auf kontakt.html führt die Schaltfläche auf die Seite, auf der man
   schon steht. Sie bleibt sichtbar (der Weg zum Formular ist auch von
   dort aus nützlich), zeigt das aber an — sonst wirkt sie tot. */
.nav-cta.is-current { background: var(--cyan); }
.nav-cta.is-current:hover { transform: none; }
.nav-cta svg { width: 14px; height: 14px; }
[data-theme="dark"] .nav-cta { background: var(--cyan); color: #04121A; }
[data-theme="dark"] .nav-cta:hover { background: #fff; }

.menu-btn {
  display: none; align-items: center; gap: 10px;
  padding: 7px 13px 7px 15px; margin-left: 6px;
  border-radius: 999px; border: 1px solid currentColor;
  background: none; color: inherit; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  transition: background var(--t-fast);
}
.menu-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.menu-btn .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-btn .bars span { display: block; width: 13px; height: 1.5px; background: currentColor; }

@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  .lang { display: none; }
}

/* =========================================================
   OVERLAY MENU
   ========================================================= */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg); color: var(--ink);
  transform: translateY(-100%);
  transition: transform 540ms cubic-bezier(.7,0,.2,1);
  overflow-y: auto;
}
.menu.is-open { transform: translateY(0); }
.menu-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 96px var(--gutter) 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  min-height: 100%;
}
.menu-close { position: absolute; top: 14px; right: var(--gutter); }
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-list a {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: clamp(24px, 4vw, 40px); font-weight: 600; letter-spacing: -0.02em;
  transition: padding-left var(--t-fast), color var(--t-fast);
}
.menu-list a:hover { padding-left: 10px; color: var(--blue-900); }
[data-theme="dark"] .menu-list a:hover { color: var(--link); }
.menu-list a .num { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-3); font-weight: 400; }

/* Unterpunkte von "Lösungen" im Overlay-Menü — immer sichtbar statt
   ausklappbar, damit hier kein zweites (Touch-taugliches) Hover-Verhalten
   nachgebaut werden muss. Eigenes Schriftbild statt der großen Zeilen
   von .menu-list a, damit die vier Punkte klar als Unterebene lesbar sind. */
.menu-group { display: flex; flex-direction: column; }
.menu-sublist { display: flex; flex-direction: column; padding: 0 0 10px 2px; }
.menu-list .menu-sublist a {
  display: block; border-bottom: 0;
  padding: 9px 0 9px 18px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-2);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.menu-list .menu-sublist a:hover { padding-left: 24px; color: var(--blue-900); }
[data-theme="dark"] .menu-list .menu-sublist a:hover { color: var(--link); }

.menu-side .side-h { font-size: 15px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.005em; }
.menu-side .mono { margin-bottom: 12px; }
.menu-side p, .menu-side a.line { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.menu-side a.line { display: block; padding: 4px 0; transition: color var(--t-fast); }
.menu-side a.line:hover { color: var(--blue-900); }
[data-theme="dark"] .menu-side a.line:hover { color: var(--link); }

@media (max-width: 880px) {
  .menu-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 88px; }
}

/* =========================================================
   PLATZHALTER-INHALT (Vorschau der Navbar in Kontext)
   ========================================================= */
.hero.is-brand {
  padding-top: calc(var(--topbar-h) + var(--head-top));
  background: var(--bg);
}
/* Bulmas .hero-body bringt oben eigene 3rem mit. Die werden hier abgeräumt,
   sonst sässe die Rubrik auf der Startseite tiefer als auf allen anderen. */
.hero.is-brand .hero-body { padding-top: 0; }

/* =========================================================
   FOOTER — bewusst immer dunkel, unabhängig vom Theme-Toggle
   (--footer-* Tokens werden in [data-theme="dark"] nicht neu
   definiert, bleiben also auf beiden Seiten der Umschaltung gleich).
   Grid läuft über Bulmas columns/column, nicht über eigenes CSS-Grid.
   ========================================================= */
footer[data-theme-zone="dark"] {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 88px 0 32px;
  font-size: 15px;
}

/* Komplettes Lockup als Vektor (assets/img/SME-Logos/sme-industrial-
   solutions_weiss.svg, SME + Nashorn + „Industrial Solutions“ in einer
   Datei) statt Bild + eigenem Text-Span, der Schriftzug ist jetzt Teil
   des SVG-Pfads, kein Nachbau per text-align-last mehr nötig.
   width:100% und height:auto skalieren das Lockup selbst, das Seiten-
   verhältnis kommt aus der viewBox der Datei. */
.footer-logo {
  display: block;
  width: min(380px, 100%); text-decoration: none;
}
.footer-logo img { display: block; width: 100%; height: auto; }
.footer-brand .addr {
  margin-top: 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--footer-fg); opacity: 0.75; line-height: 1.8;
}

/* Die Spaltenköpfe im Footer sind bewusst KEINE Überschriften-Tags.
   Der Footer ist eine Wegweiser-Liste, keine Inhaltsgliederung — ein <h5>
   direkt nach der <h1> ergäbe für Suchmaschinen und Screenreader eine
   Hierarchie mit drei übersprungenen Ebenen. Optik unverändert. */
.footer-col .footer-heading {
  color: var(--footer-fg-strong); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 20px;
}
.footer-col a { display: block; padding: 5px 0; color: var(--footer-fg); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--footer-fg-strong); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--footer-rule);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--footer-fg); opacity: 0.7; text-transform: uppercase;
}
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a { color: var(--footer-fg); transition: color var(--t-fast); }
.footer-bottom .legal a:hover { color: var(--footer-fg-strong); }

/* =========================================================
   PAGEHEAD — einheitlicher Kopf für Unterseiten
   ========================================================= */
.pagehead { padding: calc(var(--topbar-h) + var(--head-top)) 0 clamp(40px, 5vw, 56px); }
/* Kopf, der nur die Rubrik trägt: den Abstand nach unten bringt dann der
   folgende Abschnitt mit, hier reicht wenig. Sonst stünden zwischen
   Rubrik und Inhalt über 150 px Luft. */
.pagehead--label { padding-bottom: clamp(12px, 1.6vw, 20px); }

/* Maß und Abstand folgen dem Kicker, damit die Überschrift auf Übersichts-
   und Detailseite auf derselben Höhe steht. */
.pagehead .crumbs,
.cover-hero .crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 12px; line-height: 1.2; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.pagehead .crumbs a,
.cover-hero .crumbs a { color: var(--ink-3); transition: color var(--t-fast); }
.pagehead .crumbs a:hover { color: var(--ink); }
.pagehead .crumbs .sep { color: var(--ink-4); }
/* Die aktuelle Seite im Brotkrumenpfad trägt denselben Akzent wie der
   Kicker, weil sie auf Detailseiten an genau dessen Stelle steht. */
.pagehead .crumbs .here { color: var(--link); font-weight: 600; }
/* Der Kicker im Seitenkopf wird oben gemeinsam mit .eyebrow gesetzt. */
/* Titel und Lede aller vier Kopfarten in einer Regel, damit sie sich nicht
   wieder auseinanderentwickeln. Die Maße stehen als Token im :root. */
.pagehead h1,
.hero-plain h1,
.hero-card h1,
.split-hero h1,
.cover-hero h1,
.hero.is-brand .title {
  font-family: var(--f-sans); font-weight: 600; letter-spacing: -0.03em;
  line-height: var(--head-h1-lh);
  font-size: var(--head-h1); color: var(--ink); max-width: 22ch;
}
.pagehead .lede,
.hero-plain .lede,
.hero-card .lede,
.split-hero .lede,
.block-head .lede,
.cover-hero .lede,
.hero.is-brand .subtitle {
  margin-top: 20px; font-size: var(--head-lede); line-height: 1.6;
  color: var(--ink-2); max-width: var(--head-lede-max);
}
/* Das kursiv gesetzte Serifenwort in Überschriften, überall gleich. */
.pagehead h1 em,
.hero-plain h1 em,
.hero-card h1 em,
.split-hero h1 em,
.hero.is-brand .title em,
.zebra-text h3 em, .cta-band h2 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ink-3);
}

/* Split-Hero: Titel/Text links, freigestellte Abbildung rechts, kein Kasten
   dahinter — die Renderings haben Alphakanal und tragen ihren eigenen
   Hintergrund nicht, ein Rahmen würde sie unnötig einschachteln. */
/* Kein eigener Abstand unter dem Titel — der Abstand zur Lede kommt aus der
   gemeinsamen Kopf-Regel (margin-top: 20px), sonst stünden hier 36px. */
/* Vertikale Zentrierung ausdrücklich, nicht nur über Bulmas .is-vcentered.
   Die Klasse allein reicht hier nicht zuverlässig, deshalb steht die Regel
   am Element und zusätzlich als align-self an der Spalte. Damit sitzt die
   Textspalte auf halber Höhe der Abbildung, egal wie lang der Text wird. */
.split-hero { align-items: center; }
.split-hero > .column { align-self: center; }

/* Die Abbildungen sind freigestellte Renderings mit sehr unterschiedlichem
   Seitenverhaeltnis (Vertikalfoerderer hochkant, Schwerlastfoerderer breit).
   Bei width:100%;height:auto ergab das je Seite eine andere Bildhoehe, beim
   Vertikalfoerderer bis zu 1730px. Die Bühne haelt das Seitenverhaeltnis der
   Spalte fest, das Bild wird darin zentriert eingepasst, also überall gleich
   hoch, unabhaengig vom Motiv. */
.split-hero-media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.split-hero-img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Fließtext unter der Lede. Kleiner als die Lede, damit die Rangfolge Titel,
   Lede, Text erhalten bleibt, und in derselben Spaltenbreite. Er füllt die
   Textspalte neben einer hohen Abbildung. */
.split-hero .lede + p {
  margin-top: 18px; font-size: 16px; line-height: 1.7;
  color: var(--ink-2); max-width: var(--head-lede-max);
}

/* =========================================================
   FÖRDERGUT-RASTER — Icon + Titel je Produktart
   ========================================================= */
.icon-grid-head { max-width: 640px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.icon-grid-head h2 { font-family: var(--f-sans); font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.icon-grid-head p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
/* Titel ohne Untertext dürfen breiter laufen als die 640px-Spalte, die
   eigentlich für den Lesefluss des Absatzes darunter gedacht ist —
   sonst bricht eine sonst einzeilige Überschrift unnötig um. */
.icon-grid-head--wide { max-width: 820px; }

.icon-item { text-align: center; }
.icon-item .icon-box { width: 96px; height: 96px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.icon-item .icon-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.icon-item .icon-box.is-placeholder { border: 1px dashed var(--rule-strong); border-radius: 14px; background: var(--bg-subtle); }
.icon-item .icon-box.is-placeholder span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
.icon-item h3 { font-family: var(--f-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* Isometrische Fördergut-Piktogramme aus assets/img/foerdergut-icons/.
   Jedes Motiv liegt dort als zwei fertige Dateien vor, -hell (Strichfarbe
   #00263D) und -dunkel (#4FC0EE), eingebunden als <img> genau wie das
   Logo in der Topbar (.brand-logo--blue/--white). <img> lädt die Datei
   als eigenständiges Bild, CSS kann ihre stroke-Farbe deshalb nicht mehr
   per currentColor überschreiben, daher die zwei Dateien statt einer.
   Vorteil gegenüber dem frueheren Inline-Sprite: der Browser laedt jede
   Datei einmal und nutzt sie über alle Seiten hinweg aus dem Cache.
   88px in der 96er-Box: das Motiv ist im Raster auf 52 von 64 Einheiten
   eingepasst, steht optisch also bei rund 72px und damit auf derselben
   Höhe wie das freigestellte Palettenfoto daneben. */
.icon-item .icon-box .fg-icon { width: 88px; height: 88px; }
.icon-item .icon-box .fg-icon--dunkel { display: none; }
[data-theme="dark"] .icon-item .icon-box .fg-icon--hell { display: none; }
[data-theme="dark"] .icon-item .icon-box .fg-icon--dunkel { display: block; }


/* =========================================================
   BLOCKKOPF — linksbündige Rubrik plus grosse Überschrift für
   Abschnitte, die eine eigene Kapitelmarke tragen.
   Die Überschrift zieht bewusst die Kopf-Token (--head-h1),
   damit hier keine fünfte Textgrösse entsteht.
   ========================================================= */
.block-head { margin-bottom: clamp(40px, 6vw, 88px); }
.block-head .mono { display: block; margin-bottom: 16px; }
.block-head h2 {
  font-family: var(--f-sans); font-weight: 600; letter-spacing: -0.03em;
  line-height: var(--head-h1-lh); font-size: var(--head-h1);
  color: var(--ink); max-width: 22ch;
}
.block-head h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ink-3); }

/* =========================================================
   WORKCARD — quadratische Bildkachel mit eingeschnittenem
   Pfeilfeld unten rechts, darunter Kennziffer und Titel.
   Raster läuft über Bulmas columns, die Kachel selbst ist
   ein Link, damit die ganze Fläche klickbar ist (statt eines
   verschachtelten <a> nur um den Pfeil, was ungültig wäre).
   ========================================================= */
.workcard { display: block; text-decoration: none; color: inherit; }
.workcard-media {
  position: relative; aspect-ratio: 1 / 1; margin-bottom: 22px;
  border-radius: 20px; overflow: hidden;
  background: var(--bg-inset); border: 1px solid var(--rule);
}
.workcard-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--svc-ease);
}
.workcard:hover .workcard-media img { transform: scale(1.04); }

/* Das Pfeilfeld ist als Ausschnitt in der Bildecke gedacht, nicht als
   Symbol auf dem Foto — sonst verschwindet es je nach Motiv. */
.workcard-arrow {
  position: absolute; right: 0; bottom: 0;
  width: clamp(56px, 4.5vw, 76px); height: clamp(56px, 4.5vw, 76px);
  display: grid; place-items: center;
  background: var(--bg); color: var(--ink);
  border-top-left-radius: 20px;
  transition: background var(--t-fast), color var(--t-fast);
}
.workcard:hover .workcard-arrow { background: var(--ink); color: var(--bg); }
.workcard-arrow svg { width: 34px; height: 34px; }

.workcard-media.is-todo { display: grid; place-items: center; border-style: dashed; background: var(--bg-subtle); }
.workcard-media.is-todo .empty {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 24px;
}
.workcard h3 {
  font-family: var(--f-sans); font-size: 21px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); max-width: 22ch;
}
.workcard p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 34ch; }

@media (max-width: 768px) {
  .workcard-media { border-radius: 16px; }
  .workcard-arrow { border-top-left-radius: 16px; }
}

/* =========================================================
   COVER-HERO — grosse abgerundete Bildkarte als Seitenkopf
   der Fertigungs-Unterseiten. Umsetzung eines Tailwind-Entwurfs,
   aber an das Haus angebunden: die Überschrift zieht --head-h1,
   die Lede --head-lede (siehe Sammelregel weiter oben), und die
   Karte beginnt bei --head-top wie jeder andere Seitenkopf.
   Der Text liegt auf einem Foto, deshalb ist die Karte immer
   dunkel und die Schrift immer hell, unabhängig vom Theme.
   ========================================================= */
/* Die Karte läuft über die volle Breite und trägt den .container INNEN.
   Nur so steht der Text exakt auf derselben linken Kante wie auf
   den Produktseiten und konstruktion.html. Läge die Karte im container und
   hätte eigenen Innenabstand, würde sie den Text um genau diesen Abstand
   nach rechts schieben. Aus demselben Grund sitzt die Karte oben bündig
   unter der Topbar und bringt --head-top als eigenen Innenabstand mit,
   damit die Rubrik auf derselben Höhe beginnt wie überall sonst. */
.cover-hero-section { padding-top: var(--topbar-h); }
.cover-hero {
  position: relative; overflow: hidden;
  background: var(--footer-bg);
  padding-top: var(--head-top);
  padding-bottom: var(--head-top);
}
.cover-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Abdunklung, damit die Schrift auf jedem Motiv lesbar bleibt.
   Kein negativer z-index, der würde hinter den Kartengrund rutschen. */
.cover-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,18,25,0.62) 0%, rgba(6,18,25,0.84) 100%);
}
/* Der Reiter bleibt oben links und sitzt damit auf derselben Kante und
   Höhe wie die Rubrik auf den Produktseiten und konstruktion.html.
   Überschrift und Lede stehen mittig, waagerecht über margin-inline und
   senkrecht über margin-block: auto. Die beiden auto-Ränder teilen sich
   den freien Platz unter dem Reiter zu gleichen Teilen, das zentriert den
   Block im Band, ohne ihn aus dem Fluss zu nehmen. Die Bandhöhe kommt aus
   der Mindesthöhe hier, nicht aus einem festen Innenabstand. */
.cover-hero-inner {
  position: relative; z-index: 2; text-align: left;
  display: flex; flex-direction: column;
  min-height: clamp(320px, 44vh, 520px);
}
.cover-hero-title { margin-block: auto; width: 100%; }
.cover-hero h1 {
  color: var(--footer-fg-strong);
  text-align: center; margin-inline: auto;
}
.cover-hero .lede {
  color: rgba(234,241,245,0.74);
  text-align: center; margin-inline: auto;
}
/* Reiter auf dunklem Grund: hell statt --ink-3, aktueller Punkt im Akzent */
.cover-hero .crumbs { color: rgba(234,241,245,0.6); }
.cover-hero .crumbs a { color: rgba(234,241,245,0.6); }
.cover-hero .crumbs a:hover { color: var(--footer-fg-strong); }
.cover-hero .crumbs .sep { color: rgba(234,241,245,0.35); }
.cover-hero .crumbs .here { color: var(--cyan-soft); }


/* =========================================================
   MASCHINEN-DURCHLAUF — eine Maschine nach der anderen, beim
   Scrollen durchgeschaltet. Links das Bild, rechts die
   Bauteilabmessungen. Vorherige und nächste Maschine schauen
   oben und unten angeschnitten und abgedunkelt heraus.

   Aufbau: .machines-scroll ist ein hoher Behälter, in dem
   .machines-stage klebt (position: sticky). Während der Behälter
   am Bildschirm vorbeiläuft, zählt das Skript den Index hoch und
   setzt ihn als --i auf die Spur. Die Spur verschiebt sich um
   --i mal Kartenhöhe, das ist der weiche Übergang. Es wird kein
   Scrollen abgefangen, die Seite scrollt normal weiter.

   Ab Tablet abwärts fällt die ganze Mechanik weg: die Karten
   stehen dann einfach untereinander, alle sichtbar, ohne Kleben
   und ohne Verschiebung. Auf dem Handy ist das die brauchbarere
   Darstellung und kostet kein Skript.
   ========================================================= */
.machines {
  --machine-h: clamp(400px, 56vh, 600px);
  /* Anschnitt der Nachbarkarten. Muss grösser sein als der weiche
     Rand der Maske unten, sonst ist von Vor- und Nachschau nichts
     zu sehen — genau das war vorher der Fehler. */
  --machine-peek: clamp(92px, 13vh, 148px);
}
.machines-scroll { position: relative; height: calc(var(--n, 9) * 62vh); }
.machines-stage { position: sticky; top: calc(var(--topbar-h) + 28px); }

.machines-viewport {
  position: relative; overflow: hidden;
  /* Waagerechter Innenabstand fängt Bulmas negative Spaltenränder auf,
     sonst schneidet overflow:hidden je 12px links und rechts ab.
     Die Höhe ist zusätzlich am Fenster gedeckelt, damit der klebende
     Bereich nie höher wird als der Bildschirm. */
  padding-inline: 12px;
  height: min(calc(var(--machine-h) + 2 * var(--machine-peek)),
              calc(100vh - var(--topbar-h) - 72px));
  /* Weiche Kante oben und unten, damit die Nachbarkarten auslaufen
     statt hart abgeschnitten zu wirken. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.machines-track {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translateY(calc(var(--machine-peek) - var(--i, 0) * var(--machine-h)));
  transition: transform 720ms var(--svc-ease);
}
/* Das Bild füllt die ganze Kartenhöhe. Das ist der Schlüssel für die
   Vor- und Nachschau: der angeschnittene Streifen der Nachbarkarte zeigt
   dadurch Bild und nicht Leerraum. Vorher war der Inhalt in der Karte
   zentriert, oben und unten blieb Luft, und genau die stand im Anschnitt.
   Nebenbei löst das auch den Versatz ab der zweiten Maschine, weil die
   Bildhöhe nicht mehr von der Menge der Achsdaten daneben abhängt. */
.machine {
  height: var(--machine-h);
  opacity: 0.3; transition: opacity 520ms var(--svc-ease);
}
.machine.is-active { opacity: 1; }
.machine > .columns { height: 100%; margin: 0; align-items: stretch; }
.machine > .columns > .column { padding: 0 12px; display: flex; }

.machine-shot {
  width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden;
  background: var(--bg-inset); border: 1px solid var(--rule);
}
/* Die Daten stehen mittig zur Bildhöhe, unabhängig von ihrer Menge */
.machine-data { display: flex; flex-direction: column; justify-content: center; width: 100%; }
/* Ohne das zieht die Flex-Spalte das Abzeichen auf volle Breite */
.machine-data > .machine-tag { align-self: flex-start; }
.machine-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.machine-shot.is-todo {
  display: grid; place-items: center; border-style: dashed; background: var(--bg-subtle);
}
.machine-shot.is-todo .empty {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 20px; line-height: 1.6;
}

/* Bulmas .tag zieht seine Farben aus --bulma-*-h/-s/-l und trifft unser
   Marken-Mapping nicht, deshalb hier ein eigenes Abzeichen. */
.machine-tag {
  display: inline-block; border-radius: 999px; padding: 6px 14px;
  background: var(--blue-100); color: var(--blue-700);
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
[data-theme="dark"] .machine-tag { background: rgba(0,147,214,0.16); color: var(--cyan-soft); }
.machine h3 {
  font-family: var(--f-sans); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); margin: 16px 0 4px;
}
.machine .machine-type { display: block; margin-bottom: 4px; }

/* Achsdaten untereinander statt im waagerechten Raster. Die Beschriftung
   trägt dieselbe Schrift wie die Rubrik im Seitenkopf, also Mono in
   Versalien und in der Akzentfarbe --link, und steht als Zuordnung vorn. */
.machine-specs { display: grid; margin-top: 26px; border-top: 1px solid var(--rule); }
.machine-specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.machine-specs .k {
  flex: none;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--link);
}
.machine-specs .v {
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); text-align: right;
}

/* Punktleiste, zeigt die Position und springt auf Klick */
.machines-dots { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.machines-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: var(--rule-strong); cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.machines-dot:hover { transform: scale(1.35); }
.machines-dot.is-active { background: var(--cyan); transform: scale(1.35); }

/* Scrollhinweis: zwei versetzte Pfeile, die nach unten wandern. Sie
   verschwinden, sobald die letzte Maschine erreicht ist (.is-done vom
   Skript), damit der Hinweis nicht ins Leere zeigt. */
/* Der Blockkopf steht hier enger als sonst. Grund: über der ersten
   Maschine liegt zusätzlich das leere Anschnittfeld der Ansicht, das bei
   Maschine 1 noch keine Vorgängerkarte zeigt. Beides zusammen ergab sonst
   einen sehr grossen Abstand zur ersten Abbildung. */
.machines .block-head { margin-bottom: clamp(6px, 1.2vw, 18px); }

.machines-cue {
  display: flex; justify-content: center;
  margin-top: 16px;
  transition: opacity 400ms var(--t-fast);
}
.machines-cue.is-done { opacity: 0; pointer-events: none; }
.machines-cue-arrows { display: block; width: 24px; height: 28px; color: var(--cyan); }
.machines-cue-arrows path { animation: cue-drift 2000ms var(--svc-ease) infinite; }
.machines-cue-arrows path:nth-child(2) { animation-delay: 220ms; }

@keyframes cue-drift {
  0%   { opacity: 0;   transform: translateY(-5px); }
  35%  { opacity: 1;   transform: translateY(0); }
  70%  { opacity: 0;   transform: translateY(5px); }
  100% { opacity: 0;   transform: translateY(5px); }
}

/* Zentrierte Variante des Blockkopfs, über Bulmas has-text-centered */
.block-head.has-text-centered h2 { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .machines-track { transition: none; }
  .machine { transition: none; }
  .machines-cue-arrows path { animation: none; opacity: 1; }
}

/* Ab Tablet abwärts: Mechanik aus, alles untereinander */
@media (max-width: 1023px) {
  .machines-scroll { height: auto; }
  .machines-stage { position: static; }
  .machines-viewport {
    height: auto; overflow: visible; padding-inline: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .machines-track { position: static; transform: none; }
  .machine { height: auto; opacity: 1; margin-bottom: clamp(32px, 6vw, 56px); }
  .machine:last-child { margin-bottom: 0; }
  .machine > .columns { height: auto; margin: -0.75rem; }
  .machine > .columns > .column { padding: 0.75rem; display: block; }
  .machine-shot { height: auto; aspect-ratio: 4 / 3; }
  .machines-dots, .machines-cue { display: none; }
}

/* =========================================================
   LEISTUNGSDATEN — Vergleichstabelle über die vier Schritte.
   Ab Desktop als Tabelle, darunter als Karten je Schritt.
   Umgeschaltet wird über Bulmas is-hidden-touch/is-hidden-desktop,
   nicht über eigene Media Queries. Die Farben kommen aus den
   Token, damit die Tabelle den Dunkelmodus mitmacht — Bulmas
   eigene Tabellenfarben werden dabei überschrieben, was ohne
   !important geht, weil .spec-table .table spezifischer ist.
   ========================================================= */
.spec-table {
  border: 1px solid var(--rule); border-radius: 20px; overflow: hidden;
  background: var(--bg-elev);
}
.spec-table .table { background: transparent; color: var(--ink-2); margin: 0; width: 100%; }
.spec-table .table thead tr { background: var(--footer-bg); }
.spec-table .table thead th {
  border: 0; text-align: center; padding: 20px 22px;
  font-size: 14px; font-weight: 600; color: var(--footer-fg-strong);
}
/* Erste Kopfzelle ist nur Beschriftung der Zeilenspalte, nicht gleichwertig */
.spec-table .table thead th:first-child {
  width: 260px; color: rgba(234,241,245,0.55);
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.spec-table .table tbody th,
.spec-table .table tbody td {
  vertical-align: middle; text-align: center; padding: 24px 22px;
  border-bottom: 1px solid var(--rule); border-top: 0; border-left: 0; border-right: 0;
  font-size: 14px; line-height: 1.6;
}
.spec-table .table tbody th { background: var(--bg-subtle); color: var(--ink); font-weight: 600; }
.spec-table .table tbody td { color: var(--ink-2); }
.spec-table .table tbody tr:last-child th,
.spec-table .table tbody tr:last-child td { border-bottom: 0; }
.spec-table .table tbody tr:hover td { background: var(--bg-subtle); }

.spec-val  { display: block; font-weight: 600; color: var(--ink); }
.spec-note { display: block; margin-top: 5px; font-size: 13px; color: var(--ink-3); }
/* Noch offene Angaben, kursiv und zurückgenommen. Siehe Legende darunter. */
.is-offen  { color: var(--ink-3); font-style: italic; }

.spec-card {
  height: 100%; overflow: hidden; background: var(--bg-elev);
  border: 1px solid var(--rule); border-radius: 18px;
}
.spec-card > header { background: var(--footer-bg); padding: 15px 20px; }
.spec-card > header h3 {
  margin: 0; text-align: center; color: var(--footer-fg-strong);
  font-family: var(--f-sans); font-size: 14px; font-weight: 600;
}
.spec-card dl { margin: 0; padding: 0 20px; }
.spec-card dl > div { padding: 16px 0; text-align: center; border-bottom: 1px solid var(--rule); }
.spec-card dl > div:last-child { border-bottom: 0; }
.spec-card dt {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.spec-card dd { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.spec-legend { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* Breite Variante: viele Zeilen, vier Spalten. Statt auf Karten
   umzuschalten bleibt hier die Tabelle und wird auf schmalen Bildschirmen
   seitlich scrollbar. Grund: die Maschinen stehen darüber im Durchlauf
   ohnehin schon einzeln untereinander, Karten wären eine Wiederholung. */
.spec-table--wide .table { min-width: 760px; }
.spec-table--wide .table tbody th,
.spec-table--wide .table tbody td { padding: 18px 20px; }
.spec-table--wide .table tbody th { white-space: nowrap; }
.spec-table--wide .table thead th:first-child { width: auto; }

/* Bulmas .is-rounded ist an button/image/tag/input gebunden und wirkt auf
   einem freien span nicht — das Icon-Abzeichen bekommt seine Rundung hier.
   Aus demselben Grund NICHT has-background-primary im Markup verwenden:
   diese Hilfsklasse zieht ihre Farbe aus --bulma-primary-h/-s/-l statt aus
   --bulma-primary, unser Marken-Mapping (siehe :root) greift dort also nicht. */
.icon-badge {
  border-radius: 9999px;
  background: var(--blue-900);
  color: #fff;
}
[data-theme="dark"] .icon-badge {
  background: var(--bg-inset);
  color: var(--cyan-soft);
}

/* =========================================================
   PRODUKTRASTER — Übersichtskarten ohne Preis/Warenkorb
   ========================================================= */
.prodgrid { display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.prodcard {
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 500ms cubic-bezier(.16,1,.3,1), box-shadow 500ms cubic-bezier(.16,1,.3,1), border-color var(--t-fast);
}
.prodcard:hover { transform: translateY(-4px); border-color: var(--rule-strong); box-shadow: 0 30px 56px -30px rgba(6,18,25,0.28); }
[data-theme="dark"] .prodcard:hover { box-shadow: 0 30px 56px -26px rgba(0,0,0,0.6); }
.prodcard .shot { aspect-ratio: 4/3; background: var(--bg-inset); overflow: hidden; }
.prodcard .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prodcard .body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.prodcard h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--ink); }
.prodcard p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; }
.prodcard .keyfig { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prodcard .keyfig .val { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-align: right; }
.prodcard .keyfig .cap { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.prodcard .arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--link); }
/* Karten ohne .keyfig (keine oder bewusst nicht genannte Kennzahl) sollen
   den Pfeil trotzdem unten in der Karte verankern statt ihn direkt unter
   den Text rutschen zu lassen — sonst stehen die Links reihenweise auf
   unterschiedlicher Höhe, je nachdem wie lang der Kurztext ist. Der
   Trennstrich bleibt dabei erhalten, auch ohne Kennzahl darüber. */
.prodcard p + .arrow { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }
.prodcard .arrow svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.prodcard:hover .arrow svg { transform: translateX(4px); }

/* Bandkarte: läuft über die volle Breite des Rasters und verweist aus einer
   Sparte heraus auf eine andere Seite, statt ein Produkt zu zeigen. Deshalb
   Bild links und Text rechts statt der üblichen Kachelform. Unter 700 px
   Kartenbreite klappt sie in die normale Reihenfolge zurück. */
.prodcard.is-band { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.prodcard.is-band .shot { aspect-ratio: auto; flex: 0 0 38%; max-width: 440px; }
.prodcard.is-band .shot img { height: 100%; }
.prodcard.is-band .body { justify-content: center; padding: clamp(24px, 3.2vw, 44px); }
.prodcard.is-band h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; margin-bottom: 12px; }
.prodcard.is-band p { max-width: 62ch; margin-bottom: 0; }
.prodcard.is-band .arrow { margin-top: 18px; }
@media (max-width: 760px) {
  .prodcard.is-band { flex-direction: column; }
  .prodcard.is-band .shot { flex: none; max-width: none; aspect-ratio: 16 / 9; }
}

/* Gruppen im Produktraster. Die Hauptgruppe trägt .block-head und damit die
   Kopf-Token, sie liest sich also wie eine Seitenüberschrift. Die Untergruppe
   steht eine Stufe kleiner und mit Linie darüber, damit sie erkennbar zur
   Gruppe darüber gehört und nicht als eigenes Kapitel gelesen wird. */
.prodgroup + .prodgroup { margin-top: clamp(72px, 9vw, 132px); }
.prodgroup .block-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.prodgroup-sub {
  margin: clamp(48px, 5.5vw, 78px) 0 clamp(22px, 2.6vw, 32px);
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.prodgroup-sub h3 {
  font-family: var(--f-sans); font-size: clamp(20px, 2.2vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink);
}
.prodgroup-sub p {
  margin-top: 8px; font-size: 16px; line-height: 1.6;
  color: var(--ink-2); max-width: var(--head-lede-max);
}

/* Karte mit eigener Seite, aber noch ohne Kachelbild. Dieselbe leere Fläche
   wie bei .prodcard.is-todo, die Karte bleibt jedoch klickbar. Sobald das
   Rendering geschnitten ist, das img einsetzen und is-empty entfernen. */
.prodcard .shot.is-empty { display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); }
.prodcard .shot .empty {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 24px;
}

/* Produktfamilie ohne eigene Seite: informiert, aber nicht klickbar */
.prodcard.is-todo { border-style: dashed; cursor: default; }
.prodcard.is-todo:hover { transform: none; box-shadow: none; border-color: var(--rule-strong); }
.prodcard.is-todo .shot { display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); }
.prodcard.is-todo .shot .empty { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 24px; }
.prodcard.is-todo h3, .prodcard.is-todo p { color: var(--ink-3); }
.prodcard.is-todo .badge {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

/* =========================================================
   BÜHNE — freigestellte Produktabbildung (Alphakanal)
   ========================================================= */
.stage {
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(178deg, color-mix(in srgb, var(--bg-elev) 70%, var(--bg-inset)) 0%, var(--bg-inset) 100%);
  border: 1px solid var(--rule);
}
[data-theme="dark"] .stage { background: linear-gradient(178deg, var(--bg-subtle) 0%, var(--bg-inset) 100%); }
.stage img { display: block; width: 100%; height: 100%; }
/* Zwei Abstufungen der Bühne, für Motive, die ohne Kasten besser wirken.
   --noline behält den Verlauf und die Rundung, nimmt nur die Rahmenlinie.
   --bare nimmt alles, das Bild steht dann frei auf der Seitenfläche. Im
   Dunkelmodus verliert ein dunkles Rendering damit seinen Untergrund,
   deshalb ist --bare dort bewusst nicht angewendet. */
.stage--noline { border-color: transparent; }
.stage--bare { background: none; border: 0; border-radius: 0; }
[data-theme="dark"] .stage--bare { background: none; }

.stage--fit { aspect-ratio: 16/9; }
.stage--fit img { object-fit: contain; padding: clamp(16px, 3vw, 46px); }
.stage--crop img { object-fit: cover; }
.stage--4x3 { aspect-ratio: 4/3; }
.stage--2x1 { aspect-ratio: 2/1; }
.stage--3x2 { aspect-ratio: 3/2; }
.stage--16x9 { aspect-ratio: 16/9; }
@media (max-width: 700px) { .stage--2x1 { aspect-ratio: 3/2; } }
.stage-cap {
  display: block; margin-top: 12px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

/* Zwei Bühnen nebeneinander, für Zeilen, deren Aussage ein Vergleich ist,
   etwa zwei Ausführungen desselben Bauprinzips. Unter 420 px Spaltenbreite
   stehen sie untereinander, sonst würde jedes Motiv zu klein. */
.stage-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 2vw, 32px); }
.stage-pair figure { margin: 0; }
.stage-pair .stage-cap { margin-top: 8px; }

/* =========================================================
   KENNZAHLENZEILE
   ========================================================= */
.keyline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: clamp(20px, 3vw, 44px); border-top: 1px solid var(--ink); margin-top: 36px; }
.keyline > div { padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.keyline .k { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.keyline .v { font-size: clamp(19px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.keyline .v.offen { font-size: 15px; font-weight: 400; color: var(--ink-3); }

/* =========================================================
   ZEBRA — Bild-/Textzeilen im Wechsel
   ========================================================= */
.zebra { display: grid; gap: clamp(56px, 8vw, 110px); }
/* Eigener, spürbar größerer Abstand für die Mehr-Fragen-Zeilen (loesungen.html):
   Titel + mehrere Fragen + Link ziehen optisch mehr Gewicht als eine normale
   .zebra-row, deshalb braucht es hier mehr Luft zwischen den Zeilen, nicht
   weniger. */
.zebra--tight { gap: clamp(48px, 7vw, 88px); }
.zebra-row { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.zebra-row .zebra-media { grid-column: 1; grid-row: 1; }
.zebra-row .zebra-text  { grid-column: 2; grid-row: 1; }
.zebra-row.is-flipped .zebra-media { grid-column: 2; }
.zebra-row.is-flipped .zebra-text  { grid-column: 1; }

/* Nur in den Ein-Frage-Zeilen (loesungen.html) soll der Text die volle
   Bildhöhe ausnutzen: Titel oben bündig mit dem Bild, Link unten bündig,
   die Fragen dazwischen. Die anderen .zebra-Seiten (Produktdetails) haben
   deutlich kürzeren Text und bleiben bei der vertikalen Zentrierung. */
/* Die allgemeine .zebra-row hat bewusst ungleiche Spalten (1.15fr Bild,
   1fr Text) für Fließtext-Zeilen. Hier sollen alle vier Bildkästen aber
   exakt gleich groß sein, auch in den gedrehten (is-flipped) Zeilen, in
   denen das Bild sonst in der schmaleren rechten Spalte landen würde —
   deshalb gleiche Spaltenbreite nur für .zebra--tight. */
.zebra--tight .zebra-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.zebra--tight .zebra-text { display: flex; flex-direction: column; }
.zebra--tight .zebra-questions { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Der allgemeine 22ch-Deckel unter .zebra-text h3 ist für lange Fließtext-
   Überschriften gedacht; "Auftragsfertigung Maschinenbau" (30 Zeichen) bricht
   darunter um. Die Titel hier sind kurze Eigennamen, keine Sätze — sie
   brauchen die Breitenbegrenzung nicht. */
.zebra--tight .zebra-text h3 { max-width: none; }

/* Zeile über die volle Breite, Text oben, Abbildung darunter. Gedacht für
   Zeilen, die zwei Motive nebeneinander zeigen. In der halben Zeilenbreite
   bliebe je Motiv nur rund die Hälfte, das ist für ein Gerät zu wenig. */
.zebra-row--wide { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px); }
.zebra-row--wide .zebra-text  { grid-column: 1; grid-row: 1; max-width: 62ch; }
.zebra-row--wide .zebra-media { grid-column: 1; grid-row: 2; }
.zebra-text .mono { display: block; margin-bottom: 14px; }
.zebra-text h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; color: var(--ink); max-width: 22ch; }
.zebra-text p { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.zebra-text p + p { margin-top: 12px; }
/* Die Frage soll den Betrachter sich wiedererkennen lassen, deshalb dunkler
   und etwas kräftiger als die anschließende Antwort. */
.zebra-text .zebra-question { color: var(--ink); font-weight: 500; }

/* Link zur Unterseite, mittig unter dem Text jeder Zeile. Eigene Zeile statt
   Teil des Fließtexts, damit er als Handlung erkennbar bleibt. Als
   button is-primary is-outlined gesetzt (gleiches Design wie "Mehr über
   uns erfahren" auf index.html) statt des früheren .zebra-link-Textlinks
   — die Klasse ist damit ungenutzt und entfernt. */
.zebra-cta { margin-top: 20px; text-align: center; }
@media (max-width: 900px) {
  .zebra { gap: clamp(40px, 8vw, 64px); }
  /* .zebra--tight .zebra-row (zwei Klassen, siehe oben) ist spezifischer als
     die bloße .zebra-row hier und würde die einspaltige Zeile sonst wieder
     zweispaltig machen — deshalb explizit mit aufgeführt statt nur .zebra-row. */
  .zebra-row, .zebra-row.is-flipped, .zebra--tight .zebra-row { grid-template-columns: 1fr; gap: 20px; }
  .zebra-row .zebra-media, .zebra-row.is-flipped .zebra-media { grid-column: 1; grid-row: 1; }
  .zebra-row .zebra-text, .zebra-row.is-flipped .zebra-text { grid-column: 1; grid-row: 2; }
}

/* =========================================================
   CTA-BAND — dunkler Abschlussblock
   ========================================================= */
.cta-band { background: var(--footer-bg); color: #EAF1F5; border-radius: 20px; padding: clamp(36px, 5vw, 64px); }
.cta-band h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.cta-band p { color: rgba(234,241,245,0.75); font-size: 16px; max-width: 54ch; margin-bottom: 26px; }

/* =========================================================
   HERO-KARTE — Foto + Text in einer abgerundeten Karte,
   direkt unter der Topbar (ersetzt den .pagehead auf Seiten,
   die mit einem Bild statt einem Fliesstext-Kopf beginnen).
   ========================================================= */
.hero-card-section { padding-top: calc(var(--topbar-h) + var(--head-top)); }
.hero-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 1px 2px rgba(6,18,25,0.04), 0 30px 56px -34px rgba(6,18,25,0.22);
}
[data-theme="dark"] .hero-card { box-shadow: none; }
.hero-card h2 { font-family: var(--f-sans); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(26px, 3vw, 36px); color: var(--ink); }
.hero-card .buttons { margin-top: 30px; }

/* =========================================================
   PROJEKTLEITER-KONTAKT — Marken-Badge rechts, zwei
   Kontaktkarten der Projektleiter darunter.
   ========================================================= */
/* Test: nebeneinander statt gestapelt, in Markenblau statt Weiß.
   .mark--light/--dark und .slogan--light/--dark nutzen jetzt beide
   die offiziellen Vektorfassungen: assets/img/SME-Logos/sme-icon-
   nashorn.svg (bzw. die daraus abgeleitete Weiß-Fassung
   sme-icon-nashorn_weiss.svg — siehe SME-Logos/HERKUNFT.md) und
   „assets/img/SO MACHEN WIR DAS/so-machen-wir-das_blau-004F9F.svg“
   bzw. „…_weiss.svg“. */
/* Test: kein grauer Kasten mehr, Bilder direkt auf dem weißen
   Kartengrund, dafür etwas größer. */
.pm-badge {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 28px; padding: clamp(12px, 2vw, 24px) 0;
}
.pm-badge img { display: block; }
/* Beide Logos folgen derselben Höhe statt getrennter Breiten-/Höhenregeln
   (Nashorn fest in Pixeln, Spruch elastisch über flex-grow): das ließ sie
   nur bei einer einzigen zufälligen Spaltenbreite gleich hoch wirken, bei
   jeder anderen driftete der Spruch sichtbar ab (Höhe skalierte mit der
   verfügbaren Breite, Nashorn blieb starr). Jetzt bestimmt eine
   gemeinsame, mit dem Fenster mitschrumpfende Höhe beide Bilder, die
   Breite ergibt sich aus dem eigenen SVG-Seitenverhältnis. clamp-Grenzen
   mit Playwright gegen die tatsächliche .pm-badge-Breite je Breakpoint
   geprüft (engster Punkt: 317px bei 769px Fensterbreite, dem Start von
   is-6-tablet) — 150px Maximalhöhe wie ursprünglich beim Nashorn allein,
   erreicht ab ca. 1430px Fensterbreite, darunter linear über 10,5vw,
   überall mit Sicherheitsabstand zum Überlaufen. Der Kachel-Kontext
   erlaubt jetzt bewusst wieder die volle Größe, weil die begleitenden
   Lede-Texte auf mehreren Seiten einen Zeilenumbruch bekommen haben
   (siehe „Terminen"-Umbruch in den jeweiligen HTML-Dateien) und die Zeile
   dadurch mehr Höhe zur Verfügung hat. */
.pm-badge .mark,
.pm-badge .slogan { flex: none; height: clamp(72px, 10.5vw, 150px); width: auto; }
.pm-badge .slogan { max-width: 400px; }
/* Blaue Fassung auf hellem Grund, weiße Fassung auf dunklem —
   gleiches Muster wie .brand-logo--blue/--white in der Topbar. */
.pm-badge .mark--dark, .pm-badge .slogan--dark { display: none; }
[data-theme="dark"] .pm-badge .mark--light, [data-theme="dark"] .pm-badge .slogan--light { display: none; }
[data-theme="dark"] .pm-badge .mark--dark, [data-theme="dark"] .pm-badge .slogan--dark { display: block; }

.pm-panel { background: var(--bg-subtle); border-radius: 20px; padding: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3vw, 40px); }

.pm-card { display: flex; align-items: stretch; gap: 18px; }
.pm-avatar {
  flex: none; width: 88px; border-radius: 14px;
  border: 1px dashed var(--rule-strong); background: var(--bg-elev);
  display: none; place-items: center; color: var(--ink-3);
}
.pm-avatar svg { width: 24px; height: 24px; }
.pm-role { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.pm-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.pm-card h3.is-todo { color: var(--ink-3); font-weight: 500; }
.pm-contact { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.pm-contact li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }
.pm-contact li.is-todo { color: var(--ink-3); }
.pm-contact svg { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
/* Echte Kontaktangaben (Mail/Telefon) statt "folgt"-Platzhalter: Link
   erbt die gedeckte Textfarbe statt Bulmas Standard-Blau, gleiches
   Muster wie .menu-side a.line und .footer-col a. */
.pm-contact a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.pm-contact a:hover { color: var(--blue-900); }
[data-theme="dark"] .pm-contact a:hover { color: var(--link); }
.hero-card-media { border-radius: 16px; overflow: hidden; }
.hero-card-media img { display: block; width: 100%; height: auto; }

/* =========================================================
   HERO OHNE KARTE — Text + Bild frei auf dem Seitengrund,
   kein umschliessender Kasten. Bild bewusst im 16:9-Format,
   passend zum bereits so zugeschnittenen Foto.
   ========================================================= */
.hero-plain-section { padding: calc(var(--topbar-h) + var(--head-top)) 0 clamp(48px, 6vw, 72px); }

/* WICHTIG für die Höhengleichheit der Seitenköpfe.
   Bulmas .columns.is-vcentered zentriert die Textspalte gegen die Bildspalte
   daneben. Das Bild ist 16:9 einer halben Spalte, seine Höhe hängt also an
   der Fensterbreite. Dadurch wanderte der ganze Kopf beim Skalieren nach
   oben und unten, und je nach Textlänge stand er auf jeder Seite anders.
   Die Textspalte wird deshalb oben verankert. Das Bild darf mittig bleiben,
   die Spaltenhöhe bestimmt es ohnehin. Als .columns.hero-plain geschrieben,
   damit die Regel dieselbe Spezifität hat wie .columns.is-vcentered und
   später im Stylesheet steht, also gewinnt. */
.columns.hero-plain > .column:first-child,
.columns.split-hero > .column:first-child,
.columns.hero-card-cols > .column:first-child { align-self: flex-start; }

.hero-plain .lede p + p { margin-top: 14px; }
.hero-plain .buttons { margin-top: 30px; }

.check-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; }
.check-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.check-list span { color: var(--ink-2); font-size: 16px; line-height: 1.55; }

.hero-plain-media { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--rule); }
.hero-plain-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   ABSCHNITTSKOPF — Kennziffer-Spalte + Titel/Lede, für
   Abschnitte mit eigenem Namen (z. B. "Leistungsumfang").
   ========================================================= */
.section-head { display: grid; grid-template-columns: 220px 1fr; gap: 48px; margin-bottom: 64px; }
.section-head .num {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--ink-3); padding-top: 14px; border-top: 1px solid var(--ink);
  display: inline-block; justify-self: start;
}
.section-head h2 {
  font-family: var(--f-sans); font-size: clamp(26px, 3vw, 36px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.02; max-width: 18ch; color: var(--ink);
}
/* Auch der Abschnittskopf zieht die Lede-Maße aus den Token, sonst wäre es
   die fünfte Textgröße auf derselben Seite. */
.section-head .lede { font-size: var(--head-lede); line-height: 1.6; color: var(--ink-2); max-width: var(--head-lede-max); margin-top: 22px; }
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
}

/* =========================================================
   LEISTUNGS-KACHELN (.svc) — Leistungsumfang als Karten.
   Das Raster läuft über Bulmas columns/column (is-6-tablet
   is-4-desktop = 3 pro Zeile ab Desktop), nicht über eigenes
   CSS-Grid. min-height sorgt zusammen mit Bulmas Flex-Stretch
   dafür, dass alle Kacheln gleich hoch bleiben, unabhängig
   von unterschiedlich langem Titel- oder Fliesstext.
   ========================================================= */
.svc {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 16px;
  padding: 38px 34px 40px; min-height: 348px;
  box-shadow: 0 1px 2px rgba(6,18,25,0.03), 0 10px 30px -14px rgba(6,18,25,0.10);
  transition: transform 700ms var(--svc-ease), box-shadow 700ms var(--svc-ease), border-color 400ms ease;
  text-decoration: none; color: inherit;
}
.svc:hover { transform: translateY(-6px); border-color: rgba(0,147,214,0.32); box-shadow: 0 2px 6px rgba(6,18,25,0.04), 0 30px 56px -22px rgba(6,18,25,0.24); }
[data-theme="dark"] .svc { box-shadow: none; }
[data-theme="dark"] .svc:hover { box-shadow: 0 30px 56px -26px rgba(0,0,0,0.65); }

/* Titel steht neben statt unter dem Symbol */
.svc-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.svc-icon {
  flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--blue-100);
  display: grid; place-items: center; color: var(--blue-700);
  transition: background 500ms var(--svc-ease), color 500ms var(--svc-ease), transform 700ms var(--svc-ease);
}
.svc:hover .svc-icon { background: var(--cyan); color: #FFFFFF; transform: scale(1.06); }
.svc-icon svg { width: 26px; height: 26px; }
[data-theme="dark"] .svc-icon { background: rgba(0,147,214,0.14); color: var(--cyan-soft); }
[data-theme="dark"] .svc:hover .svc-icon { background: var(--cyan); color: #061219; }

.svc h3 { font-family: var(--f-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; color: var(--ink); }
/* Titel bleibt oben verankert (unterschiedliche Umbruchhöhen lassen sich
   nicht vermeiden), der Text darunter wird in der verbleibenden Fläche
   vertikal zentriert — sonst hängt kurzer Text oben mit viel Leerraum
   darunter, während langer Text die Karte fast ausfüllt, und die sechs
   Karten wirken uneinheitlich statt wie ein Satz. */
.svc-body { display: flex; align-items: center; flex: 1; }
.svc p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }

@media (max-width: 560px) {
  .svc { min-height: 0; padding: 32px 28px 34px; }
}

/* =========================================================
   ÜBER-UNS-BÜHNE (.about-stage) — breiter Block: links
   Überschrift, Fliesstext, Textlink und vier Kennzahl-Karten,
   rechts eine Markenfläche mit dem senkrecht gesetzten
   Schriftzug SME, Lichtschein und Bögen; auf ihrer linken
   Kante ein Oval mit dem Nashorn.

   Die Geometrie ist 1:1 aus der Tailwind-Vorlage übernommen,
   die Bruchzahlen stehen jeweils als Kommentar daneben:

     Abschnitt   pt-12 / md:py-24 / lg:py-32   48 / 96 / 128 px
     Fläche      w-3/12 / lg:max-w-sm / xl:max-w-md
                                               25% / 384 / 448 px
     Kapsel      w-72 auf max-w-sm             = 75% der Fläche
                 Seitenverhältnis im Entwurf   = 3:4 stehend
                 rounded-full auf 3:4          = Kapsel, keine Ellipse
                 top-1/2 left-0 -translate-1/2 = mittig auf der Kante
     Lichtschein w-186 h-186 mr-20 -mt-20      744 px, 80 px versetzt
     Textspalte  max-w-md / xl:max-w-2xl       448 / 672 px
     Kennzahlen  max-w-xl, p-6, rounded-3xl    576 / 24 / 24 px
     Telefonband h-112, Kreis w-64, mb-64      448 / 256 / 256 px

   Nicht übernommen ist die Typografie (in der Vorlage bis
   text-7xl): die Überschrift dieses Blocks würde damit die h1
   des Seitenkopfs überstimmen. Sie folgt weiter der Staffelung
   der übrigen Seiten.

   Was inhaltlich an die Stelle der Vorlagenteile tritt:
     violet-800   → --stage-panel (hell grau, dunkel --blue-900)
     violet-500   → --link, Kartenhover in --cyan
     Planet       → S, M, E untereinander, aus dem Logo
                    geschnitten (sme-letter-s/m/e.png)
     image-circle → Nashorn im Oval, hell/dunkel umschaltend
                    wie das Wappentier in .pm-badge
     double-lines → zwei Bögen als Inline-SVG, keine eigene Datei

   Farben laufen über lokale Variablen, die für [data-theme="dark"]
   einmal geschlossen neu gesetzt werden. Der Block folgt damit dem
   Hell/Dunkel-Umschalter, ohne dass die Farblogik über ein Dutzend
   Einzelregeln verstreut ist.

   Der Block steht bewusst nicht als erstes auf der Seite: die
   Topbar ist durchscheinend und hat keine Zonenumschaltung,
   über der Bühne läuft deshalb ein normaler .pagehead.
   ========================================================= */
.about-stage {
  --stage-bg:          var(--bg);
  /* Der Kasten nimmt dieselbe Fläche wie die .svc-Kästchen auf den
     Leistungsseiten: --bg-elev mit Haarlinie, hell wie dunkel. */
  --stage-panel:       var(--bg-elev);
  --stage-panel-border: var(--rule);
  /* Bögen in der Akzentfarbe — dasselbe Cyan, das die aktive Seite in
     der Kopfzeile unterlegt (.nav-link.is-current::after). */
  --stage-line:        var(--cyan);
  /* Neutrale Kartenlinien; die Hauptstraßen ziehen --stage-line. */
  --stage-map:         rgba(6,18,25,0.62);
  --stage-title:       var(--ink);
  --stage-text:        var(--ink-2);
  --stage-cap:         var(--ink-3);
  --stage-card-bg:     var(--bg-elev);
  --stage-card-border: var(--rule);
  --stage-card-edge:   var(--rule);
  --stage-card-shadow: 0 1px 2px rgba(6,18,25,0.03), 0 10px 30px -14px rgba(6,18,25,0.10);
  --stage-card-lift:   0 2px 6px rgba(6,18,25,0.04), 0 30px 56px -22px rgba(6,18,25,0.24);
  --stage-glow:        rgba(0,147,214,0.16);
  --stage-disc:        var(--blue-900);
  --stage-disc-border: rgba(6,18,25,0.10);
  --stage-disc-shadow: 0 40px 80px -34px rgba(6,18,25,0.40);

  position: relative;
  overflow: hidden;
  background: var(--stage-bg);
  /* Oben knapp, weil direkt darüber die Rubrik des Seitenkopfs steht und
     der Kasten zu ihr gehört. Unten der normale Abschnittsabstand. */
  padding: clamp(16px, 2.4vw, 32px) var(--gutter) var(--section-y);
}
[data-theme="dark"] .about-stage {
  --stage-map:         rgba(234,241,245,0.58);
  --stage-title:       #FFFFFF;
  --stage-text:        rgba(234,241,245,0.68);
  --stage-cap:         rgba(234,241,245,0.74);
  --stage-card-bg:     rgba(255,255,255,0.07);
  --stage-card-border: rgba(255,255,255,0.10);
  /* Obere Kante etwas heller: so fängt eine Glasfläche das Licht. */
  --stage-card-edge:   rgba(255,255,255,0.18);
  --stage-card-shadow: none;
  --stage-card-lift:   0 30px 56px -26px rgba(0,0,0,0.65);
  --stage-glow:        rgba(0,147,214,0.55);
  --stage-disc:        #E1EFF7;
  --stage-disc-border: rgba(255,255,255,0.16);
  --stage-disc-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
}

/* Text und Kasten liegen im selben Bezugssystem: der Kasten wird gegen
   diesen Rahmen positioniert und nicht gegen den Abschnitt. Dadurch endet
   er an derselben Kante wie jeder andere Inhalt der Seite. */
.about-stage-frame { position: relative; }
.about-stage-content { position: relative; z-index: 10; }
/* max-w-md, ab 1280 max-w-2xl. Diese Breiten sind der Grund, warum der
   Text ohne eigenen Freiraum rechts an der Fläche vorbeikommt — genau
   wie in der Vorlage. */
.about-stage-inner { max-width: 448px; }

/* Seit der Seitenkopf nur noch die Rubrik trägt, ist dies die h1 der
   Seite. Sie bleibt trotzdem unter --head-h1: sie steht in einem Block
   neben Karte und Kennzahlen, nicht frei über der Seite.

   Schriftgrade stehen in rem statt px, damit eine hochgesetzte
   Grundschriftgröße im Browser durchschlägt. Laufweite und
   Zeilenabstand sind größenabhängig: große Schrift wirkt zu weit
   gelaufen und braucht negative Laufweite und engeren Durchschuss,
   kleine Schrift das Gegenteil. Ein fester Wert für beide Enden ist
   an einem Ende immer falsch. Umgeschaltet wird bei 1024 px, dort
   ist der Grad ungefähr in der Mitte seiner clamp-Spanne. */
.about-stage h1 {
  font-family: var(--f-sans);
  font-size: clamp(1.875rem, 3.8vw, 2.875rem);   /* 30 bis 46 px */
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--stage-title);
  margin-bottom: 16px;               /* mb-4 */
}
.about-stage h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--link); }
.about-stage .lede {
  font-size: 1.125rem;               /* 18 px */
  line-height: 1.625;                /* leading-relaxed */
  color: var(--stage-text);
  max-width: 576px;                   /* max-w-xl */
}
.about-stage .lede p + p { margin-top: 14px; }

@media (min-width: 1024px) {
  .about-stage h1 { line-height: 1.06; letter-spacing: -0.032em; }
}

/* ── Kennzahl-Karten ─────────────────────────────────────
   Im Dunkelmodus Milchglas wie in der Vorlage (backdrop-blur
   über dem Lichtschein), im Hellmodus eine normale Karte wie
   .svc. Beides derselbe Regelsatz, nur andere Variablen. */
.about-stats { margin-top: 64px; max-width: 576px; }   /* mb-16 / max-w-xl */
.about-stats .columns { --bulma-column-gap: 1rem; }    /* -mx-4 / px-4 */

.stat-card {
  position: relative; isolation: isolate;
  height: 100%;
  padding: 24px;                     /* p-6 */
  border-radius: 24px;               /* rounded-3xl */
  background: var(--stage-card-bg);
  border: 1px solid var(--stage-card-border);
  border-top-color: var(--stage-card-edge);
  box-shadow: var(--stage-card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* 400 ms mit auslaufender Kurve, kein Überschwingen: das entspricht
     einer kritisch gedämpften Feder mit Antwortzeit 0,4 s. Vorher waren
     es 700 ms, das wirkt beim Überfahren träge. Überschwingen wäre hier
     auch falsch, weil keine Geste mit Schwung vorausgeht. */
  transition: background-color 400ms var(--svc-ease), border-color 400ms ease,
              transform 400ms var(--svc-ease);
}
/* Der Schlagschatten des angehobenen Zustands liegt auf einem Pseudo-
   element und wird über opacity ein- statt als box-shadow umgerechnet.
   opacity und transform laufen im Compositor, box-shadow nicht. */
.stat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  box-shadow: var(--stage-card-lift);
  opacity: 0;
  transition: opacity 400ms var(--svc-ease);
}
.stat-card:hover { background-color: var(--cyan); border-color: transparent; transform: translateY(-4px); }
.stat-card:hover::after { opacity: 1; }
.stat-card .val {
  display: block;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);   /* 30 bis 44 px */
  font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--stage-title);
  transition: color 400ms ease;
}
/* Auf der durchscheinenden Karte liegt hinter dem Text der Lichtschein.
   Flaues Grau bricht dort weg, deshalb etwas mehr Deckung, ein halbes
   Schriftgewicht mehr und eine Spur mehr Laufweite. */
.stat-card .cap {
  display: block; margin-top: 8px;
  font-size: 1rem; line-height: 1.45; letter-spacing: 0.005em;
  font-weight: 500;
  color: var(--stage-cap);
  transition: color 400ms ease;
}
.stat-card:hover .val { color: #FFFFFF; }
.stat-card:hover .cap { color: rgba(255,255,255,0.92); }

@media (min-width: 1024px) {
  .stat-card .val { letter-spacing: -0.032em; line-height: 1.04; }
}

/* ── Kachel als Verknüpfung ──────────────────────────────
   Die vier Kacheln in der Bühne führen in die vier Leistungs-
   bereiche. Grund, Rahmen und das Anheben beim Überfahren kommen
   unverändert aus .stat-card; hier steht nur, was der Verweis
   zusätzlich braucht: die Kachel als Block statt Zeile, keine
   Unterstreichung, und der Seitenname als einziger Inhalt.

   Der Name steht dort, wo bei der Kennzahl-Kachel der Wert stand,
   ist aber deutlich kleiner: "Konstruktion" in 44 px würde in der
   halben Spaltenbreite umbrechen. */
a.stat-card { display: block; text-decoration: none; color: inherit; }
a.stat-card:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }

/* Nur der Name in der Kachel, deshalb ein knapperer Innenabstand als
   bei der Kennzahl-Kachel: die volle Höhe von p-6 wäre bei einer
   einzigen Zeile viel Leerraum. */
.link-card { padding-block: 20px; }
.link-card .ttl {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);   /* 20 bis 26 px */
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
  color: var(--stage-title);
  transition: color 400ms ease;
}
.link-card:hover .ttl { color: #FFFFFF; }

/* ── Markenkasten ────────────────────────────────────────
   Bis 768 px ein Kasten unter dem Text, darüber einer rechts
   daneben. Ein Element für beides, statt wie die Vorlage das
   ganze Markup ein zweites Mal zu setzen.

   Abweichung von der Vorlage: dort läuft die Fläche randlos bis an
   Ober-, Unter- und Seitenkante des Abschnitts. Hier ist sie ein
   Kasten im Raster — gerundet, mit Haarlinie und in derselben Fläche
   wie die .svc-Kästchen. Randlos entstünden drei harte Schnittkanten
   gegen die angrenzenden Abschnitte. */
.about-stage-deco {
  /* Eine Größe für beides: die Kapsel ist so breit, der Schriftzug beginnt
     um die halbe Kapselbreite eingerückt. Sonst müssten zwei Zahlen von
     Hand synchron gehalten werden. */
  --disc-w: 75%;                     /* w-72 auf max-w-sm */
  /* Kartenausschnitt und Ortsmarke teilen sich diesen Versatz. Die Marke
     wird NICHT für sich verschoben — sonst löst sie sich von der Karte und
     zeigt auf die falsche Straßenseite. Verschoben wird der Ausschnitt,
     die Marke folgt mit demselben Wert. */
  --map-shift-x: 0px;
  --map-shift-y: 5%;
  position: relative;
  height: 448px;                     /* h-112 */
  /* Platz für die Kapsel, die zur Hälfte über die Oberkante ragt:
     256 px breit sind bei 3:4 gut 170 px Überstand. */
  margin-top: clamp(190px, 34vw, 224px);
  background: var(--stage-panel);
  border: 1px solid var(--stage-panel-border);
  border-radius: 24px;               /* wie die Kennzahl-Karten */
  box-shadow: var(--stage-card-shadow);
  container-type: size;
}

/* Nur Lichtschein und Bögen werden an den runden Ecken beschnitten.
   Die Kapsel liegt außerhalb dieses Innenteils und darf deshalb
   weiterhin über die linke Kante ragen. */
.about-stage-deco-inner {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
/* Wird die Fläche breiter als in der Vorlage, würde die Kapsel bei starren
   75 Prozent höher als die Fläche. Die zweite Schranke bindet sie an die
   Flächenhöhe: 47 cqh Breite sind bei 3:4 rund 63 Prozent Höhe — genau das
   Verhältnis des Entwurfs (452 von 884 px). Bei den Maßen der Vorlage
   treffen sich beide Werte, dort ändert die Regel nichts. */
@supports (width: 1cqw) {
  .about-stage-deco { --disc-w: min(75cqw, 47cqh); }
}

/* ── Karte ───────────────────────────────────────────────
   Straßennetz um Herzberger Straße 2 als Strichzeichnung,
   Daten aus OpenStreetMap, Ausschnitt rund 1,8 x 2,3 km um das
   Werk. Bewusst kein eingebettetes Kartendienst-iframe: das
   setzt Cookies und überträgt Daten an Dritte, bräuchte also
   eine Einwilligung vor dem Laden. Für die geplante Standort-
   seite ist das vertretbar, für einen Deko-Kasten nicht.

   Das SVG steht inline im HTML und nicht als Datei, weil es
   über currentColor dem Hell/Dunkel-Umschalter folgen muss —
   ein per <img> eingebundenes SVG erbt keine Seitenfarben.
   Die Strichstärken bleiben über vector-effect unabhängig von
   der Skalierung, sonst würden Haarlinien beim Strecken dick. */
/* Bei xMidYMid slice fällt die Mitte des viewBox — also die Koordinate des
   Werks — immer auf die Mitte des Elements. Wird das Element nach rechts
   und unten über den Kasten hinaus aufgezogen, wandert diese Mitte um
   genau die Hälfte davon: das ist der Versatz, den die Marke ebenfalls
   zieht. Deshalb bleiben beide fest zueinander. */
/* Die Abstände trägt der Block, nicht das SVG. Ein <svg> ist ein ersetztes
   Element: mit left/right/top/bottom und auto-Größe leitet der Browser die
   Breite aus dem Seitenverhältnis der viewBox ab und nicht aus den
   Abständen — die Bildmitte hing damit an der Kastenhöhe und wanderte beim
   Skalieren. Der Rahmen ist ein normaler Block, der die vier Abstände
   zuverlässig zieht; das SVG füllt ihn zu 100 %. */
.about-stage-map-frame {
  position: absolute;
  left: 0; right: calc(-2 * var(--map-shift-x));
  top: calc(-2 * var(--map-shift-y)); bottom: 0;
}
.about-stage-map {
  display: block;
  width: 100%; height: 100%;
  color: var(--stage-map);
}
.about-stage-map path {
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Sechs Ebenen, von hinten nach vorn: Gebäudeumrisse, Werks- und
   Feldwege, Wohnstraßen, Hauptstraßen in der Akzentfarbe, darüber das
   Betriebsgelände als schwach gefüllte Fläche mit deutlicher Kante und
   zuoberst die Hallen darauf.

   Hier stand bis zuletzt eine einzelne Regel für .map-site. Das SVG
   trennt seit der Grundstücksfassung aber zwischen .map-parcel und
   .map-sitebuild, und für beide gab es keine Regel — sie fielen damit
   auf das fill:none der Grundregel zurück. Das Gelände war also gar
   nicht markiert, sondern nur als Haarlinie in der Kartenfarbe da. */
.about-stage-map .map-build path { stroke-width: 1; opacity: 0.22; }
.about-stage-map .map-fine  path { stroke-width: 1; opacity: 0.26; }
.about-stage-map .map-minor path { stroke-width: 1; opacity: 0.42; }
.about-stage-map .map-major path { stroke-width: 1.75; color: var(--stage-line); opacity: 0.85; }
/* .map-parcel ist derzeit ABGESCHALTET: im HTML steht die Gruppe
   auskommentiert. Die Regel bleibt stehen, damit das Wiedereinschalten eine
   Zeile ist. Ohne sie fiele die Fläche auf das fill:none der Grundregel
   zurück und wäre nur eine Haarlinie — dieser Fehler stand hier schon
   einmal. */
.about-stage-map .map-parcel path {
  fill: color-mix(in srgb, var(--cyan) 16%, transparent);
  stroke: var(--cyan); stroke-width: 1.5;
}
.about-stage-map .map-sitebuild path {
  fill: color-mix(in srgb, var(--cyan) 55%, transparent);
  stroke: var(--cyan); stroke-width: 1;
}

/* ── Anschrift als Kästchen in der Kartenecke ────────────
   Unten rechts im Kasten, bewusst nicht auf einem Punkt der Karte:
   den Standort markiert die eingefärbte Grundstücksfläche selbst. Eine
   Marke, die auf einen Kartenpunkt zeigen soll, müsste in Prozent der
   Kastenmaße sitzen, während die Karte in ihrem eigenen Koordinaten-
   system liegt — über alle Fensterbreiten hinweg ließen sich die
   beiden nicht verlässlich zur Deckung bringen, und zweimal ging es
   schief. Deshalb steht die Anschrift jetzt frei in der Ecke.

   Die Fläche ist dieselbe wie die des Kastens und damit deckend: das
   Kästchen muss die Kartenlinien hinter sich verdecken, sonst läuft
   der Text über Straßen. Erkennbar wird es über Haarlinie und Schatten.
   Die Marke ist echter Text und kein Bild, damit sie vorgelesen und
   gefunden werden kann. */
.about-stage-place {
  position: absolute;
  z-index: 11;                        /* über der Kapsel, die z-index 10 trägt */
  right: clamp(12px, 4%, 20px);
  bottom: clamp(12px, 4%, 20px);
  max-width: calc(100% - 2 * clamp(12px, 4%, 20px));
  display: block;
  background: var(--stage-panel);
  border: 1px solid var(--stage-card-border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--stage-card-lift);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.about-stage-place:hover {
  border-color: var(--cyan);
  box-shadow: var(--stage-card-lift),
              0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent);
}
.about-stage-place-name {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--stage-title);
}
.about-stage-place-addr {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--stage-cap);
}
.about-stage-place:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }

/* Weicher Schein hinter der Ortsmarke statt des Lichtscheins der
   Vorlage: der saß dort hinter einem Planeten, hier hebt er die
   Marke aus dem Liniennetz. */
.about-stage-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--stage-glow), transparent 72%);
  filter: blur(60px);
}

/* Ovaler Ausschnitt auf der Kante, darin das Nashorn.
   Die Scheibe ist jeweils das Gegenstück zur Fläche: im Hellmodus
   dunkelblau mit weißem Nashorn auf der grauen Fläche, im Dunkelmodus
   hell mit blauem Nashorn auf der dunkelblauen. Sonst stünde eine helle
   Scheibe auf hellgrauem Grund und verschwände. */
.about-stage-disc {
  position: absolute;
  z-index: 10;
  /* Hochformat 3:4 (im Entwurf 336 x 452 px). rounded-full ist in Tailwind
     border-radius: 9999px — auf einem nicht quadratischen Kasten also keine
     Ellipse, sondern eine Kapsel: Rechteck mit Halbkreis oben und unten.
     Mit 50% käme eine Ellipse heraus, das war der sichtbare Unterschied. */
  aspect-ratio: 3 / 4;
  border-radius: 9999px;
  width: var(--disc-w);
  background: var(--stage-disc);
  border: 1px solid var(--stage-disc-border);
  box-shadow: var(--stage-disc-shadow);
  display: grid; place-items: center;
  overflow: hidden;                  /* beschneidet das Foto auf die Kapsel */
}
/* Grundfall Foto: füllt die Kapsel randlos. */
.about-stage-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Nashorn-Fassung: mittig und kleiner, damit das quadratische Zeichen
   sicher in der Kapsel liegt und nicht an ihre Flanken stößt.
   clip-path schneidet den 1px-Rahmen weg, den beide Nashorn-Dateien aus
   dem Export mitbringen (Alpha 13 bis 25 in Zeile 0, Zeile 299 und
   Spalte 0). Auf der weißen Karte in .pm-badge fällt er nicht auf, auf der
   farbigen Kapsel zeichnet er ein feines Rechteck. */
.about-stage-disc .rhino--white,
.about-stage-disc .rhino--blue {
  width: 62%; height: auto; object-fit: none;
  clip-path: inset(0.5%);
}
.about-stage-disc .rhino--blue { display: none; }
[data-theme="dark"] .about-stage-disc .rhino--white { display: none; }
[data-theme="dark"] .about-stage-disc .rhino--blue { display: block; }

/* ── Telefon: Band unter dem Text ───────────────────────── */
@media (max-width: 767px) {
  /* Kreis w-64 mittig auf der Oberkante, wie in der Vorlage. */
  .about-stage-disc {
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
  }
  .about-stage-deco { --disc-w: 256px; }   /* w-64 */
  /* Quer ist auf dem Telefon Platz, hoch nicht: S, M und E stehen
     nebeneinander. Weil es drei einzelne Dateien sind, genügt dafür die
     Richtung des Flexcontainers, es braucht keine zweite Abbildung. */
  /* Oben Platz für die halbe Ellipse: 256 px breit, also 341 px hoch. */
  .about-stage-glow {
    left: calc(50% + var(--map-shift-x));
    top: calc(50% - var(--map-shift-y));
    transform: translate(-50%, -50%);
    width: 300px; height: 300px;
  }
}

/* ── Ab Tablet: Fläche rechts ───────────────────────────── */
@media (min-width: 768px) {
  .about-stage-deco {
    position: absolute; top: 0; bottom: 0; right: 0;
    height: auto; width: 25%;                          /* w-3/12 */
    margin-top: 0;
  }

  /* w-72 auf max-w-sm sind 75 Prozent der Flächenbreite; die Angabe
     bleibt relativ, damit sie auf jeder Stufe dieselbe Proportion hat.
     Prozente beziehen sich hier auf die Fläche, weil sie der nächste
     positionierte Vorfahr ist. */
  .about-stage-disc {
    top: 50%; left: 0;
    transform: translate(-50%, -50%);
  }

  /* Der Kartenausschnitt rückt nach rechts, sonst läge das Grundstück
     hinter der Kapsel — die verdeckt die linke Kastenhälfte. Die
     Anschrift wandert nicht mit: sie hängt an der Kastenecke, nicht an
     einem Kartenpunkt. */
  .about-stage-deco { --map-shift-x: calc(var(--disc-w) / 5); }

  .about-stage-glow {
    left: calc(50% + var(--map-shift-x));
    top: calc(50% - var(--map-shift-y));
    transform: translate(-50%, -50%);
    width: 340px; height: 340px;
  }
}

/* Die Vorlage deckelt die Fläche starr bei 384 bzw. 448 px. Auf breiten
   Schirmen klafft dadurch zwischen Textspalte und Fläche eine große Lücke,
   weil Bulmas .container bis 1440 px läuft, Tailwinds nur bis 1280. Statt
   des festen Deckels wächst die Fläche deshalb prozentual mit und behält
   die Vorlagenbreite als Untergrenze. Wer den Abstand in der Mitte ändern
   will, dreht an den Prozentwerten. */
@media (min-width: 1024px) {
  .about-stage-deco { width: max(384px, 34%); }        /* lg:max-w-sm als Minimum */
}

@media (min-width: 1280px) {
  .about-stage-deco { width: max(448px, 38%); }        /* xl:max-w-md als Minimum */
}

/* Die breite Textspalte kommt erst ab 1440 statt wie in der Vorlage ab 1280:
   Bulmas .container ist bei 1280 px Fensterbreite nur rund 1152 px breit,
   Tailwinds volle 1280. Mit 672 px Text und 448 px Kasten blieben dazwischen
   32 px — der Text stünde fast an der Kastenkante. */
@media (min-width: 1440px) {
  .about-stage-inner { max-width: 672px; }             /* xl:max-w-2xl */
}

/* ── Systemeinstellungen des Betrachters ─────────────────
   Drei unabhängige Signale, jedes betrifft diesen Block anders. */

/* Weniger Bewegung: Zustände bleiben, nur der Weg dorthin wird kurz und
   ohne Verschiebung. Farbwechsel helfen beim Verstehen und bleiben. */
@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .stat-card::after,
  .stat-card .val,
  .stat-card .cap,
  .link-card .ttl { transition-duration: 120ms; }
  .stat-card:hover { transform: none; }
}

/* Weniger Transparenz: die Karten werden deckend statt milchig, der
   Lichtschein tritt zurück. */
@media (prefers-reduced-transparency: reduce) {
  .about-stage { --stage-card-bg: var(--bg-elev); --stage-card-border: var(--rule); --stage-card-edge: var(--rule); }
  [data-theme="dark"] .about-stage {
    --stage-card-bg: #12212A;
    --stage-card-border: rgba(255,255,255,0.16);
    --stage-card-edge: rgba(255,255,255,0.22);
  }
  .stat-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .about-stage-glow { opacity: 0.35; }
}

/* Mehr Kontrast: deckende Flächen mit deutlicher Kante, Beschriftung
   auf volle Textfarbe, Lichtschein weg. */
@media (prefers-contrast: more) {
  .about-stage {
    --stage-card-bg: var(--bg-elev);
    --stage-card-border: var(--rule-strong);
    --stage-card-edge: var(--rule-strong);
    --stage-cap: var(--ink-2);
  }
  [data-theme="dark"] .about-stage {
    --stage-card-bg: #0D1A22;
    --stage-card-border: rgba(255,255,255,0.44);
    --stage-card-edge: rgba(255,255,255,0.44);
    --stage-cap: #EAF1F5;
  }
  .stat-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .about-stage-glow { display: none; }
}

/* =========================================================
   FILMKASTEN — Unternehmensfilm auf unternehmen.html.
   Die Datei liegt im Projekt statt bei einem Videodienst: kein
   iframe, keine Cookies, keine Einwilligung nötig. Zusammen mit
   preload="none" am <video> lädt vor dem Klick nur das Standbild.
   ========================================================= */
.filmbox {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-inset);
  box-shadow: 0 1px 2px rgba(6,18,25,0.03), 0 30px 56px -34px rgba(6,18,25,0.22);
}
[data-theme="dark"] .filmbox { box-shadow: none; }
.filmbox video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
/* Nur sichtbar, wenn der Browser das <video> nicht darstellen kann. */
.filmbox-fallback { padding: 24px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* =========================================================
   SO MACHEN WIR DAS (.section-claim) — mittiger Textblock
   zwischen Bühne und Film.

   Aus einer zweiten Tailwind-Vorlage, Maße übernommen:

     Abschnitt   py-12 / md:py-24 / lg:py-32   48 / 96 / 128 px
     Textspalte  max-w-4xl                     896 px, mittig
     Absätze     text-lg, leading-relaxed      18 px / 1,625
     Abstände    mb-4 unter Titel und Absatz   16 px

   Das halbe Planetenbild links der Vorlage entfällt. Die Bögen
   rechts sind dieselben zwei, die vorher im Markenkasten lagen —
   dort hat sie die Karte abgelöst, hier geben sie dem sonst
   leeren Rand Textur.
   ========================================================= */
.section-claim {
  --claim-glow: rgba(0,147,214,0.14);
  position: relative;
  overflow: hidden;
  padding: var(--section-y) var(--gutter);
}
[data-theme="dark"] .section-claim { --claim-glow: rgba(0,147,214,0.38); }

.claim-inner { max-width: 896px; margin-inline: auto; text-align: center; }

/* Gleiche Staffelung wie die Überschrift der Bühne, damit die beiden
   Abschnitte auf einer Ebene stehen. Laufweite und Zeilenabstand wieder
   größenabhängig, siehe Kommentar bei .about-stage h1. */
.claim-inner h2 {
  font-family: var(--f-sans);
  font-size: clamp(1.875rem, 3.8vw, 2.875rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}
.claim-inner h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--link); }
.claim-inner p {
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--ink-2);
}
.claim-inner p + p { margin-top: 16px; }

@media (min-width: 1024px) {
  .claim-inner h2 { line-height: 1.06; letter-spacing: -0.032em; }
}

/* Deko am rechten Rand. pointer-events aus, damit sie den Text nicht
   für die Maus abdeckt. */
.claim-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.claim-lines {
  position: absolute; top: 0; right: 0;
  height: 100%; width: clamp(150px, 20vw, 300px);
  color: var(--cyan); opacity: 0.5;
}
.claim-lines path {
  fill: none; stroke: currentColor;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.claim-glow {
  position: absolute; top: 0; right: 6%;
  width: 40rem; height: 40rem;
  transform: translateY(-58%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--claim-glow), transparent 72%);
  filter: blur(100px);
}

@media (prefers-reduced-transparency: reduce) { .claim-glow { opacity: 0.35; } }
@media (prefers-contrast: more) { .claim-glow { display: none; } .claim-lines { opacity: 0.8; } }

/* Seitenverzweigung zu zweit statt zu viert (unternehmen.html). Zwei
   .workcard nebeneinander sind doppelt so breit wie vier — quadratische
   Bilder kämen damit auf über 600 px Höhe und würden den Abschnitt
   sprengen. 3:2 hält sie auf gut zwei Dritteln davon. */
.workgrid--duo .workcard-media { aspect-ratio: 3 / 2; }

/* Abschnitte auf unternehmen.html, die keine eigene Komponente sind.
   Ersetzt Bulmas .section, damit alle Abschnitte der Seite denselben
   senkrechten Abstand haben — Bulma setzt starre 3rem, unabhängig von
   der Fensterbreite. */
.section-y { padding: var(--section-y) var(--gutter); }

/* =========================================================
   FIRMENHISTORIE (unternehmen-historie.html)

   Die Seite ist die einzige der Website, die von vorn bis
   hinten Fließtext ist — kein Kachelraster, keine Datenkarten.
   Deshalb steht sie als einzige nicht auf der linken Kante des
   .container, sondern in einer mittigen Lesespalte: Krume,
   Titel, Einleitung, Kapitel und Zeitstrahl ziehen alle
   dieselbe Breite.

   720px sind bei 17px Schrift rund 66 Zeichen je Zeile. Enger
   ginge auch, aber der Zeitstrahl braucht die Breite: Jahres-
   spalte, Achse und Eintragstext müssen nebeneinander passen,
   bevor der Umbruch bei 880px greift.
   ========================================================= */
.hist-col { max-width: 720px; margin-inline: auto; }

/* Die Lesespalte IST das Maß. Die Lede bringt aus dem Seitenkopf
   ihre eigenen 58ch mit und bliebe sonst gut 100px schmaler als
   der Text darunter — der rechte Rand wirkte ausgefranst. */
.hist-col .lede { max-width: none; }

/* Ein Kapitel: Überschrift, Absatz, fertig. Keine Kennziffer —
   die Vorlage nummeriert nicht, und eine gesetzte Zahl behauptet
   eine Ordnung, die der Text nicht hat.

   Der Schriftgrad liegt zwischen Seitentitel und Fließtext und
   folgt .zebra-text h3, damit die Seite keine fünfte Textgröße
   einführt. Enge Zeilen und negative Laufweite oben, weite
   Zeilen und normale Laufweite unten: je größer der Grad, desto
   dichter darf gesetzt werden. */
.hist-chapter + .hist-chapter { margin-top: clamp(38px, 4.6vw, 62px); }
.hist-chapter h2 {
  font-family: var(--f-sans);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 28ch;
}
/* 1.7 statt der sonst üblichen 1.6: die Zeile ist hier länger als
   in den 58ch-Ledes der übrigen Seiten, und je länger die Zeile,
   desto mehr Durchschuss braucht das Auge zum Zeilenrücksprung. */
.hist-chapter p {
  font-size: var(--head-lede);
  line-height: 1.7;
  color: var(--ink-2);
}

/* =========================================================
   ZEITSTRAHL (.tl) — senkrechte Achse links, Datumsangabe
   rechtsbündig daran, Text rechts daneben.

   Aufbau eines Eintrags:
     .tl-item   Raster aus Datumsspalte und Textspalte, dazu
                der Punkt und ein Achsstück, beide absolut.
     .tl-when   Zusatz (.tl-pre) über der Jahreszahl (.tl-year),
                Zeitraum-Nachsatz (.tl-post) darunter.
     .tl-what   der Eintragstext.

   Die Achse ist nicht eine durchgehende Linie auf .tl, sondern
   je Eintrag ein Stück von Oberkante bis Unterkante. Weil die
   Einträge ohne Lücke aneinanderstoßen, ergibt das dieselbe
   durchgehende Linie — aber erster und letzter Eintrag lassen
   sich sauber am Punkt abschneiden, was mit einer Linie über
   die Gesamthöhe nicht ginge (die Eintragshöhen sind vom Text
   abhängig und in CSS nicht bekannt).
   ========================================================= */
.tl {
  --tl-w: 148px;                          /* Breite der Datumsspalte */
  --tl-gap: clamp(28px, 4vw, 56px);       /* Abstand Datum ↔ Text, die Achse liegt mittig darin */
  --tl-pad: clamp(22px, 2.6vw, 34px);     /* Innenabstand oben/unten je Eintrag */
  --tl-year-fs: clamp(28px, 3.4vw, 38px);
  --tl-pre-h: 22px;                       /* Zeile über der Jahreszahl, immer belegt */
  --tl-axis-x: calc(var(--tl-w) + var(--tl-gap) / 2);
  /* Höhe der Punktmitte über der Oberkante des Eintrags. Aus dieser
     einen Zahl folgen Punkt und Achsenanfang, deshalb sitzen alle
     Punkte auf gleicher Höhe wie „ihre" Jahreszahl. */
  --tl-dot-top: calc(var(--tl-pad) + var(--tl-pre-h) + var(--tl-year-fs) * 0.5);

  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rubrik über dem Zeitstrahl. Semantisch ein h2, gesetzt wie .eyebrow:
   "Firmenhistorie" ist zugleich der Seitentitel, und .block-head h2 läuft
   in --head-h1 — derselbe Begriff stünde also zweimal in derselben Größe
   auf der Seite. Klein gesetzt benennt er den Abschnitt, ohne mit der
   Seitenüberschrift um den ersten Rang zu streiten. */
.tl-title {
  display: block;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--link);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-w) minmax(0, 1fr);
  column-gap: var(--tl-gap);
  padding: var(--tl-pad) 0;
}

/* Achsstück */
.tl-item::before {
  content: "";
  position: absolute;
  left: var(--tl-axis-x);
  top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--rule-strong);
}
.tl-item:first-child::before { top: var(--tl-dot-top); }
.tl-item:last-child::before  { bottom: calc(100% - var(--tl-dot-top)); }

/* Punkt. Ring statt Fläche, damit die Achse nicht durchscheint;
   der Kern trägt deshalb die Seitenfarbe. */
.tl-dot {
  position: absolute;
  left: var(--tl-axis-x);
  top: var(--tl-dot-top);
  width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--rule-strong);
}
/* Kein Hover-Zustand auf dem Eintrag: hier ist nichts anklickbar. Ein
   mitgehender Punkt hätte eine Bedienbarkeit versprochen, die es nicht
   gibt — im Zweifel sieht der Zeitstrahl lieber ruhig aus als bedienbar. */

/* Der laufende Zeitraum ist der einzige Eintrag, der bis in die
   Gegenwart reicht — er bekommt den Akzent, sonst nichts. */
.tl-item.is-current .tl-dot { background: var(--cyan); border-color: var(--cyan); }
.tl-item.is-current .tl-year { color: var(--link); }

/* ── Datumsspalte ────────────────────────────────────────── */
.tl-when { text-align: right; }

/* Auch leer behält die Zeile ihre Höhe. Das ist der Grund, warum
   bei 2017 ein leeres <span class="tl-pre"> im Markup steht: ohne
   das rutschte die Jahreszahl nach oben und der Punkt läge nicht
   mehr auf ihrer Mitte. */
.tl-pre {
  display: block;
  min-height: 15px;
  margin-bottom: 7px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.tl-year {
  display: block;
  font-size: var(--tl-year-fs); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tl-post {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Textspalte ──────────────────────────────────────────── */
/* Der Innenabstand oben setzt die erste Textzeile optisch auf die
   Mitte der Jahreszahl. Bei mehrzeiligen Einträgen läuft der Text
   dann nach unten weiter, statt gegen die Zahl zentriert zu werden. */
.tl-what {
  padding-top: calc(var(--tl-pre-h) + 4px);
  font-size: var(--head-lede); line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

/* Unter 880px kippt die Achse an den linken Seitenrand und Datum
   und Text stehen untereinander — dieselbe Umbruchbreite wie beim
   Abschnittskopf, damit beide Bausteine gemeinsam umbrechen. */
@media (max-width: 880px) {
  .tl {
    --tl-axis-x: 6px;
    --tl-dot-top: calc(var(--tl-pad) + var(--tl-year-fs) * 0.5);
  }
  .tl-item {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 34px;
  }
  .tl-when {
    text-align: left;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px;
  }
  /* Zusatz und Jahr nebeneinander statt gestapelt; die leere Zeile
     wird hier nicht mehr gebraucht, weil der Punkt an der Oberkante
     der Zahl ausgerichtet ist. */
  .tl-pre { min-height: 0; margin-bottom: 0; }
  .tl-pre:empty { display: none; }
  .tl-post { margin-top: 0; }
  .tl-what { padding-top: 10px; }
}

/* ── Der Zeitstrahl zeichnet sich beim Scrollen ──────────────
   Die Achse wächst mit, die Punkte setzen sich, sobald die Linie
   sie erreicht, und der Eintragstext tritt aus der Achse heraus
   an seinen Platz. Warum überhaupt Bewegung, wenn der Rest der
   Seite still steht: der Zeitstrahl ist der einzige Baustein,
   dessen Inhalt selbst ein Verlauf ist. Die Bewegung bildet ab,
   was dasteht, sie schmückt es nicht.

   Sie hängt am Scrollen, nicht an einem Auslöser mit fester
   Dauer. Das heißt: sie folgt dem Rad oder dem Finger Bild für
   Bild, sie lässt sich mitten in der Bewegung anhalten, und wer
   zurückscrollt, sieht sie rückwärts laufen. Ein einmal
   gestartetes Keyframe könnte das nicht — es liefe zu Ende, egal
   was der Leser inzwischen tut.

   Aufbau: der sichtbare Endzustand steht oben im Stylesheet und
   gilt immer. Erst hier drin wird ein Anfangszustand ergänzt.
   Kann der Browser keine Scroll-Zeitleisten oder will der Leser
   weniger Bewegung, greift dieser Block nicht und die Seite steht
   vollständig da — nichts bleibt unsichtbar liegen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Gemeinsame Einstellung aller vier Bewegungen. Bewusst in
       Einzeleigenschaften statt in der Kurzschreibweise `animation`:
       die setzt animation-duration mit zurück, und genau die muss
       hier auf `auto` stehen bleiben — nur dann füllt die Bewegung
       den animation-range und läuft am Scrollen statt an einer Uhr.
       Mit `animation: … linear both` stünde die Dauer wieder auf
       ihrem Ausgangswert und der Zeitstrahl bliebe stehen. */
    .tl-item::before,
    .tl-dot,
    .tl-when,
    .tl-what {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
    }

    /* Achsstück: wächst von oben nach unten. Es ist bereits um die
       halbe Breite nach links gerückt, deshalb trägt das Keyframe
       beide Anteile — sonst überschriebe die Skalierung den Versatz
       und die Linie stünde neben der Achse. */
    .tl-item::before {
      transform-origin: 50% 0;
      animation-name: tl-draw;
      animation-range: cover 2% cover 32%;
    }

    /* Punkt: setzt sich, kurz nachdem die Linie an ihm vorbei ist. */
    .tl-dot {
      animation-name: tl-dot;
      animation-range: cover 12% cover 26%;
    }

    /* Datum und Text treten aus der Achse heraus, jedes zu seiner
       Seite. Die Achse ist der Ursprung des Eintrags, also kommt der
       Eintrag auch von dort — nicht von unten, wie es eine allgemeine
       Einblendung täte. Der Weg ist mit 14px kurz genug, dass er beim
       Lesen nicht auffällt, und lang genug, dass die Richtung stimmt. */
    .tl-when {
      animation-name: tl-from-axis-left;
      animation-range: cover 8% cover 36%;
    }
    .tl-what {
      animation-name: tl-from-axis-right;
      animation-range: cover 8% cover 36%;
    }

    /* Unter 880px steht beides rechts der Achse, also kommt auch
       beides aus derselben Richtung. */
    @media (max-width: 880px) {
      .tl-when { animation-name: tl-from-axis-right; }
    }
  }
}

@keyframes tl-draw {
  from { transform: translateX(-50%) scaleY(0); }
  to   { transform: translateX(-50%) scaleY(1); }
}
@keyframes tl-dot {
  from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes tl-from-axis-left {
  from { transform: translateX(14px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes tl-from-axis-right {
  from { transform: translateX(-14px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Mehr Kontrast: die Achse ist dann keine zarte Andeutung mehr,
   sondern eine Linie, und die Punkte bekommen einen vollen Kern. */
@media (prefers-contrast: more) {
  .tl-item::before { background: var(--ink-3); }
  .tl-dot { border-color: var(--ink); }
}

/* =========================================================
   STELLENKARTE (.job) — karriere.html

   Umsetzung einer Tailwind-Vorlage, Maße weitgehend übernommen:
   rounded-2xl → 16px (dasselbe wie .svc), p-5 → 24px, Titel
   text-xl/semibold, Beschreibung text-sm/gray-600, darunter eine
   Merkmalzeile mit 4px-Punkten als Trenner.

   Zwei bewusste Abweichungen:
   • Die Vorlage setzt die Karte randlos auf einen grauen Grund.
     Hier trägt sie Rahmen und weichen Schatten wie .svc und
     .prodcard, sonst stünde sie als einzige Karte der Website
     ohne Kante da. Der Farbwechsel der Vorlage stimmt trotzdem:
     --bg ist das Grau, --bg-elev das Weiß der Karte.
   • Kein Hover-Zustand. Solange der Bewerbungsknopf fehlt, ist an
     der Karte nichts anklickbar; eine mitgehende Kante behauptete
     das Gegenteil. Kommt der Knopf, gehört der Hover dazu.
   ========================================================= */
.job {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 26px 26px 24px;
  box-shadow: 0 1px 2px rgba(6,18,25,0.03), 0 10px 30px -14px rgba(6,18,25,0.10);
}
[data-theme="dark"] .job { box-shadow: none; }

.job h3 {
  font-family: var(--f-sans);
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.32;
  color: var(--ink);
  margin-bottom: 10px;
  text-wrap: balance;
}
/* Der Geschlechterzusatz gehört zum Titel, ist aber keine Information
   über die Stelle. Zurückgenommen gesetzt, damit beim Überfliegen der
   Berufsname trägt und nicht elfmal dasselbe Kürzel. */
.job-mwd { font-weight: 400; color: var(--ink-4); white-space: nowrap; }

.job p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* margin-top:auto heftet die Merkmalzeile an den unteren Rand. Ohne
   das säße sie bei kurzen Titeln höher als bei langen und die Karten
   einer Zeile wirkten uneinheitlich — die Vorlage löst dasselbe
   starr über mb-10. */
.job-meta {
  list-style: none;
  margin: auto 0 0; padding: 26px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.job-meta li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 1.4; color: var(--ink-3);
}
/* Trennpunkt als Pseudo-Element statt als eingebettetes SVG wie in der
   Vorlage: gleiche 4px, aber er erbt die Farbe aus dem Theme und
   verschwindet automatisch am Zeilenumbruch vor dem ersten Eintrag. */
.job-meta li + li::before {
  content: ""; flex: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-4);
}

/* ── Bewerbungsweg ───────────────────────────────────────── */
.apply { border-top: 1px solid var(--rule); padding-top: clamp(28px, 3vw, 40px); }
.apply .mono { display: block; margin-bottom: 18px; }
/* :not(.mono), weil .apply p (0,1,1) sonst die Rubrik .mono (0,1,0)
   überstimmt und das 12px-Label auf Lesegröße aufbläst. */
.apply p:not(.mono) { font-size: var(--head-lede); line-height: 1.7; color: var(--ink-2); max-width: 58ch; }
.apply address {
  font-style: normal; margin: 20px 0;
  font-size: var(--head-lede); line-height: 1.7;
  color: var(--ink); font-weight: 600;
}
.apply a { color: var(--link); transition: color var(--t-fast); }
.apply a:hover { color: var(--link-hover); }

/* =========================================================
   BILDWECHSLER MIT MERKMALSLISTE (.shots + .feat)

   Umsetzung einer Tailwind-Vorlage. Übernommen ist deren
   Aufteilung: links die wechselnde Fläche, rechts mit einer
   Spalte Abstand der Text.

   Drei bewusste Abweichungen von der Vorlage:
   • Links stehen keine gestapelten Textkacheln, sondern
     Aufnahmen. Ein Bild lohnt den Wechsel, drei fast gleich
     aussehende Textkacheln nicht.
   • Rechts steht ein fester Block, der nicht mitwechselt. Die
     Merkmale gelten für alle Aufnahmen; liefe der Text mit,
     müsste der Leser dem Wechsel folgen, statt lesen zu können.
   • Keine Punktleiste. Die Fläche läuft von selbst durch, es
     gibt nichts zu bedienen; Punkte wären dann reine Zier.

   Die Vorlage dimmt die inaktiven Karten auf opacity .3 und
   lässt sie stehen. Hier blenden die Aufnahmen ineinander
   über (nur eine ist sichtbar), weil ein Foto im Halbton
   defekt aussieht, ein Text dagegen nur zurückgenommen.
   ========================================================= */
.shots-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-inset);
}
/* Alle Aufnahmen liegen übereinander, nur die aktive ist sichtbar.
   Kein display:none, sonst gäbe es keine Überblendung. */
.shots-fig {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 700ms var(--svc-ease);
}
.shots-fig.is-active { opacity: 1; }
.shots-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Querformat für Flächen, die nur eine einzelne Aufnahme tragen. Das
   Hochformat 4:5 ist auf den Wechsler gemünzt, in dem mehrere Bilder
   dieselbe Fläche füllen müssen; ein einzelnes Querformatfoto würde
   darin so stark beschnitten, dass links und rechts das Wesentliche
   wegfiele. */
.shots-frame--wide { aspect-ratio: 4 / 3; }

/* Liegt für eine Seite noch kein Motiv vor, steht statt der wechselnden
   Aufnahmen ein gestricheltes Feld — dasselbe Muster wie bei
   .workcard-media.is-todo und .prodcard.is-todo, damit eine Lücke auf
   der ganzen Website gleich aussieht und als Lücke erkennbar bleibt. */
.shots-frame.is-todo {
  display: grid; place-items: center;
  border-style: dashed; border-color: var(--rule-strong);
  background: var(--bg-subtle);
}
.shots-frame.is-todo .empty {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  text-align: center; line-height: 1.7; padding: 0 24px;
}

/* ── Merkmalsblock rechts ────────────────────────────────── */
.feat-head { margin-bottom: clamp(30px, 4vw, 48px); }
.feat-head h2 {
  font-family: var(--f-sans);
  font-size: clamp(26px, 3vw, 36px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
  text-wrap: balance;
}
.feat-head h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ink-3); }

.feat { display: flex; align-items: flex-start; gap: 20px; }
.feat + .feat { margin-top: clamp(28px, 3.4vw, 44px); }
/* Symbol wie in .svc-icon. Der Kreis fasst hier 56 statt 58 Pixel, das
   Zeichen darin aber 28 statt 26: die Symbole sind gegenständlich
   gezeichnet (Brenner, Blechstapel, Bauteil mit Maßlinie) und tragen mehr
   Linien als die schlichten Zeichen in den Karten. Bei 23 Pixeln liefen
   Funken und Maßlinie zu. */
.feat-icon {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700);
  display: grid; place-items: center;
}
.feat-icon svg { width: 28px; height: 28px; }
[data-theme="dark"] .feat-icon { background: rgba(0,147,214,0.14); color: var(--cyan-soft); }

.feat h3 {
  font-family: var(--f-sans);
  font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
  color: var(--ink); margin-bottom: 8px;
}
.feat p { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 46ch; }

/* ── Unterhalb Desktop ───────────────────────────────────────
   Bulma stapelt die Spalten von selbst. Zu regeln bleibt nur das
   Format der Fläche: volle Containerbreite hoch 4:5 wäre
   bildschirmfüllend, deshalb ab hier das ruhigere Querformat und
   eine Obergrenze. */
@media (max-width: 1023px) {
  .shots-frame { aspect-ratio: 4 / 3; max-width: 720px; margin-inline: auto; }
}

/* Wer weniger Bewegung möchte, bekommt den harten Schnitt statt der
   Überblendung. Das Skript schaltet den Selbstlauf zusätzlich ab. */
@media (prefers-reduced-motion: reduce) {
  .shots-fig { transition: none; }
}

/* =========================================================
   ANFAHRT (.visit) — dunkles Band, links die Angaben, rechts
   die Karte. kontakt.html

   Umsetzung einer Tailwind-Vorlage. Übernommen sind die
   Aufteilung, die beiden Angabenblöcke mit Kreissymbol darüber
   und die gerahmte Kartenkarte mit doppeltem Radius.

   Nicht übernommen sind die Farbverläufe der Vorlage: einer im
   Grund, einer in jeder Überschrift, dazu ein violetter Schein
   hinter der Karte. Die Website kennt genau eine dunkle Fläche,
   nämlich die des Fußbereichs — .visit zieht dieselbe. Drei
   Verläufe auf einem Band wären ein zweites Gestaltungssystem
   neben dem bestehenden. Und der Schein hinter der Karte hatte
   in der Vorlage eine Rasterkarte als Bild aufzuwerten; hier
   zeichnet die Karte selbst.
   ========================================================= */
.visit {
  background: var(--footer-bg); color: var(--footer-fg-strong);
  border-radius: 20px;
  padding: clamp(30px, 4.2vw, 58px);
}
.visit h2 {
  font-size: clamp(26px, 3vw, 36px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 14px; color: #FFFFFF; text-wrap: balance;
}
.visit .lede { color: rgba(234,241,245,0.75); font-size: 17px; line-height: 1.7; max-width: 46ch; }

/* Die beiden Angabenblöcke. Das Symbol steht darüber, nicht daneben
   wie bei .feat — so gibt es die Vorlage vor, und die kurzen Zeilen
   darunter brauchen die volle Spaltenbreite. */
.visit-items { margin-top: clamp(32px, 4vw, 50px); }
.visit-icon { display: block; width: 44px; height: 44px; margin-bottom: 16px; color: var(--cyan-soft); }
.visit-item h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #FFFFFF; margin-bottom: 10px; }
.visit-item p { color: rgba(234,241,245,0.75); font-size: 15.5px; line-height: 1.8; }
.visit-item a { display: block; color: rgba(234,241,245,0.75); font-size: 15.5px; line-height: 1.8; transition: color var(--t-fast); }
.visit-item a:hover { color: #FFFFFF; }

/* Kartenkarte: heller Haarrahmen, innen die Karte mit eigenem, um die
   Rahmenbreite kleinerem Radius. Der doppelte Radius stammt aus der
   Vorlage und ist der Grund, warum hier zwei Elemente stehen. */
.visit-map { border: 1px solid rgba(255,255,255,0.20); border-radius: 20px; padding: 5px; }
.visit-map-inner {
  position: relative; overflow: hidden;
  border-radius: 15px; aspect-ratio: 4 / 3;
  background: #0A1922;
  /* Eigene Compositing-Ebene: die Karte besteht aus mehreren tausend
     Pfadpunkten mit non-scaling-stroke. Ohne eigene Ebene rastert der
     Browser sie bei jedem Repaint der Umgebung neu (Textmarkierung,
     Cursor, Autofill im Formular darunter), was in Edge/Chrome die
     Seite einfrieren ließ. So wird sie einmal gezeichnet und danach
     nur noch als Textur bewegt. */
  will-change: transform;
}

/* Dieselben sechs Ebenen wie .about-stage-map auf unternehmen.html, nur
   für dunklen Grund umgefärbt: dort dunkle Linien auf hellem Grund,
   hier helle auf dunklem. Die Gruppennamen bleiben gleich, damit beide
   Stellen dasselbe SVG tragen können. */
.geo-map { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(234,241,245,0.6); }
.geo-map path {
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.geo-map .map-build path { stroke-width: 1; opacity: 0.26; }
.geo-map .map-fine  path { stroke-width: 1; opacity: 0.30; }
.geo-map .map-minor path { stroke-width: 1; opacity: 0.50; }
.geo-map .map-major path { stroke-width: 1.75; color: var(--cyan-soft); opacity: 0.9; }
/* Wie im Markenkasten ABGESCHALTET, Gruppe im HTML auskommentiert. Auf dem
   fast schwarzen Grund trüge die Fläche etwas mehr Deckung als dort, sonst
   verschwände sie gegen die Linien. */
.geo-map .map-parcel path {
  fill: color-mix(in srgb, var(--cyan) 20%, transparent);
  stroke: var(--cyan-soft); stroke-width: 1.5;
}
.geo-map .map-sitebuild path {
  fill: color-mix(in srgb, var(--cyan) 62%, transparent);
  stroke: var(--cyan-soft); stroke-width: 1;
}

/* NICHT MEHR BENUTZT — steht noch für den Fall, dass die Ortsmarke
   zurückkommen soll. Sie saß fest auf 50/50 des Kartenfelds, während
   die Karte in ihrem eigenen Koordinatensystem liegt; seit das
   Grundstück selbst eingefärbt ist, markiert die Fläche den Standort
   und ein zusätzlicher Ring zeigte daneben. */
.geo-pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 22%, transparent);
}

.visit-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.visit-actions .button svg { width: 16px; height: 16px; margin-right: 9px; }
/* Nachweis für die Kartendaten. Pflicht bei sichtbarer Nutzung, siehe
   assets/img/standort-karte-HERKUNFT.md. */
.visit-note { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: rgba(234,241,245,0.5); }
.visit-note a { color: rgba(234,241,245,0.7); text-decoration: underline; }
.visit-note a:hover { color: #FFFFFF; }

@media (max-width: 1023px) {
  .visit-map { margin-top: clamp(32px, 5vw, 48px); }
}

/* =========================================================
   ANFRAGEFORMULAR (kontakt.html, #anfrage) — sitzt in einer
   .hero-card unter dem Anfahrt-Band. Bulma bringt .field/.label/
   .input/.textarea/.select mit; hier werden nur Farben und Maße
   auf die Token gezogen, damit die Felder in Hell und Dunkel
   zum Rest passen. Kein eigener Formular-Baukasten.
   ========================================================= */
/* Sprungziel der "Anfrage"-Knöpfe: ohne den Versatz läge der
   Abschnittsanfang unter der fixierten Topbar. */
.inquiry { scroll-margin-top: calc(var(--topbar-h) + 16px); }

.inquiry-intro { display: flex; flex-direction: column; }
.inquiry-intro p:not(.lede) { margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 44ch; }
.inquiry-intro a { color: var(--link); font-weight: 600; transition: color var(--t-fast); }
.inquiry-intro a:hover { color: var(--link-hover); }

/* Bildmarke am Fuß der Textspalte: margin-top:auto schiebt sie auf
   Desktop an die Unterkante der Karte, auf schmalen Bildschirmen steht
   sie einfach unter dem Text. Hell/Dunkel wie .brand-logo in der Topbar. */
.inquiry-brand { margin-top: auto; padding-top: clamp(32px, 4vw, 56px); }
/* Großformatig: die Bildmarke füllt die Spaltenbreite, auf Desktop also
   den ganzen unteren Bereich der Textspalte. Der Deckel hält sie auf
   sehr breiten Bildschirmen im Zaum. */
.inquiry-brand img { display: block; width: 100%; max-width: 460px; height: auto; }
/* Umschalter mit img im Selektor, damit er die Blockregel darüber schlägt.
   Sonst stand im Hellmodus das weiße Logo unsichtbar unter dem farbigen
   und machte die Spalte höher. */
.inquiry-brand img.inquiry-brand--white { display: none; }
[data-theme="dark"] .inquiry-brand img.inquiry-brand--blue { display: none; }
[data-theme="dark"] .inquiry-brand img.inquiry-brand--white { display: block; }

/* Zwei Spalten für die kurzen Felder, die langen (.is-full) laufen
   über die volle Breite. Bulmas .columns wäre hier zu viel Markup und
   brächte eigene Außenabstände mit. */
.inquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.inquiry-grid .is-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .inquiry-grid { grid-template-columns: 1fr; } }

.inquiry .label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.inquiry .label .opt { font-weight: 400; color: var(--ink-3); }

.inquiry .input, .inquiry .textarea, .inquiry .select select {
  background: var(--bg); color: var(--ink);
  border-color: var(--rule-strong); box-shadow: none;
  font-size: 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.inquiry .input::placeholder, .inquiry .textarea::placeholder { color: var(--ink-4); }
.inquiry .input:hover, .inquiry .textarea:hover, .inquiry .select select:hover { border-color: var(--ink-3); }
.inquiry .input:focus, .inquiry .textarea:focus, .inquiry .select select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.inquiry .textarea { min-height: 150px; }
.inquiry .select select option { color: var(--ink); background: var(--bg-elev); }

.inquiry-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.inquiry-actions .button svg { width: 16px; height: 16px; margin-right: 9px; }

.inquiry-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; }
.inquiry-note a { color: var(--link); text-decoration: underline; }
.inquiry-note a:hover { color: var(--link-hover); }

/* =========================================================
   RECHTSTEXTE (.legal) — impressum.html, später datenschutz.html

   Kein Raster, keine Karten, keine Symbole: eine einzige Spalte
   in Lesebreite. Rechtstexte werden gelesen oder überflogen, um
   eine bestimmte Angabe zu finden — beides trägt die schlichte
   Spalte besser als jede Gestaltung. Die Zwischenüberschriften
   sind deshalb der einzige Orientierungspunkt und stehen
   entsprechend deutlich über ihrem Absatz.
   ========================================================= */
.legal { max-width: 68ch; }
.legal section + section { margin-top: clamp(30px, 3.4vw, 44px); }
.legal h2 {
  font-family: var(--f-sans);
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: 12px;
}
.legal p, .legal address, .legal li {
  font-size: 16px; line-height: 1.75; color: var(--ink-2);
  font-style: normal;
}
.legal p + p, .legal address + p { margin-top: 12px; }
.legal a { color: var(--link); transition: color var(--t-fast); }
.legal a:hover { color: var(--link-hover); }
.legal ul { list-style: none; margin: 0; padding: 0; }
.legal li + li { margin-top: 8px; }

/* Die Datenschutzerklärung ist tiefer gegliedert als das Impressum:
   römische Abschnitte, darin nummerierte Punkte. Die zweite Ebene ist
   kleiner und trägt die Mono-Auszeichnung der Rubriken, damit sie sich
   auf einen Blick von der ersten unterscheidet, ohne eine weitere
   Schriftgröße einzuführen. */
.legal h3 {
  font-family: var(--f-sans);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin: 26px 0 10px;
}
.legal h2 + h3 { margin-top: 0; }
.legal ol { margin: 12px 0 0 1.5em; padding: 0; color: var(--ink-2); }
.legal ol li { padding-left: 4px; }
/* Aufzählungen mit eigenen Absätzen darunter brauchen etwas Luft, sonst
   klebt der Folgeabsatz an der letzten Zeile der Liste. */
.legal ol + p, .legal ul + p { margin-top: 14px; }

/* Angaben, die noch fehlen. Dieselbe zurückgenommene Kursive wie
   .is-offen bei den technischen Daten — eine Lücke sieht auf der
   ganzen Website gleich aus. Zusätzlich der gestrichelte Rahmen,
   weil ein Impressum mit fehlenden Pflichtangaben nicht online
   gehen darf und die Stelle deshalb nicht zu übersehen sein soll. */
.legal .is-offen {
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
  padding: 1px 8px;
}

/* Sprungziele landen nicht unter der Topbar. Die Leiste steht fest
   über dem Inhalt; ohne diese Zeile schöbe ein Anker wie
   unternehmen-historie.html#zeitstrahl die Überschrift genau darunter
   und der Leser sähe die Stelle nicht, zu der er gesprungen ist. */
main [id] { scroll-margin-top: calc(var(--topbar-h) + 24px); }

/* =========================================================
   STARTSEITEN-BÜHNE (.stage-cover) — ersetzt die frühere
   Split-Variante (.stage-split) und die freigestellte
   Drei-Bilder-Bühne (.hero-stage), beide verworfen. Vollflächiges
   Hintergrundfoto mit Titel/Lede darüber, darunter ein satter,
   durchscheinender 3-Spalten-Streifen (Icon + Kurztext).

   Bewusst fest hell auf dunklem Foto, unabhängig vom Hell-/Dunkel-
   Umschalter — wie .cover-hero das für die Bildköpfe der Unterseiten
   macht, weil der Text sonst nicht auf jedem Hintergrundfoto lesbar
   bliebe.

   Layout (Container/Columns/Sichtbarkeits-/Typografie-Helfer) kommt
   aus Bulma selbst; diese Klasse liefert nur, was Bulma nicht
   mitbringt: das Hintergrundfoto mit Verlaufs-Abdunklung, den
   durchscheinenden Streifen (kein has-background-blur in Bulma) und
   die runden Icon-Kacheln. .stage-cover selbst ist min-height: 100vh
   und füllt damit vorerst die ganze erste Bildschirmseite inklusive
   der fest positionierten .topbar darüber. ========================================================= */
.stage-cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.stage-cover-hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: calc(var(--topbar-h) + 64px) 0 48px;
  background:
    linear-gradient(180deg, rgba(6,18,25,0.6) 0%, rgba(6,18,25,0.72) 100%),
    url('../img/sme-firmengebaeude.jpg') center / cover no-repeat;
}
.stage-cover-kicker { font-size: 13px; letter-spacing: 0.08em; }
/* Bulmas is-size-1 setzt font-size mit !important (siehe bulma.css) —
   dagegen kommt keine eigene Regel an, egal wie spezifisch. Die Klasse
   ist daher gar nicht mehr im Markup, .title liefert nur noch Gewicht/
   Farbe als CSS-Variablen, Grösse und Zeilenumbruch kommen komplett
   von hier. max-width in ch statt px, damit der Umbruch unabhängig
   von der fluiden Grösse an derselben Zeichenzahl bleibt: 24ch fasst
   "Ihr Ansprechpartner für" (24 Zeichen) noch auf eine Zeile, "grosse
   Ideen" folgt auf die zweite — nie eine dritte, wie bei der
   vorherigen (zu grossen) Fassung. text-wrap: balance verteilt die
   zwei Zeilen gleichmässiger, statt eine lange und eine kurze. */
.stage-cover-title { max-width: 24ch; font-size: clamp(32px, 5.5vw, 84px); line-height: 1.05; text-wrap: balance; }
/* has-text-primary ist --bulma-primary (--blue-900, sehr dunkles Navy)
   und dadurch auf dem dunklen Foto kaum zu unterscheiden — derselbe
   Akzentton wie sonst auf dunklem Grund (.cover-hero .here,
   .hero-stage-title em), nicht die Bulma-Primärfarbe. */
.stage-cover-kicker-accent { color: var(--cyan-soft); }
/* Durchscheinender Streifen endet wieder exakt mit .stage-cover
   (min-height: 100vh) — also genau an der unteren Kante des
   Sichtbereichs, wenn die Seite ganz oben steht. Der Überlapp in die
   folgende Sektion hinein (negative margin-bottom) ist zurückgebaut. */
.stage-cover-features {
  background: rgba(6,18,25,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.stage-cover-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff;
  flex-shrink: 0;
}

/* NASHORN-FEATURE — adaptiert aus einer gelieferten Bulma-Vorlage
   (Bild links, Titel + Liste rechts, per is-narrow-widescreen erst ab
   Widescreen nebeneinander mit Lücke dazwischen, darunter volle Breite
   gestapelt). Eigene Klassen statt der Vorlagen-Utilities (has-mw-*,
   py-16, mb-16 …): diese Seite läuft auf Standard-Bulma, dessen
   Spacing-Skala nur bis 6/3rem reicht, während die Vorlage 1 Einheit =
   0.25rem (wie Tailwind) auch über 6 hinaus fortsetzt — Werte direkt
   in px/rem übersetzt, gleiches Muster wie bei .about-stats oben.
   Foto der Vorlage durch die Nashorn-Marke ersetzt: das offizielle Icon
   aus assets/img/SME-Logos/sme-icon-nashorn.svg, mit eingebautem
   Verlauf. Die zwei Merkmalsspalten der Vorlage (Icon + Titel + Text)
   sind durch .check-list ersetzt (gleiche Liste wie z.B. auf
   loesungen-sondermaschinenbau.html), seit hier echter Inhalt statt
   Platzhaltertext steht. */
.nashorn-feature { padding-top: 64px; padding-bottom: 64px; }         /* py-16 */

/* Beide Spalten sind normale (nicht is-narrow) Bulma-Columns, teilen
   sich die Zeile also immer ~hälftig statt erst ab Widescreen auf
   Inhaltsgrösse zu schrumpfen — sonst drückte is-justify-content-
   space-between die beiden geschrumpften Blöcke auseinander und liess
   eine grosse Lücke in der Mitte. Das Icon füllt seine Spalte per
   width:100%, mit Kappung nach oben für sehr breite Screens. */
.nashorn-feature-mark { display: block; width: 100%; max-width: 560px; height: auto; }

.nashorn-feature-copy-col { margin-bottom: 64px; }                    /* mb-16 */
.nashorn-feature-copy { max-width: 36rem; }                           /* has-mw-xl */
.nashorn-feature-title { max-width: 32rem; margin-bottom: 8px; }      /* has-mw-lg */
.nashorn-feature-copy .buttons { margin-top: 32px; }

@media (min-width: 769px) {
  .nashorn-feature-copy-col { margin-bottom: 0; }                     /* mb-0-tablet */
}

/* Sekundärer Button (Outline statt Fläche): gleiches navy->cyan-Hover-
   Muster wie .nav-cta, .svc-icon usw., statt des Bulma-Standard-Looks
   (Outline füllt sich sonst beim Hover einfach mit derselben Farbe). */
.button.is-outlined.is-primary {
  border-color: var(--blue-900); color: var(--blue-900); background: transparent;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}
.button.is-outlined.is-primary:hover {
  background: var(--cyan); border-color: var(--cyan); color: #fff;
}
[data-theme="dark"] .button.is-outlined.is-primary { border-color: var(--cyan-soft); color: var(--cyan-soft); }
[data-theme="dark"] .button.is-outlined.is-primary:hover { background: var(--cyan); border-color: var(--cyan); color: #04121A; }

/* Gefüllter Primär-Button (z.B. "Anfrage stellen" auf hero-card,
   cta-band usw.): Bulma faerbt --bulma-primary zwar schon in Markenblau
   ein, der Hover blieb aber ein generisches Bulma-Abdunkeln statt des
   navy->cyan-Wechsels, den .nav-cta site-weit für interaktive Elemente
   nutzt — gleiches Muster hier nachgezogen. */
.button.is-primary {
  transition: background 300ms ease, color 300ms ease, transform var(--t-fast);
}
.button.is-primary:hover, .button.is-primary:focus {
  background: var(--cyan); color: #fff; transform: translateY(-1px);
}
[data-theme="dark"] .button.is-primary { background: var(--cyan); color: #04121A; }
[data-theme="dark"] .button.is-primary:hover, [data-theme="dark"] .button.is-primary:focus { background: #fff; color: var(--blue-900); }

/* =========================================================
   HINWEIS "SEITE IM AUFBAU" — Textkarte links, isometrische
   Abbildung rechts. Steht unter dem Titelabschnitt und bleibt
   bewusst flach: eine Zeile Titel, eine Zeile Ansprache, dann
   Rufnummer und Schaltflaeche.
   Farben und Flaechen wie bei .hero-card und .spec-table:
   Kartengrund --bg-elev mit Kante --rule, Schrift --ink/--ink-2,
   Bildtafel --bg-inset, einziger Akzent --cyan. Eine dunkle
   Flaeche gibt es auf den Seiten sonst nur im Footer, sie haette
   den Hinweis aus dem Farbkonzept gehoben.
   Entfaellt auf einer Seite, sobald deren Inhalt vollstaendig ist.
   ========================================================= */
.buildnote { display: grid; grid-template-columns: 1fr; align-items: stretch; }

.buildnote-text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: clamp(22px, 2.4vw, 32px) clamp(24px, 2.8vw, 38px);
}

.buildnote-title {
  font-family: var(--f-sans); font-weight: 600;
  font-size: clamp(20px, 2vw, 25px); letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink); max-width: 40ch;
}
.buildnote-ask {
  margin-top: 8px; font-size: 15px; line-height: 1.6;
  color: var(--ink-2); max-width: 48ch;
}

.buildnote-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px;
}
.buildnote-tel {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  transition: color var(--t-fast);
}
.buildnote-tel:hover { color: var(--link); }
.buildnote-tel svg { flex: none; width: 16px; height: 16px; color: var(--cyan); }
[data-theme="dark"] .buildnote-tel svg { color: var(--cyan-soft); }

/* Schaltflaeche wortgleich zu .nav-cta, damit die Seite nur eine
   Gestalt fuer diese Handlung kennt. */
.buildnote-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 18px; border-radius: 999px;
  background: var(--blue-900); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast);
}
.buildnote-cta:hover { background: var(--cyan); color: #fff; transform: translateY(-1px); }
.buildnote-cta svg { width: 14px; height: 14px; }
[data-theme="dark"] .buildnote-cta { background: var(--cyan); color: #04121A; }
[data-theme="dark"] .buildnote-cta:hover { background: #fff; color: #04121A; }

/* Die Zeichnung bestimmt nicht die Hoehe des Banners: sie wird
   eingepasst und zieht die Zeile nicht auf. */
.buildnote-media {
  position: relative; z-index: 1;
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg-inset);
  padding: 18px clamp(18px, 2.4vw, 28px);
  /* gestapelt: die Bildflaeche schiebt sich unter die Karte */
  margin-top: -18px; padding-top: 30px;
  border-radius: 0 0 20px 20px;
}
.buildnote-media img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 128px;
}

@media (min-width: 1024px) {
  .buildnote { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .buildnote-media {
    margin-top: 0; margin-left: -22px;
    padding: 0;
    border-radius: 0 20px 20px 0;
  }
  /* Die Hoehe der Zeile setzt allein die Textkarte. Deshalb haengt die
     Zeichnung absolut in der Bildflaeche und passt sich ueber max-width
     und max-height ein. */
  .buildnote-media img {
    position: absolute; inset: 16px 24px 16px 46px; margin: auto;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buildnote-cta:hover { transform: none; }
}

/* =========================================================
   404-SEITE — zentrierter .pagehead statt des sonst linksbündigen.
   Eigene, sehr kurze Regel statt Umbau von .pagehead selbst, weil
   diese Seite die einzige mit zentriertem Kopf ist. Die große
   Zahl ersetzt das generische Fehlercode-Sprite der Vorlage durch
   ein Element aus der eigenen Bildsprache (Mono-Schrift, wie
   .eyebrow/.crumbs schon nutzen). */
.error-head { text-align: center; }
.error-head h1, .error-head .lede { margin-inline: auto; }
.error-code {
  font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.02em;
  font-size: clamp(56px, 10vw, 120px); line-height: 1;
  color: var(--bg-inset); margin-bottom: 8px;
}
[data-theme="dark"] .error-code { color: var(--bg-subtle); }
.error-head .buttons { justify-content: center; margin-top: 32px; }