/* ========= base.css (global) ========= */

/* ---------- Design-Variablen ---------- */
:root{
  --container:1180px;
  --radius:18px;

  /* Brandfarben */
  --neon:#6d9eff;     /* Haupt-Blau */
  --hot:#3ea8ff;      /* Zweites Blau */

  /* Standard-Button-Verlauf (kann pro Button überschrieben werden) */
  --btn-bg1: var(--hot);
  --btn-bg2: var(--neon);
  --btn-txt:#0a0a18;

  /* Glow-Intensitäten (zentral feinjustierbar) */
  --btn-glow1:        rgba(109,158,255,.32);
  --btn-glow2:        rgba(62,168,255,.26);
  --btn-glow1-hover:  rgba(109,158,255,.52);
  --btn-glow2-hover:  rgba(62,168,255,.42);
  --btn-glow-blur:    8px;   /* normaler Blur */
  --btn-glow-blur-2:  14px;  /* zweiter Ring */
  --btn-glow-blur-h:  10px;  /* Hover */
  --btn-glow-blur-2h: 18px;  /* Hover zweiter Ring */
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px) saturate(140%);
  background:rgba(10,10,30,.45);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .inner{
  max-width:var(--container);
  margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between;
}

/* ---------- BRAND ---------- */
.brand{ display:flex; gap:10px; align-items:center; font-weight:900; }
.brand-logo{
  height:26px; width:auto; display:block;
  filter:
    invert(1) brightness(1.9)
    drop-shadow(0 0 4px rgba(255,255,255,.55))
    drop-shadow(0 0 10px rgba(255,255,255,.35));
  opacity:.95;
}

/* Link-Reset + Hover für die Markenzeile */
.brand-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  gap:10px;
  align-items:center;
}
.brand-link:hover .brand-logo{
  filter:
    invert(1) brightness(2.0)
    drop-shadow(0 0 6px rgba(255,255,255,.65))
    drop-shadow(0 0 14px rgba(109,158,255,.45));
}

/* ---------- GLOBAL BUTTONS ---------- */
/* .btn gilt für <a>, <button>, <input type="button"> usw. */
.btn, .btn-contact{
  display:inline-block;
  padding:10px 16px;
  font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--btn-txt);
  text-decoration:none;
  border-radius:999px;
  border:0;
  background:linear-gradient(90deg, var(--btn-bg1), #86b7ff 50%, var(--btn-bg2));
  box-shadow:
     0 0 var(--btn-glow-blur)   var(--btn-glow1),
     0 0 var(--btn-glow-blur-2) var(--btn-glow2);
  transform:translateZ(0);
  transition:filter .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover, .btn-contact:hover{
  filter:saturate(1.12) brightness(1.05);
  box-shadow:
     0 0 var(--btn-glow-blur-h)   var(--btn-glow1-hover),
     0 0 var(--btn-glow-blur-2h)  var(--btn-glow2-hover);
}
.btn:active{ transform:translateY(1px); }

/* Größen / Varianten */
.btn--sm{ padding:8px 12px; font-size:13px; }
.btn--pill{ border-radius:999px; }

/* Optionale „Ghost“/Outline-Variante */
.btn--ghost{
  background:transparent;
  color:#e9ecff;
  border:1px solid rgba(109,158,255,.6);
  box-shadow:none;
}
.btn--ghost:hover{
  background:linear-gradient(90deg, rgba(62,168,255,.12), rgba(109,158,255,.12));
}

/* Buttons in Switcher-Gruppen etwas dezenter */
.switches .btn{
  box-shadow:
     0 0 6px  rgba(109,158,255,.22),
     0 0 10px rgba(62,168,255,.18);
}
.switches .btn:hover{
  box-shadow:
     0 0 8px  rgba(109,158,255,.34),
     0 0 14px rgba(62,168,255,.28);
}
.switches .btn.is-active{
  outline:2px solid rgba(109,158,255,.55);
}

/* Kontakt-Button darf eigene Farben setzen, übernimmt aber .btn-Basis */
.btn-contact{
  --btn-bg1:#3ea8ff;
  --btn-bg2:#6d9eff;
  --btn-txt:#0a0a18;
  padding:8px 12px;
  font-size:13px;
}
/* Loader-Overlay */
.viewer-wrap { position: relative; } /* Falls noch nicht gesetzt */

.mv-loading{
  position:absolute; inset:14px;      /* sitzt innerhalb der Viewer-Card */
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(180deg, rgba(10,10,28,.55), rgba(10,10,28,.35));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  backdrop-filter: blur(6px) saturate(130%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.35);
  color:#dfe7ff;
  z-index:2;
}

.mv-spinner{
  width:20px; height:20px; box-sizing:border-box;
  border:3px solid rgba(109,158,255,.25);          /* bläulicher Ring */
  border-top-color: var(--neon, #6d9eff);          /* Akzent oben */
  border-radius:50%;
  animation: mvspin .9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(109,158,255,.35));
}

.mv-loading-text{
  font-size:14px; font-weight:700; letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* Fortschritts-Prozent optional etwas dezenter anhängen */
.mv-progress{
  opacity:.85; font-weight:800; margin-left:6px; color:var(--neon, #6d9eff);
}

@keyframes mvspin{ to{ transform: rotate(360deg); } }

/* Bewegungen für reduzierte Bewegung deaktivieren */
@media (prefers-reduced-motion: reduce){
  .mv-spinner{ animation:none; }
}
/* Switch-Gruppe klar als klickbar kennzeichnen */
.switches{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 4px; }

.switches-label{
  display:block; margin:6px 0 6px;
  font-size:11px; font-weight:900; letter-spacing:.08em;
  color:#a8c2ff; text-transform:uppercase;
}

/* Deutlicher Button-Look + Interaktion */
.switches .btn{
  cursor:pointer;
  border:1px solid rgba(109,158,255,.55);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 4px 14px rgba(62,168,255,.28),
    0 0 6px rgba(109,158,255,.22);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.switches .btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06) saturate(1.08);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 6px 16px rgba(62,168,255,.34),
    0 0 10px rgba(109,158,255,.30);
}

.switches .btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,.25),
    0 2px 8px rgba(62,168,255,.22);
}

/* Aktiver Zustand: klarer Ring/Glow */
.switches .btn.is-active{
  outline:2px solid rgba(109,158,255,.85);
  box-shadow:
    0 0 12px rgba(109,158,255,.55),
    0 0 26px rgba(62,168,255,.40);
}

/* Tastatur-Fokus sichtbar machen */
.switches .btn:focus-visible{
  outline:2px solid rgba(109,158,255,.9);
  outline-offset:2px;
}
/* A²: Oberkante bündig, ohne Zeile zu überragen */
.a2wrap{
  display:inline-flex;
  align-items:flex-start;   /* Oberkanten ausrichten */
}
.a2wrap .exp2{
  font-size:.60em;          /* kleiner als Grundschrift */
  line-height:1;
  transform:translateY(-0.10em); /* minimal anheben, überragt nicht */
  margin-left:.02em;        /* optischer Abstand zur A-Kante */
  font-weight:inherit;
}

.section-center {
  max-width: 900px;   /* oder was zu deinem Layout passt */
  margin: 2rem auto;  /* oben/unten Abstand, links/rechts automatisch -> mittig */
}