/* ============================================================================
   HAEB Baustahlverlegung e. U. — Design-System "Stahl & Signal" 1.0
   Handgeschrieben. Kein Framework, keine externen Requests, kein Build-Schritt.

   1  Schriften          6  Header / Navigation      11  Kundenportal
   2  Tokens             7  Hero                     12  Formulare & Upload
   3  Reset & Basis      8  Sektionen & Karten       13  Footer
   4  Typo-Bausteine     9  Rechner (Tool)           14  Rechtstexte & CI-Seite
   5  Buttons           10  Konfigurator (Tool)      15  Motion & Responsive
   ============================================================================ */

/* ── 1  Schriften ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2  Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Marke – abgeleitet aus dem HAEB-Logo */
  --blau:        #2e4bab;   /* HAEB-Blau     – Primärfarbe, Vertrauen        */
  --blau-hell:   #4a6be0;   /* interaktiv auf dunklem Grund                  */
  --blau-tief:   #1d2f70;
  --gold:        #d5a952;   /* Bewehrungsgold – Akzent, Handlung             */
  --gold-hell:   #e8c98a;
  --gold-tief:   #a8801f;

  /* Neutrale – "Stahl & Beton" */
  --stahl:       #0b0e13;   /* Stahlschwarz  – dunkle Flächen                */
  --stahl-2:     #131a2b;   /* Nachtblau     – Karten auf dunkel             */
  --stahl-3:     #1c2436;
  --beton:       #f5f6f8;   /* helle Flächen                                  */
  --linie:       #e2e5ea;
  --linie-stark: #cfd5de;
  --grau:        #5a6472;
  --papier:      #ffffff;
  --text:        #141a24;
  --text-leise:  #525c6b;

  /* Status */
  --gruen:       #17945c;
  --rot:         #c0392b;

  /* Raster & Form */
  --wrap: 1240px;
  --r:    3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Elevation */
  --e1: 0 1px 2px rgba(11,14,19,.05), 0 4px 12px rgba(11,14,19,.05);
  --e2: 0 2px 4px rgba(11,14,19,.06), 0 20px 44px -14px rgba(11,14,19,.24);
  --e3: 0 30px 70px -20px rgba(11,14,19,.45);

  /* Schrift */
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion – drei Geschwindigkeiten, eine Kurve */
  --t-fast: 160ms;
  --t-mid:  320ms;
  --t-slow: 700ms;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-out-back: cubic-bezier(.34,1.4,.64,1);

  /* Layout-Variablen (von JS gesetzt) */
  --head-h: 84px;
}

/* ── 3  Reset & Basis ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.62;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "cv05" 1, "ss03" 1;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  /* 1.04 statt 0.96: Barlow Condensed hat lange Unterlängen (g, j, ß) und hohe
     Umlautpunkte – zu enge Zeilen schneiden sie in der Vertikalen ab. */
  line-height: 1.04;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.85rem); }
h4 { font-size: 1.15rem; line-height: 1.2; }

:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--stahl); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap-narrow { max-width: 900px; }

.skip {
  position: fixed; left: 1rem; top: -5rem; z-index: 300;
  background: var(--gold); color: var(--stahl); font-weight: 700;
  padding: .8rem 1.2rem; border-radius: var(--r); text-decoration: none;
  transition: top var(--t-mid) var(--ease);
}
.skip:focus { top: 1rem; }

/* Scroll-Fortschritt */
.progress {
  position: fixed; inset: 0 auto auto 0; z-index: 150;
  height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hell));
  pointer-events: none;
}

/* ── 4  Typo-Bausteine ───────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--gold); flex: none;
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease) 120ms;
}
/* Der Strich wächst nur mit, wenn der Block selbst eingeblendet wird. */
.js .reveal .eyebrow::before, .js .eyebrow.reveal::before { transform: scaleX(0); }
.js .reveal.in .eyebrow::before, .js .eyebrow.reveal.in::before { transform: scaleX(1); }

.hl { color: var(--gold); }
.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.32rem); color: rgba(255,255,255,.82); max-width: 46ch; }
.sec-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.sec-sub { margin-top: 1.15rem; color: var(--text-leise); font-size: 1.06rem; }
.section-dark .sec-sub, .cta-band .sec-sub, .tool-dark .sec-sub { color: rgba(255,255,255,.72); }
.mono-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau);
}

/* Wort-für-Wort-Reveal für Headlines.
   Die Maske bekommt oben und unten Luft (padding), damit Unterlängen und
   Umlautpunkte nicht abgeschnitten werden; der negative Rand hält das Layout
   an derselben Stelle. Verschoben wird um 130 %, damit trotz Polsterung
   nichts vorzeitig sichtbar ist. */
.split-word {
  display: inline-block; vertical-align: bottom; overflow: hidden;
  padding: .1em .04em .2em; margin: -.1em -.04em -.2em;
}
.split-word > span { display: inline-block; transform: translateY(130%); transition: transform var(--t-slow) var(--ease); }
.in .split-word > span { transform: none; }

/* ── 5  Buttons ──────────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--gold); color: var(--stahl);
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: 1.05rem 1.8rem; border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(213,169,82,.75); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-gold:hover { background: var(--gold-hell); }
.btn-blau { background: var(--blau); color: #fff; }
.btn-blau:hover { background: var(--blau-hell); box-shadow: 0 12px 26px -12px rgba(46,75,171,.8); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; box-shadow: none; }
/* Auf hellem Grund muss der Ghost-Button umgedreht werden – dafür trägt der
   umgebende Block die Klasse .on-light (bzw. .panel-light). */
