/* =========================================================================
   IDS INDUSTRIES — Design System
   Warm navy #1F4A7A · Lenia Sans · flat, square, corporate
   ========================================================================= */

/* ---------- Brand typeface: Lenia Sans (self-hosted, assets/fonts/lenia-sans) ---------- */
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Thin.woff2") format("woff2"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-ThinItalic.woff2") format("woff2"); font-weight:100; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-ExtraLight.woff2") format("woff2"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-ExtraLightItalic.woff2") format("woff2"); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-LightItalic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-MediumItalic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-SemiBoldItalic.woff2") format("woff2"); font-weight:600; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-BoldItalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-ExtraBoldItalic.woff2") format("woff2"); font-weight:800; font-style:italic; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lenia Sans"; src:url("../assets/fonts/lenia-sans/LeniaSans-BlackItalic.woff2") format("woff2"); font-weight:900; font-style:italic; font-display:swap; }

:root{
  /* Brand — warm navy */
  --brand:       #1F4A7A;   /* primary: buttons, links, accents */
  --brand-dark:  #0F2F52;   /* hover, dark navy blocks */
  --brand-light: #2F5F94;   /* lighter accent on light surfaces */
  --brand-tint:  #8FB3DA;   /* accent text/lines on dark surfaces */

  /* Neutrals */
  --ink:    #111827;   /* near-black: footer, photo heroes */
  --ink-2:  #163A63;   /* raised surface on navy */
  --ink-3:  #1D4672;
  --navy:   var(--brand-dark);
  --steel:  #6B7280;
  --steel-2:#9CA3AF;
  --line:   #E2E2E2;
  --line-d: rgba(255,255,255,.12);
  --mist:   #F4F4F4;
  --paper:  #FFFFFF;

  /* Semantic */
  --bg:           var(--paper);
  --fg:           #1A1F26;
  --fg-soft:      #4A5260;
  --on-dark:      #FFFFFF;
  --on-dark-soft: rgba(255,255,255,.72);
  --accent:       var(--brand);
  --accent-2:     var(--brand-light);
  /* Secondary — light blue (= --brand-tint): highlights on dark surfaces (nav hover, key numbers,
     hover bars). 6:1 on navy but pale on white, so light surfaces use --brand / --brand-light instead.
     No amber/orange anywhere (the user's call, 2026-10-09). */
  --secondary:    #8FB3DA;
  /* Buttons — white with navy text; outlined in navy where they sit on a light surface */
  --btn:          #FFFFFF;
  --btn-hover:    #E5E7EB;
  /* Navigation bar, its dropdowns, mega menu and mobile menu — the navy of the contact section */
  --nav-bg:       var(--brand-dark);

  /* Type — one family, like a corporate system (Lenia Sans) */
  --body:    "Lenia Sans", "Helvetica Neue", Arial, sans-serif;
  --display: var(--body);
  --title:   var(--display);   /* page + section titles */
  --mono:    var(--body);   /* legacy name: small uppercase labels */

  /* Metrics */
  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 80px);
  --r: 0;      /* square corners throughout, like an industrial corporate system */
  --r-lg: 0;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }
/* titles: every word capitalised (Title Case) */
h1, h2{ font-family:var(--title); text-transform:capitalize; }

/* ---------- Type scale ---------- */
.display{
  font-family:var(--title); font-weight:700;
  line-height:1.08; letter-spacing:0;
  text-transform:capitalize; margin:0; hyphens:manual; overflow-wrap:break-word;
}
h1.display{ font-size:clamp(30px, 5vw, 68px); line-height:1.06; }
/* section titles: light line with the key line in bold + short rule */
h2.display{ font-size:clamp(24px, 3.2vw, 40px); font-weight:400; line-height:1.15; }
h2.display strong, h2.display .h-bold{ font-weight:700; }
h2.display:not(:has(br, strong)){ font-weight:600; }
h3.display{ font-size:clamp(22px, 2.2vw, 28px); font-weight:600; line-height:1.2; text-transform:none; }
.h-thin{ font-weight:300; }

.kicker{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{ display:none; }

.lede{ font-size:clamp(17px,1.5vw,19px); line-height:1.65; color:var(--fg-soft); }
.eyebrow-num{ font-family:var(--mono); color:var(--accent); font-size:13px; letter-spacing:.06em; font-weight:600; }

p{ text-wrap:pretty; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px, 11vw, 150px); position:relative; }
.section.tight{ padding-block:clamp(48px,7vw,90px); }

.dark{ background:var(--brand-dark); color:var(--on-dark); }
.dark .lede{ color:var(--on-dark-soft); }
.dark .fg-soft, .dark p{ color:var(--on-dark-soft); }
.mist{ background:var(--mist); }
/* accents on navy: the primary is too dark there, use the tint */
.dark .kicker, .dark .eyebrow-num, .dark .text-accent,
.hero .kicker, .page-hero .kicker, .photoband .kicker{ color:var(--brand-tint); }
.dark .fact .big, .strat-stats .fact .big{ color:var(--secondary); }
.dark .spec-list li::before{ border-color:var(--secondary); }
.dark .div-card::before, .dark .wcard::before, .dark .tech-block::before{ background:var(--secondary); }

.grid{ display:grid; gap:clamp(24px,3vw,48px); }
.two{ grid-template-columns:1fr 1fr; }
.lead-col{ grid-template-columns:1.05fr .95fr; }
@media(max-width:880px){ .two,.lead-col{ grid-template-columns:1fr; } }

.stack-sm > * + *{ margin-top:14px; }
.stack > * + *{ margin-top:24px; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; font-size:14px; line-height:1;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:0; cursor:pointer;
  border:1px solid transparent; transition:.3s var(--ease);
  position:relative; white-space:nowrap;
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
/* primary = white with navy text; on light surfaces it gains a navy outline and fills navy on hover */
.btn-primary{ background:var(--btn); color:var(--brand-dark); }
.btn-primary:hover{ background:var(--btn-hover); }
.mist .btn-primary, .paper .btn-primary{ border-color:var(--brand-dark); }
.mist .btn-primary:hover, .paper .btn-primary:hover{ background:var(--brand-dark); color:#fff; }
.btn-ghost{ border-color:currentColor; color:inherit; opacity:.95; }
.btn-ghost:hover{ background:currentColor; }
.btn-ghost:hover span,.btn-ghost:hover .arr{ color:var(--ink); }
.dark .btn-ghost:hover{ background:#fff; }
.dark .btn-ghost:hover span{ color:var(--ink); }
/* on navy blocks the primary button turns white, like Rheinmetall's CTAs on blue */

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px var(--pad);
  background:var(--nav-bg);
  transition:padding .35s var(--ease), box-shadow .35s, border-color .35s;
  border-bottom:1px solid var(--line);
  /* navy bar: near-white links, pure white when active or hovered */
  --fg:#FFFFFF; --fg-soft:rgba(255,255,255,.93); --brand:#FFFFFF; --line:rgba(255,255,255,.14);
  --nav-hover:var(--secondary);   /* colour the link text sweeps into on hover / for the current page */
}
/* every item inside the navigation bar */
.hdr,
.hdr nav a,
.hdr nav .nav-link,
.hdr .dropdown a,
.hdr .nav-cta span,
.lang-toggle button{
  font-family:var(--display); font-weight:inherit;
}
.hdr.scrolled{
  background:var(--nav-bg); padding-block:11px;

}
/* the logo may shrink when space runs out, but scales down instead of squashing */
.hdr-brand{ flex:0 1 auto; min-width:0; }
.hdr-logo{ height:30px; width:auto; object-fit:contain; object-position:left center; }
.hdr nav{ display:flex; align-items:center; gap:26px; }
.hdr nav a{
  font-family:var(--mono); font-size:14px; letter-spacing:.01em;
  text-transform:none; color:var(--fg-soft); transition:color .2s; white-space:nowrap;
  font-weight:600;
}
.hdr nav a:hover,.hdr nav a.active{ color:var(--fg); }
.hdr nav a.active{ color:var(--brand); }
.hdr .cta-wrap{ display:flex; align-items:center; gap:16px; }
/* nav CTA on the dark bar */
.hdr .nav-cta{ background:var(--btn); border:0; }
.hdr .nav-cta span{ color:var(--brand-dark); }
.hdr .nav-cta:hover{ background:var(--btn-hover); }
/* Portal = login to the IDS platform (app.ids-industries.com): outlined, so Kontakt stays the main
   action. The outline is an inset shadow, so it is exactly as tall as the borderless Kontakt. */
.hdr .nav-portal{ background:none; border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); color:#FFFFFF; gap:8px; }
.hdr .nav-portal:hover{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #FFFFFF; color:var(--brand-dark); }
.nav-portal svg, .m-portal svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; }
/* ---------- Language toggle (compact) ---------- */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px;
  border:1px solid var(--line); border-radius:0; background:none; cursor:pointer;
  color:var(--fg-soft); line-height:1;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lang-toggle:hover{ color:var(--fg); border-color:var(--brand); background:rgba(255,255,255,.08); }
.lang-toggle svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lang-toggle .lang-code{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.05em; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:24px; height:2px; background:var(--fg); margin:5px 0; transition:.3s; }
@media(max-width:1260px){
  .hdr nav.main{ display:none; }
  .burger{ display:block; }
}
.hdr .btn{ padding:11px 18px; font-size:15px; text-transform:none; letter-spacing:.01em; }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:49; background:rgba(15,47,82,.97);   /* --nav-bg at 97% */
 display:flex; flex-direction:column;
  justify-content:center; gap:6px; padding:var(--pad);
  transform:translateY(-100%); transition:transform .45s var(--ease); pointer-events:none;
}
.mobile-menu.open{ transform:none; pointer-events:auto; }
.mobile-menu a{
  font-family:var(--display); font-size:28px; color:#E5E7EB;
  padding:8px 0; border-bottom:1px solid var(--line-d);
  line-height:1.25;
}
.mobile-menu a:hover{ color:var(--secondary); padding-left:10px; }

/* ---------- Dropdown navigation (desktop) ---------- */
.hdr nav.main{ gap:30px; }
/* six nav items + logo + CTA: tighten spacing before the burger takes over */
@media(max-width:1360px){
  .hdr{ gap:20px; padding-inline:clamp(20px,3vw,40px); }
  .hdr nav.main{ gap:20px; }
}
/* phones: logo + language + Kontakt + burger on one row; Portal moves into the burger menu */
@media(max-width:520px){
  .hdr{ gap:12px; }
  .hdr .nav-portal{ display:none; }
  .hdr .cta-wrap{ gap:10px; }
  .hdr .btn{ padding:10px 14px; font-size:13px; }
  .hdr .lang-toggle{ padding:7px 9px; }
  .hdr .burger{ padding:6px; }
  .hdr-logo{ height:26px; }
}
.nav-item{ position:relative; display:flex; align-items:center; }
.hdr nav .nav-link{
  font-family:var(--mono); font-size:14px; letter-spacing:.01em; text-transform:none;
  color:var(--fg-soft); transition:color .2s; white-space:nowrap; cursor:pointer;
  background:none; border:0; padding:0; display:inline-flex; align-items:center; gap:7px;
  font-weight:600;
}
.hdr nav .nav-link:hover,
.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link{ color:var(--fg); }
.hdr nav .nav-link.active,
.hdr nav a.nav-direct.active{ color:var(--brand); }
.nav-link .caret{ width:9px; height:6px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85; transition:transform .28s var(--ease), opacity .2s, color .2s; }
.nav-item:hover .nav-link .caret,
.nav-item:focus-within .nav-link .caret{ transform:rotate(180deg); color:var(--brand); opacity:1; }
/* nav links: on hover the text fills with --nav-hover from the left (a sliding two-colour gradient
   clipped to the text); the current page keeps the filled colour */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hdr nav.main .nav-link,
  .hdr nav.main .nav-link:hover{
    color:transparent;
    background:linear-gradient(90deg, var(--nav-hover) 0 46%, var(--fg-soft) 54% 100%) 100% 0 / 220% 100% no-repeat;
    -webkit-background-clip:text; background-clip:text;
    transition:background-position .5s var(--ease);
  }
  .hdr nav.main .nav-link:hover,
  .hdr nav.main .nav-item:hover > .nav-link,
  .hdr nav.main .nav-item:focus-within > .nav-link,
  .hdr nav.main .nav-link:focus-visible{ background-position:0 0; }
  .hdr nav.main a.nav-direct.active,
  .hdr nav.main .nav-link.active{ color:transparent; background-position:0 0; }
  .hdr nav.main .nav-link .caret{ color:var(--fg-soft); transition:transform .28s var(--ease), color .45s var(--ease); }
  .hdr nav.main .nav-item:hover .nav-link .caret,
  .hdr nav.main .nav-item:focus-within .nav-link .caret{ color:var(--nav-hover); }
}

.dropdown{
  position:absolute; top:100%; left:0;
  min-width:248px; padding:9px; margin-top:16px;
  background:var(--nav-bg);
  border:1px solid var(--line); border-radius:0;

  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
/* invisible bridge keeps panel open while the cursor travels into it */
.nav-item.has-dropdown::after{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; }
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.hdr .dropdown a{
  font-family:var(--mono); font-size:13.5px; letter-spacing:.01em; text-transform:none;
  color:var(--fg-soft); padding:11px 14px; border-radius:0; white-space:nowrap;
  display:flex; align-items:center; gap:11px; transition:.2s var(--ease);
  font-weight:600;
}
.hdr .dropdown a::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brand); opacity:0; transform:scale(.6); transition:.2s var(--ease); flex:0 0 5px; }
.hdr .dropdown a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.hdr .dropdown a:hover::before{ opacity:1; transform:scale(1); }

