/* ── NAWAKI Design System v1 ──
   Natur- und Waldkindergarten Bad Doberan: hell, warm, naturnah.
   Gestylt werden native Elementor-Widgets über css_classes-Hooks (nw-*),
   damit Inhalte im Editor bearbeitbar bleiben und das Design zentral liegt. */
:root {
  --creme:      #FAF6EC;   /* Grundhintergrund (Sand/Papier) */
  --creme-alt:  #F1EADA;   /* alternierende Sektionen */
  --wald:       #2F5D3E;   /* Primärgrün */
  --wald-dark:  #1E3D28;   /* dunkles Waldgrün (Footer, Headlines) */
  --moos:       #6F955C;   /* helles Moosgrün (Akzente, Icons) */
  --sonne:      #E9A94B;   /* Sonnengelb (Banner, Highlights) */
  --holz:       #8A6748;   /* Holzbraun (dezente Akzente) */
  --tinte:      #2C3A2F;   /* Fließtext */
  --tinte-soft: rgba(44,58,47,0.72);
  --white:      #FFFFFF;
  --card-shadow: 0 12px 34px rgba(31,61,40,0.10);
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; font-size: 17px; }

html, body {
  background: var(--creme) !important;
  color: var(--tinte);
  font-family: 'Nunito Sans', sans-serif;
}

body .elementor-widget-text-editor, body .elementor-widget-text-editor p {
  color: var(--tinte-soft);
}

/* Theme-eigenen Header/Footer ausblenden, da die Seiten eigene haben */
#site-header, #site-footer { display: none; }

img { max-width: 100%; height: auto; }

::selection { background: rgba(111,149,92,0.35); }

/* ── Ankündigungsbanner (wp_body_open, per Admin-Option pflegbar) ── */
.nw-banner { position: relative; z-index: 210; display: flex; align-items: center; justify-content: center; gap: 0.8rem; background: var(--sonne); color: var(--wald-dark); padding: 0.6rem 3rem 0.6rem 1.2rem; font-size: 0.92rem; font-weight: 600; text-align: center; }
.nw-banner a { color: var(--wald-dark); text-decoration: underline; text-underline-offset: 3px; }
.nw-banner a:hover { text-decoration-thickness: 2px; }
.nw-banner-close { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--wald-dark); padding: 0.35rem 0.55rem; border-radius: 50%; }
.nw-banner-close:hover { background: rgba(31,61,40,0.12); }
.nw-banner.is-dismissed { display: none; }

