@font-face{font-family:'Big Shoulders Display';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/big-shoulders-display-700.woff2) format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/big-shoulders-display-800.woff2) format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-weight:900;font-style:normal;font-display:swap;src:url(../fonts/big-shoulders-display-900.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/ibm-plex-sans-400i.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-500.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-600.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-700.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-600.woff2) format('woff2');}

/* ============ DESIGN TOKENS ============ */
:root{
  --paper:#EEF1F2;
  --paper-raised:#FFFFFF;
  --sunken:#E3E9EB;
  --ink:#101E2A;
  --ink-soft:#3E5B6E;
  --ink-faint:#6B8494;
  --line:#C7D1D4;
  --line-strong:#9BB0B6;
  --accent:#00739E;
  --accent-hi:#028FC2;
  --accent-brand:#009BD9;
  --accent-ink:#FFFFFF;
  --signal:#2E7D4F;
  --shadow:rgba(16,30,42,.14);
  --font-display:'Big Shoulders Display',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --pcb-photo:url("../img/platine.jpg");
  --pcb-filter:none;
  --cd-line:var(--accent-brand);
  --map-dot:#4A545B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A141C;
    --paper-raised:#10202B;
    --sunken:#0D1A23;
    --ink:#E8EDEE;
    --ink-soft:#9FB7C4;
    --ink-faint:#5E7684;
    --line:#223441;
    --line-strong:#37505E;
    --accent:#3FB6E8;
    --accent-hi:#68C7ED;
    --accent-brand:#009BD9;
    --accent-ink:#0A1D26;
    --signal:#54BE85;
    --shadow:rgba(0,0,0,.55);
    --pcb-filter:brightness(.72) saturate(.9);
    --map-dot:#A3ADB3;
  }
}
:root[data-theme="dark"]{
  --paper:#0A141C;
  --paper-raised:#10202B;
  --sunken:#0D1A23;
  --ink:#E8EDEE;
  --ink-soft:#9FB7C4;
  --ink-faint:#5E7684;
  --line:#223441;
  --line-strong:#37505E;
  --accent:#3FB6E8;
  --accent-hi:#68C7ED;
  --accent-brand:#009BD9;
  --accent-ink:#0A1D26;
  --signal:#54BE85;
  --shadow:rgba(0,0,0,.55);
  --pcb-filter:brightness(.72) saturate(.9);
  --map-dot:#A3ADB3;
}

/* ============ RESET / BASE ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;line-height:.98;margin:0;text-wrap:balance;}
p{margin:0 0 1em;max-width:38em;}
button{font-family:inherit;cursor:pointer;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

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

/* ============ TYPE UTILITIES ============ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.55em;
  margin:0 0 1em;
}
.eyebrow::before{content:"";width:.62em;height:.62em;background:var(--cd-line);border-radius:50%;flex:none;}
.mono{font-family:var(--font-mono);}
.lede{font-size:1.08rem;color:var(--ink-soft);max-width:36em;}

/* ============ DRAFT STAMP ============ */
.draft-stamp{
  position:absolute;
  z-index:15;
  right:clamp(16px,3vw,40px);
  top:clamp(16px,3vw,32px);
  border:1.5px dashed var(--line-strong);
  color:var(--ink-faint);
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.5em .75em;
  transform:rotate(-3deg);
  border-radius:3px;
  line-height:1.35;
  pointer-events:none;
  text-align:center;
  display:none;
}
@media (min-width:640px){ .draft-stamp{display:block;} }

/* ============ RULER RAIL (wayfinding) ============ */
.rail{
  position:fixed;
  top:0;bottom:0;left:0;
  width:34px;
  z-index:40;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
  background:linear-gradient(to right, var(--paper), transparent);
}
@media (min-width:1100px){ .rail{display:flex;} }
.rail ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:26px;
}
.rail li{
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.12em;
  color:var(--ink-faint);
  transition:color .2s;
  padding-left:2px;
}
.rail li.active{color:var(--accent);border-left:2px solid var(--accent);padding-left:0;}

