/* =====================================================================
   Handy-Menue (Kadir, 06.11.2026: "mobil gibts gar kein Menue").
   Bis 768px blendet jede Seite die Menuepunkte aus (header-nav-link),
   weil Logo, Login und Knopf die Zeile fuellen. assets/handy-menue.js
   setzt dort einen Menue-Knopf neben den Kauf-Knopf und oeffnet ein
   Vollbild-Menue mit Home, Masterclass, 1:1 Mentoring und Login.
   Der Login-Link der Kopfzeile wandert am Handy ins Menue.
   ===================================================================== */
.hm-knopf { display: none; }
@media (max-width: 768px) {
  .header-right-links > a[href*="academy.impact-freelance.de/login"] { display: none !important; }
  .hm-knopf { display: inline-flex; align-items: center; justify-content: center; order: 99;
              width: 40px; height: 40px; margin-left: 0.1rem; padding: 0; background: transparent;
              border: 0; cursor: pointer; color: inherit; }
  .hm-knopf span { position: relative; display: block; width: 20px; height: 2px; background: currentColor; transition: transform 200ms ease, opacity 200ms ease; }
  .hm-knopf span::before, .hm-knopf span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform 200ms ease; }
  .hm-knopf span::before { top: -6px; } .hm-knopf span::after { top: 6px; }
  .hm-offen .hm-knopf span { background: transparent; }
  .hm-offen .hm-knopf span::before { transform: translateY(6px) rotate(45deg); }
  .hm-offen .hm-knopf span::after { transform: translateY(-6px) rotate(-45deg); }
  .hm-offen #site-header { background: #111111 !important; }
  .hm-offen .hm-knopf, .hm-offen .logo-nav { color: #F6F6F3; }
  .hm-offen .logo-nav svg path, .hm-offen .logo-nav svg line { fill: #F6F6F3 !important; stroke: #F6F6F3 !important; }
}
.hm-menue { display: none; }
@media (max-width: 768px) {
  .hm-offen { overflow: hidden; }
  .hm-offen .hm-menue { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1000;
                        padding: 6.5rem clamp(2rem, 3vw, 3.5rem) 2.5rem; background: #111111; color: #F6F6F3; }
  .hm-menue a { color: #F6F6F3 !important; text-decoration: none; font-size: 1.75rem; line-height: 1.2; padding: 0.85rem 0;
                border-bottom: 1px solid rgba(255,255,255,0.12); }
  .hm-menue a[aria-current="page"] { color: #D9B38C !important; }
  .hm-menue .hm-menue__login { margin-top: auto; font-size: 1rem; color: rgba(255,255,255,0.7) !important; border: 0; padding-top: 2rem; }
}