.on-light .btn-ghost, .panel-light .btn-ghost { color: var(--text); border-color: var(--linie-stark); }
.on-light .btn-ghost:hover, .panel-light .btn-ghost:hover { background: var(--beton); border-color: var(--grau); }
.btn-sm { padding: .7rem 1.2rem; font-size: .85rem; }
.btn-lg { padding: 1.25rem 2.2rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-quiet {
  background: none; border-color: var(--linie-stark); color: var(--text);
  font-weight: 600;
}
.btn-quiet:hover { background: var(--beton); box-shadow: none; }

/* Ripple (von JS erzeugt) */
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none;
  background: rgba(255,255,255,.45); animation: ripple 620ms var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .92rem; color: var(--blau); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease);
}
.link-arrow::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { border-color: var(--blau); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Status-Pille "jetzt erreichbar" */
.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem .4rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.on-light .pill { background: var(--beton); border-color: var(--linie); color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); position: relative; flex: none; }
.dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--gruen); opacity: .6; animation: ping 2.2s var(--ease) infinite;
}
.dot.off { background: var(--grau); }
.dot.off::after { display: none; }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 70%,100% { transform: scale(1.5); opacity: 0; } }

/* ── 6  Kopfbereich: Servicezeile + Navigation ──────────────────────────────
   Zwei Ebenen: oben eine schmale Servicezeile (Erreichbarkeit, Telefon, Mail,
   Kundenportal), darunter die eigentliche Navigation. Beim Scrollen fährt die
   Servicezeile ein und nur die Navigation bleibt stehen. */
.headerbar { position: fixed; inset: 0 0 auto; z-index: 100; }

.topbar {
  background: var(--stahl); color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .78rem;
  height: 38px; overflow: hidden;
  transition: height var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.headerbar.is-stuck .topbar { height: 0; opacity: 0; border-bottom-color: transparent; }
.topbar-inner { display: flex; align-items: center; gap: 1.25rem; height: 38px; max-width: 1440px; }
.topbar a { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--gold); }
.topbar svg { width: 14px; height: 14px; fill: currentColor; opacity: .75; }
.topbar .spacer { margin-left: auto; }
.topbar .sep { width: 1px; height: 16px; background: rgba(255,255,255,.16); }
.topbar-portal { color: var(--gold) !important; font-weight: 600; }
.topbar-portal:hover { color: var(--gold-hell) !important; }
.topbar .status { display: inline-flex; align-items: center; gap: .5rem; }

.site-header {
  background: rgba(11,14,19,.82);
  transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.headerbar.is-stuck .site-header {
  background: rgba(11,14,19,.96);
  -webkit-backdrop-filter: saturate(170%) blur(12px);
  backdrop-filter: saturate(170%) blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 34px -22px rgba(0,0,0,.9);
}
.hero-page .site-header { background: transparent; }
.hero-page .topbar { background: rgba(11,14,19,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-page .headerbar.is-stuck .topbar { background: var(--stahl); }
.header-inner {
  display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 1.6rem);
  min-height: 76px; max-width: 1440px;
  transition: min-height var(--t-mid) var(--ease);
}
.headerbar.is-stuck .header-inner { min-height: 64px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; flex: none; }
.brand img { width: 54px; height: auto; transition: width var(--t-mid) var(--ease); }
.headerbar.is-stuck .brand img { width: 46px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; color: #fff; }
.brand-txt strong { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: .1em; }
.brand-txt em {
  font-style: normal; font-size: .63rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}

.nav ul { display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, 1.35rem); }
.nav a {
  position: relative; display: block; padding: .5rem .1rem;
  color: rgba(255,255,255,.86); text-decoration: none; white-space: nowrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.nav-portal { color: var(--gold); }

.header-cta { display: flex; align-items: center; gap: .9rem; flex: none; }
.tel { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.tel svg { width: 17px; height: 17px; fill: var(--gold); }
.tel:hover { color: var(--gold-hell); }
.nav-cta { display: none; }

.burger { display: none; width: 46px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; }
.burger span { display: block; height: 2px; margin: 7px auto; width: 26px; background: #fff; transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile Aktionsleiste */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: none; gap: 1px; background: rgba(255,255,255,.12);
  transform: translateY(110%); transition: transform var(--t-mid) var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar.show { transform: none; }
.actionbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .7rem .5rem; background: var(--stahl); color: #fff;
  text-decoration: none; font-size: .7rem; font-weight: 600; letter-spacing: .04em;
}
.actionbar a.primary { background: var(--gold); color: var(--stahl); }
.actionbar svg { width: 18px; height: 18px; fill: currentColor; }

/* ── 7  Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: min(96svh, 940px);
  display: flex; align-items: flex-end;
  padding: clamp(9rem, 16vh, 12rem) 0 clamp(3rem, 7vh, 5rem);
  background: var(--stahl); color: #fff; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: saturate(.8) contrast(1.06);
  transform: scale(1.06); transition: transform 1.6s var(--ease);
}
.hero-media img.loaded { transform: scale(1); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(11,14,19,.95) 0%, rgba(11,14,19,.8) 44%, rgba(11,14,19,.3) 78%, rgba(11,14,19,.6) 100%),
    linear-gradient(to top, rgba(11,14,19,.97) 0%, rgba(11,14,19,0) 58%);
}
/* Bewehrungsraster – zeichnet sich selbst */
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; }
.hero-grid line { stroke: rgba(213,169,82,.32); stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.hero-grid.draw line { animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-inner { position: relative; }
.hero h1 { max-width: 17ch; margin-bottom: 1.5rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; align-items: center; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }

.hero-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(2.5rem, 6vh, 3.75rem);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden;
}
.hero-facts li { background: rgba(11,14,19,.52); padding: 1.15rem 1.25rem; }
.hero-facts b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); color: var(--gold);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hero-facts span { display: block; margin-top: .35rem; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.7); }

.scroll-cue { position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.42); border-radius: 12px; }
.scroll-cue span { position: absolute; left: 50%; top: 6px; translate: -50% 0; width: 3px; height: 7px; border-radius: 2px; background: var(--gold); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%,100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; transform: translateY(9px); } }

