/*
Theme Name:   CleverFamily Astra Child
Theme URI:    https://cleverfamily-bir.de
Description:  Modernes Astra Child Theme für CleverFamily – Blau-Palette mit Darkmode, DM Serif Display + DM Sans
Author:       CleverFamily Birkenfeld
Author URI:   https://cleverfamily-bir.de
Template:     astra
Version:      1.1.0
Text Domain:  cleverfamily-child
Tags:         family, social, modern, clean, child-theme
*/

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Eigene Brand-Farben ── */
  --cf-primary:        oklch(0.55 0.11 236);   /* Blau – Leitfarbe (aus #D6EEFC) */
  --cf-primary-hover:  oklch(0.48 0.12 236);
  --cf-primary-light:  #D6EEFC;                /* Marken-Hellblau */
  --cf-primary-xlight: oklch(0.975 0.015 232);
  --cf-accent:         oklch(0.63 0.13 32);    /* Terrakotta – warmer Sekundär-Akzent */
  --cf-accent-deep:    oklch(0.57 0.14 32);
  --cf-accent-light:   oklch(0.93 0.045 32);
  --cf-bg:             oklch(0.99 0.006 232);  /* Kühles Weiß */
  --cf-bg-section:     oklch(0.965 0.013 230); /* Hellblau-Off-White */
  --cf-bg-dark:        oklch(0.21 0.035 248);  /* Tiefes Blau-Anthrazit */
  --cf-bg-dark-border: oklch(0.31 0.03 248);
  --cf-text:           oklch(0.24 0.025 248);
  --cf-text-muted:     oklch(0.50 0.02 248);
  --cf-text-light:     oklch(0.75 0.015 242);
  --cf-border:         oklch(0.90 0.012 232);

  /* Flächen, die im Darkmode umgefärbt werden */
  --cf-card:           #fff;                   /* Karten, Spalten, Dropdowns */
  --cf-field:          #fff;                   /* Formularfelder */
  /* Buttons bleiben in beiden Modi kräftig blau (weiße Schrift lesbar) */
  --cf-button:         oklch(0.55 0.11 236);
  --cf-button-hover:   oklch(0.48 0.12 236);

  /* ── Astra CSS-Variable-Overrides ── */
  --ast-primary-color:         oklch(0.55 0.11 236);
  --ast-link-color:            oklch(0.55 0.11 236);
  --ast-link-hover-color:      oklch(0.48 0.12 236);
  --ast-button-bg-color:       oklch(0.55 0.11 236);
  --ast-button-hover-bg-color: oklch(0.48 0.12 236);
  --ast-button-color:          #ffffff;
  --ast-button-hover-color:    #ffffff;
  --ast-button-border-radius:  8px;

  --ast-body-font-family:      'DM Sans', sans-serif;
  --ast-heading-font-family:   'DM Serif Display', serif;
  --ast-global-body-font-size: 16px;
  --ast-body-font-weight:      400;
  --ast-heading-font-weight:   400;
  --ast-heading-line-height:   1.14;
  --ast-body-line-height:      1.70;

  --ast-content-spacing:       40px;
  --ast-container-max-width:   1280px;
}

/* Astra schreibt beim Umschalten seine eigene Palette inline auf <html>.
   Auf <body> gesetzt gewinnt immer die CleverFamily-Palette.
   Die Kurznamen (--primary …) sind Aliase für Plugins/Blöcke und folgen
   automatisch dem Darkmode, weil sie hier auf <body> berechnet werden. */
body {
  --ast-global-color-0: oklch(0.55 0.11 236);
  --ast-global-color-1: #D6EEFC;
  --ast-global-color-2: oklch(0.21 0.035 248);
  --ast-global-color-3: oklch(0.50 0.02 248);
  --ast-global-color-4: oklch(0.965 0.013 230);
  --ast-global-color-5: oklch(0.55 0.11 236);
  --ast-global-color-6: oklch(0.24 0.025 248);
  --ast-global-color-7: oklch(0.99 0.006 232);
  --ast-global-color-8: #222222;

  --primary:        var(--cf-primary);
  --primary-hover:  var(--cf-primary-hover);
  --primary-light:  var(--cf-primary-light);
  --primary-xlight: var(--cf-primary-xlight);
  --accent:         var(--cf-accent);
  --accent-deep:    var(--cf-accent-deep);
  --accent-light:   var(--cf-accent-light);
  --bg:             var(--cf-bg);
  --bg-section:     var(--cf-bg-section);
  --bg-dark:        var(--cf-bg-dark);
  --bg-dark-border: var(--cf-bg-dark-border);
  --text:           var(--cf-text);
  --text-muted:     var(--cf-text-muted);
  --text-light:     var(--cf-text-light);
  --border:         var(--cf-border);
}


