/* innvierterl.at Ticketing — design system.
   Palette and type inherited verbatim from the main site (BRAND-0001) so the
   ticket shop reads as the same product. Ticketing-only components below. */

:root {
  /* ── INNVIERTERL 2026 palette ──────────────────────────────────────────────
     Mirrored from innvierterl-brain-app @ 83f8a08,
     brain_app/api/static/app.css (BRAND-SPEC §5, BRAND-0002).

     Ticketing keeps its OWN copy rather than linking the main stylesheet, and
     that is deliberate: the door scanner has to style itself with zero network
     (concept §9.5). A shared stylesheet would put the entry gate one failed
     request away from unstyled. The cost is that a palette change over there
     has to be repeated here — see README, "Zusammenspiel mit innvierterl.at".

     Canvas is white in 2026, not cream. Lime is the primary action; gold is the
     warm accent, no longer the button colour. */
  --iv-forest-900: #123B2E;   /* brand field: footer, dark bands */
  --iv-sage-600:   #46665C;   /* secondary regional tone */
  --iv-gold-500:   #D89B2B;   /* warm accent */
  --iv-lime-500:   #8CC63E;   /* signature accent, primary CTA */
  --iv-ink-900:    #202020;   /* primary text */
  --iv-white:      #FFFFFF;   /* dominant page surface */
  --iv-warm-050:   #F7F5F0;   /* secondary neutral surface */

  /* legacy names remapped onto 2026, so the rules below need no churn */
  --brand-forest:  var(--iv-forest-900);
  --brand-teal:    var(--iv-sage-600);
  --brand-amber:   var(--iv-gold-500);
  --brand-lime:    var(--iv-lime-500);
  --brand-cream:   var(--iv-warm-050);
  --brand-charcoal:var(--iv-ink-900);
  --support-sage: #A7B59F;
  --support-blue: #BFD6D3;
  --support-mist: #E6EAE7;
  --support-slate:#6B7371;
  --support-navy: #0E1A24;

  --bg:        var(--iv-white);
  --surface:   var(--iv-white);
  --surface-2: var(--iv-warm-050);
  --text:      var(--iv-ink-900);
  --text-muted:#545B58;
  --line:      #E2DCCF;
  --brand:     var(--brand-forest);
  --brand-contrast: var(--iv-white);
  --accent:      var(--iv-lime-500);
  --accent-text: var(--iv-forest-900);   /* forest on lime 6.07:1 (AA) */
  --warm-accent: var(--iv-gold-500);
  --warm-accent-text: var(--iv-ink-900); /* ink on gold 6.71:1 (AA) */
  --link:  var(--brand-forest);
  --focus: #1c6b8c;
  --danger:#A3402F;
  --ok:    #1F6B4F;

  /* UI-role tokens: header is a white surface in 2026, footer stays forest */
  --header-bg:   var(--iv-white);
  --header-text: var(--iv-ink-900);
  --footer-bg:   var(--iv-forest-900);
  --footer-text: #F3F1EA;
  --footer-muted:rgba(243,241,234,.74);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,30,25,.05), 0 8px 24px rgba(20,30,25,.06);
  --shadow-lg: 0 12px 40px rgba(14,26,20,.16);
  --maxw: 1120px;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin:0; background:var(--bg); color:var(--text);
  font:400 17px/1.6 var(--font-body); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--font-display); font-weight:800; line-height:1.15;
  letter-spacing:-.01em; margin:0 0 .5rem; }
