/* =========================================================================
   ZOLLER – Design System
   Farben und Schrift entsprechen dem bestehenden Corporate Design
   (T-Star, Schwarz / Weiß / ZOLLER-Gelb #F0E600, Grautöne).
   ========================================================================= */

@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Heavy.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --black: #000;
  --white: #fff;
  --yellow: #f0e600;
  --yellow-logo: #f3e33f;
  --gray-50: #f2f2f2;
  --gray-100: #e6e6e6;
  --gray-300: #b2b2b2;
  --gray-400: #9d9d9d;
  --gray-500: #898989;
  --gray-600: #707070;
  --gray-700: #575757;
  --gray-900: #1a1a1a;

  --font: "T-Star", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.625rem);
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.1875rem);
  --fs-small: 0.875rem;

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --maxw: 1440px;
  --maxw-text: 52rem;
  --radius: 22px;
  --radius-sm: 12px;
  --sheet-r: clamp(18px, .8rem + 1.2vw, 34px);   /* Inhaltsblatt, das über den Vorhang-Hero gleitet */
  --header-h: 64px;
  --subnav-h: 52px;
  --stack-gap: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .35);
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
/* Lange Wörter (»Datenschutzerklärung«, »Photovoltaikanlage«, »Qualitätssicherung/Abnahme«) ragen nie aus dem Bild:
   auf schmalen Bildschirmen mit Bindestrich trennen, notfalls irgendwo umbrechen. Produktnamen nicht – die passt main.js ein. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p, li, dd { overflow-wrap: break-word; }   /* z. B. JA »coraLogistic«、»coraVarion«、»loadBox« ohne Leerzeichen = ein einziges Wort */
@media (max-width: 760px) {
  h1, h2, h3, h4, .large-text, .extra-large-text, .icon-item__value, .accordion summary { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  .product-hero__name { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
}
h4 { font-size: var(--fs-h4); line-height: 1.35; }
h5, h6 { font-size: var(--fs-body); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong, b { font-weight: 700; }
sup { line-height: 0; }
hr { border: 0; border-top: 1px solid currentColor; opacity: .15; margin: 2rem 0; }
::selection { background: var(--yellow); color: var(--black); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--yellow); color: var(--black); padding: .75rem 1.25rem; font-weight: 700; }
.skip-link:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }

/* Text-Hilfsklassen aus dem alten CMS */
.large-text { font-size: var(--fs-lead); line-height: 1.5; }
.extra-large-text { font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.small-text { font-size: var(--fs-small); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.eyebrow { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 1rem; }
.on-dark .eyebrow, .bg-black .eyebrow { color: var(--gray-400); }
.quote-mark { color: var(--yellow); }

/* ---------- Buttons & Links ---------- */
.btn {
  --btn-bg: var(--yellow); --btn-fg: var(--black);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.5em; margin: .25rem .5rem .25rem 0;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; font-size: 1rem; line-height: 1.2;
  transition: transform .4s var(--ease-out), background-color .25s, color .25s, box-shadow .4s var(--ease-out);
  will-change: transform;
}
.btn::after { content: ""; width: .55em; height: .55em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--ease-out); flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(240, 230, 0, .7); }
.btn:hover::after { transform: translateX(3px) rotate(45deg); }
.btn--dark, .bg-yellow .btn { --btn-bg: var(--black); --btn-fg: var(--white); }
.bg-yellow .btn:hover { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--black); box-shadow: none; }
.btn[href$=".pdf"]::after, .btn[target="_blank"]::after { transform: rotate(-45deg); }

.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 500; border-bottom: 1.5px solid var(--yellow); padding-bottom: 1px; transition: gap .3s var(--ease-out); }
.link-arrow:hover { gap: .7em; }
.rte a:not(.btn):not(.link-arrow) { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--yellow); }
.bg-yellow .rte a:not(.btn):not(.link-arrow) { text-decoration-color: var(--black); }
.rte img { border-radius: var(--radius-sm); }
.rte table { margin-bottom: 1.5rem; }
.rte h2, .rte h3, .rte h4 { margin-top: 1.2em; }
.rte > :first-child { margin-top: 0; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  color: var(--white);
  transition: transform .5s var(--ease-out), background-color .4s;
}
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  z-index: -1;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: clamp(1.25rem, .2rem + 1.8vw, 2.75rem); }
.site-header__logo { flex: none; display: block; width: 118px; }
.site-header__logo img { width: 100%; }
.mainnav { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; }
.mainnav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: .125rem; height: 100%; }
.mainnav__list > li { margin: 0; display: flex; align-items: center; }
.mainnav__link {
  position: relative; display: block; padding: .5rem .8rem; font-size: .9375rem; font-weight: 400; white-space: nowrap;
  color: rgba(255, 255, 255, .82); border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.mainnav__link:hover, .mainnav__item.is-open > .mainnav__link, .mainnav__link[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, .1); }
.mainnav__link.is-active { color: var(--white); }
.mainnav__link.is-active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--yellow); }
.site-header__tools { display: flex; align-items: center; gap: .25rem; flex: none; margin-left: auto; }
.site-header__meta { display: flex; align-items: center; gap: .125rem; margin-right: .5rem; padding-right: .75rem; border-right: 1px solid rgba(255, 255, 255, .14); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: rgba(255, 255, 255, .85); transition: background-color .2s, color .2s; }
.icon-btn:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.icon-btn svg { width: 20px; height: 20px; }
.meta-link { font-size: .8125rem; color: rgba(255, 255, 255, .7); padding: .4rem .6rem; border-radius: 999px; }
.meta-link:hover { color: var(--white); background: rgba(255, 255, 255, .1); }
.myzoller-link img { height: 15px; width: auto; }
/* Länderseiten: Ländername neben dem Logo, direkter Sprachwechsel (Kanada: EN/FR) */
.site-header__logo--country { width: auto; display: flex; align-items: center; gap: .75rem; }
.site-header__logo--country img { width: 118px; flex: none; }
.site-header__country { padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .3); font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.lang-toggle { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .55rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .85); transition: background-color .2s, color .2s; }
.lang-toggle:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.mobile-nav__meta .mobile-nav__lang { font-weight: 700; color: var(--white); }
/* Länder-Knopf: Weltkugel + Flagge des aktuellen Landes – öffnet »Land und Sprache wählen« */
.lang-btn { width: auto; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .6rem 0 .5rem; }
.lang-btn .flag { width: auto; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
/* Währung (assets/js/currency.js): Kürzel der angezeigten Währung, öffnet die Auswahl; auf dem Handy steht sie im Menü */
.cur-btn { display: grid; place-items: center; min-width: 48px; height: 40px; padding: 0 .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .85); transition: background-color .2s, color .2s; }
.cur-btn:hover, .cur-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: var(--white); }
html:not(.js) .cur-btn, html:not(.js) .mobile-nav__cur, html:not(.js) .cur-chip { display: none; }
.mobile-nav__cur { color: inherit; }
.mobile-nav__cur b { color: var(--white); font-weight: 700; letter-spacing: .06em; }
.count-banner__side { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; min-width: 0; }
.count-banner__value[data-eur] { font-size: min(clamp(4rem, 2rem + 8vw, 9rem), calc((100vw - 2 * var(--gutter)) / (var(--zc-len, 7) * .62))); white-space: nowrap; }
.cur-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .7rem .45rem .85rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; box-shadow: inset 0 0 0 1px currentColor; opacity: .6; transition: opacity .2s; }
.cur-chip:hover, .cur-chip[aria-expanded="true"] { opacity: 1; }
.cur-chip svg { width: 14px; height: 14px; }
.showroom-link { display: inline-flex; align-items: center; gap: .45rem; margin-left: .5rem; padding: .5rem .95rem .5rem .75rem; border-radius: 999px; background: var(--yellow); color: var(--black); font-size: .8125rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.showroom-link svg { width: 17px; height: 17px; flex: none; }
.showroom-link:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(240, 230, 0, .8); }
.showroom-link__short { display: none; }
/* Werkzeugraum-Planer (»Toolroom Planner«) neben dem 3D-Showroom (eigenes Repo zoller-werkzeugraum-planer): gelb wie der
   Showroom und immer mit vollem Namen – erst wenn sonst nichts mehr hilft (fit-6) und auf dem Telefon bleibt das Symbol */
.planer-link { display: inline-flex; align-items: center; gap: .45rem; margin-left: .4rem; padding: .5rem .95rem .5rem .75rem; border-radius: 999px; background: var(--yellow); color: var(--black); font-size: .8125rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.planer-link svg { width: 17px; height: 17px; flex: none; }
.planer-link:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(240, 230, 0, .8); }
@media (max-width: 1279px) { .planer-link { margin: 0 .25rem 0 0; padding: .45rem .7rem .45rem .6rem; } }
@media (min-width: 601px) and (max-width: 1279px) {   /* Platz für den Planer: Showroom zeigt dann nur »3D« */
  .site-header .showroom-link__full { display: none !important; }
  .site-header .showroom-link__short { display: inline !important; font-weight: 700; }
}
@media (max-width: 600px) {   /* Telefon: nur das Symbol (im Menü steht der Planer mit Namen) */
  .planer-link { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .planer-link__full { display: none; }
}
.site-header.fit-6 .planer-link__full { display: none; }
.site-header.fit-6 .planer-link { width: 36px; height: 36px; padding: 0; justify-content: center; }
.burger { display: none; }
.burger__close, .nav-open .burger__open { display: none; }
.nav-open .burger__close { display: block; }

/* Mega-Menü */
.mega {
  position: fixed; left: 0; right: 0; top: var(--header-h);
  background: #0e0e0e;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
  color: var(--white);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s .35s;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mainnav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
.mega__inner { padding-block: 2.25rem 2.75rem; display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: clamp(2rem, 1rem + 2.5vw, 4rem); }
.mega__intro { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding-right: clamp(1.5rem, .5rem + 2vw, 3rem); border-right: 1px solid rgba(255, 255, 255, .1); }
.mega__intro h2 { font-size: 1.75rem; margin: 0; }
.mega__intro p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--gray-400); }
.mega__overview { display: inline-flex; align-items: center; gap: .45rem; font-size: .9375rem; font-weight: 500; color: var(--white); border-bottom: 1.5px solid var(--yellow); padding-bottom: 2px; transition: gap .3s var(--ease-out), color .2s; }
.mega__overview::after { content: "→"; }
.mega__overview:hover { color: var(--yellow); gap: .7rem; }
.mega__teaser { position: relative; display: block; width: 100%; margin-top: .6rem; border-radius: var(--radius-sm); overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .3s, transform .5s var(--ease-out); }
.mega__teaser img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; transition: transform 1s var(--ease-out); }
.mega__teaser span { display: block; padding: .8rem .95rem .9rem; font-size: .8125rem; line-height: 1.4; color: var(--gray-400); }
.mega__teaser b { display: flex; align-items: center; gap: .45rem; margin-bottom: .15rem; font-size: .9375rem; font-weight: 500; color: var(--white); }
.mega__teaser b svg { width: 16px; height: 16px; color: var(--yellow); flex: none; }
.mega__teaser:hover { box-shadow: inset 0 0 0 1px var(--yellow); }
.mega__teaser:hover img { transform: scale(1.05); }
.mega__teaser--globe { padding-left: 3.4rem; background: rgba(255, 255, 255, .06) url("../img/globe.svg") no-repeat 1rem 50% / 1.6rem; }
/* Spalten fließen wie Mauerwerk: keine Lücken mehr durch unterschiedlich lange Gruppen */
.mega__cols { column-count: var(--mega-cols, 4); column-width: 190px; column-gap: clamp(1.5rem, .5rem + 2vw, 3rem); }
.mega__col { break-inside: avoid; padding-bottom: 1.6rem; }
.mega__col--leaf { padding-bottom: .9rem; }
.mega__col h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--white); margin: 0 0 .55rem; line-height: 1.3; }
.mega__col--leaf h3 { margin: 0; }
.mega__col h3 a { display: inline-flex; align-items: center; gap: .4rem; transition: color .2s; }
.mega__col h3 a::after { content: "→"; font-size: .875em; color: var(--yellow); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--ease-out); }
.mega__col h3 a:hover { color: var(--yellow); }
.mega__col h3 a:hover::after { opacity: 1; transform: none; }
.mega__col ul { list-style: none; padding: 0 0 0 .9rem; margin: 0; border-left: 1px solid rgba(255, 255, 255, .12); }
.mega__col li { margin: 0; }
.mega__col li a { display: block; padding: .3rem 0; font-size: .9375rem; line-height: 1.35; color: rgba(255, 255, 255, .78); transition: color .2s, transform .3s var(--ease-out); }
.mega__col li a:hover { color: var(--yellow); transform: translateX(4px); }
.mega__col li a small { display: block; color: var(--gray-500); font-size: .78rem; line-height: 1.35; margin-top: .1rem; }
.mega__col .sub-group { margin: .15rem 0 .4rem; border-left: 0; padding-left: .75rem; }
.mega__col .sub-group li a { font-size: .875rem; padding: .2rem 0; }
.mega__col .sub-group li a small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mobile Navigation */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--black); color: var(--white);
  overflow-y: auto; padding: 1rem var(--gutter) 4rem;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s .35s;
}
.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
.mobile-nav details { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mobile-nav summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: 1.375rem; font-weight: 500; cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-weight: 300; font-size: 1.75rem; transition: transform .3s var(--ease-out); }
.mobile-nav details[open] > summary::after { transform: rotate(45deg); }
.mobile-nav details details summary { font-size: 1.0625rem; padding: .7rem 0; }
.mobile-nav details details { border-bottom-color: rgba(255, 255, 255, .06); margin-left: .75rem; }
.mobile-nav ul { list-style: none; margin: 0 0 1rem; padding: 0 0 0 .75rem; }
.mobile-nav li { margin: 0; }
.mobile-nav li a { display: block; padding: .45rem 0; color: rgba(255, 255, 255, .85); }
.mobile-nav li a small { display: block; color: var(--gray-500); font-size: .8125rem; }
.mobile-nav > a { display: block; padding: 1rem 0; font-size: 1.375rem; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mobile-nav > a.mobile-nav__showroom { display: flex; border-bottom: 0; align-items: center; gap: .9rem; margin: .5rem 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--yellow); color: var(--black); font-size: 1.125rem; font-weight: 500; line-height: 1.2; }
.mobile-nav__showroom svg { width: 28px; height: 28px; flex: none; }
.mobile-nav__showroom small { display: block; font-size: .8125rem; font-weight: 400; opacity: .7; margin-top: .2rem; }
.mobile-nav > a.mobile-nav__planer { display: flex; border-bottom: 0; align-items: center; gap: .9rem; margin: -.5rem 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--white); color: var(--black); font-size: 1.125rem; font-weight: 500; line-height: 1.2; }
.mobile-nav__planer svg { width: 28px; height: 28px; flex: none; color: var(--black); }
.mobile-nav__planer small { display: block; font-size: .8125rem; font-weight: 400; opacity: .7; margin-top: .2rem; }
.mobile-nav__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 2rem; color: var(--gray-400); }

/* Suche */
.search-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--white); display: flex; justify-content: center; padding: 14vh var(--gutter) 2rem;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.search-overlay__box { width: 100%; max-width: 760px; }
.search-overlay input { width: 100%; font: inherit; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); color: var(--white); background: transparent; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .25); padding: .5rem 0; outline: none; }
.search-overlay input:focus { border-bottom-color: var(--yellow); }
.search-results { list-style: none; padding: 0; margin: 1.5rem 0 0; max-height: 60vh; overflow-y: auto; }
.search-results li { margin: 0; }
.search-results a { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.search-results a:hover { color: var(--yellow); }
.search-results small { display: block; color: var(--gray-500); }
.search-overlay__close { position: absolute; top: 1.25rem; right: 1.25rem; }
.search-hint { color: var(--gray-500); margin-top: 1rem; font-size: .9375rem; }

/* Land und Sprache: Dialog mit Globus (assets/js/countryglobe.js) */
.lang-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; color: var(--white); overflow: hidden; overscroll-behavior: contain;
  background: radial-gradient(ellipse 60% 75% at 36% 50%, #262626 0%, #0d0d0d 55%, #000 100%); }
.lang-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr) min(31rem, 42vw); animation: lang-in .55s var(--ease-out); }
@keyframes lang-in { from { opacity: 0; } to { opacity: 1; } }
.lang-dialog::backdrop { background: #000; }
.lang-dialog__globe { position: relative; min-height: 0; overflow: hidden; }
.lang-dialog__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; opacity: 0; transform: scale(.94); transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
.lang-dialog__globe.is-ready .lang-dialog__canvas { opacity: 1; transform: none; }
.lang-dialog__globe.is-dragging .lang-dialog__canvas { cursor: grabbing; }
.lang-dialog__loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .5s; pointer-events: none; }
.lang-dialog__loading i { display: block; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--yellow); animation: globe-spin 1s linear infinite; }
.lang-dialog__globe.is-ready .lang-dialog__loading { opacity: 0; }
.lang-dialog__hint { position: absolute; left: 50%; bottom: clamp(1rem, .5rem + 2vw, 2.25rem); transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-size: .8125rem; letter-spacing: .04em; color: var(--gray-400); pointer-events: none; transition: opacity .4s; }
.lang-dialog__hint svg { width: 16px; height: 16px; color: var(--yellow); }
.lang-dialog__pins { position: absolute; inset: 0; pointer-events: none; }
.lang-dialog__inner { position: relative; z-index: 2; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.25rem, .75rem + 1.5vw, 2.25rem);
  background: rgba(12, 12, 12, .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08);
  scrollbar-width: thin; scrollbar-color: #444 transparent; transition: opacity .4s; }
.lang-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.lang-dialog__head h2 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); margin: 0; }
.lang-dialog .icon-btn { color: var(--white); background: rgba(255, 255, 255, .08); border-radius: 50%; flex: none; }
.lang-dialog .icon-btn:hover { background: var(--yellow); color: var(--black); }
.lang-dialog__sub { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-500); margin: 0 0 .75rem; }
.lang-dialog__sites { display: grid; gap: .5rem; margin-bottom: 2.25rem; }
/* Länderseiten nach Kontinenten (Europa, Nordamerika, Lateinamerika, Asien) */
.lang-dialog__region { display: grid; gap: .5rem; }
.lang-dialog__region + .lang-dialog__region { margin-top: 1.1rem; }
.lang-dialog__region h3 { margin: 0 0 .1rem; }
.lang-dialog__group { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .5rem; }
.lang-dialog__group .lang-site { padding: .7rem .85rem; gap: .75rem; }
.lang-dialog__group .lang-site b { font-size: .9375rem; }
.lang-dialog__canvas.is-over-site { cursor: pointer; }
.lang-site { position: relative; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .25s var(--ease-out), background-color .25s, transform .35s var(--ease-out); }
.lang-site:hover, .lang-site:focus-visible { box-shadow: inset 0 0 0 1.5px var(--yellow); background: rgba(255, 255, 255, .1); transform: translateX(-3px); outline: none; }
.lang-site.is-current { background: var(--yellow); color: var(--black); box-shadow: none; }
.lang-site .flag { height: 22px; width: auto; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.lang-site.is-current .flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.lang-site span { display: flex; flex-direction: column; gap: .15rem; line-height: 1.2; }
.lang-site b { font-size: 1rem; font-weight: 700; }
.lang-site small { font-size: .8125rem; color: var(--gray-400); }
.lang-site.is-current small { color: var(--gray-700); }
.lang-site em { margin-left: auto; font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lang-dialog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem 2rem; }
.lang-dialog h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-500); margin-bottom: .4rem; }
.lang-dialog ul { list-style: none; padding: 0; margin: 0; }
.lang-dialog li { margin: 0; }
.lang-dialog li a { display: block; padding: .3rem 0; font-size: .9375rem; color: var(--gray-300); }
.lang-dialog li a:hover { color: var(--yellow); }

