/* ============================================================
   Raumretter — Corporate Layer
   Ruhige Grotesk, Graphit und Off-White, ein chirurgischer
   Akzent (Acid). Struktur statt Effekt. Ergänzt css/styles.css.
   ============================================================ */

:root {
  --c-black: #0B0C0D;
  --c-graphite: #141619;
  --c-graphite-2: #1C1F23;
  --c-graphite-3: #272B30;
  --c-line-d: rgba(255, 255, 255, 0.10);
  --c-line-d2: rgba(255, 255, 255, 0.18);
  --c-white: #FFFFFF;
  --c-off: #F4F4F2;
  --c-off-2: #EBEBE8;
  --c-line: #DCDCD8;
  --c-line-2: #C6C6C1;
  --c-text: #111214;
  --c-text-2: #3B3E43;
  --c-muted: #6E7176;
  --c-muted-d: #9A9DA3;
  --hdr-h: 106px;
}

/* ---------- Basis ---------- */
body.corp {
  background: var(--c-off); color: var(--c-text);
  font-size: 17px; line-height: 1.55; letter-spacing: -0.005em;
  padding-top: var(--hdr-h);
}
.corp .container-x { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
.corp .btn-primary, .corp .btn-invers, .corp .btn-ghost { border-radius: 4px; padding: 14px 22px; font-size: 15px; letter-spacing: -0.01em; }
.corp .btn-ghost { border-color: var(--c-line-2); color: inherit; }
.corp .btn-ghost:hover { border-color: var(--c-text); }
.corp .on-dark .btn-ghost, .corp .sec-dark .btn-ghost, .corp .sec-black .btn-ghost { border-color: var(--c-line-d2); color: var(--c-white); }
.corp .on-dark .btn-ghost:hover, .corp .sec-dark .btn-ghost:hover, .corp .sec-black .btn-ghost:hover { border-color: var(--c-white); }

/* ---------- Typo-Rollen ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-muted); display: inline-flex; align-items: center; gap: 12px; margin: 0;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }
.t-display { font-family: var(--font-head); font-weight: 500; font-size: clamp(42px, 6.2vw, 92px); line-height: 1.02; letter-spacing: -0.032em; margin: 0; text-wrap: balance; }
.t-h2 { font-family: var(--font-head); font-weight: 500; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.t-h3 { font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.t-lead { font-size: 19px; line-height: 1.5; color: var(--c-text-2); margin: 0; max-width: 60ch; }
.t-body { font-size: 16px; line-height: 1.55; color: var(--c-text-2); margin: 0; }
.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Sektionsanatomie ---------- */
.sec { padding: 128px 0; }
.sec-white { background: var(--c-white); }
.sec-off { background: var(--c-off); }
.sec-dark { background: var(--c-graphite); color: var(--c-white); }
.sec-black { background: var(--c-black); color: var(--c-white); }
.sec-dark .eyebrow, .sec-black .eyebrow { color: var(--c-muted-d); }
.sec-dark .t-lead, .sec-black .t-lead, .sec-dark .t-body, .sec-black .t-body { color: var(--c-muted-d); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: end; margin-bottom: 64px; }
.sec-head .t-h2 { max-width: 20ch; }
.sec-head .t-lead { max-width: 56ch; }
.sec-head > .eyebrow { grid-column: 1 / -1; margin-bottom: -28px; }
.sec-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.sec-dark .sec-foot, .sec-black .sec-foot { border-color: var(--c-line-d); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 500; font-size: 15px; }
.link-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: rgba(11, 12, 13, 0.86); color: var(--c-white);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--c-line-d);
  transition: background .3s var(--ease);
}
.hdr.scrolled { background: rgba(11, 12, 13, 0.96); }
.hdr-top { border-bottom: 1px solid var(--c-line-d); }
.hdr-top .container-x { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 24px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); }
.hdr-top a { color: inherit; text-decoration: none; }
.hdr-top a:hover { color: var(--c-white); }
.hdr-top .right { display: flex; gap: 22px; align-items: center; }
.hdr-main .container-x { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 32px; }
.hdr .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-white); }
.hdr .logo-word { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--c-white); }
.hdr .logo svg { width: 30px; height: 30px; }
.hdr .logo svg rect:first-child { stroke: rgba(255,255,255,0.25); }
.hdr-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: static; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--c-white); text-decoration: none; padding: 10px 14px; border-radius: 4px;
  background: transparent; border: 0; cursor: pointer; line-height: 1;
}
.nav-link:hover, .nav-item.open > .nav-link { background: rgba(255,255,255,0.07); }
.nav-link .chev { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); opacity: .8; }
.nav-item.open .chev { transform: rotate(180deg); }
.hdr-cta { display: flex; align-items: center; gap: 12px; }
.hdr-cta .btn-primary { padding: 11px 18px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--c-line-d2); background: transparent; border-radius: 4px; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--c-white); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -6px; left: 0; right: 0; }
.nav-toggle span::after { top: 6px; left: 0; right: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mega-Menü */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-black); border-bottom: 1px solid var(--c-line-d2);
  box-shadow: 0 40px 80px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.nav-item.open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.mega-inner { max-width: 1440px; margin: 0 auto; padding: 40px 56px 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 300px; gap: 40px; }
.mega-col .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-d); margin: 0 0 12px; display: flex; gap: 10px; }
.mega-col .k b { color: var(--acid); font-weight: 400; }
.mega-col a { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--c-white); text-decoration: none; font-size: 15px; padding: 10px 0; border-top: 1px solid var(--c-line-d); transition: color .2s var(--ease), padding-left .2s var(--ease); }
.mega-col a:last-child { border-bottom: 1px solid var(--c-line-d); }
.mega-col a:hover { color: var(--acid); padding-left: 6px; }
.mega-col a svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .6; }
.mega-aside { background: var(--c-graphite-2); border: 1px solid var(--c-line-d); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.mega-aside .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-d); margin: 0; }
.mega-aside .t { font-family: var(--font-head); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.mega-aside p { font-size: 14px; color: var(--c-muted-d); margin: 0; line-height: 1.5; }
.mega-aside .btn-primary { align-self: flex-start; margin-top: 6px; }
.mega-aside .link-arrow { color: var(--c-white); font-size: 14px; }

/* Mobile-Navigation */
.mobile-nav { display: none; }
.mobile-nav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--hdr-h, 72px)); height: calc(100dvh - var(--hdr-h, 72px)); background: var(--c-black); overflow: auto; -webkit-overflow-scrolling: touch; padding: 16px 24px 80px; z-index: 79; }
.mobile-nav .grp { border-bottom: 1px solid var(--c-line-d); padding: 14px 0; }
.mobile-nav .grp > span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-d); margin-bottom: 6px; }
.mobile-nav a { display: block; color: var(--c-white); text-decoration: none; font-size: 18px; line-height: 1.3; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
.mobile-nav a.top { font-size: 20px; font-weight: 500; }
.mobile-nav .btn-primary { margin-top: 20px; width: 100%; }

/* ---------- Hero ---------- */
.hero-corp { position: relative; background: var(--c-black); color: var(--c-white); overflow: hidden; }
.hero-corp canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-corp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(var(--c-line-d) 1px, transparent 1px), linear-gradient(90deg, var(--c-line-d) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; min-height: min(calc(100vh - var(--hdr-h)), 820px); padding: 80px 0 64px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; max-width: 780px; }
.hero-copy .eyebrow { color: var(--c-muted-d); }
.hero-copy .t-display { color: var(--c-white); }
.hero-copy .t-lead { color: var(--c-muted-d); max-width: 58ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero-actions .btn-ghost { color: var(--c-white); border-color: var(--c-line-d2); }
.hero-actions .btn-ghost:hover { border-color: var(--c-white); }

/* Zwillings-Panel (rechts) */
.twin-panel {
  justify-self: end; width: min(100%, 372px);
  background: rgba(20, 22, 25, 0.78); border: 1px solid var(--c-line-d2); border-radius: 6px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono); overflow: hidden;
}
.twin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-line-d); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); }
.twin-head .live { display: inline-flex; align-items: center; gap: 8px; color: var(--c-white); }
.twin-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--acid); animation: twinpulse 2s ease-out infinite; }
@keyframes twinpulse { 0% { box-shadow: 0 0 0 0 rgba(238,255,46,.5); } 100% { box-shadow: 0 0 0 10px rgba(238,255,46,0); } }
.twin-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--c-line-d); }
.twin-stats div { padding: 14px 16px; border-right: 1px solid var(--c-line-d); display: flex; flex-direction: column; gap: 4px; }
.twin-stats div:last-child { border-right: 0; }
.twin-stats .v { font-family: var(--font-head); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--c-white); font-variant-numeric: tabular-nums; }
.twin-stats .k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); }
.twin-log { list-style: none; margin: 0; padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 148px; }
.twin-log li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; font-size: 12px; line-height: 1.45; color: var(--c-muted-d); }
.twin-log li b { font-weight: 400; color: var(--acid); }
.twin-log li:first-child { color: var(--c-white); }
.twin-foot { padding: 9px 16px; border-top: 1px solid var(--c-line-d); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }

/* Kennzahlen-Leiste */
.kpi { background: var(--c-black); color: var(--c-white); border-top: 1px solid var(--c-line-d); border-bottom: 1px solid var(--c-line-d); }
.kpi .container-x { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi div { padding: 28px 24px 28px 0; margin-right: 24px; border-right: 1px solid var(--c-line-d); display: flex; flex-direction: column; gap: 8px; }
.kpi div:last-child { border-right: 0; margin-right: 0; }
.kpi .v { font-family: var(--font-head); font-weight: 500; font-size: 34px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 15px; color: var(--acid); margin-left: 6px; letter-spacing: 0; }
.kpi .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); line-height: 1.5; }

/* ---------- Leitsatz ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px 64px; align-items: start; }
.statement .t-h2 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.18; max-width: 30ch; }
.statement .t-h2 em { font-style: normal; color: var(--c-muted); }
.statement-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.statement-list li { border-top: 1px solid var(--c-line); padding-top: 16px; font-size: 15px; color: var(--c-text-2); line-height: 1.5; }
.statement-list li b { display: block; font-weight: 500; color: var(--c-text); margin-bottom: 6px; }

/* ---------- Geschäftsbereiche ---------- */
.div-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.division { background: var(--c-white); padding: 34px 28px 30px; min-height: 440px; display: flex; flex-direction: column; gap: 16px; transition: background .3s var(--ease); }
.division:hover { background: var(--c-off); }
.division .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c-muted); }
.division .num b { color: var(--c-text); font-weight: 400; }
.division h3 { font-family: var(--font-head); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.division p { font-size: 15px; color: var(--c-muted); line-height: 1.5; margin: 0; }
.division ul { list-style: none; margin: auto 0 0; padding: 0; }
.division li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-line); color: var(--c-text); text-decoration: none; font-size: 15px; transition: padding-left .2s var(--ease), color .2s var(--ease); }
.division li:last-child a { border-bottom: 1px solid var(--c-line); }
.division li a:hover { padding-left: 6px; }
.division li a svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .5; flex: 0 0 auto; }

/* ---------- Prozess ---------- */
.proc { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; padding-top: 44px; }
.proc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-line-d2); }
.proc-line { position: absolute; left: 0; top: 0; height: 1px; width: 0%; background: var(--acid); transition: width .25s linear; }
.step { position: relative; display: flex; flex-direction: column; gap: 12px; }
.step::before { content: ""; position: absolute; left: 0; top: -48px; width: 9px; height: 9px; border-radius: 999px; background: var(--c-graphite-3); border: 1px solid var(--c-line-d2); transition: background .3s var(--ease), border-color .3s var(--ease); }
.step.on::before { background: var(--acid); border-color: var(--acid); box-shadow: 0 0 0 4px rgba(238,255,46,.15); }
.step .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--acid); }
.step h3 { font-family: var(--font-head); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: var(--c-white); }
.step p { font-size: 14.5px; line-height: 1.5; color: var(--c-muted-d); margin: 0; }
.step .dur { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); margin-top: auto; padding-top: 10px; }

/* ---------- Qualität & Sicherheit ---------- */
.qual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.qual > div { background: var(--c-white); padding: 36px; display: grid; grid-template-columns: 52px 1fr; gap: 22px; align-items: start; }
.qual .ico { width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 4px; display: grid; place-items: center; }
.qual .ico svg { width: 22px; height: 22px; stroke: var(--c-text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qual h3 { font-family: var(--font-head); font-weight: 500; font-size: 21px; letter-spacing: -0.015em; margin: 0 0 8px; }
.qual p { font-size: 15px; color: var(--c-text-2); margin: 0 0 12px; line-height: 1.5; }
.qual ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.qual li { font-size: 13.5px; color: var(--c-muted); padding-left: 16px; position: relative; }
.qual li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--c-muted); }

/* ---------- Key-Account: Hausverwaltungen ---------- */
.ka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.ka-copy { display: flex; flex-direction: column; gap: 24px; }
.ka-copy .t-lead { color: var(--c-muted-d); }
.ka-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.ka-points li { padding: 14px 0; border-top: 1px solid var(--c-line-d); font-size: 15.5px; color: var(--c-white); line-height: 1.5; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.ka-points li:last-child { border-bottom: 1px solid var(--c-line-d); }
.ka-points li span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--acid); padding-top: 4px; }
.ka-spec { background: var(--c-graphite-2); border: 1px solid var(--c-line-d2); border-radius: 6px; padding: 30px 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.ka-spec .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-d); margin: 0; }
.ka-spec h3 { font-family: var(--font-head); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; margin: 0; color: var(--c-white); }
.ka-spec dl { margin: 0; display: grid; }
.ka-spec dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--c-line-d); }
.ka-spec dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted-d); padding-top: 3px; }
.ka-spec dd { margin: 0; font-size: 15px; color: var(--c-white); line-height: 1.5; }
.ka-spec .fine { font-size: 13px; color: var(--c-muted-d); margin: 0; }
.ka-spec .btn-primary { align-self: flex-start; }

/* ---------- Auftragsakte (Konsole) ---------- */
.dossier-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.dossier-copy { display: flex; flex-direction: column; gap: 22px; }
.dossier-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dossier-copy li { font-size: 15.5px; color: var(--c-text-2); padding-left: 18px; position: relative; line-height: 1.5; }
.dossier-copy li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--c-text); }
.console { background: var(--c-black); color: var(--c-white); border: 1px solid var(--c-line-d2); border-radius: 6px; overflow: hidden; font-family: var(--font-mono); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.console-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-line-d); background: rgba(255,255,255,0.03); }
.console-bar i { width: 8px; height: 8px; border-radius: 999px; background: var(--c-graphite-3); display: inline-block; }
.console-bar .title { margin-left: 6px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-d); }
.console-bar .badge { margin-left: auto; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-black); background: var(--acid); padding: 3px 8px; border-radius: 3px; }
.console-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; min-height: 320px; }
.console .line { display: grid; grid-template-columns: 92px 1fr; gap: 14px; font-size: 13px; line-height: 1.55; color: #D6D7D2; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.console .line.on { opacity: 1; transform: none; }
.console .line .ts { color: var(--acid); }
.console .line .ok { color: var(--c-white); }
.console .line.typing .txt::after { content: "▌"; color: var(--acid); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { to { opacity: 0; } }
.console-foot { border-top: 1px solid var(--c-line-d); padding: 12px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted-d); }
.console-foot b { color: var(--acid); font-weight: 400; }

/* ---------- Konditionen ---------- */
.cond-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.cond { background: var(--c-white); padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; }
.cond .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.cond .v { font-family: var(--font-head); font-weight: 500; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.cond .v small { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--c-muted); margin-top: 8px; }
.cond p { font-size: 14.5px; color: var(--c-text-2); margin: 0; line-height: 1.5; }
.cond a { color: var(--c-text); }
.calc { margin-top: 1px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; background: var(--c-white); border: 1px solid var(--c-line); border-top: 0; padding: 40px 44px; }
.calc .t-h3 { margin-bottom: 8px; }
.calc p { font-size: 15px; color: var(--c-text-2); margin: 0; }
.calc .plz-card { box-shadow: none; border: 1px solid var(--c-line); border-radius: 6px; width: 100%; }
.calc .plz-card .btn-primary { border-radius: 4px; }
.calc .plz-field input { border-radius: 4px; }
.regions-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.regions-inline a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--c-text); padding: 7px 12px; border: 1px solid var(--c-line-2); border-radius: 3px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.regions-inline a:hover { border-color: var(--c-text); background: var(--c-off); }

