/* ===== Footer Compact Premium ===== */
.site-footer {
  background: #0F3824;
  color: rgba(255,255,255,.9);
  font-family: "Inter", system-ui, sans-serif;
}

.site-footer .footer-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.footer-inner > * { margin: 8px 0; }

.footer-logo {
  width: 200px;
  max-width: 45vw;
  height: auto;
  margin: 4px auto 10px;
  display: block;
}

/* Claim */
.footer-claim {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.75);
}

/* Footer-Navigation */
.footer-nav {
  font-size: 14px;
  display: flex;
  gap: 18px; /* Abstand zwischen Impressum / Datenschutz */
  justify-content: center;
}

.footer-nav a {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: all .25s ease;
  padding: 2px 4px;
}

.footer-nav a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* Copyright */
.footer-copy {
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* Mobile */
@media (max-width: 480px) {
  .footer-logo { width: 180px; }
  .footer-claim, .footer-nav { font-size: 13.5px; }
}

/* ================================
   GLOBAL
================================ */
.wpcf7 form,
.wpcf7 form * {
  font-family: "Inter", sans-serif !important;
}

/* Feldabstand global steuerbar */
.wpcf7 { --field-gap: 0px; }

/* ================================
   LABELS
================================ */
.wpcf7 form label {
  display: block !important;
  margin: 0 0 calc(var(--field-gap) / 2) !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.88) !important;
  letter-spacing: .1px;
}

/* ================================
   FELD-ABSTÄNDE
================================ */
.wp-block-contact-form-7-contact-form-selector,
.wp-block-contact-form-7-contact-form-selector .wpcf7 {
  --wp--style--block-gap: 0 !important;
}

.wpcf7 form p,
.wpcf7 .wpcf7-form-control-wrap {
  margin: 0 0 var(--field-gap) !important;
  padding: 0 !important;
}

/* ================================
   FELDER (Input / Select / Textarea)
================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100% !important;
  background: #1c4732 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #fff !important;
  margin: 0 !important;
  transition: border-color .15s ease;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: rgba(255,255,255,.6) !important;
  outline: none !important;
}

/* Textarea kompakter */
.wpcf7 textarea {
  height: 130px !important;
  resize: none !important;
}

/* ================================
   AUTOFILL FIX
================================ */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #1c4732 inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* ================================
   DROPDOWN + PFEIL FIX
================================ */
.wpcf7 select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #1c4732 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 40px !important;
  color-scheme: dark;
}

/* Dropdown Optionen */
.wpcf7 select option {
  background: #1c4732 !important;
  color: #fff !important;
}

.wpcf7 select option:hover {
  background: #0f3824 !important;
  color: #fff !important;
}

/* ================================
   CHECKBOX - Erfolgsgrün
================================ */
.wpcf7-acceptance .wpcf7-list-item {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.wpcf7-acceptance input[type="checkbox"] {
  margin: 0 !important;
  accent-color: #8ee88b !important; /* Erfolgsgrün */
}

.wpcf7-acceptance input[type="checkbox"]:focus {
  outline: 2px solid #1c4732 !important;
  outline-offset: 2px;
}

/* ================================
   VALIDATION / RESPONSE
================================ */
.wpcf7-not-valid-tip {
  color: #ff6b6b !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  border-color: #ff6b6b !important;
}

.wpcf7-response-output {
  font-size: 14px !important;
  text-align: center !important;
  margin: 16px auto !important;
}

/* ================================
   BUTTON
================================ */
.wpcf7 .wpcf7-submit {
  background: #d66b35 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 32px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
  margin: 18px auto 0 auto !important;
  transition: all .2s ease !important;
}

.wpcf7 .wpcf7-submit:hover {
  transform: scale(1.04) !important;
  opacity: .92 !important;
}

/* ===== FIX: Dropdown-Pfeil verschwunden (Extendable Theme override) ===== */
.wpcf7 select {
  background-color:#1c4732 !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:14px !important;
  padding-right:40px !important;
  border-radius:12px !important;
}

/* Strong override for mobile WebKit browsers (Safari / iOS) */
select.wpcf7-select::-ms-expand { display:none !important; }
select.wpcf7-select::-webkit-inner-spin-button,
select.wpcf7-select::-webkit-calendar-picker-indicator {
  opacity:0 !important;
}

/* Force arrow visibility above theme utility classes */
.wpcf7 select {
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  z-index:1 !important;
  position:relative !important;
}

.kontakt-box svg {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  display: block;
}
@media (max-width: 768px) {
  .kontakt-box svg { width: 22px !important; height: 22px !important; }
}
.kontakt-box .is-nowrap { gap: 10px; align-items: flex-start; }

/* 💡 Pulsierende Text-Animation (Desktop & Mobil) */
.attention-text {
  display: inline-block;
  animation: pulseAttention 3s ease-in-out infinite;
  transform-origin: center;
}

/* Standard-Puls-Effekt */
@keyframes pulseAttention {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* 📱 Etwas sanfter auf Mobilgeräten */
@media (max-width: 768px) {
  .attention-text {
    animation: pulseAttentionMobile 3s ease-in-out infinite;
  }

  @keyframes pulseAttentionMobile {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.04);
    }
  }
}

