/* 7DaySkins – Prototyp-Stylesheet */

:root{
  --bg:#08090f;
  --bg-2:#101220;
  --bg-3:#171a2b;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --text:#edeff5;
  --muted:#9aa0b4;
  --dim:#6a7085;

  --violet:#7c5cff;
  --violet-hi:#9b82ff;
  --violet-dim:rgba(124,92,255,.14);
  --magenta:#d84ef0;
  --cyan:#2ad8e8;
  --green:#4ade80;

  --r-milspec:#4b69ff;
  --r-restricted:#8847ff;
  --r-classified:#d32ce6;
  --r-covert:#eb4b4b;
  --r-extraordinary:#f0c14f;

  --radius:14px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.8,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
/* Rauschtextur über allem, gibt Tiefe */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
img{max-width:100%;display:block}

h1,h2,h3,.display{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:.98;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.main{flex:1}

/* Scroll-Einblendung */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,9,15,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;height:66px}
.logo{
  font-family:Anton,sans-serif;font-size:23px;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;text-transform:uppercase;
}
.logo span{
  background:linear-gradient(100deg,var(--violet),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav{display:flex;gap:24px}
.nav a{
  position:relative;color:var(--muted);text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;transition:color .18s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  transition:right .25s var(--ease);
}
.nav a:hover,.nav a.active{color:var(--text)}
.nav a:hover::after,.nav a.active::after{right:0}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:0;color:var(--text);font-size:20px;cursor:pointer;padding:6px}

/* ---------- Buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:10px;border:1px solid transparent;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s var(--ease),box-shadow .22s ease,background .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(100deg,var(--violet),var(--magenta));
  color:#fff;box-shadow:0 6px 24px -8px rgba(124,92,255,.7);
}
.btn-primary:hover{box-shadow:0 12px 34px -8px rgba(124,92,255,.85)}
/* Schimmer über dem Hauptbutton */
.btn-primary::before{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{0%,62%{left:-45%}92%,100%{left:120%}}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(124,92,255,.5)}
/* Steams eigene Farbgebung: dunkles Navy mit hellblauem Akzent. */
.btn-steam{
  background:linear-gradient(180deg,#2a475e,#1b2838);
  color:#c7d5e0;
  border-color:rgba(102,192,244,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-steam:hover{
  background:linear-gradient(180deg,#35587a,#223246);
  color:#fff;
  border-color:rgba(102,192,244,.6);
  box-shadow:0 6px 22px -8px rgba(102,192,244,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-steam .steam-icon{width:17px;height:17px;flex:none;fill:currentColor}
.btn-steam:hover .steam-icon{fill:#66c0f4}

/* Angemeldeter Nutzer im Kopfbereich */
.user-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 13px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  font-size:13.5px;font-weight:600;text-decoration:none;color:var(--text);
  transition:border-color .2s ease,background .2s ease;
}
.user-chip:hover{background:rgba(255,255,255,.09);border-color:rgba(124,92,255,.5)}
.user-chip img{width:26px;height:26px;border-radius:50%;flex:none}
.user-chip .credit{color:var(--violet-hi);font-family:'JetBrains Mono',monospace;font-size:12.5px}
.btn-lg{padding:15px 30px;font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none;box-shadow:none}
.btn.is-disabled::before{display:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:86px 0 70px;overflow:hidden;isolation:isolate;
  min-height:min(680px,90vh);display:flex;align-items:center;
}
/* bewegter Farbnebel */
.hero::before{
  content:"";position:absolute;inset:-25% -10% auto;height:150%;z-index:-2;
  background:
    radial-gradient(42% 46% at 26% 20%,rgba(124,92,255,.42),transparent 62%),
    radial-gradient(38% 44% at 76% 32%,rgba(216,78,240,.30),transparent 64%),
    radial-gradient(46% 40% at 50% 84%,rgba(42,216,232,.14),transparent 66%);
  filter:blur(18px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.07)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}
}
/* Raster-Overlay */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 72% 62% at 50% 34%,#000 30%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 34%,#000 30%,transparent 76%);
}
.hero-inner{position:relative;text-align:left;z-index:2;width:100%}
.hero-copy{max-width:min(760px,64%)}
.hero-copy h1{text-wrap:balance}
/* Schatten statt das Bild stärker abzudunkeln – so bleibt die Szene
   sichtbar und die Schrift trotzdem auf hellen Stellen lesbar.
   Bei der Überschrift drop-shadow statt text-shadow: Die Schrift ist mit
   einem Farbverlauf gefüllt und selbst transparent, ein Textschatten
   würde durchscheinen und sie trüb wirken lassen. */
.hero-copy h1{
  filter:drop-shadow(0 3px 20px rgba(5,6,12,.92)) drop-shadow(0 1px 2px rgba(5,6,12,.75));
}
.hero-copy p,.hero-copy .eyebrow{text-shadow:0 1px 14px rgba(5,6,12,.9)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:#cbbcff;background:rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.34);
  padding:7px 16px;border-radius:999px;margin-bottom:18px;
  backdrop-filter:blur(6px);
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:blip 2.2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(124,92,255,.7)}50%{opacity:.5;box-shadow:0 0 0 7px rgba(124,92,255,0)}}

.hero h1{font-size:clamp(46px,9.5vw,104px);margin-bottom:16px}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--violet-hi),var(--magenta) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--muted);font-size:clamp(15px,2.1vw,17.5px);max-width:46ch;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}

/* Hintergrundebene mit Charakter – die Schrift liegt daneben, nicht darauf */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo[hidden],.hero-char[hidden]{display:none}

/* Unscharfe Kopie des Hero-Bildes als Untergrund.
   Das Bild ist 16:9, der Hero auf breiten Schirmen aber viel flacher.
   Ohne diese Ebene bliebe links eine schwarze Fläche, weil dort der
   dunkle Bildrand liegt. So füllt stattdessen die Farbstimmung des
   Bildes die ganze Breite. */
.hero-bg::before{
  content:"";position:absolute;inset:-8%;
  background-image:url('../img/hero.png');
  background-size:cover;
  background-position:58% center;
  filter:blur(44px) saturate(1.3) brightness(.62);
  transform:scale(1.06);
}

.hero-photo{
  /* Scharfes Bild rechts, in Originalseitenverhältnis – nicht verzerrt. */
  position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;
  object-fit:cover;object-position:center;
  /* Leicht herangezoomt, damit die Figur größer wirkt. Der Ursprung liegt
     auf der Figur selbst – so bleibt sie an ihrer Stelle und beschnitten
     wird nur der weniger wichtige linke und obere Rand. */
  transform:scale(1.22);transform-origin:70% 58%;
  /* Nur eine schmale weiche Kante links. Passt das Bildformat zum Hero,
     fällt sie nicht auf; ist das Bild zu schmal, verhindert sie eine
     harte Abbruchkante zum unscharfen Untergrund. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 100%);
}
.hero-char{
  position:absolute;top:50%;left:73%;transform:translate(-50%,-50%);
  height:86%;width:auto;
  filter:drop-shadow(0 26px 60px rgba(124,92,255,.45));
  animation:floatC 7s ease-in-out infinite;
}

/* Abdunklung nach links, damit die Schrift frei steht */
.hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* Nach links abdunkeln, damit die Schrift lesbar bleibt – aber nie
       deckend, sonst sieht es aus wie ein schwarzer Block neben dem Bild. */
    linear-gradient(90deg,rgba(8,9,15,.82) 0%,rgba(8,9,15,.68) 24%,rgba(8,9,15,.34) 46%,rgba(8,9,15,.06) 66%,transparent 80%),
    linear-gradient(180deg,rgba(8,9,15,.4),transparent 18%,transparent 62%,var(--bg) 100%),
    radial-gradient(58% 52% at 70% 46%,transparent 36%,rgba(124,92,255,.2) 100%);
}

/* Freigestelltes PNG ohne Hintergrund braucht keine Maske */
.hero-photo.cutout{
  height:96%;min-width:0;
  -webkit-mask-image:none;mask-image:none;
  filter:drop-shadow(0 30px 70px rgba(124,92,255,.55));
  animation:floatC 8s ease-in-out infinite;
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatC{
  0%,100%{transform:translate(-50%,-50%)}
  50%    {transform:translate(-50%,calc(-50% - 14px))}
}

.float-card{
  position:absolute;z-index:2;width:166px;
  background:rgba(16,18,32,.8);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);border-radius:12px;padding:11px;
  animation:float 6s ease-in-out infinite;
}
/* Von hinten zählen: davor steht je nach Fall das Bild oder die SVG-Figur */
/* Von hinten zählen: davor steht je nach Fall das Bild oder die SVG-Figur */
.float-card:nth-last-child(2){right:4%;top:13%;animation-delay:.6s}
.float-card:nth-last-child(1){right:15%;bottom:30%;animation-delay:1.4s}
.float-card .fc-media{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:9px;padding:8px;
}
.float-card svg{width:88%;height:auto}
.float-card b{display:block;font-size:12.5px;font-weight:700}
.float-card span{display:block;font-size:11px;color:var(--muted)}
.float-card u{display:block;text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--violet-hi);margin-top:5px}

/* ---------- Trust ---------- */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-top:46px;
}
.trust div{background:rgba(16,18,32,.6);padding:22px 16px;text-align:center;transition:background .25s ease}
.trust div:hover{background:rgba(124,92,255,.08)}
.trust b{
  display:block;font-family:Anton,sans-serif;font-size:21px;margin-bottom:4px;
  background:linear-gradient(100deg,var(--violet-hi),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.trust span{font-size:12.5px;color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding:70px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.section-head h2{font-size:clamp(28px,4.6vw,44px)}
.section-head p{color:var(--muted);font-size:14.5px;margin-top:8px;text-transform:none}
.section-head a{
  color:var(--violet-hi);text-decoration:none;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.section-head a:hover{color:var(--magenta)}

/* ---------- Skin-Karten ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:18px}
.card{
  position:relative;
  background:linear-gradient(170deg,var(--bg-2),#0c0e18);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .26s var(--ease),border-color .26s ease,box-shadow .26s ease;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:radial-gradient(75% 55% at 50% 0%,var(--glow,rgba(124,92,255,.22)),transparent 70%);
  transition:opacity .3s ease;
}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 20px 44px -22px var(--glow,rgba(124,92,255,.8))}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}

.card-media{
  position:relative;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);padding:16px;
}
.card-media svg{width:84%;height:auto;transition:transform .3s var(--ease)}
.card:hover .card-media svg{transform:scale(1.07) rotate(-2deg)}
.rarity-bar{position:absolute;left:0;right:0;bottom:0;height:3px;box-shadow:0 0 14px 1px currentColor}
.chip{
  position:absolute;top:11px;left:11px;
  font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;
  background:rgba(6,7,12,.76);border:1px solid var(--line-2);backdrop-filter:blur(6px);
}
.chip.ok{color:var(--green);border-color:rgba(74,222,128,.42)}
.chip.busy{color:var(--dim)}
.chip-wear{left:auto;right:11px;color:var(--muted)}

.card-body{padding:15px;display:flex;flex-direction:column;flex:1}
.card-weapon{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:600;margin-bottom:3px}
.card-name{font-family:Anton,sans-serif;font-size:19px;margin-bottom:9px;letter-spacing:.01em}
.card-meta{display:flex;gap:7px;flex-wrap:wrap;font-size:10.5px;color:var(--dim);margin-bottom:13px}
.card-meta span{background:rgba(255,255,255,.05);padding:3px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace}
.card-price{display:flex;align-items:baseline;gap:6px;margin-top:auto}
.card-price b{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700}
.card-price small{color:var(--muted);font-size:11.5px}
.card-market{font-size:11px;color:var(--dim);margin-top:3px;font-family:'JetBrains Mono',monospace}
.card-cta{margin-top:13px}
.card-cta .btn{font-size:12.5px;padding:11px 16px}

/* ---------- Filter / Shop ---------- */
.shop{display:grid;grid-template-columns:238px 1fr;gap:28px;align-items:start;padding:36px 0 70px}
.filters{
  background:linear-gradient(170deg,var(--bg-2),#0c0e18);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:82px;
}
.filter-group{margin-bottom:22px}
.filter-group:last-child{margin-bottom:0}
.filter-group h4{
  font-family:Anton,sans-serif;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--violet-hi);margin-bottom:11px;
}
.filter-group label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer;padding:5px 0;transition:color .16s ease}
.filter-group label:hover{color:var(--text)}
.filter-group input[type=checkbox]{accent-color:var(--violet);width:15px;height:15px;cursor:pointer}
.shop-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.input,select{
  background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:10px;font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input:focus,select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.input::placeholder{color:var(--dim)}
.input-search{flex:1;min-width:190px}
.result-count{color:var(--dim);font-size:13px;margin-bottom:16px;font-family:'JetBrains Mono',monospace}

/* ---------- Detailseite ---------- */
.detail{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;padding:34px 0 60px;align-items:start}
.detail-media{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--bg-2),#0b0d16);
  border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:38px;
}
.detail-media::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(56% 50% at 50% 46%,var(--glow,rgba(124,92,255,.3)),transparent 70%);
}
.detail-media svg{width:84%;height:auto;position:relative;animation:float 7s ease-in-out infinite}
.breadcrumb{font-size:12.5px;color:var(--dim);padding:20px 0 0;text-transform:uppercase;letter-spacing:.06em}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--violet-hi)}
.detail h1{font-size:clamp(32px,5.4vw,54px);margin:6px 0 12px}
.detail-weapon{color:var(--violet-hi);font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.spec-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.spec-table td{padding:11px 0;border-bottom:1px solid var(--line)}
.spec-table td:first-child{color:var(--muted);width:46%}
.spec-table td:last-child{text-align:right;font-weight:600;font-family:'JetBrains Mono',monospace}
.price-box{
  background:linear-gradient(170deg,var(--bg-2),#0b0d16);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:22px;margin:22px 0;
}
.price-row{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.price-row b{font-family:'JetBrains Mono',monospace;font-size:38px;font-weight:700}
.price-row span{color:var(--muted);font-size:14px}
.credit-note{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.3);
  border-radius:10px;padding:13px 15px;margin:16px 0;font-size:13.5px;color:#cbbcff;
}
.conditions{font-size:13.5px;color:var(--muted);margin-top:18px}
.conditions strong{color:var(--text);text-transform:uppercase;letter-spacing:.07em;font-size:12px}
.conditions li{margin:7px 0 7px 18px}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.step{
  position:relative;background:linear-gradient(170deg,var(--bg-2),#0c0e18);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:border-color .25s ease,transform .25s var(--ease);
}
.step:hover{border-color:rgba(124,92,255,.42);transform:translateY(-3px)}
.step b{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;
  font-family:Anton,sans-serif;font-size:17px;margin-bottom:14px;
  box-shadow:0 6px 18px -6px rgba(124,92,255,.8);
}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:13.5px;color:var(--muted)}

/* ---------- Dashboard ---------- */
.rental{
  display:grid;grid-template-columns:176px 1fr auto;gap:22px;align-items:center;
  background:linear-gradient(170deg,var(--bg-2),#0c0e18);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:15px;
  transition:border-color .25s ease;
}
.rental:hover{border-color:rgba(124,92,255,.35)}
.rental-media{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.03);border-radius:10px;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.rental-media::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,var(--glow,rgba(124,92,255,.26)),transparent 72%)}
.rental-media svg{width:88%;height:auto;position:relative}
.countdown{display:flex;gap:8px;margin-top:12px}
.cd-unit{
  background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.24);
  border-radius:9px;padding:8px 12px;text-align:center;min-width:58px;
}
.cd-unit b{display:block;font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:#cbbcff}
.cd-unit span{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:rgba(74,222,128,.12);color:var(--green);border:1px solid rgba(74,222,128,.32);
}
.status.warn{background:rgba(240,193,79,.12);color:#f0c14f;border-color:rgba(240,193,79,.34)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px;margin-bottom:32px}
.stat{
  background:linear-gradient(170deg,var(--bg-2),#0c0e18);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
}
.stat span{font-size:11px;color:var(--muted);display:block;margin-bottom:7px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.stat b{font-family:'JetBrains Mono',monospace;font-size:27px;font-weight:700}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:0;color:var(--text);
  font-family:Anton,sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.01em;
  text-align:left;padding:20px 40px 20px 0;cursor:pointer;position:relative;
  transition:color .18s ease;
}
.faq-q:hover{color:var(--violet-hi)}
.faq-q::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease);
}
.faq-item.open .faq-q::after{transform:translateY(-20%) rotate(-135deg)}
.faq-a{display:none;padding:0 0 20px;color:var(--muted);font-size:14.5px;max-width:74ch}
.faq-item.open .faq-a{display:block;animation:fadeIn .35s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);padding:44px 0 28px;margin-top:40px;font-size:13.5px;
  background:linear-gradient(180deg,transparent,rgba(124,92,255,.05));
}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:28px;margin-bottom:28px}
.footer-grid h5{font-family:Anton,sans-serif;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--violet-hi);margin-bottom:12px}
.footer-grid a{display:block;color:var(--muted);text-decoration:none;padding:4px 0;transition:color .16s ease}
.footer-grid a:hover{color:var(--text)}
.footer-about p{color:var(--muted);margin-top:12px;max-width:38ch}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;color:var(--dim);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px}