/* ============ HEADER / NAV ============ */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  height:104px;
}
.wordmark{position:relative;display:flex;align-items:center;padding-left:20px;}
.wordmark .brandmark{height:82px;width:auto;overflow:visible;}
.wordmark .brandmark path{fill:var(--ink);}
.wordmark .brandmark path.accent{fill:var(--accent-brand);}
/* corporate corner mark, as on letterhead and business card: blue dot at the end of the
   wordmark, thin line to the right, vertical hook down to the base line */
/* larger variant for document-style sections (Impressum/Datenschutz), top-right like the real letterhead */
nav.primary{display:none;gap:2.2rem;font-size:1.06rem;}
nav.primary a{position:relative;color:var(--ink);font-weight:600;letter-spacing:.005em;padding:.3em 0;}
nav.primary a:hover{color:var(--accent);}
nav.primary a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .25s;}
nav.primary a:hover::after{width:100%;}
@media (min-width:1140px){ nav.primary{display:flex;} }
.nav-actions{display:flex;align-items:center;gap:.7rem;}
.lang-toggle{
  display:flex;border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
}
.lang-toggle button{
  background:none;border:none;padding:.4em .85em;color:var(--ink-faint);
}
.lang-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
:root[data-theme="dark"] .lang-toggle button[aria-pressed="true"], body.is-dark .lang-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);}
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.75em 1.3em;border-radius:2px;border:1px solid transparent;background:none;
  -webkit-appearance:none;appearance:none;
  transition:transform .15s, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-hi);}
.btn-outline{border-color:var(--line-strong);color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.burger{display:flex;width:38px;height:38px;flex:none;border:1px solid var(--line-strong);border-radius:2px;align-items:center;justify-content:center;background:none;}
@media (min-width:1140px){ .burger{display:none;} }
@media (max-width:560px){
  .nav-actions{gap:.5rem;}
  .nav-actions .btn-primary{display:none;}
  .lang-toggle{font-size:.66rem;}
  .lang-toggle button{padding:.35em .6em;}
  .wordmark .brandmark{height:54px;}
  .nav-row{height:84px;}
  .wordmark{padding-left:16px;}
}
@media (max-width:340px){
  .lang-toggle{display:none;}
}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);}
.burger span::before{top:-5px;} .burger span::after{top:5px;}

.mobile-menu{
  display:none;flex-direction:column;gap:0;border-top:1px solid var(--line);
  background:var(--paper);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:1em clamp(20px,4vw,48px);border-bottom:1px solid var(--line);font-size:1rem;}
@media (min-width:1140px){ .mobile-menu{display:none !important;} }

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(64px,11vw,120px) 0 clamp(48px,8vw,88px);overflow:hidden;}
.hero-grid{position:relative;z-index:1;display:grid;gap:48px;align-items:center;}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.05fr .95fr;} }
.hero h1{font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:800;margin-bottom:.4em;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem;}
.hero-fig{position:relative;}
.hero-fig svg{width:100%;height:auto;}
.diagram-line{stroke:var(--line-strong);stroke-width:1.4;fill:none;}
.diagram-node{fill:var(--paper-raised);stroke:var(--ink-soft);stroke-width:1.4;}
.diagram-node.live{stroke:var(--accent);}
.diagram-node.on{fill:var(--signal);stroke:var(--signal);}
.diagram-label{font-family:var(--font-mono);font-size:9px;fill:var(--ink-faint);letter-spacing:.04em;}
.draw{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.4s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.pop{opacity:0;transform:scale(.6);animation:pop .5s ease forwards;}
@keyframes pop{to{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){ .draw,.pop{animation:none;stroke-dashoffset:0;opacity:1;transform:none;} }

/* ============ STATS ============ */
.stats{border-bottom:1px solid var(--line);background:var(--sunken);}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:2.2rem clamp(16px,3vw,32px);border-left:1px solid var(--line);display:flex;flex-direction:column;}
.stat:first-child{border-left:none;}
/* fixed-height value row so numerals and the name/role pair share one baseline */
.stat-value{display:flex;align-items:flex-end;min-height:clamp(2.6rem,4.6vw,3.4rem);margin-bottom:.4rem;}
.stat-value b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);font-variant-numeric:tabular-nums;line-height:1;color:var(--ink);}
.stat-value b.stat-name{font-family:var(--font-mono);font-weight:600;font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:.01em;line-height:1.25;}
.stat span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
@media (max-width:760px){
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .stat{border-left:1px solid var(--line);border-top:1px solid var(--line);}
  .stat:nth-child(odd){border-left:none;}
  .stat:nth-child(-n+2){border-top:none;}
}
@media (max-width:420px){
  .stats-row{grid-template-columns:1fr;}
  .stat{border-left:none !important;}
  .stat:nth-child(-n+2){border-top:1px solid var(--line);}
  .stat:first-child{border-top:none;}
}