/* 💤 Wird vom JS getriggert: pausiert Animation außerhalb Sichtbereich */
.attention-text.paused {
  animation-play-state: paused;
}

/* --- GILT FÜR SLIDE 2,3,4 (und weitere) beim Aktivwerden --- */
.n2-ss-slide:not(:first-child).n2-ss-slide-active .n2-ss-layers-container img {
  opacity: 0;
  transform: translateY(-30px) scale(1.03);
  animation: slideImageDown 1.2s ease-out forwards;
  animation-delay: 0.15s;
}

.n2-ss-slide:not(:first-child).n2-ss-slide-active .n2-ss-text {
  opacity: 0;
  transform: translateY(30px);
  animation: slideTextUp 1.2s ease-out forwards;
  animation-delay: 0.30s;
}

/* --- SLIDE 1: bleibt bis zum Scroll-Start unsichtbar, wird per JS animiert --- */
.n2-ss-slide:first-child .n2-ss-layers-container img { opacity: 0; transform: translateY(-40px) scale(1.05); }
.n2-ss-slide:first-child .n2-ss-text { opacity: 0; transform: translateY(40px); }

/* --- Keyframes (wie zuvor) --- */
@keyframes slideTextUp {
  0% { opacity: 0; transform: translateY(40px); }
  60% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideImageDown {
  0% { opacity: 0; transform: translateY(-40px) scale(1.05); }
  60% { opacity: 1; transform: translateY(6px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animation von Text und Button */
.anima h1,
.anima .wp-block-buttons {
  opacity: 0;
  transform: translateY(40px);
  animation: heroSlideIn 2s ease-out forwards;
}

.anima .wp-block-buttons {
  animation-delay: 0.3s;
}

@keyframes heroSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
a:focus,
a:focus-visible,
a:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

.site-logo a:focus,
.site-logo a:focus-visible,
.site-logo a:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
/* --------- Hamburger-Button -------- */
button.wp-block-navigation__responsive-container-open {
  width: 55px; /* 🔹 Hamburger-Kreisgröße */
  height: 55px;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* Hamburger Striche – verlängert über Transform-Skalierung */
button.wp-block-navigation__responsive-container-open svg {
  transform: scaleX(1.6); /* 🔹 verlängert die Striche horizontal */
}
button.wp-block-navigation__responsive-container-open svg rect {
  height: 7px !important; /* leicht dicker */
}

/* Hover-Effekt Hamburger */
button.wp-block-navigation__responsive-container-open:hover {
  background-color: rgba(255,255,255,0.1);
  transform: scale(1.05);
}

/* -------- X-Button (Menü schließen) -------- */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
  color: #ffffff !important;
  border: none !important;
  background: transparent !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* X-SVG-Stil */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close svg * {
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 1px !important; /* 🔹 dünnere Linien */
}

/* 🔹 X-Größe hier anpassen */
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close svg {
  width: 35px !important;  /* ← hier vergrößerst du das X */
  height: 35px !important;
}

/* -------- Menü rechts -------- */
.wp-block-navigation__responsive-container {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  height: 100vh !important;
  width: 80% !important;
  max-width: 300px !important;
  background-color: #0F3824 !important;
  transform: translateX(100%) !important;
  transition: transform 0.4s ease !important;
  z-index: 10002 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 20px;
}

/* Menü offen */
.wp-block-navigation__responsive-container.is-menu-open {
  transform: translateX(0) !important;
}

/* -------- Unterpunkte -------- */
.wp-block-navigation__responsive-container ul {
  list-style: none;
  margin: 0;
  padding: 70px 10px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center !important; /* 🔹 Zentriert */
  justify-content: center !important;
  text-align: center !important;
  border-top: none !important;
}

/* 🔹 Links/Unterpunkte – ersetzt den alten Abschnitt */
.wp-block-navigation__responsive-container ul li,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container li {
  border: none !important; /* Trennlinien entfernt */
}
.wp-block-navigation__responsive-container ul li::before,
.wp-block-navigation__responsive-container ul li::after {
  content: none !important;
}
.wp-block-navigation__responsive-container ul li a,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container a {
  display: block;
  padding: 16px 0;
  text-decoration: none !important;
  color: #ffffff !important;
  font-size: 1.3em !important; /* 🔹 Textgröße hier ändern */
  text-align: center !important;
  border: none !important;
}

/* Hover-Effekt Unterpunkte */
.wp-block-navigation__responsive-container a:hover,
.wp-block-navigation__responsive-container a:focus {
  border: none !important;
  text-decoration: none !important;
}

/* -------- Overlay abdunkeln -------- */
body.menu-overlay-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(1px);
  z-index: 10000 !important;
}

/* -------- Responsive Anpassungen -------- */
@media (max-width: 1024px) {
  button.wp-block-navigation__responsive-container-open {
    width: 50px;
    height: 50px;
  }
  .wp-block-navigation__responsive-container {
    width: 70%;
    max-width: 280px;
  }
}
@media (max-width: 768px) {
  button.wp-block-navigation__responsive-container-open {
    width: 50px;
    height: 50px;
  }
  .wp-block-navigation__responsive-container {
    width: 85%;
    max-width: 320px;
  }
}

/* --- Mobile Menü: Text wirklich mittig zentrieren & dünner darstellen --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: center;        /* 🔹 horizontale Zentrierung */
  justify-content: flex-start;
  width: 100%;
  padding: 70px 0 0 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
  width: 100%;
  text-align: center !important;
  display: flex;
  justify-content: center !important;   /* 🔹 zentriert den gesamten Link */
}

.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
  display: inline-block;                /* 🔹 verhindert Stretch-Effekt */
  text-align: center !important;
  font-weight: 400 !important;          /* dünnerer Text */
  font-size: 1.2em !important;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  border: none !important;
  width: auto !important;               /* 🔹 verhindert, dass WP 100 % erzwingt */
}

/* --- Mobile Menü Extendable: Links horizontal zentrieren --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 70px 0 0 0 !important;
}

/* Jeder Menüpunkt mittig ausgerichtet */
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;     /* horizontal zentriert */
}

/* Innerer Link (der eigentliche Text) */
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
  display: flex !important;               /* flex-Layout aktiv lassen */
  justify-content: center !important;     /* 🔹 Text horizontal zentrieren */
  align-items: center !important;
  width: auto !important;
  text-align: center !important;
  font-weight: 400 !important;
  font-size: 1.2em !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  border: none !important;
}

