/* =========================
   GLOBAL HELPERS
========================= */

/* Hero overlay gradient */
.wp-block-cover.alignfull{
    position: relative;
    overflow: hidden;
  }
  
  .wp-block-cover.alignfull::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 50%,
      rgba(0,0,0,.05) 100%
    );
    z-index: 1;
    pointer-events: none;
  }
  
  .wp-block-cover__inner-container{
    position: relative;
    z-index: 2;
  }
  
  /* =========================
     BUTTON STYLES
  ========================= */
  
  .wp-block-button.is-style-outline .wp-block-button__link{
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.75);
  }
  
  .wp-block-button.is-style-outline .wp-block-button__link:hover{
    border-color: #fff;
    background: rgba(255,255,255,.10);
  }
  
  /* Frontend */
.dreieich-cta-donation {
    color: #D7C4CC;
  }
  .dreieich-cta-donation .wp-block-heading {
    color: #FFF9EC;
  }
  
  /* Editor (Gutenberg) – hier werden Styles oft überschrieben */
  .editor-styles-wrapper .dreieich-cta-donation {
    color: #D7C4CC !important;
  }
  .editor-styles-wrapper .dreieich-cta-donation .wp-block-heading {
    color: #FFF9EC !important;
  }
  .editor-styles-wrapper .dreieich-cta-donation p {
    color: #D7C4CC !important;
  }
  
/* CTA style */
.wp-block-group.is-style-cta{
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--cta-text) !important;
  
    /* Falls WP/Theme Radius setzt: wir definieren ihn bewusst */
    border-radius: 40px !important;
    overflow: hidden; /* damit Radius sauber schneidet */
  }

  .wp-block-group.is-style-cta{
    border-radius: 0 !important;
  }

  /* Header: Inhalt in Container, nicht full-bleed */
header.wp-block-template-part .wp-block-group.alignfull > .wp-block-group__inner-container{
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--8, 2rem);
    padding-right: var(--wp--preset--spacing--8, 2rem);
  }
  
  /* Logo nicht an den Rand */
  header.wp-block-template-part .wp-block-site-logo{
    margin: 0;
  }


  /* HEADER: Full width background, but inner content as container */
header.wp-block-template-part > .wp-block-group.alignfull {
    /* optional: background comes from block settings */
  }
  
  /* This is the IMPORTANT part: create the container + side padding */
  header.wp-block-template-part > .wp-block-group.alignfull {
    padding-left: 32px;
    padding-right: 32px;
  }
  
  @media (max-width: 768px) {
    header.wp-block-template-part > .wp-block-group.alignfull {
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  
  /* Ensure header inner content doesn't stretch endlessly */
  header.wp-block-template-part > .wp-block-group.alignfull {
    box-sizing: border-box;
  }
  
  /* If the header flex row is the group itself, cap it */
  header.wp-block-template-part > .wp-block-group.alignfull.is-layout-flex {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* If there is an inner group inside (often the case), cap that instead */
  header.wp-block-template-part > .wp-block-group.alignfull > .wp-block-group__inner-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Page Hero: Bild bewusst nach unten "rausziehen" */
.dreieich-page-hero .dreieich-page-hero__media{
  overflow: hidden;
  /* der Trick: nach unten raus */
  margin-bottom: calc(var(--wp--preset--spacing--12) * -1);
}

/* Optional: ein bisschen "schwebender" Look */
.dreieich-page-hero .dreieich-page-hero__media img{
  display:block;
  width:100%;
  height:auto;
}

/* Mobile: weniger Overlap, damit es nicht zu wild wird */
@media (max-width: 781px){
  .dreieich-page-hero .dreieich-page-hero__media{
    margin-bottom: calc(var(--wp--preset--spacing--8) * -1);
  }
}

/* Sticky Tabs: bleibt erst sticky, wenn die Leiste erreicht wird */
.sectionTabs{
  position: sticky !important;
  top: 120px !important; /* testweise – später feinjustieren */
  z-index: 9999 !important;
}

.admin-bar .sectionTabs{
  top: calc(120px + 32px); /* 32px Adminbar Desktop */
}
@media (max-width: 782px){
  .admin-bar .sectionTabs{ top: calc(120px + 46px); } /* Adminbar Mobile */
}

/* =========================
   CI-Submenüs (Block Navigation)
   ========================= */

/* Submenu-Container allgemein */
.wp-block-navigation .wp-block-navigation__submenu-container{
  /* CI: nutze WP Preset-Farben (fallbacks sind absichtlich neutral) */
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 12%, transparent);
  border-radius: 14px;
  padding: 10px;
  min-width: 220px;

  /* “Card”-Look */
  box-shadow:
    0 10px 25px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.06);

  /* ruhiger Abstand zur Hauptnav */
  /* margin-top: 10px; */

  /* verhindert, dass Rundungen “ausfransen” */
  overflow: hidden;
}

/* Submenu-Links: mehr Luft, nicer Typo */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1.2;
  font-weight: 500;
}