/* ── 8  Sektionen & Karten ───────────────────────────────────────────────── */
.section { padding-block: clamp(4.5rem, 9vh, 8rem); }
.section-tint { background: var(--beton); }
.section-dark { background: var(--stahl); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

.trustbar { background: var(--blau); color: #fff; }
.trustbar-inner { display: flex; align-items: center; gap: 1.4rem; padding-block: 1.35rem; }
.trustbar img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; flex: none; }
.trustbar p { font-size: .93rem; color: rgba(255,255,255,.85); max-width: 92ch; }
.trustbar strong { color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--e1);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--e2); border-color: var(--linie-stark); }
.card:hover::after { transform: scaleX(1); }
.card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--stahl-3); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.card:hover .card-img img { transform: scale(1.06); }
.card-body { padding: clamp(1.4rem, 2.2vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.tag { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin-bottom: .5rem; }
.card h3 { margin-bottom: .7rem; }
.card-body > p { color: var(--text-leise); }
.ticks { margin-top: 1.2rem; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: .93rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 3px rgba(213,169,82,.2); }
.card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: 1.4rem; }

/* Warum wir */
.split { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-txt .btn { margin-top: 2rem; }
.values { display: grid; gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg); overflow: hidden; }
.values li { background: var(--stahl-2); padding: clamp(1.35rem, 2.3vw, 2rem); transition: background var(--t-mid) var(--ease); }
.values li:hover { background: var(--stahl-3); }
/* Nur die Nummerierung in der Werteliste – bewusst eng gefasst, damit die
   Klasse nicht versehentlich Tabellenzellen erwischt. */
.values .num { display: block; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .18em; color: var(--gold); margin-bottom: .6rem; }
.values h3 { margin-bottom: .5rem; font-size: 1.35rem; }
.values p { color: rgba(255,255,255,.68); font-size: .95rem; }

/* Ablauf mit mitwachsender Linie */
.steps-wrap { position: relative; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.steps li { position: relative; padding-top: 3.2rem; }
.step-n {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--blau); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 0 0 0 rgba(46,75,171,.35);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.steps li.in .step-n { box-shadow: 0 0 0 8px rgba(46,75,171,.12); }
.steps h3 { margin-bottom: .5rem; font-size: 1.3rem; }
.steps p { color: var(--text-leise); font-size: .95rem; }
.step-rail { position: absolute; top: 1.25rem; left: 3.2rem; right: 1rem; height: 2px; background: var(--linie); }
.step-rail i { display: block; height: 100%; width: 0; background: var(--gold); transition: width var(--t-slow) var(--ease); }

/* Geschichte & Team */
.hist-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.timeline { position: relative; padding-left: 1.9rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: .55rem; bottom: .55rem; width: 2px; background: linear-gradient(to bottom, var(--gold), var(--blau)); }
.timeline li { position: relative; padding-bottom: 1.7rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -1.9rem; top: .5rem; width: 14px; height: 14px; border-radius: 50%; background: var(--beton); border: 3px solid var(--blau); }
.timeline time { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--grau); margin-bottom: .25rem; }
.timeline p { font-size: .97rem; color: var(--text-leise); }
.timeline strong { color: var(--text); }

.team { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 2rem); box-shadow: var(--e1); }
.team-h { font-size: 1.3rem; margin-bottom: 1.3rem; }
.person { display: flex; gap: 1rem; align-items: center; padding-block: 1rem; border-top: 1px solid var(--linie); }
.person:first-of-type { border-top: 0; padding-top: 0; }
.avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blau); color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.person h4 { margin-bottom: .1rem; }
.role { font-size: .85rem; color: var(--text-leise); }
.person a { font-size: .92rem; font-weight: 600; color: var(--blau); text-decoration: none; }
.person a:hover { text-decoration: underline; }
.team-note { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--text-leise); }

/* Logoband direkt unter dem Hero – zeigt sofort, für wen wir arbeiten */
.logoband { background: var(--beton); border-bottom: 1px solid var(--linie); padding-block: 1.75rem .5rem; }
.logoband-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: .25rem; }
.logoband-head .eyebrow { margin-bottom: 0; }
.logoband-head p:last-child { font-size: .92rem; color: var(--text-leise); }
.logoband .marquee-track { align-items: center; gap: clamp(2.25rem, 4vw, 3.5rem); }
.logoband .logotile { display: flex; align-items: center; height: 40px; }
.logoband img { max-height: 36px; max-width: 150px; width: auto; object-fit: contain; }
/* Ein reines Wortlogo (kein Bild) bekommt Firmennamen als Schriftzug. */
.logoband .wordmark {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700; white-space: nowrap;
  color: var(--stahl); opacity: .68;
}

/* ── Fremdlogos: natürliche Farbe, einheitliche Kachel ───────────────────
   Logos kommen in sehr unterschiedlicher Qualität – wir zwingen sie nicht in
   Graustufen (das ließ z. B. Swietelsky und Felbermayr wie deaktiviert
   aussehen), sondern geben jedem Logo eine helle Kachel mit fester Höhe.
   Ein einzelnes, sehr helles Logo (HABAU: blassgelb) bekommt zusätzlich eine
   dunkle Kachel, damit es nicht im Hintergrund verschwindet. */
.logotile {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r);
  padding: .5rem .9rem;
}
.logotile.dunkel { background: var(--stahl); border-color: var(--stahl); }
.logotile img { max-height: 30px; max-width: 130px; width: auto; object-fit: contain; }
.refgroup-head .logotile { padding: .3rem .6rem; }
.refgroup-head .logotile img { max-height: 22px; }

/* Partner-Laufband */
.marquee { position: relative; overflow: hidden; padding-block: 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: clamp(2.5rem, 6vw, 5rem); animation: slide 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img { height: 54px; width: auto; object-fit: contain; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Galerie */
.gallery { padding-block: clamp(4rem, 9vh, 7.5rem); background: var(--beton); }
.gal-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 420px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 clamp(1.25rem, 4vw, 2.5rem) 1rem; scrollbar-width: thin; }
.gal-strip li { scroll-snap-align: center; border-radius: var(--r-lg); overflow: hidden; background: var(--stahl-3); }
.gal-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 600ms var(--ease); }
.gal-strip li:hover img { transform: scale(1.05); }

