/* ============================================================
   4Tex GmbH — Corporate Website
   style.css — Design system, base, layout & components
   Palette (binding CD): Deep Navy / White / Light Grey / Black
   No frameworks. No external font dependencies.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------ */
:root {
  /* Brand colours — binding corporate design */
  --navy-900: #071A2F;   /* deepest — footer, overlays          */
  --navy-800: #0A2540;   /* primary brand navy                  */
  --navy-700: #123457;    /* hover / gradients                  */
  --navy-600: #1E4B78;    /* secondary navy                     */
  --steel-500: #4A6079;   /* darker steel                       */
  --steel:    #5B7290;    /* muted steel-blue for lines/labels  */
  --grey-050: #F5F7FA;    /* section tint                       */
  --grey-100: #ECEFF3;    /* borders on light                   */
  --grey-200: #D9DEE6;    /* dividers                           */
  --grey-400: #9AA6B4;    /* muted text                         */
  --grey-600: #5A6675;    /* body secondary                     */
  --ink-900:  #0D0D0D;    /* near-black headings                */
  --ink-700:  #22282F;    /* body text                          */
  --white:    #FFFFFF;

  /* Semantic */
  --bg:            var(--white);
  --bg-alt:        var(--grey-050);
  --bg-invert:     var(--navy-800);
  --text:          var(--ink-700);
  --text-strong:   var(--ink-900);
  --text-muted:    var(--grey-600);
  --border:        var(--grey-100);
  --border-strong: var(--grey-200);
  --brand:         var(--navy-800);
  --brand-hover:   var(--navy-700);

  /* Typography — system-first, no network dependency (CSP-safe).
     Arial Black is the corporate display face for headlines, large
     numbers and prominent labels; body copy stays a neutral sans. */
  --font-black: "Arial Black", "Arial Bold", Arial, sans-serif;
  --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Label face (formerly monospace — replaced site-wide by Arial Black) */
  --font-mono: "Arial Black", "Arial Bold", Arial, sans-serif;

  /* Type scale (fluid) — sized for the wide Arial Black display face */
  --fs-hero:   clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem);
  --fs-h1:     clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --fs-h2:     clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h3:     clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --fs-lead:   clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing (8px base grid) */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 8rem;

  /* Layout — wider container for a more generous, less empty look */
  --container: 1480px;
  --container-narrow: 1040px;
  --radius: 8px;
  --radius-lg: 20px;
  --radius-pill: 100px;
  --header-h: 76px;

  /* Navigation — binding corporate palette (white / black / grey / blue only) */
  --nav-blue: #005A9C;
  --nav-grey: #666666;

  /* Elevation & motion */
  --shadow-sm: 0 1px 2px rgba(7,26,47,.06), 0 1px 3px rgba(7,26,47,.05);
  --shadow-md: 0 4px 16px rgba(7,26,47,.08), 0 2px 6px rgba(7,26,47,.05);
  --shadow-lg: 0 18px 50px rgba(7,26,47,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;
}

/* ---- 2. Reset & base ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;   /* clips the fixed off-canvas menu at the root */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* fallback for older browsers */
  overflow-x: clip;     /* clips the off-canvas menu without breaking sticky */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-hover); }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }
h1,h2,h3 { font-family: var(--font-black); color: var(--text-strong);
  line-height: 1.16; font-weight: 900; letter-spacing: .005em; }
h4 { font-family: var(--font-display); color: var(--text-strong);
  line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }

