/*
Theme Name: Leichtmeisterei-Theme
Theme URI: 
Author: Leichtmeisterei - Historisches Fechten Kassel e.V.
Author URI: 
Description: Dieses Leichtmeisterei Theme ist ein child theme von twenty twenty-five
Requires at least: 6.8.3
Tested up to: 6.8.3
Requires PHP: 8.2.27
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: leichtmeisterei-theme
Update URI: https://leichtmeisterei.de/leichtmeisterei-theme
Tags: 
*/

:root{
  --weiss: rgba(255,255,255,0.9);
  --gold: #F2C560;
  --violettDark: #100231;
  --violettLight: #5916AB;

  --illu: url("/wp-content/uploads/2025/10/lhfBackground_1.svg");
  --illu-opacity: .1;                    /* 10 % Deckkraft */
  --illu-size: min(2400px, 95vw);        /* Breite der Zeichnung */
  --illu-pos: center 15vh;               /* Position (x y) */

  --text-opacity: .85;

  --mobile-gutter: clamp(16px, 4vw, 22px);
}

* {
  box-sizing: border-box;
}

html, body{
  margin:0;
  padding:0;
  background-color: var(--violettDark); 
  min-height:100%;
}

main{
  opacity: 1 !important;
  transition: none !important;
}


/* Seite ist bereit → einblenden */
body.content-ready main{
  opacity: 1;
}

/* Beim Verlassen → ausblenden */
body.content-fadeout main{
  opacity: 0;
}

body::before{
  content:"";
  position: fixed;                       
  inset: 0;
  background: var(--illu) no-repeat var(--illu-pos) / var(--illu-size);
  pointer-events: none;
  z-index: 0;   
  opacity: 0;                          
  transition: opacity 2000ms ease; 
}

/* Ausgangszustand: Hintergrund unsichtbar */
body::before{
  opacity: 0; 
  
}

/* Wenn die Seite bereit ist → Illu einblenden */
body.bg-illu-ready::before{
  opacity: var(--illu-opacity);
}

/* Beim Verlassen der Seite (Klick auf internen Link) → ausblenden */
body.bg-illu-fadeout::before{
  opacity: 0;
  transition-duration: 100ms; 
}

/* Seite bereit → Text & SVGs leicht abdunkeln */
body.content-ready main .wp-block-group.alignfull.has-global-padding
  :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, span, a, svg) {
  opacity: var(--text-opacity) !important;
  transition-duration: 1500ms;
}

/* Beim Verlassen → ebenfalls dämpfen */
body.content-fadeout main .wp-block-group.alignfull.has-global-padding
  :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, span, a, svg) {
  opacity: var(--text-opacity) !important;
  transition-duration: 50ms;
}


/* JPG/JPEG immer voll deckend */
main img[src*=".jpg"],
main img[src*=".jpeg"] {
  opacity: 1 !important;
}


h1,h2,h3{ text-wrap: balance; }

.socialMediaIcon {
  width: 2em;
  height: 2em;
  
  stroke-width: 0.1em;
}


p, .wp-block-paragraph{ hyphens:auto; }

.wp-site-blocks{ position: relative; z-index: 1; }

p, /* Blocksatz in allen Textabschnitten */
.wp-block-paragraph {
  text-align: justify;
  text-justify: inter-word;
}

/* Menü größer Top-Level */
.wp-block-navigation__container > .wp-block-navigation-item > a{
  font-size: clamp(16px, 1.2vw, 20px);
  padding: .35rem .6rem;
  line-height: 1.2;
}

/* Submenü Dekoration */
.wp-block-navigation__submenu-container{
  background: var(--violettDark) !important;
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: none !important;
  padding: .35rem; 
}

/* Menu Hover: Farbwechsel ohne Unterstreichung */
.wp-block-navigation a,
.wp-block-navigation span {
  color: var(--weiss);
  text-decoration: none;                /* verhindert Unterstreichung im Normalzustand */
  transition: color 0.2s ease;
}

