/* ============================================================
   FRONTLINE LIFETIME PASS — Kartenbauteil
   wird von index.html, pass.html und drucken.html benutzt
   ============================================================ */
.fpass{
  --card-w: 540px;
  width:100%;max-width:var(--card-w);aspect-ratio:1.586;
  position:relative;overflow:hidden;border-radius:16px;
  background:#0d0d0f;
  color:#ece7de;
  font-family:'Inter',system-ui,sans-serif;text-align:left;
  box-shadow:0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(236,231,222,.14), inset 0 1px 0 rgba(255,255,255,.10);
  isolation:isolate;
}
.fpass .tex{position:absolute;inset:0;z-index:0;
  background:url('img/tex-metall.jpg') center/cover;opacity:.9;filter:brightness(.62) contrast(1.25) saturate(.6)}
.fpass .vig{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(130% 120% at 12% -10%, rgba(255,255,255,.16), transparent 52%),
    linear-gradient(150deg, rgba(193,18,31,.13), transparent 38%),
    linear-gradient(0deg, rgba(0,0,0,.60), transparent 62%)}
.fpass .wm{position:absolute;z-index:2;right:-4%;top:50%;transform:translateY(-50%);
  width:52%;opacity:.045;pointer-events:none}
.fpass .accent{position:absolute;z-index:3;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,transparent,var(--red,#c1121f) 22%,#ff2b3d 50%,var(--red,#c1121f) 78%,transparent)}
.fpass .holo{position:absolute;inset:-40%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 46%,rgba(255,120,130,.14) 50%,rgba(255,255,255,.16) 54%,transparent 62%);
  transform:translateX(-60%);animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,62%{transform:translateX(-60%)}88%,100%{transform:translateX(60%)}}
.fpass .edge{position:absolute;inset:0;z-index:5;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(236,231,222,.10), inset 0 0 60px rgba(0,0,0,.6)}

.fpass .inner{position:relative;z-index:4;height:100%;padding:6.6% 7%;
  display:flex;flex-direction:column;justify-content:space-between}

.fpass .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fpass .mark{display:flex;align-items:center;gap:10px}
.fpass .mark img{width:clamp(30px,9.6%,54px);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.fpass .brand{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:clamp(.52rem,1.75cqw,.78rem);line-height:1.25;text-align:right;color:#ece7de}
.fpass .brand span{display:block;font-weight:300;letter-spacing:.22em;color:#a49e96}

.fpass .mid{margin:auto 0}
.fpass .tier{font-family:'JetBrains Mono',monospace;font-size:clamp(.5rem,1.6cqw,.72rem);
  letter-spacing:.3em;text-transform:uppercase;color:#ff2b3d;margin-bottom:.45em}
.fpass .id{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,7.4cqw,3.1rem);line-height:.95;letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
.fpass .name{font-family:'Oswald',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.24em;font-size:clamp(.66rem,2.3cqw,1rem);color:#cfc9c1;margin-top:.5em}

.fpass .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.fpass .fields{display:flex;gap:clamp(14px,4cqw,32px)}
.fpass .f{min-width:0}
.fpass .f b{display:block;font-family:'JetBrains Mono',monospace;font-size:clamp(.4rem,1.25cqw,.58rem);
  letter-spacing:.2em;text-transform:uppercase;color:#8f8a83;font-weight:400;margin-bottom:.35em}
.fpass .f span{display:block;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(.6rem,2cqw,.92rem);color:#ece7de;white-space:nowrap}
.fpass .f span.hot{color:#ff2b3d}
.fpass .qr{flex:none;background:#fff;padding:clamp(3px,.9cqw,6px);border-radius:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.fpass .qr img{width:clamp(50px,18cqw,92px);height:auto;display:block;image-rendering:crisp-edges}

/* Container-Queries für saubere Skalierung */
.fpass{container-type:inline-size}

/* ---- Rückseite ---- */
.fpass.back .inner{justify-content:space-between;padding-top:21%;padding-bottom:5.5%}
.fpass.back .stripe{position:absolute;left:0;right:0;top:14%;height:16%;z-index:3;background:#08080a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
.fpass.back .rules{font-family:'Inter',sans-serif;font-size:clamp(.4rem,1.35cqw,.6rem);
  line-height:1.5;color:#a49e96;max-width:62%}
.fpass.back .rules b{color:#ece7de;font-weight:600}
.fpass.back .sig{font-family:'Oswald',sans-serif;font-weight:300;text-transform:none;
  font-size:clamp(.6rem,2cqw,.92rem);color:#ece7de}
.fpass.back .sigline{border-top:1px solid rgba(236,231,222,.25);padding-top:.4em;margin-top:.2em;
  font-family:'JetBrains Mono',monospace;font-size:clamp(.38rem,1.2cqw,.55rem);
  letter-spacing:.18em;text-transform:uppercase;color:#6f6a64}

.fpass.back .qr img{width:clamp(46px,17cqw,86px)}
.fpass.back .logo{width:34%;margin-bottom:1.6%;opacity:.9;height:auto}
.fpass.back .sigline{margin-top:.5em}