/* Hover/Active */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background: color-mix(in srgb, var(--wp--preset--color--primary, #6b2c7a) 10%, transparent);
}

/* Fokus (a11y) */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--wp--preset--color--primary, #6b2c7a) 55%, transparent);
  outline-offset: 2px;
}

/* Optional: kleine Trennlinien zwischen Items (dezent) */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item{
  margin: 2px 0;
}

/* =========================
   CTA-Link "Spende" (deine Klasse am <li>: ctaLink)
   ========================= */

.wp-block-navigation .wp-block-navigation-item.ctaLink > a.wp-block-navigation-item__content{
  background: var(--wp--preset--color--primary, #6b2c7a);
  color: var(--wp--preset--color--base, #fff);
  border-radius: 999px;          /* Pille */
  padding: 10px 48px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #6b2c7a) 80%, #000);
}

.white {
  color: white!important
}

/* CTA Hover */
.wp-block-navigation .wp-block-navigation-item.ctaLink > a.wp-block-navigation-item__content:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* CTA Fokus (a11y) */
.wp-block-navigation .wp-block-navigation-item.ctaLink > a.wp-block-navigation-item__content:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 40%, transparent);
  outline-offset: 3px;
}

/* Optional: etwas Abstand links/rechts, damit CTA “separat steht” */
.wp-block-navigation .wp-block-navigation-item.ctaLink{
  margin-left: 10px;
}



/* Buttons optisch konsistent */
.sectionTabs .wp-block-button__link {
  border-width: 2px;
  transition: transform .08s ease, background-color .15s ease, color .15s ease;
}

