/* ================= Font + Reset ================= */
@font-face{
  font-family:"MontserratBlack";
  src:url("../fonts/Montserrat-Black.ttf") format("truetype");
  font-display:swap;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:#e9f7ff; background:#0f1014;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* ================= Background (dynamic) ================= */
.bg-layer{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(92,54,255,.28), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(0,255,255,.16), transparent 55%),
    linear-gradient(var(--angle,0deg), #0f1014, #0f1014);
  transition:background .2s linear;
}
.bg-glow{
  position:fixed; filter:blur(90px); opacity:.55; z-index:-2;
  width:50vmax; height:50vmax; border-radius:50%;
  will-change:transform; transition:transform .08s linear;
}
.bg-glow--left{ left:-12vmax; top:8vmax; background:#7b5cff; }
.bg-glow--right{ right:-14vmax; top:-2vmax; background:#00f7ff; }

/* ================= Helpers ================= */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.section-title{ text-align:center; margin:0 0 18px; font-size:clamp(24px,2.2vw,36px); }
a{ color:#dbfaff; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ================= Pill Navbar ================= */
.header{
  position:fixed; top:14px; left:0; right:0;
  display:flex; justify-content:center; z-index:9999;
}
:root { --header-height: 72px; } /* Fallback */

body.has-fixed-header main.legal-wrap{
  padding-top: calc(var(--header-height) + 0px); 
}

.pill-nav{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:fit-content; max-width:calc(100% - 24px);
  padding:10px 14px; white-space:nowrap;
  backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg, rgba(18,22,30,.86), rgba(18,22,30,.78));
  border:1px solid transparent; border-radius:999px; background-clip:padding-box;
  box-shadow:0 14px 48px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  transform-origin:top center; animation:pillIn .7s ease .2s both;
  transition:box-shadow .25s ease, transform .2s ease;
  isolation: isolate;
  overflow: visible;
}
.pill-nav::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(90deg,#00f7ff,#7b5cff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.75;
}

.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px; }
.brand__logo{ width:28px; height:28px; display:block; }
.brand__name{ font-size:18px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25); }

/* 🇨🇭 Badge */
.ch-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:10px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  font-weight:800; font-size:14px; color:#fff; letter-spacing:.2px;
  backdrop-filter:blur(8px);
}
.ch-flag{ width:18px; height:18px; border-radius:4px; display:block; }
.ch-badge__text{ line-height:1; }