/* ── Sticky Navigation ── */
.site-nav-section { position: sticky; top: 0; z-index: 200; transition: background 0.3s ease, box-shadow 0.3s ease; background: rgba(250,246,236,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav-section.is-scrolled { background: rgba(250,246,236,0.96); box-shadow: 0 8px 30px rgba(31,61,40,0.12); }
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-nav-brand { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 600; color: var(--wald-dark); text-decoration: none; display: flex; align-items: center; gap: 0.65em; }
.site-nav .nav-wortmarke, .elementor .site-nav .nav-wortmarke { height: 56px !important; width: auto !important; display: block; }
.site-nav-menu { display: flex; align-items: center; gap: 1.4rem; }
.site-nav-links { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.site-nav-links a { color: var(--tinte-soft); text-decoration: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.site-nav-links a:hover, .site-nav-links a.is-active { color: var(--wald); border-color: var(--moos); }
.site-nav-cta { background: var(--wald); color: var(--creme) !important; padding: 0.65rem 1.3rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.2s; }
.site-nav-cta:hover { background: var(--wald-dark); transform: translateY(-1px); }

/* Burger (nur mobil sichtbar) */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none !important; border: none !important; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--wald-dark); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-burger { display: flex; }
  .site-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 1.2rem; background: rgba(250,246,236,0.98); padding: 1.6rem 2rem 2rem; box-shadow: 0 24px 40px rgba(31,61,40,0.18); }
  .site-nav-menu.is-open { display: flex; }
  .site-nav-links { flex-direction: column; gap: 1.1rem; }
  .site-nav-links a { font-size: 0.85rem; }
}

/* ── Typo-Bausteine (heading-Widgets) ── */
body .nw-eyebrow .elementor-heading-title { font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 600; color: var(--moos); }
.nw-eyebrow { margin-bottom: 0.8rem; }

body .nw-h1 .elementor-heading-title { font-family: 'Fraunces', serif; font-size: clamp(2.7rem, 5vw, 4.6rem); font-weight: 600; line-height: 1.08; color: var(--wald-dark); }
body .nw-h1 .elementor-heading-title em, body .nw-h2 .elementor-heading-title em { color: var(--moos); font-style: italic; }
.nw-h1 { margin-bottom: 1.4rem; }

body .nw-h2 .elementor-heading-title { font-family: 'Fraunces', serif; font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 600; line-height: 1.15; color: var(--wald-dark); }
.nw-h2 { margin-bottom: 1.6rem; }

body .nw-h3 .elementor-heading-title { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 600; color: var(--wald-dark); }

.hero-text { font-size: 1.15rem; line-height: 1.85; color: var(--tinte-soft); max-width: 540px; margin-bottom: 1.6rem; }
.hero-text strong { color: var(--wald-dark); font-weight: 700; }

/* ── CTA-Buttons (button-Widgets) ── */
body .nw-cta .elementor-button { background: var(--wald); color: var(--creme); padding: 1rem 1.9rem; border-radius: 999px; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, transform 0.2s; }
body .nw-cta .elementor-button:hover { background: var(--wald-dark); color: var(--creme); transform: translateY(-2px); }
body .nw-cta-ghost .elementor-button { background: transparent; color: var(--wald); border: 2px solid var(--wald); padding: calc(1rem - 2px) 1.9rem; border-radius: 999px; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, color 0.2s, transform 0.2s; }
body .nw-cta-ghost .elementor-button:hover { background: var(--wald); color: var(--creme); transform: translateY(-2px); }

.nw-hero-img img { border-radius: 24px; box-shadow: var(--card-shadow); }
.image-credit { margin-top: 1rem; font-size: 0.68rem; color: rgba(44,58,47,0.5); text-align: center; letter-spacing: 0.03em; line-height: 1.7; }

/* ── Reveal-Animationen ── */
.reveal-fade { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); }
.reveal-fade.in-view { opacity: 1; transform: none; }
.reveal-grow { opacity: 0; transform: scale(0.94); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1); }
.reveal-grow.in-view { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-fade, .reveal-grow { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Aktuelles (Shortcode [nawaki_aktuelles]) ── */
.nw-aktuelles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .nw-aktuelles-grid { grid-template-columns: 1fr; } }
.nw-aktuell-card { display: flex; flex-direction: column; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.nw-aktuell-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(31,61,40,0.16); }
.nw-aktuell-thumb { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.nw-aktuell-thumb-placeholder { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--creme-alt), #E2D8BF); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.nw-aktuell-body { padding: 1.3rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nw-aktuell-date { font-size: 0.78rem; color: rgba(44,58,47,0.55); }
.nw-aktuell-title { font-family: 'Fraunces', serif; font-size: 1.28rem; font-weight: 600; line-height: 1.3; color: var(--wald-dark); margin: 0; }
.nw-aktuell-excerpt { font-size: 0.92rem; line-height: 1.7; color: var(--tinte-soft); }
.nw-aktuelles-more { margin-top: 2rem; text-align: center; }
.nw-aktuelles-more a { color: var(--wald); font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(111,149,92,0.4); padding-bottom: 2px; }
.nw-aktuelles-more a:hover { border-color: var(--wald); }
.nw-aktuelles-empty { text-align: center; color: var(--tinte-soft); font-style: italic; }

/* ── Aktuelles-Slider (12 Beiträge, laufen von links nach rechts) ── */
.nw-aktuelles-slider { position: relative; margin: 0 -8px; }
.nw-slider-track { display: flex; gap: 1.4rem; overflow-x: auto; padding: 8px 8px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nw-slider-track::-webkit-scrollbar { display: none; }
.nw-slider-track .nw-aktuell-card { flex: 0 0 320px; }
@media (max-width: 600px) { .nw-slider-track .nw-aktuell-card { flex-basis: 270px; } }
.nw-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--wald); color: var(--creme); font-size: 1.25rem; line-height: 1; box-shadow: 0 8px 22px rgba(31,61,40,0.3); transition: background 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; }
.nw-slider-arrow:hover { background: var(--wald-dark); transform: translateY(-50%) scale(1.06); }
.nw-slider-arrow.is-prev { left: -10px; }
.nw-slider-arrow.is-next { right: -10px; }
@media (max-width: 900px) { .nw-slider-arrow { display: none; } }

.konzept-links { margin-top: 2rem; font-size: 0.92rem; color: var(--tinte-soft); }
.konzept-links a { color: var(--wald); font-weight: 700; }
.foerderer-titel { margin-top: 1.6rem; color: var(--wald-dark); }
.foerderer-liste { font-size: 0.92rem; line-height: 2; color: var(--tinte-soft); }
.mitmach-text a { color: var(--wald); font-weight: 700; }
.ablauf-garten { margin-top: 1.4rem; }
.ablauf-garten img { max-height: 380px; width: 100%; object-fit: cover; object-position: 50% 65%; }

/* ── Icon-Karten (icon-box-Widgets, z. B. "Das Besondere") ── */
.nw-pillar { flex: 1 1 280px; background: var(--white); border-radius: 20px; padding: 1.9rem 1.8rem; box-shadow: var(--card-shadow); transition: transform 0.25s ease; }
.nw-pillar:hover { transform: translateY(-4px); }
.nw-pillar .elementor-icon-box-wrapper { text-align: left; }
.nw-pillar .elementor-icon-box-icon { margin-bottom: 1rem; }
.nw-pillar .elementor-icon { font-size: 1.7rem; color: var(--moos); }
.nw-pillar .elementor-icon svg { width: 1.7rem; fill: var(--moos); }
.nw-pillar .elementor-icon-box-title { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; color: var(--wald-dark); margin-bottom: 0.6rem; }
.nw-pillar .elementor-icon-box-description { font-size: 0.95rem; line-height: 1.8; color: var(--tinte-soft); }

/* ── Full-bleed Break-Sections (Foto + Zitat, Parallax) ── */
.break-section { position: relative; min-height: 58vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Mobile-Parallax (clip-path-Trick): Die Sektion wird zum "Fenster" auf ein
   viewport-fixiertes Bild – funktioniert im Gegensatz zu
   background-attachment:fixed auch auf iOS/Android.
   Fallback ohne clip-path-Support: Bild liegt normal in der Sektion. */
.break-clip { isolation: isolate; }
.break-clip .break-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; pointer-events: none; }
@supports (clip-path: inset(0)) {
  .break-clip { clip-path: inset(0 0 0 0); }
  .break-clip .break-bg { position: fixed; }
}
@media (prefers-reduced-motion: reduce) {
  .break-clip .break-bg { position: absolute; }
}
.break-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,61,40,0.45) 0%, rgba(31,61,40,0.25) 40%, rgba(31,61,40,0.6) 100%); z-index: 1; pointer-events: none; }
.break-section > .e-con-inner, .break-section .break-content { position: relative; z-index: 2; }
.break-content { text-align: center; max-width: 760px; padding: 3rem 2rem; }
body .nw-break-eyebrow .elementor-heading-title { font-family: 'Caveat', cursive; font-size: 1.6rem; font-weight: 600; color: #F5D9A8; }
.nw-break-eyebrow { margin-bottom: 1rem; }
body .nw-break-quote .elementor-heading-title { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.3rem); font-weight: 400; line-height: 1.45; color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
/* "body .elementor-widget-text-editor p" hat höhere Spezifität als eine
   einfache Klasse – helle Texte auf Fotos/dunklen Flächen brauchen daher
   den ausgeschriebenen Selektor, sonst gewinnt die dunkle Standardfarbe. */
body .elementor-widget-text-editor p.break-credit, .break-credit { margin-top: 1.2rem; font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.95); text-shadow: 0 1px 12px rgba(0,0,0,0.6); }

