/* =============================================================
   ASB Wohnpark Lausitzer Seenland — pages.css
   Seitenspezifische Layouts: Hero, Intro, Bereich-Karten, CTA-Band,
   Breadcrumb + Unterseiten-Template (Content/Aside-Split).
   ============================================================= */

/* -------------------------------------------------------------
   HERO (Startseite)
   Ruhig, großzügig. Bild + Textfläche. KEIN gelb-flächiger Print-Look.
------------------------------------------------------------- */
.hero {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: var(--space-6);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr .95fr; gap: var(--space-6); }
}
.hero-content { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-content .claim { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.hero-content h1 { margin: 0; }
.hero-content .hero-lead {
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  max-width: 60ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

.hero-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--asb-anthracite-10);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------
   ABSCHNITTS-KOPF (zentrierte Intro-Zeile über Sektionen)
------------------------------------------------------------- */
.section-head {
  max-width: 60ch;
  margin-bottom: var(--space-4);
}
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); margin-top: var(--space-2); }
.section-head.is-center p { margin-inline: auto; }

/* Kicker-Label über Headlines — mit vorangestelltem CD-Punktlinien-Akzent. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asb-red);
  margin-bottom: var(--space-2);
}
.kicker::before {
  content: "";
  width: 1.75rem;
  border-top: 3px dotted var(--asb-red);
  opacity: .85;
}

/* -------------------------------------------------------------
   ÜBER-UNS / FAKTEN
------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
}
.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--asb-anthracite-10);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* Faktenliste mit Häkchen/Punkt — rote Bullets bei längeren Listen (CD). */
.fact-list { list-style: none; display: grid; gap: var(--space-2); }
.fact-list li {
  position: relative;
  padding-left: 1.75rem;
  max-width: var(--maxw-text);
}
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--asb-red);
}

/* Kennzahlen-Reihe */
.stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.stat {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.stat .stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  color: var(--asb-anthracite);
  line-height: 1;
}
.stat .stat-label { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-1); }

/* -------------------------------------------------------------
   CTA-BAND (dunkle Anthrazit-Fläche, weißer Text — hoher Kontrast)
------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-items: center;
}
/* Sanfter gelber Marken-Schimmer in der dunklen Fläche → Tiefe statt „schwarzer Kasten". */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(36rem 18rem at 112% -40%, rgba(255, 238, 0, .16), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 1; }
@media (min-width: 800px) {
  .cta-band { grid-template-columns: 1fr auto; gap: var(--space-5); }
}
.cta-band h2 { color: var(--on-dark); margin: 0; }
.cta-band p { color: rgba(255,255,255,.85); margin: var(--space-2) 0 0; max-width: 55ch; }
.cta-band .hero-actions { margin: 0; }

/* -------------------------------------------------------------
   BREADCRUMB (Unterseiten)
------------------------------------------------------------- */
.breadcrumb { padding-block: var(--space-3) 0; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; }
.breadcrumb li + li::before { content: "›"; color: var(--asb-anthracite-60); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 700; }

/* -------------------------------------------------------------
   UNTERSEITEN-HERO (kompakter als Startseite)
------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-4) var(--space-5);
}
.page-hero .claim,
.page-hero .lead {
  color: var(--text-muted);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  font-family: var(--font-body);
  font-weight: 400;
  max-width: 60ch;
  margin-top: var(--space-2);
}

/* -------------------------------------------------------------
   UNTERSEITEN-TEMPLATE: Inhalt + Aside (Kontakt/Quicklinks)
   Diese Struktur wird für alle weiteren Unterseiten kopiert.
------------------------------------------------------------- */
.page-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); }
}

/* „Sticky" Aside am Desktop */
.page-aside { display: grid; gap: var(--space-3); }
@media (min-width: 960px) {
  .page-aside { position: sticky; top: 96px; }
}

/* Info-/Kontaktbox im Aside */
.info-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.info-box h2, .info-box h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.info-box ul { list-style: none; display: grid; gap: var(--space-2); }
.info-box .info-row { display: grid; gap: .15rem; }
.info-box .info-label { font-size: var(--fs-small); color: var(--text-muted); }
.info-box a { color: var(--text); text-decoration-color: var(--asb-red); }

/* Bildband / Galerie auf Unterseiten */
.media-band {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--asb-anthracite-10);
  box-shadow: var(--shadow);
}
.media-band img { width: 100%; height: 100%; object-fit: cover; }

/* Aufzählung mit Leistungs-Häkchen */
.check-list { list-style: none; display: grid; gap: var(--space-2); }
.check-list li { position: relative; padding-left: 2rem; max-width: var(--maxw-text); }
.check-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-head); font-weight: 700;
  color: var(--asb-red);
}

/* Zitat / Testimonial (Noto Serif, CD: Zitate in Serif) */
.quote {
  border-left: 4px solid var(--asb-yellow);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  font-style: italic;
}
.quote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--text-muted);
}