/* =============================================================
   pages.css — seitenspezifische Anpassungen
   ============================================================= */

/* ---- Einfache Sprache ---- */
.simple-content {
  max-width: 620px;
  margin-inline: auto;
}
.simple-content p,
.simple-content li {
  font-size: var(--fs-500);
  line-height: var(--lh-relaxed);
}
.simple-content > * + * { margin-top: var(--space-24); }
.simple-content h2 { margin-top: var(--space-48); }
.simple-block {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}
.simple-block .icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-arch);
  color: var(--color-primary);
}
.simple-block .icon-wrap .icon { width: 30px; height: 30px; }

/* ---- Artikel (Aktuelles) ---- */
.article-header { margin-bottom: var(--space-32); }
.article-header .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  font-size: var(--fs-300);
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}
.article-figure {
  border-radius: var(--radius-arch);
  overflow: hidden;
  margin-bottom: var(--space-32);
  aspect-ratio: 16 / 9;
  background-color: var(--color-primary-tint);
}
.article-figure img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: var(--container-text); }
.article-body > * + * { margin-top: var(--space-24); }
.article-body h2 { margin-top: var(--space-48); }
.article-body h3 { margin-top: var(--space-32); }
.article-body ul, .article-body ol { padding-inline-start: var(--space-24); }
.article-body li + li { margin-top: var(--space-8); }
.article-body blockquote {
  border-inline-start: 4px solid var(--color-accent);
  padding-inline-start: var(--space-24);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--color-text);
}

/* ---- 404 ---- */
.error-page {
  text-align: center;
  padding-block: var(--space-96);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: 1;
  color: var(--color-primary-tint-2);
  font-weight: var(--fw-semibold);
}

/* ---- Kontakt: Standort-Karten ---- */
.location-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.location-card__body { padding: var(--space-24); }
.location-card h3 { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: var(--fw-bold); }
.location-card address {
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: var(--space-8);
}
.location-card .transit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-16);
  font-size: var(--fs-300);
  color: var(--color-text-muted);
}
.location-card .transit .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }

/* ---- Kontaktdaten-Block ---- */
.contact-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-16); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--space-16); }
.contact-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}
.contact-list__icon .icon { width: 22px; height: 22px; }
.contact-list a { font-weight: var(--fw-semibold); text-decoration: none; }
.contact-list span.lbl { display: block; font-size: var(--fs-300); color: var(--color-text-muted); }

/* ---- Ansprechpartner-Karte ---- */
.person-card {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24);
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-lg);
}
.person-card__photo {
  width: 80px; height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-arch);
  overflow: hidden;
  background-color: var(--color-primary-tint-2);
}
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.person-card strong { display: block; font-size: var(--fs-500); }
.person-card .role { color: var(--color-text-muted); font-size: var(--fs-300); }

/* ---- Newsletter-Sektion ---- */
.newsletter-box {
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.newsletter-box .form { max-width: 480px; }
.newsletter-inline {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.newsletter-inline .field { flex: 1 1 220px; margin-bottom: 0; }

/* ---- Mobiler Sticky-CTA-Balken (Angebotsseiten) ---- */
.mobile-cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(6,48,46,.08);
}
.mobile-cta-bar .btn { flex: 1; min-height: 48px; }
@media (min-width: 768px) { .mobile-cta-bar { display: none; } }
/* WhatsApp-Button anheben, wenn Mobil-CTA-Bar aktiv */
body.has-mobile-cta .wa-float { bottom: calc(64px + var(--space-16)); }
@media (min-width: 768px) { body.has-mobile-cta .wa-float { bottom: var(--space-24); } }

/* ---- Hervorgehobener Info-Streifen ---- */
.info-strip {
  background-color: var(--color-accent-tint);
  padding-block: var(--space-16);
  text-align: center;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-strong);
}
.info-strip .icon { width: 20px; height: 20px; vertical-align: -4px; margin-inline-end: var(--space-8); }

/* ---- Tabellarische Definition (Gesellschaft etc.) ---- */
.def-table { width: 100%; border-collapse: collapse; }
.def-table th,
.def-table td {
  padding: var(--space-12) var(--space-16);
  text-align: start;
  border-bottom: 1px solid var(--color-border);
}
.def-table th { width: 40%; color: var(--color-text-muted); font-weight: var(--fw-semibold); }