.wp-block-navigation a:hover,
.wp-block-navigation span:hover,
.wp-block-navigation__submenu-container a:hover {
  color: var(--gold);
  text-decoration: none !important;     /* verhindert Unterstreichung beim Hover */
}
/* END Menu Mouse Over */

/* Goldene Linie unter dem Menü */
.wp-block-template-part {
  position: relative; 
  padding-bottom: 0.5rem; 
}
.wp-block-template-part::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; 
  width: 100%;
  height: 2px; 
  background-color: var(--gold);
}
/* END Goldene Linie unter dem Menü */

/* SITE-LOGO (SVG via <img>) */
.wp-block-site-logo img.custom-logo{
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-transform: translateZ(0);   /* iOS: force repaint */
  transform: translateZ(0);
}
.wp-block-site-logo svg{
  max-width: 100%;
  height: auto;
}

/* Nichts kappen: Container darf Icons nicht abschneiden */
footer .wp-block-group,
footer .wp-block-social-links{ 
  overflow: visible;
}


/* === Simple Calendar: Tooltip / aufgeklappte Event-Elemente === */
.qtip,
.qtip-default,
.qtip-content,
.qtip-titlebar {
  background-color: var(--violettDark) !important;  
  color: var(--weiss) !important;                 
  border: 1px solid var(--gold) !important;   
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border-radius: 8px !important;
}

/* Pfeilspitzen des Tooltips im gleichen Stil */
.qtip .qtip-tip,
.qtip-default .qtip-tip {
  background-color: var(--violettDark) !important;
  border-color: var(--gold) !important;
}

/* Geöffneter Event (z. B. Listenansicht oder Klick-Overlay) */
.simcal-event.simcal-open {
  background-color: var(--violettDark) !important;
  color: var(--weiss) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 8px !important;
}

/* Gold-Akzent bei Hover-Links im Tooltip */
.qtip-content a:hover {
  color: var(--gold) !important;
}

/* Dezenter Glow um Tooltip */
.qtip {
  filter: drop-shadow(0 0 6px rgba(242, 197, 96, 0.25));
}

/* === Simple Calendar Gesamtdesign: dunkler Hintergrund + goldener Doppelrahmen === */
.simcal-calendar {
  position: relative;
  padding: 2rem; 
  background-color: transparent !important;
  color: var(--weiss); 
}

/* Innenkante für zusätzliche Tiefe */
.simcal-calendar::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
}

/* Für Rahmenlose Tabellen */
.no-border,
.no-border td,
.no-border th {
  border: none !important;
}

/* === Bilderrahmen in Gold  === */
.gold-frame {
  position: relative;
  display: block;
  padding: 10px; 
  background-color: var(--violettDark); 
  border: 3px  var(--gold); /* Goldener Doppelrahmen, absichtlich kein Linetype angegeben */
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(242, 197, 96, 0.15);
  overflow: hidden;
}

/* Leicht versetzte Innenkante für Tiefe */
.gold-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(242, 197, 96, 0.6);
  border-radius: 8px;
  pointer-events: none;
}

/* Das Bild selbst anpassen */
.gold-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Dezenter Glow beim Hover */
.gold-frame:hover {
  box-shadow: 0 0 16px rgba(242, 197, 96, 0.35);
  transition: box-shadow 0.3s ease;
}

.wp-lightbox-overlay .scrim{
  background-color: rgba(16, 2, 49, 0.95) !important; 
  backdrop-filter: blur(4px);
}
.wp-lightbox-overlay .close-button{
  color: #fff !important;
}
.wp-lightbox-overlay .close-button svg path{
  fill: #fff !important;
}

.wp-lightbox-overlay .lightbox-image-container figure{
  background: transparent !important;
  box-shadow: none !important;

}
.wp-lightbox-overlay .lightbox-image-container figure{
  padding: 10px; 
  background-color: var(--violettDark); 
  border: 5px double var(--gold); 
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(242, 197, 96, 0.15);
  overflow: hidden;
}

