:root{
  --max-width: 1250px;
  --header-height: 72px;

  /* Light theme vars (fallback) */
  --bg: #fff;
  --surface: #fbfbfb;
  --muted-surface: #f6f7f9;
  --text: #0b1220;
  --muted: #52606a;

  /* CVJM-Rot Accent */
  --accent: #E40038;
  --accent-strong: #CB0031;

  --glass-border: rgba(11,18,32,0.06);
  --shadow-1: rgba(11,18,32,0.12);
  --panel-shadow: 0 8px 30px rgba(11,18,32,0.08);

  --hero-bg: linear-gradient(180deg, #f8fafb 0%, #eef4f7 100%); /* very light, airy */
  --hero-overlay-color: rgba(255,255,255,0.00); /* minimal overlay on light */
}


/* DARK theme */
html[data-theme="dark"] {
  --bg: #0f1720;
  --surface: rgba(255,255,255,0.02);
  --muted-surface: rgba(255,255,255,0.015);
  --text: #e8eef2;
  --muted: #aebac4;

  --accent: #E40038;
  --accent-strong: #CB0031;
  --glass-border: rgba(255,255,255,0.04);
  --shadow-1: rgba(2,6,8,0.55);
  --panel-shadow: 0 10px 40px rgba(2,6,8,0.55);

  --hero-bg: linear-gradient(180deg, rgba(2,6,8,0.35), rgba(2,6,8,0.45)); /* dunkle, stimmige Fläche */
  --hero-overlay-color: rgba(2,6,8,0.40);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background-color .26s ease, color .26s ease;
}
.inner{max-width:var(--max-width);margin:0 auto;padding:28px}

/* Header (fixed) */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index:160;
  display: flex;
  align-items: center;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-bottom: 1px solid rgba(255,255,255,0.02);
  transition: box-shadow .22s ease, background .22s ease;
  box-sizing: border-box;
}
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; padding-left:24px; padding-right:24px; }
main { padding-top: calc(var(--header-height) + 8px); transition: padding-top .18s ease; }

.site-header.scrolled{
  box-shadow: 0 6px 24px var(--shadow-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* Navigation */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:1px;color:var(--text)}
.controls{display:flex;align-items:center;gap:18px}
.nav a{
  margin-left:18px;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  transition: color .15s ease, transform .12s ease;
}
.nav a:hover{ color: var(--text); transform: translateY(-2px); }
@media (max-width:840px){ .nav{display:none} }

/* Toggle (icons only) */
.mode-toggle{
  --size:40px;
  height:var(--size);
  min-width:var(--size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  color:var(--muted);
  cursor:pointer;
  transition: background .18s ease, transform .12s ease, color .12s ease;
}
.mode-toggle:hover{ transform: translateY(-2px); color: var(--text); }
.mode-toggle .icon{ width:18px; height:18px; display:block; }

/* HERO */
.hero{
  height:560px;
  background-image: none;
  background: var(--hero-bg);
  background-size:cover;
  background-position:center;
  position:relative;
  margin:24px 60px;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--panel-shadow);
  border: 1px solid rgba(255,255,255,0.02);
  transition: background .22s ease, box-shadow .22s ease, color .18s ease;
}
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, var(--hero-overlay-color), rgba(0,0,0,0.00)); mix-blend-mode: normal; pointer-events: none;}
.hero-inner{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; padding:0 40px; }
.hero h1{ font-family:'Oswald',sans-serif; color:var(--accent); font-size:64px; line-height:0.95; text-align:center; text-transform:uppercase; margin:0; letter-spacing:1px; text-shadow: 0 8px 28px rgba(0,0,0,0.10); }
.hero .muted{ display:block; color: var(--muted); font-weight:400; font-size:20px; margin-top:8px; text-shadow: 0 3px 10px rgba(0,0,0,0.20); transition: color .18s ease, text-shadow .18s ease; }