/* Beschriftungen auf dem Globus */
.cg-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .35s; }
.cg-pin.is-hidden { opacity: 0; }
.cg-pin.is-hidden .cg-pin__card { pointer-events: none; }
.cg-pin__line { position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(240, 230, 0, .9), rgba(240, 230, 0, .35)); transform-origin: 0 0; }
.cg-pin__card { position: absolute; width: max-content; display: flex; flex-direction: column; gap: .1rem; padding: .45rem .7rem .5rem; border-radius: 10px; white-space: nowrap; pointer-events: auto;
  background: rgba(10, 10, 10, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: box-shadow .25s, transform .45s var(--ease-out), background-color .25s; }
.cg-pin__main { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; line-height: 1.2; }
.cg-pin__main .flag { height: 14px; width: auto; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.cg-pin__card small { font-size: .6875rem; letter-spacing: .06em; color: var(--gray-400); }
.cg-pin.is-current .cg-pin__card small { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.cg-pin__langs { display: flex; gap: .3rem; margin-top: .3rem; }
.cg-pin__langs a { padding: .15rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; background: rgba(255, 255, 255, .1); transition: background-color .2s, color .2s; }
.cg-pin__langs a:hover { background: var(--yellow); color: var(--black); }
.cg-pin.is-hover .cg-pin__card, .cg-pin__card:hover { box-shadow: inset 0 0 0 1.5px var(--yellow), 0 10px 30px rgba(0, 0, 0, .45); }
.cg-pin.is-target .cg-pin__card { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--yellow), 0 0 40px rgba(240, 230, 0, .25); }
/* Richtung der Beschriftung (sites.json: geo.side) */
.cg-pin--ne .cg-pin__line { transform: rotate(-38deg); }
.cg-pin--ne .cg-pin__card { left: 24px; bottom: 18px; }
.cg-pin--se .cg-pin__line { transform: rotate(38deg); }
.cg-pin--se .cg-pin__card { left: 24px; top: 18px; }
.cg-pin--sw .cg-pin__line { transform: rotate(142deg); }
.cg-pin--sw .cg-pin__card { right: 24px; top: 18px; }
.cg-pin--nw .cg-pin__line { transform: rotate(-142deg); }
.cg-pin--nw .cg-pin__card { right: 24px; bottom: 18px; }

/* Flug: Liste und Hinweise treten zurück, am Ende Schleier mit dem Ziel */
.lang-dialog.is-flying .lang-dialog__inner { opacity: .35; pointer-events: none; }
.lang-dialog.is-flying .lang-dialog__hint { opacity: 0; }
.lang-dialog__veil { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #000;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease-in-out), visibility 0s .45s; }
.lang-dialog.is-leaving .lang-dialog__veil { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-in-out); }
.lang-dialog__veil .flag { height: 44px; width: auto; border-radius: 4px; }
.lang-dialog__veil span { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.lang-dialog__veil span i { width: 2px; height: 1.1em; background: var(--yellow); }
.lang-dialog__veil small { font-size: .875rem; color: var(--gray-400); letter-spacing: .08em; }
.lang-dialog.is-leaving .lang-dialog__veil > * { animation: veil-in .6s var(--ease-out) both; }
@keyframes veil-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Ohne WebGL: nur die Liste */
.lang-dialog.is-static[open] { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.lang-dialog.is-static .lang-dialog__globe { display: none; }
.lang-dialog.is-static .lang-dialog__inner { width: min(100%, 44rem); background: none; box-shadow: none; }

@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .lang-dialog[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 46svh) minmax(0, 1fr); }
  .lang-dialog__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); border-radius: var(--radius) var(--radius) 0 0; margin-top: -1.25rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .lang-dialog__head { margin-bottom: 1.25rem; }
  .lang-dialog__hint { bottom: 1.75rem; font-size: .75rem; }
  .cg-pin__main { font-size: .8125rem; }
  .cg-pin__card { padding: .35rem .55rem .4rem; }
  .cg-pin__line { width: 22px; }
  .cg-pin--ne .cg-pin__card, .cg-pin--se .cg-pin__card { left: 16px; }
  .cg-pin--sw .cg-pin__card, .cg-pin--nw .cg-pin__card { right: 16px; }
  .lang-dialog.is-static[open] { grid-template-rows: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-dialog[open] { animation: none; }
  .lang-dialog__canvas { transition: none; transform: none; }
}

/* Ankunft nach dem Länderwechsel: die neue Seite blendet aus dem Schwarz des Schleiers auf */
html.arrive body::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: #000; pointer-events: none; animation: arrive-out .9s .1s var(--ease-in-out) both; }
@keyframes arrive-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Seitenaufbau ---------- */
main { display: block; padding-top: var(--header-h); }
main.has-hero { padding-top: 0; }
.block { position: relative; }
.section { padding-block: clamp(4rem, 2.5rem + 6vw, 9rem); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 5rem); }
.section--flush { padding-block: 0; }
.bg-white { background: var(--white); color: var(--black); }
.bg-lightgray { background: var(--gray-50); color: var(--black); }
.bg-yellow { background: var(--yellow); color: var(--black); }
.bg-black, .on-dark { background: var(--black); color: var(--white); }
.bg-black .btn--ghost { color: var(--white); }
.section.is-continued { padding-top: 0; }
.section.pt-0 { padding-top: 0; }
.section.pb-0 { padding-bottom: 0; }
/* gesetzt von fix_spacing() in tools/build.py */
.section.is-stacked { padding-top: var(--stack-gap); }
.section.pt-top { padding-top: clamp(2.5rem, 1.8rem + 3vw, 5rem); }
.section-head { max-width: 58rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .subheader { font-size: var(--fs-lead); font-weight: 400; color: var(--gray-600); line-height: 1.45; letter-spacing: 0; }
.bg-black .section-head .subheader { color: var(--gray-400); }
.bg-yellow .section-head .subheader { color: var(--black); }
.headline-decor::before { content: ""; display: block; width: 48px; height: 4px; background: var(--yellow); margin-bottom: 1.25rem; border-radius: 2px; }
.bg-yellow .headline-decor::before { background: var(--black); }

/* Breadcrumb */
.breadcrumb { font-size: .8125rem; color: var(--gray-600); padding-block: 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .35rem; }
.breadcrumb li + li::before { content: "›"; color: var(--gray-400); }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb [aria-current] { color: var(--black); }

/* ---------- Hero (Seiten) ---------- */
.hero { position: relative; min-height: clamp(520px, 88vh, 980px); display: flex; align-items: flex-end; overflow: hidden; color: var(--white); background: var(--black); isolation: isolate; }
.hero--short { min-height: clamp(420px, 66vh, 760px); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .78) 100%); }
.hero--light { color: var(--black); }
.hero--light::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .7) 100%); }
.hero__content { width: 100%; padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; max-width: 15ch; margin-bottom: 1.25rem; }
.hero__title--sm { font-size: var(--fs-h1); max-width: 22ch; }
.hero__kicker { font-size: .875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 1rem; }
.hero--light .hero__kicker { color: var(--black); }
.hero__text { font-size: var(--fs-lead); max-width: 40rem; color: rgba(255, 255, 255, .88); line-height: 1.45; }
.hero--light .hero__text { color: rgba(0, 0, 0, .8); }
.hero__text p { margin-bottom: .5em; }
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-in-out); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__dots { display: flex; gap: .5rem; margin-top: 2rem; }
.hero__dots button { width: 34px; height: 3px; background: rgba(255, 255, 255, .35); border-radius: 2px; overflow: hidden; position: relative; }
.hero__dots button.is-active::after { content: ""; position: absolute; inset: 0; background: var(--yellow); animation: dot 6s linear forwards; transform-origin: left; }
@keyframes dot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--yellow); animation: cue 1.8s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- Startseite: Kamerafahrt durch den Showroom (Video) ---------- */
.homefilm { position: relative; height: 320vh; background: #050506; color: var(--white); }
.homefilm__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.homefilm__media, .homefilm__media img, .homefilm__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.homefilm__video { opacity: 0; transition: opacity 1.2s ease; }
.homefilm.is-playing .homefilm__video { opacity: 1; }
.homefilm__shade { position: absolute; inset: 0; pointer-events: none; }
.homefilm__shade--top { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%), linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 26%); }
/* Texte stehen unten links/rechts (oben sitzen die Schilder an den Geräten): Abdunklung aus der unteren Ecke */
.homefilm__shade--l { background: radial-gradient(130% 95% at 0% 100%, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 70%); }
.homefilm__shade--r { opacity: 0; background: radial-gradient(130% 95% at 100% 100%, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 70%); }
.homefilm__copy { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; z-index: 2; }
.homefilm__copy .wrap { position: relative; height: 100%; }
.homefilm__panel { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(5.25rem, 11vh, 8.5rem); max-width: 40rem; opacity: 0; will-change: opacity, transform; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.homefilm__panel:first-child { opacity: 1; }
.homefilm__panel--right { left: auto; text-align: right; }
.homefilm__panel h1, .homefilm__panel h2 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; margin-bottom: 1.25rem; }
.homefilm__panel h1 em, .homefilm__panel h2 em { font-style: normal; color: var(--yellow); }
.homefilm__panel p { font-size: var(--fs-lead); color: rgba(255, 255, 255, .84); line-height: 1.45; max-width: 34rem; }
.homefilm__panel--right p { margin-left: auto; }
.homefilm__panel .eyebrow { color: var(--yellow); }
.homefilm__panel .btn { pointer-events: auto; margin-top: 1rem; text-shadow: none; }
.homefilm__progress { position: absolute; left: calc(var(--gutter) + 3.5rem); bottom: 2.6rem; right: var(--gutter); display: flex; gap: .5rem; max-width: 220px; z-index: 3; }
.homefilm__progress span { flex: 1; height: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; border-radius: 2px; }
.homefilm__progress span i { display: block; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.homefilm__ctrl { position: absolute; left: var(--gutter); bottom: 1.35rem; z-index: 3; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: var(--white); border: 1px solid rgba(255, 255, 255, .28); background: rgba(10, 10, 12, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background .2s, border-color .2s; }
.homefilm__ctrl:hover, .homefilm__ctrl:focus-visible { background: rgba(10, 10, 12, .7); border-color: var(--yellow); }
.homefilm__ctrl svg { width: 14px; height: 14px; fill: currentColor; }
.homefilm__ctrl .i-play, .homefilm.is-paused .homefilm__ctrl .i-pause { display: none; }
.homefilm.is-paused .homefilm__ctrl .i-play { display: block; }
/* Beschriftungen, die im Video an den Geräten hängen */
.homefilm__tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.homefilm__tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; color: var(--white); text-decoration: none; opacity: 0; visibility: hidden; pointer-events: auto; will-change: transform, opacity; }
.homefilm__pill { translate: var(--shift, 0) 0; display: grid; gap: .1rem; padding: .5rem .85rem .55rem; border-radius: .75rem; background: rgba(12, 12, 14, .5); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); white-space: nowrap; text-align: center; transition: background .2s, border-color .2s; }
.homefilm__pill b { font-weight: 500; font-size: .875rem; letter-spacing: .01em; }
.homefilm__pill small { font-size: .6875rem; color: rgba(255, 255, 255, .66); letter-spacing: .02em; }
/* Prozessschritt über dem Namen: »01 Lagern« … »06 An die Maschine« (Werkzeugkreislauf) */
.homefilm__pill small:first-child { font-size: .625rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .72); }
.homefilm__pill small em { font-style: normal; font-weight: 500; color: var(--yellow); margin-right: .3em; font-variant-numeric: tabular-nums; }
.homefilm__tag:hover .homefilm__pill { background: rgba(12, 12, 14, .75); border-color: var(--yellow); }
.homefilm__tag i { display: block; width: 1px; height: 1.6rem; background: linear-gradient(180deg, rgba(255, 255, 255, .55), var(--yellow)); }
.homefilm__tag i::after { content: ""; display: block; width: 7px; height: 7px; margin: 1.6rem 0 0 -3px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(240, 230, 0, .22), 0 0 14px rgba(240, 230, 0, .7); transform: translateY(-3px); }
.reduced-motion .homefilm__video { transition: none; }

/* ---------- Statement (Wort-für-Wort Scroll-Reveal) ---------- */
.statement { font-size: clamp(1.75rem, 1.1rem + 3vw, 4rem); line-height: 1.18; font-weight: 500; letter-spacing: -0.025em; max-width: 22ch; }
.statement--wide { max-width: 30ch; }
.statement .w { color: rgba(0, 0, 0, .14); transition: color .2s; }
.bg-black .statement .w { color: rgba(255, 255, 255, .18); }
.bg-yellow .statement .w { color: rgba(0, 0, 0, .2); }
.statement .w.is-lit { color: inherit; }
.no-js .statement .w, .reduced-motion .statement .w { color: inherit; }

/* ---------- Text & Media ---------- */
.textmedia { display: grid; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.textmedia--right, .textmedia--left { grid-template-columns: 1fr 1fr; }
.textmedia--left .textmedia__media { order: -1; }
.textmedia--above .textmedia__media { order: -1; }
.textmedia--valign-top { align-items: start; }
.textmedia__text { max-width: 42rem; }
.textmedia--above .textmedia__text, .textmedia--below .textmedia__text, .textmedia--text .textmedia__text { max-width: var(--maxw-text); }
.textmedia--center .textmedia__text { margin-inline: auto; text-align: center; }
.textmedia__media { display: grid; gap: 1rem; }
.textmedia__media[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.textmedia__media[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.textmedia__media[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.media-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--gray-100); }
.bg-black .media-frame { background: var(--gray-900); }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; }
.media-frame--contain { background: transparent !important; }
.media-frame--contain img { object-fit: contain; }
figure { margin: 0; }
figcaption { font-size: var(--fs-small); color: var(--gray-600); margin-top: .6rem; }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--black); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-consent { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--white); padding: 1.5rem; background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .4)); }
.video-consent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.video-consent p { font-size: var(--fs-small); max-width: 34rem; margin: .75rem auto 0; color: rgba(255, 255, 255, .8); }
.play-btn { width: 76px; height: 76px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-inline: auto; transition: transform .4s var(--ease-out); }
.play-btn:hover { transform: scale(1.08); }
.play-btn::before { content: ""; border-left: 20px solid var(--black); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }

/* ---------- Spalten-Container ---------- */
.cols { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--66-33 { grid-template-columns: 2fr 1fr; }
.cols--33-66 { grid-template-columns: 1fr 2fr; }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
/* Spalten dürfen schmaler werden als ihr breitester Inhalt (Slider, lange Wörter) – sonst drückt eine Spalte die ganze Seite seitlich auf */
.cols > *, .textmedia > *, .textmedia__media > *, .product-hero__grid > * { min-width: 0; }
.rte a { overflow-wrap: anywhere; }   /* lange Adressen im Fließtext (Datenschutz) */
.cols .section, .cols .section--tight { padding-block: 0 !important; background: transparent; }
.cols .wrap { padding-inline: 0; max-width: none; }
.cols > .col > .block + .block { margin-top: 1.5rem; }
.cols > .col:empty { display: none; }

/* ---------- Karten / Kacheln ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
@media (min-width: 861px) {
  .card-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--white); color: var(--black);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), var(--reveal-t, opacity 0s);
}
.bg-white .card { background: var(--gray-50); }
.bg-black .card { background: var(--gray-900); color: var(--white); }
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__body h3 { font-size: 1.375rem; margin: 0; }
.card__body p { color: var(--gray-700); font-size: 1rem; margin: 0; }
.bg-black .card__body p { color: var(--gray-400); }
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.card__tags span + span::before { content: "·"; margin-right: .4rem; }
.card__date { font-size: .8125rem; color: var(--gray-500); }
.card__more { margin-top: auto; padding-top: .75rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
.card__more::after { content: "→"; transition: transform .4s var(--ease-out); }
.card:hover .card__more::after { transform: translateX(4px); }
.card > a.card__link { position: absolute; inset: 0; z-index: 1; }
.card a:not(.card__link) { position: relative; z-index: 2; }

/* Produkt-Karten (menu_pages) */
.product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.product-rail.is-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); overflow: visible; }
.product-card { position: relative; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, #fafafa 0%, #ececec 100%); color: var(--black); display: flex; flex-direction: column; min-height: 420px; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), var(--reveal-t, opacity 0s); isolation: isolate; }
.bg-lightgray .product-card { background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%); }
.bg-black .product-card { background: linear-gradient(180deg, #1d1d1d 0%, #111 100%); color: var(--white); }
.product-card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.product-card:hover { --lift: -6px; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .42); }
.product-card.is-tilting { transition: transform .14s linear, box-shadow .6s var(--ease-out), var(--reveal-t, opacity 0s); }
.product-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 46%); opacity: 0; mix-blend-mode: soft-light; transition: opacity .5s; }
.product-card:hover::after { opacity: 1; }
.bg-black .product-card::after { mix-blend-mode: overlay; }
.product-card__text { padding: 1.75rem 1.75rem 0; }
.product-card__text h3 { font-size: 1.625rem; margin-bottom: .35rem; }
.product-card__text p { font-size: .9375rem; color: var(--gray-700); margin: 0; }
.bg-black .product-card__text p { color: var(--gray-400); }
.product-card__img { margin-top: auto; padding: 1rem 1rem 0; }
.product-card__img img { width: 100%; aspect-ratio: 1080 / 858; object-fit: contain; transition: transform 1s var(--ease-out); }
.product-card:hover .product-card__img img { transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px - 6px), 0) scale(1.07); }
.product-card__img { position: relative; }
.product-card__img img[data-product] { padding: .5rem .75rem 1.25rem; position: relative; z-index: 1; }
.product-card__img:has(img[data-product])::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 1.1rem; height: 18px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .22), transparent 70%); filter: blur(4px); transition: transform 1s var(--ease-out), opacity 1s; }
.product-card:hover .product-card__img::after { transform: scaleX(.9); opacity: .7; }
.product-card__go { position: absolute; right: 1.25rem; top: 1.25rem; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: transform .5s var(--ease-out), opacity .3s; }
.product-card__go::before { content: "→"; font-weight: 700; }
.product-card:hover .product-card__go { transform: none; opacity: 1; }
.rail-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.rail-nav button { width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .06); display: grid; place-items: center; font-size: 1.1rem; transition: background-color .2s; }
.rail-nav button:hover { background: var(--yellow); }
.bg-black .rail-nav button { background: rgba(255, 255, 255, .1); }
.bg-black .rail-nav button:hover { background: var(--yellow); color: var(--black); }

/* Bento Image-Grid */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, .5rem + .8vw, 1.25rem); }
.bento__tile { position: relative; overflow: hidden; border-radius: var(--radius); min-height: clamp(360px, 42vw, 560px); color: var(--white); display: flex; align-items: flex-end; isolation: isolate; background: var(--black); }
.bento__tile--full { grid-column: 1 / -1; min-height: clamp(420px, 52vw, 720px); }
.bento__tile :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease-out); }
.bento__tile:hover :is(img, video) { transform: scale(1.05); }
.bento__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .75) 100%); }
.bento__text { padding: clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 36rem; }
.bento__text h2, .bento__text h3 { font-size: var(--fs-h2); margin-bottom: .5rem; }
.bento__tile:not(.bento__tile--full) .bento__text h2 { font-size: var(--fs-h3); }
.bento__text p { color: rgba(255, 255, 255, .85); }

/* Content-Scroller (Kennzahlen) */
.kpi-scroller { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.kpi-scroller__intro { position: sticky; top: calc(var(--header-h) + 12vh); }
.kpi-scroller__intro .subheader { font-size: var(--fs-lead); color: var(--gray-600); font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.kpi { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; border-top: 1px solid rgba(0, 0, 0, .12); }
.bg-black .kpi { border-top-color: rgba(255, 255, 255, .15); }
.kpi:first-child { border-top: 0; padding-top: 0; }
.kpi__label { font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: .5rem; }
.kpi__value { font-size: clamp(4rem, 2rem + 8vw, 10rem); font-weight: 500; line-height: .95; letter-spacing: -0.045em; margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--black) 0%, #3a3a3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-black .kpi__value { background: linear-gradient(90deg, var(--yellow) 0%, #fff7a0 100%); -webkit-background-clip: text; background-clip: text; }
.kpi__text { max-width: 36rem; color: var(--gray-700); }
.bg-black .kpi__text { color: var(--gray-400); }

/* Count-Banner */
.count-banner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
@media (max-width: 860px) { .count-banner__side { align-items: flex-start; } }
.count-banner__value { font-size: clamp(4rem, 2rem + 8vw, 9rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.count-banner__note { font-size: var(--fs-small); color: var(--gray-600); margin-top: .75rem; }

/* Highlight (ZOLLER-Symbol + Vorteile) */
.highlight { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.highlight__symbol { width: clamp(140px, 10rem + 8vw, 300px); aspect-ratio: 1; color: var(--yellow); }
.highlight__symbol svg { width: 100%; height: 100%; fill: currentColor; }
.highlight__list { display: grid; gap: 0; }
.highlight__list p { font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; padding: 1rem 0; border-bottom: 1px solid rgba(0, 0, 0, .12); margin: 0; display: flex; gap: 1rem; align-items: baseline; }
.highlight__list p::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--yellow); translate: 0 -.1em; }
.bg-black .highlight__list p { border-bottom-color: rgba(255, 255, 255, .15); }
.bg-yellow .highlight__list p::before { background: var(--black); }
.bg-yellow .highlight__symbol { color: var(--black); }

/* Icon-Button-Banner */
.cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--radius); background: var(--yellow); color: var(--black); }
.cta-strip__text { display: flex; align-items: center; gap: 1.5rem; }
.cta-strip__text img { width: 56px; flex: none; }
.cta-strip__text p { margin: 0; }
.cta-strip__text p.bold, .cta-strip__text strong { font-size: var(--fs-h4); font-weight: 500; }
.cta-strip .btn { --btn-bg: var(--black); --btn-fg: var(--white); flex: none; }

/* CTA-Banner (Vollbild) */
.cta-banner { position: relative; min-height: clamp(380px, 50vw, 640px); border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; color: var(--white); isolation: isolate; }
.cta-banner img { position: absolute; inset: -10% 0 auto; width: 100%; height: 120%; object-fit: cover; z-index: -2; }
.cta-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 70%); }
.cta-banner__content { padding: clamp(2rem, 1rem + 4vw, 5rem); max-width: 50rem; }   /* breit genug für »1:1-Expertengespräch« in einer Zeile */
/* Kurze Titel: nie im Wort trennen (am Handy nach »1:1-« statt »Expert-engespräch«), Schrift so klein, dass das längste Wort
   ab 320 px in eine Zeile passt; Schatten hält die Zeile lesbar, wo sie über helle Bildteile läuft */
.cta-banner__content h2, .cta-banner__content h3 { font-size: min(var(--fs-h1), 9.4vw); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 32px rgba(0, 0, 0, .5); }

/* Slider (horizontal, Scroll-Snap) */
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 560px); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-bottom: 1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem; }
.slider__slide .media-frame { aspect-ratio: 1; }
.slider__slide .rte { font-size: 1rem; color: var(--gray-700); max-width: 32rem; }
.bg-black .slider__slide .rte { color: var(--gray-400); }
.slider__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.slider__controls { display: flex; gap: .5rem; flex: none; }
.slider__controls button { width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, .07); display: grid; place-items: center; transition: background-color .2s, opacity .2s; }
.slider__controls button:hover { background: var(--yellow); }
.slider__controls button:disabled { opacity: .3; pointer-events: none; }
.bg-black .slider__controls button { background: rgba(255, 255, 255, .12); }
.slider__controls svg { width: 18px; height: 18px; }

/* Zitat-Slider (Vollbreite) */
.quotes { position: relative; }
.quote-slide { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; padding-block: clamp(4rem, 2rem + 6vw, 8rem); }
.quote-slide--right .quote-slide__img { order: 2; }
.quote-slide__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.quote-slide__img img { width: 100%; height: 100%; object-fit: cover; }
.quote-slide__text .extra-large-text::before { content: "„"; display: block; font-size: 5rem; line-height: .6; color: var(--yellow); margin-bottom: .5rem; }

/* Accordion */
.accordion { border-top: 1px solid rgba(0, 0, 0, .14); }
.bg-black .accordion { border-top-color: rgba(255, 255, 255, .18); }
.accordion details { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.bg-black .accordion details { border-bottom-color: rgba(255, 255, 255, .18); }
.accordion summary { list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; cursor: pointer; padding: 1.4rem 0; font-size: var(--fs-h4); font-weight: 500; line-height: 1.35; transition: color .2s; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gray-600); }
.bg-black .accordion summary:hover { color: var(--gray-300); }
.accordion summary .acc-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--gray-50); position: relative; transition: background-color .3s, transform .5s var(--ease-out); }
.bg-lightgray .accordion summary .acc-icon { background: var(--white); }
.bg-black .accordion summary .acc-icon { background: var(--gray-900); }
.accordion summary .acc-icon::before, .accordion summary .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: transform .4s var(--ease-out); }
.accordion summary .acc-icon::after { transform: rotate(90deg); }
.accordion details[open] summary .acc-icon { background: var(--yellow); color: var(--black); transform: rotate(180deg); }
.accordion details[open] summary .acc-icon::after { transform: rotate(0deg); }
.accordion__body { padding: 0 0 1.75rem; max-width: 56rem; }
.accordion__body > .block + .block { margin-top: 1.5rem; }
.accordion__body .section, .accordion__body .section--tight { padding: 0 !important; background: transparent !important; color: inherit; }
.accordion__body .wrap { padding: 0; }

/* Tabellen */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, .1); vertical-align: top; }
th { font-weight: 700; background: var(--gray-50); }
.bg-lightgray th { background: var(--white); }
.bg-black th, .bg-black td { border-bottom-color: rgba(255, 255, 255, .15); }
.bg-black th { background: var(--gray-900); }
tr:hover td { background: rgba(240, 230, 0, .08); }
.spec-table tr.is-group td { font-weight: 700; padding-top: 1.6rem; border-bottom: 2px solid var(--black); background: none; }
.spec-table td:not(:first-child) { color: var(--gray-700); }

/* Downloads */
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
.download { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: var(--radius); background: var(--white); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.bg-white .download { background: var(--gray-50); }
.download:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .35); }
.download__thumb { aspect-ratio: 310 / 437; border-radius: 8px; overflow: hidden; background: var(--gray-100); }
.download__thumb img { width: 100%; height: 100%; object-fit: cover; }
.download__name { font-weight: 500; line-height: 1.3; }
.download__meta { display: flex; justify-content: space-between; align-items: center; font-size: .8125rem; color: var(--gray-500); margin-top: auto; }
.download__meta::after { content: "↓"; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--black); display: grid; place-items: center; font-weight: 700; }

/* Unternavigation (Produktseiten) */
.subnav { position: sticky; top: 0; z-index: 90; height: var(--subnav-h); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); transition: top .5s var(--ease-out); }
.header-visible .subnav { top: var(--header-h); }
.subnav__inner { height: 100%; display: flex; align-items: center; gap: 1.25rem; }
.subnav__title { font-weight: 500; font-size: 1.125rem; white-space: nowrap; flex: 0 1 auto; min-width: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
/* Liste füllt den Platz zwischen Titel und Button; die Auto-Marge schiebt sie nach rechts, fällt bei Überlauf aber auf 0 */
.subnav__list { list-style: none; display: flex; gap: .25rem; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.subnav__list > li:first-child { margin-left: auto; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { margin: 0; flex: none; }
.subnav__list a { display: block; padding: .35rem .8rem; font-size: .875rem; border-radius: 999px; color: var(--gray-700); white-space: nowrap; }
.subnav__list a:hover { color: var(--black); background: rgba(0, 0, 0, .05); }
.subnav__list a[aria-current] { color: var(--black); background: var(--yellow); }
.subnav.is-tight .subnav__title { display: none; }   /* main.js: zu eng → Titel weicht, dann wischbare Liste mit weichem Rand */
.subnav.is-tight .subnav__list > li:first-child { margin-left: 0; }
.subnav.is-scroll .subnav__list { padding-right: 1.5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
.subnav .btn { padding: .45em 1em; font-size: .8125rem; margin: 0; flex: none; }
.subnav .btn::after { display: none; }

/* Produkt-Hero */
.product-hero { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 70% 45%, #ffffff 0%, var(--gray-50) 60%, #e4e4e4 100%); padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 5rem)); }
.product-hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: center; min-height: min(78vh, 760px); }
.product-hero__name { font-size: clamp(3rem, 1.8rem + 6vw, 7.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: .95; margin-bottom: 1.25rem; }
.product-hero__claim { font-size: var(--fs-lead); color: var(--gray-700); max-width: 30rem; }
.product-hero__img { position: relative; }
.product-hero__img img { width: 100%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .18)); }
.product-hero__img::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 8%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .18), transparent 70%); filter: blur(10px); }