/* ── Tagesablauf (Timeline) ── */
.ablauf-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.ablauf-steps li { counter-increment: step; position: relative; padding: 0 0 1.8rem 4.4rem; font-size: 1rem; line-height: 1.8; color: var(--tinte-soft); }
.ablauf-steps li strong { color: var(--wald-dark); display: block; margin-bottom: 0.2rem; font-size: 1.05rem; }
.ablauf-steps li .ablauf-zeit { font-family: 'Caveat', cursive; font-size: 1.35rem; color: var(--holz); position: absolute; left: 0; top: -0.15rem; width: 3.4rem; }
.ablauf-steps li::before { content: ''; position: absolute; left: 3.55rem; top: 0.45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--moos); }
.ablauf-steps li::after { content: ''; position: absolute; left: 3.85rem; top: 1.5rem; bottom: 0.4rem; width: 1px; background: rgba(111,149,92,0.4); }
.ablauf-steps li:last-child::after { display: none; }
.ablauf-steps li { padding-left: 5.2rem; }
.ablauf-steps li strong { margin-left: 0; }

/* ── Team-Karten ── */
.team-card { background: var(--white); border-radius: 20px; padding: 2rem 1.9rem; box-shadow: var(--card-shadow); flex: 1; }
.team-card .nw-h3 { margin-bottom: 0.2rem; }
.team-rolle { font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--moos); margin-bottom: 0.9rem; }
.team-text { font-size: 0.93rem; line-height: 1.8; color: var(--tinte-soft); }
.team-img img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 24px rgba(31,61,40,0.18); margin-bottom: 1.1rem; }

