/* Ha&Ha Glas — Konzept „Aufmaßblatt" */

@font-face { font-family: "Zilla Slab"; src: url(../fonts/zilla-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url(../fonts/zilla-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Kalam"; src: url(../fonts/kalam.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --papier: #f2efe6;
  --papier-2: #e7e3d6;
  --tinte: #222528;
  --tinte-2: #55595d;
  --linie: #b9b4a5;
  --rot: #c3301c;
  --glas: #8fbcb6;
  --bleistift: #4a4f55;

  --slab: "Zilla Slab", "Rockwell", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;
  --hand: "Kalam", "Segoe Print", cursive;

  --rand: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --kopf-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 24px); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 500 clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem)/1.6 var(--slab);
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rot); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
h1, h2, h3 { font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; margin: 0; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tinte); color: var(--papier); padding: 10px 14px; font-family: var(--mono); font-size: .85rem; }
.skip:focus { top: 12px; }

/* ---------- Kleinteile ---------- */
.notiz { font-family: var(--hand); color: var(--bleistift); font-size: 1.12em; line-height: 1.35; }
.vermerk, .blattnr, .lv__pos, .lv__einheit, .kette__mass, .blatt, .regler output, .regler__name, legend, .skizze__klein, .fuss, .kontakt__liste dt, .schriftfeld th {
  font-family: var(--mono);
}
.vermerk { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: 2.2rem; }
.blattnr { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rot); margin-bottom: 1rem; display: flex; gap: .9em; align-items: center; }
.blattnr span { color: var(--tinte-2); }
.blattnr::after { content: ""; flex: 1; height: 1px; background: var(--linie); max-width: 140px; }

.knopf {
  display: inline-flex; align-items: center; gap: .5em; min-height: 48px;
  padding: .7em 1.3em; background: var(--tinte); color: var(--papier);
  font: 600 .88rem/1.2 var(--mono); letter-spacing: .02em; text-decoration: none;
  border: 1.5px solid var(--tinte); transition: background .15s, color .15s;
}
.knopf:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf--linie { background: transparent; color: var(--tinte); }
.knopf--linie:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

.weiter { font-family: var(--mono); font-size: .9rem; margin-top: 2rem; }
.weiter a { text-decoration: none; border-bottom: 1.5px solid var(--rot); padding-bottom: 2px; }

/* ---------- Kopf / Schriftfeld ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--papier); }
.kopf__feld {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  min-height: var(--kopf-h);
}
.kopf__feld > * { border-left: 1.5px solid var(--tinte); }
.kopf__feld > :first-child { border-left: 0; }
.kopf__marke { display: flex; align-items: center; gap: .75rem; padding-right: 1.4rem; text-decoration: none; }
.logo { width: 40px; height: 40px; color: var(--tinte); flex: none; }
.kopf__marke:hover .logo { color: var(--rot); }
.kopf__name { font-weight: 700; font-size: 1.25rem; line-height: 1; }
.kopf__name small { display: block; font: 400 .66rem/1.3 var(--mono); letter-spacing: .04em; color: var(--tinte-2); margin-top: .3rem; }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.kopf__nav li { flex: 1; border-right: 1px solid var(--linie); }
.kopf__nav li:last-child { border-right: 0; }
.kopf__nav a {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  padding: 0 .9rem; text-decoration: none; font-weight: 700; font-size: 1rem;
}
.kopf__nav .pos { font: 400 .66rem/1 var(--mono); color: var(--tinte-2); margin-bottom: .35rem; }
.kopf__nav a:hover .pos, .kopf__nav a[aria-current] .pos { color: var(--rot); }
.kopf__tel {
  display: flex; flex-direction: column; justify-content: center; padding-left: 1.2rem;
  font: 600 .95rem/1.2 var(--mono); text-decoration: none; white-space: nowrap;
}
.kopf__tel span { font-weight: 400; font-size: .66rem; color: var(--tinte-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.kopf__menue { display: none; }

/* Lineal = Lesefortschritt */
.lineal { position: relative; height: 14px; border-top: 1.5px solid var(--tinte); border-bottom: 1px solid var(--linie); overflow: hidden; }
.lineal__skala {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 37.8px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tinte-2) 0 1px, transparent 1px 18.9px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 3.78px) 0 0 / 100% 3px no-repeat;
}
.lineal__nadel { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--rot); transform: translateX(0); will-change: transform; }
.lineal__wert {
  position: absolute; right: var(--rand); top: 50%; transform: translateY(-50%);
  font: 600 .62rem/1 var(--mono); background: var(--papier); padding: 1px 6px; color: var(--rot);
}

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: var(--max); margin: 0 auto; padding: clamp(4.5rem, 10vw, 8.5rem) var(--rand) 0; }
.abschnitt__kopf { max-width: 760px; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.abschnitt h2 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem); margin-bottom: 1.2rem; }
.abschnitt__intro { color: var(--tinte-2); max-width: 60ch; }

