/* Schrottankauf-Netz, Look "Wiegeschein" (DESIGN.md). Werte nur aus tokens.css.
   Mobil zuerst. Zweispaltige Raster brechen erst ab 900px um (Bauregel: Fehler
   liegen zwischen 700 und 900px). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }
body { margin: 0; background: var(--c-zink); color: var(--c-text); font-family: var(--f-text); font-size: var(--fs-body); line-height: 1.65; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--f-display); font-weight: 800; line-height: .98; letter-spacing: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; }
h3 { font-family: var(--f-text); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
strong { font-weight: 700; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--c-blech); padding: var(--s-3) var(--s-4); }
.skip-link:focus { top: var(--s-3); }
:focus-visible { outline: 3px solid var(--c-kupfer); outline-offset: 3px; }
.ic { flex: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--rand); }
.sektion { padding-block: var(--sektion); }
.sektion--beton { background: var(--c-beton); }
.sektion--guss { background: var(--c-guss); color: var(--c-zink); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-grau); max-width: var(--text-breite); }
.sektion--guss .lead, .hero .lead, .cta .lead { color: rgba(238, 240, 239, .78); }
.kicker { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-grau); }
.kicker::before { content: ""; width: 20px; height: 2px; background: var(--c-kupfer); flex: none; }
.kicker--dunkel { color: rgba(238, 240, 239, .72); }
.kicker--dunkel::before { background: var(--c-kupfer-hell); }
.kopfzeile { margin-bottom: var(--s-7); }
.kopfzeile h2 { margin-bottom: var(--s-4); max-width: 22ch; }
.kopfzeile__h2-allein { margin-bottom: var(--s-6); max-width: 22ch; }

/* Stanzecke: abgeschraegte Ecke oben rechts (DESIGN.md 6) */
.stanz, .btn--primaer, .kachel__flaeche, .ws, .bildkarte img, .zwei__spalte, .hinweis, .anfrage__karte, .band__karte, .quellen-box, .bezirk {
  clip-path: polygon(0 0, calc(100% - var(--stanz)) 0, 100% var(--stanz), 100% 100%, 0 100%);
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--r-klein); font: 700 1rem/1.2 var(--f-text); text-decoration: none; cursor: pointer; transition: background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), --stanz var(--t-mittel); }
.btn--primaer { background: var(--c-kupfer); color: var(--c-blech); }
.btn--primaer:hover { background: var(--c-kupfer-600); --stanz: 14px; }
.btn--sekundaer { background: transparent; color: var(--c-text); border-color: var(--c-text); }
.btn--sekundaer:hover { background: var(--c-text); color: var(--c-blech); }
.btn--dunkel { background: transparent; color: var(--c-zink); border-color: rgba(238, 240, 239, .45); }
.btn--dunkel:hover { border-color: var(--c-zink); }
.btn--breit { width: 100%; }
.btn .ic { transition: transform var(--t-mittel) var(--kurve); }
.btn--primaer:hover .ic { transform: translateX(3px); }

/* Luecke (nur im Entwurf sichtbar) */
.luecke { display: inline; padding: 1px 6px; background: #FFF3C4; color: #5C4300; border: 1px dashed #B88A00; border-radius: var(--r-klein); font-size: .92em; font-weight: 600; }
.entwurf-hinweis { padding: var(--s-4); background: #FFF3C4; border-left: 3px solid #B88A00; color: #5C4300; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--c-guss); color: var(--c-zink); border-bottom: 2px solid var(--c-kupfer-hell); border-radius: var(--r-nav); transition: box-shadow var(--t-mittel); }
.kopf.ist-gescrollt { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6); }
.kopf__innen { display: flex; align-items: center; gap: var(--s-5); min-height: var(--kopf-hoehe); }
.kopf__logo { text-decoration: none; flex: none; min-width: 0; }
.kopf__nav { margin-left: auto; }
.kopf__nav ul { list-style: none; display: flex; gap: var(--s-5); }
.kopf__nav a { text-decoration: none; font-weight: 600; font-size: .95rem; color: rgba(238, 240, 239, .86); }
.kopf__nav a:hover { color: var(--c-zink); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--c-kupfer-hell); }
.kopf__aktion { display: flex; align-items: center; gap: var(--s-4); }
.kopf__tel { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-zink); white-space: nowrap; }
.kopf__tel .ic { color: var(--c-kupfer-hell); }
.kopf__tel--menue { display: none; }
.kopf__burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1px solid var(--c-linie-dunkel); color: var(--c-zink); border-radius: var(--r-klein); cursor: pointer; flex: none; }
.kopf__burger .auf { display: none; }
.kopf__burger[aria-expanded="true"] .auf { display: block; }
.kopf__burger[aria-expanded="true"] .zu { display: none; }

