/* ==========================================================================
   PAGES — seitenspezifische Layouts & Sektionstypen
   Sektionstypen aus concept/CONTENT.md § 2; Rhythmus-Regeln DESIGN-SYSTEM § 6
   ========================================================================== */

/* ---- Quick-Answer (GEO-Block) ---- */
/* Quick-Answer (GEO): ohne Hintergrund/Border, zentriert (Kundenwunsch) */
.quick-answer { max-width: var(--container-text); margin-inline: auto; text-align: center; }
.quick-answer p { font-size: var(--fs-lead); line-height: 1.5; max-width: none; margin-inline: auto; text-wrap: pretty; }

/* ---- Bild-Text-Sektion mit Layering (Bild ragt über Sektionsgrenze) ---- */
.overlap-media { position: relative; }
@media (min-width: 900px) {
  .overlap-media .overlap-media__img {
    margin-bottom: calc(-1 * var(--sp-7));
    border-radius: var(--r-m);
    box-shadow: var(--shadow-2);
  }
  .overlap-media + .section { padding-top: calc(var(--sp-section) + var(--sp-7)); }
}

/* ---- Startseite: Wunschgarten-Matrix ---- */
.matrix { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .matrix { grid-template-columns: repeat(3, 1fr); } }
.matrix a {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 16 / 10; border-radius: 6px 24px 6px 24px; overflow: hidden;
  text-decoration: none;
}
.matrix img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.matrix a:hover img { transform: scale(1.04); }
.matrix a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(5deg, rgb(21 29 19 / .72), transparent 60%); }
.matrix span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5em; color: var(--c-weiss); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; padding: var(--sp-4); }
.matrix span .ico { width: 34px; height: 34px; flex-shrink: 0; filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgb(21 29 19 / .8)); }
.matrix a:hover span .ico { transform: scale(1.08); transition: transform var(--t-fast); }

/* ---- Zahlen-/Fakten-Zeile (nur belegte Zahlen!) ---- */
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }
.facts > div { min-width: 10rem; }
.facts .facts__num {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.25rem);
  font-variation-settings: 'opsz' 20;
  color: var(--c-brand-deep); line-height: .95; letter-spacing: -0.02em;
}
.section--dark .facts .facts__num { color: var(--c-brand); }
.facts .facts__label { font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: var(--sp-2); }
.section--dark .facts .facts__label { color: var(--c-stein-200); }

/* ---- Ratgeber / Artikel ---- */
.article-hero { border-radius: var(--r-m); overflow: hidden; margin-block: var(--sp-5); }
.prose .table-wrap { overflow-x: auto; }
.sources { font-size: var(--fs-small); color: var(--c-ink-soft); border-top: var(--border); padding-top: var(--sp-4); }
.sources ol { padding-left: 1.2em; display: grid; gap: 4px; }
.sources a { word-break: break-all; }

/* ---- Referenz-Detail ---- */
.projekt-kopf { display: grid; gap: var(--sp-4); max-width: var(--container-text); }
.projekt-daten { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); color: var(--c-ink-soft); }
.projekt-daten strong { color: var(--c-tanne-900); }
.projekt-nav { display: flex; justify-content: space-between; gap: var(--sp-4); border-top: var(--border); padding-top: var(--sp-5); }

/* ---- Kontakt ---- */
.kontakt-wege { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .kontakt-wege { grid-template-columns: repeat(3, 1fr); } }
.kontakt-weg { background: var(--c-weiss); border: var(--border); border-radius: var(--r-m); padding: var(--sp-5); }
.kontakt-weg .icon { width: 28px; height: 28px; color: var(--c-brand-deep); margin-bottom: var(--sp-3); }
.kontakt-weg .ico { width: 48px; height: 48px; margin-bottom: var(--sp-2); }
.kontakt-weg h2, .kontakt-weg h3 { font-family: var(--font-text); font-size: 1.1rem; font-weight: 600; }
.kontakt-weg .big { font-size: 1.4rem; font-weight: 700; color: var(--c-tanne-900); text-decoration: none; }

/* Zwei-Klick-Karte (Datenschutz) */
.map-consent { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--c-stein-200); }
.map-consent img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); }
.map-consent__overlay {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: rgb(21 29 19 / .55); color: var(--c-weiss); padding: var(--sp-5);
}
.map-consent__overlay p { font-size: var(--fs-small); max-width: 34rem; margin-bottom: var(--sp-4); }
.map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Einzugsgebiet ---- */
.orte-liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.orte-liste li {
  background: var(--c-stein-100); border: var(--border); border-radius: var(--r-s);
  padding: .35em .8em; font-size: var(--fs-small);
}
.orte-liste li a { text-decoration: none; }

/* ---- Karriere (Bestandsschutz-Look integriert) ---- */
.stellen-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .stellen-grid { grid-template-columns: repeat(3, 1fr); } }
.wa-btn { --btn-fill: #25d366; --btn-outline: #1eaf55; color: #fff; }

/* ---- Schwimmteich-Kontext (Wasser-Akzent) ---- */
.section--wasser .kicker { color: var(--c-wasser-deep); }
.section--wasser .quick-answer { border-left-color: var(--c-wasser); }

/* ---- Print (rudimentär sauber) ---- */
@media print {
  .topbar, .brandmark, .action-island, .offcanvas, .sticky-cta, .site-footer, .cta-block, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}