/* ── Alternierende Sektionen ── */
.section-alt { background: var(--creme-alt); }
.section-wald { background: var(--wald-dark); }
.section-wald .nw-h2 .elementor-heading-title, .section-wald .nw-h3 .elementor-heading-title { color: var(--creme); }
.section-wald .elementor-widget-text-editor, .section-wald .elementor-widget-text-editor p { color: rgba(250,246,236,0.82); }
.section-wald .nw-eyebrow .elementor-heading-title { color: var(--sonne); }

/* ── Mitmachen-Karten ── */
.mitmach-card { background: var(--white); border-radius: 20px; padding: 2.1rem 2rem; box-shadow: var(--card-shadow); flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.mitmach-card .nw-h3 { margin-bottom: 0.7rem; }
.mitmach-text { font-size: 0.95rem; line-height: 1.8; color: var(--tinte-soft); margin-bottom: 1.2rem; }
.mitmach-card .nw-cta-ghost { margin-top: auto; }
.spenden-konto { background: var(--creme); border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.85rem; line-height: 1.7; color: var(--tinte); width: 100%; }
.spenden-konto strong { color: var(--wald-dark); }
.spenden-hinweis { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--tinte-soft); }

/* ── Pull Quote ── */
.pull-quote { border-left: 3px solid var(--moos); margin: 2.2rem 0; padding: 0.3rem 0 0.3rem 1.8rem; }
.pull-quote p { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.7rem) !important; line-height: 1.55 !important; color: var(--wald) !important; margin: 0 !important; }

/* ── FAQ (accordion-Widget) ── */
.nw-faq .elementor-accordion-item { background: var(--white); border: 1px solid rgba(111,149,92,0.25) !important; border-radius: 14px; margin-bottom: 0.9rem; overflow: hidden; }
.nw-faq .elementor-tab-title { padding: 1.1rem 1.4rem; font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600; color: var(--wald-dark) !important; }
.nw-faq .elementor-tab-title a { color: inherit; }
.nw-faq .elementor-accordion-icon { color: var(--moos) !important; }
.nw-faq .elementor-accordion-icon svg { fill: var(--moos); }
.nw-faq .elementor-tab-content { padding: 0 1.4rem 1.3rem; font-size: 0.95rem; line-height: 1.8; color: var(--tinte-soft) !important; border-top: none !important; }