/* ============ SECTIONS ============ */
section.sheet{padding:clamp(56px,9vw,108px) 0;border-bottom:1px solid var(--line);}
.sheet-head{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-end;margin-bottom:2.6rem;}
.sheet-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} }

/* Unternehmen */
.about-grid{display:grid;gap:40px;}
@media (min-width:900px){ .about-grid{grid-template-columns:1.3fr .7fr;} }
.about-grid p{font-size:1.02rem;}
.plate{
  border:1px solid var(--line);background:var(--paper-raised);border-radius:2px;padding:1.6rem;
  box-shadow:0 1px 0 var(--line);
}
.plate dl{display:grid;grid-template-columns:auto 1fr;gap:.5em 1em;margin:0;font-size:.88rem;}
.plate dt{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.04em;}
.plate dd{margin:0;color:var(--ink);}

/* card grids: anwendungen / leistungen */
.grid-cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:640px){ .grid-cards.cols-2{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid-cards.cols-4{grid-template-columns:repeat(4,1fr);} .grid-cards.cols-2{grid-template-columns:repeat(2,1fr);} }
.card{background:var(--paper-raised);padding:1.8rem 1.6rem;position:relative;}
.card::before,.card::after{content:"";position:absolute;width:7px;height:7px;border:1.4px solid var(--line-strong);}
.card::before{top:8px;left:8px;border-right:none;border-bottom:none;}
.card::after{bottom:8px;right:8px;border-left:none;border-top:none;}
.card .tag{font-family:var(--font-mono);font-size:.68rem;color:var(--accent);letter-spacing:.08em;margin-bottom:.7em;display:block;}
.card h3{font-size:1.05rem;text-transform:none;font-family:var(--font-body);font-weight:700;margin-bottom:.5em;letter-spacing:0;}
.card p{font-size:.92rem;color:var(--ink-soft);margin-bottom:0;}
.grid-cards.cols-5{grid-template-columns:1fr;}
@media (min-width:640px){ .grid-cards.cols-5{grid-template-columns:repeat(2,1fr);} .grid-cards.cols-5 .card:last-child{grid-column:1/-1;} }
@media (min-width:1100px){ .grid-cards.cols-5{grid-template-columns:repeat(5,1fr);} .grid-cards.cols-5 .card:last-child{grid-column:auto;} }

/* Referenzen */
.worldmap-wrap{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--paper-raised);border-radius:2px;padding:clamp(16px,3vw,28px);margin-bottom:2.2rem;}
.worldmap-wrap::after{content:"";position:absolute;right:0;bottom:0;width:clamp(95px,12.5%,150px);height:clamp(30px,6vw,44px);background-image:var(--pcb-photo);background-size:cover;background-position:70% 45%;filter:var(--pcb-filter);}
.worldmap{width:100%;height:auto;overflow:visible;}
.worldmap .landmass path{fill:var(--line);stroke:var(--line-strong);stroke-width:.6;}
.worldmap .grid-line{stroke:var(--line);stroke-width:.6;opacity:.7;}
.worldmap .frame{fill:none;stroke:var(--line-strong);stroke-width:1;}
.worldmap .route{stroke:var(--accent);stroke-width:.7;fill:none;opacity:.45;}
.worldmap .dot{fill:var(--map-dot);stroke:var(--paper-raised);stroke-width:.8;}
.worldmap .hq-ring{fill:none;stroke:var(--accent-brand);stroke-width:1.2;opacity:.6;}
.worldmap .hq-dot{fill:var(--accent-brand);stroke:var(--paper-raised);stroke-width:1.2;}
.worldmap .pin-label{font-family:var(--font-mono);font-size:9px;fill:var(--ink-faint);letter-spacing:.02em;}
.worldmap .hq-label{font-family:var(--font-mono);font-size:9.5px;font-weight:600;fill:var(--accent-brand);letter-spacing:.03em;}
.worldmap-foot{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:baseline;justify-content:space-between;margin-top:1rem;padding-top:1rem;padding-right:clamp(105px,13.5%,165px);min-height:calc(clamp(30px,6vw,44px) + 1.2rem);border-top:1px solid var(--line);}
.worldmap-caption{font-size:.82rem;color:var(--ink-faint);margin:0;max-width:34em;}
.worldmap-legend{display:flex;gap:1.4rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap;}
.worldmap-legend span{display:inline-flex;align-items:center;gap:.5em;}
.worldmap-legend i{width:8px;height:8px;border-radius:50%;background:var(--map-dot);display:inline-block;}
.worldmap-legend i.hq{background:var(--accent-brand);width:10px;height:10px;box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-brand) 30%, transparent);}
.logo-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
@media (min-width:560px){ .logo-wall{grid-template-columns:repeat(3,1fr);} }
@media (min-width:820px){ .logo-wall{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1080px){ .logo-wall{grid-template-columns:repeat(5,1fr);} }
.logo-tile{
  background:var(--paper-raised);min-height:88px;padding:1rem 1.2rem;box-shadow:inset -1px -1px 0 var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.logo-tile img{
  max-width:100%;max-height:48px;width:auto;height:auto;
  filter:grayscale(1) opacity(.72);
  transition:filter .2s;
}
.logo-tile img.logo-lg{max-height:66px;}
.logo-tile img.logo-xl{max-height:88px;}
.logo-tile img.logo-xxl{max-height:108px;}
.logo-tile img.logo-xxxl{max-height:130px;}
.logo-tile:hover img{filter:grayscale(0) opacity(1);}
.case-grid{display:grid;gap:24px;margin-top:2.4rem;}
@media (min-width:860px){ .case-grid{grid-template-columns:repeat(2,1fr);} }
.case{border:1px solid var(--line);background:var(--paper-raised);padding:1.9rem;border-radius:2px;}
.case .tag{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);letter-spacing:.08em;display:block;margin-bottom:.9em;}
.case h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:1.15rem;letter-spacing:0;margin-bottom:.7em;}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:.35em 1em;font-size:.9rem;margin:1em 0 0;}
.case dt{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);letter-spacing:.05em;padding-top:.15em;}
.case dd{margin:0;color:var(--ink-soft);}
/* ============ CASE-STUDY PHOTO SLIDESHOW ============ */
.case-slideshow{position:relative;margin:0 0 1.5rem;border:1px solid var(--line);background:#0A1620;}
.cs-viewport{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;}
.cs-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.65,0,.35,1);}
.cs-slide{flex:0 0 100%;height:100%;position:relative;margin:0;}
.cs-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7em 2.6em .6em .9em;background:linear-gradient(to top, rgba(10,22,32,.92) 0%, rgba(10,22,32,.55) 60%, transparent 100%);color:#F2F5F6;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em;line-height:1.4;}
.cs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid var(--accent-brand);background:rgba(10,22,32,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s;}
.cs-arrow:hover{background:var(--accent-brand);}
.cs-prev{left:8px;} .cs-next{right:8px;}
.cs-meta{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.5em .8em;font-family:var(--font-mono);font-size:.66rem;color:var(--ink-faint);letter-spacing:.06em;border-top:1px solid var(--line);background:var(--paper-raised);}
.cs-dots{display:flex;gap:6px;}
.cs-dots button{width:6px;height:6px;padding:0;border-radius:0;border:none;background:var(--line-strong);cursor:pointer;-webkit-appearance:none;appearance:none;transition:width .2s,background .2s;}
.cs-dots button.active{width:14px;background:var(--accent-brand);}
.placeholder-note{margin-top:2rem;font-size:.85rem;color:var(--ink-faint);border-left:2px solid var(--line-strong);padding-left:1em;}
.ref-directory{margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line);}
.ref-directory-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:1.6rem;}
.ref-directory-head .eyebrow{margin-bottom:0;}
#referenzen .eyebrow,.hero .eyebrow{font-size:.84rem;font-weight:600;letter-spacing:.13em;}
.ref-directory-source{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);}
.ref-countries{column-width:250px;column-gap:2.4rem;}
.ref-country{break-inside:avoid-column;margin:0 0 1.3rem;}
.ref-country-name{display:block;font-family:var(--font-mono);font-weight:600;font-size:.9rem;letter-spacing:.03em;color:var(--ink);margin-bottom:.3em;}
.ref-country-name::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:.55em;vertical-align:middle;}
.ref-country-list{font-size:.84rem;line-height:1.55;color:var(--ink-soft);}

