/* ==========================================================================
   EFEM GmbH – Stylesheet
   Layout-Idee „Leitungsplan“: linksbündiges Raster mit technischen Haarlinien,
   Mono-Beschriftungen wie in einer Schweißdokumentation und Diagonalen im
   Winkel der drei Logo-Striche (24,9° zur Senkrechten, Versatz 0,4651 × Höhe).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben: helles Grundthema (Papier, Beton, Logo-Blau). Die Namen stammen aus dem
     dunklen Entwurf: --nacht = Grundfläche, --frost = Schrift. Innerhalb von .dunkel
     gelten wieder die dunklen Werte (Naht-Szene, Abschluss, Fuß). */
  --nacht: #F6F7F8;
  --nacht-2: #EDEFF2;
  --stahl: #FFFFFF;
  --stahl-2: #F0F2F4;
  --linie: rgba(19, 28, 39, 0.13);
  --linie-stark: rgba(19, 28, 39, 0.3);
  --frost: #131C27;
  --nebel: #4A5868;
  --blau: #3C6198;
  --blau-ui: #4E7FC4;
  --blau-tief: #2E4F80;
  --himmel: #7698C1;
  --himmel-hell: #3C6198;
  --schiefer: #384352;
  --beton: #E3E6E9;
  --beton-2: #D3D8DE;
  --tinte: #131C27;
  --tinte-2: #4A5868;
  --linie-hell: rgba(19, 28, 39, 0.14);
  --glut: #FF6A1F;
  --glut-hell: #F07A1A;
  --gruen: #1E9E62;
  --fehler: #C4372A;

  /* Anlauffarben: so verfärbt sich Stahl neben einer frischen Naht */
  --anlauf: linear-gradient(90deg, #7698C1 0%, #4B6DB8 22%, #7C4B86 42%, #B8693A 62%, #D9A54B 80%, #F6E7BE 94%, #FFFFFF 100%);
  --anlauf-v: linear-gradient(180deg, #F6E7BE 0%, #D9A54B 18%, #B8693A 38%, #7C4B86 58%, #4B6DB8 78%, #7698C1 100%);

  --f-text: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --kopf-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --schraeg: 0.4651;

  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --zeichen-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 349 307'%3E%3Cpath fill='%233C6198' d='M0 307h32L174.8 0h-32z'/%3E%3Cpath fill='%237698C1' d='M79 307h32L253.8 0h-32z'/%3E%3Cpath fill='%23384352' d='M158 307h48L348.8 0h-48z'/%3E%3C/svg%3E");
  --zeichen-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 349 307'%3E%3Cpath fill='%233C6198' d='M0 307h32L174.8 0h-32z'/%3E%3Cpath fill='%237698C1' d='M79 307h32L253.8 0h-32z'/%3E%3Cpath fill='%23384352' d='M158 307h48L348.8 0h-48z'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 20px);
  background: var(--nacht);
}
body {
  margin: 0;
  background: var(--nacht);
  color: var(--frost);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.site { overflow-x: clip; min-height: 100vh; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--himmel-hell); outline-offset: 3px; }
::selection { background: var(--blau); color: #fff; }

.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 200;
  background: var(--frost); color: var(--nacht); padding: 12px 18px; font-weight: 650;
  transition: top .2s;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typografie ---------- */
.display {
  font-stretch: 122%;
  font-weight: 820;
  letter-spacing: -0.038em;
  line-height: 0.9;
}
.h1 { font-size: clamp(2.7rem, 1.2rem + 5.6vw, 7.2rem); }
.h2 {
  font-size: clamp(2rem, 1.15rem + 3vw, 3.9rem);
  font-stretch: 116%;
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 0.98;
}
.h3 {
  font-size: clamp(1.28rem, 1.08rem + 0.7vw, 1.7rem);
  font-stretch: 110%;
  font-weight: 760;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.lead {
  font-size: clamp(1.08rem, 0.98rem + 0.42vw, 1.32rem);
  line-height: 1.5;
  color: var(--nebel);
  max-width: 36em;
}
.lead strong { color: var(--frost); font-weight: 600; }
.text { color: var(--nebel); max-width: 38em; }
.text + .text { margin-top: 1em; }
.label, .eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-stretch: 90%;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  color: var(--nebel);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 19px;
  background: var(--zeichen-dunkel) no-repeat center / contain;
}
.hell .eyebrow { color: var(--tinte-2); }
.hell .eyebrow::before { background-image: var(--zeichen-hell); }
.akzent { color: var(--himmel-hell); }
.hell .akzent { color: var(--blau); }

/* ---------- Buttons ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  --bg: var(--blau);
  --fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 54px;
  padding: 0 24px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 650;
  font-size: 1rem;
  font-stretch: 106%;
  letter-spacing: -0.005em;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: background-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover .pfeil { transform: translateX(4px); }
.btn::after {
  /* Schweißnaht: vorne glühend, hinten angelaufen */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--anlauf);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease);
  z-index: 1;
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover { --bg: #4670AE; }
.btn:active { transform: translateY(1px); }
.btn--hell { --bg: var(--frost); --fg: var(--nacht); }
.btn--hell:hover { --bg: #FFFFFF; }
.btn--linie { --bg: transparent; --fg: var(--frost); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.btn--linie:hover { --bg: rgba(234, 240, 246, 0.06); box-shadow: inset 0 0 0 1px rgba(234, 240, 246, 0.6); }
.hell .btn--linie { --fg: var(--tinte); box-shadow: inset 0 0 0 1px rgba(19, 28, 39, 0.3); }
.hell .btn--linie:hover { --bg: rgba(19, 28, 39, 0.05); box-shadow: inset 0 0 0 1px var(--tinte); }
.btn--klein { min-height: 42px; padding: 0 16px; font-size: 0.93rem; }
.btn--tel { font-family: var(--f-mono); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.02em; font-stretch: 95%; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.textlink svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.textlink:hover { background-size: 0 1px; background-position: right bottom; }
.textlink:hover svg { transform: translateX(4px); }

.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s, box-shadow .35s, transform .45s var(--ease), backdrop-filter .35s;
}
.kopf__in {
  height: var(--kopf-h);
  display: flex;
  align-items: center;
  gap: 20px;
}
.kopf.ist-fest {
  background: rgba(10, 15, 22, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 var(--linie);
}
.kopf.ist-weg { transform: translateY(-110%); }
.kopf__logo { flex: none; display: block; padding: 6px 0; }
.kopf__logo img { width: 112px; height: auto; }
.kopf__nav { display: flex; gap: 2px; margin-left: auto; }
.kopf__nav a {
  position: relative;
  padding: 10px 13px;
  font-size: 0.95rem;
  font-weight: 520;
  font-stretch: 104%;
  color: rgba(234, 240, 246, 0.78);
  transition: color .2s;
}
.kopf__nav a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  background: var(--anlauf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.kopf__nav a:hover { color: var(--frost); }
.kopf__nav a:hover::after, .kopf__nav a[aria-current="page"]::after { transform: scaleX(1); }
.kopf__nav a[aria-current="page"] { color: var(--frost); }
.kopf__aktion { display: flex; align-items: center; gap: 14px; margin-left: 12px; }
.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--nebel);
  padding: 8px 2px;
  transition: color .2s;
}
.kopf__tel:hover { color: var(--frost); }
.kopf__tel svg { width: 16px; height: 16px; }
.kopf__burger {
  display: none;
  position: relative;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  margin-right: -8px;
}
.kopf__burger i {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 22px;
  margin: -11px 0 0 -1.5px;
  border-radius: 1px;
  transform: translateX(var(--x)) rotate(24.9deg);
  transition: transform .45s var(--ease), opacity .3s;
}
.kopf__burger i:nth-child(1) { --x: -8px; background: var(--blau-ui); }
.kopf__burger i:nth-child(2) { --x: 0px; background: var(--himmel); }
.kopf__burger i:nth-child(3) { --x: 8px; background: var(--frost); }
.kopf__burger[aria-expanded="true"] i:nth-child(1) { transform: translateX(0) rotate(45deg); background: var(--frost); }
.kopf__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: translateX(0) rotate(24.9deg) scaleY(0.2); }
.kopf__burger[aria-expanded="true"] i:nth-child(3) { transform: translateX(0) rotate(-45deg); }

@media (max-width: 1180px) {
  .kopf__tel span { display: none; }
  .kopf__nav a { padding-inline: 10px; }
  .kopf__nav a::after { left: 10px; right: 10px; }
}
@media (max-width: 980px) {
  :root { --kopf-h: 66px; }
  .kopf__nav, .kopf__aktion .btn { display: none; }
  .kopf__aktion { margin-left: auto; gap: 6px; }
  .kopf__burger { display: inline-flex; }
  .kopf__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--linie-stark); border-radius: 2px; color: var(--frost); }
  .kopf__logo img { width: 100px; }
}