/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAFIE
═══════════════════════════════════════════════════════════════ */
body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--cf-bg);
  color: var(--cf-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6,
.ast-heading, .entry-title,
.page-title, .site-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--cf-text);
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3.5vw, 46px); }
h3 { font-size: clamp(22px, 2.5vw, 30px); }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-family: 'DM Sans', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--cf-primary); }

p {
  color: var(--cf-text-muted);
  line-height: 1.70;
  font-size: 16px;
}

a {
  color: var(--cf-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--cf-primary-hover); }

strong, b { font-weight: 600; color: var(--cf-text); }
/* Fett-Text übernimmt eine im Block gesetzte Textfarbe (z. B. hell auf dunklem Grund) */
.has-text-color strong,
.has-text-color b { color: inherit; }
em { font-style: italic; }


/* ═══════════════════════════════════════════════════════════════
   3. HEADER & NAVIGATION
═══════════════════════════════════════════════════════════════ */
#masthead,
.ast-primary-header-bar,
.main-header-bar {
  background-color: var(--cf-bg) !important;
  border-bottom: 1px solid var(--cf-border) !important;
}

.main-header-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo – feste Höhe, damit auch das SVG ohne width/height-Attribute sichtbar ist */
.ast-logo-img,
.custom-logo,
.site-logo img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: none !important;
}

.site-title a {
  font-family: 'DM Serif Display', serif !important;
  font-size: 22px !important;
  color: var(--cf-primary) !important;
  letter-spacing: -0.02em !important;
}

/* Nav links (Basis, gilt auch für das mobile Menü) */
.main-navigation .menu > li > a,
#site-navigation .menu > li > a,
.ast-primary-menu > li > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cf-text-muted) !important;
  letter-spacing: 0.01em !important;
  transition: color 0.15s ease !important;
}

.main-navigation .menu > li > a:hover,
#site-navigation .menu > li > a:hover,
.ast-primary-menu > li > a:hover {
  color: var(--cf-primary) !important;
}

/* Aktive Seite */
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current_page_item > a,
.ast-primary-menu > .current-menu-item > a {
  color: var(--cf-primary) !important;
}

/* Hauptmenü Desktop – Pill-Navigation */
#ast-desktop-header #ast-hf-menu-1 {
  align-items: center;
  gap: 4px;
}
#ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link {
  position: relative;
  line-height: 1.2 !important;
  padding: 10px 16px !important;
  border-radius: 999px;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  color: var(--cf-text-muted) !important;
  transition: background-color .18s ease, color .18s ease !important;
}
#ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link:hover {
  background-color: var(--cf-primary-xlight);
  color: var(--cf-primary) !important;
}
#ast-desktop-header #ast-hf-menu-1 > .current-menu-item > .menu-link,
#ast-desktop-header #ast-hf-menu-1 > .current-menu-ancestor > .menu-link {
  background-color: var(--cf-primary-light);
  color: var(--cf-primary-hover) !important;
  font-weight: 600 !important;
}
#ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link:focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 2px;
}
/* Etwas Luft zwischen Menü und Farbumschalter */
#ast-desktop-header .ast-header-color-switcher {
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--cf-border);
}

/* Dropdown */
.main-navigation .sub-menu,
.ast-primary-menu .sub-menu {
  background: var(--cf-card) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px oklch(0.22 0.02 30 / 0.08) !important;
  padding: 8px !important;
  min-width: 200px !important;
}

.main-navigation .sub-menu li a {
  font-size: 14px !important;
  color: var(--cf-text-muted) !important;
  border-radius: 6px !important;
  padding: 9px 14px !important;
  transition: background 0.12s ease !important;
}