/* ---------- Regionen ---------- */
.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.region { background: var(--c-white); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.region .city { font-family: var(--font-head); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.region .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.region p { font-size: 14.5px; color: var(--c-text-2); margin: 0; line-height: 1.5; }
.region .links { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.region .links a { font-size: 14px; color: var(--c-text); }

/* ---------- Unternehmen ---------- */
.company { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.company-copy { display: flex; flex-direction: column; gap: 22px; }
.company dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.company dl > div { background: var(--c-white); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.company dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.company dd { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--c-text); line-height: 1.4; }

/* ---------- FAQ (hell, streng) ---------- */
.corp .faq-list { max-width: 820px; gap: 0; }
.corp .faq-list details { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 0; margin-top: -1px; }
.corp .faq-list details:first-child { margin-top: 0; }
.corp .faq-list details:hover { background: var(--c-off); }
.corp .faq-list summary { font-size: 16.5px; padding: 20px 24px; color: var(--c-text); }
.corp .faq-list .answer { font-size: 15.5px; color: var(--c-text-2); }

/* ---------- Kontakt / Anfrage ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--hdr-h) + 24px); }
.contact-side ul { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-side li { padding: 12px 0; border-top: 1px solid var(--c-line); font-size: 15px; color: var(--c-text-2); line-height: 1.5; display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.contact-side li:last-child { border-bottom: 1px solid var(--c-line); }
.contact-side li span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); padding-top: 4px; }
.contact-side dl { margin: 0; display: grid; gap: 10px; }
.contact-side dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.contact-side dd { margin: 0 0 6px; font-size: 15.5px; color: var(--c-text); }
.contact-side dd a { color: inherit; }
.req-form { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 6px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.req-form h3 { font-family: var(--font-head); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.req-form .stepsub { font-size: 15px; color: var(--c-muted); margin: 0; }
.req-form label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 7px; }
.req-form label .opt { text-transform: none; letter-spacing: 0; color: var(--c-muted-d); }
.req-form input, .req-form select, .req-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--c-text);
  padding: 13px 14px; border: 1px solid var(--c-line-2); border-radius: 4px; background: var(--c-white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.req-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23111214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.req-form textarea { min-height: 110px; resize: vertical; }
.req-form input:hover, .req-form select:hover, .req-form textarea:hover { border-color: var(--c-text); }
.req-form input:focus, .req-form select:focus, .req-form textarea:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 3px rgba(238,255,46,.45); }
.req-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.who-row { display: flex; flex-wrap: wrap; gap: 8px; }
.req-form .chip { border-radius: 4px; }
.req-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.req-summary b { font-weight: 400; color: var(--c-text); }
.req-summary span { padding: 4px 9px; border: 1px solid var(--c-line); border-radius: 3px; }
.req-form .btn-primary { width: 100%; margin-top: 6px; }
.req-err { color: #B3261E; font-size: 14px; min-height: 1em; margin: 0; }
.req-fine { font-size: 12.5px; color: var(--c-muted); margin: 0; line-height: 1.5; }
.req-fine a { color: var(--c-text); }
.req-thanks { display: none; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 0; }
.req-thanks .tick { width: 52px; height: 52px; border-radius: 999px; background: var(--acid); color: var(--c-black); display: grid; place-items: center; font-size: 24px; }
.req-thanks h3 { margin: 0; }
.req-thanks p { color: var(--c-muted); margin: 0; max-width: 42ch; }
.req-thanks a { color: var(--c-text); }
.req-form.done > :not(.req-thanks) { display: none; }
.req-form.done .req-thanks { display: flex; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Schlussband ---------- */
.band { background: var(--c-black); color: var(--c-white); }
.band .container-x { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.band .t-h2 { color: var(--c-white); }
.band p { color: var(--c-muted-d); margin: 12px 0 0; max-width: 50ch; }
.band .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-self: end; }

/* ---------- Footer ---------- */
.ftr { background: var(--c-black); color: var(--c-muted-d); border-top: 1px solid var(--c-line-d); }
.ftr-top { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 40px; padding: 72px 0 56px; border-bottom: 1px solid var(--c-line-d); }
.ftr-brand { display: flex; flex-direction: column; gap: 16px; }
.ftr-brand .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-white); }
.ftr-brand .logo-word { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--c-white); }
.ftr-brand p { font-size: 14px; line-height: 1.55; margin: 0; max-width: 34ch; }
.ftr-brand address { font-style: normal; font-size: 13.5px; line-height: 1.6; }
.ftr h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-white); margin: 0 0 14px; font-weight: 400; }
.ftr a { display: block; color: var(--c-muted-d); text-decoration: none; font-size: 14.5px; padding: 5px 0; transition: color .2s var(--ease); }
.ftr a:hover { color: var(--c-white); }
.ftr-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 22px 0 36px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.ftr-bottom div { display: flex; gap: 22px; flex-wrap: wrap; }
.ftr-bottom a { display: inline; padding: 0; font-size: inherit; }

/* ---------- Artikelseiten: Corporate-Anpassung ---------- */
.corp .site-header { display: none; }
.corp main.article { padding-top: 64px; }
.corp .article h1 { font-family: var(--font-head); font-weight: 500; text-transform: none; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 22px; }
.corp .article h1 .mark, .corp .article .mark { background: linear-gradient(transparent 68%, var(--acid) 68%); padding: 0; }
.corp .article .answer-first { border-left-color: var(--c-text); color: var(--c-text-2); }
.corp .article .breadcrumb a:hover { color: var(--c-text); }
.corp .article .glance .chip { border-radius: 4px; }
.corp .article .toc { border-radius: 4px; background: var(--c-white); border: 1px solid var(--c-line); }
.corp .article .cta-inline { border-radius: 6px; background: var(--c-black); }
.corp .article .cta-inline .btn-primary { border-radius: 4px; }
.corp .article .hint-card { border-radius: 4px; background: var(--c-white); border: 1px solid var(--c-line); border-left: 3px solid var(--c-text); }
.corp .article .tablewrap { border-radius: 4px; background: var(--c-white); border: 1px solid var(--c-line); }
.corp .article table th { background: var(--c-off); }
.corp section.block.on-dark.ctaband { background: var(--c-black); }
.corp .ctaband .display-cta { font-family: var(--font-head); font-weight: 500; text-transform: none; font-size: clamp(32px, 4.4vw, 60px); letter-spacing: -0.03em; line-height: 1.05; }
.corp .ctaband p { color: var(--c-muted-d); }
.corp .ctaband .cta-micro { color: var(--c-muted); }
.corp .svc-card { border-radius: 4px; border: 1px solid var(--c-line); background: var(--c-white); }
.corp .svc-icon { border-radius: 4px; }
.corp .hub-extra-card { border-radius: 4px; border: 1px solid var(--c-line); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .mega-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mega-aside { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .mega-aside .btn-primary { margin: 0 0 0 auto; }
  .div-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division { min-height: 0; }
  .kpi .container-x { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi div:nth-child(3) { border-right: 0; }
  .kpi div:nth-child(n+4) { border-top: 1px solid var(--c-line-d); }
  .proc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .proc .step:nth-child(n+4) { margin-top: 24px; }
}
@media (max-width: 1080px) {
  :root { --hdr-h: 72px; }
  .hdr-top, .hdr-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 64px 0 56px; }
  .twin-panel { justify-self: stretch; width: 100%; }
  .sec-head, .statement, .ka, .dossier-grid, .company, .contact, .calc, .band .container-x { grid-template-columns: 1fr; }
  .band .actions { justify-self: start; }
  .contact-side { position: static; }
  .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
  .qual { grid-template-columns: 1fr; }
  .statement-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .corp .container-x { padding: 0 20px; }
  .sec { padding: 80px 0; }
  .hero-grid { padding: 48px 0 40px; }
  .hero-copy .t-display { font-size: clamp(36px, 10.5vw, 56px); }
  .kpi .container-x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi div { padding: 20px 16px 20px 0; margin-right: 16px; }
  .kpi div:nth-child(2n) { border-right: 0; margin-right: 0; }
  .kpi div:nth-child(3) { border-right: 1px solid var(--c-line-d); }
  .kpi div:nth-child(n+3) { border-top: 1px solid var(--c-line-d); }
  .div-grid, .regions, .cond-grid, .company dl { grid-template-columns: 1fr; }
  .proc { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
  .proc::before, .proc-line { display: none; }
  .step::before { display: none; }
  .step { padding-left: 18px; border-left: 1px solid var(--c-line-d2); }
  .step.on { border-left-color: var(--acid); }
  .qual > div { grid-template-columns: 1fr; padding: 26px 22px; }
  .ka-spec dl > div { grid-template-columns: 1fr; gap: 4px; }
  .console .line { grid-template-columns: 74px 1fr; font-size: 12px; }
  .console-body { min-height: 0; }
  .calc { padding: 28px 20px; }
  .req-form { padding: 24px 18px; }
  .req-grid2 { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr; gap: 28px; padding: 56px 0 40px; }
  .mega-inner { padding: 24px 20px; }
  .twin-log { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .twin-head .live::before { animation: none; }
  .console .line { opacity: 1; transform: none; transition: none; }
  .console .line.typing .txt::after { display: none; }
  .proc-line, .step::before, .mega { transition: none; }
}

/* ============================================================
   Visuelle Schicht: Icon-System, Diagramme, Karte
   ============================================================ */
.ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ico { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--c-line); background: var(--c-off); color: var(--c-text); display: grid; place-items: center; flex: 0 0 auto; }
.ico .ic { width: 22px; height: 22px; }
.sec-dark .ico, .sec-black .ico { border-color: var(--c-line-d2); background: var(--c-graphite-2); color: var(--c-white); }

/* Hero: Leistungsbausteine */
.hero-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hero-parts span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--c-line-d2); border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-d); background: rgba(255,255,255,.03); }
.hero-parts .ic { width: 15px; height: 15px; color: var(--acid); }

