/* Schriften lokal gehostet (OFL), keine Anfragen an Google */
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oxanium"; src: url("../fonts/oxanium-latin.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Swiss Solution Group: Designsystem
   CI Rot-Schwarz, Apple-nahe Typografie, rote Quadrate aus dem Logo als Signatur */

:root {
  --red: #f40000;        /* Logo-Rot, nur für Marken-Elemente */
  --red-ui: #d40000;     /* Buttons und Links, Kontrast auf Weiss 5.1:1 */
  --red-ui-hover: #b00000;
  --ink: #242424;        /* Anthrazit */
  --ink-soft: #424245;
  --steel: #6e6e73;
  --mist: #f5f5f7;
  --line: #e3e3e6;
  --paper: #ffffff;
  --night: #121212;
  --ok: #1a7f45;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-tech: "Oxanium", var(--font);

  --r-tile: 28px;
  --r-media: 22px;
  --r-chip: 8px;
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 11vw, 150px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: var(--red-ui); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--red-ui); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 16px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: inherit; }
.display {
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.h2 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.display, .h2, .h3 { overflow-wrap: break-word; }
.lead {
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  max-width: 40ch;
}
.muted { color: var(--steel); }
p { margin: 0; }
p + p { margin-top: 1em; }

/* Signatur: das rote Quadrat aus dem Logo als Schlusspunkt */
.sq {
  display: inline-block;
  width: .17em; height: .17em;
  margin-left: .07em;
  background: var(--red);
  vertical-align: baseline;
}
.on-dark .sq { background: var(--red); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 980px;
  font: 600 17px/1 var(--font);
  letter-spacing: -0.01em;
  border: 0; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red-ui); color: #fff; }
.btn-primary:hover { background: var(--red-ui-hover); }
.btn-quiet { background: transparent; color: var(--red-ui); padding-inline: 8px; }
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--mist); }
.btn-ghost-dark { background: rgba(255,255,255,.12); color: #fff; }
.btn-ghost-dark:hover { background: rgba(255,255,255,.2); }
.chev::after { content: ""; display: inline-block; width: .42em; height: .42em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-left: .15em; }
.link-more { font-weight: 600; display: inline-flex; align-items: center; gap: .2em; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav-logo img { height: 30px; width: auto; }
.nav-menu { margin: 0 auto 0 12px; }
.nav-links { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.nav-links a { color: var(--ink); font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--red-ui); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--red-ui); }
.nav-side { display: flex; align-items: center; gap: 18px; }
/* Sprachwahl: DE / EN / FR. Die aktive Sprache steht fett und in Tintenfarbe (aria-current) */
.nav-side .lang { display: inline-flex; align-items: center; gap: 2px; }
.nav-side .lang a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 8px; color: var(--steel); font-size: 13px; font-weight: 500; letter-spacing: .03em; transition: color .2s, background-color .2s; }
.nav-side .lang a:hover { color: var(--ink); background: var(--mist); text-decoration: none; }
.nav-side .lang a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.nav-lang-m { display: none; }
.nav-side .portal { font-size: 14px; color: var(--ink); font-weight: 500; }
.nav .btn { min-height: 36px; padding: 8px 16px; font-size: 14px; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; margin-right: -10px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 5px auto; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Das Menü klappt unter 1200 px ein: so bleibt die Navigation auch mit den längeren französischen Bezeichnungen einzeilig */
@media (max-width: 1200px) {
  .nav-links, .nav-side .portal, .nav-side .lang { display: none; }
  .nav-toggle { display: block; }
  .nav-inner { justify-content: space-between; gap: 12px; }
  .nav-menu { margin: 0; }
  .nav:not(.is-open) .nav-menu { display: none; }
  .nav-side { margin-left: auto; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 64px; left: 0; right: 0;
    margin: 0; padding: 8px var(--gutter) 24px;
    background: #fff; border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open .nav-links a { display: block; padding: 14px 0; font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--line); }
  /* Sprachwahl im geöffneten Menü: drei Pillen, die aktive ist gefüllt */
  .nav.is-open .nav-links .nav-lang-m { display: flex; gap: 8px; padding: 20px 0 4px; }
  .nav.is-open .nav-links .nav-lang-m a { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--steel); }
  .nav.is-open .nav-links .nav-lang-m a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
}
@media (max-width: 420px) { .nav .btn { display: none; } }

/* ---------- Sektionen ---------- */
section { position: relative; }
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { text-align: center; justify-items: center; }
.section-head .lead { max-width: 46ch; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 8vw, 104px); text-align: center; }
.hero .display { max-width: 12ch; margin-inline: auto; }
.hero .lead { margin: 24px auto 0; max-width: 44ch; }
.hero-cta { display: flex; justify-content: center; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 36px; }
.hero-stage { margin-top: clamp(48px, 6vw, 80px); }
.hero-media {
  --inset: 1; /* 1 = gerahmt, 0 = randlos (per Scroll gesetzt) */
  position: relative;
  width: calc(100% - var(--inset) * 2 * var(--gutter));
  max-width: calc(var(--max) + (1 - var(--inset)) * 100vw);
  margin-inline: auto;
  aspect-ratio: 16 / 8.2;
  border-radius: calc(var(--inset) * var(--r-tile));
  overflow: hidden;
  background: #2b2b2b;
}
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-caption {
  position: absolute; left: 24px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px;
  background: rgba(18,18,18,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; border-radius: 980px; font-size: 14px; font-weight: 500;
}
.hero-caption .sq { width: 8px; height: 8px; margin: 0; }
@media (max-width: 700px) { .hero-media { aspect-ratio: 4 / 5; } .hero-caption { left: 14px; bottom: 14px; font-size: 13px; } }

/* Vertrauensleiste */
.trust { padding-block: 36px 0; }
.trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust li a, .trust li span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 980px;
  background: var(--mist); color: var(--ink);
  font-size: 14px; font-weight: 500;
}
.trust li a:hover { background: #ebebef; text-decoration: none; }
.trust .tick { width: 16px; height: 16px; flex: none; }

/* ---------- Bento Leistungen ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 520px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--mist);
  border-radius: var(--r-tile);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}
.tile:hover { text-decoration: none; }
.tile h3 { max-width: 16ch; }
.tile p { margin-top: 12px; max-width: 36ch; color: var(--ink-soft); }
.tile .link-more { margin-top: 18px; color: var(--red-ui); }
.tile-media { margin: auto calc(-1 * clamp(28px, 3vw, 44px)) calc(-1 * clamp(28px, 3vw, 44px)); padding-top: 28px; }
.tile-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s var(--ease); }
.tile:hover .tile-media img { transform: scale(1.035); }
.tile.dark { background: var(--night); color: #fff; }
.tile.dark p { color: rgba(255,255,255,.72); }
.tile.dark .link-more { color: #fff; }
.tile.photo { color: #fff; justify-content: flex-start; }
.tile.photo > picture { position: absolute; inset: 0; z-index: -2; }
.tile.photo > picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile.photo:hover > picture img { transform: scale(1.035); }
.tile.photo > picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%); }
.tile.photo h3, .tile.photo p { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.tile.photo p { color: rgba(255,255,255,.86); }
.tile.photo .link-more { color: #fff; }
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-12 { grid-column: span 12; }
.tile.wide { min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.tile.wide .tile-media { margin: calc(-1 * clamp(28px, 3vw, 44px)) calc(-1 * clamp(28px, 3vw, 44px)) calc(-1 * clamp(28px, 3vw, 44px)) 0; padding: 0; height: calc(100% + 2 * clamp(28px, 3vw, 44px)); }
.tile.wide .tile-media img { height: 100%; aspect-ratio: auto; min-height: 340px; }
.facts-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.facts-mini li { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: var(--r-chip); background: #fff; color: var(--ink); }
.tile.dark .facts-mini li { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 980px) {
  .span-7, .span-5, .span-4, .span-6 { grid-column: span 12; }
  .tile { min-height: 440px; }
  .tile.wide { grid-template-columns: 1fr; }
  .tile.wide .tile-media { margin: 0 calc(-1 * clamp(28px, 3vw, 44px)) calc(-1 * clamp(28px, 3vw, 44px)); height: auto; }
  .tile.wide .tile-media img { min-height: 0; aspect-ratio: 16/10; }
}
@media (min-width: 981px) and (max-width: 1180px) { .span-4 { grid-column: span 6; } .span-4:nth-last-child(2) { grid-column: span 12; } }

/* ---------- Geräte-Pass (interaktiver Ablauf) ---------- */
.pass-section { background: var(--mist); }
.pass { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { border-top: 1px solid #d9d9de; }
.steps li:last-child { border-bottom: 1px solid #d9d9de; }
.step-btn {
  width: 100%; display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 12px;
  padding: 20px 4px; background: none; border: 0; text-align: left; cursor: pointer;
  font: 600 21px/1.25 var(--font); letter-spacing: -0.015em; color: var(--steel);
  transition: color .2s var(--ease);
}
.step-btn:hover { color: var(--ink); }
.step-num {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font: 600 14px/1 var(--font-tech); color: var(--steel); background: #e8e8ec;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.step-btn .plus { width: 14px; height: 14px; position: relative; justify-self: end; }
.step-btn .plus::before, .step-btn .plus::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease); }
.step-btn .plus::after { transform: rotate(90deg); }
.step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.step-body > div { overflow: hidden; }
.step-body p { padding: 0 4px 22px 60px; color: var(--ink-soft); max-width: 52ch; }
.steps li.is-active .step-btn { color: var(--ink); }
.steps li.is-done .step-num { background: var(--ink); color: #fff; }
.steps li.is-active .step-num { background: var(--red); color: #fff; }
.steps li.is-active .plus::after { transform: rotate(0deg); }
.steps li.is-active .step-body { grid-template-rows: 1fr; }
.pass-controls { display: flex; gap: 12px; margin-top: 28px; }

.passcard {
  position: sticky; top: 96px;
  background: #fff; border-radius: var(--r-tile);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -24px rgba(36,36,36,.28);
}
.passcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.passcard-head .label { font-size: 13px; color: var(--steel); font-weight: 500; }
.passcard-head .model { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.badge-sample { font-size: 12px; font-weight: 600; color: var(--steel); background: var(--mist); padding: 5px 10px; border-radius: 980px; white-space: nowrap; }
.passcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 24px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.passcard dt { font-size: 12px; color: var(--steel); font-weight: 500; }
.passcard dd { margin: 2px 0 0; font: 600 17px/1.3 var(--font-tech); letter-spacing: .01em; }
.progress { height: 6px; background: var(--mist); border-radius: 6px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 16.66%; background: var(--red); border-radius: 6px; transition: width .5s var(--ease); }
.progress-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--steel); }
.proof {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 22px;
  padding: 16px 18px; border-radius: 16px; background: #f1f8f4;
}
.proof svg { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.proof strong { display: block; font-size: 16px; }
.proof span { font-size: 14px; color: var(--ink-soft); }
.proof.flash { animation: flash .6s var(--ease); }
@keyframes flash { from { transform: translateY(6px); opacity: .2; } to { transform: none; opacity: 1; } }
.timeline-mini { display: flex; gap: 6px; margin-top: 22px; }
.timeline-mini i { flex: 1; height: 28px; border-radius: 7px; background: var(--mist); position: relative; transition: background-color .3s var(--ease); }
.timeline-mini i.done { background: var(--ink); }
.timeline-mini i.now { background: var(--red); }
@media (max-width: 900px) { .pass { grid-template-columns: 1fr; } .passcard { position: relative; top: 0; order: -1; } }
@media (prefers-reduced-motion: reduce) { .proof.flash { animation: none; } .step-body, .progress span { transition: none; } }

/* ---------- Sicherheit (dunkel) ---------- */
.on-dark { background: #000; color: #f5f5f7; }
.on-dark .lead { color: rgba(245,245,247,.72); }
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sec-item { padding: 32px; border-radius: var(--r-tile); background: #161617; }
.sec-item svg { width: 36px; height: 36px; color: var(--red); }
.sec-item h3 { font-size: 21px; letter-spacing: -0.015em; margin-top: 22px; }
.sec-item p { margin-top: 8px; color: rgba(245,245,247,.68); font-size: 16px; }
.certs { margin-top: 20px; border-radius: var(--r-tile); background: #161617; padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.certs h3 { font-size: 24px; letter-spacing: -0.02em; }
.certs p { margin-top: 10px; color: rgba(245,245,247,.68); font-size: 16px; }
.cert-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cert-table th { text-align: left; font-weight: 500; color: rgba(245,245,247,.55); font-size: 13px; padding: 0 12px 12px 0; }
.cert-table td { padding: 14px 12px 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.cert-table td:first-child { font-weight: 600; }
.cert-table .num { font-family: var(--font-tech); letter-spacing: .02em; }
.cert-table a { color: #fff; font-weight: 600; }
@media (max-width: 980px) { .sec-grid { grid-template-columns: 1fr 1fr; } .certs { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sec-grid { grid-template-columns: 1fr; }
  .cert-table thead { display: none; }
  .cert-table tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
  .cert-table td { border: 0; padding: 2px 0; }
  .cert-table td:nth-child(2), .cert-table td:nth-child(3) { grid-column: 1; color: rgba(245,245,247,.68); font-size: 14px; }
  .cert-table td:nth-child(4) { grid-row: 1; grid-column: 2; }
}

/* ---------- Serviceportal ---------- */
.portal-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; margin-top: clamp(40px, 5vw, 64px); padding: 0; list-style: none; }
.portal-feats h3 { font-size: 19px; letter-spacing: -0.01em; }
.portal-feats p { margin-top: 6px; color: var(--steel); font-size: 16px; }
@media (max-width: 860px) { .portal-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .portal-feats { grid-template-columns: 1fr; } }

.device {
  max-width: 1080px; margin-inline: auto;
  border-radius: 18px; padding: 10px;
  background: linear-gradient(#2a2a2c, #1b1b1d);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.45);
}
.screen { border-radius: 10px; overflow: hidden; background: #fbfbfd; display: grid; grid-template-columns: 210px 1fr; min-height: 520px; font-size: 13px; }
.scr-side { background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; }
.scr-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 22px; }
.scr-brand img { width: 26px; height: 26px; object-fit: contain; }
.scr-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.scr-nav li { padding: 8px 10px; border-radius: 8px; color: var(--ink-soft); }
.scr-nav li.on { background: var(--mist); color: var(--ink); font-weight: 600; }
.scr-main { padding: 22px 26px; }
.scr-top { display: flex; justify-content: space-between; align-items: center; }
.scr-top h4 { font-size: 20px; letter-spacing: -0.02em; }
.scr-top span { color: var(--steel); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.kpi b { display: block; font: 600 26px/1.1 var(--font-tech); margin-top: 4px; }
.kpi small { color: var(--steel); font-size: 12px; }
.scr-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.scr-table th { text-align: left; font-weight: 500; color: var(--steel); padding: 10px 12px; background: #fafafb; font-size: 12px; }
.scr-table td { padding: 11px 12px; border-top: 1px solid var(--line); }
.scr-table td.sn { font-family: var(--font-tech); }
.st { display: inline-block; padding: 3px 9px; border-radius: 980px; font-size: 12px; font-weight: 600; }
.st.ok { background: #e7f4ec; color: var(--ok); }
.st.run { background: #fff1f0; color: var(--red-ui); }
.st.wait { background: var(--mist); color: var(--ink-soft); }
@media (max-width: 860px) { .screen { grid-template-columns: 1fr; } .scr-side { display: none; } .kpis { grid-template-columns: 1fr 1fr; } .scr-table th:nth-child(3), .scr-table td:nth-child(3) { display: none; } }

/* ---------- Standort ---------- */
.place { position: relative; border-radius: var(--r-tile); overflow: hidden; color: #fff; min-height: 640px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 56px); isolation: isolate; }
.place > picture { position: absolute; inset: 0; z-index: -2; }
.place > picture img { width: 100%; height: 100%; object-fit: cover; }
.place::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.15) 45%, rgba(0,0,0,.0) 55%, rgba(0,0,0,.7)); }
.place .lead { color: rgba(255,255,255,.86); margin-top: 16px; }
.place-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.place-facts b { display: block; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1.05; }
.place-facts span { font-size: 15px; color: rgba(255,255,255,.8); }
@media (max-width: 760px) { .place { min-height: 720px; } .place-facts { grid-template-columns: 1fr 1fr; } }

/* ---------- Referenz ---------- */
.case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.case-main { background: var(--mist); border-radius: var(--r-tile); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.case-main .who { font-weight: 600; color: var(--steel); font-size: 15px; }
.case-main h3 { margin-top: 14px; max-width: 20ch; }
.case-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.case-nums b { display: block; font: 600 clamp(26px, 3vw, 38px)/1.05 var(--font-tech); letter-spacing: -.01em; }
.case-nums span { font-size: 14px; color: var(--steel); }
.case-img { border-radius: var(--r-tile); overflow: hidden; min-height: 420px; }
.case-img picture, .jobs-img picture, .mini-collage picture { display: block; width: 100%; height: 100%; }
.case-img img { width: 100%; height: 100%; object-fit: cover; object-position: 28% center; /* Büro-Foto: beide Personen im Ausschnitt, nicht nur Bildschirm */ }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } .case-img { min-height: 300px; } }

/* ---------- Team-Teaser / Collage ---------- */
.team-teaser { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.mini-collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-collage figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--mist); aspect-ratio: 4 / 5; }
.mini-collage figure.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mini-collage img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .team-teaser { grid-template-columns: 1fr; } }

/* Ecken-Motiv aus dem Logo: rote Quadrate an zwei Ecken */
.corners { position: relative; }
.corners::before, .corners::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--red); z-index: 2; opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.corners::before { top: 10px; left: 10px; }
.corners::after { right: 10px; bottom: 10px; }
.corners:hover::before, .corners:hover::after { opacity: 1; transform: none; }

/* ---------- CTA ---------- */
.cta-band { text-align: center; }
.cta-band .lead { margin: 20px auto 0; }
.cta-band .hero-cta { margin-top: 32px; }
.contact-line { margin-top: 28px; display: flex; justify-content: center; gap: 12px 28px; flex-wrap: wrap; font-size: 17px; }
.contact-line a { color: var(--ink); font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--mist); color: var(--ink-soft); font-size: 14px; padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer .ft { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--ink); }
.footer address { font-style: normal; line-height: 1.6; }
.footer .logo img { height: 28px; width: auto; margin-bottom: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid #d9d9de; color: var(--steel); font-size: 13px; }
.footer-bottom a { white-space: nowrap; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Teamseite ---------- */
.page-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.page-hero .display { max-width: 13ch; margin-inline: auto; }
.page-hero .lead { margin: 24px auto 0; }

.collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: 12px;
}
.collage figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--mist); position: relative; }
.collage picture { display: block; width: 100%; height: 100%; }
.collage img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .6s var(--ease); }
.collage figure:hover img { transform: scale(1.04); }
.collage .p { grid-row: span 2; }
.collage .w2 { grid-column: span 2; }
.collage .w3 { grid-column: span 3; }
.collage .h2r { grid-row: span 2; }
.collage .h3r { grid-row: span 3; }
.collage .note {
  background: var(--ink); color: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end;
}
.collage .note.red { background: var(--red-ui); }
.collage .note b { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.1; }
.collage .note > span { margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.8); }
.collage figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 980px; background: rgba(18,18,18,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 500; }
/* Vier Spalten: rote Notiz zwei Zeilen hoch, Büro-Foto drei Spalten breit, damit die Collage unten bündig endet */
@media (max-width: 980px) { .collage { grid-template-columns: repeat(4, 1fr); } .collage .w3 { grid-column: span 4; } .collage .note { grid-column: span 2; } .collage .g-red { grid-row: span 2; } .collage .g-office { grid-column: span 3; } }
@media (max-width: 560px) {
  .collage { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 88px; gap: 8px; }
  .collage figure { border-radius: 14px; }
  .collage .w3, .collage .w2, .collage .note { grid-column: span 3; }
  .collage .h2r { grid-row: span 3; }
  .collage .h3r { grid-row: span 4; }
  .collage .note { grid-row: span 2; padding: 18px; }
  .collage .hide-s { display: none; }
  .collage figcaption { font-size: 12px; }
}

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value { background: var(--mist); border-radius: var(--r-tile); padding: clamp(28px, 3vw, 40px); }
.value h3 { font-size: 24px; letter-spacing: -0.02em; }
.value p { margin-top: 10px; color: var(--ink-soft); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }

.jobs { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.jobs-card { background: var(--night); color: #fff; border-radius: var(--r-tile); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.jobs-card .lead { color: rgba(255,255,255,.75); margin-top: 16px; }
.jobs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.jobs-list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); font-weight: 600; }
.jobs-list li span { color: rgba(255,255,255,.6); font-weight: 500; }
.jobs-list li .flag { color: #fff3b0; font-weight: 600; }
.jobs-img { border-radius: var(--r-tile); overflow: hidden; min-height: 420px; }
.jobs-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .jobs { grid-template-columns: 1fr; } .jobs-img { min-height: 320px; } }

/* Entwurfs-Hinweis für interne Prüfung */
.draft-note { background: #fff7d6; color: #5c4a00; font-size: 13px; text-align: center; padding: 8px var(--gutter); }

.nw { white-space: nowrap; }

/* Collage Desktop: von Hand komponiert, bündiger Abschluss */
@media (min-width: 981px) {
  .collage { grid-auto-rows: clamp(68px, 6vw, 88px); }
  .collage .p { grid-row: span 3; }
  .collage .g-a { grid-column: 1 / 4; grid-row: 1 / 7; }
  .collage .g-note { grid-column: 1 / 3; grid-row: 7 / 10; }
  .collage .g-dog { grid-column: 1 / 3; grid-row: 10 / 16; }
  .collage .g-fleet { grid-column: 3 / 5; grid-row: 13 / 16; }
  .collage .g-red { grid-column: 1 / 3; grid-row: 16 / 19; }
  .collage .g-pack { grid-column: 3 / 5; grid-row: 16 / 19; }
  .collage .g-stage { grid-column: 4 / 7; grid-row: 19 / 25; }
  .collage .g-office { grid-column: 1 / 4; grid-row: 22 / 25; }
}

/* =========================================================
   Erweiterung: dunkler Einstieg, Navigation, Unterseiten
   ========================================================= */

/* Freigabe-Markierung: sichtbar, bis der Inhalt bestätigt ist */
.flag { background: #fff3b0; color: #5c4a00; border-radius: 4px; padding: 0 4px; font-size: .85em; font-weight: 600; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dark .flag, .on-dark .flag, .jobs-card .flag { background: #5c4a00; color: #fff3b0; }

/* Navigation über dunklem Einstieg */
.nav .logo-light { display: none; }
.nav.over-dark { background: rgba(0,0,0,.72); border-bottom-color: transparent; }
.nav.over-dark .logo-dark { display: none; }
.nav.over-dark .logo-light { display: block; }
.nav.over-dark .nav-links > li > a { color: #f5f5f7; }
.nav.over-dark .nav-side .lang a { color: #a1a1a6; }
.nav.over-dark .nav-side .lang a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav.over-dark .nav-side .lang a[aria-current="true"] { color: #fff; }
.nav.over-dark .nav-links > li > a:hover { color: #fff; }
.nav.over-dark .nav-toggle span { background: #fff; }
.nav { transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.nav-logo img { height: 30px; width: auto; }
@media (max-width: 1200px) {
  .nav.over-dark.is-open .nav-links { background: #000; border-bottom-color: #222; }
  .nav.over-dark.is-open .nav-links a { color: #fff; border-bottom-color: #222; }
  .nav.over-dark.is-open .nav-links .nav-lang-m a { border-color: #333; color: #a1a1a6; }
  .nav.over-dark.is-open .nav-links .nav-lang-m a[aria-current="true"] { background: #fff; border-color: #fff; color: #000; }
}

/* Dropdown Leistungen (Desktop) */
.has-menu { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 14px); left: -20px; min-width: 260px;
  list-style: none; margin: 0; padding: 10px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 18px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-menu:hover .submenu, .has-menu:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 15px; font-weight: 500; }
.submenu a:hover { background: var(--mist); text-decoration: none; }
.nav.over-dark .submenu { background: rgba(28,28,30,.96); }
.nav.over-dark .submenu a { color: #f5f5f7; }
.nav.over-dark .submenu a:hover { background: rgba(255,255,255,.08); }
@media (max-width: 1200px) {
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none; padding: 0 0 8px 12px; min-width: 0; backdrop-filter: none; }
  .submenu::before { display: none; }
  .nav.is-open .nav-links .submenu a { font-size: 17px; font-weight: 500; padding: 10px 0; border-bottom: 0; }
  .nav.over-dark .submenu { background: none; }
}

/* Dunkler Einstieg der Startseite */
.dark-hero { background: #000; color: #f5f5f7; padding-bottom: clamp(56px, 7vw, 96px); }
.dark-hero .lead { color: rgba(245,245,247,.74); }
.dark-hero .btn-quiet { color: #fff; }
.dark-hero .hero-media { background: #111; }
.dark-hero .trust li a, .dark-hero .trust li span { background: #1d1d1f; color: #f5f5f7; }
.dark-hero .trust li a:hover { background: #2a2a2d; }
.dark-hero .trust .tick circle { fill: #f5f5f7; }
.dark-hero .trust .tick path { stroke: #000; }

/* ---------- Unterseiten ---------- */
.crumbs { font-size: 14px; color: var(--steel); margin-bottom: 18px; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--ink); }
.sub-hero { padding-top: clamp(48px, 7vw, 96px); }
.sub-hero .display { font-size: clamp(42px, 6.4vw, 88px); max-width: 14ch; }
.sub-hero .lead { margin-top: 22px; max-width: 46ch; }
.sub-hero .hero-cta { justify-content: flex-start; margin-top: 30px; }
.sub-hero .hero-stage { margin-top: clamp(40px, 5vw, 64px); }
.sub-hero.dark { background: #000; color: #f5f5f7; padding-bottom: clamp(48px, 6vw, 80px); }
.sub-hero.dark .lead { color: rgba(245,245,247,.74); }
.sub-hero.dark .crumbs { color: rgba(245,245,247,.6); }
.sub-hero.dark .crumbs a:hover { color: #fff; }
.sub-hero.dark .btn-quiet { color: #fff; }
.sub-hero .hero-media { aspect-ratio: 16 / 7.4; }
@media (max-width: 700px) { .sub-hero .hero-media { aspect-ratio: 4 / 3.4; } }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts.n3 { grid-template-columns: repeat(3, 1fr); }
.facts li { padding: 28px 24px 28px 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts b { display: block; font: 600 clamp(22px, 2.4vw, 32px)/1.1 var(--font-tech); letter-spacing: -.01em; }
.facts span { display: block; margin-top: 6px; color: var(--steel); font-size: 15px; }
@media (max-width: 760px) {
  .facts, .facts.n3 { grid-template-columns: 1fr 1fr; }
  .facts li, .facts li + li { padding: 20px 0; border-left: 0; }
  .facts li:nth-child(odd) { padding-right: 16px; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.intro { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.intro p { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }

.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.spec.n2 { grid-template-columns: repeat(2, 1fr); }
.spec li { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.spec h3 { font-size: 20px; letter-spacing: -0.015em; }
.spec p { margin-top: 8px; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 900px) { .spec, .spec.n2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .spec, .spec.n2 { grid-template-columns: 1fr; } }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 16px; counter-reset: flow; }
.flow li { position: relative; padding-top: 56px; }
.flow li::before {
  counter-increment: flow; content: counter(flow);
  position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--ink); color: #fff; font: 600 15px/1 var(--font-tech);
}
.flow li:first-child::before { background: var(--red); }
.flow li::after { content: ""; position: absolute; top: 18px; left: 48px; right: -8px; height: 1px; background: #cfcfd4; }
.flow li:last-child::after { display: none; }
.flow h3 { font-size: 18px; letter-spacing: -0.01em; }
.flow p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow li { padding: 0 0 26px 56px; }
  .flow li::after { top: 44px; left: 18px; right: auto; bottom: 6px; width: 1px; height: auto; }
}

.proof-band .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proof-band .proof-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.proof-item { background: #161617; border-radius: var(--r-tile); padding: 28px; }
.proof-item .sq { width: 10px; height: 10px; margin: 0 0 18px; display: block; }
.proof-item h3 { font-size: 19px; letter-spacing: -0.01em; }
.proof-item p { margin-top: 8px; color: rgba(245,245,247,.7); font-size: 15px; }
@media (max-width: 980px) { .proof-band .proof-grid, .proof-band .proof-grid.n3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proof-band .proof-grid, .proof-band .proof-grid.n3 { grid-template-columns: 1fr; } }

.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-soft); max-width: 62ch; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { display: block; background: var(--mist); border-radius: var(--r-tile); overflow: hidden; color: var(--ink); }
.related a:hover { text-decoration: none; }
.related picture, .related img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.related a:hover img { transform: scale(1.03); }
.related div { padding: 22px 24px 26px; }
.related h3 { font-size: 21px; letter-spacing: -0.015em; }
.related span { display: inline-block; margin-top: 8px; color: var(--red-ui); font-weight: 600; font-size: 15px; }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field label small { font-weight: 400; color: var(--steel); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 17px/1.4 var(--font); color: var(--ink);
  padding: 13px 14px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(36,36,36,.08); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field .hint { font-size: 13px; color: var(--steel); margin-top: 6px; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form .consent { font-size: 14px; color: var(--steel); }
.form-status { display: none; padding: 16px 18px; border-radius: 14px; font-weight: 500; margin-bottom: 20px; }
.form-status.ok { display: block; background: #e7f4ec; color: #145c33; }
.form-status.err { display: block; background: #fff1f0; color: #9d0000; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.contact-aside { display: grid; gap: 20px; }
.contact-card { background: var(--mist); border-radius: var(--r-tile); padding: 28px; }
.contact-card h2 { font-size: 20px; letter-spacing: -0.015em; margin-bottom: 10px; }
.contact-card p, .contact-card address { font-style: normal; color: var(--ink-soft); }
.contact-card a { font-weight: 600; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 26px; letter-spacing: -0.02em; margin: 44px 0 12px; }
.legal h3 { font-size: 19px; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2em; }
.legal .note { background: #fff7d6; color: #5c4a00; padding: 14px 16px; border-radius: 12px; font-size: 15px; }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* ---------- Review 16.10.: Korrekturen ---------- */
/* Navigation ganz oben auf dunklem Einstieg: schwarz, ohne durchscheinenden weissen Hintergrund */
.nav.over-dark:not(.is-scrolled) { background: #000; }
.nav.over-dark.is-scrolled { background: rgba(0,0,0,.8); }

/* Lesbarkeit: Text auf Fotos mit stärkerem Verlauf */
.tile.photo > picture::after { background: linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 34%, rgba(0,0,0,.22) 62%, rgba(0,0,0,0) 80%); }
.tile.photo h3, .tile.photo p, .tile.photo .link-more { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.4); }
.place::after { background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.86) 100%); }
.place h2, .place .lead, .place-facts { text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 16px rgba(0,0,0,.35); }
@media (max-width: 760px) { .place::after { background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.2) 58%, rgba(0,0,0,.88) 100%); } }

/* Kacheln mit Bild unten: Bild füllt den Rest der Kachel, keine leere Fläche */
@media (min-width: 981px) {
  .tile:not(.wide) .tile-media { flex: 1 0 auto; display: flex; flex-direction: column; }
  .tile:not(.wide) .tile-media picture { flex: 1; display: block; position: relative; min-height: 220px; }
  .tile:not(.wide) .tile-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* Serviceportal-Mockup: Auftragsnummern und Status brechen nicht um */
.scr-table td:first-child, .scr-table td.sn, .st { white-space: nowrap; }
@media (max-width: 560px) {
  .scr-table th, .scr-table td { padding: 10px 8px; }
  .scr-main { padding: 16px 12px; }
  .scr-table { font-size: 12px; }
}

/* Hinweis «Produktiv im Einsatz» */
.live-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 980px; background: #e7f4ec; color: var(--ok); font-size: 13px; font-weight: 600; }
.live-badge span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(26,127,69,.5); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(26,127,69,.45); } 70% { box-shadow: 0 0 0 8px rgba(26,127,69,0); } 100% { box-shadow: 0 0 0 0 rgba(26,127,69,0); } }
@media (prefers-reduced-motion: reduce) { .live-badge span { animation: none; } }

/* Video anhalten */
.video-toggle { position: absolute; right: 20px; bottom: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(18,18,18,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; transition: background-color .2s; }
.video-toggle:hover { background: rgba(18,18,18,.8); }
.video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.video-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.video-toggle .i-play { display: none; }
.video-toggle.is-paused .i-play { display: block; }
.video-toggle.is-paused .i-pause { display: none; }
@media (max-width: 700px) { .video-toggle { right: 14px; bottom: 14px; width: 36px; height: 36px; } }

/* ---------- Referenzen ---------- */
.page-referenzen .page-hero .display { max-width: none; }
.ref-featured .case-main .facts-mini { margin-top: 24px; }
.ref-featured .facts-mini .ref-hint { background: none; padding-inline: 0; }
.ref-partner { margin: 0; font-size: 14px; color: var(--steel); }
.ref-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ref-card { background: var(--mist); border-radius: var(--r-tile); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.ref-card .who { font-weight: 600; color: var(--steel); font-size: 14px; }
.ref-card h3 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.ref-card .ref-client { margin-top: 6px; font-size: 15px; color: var(--steel); }
.ref-card p { margin-top: 14px; color: var(--ink-soft); }
.ref-card .facts-mini { margin-top: 18px; }
.ref-nums { display: flex; gap: 32px; margin: auto 0 0; padding: 28px 0 0; list-style: none; }
.ref-nums b { display: block; font: 600 28px/1.1 var(--font-tech); }
.ref-nums span { font-size: 14px; color: var(--steel); }
.ref-card.is-placeholder { background: transparent; border: 2px dashed #d2d2d7; }
.ref-card.is-placeholder h3, .ref-card.is-placeholder p, .ref-card.is-placeholder b { color: #a1a1a6; }
.ref-preview-note { margin-top: 20px; font-size: 14px; color: var(--steel); }
@media (max-width: 860px) { .ref-grid { grid-template-columns: 1fr; } }

/* Navigation mit sechs Punkten und Sprachwahl auf kleineren Laptops */
.nav .btn { white-space: nowrap; }
.nav-links a { white-space: nowrap; }
@media (min-width: 1201px) and (max-width: 1320px) {
  .nav-inner { gap: 18px; }
  .nav-menu { margin-left: 4px; }
  .nav-links { gap: 20px; }
  .nav-side { gap: 10px; }
}

/* Sprachwahl im Footer */
.footer-lang { display: inline-flex; gap: 4px; }
.footer-lang a { padding: 4px 8px; border-radius: 8px; color: var(--steel); }
.footer-lang a:hover { color: var(--ink); background: #e8e8ed; text-decoration: none; }
.footer-lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ---------- Review 23.10.: Korrekturen ---------- */
/* Titel der Rechtstexte: das lange Wort «Datenschutzerklärung» muss auf 390 px passen */
.page-hero .display.legal-title { font-size: clamp(30px, 8.4vw, 72px); max-width: none; }

/* Collage: Bilder fliegen von aussen ein, das verbreitert auf dem Handy sonst kurz die Seite */
.collage-section { overflow-x: clip; }

/* Links im Fliesstext: nicht nur Farbe, auch Unterstreichung (WCAG 1.4.1) */
p a:not(.btn):not(.link-more), address a, .legal li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Zertifikate und Partner stehen über dem Video. So bleibt zwischen Text und Video Luft und der Einstieg ruhig. */
.dark-hero .trust { padding-block: 0; margin-top: 48px; }
.dark-hero .hero-stage { margin-top: clamp(64px, 8vw, 120px); }

/* Rotes Quadrat im roten Hinweis der Teamseite: weiss, sonst unsichtbar */
.collage .note.red .sq { background: #fff; }