/* ---------- Mobilmenü ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--nacht);
  padding: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 18px) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  visibility: hidden;
  clip-path: polygon(0 0, 0 0, calc(-46.51vh) 100%, calc(-46.51vh) 100%);
  transition: clip-path .65s var(--ease-io), visibility 0s linear .65s;
}
.menu.ist-offen {
  visibility: visible;
  clip-path: polygon(0 0, calc(100% + 46.51vh) 0, 100% 100%, calc(-46.51vh) 100%);
  transition: clip-path .65s var(--ease-io), visibility 0s;
}
.menu__links { display: grid; gap: 4px; border-top: 1px solid var(--linie); }
.menu__links a {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
  font-size: clamp(1.7rem, 7.2vw, 2.4rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.03em;
  line-height: 1.05;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .4s, transform .5s var(--ease);
}
.menu__links a small {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-stretch: 90%;
  color: var(--nebel);
}
.menu__links a[aria-current="page"] { color: var(--himmel-hell); }
.menu.ist-offen .menu__links a { opacity: 1; transform: none; }
.menu.ist-offen .menu__links a:nth-child(2) { transition-delay: .05s; }
.menu.ist-offen .menu__links a:nth-child(3) { transition-delay: .1s; }
.menu.ist-offen .menu__links a:nth-child(4) { transition-delay: .15s; }
.menu.ist-offen .menu__links a:nth-child(5) { transition-delay: .2s; }
.menu__kontakt { display: grid; gap: 10px; margin-top: auto; }
.menu__kontakt .btn { width: 100%; }
.menu__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--nebel); }
body.menu-offen { overflow: hidden; }

/* ---------- Sektionen ---------- */
.sektion { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.sektion--eng { padding-block: clamp(56px, 7vw, 96px); }
.hell { background: var(--beton); color: var(--tinte); }
.hell .lead, .hell .text { color: var(--tinte-2); }
.dunkel-2 { background: var(--nacht-2); }
.kopfzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.kopfzeile .eyebrow { margin-bottom: 22px; }
.kopfzeile .lead { margin-top: 20px; }
@media (max-width: 760px) {
  .kopfzeile { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Held (Startseite) ---------- */
.held {
  --band-h: clamp(300px, 55svh, 660px);
  position: relative;
  min-height: max(680px, 100svh);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 14px);
  isolation: isolate;
  background:
    radial-gradient(60% 55% at 70% 28%, rgba(60, 97, 152, 0.22), transparent 70%),
    radial-gradient(50% 50% at 62% 34%, rgba(255, 128, 48, calc(var(--flimmer, 0) * 0.12)), transparent 70%),
    var(--nacht);
}
.held::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rauschen);
  opacity: 0.05;
  pointer-events: none;
  z-index: 5;
}
.held__band { position: relative; height: var(--band-h); flex: none; }
.held__intro {
  position: relative;
  z-index: 3;
  padding-top: clamp(12px, 3vh, 40px);
}
.held__intro-in { max-width: 27rem; display: grid; gap: 18px; justify-items: start; }
.held__intro .label { color: var(--nebel); }
.held__titel {
  --fs: clamp(2.7rem, 6vw, 7.6rem);
  position: relative;
  z-index: 4;
  font-size: var(--fs);
  margin-top: calc(var(--fs) * -0.5);
  white-space: nowrap;
  text-shadow: 0 2px 30px rgba(10, 15, 22, 0.35);
}
.held__unten {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
  margin-top: clamp(20px, 3.4vh, 40px);
}
.held__unten .lead { max-width: 34em; }
.held__leiste {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding-top: clamp(24px, 4vh, 44px);
}
.held__leiste .wrap {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--linie);
}
.held__leiste .wrap > * {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 18px 0;
  margin-right: 22px;
  border-right: 1px solid var(--linie);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-stretch: 90%;
  color: var(--nebel);
}
.held__leiste .wrap > *:last-child { border-right: 0; margin-right: 0; }
.held canvas.funken {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

/* Die drei Striche des Logos – der breite ist das Fenster zur Baustelle */
.striche {
  --h: var(--band-h);
  --s: calc(var(--h) * var(--schraeg));
  --d1: clamp(16px, 2.1vw, 34px);
  --d2: clamp(16px, 2.1vw, 34px);
  --g: clamp(12px, 1.7vw, 28px);
  --fw: clamp(260px, 40vw, 620px);
  position: absolute;
  top: 0;
  right: max(calc(var(--gutter) * 0.5), calc((100vw - var(--max)) / 2));
  height: var(--h);
  width: calc(var(--d1) + var(--g) + var(--d2) + var(--g) + var(--fw) + var(--s));
  z-index: 2;
}
.strich {
  position: absolute;
  top: 0;
  height: 100%;
  clip-path: var(--auf);
  transition: clip-path 1s var(--ease-io);
}
.strich--1 {
  left: 0;
  width: calc(var(--d1) + var(--s));
  background: var(--blau-ui);
  --auf: polygon(var(--s) 0, 100% 0, var(--d1) 100%, 0 100%);
  --zu: polygon(var(--s) 0, var(--s) 0, 0 100%, 0 100%);
}
.strich--2 {
  left: calc(var(--d1) + var(--g));
  width: calc(var(--d2) + var(--s));
  background: var(--himmel);
  --auf: polygon(var(--s) 0, 100% 0, var(--d2) 100%, 0 100%);
  --zu: polygon(var(--s) 0, var(--s) 0, 0 100%, 0 100%);
  transition-delay: .1s;
}
.fenster {
  left: calc(var(--d1) + var(--g) + var(--d2) + var(--g));
  width: calc(var(--fw) + var(--s));
  overflow: hidden;
  background: #151D28;
  --auf: polygon(var(--s) 0, 100% 0, var(--fw) 100%, 0 100%);
  --zu: polygon(var(--s) 0, var(--s) 0, 0 100%, 0 100%);
  transition-delay: .2s;
  transition-duration: 1.15s;
}
.fenster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  max-width: none;
  filter: brightness(0.8) contrast(1.06) saturate(0.92);
  transform-origin: 50% 50%;
  transition: transform 1.6s var(--ease);
}
.fenster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 170, 90, calc(var(--flimmer, 0) * 0.35)), transparent 38%),
    linear-gradient(180deg, rgba(10, 15, 22, 0) 55%, rgba(10, 15, 22, 0.55) 100%),
    linear-gradient(90deg, rgba(10, 15, 22, 0.35), rgba(10, 15, 22, 0) 40%);
  pointer-events: none;
}
.fenster__vermerk {
  position: absolute;
  right: calc(var(--s) * 0.08 + 18px);
  top: 16px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 240, 246, 0.8);
  background: rgba(10, 15, 22, 0.5);
  padding: 6px 9px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.js [data-oeffnen]:not(.ist-bereit) .strich { clip-path: var(--zu); animation: notauf .01s 3.4s forwards; }
