/* ═══════════════════════════════════════════════════════════════════
   DarkZone — GPS-Demo „Lasertag für Erwachsene"
   Hochformat auf dem Handy, Querformat ab Tablet und PC.
   ═══════════════════════════════════════════════════════════════════ */

/* Über den Adminbereich ausgeschaltet – sicherheitshalber ausdrücklich,
   damit kein späteres display den hidden-Zustand überschreibt. */
.gd-sec[hidden]{display:none !important}

.gd-sec{
  position:relative;
  /* Oben exakt die Farbe der Spielmodi (#050608), unten das Schwarz der FAQ –
     dadurch sind beide Übergänge unsichtbar. */
  border-top:1px solid var(--hair,rgba(255,255,255,.1));
  background:linear-gradient(180deg,#050608 0%,#030405 55%,#000 100%);
  padding:100px 24px 108px;
  overflow:hidden;
}
.gd-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;text-align:center}
.gd-sec > .gd-inner > .section-tag,
.gd-sec > .gd-inner > .section-title{text-align:center}
.gd-sec > .gd-inner > .divider{margin-left:auto;margin-right:auto}

.gd-lead{
  max-width:680px;margin:18px auto 0;
  font-size:15.5px;line-height:1.85;color:#aab3bd;
}
.gd-lead b{color:#fff;font-weight:600}
.gd-lead em{color:#ff5a4a;font-style:normal;font-weight:600}

/* ── Gerät ── */
.gd-geraet{
  position:relative;margin:34px auto 0;
  width:100%;max-width:330px;aspect-ratio:9/16;
  max-height:min(74vh,620px);
  border-radius:30px;padding:6px;
  background:linear-gradient(158deg,#2b3038 0%,#12151b 28%,#0a0c11 62%,#232831 100%);
  box-shadow:
    0 50px 110px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 90px -20px rgba(255,45,45,.18);
}
/* Lichtkante über dem Glas */
.gd-geraet::after{
  content:'';position:absolute;inset:6px;border-radius:24px;pointer-events:none;z-index:9;
  background:linear-gradient(200deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%);
  mix-blend-mode:screen;
}
.gd-schirm{
  position:relative;width:100%;height:100%;
  border-radius:24px;overflow:hidden;background:#050c07;
  display:flex;flex-direction:column;
}
.gd-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Scanlinien über allem */
.gd-schirm::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  opacity:.5;
}

/* ── Kopfzeile der App ── */
.gd-top{
  position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;padding:11px 12px 0;
}
.gd-marke{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.14em;color:#e7ecef;
  text-transform:uppercase;white-space:nowrap;
}
.gd-marke i{color:#9dff4f;font-style:normal}
.gd-gps{text-align:right;font-family:'Inter',monospace;font-size:8.5px;line-height:1.5;color:#8fb894;white-space:nowrap}
.gd-gps b{display:inline-flex;align-items:center;gap:4px;color:#9dff4f;font-weight:600}
.gd-gps b::before{content:'';width:5px;height:5px;border-radius:50%;background:#9dff4f;box-shadow:0 0 6px #9dff4f}
.gd-koord{display:block;color:#6e8f73}

/* ── Missions-Chip ── */
.gd-mission{
  position:relative;z-index:4;align-self:center;margin-top:9px;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:2px;
  background:linear-gradient(180deg,rgba(157,255,79,.14),rgba(157,255,79,.05));
  border:1px solid rgba(157,255,79,.42);
  font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#d8ffb8;
}
.gd-mission::before,.gd-mission::after{
  content:'';position:absolute;width:9px;height:9px;border:1px solid #9dff4f;
}
.gd-mission::before{left:-4px;top:-4px;border-right:0;border-bottom:0}
.gd-mission::after{right:-4px;bottom:-4px;border-left:0;border-top:0}

/* ── Statuszeile ── */
.gd-statusbar{
  position:relative;z-index:3;margin-top:auto;
  transition:opacity .3s ease;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.04em;
  color:#8fb894;background:linear-gradient(180deg,transparent,rgba(3,8,4,.78));
}
.gd-status{display:flex;align-items:center;gap:6px}
.gd-status::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#9dff4f;
  box-shadow:0 0 7px #9dff4f;flex-shrink:0;
}
.gd-aktiv .gd-status,.gd-scan .gd-status{color:#ff9a86}
.gd-aktiv .gd-status::before,.gd-scan .gd-status::before{background:#ff2d2d;box-shadow:0 0 8px #ff2d2d;
  animation:gdBlink .7s steps(2,end) infinite}
@keyframes gdBlink{50%{opacity:.25}}
.gd-zahlen{display:flex;gap:10px;font-variant-numeric:tabular-nums}
.gd-timer{color:#ff8a76;font-weight:600;min-width:42px;text-align:right}
.gd-found{color:#ffb4a4}

/* ── Ausrüstungs-Menü ── */
.gd-gear{
  position:absolute;left:8px;right:8px;bottom:46px;z-index:7;
  border:1px solid rgba(157,255,79,.45);
  background:linear-gradient(180deg,rgba(6,16,8,.96),rgba(3,9,4,.98));
  box-shadow:0 -12px 40px rgba(0,0,0,.65);
  padding:9px;
  transform:translateY(130%);opacity:0;
  transition:transform .52s cubic-bezier(.2,.9,.25,1), opacity .4s ease;
}
.gd-gear.auf{transform:none;opacity:1}
.gd-gear-auf .gd-statusbar{opacity:0}
.gd-gear::before,.gd-gear::after{content:'';position:absolute;width:13px;height:13px;border:1.5px solid #9dff4f}
.gd-gear::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.gd-gear::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

.gd-gear-kopf{
  font-family:'Oswald',sans-serif;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:#9dff4f;margin-bottom:7px;display:flex;align-items:center;gap:6px;
}
.gd-gear-kopf::before{content:'';border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:6px solid #9dff4f}

.gd-karte{border:1px solid rgba(255,45,45,.4);padding:8px;background:rgba(30,6,6,.5)}
.gd-karte-tag{
  display:flex;align-items:center;gap:6px;margin-bottom:7px;
  font-family:'Oswald',sans-serif;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#ff7a6a;
}
.gd-karte-tag::before{content:'';width:5px;height:8px;background:#ff2d2d}
.gd-drohne{display:block;width:100%;height:auto;max-height:88px;object-fit:cover;object-position:center;margin:0 auto;border-radius:1px}
.gd-name{
  display:flex;align-items:center;gap:7px;margin-top:7px;
  font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.gd-beschr{margin-top:4px;font-size:10px;line-height:1.5;color:#8c9891}
.gd-beschr em{color:#ff8a76;font-style:normal;font-weight:600}

.gd-activate{
  display:block;width:100%;margin-top:8px;padding:10px;
  background:#9dff4f;color:#06180a;border:0;cursor:pointer;
  font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:background .2s, transform .12s, box-shadow .25s;
  box-shadow:0 0 0 0 rgba(157,255,79,.5);
  animation:gdReady 2s ease-in-out infinite;
}
@keyframes gdReady{0%,100%{box-shadow:0 0 0 0 rgba(157,255,79,.42)}50%{box-shadow:0 0 22px 3px rgba(157,255,79,.3)}}
.gd-activate:hover{background:#b6ff7a}
.gd-activate.gd-press{transform:scale(.96);background:#fff;box-shadow:0 0 30px 6px rgba(157,255,79,.65)}

/* ── Untere Leiste der App ── */
.gd-nav{
  position:relative;z-index:4;display:flex;align-items:center;justify-content:space-around;
  padding:7px 8px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(3,7,4,.92);border-top:1px solid rgba(157,255,79,.16);
}
.gd-nav span{
  font-family:'Oswald',sans-serif;font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5f7a63;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.gd-nav svg{width:15px;height:15px;fill:none;stroke:#7d9a80;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gd-nav .gd-sos{color:#ff7a6a}
.gd-nav .gd-sos svg{stroke:#ff4d3d}

/* ── Wiederholen ── */
.gd-again{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;cursor:pointer;
  background:rgba(5,10,6,.9);border:1px solid #9dff4f;color:#d8ffb8;
  font-family:'Oswald',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s,color .2s;
}
.gd-again[hidden]{display:none}
.gd-again:hover{background:#9dff4f;color:#06180a}
.gd-again svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ── Ablauf in drei Schritten ── */
.gd-schritte{
  list-style:none;margin:28px auto 0;padding:0;max-width:620px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.gd-schritte li{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 8px;border-top:2px solid rgba(255,255,255,.09);
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#6d757e;transition:color .35s ease, border-color .35s ease;
}
.gd-schritte li span{
  font-size:10px;letter-spacing:.1em;color:#4e555d;transition:color .35s ease;
}
.gd-schritte li.fertig{color:#9aa3ad;border-top-color:rgba(255,45,45,.45)}
.gd-schritte li.fertig span{color:#ff5a4a}
.gd-schritte li.aktiv{color:#fff;border-top-color:#ff2d2d}
.gd-schritte li.aktiv span{color:#ff2d2d}
.gd-schritte li.aktiv::after{
  content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:#ff2d2d;
  box-shadow:0 0 14px 1px rgba(255,45,45,.7);
}

.gd-fuss{
  margin:26px auto 0;max-width:700px;
  font-size:13px;line-height:1.75;color:#7d868f;
}
.gd-fuss b{color:#ff6a58;font-weight:600}

/* ═══════════ Tablet und PC: Querformat ═══════════ */
@media(min-width:760px){
  .gd-sec{padding:104px 40px 112px}
  .gd-geraet{max-width:980px;aspect-ratio:16/9;border-radius:16px;padding:9px}
  .gd-schirm{border-radius:10px}
  .gd-top{padding:14px 18px 0}
  .gd-marke{font-size:14px}
  .gd-gps{font-size:10.5px}
  .gd-mission{font-size:12px;padding:7px 22px}
  .gd-statusbar{font-size:11.5px;padding:10px 18px}
  .gd-timer{min-width:52px}
  /* Menü sitzt seitlich statt unten – wie beim gedrehten Handy */
  .gd-gear{left:auto;right:18px;bottom:64px;top:auto;width:300px;
    transform:translateX(130%);padding:15px}
  .gd-gear.auf{transform:none}
  .gd-drohne{max-height:132px;object-fit:cover}
  .gd-name{font-size:18px}
  .gd-beschr{font-size:12px}
  .gd-activate{font-size:13.5px;padding:13px}
  .gd-nav{padding:9px 40px}
  .gd-nav span{font-size:9px}
  .gd-nav svg{width:18px;height:18px}
  .gd-lead{font-size:16.5px}
}

@media(min-width:1180px){
  .gd-geraet{max-width:1080px}
}

/* Sehr kleine Geräte */
@media(max-width:360px){
  .gd-geraet{max-width:290px}
  .gd-beschr{font-size:10px}
  .gd-nav span{font-size:6.5px}
}

@media(prefers-reduced-motion:reduce){
  .gd-activate{animation:none}
  .gd-gear{transition:none}
  .gd-aktiv .gd-status::before,.gd-scan .gd-status::before{animation:none}
}