/* Kontakt */
.contact-grid{display:grid;gap:40px;}
@media (min-width:960px){ .contact-grid{grid-template-columns:1fr .85fr;} }
.field{display:flex;flex-direction:column;gap:.4em;margin-bottom:1.1rem;}
.field label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.field input,.field textarea{
  font-family:var(--font-body);font-size:.98rem;padding:.7em .8em;border:1px solid var(--line-strong);
  background:var(--paper-raised);color:var(--ink);border-radius:2px;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.check{display:flex;gap:.6em;align-items:flex-start;font-size:.85rem;color:var(--ink-soft);margin:1.2rem 0;}
.check input{margin-top:.25em;}
.form-note{font-size:.8rem;color:var(--ink-faint);margin-top:.6rem;}
.success{border:1px solid var(--accent-brand);background:var(--paper-raised);padding:1.6rem;border-radius:2px;display:none;}
.success.show{display:block;}
.mail-text{display:block;width:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:.8rem;line-height:1.5;padding:.8rem;border:1px solid var(--line-strong);background:var(--sunken);color:var(--ink);border-radius:2px;resize:vertical;margin:0 0 .8rem;}
.mail-actions{display:flex;flex-wrap:wrap;gap:.6rem;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.btn[disabled]{opacity:.6;cursor:progress;}
.success h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:1.1rem;color:var(--accent);margin-bottom:.4em;}
.contact-card{border:1px solid var(--line);background:var(--paper-raised);padding:1.8rem;border-radius:2px;}
.contact-card h3{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1em;font-weight:500;}
.contact-card address{font-style:normal;font-size:.98rem;line-height:1.7;margin-bottom:1.4rem;}
.contact-card a.link{color:var(--accent);border-bottom:1px solid transparent;}
.contact-card a.link:hover{border-color:var(--accent);}
.location-card{margin-top:1.6rem;border:1px solid var(--line-strong);border-radius:2px;padding:1.3rem;text-align:center;}
.location-card svg{width:100%;max-width:180px;margin:0 auto .6em;}
.location-card .coords{font-size:.92rem;letter-spacing:.03em;color:var(--ink);margin-bottom:.5em;}
.location-card p{font-size:.8rem;color:var(--ink-faint);margin-bottom:1em;}
.location-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}