/* CTA-Band */
.cta-band { position: relative; overflow: hidden; background: var(--blau); color: #fff; }
.cta-band::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 40rem; height: 40rem; background: radial-gradient(circle, rgba(213,169,82,.28), transparent 62%); }
.cta-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(3rem, 6vh, 4.5rem); }
.cta-inner h2 { max-width: 22ch; }
.cta-inner p { margin-top: .85rem; color: rgba(255,255,255,.82); max-width: 46ch; }
.cta-btns { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ── 9  Rechner (Tool) ───────────────────────────────────────────────────── */
.tool-dark { background: var(--stahl); color: #fff; }
.calc { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.panel {
  background: var(--stahl-2); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
.panel-light { background: var(--papier); border-color: var(--linie); color: var(--text); box-shadow: var(--e1); }
.panel h3 { font-size: 1.45rem; margin-bottom: .35rem; }
.panel-note { font-size: .84rem; color: rgba(255,255,255,.6); }
.panel-light .panel-note { color: var(--text-leise); }

.seg { display: flex; gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.5rem; }
.seg button {
  flex: 1; padding: .8rem .6rem; border: 0; cursor: pointer;
  background: var(--stahl-3); color: rgba(255,255,255,.7);
  font-size: .85rem; font-weight: 600; letter-spacing: .03em;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button[aria-selected="true"] { background: var(--gold); color: var(--stahl); }
.seg button:hover:not([aria-selected="true"]) { background: rgba(255,255,255,.1); color: #fff; }

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.calc-field { display: flex; flex-direction: column; gap: .4rem; }
.calc-field label { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.calc-field input, .calc-field select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r); padding: .8rem .9rem; color: #fff;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.calc-field select option { color: #111; }
.calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
.calc-rows { display: grid; gap: .75rem; margin-top: 1.25rem; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .6rem; align-items: end; }
.calc-row .calc-field label { font-size: .68rem; }
.row-del {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); background: none;
  color: rgba(255,255,255,.6); border-radius: var(--r); cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.row-del:hover { color: var(--rot); border-color: var(--rot); }
.calc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; align-items: center; }
.btn-add {
  background: none; border: 1px dashed rgba(255,255,255,.3); color: rgba(255,255,255,.8);
  padding: .7rem 1.1rem; border-radius: var(--r); cursor: pointer; font-size: .85rem; font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-add:hover { border-color: var(--gold); color: var(--gold); }

/* Ergebnis */
.result-big { display: flex; align-items: baseline; gap: .5rem; margin-block: .5rem 1.25rem; }
.result-big b {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(3rem, 2rem + 4vw, 5rem); color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.result-big span { font-size: 1.15rem; font-weight: 600; color: rgba(255,255,255,.7); }
.result-list { display: grid; gap: .1rem; }
.result-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .93rem; }
.result-list dt, .result-list span:first-child { color: rgba(255,255,255,.62); }
.result-list b { font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; display: flex; margin-block: 1.25rem .5rem; }
.bar i { display: block; height: 100%; transition: width var(--t-slow) var(--ease); }
.bar i:nth-child(1) { background: var(--gold); }
.bar i:nth-child(2) { background: var(--blau-hell); }
.bar-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: rgba(255,255,255,.6); }
.bar-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.bar-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hint {
  margin-top: 1.25rem; padding: .9rem 1rem; border-left: 3px solid var(--gold);
  background: rgba(213,169,82,.1); font-size: .84rem; color: rgba(255,255,255,.78);
  border-radius: 0 var(--r) var(--r) 0;
}

/* ── 10  Konfigurator (Tool) ─────────────────────────────────────────────── */
.wiz { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.wiz-steps { display: flex; gap: .5rem; margin-bottom: 2rem; }
.wiz-steps li { flex: 1; }
.wiz-steps b { display: block; height: 4px; border-radius: var(--r-pill); background: var(--linie); overflow: hidden; }
.wiz-steps b::after { content: ""; display: block; height: 100%; width: 0; background: var(--gold); transition: width var(--t-mid) var(--ease); }
.wiz-steps li.done b::after, .wiz-steps li.current b::after { width: 100%; }
.wiz-steps li.current b::after { background: var(--blau); }
.wiz-steps span { display: block; margin-top: .55rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.wiz-steps li.current span { color: var(--blau); }
.wiz-steps li.done span { color: var(--text); }

.wiz-panel { position: relative; }
.wiz-step { display: none; }
.wiz-step.active { display: block; animation: stepIn var(--t-mid) var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } }
.wiz-step h3 { font-size: 1.7rem; margin-bottom: .5rem; }
.wiz-step > p { color: var(--text-leise); margin-bottom: 1.6rem; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: block; height: 100%; padding: 1.15rem 1.2rem;
  border: 1px solid var(--linie); border-radius: var(--r-md); background: var(--papier);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.choice strong { display: block; font-weight: 700; margin-bottom: .25rem; }
.choice em { font-style: normal; font-size: .85rem; color: var(--text-leise); }
.choice span:hover { border-color: var(--linie-stark); transform: translateY(-2px); }
.choice input:checked + span { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(46,75,171,.16); }
.choice input:focus-visible + span { outline: 3px solid var(--blau-hell); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: .55rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--linie); background: var(--papier); cursor: pointer;
  font-size: .88rem; font-weight: 600;
  transition: all var(--t-fast) var(--ease);
}
.chip input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--blau-hell); outline-offset: 2px; }

.wiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }

/* Zusammenfassung */
.summary { position: sticky; top: calc(var(--head-h) + 1.5rem); }
.summary h4 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin-bottom: 1.1rem; }
.summary dl { display: grid; gap: .1rem; }
.summary dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-top: .9rem; }
.summary dd { font-weight: 600; font-size: .95rem; }
.summary dd.empty { font-weight: 400; color: var(--linie-stark); }
.ring { display: grid; place-items: center; margin-bottom: 1.25rem; }
.ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: var(--linie); }
.ring .fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset var(--t-mid) var(--ease); }
.ring b { position: absolute; font-family: var(--display); font-size: 1.5rem; }
.ring-wrap { position: relative; display: grid; place-items: center; }