/* Lightbox ist deaktiviert auf Mobile. Zusätzliche Kompatibilitätsmaßnahmen */ 
.wp-lightbox-overlay {
  touch-action: auto !important;      /* erlaubt Pinch-Zoom & Scroll */
  overscroll-behavior: contain;       /* verhindert komplettes Seiten-Scrollen */
}
.wp-lightbox-overlay img,
.wp-lightbox-overlay .lightbox-image-container figure {
  touch-action: pinch-zoom !important; /* Zoom auf dem Bild erlauben */
  pointer-events: auto !important;     /* Interaktion aktiv */
}
/* Sicherstellen, dass das Bild im Overlay frei zoomen darf */
.wp-lightbox-overlay .lightbox-image-container img{
  max-width: none !important;
  height: auto;
}

/* SVG mit halbtransparenter Darstellung */
.svg-fade {
  opacity: 0.8;                
  transition: opacity 300ms ease; 
}

/* Leichte Hover-Interaktion */
.svg-fade:hover {
  opacity: 1;
}

/* === Goldener Rahmen um Seiteninhalt === */
main > .wp-block-group.alignfull.has-global-padding {
  position: relative;
  inline-size: min(1280px, 100%);
  margin-inline: auto;
  margin-block: 2.5rem;
  padding: 2rem 4.25rem;
  background-color: rgba(16, 2, 49, 0.8);
  border: 3px double var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(242,197,96,0.15);
}

/* Innenkante */
main > .wp-block-group.alignfull.has-global-padding::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(242,197,96,0.6);
  border-radius: 8px;
  pointer-events: none;
}

/* Titel im Rahmen zentrieren */
main > .wp-block-group.alignfull.has-global-padding > .wp-block-post-title {
  text-align: center;
  margin-block: .35em 0.1rem;
}

/* Fließtext im Rahmen im Blocksatz */
main > .wp-block-group.alignfull.has-global-padding p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Menü: nur für Tastaturfokus */
.wp-block-navigation a:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: none;
}

.wpforms-container .wpforms-form{
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0;
  color: var(--weiss);
  box-shadow: none;
}

/* Labels, Pflichtstern, Beschreibungen */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel{
  color: var(--weiss);
}
.wpforms-container .wpforms-required{
  color: var(--gold);
}
.wpforms-container .wpforms-field-description{
  color: rgba(255,255,255,.75);
}

/* Eingabefelder einfärben (Text, E-Mail, Select, Textarea …) */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field input[type="password"],
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select{
  background: rgba(255,255,255,.07);
  color: var(--weiss) !important; 
  border: 1px solid rgba(242,197,96,.55);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.35;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Placeholder heller, aber deutlich unterscheidbar */
.wpforms-container .wpforms-field ::placeholder{
  color: rgba(255,255,255,.7);
}

/* Fokuszustand: goldener Ring + leichter Glow */
.wpforms-container .wpforms-field :is(input,textarea,select):focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242,197,96,.25);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  background: rgba(255,255,255,.09);
  color: var(--weiss) !important;
}

/* Fehlermeldungen */
.wpforms-container .wpforms-error{
  color: #ffb7b7;
}
.wpforms-container .wpforms-field.wpforms-has-error
:is(input,textarea,select){
  border-color: #ff8d8d;
  box-shadow: 0 0 0 3px rgba(255,141,141,.22);
}

/* Links im Formular (z.B. Datenschutz) */
.wpforms-container a{
  color: var(--gold);
  text-decoration: none;
}
.wpforms-container a:hover{
  text-decoration: underline;
}

/* Absenden-Button – auf Gold umstellen */
.wpforms-container .wpforms-submit{
  background: var(--gold) !important;
  color: var(--violettDark) !important;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 6px 16px rgba(242,197,96,.25);
}
.wpforms-container .wpforms-submit:hover{
  filter: brightness(.95);
  box-shadow: 0 8px 22px rgba(242,197,96,.35);
}
.wpforms-container .wpforms-submit:active{
  transform: translateY(1px) scale(.99);
}