@media (max-width: 1099px) {
  .kopf__burger { display: inline-flex; }
  .kopf__nav { position: fixed; inset: var(--kopf-hoehe) 0 0 0; margin: 0; padding: var(--s-6) var(--rand); background: var(--c-guss); display: none; flex-direction: column; gap: var(--s-6); overflow-y: auto; }
  .kopf__nav.ist-offen { display: flex; }
  .kopf__nav ul { flex-direction: column; gap: 0; }
  .kopf__nav li a { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie-dunkel); font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; color: var(--c-zink); }
  .kopf__tel--menue { display: inline-flex; font-size: 1.2rem; }
  body.menue-offen { overflow: hidden; }
}
@media (max-width: 767px) {
  .kopf__aktion .kopf__tel, .kopf__btn { display: none; }
  .kopf__aktion { margin-left: auto; }
}

/* Wortmarke */
.wm { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wm__zeichen { flex: none; }
.wm__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.wm__a { font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; letter-spacing: .01em; text-transform: uppercase; }
.wm__b { font-family: var(--f-text); font-weight: 600; font-size: .82rem; letter-spacing: .04em; margin-top: 3px; color: var(--c-grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm--hell .wm__a { color: var(--c-zink); }
.wm--hell .wm__b { color: var(--c-kupfer-hell); }

/* Hero */
.hero { position: relative; background: var(--c-guss); color: var(--c-zink); padding-block: clamp(36px, 6vw, 88px) clamp(48px, 7vw, 104px); overflow: hidden; }
.hero__rauschen { position: absolute; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__raster { position: relative; display: grid; gap: var(--s-7); }
.hero h1 { margin-bottom: var(--s-5); max-width: 15ch; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: rgba(238, 240, 239, .8); max-width: 52ch; }
.hero__kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin: var(--s-5) 0 var(--s-6); }
.hero__tel { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: .02em; color: var(--c-zink); text-decoration: none; font-variant-numeric: tabular-nums; }
.hero__tel .ic { color: var(--c-kupfer-hell); }
.hero__frage { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: var(--s-5); }
.hero__hinweis { margin: var(--s-3) 0 0; font-size: .875rem; color: rgba(238, 240, 239, .6); }
.hero__kontakt { margin-bottom: 0; }
@media (min-width: 900px) {
  .hero__raster { grid-template-columns: 1fr 1fr; grid-template-areas: "text wahl" "ws wahl"; align-items: start; column-gap: var(--s-8); row-gap: var(--s-6); }
  .hero__text { grid-area: text; }
  .hero__wahl { grid-area: wahl; padding-top: var(--s-3); }
  .hero__ws { grid-area: ws; }
}

/* Material-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.kachel { display: block; text-decoration: none; cursor: pointer; position: relative; }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kachel__flaeche { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); background: var(--c-guss-700); color: var(--c-zink); box-shadow: inset 0 0 0 1px var(--c-linie-dunkel); transition: box-shadow var(--t-schnell), background-color var(--t-schnell); }
.kachel__name { font-weight: 700; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.kachel__haken { margin-left: auto; opacity: 0; color: var(--c-kupfer-hell); transition: opacity var(--t-schnell); }
.kachel__ic { color: var(--c-kupfer-hell); }
.kachel:hover .kachel__flaeche { box-shadow: inset 0 0 0 1px rgba(238, 240, 239, .45); }
.kachel[aria-pressed="true"] .kachel__flaeche, .kachel input:checked + .kachel__flaeche { box-shadow: inset 0 0 0 2px var(--c-kupfer-hell); }
.kachel[aria-pressed="true"] .kachel__haken, .kachel input:checked + .kachel__flaeche .kachel__haken { opacity: 1; }
.kachel input:focus-visible + .kachel__flaeche { outline: 3px solid var(--c-kupfer); outline-offset: 2px; }
.kacheln--form .kachel__flaeche { background: var(--c-blech); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-linie); }
.kacheln--form .kachel input:checked + .kachel__flaeche { box-shadow: inset 0 0 0 2px var(--c-kupfer); }
.kacheln--form .kachel__haken, .kacheln--form .kachel__ic { color: var(--c-kupfer); }
@media (min-width: 560px) and (max-width: 899px) { .kacheln--hero { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kacheln--hero .kachel__flaeche { flex-direction: column; align-items: flex-start; } .kacheln--hero .kachel__haken { position: absolute; top: 10px; right: 14px; } }

/* Materialplaettchen */
.pl { display: inline-block; flex: none; width: 22px; height: 22px; background: var(--pl, var(--m-gemischt)); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.pl--gross { width: 28px; height: 28px; }
.pl--kabel { background: linear-gradient(135deg, var(--m-kupfer) 50%, var(--c-guss-700) 50%); }

/* Wiegeschein */
.ws { max-width: 420px; background: var(--c-blech); color: var(--c-text); padding: var(--s-4) var(--s-5) var(--s-5); border-bottom: 2px dashed var(--c-linie); box-shadow: var(--sh-1); }
.ws__kopf { display: flex; justify-content: space-between; margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 2px solid var(--c-text); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ws__kopf span:last-child { color: var(--c-kupfer); }
.ws__zeilen div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 6px 0; border-bottom: 1px solid var(--c-linie); font-size: var(--fs-klein); }
.ws__zeilen div:last-child { border-bottom: 0; }
.ws__zeilen dt { color: var(--c-grau); }
.ws__zeilen dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ws--gebiet { margin-top: var(--s-7); }

/* Bedingungen */
.bedingungen { background: var(--c-beton); padding-block: var(--s-7); border-bottom: 1px solid var(--c-linie); }
.bedingungen__titel { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--s-5); }
.bedingungen__raster { display: grid; gap: 1px; background: var(--c-linie); border: 1px solid var(--c-linie); }
.bedingung { background: var(--c-beton); padding: var(--s-4) var(--s-5); }
.bedingung dt { font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau); margin-bottom: var(--s-2); }
.bedingung dd { font-weight: 600; }
@media (min-width: 700px) { .bedingungen__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bedingungen__raster { grid-template-columns: repeat(4, 1fr); } }

/* Sortiertafel */
.tafel-raster { display: grid; gap: var(--s-6); align-items: start; }
.tafel { width: 100%; border-collapse: collapse; background: var(--c-blech); border-top: 2px solid var(--c-text); border-bottom: 2px solid var(--c-text); font-size: var(--fs-klein); }
.tafel th, .tafel td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--c-linie); }
.tafel thead th { font-size: var(--fs-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau); padding-block: var(--s-3); }
.tafel__metall { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 1rem; }
.tafel__tages { color: var(--c-grau); }
.tafel__stand { display: block; font-size: .8rem; color: var(--c-grau); }
@media (max-width: 767px) {
  .tafel, .tafel tbody, .tafel tr, .tafel th, .tafel td { display: block; }
  .tafel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tafel tr { padding: var(--s-4); border-bottom: 1px solid var(--c-linie); }
  .tafel th, .tafel td { padding: 4px 0; border: 0; }
  .tafel th { padding-bottom: var(--s-2); }
  .tafel td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--c-grau); }
  .tafel td:empty { display: none; }
}
@media (min-width: 1100px) { .tafel-raster { grid-template-columns: minmax(0, 1fr) 380px; } .bildkarte--klebt { position: sticky; top: calc(var(--kopf-hoehe) + 24px); } }
.nicht { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 2px solid var(--c-text); max-width: var(--text-breite); }
.nicht h3 { margin-bottom: var(--s-4); }
.nicht__liste { list-style: none; display: grid; gap: var(--s-2); }
.nicht__liste li { display: flex; gap: var(--s-3); align-items: flex-start; }
.nicht__liste .ic { color: var(--c-fehler); margin-top: 4px; }

