/* =====================================================================
   FLD Innsbruck · Design-Kit für Partnerseiten (Stand Sa., 10.10.2026)
   Quelle: Live-Code Landingpage B, Repo tron1982-gm/fld-ibk-26-lp-b,
           src/styles/site.css (Commit 6f65558 vom 09.10.2026).
   Alles ist auf den Container .fld begrenzt, damit nichts in das
   Design der Gastgeber-Seite (z. B. nfbrands.xyz) ausläuft.
   Schriftpfade beim Einbau in nfbrands.xyz angepasst: fld/fonts/ (10.10.2026).
   ===================================================================== */

/* ---------- Schriften (beide SIL Open Font License, selbst hosten) ---------- */
@font-face { font-family: 'Vend Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/vend-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Vend Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/vend-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/manrope-latin-800-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
.fld {
  /* Bühne */
  --fld-ink: #0b0b0b;          /* Bühnenschwarz, Haupt-Hintergrund */
  --fld-ink-2: #151413;        /* zweite Fläche auf Schwarz */
  --fld-stage-text: #f2f2ee;   /* Fließtext auf Schwarz */
  --fld-stage-muted: #b9b9b2;  /* Nebentext auf Schwarz */
  --fld-line-dark: rgba(255, 255, 255, .14);
  /* Event-Farbe */
  --fld-sun: #fedd00;          /* Gelb aus dem Key Visual: Akzentzeile, Badge, Störer, Kicker auf Schwarz */
  /* Zweite Stimme */
  --fld-pink: #f9057c;         /* Fläche Special Guests („Future is female“) */
  --fld-pink-deep: #c8005f;    /* Kicker und Akzentzeile auf hellem Papier */
  /* Kaufen */
  --fld-go: #22c55e;           /* NUR für Kauf-Buttons auf der Ticketseite – auf Partnerseiten nicht verwenden */
  /* Papier */
  --fld-paper: #ffffff;
  --fld-cream: #f5f2ec;        /* warmes Papier */
  --fld-cream-2: #ece7dd;
  --fld-line: #e1ddd3;
  --fld-muted: #57514b;
  /* Typo */
  --fld-font-display: 'Vend Sans', 'Arial Narrow', Arial, sans-serif;
  --fld-font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Maße */
  --fld-wrap: 1180px;
  --fld-gutter: clamp(20px, 5vw, 48px);
  --fld-radius: 6px;
  --fld-ease: cubic-bezier(.2, .7, .2, 1);

  font-family: var(--fld-font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.fld) *, :where(.fld) *::before, :where(.fld) *::after { box-sizing: border-box; }
/* Basis mit :where(), damit jede Komponentenklasse sie ohne Spezifitätskampf überschreibt */
:where(.fld) img { max-width: 100%; height: auto; display: block; }
:where(.fld) p { margin: 0; }
:where(.fld) a { color: inherit; }
.fld :focus-visible { outline: 3px solid var(--fld-sun); outline-offset: 3px; }

/* ---------- Flächen (Farbdramaturgie) ---------- */
.fld-stage { background: var(--fld-ink); color: var(--fld-stage-text); }
.fld-paper { background: var(--fld-cream); color: var(--fld-ink); }
.fld-pinkzone { background: var(--fld-pink); color: var(--fld-ink); }
.fld-wrap { width: 100%; max-width: var(--fld-wrap); margin-inline: auto; padding-inline: var(--fld-gutter); }
.fld-section { padding-block: clamp(64px, 9vw, 120px); }

/* ---------- Überschriften: große Aussagesätze, zweite Zeile farbig ---------- */
.fld h1, .fld h2, .fld h3 { font-family: var(--fld-font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.fld h2 { font-size: clamp(32px, 5vw, 56px); }
.fld h3 { font-size: clamp(22px, 2.4vw, 26px); }
.fld .fld-h-xl { font-size: clamp(38px, 7vw, 82px); line-height: .98; letter-spacing: -0.022em; }
.fld h1 em, .fld h2 em, .fld h3 em { font-style: normal; }
.fld-stage h1, .fld-stage h2, .fld-stage h3 { color: #fff; }
.fld-stage h1 em, .fld-stage h2 em { color: var(--fld-sun); }      /* „Innsbruck“ in Gelb */
.fld-paper h2 em { color: var(--fld-pink-deep); }
.fld-lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.55; max-width: 60ch; }
.fld-small { font-size: 15px; line-height: 1.5; }
.fld-credit { font-size: 13px; color: var(--fld-muted); margin-top: 8px; }
.fld-stage .fld-credit { color: var(--fld-stage-muted); }

/* ---------- Kicker: Strich + gesperrte Versalien ---------- */
.fld-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--fld-font-body); font-weight: 800; font-size: 13px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--fld-pink-deep); }
.fld-kicker::before { content: ''; flex: 0 0 28px; height: 2px; background: currentColor; }
.fld-stage .fld-kicker { color: var(--fld-sun); }
.fld-pinkzone .fld-kicker { color: var(--fld-ink); }

/* Meta-Zeile: kleine, gesperrte Versalien */
.fld-meta { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fld-muted); }
.fld-stage .fld-meta { color: var(--fld-stage-muted); }