h1 { font-size:clamp(1.7rem,1.2rem+2.4vw,2.6rem); }
h2 { font-size:clamp(1.25rem,1rem+1.2vw,1.75rem); }
h3 { font-size:1.1rem; }
p { margin:0 0 1rem; }
a { color:var(--link); text-underline-offset:2px; }
img,svg { max-width:100%; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.muted { color:var(--text-muted); }
.small { font-size:.88rem; }
.tabnum { font-variant-numeric:tabular-nums; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.narrow { max-width:760px; }
.section { padding:clamp(1.6rem,4vw,2.8rem) 0; }

/* header */
.site-header { background:var(--header-bg); color:var(--header-text);
  border-bottom:1px solid var(--line); }
.site-header a { color:var(--header-text); text-decoration:none; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:64px; padding:12px 0; flex-wrap:wrap; }
/* Approved wordmark artwork is IMMUTABLE — never filter, mask, blend or recolour
   it. The guard below matches the main site's and stops any rule leaking in and
   filling the letter counters (the open R). */
.brandmark { display:inline-flex; align-items:center; gap:14px; flex:0 0 auto; }
.brandmark .bm-map  { height:52px; width:auto; flex:0 0 auto; }
.brandmark .bm-word { height:70px; width:auto; flex:0 0 auto;
  filter:none!important; -webkit-mask:none!important; mask:none!important;
  mix-blend-mode:normal; }
/* the ticketing sub-label, so it is obvious which part of the site this is */
.lockup-tag { font:700 .62rem/1.3 var(--font-body); letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-forest); align-self:center;
  border-left:2px solid var(--iv-lime-500); padding-left:.7rem; }
.nav-links { display:flex; gap:1.1rem; font-size:.95rem; font-weight:600; }
@media (max-width:820px){ .brandmark{gap:11px}
  .brandmark .bm-map{height:44px} .brandmark .bm-word{height:58px} }
@media (max-width:560px){ .brandmark{gap:8px}
  .brandmark .bm-map{height:36px} .brandmark .bm-word{height:46px}
  .lockup-tag{display:none} }

/* footer */
.site-footer { background:var(--footer-bg); color:var(--footer-text);
  margin-top:3rem; padding:2.2rem 0; font-size:.9rem; }
.site-footer a { color:rgba(255,255,255,.86); }
.site-footer a:hover { color:#fff; }

/* surfaces */
.card { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; }
.card + .card { margin-top:1rem; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.eyebrow { font:700 .7rem/1 var(--font-body); letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand-forest); margin:0 0 .5rem; }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.row > * { min-width:0; }
.between { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:600 1rem/1 var(--font-body); padding:.85rem 1.3rem; border-radius:10px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; }
.btn:active { transform:translateY(1px); }
/* Solid lime, not the brush-masked CTA the main site uses on marketing pages.
   A failed mask image renders the element fully masked out — invisible — and
   these same buttons appear in the offline door scanner. Solid is the approved
   treatment for the main site's own header CTA, so this stays on-brand. */
.btn-primary { background:var(--accent); color:var(--accent-text); font-weight:700; }
.btn-primary:hover { filter:brightness(.94); }
.btn-secondary { background:var(--surface); color:var(--brand); border-color:var(--line); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-lg { font-size:1.1rem; padding:1.05rem 1.6rem; width:100%; }
.btn-sm { font-size:.85rem; padding:.5rem .8rem; }

/* forms */
label { display:block; font-weight:600; font-size:.9rem; margin:0 0 .3rem; }
input[type=text],input[type=email],input[type=number],select {
  width:100%; padding:.8rem .9rem; font:400 1rem var(--font-body);
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--text); }
.field { margin-bottom:1rem; }

/* badges */
.badge { display:inline-block; font:600 .72rem/1 var(--font-body); letter-spacing:.04em;
  text-transform:uppercase; padding:.4rem .6rem; border-radius:999px;
  background:var(--support-blue); color:var(--brand-forest); }
.badge-live { background:#1F6B4F; color:#fff; }
.badge-draft { background:var(--line); color:var(--text-muted); }
.badge-warn { background:var(--warm-accent); color:var(--warm-accent-text); }

/* ticket type picker */
.tt { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--line); }
.tt:last-child { border-bottom:0; }
.qty { display:flex; align-items:center; gap:.4rem; }
.qty button { width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); font-size:1.3rem; cursor:pointer; color:var(--text); }
.qty input { width:56px; text-align:center; padding:.6rem .2rem; }

/* summary */
.sum { border-top:2px solid var(--line); margin-top:1rem; padding-top:.8rem; }
.sum-row { display:flex; justify-content:space-between; padding:.25rem 0; }
.sum-total { font-weight:700; font-size:1.2rem; border-top:1px solid var(--line);
  margin-top:.5rem; padding-top:.6rem; }

/* tickets */
.ticket { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); }
.ticket-head { background:var(--brand-forest); color:var(--brand-cream); padding:.9rem 1.1rem; }
.ticket-body { padding:1.1rem; text-align:center; }
.ticket-code { font:700 1.5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em; margin:.7rem 0 .2rem; }
.ticket-foot { border-top:1px dashed var(--line); padding:.8rem 1.1rem;
  font-size:.76rem; color:var(--text-muted); }

