/*
 * ESD Empfang 2026 – Komponenten-Styles (Option C)
 * Ergänzt theme.json: Hover-Effekte, Karten, Beige-Highlights, Warum-Box,
 * Prinzip-Kacheln, Stat-Icons, Footer. CI: Orange #FFA037, Beige #F9F7F5.
 */

:root {
  --esd-orange: #FFA037;
  --esd-dark: #1a1a1a;
  --esd-text: #333333;
  --esd-text-secondary: #666666;
  --esd-text-muted: #999999;
  --esd-beige: #F9F7F5;
  --esd-why: #FFF9F5;
  --esd-border: #e8e5dd;
}

/* ---------- Überschriften mittig (ESD-Wunsch) ---------- */
.wp-block-heading { text-align: center; }

/* Sanftes Scrollen zu Anker-Abschnitten + Abstand zum Sticky-Header */
html { scroll-behavior: smooth; }
.wp-block-heading[id] { scroll-margin-top: 110px; }
/* Sprungziel-Abstand für ALLE Anker (auch Standort-Karten u. a.) */
[id] { scroll-margin-top: 120px; }
:target { scroll-margin-top: 120px; }

/* ---------- Grundrhythmus ---------- */
.esd-intro {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--esd-text-secondary);
  max-width: 800px;
}

/* Lesbarkeit: Fließtext bekommt eine ruhige Zeilenlänge, Karten/Grids bleiben breit.
   (contentSize ist bewusst breit (1180px), damit 3-spaltige Karten atmen.) */
.wp-block-post-content p { max-width: 860px; }
.esd-card p, .esd-segment p, .esd-principle p, .esd-why p,
.diff-card p, .service-card p, .location-card p, .esd-stat p,
.wp-block-column p { max-width: none; }

/* Abschnitts-Trennlinien wie in Option C */
.esd-section {
  padding-block: clamp(60px, 10vw, 120px);
  border-bottom: 1px solid var(--esd-border);
}
.esd-section:last-of-type { border-bottom: none; }

/* Beige-Highlight, randlos über die Inhaltsbreite hinaus */
.is-style-esd-highlight {
  background: var(--esd-beige);
  padding: clamp(40px, 6vw, 80px);
}

/* ---------- Leistungs-Liste (Detail-Services, schlichte Spalten) ---------- */
.esd-leistung .wp-block-heading { text-align: left; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0; margin-bottom: 8px; }
.esd-leistung p { font-size: 14px; color: var(--esd-text-secondary); margin: 0; }