.js [data-oeffnen]:not(.ist-bereit) .fenster img { transform: scale(1.14); }
@keyframes notauf { to { clip-path: var(--auf); } }

/* Schweiß-Enthüllung der Headline */
.naht-zeile {
  --p: 100%;
  position: relative;
  display: inline-block;
}
.naht-zeile__basis {
  display: block;
  clip-path: inset(-20% calc(100% - var(--p)) -20% -2%);
}
.naht-zeile__anriss,
.naht-zeile__glut {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.naht-zeile__anriss {
  color: transparent;
  -webkit-text-stroke: 1px rgba(169, 198, 232, 0.34);
  opacity: 0;
  transition: opacity .6s;
}
.naht-zeile__glut {
  color: transparent;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent calc(var(--p) - 34%),
    rgba(124, 75, 134, 0.35) calc(var(--p) - 24%),
    rgba(255, 106, 31, 0.9) calc(var(--p) - 12%),
    #FFC46B calc(var(--p) - 4.5%),
    #FFF8EA calc(var(--p) - 0.6%),
    transparent var(--p));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 120, 40, 0.55));
  opacity: 0;
}
.naht-zeile.ist-aktiv .naht-zeile__glut { opacity: 1; }
.naht-zeile.ist-anriss .naht-zeile__anriss { opacity: 1; }
.js .held:not(.naht-laeuft) .naht-zeile { --p: 0%; animation: notp .01s 3.6s forwards; }
@keyframes notp { to { --p: 100%; } }