/* ---------- Held ---------- */
.held {
  max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5.5rem) var(--rand) 0;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.mass { position: relative; padding-top: 2.6rem; display: inline-block; max-width: 100%; }
.mass__linie {
  position: absolute; left: 0; right: 0; top: 1.15rem; height: 1px; background: var(--rot);
  transform-origin: left; transform: scaleX(var(--zieh, 1));
}
.mass__linie::before, .mass__linie::after {
  content: ""; position: absolute; top: -9px; width: 1px; height: 30px; background: var(--rot);
}
.mass__linie::before { left: 0; }
.mass__linie::after { right: 0; }
.mass__zahl {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font: 600 .8rem/1 var(--mono); color: var(--rot); background: var(--papier); padding: .25rem .6rem;
}
.held__titel { font-size: clamp(3.1rem, 1rem + 8.2vw, 7.6rem); line-height: .92; letter-spacing: -.035em; }
.notiz--held { margin: 1rem 0 2rem; max-width: 34ch; font-size: 1.05rem; transform: rotate(-1.2deg); transform-origin: left; }
.held__lead { font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem); max-width: 40ch; }
.held__aktion { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 1.6rem; }
.held__fakten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font: .78rem/1.4 var(--mono); color: var(--tinte-2); }
.held__fakten li::before { content: "✓ "; color: var(--rot); }

.held__bild { margin: 0; position: relative; margin-top: clamp(0rem, 4vw, 3rem); }
.held__bild img, .held__bild .anno { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.held__bild img { border: 1.5px solid var(--tinte); }
.anno { position: absolute; inset: 0; height: auto; pointer-events: none; }
.anno line, .anno path { vector-effect: non-scaling-stroke; }
.anno__l, .anno__h { stroke: var(--rot); stroke-width: 2; }
.anno__h { stroke-width: 1.4; }
.anno__pfeil { fill: var(--rot); }
.anno__fuehrung { stroke: var(--tinte); stroke-width: 1.4; stroke-dasharray: 5 4; }
.anno__punkt { fill: var(--papier); stroke: var(--tinte); stroke-width: 3; }
.anno__text rect { fill: var(--papier); stroke: var(--tinte); stroke-width: 2; }
.anno__text text { font: 600 36px var(--mono); fill: var(--tinte); }
.anno__notiz { font: 400 84px var(--hand); fill: var(--rot); }
.held__bild figcaption, .plan figcaption {
  display: flex; gap: .8rem; align-items: baseline; padding: .7rem 0 0;
  font: .78rem/1.4 var(--mono); color: var(--tinte-2);
}
.blatt { color: var(--rot); white-space: nowrap; }

/* Zeichnen-Animation */
.zeichnet .anno__l, .zeichnet .anno__h, .zeichnet .anno__fuehrung { stroke-dasharray: 600; stroke-dashoffset: 600; animation: zeichnen 1.1s cubic-bezier(.6,.1,.2,1) forwards; }
.zeichnet .anno__h { animation-delay: .5s; }
.zeichnet .anno__mass:nth-child(2) .anno__l { animation-delay: .7s; }
.zeichnet .anno__fuehrung { stroke-dasharray: 600; animation-delay: 1s; }
.zeichnet .anno__text rect, .zeichnet .anno__text text, .zeichnet .anno__pfeil, .zeichnet .anno__punkt, .zeichnet .anno__notiz { opacity: 0; animation: auf .4s ease forwards 1.3s; }
.zeichnet .anno__notiz { animation-delay: 1.9s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes auf { to { opacity: 1; } }

/* ---------- Positionen (Leistungsverzeichnis) ---------- */
.lv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.lv__titel { display: flex; align-items: baseline; gap: .8rem; font-size: 1.6rem; padding-bottom: .7rem; border-bottom: 3px double var(--tinte); }
.lv__titel span { font: 600 .85rem var(--mono); color: var(--rot); }
.lv__liste { list-style: none; margin: 0; padding: 0; }
.lv__zeile {
  display: grid; grid-template-columns: 3.4rem 1fr auto; grid-template-areas: "pos name einheit" ". text text";
  gap: .25rem 1rem; padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--linie);
  text-decoration: none; position: relative;
}
.lv__pos { grid-area: pos; font-size: .78rem; color: var(--tinte-2); padding-top: .3rem; }
.lv__name { grid-area: name; font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.lv__einheit { grid-area: einheit; font-size: .72rem; color: var(--tinte-2); padding-top: .4rem; white-space: nowrap; }
.lv__text { grid-area: text; color: var(--tinte-2); font-size: .98rem; line-height: 1.5; max-width: 48ch; }
.lv__zeile::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.lv__zeile:hover, .lv__zeile:focus-visible { color: var(--tinte); }
.lv__zeile:hover::after, .lv__zeile:focus-visible::after { transform: scaleX(1); }
.lv__zeile:hover .lv__pos, .lv__zeile:hover .lv__einheit { color: var(--rot); }
.lv__shop { margin-top: 1.6rem; }
.lv__shop a { color: var(--rot); }

/* ---------- Skizzenblock ---------- */
.skizze__brett {
  display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  border: 1.5px solid var(--tinte); background: var(--papier);
}
.skizze__regler { padding: 1.6rem; border-right: 1.5px solid var(--tinte); background: var(--papier-2); }
fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; min-width: 0; }
fieldset:last-child { margin-bottom: 0; }
legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rot); padding: 0; margin-bottom: .8rem; }
.regler { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; margin-bottom: 1.1rem; }
.regler__name { font-size: .8rem; }
.regler__name small { display: block; color: var(--tinte-2); font-size: .68rem; }
.regler output { font-weight: 600; font-size: .9rem; text-align: right; }
.regler input { grid-column: 1 / -1; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track {
  height: 10px; border-top: 1px solid var(--tinte); border-bottom: 0;
  background: repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 10%) 0 0 / 100% 8px no-repeat;
}
input[type=range]::-moz-range-track {
  height: 10px; border-top: 1px solid var(--tinte);
  background: repeating-linear-gradient(90deg, var(--tinte) 0 1px, transparent 1px 10%) 0 0 / 100% 8px no-repeat;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 24px; margin-top: -13px;
  background: var(--rot); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}
