/* ============================================================
   BASIS — gilt für ALLE Vorlagen.
   Hier stehen Tokens, Karten-Gerüst, Kopf, Fuß, Safe Zones.
   Vorlagen ergänzen nur ihre eigene Komposition.
   ============================================================ */

:root{
  --brand-red:      #C8102E;
  --brand-ink:      #0B0B0C;
  --brand-paper:    #FFFFFF;
  --brand-muted:    rgba(255,255,255,.60);
  --brand-line:     rgba(255,255,255,.14);
  --brand-gold:     #F2C14E;

  /* Akzent + Textfarbe darauf: immer als Paar ändern. */
  --accent:         var(--brand-red);
  --on-accent:      #FFFFFF;

  --font-display:   'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --font-text:      'Barlow', system-ui, sans-serif;

  --radius:         16px;
  --gutter:         72px;

  --fs-title:       168px;
  --fs-game:        56px;
  --fs-meta:        32px;
  --fs-kicker:      30px;
  --fs-cta:         54px;

  --streak-angle:   -26deg;
}

body[data-theme="blau"]{
  --brand-red:  #17518F;
  --brand-ink:  #06080D;
  --font-display:'Anton', 'Barlow Condensed', Impact, sans-serif;
}
body[data-theme="gold"]{
  --brand-red:  #A9791B;
  --brand-ink:  #0D0B06;
}

/* ---------- Szenario-Packs: Modifier, keine Layouts ---------- */
body[data-scenario="playoffs"]   { --accent:#F2C14E; --on-accent:#141212; }
body[data-scenario="weihnachten"]{ --accent:#E8D9B5; --on-accent:#141212; }
body[data-scenario="sommer"]     { --accent:#F2A03D; --on-accent:#141212; }
body[data-scenario="derby"]      { --accent:#FF3B30; --on-accent:#FFFFFF; }

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:#111113;color:#EDEDEF;font-family:var(--font-text);
  padding:36px 36px 80px;
}

/* ---------- Werkzeugleiste (nicht Teil der Grafik) ---------- */
.bar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.bar h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:28px;letter-spacing:.5px;margin-right:auto}
.bar button,.bar label{
  font-family:var(--font-text);font-size:13px;letter-spacing:.02em;
  background:#1C1C20;border:1px solid #2C2C32;color:#DCDCE0;
  padding:9px 15px;border-radius:99px;cursor:pointer
}
.bar button:hover,.bar label:hover{border-color:#4a4a52}
.bar label{display:flex;gap:8px;align-items:center}
.bar select{background:#1C1C20;border:1px solid #2C2C32;color:#DCDCE0;
  font:inherit;font-size:13px;padding:4px 8px;border-radius:6px}
.bar select option{background:#1C1C20;color:#DCDCE0}
.stage{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}

/* Format-System: Größe kommt aus --w/--h, Vorschau-Skalierung aus --s.
   Formate sind eigene Kompositionen, keine Skalierungen. */
.shot{--w:1080px;--h:1350px;--s:.4194;
  width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));
  margin-bottom:26px;border-radius:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);position:relative}
.shot[data-format="1x1"]  {--w:1080px;--h:1080px;--s:.35}
.shot[data-format="9x16"] {--w:1080px;--h:1920px;--s:.28;
  --safe-top:270px;--safe-bottom:672px;--safe-side:65px;--safe-right:228px}
.shot[data-format="16x9"] {--w:1920px;--h:1080px;--s:.32;
  --safe-top:54px;--safe-bottom:54px;--safe-side:96px}

/* Gestaltungsrand für Feed-Formate in der Vollansicht. */
.shot{--safe-top:36px;--safe-bottom:36px;--safe-side:36px}
.shot .cap{position:absolute;left:0;right:0;bottom:-26px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7C7C84;text-align:center}

/* ============================================================
   DIE GRAFIK — Standard 1080 × 1350 (Feed 4:5)
   ============================================================ */
.card{
  position:relative;width:var(--w);height:var(--h);overflow:hidden;
  border-radius:calc(10px / var(--s));
  background:var(--brand-ink);color:var(--brand-paper);
  font-family:var(--font-text);
  transform:scale(var(--s));transform-origin:top left;
}

/* diagonale Pinselstriche = Signatur-Element */
.streaks{position:absolute;inset:-15%;pointer-events:none;z-index:0}
.streaks i{position:absolute;height:16px;width:1600px;left:-25%;
  background:linear-gradient(90deg,transparent,var(--brand-red) 18%,var(--brand-red) 82%,transparent);
  transform:rotate(var(--streak-angle));opacity:.75}
.streaks i:nth-child(1){top:18%;height:10px;opacity:.3}
.streaks i:nth-child(2){top:29%;height:26px}
.streaks i:nth-child(3){top:41%;height:8px;opacity:.28}
.streaks i:nth-child(4){top:55%;height:70px;opacity:.55;border-radius:40px}
.streaks i:nth-child(5){top:74%;height:14px;opacity:.55}
.streaks i:nth-child(6){top:88%;height:34px;opacity:.8;border-radius:20px}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 30%,transparent 30%,rgba(0,0,0,.55) 100%)}

.photo-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.20) 38%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.94) 88%)}

