/* FLAT-VERSION: Klon von Final/ ohne Glas, ohne Verlaeufe, ohne Leuchten.
   Warm (#F7732E) nur als volle, flache Flaeche. Overrides am Dateiende (FLAT-OVERRIDES). */
/* ==========================================================================
   GLASPHERA – Prototype
   ========================================================================== */

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

:root {
  /* Brand */
  --navy-950: #001226;
  --navy-900: #001B38;
  --navy-800: #002E5D;
  --blue-700: #03468F;
  --blue-600: #0A3D91;
  --accent: #1693D1;
  --ice: #ADD1E3;
  --green: #406924;
  --green-light: #8DBA5E;

  /* Warm-Akzent: hebt wichtige Elemente hervor - als Lichtschein ("warm hinterleuchtetes Glas"), nicht als Kontur */
  --warm: #F7732E;
  --warm-rgb: 247, 115, 46;                           /* fuer rgba(var(--warm-rgb), x) */
  --warm-light-rgb: 255, 184, 128;                    /* heller Kern des Lichts */
  --warm-glow: transparent;
  /* Warmer Lichtschein, der von unten durch das Glas scheint */
  --warm-backlight: linear-gradient(var(--warm), var(--warm));

  /* Neutral */
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-soft: #F5F5F5;
  --bg-warm: #F0F2E4;
  --grey: #90908C;
  --grey-dark: #505050;
  --text: #0C1B2C;
  --line: rgba(0, 46, 93, 0.12);
  --line-light: rgba(255, 255, 255, 0.14);

  /* Gradients */
  --grad-brand: linear-gradient(var(--accent), var(--accent));
  --grad-ice: linear-gradient(var(--accent), var(--accent));
  /* Grosse Flaechen-Verlaeufe fuer dunkle Sektionen (keine einzelnen Blur-Kreise mehr) */
  --grad-dark: linear-gradient(var(--navy-900), var(--navy-900));

  /* Noise fuer dunkle Sektionen: SVG-Rauschen als kachelbare Hintergrund-Ebene.
     Liegt HINTER Glas-Kacheln -> deren backdrop-filter zeichnet es weich (Kontrast Korn vs. Glas). */
  /* feComponentTransfer zieht den Kontrast hoch (slope/intercept) -> echte helle UND dunkle Koerner; opacity = Staerke */
  --noise: none;

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-hero: clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem);
  --fs-statement: clamp(1.75rem, 1rem + 3vw, 3.75rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;
  --section: clamp(5rem, 3rem + 7vw, 10rem);

  /* Layout */
  --container: 82rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h: 5rem;                                   /* Gesamtplatz oben (Abstand + Leiste) */
  --nav-top: var(--s-4);                              /* Abstand der schwebenden Leiste zum Rand */
  --nav-h: calc(var(--header-h) - var(--nav-top));    /* Höhe der Leiste selbst */

  /* Shape */
  --r-sm: 0.375rem;
  --r-md: 0.5rem;
  --r-lg: 0.75rem;   /* Kacheln, Bilder, Karten - bewusst knapp gerundet */
  --r-pill: 62.5rem;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  /* Sechseck mit abgerundeten Ecken (wie im Logo) als Maske - Seitenverhaeltnis 1.1 : 1 */
  --hex-round: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100' preserveAspectRatio='none'%3E%3Cpath d='M37.50 3.00 L72.50 3.00 Q82.50 3.00 87.55 11.63 L104.95 41.37 Q110.00 50.00 104.95 58.63 L87.55 88.37 Q82.50 97.00 72.50 97.00 L37.50 97.00 Q27.50 97.00 22.45 88.37 L5.05 58.63 Q0.00 50.00 5.05 41.37 L22.45 11.63 Q27.50 3.00 37.50 3.00Z'/%3E%3C/svg%3E");

  /* Effects */
  --shadow-sm: 0 0 0 0 transparent;   /* flach: kein Schatten (nicht "none", damit Schatten-Listen gueltig bleiben) */
  --shadow-md: 0 0 0 0 transparent;   /* flach: kein Schatten (nicht "none", damit Schatten-Listen gueltig bleiben) */
  --shadow-lg: 0 0 0 0 transparent;   /* flach: kein Schatten (nicht "none", damit Schatten-Listen gueltig bleiben) */
  --glass: rgba(255, 255, 255, 0.06);
  --blur: none;
  /* Echtes Glas: keine Fuellfarbe. --glass-fx wird per JS (glass.js) auf einen Brechungs-Filter gesetzt,
     Fallback (Safari/Firefox) = nur leichter Blur. */
  /* Ganz sanfter warmer Schein von unten links fuer dunkle Sektionen */
  --warm-ambient: none;
  --glass-fallback: none;
  /* Ganz leichte Toenung im Glas (kuehles Weiss) */
  --glass-tint: rgba(255, 255, 255, 0.06);
  /* Glaskante: Lichtreflex oben, feiner Rand, Schatten unten -> Dicke/Tiefe ohne eigene Farbe */
  --glass-rim: 0 0 0 0 transparent;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.5s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }   /* ausgeblendete Sektionen bleiben im Code, werden aber nie angezeigt */
sup { font-size: 0.45em; vertical-align: super; font-weight: 400; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typo ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-700); margin-bottom: var(--s-5);
}
/* Strich vor Subheadlines entfernt (frueher: .eyebrow::before mit 1.5rem breiter Linie) */
.eyebrow--light { color: var(--ice); }
.eyebrow--green { color: var(--green); }
.eyebrow__dot { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: rgb(var(--warm-light-rgb)); box-shadow: 0 0 0.5rem 0.1rem rgba(var(--warm-rgb), 0.8); }

.h2 { font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; color: var(--navy-800); }
.h2--light { color: var(--white); }
.muted { color: var(--grey); font-weight: 500; }
.lead { font-size: var(--fs-md); color: var(--grey-dark); max-width: 36rem; margin-top: var(--s-5); }
.lead--light { color: rgba(255, 255, 255, 0.72); }

.section-head { margin-bottom: var(--s-8); }
.section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; }
.section-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- Buttons ----------
   Form: liegendes Sechseck mit abgerundeten Ecken (wie die Hexagon-Bilder der Product Range).
   Aufbau: ::before = sichtbare Flaeche (per Maske zum Sechseck geschnitten),
           ::after  = weicher Lichtschein darunter (bleibt ungeschnitten, sonst wuerde die Maske ihn kappen).
   Die Maske besteht aus 3 Teilen: linke Spitze + Mittelstueck + rechte Spitze. So bleiben die
   Ecken bei jeder Button-Breite gleich rund und werden nicht verzerrt. */
:root {
  --hex-cap-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath d='M40 0 L38.87 0 Q28.87 0 23.87 8.66 L5 41.34 Q0 50 5 58.66 L23.87 91.34 Q28.87 100 38.87 100 L40 100Z'/%3E%3C/svg%3E");
  --hex-cap-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath d='M0 0 L1.13 0 Q11.13 0 16.13 8.66 L35 41.34 Q40 50 35 58.66 L16.13 91.34 Q11.13 100 1.13 100 L0 100Z'/%3E%3C/svg%3E");
}
.btn {
  --btn-h: 3.25rem;
  --btn-fill: transparent;
  --btn-glow: transparent;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--btn-h); padding-inline: calc(var(--s-6) + var(--btn-h) * 0.14); border: 0; background: none;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
  transition: transform var(--t), color var(--t);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  -webkit-mask: var(--hex-cap-l) left center / auto 100% no-repeat, var(--hex-cap-r) right center / auto 100% no-repeat,
    linear-gradient(#000, #000) center / calc(100% - var(--btn-h) * 0.8 + 2px) 100% no-repeat;
  mask: var(--hex-cap-l) left center / auto 100% no-repeat, var(--hex-cap-r) right center / auto 100% no-repeat,
    linear-gradient(#000, #000) center / calc(100% - var(--btn-h) * 0.8 + 2px) 100% no-repeat;
  transition: background var(--t), background-size var(--t), background-position var(--t);
}
.btn::after {
  content: ""; position: absolute; z-index: -2; left: 12%; right: 12%; top: 55%; height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, var(--btn-glow), transparent 70%);
  filter: blur(0.6rem); opacity: 0.8; transition: opacity var(--t), transform var(--t); pointer-events: none;
}
.btn:hover { transform: translateY(-0.125rem); }
.btn:hover::after { opacity: 1; transform: translateY(0.15rem) scaleX(1.08); }
.btn__arrow { transition: transform var(--t); }
.btn:hover .btn__arrow { transform: translateX(0.25rem); }

/* feine Glaskante oben als Hintergrund-Ebene (folgt der flachen Oberkante, wird von der Maske mitgeschnitten) */
.btn { --btn-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 0.0625rem, rgba(255, 255, 255, 0) 0.0625rem); }

