/* ============================================================
   THE LAST FLIGHT — Web fonts
   Quasimoda  → workhorse geometric sans (headings + body)
   Energy Station → PUB EDITION sub-brand display only (scores, "Pub Edition")
   ============================================================ */

@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quasimoda";
  src: url("../fonts/Quasimoda-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Heavy is the heaviest cut — map to 950 for opt-in ultra weight */
@font-face {
  font-family: "Quasimoda Heavy";
  src: url("../fonts/Quasimoda-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Energy Station";
  src: url("../fonts/EnergyStation.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   THE LAST FLIGHT — Color tokens
   Warm, editorial darts palette. Apricot glows on ink.
   ============================================================ */

:root {
  /* ---- Brand raw palette (names from the brand asset kit) ---- */
  --tlf-apricot:   #FEB061; /* Warm Apricot — primary brand color */
  --tlf-clay:      #A25039; /* Clay — earthy secondary / accent */
  --tlf-oatmeal:   #ECE8DD; /* Oatmeal — light paper base */
  --tlf-jetstream: #C9C1B2; /* Jet Stream — warm neutral gray */
  --tlf-denim:     #2B3B4D; /* Denim — mid slate blue */
  --tlf-abyssal:   #1B2632; /* Abyssal — near-black ink */
  --tlf-white:     #FFFFFF;
  --tlf-black:     #000000;

  /* ---- Apricot tint/shade ramp (derived, harmonious) ---- */
  --apricot-100: #FFEBD1;
  --apricot-200: #FFD9A8;
  --apricot-300: #FEC584;
  --apricot-400: #FEB061; /* = brand apricot */
  --apricot-500: #F59B3E;
  --apricot-600: #E07E1C;

  /* ---- Oatmeal / neutral ramp (warm grays toward ink) ---- */
  --sand-50:  #F6F3EC;
  --sand-100: #ECE8DD; /* = oatmeal */
  --sand-200: #DED8C8;
  --sand-300: #C9C1B2; /* = jetstream */
  --sand-400: #A69E8E;
  --sand-500: #7C7566;
  --sand-600: #4E4A41;

  /* ---- Ink ramp (denim → abyssal → black) ---- */
  --ink-700: #34465A;
  --ink-800: #2B3B4D; /* = denim */
  --ink-900: #1B2632; /* = abyssal */
  --ink-950: #10171F;

  /* ---- Semantic surfaces ---- */
  --surface-page:      var(--tlf-oatmeal);
  --surface-raised:    var(--tlf-white);
  --surface-sunken:    var(--sand-200);
  --surface-inverse:   var(--tlf-abyssal);
  --surface-inverse-2: var(--tlf-denim);
  --surface-brand:     var(--tlf-apricot);

  /* ---- Semantic text ---- */
  --text-strong:   var(--tlf-abyssal);
  --text-body:     var(--ink-800);
  --text-muted:    var(--sand-500);
  --text-inverse:  var(--tlf-oatmeal);
  --text-on-brand: var(--tlf-abyssal);
  --text-brand:    var(--tlf-clay);

  /* ---- Borders / lines ---- */
  --border-hair:   rgba(27, 38, 50, 0.12);
  --border-soft:   rgba(27, 38, 50, 0.20);
  --border-strong: var(--tlf-abyssal);
  --border-on-dark: rgba(236, 232, 221, 0.16);

  /* ---- Accents / states ---- */
  --accent:          var(--tlf-apricot);
  --accent-hover:    var(--apricot-500);
  --accent-press:    var(--apricot-600);
  --focus-ring:      var(--tlf-apricot);

  /* ---- Feedback (kept in-palette / warm) ---- */
  --positive: #4F7A5B;
  --warning:  var(--apricot-600);
  --danger:   #B6402E;

  /* ---- Scoreboard / play (darts context) ---- */
  --score-live:   var(--tlf-apricot);
  --score-win:    var(--tlf-apricot);
  --board-cream:  #E9E2CE;
  --board-red:    #B6402E;
  --board-green:  #4F7A5B;
}

/* ============================================================
   THE LAST FLIGHT — Typography tokens
   Quasimoda for everything structural. Energy Station for punch.
   Headlines run UPPERCASE, tight, heavy. Body stays sentence case.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:    "Quasimoda", "Helvetica Neue", Arial, sans-serif;
  --font-heavy:   "Quasimoda Heavy", "Quasimoda", sans-serif;
  /* Energy Station is the PUB EDITION sub-brand face only (scores, "Pub Edition"
     lockups). For core TLF display, use --font-heavy (Quasimoda), not this. */
  --font-pub:     "Energy Station", "Quasimoda", sans-serif;
  --font-display: "Energy Station", "Quasimoda", sans-serif; /* alias of --font-pub; Pub Edition only */
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Fluid type scale (min → max across viewport) ---- */
  --fs-caption: 0.75rem;   /* 12px */
  --fs-small:   0.875rem;  /* 14px */
  --fs-body:    1rem;      /* 16px */
  --fs-body-lg: 1.125rem;  /* 18px */
  --fs-h6:      1.25rem;   /* 20px */
  --fs-h5:      1.5rem;    /* 24px */
  --fs-h4:      2rem;      /* 32px */
  --fs-h3:      clamp(2.25rem, 1.6rem + 2.4vw, 3rem); /* @kind other */
  --fs-h2:      clamp(3rem, 2rem + 3.6vw, 4.5rem); /* @kind other */
  --fs-h1:      clamp(3.75rem, 2rem + 6.4vw, 7rem); /* @kind other */
  --fs-display: clamp(5rem, 2rem + 11vw, 11rem); /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   0.92; /* @kind other */
  --lh-snug:    1.05; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-mega:    -0.03em; /* @kind other */
  --ls-tight:   -0.01em; /* @kind other */
  --ls-normal:  0em; /* @kind other */
  --ls-wide:    0.04em; /* @kind other */
  --ls-eyebrow: 0.18em; /* @kind other */

  /* ---- Semantic roles ---- */
  --role-eyebrow-size:   var(--fs-caption); /* @kind other */
  --role-eyebrow-weight: var(--fw-bold); /* @kind other */
  --role-eyebrow-ls:     var(--ls-eyebrow); /* @kind other */
}

/* ============================================================
   THE LAST FLIGHT — Spacing, radius, shadow, motion tokens
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */

  /* ---- Radii (mostly crisp — the brand skews geometric/sharp) ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --shadow-xs:  0 1px 2px rgba(27, 38, 50, 0.08);
  --shadow-sm:  0 2px 8px rgba(27, 38, 50, 0.10);
  --shadow-md:  0 8px 24px rgba(27, 38, 50, 0.12);
  --shadow-lg:  0 18px 48px rgba(27, 38, 50, 0.18);
  --shadow-brand: 0 12px 32px rgba(224, 126, 28, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ---- Layout ---- */
  --container-max: 1200px;  /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
  --gutter: clamp(1rem, 4vw, 4rem); /* @kind spacing */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 3px;  /* @kind spacing */
  --focus-offset: 2px; /* @kind spacing */
}

/* ============================================================
   THE LAST FLIGHT — Base layer
   Sensible resets + brand-flavored primitives (backgrounds,
   grain, eyebrow, headline helpers). Consumers get these free.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); }
p { margin: 0; }

::selection { background: var(--tlf-apricot); color: var(--tlf-abyssal); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---- Headline helpers ---- */
.tlf-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--role-eyebrow-size);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.tlf-headline {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--text-strong);
}
.tlf-display {
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---- Brand background fills ---- */
.tlf-bg-apricot {
  background: radial-gradient(120% 140% at 30% 0%, var(--apricot-300) 0%, var(--apricot-400) 42%, var(--apricot-600) 100%);
}
.tlf-bg-ink {
  background: radial-gradient(130% 130% at 70% 10%, var(--tlf-denim) 0%, var(--tlf-abyssal) 55%, var(--ink-950) 100%);
}
.tlf-bg-oatmeal {
  background: radial-gradient(120% 120% at 50% 0%, var(--sand-50) 0%, var(--sand-100) 100%);
}
.tlf-bg-dawn {
  background: linear-gradient(180deg, var(--apricot-400) 0%, var(--apricot-200) 45%, var(--sand-100) 100%);
}

/* ---- Film grain overlay (matches the brand key-art texture) ----
   Apply .tlf-grain to any positioned element; it lays fine noise
   over the fill without affecting content. */
.tlf-grain { position: relative; }
.tlf-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Seite */

    html { scroll-behavior: smooth; }
    a { text-decoration: none; }
    .tlf-navlink { color: var(--tlf-oatmeal); font-family: var(--font-sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.82; transition: opacity .2s, color .2s; }
    .tlf-navlink:hover { opacity: 1; color: var(--tlf-apricot); }
    .tlf-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill, 999px); line-height: 1; cursor: pointer; transition: transform .12s var(--ease-out), filter .12s; }
    .tlf-cta:active { transform: scale(0.96); }
    .tlf-cta-primary { background: var(--tlf-apricot); color: var(--tlf-abyssal); padding: 16px 30px; font-size: 1rem; }
    .tlf-cta-primary:hover { filter: brightness(1.05); }
    .tlf-cta-outline { background: transparent; color: var(--tlf-oatmeal); border: 2px solid rgba(236,232,221,0.4); padding: 14px 28px; font-size: 1rem; }
    .tlf-cta-outline:hover { border-color: var(--tlf-apricot); color: var(--tlf-apricot); }
    .tlf-cta-sm { padding: 11px 20px; font-size: 0.8rem; }
    .tlf-photocard { transition: transform .3s var(--ease-out); }
    .tlf-photocard:hover { transform: translateY(-4px); }

    @media (max-width: 1080px) {
      .tlf-nav-center { display: none !important; }
    }
    @media (max-width: 920px) {
      .tlf-hero-grid { grid-template-columns: 1fr !important; padding-top: 104px !important; padding-bottom: 56px !important; }
      .tlf-hero-logo { max-width: 230px !important; }
      .tlf-champion { grid-template-columns: 1fr !important; }
      .tlf-two-col { grid-template-columns: 1fr !important; }
      .tlf-tickets-grid { grid-template-columns: 1fr !important; }
      .tlf-formate { grid-template-columns: 1fr !important; }
      .tlf-saison-stats { grid-template-columns: repeat(2,1fr) !important; }
      .tlf-mvp-featured { grid-template-columns: repeat(3,1fr) !important; }
    }
    @media (max-width: 600px) {
      .tlf-gallery { grid-template-columns: repeat(2,1fr) !important; grid-auto-rows: 42vw !important; }
      .tlf-gallery > div { grid-column: span 1 !important; grid-row: span 1 !important; }
      .tlf-gallery > div:first-child { grid-column: span 2 !important; }
      .tlf-teams { grid-template-columns: repeat(2,1fr) !important; }
      .tlf-mvp-featured { grid-template-columns: repeat(2,1fr) !important; }
      .tlf-mvp-all { grid-template-columns: 1fr !important; }
      .tlf-saison-stats { grid-template-columns: 1fr !important; }
      .tlf-table > div { grid-template-columns: 34px 1fr 44px !important; padding-left: 14px !important; padding-right: 14px !important; }
      .tlf-nav-cta { padding: 6px 12px !important; }
      .tlf-nav-cta span:first-child { font-size: 1rem !important; }
      .tlf-nav-cta span:last-child { font-size: 0.62rem !important; }
    }

    .tlf-nav-burger { display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; }
    .tlf-mobile-link { font-family: var(--font-heavy); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--tlf-oatmeal); padding: 12px 0; border-bottom: 1px solid rgba(236,232,221,0.1); transition: color .2s; }
    .tlf-mobile-link:hover { color: var(--tlf-apricot); }
    .tlf-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
    .tlf-reveal.tlf-in { opacity: 1; transform: none; }
    @media (max-width: 1080px) { .tlf-nav-burger { display: inline-flex !important; } .tlf-nav-cta { display: none !important; } }
    @media (prefers-reduced-motion: reduce) { .tlf-reveal { opacity: 1 !important; transform: none !important; } }
  
.tlf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tlf-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(1rem,4vw,4rem);background:transparent;border-bottom:1px solid transparent;transition:background .3s var(--ease-out),padding .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tlf-nav.is-scrolled{padding:8px clamp(1rem,4vw,4rem);background:rgba(20,23,31,0.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:rgba(236,232,221,0.12);box-shadow:0 6px 24px rgba(0,0,0,0.28)}
.tlf-bar{display:block;width:24px;height:2px;background:var(--tlf-oatmeal);border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s}
.tlf-nav-burger[aria-expanded="true"] .tlf-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tlf-nav-burger[aria-expanded="true"] .tlf-bar:nth-child(2){opacity:0}
.tlf-nav-burger[aria-expanded="true"] .tlf-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tlf-menu{position:fixed;inset:0;z-index:99;background:rgba(20,23,31,0.98);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:2px;padding:92px clamp(1.4rem,7vw,3rem) 40px;transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;overflow-y:auto;transition:transform .4s var(--ease-out),opacity .3s var(--ease-out),visibility 0s linear .4s}
.tlf-menu.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .4s var(--ease-out),opacity .3s var(--ease-out)}