/* Diagramm: Bündelung */
.statement { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.statement-copy { display: flex; flex-direction: column; gap: 22px; }
.bundle { width: 100%; height: auto; display: block; overflow: visible; }
.bundle .node { fill: var(--c-white); stroke: var(--c-line-2); }
.bundle .core { fill: var(--acid); stroke: var(--c-black); stroke-width: 1.2; }
.bundle .link { fill: none; stroke: var(--c-line-2); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; animation: flow 1.4s linear infinite; }
.bundle .link-out { fill: none; stroke: var(--c-text); stroke-width: 1.5; }
.bundle .lbl { font-family: var(--font-body); font-size: 14px; font-weight: 500; fill: var(--c-text); }
.bundle .mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; fill: var(--c-muted); text-transform: uppercase; }
.bundle .mono-dark { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; fill: var(--c-black); text-transform: uppercase; }
.bundle .head { font-family: var(--font-head); font-size: 21px; font-weight: 500; fill: var(--c-black); letter-spacing: -0.02em; }
.bundle .ic { color: var(--c-text); }
.bundle .arrow { fill: var(--c-text); }
@keyframes flow { to { stroke-dashoffset: -10; } }

/* Geschäftsbereiche / Prozess / Konditionen mit Icon */
.division { gap: 14px; }
.division .ico { margin-bottom: 4px; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.division:hover .ico { background: var(--acid); border-color: var(--acid); color: var(--c-black); }
.step .ico { margin-bottom: 4px; transition: border-color .3s var(--ease), color .3s var(--ease); }
.step.on .ico { border-color: var(--acid); color: var(--acid); }
.cond .ico { width: 40px; height: 40px; margin-bottom: 4px; }
.cond .ico .ic { width: 20px; height: 20px; }

/* Zeitstrahl Mieterwechsel (dunkel) */
.tl { width: 100%; height: auto; display: block; overflow: visible; margin: 10px 0 6px; }
.tl .base { stroke: var(--c-line-d2); stroke-width: 1.5; }
.tl .node { fill: var(--c-graphite-2); stroke: var(--c-line-d2); }
.tl .core { fill: rgba(238,255,46,.06); stroke: var(--acid); stroke-width: 1.2; }
.tl .dot { fill: var(--c-white); }
.tl .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; fill: var(--c-muted-d); text-transform: uppercase; }
.tl .lbl-acid { fill: var(--acid); }
.tl .ic { color: var(--c-white); }

/* Akte: Dokument-Chips */
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-line); background: var(--c-white); border-radius: 4px; font-size: 14.5px; font-weight: 500; color: var(--c-text); }
.doc .ico { width: 38px; height: 38px; }
.doc .ico .ic { width: 20px; height: 20px; }

/* Regionen: Karte + Liste */
.regions-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.map-wrap { display: flex; justify-content: center; }
.hexmap { display: block; width: 100%; max-width: 440px; height: auto; }
.hexmap .hx-base { fill: var(--c-off-2); }
.hexmap .hx { transition: transform .25s var(--ease); }
.hexmap .hx-active { fill: var(--acid); stroke: var(--c-black); stroke-width: 2; filter: none; }
.hexmap .hx-soon { fill: var(--c-white); stroke: var(--c-line-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hexmap .hx-ico { fill: var(--c-black); pointer-events: none; }
.hexmap text { font-family: var(--font-mono); text-anchor: middle; pointer-events: none; }
.hexmap .hx-label { font-size: 15px; fill: var(--c-text); paint-order: stroke; stroke: var(--c-off); stroke-width: 4px; stroke-linejoin: round; }
.hexmap .hx-label-soon { fill: var(--c-muted); }
.hexmap .hx-ring { fill: none; stroke: var(--acid); stroke-width: 2; animation: hxpulse 2.4s var(--ease) infinite; }
@keyframes hxpulse { 0% { transform: scale(.82); opacity: 0; } 35% { opacity: .9; } 100% { transform: scale(1.14); opacity: 0; } }
.hexmap .hxc { outline: none; }
.hexmap .hxc-active { animation: hxfloat 3.4s ease-in-out infinite; }
.hexmap .hxc-active[data-city="muenchen"] { animation-delay: -1.7s; }
.hexmap .hxc-active[data-city="stuttgart"] { animation-delay: -0.8s; }
@keyframes hxfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.region-list { display: grid; }
.region-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--c-line); }
.region-row:last-child { border-bottom: 1px solid var(--c-line); }
.region-row .city { font-family: var(--font-head); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 2px; color: var(--c-text); }
.region-row .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.region-row .links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.region-row .links a { font-size: 14px; color: var(--c-text); white-space: nowrap; }
.region-row.soon .ico { background: transparent; border-style: dashed; color: var(--c-muted); }
.region-row.soon .city { color: var(--c-muted); }

/* Unternehmen: Marke */
.company-mark { width: 64px; height: 64px; }