.main-navigation .sub-menu li a:hover {
  background: var(--cf-primary-xlight) !important;
  color: var(--cf-primary) !important;
}

/* Sticky header shadow */
.ast-primary-sticky-header,
#ast-fixed-header.ast-primary-sticky-header {
  box-shadow: 0 2px 24px oklch(0.22 0.02 30 / 0.07) !important;
}

/* Hamburger (mobil) */
.ast-mobile-menu-trigger-fill,
.menu-toggle {
  color: var(--cf-text) !important;
}

/* Adminbar: "Suchen"-Submit erbt sonst die Frontend-Button-Styles */
#wpadminbar #adminbarsearch .adminbar-button {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. BUTTONS
═══════════════════════════════════════════════════════════════ */
.ast-button,
.button,
button[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.wpcf7-submit {
  font-family: 'DM Sans', sans-serif !important;
  background-color: var(--cf-button) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 26px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 0.12s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.ast-button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--cf-button-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Outline-Variante */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--cf-text) !important;
  border: 1.5px solid var(--cf-border) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--cf-primary-xlight) !important;
  border-color: var(--cf-primary) !important;
  color: var(--cf-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   5. CONTENT & EINZEL-SEITEN
═══════════════════════════════════════════════════════════════ */
body,
.ast-site-content-wrap,
#page {
  background-color: var(--cf-bg) !important;
}

.entry-title,
.page-title {
  font-family: 'DM Serif Display', serif !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.10 !important;
  color: var(--cf-text) !important;
  margin-bottom: 24px !important;
}

.entry-content p { margin-bottom: 20px; }

.entry-content h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  margin-top: 52px;
  margin-bottom: 16px;
}

.entry-content h3 {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 12px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 24px;
  margin-bottom: 20px;
  color: var(--cf-text-muted);
}

.entry-content li {
  margin-bottom: 8px;
  line-height: 1.65;
}

.entry-content a {
  color: var(--cf-primary);
  text-decoration: underline;
  text-decoration-color: oklch(0.62 0.13 28 / 0.35);
  text-underline-offset: 3px;
}

.entry-content a:hover {
  color: var(--cf-primary-hover);
  text-decoration-color: var(--cf-primary-hover);
}

/* Blockquote */
blockquote,
.wp-block-quote {
  border-left: 3px solid var(--cf-primary) !important;
  background: var(--cf-primary-light) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 20px 28px !important;
  margin: 32px 0 !important;
}

blockquote p,
.wp-block-quote p {
  font-family: 'DM Serif Display', serif !important;
  font-size: 20px !important;
  font-style: italic !important;
  color: var(--cf-text) !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

blockquote cite,
.wp-block-quote cite {
  font-size: 13px !important;
  color: var(--cf-text-muted) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* Trennlinie */
.wp-block-separator, hr {
  border-color: var(--cf-border) !important;
  opacity: 1 !important;
  margin: 40px 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   6. CONTAINER & SEKTIONEN
═══════════════════════════════════════════════════════════════ */
.ast-container,
.ast-grid-row,
.ast-content-layout-wrap {
  max-width: 1280px !important;
}

/* Sektions-Hintergründe (Block-Editor) */
.wp-block-group {
  padding: 80px 48px;
}

/* Karten / Spalten */
.wp-block-columns {
  gap: 24px !important;
  align-items: stretch !important;
}

.wp-block-column {
  background: var(--cf-card);
  border: 1.5px solid var(--cf-border);
  border-radius: 14px;
  padding: 36px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.wp-block-column:hover {
  box-shadow: 0 8px 32px oklch(0.62 0.13 28 / 0.10);
  transform: translateY(-4px);
  border-color: var(--cf-primary);
}

/* Cover-Block */
.wp-block-cover {
  border-radius: 16px;
  overflow: hidden;
}

/* Image */
.wp-block-image img {
  border-radius: 12px;
}

/* Tabellen */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}

th {
  background: var(--cf-bg-section);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-text-muted);
  border-bottom: 1.5px solid var(--cf-border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cf-border);
  color: var(--cf-text-muted);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--cf-bg-section); }


/* ═══════════════════════════════════════════════════════════════
   7. FORMULARE
═══════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  border: 1.5px solid var(--cf-border) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--cf-text) !important;
  background: var(--cf-field) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--cf-primary) !important;
  box-shadow: 0 0 0 3px oklch(0.62 0.13 28 / 0.12) !important;
}

label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cf-text) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

textarea {
  min-height: 140px !important;
  resize: vertical !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. FOOTER
═══════════════════════════════════════════════════════════════ */
#colophon,
.site-footer,
.ast-small-footer {
  background-color: var(--cf-bg-dark) !important;
  border-top: 1px solid var(--cf-bg-dark-border) !important;
}

.ast-footer-widgets-area {
  background-color: var(--cf-bg-dark) !important;
  padding: 64px 48px 48px !important;
}

.ast-footer-widgets-area h2,
.ast-footer-widgets-area h3,
.ast-footer-widgets-area .widget-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--cf-text-light) !important;
  opacity: 0.5 !important;
  margin-bottom: 18px !important;
}

