/* 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); }
/* Text statt Material-Kacheln in der rechten Hero-Spalte (02.11.2026). */
.hero__wahl-text { margin: 0 0 var(--s-5); color: rgba(238, 240, 239, .85); line-height: 1.55; }
.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); } }
/* Abhol-Versprechen (01.11.2026): drei gleich breite Felder statt vier, dd hier Fliesstext. */
.bedingungen__raster--drei { margin-top: var(--s-6); }
.bedingungen__raster--drei dd { font-weight: 400; color: var(--c-grau); }
@media (min-width: 700px) { .bedingungen__raster--drei { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bedingungen__raster--drei { grid-template-columns: repeat(3, 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); }
/* Bild in einer Textspalte (02.11.2026): sitzt neben dem Text statt ueber die volle Breite. */
.bildkarte--spalte { margin: var(--s-5) 0; }
.bildkarte--spalte img { aspect-ratio: 16 / 9; object-fit: cover; }
.bildkarte--spalte figcaption { color: rgba(238, 240, 239, .65); }
.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; }
/* Teileliste in der Privat-Spalte (02.11.2026), damit die Spalte nicht leer laeuft. */
.teile__titel { font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau); margin: var(--s-5) 0 var(--s-3); }
.zwei__spalte .chips { margin-bottom: var(--s-6); }
.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; }
/* z-index -2 statt -1 (02.11.2026): Bild und Abdunklung lagen beide auf -1, dadurch lag das Bild
   als echtes Element ueber dem ::before-Verlauf und die Abdunklung war wirkungslos. Beim alten
   dunklen Kupferfoto fiel das nicht auf, beim hellen Abendfoto stand die weisse Ueberschrift auf
   fast weissem Himmel (gemessen 83 % Helligkeit). Dazu weniger Entsaettigung, damit das
   Abendlicht des echten Fahrzeugs erhalten bleibt. */
.hero__bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 60%; filter: grayscale(.12) contrast(1.04); transform-origin: 70% 55%; }
/* Verlauf: links kraeftig fuer den Text, nach rechts schnell heller, damit das Fahrzeug klar
   zu sehen ist. Die rechte Hero-Spalte traegt ihre eigene dunkle Flaeche. */
.hero--bild::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(26,29,31,.95) 0%, rgba(26,29,31,.9) 34%, rgba(26,29,31,.62) 52%, rgba(26,29,31,.3) 72%, rgba(26,29,31,.26) 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 */
  /* Band hoeher und auf den unteren Bildteil ausgerichtet (02.11.2026), damit das Fahrzeug am
     Handy ueberhaupt zu sehen ist. Abdunklung bleibt hinter Ueberschrift und Lead kraeftig,
     laeuft dort aber auf .66 bis .78 statt .70 bis .84, gemessen bleibt der Text ueber AA. */
  .hero__bild { bottom: auto; height: min(760px, 94svh); }
  .hero__bild img { object-position: 50% 96%; }
  .hero--bild::before { bottom: auto; height: min(760px, 94svh);
    background: linear-gradient(180deg, rgba(26,29,31,.70) 0%, rgba(26,29,31,.66) 38%, rgba(26,29,31,.78) 72%, 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; } }