@import url("subpage-mobile-nav.css");

/* ===== Corporate typeface: TWK Lausanne (self-hosted — CD-konform & DSGVO) ===== */
@font-face{font-family:"Lausanne";src:url("assets/fonts/TWKLausanne-300.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Lausanne";src:url("assets/fonts/TWKLausanne-450.otf") format("opentype");font-weight:400 700;font-style:normal;font-display:swap}

/* BARTOSEK Medical — shared styles */
:root{
  --paper:#FFFFFF;
  --paper-2:#D7D9D9;
  --ink:#000000;
  --ink-2:#2A2A2A;
  --mute:#6E6E6E;
  --line:#0000001A;
  --line-strong:#00000033;
  --a-accent:#EA3122;                /* exact red from the current BARTOSEK website */
  --a-soft:oklch(0.95 0.04 27);
  --a-ink:oklch(0.32 0.12 27);
  --a-cta:#EA3122;                   /* one exact BARTOSEK red across claim, CTA and navigation */
  --b-accent:#384860;                /* established medical navy used in the earlier BARTOSEK concepts */
  --b-soft:oklch(0.94 0 0);
  --b-ink:oklch(0.24 0 0);
  --b-cta:#384860;
  --b-header-accent:#384860;
  --legacy-red:#EA3122;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Lausanne", ui-sans-serif, system-ui, sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.skip-link{
  position:fixed; top:10px; left:10px; z-index:10000; padding:11px 15px;
  background:#111; color:#fff; text-decoration:none; transform:translateY(-160%);
  transition:transform .16s ease;
}
.skip-link:focus{transform:translateY(0)}
.mono{font-family:"Lausanne", ui-monospace, monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase}
.wrap{max-width:1360px; margin:0 auto; padding:0 40px}
@media (max-width:720px){ .wrap{padding:0 20px} }

/* ===== NAV ===== */
nav.top{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
nav.top .row{display:flex; align-items:center; justify-content:space-between; gap:32px; height:72px}
.brand{display:flex; align-items:baseline; gap:14px; font-weight:600; font-size:20px; letter-spacing:0.06em; text-decoration:none; color:var(--ink)}
.brand .mono{color:var(--mute); font-weight:400}
.navlinks{display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.navlinks a{color:var(--ink); text-decoration:none; font-size:14px}
.navlinks a:hover{color:var(--mute)}
.navlinks a.current{color:var(--mute)}
.brand-sub{display:inline-block; line-height:1.25; font-size:10px; text-align:left}
.navlinks .lang{color:var(--mute); border-left:1px solid var(--line); padding-left:24px}

/* ===== Language switch bar (top of every page, always visible) ===== */
.langbar{background:var(--ink); color:var(--paper)}
.langbar .lwrap{max-width:1360px; margin:0 auto; padding:7px 40px; display:flex; justify-content:flex-end; align-items:center; gap:8px}
@media (max-width:720px){ .langbar .lwrap{padding:7px 20px} }
.langbar a{font-family:"Lausanne",sans-serif; font-size:11px; letter-spacing:0.08em; color:rgba(255,255,255,0.5); text-decoration:none; padding:2px 5px; border-radius:4px}
.langbar a.active{color:#fff; font-weight:500}
.langbar a:hover{color:#fff}
.langbar .sep{color:rgba(255,255,255,0.3); font-size:11px}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border:1px solid var(--ink); border-radius:999px;
  font-size:13px; text-decoration:none; color:var(--ink); background:transparent;
  transition:background .15s, color .15s;
}
.nav-cta:hover{background:var(--ink); color:var(--paper)}
@media (max-width:1080px){ .navlinks a:not(.nav-cta):not(.lang){font-size:13px} }
@media (max-width:980px){ .navlinks .lang{display:none} }
@media (max-width:1380px){ .navlinks a:not(.nav-cta){display:none} }

/* ===== Real logo ===== */
.brand{align-items:center}
.brand .brand-logo{height:20px; width:auto; display:block}
.foot-brand .foot-logo{height:34px; width:auto; display:block; margin-bottom:6px}

/* ===== Mobile navigation (hamburger) ===== */
.nav-toggle{
  display:none; width:42px; height:42px; padding:0; cursor:pointer; flex-shrink:0;
  background:transparent; border:1px solid var(--line-strong); border-radius:10px;
  align-items:center; justify-content:center;
}
.nav-toggle span{position:relative; display:block; width:18px; height:2px; background:var(--ink)}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:transform .2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1380px){
  nav.top .row{position:relative}
  .nav-toggle{display:inline-flex}
  .navlinks{
    position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(0,0,0,0.07);
    padding:8px 0; display:none;
  }
  .navlinks.open{display:flex}
  .navlinks.open a:not(.nav-cta){display:block; padding:14px 24px; font-size:16px}
  .navlinks.open .lang{display:block; padding:14px 24px; border-left:none; border-top:1px solid var(--line); margin-top:8px}
  .navlinks.open .nav-cta{margin:14px 24px; justify-content:center}
}

/* ===== Section heads ===== */
.eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--mute); margin-bottom:32px}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--ink)}
.section-head{display:flex; align-items:end; justify-content:space-between; margin-bottom:40px; gap:24px; flex-wrap:wrap}
.section-head h2{font-size:clamp(28px, 3.2vw, 44px); line-height:1.05; font-weight:500; letter-spacing:-0.02em; margin:8px 0 0; max-width:22ch}
.section-head .lead{color:var(--mute); max-width:48ch; font-size:15px}

/* ===== Buttons ===== */
.cta-primary{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 24px; border:none; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:500;
  text-decoration:none; transition:transform .15s, opacity .15s;
  background:var(--ink); color:var(--paper);
}
.cta-primary svg{width:18px; height:18px}
[data-world="a"] .cta-primary{background:var(--a-cta); color:#fff}
[data-world="b"] .cta-primary{background:var(--b-cta); color:#fff}
.cta-primary:hover{transform:translateX(4px)}
.cta-secondary{
  display:inline-flex; align-items:center; gap:10px;
  margin-left:24px; color:var(--ink); text-decoration:none;
  font-size:14px; border-bottom:1px solid var(--line-strong); padding-bottom:2px;
}
.cta-secondary:hover{border-color:var(--ink)}

/* ===== Image slot ===== */
.img-slot{
  position:relative; aspect-ratio:4/5;
  border:1px solid var(--line); border-radius:2px;
  overflow:hidden;
  background:repeating-linear-gradient(45deg, var(--paper-2) 0 12px, var(--paper) 12px 24px);
}
[data-world="a"] .img-slot{background:repeating-linear-gradient(45deg, var(--a-soft) 0 12px, var(--paper) 12px 24px)}
[data-world="b"] .img-slot{background:repeating-linear-gradient(45deg, var(--b-soft) 0 12px, var(--paper) 12px 24px)}
.img-slot .icon{position:absolute; inset:0; display:grid; place-items:center; color:var(--mute)}
.img-slot .caption{
  position:absolute; left:14px; bottom:14px; right:14px;
  background:var(--paper); padding:8px 12px; border:1px solid var(--line);
  font-family:"Lausanne", sans-serif; font-size:11px; color:var(--mute);
  display:flex; justify-content:space-between; gap:8px;
}

/* ===== Footer ===== */
footer{padding:72px 0 32px; background:var(--paper); border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:48px}
@media (max-width:880px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px} }
.foot-col{min-width:0}
.foot-col h5{font-family:"Lausanne", sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--mute); font-weight:400; margin:0 0 16px}
.foot-col a{color:var(--ink); text-decoration:none; display:block; font-size:14px; padding:3px 0; overflow-wrap:anywhere}
.foot-col p > a{display:inline; padding:0; font-size:inherit}
.foot-col a:hover{color:var(--mute)}
.foot-col p{font-size:14px; color:var(--ink-2); margin:0 0 4px; line-height:1.5; overflow-wrap:anywhere}
.foot-bot{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mute); font-size:12px}
.foot-brand{font-size:48px; font-weight:600; letter-spacing:0.04em; margin:0 0 16px; line-height:1}
.foot-brand span{color:var(--mute); font-weight:400; font-size:13px; letter-spacing:0.06em; margin-left:14px; vertical-align:middle}