/* ---------- Mega menu (image cards) ---------- */
.nav-item.has-mega{ position:static; }
.mega{
  position:fixed; left:0; right:0; top:var(--hdr-h,64px);
  background:var(--nav-bg); border-top:1px solid var(--line);

  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index:55; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.nav-item.has-mega:hover > .mega,
.nav-item.has-mega:focus-within > .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mega-inner{
  max-width:1180px; margin:0 auto; padding:34px var(--pad) 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.mega-card{ display:flex; flex-direction:column; gap:14px; }
.mega-thumb{
  position:relative; aspect-ratio:4/3; border-radius:0; overflow:hidden;
  background:var(--mist,#F4F4F4); border:1px solid var(--line);
}
.mega-thumb image-slot{ width:100%; height:100%; display:block; }
.mega-thumb::after{ content:""; position:absolute; inset:0; border-radius:0;
  box-shadow:inset 0 0 0 0 var(--brand); transition:box-shadow .25s var(--ease); pointer-events:none; }
.mega-card:hover .mega-thumb::after{ box-shadow:inset 0 0 0 3px var(--brand); }
.mega-label{
  font-family:var(--display); font-weight:600;
  font-size:16px; color:var(--fg); text-transform:none; transition:color .2s;
}
.mega-card:hover .mega-label{ color:var(--brand-tint); }
.hdr .mega-thumb{ background:rgba(255,255,255,.05); }

/* ---------- Vision (smooth editorial flow) ---------- */
.vision-intro{ grid-template-columns:0.82fr 1.18fr; align-items:start; gap:clamp(30px,5vw,76px); }
@media(max-width:880px){ .vision-intro{ grid-template-columns:1fr; } }
.vision-prose{ max-width:66ch; }
.vision-prose .lede{ margin:0 0 22px; }
.vision-prose p:not(.lede){ font-size:16.5px; line-height:1.85; color:var(--fg-soft); margin:0; }
.vision-prose p:not(.lede) + p:not(.lede){ margin-top:18px; }
.vision-figure{ margin-top:clamp(42px,5vw,72px); }

/* ---------- Strategy: cinematic feature with overlaid stats ---------- */
.strat-feature{ position:relative; margin-top:clamp(40px,5vw,72px); overflow:hidden; }
.strat-feature > img{ display:block; width:100%; aspect-ratio:21/9; object-fit:cover; object-position:center 42%; }
.strat-feature::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(17,24,39,.94) 0%, rgba(17,24,39,.55) 24%, rgba(17,24,39,0) 50%); }
.strat-cap{ position:absolute; top:18px; left:18px; z-index:2; }
.strat-stats{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; gap:clamp(24px,5vw,72px); align-items:flex-end;
  padding:clamp(22px,3vw,38px) clamp(22px,3vw,44px); }
.strat-stats .fact{ background:none; padding:0; }
.dark .strat-stats .fact{ background:none; }
@media(max-width:640px){
  .strat-feature > img{ aspect-ratio:4/3; }
  .strat-stats{ flex-wrap:wrap; gap:16px 30px; }
  .strat-feature::after{ background:linear-gradient(0deg, rgba(17,24,39,.96) 0%, rgba(17,24,39,.6) 36%, rgba(17,24,39,0) 62%); }
}

/* ---------- Mobile menu: groups + accordion ---------- */
.mobile-menu{ justify-content:flex-start; gap:0; padding:96px var(--pad) 40px; overflow-y:auto; }
.m-group{ border-bottom:1px solid var(--line-d); }
.m-head{
  font-family:var(--display); font-weight:600; font-size:clamp(21px,7vw,28px);
  color:#E5E7EB; background:none; border:0; width:100%; text-align:left; cursor:pointer;
  padding:15px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; line-height:1.25;
}
.m-head .m-plus{ font-family:var(--mono); font-size:26px; color:var(--secondary); transition:transform .3s var(--ease); flex:0 0 auto; }
.m-group.open .m-head .m-plus{ transform:rotate(45deg); }
.m-group.open .m-head{ color:#fff; }
.m-sub{ overflow:hidden; max-height:0; transition:max-height .42s var(--ease); display:flex; flex-direction:column; }
.m-group.open .m-sub{ max-height:600px; }
.mobile-menu .m-sub a{
  font-family:var(--mono); text-transform:none; font-size:16px; letter-spacing:.01em;
  color:#B8C0CC; padding:11px 0 11px 2px; border:0;
  font-weight:600;
}
.mobile-menu .m-sub a:last-child{ padding-bottom:20px; }
.mobile-menu .m-sub a:hover{ color:var(--secondary); padding-left:8px; }
.mobile-menu .m-direct{
  font-family:var(--display); font-weight:600; font-size:clamp(21px,7vw,28px);
  color:#E5E7EB; padding:15px 0; border-bottom:1px solid var(--line-d);
  line-height:1.25;
}
.mobile-menu .m-direct:hover{ color:var(--secondary); padding-left:10px; }
.mobile-menu .m-cta{ margin-top:30px; align-self:flex-start; border:0; padding:15px 26px; text-transform:none; letter-spacing:.01em; color:var(--brand-dark); }
.mobile-menu .m-portal{ margin-top:12px; align-self:flex-start; border:0; padding:15px 26px; text-transform:none; letter-spacing:.01em;
  color:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.mobile-menu .m-portal:hover{ padding-left:26px; background:#FFFFFF; color:var(--brand-dark); }
.mobile-menu .m-portal svg{ width:22px; height:22px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--nav-bg);
  color:#FFFFFF; overflow:hidden; isolation:isolate;
}
.hero canvas#globe{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
/* darkens the globe behind the headline so the text stays readable */
.hero .vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(17,24,39,.85) 0%, rgba(17,24,39,.35) 40%, transparent 70%);
}
/* city cards on the globe: js/ids.js moves them every frame, beside their beacons */
.globe-tags{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.globe-tag{
  position:absolute; left:0; top:0; opacity:0; will-change:transform, opacity;
  display:flex; flex-direction:column; gap:5px; white-space:nowrap;
  padding:9px 16px 10px 12px; border-left:2px solid var(--secondary);
  background:rgba(17,24,39,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.globe-tag b{ font-weight:600; font-size:15px; line-height:1.1; color:#fff; }
.globe-tag span{ font-size:10.5px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--secondary); font-weight:600; }
.globe-tag[data-hub]{ border-left-color:#fff; }
@media(max-width:759px){ .globe-tags{ display:none; } }

/* ---------- Drawn art (js/ids-art.js) ---------- */
/* flow: light fibres filling a dark block (the earlier hero background) */
[data-art="flow"]{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
[data-art="flow"] canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* campus: navy blueprint of the IDS campus under "Mehr als Produktion"; waits for .play (set on scroll-in) */
.vision-art{ margin-top:clamp(26px,3vw,40px); pointer-events:none; }
.vision-art svg{
  display:block; width:100%; height:auto; overflow:hidden;
  transform:translate(var(--px,0px), var(--py,0px)); transition:transform 1.2s var(--ease);
}
.campus{ --ca:31,74,122; }   /* line colour = --brand, as rgb for the alpha steps */
.campus:not(.play), .campus:not(.play) *,
.hub:not(.play), .hub:not(.play) *,
.wt:not(.play), .wt:not(.play) *{ animation-play-state:paused !important; }
.campus .ca-gl{ fill:none; stroke:rgba(var(--ca),.13); stroke-width:1.6; }
.campus .ca-grid{ animation:caIn 1.6s var(--ease) both; }
.campus .ca-edge{
  fill:none; stroke:rgba(var(--ca),.8); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:caDraw 1.5s var(--ease) var(--d,0s) forwards;
}
.campus .ca-back{ stroke:rgba(var(--ca),.3); }
.campus .ca-site{ stroke:rgba(var(--ca),.45); }
.campus .ca-dim{ stroke:rgba(var(--ca),.45); stroke-width:1.6; }
.campus .ca-face{ stroke:none; opacity:0; animation:caShow 1.2s var(--ease) calc(var(--d,0s) + 1s) forwards; }
.campus .ca-face-l{ fill:rgba(var(--ca),.08); }
.campus .ca-face-r{ fill:rgba(var(--ca),.035); }
.campus .ca-glass{ fill:var(--brand-light); stroke:none; opacity:0; animation:caGlass 4.5s ease-in-out calc(var(--d,0s) + 2s + var(--w,0s)) infinite alternate; }
.campus .ca-win{ fill:var(--brand-light); stroke:none; opacity:0; animation:caWin 6s ease-in-out calc(var(--d,0s) + 2.2s + var(--w,0s)) infinite; }
.campus .ca-name{ fill:var(--brand-dark); font-family:var(--body); font-weight:600; letter-spacing:.14em; opacity:0; animation:caShow 1s ease calc(var(--d,0s) + 1.6s) forwards; }
.campus .ca-note{ fill:rgba(var(--ca),.85); font-family:var(--body); font-weight:600; letter-spacing:.16em; opacity:0; animation:caShow 1.2s ease 2.2s forwards; }
.campus .ca-note-dim{ fill:var(--steel); }
.campus .ca-belt{ fill:none; stroke-width:2.2; stroke-dasharray:6 10; opacity:0; animation:caShow 1s ease 3s forwards, caBelt 1.1s linear 3s infinite; }
.campus .ca-belt-part{ stroke:rgba(47,95,148,.6); }
.campus .ca-belt-person{ stroke:rgba(var(--ca),.4); }
.campus .ca-crate-t{ fill:#D3E2F2; } .campus .ca-crate-l{ fill:#8FB3DA; } .campus .ca-crate-r{ fill:#5A82AE; }
.campus .ca-person{ fill:var(--brand); }
@keyframes caDraw{ to{ stroke-dashoffset:0; } }
@keyframes caShow{ to{ opacity:1; } }
@keyframes caIn{ from{ opacity:0; } }
@keyframes caBelt{ to{ stroke-dashoffset:-16; } }
@keyframes caGlass{ 0%{ opacity:.06; } 100%{ opacity:.22; } }
@keyframes caWin{ 0%,100%{ opacity:.1; } 45%,60%{ opacity:.55; } }
@media(prefers-reduced-motion:reduce){
  .campus *{ animation:none !important; }
  .campus .ca-edge{ stroke-dashoffset:0; }
  .campus .ca-face, .campus .ca-name, .campus .ca-note, .campus .ca-belt{ opacity:1; }
  .campus .ca-glass{ opacity:.25; } .campus .ca-win{ opacity:.6; }
  .vision-art svg{ transition:none; }
}
.hero .wrap{ position:relative; z-index:2; width:100%; padding-block:120px; }
.hero h1{ max-width:14ch; }
.hero h1 em{ font-style:normal; color:var(--secondary); }
.hero .sub{
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.6vw,22px); margin-top:22px; max-width:46ch;
  color:#B8C0CC;
  line-height:1.4;
}
.hero .support{ max-width:54ch; margin-top:26px; color:#B8C0CC; color:#B8C0CC; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero .slogan-badge{
  position:absolute; right:var(--pad); bottom:34px; z-index:2; text-align:right;
  font-family:var(--display); font-weight:500;
  font-size:clamp(11px,1.1vw,12px); letter-spacing:.06em; color:#9CA3AF;
  line-height:1.25;
}
.hero .slogan-badge b{ color:var(--secondary); font-weight:600; display:block; font-size:1.5em; letter-spacing:.06em; }
@media(max-width:680px){ .hero .slogan-badge{ display:none; } }

/* ---------- Kicker row / section heads ---------- */
.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,68px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .kicker{ margin-bottom:22px; }
.sec-head p{ margin-top:22px; }

/* ---------- Cards: blueprint ticks (removed for a cleaner look) ---------- */
.tick-card{ position:relative; }

/* Division cards (Was wir anbieten) */
.div-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); }
@media(max-width:980px){ .div-cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .div-cards{ grid-template-columns:1fr; } }
.div-card{
  background:var(--paper); padding:30px 26px 28px; position:relative;
  display:flex; flex-direction:column; min-height:362px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.dark .div-card{ background:var(--ink-2); border-color:var(--line-d); }
.div-card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--brand); opacity:0;
  transition:transform .45s var(--ease); }
.div-card:hover{ border-color:var(--brand); }
.div-card:hover::before{ opacity:1; }
.dc-idx{ position:absolute; top:24px; right:26px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--line); font-weight:600; transition:color .3s var(--ease); display:none; }
.dc-ico{ width:auto; height:auto; border-radius:0; background:none;
  display:flex; align-items:center; justify-content:flex-start; margin-bottom:22px; }
.dc-ico .glyph{ width:30px; height:30px; margin:0; color:var(--brand); transition:.4s var(--ease); }
.div-card h3{ font-family:var(--display); font-weight:600; font-size:20px; margin:0 0 5px; line-height:1.25; min-height:calc(2 * 25px * 1.05); display:flex; align-items:flex-end; color:var(--fg); }
.dark .div-card h3{ color:#FFFFFF; }
.div-card .sub-sm{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-dark); margin-bottom:14px; font-weight:600; }
.div-card p{ font-size:14.5px; line-height:1.6; color:var(--fg-soft); margin:0; }
.dc-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.dc-tags span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--steel);
  border:1px solid var(--line); border-radius:0; padding:5px 10px; line-height:1; transition:.3s var(--ease); font-weight:600; }
.div-card:hover .dc-tags span{ border-color:rgba(31,74,122,.4); color:var(--brand-dark); }
.div-card .go{ margin-top:auto; padding-top:22px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); display:inline-flex; align-items:center; gap:8px; transition:.4s var(--ease); font-weight:700; }
.div-card .go svg{ transition:transform .35s var(--ease); }
.div-card:hover .go{ color:var(--brand); gap:12px; }
.div-card:hover .go svg{ transform:translateX(4px); }

/* ---------- Klare Ziele. Starke Partner (index #strategie): numbers row + three white partner cards ---------- */
/* tighter rhythm than a default .section: less padding around and between the blocks */
#strategie.section{ padding-block:clamp(56px,7vw,100px); }
.pt-stats{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(28px,3vw,40px); border-block:1px solid var(--line-d); }
.pt-stats .fact{ background:none; padding:clamp(14px,1.6vw,20px) 0; }
.pt-stats .fact + .fact{ border-left:1px solid var(--line-d); padding-left:clamp(20px,3vw,40px); }
.pt-stats .fact .big{ color:var(--secondary); font-size:clamp(32px,3vw,44px); }
.pt-stats .fact .lbl{ margin-top:6px; }
.pt-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px); margin-top:clamp(20px,2.4vw,32px); }
.pt-card{ position:relative; display:flex; flex-direction:column; background:#FFFFFF; color:var(--fg); overflow:hidden; }
/* navy hover bar along the top of the white card, as on .div-card */
.pt-card::before{ content:""; position:absolute; left:0; top:0; z-index:3; width:100%; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.pt-card:hover::before, .pt-card:focus-visible::before{ transform:scaleX(1); }
.pt-card:focus-visible{ outline:2px solid var(--secondary); outline-offset:3px; }
.pt-media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-2); }
.pt-media image-slot{ position:absolute; inset:0; width:100%; height:100%; transition:transform 1.2s var(--ease); }
.pt-media image-slot::part(frame){ background:transparent; }
.pt-card:hover .pt-media image-slot{ transform:scale(1.04); }
.pt-body{ display:flex; flex-direction:column; flex:1; padding:clamp(18px,1.6vw,24px); }
.pt-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--brand); margin-bottom:6px; }
.pt-body h3{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1.25; margin:0 0 8px; color:var(--fg); }
.dark .pt-body p{ margin:0 0 16px; font-size:14.5px; line-height:1.6; color:var(--fg-soft); }
/* footer sits at the bottom so the three cards line up */
.pt-foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; border-top:1px solid var(--line); }
.pt-logo{ height:26px; width:auto; }
.pt-unit{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--brand-dark); }
.pt-card .go{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--brand); white-space:nowrap; transition:gap .35s var(--ease); }
.pt-card .go svg{ transition:transform .35s var(--ease); }
.pt-card:hover .go{ gap:12px; }
.pt-card:hover .go svg{ transform:translateX(4px); }
/* software card: Sinnphonie wired to the four divisions, data flowing out; a dropped photo covers it */
.pt-soft{ background:radial-gradient(circle at 50% 50%, #1D4672 0%, var(--brand-dark) 72%); }
.pt-soft::before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.6px) 0 0 / 16px 16px; }
.pt-soft image-slot::part(empty){ opacity:0; }
.pt-net{ position:absolute; inset:0; width:100%; height:100%; }
.pt-net line{ stroke:rgba(255,255,255,.45); stroke-width:1.6; stroke-dasharray:5 7; animation:ptFlow 1.4s linear infinite; }
.pt-net .node{ fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.6); stroke-width:1.6; }
.pt-net use{ color:#FFFFFF; }
.pt-net .hub{ fill:rgba(143,179,218,.16); stroke:var(--secondary); stroke-width:2.4; }
.pt-net text{ fill:#FFFFFF; font-family:var(--body); font-weight:700; font-size:22px; }
@keyframes ptFlow{ to{ stroke-dashoffset:-12; } }
@media(max-width:860px){ .pt-cards{ grid-template-columns:1fr; max-width:560px; } }
@media(max-width:560px){
  .pt-stats{ grid-template-columns:1fr; }
  .pt-stats .fact + .fact{ border-left:0; border-top:1px solid var(--line-d); padding-left:0; }
}
@media(prefers-reduced-motion:reduce){ .pt-net line{ animation:none; } .pt-media image-slot, .pt-card::before{ transition:none; } }

/* ---------- Entdecken Sie IDS — photo cards into each area (index #angebot) ----------
   Same language as .div-card and .media: square, ink scrim, light-blue top bar on hover.
   3 columns: one wide + one normal card per row, the wide one zig-zagging, so the
   order reads left to right.  2 columns: equal cards.  1 column below 560px. */
.ex-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(250px,21vw,310px); gap:clamp(14px,1.4vw,20px); }
.ex-tile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; background:var(--brand-dark); color:#FFFFFF; }
.ex-tile.wide{ grid-column:span 2; }
.ex-tile image-slot{ position:absolute; inset:0; width:100%; height:100%; transition:transform .9s var(--ease); }
.ex-tile image-slot::part(frame){ background:var(--brand-dark); }
.ex-tile image-slot::part(empty){ opacity:0; }   /* no photo yet: plain navy card */
/* ink scrim from the bottom so the copy reads on any photo (as .media .grade) */
.ex-tile::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(17,24,39,0) 25%, rgba(17,24,39,.55) 60%, rgba(17,24,39,.88) 100%);
}
/* light-blue hover bar along the top, as on .div-card */
.ex-tile::before{
  content:""; position:absolute; left:0; top:0; z-index:3; width:100%; height:3px;
  background:var(--secondary); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.ex-body{ position:relative; z-index:2; padding:clamp(20px,2vw,30px); }
.ex-body h3{ font-family:var(--display); font-weight:600; font-size:clamp(20px,1.8vw,25px); line-height:1.2; margin:0 0 8px; color:#FFFFFF; }
.ex-body p{ margin:0; max-width:44ch; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.78); }
.ex-body .go{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#FFFFFF;
  transition:gap .35s var(--ease);
}
.ex-body .go svg{ transition:transform .35s var(--ease); }
.ex-tile:hover image-slot, .ex-tile:focus-visible image-slot{ transform:scale(1.04); }
.ex-tile:hover::before, .ex-tile:focus-visible::before{ transform:scaleX(1); }
.ex-tile:hover .go, .ex-tile:focus-visible .go{ gap:12px; }
.ex-tile:hover .go svg, .ex-tile:focus-visible .go svg{ transform:translateX(4px); }
.ex-tile:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
@media(max-width:880px){
  .ex-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:clamp(240px,40vw,300px); }
  .ex-tile.wide{ grid-column:auto; }
}
@media(max-width:560px){
  .ex-grid{ grid-template-columns:1fr; grid-auto-rows:minmax(250px, auto); }
}
@media(prefers-reduced-motion:reduce){ .ex-tile image-slot, .ex-tile::before{ transition:none; } }
/* a navy veil over the photos, the hero's shadow in brand colour (strongest top-left, same 118°),
   that also softly blurs the photo behind it (backdrop-filter: one layer, no soft edges);
   it fades away on hover. Touch screens can't hover: a lighter veil there, no blur. */
.ex-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(118deg, rgba(15,47,82,.9) 0%, rgba(15,47,82,.72) 30%, rgba(15,47,82,.45) 62%, rgba(15,47,82,.28) 100%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:opacity .7s var(--ease); }
.ex-tile:hover .ex-shade, .ex-tile:focus-visible .ex-shade{ opacity:0; }
.ex-tile.is-soon .ex-shade{ display:none; }   /* the coming-soon cards stay plain charcoal */
@media(hover:none){ .ex-shade{ opacity:.6; -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media(prefers-reduced-motion:reduce){ .ex-shade{ transition:none; } }

/* ---------- IDS Metal (coming 2028) and IDS Academy (coming 2030) — the user's call, 2026-10-12 ----------
   Everywhere they're linked — explore tiles, mega menu, phone menu, footer, in-page cards — the
   element keeps its place but loses its href (class .is-soon), goes grey and carries a .soon-tag. */
.is-soon{ cursor:default; pointer-events:none; }
.soon-tag{ display:inline-flex; align-items:center; padding:5px 8px; border:1px solid currentColor; line-height:1; white-space:nowrap; vertical-align:middle;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.is-soon image-slot{ filter:grayscale(1); }
/* menus, footer and small cards simply fade */
.mobile-menu .m-sub a.is-soon, .footer .col a.is-soon, .div-card.is-soon, .pl-unit.is-soon, .mt-node.is-soon{ opacity:.5; }
/* mega menu cards: no photo, the same charcoal as their explore tiles below (navy frame,
   greyed and dimmed, under the same bottom scrim); only the name fades */
.mega-card.is-soon .mega-thumb{ border-color:transparent; }
.mega-card.is-soon image-slot{ filter:grayscale(1) brightness(.7); }
.mega-card.is-soon image-slot::part(frame){ background:var(--brand-dark); }
.mega-card.is-soon image-slot::part(empty){ opacity:0; }
.mega-card.is-soon .mega-thumb::after{ background:linear-gradient(180deg, rgba(17,24,39,0) 25%, rgba(17,24,39,.55) 60%, rgba(17,24,39,.88) 100%); }
.mega-card.is-soon .mega-label{ opacity:.55; }
.mobile-menu .m-sub a.is-soon .soon-tag, .footer .col a.is-soon .soon-tag, .mega-label .soon-tag{ margin-left:8px; padding:3px 6px; font-size:9.5px; }
.div-card.is-soon .soon-tag, .mt-node.is-soon .soon-tag{ margin-top:16px; align-self:flex-start; }
.pl-unit.is-soon .soon-tag{ margin-top:10px; }
/* explore tiles: the photo turns grey and dim, the copy stays readable on it */
.ex-tile.is-soon{ background:#4B5563; }
.ex-tile.is-soon image-slot{ filter:grayscale(1) brightness(.7); }
.ex-tile.is-soon .soon-tag{ margin-top:16px; padding:7px 11px; font-size:11.5px; color:#FFFFFF; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); }

/* ---------- Empowering Women (natural, single background) ---------- */
.ew-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,76px); align-items:center; }
.ew-lead{ margin:22px 0 0; font-size:17px; line-height:1.7; color:var(--fg-soft); max-width:46ch; }
.ew-themes{ margin-top:clamp(30px,3.5vw,46px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,34px); }
.ew-theme .n{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--brand); }
.ew-theme h4{ font-family:var(--display); font-weight:600; font-size:15px; margin:8px 0 5px; color:var(--fg); line-height:1.25; }
.ew-theme p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--fg-soft); }
.ew-cta{ margin-top:clamp(32px,3.5vw,46px); }
.ew-media{ position:relative; align-self:stretch; min-height:clamp(440px,48vw,580px); }
.ew-photo{ position:absolute; inset:0; overflow:hidden; z-index:1; }
.ew-photo image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.ew-grade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(17,24,39,.6) 0%, transparent 36%),
             linear-gradient(112deg, rgba(17,24,39,.26) 0%, transparent 44%); }
.ew-cap{ position:absolute; left:16px; bottom:16px; z-index:4; margin:0; }
@media(max-width:880px){
  .ew-grid{ grid-template-columns:1fr; }
  .ew-media{ min-height:clamp(340px,64vw,460px); }
}
@media(max-width:480px){ .ew-themes{ grid-template-columns:1fr; gap:20px; } }
/* spec-style theme list */
.ew-list{ margin-top:clamp(26px,3vw,40px); }
.ew-item{ display:grid; grid-template-columns:0.4fr 0.6fr; gap:clamp(16px,2vw,30px); padding:17px 0; border-top:1px solid var(--line); align-items:baseline; }
.ew-item:last-of-type{ border-bottom:1px solid var(--line); }
.ew-item h4{ font-family:var(--display); font-weight:600; font-size:14px; margin:0; color:var(--fg); position:relative; padding-left:16px; transition:color .25s var(--ease); line-height:1.25; }
.ew-item h4::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; background:var(--brand); opacity:0; transition:transform .3s var(--ease); }
.ew-item:hover h4::before{ opacity:1; }
.ew-item:hover h4{ color:var(--brand-dark); }
.ew-item p{ margin:0; font-size:14px; line-height:1.55; color:var(--fg-soft); }
@media(max-width:560px){ .ew-item{ grid-template-columns:1fr; gap:5px; } .ew-item h4{ padding-left:14px; } }