/* Active State (kommt gleich per JS als Klasse) */
.sectionTabs a.is-active {
  background: var(--wp--preset--color--primary, #6b2b3b);
}

.sectionTabsWrap{
  position: sticky;
  top: 24px;      /* anpassen */
  z-index: 9999;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.terminTab:nth-child(even) {
  background: #FCF8EF;
}


.terminTab {
  padding: 1rem
}
.infoBox1 {
  background: #743050;
  color: #FAEAC9;
  padding: 3rem;
  border-radius: 12px;
}

.infoBox1 h3 {
  
  color: #FAEAC9!important;
 
}
.infoBox2 {
  background: #E3A42E;
  color: #231F20;
  padding: 3rem;
  border-radius: 12px;
}

.infoBox2 h3 {
  
  color: #231F20!important;
 
}

.sectionTabs a.is-active.wp-block-button__link {
  background: var(--wp--preset--color--primary, #6b2b3b) !important;
  color: #fff !important;
  border-color: transparent !important;
}


.terminBox {
  position: sticky;
  top: 120px;        /* Abstand nach oben – Header + Luft */
  z-index: 20;
}



/* Optional: leichtes Feedback */
.sectionTabs a.is-active:hover {
  transform: translateY(-1px);
}

/* Sticky killt, wenn ein Parent overflow setzt – hier gezielt neutralisieren */
.wp-site-blocks,
.entry-content,
.wp-block-post-content,
.wp-block-group,
.wp-block-group__inner-container {
  overflow: visible;
}


/* sorgt dafür, dass #anker nicht unter sticky Header/Tabs verschwinden */
:where(#offener-betrieb, #kleinkindtreff, #tiere) {
  scroll-margin-top: 140px; /* anpassen: Header + Tabs Höhe */
}


  
  /* Entfernt das Standard-Overlay/Gradient beim Cover-Block nur für customHero */
.wp-block-cover.customHero::before {
  content: none !important;
}

.wp-block-cover.customHero h1 {
  color: #793550!important;
}
.wp-block-cover.customHero  {
  background: #ECC983
}

/* Sicherheitshalber: falls das Theme das Overlay anders injiziert */
.wp-block-cover.customHero .wp-block-cover__background {
  display: none !important;
}

  
  /* Padding muss auf inner container */
  .wp-block-group.is-style-cta > .wp-block-group__inner-container{
    padding: clamp(6rem, 8vw, 12rem) var(--wp--preset--spacing--8) !important;
  }

  /* =========================
   MOBILE HEADER / NAV COMPACT
   ========================= */
@media (max-width: 782px){
  
    /* 1) Header-Wrapper: weniger vertikales + horizontales Padding */
    header.wp-block-template-part,
    .wp-block-template-part .site-header,
    .wp-block-template-part .wp-block-group.alignfull{
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
  
    /* Falls der Padding direkt an deiner Header-Group hängt (wie im Screenshot) */
    header.wp-block-template-part .wp-block-group.is-layout-constrained{
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  
    /* 2) Layout im Header: weniger gap, keine unnötige Höhe */
    header.wp-block-template-part .wp-block-group.is-layout-flex{
      gap: 10px !important;
      min-height: unset !important;
    }
  
    /* 3) Logo kleiner + sauber skalieren */
    .wp-block-site-logo img,
    .custom-logo-link img{
      width: 120px !important;  /* stell hier ruhig 96–140 ein */
      height: auto !important;
      max-width: 100% !important;
    }
  
    /* Falls der Logo-Block selber eine fixe Breite/Spacing hat */
    .wp-block-site-logo{
      margin: 0 !important;
    }
  
    /* 4) Menü-Button (Hamburger): kompakter */
    .wp-block-navigation__responsive-container-open{
      padding: 6px 8px !important;
      border-radius: 10px;
    }
  
    /* 5) Falls der Header rechts/links “auseinanderzieht”: weniger Space */
    header.wp-block-template-part .is-content-justification-space-between{
      justify-content: space-between !important;
    }
  }
  
  /* =========================================
   MOBILE: Header nicht zentrieren + Logo kompakt
   ========================================= */
@media (max-width: 782px){
  
    /* Theme-Regel killen, die das Logo auf Mobile zentriert */
    .wp-site-blocks .site-header .wp-block-site-logo,
    .wp-site-blocks .wp-block-template-part .wp-block-site-logo{
      flex-basis: auto !important;
      text-align: left !important;
      margin: 0 !important;
    }
  
    /* Falls der Header-Row-Container auch center erzwingt */
    .wp-site-blocks .site-header,
    .wp-site-blocks .wp-block-template-part .site-header,
    .wp-site-blocks .wp-block-template-part header{
      text-align: left !important;
    }
  
    /* Logo-Größe (Mobile) */
    .wp-block-site-logo img,
    .custom-logo-link img{
      width: 115px !important;
      height: auto !important;
    }
  
    /* Header Padding kompakter (falls noch zu groß) */
    header.wp-block-template-part .wp-block-group.is-layout-constrained{
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }
  
  .bigH1 {
    font-size: 100px;
    font-style: normal;
    font-weight: 500;
    line-height: 0.9;
    text-transform: none;
    color: #f7ecca
  }
     .hell {
      color: #f7ecca;
      letter-spacing: 2px
    }
    .heroNew {
      display: flex;
      align-items: center
    }

    .dataRed {
      background: #ECC983;
      padding: 1rem 
    }

  /* =========================================
     MOBILE: Overlay-Menü (Navigation Drawer) schöner
     ========================================= */
  @media (max-width: 782px){

    :root{
      --mobile-content-padding: 18px;
    }

    
  /* Full width = wirklich full width */
  .wp-block-cover.alignfull,
  .wp-block-group.alignfull{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  



    h1,
    .wp-block-heading h1,
    h1.wp-block-heading, .bigH1{
      font-size: clamp(
        34px,        /* Minimum: kleine Phones */
        7vw,         /* fluid scaling */
        38px         /* Hard Cap */
      ) !important;
  
      line-height: 1.05 !important;
      letter-spacing: -0.01em;
    }

 
      /* Navigation-Block im Header: rechts ausrichten */
  header .wp-block-navigation,
  header nav.wp-block-navigation,
  header .wp-block-navigation.wp-container-content{
    justify-content: flex-end !important;
  }

  /* Falls das Flex auf einem Wrapper sitzt (kommt bei Blockbase oft vor) */
  header .wp-block-navigation__responsive-container-open{
    margin-left: auto !important; /* drückt den Button nach rechts */
  }

  /* Optional: wenn irgendein Center-Text/Align reinfunkt */
  header nav.wp-block-navigation{
    text-align: right !important;
  }
  
    /* Overlay Hintergrund + Grundlayout */
    .wp-block-navigation__responsive-container.is-menu-open{
      background: var(--wp--preset--color--tertiary, #f6f0dc) !important; /* notfalls beige fallback */
    }
  
    /* Inhalt linksbündig und mit ordentlich Padding */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content{
      padding: 22px 18px 26px !important;
      align-items: stretch !important;
      text-align: left !important;
    }
  
    /* Close-Button oben rechts, etwas „wertiger“ */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close{
      position: absolute !important;
      top: 12px !important;
      right: 12px !important;
      padding: 10px 12px !important;
      border-radius: 12px !important;
      background: color-mix(in srgb, var(--wp--preset--color--base, #fff) 75%, transparent) !important;
    }
  
    /* Ganze Liste: linksbündig, keine komischen Auto-Zentrierungen */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{
      width: 100% !important;
      justify-content: flex-start !important;
      align-items: stretch !important;
      gap: 10px !important;
    }
  
    /* Top-Level Menüpunkt */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content{
      display: block;
      width: 100%;
      padding: 14px 14px !important;
      border-radius: 14px !important;
      background: var(--wp--preset--color--base, #fff) !important;
      border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 10%, transparent);
      text-align: left !important;
      font-weight: 600;
    }
  
    /* Hover/Focus (Touch-friendly) */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:focus-visible{
      outline: 3px solid color-mix(in srgb, var(--wp--preset--color--primary, #6b2c7a) 55%, transparent);
      outline-offset: 2px;
    }
  
    /* Submenu-Container: NICHT als fette weiße Card, sondern sauber eingerückt */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 6px 0 0 0 !important;
      margin: 0 !important;
      border-radius: 0 !important;
    }
  
    /* Submenu Items: eingerückt + etwas kleiner */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
      background: color-mix(in srgb, var(--wp--preset--color--base, #fff) 55%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 8%, transparent);
      padding: 12px 14px !important;
      border-radius: 12px !important;
      margin: 8px 0 0 18px !important; /* Einrückung */
      font-weight: 500;
    }
  
    /* CTA "Spende" auch im Mobile-Menü als Pill-Button */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.ctaLink > a.wp-block-navigation-item__content{
      background: var(--wp--preset--color--primary, #6b2c7a) !important;
      color: var(--wp--preset--color--base, #fff) !important;
      border-radius: 999px !important;
      border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #6b2c7a) 80%, #000) !important;
      box-shadow: 0 10px 22px rgba(0,0,0,.14) !important;
      text-align: center !important; /* CTA darf mittig sein, Rest nicht */
    }
  }
  
  
  /* Textfarben im CTA */
  .wp-block-group.is-style-cta :is(h1,h2,h3,h4,h5,h6){
    color: var(--wp--preset--color--surface) !important;
  }

  .wp-block-group.is-style-cta p{
    color: var(--wp--preset--color--cta-text) !important;
  }