/* ---- 3. Typography helpers ------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-600);
  font-weight: 700;
  display: block;
}
.lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.6; }
.section-title { font-size: var(--fs-h2); margin: var(--sp-2) 0 var(--sp-3); max-width: 26ch; }
.hero__title {
  font-size: var(--fs-hero); line-height: 1.18; letter-spacing: .005em;
  margin: var(--sp-3) 0 var(--sp-3); max-width: 26ch;
}
.hero__eyebrow { margin-bottom: .4rem; letter-spacing: .14em; }
.text-balance { text-wrap: balance; }

/* ---- 4. Layout primitives -------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tint { background: var(--bg-alt); }
.section--invert { background: var(--navy-800); color: #C9D4E0; }
.section--invert h1, .section--invert h2, .section--invert h3 { color: #fff; }
.section--invert .lead { color: #A9B8CB; }
.section--invert .eyebrow { color: #7F9BBE; }
.section--invert .eyebrow::before { background: #7F9BBE; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem,4vw,3.5rem);
  align-items: center; }
.stack > * + * { margin-top: var(--sp-2); }

/* ---- 5. Buttons — engineered, technical, premium ----------
   Rectangular with a precise 3px radius, uppercase display type
   with wide tracking, calm 300ms transitions and a sliding arrow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 2.1rem; border-radius: 3px;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: all .3s var(--ease); position: relative;
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn--primary {
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
  color: #fff; border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(7,26,47,.22);
}
.btn--primary:hover {
  background: linear-gradient(160deg, var(--navy-600) 0%, var(--navy-700) 60%, var(--navy-800) 100%);
  color: #fff; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(7,26,47,.32);
}
.btn--ghost {
  background: transparent; color: var(--navy-800);
  border-color: var(--navy-800); box-shadow: none;
}
.btn--ghost:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(7,26,47,.24); }
.btn--light { background: #fff; color: var(--navy-800); border-color: #fff; }
.btn--light:hover { background: var(--grey-050); color: var(--navy-800); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.btn--on-dark { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.02); }
.btn--on-dark:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff;
  transform: translateY(-2px); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--navy-800); }
.link-arrow .arrow { transition: transform .25s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---- 6. Cards -------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); transition: transform .35s var(--ease), box-shadow .35s var(--ease),
    border-color .35s var(--ease); height: 100%;
  box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card__icon {
  width: 52px; height: 52px; color: #fff; margin-bottom: var(--sp-3);
  display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.card p { color: var(--text-muted); font-size: .96rem; }

/* Feature card (icon-led, no top rule — matches icon-square system) */
.feature { position: relative; }

/* ---- 7. Media frames ------------------------------------- */
.media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--grey-050); border: 1px solid var(--border); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Duotone brand-blue overlay wash, used on hero / page-hero photography */
.media--duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(10,37,64,.38), rgba(30,75,120,.08) 55%, rgba(10,37,64,.30));
  mix-blend-mode: multiply;
}
.media--duotone::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(74,150,214,.16), transparent 40%, rgba(10,37,64,.22));
}
.media--product { background: #fff; border-color: var(--border-strong); }
.media--product img { object-fit: contain; padding: 1.5rem; }
.media--tall { aspect-ratio: 4/5; }
.media--wide { aspect-ratio: 16/10; }
.media--square { aspect-ratio: 1/1; }
figure.media figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: #fff; background: linear-gradient(transparent, rgba(7,26,47,.78));
  padding: 2.2rem 1rem .8rem; text-transform: uppercase;
}