/* Erfolgsnachricht nach dem Absenden */
.wpforms-container .wpforms-confirmation-container-full{
  background: rgba(16,2,49,.75);
  color: var(--weiss);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px 16px;
}


/* Hochscrollbutton Design */

#lm-back-to-top {
  position: fixed;
  right: clamp(30px, 3vw, 25px);           /* etwas weiter zur Mitte */
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: .75px solid var(--gold, #F2C560); /* dezenter Goldrahmen */
  border-radius: 9999px;
  background-color:  rgba(16, 2, 49, 0.8) ; /* var(--violettDark, #100231); */
  color: var(--gold, #F2C560);              /* Pfeil ist gold */
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  cursor: pointer;

  opacity: 0;
  transform: translateY(8px) scale(.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease, filter .2s ease;
  z-index: 2147482000;
  touch-action: manipulation;
}

/* Sichtbar-Zustand */
#lm-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hover/Active-Feedback */
#lm-back-to-top:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
#lm-back-to-top:active {
  transform: translateY(2px) scale(.96);
}

/* SVG-Farbe */
#lm-back-to-top svg path {
  fill: currentColor;
}

/* Reduziertes Motion-Setup */
@media (prefers-reduced-motion: reduce) {
  #lm-back-to-top {
    transition: none;
  }
}
/* Kleinerer Button Mobil */
@media (max-width: 768px){
  #lm-back-to-top{ width: 40px; height: 40px; }
}

/* Hochscrollbutton Design */

/* === FOOTER-STYLING  */
footer.wp-block-template-part,
.wp-block-template-part footer {
  position: relative;
  background: linear-gradient(to bottom, var(--violettDark) 0%, #0b0422 100%);
  color: var(--weiss);
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

/* Goldene Linie oberhalb des Footers */
footer.wp-block-template-part::before,
.wp-block-template-part footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--gold);
}

footer p, footer a, footer li {
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}
footer small {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}

footer a {
  transition: color .25s ease, transform .25s ease;
}
footer a:hover {
  color: var(--gold);
  transform: translateY(-5px);
  filter: drop-shadow(0 0 6px var(--gold));
}

footer.wp-block-template-part {
  opacity: 0;
  transform: translateY(20px);
  animation: footerFade 1s ease-out 0.3s forwards;
}

@keyframes footerFade {
  to { opacity: 1; transform: translateY(0); }
}