/* ── 11  Kundenportal ───────────────────────────────────────────────────── */
.portal-hero { position: relative; background: var(--stahl); color: #fff; overflow: hidden; padding: calc(var(--head-h) + clamp(3rem,7vh,5rem)) 0 clamp(3rem,7vh,5rem); }
.portal-hero::before { content: ""; position: absolute; inset: auto auto -50% -10%; width: 46rem; height: 46rem; background: radial-gradient(circle, rgba(46,75,171,.45), transparent 60%); }
.portal-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.login-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.login-card h2 { font-size: 1.9rem; margin-bottom: .3rem; }
.login-card .panel-note { margin-bottom: 1.5rem; }
.login-card .field label { color: rgba(255,255,255,.75); }
.login-card .field input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #fff;
}
.login-card .field input:focus { background: rgba(255,255,255,.12); border-color: var(--gold); box-shadow: none; }
.login-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.login-foot a { color: var(--gold); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
.notice {
  display: none; margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--r-md);
  background: rgba(213,169,82,.12); border: 1px solid rgba(213,169,82,.35);
  font-size: .88rem; color: rgba(255,255,255,.88);
}
.notice.show { display: block; animation: stepIn var(--t-mid) var(--ease); }
.notice strong { color: var(--gold); }

.feature-list { display: grid; gap: 1.1rem; margin-top: 2rem; }
.feature-list li { display: flex; gap: .9rem; align-items: flex-start; }
.feature-list .fi { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(213,169,82,.16); color: var(--gold); font-family: var(--display); font-weight: 700; }
.feature-list h4 { color: #fff; margin-bottom: .15rem; }
.feature-list p { font-size: .9rem; color: rgba(255,255,255,.66); }

/* Demo-Ansicht */
.demo-shell { border: 1px solid var(--linie); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e2); background: var(--papier); }
.demo-bar { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; background: var(--stahl); color: #fff; font-size: .82rem; }
.demo-bar .dots { display: flex; gap: .35rem; }
.demo-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); }
.demo-badge { margin-left: auto; background: var(--gold); color: var(--stahl); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--r); }
.demo-body { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; }
.demo-side { background: var(--beton); border-right: 1px solid var(--linie); padding: 1.2rem 1rem; }
.demo-side p { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); margin-bottom: .8rem; }
.demo-side a { display: block; padding: .55rem .7rem; border-radius: var(--r); font-size: .89rem; font-weight: 600; text-decoration: none; color: var(--text-leise); }
.demo-side a.on { background: var(--blau); color: #fff; }
.demo-main { padding: clamp(1.2rem, 2.4vw, 1.9rem); }
.demo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.demo-kpi { border: 1px solid var(--linie); border-radius: var(--r-md); padding: 1rem; }
.demo-kpi b { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--blau); }
.demo-kpi span { font-size: .76rem; color: var(--text-leise); }
.demo-table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.demo-table th { text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); padding: .6rem .5rem; border-bottom: 1px solid var(--linie); }
.demo-table td { padding: .8rem .5rem; border-bottom: 1px solid var(--linie); }
.state { display: inline-block; padding: .2rem .55rem; border-radius: var(--r); font-size: .74rem; font-weight: 700; }
.state.ok { background: rgba(23,148,92,.12); color: var(--gruen); }
.state.run { background: rgba(46,75,171,.12); color: var(--blau); }
.state.wait { background: rgba(213,169,82,.18); color: var(--gold-tief); }

/* ── 12  Formulare & Upload ─────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.contact-info dl { display: grid; gap: 1.25rem; }
.contact-info dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
.contact-info dd { margin-top: .25rem; font-size: 1.02rem; }
.contact-info a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); }
.contact-info a:hover { color: var(--blau); border-color: var(--blau); }
.map-card { margin-top: 2rem; border: 1px solid var(--linie); border-radius: var(--r-lg); overflow: hidden; }
.map-card img { width: 100%; height: 150px; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.95); }
.map-card .btn { margin: 1rem; }
.map-note { padding: 0 1rem 1rem; font-size: .79rem; color: var(--text-leise); }

.form { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--e1); }
.form-note { font-size: .83rem; color: var(--text-leise); margin-bottom: 1.4rem; }
.req { color: var(--blau); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.field label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--beton); border: 1px solid var(--linie); border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--papier); border-color: var(--blau); box-shadow: 0 0 0 3px rgba(46,75,171,.15); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--rot); background: #fdf3f2; }
.err { display: none; margin-top: .35rem; font-size: .79rem; font-weight: 600; color: var(--rot); }
.field.invalid .err, .err.show { display: block; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .87rem; color: var(--text-leise); margin-block: .4rem 1.2rem; }
.check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--blau); flex: none; }
.check a { color: var(--blau); }
.form-status { margin-top: 1rem; font-size: .92rem; font-weight: 600; min-height: 1.4em; }
.form-status.ok { color: var(--gruen); }
.form-status.bad { color: var(--rot); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Datei-Upload */
.drop {
  position: relative; display: grid; place-items: center; gap: .5rem; text-align: center;
  padding: 1.8rem 1.25rem; border: 2px dashed var(--linie-stark); border-radius: var(--r-md);
  background: var(--beton); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.drop:hover, .drop.over { border-color: var(--blau); background: rgba(46,75,171,.05); }
.drop.over { border-style: solid; }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop svg { width: 30px; height: 30px; fill: var(--blau); }
.drop b { font-size: .95rem; }
.drop small { color: var(--text-leise); font-size: .79rem; }
.files { display: grid; gap: .5rem; margin-top: .9rem; }
.files li {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .8rem; border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--papier); font-size: .87rem;
  animation: stepIn var(--t-fast) var(--ease);
}
.files .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.files .fsize { color: var(--text-leise); font-variant-numeric: tabular-nums; font-size: .8rem; }
.files button { border: 0; background: none; color: var(--grau); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.files button:hover { color: var(--rot); }
.files li.bad { border-color: var(--rot); background: #fdf3f2; }
.files li.bad .fsize { color: var(--rot); }

/* Erfolgs-Zustand */
.sent { display: none; text-align: center; padding: clamp(2rem,4vw,3rem) 1rem; }
.sent.show { display: block; animation: stepIn var(--t-mid) var(--ease); }
.sent .tick { width: 68px; height: 68px; margin: 0 auto 1.25rem; border-radius: 50%; background: rgba(23,148,92,.12); display: grid; place-items: center; }
.sent .tick svg { width: 34px; height: 34px; stroke: var(--gruen); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick 600ms var(--ease) 120ms forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.sent h3 { margin-bottom: .6rem; }
.sent p { color: var(--text-leise); max-width: 44ch; margin-inline: auto; }

/* ── 13  Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--stahl); color: rgba(255,255,255,.66); padding-top: clamp(3rem, 7vh, 5rem); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.75rem, 3vw, 3rem); padding-bottom: 3rem; }
.foot-logo { width: 84px; }
.foot-claim { margin-top: 1.1rem; font-size: .9rem; max-width: 30ch; }
.site-footer h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.site-footer p { font-size: .91rem; margin-bottom: .8rem; }
.site-footer ul { display: grid; gap: .55rem; font-size: .91rem; }
.site-footer a { text-decoration: none; color: rgba(255,255,255,.72); transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--gold); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }

.totop {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gold); color: var(--stahl); font-size: 1.1rem; font-weight: 700;
  box-shadow: var(--e2); opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }

/* ── 13b  Seitenkopf der Unterseiten ────────────────────────────────────── */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--stahl); color: #fff;
  padding: calc(var(--head-h) + clamp(3rem,7vh,5rem)) 0 clamp(2.75rem,6vh,4.5rem);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(11,14,19,.96) 0%, rgba(11,14,19,.84) 48%, rgba(11,14,19,.5) 100%);
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 1.25rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 1.1rem; }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs span::before { content: "/"; margin-right: .5rem; opacity: .5; }

