/* Mega-Menü: eigene Datei, per wp_enqueue_style (Handle rios1931-megamenu) aus
   inc/megamenu.php geladen. Nutzt die :root-Variablen aus style.css (--hg, --linie,
   --brand, --weiss, --t, --grau) – diese Datei hängt dafür von "rios1931" ab. */

.mm{display:flex;gap:2.5rem;list-style:none;margin:0;padding:0;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;flex-wrap:wrap;justify-content:center}
.mm-item{position:static} /* Panel bezieht sich auf .kopf (position:relative), nicht auf den Menüpunkt */
.mm-item>a{position:relative;display:inline-block;padding:.25rem 0}
.mm-item>a::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
/* Hover-Brücke: der Link reicht unsichtbar bis zur Kopfunterkante, sonst schließt das Panel auf dem Weg dorthin */
.mm-has-panel>a{padding-bottom:1.75rem;margin-bottom:-1.75rem}
.mm-has-panel>a::before{bottom:1.5rem}
.mm-item>a:hover::before{transform:scaleX(1)}

/* Panel: volle Seitenbreite, direkt unter dem Kopf, standardmäßig unsichtbar (kein Layout-Sprung) */
.mm-panel{display:none;position:absolute;left:0;top:100%;width:100%;background:var(--hg);color:var(--text);border-top:1px solid var(--linie);z-index:50}
.mm-has-panel:hover>.mm-panel,.mm-has-panel.ist-offen>.mm-panel{display:block;animation:mm-auf .25s ease}   /* Tastatur: .ist-offen über den Knopf .mm-auf (Disclosure), kein :focus-within mehr */
.mm-has-panel.mm-zu>.mm-panel{display:none}   /* BFSG 1.4.13: mit Escape geschlossen, bis Maus/Fokus das Menü verlassen */
/* Öffnen-Knopf für die Tastatur: unsichtbar, bis er Fokus hat; absolut ohne Versatz = steht direkt hinter dem Menüpunkt, verschiebt nichts */
.mm-auf{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0;margin:0;background:none;color:inherit;cursor:pointer}
.mm-auf:focus-visible{width:1.25rem;height:1.25rem;clip:auto;margin:.2rem 0 0 .2rem;display:inline-flex;align-items:center;justify-content:center;outline:2px solid currentColor;outline-offset:1px}
.mm-has-panel.ist-offen>.mm-auf svg{transform:rotate(180deg)}
@keyframes mm-auf{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.mm-panel .innen{padding-top:2.5rem;padding-bottom:2.5rem}

/* Startseite: Kopf transparent auf dem Bild, Panel bleibt trotzdem hell mit dunkler Schrift */
body.home .mm-panel{color:var(--brand)}

/* Produkte (Vorlage alte Homepage, Kevin 13.09. spät): links Collage „Alle Produkte", rechts 3 Spalten × 5 Zeilen,
   ruhige Schreibweise (keine Versalien), Grau, beim Überfahren dunkel mit Haarlinie */
.mm-produkte{display:grid;grid-template-columns:13rem 1fr;gap:3rem;align-items:center;max-width:70rem}
.mm-alle{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;text-transform:none;font-weight:400;font-size:1rem;color:#5c636a;transition:color var(--t)}   /* BFSG: --grau auf --hg nur 4,3:1, #5c636a 5,6:1 */
.mm-alle img{width:100%;aspect-ratio:1/1;object-fit:cover}
.mm-alle:hover{color:var(--brand)}
/* Kategorien wie Jans Fassung (Kevins Foto 14.09.): fünf Spalten, drei Zeilen, Versalien, zentriert; Collage links bleibt */
.nav ul.mm-liste{display:flex;flex-wrap:wrap;justify-content:center;gap:0;width:52rem;max-width:100%;list-style:none;margin:0 auto;padding:.5rem 0;text-align:center;align-self:center}
.mm-liste li{flex:0 0 10rem;box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start;padding:.7rem .4rem;margin:0}
.mm-liste a{position:relative;display:inline-block;max-width:9rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.45;color:var(--text);padding:.1rem 0;transition:color var(--t)}
.mm-liste a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.mm-liste a:hover{color:var(--brand)}
.mm-liste a:hover::after{transform:scaleX(1)}
@media(max-width:1200px){.mm-produkte{grid-template-columns:1fr}.mm-alle{display:none}.mm-liste{gap:.8rem 2rem;font-size:1rem}}

/* RIOS1931 / Manufaktur: Bildkacheln, Bild hochkant + Titel darunter zentriert */
.mm-kacheln{display:flex;flex-wrap:wrap;justify-content:center;gap:1.875rem;list-style:none;margin:0;padding:0}
.mm-kacheln>li{width:10.75rem}
.mm-kacheln a{display:flex;flex-direction:column;align-items:center;gap:.625rem;text-align:center;transition:transform var(--t)}
.mm-kacheln a:hover{transform:translateY(-.375rem)}
.mm-kacheln img{width:100%;aspect-ratio:172/215;object-fit:cover;background:var(--weiss)}
.mm-kacheln span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}

/* Hamburger-Knopf, Schließen-Knopf und Abdunkelung: nur mobil (Markup in header.php) */
.mm-burger,.mm-schliessen{display:none;border:0;background:none;padding:.5rem;cursor:pointer;color:inherit}
.mm-hintergrund{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:150}

/* Mobil (<1024px): Nav als Schublade von rechts, Panels als Akkordeon per Klasse "ist-offen" (JS in megamenu.php) */
@media(max-width:1023px){
  .mm-burger{display:block}
  html,body{overflow-x:hidden} /* die geschlossene Schublade darf keinen Querscroll erzeugen */
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(22rem,85vw);height:100vh;background:var(--weiss);color:var(--text);transform:translateX(100%);visibility:hidden;transition:transform var(--t),visibility var(--t);overflow-y:auto;z-index:200;padding:5rem 1.5rem 2rem}
  .nav.ist-offen{transform:translateX(0);visibility:visible}
  .mm-schliessen{display:block;position:absolute;top:1rem;right:1rem;z-index:1}
  .mm-hintergrund.ist-offen{display:block}
  body.menue-offen{overflow:hidden} /* Seite dahinter steht, kein Scrollen hinter der Schublade */
  .mm{flex-direction:column;align-items:stretch;gap:0;font-size:1rem}
  .mm-item{border-bottom:1px solid var(--linie)}
  .mm-item>a,.nav .mm-has-panel>a{display:block;padding:1rem 0;margin:0} /* Hover-Brücke (negativer Rand) nur am Desktop */
  .mm-item>a::before{display:none}
  /* Akkordeon über grid-template-rows (kein Layout-Thrash wie bei max-height) */
  .mm-panel,.mm-has-panel:hover>.mm-panel,.mm-has-panel:focus-within>.mm-panel{position:static;width:auto;background:transparent;border:0;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t);animation:none}
  .mm-item.ist-offen>.mm-panel{grid-template-rows:1fr}
  .mm-panel .innen{min-height:0;overflow:hidden;padding:0;visibility:hidden;transition:visibility var(--t)}   /* zugeklappt: Links keine Tab-Stopps */
  .mm-item.ist-offen>.mm-panel .innen{padding-bottom:1rem;visibility:visible}
  .mm-auf{display:none}   /* mobil ist der Menüpunkt selbst der Schalter */
  .mm-liste{display:block}
  .mm-produkte{display:block}
  .mm-liste a{padding:.6rem 0}
  /* Mobil keine Bilder in den Kacheln, nur die Titel als Liste */
  .mm-kacheln{flex-direction:column;gap:0}
  .mm-kacheln>li{width:auto}
  .mm-kacheln img{display:none}
  .mm-kacheln a{flex-direction:row;justify-content:flex-start;text-align:left;padding:.6rem 0}
}
/* Endprüfung 30.09.2026: mobil Unterpunkte links wie die Hauptpunkte, „Alle Produkte“ als Textlink, Pfeil an aufklappbaren Punkten */
@media(max-width:1023px){
  .nav ul.mm-liste{justify-content:flex-start;text-align:left;width:auto}
  .mm-liste li{justify-content:flex-start;padding:.55rem 0}
  .mm-liste a{max-width:none}
  .mm-produkte .mm-alle{display:block;text-align:left;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text);padding:.55rem 0}
  .mm-produkte .mm-alle img{display:none}
  .nav .mm-has-panel>a{position:relative;padding-right:1.5rem}
  .nav .mm-has-panel>a::after{content:"";position:absolute;right:.25rem;top:50%;width:.45rem;height:.45rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform var(--t)}
  .nav .mm-has-panel.ist-offen>a::after{transform:translateY(-30%) rotate(-135deg)}
}