/* Bub & Sohn GmbH · Entwurf Richtung „7711“ (Bauzaunplane) */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --plane: #1d3a86;
  --plane-tief: #142b68;
  --nacht: #0c1532;
  --nacht-2: #111c40;
  --gelb: #f1d32b;
  --gelb-hell: #ffe766;
  --beton: #edece6;
  --beton-2: #e3e1d9;
  --tinte: #11182e;
  --tinte-2: #4a5266;
  --linie: rgba(17, 24, 46, .14);
  --r: 6px;          /* Eckenradius innen, Knöpfe */
  --r-schale: 12px;  /* äußere Schale = Radius + Rand */
  --gang: cubic-bezier(.32, .72, 0, 1);
  --rand: clamp(16px, 4.5vw, 64px);
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Archivo", "Arial Narrow", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--beton);
  font-stretch: 100%;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 800; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--plane); outline-offset: 3px; }
.kopf :focus-visible, .plane :focus-visible, .wiehoch :focus-visible, .nacht :focus-visible, .fuss :focus-visible { outline-color: var(--gelb); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--gelb); color: var(--tinte); padding: 12px 16px; border-radius: var(--r);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.breite { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--rand); }

.ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Kopfzeile: schwebende Leiste */
.kopf {
  position: fixed; z-index: 20; top: 10px; left: 10px; right: 10px;
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 8px 8px 8px 16px;
  background: rgba(12, 21, 50, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-schale);
  color: #fff;
}
.marke { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; white-space: nowrap; min-height: 44px; align-items: center; }
.marke-bub { font-size: 28px; font-weight: 900; font-stretch: 125%; color: var(--gelb); letter-spacing: .01em; line-height: 1; }
.marke-sohn { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8); }

.knopf {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  min-height: 44px; padding: 0 16px 0 8px;
  background: var(--gelb); color: var(--tinte);
  border-radius: var(--r);
  font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1;
  transition: transform .5s var(--gang), background-color .4s var(--gang);
}
.knopf .ico { width: 30px; height: 30px; padding: 7px; border-radius: var(--r); background: var(--tinte); fill: var(--gelb); transition: transform .5s var(--gang); }
.knopf:hover { background: var(--gelb-hell); }
.knopf:hover .ico { transform: translateX(2px) rotate(-8deg); }
.knopf:active { transform: scale(.98); }
.knopf .nr { font-variant-numeric: tabular-nums; }