/* Kennzahlenband */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px;
        background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
        border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(2rem,4vh,3rem); }
.kpis li { background: rgba(11,14,19,.55); padding: 1.15rem 1.25rem; }
.kpis b { display: block; font-family: var(--display); font-weight: 700; line-height: 1.04;
          font-size: clamp(1.7rem,1.1rem + 1.5vw,2.4rem); color: var(--gold); font-variant-numeric: tabular-nums; }
.kpis span { display: block; margin-top: .3rem; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.7); }
.kpis.on-light { background: var(--linie); border-color: var(--linie); }
.kpis.on-light li { background: var(--papier); }
.kpis.on-light b { color: var(--blau); }
.kpis.on-light span { color: var(--text-leise); }

/* ── 13c  Referenzen: Werkzeugleiste, Tabelle, Detailansicht ───────────── */
.reftools { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-lg);
            padding: clamp(1.1rem,2vw,1.6rem); box-shadow: var(--e1); margin-bottom: 1.75rem;
            position: sticky; top: calc(var(--head-h) + .75rem); z-index: 20; }
.reftools-row { display: grid; grid-template-columns: minmax(220px,2fr) repeat(auto-fit, minmax(150px,1fr)); gap: .85rem; }
.reftools .calc-field label, .reftools label.lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau); margin-bottom: .35rem; display: block;
}
.reftools input[type="search"], .reftools select {
  width: 100%; padding: .7rem .85rem; background: var(--beton);
  border: 1px solid var(--linie); border-radius: var(--r); font-size: .93rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.reftools input[type="search"]:focus, .reftools select:focus {
  outline: none; background: var(--papier); border-color: var(--blau); box-shadow: 0 0 0 3px rgba(46,75,171,.15);
}
.reftools-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem;
                 padding-top: 1rem; border-top: 1px solid var(--linie); }
.reftools-foot .count { font-size: .9rem; color: var(--text-leise); margin-right: auto; }
.reftools-foot .count b { color: var(--text); font-variant-numeric: tabular-nums; }
.quickfilter { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.quickfilter button {
  padding: .45rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--linie);
  background: var(--papier); cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--text-leise);
  transition: all var(--t-fast) var(--ease);
}
.quickfilter button:hover { border-color: var(--linie-stark); color: var(--text); }
.quickfilter button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }

.refgroup { margin-bottom: 2.25rem; }
.refgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
                 padding: .85rem 0; border-bottom: 2px solid var(--stahl); margin-bottom: .25rem; }
.refgroup-head h3 { font-size: 1.35rem; }
.refgroup-head .meta { font-size: .82rem; color: var(--text-leise); margin-left: auto; font-variant-numeric: tabular-nums; }

.reftable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.reftable th {
  text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grau); padding: .7rem .6rem; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.reftable th.num, .reftable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reftable th[aria-sort] { cursor: pointer; }
.reftable th[aria-sort]:hover { color: var(--blau); }
.reftable th[aria-sort="ascending"]::after { content: " ↑"; color: var(--gold); }
.reftable th[aria-sort="descending"]::after { content: " ↓"; color: var(--gold); }
.reftable tbody tr { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.reftable tbody tr:hover, .reftable tbody tr:focus-visible { background: var(--beton); }
.reftable td { padding: .8rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.reftable .bv { font-weight: 600; }
.reftable .firma { color: var(--text-leise); font-size: .86rem; }
.reftable .ort { color: var(--text-leise); }
.reftable .leer { color: var(--linie-stark); }
.reftable .hinweis-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
                         background: var(--gold); margin-left: .4rem; vertical-align: middle; }

.refempty { padding: 3rem 1rem; text-align: center; color: var(--text-leise); }
.refempty b { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--text); margin-bottom: .5rem; }

/* Detailansicht */
dialog.refdetail {
  width: min(680px, calc(100vw - 2rem)); max-height: min(88vh, 900px);
  padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: var(--e3);
  color: var(--text); background: var(--papier);
}
dialog.refdetail::backdrop { background: rgba(11,14,19,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.refdetail-head { position: relative; padding: clamp(1.4rem,3vw,2rem); background: var(--stahl); color: #fff; }
.refdetail-head p.eyebrow { margin-bottom: .6rem; }
.refdetail-head h2 { font-size: clamp(1.5rem,1.2rem + 1.2vw,2.1rem); }
.refdetail-head .firma { margin-top: .5rem; color: rgba(255,255,255,.72); font-size: .95rem; }
.refdetail-close {
  position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: none; color: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.refdetail-close:hover { background: rgba(255,255,255,.12); }
.refdetail-body { padding: clamp(1.4rem,3vw,2rem); overflow-y: auto; }
.refdetail-body dl { display: grid; grid-template-columns: minmax(120px,180px) 1fr; gap: .1rem 1.5rem; }
.refdetail-body dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); padding: .7rem 0 0; }
.refdetail-body dd { padding: .7rem 0 0; font-weight: 600; }
.refdetail-body dd.leer { font-weight: 400; color: var(--linie-stark); }
.refdetail-note { margin-top: 1.5rem; padding: .9rem 1.1rem; background: rgba(213,169,82,.12);
                  border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; font-size: .88rem; }
.refdetail-foot { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0 clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2rem); }

/* Partner-Logowand — Logo (falls vorhanden) in natürlicher Farbe, darunter
   IMMER der ausgeschriebene Firmenname, damit niemand raten muss, wer hinter
   einer Wortmarke oder einem unbekannten Logo steckt. */
.logowall { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1px;
            background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-lg); overflow: hidden; }