input[type=range]::-moz-range-thumb { width: 16px; height: 24px; border: 0; border-radius: 0; background: var(--rot); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
input[type=range]:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

.wahl label { display: block; position: relative; cursor: pointer; margin-bottom: .35rem; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl span {
  display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .4rem .7rem;
  font: .85rem/1.2 var(--mono); border: 1px solid var(--linie); background: var(--papier);
}
.wahl span::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--tinte); flex: none; }
.wahl input:checked + span { border-color: var(--tinte); }
.wahl input:checked + span::before { background: var(--rot); border-color: var(--rot); box-shadow: inset 0 0 0 2px var(--papier); }
.wahl input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }

.skizze__papier {
  padding: clamp(1rem, 3vw, 2rem);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--papier-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--papier-2) 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex; flex-direction: column;
}
.skizze__ansichten { display: grid; grid-template-columns: 560fr 250fr; gap: clamp(.6rem, 2vw, 1.4rem); align-items: end; }
.ansicht { margin: 0; }
.ansicht svg { width: 100%; height: auto; display: block; overflow: visible; }
.ansicht figcaption { font: .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tinte-2); border-top: 1px solid var(--tinte); padding-top: .4rem; margin-top: .4rem; }
.skizze__notiz { margin: 1.4rem 0 1.2rem; min-height: 2.8em; font-size: 1.25rem; color: var(--rot); }
.skizze__senden { display: flex; flex-wrap: wrap; gap: .75rem; }
.skizze__klein { font-size: .72rem; color: var(--tinte-2); margin: 1rem 0 0; max-width: 60ch; }