/* Bilder */
.bildkarte { margin: 0; }
.bildkarte img { width: 100%; background: var(--c-beton); }
.bildkarte figcaption { margin-top: var(--s-2); font-size: .85rem; color: var(--c-grau); }
.bildkarte--breit { margin-top: var(--s-7); }
.bildkarte--text { margin: var(--s-6) 0; }
.bild-vorhang img { clip-path: inset(100% 0 0 0); transform: scale(1.04); transition: clip-path 800ms var(--kurve), transform 900ms var(--kurve); }
.bild-vorhang.ist-sichtbar img { clip-path: polygon(0 0, calc(100% - var(--stanz)) 0, 100% var(--stanz), 100% 100%, 0 100%); transform: none; }

/* Ablauf als Beleg */
.beleg { list-style: none; background: var(--c-blech); border-top: 2px solid var(--c-text); border-bottom: 2px dashed var(--c-linie); max-width: 980px; }
.beleg__zeile { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); padding: var(--s-5); border-bottom: 1px solid var(--c-linie); }
.beleg__zeile:last-child { border-bottom: 0; }
.beleg__nr { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--c-kupfer); font-variant-numeric: tabular-nums; }
.beleg h3 { margin-bottom: var(--s-2); }
.beleg p { margin: 0; color: var(--c-grau); }
@media (min-width: 900px) {
  .beleg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .beleg__zeile { grid-template-columns: 1fr; border-bottom: 0; border-right: 1px solid var(--c-linie); }
  .beleg__zeile:last-child { border-right: 0; }
}