/* ---------- Frauen stärken teaser (index #frauen): blush section in the Frauen page's palette ----------
   Starts in the grey of the section above and melts into blush; burgundy takes over the accents
   (cap tag, markers, button) through the brand tokens. The motion waits for .in (ids.js reveal). */
#frauen{
  --rose:#C78FA3; --burgundy:#6B2A47; --burgundy-dark:#4A1A31;
  --brand:var(--burgundy); --brand-dark:var(--burgundy-dark); --line:#E9DCE2; --fg-soft:#5F5560;
  overflow:hidden; isolation:isolate;
}
#frauen::before, #frauen::after{ content:""; position:absolute; z-index:-1; pointer-events:none; }
#frauen::before{ inset:0; background:linear-gradient(180deg, #F4F4F4 0%, #F8F1F4 24%, #F3E3EA 100%); }
#frauen::after{
  inset:-20%;
  background:
    radial-gradient(30% 36% at 26% 58%, rgba(199,143,163,.34) 0%, rgba(199,143,163,0) 70%),
    radial-gradient(28% 34% at 76% 34%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(24% 30% at 70% 82%, rgba(199,143,163,.22) 0%, rgba(199,143,163,0) 70%);
}
#frauen .ew-grade{
  background:linear-gradient(to top, rgba(46,17,33,.55) 0%, transparent 36%),
             linear-gradient(112deg, rgba(107,42,71,.22) 0%, transparent 44%);
}
#frauen .ew-photo image-slot::part(frame){ background:#E9D3DC; }
/* markers in rose beside each point */
#frauen .ew-item h4::before{ opacity:1; background:var(--rose); transform-origin:top; }
#frauen .ew-item:hover h4::before{ background:var(--burgundy); }

/* the photo's opening: dusty-rose circuit board with a ♀ drawing itself, then the panel wipes away.
   Only exists once js/ids-art.js marks it .ready (and never for reduced motion), so the photo is never stuck behind it. */
#frauen .ew-curtain{ display:none; }
#frauen .ew-curtain.ready{
  display:block; position:absolute; inset:0; z-index:5; pointer-events:none; clip-path:inset(0 0 0 0);
  background:
    radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.6px) 0 0 / 18px 18px,
    radial-gradient(circle at 50% 38%, #D9AABB 0%, var(--rose) 64%);
}
#frauen .ew-curtain.play{ animation:curtainOut .95s cubic-bezier(.77,0,.18,1) 2.6s forwards; }
#frauen .ew-curtain svg{ position:absolute; inset:0; width:100%; height:100%; }
@keyframes curtainOut{ to{ clip-path:inset(0 0 0 100%); } }
@keyframes wtPop{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
@keyframes wtGlow{ from{ opacity:.45; } to{ opacity:.8; } }
.wt .wt-line{ fill:none; stroke:#FFFFFF; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:caDraw .75s var(--ease) var(--d,0s) forwards; }
.wt .wt-main{ stroke-width:7; }
.wt .wt-thin{ stroke-width:1.8; stroke-opacity:.7; }
.wt .wt-pin{ stroke-width:2.4; animation-duration:.5s; }
.wt .wt-trace{ stroke-width:2.6; stroke-opacity:.9; }
.wt .wt-chip{ opacity:0; animation:caShow .5s ease .45s forwards; }
.wt .wt-chip rect{ fill:rgba(255,255,255,.14); stroke:#FFFFFF; stroke-width:2.6; }
.wt .wt-chip .wt-die{ fill:var(--burgundy); stroke:none; opacity:.45; animation:wtGlow 1.1s ease-in-out 1.3s infinite alternate; }
.wt .wt-chip text{ fill:#FFFFFF; font-family:var(--body); font-weight:700; font-size:15px; letter-spacing:.08em; }
.wt .wt-pad{ fill:var(--rose); stroke:#FFFFFF; stroke-width:2.6; opacity:0; transform-box:fill-box; transform-origin:center; animation:wtPop .4s var(--ease) var(--d,0s) forwards; }
.wt .wt-pulse circle{ fill:#FFFFFF; }
.wt .wt-pulse .wt-glow{ fill:#FFFFFF; opacity:.35; }
@media(prefers-reduced-motion:reduce){ #frauen .ew-curtain{ display:none !important; } }

@media (prefers-reduced-motion: no-preference){
  @keyframes blushDrift{ to{ transform:translate(-5%, 4%) scale(1.08); } }
  /* the section turns pink as it arrives; the glows then keep drifting */
  #frauen::before, #frauen::after{ opacity:0; transition:opacity 1.8s var(--ease); }
  #frauen.in::before, #frauen.in::after{ opacity:1; }
  #frauen.in::after{ animation:blushDrift 22s ease-in-out 1.8s infinite alternate; }
  /* photo: settles from a slight zoom as the circuit panel (below) wipes away */
  #frauen .ew-photo image-slot{ transform:scale(1.1); transition:transform 1.9s var(--ease) .25s; }
  #frauen.in .ew-photo:not(:has(.ew-curtain.ready)) image-slot,
  #frauen .ew-photo:has(.ew-curtain.play) image-slot{ transform:none; }
  #frauen .ew-photo:has(.ew-curtain.play) image-slot{ transition-delay:2.6s; }
  /* copy rises line by line; the markers grow in turn */
  #frauen .ew-text > *{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  #frauen.in .ew-text > *{ opacity:1; transform:none; }
  #frauen.in .ew-text > :nth-child(1){ transition-delay:.3s; }
  #frauen.in .ew-text > :nth-child(2){ transition-delay:.45s; }
  #frauen.in .ew-text > :nth-child(3){ transition-delay:.6s; }
  #frauen.in .ew-text > :nth-child(4){ transition-delay:.75s; }
  #frauen .ew-item h4::before{ transform:scaleY(0); transition:transform .5s var(--ease), background-color .25s var(--ease); }
  #frauen.in .ew-item h4::before{ transform:none; }
  #frauen.in .ew-item:nth-child(1) h4::before{ transition-delay:1s, 0s; }
  #frauen.in .ew-item:nth-child(2) h4::before{ transition-delay:1.12s, 0s; }
  #frauen.in .ew-item:nth-child(3) h4::before{ transition-delay:1.24s, 0s; }
  #frauen.in .ew-item:nth-child(4) h4::before{ transition-delay:1.36s, 0s; }
}

/* Info blocks (blue rounded) */
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:760px){ .info-grid{ grid-template-columns:1fr; } }
.info-block{
  background:var(--brand); color:#fff; border-radius:var(--r); padding:30px 30px 28px;
  position:relative; overflow:hidden; transition:.35s var(--ease);
}
.info-block.alt{ background:var(--ink); }
.info-block .num{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; opacity:.7; }
.info-block h4{ font-family:var(--display); font-weight:600; font-size:20px; margin:14px 0 8px; line-height:1.25; }
.info-block p{ margin:0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86); }

/* ---------- Stats / facts ---------- */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.dark .facts{ background:var(--line-d); border-color:var(--line-d); }
.fact{ background:var(--bg); padding:30px 26px; }
.dark .fact{ background:var(--brand-dark); }
.fact .big{ font-family:var(--display); font-weight:300; font-size:clamp(40px,4.4vw,60px); line-height:1; color:var(--accent); }
.fact .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin-top:10px; font-weight:600; }
.dark .fact .lbl{ color:var(--steel-2); }

/* facts list (bulleted technical) */
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{
  display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--line);
  font-size:15.5px; align-items:baseline;
}
.dark .spec-list li{ border-color:var(--line-d); }
.spec-list li::before{
  content:""; flex:0 0 7px; width:7px; height:7px; margin-top:7px;
  border:1.5px solid var(--accent); border-radius:50%;
}
.spec-list li b{ font-weight:600; }

/* ---------- Placeholder media ---------- */
.ph{
  position:relative; background:
    repeating-linear-gradient(135deg, rgba(31,74,122,.05) 0 12px, transparent 12px 24px),
    var(--mist);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; align-items:flex-end; min-height:280px; color:var(--steel);
}
.dark .ph{ background:
    repeating-linear-gradient(135deg, rgba(143,179,218,.07) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border-color:var(--line-d); }
.ph .ph-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 13px; background:var(--brand); color:#fff; border-radius:0; margin:14px;
  display:flex; align-items:center; gap:8px;
  font-weight:600;
}
.ph svg.ph-globe{ position:absolute; inset:0; margin:auto; width:60%; opacity:.18; color:var(--brand); }

/* ---------- Process timeline ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
@media(max-width:760px){ .flow{ grid-template-columns:1fr; } }
.flow-step{ position:relative; padding:0 22px; }
.flow-step .node{
  width:54px; height:54px; border-radius:50%; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono);
  font-size:14px; color:var(--accent); background:var(--bg); position:relative; z-index:2;
}
.dark .flow-step .node{ background:var(--brand-dark); }
/* dashed connector from this node to the next step's node */
.flow-step::before{
  content:""; position:absolute; left:76px; right:-22px; top:27px; height:1px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 6px, transparent 6px 12px); opacity:.5;
}
.flow-step:last-child::before{ display:none; }
@media(max-width:760px){ .flow{ gap:30px; } .flow-step::before{ display:none; } }
.flow-step h4{ font-family:var(--display); font-weight:600; font-size:17px; margin:20px 0 6px; line-height:1.25; }
.flow-step p{ font-size:14.5px; color:var(--fg-soft); margin:0; }
.flow-step .node .fnode-dot{ width:11px; height:11px; border-radius:50%; background:var(--brand); display:block; }
/* Tech feature row (clean, minimal) */
.tech-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(26px,3vw,48px); }
@media(max-width:820px){ .tech-feats{ grid-template-columns:1fr 1fr; gap:34px 30px; } }
@media(max-width:480px){ .tech-feats{ grid-template-columns:1fr; } }
.tech-feat{ padding-top:22px; border-top:2px solid var(--line); }
.tech-feat h4{ font-family:var(--display); font-weight:600; font-size:16px; margin:0 0 8px; line-height:1.25; color:var(--fg); }
.tech-feat p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--fg-soft); }

/* ---------- Vertrieb · "Von der Maschine zur Produktion" (js/ids-art.js · cell) ----------
   Line drawing in navy on white: the machine, then what IDS supplies around it, then production. */
.cell-art{ margin-top:clamp(28px,3.6vw,52px); max-width:520px; }
.mcell{ display:block; width:100%; height:auto; overflow:visible; --run:5s; }
.mcell rect, .mcell path, .mcell circle{ fill:var(--paper); stroke:var(--brand); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.mcell path{ fill:none; }
.mcell path[d$="Z"]{ fill:var(--paper); }                 /* closed shapes: hopper, feet, speech bubble */
.mcell .cl-ground{ stroke:var(--line); stroke-width:1.2; }
.mcell .cl-mould{ fill:var(--mist); }
.mcell .cl-screen{ fill:var(--brand-tint); stroke:none; }
.mcell .cl-hose{ stroke:var(--brand-tint); stroke-width:2.4; }
.mcell .cl-flow{ stroke:var(--brand-light); stroke-width:2.4; stroke-dasharray:.025 .06; opacity:0; }
.mcell .cl-dash{ stroke:var(--brand-light); stroke-dasharray:.035 .03; }
.mcell .cl-pile{ fill:var(--brand-tint); stroke-width:1.2; }
.mcell .cl-part{ fill:var(--brand); stroke:none; opacity:0; }
.mcell .cl-led{ fill:var(--brand-light); stroke:none; }
.mcell text{ stroke:none; }
.mcell .cl-lab, .mcell .cl-status, .mcell .cl-unit{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; fill:var(--steel); }
.mcell .cl-lab-in{ fill:var(--brand); font-size:11px; }
.mcell .cl-status{ fill:var(--brand-dark); font-size:11px; }
.mcell .cl-tally{ font-family:var(--display); fill:var(--brand); }
.mcell .cl-count{ font-size:22px; font-weight:700; }
/* drawing in: each module fades up at --d while its outlines draw */
.mcell .cl-mod{ opacity:0; transition:fill-opacity .3s var(--ease), stroke-opacity .3s var(--ease); }
.mcell [pathLength]:not(.cl-flow):not(.cl-dash){ stroke-dasharray:1; stroke-dashoffset:1; }
.mcell.play .cl-ground{ animation:clDraw 1s var(--ease) .1s forwards; }
.mcell.play .cl-mod{ animation:clIn .7s var(--ease) var(--d) forwards; }
.mcell.play .cl-mod [pathLength]:not(.cl-flow):not(.cl-dash){ animation:clDraw 1.2s var(--ease) var(--d) forwards; }
/* production, one 4.8 s cycle: mould opens, robot picks the part, sets it on the belt, it drops into the crate */
.mcell.play .cl-mov{ animation:clMould 4.8s var(--ease) var(--run) infinite; }
.mcell.play .cl-arm{ animation:clArm 4.8s ease-in-out var(--run) infinite; }
.mcell.play .cl-part{ animation:clPart 4.8s ease-in-out var(--run) infinite; }
.mcell.play .cl-flow{ animation:clFlow 1.4s linear var(--run) infinite, clShow .5s var(--ease) var(--run) forwards; }
.mcell.play .cl-led{ animation:clLed 1.6s ease-in-out var(--run) infinite; }
/* a chip beside the drawing is hovered: everything else steps back */
.mcell .cl-mod.dim{ fill-opacity:.1; stroke-opacity:.16; }
.vt-incl span[data-hl]{ cursor:default; transition:border-color .2s var(--ease), color .2s var(--ease); }
.vt-incl span[data-hl]:hover{ border-color:var(--brand); color:var(--brand); }
@keyframes clIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes clDraw{ to{ stroke-dashoffset:0; } }
@keyframes clShow{ to{ opacity:.9; } }
@keyframes clFlow{ to{ stroke-dashoffset:-.085; } }
@keyframes clLed{ 50%{ opacity:.25; } }
@keyframes clMould{ 0%{ transform:translateX(0); } 4%, 24%{ transform:translateX(-12px); } 30%, 100%{ transform:translateX(0); } }
@keyframes clArm{
  0%{ transform:translate(0,0); } 8%, 16%{ transform:translate(0,34px); } 26%{ transform:translate(0,0); }
  46%{ transform:translate(-113px,0); } 56%, 62%{ transform:translate(-113px,72px); } 70%{ transform:translate(-113px,0); }
  92%, 100%{ transform:translate(0,0); } }
@keyframes clPart{
  0%, 8%{ transform:translate(0,34px); opacity:0; } 12%, 16%{ transform:translate(0,34px); opacity:1; } 26%{ transform:translate(0,0); }
  46%{ transform:translate(-113px,0); } 56%, 62%{ transform:translate(-113px,72px); } 80%{ transform:translate(-161px,72px); }
  84%{ transform:translate(-182px,80px); } 90%{ transform:translate(-182px,122px); opacity:1; }
  94%, 100%{ transform:translate(-182px,122px); opacity:0; } }
@media(prefers-reduced-motion:reduce){
  .mcell .cl-mod{ opacity:1; animation:none !important; }
  .mcell [pathLength]{ stroke-dashoffset:0 !important; animation:none !important; }
  .mcell .cl-arm, .mcell .cl-part, .mcell .cl-mov, .mcell .cl-led{ animation:none !important; }
  .mcell .cl-flow, .mcell .cl-tally{ display:none; }
}

/* ---------- Rahovec: location advantages ---------- */
.rh-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,72px); align-items:end; }
@media(max-width:820px){ .rh-head{ grid-template-columns:1fr; gap:18px; } }
.rh-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(20px,2.2vw,34px); margin-top:clamp(42px,5vw,66px); }
@media(max-width:960px){ .rh-grid{ grid-template-columns:repeat(3,1fr); gap:34px 26px; } }
@media(max-width:620px){ .rh-grid{ grid-template-columns:1fr 1fr; gap:30px 22px; } }
.rh-adv{ padding-top:20px; border-top:1px solid var(--line); }
.rh-ico{ display:block; width:30px; height:30px; color:var(--brand); margin-bottom:16px; }
.rh-ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rh-adv h4{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--fg); margin:0 0 7px; line-height:1.25; }
.rh-adv p{ margin:0; font-size:13px; line-height:1.55; color:var(--fg-soft); }

/* Rahovec: map (js/ids-art.js → hub) beside the five advantages as a list */
.rh-split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:center; }
.rh-side .lede{ margin:0 0 clamp(22px,2.4vw,32px); }
.rh-map svg{ display:block; width:100%; height:auto; }
.rh-list .rh-adv{ display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:18px; padding:16px 0; border-top:1px solid var(--line); }
.rh-list .rh-adv:last-child{ border-bottom:1px solid var(--line); }
.rh-list .rh-ico{ grid-row:span 2; width:28px; height:28px; margin:1px 0 0; }
.rh-list .rh-adv h4{ font-size:16px; margin:0 0 3px; transition:color .3s var(--ease); }
.rh-list .rh-adv p{ font-size:14.5px; }
.rh-list .rh-adv:hover h4{ color:var(--brand); }
@media(max-width:880px){ .rh-split{ grid-template-columns:1fr; } }

