/* Copperline Plumbing, Demo-Website von TEAM Gold LLC. Erste Fassung (Oktober 2026).

   Gestaltungsidee: Bauplan und Kupfer. Ein Installateur, der erst zeichnet und dann
   repariert. Blaupausen-Tiefblau mit feinem Raster, Papierweiß wie ein ausgedrucktes
   Blatt, Kupfer als einzige warme Farbe. Wasserblau taucht nur dort auf, wo Wasser
   wirklich fließt. Red Hat Display für Überschriften, Red Hat Mono für Blattnummern,
   Maße und Preise. Jede Überschrift trägt eine Blattnummer wie auf einem Plan.

   Bewegung: technisch und ruhig. Maßlinien ziehen sich einmal, Wasser läuft einmal
   durch die gewählte Leitung, das Ventil dreht sich einmal zu. Keine Endlosschleife,
   prefers-reduced-motion zeigt sofort den Endzustand. */

:root {
  --navy: #0e2a47;
  --navy-2: #13355a;
  --navy-3: #1b4470;
  --paper: #f4f1ea;
  --paper-2: #e9e4d8;
  --ink: #0f1d2b;
  --ink-soft: #4b5866;
  --copper: #b8693d;
  --copper-2: #9c5530;
  --water: #3fa7d6;
  --line-l: rgba(244, 241, 234, 0.16);
  --line-l2: rgba(244, 241, 234, 0.34);
  --line-d: rgba(15, 29, 43, 0.16);
  --line-d2: rgba(15, 29, 43, 0.4);
  --text: #eef0ee;
  --text-dim: #a9b8c8;

  --sans: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --draw: cubic-bezier(0.65, 0, 0.35, 1);
  --out: cubic-bezier(0.2, 0, 0, 1);

  --gutter: clamp(18px, 4vw, 56px);
  --max: 1240px;
  --hdr-h: 70px;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--out) both vt-out; }