/* Privat / Gewerbe */
.zwei { display: grid; gap: var(--s-5); }
.zwei__spalte { background: var(--c-blech); padding: var(--s-6) var(--s-5); box-shadow: inset 0 0 0 1px var(--c-linie); display: flex; flex-direction: column; align-items: flex-start; }
.zwei__spalte h3 { margin-bottom: var(--s-3); }
.zwei__spalte p { color: var(--c-grau); }
.zwei__spalte .btn { margin-top: auto; }
.zwei__spalte--gewerbe { background: var(--c-guss); color: var(--c-zink); box-shadow: none; }
.zwei__spalte--gewerbe p { color: rgba(238, 240, 239, .78); }
.zwei__marke { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-kupfer); }
.zwei__spalte--gewerbe .zwei__marke { color: var(--c-kupfer-hell); }
.leistungen { width: 100%; margin: var(--s-2) 0 var(--s-5); }
.leistungen div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-linie-dunkel); font-size: var(--fs-klein); }
.leistungen dt { color: rgba(238, 240, 239, .7); }
.leistungen dd { font-weight: 600; text-align: right; }
@media (min-width: 900px) { .zwei { grid-template-columns: 1fr 1fr; } }

/* Anfrage */
.anfrage__raster { display: grid; gap: var(--s-6); }
.anfrage__text h2 { margin-bottom: var(--s-4); }
.anfrage__karte { background: var(--c-blech); color: var(--c-text); padding: var(--s-5); box-shadow: var(--sh-1); }
@media (min-width: 900px) { .anfrage__raster { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--s-8); } .anfrage__karte { padding: var(--s-6); } .anfrage__text { position: sticky; top: calc(var(--kopf-hoehe) + 32px); } }