/* ── Kontakt + Formular (Contact Form 7) ── */
.kontakt-text { font-size: 1.05rem; line-height: 1.8; color: var(--tinte-soft); margin-bottom: 1.4rem; }
.kontakt-adresse { background: var(--white); border-radius: 16px; padding: 1.4rem 1.6rem; box-shadow: var(--card-shadow); font-size: 0.95rem; line-height: 1.9; }
.kontakt-adresse strong { color: var(--wald-dark); }
.kontakt-adresse a { color: var(--wald); }

.nw-form form { text-align: left; background: var(--white); border-radius: 20px; padding: 1.9rem; box-shadow: var(--card-shadow); }
.nw-form label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-soft); margin-bottom: 1.1rem; }
.nw-form .nw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 700px) { .nw-form .nw-form-row { grid-template-columns: 1fr; } }
.nw-form .nw-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(44,58,47,0.5); }
.nw-form input[type="text"], .nw-form input[type="email"], .nw-form textarea {
  display: block; width: 100%; margin-top: 0.45rem; padding: 0.75rem 0.9rem;
  background: var(--creme); border: 1px solid rgba(111,149,92,0.35); border-radius: 10px;
  color: var(--tinte); font-family: 'Nunito Sans', sans-serif; font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}
.nw-form input:focus, .nw-form textarea:focus { outline: none; border-color: var(--wald); background: var(--white); }
.nw-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.nw-form .wpcf7-acceptance label { display: flex; gap: 0.6rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.8rem; line-height: 1.6; color: var(--tinte-soft); }
.nw-form .wpcf7-acceptance input { margin-top: 0.2rem; accent-color: var(--wald); }
.nw-form .wpcf7-acceptance a { color: var(--wald); }
.nw-form input[type="submit"] {
  background: var(--wald); color: var(--creme); border: none; border-radius: 999px; cursor: pointer;
  padding: 1rem 1.9rem; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.2s, transform 0.2s; margin-top: 0.4rem;
}
.nw-form input[type="submit"]:hover { background: var(--wald-dark); transform: translateY(-2px); }
.nw-form .wpcf7-not-valid-tip { color: #B3432B; font-size: 0.75rem; text-transform: none; letter-spacing: 0; margin-top: 0.3rem; }
.nw-form .wpcf7-response-output { border: 1px solid rgba(111,149,92,0.6) !important; border-radius: 10px; padding: 0.8rem 1rem !important; margin: 1rem 0 0 !important; font-size: 0.88rem; color: var(--tinte); }
.nw-form .wpcf7-spinner { display: block; margin: 0.6rem auto 0; }

/* ── Footer ── */
.footer-section { background: var(--wald-dark); }
body .elementor-widget-text-editor p.footer-legal, .footer-legal { font-size: 0.78rem; color: rgba(250,246,236,0.75); }
.footer-legal a { color: rgba(250,246,236,0.9); text-decoration: none; border-bottom: 1px solid rgba(250,246,236,0.3); }
.footer-legal a:hover { color: var(--sonne); border-color: var(--sonne); }
body .elementor-widget-text-editor p.footer-location, .footer-location { font-size: 0.66rem; letter-spacing: 0.2em; color: rgba(250,246,236,0.55); text-transform: uppercase; }

/* ── Legal- & Unterseiten ── */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-h1 { font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; color: var(--wald-dark); margin: 0 0 2.4rem; }
.legal-h2 { font-family: 'Fraunces', serif; font-size: 1.45rem; font-weight: 600; color: var(--wald); margin: 2.4rem 0 0.8rem; }
.legal-p { font-size: 1rem; line-height: 1.85; color: var(--tinte-soft); margin-bottom: 1rem; }
.legal-p a { color: var(--wald); }
.legal-todo { background: rgba(233,169,75,0.15); border: 1px solid rgba(233,169,75,0.5); border-radius: 10px; padding: 0.9rem 1.1rem; color: #7A5410; font-size: 0.92rem; }

.nw-sub-img img { border-radius: 24px; box-shadow: var(--card-shadow); }
.nw-hinweis-box { background: rgba(111,149,92,0.12); border: 1px solid rgba(111,149,92,0.4); border-radius: 12px; padding: 1.2rem 1.4rem; font-size: 0.92rem; line-height: 1.75; color: var(--tinte); }
.nw-hinweis-box .wochen-liste { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.nw-hinweis-box .wochen-liste li { position: relative; padding-left: 1.1rem; margin-bottom: 0.45rem; }
.nw-hinweis-box .wochen-liste li:last-child { margin-bottom: 0; }
.nw-hinweis-box .wochen-liste li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--moos); }
.nw-hinweis-box .wochen-liste strong { color: var(--wald-dark); margin-right: 0.35rem; }

/* ── Fotogalerien (Elementor „Basis-Galerie“) ──
   Elementor rendert WordPress' [gallery]-Markup: figure.gallery >
   figure.gallery-item > .gallery-icon > a > img (+ optional .gallery-caption).
   Wir bauen daraus zwei Darstellungen:
     .nw-naturstreifen – ruhiges Raster (Sektion „Der Waldkindergarten“)
     .nw-bilderband    – waagerecht laufendes Band (Sektion „Einblicke“)
   Die Lightbox bringt Elementor selbst mit.

   WICHTIG für beide: Elementors widget-image-gallery.css setzt
   .gallery-columns-4 .gallery-item { max-width: 25% }. Ohne das Überschreiben
   von max-width schrumpft jede Kachel auf ein Viertel ihrer Spalte (68px
   statt 273px) – width:auto allein genügt NICHT. */
.nw-naturstreifen .gallery-item,
.nw-bilderband .gallery-item {
  width: auto !important; max-width: none !important;
  margin: 0 !important; float: none !important; display: block !important;
}
.nw-naturstreifen .gallery-icon,
.nw-bilderband .gallery-icon { margin: 0; }
.nw-naturstreifen .gallery-icon a,
.nw-bilderband .gallery-icon a {
  display: block; border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow);
}
.nw-naturstreifen .gallery-item img,
.nw-bilderband .gallery-item img {
  display: block; border: 0 !important; border-radius: 18px;
  transition: transform 0.45s ease, filter 0.45s ease;
}
.nw-naturstreifen .gallery-icon a:hover img,
.nw-bilderband .gallery-icon a:hover img { transform: scale(1.045); filter: saturate(1.06); }
.nw-naturstreifen .gallery-icon a:focus-visible,
.nw-bilderband .gallery-icon a:focus-visible { outline: 3px solid var(--moos); outline-offset: 3px; }