/* SVG-Zeichnung */
.z-wand { fill: url(#schraffur); stroke: var(--tinte); stroke-width: 1; }
.z-boden { stroke: var(--tinte); stroke-width: 2; }
.z-linie { fill: none; stroke: var(--tinte); stroke-width: 1.6; }
.z-duenn { fill: none; stroke: var(--tinte-2); stroke-width: 1; }
.z-tuer { fill: var(--papier); stroke: var(--tinte); stroke-width: 1.6; }
.z-glas { stroke: var(--tinte); stroke-width: 1.4; transition: fill .25s; }
.z-glas.klar { fill: var(--glas); fill-opacity: .45; }
.z-glas.satiniert { fill: #dde3e0; fill-opacity: 1; }
.z-metall { fill: var(--tinte); }
.z-mass { stroke: var(--rot); stroke-width: 1; fill: none; }
.z-masstext { font: 600 12px var(--mono); fill: var(--rot); }
.z-label { font: 11px var(--mono); fill: var(--tinte-2); }
.z-person { fill: none; stroke: var(--tinte-2); stroke-width: 1.4; stroke-dasharray: 3 2; }
.z-schraffur { stroke: var(--linie); stroke-width: 1; }
.ansicht svg * { vector-effect: non-scaling-stroke; }

/* ---------- Ablauf (Kettenmaß) ---------- */
.kette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.kette::before { content: ""; position: absolute; left: 0; right: 0; top: 1.1rem; height: 1px; background: var(--rot); }
.kette__glied { position: relative; padding: 3.2rem 1.4rem 0 0; }
.kette__glied::before, .kette__glied:last-child::after {
  content: ""; position: absolute; top: calc(1.1rem - 10px); left: 0; width: 1px; height: 21px; background: var(--rot);
}
.kette__glied:last-child::after { left: auto; right: 0; }
.kette__glied::before { box-shadow: none; }
.kette__mass {
  position: absolute; top: .45rem; left: 50%; transform: translateX(-50%);
  background: var(--papier); padding: 0 .55rem; font-size: .8rem; font-weight: 600; color: var(--rot);
}
.kette h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.kette p { color: var(--tinte-2); font-size: 1rem; }
.kette__summe {
  margin-top: 2rem; padding-top: 1rem; border-top: 3px double var(--tinte);
  font: 600 .9rem var(--mono); display: flex; gap: .8rem; align-items: baseline;
}
.kette__summe span { color: var(--rot); font-size: 1.2rem; }

/* ---------- Projekte ---------- */
.plaene { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.plan { margin: 0; grid-column: span 4; }
.plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1.5px solid var(--tinte); background: var(--papier-2); }
.plan--gross { grid-column: 1 / span 7; grid-row: span 2; }
.plan--gross img { aspect-ratio: 1; }
.plan--gross + .plan { grid-column: 8 / span 5; }
.plan--hoch { grid-column: 8 / span 5; }
.plan--hoch img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
.plan:nth-child(4) { grid-column: 1 / span 5; margin-top: 2rem; }
.plan--breit { grid-column: 6 / span 7; margin-top: 2rem; }
.plan figcaption b { font-family: var(--slab); color: var(--tinte); font-size: .95rem; }

/* ---------- Wir ---------- */
.wir { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.wir h2 { margin-bottom: 2rem; }
.wir__text p:not(.blattnr):not(.weiter) { max-width: 52ch; }
.wir__feld { position: relative; padding-top: 3.2rem; }
.schriftfeld { width: 100%; border-collapse: collapse; border: 2px solid var(--tinte); background: var(--papier); }
.schriftfeld th, .schriftfeld td { border: 1px solid var(--tinte); padding: .65rem .9rem; text-align: left; vertical-align: middle; }
.schriftfeld th { width: 38%; font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-2); }
.schriftfeld td { font-size: 1.05rem; }
.schriftfeld .hand { font-family: var(--hand); font-size: 1.5rem; color: #23408e; line-height: 1.1; }
.stempel { position: absolute; right: -1.5rem; bottom: -7.4rem; width: clamp(140px, 16vw, 180px); transform: rotate(-12deg); }
.stempel svg { width: 100%; height: auto; display: block; }
.stempel__ring { fill: none; stroke: var(--rot); stroke-width: 3; }
.stempel__ring--innen { stroke-width: 1.5; }
.stempel__rund { font: 600 13.2px var(--mono); fill: var(--rot); letter-spacing: .06em; }
.stempel__zahl { font: 700 46px var(--slab); fill: var(--rot); }
.stempel__klein { font: 14px var(--mono); fill: var(--rot); letter-spacing: .1em; }
.stempel svg { mix-blend-mode: multiply; opacity: .92; }

/* ---------- Kontakt ---------- */
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.kontakt__liste { margin: 0; border-top: 3px double var(--tinte); }
.kontakt__liste > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.kontakt__liste dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-2); }
.kontakt__liste dd { margin: 0; font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); line-height: 1.2; }
.kontakt__liste dd a { text-decoration: none; background: linear-gradient(var(--rot), var(--rot)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.kontakt__liste dd a:hover, .kontakt__liste dd a:focus-visible { background-size: 100% 2px; }
.kontakt__notiz { font-size: 1.3rem; transform: rotate(-1.5deg); max-width: 26ch; }

/* ---------- Fuß ---------- */
.fuss { margin-top: clamp(5rem, 10vw, 8rem); border-top: 1.5px solid var(--tinte); }
.fuss__feld {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: 1fr auto auto; align-items: stretch; font-size: .78rem;
}
.fuss__feld > * { margin: 0; padding: 1.2rem 1.2rem; border-left: 1px solid var(--linie); display: flex; align-items: center; }
.fuss__feld > :first-child { border-left: 0; padding-left: 0; gap: .7rem; }
.fuss .logo { width: 26px; height: 26px; }
.fuss__links { list-style: none; gap: 1.4rem; }
.fuss__klein { color: var(--tinte-2); }

/* ---------- Bewegung ---------- */
.auftauchen { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.auftauchen.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zeichnet .anno__l, .zeichnet .anno__h, .zeichnet .anno__fuehrung { stroke-dashoffset: 0; }
  .zeichnet .anno__text rect, .zeichnet .anno__text text, .zeichnet .anno__pfeil, .zeichnet .anno__punkt, .zeichnet .anno__notiz { opacity: 1; }
  .auftauchen { opacity: 1; transform: none; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .kopf__tel { display: none; }
  .kopf__feld { grid-template-columns: auto 1fr; }
  .kopf__nav a { padding: 0 .6rem; font-size: .95rem; }
}

@media (max-width: 900px) {
  :root { --kopf-h: 64px; }
  .kopf__feld { grid-template-columns: 1fr auto; position: relative; }
  .kopf__menue {
    display: block; border: 0; border-left: 1.5px solid var(--tinte); background: none; color: var(--tinte);
    font: 600 .82rem var(--mono); padding: 0 0 0 1.1rem; cursor: pointer; min-width: 64px;
  }
  .kopf__menue[aria-expanded="true"] { color: var(--rot); }
  .kopf__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    background: var(--papier); border-top: 1.5px solid var(--tinte); border-bottom: 1.5px solid var(--tinte); border-left: 0;
  }
  .kopf__nav.offen { display: block; }
  .kopf__nav ul { flex-direction: column; padding: .4rem var(--rand) 1rem; }
  .kopf__nav li { border-right: 0; border-bottom: 1px solid var(--linie); }
  .kopf__nav a { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 1rem; padding: .95rem 0; font-size: 1.3rem; }
  .kopf__nav .pos { margin: 0; width: 1.8rem; }
  .logo { width: 34px; height: 34px; }
  .kopf__name { font-size: 1.1rem; }

  .held { grid-template-columns: 1fr; }
  .held__bild { margin-top: 0; }
  .lv { grid-template-columns: 1fr; }
  .skizze__brett { grid-template-columns: 1fr; }
  .skizze__regler { border-right: 0; border-bottom: 1.5px solid var(--tinte); display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
  .skizze__regler fieldset:first-child { grid-column: 1 / -1; }
  .kette { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .kette::before { display: none; }
  .kette__glied { border-top: 1px solid var(--rot); padding-top: 2.2rem; }
  .kette__glied::before { top: -10px; }
  .kette__glied:last-child::after { top: -10px; }
  .kette__mass { top: -.65rem; left: 1.2rem; transform: none; }
  .wir { grid-template-columns: 1fr; }
  .wir__feld { padding-top: 0; margin-bottom: 4rem; max-width: 520px; }
  .kontakt__raster { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kopf__name small { display: none; }
  .vermerk { margin-bottom: 1.6rem; }
  .held__titel { font-size: clamp(2.6rem, 13.5vw, 4.2rem); }
  .anno__text text { font-size: 40px; }
  .skizze__regler { grid-template-columns: 1fr; padding: 1.2rem; }
  .skizze__ansichten { grid-template-columns: 1fr; }
  .ansicht--schnitt { max-width: 62%; }
  .z-masstext { font-size: 19px; }
  .z-label { font-size: 16px; }
  .lv__zeile { grid-template-columns: 3rem 1fr; grid-template-areas: "pos name" ". text" ". einheit"; }
  .lv__einheit { padding-top: .2rem; }
  .kette { grid-template-columns: 1fr; }
  .plaene { grid-template-columns: 1fr; }
  .plan, .plan--gross, .plan--gross + .plan, .plan--hoch, .plan:nth-child(4), .plan--breit { grid-column: 1; grid-row: auto; margin-top: 0; }
  .plan--gross img { aspect-ratio: 4 / 3; }
  .kontakt__liste > div { grid-template-columns: 1fr; gap: .2rem; }
  .fuss__feld { grid-template-columns: 1fr; }
  .fuss__feld > * { border-left: 0; border-top: 1px solid var(--linie); padding-left: 0; }
  .fuss__feld > :first-child { border-top: 0; }
  .stempel { right: .25rem; bottom: -5.6rem; width: 124px; }
}

/* =====================================================================
   UNTERSEITEN
   ===================================================================== */
.kopf__nav a[aria-current] { color: var(--rot); }

.seitenkopf {
  max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--rand) 0;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end;
}
.seitenkopf h1 { font-size: clamp(2.8rem, 1rem + 6.6vw, 6.4rem); line-height: .94; letter-spacing: -.03em; margin-bottom: 1.4rem; }
.seitenkopf__intro { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); max-width: 44ch; margin: 0; }
.verzeichnis { border: 1.5px solid var(--tinte); font-family: var(--mono); font-size: .8rem; }
.verzeichnis p { margin: 0; padding: .55rem .9rem; border-bottom: 1.5px solid var(--tinte); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--tinte-2); background: var(--papier-2); }
.verzeichnis ol { list-style: none; margin: 0; padding: 0; }
.verzeichnis li + li { border-top: 1px solid var(--linie); }
.verzeichnis a { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .6rem; padding: .6rem .9rem; text-decoration: none; }
.verzeichnis a::after { content: "→"; color: var(--tinte-2); }
.verzeichnis a:hover::after, .verzeichnis a:focus-visible::after { color: var(--rot); }
.verzeichnis span { color: var(--rot); }

.position {
  max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--rand) 0;
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr); gap: clamp(1.5rem, 5vw, 5rem);
}
.position__kopf { position: sticky; top: calc(var(--kopf-h) + 40px); align-self: start; border-top: 3px double var(--tinte); padding-top: 1rem; }
.position__kopf .pos-nr { font: 600 .8rem var(--mono); color: var(--rot); display: block; margin-bottom: .8rem; }
.position__kopf h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.position__kopf .notiz { margin-top: 1.4rem; font-size: 1.05rem; }
.position__inhalt { min-width: 0; border-top: 1px solid var(--linie); padding-top: 1rem; }
.position__inhalt > p { max-width: 62ch; }
.position__inhalt h3 { font-size: 1.45rem; margin: 2.4rem 0 .8rem; }
.position__inhalt > :first-child { margin-top: 0; }
.lead { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.45; }

.bild { margin: 2rem 0; }
.bild img { border: 1.5px solid var(--tinte); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bild figcaption { font: .78rem/1.4 var(--mono); color: var(--tinte-2); padding-top: .6rem; display: flex; gap: .8rem; }
.bildpaar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); margin: 2rem 0; }
.bildpaar .bild { margin: 0; }

.aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

/* Bauformen: drei kleine Schnitte */
.bauformen { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--tinte); }
.bauformen li { padding: 1.2rem; border-left: 1px solid var(--linie); }
.bauformen li:first-child { border-left: 0; }
.bauformen svg { width: 100%; height: auto; display: block; margin-bottom: 1rem; background: var(--papier-2); }
.bauformen h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.bauformen p { font-size: .95rem; color: var(--tinte-2); margin: 0; }
.bauformen svg *, .kassetten svg *, .wandschnitt svg *, .sonne svg * { vector-effect: non-scaling-stroke; }
.z-tuch { fill: var(--rot); fill-opacity: .18; stroke: var(--rot); stroke-width: 1.4; }

/* Stückliste / Materialliste */
.tabelle-wrap { overflow-x: auto; margin: 1.6rem 0; border: 1.5px solid var(--tinte); }
.stueckliste { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; background: var(--papier); }
.stueckliste caption { caption-side: bottom; text-align: left; font: .74rem/1.5 var(--mono); color: var(--tinte-2); padding: .7rem .9rem; border-top: 1px solid var(--linie); }
.stueckliste th, .stueckliste td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.stueckliste thead th { font: 400 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-2); background: var(--papier-2); border-bottom: 1.5px solid var(--tinte); }
.stueckliste tbody th { font-weight: 700; }
.stueckliste td.zahl { font-family: var(--mono); font-size: .85rem; white-space: nowrap; text-align: right; }
.stueckliste thead th.zahl { text-align: right; }
.stueckliste tbody tr:last-child > * { border-bottom: 0; }
.stueckliste .klein { display: block; font: .72rem var(--mono); color: var(--tinte-2); font-weight: 400; margin-top: .2rem; }
.stueckliste--frei { min-width: 0; }