.logowall li { background: var(--papier); display: grid; place-items: center; gap: .55rem;
               padding: clamp(1.25rem,2.5vw,1.75rem) 1rem; text-align: center; }
.logowall .logotile { min-height: 44px; }
.logowall img { max-height: 40px; max-width: 130px; width: auto; object-fit: contain; }
.logowall .lw-name { font-size: .86rem; font-weight: 700; color: var(--stahl); line-height: 1.3; }
.logowall small { font-size: .72rem; color: var(--text-leise); }

/* Laufende Baustellen – Karte je Auftraggeber mit Logo oder Wortmarke */
.laufend { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap: 1rem; margin-top: 1.75rem; }
.laufend li {
  display: flex; flex-direction: column; gap: .75rem;
  border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: var(--r-md);
  padding: 1.15rem 1.25rem; background: var(--papier);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.laufend li:hover { transform: translateY(-3px); box-shadow: var(--e1); }
.laufend .logotile { align-self: flex-start; }
.laufend .firma { font-size: .82rem; color: var(--text-leise); margin-top: auto; font-weight: 600; }
.laufend .bvh { font-weight: 700; font-size: 1rem; letter-spacing: .02em; }

.badge-laufend {
  display: inline-block; vertical-align: middle;
  padding: .12rem .5rem; border-radius: var(--r-pill);
  background: rgba(23,148,92,.14); color: var(--gruen);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.section-dark .badge-laufend, .refdetail-head .badge-laufend { background: rgba(23,148,92,.24); color: #6ee7a8; }

/* „Weitere BVH beantragen“ unter jeder Auftraggeber-Gruppe */
.refmore { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .9rem 0 0; }
.refmore-note { font-size: .8rem; color: var(--text-leise); }

/* Formulardialoge (weitere BVH, CSV-Freigabe) */
dialog.formdialog {
  width: min(560px, calc(100vw - 2rem));
  padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: var(--e3);
  color: var(--text); background: var(--papier);
}
dialog.formdialog::backdrop { background: rgba(11,14,19,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.formdialog .refdetail-head { padding: clamp(1.3rem,2.5vw,1.8rem); }
dialog.formdialog .dlg-body { padding: clamp(1.3rem,2.5vw,1.8rem); }
dialog.formdialog .form { border: 0; box-shadow: none; padding: 0; background: none; }
dialog.formdialog .sent { padding: 1rem 0 0; }

/* Partnerliste auf der Unternehmensseite */
.partnerliste { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie);
                border-radius: var(--r-lg); overflow: hidden; }
.partnerliste li {
  display: grid; grid-template-columns: 6.5rem 8rem minmax(0,1fr) auto;
  align-items: center; gap: 1.25rem;
  background: var(--papier); padding: 1rem 1.25rem;
  transition: background var(--t-fast) var(--ease);
}
.partnerliste li:hover { background: var(--beton); }
.partnerliste .zeit { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; color: var(--grau); }
.partnerliste .marke .logotile { padding: .3rem .6rem; }
.partnerliste .marke img { max-height: 24px; max-width: 100px; width: auto; object-fit: contain; }
.partnerliste .name { font-weight: 600; }
.partnerliste .werte { font-size: .84rem; color: var(--text-leise); text-align: right;
                       font-variant-numeric: tabular-nums; white-space: nowrap; }

/* HFU-Karte */
.hfu { background: var(--stahl); color: #fff; border-radius: var(--r-lg);
       padding: clamp(1.4rem,2.5vw,2rem); border-left: 4px solid var(--gold); }
.hfu h3 { color: #fff; margin-bottom: .75rem; }
.hfu p { color: rgba(255,255,255,.74); font-size: .96rem; }
.hfu strong { color: #fff; }
.hfu .ticks li { color: rgba(255,255,255,.86); }

/* Tutorials & FAQ */
.faq { display: grid; gap: .75rem; }
.faq details {
  border: 1px solid var(--linie); border-radius: var(--r-md); background: var(--papier);
  transition: border-color var(--t-fast) var(--ease);
}
.faq details[open] { border-color: var(--linie-stark); box-shadow: var(--e1); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 700; font-size: 1.02rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%;
  font-family: var(--display); font-size: 1.5rem; color: var(--blau); line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .antwort { padding: 0 1.25rem 1.25rem; color: var(--text-leise); font-size: .96rem; }
.faq .antwort p + p { margin-top: .7rem; }
.faq .antwort ol, .faq .antwort ul { margin-top: .6rem; display: grid; gap: .4rem; padding-left: 1.2rem; }
.faq .antwort ol { list-style: decimal; }
.faq .antwort ul { list-style: disc; }

.tutorials { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 1rem; }
.tutorial {
  border: 1px solid var(--linie); border-radius: var(--r-md); background: var(--papier);
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem;
}
.tutorial .step-n { position: static; margin-bottom: .35rem; }
.tutorial h4 { font-family: var(--display); font-size: 1.25rem; }
.tutorial p { font-size: .93rem; color: var(--text-leise); }
.tutorial ol { list-style: decimal; padding-left: 1.15rem; display: grid; gap: .35rem;
               font-size: .92rem; color: var(--text-leise); margin-top: .35rem; }

/* ── 14  Rechtstexte & CI-Seite ─────────────────────────────────────────── */
.page-head { background: var(--stahl); color: #fff; padding: calc(var(--head-h) + clamp(3rem,8vh,5.5rem)) 0 clamp(2.5rem,6vh,4rem); }
.page-head h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.5rem); }
.legal { padding-block: clamp(3rem, 7vh, 5rem); }
.legal-inner { max-width: 78ch; }
.legal h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-top: 2.6rem; margin-bottom: .7rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-leise); }
.legal p + p { margin-top: .8rem; }
.legal ul { list-style: disc; padding-left: 1.4rem; display: grid; gap: .4rem; margin-top: .7rem; }
.legal dl { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: .6rem 1.5rem; margin-top: 1rem; }
.legal dt { font-weight: 700; font-size: .92rem; color: var(--text); }
.legal dd { color: var(--text-leise); }
.legal a { color: var(--blau); }
.callout { margin-top: 1.5rem; padding: 1.1rem 1.3rem; background: var(--beton); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; font-size: .92rem; }

/* CI-Seite */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.sw { border: 1px solid var(--linie); border-radius: var(--r-md); overflow: hidden; }
.sw i { display: block; height: 92px; }
.sw div { padding: .8rem .9rem; }
.sw b { display: block; font-size: .92rem; }
.sw code { font-family: var(--mono); font-size: .76rem; color: var(--text-leise); }
.type-demo > * { margin-bottom: .6rem; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.spec { border: 1px solid var(--linie); border-radius: var(--r-md); padding: 1.2rem; }
.spec h4 { margin-bottom: .5rem; }
.spec p { font-size: .88rem; }
.motion-demo { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.motion-demo div { width: 70px; height: 70px; border-radius: var(--r-md); background: var(--blau); display: grid; place-items: center; color: #fff; font-family: var(--mono); font-size: .7rem; }

/* ── 15  Motion & Responsive ───────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .js .split-word > span { transform: none !important; }
  .btn:hover, .card:hover, .choice span:hover { transform: none; }
  .marquee-track { animation: none; }
  .scroll-cue span, .dot::after { animation: none; }
  .hero-media img { transform: none; }
  .hero-grid line { stroke-dashoffset: 0; }
  .wiz-step.active, .notice.show, .sent.show, .files li { animation: none; }
}

@media (max-width: 1180px) {
  .nav ul { gap: .75rem; }
  .nav a { font-size: .76rem; }
  .tel span { display: none; }
}
@media (max-width: 1024px) {
  /* Vier Kennzahlen nebeneinander werden auf Tablets zu eng – zwei Reihen zu zwei. */
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc, .wiz, .portal-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .demo-body { grid-template-columns: 1fr; }
  .demo-side { border-right: 0; border-bottom: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  .demo-side p { width: 100%; margin-bottom: .3rem; }
}
@media (max-width: 1024px) {
  .reftools { position: static; }
  /* Unter 1024 px wird aus jeder Tabellenzeile eine kleine Karte mit
     Beschriftung/Wert-Paaren – Tabellen scrollen sonst seitlich weg. */
  .reftable thead { display: none; }
  .reftable tbody tr { display: block; padding: .95rem 0; border-bottom: 1px solid var(--linie); }
  .reftable td { display: flex; align-items: baseline; gap: .6rem; border: 0; padding: .12rem 0; }
  .reftable td.num { text-align: left; }
  .reftable td[data-lbl]::before {
    content: attr(data-lbl); flex: none; min-width: 8.5rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--grau);
  }
  .reftable td.bvcell { display: block; font-size: 1.05rem; margin-bottom: .45rem; }
  .reftable td.bvcell::before { content: none; }
}
@media (max-width: 940px) {
  .burger { display: block; }
  .topbar .hide-s { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 350px);
    background: rgba(11,14,19,.985);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: 6.5rem 2rem 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform var(--t-mid) var(--ease);
    border-left: 1px solid rgba(255,255,255,.1);
  }
  .nav.open { transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav a { padding: .95rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a::after { display: none; }
  body.nav-open { overflow: hidden; }
  .header-cta .btn { display: none; }
  .nav-cta { display: grid; gap: 1rem; margin-top: 2.25rem; }
  .nav-tel { text-align: center; color: var(--gold); font-weight: 700; font-size: .95rem; text-decoration: none; border: 1px solid rgba(213,169,82,.4); border-radius: var(--r); padding: .8rem 1rem; }
  .split, .hist-grid, .contact-grid { grid-template-columns: 1fr; }
  .step-rail { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .actionbar { display: flex; }
  body { padding-bottom: 62px; }
  .totop { bottom: 5.25rem; }
}
@media (max-width: 620px) {
  .hero-facts { grid-template-columns: 1fr; }
  .trustbar-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero { min-height: auto; padding-top: 8rem; }
  .hero-btns .btn { flex: 1 1 100%; }
  .row, .calc-row { grid-template-columns: 1fr; }
  .calc-row { gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.1); }
  .row-del { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .legal dl { grid-template-columns: 1fr; gap: .2rem 0; }
  .legal dd { margin-bottom: .8rem; }
  .scroll-cue { display: none; }
  .wiz-steps span { display: none; }
  /* Zwei Spalten statt sechs gestapelter Felder – die Werkzeugleiste bleibt
     auf dem Handy überschaubar. Die Suche behält die volle Breite. */
  .partnerliste li { grid-template-columns: 1fr auto; gap: .35rem .75rem; }
  .partnerliste .zeit { order: 1; }
  .partnerliste .werte { order: 2; }
  .partnerliste .marke { order: 3; grid-column: 1 / -1; }
  .partnerliste .name { order: 4; grid-column: 1 / -1; }
  .reftools-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .reftools-row > div:first-child { grid-column: 1 / -1; }
  .quickfilter button { font-size: .78rem; padding: .4rem .7rem; }
  .refdetail-body dl { grid-template-columns: 1fr; gap: 0; }
  .refdetail-body dd { padding-top: .15rem; padding-bottom: .5rem; }
  .topbar-inner { gap: .9rem; font-size: .74rem; }
}

@media print {
  .site-header, .scroll-cue, .cta-band, .gal-strip, .burger, .actionbar, .totop, .progress { display: none !important; }
  body { color: #000; padding-bottom: 0; }
  .hero, .section-dark, .site-footer, .tool-dark { background: #fff !important; color: #000 !important; }
}

/* Seitenübergänge, wo unterstützt */
@view-transition { navigation: auto; }