::view-transition-new(root) { animation: 340ms var(--out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.hdr { view-transition-name: site-header; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
::selection { background: var(--copper); color: #fff; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--copper); color: #fff; padding: 10px 16px; }
.skip:focus { left: 8px; }

/* Blaupausen-Raster für dunkle Flächen */
.hero, .sec-navy, .foot, .sheet {
  background-color: var(--navy);
  background-image: linear-gradient(var(--line-l) 1px, transparent 1px), linear-gradient(90deg, var(--line-l) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* Schrift --------------------------------------------------------------- */
.t-xxl, .t-xl, .t-l, .t-m { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; overflow-wrap: break-word; text-wrap: balance; }
.t-xxl { font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: 0.98; }
.t-xl { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.02; }
.t-l { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.08; }
.t-m { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
.t-xxl em, .t-xl em, .t-l em { font-style: normal; color: var(--copper); }
.tag { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
.tag .no { color: var(--copper); border: 1px solid currentColor; padding: 1px 7px; letter-spacing: 0.04em; white-space: nowrap; flex: none; }
.mono-lbl { display: block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.lede { font-size: clamp(1.06rem, 1.35vw, 1.18rem); color: var(--ink-soft); max-width: 50ch; line-height: 1.65; }
.dim { color: var(--ink-soft); }
.small { font-size: 0.88rem; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Knöpfe ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none; background: var(--navy); color: #fff; font-weight: 700; font-size: 1rem; transition: background-color 150ms linear; }
.btn:hover { background: var(--navy-3); }
.btn .arr { transition: transform 260ms var(--draw); }
.btn:hover .arr { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-d2); }
.btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--copper); color: var(--copper-2); }
.btn-copper { background: var(--copper); }
.btn-copper:hover { background: var(--copper-2); }
.btn-ink { background: var(--ink); }
.btn-ghost-ink { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--mono); }
.btn-ghost-ink:hover { background: rgba(15, 29, 43, 0.08); }
.btn-sm { padding: 9px 16px; font-size: 0.92rem; }
.link { color: var(--copper-2); text-decoration: none; font-weight: 700; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.link:hover { color: var(--navy); }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--copper-2); font-weight: 700; border-bottom: 1.5px solid currentColor; }

/* Dunkle Flächen: Farben umdrehen */
.hero, .sec-navy, .foot { color: var(--text); }
.hero .lede, .sec-navy .lede, .hero .dim, .sec-navy .dim { color: var(--text-dim); }
.hero .tag, .sec-navy .tag { color: var(--text-dim); }
.hero .btn { background: var(--copper); }
.hero .btn:hover { background: var(--copper-2); }
.hero .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-l2); }
.hero .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--copper); color: #f0b48e; }

/* Kopfzeile ------------------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h); display: flex; align-items: center; background: rgba(14, 42, 71, 0.96); color: var(--text); border-bottom: 1px solid var(--line-l); }
.hdr .wrap { width: 100%; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 34px; height: 34px; color: var(--copper); flex: none; }
.brand b { display: block; font-weight: 800; font-size: 1.22rem; line-height: 1; letter-spacing: -0.01em; }
.brand small { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.06em; margin-top: 4px; text-transform: uppercase; }
.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; font-size: 0.95rem; font-weight: 600; color: var(--text-dim); position: relative; padding: 6px 0; transition: color 150ms linear; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--draw); }
.nav a:hover { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--text); }
.status { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.status .lamp { width: 8px; height: 8px; border: 1.5px solid var(--text-dim); }
.status.is-open .lamp { background: var(--water); border-color: var(--water); }
.status strong { color: var(--text); font-weight: 600; }
.lang { background: none; border: 1.5px solid var(--line-l2); border-radius: 2px; padding: 4px 9px; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--text); }
.lang:hover { border-color: var(--copper); }
.hdr .btn { background: var(--copper); }
.hdr .btn:hover { background: var(--copper-2); }
.menu-btn { display: none; width: 44px; height: 44px; background: var(--navy-3); border: 0; border-radius: 2px; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--text); transition: transform 300ms var(--draw); }
.menu-btn span:first-child { top: 17px; } .menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; color: var(--text); padding: calc(var(--hdr-h) + 22px) var(--gutter) 28px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 480ms var(--draw), visibility 0s 480ms; }
.menu-open .sheet { clip-path: inset(0); visibility: visible; transition: clip-path 480ms var(--draw); }
.sheet nav { display: grid; }
.sheet nav a { font-weight: 800; font-size: clamp(1.8rem, 8vw, 2.5rem); line-height: 1.2; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line-l); letter-spacing: -0.02em; }
.sheet nav a[aria-current="page"] { color: var(--copper); }
.sheet-foot { display: grid; gap: 4px; color: var(--text-dim); font-size: 0.92rem; font-family: var(--mono); }
.menu-open { overflow: hidden; }
@media (max-width: 1180px) { .nav { display: none; } .menu-btn { display: block; } }
@media (max-width: 640px) { .hdr .status, .hdr .btn { display: none; } }

/* Einblendungen --------------------------------------------------------- */
.js [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--out), transform 700ms var(--out); transition-delay: var(--d, 0ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.js .hero [data-hero] { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--out), transform 700ms var(--out); transition-delay: var(--d, 0ms); }
.js .hero.is-up [data-hero] { opacity: 1; transform: none; }

/* Maßlinie unter Seitenköpfen: zieht sich einmal */
.dim-line { position: relative; height: 18px; margin-top: 46px; }
.dim-line::before, .dim-line::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--ink-soft); }
.dim-line::before { left: 0; } .dim-line::after { right: 0; }
.dim-line i { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink-soft); transform-origin: left; }
.js .dim-line i { transform: scaleX(0); transition: transform 1100ms var(--draw) 250ms; }
.js .dim-line.is-in i { transform: scaleX(1); }