/* Natur-Streifen: vier Makros als ruhiges Raster, ohne Bildunterschriften. */
.nw-naturstreifen { margin: 2rem 0 2.4rem; }
.nw-naturstreifen .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }
.nw-naturstreifen .gallery-item img { width: 100%; height: 190px; object-fit: cover; }
.nw-naturstreifen .gallery-caption { display: none; }

/* Rubrik-Überschrift über jedem Band: Titel plus feine Linie bis zum Rand. */
.nw-bildgruppe { margin: 2.4rem 0 0.8rem; }
.nw-bildgruppe:first-of-type { margin-top: 1.6rem; }
body .nw-bildgruppe .elementor-heading-title {
  font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; color: var(--wald-dark);
  display: flex; align-items: center; gap: 0.9rem;
}
body .nw-bildgruppe .elementor-heading-title::after {
  content: ''; flex: 1; height: 1px; background: rgba(111,149,92,0.45);
}

/* Bilderband: waagerechte Reihe, die von selbst läuft. Höhe fix, Breite
   automatisch – so laufen Hoch- und Querformate ohne Beschnitt nebeneinander.
   Das Auto-Laufen und das Ziehen mit der Maus macht nawaki-motion.js. */
.nw-bilderband { margin: 0 -64px; }
.nw-bilderband + .nw-bilderband { margin-top: 1.1rem; }
.nw-bilderband .elementor-image-gallery { position: relative; }
.nw-bilderband .gallery {
  display: flex; gap: 14px; margin: 0;
  /* Das großzügige padding-bottom ist der Platz für die absolut
     positionierte Bildunterschrift (max. 2 Zeilen), siehe unten. */
  padding: 6px 64px 3.1rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  user-select: none; cursor: grab;
}
.nw-bilderband .gallery::-webkit-scrollbar { display: none; }
.nw-bilderband .gallery-item { flex: 0 0 auto; position: relative; }
.nw-bilderband .gallery-item img {
  width: auto; height: 220px; max-width: none;
  -webkit-user-drag: none; user-drag: none;
}
.nw-bilderband.is-grabbing .gallery { cursor: grabbing; }
.nw-bilderband.is-grabbing .gallery-icon a { pointer-events: none; }