/* --- WP Extendable Mobile: Links wirklich mittig --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  justify-content: center !important;            /* 🔹 UL-Inhalt zentrieren */
  align-items: center !important;
  text-align: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
  width: 100% !important;                        /* 🔹 Li füllt die Breite */
  display: block !important;
}

.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
  display: block !important;                     /* 🔹 Block = volle Breite */
  width: 100% !important;                        /* 🔹 Link füllt die Breite */
  text-align: center !important;                 /* 🔹 Text zentrieren */
  margin: 0 auto !important;
  font-weight: 400 !important;
  font-size: 1.2em !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  border: none !important;
  padding-left: 0 !important;                    /* 🔹 evtl. links-Padding killen */
}

/* 🔹 Falls das Label separat gestylt ist, ebenfalls zentrieren */
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content .wp-block-navigation-item__label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* --- Einheitliche Schriftgröße & Schriftstärke der Menü-Links --- */
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container ul li a,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container a {
  font-size: 1.6em !important;    /* ← 🔹 hier änderst du die Größe */
  font-weight: 300 !important;    /* ← 🔹 hier änderst du die Dicke (z. B. 300 = feiner, 500 = kräftiger) */
  letter-spacing: 0.3px !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* --- 🔹 Logo im mobilen Menü vergrößern & Linie darunter entfernen --- */

/* Logo-Bild (IMG) im geöffneten Menü */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  width: 150px !important;       /* ← 🔹 hier änderst du die Logo-Breite */
  height: auto !important;       /* ← 🔹 behält das Seitenverhältnis bei */
  max-width: none !important;    /* ← 🔹 überschreibt Theme-Begrenzungen */
  max-height: none !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;     /* ← 🔹 verhindert Zusammendrücken durch Flexbox */
  margin-right: 12px !important; /* ← 🔹 Abstand zum X-Button */
}

/* 🔹 Trennlinie (Border, HR oder Separator) unterhalb des Logos entfernen */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo + hr,
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo + .wp-block-separator {
  display: none !important;
  border: none !important;
  height: 0 !important;
}