/* Overlay / Modal */
.overlay-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1rem; }
.tile-btn { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--white); display: grid; place-items: center; padding: 1.25rem; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.bg-white .tile-btn { background: var(--gray-50); }
.tile-btn:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .4); }
.tiles > * { min-width: 0; }   /* breite Logos/Fotos dürfen die Spalte nicht über den Bildschirm drücken (Handy) */
.tile-btn img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.tile-btn__label { font-weight: 500; text-align: center; }
.tile-btn::after { content: "+"; position: absolute; right: .6rem; top: .6rem; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-weight: 700; line-height: 1; }
.modal { border: 0; padding: 0; border-radius: var(--radius); width: min(1080px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: var(--shadow-lg); overflow: auto; }
.modal::backdrop { background: rgba(0, 0, 0, .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal[open] { animation: modal-in .5s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal__img { background: var(--gray-50); }
.modal__img img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.modal__close { position: absolute; top: .75rem; right: .75rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; z-index: 2; font-size: 1.4rem; line-height: 1; }
.modal__close:hover { background: var(--yellow); }

/* Hotspots */
.hotspots { position: relative; }
.hotspots__img { position: relative; }
.hotspots__img > img { width: 100%; border-radius: var(--radius); }
.hotspot { position: absolute; translate: -50% -50%; z-index: 2; }
.hotspot__btn { position: relative; display: flex; align-items: center; gap: .5rem; padding: .35rem .85rem .35rem .35rem; border-radius: 999px; background: rgba(0, 0, 0, .78); color: var(--white); font-size: .8125rem; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, transform .4s var(--ease-out); }
.hotspot__btn:hover, .hotspot.is-open .hotspot__btn { background: var(--black); transform: scale(1.05); }
.hotspot__dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); flex: none; }
.hotspot__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--yellow); animation: pulse 2.2s var(--ease-out) infinite; }
.hotspot__dot::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--black); font-weight: 700; line-height: 1; transition: transform .3s; }
.hotspot.is-open .hotspot__dot::after { transform: rotate(45deg); }
@keyframes pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hotspot__panel { position: absolute; top: calc(100% + .75rem); left: 50%; translate: -50% 0; width: min(340px, 80vw); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-sm); background: var(--white); color: var(--black); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out), visibility 0s .3s; font-size: .9375rem; }
.hotspot.is-open .hotspot__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease-out); }
.hotspot__panel h3 { font-size: 1.125rem; }
.hotspot__panel .btn { font-size: .8125rem; padding: .55em 1em; }
.hotspot--flip .hotspot__panel { top: auto; bottom: calc(100% + .75rem); }
.hotspot--left .hotspot__panel { left: auto; right: -1rem; translate: 0 0; }
.hotspot--right .hotspot__panel { left: -1rem; translate: 0 0; }
.hotspots__list { display: none; }
/* Mit Beschriftung (ab 861 px): der gelbe Punkt sitzt genau auf der Stelle, die Beschriftung läuft zur Bildmitte –
   zentriert lag der Punkt um eine halbe Pillenbreite daneben und am Bildrand ragte die Pille hinaus */
@media (min-width: 861px) {
  .hotspot { --dot: calc(.35rem + 11px); translate: calc(-1 * var(--dot)) -50%; transform-origin: var(--dot) 50%; }
  .hotspot--left { translate: calc(var(--dot) - 100%) -50%; transform-origin: calc(100% - var(--dot)) 50%; }
  .hotspot--left .hotspot__btn { flex-direction: row-reverse; padding: .35rem .35rem .35rem .85rem; }
}

/* Spalten Bild + Text (Werte) */
.value-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 739 / 1000; color: var(--white); display: flex; align-items: flex-end; isolation: isolate; }
.value-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }
.value-tile:hover img { transform: scale(1.06); }
.value-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .85) 100%); }
.value-tile__text { padding: 1.5rem; font-size: 1rem; line-height: 1.45; }

/* News-Tags */
.tag-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.tag-filter a { padding: .45rem 1rem; border-radius: 999px; background: var(--white); font-size: .875rem; transition: background-color .2s; }
.bg-white .tag-filter a { background: var(--gray-50); }
.tag-filter a:hover, .tag-filter a[aria-current] { background: var(--yellow); }
.pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 3rem; list-style: none; padding: 0; }
.pagination li { margin: 0; }
.pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 .9rem; display: grid; place-items: center; border-radius: 999px; background: var(--white); }
.bg-white .pagination a, .bg-white .pagination span { background: var(--gray-50); }
.pagination a:hover, .pagination [aria-current] { background: var(--yellow); }

/* Artikel (News-Detail) */
.article-hero { padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 5rem)); }
.article-hero__meta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .875rem; color: var(--gray-600); margin-bottom: 1.25rem; }
.article-hero__meta .card__tags { font-size: .75rem; }
.article-hero h1 { font-size: var(--fs-h1); max-width: 22ch; }
.article-hero .lead { font-size: var(--fs-lead); color: var(--gray-700); max-width: 46rem; line-height: 1.45; }
.article-hero__img { margin-top: clamp(2rem, 1rem + 3vw, 4rem); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; }
.article-hero__img img { position: relative; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.article-body { font-size: 1.125rem; line-height: 1.7; }
.article-body .rte > * { max-width: var(--maxw-text); margin-inline: auto; }
.article-body .rte > figure, .article-body .rte > .media-wide { max-width: 64rem; }
.article-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; max-width: 64rem; margin: 3rem auto 0; }
.article-gallery figure { border-radius: var(--radius-sm); overflow: hidden; }
.article-related { margin-top: 3rem; }

/* Formulare */
.form { max-width: 56rem; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form label, .form legend { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; }
.form .required { color: #c60; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="number"], .form input[type="date"], .form input[type="url"], .form input[type="password"], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid rgba(0, 0, 0, .15); background: var(--white); color: var(--black); transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 4px rgba(240, 230, 0, .55); }
.form .form-check, .form .checkbox { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .5rem; }
.form .form-check label, .form .checkbox label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .9375rem; }
.form input[type="checkbox"], .form input[type="radio"] { width: 20px; height: 20px; accent-color: var(--black); flex: none; margin-top: .15rem; }
.form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.form .help-block, .form .form-text { font-size: .8125rem; color: var(--gray-600); }
.form button[type="submit"], .form .btn-primary { --btn-bg: var(--black); --btn-fg: var(--white); }
.form-note { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: rgba(240, 230, 0, .25); font-size: .9375rem; }
.form-status { margin-top: 1rem; font-weight: 500; }

/* Standorte */
.locations__filter { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.locations__filter input, .locations__filter select { font: inherit; padding: .75rem 1rem; border-radius: 999px; border: 1.5px solid rgba(0, 0, 0, .15); background: var(--white); min-width: 240px; }
.locations__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.location { padding: 1.5rem; border-radius: var(--radius); background: var(--white); font-size: .9375rem; }
.bg-white .location { background: var(--gray-50); }
.location h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.location__region { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); font-weight: 700; margin-bottom: .5rem; }
.location[hidden] { display: none; }

/* Pinned horizontaler Scroll (Startseite: Fräsen/Drehen/Schleifen) */
.hscroll { position: relative; }
/* Abstand oben/unten steckt im festgehaltenen Bereich: als Abschnitts-Abstand würde er den Bereich nach unten aus dem Bild schieben */
.hscroll.section { padding-block: 0; }
.hscroll__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(1rem, 3vh, 2.5rem)) clamp(1.25rem, 4vh, 3rem); }
/* Kartenreihe nimmt die Höhe, die nach Überschrift und Fortschrittsbalken übrig bleibt (höchstens 68vh / 640px) */
.hscroll__track { flex: 0 1 min(68vh, 640px); min-height: 0; display: flex; gap: clamp(1rem, .5rem + 1.5vw, 2rem); padding-inline: var(--gutter); will-change: transform; }
.hscroll__item { flex: none; width: min(78vw, 980px); display: flex; }
.hscroll .app-card { flex: 1; min-width: 0; position: relative; border-radius: var(--radius); overflow: hidden; color: var(--white); display: flex; align-items: flex-end; isolation: isolate; }
.hscroll .app-card__text { padding-block: min(clamp(1.5rem, 1rem + 2vw, 3rem), 5vh); }   /* niedrige Fenster: Text bleibt unter der Nummer */
.hscroll .app-card__text h3 { font-size: min(var(--fs-h1), 9vh); }
.reduced-motion .hscroll__track { overflow-x: auto; scroll-snap-type: x mandatory; }   /* ohne Bewegung wird nicht gepinnt: Karten seitlich wischen */
.app-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.12); }
.app-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .82) 100%); }
.app-card__text { padding: clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 40rem; }
.app-card__text h3 { font-size: var(--fs-h1); margin-bottom: .5rem; }
.app-card__text p { color: rgba(255, 255, 255, .85); }
.app-card__num { position: absolute; top: 1.5rem; left: 1.75rem; font-size: .875rem; letter-spacing: .14em; color: var(--yellow); font-weight: 700; }

/* Zitat */
.big-quote { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.big-quote--rev .big-quote__img { order: 2; }
.big-quote__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.4; }
.big-quote__img img { position: relative; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.big-quote blockquote { margin: 0; }
.big-quote blockquote p { font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; }
.big-quote blockquote p::before { content: "„"; color: var(--yellow); }
.big-quote blockquote p::after { content: "“"; color: var(--yellow); }
.big-quote cite { display: block; font-style: normal; color: var(--gray-600); margin: 1.5rem 0 2rem; font-size: 1rem; }
.bg-black .big-quote cite { color: var(--gray-400); }

/* Footer */
.site-footer { background: var(--black); color: var(--white); padding-top: clamp(4rem, 3rem + 4vw, 7rem); font-size: .9375rem; }
.footer-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-cta h2 { font-size: var(--fs-h1); max-width: 14ch; margin: 0; }
.footer-cta h2 em { font-style: normal; color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.footer-grid h3 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); font-weight: 700; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0 0 .55rem; }
.footer-grid a { color: rgba(255, 255, 255, .78); transition: color .2s; }
.footer-grid a:hover { color: var(--yellow); }
.footer-brand img { width: 150px; margin-bottom: 1.25rem; }
.footer-brand address { font-style: normal; color: rgba(255, 255, 255, .65); line-height: 1.7; }
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.footer-social a:hover { background: var(--yellow); color: var(--black); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); font-size: .8125rem; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }
.footer-bottom a:hover, .footer-bottom button:hover { color: var(--white); }
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); color: var(--black); display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease-out); pointer-events: none; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 18px; height: 18px; }
/* Länderseiten mit LiveChat (HubSpot-Export, content/hubspot.json »livechat«): Chat-Blase 84 × 84 px unten rechts */
.has-livechat .to-top { right: 18px; bottom: calc(84px + .25rem); }

/* Cookie-Hinweis */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 300; max-width: 560px; padding: 1.5rem; border-radius: var(--radius); background: rgba(16, 16, 16, .96); color: var(--white); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .9375rem; }
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.125rem; margin-bottom: .5rem; }
.consent p { color: rgba(255, 255, 255, .75); }
.consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.consent .btn { margin: 0; font-size: .875rem; }
.consent .btn::after { display: none; }
.consent .btn--ghost { color: var(--white); }

/* ---------- Scroll-Animationen ---------- */
.js [data-reveal] {
  --reveal-t: opacity 1s var(--ease-out) var(--d, 0s), translate 1.2s var(--ease-out) var(--d, 0s), scale 1.2s var(--ease-out) var(--d, 0s), rotate 1.3s var(--ease-out) var(--d, 0s);
  opacity: 0; translate: 0 40px;
}
:where(.js [data-reveal]) { transition: var(--reveal-t); }   /* Komponenten mit eigenem transition hängen var(--reveal-t) an */
.js [data-reveal="fade"] { translate: none; }
.js [data-reveal="scale"] { translate: none; scale: .94; }
.js [data-reveal="left"] { translate: -40px 0; }
.js [data-reveal="right"] { translate: 40px 0; }
/* Karten kippen beim Hereinscrollen aus der Tiefe nach oben (Perspektive vom Raster) */
.card-grid, .product-rail, .value-tiles, .goals, .ev-products, .ev-next__grid { perspective: 1800px; }
.js :is(.card, .product-card, .value-tile, .goal, .ev-product, .ev-next)[data-reveal] { translate: 0 80px; rotate: x 11deg; scale: .96; transform-origin: 50% 100%; }
.js [data-reveal].is-in { opacity: 1; translate: none; scale: none; rotate: none; }
/* Gelber Akzentstrich über Überschriften wächst mit */
.js [data-reveal] .headline-decor::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out) calc(var(--d, 0s) + .25s); }
.js [data-reveal].is-in .headline-decor::before { transform: none; }
.js .reveal-mask { clip-path: inset(12% 6% 12% 6% round var(--radius)); }
.reduced-motion [data-reveal], .reduced-motion .reveal-mask { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; clip-path: none !important; }
.reduced-motion .headline-decor::before { transform: none !important; }

/* ---------- Produkt-Hero mit 3D-Bühne ---------- */
.product-hero--stage { background: radial-gradient(75% 70% at 70% 58%, #ffffff 0%, #f1f1f1 52%, #dadada 100%); }
.product-hero__eyebrow { display: inline-block; margin-bottom: 1.25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); }
.product-hero__actions { margin-top: .5rem; }
.btn--3d { gap: .55em; }
.btn--3d svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--3d::after { display: none; }
.product-hero--stage .product-hero__img { aspect-ratio: 1.12; display: grid; place-items: end center; }
.product-hero--stage .product-hero__img::before { display: none; }
.product-hero__cutout { position: relative; z-index: 1; width: auto !important; max-width: 86%; max-height: 82%; margin-bottom: 8%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .16)); view-transition-name: product-hero; transition: opacity .7s var(--ease-out); }
.product-hero__symbol { position: absolute; left: 50%; top: 44%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); fill: none; stroke: var(--yellow); stroke-width: 9; stroke-linecap: butt; z-index: 0; transition: opacity .7s var(--ease-out); }
.product-hero__canvas { position: absolute; inset: -14%; width: 128%; height: 128%; max-width: none; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .35s ease-out; }
.product-hero__img.is-3d .product-hero__canvas { opacity: 1; }
.product-hero__img.is-3d .product-hero__cutout, .product-hero__img.is-3d .product-hero__symbol { opacity: 0; transition-duration: .25s; }
.product-hero--stage .scroll-cue { color: var(--black); }

/* Themenwelt-Hinweis (gelber Streifen) */
.cta-strip__icon { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--black); color: var(--yellow); }
.cta-strip__icon svg { width: 30px; height: 30px; }

/* ---------- Startseite: Kameraflug durch die 3D-Produktwelt ---------- */
.worldflight { position: relative; height: 900vh; background: #e7e9ec; color: var(--white); }
.worldflight__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.worldflight__poster { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 1.2s var(--ease-out); }
.worldflight__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.worldflight.is-ready .worldflight__canvas { opacity: 1; }
.worldflight.is-ready .worldflight__poster { opacity: 0; }
.worldflight__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 8, 10, .74) 0%, rgba(8, 8, 10, .42) 30%, rgba(8, 8, 10, 0) 52%), linear-gradient(0deg, rgba(8, 8, 10, .3) 0%, rgba(8, 8, 10, 0) 26%); transition: opacity .8s; }
.worldflight.is-traveling .worldflight__shade { opacity: .55; }
.worldflight__ui { position: relative; height: 100%; }
.wf-chapter { position: absolute; left: var(--gutter); top: 50%; width: min(460px, calc(100% - 2 * var(--gutter))); padding: 2rem 2.1rem 1.8rem; border-radius: var(--radius); background: rgba(12, 12, 14, .64); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, .08); opacity: 0; visibility: hidden; transform: translate3d(-24px, -42%, 0); transition: opacity .55s var(--ease-out), transform .9s var(--ease-out), visibility 0s .55s; }
.wf-chapter.is-active { opacity: 1; visibility: visible; transform: translate3d(0, -50%, 0); transition: opacity .55s var(--ease-out), transform .9s var(--ease-out), visibility 0s; }
.wf-chapter > * { transition: transform .9s var(--ease-out), opacity .7s; }
.wf-chapter:not(.is-active) > * { transform: translateY(14px); opacity: 0; }
.wf-chapter.is-active > :nth-child(2) { transition-delay: .06s; } .wf-chapter.is-active > :nth-child(3) { transition-delay: .12s; } .wf-chapter.is-active > :nth-child(4) { transition-delay: .18s; } .wf-chapter.is-active > :nth-child(5) { transition-delay: .24s; } .wf-chapter.is-active > :nth-child(6) { transition-delay: .3s; }
.wf-chapter--intro, .wf-chapter--outro { width: min(760px, calc(100% - 2 * var(--gutter))); background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.wf-chapter--intro h2, .wf-chapter--outro h2 { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.04em; margin: .2em 0 .35em; text-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.wf-chapter--intro h2 em, .wf-chapter--outro h2 em { font-style: normal; color: var(--yellow); }
.wf-chapter--intro p, .wf-chapter--outro p { font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); max-width: 34rem; }
.wf-chapter .eyebrow { color: var(--yellow); }
.wf-num { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .12em; color: var(--yellow); }
.wf-num small { color: rgba(255, 255, 255, .45); font-size: inherit; }
.wf-chapter h3 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.03em; margin: .45rem 0 .7rem; }
.wf-text { color: rgba(255, 255, 255, .78); margin: 0 0 1rem; }
.wf-count { margin: 0 0 .9rem; color: rgba(255, 255, 255, .7); }
.wf-count b { font-size: 2.6rem; font-weight: 500; color: var(--yellow); letter-spacing: -0.03em; margin-right: .3rem; }
.wf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; }
.wf-chips li { margin: 0; }
.wf-chips a, .wf-more { display: inline-block; padding: .38rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .875rem; color: rgba(255, 255, 255, .9); transition: background .25s, color .25s; }
.wf-chips a:hover { background: var(--yellow); color: var(--black); }
.wf-more { background: none; color: rgba(255, 255, 255, .55); }
.wf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.wf-links .link-arrow { color: var(--white); }
.wf-3d { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: var(--yellow); color: var(--black); font-weight: 500; font-size: .9375rem; transition: box-shadow .35s var(--ease-out); }
.wf-3d svg { width: 18px; height: 18px; }
.wf-3d:hover { box-shadow: 0 10px 30px -8px rgba(240, 230, 0, .8); }
.wf-scroll { display: inline-block; margin-top: 1.5rem; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 14px; position: relative; }
.wf-scroll i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--yellow); animation: wf-scroll 1.6s var(--ease-out) infinite; }
@keyframes wf-scroll { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.worldflight__rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; list-style: none; margin: 0; padding: .8rem .6rem; display: flex; flex-direction: column; gap: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.worldflight__rail li { margin: 0; }
.worldflight__rail button { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--black); }
.worldflight__rail button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .28); transition: transform .4s var(--ease-out), background .3s; }
.worldflight__rail button:hover::before, .worldflight__rail button.is-active::before { background: var(--black); transform: scale(1.35); }
.worldflight__rail button.is-active::before { background: var(--yellow); box-shadow: 0 0 0 3px var(--black); }
.worldflight__rail span { position: absolute; right: calc(100% + .7rem); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: .3rem .65rem; border-radius: 999px; background: var(--black); color: var(--white); font-size: .8125rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease-out); }
.worldflight__rail button:hover span, .worldflight__rail button.is-active span { opacity: 1; transform: translate(0, -50%); }
.worldflight__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .08); z-index: 3; }
.worldflight__bar i { display: block; height: 100%; background: var(--yellow); transform-origin: left; transform: scaleX(0); }
.worldflight__loading { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--black); transition: opacity .6s; }
.worldflight__loading i { display: block; width: 160px; height: 3px; border-radius: 3px; background: var(--black); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.worldflight.is-ready .worldflight__loading, .worldflight.is-static .worldflight__loading { opacity: 0; pointer-events: none; }
/* Tablet hochkant: Karte unten wie auf dem Handy, die Szene bekommt die volle Breite (worldflight.js, applyInset) */
@media (min-width: 861px) and (max-aspect-ratio: 1/1) {
  .worldflight__shade { background: linear-gradient(0deg, rgba(8, 8, 10, .72) 0%, rgba(8, 8, 10, .25) 40%, rgba(8, 8, 10, 0) 60%); }
  .wf-chapter { top: auto; bottom: 2rem; transform: translate3d(0, 24px, 0); }
  .wf-chapter.is-active { transform: none; }
  .wf-chapter--intro, .wf-chapter--outro { bottom: 3rem; }
}
.worldflight.is-static { height: auto; }
.worldflight.is-static .worldflight__sticky { position: relative; height: auto; padding: 6rem 0; }
.worldflight.is-static .worldflight__shade { background: rgba(8, 8, 10, .7); }
.worldflight.is-static .worldflight__ui { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.worldflight.is-static .wf-chapter { position: relative; left: auto; top: auto; width: auto; opacity: 1; visibility: visible; transform: none; }
.worldflight.is-static .wf-chapter > * { opacity: 1; transform: none; }
.worldflight.is-static .wf-chapter--intro, .worldflight.is-static .wf-chapter--outro { grid-column: 1 / -1; }
.worldflight.is-static .worldflight__rail, .worldflight.is-static .worldflight__bar, .worldflight.is-static .wf-scroll { display: none; }

/* ---------- Überschriften-Reveal & Cursor-Licht ---------- */
.h-split .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h-split .hw > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.h-split.is-in .hw > span { transform: none; }
.cursor-glow { position: absolute; left: 0; top: 0; z-index: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(240, 230, 0, .13), rgba(240, 230, 0, .04) 55%, transparent); opacity: 0; transition: opacity .6s; will-change: transform; }
.cursor-glow.is-on { opacity: 1; }
.bg-black > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }
main .bg-black, .site-footer { overflow-x: clip; }