/* ---- 8. Stats / specs ------------------------------------ */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3);
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  padding-block: var(--sp-4); }
.stat { text-align: left; }
.stat__icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; margin-bottom: .9rem; color: #fff;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
}
.stat__icon svg { width: 22px; height: 22px; }
:root[data-theme="dark"] .stat__icon { background: linear-gradient(135deg, #1E4B78, #0A2540); }
.stat__value--word { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.stat__value { font-family: var(--font-black); font-size: clamp(1.8rem,1.2rem+2vw,2.8rem);
  font-weight: 900; color: var(--navy-800); letter-spacing: 0; line-height: 1; }
.stat__value small { font-size: 1em; font-weight: inherit; color: inherit; letter-spacing: 0; }
.stat__label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin-top: .6rem; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table caption { text-align: left; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); color: var(--text-strong); margin-bottom: var(--sp-2); }
.spec-table th, .spec-table td { text-align: left; padding: .85rem 1rem;
  border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { width: 42%; font-weight: 500; color: var(--navy-800);
  font-family: var(--font-display); background: var(--grey-050); }
.spec-table tr:hover td { background: #fbfcfd; }
.spec-table td { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- 9. Badges / pills ----------------------------------- */
.pill { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-800); background: var(--grey-050); border: 1px solid var(--border-strong);
  padding: .3rem .7rem; border-radius: 100px; }
.pill--soon { color: var(--steel); background: transparent; border-style: dashed; }
.badge-made { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

/* ---- 10. Placeholder block (for content to be supplied) --- */
.placeholder {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: repeating-linear-gradient(-45deg, #fafbfc, #fafbfc 12px, #f4f6f9 12px, #f4f6f9 24px);
  padding: var(--sp-4); color: var(--text-muted); text-align: center;
}
.placeholder .pill--soon { margin-bottom: var(--sp-2); }
.placeholder__frame { aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .6rem; }
.placeholder svg { width: 40px; height: 40px; color: var(--grey-400); }

/* ---- 11. Breadcrumb -------------------------------------- */
.breadcrumb { padding-block: var(--sp-2); font-size: var(--fs-small); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-family: var(--font-mono); letter-spacing: .03em; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--grey-400); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--navy-800); }
.breadcrumb [aria-current="page"] { color: var(--navy-800); }

/* ---- 12. Page hero (interior) ---------------------------- */
.page-hero { background: var(--white); color: var(--text); padding-block: clamp(2.5rem,5vw,4rem);
  position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--text-strong); font-size: var(--fs-h1); max-width: 18ch; margin-block: var(--sp-2) var(--sp-2); }
.page-hero .lead { color: var(--text-muted); max-width: 56ch; }
.page-hero .split { align-items: center; }
.page-hero .media { aspect-ratio: 16/11; }
.page-hero--plain h1 { max-width: 26ch; }
.page-hero__ripple { position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 620px; max-width: 60%; opacity: .05; color: var(--navy-800); pointer-events: none; }

/* ---- Feature strip: white rounded bar with icon+text items,
   sits on top of a tinted section background (home hero band, etc.) ---- */
.feature-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-4);
  box-shadow: var(--shadow-md);
}
.feature-strip__item { display: flex; align-items: flex-start; gap: .9rem; }
.feature-strip__icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 100px;
  background: #E7EFF8; color: var(--navy-700);
  display: grid; place-items: center;
}
.feature-strip__icon svg { width: 20px; height: 20px; }
.feature-strip__item h4 { font-size: .95rem; margin-bottom: .2rem; }
.feature-strip__item p { font-size: .86rem; color: var(--text-muted); margin: 0; }

/* ---- Home hero band: full-bleed split hero + competencies on one
   continuous tinted background, matching the corporate reference design ---- */
.hero-band {
  background: linear-gradient(155deg, #ffffff 0%, #eef3f9 45%, #e7eef7 100%);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero-bleed {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  align-items: stretch; min-height: clamp(420px, 58vw, 620px);
}
.hero-bleed__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem,5vw,3rem) clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,3rem)
           max(clamp(1.25rem,4vw,2.5rem), calc((100vw - var(--container)) / 2 + clamp(1.25rem,4vw,2.5rem)));
}
.hero-bleed__media {
  position: relative; overflow: hidden; background: var(--grey-050);
  border-bottom-left-radius: clamp(28px, 4vw, 56px);
}
.hero-bleed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bleed__dots {
  position: absolute; left: 50%; bottom: clamp(1rem,3vw,1.75rem); transform: translateX(-50%);
  display: flex; gap: .4rem; z-index: 2;
}
.hero-bleed__dots span { width: 8px; height: 8px; border-radius: 100px; background: rgba(255,255,255,.55); }
.hero-bleed__dots span:first-child { width: 22px; background: #fff; }
.hero-band__competencies { margin-top: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 1; }
.hero-bleed--compact { min-height: clamp(340px, 42vw, 460px); }

/* ---- Split light hero (reference design): navy text panel left,
   full-bleed photography right with a large rounded bottom-left corner ---- */
.hero-band { position: relative; }
.hero-band > .hero-bleed--split,
.hero-band > .hero-band__competencies { position: relative; z-index: 1; }
/* Faint circuit-board traces bleeding in from the right, matching reference */
.hero-band::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: min(46%, 640px); height: 70%; pointer-events: none; z-index: 0;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' fill='none' stroke='%231E4B78' stroke-width='1.4' stroke-opacity='.28'%3E%3Cpath d='M640 60H420l-40 40H150'/%3E%3Cpath d='M640 130H470l-30 30H210'/%3E%3Cpath d='M640 210H400l-50 50H120'/%3E%3Cpath d='M640 300H460l-40 40H240'/%3E%3Cpath d='M640 380H380l-30 30H180'/%3E%3Ccircle cx='150' cy='100' r='4' fill='%231E4B78' fill-opacity='.3' stroke='none'/%3E%3Ccircle cx='210' cy='160' r='4' fill='%231E4B78' fill-opacity='.3' stroke='none'/%3E%3Ccircle cx='120' cy='260' r='4' fill='%231E4B78' fill-opacity='.3' stroke='none'/%3E%3Ccircle cx='240' cy='340' r='4' fill='%231E4B78' fill-opacity='.3' stroke='none'/%3E%3Ccircle cx='180' cy='410' r='4' fill='%231E4B78' fill-opacity='.3' stroke='none'/%3E%3C/svg%3E") no-repeat right bottom / contain;
}
.hero-bleed--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: stretch; min-height: clamp(460px, 56vw, 640px);
}
.hero-bleed--split .hero-bleed__text {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
}
.hero-bleed--split .hero-bleed__media {
  border-radius: 0 0 0 clamp(28px, 4vw, 60px);
  box-shadow: var(--shadow-lg);
}
.hero-bleed--split .hero__title {
  max-width: 18ch; color: var(--text-strong);
  font-size: clamp(2.2rem, 1.4rem + 2.7vw, 3.7rem);
  overflow-wrap: break-word; hyphens: manual;
}
.hero-bleed--split .hero__lead { max-width: 46ch; margin-top: var(--sp-3); }

