/* RYKE – Mobile Navigation Ergänzung | 21.09.2026
   Desktop bleibt bei der bestehenden ryke-nav.css.
   Diese Datei greift primär bis 900 px und macht die Navigation touch-tauglich. */

.ryke-nav__mobile-brand,
.ryke-nav__mobile-menu{
  display:none !important;
}

@media (max-width:900px){
  .ryke-nav-shell{
    z-index:10050 !important;
  }

  /* Hero-/Bildseiten: eine klare mobile Leiste verdeckt die winzige Desktop-Navigation im Motiv. */
  .visual-hero > .ryke-nav-shell,
  .subpage-nav > .ryke-nav-shell{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-height:64px !important;
    padding:8px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:rgba(247,242,234,.97) !important;
    border-bottom:1px solid rgba(183,132,47,.34) !important;
    box-shadow:0 5px 18px rgba(25,43,39,.10) !important;
    backdrop-filter:blur(10px) !important;
  }

  .subpage-nav{
    position:relative !important;
  }
  .subpage-nav > img{
    min-height:64px !important;
  }

  /* Text-/Standardheader: vorhandenes Logo bleibt sichtbar, nur der CTA wird auf Mobile ausgeblendet. */
  .text-header,
  .site-header{
    position:relative !important;
    z-index:10040 !important;
  }
  .text-header > .text-cta,
  .site-header > .header-cta{
    display:none !important;
  }
  .text-header > .ryke-nav-shell,
  .site-header > .ryke-nav-shell{
    position:relative !important;
    margin-left:auto !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .ryke-nav__mobile-brand{
    display:inline-flex !important;
    align-items:center !important;
    min-height:44px !important;
    color:#806135 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:22px !important;
    letter-spacing:.12em !important;
    text-decoration:none !important;
  }
  .text-header .ryke-nav__mobile-brand,
  .site-header .ryke-nav__mobile-brand{
    display:none !important;
  }

  .ryke-nav__mobile-menu{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-width:88px !important;
    min-height:46px !important;
    padding:10px 13px !important;
    border:1px solid rgba(183,132,47,.62) !important;
    border-radius:2px !important;
    background:#f8f3ea !important;
    color:#2c2925 !important;
    font:600 14px/1 Arial,Helvetica,sans-serif !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }
  .ryke-nav__mobile-icon{
    font-size:18px !important;
    line-height:1 !important;
  }

  .ryke-nav-shell > .ryke-nav{
    display:none !important;
    position:absolute !important;
    top:calc(100% + 1px) !important;
    right:0 !important;
    left:auto !important;
    width:min(390px,calc(100vw - 24px)) !important;
    max-width:none !important;
    max-height:calc(100vh - 82px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    padding:8px !important;
    margin:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
    background:#f7f2ea !important;
    border:1px solid rgba(183,132,47,.38) !important;
    box-shadow:0 18px 40px rgba(25,43,39,.22) !important;
    z-index:10060 !important;
  }
  .visual-hero > .ryke-nav-shell > .ryke-nav,
  .subpage-nav > .ryke-nav-shell > .ryke-nav{
    left:12px !important;
    right:12px !important;
    width:auto !important;
  }
  .ryke-nav-shell.mobile-open > .ryke-nav{
    display:flex !important;
  }

  .ryke-nav__group{
    position:relative !important;
    width:100% !important;
    border-bottom:1px solid rgba(183,132,47,.18) !important;
  }
  .ryke-nav__group:last-of-type{
    border-bottom:1px solid rgba(183,132,47,.18) !important;
  }
  .ryke-nav__top{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    align-items:center !important;
    width:100% !important;
  }
  .ryke-nav__link,
  .ryke-nav__top > .ryke-nav__link{
    display:flex !important;
    align-items:center !important;
    min-height:50px !important;
    padding:11px 12px !important;
    color:#2d2a26 !important;
    text-decoration:none !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:17px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  .ryke-nav > .ryke-nav__link{
    width:100% !important;
    border-bottom:0 !important;
  }
  .ryke-nav__link[aria-current="page"]{
    color:#8b652d !important;
    font-weight:600 !important;
  }

  .ryke-nav__toggle{
    position:static !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#8b652d !important;
    font-size:23px !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    z-index:auto !important;
  }

  .ryke-nav__dropdown,
  .ryke-nav__dropdown.ryke-nav__dropdown--wide{
    display:none !important;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 0 8px !important;
    background:#efe8dd !important;
    border:0 !important;
    border-top:1px solid rgba(183,132,47,.18) !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .ryke-nav__group:not(.is-open) > .ryke-nav__dropdown,
  .ryke-nav__group:hover:not(.is-open) > .ryke-nav__dropdown,
  .ryke-nav__group:focus-within:not(.is-open) > .ryke-nav__dropdown{
    display:none !important;
  }
  .ryke-nav__group.is-open > .ryke-nav__dropdown{
    display:block !important;
  }
  .ryke-nav__dropdown > a{
    display:block !important;
    width:100% !important;
    min-height:46px !important;
    padding:11px 14px !important;
    color:#38332e !important;
    text-decoration:none !important;
    white-space:normal !important;
  }
  .ryke-nav__dropdown > a strong,
  .ryke-nav__dropdown > a span{
    display:block !important;
  }
  .ryke-nav__dropdown > a strong{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
  }
  .ryke-nav__dropdown > a span{
    margin-top:3px !important;
    font:400 12px/1.35 Arial,Helvetica,sans-serif !important;
    opacity:.76 !important;
  }
  .ryke-nav__dropdown > a[aria-current="page"]{
    background:rgba(183,132,47,.10) !important;
  }

  /* Auf den bildbasierten Unterseiten sind die alten unsichtbaren Desktop-Hotspots mobil nicht nötig. */
  .visual-hero > .hs-logo,
  .subpage-nav > .nav-logo,
  .subpage-nav > .nav-cta{
    pointer-events:none !important;
  }
}

@media (max-width:520px){
  .ryke-nav-shell > .ryke-nav{
    width:calc(100vw - 20px) !important;
  }
  .visual-hero > .ryke-nav-shell > .ryke-nav,
  .subpage-nav > .ryke-nav-shell > .ryke-nav{
    left:8px !important;
    right:8px !important;
  }
}