/* Szenario-Overlays */
.scenario{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .2s}
body[data-scenario="playoffs"] .scenario{opacity:1;
  background:
    radial-gradient(120% 70% at 80% -10%, rgba(200,235,255,.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 90px);}
body[data-scenario="weihnachten"] .scenario{opacity:1;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 42%, rgba(255,255,255,.40) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 12%, rgba(255,255,255,.50) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 34%, rgba(255,255,255,.38) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 66%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 74%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 88%, rgba(255,255,255,.42) 0 3px, transparent 4px),
    radial-gradient(120% 80% at 50% -10%, rgba(255,240,210,.16), transparent 65%);
  background-size:340px 340px,420px 420px,300px 300px,380px 380px,460px 460px,320px 320px,400px 400px,100% 100%;}
body[data-scenario="sommer"] .scenario{opacity:1;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(255,170,60,.28), transparent 60%),
    radial-gradient(70% 50% at 10% 100%, rgba(255,120,40,.14), transparent 65%);}

/* Kopf */
.brand{position:absolute;top:46px;left:0;right:0;z-index:3;display:flex;
  justify-content:center;align-items:center;gap:18px}
.brand img{height:196px}
.brand .rule{position:absolute;left:var(--gutter);right:var(--gutter);bottom:-22px;
  height:2px;background:linear-gradient(90deg,var(--brand-red),rgba(255,255,255,.06))}

/* Inhalt */
.body{position:absolute;inset:0;z-index:3;padding:264px var(--gutter) 230px;
  display:flex;flex-direction:column}

.kicker{font-family:var(--font-display);font-weight:700;font-style:italic;
  text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-kicker);
  color:rgba(255,255,255,.82);margin-bottom:18px;
  display:flex;align-items:center;gap:16px}
.kicker::before{content:'';width:36px;height:8px;background:var(--accent);display:block;flex:none}

.title{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:var(--fs-title);line-height:.8;letter-spacing:-3px;
  transform:skewX(-6deg);margin:30px 0 26px;text-shadow:0 8px 30px rgba(0,0,0,.6)}

/* Fußzeile */
.cta{position:absolute;left:0;right:0;bottom:88px;z-index:4;
  background:var(--accent);color:var(--on-accent);padding:26px var(--gutter);
  font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:var(--fs-cta);letter-spacing:.01em;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.cta .arrow{font-family:var(--font-text);font-size:46px;letter-spacing:-.1em}

.sponsors{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--safe-bottom);z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  font-size:22px;color:rgba(255,255,255,.42);letter-spacing:.1em;text-transform:uppercase}
.sponsors .row{display:flex;gap:26px;align-items:center}
.sponsors .pill{height:30px;padding:0 14px;border:1px solid rgba(255,255,255,.28);
  border-radius:6px;display:grid;place-items:center;font-size:17px;letter-spacing:.14em}

/* ---------- Safe-Zone-Overlay ---------- */
.safezone{position:absolute;inset:0;z-index:9;display:none;pointer-events:none;
  background:
    linear-gradient(rgba(255,60,60,.12),rgba(255,60,60,.12)) top / 100% var(--safe-top) no-repeat,
    linear-gradient(rgba(255,60,60,.12),rgba(255,60,60,.12)) bottom / 100% var(--safe-bottom) no-repeat,
    linear-gradient(rgba(255,60,60,.12),rgba(255,60,60,.12)) left / var(--safe-side) 100% no-repeat,
    linear-gradient(rgba(255,60,60,.12),rgba(255,60,60,.12)) right / var(--safe-right,var(--safe-side)) 100% no-repeat}
.safezone::before{content:'';position:absolute;
  left:var(--safe-side);right:var(--safe-right,var(--safe-side));
  top:var(--safe-top);bottom:var(--safe-bottom);
  border:2px dashed rgba(0,255,170,.85);border-radius:6px}
.safezone::after{content:'Safe Zone';
  position:absolute;left:var(--safe-side);top:calc(var(--safe-top) - 26px);
  font-size:16px;color:#00ffaa;font-family:monospace;letter-spacing:.08em;
  background:rgba(0,0,0,.55);padding:4px 8px;border-radius:4px}
body.show-safe .safezone{display:block}
body.show-safe .statuszone{display:block}
.statuszone{position:absolute;left:0;right:0;top:0;height:var(--safe-top);z-index:8;display:none;
  background:repeating-linear-gradient(45deg,rgba(255,60,60,.10) 0 12px,transparent 12px 24px);
  border-bottom:2px dashed rgba(255,60,60,.55)}

/* Typografische Vereinsmarke: sauber gesetzt, kein nachgebautes Maskottchen.
   Ersetzt das Trace-Logo auf großen Flächen, bis der Originalvektor da ist. */
.clubmark{width:var(--mark,152px);height:var(--mark,152px);flex:none;border-radius:calc(var(--mark,152px) * .13);
  background:#fff;color:var(--brand-red);display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:.8;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.65)}
.clubmark b{font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:calc(var(--mark,152px) * .40);letter-spacing:-.02em}
.clubmark span{font-family:var(--font-text);font-style:normal;font-weight:700;
  font-size:calc(var(--mark,152px) * .092);letter-spacing:.15em;color:#111;
  margin-top:calc(var(--mark,152px) * .06)}

/* ---------- Export-Modus: eine Karte in voller Größe ---------- */
body.export{padding:0;background:#000}
body.export .bar{display:none}
body.export .stage{gap:0}
body.export .shot{--s:1;overflow:hidden;margin-bottom:0;border-radius:0;box-shadow:none}
body.export .shot .cap{display:none}
body.export .card{border-radius:0;transform:none}
body.export .shot:not(.active){display:none}