/* =========================================================
   your-matrix · Megamenü „Bibliothek"
   Gehört zu megamenue.js, wird vom Plugin seitenweit geladen.
   Baut auf menue/menue.css auf (gleiche Farben und Kurven).
   Kopfleiste und Panel weiß, Schrift kommt vom Theme (Open Sans lokal).
   ========================================================= */

:root{
  --ym-mm-tinte:#19333E;
  --ym-mm-navy:#25385D;
  --ym-mm-grau:#55616B;
  --ym-mm-cyan:#0A89C5;
  --ym-mm-cyan-text:#0877AB; /* Cyan für Text, 4,9:1 auf Weiß */
  --ym-mm-aqua:#7FD8DC;
  --ym-mm-linie:#DCE4EA;
  --ym-mm-trenner:#EEF2F5;
  --ym-mm-flaeche:#F4F8FA;
  --ym-mm-hell:#E8F6F7;
  --ym-mm-kurve:cubic-bezier(.22,1,.36,1);
}

/* Anmeldestatus: WordPress setzt body.logged-in */
body:not(.logged-in) .ym-nur-angemeldet,
body.logged-in .ym-nur-gast{display:none !important}

/* =========================================================
   Desktop (ab 981 px, darunter blendet Divi das Hauptmenü aus)
   ========================================================= */
@media (min-width:981px){

  /* Divis eigenes Untermenü dieses Punkts ausblenden.
     Greift erst, wenn megamenue.js gelaufen ist (Klasse ym-mega-li). */
  #top-menu li.ym-mega-li > ul.sub-menu,
  ul.nav li.ym-mega-li > ul.sub-menu{display:none !important}

  li.ym-mega-li{position:relative}

  /* Haken dreht sich und Unterstrich bleibt, solange das Panel offen ist */
  #top-menu li.ym-mega-li.ym-mega-offen > a::before{
    transform:rotate(-135deg) translate(-2px,-2px);opacity:1;
  }
  #top-menu li.ym-mega-li.ym-mega-offen > a{background-size:calc(100% - 1.7rem) 2px}

  /* Brücke zwischen Menüpunkt und Panel: die Maus darf die Lücke
     bis zur Unterkante der Kopfleiste überqueren, ohne dass es zuklappt */
  .ym-mega-bruecke{
    display:none;position:absolute;left:0;right:0;top:100%;
    height:var(--ym-bruecke,0px);
  }
  .ym-mega-offen > .ym-mega-bruecke{display:block}

  /* ---------- Panel ---------- */
  .ym-mega{
    position:fixed;top:0;left:0;right:0;z-index:30;
    margin:0;padding:0;
    visibility:hidden;pointer-events:none;
    transition:visibility 0s linear .18s;
    white-space:normal;text-align:left;cursor:auto;
    font-size:15px;line-height:1.4;letter-spacing:0;
    color:var(--ym-mm-tinte);
  }
  .ym-mega-offen > .ym-mega{
    visibility:visible;pointer-events:auto;transition-delay:0s;
  }
  .ym-mega__flaeche{
    background:#fff;
    border-top:1px solid var(--ym-mm-linie);
    border-bottom:1px solid var(--ym-mm-linie);
    /* kein Schatten (Vorgabe Master): Abgrenzung nur über die Linien */
    box-shadow:none;
    opacity:0;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s var(--ym-mm-kurve);
  }
  .ym-mega-offen .ym-mega__flaeche{opacity:1;transform:none}

  .ym-mega__innen{
    box-sizing:border-box;
    width:var(--ym-mega-breite,min(1080px,80%));
    margin:0 auto;padding:28px 0 32px;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);
    gap:0 clamp(28px,4vw,56px);
  }
  .ym-mega__spalte{min-width:0}

  /* Spaltentitel in normaler Schreibweise (Kritik 03.10.2026) */
  .ym-mega p.ym-mega__titel{
    margin:0 0 8px;padding:0;
    font-size:14px;font-weight:600;line-height:1.3;
    letter-spacing:0;text-transform:none;
    color:var(--ym-mm-grau);
  }
  .ym-mega__liste{margin:0;padding:0}
  .ym-mega__punkt{margin:0;padding:0}
  .ym-mega__punkt + .ym-mega__punkt{border-top:1px solid var(--ym-mm-trenner)}

  /* Links: Divi und menue.css greifen über "#top-menu li a" auch hier,
     deshalb mit höherer Spezifität zurücksetzen */
  #top-menu .ym-mega a.ym-mega__link,
  .ym-mega a.ym-mega__link{
    display:flex !important;align-items:center;gap:12px;
    width:auto !important;min-height:48px;box-sizing:border-box;
    margin:0;padding:8px 0 !important;
    border:0 !important;border-radius:0;
    background:none !important;box-shadow:none !important;
    color:var(--ym-mm-navy) !important;opacity:1 !important;
    font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0;
    text-decoration:none;white-space:normal;hyphens:manual;
    transition:color .18s ease;
  }
  #top-menu .ym-mega a.ym-mega__link:hover,
  .ym-mega a.ym-mega__link:hover,
  #top-menu .ym-mega a.ym-mega__link[aria-current="page"],
  .ym-mega a.ym-mega__link[aria-current="page"]{color:var(--ym-mm-cyan-text) !important}
  #top-menu .ym-mega a.ym-mega__link:focus-visible,
  .ym-mega a.ym-mega__link:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;border-radius:6px;
  }
  #top-menu .ym-mega a.ym-mega__link--haupt,
  .ym-mega a.ym-mega__link--haupt{font-weight:700}

  .ym-mega__text{min-width:0}

  /* Gänge mit kleinem Bild */
  .ym-mega img.ym-mega__bild{
    flex:none;display:block;
    width:64px;height:43px;max-width:none;
    border-radius:8px;object-fit:cover;object-position:50% 50%;
    background:var(--ym-mm-flaeche);
    box-shadow:none;
  }
  #top-menu .ym-mega a.ym-mega__link--gang,
  .ym-mega a.ym-mega__link--gang{padding:9px 0 !important;min-height:61px}

  /* Icons */
  .ym-mega__ikon{
    flex:none;display:inline-grid;place-items:center;
    width:32px;height:32px;border-radius:8px;
    background:var(--ym-mm-hell);color:var(--ym-mm-navy);
    transition:color .18s ease,background .18s ease;
  }
  .ym-mega__ikon svg{display:block;width:18px;height:18px}
  .ym-mega a.ym-mega__link:hover .ym-mega__ikon{color:var(--ym-mm-cyan)}

  /* schmale Desktops: Abstände enger, Bild etwas kleiner */
  @media (max-width:1180px){
    .ym-mega__innen{gap:0 24px;width:var(--ym-mega-breite,min(1080px,88%))}
    .ym-mega img.ym-mega__bild{width:56px;height:38px}
    #top-menu .ym-mega a.ym-mega__link,
    .ym-mega a.ym-mega__link{font-size:14px;gap:10px}
  }
}