.btn--primary { color: var(--white); --btn-fill: var(--btn-rim), var(--accent); --btn-glow: rgba(22, 147, 209, 0.7); }
.btn--primary:hover { --btn-fill: var(--btn-rim), #1AA3E6; }
.btn--ghost, .btn--glass { color: var(--white); --btn-fill: var(--btn-rim), rgba(255, 255, 255, 0.12); }
.btn--ghost::before, .btn--glass::before { backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn--ghost:hover, .btn--glass:hover { --btn-fill: var(--btn-rim), rgba(255, 255, 255, 0.2); }
.btn--glass { --btn-h: 2.75rem; padding-inline: calc(var(--s-5) + var(--btn-h) * 0.14); }
.btn--glass:hover { --btn-fill: var(--btn-rim), var(--accent); }

/* Warm-Highlight: Glas, das von unten warm hinterleuchtet wird */
.btn--warm {
  color: var(--white);
  --btn-fill: var(--btn-rim),
    linear-gradient(0deg, rgba(var(--warm-light-rgb), 0.55) 0 0.0625rem, rgba(var(--warm-light-rgb), 0) 0.0625rem),   /* warmes Licht an der Unterkante */
    var(--warm-backlight), var(--warm-base, rgba(255, 255, 255, 0.06));
  --btn-glow: rgba(var(--warm-rgb), 0.75);
}
.btn--warm::before {
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 50% 0, 0 0;
}
/* Hover: Licht wird staerker und steigt etwas hoch */
.btn--warm:hover::before { background-size: 100% 100%, 100% 100%, 100% 140%, 100% 100%; background-position: 0 0, 0 0, 50% 100%, 0 0; }
.btn--warm:hover { --btn-glow: rgba(var(--warm-rgb), 0.95); }
/* Variante fuer helle Hintergruende: dunkles Navy-Glas statt transparentem Glas */
.btn--warm-solid { --warm-base: var(--navy-800); }
.btn--dark { color: var(--white); --btn-fill: var(--btn-rim), var(--navy-800); --btn-glow: rgba(0, 46, 93, 0.45); }
.btn--dark:hover { --btn-fill: var(--btn-rim), var(--blue-700); }
.btn--text { padding-inline: var(--s-2); color: var(--navy-800); }
.btn--text::before, .btn--text::after { content: none; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
/* Schwebende Glas-Leiste: Header ist nur der unsichtbare Rahmen, .header__inner die sichtbare Leiste */
.header {
  position: fixed; inset: var(--nav-top) 0 auto; z-index: 50; height: var(--nav-h);
  pointer-events: none; transition: transform var(--t);
}
.header.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 1rem)); }
.header__inner {
  position: relative; isolation: isolate; pointer-events: auto;
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter));
  height: 100%; padding-inline: var(--s-5) var(--s-3);
  display: flex; align-items: center; justify-content: space-between;
}
.header__inner {
  --cta-h: 2.75rem;
  /* Abstand oben/unten = (Leiste - Button) / 2. Beide Schraegen haben 60 Grad -> damit der Abstand
     senkrecht zur Schraege gleich gross ist, liegt die Button-Spitze um diesen Wert / sin(60) = x 1.1547 innen. */
  padding-inline: calc(var(--s-5) + var(--nav-h) * 0.22) calc((var(--nav-h) - var(--cta-h)) / 2 * 1.1547);
}
/* Form wie die Buttons: liegendes Sechseck. glass.js rechnet die Brechung passend dazu (data-glass-shape="hex"). */
/* Glas-Flaeche als Pseudo-Element, damit das mobile Menue (position: fixed) nicht eingesperrt wird */
.header__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback));
  /* feine Glaskante auch an den schraegen Spitzen (SVG-Kontur), dazu Toenung */
  --nav-edge-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath d='M40 0 L38.87 0 Q28.87 0 23.87 8.66 L5 41.34 Q0 50 5 58.66 L23.87 91.34 Q28.87 100 38.87 100 L40 100' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --nav-edge-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath d='M0 0 L1.13 0 Q11.13 0 16.13 8.66 L35 41.34 Q40 50 35 58.66 L16.13 91.34 Q11.13 100 1.13 100 L0 100' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background: var(--nav-edge-l) left center / auto 100% no-repeat, var(--nav-edge-r) right center / auto 100% no-repeat, var(--glass-tint);
  box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.18), inset 0 -0.0625rem 0 rgba(255, 255, 255, 0.06);
  -webkit-mask: var(--hex-cap-l) left center / auto 100% no-repeat, var(--hex-cap-r) right center / auto 100% no-repeat,
    linear-gradient(#000, #000) center / calc(100% - var(--nav-h) * 0.8 + 2px) 100% no-repeat;
  mask: var(--hex-cap-l) left center / auto 100% no-repeat, var(--hex-cap-r) right center / auto 100% no-repeat,
    linear-gradient(#000, #000) center / calc(100% - var(--nav-h) * 0.8 + 2px) 100% no-repeat;
}
/* Schatten unter der Leiste als eigene, ungeschnittene Ebene (die Maske wuerde einen box-shadow kappen) */
.header__inner::after {
  content: ""; position: absolute; z-index: -2; left: 6%; right: 6%; top: 45%; height: 80%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 7, 15, 0.45), transparent 75%); filter: blur(0.9rem);
}

/* Ueber hellen Sektionen: Schrift/Logo dunkel statt weiss (Glas bleibt farblos) - gesteuert per main.js */
.header .brand, .header .nav__link, .header .burger span { transition: color var(--t), background var(--t), filter var(--t); }
.header.is-light .brand { color: var(--navy-800); }
.header.is-light .brand__mark { filter: none; }
.header.is-light .nav__link { color: rgba(0, 46, 93, 0.75); }
.header.is-light .nav__link:hover, .header.is-light .nav__link.is-current { color: var(--navy-800); }
.header.is-light .burger span { background: var(--navy-800); }
.header.is-light .nav__cta { --warm-base: var(--navy-800); }
.header.is-light .header__inner::before {
  --nav-edge-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath d='M40 0 L38.87 0 Q28.87 0 23.87 8.66 L5 41.34 Q0 50 5 58.66 L23.87 91.34 Q28.87 100 38.87 100 L40 100' fill='none' stroke='rgba(0,46,93,0.16)' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --nav-edge-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='100' viewBox='0 0 40 100'%3E%3Cpath d='M0 0 L1.13 0 Q11.13 0 16.13 8.66 L35 41.34 Q40 50 35 58.66 L16.13 91.34 Q11.13 100 1.13 100 L0 100' fill='none' stroke='rgba(0,46,93,0.16)' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background: var(--nav-edge-l) left center / auto 100% no-repeat, var(--nav-edge-r) right center / auto 100% no-repeat, rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.9), inset 0 0.0625rem 0 0.0625rem rgba(0, 46, 93, 0), inset 0 -0.0625rem 0 rgba(0, 46, 93, 0.12);
}
.header.is-light .header__inner::after { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 27, 56, 0.22), transparent 75%); }
body.nav-open .header.is-light .brand { color: var(--white); }
body.nav-open .header.is-light .brand__mark { filter: brightness(0) invert(1); }
body.nav-open .header.is-light .nav__link { color: rgba(255, 255, 255, 0.78); }
body.nav-open .header.is-light .burger span { background: var(--white); }

.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--white); }
.brand__mark { width: 2.25rem; height: auto; filter: brightness(0) invert(1); }
.brand__word { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.01em; }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__link { position: relative; font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.78); transition: color var(--t); }
.nav__link--static { cursor: default; }   /* Oberpunkt ohne eigene Seite - nur Dropdown */
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 0.125rem; border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgb(var(--warm-light-rgb)) 50%, transparent); box-shadow: 0 0 0.6rem rgba(var(--warm-rgb), 0.8);
  transform: scaleX(0); transition: transform var(--t);
}
.nav__link:hover, .nav__link.is-current { color: var(--white); }
.nav__cta { --btn-h: var(--cta-h, 2.75rem); padding-inline: calc(var(--s-5) + var(--btn-h) * 0.14); }
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); }
/* Sprachumschalter EN / DE (js/i18n.js) */
.lang { position: relative; display: flex; align-items: center; gap: 0.1rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.35); }
.lang button { padding: 0.35rem 0.3rem; border: 0; background: none; font: inherit; letter-spacing: inherit; color: rgba(255, 255, 255, 0.55); cursor: pointer; transition: color var(--t); }
.lang button:hover, .lang button.is-active { color: var(--white); }
.header.is-light .lang { color: rgba(0, 46, 93, 0.3); }
.header.is-light .lang button { color: rgba(0, 46, 93, 0.55); }
.header.is-light .lang button:hover, .header.is-light .lang button.is-active { color: var(--navy-800); }
body.nav-open .header.is-light .lang button { color: rgba(255, 255, 255, 0.55); }
body.nav-open .header.is-light .lang button.is-active { color: var(--white); }

.burger { display: none; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer; position: relative; z-index: 2; }
.burger span { position: absolute; left: 0.6rem; right: 0.6rem; height: 0.125rem; background: var(--white); border-radius: var(--r-pill); transition: transform var(--t); }
.burger span:first-child { top: 1.05rem; }
.burger span:last-child { top: 1.55rem; }
.nav-open .burger span:first-child { transform: translateY(0.25rem) rotate(45deg); }
.nav-open .burger span:last-child { transform: translateY(-0.25rem) rotate(-45deg); }

/* ---------- Noise-Mischmodus ----------
   Die Noise-Ebene (immer die oberste Hintergrund-Ebene) wird per "overlay" verrechnet:
   helle Koerner hellen auf, dunkle dunkeln ab -> Kontrast steigt, Grundhelligkeit bleibt.
   Die folgenden "normal" gelten fuer die Verlaufs-Ebenen darunter. */
.hero, .process__overlay, .numbers, .global, .cta, .footer, .app-hero, .matrix, .page-hero, .page-hero__shade, .is-dark, .band__shade, .cta__shade,
.matrix th:first-child, .matrix td:first-child { background-blend-mode: overlay, normal, normal, normal, normal; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  background: var(--noise), var(--warm-ambient), var(--grad-dark); color: var(--white); overflow: hidden; isolation: isolate;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__content { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-9); pointer-events: none; }
.hero__content > * { pointer-events: auto; }
.hero__title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; max-width: 14ch; }
.hero__title .line { display: block; }
.hero__title .line--accent {
  background: linear-gradient(90deg, var(--white) 0%, var(--ice) 45%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Verlauf wird nur in der Zeilenbox gemalt -> Box fuer Unterlaengen (g, y) nach unten verlaengern, Layout bleibt gleich */
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}
.hero__lead { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.72); max-width: 32rem; margin-top: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

.hero__facts {
  position: absolute; left: 50%; bottom: var(--s-6); translate: -50% 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
}
.fact { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback)); background: var(--glass-tint); box-shadow: var(--glass-rim); }
.fact strong { display: block; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; }
.fact span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.1em; }

.scroll-hint { position: absolute; right: var(--gutter); bottom: 9rem; width: 1.5rem; height: 2.5rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.4); }
.scroll-hint span { position: absolute; left: 50%; top: 0.5rem; width: 0.25rem; height: 0.5rem; margin-left: -0.125rem; border-radius: var(--r-pill); background: var(--white); animation: scrollHint 1.8s infinite; }
@keyframes scrollHint { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(1rem); } }