/* ============ LEGAL PAGES (Impressum / Datenschutz) ============ */
.legal-page{position:relative;padding:clamp(48px,8vw,88px) 0;border-bottom:1px solid var(--line);background:var(--sunken);}
.legal-page{display:none;}
.legal-page.on{display:block;min-height:60vh;}
body.show-legal main > section:not(.legal-page){display:none;}
body.show-legal .rail{display:none !important;}
.legal-back{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2rem;}
.legal-back:hover{color:var(--accent);}
.legal-page h2{font-size:clamp(1.6rem,3.2vw,2.2rem);}
.legal-page .sheet-head{margin-top:1.4rem;margin-bottom:2rem;}
.legal-page .lede{margin-bottom:2rem;}
.legal-page .lg-en{display:none;}
html[lang="en"] .legal-page .lg-de{display:none;}
html[lang="en"] .legal-page .lg-en{display:block;}
.legal-body{max-width:42em;}
.legal-body h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:1.05rem;letter-spacing:0;color:var(--ink);margin:1.8em 0 .6em;}
.legal-body h3:first-child{margin-top:0;}
.legal-body p{font-size:.94rem;line-height:1.65;color:var(--ink-soft);}
.legal-body ul{margin:0 0 1em;padding-left:1.2em;font-size:.94rem;line-height:1.65;color:var(--ink-soft);}
.legal-body li{margin-bottom:.3em;}
.legal-body strong{color:var(--ink);}
.legal-plate{background:var(--paper-raised);border:1px solid var(--line);border-radius:2px;padding:1.4rem 1.6rem;margin:1.4rem 0;}
.legal-plate dl{display:grid;grid-template-columns:auto 1fr;gap:.45em 1em;margin:0;font-size:.88rem;}
.legal-plate dt{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.04em;}
.legal-plate dd{margin:0;color:var(--ink);}
.legal-note{font-size:.82rem;color:var(--ink-faint);border-left:2px solid var(--line-strong);padding-left:1em;margin-top:2rem;}