/* Hero CTA row */
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Slider dots — short navy dashes under the hero copy (reference) */
.hero-bleed__dots {
  display: flex; gap: .5rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem);
}
.hero-bleed__dots span {
  width: 14px; height: 4px; border-radius: 100px; background: var(--grey-200);
  transition: all .3s var(--ease);
}
.hero-bleed__dots span:first-child { width: 30px; background: var(--navy-800); }

/* Cool, premium image wash for the split hero (keeps photo bright, adds brand blue) */
.media--cool::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(10,37,64,.28) 0%, rgba(30,75,120,.06) 45%, rgba(74,150,214,.14) 100%);
  mix-blend-mode: multiply;
}
.media--cool::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(200deg, rgba(120,170,220,.14), transparent 40%);
}

/* ---- Full-bleed hero overrides (image spans the entire screen width,
   white text overlaid) — restores slider dots as light dots on the photo ---- */
.hero-band > .hero-bleed--full { position: relative; z-index: 1; }
.hero-bleed--full .hero-bleed__dots {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 1.75rem); transform: translateX(-50%);
  margin: 0; z-index: 3;
}
.hero-bleed--full .hero-bleed__dots span {
  width: 8px; height: 8px; border-radius: 100px; background: rgba(255,255,255,.55);
}
.hero-bleed--full .hero-bleed__dots span:first-child { width: 22px; background: #fff; }
/* No automatic hyphenation — only deliberate soft hyphens (­) may break words */
.hero-bleed--full .hero__title { overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }

/* Full-viewport variant: the hero fills the entire remaining screen height,
   like a standalone landing page (used on the applications page) */
.hero-bleed--viewport { min-height: calc(100dvh - var(--header-h)); }
@supports not (height: 100dvh) {
  .hero-bleed--viewport { min-height: calc(100vh - var(--header-h)); }
}

/* ---- Hero slider (home) -----------------------------------------
   Slides are stacked in one grid cell and cross-faded. The active
   slide reveals its text with a staggered rise; the photo settles
   from a slight zoom for a calm, premium motion. Rotation & dots
   are driven by js/slider.js. ---- */
.hero-slider { display: grid; position: relative; overflow: hidden; }
.hero-slider > .hero-slide { grid-area: 1 / 1; }
.hero-slide {
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 0;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.hero-slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
  transition: opacity .9s var(--ease);
}

/* Slide content choreography — replaces the one-shot page-load
   keyframes inside the slider so every activation animates. */
.hero-slider .hero__eyebrow, .hero-slider .hero__title,
.hero-slider .hero__lead, .hero-slider .hero__cta { animation: none; }
.hero-slider .hero__media { animation: none; opacity: 1; }
.hero-slide .hero-bleed__text > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-slide.is-active .hero-bleed__text > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero-bleed__text > *:nth-child(1) { transition-delay: .15s; }
.hero-slide.is-active .hero-bleed__text > *:nth-child(2) { transition-delay: .28s; }
.hero-slide.is-active .hero-bleed__text > *:nth-child(3) { transition-delay: .42s; }
.hero-slide.is-active .hero-bleed__text > *:nth-child(4) { transition-delay: .56s; }
.hero-slide .hero-bleed__media img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}
.hero-slide.is-active .hero-bleed__media img { transform: scale(1); }