/* ---------- Statement ---------- */
.statement { padding-block: var(--section); background: var(--bg); }
.statement__text { font-size: var(--fs-statement); line-height: 1.15; letter-spacing: -0.035em; font-weight: 600; max-width: 22ch; max-width: 58rem; }
.statement__text .w { color: rgba(0, 46, 93, 0.14); transition: color 0.4s ease; }
.statement__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); max-width: 58rem; margin-top: var(--s-8); }
.statement__body.content__text p + p { margin-top: 0; }
.statement__text .w.is-on { color: var(--navy-800); }
.statement__text .w.is-on.is-key { color: var(--accent); }

/* ---------- Process ---------- */
.process { position: relative; color: var(--white); padding-block: var(--section); overflow: hidden; isolation: isolate; }
.process__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.process__overlay { position: absolute; inset: 0; z-index: -1; background: var(--noise), var(--warm-ambient), linear-gradient(180deg, rgba(0, 18, 38, 0.92) 0%, rgba(0, 46, 93, 0.65) 50%, rgba(0, 18, 38, 0.95) 100%); }
.process__head { max-width: 40rem; }
.process__lead { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-md); margin-top: var(--s-5); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-9); counter-reset: s; }
.step {
  position: relative; padding: var(--s-6) var(--s-5) var(--s-7); border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback));
  background: var(--glass-tint); box-shadow: var(--glass-rim); transition: transform var(--t);
}
.step:hover { transform: translateY(-0.5rem); }
/* Hover: Kachel wird von unten warm hinterleuchtet (eigene Ebene, damit die Deckkraft weich animiert) */
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 115%, rgba(var(--warm-light-rgb), 0.55) 0%, rgba(var(--warm-rgb), 0.3) 40%, transparent 75%);
  opacity: 0; transition: opacity var(--t);
}
.step:hover::before { opacity: 1; }
.step::after { content: ""; position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); height: 0.125rem; background: var(--grad-ice); transform-origin: left; transform: scaleX(0.15); transition: transform 0.8s var(--ease); }
.step:hover::after { transform: scaleX(1); }
.step__num {
  display: inline-block; font-size: clamp(2.75rem, 2rem + 2vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  /* warmer Verlauf als Textfuellung + leichtes Gluehen (hinterleuchtetes Glas) */
  background: linear-gradient(180deg, rgb(var(--warm-light-rgb)) 0%, var(--warm) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 0.9rem rgba(var(--warm-rgb), 0.45));
}
.step h3 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); font-weight: 600; }
.step p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); }

/* ---------- Products / Sizer ---------- */
.products { padding-block: var(--section); background: var(--bg-soft); overflow: hidden; }
.sizer__scale { position: relative; margin-bottom: var(--s-8); }
.sizer__track { position: absolute; left: 0; right: 0; top: 50%; height: 0.125rem; background: var(--line); border-radius: var(--r-pill); }
.sizer__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--grad-brand); border-radius: inherit; transition: width 0.8s var(--ease); }
.sizer__dots { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 6rem; }
.sizer__dot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 5rem; min-width: 4.5rem; background: none; border: 0; cursor: pointer;
}
.sizer__bead {
  width: var(--size); height: var(--size); border-radius: 50%;
  /* Hellere Glasperle: kuehles Weiss statt Grau, weicher Schatten - Kugel-Look bleibt durch Verlauf + Innenschatten */
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #F4F7FA 24%, #D5DFE7 62%, #B4C3CF 100%);
  box-shadow: 0 0.35rem 0.8rem -0.3rem rgba(0, 27, 56, 0.18), inset -0.15rem -0.2rem 0.4rem rgba(0, 46, 93, 0.12);
  transition: transform var(--t), box-shadow var(--t);
}
.sizer__dot:hover .sizer__bead { transform: scale(1.12); }
/* Aktive Perle: warm hinterleuchtet statt Ring */
.sizer__dot.is-active .sizer__bead {
  transform: scale(1.12);
  box-shadow: 0 0 0 0.35rem rgba(var(--warm-rgb), 0.12), 0 0 1.5rem 0.35rem rgba(var(--warm-rgb), 0.5), inset -0.2rem -0.25rem 0.5rem rgba(var(--warm-rgb), 0.35);
}
.sizer__dot-label { position: absolute; top: calc(100% + 0.25rem); font-size: var(--fs-xs); font-weight: 600; color: var(--grey); white-space: nowrap; transition: color var(--t); }
.sizer__dot.is-active .sizer__dot-label { color: var(--navy-800); }

.sizer__stage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; margin-top: var(--s-9); }
.sizer__media { position: relative; }
.sizer__hex { aspect-ratio: 1.1 / 1; -webkit-mask: var(--hex-round) center / 100% 100% no-repeat; mask: var(--hex-round) center / 100% 100% no-repeat; overflow: hidden; background: var(--navy-800); box-shadow: var(--shadow-lg); }
.sizer__hex img { width: 100%; height: 100%; object-fit: cover; transform-origin: 15% 12%; transform: scale(1); transition: opacity 0.4s ease, transform 1.4s var(--ease); }
.sizer__hex img.is-swapping { opacity: 0; transform: scale(1.08); }
.sizer__media { cursor: zoom-in; }   /* Standard: ganzes Bild mit Muenze, Hover: Nahaufnahme der Koerner */
.sizer__media:hover .sizer__hex img, .sizer__media.is-compare .sizer__hex img { transform: scale(2.4); }
.sizer__media:hover, .sizer__media.is-compare { cursor: zoom-out; }
.sizer__hint { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: rgba(0, 18, 38, 0.6); backdrop-filter: var(--blur); color: var(--white); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; transition: opacity var(--t); pointer-events: none; }
.sizer__media:hover .sizer__hint, .sizer__media.is-compare .sizer__hint { opacity: 0; }
.sizer__badge {
  position: absolute; top: 12%; right: 2%; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--white); color: var(--navy-800); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: var(--shadow-md);
}
.sizer__family { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.sizer__name { font-size: clamp(3rem, 2rem + 5vw, 6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--navy-800); margin: var(--s-2) 0 var(--s-5); }
.sizer__text { color: var(--grey-dark); max-width: 30rem; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s-7); border-top: 0.0625rem solid var(--line); }
.specs div { padding: var(--s-5) var(--s-4) 0 0; }
.specs div + div { padding-left: var(--s-4); border-left: 0.0625rem solid var(--line); }
.specs dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); }
.specs dd { font-size: var(--fs-lg); font-weight: 600; color: var(--navy-800); letter-spacing: -0.02em; }
.sizer__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* ---------- Numbers ---------- */
.numbers {
  padding-block: var(--section); color: var(--white); position: relative; overflow: hidden;
  background:
    var(--noise),
    var(--warm-ambient),
    radial-gradient(85% 120% at 100% 0%, rgba(22, 147, 209, 0.42) 0%, rgba(22, 147, 209, 0.12) 45%, rgba(22, 147, 209, 0) 75%),
    var(--navy-950);
}
.numbers .container { position: relative; z-index: 1; }
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0.0625rem solid var(--line-light); }
.num { padding: var(--s-7) var(--s-5) 0 0; }
.num + .num { padding-left: var(--s-5); border-left: 0.0625rem solid var(--line-light); }
.num strong { display: flex; align-items: baseline; gap: var(--s-1); font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.num small { font-size: 0.45em; color: rgb(var(--warm-light-rgb)); text-shadow: 0 0 1rem rgba(var(--warm-rgb), 0.7); letter-spacing: 0; }
.num > span { display: block; margin-top: var(--s-4); color: rgba(255, 255, 255, 0.6); font-size: var(--fs-sm); max-width: 14rem; }

/* ---------- Apps teaser ---------- */
.apps-teaser { padding-block: var(--section) var(--s-8); overflow: hidden; }
.tilt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); perspective: 75rem; }
.tilt-card {
  position: relative; aspect-ratio: 3 / 4.2; border-radius: var(--r-lg); overflow: hidden; color: var(--white);
  transform-style: preserve-3d; transition: transform 0.3s ease-out, box-shadow var(--t); box-shadow: var(--shadow-md);
}
.tilt-card:hover { box-shadow: var(--shadow-lg); }
.tilt-card__img { position: absolute; inset: -1rem; background-size: cover; background-position: center; transition: transform 1s var(--ease); }
.tilt-card:hover .tilt-card__img { transform: scale(1.08); }
.tilt-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 18, 38, 0) 30%, rgba(0, 18, 38, 0.92) 100%); }
/* Hover: warmer Lichtschein faellt unter der Karte aus */
.tilt-card:hover { box-shadow: var(--shadow-lg), 0 1.5rem 3rem -1.5rem rgba(var(--warm-rgb), 0.6); }
.tilt-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--s-5); transform: translateZ(3rem); }
.tilt-card__body span { display: none; }   /* Nummern 01-04 ausgeblendet */
.tilt-card__body h3 { font-size: var(--fs-lg); line-height: 1.15; margin: var(--s-2) 0; letter-spacing: -0.02em; }
.tilt-card__body p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }

.marquee { margin-top: var(--s-9); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: var(--s-7); width: max-content; animation: marquee 50s linear infinite; }
.marquee__track span { font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem); font-weight: 700; letter-spacing: -0.04em; color: rgba(0, 46, 93, 0.12); white-space: nowrap; transition: color var(--t); }
.marquee__track span:hover { color: var(--navy-800); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sustainability ---------- */
.sustain { padding-block: var(--section); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%); }
.sustain__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-9); align-items: center; }
.sustain__visual { position: relative; max-width: 34rem; margin-inline: auto; }
.sustain__visual img { width: 100%; mix-blend-mode: multiply; }
.sustain__visual::before, .sustain__visual::after {
  content: ""; position: absolute; inset: 2%; border-radius: 50%;
  border: 0.125rem dashed rgba(64, 105, 36, 0.35); animation: spinSlow 40s linear infinite;
}
.sustain__visual::after { inset: -4%; border: 0.0625rem solid rgba(64, 105, 36, 0.15); border-top-color: var(--green); animation-duration: 6s; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.sustain__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.sustain__kpis div { padding: var(--s-5); border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-sm); }
.sustain__kpis strong { display: block; font-size: var(--fs-xl); letter-spacing: -0.03em; color: var(--green); line-height: 1.1; }
.sustain__kpis span { font-size: var(--fs-sm); color: var(--grey-dark); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.chips span { padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--green); box-shadow: inset 0 0 0 0.0625rem rgba(64, 105, 36, 0.3); transition: background var(--t), color var(--t); }
.chips span:hover { background: var(--green); color: var(--white); }