/* Formular */
.formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formular__ehp { position: absolute; left: -9999px; }
.formular__schritte { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau); }
.formular__balken { flex: 1; height: 3px; background: var(--c-linie); }
.formular__balken i { display: block; height: 100%; width: 50%; background: var(--c-kupfer); transition: width var(--t-mittel) var(--kurve); }
.formular__legende { font-family: var(--f-display); font-weight: 800; font-size: 1.8rem; line-height: 1; margin-bottom: var(--s-5); padding: 0; }
.feldgruppe { margin-bottom: var(--s-5) !important; }
.feldgruppe > legend, .feld label { display: block; font-weight: 700; margin-bottom: var(--s-2); padding: 0; }
.pflicht, .optional { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-grau); margin-left: var(--s-2); }
.wahl { display: grid; gap: var(--s-2); }
.wahl__punkt { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-4); background: var(--c-blech); box-shadow: inset 0 0 0 1px var(--c-linie); cursor: pointer; }
.wahl__punkt input { accent-color: var(--c-kupfer); width: 20px; height: 20px; flex: none; }
.wahl__punkt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--c-kupfer); }
@media (min-width: 560px) { .wahl { grid-template-columns: 1fr 1fr; } }
.feld { margin-bottom: var(--s-4); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1rem/1.4 var(--f-text); color: var(--c-text); background: var(--c-blech); border: 1px solid var(--c-linie); border-radius: var(--r-klein); }
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid rgba(180, 83, 42, .45); outline-offset: 0; border: 2px solid var(--c-text); }
.formular__foto { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); background: var(--c-kupfer-50); font-size: var(--fs-klein); }
.formular__foto .ic { color: var(--c-kupfer); margin-top: 2px; }
.formular__foto a { font-weight: 700; color: var(--c-kupfer-600); }
.formular__fehler { color: var(--c-fehler); font-weight: 600; }
.formular__knoepfe { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.formular__knoepfe .btn--primaer { flex: 1; }
.formular__klein { margin-top: var(--s-4); font-size: .8rem; color: var(--c-grau); }
.formular__ergebnis { padding: var(--s-5); background: var(--c-kupfer-50); }
.formular__ergebnis .ic { color: var(--c-kupfer); }
.formular__ergebnis--fehler { background: #F9E3E3; }
.formular__ergebnis--fehler .ic { color: var(--c-fehler); }
.formular__ergebnis-titel { font-weight: 700; font-size: 1.15rem; margin: var(--s-2) 0; }
.js .formular__schritt[data-schritt="2"] { display: none; }
.js .formular.ist-schritt-2 .formular__schritt[data-schritt="1"] { display: none; }
.js .formular.ist-schritt-2 .formular__schritt[data-schritt="2"] { display: block; }
.formular:not(.js *) .formular__schritte { display: none; }

/* Abholgebiet */
.gebiet__kopf { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (min-width: 900px) { .gebiet__kopf { grid-template-columns: 5fr 7fr; align-items: center; } }
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-linie); border: 1px solid var(--c-linie); margin-bottom: var(--s-7); }
.zahlen__feld { background: var(--c-blech); padding: var(--s-4); }
.zahlen dt { font-size: .8rem; color: var(--c-grau); }
.zahlen dd { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.bezirke { display: grid; gap: var(--s-3); }
.bezirk { background: var(--c-blech); padding: var(--s-4) var(--s-5); box-shadow: inset 0 0 0 1px var(--c-linie); }
.bezirk__name { font-weight: 700; font-size: 1.05rem; margin-bottom: var(--s-1) !important; color: var(--c-text) !important; }
.bezirk p { margin: 0; color: var(--c-grau); font-size: var(--fs-klein); }
@media (min-width: 640px) { .bezirke { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bezirke { grid-template-columns: repeat(3, 1fr); } }
.quellzeile { margin-top: var(--s-3); font-size: .82rem; color: var(--c-grau); }
.gebiet__block { margin-top: var(--s-7); }
.gebiet__block h3 { margin-bottom: var(--s-3); }
.gebiet__block p { max-width: var(--text-breite); }
.gebiet__block--zwei { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .gebiet__block--zwei { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips li { padding: 6px 12px; background: var(--c-guss); color: var(--c-zink); border-radius: var(--r-klein); font-weight: 600; font-size: var(--fs-klein); }
.chips li span { font-weight: 400; color: rgba(238, 240, 239, .65); }
.chips--leise li { background: var(--c-blech); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-linie); }
.hinweis { display: flex; gap: var(--s-4); margin-top: var(--s-7); padding: var(--s-5); background: var(--c-blech); box-shadow: inset 0 0 0 1px var(--c-linie); max-width: 900px; }
.hinweis .ic { color: var(--c-kupfer); margin-top: 2px; }
.hinweis h3 { margin-bottom: var(--s-2); }
.hinweis p { margin: 0; color: var(--c-grau); }

/* Bewertungsband (Endlos, ohne Pfeile) */
.band { overflow: hidden; }
.band h2 { margin-bottom: var(--s-4); }
.band__hinweis { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px; background: #FFF3C4; color: #5C4300; border: 1px dashed #B88A00; font-size: .875rem; font-weight: 600; }
.band__lauf { margin-top: var(--s-6); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.band__spur { list-style: none; display: flex; gap: var(--s-4); width: max-content; animation: band 60s linear infinite; }
.band__lauf:hover .band__spur { animation-play-state: paused; }
.band__karte { width: 320px; flex: none; background: var(--c-blech); padding: var(--s-5); box-shadow: inset 0 0 0 1px var(--c-linie); }
.band__sterne { display: flex; gap: 2px; color: var(--c-kupfer); margin-bottom: var(--s-3); fill: currentColor; }
.band__karte p { font-size: var(--fs-klein); }
.band__wer { margin: 0; font-size: .82rem; color: var(--c-grau); }
@keyframes band { to { transform: translateX(calc(-50% - var(--s-4) / 2)); } }

/* Ratgeber */
.ratgeber { display: grid; gap: var(--s-6); }
.ivz { background: var(--c-blech); box-shadow: inset 0 0 0 1px var(--c-linie); padding: var(--s-4) var(--s-5); align-self: start; }
.ivz summary { cursor: pointer; font-weight: 700; font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--c-grau); }
.ivz ol { margin-top: var(--s-3); padding-left: 1.2rem; display: grid; gap: var(--s-2); font-size: var(--fs-klein); }
.ivz a { text-decoration: none; }
.ivz a:hover { color: var(--c-kupfer-600); text-decoration: underline; }
.ratgeber__text { max-width: 76ch; }
.abschnitt { padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--c-linie); }
.abschnitt:last-child { border-bottom: 0; }
.abschnitt h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: var(--s-4); }
.abschnitt strong { color: var(--c-text); }
@media (min-width: 1100px) { .ratgeber { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); } .ivz { position: sticky; top: calc(var(--kopf-hoehe) + 24px); } }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 2px solid var(--c-text); max-width: 980px; }
.faq__eintrag { border-bottom: 1px solid var(--c-linie); }
.faq__eintrag summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; cursor: pointer; list-style: none; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary h3 { font-size: 1.1rem; }
.faq__pfeil { color: var(--c-kupfer); transition: transform var(--t-mittel) var(--kurve); }
.faq__eintrag[open] .faq__pfeil { transform: rotate(180deg); }
.faq__antwort { padding-bottom: var(--s-5); max-width: var(--text-breite); color: var(--c-grau); }

/* Quellenblock (seo-bau references/quellenblock.md, auf tokens angepasst) */
.quellen { padding-block: var(--s-8) var(--s-7); }
.quellen-box { background: var(--c-blech); box-shadow: inset 0 0 0 1px var(--c-linie); max-width: 980px; }
.quellen-kopf { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.35rem; cursor: pointer; list-style: none; font-weight: 700; }
.quellen-kopf::-webkit-details-marker { display: none; }
.quellen-kopf:hover { background: var(--c-zink); }
.quellen-pfeil { width: .55rem; height: .55rem; border-right: 2px solid var(--c-kupfer); border-bottom: 2px solid var(--c-kupfer); transform: rotate(-45deg); transition: transform .25s ease; flex: none; }
.quellen-box[open] .quellen-pfeil { transform: rotate(45deg); }
.quellen-wort { font-size: 1.05rem; }
.quellen-zahl { margin-left: auto; font-size: .85rem; font-weight: 400; color: var(--c-grau); }
.quellen-inhalt { padding: 0 1.35rem 1.35rem; border-top: 1px solid var(--c-linie); }
.quellen-vorwort, .quellen-nachwort { font-size: .9rem; color: var(--c-grau); margin: 1rem 0; }
.quellen-liste { margin: 0; padding-left: 1.4rem; display: grid; gap: .9rem; font-size: .92rem; line-height: 1.5; }
.quellen-liste li { padding-left: .25rem; scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.quellen-liste li:target { background: var(--c-kupfer-50); padding: .5rem .25rem .5rem .5rem; margin-left: -.5rem; }
.q-aussage { font-weight: 700; }
.q-aussage::after { content: " · "; color: var(--c-grau); font-weight: 400; }
.q-wert { font-variant-numeric: tabular-nums; color: var(--c-kupfer-600); font-weight: 700; white-space: nowrap; }
.q-link { display: block; color: var(--c-kupfer-600); overflow-wrap: anywhere; }
.q-datum { font-size: .82rem; color: var(--c-grau); }
.fn { font-size: .7em; line-height: 0; }
.fn a { text-decoration: none; color: var(--c-kupfer-600); padding: 0 .12em; font-weight: 700; }
.fn a:hover { text-decoration: underline; }
.sektion--guss .fn a, .hero .fn a { color: var(--c-kupfer-hell); }

/* Abschluss */
.cta { position: relative; background: var(--c-guss); color: var(--c-zink); padding-block: var(--sektion); overflow: hidden; }
.cta__innen { position: relative; }
.cta h2 { margin-bottom: var(--s-4); max-width: 20ch; }
.cta__tel { display: inline-block; margin: var(--s-4) 0 var(--s-5); font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; color: var(--c-kupfer-hell); text-decoration: none; font-variant-numeric: tabular-nums; }
.cta__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Footer */
.fuss { background: var(--c-guss); color: rgba(238, 240, 239, .78); border-top: 1px solid var(--c-linie-dunkel); padding-top: var(--s-8); font-size: var(--fs-klein); }
.fuss__raster { display: grid; gap: var(--s-6); }
.fuss__text { margin-top: var(--s-4); max-width: 46ch; }
.fuss__titel { font-weight: 700; color: var(--c-zink); letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-kicker); }
.fuss__nap a, .fuss__links a { color: var(--c-zink); }
.fuss__links { list-style: none; display: grid; gap: var(--s-2); }
.fuss__unten { margin-top: var(--s-7); padding-block: var(--s-5); border-top: 1px solid var(--c-linie-dunkel); font-size: .82rem; }
.fuss__unten p { margin: 0; }
@media (min-width: 900px) { .fuss__raster { grid-template-columns: 2fr 1.5fr 1fr; } }
@media (max-width: 767px) { .fuss { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }

/* Mobile Aktionsleiste */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--c-guss); border-top: 2px solid var(--c-kupfer-hell); padding-bottom: env(safe-area-inset-bottom); }
.leiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; color: var(--c-zink); text-decoration: none; font-size: .78rem; font-weight: 700; }
.leiste a .ic { color: var(--c-kupfer-hell); }
.leiste__haupt { background: var(--c-kupfer); }
.leiste__haupt .ic { color: var(--c-blech) !important; }
@media (min-width: 768px) { .leiste { display: none; } }