/* ABOUT */
.about{ padding:72px 0; background:transparent; }
.about-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; max-width:1200px; margin:0 auto; }
.about-media img{
  width:100%;
  display:block;
  border-radius:24px; /* stärker abgerundet */
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 26px rgba(2,6,8,0.45);
  filter: contrast(0.98) saturate(0.98);
  transition: transform .18s ease, box-shadow .18s ease;
}
.about-media img:hover{ transform: translateY(-6px); box-shadow: 0 18px 50px rgba(2,6,8,0.55); }
.about-content{ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008)); padding:28px; border-radius:8px; border: 1px solid var(--glass-border); box-shadow: var(--panel-shadow); }
.about-content h2{ font-family:'Oswald',sans-serif; color:var(--text); font-size:40px; margin:0 0 14px; }
.about-content p{ color:var(--muted); max-width:700px; line-height:1.6; margin-bottom:12px; }
.btn{ display:inline-block; margin-top:18px; padding:12px 28px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color:#ffffff; border-radius:40px; text-decoration:none; font-weight:800; letter-spacing:0.4px; box-shadow: 0 10px 30px rgba(228,0,56,0.12); transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 18px 42px rgba(203,0,49,0.14); }

/* Featured (Gruppen) */
.featured{ padding:72px 0 120px; text-align:center; background:transparent; }
.featured h3{ font-family:'Oswald',sans-serif; color:var(--text); font-size:40px; margin:0 0 28px; }

/* grid/row for groups: centered */
.product-row{
  display:flex;
  justify-content:center; /* centered overall */
  gap:22px;
  padding:0 16px;
  flex-wrap:wrap;
  align-items:flex-start;
  max-width:1600px;
  margin:0 auto;
}

/* each group card */
.product{
  width:320px;
  min-height:210px;
  padding:18px;
  border-radius:14px;

  /* statt transluzent -> deutlich dichteres Panel (bessere Lesbarkeit) */
  background: var(--surface);               /* benutzt die Surface-Variable (theme-aware) */
  /* optional sehr leichter overlay, falls gewünscht: uncomment
     background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); */
  border: 1px solid rgba(11,18,32,0.06);    /* etwas kontrastreicherer Rand */
  box-shadow: 0 8px 20px rgba(2,6,8,0.12);  /* dezenter Schatten für Tiefe */

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  font-family:'Inter',sans-serif;
  color:var(--text);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease, background .16s ease;
  position:relative;
  overflow:visible;
}

/* icon */
.product-icon{
  width:56px;
  height:56px;
  border-radius:10px;
  background: var(--muted-surface);         /* uses theme-aware muted surface (more solid) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  margin-bottom:12px;
  border: 1px solid rgba(11,18,32,0.06);
  overflow: hidden;
}
.product-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* initially hidden via inline style until load success */
  -webkit-user-drag: none;
}

/* title / subtitle */
.product-title{ display:block; font-weight:800; font-family:'Oswald',sans-serif; font-size:18px; color:var(--text); margin-bottom:6px; }
.product-sub{ color:var(--muted); font-size:13px; margin-bottom:12px; }

/* MORE button inside card */
.group-more{
  margin-top:auto;
  align-self:stretch;
  padding:10px 12px;
  border-radius:10px;
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.group-more:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.25); }

/* hover */
.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(2,6,8,0.14);
}
/* newly added animation state */
.product.new {
  opacity:0;
  transform: translateY(8px) scale(.998);
}

/* small accent ribbon (top-right) */
.product::after{
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width:28px;
  height:5px;
  border-radius:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  opacity:0.8;
  transition: opacity .16s ease;
}
.product.highlight::after{ opacity:0.30; }

.product-title { color: var(--text); }
.product-sub   { color: var(--muted); }

/* Modal styles */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index:9999;
  padding: 30px;
}
.modal[aria-hidden="false"]{ display: flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,8,0.45); /* guter Kontrast für Textlesbarkeit */
  backdrop-filter: blur(4px);
  transition: opacity .18s ease;
}