/* ---------- Global ---------- */
.global { padding-block: var(--section); background: var(--noise), var(--warm-ambient), var(--grad-dark); color: var(--white); overflow: hidden; }
.global__inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-8); align-items: center; }
.locations { display: grid; gap: var(--s-3); margin-top: var(--s-7); }
/* Glas-Kacheln statt Trennlinien (gleiches Glas wie .step / .fact) */
.locations li, .value {
  position: relative; border-radius: var(--r-md);
  -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback));
  background: var(--glass-tint); box-shadow: var(--glass-rim);
}
/* Warme Unterleuchtung als eigene Ebene, damit die Deckkraft weich animiert */
.locations li::before, .value::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 130%, rgba(var(--warm-light-rgb), 0.5) 0%, rgba(var(--warm-rgb), 0.28) 40%, transparent 75%);
  opacity: 0; transition: opacity var(--t);
}
.locations li { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); cursor: pointer; transition: transform var(--t); }
.locations li > div { opacity: 0.6; transition: opacity var(--t); }
.locations li:hover > div, .locations li.is-active > div { opacity: 1; }
.locations li:hover::before { opacity: 0.35; }
.locations li.is-active::before { opacity: 1; }
.locations li.is-active { box-shadow: var(--glass-rim), inset 0 -0.0625rem 0 rgba(var(--warm-light-rgb), 0.45); }
.locations strong { display: block; font-weight: 600; }
.locations small { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-sm); }
.locations__dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0.3rem rgba(22, 147, 209, 0.25); flex-shrink: 0; }
/* Aktiver Standort: gluehender Lichtpunkt, der warm atmet */
.locations li.is-active .locations__dot {
  background: radial-gradient(circle at 40% 35%, rgb(var(--warm-light-rgb)) 0%, var(--warm) 70%);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0.5rem 0.1rem rgba(var(--warm-rgb), 0.55), 0 0 1.5rem 0.25rem rgba(var(--warm-rgb), 0.15); }
  50%      { box-shadow: 0 0 0.75rem 0.25rem rgba(var(--warm-rgb), 0.75), 0 0 2.25rem 0.75rem rgba(var(--warm-rgb), 0.3); }
}
.global__globe { position: relative; aspect-ratio: 1; }
/* Canvas ragt rundum 30 % ueber den Container hinaus -> Schein, Boegen und Label werden nicht abgeschnitten.
   Klicks/Ziehen laufen ueber den Container, damit das grosse Canvas den Text daneben nicht blockiert. */
.global__globe { cursor: grab; touch-action: pan-y; }
.global__globe:active { cursor: grabbing; }
.global__globe canvas { position: absolute; inset: -30%; width: 160%; height: 160%; max-width: none; pointer-events: none; }
.global__hint { position: absolute; bottom: 0; left: 50%; translate: -50% 0; font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }

/* ---------- Company / Org ---------- */
.company { padding-block: var(--section); background: var(--bg); }
.org { display: flex; flex-direction: column; align-items: center; }
.org__node {
  position: relative; padding: var(--s-5) var(--s-6); border-radius: var(--r-md); background: var(--white);
  box-shadow: var(--shadow-md), inset 0 0 0 0.0625rem var(--line); text-align: center; min-width: 16rem;
  transition: transform var(--t);
}
.org__node:hover { transform: translateY(-0.25rem); }
.org__node strong { display: block; font-size: var(--fs-md); color: var(--navy-800); }
.org__node small { color: var(--grey); font-size: var(--fs-sm); }
.org__node--top { background: var(--navy-800); }
.org__node--top strong { color: var(--white); }
.org__label { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: var(--s-1); }
.org__line { width: 0.125rem; height: 3rem; background: var(--blue-700); }
.org__row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); padding-top: 3rem; width: 100%; max-width: 64rem; }
.org__row::before { content: ""; position: absolute; top: 0; left: calc((100% - 2 * var(--s-5)) / 6); right: calc((100% - 2 * var(--s-5)) / 6); height: 0.125rem; background: var(--blue-700); }
.org__row .org__node::before { content: ""; position: absolute; left: 50%; top: -3rem; width: 0.125rem; height: 3rem; margin-left: -0.0625rem; background: var(--blue-700); }

/* ---------- News ---------- */
.news { padding-block: 0 var(--section); background: var(--bg); }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.news-card { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); transition: transform var(--t), box-shadow var(--t); cursor: pointer; }
.news-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-md); }
.news-card__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.news-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.news-card__meta { font-size: var(--fs-xs); color: var(--accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.news-card h3 { font-size: var(--fs-md); line-height: 1.3; margin: var(--s-2) 0; color: var(--navy-800); }
.news-card p { font-size: var(--fs-sm); color: var(--grey-dark); }

/* ---------- CTA ---------- */
.cta { position: relative; padding-block: var(--section); color: var(--white); overflow: hidden; isolation: isolate;
  background: var(--noise), var(--warm-ambient),
    radial-gradient(60% 90% at 80% 45%, rgba(22, 147, 209, 0.28) 0%, rgba(22, 147, 209, 0.06) 50%, rgba(22, 147, 209, 0) 75%),
    radial-gradient(120% 130% at 82% 40%, var(--navy-800) 0%, var(--navy-950) 55%, #00070F 100%); }
.cta__bg { position: absolute; inset: 0; z-index: -1; background: url(../assets/img/TeamBg.webp) center / cover; opacity: 0.35; mix-blend-mode: overlay; filter: grayscale(1); }
/* Variante mit Formular (Startseite): weisser Hintergrund, Bild gespiegelt auf der Formular-Seite */
.cta--form { color: var(--text); background: var(--bg); }
.cta--form .cta__bg {
  left: 40%; opacity: 1; mix-blend-mode: normal; filter: none;
  background: url(../assets/img/TeamBg.webp) left center / cover no-repeat;
  transform: scaleX(-1);                                              /* gespiegelt -> Reagenzglas rechts */
  /* weich ins Weiss auslaufen (90deg, weil die Maske mitgespiegelt wird -> wirkt auf der linken Bildkante) */
  -webkit-mask: linear-gradient(90deg, #000 50%, transparent 100%);
  mask: linear-gradient(90deg, #000 50%, transparent 100%);
}
/* Helles Glas-Formular (wie die Navbar ueber hellen Sektionen) */
.form.form--light {
  background: linear-gradient(160deg, rgba(0, 7, 15, 0.10) 0%, rgba(0, 7, 15, 0.16) 100%);   /* dunkelt ab wie die anderen Glas-Kacheln */
  box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.6), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.25), 0 0.75rem 1.5rem -1rem rgba(0, 7, 15, 0.25);
}
.form.form--light input, .form.form--light select { color: var(--text); background-color: var(--white); box-shadow: inset 0 0 0 0.0625rem rgba(0, 46, 93, 0.14); }
.form.form--light input::placeholder, .form.form--light select:invalid { color: var(--grey); }
.form.form--light input:focus, .form.form--light select:focus { background-color: var(--white); box-shadow: inset 0 0 0 0.125rem var(--accent); }
.form.form--light select, .form.form--light select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23002E5D' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.form.form--light .form__done { color: var(--navy-800); }
.cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.form { display: grid; gap: var(--s-4); padding: var(--s-7); border-radius: var(--r-lg); -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback)); background: var(--glass-tint); box-shadow: var(--glass-rim); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
/* Label nur fuer Screenreader sichtbar - optisch uebernimmt der Platzhalter */
.form label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form input, .form select {
  width: 100%; height: 3rem; padding-inline: var(--s-4); border: 0; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 0.0625rem var(--line-light); outline: none; transition: box-shadow var(--t), background var(--t);
}
.form select option { color: var(--text); }
/* Eigener Pfeil statt Browser-Standard: gleicher Textabstand wie bei den Eingabefeldern */
.form select { -webkit-appearance: none; appearance: none; padding-right: var(--s-8); cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s-4) center / 0.75rem auto, rgba(255, 255, 255, 0.08); }
.form select:focus { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s-4) center / 0.75rem auto, rgba(255, 255, 255, 0.12); }
.form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.form select:invalid { color: rgba(255, 255, 255, 0.55); }   /* "Product" wirkt wie ein Platzhalter */
.form input:focus, .form select:focus { box-shadow: inset 0 0 0 0.125rem var(--accent); background: rgba(255, 255, 255, 0.12); }
.form .btn { margin-top: var(--s-2); justify-self: start; width: auto; }   /* nur so breit wie der Inhalt, links */
.form__done { display: none; color: var(--ice); font-size: var(--fs-sm); }
.form.is-sent .form__done { display: block; }

/* ---------- Footer ---------- */
.footer { background: var(--noise), var(--warm-ambient), radial-gradient(80% 140% at 10% 0%, rgba(10, 76, 140, 0.4) 0%, rgba(10, 76, 140, 0) 70%), var(--navy-950); color: rgba(255, 255, 255, 0.65); padding-top: var(--s-9); font-size: var(--fs-sm); }
/* Footer: Glas-Kachel schwebt ueber dem Kugel-Haufen (js/footer-balls.js) */
.footer { position: relative; isolation: isolate; overflow: hidden; padding-bottom: var(--s-8); color: var(--white); }   /* Schrift ganz weiss fuer Kontrast ueber den Kugeln */
.footer :is(a, span, p, h4):not(.concept-badge) { color: var(--white); }
.footer > .container { position: relative; z-index: 1; }
.footer__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* gleiche Glas-Kachel wie .step / .fact, nur groesser */
.footer__panel {
  padding: var(--s-8) var(--s-7) 0; border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback));
  background: var(--glass-tint); box-shadow: var(--glass-rim);
}
.footer > .concept-badge--footer { top: var(--s-5); right: var(--gutter); z-index: 2; }
.footer__inner { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-7); padding-bottom: var(--s-8); }
.footer__col { position: relative; }
.footer__brand p { margin-top: var(--s-4); }
.footer__col { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__col h4 { color: var(--white); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.footer__col a, .footer__bottom a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--t); }
.footer__col a:hover, .footer__bottom a:hover { text-decoration-color: currentColor; }   /* Hover-Feedback, da Schrift schon weiss ist */
.footer__bottom { display: flex; justify-content: space-between; padding-block: var(--s-5); border-top: 0.0625rem solid var(--line-light); font-size: var(--fs-xs); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   APPLICATIONS PAGE
   ========================================================================== */
.app-hero { position: relative; padding: calc(var(--header-h) + var(--s-9)) 0 var(--s-9); background: var(--noise), var(--warm-ambient), var(--grad-dark); color: var(--white); overflow: hidden; }
.app-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.app-hero h1 { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.045em; }
.app-hero h1 span { color: var(--accent); }
.app-hero__visual { position: relative; height: 30rem; }

.filters { position: sticky; top: var(--header-h); z-index: 20; margin-bottom: var(--s-8); transition: top var(--t); }   /* ALT: weisser Hintergrund 85 % + Blur + border-bottom -> entfernt, Chips schweben frei */
.filters__inner { display: flex; gap: var(--s-2); padding-block: var(--s-4); overflow-x: auto; scrollbar-width: none; }
.filter { flex-shrink: 0; height: 2.5rem; padding-inline: var(--s-5); border: 0; border-radius: var(--r-pill); background: var(--bg-soft); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800); cursor: pointer; transition: background var(--t), color var(--t); }
.filter:hover { background: var(--ice); }
.filter.is-active { background: radial-gradient(120% 140% at 50% 130%, rgba(var(--warm-light-rgb), 0.75) 0%, rgba(var(--warm-rgb), 0.45) 35%, transparent 75%), var(--navy-800); color: var(--white); box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(var(--warm-rgb), 0.6); }