.status { display: inline-flex; align-items: center; gap: 9px; }
.status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nebel);
  flex: none;
}
.status.ist-offen::before { background: var(--gruen); box-shadow: 0 0 0 0 rgba(90, 212, 154, 0.6); animation: status-puls 2.2s infinite; }
.status.ist-zu::before { background: #E8A15C; }
@keyframes status-puls {
  0% { box-shadow: 0 0 0 0 rgba(90, 212, 154, 0.55); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(90, 212, 154, 0); }
}

@media (max-width: 1100px) {
  .held__unten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .held__intro, .seitenkopf .held__intro { display: none; }
  .held__leiste .nur-breit { display: none; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .held__titel { --fs: 7.4vw; }
}
@media (max-width: 760px) {
  .held { --band-h: clamp(220px, 34svh, 330px); min-height: 0; padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 8px); }
  .held__intro { display: none; }
  .striche {
    --d1: 12px; --d2: 12px; --g: 10px;
    --fw: calc(100vw - var(--gutter) - 12px - 10px - 12px - 10px - var(--s) + 26vw);
    right: -26vw;
  }
  .held__titel {
    --fs: clamp(2.35rem, 11.4vw, 3.6rem);
    white-space: normal;
    margin-top: calc(var(--fs) * -0.42);
    font-stretch: 112%;
  }
  .held__titel .naht-zeile { display: block; width: max-content; }
  .held__unten { margin-top: 18px; gap: 22px; }
  .held__unten .knoepfe .btn { flex: 1 1 auto; }
  .held__leiste { display: none; }
  .held__unten { padding-bottom: 36px; }
  .fenster__vermerk { right: calc(26vw + 12px); top: 12px; }
}

/* ---------- Naht: Schweißen · Prüfen · Isolieren ---------- */
.naht {
  position: relative;
  height: 330svh;
  background-color: #0B1118;
  background-image:
    linear-gradient(rgba(118, 152, 193, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 152, 193, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(118, 152, 193, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 152, 193, 0.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border-top: 1px solid var(--linie);
}
.naht__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.naht__raster {
  display: grid;
  grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: var(--kopf-h);
}
.naht__text .eyebrow { margin-bottom: 20px; }
.naht__schritte {
  list-style: none;
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: clamp(24px, 4vh, 44px);
  padding-left: 30px;
}
.naht__schritte::before,
.naht__schritte::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 2px;
  bottom: 8px;
}
.naht__schritte::before { background: var(--linie-stark); }
.naht__schritte::after {
  background: var(--anlauf-v);
  transform-origin: top;
  transform: scaleY(var(--fortschritt, 0));
}
.naht__schritt { position: relative; opacity: 0.38; transition: opacity .45s; }
.naht__schritt::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 7px;
  width: 12px; height: 12px;
  border: 2px solid var(--linie-stark);
  background: #0B1118;
  transform: rotate(45deg);
  transition: background-color .3s, border-color .3s;
}
.naht__schritt.ist-aktiv, .naht__schritt.ist-fertig { opacity: 1; }
.naht__schritt.ist-aktiv::before { background: var(--glut-hell); border-color: var(--glut-hell); box-shadow: 0 0 14px rgba(255, 181, 74, 0.7); }
.naht__schritt.ist-fertig::before { background: var(--himmel); border-color: var(--himmel); }
.naht__schritt-kopf { display: flex; align-items: baseline; gap: 14px; }
.naht__nr { font-family: var(--f-mono); font-size: 0.72rem; color: var(--nebel); letter-spacing: 0.08em; }
.naht__schritt p { margin-top: 6px; color: var(--nebel); max-width: 30em; }
.naht__claim {
  margin-top: clamp(22px, 4vh, 40px);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.02em;
  color: rgba(234, 240, 246, 0.25);
  transition: color .5s;
}
.naht__claim span { transition: color .4s; }
.naht__claim.ist-an span { color: var(--frost); }
.naht__claim.ist-an span:last-child { color: var(--himmel-hell); }
.naht__grafik { position: relative; width: 100%; aspect-ratio: 1000 / 480; }
.naht__grafik svg,
.naht__grafik canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.naht__grafik canvas { pointer-events: none; }
.naht__hinweis {
  position: absolute;
  left: 0; bottom: -34px;
  color: var(--nebel);
}
.naht-svg .fuehrung { stroke: rgba(169, 198, 232, .5); stroke-width: 1.2; fill: none; }
.naht-svg .fuehrung-punkt { fill: var(--himmel-hell); }
.naht-svg .beschriftung { transition: opacity .5s; }
.js .naht-svg .beschriftung:not(.ist-an) { opacity: 0; }
.naht-svg .stempel-text { font-family: var(--f-text); font-weight: 820; font-size: 38px; font-stretch: 125%; letter-spacing: -0.02em; fill: #A9C6E8; }
.naht-label {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 4px 7px;
  background: rgba(11, 17, 24, 0.72);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-stretch: 90%;
  color: var(--himmel-hell);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s;
}
.naht-label--unten { transform: translate(-50%, 0); }
.js .naht-label:not(.ist-an) { opacity: 0; }
.naht-anzeige {
  position: absolute;
  left: 65%;
  top: 4%;
  display: grid;
  gap: 5px;
  min-width: 196px;
  padding: 12px 14px;
  background: rgba(10, 15, 22, 0.92);
  border: 1px solid #6F9BD1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-stretch: 90%;
  color: var(--nebel);
  pointer-events: none;
}
.js .naht-anzeige { opacity: 0; }
.naht-anzeige strong { color: var(--frost); font-weight: 600; font-size: .72rem; }
.naht-anzeige span { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.naht-anzeige em { font-style: normal; }
.naht-anzeige b { color: var(--gruen); font-weight: 600; }
.naht-anzeige svg { width: 14px; height: 14px; color: var(--gruen); }
@media (max-width: 900px) {
  .naht-label { font-size: 0.56rem; padding: 3px 5px; }
  .naht-anzeige { left: auto; right: 2%; top: 4%; min-width: 0; padding: 8px 10px; font-size: .56rem; gap: 3px; }
  .naht-anzeige strong { font-size: .62rem; }
}

@media (max-width: 900px) {
  .naht { height: 300svh; }
  .naht__buehne { align-items: flex-start; }
  .naht__raster { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding-top: calc(var(--kopf-h) + 4vh); }
  .naht__text .h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .naht__text .eyebrow { margin-bottom: 12px; }
  .naht__schritte { gap: 10px; margin-top: 18px; }
  .naht__schritt p { display: none; }
  .naht__schritt.zeigt-text p { display: block; }
  .naht__claim { margin-top: 14px; }
  .naht__grafik { order: -1; margin-inline: calc(var(--gutter) * -0.5); width: calc(100% + var(--gutter)); }
  .naht__hinweis { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .naht__text .eyebrow, .naht__claim { display: none; }
}

/* ---------- Kacheln (Leistungen) ---------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie-hell);
  border-left: 1px solid var(--linie-hell);
}
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 18px 22px;
  border-right: 1px solid var(--linie-hell);
  border-bottom: 1px solid var(--linie-hell);
  transition: background-color .35s;
}
.kachel::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -2px;
  height: 3px;
  background: var(--anlauf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
  z-index: 2;
}
.kachel:hover { background: rgba(255, 255, 255, 0.5); }
.kachel:hover::after, .kachel:focus-visible::after { transform: scaleX(1); }
.kachel__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--beton-2);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 56px, 100% 100%, 0 100%);
}
.kachel__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.kachel:hover .kachel__bild img { transform: scale(1.05); }
.kachel__ort {
  position: absolute;
  left: 10px; bottom: 10px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 15, 22, 0.55);
  padding: 5px 8px;
}
.kachel h3 { color: inherit; }
.kachel p { color: var(--tinte-2); font-size: 0.98rem; line-height: 1.55; }
.kachel .textlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .kachel__bild { aspect-ratio: 16 / 11; }
}

/* ---------- Einsatzgebiet / Karte ---------- */
.einsatz { overflow: hidden; }
.einsatz__raster {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.einsatz__raster .lead { margin-top: 22px; }
.kontaktliste {
  list-style: none;
  display: grid;
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--linie);
}
.kontaktliste li { border-bottom: 1px solid var(--linie); }
.kontaktliste a, .kontaktliste .zeile {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  transition: color .2s, padding .35s var(--ease);
}
.kontaktliste .label { color: var(--nebel); }
.kontaktliste strong {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kontaktliste a svg { width: 18px; height: 18px; color: var(--nebel); transition: transform .35s var(--ease), color .2s; }
.kontaktliste a:hover { padding-left: 8px; }
.kontaktliste a:hover svg { transform: translate(3px, -3px); color: var(--frost); }
.einsatz .knoepfe { margin-top: 32px; }
.karte { position: relative; margin: 0; }
.karte svg { width: 100%; height: auto; overflow: visible; }
.karte__land { fill: url(#punktraster); stroke: rgba(169, 198, 232, 0.4); stroke-width: 1.2; stroke-linejoin: round; }
.karte__glanz { fill: url(#kartenlicht); }
.karte__route {
  fill: none;
  stroke: var(--glut-hell);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  animation: fliessen 1.1s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 150, 60, .6));
}
.karte__route--kalt { stroke: var(--himmel-hell); filter: drop-shadow(0 0 4px rgba(169, 198, 232, .5)); animation-duration: 1.4s; }
@keyframes fliessen { to { stroke-dashoffset: -22; } }
.karte__punkt { fill: var(--frost); }
.karte__sitz { fill: var(--glut-hell); }
.karte__welle { fill: none; stroke: var(--glut-hell); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: welle 2.8s ease-out infinite; }
.karte__welle:nth-of-type(2) { animation-delay: 1.4s; }
@keyframes welle { from { transform: scale(0.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.karte__name { font-family: var(--f-text); font-weight: 750; font-stretch: 112%; font-size: 17px; fill: var(--frost); letter-spacing: -.01em; }
.karte__zusatz { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; fill: var(--nebel); text-transform: uppercase; }
.karte__puls { fill: #FFF3D6; filter: drop-shadow(0 0 5px rgba(255, 170, 80, .9)); }
.karte figcaption { margin-top: 12px; color: var(--nebel); }
@media (max-width: 900px) {
  .einsatz__raster { grid-template-columns: minmax(0, 1fr); }
  .karte { max-width: 460px; margin-inline: auto; width: 100%; }
}
@media (max-width: 520px) {
  .kontaktliste a, .kontaktliste .zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .kontaktliste .label { grid-column: 1 / -1; }
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf {
  --band-h: clamp(240px, 40svh, 470px);
  position: relative;
  padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: clamp(48px, 7vw, 96px);
  isolation: isolate;
  background:
    radial-gradient(60% 60% at 72% 20%, rgba(60, 97, 152, 0.2), transparent 70%),
    var(--nacht);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rauschen);
  opacity: 0.05;
  pointer-events: none;
}
.seitenkopf .held__band { height: var(--band-h); }
.seitenkopf .held__intro-in { max-width: 24rem; }
.seitenkopf__titel {
  --fs: clamp(2.5rem, 1.2rem + 4.8vw, 6.2rem);
  position: relative;
  z-index: 4;
  font-size: var(--fs);
  margin-top: calc(var(--fs) * -0.45);
}
.seitenkopf .held__unten { margin-top: clamp(20px, 3vw, 36px); }
.seitenkopf--ohne-bild { padding-bottom: clamp(40px, 6vw, 80px); }
.seitenkopf--ohne-bild .seitenkopf__titel { margin-top: clamp(40px, 8vw, 110px); }
.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--nebel);
}
.brotkrumen a:hover { color: var(--frost); }
.brotkrumen span[aria-hidden] { opacity: .5; }
@media (max-width: 760px) {
  .seitenkopf { --band-h: clamp(190px, 30svh, 280px); }
  .seitenkopf .held__intro { display: none; }
  .seitenkopf__titel { --fs: clamp(2rem, 9.2vw, 3.2rem); font-stretch: 106%; margin-top: calc(var(--fs) * -0.3); }
}

/* ---------- Ankerleiste ---------- */
.anker {
  position: sticky;
  top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  transition: top .45s var(--ease);
  z-index: 20;
  background: rgba(227, 230, 233, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-hell);
  color: var(--tinte);
}
.anker .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.anker .wrap::-webkit-scrollbar { display: none; }
.anker a {
  flex: none;
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color .2s, background-color .2s;
}
.anker a:hover, .anker a.ist-aktiv { border-color: rgba(19, 28, 39, 0.3); background: rgba(255, 255, 255, 0.5); }

/* ---------- Fachbereiche (Leistungen) ---------- */
.bereich {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--linie-hell);
}
.bereich:first-of-type { border-top: 0; padding-top: 0; }
.bereich--rechts .bereich__bild { order: -1; }
.bereich__text .label { color: var(--tinte-2); margin-bottom: 14px; display: block; }
.bereich__text .h2 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.2rem); }
.bereich__text .text { margin-top: 18px; }
.haken {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--linie-hell);
}
.haken li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie-hell);
  font-weight: 520;
}
.haken li::before {
  content: "";
  width: 14px; height: 12px;
  margin-top: 6px;
  background: var(--zeichen-hell) no-repeat center / contain;
}
.dunkel .haken, .haken--dunkel { border-color: var(--linie); }
.dunkel .haken li, .haken--dunkel li { border-color: var(--linie); color: var(--frost); }
.dunkel .haken li::before, .haken--dunkel li::before { background-image: var(--zeichen-dunkel); }
.bereich__bild {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 73px, 100% 100%, 0 100%);
  background: var(--beton-2);
}
.bereich__bild img { width: 100%; height: 100%; object-fit: cover; }
.bereich__bild figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 15, 22, 0.6);
  padding: 6px 9px;
}
@media (max-width: 860px) {
  .bereich { grid-template-columns: minmax(0, 1fr); }
  .bereich--rechts .bereich__bild { order: 0; }
  .bereich__bild { aspect-ratio: 16 / 11; }
}

/* KMR-Querschnitt */
.kmr { position: relative; margin: 0; }
.kmr svg { width: 100%; height: auto; overflow: visible; }
.kmr .schicht { transform-box: fill-box; transform-origin: center; transition: transform 1s var(--ease), opacity .8s; }
.js .kmr:not(.ist-sichtbar) .schicht { transform: scale(0.6); opacity: 0; }
.kmr .schicht--2 { transition-delay: .15s; }
.kmr .schicht--3 { transition-delay: .3s; }
.kmr .schicht--4 { transition-delay: .45s; }
.kmr .kmr__ruf { transition: opacity .6s .7s; }
.js .kmr:not(.ist-sichtbar) .kmr__ruf { opacity: 0; }
.kmr .kmr__nr { font-family: var(--f-mono); font-size: 14px; font-weight: 600; fill: #FFFFFF; }
.kmr .kmr__linie { stroke: var(--tinte); stroke-width: 1.3; fill: none; }
.kmr .kmr__punkt { fill: var(--tinte); }
.kmr__legende {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin-top: 22px;
}
.kmr__legende li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .92rem; line-height: 1.45; color: var(--tinte-2); }
.kmr__legende b { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--tinte); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; }
.kmr__legende strong { display: block; color: var(--tinte); font-weight: 680; font-stretch: 106%; }
@media (max-width: 480px) { .kmr__legende { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Handwerk-Schritte (dunkel) ---------- */
.schritte3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
}
.schritt3 {
  position: relative;
  padding: 34px clamp(18px, 2.4vw, 36px) 36px 0;
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.schritt3 + .schritt3 { padding-left: clamp(18px, 2.4vw, 36px); }
.schritt3:last-child { border-right: 0; }
.schritt3__farbe {
  width: 58px; height: 10px;
  clip-path: polygon(4.65px 0, 100% 0, calc(100% - 4.65px) 100%, 0 100%);
  background: var(--c, var(--blau-ui));
}
.schritt3__nr { font-family: var(--f-mono); font-size: .72rem; color: var(--nebel); letter-spacing: .1em; }
.schritt3 .text { font-size: 1rem; }
.schritt3 .haken { margin-top: auto; padding-top: 0; }
@media (max-width: 900px) {
  .schritte3 { grid-template-columns: minmax(0, 1fr); }
  .schritt3, .schritt3 + .schritt3 { padding: 28px 0 32px; border-right: 0; border-bottom: 1px solid var(--linie); }
}

/* ---------- Abschluss-CTA ---------- */
.abschluss { position: relative; overflow: hidden; }
.abschluss__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 64px;
  align-items: end;
}
.abschluss .lead { margin-top: 20px; }
.abschluss__kontakt { display: grid; gap: 12px; }
.abschluss__kontakt .btn { width: 100%; justify-content: space-between; }
.abschluss .status { color: var(--nebel); margin-top: 6px; }
@media (max-width: 860px) { .abschluss__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Werte (Unternehmen) ---------- */
.werte { display: grid; border-top: 1px solid var(--linie); }
.wert {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px 48px;
  align-items: center;
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--linie);
}
.wert__wort {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6.4rem);
  font-weight: 820;
  font-stretch: 122%;
  letter-spacing: -0.04em;
  line-height: .9;
}
.wert__wort::before {
  content: "";
  flex: none;
  width: .563em;
  height: .78em;
  background: var(--c);
  clip-path: polygon(64.5% 0, 100% 0, 35.5% 100%, 0 100%);
}
.wert .text { color: var(--nebel); font-size: 1.05rem; }
@media (max-width: 760px) { .wert { grid-template-columns: minmax(0, 1fr); } }

.fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--linie-hell);
}
.fakten div {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--linie-hell);
}
.fakten div:nth-child(odd) { border-right: 1px solid var(--linie-hell); }
.fakten div:nth-child(even) { padding-left: 20px; }
.fakten dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.fakten dd { margin: 6px 0 0; font-weight: 650; font-stretch: 106%; font-size: 1.08rem; }
@media (max-width: 560px) {
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .fakten div:nth-child(odd) { border-right: 0; }
  .fakten div:nth-child(even) { padding-left: 0; }
}
.zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) { .zweispalt { grid-template-columns: minmax(0, 1fr); } }
.zitat {
  margin: 28px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--blau);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--tinte);
}
.zitat footer { margin-top: 10px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }

/* ---------- Galerie ---------- */
.galerie {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 30%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--himmel) transparent;
}
.galerie figure {
  margin: 0;
  scroll-snap-align: start;
  display: grid;
  gap: 12px;
}
.galerie .bildrahmen {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stahl);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 56px, 100% 100%, 0 100%);
}
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { display: flex; justify-content: space-between; gap: 12px; color: var(--nebel); }
.galerie figcaption strong { color: var(--frost); font-family: var(--f-text); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .95rem; }
@media (max-width: 700px) { .galerie { grid-auto-columns: 78%; } }
.galerie-steuerung { display: flex; gap: 8px; }
.galerie-steuerung button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  transition: border-color .2s, background-color .2s;
}
.galerie-steuerung button:hover { border-color: var(--frost); background: rgba(255, 255, 255, .05); }
.galerie-steuerung svg { width: 18px; height: 18px; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 22px; }
.formular__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.formular__raster .breit { grid-column: 1 / -1; }
@media (max-width: 640px) { .formular__raster { grid-template-columns: minmax(0, 1fr); } }
.feld { display: grid; gap: 8px; min-width: 0; }
.feld > label, .feld > .feld__titel {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nebel);
}
.feld input, .feld textarea, .feld select {
  width: 100%;
  min-height: 54px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  color: var(--frost);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BAABB' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.feld select option { background: var(--stahl); color: var(--frost); }
.feld textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.feld input::placeholder, .feld textarea::placeholder { color: rgba(155, 170, 187, 0.6); }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: rgba(169, 198, 232, 0.45); }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--himmel);
  background-color: rgba(118, 152, 193, 0.07);
  box-shadow: 0 0 0 3px rgba(118, 152, 193, 0.2);
}
.feld.ist-fehler input, .feld.ist-fehler textarea, .feld.ist-fehler select { border-color: var(--fehler); }
.feld__fehler { color: var(--fehler); font-size: 0.86rem; min-height: 0; }
.feld__fehler:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  font-size: 0.94rem;
  font-weight: 520;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip span::before {
  content: "";
  width: 10px; height: 10px;
  border: 1.5px solid var(--nebel);
  transform: rotate(45deg);
  transition: background-color .2s, border-color .2s;
}
.chip:hover span { border-color: rgba(169, 198, 232, 0.5); }
.chip input:checked + span { background: rgba(60, 97, 152, 0.4); border-color: var(--himmel); color: #fff; }
.chip input:checked + span::before { background: var(--glut-hell); border-color: var(--glut-hell); }
.chip input:focus-visible + span { outline: 2px solid var(--himmel-hell); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.93rem; color: var(--nebel); }
.check input {
  width: 22px; height: 22px;
  margin: 1px 0 0;
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--linie-stark);
  border-radius: 2px;
  background: rgba(255, 255, 255, .03);
  display: grid; place-content: center;
  cursor: pointer;
}
.check input::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .15s;
}
.check input:checked { background: var(--blau); border-color: var(--blau); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check a { color: var(--frost); text-decoration: underline; text-underline-offset: 3px; }
.check.ist-fehler input { border-color: var(--fehler); }
.formular__fuss { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.formular__fuss .label { color: var(--nebel); }
.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.meldung {
  display: none;
  padding: 26px 26px 28px;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  background: rgba(18, 26, 36, 0.8);
}
.meldung.ist-an { display: grid; gap: 12px; }
.meldung--ok { border-color: rgba(90, 212, 154, 0.45); }
.meldung--fehler { border-color: rgba(255, 156, 143, 0.5); }
.meldung .h3 { display: flex; align-items: center; gap: 12px; color: var(--frost); }
.meldung .h3 svg { width: 26px; height: 26px; color: var(--gruen); }
.meldung--fehler .h3 svg { color: var(--fehler); }
.meldung p { color: var(--nebel); }
.meldung .knoepfe { margin-top: 6px; }
.meldung__vorschau {
  justify-self: start;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1px dashed var(--linie-stark);
  color: var(--nebel);
}
.formular.ist-gesendet > :not(.meldung) { display: none; }

.kontaktseite {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.kontaktkarte {
  position: sticky;
  top: calc(var(--kopf-h) + 24px);
  display: grid;
  gap: 0;
  border: 1px solid var(--linie);
  background: var(--stahl);
}
.kontaktkarte__block { padding: 22px 24px; border-bottom: 1px solid var(--linie); display: grid; gap: 6px; }
.kontaktkarte__block:last-child { border-bottom: 0; }
.kontaktkarte .label { color: var(--nebel); }
.kontaktkarte a.gross, .kontaktkarte .gross {
  font-size: 1.3rem;
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kontaktkarte a.gross:hover { color: var(--himmel-hell); }
.kontaktkarte .mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kontaktkarte .mini a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  font-size: .88rem;
  font-weight: 560;
  transition: border-color .2s, background-color .2s;
}
.kontaktkarte .mini a:hover { border-color: var(--frost); background: rgba(255, 255, 255, .04); }
.kontaktkarte .mini svg { width: 16px; height: 16px; }
.zeiten { display: grid; gap: 4px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.zeiten div { display: flex; justify-content: space-between; gap: 12px; }
.zeiten dt { color: var(--nebel); }
.zeiten dd { margin: 0; font-weight: 560; }
@media (max-width: 960px) {
  .kontaktseite { grid-template-columns: minmax(0, 1fr); }
  .kontaktkarte { position: static; }
}

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: 1.45rem; font-stretch: 110%; font-weight: 760; letter-spacing: -.015em; margin: 2.4em 0 .7em; line-height: 1.15; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.1rem; font-weight: 700; margin: 1.8em 0 .5em; line-height: 1.2; }
.rechtstext p, .rechtstext li { color: var(--tinte-2); }
.rechtstext p + p { margin-top: .9em; }
.rechtstext ul { padding-left: 1.2em; margin: .6em 0; display: grid; gap: .35em; }
.rechtstext a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rechtstext address { font-style: normal; color: var(--tinte); line-height: 1.7; }
.rechtstext .luecke { background: #FFE7A8; color: #5A4300; padding: 1px 6px; border-radius: 2px; font-weight: 600; }

/* ---------- Fehlerseite ---------- */
.fehlerseite {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--kopf-h) + 40px);
  padding-bottom: 60px;
  overflow: hidden;
}
.fehlerseite .zahl { font-family: var(--f-mono); color: var(--nebel); }
.fehlerseite__grafik { position: relative; margin-top: 40px; height: 180px; }
.fehlerseite__grafik svg, .fehlerseite__grafik canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Fuß: Typenschild ---------- */
.fuss {
  position: relative;
  background: #080C12;
  border-top: 1px solid var(--linie);
  padding-top: clamp(56px, 6vw, 90px);
  padding-bottom: 28px;
}
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.schild {
  position: relative;
  color: #1B2531;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px, transparent 2px 3px),
    linear-gradient(115deg, #D6DBE0 0%, #EEF1F3 22%, #C5CCD3 48%, #E2E6EA 70%, #BFC7CF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 24px 50px -24px rgba(0, 0, 0, 0.8);
}
.schild::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(27, 37, 49, 0.28);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.schild__niete {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #B4BCC5 40%, #6A737D 80%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .45), inset 0 -1px 1px rgba(0, 0, 0, .25);
}
.schild__niete:nth-child(1) { left: 18px; top: 18px; }
.schild__niete:nth-child(2) { right: 18px; top: 18px; }
.schild__niete:nth-child(3) { left: 18px; bottom: 18px; }
.schild__niete:nth-child(4) { right: 18px; bottom: 18px; }
.schild__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 10px 10px 20px;
  border-bottom: 1px solid rgba(27, 37, 49, 0.22);
}
.schild__kopf img { width: clamp(170px, 18vw, 230px); height: auto; }
.schild__typ { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #3E4A58; text-align: right; line-height: 1.7; }
.schild__daten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 8px 10px 4px;
}
.schild__daten div { padding: 11px 0; border-bottom: 1px dashed rgba(27, 37, 49, 0.2); min-width: 0; }
.schild__daten div:nth-last-child(-n+2) { border-bottom: 0; }
.schild__daten dt { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #4E5A68; }
.schild__daten dd {
  margin: 3px 0 0;
  font-weight: 650;
  font-stretch: 104%;
  font-size: .98rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow-wrap: anywhere;
}
.schild__daten a:hover { color: var(--blau); }
.fuss__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.fuss__nav h2 { font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--nebel); margin-bottom: 14px; }
.fuss__nav ul { list-style: none; display: grid; gap: 4px; }
.fuss__nav a { display: inline-block; padding: 5px 0; color: rgba(234, 240, 246, .86); transition: color .2s; }
.fuss__nav a:hover { color: var(--himmel-hell); }
.fuss__cta { margin-top: 36px; display: grid; gap: 14px; }
.fuss__cta p { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; font-stretch: 118%; letter-spacing: -.025em; line-height: 1.05; }
.fuss__basis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  color: var(--nebel);
}
.fuss__basis nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss__basis a:hover { color: var(--frost); }
@media (max-width: 900px) {
  .fuss__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .schild__daten { grid-template-columns: minmax(0, 1fr); }
  .schild__daten div:nth-last-child(2) { border-bottom: 1px dashed rgba(27, 37, 49, 0.2); }
  .schild__typ { text-align: left; }
}

/* ---------- Schnellleiste (Handy) ---------- */
.schnell {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 1px;
  background: var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
}
.schnell.ist-sichtbar { transform: none; }
.schnell a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 58px;
  background: rgba(12, 18, 26, 0.97);
  font-weight: 620;
  font-size: .92rem;
  font-stretch: 104%;
}
.schnell a svg { width: 18px; height: 18px; }
.schnell a.haupt { background: var(--blau); }
@media (max-width: 760px) {
  .schnell { display: grid; }
  .fuss { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Einblenden beim Scrollen ---------- */
.js .wartet { opacity: 0; transform: translateY(26px); }
.js .zeigt { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); }

/* ---------- Seitenwechsel ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 300ms var(--ease-io) both vt-alt; }
::view-transition-new(root) { animation: 620ms var(--ease-io) both vt-neu; }
@keyframes vt-alt { to { opacity: 0.35; } }
@keyframes vt-neu {
  from { clip-path: polygon(0 0, 0 0, calc(-46.51vh) 100%, calc(-46.51vh) 100%); }
  to { clip-path: polygon(0 0, calc(100% + 46.51vh) 0, 100% 100%, calc(-46.51vh) 100%); }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .naht { height: auto; }
  .naht__buehne { position: relative; height: auto; padding-block: 120px 80px; }
  .naht__schritt { opacity: 1; }
  .naht__schritt p { display: block !important; }
  .naht__hinweis { display: none; }
  .js .wartet { opacity: 1; transform: none; }
}

.check .feld__fehler:not(:empty) { display: block; margin-top: 6px; }

/* Schlichter Seitenkopf mit großem Zeichen */
.seitenkopf--ohne-bild { overflow: hidden; }
.seitenkopf--ohne-bild::before {
  content: "";
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  bottom: -2px;
  width: clamp(110px, 18vw, 250px);
  aspect-ratio: 349 / 307;
  background: var(--zeichen-dunkel) no-repeat center bottom / contain;
  opacity: 0.9;
  pointer-events: none;
}
.seitenkopf--ohne-bild .wrap { position: relative; z-index: 1; }
.seitenkopf--ohne-bild .held__unten { max-width: 44rem; }
@media (max-width: 760px) {
  .seitenkopf--ohne-bild::before { width: 110px; opacity: .5; top: calc(var(--kopf-h) + 18px); bottom: auto; }
}
.kopfzeile--knapp { margin-bottom: 20px; }
.kopfzeile--knapp .eyebrow { margin-bottom: 0; }

.kopf-weg .anker { top: env(safe-area-inset-top, 0px); }
@media (max-width: 760px) {
  h1, h2, .h2, .display { hyphens: auto; -webkit-hyphens: auto; }
}

/* ==========================================================================
   Ergänzungen 10/2026: Einsatzorte, Referenzen, Karriere
   ========================================================================== */

/* ---------- Einsatzorte ---------- */
.orte { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; max-width: 34rem; }
.orte li {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  color: var(--frost);
}
.karte__route { stroke-width: 1.4; stroke-dasharray: 2 6; animation-duration: 1.6s; }
.karte__route--kalt { animation-duration: 2s; }
.karte__stadt { font-family: var(--f-text); font-weight: 650; font-stretch: 108%; font-size: 13px; fill: var(--frost); paint-order: stroke; stroke: var(--nacht); stroke-width: 3.5px; stroke-linejoin: round; }
.karte__name { paint-order: stroke; stroke: var(--nacht); stroke-width: 4px; stroke-linejoin: round; }
.dunkel-2 .karte__stadt, .dunkel-2 .karte__name { stroke: var(--nacht-2); }
.karte__ort { transition: opacity .5s var(--ease) calc(.4s + var(--i) * 90ms); }
.karte.wartet .karte__ort { opacity: 0; transition: none; }
.karte__route { opacity: .9; }
.karte__zusatz { paint-order: stroke; stroke: var(--nacht); stroke-width: 3px; }
.dunkel-2 .karte__zusatz { stroke: var(--nacht-2); }
@media (max-width: 520px) { .karte__stadt { font-size: 14.5px; } }

/* ---------- Kopfzeile mit Link + Steuerung ---------- */
.kopfzeile__rechts { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; }
.galerie a.bildrahmen { display: block; }

/* ---------- Referenzen: Werkschau ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 6px; }
.filter button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nebel);
  transition: color .2s, border-color .2s, background-color .2s;
}
.filter button small { font-size: inherit; opacity: .6; }
.filter button:hover { color: var(--frost); border-color: rgba(169, 198, 232, .5); }
.filter button[aria-pressed="true"] { color: #fff; border-color: var(--himmel); background: rgba(60, 97, 152, .4); }
.werkschau { columns: 3; column-gap: 16px; margin-top: clamp(24px, 3vw, 40px); }
.werkschau figure { margin: 0 0 22px; break-inside: avoid; display: grid; gap: 10px; }
.werkschau figure[hidden] { display: none; }
.werkschau a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--stahl);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 47px, 100% 100%, 0 100%);
  cursor: zoom-in;
}
.werkschau img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease), filter .4s; }
.werkschau a:hover img, .werkschau a:focus-visible img { transform: scale(1.04); }
.werkschau a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--anlauf);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.werkschau a:hover::after, .werkschau a:focus-visible::after { transform: scaleX(1); }
.werkschau figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  font-size: .9rem;
  color: var(--nebel);
}
.werkschau figcaption strong { color: var(--frost); font-weight: 620; font-stretch: 106%; }
.werkschau figcaption span:last-child { grid-column: 2; }
.werkschau__nr { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; color: var(--himmel); grid-row: span 2; padding-top: 3px; }
@media (max-width: 1000px) { .werkschau { columns: 2; } }
@media (max-width: 520px) {
  .werkschau { column-gap: 10px; }
  .werkschau figure { margin-bottom: 16px; }
  .werkschau figcaption { grid-template-columns: minmax(0, 1fr); font-size: .82rem; }
  .werkschau__nr { grid-row: auto; }
  .werkschau figcaption span:last-child { grid-column: 1; }
}

.lupe {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: clamp(14px, 3vw, 40px);
  border: 0;
  background: rgba(6, 9, 14, .96);
  color: var(--frost);
}
.lupe[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(6px, 2vw, 24px); }
.lupe::backdrop { background: rgba(6, 9, 14, .9); }
.lupe figure { margin: 0; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; justify-items: center; }
.lupe img { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; align-self: center; }
.lupe figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; color: var(--nebel); text-align: center; }
.lupe figcaption strong { color: var(--frost); font-weight: 600; }
.lupe figcaption span:first-child { color: var(--himmel); }
.lupe__pfeil, .lupe__zu {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  background: rgba(10, 15, 22, .6);
  transition: border-color .2s, background-color .2s;
}
.lupe__pfeil:hover, .lupe__zu:hover { border-color: var(--frost); background: rgba(255, 255, 255, .06); }
.lupe__pfeil svg { width: 20px; height: 20px; }
.lupe__zu { position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); z-index: 2; }
.lupe__zu i { position: absolute; width: 20px; height: 2px; background: currentColor; transform: rotate(45deg); }
.lupe__zu i + i { transform: rotate(-45deg); }
@media (max-width: 700px) {
  .lupe[open] { grid-template-columns: minmax(0, 1fr); padding-bottom: 84px; }
  .lupe__pfeil { position: absolute; bottom: 18px; }
  .lupe__pfeil--links { left: 18px; }
  .lupe__pfeil--rechts { right: 18px; }
}

/* ---------- Karriere: Stellen ---------- */
.stellen { border-top: 1px solid var(--tinte); }
.stelle { border-bottom: 1px solid var(--linie-hell); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.stelle summary {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px 20px;
  padding: clamp(18px, 2.4vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.stelle summary::-webkit-details-marker { display: none; }
.stelle summary::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--anlauf);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.stelle summary:hover::after, .stelle[open] summary::after { transform: scaleX(1); }
.stelle summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 4px; }
.stelle__nr { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; color: var(--blau); }
.stelle__titel {
  font-weight: 760;
  font-stretch: 112%;
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  transition: transform .45s var(--ease);
}
.stelle__titel small { font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; color: var(--tinte-2); vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.stelle summary:hover .stelle__titel { transform: translateX(6px); }
.stelle__ort { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); text-align: right; }
.stelle__plus { position: relative; width: 28px; height: 28px; }
.stelle__plus::before, .stelle__plus::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 13px; height: 2px;
  background: var(--tinte);
  transition: transform .4s var(--ease);
}
.stelle__plus::after { transform: rotate(90deg); }
.stelle[open] .stelle__plus::after { transform: rotate(0deg); }
.stelle__inhalt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px clamp(24px, 4vw, 64px);
  padding: 6px 0 clamp(28px, 3.4vw, 44px) calc(3.2rem + 20px);
}
.stelle__kurz { grid-column: 1 / -1; max-width: 44rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.5; font-weight: 500; }
.stelle__inhalt h3.label { color: var(--blau); }
.stelle__inhalt .haken { margin-top: 12px; }
.stelle__inhalt .haken li { font-size: .98rem; line-height: 1.45; }
.stelle__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.stelle::details-content { opacity: 0; transition: opacity .45s var(--ease), content-visibility .45s allow-discrete; }
.stelle[open]::details-content { opacity: 1; }
@media (max-width: 760px) {
  .stelle summary { grid-template-columns: 2rem minmax(0, 1fr) 28px; column-gap: 12px; }
  .stelle__ort { grid-column: 2; grid-row: 2; text-align: left; }
  .stelle__plus { grid-column: 3; grid-row: 1 / span 2; }
  .stelle__inhalt { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .stelle__fuss .btn { width: 100%; justify-content: space-between; }
}

.bieten { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.bieten li { padding: clamp(20px, 2.4vw, 32px); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); display: grid; gap: 10px; align-content: start; }
.bieten__nr { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; color: var(--himmel); }
.bieten p { color: var(--nebel); line-height: 1.5; }
@media (max-width: 900px) { .bieten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bieten { grid-template-columns: minmax(0, 1fr); } .bieten li { padding: 18px 16px; } }
#bieten, #bewerbung, #werkschau { scroll-margin-top: calc(var(--kopf-h) + 8px); }


/* ==========================================================================
   Helles Grundthema – dunkle Akzentflächen
   ========================================================================== */
.dunkel {
  color-scheme: dark;
  --nacht: #0A0F16; --nacht-2: #0C121A; --stahl: #121A24; --stahl-2: #182331;
  --linie: rgba(160, 188, 222, 0.13); --linie-stark: rgba(160, 188, 222, 0.26);
  --frost: #EAF0F6; --nebel: #9BAABB; --himmel-hell: #A9C6E8;
  --glut-hell: #FFB54A; --gruen: #5AD49A; --fehler: #FF9C8F;
  --zeichen-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 349 307'%3E%3Cpath fill='%234E7FC4' d='M0 307h32L174.8 0h-32z'/%3E%3Cpath fill='%238FB2DC' d='M79 307h32L253.8 0h-32z'/%3E%3Cpath fill='%23E9EEF4' d='M158 307h48L348.8 0h-48z'/%3E%3C/svg%3E");
  background-color: var(--nacht);
  color: var(--frost);
}
.naht.dunkel { background-color: #0B1118; }
.fuss.dunkel { background-color: #080C12; }

/* Kopfzeile */
.kopf.ist-fest { background: rgba(246, 247, 248, 0.9); }
.kopf__nav a { color: var(--nebel); }
.btn--linie:hover { --bg: rgba(19, 28, 39, 0.05); box-shadow: inset 0 0 0 1px var(--frost); }
.dunkel .btn--linie:hover { --bg: rgba(234, 240, 246, 0.06); box-shadow: inset 0 0 0 1px rgba(234, 240, 246, 0.6); }
.btn--hell { --bg: #131C27; --fg: #fff; }
.galerie-steuerung button:hover, .kontaktkarte .mini a:hover { background: rgba(19, 28, 39, .05); }

/* Held + Seitenköpfe: Titel steht unter dem Bildband statt darauf */
.held {
  --band-h: clamp(280px, 47svh, 580px);
  background:
    radial-gradient(60% 55% at 70% 28%, rgba(118, 152, 193, 0.2), transparent 70%),
    radial-gradient(50% 50% at 62% 34%, rgba(255, 128, 48, calc(var(--flimmer, 0) * 0.1)), transparent 70%),
    var(--nacht);
}
.held::after, .seitenkopf::after { display: none; }
.held__titel { text-shadow: none; margin-top: calc(var(--fs) * 0.22); }
.seitenkopf { background: radial-gradient(60% 60% at 72% 20%, rgba(118, 152, 193, 0.18), transparent 70%), var(--nacht); }
.seitenkopf__titel { margin-top: calc(var(--fs) * 0.26); }
.seitenkopf--ohne-bild .seitenkopf__titel { margin-top: clamp(40px, 8vw, 110px); }
.fenster img { filter: contrast(1.04) saturate(0.96); }
.fenster::after {
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 170, 90, calc(var(--flimmer, 0) * 0.35)), transparent 38%),
    linear-gradient(180deg, rgba(10, 15, 22, 0.28) 0%, rgba(10, 15, 22, 0) 30%);
}
.naht-zeile__anriss { -webkit-text-stroke: 1px rgba(60, 97, 152, 0.35); }
@media (max-width: 760px) {
  .held { --band-h: clamp(210px, 32svh, 320px); }
  .held__titel { margin-top: calc(var(--fs) * 0.34); }
  .seitenkopf__titel { margin-top: calc(var(--fs) * 0.4); }
}

/* Karte */
.karte__land { fill: url(#punktraster); stroke: rgba(19, 28, 39, 0.3); }
.karte #punktraster circle { fill: #3C6198; fill-opacity: .42; }
.karte__ort > circle:first-child { stroke: #131C27; }
.karte__route { stroke: #F07A1A; filter: none; }
.karte__route--kalt { stroke: #3C6198; filter: none; }
.karte__puls { fill: #E05A0A; filter: drop-shadow(0 0 4px rgba(255, 140, 50, .8)); }
.karte__sitz { fill: #F07A1A; }

/* Formulare */
.feld input, .feld textarea, .feld select { background: #FFFFFF; }
.feld input::placeholder, .feld textarea::placeholder { color: rgba(74, 88, 104, 0.6); }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: rgba(60, 97, 152, 0.6); }
.feld input:focus, .feld textarea:focus, .feld select:focus { background-color: #FFFFFF; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(60, 97, 152, 0.18); }
.chip span { background: #FFFFFF; }
.chip:hover span { border-color: var(--blau); }
.chip input:checked + span, .filter button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.chip input:checked + span::before { background: #FFB54A; border-color: #FFB54A; }
.check input { background: #FFFFFF; }
.meldung { background: #FFFFFF; }
.filter button { background: #FFFFFF; }
.filter button:hover { border-color: var(--blau); }
.orte li { background: #FFFFFF; }
.kontaktkarte { box-shadow: 0 18px 40px -28px rgba(19, 28, 39, .35); }
.bieten { background: #FFFFFF; }
.status.ist-zu::before { background: #D9822B; }

/* Dunkle Flächen */
.schnell.dunkel { background-color: rgba(160, 188, 222, 0.2); }
.lupe.dunkel { background-color: rgba(6, 9, 14, .96); }
.abschluss.dunkel { background: radial-gradient(70% 90% at 85% 0%, rgba(60, 97, 152, 0.28), transparent 70%), #0A0F16; }