/* Dots — manual navigation, bottom centre */
.hero-slider__dots {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 1.75rem);
  transform: translateX(-50%); display: flex; gap: .55rem; z-index: 5;
}
.hero-slider__dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 100px;
  background: rgba(255,255,255,.45); border: none; cursor: pointer;
  transition: width .35s var(--ease), background .35s var(--ease);
}
.hero-slider__dots button:hover { background: rgba(255,255,255,.85); }
.hero-slider__dots button.is-active { width: 28px; background: #fff; }
.hero-slider__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { transition: none; }
  .hero-slide .hero-bleed__text > * { opacity: 1; transform: none; transition: none; }
  .hero-slide .hero-bleed__media img,
  .hero-slide.is-active .hero-bleed__media img { transform: none; transition: none; }
}

/* ---- Sub-page full-width hero (same height/style as the home hero) ------
   Uses a branded placeholder background; drop a real <img> inside the media
   later and it will cover the placeholder automatically. ---- */
.hero-full { position: relative; }
.hero-media--placeholder {
  background:
    radial-gradient(130% 120% at 12% 18%, rgba(30,75,120,.60), transparent 58%),
    radial-gradient(120% 130% at 88% 92%, rgba(0,90,156,.50), transparent 55%),
    linear-gradient(135deg, #071A2F 0%, #0A2540 48%, #123457 100%);
}
.hero-media--placeholder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask: radial-gradient(120% 100% at 82% 45%, #000, transparent 72%);
          mask: radial-gradient(120% 100% at 82% 45%, #000, transparent 72%);
}
/* When a real image is added later, it sits above the gradient + grid */
.hero-media--placeholder img { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hero-bleed--split { grid-template-columns: 1fr; min-height: 0; }
  .hero-bleed--split .hero-bleed__media { order: -1; aspect-ratio: 16/10; border-radius: 0; }
  .hero-bleed--split .hero-bleed__text {
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    padding-block: clamp(2rem, 8vw, 3rem);
  }
  .hero-band::after { opacity: .3; height: 40%; width: 60%; }
}

/* ---- Full-width hero: image stretches edge-to-edge behind the
   text, darkened for legibility, text set in white with shadow ---- */
.hero-bleed--full {
  display: block; position: relative; overflow: hidden;
  min-height: clamp(480px, 60vw, 680px);
}
.hero-bleed--full .hero-bleed__media {
  position: absolute; inset: 0; border-radius: 0; z-index: 0;
}
.hero-bleed--full .hero-bleed__text {
  position: relative; z-index: 2; max-width: min(72rem, 92vw);
  padding: clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem)
           max(clamp(1.25rem,4vw,2.5rem), calc((100vw - var(--container)) / 2 + clamp(1.5rem,5vw,6rem)));
  min-height: 100%;
}
.hero-bleed--full .hero__lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.7;
  max-width: 54ch; margin-top: var(--sp-3);
}
.hero-bleed--full .hero__eyebrow,
.hero-bleed--full .hero__title,
.hero-bleed--full .hero__lead {
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
}
.hero-bleed--full .hero__lead { color: rgba(255,255,255,.92); }