/* ---------- Seitenübergänge (View Transitions) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
/* Blattwechsel: die alte Seite sinkt als Karte ins Dunkle zurück, die neue gleitet mit gelber Messkante von unten darüber */
::view-transition { background: #050506; }
::view-transition-old(root) { animation: vt-sink .7s cubic-bezier(.65, 0, .35, 1) both; transform-origin: 50% 35%; }
::view-transition-new(root) { animation: vt-rise .8s cubic-bezier(.16, 1, .3, 1) .06s both; box-shadow: 0 -2px 0 0 var(--yellow), 0 -40px 90px -20px rgba(0, 0, 0, .7); }
::view-transition-group(product-hero) { animation-duration: 820ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-image-pair(product-hero) { isolation: auto; }
::view-transition-old(product-hero), ::view-transition-new(product-hero) { mix-blend-mode: normal; height: 100%; object-fit: contain; }
@keyframes vt-sink { to { transform: scale(.92); opacity: .3; border-radius: 28px; } }
@keyframes vt-rise { from { transform: translateY(100%); border-radius: 28px 28px 0 0; } to { transform: none; border-radius: 0; box-shadow: 0 0 0 0 rgba(240, 230, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- 3D-Produktumgebung (Teaser) ---------- */
.showroom-teaser .feature__media .media-frame { aspect-ratio: 16 / 9; display: block; box-shadow: 0 30px 80px -30px rgba(240, 230, 0, .35); }
.showroom-teaser .media-frame img { transition: transform 1.2s var(--ease-out); }
.showroom-teaser .media-frame:hover img { transform: scale(1.04); }
.showroom-teaser__play { position: absolute; right: 1.25rem; bottom: 1.25rem; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--black); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .4s var(--ease-out); }
.showroom-teaser__play svg { width: 30px; height: 30px; }
.showroom-teaser .media-frame:hover .showroom-teaser__play { transform: scale(1.08) rotate(-8deg); }
.showroom-teaser__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 1.75rem; padding: 0; }
.showroom-teaser__facts li { margin: 0; padding: .5rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); font-size: .9375rem; }
.showroom-teaser__facts b { color: var(--yellow); font-weight: 500; margin-right: .2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1499px) {
  .site-header__meta .meta-link:not(.myzoller-link) { display: none; }
}
@media (max-width: 1299px) {
  .site-header__meta { display: none; }
  .mainnav__link { padding-inline: .7rem; }
  .mainnav__link.is-active::after { left: .7rem; right: .7rem; }
}
@media (max-width: 1179px) {
  .mainnav__link { padding-inline: .55rem; font-size: .875rem; }
  .mainnav__link.is-active::after { left: .55rem; right: .55rem; }
  .site-header__logo { width: 104px; }
  .site-header__logo--country { width: auto; gap: .55rem; }
  .site-header__logo--country img { width: 104px; }
  .site-header__country { padding-left: .55rem; font-size: .75rem; letter-spacing: .06em; }
  .showroom-link__full { display: none; }
  .showroom-link__short { display: inline; font-weight: 700; }
  .showroom-link { padding-inline: .7rem .8rem; }
}
@media (max-width: 1023px) {
  .mainnav { display: none; }
  .burger { display: grid; }
  .showroom-link__full { display: inline; }
  .showroom-link__short { display: none; }
}
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .value-tiles { grid-template-columns: repeat(2, 1fr); }
  .cols--4 { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(min(var(--cols, 4), 3), 1fr); }
}
@media (max-width: 860px) {
  .textmedia--right, .textmedia--left, .overlay-teaser, .big-quote, .quote-slide, .kpi-scroller, .product-hero__grid, .highlight, .count-banner, .cols--2, .cols--66-33, .cols--33-66, .cols--3, .modal__grid { grid-template-columns: 1fr; }
  .textmedia--left .textmedia__media, .textmedia--right .textmedia__media { order: -1; }
  .big-quote--rev .big-quote__img, .quote-slide--right .quote-slide__img { order: 0; }
  .kpi-scroller__intro { position: static; }
  .bento { grid-template-columns: 1fr; }
  .bento__tile { min-height: 420px; }
  .cta-strip, .slider__head { flex-direction: column; align-items: flex-start; }
  .cta-strip__text { flex-direction: column; align-items: flex-start; }
  .product-hero__grid { min-height: 0; padding-bottom: 2rem; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .homefilm { height: 280vh; }
  .homefilm__panel--right { text-align: left; left: var(--gutter); }
  .homefilm__panel--right p { margin-left: 0; }
  .homefilm__panel { top: auto; bottom: 12%; transform: none; }
  .hotspots__img .hotspot__label { display: none; }
  .hotspot__btn { padding: .3rem; }
  .hotspots__list { display: block; margin-top: 1.5rem; }
  .hotspot__panel { display: none; }
}
@media (max-width: 700px) {
  .subnav__title { display: none; }
  .subnav__list > li:first-child { margin-left: 0; }
  .subnav__list { margin-right: -.5rem; padding-right: 1.5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
}
@media (max-width: 860px) {
  .worldflight { height: 820vh; }
  .worldflight__shade { background: linear-gradient(0deg, rgba(8, 8, 10, .72) 0%, rgba(8, 8, 10, .25) 45%, rgba(8, 8, 10, 0) 65%); }
  .wf-chapter { top: auto; bottom: 1.25rem; padding: 1.4rem 1.4rem 1.25rem; transform: translate3d(0, 24px, 0); }
  .wf-chapter.is-active { transform: none; }
  .wf-chapter--intro, .wf-chapter--outro { bottom: 2.5rem; }
  .wf-chapter { padding: 1.1rem 1.15rem 1rem; }
  .wf-chapter h3 { font-size: 1.7rem; margin: .25rem 0 .35rem; }
  .wf-text { font-size: .875rem; margin-bottom: .5rem; line-height: 1.4; }
  .wf-count { margin-bottom: .6rem; font-size: .875rem; }
  .wf-count b { font-size: 1.5rem; }
  .wf-chips { gap: .3rem; margin-bottom: .85rem; }
  .wf-chips a { padding: .28rem .6rem; font-size: .8125rem; }
  .wf-chips li:nth-child(n + 5) { display: none; }
  .wf-links { gap: .6rem 1rem; }
  .wf-3d { padding: .5rem .85rem; font-size: .875rem; }
  .worldflight__loading { top: 5.5rem; bottom: auto; }
  .wf-chips .wf-more { display: none; }
  .worldflight__rail { display: none; }
  .worldflight.is-static .worldflight__ui { grid-template-columns: 1fr; }
  .product-hero--stage .product-hero__img { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  :root { --radius: 18px; }
  .value-tiles, .cols--4, .tiles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .textmedia__media[data-cols="3"], .textmedia__media[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .hscroll__item { width: 86vw; }
  .site-header__logo { width: 104px; }
  .site-header__logo--country { width: auto; gap: .55rem; }
  .site-header__logo--country img { width: 104px; }
  .site-header__country { padding-left: .55rem; font-size: .75rem; letter-spacing: .06em; }
  .site-header__tools .lang-toggle { display: none; }   /* Sprachwechsel steht im Menü */
  .site-header__tools .cur-btn { display: none; }        /* Währung steht im Menü */
  .site-header__tools { gap: 0; }
  .showroom-link { margin: 0 .25rem; padding: .45rem .65rem; }
  .showroom-link__full { display: none; }
  .showroom-link__short { display: inline; font-weight: 700; }
  .site-header__tools .icon-btn:not(.lang-btn) { width: 36px; }
  .lang-btn { gap: .3rem; padding: 0 .45rem 0 .4rem; }
  .lang-btn > svg:first-child { width: 18px; height: 18px; }
  .lang-btn .flag { height: 13px; }
  .subnav .btn { display: none; }
}
@media (max-width: 400px) {
  .site-header__logo--country { gap: .45rem; }
  .site-header__logo--country img { width: 90px; }
  .site-header__country { padding-left: .45rem; font-size: .6875rem; letter-spacing: .04em; }
}
@media (max-width: 380px) {
  .site-header__inner { gap: .75rem; }
  .site-header__tools .icon-btn:not(.lang-btn) { width: 34px; }
  .lang-btn { padding: 0 .35rem 0 .3rem; }
  .showroom-link { width: 34px; height: 34px; margin: 0 .15rem; padding: 0; justify-content: center; }   /* nur der Würfel */
  .showroom-link__short { display: none; }
}
@media (max-width: 340px) {
  .site-header__country { display: none; }   /* die Flagge im Länder-Knopf zeigt das Land */
}
/* Kopfleiste zu voll (lange Menütexte, z. B. Französisch): main.js setzt fit-1 … fit-5 nacheinander,
   bis Menü und Werkzeuge nebeneinander passen – zuletzt wandert das Menü hinter den Burger */
.site-header.fit-1 .site-header__meta .meta-link:not(.myzoller-link) { display: none; }
.site-header.fit-2 .site-header__meta, .site-header.fit-2 .site-header__tools .lang-toggle { display: none; }
.site-header.fit-3 .showroom-link { padding-inline: .7rem .8rem; }
.site-header.fit-3 .showroom-link__full { display: none; }
.site-header.fit-3 .showroom-link__short { display: inline; font-weight: 700; }
.site-header.fit-4 .site-header__inner { gap: 1rem; }
.site-header.fit-4 .mainnav__link { padding-inline: .45rem; font-size: .8125rem; }
.site-header.fit-4 .mainnav__link.is-active::after { left: .45rem; right: .45rem; }
.site-header.fit-4 .lang-btn { gap: .3rem; padding: 0 .45rem 0 .4rem; }
.site-header.fit-4 .lang-btn > svg:first-child { width: 18px; height: 18px; }
/* fit-5: Showroom nur noch als Würfel, fit-6: Planer nur als Symbol (oben), fit-7: Menü hinter den Burger */
.site-header.fit-5 .showroom-link { width: 36px; height: 36px; padding: 0; justify-content: center; }
.site-header.fit-5 .showroom-link__full, .site-header.fit-5 .showroom-link__short { display: none !important; }
.site-header.fit-7 .mainnav { display: none; }
.site-header.fit-7 .burger { display: grid; }

/* ---------- Scroll-Effekte: Vorhang-Hero, Lesefortschritt, Zeitstrahl, Events, Hotspots ---------- */
/* Vorhang: das erste Hero bleibt stehen und dunkelt ab, der Inhalt gleitet als Blatt mit runden Ecken darüber */
main > :is(.hero, .ev-hero):first-child { position: sticky; top: 0; z-index: 0; }
main > :is(.hero, .ev-hero):first-child ~ :not(.subnav) { position: relative; z-index: 1; }
main > :is(.hero, .ev-hero):first-child + .section { margin-top: calc(-1 * var(--sheet-r)); border-radius: var(--sheet-r) var(--sheet-r) 0 0; overflow: clip; box-shadow: 0 -40px 60px -40px rgba(0, 0, 0, .55); }
main:has(> :is(.hero, .ev-hero):first-child) + .site-footer { position: relative; z-index: 1; }
main > :is(.hero, .ev-hero):first-child::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: calc(var(--cover, 0) * .6); pointer-events: none; }

/* Lesefortschritt: gelbe Linie am oberen Rand (main.js, nicht auf der Startseite) */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 150; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--yellow); box-shadow: 0 0 12px rgba(240, 230, 0, .55); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@supports (animation-timeline: scroll()) {
  .scroll-progress i { transform: scaleX(0); animation: scroll-progress linear both; animation-timeline: scroll(root); }
}
@keyframes scroll-progress { to { transform: scaleX(1); } }

/* Zeitstrahl (Historie): das Jahr in der Bildmitte wird kräftig, erreichte Punkte füllen sich gelb */
.milestone__year { transition: color .7s var(--ease-out); }
.milestone.is-active .milestone__year { color: var(--black); }
.milestone::before { transition: background-color .4s, scale .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.milestone.is-past::before, .milestone.is-active::before { background: var(--yellow); }
.milestone.is-active::before { scale: 1.3; box-shadow: 0 0 0 7px rgba(240, 230, 0, .28); }

/* Events: Zeile gleitet von links herein, das Datumsfeld klappt auf */
.event { perspective: 700px; }
.js .event[data-reveal] { translate: -36px 0; }
.js .event[data-reveal] .event__date { rotate: y -85deg; opacity: 0; transition: rotate 1.1s var(--ease-out) calc(var(--d, 0s) + .12s), opacity .5s var(--ease-out) calc(var(--d, 0s) + .12s); }
.js .event[data-reveal].is-in .event__date { rotate: none; opacity: 1; }

/* Hotspots springen nacheinander auf, sobald das Bild im Blick ist */
.js .hotspots[data-reveal] .hotspot { scale: 0; transition: scale .7s cubic-bezier(.34, 1.56, .64, 1) calc(.5s + var(--i, 0) * 90ms); }
.js .hotspots[data-reveal].is-in .hotspot { scale: 1; }
.reduced-motion .event__date, .reduced-motion .hotspot { rotate: none !important; scale: none !important; opacity: 1 !important; }

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

@media print {
  .site-header, .mobile-nav, .site-footer, .to-top, .consent, .subnav, .scroll-progress, .homefilm__video, .homefilm__tags, .homefilm__ctrl { display: none !important; }
  main { padding-top: 0; }
  [data-reveal], .reveal-mask { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; clip-path: none !important; }
}

/* =========================================================================
   Ergänzungen: Komponenten des Generators
   ========================================================================= */
.section-head-inline > * + * { margin-top: .25em; }
.section-head-inline h3 + h2, .section-head-inline h4 + h2 { margin-top: .2em; }
.section-head-inline h3:first-child:not(:only-child) { font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); }
.bg-black .section-head-inline h3:first-child:not(:only-child) { color: var(--yellow); }
.bg-yellow .section-head-inline h3:first-child:not(:only-child) { color: var(--black); opacity: .7; }
.textmedia__text h1 { font-size: var(--fs-h1); }
.textmedia--statement .textmedia__text { max-width: 58rem; }
.textmedia--text .textmedia__text h1:only-child, .page-title h1 { font-size: var(--fs-h1); max-width: 24ch; }
.page-title { padding-bottom: 0 !important; padding-top: clamp(3rem, 2rem + 4vw, 6rem) !important; }
.textmedia + * { margin-top: 0; }
[data-words].words-ready .w { transition: color .35s; }
p[data-words] .w { color: rgba(0, 0, 0, .16); }
.bg-black p[data-words] .w { color: rgba(255, 255, 255, .2); }
.bg-yellow p[data-words] .w { color: rgba(0, 0, 0, .22); }
p[data-words] .w.is-lit { color: inherit; }

/* Hero-Extras */
.hero__btns { margin-top: 1.75rem; display: flex; flex-wrap: wrap; }
.hero__extra { margin-top: 1rem; font-size: 1rem; opacity: .85; }
.hero__title--sm { font-size: var(--fs-h1); }
.hero .hero__title br { display: none; }
@media (min-width: 861px) { .hero .hero__title br { display: inline; } }

/* Startseite – Feature-Blöcke */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: center; }
.feature--rev .feature__media { order: 2; }
.feature__media { position: relative; }
.feature__media .media-frame { aspect-ratio: 1; }
.feature__badge { position: absolute; top: 1.25rem; left: 1.25rem; padding: .35rem .8rem; border-radius: 999px; background: var(--yellow); color: var(--black); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; }
.feature__text h2 { font-size: var(--fs-h2); }
.feature__text p { color: rgba(255, 255, 255, .78); font-size: 1.125rem; }
.eyebrow-h { font-size: .875rem !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 1rem; }
.feature__text .big-number, .big-number { margin-top: 2.5rem; font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--yellow); }
.feature__text .big-number small, .big-number small { display: block; font-size: 1rem; letter-spacing: .02em; color: var(--gray-400); margin-top: .5rem; font-weight: 400; }
.premium { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: center; }
.premium h2 { font-size: var(--fs-h1); }
.premium__img .media-frame { aspect-ratio: 4 / 5; }
.premium + .statement { margin-top: clamp(4rem, 3rem + 5vw, 9rem); }
/* Hauptsitz der Länderseite (USA: Ann Arbor), Startseite nach der 3D-Bühne */
.hq { background: var(--white); }
.hq__band { position: relative; min-height: clamp(440px, 58vw, 780px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--white); background: var(--black); }
.hq__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hq__photo img { position: relative; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 62% 40%; }
.hq__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .3) 42%, rgba(0, 0, 0, 0) 68%), linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 55%); }
.hq__head { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.hq__head .eyebrow { color: var(--yellow); }
.hq__head h2 { font-size: var(--fs-h1); line-height: 1.02; max-width: 22ch; margin: 0; }
.hq__head h2 em { font-style: normal; color: var(--yellow); }
.hq__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; padding-block: clamp(3.5rem, 2rem + 5vw, 7.5rem); }
.hq__aerial { margin: 0; }
.hq__aerial .media-frame { aspect-ratio: 1200 / 587; }
.hq__aerial figcaption { margin-top: .85rem; font-size: .875rem; color: var(--gray-600); }
.hq__text .rte p:first-child { font-size: var(--fs-lead); line-height: 1.4; }
.hq__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem clamp(1rem, .5rem + 1.5vw, 2rem); margin: 2rem 0 1.75rem; }
.hq__facts div { border-left: 2px solid var(--yellow); padding-left: .85rem; }
.hq__facts dt { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.hq__facts dd { margin: .4rem 0 0; font-size: .8125rem; line-height: 1.35; color: var(--gray-600); }
.hq__addr { font-style: normal; color: var(--gray-700); margin-bottom: 1.5rem; line-height: 1.55; }
.hq__addr a { border-bottom: 1px solid var(--yellow); }
@media (max-width: 899px) {
  .hq__body { grid-template-columns: minmax(0, 1fr); }
  .hq__photo img { object-position: 70% 50%; }
}

.immersive { position: relative; min-height: 120vh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; isolation: isolate; background: var(--black); }
.immersive__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.immersive__media img { position: relative; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.immersive__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .75) 100%); }
.immersive__content { padding-block: 8rem 6rem; }
.immersive__card { max-width: 38rem; padding: clamp(1.75rem, 1rem + 2vw, 3rem); border-radius: var(--radius); background: rgba(20, 20, 20, .55); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, .12); }
.immersive__card p { color: rgba(255, 255, 255, .82); }
.page-home .scroll-cue { display: none; }

/* Produktliste & Filter */
.pfilters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.25rem; margin-bottom: 2.5rem; padding: 1.25rem; border-radius: var(--radius); background: var(--gray-50); }
.bg-lightgray .pfilters { background: var(--white); }
.pfilter { display: grid; gap: .35rem; font-size: .8125rem; font-weight: 500; color: var(--gray-600); }
.pfilter select, .pfilter input { font: inherit; font-size: 1rem; color: var(--black); padding: .7rem 2.5rem .7rem 1rem; border-radius: 999px; border: 1.5px solid rgba(0, 0, 0, .12); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center / 16px; -webkit-appearance: none; appearance: none; min-width: 220px; }
.pfilter input { background-image: none; padding-right: 1rem; }
.pfilter__or { align-self: center; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); padding-top: 1rem; }
.pfilter__reset { margin-left: auto; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; padding: .7rem 0; }
.prow + .prow { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.prow__title { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.prow[hidden] { display: none; }
.product-card__text h3 pre { font: inherit; margin: 0; white-space: normal; }
.product-card__text h3 strong { font-weight: 500; }

/* Zitate */
.pull-quote { max-width: 60rem; margin: 0 auto; text-align: center; }
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; }
.pull-quote blockquote p::before { content: "„"; color: var(--yellow); }
.pull-quote blockquote p::after { content: "“"; color: var(--yellow); }
.pull-quote figcaption { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.5rem; text-align: left; color: var(--gray-600); font-size: .9375rem; }
.pull-quote figcaption img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.quotes .slider__track--full { grid-auto-columns: calc(100% - 2 * var(--gutter)); }
.quotes .quote-slide { padding-block: 0; }
.quote-slide__text .rte { color: inherit; font-size: 1rem; }
.slider__track--full .slider__slide { scroll-snap-align: center; }

/* Icon-Liste & Ziele (Nachhaltigkeit) */
.icon-list { display: grid; gap: 2rem; }
.icon-item { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius); background: var(--gray-50); }
.bg-lightgray .icon-item { background: var(--white); }
.icon-item__head { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1rem; }
.icon-item__head img { width: 96px; height: 96px; object-fit: contain; flex: none; }
.icon-item__sub { font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
.icon-item__value { font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: #3f8f3a; }
@media (max-width: 600px) {   /* Handy: Symbol über den Wert, sonst bleibt für ganze Sätze (»Photovoltaikanlage auf dem …«) nur eine schmale Spalte */
  .icon-item__head { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .icon-item__head img { width: 64px; height: 64px; }
  .icon-item__value { font-size: 2.1rem; line-height: 1.05; }
}
.goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.goal { padding: 1.75rem; border-radius: var(--radius); background: var(--gray-50); display: flex; flex-direction: column; gap: .5rem; }
.bg-lightgray .goal { background: var(--white); }
.goal__icon { width: 72px; height: 72px; object-fit: contain; }
.goal__value { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.goal__text { font-size: 1.0625rem; font-weight: 500; }
.goal__foot { margin-top: auto; padding-top: .75rem; font-size: .8125rem; color: var(--gray-600); border-top: 1px solid rgba(0, 0, 0, .1); }

/* Zeitstrahl (Historie) */
.timeline { display: grid; grid-template-columns: 200px 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.timeline__nav { position: sticky; top: calc(var(--header-h) + 2rem); max-height: calc(100vh - var(--header-h) - 4rem); overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; scrollbar-width: thin; padding-right: .5rem; }
.timeline__nav a { display: grid; grid-template-columns: 3.4rem 1fr; gap: .5rem; padding: .35rem .6rem; border-radius: 8px; font-size: .8125rem; color: var(--gray-600); line-height: 1.3; transition: background-color .2s, color .2s; }
.timeline__nav a strong { color: var(--black); }
.timeline__nav a:hover, .timeline__nav a.is-active { background: var(--yellow); color: var(--black); }
.timeline__items { position: relative; padding-left: clamp(1.5rem, 1rem + 2vw, 3rem); }
.timeline__line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .1); }
.timeline__line i { position: absolute; inset: 0; background: var(--yellow); transform-origin: top; }
.milestone { position: relative; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.milestone::before { content: ""; position: absolute; left: calc(-1 * clamp(1.5rem, 1rem + 2vw, 3rem) - 7px); top: .9rem; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--yellow); }
.milestone__year { font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; color: rgba(0, 0, 0, .1); margin-bottom: .5rem; }
.milestone__rte h1 { font-size: var(--fs-h2); }
.milestone__rte img { display: inline-block; width: calc(50% - .5rem); margin: .5rem .5rem .5rem 0; vertical-align: top; aspect-ratio: 1; object-fit: cover; }

/* Events */
.event-month + .event-month { margin-top: 3.5rem; }
.event-month__title { font-size: var(--fs-h3); padding-bottom: 1rem; border-bottom: 2px solid var(--black); margin-bottom: 1rem; }
.event { display: grid; grid-template-columns: 110px 1fr 200px; gap: 2rem; align-items: center; padding: 1.75rem 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.event__date { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--yellow); text-align: center; line-height: 1.1; padding: .75rem; }
.event__date b { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.03em; }
.event__date span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.event__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; color: var(--gray-600); margin-bottom: .35rem; }
.event__body { min-width: 0; }   /* lange Komposita (»Werkzeugverwaltungssystemen«) dürfen die Spalte nicht aufdrücken */
.event__body h3 { font-size: 1.5rem; margin-bottom: .35rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.event__btns { margin-top: .75rem; }
.event__btns .btn { font-size: .875rem; padding: .6em 1.1em; }
.event__img img { max-height: 90px; width: auto; margin-left: auto; object-fit: contain; }

/* Events nach Land (content/events.json): Filter, leerer Zustand */
.event[hidden], .event-month[hidden], .ev-empty[hidden] { display: none; }
.ev-filter { display: flex; flex-direction: column; gap: .9rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.ev-filter__main, .ev-filter__others { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ev-filter__others > span { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-right: .35rem; }
.ev-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5em .95em; border-radius: 999px; background: var(--gray-50); font-size: .875rem; font-weight: 500; line-height: 1.2;
  transition: background-color .2s, color .2s, box-shadow .2s; }
.ev-chip:hover { box-shadow: inset 0 0 0 1.5px var(--black); }
.ev-chip[aria-pressed="true"] { background: var(--black); color: var(--white); box-shadow: none; }
.ev-chip small { min-width: 1.6em; padding: .15em .45em; border-radius: 999px; font-size: .75rem; font-weight: 700; text-align: center; background: rgba(0, 0, 0, .08); }
.ev-chip[aria-pressed="true"] small { background: var(--yellow); color: var(--black); }
.ev-chip--home, .ev-chip--world { font-size: 1.0625rem; padding: .7em 1.25em; }
.ev-chip .flag { height: 15px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.ev-chip > svg:not(.flag) { width: 18px; height: 18px; flex: none; }
.ev-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius); background: var(--gray-50); }
.ev-empty p { margin: 0; font-size: var(--fs-lead); line-height: 1.35; max-width: 34rem; }
.events.is-switching .event-month { animation: ev-switch .5s var(--ease-out); }
@keyframes ev-switch { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .events.is-switching .event-month { animation: none; } }

/* Artikel */
.article-hero .lead .rte p strong { font-weight: 500; }
.article-hero .lead { margin-top: 1rem; }
.article-body .block { margin-bottom: 2.25rem; }
.article-body .block--textmedia .textmedia { display: block; }
.article-body .block--textmedia .textmedia__text { max-width: var(--maxw-text); margin-inline: auto; }
.article-body .block--textmedia .textmedia__media { max-width: 64rem; margin: 0 auto 2rem; }
.article-body h4 { font-size: var(--fs-h3); margin-top: 2rem; }
.article-body .pull-quote { margin-block: 3rem; }
.article-foot { max-width: var(--maxw-text); margin: 4rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .875rem; color: var(--gray-600); }
.share a { padding: .4rem .9rem; border-radius: 999px; background: var(--gray-50); color: var(--black); }
.share a:hover { background: var(--yellow); }
.back-link { font-size: .9375rem; }

/* Inline-Suche */
.inline-search { max-width: 52rem; }
.inline-search input { width: 100%; font: inherit; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); padding: .9rem 1.25rem; border-radius: 999px; border: 1.5px solid rgba(0, 0, 0, .15); }
.inline-search input:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 4px rgba(240, 230, 0, .55); }
.search-results--light a { border-bottom-color: rgba(0, 0, 0, .1); }
.search-results--light a:hover { color: var(--black); background: rgba(240, 230, 0, .15); }
.search-results--light small { color: var(--gray-600); }

/* Standorte */
.location__contact { margin: .5rem 0; }
.location__contact a { text-decoration: none; }
.location__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; }
.locations__count { font-size: .875rem; color: var(--gray-600); margin: -1rem 0 1.25rem; }
.locations__filter select, .locations__filter input { -webkit-appearance: none; appearance: none; }