/* =========================================================
   Anmelden / Mein Konto im Kopf (baut megamenue.js, Klasse .ym-konto)
   Desktop: Rahmenknopf rechts neben dem letzten Menüpunkt.
   Handy: Personen-Icon links neben dem Hamburger.
   ========================================================= */
/* position:relative hebt den Knopf über Divis .logo_container: Der liegt
   absolut über die ganze Kopfbreite und schluckte sonst jeden Klick. */
.ym-konto{flex:none;position:relative;z-index:1}
#et-top-navigation .ym-konto a.ym-konto__link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;margin:0;
  text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.ym-konto__ikon{flex:none;display:inline-grid;place-items:center;width:20px;height:20px}
.ym-konto__ikon svg{display:block;width:20px;height:20px}

@media (min-width:981px){
  /* Schriftgröße der Menüpunkte: im Divi-Customizer auf 15 px gesetzt
     (02.10.2026, vorher 20 px), deshalb hier keine eigene Regel mehr. */
  /* Divis Einrückung um die beim Laden gemessene Logobreite (Inline-Stil)
     aus: Sie hängt von der Logogröße beim Laden ab und ließ die Zeile
     umbrechen, obwohl rechts genug Platz war. Den Abstand zum Logo sichern
     die gemessenen Größen in dieser Datei (mind. 14 px bei 981 px). */
  #main-header #et-top-navigation{padding-left:0 !important}

  #et-top-navigation .ym-konto{
    float:left;display:flex;align-items:center;
    /* Menüzeile und Knopf sind beide 40 px hoch (gemessen 03.10.2026): kein Versatz */
    margin:0 0 0 14px;
  }
  #et-top-navigation .ym-konto a.ym-konto__link{
    height:40px;padding:0 18px;
    border:1.5px solid var(--ym-mm-navy);border-radius:999px;
    background:transparent;box-shadow:none;
    color:var(--ym-mm-navy);
    font-size:15px;font-weight:600;line-height:1;letter-spacing:.005em;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  }
  /* Aktiv (man ist auf der Seite): helle Fläche, Navy-Text. Hover der Rand-Pillen: helle Fläche
     und dunklerer Rand, nie gefüllt (die Füllung bleibt dem Hauptknopf „Mitglied werden“ vorbehalten).
     Offen (Konto-Menü auf): Rand 2 px. So sind alle Zustände unterscheidbar. */
  #et-top-navigation .ym-konto a.ym-konto__link[aria-current="page"]{
    background:var(--ym-mm-hell);color:var(--ym-mm-navy);
  }
  #et-top-navigation .ym-konto a.ym-konto__link:hover{
    background:var(--ym-mm-hell);border-color:#1C2C4A;color:#1C2C4A;
  }
  #et-top-navigation .ym-konto a.ym-konto__link[aria-expanded="true"]{
    box-shadow:inset 0 0 0 .5px var(--ym-mm-navy),0 0 0 .5px var(--ym-mm-navy);
  }
  #et-top-navigation .ym-konto a.ym-konto__link[aria-expanded="true"]:not(:hover){
    background:var(--ym-mm-hell);color:var(--ym-mm-navy);
  }
  #et-top-navigation .ym-konto a.ym-konto__link:focus-visible{
    outline:3px solid var(--ym-mm-cyan);outline-offset:2px;
  }
  /* Gäste: „Mitglied werden“ gefüllt ganz rechts, „Anmelden“ bleibt der Rand-Knopf.
     Hover: hellere Fläche (#34507F) mit Aqua-Ring, deutlich sichtbar. Aktuelle Seite: bleibt gefüllt
     (Hauptknopf erkennbar), nur das Wort ist aqua unterstrichen. Hover steht nach „aktuell“. */
  #et-top-navigation .ym-konto a.ym-konto__link--werden{
    background:var(--ym-mm-navy);color:#fff;
  }
  #et-top-navigation .ym-konto a.ym-konto__link--werden[aria-current="page"]{
    background:var(--ym-mm-navy);color:#fff;
  }
  #et-top-navigation .ym-konto a.ym-konto__link--werden[aria-current="page"] .ym-konto__text{
    text-decoration:underline;text-decoration-color:var(--ym-mm-aqua,#7FD8DC);
    text-decoration-thickness:2px;text-underline-offset:5px;
  }
  #et-top-navigation .ym-konto a.ym-konto__link--werden:hover,
  #et-top-navigation .ym-konto a.ym-konto__link--werden[aria-current="page"]:hover{
    background:#34507F;border-color:#34507F;color:#fff;
    box-shadow:0 0 0 3px var(--ym-mm-aqua,#7FD8DC);
  }
  /* Gäste: nur das Wort, Mitglieder: kleines Personen-Icon davor */
  #et-top-navigation .ym-konto a.ym-konto__link--gast .ym-konto__ikon{display:none}
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet{padding:0 18px 0 13px}
  #et-top-navigation .ym-konto .ym-konto__ikon,
  #et-top-navigation .ym-konto .ym-konto__ikon svg{width:18px;height:18px}

  /* Herz „Meine Favoriten“ rechts neben „Mein Konto“: gleiche Höhe und Form,
     ohne Favoriten ein Kreis, mit Favoriten eine Pille mit der Zahl.
     Der gleichnamige Punkt im WordPress-Menü ist ab hier ausgeblendet
     (Klasse ym-nur-handy, gesetzt in includes/assets.php). */
  #top-menu > li.ym-nur-handy{display:none}
  #et-top-navigation .ym-konto{gap:8px}
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__fav{width:40px;padding:0;gap:6px}
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__fav--zahl{width:auto;min-width:40px;padding:0 15px 0 12px}
  .ym-konto__fav .ym-konto__zahl{font-size:14px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
  .ym-konto__fav:not(.ym-konto__fav--zahl) .ym-konto__zahl{display:none}
}