.ast-footer-widgets-area .widget a,
.ast-footer-widgets-area p {
  color: var(--cf-text-light) !important;
  font-size: 14px !important;
  line-height: 2.0 !important;
}

.ast-footer-widgets-area .widget a:hover {
  color: var(--cf-accent) !important;
}

.ast-small-footer {
  padding: 24px 48px !important;
}

.ast-small-footer .ast-footer-copyright,
.ast-small-footer p,
.ast-small-footer a {
  color: var(--cf-text-light) !important;
  font-size: 13px !important;
  opacity: 0.45;
}

.ast-small-footer a:hover {
  color: var(--cf-accent) !important;
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════
   9. GUTENBERG FARBPALETTE (Custom Classes)
═══════════════════════════════════════════════════════════════ */
.has-primary-color           { color: var(--cf-primary) !important; }
.has-primary-background-color{ background-color: var(--cf-primary) !important; color: #fff !important; }
.has-accent-color            { color: var(--cf-accent) !important; }
.has-accent-background-color { background-color: var(--cf-accent) !important; }
.has-dark-background-color   { background-color: var(--cf-bg-dark) !important; color: #fff !important; }
.has-section-background-color{ background-color: var(--cf-bg-section) !important; }


/* ═══════════════════════════════════════════════════════════════
   10. EVENTS CALENDAR (falls installiert)
═══════════════════════════════════════════════════════════════ */
.tribe-events-calendar th,
.tribe-events-pro-summary .tribe-events-pro-summary__event-title a {
  color: var(--cf-text) !important;
}

.tribe-events .tribe-events-calendar td.tribe-events-has-events {
  background-color: var(--cf-primary-light) !important;
}

.tribe-events .tribe-button-primary,
.tribe-events .tribe-common-c-btn {
  background-color: var(--cf-primary) !important;
  border-color: var(--cf-primary) !important;
  border-radius: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════
   11. STARTSEITE
═══════════════════════════════════════════════════════════════ */
/* Hero: "Kontakt aufnehmen" als weißer Button
   ("Angebote entdecken" ist per Shortcode [cf_hero btn1=""] ausgeschaltet) */
.cf-hero .is-style-outline,
body.astra-dark-mode-enable .cf-hero .is-style-outline {
  background: #fff !important;
  border-color: #fff !important;
  color: oklch(0.30 0.09 262) !important;
}
.cf-hero .is-style-outline:hover,
.cf-hero .is-style-outline:focus-visible {
  background: rgb(234, 243, 251) !important;
  border-color: rgb(234, 243, 251) !important;
  color: oklch(0.30 0.09 262) !important;
}

/* Hero: Rauch aus dem Schornstein nur nachts */
body:not(.astra-dark-mode-enable) .cf-hero .cf-smoke {
  display: none !important;
}

/* Bereichs-Kacheln – größere Icon-Fläche, einheitliche Icons */
.cf-svc-grid .cf-svc-icon {
  width: 100%;
  height: 132px;
  border-radius: 12px;
  margin: 0 0 22px;
  background: oklch(0.95 0.02 258);              /* helles Nachtblau, passend zum Header */
  box-shadow: inset 0 0 0 1px oklch(0.90 0.03 258);
  color: oklch(0.32 0.09 262) !important;
}
.cf-svc-grid .cf-svc-icon svg {
  width: auto;
  height: 72px;
  max-width: 110px;
  transition: transform .25s ease;
}
.cf-svc-grid .cf-svc-card:hover .cf-svc-icon svg {
  transform: scale(1.06);
}
/* Alle Icons: gleiche Farbe und Linienstärke, egal wie die SVG angelegt ist */
.cf-svc-grid .cf-svc-icon [stroke]:not([stroke="none"]) {
  stroke: currentColor;
  stroke-width: 2.6px;
  vector-effect: non-scaling-stroke;
}
.cf-svc-grid .cf-svc-icon [fill]:not([fill="none"]) {
  fill: currentColor;
}
.entry-content .cf-svc-grid .cf-svc-title {
  margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cf-svc-grid .cf-svc-icon svg { transition: none; }
  .cf-svc-grid .cf-svc-card:hover .cf-svc-icon svg { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   12. FAMILIENZENTRUM-SEITE
═══════════════════════════════════════════════════════════════ */
.page-id-1642 #primary {
  margin: 0 !important;
}

/* Rücklink zur CleverFamily-Startseite (Seite hat keinen Header) */
.hero__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blau-tief) !important;
  text-decoration: none !important;
  transition: gap .15s ease, color .15s ease;
}
.hero__zurueck:hover { gap: 12px; text-decoration: underline !important; text-underline-offset: 3px; }
.hero__zurueck:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
.uagb-block-3b99e9c4 .hero__zurueck + .hero__traeger { display: flex; width: fit-content; }


/* ═══════════════════════════════════════════════════════════════
   13. DARKMODE (Astra-Farbumschalter → body.astra-dark-mode-enable)
   Nachtblau passend zur Nacht-Szene im Hero
═══════════════════════════════════════════════════════════════ */
body.astra-dark-mode-enable {
  /* CleverFamily-Tokens – alles, was über Tokens läuft, färbt sich damit automatisch um */
  --cf-primary:        oklch(0.74 0.10 236);
  --cf-primary-hover:  oklch(0.82 0.08 236);
  --cf-primary-light:  oklch(0.29 0.05 240);
  --cf-primary-xlight: oklch(0.25 0.04 242);
  --cf-accent:         oklch(0.74 0.11 35);
  --cf-accent-deep:    oklch(0.68 0.12 35);
  --cf-accent-light:   oklch(0.30 0.05 35);
  --cf-bg:             oklch(0.17 0.03 252);
  --cf-bg-section:     oklch(0.205 0.032 250);
  --cf-bg-dark:        oklch(0.13 0.025 252);
  --cf-bg-dark-border: oklch(0.24 0.03 250);
  --cf-text:           oklch(0.95 0.008 240);
  --cf-text-muted:     oklch(0.78 0.018 240);
  --cf-text-light:     oklch(0.80 0.015 242);
  --cf-border:         oklch(0.31 0.03 248);
  --cf-card:           oklch(0.215 0.032 250);
  --cf-field:          oklch(0.205 0.032 250);

  /* Astra-Globalfarben (statt der Standard-Darkpalette von Astra) */
  --ast-global-color-0: oklch(0.74 0.10 236);
  --ast-global-color-1: oklch(0.29 0.05 240);
  --ast-global-color-2: oklch(0.95 0.008 240);
  --ast-global-color-3: oklch(0.78 0.018 240);
  --ast-global-color-4: oklch(0.205 0.032 250);
  --ast-global-color-5: oklch(0.74 0.10 236);
  --ast-global-color-6: oklch(0.95 0.008 240);
  --ast-global-color-7: oklch(0.17 0.03 252);
  --ast-global-color-8: oklch(0.95 0.008 240);
  --ast-link-color:       oklch(0.74 0.10 236);
  --ast-link-hover-color: oklch(0.82 0.08 236);

  /* Familienzentrum-Seite */
  --tinte:       oklch(0.95 0.01 250);
  --text:        oklch(0.86 0.015 245);
  --text-leise:  oklch(0.76 0.018 245);
  --papier:      oklch(0.17 0.03 252);
  --papier-warm: oklch(0.24 0.03 250);
  --karte:       oklch(0.215 0.032 250);
  --linie:       oklch(0.32 0.03 248);
  --gruen-tief:  oklch(0.80 0.14 135);
  --blau-tief:   oklch(0.78 0.10 230);
  --orange-tief: oklch(0.82 0.13 70);
  --rot-tief:    oklch(0.76 0.13 15);
  --lila-tief:   oklch(0.78 0.10 310);
  --schatten-klein: 0 2px 8px rgba(0, 0, 0, .25);
  --schatten:       0 14px 34px rgba(0, 0, 0, .35);
  --schatten-gross: 0 28px 60px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* Logo: weiße Variante (Datei liegt im Theme unter assets/logo-weiss.svg) */
body.astra-dark-mode-enable .site-logo-img .custom-logo {
  content: url("assets/logo-weiss.svg");
}

/* Kopfbereich inkl. Leiste mit Umschalter */
body.astra-dark-mode-enable .ast-above-header-bar,
body.astra-dark-mode-enable .ast-above-header {
  background-color: var(--cf-bg-dark) !important;
  border-color: var(--cf-border) !important;
}
body.astra-dark-mode-enable .ast-switcher-button,
body.astra-dark-mode-enable .ast-switcher-button svg {
  color: var(--cf-text) !important;
  fill: currentColor;
}
body.astra-dark-mode-enable .ast-mobile-header-content,
body.astra-dark-mode-enable .ast-mobile-header-content .main-header-menu {
  background-color: var(--cf-bg) !important;
}
body.astra-dark-mode-enable .ast-mobile-header-content .menu-link {
  color: var(--cf-text) !important;
  border-color: var(--cf-border) !important;
}

/* Pill-Navigation */
body.astra-dark-mode-enable #ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link:hover {
  background-color: var(--cf-primary-light);
  color: var(--cf-text) !important;
}
body.astra-dark-mode-enable #ast-desktop-header #ast-hf-menu-1 > .current-menu-item > .menu-link,
body.astra-dark-mode-enable #ast-desktop-header #ast-hf-menu-1 > .current-menu-ancestor > .menu-link {
  background-color: var(--cf-primary-light);
  color: var(--cf-text) !important;
  box-shadow: inset 0 0 0 1px oklch(0.40 0.06 238);
}

/* Inhaltsbilder minimal abdunkeln, damit sie nicht blenden */
body.astra-dark-mode-enable .entry-content img:not(.cf-hero img):not([src$=".svg"]) {
  filter: brightness(0.92);
}

/* Inline fest weiß gesetzte Karten */
body.astra-dark-mode-enable [style*="background:#fff"],
body.astra-dark-mode-enable [style*="background: #fff"],
body.astra-dark-mode-enable [style*="background-color:#fff"],
body.astra-dark-mode-enable [style*="background-color: #fff"] {
  background: var(--cf-card) !important;
}

/* Startseite: Hero-Rauch etwas höher, damit er über dem Schornstein beginnt */
body.astra-dark-mode-enable .cf-hero .cf-smoke {
  bottom: 39%;
}

/* Startseite: Kontakt-Sektion (Spectra-Container mit festem Hellblau) */
body.astra-dark-mode-enable .uagb-block-e934ba28 {
  background: var(--cf-bg-section) !important;
}

/* Startseite: Bereichs-Kacheln im Nachtblau des Headers */
body.astra-dark-mode-enable .cf-svc-grid {
  --cf-light:  oklch(0.30 0.06 255);
  --cf-accent: oklch(0.82 0.08 238);
  --cf-border: oklch(0.32 0.045 255);
  --cf-title:  oklch(0.96 0.008 250);
  --cf-text:   oklch(0.80 0.02 250);
}
body.astra-dark-mode-enable .cf-svc-card {
  background: oklch(0.215 0.045 256);
  border-color: oklch(0.32 0.045 255);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
body.astra-dark-mode-enable .cf-svc-media,
body.astra-dark-mode-enable .cf-svc-placeholder {
  background-color: oklch(0.25 0.055 256);
}
body.astra-dark-mode-enable .cf-svc-placeholder {
  background-image: repeating-linear-gradient(135deg, var(--cf-light) 0, var(--cf-light) 18px, oklch(0.25 0.055 256) 18px, oklch(0.25 0.055 256) 54px);
}
body.astra-dark-mode-enable .cf-svc-grid .cf-svc-icon {
  background: linear-gradient(160deg, oklch(0.30 0.07 256) 0%, oklch(0.24 0.055 258) 100%);
  box-shadow: inset 0 0 0 1px oklch(0.36 0.06 255);
  color: #fff !important;
}

/* Startseite: Familienzentrum-Banner */
body.astra-dark-mode-enable .fzb {
  background: oklch(0.24 0.035 65);
  color: var(--cf-text-muted);
  box-shadow: inset 0 0 0 1px oklch(0.33 0.04 65);
}
body.astra-dark-mode-enable .fzb-eye    { color: oklch(0.78 0.10 225); }
body.astra-dark-mode-enable .fzb-h      { color: oklch(0.88 0.06 230); }
body.astra-dark-mode-enable .fzb-h span { color: oklch(0.78 0.15 55); }

/* Familienzentrum: Akzent-Textfarben je Karte aufhellen */
body.astra-dark-mode-enable [style*="--akzent-text"] {
  --akzent-text: color-mix(in oklch, var(--akzent) 62%, white) !important;
}
/* Familienzentrum: Navy-Akzent (Etappe 4) wäre auf Dunkel unsichtbar */
body.astra-dark-mode-enable [style*="--akzent: #172e63"] {
  --akzent: oklch(0.55 0.11 255) !important;
}

/* Familienzentrum: Sektionsflächen */
body.astra-dark-mode-enable .uagb-block-bc47a9a4 { background-color: var(--cf-bg) !important; }
body.astra-dark-mode-enable .uagb-block-6ae17ba9 { background-color: oklch(0.205 0.032 250) !important; }
body.astra-dark-mode-enable .uagb-block-df883ca0 { background-color: oklch(0.13 0.025 252) !important; }
body.astra-dark-mode-enable .uagb-block-e139bfb2 { background-color: oklch(0.205 0.032 250) !important; }
body.astra-dark-mode-enable .uagb-block-e6b8dd8e { background-color: oklch(0.20 0.03 165) !important; }
body.astra-dark-mode-enable .uagb-block-bc47a9a4 .uagb-container__shape-bottom .uagb-container__shape-fill { fill: oklch(0.13 0.025 252) !important; }
body.astra-dark-mode-enable .uagb-block-df883ca0 .uagb-container__shape-bottom .uagb-container__shape-fill { fill: oklch(0.205 0.032 250) !important; }
/* Video-Sektion: Globalfarbe 4 ist im Darkmode dunkel – Text dort hell halten */
body.astra-dark-mode-enable .uagb-block-df883ca0 .has-ast-global-color-4-color { color: var(--cf-text) !important; }

/* Familienzentrum: fest weiße Elemente */
body.astra-dark-mode-enable .hero__traeger,
body.astra-dark-mode-enable .knopf--rand,
body.astra-dark-mode-enable .zettel,
body.astra-dark-mode-enable .ideebox,
body.astra-dark-mode-enable .schritt {
  background: var(--karte) !important;
  border-color: var(--linie) !important;
}
body.astra-dark-mode-enable .stimme {
  background: linear-gradient(150deg, oklch(0.22 0.035 160) 0%, oklch(0.22 0.035 240) 100%) !important;
  border-color: var(--linie) !important;
}
body.astra-dark-mode-enable .knopf--voll  { color: #172e63 !important; }
body.astra-dark-mode-enable .knopf--gruen { background: #3d7d1d !important; color: #fff !important; }
body.astra-dark-mode-enable .plakatknopf  { text-decoration-color: oklch(0.55 0.10 135); }


/* ═══════════════════════════════════════════════════════════════
   14. RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .wp-block-group { padding: 64px 32px; }
}

@media (max-width: 768px) {
  h1 { font-size: clamp(30px, 8vw, 40px); }
  h2 { font-size: clamp(24px, 6vw, 32px); }
  h3 { font-size: 22px; }

  .ast-container { padding-left: 20px !important; padding-right: 20px !important; }

  .wp-block-group { padding: 48px 20px; }

  .ast-footer-widgets-area { padding: 48px 20px 40px !important; }
  .ast-small-footer         { padding: 20px !important; }

  .wp-block-column {
    padding: 24px 20px;
  }
}