/* Panel: benutze theme-aware surface (opaker) für bessere Lesbarkeit */
.modal-panel{
  position:relative;
  width: min(1100px, 96%);
  max-height: 90vh;
  overflow:auto;
  background: var(--surface);                /* theme-aware, deutlich opaker im Light Mode */
  border-radius:14px;
  padding:18px;
  box-shadow: var(--panel-shadow);           /* theme-aware Panel-Shadow */
  border: 1px solid var(--glass-border);
  color: var(--text);                        /* text color stays theme-aware */
  transform: translateY(0);
}
/* Close button */
.modal-close{
  position:absolute;
  right:12px;
  top:12px;
  background:transparent;
  border:none;
  font-size:30px;
  line-height:1;
  color:var(--muted);
  cursor:pointer;
}
.modal-close:hover{ color:var(--text); transform: translateY(-2px); }

.modal-grid{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap:20px;
  align-items:start;
}
@media (max-width:980px){
  .modal-grid{ grid-template-columns: 1fr; }
}

.modal-media{ display:flex; flex-direction:column; gap:12px; }
.modal-main-image-wrap{
  background: var(--muted-surface);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--glass-border);
}

/* ====== Carousel Styles (modern, crossfade + slide) ====== */
/* Carousel wrapper inside modal-main-image-wrap */
.modal-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted-surface);
}

/* each slide (absolute layers) */
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s cubic-bezier(.2,.9,.25,1), transform .6s cubic-bezier(.2,.9,.25,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-slide img { width:100%; height:100%; object-fit:cover; display:block; }

/* active slide */
.carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Carousel controls (prev/next) */
.carousel-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display:flex;
  gap:8px;
  z-index: 30;
}
.carousel-controls button {
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.18));
  border: none;
  color: #fff;
  width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 24px rgba(2,6,8,0.24);
  transition: transform .12s ease, opacity .12s ease;
}
.carousel-controls button:hover { transform: translateY(-3px); opacity:0.98; }

/* smaller, low-contrast controls in light mode */
html[data-theme="light"] .carousel-controls button {
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.08));
  color: #111;
}

/* overlay pager (bottom center) */
.carousel-pager {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index: 30;
}
.carousel-dot {
  width:8px;
  height:8px;
  border-radius:99px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.carousel-dot.is-active { transform: scale(1.4); background: var(--accent); opacity:1; }

/* Small screens - controls reposition */
@media (max-width:640px){
  .carousel-controls { right: 10px; top: 10px; }
  .carousel-controls button { width:34px; height:34px; }
  .carousel-pager { bottom: 8px; }
}

.modal-main-image{
  width:100%; height:100%; object-fit:cover; display:block; transition: opacity .18s ease;
}
.image-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:14px; padding:18px; text-align:center;
  background: transparent;
}

/* thumbnails */
.modal-thumbs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.modal-thumbs .thumb{
  border-radius:8px; overflow:hidden; border:1px solid var(--glass-border); background:transparent;
  padding:0; width:72px; height:54px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* CONTENT area */
.modal-content{ padding:6px 4px 12px; }
.modal-content h3{ font-family:'Oswald',sans-serif; font-size:28px; margin:0 0 6px; color:var(--text); }
.modal-content .group-subtitle{ color:var(--muted); margin-bottom:12px; font-weight:600; }
.group-desc{ color:var(--muted); line-height:1.6; margin-bottom:12px; }

/* details list */
.group-details{ display:grid; grid-template-columns: auto 1fr; gap:6px 14px; margin:10px 0 14px; }
.group-details dt{ font-weight:700; color:var(--text); }
.group-details dd{ margin:0; color:var(--muted); }

/* modal actions */
.modal-actions{ display:flex; gap:12px; align-items:center; margin-top:12px; }
.btn-primary{ background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; }
.btn-secondary{ background: transparent; border: 1px solid var(--glass-border); padding:10px 12px; border-radius:10px; color:var(--text); cursor:pointer; }

/* small screens */
@media (max-width:600px){
  .modal-panel{ padding:12px; border-radius:10px; }
  .modal-thumbs .thumb{ width:60px; height:46px; }
}

/* ensure placeholder text readable even on very light surfaces */
.modal-panel .image-placeholder,
.modal-panel .group-desc,
.modal-panel .group-details dd {
  color: var(--muted);
}

html[data-theme="dark"] .modal-backdrop{
  background: rgba(2,6,8,0.6);
}

#group-modal-title{ font-family:'Oswald',sans-serif; margin:4px 0 8px; font-size:22px; color:var(--text); }
#group-modal-desc{ color:var(--muted); line-height:1.6; }

/* Placeholder sections */
.section-block{ padding:56px 0; background: linear-gradient(180deg, rgba(255,255,255,0.005), rgba(255,255,255,0.003)); border-top: 1px solid rgba(255,255,255,0.01); }
.section-block h4{ font-family:'Oswald',sans-serif; color:var(--text); margin:0 0 12px;}
.section-block p{ color:var(--muted); }

/* Footer */
.site-footer{ padding:36px 0; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,0.02); }