/* Abschnitte ------------------------------------------------------------ */
.sec { padding: clamp(76px, 10vw, 140px) 0; }
.sec-paper { background: var(--paper-2); }
.sec-copper { background: var(--copper); color: var(--ink); }
.sec-copper .lede { color: #3b2216; }
.head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 780px; }
.head .t-l + .lede { margin-top: 16px; }
.head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }
.plate { margin: 0; border: 1.5px solid var(--ink); padding: 10px; background: var(--paper); }
.plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Hero ------------------------------------------------------------------ */
.hero { padding: calc(var(--hdr-h) + clamp(44px, 7vw, 96px)) 0 clamp(64px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-plate { margin: 0; background: var(--paper); padding: 12px; border: 1.5px solid var(--paper); position: relative; }
.hero-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.title-block { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); border-top: 0; color: var(--ink); }
.title-block span { padding: 8px 10px; border-left: 1.5px solid var(--ink); min-width: 0; }
.title-block span:first-child { border-left: 0; }
.title-block small { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.title-block b { display: block; font-family: var(--mono); font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-plate { max-width: 520px; } }
@media (max-width: 480px) { .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } .title-block span:nth-child(3) { border-left: 0; } .title-block span:nth-child(n+3) { border-top: 1.5px solid var(--ink); } }

/* Rohrplan -------------------------------------------------------------- */
.plan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.plan-art { background: var(--paper); border: 1.5px solid var(--ink); padding: clamp(8px, 2vw, 20px); }
svg.iso { display: block; width: 100%; height: auto; }
.iso .wall { fill: rgba(14, 42, 71, 0.04); stroke: var(--ink-soft); stroke-width: 1; }
.iso .slab { fill: rgba(14, 42, 71, 0.07); stroke: var(--ink); stroke-width: 1.5; }
.iso .grid { stroke: rgba(15, 29, 43, 0.12); stroke-width: 1; fill: none; }
.iso .pipe { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.iso .pipe.cold { stroke: var(--copper); }
.iso .pipe.hot { stroke: var(--copper-2); stroke-dasharray: 10 5; }
.iso .pipe.drain { stroke: #7d8894; stroke-width: 5; stroke-dasharray: 3 5; }
.iso .flow { fill: none; stroke: var(--water); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.iso .flow.run { opacity: 1; }
.iso .unit .f-top { fill: #fff; } .iso .unit .f-front { fill: #e3ddd0; } .iso .unit .f-side { fill: #cfc7b6; }
.iso .unit polygon { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.iso .fx { cursor: pointer; }
.iso .fx:hover .f-top, .iso .fx.on .f-top { fill: #f6e2d4; }
.iso .fx.on .unit polygon { stroke: var(--copper-2); stroke-width: 2; }
.iso .valve { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.iso .valve-bar { stroke: var(--ink); stroke-width: 2.5; }
.iso .fx.on .valve { fill: var(--water); stroke: var(--navy); }
.iso .callout path { stroke: var(--ink-soft); stroke-width: 1; fill: none; }
.iso .callout text, .iso .legend text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--ink); }
.iso .legend .pipe { stroke-width: 4; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.fx-tabs button { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px; padding: 8px 12px; cursor: pointer; font-size: 0.92rem; font-weight: 600; transition: background-color 150ms linear, color 150ms linear; }
.fx-tabs button:hover { border-color: var(--copper); }
.fx-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.fx-panel .t-m { margin-bottom: 10px; }
.fx-panel .mono-lbl { margin: 18px 0 8px; }
.ticks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 10px; height: 1.5px; background: var(--copper); }
@media (max-width: 960px) { .plan { grid-template-columns: minmax(0, 1fr); } }
/* Am Handy wären die Beschriftungen im Plan kleiner als 6 px; die Reiter darunter nennen dieselben Teile */
@media (max-width: 600px) { .iso .callout { display: none; } }

/* Tropfrechner ---------------------------------------------------------- */
.drip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.drip-in .mono-lbl { margin-bottom: 10px; }
.drip-row { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.drip-row input { flex: 1; min-width: 0; accent-color: var(--copper); height: 28px; }
.drip-val { font-family: var(--mono); font-size: 2rem; font-weight: 600; min-width: 3ch; text-align: right; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); margin-bottom: 20px; }
.stepper button { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 1.3rem; }
.stepper button:hover { background: var(--paper-2); }
.stepper output { min-width: 3ch; text-align: center; font-size: 1.2rem; font-weight: 600; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); line-height: 44px; }
.drip-out { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 28px; align-items: end; }
.tank { position: relative; height: 220px; border: 1.5px solid var(--ink); border-top: 0; background: var(--paper); overflow: hidden; }
.tank i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill, 0) * 100%); background: var(--water); transition: height 900ms var(--draw); }
.tank .tick { position: absolute; left: 0; width: 12px; height: 1.5px; background: var(--ink); bottom: var(--y); }
.drip-res { margin: 0; display: grid; gap: 14px; }
.drip-res div { border-top: 1.5px solid var(--line-d2); padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.drip-res dt { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.drip-res dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 1.15rem; text-align: right; }
.drip-res .big dd { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--copper-2); }
.drip-res dd small { display: block; font-size: 0.7rem; color: var(--ink-soft); font-weight: 400; }
.drip-out .assume { grid-column: 1 / -1; margin-top: 4px; border-left: 2px solid var(--copper); padding-left: 12px; }
@media (max-width: 880px) { .drip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .drip-out { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; } .tank { height: 180px; } }

/* Leistungsliste -------------------------------------------------------- */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 72px); border-top: 1.5px solid var(--ink); }
.svc-list li { border-bottom: 1px solid var(--line-d2); }
.svc-list a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 20px 0; text-decoration: none; }
.svc-list .code { font-family: var(--mono); font-size: 0.82rem; color: var(--copper-2); }
.svc-list .nm { font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.svc-list .pr { font-family: var(--mono); font-size: 0.86rem; color: var(--ink-soft); white-space: nowrap; }
.svc-list a:hover .nm { color: var(--copper-2); }
@media (max-width: 760px) { .svc-list { grid-template-columns: minmax(0, 1fr); } .svc-list a { grid-template-columns: 3.4rem minmax(0, 1fr); } .svc-list .pr { grid-column: 2; } }

/* Stimmen --------------------------------------------------------------- */
.notes { display: grid; gap: 26px; }
.notes figure { margin: 0; background: var(--paper); border: 1.5px solid var(--ink); padding: 24px 26px; position: relative; }
.notes figure::before { content: ""; position: absolute; top: -1.5px; left: 24px; width: 48px; height: 4px; background: var(--copper); }
.notes blockquote { margin: 0 0 14px; font-size: 1.12rem; line-height: 1.55; font-weight: 500; }
.notes figcaption { font-size: 0.92rem; color: var(--ink-soft); }
.notes figcaption b { color: var(--ink); margin-right: 6px; }
.notes-all { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.notes-all figcaption { margin-bottom: 12px; }
.notes-all .who { margin: 0; font-weight: 700; }
@media (max-width: 760px) { .notes-all { grid-template-columns: minmax(0, 1fr); } }

.cta-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 32px; align-items: end; }
.cta-row .t-xl { max-width: 16ch; margin-bottom: 18px; }
.cta-btns { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 860px) { .cta-row { grid-template-columns: minmax(0, 1fr); } }

/* Seitenkopf ------------------------------------------------------------ */
.phead { padding: calc(var(--hdr-h) + clamp(48px, 8vw, 100px)) 0 clamp(24px, 4vw, 40px); }
.phead .t-xl { max-width: 20ch; margin-bottom: 22px; }
.crumbs { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 30px; }

/* Leistungen im Detail -------------------------------------------------- */
.svc { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: clamp(20px, 4vw, 56px); padding: clamp(40px, 6vw, 70px) 0; border-top: 1.5px solid var(--ink); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.svc:first-child { padding-top: 0; border-top: 0; }
.svc.has-pic { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 0.8fr); }
.svc-code { display: grid; align-content: start; gap: 6px; font-family: var(--mono); }
.svc-code span { color: var(--copper-2); font-size: 1.5rem; font-weight: 600; }
.svc-code b { font-weight: 500; font-size: 0.86rem; color: var(--ink-soft); }
.svc-body .t-l { margin-bottom: 16px; }
.svc-pic { margin: 0; border: 1.5px solid var(--ink); padding: 8px; background: #fff; align-self: start; }
.svc-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 960px) { .svc, .svc.has-pic { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } .svc-code { grid-auto-flow: column; justify-content: start; gap: 18px; align-items: baseline; } .svc-pic { max-width: 460px; } }

.faq details { border-top: 1.5px solid var(--ink); }
.faq details:last-child { border-bottom: 1.5px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 700; font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.3rem; color: var(--copper-2); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-soft); max-width: 60ch; }