/* Unterseiten */
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-5); font-size: .875rem; color: var(--c-grau); }
.brotkrumen li + li::before { content: "›"; margin-right: var(--s-2); }
.recht { max-width: 78ch; }
.recht h1 { margin-bottom: var(--s-5); }
.recht h2 { font-family: var(--f-text); font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: var(--s-6) 0 var(--s-2); }
.unterlagen { list-style: none; display: grid; gap: var(--s-3); }
.unterlagen li { display: flex; gap: var(--s-3); }
.text-stein { display: block; color: var(--c-grau); font-size: .85rem; }

/* Bewegung (Regler 4): nur transform, opacity, clip-path. Ohne JS alles sichtbar. */
.js .einblenden { opacity: 0; transform: translateY(10px); transition: opacity 380ms var(--kurve), transform 380ms var(--kurve); }
.js .einblenden.ist-sichtbar { opacity: 1; transform: none; }
.js [data-reveal-zeile] { opacity: 0; transform: translateY(8px); transition: opacity 340ms var(--kurve), transform 340ms var(--kurve); transition-delay: calc(var(--i, 0) * 50ms); }
.js [data-reveal-zeile].ist-sichtbar { opacity: 1; transform: none; }
.js .kacheln--hero .kachel { opacity: 0; transform: translateY(8px); animation: kachel-ein 320ms var(--kurve) forwards; animation-delay: calc(120ms + var(--i, 0) * 40ms); }
@keyframes kachel-ein { to { opacity: 1; transform: none; } }
.js .ws--hero { clip-path: polygon(0 0, calc(100% - var(--stanz)) 0, 100% var(--stanz), 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .einblenden, .js [data-reveal-zeile], .js .kacheln--hero .kachel { opacity: 1 !important; transform: none !important; }
  .bild-vorhang img { clip-path: none !important; transform: none !important; }
  .band__spur { width: auto; flex-wrap: wrap; padding-inline: var(--rand); }
  .band__karte[aria-hidden="true"] { display: none; }
  .band__lauf { mask-image: none; }
}


/* ===== Reza-Override 25.10.2026: Bilder (DESIGN.md 12) ===== */
/* Hero mit Foto unter Gusseisen-Duotone, Ken-Burns */
.hero--bild { isolation: isolate; }
.hero__bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: grayscale(.35) contrast(1.05); transform-origin: 70% 55%; }
.hero--bild::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(26,29,31,.94) 0%, rgba(26,29,31,.82) 42%, rgba(26,29,31,.55) 70%, rgba(26,29,31,.72) 100%),
              linear-gradient(0deg, rgba(26,29,31,.85) 0%, rgba(26,29,31,0) 40%); }