/* Bildunterschrift unter jedem Bild – ersetzt die früheren Rubriken.
   WordPress rendert <figcaption> als Geschwister von .gallery-icon. Als
   normaler Block im Flex-Item würde eine lange Unterschrift die Kachel
   breiter machen als das Bild und Lücken ins Band reißen. Deshalb absolut
   positioniert: Die Kachelbreite bestimmt allein das Bild, der Text bricht
   darin um. Der Platz dafür steckt im padding-bottom der Spur. */
.nw-bilderband .gallery-caption {
  position: absolute; left: 0; top: 100%; width: 100%;
  margin: 0.45rem 0 0; padding: 0 2px;
  font-size: 0.78rem; line-height: 1.3; color: var(--tinte-soft);
  /* Zentriert und kursiv kommt vom Theme-Styling für figcaption und setzt
     sich gegen ein text-align:left hier durch. Sieht unter den
     unterschiedlich breiten Kacheln gut aus – deshalb bewusst so notiert,
     statt eine wirkungslose Regel stehen zu lassen. */
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .nw-naturstreifen .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .nw-naturstreifen .gallery-item img { height: 170px; }
  .nw-bilderband { margin: 0 -24px; }
  .nw-bilderband .gallery { padding: 6px 24px 3rem; gap: 10px; }
  .nw-bilderband .gallery-item img { height: 170px; }
}
@media (max-width: 480px) {
  .nw-naturstreifen .gallery-item img { height: 130px; }
  .nw-naturstreifen .gallery-icon a, .nw-naturstreifen .gallery-item img { border-radius: 14px; }
  .nw-bilderband .gallery { padding-bottom: 2.8rem; }
  .nw-bilderband .gallery-item img { height: 150px; }
  .nw-bilderband .gallery-caption { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-naturstreifen .gallery-item img,
  .nw-bilderband .gallery-item img { transition: none; }
  .nw-naturstreifen .gallery-icon a:hover img,
  .nw-bilderband .gallery-icon a:hover img { transform: none; }
}

/* ── Lightbox: nie über die echte Auflösung hinaus vergrößern ──
   Elementor skaliert das Bild sonst auf die Fensterhöhe hoch. Unsere Fotos
   sind teils nur 960–1280 px lang; hochgerechnet werden sie matschig.
   width/height:auto lässt das Bild in seiner Naturgröße rendern, die
   max-Angaben verkleinern es nur, wenn es sonst nicht ins Fenster passt. */
.elementor-lightbox .elementor-lightbox-image,
.elementor-lightbox .swiper-slide-image {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Blog / Tagebuch (Theme-Archiv & Einzelansicht im hellen Look) ──
   Nav + Footer kommen aus nawaki-design.php (wp_body_open/wp_footer). */
.nw-aktuell-thumb-placeholder svg { opacity: 0.7; }

.site-main { max-width: 860px; margin: 0 auto; padding: 3rem 2rem 4rem; }
.site-main a { color: var(--wald); }
.site-main .page-header .entry-title { font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; color: var(--wald-dark); margin: 0 0 2.2rem; }
.site-main article.post { background: var(--white); border-radius: 20px; box-shadow: var(--card-shadow); padding: 1.8rem 2rem; margin-bottom: 1.4rem; }
.site-main article.post .entry-title { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 600; margin: 0 0 0.6rem; }
.site-main article.post .entry-title a { color: var(--wald-dark); text-decoration: none; }
.site-main article.post .entry-title a:hover { color: var(--wald); }
.site-main article.post p { color: var(--tinte-soft); line-height: 1.8; margin: 0; }

/* Einzelbeitrag */
body.single-post .site-main article h1.entry-title { font-family: 'Fraunces', serif; font-size: clamp(2rem, 3.5vw, 2.9rem); font-weight: 600; color: var(--wald-dark); margin-bottom: 0.6rem; }
body.single-post .site-main .post-meta, body.single-post .site-main .entry-meta { color: rgba(44,58,47,0.55); font-size: 0.85rem; }
body.single-post .site-main img { border-radius: 16px; height: auto; }
body.single-post .site-main p { line-height: 1.85; color: var(--tinte); }
body.single-post .site-main .wp-block-gallery { gap: 12px; }

/* Seitennummerierung / ältere Beiträge */
.site-main .navigation, .site-main .page-numbers { font-size: 0.9rem; }
.site-main .page-numbers { color: var(--wald); padding: 0.3rem 0.7rem; border-radius: 8px; text-decoration: none; }
.site-main .page-numbers.current { background: var(--wald); color: var(--creme); }

/* ── Responsive ── */
@media (max-width: 900px) {
  html { font-size: 16px; }
  .site-nav .nav-wortmarke, .elementor .site-nav .nav-wortmarke { height: 44px !important; }
  .site-nav-brand { font-size: 1.2rem; }
  .break-section { min-height: 46vh; }
  .nw-form form { padding: 1.3rem; }
  .ablauf-steps li { padding-left: 4.6rem; }
}

/* Team-Gruppenfoto in der Wir-Sektion */
.nw-team-foto { width: 100%; max-width: 760px; margin: 0 auto 2.4rem; }
.nw-team-foto img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 40px rgba(31,61,40,0.18); }

/* ── Aktuelles-Modal (Beitrag gross auf derselben Seite, Rest unscharf) ── */
.nw-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity 0.28s ease; }
.nw-modal.is-open { opacity: 1; }
.nw-modal[hidden] { display: none; }
.nw-modal-backdrop { position: absolute; inset: 0; background: rgba(31,61,40,0.42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.nw-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto; background: var(--creme); border-radius: 22px; box-shadow: 0 30px 80px rgba(31,61,40,0.35); padding: clamp(1.6rem, 4vw, 3rem); transform: translateY(20px) scale(0.98); transition: transform 0.32s cubic-bezier(.22,.61,.36,1); -webkit-overflow-scrolling: touch; }
.nw-modal.is-open .nw-modal-dialog { transform: none; }
.nw-modal .nw-modal-close { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0 0 0.4rem auto; width: 42px; height: 42px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: var(--wald); color: var(--creme); font-size: 1.5rem; line-height: 1; box-shadow: 0 6px 18px rgba(31,61,40,0.3); transition: background 0.2s, transform 0.2s; }
.nw-modal .nw-modal-close:hover, .nw-modal .nw-modal-close:focus { background: var(--wald-dark); color: var(--creme); transform: scale(1.06); }
.nw-modal .nw-modal-close:focus-visible { outline: 3px solid rgba(233,169,75,0.85); outline-offset: 2px; }
.nw-modal-article .nw-modal-date { display: block; font-size: 0.82rem; color: rgba(44,58,47,0.55); margin-bottom: 0.3rem; }
.nw-modal-title { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 600; line-height: 1.2; color: var(--wald-dark); margin: 0 0 1.4rem; }
.nw-modal-content { font-size: 1rem; line-height: 1.85; color: var(--tinte); }
.nw-modal-content p { margin: 0 0 1.1rem; }
.nw-modal-content a { color: var(--wald); }
.nw-modal-content img { border-radius: 14px; height: auto; margin: 0.6rem 0; }
.nw-modal-content h2, .nw-modal-content h3 { font-family: 'Fraunces', serif; color: var(--wald-dark); }
body.nw-modal-active { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nw-modal, .nw-modal-dialog { transition: none; }
  .nw-modal-dialog { transform: none; }
}