/* ============ FOOTER ============ */
/* real PCB macro photo, colour-matched to the site accent via mix-blend-mode:color */
.pcb-band{position:relative;height:clamp(33px,5vw,53px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0A1620;}
.pcb-band .photo{position:absolute;inset:0;background-image:var(--pcb-photo);background-size:cover;background-position:center 42%;filter:var(--pcb-filter);}
.pcb-band .tint{display:none;}
.pcb-band .fade{position:absolute;inset:0;background:linear-gradient(to bottom, var(--paper) 0%, transparent 20%, transparent 80%, var(--paper) 100%);}
.pcb-band .credit{position:absolute;right:14px;bottom:8px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.03em;color:rgba(255,255,255,.5);}
footer.site{padding:clamp(40px,7vw,64px) 0 40px;}
.footer-grid{display:grid;gap:2rem;margin-bottom:2.4rem;}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr;} }
.footer-grid h4{font-family:var(--font-mono);font-size:1rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:0 0 1em;font-weight:600;}
.footer-grid address,.footer-grid ul{font-size:.9rem;color:var(--ink-soft);font-style:normal;line-height:1.8;list-style:none;margin:0;padding:0;}
.footer-grid ul li a:hover{color:var(--accent);}
.footer-bottom{position:relative;padding-top:1.7rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.78rem;color:var(--ink-faint);font-family:var(--font-mono);}

/* ============ CORPORATE DESIGN: LINE FRAME + PCB STRIP ============
   After letterhead and business card: every line is exactly 1px, dots are 9px,
   horizontal and vertical lines cross and overshoot at the corners. */
:root{--cd-o:10px;}

/* generic line pieces */
.cd-rule,.cd-tail{position:relative;align-self:stretch;min-width:0;}
.cd-rule::before,.cd-tail::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--cd-line);}
.cd-rule::after{content:"";position:absolute;left:-4px;top:50%;margin-top:-4px;width:9px;height:9px;border-radius:50%;background:var(--cd-line);}
.cd-tail::after{content:"";position:absolute;right:var(--cd-o);top:calc(50% - 9px);bottom:calc(-1 * var(--cd-pad,1rem) - 9px);border-left:1px solid var(--cd-line);}
.cd-base{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;}
.cd-base::before{content:"";position:absolute;left:0;bottom:0;width:30%;border-top:1px dashed var(--cd-line);}
.cd-base::after{content:"";position:absolute;right:0;bottom:0;width:70%;border-top:1px solid var(--cd-line);}
.cd-base b{position:absolute;left:-4px;bottom:-4px;width:9px;height:9px;border-radius:50%;background:var(--cd-line);}

/* section heads: heading, dot, line with sheet label, vertical crossing the lines, dashed base */
.sheet-head.cd-on{display:grid;grid-template-columns:auto minmax(18px,1fr) var(--cd-o);align-items:center;gap:0;position:relative;--cd-pad:1.05rem;padding:0 0 var(--cd-pad);margin-bottom:2.8rem;}
.sheet-head.cd-on h2{margin-right:.8rem;}
@media (max-width:560px){
  .sheet-head.cd-on{--cd-o:6px;}
  .sheet-head.cd-on h2{margin-right:.6rem;}
}