/* TYPO3-Formulare */
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 1.5rem; }
.form [class*="col-"] { min-width: 0; }
.form .form-control { width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid rgba(0, 0, 0, .15); background: var(--white); color: var(--black); }
.form .form-control:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 4px rgba(240, 230, 0, .55); }
.form input[aria-hidden="true"], .form input[tabindex="-1"]:not([type="checkbox"]) { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form .form-check-input { margin-right: .5rem; }
.form .inputs-list { list-style: none; padding: 0; }
.form .actions, .form nav.form-navigation { margin-top: 1.5rem; }
.form button[type="submit"], .form .btn-primary, .form .block-button, .economy #calc-submit { display: inline-flex; align-items: center; gap: .5rem; padding: .9em 1.6em; border-radius: 999px; background: var(--black); color: var(--white); font-weight: 500; border: 0; cursor: pointer; transition: transform .3s var(--ease-out); }
.form button[type="submit"]:hover, .form .block-button:hover { transform: translateY(-2px); }
.form .g-recaptcha { margin: 1rem 0; }
.form ul.inputs-list li { margin: 0 0 .5rem; }
.form label.form-label, .form .form-group > label { font-weight: 500; }

/* Wirtschaftlichkeitsrechner */
.economy { max-width: none; }
.economy .row-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; }
.economy .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; align-items: center; margin-bottom: .75rem; }
.economy .row .row { margin: 0; }
.economy .row-input { display: flex; align-items: center; gap: .5rem; }
.economy select, .economy input[type="text"] { width: 100%; font: inherit; padding: .7rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid rgba(0, 0, 0, .15); background: var(--white); }
.economy .info { position: relative; display: inline-grid; place-items: center; }
.economy .info img { width: 20px; height: 20px; cursor: help; }
.economy .info span { position: absolute; right: 0; bottom: calc(100% + .5rem); width: 260px; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--black); color: var(--white); font-size: .8125rem; opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 5; }
.economy .info:hover span, .economy .info:focus-within span { opacity: 1; visibility: visible; }
.economy [class*="calc_result"] { font-weight: 700; font-variant-numeric: tabular-nums; }
.economy .result, .economy .results, .economy [class*="result-wrapper"] { margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius); background: var(--white); }
.economy .intro { max-width: 52rem; margin-bottom: 2rem; font-size: var(--fs-lead); }

/* Footer-Erweiterungen */
.footer-cta .btn--ghost { color: var(--white); }
.footer-cta > div { display: flex; flex-wrap: wrap; }
.footer-brand address a { color: rgba(255, 255, 255, .78); }
.footer-bottom button { color: inherit; font-size: inherit; }
.footer-bottom ul { margin-right: 3.75rem; }   /* Platz für den »Nach oben«-Knopf unten rechts */
.lang-foot { display: inline-flex; align-items: center; gap: .45rem; }
.lang-foot .flag { width: auto; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.breadcrumb { padding-block: 1.25rem; }

/* Hinweis-Liste */
.notice-list { padding-left: 1.2em; }

/* Bilder, die nicht geladen werden können, ausblenden */
img.is-broken { display: none; }

@media (max-width: 1180px) {
  .footer-wide { grid-column: span 2; }
}
@media (max-width: 860px) {
  .feature, .premium, .timeline, .economy .row-wrapper { grid-template-columns: 1fr; }
  .feature--rev .feature__media { order: 0; }
  .timeline__nav { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: .5rem; }
  .timeline__nav a { flex: none; grid-template-columns: auto; }
  .event { grid-template-columns: 110px 1fr; gap: 1.5rem; }
  .event__img { display: none; }
  .immersive { min-height: 90vh; }
  .pfilter select, .pfilter input { min-width: 0; width: 100%; }
  .pfilter { flex: 1 1 100%; }
  .pfilter__reset { margin-left: 0; }
  .footer-wide { grid-column: auto; }
}
/* Handy: schmales Datumsfeld nur mit Monat und Tag – lange Wochentage (DONNERSTAG, ПОНЕДЕЛЬНИК) passen nicht hinein, das Datum steht daneben */
@media (max-width: 600px) {
  .event { grid-template-columns: 76px 1fr; gap: 1.1rem; align-items: start; }
  .event__date { padding: .5rem; }
  .event__date b { font-size: 2.1rem; }
  .event__date span:last-child { display: none; }
}
.ms-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .75rem; margin: 1.25rem 0 1.5rem; }
.ms-fig img { width: 100% !important; margin: 0 !important; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.ms-fig figcaption { font-size: .8125rem; color: var(--gray-600); margin-top: .35rem; line-height: 1.35; }
.economy .row-input > div:first-child { flex: 1; }
.economy .row > [class*="col-"]:first-child label { font-weight: 500; font-size: .9375rem; }
@media (max-width: 860px) {
  .homefilm__sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
  .homefilm__shade--l, .homefilm__shade--r { display: none; }
  .homefilm__panel h1, .homefilm__panel h2 { font-size: clamp(2.5rem, 1.6rem + 5vw, 3.5rem); }
  .homefilm__pill { padding: .4rem .65rem .45rem; }
  .homefilm__pill b { font-size: .8125rem; }
  .homefilm__pill small { font-size: .625rem; }
}

/* =========================================================================
   Event-Seiten (Automation Week): Hero, Fakten, Video, Produkte, Terminkalender, Anfahrt
   ========================================================================= */
.ev-kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: .75rem; }
.bg-white .ev-kicker, .bg-lightgray .ev-kicker { color: var(--gray-700); }

.ev-hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: center; overflow: hidden; padding: calc(var(--header-h) + 3rem) 0 5rem; }
.ev-hero__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 72% 55%, rgba(240, 230, 0, .22), rgba(240, 230, 0, 0) 70%), radial-gradient(ellipse 80% 70% at 30% 0%, #222 0%, #000 70%); }
.ev-hero__symbol { position: absolute; right: -8vw; top: 50%; width: min(62vw, 820px); translate: 0 -50%; color: var(--yellow); opacity: .1; animation: ev-spin 60s linear infinite; }
.ev-hero__symbol svg { width: 100%; height: auto; fill: currentColor; }
@keyframes ev-spin { to { rotate: 360deg; } }
.ev-hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; }
.ev-hero__kicker { font-size: .875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 1rem; }
.ev-hero__title { font-size: var(--fs-display); line-height: .95; letter-spacing: -0.035em; margin-bottom: 1.25rem; }
.ev-hero__sub { font-size: var(--fs-lead); color: rgba(255, 255, 255, .8); max-width: 34rem; line-height: 1.4; }
.ev-hero__meta { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ev-hero__meta li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: .9375rem; font-weight: 500; }
.ev-hero__meta svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.ev-hero .hero__btns { gap: .75rem; }
.ev-hero .btn--ghost { color: var(--white); }
.ev-hero__stage { position: relative; aspect-ratio: 1.05; }
.ev-hero__img { position: absolute; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); animation: ev-float 7s var(--ease-in-out) infinite alternate; }
.ev-hero__img--0 { width: 70%; left: 0; bottom: 4%; z-index: 3; }
.ev-hero__img--1 { width: 56%; right: 0; top: 2%; z-index: 1; animation-delay: -2.5s; }
.ev-hero__img--2 { width: 42%; right: 4%; bottom: 0; z-index: 2; animation-delay: -5s; }
@keyframes ev-float { from { translate: 0 0; } to { translate: 0 -14px; } }
.reduced-motion .ev-hero__img, .reduced-motion .ev-hero__symbol { animation: none; }

.ev-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.ev-fact b { display: block; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.ev-fact span { display: block; margin-top: .35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; }
.ev-fact p { margin-top: .6rem; font-size: .9375rem; line-height: 1.45; }
/* Drei Fakten mit Wörtern statt Zahlen (Automation Days): drei Spalten, kleinere Schrift */
.ev-facts:has(> .ev-fact:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(2rem, 1rem + 3vw, 4rem); }
.ev-facts:has(> .ev-fact:nth-child(3):last-child) .ev-fact b { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }

.ev-video { position: relative; max-width: 1180px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #111; box-shadow: 0 50px 120px -40px rgba(240, 230, 0, .35); }
.ev-video video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.ev-video__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(64px, 5rem + 2vw, 112px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--black); box-shadow: 0 0 0 0 rgba(240, 230, 0, .6); animation: ev-pulse 2.2s infinite; transition: scale .3s var(--ease-out); }
.ev-video__play svg { width: 42%; translate: 6% 0; }
.ev-video__play:hover { scale: 1.08; }
.ev-video.is-playing .ev-video__play { opacity: 0; pointer-events: none; }
@keyframes ev-pulse { 70% { box-shadow: 0 0 0 26px rgba(240, 230, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 230, 0, 0); } }
.ev-teaser__frame { display: block; aspect-ratio: 16 / 9 !important; }
.ev-teaser .ev-video__play { width: 88px; }

.ev-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.ev-product { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--white); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), var(--reveal-t, opacity 0s); }
.ev-product:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
.ev-product__media { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(240, 230, 0, .35), rgba(240, 230, 0, 0) 70%), linear-gradient(180deg, #fff, #f1f1f1); }
.ev-product__media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .18)); transition: transform .6s var(--ease-out); }
.ev-product:hover .ev-product__media img { transform: scale(1.05); }
.ev-product__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.ev-product__body h3 { margin-bottom: .25rem; }
.ev-product__claim { color: var(--gray-600); font-size: .9375rem; }
.ev-benefits { list-style: none; padding: 0; margin: 1rem 0 0; }
.ev-benefits li { position: relative; padding: .55rem 0 .55rem 2rem; border-top: 1px solid rgba(0, 0, 0, .1); font-size: .9375rem; line-height: 1.45; }
.ev-benefits li::before { content: ""; position: absolute; left: 0; top: .7rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; }
.bg-black .ev-benefits li { border-top-color: rgba(255, 255, 255, .15); }
.ev-product__links { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

.agenda__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.agenda__head .section-head { margin-bottom: 0; }
.agenda__all { gap: .5rem; }
.agenda__all svg, .agenda__ics svg { width: 18px; height: 18px; flex: none; }
.agenda__all::after { display: none; }
.agenda__bar { position: sticky; top: var(--header-h); z-index: 5; background: var(--white); padding: .75rem 0 1rem; border-bottom: 2px solid var(--black); }
.agenda__tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.agenda__tab { display: grid; justify-items: start; gap: .1rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--gray-50); text-align: left; transition: background .25s, color .25s, opacity .25s; }
.agenda__tab:hover { background: var(--gray-100); }
.agenda__tab[aria-selected="true"] { background: var(--black); color: var(--white); }
.agenda__tab[aria-selected="true"] b { color: var(--yellow); }
.agenda__tab.is-dim { opacity: .35; }
.agenda__wd { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.agenda__tab b { font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.agenda__lab { font-size: .8125rem; line-height: 1.25; color: inherit; opacity: .75; }
.agenda__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.agenda__filter { padding: .45rem .95rem; border-radius: 999px; font-size: .875rem; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--gray-300); transition: background .2s, box-shadow .2s; }
.agenda__filter:hover { box-shadow: inset 0 0 0 1.5px var(--black); }
.agenda__filter.is-active { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--yellow); }
.agenda__dayhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; padding: 2rem 0 .5rem; }
.agenda__dayhead h3 { margin: 0; }
.agenda__dayhead p { margin: 0; font-weight: 500; color: var(--gray-600); }
.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__slot { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid rgba(0, 0, 0, .12); animation: ev-in .45s var(--ease-out) both; }
.agenda__slot[hidden] { display: none; }
@keyframes ev-in { from { opacity: 0; translate: 0 10px; } }
.agenda__time b { display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.agenda__time span { font-size: .875rem; color: var(--gray-600); }
.agenda__time span::before { content: "bis "; }
.agenda__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .3rem; }
.agenda__kind { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); }
.agenda__chip { padding: .15rem .6rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; background: var(--black); color: var(--yellow); }
.agenda__seats { font-size: .8125rem; color: var(--gray-600); }
.agenda__body h4 { margin: 0 0 .15rem; }
.agenda__body p { margin: 0; color: var(--gray-700); font-size: .9375rem; line-height: 1.45; }
.agenda__slot--live-demo .agenda__time b, .agenda__slot--workshop .agenda__time b, .agenda__slot--meeting .agenda__time b { box-shadow: inset 0 -.35em 0 var(--yellow); display: inline; }
.agenda__slot--networking { opacity: .8; }
.agenda__slot--networking h4 { font-weight: 400; }
.agenda__acts { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.agenda__book { font-size: .875rem; padding: .6em 1.1em; white-space: nowrap; }
.agenda__ics { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--gray-300); transition: box-shadow .2s; }
.agenda__ics:hover { box-shadow: inset 0 0 0 1.5px var(--black); }
.agenda__empty { padding: 2rem 0; color: var(--gray-600); }

.ev-venue { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.ev-venue address { font-style: normal; font-size: var(--fs-lead); line-height: 1.45; margin-bottom: 1.75rem; color: rgba(255, 255, 255, .85); }
.ev-venue address strong { color: var(--white); font-weight: 500; }
.ev-venue__contact { margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius-sm); background: var(--gray-900); }
.ev-venue__contact h3 { font-size: var(--fs-h4); }
.ev-venue__contact a { color: var(--yellow); }

/* Eventseiten aus content/events.json (build.py: r_event_detail) */
.ev-hero--compact { min-height: min(78svh, 760px); }
.ev-hero--compact .ev-hero__title { font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); }
.ev-hero--compact .ev-hero__stage { aspect-ratio: 1.4; display: grid; place-items: center; }
.ev-hero__logo { width: min(100%, 380px); aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 2.25rem; border-radius: var(--radius); background: var(--white);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); transform: rotate(-3deg); animation: ev-float 7s var(--ease-in-out) infinite alternate; }
.ev-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.reduced-motion .ev-hero__logo { animation: none; }
.ev-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.ev-detail__main h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.ev-detail__main .rte p { font-size: var(--fs-lead); line-height: 1.45; }
.ev-detail__main h3 { font-size: var(--fs-h4); margin: 2.5rem 0 .5rem; }
.ev-plan { list-style: none; margin: .75rem 0 0; padding: 0; }
.ev-plan li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid rgba(0, 0, 0, .1); font-size: .9375rem; line-height: 1.45; }
.ev-plan b { font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: inset 0 -.35em 0 var(--yellow); justify-self: start; height: max-content; }
.ev-detail__facts { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius); background: var(--gray-50); }
.ev-detail__facts h3 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); margin-bottom: .75rem; }
.ev-detail__facts dl { margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.ev-detail__facts dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding-top: .8rem; border-top: 1px solid rgba(0, 0, 0, .1); font-size: .9375rem; }
.ev-detail__facts dt { color: var(--gray-600); font-size: .8125rem; padding-top: .1rem; }
.ev-detail__facts dd { margin: 0; }
.ev-detail__contact { padding-top: 1.25rem; border-top: 2px solid var(--yellow); font-size: .9375rem; }
.ev-detail__contact a { border-bottom: 1px solid var(--yellow); }
.ev-detail__links { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin: 1.25rem 0 0; }
.ev-next__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.ev-next__head h2 { font-size: var(--fs-h3); margin: 0; }
.ev-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ev-next { display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem; border-radius: var(--radius-sm); background: var(--white); transition: box-shadow .25s, transform .35s var(--ease-out), var(--reveal-t, opacity 0s); }
.ev-next:hover { box-shadow: inset 0 0 0 1.5px var(--black); transform: translateY(-3px); }
.ev-next span { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--gray-600); }
.ev-next b { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.ev-next small { font-size: .875rem; color: var(--gray-600); }
@media (max-width: 899px) {
  .ev-detail { grid-template-columns: minmax(0, 1fr); }
  .ev-detail__facts { position: static; }
  .ev-next__grid { grid-template-columns: minmax(0, 1fr); }
  .ev-hero--compact .ev-hero__stage { aspect-ratio: 2; }
  .ev-hero__logo { width: min(80%, 320px); padding: 1.5rem; }
}
@media (max-width: 520px) {
  .ev-detail__facts dl div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

@media (max-width: 1080px) {
  .ev-products { grid-template-columns: 1fr; max-width: 640px; }
  .ev-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ev-hero { min-height: 0; padding-bottom: 4rem; }
  .ev-hero__inner { grid-template-columns: 1fr; }
  .ev-hero__stage { max-width: 520px; width: 100%; margin-inline: auto; order: -1; aspect-ratio: 1.3; }
  .ev-venue { grid-template-columns: 1fr; }
  .agenda__tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .agenda__tab { flex: 0 0 auto; min-width: 7.5rem; }
  .agenda__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .agenda__filter { flex: none; }
  .agenda__slot { grid-template-columns: 64px 1fr; gap: .25rem 1rem; }
  .agenda__time b { font-size: 1.125rem; }
  .agenda__acts { grid-column: 2; justify-content: flex-start; margin-top: .6rem; }
}
@media (max-width: 520px) {
  .ev-facts { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 760px) {
  .ev-facts:has(> .ev-fact:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* ---------- Standortglobus (assets/js/globe.js) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.globe { position: relative; height: calc(100svh - var(--header-h)); min-height: 640px; max-height: 1100px; overflow: hidden; color: var(--white); isolation: isolate;
  background: radial-gradient(ellipse 70% 80% at 68% 52%, #262626 0%, #0d0d0d 55%, #000 100%); }
.globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.globe.is-ready .globe__canvas { opacity: 1; }
.globe.is-dragging .globe__canvas { cursor: grabbing; }
.globe__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 30%, transparent 52%), linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 22%); transition: opacity .8s; }
.globe.has-selection .globe__shade { opacity: .35; }
.globe__loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--gray-400); transition: opacity .6s; pointer-events: none; }
.globe__loading i { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--yellow); animation: globe-spin 1s linear infinite; }
.globe.is-ready .globe__loading, .globe.is-static .globe__loading { opacity: 0; }
@keyframes globe-spin { to { transform: rotate(360deg); } }

.globe__ui { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(2rem, 1rem + 4vw, 4.5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); pointer-events: none; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.globe__ui > * { pointer-events: auto; }
.globe__intro { max-width: 32rem; }
.globe__intro .eyebrow { color: var(--yellow); }
.globe__intro h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem); margin-bottom: .45em; }
.globe__intro p { color: var(--gray-300); max-width: 28rem; }
.globe__stats { display: flex; gap: clamp(1.25rem, .5rem + 2.5vw, 2.75rem); margin: 2rem 0 0; }
.globe__stats div { border-left: 2px solid var(--yellow); padding-left: .85rem; }
.globe__stats dt { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.globe__stats dd { margin: .35rem 0 0; font-size: .8125rem; color: var(--gray-400); letter-spacing: .04em; }
.globe.has-selection .globe__intro { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.globe__intro { transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }

.globe__controls { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; max-width: 36rem; }
.globe__legend, .globe__regions { display: flex; flex-wrap: wrap; gap: .4rem; }
.globe__legend button, .globe__regions button { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--gray-300); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .25s, color .25s, box-shadow .25s; }
.globe__legend button:hover, .globe__regions button:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.globe__legend button:not(.is-on) { opacity: .45; }
.globe__legend button:not(.is-on) .dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.globe__legend button.is-on { color: var(--white); }
.globe__regions button.is-on { background: var(--yellow); color: var(--black); box-shadow: none; }
.dot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; flex: none; }
.dot--hq { background: var(--yellow); box-shadow: 0 0 0 3px rgba(240, 230, 0, .25); }
.dot--nl { background: var(--yellow); }
.dot--vt { background: var(--white); }

.globe__search { position: relative; display: block; width: min(100%, 22rem); }
.globe__search input { width: 100%; font: inherit; font-size: .9375rem; color: var(--white); padding: .7rem 1.1rem .7rem 2.6rem; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 1rem 50% / 1.05rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-appearance: none; appearance: none; }
.globe__search input::placeholder { color: var(--gray-500); }
.globe__search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--yellow); }
.globe__search ul { position: absolute; left: 0; right: 0; bottom: calc(100% + .5rem); margin: 0; padding: .4rem; list-style: none; background: rgba(20, 20, 20, .96); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .1); max-height: 22rem; overflow: auto; }
.globe__search li.is-empty { padding: .6rem .8rem; font-size: .875rem; color: var(--gray-500); }

.globe [data-goto], .globe__panel [data-goto] { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .75rem; border-radius: 8px; text-align: left; font-size: .875rem; line-height: 1.3; transition: background-color .2s; }
.globe [data-goto]:hover, .globe [data-goto].is-active, .globe__panel [data-goto]:hover { background: rgba(255, 255, 255, .08); }
.globe [data-goto] span, .globe__panel [data-goto] span { display: flex; flex-direction: column; }
.globe [data-goto] small, .globe__panel [data-goto] small { color: var(--gray-500); font-size: .75rem; }

.globe__panel { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); right: var(--gutter); max-height: calc(100% - 2 * clamp(1rem, .5rem + 1.5vw, 2rem)); width: min(26rem, calc(100% - 2 * var(--gutter))); overflow: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); color: var(--white); border-radius: var(--radius); background: rgba(14, 14, 14, .9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .1); scrollbar-width: thin; scrollbar-color: #444 transparent; }
.globe__panel.is-in { animation: globe-panel .7s var(--ease-out); }
@keyframes globe-panel { from { opacity: 0; transform: translate(28px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
.globe__panel h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: .35em 0 .6em; padding-right: 2rem; }
.globe__panel h3 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); font-weight: 700; margin: 0 0 .5rem; }
.globe__close { position: absolute; top: 1.1rem; right: 1.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background-color .2s, transform .4s var(--ease-out); }
.globe__close::before, .globe__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; background: var(--white); transform: translate(-50%, -50%) rotate(45deg); }
.globe__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.globe__close:hover { background: var(--yellow); transform: rotate(90deg); }
.globe__close:hover::before, .globe__close:hover::after { background: var(--black); }
.globe__badge { display: inline-block; padding: .3em .8em; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.globe__badge--hq, .globe__badge--nl { background: var(--yellow); color: var(--black); }
.globe__badge--vt { background: var(--white); color: var(--black); }
.globe__region { margin-left: .6rem; font-size: .8125rem; color: var(--gray-400); }
.globe__addr { color: var(--gray-300); font-size: .9375rem; }
.globe__facts { margin: 1.25rem 0; display: grid; gap: .9rem; font-size: .9375rem; }
.globe__facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.globe__facts dt { color: var(--gray-500); font-size: .8125rem; padding-top: .1rem; }
.globe__facts dd { margin: 0; word-break: break-word; }
.globe__facts a { border-bottom: 1px solid rgba(240, 230, 0, .6); }
.globe__facts a:hover { color: var(--yellow); }
.globe__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.globe__chips span { padding: .2em .7em; border-radius: 999px; font-size: .8125rem; background: rgba(255, 255, 255, .08); }
.globe__actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.25rem; }
.globe__actions .btn { font-size: .9375rem; }
.globe__actions .btn--ghost { color: var(--white); }
.globe__near { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.1rem; }
.globe__near ul { list-style: none; margin: 0 -.75rem; padding: 0; }