/* Responsive */
@media (max-width:1000px){
  .hero{height:420px;margin:18px}
  .hero h1{font-size:44px}
  .about-inner{grid-template-columns:1fr;gap:24px;padding:0 18px}
  .about-content h2{font-size:30px}
  .product{width:46%;min-height:140px}
}
@media (max-width:480px){
  .nav{display:none}
  .hero{height:320px;margin:12px;border-radius:10px}
  .hero h1{font-size:28px}
  .inner{padding:18px}
  .product{width:100%;height:auto}
}
/* Footer layout */
.footer-grid{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-top:18px;
  padding-bottom:8px;
}
.footer-col{ flex:1 1 220px; min-width:180px; }

/* Brand small variant */
.footer-brand .logo.small{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--text);
}
.footer-small{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
}

/* Links */
.footer-links{ display:flex; flex-direction:column; gap:8px; }
.footer-links a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition: color .14s ease, transform .12s ease;
}
.footer-links a:hover{ color:var(--text); transform: translateY(-2px); }

/* Social icons */
.social-group{ display:flex; gap:10px; align-items:center; }
/* Social brand styles (icons are filled using currentColor) */
.social-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border:1px solid var(--glass-border);
  color: var(--muted);              /* icon color when idle */
  text-decoration:none;
  transition: transform .14s ease, box-shadow .14s ease, background .18s ease, color .14s ease;
  box-sizing:border-box;
  padding:0;
}

/* Make sure SVG icons always use currentColor */
.social-link svg { width:20px; height:20px; display:block; }
.social-link svg * { fill: currentColor !important; stroke: none !important; }

/* subtle idle hover so user sees affordance */
.social-link:hover,
.social-link:focus {
  transform: translateY(-3px);
}

/* Focus visible for keyboard users (high-contrast ring) */
.social-link:focus {
  outline: none;
  box-shadow: 0 6px 20px rgba(2,6,8,0.12), 0 0 0 4px rgba(255,255,255,0.02);
  border-radius:10px;
}

/* FACEBOOK: solid brand blue on hover/focus */
.social-link.facebook:hover,
.social-link.facebook:focus {
  background: #1877F2;            /* Facebook blue */
  color: #ffffff;                 /* icon white */
  box-shadow: 0 10px 30px rgba(24,119,242,0.18);
  border: 1px solid rgba(0,0,0,0.06);
}

/* INSTAGRAM: gradient brand colors on hover/focus */
.social-link.instagram:hover,
.social-link.instagram:focus {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 30%, #8134af 60%, #515bd4 100%);
  color: #ffffff;                 /* icon white */
  box-shadow: 0 10px 30px rgba(81,91,212,0.16);
  border: 1px solid rgba(0,0,0,0.06);
}

/* small tweak: if site uses dark theme, keep border subtle */
@media (prefers-color-scheme: dark) {
  .social-link { border: 1px solid rgba(255,255,255,0.03); }
}

/* Footer bottom */
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.02); margin-top:14px; padding-top:14px; text-align:center; }
.footer-bottom small{ color:var(--muted); font-size:13px; }

/* Responsive tweaks: stack columns on small screens */
@media (max-width:640px){
  .footer-grid{ flex-direction:column; gap:12px; }
  .footer-col{ min-width:unset; width:100%; }
  .social-link{ width:40px; height:40px; border-radius:8px; }
}

/* ========================
   Kontakt-Section Styling
   ======================== */