/* Schmale Desktops: Logo, fünf Menüpunkte und der Knopf passen bei Divis
   Maßen nicht in eine Zeile. Divi rückt die Navigation per Inline-Stil um
   die Logobreite ein (padding-left, beim Laden gemessen); dadurch lag sie
   schon vorher bei 1024 px über dem Claim im Logo. Hier stattdessen:
   Menüpunkte enger, Logo etwas kleiner, bis 1150 px der Konto-Knopf nur
   als Icon (Name bleibt für Screenreader und als Tooltip). Die Einrückung
   ist ab 981 px aus (siehe oben).
   Gemessen auf der Live-Seite (Gast/Mitglied, Kopf oben), Abstand Logo
   bis Menü in px: 981: 14/14, 1101: 91/91, 1151: 67/36, 1200: 56/25,
   1340: 66/36, 1440: 146/116, 1920: 376/346. Gescrollt (et-fixed-header)
   überall größer. Gleiche Werte auf /, /alle-nur-in-meinem-kopf/ und
   /bibliothek-matrix/videos/. */
@media (min-width:981px) and (max-width:1339px){
  /* #et-top-navigation davor: spezifischer als menue.css, auch wenn dessen
     Kopie aus den Code-Modulen später im Dokument steht */
  #et-top-navigation #top-menu{gap:.1rem}
  #et-top-navigation #top-menu > li > a{
    padding:.55rem .6rem !important;font-size:14px;
    background-position:.6rem calc(100% - .35rem);
  }
  /* Reiter mit Haken: rechts derselbe Innenabstand wie links, Haken per Lücke am Text (N34) */
  #et-top-navigation #top-menu > li.menu-item-has-children > a{padding-right:.6rem !important}
  #et-top-navigation #top-menu > li > a:hover,
  #et-top-navigation #top-menu > li:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent) > a,
  #et-top-navigation #top-menu > li.ym-mega-li.ym-mega-offen > a{background-size:calc(100% - 1.2rem) 2px}

  #et-top-navigation .ym-konto{margin-left:8px}
  #et-top-navigation .ym-konto a.ym-konto__link{padding:0 16px;font-size:14px}
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet{padding:0 16px 0 12px}
}
@media (min-width:981px) and (max-width:1199px){
  #main-header:not(.et-fixed-header) #logo{max-height:76px}
}
@media (min-width:981px) and (max-width:1100px){
  #main-header:not(.et-fixed-header) #logo{max-height:68px}
}
/* bis 1150 px: "Mein Konto" mit Icon ist 30 px breiter als "Anmelden" und
   lag bei 1101 px 4 px über dem Logo, deshalb hier noch nur das Icon */
@media (min-width:981px) and (max-width:1150px){
  #et-top-navigation .ym-konto a.ym-konto__link,
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet{width:40px;padding:0}
  #et-top-navigation .ym-konto a.ym-konto__link--gast .ym-konto__ikon{display:inline-grid}
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__fav--zahl{width:auto;padding:0 12px 0 10px}
  #et-top-navigation .ym-konto .ym-konto__text{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }
}

/* Gäste: „Anmelden“ mit Wort schon ab 1001 px (gemessen: Abstand Logo bis Menü dann noch über 50 px).
   Nur 981 bis 1000 px bleibt das Symbol. Mitglieder (Mein Konto, Herz) behalten das Symbol bis 1150 px. */
@media (min-width:1001px) and (max-width:1150px){
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__link--gast{width:auto;padding:0 16px;font-size:14px}
  #et-top-navigation .ym-konto a.ym-konto__link--gast .ym-konto__ikon{display:none}
  #et-top-navigation .ym-konto a.ym-konto__link--gast .ym-konto__text{
    position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;clip-path:none;white-space:nowrap;
  }
}

/* „Mitglied werden“ bleibt auch bis 1150 px ein Knopf mit Wort (der Icon-Knopf
   daneben ist dort nur 40 px breit, dieser braucht sein Wort). */
@media (min-width:981px) and (max-width:1150px){
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__link--werden{width:auto;padding:0 16px;font-size:14px}
  #et-top-navigation .ym-konto a.ym-konto__link--werden .ym-konto__text{
    position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;clip-path:none;white-space:nowrap;
  }
}

/* Handy: Personen-Icon links neben dem Hamburger */
@media (max-width:980px){
  #et-top-navigation .ym-konto a.ym-konto__link--werden{display:none !important}
  #et-top-navigation .ym-konto{display:flex;align-items:center;margin:0}
  #et-top-navigation .ym-konto a.ym-konto__link{
    position:relative;width:44px;height:44px;padding:0;
    border:0;border-radius:50%;background:transparent;
    color:var(--ym-mm-navy);
    transition:background-color .2s ease;
  }
  /* Mitglieder: Icon auf hellem Kreis, damit der Zustand sichtbar ist */
  /* Gast und angemeldet gleich: Symbol auf hellem Kreis (Jens 03.10.2026) */
  #et-top-navigation .ym-konto a.ym-konto__link{background:var(--ym-mm-hell)}
  #et-top-navigation .ym-konto a.ym-konto__link:active{background:var(--ym-mm-flaeche)}
  #et-top-navigation .ym-konto a.ym-konto__link:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:0;
  }
  #et-top-navigation .ym-konto .ym-konto__ikon,
  #et-top-navigation .ym-konto .ym-konto__ikon svg{width:24px;height:24px}
  /* gleiche Strichstärke wie der Hamburger (2 px) */
  #et-top-navigation .ym-konto .ym-konto__ikon svg{stroke-width:2}
  /* Text nur für Screenreader, das Icon trägt die Optik */
  #et-top-navigation .ym-konto .ym-konto__text{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }

  /* Herz neben dem Konto-Symbol, die Zahl als kleines Schild oben rechts.
     8 px zwischen allen runden Knöpfen, auch zum Hamburger. */
  #et-top-navigation .ym-konto{gap:8px;margin-right:8px}
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__fav{background:var(--ym-mm-hell)}
  #et-top-navigation .ym-konto a.ym-konto__link.ym-konto__fav:active{background:var(--ym-mm-flaeche)}
  .ym-konto__fav .ym-konto__zahl{
    position:absolute;top:0;right:-2px;
    min-width:18px;height:18px;box-sizing:border-box;padding:0 5px;
    border-radius:999px;background:var(--ym-mm-navy);color:#fff;
    font-size:11px;font-weight:600;line-height:18px;text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .ym-konto__fav:not(.ym-konto__fav--zahl) .ym-konto__zahl{display:none}
}