@media (max-width: 1080px) {
  .regions-grid, .statement { grid-template-columns: 1fr; }
  .region-row { grid-template-columns: 44px 1fr; }
  .region-row .links { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .doc-grid { grid-template-columns: 1fr; }
  .hero-parts span { padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bundle .link, .hexmap .hx-ring, .hexmap .hxc-active { animation: none; }
}

/* Mobile Ablauf-Varianten für Diagramm und Zeitstrahl */
.flow-mobile { display: none; }
@media (max-width: 720px) {
  .bundle, .tl { display: none; }
  .flow-mobile { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
  .flow-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .flow-row span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--c-line-2); border-radius: 4px; background: var(--c-white); font-size: 13.5px; font-weight: 500; color: var(--c-text); }
  .flow-row .ic { width: 15px; height: 15px; }
  .flow-arrow { font-family: var(--font-mono); font-size: 13px; color: var(--c-muted); padding-left: 4px; }
  .flow-core { display: inline-flex; align-self: flex-start; padding: 10px 14px; background: var(--acid); color: var(--c-black); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .flow-mobile.dark .flow-row span { background: var(--c-graphite-2); border-color: var(--c-line-d2); color: var(--c-white); }
  .flow-mobile.dark .flow-arrow { color: var(--c-muted-d); }
}

@media (max-width: 1080px) { .hero-corp canvas { opacity: .5; } }

/* ============================================================
   Hero-Statusleiste, adaptive Anfrage, Standort-Status
   ============================================================ */
.hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; }
.hero-copy .t-display { font-size: clamp(40px, 5vw, 72px); }
.twin-strip {
  display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 12px;
  background: var(--c-line-d); border: 1px solid var(--c-line-d2); border-radius: 6px; overflow: hidden;
  font-family: var(--font-mono);
}
.twin-strip > div { background: rgba(15, 16, 17, 0.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 16px; display: flex; align-items: center; gap: 10px; min-height: 56px; min-width: 0; }
.twin-strip .live { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-white); padding-right: 20px; }
.twin-strip .live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--acid); animation: twinpulse 2s ease-out infinite; flex: 0 0 auto; }
.twin-strip .v { font-family: var(--font-head); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--c-white); font-variant-numeric: tabular-nums; line-height: 1; }
.twin-strip .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted-d); line-height: 1.3; }
.twin-strip .logcell { grid-column: 1 / -1; justify-content: space-between; gap: 16px; min-height: 44px; padding: 9px 16px; }
.twin-strip .twin-log { list-style: none; margin: 0; padding: 0; min-height: 0; display: block; font-size: 12px; color: var(--c-muted-d); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.twin-strip .twin-log li { display: inline; }
.twin-strip .twin-log li:not(:first-child) { display: none; }
.twin-strip .twin-log b { color: var(--acid); font-weight: 400; margin-right: 10px; }
.twin-strip .note { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .twin-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twin-strip .live { grid-column: 1 / -1; padding-right: 16px; }
  .twin-strip .note { display: none; }
}
@media (max-width: 720px) { .twin-strip > div { padding: 10px 14px; min-height: 50px; } .twin-strip .v { font-size: 18px; } }
.cond-fine { font-size: 12.5px; color: var(--c-muted); margin: -24px 0 40px; max-width: 80ch; }
.calc .plz-card .btn-primary { width: 100%; }

/* Anfrage (adaptiv) */
.rq { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 6px; padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.rq-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.rq-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.rq-steps li { display: flex; align-items: center; gap: 8px; }
.rq-steps li span { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--c-line-2); display: grid; place-items: center; font-size: 10.5px; color: var(--c-muted); }
.rq-steps li.cur { color: var(--c-text); }
.rq-steps li.cur span { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); }
.rq-steps li.done span { background: var(--acid); color: var(--c-black); border-color: var(--acid); }
.rq-promise { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.rq-promise .ic { width: 14px; height: 14px; }
.rq-title { font-family: var(--font-head); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin: 4px 0 0; }
.rq-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin: 6px 0 -8px; }
.rq-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.rq-tile { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 14px 12px 12px; min-height: 160px; height: 100%; box-sizing: border-box; background: var(--c-off); border: 1px solid var(--c-line); border-radius: 6px; cursor: pointer; font: inherit; color: var(--c-text); transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.rq-tile:hover { border-color: var(--c-text); background: var(--c-white); transform: translateY(-2px); }
.rq-tile .ic { flex: 0 0 auto; width: 28px; height: 28px; color: var(--c-text); }
.rq-tile .t { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; font-weight: 500; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.rq-tile .d { font-size: 12.5px; color: var(--c-muted); line-height: 1.35; }
.rq-sel { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--c-off); border: 1px solid var(--c-line); border-radius: 6px; }
.rq-sel .ic { width: 24px; height: 24px; justify-self: center; }
.rq-sel .k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.rq-sel .t { display: block; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.rq-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--c-muted); text-decoration: underline; cursor: pointer; }
.rq-link:hover { color: var(--c-text); }
.rq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.rq-field { display: flex; flex-direction: column; gap: 7px; }
.rq-field.rq-span { grid-column: 1 / -1; }
.rq-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.rq-label .opt { text-transform: none; letter-spacing: 0; color: var(--c-muted-d); }
.rq input, .rq textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--c-text); padding: 12px 14px; border: 1px solid var(--c-line-2); border-radius: 4px; background: var(--c-white); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.rq textarea { min-height: 96px; resize: vertical; }
.rq input:hover, .rq textarea:hover { border-color: var(--c-text); }
.rq input:focus, .rq textarea:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 3px rgba(238,255,46,.45); }
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Objektadresse: Straße breit, PLZ schmal, Ort mittel; auf schmalen Bildschirmen untereinander */
.rq-adr { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.rq-adr input { min-width: 0; }
@media (max-width: 560px) { .rq-adr { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .rq-adr input:first-child { grid-column: 1 / -1; } }
.rq .chip { border-radius: 4px; font-size: 14px; padding: 9px 12px; }
.rq-actions { display: flex; justify-content: flex-end; gap: 12px; }
.rq-actions .btn-primary { display: inline-flex; align-items: center; gap: 10px; }
.rq-actions .btn-primary .ic { width: 16px; height: 16px; }
.rq-fine { font-size: 12.5px; color: var(--c-muted); margin: 0; line-height: 1.5; }
.rq-fine a { color: var(--c-text); }
.rq-drop { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--c-line-2); border-radius: 4px; background: var(--c-off); cursor: pointer; font-size: 14.5px; color: var(--c-text-2); transition: border-color .2s var(--ease), background .2s var(--ease); }
.rq-drop:hover, .rq-drop.over { border-color: var(--c-text); background: var(--c-white); }
.rq-drop .ic { width: 22px; height: 22px; }
.rq-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-thumbs figure { position: relative; margin: 0; width: 72px; height: 72px; border-radius: 4px; overflow: hidden; border: 1px solid var(--c-line); }
.rq-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-thumbs button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 999px; border: 0; background: rgba(11,12,13,.85); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.rq-done { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.rq-done .tick { width: 52px; height: 52px; border-radius: 999px; background: var(--acid); color: var(--c-black); display: grid; place-items: center; font-size: 24px; }
.rq-done h3 { font-family: var(--font-head); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.rq-done p { margin: 0; color: var(--c-text-2); max-width: 60ch; line-height: 1.5; }
.rq-ind { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-off); }
.rq-ind .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.rq-ind .v { font-family: var(--font-head); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; }
.rq-ind .d { font-size: 13px; color: var(--c-muted); }
.rq-next { margin: 4px 0 0; padding-left: 20px; color: var(--c-text-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 720px) {
  .rq { padding: 20px 16px; }
  .rq-tiles { grid-template-columns: 1fr; }
  .rq-grid { grid-template-columns: 1fr; }
  .rq-steps { gap: 12px; }
  .rq-steps li { font-size: 10px; }
}

/* Standort-Status */
.hexmap .hx-plan { fill: var(--c-white); stroke: var(--acid); stroke-width: 2.2; stroke-dasharray: 6 4; }
.hexmap .hx-label-plan { fill: var(--c-text); }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1.5px solid var(--c-line-2); background: var(--c-white); }
.map-legend i.a { background: var(--acid); border-color: var(--c-black); }
.map-legend i.p { border-color: var(--acid); border-style: dashed; }
.region-row { grid-template-columns: 44px 1fr auto; }
.status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; border: 1px solid var(--c-line-2); color: var(--c-muted); white-space: nowrap; }
.status.a { background: var(--acid); border-color: var(--acid); color: var(--c-black); }
.status.p { border-color: var(--acid); color: var(--c-text); }
.region-row .cities { font-size: 15px; color: var(--c-text-2); line-height: 1.5; }
@media (max-width: 1080px) { .region-row { grid-template-columns: 44px 1fr; } .region-row .status { grid-column: 2; justify-self: start; } }
@media (max-width: 1080px) { .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .regions { grid-template-columns: 1fr; } }

/* Feinschliff Konditionen, Karte, Statusleiste, Kennzahlen */
.cond .v { overflow-wrap: anywhere; }
.cond .v.v-sm { font-size: 24px; line-height: 1.1; }
.cond-fine { margin: 16px 0 40px; }
.map-wrap { flex-direction: column; align-items: center; gap: 14px; }
.hexmap { max-width: 520px; }
.region-row .cities { display: block; margin: 2px 0 4px; }
@media (max-width: 1080px) {
  .cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twin-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cond-grid { grid-template-columns: 1fr; }
  .rq-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .corp .article h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }

/* ============================================================
   Mobil: Hero-Bühne für den Zwilling, kompaktere Abschnitte
   ============================================================ */
.twin-stage { display: none; }
@media (max-width: 1080px) {
  .hero-corp::before { display: block; opacity: .3; background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 78%); }
  .twin-stage { display: block; position: relative; height: 380px; margin: 4px -56px 0; }
  .twin-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; }
  .twin-strip { margin-top: 4px; }
}
@media (max-width: 720px) {
  .hero-grid { padding: 32px 0 28px; }
  .hero-copy { gap: 16px; }
  .hero-copy .t-display { font-size: clamp(36px, 10.4vw, 44px); }
  .hero-copy .t-lead { font-size: 16.5px; }
  .m-hide { display: none; }
  .hero-parts { display: none; }
  .hero-actions { flex-direction: column; gap: 10px; margin-top: 0; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; justify-content: center; text-align: center; }
  .twin-stage { height: 320px; margin: 0 -20px; }
  .twin-strip .live { display: none; }
  .twin-strip > div { min-height: 46px; padding: 9px 12px; }
  .twin-strip .k { font-size: 9.5px; }
  .sec { padding: 64px 0; }
  .sec-head { gap: 22px; margin-bottom: 40px; }
  .sec-head > .eyebrow { margin-bottom: -12px; }
  .kpi .v { font-size: 30px; }
  /* Prozess: Schritte als kompakte Zeilen */
  .proc { gap: 0; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 3px; padding: 16px 0; border-left: 0; border-top: 1px solid var(--c-line-d); }
  .step:last-child { border-bottom: 1px solid var(--c-line-d); }
  .step .ico { grid-row: 1 / span 4; width: 40px; height: 40px; margin: 0; }
  .step .num, .step h3, .step p, .step .dur { grid-column: 2; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 14px; }
  .step .dur { padding-top: 4px; margin-top: 0; }
  /* Anfrage: Bereichskacheln zweispaltig, ohne Untertitel */
  .rq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rq-tile { padding: 12px 10px 10px; gap: 6px; min-height: 120px; }
  .rq-tile .t { font-size: 13.5px; }
  .rq-tile .d { display: none; }
  .rq-tile .ic { width: 24px; height: 24px; }
  .rq-head { gap: 10px; }
  .rq-sel .t { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  /* Karte: lesbare Beschriftung */
  .hexmap { max-width: 100%; }
  .hexmap .hx-label { font-size: 22px; stroke-width: 6px; }
  .map-legend { font-size: 10px; gap: 6px 14px; }
  /* Akte: Zeitstempel über der Zeile */
  .console .line { grid-template-columns: 1fr; gap: 1px; }
  .console .line .ts { font-size: 11px; }
  .console-body { padding: 14px 14px 18px; }
  /* Footer zweispaltig */
  .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 48px 0 36px; }
  .ftr-brand { grid-column: 1 / -1; }
}
/* Regionsliste: Stadtnamen als Links */
.region-row .city a { color: inherit; text-decoration: none; }
.region-row .city a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Standortseiten */
.hub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.hub-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.hub-services li { display: flex; background: var(--c-white); }
.hub-services li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hub-services li a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 18px 18px; background: var(--c-white); color: var(--c-text); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.3; transition: background .2s var(--ease); }
.hub-services li a:hover { background: var(--c-off); }
.hub-services li a .ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c-text); }
.hub-services li a svg:last-child { width: 14px; height: 14px; margin-left: auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.corp .ka-spec .ka-points { margin-top: 12px; }
.notice-plan { font-size: 14px; line-height: 1.5; color: var(--c-text-2); padding: 14px 16px; border: 1px dashed var(--acid); border-radius: 6px; background: var(--c-off); margin: 0 0 24px; }
.sec-dark .notice-plan, .ka-spec .notice-plan { background: rgba(255,255,255,.04); color: var(--c-muted-d); }
@media (max-width: 1080px) { .hub-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hub-services { grid-template-columns: 1fr; } }
/* Eigenes Lager auf der Karte und in der Standortliste */
.hexmap .hx-lager { fill: var(--c-black); stroke: var(--acid); stroke-width: 2; }
.hexmap .hx-ico-lager { fill: none; stroke: var(--acid); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hexmap .hx-label-lager { fill: var(--c-text); }
.hexmap .hxc-lager:hover .hx-lager, .hexmap .hxc-lager:focus .hx-lager { fill: var(--c-graphite-2); }
.map-legend i.l { background: var(--c-black); border-color: var(--acid); }
.status.l { background: var(--c-black); border-color: var(--c-black); color: var(--acid); }
.hexmap .hx-sub { font-size: 11px; fill: var(--c-muted); }
@media (max-width: 720px) { .hexmap .hx-sub { font-size: 15px; } }
/* Leere Rasterzellen bei ungerader Anzahl vermeiden */
.regions .region:last-child:nth-child(3n+2) { grid-column: span 2; }
.company dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 1080px) { .regions .region:last-child:nth-child(3n+2) { grid-column: auto; } .regions .region:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 720px) { .regions .region:last-child { grid-column: auto; } .company dl > div:last-child { grid-column: auto; } }

/* Bündelungs-Diagramm v2 + Immobilien-Band */
.bundle .core-mark { fill: var(--c-black); }
.bundle .core-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .03em; fill: var(--c-black); }
.bundle .core-div { stroke: rgba(11,12,13,.28); stroke-width: 1; }
.bundle .core-line { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--c-black); }
.bundle .chk { fill: none; stroke: var(--c-black); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bundle .core-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; fill: rgba(11,12,13,.7); text-transform: uppercase; }
.division-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 22px; align-items: center; }
.division-wide h3 { margin: 4px 0 6px; }
.division-wide p { margin: 0; max-width: 78ch; }
.division-wide .btn-ghost { white-space: nowrap; }
@media (max-width: 1080px) { .division-wide { grid-template-columns: 44px minmax(0, 1fr); } .division-wide .btn-ghost { grid-column: 2; justify-self: start; } }