/* door scanner */
.door { background:var(--support-navy); color:var(--brand-cream); min-height:100vh; }
.door .wrap { padding-top:.8rem; }
.door-head { display:flex; justify-content:space-between; align-items:center;
  gap:.6rem; padding:.6rem 0; border-bottom:1px solid #26343B; }
.door-head > div:first-child { min-width:0; overflow:hidden; }
.door-head .small { display:block; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.door .wrap { max-width:560px; }
.offline-pill { flex:0 0 auto; }
#video { width:100%; max-height:46vh; object-fit:cover; border-radius:var(--radius);
  background:#000; }
.verdict { border-radius:var(--radius); padding:1.6rem 1.2rem; text-align:center;
  margin:.9rem 0; font-weight:700; }
.verdict small { display:block; font-weight:500; opacity:.9; margin-top:.35rem;
  font-size:.9rem; }
.v-idle { background:#16242C; color:var(--support-blue); }
.v-ok { background:#1F6B4F; color:#fff; font-size:1.7rem; }
.v-bad { background:#A3402F; color:#fff; font-size:1.5rem; }
.v-warn { background:var(--accent); color:var(--accent-text); font-size:1.4rem; }
.door input[type=text] { background:#16242C; color:var(--brand-cream); border-color:#26343B; }
.door .card { background:#16242C; border-color:#26343B; color:var(--brand-cream); }
.counters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem;
  text-align:center; }
.counters div { background:#16242C; border-radius:10px; padding:.6rem .3rem; min-width:0; }
.counters b { display:block; font-size:1.35rem; }
.counters span { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em;
  opacity:.75; display:block; overflow-wrap:anywhere; }
.offline-pill { font-size:.75rem; padding:.3rem .6rem; border-radius:999px;
  background:var(--accent); color:var(--accent-text); font-weight:700; }
.online-pill { background:#1F6B4F; color:#fff; }

/* report */
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; }
.stat b { display:block; font:700 2rem/1.1 var(--font-display); }
.stat span { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); }
.headline { background:var(--brand-forest); color:var(--brand-cream);
  border-radius:var(--radius); padding:1.6rem; }
.headline .big { font:700 2.4rem/1.1 var(--font-display); color:var(--brand-amber); }
.bars { display:flex; align-items:flex-end; gap:3px; height:120px; margin:.8rem 0 .4rem; }
.bars i { flex:1; background:var(--brand-teal); border-radius:3px 3px 0 0; min-height:2px;
  display:block; }
.bars i.hi { background:var(--accent); }
.barlabels { display:flex; gap:3px; font-size:.62rem; color:var(--text-muted); }
.barlabels span { flex:1; text-align:center; overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--line); }
th { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* checklist */
.check { display:flex; gap:.6rem; align-items:flex-start; padding:.45rem 0; }
.check b { flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid;
  place-items:center; font-size:.75rem; color:#fff; background:var(--danger); }
.check.done b { background:var(--ok); }

@media print {
  .site-header,.site-footer,.noprint { display:none !important; }
  body { background:#fff; font-size:12px; }
  .card,.ticket { box-shadow:none; break-inside:avoid; }
  .page-break { break-before:page; }
}