/* Unter 981 px gibt es kein Panel */
@media (max-width:980px){
  .ym-mega,.ym-mega-bruecke{display:none !important}
}

/* =========================================================
   Handy: Vollbild-Menü (Neugestaltung 02.10.2026)
   Hell mit feinem Punkteraster ("Matrix"), Divis Logo und der zum X
   gewordene Hamburger bleiben oben stehen, große Hauptpunkte linksbündig, Bibliothek als
   aufklappbarer Bereich mit Bildkarten und Format-Knöpfen, unten eine
   feste Fußleiste mit Mitgliedschaft und Kontakt.

   Überschreibt menue.css. Alle Selektoren beginnen mit
   ".mobile_nav ul.et_mobile_menu" und sind damit spezifischer als
   menue.css und Divi, auch wenn deren Regeln später im Dokument stehen
   (Code-Module im Seitenkörper). !important nur dort, wo menue.css,
   Divi oder jQuery (Inline-Stil beim Auf- und Zuklappen) es erzwingen.
   Kopf- und Fußleiste baut megamenue.js; erst dann setzt es
   body.ym-mm-bereit und stellt die Kopfleiste beim Öffnen fest.
   ========================================================= */
@media (max-width:980px){

  /* ---------- Fläche ---------- */
  .mobile_nav ul.et_mobile_menu{
    /* gleiche Fluchtlinie wie die Kopfleiste (Raster Tablet 32 px, Handy
       20 px, siehe ym-seitenweit.css): Logo, Einträge, Fußknöpfe und X
       stehen links und rechts auf einer Linie */
    --ym-mm-innen:32px;
    --ym-mm-aus:cubic-bezier(.215,.61,.355,1);
    box-sizing:border-box;
    padding:0 !important;
    justify-content:flex-start !important;
    height:100vh !important;height:100dvh !important;
    max-height:none !important;
    overflow-x:hidden !important;overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fff !important;
    color:var(--ym-mm-tinte);
    text-align:left;
    transition:opacity .2s ease-out,visibility 0s linear .2s;
  }
  body.ym-offen .mobile_nav ul.et_mobile_menu{transition:opacity .2s ease-out,visibility 0s}
  @media (max-width:767px){
    .mobile_nav ul.et_mobile_menu{--ym-mm-innen:20px}
  }

  /* Punkteraster, läuft nach unten aus. Liegt fest im Bild und
     scrollt nicht mit, die Einträge gleiten darüber. */
  .mobile_nav ul.et_mobile_menu::before{
    content:"";position:fixed;left:0;right:0;top:0;height:78vh;z-index:0;
    pointer-events:none;
    background-image:radial-gradient(circle,rgba(10,137,197,.08) 1.3px,transparent 1.9px);
    background-size:18px 18px;background-position:4px 4px;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  }

  /* ---------- Einträge: Grundform und Einblenden ---------- */
  .mobile_nav ul.et_mobile_menu > li{
    position:relative;z-index:1;flex:none;
    margin:0 var(--ym-mm-innen) !important;
    padding:0 !important;
    border:0 !important;
    list-style:none;
    opacity:0;transform:translateY(8px);filter:none;
    transition:opacity .22s var(--ym-mm-aus),transform .22s var(--ym-mm-aus);
    transition-delay:0s;
  }
  body.ym-offen .mobile_nav ul.et_mobile_menu > li{
    opacity:1;transform:none;filter:none;
    /* Versatz 35 ms je Eintrag, Reihenfolge setzt megamenue.js (--ym-i) */
    transition-delay:calc(40ms + var(--ym-i,0) * 35ms);
  }

  /* ---------- Hauptpunkte ---------- */
  .mobile_nav ul.et_mobile_menu > li.menu-item{border-bottom:1px solid var(--ym-mm-linie) !important}
  .mobile_nav ul.et_mobile_menu > li.menu-item > a{
    position:relative;display:flex !important;align-items:center;
    min-height:64px;box-sizing:border-box;
    margin:0;padding:14px 0 !important;
    border:0 !important;border-radius:0;
    background:none !important;box-shadow:none;
    color:var(--ym-mm-navy) !important;opacity:1 !important;
    font-size:clamp(23px,6.6vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.015em;
    text-align:left;text-decoration:none;white-space:normal;hyphens:manual;
    transform:none !important;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s ease;
  }
  .mobile_nav ul.et_mobile_menu > li.menu-item > a::after{display:none !important}
  .mobile_nav ul.et_mobile_menu > li.menu-item > a:active{color:var(--ym-mm-cyan-text) !important}
  .mobile_nav ul.et_mobile_menu > li.menu-item > a:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;border-radius:8px;
  }

  /* aktiver Punkt: Pille wie am Desktop (Kritik R14 F6, Jens 04.10.2026: kein Punkt).
     Die Fläche hängt links in den Randabstand, damit der Text mit dem Logo fluchtet. */
  .mobile_nav ul.et_mobile_menu > li:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor) > a{
    color:var(--ym-mm-navy) !important;isolation:isolate;
  }
  .mobile_nav ul.et_mobile_menu > li:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor) > a::before{
    content:"";position:absolute;z-index:-1;left:-14px;top:9px;bottom:9px;
    width:calc(100% + 28px);max-width:none;border-radius:999px;
    background:rgba(37,56,93,.07);
  }

  /* ---------- Aufklapp-Knopf (Bibliothek) ---------- */
  .mobile_nav ul.et_mobile_menu > li.ym-mega-li-mobil > a{padding-right:56px !important}
  .mobile_nav ul.et_mobile_menu > li > .ym-auf-knopf{
    position:absolute;top:10px;right:0;left:auto;z-index:2;
    width:44px;height:44px;margin:0;padding:0;
    border:0;border-radius:50%;
    background:var(--ym-mm-flaeche);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .2s ease;
  }
  .mobile_nav ul.et_mobile_menu > li > .ym-auf-knopf::before{
    content:"";position:absolute;top:50%;left:50%;
    width:9px;height:9px;margin:-7px 0 0 -5px;
    border:0;border-right:2px solid var(--ym-mm-navy);border-bottom:2px solid var(--ym-mm-navy);
    transform:rotate(45deg);
    transition:transform .25s var(--ym-mm-aus),border-color .2s ease;
  }
  .mobile_nav ul.et_mobile_menu > li.ym-auf > .ym-auf-knopf{background:var(--ym-mm-hell)}
  .mobile_nav ul.et_mobile_menu > li.ym-auf > .ym-auf-knopf::before{
    transform:translateY(4px) rotate(225deg);
    border-color:var(--ym-mm-cyan-text);
  }
  .mobile_nav ul.et_mobile_menu > li > .ym-auf-knopf:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;border-radius:50%;
  }

  /* ---------- Bibliothek: aufklappbarer Bereich ----------
     grid-template-rows 0fr -> 1fr, keine Höhen-Animation. Das Element
     trägt bewusst nicht die Klasse "sub-menu", damit die
     max-height-Regeln aus menue.css und Divis "li ul"-Regeln nicht greifen. */
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil{
    display:grid;grid-template-rows:0fr;
    visibility:hidden;
    transition:grid-template-rows .3s var(--ym-mm-kurve),visibility 0s linear .3s;
  }
  .mobile_nav ul.et_mobile_menu li.ym-auf > .ym-mega-mobil{
    grid-template-rows:1fr;visibility:visible;
    transition:grid-template-rows .32s var(--ym-mm-kurve),visibility 0s;
  }
  /* seitlich 4 px Luft, damit Fokusrahmen nicht abgeschnitten werden */
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil__innen{
    min-height:0;overflow:hidden;margin:0 -4px;padding:0 4px;
  }
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil__fuellung{padding:2px 0 22px}

  /* Blöcke gleiten nacheinander ein (--ym-j setzt megamenue.js) */
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil__fuellung > *{
    opacity:0;transform:translateY(8px);
    transition:opacity .22s var(--ym-mm-aus),transform .22s var(--ym-mm-aus);
  }
  .mobile_nav ul.et_mobile_menu li.ym-auf .ym-mega-mobil__fuellung > *{
    opacity:1;transform:none;
    transition-delay:calc(70ms + var(--ym-j,0) * 35ms);
  }

  .mobile_nav ul.et_mobile_menu .ym-mega-mobil p.ym-mm-titel{
    margin:14px 0 10px;padding:0;
    font-size:14px;font-weight:600;line-height:1.3;
    letter-spacing:0;text-transform:none;
    color:var(--ym-mm-grau);
  }
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil p.ym-mm-titel:first-child{margin-top:6px}

  /* (a) die vier Gänge als Bildkarten 2 x 2 */
  .mobile_nav ul.et_mobile_menu .ym-mm-raster{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
    margin:0;padding:0;
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-raster__punkt{margin:0;padding:0;min-width:0}
  /* Tablet (768 bis 980 px): Themen und Formate je vier nebeneinander. 2 x 2 machte die
     Themenkarten 453 x 340 px groß, das Menü wuchs mit offener Bibliothek auf 1422 px
     (Kritik R13, N30); „Wir für euch“ und „Kontakt“ lagen zwei Bildschirme tiefer. */
  @media (min-width:768px){
    .mobile_nav ul.et_mobile_menu .ym-mm-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-karte{
    position:relative;display:block !important;
    aspect-ratio:4/3;overflow:hidden;isolation:isolate;
    margin:0;padding:0 !important;
    border:0 !important;border-radius:12px;
    background:var(--ym-mm-hell) !important;box-shadow:none;
    color:#fff !important;opacity:1 !important;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile_nav ul.et_mobile_menu img.ym-mm-karte__bild{
    position:absolute;inset:0;display:block;
    width:100%;height:100%;max-width:none;margin:0;
    object-fit:cover;object-position:50% 50%;
    border-radius:0;box-shadow:none;
    transition:transform .3s var(--ym-mm-aus);
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-karte:active img.ym-mm-karte__bild{transform:scale(1.03)}
  .mobile_nav ul.et_mobile_menu .ym-mm-karte__titel{
    position:absolute;left:0;right:0;bottom:0;z-index:1;
    padding:30px 10px 9px;
    background:linear-gradient(to top,rgba(25,51,62,.9) 0%,rgba(25,51,62,.6) 50%,rgba(25,51,62,0) 100%);
    color:#fff;
    font-size:14px;font-weight:700;line-height:1.25;letter-spacing:0;
    text-align:left;hyphens:manual;overflow-wrap:normal;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-karte:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;
  }
  /* aktuelle Themenseite: Aqua-Ring über dem Bild statt Punkt vor dem Titel (R14 F6) */
  .mobile_nav ul.et_mobile_menu a.ym-mm-karte[aria-current="page"]::after{
    content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 0 0 3px var(--ym-mm-aqua);
  }

  /* (b) Formate als Knöpfe 2 x 2, Icon oben, Text darunter */
  .mobile_nav ul.et_mobile_menu a.ym-mm-format{
    display:flex !important;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:8px;height:100%;min-height:44px;box-sizing:border-box;
    margin:0;padding:12px !important;
    border:1px solid var(--ym-mm-linie) !important;border-radius:12px;
    background:#fff !important;box-shadow:none;
    color:var(--ym-mm-navy) !important;opacity:1 !important;
    font-size:14px;font-weight:600;line-height:1.25;letter-spacing:0;
    text-align:left;text-decoration:none;hyphens:manual;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .2s ease,border-color .2s ease;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-format:active{
    background:var(--ym-mm-flaeche) !important;border-color:#C6D4DE !important;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-format[aria-current="page"]{
    border-color:var(--ym-mm-cyan) !important;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-format:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-ikon{
    flex:none;display:inline-grid;place-items:center;
    width:32px;height:32px;border-radius:8px;
    background:var(--ym-mm-hell);color:var(--ym-mm-navy);
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-ikon svg{display:block;width:18px;height:18px}

  /* (c) Zur Bibliothek */
  .mobile_nav ul.et_mobile_menu .ym-mm-weiter-zeile{margin:10px 0 0}
  .mobile_nav ul.et_mobile_menu a.ym-mm-weiter{
    display:inline-flex !important;align-items:center;gap:8px;
    min-height:44px;margin:0;padding:0 2px !important;
    border:0 !important;background:none !important;
    color:var(--ym-mm-cyan-text) !important;opacity:1 !important;
    font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-weiter__pfeil{transition:transform .2s var(--ym-mm-aus)}
  .mobile_nav ul.et_mobile_menu a.ym-mm-weiter:active .ym-mm-weiter__pfeil{transform:translateX(3px)}
  .mobile_nav ul.et_mobile_menu a.ym-mm-weiter:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;border-radius:6px;
  }

  /* ---------- Kopf: Divis Logo und Hamburger bleiben über dem Menü ----------
     Der Kopf-Eintrag hält nur ihren Platz frei (Höhe der Kopfleiste, setzt
     menue.js als --ym-kopfhoehe) und bekommt beim Scrollen Grund und Linie. */
  .mobile_nav ul.et_mobile_menu > li.ym-mm-kopf{
    position:sticky;top:0;z-index:3;
    display:block;flex:none;
    height:var(--ym-kopfhoehe,84px);box-sizing:border-box;
    margin:0 0 6px !important;padding:0 !important;
    background-color:rgba(255,255,255,0);
    border-bottom:1px solid transparent !important;
    opacity:1;transform:none;pointer-events:none;
    transition:background-color .2s ease,border-color .2s ease;
  }
  body.ym-offen .mobile_nav ul.et_mobile_menu > li.ym-mm-kopf{transition-delay:0s}
  .mobile_nav ul.et_mobile_menu.ym-mm-gescrollt > li.ym-mm-kopf{
    background-color:#fff;
    border-bottom-color:var(--ym-mm-linie) !important;
  }

  /* Kopfleiste steht fest oben, solange das Menü offen ist: Logo und X
     bleiben an ihrem Platz, auch wenn die Seite ein Stück gescrollt war.
     menue.css stellt das Logo beim Öffnen auf "relative"; dadurch rutschte
     die Navigation in eine zweite Zeile und die Kopfleiste sprang. */
  body.ym-mm-bereit.ym-offen #main-header{position:fixed !important}
  body.ym-mm-bereit.ym-offen #main-header .logo_container{position:absolute;z-index:99999}

  /* ---------- Hamburger: drei feine Striche, wird zum X ---------- */
  .mobile_nav .mobile_menu_bar{
    position:relative;display:block;
    width:44px;height:44px;box-sizing:border-box;
    /* 44 px auf hellem Kreis wie Konto und Herz (Kritik 03.10.2026) */
    margin:0;padding:0 !important;
    border-radius:50%;background:var(--ym-mm-hell);cursor:pointer;z-index:99999;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile_nav .mobile_menu_bar:focus-visible{outline:2px solid var(--ym-mm-cyan);outline-offset:0}
  .mobile_nav .mobile_menu_bar:active{background:var(--ym-mm-flaeche)}
  .mobile_nav .mobile_menu_bar .ym-burger{position:absolute;inset:0;pointer-events:none}
  .mobile_nav .mobile_menu_bar .ym-burger i{
    position:absolute;left:11px;right:auto;top:15px;
    width:22px;height:2px;border-radius:2px;
    background:var(--ym-mm-navy);
    opacity:1;transform:none;transform-origin:50% 50%;
    transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .22s cubic-bezier(.22,1,.36,1);
  }
  .mobile_nav .mobile_menu_bar .ym-burger i:nth-child(2){
    top:21px;left:17px;width:16px;transform-origin:100% 50%;
  }
  .mobile_nav .mobile_menu_bar .ym-burger i:nth-child(3){top:27px}
  body.ym-offen .mobile_nav .mobile_menu_bar .ym-burger i{background:var(--ym-mm-navy)}
  body.ym-offen .mobile_nav .mobile_menu_bar .ym-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.ym-offen .mobile_nav .mobile_menu_bar .ym-burger i:nth-child(2){opacity:0;transform:scaleX(0)}
  body.ym-offen .mobile_nav .mobile_menu_bar .ym-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ---------- Fußleiste: fest unten, mit Safe-Area ---------- */
  .mobile_nav ul.et_mobile_menu > li.ym-mm-fuss{
    position:sticky;bottom:0;z-index:3;
    margin:auto 0 0 !important;
    padding:14px var(--ym-mm-innen) calc(4px + env(safe-area-inset-bottom)) !important;
    background:var(--ym-mm-flaeche);
    border-top:1px solid var(--ym-mm-linie) !important;
  }
  /* passt der Link nicht mehr daneben (unter 360 px), rutscht er in die
     nächste Zeile, statt dass der Knopf zweizeilig wird */
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__aktion{
    display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
  }
  /* „Meine Favoriten“ steht im Fuß, der gleiche Punkt der Liste fällt weg */
  .mobile_nav ul.et_mobile_menu > li:has(> a[href$="/meine-favoriten/"]){display:none !important}
  .mobile_nav ul.et_mobile_menu a.ym-mm-knopf{
    flex:1 1 auto;min-width:0;max-width:280px;
    display:flex !important;align-items:center;justify-content:center;
    min-height:48px;box-sizing:border-box;
    margin:0;padding:6px 16px !important;
    border:0 !important;border-radius:999px;
    background:var(--ym-mm-navy) !important;box-shadow:none;
    color:#fff !important;opacity:1 !important;
    /* Weiß auf Navy 11,6:1 */
    font-size:18px;font-weight:700;line-height:1.2;letter-spacing:0;
    text-align:center;text-decoration:none;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .2s ease;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-knopf:active{background:#1C2C4A !important}
  .mobile_nav ul.et_mobile_menu a.ym-mm-knopf:focus-visible{
    outline:2px solid var(--ym-mm-navy);outline-offset:3px;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-textlink{
    flex:none;
    display:inline-flex !important;align-items:center;justify-content:center;
    min-height:50px;min-width:44px;box-sizing:border-box;
    margin:0;padding:0 8px !important;
    border:0 !important;background:none !important;
    color:var(--ym-mm-navy) !important;opacity:1 !important;
    font-size:15px;font-weight:700;line-height:1.2;
    text-decoration:none;white-space:nowrap;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-textlink:active{color:var(--ym-mm-cyan-text) !important}
  .mobile_nav ul.et_mobile_menu a.ym-mm-textlink:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:-2px;border-radius:999px;
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__kontakt{
    display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;
    margin:4px 0 0;
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__kontakt a{
    display:inline-flex !important;align-items:center;
    min-height:44px;margin:0;padding:0 !important;
    border:0 !important;background:none !important;
    color:var(--ym-mm-grau) !important;opacity:1 !important;
    font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;
  }
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__kontakt a:active{color:var(--ym-mm-cyan-text) !important}
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__kontakt a:focus-visible{
    outline:2px solid var(--ym-mm-cyan);outline-offset:2px;border-radius:4px;
  }

  /* ---------- weitere Divi-Untermenüs, falls Jens welche anlegt ---------- */
  .mobile_nav ul.et_mobile_menu .sub-menu li a{
    text-align:left;color:var(--ym-mm-tinte) !important;
    padding:.7rem 0 !important;
  }
  .mobile_nav ul.et_mobile_menu .sub-menu .current-menu-item > a{color:var(--ym-mm-cyan-text) !important}
}

/* =========================================================
   Bewegung reduzieren
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .ym-mega,.ym-mega__flaeche,.ym-mega__ikon,
  .ym-mega a.ym-mega__link{transition:none !important}
  .ym-mega__flaeche{transform:none !important}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){
  .mobile_nav ul.et_mobile_menu,
  .mobile_nav ul.et_mobile_menu > li,
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil,
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil__fuellung > *,
  .mobile_nav ul.et_mobile_menu .ym-auf-knopf::before,
  .mobile_nav ul.et_mobile_menu img.ym-mm-karte__bild,
  .mobile_nav ul.et_mobile_menu .ym-mm-weiter__pfeil,
  .mobile_nav .mobile_menu_bar .ym-burger i{transition:none !important}
  .mobile_nav ul.et_mobile_menu > li,
  .mobile_nav ul.et_mobile_menu .ym-mega-mobil__fuellung > *{opacity:1 !important;transform:none !important}
}

/* =========================================================
   Konto-Menü unter „Mein Konto“ (includes/kopf.php, 03.10.2026)
   Weiße Fläche, Rand 1 px, Radius 16, keine Schatten. Öffnen über
   transform/opacity 160 ms ab dem Knopf. Handy: Fläche von unten.
   ========================================================= */
.ym-konto__menue{
  position:absolute;top:calc(100% + 10px);right:0;z-index:100000;
  width:300px;box-sizing:border-box;padding:8px;
  background:#fff;border:1px solid #DCE4EA;border-radius:16px;
  text-align:left;transform-origin:top right;
  font-family:inherit;line-height:1.3;
}
.ym-konto__menue[hidden]{display:none}
.ym-konto__menue--auf{animation:ym-konto-auf .16s ease-out both}
@keyframes ym-konto-auf{from{opacity:0;transform:translateY(-4px) scale(.97)}}
.ym-konto__kopf{padding:10px 14px 10px}
#et-top-navigation .ym-konto__menue p{margin:0;padding:0}
#et-top-navigation .ym-konto__menue .ym-konto__hallo{font-size:16px;font-weight:600;color:var(--ym-mm-navy,#25385D)}
#et-top-navigation .ym-konto__menue .ym-konto__mail{margin-top:2px;font-size:13px;font-weight:400;color:#5C6772;overflow-wrap:anywhere}
#et-top-navigation .ym-konto__menue ul.ym-konto__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#et-top-navigation .ym-konto__menue ul.ym-konto__liste li{list-style:none;margin:0;padding:0;line-height:1.3}
#et-top-navigation .ym-konto__menue a{
  display:flex;flex-direction:column;justify-content:center;
  position:relative;min-height:44px;box-sizing:border-box;padding:6px 14px 6px 28px;margin:0;
  border-radius:12px;background:transparent;border:0;
  color:var(--ym-mm-navy,#25385D);font-size:15px;font-weight:500;line-height:1.3;
  text-decoration:none;white-space:normal;
  transition:background-color .15s ease;
}
#et-top-navigation .ym-konto__menue a small{font-size:13px;font-weight:400;color:#5C6772}
#et-top-navigation .ym-konto__menue a:hover{background:rgba(37,56,93,.08);color:#1C2C4A}
#et-top-navigation .ym-konto__menue a.ym-konto__leise:hover,#et-top-navigation .ym-konto__menue a.ym-konto__abmelden:hover{color:#1C2C4A}
#et-top-navigation .ym-konto__menue a[aria-current="page"]{background:rgba(37,56,93,.1);font-weight:600}
#et-top-navigation .ym-konto__menue a[aria-current="page"]::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ym-mm-aqua,#7FD8DC)}
#et-top-navigation .ym-konto__menue a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ym-mm-cyan,#0A89C5)}
#et-top-navigation .ym-konto__menue a.ym-konto__leise{font-weight:400;font-size:14px;color:#5C6772}
#et-top-navigation .ym-konto__menue a.ym-konto__abmelden{font-weight:600;color:#5C6772}
.ym-konto__trenner{height:1px;background:#DCE4EA;margin:6px 8px}
.ym-konto__decke{display:none}
.ym-konto__griff,#et-top-navigation .ym-konto__menue .ym-konto__schliessen{display:none}

@media (max-width:980px){
  .ym-konto__menue{
    position:fixed;top:auto;right:0;bottom:0;left:0;width:auto;
    max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;
    padding:8px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;border-width:1px 0 0;
    transform-origin:bottom center;
  }
  .ym-konto__menue--auf{animation:ym-konto-sheet .2s ease-out both}
  @keyframes ym-konto-sheet{from{transform:translateY(100%)}}
  .ym-konto__decke{display:block;position:fixed;inset:0;z-index:99998;background:rgba(25,40,68,.32);animation:ym-konto-decke .2s ease-out both}
  @keyframes ym-konto-decke{from{opacity:0}}
  #et-top-navigation .ym-konto__menue a{min-height:48px;font-size:16px}
  /* Griff oben und ein Knopf zum Schließen (Fläche von unten) */
  .ym-konto__griff{display:block;width:40px;height:4px;margin:4px auto 6px;border-radius:2px;background:#C3D0D9}
  #et-top-navigation .ym-konto__menue .ym-konto__schliessen{
    display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:8px 0 0;
    border:1.5px solid #DCE4EA;border-radius:999px;background:#fff;
    color:var(--ym-mm-navy,#25385D);font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  }
  #et-top-navigation .ym-konto__menue .ym-konto__schliessen:active{background:var(--ym-mm-flaeche)}
  #et-top-navigation .ym-konto__menue .ym-konto__schliessen:focus-visible{outline:2px solid var(--ym-mm-cyan,#0A89C5);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){
  .ym-konto__menue--auf,.ym-konto__decke{animation:none}
}

/* Aufklapp-Pfeil an „Mein Konto“ (nur angemeldet, wie bei „Bibliothek Matrix“) */
@media (min-width:981px){
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet[data-ym-konto-knopf]::after{
    content:"";flex:none;box-sizing:content-box;
    width:.42rem;height:.42rem;margin:-.2rem 0 0 1px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);opacity:.65;
    transition:transform .16s ease-out,opacity .16s ease-out;
  }
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet[data-ym-konto-knopf][aria-expanded="true"]::after{
    transform:rotate(225deg);margin-top:.25rem;opacity:1;
  }
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet[data-ym-konto-knopf]{padding-right:16px}
}
@media (min-width:981px) and (max-width:1150px){
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet[data-ym-konto-knopf]{width:auto;padding:0 12px 0 11px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  #et-top-navigation .ym-konto a.ym-konto__link--angemeldet[data-ym-konto-knopf]::after{transition:none}
}

/* ---------- Aufklapp-Knopf neben „Bibliothek Matrix“ (03.10.2026) ----------
   Muster Disclosure-Navigation (WAI-ARIA APG): Der Link bleibt Link, der Knopf
   liegt unsichtbar über dem gezeichneten Haken und trägt aria-expanded.
   Fokus allein öffnet nichts; Enter/Leertaste/Pfeil runter öffnen. */
@media (min-width:981px){
  #top-menu li.ym-mega-li > button.ym-mega-aufklapp{
    position:absolute;z-index:2;top:50%;right:0;
    width:1.7rem;min-width:24px;height:2.25rem;margin:-1.125rem 0 0;padding:0;
    border:0;border-radius:999px;background:transparent;color:inherit;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  #top-menu li.ym-mega-li > button.ym-mega-aufklapp:focus{outline:none}
  #top-menu li.ym-mega-li > button.ym-mega-aufklapp:focus-visible{outline:3px solid var(--ym-cyan,#0A89C5);outline-offset:0}
}
@media (min-width:981px) and (max-width:1339px){
  #et-top-navigation #top-menu li.ym-mega-li > button.ym-mega-aufklapp{width:1.5rem}
}
@media (max-width:980px){
  .ym-mega-aufklapp{display:none !important}
}

/* Handy-Menü: „Anmelden“ als Rand-Knopf neben „Mitglied werden“ (Navy gefüllt) */
@media (max-width:980px){
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__aktion{gap:8px}
  .mobile_nav ul.et_mobile_menu a.ym-mm-knopf.ym-mm-knopf--rand{
    flex:0 1 auto;padding:6px 22px !important;
    background:transparent !important;color:var(--ym-mm-navy) !important;
    border:2px solid var(--ym-mm-navy) !important;font-size:16px;
  }
  .mobile_nav ul.et_mobile_menu a.ym-mm-knopf.ym-mm-knopf--rand:active{background:var(--ym-mm-navy) !important;color:#fff !important}
  .mobile_nav ul.et_mobile_menu .ym-mm-weiter-zeile{display:flex;flex-wrap:wrap;gap:0 24px}
}

/* Handy und Tablet: Divi schreibt die gemessene Logobreite als padding-left an
   #et-top-navigation und lässt es 0,4 s lang wachsen (0 → 187 px bei 390 px).
   Rechts ausgerichtet sieht man nichts, der Browser zählt es aber als
   Layout-Verschiebung (gemessen 0,011 auf jeder Seite). Wie am Desktop aus. */
@media (max-width:980px){
  #main-header #et-top-navigation{padding-left:0 !important;transition:none !important}
}
/* Schmal (unter 481 px) passen beide Knöpfe nicht nebeneinander: untereinander, gleich breit */
@media (max-width:480px){
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__aktion.ym-nur-gast{flex-direction:column;align-items:stretch}
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__aktion.ym-nur-gast a.ym-mm-knopf{max-width:none;width:100%;flex:none}
  .mobile_nav ul.et_mobile_menu .ym-mm-fuss__aktion.ym-nur-gast a.ym-mm-knopf--rand{min-height:48px}
}

/* Punkteraster im Handy-Menü aus (Jens 04.10.2026). Zum Zurückholen diesen Block entfernen. */
@media (max-width:980px){
  .mobile_nav ul.et_mobile_menu::before{content:none}
}