/* ============================================================
   f-ce · Anfrageformular (PV Hallendach, Zustandsanalyse) — dieselben Regeln wie im
   Wanddurchbruch-Artikel (dort inline). Wörtlich übernommen am 19.09.2026; Änderungen an beiden Orten nachziehen.
   Braucht die Farb-Variablen der Seite (--ink, --accent, --line …).
   ============================================================ */
.offerte{position:relative;border:1px solid var(--ink);background:#fff;padding:1.3rem 1.5rem 1.5rem;scroll-margin-top:6rem}
.o-ergebnis{scroll-margin-top:6.5rem}
.offerte::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent)}
.o-kopf{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.o-kopf[hidden]{display:none}
.o-kopf #o-schritt{color:var(--accent2)}
.o-balken{flex:1;height:2px;background:var(--line);min-width:3rem}
.o-balken span{display:block;height:100%;width:25%;background:var(--accent);transition:width .35s}
.o-etappen{display:flex;gap:.9rem}
.o-etappen b{font-weight:400;color:var(--mute2)}
.o-etappen b.on{color:var(--ink)}
.o-etappen b.done{color:var(--accent2)}
.o-seite{border:0;margin:0;padding:0;min-width:0}
.o-seite[hidden]{display:none}
.o-seite legend{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.25;margin-bottom:.35rem;padding:0}
.artikel p.o-hilf{font-size:.95rem;line-height:1.55;color:var(--mute);margin:0 0 1.2rem}
.frage{margin:0 0 1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.frage:first-of-type{border-top:0;padding-top:0}
.artikel .frage p.fl{font-size:1.05rem;font-weight:500;color:var(--ink);line-height:1.35;margin:0 0 .3rem;letter-spacing:-.01em}
.artikel .frage p.fh{font-size:.88rem;line-height:1.5;color:var(--mute);margin:0 0 .75rem}
.artikel .frage p.fl+.o-wahl,.artikel .frage p.fl+.plz{margin-top:.6rem}
.plz{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1rem}
.plz input{width:7.5rem;padding:.7rem .85rem;border:1px solid var(--line2);background:#fff;color:var(--ink);font:inherit;font-size:1.1rem;letter-spacing:.08em;border-radius:0;-webkit-appearance:none;appearance:none}
.plz input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--soft)}
.artikel .plz p.note{margin:0;font-size:.9rem;color:var(--mute);line-height:1.4;flex:1;min-width:12rem}
.plz .note b{font-weight:500;color:var(--ink)}
.o-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.6rem}
.o-wahl.kompakt{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}
.o-wahl label{position:relative;display:block;border:1px solid var(--line2);padding:.85rem 1rem .8rem;cursor:pointer;transition:border-color .2s,background .2s;background:#fff}
.o-wahl label:hover{border-color:var(--accent2)}
.o-wahl label.on{border-color:var(--ink);background:var(--soft);box-shadow:inset 0 0 0 1px var(--ink)}
.o-wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.o-wahl label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.o-wahl .ot{display:block;font-size:1rem;font-weight:500;color:var(--ink);line-height:1.3}
.o-wahl .os{display:block;font-size:.83rem;color:var(--mute);line-height:1.4;margin-top:.2rem}
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}
.kontakt .feld{display:block}
.kontakt .feld>span:first-child,.kontakt .feld>label:first-child{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.3rem}
.kontakt input{width:100%;padding:.7rem .85rem;border:1px solid var(--line2);background:#fff;color:var(--ink);font:inherit;font-size:1rem;border-radius:0;-webkit-appearance:none;appearance:none}
.kontakt input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--soft)}
.kontakt .ort-zeile{display:flex;gap:.6rem}
.kontakt .ort-zeile .plz-kurz{flex:none;width:5.5rem;letter-spacing:.06em}
/* Fehlende Pflichtangabe: Rand rot und innen einen zweiten Pixel — so ist der Rahmen auf jedem Bildschirm rundum sichtbar, auch bei 125 % Skalierung */
.kontakt input.fehlt,.kontakt .feld.gross input.fehlt{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
/* Adress-Vorschläge (amtliche Suche von swisstopo, wie auf Structly) */
.kontakt .adr{position:relative}
.adr-liste{position:absolute;left:0;right:0;top:100%;z-index:5;margin:0;padding:0;list-style:none;background:#fff;border:1px solid var(--ink);border-top:0;box-shadow:0 10px 24px rgba(14,34,48,.14);max-height:14rem;overflow:auto}
.adr-liste[hidden]{display:none}
.adr-liste li{padding:.6rem .85rem;font-size:.95rem;line-height:1.35;color:var(--ink2);cursor:pointer;border-top:1px solid var(--line)}
.adr-liste li:first-child{border-top:0}
.adr-liste li.on,.adr-liste li:hover{background:var(--soft);color:var(--ink)}
.artikel p.adr-hinweis{margin:.6rem 0 0;font-size:.83rem;line-height:1.5;color:var(--mute)}
.artikel p.o-ds{margin:1rem 0 0;font-size:.83rem;line-height:1.5;color:var(--mute)}
.artikel p.o-fehler{margin:.9rem 0 0;font-size:.88rem;color:var(--red);line-height:1.4}
.artikel p.o-fehler[hidden]{display:none}
.o-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.o-zurueck{background:none;border:0;color:var(--mute);cursor:pointer;font-size:.9rem;padding:.5rem 0}
.o-zurueck:hover{color:var(--ink)}
.o-zurueck[disabled]{visibility:hidden}
.btn{flex:none;display:inline-block;padding:.65rem 1.1rem;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;border-radius:0;transition:background .25s,border-color .25s}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.gross{display:block;text-align:center;padding:.95rem 1.2rem;font-size:1.02rem}
/* Ergebnis */
.o-ergebnis[hidden]{display:none}
.o-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent2);margin-bottom:.6rem}
.artikel p.o-mail{font-size:.9rem;line-height:1.5;color:var(--mute);margin:0 0 1rem}
.artikel p.o-mail b{color:var(--ink);font-weight:500}
.o-cta{margin-top:1.4rem;padding:1.2rem 1.3rem 1.1rem;background:var(--surface);border:1px solid var(--line)}
.artikel p.o-cta-note{font-size:.86rem;line-height:1.55;color:var(--mute);margin:.75rem 0 0;text-align:center}
.artikel p.o-nicht{margin:.7rem 0 0;font-size:.85rem;line-height:1.5;color:var(--mute)}
.artikel p.o-aus{font-size:1rem;line-height:1.65;color:var(--ink2);margin:0}
.o-neu{margin-top:1rem;background:none;border:0;padding:0;color:var(--mute);font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.artikel p.danke-titel{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.2;margin:0 0 .6rem}
.danke-liste{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--line)}
.danke-liste[hidden]{display:none}
.danke-liste li{position:relative;padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid var(--line);font-size:.97rem;line-height:1.55;color:var(--ink2)}
.danke-liste li::before{content:'';position:absolute;left:0;top:1.35rem;width:.6rem;height:1px;background:var(--accent)}
.o-neu:hover{color:var(--ink)}
@media(max-width:560px){.offerte{padding:1.1rem 1.1rem 1.3rem}.o-etappen{display:none}.o-nav .btn{padding:.65rem .8rem;font-size:.85rem}.o-wahl{grid-template-columns:1fr}.o-wahl.kompakt{grid-template-columns:1fr 1fr}.kontakt{grid-template-columns:1fr}}
.o-check{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:start;margin-top:.8rem;padding:.75rem .9rem;border:1px solid var(--line2);cursor:pointer;background:#fff}
.o-check input{width:1.1rem;height:1.1rem;margin:.15rem 0 0;accent-color:var(--accent2)}
.o-check>span{font-size:1rem;font-weight:500;color:var(--ink);line-height:1.3}
.o-check small{grid-column:2;font-size:.83rem;color:var(--mute);line-height:1.4}
.o-check.on{border-color:var(--ink);background:var(--soft);box-shadow:inset 0 0 0 1px var(--ink)}
/* Kontakt: Vor- und Nachname gross */
.kontakt .feld.gross input{font-size:1.05rem;padding:.8rem .9rem;border-color:var(--ink)}
.kontakt .feld.gross input.fehlt{border-color:var(--red)}

.o-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontakt .feld.frei>span:first-child::after{content:" · freiwillig";letter-spacing:.08em;color:var(--mute2)}