/* ---------- Karten-Raster: gleich hohe Boxen pro Reihe ---------- */
.esd-grid { display: grid; gap: 32px; align-items: stretch; }
.esd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esd-grid > * { height: 100%; margin: 0; }
@media (max-width: 900px) { .esd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .esd-grid-2, .esd-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Karten (Segmente / Services / Standorte) ---------- */
.is-style-esd-card,
.esd-card {
  background: #fff;
  border: 1px solid var(--esd-border);
  padding: 40px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.is-style-esd-card:hover,
.esd-card:hover {
  border-color: var(--esd-orange);
  box-shadow: 0 8px 20px rgba(255, 160, 55, .1);
}
.esd-card h3 { font-weight: 400; margin-bottom: 16px; }
.esd-card p  { font-size: 14px; line-height: 1.7; color: var(--esd-text-secondary); }
.esd-card.is-beige { background: var(--esd-beige); }

/* Segment-Karten liegen auf Beige → weißer Rahmen reicht */
.esd-segment {
  background: var(--esd-beige);
  border: 1px solid var(--esd-border);
  padding: 40px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.esd-segment:hover { border-color: var(--esd-orange); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.esd-segment .wp-block-heading {
  color: var(--esd-orange);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ---------- Prinzip-Kacheln (linke Orange-Kante) ---------- */
.is-style-esd-principle,
.esd-principle {
  background: var(--esd-beige);
  border-left: 3px solid var(--esd-orange);
  padding: 32px 40px;
  transition: box-shadow .3s ease;
}
.is-style-esd-principle:hover,
.esd-principle:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.esd-principle h3 { font-size: 16px; font-weight: 400; margin-bottom: 12px; }
.esd-principle p  { font-size: 14px; line-height: 1.7; color: var(--esd-text-secondary); }

/* ---------- Warum-Box ---------- */
.is-style-esd-why,
.esd-why {
  background: var(--esd-why);
  border-left: 4px solid var(--esd-orange);
  padding: 32px;
}
.esd-why .esd-why-title {
  font-size: 14px; font-weight: 400; color: var(--esd-orange);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px;
}
.esd-why p { font-size: 15px; line-height: 1.8; color: var(--esd-text-secondary); }

/* ---------- Statement-Box ---------- */
.esd-statement {
  font-size: 20px; font-weight: 300; line-height: 1.8;
  padding: 40px; background: var(--esd-beige);
  border-left: 4px solid var(--esd-orange);
}

/* ---------- Stat-Items mit Icon ---------- */
.esd-stat { display: flex; gap: 24px; align-items: flex-start; }
.esd-stat .esd-stat-icon { width: 48px; height: 48px; flex-shrink: 0; }
.esd-stat .esd-stat-icon svg { width: 100%; height: 100%; stroke: var(--esd-orange); fill: none; stroke-width: 1.5; }
.esd-stat .esd-stat-num { font-size: 24px; font-weight: 500; color: var(--esd-text); margin-bottom: 8px; line-height: 1.1; }
.esd-stat .esd-stat-label { font-size: 14px; color: var(--esd-text-secondary); }

/* ---------- Zertifikat-Karten ---------- */
.esd-cert { text-align: center; }
.esd-cert-icon { width: 48px; height: 48px; margin: 0 auto 16px; }
.esd-cert-icon svg { width: 100%; height: 100%; stroke: var(--esd-orange); fill: none; stroke-width: 1.5; }

/* ---------- Navigation / Header ---------- */
.esd-header {
  border-bottom: 1px solid var(--esd-border);
  position: sticky; top: 0; z-index: 1000; background: #fff;
}
.esd-header .wp-block-navigation { font-size: 13px; }
.esd-header .wp-block-navigation a { color: var(--esd-text); font-weight: 300; }
.esd-header .wp-block-navigation a:hover { color: var(--esd-orange); }
.esd-logo a { color: var(--esd-text); font-weight: 400; letter-spacing: .5px; text-decoration: none; }
.esd-logo a:hover { color: var(--esd-orange); }
.esd-logo-img { margin: 0; }
.esd-logo-img img { display: block; height: auto; }

/* ---------- Mobiles Menü-Overlay: linksbündig & lesbar ---------- */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 28px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
	gap: 4px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: 300;
	padding: 10px 0;
}

/* ---------- Footer ---------- */
.esd-footer { border-top: 1px solid var(--esd-border); }
.esd-footer h4 {
  font-size: 12px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .5px; color: var(--esd-orange); margin-bottom: 20px;
}
.esd-footer a { color: var(--esd-text); font-size: 13px; font-weight: 300; text-decoration: none; }
.esd-footer a:hover { color: var(--esd-orange); }
.esd-footer-bottom { border-top: 1px solid var(--esd-border); color: var(--esd-text-muted); font-size: 12px; }

/* ---------- WhatsApp-Button (Nummer steckt in /whatsapp-Weiterleitung) ---------- */
.esd-whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; padding: 12px 24px;
  text-decoration: none; font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .5px; border-radius: 4px;
}
.esd-whatsapp:hover { background: #20ba5a; color: #fff; }

/* ---------- Formular ---------- */
.esd-form { max-width: 640px; margin: 0 auto; text-align: left; }
.esd-form input, .esd-form select, .esd-form textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--esd-border);
  font-family: inherit; font-size: 14px; font-weight: 300; color: var(--esd-text);
}
.esd-form input:focus, .esd-form select:focus, .esd-form textarea:focus {
  outline: none; border-color: var(--esd-orange); box-shadow: 0 0 0 3px rgba(255,160,55,.1);
}
.esd-field { margin-bottom: 24px; }
.esd-field .field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--esd-text); margin-bottom: 8px; }
.esd-field .radio { display: block; font-size: 14px; font-weight: 300; margin-top: 8px; color: var(--esd-text-secondary); }
.esd-field .radio input { width: auto; margin-right: 8px; }
.esd-form .esd-submit { width: 100%; background: var(--esd-orange); color: #fff; border: none; padding: 14px; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; font-family: inherit; }
.esd-form .esd-submit:hover { background: var(--esd-dark); }
/* Honeypot: vor Menschen verstecken, für Bots ausfüllbar */
.esd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Status-Meldungen nach dem Absenden */
.esd-form-success, .esd-form-error { padding: 16px 20px; margin-bottom: 28px; font-size: 14px; line-height: 1.6; }
.esd-form-success { background: #eef7ee; border-left: 4px solid #2e7d32; color: #1e4620; }
.esd-form-error { background: #fdecea; border-left: 4px solid #c62828; color: #611a15; }
.esd-form-error a { color: inherit; text-decoration: underline; }

/* ---------- Bild-Platzhalter ---------- */
.esd-image-ph {
  width: 100%; background: var(--esd-beige); border: 1px solid var(--esd-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--esd-text-muted); font-size: 14px;
}
.esd-image-ph.ratio-16-9 { aspect-ratio: 16 / 9; }
.esd-image-ph.ratio-4-3  { aspect-ratio: 4 / 3; }
.esd-image-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esd-image-ph:has(img) { border: 0; background: none; }
.esd-card .esd-image-ph, .esd-segment .esd-image-ph { margin-bottom: 20px; }

/* ---------- Firmenchronik (Unsere Geschichte) ---------- */
.esd-history { max-width: 820px; margin: 24px auto 0; text-align: left; }
.esd-history-item { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--esd-border); }
.esd-history-item:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.esd-history-year { font-size: 20px; font-weight: 500; color: var(--esd-orange); line-height: 1; margin-bottom: 2px; letter-spacing: -.3px; }
.esd-history-item h4 { font-size: 15px; font-weight: 500; color: var(--esd-text); margin: 0 0 5px; }
.esd-history-item p { font-size: 14px; line-height: 1.55; color: var(--esd-text-secondary); margin: 0 0 7px; }
.esd-history-item p:last-child { margin-bottom: 0; }

/* ---------- ESD Momente (zweispaltig: Text links · Bild rechts) ---------- */
.esd-moment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}
.esd-moment + .esd-moment { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--esd-border); }
.esd-moment p { max-width: none; }
.esd-moment .wp-block-heading { text-align: left; }
.esd-moment .esd-image-ph { aspect-ratio: 4 / 3; }
.esd-moment-number { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--esd-orange); margin-bottom: 8px; }
.esd-moment-lesson { color: var(--esd-orange); font-size: 14px; margin-top: 16px; }
@media (max-width: 781px) { .esd-moment { grid-template-columns: 1fr; gap: 24px; } }