/* start page: lower half of the letterhead frame */
.hero{--gx:max(clamp(20px,4vw,48px),calc((100% - 1180px) / 2 + clamp(20px,4vw,48px)));z-index:2;overflow:visible;}
.cd-frame{position:absolute;left:var(--gx);right:var(--gx);top:0;bottom:0;pointer-events:none;}
.cd-frame i{position:absolute;display:block;}
.cd-frame .f-dot{left:-4px;bottom:-4px;width:9px;height:9px;border-radius:50%;background:var(--cd-line);}
.cd-frame .f-dash{left:0;bottom:0;width:28%;border-top:1px dashed var(--cd-line);}
.cd-frame .f-line{left:28%;right:calc(-1 * var(--cd-o));bottom:0;border-top:1px solid var(--cd-line);}
.cd-frame .f-vert{right:0;top:calc(var(--eb-y,18%) - 9px);bottom:-9px;border-left:1px solid var(--cd-line);}
.hero-grid{grid-template-columns:1fr !important;}
.hero-grid .lede{max-width:34em;}
/* start page: the eyebrow carries the top line of the frame (dot, label, line to the right edge, overshooting the vertical) */
.hero .eyebrow{max-width:none;gap:.9em;margin-bottom:1.2em;}
.hero .eyebrow::before{display:none;}
.hero .eyebrow::after{content:"";flex:1 1 24px;min-width:24px;height:9px;align-self:center;margin-right:calc(-1 * var(--cd-o));background:radial-gradient(circle 4.5px at 4.5px 50%,var(--cd-line) 98%,transparent 100%) no-repeat,linear-gradient(var(--cd-line),var(--cd-line)) 0 50%/100% 1px no-repeat;}
@media (min-width:900px){ .hero .eyebrow > span,.hero p.eyebrow{white-space:nowrap;} }

/* stats bar: blue dots where the dividers meet the base line */
.stat{position:relative;}
.stat:not(:first-child)::before{content:"";position:absolute;left:-4px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--cd-line);}
@media (max-width:760px){ .stat::before{display:none;} }

/* PCB texture as an edge strip, like the strip on the business card */
.case{position:relative;overflow:hidden;}
.case::before,.contact-card::before{content:"";position:absolute;background-image:var(--pcb-photo);background-size:cover;filter:var(--pcb-filter);}
.case::before{right:0;bottom:0;width:clamp(30px,8.5%,44px);height:min(150px,40%);background-position:72% 62%;}
.case dl{margin-right:clamp(30px,4vw,40px);}
.case--wide{grid-column:1/-1;}
@media (min-width:860px){
  .case--wide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:2.2rem;align-items:start;}
  .case--wide .tag,.case--wide h3{grid-column:1/-1;}
  .case--wide .case-slideshow{margin-bottom:0;}
  .case--wide dl{margin:0 clamp(30px,4vw,40px) 0 0;}
}
.contact-card::before{right:0;bottom:0;width:clamp(30px,8.5%,44px);height:min(150px,40%);background-position:72% 62%;}
.case .tag::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--cd-line);margin-right:.65em;vertical-align:.04em;}

/* contact: business card layout */
.contact-card{position:relative;overflow:hidden;}
.contact-card .location-card{margin-right:clamp(30px,4vw,40px);}
.contact-card h3{font-family:var(--font-body);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700;margin-bottom:.5em;}
@media (max-width:420px){ .cd-person span{white-space:normal;} }

/* footer: dot, dashed then solid line before the legal line */
.footer-bottom{position:relative;}
.cd-hline{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;}
.cd-hline i{position:absolute;display:block;}
.cd-hline .d{left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--cd-line);}
.cd-hline .a{left:0;top:0;width:30%;border-top:1px dashed var(--cd-line);}
.cd-hline .b{right:0;top:0;width:70%;border-top:1px solid var(--cd-line);}