/* --- 🔹 Linie zwischen Logo und Menü-Links vollständig entfernen --- */

/* Entfernt echtes <hr> oder .wp-block-separator unter dem Logo */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo + hr,
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo + .wp-block-separator {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Entfernt evtl. Theme-generierte Linie als Border oder Pseudoelement */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo {
  border-bottom: none !important;        /* 🔹 falls Border verwendet wird */
}
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo::after,
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo::before {
  content: none !important;              /* 🔹 falls ::before/::after genutzt wird */
}

/* --- 🔹 Logo im mobilen Menü mittig & größer über den Links darstellen --- */

/* Logo-Bereich mittig ausrichten */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo {
  display: flex !important;
  justify-content: center !important;   /* 🔹 horizontale Zentrierung */
  align-items: center !important;
  width: 100% !important;
  margin: 30px auto 20px auto !important; /* 🔹 Abstand oben/unten */
  border: none !important;
}

/* Logo selbst vergrößern */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  width: 180px !important;       /* ← 🔹 hier änderst du die Logo-Breite */
  height: auto !important;       /* ← 🔹 behält das Seitenverhältnis bei */
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* 🔹 Abstand zwischen Logo und den Menü-Links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  margin-top: 10px !important;   /* ← 🔹 optional anpassen */
}

/* --- 🔹 Logo im mobilen Menü in den Link-Bereich verschieben & zentrieren --- */

/* Ursprüngliches Logo oben (neben dem X) unsichtbar machen */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo {
  position: absolute !important;
  top: 100px !important;        /* ← 🔹 Abstand von oben, ggf. anpassen */
  left: 50% !important;
  transform: translateX(-50%) !important; /* 🔹 horizontal exakt mittig */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  border: none !important;
  z-index: 10003 !important;
}

/* Logo selbst vergrößern */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  width: 180px !important;      /* ← 🔹 hier änderst du die Logo-Breite */
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* 🔹 etwas mehr Abstand oberhalb der Menü-Links schaffen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  margin-top: 180px !important; /* ← 🔹 verschiebt die Links weiter nach unten */
}

/* --- 🔹 Logo im mobilen Menü exakt mittig über den Links platzieren --- */

/* Logo-Container frei positionieren und zentrieren */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo {
  position: absolute !important;
  top: 90px !important;               /* ← 🔹 Abstand vom oberen Bildschirmrand */
  left: 50% !important;
  transform: translateX(-50%) !important;  /* ← 🔹 horizontal exakt mittig */
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 10003 !important;
  border: none !important;
}

/* Logo-Bild selbst */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  width: 180px !important;            /* ← 🔹 Logo-Größe */
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Abstand zwischen Logo und Menülinks */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  margin-top: 200px !important;       /* ← 🔹 nach Bedarf anpassen */
}

/* --- 🔹 Logo im mobilen Menü absolut zentrieren, unabhängig vom X-Button --- */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo {
  position: absolute !important;
  top: 100px !important;              /* ← 🔹 Abstand von oben anpassen */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  z-index: 10003 !important;
}

/* 🔹 Logo-Bild exakt mittig zentrieren */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  display: block !important;
  margin: 0 auto !important;
  width: 180px !important;            /* ← 🔹 Größe */
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* 🔹 Platz für die Menülinks schaffen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  margin-top: 220px !important;       /* ← 🔹 Abstand der Links nach unten */
}

/* --- 🔹 Logo im mobilen Menü größer & näher an den Links --- */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  display: block !important;
  margin: 0 auto !important;
  width: 220px !important;        /* ← 🔹 Logo-Größe – vorher 180px */
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo {
  top: 90px !important;           /* ← 🔹 optional: minimal höher oder tiefer positionieren */
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  margin-top: 120px !important;   /* ← 🔹 verringert Abstand zwischen Logo & Links (vorher 220px) */
}

/* --- 🔹 Sanftes Einblenden des mobilen Menüs & der Links --- */

/* Menü selbst – Fade-In-Effekt */
.wp-block-navigation__responsive-container.is-menu-open {
  opacity: 0;
  animation: fadeInMenu 0.4s ease forwards;  /* ← 🔹 Dauer & Kurve */
}

/* Unterpunkte / Links – leichter Fade & Slide-Effekt */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInLinks 0.5s ease forwards;
  animation-delay: 0.3s;                    /* ← 🔹 zeitlich nach Menü */
}

