/* =========================================================
   Reward — Marketing-Flyer  (Campus-Screens + E-Mail/Druck)
   Reuses the website design system 1:1 (tokens, fonts, swipe
   deck + leaderboard). Three fixed-size "boards":
     .board--16x9  1920×1080   (normal screens)   — animated
     .board--9x16  1080×1920   (vertical screens)  — animated
     .board--a4    210×297mm   (e-mail / print)    — static
   Component sizes are driven by CSS vars so each board can
   scale the deck/leaderboard up for legibility.
   ========================================================= */

/* ---------- Fonts (self-hosted, GDPR-clean) ---------- */
@font-face{font-family:"Space Grotesk";src:url("assets/fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("assets/fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens (from website/styles.css) ---------- */
:root{
  --blue:#2563eb; --blue-ink:#1d4ed8; --blue-soft:#eff4ff; --blue-soft-2:#dce7ff; --blue-light:#7aa2ff;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --line:#e6eaf1; --line-2:#eef1f7;
  --bg:#ffffff; --bg-soft:#f6f8fc; --navy:#0b1220; --navy-2:#111c34;
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r-card:20px; --r:14px; --r-btn:12px; --r-sm:10px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(37,99,235,.04);
  --shadow:0 12px 30px -12px rgba(37,99,235,.18), 0 6px 14px -8px rgba(15,23,42,.10);
  --shadow-lg:0 40px 80px -28px rgba(15,23,42,.28), 0 16px 40px -20px rgba(37,99,235,.22);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{height:100%}
body{
  font-family:var(--font-body); color:var(--body); background:#070b14;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* board pages fill the tab and center the fixed-size stage (flyer.js scales it to fit) */
body[class^="board--"]{height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:700;line-height:1.06;letter-spacing:-.02em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.accent{color:var(--blue)}
.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}

/* ---------- Icons (CSS mask over Tabler SVGs) ---------- */
.ico{display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

/* ---------- The stage (one per board) ---------- */
.stage{position:relative;flex:none;overflow:hidden;color:#fff;isolation:isolate}
.stage__bg{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 82% -8%, rgba(37,99,235,.5), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.82), rgba(11,18,32,.96)),
    url("assets/img/tex-mountains.jpg") center/cover no-repeat;}

/* ---------- Brand lockup ---------- */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__mark{display:grid;place-items:center;border-radius:.32em;background:linear-gradient(150deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 10px 22px -8px rgba(37,99,235,.7);
  width:1.55em;height:1.55em;font-size:var(--brand-mark,2rem)}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:700;color:#fff;letter-spacing:-.02em;font-size:var(--brand-name,1.5rem)}
.brand__tag{letter-spacing:.16em;text-transform:uppercase;color:var(--blue-light);margin-top:.35em;white-space:nowrap;font-size:var(--brand-tag,.62rem);font-weight:600}
.stage--light .brand__name{color:var(--ink)}
.stage--light .brand__tag{color:var(--muted)}

/* ---------- Headline / copy ---------- */
.eyebrow{font-family:var(--font-body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-light);font-size:var(--eyebrow,.85rem);margin:0}
.stage--light .eyebrow{color:var(--blue)}
.title{color:#fff;letter-spacing:-.03em;font-size:var(--title,4rem);line-height:1.04}
.title .accent{color:var(--blue-light)}
.stage--light .title{color:var(--ink)}
.stage--light .title .accent{color:var(--blue)}
.sub{color:#c7d2e4;font-size:var(--sub,1.4rem);line-height:1.5;max-width:30ch}
.stage--light .sub{color:var(--body)}

/* ---------- Trust chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6em}
.chips li{display:inline-flex;align-items:center;gap:.45em;font-weight:500;color:#dbe4f3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  padding:.5em .95em;border-radius:var(--r-pill);font-size:var(--chip,1rem)}
.chips .ico{color:var(--blue-light);font-size:1.1em}
.stage--light .chips li{color:var(--ink);background:var(--bg-soft);border-color:var(--line)}
.stage--light .chips .ico{color:var(--blue)}

/* ---------- QR block ---------- */
.qr{display:flex;align-items:center;gap:var(--qr-gap,1.4rem);background:#fff;border-radius:var(--r-card);
  padding:var(--qr-pad,1.3rem);box-shadow:var(--shadow-lg);color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.qr:hover{transform:translateY(-2px)}
.qr__code{flex:none;width:var(--qr-size,150px);height:var(--qr-size,150px);background:#fff;border-radius:12px}
.qr__svg{width:100%;height:100%;display:block}
.qr__text{display:flex;flex-direction:column;gap:.25em;min-width:0}
.qr__kicker{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--blue-ink);font-size:var(--qr-kicker,.8rem);letter-spacing:.04em;text-transform:uppercase}
.qr__title{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:var(--qr-title,1.5rem);line-height:1.1}
.qr__url{color:var(--muted);font-size:var(--qr-url,.95rem);font-weight:500;white-space:nowrap}
.qr__note{color:var(--body);font-size:var(--qr-note,.92rem);line-height:1.4}

/* =========================================================
   Swipe deck (Tinder-style feature cards) — from website
   ========================================================= */
.deckwrap{display:flex;flex-direction:column;align-items:center;width:var(--deck-w,460px)}
.deck{position:relative;width:100%;height:var(--deck-h,360px);touch-action:pan-y}
.swipe-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--card-gap,1.1rem);
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:var(--card-pad,2.4rem);
  box-shadow:var(--shadow-lg);will-change:transform;cursor:grab;user-select:none;-webkit-user-select:none}
.swipe-card:active{cursor:grabbing}
.swipe-card__badge{display:grid;place-items:center;width:var(--badge,64px);height:var(--badge,64px);
  border-radius:calc(var(--badge,64px)*.28);background:var(--blue-soft);color:var(--blue);font-size:calc(var(--badge,64px)*.5)}
.swipe-card h3{font-size:var(--card-h3,1.55rem);color:var(--ink)}
.swipe-card p{font-size:var(--card-p,1.05rem);color:var(--body);line-height:1.45}
.swipe-card__stamp{position:absolute;top:1.4em;font-family:var(--font-display);font-weight:700;font-size:var(--stamp,1.25rem);
  letter-spacing:.05em;text-transform:uppercase;padding:.2em .55em;border-radius:10px;opacity:0;pointer-events:none}
.swipe-card__stamp--like{right:1.4em;color:var(--blue);border:3px solid var(--blue);transform:rotate(11deg)}
.swipe-card__stamp--nope{left:1.4em;color:var(--muted);border:3px solid var(--muted);transform:rotate(-11deg)}
.deck__ui{display:flex;align-items:center;gap:var(--deckui-gap,1.4rem);margin-top:var(--deckui-mt,1.6rem)}
.deck__btn{width:var(--deckbtn,58px);height:var(--deckbtn,58px);border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:calc(var(--deckbtn,58px)*.42);box-shadow:var(--shadow-sm)}
.deck__btn--nope{color:var(--muted)}
.deck__btn--like{color:var(--blue);border-color:var(--blue-soft-2)}
.deck__count{font-family:var(--font-display);font-weight:700;font-size:var(--deckcount,1.05rem);color:#fff;min-width:3em;text-align:center}
.stage--light .deck__count{color:var(--ink)}

/* =========================================================
   Leaderboard (climb) — from website
   ========================================================= */
.lb__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--lbcard-pad,1.4rem);box-shadow:var(--shadow-lg);width:100%}
.lb__card-head{display:flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:var(--lbhead,.95rem);margin-bottom:var(--lbhead-mb,1rem);padding-inline:.4rem}
.lb__card-head .ico{color:var(--blue);font-size:1.25em}
.lb__list{position:relative}  /* row spacing comes from each board's --lb-step (JS falls back to 56px) */
.lb__row{position:absolute;left:0;right:0;display:flex;align-items:center;gap:var(--lb-gap,.8rem);height:var(--lb-row,48px);
  padding:0 var(--lb-px,.9rem);border-radius:12px;background:#fff;border:1px solid var(--line-2);
  transition:transform .5s cubic-bezier(.34,1.15,.4,1),background .3s ease,border-color .3s ease,box-shadow .3s ease;will-change:transform}
.lb__pos{font-family:var(--font-display);font-weight:700;font-size:var(--lb-fs,.95rem);color:var(--muted);width:1.7em;text-align:center;flex:none}
.lb__name{font-weight:600;color:var(--ink);flex:1;font-size:var(--lb-fs,1rem)}
.lb__val{font-family:var(--font-display);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--lb-fs,1rem)}
.lb__row--me{background:var(--blue);border-color:var(--blue);box-shadow:0 14px 28px -10px rgba(37,99,235,.65);z-index:2}
.lb__row--me .lb__pos,.lb__row--me .lb__name,.lb__row--me .lb__val{color:#fff}
/* compact readout (Dein Rang / Karma-Punkte) */
.lb__readout{display:flex;gap:var(--ro-gap,2.4rem)}
.lb__readout>div{display:flex;flex-direction:column}
.lb__rank-lbl{letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);margin-bottom:.4em;font-size:var(--ro-lbl,.78rem)}
.stage--light .lb__rank-lbl{color:var(--muted)}
.lb__rank,.lb__pts{font-family:var(--font-display);font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums;font-size:var(--ro-num,3rem)}
.stage--light .lb__rank,.stage--light .lb__pts{color:var(--blue)}

/* =========================================================
   BOARD 1 — 16:9 landscape (1920×1080), animated, navy
   ========================================================= */
.board--16x9 .stage{width:1920px;height:1080px;display:grid;
  grid-template-columns:660px 1fr;gap:64px;padding:72px 96px;align-content:center}
.board--16x9{
  --brand-mark:2.6rem;--brand-name:2rem;--brand-tag:.74rem;
  --eyebrow:1.05rem;--title:4rem;--sub:1.6rem;--chip:1.1rem;
  --deck-w:450px;--deck-h:500px;--card-pad:2.6rem;--card-gap:1.2rem;--badge:96px;--card-h3:2.1rem;--card-p:1.4rem;--stamp:1.7rem;
  --deckbtn:72px;--deckcount:1.5rem;--deckui-gap:1.8rem;--deckui-mt:1.7rem;
  --lbcard-pad:1.7rem;--lbhead:1.4rem;--lbhead-mb:1rem;--lb-row:68px;--lb-step:78px;--lb-fs:1.45rem;--lb-px:1.3rem;
  --ro-num:3.2rem;--ro-lbl:.92rem;
  --qr-size:190px;--qr-pad:1.7rem;--qr-gap:1.7rem;--qr-kicker:.92rem;--qr-title:2rem;--qr-url:1.05rem;
}
.board--16x9 .b-left{display:flex;flex-direction:column;align-items:flex-start;gap:28px;justify-content:center}
.board--16x9 .b-left .title{margin-top:6px}
/* leaderboard takes the centre, deck sits on the far right so cards swipe off-screen (not across the leaderboard) */
.board--16x9 .b-right{display:grid;grid-template-columns:1fr 450px;gap:60px;align-items:center}
.board--16x9 .lb-col{display:flex;flex-direction:column;gap:24px}

/* =========================================================
   BOARD 2 — 9:16 vertical (1080×1920), animated, navy
   ========================================================= */
.board--9x16 .stage{width:1080px;height:1920px;display:flex;flex-direction:column;align-items:center;
  gap:20px;padding:52px 72px 42px}
.board--9x16{
  --brand-mark:2.5rem;--brand-name:2rem;--brand-tag:.76rem;
  --eyebrow:1.05rem;--title:3.8rem;--sub:1.5rem;--chip:1.05rem;
  --deck-w:720px;--deck-h:380px;--card-pad:2.4rem;--card-gap:1rem;--badge:92px;--card-h3:2.1rem;--card-p:1.4rem;--stamp:1.7rem;
  --deckbtn:64px;--deckcount:1.4rem;--deckui-gap:1.6rem;--deckui-mt:1.3rem;
  --lbcard-pad:1.6rem;--lbhead:1.4rem;--lbhead-mb:.85rem;--lb-row:56px;--lb-step:66px;--lb-fs:1.4rem;--lb-px:1.3rem;--lb-gap:.9rem;
  --ro-num:2.6rem;--ro-lbl:.88rem;
  --qr-size:180px;--qr-pad:1.6rem;--qr-gap:1.6rem;--qr-kicker:.9rem;--qr-title:1.9rem;--qr-url:1.02rem;
}
.board--9x16 .b-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;width:100%}
.board--9x16 .b-head .brand{margin-bottom:6px}
.board--9x16 .title{text-align:center}
.board--9x16 .sub{max-width:26ch;text-align:center}
.board--9x16 .deckwrap{margin-block:4px}
.board--9x16 .lb__card{max-width:840px}
.board--9x16 .lb-col{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.board--9x16 .lb-col .lb__list{height:640px}  /* 8 rows * 80px */
.board--9x16 .b-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}
.board--9x16 .qr{width:840px;max-width:100%}

/* =========================================================
   BOARD 3 — A4 portrait (210×297mm), static end-state, light
   ========================================================= */
@page{size:A4;margin:0}
body.board--a4{background:#fff}
.board--a4 .stage{width:210mm;height:297mm;background:#fff;color:var(--ink);
  display:flex;flex-direction:column;gap:7mm;padding:14mm 15mm 12mm}
.board--a4{
  --brand-mark:32px;--brand-name:24px;--brand-tag:9px;
  --eyebrow:12px;--title:46px;--sub:16.5px;--chip:13px;
  --deck-w:100%;--deck-h:92mm;--card-pad:8mm;--card-gap:4mm;--badge:70px;--card-h3:23px;--card-p:15px;--stamp:17px;
  --deckbtn:46px;--deckcount:15px;--deckui-gap:1.2rem;--deckui-mt:6mm;
  --lbcard-pad:6mm;--lbhead:15px;--lbhead-mb:4mm;--lb-row:13mm;--lb-fs:15.5px;--lb-px:4mm;--lb-gap:3mm;
  --qr-size:35mm;--qr-pad:6mm;--qr-gap:6mm;--qr-kicker:11px;--qr-title:22px;--qr-url:12.5px;--qr-note:12px;
}
.board--a4 .a4-head{display:flex;align-items:center;justify-content:space-between;gap:8mm}
.board--a4 .a4-hero{display:flex;flex-direction:column;gap:3mm}
.board--a4 .title{max-width:20ch}
.board--a4 .sub{max-width:70ch}
.board--a4 .chips{margin-top:1mm}
.board--a4 .a4-mid{display:grid;grid-template-columns:1fr 1fr;gap:9mm;align-items:start}
.board--a4 .deckwrap{width:100%}
.board--a4 .lb-col{display:flex;flex-direction:column;gap:4mm}
.board--a4 .a4-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8mm;
  padding-top:5mm;border-top:1px solid var(--line)}
.board--a4 .a4-credit{font-size:12px;color:var(--muted);max-width:42ch;line-height:1.5;text-align:right}
.board--a4 .deck__hint{display:none}
.board--a4 .swipe-card,.board--a4 .lb__card,.board--a4 .qr{box-shadow:var(--shadow)}

/* ---------- Reduced motion: deck/leaderboard settle, no transition ---------- */
@media (prefers-reduced-motion:reduce){
  .lb__row,.swipe-card{transition:none!important}
}

/* ---------- Print ---------- */
@media print{
  html,body,body[class^="board--"]{height:auto!important;display:block!important;overflow:visible!important;background:#fff}
  .stage{box-shadow:none;transform:none!important}  /* print/PDF at true A4 size, undo fit-scale */
  .swipe-card,.lb__card,.qr{box-shadow:0 6px 18px -10px rgba(15,23,42,.25)!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}