/* Fassadenrechner · Gestaltung (ruhig, klar, in der Farbe des Betriebs)
   Je Abschnitt ein Blickfang, eine Aussage, höchstens eine Hauptaktion. Alle Textfarben gerechnet (WCAG AA).
   Die Farbe des Betriebs kommt aus betrieb.css (--marke, --marke-dunkel, --marke-text). */

/* Archivo verkleinert (werkzeug/schrift-teilmenge.mjs): 222 Zeichen, Strichstärke variabel, Breite fest 100 %, 30 KB statt 88 KB */
@font-face { font-family: 'Archivo'; src: url('schrift/archivo.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* S66: Beschriftungen der Zeichnung (Maße, Maßstab). Roboto Mono, latin-Ausschnitt unverändert von Google Fonts, OFL 1.1; lädt nur,
   wenn eine Zeichnung Text zeigt. Vorher stand hier keine Schrift, angefordert wurde „Fragment Mono“ → Systemschrift. */
@font-face { font-family: 'Roboto Mono'; src: url('schrift/roboto-mono.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Zusatzteil für Namen wie Doğan, Łukasz, Kovačević (Mittel- und Osteuropa, Türkei). Lädt nur, wenn ein solches Zeichen
   auf der Seite steht; Bereich wie EXT_BEREICH in werkzeug/schrift-teilmenge.mjs (S65). */
@font-face { font-family: 'Archivo'; src: url('schrift/archivo-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0218-021B, U+1E9E; }
/* Ersatzschrift mit Archivos Maßen (im Browser gemessen: Breite 98,7 % von Arial, Oberlänge 88 %, Unterlänge 21 %).
   So springt beim Eintreffen der Schrift kaum etwas (bei langsamem Netz vorher CLS 0,103). */
@font-face { font-family: 'Archivo Ersatz'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 98.7%; ascent-override: 89%; descent-override: 21%; line-gap-override: 0%; }

:root {
  --tinte: #17181A; --tinte-2: #44443F; --grau: #5F5E58;
  --grund: #F6F4EF; --papier: #FFFFFF; --linie: #DED8CC; --linie-2: #B8B0A2; --hinweis: #8A3A12;
  --marke: #1F4E79; --marke-dunkel: #163A5B; --marke-text: #FFFFFF;
  --rund: 10px;
  --f: 'Archivo', 'Archivo Ersatz', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Erzwungener Dunkelmodus (Chrome „Websites abdunkeln“, Samsung Internet) soll Farben und Zeichnung nicht verfälschen.
     Nur „only light“ verhindert das; „light“ allein färbte trotzdem um (gemessen S65: Schraffur und Maßstab verschwanden). */
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 16.5px/1.55 var(--f); color: var(--tinte); background: var(--grund); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.nb { white-space: nowrap; } /* Telefonnummern: kein Umbruch nach „-“ (telHtml in kern/rechtstexte.mjs) */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; border-radius: 4px; }
/* Überschriften bekommen den Fokus nur per Skript (für Screenreader), sie sind nicht bedienbar: kein Rahmen */
h2[tabindex="-1"]:focus-visible { outline: none; }

/* ---------------------------------------------------------------- Rahmen */
.seite { max-width: 780px; margin: 0 auto; padding: 0 16px 40px; }
/* S66: Domatos-Logo im Kopf der eigenen Seiten (Hinweise, Startseite, 404); Buchstaben currentColor = Schiefer, Λ Ocker */
/* Eigene Seiten (Hinweise, Startseite, 404) in den Farben des Logos statt der Vorgabefarbe für Betriebe */
.anbieter { --marke: #122229; --marke-dunkel: #0b161b; --marke-text: #FFFFFF; }
.anbieter-kopf { padding: 22px 0 14px; }
.anbieter-kopf a { display: inline-flex; align-items: center; min-height: 44px; color: #122229; }
.anbieter-kopf .logo { display: block; height: 24px; width: auto; }
/* S66: eigene Seiten (Hinweise, Impressum, Datenschutz): Luft zwischen Absätzen und vor Überschriften (vorher klebte alles) */
main.karte > .h2 { margin-top: 30px; }
main.karte > .h2 + * { margin-top: 8px; }
main.karte ul.lead > li + li { margin-top: 8px; }
main.karte > p + p, main.karte > p + ul, main.karte > ul + p { margin-top: 10px; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 0; }
/* overflow-wrap: anywhere: Ein langes Einzelwort im Namen („Lackierermeisterbetrieb“) lief bei 320 px über „Fassadenrechner“
   (gemessen 06.10.2026 in Chromium, Firefox und WebKit). Es wird nur getrennt, wenn es allein nicht in die Zeile passt. */
.kopf-marke { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; font-weight: 700; font-size: 18px; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
/* Feste Höhe: SVG-Logos ohne eigene Größe schrumpfen in Flex-Zeilen sonst auf 0 (gemessen) */
.kopf-marke img { display: block; flex: none; height: 40px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.kopf-zusatz { flex: none; font-size: 14px; color: var(--grau); }
.beispiel-band { margin: 0 0 14px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; color: var(--hinweis); background: #FFF6EE; border: 1px solid #F0CDB4; border-radius: var(--rund); }

.karte { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rund); padding: clamp(18px, 4vw, 30px); box-shadow: 0 1px 2px rgba(23, 24, 26, .04), 0 16px 36px -24px rgba(23, 24, 26, .24); }
/* S66: Startkarte mit Farbakzent des Betriebs und Hauszeichnung; am Handy die
   Zeichnung über der Frage, ab 640 px rechts daneben. Ein Blickfang, eine Frage, eine Handlung. */
.karte--start { display: flex; flex-direction: column; border-top: 4px solid var(--marke); }
.start-bild { order: -1; align-self: center; width: min(190px, 58%); height: auto; margin: -4px 0 12px; color: var(--marke); }
.schritte { display: grid; gap: 10px 18px; margin-top: 8px; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--linie); font-size: 14.5px; line-height: 1.35; color: var(--tinte-2); }
.schritte li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.schritte li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.schritt-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--marke-text); background: var(--marke); }
@media (min-width: 560px) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) {
  .karte--start { display: grid; grid-template-columns: minmax(0, 1fr) 210px; column-gap: 28px; }
  .karte--start > .start-bild { order: 0; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 210px; margin: 0; }
  .karte--start > .h1, .karte--start > .lead { grid-column: 1; }
  .karte--start > .suche, .karte--start > .schritte { grid-column: 1 / -1; }
}
/* Windows-Kontrastmodus: Zeichnung ist Schmuck und folgt dort nicht den Systemfarben → ausblenden */
@media (forced-colors: active) { .start-bild { display: none; } }
.karte + .karte { margin-top: 16px; }

/* ---------------------------------------------------------------- Suche */
.h1 { font-size: clamp(26px, 5.4vw, 36px); line-height: 1.12; font-weight: 750; letter-spacing: -.015em; text-wrap: balance; }
.lead { margin-top: 10px; font-size: 17px; color: var(--tinte-2); max-width: 52ch; }
.suche { position: relative; margin-top: 22px; }
.suche-l { display: block; margin-bottom: 8px; font-weight: 650; font-size: 15.5px; }
.suche-zeile { display: flex; gap: 8px; }
.suche-feld { position: relative; flex: 1; min-width: 0; }
.suche-feld input { width: 100%; min-height: 54px; padding: 12px 14px 12px 44px; font-size: 17px; background: #fff; border: 1.5px solid var(--linie-2); border-radius: 8px; }
/* S66: Ortsnadel im Feld (Schmuck; Platz links im Feld reserviert) */
.suche-pin { position: absolute; left: 14px; top: 27px; width: 20px; height: 20px; margin-top: -10px; color: var(--grau); pointer-events: none; }
/* Pfeil im selben <span> wie die Beschriftung (Knöpfe: Beschriftung als ein Stück, Test S64) */
.knopf-pfeil { display: inline-block; width: 18px; height: 18px; margin-left: 9px; vertical-align: -3px; }
.suche-feld input:focus-visible { outline: 3px solid var(--marke); outline-offset: 1px; border-color: var(--marke); border-radius: 8px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; font-weight: 650; font-size: 16.5px; line-height: 1.15; color: var(--marke-text); background: var(--marke); border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.knopf:hover { background: var(--marke-dunkel); }
.knopf--zweit { color: var(--tinte); background: #fff; border: 1.5px solid var(--linie-2); }
.knopf--zweit:hover { background: var(--grund); border-color: var(--tinte); }
.knopf--klein { min-height: 44px; padding: 0 14px; font-size: 15px; }
/* Rahmen der Vorschläge mit Kopfzeile für wichtige Hinweise („Meinten Sie …?“, Ort unbekannt, mehrere Orte; S66).
   Die Kopfzeile liegt über der Liste, nur die Liste scrollt. */
.liste-rahmen { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 18px 40px -18px rgba(23, 24, 26, .35); overflow: hidden; }
.liste-kopf { padding: 10px 18px 9px; font-size: 14px; line-height: 1.4; color: var(--tinte-2); background: var(--grund); border-bottom: 1px solid var(--linie); }
.liste { max-height: min(60vh, 400px); overflow-y: auto; padding: 6px; }
.liste li { display: flex; align-items: center; min-height: 46px; padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.liste li:hover, .liste li[aria-selected="true"] { background: var(--grund); box-shadow: inset 3px 0 0 var(--marke); }
/* Getippter Teil fett, Ort zurückhaltend (S66); lange Namen brechen um statt über den Rand zu laufen */
.liste li > span { min-width: 0; overflow-wrap: anywhere; }
.liste b { font-weight: 680; }
.liste .v-ort { color: var(--grau); }
.suche-status { min-height: 1.5em; margin-top: 8px; font-size: 14.5px; color: var(--grau); }
/* Offene Liste: Der Hinweis darunter wird nur noch vorgelesen. Sonst schaute sein Ende rechts neben der Liste hervor
   („… auswählen.“, gesehen S66). Platz bleibt reserviert, damit beim Öffnen und Schließen nichts springt. */
.suche-status.unter-liste { clip-path: inset(50%); }

/* ---------------------------------------------------------------- Ergebnis */
.ergebnis-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.h2 { font-size: clamp(21px, 4.2vw, 26px); line-height: 1.2; font-weight: 720; letter-spacing: -.01em; }
.ergebnis-quelle { font-size: 13.5px; color: var(--grau); }
.buehne { position: relative; height: 300px; margin-top: 12px; border-radius: 8px; background: radial-gradient(60% 60% at 55% 58%, rgba(242, 168, 76, .16), rgba(242, 168, 76, 0) 70%), var(--grund); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.buehne:active { cursor: grabbing; }
/* Windows-Kontrastmodus: Die Zeichnung behält ihre hellen Farben. Sonst wurde ihr Hintergrund schwarz, und Maßstab und
   Nachbarumrisse (dunkel gezeichnet) waren kaum zu sehen (gemessen S65). Text und Knöpfe außerhalb folgen dem System. */
@media (forced-colors: active) { .buehne { forced-color-adjust: none; } }
.buehne > svg { width: 100%; height: 100%; }
/* Luftbild (S66): Zeichenfläche über der ganzen Bühne; Bild per Canvas, weil die Sicherheitsregeln nur Bilder vom eigenen
   Server erlauben (img-src 'self', keine data:-Adressen) */
.buehne > canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
.buehne-knoepfe[hidden] { display: none; }
.luftbild-quelle { margin-top: 6px; font-size: 13px; color: var(--grau); }
.buehne-hilfe .knopf:disabled { opacity: .45; cursor: default; }
.buehne-knoepfe { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
/* Zoom (S66): unten rechts, wie bei Karten; links unten steht die Maßstabsleiste */
.buehne-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.rund:disabled { opacity: .4; cursor: default; }
.rund:disabled:hover { border-color: var(--linie-2); }
.rund[hidden] { display: none; }
.rund { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--tinte); background: rgba(255, 255, 255, .92); border: 1px solid var(--linie-2); border-radius: 50%; cursor: pointer; }
.rund:hover { border-color: var(--tinte); }
.rund svg { width: 22px; height: 22px; }
.buehne-hilfe { margin-top: 8px; font-size: 13.5px; color: var(--grau); }
/* S66: Hinweis links, Knöpfe als Gruppe daneben; am Handy der Hinweis über den Knöpfen (vorher brach „Luftbild zeigen“
   allein in eine neue Zeile, der Hinweis riss mitten durch) */
.buehne-hilfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.buehne-hilfe > #hilfe-text { flex: 1 1 18rem; min-width: 0; }
.werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
/* S66: Werte als ruhige Kacheln */
.wert { padding: 12px 12px 11px; background: var(--grund); border-radius: 8px; }
.wert { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.wert dt { font-size: 14px; color: var(--grau); line-height: 1.35; }
.wert dd { font-size: clamp(22px, 4.6vw, 28px); font-weight: 720; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.wert small { display: block; font-size: 13px; font-weight: 400; color: var(--grau); letter-spacing: 0; white-space: normal; }
/* Kartenlinks (S66): öffnen die Adresse bei Google bzw. Apple erst beim Antippen */
.karten-links { margin-top: 14px; font-size: 14.5px; color: var(--grau); }
.karten-links a { color: var(--tinte); text-underline-offset: 3px; }
.nachbar { margin-top: 12px; font-size: 14.5px; color: var(--tinte-2); }
.mehrere { margin-top: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.5; color: var(--hinweis); background: #FFF6EE; border: 1px solid #F0CDB4; border-radius: 8px; }
.preis-block { margin-top: 20px; padding: 18px 18px 18px 22px; border-radius: 8px; background: var(--grund); box-shadow: inset 4px 0 0 var(--marke); }
/* S66: Weg zur Anfrage direkt am Richtpreis (am Handy liegt das Formular sonst weit unten) */
.preis-knopf { margin-top: 14px; width: 100%; }
@media (min-width: 640px) { .preis-knopf { width: auto; } }
.preis-l { font-size: 14.5px; font-weight: 650; color: var(--tinte-2); }
.preis { margin-top: 4px; font-size: clamp(30px, 7vw, 42px); font-weight: 780; line-height: 1.05; letter-spacing: -.02em; }
.preis-zusatz { margin-top: 4px; font-size: 14.5px; color: var(--tinte-2); }
.preis-hinweis { margin-top: 10px; font-size: 14.5px; color: var(--grau); }
.rechenweg { margin-top: 14px; font-size: 15px; }
.rechenweg summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: var(--marke); text-underline-offset: .25em; }
.rechenweg ul { display: grid; gap: 6px; margin-top: 6px; padding-left: 18px; list-style: disc; color: var(--tinte-2); }

/* ---------------------------------------------------------------- Anfrage */
.anfrage-text { margin-top: 8px; color: var(--tinte-2); max-width: 56ch; }
.felder { display: grid; gap: 14px; margin-top: 18px; }
.feld label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.feld .opt { font-weight: 400; color: var(--grau); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 11px 12px; font-size: 16.5px; background: #fff; border: 1.5px solid var(--linie-2); border-radius: 8px; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--marke); outline-offset: 1px; border-color: var(--marke); }
.wege { display: grid; gap: 10px; margin-top: 20px; }
.kopie-status { min-height: 1.4em; font-size: 14.5px; color: var(--tinte-2); }
.datenschutz-satz { margin-top: 14px; font-size: 14px; color: var(--grau); }

/* ---------------------------------------------------------------- Fuß */
.fuss { margin-top: 22px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--grau); }
.fuss a { color: var(--tinte-2); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* ---------------------------------------------------------------- Größere Bildschirme */
@media (min-width: 640px) {
  .buehne { height: 380px; }
  /* S66: vierte Kachel (Dachform, Text) etwas breiter; Zahlen ab 640 px etwas kleiner, damit auch „1.234 m²“ in die Kachel passt */
  .werte { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .wert dd { font-size: clamp(22px, 3.6vw, 28px); }
  .felder { grid-template-columns: 1fr 1fr; }
  .feld--breit { grid-column: 1 / -1; }
  .wege { grid-template-columns: 1fr 1fr; }
  .wege .knopf:first-child { grid-column: 1 / -1; }
}
/* S66: Unter 360 px die Kacheln untereinander (sonst brach „Satteldach“ in der schmalen Kachel um) */
@media (max-width: 359px) { .werte { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .suche-zeile { flex-direction: column; }
  .suche-zeile .knopf { width: 100%; }
  .nur-breit { display: none; }
}

/* Eingebettet auf der Website des Betriebs: ohne eigenen Kopf, ohne Außenrand */
.eingebettet body { background: transparent; }
.eingebettet .kopf { display: none; }
.eingebettet .seite { padding: 0 2px 8px; max-width: none; }
.eingebettet .liste { max-height: 400px; } /* im Rahmen ist vh die Rahmenhöhe, die selbst von der Liste abhängt */

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Druck: Haus, Werte und Richtpreis auf einem Blatt, ohne Bedienelemente */
@media print {
  body { background: #fff; }
  .seite { max-width: none; padding: 0; }
  .karte { border: 0; padding: 0; }
  .suche, .lead, .beispiel-band, .buehne-knoepfe, .buehne-zoom, .buehne-hilfe, #anfrage, .kopf-zusatz, .start-bild, .schritte, .preis-knopf { display: none !important; }
  .karte, .karte--start { box-shadow: none; border-top: 0; }
  .buehne { height: 320px; background: #fff; }
  .preis-block { background: #fff; border: 1px solid #999; }
  .rechenweg:not([open]) { display: none; }
  .rechenweg summary { text-decoration: none; }
  .karte + .karte { margin-top: 8px; }
}