/* Noa Haustechnik – GEO-Bausteine (Phase 2). Ergänzt stil.css, nutzt dessen Tokens.
   Wird nur auf Seiten geladen, die GEO-Bausteine rendern (bau-noa.js: ctx.geoStil) – so bleiben stil.css und
   alle bestehenden Seiten unverändert. Mobile first, keine Fremdressourcen. */

/* ---------- Direktantwort-Box unter dem Hero ---------- */
.direktantwort { padding: 0 0 8px; }
@media (min-width: 900px) { .direktantwort { padding-bottom: 16px; } }
.direktantwort__box {
  max-width: 860px; background: var(--himmel); border-left: 5px solid var(--blau-dunkel);
  border-radius: var(--radius-karte); padding: 20px 20px 16px;
}
@media (min-width: 900px) { .direktantwort__box { padding: 28px 32px 22px; } }
.direktantwort__box h2 { font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem); margin-bottom: .45em; }
.direktantwort__box .ueberzeile { margin-bottom: 8px; }
.direktantwort__text { font-size: 1.1rem; line-height: 1.6; color: var(--tinte); margin: 0; }
@media (min-width: 900px) { .direktantwort__text { font-size: 1.18rem; } }
.stand-zeile { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .9rem; color: var(--gedaempft); }
.stand-zeile svg { width: 18px; height: 18px; flex: none; color: var(--blau-dunkel); }
.stand-band { padding: 0 0 8px; }