/* hub map — navy blueprint on the light section; waits for .play (set on scroll-in) */
.hub{ --ca:31,74,122; font-family:var(--body); }
.hub .hb-grat line{ stroke:rgba(var(--ca),.1); stroke-width:1.2; }
.hub .hb-grat{ animation:caIn 1.2s var(--ease) both; }
.hub .hb-sea{ fill:rgba(var(--ca),.1); opacity:0; animation:caShow 1.2s var(--ease) 1s forwards; }
.hub .hb-lake{ stroke:rgba(var(--ca),.35); stroke-width:1.4; }
.hub .hb-river{ fill:none; stroke:rgba(var(--ca),.28); stroke-width:1.4; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:caDraw 2.4s var(--ease) .8s forwards; }
.hub .hb-coast{ fill:none; stroke:rgba(var(--ca),.6); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:caDraw 2s var(--ease) var(--d,0s) forwards; }
.hub .hb-sea-name{ fill:rgba(var(--ca),.5); font-size:15px; font-style:italic; letter-spacing:.2em; text-transform:uppercase; opacity:0; animation:caShow 1.2s ease 2s forwards; }
.hub .hb-route{ transition:opacity .35s var(--ease); }
.hub .hb-line{ fill:none; stroke:rgba(var(--ca),.75); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:caDraw 1.1s var(--ease) var(--d,0s) forwards; }
.hub .hb-arrow{ stroke-dasharray:none; stroke-dashoffset:0; stroke-linejoin:round; opacity:0; animation:caShow .4s ease calc(var(--d,0s) + 1s) forwards; }
.hub .hb-line-sea{ stroke-dasharray:7 9; stroke-dashoffset:0; opacity:0; animation:caShow .8s ease var(--d,0s) forwards, caBelt 1.1s linear var(--d,0s) infinite; }
.hub .hb-node{ fill:#FFFFFF; stroke:var(--brand); stroke-width:2.4; opacity:0; animation:caShow .5s ease calc(var(--d,0s) + .9s) forwards; }
.hub .hb-name{ fill:var(--brand-dark); font-size:19px; font-weight:600; opacity:0; animation:caShow .8s ease calc(var(--d,0s) + 1s) forwards; }
/* Ljubljana and Lennestadt: filled marker and a heavier name */
.hub .hb-node-key{ fill:var(--brand); stroke:#FFFFFF; stroke-width:2.6; }
.hub .hb-name-key{ font-size:21px; font-weight:700; }
.hub .hb-sub{ fill:var(--steel); font-size:13.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:0; animation:caShow .8s ease calc(var(--d,0s) + 1.1s) forwards; }
.hub .hb-pulse{ fill:var(--brand-light); stroke:#FFFFFF; stroke-width:1.5; }
.hub .hb-core{ fill:var(--brand); stroke:#FFFFFF; stroke-width:3; opacity:0; animation:caShow .5s ease 1.2s forwards; }
.hub .hb-ring{ fill:none; stroke:var(--brand-light); stroke-width:2.2; opacity:0; transform-box:fill-box; transform-origin:center; animation:hbRing 2.8s ease-out 1.8s infinite; }
.hub .hb-ring-2{ animation-delay:3.2s; }
.hub .hb-hub-name{ fill:var(--brand-dark); font-size:24px; font-weight:700; opacity:0; animation:caShow .8s ease 1.4s forwards; }
.hub .hb-hub-sub{ fill:var(--steel); font-size:13.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:0; animation:caShow .8s ease 1.5s forwards; }
@keyframes hbRing{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(4.2); } }
/* an advantage under the pointer: its routes stay, the rest step back */
.hub[data-hl] .hb-route{ opacity:.18; }
.hub[data-hl="near"] .r-near, .hub[data-hl="eu"] .r-eu, .hub[data-hl="port"] .r-port{ opacity:1; }
.hub[data-hl="hub"] .hb-ring{ stroke-width:3.2; }
/* phones: the map renders ~340px wide, so labels grow and the small print goes */
@media(max-width:560px){
  .hub .hb-name{ font-size:30px; }
  .hub .hb-hub-name{ font-size:34px; }
  .hub .hb-name-key{ font-size:32px; }
  .hub .hb-sub, .hub .hb-hub-sub, .hub .hb-sea-name, .hub .hb-minor text{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .hub *{ animation:none !important; }
  .hub .hb-coast, .hub .hb-line, .hub .hb-river{ stroke-dashoffset:0; }
  .hub .hb-sea, .hub .hb-sea-name, .hub .hb-line-sea, .hub .hb-node, .hub .hb-name, .hub .hb-sub, .hub .hb-core, .hub .hb-hub-name, .hub .hb-hub-sub{ opacity:1; }
}
/* tighten the gap between the two adjacent light sections */
#rahovec{ padding-bottom:clamp(44px,5vw,72px); }
#frauen{ padding-top:clamp(44px,5vw,72px); }

/* ---------- Expertise & Team: the three points as one white panel (left) + team photo (right) ---------- */
.exp-split{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(20px,2.4vw,36px); margin-top:clamp(36px,4vw,56px); align-items:start; }
.exp-list{ background:var(--paper); border:1px solid var(--line); }
.exp-item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.4vw,20px); align-items:start; padding:clamp(18px,1.7vw,24px) clamp(18px,2vw,28px); }
.exp-item + .exp-item{ border-top:1px solid var(--line); }
.exp-ico{ display:grid; place-items:center; width:44px; height:44px; background:var(--brand); color:#FFFFFF; }
.exp-ico .glyph{ width:24px; height:24px; }
/* title with its small unit label on the same line */
.exp-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin-bottom:6px; }
.exp-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); font-weight:600; }
.exp-item h4{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--fg); margin:0; line-height:1.25; }
.exp-item p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--fg-soft); }
/* team photo: 3:2 at least — any squarer and the group photo loses people at both edges */
#status .exp-media{ aspect-ratio:3/2; background:var(--mist); border-radius:0; }
#status .exp-media image-slot{ position:absolute; inset:0; }
#status .exp-media image-slot::part(frame){ background:var(--mist); }
#status .exp-media image-slot::part(empty){ color:var(--steel); }
#status .exp-media image-slot::part(image){ filter:none; }
@media(max-width:880px){
  .exp-split{ grid-template-columns:1fr; }
  #status .exp-media{ aspect-ratio:16/10; }
}
/* clean caption scrim only — no color cast */
#status .exp-media .grade{ background:linear-gradient(0deg, rgba(17,24,39,.55) 0%, rgba(17,24,39,0) 26%); mix-blend-mode:normal; }
#status .exp-media .grade::after{ display:none; }

/* ---------- Über uns: story + building photo, three values in a row below ---------- */
.ab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5.5vw,88px); align-items:center; }
.ab-body .lede{ margin:28px 0 0; }
.ab-text{ margin:18px 0 0; font-size:15.5px; line-height:1.75; color:var(--fg-soft); }
/* the particle story (js/ids-art.js · story): navy panel with a dot grid, captions per scene */
.ab-art{ position:relative; aspect-ratio:4/3; overflow:hidden; cursor:crosshair; touch-action:pan-y;
  background:radial-gradient(120% 95% at 50% 42%, #1D4672 0%, var(--brand-dark) 68%); }
.ab-art::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.6px) 0 0 / 18px 18px; }
.st-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.st-unit{ position:absolute; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.8);
  opacity:0; transition:opacity .5s var(--ease); }
.ab-art[data-scene="0"] .st-unit{ opacity:1; transition-delay:.7s; }
.st-cap{ position:absolute; left:22px; bottom:22px; display:flex; align-items:baseline; gap:12px; pointer-events:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#FFFFFF;
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.st-cap b{ color:var(--brand-tint); font-weight:700; }
.ab-art[data-scene="0"] .st-cap[data-i="0"],
.ab-art[data-scene="1"] .st-cap[data-i="1"],
.ab-art[data-scene="2"] .st-cap[data-i="2"]{ opacity:1; transform:none; transition-delay:.4s; }
.st-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.1); }
.st-bar i{ position:absolute; inset:0; background:var(--brand-tint); transform-origin:left; transform:scaleX(0); }
@media(prefers-reduced-motion:reduce){ .st-bar{ display:none; } }
.ab-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px); margin-top:clamp(44px,5vw,72px); }
.ab-val{ padding-top:20px; border-top:2px solid var(--brand); }
.ab-val h3{ font-family:var(--display); font-weight:600; font-size:clamp(17px,1.4vw,19px); line-height:1.25; margin:0 0 8px; color:var(--fg); }
.ab-val p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--fg-soft); }
@media(max-width:900px){ .ab-grid{ grid-template-columns:1fr; } }
@media(max-width:520px){ .st-cap{ left:16px; bottom:16px; font-size:11px; } .st-unit{ font-size:10px; } }
@media(max-width:620px){ .ab-values{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Einblicke: photo mosaic on navy ----------
   4 x 3 on desktop (hall 2x2, the two wide tiles 2x1, the rest 1x1); 2 columns on phones. */
.ins-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,17vw,240px); gap:clamp(10px,1.2vw,16px); margin-top:clamp(42px,5vw,66px); }
.ins-tile{ border-radius:0; }
.ins-tile image-slot{ position:absolute; inset:0; transition:transform 1.4s var(--ease); }
.ins-tile:hover image-slot{ transform:scale(1.04); }
.ins-big{ grid-column:span 2; grid-row:span 2; }
.ins-wide{ grid-column:span 2; }
.ins-tile .cap-tag{ margin:12px; }
@media(max-width:760px){
  .ins-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:44vw; }
  .ins-big{ grid-row:span 1; }
  .ins-tile .cap-tag{ margin:8px; padding:7px 9px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce){ .ins-tile image-slot{ transition:none; } }

/* ---------- Gründer: founding team, portrait cards ----------
   The three portraits (assets/founder-*.webp) are cropped to one framing: 4:5, faces the same
   size, eye lines level. Keep that when a photo is replaced, or the row looks uneven. */
.fd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px); margin-top:clamp(42px,5vw,66px); }
.fd-card{ position:relative; display:flex; flex-direction:column; }
.fd-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--mist); }
.fd-media image-slot{ position:absolute; inset:0; width:100%; height:100%; transition:transform 1.4s var(--ease); }
.fd-media image-slot::part(frame){ background:var(--mist); }
.fd-media image-slot::part(empty){ color:var(--steel); }
/* black and white at rest; the original colours fade in on hover (the user's choice, 2026-10-12) */
.fd-media image-slot::part(image){ filter:grayscale(1); transition:filter .7s var(--ease); }
.fd-card:hover .fd-media image-slot::part(image){ filter:grayscale(0); }
.fd-card:hover .fd-media image-slot{ transform:scale(1.03); }
/* a fine rule closes off each photo; it fills navy from the left on hover */
.fd-body{ position:relative; padding-top:22px; }
.fd-body::before, .fd-body::after{ content:""; position:absolute; left:0; top:0; width:100%; height:2px; }
.fd-body::before{ background:var(--line); }
.fd-body::after{ background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.fd-card:hover .fd-body::after{ transform:scaleX(1); }
.fd-body h3{ font-family:var(--display); font-weight:600; font-size:clamp(19px,1.7vw,23px); line-height:1.2; margin:0 0 10px; color:var(--fg); letter-spacing:-.005em; }
.fd-body p{ margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.55; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--brand); }
@media(max-width:720px){ .fd-grid{ grid-template-columns:1fr; max-width:420px; gap:44px; } }
@media(prefers-reduced-motion:reduce){ .fd-media image-slot, .fd-media image-slot::part(image), .fd-body::after{ transition:none; } }

/* ---------- FAQ accordion ---------- */
.faq{ max-width:880px; margin:clamp(36px,4vw,56px) auto 0; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 2px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family:var(--display); font-weight:600; font-size:clamp(14px,1.7vw,17px); color:var(--fg); transition:color .2s var(--ease); line-height:1.25; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--brand-dark); }
.faq-ico{ position:relative; flex:0 0 20px; width:20px; height:20px; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; left:50%; top:50%; background:var(--brand); border-radius:0; }
.faq-ico::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq-ico::after{ width:2px; height:14px; transform:translate(-50%,-50%); transition:transform .3s var(--ease); }
.faq-item[open] .faq-ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-answer{ padding:0 2px 24px; max-width:66ch; color:var(--fg-soft); font-size:15.5px; line-height:1.72; }

/* Tech section: two-column, the live Sinnphonie console beside the text (below it on phones) */
.tech-top{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px,5vw,80px); align-items:center; }
.tech-intro .tech-feats{ grid-template-columns:1fr 1fr; gap:clamp(24px,2.4vw,34px); margin-top:clamp(34px,4vw,52px); }
.tech-visual{ display:flex; align-items:center; justify-content:center; }
@media(max-width:900px){ .tech-top{ grid-template-columns:1fr; gap:clamp(30px,6vw,48px); } }

/* the console (js/ids-art.js · core): navy panel with a dot grid and a slow scan line;
   status bar on top, the circuit board, the event log below */