/* Prüfliste */
.pruefliste { list-style: none; padding: 0; margin: 1.4rem 0; columns: 2; column-gap: 2rem; }
.pruefliste li { break-inside: avoid; display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--linie); }
.pruefliste li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--tinte); margin-top: .35em; box-sizing: border-box; }
.pruefliste--abgehakt li::before { content: "✓"; border-color: var(--rot); color: var(--rot); font: 600 11px/11px var(--mono); text-align: center; }
.pruefliste--eins { columns: 1; }

/* Umschalter */
.schalter { display: flex; flex-wrap: wrap; border: 1.5px solid var(--tinte); width: fit-content; max-width: 100%; margin: 1.2rem 0; }
.schalter button {
  font: 600 .8rem/1.2 var(--mono); padding: .7rem 1rem; min-height: 44px; background: var(--papier); color: var(--tinte);
  border: 0; border-left: 1px solid var(--linie); cursor: pointer;
}
.schalter button:first-child { border-left: 0; }
.schalter button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }
.schalter button:hover { color: var(--rot); }
.schalter button[aria-pressed="true"]:hover { color: var(--papier); }

/* Musterscheibe */
.muster { position: relative; margin: 0; border: 1.5px solid var(--tinte); overflow: hidden; }
.muster img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.muster__scheibe {
  position: absolute; top: 8%; bottom: 8%; left: 48%; right: 5%;
  border: 2px solid rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 7px 0 0 -1px #6fa29a;
  background: rgba(150, 200, 192, .14); transition: backdrop-filter .4s, background .4s;
}
.muster__scheibe::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 56%, rgba(255,255,255,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 12% 84%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 88%, rgba(255,255,255,.9) 0 3px, transparent 4px);
}
.muster[data-glas="satiniert"] .muster__scheibe { backdrop-filter: blur(9px) brightness(1.12); -webkit-backdrop-filter: blur(9px) brightness(1.12); background: rgba(240, 244, 242, .45); }
.muster[data-glas="beschichtet"] .muster__scheibe::after { opacity: 1; }
.muster__etikett {
  position: absolute; left: 1rem; bottom: 1rem; max-width: min(40ch, 42%); background: var(--papier); border: 1.5px solid var(--tinte);
  padding: .6rem .8rem; font: .78rem/1.45 var(--mono); margin: 0;
}
.muster__etikett b { display: block; color: var(--rot); font-weight: 600; margin-bottom: .2rem; }

