/* ===== Saturnplaner — gemeinsame Styles (Banner, Navigation, Mobile-Menü) =====
   Zentrale Datei für alle Seiten. Änderungen hier gelten überall.
   Seitenspezifische Farben kommen aus den :root-Variablen der jeweiligen Seite. */

/* iOS/iPad momentum scrolling — stellt sicher dass alle Seiten scrollen */
html { -webkit-overflow-scrolling: touch; overflow-y: auto; }
body { -webkit-overflow-scrolling: touch; overflow-y: auto; }

/* Top-Banner */
.banner{position:fixed;top:0;left:0;right:0;z-index:1100;background:linear-gradient(135deg,#C87090,#9070C8);padding:8px 20px;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;}
.banner span{font-size:13px;font-weight:800;color:white;}
.banner a{background:rgba(255,255,255,0.25);color:white;font-size:12px;font-weight:800;padding:4px 14px;border-radius:20px;text-decoration:none;}

/* Navigation */
nav{position:fixed;top:40px;left:0;right:0;z-index:1000;background:rgba(255,248,240,0.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1.5px solid rgba(247,197,197,0.35);padding:0 40px;height:68px;min-height:68px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-logo-icon{font-size:28px;}
.nav-logo-text{font-family:'Playfair Display',serif;font-size:20px;font-weight:900;color:var(--text);}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;}
.nav-links a{text-decoration:none;font-size:14px;font-weight:700;color:var(--text-light);transition:color 0.2s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.active{color:var(--accent);}
.nav-cta{background:linear-gradient(135deg,var(--rose),var(--peach));color:#7A3030!important;padding:10px 22px;border-radius:50px;box-shadow:0 4px 14px rgba(232,144,144,0.3);}

/* Hamburger + Mobile-Menü */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;z-index:1200!important;position:relative;}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s;}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,248,240,0.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:24px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:'Nunito',sans-serif;font-size:20px;font-weight:800;color:var(--text);text-decoration:none;transition:color 0.2s;}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--accent);}
.mobile-menu .mob-cta{background:linear-gradient(135deg,var(--rose),var(--peach));color:#7A3030!important;padding:14px 32px;border-radius:50px;box-shadow:0 4px 14px rgba(232,144,144,0.3);}
.mobile-close{position:absolute;top:24px;right:24px;background:rgba(247,197,197,0.3);border:none;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;color:var(--text-light);}

/* Mobile: Hamburger statt Links */
@media(max-width:900px){
  .nav-links{display:none !important;}
  .hamburger{display:flex !important;}
  nav{padding:0 20px;}
}

/* NAV HEIGHT FIX — einheitliche Höhe auf allen Seiten */
nav{height:68px !important;min-height:68px !important;box-sizing:border-box !important;align-items:flex-end !important;padding-bottom:14px !important;}
nav .nav-logo,nav .nav-links,nav .hamburger{margin-top:0 !important;margin-bottom:0 !important;}

/* ===== Tastatur-Fokus =====
   Sichtbarer Fokus-Rahmen nur bei Tastatur-Navigation (nicht bei Maus-Klick). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ===== Touch-Targets =====
   Auf echten Touch-Geräten interaktive Elemente auf min. 44px Höhe bringen
   (WCAG / Apple HIG). Desktop bleibt unverändert. */
@media (hover:none) and (pointer:coarse){
  .cat-pill,.poll-btn,.vis-btn,.filter-btn,.nav-cta,.mob-cta,
  .btn,.btn-google,.result-btn,.quiz-back-btn{
    min-height:44px;
    box-sizing:border-box;
  }
  .cat-pill{display:flex;align-items:center;justify-content:center;}
  /* Kleine Icon-Buttons (Suche löschen, Modal schliessen) grösser antippbar */
  [id$="search-clear"],.article-close,.modal-btn-share{min-width:44px;min-height:44px;}
}

/* ===== FIREFOX DARK MODE FIX =====
   In Firefox macht filter auf <body> die Seite unklickbar (Hit-Testing-Bug).
   Nur für Firefox: Filter stattdessen auf dem Root-Element anwenden —
   dort ist der Containing Block der Viewport und Klicks funktionieren. */
@supports (-moz-appearance:none) {
  [data-theme="dark"] body{
    -webkit-filter:none !important;
    filter:none !important;
    pointer-events:auto !important;
  }
  :root[data-theme="dark"]{
    -webkit-filter:invert(0.92) hue-rotate(180deg) brightness(1.1);
    filter:invert(0.92) hue-rotate(180deg) brightness(1.1);
    /* Heller Grund, der durch den Filter dunkel wird — Seiten mit
       transparentem body (Challenge, Planeten, Index …) sonst hell */
    background:#FFF8F0 !important;
  }
  /* Widget & Nach-oben-Knopf hängen direkt an <html> und haben eigene
     Dark-Styles — Root-Filter für sie wieder neutralisieren */
  :root[data-theme="dark"] #cw-widget,
  :root[data-theme="dark"] #cw-overlay,
  :root[data-theme="dark"] #horoModal,
  :root[data-theme="dark"] #sharePopup,
  :root[data-theme="dark"] #backToTop{
    -webkit-filter:invert(1) hue-rotate(180deg) brightness(0.91);
    filter:invert(1) hue-rotate(180deg) brightness(0.91);
  }
}