/* Bauzaunplane als Fläche */
.plane {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background-color: var(--plane);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .045) 50%, transparent 50%),
    linear-gradient(0deg, rgba(0, 0, 0, .06) 50%, transparent 50%);
  background-size: 3px 3px, 3px 3px;
}
/* Falten und Spannung der Plane */
.plane::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(97deg, transparent 0 14%, rgba(255, 255, 255, .06) 20%, transparent 27%, rgba(0, 0, 0, .12) 41%, transparent 50%, rgba(255, 255, 255, .05) 63%, transparent 71%, rgba(0, 0, 0, .1) 86%, transparent 95%),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(0, 0, 0, .25), transparent 70%);
}
/* Lochmuster liegt über dem Druck */
.plane::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: radial-gradient(circle, rgba(6, 13, 40, .5) 0 .8px, transparent 1.25px);
  background-size: 5px 5px;
  opacity: .9;
}
.zaun { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rohr { position: absolute; left: 0; right: 0; height: 7px; background: linear-gradient(#d5d9e0, #8c93a2 60%, #5d6475); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.rohr-oben { top: 0; }
.rohr-unten { bottom: 0; }
.oesen { position: absolute; left: clamp(10px, 3vw, 40px); right: clamp(10px, 3vw, 40px); display: flex; justify-content: space-between; }
.oesen-oben { top: 18px; }
.oesen-unten { bottom: 18px; }
.oesen i {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, var(--plane-tief) 0 4px, #e1e4ea 4.6px, #a3a9b6 6.8px, #626a7b 8.6px, rgba(0, 0, 0, .35) 9.4px, transparent 10px);
}
.oesen i::after { /* Kabelbinder */
  content: ""; position: absolute; left: 8px; width: 4px; height: 20px; border-radius: 2px; background: #1b1f29;
}
.oesen-oben i::after { bottom: 9px; }
.oesen-unten i::after { top: 9px; }
.plane-belege .oesen i::after, .plane-schluss .oesen-oben i::after { display: none; }

/* Erster Bildschirm */
.plane-start { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.druck {
  position: relative; z-index: 1;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 104px var(--rand) 72px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
}
.druck-marke {
  display: flex; align-items: flex-end; gap: .12em; margin: 0;
  font-size: clamp(30px, 8.5vw, 112px); font-weight: 900; font-stretch: 125%;
  line-height: .82; color: var(--gelb); letter-spacing: .005em;
}
.w-sohn {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(8px, .11em, 15px); font-weight: 700; font-stretch: 100%; letter-spacing: .04em; line-height: 1;
  padding-bottom: .02em;
}
.druck-felder {
  display: flex; flex-wrap: wrap; gap: .2em 1.1em; margin: .55em 0 0;
  font-size: clamp(15px, 2.6vw, 34px); font-weight: 800; font-stretch: 118%;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gelb);
}
.hauptzeile {
  margin-top: clamp(26px, 4.5vh, 56px);
  font-size: clamp(25px, 3.6vw, 52px); font-weight: 800; font-stretch: 108%;
  line-height: 1.04; letter-spacing: -.005em; max-width: 17em; color: #fff; text-wrap: balance;
}
.unterzeile { margin: 14px 0 0; max-width: 36em; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.45; color: rgba(255, 255, 255, .86); }

.anruf {
  display: inline-grid; justify-self: start; grid-template-columns: auto 1fr; grid-template-areas: "label vorwahl" "nr nr";
  align-items: center; column-gap: 14px;
  margin-top: clamp(22px, 4vh, 44px);
  color: var(--gelb); text-decoration: none; line-height: 1;
  border-radius: var(--r);
}
.anruf-label {
  grid-area: label; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  background: var(--gelb); color: var(--tinte); border-radius: var(--r);
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  transition: background-color .4s var(--gang), transform .5s var(--gang);
}
.anruf-vorwahl { grid-area: vorwahl; justify-self: start; font-size: clamp(26px, 3.4vw, 48px); font-weight: 800; font-stretch: 120%; font-variant-numeric: tabular-nums; }
.anruf-nr {
  grid-area: nr; display: flex; margin-top: 4px;
  font-size: clamp(104px, min(21vw, 15.5vw + 40px), 200px); font-weight: 900; font-stretch: 125%; line-height: .86; letter-spacing: -.01em;
  text-shadow: .025em .03em 0 rgba(5, 12, 38, .55);
}
.anruf-nr b { display: inline-block; font-weight: inherit; transition: transform .6s var(--gang), color .4s var(--gang); }
.anruf:hover .anruf-label { background: var(--gelb-hell); }
.anruf:hover .anruf-nr b { color: var(--gelb-hell); }
.anruf:hover .anruf-nr b:nth-child(1) { transform: translateY(-3px); }
.anruf:hover .anruf-nr b:nth-child(2) { transform: translateY(-5px); transition-delay: .03s; }
.anruf:hover .anruf-nr b:nth-child(3) { transform: translateY(-5px); transition-delay: .06s; }
.anruf:hover .anruf-nr b:nth-child(4) { transform: translateY(-3px); transition-delay: .09s; }
.anruf:active { transform: scale(.99); }
.anruf:focus-visible { outline-offset: 8px; }
.druck-adresse { margin: clamp(18px, 3vh, 32px) 0 0; font-size: clamp(13px, 1.3vw, 18px); font-weight: 700; font-stretch: 112%; letter-spacing: .03em; color: var(--gelb); }

@media (min-width: 1000px) {
  .druck { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: end; }
  .druck-marke, .druck-felder, .hauptzeile { grid-column: 1 / -1; }
  .hauptzeile { max-width: 20em; }
  .unterzeile { grid-column: 1; grid-row: 4; align-self: end; margin-bottom: 0; }
  .druck-adresse { grid-column: 1; grid-row: 5; align-self: end; }
  .plane-start .anruf { grid-column: 2; grid-row: 4 / span 2; justify-self: end; }
}

/* Einstieg: die Plane wird gespannt, der Druck kommt auf */
@media (prefers-reduced-motion: no-preference) {
  .plane-start .druck > * { animation: druck .9s var(--gang) both; }
  .plane-start .druck-marke { animation-delay: .1s; }
  .plane-start .druck-felder { animation-delay: .22s; }
  .plane-start .hauptzeile { animation-delay: .32s; }
  .plane-start .unterzeile { animation-delay: .42s; }
  .plane-start .anruf { animation-name: druck-rein; animation-delay: .45s; }
  .plane-start .druck-adresse { animation-delay: .55s; }
  .plane-start .anruf-nr b { animation: ziffer .6s cubic-bezier(.2, 1.4, .4, 1) both; }
  .plane-start .anruf-nr b:nth-child(1) { animation-delay: .6s; }
  .plane-start .anruf-nr b:nth-child(2) { animation-delay: .68s; }
  .plane-start .anruf-nr b:nth-child(3) { animation-delay: .76s; }
  .plane-start .anruf-nr b:nth-child(4) { animation-delay: .84s; }
  .plane-start .oesen i { animation: oese .5s cubic-bezier(.2, 1.5, .4, 1) both; }
  .plane-start .oesen i:nth-child(2) { animation-delay: .06s; }
  .plane-start .oesen i:nth-child(3) { animation-delay: .12s; }
  .plane-start .oesen i:nth-child(4) { animation-delay: .18s; }
  .plane-start .oesen i:nth-child(5) { animation-delay: .24s; }
  .plane-start .oesen i:nth-child(6) { animation-delay: .3s; }
  .plane-start .oesen i:nth-child(7) { animation-delay: .36s; }
  .plane-start .oesen i:nth-child(8) { animation-delay: .42s; }
  .plane-start::before { animation: wind 1.4s var(--gang) both; }
}
@keyframes druck { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes druck-rein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ziffer { from { opacity: 0; transform: translateY(-38%) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes oese { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes wind { from { transform: translateX(-12%) scaleX(1.2); opacity: .2; } to { transform: none; opacity: 1; } }

/* Gemeinsame Abschnittsbausteine */
.gross { font-size: clamp(40px, 7vw, 104px); font-weight: 850; font-stretch: 112%; line-height: .95; letter-spacing: -.012em; text-wrap: balance; }
.mittel { font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; font-stretch: 108%; }
.klein-titel { font-size: 15px; font-weight: 800; font-stretch: 110%; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 34em; margin-top: 22px; color: rgba(255, 255, 255, .82); }
.lead-dunkel { color: var(--tinte-2); }

.rahmen { margin: 0; padding: 6px; border-radius: var(--r-schale); background: rgba(17, 24, 46, .05); border: 1px solid rgba(17, 24, 46, .08); }
.rahmen-kern { border-radius: var(--r); overflow: hidden; background: var(--beton-2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); }
.rahmen-kern img { width: 100%; height: 100%; object-fit: cover; }
.rahmen figcaption { padding: 12px 8px 6px; font-size: 15px; line-height: 1.45; color: var(--tinte-2); }
.rahmen figcaption strong { color: var(--tinte); }

/* Kernstück: Wie hoch geht's? */
.wiehoch {
  position: relative; color: #fff; padding: clamp(96px, 12vw, 160px) 0;
  background-color: var(--nacht);
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px;
}
.wiehoch h2 { font-size: clamp(44px, 4.8vw, 78px); font-weight: 900; font-stretch: 120%; line-height: .92; color: var(--gelb); letter-spacing: -.01em; }
.wiehoch-raster { display: grid; gap: 28px; }
.wiehoch-kopf .lead { margin-bottom: 8px; }
.wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.wahl legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wahl label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer;
  border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  font-weight: 700; font-size: 16px; white-space: nowrap;
  transition: background-color .4s var(--gang), color .4s var(--gang), border-color .4s var(--gang), transform .4s var(--gang);
}
.wahl label:hover { border-color: var(--gelb); }
.wahl label:active { transform: scale(.97); }
.wahl input:checked + label { background: var(--gelb); border-color: var(--gelb); color: var(--tinte); }
.wahl input:focus-visible + label { outline: 3px solid #fff; outline-offset: 3px; }

.buehne { padding: 6px; border-radius: var(--r-schale); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.buehne-svg { display: block; width: 100%; height: auto; border-radius: var(--r); background: rgba(5, 10, 28, .55); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .06); }
.skala line { stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.skala .boden { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.skala text { fill: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 600; font-family: "Archivo", sans-serif; }
.maschine .kontur { fill: rgba(241, 211, 43, .08); stroke: var(--gelb); stroke-width: 1.6; stroke-linejoin: round; }
.maschine .fein { fill: none; stroke: rgba(241, 211, 43, .65); stroke-width: 1; }
.arm-aussen { fill: none; stroke: var(--gelb); stroke-linecap: round; stroke-linejoin: round; }
.arm-innen { fill: none; stroke: #0a1330; stroke-linecap: round; stroke-linejoin: round; }
.gelenk { fill: #0a1330; stroke: var(--gelb); stroke-width: 1.2; }
.objekt .kontur { fill: rgba(255, 255, 255, .05); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.objekt .fein { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.hmarke line { stroke: #fff; stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .8; }
.hmarke text { fill: #fff; font-size: 16px; font-weight: 700; font-family: "Archivo", sans-serif; }

.szene { opacity: 0; transition: opacity .45s var(--gang); }
.szene .maschine { transform: translateX(-26px); transition: transform 1s var(--gang); }
.szene .objekt { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.85); transition: transform 1s var(--gang); }
.szene[data-o="sechs"] { opacity: 1; }
.szene[data-o="sechs"] .maschine, .szene[data-o="sechs"] .objekt { transform: none; }

.infos { display: grid; }
.info {
  grid-area: 1 / 1; padding: 22px 22px 6px; border-radius: var(--r-schale);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transition: opacity .45s var(--gang), transform .6s var(--gang), visibility .45s;
}
.infos .info + .info { margin-top: 0; }
.info h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 850; font-stretch: 112%; }
.info-maschine { margin: 10px 0 14px; color: var(--gelb); font-weight: 700; font-size: 17px; line-height: 1.35; }
.info p, .info blockquote { color: rgba(255, 255, 255, .86); }
.info strong { color: #fff; }
.info blockquote { margin: 0 0 16px; font-size: 18px; line-height: 1.5; }
.info blockquote footer { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .65); }

@supports selector(:has(*)) {
  .szene[data-o="sechs"] { opacity: 0; }
  .szene[data-o="sechs"] .maschine { transform: translateX(-26px); }
  .szene[data-o="sechs"] .objekt { transform: scaleY(.85); }
  .info { opacity: 0; visibility: hidden; transform: translateY(10px); }
  .wiehoch:has(#o-garage:checked) [data-o="garage"],
  .wiehoch:has(#o-haus:checked) [data-o="haus"],
  .wiehoch:has(#o-mfh:checked) [data-o="mfh"],
  .wiehoch:has(#o-sechs:checked) [data-o="sechs"],
  .wiehoch:has(#o-bruecke:checked) [data-o="bruecke"],
  .wiehoch:has(#o-schornstein:checked) [data-o="schornstein"] { opacity: 1; visibility: visible; transform: none; }
  .wiehoch:has(#o-garage:checked) [data-o="garage"] :is(.maschine, .objekt),
  .wiehoch:has(#o-haus:checked) [data-o="haus"] :is(.maschine, .objekt),
  .wiehoch:has(#o-mfh:checked) [data-o="mfh"] :is(.maschine, .objekt),
  .wiehoch:has(#o-sechs:checked) [data-o="sechs"] :is(.maschine, .objekt),
  .wiehoch:has(#o-bruecke:checked) [data-o="bruecke"] :is(.maschine, .objekt),
  .wiehoch:has(#o-schornstein:checked) [data-o="schornstein"] :is(.maschine, .objekt) { transform: none; }
}
@supports not selector(:has(*)) {
  .info + .info { margin-top: 12px; }
  .info { grid-area: auto; }
}

.wiehoch-schluss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 40px 0 0; font-size: 18px; color: rgba(255, 255, 255, .86); }

@media (min-width: 1000px) {
  .wiehoch-raster { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); column-gap: 56px; row-gap: 28px; align-items: start; }
  .wiehoch-kopf { grid-column: 1; grid-row: 1; }
  .wahl { grid-column: 1; grid-row: 2; }
  .infos { grid-column: 1; grid-row: 3; }
  .buehne { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .buehne-svg { max-height: min(82vh, 760px); }
}

/* Leistungen */
.leistungen, .referenzen { padding: clamp(96px, 12vw, 168px) 0; background: var(--beton); }
.feld { display: grid; gap: 28px; margin-top: clamp(64px, 9vw, 120px); align-items: center; }
.feld-text h3 { font-size: clamp(26px, 2.7vw, 38px); hyphens: auto; overflow-wrap: break-word; font-weight: 850; font-stretch: 110%; margin-bottom: 18px; }
.feld-text p { color: var(--tinte-2); max-width: 34em; }
.rahmen-hoch .rahmen-kern { aspect-ratio: 4 / 5; }
.feld-paar { display: grid; gap: 0 48px; }
.zahl-gross { margin: 0 0 18px; font-size: 22px; font-weight: 800; font-stretch: 110%; color: var(--plane); line-height: 1; }
.zahl-gross span { display: block; font-size: clamp(96px, 13vw, 190px); font-weight: 900; font-stretch: 125%; line-height: .8; letter-spacing: -.02em; }
.direkt { font-weight: 700; color: var(--tinte) !important; }
.direkt a { color: var(--plane); text-underline-offset: 4px; text-decoration-thickness: 2px; display: inline-block; padding: 10px 0; }

@media (min-width: 860px) {
  .feld-gross { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .feld-paar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .feld-paar .feld { grid-template-columns: 1fr; align-items: start; }
  .feld-versetzt { margin-top: clamp(180px, 20vw, 280px); }
  .feld-longfront { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .feld-longfront .rahmen { order: 2; }
}

/* Kreislauf und Lagerplatz */
.kreislauf { padding: clamp(96px, 12vw, 168px) 0; background: var(--beton-2); }
.weg { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; position: relative; }
.weg li { position: relative; }
.weg svg { width: 64px; height: 48px; fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 14px; }
.weg svg .sack, .weg svg .haken, .weg svg .lupe { stroke: var(--plane); }
.weg svg .korn { fill: var(--tinte); stroke: none; }
.weg h3 { font-size: 17px; font-stretch: 100% !important; font-weight: 800; font-stretch: 108%; margin-bottom: 6px; }
.weg p { font-size: 16px; line-height: 1.5; color: var(--tinte-2); margin: 0; }
@media (min-width: 1000px) {
  .weg { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
  .weg::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; border-top: 2px dashed rgba(17, 24, 46, .25); }
  .weg svg { background: var(--beton-2); padding-right: 8px; position: relative; }
}

.lager { margin-top: clamp(96px, 12vw, 160px); padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--linie); }
.lager-kopf { display: grid; gap: 14px; }
.lager-kopf p { color: var(--tinte-2); max-width: 34em; font-size: 18px; }
.haufen-reihe { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
.haufen-feld { display: flex; flex-direction: column; }
.haufen-feld strong { margin-top: 12px; font-size: 16px; line-height: 1.3; }
.koernung { font-size: 15px; color: var(--tinte-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.haufen {
  display: block; width: 100%; height: clamp(84px, 11vw, 140px);
  border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px;
  transform-origin: 50% 100%;
  box-shadow: inset 0 -14px 22px rgba(0, 0, 0, .28), inset 0 8px 14px rgba(255, 255, 255, .14), 0 10px 18px -12px rgba(17, 24, 46, .5);
}
.k60 { background: url("../bilder/koernung-60.webp") 0 0 / 160px 160px; }
.k40 { background: url("../bilder/koernung-40.webp") 0 0 / 160px 160px; }
.k32 { background: url("../bilder/koernung-32.webp") 0 0 / 160px 160px; }
.k16 { background: url("../bilder/koernung-16.webp") 0 0 / 160px 160px; }
.k8 { background: url("../bilder/koernung-8.webp") 0 0 / 160px 160px; }
.k5 { background: url("../bilder/koernung-5.webp") 0 0 / 160px 160px; }
.k2 { background: url("../bilder/koernung-2.webp") 0 0 / 160px 160px; }
.khumus { background: url("../bilder/koernung-humus.webp") 0 0 / 160px 160px; }
@media (min-width: 860px) { .haufen-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 28px; } }

.lager-raster { display: grid; gap: 40px; margin-top: clamp(64px, 8vw, 104px); }
.zeiten-liste { margin: 0; }
.zeiten-liste div { padding: 14px 0; border-top: 1px solid var(--linie); }
.zeiten-liste dt { font-weight: 800; }
.zeiten-liste dd { margin: 4px 0 0; color: var(--tinte-2); }
.annahme p { color: var(--tinte-2); font-size: 16px; }
.annahme strong { color: var(--tinte); }
@media (min-width: 1000px) {
  .lager-kopf { grid-template-columns: 5fr 7fr; align-items: end; column-gap: 48px; }
  .lager-kopf p { margin: 0; }
  .lager-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; row-gap: 32px; }
  .lager-bild { grid-row: 1 / span 2; align-self: start; }
}

/* Referenzen */
.ref-bilder { display: grid; gap: 28px; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 860px) {
  .ref-bilder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
  .ref-bilder .rahmen:last-child { margin-top: clamp(80px, 10vw, 160px); }
}
.kubik { list-style: none; padding: 0; margin: clamp(64px, 8vw, 112px) 0 0; }
.kubik li { position: relative; display: grid; gap: 2px 28px; padding: 20px 0 22px; border-top: 1px solid var(--linie); }
.kubik li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 4px; width: calc(var(--w) * 100%);
  background: var(--plane); transform-origin: 0 50%;
}
.kubik-zahl { font-size: clamp(28px, 3.2vw, 44px); font-weight: 900; font-stretch: 118%; line-height: 1; color: var(--plane); font-variant-numeric: tabular-nums; }
.kubik-name { font-weight: 800; font-size: 19px; }
.kubik-was { color: var(--tinte-2); font-size: 16px; line-height: 1.45; }
@media (min-width: 860px) {
  .kubik li { grid-template-columns: 220px minmax(0, 4fr) minmax(0, 6fr); align-items: baseline; }
}

/* Nacht */
.nacht { position: relative; isolation: isolate; color: #fff; background: var(--nacht); min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.nacht-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -2; }
.nacht::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 12, 30, .96) 18%, rgba(7, 12, 30, .55) 52%, rgba(7, 12, 30, .15) 85%); }
.nacht-innen { padding-top: clamp(240px, 40vh, 420px); padding-bottom: clamp(72px, 9vw, 128px); }
.nacht .gross { color: #fff; }
.bruecken { list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 0 40px; }
.bruecken li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.bruecken strong { font-size: 19px; }
.bruecken span { color: rgba(255, 255, 255, .78); font-size: 16px; }
@media (min-width: 860px) { .bruecken { grid-template-columns: 1fr 1fr; } }

/* Belege auf der Plane */
.plane-belege { padding: clamp(112px, 13vw, 176px) 0 clamp(96px, 12vw, 160px); }
.belege { position: relative; z-index: 1; display: grid; gap: 48px; }
.beleg-haupt .beleg-zahl { margin: 0 0 10px; font-size: clamp(110px, 22vw, 300px); font-weight: 900; font-stretch: 125%; line-height: .8; color: var(--gelb); letter-spacing: -.02em; }
.beleg-haupt h2 { font-size: clamp(30px, 4vw, 56px); font-weight: 850; font-stretch: 110%; max-width: 14em; margin-bottom: 20px; }
.beleg-haupt p { color: rgba(255, 255, 255, .86); max-width: 32em; font-size: 18px; }
.beleg-liste { list-style: none; margin: 0; padding: 0; align-self: end; }
.beleg-liste li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.beleg-liste strong { font-size: 22px; font-weight: 850; font-stretch: 110%; color: var(--gelb); }
.beleg-liste span { color: rgba(255, 255, 255, .86); }
.stimme { margin: 0; padding: 6px; border-radius: var(--r-schale); background: rgba(5, 12, 38, .22); border: 1px solid rgba(255, 255, 255, .14); }
.stimme p { margin: 0; padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px) 12px; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.35; font-weight: 600; border-radius: var(--r); background: rgba(255, 255, 255, .04); }
.stimme footer { padding: 0 clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 30px); background: rgba(255, 255, 255, .04); border-radius: 0 0 var(--r) var(--r); color: var(--gelb); font-weight: 700; font-size: 15px; }
@media (min-width: 1000px) {
  .belege { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
  .stimme { grid-column: 1 / -1; }
}

/* Schluss */
.plane-schluss { padding: clamp(112px, 13vw, 176px) 0 clamp(104px, 12vw, 160px); }
.schluss { position: relative; z-index: 1; display: grid; }
.schluss h2 { font-size: clamp(34px, 5.4vw, 80px); font-weight: 900; font-stretch: 115%; max-width: 14em; color: #fff; }
.anruf-schluss { margin-top: 32px; }
.kontakt-raster { display: grid; gap: 28px; margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .25); }
.kontakt-raster p { color: rgba(255, 255, 255, .88); }
.kontakt-raster .klein-titel { color: var(--gelb); }
.kontakt-raster a { color: #fff; text-decoration-color: var(--gelb); text-underline-offset: 4px; text-decoration-thickness: 2px; display: inline-block; padding: 6px 0; }
.pfeil-link::after { content: " ↗"; }
@media (min-width: 860px) { .kontakt-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* Fußzeile */
.fuss { background: #080e24; color: rgba(255, 255, 255, .74); padding: 56px 0 64px; font-size: 15px; }
.fuss-innen { display: grid; gap: 18px; }
.fuss-logo { width: 161px; height: auto; border-radius: 3px; }
.fuss strong { color: #fff; }
.fuss-links { display: flex; gap: 24px; }
.fuss-links a { color: #fff; display: inline-block; padding: 10px 0; text-underline-offset: 4px; }
.vorschau { margin: 0; color: rgba(255, 255, 255, .55); font-size: 14px; }

/* Einblenden beim Scrollen (nur mit Skript) */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--gang), transform 1.1s var(--gang); }
  .js .zeigen.ist-da { opacity: 1; transform: none; }
  .js .weg li:nth-child(2) { transition-delay: .08s; }
  .js .weg li:nth-child(3) { transition-delay: .16s; }
  .js .weg li:nth-child(4) { transition-delay: .24s; }
  .js .weg li:nth-child(5) { transition-delay: .32s; }
  .js .weg li:nth-child(6) { transition-delay: .4s; }
  .js .haufen { transform: scaleY(.06); transition: transform 1.2s cubic-bezier(.2, .9, .25, 1); }
  .js .haufen-reihe.ist-da .haufen { transform: none; }
  .js .haufen-feld:nth-child(2) .haufen { transition-delay: .08s; }
  .js .haufen-feld:nth-child(3) .haufen { transition-delay: .16s; }
  .js .haufen-feld:nth-child(4) .haufen { transition-delay: .24s; }
  .js .haufen-feld:nth-child(5) .haufen { transition-delay: .32s; }
  .js .haufen-feld:nth-child(6) .haufen { transition-delay: .4s; }
  .js .haufen-feld:nth-child(7) .haufen { transition-delay: .48s; }
  .js .haufen-feld:nth-child(8) .haufen { transition-delay: .56s; }
  .js .kubik li::after { transform: scaleX(0); transition: transform 1.4s var(--gang); }
  .js .kubik.ist-da li::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* Rechtstexte */
.recht { padding: 132px 0 96px; background: var(--beton); }
.recht .breite { max-width: 820px; }
.recht h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 900; font-stretch: 115%; margin-bottom: 28px; }
.recht h2 { font-size: 21px; font-weight: 800; margin: 36px 0 10px; }
.recht p { color: var(--tinte-2); }
.recht a { color: var(--plane); }
.hinweis { display: inline-block; margin-bottom: 28px; background: var(--gelb); color: var(--tinte); font-weight: 700; padding: 8px 14px; border-radius: var(--r); }
.offen { background: #fff2b3; color: #5a4300; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

@media (max-width: 400px) {
  .kopf { padding-left: 12px; gap: 8px; }
  .marke-bub { font-size: 24px; }
  .marke-sohn { font-size: 12px; }
  .knopf { font-size: 14px; padding-right: 12px; gap: 8px; }
  .oesen i:nth-child(n+6) { display: none; }
  .wahl label { padding: 0 13px; font-size: 15px; }
}