.explorer { padding-bottom: var(--section); }
body:has(.header.is-hidden) .filters { top: 0; }
body:has(.header.is-hidden) .explorer__viewer { top: 5rem; }
.explorer__viewer .stack3d { padding-right: 13rem; }
.explorer__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-4); align-items: start; }   /* gleicher Abstand wie zwischen den Info-Kacheln (.app-list gap) */
.explorer__viewer {
  position: sticky; top: calc(var(--header-h) + 5rem); height: calc(100svh - var(--header-h) - 7rem); min-height: 30rem; transition: top var(--t);
  border-radius: var(--r-lg); background: radial-gradient(90% 80% at 50% 40%, #FFFFFF 0%, var(--bg-soft) 60%, #E6EAEE 100%);
  box-shadow: inset 0 0 0 0.0625rem var(--line); overflow: hidden;
}
.viewer__title { position: absolute; left: var(--s-6); top: var(--s-5); z-index: 2; }
.viewer__title small { font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.viewer__title strong { display: block; font-size: var(--fs-xl); color: var(--navy-800); letter-spacing: -0.03em; line-height: 1.1; }
.viewer__toggle { position: absolute; right: var(--s-5); top: var(--s-5); z-index: 2; height: 2.5rem; padding-inline: var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-sm); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-800); cursor: pointer; }
.viewer__legend { position: absolute; left: var(--s-6); bottom: var(--s-5); z-index: 2; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--grey-dark); }
.viewer__legend i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; background: radial-gradient(circle at 40% 35%, rgb(var(--warm-light-rgb)), var(--warm)); box-shadow: 0 0 0.75rem rgba(var(--warm-rgb), 0.6); }

/* --- Echte 3D-Modelle (js/apps3d.js) --- */
.v3d { padding: 0 !important; }
.v3d__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.v3d__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.v3d__line { fill: none; stroke: var(--navy-800); stroke-width: 1; opacity: 0; stroke-opacity: 0.55; transition: opacity 0.3s ease; }
.v3d__line.is-hero { stroke: var(--warm); stroke-opacity: 0.9; }
.v3d__dot { fill: var(--white); stroke: var(--navy-800); stroke-width: 1.5; opacity: 0; transition: opacity 0.3s ease; }
.v3d__dot.is-hero { stroke: var(--warm); }
.v3d__labels { position: absolute; inset: 0; pointer-events: none; }
/* Beschriftung als kleine weisse Box direkt auf dem Modell (lesbar auf jeder Materialfarbe) */
.v3d__label { position: absolute; left: 0; top: 0; padding: 0.3rem 0.55rem; border-radius: var(--r-sm); white-space: nowrap; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--navy-800); background: var(--white); box-shadow: 0 0.125rem 0.5rem rgba(0, 18, 38, 0.14); opacity: 0; transition: opacity 0.3s ease; will-change: transform; }
.v3d__label.is-hero { box-shadow: 0 0.125rem 0.5rem rgba(0, 18, 38, 0.14), 0 0 0.9rem rgba(var(--warm-rgb), 0.55), inset 0 0 0 0.0625rem rgba(var(--warm-rgb), 0.45); }   /* warm hinterleuchtet = Glasphera-Schicht */

/* --- 3D Stack --- */
.stack3d { position: absolute; inset: 0; display: grid; place-items: center; perspective: 125rem; }
.stack3d__scene { position: relative; width: var(--w); height: var(--d); transform-style: preserve-3d; transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -38deg)); transition: transform 1.2s var(--ease); }
.slab { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--z)) translateX(var(--x, 0)); transition: transform 0.9s var(--ease), opacity 0.6s ease; }
.slab__face { position: absolute; background: var(--mat); background-size: var(--mat-size, auto); }
.slab__top { inset: 0; transform: translateZ(var(--h)); box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.3); }
.slab__front { left: 0; width: 100%; height: var(--h); top: calc(100% - var(--h)); transform-origin: bottom; transform: rotateX(-90deg); filter: brightness(0.82); }
.slab__right { top: 0; height: 100%; width: var(--h); left: 100%; transform-origin: left; transform: rotateY(-90deg); filter: brightness(0.65); }
.slab__shadow { inset: 0; background: rgba(0, 27, 56, 0.25); filter: blur(1rem); transform: translateZ(-0.5rem); }
/* Glasphera-Schicht im 3D-Stack: von innen warm durchleuchtet als "unser Produkt"-Markierung */
.slab.is-hero .slab__top { box-shadow: inset 0 0 1.75rem rgba(var(--warm-rgb), 0.55), inset 0 0 0.25rem rgba(var(--warm-light-rgb), 0.6), 0 0 3rem rgba(var(--warm-rgb), 0.45); }
.slab.is-hero .slab__front, .slab.is-hero .slab__right { box-shadow: inset 0 0 0.75rem rgba(var(--warm-rgb), 0.75); }

.slab__label {
  position: absolute; left: 100%; top: 100%; transform-style: preserve-3d;
  transform: translateZ(calc(var(--h) / 2)) rotateZ(calc(var(--rz, -38deg) * -1)) rotateX(calc(var(--rx, 58deg) * -1));
  transition: opacity 0.6s ease;
}
.slab__label span {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  font-size: 0.8125rem; font-weight: 600; color: var(--navy-800); translate: 0 50%;
}
.slab__label span::before { content: ""; width: 3rem; height: 0.0625rem; background: var(--navy-800); opacity: 0.4; }
.slab.is-hero .slab__label span { color: var(--warm); }
.slab.is-hero .slab__label span::before { background: var(--warm); opacity: 1; }
.stack3d--compact .slab__label { opacity: 0; }