/* Preise ---------------------------------------------------------------- */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.price-table th:last-child, .price-table td:last-child { text-align: right; }
.price-table td { padding: 16px 0; border-bottom: 1px solid var(--line-d2); vertical-align: top; }
.price-table td b { display: block; font-size: 1.1rem; }
.price-table td span.dim { font-size: 0.92rem; }
.price-table td.num { font-weight: 600; white-space: nowrap; padding-left: 16px; }
.demo-note { font-size: 0.85rem; color: var(--ink-soft); border-left: 2px solid var(--copper); padding-left: 14px; margin-top: 28px; max-width: 70ch; }

/* Notfall --------------------------------------------------------------- */
.triage { max-width: 860px; }
.q { border: 0; padding: 0; margin: 0; }
.q legend { padding: 0; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 26px; }
.q legend .mono-lbl { margin-bottom: 12px; font-weight: 400; letter-spacing: 0.08em; }
.yn { display: flex; gap: 12px; flex-wrap: wrap; }
.yn .btn { min-width: 120px; justify-content: center; }
.js .q:not([hidden]) { animation: qin 420ms var(--out) both; }
@keyframes qin { from { opacity: 0; transform: translateX(16px); } }
.result { border: 1.5px solid var(--ink); background: #fff; padding: clamp(22px, 4vw, 40px); position: relative; }
.result::before { content: ""; position: absolute; left: -1.5px; top: -1.5px; bottom: -1.5px; width: 6px; background: var(--copper); }
.result[data-res="gas"]::before, .result[data-res="now"]::before { background: #c0392b; }
.result .t-m { margin-bottom: 14px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; }
@media (max-width: 680px) { .res-grid { grid-template-columns: minmax(0, 1fr); } .valve-art { max-width: 200px; } }
.steps { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 10px; }
.steps li::marker { font-family: var(--mono); color: var(--copper-2); font-weight: 600; }
.steps-big { gap: 18px; font-size: 1.08rem; }
.valve-art { width: 100%; }
.valve-art .vp { stroke: var(--copper); stroke-width: 10; }
.valve-art .vb { fill: #e3ddd0; stroke: var(--ink); stroke-width: 2; }
.valve-art .vs { stroke: var(--ink); stroke-width: 4; }
.valve-art .handle rect { fill: #c0392b; stroke: var(--ink); stroke-width: 2; }
.valve-art .handle { transform-box: view-box; transform-origin: 60px 19px; }
.js .result.on .valve-art .handle { animation: shut 900ms var(--draw) 300ms both; }
/* Hebel quer zum Rohr heißt zu: er stellt sich einmal auf */
@keyframes shut { from { transform: rotate(0deg); } to { transform: rotate(-90deg); } }
.restart-row { margin-top: 22px; }

/* Team ------------------------------------------------------------------ */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.member { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line-d2); }
.stamp { width: 76px; height: 76px; border: 1.5px solid var(--ink); display: grid; place-items: center; align-content: center; gap: 2px; background: #fff; }
.stamp > span { font-family: var(--mono); font-weight: 600; font-size: 1.4rem; color: var(--copper-2); line-height: 1; }
.stamp small { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.member .t-m { margin-bottom: 2px; }
.role { font-family: var(--mono); font-size: 0.82rem; color: var(--copper-2); margin-bottom: 10px; }

/* Über uns -------------------------------------------------------------- */
.revs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.revs li { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.yr { display: block; font-family: var(--mono); font-size: 1.9rem; font-weight: 600; color: var(--copper-2); margin-bottom: 10px; }
.revs .t-m { margin-bottom: 8px; }
@media (max-width: 900px) { .revs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .revs { grid-template-columns: minmax(0, 1fr); } }
.prose .t-l { max-width: 18ch; }

/* Formular -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; }
.full { grid-column: 1 / -1; }
.field label, .field .lbl { display: block; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; background: #fff; border: 1.5px solid var(--line-d2); border-radius: 2px; padding: 11px 12px; transition: border-color 150ms linear; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--copper); }
.field textarea { min-height: 100px; resize: vertical; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pill span { display: inline-block; border: 1.5px solid var(--ink); border-radius: 2px; padding: 8px 14px; font-size: 0.94rem; background: #fff; transition: background-color 150ms linear, color 150ms linear; }
.pill input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--copper); flex: none; }
.form-hint { color: #b03a2e; margin: 0; min-height: 1.4em; }
.sent { display: none; margin-top: 28px; }
.sent.on { display: grid; gap: 20px; justify-items: start; }
.ticket { display: grid; gap: 4px; border: 1.5px solid var(--ink); background: #fff; padding: 18px 22px; min-width: 260px; max-width: 100%; position: relative; }
.ticket::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 6px; background: var(--copper); }
.ticket b { font-family: var(--mono); font-size: 1.8rem; font-weight: 600; }
.ticket span:last-child { font-size: 0.95rem; color: var(--ink-soft); }
.js .sent.on .ticket { animation: issue 600ms var(--draw) both; }
@keyframes issue { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.side .t-m { margin-bottom: 8px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Öffnungszeiten -------------------------------------------------------- */
.hours { border-collapse: collapse; width: 100%; max-width: 360px; font-size: 0.92rem; }
.hours td { padding: 6px 0; border-bottom: 1px solid var(--line-d); }
.hours td:last-child { text-align: right; font-family: var(--mono); font-size: 0.86rem; }
.hours tr.today td { font-weight: 700; }
.hours tr.today td:first-child::after { content: attr(data-today); margin-left: 8px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--copper); color: #fff; padding: 1px 6px; font-weight: 600; }
.foot .hours td { border-color: var(--line-l); }

/* Rechtliches ----------------------------------------------------------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.legal aside { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; display: grid; gap: 8px; }
.legal aside a { color: var(--ink-soft); text-decoration: none; font-weight: 700; }
.legal aside a:hover { color: var(--copper-2); }
.legal section { margin-bottom: 56px; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.legal .t-l { margin-bottom: 18px; }
.legal h3 { font-size: 1.08rem; margin: 24px 0 6px; }
.legal p { color: var(--ink-soft); max-width: 64ch; }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal aside { position: static; grid-auto-flow: column; justify-content: start; gap: 22px; } }

/* Fußzeile -------------------------------------------------------------- */
.foot { padding: clamp(60px, 8vw, 96px) 0 28px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.foot .brand { margin-bottom: 16px; }
.foot p { color: var(--text-dim); font-size: 0.95rem; max-width: 34ch; }
.foot .dim { color: var(--text-dim); }
.foot h4 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); font-weight: 600; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; color: var(--text-dim); overflow-wrap: anywhere; }
.foot ul a { text-decoration: none; }
.foot ul a:hover { color: var(--text); }
.foot .hours { margin-bottom: 10px; color: var(--text); }
.foot-demo { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-l); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-dim); }
.foot-demo strong { color: var(--text); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Weniger Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rv], .js .hero [data-hero] { opacity: 1 !important; transform: none !important; }
  .js .dim-line i { transform: none; }
  .js .result.on .valve-art .handle { transform: rotate(-90deg); }
}

/* ======================================================================
   Fassung 2: der Weg des Wassers als Faden durch die Startseite.
   Abschnitte wechseln zwischen Blaupause, Kupfer, Papier und Nacht.
   ====================================================================== */
.t-hero { font-family: var(--sans); font-weight: 800; letter-spacing: -0.035em; line-height: 0.94; font-size: clamp(2.8rem, 5.6vw, 6rem); text-wrap: balance; }
.t-hero em { font-style: normal; color: var(--copper); }

/* Blaupause, Nacht und Kupfer als Vollflächen */
.sec-navy, .sec-dark { color: var(--text); }
.sec-dark { background-color: #071827; background-image: linear-gradient(rgba(244, 241, 234, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 234, 0.06) 1px, transparent 1px); background-size: 24px 24px; }
.sec-navy .lede, .sec-dark .lede, .sec-navy .dim, .sec-dark .dim { color: var(--text-dim); }
.sec-navy .tag, .sec-dark .tag { color: var(--text-dim); }
.sec-navy .t-xl em, .sec-dark .t-xl em { color: #e39364; }
.sec-copper .tag { color: #3b2216; }
.sec-copper .tag .no { color: var(--ink); }
.sec-copper .t-xl { color: var(--ink); }
.link-light { color: #f0b48e; }
.link-light:hover { color: #fff; }
.thread { position: relative; }
.thread .t-xl { max-width: 16ch; margin-bottom: 22px; }

/* Hero: der Plan ist die Bühne */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(56px, 7vw, 90px); position: relative; }
.hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 48px); }
.hero .wrap { max-width: 1440px; }
.hero h1 { margin-bottom: 28px; }
.hero .title-block { margin-top: 36px; max-width: 520px; border: 1.5px solid var(--line-l2); color: var(--text); }
.hero .title-block span { border-left-color: var(--line-l2); }
.hero .title-block small { color: var(--text-dim); }
.hero-plan { margin-right: calc(var(--gutter) * -1); }
.hero-plan svg { width: 100%; height: auto; display: block; }
.hero-plan .fx { cursor: default; }
.hero-next { position: absolute; left: var(--gutter); bottom: 22px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; }
.hero-next:hover { color: #fff; }
@media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-plan { margin: 10px 0 0; max-width: 760px; } }
@media (max-width: 600px) { .hero { min-height: 0; } .hero-next { display: none; } .hero .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero .title-block span:nth-child(3) { border-left: 0; } .hero .title-block span:nth-child(n+3) { border-top: 1.5px solid var(--line-l2); } }

/* Plan auf Blaupause: helle Linien */
.iso-dark .wall { fill: rgba(244, 241, 234, 0.03); stroke: rgba(244, 241, 234, 0.35); }
.iso-dark .slab { fill: rgba(244, 241, 234, 0.05); stroke: rgba(244, 241, 234, 0.75); }
.iso-dark .grid { stroke: rgba(244, 241, 234, 0.1); }
.iso-dark .pipe.cold { stroke: #d98856; }
.iso-dark .pipe.hot { stroke: #e9b089; }
.iso-dark .pipe.drain { stroke: #8fa2b5; }
.iso-dark .unit .f-top { fill: #24507e; } .iso-dark .unit .f-front { fill: #183b60; } .iso-dark .unit .f-side { fill: #12304f; }
.iso-dark .unit polygon { stroke: rgba(244, 241, 234, 0.8); }
.iso-dark .fx:hover .f-top, .iso-dark .fx.on .f-top { fill: #3b6a99; }
.iso-dark .fx.on .unit polygon { stroke: #f0b48e; }
.iso-dark .valve { fill: var(--navy); stroke: var(--paper); }
.iso-dark .valve-bar { stroke: var(--paper); }
.iso-dark .callout path { stroke: rgba(244, 241, 234, 0.5); }
.iso-dark .callout text, .iso-dark .legend text { fill: var(--paper); }
.sec-navy .plan-art { background: rgba(7, 24, 39, 0.35); border-color: var(--line-l2); }
.sec-navy .fx-tabs button { background: transparent; color: var(--text); border-color: var(--line-l2); }
.sec-navy .fx-tabs button:hover { border-color: var(--copper); }
.sec-navy .fx-tabs button[aria-selected="true"] { background: var(--copper); border-color: var(--copper); }
.sec-navy .fx-panel .t-m { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.sec-navy .mono-lbl { color: var(--text-dim); }
.sec-navy .link { color: #f0b48e; }

/* Zeichnen beim Laden: Wände, Platte und Rohre ziehen sich einmal */
.js .hero-plan .draw-el { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .hero-plan.drawn .draw-el { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t, 1200ms) var(--draw) var(--w, 0ms); }
.js .hero-plan .unit, .js .hero-plan .callout, .js .hero-plan .valve, .js .hero-plan .valve-bar { opacity: 0; transition: opacity 500ms var(--out) 1500ms; }
.js .hero-plan.drawn .unit, .js .hero-plan.drawn .callout, .js .hero-plan.drawn .valve, .js .hero-plan.drawn .valve-bar { opacity: 1; }
.js .hero-plan .wall, .js .hero-plan .slab { fill-opacity: 0; transition: fill-opacity 600ms linear 1200ms; }
.js .hero-plan.drawn .wall, .js .hero-plan.drawn .slab { fill-opacity: 1; }

/* Fotos wie auf Transparentpapier über dem Plan */
.split-wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.split-wide.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.trace { margin: 0; position: relative; background: rgba(244, 241, 234, 0.82); padding: 14px 14px 46px; transform: rotate(-1.2deg); }
.trace img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.trace.bleed-r { margin-right: calc(var(--gutter) * -1 - 20px); }
.trace.bleed-l { margin-left: calc(var(--gutter) * -1 - 20px); transform: rotate(1.2deg); }
.trace.on-copper { background: rgba(244, 241, 234, 0.7); }
.trace figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink); }
.trace-dim { position: absolute; left: 14px; right: 14px; top: -22px; height: 14px; color: var(--paper); }
.sec-copper .trace-dim { color: var(--ink); }
.trace-dim::before, .trace-dim::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px; background: currentColor; }
.trace-dim::before { left: 0; } .trace-dim::after { right: 0; }
.trace-dim i { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transform-origin: left; }
.js .trace-dim i { transform: scaleX(0); transition: transform 1000ms var(--draw) 300ms; }
.js .trace-dim.is-in i { transform: scaleX(1); }
.trace-dim b { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; padding: 0 8px; background: var(--navy); white-space: nowrap; }
.sec-copper .trace-dim b { background: var(--copper); }
@media (max-width: 880px) { .split-wide, .split-wide.flip { grid-template-columns: minmax(0, 1fr); } .trace.bleed-r, .trace.bleed-l { margin: 24px 0 0; } .split-wide.flip .trace { order: 2; } }
.spec { margin: 26px 0 0; display: grid; border-top: 1.5px solid var(--ink); }
.spec div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(15, 29, 43, 0.3); }
.spec dt { font-weight: 600; }
.spec dd { margin: 0; font-family: var(--mono); font-weight: 600; white-space: nowrap; }

/* Tropfrechner als Bühne */
.thread .drip { border: 1.5px solid var(--ink); background: #fff; padding: clamp(22px, 4vw, 48px); }
.thread .drip-val { font-size: clamp(2.6rem, 5vw, 4rem); }
.thread .tank { height: 300px; }
.thread .drip-out { grid-template-columns: 110px minmax(0, 1fr); }
.thread .drip-res .big dd { font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1; white-space: nowrap; }
@media (max-width: 600px) { .thread .drip-res .big dd { white-space: normal; font-size: 1.9rem; } .thread .drip-res div { flex-wrap: wrap; } }
@media (max-width: 420px) { .thread .drip-out { grid-template-columns: 64px minmax(0, 1fr); } .thread .tank { height: 220px; } }

/* Notfall als Nachtfläche mit großem Ergebnis */
.sec-dark .triage { max-width: 980px; }
.sec-dark .q legend { font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.05; color: #fff; }
.sec-dark .q .mono-lbl { color: var(--text-dim); }
.sec-dark .yn .btn { min-width: 160px; padding: 18px 28px; font-size: 1.1rem; background: var(--copper); }
.sec-dark .yn .btn:hover { background: var(--copper-2); }
.sec-dark .yn .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-l2); }
.sec-dark .yn .btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.sec-dark .result { background: var(--navy); border-color: var(--line-l2); color: var(--text); }
.sec-dark .result .t-m { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; color: #fff; }
.sec-dark .result p, .sec-dark .steps { color: var(--text-dim); }
.sec-dark .steps li::marker { color: #f0b48e; }
.sec-dark .valve-art .vb { fill: #24507e; stroke: var(--paper); }
.sec-dark .valve-art .vs { stroke: var(--paper); }
.sec-dark .valve-art .handle rect { stroke: var(--paper); }
.sec-dark .link-btn { color: #f0b48e; }
.sec-dark .result .btn:not(.btn-copper) { background: var(--copper); }

/* Seitenköpfe der Unterseiten auf Blaupause */
.phead { background-color: var(--navy); background-image: linear-gradient(var(--line-l) 1px, transparent 1px), linear-gradient(90deg, var(--line-l) 1px, transparent 1px); background-size: 48px 48px; color: var(--text); padding-bottom: clamp(48px, 6vw, 72px); }
.phead .t-xl { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; }
.phead .t-xl em { color: #e39364; }
.phead .lede, .phead .crumbs, .phead .tag { color: var(--text-dim); }
.phead .dim-line::before, .phead .dim-line::after, .phead .dim-line i { background: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .js .hero-plan .draw-el { stroke-dashoffset: 0; }
  .js .hero-plan .unit, .js .hero-plan .callout, .js .hero-plan .valve, .js .hero-plan .valve-bar { opacity: 1; }
  .js .hero-plan .wall, .js .hero-plan .slab { fill-opacity: 1; }
  .js .trace-dim i { transform: none; }
}