/* === MOBILE ONLY SETTINGS === */
@media (max-width: 768px){

  /* Gutter für die ganze Seite */
  :root { 
    --m-gutter: 5px; 
    --illu-size: 250vw;       
    --illu-pos: center 10vh;  
    --illu-opacity: .28;                    
  }

  main > .wp-block-group.alignfull.has-global-padding{
    margin-block: .6rem;
  }

  /* Verhindert ruckelndes Scrollen in Safari */
  body::before{ 
    position: fixed; 
  } 


  h1,
  .wp-block-heading.has-h-1-font-size{
    font-size: clamp(1.8rem, 6vw, 2.4rem);  
    line-height: 1.2;
    margin-bottom: 0.5em;                   
  }

  h2,
  .wp-block-heading.has-h-2-font-size{
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }

  .wp-block-group,
  .wp-block-group.alignfull.has-global-padding{
    --wp--style--block-gap: 0.1rem;
  }

/* Diese Text stellt den Text nur für Apple Geräte auf Rechtsbündig um. -Safari hat unsauberes Blocksatz*/
@supports (-webkit-touch-callout: none){  /* iOS WebKit */
    p, .wp-block-paragraph{
      text-align: start !important;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
  }

  /* Dieser Block sorgt dafür, dass auf Mobile Bilder vor dem Text angezeigt werden */
  /* Daher wwird die Reihenfolge von Spaltenelementen vertausch */
  .wp-block-columns > .wp-block-column:nth-child(2):has(> .wp-block-image:first-child){
    order: -1;
    margin-bottom: 1rem;
  }

  /* Aktive Seite einkreisen  */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content{
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: .2rem .6rem;
  color: var(--gold);
}


  /* Globale linke/rechte Abstände */
  .wp-site-blocks,
  main {
    padding-left:  var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
    box-sizing: border-box;
  }

  
  main > .wp-block-group.alignfull{
    
    width: 100%;
    margin-inline: auto;
    padding: 6px 25px !important;
    border-width: 2px;
    border-radius: 10px;
    overflow: visible !important; 
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
    animation: fadeInNavItem 0.68s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(var(--i, 0) * 30ms); 
  }

  @keyframes fadeInNavItem{
    from{ opacity:0; transform: translate3d(0,-0.4rem,0); }
    to  { opacity:1; transform: translate3d(0, 0, 0); }
  }
  
  /* Hintergrund & Farbe im geöffneten Zustand */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    background-color: var(--violettDark) !important;
    background: var(--violettDark) !important; 
    color: var(--weiss); !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container{
    margin-left: 0 !important;
    padding-left: 0 !important;   
  }

    /* Links im Overlay linksbündig statt zentriert */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item{
    text-align: center;
  }

  /* Einzug nur für die 2. Ebene */
  .wp-block-navigation__submenu-container .wp-block-navigation-item a{
    padding-left: 0 !important; 
  }

  /* Menü-Links: Basiszustand */
  .wp-block-navigation__responsive-container .wp-block-navigation-item a {
    color: var(--weiss) !important;
    text-decoration: none;
    display: block;
    padding: 0.8rem 1.2rem;
    transition: all 0.25s ease;
    border-radius: 6px;
  }

  /* Overlay-Flächen: Violett, ohne Rahmen/Schlagschatten/Outline */
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    background: var(--violettDark) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Fokus-Styles abschalten */
  .wp-block-navigation__responsive-container.is-menu-open:focus,
  .wp-block-navigation__responsive-container.is-menu-open:focus-visible,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content:focus,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content:focus-visible{
    outline: none !important;
  }

  /* kein zusätzlicher Scrim-/Backdroprand */
  .wp-block-navigation__responsive-container.is-menu-open::backdrop,
  .wp-block-navigation__responsive-container.is-menu-open::before{
    background: transparent !important;
  }

  /* Hover- bzw. Tap-Effekt */
  .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
  .wp-block-navigation__responsive-container .wp-block-navigation-item a:focus {
    color: var(--gold) !important;
    background-color: rgba(255, 215, 0, 0.08); /* leichter Goldschimmer */
  }

  /* Menü-Button (Hamburger) Farbe anpassen */
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-close svg {
      stroke: var(--gold) !important;   
  }

  .wp-block-navigation__responsive-container-open:hover svg,
  .wp-block-navigation__responsive-container-close:hover svg {
    stroke: var(--gold);
    opacity: 0.8;
    transform: scale(1.1);
    transition: all 0.2s ease;
  }

  /* Schließen-Button etwas größer und klickfreundlicher */
  .wp-block-navigation__responsive-container-close {
    padding: 0.5rem;
  }
  /* Innenabstand des Panels selbst (oben/unten kleiner) */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    padding-block: 0.75rem !important;    /* vorher meist ~2rem */
  }

  /* Abstand zwischen den Menü-Elementen (TT25 nutzt 'gap') */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
    gap: .25rem !important;               
  }

  /* Link-Padding schlanker + kompaktere Zeilenhöhe */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item .wp-block-navigation-item__content{
    padding: .5rem .75rem !important;
    line-height: 1.2 !important;
  }