/* Materials */
.m-plants { --mat: radial-gradient(circle at 30% 30%, #7DB356 0 0.35rem, transparent 0.4rem) 0 0 / 1.2rem 1.2rem, radial-gradient(circle, #5C8F3A 0 0.4rem, transparent 0.45rem) 0.6rem 0.6rem / 1.2rem 1.2rem, #3F6E28; }
.m-soil { --mat: radial-gradient(circle, rgba(0, 0, 0, 0.15) 0 0.08rem, transparent 0.1rem) 0 0 / 0.5rem 0.5rem, #7A5A3E; }
.m-glasphera { --mat: radial-gradient(circle at 35% 35%, #FFFFFF 0 0.1rem, #C9D3DC 0.14rem, #8C9AA7 0.32rem, transparent 0.34rem) 0 0 / 0.75rem 0.75rem, radial-gradient(circle at 35% 35%, #F4F7FA 0 0.08rem, #AEBAC6 0.25rem, transparent 0.27rem) 0.375rem 0.375rem / 0.75rem 0.75rem, #5D7184; }
.m-glasphera-fine { --mat: radial-gradient(circle at 35% 35%, #FFFFFF 0 0.05rem, #B7C3CE 0.12rem, transparent 0.14rem) 0 0 / 0.32rem 0.32rem, #8496A8; }
.m-concrete { --mat: radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 0.06rem, transparent 0.08rem) 0 0 / 0.6rem 0.6rem, radial-gradient(circle, rgba(255, 255, 255, 0.25) 0 0.05rem, transparent 0.07rem) 0.3rem 0.2rem / 0.7rem 0.7rem, #B9BDC0; }
.m-lwconcrete { --mat: radial-gradient(circle at 35% 35%, #FFFFFF 0 0.06rem, #B5C0CA 0.16rem, transparent 0.18rem) 0 0 / 0.6rem 0.6rem, #A3ACB4; }
.m-steel { --mat: repeating-linear-gradient(90deg, #4A5560 0 0.15rem, transparent 0.15rem 1.5rem), repeating-linear-gradient(0deg, #4A5560 0 0.15rem, transparent 0.15rem 1.5rem), #D5D9DC; }
.m-fleece { --mat: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0 0.1rem, transparent 0.1rem 0.4rem), #E8E3D6; }
.m-drain { --mat: radial-gradient(circle, #1E2A36 0 0.35rem, transparent 0.4rem) 0 0 / 1.2rem 1.2rem, #2C3A48; }
.m-membrane { --mat: #1B2229; }
.m-deck { --mat: repeating-linear-gradient(90deg, #9AA1A7 0 2rem, #8D949A 2rem 4rem); }
.m-plaster { --mat: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0 0.06rem, transparent 0.08rem) 0 0 / 0.4rem 0.4rem, #EDEAE4; }
.m-mesh { --mat: repeating-linear-gradient(45deg, #B08B3C 0 0.08rem, transparent 0.08rem 0.8rem), repeating-linear-gradient(-45deg, #B08B3C 0 0.08rem, transparent 0.08rem 0.8rem), #CFC7B4; }
.m-board { --mat: #C7A57A; }
.m-stone { --mat: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 0.1rem, transparent 0.1rem) 0 0 / 4rem 2rem, linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 0.1rem, transparent 0.1rem) 0 0 / 4rem 2rem, #A89B8A; }
.m-insulation { --mat: repeating-linear-gradient(0deg, #F1D27A 0 0.3rem, #E6C35F 0.3rem 0.6rem); }
.m-water { --mat: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent), #4BA3D6; }
.m-biofilm { --mat: radial-gradient(circle at 35% 35%, #D9F0C9 0 0.08rem, #8FB57A 0.25rem, transparent 0.28rem) 0 0 / 0.7rem 0.7rem, #4E7A5E; }
.m-resin { --mat: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 50%), #3C5C7C; }
.m-uhpc { --mat: radial-gradient(circle, rgba(0, 0, 0, 0.18) 0 0.03rem, transparent 0.05rem) 0 0 / 0.3rem 0.3rem, #CDD1D4; }
.m-print { --mat: repeating-linear-gradient(0deg, #B4B9BD 0 0.9rem, #9EA4A9 0.9rem 1rem); }
.m-fiber { --mat: repeating-linear-gradient(30deg, rgba(255, 255, 255, 0.5) 0 0.05rem, transparent 0.05rem 0.5rem), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.4) 0 0.05rem, transparent 0.05rem 0.6rem), #C2C6C9; }

/* App list */
.app-list { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: 20svh; }
/* Hohe Kacheln: jede Anwendung bleibt beim Scrollen laenger aktiv -> Animation hat Zeit, nichts wird uebersprungen */
.app-item { min-height: max(22rem, 58svh); display: flex; flex-direction: column; }
/* Schichtaufbau unten in der Kachel (passend zum 3D-Modell) */
.app-item__build { margin-top: auto; padding-top: var(--s-6); border-top: 0.0625rem solid var(--line); }
.app-item__build small { display: block; margin-bottom: var(--s-3); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--grey); }
.app-item__build ol { display: flex; flex-direction: column; gap: var(--s-2); counter-reset: b; }
.app-item__build li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 500; color: var(--navy-800); counter-increment: b; }
.app-item__build li::before { content: counter(b); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--navy-800); box-shadow: inset 0 0 0 0.0625rem var(--line); flex-shrink: 0; }
.app-item__build li.is-hero { color: var(--warm); font-weight: 600; }
.app-item__build li.is-hero::before { color: var(--white); box-shadow: none; background: radial-gradient(circle at 40% 35%, rgb(var(--warm-light-rgb)), var(--warm)); box-shadow: 0 0 0.75rem rgba(var(--warm-rgb), 0.5); }
.app-item {
  padding: var(--s-6); border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 0.0625rem var(--line);
  transition: box-shadow var(--t), transform var(--t), opacity var(--t); cursor: pointer; scroll-margin-top: 10rem;
}
.app-item:hover { box-shadow: inset 0 0 0 0.0625rem var(--ice), var(--shadow-sm); }
/* Aktive Karte: warmes Licht scheint von unten rechts durch, Schein faellt nach aussen */
.app-item.is-active {
  background: radial-gradient(90% 120% at 100% 120%, rgba(var(--warm-light-rgb), 0.22) 0%, rgba(var(--warm-rgb), 0.08) 40%, transparent 70%), var(--white);
  box-shadow: inset 0 0 0 0.0625rem rgba(var(--warm-rgb), 0.18), 0 1.5rem 3rem -1.5rem rgba(var(--warm-rgb), 0.55), var(--shadow-sm);
  /* ALT: transform: translateX(-0.5rem) -> entfernt, damit der Abstand zur Animation immer gleich bleibt */
}
.app-item.is-hidden { display: none; }
.app-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.app-item__num { display: none; }   /* Nummern 01-09 ausgeblendet */
.app-item__cat { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.app-item h3 { font-size: var(--fs-xl); letter-spacing: -0.03em; color: var(--navy-800); margin: var(--s-2) 0 var(--s-3); line-height: 1.1; }
.app-item p { color: var(--grey-dark); }
.app-item__benefits { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.app-item__benefits span { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--bg-soft); font-size: var(--fs-xs); font-weight: 600; color: var(--navy-800); }
.app-item__product { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--grey); }
.app-item__product b { color: var(--navy-800); }

/* Performance matrix */
.matrix { padding-block: var(--section); background: var(--noise), var(--warm-ambient), radial-gradient(80% 110% at 100% 0%, rgba(22, 147, 209, 0.3) 0%, rgba(22, 147, 209, 0) 72%), var(--navy-950); color: var(--white); }
.matrix__wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: inset 0 0 0 0.0625rem var(--line-light); }
.matrix table { width: 100%; border-collapse: collapse; min-width: 50rem; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: var(--s-4) var(--s-4); text-align: center; border-bottom: 0.0625rem solid var(--line-light); }
.matrix th:first-child, .matrix td:first-child { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--noise), var(--navy-950); }
.matrix thead th { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); font-weight: 600; }
.matrix tbody tr { transition: background var(--t); }
.matrix tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.75rem rgba(22, 147, 209, 0.8); }
.dot--half { background: transparent; box-shadow: inset 0 0 0 0.125rem var(--accent); }


/* ==========================================================================
   NAVIGATION: Untermenues (Sitemap aus Kunden-Konzept)
   ========================================================================== */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__caret { display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.4rem; border-right: 0.09rem solid currentColor; border-bottom: 0.09rem solid currentColor; transform: translateY(-0.2rem) rotate(45deg); opacity: 0.6; transition: transform var(--t); }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: translateY(0) rotate(225deg); }
.nav__sub {
  position: absolute; top: calc(100% + 1.4rem); left: -1rem; min-width: 14rem;
  display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem; border-radius: var(--r-md);
  background: rgba(0, 18, 38, 0.86); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
  box-shadow: var(--glass-rim);
  opacity: 0; visibility: hidden; transform: translateY(-0.35rem); transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5rem; height: 1.5rem; } /* Hover-Bruecke */
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { padding: 0.55rem 0.8rem; border-radius: 0.6rem; font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.78); white-space: nowrap; transition: background var(--t), color var(--t); }
.nav__sub a:hover, .nav__sub a.is-current { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.nav__cta { position: relative; }

/* ==========================================================================
   REVIEW-BADGE: markiert Sektionen/Animationen, die NICHT im Kunden-Konzept (PPT) stehen
   Ein-/Ausblenden fuer Praesentationen: Taste "B" (siehe main.js)
   ========================================================================== */
[data-concept] { position: relative; }
.concept-badge {
  position: absolute; z-index: 6; top: var(--s-5); right: var(--gutter);
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: var(--r-pill); background: #F5EDFF; color: #6B21A8; border: 0.0625rem dashed #A855F7;
  font: 700 0.6875rem/1.2 var(--font); letter-spacing: 0.03em; white-space: nowrap; text-transform: none;
  box-shadow: 0 0.25rem 0.75rem -0.25rem rgba(107, 33, 168, 0.4); cursor: help;
}
.concept-badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #A855F7; flex-shrink: 0; }
.concept-badge[data-note]:hover::after {
  content: attr(data-note); position: absolute; top: calc(100% + 0.4rem); right: 0; width: max-content; max-width: 19rem;
  white-space: normal; padding: 0.55rem 0.75rem; border-radius: 0.6rem; background: #2E1065; color: #fff;
  font-weight: 500; font-size: 0.75rem; line-height: 1.45; letter-spacing: 0; box-shadow: var(--shadow-md);
}
.concept-badge--hero { top: calc(var(--header-h) + var(--s-4)); }
.concept-badge--inline { position: relative; top: auto; right: auto; margin-bottom: var(--s-4); }
.concept-badge--dot { top: -0.3rem; right: -0.3rem; width: 0.85rem; height: 0.85rem; padding: 0; gap: 0; font-size: 0; border: 0.125rem solid #fff; background: #A855F7; }
.concept-badge--dot::before { display: none; }
.concept-badge--dot[data-note]:hover::after { font-size: 0.75rem; }
html.hide-badges .concept-badge { display: none; }
html:not([lang="de"]) .concept-badge { display: none; }   /* Badges nur in der deutschen Fassung (lang setzt js/i18n.js) */

/* ==========================================================================
   CONTENT-SEITEN (Company, Product, Career) – Aufbau laut Konzept:
   Header (Bild + Headline) -> Main Section 1 -> Main Section 2 -> Footer
   ========================================================================== */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--white);
  min-height: min(82svh, 48rem); display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + var(--s-9)) 0 var(--s-9);
  background: var(--noise), var(--warm-ambient), var(--grad-dark);
}
.page-hero--short { min-height: min(64svh, 38rem); }
.page-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Abdunklung ueber dem Foto + Noise, damit es zum dunklen Seitenlook passt */
.page-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background: var(--noise), var(--warm-ambient), linear-gradient(180deg, rgba(0, 7, 15, 0.45) 0%, rgba(0, 18, 38, 0.35) 40%, rgba(0, 7, 15, 0.92) 100%);
}
.page-hero h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 5.25rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; max-width: 15ch; }
.page-hero .lead { max-width: 40rem; }
/* Zusaetzliche Abdunklung links, damit Text auf unruhigen Fotos lesbar bleibt */
.page-hero__shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 7, 15, 0.6) 0%, rgba(0, 7, 15, 0.25) 45%, rgba(0, 7, 15, 0) 70%); }
/* Review-Badge im Hero unter die Navbar setzen */
.page-hero > .concept-badge, .band > .concept-badge { top: calc(var(--header-h, 5rem) + var(--s-3)); }
.band > .concept-badge { top: var(--s-5); }

.content { padding-block: var(--section); background: var(--bg); }
.content--soft { background: var(--bg-soft); }
.content__grid { display: grid; grid-template-columns: 1fr 1fr;   /* gleiches Raster wie .split -> rechte Spalten auf einer Sichtachse */ gap: var(--s-9); align-items: start; }
.content__lead { font-size: var(--fs-lg); line-height: 1.5; font-weight: 500; color: var(--navy-800); letter-spacing: -0.01em; }
.content__text p { font-size: var(--fs-md); color: var(--grey-dark); }
.content__text p + p { margin-top: var(--s-5); }
.content__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* Bild + Text nebeneinander (Mission, Values) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.split__media img, .split__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.split__media--hex { width: 100%; max-width: 28rem; justify-self: center; border-radius: 0; box-shadow: none; aspect-ratio: 1.1 / 1; -webkit-mask: var(--hex-round) center / 100% 100% no-repeat; mask: var(--hex-round) center / 100% 100% no-repeat; }

/* Dunkle Inhalts-Sektion (Values, Open Positions) */
.is-dark { color: var(--white); background: var(--noise), var(--warm-ambient), var(--grad-dark); }
.is-dark .content__text p { color: rgba(255, 255, 255, 0.72); }

/* Values-Liste */
.values { display: grid; gap: var(--s-3); }
.value { padding: var(--s-5) var(--s-6); transition: transform var(--t), box-shadow var(--t); }
.value:hover { transform: translateX(0.35rem); box-shadow: var(--glass-rim), inset 0 -0.0625rem 0 rgba(var(--warm-light-rgb), 0.45); }
.value:hover::before { opacity: 1; }
.value h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; }
.value h3 span { color: rgb(var(--warm-light-rgb)); }
.value p { margin-top: var(--s-1); color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); max-width: 34rem; }

/* Benefits (Icons aus dem Konzept) */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 0.0625rem var(--line); transition: transform var(--t), box-shadow var(--t); }
.benefit:hover { transform: translateY(-0.35rem); box-shadow: var(--shadow-md); }
.benefit img { width: 5.5rem; height: 5.5rem; object-fit: contain; }
.benefit strong { font-size: var(--fs-md); color: var(--navy-800); font-weight: 600; line-height: 1.3; }

/* Einheitliche Linien-Icons (Lucide, inline SVG): eine Farbe, eine Strichstaerke, kein Hintergrundkreis */
.ico { width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: var(--accent); }

/* Benefits: Foto links, Icon-Liste rechts */
.split--top { align-items: stretch; }
.split--top .split__media { aspect-ratio: auto; min-height: 22rem; }   /* Foto so hoch wie die Liste daneben */
.perks { display: grid; gap: var(--s-3); list-style: none; }
.perk { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--white);
  box-shadow: var(--shadow-sm), inset 0 0 0 0.0625rem var(--line); transition: transform var(--t), box-shadow var(--t); }
.perk:hover { transform: translateX(0.35rem); box-shadow: var(--shadow-md), inset 0 0 0 0.0625rem var(--line); }
.perk strong { font-size: var(--fs-md); font-weight: 600; color: var(--navy-800); line-height: 1.35; }

/* Your Possibilities: Bereiche als Karten mit Foto + Icon */
.areas { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); margin-top: var(--s-8); }
.area { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--white);
  box-shadow: var(--shadow-sm), inset 0 0 0 0.0625rem var(--line); transition: transform var(--t), box-shadow var(--t); }
.area:hover { transform: translateY(-0.35rem); box-shadow: var(--shadow-md); }
.area__media { aspect-ratio: 4 / 3; overflow: hidden; }
.area__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease, ease); }
.area:hover .area__media img { transform: scale(1.05); }
.area__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.area__body .ico { margin-bottom: var(--s-4); }
.area h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); line-height: 1.25; }
.area p { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--grey-dark); }
.areas > .concept-badge { top: calc(var(--s-6) * -1); right: 0; }