/* ===== Page hero (sub-pages) ===== */
.page-hero{padding:60px 0 48px; border-bottom:1px solid var(--line)}
.page-hero .crumb{display:flex; gap:14px; align-items:center; color:var(--mute); margin-bottom:32px; font-size:13px}
.page-hero .crumb a{color:var(--mute); text-decoration:none}
.page-hero .crumb a:hover{color:var(--ink)}
.page-hero h1{font-size:clamp(40px, 5.4vw, 76px); line-height:1; letter-spacing:-0.025em; font-weight:500; margin:0 0 24px; max-width:18ch; text-wrap:balance}
.page-hero .lead{font-size:clamp(17px, 1.4vw, 19px); color:var(--ink-2); max-width:60ch; margin:0 0 48px}
.page-hero .meta{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; border-top:1px solid var(--line); padding-top:32px}
.page-hero .meta .cell .mono{color:var(--mute); display:block; margin-bottom:6px}
.page-hero .meta .cell .v{font-size:18px; letter-spacing:-0.01em}
@media (max-width:880px){ .page-hero .meta{grid-template-columns:repeat(2,1fr)} }

/* ===== Drawer ===== */
.drawer{position:fixed; top:0; right:0; height:100vh; width:min(560px, 92vw); background:var(--paper); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); z-index:100; overflow-y:auto; box-shadow:-20px 0 40px rgba(0,0,0,0.05)}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer-head{position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); padding:20px 32px; display:flex; justify-content:space-between; align-items:center}
.drawer-head .mono{color:var(--mute)}
.drawer-close{background:none; border:none; cursor:pointer; padding:8px; font-size:18px}
.drawer-body{padding:32px; padding-bottom:64px}
.drawer-body h3{font-size:22px; font-weight:500; margin:32px 0 12px; letter-spacing:-0.01em}
.drawer-body h3:first-child{margin-top:0}
.drawer-body p{font-size:14px; line-height:1.55; margin:0 0 12px; color:var(--ink-2)}
.drawer-body ul{padding-left:20px; margin:0 0 16px}
.drawer-body li{font-size:14px; line-height:1.55; color:var(--ink-2); margin-bottom:6px}
.drawer-trigger{position:fixed; bottom:24px; right:24px; z-index:60; background:var(--ink); color:var(--paper); border:none; cursor:pointer; padding:14px 18px; border-radius:999px; font-family:"Lausanne", sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.drawer-trigger:hover{background:#000}

/* ===== Tighter section spacing on mobile ===== */
@media (max-width:760px){
  .page-hero{padding:24px 0 36px}
  footer{padding:48px 0 28px}
}

/* Real project and team photography */
.img-slot > img, .row-card .thumb > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* ===== Dual-World-Chrome auf Unterseiten (v9) =====
   Welt-fixe Seiten (body[data-world]) und Ansichts-Zustand auf neutralen
   Seiten (body[data-world-view], nur Projekte) zeigen die aktive Welt als
   Akzentlinie oben in der Nav + eingefärbten current-Link. box-shadow
   statt border, damit die sticky Nav keinen Layout-Shift bekommt. */
body[data-world="a"] nav.top, body[data-world-view="a"] nav.top{box-shadow:inset 0 2px 0 var(--a-accent)}
body[data-world="b"] nav.top, body[data-world-view="b"] nav.top{box-shadow:inset 0 2px 0 var(--b-accent)}
body[data-world="a"] .navlinks a.current, body[data-world-view="a"] .navlinks a.current{color:var(--a-accent)}
body[data-world="b"] .navlinks a.current, body[data-world-view="b"] .navlinks a.current{color:var(--b-accent)}

/* Dezenter Wechsel-Link im Page-Hero der beiden Welt-Hauptseiten */
.world-switch-link{
  display:inline-flex; align-items:center; gap:6px; margin:0;
  font-family:"Lausanne", sans-serif; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--mute); text-decoration:none;
  border-bottom:1px dashed var(--line-strong); padding-bottom:1px;
}
.world-switch-link:hover{color:var(--ink); border-color:var(--ink)}
.page-context{display:flex; align-items:center; justify-content:space-between; gap:18px 32px; max-width:1120px; margin-bottom:clamp(24px,3vw,40px)}
.page-context .eyebrow{margin:0}
@media (max-width:720px){
  .page-context{align-items:flex-start; flex-direction:column; margin-bottom:28px}
  .world-switch-link{font-size:10px}
}

/* ===== V11: quietness pass for all subpages =====
   Larger uninterrupted spaces, fewer rules and fewer decorative counters. */
.page-hero{
  padding:88px 0 76px;
  border-bottom:0;
}
.page-hero .meta{
  border-top:0;
  padding-top:12px;
  gap:48px;
}
.section-head{margin-bottom:56px}
.statement,.leitsatz{
  padding-top:88px !important;
  padding-bottom:88px !important;
  border-bottom:0 !important;
}
.value .marker,.skarte .marker,.ir-cell .marker,.why-cell .marker{
  display:none !important;
}
.value .num,.ir-cell .num,.why-cell .num,.pain-list .num{
  display:none !important;
}
.sol-cell > .mono{display:none !important}
.values-grid,.struktur-grid,.ir-grid{
  border-top:0 !important;
  background:transparent !important;
  gap:48px !important;
}
.value,.skarte,.ir-cell{
  border:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
@media (max-width:760px){
  .page-hero{padding:52px 0 48px}
  .page-hero .meta{gap:24px}
  .statement,.leitsatz{padding-top:60px !important; padding-bottom:60px !important}
  .values-grid,.struktur-grid,.ir-grid{gap:32px !important}
}

/* ===== V11 subpage component contract =====
   Deliberately low-ornament building blocks for all future subpages. */
:root{
  --content:1360px;
  --measure:66ch;
  --gutter:clamp(20px, 4vw, 40px);
  --section-space:clamp(56px, 6vw, 88px);
  --section-space-tight:clamp(40px, 4.5vw, 64px);
  --display-xl:clamp(2.9rem, 5.5vw, 5.75rem);
  --display-lg:clamp(2.35rem, 4.8vw, 5rem);
  --display-md:clamp(1.65rem, 2.8vw, 3rem);
}
.wrap{max-width:var(--content); padding-inline:var(--gutter)}
main{overflow:hidden}
main section{scroll-margin-top:96px}
.page-hero{padding-block:clamp(36px, 4.5vw, 64px) clamp(44px, 5.3vw, 72px)}
.page-hero .crumb{margin-bottom:clamp(20px,2.5vw,32px); gap:10px; font-size:12px}
.page-hero .crumb-sep{color:var(--line-strong); font-size:14px}
.page-hero h1{font-size:var(--display-xl); line-height:.96; letter-spacing:-.05em; max-width:19ch; margin-bottom:clamp(24px,3vw,36px)}
.page-hero .lead{font-size:clamp(1.05rem,1.35vw,1.25rem); line-height:1.42; max-width:68ch; margin-bottom:clamp(28px,3.5vw,48px)}
.page-hero .meta{max-width:1000px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,48px)}
.page-hero .meta .cell{min-width:0}
.page-hero .meta .cell .v{font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.28; overflow-wrap:anywhere}
.eyebrow{margin-bottom:18px}
.quiet-section,.problem,.standort,.interfaces,.process-a,.process-b,.mini{padding-block:var(--section-space); border:0}
.section-intro{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:clamp(32px,7vw,112px); align-items:end; margin-bottom:clamp(36px,5.5vw,72px)}
.section-intro h2,.section-head h2{font-size:var(--display-lg); line-height:.98; letter-spacing:-.045em; max-width:16ch; margin:8px 0 0; font-weight:500}
.section-intro .lead,.section-head .lead{font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.45; color:var(--mute); max-width:44ch; margin:0}
.section-head{margin-bottom:clamp(36px,5vw,64px)}
.story-block{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,9vw,144px); align-items:start}
.story-block h2{font-size:var(--display-lg); line-height:.98; letter-spacing:-.045em; margin:10px 0 0; font-weight:500; max-width:15ch}
.story-block > p,.story-block .prose{font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.48; max-width:48ch; margin:0}
.open-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(40px,8vw,128px)}
.open-grid > article,.open-grid > div{padding-block:28px; border-top:1px solid var(--line)}
.open-grid h3,.open-grid h4{font-size:clamp(1.25rem,1.8vw,1.65rem); line-height:1.1; letter-spacing:-.025em; margin:0 0 10px; font-weight:500}
.open-grid p{color:var(--mute); max-width:42ch; margin:0; line-height:1.5}
.pain-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,7vw,104px)}
.pain-list li{display:block; padding:28px 0; border-top:1px solid var(--line)}
.pain-list li:last-child{border-bottom:0}
.pain-list h4{font-size:clamp(1.25rem,1.8vw,1.65rem); line-height:1.1; letter-spacing:-.025em; margin:0 0 10px; font-weight:500}
.pain-list p{font-size:1rem; color:var(--mute); margin:0; line-height:1.5; max-width:42ch}
.solution{padding-block:var(--section-space); background:var(--ink); color:var(--paper); border:0}
.solution h2{font-size:var(--display-lg); line-height:.98; letter-spacing:-.045em; max-width:18ch; color:var(--paper); margin:10px 0 clamp(40px,7vw,88px); font-weight:500}
.solution .accent{color:var(--a-accent)}
[data-world="b"] .solution .accent{color:var(--b-accent)}
.sol-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,5vw,72px); background:transparent; border:0}
.sol-cell{min-height:0; padding:0; background:transparent; gap:0}
.sol-cell h4{font-size:clamp(1.25rem,1.8vw,1.6rem); color:var(--paper); margin:0 0 12px; font-weight:500; line-height:1.12}
.sol-cell p{font-size:1rem; color:rgba(255,255,255,.68); line-height:1.5; margin:0}
.media-wide{position:relative; min-height:clamp(320px,53vw,720px); background:var(--paper-2); overflow:hidden}
.media-wide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.media-wide figcaption,.media-grid figcaption{position:absolute; left:var(--gutter); bottom:20px; color:#fff; font-size:11px; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 1px 12px #000}
.media-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.media-grid figure{position:relative; aspect-ratio:4/3; margin:0; overflow:hidden; background:var(--paper-2)}
.media-grid img{height:100%; width:100%; object-fit:cover; display:block}
.case-gallery-section{background:#f7f7f5}
.case-gallery-intro{margin-bottom:clamp(36px,5vw,68px)}
.case-gallery-intro h2{margin-top:10px}
.case-gallery-intro > p{align-self:end; color:var(--mute); line-height:1.5; max-width:42ch; margin:0}
.case-gallery{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.5vw,22px)}
.case-gallery figure{position:relative; grid-column:span 4; aspect-ratio:4/3; margin:0; overflow:hidden; background:var(--paper-2)}
.case-gallery figure::after{content:""; position:absolute; z-index:1; inset:auto 0 0; height:38%; pointer-events:none; background:linear-gradient(transparent,rgba(0,0,0,.45))}
.case-gallery img{position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; display:block; backface-visibility:hidden; transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.case-gallery figure:hover img{transform:scale(1.025)}
.case-gallery figcaption{position:absolute; z-index:2; left:clamp(16px,2vw,26px); right:clamp(16px,2vw,26px); bottom:clamp(14px,1.6vw,22px); color:#fff; font-size:11px; line-height:1.35; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.75)}
.case-gallery--h4o figure:first-child,.case-gallery--maxmed figure:nth-child(1),.case-gallery--maxmed figure:nth-child(6){grid-column:span 8; aspect-ratio:16/9}
.case-gallery--maxmed figure:nth-child(8),.case-gallery--maxmed figure:nth-child(9){grid-column:span 6; aspect-ratio:3/2}
.process-rail{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,4vw,64px); counter-reset:process}
.process-rail > article{position:relative; padding-top:24px; border-top:1px solid var(--ink)}
.process-rail > article::before{counter-increment:process; content:"0" counter(process); display:block; font-size:11px; letter-spacing:.06em; color:var(--mute); margin-bottom:26px}
.process-rail h3,.process-rail h4{font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.1; letter-spacing:-.025em; font-weight:500; margin:0 0 10px}
.process-rail p{color:var(--mute); line-height:1.5; margin:0}
.process-rail ul{margin:16px 0 0; padding:0; list-style:none; color:var(--ink-2)}
.process-rail li{padding-left:14px; position:relative; margin-top:5px; font-size:.92rem}
.process-rail li::before{content:"–"; position:absolute; left:0; color:var(--mute)}
.project-feature{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(28px,5vw,72px); align-items:end}
.project-feature .media-wide{min-height:clamp(280px,38vw,540px)}
.project-feature h3{font-size:var(--display-md); letter-spacing:-.04em; line-height:1; margin:12px 0}
.project-feature p{font-size:1.05rem; line-height:1.5; color:var(--mute); max-width:38ch}
.project-feature .outcome-list strong::after{content:":"}
.outcome-list{list-style:none; margin:26px 0 0; padding:0}
.outcome-list li{border-top:1px solid var(--line); padding:14px 0; font-size:1rem}
.reference-overview{padding-block:clamp(64px,7vw,104px); border-top:1px solid var(--line); background:#f7f7f5}
.reference-overview + .reference-overview{padding-top:0; border-top:0}
.reference-overview-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); gap:clamp(28px,7vw,104px); align-items:end; margin-bottom:clamp(38px,5vw,68px)}
.reference-overview-head h2{font-size:var(--display-md); line-height:1; letter-spacing:-.04em; margin:8px 0 0; max-width:16ch; font-weight:500}
.reference-overview-head p{margin:0; color:var(--mute); line-height:1.5; max-width:44ch}
.reference-overview[data-project-world="a"] .reference-kicker{color:var(--a-accent)}
.reference-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(42px,6vw,84px) clamp(22px,3vw,42px)}
.reference-card{min-width:0; padding-top:14px; border-top:1px solid var(--line-strong)}
.reference-visual{position:relative; aspect-ratio:16/10; margin:0 0 20px; overflow:hidden; background:#e8e8e4}
.reference-visual img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .35s}
.reference-card:hover .reference-visual img{transform:scale(1.025)}
.reference-visual--identity{display:flex; flex-direction:column; justify-content:space-between; padding:clamp(22px,3vw,38px); isolation:isolate; background:#111; color:#fff}
.reference-visual--identity::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.34; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.17) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.13) 50%,transparent 50.2%); background-size:64px 64px}
.reference-visual--identity::after{content:""; position:absolute; right:-12%; bottom:-42%; width:62%; aspect-ratio:1; border:1px solid rgba(255,255,255,.32); border-radius:50%}
.reference-identity-code{font-size:clamp(3.8rem,8vw,7.6rem); line-height:.8; letter-spacing:-.065em; font-weight:500}
.reference-identity-label{align-self:flex-end; max-width:22ch; text-align:right; color:rgba(255,255,255,.72)}
.reference-overview[data-project-world="a"] .reference-visual--identity{background:var(--a-accent)}
.reference-meta{display:flex; justify-content:space-between; gap:20px; margin-bottom:10px; color:var(--mute)}
.reference-card h3{font-size:clamp(1.45rem,2.2vw,2rem); line-height:1.05; letter-spacing:-.03em; margin:0 0 10px; font-weight:500}
.reference-card p{font-size:.98rem; line-height:1.5; color:var(--mute); margin:0; max-width:52ch}
.reference-detail{margin-top:22px; border-top:1px solid var(--line)}
.reference-detail summary{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; cursor:pointer; list-style:none; font-family:"Lausanne",sans-serif; font-size:12px; letter-spacing:.045em; text-transform:uppercase; color:var(--ink)}
.reference-detail summary::-webkit-details-marker{display:none}
.reference-detail summary::after{content:"+"; flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; font-size:16px; line-height:1; transition:transform .25s,background .25s,color .25s}
.reference-detail[open] summary::after{transform:rotate(45deg); background:var(--ink); color:#fff}
.reference-detail-grid{display:grid; gap:0; padding-bottom:8px}
.reference-detail-grid div{padding:14px 0; border-top:1px solid var(--line)}
.reference-detail-grid b{display:block; margin-bottom:7px; font-family:"Lausanne",sans-serif; font-size:10px; font-weight:400; letter-spacing:.055em; text-transform:uppercase; color:var(--ink)}
.reference-detail-grid p{font-size:.94rem; line-height:1.52}
.cta-band{padding-block:var(--section-space-tight); background:var(--paper-2)}
.cta-band .wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:clamp(32px,7vw,112px); align-items:center}
.cta-band h2,.cta-band h3{font-size:var(--display-md); line-height:1; letter-spacing:-.04em; margin:0; max-width:15ch; font-weight:500}
.cta-band .cta-copy{display:grid; justify-items:start; gap:16px; color:var(--mute)}
.page-hero .media-wide{margin-top:clamp(40px,6vw,88px)}
[data-world="b"] .cta-band{background:#000; color:#fff}
[data-world="b"] .cta-band .cta-copy{color:rgba(255,255,255,.68)}
[data-world="b"] .cta-band .cta-primary{background:#fff; color:#000}
.legal-prose{max-width:var(--measure); font-size:1rem; line-height:1.65}
.legal-prose h2{font-size:var(--display-md); line-height:1; letter-spacing:-.035em; margin:64px 0 18px}
.foot-col h4{font-family:"Lausanne",sans-serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); font-weight:400; margin:0 0 16px}
.cta-primary{border-radius:0}
:focus-visible{outline:2px solid var(--a-accent); outline-offset:4px}
[data-world="b"] :focus-visible{outline-color:#fff; box-shadow:0 0 0 6px #000}
@media (max-width:880px){
  .page-hero .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-intro,.story-block,.project-feature,.cta-band .wrap{grid-template-columns:1fr}
  .project-feature > .media-wide{order:-1}
  .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-rail{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px}
  .reference-overview-head{grid-template-columns:1fr}
  .case-gallery figure,.case-gallery--h4o figure:first-child,.case-gallery--maxmed figure:nth-child(1),.case-gallery--maxmed figure:nth-child(6),.case-gallery--maxmed figure:nth-child(8),.case-gallery--maxmed figure:nth-child(9){grid-column:span 6; aspect-ratio:4/3}
  .case-gallery--h4o figure:last-child,.case-gallery--maxmed figure:last-child{grid-column:1/-1; aspect-ratio:16/9}
}
@media (max-width:640px){
  .page-hero h1{max-width:16ch}
  .pain-list,.open-grid,.sol-grid,.process-rail,.media-grid{grid-template-columns:1fr}
  .quiet-section,.problem,.standort,.interfaces,.process-a,.process-b,.mini,.solution{padding-block:var(--section-space-tight)}
  .media-wide{min-height:280px}
  .reference-grid{grid-template-columns:1fr}
  .reference-overview + .reference-overview{padding-top:12px}
  .case-gallery figure,.case-gallery--h4o figure:first-child,.case-gallery--maxmed figure:nth-child(1),.case-gallery--maxmed figure:nth-child(6),.case-gallery--maxmed figure:nth-child(8),.case-gallery--maxmed figure:nth-child(9){grid-column:1/-1; aspect-ratio:4/3}
  .case-gallery--h4o figure:last-child,.case-gallery--maxmed figure:last-child{aspect-ratio:4/3}
}
@media (max-width:360px){
  nav.top .row{gap:16px}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important}
}

/* ===== V14 complete site header =====
   Every content page now uses the same menu shown after an area is selected
   on the homepage. The utility bar contains language only. */
body.legacy-subnav .langbar .lwrap{justify-content:flex-end!important}
body.legacy-subnav nav.top .row{height:84px}
body.legacy-subnav .brand .brand-logo{height:22px}
body.legacy-subnav .brand-sub{font-size:9px}
body.legacy-subnav .navlinks{gap:clamp(10px,1.25vw,23px)}
body.legacy-subnav .navlinks a{position:relative;font-size:clamp(11px,.88vw,14px)}
body.legacy-subnav .navlinks a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--a-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
body.legacy-subnav .navlinks a:not(.nav-cta):hover::after,
body.legacy-subnav .navlinks a.current:not(.nav-cta)::after{transform:scaleX(1)}
body.legacy-subnav .navlinks a.current{color:var(--a-accent);font-weight:500}
body.legacy-subnav .navlinks .nav-cta{padding:12px 18px}
body.legacy-subnav[data-world="a"] nav.top{background:color-mix(in srgb,var(--a-accent) 4.5%,#fff)}
body.legacy-subnav[data-world="b"] nav.top,
body.legacy-subnav[data-world-view="b"] nav.top{background:#f3f3f2}
body.legacy-subnav[data-world="b"] .navlinks a.current,
body.legacy-subnav[data-world-view="b"] .navlinks a.current{color:var(--ink)}
body.legacy-subnav[data-world="b"] .navlinks a:not(.nav-cta)::after,
body.legacy-subnav[data-world-view="b"] .navlinks a:not(.nav-cta)::after{background:var(--ink)}
body.legacy-subnav[data-world="a"] nav.top,
body.legacy-subnav[data-world-view="a"] nav.top{box-shadow:inset 0 -2px 0 var(--a-accent)}
body.legacy-subnav[data-world="b"] nav.top,
body.legacy-subnav[data-world-view="b"] nav.top{box-shadow:inset 0 -2px 0 var(--ink)}

@media(max-width:1380px){
  body.legacy-subnav .langbar{height:36px}
  body.legacy-subnav .langbar .lwrap{display:flex;justify-content:flex-end;min-height:36px;height:36px;padding:0 14px}
  body.legacy-subnav .langbar .lang-switch{height:36px;padding:0}
  body.legacy-subnav .langbar .lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
  body.legacy-subnav nav.top{top:36px}
  body.legacy-subnav nav.top .row{height:68px}
  body.legacy-subnav .navlinks.open a[href*="#unternehmen"],
  body.legacy-subnav .navlinks.open a[href*="#company"],
  body.legacy-subnav .navlinks.open a[href^="Investoren"]{display:block!important}
}

/* ===== V12 unified navigation ===== */
.langbar{position:sticky; top:0; z-index:52; height:32px}
body .langbar .lwrap{max-width:1360px; min-height:32px; height:32px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; gap:0}
.lang-global{display:flex; align-self:stretch; align-items:stretch}
body .langbar .lang-global a{display:flex; align-items:center; padding:0 16px; border-radius:0; color:rgba(255,255,255,.72); font-size:10px; letter-spacing:.055em; text-transform:uppercase}
body .langbar .lang-global a:first-child{padding-left:0}
body .langbar .lang-global a + a{border-left:1px solid rgba(255,255,255,.18)}
body .langbar .lang-global a:hover,body .langbar .lang-global a:focus-visible{color:#fff; box-shadow:inset 0 -2px 0 var(--a-accent); outline:none}
.lang-switch{display:flex; align-items:center; align-self:stretch; gap:8px}

body nav.top{top:32px; background:rgba(255,255,255,.91); border-bottom:1px solid var(--line); box-shadow:none; perspective:2000px}
body nav.top::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); opacity:0; transform:scaleX(0); pointer-events:none}
body[data-world="a"] nav.top::after,body[data-world-view="a"] nav.top::after{opacity:1; transform:scaleX(1); transform-origin:left; background:var(--a-accent)}
body[data-world="b"] nav.top::after,body[data-world-view="b"] nav.top::after{opacity:1; transform:scaleX(1); transform-origin:right; background:var(--b-accent)}
nav.top > .wrap{max-width:1360px}
.nav-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr); align-items:stretch; height:84px; position:relative}
.nav-center{display:flex; min-width:0; height:84px; border-left:1px solid var(--line); border-right:1px solid var(--line); background:#fff; position:relative; z-index:5}
.nav-brand{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:0 20px; color:var(--ink); text-decoration:none; white-space:nowrap}
.nav-brand .brand-logo{height:25px; width:auto; display:block}
.nav-brand .brand-sub{color:var(--mute); font-size:10px}
.nav-half{display:flex; align-items:center; min-width:0; padding:0 24px; position:relative; background:#fff}
.nav-half[data-side="a"]{justify-content:flex-start}
.nav-half[data-side="b"]{justify-content:flex-end}
.nav-half-home{cursor:pointer}
.nav-world-label{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap}
.nav-world-label .ws-letter{display:inline-grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border:1px solid var(--line-strong); border-radius:50%; font-size:11px}
.nav-half-cta{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px dashed var(--line-strong); border-radius:999px; color:var(--mute); font-family:"Lausanne",sans-serif; font-size:9.5px; letter-spacing:.055em; line-height:1; text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer}
.nav-half[data-side="a"] .nav-half-cta{margin-left:14px}
.nav-half[data-side="b"] .nav-half-cta{margin-right:14px}
.nav-world-links{display:none; align-items:center; gap:clamp(10px,1.25vw,22px); min-width:0; width:100%}
.nav-world-links a{color:var(--ink); text-decoration:none; white-space:nowrap; font-size:clamp(11px,.9vw,13px)}
.nav-world-links a:hover{color:var(--mute)}
.nav-half[data-side="a"] .nav-world-links{justify-content:flex-start}
.nav-half[data-side="b"] .nav-world-links{justify-content:flex-end}
.nav-world-links .nav-cta{padding:10px 13px; border:1px solid var(--ink); border-radius:0}
body[data-world="a"] .nav-half[data-side="a"] .nav-world-label,body[data-world-view="a"] .nav-half[data-side="a"] .nav-world-label{display:none}
body[data-world="a"] .nav-half[data-side="a"] .nav-half-cta,body[data-world-view="a"] .nav-half[data-side="a"] .nav-half-cta{display:none}
body[data-world="a"] .nav-half[data-side="a"] .nav-world-links,body[data-world-view="a"] .nav-half[data-side="a"] .nav-world-links{display:flex}
body[data-world="b"] .nav-half[data-side="b"] .nav-world-label,body[data-world-view="b"] .nav-half[data-side="b"] .nav-world-label{display:none}
body[data-world="b"] .nav-half[data-side="b"] .nav-half-cta,body[data-world-view="b"] .nav-half[data-side="b"] .nav-half-cta{display:none}
body[data-world="b"] .nav-half[data-side="b"] .nav-world-links,body[data-world-view="b"] .nav-half[data-side="b"] .nav-world-links{display:flex}
body[data-world="a"] .nav-half[data-side="a"],body[data-world-view="a"] .nav-half[data-side="a"]{background:color-mix(in srgb,var(--a-accent) 5%,#fff)}
body[data-world="b"] .nav-half[data-side="b"],body[data-world-view="b"] .nav-half[data-side="b"]{background:#f0f0ef}

/* The selected submenu item remains visible within the active area. */
.nav-world-links a[aria-current]{position:relative; color:var(--ink); font-weight:600}
.nav-world-links a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:var(--ink)}
body[data-world="a"] .nav-half[data-side="a"] .nav-world-links a[aria-current]::after,
body[data-world-view="a"] .nav-half[data-side="a"] .nav-world-links a[aria-current]::after{background:var(--a-accent)}
.nav-m-group a[aria-current]{font-weight:600}

.nav-m,.nav-seg,.nav-m-menu{display:none}
@media (max-width:1120px) and (min-width:861px){
  .nav-grid{grid-template-columns:minmax(0,1fr) 276px minmax(0,1fr)}
  .nav-half{padding:0 16px}
  .nav-world-links{gap:10px}
  .nav-world-links a{font-size:11px}
  .nav-world-links .nav-cta{display:none}
  .nav-half-cta{display:none}
}
@media (max-width:860px){
  .langbar{height:44px}
  body .langbar .lwrap{max-width:none; min-height:44px; height:44px; padding:0; display:grid; grid-template-columns:minmax(0,1fr) auto}
  .lang-global{display:grid; grid-template-columns:.9fr 1.45fr}
  body .langbar .lang-global a{justify-content:center; padding:0 8px; font-size:9.5px; line-height:1.1; text-align:center; white-space:nowrap}
  body .langbar .lang-global a:first-child{padding-left:8px}
  body .langbar .lang-switch{height:44px; padding:0 12px; border-left:1px solid rgba(255,255,255,.2)}
  body nav.top{top:44px}
  nav.top > .wrap{padding-inline:20px}
  nav.top .nav-grid{display:none}
  .nav-m{display:flex; align-items:center; min-height:64px; gap:16px}
  .nav-m-brand{display:flex; align-items:center; gap:10px; margin-right:auto; color:var(--ink); text-decoration:none}
  .nav-m-brand .brand-logo{height:19px; width:auto}
  .nav-m-brand .brand-sub{color:var(--mute); font-size:9px}
  .nav-m-burger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 auto; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:transparent; cursor:pointer}
  .nav-m-burger span{position:relative; display:block; width:18px; height:2px; background:var(--ink)}
  .nav-m-burger span::before,.nav-m-burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:transform .2s}
  .nav-m-burger span::before{top:-6px}
  .nav-m-burger span::after{top:6px}
  .nav-m-burger[aria-expanded="true"] span{background:transparent}
  .nav-m-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .nav-m-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
  .nav-seg{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line)}
  .nav-seg-btn{display:flex; align-items:center; justify-content:center; gap:9px; min-height:54px; padding:8px 12px; color:var(--ink); text-decoration:none; font-size:13px; text-align:center; background:#fff}
  .nav-seg-btn + .nav-seg-btn{border-left:1px solid var(--line)}
  .nav-seg-btn b{display:inline-grid; place-items:center; width:21px; height:21px; flex:0 0 auto; border:1px solid currentColor; border-radius:50%; font-size:9px}
  body[data-world="a"] .nav-seg-btn[data-side="a"],body[data-world-view="a"] .nav-seg-btn[data-side="a"]{background:var(--a-accent); color:#fff}
  body[data-world="b"] .nav-seg-btn[data-side="b"],body[data-world-view="b"] .nav-seg-btn[data-side="b"]{background:#111; color:#fff}
  .nav-m-menu{display:block; position:absolute; top:100%; left:0; right:0; z-index:49; max-height:0; overflow:hidden; background:#fff; box-shadow:0 16px 30px rgba(0,0,0,.1); transition:max-height .3s ease}
  .nav-m-menu.open{max-height:480px}
  .nav-m-menu .wrap{padding-block:8px 18px}
  .nav-m-group{display:flex; flex-direction:column}
  .nav-m-group a{padding:15px 2px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:17px}
  .nav-m-group .nav-m-cta{font-weight:600; color:var(--a-accent)}
}

/* ===== V13 legacy header on subpages =====
   The homepage keeps the V12 dual-area navigation. Every content subpage uses
   the earlier compact logo/navigation bar from V11. */
body.legacy-subnav .langbar{height:32px}
body.legacy-subnav .langbar .lwrap{max-width:1360px; min-height:32px; height:32px; margin:0 auto; padding:0 40px; display:flex; justify-content:flex-end; align-items:center; gap:8px}
body.legacy-subnav .mobile-primary-link{display:none}
body.legacy-subnav nav.top{top:32px; perspective:none; box-shadow:none}
body.legacy-subnav nav.top::after{display:none}
body.legacy-subnav nav.top > .wrap{max-width:1360px}
body.legacy-subnav .navlinks{display:flex}
body.legacy-subnav .nav-toggle{display:none}
body.legacy-subnav .navlinks{gap:clamp(12px,1.45vw,22px)}
body.legacy-subnav .navlinks a{font-size:clamp(12px,.92vw,14px); white-space:nowrap}
body.legacy-subnav .navlinks .nav-cta.current{background:var(--ink); color:var(--paper)}
body.legacy-subnav[data-world="a"] nav.top,body.legacy-subnav[data-world-view="a"] nav.top{box-shadow:inset 0 2px 0 var(--a-accent)}
body.legacy-subnav[data-world="b"] nav.top,body.legacy-subnav[data-world-view="b"] nav.top{box-shadow:inset 0 2px 0 var(--b-accent)}

@media (max-width:1380px){
  body.legacy-subnav .langbar{height:44px}
  body.legacy-subnav .langbar .lwrap{max-width:none; min-height:44px; height:44px; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto; justify-content:stretch; gap:0}
  body.legacy-subnav .mobile-primary-link{display:flex; align-items:center; justify-content:center; min-width:0; height:44px; padding:0 10px; border-right:1px solid rgba(255,255,255,.18); border-radius:0; color:rgba(255,255,255,.78); font-size:10px; font-weight:400; letter-spacing:.035em; line-height:1.1; text-align:center; white-space:nowrap}
  body.legacy-subnav .mobile-primary-link[aria-current="page"]{color:#fff; font-weight:500}
  body.legacy-subnav .langbar .lang-switch{height:44px; padding:0 14px; gap:6px; justify-content:center}
  body.legacy-subnav nav.top{top:44px}
  body.legacy-subnav nav.top .row{position:relative}
  body.legacy-subnav .nav-toggle{display:inline-flex}
  body.legacy-subnav .navlinks{position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 14px 28px rgba(0,0,0,.07); padding:8px 0; display:none}
  body.legacy-subnav .navlinks.open{display:flex}
  body.legacy-subnav .navlinks.open a:not(.nav-cta){display:block; padding:14px 24px; font-size:16px}
  body.legacy-subnav .navlinks.open a[href^="Unternehmen"],body.legacy-subnav .navlinks.open a[href^="Investoren"]{display:none}
  body.legacy-subnav .navlinks.open .nav-cta{margin:14px 24px; justify-content:center}
}

@media (max-width:390px){
  body.legacy-subnav .langbar .lwrap{grid-template-columns:minmax(0,1fr) minmax(0,1.28fr) auto}
  body.legacy-subnav .mobile-primary-link{padding:0 7px; font-size:9px; letter-spacing:.02em}
  body.legacy-subnav .langbar .lang-switch{padding:0 10px}
}

/* ===== V13.1: dedicated project-model and contact pages ===== */
.model-system{padding-block:var(--section-space); background:#f4f4f2}
.model-system .section-intro{align-items:start}
.model-system-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,28px); counter-reset:model-step}
.model-system-step{min-width:0}
.model-system-step figure{position:relative; margin:0 0 26px; aspect-ratio:1/1; overflow:hidden; background:#fff}
.model-system-step img{width:100%; height:100%; object-fit:contain; display:block; transform:scale(1.01); transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.model-system-step:hover img{transform:scale(1.075)}
.model-system-step figure::after{content:""; position:absolute; left:18px; bottom:18px; width:9px; height:9px; border-radius:50%; background:var(--a-accent); box-shadow:0 0 0 0 rgba(234,49,34,.32)}
.model-system-step:hover figure::after{animation:model-pulse 1.35s ease-out infinite}
.model-system-step .step-number{display:block; margin-bottom:18px; color:var(--a-accent)}
.model-system-step h2{font-size:clamp(1.35rem,1.8vw,1.75rem); line-height:1.08; letter-spacing:-.025em; font-weight:500; margin:0 0 12px}
.model-system-step p{color:var(--mute); line-height:1.52; margin:0; max-width:36ch}
@keyframes model-pulse{0%{box-shadow:0 0 0 0 rgba(234,49,34,.34)}70%{box-shadow:0 0 0 13px rgba(234,49,34,0)}100%{box-shadow:0 0 0 0 rgba(234,49,34,0)}}
.model-promise{padding-block:var(--section-space); background:#050505; color:#fff}
.model-promise-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:clamp(40px,9vw,140px); align-items:end}
.model-promise blockquote{margin:0}
.model-promise blockquote p{font-size:var(--display-md); line-height:1.03; letter-spacing:-.04em; max-width:18ch; margin:0 0 24px}
.model-promise cite{font-style:normal; color:rgba(255,255,255,.55)}
.model-promise-list{display:grid; gap:0; margin:0; padding:0; list-style:none}
.model-promise-list li{padding:18px 0; border-top:1px solid rgba(255,255,255,.2); font-size:clamp(1rem,1.3vw,1.15rem)}

.contact-overview{padding-block:var(--section-space); background:#f4f4f2}
.contact-form-shell{max-width:none; margin:0; padding:0; background:transparent; border:0}
.contact-form-intro{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:20px clamp(48px,8vw,128px); align-items:end; margin-bottom:clamp(42px,5vw,68px); padding-bottom:clamp(32px,4vw,48px); border-bottom:1px solid var(--line-strong)}
.contact-form-intro .mono{color:var(--mute); grid-column:1 / -1}
.contact-form-intro h2{font-size:var(--display-md); line-height:1; letter-spacing:-.04em; font-weight:500; margin:0; max-width:14ch}
.contact-form-intro p{color:var(--ink-2); max-width:42ch; margin:0; line-height:1.55}
.contact-form{display:grid; gap:20px; margin:0}
.contact-context{border:0; padding:0; margin:0 0 8px; min-width:0}
.contact-context legend{display:block; margin-bottom:10px; color:var(--mute); font-size:12px; letter-spacing:.035em; text-transform:uppercase}
.contact-context-toggle{display:grid; grid-template-columns:1fr 1.45fr 1fr; border:1px solid var(--line-strong)}
.contact-context-toggle label{position:relative; display:flex; align-items:center; justify-content:center; min-height:62px; margin:0; padding:13px 18px; border-right:1px solid var(--line-strong); color:var(--ink); cursor:pointer; text-align:center; text-transform:none; letter-spacing:0; font-size:14px; line-height:1.25; transition:background-color .18s,color .18s}
.contact-context-toggle label:last-child{border-right:0}
.contact-context-toggle input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.contact-context-toggle label:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:3px; z-index:1}
.contact-context-toggle label[data-contact-option="a"]:has(input:checked){background:var(--a-accent); color:#fff}
.contact-context-toggle label[data-contact-option="b"]:has(input:checked){background:var(--b-accent); color:#fff}
.contact-context-toggle label[data-contact-option="general"]:has(input:checked){background:#d7d9d9; color:#000}
.contact-context-toggle b{display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; border:1px solid currentColor; border-radius:50%; font-weight:400}
.contact-form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.contact-form label{display:block; margin-bottom:7px; color:var(--mute); font-size:12px; letter-spacing:.035em; text-transform:uppercase}
.contact-form input,.contact-form textarea,.contact-form select{width:100%; border:0; border-bottom:1px solid var(--line-strong); border-radius:0; background:rgba(255,255,255,.62); color:var(--ink); padding:15px 16px; font:inherit; transition:background-color .18s,border-color .18s}
.contact-form .contact-context-toggle label{display:flex; margin:0; color:var(--ink); font-size:14px; letter-spacing:0; text-transform:none}
.contact-form .contact-context-toggle input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0}
.contact-form textarea{min-height:126px; resize:vertical}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:0; border-bottom-color:var(--ink); background:#fff}
.contact-form .hint{font-size:12px; color:var(--mute); margin:-4px 0 0}
.contact-form .hint a,
.home-contact-form .hint a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.form-honeypot{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
.form-status{min-height:1.35em; margin:2px 0 0; font-size:14px; line-height:1.45; font-weight:600}
.form-status:empty{display:none}
.form-status.is-success{color:#176b3a}
.form-status.is-error{color:#a51b14}
.form-status a{color:inherit; text-decoration:underline; text-underline-offset:3px}
[data-direct-mail-form] button[disabled]{cursor:wait; opacity:.68}
.contact-direct{padding-block:var(--section-space-tight)}
.contact-direct-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:clamp(40px,9vw,140px); align-items:start}
.contact-direct h2{font-size:var(--display-md); line-height:1; letter-spacing:-.04em; font-weight:500; margin:8px 0 0; max-width:13ch}
.contact-details{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 42px}
.contact-details h3{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mute); margin:0 0 8px; font-weight:400}
.contact-details p,.contact-details a{color:var(--ink); margin:0; text-decoration:none; line-height:1.55}
.contact-details a:hover{color:var(--a-accent)}
.contact-page .page-hero{padding-block:clamp(24px,2.6vw,38px) clamp(34px,4vw,58px)}
.contact-page .page-hero .crumb{margin-bottom:clamp(14px,1.8vw,22px)}
.contact-page .page-hero .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); column-gap:clamp(48px,8vw,128px); align-items:end}
.contact-page .page-hero .crumb,.contact-page .page-hero .eyebrow{grid-column:1 / -1}
.contact-page .page-hero h1{font-size:clamp(42px,5vw,68px); margin:0; max-width:13ch}
.contact-page .page-hero .lead{margin-bottom:0}
.contact-page .contact-overview{padding-block:clamp(48px,5.5vw,78px)}
.contact-page .contact-form-shell{padding:0}
.contact-page .contact-form-intro{margin-bottom:clamp(38px,4vw,56px)}
body[data-context-world="a"] .contact-form-intro{border-bottom-color:var(--a-accent)}
body[data-context-world="b"] .contact-form-intro{border-bottom-color:var(--b-accent)}
body[data-context-world="a"] .contact-form .cta-primary{background:var(--a-accent)}
body[data-context-world="b"] .contact-form .cta-primary{background:var(--b-accent)}
.faces .img-slot img.portrait-mirrored{transform:scaleX(-1)}

@media (max-width:960px){
  .model-system-grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:56px}
  .model-promise-grid,.contact-direct-grid{grid-template-columns:1fr}
  .contact-page .page-hero .wrap{grid-template-columns:1fr}
  .contact-page .page-hero h1,.contact-page .page-hero .lead{grid-column:1}
  .contact-page .page-hero .lead{margin-top:22px}
}
@media (max-width:720px){
  .model-system-grid,.contact-form-row,.contact-details,.contact-form-intro{grid-template-columns:1fr}
  .model-system-step figure{aspect-ratio:4/3}
  .contact-form-shell{padding:0}
  .contact-context-toggle{grid-template-columns:1fr}
  .contact-context-toggle label{justify-content:flex-start; min-height:56px; border-right:0; border-bottom:1px solid var(--line-strong); text-align:left}
  .contact-context-toggle label:last-child{border-bottom:0}
  .contact-page .page-hero{padding-block:22px 36px}
  .contact-page .contact-overview{padding-block:38px 48px}
  .contact-form-intro{gap:16px; margin-bottom:34px; padding-bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .model-system-step img{transition:none}
  .model-system-step:hover figure::after{animation:none}
}

/* ===== V12 contextual project overview ===== */
.project-context-variant{display:none}
body:not([data-world-view]) .project-context-variant[data-context="neutral"]{display:block}
body[data-world-view="a"] .project-context-variant[data-context="a"]{display:block}
body[data-world-view="b"] .project-context-variant[data-context="b"]{display:block}
body[data-world-view="a"] .project-context-section[data-project-world="b"]{display:none}
body[data-world-view="b"] .project-context-section[data-project-world="a"]{display:none}
body[data-world-view="a"] .page-hero .eyebrow{color:var(--a-accent)}
body[data-world-view="b"] .page-hero .eyebrow{color:var(--ink)}

/* V16c: stable project filter position and a tighter subpage rhythm. */
body.projects-page .page-hero{
  padding-block:clamp(36px,4vw,58px) clamp(28px,3vw,42px);
}
body.projects-page .page-hero .lead{margin-bottom:0}
body.projects-page .project-context-variant{min-height:284px}
body.projects-page .project-filter-bar{padding-bottom:clamp(26px,3vw,40px)}
body.projects-page .quiet-section.project-context-section{
  padding-block:clamp(58px,5vw,76px);
}
@media(max-width:760px){
  body.projects-page .project-context-variant{min-height:0}
  body.projects-page .page-hero{padding-block:32px 30px}
}
@media (max-width:390px){
  body .langbar .lang-global a{font-size:8.5px; letter-spacing:.025em; padding-inline:6px}
  body .langbar .lang-switch{padding-inline:9px}
  .nav-seg-btn{font-size:11.5px; padding-inline:7px}
}

/* ===== V12 graphical footer ===== */
footer{--footer-accent:var(--a-accent);position:relative; padding:74px 0 32px; background:#050505; color:#fff; border:0}
body[data-world="a"] footer,body[data-world-view="a"] footer{--footer-accent:var(--a-accent)}
body[data-world="b"] footer,body[data-world-view="b"] footer{--footer-accent:var(--b-accent)}
footer::before{content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--footer-accent)}
footer .foot-brand{display:flex; align-items:center; justify-content:space-between; min-height:108px; margin:0 0 58px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.2)}
footer .foot-brand:not(.has-back-to-top)::after{content:"↑"; display:grid; place-items:center; width:64px; height:64px; flex:0 0 auto; background:var(--footer-accent); color:#fff; font-size:38px; line-height:1; font-weight:300}
footer .back-to-top{display:grid; place-items:center; width:64px; height:64px; flex:0 0 auto; padding:0; border:0; border-radius:0; background:var(--footer-accent); color:#fff; font:300 38px/1 "Lausanne",sans-serif; cursor:pointer; transition:background-color .2s,transform .2s}
footer .back-to-top span{display:block;margin:0;color:inherit;font-size:inherit;line-height:1}
footer .back-to-top:hover{background:color-mix(in srgb,var(--footer-accent) 86%,#000); transform:translateY(-2px)}
footer .back-to-top:focus-visible{outline:2px solid #fff; outline-offset:4px}
footer .foot-logo{height:45px!important; filter:invert(1)}
footer .foot-brand span{color:rgba(255,255,255,.58)}
footer .foot-grid{grid-template-columns:1.65fr 1fr 1fr 1fr; gap:clamp(32px,5vw,72px)}
footer .foot-col h4,footer .foot-col h5{color:rgba(255,255,255,.48); margin:0 0 20px}
footer .foot-col a{color:#fff; padding:5px 0}
footer .foot-col a:hover{color:var(--footer-accent)}
footer .foot-col p{color:rgba(255,255,255,.76)}
footer .foot-bot{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.46)}
@media (max-width:880px){footer .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  footer .foot-brand{display:grid; grid-template-columns:minmax(0,1fr) 48px; column-gap:16px; align-items:start; min-height:0; margin-bottom:42px}
  footer .foot-brand span{display:block; grid-column:1; margin:10px 0 0}
  footer .back-to-top,footer .foot-brand:not(.has-back-to-top)::after{grid-column:2; grid-row:1 / span 2; width:48px; height:48px}
  footer .back-to-top,footer .foot-brand:not(.has-back-to-top)::after{font-size:31px}
  footer .foot-logo{grid-column:1; max-width:100%; height:auto!important}
  footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 24px}
}
@media (max-width:360px){
  .section-head > div{min-width:0; max-width:100%}
  .section-head h2{max-width:100%; font-size:clamp(34px,11vw,40px); overflow-wrap:anywhere; hyphens:auto}
}

/* V14 final cascade: screenshot-aligned header on every content page. */
body.legacy-subnav .langbar{height:32px}
body.legacy-subnav .langbar .lwrap{max-width:1360px;min-height:32px;height:32px;margin:0 auto;padding:0 40px;display:flex;justify-content:flex-end;align-items:center}
body.legacy-subnav nav.top{top:32px;background:rgba(255,255,255,.94)}
body.legacy-subnav nav.top .row{height:84px}
body.legacy-subnav .brand .brand-logo{height:22px}
body.legacy-subnav .brand-sub{font-size:9px}
body.legacy-subnav .navlinks{gap:clamp(10px,1.25vw,23px)}
body.legacy-subnav .navlinks a{position:relative;font-size:clamp(11px,.88vw,14px)}
body.legacy-subnav .navlinks a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--a-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
body.legacy-subnav .navlinks a:not(.nav-cta):hover::after,body.legacy-subnav .navlinks a.current:not(.nav-cta)::after{transform:scaleX(1)}
body.legacy-subnav .navlinks a.current{color:var(--a-accent);font-weight:500}
body.legacy-subnav .navlinks .nav-cta{padding:12px 18px}
body.legacy-subnav[data-world="a"] nav.top,body.legacy-subnav[data-world-view="a"] nav.top{background:color-mix(in srgb,var(--a-accent) 4.5%,#fff);box-shadow:inset 0 -2px 0 var(--a-accent)}
body.legacy-subnav[data-world="b"] nav.top,body.legacy-subnav[data-world-view="b"] nav.top{background:#f3f3f2;box-shadow:inset 0 -2px 0 var(--ink)}
body.legacy-subnav[data-world="b"] .navlinks a.current,body.legacy-subnav[data-world-view="b"] .navlinks a.current{color:var(--ink)}
body.legacy-subnav[data-world="b"] .navlinks a:not(.nav-cta)::after,body.legacy-subnav[data-world-view="b"] .navlinks a:not(.nav-cta)::after{background:var(--ink)}
@media(max-width:1380px){
  body.legacy-subnav .langbar{height:36px}
  body.legacy-subnav .langbar .lwrap{max-width:none;min-height:36px;height:36px;margin:0;padding:0 14px;display:flex;justify-content:flex-end}
  body.legacy-subnav .langbar .lang-switch{height:36px;padding:0}
  body.legacy-subnav nav.top{top:36px}
  body.legacy-subnav nav.top .row{height:68px}
  body.legacy-subnav .navlinks.open a[href*="#unternehmen"],body.legacy-subnav .navlinks.open a[href*="#company"],body.legacy-subnav .navlinks.open a[href^="Investoren"]{display:block!important}
}

@media(max-width:640px){
  .page-hero .crumb a{display:inline-flex;align-items:center;min-height:32px;padding-right:8px}
}

/* Feedback pass: area identity lives in the header, content remains neutral. */
body.legacy-subnav[data-world="b"] nav.top,
body.legacy-subnav[data-world-view="b"] nav.top{
  background:color-mix(in srgb,var(--b-header-accent) 6%,#fff);
  box-shadow:inset 0 -2px 0 var(--b-header-accent);
}
body.legacy-subnav[data-world="b"] .navlinks a.current,
body.legacy-subnav[data-world-view="b"] .navlinks a.current{color:var(--b-header-accent)}
body.legacy-subnav[data-world="b"] .navlinks a:not(.nav-cta)::after,
body.legacy-subnav[data-world-view="b"] .navlinks a:not(.nav-cta)::after{background:var(--b-header-accent)}

@media(max-width:1380px){
  body.legacy-subnav[data-world="a"] nav.top,
  body.legacy-subnav[data-world-view="a"] nav.top{background:color-mix(in srgb,var(--a-accent) 5%,#fff)}
  body.legacy-subnav[data-world="b"] nav.top,
  body.legacy-subnav[data-world-view="b"] nav.top{background:color-mix(in srgb,var(--b-header-accent) 6%,#fff)}
}

/* Navigation color hierarchy: contextual topics follow the selected area;
   Company and Investors remain global and therefore always use black. */
body.legacy-subnav .navlinks a[href*="#unternehmen"],
body.legacy-subnav .navlinks a[href*="#company"],
body.legacy-subnav .navlinks a[href^="Investoren"]{color:var(--ink)}
body.legacy-subnav .navlinks a[href*="#unternehmen"]::after,
body.legacy-subnav .navlinks a[href*="#company"]::after,
body.legacy-subnav .navlinks a[href^="Investoren"]::after{background:var(--ink)!important}
body.legacy-subnav[data-world="a"] .navlinks a.current:not(.nav-cta),
body.legacy-subnav[data-world-view="a"] .navlinks a.current:not(.nav-cta){color:var(--a-accent)}
body.legacy-subnav[data-world="b"] .navlinks a.current:not(.nav-cta),
body.legacy-subnav[data-world-view="b"] .navlinks a.current:not(.nav-cta){color:var(--b-header-accent)}
body.legacy-subnav .navlinks a.current[href*="#unternehmen"],
body.legacy-subnav .navlinks a.current[href*="#company"],
body.legacy-subnav .navlinks a.current[href^="Investoren"]{color:var(--ink)!important}

/* Context CTAs are full-colour actions. Global/neutral pages keep the
   understated black outline until an area context exists. */
body.legacy-subnav[data-world="a"] .navlinks .nav-cta,
body.legacy-subnav[data-world-view="a"] .navlinks .nav-cta{
  background:var(--a-accent);border-color:var(--a-accent);color:#fff
}
body.legacy-subnav[data-world="b"] .navlinks .nav-cta,
body.legacy-subnav[data-world-view="b"] .navlinks .nav-cta{
  background:var(--b-accent);border-color:var(--b-accent);color:#fff
}
body.legacy-subnav[data-world="a"] .navlinks .nav-cta:hover,
body.legacy-subnav[data-world-view="a"] .navlinks .nav-cta:hover{
  background:color-mix(in srgb,var(--a-accent) 88%,#000);color:#fff
}
body.legacy-subnav[data-world="b"] .navlinks .nav-cta:hover,
body.legacy-subnav[data-world-view="b"] .navlinks .nav-cta:hover{
  background:color-mix(in srgb,var(--b-accent) 88%,#000);color:#fff
}

@media(max-width:1380px){
  body.legacy-subnav .navlinks.open a[href*="#unternehmen"],
  body.legacy-subnav .navlinks.open a[href*="#company"],
  body.legacy-subnav .navlinks.open a[href^="Investoren"]{display:block!important}
  body.legacy-subnav .navlinks a.current:not(.nav-cta){text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:7px}
}
/* V16b: the header remains visually stable while same-origin pages change. */
@view-transition{navigation:auto}
body.legacy-subnav .langbar{view-transition-name:bartosek-utility}
body.legacy-subnav nav.top{view-transition-name:bartosek-header}
::view-transition-old(root){animation:v16b-page-out .14s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:v16b-page-in .32s cubic-bezier(.18,.72,.24,1) both}
::view-transition-old(bartosek-header),::view-transition-new(bartosek-header),
::view-transition-old(bartosek-utility),::view-transition-new(bartosek-utility){animation:none}
@keyframes v16b-page-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes v16b-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Company and Investors are global destinations. Their navigation state is
   neutral black even while the A/B context remains visible beside them. */
body.legacy-subnav .navlinks a[href*="ansicht=unternehmen"],
body.legacy-subnav .navlinks a[href*="ansicht=company"]{color:var(--ink)!important}
body.legacy-subnav .navlinks a[href*="ansicht=unternehmen"]::after,
body.legacy-subnav .navlinks a[href*="ansicht=company"]::after{background:var(--ink)!important}