/* ---------- Ratgeber-Teil (abschnitte) ---------- */
.ratgeber { padding: var(--abstand) 0; background: var(--weiss); }
.ratgeber__abschnitt { padding: 0; }
.ratgeber__abschnitt + .ratgeber__abschnitt { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--linie); }
.ratgeber__abschnitt h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); margin-bottom: .55em; }
.ratgeber__text { min-width: 0; }
.ratgeber .prosa { max-width: none; }
.ratgeber .prosa ol { padding-left: 1.4em; margin: 0 0 1em; }
.ratgeber .prosa ol li { margin-bottom: .4em; }
.ratgeber__hinweis { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; background: var(--sand); border-radius: var(--radius); color: var(--text); font-size: .98rem; }
.ratgeber__hinweis svg { width: 22px; height: 22px; flex: none; color: var(--blau-dunkel); margin-top: 1px; }
.ratgeber__bild { margin-top: 18px; }
.ratgeber__bild picture { border-radius: var(--radius-karte); overflow: hidden; box-shadow: var(--schatten-karte); }
.ratgeber__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ratgeber__bild figcaption { font-size: .88rem; color: var(--gedaempft); margin-top: 8px; }
@media (min-width: 900px) {
  .ratgeber__abschnitt--bild { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
  .ratgeber__abschnitt--bild .ratgeber__bild { margin-top: 64px; }
}

/* ---------- Tabelle: seitlich rollbar im eigenen Kasten, nie Seitenüberlauf ---------- */
.tabelle-rollen {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  margin: 18px 0 6px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.tabelle-rollen:focus-visible { outline: 3px solid var(--blau-tief); outline-offset: 2px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.tabelle--breit { min-width: 600px; }
.tabelle--sehr-breit { min-width: 780px; }
.tabelle-unterschrift { margin: 0 0 4px; font-size: .86rem; color: var(--gedaempft); }
.tabelle th, .tabelle td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle thead th { background: var(--papier); font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); font-size: .92rem; white-space: nowrap; }
.tabelle tbody th { font-weight: 600; color: var(--tinte); }
.tabelle tbody tr:nth-child(even) { background: #fbfdfe; }
.tabelle-hinweis { margin: 0 0 4px; font-size: .82rem; color: var(--gedaempft); }
@media (min-width: 900px) { .tabelle-hinweis { display: none; } }

/* ---------- Gewerkegrenze ---------- */
.gewerke { background: var(--papier); }
.gewerke h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); }
.gewerke__raster { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 760px) { .gewerke__raster { grid-template-columns: 1fr 1fr; } }
.gewerke__spalte { background: #fff; border-radius: var(--radius-karte); padding: 22px; box-shadow: var(--schatten-karte); }
.gewerke__spalte h3 { font-size: 1.1rem; margin-bottom: 6px; }
.gewerke__liste { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.gewerke__liste li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.gewerke__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.gewerke__arbeit { color: var(--tinte); font-weight: 600; }
.gewerke__wer { color: var(--gedaempft); font-size: .95rem; }

/* ---------- Kacheln (Weiterlesen, Ratgeberliste, Hub) ---------- */
.kacheln { list-style: none; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 96px;
  padding: 18px 48px 18px 18px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-karte);
  text-decoration: none; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kachel:hover { border-color: var(--blau-dunkel); box-shadow: var(--schatten-karte); transform: translateY(-1px); color: var(--text); }
.kachel__art { font-family: var(--schrift-kopf); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--blau-tief); }
.kachel__titel { font-family: var(--schrift-kopf); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--tinte); overflow-wrap: break-word; hyphens: auto; }
.kachel__text { font-size: .93rem; color: var(--gedaempft); line-height: 1.45; }
.kachel__pfeil { position: absolute; right: 16px; top: 18px; color: var(--blau-dunkel); }
.kachel__pfeil svg { width: 20px; height: 20px; }
.kacheln__mehr { margin: 22px 0 0; }
.verwandt { background: var(--papier); }
.verwandt .abschnitt-kopf { margin-bottom: 20px; }
.verwandt h2, .ratgeberliste h2, .ortsliste h2 { font-size: clamp(1.6rem, 2vw + .6rem, 2.3rem); }
.ratgeberliste { background: var(--papier); }

/* ---------- Ortskacheln (Ortsliste, Hub #orte) ---------- */
.ortsliste { background: var(--weiss); }
.ortskacheln { list-style: none; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .ortskacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ortskacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ortskachel {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--tinte);
}
.ortskachel:hover { border-color: var(--blau-dunkel); background: var(--himmel); color: var(--tinte); }
.ortskachel svg { width: 22px; height: 22px; flex: none; color: var(--blau-dunkel); }
.ortskachel span { display: grid; line-height: 1.25; min-width: 0; }
.ortskachel strong { font-family: var(--schrift-kopf); font-weight: 600; font-size: 1.05rem; }
.ortskachel small { font-size: .86rem; color: var(--gedaempft); }

/* ---------- Quellen ---------- */
.quellen { background: var(--weiss); padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--linie); }
.quellen h2 { font-size: 1.35rem; margin-bottom: .4em; }
.quellen__text { font-size: .9rem; color: var(--gedaempft); margin-bottom: 14px; }
.quellen__liste { padding-left: 1.4em; display: grid; gap: 8px; font-size: .95rem; }
.quellen__liste a { overflow-wrap: anywhere; }
.quellen__stand { color: var(--gedaempft); font-size: .88rem; }

/* ---------- Ratgeber-Hub ---------- */
.seite--hub .seitenkopf { padding-top: 32px; padding-bottom: 8px; }
.hub__gruppe { padding-top: 40px; padding-bottom: 40px; }
.hub__gruppe + .hub__gruppe { border-top: 1px solid var(--linie); }
.hub__cluster + .hub__cluster { margin-top: 28px; }
.hub__cluster h3 { font-size: 1.15rem; margin-bottom: 12px; }
.hub__orte { background: var(--papier); }
.hub__orte-gruppe + .hub__orte-gruppe { margin-top: 24px; }
.hub__orte-gruppe h3 { font-size: 1.15rem; margin-bottom: 12px; }

/* Startseite: Ortskachel mit mehreren Leistungen (Links im Untertitel) */
.ortskachel--mehrfach { cursor: default; }
.ortskachel--mehrfach small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ortskachel--mehrfach small a:hover, .ortskachel--mehrfach small a:focus-visible { color: var(--akzent-dunkel, #b85e10); }
.startgeo .ortskacheln { margin-top: 12px; }
.startgeo .kacheln__mehr { margin-bottom: 64px; }