/* Open Positions */
.positions { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.position { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: var(--r-md); color: var(--white); background: var(--glass-tint); -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fx, var(--glass-fallback)); box-shadow: var(--glass-rim); transition: transform var(--t); }
.position:hover { transform: translateX(0.35rem); }
.position strong { font-size: var(--fs-md); font-weight: 600; }
.position span { color: rgb(var(--warm-light-rgb)); font-size: var(--fs-lg); transition: transform var(--t); }
.position:hover span { transform: translateX(0.25rem); }
.positions__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); max-width: 26ch; }
.positions__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice); margin-top: var(--s-8); }
.positions__more { margin-top: var(--s-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding-top: var(--s-6); border-top: 0.0625rem solid var(--line-light); }
.positions__more p { color: rgba(255, 255, 255, 0.72); max-width: 36rem; }

/* Product: Key Benefits */
.key-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-8); counter-reset: kb; }
.key-benefit { position: relative; padding: var(--s-6) var(--s-5) var(--s-7); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 0.0625rem var(--line); }
/* ALT: kleine Nummern 01-04 per ::before -> entfernt, stattdessen Headline */
.key-benefit__title { margin-bottom: var(--s-3); color: var(--navy-800); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.key-benefit p { color: var(--grey-dark); font-size: var(--fs-base, 1rem); line-height: 1.55; }

/* Applications: Uebersicht (Diagramm aus dem Konzept) */
.app-overview { padding-block: var(--section) var(--s-8); }
.app-overview__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--s-3); }
.app-chip { display: flex; align-items: flex-end; min-height: 7.5rem; padding: var(--s-4); border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 0.0625rem var(--line); font-weight: 600; color: var(--navy-800); line-height: 1.25; font-size: var(--fs-sm); transition: transform var(--t), box-shadow var(--t); }
.app-chip:hover { transform: translateY(-0.3rem); box-shadow: var(--shadow-md); }
.app-chip--additive { background: linear-gradient(180deg, var(--white) 40%, #EEF6FB 100%); }
.app-overview__bracket { grid-column: 1 / span 6; display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.app-overview__bracket::before, .app-overview__bracket::after { content: ""; flex: 1; height: 0.75rem; border: 0.125rem solid var(--accent); border-top: 0; }
.app-overview__bracket::before { border-right: 0; border-radius: 0 0 0 0.5rem; }
.app-overview__bracket::after { border-left: 0; border-radius: 0 0 0.5rem 0; }

/* ==========================================================================
   WIEDERKEHRENDE BAUSTEINE (Unterseiten)
   Hero -> Intro -> Bildband -> Querverlinkung(en) -> Kontakt-CTA -> Footer
   ========================================================================== */

/* Split spiegeln: Bild rechts (fuer abwechselnde Querverlinkungen) */
.split--reverse .split__media { order: 2; }
.split .content__text { margin-top: var(--s-6); }

/* Bildband: vollflaechiges Foto als "Atempause" mit grossem Statement.
   Das Bild ist etwas hoeher als das Band und wird per Scroll leicht verschoben (Parallax). */
.band { position: relative; isolation: isolate; overflow: hidden; color: var(--white);
  min-height: min(78svh, 46rem); display: flex; align-items: flex-end; padding-block: var(--s-10, 8rem) var(--s-9); }
.band__img { position: absolute; inset: -8% 0; z-index: -2; width: 100%; height: 116%; object-fit: cover;
  transform: translate3d(0, var(--band-shift, 0px), 0) scale(1.02); will-change: transform; }
.band__shade { position: absolute; inset: 0; z-index: -1;
  background: var(--noise), linear-gradient(180deg, rgba(0, 7, 15, 0.15) 0%, rgba(0, 18, 38, 0.4) 45%, rgba(0, 7, 15, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 7, 15, 0.55) 0%, rgba(0, 7, 15, 0) 65%); }
.band__text { max-width: 22ch; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; }
.band .eyebrow { margin-bottom: var(--s-4); }

/* Kontakt-CTA (auf allen Unterseiten gleich): dunkles Foto + Noise, Text links, Button rechts */
.cta--contact { background: var(--navy-950); }
.cta--contact .cta__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta--contact .cta__shade { position: absolute; inset: 0; z-index: -1;
  background: var(--noise), var(--warm-ambient),
    linear-gradient(90deg, rgba(0, 7, 15, 0.94) 0%, rgba(0, 18, 38, 0.78) 45%, rgba(0, 18, 38, 0.45) 100%); }
.cta--contact .cta__inner { grid-template-columns: 1.4fr 1fr; }
.cta--contact .cta__inner > :last-child { justify-self: end; align-self: end; }   /* Button immer unten rechts, buendig mit der letzten Textzeile */
.cta--contact .h2 { max-width: 20ch; }

/* Kontaktseite */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-9); align-items: start; }
.contact__info { display: grid; gap: var(--s-4); }
.contact-card { position: relative; padding: var(--s-6); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 0.0625rem var(--line); }
.contact-card small { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.contact-card h3 { margin: var(--s-2) 0 var(--s-3); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--navy-800); }
.contact-card p, .contact-card a { color: var(--grey-dark); font-size: var(--fs-md); line-height: 1.55; }
.contact-card a { color: var(--navy-800); font-weight: 500; }
.contact-card a:hover { color: var(--accent); }
.contact .form { padding: var(--s-8); }
.form textarea { width: 100%; min-height: 9rem; resize: vertical; font: inherit; }
.form.form--light textarea { padding: var(--s-4); border: 0; border-radius: var(--r-md, 0.75rem); color: var(--text); background-color: var(--white); box-shadow: inset 0 0 0 0.0625rem rgba(0, 46, 93, 0.14); outline: none; transition: box-shadow var(--t), background-color var(--t); }
.form.form--light textarea::placeholder { color: var(--grey); }
.form.form--light textarea:focus { background-color: var(--white); box-shadow: inset 0 0 0 0.125rem var(--accent); }
.form__note { font-size: var(--fs-xs); color: var(--grey); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 64rem) {
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: var(--s-6);
    background: rgba(0, 18, 38, 0.97); backdrop-filter: var(--blur); opacity: 0; pointer-events: none; transition: opacity var(--t);
  }
  .nav__link { font-size: var(--fs-xl); font-weight: 600; }
  .nav-open .nav { opacity: 1; pointer-events: auto; }
  .burger { display: block; }
  .nav { overflow-y: auto; padding-block: calc(var(--header-h) + var(--s-5)) var(--s-7); justify-content: flex-start; gap: var(--s-5); }
  .nav__item { flex-direction: column; gap: var(--s-2); }
  .nav__caret { display: none; }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; align-items: center; }
  .nav__sub::before { display: none; }
  .nav__sub a { font-size: var(--fs-md); padding: 0.25rem 0.5rem; color: rgba(255, 255, 255, 0.6); }
  .content__grid, .split, .statement__body { grid-template-columns: 1fr; gap: var(--s-7); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .key-benefits { grid-template-columns: repeat(2, 1fr); }
  .app-overview__grid { grid-template-columns: repeat(3, 1fr); }
  .app-overview__bracket { grid-column: 1 / -1; order: -1; margin: 0 0 var(--s-2); }

  .hero__content { padding-top: calc(var(--header-h) + 56vw + 1rem); }
  .hero__facts { position: relative; left: auto; bottom: auto; translate: none; grid-template-columns: repeat(2, 1fr); padding-bottom: var(--s-7); }
  .scroll-hint { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .sizer__stage { grid-template-columns: 1fr; gap: var(--s-7); }
  .sizer__media { max-width: 28rem; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .num:nth-child(3) { padding-left: 0; border-left: 0; }
  .tilt-grid { grid-template-columns: repeat(2, 1fr); }
  .sustain__inner, .global__inner, .cta__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .cta--contact .cta__inner, .contact { grid-template-columns: 1fr; gap: var(--s-7); }
  .cta--contact .cta__inner > :last-child { justify-self: start; }
  .split--reverse .split__media { order: 0; }
  .band { min-height: min(64svh, 34rem); }
  .sustain__visual img { max-width: 22rem; }
  .global__globe { max-width: 36rem; margin-inline: auto; width: 100%; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__panel { padding: var(--s-7) var(--s-5) 0; }

  .app-hero__inner { grid-template-columns: 1fr; }
  .app-hero__visual { height: 22rem; }
  .explorer__inner { grid-template-columns: 1fr; }
  .explorer__viewer { position: sticky; top: calc(var(--header-h) + 4rem); height: 22rem; min-height: 0; z-index: 5; }
  .app-item.is-active { transform: none; }
  .app-item { min-height: max(16rem, 42svh); }
}

@media (max-width: 40rem) {
  :root { --header-h: 4rem; --nav-top: var(--s-3); }
  .header__inner { padding-inline: calc(var(--s-4) + var(--nav-h) * 0.22) calc(var(--s-1) + var(--nav-h) * 0.22); }
  .benefits, .areas, .key-benefits { grid-template-columns: 1fr; }
  .app-overview__grid { grid-template-columns: repeat(2, 1fr); }
  .position { padding: var(--s-4) var(--s-5); }
  .concept-badge { right: var(--s-4); }
  .brand__word { font-size: 1.25rem; }
  .hero__content { padding-top: calc(var(--header-h) + 72vw + 1rem); padding-bottom: var(--s-6); }
  .eyebrow { letter-spacing: 0.1em; }
  .hero .eyebrow { white-space: nowrap; font-size: 0.6875rem; gap: var(--s-2); }
  .explorer__viewer .stack3d { padding-right: 9rem; }
  .slab__label span { font-size: 0.6875rem; }
  .slab__label span::before { width: 1.5rem; }

  .hero__actions .btn { flex: 1; }
  .steps { grid-template-columns: 1fr; margin-top: var(--s-7); }
  .sizer__dot-label { font-size: 0.625rem; }
  .specs { grid-template-columns: 1fr; }
  .specs div + div { padding-left: 0; border-left: 0; }
  .numbers__grid { grid-template-columns: 1fr; }
  .num, .num + .num { padding-left: 0; border-left: 0; padding-bottom: var(--s-5); border-bottom: 0.0625rem solid var(--line-light); }
  .tilt-grid { grid-template-columns: 1fr; }
  .tilt-card { aspect-ratio: 4 / 3; }
  .sustain__kpis { grid-template-columns: 1fr; }
  .org__row { grid-template-columns: 1fr; padding-top: var(--s-5); }
  .org__row::before, .org__row .org__node::before { display: none; }
  .news__grid { grid-template-columns: 1fr; }
  .form { padding: var(--s-5); }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--s-2); }
  .explorer__viewer { height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Badge im Explorer liegt sonst unter der Sticky-Filterleiste */
.explorer > .concept-badge { z-index: 40; }

/* ==========================================================================
   FLAT-OVERRIDES
   Prinzip: keine Glas-Unschaerfe, keine Verlaeufe, kein Leuchten, keine Schatten.
   Flaechen sind einfarbig. Warm (#F7732E) wird als volle Flaeche fuer Akzente genutzt
   (Haupt-Buttons, aktive Zustaende, Glasphera-Schicht), Schrift darauf dunkel (Kontrast).
   ========================================================================== */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none !important; }

/* --- Buttons: Sechseck bleibt, Fuellung einfarbig, kein Glow --- */
.btn { --btn-rim: linear-gradient(transparent, transparent); }
.btn::after { display: none; }
.btn:hover { transform: none; }
.btn--primary { --btn-fill: var(--accent); }
.btn--primary:hover { --btn-fill: var(--blue-700); }
.btn--ghost, .btn--glass { --btn-fill: rgba(255, 255, 255, 0.14); }
.btn--ghost:hover, .btn--glass:hover { --btn-fill: rgba(255, 255, 255, 0.24); }
.btn--warm, .btn--warm-solid { color: var(--navy-950); --btn-fill: var(--warm); }
.btn--warm::before, .btn--warm:hover::before { background-size: auto; background-position: 0 0; }
.btn--warm:hover, .btn--warm-solid:hover { --btn-fill: #FF8A4C; }
.btn--dark { --btn-fill: var(--navy-800); }
.btn--dark:hover { --btn-fill: var(--blue-700); }

/* --- Header: einfarbige Leiste (dunkel / ueber hellen Sektionen weiss), kein Glas, kein Schatten --- */
.header__inner::before { background: var(--navy-950); box-shadow: none; }
.header.is-light .header__inner::before { background: var(--nav-edge-l) left center / auto 100% no-repeat, var(--nav-edge-r) right center / auto 100% no-repeat, var(--white); box-shadow: inset 0 0.0625rem 0 rgba(0, 46, 93, 0.12), inset 0 -0.0625rem 0 rgba(0, 46, 93, 0.12); }   /* flache 1-px-Kontur, sonst weiss auf weiss */
.header__inner::after, .header.is-light .header__inner::after { display: none; }
.header.is-light .nav__cta, .nav__cta { color: var(--navy-950); }
.nav__link::after { background: var(--warm); box-shadow: none; border-radius: 0; }
.nav__sub { background: var(--navy-950) !important; box-shadow: none !important; }
.eyebrow__dot { background: var(--warm); box-shadow: none; }

/* --- Hero: flache dunkle Flaeche, Akzentzeile in Warm --- */
.hero { background: var(--navy-950); }
.hero__title .line--accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--warm); }
.fact { background: rgba(255, 255, 255, 0.06); box-shadow: none; }

/* --- Prozess: Video mit einfarbiger Abdeckung --- */
.process__overlay { background: rgba(0, 18, 38, 0.86); }
.step { background: var(--navy-800); box-shadow: none; }
.step::before { display: none; }
.step:hover { background: var(--warm); color: var(--navy-950); }
.step:hover p { color: var(--navy-950); }
.step:hover .step__num { color: var(--navy-950); }
.step::after { background: var(--warm); }
.step:hover::after { background: var(--navy-950); }
.step__num { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--warm); filter: none; }