.globe__tip { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; margin: -14px 0 0 18px; padding: .55rem .85rem; border-radius: 10px; background: rgba(10, 10, 10, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; white-space: nowrap; font-size: .875rem; line-height: 1.35; border-left: 3px solid var(--yellow); }
.globe__tip[data-k="vt"] { border-left-color: var(--white); }
.globe__tip span { color: var(--gray-400); font-size: .75rem; }
.globe__tip[hidden] { display: none; }
.globe__hqlabel { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; margin: -78px 0 0 26px; display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.25; padding-left: .7rem; border-left: 1px solid var(--yellow); opacity: 0; transition: opacity .5s; }
.globe__hqlabel b { font-weight: 500; }
.globe__hqlabel span { color: var(--yellow); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.globe__hqlabel.is-on { opacity: 1; }

.globe__zoom { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(1.5rem, 1rem + 2vw, 3rem); display: flex; flex-direction: column; gap: .4rem; transition: opacity .4s; }
.globe__zoom button { width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.25rem; line-height: 1; color: var(--white); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s, color .2s; }
.globe__zoom button:hover { background: var(--yellow); color: var(--black); }
.globe.has-selection .globe__zoom { opacity: 0; pointer-events: none; }
.globe__hint { position: absolute; z-index: 3; left: 50%; bottom: clamp(1.5rem, 1rem + 2vw, 3rem); transform: translateX(-50%); margin: 0; font-size: .75rem; letter-spacing: .06em; color: var(--gray-500); pointer-events: none; white-space: nowrap; }
.globe__down { position: absolute; z-index: 3; left: 50%; bottom: .6rem; transform: translateX(-50%); display: none; }
.globe__hint-touch { display: none; }
@media (hover: none) {
  .globe__hint-mouse { display: none; }
  .globe__hint-touch { display: inline; }
}
.globe.is-static .globe__hint, .globe.is-static .globe__zoom, .globe.is-static .globe__legend, .globe.is-static .globe__regions { display: none; }
.globe.is-static { height: auto; min-height: 0; }
.globe.is-static .globe__shade { display: none; }

.location__region b { color: var(--black); }
.location--nl, .location--hq { box-shadow: inset 3px 0 0 var(--yellow); }
.location__globe { font-size: .875rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; background: var(--black); color: var(--white); transition: background-color .2s, color .2s; }
.location__globe::before { content: ""; width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid currentColor; background: radial-gradient(circle, var(--yellow) 0 30%, transparent 32%); }
.location__globe:hover { background: var(--yellow); color: var(--black); }

@media (max-width: 899px) {
  .globe { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .globe__canvas { position: relative; order: 2; height: 64svh; min-height: 400px; inset: auto; }
  .globe__shade { display: none; }
  .globe__ui { display: contents; }
  .globe__intro { order: 1; padding: 2.5rem var(--gutter) 0; }
  .globe__intro h1 { font-size: 2.25rem; }
  .globe__intro p { font-size: .9375rem; }
  .globe__controls { order: 3; padding: 0 var(--gutter) 2.5rem; max-width: none; }
  .globe__loading { display: none; }
  .globe__hint { position: static; order: 2; transform: none; text-align: center; margin: -2.25rem 0 1.5rem; position: relative; z-index: 3; }
  .globe.has-selection .globe__intro { opacity: 1; transform: none; pointer-events: auto; }
  .globe__stats { margin-top: 1.25rem; }
  .globe__panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; transform: none; max-height: 54svh; border-radius: var(--radius) var(--radius) 0 0; z-index: 60; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .globe__panel.is-in { animation-name: globe-sheet; }
  @keyframes globe-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .globe__search ul { bottom: auto; top: calc(100% + .5rem); z-index: 6; }
  .globe__zoom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .globe__panel.is-in { animation: none; }
  .globe__loading i { animation: none; }
}
/* Abstand zwischen Globus und dem folgenden Seiteninhalt */
.globe + .section, .globe + .section.pt-0 { padding-top: clamp(5rem, 3rem + 7vw, 10rem) !important; }

/* =========================================================================
   Scroll-Choreografie (assets/js/scrollfx.js)
   ========================================================================= */

/* Farbwechsel als Karte: schwarze und gelbe Abschnitte (und der Footer) falten sich beim Hereinscrollen von einer
   runden Karte zur vollen Breite auf und beim Verlassen wieder zusammen. scrollfx.js legt .uf-bg mit der eigenen
   Farbe an; der Abschnitt selbst zeigt oben die Farbe davor und unten die danach. */
.unfold { position: relative; isolation: isolate; }
.uf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Laufband mit allen Solutions (Startseite): zwei Reihen gegenläufig, Tempo folgt dem Scrollen */
.band { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 4vw, 6.5rem); font-size: clamp(3rem, 1.2rem + 7.2vw, 9.5rem); }
.band__row { display: flex; }
.band__row + .band__row { margin-top: .02em; }
.band__track { display: flex; flex: none; will-change: transform; }
.band__set { display: flex; align-items: center; flex: none; }
.band__item { font-weight: 500; line-height: 1.12; letter-spacing: -0.045em; white-space: nowrap; padding-inline: .06em; color: var(--black); transition: color .3s, -webkit-text-stroke-color .3s; }
.band__row--outline .band__item { color: transparent; -webkit-text-stroke: max(1px, .012em) var(--black); }
.band__item:hover, .band__item:focus-visible { color: var(--yellow); -webkit-text-stroke: max(1px, .012em) var(--black); outline: none; }
.band__sym { display: block; flex: none; width: .5em; height: .5em; margin-inline: .32em; color: var(--yellow); }
.band__sym svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.band__row--outline .band__sym svg { fill: none; stroke: var(--black); stroke-width: 9; }
.reduced-motion .band__row--outline .band__track { transform: translateX(-12%); }

/* Kennzahlen als Zählwerk: jede Ziffer rollt wie in einem mechanischen Zähler auf ihren Wert */
.odo-d { position: relative; display: inline-block; clip-path: polygon(-30% 0, 130% 0, 130% 100%, -30% 100%); }
.odo-d > i { font-style: normal; visibility: hidden; }
.odo-d > b { position: absolute; left: 0; right: 0; top: 0; display: block; font-weight: inherit; text-align: center; will-change: transform;
  transition: transform var(--odo-t, 2.2s) cubic-bezier(.55, .06, .18, 1) var(--odo-d, 0s); }
.odo-d > b > span { display: block; height: var(--odo-h); line-height: var(--odo-h); }
.kpi__value.odo { background: none; color: var(--black); }
.bg-black .kpi__value.odo { color: var(--yellow); }

/* Kamerafahrt der Startseite endet als Karte: beim Verlassen schrumpft das Bild mit runden Ecken und dunkelt ab */
.homefilm__sticky { transform-origin: 50% 100%; }
.homefilm__dim { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }

/* Fräsen/Drehen/Schleifen: Karten drehen sich im Vorbeiziehen, Fortschritt unter der Reihe */
.hscroll__track { perspective: 1600px; }
.hscroll__bar { width: min(280px, 50vw); height: 2px; margin: clamp(1.25rem, .8rem + 1.5vw, 2.25rem) auto 0; border-radius: 2px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.hscroll__bar i { display: block; height: 100%; background: var(--black); transform-origin: 0 50%; transform: scaleX(0); }

/* Riesiger Schriftzug am Seitenende: steigt aus der Unterkante, wenn das Ende der Seite erreicht ist */
.footer-mark { position: relative; margin-top: clamp(.5rem, .2rem + 1.5vw, 2rem); aspect-ratio: 382 / 52; overflow: hidden; pointer-events: none; }
.footer-mark__svg { display: block; width: 100%; height: auto; color: #1e1e1e; will-change: transform; }
.footer-mark + * { margin-top: 0; }

/* Messskala (Desktop): Lineal am rechten Rand, läuft beim Scrollen mit; die Anzeige zeigt, wie weit die Seite gelesen ist */
.mscale { position: fixed; right: 12px; top: 50%; z-index: 140; width: 34px; height: min(46vh, 420px); pointer-events: none;
  opacity: 0; translate: 10px -50%; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out); }
.mscale.is-on { opacity: 1; translate: 0 -50%; }
.mscale__body { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; background: rgba(14, 14, 16, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px -12px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
.mscale__ticks { position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; will-change: transform;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .9) 0 1px, transparent 1px 30px) right 7px top 0 / 15px 100% no-repeat,
              repeating-linear-gradient(180deg, rgba(255, 255, 255, .42) 0 1px, transparent 1px 6px) right 7px top 0 / 7px 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%); mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%); }
.mscale__fill { position: absolute; left: 8px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.mscale__fill i { display: block; height: 100%; background: var(--yellow); transform-origin: 50% 0; transform: scaleY(0); }
.mscale__ptr { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 10px rgba(240, 230, 0, .8); }
.mscale__val { position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%; padding: .28rem .55rem .3rem; border-radius: 999px; white-space: nowrap;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--yellow); background: rgba(14, 14, 16, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mscale__val small { font-size: .625rem; font-weight: 500; color: rgba(255, 255, 255, .6); margin-left: .15em; }
html.has-mscale .scroll-progress { display: none; }

/* Bild-Kacheln (Bento, Werte, News-Karten): das Bild wandert beim Vorbeiscrollen langsamer als die Kachel.
   Reine CSS-Scroll-Animation über die Einzel-Eigenschaften translate/scale – der Hover-Zoom (transform) bleibt frei. */
@supports (animation-timeline: view()) {
  .js :is(.bento__tile, .value-tile) > :is(img, video) { animation: tile-drift linear both; animation-timeline: view(); animation-range: cover; }
  .js .card__media img { animation: card-drift linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes tile-drift { from { translate: 0 -7%; scale: 1.16; } to { translate: 0 7%; scale: 1.16; } }
  @keyframes card-drift { from { translate: 0 -5%; scale: 1.12; } to { translate: 0 5%; scale: 1.12; } }
}

@media (prefers-reduced-motion: reduce) {
  .mscale, .homefilm__dim { display: none; }
  :is(.bento__tile, .value-tile) > :is(img, video), .card__media img { animation: none !important; }
}
@media print {
  .mscale, .footer-mark, .homefilm__dim { display: none !important; }
}

/* =========================================================================
   Bewegung im Stil der Messtechnik (assets/js/motion.js)
   ========================================================================= */

/* Intro der Startseite (einmal pro Sitzung, html.intro-on setzt das Skript im <head>): auf Schwarz zieht sich die gelbe
   Messkante auf, das Logo steigt aus ihr, darunter läuft ein Lineal voll – dann öffnet sich das Bild wie ein Messschieber.
   Läuft ohne JavaScript zu Ende; motion.js überspringt es bei Scrollen, Klick oder Taste. */
.intro { display: none; }
html.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 10001; animation: intro-gone 0s 2.25s forwards; }
html.intro-skip .intro { animation: intro-skip .4s var(--ease-out) forwards; }
.intro__jaw { position: absolute; left: 0; right: 0; height: 50.2%; background: #050506; display: flex; justify-content: center; will-change: transform; }
.intro__jaw--top { top: 0; align-items: flex-end; animation: jaw-top .9s cubic-bezier(.76, 0, .24, 1) 1.28s forwards; }
.intro__jaw--bot { bottom: 0; align-items: flex-start; animation: jaw-bot .9s cubic-bezier(.76, 0, .24, 1) 1.28s forwards; }
.intro__jaw::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--yellow); box-shadow: 0 0 22px 2px rgba(240, 230, 0, .55); transform: scaleX(0); animation: intro-edge .8s var(--ease-out) .12s forwards; }
.intro__jaw--top::after { bottom: 0; }
.intro__jaw--bot::after { top: 0; }
.intro__logo { width: min(360px, 62vw); margin-bottom: clamp(26px, 4.5vh, 52px); overflow: hidden; }
.intro__logo svg { display: block; width: 100%; height: auto; color: #fff; transform: translateY(105%); animation: intro-rise 1s var(--ease-out) .32s forwards; }
.intro__ruler { position: relative; width: min(360px, 62vw); height: 16px; margin-top: clamp(22px, 3.6vh, 40px); clip-path: inset(0 100% 0 0); animation: intro-wipe .8s var(--ease-out) .42s forwards;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 36px) 0 0 / 100% 16px no-repeat,
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 7.2px) 0 0 / 100% 8px no-repeat; }
.intro__ruler::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); animation: intro-fill .75s cubic-bezier(.55, .06, .18, 1) .55s forwards; }
@keyframes intro-edge { to { transform: scaleX(1); } }
@keyframes intro-rise { to { transform: none; } }
@keyframes intro-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-fill { to { transform: scaleX(1); } }
@keyframes jaw-top { to { transform: translateY(-101%); } }
@keyframes jaw-bot { to { transform: translateY(101%); } }
@keyframes intro-gone { to { visibility: hidden; } }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; } }
.reduced-motion .intro { display: none !important; }

/* Hero-Titel Buchstabe für Buchstabe (danach stellt motion.js den Originaltext wieder her – Unterschneidung bleibt) */
.c-split .cw { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.c-split .cc { display: inline-block; transform: translateY(112%) rotate(7deg); transform-origin: 0 100%; animation: cc-in 1.05s var(--ease-out) forwards; animation-delay: calc(var(--cs-d, .2s) + var(--i, 0) * 24ms); }
@keyframes cc-in { to { transform: none; } }

/* Gelber Marker unter hervorgehobenen Wörtern großer Texte */
.mk { background: linear-gradient(rgba(240, 230, 0, .85), rgba(240, 230, 0, .85)) no-repeat 0 90% / 0% .34em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.2s var(--ease-out) .1s; }
.mk.mk-in { background-size: 100% .34em; }
.bg-yellow .mk { background-image: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)); }
.bg-black .mk, .feature-dark .mk { background-image: linear-gradient(rgba(240, 230, 0, .42), rgba(240, 230, 0, .42)); }

/* Technische Daten als Messprotokoll: Zeilen laufen nacheinander ein, jede mit kurzem gelben Prüfstrich */
table.proto :is(td, th) { opacity: 0; translate: -12px 0; transition: opacity .6s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(var(--r, 0) * 32ms); }
table.proto.proto-in :is(td, th) { opacity: 1; translate: none; }
table.proto.proto-in td:first-child { animation: proto-tick 1.3s var(--ease-out) calc(var(--r, 0) * 32ms + .15s) backwards; }
@keyframes proto-tick { from { box-shadow: inset 3px 0 0 var(--yellow); background-color: rgba(240, 230, 0, .2); } to { box-shadow: inset 3px 0 0 rgba(240, 230, 0, 0); background-color: rgba(240, 230, 0, 0); } }

/* Footer: Spalten und Links nacheinander */
.fg > * { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease-out), translate 1s var(--ease-out); transition-delay: calc(var(--c, 0) * 90ms); }
.fg li { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(var(--c, 0) * 90ms + var(--l, 0) * 38ms + .2s); }
.fg.fg-in > *, .fg.fg-in li { opacity: 1; translate: none; }

/* Buttons: Beschriftung rollt beim Überfahren durch */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; height: 1.2em; line-height: 1.2; white-space: nowrap; }
.roll > span { display: block; transition: transform .55s var(--ease-out); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .roll > span, .btn:focus-visible .roll > span { transform: translateY(-100%); }

/* Fortschrittsring am »Nach oben«-Knopf */
.to-top .to-top__ring { position: absolute; inset: 3px; width: auto; height: auto; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.to-top__ring circle { fill: none; stroke: var(--black); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
@supports (animation-timeline: scroll()) {
  .to-top__ring circle { animation: ring-fill linear both; animation-timeline: scroll(root); }
}
@keyframes ring-fill { to { stroke-dashoffset: 0; } }

/* Produktkarten: beim Überfahren fährt einmal die Messlinie über das Gerät */
.product-card__img::before { content: ""; position: absolute; left: 8%; right: 8%; top: 4%; z-index: 2; height: 2px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 14px 2px rgba(240, 230, 0, .7); opacity: 0; pointer-events: none; }
.product-card:hover .product-card__img::before { animation: card-scan 1.2s var(--ease-in-out) both; }
@keyframes card-scan { 0% { top: 4%; opacity: 0; } 14%, 84% { opacity: 1; } 100% { top: 90%; opacity: 0; } }

/* Messraster im Hintergrund dunkler Abschnitte – wandert langsamer als der Inhalt */
.bp-grid { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 25%, transparent 88%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 25%, transparent 88%); }
.bp-grid > i { position: absolute; left: 0; right: 0; top: -192px; bottom: -192px; will-change: transform;
  background-image: linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px),
                    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px; background-position: center top; }
.uf-bg > .bp-grid { z-index: auto; }

@media (prefers-reduced-motion: reduce) {
  .bp-grid, .intro, .to-top__ring { display: none !important; }
  .product-card:hover .product-card__img::before { animation: none; }
}
@media print {
  .bp-grid, .intro { display: none !important; }
}

/* ---------- Zoom-Through, Iris-Blende, Text-Maske (zoomfx.js, build.py zoom_iris / zoom_mask) ---------- */
/* Ohne Bewegung (kein JS, »Bewegung reduzieren«): Satz auf Weiß bzw. Vollbild mit Karte */
.zoomx { position: relative; }
.zoomx__big { display: none; margin: 0; font-weight: 800; line-height: .92; letter-spacing: -.045em; white-space: nowrap; text-align: center; color: var(--black); }
.zoomx__big > span { display: inline-block; }
.zoomx__big.is-stacked .zoomx__w { display: block; }
.zoomx--iris { background: var(--white); padding-block: clamp(5rem, 4rem + 6vw, 10rem); }
.zoomx--iris .zoomx__disc { padding-inline: var(--gutter); }
.zoomx__line { margin: 0 auto; max-width: 13em; text-align: center; text-wrap: balance; font-size: clamp(2.125rem, 1rem + 4.4vw, 6rem); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; color: var(--black); }
.zoomx__line em { font-style: normal; padding-inline: .06em; background: linear-gradient(var(--yellow), var(--yellow)) 0 92% / var(--mk, 100%) .34em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.zoomx__ring, .zoomx__reticle, .zoomx__veil, .zoomx__kicker { display: none; }
.zoomx--mask { min-height: 100vh; display: flex; align-items: flex-end; color: var(--white); background: var(--black); isolation: isolate; overflow: clip; }
.zoomx--mask .zoomx__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.zoomx__media { position: absolute; inset: 0; overflow: hidden; background: var(--gray-900); }
.zoomx__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%; }
.zoomx__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 25%, rgba(0, 0, 0, .78) 100%); }
.zoomx__content { position: relative; z-index: 1; width: 100%; padding-block: 8rem 6rem; }