/* Darkening wash for full-bleed hero photography (replaces the lighter duotone) */
.media--darken { position: relative; }
.media--darken::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(4,14,26,.72) 0%, rgba(4,14,26,.5) 32%, rgba(4,14,26,.22) 60%, rgba(4,14,26,.42) 100%);
}
.media--darken::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(0deg, rgba(4,14,26,.55) 0%, rgba(4,14,26,0) 30%);
}
.page-hero { background: linear-gradient(155deg, #ffffff 0%, #eef3f9 55%, #e7eef7 100%);
  padding-block: 0 clamp(2.5rem,5vw,4rem); border-bottom: none; }
.page-hero__extra { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 900px) {
  .hero-bleed:not(.hero-bleed--full) { grid-template-columns: 1fr; }
  .hero-bleed:not(.hero-bleed--full) .hero-bleed__media { border-radius: 0; aspect-ratio: 16/10; order: -1; }
  .hero-bleed__text { padding-inline: clamp(1.25rem,4vw,2.5rem); }
  .hero-bleed--full { min-height: clamp(420px, 100vh, 720px); }
  .hero-bleed--full .hero-bleed__text { padding-block: clamp(2.5rem,10vw,4rem); }
}

/* ---- Product selector — four dominant, engineered choice tiles ----
   Used on the products page: the visitor immediately sees the four
   core technologies and jumps to the matching segment. ---- */
.product-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.product-nav__item {
  position: relative; display: flex; flex-direction: column; gap: .8rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.4rem, 2.2vw, 2rem);
  background: #fff; border: 2px solid var(--border-strong); border-radius: 8px;
  overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease),
    box-shadow .3s var(--ease), background .3s var(--ease);
}
.product-nav__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--nav-blue);
  transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease);
}
.product-nav__item:hover { border-color: var(--nav-blue); transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0,90,156,.16); background: rgba(0,90,156,.03); }
.product-nav__item:hover::before,
.product-nav__item:focus-visible::before { transform: scaleY(1); }
.product-nav__item:focus-visible { outline: 3px solid var(--nav-blue); outline-offset: 2px;
  border-color: var(--nav-blue); }
.product-nav__item:active { transform: translateY(-2px); }
.product-nav__index {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .07em;
  color: var(--steel); text-transform: uppercase;
}
.product-nav__name {
  font-family: var(--font-black); font-weight: 900; color: var(--text-strong);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.65rem); line-height: 1.2; letter-spacing: 0;
}
.product-nav__meta {
  display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .8rem;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--nav-blue);
}
.product-nav__meta .arrow { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.product-nav__item:hover .product-nav__meta .arrow { transform: translateX(4px); }
@media (max-width: 1024px) { .product-nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .product-nav { grid-template-columns: 1fr; } }

/* ---- Technology competence cloud --------------------------
   Structured, deliberately arranged tag chips — accent chips in
   corporate blue, supporting chips outlined. Calm hover only. ---- */
.tech-cloud {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.6rem, 1.4vw, 1rem); max-width: 62rem; margin-inline: auto;
}
.tech-cloud__tag {
  display: inline-flex; align-items: center;
  padding: .75rem 1.35rem; border-radius: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-strong);
  transition: color .3s var(--ease), border-color .3s var(--ease),
    background .3s var(--ease), transform .3s var(--ease);
  cursor: default;
}
.tech-cloud__tag:hover { color: var(--nav-blue); border-color: var(--nav-blue);
  transform: translateY(-2px); }
.tech-cloud__tag--accent {
  color: #fff; background: var(--nav-blue); border-color: var(--nav-blue);
  font-family: var(--font-black); font-weight: 900;
}
.tech-cloud__tag--accent:hover { color: #fff; background: #0A72C0; border-color: #0A72C0; }

/* ---- Product image gallery (detail pages) -----------------
   Three slides, arrows + dots, pointer/touch swipe. Slides are
   stacked in one grid cell (no layout shift) and cross-faded. ---- */
.pgallery { position: relative; }
.pgallery__track { display: grid; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--grey-050); touch-action: pan-y; }
.pgallery__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; z-index: 0;
  transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.pgallery__slide.is-active { opacity: 1; visibility: visible; z-index: 1;
  transition: opacity .6s var(--ease); }