/* Keyframes für die Animationen */
@keyframes fadeInMenu {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInLinks {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 🔹 Sanftes Einblenden von Menü, Logo und Links --- */

/* Menücontainer – weiches Einblenden */
.wp-block-navigation__responsive-container.is-menu-open {
  opacity: 0;
  animation: fadeInMenu 0.4s ease forwards;  /* ← 🔹 Dauer des Fade-In */
}

/* Logo – leicht verzögert einblenden */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInLogo 0.6s ease forwards;
  animation-delay: 0.2s;                    /* ← 🔹 startet kurz nach Menü */
}

/* Menülinks – sanfter Fade + kleiner Slide von unten */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInLinks 0.6s ease forwards;
  animation-delay: 0.4s;                    /* ← 🔹 startet nach Logo */
}

/* --- Keyframes für Animationen --- */
@keyframes fadeInMenu {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInLogo {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLinks {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 🔹 Sanftes Einblenden von Menü, Logo & gestaffelten Links --- */

/* Menü selbst – Fade-In */
.wp-block-navigation__responsive-container.is-menu-open {
  opacity: 0;
  animation: fadeInMenu 0.4s ease forwards;
}

/* Logo – leicht von oben mit sanftem Fade */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInLogo 0.6s ease forwards;
  animation-delay: 0.2s;
}

/* Menülinks – sanfter Fade + Bewegung, nacheinander versetzt */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInLinks 0.6s ease forwards;
}

/* Zeitliche Staffelung der einzelnen Links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li:nth-child(1) {
  animation-delay: 0.4s;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li:nth-child(2) {
  animation-delay: 0.55s;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li:nth-child(3) {
  animation-delay: 0.7s;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li:nth-child(4) {
  animation-delay: 0.85s;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li:nth-child(5) {
  animation-delay: 1.0s;
}

/* --- Keyframes --- */
@keyframes fadeInMenu {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInLogo {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLinks {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 🔹 Sanftes Ausblenden des mobilen Menüs beim Schließen --- */

/* Zustand: Menü wird geschlossen */
body.menu-overlay-active.closing .wp-block-navigation__responsive-container {
  animation: fadeOutMenu 0.35s ease forwards;   /* ← 🔹 sanftes Ausblenden */
}

/* --- Keyframes für das Ausblenden --- */
@keyframes fadeOutMenu {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

/* --- 🔹 Vollständig synchronisiertes Ein- & Ausblenden von Menü, Logo, Links & Overlay --- */

/* Overlay (der dunkle Hintergrund) – sanft ein-/ausblenden */
body.menu-overlay-active::before {
  opacity: 0;
  transition: opacity 0.35s ease;
}
body.menu-overlay-active::before {
  opacity: 1;
}

/* Menü – Fade-In + Fade-Out */
.wp-block-navigation__responsive-container {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.wp-block-navigation__responsive-container.is-menu-open {
  opacity: 1;
  transform: translateY(0);
}
body.menu-overlay-active.closing .wp-block-navigation__responsive-container {
  opacity: 0;
  transform: translateY(10px);
}

/* Logo – synchrones Ein-/Ausblenden */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
}
body.menu-overlay-active.closing .wp-block-navigation__responsive-container .site-logo-title.wp-block-site-logo img {
  opacity: 0;
  transform: translateY(-10px);
}

/* Links – sanft einblenden & beim Schließen leicht nach unten ausblenden */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
}
body.menu-overlay-active.closing .wp-block-navigation__responsive-container .wp-block-navigation__container li {
  opacity: 0;
  transform: translateY(10px);
}

/* --- 🔹 Ruhiges Ein- & Ausblenden von Menü, Overlay, Logo & Links --- */

/* Overlay sanft ein-/ausblenden */
body.menu-overlay-active::before {
  opacity: 1;
  transition: opacity 0.5s ease;
}
body.closing::before {
  opacity: 0;
}

/* Menü – sanft einblenden */
.wp-block-navigation__responsive-container {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wp-block-navigation__responsive-container.is-menu-open {
  opacity: 1;
  transform: translateY(0);
}
body.closing .wp-block-navigation__responsive-container {
  opacity: 0;
  transform: translateY(15px);
}

/* Logo – weich von oben */
.wp-block-navigation__responsive-container.is-menu-open .site-logo-title.wp-block-site-logo img {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body.closing .wp-block-navigation__responsive-container .site-logo-title.wp-block-site-logo img {
  opacity: 0;
  transform: translateY(-10px);
}

/* Links – sanft von unten */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body.closing .wp-block-navigation__responsive-container .wp-block-navigation__container li {
  opacity: 0;
  transform: translateY(10px);
}