/*  3-Linien-Hamburger erzwingen */
.wp-block-navigation__responsive-container-open{
  color: var(--gold);                 
  width: 40px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* eingebautes SVG ausblenden */
.wp-block-navigation__responsive-container-open svg{
  display: none !important;
}

/* eigenes 3-Linien-Icon-menu (Hamburger) zeichnen */
.wp-block-navigation__responsive-container-open::before{
  content: "";
  display: block;
  width: 28px;                        
  height: 20px;                       
  
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px, 100% 2px, 100% 2px;   
  background-repeat: no-repeat;
  background-position:
    center 0,         
    center 9px,       
    center 18px;      
}

/* Hover/Tap-Effekt */
.wp-block-navigation__responsive-container-open:hover::before,
.wp-block-navigation__responsive-container-open:focus::before{
  opacity: .85;
  transform: scale(1.06);
  transition: all .15s ease;
}

  /* Falls TT25 ein Overlay/Scrim nutzt, ebenfalls einfärben */
  .wp-block-navigation__responsive-container.is-menu-open::backdrop,
  .wp-block-navigation__responsive-container.is-menu-open::before{
    background: transparent !important; /* kein helles Overlay oben drauf */
  }

  /* Grundlayout & Farben */
  .wp-block-navigation__responsive-container.is-menu-open 
  .wp-block-navigation-item > .wp-block-navigation-item__content{
    color: var(--weiss) !important;
    display: block;
    text-align: left;
    padding: .55rem 1.2rem .55rem 1rem;   
    border-radius: 6px;
    transition: color .25s ease, background-color .25s ease;
    position: relative;
  }


/* Strich hängt am Link-Element und liegt im goldenen Rahmen */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content{
  position: relative;
  padding-right: 1.35rem !important; 
}

.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content::after{
  content: "–";
  position: absolute;
  right: .35rem;            
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  pointer-events: none;
}


.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content{
  text-align: center !important;         
  padding: .55rem 1.2rem !important;     
}


/* Text + Pfeil gemeinsam nach rechts schieben */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content{
  display: inline-flex;         
  align-items: center;           
  transform: translateX(1.8rem);
  will-change: transform;
}
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content::after{
  content: " •";
  color: var(--gold);
  display: inline-block;
  margin-left: .15rem;           
  transform: translate(1rem, 0.015rem); 
  position: relative;
  top: 0;                          
}

/* Aktiver Menüpunkt (aktuelle Seite) – keine Verschiebung mehr */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container 
> .wp-block-navigation-item > .wp-block-navigation-item__content.is-selected {
  transform: translateX(1.925rem) !important; 
  margin-left: 0 !important;
  padding-left: -0.2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container > .wp-block-navigation-item{
  position: relative;
}

  /* Hover → Text & Strich Gold, dezenter Hintergrund */
  .wp-block-navigation__responsive-container.is-menu-open 
  .wp-block-navigation-item > .wp-block-navigation-item__content:hover{
    color: var(--gold) !important;
    background-color: rgba(242,197,96,.08);
  }

/* Submenü enger an das Top-Level-Item darüber andocken */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container{
    margin-top: .15rem !important;   
    padding-top: 0 !important;
    gap: .15rem !important;
  }

  /*  Submenü unten kein zusätzlichen Abstand lassen */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /*  Ersten Top-Level nach einem Submenü leicht annähern */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child + .wp-block-navigation-item{
    margin-top: .15rem !important;  
  }

   .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item > .wp-block-navigation-item__content:hover{
    color: var(--gold) !important;
    background: rgba(242,197,96,.08);
    border-radius: 8px;
  }

    .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content{
    border: none !important;
    padding: .55rem 1.2rem .55rem 1rem !important; 
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    padding-top: 3.5rem !important;  
  }

  /* Sicherheitsabstand für die Liste selbst */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
    margin-top: .25rem !important;
  }

    /* Button-Stil im Overlay neutralisieren */
  .wp-block-navigation__responsive-container.is-menu-open .wp-element-button,
  .wp-block-navigation__responsive-container.is-menu-open .wp-element-button:where(a,span) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: inherit !important;
  }

  /* Focus-/Focus-visible-Outline und Box-Shadow an allen Items aus */
  .wp-block-navigation__responsive-container.is-menu-open 
  .wp-block-navigation-item__content:focus,
  .wp-block-navigation__responsive-container.is-menu-open 
  .wp-block-navigation-item__content:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  /* Weißen Fokus Ring am ersten Menu Item deaktivieren*/
  .wp-block-navigation__responsive-container.is-menu-open 
  .wp-block-navigation__container > .wp-block-navigation-item:first-child 
  > .wp-block-navigation-item__content {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-color: transparent !important;
  }


 /* Footer über die seitlichen page-gutters ziehen */
  .wp-site-footer,
  footer.wp-block-template-part,
  .wp-block-template-part > footer{
    margin-left:  calc(-1 * var(--m-gutter));
    margin-right: calc(-1 * var(--m-gutter));
    padding-left: var(--m-gutter);
    padding-right: var(--m-gutter);
    background-color: var(--violettDark); 
  }

  /* Lightbox ist auf Mobile via functions.php deaktiviert */
  /* Trigger-Button vorsorglich ausblenden */
  .wp-lightbox-container .lightbox-trigger{ display:none !important; }

  /* Natürliches Zoom-Gesten-Verhalten fürs Bild */
  .wp-lightbox-container img{ touch-action: pinch-zoom; }


  /* Entfernt sichtbare Rahmen/Box-Shadows, die beim Öffnen eines Untermenüs im mobilen Menü auftauchen */
  .wp-block-navigation__submenu-container:focus-within,
  .wp-block-navigation__submenu-container:focus,
  .wp-block-navigation__submenu-container[aria-expanded="true"],
  .wp-block-navigation-item:focus,
  .wp-block-navigation-item:focus-within,
  .wp-block-navigation-item[aria-expanded="true"] {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Verhindert, dass bei Klick auf den aktiven Menüpunkt selbst ein heller Rahmen kurz aufblitzt */
  .wp-block-navigation__responsive-container .wp-block-navigation-item a:focus,
  .wp-block-navigation__responsive-container .wp-block-navigation-item a:active {
    outline: none !important;
    box-shadow: none !important;
  }



} /* END OF MOBILE SECTION */