/* ================= Responsive ================= */
@media (max-width:1000px){
  .showcase{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* NEU: Badge früher verkleinern, um Platz zu sparen */
@media (max-width: 900px) {
  .ch-badge {
    padding: 6px;
    gap: 0;
  }
  .ch-badge__text {
    display: none; /* Text "Schweiz" ausblenden */
  }
}

@media (max-width:700px){
  .pill-nav { position: relative; z-index: 5001; overflow: visible; isolation: isolate; }
  .nav-toggle{ display:block; } /* mobil sichtbar */
  .nav-links{
    position:absolute; top:calc(100% + 8px); left:50%;
    transform:translateX(-50%) scaleY(.92);
    width:min(560px, calc(100vw - 24px));
    padding:12px 10px;
    background:rgba(10,12,16,.95); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18); border-radius:20px;
    display:grid; gap:6px; text-align:center; z-index:20;
    opacity:0; pointer-events:none; transition:.18s ease;
    box-shadow:0 20px 44px rgba(0,0,0,.55);
  }
  .nav-links a{ color:#fff; }
  .nav-links a:hover{ background:rgba(255,255,.12); }
  .nav-links.is-open{ transform:translateX(-50%) scaleY(1); opacity:1; pointer-events:auto; }
  /* Die ch-badge Regeln wurden in den 820px Block verschoben und sind hier nicht mehr nötig */
}

/* Links */
.nav-links{
  list-style:none; display:inline-flex; gap:16px; align-items:center; margin:0; padding:0;
  margin-left:18px;
}
.nav-links a{
  padding:10px 14px; border-radius:12px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.nav-links a:hover{ background:rgba(255,255,255,.10); text-decoration:none; }

/* Rechts: Cart + Hamburger */
.nav-actions{ display:flex; align-items:center; gap:8px; margin-left:16px; }

/* Cart */
.cart{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.cart svg{ fill:#fff; filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.cart__count{
  position:absolute; top:-6px; right:-6px; font-size:12px; background:#00f7ff; color:#041316;
  padding:2px 6px; border-radius:999px; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Hamburger (rechts) */
.nav-toggle{
  position:relative; width:42px; height:36px; padding:0; border:0; background:transparent; cursor:pointer;
  display:none;
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, width .25s ease;
}
.nav-toggle span:nth-child(1){ top:10px; }
.nav-toggle span:nth-child(2){ top:17px; }
.nav-toggle span:nth-child(3){ top:24px; }
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; transform:scaleX(0.4); }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ================= Hero ================= */
.hero{ padding:110px 16px 40px; text-align:center; }
.hero__content{ position:relative; max-width:1000px; margin:0 auto; }
.hero__content::before{
  content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:min(980px,90vw); height:clamp(160px,24vw,280px); border-radius:999px;
  background:radial-gradient(60% 80% at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  filter:blur(12px); z-index:0; pointer-events:none;
}
.hero__title{ position:relative; z-index:1; isolation:isolate; }
.neon-title{
  font-family:"MontserratBlack",system-ui,sans-serif;
  font-size:clamp(40px,10vw,140px); line-height:.95; letter-spacing:.04em;
  display:inline-flex; gap:.25em; text-transform:uppercase; mix-blend-mode:normal;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.neon-title span:first-child{
  color:#cfe6ff; text-shadow:0 0 6px rgba(207,230,255,.70), 0 0 14px rgba(207,230,255,.45);
}
.neon-title span:last-child{
  color:#b9fff2; text-shadow:0 0 6px rgba(185,255,242,.75), 0 0 14px rgba(185,255,242,.45);
}
.hero__subtitle{
  margin:14px auto 22px; max-width:760px; color:#f4fbff; text-shadow:0 1px 2px rgba(0,0,0,.6);
  font-size:clamp(16px,1.6vw,20px); opacity:.98;
}
.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* Buttons */
.btn{ --c1:#00f7ff; --c2:#7b5cff; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:800; letter-spacing:.2px; border:0; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn--primary{ background:linear-gradient(90deg,var(--c1),var(--c2)); color:#041316; box-shadow:0 10px 30px rgba(0,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.btn--primary:hover{ transform:translateY(-1px); }
.btn--ghost{ background:rgba(0,0,0,.60); color:#fff; border:1px solid rgba(255,255,255,.22); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.btn--ghost:hover{ transform:translateY(-1px); }

/* Scroll Indicator */
.scroll-down{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;
  width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.50); color:#e9f7ff; cursor:pointer; animation:floaty 2.4s ease-in-out infinite;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
@keyframes floaty{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* ================= Rotating Text (Vanilla) ================= */
.trust-rotate{ display:grid; place-items:center; margin:50px 0 8px; padding:0 16px; }

.rotate-pill{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:56px; padding:10px 22px; overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(26,30,38,.88), rgba(18,22,30,.82));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  width:min(760px, calc(100% - 32px));
  text-align:center;
}
.rotate-host{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.2px; font-size:clamp(14px,1.7vw,18px);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  line-height:1.2;
}
.rt-word{ display:inline-flex; overflow:hidden; }
.rt-char{
  display:inline-block;
  transform:translateY(100%);
  opacity:0;
  will-change:transform,opacity;
}
.rt-enter{ animation:rt-enter .6s cubic-bezier(.22,.8,.22,1) forwards; }
.rt-exit { animation:rt-exit  .6s cubic-bezier(.22,.8,.22,1) forwards; }
@keyframes rt-enter{ from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes rt-exit { from{transform:translateY(0);opacity:1} to{transform:translateY(-120%);opacity:0} }
.rt-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================= Showcase ================= */
.showcase{
  margin:40px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:980px;
}
.showcase__card{
  position:relative; padding:18px; border-radius:18px;
  background:linear-gradient(180deg, rgba(26,30,38,.85), rgba(18,22,30,.78));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  text-align:left;
}
.showcase__card img{ width:100%; height:150px; object-fit:contain; opacity:.98; }
.showcase__card .tag{ position:absolute; top:10px; left:10px; font-size:12px; padding:4px 8px; border-radius:999px; background:#ff65f2; color:#091014; font-weight:800; }
.tag--cyan{ background:#00f7ff; } .tag--violet{ background:#7b5cff; }

/* ================= Produktgrid ================= */
.product-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:min(1100px,100%); margin:0 auto; }
.product-card{
  background:linear-gradient(180deg, rgba(26,30,38,.86), rgba(18,22,30,.78));
  border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:14px;
  text-align:center; transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.product-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.product-card__media{ height:170px; display:grid; place-items:center; margin-bottom:8px; }
.product-card__media img{ max-width:100%; max-height:100%; object-fit:contain; }
.price{ margin:2px 0 10px; font-weight:900; color:#ffffff; }

/* === Fix: Abstand unter fixer Navbar auch für Kontaktseite === */
body.has-fixed-header main.wrap{
  margin-top: calc(var(--header-height) + 12px);
}

/* === Kontakt-/Unterseiten-Container === */
.wrap{
  width: min(1120px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* ---------- Einheitliche Abstände ---------- */
:root{
  --field-bg: rgba(15,20,26,.85);
  --field-border: rgba(255,255,255,.20);
  --field-hover: rgba(255,255,255,.28);
  --field-focus: #68e8f9;
  --field-text: #e9f3f6;
  --field-muted: rgba(233,243,246,.75);
  --field-shadow: 0 0 0 3px rgba(104,232,249,.20);
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
}

/* Grids: einheitliche Luecken, kein innenliegendes Padding */
.grid{
  display: grid;
  gap: var(--space-5) !important;   /* einheitlich */
  padding: 0 !important;            /* inline-Styles uebersteuern */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Zweispaltiges Layout: gleiches Gap erzwingen */
.grid.grid--two{
  grid-template-columns: 1.1fr .9fr; /* oder 1fr 1fr, wenn symmetrisch gewuenscht */
  gap: var(--space-6) !important;    /* 32px links/rechts */
}
@media (max-width: 760px){
  .grid.grid--two{ grid-template-columns: 1fr; }
}

/* Einheitlicher vertikaler Abstand zwischen aufeinanderfolgenden Grids/Sections */
.wrap > .grid + .grid,
.wrap > .grid + .banner,
.wrap > .banner + .grid{
  margin-top: var(--space-7) !important; /* 40px */
}

/* Optionale Utility: allgemeiner Abschnittsabstand */
.section-spacing{
  margin-top: var(--space-7) !important;
}

/* Karten: kein externer Abstand; Abstand kommt aus grid-gaps/section-spacing */
.card{ margin: 0; }

/* FAQ-Details: konsistente Innenabstaende */
details + details{ margin-top: var(--space-3); }

/* ================= Banner ================= */
.banner{
  margin:60px auto; width:min(980px,100% - 24px); text-align:center; padding:28px 18px; border-radius:22px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(123,92,255,.25), transparent 60%),
    radial-gradient(120% 120% at 90% 0%, rgba(0,247,255,.25), transparent 60%),
    rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 36px rgba(0,0,0,.45);
}
.banner h2{ margin:0 0 8px; font-size:clamp(22px, 2vw, 30px); }

/* ================= Newsletter ================= */
.newsletter{
  margin:60px auto; width:min(700px,100% - 24px); text-align:center;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:26px 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.newsletter__form{ display:grid; grid-template-columns:1fr auto; gap:10px; margin:12px 0 10px; }
.newsletter input{
  width:100%; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.24);
  background:rgba(12,14,18,.92); color:#ffffff; outline:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
}
.newsletter input::placeholder{ color:rgba(255,255,255,.7); }
.newsletter input:focus{
  border-color:#00f7ff; box-shadow:0 0 0 3px rgba(0,247,255,.25);
}

/* ================= Footer ================= */
.footer{ padding:30px 14px 60px; color:#e9f7ff; }
.footer__inner{ width:min(1100px,100%); margin:0 auto; display:grid; gap:14px; justify-items:center; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.footer-links a{
  font-size:14px; opacity:.95; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
}
.footer-links a:hover{ background:rgba(255,255,255,.14); text-decoration:none; }
.made-in-ch{ opacity:.98; margin:4px 0 2px; font-weight:800; }
.footer .copy{
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.4;
  opacity: .75;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ================= Reveal ================= */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-visible{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease; }

/* ================= Responsive ================= */
@media (max-width:920px){
  .showcase{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .pill-nav{ width:min(560px, calc(100% - 24px)); }
  .nav-toggle{ display:block; } /* mobil sichtbar */
  .nav-links{
    position:absolute; top:calc(100% + 8px); left:50%;
    transform:translateX(-50%) scaleY(.92);
    width:min(560px, calc(100vw - 24px));
    padding:12px 10px;
    background:rgba(10,12,16,.95); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18); border-radius:20px;
    display:grid; gap:6px; text-align:center; z-index:20;
    opacity:0; pointer-events:none; transition:.18s ease;
    box-shadow:0 20px 44px rgba(0,0,0,.55);
  }
  .nav-links a{ color:#fff; }
  .nav-links a:hover{ background:rgba(255,255,255,.12); }
  .nav-links.is-open{ transform:translateX(-50%) scaleY(1); opacity:1; pointer-events:auto; }
  .ch-badge{ padding:6px; } /* kompakter */
}

/* ================= Unified Form Controls (Dark / Neon) ================= */

/* Grundstil für alle Felder */
.wrap input[type="text"],
.wrap input[type="email"],
.wrap input[type="tel"],
.wrap input[type="number"],
.wrap input[type="search"],
.wrap input[type="url"],
.wrap input[type="password"],
.wrap textarea,
.wrap select,
.wrap input[type="file"]{
  appearance: none;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--field-text);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
  box-sizing: border-box;
}

.wrap input::placeholder,
.wrap textarea::placeholder{ color: var(--field-muted); }

/* Hover / Fokus */
.wrap input:hover,
.wrap textarea:hover,
.wrap select:hover,
.wrap input[type="file"]:hover{
  border-color: var(--field-hover);
}

.wrap input:focus,
.wrap textarea:focus,
.wrap select:focus,
.wrap input[type="file"]:focus{
  border-color: var(--field-focus);
  box-shadow: var(--field-shadow);
}

/* ===== Custom SELECT ===== */
.wrap select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23e9f3f6'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px;
  cursor: pointer;
}
.wrap select::-ms-expand{ display:none; }
.wrap select option{
  background: #0f141a; color: var(--field-text);
}

/* ===== File Input ===== */
.wrap input[type="file"]{ padding: 8px 10px; }
.wrap input[type="file"]::file-selector-button{
  margin-right: 10px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: linear-gradient(90deg, #00f7ff, #7b5cff); color: #041316; font-weight: 800; cursor: pointer;
}
.wrap input[type="file"]::file-selector-button:hover{ filter: brightness(1.05); }

/* ===== Checkbox / Radio ===== */
.wrap input[type="checkbox"], .wrap input[type="radio"]{ accent-color: #00f7ff; }

/* Disabled */
.wrap input:disabled, .wrap textarea:disabled, .wrap select:disabled, .wrap input[type="file"]:disabled{
  opacity: .6; cursor: not-allowed;
}

/* Fehler */
.wrap .is-invalid{
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,.18) !important;
}
form.show-errors input:invalid,
form.show-errors textarea:invalid,
form.show-errors select:invalid{
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,.25) !important;
}

/* ================================================= */
/* ========= NEUES MOBILE OVERLAY MENÜ ========= */
/* ================================================= */

/* Variablen für einfache Anpassung */
:root {
  --menu-button-color: rgba(0, 0, 0, 0.55);
  --menu-overlay-bg: linear-gradient(135deg, #0f1014, #1a1e2a);
  --menu-text-color: #ffffff;
  --menu-animation-speed: 0.8s;
}

/* Der Toggle-Button */
.mobile-menu-toggle {
  display: none; /* Nur auf Mobilgeräten sichtbar */
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  background: var(--menu-button-color);
  border: 1px solid rgba(255, 255, 255, .12);
  cursor: pointer;
  z-index: 10001; /* Über dem Overlay */
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.mobile-menu-toggle:hover {
  transform: scale(1.05);
}

.mobile-menu-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: var(--menu-text-color);
}

.mobile-menu-toggle .icon-close { opacity: 0; transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu-toggle.is-active .icon-menu { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu-toggle.is-active .icon-close { opacity: 1; transform: translate(-50%, -50%) rotate(0); }


/* Das Vollbild-Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--menu-overlay-bg);
  z-index: 10000;
  pointer-events: none; /* Klicks "durchlassen", wenn geschlossen */
  
  /* Die magische clip-path Animation */
  clip-path: circle(0% at calc(100% - 48px) 36px);
  transition: clip-path var(--menu-animation-speed) cubic-bezier(0.7, 0, 0.3, 1);
}

.mobile-menu-overlay.is-open {
  pointer-events: auto; /* Klicks erlauben, wenn offen */
  clip-path: circle(150% at calc(100% - 48px) 36px);
}


/* Die Links im Menü */
.mobile-menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.mobile-menu-links li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Staggered Animation für die Links */
.mobile-menu-overlay.is-open li {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu-overlay.is-open li:nth-child(1) { transition-delay: 0.2s; }
.mobile-menu-overlay.is-open li:nth-child(2) { transition-delay: 0.3s; }
.mobile-menu-overlay.is-open li:nth-child(3) { transition-delay: 0.4s; }
/* Füge hier weitere hinzu, wenn du mehr Links hast */


.mobile-menu-links a {
  display: block;
  padding: 16px;
  color: var(--menu-text-color);
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mobile-menu-links a:hover {
  color: #00f7ff;
}


/* Responsive Logik */
@media (max-width: 700px) {
  .nav-links#navLinksDesktop {
    display: none; /* Desktop-Links ausblenden */
  }
  .mobile-menu-toggle {
    display: block; /* Mobilen Button einblenden */
  }
}