/* ---------- Badge: nur gelbe Outline ---------- */
.fld-badge { display: inline-flex; align-items: center; justify-self: start; align-self: start; color: var(--fld-sun); border: 1.5px solid var(--fld-sun); padding: 6px 12px; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }

/* Säulen-Chip PURPOSE · PEOPLE · PERFORMANCE */
.fld-pillars { display: inline-block; justify-self: start; align-self: start; font-family: var(--fld-font-display); font-weight: 600; letter-spacing: .14em; font-size: 13px; color: var(--fld-ink); background: var(--fld-sun); padding: 6px 12px; text-transform: uppercase; }

/* ---------- Buttons ---------- */
.fld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 28px; border-radius: 999px; font-family: var(--fld-font-body); font-weight: 800; font-size: 18px; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s var(--fld-ease), background-color .2s ease; text-align: center; }
.fld-btn:hover { transform: translateY(-2px); }
.fld-btn--sun { background: var(--fld-sun); color: var(--fld-ink); }      /* Standard auf Partnerseiten */
.fld-btn--sun:hover { background: #fff04d; }
.fld-btn--ink { background: var(--fld-ink); color: #fff; }                /* auf Gelb oder Pink */
.fld-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.fld-btn__arrow { display: inline-block; transition: transform .25s var(--fld-ease); }
.fld-btn:hover .fld-btn__arrow { transform: translateX(4px); }
.fld-textlink { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--fld-pink); }
.fld-stage .fld-textlink { text-decoration-color: var(--fld-sun); }

/* Markierung: auf Schwarz eine gelbe Unterstreichung, auf Papier ein gelber Textmarker */
.fld-hl { background: linear-gradient(var(--fld-sun), var(--fld-sun)) no-repeat 0 90% / 100% 36%; padding: 0 .06em; }
.fld-stage .fld-hl { color: #fff; background-size: 100% 3px; background-position: 0 100%; padding: 0; }

/* ---------- Störer: gewellter Kreis wie im Key Visual ----------
   Markup: <div class="fld-sticker"><img class="fld-sticker__shape" src="bilder/stoerer-welle.svg" alt="">
           <span class="fld-sticker__text">Fr., 06.11.<small>Innsbruck</small></span></div>
   Auf Partnerseiten nur mit zeitlosem Inhalt (Datum, Ort), nie mit Preis oder Frist. */
.fld-sticker { position: relative; width: 120px; height: 120px; display: grid; place-items: center; transform: rotate(-10deg); }
.fld-sticker__shape { position: absolute; inset: 0; width: 100%; height: 100%; animation: fld-spin 36s linear infinite; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.fld-sticker__text { position: relative; font-family: var(--fld-font-display); font-weight: 700; font-size: 17px; line-height: 1; text-align: center; color: var(--fld-ink); }
.fld-sticker__text small { display: block; font-size: 13px; margin-top: 4px; font-weight: 600; }
@keyframes fld-spin { to { transform: rotate(360deg); } }

/* ---------- Logo-Leiste (Ali optisch am größten, NFBrands.X am kleinsten) ---------- */
.fld-brands { display: flex; align-items: center; gap: clamp(18px, 4vw, 40px); flex-wrap: wrap; }
.fld-brands img { width: auto; }
.fld-brands .fld-logo-ali { height: 20px; }
.fld-brands .fld-logo-fo { height: 17px; }
.fld-brands .fld-logo-nfb { height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .fld *, .fld *::before, .fld *::after { animation: none !important; transition: none !important; }
}