@media (max-width: 767px) {
  /* Handy: Foto als sichtbares Band im oberen Teil, darunter Gusseisen */
  .hero__bild { bottom: auto; height: min(640px, 92svh); }
  .hero__bild img { object-position: 50% 82%; }
  .hero--bild::before { bottom: auto; height: min(640px, 92svh);
    /* Mindestens 70 % Abdunklung hinter Text: auch auf reinem Weiss haelt Zink-Schrift dann 5,6:1 (AA) */
    background: linear-gradient(180deg, rgba(26,29,31,.72) 0%, rgba(26,29,31,.70) 35%, rgba(26,29,31,.84) 70%, rgba(26,29,31,1) 100%); }
}
.hero--bild h1, .hero--bild .hero__lead, .hero--bild .hero__tel, .hero--bild .kicker { text-shadow: 0 1px 14px rgba(10,12,13,.75); }
.hero--bild .hero__hinweis { color: rgba(238,240,239,.8); text-shadow: 0 1px 8px rgba(10,12,13,.9); }
.js .hero__bild img { animation: kenburns 22s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12) translate3d(-1.5%, 1%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
/* Wort-Reveal der H1 (kurz, damit der LCP nicht leidet) */
.js .hero__h1 .w { display: inline-block; opacity: 0; transform: translateY(.35em); animation: wort .45s var(--kurve) forwards; animation-delay: calc(80ms + var(--w) * 45ms); }
@keyframes wort { to { opacity: 1; transform: none; } }
.hero--bild .kachel__flaeche { background: rgba(43, 48, 51, .86); }

/* Sortiertafel mit Materialfoto */
.tafel__foto { width: 80px; height: 60px; object-fit: cover; flex: none; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.tafel__name { display: inline-flex; align-items: center; gap: var(--s-2); }
.tafel__name .pl { width: 14px; height: 14px; }
@media (max-width: 767px) { .tafel__foto { width: 96px; height: 72px; } }

/* Galerie: ungleiches Raster, Hover-Zoom, Lightbox */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.gal__item { position: relative; display: block; padding: 0; border: 0; background: var(--c-guss-700); cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 3;
  clip-path: polygon(0 0, calc(100% - var(--stanz)) 0, 100% var(--stanz), 100% 100%, 0 100%); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--kurve), filter var(--t-mittel); filter: grayscale(.2); }
.gal__item:hover img, .gal__item:focus-visible img { transform: scale(1.04); filter: none; }
.gal__item--gross { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .gal { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .gal__item--gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.lightbox::backdrop { background: rgba(10, 12, 13, .9); }
.lightbox figure { margin: 0; }
.lightbox img { max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: 0 auto; }
.lightbox figcaption { color: var(--c-zink); font-size: .9rem; padding: var(--s-3) 0; }
.lightbox__zu { position: fixed; top: 12px; right: 12px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--c-guss); color: var(--c-zink); border: 1px solid var(--c-linie-dunkel); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__bild img { animation: none !important; }
  .js .hero__h1 .w { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Kontrast-Korrektur 25.10. (Steuer-Session): rechte Hero-Spalte auf eigener Gusseisen-Flaeche,
   damit Frage, Kacheln und Hinweis auch auf hellem Kupfer AA halten (Flaeche 90 %: ueber Weiss 13:1). */
@media (min-width: 900px) {
  .hero--bild .hero__wahl { background: rgba(26, 29, 31, .9); padding: var(--s-5) var(--s-5) var(--s-4); margin-top: calc(-1 * var(--s-3));
    clip-path: polygon(0 0, calc(100% - var(--stanz)) 0, 100% var(--stanz), 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--c-linie-dunkel); }
  .hero--bild .kachel__flaeche { background: var(--c-guss-700); }
}

/* ===== Reza-Override 25.10.2026: WhatsApp-Gruen und mitlaufende Kontaktknoepfe ===== */
.btn--wa { background: var(--c-wa); color: var(--c-text); border-color: var(--c-wa-rand); }
.btn--wa:hover { background: var(--c-wa-600); border-color: var(--c-wa-rand); }
.btn--wa .ic { color: var(--c-text); }
.leiste a.leiste__wa { background: var(--c-wa); color: var(--c-text); }
.leiste a.leiste__wa .ic { color: var(--c-text); }

.schwebe { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: none; flex-direction: column; align-items: stretch; gap: var(--s-2);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve); }
.schwebe.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.schwebe__knopf { justify-content: flex-start; min-height: 52px; padding: 12px 18px; box-shadow: 0 12px 28px -14px rgba(10,12,13,.6);
  clip-path: polygon(0 0, calc(100% - var(--stanz)) 0, 100% var(--stanz), 100% 100%, 0 100%); }
.schwebe__tel { background: var(--c-guss); color: var(--c-zink); border-color: var(--c-guss); font-variant-numeric: tabular-nums; }
.schwebe__tel .ic { color: var(--c-kupfer-hell); }
.schwebe__tel:hover { background: var(--c-guss-700); }
@media (min-width: 768px) { .schwebe { display: flex; } }
/* Kein Inhalt verdeckt: Beschriftung erst ab 1680px (dort ist der Rand neben dem 1240er Inhalt
   breiter als die Knoepfe). Darunter nur Symbole (52px, Name bleibt fuer Screenreader).
   Zwischen 768 und 1359px bekommt der Inhalt dauerhaft 80px Seitenabstand, damit die Symbole
   neben dem Text liegen. Dauerhaft, nicht beim Einblenden: kein Layout-Springen. */
.schwebe__tel { box-shadow: inset 0 0 0 1px rgba(238, 240, 239, .55), 0 12px 28px -14px rgba(10,12,13,.6); }
@media (min-width: 768px) and (max-width: 1679px) {
  .schwebe { right: 14px; bottom: 16px; }
  .schwebe__knopf { width: 52px; padding: 0; justify-content: center; }
  .schwebe__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1359px) {
  main .container, .fuss .container, .kopf .container { padding-inline: max(var(--rand), 80px); }
}
@media (prefers-reduced-motion: reduce) { .schwebe { transition: none; transform: none; } }