/* ============ Nordic Sanierung — Wasserschaden-Notdienst ============ */
:root {
  --ink: #0e1b26;        /* fast-schwarzes Tiefblau */
  --deep: #0f3a5c;       /* Wasser dunkel */
  --water: #1173b8;      /* Wasser hell */
  --ice: #f0f1f2;        /* helles Grau */
  --alarm: #e8542f;      /* Notruf-Orange */
  --alarm-dark: #c9401f;
  --muted: #5b6d7e;      /* gedaempfter Fliesstext (war nie definiert, wurde aber genutzt) */
  --pad: clamp(20px, 5vw, 72px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Instrument Sans", system-ui, sans-serif; color: var(--ink); background: #fff; line-height: 1.55; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; }
em.serif, .hero h1 em { font-family: "Lora", serif; font-style: italic; font-weight: 500; }
.lbl { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #000; margin-bottom: 14px; }
.lbl-light { color: #fff; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; gap: 30px;
  padding: 14px var(--pad); color: #fff; transition: background .3s, color .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(14,27,38,.08); }
.logo { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.logo span { font-weight: 400; }
.nav-links { display: flex; gap: 26px; margin: 0 auto; }
.nav-links a { color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; opacity: .85; }
.nav-links a:hover { opacity: 1; }
.call-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 100px;
  background: var(--alarm); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(232,84,47,.35); }
.call-pill:hover { background: var(--alarm-dark); }
.call-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(120% 130% at 78% -10%, #17516f 0%, var(--deep) 42%, var(--ink) 100%); color: #fff; }
/* Vollbild-Einsatzfoto (fluid.glass-Muster: grosse Fotografie traegt den Hero) */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 62% center; z-index: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,22,34,.88) 0%, rgba(10,22,34,.62) 46%, rgba(10,22,34,.18) 100%),
    linear-gradient(rgba(10,22,34,.35), transparent 30%); }
.hero-inner { position: relative; z-index: 3; padding: 120px var(--pad) 150px; max-width: 74rem;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 24px; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; position: relative; }
.pulse-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #4ade80; opacity: .7; animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
.hero h1 { font-size: clamp(3rem, 8.6vw, 7.4rem); font-weight: 700; letter-spacing: -.03em; line-height: .98; }
.hero h1 em { color: #fff; }
.hero-sub { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 44ch; color: rgba(255,255,255,.88); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.btn-alarm { display: inline-block; padding: 17px 30px; border-radius: 100px; background: var(--alarm); color: #fff;
  text-decoration: none; font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem);
  box-shadow: 0 10px 40px rgba(232,84,47,.45); transition: transform .15s, background .2s; }
.btn-alarm:hover { background: var(--alarm-dark); transform: translateY(-2px); }

/* Wiederkehrender Handlungsaufruf am Ende einer Sektion — gleicher Takt wie im Vorbild:
   nach jedem groesseren Block steht die Nummer wieder da, damit niemand zurueckscrollen muss. */
.sec-cta { text-align: center; margin-top: clamp(36px, 4.6vw, 62px); }
.btn-ghost { display: inline-block; padding: 17px 26px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.35);
  color: #fff; text-decoration: none; font-weight: 600;
  background: rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.btn-ghost::before { content: "↳ "; opacity: .7; }
/* Trust-Badges als Frosted-Glass-Chips (fluid.glass-Muster — Glas passt zu Wasser) */
.hero-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 54px; list-style: none; }
.hero-badges li { font-size: 14px; color: rgba(255,255,255,.8); max-width: 17ch;
  padding: 16px 20px; border-radius: 16px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 34px rgba(4,12,20,.25); }
.hero-badges b { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; color: #fff; margin-bottom: 4px; }
/* Wellen unten im Hero */
.wave { position: absolute; inset: auto 0 -2px 0; }
.wave svg { display: block; width: 100%; height: clamp(60px, 9vw, 120px); }
.wave .w1 { fill: rgba(17,115,184,.35); animation: drift 9s ease-in-out infinite alternate; }
.wave .w2 { fill: var(--ice); animation: drift 7s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }

/* ---------- Statement ---------- */
/* Track gibt die Scrollstrecke; der Pin haelt den Satz fest, bis die Flut-Szene darueberschiebt */
.statement-sec { height: 220vh; height: 220svh; position: relative; z-index: 1; }
.statement-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center;
  padding: 0 var(--pad); background: #000; overflow: hidden; }
/* Wand-Video als Buehne. Die Wiedergabeposition haengt am Scroll-Fortschritt. */
.stmt-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none; }
/* Die Szene ist hell, deshalb nur so viel Abdunklung wie der weisse Satz braucht:
   ein Band in der Texthoehe, oben und unten bleibt die Wand sichtbar. */
.stmt-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.26) 0%, rgba(0,0,0,.54) 30%,
    rgba(0,0,0,.54) 66%, rgba(0,0,0,.2) 100%); }
.statement { position: relative; z-index: 2; color: #fff;
  max-width: 52rem; margin: 0 auto; font-size: clamp(1.5rem, 3.1vw, 2.5rem); font-weight: 600; letter-spacing: -0.015em; }
.statement .w { opacity: .22; transition: opacity .35s; }
.statement .w.on { opacity: 1; }