.pgallery__slide img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pgallery__slide--placeholder {
  aspect-ratio: 16/10; display: flex; flex-direction: column; gap: .8rem;
  align-items: center; justify-content: center; text-align: center;
  padding: var(--sp-4); color: var(--text-muted);
  background: repeating-linear-gradient(-45deg, var(--grey-050), var(--grey-050) 14px,
    rgba(0,90,156,.05) 14px, rgba(0,90,156,.05) 28px);
}
.pgallery__slide--placeholder svg { width: 44px; height: 44px; color: var(--grey-400); }
.pgallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 6px;
  background: rgba(255,255,255,.92); color: var(--nav-blue);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.pgallery__arrow:hover { background: var(--nav-blue); color: #fff; }
.pgallery__arrow:focus-visible { outline: 2px solid var(--nav-blue); outline-offset: 2px; }
.pgallery__arrow svg { width: 20px; height: 20px; }
.pgallery__arrow--prev { left: 14px; }
.pgallery__arrow--next { right: 14px; }
.pgallery__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.pgallery__dots button { width: 10px; height: 10px; padding: 0; border-radius: 100px;
  background: var(--grey-200); transition: width .3s var(--ease), background .3s var(--ease); }
.pgallery__dots button.is-active { width: 26px; background: var(--nav-blue); }
.pgallery__dots button:focus-visible { outline: 2px solid var(--nav-blue); outline-offset: 3px; }
@media (max-width: 560px) {
  .pgallery__arrow { width: 40px; height: 40px; }
  .pgallery__arrow--prev { left: 8px; }
  .pgallery__arrow--next { right: 8px; }
}

/* ---- 13. Utility ----------------------------------------- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mw-60 { max-width: 60ch; }
.mt-4 { margin-top: var(--sp-4); }
.mt-3 { margin-top: var(--sp-3); }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy-800);
  color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius); transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; color: #fff; }

/* Visible keyboard focus */
:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 3px; border-radius: 2px; }
/* ============================================================
   Produktkacheln — blauer Eck-Akzent unten rechts
   ============================================================ */
.product-nav__item { overflow: hidden; isolation: isolate; }

/* Weicher blauer Lichtschein aus der unteren rechten Ecke */
.product-nav__item::after {
  content: "";
  position: absolute;
  inset: auto -8% -8% auto;
  width: 72%; height: 78%;
  background: radial-gradient(115% 115% at 100% 100%,
              rgba(0,90,156,.40), rgba(0,90,156,.12) 42%, transparent 72%);
  opacity: .55;
  z-index: -1;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* Scharfer, technischer Eck-Winkel unten rechts */
.product-nav__item::before {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, transparent 45%, var(--nav-blue) 45%);
  transform: none;
  opacity: .9;
  pointer-events: none;
  transition: width .35s var(--ease), height .35s var(--ease), opacity .35s var(--ease);
}

/* Hover / Tastatur-Fokus: Akzent verstärken */
.product-nav__item:hover,
.product-nav__item:focus-visible {
  border-color: var(--nav-blue);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,90,156,.22);
}
.product-nav__item:hover::before,
.product-nav__item:focus-visible::before { width: 64px; height: 64px; opacity: 1; transform: none; }
.product-nav__item:hover::after,
.product-nav__item:focus-visible::after { opacity: 1; transform: scale(1.12); }
/* ============================================================
   Produktkacheln — Label ("Point-of-Use Heating" etc.)
   klarer, hochwertiger und ~3px größer, ohne Nummerierung
   ============================================================ */
.product-nav__index {
  font-family: var(--font-display);
  font-size: .84rem;          /* ~3px größer als zuvor */
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-600);
}
:root[data-theme="dark"] .product-nav__index { color: #7FB6E8; }
/* ---- Language-scoped blocks --------------------------------
   Long-form legal pages (imprint, privacy) keep one complete
   block per language; language.js maintains <html lang>, these
   rules show only the matching block. */
html[lang="de"] [data-lang-only="en"] { display: none; }
html:not([lang="de"]) [data-lang-only="de"] { display: none; }

/* ---- Language veil ------------------------------------------
   Pages ship with English text; the stored German preference is
   applied by language.js as soon as the deferred scripts run.
   The header can paint BEFORE that (progressive rendering), which
   briefly flashed English on every navigation. An early inline
   <head> script adds .lang-veil when the stored language is "de";
   this hides the body until language.js has translated the DOM
   and lifts the veil — the first visible paint is already German.
   Safety net: if JS ever fails, the animation force-reveals the
   page after 0.9 s. English visitors never get the class. */
html.lang-veil body { visibility: hidden; animation: lang-unveil 0s .9s forwards; }
@keyframes lang-unveil { to { visibility: visible; } }