.tc-art{ position:relative; width:100%; max-width:520px; overflow:hidden; color:#FFFFFF;
  background:radial-gradient(110% 80% at 50% 46%, #1D4672 0%, var(--brand-dark) 72%);
  box-shadow:0 28px 60px -34px rgba(15,47,82,.6); }
.tc-art::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px) 0 0 / 18px 18px; }
.tc-art::after{ content:""; position:absolute; left:0; right:0; top:-30%; height:30%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(143,179,218,0), rgba(143,179,218,.07), rgba(143,179,218,0)); }
.tc-art.play::after{ animation:tcScan 8s linear infinite; }
.tc-bar{ position:relative; display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; white-space:nowrap; }
.tc-live{ display:inline-flex; align-items:center; gap:7px; padding:3px 8px 3px 7px; color:var(--brand-tint); border:1px solid rgba(143,179,218,.4); }
.tc-live i{ width:6px; height:6px; border-radius:50%; background:var(--brand-tint); }
.tc-art.play .tc-live i{ animation:tcLive 1.8s ease-out infinite; }
.tc-meta{ margin-left:auto; display:flex; align-items:center; gap:16px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.tc-meta b{ color:#FFFFFF; font-weight:700; }
.tc-net{ position:relative; display:block; width:100%; height:auto; }
.tc-log{ position:relative; height:98px; margin:0 18px 16px; padding-top:10px; overflow:hidden; border-top:1px solid rgba(255,255,255,.1); }
.tc-row{ display:grid; grid-template-columns:62px 92px minmax(0,1fr); gap:10px; align-items:center; height:22px; white-space:nowrap;
  font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.6); animation:tcRow .45s var(--ease) both; }
.tc-t{ color:rgba(255,255,255,.4); }
.tc-m{ overflow:hidden; text-overflow:ellipsis; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--brand-tint); }
.tc-x{ overflow:hidden; text-overflow:ellipsis; }
.tc-row:last-child .tc-x{ color:#FFFFFF; }
@media(max-width:520px){
  .tc-bar{ padding:12px 14px; gap:10px; font-size:10px; }
  .tc-ev{ display:none; }
  .tc-log{ margin:0 14px 12px; }
  .tc-row{ grid-template-columns:52px 80px minmax(0,1fr); gap:8px; font-size:11px; }
  .tc-m{ font-size:9.5px; }
}
/* the board */
.tc-net .tc-trace{ fill:none; stroke:rgba(143,179,218,.34); stroke-width:1.5; stroke-linejoin:round; transition:stroke .35s var(--ease); }
.tc-net .tc-trace.hot{ stroke:rgba(143,179,218,.75); }
.tc-net .tc-bus{ fill:none; stroke:rgba(143,179,218,.18); stroke-width:1.3; }
.tc-net .tc-beat{ fill:none; stroke:var(--brand-tint); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.07 .93; opacity:0; }
.tc-net .tc-via{ fill:var(--brand-dark); stroke:rgba(143,179,218,.6); stroke-width:1.2; }
.tc-net .tc-ring{ fill:none; stroke:rgba(143,179,218,.24); stroke-width:1; stroke-dasharray:2 6; }
.tc-net .tc-dial{ fill:none; stroke:rgba(143,179,218,.2); stroke-width:5; stroke-dasharray:1.2 7.8; }
.tc-net .tc-sweep{ fill:none; stroke:var(--brand-tint); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:52 388; stroke-dashoffset:-58; }
.tc-net .tc-sweep-glow{ fill:none; stroke:rgba(143,179,218,.14); stroke-width:7; stroke-dasharray:110 330; }
.tc-net .tc-ring, .tc-net .tc-dial, .tc-net .tc-sweep, .tc-net .tc-sweep-glow,
.tc-net .tc-chip, .tc-net .tc-pulse{ transform-box:fill-box; transform-origin:center; }
.tc-net .tc-pin{ fill:none; stroke:rgba(143,179,218,.6); stroke-width:2; }
.tc-net .tc-pkg{ fill:var(--ink-2); stroke:rgba(143,179,218,.6); stroke-width:1.4; }
.tc-net .tc-mark{ fill:rgba(143,179,218,.6); }
.tc-net .tc-die{ fill:var(--brand); transition:fill .3s var(--ease); }
.tc-net .tc-die.hit{ fill:var(--brand-light); }
.tc-net .tc-glyph{ fill:none; stroke:#FFFFFF; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tc-net .tc-pulse{ fill:none; stroke:var(--brand-tint); stroke-width:1.4; opacity:0; }
.tc-net .tc-card{ fill:rgba(255,255,255,.04); stroke:rgba(143,179,218,.32); stroke-width:1.2; transition:fill .35s var(--ease), stroke .35s var(--ease); }
.tc-net .tc-node.hit .tc-card{ fill:rgba(143,179,218,.16); stroke:var(--brand-tint); }
.tc-net .tc-port{ fill:var(--brand-tint); }
.tc-net .tc-led{ fill:rgba(143,179,218,.55); transition:fill .3s var(--ease); }
.tc-net .tc-node.hit .tc-led{ fill:#FFFFFF; }
.tc-net .tc-lab{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; fill:rgba(255,255,255,.92); }
.tc-net .tc-spark rect{ fill:rgba(143,179,218,.6); }
.tc-net .tc-pk{ opacity:0; }
.tc-net .tc-pk.on{ opacity:1; }
.tc-net .tc-tail-l, .tc-net .tc-tail{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tc-net .tc-tail-l{ stroke:var(--brand-tint); stroke-width:2; opacity:.35; }
.tc-net .tc-tail{ stroke:#DCE8F5; stroke-width:2.2; opacity:.9; }
.tc-net .tc-halo{ fill:var(--brand-tint); opacity:.3; }
.tc-net .tc-head{ fill:#FFFFFF; }
/* first look: wiring draws itself, the chip and modules come up, then the rings turn */
.tc-net .tc-trace, .tc-net .tc-bus{ stroke-dasharray:1; stroke-dashoffset:1; }
.tc-net .tc-chip, .tc-net .tc-node, .tc-net .tc-rings, .tc-net .tc-vias{ opacity:0; }
.tc-art.play .tc-trace, .tc-art.play .tc-bus{ animation:tcDraw 1s var(--ease) var(--d) forwards; }
.tc-art.play .tc-chip{ animation:tcPop .7s var(--ease) .15s both; }
.tc-art.play .tc-node{ animation:tcIn .6s var(--ease) var(--d) both; }
.tc-art.play .tc-rings{ animation:tcFade 1.2s ease .5s forwards; }
.tc-art.play .tc-vias{ animation:tcFade .5s ease 1.1s forwards; }
.tc-art.play .tc-beat{ animation:tcBeat 2.4s linear 1.4s infinite, tcFade .4s ease 1.4s forwards; }
.tc-art.play .tc-ring{ animation:tcSpin 60s linear infinite; }
.tc-art.play .tc-dial{ animation:tcSpin 90s linear infinite reverse; }
.tc-art.play .tc-sweep, .tc-art.play .tc-sweep-glow{ animation:tcSpin 3.6s linear infinite; }
@keyframes tcDraw{ to{ stroke-dashoffset:0; } }
@keyframes tcPop{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }
@keyframes tcIn{ from{ opacity:0; transform:translateX(var(--dx, 0)); } to{ opacity:1; transform:none; } }
@keyframes tcFade{ to{ opacity:1; } }
@keyframes tcSpin{ to{ transform:rotate(360deg); } }
@keyframes tcBeat{ to{ stroke-dashoffset:-1; } }
@keyframes tcLive{ from{ box-shadow:0 0 0 0 rgba(143,179,218,.65); } to{ box-shadow:0 0 0 7px rgba(143,179,218,0); } }
@keyframes tcRow{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes tcScan{ to{ transform:translateY(433%); } }
@media(prefers-reduced-motion:reduce){
  .tc-art *, .tc-art.play::after{ animation:none !important; }
  .tc-net .tc-chip, .tc-net .tc-node, .tc-net .tc-rings, .tc-net .tc-vias{ opacity:1; }
  .tc-net .tc-trace, .tc-net .tc-bus{ stroke-dashoffset:0; }
  .tc-net .tc-beat, .tc-net .tc-sweep, .tc-net .tc-sweep-glow{ display:none; }
}

/* machine screen in the IDS Plastics "Prozessüberwachung" panel (js/ids-art.js · hmi):
   live curve with phase strip on the left, cycle counter and log on the right */
.hmi{ position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:18px; padding:16px 18px 14px;
  background:radial-gradient(120% 110% at 32% 40%, #1D4672 0%, #163A63 72%); color:#FFFFFF; font-family:var(--mono); }
.hm-main{ display:flex; flex-direction:column; min-width:0; }
.hm-head{ display:flex; align-items:baseline; gap:8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; white-space:nowrap; }
.hm-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.5); }
.hm-pn{ color:var(--brand-tint); font-variant-numeric:tabular-nums; }
.hm-leg{ margin-left:auto; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.55); }
.hm-leg i{ width:14px; margin-left:8px; border-top:2px solid #BFD4EC; }
.hm-leg i.s{ border-top:2px dashed rgba(255,255,255,.6); }
.hm-chart{ position:relative; flex:1; min-height:0; margin-top:10px; }
.hm-chart canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hm-strip{ display:flex; gap:2px; margin-top:8px; }
.hm-strip span{ min-width:0; height:16px; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:rgba(143,179,218,.1); color:rgba(255,255,255,.45); transition:background .3s var(--ease), color .3s var(--ease); }
.hm-strip span.done{ background:rgba(143,179,218,.22); color:rgba(255,255,255,.75); }
.hm-strip span.on{ background:var(--brand-tint); color:var(--brand-dark); }
.hm-side{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding-left:18px; border-left:1px solid var(--line-d); }
.hm-count{ margin-top:4px; font-family:var(--display); font-size:30px; line-height:1.1; font-weight:600; font-variant-numeric:tabular-nums; }
.hm-ok{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:4px 8px; white-space:nowrap;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--brand-tint); border:1px solid rgba(143,179,218,.4); }
.hm-ok i{ width:8px; height:4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-1px) rotate(-45deg); }
.hm-ok.flash{ animation:hmFlash 1s var(--ease); }
.hm-k-doc{ margin-top:auto; }
.hm-docs{ width:100%; height:60px; margin-top:6px; overflow:hidden; }
.hm-doc{ display:flex; gap:8px; font-size:11px; line-height:20px; white-space:nowrap; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.5); animation:tcRow .45s var(--ease) both; }
.hm-doc:first-child{ color:#FFFFFF; }
.hm-doc b{ margin-left:auto; font-weight:700; color:var(--brand-tint); }
.hmi .hm-head, .hmi .hm-strip, .hmi .hm-side{ opacity:0; }
.hmi.play .hm-head{ animation:tcFade .5s ease .1s forwards; }
.hmi.play .hm-strip{ animation:tcFade .5s ease .25s forwards; }
.hmi.play .hm-side{ animation:tcFade .6s ease .4s forwards; }
@keyframes hmFlash{ 0%, 30%{ background:var(--brand-tint); color:var(--brand-dark); } 100%{ background:transparent; color:var(--brand-tint); } }
@media(max-width:540px){
  .hmi{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:10px; padding:14px 14px 12px; }
  .hm-side{ flex-direction:row; align-items:center; gap:10px; padding:10px 0 0; border-left:0; border-top:1px solid var(--line-d); }
  .hm-count{ margin:0; font-size:18px; }
  .hm-ok{ margin:0 0 0 auto; }
  .hm-k-doc, .hm-docs{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .hmi *{ animation:none !important; }
  .hmi .hm-head, .hmi .hm-strip, .hmi .hm-side{ opacity:1; }
}

/* material flow in the IDS Assembly card (js/ids-art.js · mflow): side view of a two-level
   conveyor on navy; labels, order number and counters are HTML so they stay legible */
.mf{ position:absolute; inset:0; overflow:hidden; color:#FFFFFF; font-family:var(--mono);
  background:radial-gradient(120% 95% at 50% 45%, #1D4672 0%, var(--brand-dark) 72%); }
.mf::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px) 0 0 / 18px 18px; }
.mf-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mf-bar{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; white-space:nowrap; }
.mf-live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--brand-tint); }
.mf-live i{ width:6px; height:6px; border-radius:50%; background:var(--brand-tint); }
.mf.play .mf-live i{ animation:tcLive 1.8s ease-out infinite; }
.mf-lab{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; white-space:nowrap; pointer-events:none;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.88); }
.mf-lab b{ padding:2px 4px; color:var(--brand-tint); font-variant-numeric:tabular-nums; transition:background .3s var(--ease), color .3s var(--ease); }
.mf-lab.live b{ background:var(--brand-tint); color:var(--brand-dark); }
.mf-sign{ position:absolute; transform:translate(-50%,-50%); font-size:10px; letter-spacing:.06em; font-weight:700; color:var(--brand-tint); font-variant-numeric:tabular-nums; pointer-events:none; }
.mf-foot{ position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.1); background:rgba(15,47,82,.6); }
.mf-stat{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 16px; border-left:1px solid rgba(255,255,255,.1); white-space:nowrap; }
.mf-stat:first-child{ border-left:0; }
.mf-stat span{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.5); }
.mf-stat b{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
@media(max-width:520px){
  .mf-bar{ padding:7px 12px; font-size:9.5px; }
  .mf-lab{ font-size:9px; gap:4px; letter-spacing:.05em; }
  .mf-lab b{ padding:1px 3px; }
  .mf-sign{ font-size:9px; }
  .mf-stat{ padding:8px 10px; }
  .mf-stat span{ font-size:9px; letter-spacing:.05em; }
  .mf-stat b{ font-size:11px; }
}
/* the drawing */
.mf-svg .mf-ground{ stroke:rgba(255,255,255,.14); stroke-width:1.2; }
.mf-svg .mf-frame{ fill:none; stroke:rgba(143,179,218,.32); stroke-width:1.4; }
.mf-svg .mf-eq{ fill:var(--ink-2); stroke:rgba(143,179,218,.7); stroke-width:1.5; stroke-linejoin:round; }
.mf-svg path.mf-eq:not([d$="Z"]){ fill:none; }
.mf-svg .mf-belt{ fill:var(--ink-2); stroke:rgba(143,179,218,.7); stroke-width:1.5; }
.mf-svg .mf-roll{ fill:none; stroke:rgba(143,179,218,.42); stroke-width:1.2; }
.mf-svg .mf-run{ fill:none; stroke:var(--brand-tint); stroke-width:1.6; stroke-dasharray:5 11; opacity:.75; }
.mf.play .mf-run{ animation:mfRun .133s linear infinite; }
.mf.play .mf-run.back{ animation-direction:reverse; }
.mf-svg .mf-screen{ fill:var(--brand-dark); stroke:rgba(143,179,218,.6); stroke-width:1.2; }
.mf-svg .mf-led{ fill:rgba(143,179,218,.5); }
.mf-svg .mf-beam{ fill:url(#mf-beam-grad); opacity:0; }
.mf-svg .mf-ring{ fill:none; stroke:var(--brand-tint); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.mf-svg .mf-ram, .mf-svg .mf-stamp{ transition:transform .32s cubic-bezier(.55,0,.8,.3); }
.mf-svg .mf-ram.down{ transform:translateY(28px); }
.mf-svg .mf-stamp.down{ transform:translateY(20px); }
/* parts, trays, products, boxes */
.mf-svg .mf-shape{ fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.85); stroke-width:1.4; transition:fill .25s var(--ease); }
.mf-svg .mf-shape.ok, .mf-svg .ok .mf-shape, .mf-svg .mf-kit .mf-shape{ fill:rgba(143,179,218,.6); stroke:#FFFFFF; }
.mf-svg .mf-part, .mf-svg .mf-kit{ animation:tcFade .3s ease both; opacity:0; }
.mf-svg .mf-kit.gone{ opacity:0 !important; transition:opacity .5s ease; }
.mf-svg .mf-tray{ fill:#1D4672; stroke:var(--brand-tint); stroke-width:1.4; }
.mf-svg .mf-slots g{ opacity:0; transition:opacity .2s ease; }
.mf-svg .mf-kit.f0 .s0, .mf-svg .mf-kit.f1 .s1, .mf-svg .mf-kit.f2 .s2{ opacity:1; }
.mf-svg .mf-slots{ transition:opacity .25s ease; }
.mf-svg .mf-kit.made .mf-slots{ opacity:0; }
.mf-svg .mf-prod, .mf-svg .mf-box{ opacity:0; transform-box:fill-box; transform-origin:50% 100%; transition:opacity .3s var(--ease), transform .35s var(--ease); }
.mf-svg .mf-prod{ transform:scale(.6); }
.mf-svg .mf-box{ transform:translateY(-6px); }
.mf-svg .mf-kit.made .mf-prod{ opacity:1; transform:none; }
.mf-svg .mf-kit.boxed .mf-box{ opacity:1; transform:none; }
.mf-svg .mf-prod rect:first-child{ fill:rgba(143,179,218,.35); stroke:#FFFFFF; stroke-width:1.4; }
.mf-svg .mf-prod circle, .mf-svg .mf-prod rect + circle + rect{ fill:none; stroke:#FFFFFF; stroke-width:1.2; }
.mf-svg .mf-box rect:first-child{ fill:#24507F; stroke:#DCE8F5; stroke-width:1.4; }
.mf-svg .mf-box path{ fill:none; stroke:#DCE8F5; stroke-width:1.2; }
.mf-svg .mf-box .mf-lbl{ fill:rgba(255,255,255,.18); transition:fill .25s ease; }
.mf-svg .mf-box .mf-chk{ stroke:var(--brand-dark); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .25s ease; }
.mf-svg .mf-kit.stamped .mf-lbl{ fill:#FFFFFF; }
.mf-svg .mf-kit.stamped .mf-chk{ opacity:1; }
@keyframes mfRun{ to{ stroke-dashoffset:-16; } }
@media(prefers-reduced-motion:reduce){
  .mf *{ animation:none !important; transition:none !important; }
  .mf-svg .mf-part, .mf-svg .mf-kit{ opacity:1; }
}


/* ---------- Synergy circular diagram ---------- */
.synergy-stage{ position:relative; aspect-ratio:1; max-width:560px; margin:0 auto; width:100%; }
.synergy-stage svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.syn-node{
  position:absolute; transform:translate(-50%,-50%); text-align:center;
  width:120px;
}
.syn-node .dot{
  width:90px; height:90px; border-radius:50%; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-2); border:1px solid var(--line-d); color:var(--brand-tint);
  transition:.35s var(--ease);
}
.syn-node:hover .dot{ background:var(--brand); color:#fff; }
.syn-node .nm{ font-family:var(--display); font-weight:600; font-size:13px; color:#E5E7EB; line-height:1.25; }
.syn-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
  width:128px; height:128px; border-radius:50%; background:var(--brand);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
 z-index:3;
}
.syn-core span{ font-family:var(--display); color:#fff; font-weight:600; font-size:16px; line-height:1.25; }
.syn-core small{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.8); margin-top:4px; }
.synergy-stage svg line{ stroke:rgba(143,179,218,.32); stroke-width:.4; }
.synergy-stage svg line.ring{ stroke:rgba(143,179,218,.16); stroke-dasharray:1.5 1.5; }
.synergy-stage svg .orbit{ fill:none; stroke:rgba(143,179,218,.14); stroke-width:.3; }
@media(max-width:560px){ .syn-node{ width:90px; } .syn-node .dot{ width:64px; height:64px; } .syn-node .nm{ font-size:13px; } }

/* ---------- Roadmap ---------- */
.road{ position:relative; }
.road-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){ .road-track{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .road-track{ grid-template-columns:1fr; } }
.road-year{ position:relative; padding-top:54px; }
.road-year::before{
  content:""; position:absolute; top:26px; left:0; right:-24px; height:2px;
  background:var(--accent);
}
.road-year:last-child::before{ right:0; }
.road-year .yr{
  position:absolute; top:0; left:0; font-family:var(--display); font-weight:600;
  font-size:28px; color:var(--accent); line-height:1;
}
.road-year .yr::after{ content:""; position:absolute; left:2px; bottom:-21px; width:13px; height:13px; border-radius:50%; background:var(--accent); }
.road-year h4{ font-family:var(--display); font-weight:600; font-size:18px; margin:6px 0 10px; line-height:1.25; }
.road-year p{ font-size:14.5px; color:var(--fg-soft); margin:0; }
.dark .road-year p{ color:#B8C0CC; }
.road-prose{ max-width:880px; }
.road-prose p{ font-size:17px; color:var(--fg-soft); margin:0 0 18px; }
.road-prose p:last-child{ margin-bottom:0; }
.road-prose .lede{ font-size:21px; color:var(--fg); margin-bottom:22px; }

/* ---------- Machine cells (Plastics) ---------- */
.cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(min-width:901px){ .cells.cells-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px){ .cells{ grid-template-columns:1fr; } }
.cell{
  border:1px solid var(--line-d); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2); transition:.4s var(--ease);
}
.cell:hover{ border-color:var(--brand); }
.cell .cell-media{ min-height:200px; }
.cell .cell-body{ padding:24px; }
.cell .cell-label{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-tint); font-weight:600; }
.cell h4{ font-family:var(--display); font-weight:600; font-size:20px; margin:10px 0 4px; color:#FFFFFF; line-height:1.25; }
.cell .auto{ font-family:var(--mono); font-size:13px; color:var(--steel-2); }
.cell ul{ list-style:none; padding:0; margin:16px 0 0; }
.cell li{ font-size:14px; color:#B8C0CC; padding:7px 0; border-top:1px solid var(--line-d); display:flex; gap:10px; }
.cell li::before{ content:"—"; color:var(--brand-tint); }
/* image slot inside a machine cell */
.cell .cell-media{ position:relative; min-height:210px; background:#163A63; overflow:hidden; }
.cell .cell-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.cell .cell-media image-slot::part(frame){ background:#163A63; }
.cell .cell-media image-slot::part(empty){ color:#9CA3AF; }
.cell .cell-media image-slot::part(image){ filter:none; }
.cell .cell-media .ph-tag{ position:absolute; left:0; bottom:0; z-index:3; }

/* ---------- Machines: sales showroom (dark band) ---------- */
.machines{ position:relative; overflow:hidden; }
.machines .wrap{ position:relative; z-index:1; }
.mgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,30px); }
@media(max-width:820px){ .mgrid{ grid-template-columns:1fr; } }
.mcard{ position:relative; display:flex; flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line-d); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
/* top accent that draws in on hover */
.mcard::after{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:4;
  background:var(--brand-tint);
  opacity:0; transition:transform .5s var(--ease); }
.mcard:hover{ border-color:var(--brand);
 }
.mcard:hover::after{ opacity:1; }
.mcard-media{ position:relative; aspect-ratio:16/10; min-height:220px; background:#163A63; overflow:hidden; }
.mcard-media image-slot{ position:absolute; inset:0; width:100%; height:100%; transition:transform .6s var(--ease); }
.mcard-media image-slot::part(frame){ background:#163A63; }
.mcard-media image-slot::part(empty){ color:#9CA3AF; }
.mcard-media image-slot::part(image){ filter:none; transition:filter .45s var(--ease); }
.mcard:hover .mcard-media image-slot{ transform:scale(1.06); }
.mcard:hover .mcard-media image-slot::part(image){ filter:none; }
.mcard-media::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(17,24,39,.72) 0%, transparent 46%); }
/* clamping-force badge — the headline sales spec */
.mcard-force{ position:absolute; top:14px; right:14px; z-index:3;
  font-family:var(--display); font-weight:700; font-size:20px; line-height:1;
  color:#FFFFFF; padding:10px 14px; border-radius:0;
  background:rgba(17,24,39,.62); border:1px solid rgba(143,179,218,.5);
 }
.mcard-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mcard-model{ font-family:var(--display); font-weight:600; font-size:22px; line-height:1.25; margin:0; color:#FFFFFF; }
.mcard-desc{ font-size:14.5px; color:#B8C0CC; margin:2px 0 0; line-height:1.6; }
.mcard-specs{ margin:16px 0 0; padding:0; display:flex; flex-direction:column; }
.mcard-specs > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-top:1px solid var(--line-d); }
.mcard-specs dt{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-2); flex:none; font-weight:600; }
.mcard-specs dd{ margin:0; font-size:13.5px; color:#E5E7EB; text-align:right; font-weight:500; }
.mcard-cta{ margin-top:auto; display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:#FFFFFF; padding:12px 20px; border:1px solid var(--brand); border-radius:0; margin-top:18px;
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); background:var(--brand); border-color:var(--brand); }
.mcard-cta svg{ fill:none; stroke:currentColor; stroke-width:2; transition:transform .35s var(--ease); }
.mcard-cta:hover{ background:var(--brand-dark); }
.mcard-cta:hover svg{ transform:translateX(4px); }
button.mcard-cta{ cursor:pointer; font:inherit; -webkit-appearance:none; appearance:none; background:transparent; }

/* ---------- Inquiry modal (Vertrieb) ----------
   Light dialog in the .contact-clean style: white sheet, fine grey fields, one solid navy submit.
   The dialog itself scrolls; the submit bar is sticky so it stays reachable on short screens.
   Phones (≤560px) get a full-width bottom sheet. Layout rules are scoped under .modal so they beat
   the generic dark .form styles further down. */
.modal{ position:fixed; inset:0; z-index:200; display:none; --mp:clamp(20px,4vw,32px); }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(10,22,40,.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--ease); }
.modal.open .modal-backdrop{ opacity:1; }
.modal-dialog{ position:absolute; top:50%; left:50%; width:min(600px,calc(100vw - 32px));
  max-height:min(calc(100vh - 48px),860px); max-height:min(calc(100dvh - 48px),860px);
  overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#C7CED8 transparent;
  transform:translate(-50%,-47%); opacity:0;
  background:#FFFFFF; color:var(--fg); border:0; border-radius:0;
  border-top:3px solid var(--brand-dark);
  box-shadow:0 32px 80px -24px rgba(8,22,44,.55), 0 2px 8px rgba(8,22,44,.12);
  transition:transform .4s var(--ease), opacity .4s var(--ease); }
.modal.open .modal-dialog{ transform:translate(-50%,-50%); opacity:1; }
.modal-close{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:0; color:var(--steel); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease); }
.modal-close svg{ fill:none; stroke:currentColor; stroke-width:2; width:20px; height:20px; }
.modal-close:hover{ background:#F1F3F6; color:var(--fg); }
.modal-close:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
.modal-head{ padding:calc(var(--mp) + 2px) calc(var(--mp) + 40px) 0 var(--mp); }
.modal-head h3{ font-size:clamp(22px,2.6vw,27px); line-height:1.2; margin:0; color:var(--fg); }
.modal-sub{ font-size:14.5px; color:var(--fg-soft); margin:8px 0 0; line-height:1.55; }
.modal-machine{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px;
  margin:20px var(--mp) 0; padding:13px 16px; background:#F3F6FA; border:0; border-left:3px solid var(--brand); border-radius:0; }
.mm-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); font-weight:600; }
.mm-name{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--fg); line-height:1.3; }
/* fields + submit come from .form-light (Contact section below); this is only the dialog layout */
.modal .modal-form{ grid-template-columns:1fr 1fr; gap:16px; background:transparent; border:0; border-radius:0;
  padding:22px var(--mp) 0; box-shadow:none; }
.modal-foot{ grid-column:1/-1; position:sticky; bottom:0; z-index:1; display:flex; justify-content:flex-end;
  margin:6px calc(var(--mp) * -1) 0; padding:16px var(--mp) var(--mp); background:#FFFFFF; border-top:1px solid #E6E9EE; }
@media(max-width:560px){
  .modal-dialog{ top:auto; bottom:0; left:0; width:100%; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px);
    transform:translateY(40px); border-top-width:3px; box-shadow:0 -12px 40px rgba(8,22,44,.3); }
  .modal.open .modal-dialog{ transform:none; }
  .modal .modal-form{ grid-template-columns:1fr; gap:14px; padding-top:18px; }
  .modal .field textarea{ min-height:96px; }
  .modal-foot{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .modal-foot .btn[type=submit]{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .modal-dialog, .modal-backdrop{ transition:none; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info .row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-d); align-items:flex-start; }
.contact-info .row .ic{ color:var(--brand-tint); flex:0 0 auto; margin-top:2px; }
.contact-info .row .k{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-2); font-weight:600; }
.contact-info .row .v{ font-size:17px; color:#FFFFFF; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:var(--ink-2); border:1px solid var(--line-d); border-radius:0;
  padding:clamp(24px,3vw,40px); align-content:start; }
.form .full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-tint); display:block; margin-bottom:9px; font-weight:600; }
.field input,.field select,.field textarea{
  width:100%; background:rgba(255,255,255,.035); border:1px solid var(--line-d);
  border-radius:2px; padding:15px 16px; color:#FFFFFF; font-family:var(--body); font-size:15.5px;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); outline:none;
}
.field input::placeholder,.field textarea::placeholder{ color:#9CA3AF; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(143,179,218,.45); }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand); background:rgba(143,179,218,.07); }
.field select{ appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238FB3DA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
.form .btn[type=submit]{ margin-top:6px; padding-block:17px; font-size:16px; }
/* clean light contact (index #kontakt, class .contact-clean): white section, neutral grey form panel,
   white fields with fine grey borders, one solid navy submit. Other pages keep the dark form above. */
.contact-clean{ background:#FFFFFF; }
.contact-clean .contact-info .row{ border-bottom-color:var(--line); }
.contact-clean .contact-info h2 + .row{ border-top:1px solid var(--line); }
.contact-clean .contact-info .row .ic{ color:var(--brand); }
.contact-clean .contact-info .row .k{ color:var(--steel); }
.contact-clean .contact-info .row .v{ color:var(--fg); transition:color .2s var(--ease); }
.contact-clean .contact-info a.v:hover{ color:var(--brand); }
.contact-clean .form{ background:#F6F7F9; border:1px solid #ECEEF1; }
.contact-clean .field label{ color:#4B5563; }
.contact-clean .field input,
.contact-clean .field select,
.contact-clean .field textarea{ background-color:#FFFFFF; border:1px solid #D9DEE4; color:var(--fg); }
.contact-clean .field input:hover,
.contact-clean .field select:hover,
.contact-clean .field textarea:hover{ border-color:#B6BEC8; }
.contact-clean .field input:focus,
.contact-clean .field select:focus,
.contact-clean .field textarea:focus{ border-color:var(--brand); background-color:#FFFFFF; box-shadow:0 0 0 3px rgba(31,74,122,.12); }
.contact-clean .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); }
.contact-clean .form .btn-primary{ background:var(--brand-dark); color:#FFFFFF; border-color:var(--brand-dark); }
.contact-clean .form .btn-primary:hover{ background:#0A2240; border-color:#0A2240; }
/* light form (Vertrieb: inquiry modal + #anfrage): white fields with fine grey borders, navy focus ring,
   one solid navy submit. Each page sets the panel around it. Sits after .form so equal selectors win. */
.form-light .field label{ color:#4B5563; font-size:10.5px; margin-bottom:7px; }
.form-light .field input,
.form-light .field select,
.form-light .field textarea{ background-color:#FFFFFF; border:1px solid #D5DBE2; border-radius:0; color:var(--fg);
  font-size:15px; padding:12px 14px; line-height:1.4; }
.form-light .field input,
.form-light .field select{ height:46px; }
.form-light .field select{ padding-block:0; padding-right:40px; background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); }
.form-light .field textarea{ min-height:108px; }
.form-light .field input:hover,
.form-light .field select:hover,
.form-light .field textarea:hover{ border-color:#AEB7C2; }
.form-light .field input:focus,
.form-light .field select:focus,
.form-light .field textarea:focus{ border-color:var(--brand); background-color:#FFFFFF; box-shadow:0 0 0 3px rgba(31,74,122,.14); }
.form-light .btn[type=submit]{ margin:0; padding:15px 24px; font-size:14px; background:var(--brand-dark); color:#FFFFFF; border-color:var(--brand-dark); }
.form-light .btn[type=submit]:hover{ background:#0A2240; border-color:#0A2240; }
.form-light .btn[type=submit] svg{ fill:none; stroke:currentColor; stroke-width:2; }
@media(max-width:560px){
  .form-light .field input,
  .form-light .field select,
  .form-light .field textarea{ font-size:16px; }   /* 16px+ keeps iOS from zooming into the field */
}

/* ---------- Vertrieb subpage ---------- */
.page-hero.compact{ padding-top:128px; padding-bottom:clamp(46px,6vw,72px); background:var(--ink); }
.page-hero.compact h1{ font-size:clamp(34px,4.4vw,56px); line-height:1.06; }
.page-hero.compact .sub{ margin-top:22px; max-width:34ch; }
/* Vertrieb hero — animated distribution-network constellation */
.page-hero .ph-net{ opacity:1; pointer-events:none;
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
          mask:linear-gradient(90deg, transparent 0%, #000 36%, #000 100%); }
@media(max-width:760px){ .page-hero .ph-net{ opacity:.5; } }
@media(min-width:981px){ .div-cards.cards-3{ grid-template-columns:repeat(3,1fr); } }
.machine-card{ padding:34px 30px 30px; display:flex; flex-direction:column; min-height:auto; }
.machine-card .m-chip{ margin-top:18px; align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-tint); border:1px solid var(--line); padding:7px 12px; border-radius:0; font-weight:600; }
.dark .machine-card .m-chip{ border-color:var(--line-d); }

.region-panel{ position:relative; border:1px solid var(--line-d); border-radius:var(--r-lg); overflow:hidden; background:var(--ink); min-height:380px; padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; justify-content:center; isolation:isolate; }
.region-panel canvas{ position:absolute; inset:0 0 0 auto; width:70%; height:100%; opacity:.45; z-index:0; }
.region-panel .rp-head{ position:relative; z-index:1; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-tint); margin-bottom:8px; font-weight:600; }
.region-list{ position:relative; z-index:1; display:flex; flex-direction:column; }
.region-node{ display:flex; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-d); color:#E5E7EB; font-family:var(--display); font-weight:500; font-size:clamp(16px,2.4vw,21px); line-height:1.25; }
.region-node:last-child{ border-bottom:0; }
.region-node .rn-dot{ width:12px; height:12px; border-radius:50%; border:2px solid var(--brand-tint); flex:0 0 12px; }
.region-node .rn-base{ margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--brand-tint); }

.duo-card{ background:var(--brand); color:#fff; border-radius:var(--r); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; }
.duo-card.alt{ background:var(--ink); }
.duo-card .num{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; opacity:.75; }
.duo-card h3{ font-family:var(--display); font-weight:600; font-size:clamp(20px,2.6vw,25px); margin:14px 0 12px; line-height:1.25; }
.duo-card p{ font-size:15.5px; line-height:1.6; opacity:.92; margin:0 0 26px; }
.duo-card .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- Footer ---------- */
.footer{ background:#111827; color:#9CA3AF; padding:70px var(--pad) 40px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer img{ height:30px; margin-bottom:18px; }
.footer .cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer .col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-2); margin:0 0 16px; font-weight:600; }
.footer .col a{ display:block; padding:5px 0; color:#B8C0CC; font-size:14.5px; transition:.2s; }
.footer .col a:hover{ color:var(--secondary); }
.footer-bot{ margin-top:50px; padding-top:24px; border-top:1px solid var(--line-d); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--steel-2); }

/* ---------- Reveal (motion disabled — clean, content always visible) ---------- */
[data-reveal]{ opacity:1; transform:none; }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero{
  position:relative; padding:160px var(--pad) 80px; background:var(--ink); color:#FFFFFF;
  overflow:hidden; isolation:isolate;
  background:var(--ink);
}
.page-hero canvas{ position:absolute; inset:0 0 0 auto; width:62%; height:100%; z-index:1; opacity:.85; }
/* Vertrieb hero — production-machinery background photo + network accent */
.page-hero .ph-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-hero .ph-photo image-slot{ width:100%; height:100%; }
.page-hero .ph-photo image-slot::part(frame){ background:#163A63; }
.page-hero .ph-photo image-slot::part(image){ filter:brightness(.6); }
.page-hero .ph-photo image-slot::part(empty){ color:#4B5563; background:#163A63; font-family:var(--mono); letter-spacing:.06em; }
.page-hero .ph-grade{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(17,24,39,.9) 30%, rgba(17,24,39,.5) 62%, rgba(17,24,39,.72) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(17,24,39,.2) 38%, transparent 70%); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ max-width:16ch; }
.page-hero .sub{ font-family:var(--display); font-weight:400; font-size:clamp(17px,1.6vw,21px); color:#B8C0CC; margin-top:18px; line-height:1.4; max-width:52ch; }

/* utility */
.muted{ color:var(--fg-soft); }
.dark .muted{ color:#B8C0CC; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.dark .divider{ background:var(--line-d); }
.text-accent{ color:var(--accent); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.lbl-list{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:9px 15px; border:1px solid var(--line); border-radius:0; color:var(--fg-soft); font-weight:600; }
.dark .chip{ border-color:var(--line-d); color:#B8C0CC; }
.chip:hover{ border-color:var(--brand); color:var(--brand); }

/* ---------- Light hero variant (Tweak: Hell & technisch) ---------- */
body.theme-light .hero{
  background:linear-gradient(180deg,#FFFFFF 0%, #F4F4F4 100%);
  color:#1A1F26;
}
body.theme-light .hero .sub{ color:var(--steel); }
body.theme-light .hero .support{ color:var(--fg-soft); }
body.theme-light .hero h1 em{ color:var(--brand); }
body.theme-light .hero .btn-ghost{ color:#1A1F26; }
body.theme-light .hero .btn-ghost:hover span{ color:#fff; }
body.theme-light .hero .slogan-badge{ color:var(--steel); }

/* ---------- Tweaks panel ---------- */
.tw-panel{
  position:fixed; right:18px; bottom:18px; z-index:120; width:300px;
  background:rgba(17,24,39,.94);
  border:1px solid rgba(143,179,218,.28); border-radius:0;
 color:#FFFFFF;
  font-family:var(--body); padding:18px 18px 20px; display:none;
}
.tw-panel.show{ display:block; animation:twin .3s var(--ease); }
@keyframes twin{ from{opacity:0; transform:translateY(12px)} }
.tw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tw-head h4{ font-family:var(--display); font-weight:600; font-size:16px; margin:0; line-height:1.25; }
.tw-head button{ background:none; border:0; color:#9CA3AF; font-size:22px; cursor:pointer; line-height:1; padding:2px 4px; }
.tw-head button:hover{ color:#fff; }
.tw-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9CA3AF; margin:0 0 16px; font-weight:600; }
.tw-grp{ margin-top:16px; }
.tw-grp > label{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9CA3AF; display:block; margin-bottom:9px; font-weight:600; }
.tw-seg{ display:flex; gap:6px; }
.tw-seg button{
  flex:1; padding:9px 8px; border-radius:0; cursor:pointer; font-family:var(--body);
  font-size:12.5px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#CBD5E1; transition:.2s;
}
.tw-seg button:hover{ border-color:rgba(143,179,218,.5); }
.tw-seg button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tw-sw{ display:flex; gap:9px; }
.tw-sw button{ width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.2s; position:relative; }
.tw-sw button.on{ border-color:#fff; }

/* =========================================================================
   PHOTOGRAPHY — real images, graded to the IDS brand
   Drop-in slots desaturate + grade toward teal, framed with blueprint ticks.
   ========================================================================= */
.media{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); }
.media image-slot{ display:block; width:100%; height:100%; }
.media image-slot::part(frame){ background:#163A63; }
.media image-slot::part(empty){ color:#9CA3AF; }
.media image-slot::part(image){ filter:none; }
/* teal grade + bottom scrim so captions read; never blocks the drop target */
.media .grade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(17,24,39,0) 50%, rgba(17,24,39,.6) 100%);

}
.media .media-cap{
  position:absolute; left:0; bottom:0; z-index:3; pointer-events:none;
}
/* corner ticks framing the photo (reuses blueprint language) */
.media.tick-card::before, .media.tick-card::after{ z-index:4; }

/* Hero background photo (index: IDS building at dusk) */
.hero .hero-photo{ position:absolute; inset:0; z-index:0; }
.hero .hero-photo image-slot{ width:100%; height:100%; }
.hero .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.hero .hero-photo image-slot::part(frame){ background:transparent; }
/* very slow ambient drift on the whole photo layer so the lights feel alive.
   Applied to the container (NOT image-slot's ::part(image), which owns its own
   centering transform) — the canvas below gets the same drift so glows stay locked. */
.hero .hero-photo{ transform-origin:68% 42%; }

.hero .hero-photo image-slot::part(image){ filter:none; }
.hero .hero-photo image-slot::part(empty){ opacity:0; } /* invisible when empty → looks like today */
/* shadow from the top-left corner, fading out just short of the centre; navy (--nav-bg) so it meets the bar */
.hero .hero-photo .grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(118deg, rgba(15,47,82,.96) 0%, rgba(15,47,82,.86) 26%, rgba(15,47,82,.6) 40%, rgba(15,47,82,0) 53%);
}
/* phones: the copy spans the full width, so the shadow reaches further */
@media(max-width:759px){
  .hero .hero-photo .grade{ background:linear-gradient(160deg, rgba(15,47,82,.94) 0%, rgba(15,47,82,.78) 45%, rgba(15,47,82,.35) 80%, rgba(15,47,82,.2) 100%); }
}
.hero canvas#globe{ z-index:1; }

/* Sub-page hero background photo — sits behind the globe, heavily darkened */
.page-hero .hero-photo{ position:absolute; inset:0; z-index:0; }
.page-hero .hero-photo image-slot{ width:100%; height:100%; }
.page-hero .hero-photo image-slot::part(frame){ background:transparent; }
.page-hero .hero-photo image-slot::part(image){ filter:brightness(.7); }
.page-hero .hero-photo image-slot::part(empty){ opacity:0; }
.page-hero .hero-photo .grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(17,24,39,.95) 0%, rgba(17,24,39,.6) 42%, rgba(17,24,39,.1) 80%),
    linear-gradient(180deg, rgba(17,24,39,.2), rgba(17,24,39,.55));
}
.page-hero canvas[data-globe]{ z-index:1; }


/* Region panel without globe — subtle blueprint + teal corner glow */

/* Photo gallery triptych (sub-page "Einblicke") */
.gallery{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; }
@media(max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } .gallery > :first-child{ grid-column:1 / -1; } }
@media(max-width:520px){ .gallery{ grid-template-columns:1fr; } }
.gallery .media{ min-height:300px; }

/* Full-bleed atmospheric band */
.photoband{
  position:relative; min-height:clamp(420px,58vh,640px);
  display:flex; align-items:flex-end; overflow:hidden; background:var(--ink);
}
.photoband image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.photoband image-slot::part(frame){ background:#163A63; }
.photoband image-slot::part(image){ filter:brightness(.62); }
.photoband .grade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(17,24,39,.25) 0%, rgba(17,24,39,.8) 100%);

}
.photoband .pb-inner{ position:relative; z-index:3; width:100%; color:#FFFFFF; padding-block:clamp(44px,6vw,84px); }
.photoband .pb-inner h2{ color:#fff; max-width:18ch; }
.photoband .pb-inner .lede{ color:#E5E7EB; max-width:52ch; margin-top:20px; }

/* slot caption tag (mono, matches .ph-tag) */
.cap-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 13px; background:var(--brand); color:#fff; border-radius:0; margin:14px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600;
}


/* =========================================================================
   PARTNER MARQUEE — infinite single-line logo slider (dark band)
   One source group of fillable drop-slots; js/ids.js clones it enough times
   to scroll seamlessly on any width. Clones keep the same ids, so a dropped
   logo appears in every copy automatically.
   ========================================================================= */
.partner-strip{
  background:#FFFFFF; padding-block:clamp(38px,5.5vw,64px);
  overflow:hidden;
}
.partner-strip .head{ text-align:left; margin-bottom:clamp(26px,3.6vw,44px); }
.partner-strip .head .kicker{ color:var(--steel); }

.marquee{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-group{ display:flex; align-items:center; flex:0 0 auto; }
.marquee-track{ display:flex; width:max-content; will-change:transform; animation:marquee var(--mq-dur,40s) linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.logo-item{
  flex:0 0 auto; width:clamp(160px,17vw,240px); height:80px;
  margin-inline:clamp(22px,3.6vw,60px);
  display:flex; align-items:center; justify-content:center;
}
.logo-item image-slot{ width:100%; height:100%; }
.logo-item image-slot::part(frame){ background:transparent; }
.logo-item image-slot::part(image){
  object-fit:contain !important;
  /* partner logos always black & white; brightness+contrast deepen pale inks
     (e.g. KraussMaffei light blue) while keeping the white backgrounds pure white */
  filter:grayscale(1) brightness(.7) contrast(2.6);
  transition:opacity .3s var(--ease);
}
.logo-item image-slot::part(empty){
  color:#9CA3AF; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px dashed var(--line); border-radius:0;
  font-weight:600;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(var(--mq-shift,50%) * -1)); } }

/* =========================================================================
   FRAUEN IN TECHNISCHEN BERUFEN — women across the IDS Group
   Connection-line group strip · feature cards · technical blocks · bereiche
   ========================================================================= */

/* --- Group connection line: four units joined by a dotted IDS line --- */
.unit-line{ display:flex; flex-wrap:nowrap; gap:0; position:relative; }
.unit-line .unit{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg-soft); padding:0 14px 0 0; white-space:nowrap;
  font-weight:600;
}
.dark .unit-line .unit{ color:#B8C0CC; }
.unit-line .unit .dot{
  width:15px; height:15px; border-radius:50%; border:2px solid var(--brand); background:var(--bg);
  position:relative; z-index:2;
}
.dark .unit-line .unit .dot{ background:var(--brand-dark); }
.unit-line .unit::before{
  content:""; position:absolute; left:8px; right:-8px; top:6px; height:2px; z-index:1;
  background:repeating-linear-gradient(90deg,var(--brand) 0 6px, transparent 6px 13px); opacity:.55;
}
.unit-line .unit:last-child::before{ display:none; }
@media(max-width:680px){ .unit-line{ flex-wrap:wrap; } .unit-line .unit{ flex:1 1 45%; min-width:130px; padding-bottom:18px; } .unit-line .unit::before{ right:0; } }

/* --- Feature cards (Produktion · Technik · Qualifizierung · Zukunft) --- */
.connect-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:980px){ .connect-cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .connect-cards{ grid-template-columns:1fr; } }
.wcard{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 26px 28px; overflow:hidden;
  display:flex; flex-direction:column; transition:.35s var(--ease);
}
.dark .wcard{ background:var(--ink-2); border-color:var(--line-d); }
.wcard::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--brand);
  opacity:0; transition:.45s var(--ease);
}
.wcard:hover{ border-color:var(--brand); }
.wcard:hover::before{ opacity:1; }
.wcard .wc-idx{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent); }
.wcard h4{ font-family:var(--display); font-weight:600; font-size:21px; margin:0 0 10px; line-height:1.25; color:var(--fg); }
.dark .wcard h4{ color:#FFFFFF; }
.wcard p{ font-size:14.5px; line-height:1.55; color:var(--fg-soft); margin:0; }
.dark .wcard p{ color:#B8C0CC; }

/* --- Technical competence blocks (Montage · Kunststoff · Metall · QS · Digital) --- */
.tech-blocks{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.dark .tech-blocks{ background:var(--line-d); border-color:var(--line-d); }
@media(max-width:900px){ .tech-blocks{ grid-template-columns:1fr 1fr 1fr; } }
@media(max-width:560px){ .tech-blocks{ grid-template-columns:1fr 1fr; } }
.tech-block{ position:relative; background:var(--paper); padding:28px 22px 26px; transition:.32s var(--ease); }
.dark .tech-block{ background:var(--ink-2); }
.tech-block:hover{ background:var(--mist); }
.dark .tech-block:hover{ background:var(--ink-3); }
.tech-block::before{ content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--brand); transition:.32s var(--ease); }
.tech-block:hover::before{ height:100%; }
.tech-block .tb-num{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent); }
.tech-block h5{ font-family:var(--display); font-weight:600; font-size:17px; margin:16px 0 0; line-height:1.25; color:var(--fg); }
.dark .tech-block h5{ color:#FFFFFF; }

/* --- Bereiche cards reuse .div-card; women-context tweak for inline use --- */
.bereich-grid{ margin-top:0; }

/* ===== Globally oriented banner ===== */
.global-band{
  position:relative; width:100%;
  min-height:clamp(120px, 12vw, 170px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate; background:#0b1530;
}
.global-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.global-text{
  position:relative; z-index:1; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(20px,2.6vw,34px) clamp(20px,5vw,60px);
  color:#fff; max-width:1200px;
}
.global-title{
  margin:0; font-family:var(--title);
  font-size:clamp(26px, 3.4vw, 44px);
  line-height:1.04; letter-spacing:.005em;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.global-title .light{ font-weight:300; }
.global-title .bold{ font-weight:700; }
.global-sub{
  margin:clamp(10px,1.4vw,18px) auto 0; max-width:60ch;
  font-family:var(--body); font-weight:700;
  font-size:clamp(15px, 1.5vw, 22px); line-height:1.4;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}

/* ===== Nachhaltigkeit im Fokus — full-bleed band ===== */
.sustain-band{
  position:relative; width:100%;
  min-height:clamp(120px, 12vw, 170px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
  background:#0e1f14;
}
.sustain-strip{
  position:absolute; inset:0; z-index:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.sustain-cell{ position:relative; overflow:hidden; }
.sustain-cell image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.sustain-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 130% at 50% 50%, rgba(8,28,16,.62) 0%, rgba(8,28,16,.34) 45%, rgba(8,28,16,.12) 100%),
    linear-gradient(180deg, rgba(8,28,16,.22), rgba(8,28,16,.30));
}
.sustain-text{
  position:relative; z-index:2; text-align:center;
  padding:clamp(22px,3vw,40px) clamp(20px,5vw,60px);
  color:#fff; max-width:1100px;
}
.sustain-title{
  margin:0;
  font-family:var(--title);
  font-size:clamp(26px, 3.4vw, 44px);
  line-height:1.04; letter-spacing:.005em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.sustain-title .light{ font-weight:300; }
.sustain-title .bold{ font-weight:700; }
.sustain-sub{
  margin:clamp(14px,2vw,26px) auto 0; max-width:62ch;
  font-family:var(--body); font-weight:700;
  font-size:clamp(15px, 1.5vw, 22px); line-height:1.4;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
@media (max-width:640px){
  .sustain-strip{ grid-template-columns:1fr; grid-auto-rows:1fr; }
}

/* =========================================================================
   KARRIERE — open positions, division filter, application form
   ========================================================================= */
.job-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,3vw,36px); }
button.chip{ background:none; cursor:pointer; line-height:1.2; transition:.2s var(--ease); }
.chip.on, .chip.on:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

.jobs{ display:flex; flex-direction:column; gap:12px; }
.job{ position:relative; background:var(--paper); border:1px solid var(--line); transition:border-color .3s var(--ease); }
.job[hidden]{ display:none; }
.job::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--brand); opacity:0; transition:opacity .3s var(--ease); }
.job:hover, .job[open]{ border-color:var(--brand); }
.job:hover::before, .job[open]::before{ opacity:1; }
.job summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px clamp(20px,2.6vw,32px); }
.job summary::-webkit-details-marker{ display:none; }
.job summary:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
.job[open] .faq-ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.job-main{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.job-div{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); font-weight:600; }
.job-title{ font-family:var(--display); font-weight:600; font-size:clamp(17px,1.8vw,21px); line-height:1.3; color:var(--fg); transition:color .2s; }
.job summary:hover .job-title{ color:var(--brand-dark); }
.job-meta{ display:flex; flex-wrap:wrap; gap:4px 22px; margin-top:2px; font-size:13.5px; color:var(--steel); }
.job-meta > span{ position:relative; }
.job-meta > span + span::before{ content:""; position:absolute; left:-13px; top:50%; width:4px; height:4px; border-radius:50%; background:var(--steel-2); transform:translateY(-50%); }
.job-body{ margin:0 clamp(20px,2.6vw,32px); padding:24px 0 clamp(26px,3vw,34px); border-top:1px solid var(--line); }
.job-intro{ margin:0; font-size:15.5px; color:var(--fg-soft); max-width:70ch; }
.job-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px); margin:22px 0 28px; }
@media(max-width:760px){ .job-cols{ grid-template-columns:1fr; } }
.job-cols h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-dark); margin:0 0 4px; font-weight:600; }
.job-cols .spec-list li{ font-size:14.5px; padding:11px 0; }
/* loading / could-not-load / nothing-open messages of the job list (js/careers.js) */
.jobs-state{ margin:0; padding:28px clamp(20px,2.6vw,32px); background:var(--paper); border:1px dashed var(--steel-2); color:var(--fg-soft); }
.jobs-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 30px;
  margin-top:clamp(28px,3vw,40px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--line); }
.jobs-foot p{ margin:0; font-size:15.5px; color:var(--fg-soft); }
/* ghost button on a light surface */
.jobs-foot .btn-ghost{ color:var(--brand); }
.jobs-foot .btn-ghost:hover{ background:var(--brand); }
.jobs-foot .btn-ghost:hover span, .jobs-foot .btn-ghost:hover .arr{ color:#fff; }

/* application form — file upload, consent, status (dark .form) */
@media(max-width:560px){ .form[data-apply-form]{ grid-template-columns:minmax(0,1fr); } }
.file-drop{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center; padding:28px 18px; border:1px dashed rgba(143,179,218,.45); background:rgba(255,255,255,.035);
  transition:border-color .22s var(--ease), background .22s var(--ease); }
.file-drop input[type=file]{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer; }
.file-drop:hover, .file-drop.drag{ border-color:var(--brand-tint); background:rgba(143,179,218,.07); }
.file-drop:focus-within{ border-color:var(--brand-tint); box-shadow:0 0 0 2px rgba(143,179,218,.3); }
.file-drop.has-file{ border-style:solid; border-color:var(--brand-tint); }
.file-drop .fd-ico{ color:var(--brand-tint); }
.file-drop .fd-prompt{ font-size:15px; color:#E5E7EB; }
.file-drop .fd-prompt b{ font-weight:600; color:#fff; }
.file-drop .fd-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--steel-2); font-weight:600; }
.file-drop .fd-files{ font-size:14px; font-weight:500; color:#fff; overflow-wrap:anywhere; }
.file-drop .fd-files:empty{ display:none; }
.form :user-invalid{ border-color:#F87171; }
.file-drop:has(:user-invalid){ border-color:#F87171; }
.consent{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:13.5px; line-height:1.55; color:#B8C0CC; }
.consent input{ flex:0 0 18px; width:18px; height:18px; margin:1px 0 0; accent-color:var(--brand-tint); cursor:pointer; }
.form .btn:disabled{ opacity:.6; cursor:progress; }
/* spam trap: off-screen for people (and screen readers), filled in by bots */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.apply-msg{ margin:0; padding:14px 16px; font-size:14.5px; line-height:1.55; border:1px solid; }
.apply-msg.ok{ color:#E5E7EB; border-color:rgba(143,179,218,.5); background:rgba(143,179,218,.09); }
.apply-msg.err{ color:#FECACA; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.08); }
/* the same notes on the light contact forms (homepage #kontakt, Vertrieb + its machine pop-up) */
.contact-clean .apply-msg.ok, .form-light .apply-msg.ok{ color:var(--brand-dark); border-color:rgba(31,74,122,.3); background:rgba(31,74,122,.06); }
.contact-clean .apply-msg.err, .form-light .apply-msg.err{ color:#9B1C1C; border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.05); }


/* =========================================================================
   PAGE THEME — Frauen stärken (body.theme-rose)
   Palette A · blush and berry (chosen 2026-10-09): pale blush surfaces, berry #B83B6E
   for actions and key words, deep berry only for the footer. Re-points the brand tokens
   so every component follows; the rules below cover what was hard-coded for dark blocks.
   ========================================================================= */
body.theme-rose{
  --rose:          #E79BB8;   /* soft pink: markers, dots, glows, hover tints */
  --rose-wash:     #FFF7FA;   /* page background, menus */
  --rose-mist:     #FBE9F0;   /* alternate light section */
  --blush:         #F9DCE7;   /* hero, former rose/dark blocks, closing call */
  --burgundy:      #B83B6E;   /* berry: buttons, links, key words (name kept from the earlier palette) */
  --burgundy-dark: #8E2A55;   /* berry, hover / pressed */

  --brand:       var(--burgundy);
  --brand-dark:  var(--burgundy-dark);
  --brand-light: #C9588A;
  --brand-tint:  var(--rose);
  --accent:      var(--brand);        /* :root resolved these against the site navy */
  --accent-2:    var(--brand-light);
  --secondary:   var(--burgundy);
  --ink:   #4A1C33;           /* deep berry: footer, mobile menu */
  --ink-2: #6E2D4D;
  --ink-3: #8E2A55;
  --line:  #F3D9E4;
  --mist:  var(--rose-mist);
  --bg:    var(--rose-wash);
  --fg:      #4A1C33;
  --fg-soft: #7A4560;
}
body.theme-rose ::selection{ background:var(--rose); color:var(--ink); }

/* navbar: white with berry text in both states (dark logo, berry CTA) */
body.theme-rose .hdr{
  background:#FFFFFF; border-bottom-color:var(--line);
  --fg:#4A1C33; --fg-soft:#5E2E46; --brand:var(--burgundy); --brand-dark:var(--burgundy-dark); --line:#F3D9E4;
  --nav-hover:var(--burgundy);
  transition:padding .35s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
body.theme-rose .hdr.scrolled{ box-shadow:0 8px 28px rgba(184,59,110,.10); }
body.theme-rose .hdr nav a,
body.theme-rose .hdr nav .nav-link,
body.theme-rose .hdr .nav-cta span{ transition:color .5s var(--ease); }
body.theme-rose .hdr nav.main .nav-link{ transition:background-position .5s var(--ease), color .5s var(--ease); }
body.theme-rose .hdr-brand{ position:relative; }
body.theme-rose .hdr-logo{ transition:opacity .6s var(--ease); }
body.theme-rose .hdr-logo-light{ position:absolute; left:0; top:0; opacity:0; }   /* light bar: the dark logo shows */
/* panels hanging off the header stay light */
body.theme-rose .hdr .mega,
body.theme-rose .hdr .dropdown{
  background:var(--rose-wash);
  --fg:#4A1C33; --fg-soft:#7A4560; --brand:var(--burgundy); --brand-dark:var(--burgundy-dark); --line:#F3D9E4;
}
body.theme-rose .lang-toggle:hover,
body.theme-rose .hdr .dropdown a:hover{ background:rgba(184,59,110,.06); color:var(--brand-dark); }
body.theme-rose .mega-card:hover .mega-label{ color:var(--brand-dark); }
body.theme-rose .mobile-menu{ background:rgba(74,28,51,.97); }
body.theme-rose .mobile-menu .m-sub a{ color:#E8C7D6; }

/* hero: blush gradient with two soft glows (white, berry-pink), dark berry copy */
body.theme-rose .page-hero{ background:linear-gradient(165deg, #FDEBF2 0%, var(--blush) 55%, #F5CEDD 100%); color:var(--fg); }
body.theme-rose .page-hero::before,
body.theme-rose .page-hero::after{ content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none; }
body.theme-rose .page-hero::before{ width:min(760px,90vw); aspect-ratio:1; right:-14%; top:-38%;
  background:radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 66%); }
body.theme-rose .page-hero::after{ width:min(620px,80vw); aspect-ratio:1; left:-16%; bottom:-46%;
  background:radial-gradient(circle, rgba(184,59,110,.16) 0%, rgba(184,59,110,0) 68%); }
body.theme-rose .page-hero .sub{ color:var(--fg-soft); }
body.theme-rose .page-hero .lede{ color:var(--fg); }
body.theme-rose .page-hero p:not(.lede){ color:var(--fg-soft); }

/* buttons: berry with white text; ghost buttons outlined in berry, filled on hover */
body.theme-rose .btn-primary{ background:var(--accent); color:#fff; border-color:transparent; }
body.theme-rose .btn-primary:hover{ background:var(--brand-dark); }
body.theme-rose .btn-ghost{ color:var(--burgundy); border-color:var(--burgundy); opacity:1; }
body.theme-rose .btn-ghost:hover{ background:var(--burgundy); }
body.theme-rose .btn-ghost:hover span,
body.theme-rose .btn-ghost:hover svg{ color:#fff; }
body.theme-rose .hdr .nav-cta{ background:var(--brand); }
body.theme-rose .hdr .nav-cta:hover{ background:var(--brand-dark); }
body.theme-rose .hdr .nav-cta span,
body.theme-rose .mobile-menu .m-cta{ color:#fff; }

/* key word of every title in berry (no underline) */
body.theme-rose h2.display strong{ color:var(--burgundy); }

/* blush blocks (the former dusty-rose and dark sections), with a soft light layer behind */
body.theme-rose .section.rose,
body.theme-rose .section.dark{
  background:var(--blush); color:var(--fg);
  --fg:#4A1C33; --fg-soft:#7A4560; --brand:var(--burgundy); --line:rgba(184,59,110,.22);
  overflow:hidden; isolation:isolate;
}
body.theme-rose .section.dark h2.display{ color:var(--fg); }
body.theme-rose .section.dark p,
body.theme-rose .section.dark .muted,
body.theme-rose .section.rose p{ color:var(--fg-soft); }
body.theme-rose .section.rose::before,
body.theme-rose .section.dark::before{ content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(32% 40% at 28% 30%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(30% 38% at 74% 72%, rgba(184,59,110,.12) 0%, rgba(184,59,110,0) 70%);
}
body.theme-rose .chip:hover{ background:rgba(231,155,184,.2); }
body.theme-rose .section.rose .chip:hover{ background:#FFFFFF; border-color:var(--burgundy); color:var(--burgundy); }
body.theme-rose .div-card::before{ background:var(--burgundy); }

/* photos: light pink placeholders, soft berry scrims */
body.theme-rose .media image-slot::part(frame),
body.theme-rose .photoband image-slot::part(frame){ background:#F6D9E5; }
body.theme-rose .media image-slot::part(empty),
body.theme-rose .photoband image-slot::part(empty){ color:#7A4560; }
body.theme-rose .media .grade{ background:linear-gradient(180deg, rgba(184,59,110,0) 60%, rgba(184,59,110,.16) 100%); }

/* photo band: blush with dark copy; a photo dropped in fades into blush behind the text */
body.theme-rose .photoband{ background:var(--rose-mist); }
body.theme-rose .photoband image-slot::part(image){ filter:none; }
body.theme-rose .photoband .grade{ background:linear-gradient(180deg, rgba(251,233,240,0) 20%, rgba(251,233,240,.92) 100%); }
body.theme-rose .photoband .pb-inner,
body.theme-rose .photoband .pb-inner h2{ color:var(--fg); }
body.theme-rose .photoband .pb-inner .lede{ color:var(--fg-soft); }

/* group line: pink dots */
body.theme-rose .unit-line .unit .dot{ border-color:var(--rose); }
body.theme-rose .unit-line .unit::before{ background:repeating-linear-gradient(90deg,var(--rose) 0 6px, transparent 6px 13px); opacity:.9; }

/* footer: deep berry with pink-tinted text */
body.theme-rose .footer{ background:var(--ink); color:#E2BFCF; }
body.theme-rose .footer .col h5,
body.theme-rose .footer-bot{ color:#D9AFC2; }
body.theme-rose .footer .col a{ color:#F3D9E4; }
body.theme-rose .footer .col a:hover{ color:var(--rose); }

/* ---------- Story · Eine Geschichte aus Rahovec (#geschichte) ----------
   A sticky drawing beside three chapters. ids.js writes the chapter in the middle of the
   screen to .rs-art[data-step] (0 = not yet seen) and the reading progress to --p.
   Each chapter adds its layer: 1 hills, vineyards, house · 2 IDS hall, way to work ·
   3 lights at home, smoke, family. The sun climbs a little with every chapter. */
.rstory .sec-head{ margin-bottom:clamp(30px,4vw,60px); }
/* opening the page (the hero was removed): clear the fixed navbar; its title is the page's h1 */
.rstory.rs-top{ padding-top:calc(var(--hdr-h,64px) + clamp(48px,7vw,100px)); }
.rstory h1.display{ font-size:clamp(30px,4.4vw,56px); font-weight:400; line-height:1.1; }
.rstory h1.display strong{ font-weight:700; color:var(--burgundy); }
.rs-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:start; }
.rs-art{
  position:sticky; top:calc(var(--hdr-h,64px) + clamp(20px,6vh,64px)); align-self:start;
  aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg, #FFFFFF 0%, #FFF7FA 100%);
  box-shadow:0 24px 48px rgba(184,59,110,.08);
}
.rs-art svg{ display:block; width:100%; height:100%; overflow:visible; }   /* hills run on past the frame for wide panels */

/* drawn parts: the outline draws itself, then the fill comes up */
.rs-art .rs-draw{ stroke-dasharray:1 1; stroke-dashoffset:1; fill-opacity:0;
  transition:stroke-dashoffset 1.6s var(--ease), fill-opacity .7s var(--ease) .7s; }
.rs-art:is([data-step="1"],[data-step="2"],[data-step="3"]) .rs-g1 .rs-draw,
.rs-art:is([data-step="2"],[data-step="3"]) .rs-g2 .rs-draw,
.rs-art[data-step="3"] .rs-g3 .rs-draw{ stroke-dashoffset:0; fill-opacity:1; }

.rs-hill{ fill:#FDF3F7; stroke:var(--rose); stroke-width:1.6; }
.rs-hill-back{ fill:#FBEAF1; stroke-width:1.3; }
.rs-ground{ fill:#FFFFFF; stroke:var(--burgundy); stroke-width:1.6; }
.rs-house *, .rs-hall rect, .rs-hall path{ fill:#FFFFFF; stroke:var(--burgundy); stroke-width:2; stroke-linejoin:round; }
.rs-art .rs-win, .rs-art .rs-hwin{ transition:stroke-dashoffset 1.6s var(--ease), fill-opacity .7s var(--ease) .7s, fill 1s var(--ease) .6s; }

/* the sun: hidden at 0, dawn at 1, climbing at 2, full day (with rays) at 3 */
.rs-sun{ transform:translateY(240px); transition:transform 2.4s var(--ease) .4s; }
.rs-art[data-step="1"] .rs-sun{ transform:translateY(150px); }
.rs-art[data-step="2"] .rs-sun{ transform:translateY(70px); }
.rs-art[data-step="3"] .rs-sun{ transform:none; }
.rs-disc{ fill:#FCE3EC; stroke:var(--rose); stroke-width:1.6; }
.rs-rays path{ fill:none; stroke:var(--rose); stroke-width:2.2; stroke-linecap:round; }
.rs-rays{ opacity:0; transform-box:view-box; transform-origin:470px 130px; transition:opacity 1s var(--ease) 1.4s; }
.rs-art[data-step="3"] .rs-rays{ opacity:1; }

/* vineyard rows: dotted vines that come up row by row */
.rs-vines path{ fill:none; stroke:var(--rose); stroke-width:5.5; stroke-linecap:round; stroke-dasharray:0 11;
  opacity:0; transition:opacity .9s var(--ease); }
.rs-vines path:nth-child(2){ transition-delay:.12s; } .rs-vines path:nth-child(3){ transition-delay:.24s; }
.rs-vines path:nth-child(4){ transition-delay:.36s; } .rs-vines path:nth-child(5){ transition-delay:.3s; }
.rs-vines path:nth-child(6){ transition-delay:.42s; } .rs-vines path:nth-child(7){ transition-delay:.54s; }
.rs-art:is([data-step="1"],[data-step="2"],[data-step="3"]) .rs-vines path{ opacity:.9; }

.rs-place{ font-size:13px; font-weight:600; letter-spacing:.16em; fill:var(--fg-soft); opacity:0; transition:opacity 1s var(--ease) 1s; }
.rs-art:is([data-step="1"],[data-step="2"],[data-step="3"]) .rs-place{ opacity:.75; }

/* chapter 2: hall lights on, the way to work, IDS on the facade */
.rs-logo{ font-size:21px; font-weight:700; letter-spacing:.08em; fill:var(--burgundy); opacity:0; transition:opacity .8s var(--ease) 1.2s; }
.rs-art:is([data-step="2"],[data-step="3"]) .rs-logo{ opacity:1; }
.rs-art:is([data-step="2"],[data-step="3"]) .rs-hwin{ fill:#F9D3E1; }
.rs-way{ fill:none; stroke:var(--rose); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:2 8; opacity:0; transition:opacity .9s var(--ease) 1s; }
.rs-art:is([data-step="2"],[data-step="3"]) .rs-way{ opacity:1; }
/* a dot walks the way: to work in chapter 2, home again in chapter 3 */
.rs-walker{ fill:var(--burgundy); stroke:rgba(231,155,184,.55); stroke-width:6; paint-order:stroke; opacity:0; transition:opacity .6s var(--ease); }
.rs-art[data-step="2"] .rs-g2 .rs-walker,
.rs-art[data-step="3"] .rs-g3 .rs-walker{ opacity:1; transition-delay:1.6s; }

/* chapter 3: windows at home light up, smoke rises, the family steps out */
.rs-art[data-step="3"] .rs-win{ fill:#F4B6CC; }
.rs-smoke{ fill:none; stroke:var(--rose); stroke-width:2.2; stroke-linecap:round; opacity:0; transition:opacity 1s var(--ease) 1s; }
.rs-art[data-step="3"] .rs-smoke{ opacity:1; }
.rs-family *{ fill:#FFFFFF; stroke:var(--burgundy); stroke-width:2; stroke-linejoin:round; }
.rs-family{ opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease) .9s, transform .9s var(--ease) .9s; }
.rs-art[data-step="3"] .rs-family{ opacity:1; transform:none; }

/* chapters, on a dotted thread that fills in berry as you read */
.rs-steps{ position:relative; padding-left:64px; --p:0; }
.rs-steps::before,
.rs-steps::after{ content:""; position:absolute; left:17px; top:0; width:2px; }
.rs-steps::before{ bottom:0; background:repeating-linear-gradient(180deg, var(--rose) 0 6px, transparent 6px 13px); opacity:.9; }
.rs-steps::after{ height:calc(var(--p) * 100%); background:var(--burgundy); }
.rs-step{ min-height:78vh; display:flex; align-items:center; }
.rs-body{ position:relative; max-width:52ch; padding-block:24px; transition:opacity .6s var(--ease); }
.rs-num{
  position:absolute; left:-64px; top:24px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--mist); border:2px solid var(--rose);
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--fg-soft);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.rs-body h3.display{ font-size:clamp(26px,2.8vw,36px); margin:0 0 20px; padding-top:2px; color:var(--fg); }
.rs-body .lede{ margin:0; color:var(--fg); }
.rs-body .muted{ margin:14px 0 0; line-height:1.75; color:var(--fg-soft); }
/* the chapter being read is at full strength, the others step back */
.rstory.rs-ready .rs-body{ opacity:.32; }
.rstory.rs-ready .rs-step.is-on .rs-body{ opacity:1; }
.rs-step.is-on .rs-num{ background:var(--burgundy); border-color:var(--burgundy); color:#FFFFFF; box-shadow:0 0 0 7px rgba(184,59,110,.12); }

.rs-fact{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(184,59,110,.22); display:grid; gap:6px; }
.rs-fact strong{ font-size:clamp(40px,4.4vw,58px); line-height:1; font-weight:700; color:var(--burgundy); }
.rs-fact span{ color:var(--fg); max-width:40ch; }
.rs-fact small{ font-size:12.5px; color:var(--fg-soft); margin-top:4px; }

/* closing line: the IDS slogan, told as the end of the story */
.rs-end{ position:relative; max-width:780px; margin:clamp(40px,6vw,80px) auto 0; padding-top:clamp(60px,7vw,90px); text-align:center; }
.rs-end::before{ content:""; position:absolute; left:50%; top:0; width:2px; height:clamp(36px,4vw,56px); background:var(--burgundy); }
.rs-end h2.display{ font-size:clamp(32px,4.6vw,60px); line-height:1.08; }
.rs-end .lede{ margin:24px auto 0; max-width:58ch; color:var(--fg-soft); }

/* phones and tablets: the drawing sticks under the navbar, chapters scroll beneath it */
@media(max-width:880px){
  .rs-grid{ display:block; }   /* a grid item can only stick inside its own row */
  .rs-art{ top:var(--hdr-h,64px); z-index:2; aspect-ratio:auto; height:clamp(200px, min(42vh, 75vw), 360px); margin-inline:calc(var(--pad) * -1); border-inline:0;
    box-shadow:0 12px 26px rgba(184,59,110,.10); }
  .rs-steps{ padding-left:52px; }
  .rs-steps::before, .rs-steps::after{ left:15px; }
  .rs-step{ min-height:62vh; align-items:flex-start; padding-top:6vh; }
  .rs-num{ left:-52px; width:32px; height:32px; font-size:11.5px; }
}
@media(prefers-reduced-motion:reduce){
  .rs-art *, .rs-body, .rs-num{ transition:none !important; animation:none !important; }
  .rs-walker{ display:none; }
}

/* ---------- Gallery · Die Frauen hinter IDS (.fgal) ----------
   Justified rows: each tile grows by its photo's aspect ratio (--ar, set inline), so a row
   shares one height and no photo is cropped. Phones: two columns, wide photos span both. */
.fg-grid{ display:grid; gap:clamp(10px,1.2vw,16px); }
.fg-row{ display:flex; gap:clamp(10px,1.2vw,16px); }
.fg-tile{ flex:var(--ar) 1 0; min-width:0; aspect-ratio:var(--ar); }
.fg-tile image-slot{ position:absolute; inset:0; }
.fg-tile .cap-tag{ margin:12px; }
@media(max-width:700px){
  .fg-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .fg-row{ display:contents; }
  .fg-team, .fg-montage-team, .fg-montage{ grid-column:1 / -1; }
  .fg-team{ order:1; } .fg-logistik{ order:2; } .fg-erfassung{ order:3; } .fg-montage-team{ order:4; } .fg-montage{ order:5; }
  .fg-tile .cap-tag{ margin:8px; padding:7px 9px; font-size:10px; }
}

/* ---------- Frauen page motion (skipped entirely for reduced-motion users) ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes roseRise{ from{ opacity:0; transform:translateY(26px); } }
  @keyframes roseFromSite{ from{ background-color:#0F2F52; } }   /* the site navbar's navy (--nav-bg) */
  @keyframes roseTextFromSite{ from{ color:rgba(255,255,255,.72); } }
  @keyframes roseCtaFromSite{ from{ background-color:#FFFFFF; } }
  @keyframes roseFloatA{ to{ transform:translate(-12%, 14%) scale(1.15); } }
  @keyframes roseFloatB{ to{ transform:translate(16%, -10%) scale(.88); } }
  @keyframes roseDrift{ to{ transform:translate(7%, 5%) rotate(6deg); } }
  @keyframes roseZoom{ to{ transform:scale(1.08); } }
  @keyframes roseDot{ 0%{ box-shadow:0 0 0 0 rgba(231,155,184,.7); } 70%,100%{ box-shadow:0 0 0 10px rgba(231,155,184,0); } }
  @keyframes roseFlow{ to{ background-position:13px 0; } }
  @keyframes roseChip{ from{ opacity:0; transform:translateY(10px) scale(.92); } }

  /* navbar arrives in the site's white/navy look and melts into burgundy (runs once) */
  body.theme-rose .hdr{ animation:roseFromSite 1.2s var(--ease) .15s backwards; }
  body.theme-rose .hdr nav a,
  body.theme-rose .hdr nav .nav-link,
  body.theme-rose .hdr .lang-toggle{ animation:roseTextFromSite 1.2s var(--ease) .15s backwards; }
  body.theme-rose .hdr .nav-cta{ animation:roseCtaFromSite 1.2s var(--ease) .15s backwards; }
  body.theme-rose .hdr .nav-cta span{ animation:roseTextFromSite 1.2s var(--ease) .15s backwards; }

  /* hero: copy rises line by line, glows drift */
  body.theme-rose .page-hero .wrap > *{ animation:roseRise 1s var(--ease) backwards; }
  body.theme-rose .page-hero .wrap > :nth-child(1){ animation-delay:.35s; }
  body.theme-rose .page-hero .wrap > :nth-child(2){ animation-delay:.5s; }
  body.theme-rose .page-hero .wrap > :nth-child(3){ animation-delay:.65s; }
  body.theme-rose .page-hero .wrap > :nth-child(4){ animation-delay:.8s; }
  body.theme-rose .page-hero .wrap > :nth-child(5){ animation-delay:.95s; }
  body.theme-rose .page-hero::before{ animation:roseFloatA 18s ease-in-out infinite alternate; }
  body.theme-rose .page-hero::after{ animation:roseFloatB 23s ease-in-out infinite alternate; }

  /* scroll reveal (ids.js adds .in) */
  body.theme-rose [data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
  body.theme-rose [data-reveal].in{ opacity:1; transform:none; }
  body.theme-rose [data-reveal][data-d="1"]{ transition-delay:.15s; }
  /* card rows: the cards arrive one after another instead of as one block */
  body.theme-rose .div-cards[data-reveal],
  body.theme-rose .tech-blocks[data-reveal]{ transform:none; transition:opacity .01s; }
  body.theme-rose .div-cards[data-reveal].in > *,
  body.theme-rose .tech-blocks[data-reveal].in > *{ animation:roseRise .9s var(--ease) backwards; }
  body.theme-rose .div-cards[data-reveal].in > :nth-child(2),
  body.theme-rose .tech-blocks[data-reveal].in > :nth-child(2){ animation-delay:.12s; }
  body.theme-rose .div-cards[data-reveal].in > :nth-child(3),
  body.theme-rose .tech-blocks[data-reveal].in > :nth-child(3){ animation-delay:.24s; }
  body.theme-rose .div-cards[data-reveal].in > :nth-child(4),
  body.theme-rose .tech-blocks[data-reveal].in > :nth-child(4){ animation-delay:.36s; }
  body.theme-rose .tech-blocks[data-reveal].in > :nth-child(5){ animation-delay:.48s; }
  body.theme-rose [data-reveal].in .chip{ animation:roseChip .6s var(--ease) backwards; animation-delay:.45s; }
  body.theme-rose [data-reveal].in .chip:nth-child(2){ animation-delay:.53s; }
  body.theme-rose [data-reveal].in .chip:nth-child(3){ animation-delay:.61s; }
  body.theme-rose [data-reveal].in .chip:nth-child(4){ animation-delay:.69s; }


  /* hover: cards lift, photos ease in, buttons rise */
  body.theme-rose .div-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(184,59,110,.14); border-color:var(--rose); }
  body.theme-rose .media image-slot{ transition:transform 1.4s var(--ease); }
  body.theme-rose .media:hover image-slot{ transform:scale(1.045); }
  body.theme-rose .btn:hover{ transform:translateY(-2px); }
  body.theme-rose .btn-primary:hover{ box-shadow:0 12px 26px rgba(184,59,110,.28); }

  /* group line: dots pulse in turn, the dotted line flows toward the next unit */
  body.theme-rose .unit-line .unit .dot{ animation:roseDot 2.8s ease-out infinite; }
  body.theme-rose .unit-line .unit:nth-child(2) .dot{ animation-delay:.7s; }
  body.theme-rose .unit-line .unit:nth-child(3) .dot{ animation-delay:1.4s; }
  body.theme-rose .unit-line .unit:nth-child(4) .dot{ animation-delay:2.1s; }
  body.theme-rose .unit-line .unit::before{ animation:roseFlow 1.4s linear infinite; }

  /* slow ambient movement */
  body.theme-rose .photoband image-slot{ transform-origin:60% 50%; animation:roseZoom 26s ease-in-out infinite alternate; }
  body.theme-rose .section.rose::before,
  body.theme-rose .section.dark::before{ animation:roseDrift 20s ease-in-out infinite alternate; }

  /* story drawing, chapter 3: smoke sways, the sun's rays turn slowly */
  @keyframes rsSmoke{ to{ transform:translate(3px,-7px); } }
  @keyframes rsRays{ to{ transform:rotate(45deg); } }
  .rs-art[data-step="3"] .rs-smoke{ animation:rsSmoke 2.6s ease-in-out infinite alternate; }
  .rs-art[data-step="3"] .rs-rays{ animation:rsRays 14s linear infinite; }
}

/* ---------- Legal pages: impressum.html, datenschutz.html ----------
   Both languages sit in the page; js/i18n.js sets <html lang>, which shows one .legal block. */
html[lang="en"] .legal[lang="de"],
html:not([lang="en"]) .legal[lang="en"]{ display:none; }
.legal{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,5vw,80px); align-items:start; }
.legal.has-toc{ grid-template-columns:230px minmax(0,1fr); }
.legal-body{ max-width:780px; min-width:0; }
.legal-body h2{ font-size:clamp(20px,1.8vw,24px); font-weight:600; line-height:1.25; text-transform:none; color:var(--fg);
  margin:52px 0 14px; padding-top:30px; border-top:1px solid var(--line); scroll-margin-top:110px; }
.legal-body p, .legal-body li{ color:var(--fg-soft); line-height:1.75; }
.legal-body p{ margin:0 0 14px; }
.legal-body ul{ margin:0 0 16px; padding-left:20px; }
.legal-body li{ margin:5px 0; }
.legal-body li::marker{ color:var(--brand-light); }
.legal-body strong{ color:var(--fg); font-weight:600; }
.legal-body a{ color:var(--brand); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; transition:color .2s; }
.legal-body a:hover{ color:var(--brand-dark); }
.legal-intro{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--steel); margin:0 0 18px !important; }
.legal-stamp{ margin-top:52px !important; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; color:var(--steel) !important; }

/* Impressum: the provider facts as a block of tiles */
.legal-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.legal-facts > div{ background:var(--mist); padding:26px 28px; border-top:3px solid var(--brand-dark); }
.legal-facts > div p:last-child{ margin-bottom:0; }
.legal-facts p{ color:var(--fg); }
.legal-body .legal-facts h2{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-light);
  margin:0 0 12px; padding:0; border:0; }
@media(max-width:640px){ .legal-facts{ grid-template-columns:minmax(0,1fr); } .legal-facts > div{ padding:22px 20px; } }

/* Datenschutz: contents list (sticky beside the text on wide screens) */
.legal-toc{ position:sticky; top:112px; border-left:2px solid var(--line); padding-left:20px; }
.legal-toc-h{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--steel); margin:0 0 10px; }
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; }
.legal-toc a{ display:flex; gap:12px; padding:5px 0; font-size:14.5px; line-height:1.4; color:var(--fg-soft); transition:color .2s; }
.legal-toc a::before{ content:counter(toc, decimal-leading-zero); min-width:20px; padding-top:1px; font-size:12.5px; font-weight:600; color:var(--brand-light); }
.legal-toc a:hover{ color:var(--brand); }
@media(max-width:960px){
  .legal.has-toc{ grid-template-columns:minmax(0,1fr); }
  .legal-toc{ position:static; border-left:0; padding:22px 24px; background:var(--mist); }
  .legal-toc ol{ columns:2 220px; column-gap:28px; }
  .legal-toc li{ break-inside:avoid; }
}

/* "Kurz gesagt" summary and the highlighted right-to-object note */
.legal-brief{ background:var(--brand-dark); color:#FFFFFF; padding:clamp(24px,3vw,34px) clamp(22px,3vw,36px); }
.legal-brief-h{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--brand-tint) !important; margin:0 0 14px !important; }
.legal-brief ul{ list-style:none; padding:0; margin:0; }
.legal-brief li{ position:relative; padding-left:24px; margin:10px 0 0; color:rgba(255,255,255,.9); line-height:1.6; }
.legal-brief li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; background:var(--brand-tint); }
.legal-note{ background:var(--mist); border-left:3px solid var(--brand); padding:20px 24px; margin:18px 0; }
.legal-note p{ margin:0; }

/* Not yet confirmed facts (fill in, then remove the mark and the .legal-draft note) */
.legal mark.todo{ background:#E3ECF7; color:var(--brand-dark); padding:1px 5px; outline:1px dashed var(--brand-light); outline-offset:-1px; }
.legal-draft{ margin:0 0 clamp(32px,4vw,52px); padding:14px 18px; background:#E3ECF7; border:1px dashed var(--brand-light); color:var(--brand-dark); font-size:14.5px; line-height:1.6; }

/* Footer: Impressum · Datenschutz (all pages) */
.footer-legal{ display:flex; gap:22px; }
.footer-legal a{ transition:color .2s; }
.footer-legal a:hover, .footer-legal a[aria-current="page"]{ color:var(--secondary); }
body.theme-rose .footer-legal a:hover{ color:var(--rose); }
/* no space before the link in the HTML: js/i18n.js swaps the whole sentence and would drop it */
.consent a{ margin-left:.3em; color:var(--brand-tint); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color .2s; }
.consent a:hover{ color:#FFFFFF; }