/* ---------- Leistungen ---------- */
.services { padding: 8vh var(--pad) 14vh; }
.sec-head { max-width: 44rem; margin-bottom: 60px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.svc { background: #fff; border-radius: 18px; padding: 34px 30px; box-shadow: 0 2px 20px rgba(14,27,38,.05);
  border-top: 3px solid var(--water); }
.svc-ico { width: 46px; height: 46px; color: #000; margin-bottom: 20px; }
.svc-ico svg { width: 100%; height: 100%; }
.svc h3 { font-size: 1.2rem; margin-bottom: 10px; }
.svc p { font-size: 15px; color: #45586a; }

/* ---------- Ablauf: Schritt-Bloecke nach dem Vorbild ----------
   Links die Schrittnummer mit Erklaerung, rechts die Einzelmassnahmen als Karten
   mit farbigem Fuss. Die Farben laufen mit dem Band aus der Gewerke-Sektion mit. */
.process { background: #fff; padding: 12vh var(--pad);
  font-family: "Montserrat", system-ui, sans-serif; }
.proc-inner { max-width: 1320px; margin: 0 auto; }
.proc-head { max-width: 1100px; margin-bottom: clamp(52px, 6vw, 78px); }
.proc-eyebrow { display: block; font-size: 14px; font-weight: 700; line-height: 21px;
  color: var(--alarm); margin-bottom: 10px; }
.proc-head h2 { font-size: 39px; font-weight: 700; line-height: 50px; letter-spacing: 0; margin: 0; }
.proc-note { margin-top: 18px; font-size: 14px; line-height: 21px; color: #5b6d7e; max-width: 62ch; }

.pstep-row { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 64px); align-items: start; margin-bottom: clamp(54px, 6.5vw, 92px); }
.pstep-row:last-child { margin-bottom: 0; }
.pstep-no { display: block; font-size: clamp(34px, 4.4vw, 50px); font-weight: 700;
  line-height: 1.08; letter-spacing: -.01em; margin-bottom: 14px; }
.pstep-title { font-size: 17px; font-weight: 700; line-height: 24px; margin: 0 0 8px; }
.pstep-text { font-size: 16px; line-height: 25px; color: #3c4c59; margin: 0; }
.proc-cta { display: inline-block; margin-top: 22px; background: var(--alarm); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 100px;
  box-shadow: 0 10px 30px rgba(232,84,47,.35); transition: background .2s, transform .15s; }
.proc-cta:hover { background: var(--alarm-dark); transform: translateY(-2px); }

.pstep-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.pcard { display: flex; flex-direction: column; background: #fff; border-radius: 4px;
  border: 1px solid rgba(14,27,38,.09); box-shadow: 0 10px 30px rgba(14,27,38,.07); overflow: hidden; }
.pcard-body { flex: 1; padding: 24px 22px 26px; }
.pcard h4 { font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: 0; margin: 0 0 8px; }
.pcard p { font-size: 14.5px; line-height: 21px; color: #45586a; margin: 0; }
.pcard-bar { height: 10px; }

@media (max-width: 1080px) {
  .proc-head h2 { font-size: 30px; line-height: 39px; }
  .pstep-row { grid-template-columns: 1fr; gap: 26px; }
  .pstep-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .pstep-cards { grid-template-columns: 1fr; } }

/* ---------- Einsatz-Band: grosse Fotos mit Glas-Caption ---------- */
.einsatz { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 6vh var(--pad) 0; }
.ez-item { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16/10; }
.ez-item img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ez-item:hover img { transform: scale(1.04); }
.ez-caption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 16px 20px;
  border-radius: 14px; background: rgba(10,22,32,.5); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; }
.ez-caption .lbl { margin-bottom: 6px; }
.lbl-light { color: #fff; }
.ez-caption p { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); }
@media (max-width: 900px) { .einsatz { grid-template-columns: 1fr; } }

/* ---------- Zahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 12vh var(--pad); }
.stat { text-align: center; padding: 30px 16px; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #000; letter-spacing: -0.03em; }
.stat span { font-size: 14px; color: #5b6d7e; }

/* ---------- FAQ: schwarz, Antworten offen, wie beim Vorbild ---------- */
.faq { background: #000; color: #fff; padding: 12vh var(--pad);
  font-family: "Montserrat", system-ui, sans-serif; }
.faq-inner { max-width: 1100px; margin: 0 auto; }
.faq-eyebrow { text-align: center; font-size: 14px; line-height: 21px;
  color: rgba(255,255,255,.6); margin: 0 0 6px; }
.faq h2 { text-align: center; font-size: 39px; font-weight: 700; line-height: 50px;
  letter-spacing: 0; color: #fff; margin: 0 0 clamp(38px, 4.5vw, 56px); }
.faq-list { max-width: 100%; }
.faq-item { margin-bottom: 26px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { font-size: 15px; font-weight: 700; line-height: 22px; letter-spacing: 0;
  color: #fff; margin: 0 0 4px; }
.faq-item p { font-size: 15px; line-height: 23px; color: rgba(255,255,255,.72); margin: 0; }
@media (max-width: 960px) { .faq h2 { font-size: 30px; line-height: 39px; } }

/* ---------- CTA / Footer ---------- */
.cta { background: #000; color: #fff; padding: 11vh var(--pad) 0; overflow: hidden; }
.cta-inner { text-align: center; max-width: 60rem; margin: 0 auto; }
.giant { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; }
.giant .fade { color: #fff; }
.cta .btn-lg { margin-top: 38px; font-size: clamp(1.1rem, 1.8vw, 1.5rem); padding: 20px 40px; }
.cta-mail { margin-top: 22px; color: rgba(255,255,255,.6); font-size: 15px; }
.cta-mail a { color: #fff; }

/* ---------- Kontaktformular im schwarzen Abschluss ---------- */
.kform { max-width: 680px; margin: 30px auto 0; text-align: left; }
.kf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kf { display: block; margin-bottom: 14px; }
.kf > span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: rgba(255,255,255,.72); margin-bottom: 6px; }
.kf > span i { font-style: normal; color: var(--alarm); }
.kf input, .kf select, .kf textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 22px;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px; padding: 12px 14px; transition: border-color .15s, background .15s; }
.kf textarea { resize: vertical; min-height: 96px; }
.kf select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.kf select option { color: #000; background: #fff; }
.kf input::placeholder, .kf textarea::placeholder { color: rgba(255,255,255,.38); }
.kf input:focus, .kf select:focus, .kf textarea:focus {
  outline: none; border-color: var(--alarm); background: rgba(255,255,255,.12); }
.kf input.kf-bad, .kf textarea.kf-bad { border-color: var(--alarm); }

/* Der Honigtopf darf nicht per display:none weg sein, sonst ueberspringen ihn viele Bots */
.kf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kf-send { display: block; width: 100%; margin-top: 6px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--alarm); border: 0; border-radius: 100px; padding: 17px 30px;
  transition: background .2s, transform .15s; }
.kf-send:hover:not(:disabled) { background: var(--alarm-dark); transform: translateY(-2px); }
.kf-send:disabled { opacity: .6; cursor: default; transform: none; }
.kf-note { font-size: 12px; line-height: 19px; color: rgba(255,255,255,.5); margin: 14px 0 0; }
.kf-note i { font-style: normal; color: var(--alarm); }
.kf-note a { color: rgba(255,255,255,.8); }
.kf-status { font-size: 15px; line-height: 22px; font-weight: 700; margin: 14px 0 0; min-height: 22px; }
.kf-status.ok { color: #6ee7b7; }
.kf-status.bad { color: #ffb4a2; }

@media (max-width: 620px) { .kf-row { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .kf-send { transition: none; } }
.foot-wordmark { font-size: clamp(3.4rem, 11.5vw, 11rem); font-weight: 700; letter-spacing: -0.04em;
  text-align: center; color: rgba(255,255,255,.07); margin-top: 10vh; white-space: nowrap; }
/* Das schwebende Dock liegt 22 px ueber dem Rand und ist 64 px hoch. Ohne diese
   Reserve verschwindet die letzte Zeile darunter — auf jeder Fensterbreite. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding: 26px var(--pad) 120px;
  font-size: 13px; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.12); }
.demo-note { opacity: .7; }

/* ---------- Reveals ---------- */
.io { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s; }
.io-on { opacity: 1; transform: none; }

/* ---------- Schwebendes Glas-Dock (fluid.glass-Muster) ---------- */
.dock a { text-decoration: none; }
.dock { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 90px); z-index: 90;
  display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 20px; border-radius: 100px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(32px) saturate(1.3); -webkit-backdrop-filter: blur(32px) saturate(1.3);
  box-shadow: 0 18px 50px rgba(4,12,20,.45); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s; pointer-events: none; }
.dock.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.dock-brand { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.01em; margin-right: 8px; white-space: nowrap; }
.dock-brand span { font-weight: 400; color: #fff; }
.dock-links { display: flex; }
.dock-links a { padding: 10px 14px; border-radius: 100px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75);
  transition: background .25s, color .25s; white-space: nowrap; }
.dock-links a:hover { color: #fff; background: rgba(255,255,255,.1); }
.dock-links a.on { color: #fff; background: rgba(255,255,255,.16); }
.dock-call { padding: 12px 20px; border-radius: 100px; background: var(--alarm); color: #fff;
  font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 20px rgba(232,84,47,.4); }
.dock-call:hover { background: var(--alarm-dark); }
@media (max-width: 640px) {
  .dock { left: 12px; right: 12px; transform: translateY(90px); width: auto; padding-left: 16px; }
  .dock.on { transform: translateY(0); }
  .dock-links { display: none; }
  .dock-brand { margin-right: auto; }
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ---------- fluid.glass-Bausteine ---------- */
/* Mono-Micro-Label mit Zeilensprung-Pfeil */
.mono-mini { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: #000; margin-bottom: 14px; }
.panel .mono-mini, .lbl-light.mono-mini { color: #fff; }

/* Vollbild-Leistungs-Panels: Foto traegt, Glas-Karte erklaert */
.panel { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(10,20,30,.12), rgba(10,20,30,.05) 55%, rgba(10,20,30,.45)); }
.panel-card { position: relative; z-index: 2; margin: 0 0 7vh var(--pad); max-width: 34rem;
  padding: 30px 34px; border-radius: 20px; color: #fff;
  background: rgba(10,22,32,.45); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.panel-card h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 12px; }
.panel-card p { font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.9); }

/* Kompakt-Grid der restlichen Leistungen */
.svc-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Mono-Spec-Leiste (Spezifikations-Tabelle) */
.specstrip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(15,25,35,.15);
  border-bottom: 1px solid rgba(15,25,35,.15); margin: 10vh var(--pad); }
.specstrip .spec { padding: 26px 20px; border-left: 1px solid rgba(15,25,35,.12); }
.specstrip .spec:first-child { border-left: 0; }
.specstrip .spec span { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.specstrip .spec b { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 700; color: #000;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .specstrip { grid-template-columns: 1fr 1fr; margin: 8vh var(--pad); }
  .specstrip .spec:nth-child(odd) { border-left: 0; }
  .svc-grid-3 { grid-template-columns: 1fr; }
  .panel-card { margin: 0 16px 5vh; padding: 24px 22px; }
}

/* ============ NRG-Patterns · Phase 1 ============ */
/* Headline-Settle (NRG phase-title-settle): Titel setzt sich, em faerbt nach */
@keyframes settleTitle {
  from { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(6px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes emFade      { to { color: #000; } }
@keyframes emFadeLight { to { color: #fff; } }
.h2-settle { opacity: 0; }
.h2-settle.on { animation: settleTitle .9s cubic-bezier(.22,.75,.25,1) both; }
.h2-settle.on em.serif { animation: emFade .7s ease .5s both; }
.cta .h2-settle.on em.serif { animation-name: emFadeLight; }
@media (prefers-reduced-motion: reduce) {
  .h2-settle { opacity: 1; }
  .h2-settle.on, .h2-settle.on em.serif { animation: none; }
}

/* Stat-Karten (NRG-Ergebnis-Karten, Cyan→Alarm-Akzent adaptiert) */
.specstrip { border-top: 0; border-bottom: 0; gap: 18px; }
.specstrip .spec { background: #fff; border-radius: 16px; border-left: 0; border-top: 3px solid var(--alarm);
  box-shadow: 0 10px 30px rgba(14,27,38,.08); padding: 26px 22px; }
.specstrip .spec:nth-child(odd) { border-left: 0; }

/* Nav-Kontext: ueber dunklen Sektionen (B2B, Footer) glasig-dunkel statt weiss */
.nav.scrolled.nav-dark { background: rgba(10,22,32,.55); color: #fff;
  box-shadow: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* ============ NRG-Patterns · Phase 2 ============ */
.mono-mini.light { color: #fff; }

/* Kapitel-Liste (topicScrollList): sticky Medienfenster + wandernde Textbloecke */
.chapters { background: var(--ice); padding: 10vh var(--pad) 4vh; }
.ch-grid { display: grid; grid-template-columns: minmax(300px, 44%) 1fr; gap: clamp(30px, 6vw, 90px);
  max-width: 82rem; margin: 0 auto; }
.ch-list { display: flex; flex-direction: column; gap: 24vh; padding: 8vh 0 26vh; }
.ch { max-width: 30rem; opacity: .22; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.ch.in { opacity: 1; transform: none; }
.ch-k { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--alarm); margin-bottom: 12px; }
.ch h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 12px; }
.ch p { color: #45586a; }
.ch-media { position: sticky; top: 13vh; height: 72vh; border-radius: 20px; overflow: hidden;
  align-self: start; box-shadow: 0 30px 80px rgba(14,27,38,.25); background: #000; }
.chm { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05);
  transition: opacity .55s, transform .85s cubic-bezier(.2,.7,.2,1); }
.chm.show { opacity: 1; transform: none; }
.chm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chm-count { position: absolute; right: 22px; bottom: 16px; z-index: 3; color: #fff; font-weight: 700;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.chm-count b { font-size: 2rem; }
.chm-count span { opacity: .6; margin-left: 4px; font-size: .95rem; }
@media (max-width: 900px) {
  .ch-grid { grid-template-columns: 1fr; gap: 0; }
  .ch-media { order: -1; top: 72px; height: 34vh; z-index: 5; border-radius: 14px; }
  .ch-list { gap: 9vh; padding: 5vh 0 8vh; }
}

/* Ergebnis-Fahrt (topicResults): gepinnte Szene, Karten fahren horizontal.
   Basis-Layout = statisches Karten-Grid. */
/* Schwarz nach dem Vorbild: reine Flaeche statt Farbverlauf, weisse Schrift, Montserrat. */
/* ============ NRG-Patterns · Phase 3 ============ */
/* Scroll-Sperre, solange ein Overlay offen ist (vom 60-Sekunden-Modal genutzt) */
body.gate-lock { overflow: hidden; }

/* 60-Sekunden-Modal: parkt unter dem Viewport, slidet hoch (NRG videoPlayer) */
.vmodal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center;
  background: rgba(8,16,24,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.vmodal.open { opacity: 1; visibility: visible; }
.vm-frame { position: relative; width: min(46rem, 92vw); max-height: 88vh; overflow: auto;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: clamp(26px, 4vw, 44px);
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  transform: translateY(60px); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.vmodal.open .vm-frame { transform: none; }
.vm-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
  font-size: 15px; cursor: pointer; }
.vm-close:hover { background: rgba(255,255,255,.18); }
.vm-frame h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: 4px 0 22px; }
.vm-steps { list-style: none; counter-reset: vm; display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.vm-steps li { counter-increment: vm; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.vmodal.open .vm-steps li { opacity: 1; transform: none; }
.vmodal.open .vm-steps li:nth-child(1) { transition-delay: .10s; }
.vmodal.open .vm-steps li:nth-child(2) { transition-delay: .18s; }
.vmodal.open .vm-steps li:nth-child(3) { transition-delay: .26s; }
.vmodal.open .vm-steps li:nth-child(4) { transition-delay: .34s; }
.vmodal.open .vm-steps li:nth-child(5) { transition-delay: .42s; }
.vm-steps li::before { content: counter(vm, decimal-leading-zero); grid-row: 1 / span 2;
  font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--alarm);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(232,84,47,.14); border: 1px solid rgba(232,84,47,.45); }
.vm-steps b { font-size: 1.02rem; }
.vm-steps span { font-size: 14px; color: rgba(255,255,255,.72); }

/* Play-Chip im Hero */
.hero-play { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 20px 12px 12px;
  border-radius: 100px; cursor: pointer; color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 600;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .25s, border-color .25s; }
.hero-play:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.hero-play i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--alarm); font-style: normal; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .vmodal, .vm-frame, .vm-steps li { transition: none; }
}

/* ============================================================
   VSL-HERO — Layout nach den Messwerten der Referenz-Seite
   (Playwright-Messung 09.09.2026, 1600px Viewport):
   Container 1100 · Grid 540/540 gap 20 · Montserrat
   Eyebrow 14/700 uppercase mb10 · H1 39/700 lh50 mb8
   Subline 20/700 lh26 max820 · Bullets 15/400 lh21 Abstand 59
   Video 540x304 16:9 shadow 1/1/20 · CTA 15/700 ls1 pad10/72 h60
   ============================================================ */
.vnav, .vhero { font-family: "Montserrat", system-ui, sans-serif; }

/* ---------- NAV: schwarzer Balken ---------- */
.vnav { position: relative; z-index: 20; background: #000; color: #fff; }
.vnav-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 30px; padding: 18px 20px; }
.vlogo { display: block; line-height: 0; text-decoration: none; }
.vlogo img { height: 34px; width: auto; display: block; }
.vlogo span { font-weight: 400; }
.vnav-links { display: flex; align-items: center; }
.vnav-links a { font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: 1px;
  color: #fff; text-decoration: none; padding: 0 14px; white-space: nowrap; }
.vnav-links a:hover { opacity: .75; }
.vnav-cta { font-weight: 700 !important; padding: 10px 28px !important;
  border: 1px solid #fff; border-radius: 2px; margin-left: 12px;
  box-shadow: 1px 1px 20px rgba(0,0,0,.3); transition: background .2s, color .2s; }
.vnav-cta:hover { background: #fff; color: #000; opacity: 1 !important; }

/* ---------- HERO ---------- */
/* Weiss ueber die volle Fensterbreite; das Padding zentriert den 1100er-Inhalt */
/* Der Text soll dicht unter der Kopfleiste sitzen. Im Vorbild gemessen: 23 px
   Luft in der breiten Ansicht, 32 px auf dem Handy. */
.vhero { max-width: none; margin: 0; background: #fff; color: #000; position: relative;
  padding: 21px max(20px, calc((100% - 1100px) / 2)) 60px; }

/* Rohrfuehrung im Hintergrund: nur Textur, keine Illustration. Die Wandung liegt bei
   7 % Deckung, der Kern ist reines Weiss — uebrig bleiben zwei haarfeine Linien. Zu den
   Raendern hin blendet die Ebene aus, damit sie unter dem Text nicht mitliest. */
.hero-pipes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 16%, transparent 32%, transparent 68%, #000 84% 100%);
  mask-image: linear-gradient(to right, #000 0 16%, transparent 32%, transparent 68%, #000 84% 100%); }
/* Echte Kupfertoene, die ganze Ebene dafuer sehr schwach gedeckt. So bleibt die
   Farbe erkennbar, ohne dass die Zeichnung vordraengt. */
.hero-pipes { opacity: .3; }
.kr-kante    { stroke: #6b3210; }
.kr-koerper  { stroke: #b4682c; }
.kr-schatten { stroke: #8a4718; }
.kr-licht    { stroke: #fbe3c6; }
.kr-schelle  { stroke: #7b868f; }
.kr-armatur  { stroke: #6b3210; }

/* ---------- Absperrventil im Hero (nur Handy) ----------
   Eine duenne Kupferleitung ueber die ganze Bildschirmbreite, mittig das Ventil.
   Das Rohr ist ein Farbverlauf statt einer Zeichnung: so laeuft es auf jedem
   Format randlos durch, ohne dass die Armatur verzerrt. */
.tap { display: none; }
@media (max-width: 700px) { .tap { display: block; margin: 20px 0 0; } }

.tap-btn { display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap-btn:focus-visible { outline: 2px solid var(--alarm); outline-offset: 6px; border-radius: 10px; }

/* Randlos: die Leiste tritt aus dem Seitenrand des Heros heraus */
.tap-leiste { position: relative; display: block; height: 76px;
  width: 100vw; margin-left: calc(50% - 50vw); }

/* Das Rohr: senkrechter Verlauf von dunkler Kante ueber Kupfer zum Lichtstreifen */
.tap-rohr { position: absolute; left: 0; right: 0; top: 33px; height: 12px;
  background: linear-gradient(to bottom,
    #5c2a0d 0%, #8a4718 16%, #b4682c 34%, #f0c79a 48%, #c0783c 62%, #8a4718 84%, #55260b 100%); }

/* Zwei Loetmuffen: etwas dicker als das Rohr */
.tap-muffe { position: absolute; top: 30px; height: 18px; width: 11px; border-radius: 2px;
  background: linear-gradient(to bottom,
    #5c2a0d 0%, #8a4718 16%, #b4682c 34%, #edbb87 48%, #b4682c 64%, #7e4015 86%, #55260b 100%); }
.tap-muffe-l { left: calc(50% - 132px); }
.tap-muffe-r { left: calc(50% + 74px); }

/* Tropfstelle sitzt unter der rechten Muffe, nicht unter dem Handrad */
.tap-leck { position: absolute; left: calc(50% + 77px); top: 45px; width: 6px; height: 26px; }
.tap-leck i { position: absolute; left: 0; top: 0; width: 6px; height: 8px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #6fb4e0; opacity: 0; transition: opacity .3s; }
.tap-leck i:nth-child(1) { animation: tropfen 1.6s linear infinite; }
.tap-leck i:nth-child(2) { animation: tropfen 1.6s linear .55s infinite; }
.tap-leck i:nth-child(3) { animation: tropfen 1.6s linear 1.1s infinite; }
@keyframes tropfen {
  0%   { opacity: 0;   transform: translateY(0) scale(.6); }
  18%  { opacity: .9;  transform: translateY(1px) scale(1); }
  78%  { opacity: .9;  transform: translateY(20px) scale(1); }
  100% { opacity: 0;   transform: translateY(24px) scale(.8); }
}
.tap-lache { position: absolute; left: calc(50% + 64px); top: 70px; width: 32px; height: 6px;
  border-radius: 50%; background: #6fb4e0; opacity: .5; transition: opacity .5s; }

/* Armatur, mittig auf dem Rohr */
.tap-ventil { position: absolute; left: 50%; top: 0; width: 56px; height: 60px;
  margin-left: -28px; display: block; }
.tv-koerper rect { fill: #b4682c; stroke: #5c2a0d; stroke-width: 1.6; }
.tv-koerper rect.tv-glanz { fill: #edbb87; stroke: none; }
.tv-rad { transform-box: fill-box; transform-origin: 50% 50%;
  transition: transform .8s cubic-bezier(.34, 1.3, .5, 1); }
.tv-ring { fill: none; stroke: var(--alarm); stroke-width: 3.4; }
.tv-speichen { fill: none; stroke: var(--alarm); stroke-width: 2.6; stroke-linecap: round; }
.tv-nabe { fill: #5c2a0d; }

/* Zugedreht */
.tap.zu .tv-rad { transform: rotate(270deg); }
.tap.zu .tap-leck i { animation: none; opacity: 0; }
.tap.zu .tap-lache { opacity: 0; }

.tap-hint { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--alarm); }
.tap-say { margin: 3px 0 0; font-size: 13px; line-height: 19px; color: #5a6570; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .tv-rad { transition: none; }
  .tap-leck i { animation: none; opacity: .9; }
  .tap-leck i:nth-child(2), .tap-leck i:nth-child(3) { opacity: 0; }
}

.vhero-head, .vhero-row, .vhero-proof { position: relative; z-index: 1; }
.vhero .details-link { position: relative; z-index: 1; }
.vhero-head { text-align: center; }
.veyebrow { font-size: 14px; font-weight: 700; line-height: 21px; text-transform: uppercase; margin-bottom: 10px; }
.vhero h1 { font-size: 39px; font-weight: 700; line-height: 50px; letter-spacing: normal; margin-bottom: 8px; color: #000; }
.vsubline { font-size: 20px; font-weight: 700; line-height: 26px; max-width: 820px; margin: 0 auto; }

/* Eine mittige Spalte: Video unter den Texten, CTA darunter */
.vhero-row { max-width: 760px; margin: 38px auto 0; }

/* Video 16:9 mit hartem Schatten */
.video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #d8dde2;
  overflow: hidden; box-shadow: 1px 1px 20px rgba(0,0,0,.6); }
.video-frame > video, .video-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px;
  justify-items: center; background: repeating-linear-gradient(135deg, #dfe4e9 0 14px, #d8dde2 14px 28px); }
.video-play { width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.72); color: #fff; font-size: 24px; line-height: 1; padding-left: 5px;
  transition: transform .2s, background .2s; }
.video-play:hover { background: #000; transform: scale(1.06); }
.video-hint { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #5a6570; }
.video-sound { position: absolute; top: 18px; right: 18px; z-index: 2; width: 56px; height: 56px;
  border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; display: grid; place-items: center; }
.video-sound svg { width: 26px; height: 26px; }
.video-caption { position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: 78%;
  background: rgba(0,0,0,.66); color: #fff; padding: 5px 10px; font-size: 14px; line-height: 20px; }

/* CTA — Alarm-Orange der Marke statt Referenz-Gelb */
.vcta { display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--alarm); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 1px;
  padding: 10px 72px; min-height: 60px; border-radius: 2px;
  box-shadow: 1px 1px 20px rgba(0,0,0,.3); margin: 26px auto 0; width: max-content; max-width: 100%;
  transition: background .2s, transform .15s; }
.vcta:hover { background: var(--alarm-dark); transform: translateY(-1px); }
.vtrust { font-size: 12px; font-style: italic; text-align: center; margin-top: 10px; color: #000; }

/* Kennzahlen-Zeile */
.vhero-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; }
.vproof { text-align: center; padding: 20px 12px; border: 1px solid #e2e7eb; border-top: 3px solid var(--alarm); }
.vproof b { display: block; font-size: 26px; font-weight: 700; line-height: 30px; color: #000;
  font-variant-numeric: tabular-nums; }
.vproof span { display: block; font-size: 13px; color: #5a6570; margin-top: 6px; }

/* Link/Trigger unter dem Hero (oeffnet das 60-Sekunden-Modal) */
.vhero .details-link { display: block; width: max-content; margin: 40px auto 0; cursor: pointer;
  border: 1px solid #c9d0d6; background: none; padding: 14px 28px; border-radius: 2px;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #5a6570; }
.vhero .details-link:hover { border-color: #000; color: #000; }

/* Responsive */
@media (max-width: 1140px) {
  .vhero-proof { grid-template-columns: 1fr 1fr; }
  .vnav-links a:not(.vnav-cta) { display: none; }
}
@media (max-width: 700px) {
  .vhero h1 { font-size: 28px; line-height: 36px; }
  .vsubline { font-size: 17px; line-height: 23px; }
  .vcta { padding: 10px 24px; }
  .vnav-inner { padding: 14px 16px; gap: 12px; }
  /* Der Hinweis-Button ist als max-content breiter als das Fenster — hier umbrechen lassen */
  .vhero .details-link { width: 100%; white-space: normal; text-align: center; }
  .vnav-cta { padding: 9px 14px !important; font-size: 12px !important; letter-spacing: .4px;
    margin-left: 0; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .vcta, .video-play, .vnav-cta { transition: none; } }

/* ============================================================
   NEUE ABSCHNITTE (09.09.2026) — Koordination als Kernbotschaft
   ============================================================ */

/* ---------- Gewerke-Kette: das Koordinationsproblem sichtbar machen ---------- */
/* Aufbau nach dem Baulig-Muster: dunkles Bild, zentrierter Kopf, sechs Punkte um eine Mittelgrafik. */
.chain { position: relative; z-index: 5; overflow: hidden; background: #000; color: #fff;
  padding: 92px var(--pad) 104px; font-family: "Montserrat", system-ui, sans-serif; }
/* Wie beim Vorbild: schwarze Grundflaeche plus ein Bild, das bereits in der
   Bildbearbeitung abgedunkelt wurde. Kein CSS-Verlauf darueber — das Original
   arbeitet genauso, deshalb wirkt es sauber statt gestreift.
   Helligkeit auf die Tonwertkurve der Vorlage gezogen: Mittel 10, Median 5. */
.chain-bg { position: absolute; inset: 0; z-index: 0;
  background: #000 url("fotos/team-einsatz-bg.webp?v=3") 50% 50% / cover no-repeat; }
.chain-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }

.chain-head { max-width: 1100px; margin: 0 auto; text-align: center; }
.chain-eyebrow { display: block; font-size: 14px; font-weight: 700; line-height: 21px;
  color: var(--alarm); margin-bottom: 10px; }
.chain h2 { font-size: 39px; font-weight: 700; line-height: 50px; letter-spacing: 0; color: #fff; margin: 0; }
.chain-lead { max-width: 820px; margin: 26px auto 0; text-align: left; font-size: 17px; line-height: 27px;
  color: rgba(255,255,255,.76); }
.chain-lead b { color: #fff; font-weight: 700; }
.chain-kicker { text-align: center; font-size: 15px; font-weight: 700; line-height: 21px;
  color: #fff; margin: 54px 0 0; }

/* Die Grafik steht mittig im Fluss, die sieben Bloecke haengen daneben — jeder genau
   auf der Hoehe seiner Zahl. Die Prozentwerte sind die Zahlenpositionen der viewBox. */
.chain-map { --rw: 480px; --gap: 46px; position: relative; margin-top: 30px; }
.cm-svg { width: var(--rw); margin: 0 auto; }
.cm { position: absolute; width: calc((100% - var(--rw)) / 2 - var(--gap)); transform: translateY(-50%); }
.cm-1 { right: 0; top: 10.8%; }
.cm-2 { left: 0;  top: 24.0%; }
.cm-3 { right: 0; top: 37.2%; }
.cm-4 { left: 0;  top: 50.4%; }
.cm-5 { right: 0; top: 63.6%; }
.cm-6 { left: 0;  top: 76.8%; }
.cm-7 { right: 0; top: 90.0%; }
.cm h3 { font-size: 17px; font-weight: 700; line-height: 24px; color: #fff; margin: 0 0 8px; }
.cm h3 i { font-style: normal; font-weight: 700; color: rgba(255,255,255,.5); }
.cm p { font-size: 15px; line-height: 22px; color: rgba(255,255,255,.7); margin: 0; }

.ribbon { display: block; width: 100%; height: auto; }
/* Dunkle Beschriftung: liest sich auf allen sieben Bandfarben. */
.rb-lab text { font-size: 14px; font-weight: 700; letter-spacing: .04em; fill: #0b1a26;
  text-anchor: middle; dominant-baseline: central; }
.rb-num circle { fill: #fff; }
.rb-num text { font-size: 20px; font-weight: 700; fill: #0b1a26;
  text-anchor: middle; dominant-baseline: central; }

.chain-solve { margin: 72px auto 0; max-width: 1100px; text-align: center; }
.chain-solve p { font-size: 17px; line-height: 27px; color: rgba(255,255,255,.76);
  max-width: 62ch; margin: 0 auto 26px; }
.chain-solve b { color: #fff; }
.chain-cta { display: inline-block; background: var(--alarm); color: #fff; text-decoration: none; font-weight: 700;
  padding: 16px 30px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(232,84,47,.4); transition: background .2s, transform .15s; }
.chain-cta:hover { background: var(--alarm-dark); transform: translateY(-2px); }

/* Schmaler wird die Grafik kleiner; die Bloecke werden dabei hoeher und brauchen
   oben und unten etwas Luft, damit der erste und letzte nicht anstossen. */
/* Schmal wird die Sektion sehr hoch. Bei "cover" bliebe vom Bild nur ein
   handbreiter Streifen aus der Mitte, deshalb liegt es hier in voller Breite
   oben und laeuft nach unten ins Schwarz aus. */
@media (max-width: 1180px) {
  .chain-bg {
    background:
      linear-gradient(rgba(0,0,0,0) 38%, rgba(0,0,0,.72) 78%, #000 100%) top center / 100% 56vw no-repeat,
      url("fotos/team-einsatz-bg.webp?v=3") top center / 100% auto no-repeat,
      #000;
  }
}

@media (max-width: 1260px) { .chain-map { --rw: 400px; --gap: 34px; margin: 56px 0 30px; } }
@media (max-width: 1180px) {
  .chain h2 { font-size: 30px; line-height: 39px; }
  .chain-map { display: flex; flex-direction: column; gap: 32px; }
  .cm { position: static; width: 100%; transform: none; }
  .cm-svg { order: -1; width: 100%; max-width: 340px; margin: 0 auto 8px; }
}

/* ---------- Eigene Leistung vs. gesteuerte Gewerke ---------- */
.split-work { background: #fff; padding: 12vh var(--pad); position: relative; z-index: 5; }
.sw-inner { max-width: 74rem; margin: 0 auto; }
.sw-sub { margin-top: 18px; color: var(--muted); max-width: 54ch; font-size: clamp(1.02rem, 1.5vw, 1.15rem); }
.sw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }
.sw-col { border-radius: 18px; padding: 32px 30px; }
.sw-own { background: #000; color: #fff; }
.sw-managed { background: var(--ice); border: 1px solid rgba(15,58,92,.12); }
.sw-tag { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px;
  background: var(--alarm); color: #fff; margin-bottom: 22px; }
.sw-tag-blue { background: rgba(0,0,0,.07); color: #000; }
.sw-col ul { list-style: none; display: grid; gap: 13px; }
.sw-col li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; }
.sw-col li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; }
.sw-own li { color: rgba(255,255,255,.9); } .sw-own li::before { color: #6ee7a8; }
.sw-managed li { color: var(--ink); } .sw-managed li::before { color: #000; }
.sw-note { margin-top: 30px; text-align: center; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--muted); }
.sw-note b { color: var(--ink); }
@media (max-width: 860px) { .sw-cols { grid-template-columns: 1fr; } }


/* ---------- Team ---------- */
/* Aufbau nach dem Baulig-Muster: Text links, versetzt gestapelte Portraits rechts. */
.team { background: var(--ice); padding: 12vh var(--pad); position: relative; z-index: 5;
  font-family: "Montserrat", system-ui, sans-serif; }
.team-inner { max-width: 1320px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(40px, 5vw, 84px); align-items: start; }
.team h2 { font-size: 39px; font-weight: 700; line-height: 50px; letter-spacing: 0;
  margin: 0 0 clamp(30px, 3.4vw, 44px); }
.team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3vw, 44px); }
.tcol h3 { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 0; margin: 0 0 2px; }
.tcol h3 + p { margin-top: 0; }
.tcol p { font-size: 16px; line-height: 25px; color: #3c4c59; margin: 0 0 18px; }
.tcol p:last-child { margin-bottom: 0; }
.tcol h3:not(:first-child) { margin-top: 26px; }

/* Dunkler Kasten unten links — im Vorbild ein Zitat, hier der Notruf. */
.team-box { margin-top: clamp(34px, 4vw, 52px); background: #000; color: #fff;
  border-radius: 4px; padding: clamp(28px, 3vw, 38px); }
.tb-claim { font-size: 19px; font-weight: 700; line-height: 28px; margin: 0 0 12px; }
.tb-sub { font-size: 15px; line-height: 23px; color: rgba(255,255,255,.72); margin: 0 0 24px; }
.tb-cta { display: inline-block; background: var(--alarm); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 100px;
  box-shadow: 0 10px 30px rgba(232,84,47,.4); transition: background .2s, transform .15s; }
.tb-cta:hover { background: var(--alarm-dark); transform: translateY(-2px); }

/* Zwei Spalten, die rechte tiefer angesetzt — daher der Treppen-Eindruck. */
/* Portraits bewusst kleiner als die Spalte hergibt, damit der Text fuehrt. */
.team-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px);
  max-width: 380px; margin-left: auto; }
.tp-col { display: flex; flex-direction: column; gap: clamp(24px, 2.8vw, 38px); }
.tp-col-b { margin-top: clamp(44px, 5.5vw, 84px); }
.tm { margin: 0; }
.tm img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center top; display: block; border-radius: 3px;
  box-shadow: 6px 8px 26px rgba(14,27,38,.26); }
.tm figcaption { padding-top: 12px; }
.tm b { display: block; font-size: 14px; line-height: 20px; }
.tm span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 1080px) {
  .team-inner { grid-template-columns: 1fr; }
  .team h2 { font-size: 30px; line-height: 39px; }
  .team-photos { max-width: 340px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .team-cols { grid-template-columns: 1fr; }
  .tcol h3:not(:first-child) { margin-top: 22px; }
  .tp-col-b { margin-top: 40px; }
}

/* ---------- „Was Sie erwarten können" — 3 Spalten, zentriert (Referenz-Muster) ---------- */
.expect { background: var(--ice); padding: 12vh var(--pad); position: relative; z-index: 5;
  font-family: "Montserrat", system-ui, sans-serif; }
.expect-inner { max-width: 1100px; margin: 0 auto; }
.expect h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.15;
  text-align: center; letter-spacing: -.01em; margin-bottom: clamp(46px, 6vw, 72px); color: var(--ink); }
.expect-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.ex { text-align: center; }
.ex-ico { width: 96px; height: 96px; margin: 0 auto 26px; color: #000; }
.ex-ico svg { width: 100%; height: 100%; }
.ex-ico .ex-accent { color: var(--alarm); }
.ex h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 700; margin-bottom: 14px;
  letter-spacing: -.01em; color: var(--ink); }
.ex p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 900px) { .expect-cols { grid-template-columns: 1fr; gap: 44px; } }

/* Logo im Fussbereich, ueber der Rechtszeile */
.foot-logo { position: relative; z-index: 2; display: flex; justify-content: center;
  padding: 0 var(--pad) 30px; }
.foot-logo img { height: 44px; width: auto; opacity: .9; }
@media (max-width: 700px) { .foot-logo img { height: 34px; } .vlogo img { height: 26px; } }

/* ---------- Abkantung: angeschraegte Oberkante links ----------
   Statt die Sektion zu beschneiden liegt der Keil als eigene Flaeche oben drauf.
   So bekommt er die Farbe der Sektion darueber (--kant-bg) statt des
   Seitenhintergrunds, und klebende Kinder werden nicht mitgeschnitten. */
.kant { position: relative; --kant-h: 48px; }
/* Farbregel: traegt die Nachbarsektion eine Flaeche, bekommt der Keil deren Farbe.
   Traegt sie ein Bild oder Video, geht das nicht — dort zeigt der Keil Weiss, also
   den Seitenhintergrund, und die Kante liest sich als Ausschnitt.

   Der Keil greift eine Pixelreihe nach oben ueber. Die Sektionskante liegt auf
   einem Bruchteil eines Pixels; ohne den Ueberstand scheint die Flaeche darunter
   als feiner Strich durch. Die Farbe ist dieselbe wie oben, der Ueberstand faellt
   also nicht auf. */
.kant::before, .kant::after { content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: calc(var(--kant-h) + 1px); background: var(--kant-bg, #fff);
  z-index: 6; pointer-events: none; }
.kant::before { clip-path: polygon(0 0, 13% 0, 3% 100%, 0 100%); }
.kant::after  { clip-path: polygon(87% 0, 100% 0, 100% 100%, 97% 100%); }

@media (max-width: 700px) { .kant { --kant-h: 26px; } }

/* ---------- Fussbereich: Marke links, Linkspalten rechts ---------- */
.foot-cols { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto;
  padding: clamp(60px, 7vw, 96px) var(--pad) clamp(40px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
  gap: clamp(34px, 4vw, 70px); align-items: start;
  font-family: "Montserrat", system-ui, sans-serif; }
.foot-brand img { height: 46px; width: auto; display: block; margin-bottom: 20px; }
.foot-brand p { font-size: 14px; line-height: 22px; color: rgba(255,255,255,.62); margin: 0 0 20px; }
.foot-call { display: inline-block; font-size: 15px; font-weight: 700; color: #fff;
  text-decoration: none; border: 1px solid rgba(255,255,255,.3); border-radius: 100px;
  padding: 11px 22px; transition: background .2s, color .2s; }
.foot-call:hover { background: #fff; color: #000; }

.foot-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2vw, 30px); }
.foot-col h3 { font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0;
  color: #fff; margin: 0 0 12px; }
.foot-col h3.foot-col-second { margin-top: 26px; }
.foot-col a { display: block; font-size: 13.5px; line-height: 19px; color: rgba(255,255,255,.62);
  text-decoration: none; margin-bottom: 9px; }
.foot-col a:hover { color: #fff; }

@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 640px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Zielgruppen: wen wir betreuen, jeder direkt angesprochen ---------- */
.zielgruppen { background: #000; color: #fff; padding: 12vh var(--pad);
  position: relative; z-index: 5; font-family: "Montserrat", system-ui, sans-serif; }
.zg-inner { max-width: 1320px; margin: 0 auto; }
.zg-head { max-width: 1100px; margin-bottom: clamp(44px, 5vw, 66px); }
.zg-eyebrow { display: block; font-size: 14px; font-weight: 700; line-height: 21px;
  color: var(--alarm); margin-bottom: 10px; }
.zielgruppen h2 { font-size: 39px; font-weight: 700; line-height: 50px; letter-spacing: 0;
  color: #fff; margin: 0; }
.zg-lead { max-width: 820px; margin: 22px 0 0; font-size: 17px; line-height: 27px;
  color: rgba(255,255,255,.72); }

/* Sechs Spalten: die ersten drei Karten je zwei breit, die letzten zwei je drei. */
.zg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 24px); }
.zg-card { grid-column: span 2; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 28px 26px 30px; }
.zg-card:nth-child(4), .zg-card:nth-child(5) { grid-column: span 3; }
.zg-kicker { display: block; font-size: 13px; font-weight: 700; line-height: 19px;
  color: var(--alarm); margin-bottom: 12px; }
.zg-card h3 { font-size: 19px; font-weight: 700; line-height: 27px; letter-spacing: 0;
  color: #fff; margin: 0 0 10px; }
.zg-card p { font-size: 15px; line-height: 23px; color: rgba(255,255,255,.7); margin: 0; }

.zg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  margin-top: clamp(38px, 4vw, 54px); }
.zg-mail { color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 3px; }
.zg-mail:hover { border-bottom-color: #fff; }

@media (max-width: 1080px) {
  .zielgruppen h2 { font-size: 30px; line-height: 39px; }
  .zg-grid { grid-template-columns: repeat(2, 1fr); }
  .zg-card, .zg-card:nth-child(4), .zg-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 640px) {
  .zg-grid { grid-template-columns: 1fr; }
}

/* ---------- Ton-Hinweis ueber dem Hero-Video ----------
   Startet als runder Knopf oben rechts und faehrt kurz darauf zur Leiste aus.
   Die Breite wird ueber die Beschriftung animiert, nicht ueber den Knopf selbst,
   damit der Kreis sauber rund bleibt. */
.sound-cue { position: absolute; top: 16px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0;
  padding: 14px; border: 0; border-radius: 100px; cursor: pointer;
  background: rgba(10,12,14,.88); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: gap .5s cubic-bezier(.2,.7,.2,1), padding .5s cubic-bezier(.2,.7,.2,1), background .2s; }
.sound-cue:hover { background: #000; }
/* Muss explizit sein: das hidden-Attribut setzt nur display:none als Vorgabe
   und wird von der display-Regel oben ueberschrieben. */
.sound-cue[hidden] { display: none !important; }
.sound-cue span { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .55s cubic-bezier(.2,.7,.2,1), opacity .3s .12s; }
.sound-cue svg { width: 24px; height: 24px; flex: none; }
.sound-cue.is-wide { gap: 14px; padding: 13px 18px 13px 24px; }
.sound-cue.is-wide span { max-width: 34rem; opacity: 1; }
@media (max-width: 700px) {
  .sound-cue { font-size: 12.5px; padding: 11px; top: 12px; right: 12px; }
  .sound-cue.is-wide { gap: 9px; padding: 10px 13px 10px 16px; }
  .sound-cue svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-cue, .sound-cue span { transition: none; }
}


/* ============================================================
   HANDY — Aufbau wie im Vorbild. Gemessen auf andreasbaulig.de bei 390 px:
   H1 18/23, Unterzeile 13/17, H2 22/30, Zwischenzeile 15/23, Fliesstext 15/21,
   Seitenrand 20 px, Buttons ueber die volle Breite und 60 px hoch.
   ============================================================ */
@media (max-width: 700px) {
  /* Die erzwungenen Umbrueche sind fuer die breite Ansicht gesetzt. Auf dem Handy
     reissen sie den zentrierten Block auseinander, also brechen die Zeilen von selbst. */
  .nur-breit { display: none; }
  /* Auf dem Handy gibt es keine leeren Randspalten — die Rohre entfallen. */
  .hero-pipes { display: none; }

  /* --- Hero --- */
  .vhero { padding-top: 29px; }
  /* Die Ueberschrift ist im Vorbild als einzige Groesse an die Fensterbreite
     gekoppelt: 4,6vw bei 1,3 Zeilenhoehe (gemessen bei 360, 390 und 430 px). */
  .vhero h1 { font-size: clamp(15px, 4.6vw, 32px); line-height: 1.3; }
  .vsubline { font-size: 13px; line-height: 17px; }
  .veyebrow { font-size: 15px; line-height: 21px; }
  .vtrust { font-size: 12px; line-height: 21px; }
  .vproof b { font-size: 20px; line-height: 26px; }
  .vproof span { font-size: 12px; line-height: 18px; }
  .vhero .details-link { font-size: 13px; }

  /* --- Sektionsueberschriften --- */
  .sec-head h2, .proc-head h2, .faq h2, .chain h2, .team h2,
  .expect h2, .zielgruppen h2, .panel-card h2, .giant {
    font-size: 22px; line-height: 30px; }
  .statement { font-size: 24px; line-height: 32px; }

  /* --- Zwischenueberschriften --- */
  .ch h3, .ex h3, .zg-card h3, .cm h3, .tcol h3, .vm-frame h3, .pcard h4 {
    font-size: 16px; line-height: 21px; }
  .pstep-title { font-size: 17px; line-height: 25px; }

  /* --- Ablauf wie im Vorbild: "Schritt 1" nur noch so gross wie eine Ueberschrift,
     die Karten versetzt und leicht ueberlappend. Gemessen bei 430 px: Karte 230 von
     390 px Inhaltsbreite (59 %), jede zweite um 41 % nach rechts, senkrechter Abstand
     251 px bei 285 px Kartenhoehe, also rund 30 px Ueberlappung. --- */
  .pstep-no { font-size: 22px; line-height: 30px; letter-spacing: 0; margin-bottom: 10px; }
  .pstep-row { margin-bottom: 46px; }
  .pstep-cards { display: block; }
  .pcard { position: relative; width: 59%; margin-bottom: -30px;
    border: 0; box-shadow: 1px 1px 20px rgba(0, 0, 0, .45); }
  .pcard:nth-child(even) { margin-left: 41%; }
  .pcard:last-child { margin-bottom: 0; }
  .pcard-body { padding: 18px 16px 20px; }
  .pcard-bar { height: 8px; }

  /* --- Team wie im Vorbild: Ueberschrift, direkt darunter die Portraits als
     gleich grosses Zweierraster ueber die volle Breite, danach erst der Text.
     Gemessen bei 430 px: zwei Spalten zu 175 px mit 40 px Abstand, Bildformat
     175:193, kein Versatz zwischen den Spalten. --- */
  /* Im Vorbild wechseln sich Bildpaar und Textblock ab. Dafuer loesen wir die
     Zwischencontainer auf (display: contents), sodass Portraits, Ueberschriften
     und Absaetze direkt im Fluss stehen, und sortieren sie ueber order neu:
     Paar, Text, Paar, Text, letztes Bild, Text, Notrufkasten. */
  .team-inner { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 0; }
  .team-left, .team-photos, .team-cols, .tp-col, .tcol {
    display: contents; opacity: 1; transform: none; }

  .team h2 { order: 1; width: 100%; text-align: center; margin-bottom: 24px; }
  .tm { width: calc(50% - 20px); margin: 0 0 30px; }
  .tcol > *, .team-box { width: 100%; }

  .tp-col:nth-child(1) .tm:nth-child(1) { order: 2; }
  .tp-col:nth-child(2) .tm:nth-child(1) { order: 3; }
  .tcol:nth-child(1) > *               { order: 4; }
  .tp-col:nth-child(1) .tm:nth-child(2) { order: 5; }
  .tp-col:nth-child(2) .tm:nth-child(2) { order: 6; }
  .tcol:nth-child(2) > :nth-child(-n+3) { order: 7; }
  .tp-col:nth-child(1) .tm:nth-child(3) { order: 8; }
  .tcol:nth-child(2) > :nth-child(n+4)  { order: 9; }
  .team-box { order: 10; margin-top: 12px; }

  /* Nach jedem Textblock etwas Luft, bevor das naechste Bildpaar kommt */
  .tcol > p:last-child { margin-bottom: 30px; }
  .tp-col-b { margin-top: 0; }
  .tm img { aspect-ratio: 175 / 193; }
  .tb-claim { font-size: 17px; line-height: 25px; }

  /* --- Fliesstext --- */
  .ch p, .ex p, .cm p, .chain-lead, .chain-solve p, .zg-lead, .zg-card p,
  .tcol p, .tb-sub, .faq-item p, .pcard p, .sw-sub, .pstep-text,
  .foot-brand p, .cta-mail, .proc-note {
    font-size: 15px; line-height: 21px; }

  /* --- Buttons: volle Breite, 60 px hoch, wie im Vorbild --- */
  .btn-alarm, .chain-cta, .proc-cta, .vcta, .kf-send {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; box-sizing: border-box; min-height: 60px; padding: 10px 16px;
    font-size: 15px; line-height: 21px; white-space: normal; }
  .cta .btn-lg { font-size: 15px; padding: 10px 16px; }
  .sec-cta { margin-top: 34px; }
  .chain-cta { margin-top: 4px; }

  /* --- Fussbereich: kein doppelter Seitenrand, Spalten duerfen schrumpfen --- */
  .foot-cols { padding-left: 0; padding-right: 0; }
  /* Lange Zusammensetzungen wie "Eigentuemergemeinschaften" sollen an einer
     sinnvollen Stelle mit Bindestrich brechen statt mitten im Wort. */
  .foot-col a { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }

  /* Die letzte Spalte traegt zwei Ueberschriften. Allein in der Zeile stuenden sie
     untereinander in der linken Haelfte. Sie nimmt jetzt die ganze Zeile ein und
     teilt sich selbst in zwei Spalten, mit einem erzwungenen Umbruch vor der zweiten. */
  .foot-nav > .foot-col:last-child { grid-column: 1 / -1; column-count: 2; column-gap: 18px; }
  .foot-col h3.foot-col-second { margin-top: 0;
    -webkit-column-break-before: always; break-before: column; }

  .foot-legal { padding: 26px 0 130px; }
}