.contact-section { padding: 56px 0; }
.contact-section h3 { font-family: 'Oswald', sans-serif; font-size: 36px; margin-bottom: 18px; color: var(--text); }

/* grid: info left, map right */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  height: 400px;
  gap: 28px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* contact info */
.contact-info { align-content: center; height: 400px; padding: 16px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008)); border-radius: 10px; border: 1px solid var(--glass-border); box-shadow: var(--panel-shadow); }
.contact-lead { margin-top: 0; margin-bottom: 12px; font-weight:600; color:var(--text); }
.contact-address { color:var(--text); font-style: normal; line-height:1.6; margin-bottom:12px; }
.contact-meta a { color:var(--accent); text-decoration: none; }
.contact-meta a:hover { text-decoration: underline; }
.opening-hours ul { margin:8px 0 0 1rem; padding:0; color:var(--muted); }

/* map wrapper */
.map-wrapper {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--panel-shadow);
  background: var(--surface);
}

/* responsive iframe */
.map-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  border: 0;
}

/* small screens: stack vertically, map full width */
@media (max-width:980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .map-wrapper { min-height: 300px; margin-top: 8px; }
}

/* ensure button style is consistent */
.contact-info .btn{ margin-top: 12px; display:inline-block; }

/* ---------- Mobile Hamburger & Mobile Nav ---------- */

/* mobile toggle (hamburger) - hidden on desktop */
.mobile-toggle{
  display:none;
  --size:42px;
  width:var(--size);
  height:var(--size);
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  color:var(--muted);
  align-items:center;
  justify-content:center;
  padding:6px;
  cursor:pointer;
}
.mobile-toggle svg{ display:block; width:20px; height:20px; }

/* mobile nav container, hidden by default */
.mobile-nav{ display:none; }

@media (max-width:840px){
  .nav{ display:none; }               /* keep existing behavior */
  .mobile-toggle{ display:inline-flex; margin-left:8px; }
  .controls{ gap:10px; }
}

/* mobile-nav overlay and slide-in panel */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.mobile-nav[aria-hidden="false"]{ display:block; }
/* backdrop */
.mobile-nav-backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,8,0.48);
  backdrop-filter: blur(3px);
}

/* panel slides in from right (mobile) */
.mobile-nav-panel{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(340px, 86%);
  /* default: opaque white for light mode */
  background: #ffffff;
  border-left: 1px solid rgba(11,18,32,0.06);
  box-shadow: 0 28px 90px rgba(2,6,8,0.28);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transform: translateX(16px);
  transition: transform .26s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
  opacity: 0;
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  will-change: transform, opacity;
}

html[data-theme="dark"] .mobile-nav-panel {
  background: #07101a; /* deep, neutral dark that matches the theme */
  border-left: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}
/* when open */
.mobile-nav.open .mobile-nav-panel{
  transform: translateX(0);
  opacity: 1;
}

/* close button */
.mobile-nav-close{
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  align-self:flex-end;
  cursor:pointer;
}

/* mobile links style */
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.mobile-nav-links a{
  display:block;
  padding:16px 14px;
  border-radius:10px;
  text-decoration:none;
  color: #0b1220;         /* strong dark color for light panel */
  font-weight:700;
  background: transparent;
  font-size:16px;
  line-height:1.25;
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
.mobile-nav-links a:hover,
.mobile-nav-links a:focus{
  background: rgba(228,0,56,0.06);
  color: inherit;
  transform: translateY(-1px);
}

/* ensure mobile nav is above header */
@media (max-width:840px){
  .mobile-nav-panel{ top: calc(var(--header-height)); height: calc(100% - var(--header-height)); }
}
body.user-is-tabbing .mobile-nav-close:focus,
body.user-is-tabbing .mobile-nav-links a:focus,
body.user-is-tabbing .mobile-toggle:focus {
  outline: 3px solid rgba(228,0,56,0.12);
  outline-offset: 3px;
  border-radius:8px;
}

html[data-theme="dark"] .mobile-nav-links a {
  color: #e8eef2;         /* light text on dark panel */
}

.mobile-nav-close { color: var(--muted); }
html[data-theme="dark"] .mobile-nav-close { color: var(--muted); }