/* Kassettenschnitte Markisen */
.kassetten { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--tinte); }
.kassetten li { padding: 1.2rem; border-left: 1px solid var(--linie); }
.kassetten li:first-child { border-left: 0; }
.kassetten svg { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto 1rem; }
.kassetten h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.kassetten p { font-size: .95rem; color: var(--tinte-2); margin: 0; }

/* Sonnenstand */
.sonne { border: 1.5px solid var(--tinte); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); margin: 2rem 0; }
.sonne__bild { padding: 1rem; background-color: var(--papier);
  background-image: linear-gradient(var(--papier-2) 1px, transparent 1px), linear-gradient(90deg, var(--papier-2) 1px, transparent 1px);
  background-size: 20px 20px; }
.sonne__bild svg { width: 100%; height: auto; display: block; }
.sonne__regler { padding: 1.3rem; border-left: 1.5px solid var(--tinte); background: var(--papier-2); }
.sonne__ergebnis { font-family: var(--hand); color: var(--rot); font-size: 1.2rem; line-height: 1.35; margin: 1rem 0 0; min-height: 3.2em; }
.z-sonne { fill: #f0b43c; stroke: var(--tinte); stroke-width: 1.2; }
.z-strahl { stroke: #c98a10; stroke-width: 1.2; stroke-dasharray: 6 4; }
.z-schatten { fill: var(--tinte); fill-opacity: .16; }
.z-tisch { fill: none; stroke: var(--tinte); stroke-width: 1.6; }

/* Verdunkelung */
.fenster { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 1.6rem; align-items: center; margin: 1.6rem 0; }
.fenster__rahmen { position: relative; aspect-ratio: 3 / 4; border: 6px solid var(--tinte); background: linear-gradient(#bcd9e8, #f6e7b8); overflow: hidden; }
.fenster__rahmen::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--tinte); z-index: 2; }
.fenster__plissee {
  position: absolute; inset: 0 0 18% 0; z-index: 1; transition: background-color .4s;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.09) 0 2px, transparent 2px 12px);
  background-color: rgba(250, 248, 240, .35); border-bottom: 5px solid var(--tinte-2);
}
.fenster[data-stufe="halb"] .fenster__plissee { background-color: rgba(240, 236, 224, .75); }
.fenster[data-stufe="verdunkelnd"] .fenster__plissee { background-color: rgba(120, 112, 100, .92); }
.fenster[data-stufe="voll"] .fenster__plissee { background-color: rgba(38, 38, 40, .98); }
.fenster__text { font-family: var(--mono); font-size: .85rem; line-height: 1.5; margin: 0; }
.fenster__text b { display: block; color: var(--rot); margin-bottom: .3rem; }