/* Mit Bewegung */
.js:not(.reduced-motion) .zoomx__big { display: block; }
.js:not(.reduced-motion) .zoomx__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js:not(.reduced-motion) .zoomx--iris { height: 270vh; padding: 0; background: var(--yellow); }
.js:not(.reduced-motion) .zoomx--iris .zoomx__stage { display: grid; place-items: center; }
.js:not(.reduced-motion) .zoomx--iris .zoomx__big { position: relative; }
.js:not(.reduced-motion) .zoomx--iris .zoomx__disc { position: absolute; inset: 0; display: grid; place-items: center; background: var(--white); clip-path: circle(0 at 50% 50%); }
.js:not(.reduced-motion) .zoomx--iris .zoomx__line { opacity: 0; --mk: 0%; }
.js:not(.reduced-motion) .zoomx__ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; fill: none; stroke: var(--black); }
.zoomx__ticks { stroke-width: 14; }
.zoomx__major { stroke-width: 22; }
.js:not(.reduced-motion) .zoomx__reticle { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.zoomx__reticle::before, .zoomx__reticle::after { content: ""; position: absolute; background: rgba(0, 0, 0, .32); }
.zoomx__reticle::before { left: -100vmax; width: 200vmax; top: -.5px; height: 1px; }
.zoomx__reticle::after { top: -100vmax; height: 200vmax; left: -.5px; width: 1px; }
/* Text-Maske: weiße Fläche mit schwarzer Schrift im Modus »screen« – Weiß bleibt weiß, in den Buchstaben erscheint das Bild */
.js:not(.reduced-motion) .zoomx--mask { display: block; min-height: 0; overflow: visible; }
.js:not(.reduced-motion) .zoomx--mask .zoomx__stage { inset: 0 auto auto 0; width: 100%; isolation: isolate; }
.js:not(.reduced-motion) .zoomx--mask .zoomx__shade { opacity: 0; }
.js:not(.reduced-motion) .zoomx--mask .zoomx__content { margin-top: 150vh; }
.js:not(.reduced-motion) .zoomx__veil { display: grid; place-items: center; position: absolute; inset: 0; background: var(--white); mix-blend-mode: screen; }
.js:not(.reduced-motion) .zoomx__kicker { display: block; position: absolute; left: 0; right: 0; top: 30%; text-align: center; color: var(--black); font-size: clamp(.8125rem, .7rem + .3vw, 1rem); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
@media print {
  .zoomx--iris { height: auto !important; background: none !important; }
  .zoomx__big, .zoomx__ring, .zoomx__reticle, .zoomx__veil, .zoomx__kicker { display: none !important; }
  .zoomx__stage { position: relative !important; height: auto !important; }
  .zoomx__disc { clip-path: none !important; }
  .zoomx__line { opacity: 1 !important; transform: none !important; }
}

/* Chinesisch, Japanisch, Koreanisch: Zeilenumbruch an Wort-/Phrasengrenzen statt mitten im Wort (2026-10-12) */
:lang(ja) :is(h1, h2, h3, .eyebrow, .lead), :lang(zh) :is(h1, h2, h3, .eyebrow, .lead) { word-break: auto-phrase; text-wrap: balance; line-break: strict; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ko) :is(h1, h2, h3) { text-wrap: balance; }

/* ---------- »highTower«: Tablar-Rechner (assets/js/traycalc.js) ---------- */
.traycalc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); align-items: start; }
.traycalc__form { display: grid; gap: 1rem; }
/* Fieldset als Block, nicht als Grid: Safari/WebKit ignoriert sonst das float der Legende und setzt sie auf die Kartenkante */
.traycalc__group { margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 0; border-radius: var(--radius); background: var(--white); display: block; min-width: 0; }
.traycalc__group legend { float: left; width: 100%; padding: 0; margin-bottom: 1.45rem; font-size: var(--fs-h4); font-weight: 500; line-height: 1.3; }
.traycalc__group legend ~ * { clear: both; }
.traycalc__group legend ~ * + * { margin-top: 1.35rem; }
.traycalc__field { display: grid; gap: .55rem; min-width: 0; }
.traycalc__label { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.traycalc__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.traycalc__unit { font-weight: 400; color: var(--gray-600); }
#hightower-facts .goals { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.traycalc__hint { margin: -.15rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--gray-600); }
.traycalc__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.traycalc__chip { position: relative; cursor: pointer; }
.traycalc__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.traycalc__chip span { display: block; padding: .4rem .8rem; border-radius: 999px; font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--gray-300); transition: background .2s, box-shadow .2s; }
.traycalc__chip:hover span { box-shadow: inset 0 0 0 1.5px var(--black); }
.traycalc__chip input:checked + span { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--yellow); }
.traycalc__chip input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.traycalc__val { display: inline-flex; align-items: baseline; gap: .3rem; flex: none; padding: .2rem .65rem; border-radius: 999px; background: var(--gray-50); font-size: .9375rem; font-weight: 500; }
.traycalc__val span { color: var(--gray-600); font-size: .8125rem; }
.traycalc__num { width: 4.6em; padding: 0; border: 0; background: none; font: inherit; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.traycalc__num::-webkit-inner-spin-button, .traycalc__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.traycalc__num:focus { outline: none; }
.traycalc__val:focus-within { box-shadow: inset 0 0 0 1.5px var(--black); }
.traycalc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; touch-action: pan-y; }
.traycalc__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--gray-100); }
.traycalc__range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--gray-100); }
.traycalc__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--black); }
.traycalc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--black), 0 4px 10px rgba(0, 0, 0, .18); transition: transform .2s var(--ease-out); }
.traycalc__range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--black), 0 4px 10px rgba(0, 0, 0, .18); }
.traycalc__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.traycalc__range:focus-visible { outline: none; }
.traycalc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--black); }
.traycalc__out { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: 1rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border-radius: var(--radius); background: var(--black); color: var(--white); min-width: 0; }
.traycalc__kpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1rem; align-items: end; }
.traycalc__kpi { display: grid; min-width: 0; }
.traycalc__kpi-pre { font-size: .8125rem; color: var(--gray-400); line-height: 1.2; }
.traycalc__kpi b { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.traycalc__kpi--main b { font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem); color: var(--yellow); letter-spacing: -0.045em; line-height: .95; }
.traycalc__kpi-lab { font-size: .875rem; color: var(--gray-300); line-height: 1.3; overflow-wrap: anywhere; }
.traycalc__kpi.is-bump b { animation: tc-bump .5s var(--ease-out); }
@keyframes tc-bump { 0% { transform: translateY(.12em); opacity: .4; } 100% { transform: none; opacity: 1; } }
.traycalc__detail { margin: 0; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .875rem; line-height: 1.5; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.traycalc__fig { margin: 0; border-radius: var(--radius-sm); background: var(--gray-900); padding: 1rem .75rem .75rem; }
.traycalc__svg { width: 100%; height: auto; max-height: clamp(300px, 46vh, 540px); overflow: visible; }
.traycalc__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .6rem; font-size: .75rem; color: var(--gray-400); line-height: 1.3; }
.traycalc__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.traycalc__sw { display: inline-block; flex: none; width: .8rem; height: .8rem; border-radius: 3px; }
.traycalc__sw--trays { background: var(--gray-300); }
.traycalc__sw--open { background: var(--yellow); }
.traycalc__sw--man { background: var(--gray-600); border-radius: 50%; }
.traycalc__note { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--gray-400); }
.traycalc__out .btn { justify-self: start; }
.traycalc__how { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); max-width: 58rem; }
.traycalc__how ol { margin: 0; padding-left: 1.25em; font-size: .9375rem; line-height: 1.55; color: var(--gray-700); }
.traycalc__how li { margin-bottom: .5em; }
.tc-body { fill: #303030; }
.tc-zone { fill: #222; }
.tc-shaft { stroke: #555; stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.tc-tray { fill: var(--gray-300); }
.tc-tray--hi { fill: var(--white); }
.tc-tool { fill: #8a8a8a; }
.tc-tool.tc-cut { fill: #a8a8a8; }
.tc-tool--hi, .tc-tool--hi.tc-cut { fill: var(--yellow); }
.tc-open { fill: #4a4a4a; }
.tc-floor { stroke: var(--gray-500); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tc-dim { stroke: var(--gray-500); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tc-label { fill: var(--gray-300); font-family: var(--font); font-weight: 500; }
.tc-man { fill: var(--gray-600); }
.traycalc__bar { display: none; }
@media (max-width: 1023px) {
  .traycalc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; }
  .traycalc__kpis { grid-template-columns: 1fr 1fr; }
  .traycalc__kpi--main { grid-column: 1 / -1; }
  .traycalc__chip span { padding: .35rem .65rem; font-size: .8125rem; }
}
@media (max-width: 760px) {
  .traycalc { grid-template-columns: 1fr; }
  .traycalc__out { position: static; }
  .traycalc__bar { position: sticky; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 4; margin-right: calc(48px + .5rem); min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem 1rem; padding: .55rem 1.1rem; border-radius: 24px; line-height: 1.3; background: var(--black); color: var(--gray-300); font-size: .875rem; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s var(--ease-out); }
  .traycalc__bar b { color: var(--yellow); font-weight: 500; font-variant-numeric: tabular-nums; }
  .traycalc__bar.is-off { opacity: 0; transform: translateY(8px); pointer-events: none; }
}
@media (max-width: 560px) {
  .traycalc__kpis { grid-template-columns: 1fr 1fr; }
  .traycalc__kpi--main { grid-column: 1 / -1; }
  .traycalc__svg { max-height: clamp(280px, 60vh, 420px); }
}
@media (prefers-reduced-motion: reduce) { .traycalc__kpi.is-bump b { animation: none; } }

/* ---------- »toolOrganizer«: Konfigurator (assets/js/toolconfig.js, build.py r_toolconfig) ---------- */
.tcfg { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); align-items: start; }
.tcfg__form { display: grid; gap: 1rem; min-width: 0; }
/* Fieldset als Block mit float-Legende (wie traycalc): WebKit setzt die Legende sonst auf die Kartenkante */
.tcfg__step { margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 0; border-radius: var(--radius); background: var(--white); display: block; min-width: 0; }
.tcfg__step legend { float: left; width: 100%; padding: 0; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .65rem; font-size: var(--fs-h4); font-weight: 500; line-height: 1.3; }
.tcfg__step legend ~ * { clear: both; }
.tcfg__step legend ~ * + * { margin-top: 1rem; }
.tcfg__no { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--black); color: var(--yellow); font-size: .8125rem; font-weight: 700; }
.tcfg__hint { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--gray-600); }
.tcfg__label { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.tcfg input[type=radio], .tcfg input[type=checkbox].tcfg__sr { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tcfg label { cursor: pointer; }
/* Auswahlkarten: Rahmen grau, gewählt gelb */
:is(.tcfg__hcard, .tcfg__opt, .tcfg__xcard) { position: relative; display: block; min-width: 0; }
:is(.tcfg__hcard-in, .tcfg__opt-in, .tcfg__xcard-in) { display: grid; height: 100%; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1.5px var(--gray-100); transition: box-shadow .2s, background .2s; }
:is(.tcfg__hcard, .tcfg__opt, .tcfg__xcard):hover > span { box-shadow: inset 0 0 0 1.5px var(--gray-500); }
input:checked + :is(.tcfg__hcard-in, .tcfg__opt-in, .tcfg__xcard-in) { box-shadow: inset 0 0 0 2.5px var(--black); background: #fffde0; }
input:focus-visible + :is(.tcfg__hcard-in, .tcfg__opt-in, .tcfg__xcard-in) { outline: 2px solid var(--black); outline-offset: 3px; }
.tcfg__hcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tcfg__hcard-in { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: .45rem .6rem; padding: .8rem .9rem; }
.tcfg__hcard-in b { align-self: end; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcfg__hcard-in b small { font-size: .55em; font-weight: 500; color: var(--gray-600); letter-spacing: 0; }
.tcfg__hcard-in > span[data-cab] { grid-column: 1 / -1; font-size: .75rem; line-height: 1.3; color: var(--gray-600); }
.tcfg__mini { width: 22px; height: 41px; overflow: visible; }
.tcfg__mini-body { fill: #3b3f44; }
.tcfg__mini-dr rect { fill: #d9dbde; }
input:checked + .tcfg__hcard-in .tcfg__mini-dr rect { fill: var(--yellow); }
.tcfg__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tcfg__opt-in { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: .8rem; padding: .55rem .8rem .55rem .55rem; }
.tcfg__thumb { display: grid; place-items: center; width: 64px; height: 48px; border-radius: 8px; background: var(--gray-50); color: var(--gray-700); overflow: hidden; }
.tcfg__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; }
.tcfg__thumb svg { width: 34px; height: 34px; }
.tcfg__opt-txt, .tcfg__xcard-txt { display: grid; gap: .1rem; min-width: 0; }
.tcfg__opt-txt b { font-size: .9375rem; font-weight: 500; line-height: 1.25; }
.tcfg__opt-txt span { font-size: .78rem; line-height: 1.35; color: var(--gray-600); }
.tcfg__opt.is-off { opacity: .45; }
.tcfg__xcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tcfg__xcard-in { grid-template-rows: auto 1fr; overflow: hidden; }
.tcfg__xcard-img { display: block; aspect-ratio: 16 / 10; background: var(--gray-50); overflow: hidden; }
.tcfg__xcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.tcfg__xcard:hover .tcfg__xcard-img img { transform: scale(1.04); }
.tcfg__xcard-txt { align-content: start; padding: .75rem .85rem .9rem; }
.tcfg__xcard-txt small { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.tcfg__xcard-txt b { font-size: .9375rem; font-weight: 500; line-height: 1.25; overflow-wrap: break-word; }
.tcfg__xcard-txt span { font-size: .78rem; line-height: 1.4; color: var(--gray-600); }
/* Schritt 4: Füllstand, Schubladen hinzufügen, Liste */
.tcfg__meter { height: 14px; border-radius: 7px; background: repeating-linear-gradient(-45deg, var(--gray-50) 0 6px, #fff 6px 10px); box-shadow: inset 0 0 0 1px var(--gray-100); overflow: hidden; }
.tcfg__meter-bar { display: flex; height: 100%; gap: 2px; }
.tcfg__meter-bar i { display: block; height: 100%; background: var(--gray-700); transition: flex-basis .45s var(--ease-out), background .2s; }
.tcfg__meter-bar i.is-sel { background: var(--yellow); }
.tcfg__meter-bar.is-full i { background: var(--black); }
.tcfg__meter-bar.is-full i.is-sel { background: var(--yellow); }
.tcfg__step .tcfg__meter-txt { margin-top: .45rem; font-size: .875rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.tcfg__meter-txt b { font-weight: 500; }
.tcfg__meter-txt .is-ok { color: #2e7d32; }
.tcfg__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.tcfg__chip { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--gray-300); transition: background .2s, box-shadow .2s, opacity .2s; }
.tcfg__chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--black); }
.tcfg__chip:disabled { opacity: .35; cursor: not-allowed; }
.tcfg__chip[aria-pressed=true] { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--yellow); }
.tcfg__chip:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.tcfg__chip--add::before { content: "+"; font-weight: 400; color: var(--gray-600); }
.tcfg__chip svg { width: 18px; height: 18px; flex: none; color: var(--gray-600); }
.tcfg__chip[aria-pressed=true] svg { color: var(--black); }
.tcfg__step [data-out=div] > * + * { margin-top: 1rem; }
.tcfg__chips > .tcfg__hint { flex-basis: 100%; margin: .15rem 0 0; }
.tcfg__tools { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.tcfg__tool { padding: .2rem 0; border: 0; background: none; color: var(--black); font: inherit; font-size: .875rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: .25em; cursor: pointer; }
.tcfg__tool:hover:not(:disabled) { text-decoration-color: currentColor; }
.tcfg__tool:disabled { color: var(--gray-400); cursor: not-allowed; text-decoration: none; }
.tcfg__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tcfg__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-radius: 10px; background: var(--gray-50); transition: background .2s, box-shadow .2s; }
.tcfg__list li.is-sel { background: #fffde0; box-shadow: inset 0 0 0 2px var(--black); }
.tcfg__list li.is-new { animation: tcfg-in .45s var(--ease-out); }
@keyframes tcfg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tcfg__pick { display: grid; grid-template-columns: 1.8rem 4.4rem minmax(0, 1fr); align-items: center; gap: .5rem; min-width: 0; padding: .5rem .2rem .5rem .75rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.tcfg__pick:focus-visible, .tcfg__del:focus-visible { outline: 2px solid var(--black); outline-offset: -2px; }
.tcfg__pick i { font-style: normal; font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.tcfg__pick b { font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcfg__pick span { font-size: .8125rem; line-height: 1.3; color: var(--gray-700); overflow-wrap: anywhere; }
.tcfg__pick em { margin-left: .35em; padding: .05rem .4rem; border-radius: 999px; background: var(--black); color: var(--yellow); font-size: .6875rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.tcfg__del { display: grid; place-items: center; width: 44px; border: 0; border-radius: 10px; background: none; color: var(--gray-600); cursor: pointer; }
.tcfg__del:hover { color: var(--black); background: rgba(0, 0, 0, .05); }
.tcfg__del svg { width: 16px; height: 16px; }
.tcfg__empty { margin: 0; padding: 1rem; border-radius: 10px; background: var(--gray-50); font-size: .875rem; color: var(--gray-600); text-align: center; }
/* Schritt 5: Einteilung der gewählten Schublade */
.tcfg__dhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tcfg__dhead b { font-size: 1rem; font-weight: 500; }
.tcfg__dnav { display: flex; gap: .3rem; }
.tcfg__dnav button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--gray-50); color: var(--black); cursor: pointer; }
.tcfg__dnav button:disabled { opacity: .35; cursor: default; }
.tcfg__dnav svg { width: 16px; height: 16px; }
.tcfg__grp + .tcfg__grp { margin-top: 1rem; }
.tcfg__grp .tcfg__label small { display: block; margin-top: .1rem; font-size: .78rem; font-weight: 400; color: var(--gray-600); }
.tcfg__why { margin: .55rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--gray-600); }
.tcfg__check { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; line-height: 1.35; }
.tcfg__check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--black); }
.tcfg__check.is-off { color: var(--gray-400); cursor: not-allowed; }
.tcfg__apply { justify-self: start; }
/* Ergebnis: schwarze Karte mit Vorderansicht und Draufsicht */
.tcfg__out { position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 1rem); display: grid; gap: .9rem; padding: clamp(1.1rem, .9rem + 1vw, 1.75rem); border-radius: var(--radius); background: var(--black); color: var(--white); min-width: 0; }
.tcfg__kpis { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .75rem; align-items: end; }
.tcfg__kpi { display: grid; min-width: 0; }
.tcfg__kpi b { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcfg__kpi--main b { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); color: var(--yellow); letter-spacing: -0.045em; line-height: .95; }
.tcfg__kpi span { font-size: .8125rem; color: var(--gray-300); line-height: 1.3; overflow-wrap: anywhere; }
.tcfg__kpi.is-bump b { animation: tc-bump .5s var(--ease-out); }
.tcfg__status { margin: 0; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1.4; color: var(--gray-300); }
.tcfg__status::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gray-500); }
.tcfg__status.is-ok { color: var(--white); }
.tcfg__status.is-ok::before { background: var(--yellow); box-shadow: 0 0 0 4px rgba(240, 230, 0, .18); }
.tcfg__figs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .75rem; align-items: stretch; }
.tcfg__fig { display: grid; grid-template-rows: 1fr auto; gap: .5rem; margin: 0; padding: .9rem .75rem .7rem; border-radius: var(--radius-sm); background: var(--gray-900); min-width: 0; }
.tcfg__svg { display: block; width: 100%; height: clamp(240px, 42vh, 440px); overflow: visible; }
.tcfg__fig figcaption { font-size: .75rem; line-height: 1.4; color: var(--gray-400); overflow-wrap: anywhere; }
.tcfg__fig figcaption b { display: block; color: var(--white); font-weight: 500; font-size: .8125rem; }
.tcfg__out .btn { justify-self: start; }
/* Zeichnung (SVG, Maße in mm) */
.tg-body { fill: #3b3f44; }
.tg-lid { fill: #4d5257; }
.tg-plinth { fill: #2c2f33; }
.tg-recess { fill: #232528; }
.tg-word { fill: #c9ccd0; font-family: var(--font); font-weight: 500; letter-spacing: .02em; }
.tg-lock { fill: #23262a; stroke: #6b7076; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tg-dr { cursor: pointer; }
.tg-lip { fill: #f3f4f5; }
.tg-groove { fill: #9a9ea3; }
.tg-led { fill: #5a5e63; }
.tg-led.is-on { fill: var(--yellow); }
.tg-dr.is-sel .tg-front { fill: #fffbc2; }
.tg-dr.is-sel .tg-led { fill: var(--yellow); filter: drop-shadow(0 0 2px var(--yellow)); }
.tg-sel { fill: none; stroke: var(--yellow); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.tg-dlab { fill: #6f7378; font-family: var(--font); font-weight: 500; }
.tg-free { fill: #26292d; stroke: var(--gray-600); stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tg-freelab { fill: var(--gray-400); font-family: var(--font); font-weight: 500; }
.tg-floor { stroke: var(--gray-600); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tg-dev { fill: #3b3f44; }
.tg-dev2 { fill: #2a2d31; }
.tg-screen { fill: #11161c; }
.tg-ui { fill: #e9ecef; }
.tg-ui--hi { fill: var(--yellow); }
.tg-dim { stroke: var(--gray-600); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tg-dimlab { fill: var(--gray-400); font-family: var(--font); font-weight: 500; }
.tg-dr.is-new { animation: tg-in .5s var(--ease-out); transform-box: fill-box; }
@keyframes tg-in { from { opacity: 0; transform: translateX(-4%); } to { opacity: 1; transform: none; } }
.tg-box { fill: #4a4e53; }
.tg-floor2 { fill: #2d3034; }
.tg-floor3 { fill: #74787e; }
.tg-hinge { fill: #c4c7cb; }
.tg-net { fill: none; stroke: var(--yellow); stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .85; }
.tg-wall { fill: #d4d6d9; }
.tg-cell { fill: #474b50; }
.tg-flap { fill: #9a9ea4; }
.tg-flap.is-open { fill: var(--yellow); }
.tg-notch { fill: #2d3034; }
.tg-div { fill: #e3e5e8; }
.tg-emptylab { fill: var(--gray-300); font-family: var(--font); font-weight: 500; }
.tg-hi { fill: var(--yellow); }
.tg-flap.is-open, .is-pulse { animation: tg-pulse 2.4s ease-in-out infinite; }
@keyframes tg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Zusammenfassung mit Stückliste */
.tcfg__sum { margin-top: clamp(1rem, .5rem + 1vw, 1.5rem); padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); border-radius: var(--radius); background: var(--white); }
.tcfg__sum-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: 1rem; }
.tcfg__sum-head h3 { margin: 0; font-size: var(--fs-h3); }
.tcfg__sum-head p { margin: 0; font-size: .9375rem; color: var(--gray-600); }
.tcfg__table-wrap { overflow-x: auto; }
.tcfg__table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; }
.tcfg__table th { padding: .55rem .75rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); background: var(--gray-50); }
.tcfg__table td { padding: .6rem .75rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.tcfg__table td:first-child { width: 4.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcfg__table td:last-child { width: 9.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gray-700); }
.tcfg__table tr.tcfg__grow td { padding-top: 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); border-bottom-color: var(--gray-300); }
.tcfg__table small { display: block; color: var(--gray-600); font-size: .8125rem; }
.tcfg__note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--gray-600); max-width: 60rem; }
.tcfg__acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.tcfg__how { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); max-width: 58rem; }
.tcfg__how ul { margin: 0; padding-left: 1.25em; font-size: .9375rem; line-height: 1.55; color: var(--gray-700); }
.tcfg__how li { margin-bottom: .5em; }
.tcfg__bar { display: none; }
.tcfg-sheet { display: none; }
.product-hero__claim [data-tcfg-btn] { color: var(--black); }
@media (max-width: 1280px) {
  .tcfg__xcards { grid-template-columns: 1fr; }
  .tcfg__xcard-in { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: none; }
  .tcfg__xcard-img { aspect-ratio: auto; height: 100%; min-height: 84px; }
}
@media (max-width: 1180px) {
  .tcfg__opts { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .tcfg { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem; }
  .tcfg__figs { grid-template-columns: 1fr; }
  .tcfg__fig--front .tcfg__svg { height: clamp(220px, 34vh, 380px); }
  .tcfg__fig--top .tcfg__svg { height: clamp(160px, 22vh, 240px); }
  .tcfg__hcard-in { grid-template-columns: 1fr; justify-items: start; }
  .tcfg__xcard-in { grid-template-columns: 96px minmax(0, 1fr); }
  .tcfg__kpis { grid-template-columns: 1fr 1fr; }
  .tcfg__kpi--main { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tcfg { grid-template-columns: 1fr; }
  .tcfg__out { position: static; }
  .tcfg__figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .tcfg__fig--front .tcfg__svg, .tcfg__fig--top .tcfg__svg { height: clamp(200px, 52vw, 300px); }
  .tcfg__hcards { gap: .4rem; }
  .tcfg__hcard-in { padding: .65rem .7rem; }
  .tcfg__table td:last-child { width: auto; }
  .tcfg__table th:first-child, .tcfg__table td:first-child { width: 3rem; padding-right: .25rem; }
  .tcfg__bar { position: sticky; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 4; margin-right: calc(48px + .5rem); min-height: 52px; display: flex; align-items: center; gap: .75rem; padding: .45rem 1.1rem .45rem .6rem; border-radius: 26px; background: var(--black); color: var(--gray-300); font-size: .8125rem; line-height: 1.3; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s var(--ease-out); }
  .tcfg__bar b { color: var(--yellow); font-weight: 500; font-variant-numeric: tabular-nums; }
  .tcfg__bar.is-off { opacity: 0; transform: translateY(8px); pointer-events: none; }
  .tcfg__barcab { flex: none; width: 22px; height: 40px; overflow: visible; }
  .tcfg__barcab .b { fill: #4d5257; }
  .tcfg__barcab .d { fill: #d9dbde; }
  .tcfg__barcab .s { fill: var(--yellow); }
  .tcfg__barcab .f { fill: none; stroke: var(--gray-500); stroke-width: .8; stroke-dasharray: 1.5 1.2; }
}
@media (max-width: 420px) {
  .tcfg__figs { grid-template-columns: 1fr; }
  .tcfg__fig--top .tcfg__svg { height: 200px; }
  .tcfg__opt-in { grid-template-columns: 52px minmax(0, 1fr); }
  .tcfg__thumb { width: 52px; height: 42px; }
  .tcfg__hcard-in b { font-size: 1.125rem; }
}
/* Druck: nur das Konfigurationsblatt (»Drucken / als PDF«), sonst die Seite wie gewohnt */
@media print {
  html.tcfg-printing body > :not(.tcfg-sheet) { display: none !important; }
  html.tcfg-printing .tcfg-sheet { display: block; color: #000; font-size: 10pt; }
  .tcfg-sheet h1 { margin: 0 0 2mm; font-size: 18pt; }
  .tcfg-sheet h2 { margin: 6mm 0 2mm; font-size: 12pt; }
  .tcfg-sheet__meta { margin: 0 0 5mm; color: #555; font-size: 9pt; }
  .tcfg-sheet__grid { display: grid; grid-template-columns: 60mm 1fr; gap: 8mm; align-items: start; }
  .tcfg-sheet__grid svg { width: 60mm; height: auto; }
  .tcfg-sheet table { width: 100%; border-collapse: collapse; }
  .tcfg-sheet th, .tcfg-sheet td { padding: 1.3mm 2mm; border-bottom: .2mm solid #ccc; text-align: left; vertical-align: top; }
  .tcfg-sheet th { background: #f2f2f2; font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; }
  .tcfg-sheet tr.tcfg__grow td { font-weight: 700; font-size: 8pt; text-transform: uppercase; color: #555; padding-top: 3mm; }
  .tcfg-sheet small { display: block; color: #555; }
  .tcfg-sheet__note { margin-top: 5mm; color: #555; font-size: 8pt; }
  .tcfg-sheet img { height: 9mm; width: auto; margin-bottom: 4mm; }
}
/* ---------- Tooling-Shop: Werkzeugaufnahme finden (assets/js/toolfinder.js) und Bestellschritte (build.py r_steps) ---------- */
.toolfinder { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); align-items: start; }
.toolfinder__form { display: grid; gap: 1rem; min-width: 0; }
/* Fieldset als Block wie beim Tablar-Rechner (WebKit: Legende sonst auf der Kartenkante) */
.toolfinder__group { margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 0; border-radius: var(--radius); background: var(--white); display: block; min-width: 0; transition: opacity .3s; }
.toolfinder__group legend { float: left; width: 100%; padding: 0; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .65rem; font-size: var(--fs-h4); font-weight: 500; line-height: 1.3; }
.toolfinder__group legend ~ * { clear: both; }
.toolfinder__no { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--black); color: var(--yellow); font-size: .8125rem; font-weight: 700; }
.toolfinder__group.is-off .toolfinder__no { background: var(--gray-100); color: var(--gray-600); }
.toolfinder__chips { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.toolfinder__ifaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .9rem 1.25rem; align-items: start; }
.toolfinder__ifaces[hidden] { display: none; }
.toolfinder__ifaces > .tf-chip { grid-column: 1 / -1; justify-self: start; }
.toolfinder__fam { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .6rem; align-items: center; min-width: 0; }
.toolfinder__famname { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--gray-600); white-space: nowrap; }
.toolfinder__none { margin: 0; color: var(--gray-600); }
.tf-chip { position: relative; cursor: pointer; min-width: 0; }
.tf-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tf-chip span { display: block; padding: .5rem .9rem; border-radius: 999px; font-size: .9375rem; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px var(--gray-300); transition: background .2s, box-shadow .2s; }
.tf-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--black); }
.tf-chip input:checked + span { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--yellow); }
.tf-chip input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.toolfinder__out { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: .6rem; align-content: start; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border-radius: var(--radius); background: var(--black); color: var(--white); min-width: 0; }
.toolfinder__sum { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--yellow); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; min-width: 0; }   /* nicht trennen – toolfinder.js verkleinert die Schrift */
.toolfinder__sub { font-size: 1rem; color: var(--gray-300); font-variant-numeric: tabular-nums; }
.toolfinder__out .btn { justify-self: start; margin: .6rem 0 .2rem; }
.toolfinder__note { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--gray-400); }
.step-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, .4rem + 1vw, 1.5rem); }
.step-card { display: grid; align-content: start; gap: .6rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius); background: var(--gray-900); min-width: 0; }
.step-card__no { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--yellow); color: var(--black); font-weight: 700; margin-bottom: .4rem; }
.step-card h3 { margin: 0; font-size: var(--fs-h4); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.step-card p { margin: 0; color: var(--gray-300); font-size: .9375rem; line-height: 1.5; }
.bg-white .step-card, .bg-lightgray .step-card { background: var(--white); }
.bg-white .step-card p, .bg-lightgray .step-card p { color: var(--gray-700); }
.step-actions { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); display: flex; flex-wrap: wrap; gap: .25rem; }
@media (max-width: 1023px) {
  .toolfinder { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 1rem; }
  .step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .toolfinder { grid-template-columns: 1fr; }
  .toolfinder__out { position: static; }
  .tf-chip span { padding: .45rem .8rem; font-size: .875rem; }
  .step-cards { grid-template-columns: 1fr; }
}

/* ---------- AR-/3D-Ansicht der Produktseiten (assets/js/arview.js, build.py r_ar) ---------- */
.ar-section { background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%); }
.ar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, .5rem + 3vw, 4rem); align-items: center; }
.ar__title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; margin: 0 0 1rem; text-wrap: balance; }
.ar__shown { margin: -.25rem 0 1rem; font-size: var(--fs-small); color: var(--gray-600); }
.ar__lead { font-size: var(--fs-body); color: var(--gray-700); max-width: 34rem; margin: 0 0 1.5rem; }
.ar__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.ar__chip { padding: .55rem 1rem; border-radius: 999px; border: 0; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--gray-300); font: inherit; font-size: .9375rem; font-weight: 500; color: var(--black); cursor: pointer; transition: background-color .25s, box-shadow .25s, color .25s; }
.ar__chip:hover { box-shadow: inset 0 0 0 1.5px var(--black); }
.ar__chip[aria-checked="true"] { background: var(--black); color: var(--white); box-shadow: none; }
.ar__dims { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: .25rem clamp(1rem, .5rem + 1.5vw, 2rem); margin: 0 0 .75rem; }
.ar__dims > div { min-width: 0; }
.ar__dims dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: .2rem; }
.ar__dims dd { margin: 0; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar__dims small { display: block; margin-top: .1rem; font-size: .8125rem; font-weight: 400; color: var(--gray-600); letter-spacing: 0; }
.ar__note { font-size: .8125rem; color: var(--gray-500); margin: 0 0 1.5rem; max-width: 34rem; }
.ar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.ar__actions .btn svg, .btn--ar svg { width: 1.25em; height: 1.25em; flex: none; }
.ar__go::after, .btn--ar::after, .ar__plan::after { display: none; }
.ar__arhint { margin: .75rem 0 0; font-size: var(--fs-small); color: var(--gray-600); max-width: 30rem; }
.ar__msg { margin: .75rem 0 0; padding: .6rem .9rem; border-radius: var(--radius-sm); background: var(--white); font-size: var(--fs-small); color: var(--gray-700); box-shadow: inset 3px 0 0 var(--yellow); }
.ar__qr { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.75rem; padding: 1rem 1.25rem 1rem 1rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); max-width: 30rem; }
.ar__qr[hidden] { display: none; }
.ar__qrcode { flex: none; width: 104px; height: 104px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--gray-100); }
.ar__qrcode svg { display: block; width: 100%; height: 100%; }
.ar__qr b { display: block; font-weight: 500; margin-bottom: .25rem; }
.ar__qr p { margin: 0; font-size: var(--fs-small); color: var(--gray-600); line-height: 1.45; }

.ar__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: radial-gradient(85% 75% at 50% 42%, #fff 0%, #f1f1f0 55%, #dcdcda 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.ar__stage:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.ar__stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
.ar__poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s var(--ease-out); }
.ar__stage model-viewer { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; opacity: 0; transition: opacity .6s var(--ease-out); }
.ar__stage model-viewer:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.ar__stage.is-loaded model-viewer { opacity: 1; }
.ar__stage.is-loaded .ar__poster { opacity: 0; }
.ar__loading { position: absolute; left: 50%; bottom: 1.25rem; z-index: 4; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: .8125rem; color: var(--gray-700); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3); }
.ar__loading[hidden] { display: none; }
.ar__loading i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gray-100); border-top-color: var(--black); animation: globe-spin .9s linear infinite; }
.ar__hint { position: absolute; left: 1rem; top: 1rem; z-index: 4; padding: .4rem .8rem .4rem 2rem; border-radius: 999px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8125rem; color: var(--gray-700); pointer-events: none; animation: ar-hint-in .6s var(--ease-out) both; }
.ar__hint::before { content: ""; position: absolute; left: .75rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 50%; border: 2px solid var(--black); border-left-color: transparent; transform: rotate(-45deg); }
.ar__hint[hidden] { display: none; }
@keyframes ar-hint-in { from { opacity: 0; transform: translateY(-6px); } }
.ar__tools { position: absolute; right: .9rem; bottom: .9rem; z-index: 4; display: flex; gap: .4rem; }
.ar__tools[hidden] { display: none; }
.ar__tool { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--black); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; transition: background-color .2s, transform .3s var(--ease-out); }
.ar__tool:hover { background: #fff; transform: translateY(-1px); }
.ar__tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar__tool--dims { display: inline-flex; gap: .4rem; width: auto; padding: 0 .95rem 0 .75rem; font: inherit; font-size: .8125rem; font-weight: 500; }
.ar__tool--dims[aria-pressed="true"] { background: var(--yellow); }
.ar__stagego { position: absolute; left: 50%; bottom: 1rem; z-index: 5; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem; border: 0; border-radius: 999px; background: var(--yellow); color: var(--black); font: inherit; font-weight: 500; font-size: 1rem; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); cursor: pointer; }
.ar__stagego svg { width: 1.3em; height: 1.3em; }
.ar__stagego[hidden] { display: none; }
.ar__stage:has(.ar__stagego:not([hidden])) .ar__tools { bottom: 4.6rem; }

/* Maßlinien: Linien im SVG über der Bühne, Endpunkte und Beschriftung als model-viewer-Hotspots */
.ar__dimlines { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s; overflow: visible; }
.show-dims .ar__dimlines { opacity: 1; }
.ar__dimline, .ar__dimtick { stroke: var(--black); stroke-width: 1.5; stroke-linecap: round; }
.ar__dimline { stroke-dasharray: 5 4; }
.ar__dimpt { width: 1px; height: 1px; pointer-events: none; }
.ar__dimlabel { position: absolute; left: 0; top: 0; z-index: 4; padding: .22rem .6rem; border-radius: 999px; background: var(--yellow); color: var(--black); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .35s; }
.show-dims .ar__dimlabel { opacity: 1; }

/* Einstiege: Produktkopf, Produktnavigation, Produktkarten */
.product-hero__actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.subnav__ar { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .38rem .8rem .38rem .6rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--black); box-shadow: inset 0 0 0 1.5px var(--black); transition: background-color .2s; }
.subnav__ar:hover { background: var(--yellow); box-shadow: none; }
.subnav__ar svg { width: 17px; height: 17px; }
.product-card__ar { position: absolute; left: 1.1rem; top: .9rem; z-index: 3; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem .25rem .4rem; border-radius: 999px; background: var(--yellow); color: var(--black); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.product-card__ar svg { width: 14px; height: 14px; }
/* Abzeichen startet auf Touch-Geräten AR direkt (arview.js) – größere Tippfläche */
@media (pointer: coarse) {
  .product-card__ar { padding: .4rem .7rem .4rem .5rem; font-size: .75rem; }
  .product-card__ar svg { width: 16px; height: 16px; }
  .product-card__ar::after { content: ""; position: absolute; inset: -10px -12px; }
}

@media (max-width: 1023px) {
  .ar { grid-template-columns: 1fr; }
  .ar__stage { order: -1; aspect-ratio: 5 / 4; }
}
@media (max-width: 640px) {
  .ar__stage { aspect-ratio: 4 / 5; margin-inline: calc(var(--gutter) * -.5); }
  .ar__dims { grid-template-columns: repeat(2, minmax(0, auto)); row-gap: .9rem; }
  .ar__tool { height: 38px; }
  .ar__tool:not(.ar__tool--dims) { width: 38px; }
  .subnav__ar span { display: none; }
  .subnav__ar { padding: .38rem; }
}
@media (pointer: coarse) {
  .ar__tool[data-ar-tool^="zoom"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ar__hint { animation: none; }
}
.ar__go[hidden] { display: none; }

/* =========================================================================
   Seite »Das System« (build.py render_system, Bewegung: assets/js/systemfx.js)
   Leitmotiv Kreis: Messring im Hero → Gelb des Statements → Systemring wächst als dunkler Kreis → vier Werte als vier
   Viertel eines Rings → Smart Factory hinter einer Iris → 80 | 60 | 14 | 7. Ohne JS bzw. »Bewegung reduzieren«: alles steht.
   ========================================================================= */
.sys { position: relative; overflow-x: clip; --sys-dark: #0c0c0d; }
.sys h2, .sys h3 { text-wrap: balance; }

/* ---------- Hero: Messring mit umlaufendem Lichtpunkt ---------- */
.sys-hero { background: var(--sys-dark); color: var(--white); }
.sys-hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  background: radial-gradient(115% 95% at 68% 44%, #2b2c2e 0%, #151516 46%, #080808 100%); }
.js:not(.reduced-motion) .sys-hero { height: 230vh; }
.js:not(.reduced-motion) .sys-hero__stage { position: sticky; top: 0; }
.sys-hero__ringbox { position: absolute; z-index: -1; left: 67%; top: 50%; width: min(94vh, 64vw); aspect-ratio: 1; translate: -50% -50%; transform-origin: 50% 50%; }
.sys-hero__ring { width: 100%; height: 100%; overflow: visible; }
.sys-hero__inner { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1.5; }
.sys-hero__track { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.sys-hero__ticks { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 12; }
.sys-hero__major { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 22; }
.sys-hero__dot { fill: rgba(255, 255, 255, .5); transform-box: fill-box; transform-origin: center; animation: sys-dot .9s var(--ease-out) both; animation-delay: calc(.5s + var(--i) * 60ms); }
@keyframes sys-dot { from { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.8); fill: var(--yellow); } to { opacity: 1; transform: scale(1); } }
.sys-hero__runner { animation: sys-spin 16s linear infinite; }
@keyframes sys-spin { to { transform: rotate(360deg); } }
.sys-hero__trail { fill: none; stroke: var(--yellow); stroke-width: 3; opacity: .55; }
.sys-hero__halo { fill: url(#sys-halo); opacity: .9; }
.sys-hero__light { fill: #fff; }
.sys-hero__core { fill: #0b0b0c; stroke: var(--yellow); stroke-width: 3; }
.sys-hero__fill { position: absolute; inset: 0; z-index: 0; background: var(--yellow); clip-path: circle(0 at 50% 50%); pointer-events: none; }
.sys-hero__copy { position: relative; z-index: 1; width: 100%; padding-block: calc(var(--header-h) + 2rem) clamp(3rem, 2rem + 5vw, 7rem); }
.sys-hero__title { max-width: 11ch; }
.sys-hero__title--long { font-size: var(--fs-h1); max-width: 16ch; }
.sys-hero__text { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.45; color: rgba(255, 255, 255, .82); }
.sys-hero__text p { margin: 0; }
@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
  .sys-hero__ringbox { left: 50%; top: 36%; width: min(94vw, 58vh); }
  .sys-hero__text br { display: none; }
}

/* ---------- Statement (gelb) ---------- */
.sys-statement { background: var(--yellow); color: var(--black); padding-block: clamp(4.5rem, 2.5rem + 8vw, 11rem) clamp(5rem, 3rem + 8vw, 11rem); }
.sys-statement__title { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; max-width: 13ch; margin-bottom: clamp(2.25rem, 1.25rem + 3vw, 4.5rem); }
.sys-statement__lead { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.75rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 500; max-width: 34ch; margin: 0; }
.sys-statement p[data-words] .w { color: rgba(0, 0, 0, .22); }
.sys-statement p[data-words] .w.is-lit { color: inherit; }
.sys-statement__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); max-width: 78rem;
  padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); border-top: 2px solid var(--black); font-size: var(--fs-lead); line-height: 1.45; }
.sys-statement__cols p { margin: 0; }
@media (max-width: 760px) { .sys-statement__cols { grid-template-columns: 1fr; } }

/* ---------- Systemring ---------- */
.sys-map { background: var(--yellow); color: var(--white); }
.sys-map__veil { position: absolute; inset: 0; z-index: 0; background: var(--sys-dark); }
.sys-map__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, .5rem + 2.5vw, 4.5rem);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sys-map__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 4.5rem 1.5rem; }
.sys-map__stage::before { content: ""; position: absolute; inset: 8% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 230, 0, .07), rgba(240, 230, 0, 0)); }
.sys-map__board { position: relative; width: min(100%, calc((100svh - 8.5rem) * 1.2093)); aspect-ratio: 1040 / 860; }
.sys-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sys-ring { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.sys-ring--r2 { stroke: rgba(240, 230, 0, .45); stroke-width: 2; stroke-dasharray: 3 9; }
.sys-ring__ticks { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 10; }
.sys-ring__major { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 16; }
.sys-line { fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 1.6; stroke-linecap: round; transition: stroke .6s, stroke-width .6s; }
.sys-line--r2 { stroke: rgba(240, 230, 0, .3); }
.sys-line--io { stroke: rgba(255, 255, 255, .3); stroke-width: 2.2; }
.sys-line.is-done { stroke: rgba(255, 255, 255, .42); }
.sys-line--r2.is-done { stroke: rgba(240, 230, 0, .6); }
.sys-line.is-on { stroke: var(--yellow); stroke-width: 3; }
.sys-hub__halo { fill: rgba(240, 230, 0, .06); stroke: rgba(240, 230, 0, .18); stroke-width: 1; }
.sys-hub__ticks { fill: none; stroke: rgba(240, 230, 0, .6); stroke-width: 9; transform-origin: 0 0; animation: sys-spin 40s linear infinite; }
.sys-hub__disc { fill: #050505; stroke: var(--yellow); stroke-width: 3.5; }
.sys-hub__t1 { fill: var(--white); font: 500 40px var(--font); letter-spacing: -.01em; text-anchor: middle; }
.sys-hub__t2 { fill: var(--yellow); font: 500 23px var(--font); letter-spacing: .1em; text-anchor: middle; }
.sys-packet { fill: var(--yellow); }
.sys-packet--dim { fill: rgba(255, 255, 255, .7); }
/* Stationen: Gerät auf heller Scheibe, CAD/CAM und Fertigung als Symbol im Ring */
.sys-st { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%; z-index: 2; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.sys-st__disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #fff 0%, #efefed 52%, #cfcfcc 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 14px 30px -12px rgba(0, 0, 0, .8);
  transition: transform .7s var(--ease-out), box-shadow .45s, opacity .6s, filter .6s; }
.sys-st__disc img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.sys-st--io .sys-st__disc { background: #141415; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.sys-st--io svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.sys-st__label { position: absolute; left: 50%; top: calc(100% + .45rem); translate: -50% 4px; z-index: 3; width: max-content; max-width: 15em; text-align: center;
  font-size: clamp(.6875rem, .5rem + .45vw, .9375rem); line-height: 1.2; font-weight: 500; padding: .38em .8em; border-radius: 999px;
  background: rgba(10, 10, 10, .82); color: var(--white); opacity: 0; pointer-events: none; transition: opacity .35s, translate .5s var(--ease-out), background-color .35s, color .35s; }
.sys-st--above .sys-st__label { top: auto; bottom: calc(100% + .45rem); translate: -50% -4px; }
.sys-st:hover .sys-st__disc, .sys-st:focus-visible .sys-st__disc { transform: scale(1.08); }
.sys-st:hover .sys-st__label, .sys-st:focus-visible .sys-st__label { opacity: 1; translate: -50% 0; }
.sys-st:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.sys-map.is-live .sys-st:not(.is-on):not(.is-done) .sys-st__disc { opacity: .32; filter: grayscale(1) brightness(.8); }
.sys-st.is-on { z-index: 4; }
.sys-st.is-on .sys-st__disc { transform: scale(1.16); box-shadow: 0 0 0 3px var(--yellow), 0 0 46px 4px rgba(240, 230, 0, .38), 0 14px 30px -12px rgba(0, 0, 0, .8); }
.sys-st.is-on .sys-st__label { opacity: 1; translate: -50% 0; background: var(--yellow); color: var(--black); }
.sys-st--io.is-on .sys-st__disc { color: var(--yellow); }
.sys-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; margin: 1.1rem 0 0; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.sys-map__legend span::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: .6rem; vertical-align: middle; background: rgba(255, 255, 255, .5); }
.sys-map__legend .is-r2::before { background: repeating-linear-gradient(90deg, var(--yellow) 0 4px, transparent 4px 8px); }
/* Erzählung */
.sys-map__story { padding-block: 22vh 30vh; }
.sys-phase { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-block: 2.5rem; }
.sys-map.is-live .sys-phase { min-height: 78vh; }   /* Platz für die Scroll-Erzählung (ohne Bewegung stehen die Karten dicht) */
.sys-map.is-live .sys-phase { opacity: .28; transition: opacity .6s; }
.sys-map.is-live .sys-phase.is-on { opacity: 1; }
.sys-phase__kicker { margin: 0; color: var(--yellow); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sys-phase__title { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.03em; margin: 0; }
.sys-phase__lead { margin: 0; font-size: var(--fs-lead); line-height: 1.4; color: rgba(255, 255, 255, .78); max-width: 30ch; }
.sys-card { position: relative; padding: 1.25rem 1.4rem 1.15rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  transition: border-color .5s, background-color .5s; scroll-margin-top: 30vh; }
.sys-card.is-hl { border-color: var(--yellow); background: rgba(240, 230, 0, .07); }
.sys-card__title { display: flex; align-items: baseline; gap: .7rem; font-size: var(--fs-h4); line-height: 1.25; margin: 0 0 .45rem; }
.sys-card__num { flex: none; color: var(--yellow); font-size: .75rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.sys-card p { margin: 0 0 .7rem; color: rgba(255, 255, 255, .72); font-size: .9375rem; line-height: 1.55; }
.sys-card p:last-child { margin-bottom: 0; }
.sys-card__links { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.sys-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--white); font-size: .875rem; font-weight: 500; padding-block: .2rem; border-bottom: 1px solid rgba(240, 230, 0, .7); transition: color .25s, border-color .25s; }
.sys-link svg { width: 14px; height: 14px; flex: none; transition: translate .35s var(--ease-out); }
.sys-link:hover { color: var(--yellow); border-color: var(--yellow); }
.sys-link:hover svg { translate: 3px 0; }
/* Hochformat und schmale Fenster: Ring klebt oben, die Erzählung läuft darunter */
@media (max-width: 1023px), (orientation: portrait) and (max-width: 1100px) {
  .sys-map__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sys-map__stage { z-index: 3; height: auto; padding-block: .75rem 1.75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    background: linear-gradient(var(--sys-dark) 82%, rgba(12, 12, 13, 0)); }
  .sys-map.is-entering .sys-map__stage { background: none; }
  .sys-map__board { width: min(100%, calc(46svh * 1.2093)); }
  .sys-map__legend { margin-top: .6rem; font-size: .625rem; }
  .sys-map__story { padding-block: 6vh 34vh; }
  .sys-phase { min-height: 0; padding-block: 3rem; }
  .sys-map.is-live .sys-phase { min-height: 46vh; }
  .sys-card { scroll-margin-top: 62svh; }
  .sys-st__label { font-size: .6875rem; padding: .3em .65em; max-width: 11em; }
}

/* ---------- Wertesystem: vier Viertel eines Rings ---------- */
.sys-values { background: var(--sys-dark); color: var(--white); padding-block: clamp(4rem, 2rem + 6vw, 9rem) clamp(5rem, 3rem + 6vw, 10rem); }
.sys-values__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.sys-values__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.03em; margin: 0; max-width: 13ch; }
.sys-values__intro .rte p, .sys-values__intro p { margin: 0; font-size: var(--fs-lead); line-height: 1.45; color: rgba(255, 255, 255, .78); }
.sys-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, .5rem + 2.5vw, 3rem); }
.sys-value__dial { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 0 auto 1.5rem; width: min(100%, 300px); }
.sys-value__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sys-value__track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.sys-value__ticks { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 7; transform-origin: 0 0; transition: transform 1.6s var(--ease-out); }
.sys-value:hover .sys-value__ticks { transform: rotate(24deg); }
.sys-value__arc { fill: none; stroke: var(--yellow); stroke-width: 3.5; stroke-linecap: round; }
.sys-value__dot { fill: var(--sys-dark); stroke: var(--yellow); stroke-width: 4.5; }
.sys-value__word { position: relative; margin: 0; max-width: 72%; text-align: center; font-size: clamp(1.25rem, .85rem + 1.1vw, 2rem); line-height: 1.1; letter-spacing: -.01em; hyphens: auto; overflow-wrap: anywhere; }
.sys-value__text p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 1rem; line-height: 1.55; }
@media (max-width: 1023px) { .sys-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; } .sys-values__head { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sys-values__grid { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .sys-value { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 1.25rem; align-items: center; }
  .sys-value__dial { margin: 0; }
  .sys-value__word { font-size: 1.0625rem; }
  .sys-value__text p { font-size: .9375rem; }
}

/* ---------- Smart Factory hinter der Iris-Blende ---------- */
.sys-iris { background: var(--sys-dark); color: var(--black); }
.sys-iris__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.js:not(.reduced-motion) .sys-iris__stage { position: sticky; top: 0; }
.sys-iris__media { position: absolute; inset: 0; }
.sys-iris__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; }
.sys-iris__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.sys-iris__ticks { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 10; }
.sys-iris__quad { fill: none; stroke: var(--yellow); stroke-width: 3.5; stroke-linecap: round; }
.sys-iris__content { position: relative; z-index: 2; margin-top: -42svh; padding-bottom: clamp(4rem, 3rem + 6vw, 9rem); }
.js:not(.reduced-motion) .sys-iris__content { margin-top: 30svh; }
.sys-iris__card { max-width: 38rem; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-radius: var(--radius); background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-lg); }
.sys-iris__card h2 { font-size: var(--fs-h2); }
.sys-iris__card p { margin: 0 0 1rem; }

/* ---------- 80 | 60 | 14 | 7 ---------- */
.sys-nums { z-index: 3; background: var(--white); color: var(--black); margin-top: calc(-1 * var(--sheet-r)); border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); }
.sys-nums__head h2 { font-size: var(--fs-h2); max-width: 20ch; margin: 0; }
.sys-nums__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.sys-num { padding-inline: clamp(.75rem, .25rem + 1.6vw, 2.25rem); border-left: 2px solid var(--black); }
.sys-num:first-child { padding-left: 0; border-left: 0; }
.sys-num__v { display: block; font-size: clamp(3.75rem, 1.5rem + 8.5vw, 10.5rem); font-weight: 500; line-height: .92; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sys-num__l { display: block; margin-top: .9rem; padding-top: .7rem; border-top: 4px solid var(--yellow); width: fit-content; max-width: 100%; font-size: var(--fs-h4); line-height: 1.25; color: var(--gray-700); }
.sys-nums__text { max-width: 46rem; }
.sys-nums__text p { font-size: var(--fs-lead); line-height: 1.45; }
@media (max-width: 760px) {
  .sys-nums__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .sys-num:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.sys-st--left .sys-st__label { left: auto; top: 50%; right: calc(100% + .45rem); translate: 4px -50%; }
.sys-st--left:hover .sys-st__label, .sys-st--left:focus-visible .sys-st__label, .sys-st--left.is-on .sys-st__label { translate: 0 -50%; }
@media (max-width: 600px) { .sys-st__label { display: none; } }   /* Handy: Namen stehen in den Karten direkt darunter */
.sys-map__story { transition: opacity .7s var(--ease-out); }
.sys-map.is-entering .sys-map__story { opacity: 0; }   /* erst lesen, wenn der dunkle Kreis den Bildschirm füllt */

/* ---------- Produkt-Teaser nach dem Wertesystem (einige Sprachfassungen) ---------- */
.sys-teasers { z-index: 3; background: var(--white); color: var(--black); margin-top: calc(-1 * var(--sheet-r)); border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.sys-teasers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.25rem, .5rem + 2.5vw, 3rem); }
.sys-teaser { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--gray-50); }
.sys-teaser__media { aspect-ratio: 16 / 10; overflow: hidden; }
.sys-teaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.sys-teaser:hover .sys-teaser__media img { transform: scale(1.04); }
.sys-teaser__body { padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.sys-teaser__body h3 { font-size: var(--fs-h3); }
.sys-teaser__body p { margin: 0 0 1rem; }
.sys-map__legend { transition: opacity .5s; }
.sys-map.is-entering .sys-map__legend { opacity: 0; }