/* ============================================================
   Signatur-Details: Abschnittsleiste, Lichtspur, Magnetknöpfe, Körnung
   ============================================================ */
::selection { background: var(--acid); color: var(--c-black); }
.corp .sec-black, .corp .sec-dark, .corp .band, .corp .hero-corp { position: relative; }
.corp .sec-black > .container-x, .corp .sec-dark > .container-x, .corp .band > .container-x, .corp .hero-corp > .container-x { position: relative; z-index: 1; }
.spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(238,255,46,.075), rgba(238,255,46,0) 62%); }
.spot.on { opacity: 1; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px; }
@media (max-width: 720px), (prefers-reduced-motion: reduce) { .grain { display: none; } }
.btn-primary, .btn-ghost { will-change: transform; transition: transform .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }

.rail { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 60; display: none; flex-direction: column; gap: 10px; padding: 10px 8px; border-radius: 8px;
  background: rgba(11,12,13,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; translate: -8px 0; transition: opacity .35s var(--ease), translate .35s var(--ease); }
body.rail-on .rail { opacity: 1; translate: 0 0; }
@media (min-width: 1360px) and (hover: hover) { .rail { display: flex; } }
.rail a { display: grid; grid-template-columns: 8px auto 0fr; align-items: center; gap: 0 10px; text-decoration: none; color: var(--c-muted-d); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: 2px 0; transition: color .2s var(--ease), grid-template-columns .3s var(--ease); overflow: hidden; }
.rail a i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.rail a b { font-weight: 400; white-space: nowrap; overflow: hidden; opacity: 0; min-width: 0; transition: opacity .2s var(--ease); }
.rail:hover a { grid-template-columns: 8px auto 1fr; }
.rail:hover a b { opacity: 1; padding-right: 4px; }
.rail a.on { color: var(--c-white); }
.rail a.on i { background: var(--acid); box-shadow: 0 0 0 3px rgba(238,255,46,.18); }
.rail a:hover { color: var(--c-white); }

/* ===== v3: helle, reduzierte Startseite nah am Ursprungsdesign ===== */
body.v3 { background: #fff; color: var(--ink); padding-top: 0; --hdr-h: 72px; } /* Kopfzeile ist sticky, kein Freihalten mehr nötig; der leere Streifen darüber ist weg [Auskunft PL, 2026-09-14]. Höhe 72 px, weil die obere Leiste in v3 ausgeblendet ist */
body.v3 .spot, body.v3 .grain, body.v3 .rail { display: none !important; }
body.v3 .hdr { position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--n-subtler); }
body.v3 .hdr.scrolled { background: rgba(255,255,255,.96); }
body.v3 .hdr-top { display: none; }
body.v3 .hdr .logo, body.v3 .hdr .logo-word, body.v3 .nav-link, body.v3 .hdr-nav a { color: var(--ink); }
body.v3 .nav-link:hover, body.v3 .nav-item.open > .nav-link { background: var(--n-subtlest); }
body.v3 .hdr .logo svg rect:first-child { stroke: transparent; }
/* Menüknopf auf heller Kopfzeile: vorher weiße Balken auf Weiß, also unsichtbar [Korrektur PL, 2026-09-13] */
body.v3 .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 46px; min-width: 46px; height: 46px; padding: 0; line-height: 1; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--n-subtlest); color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 500; }
body.v3 .nav-toggle::after { content: none; } /* nur noch die drei Linien, kein Wort [Auskunft PL, 2026-09-14]; Bedeutung trägt das aria-label */
body.v3 .nav-toggle[aria-expanded="true"]::after { content: "Schließen"; }
/* Balken: kein absolutes Versetzen mehr, der Träger ist ein Flex-Kind und liegt damit mittig; Beschriftung ebenso [Korrektur PL, 2026-09-13, "brutal verschoben"] */
body.v3 .nav-toggle span { position: relative; top: auto; left: auto; right: auto; flex: 0 0 20px; width: 20px; height: 2px; background: var(--ink); }
body.v3 .nav-toggle span::before, body.v3 .nav-toggle span::after { position: absolute; left: 0; right: auto; width: 20px; height: 2px; background: var(--ink); }
body.v3 .nav-toggle[aria-expanded="true"] span { background: transparent; }
/* Offen: nur das Zeichen, kein Wort. Die Balken werden zum Kreuz, der Kasten wird quadratisch [Auskunft PL, 2026-09-14] */
body.v3 .nav-toggle[aria-expanded="true"] { gap: 0; padding: 0; width: 46px; }
body.v3 .nav-toggle[aria-expanded="true"]::after { content: none; }
/* Wortmarke statt Bildmarke: „raumretter." in der Überschriftenschrift, Punkt in der Akzentfarbe [Vorschlag Sascha, Auskunft PL, 2026-09-14] */
.hdr .logo svg, .ftr-brand .logo svg { display: none; }
.hdr .logo-word, .ftr-brand .logo-word { font-family: var(--font-display); font-weight: 800; font-size: 31px; line-height: 1; text-transform: lowercase; letter-spacing: 0.005em; } /* Schrift des alten Logos (Barlow Condensed 800), wie der PL es voraussetzt [Korrektur PL, 2026-09-14]; 31 px statt 26, weil die schmale Schrift sonst kleiner wirkt */
.hdr .logo-word::after, .ftr-brand .logo-word::after { content: "."; color: var(--acid); }
/* Im Kopf deutlich größer, damit die Marke neben den Überschriften heraussticht [Auskunft PL, 2026-09-14]; 44 px Zeile passt in die 72 px des Balkens, der Balken bleibt */
.hdr .logo-word { font-size: 44px; }
@media (max-width: 440px) { .hdr-cta .btn-primary { display: none; } } /* zwischen 421 und 440 px würde der Knopf sonst an die größere Wortmarke stoßen */
/* Auf der hellen Kopfzeile wäre der gelbe Punkt fast unsichtbar (Gelb auf Weiß); dort bleibt er in der Schriftfarbe */
body.v3 .hdr .logo-word::after { color: var(--ink); }
/* Offenes Menü auf der hellen Seite: hell, große Einträge, Daumen trifft */
body.v3 .mobile-nav.open { background: #fff; border-top: 1px solid var(--n-subtler); box-shadow: 0 24px 40px rgba(24,26,26,.08); }
body.v3 .mobile-nav .grp { border-bottom-color: var(--n-subtler); }
body.v3 .mobile-nav .grp > span { color: var(--n-bold); }
body.v3 .mobile-nav a { color: var(--ink); }
body.v3 .mobile-nav a.top { font-size: 21px; }
body.v3 .mega { background: #fff; color: var(--ink); border: 1px solid var(--n-subtler); box-shadow: 0 24px 60px rgba(24,26,26,.12); }
body.v3 .mega a, body.v3 .mega p, body.v3 .mega .t { color: var(--ink); }
body.v3 .mega .k { color: var(--n-bold); }
body.v3 .mega .k b { color: var(--ink); }
body.v3 .mega-aside { background: var(--n-subtlest); }
body.v3 .mega a:hover { color: var(--ink); background: var(--n-subtlest); }
body.v3 .hero { padding: 64px 48px 80px; background: #fff; }
body.v3 .hero-stage { min-height: 460px; }
body.v3 .h1 { font-size: clamp(46px, 7.4vw, 96px); }
body.v3 h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.02em; margin: 0; color: inherit; }
body.v3 .section-head.center .p1 { max-width: 620px; }
body.v3 section.block { padding: 112px 48px; }
.h3-card { background: #fff; border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(24,26,26,.18); padding: 28px; width: min(580px, 100%); position: relative; z-index: 3; }
.h3-card .cardtitle { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; color: var(--n-bold); margin: 0 0 16px; }
.h3-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h3-tiles a { display: flex; align-items: center; min-height: 56px; padding: 12px 14px; border: 1px solid var(--n-subtle); border-radius: var(--r-md); background: var(--n-subtlest); color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); }
.h3-tiles a:hover { border-color: var(--ink); background: #fff; transform: translateY(-1px); }
.h3-tiles a::after { content: "→"; margin-left: auto; padding-left: 10px; color: var(--n-base); }
.h3-tiles a:hover::after { color: var(--ink); }
.h3-off { background: var(--n-subtlest); }
.h3-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.h3-col { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; }
.h3-col .k { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--n-bold); margin: 0 0 10px; letter-spacing: .06em; }
.h3-col .k b { color: var(--ink); margin-right: 6px; font-weight: 400; }
.h3-col a { color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; padding: 11px 0; border-bottom: 1px solid var(--n-subtler); display: flex; justify-content: space-between; gap: 12px; }
.h3-col a::after { content: "→"; color: var(--n-base); flex: 0 0 auto; }
.h3-col a:hover::after { color: var(--ink); }
.h3-note { text-align: center; color: var(--n-bold); margin: 0; font-size: 17px; max-width: 760px; align-self: center; }
.h3-note a { color: var(--ink); }
.h3-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.h3-step { background: #fff; border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.h3-step .num { display: inline-flex; width: 38px; height: 38px; border-radius: 999px; background: var(--acid); align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; }
.h3-step h3 { margin: 4px 0 0; font-family: var(--font-head); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; }
.h3-step p { margin: 0; color: var(--n-bold); font-size: 16.5px; line-height: 1.45; }
.h3-step .meta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--n-bold); margin-top: auto; padding-top: 10px; }
.h3-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; }
.h3-price { border-top: 1px solid var(--n-subtle); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.h3-price .l { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.h3-price .l small { display: block; font-weight: 400; color: var(--n-bold); font-size: 14px; margin-top: 3px; }
.h3-price .v { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.h3-price .v .mark { background: var(--acid); padding: 0 5px; }
.h3-price .v-text { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.3; text-transform: none; white-space: normal; text-align: right; max-width: 12ch; }
.h3-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--n-bold); font-size: 15px; }
.h3-foot a { color: var(--ink); text-decoration: none; font-weight: 500; }
.h3-foot a:hover { text-decoration: underline; }
.h3-band { background: var(--ink); color: #fff; padding: 96px 48px; }
.h3-band .block-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
.h3-band .pretitle { color: var(--n-base); margin-bottom: 16px; }
.h3-band h2 { color: #fff; margin-bottom: 16px; }
.h3-band p { color: var(--n-base); max-width: 600px; margin: 0; }
body.v3 #regionen, body.v3 #faq { padding: 112px 48px; }
@media (max-width: 1080px) {
  .h3-cols { grid-template-columns: 1fr 1fr; }
  .h3-steps { grid-template-columns: 1fr; }
  .h3-step { min-height: 0; }
  .h3-prices { grid-template-columns: 1fr 1fr; }
  .h3-band .block-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  body.v3 .hero { padding: 40px 20px 56px; }
  body.v3 section.block, .h3-band, body.v3 #regionen, body.v3 #faq { padding: 72px 20px; }
  body.v3 .hero-stage { min-height: 0; padding: 24px 14px; }
  body.v3 .cert { display: none; }
  .h3-card { padding: 20px; }
  .h3-tiles { grid-template-columns: 1fr; }
  .h3-cols, .h3-prices { grid-template-columns: 1fr; }
  .h3-price .v { font-size: 28px; }
}
body.v3 .t-h2 { font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.02em; }
/* v3: Kopfbereich der Unterseiten hell statt schwarz */
body.v3 .hdr + .sec-black, body.v3 .hdr + .sec-dark, body.v3 .hdr + svg + .sec-black, body.v3 .hdr + svg + .sec-dark { background: #fff; color: var(--ink); border-bottom: 1px solid var(--n-subtler); }
body.v3 .hdr + .sec-black .t-h1, body.v3 .hdr + .sec-dark .t-h1, body.v3 .hdr + svg + .sec-black .t-h1, body.v3 .hdr + svg + .sec-dark .t-h1, body.v3 .hdr + .sec-black h1, body.v3 .hdr + .sec-dark h1, body.v3 .hdr + svg + .sec-black h1, body.v3 .hdr + svg + .sec-dark h1 { color: var(--ink); }
body.v3 .hdr + .sec-black .eyebrow, body.v3 .hdr + .sec-dark .eyebrow, body.v3 .hdr + svg + .sec-black .eyebrow, body.v3 .hdr + svg + .sec-dark .eyebrow, body.v3 .hdr + .sec-black .t-lead, body.v3 .hdr + .sec-dark .t-lead, body.v3 .hdr + svg + .sec-black .t-lead, body.v3 .hdr + svg + .sec-dark .t-lead, body.v3 .hdr + .sec-black .t-body, body.v3 .hdr + .sec-dark .t-body, body.v3 .hdr + svg + .sec-black .t-body, body.v3 .hdr + svg + .sec-dark .t-body, body.v3 .hdr + .sec-black p, body.v3 .hdr + .sec-dark p, body.v3 .hdr + svg + .sec-black p, body.v3 .hdr + svg + .sec-dark p { color: var(--n-bold); }
body.v3 .hdr + .sec-black .btn-ghost, body.v3 .hdr + .sec-dark .btn-ghost, body.v3 .hdr + svg + .sec-black .btn-ghost, body.v3 .hdr + svg + .sec-dark .btn-ghost { border-color: var(--n-subtle); color: var(--ink); }

/* ============================================================
   Kleine Bildschirme, ergänzt 2026-09-12.
   Befund aus der Messung über 8 Breiten × 10 Seiten:
   (1) Tabellen liefen seitlich aus dem Bild, weil `.tablewrap`
       nur innerhalb `.article` scrollbar war — die Zielgruppen-
       seiten haben kein `.article`.
   (2) Unter 360 px schob der Kopfbereich das Dokument um 15 px
       nach rechts (Innenabstand 56 px beidseitig plus Schaltfläche).
   (3) Der Preisblock brach bei „ab 2.725 €" aus, weil der Betrag
       nicht umbrechen darf.
   ============================================================ */

/* (1) Tabellen sind überall für sich scrollbar, nicht nur im Artikel */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; box-sizing: border-box; }
.tablewrap > table { min-width: max-content; }

/* KEIN `html, body { overflow-x: hidden }` als Sicherheitsnetz.
   Am 2026-09-12 probiert und wieder entfernt: Es legt auf dieser Seite
   das vertikale Scrollen komplett lahm (scrollY bleibt 0) und bricht
   damit auch den klebenden Kopfbereich. Die Überläufe sind stattdessen
   an der Ursache behoben, siehe die Regeln unten. */

@media (max-width: 720px) {
  /* (2) Innenabstände und Kopfbereich für schmale Geräte */
  .corp .container-x { padding: 0 20px; }
  .hdr-main .container-x { gap: 12px; }
  .hdr-cta { gap: 8px; }
  .hdr-cta .btn-primary { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
  .hdr-top .container-x { gap: 10px; font-size: 9.5px; }
}

@media (max-width: 420px) {
  .corp .container-x { padding: 0 16px; }
  /* Auf sehr schmalen Geräten trägt die Schaltfläche allein, der Menüknopf genügt */
  .hdr-cta .btn-primary { display: none; }
  .hdr-top .container-x .right span:not(:last-child) { display: none; }
  /* (3) Preisblock: Betrag darf kleiner werden statt auszubrechen */
  .h3-price { gap: 10px; }
  .h3-price .v { font-size: 24px; }
  .h3-price .l { font-size: 16px; }
  .h3-price .v-text { max-width: 10ch; font-size: 14px; }
}
@media (max-width: 420px) {
  /* Reste aus der Messung: lange Wörter und feste Innenabstände auf 320 px */
  .sec-head, .sec-head > * { max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
  .rq-steps, .rq-steps > li { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
  .rq-steps { padding-left: 18px; }
}
@media (max-width: 720px) {
  /* Kontaktbereich: einspaltig, nichts schiebt seitlich hinaus */
  .contact { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-side, .contact-side > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
}
@media (max-width: 420px) {
  /* Tippziele nicht unter die gut treffbare Größe fallen lassen */
  .ftr a, .hdr-top a { display: inline-block; padding: 6px 0; }
}
/* Rechtstexte auf schmalen Geraeten: lange Woerter und Adressen brechen um,
   statt die Seite zu dehnen. Betrifft nur die Darstellung, nicht den Wortlaut. */
@media (max-width: 480px) {
  .article p, .article li, .article dd, .article td, .article th, .article address, address,
  .legal p, .legal li, .legal dd, .legal address {
    overflow-wrap: anywhere; hyphens: auto;
  }
  /* Ueberschriften der Rechtstexte: "Geschaeftsbedingungen" passt sonst nicht in 320 px */
  .legal h1, .legal h2, .legal h3, .article h1, .article h2, .article h3 {
    overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
  }
  .ftr-top a, .ftr-top h4 { overflow-wrap: anywhere; }
}

/* ============================================================
   Scroll-Story „Die Wohnung" (Startseite, nach dem Hero)
   Sticky-Bühne; die Höhe des Wrappers bestimmt die Scrollstrecke.
   Farben ausschließlich aus dem Design-System.
   ============================================================ */
.flat-scroll { position: relative; height: 1150vh; background: var(--n-subtlest); }
.flat-stage {
  position: sticky; top: var(--hdr-h, 72px);
  height: calc(100vh - var(--hdr-h, 72px));
  height: calc(100dvh - var(--hdr-h, 72px)); /* sichtbare Höhe: sonst verdeckt die Browserleiste auf dem Handy den Hinweis „Weiterscrollen“ [Korrektur PL, 2026-09-13] */
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  align-items: center; justify-items: center;
  padding: 24px 20px 18px; box-sizing: border-box; overflow: hidden;
}
.flat-head { text-align: center; max-width: 760px; }
.flat-head .eyebrow { margin-bottom: 6px; }
.flat-head .t-h2 { margin: 0 0 10px; }
.flat-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  background: var(--acid); display: inline-block;
  padding: 5px 12px; border-radius: 999px; margin: 0;
}
.flat-svg { width: 100%; height: 100%; max-height: 62vh; display: block; }
.flat-hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); margin: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--n-subtle); border-radius: 999px; background: var(--white);
  animation: flat-puls 1.8s ease-in-out infinite;
}
.flat-hint::after { content: "↓"; font-size: 13px; }
@keyframes flat-puls { 0%, 100% { opacity: .55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .flat-hint { animation: none; } }
.flat-scroll g, .flat-scroll polygon, .flat-scroll ellipse, .flat-scroll circle { transition: none; }

@media (max-width: 900px) {
  .flat-scroll { height: 850vh; }
  .flat-svg { max-height: 52vh; }
}
@media (max-width: 560px) {
  .flat-scroll { height: 700vh; }
  .flat-stage { padding: 16px 14px 12px; }
  .flat-svg { max-height: 46vh; }
  .flat-head .t-h2 { font-size: clamp(22px, 6vw, 30px); }
  .flat-label { font-size: 11px; padding: 4px 10px; }
}
/* Ohne Bewegung: Bühne nicht klebend, Szene einmal ruhig im Bild */
@media (prefers-reduced-motion: reduce) {
  .flat-scroll { height: auto; }
  .flat-stage { position: static; height: auto; padding: 56px 20px; }
  .flat-hint { display: none; }
}
/* Rahmen der Scroll-Story: schneidet alles ab, was sich aus dem Bild bewegt.
   Der Clip im SVG allein genuegt nicht, weil das svg-Element breiter sein kann
   als die viewBox — dort wuerden Teile seitlich sichtbar. [Korrektur PL, 2026-09-12] */
.flat-rahmen { width: 100%; max-width: 100%; min-width: 0; height: 100%; overflow: hidden; display: grid; place-items: center; min-height: 0; }
.flat-rahmen > .flat-svg { max-width: 100%; max-height: 100%; }
/* Ohne Bewegung: drei feste Zustaende untereinander statt Animation */
.flat-scroll[data-ruhig] { height: auto; }
.flat-scroll[data-ruhig] .flat-stage { position: static; height: auto; padding: 56px 20px; }
.flat-scroll[data-ruhig] .flat-hint { display: none; }
.flat-scroll[data-ruhig] .flat-rahmen { display: grid; gap: 14px; overflow: visible; height: auto; justify-items: center; }
.flat-scroll[data-ruhig] .flat-rahmen > .flat-svg { max-height: 60vh; }
.flat-scroll[data-ruhig] .flat-rahmen > .flat-label { margin-top: 28px; }

/* ===== Wortwechsel in der Hero-Überschrift [Auskunft PL, 2026-09-14]: nutzbaren → vermietbaren → besenreinen → übergabefertigen.
   Das Wort steht allein in seiner Zeile; der unsichtbare Platzhalter trägt das längste Wort, damit nichts springt.
   Farbe: Marker in Gelb mit dunkler Schrift, weil gelbe Schrift auf dem weißen Hero nicht lesbar wäre. ===== */
body.v3 .h1 { width: max-content; max-width: calc(100vw - 96px); }
.wechsel { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.08; margin: -0.04em 0; padding: 0 0.08em; }
/* Der Marker sitzt am Wort selbst und wächst mit ihm; der Platzhalter hält nur noch die Zeile [Auskunft PL, 2026-09-14: „immer nur so groß wie das Wort“] */
.wechsel-mark { display: inline-block; padding: 0 0.08em; background: var(--acid); color: var(--ink); border-radius: 0.06em; }
.wechsel-mass { visibility: hidden; }
.wechsel-wort { position: absolute; inset: 0; text-align: center; transform: translateY(0); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.wechsel-wort.kommt { transform: translateY(100%); opacity: 0; transition: none; }
.wechsel-wort.geht { transform: translateY(-100%); opacity: 0; }
@media (max-width: 720px) {
  /* Zeile 1 „Räume zurück in den“ ist 8,1 em breit; die Schrift wird eine Spur kleiner statt mitten im Satz umzubrechen */
  body.v3 .h1 { font-size: clamp(34px, 10.6vw, 46px); max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wechsel-wort { transition: none; } }