/* Wandschnitt */
.wandschnitt { border: 1.5px solid var(--tinte); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin: 1.6rem 0; }
.wandschnitt__bild { padding: 1rem; background: var(--papier); border-right: 1.5px solid var(--tinte); }
.wandschnitt__bild svg { width: 100%; height: auto; display: block; }
.wandschnitt__text { padding: 1.3rem; background: var(--papier-2); }
.wandschnitt__text h3 { margin: 0 0 .6rem; font-size: 1.3rem; }
.wandschnitt__text p { font-size: .98rem; margin: 0 0 .8rem; }
.z-mauer { fill: url(#ws-mauer); stroke: var(--tinte); stroke-width: 1.2; }
.z-beton { fill: #cfcbc0; stroke: var(--tinte); stroke-width: 1.2; }
.z-daemm { fill: url(#ws-daemm); stroke: var(--tinte); stroke-width: 1.2; }
.z-putz { fill: #e4dfd2; stroke: var(--tinte); stroke-width: 1; }
.z-klinker { fill: #b9583a; fill-opacity: .55; stroke: var(--tinte); stroke-width: 1.2; }
.z-holz { fill: #d9b98a; stroke: var(--tinte); stroke-width: 1.2; }
.z-platte { fill: #ebe6d9; stroke: var(--tinte); stroke-width: 1; }
.z-anker { fill: var(--rot); }
.z-moertel { fill: var(--rot); fill-opacity: .22; }
.z-beschrift { font: 12px var(--mono); fill: var(--tinte); }
.z-beschrift--rot { fill: var(--rot); }

/* Galerie */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.filter button { font: 600 .8rem var(--mono); padding: .6rem .9rem; min-height: 44px; border: 1.5px solid var(--tinte); background: var(--papier); color: var(--tinte); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }
.filter button span { color: var(--rot); margin-left: .35rem; }
.filter button[aria-pressed="true"] span { color: #ffb4a6; }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.galerie li[hidden] { display: none; }
.galerie button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; color: inherit; font: inherit; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1.5px solid var(--tinte); transition: border-color .15s; }
.galerie .unterschrift { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font: .78rem/1.4 var(--mono); color: var(--tinte-2); padding-top: .6rem; }
.galerie .unterschrift b { font-family: var(--slab); color: var(--tinte); font-size: .95rem; }
.galerie button:hover img, .galerie button:focus-visible img { border-color: var(--rot); }
.leuchttisch { border: 1.5px solid var(--tinte); padding: 0; background: var(--papier); max-width: min(1100px, 94vw); max-height: 94vh; color: var(--tinte); }
.leuchttisch::backdrop { background: rgba(34, 37, 40, .84); }
.leuchttisch img { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }
.leuchttisch__fuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border-top: 1.5px solid var(--tinte); font: .8rem var(--mono); }
.leuchttisch__fuss div { display: flex; gap: .4rem; }
.leuchttisch__fuss button { font: 600 .8rem var(--mono); border: 1.5px solid var(--tinte); background: var(--papier); color: var(--tinte); padding: .5rem .8rem; cursor: pointer; min-height: 40px; }
.leuchttisch__fuss button:hover { background: var(--tinte); color: var(--papier); }

/* Kontakt groß */
.kontaktblatt { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--rand) 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.kontaktblatt .kontakt__liste dd { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.3rem); }
.kasten { border: 1.5px solid var(--tinte); padding: 1.3rem; background: var(--papier-2); }
.kasten + .kasten { margin-top: 1.4rem; }
.kasten h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.kasten p { font-size: .98rem; }

/* Rechtstexte */
.rechtstext { max-width: 760px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--rand) 0; }
.rechtstext h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem); margin-bottom: 2rem; }
.rechtstext h2 { font-size: 1.4rem; margin: 2.2rem 0 .7rem; }
.hinweis { border: 1.5px dashed var(--rot); padding: 1rem 1.2rem; font: .85rem/1.5 var(--mono); color: var(--tinte-2); margin-bottom: 2rem; }

/* 404 */
.fehlt { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--rand) 0; }
.fehlt h1 { font-size: clamp(3rem, 1rem + 8vw, 7rem); line-height: .95; margin-bottom: 1.5rem; }
.fehlt p { max-width: 50ch; }

@media (max-width: 900px) {
  .seitenkopf { grid-template-columns: 1fr; align-items: start; }
  .position { grid-template-columns: 1fr; }
  .position__kopf { position: static; }
  .bauformen, .kassetten { grid-template-columns: 1fr; }
  .bauformen li, .kassetten li { border-left: 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: 170px 1fr; gap: 1.2rem; align-items: start; }
  .bauformen li:first-child, .kassetten li:first-child { border-top: 0; }
  .bauformen svg, .kassetten svg { margin: 0; }
  .sonne, .wandschnitt { grid-template-columns: 1fr; }
  .sonne__regler { border-left: 0; border-top: 1.5px solid var(--tinte); }
  .wandschnitt__bild { border-right: 0; border-bottom: 1.5px solid var(--tinte); }
  .kontaktblatt { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bildpaar { grid-template-columns: 1fr; }
  .pruefliste { columns: 1; }
  .bauformen li, .kassetten li { grid-template-columns: 1fr; }
  .bauformen svg, .kassetten svg { max-width: 260px; }
  .fenster { grid-template-columns: 1fr; }
  .fenster__rahmen { max-width: 200px; }
  .muster__etikett { position: static; max-width: none; border: 0; border-top: 1.5px solid var(--tinte); }
  .muster img { aspect-ratio: 4 / 3; }
  .schalter { width: 100%; }
  .schalter button { flex: 1 1 auto; }
  .z-beschrift { font-size: 15px; }
}

svg [hidden], [hidden] { display: none !important; }