/* --- Produkt-Sizer: flache Perlen, aktive Perle warm gefuellt --- */
.sizer__bead { background: #D5DFE7; box-shadow: none; }
.sizer__dot.is-active .sizer__bead { background: var(--warm); box-shadow: none; }
.sizer__fill { background: var(--accent); }

/* --- Zahlen, Anwendungs-Kacheln, Marquee --- */
.numbers { background: var(--navy-900); }
.num small { color: var(--warm); }
.tilt-card { box-shadow: none !important; }
.tilt-card::after { background: rgba(0, 18, 38, 0.42); }
.marquee { -webkit-mask-image: none; mask-image: none; }
.sustain { background: var(--bg); }

/* --- Globus / Standorte --- */
.global { background: var(--navy-900); }
.locations li { box-shadow: none; }
.locations li.is-active { background: var(--warm); color: var(--navy-950); box-shadow: none; }
.locations li.is-active * { color: var(--navy-950); }
.locations li::before, .value::before { display: none; }
.locations__dot { box-shadow: none; }
.locations li.is-active .locations__dot { background: var(--navy-950); animation: none; box-shadow: none; }
.locations li.is-active small { color: rgba(0, 18, 38, 0.75); }

/* --- CTA / Kontaktformular --- */
.cta { background: var(--navy-900); }
.cta--form { background: var(--bg); }
/* Bild hinter dem Formular behaelt die weiche Ausblendung nach links (sonst harte Bildkante) */
.cta__shade { background: rgba(0, 7, 15, 0.7) !important; }
.form { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.form.form--light { background: var(--bg-soft); box-shadow: none; }

/* --- Footer --- */
.footer { background: var(--navy-950); }

/* --- Unterseiten: Hero, Bildband, dunkle Sektionen --- */
.page-hero, .app-hero, .is-dark { background: var(--navy-900); }
.page-hero__shade { background: rgba(0, 7, 15, 0.55) !important; }
.page-hero__shade::after { display: none; }
.band__shade { background: rgba(0, 7, 15, 0.45) !important; }
.value, .position { background: var(--navy-800); box-shadow: none; }
.value:hover { box-shadow: none; }
.value h3 span, .position span { color: var(--warm); }
.app-chip--additive { background: var(--white); }
.matrix, .matrix th:first-child, .matrix td:first-child { background: var(--navy-950); }

/* --- Anwendungen: Filter, 3D-Viewer, Info-Kacheln --- */
.filter.is-active { background: var(--warm); color: var(--navy-950); box-shadow: none; }
.explorer__viewer { background: var(--bg-soft); }
.viewer__legend i { background: var(--warm); box-shadow: none; }
.v3d__label { box-shadow: none; }
.v3d__label.is-hero { background: var(--warm); color: var(--navy-950); box-shadow: none; }
.v3d__dot.is-hero { fill: var(--warm); }
.app-item.is-active { background: var(--white); box-shadow: inset 0 0 0 0.125rem var(--warm); }
.app-item__build li.is-hero { color: var(--navy-800); }
.app-item__build li.is-hero::before { background: var(--warm); color: var(--navy-950); box-shadow: none; }

/* --- Formular: Eingabefelder ohne Rahmenlinie (nur Fokus zeigt noch einen Rand) --- */
.form input, .form select, .form textarea,
.form.form--light input, .form.form--light select, .form.form--light textarea { border: 0; box-shadow: none; }