.notice{
  background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.28);
  border-radius:10px;padding:14px 17px;font-size:13.5px;color:#cbbcff;margin-bottom:24px;
}
.empty{text-align:center;padding:64px 20px;color:var(--dim)}

/* Platzhalterkarten, solange die Daten geladen werden */
.card.skeleton{pointer-events:none;border-color:var(--line)}
.card.skeleton .card-media{aspect-ratio:16/10}
.card.skeleton .card-body{height:132px}
.card.skeleton .card-media,.card.skeleton .card-body{
  background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 70%);
  background-size:220% 100%;
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{from{background-position:140% 0}to{background-position:-40% 0}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .shop{grid-template-columns:1fr}
  .filters{position:static}
  .detail{grid-template-columns:1fr;gap:26px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .float-card:nth-child(4){display:none}
  .float-card{width:146px}
}
@media (max-width:760px){
  .nav{
    display:none;position:absolute;top:66px;left:0;right:0;
    flex-direction:column;gap:0;padding:8px 20px 16px;
    background:rgba(8,9,15,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .rental{grid-template-columns:1fr;gap:16px}
  .rental-media{max-width:210px}
  .float-card{display:none}
  /* Auf schmalen Schirmen steht der Text über dem Bild, nicht daneben */
  .hero{min-height:auto;padding:54px 0 58px}
  .hero-copy{max-width:100%}
  .hero-photo{
    /* Schmale Schirme: Bild füllt die Fläche, Text liegt darüber.
       Kein Versatz nach rechts, sonst entsteht links ein schwarzer Rand. */
    inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 28%;
    transform:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-char{left:50%;height:72%;opacity:.5}
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(8,9,15,.84),rgba(8,9,15,.74) 38%,rgba(8,9,15,.92) 82%,var(--bg) 100%);
  }
}
@media (max-width:560px){
  .header-actions .btn{padding:10px 13px;font-size:12px}
  .logo{font-size:20px}
  .trust{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .card-name{font-size:16px}
  .hero{padding:40px 0 50px}
  .countdown{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}