/* ===============================
   RESPONSIVE DESIGN – Azara Luma
   Gültig für alle Seiten
   =============================== */

/* Touchfreundliche Basis */
:root {
  --tap-min: 44px;
}

/* -------------------------------
   Mobile  (bis 600px)
   ------------------------------- */
@media (max-width: 600px){

  .note-card_actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .note-card_actions .btn {
    width: 100%;
    min-height: var(--tap-min);
    padding: 10px 14px;
    font-size: 1rem;
  }

  .groups_grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .note-card_details {
    transition: max-height .35s ease, opacity .25s linear;
  }

  /* Header / Hero (alle Seiten) */
  #page-banner::before,
  #page-banner::after,
  #page-banner .float_shapes,
  #page-banner .hero_slash {
    pointer-events: none !important;
  }

  /* Typografie */
  .lede {
    font-size: clamp(1rem, 2.5vw + .85rem, 1.125rem);
    line-height: 1.45;
  }
}

/* -------------------------------
   Tablet  (601–900px)
   ------------------------------- */
@media (min-width: 601px) and (max-width: 900px){
  .groups_grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* -------------------------------
   Hover-Verhalten auf Touch-Geräten
   ------------------------------- */
@media (hover: none){
  .btn:hover { transform: none; }
  .note-card:hover { box-shadow: none; }
}



/* =========================================
   Handy/Tablet Fixes – Hero, Site-Banner, Footer
   ========================================= */
   /* =========================================
      HARTE MOBILE-RESETS – Startseite (Hero)
      ========================================= */
   @media (max-width: 700px){
     /* 1) Container: einfache Stapelung erzwingen */
     .hero.hero--mystic{
       min-height: unset !important;
       height: auto !important;
       padding-top: 20px;
       padding-bottom: 20px;
     }
     .hero.hero--mystic .hero_layer{
       display: block !important;              /* statt Grid/Flex */
     }

     /* 2) Textblock zuerst, Bild danach (oder umgekehrt – wie du willst) */
     .hero.hero--mystic .hero_card{
       position: static !important;
       margin: 0 0 16px 0 !important;
     }
     .hero.hero--mystic .hero_media{
       position: static !important;            /* absolute/relative aufheben */
       width: 100% !important;
       margin: 0 !important;
     }

     /* 3) Bild sauber einpassen, keine schiefen Rahmen auf Mobile */
     .hero.hero--mystic .frame-tilt{
       transform: none !important;             /* Schrägstellung weg */
     }
     .hero.hero--mystic .hero_media img{
       display: block !important;
       width: 100% !important;
       height: auto !important;
     }

     /* 4) Deko-Layer deaktivieren – verhindern Überdeckung/Klickblocker */
     .hero.hero--mystic .hero_slash,
     .hero.hero--mystic .float_shapes{
       display: none !important;
       pointer-events: none !important;
     }

     /* 5) Typografie & CTA auf Mobile angenehmer */
     .hero.hero--mystic .hero_card h1{
       font-size: clamp(1.25rem, 3.5vw + 1rem, 1.6rem) !important;
       line-height: 1.2 !important;
     }
     .hero.hero--mystic .hero_card .lede{
       font-size: clamp(1rem, 2.5vw + .85rem, 1.1rem) !important;
       line-height: 1.45 !important;
     }
     .hero.hero--mystic .hero_card .cta{
       display: grid !important;
       grid-template-columns: 1fr !important;
       gap: 10px !important;
     }
     .hero.hero--mystic .hero_card .cta .btn{
       width: 100% !important;
       min-height: 48px !important;
       font-size: 1rem !important;
     }
   }

   /* =========================================
      HEADER (Menü) – Mobile-Ansicht
      ========================================= */
   @media (max-width: 700px){

     /* Menü-Container: umbrechen, Abstand */
     header.site-header nav.main-nav,
     .site-header .main-nav,
     #site-header nav.main-nav{
       display: flex !important;
       flex-wrap: wrap !important;
       justify-content: center !important;
       gap: 10px 14px !important;
       padding: 10px 0 !important;
     }

     /* Menülinks fingerfreundlich */
     .main-nav a{
       display: inline-flex !important;
       align-items: center !important;
       justify-content: center !important;
       min-height: 44px !important;
       padding: 6px 14px !important;
       font-size: 1rem !important;
     }

     /* Logo oben, Menü darunter */
     .site-header .brand,
     #site-header .brand{
       display: block !important;
       text-align: center !important;
       margin-bottom: 10px !important;
     }

     /* Deko-/Slash im Header auf Handy ausblenden */
     .site-header .hero_slash,
     #site-header .hero_slash{
       display: none !important;
       pointer-events: none !important;
     }
   }

   /* =========================================
      FOOTER – Mobile-Ansicht
      ========================================= */
   @media (max-width: 700px){
     footer, .site-footer, #site-footer{
       padding: 20px 16px !important;
     }
     footer .footer_grid,
     footer .footer_cols,
     .site-footer .footer_grid,
     .site-footer .footer_cols,
     #site-footer .footer_grid,
     #site-footer .footer_cols{
       display: grid !important;
       grid-template-columns: 1fr !important;
       gap: 12px !important;
     }
     .footer-brand,
     .footer-brand img{
       display: block !important;
       margin: 0 auto !important;
       max-width: 80vw !important;
       width: 100% !important;
       height: auto !important;
     }
     footer p,
     footer li,
     footer a{
       font-size: 1rem !important;
       line-height: 1.45 !important;
       text-align: center !important;
     }
   }
   /* --- NAV: UL wirklich umbrechen lassen --- */
   @media (max-width: 700px){
     .main-nav ul{
       display: flex !important;
       flex-wrap: wrap !important;
       justify-content: center !important;
       gap: 10px 14px !important;
       margin: 0 !important;
       padding: 0 !important;
       list-style: none !important;
     }
     .main-nav li{
       display: contents !important; /* <a> darf direkt im Flexfluss stehen */
     }
   }

   /* --- Header darf nicht clippen --- */
   @media (max-width: 700px){
     header.site-header,
     .site-header,
     #site-header{
       position: relative !important;
       height: auto !important;
       overflow: visible !important;
       z-index: 100 !important; /* vor Banner/Shapes */
     }
   }

   /* --- Falls ein innerer Wrap das Clipping verursacht --- */
   @media (max-width: 700px){
     .site-header .wrap,
     #site-header .wrap{
       overflow: visible !important;
       height: auto !important;
     }
   }

   /* Deko im Header sicher deaktivieren – Kollisionsschutz */
   @media (max-width: 700px){
     .site-header .float_shapes,
     .site-header .hero_slash{
       display: none !important;
       pointer-events: none !important;
     }
   }
   /* Mystic-Thema priorisieren: Grid statt Flex auf Mobil */
   @media (max-width:700px){
     body.theme-mystic header .main-nav ul {
       display: grid !important;
       grid-template-columns: repeat(2, minmax(0,1fr));
       gap: 12px 14px !important;
     }
     body.theme-mystic header .main-nav li { display: contents !important; }
     body.theme-mystic header .main-nav a  { width: 100% !important; }
   }