/* Animation nur, wenn keine reduzierte Bewegung gewünscht ist */
@media (prefers-reduced-motion: no-preference){

  /* Keyframes: kleiner Pop + kurz Gold-Glow, dann wieder weg */
  @keyframes lm-gold-pop {
    0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(242,197,96,0); }
    55%  { transform: scale(1);   box-shadow: 0 0 0 10px rgba(242,197,96,.20); }
    100% { transform: scale(1);   box-shadow: 0 0 0 0  rgba(242,197,96,0); }
  }

  /* aktuelle Seite */
  .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
    animation: lm-gold-pop 480ms ease-out both;
  }

  /* Kleines Feedback beim Tippen/Klicken */
  .wp-block-navigation .wp-block-navigation-item__content:active{
    transform: scale(.98);
    transition: transform .12s ease;
  }
}

@media (prefers-reduced-motion: reduce){
  body::before{ transition: none !important; }
}

@media (min-width: 769px){

  /* Standardzustand: weiß, kein Ring */
  .wp-block-navigation a,
  .wp-block-navigation .wp-block-navigation-item__content {
    color: var(--weiss);
    text-decoration: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: color 0.2s ease, text-shadow 0.5s ease; 
  }

  /* Aktueller Menüpunkt immer gold */
  .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    color: var(--gold) !important;
    text-shadow: 0 0 9px rgba(242,197,96,.35);
    animation: lm-gold-pop 480ms ease-out both; 
  }

  /* Ahnen (Top-Level bei Unterseiten) bleiben weiß */
  .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--weiss) !important;
    text-shadow: none !important;
  }

  /* Hover: gold + langsam auf-/abglühender Glow */
  .wp-block-navigation a:hover,
  .wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--gold) !important;
    text-shadow:
      0 0 8px rgba(242,197,96,.55),
      0 0 18px rgba(242,197,96,.35),
      0 0 36px rgba(242,197,96,.2);
    transition: color 0.2s ease, text-shadow 0.5s ease; 
  }

  .wp-block-navigation :is(.current-menu-item, .current-menu-ancestor)
  > .wp-block-navigation-item__content{
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .wp-block-navigation a:focus,
  .wp-block-navigation a:focus-visible,
  .wp-block-navigation .wp-block-navigation-item__content:focus,
  .wp-block-navigation .wp-block-navigation-item__content:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  /* Nur der wirklich aktive Menüpunkt = gold */
  .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation .current-menu-item > a,
  .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content *,
  .wp-block-navigation .current-menu-item > a *{
    color: var(--gold) !important;
    text-shadow: none;
  }

  
  .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
  .wp-block-navigation .current-menu-ancestor > a{
    color: var(--gold) !important;
  }

  /* aktuelles Menüelement UND dessen Top-Level (Ancestor) gold einfärben */
  .wp-block-navigation :is(.current-menu-item, .current-menu-ancestor)
  > .wp-block-navigation-item__content,
  .wp-block-navigation :is(.current-menu-item, .current-menu-ancestor)
  > a{
    color: var(--gold) !important;
    text-shadow: none;
  }

  /* Entfernt Focus-Rahmen beim Klicken */
  .wp-block-navigation a:focus,
  .wp-block-navigation a:focus-visible,
  .wp-block-navigation .wp-block-navigation-item__content:focus,
  .wp-block-navigation .wp-block-navigation-item__content:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

   .wp-block-navigation :is(.current-menu-item, .current-menu-ancestor)
  > .wp-block-navigation-item__content,
  .wp-block-navigation :is(.current-menu-item, .current-menu-ancestor)
  > .wp-block-navigation-item__content *{
    color: var(--gold) !important;
  }

  /* Container: vorbereitet, aber unsichtbar – mit smooth easing */
  .wp-block-navigation__submenu-container{
    display: block !important;              
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.98);
    will-change: opacity, transform;
    transition:
      opacity 260ms ease-out,
      transform 540ms cubic-bezier(.22,1,.36,1); 
    z-index: 10;
    background: transparent !important;     
    border: none !important;
    position: relative;
  }

  /* Hintergrund-Layer: beginnt leicht verzögert, läuft länger */
  .wp-block-navigation__submenu-container::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--violettDark);
    border: 1px solid var(--gold);
    border-radius: 8px;
    opacity: 0;
    will-change: opacity;
    transition: opacity 520ms cubic-bezier(.22,1,.36,1) 120ms; 
    pointer-events: none;
  }

  /* Items im Submenü: kleiner Stagger für weicheren Eindruck */
  .wp-block-navigation__submenu-container > .wp-block-navigation-item{
    opacity: 0;
    transform: translateY(-4px);
    will-change: opacity, transform;
    transition:
      opacity 200ms ease-out,
      transform 280ms cubic-bezier(.22,1,.36,1);
    position: relative;
  }

  /* Stagger-Delays */
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1){ transition-delay: 40ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2){ transition-delay: 80ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3){ transition-delay: 120ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4){ transition-delay: 160ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(5){ transition-delay: 200ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(6){ transition-delay: 240ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(7){ transition-delay: 280ms; }
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8){ transition-delay: 320ms; }

  /* Öffnen (Hover oder Tastaturfokus) */
  .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
  .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container::before,
  .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container::before{
    opacity: 1; 
  }

  .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item,
  .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container > .wp-block-navigation-item{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Systempräferenz „Bewegung reduzieren“ respektieren */
@media (prefers-reduced-motion: reduce){
  .wp-block-navigation__submenu-container,
  .wp-block-navigation__submenu-container::before,
  .wp-block-navigation__submenu-container > .wp-block-navigation-item{
    transition: none !important;
    transform: none !important;
  }

}