/* Mobiles Menü – anna-freund.de
   Wird auf allen Seiten mit Kopfzeile nach dem <style>-Block eingebunden. */

.menu-toggle,.mobile-menu{display:none}

@media(max-width:1080px){
  /* Einheitlicher Umschaltpunkt: ab 1080px passt die volle Navigation inkl. FAQ in eine Zeile */
  header nav a:not(.cta){display:none}
  header{position:sticky}

  /* "Erstgespräch vereinbaren" bleibt immer in der Kopfzeile sichtbar */
  header nav{margin-left:auto}

  header .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;margin-left:10px;flex-shrink:0;
    background:transparent;border:1px solid var(--line,#d9d5ca);border-radius:6px;
    cursor:pointer;
  }
  header .menu-toggle:hover{background:var(--sand,#f1eee6)}
  header .menu-toggle:focus-visible{outline:2px solid #79815f;outline-offset:2px}
  .menu-toggle span{
    display:block;height:2px;width:100%;
    background:var(--ink,#173827);transition:transform .2s,opacity .2s;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Aufgeklapptes Menü unter der Kopfzeile */
  header .mobile-menu.open{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--ivory,#fbf9f4);
    border-bottom:1px solid var(--line,#d9d5ca);
    padding:4px 5vw 18px;
    box-shadow:0 12px 24px rgba(23,56,39,.08);
  }
  .mobile-menu a{
    display:block;padding:14px 0;font:16px/1.4 Arial,Helvetica,sans-serif;
    color:#222;text-decoration:none;border-bottom:1px solid var(--line,#d9d5ca);
  }
  .mobile-menu a:last-child{border-bottom:0}
  .mobile-menu a.active{color:var(--olive,#6f7855);font-weight:700}
}

/* Schmale Handys: Logo und Button etwas kompakter, damit alles in eine Zeile passt */
@media(max-width:600px){
  header .brand{font-size:21px}
  header nav .cta{
    display:inline-block;font-size:12px;line-height:1.25;
    padding:9px 12px;max-width:132px;text-align:center;white-space:normal;
  }
}
@media(max-width:380px){
  header .brand{font-size:19px}
  header .brand small{letter-spacing:.12em}
  header nav .cta{max-width:118px;padding:8px 10px}
  header .menu-toggle{width:40px;height:40px;padding:9px;margin-left:8px}
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle span{transition:none}
}

/* Desktop: Menüpunkte nicht umbrechen */
header nav a{white-space:nowrap}