/* ======================================
   BBQ Bandits: Fire Division - Static Site Styles
   ====================================== */

/* ======================================
   CSS Custom Properties (Brand Colors)
   ====================================== */
/* ======================================
   FONT: Geist Sans (lokal gehostet)
   ====================================== */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-400.ttf') format('truetype'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-500.ttf') format('truetype'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-600.ttf') format('truetype'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/geist-700.ttf') format('truetype'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/geist-800.ttf') format('truetype'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/geist-900.ttf') format('truetype'); }

:root {
  --color-bbq-brown: #5C3317;
  --color-bbq-brown-dark: #3A1F0B;
  --color-bbq-brown-light: #8B5E3C;
  --color-bbq-orange: #E86B1C;
  --color-bbq-orange-light: #F59E3F;
  --color-bbq-flame: #FF4500;
  --color-bbq-gold: #DAA520;
  --color-bbq-cream: #FFF8F0;
  --color-bbq-smoke: #1A1A1A;
  --color-bbq-charcoal: #2D2D2D;
  --color-bbq-cream-high: #FFFFFF;
  --color-bbq-orange-accessible: #F28C28;
  --background: #1A1A1A;
  --foreground: #FFF8F0;
}

/* ======================================
   BASE
   ====================================== */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Geist', Arial, Helvetica, sans-serif;
}

/* ======================================
   ACCESSIBILITY: Skip-Link
   ====================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background: var(--color-bbq-orange);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-bbq-gold);
  outline-offset: 2px;
}

/* ======================================
   ACCESSIBILITY: Focus Styles (WCAG 2.1 AA)
   ====================================== */
*:focus-visible {
  outline: 3px solid var(--color-bbq-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-bbq-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ======================================
   ACCESSIBILITY: Smooth scrolling respects user preferences
   ====================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ======================================
   ACCESSIBILITY: Reduced Motion Support
   ====================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fire-glow {
    animation: none;
    text-shadow: 0 0 10px rgba(232, 107, 28, 0.5), 0 0 20px rgba(255, 69, 0, 0.3);
  }

  .smoke-particle {
    display: none;
  }
}

/* ======================================
   PERFORMANCE: Scroll Reveal Animation System
   ====================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.scroll-reveal.scroll-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================
   EFFECTS: Fire glow animation
   ====================================== */
@keyframes fireGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(232, 107, 28, 0.5), 0 0 20px rgba(255, 69, 0, 0.3); }
  50% { text-shadow: 0 0 20px rgba(232, 107, 28, 0.8), 0 0 40px rgba(255, 69, 0, 0.5); }
}

.fire-glow {
  animation: fireGlow 3s ease-in-out infinite;
}

/* ======================================
   EFFECTS: Smoke drift animation
   ====================================== */
@keyframes smokeDrift {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  50% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}

.smoke-particle {
  animation: smokeDrift 4s ease-out infinite;
}

/* ======================================
   EFFECTS: Ember particles floating up
   ====================================== */
@keyframes emberFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) translateX(15px) scale(0); }
}

.ember-particle {
  animation: emberFloat 2.5s ease-out infinite;
  background: radial-gradient(circle, #FF4500, #E86B1C);
  border-radius: 50%;
}

/* ======================================
   EFFECTS: Flame button animation
   ====================================== */
@keyframes flamePulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(232, 107, 28, 0.3), 0 0 16px rgba(255, 69, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(232, 107, 28, 0.6), 0 0 32px rgba(255, 69, 0, 0.3), 0 0 48px rgba(255, 69, 0, 0.1);
  }
}

.flame-btn {
  animation: flamePulse 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.flame-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 69, 0, 0) 0%,
    rgba(255, 69, 0, 0.15) 50%,
    rgba(232, 107, 28, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.flame-btn:hover::before {
  opacity: 1;
  animation: flameShift 0.8s ease-in-out infinite;
}

@keyframes flameShift {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* ======================================
   EFFECTS: Inferno card pulse
   ====================================== */
@keyframes infernoPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.3), 0 0 16px rgba(255, 69, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 69, 0, 0.6), 0 0 32px rgba(255, 69, 0, 0.3), 0 0 48px rgba(218, 165, 32, 0.15);
  }
}

.inferno-pulse {
  animation: infernoPulse 2s ease-in-out infinite;
  position: relative;
}

/* ======================================
   EFFECTS: Floating smoke for backgrounds
   ====================================== */
@keyframes smokeRise {
  0% { opacity: 0; transform: translateY(100%) scale(1); }
  30% { opacity: 0.08; }
  70% { opacity: 0.04; }
  100% { opacity: 0; transform: translateY(-20%) scale(2.5); }
}

.smoke-bg {
  animation: smokeRise 12s ease-in-out infinite;
}

/* ======================================
   ACCESSIBILITY: Screen reader only utility
   ====================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ======================================
   ACCESSIBILITY: High Contrast Mode Support
   ====================================== */
/* ======================================
   SELECT DROPDOWN: Custom Arrow
   ====================================== */
select.appearance-none,
select[class*="appearance-none"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFF8F0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

@media (forced-colors: active) {
  .fire-glow {
    text-shadow: none;
  }

  a, button {
    border: 1px solid currentColor;
  }
}

/* ======================================
   Tailwind Custom Color Utilities
   Since Tailwind CDN doesn't know our custom colors,
   we define them manually for bg, text, border.
   ====================================== */

/* Background colors */
.bg-bbq-brown { background-color: var(--color-bbq-brown); }
.bg-bbq-brown-dark { background-color: var(--color-bbq-brown-dark); }
.bg-bbq-brown-light { background-color: var(--color-bbq-brown-light); }
.bg-bbq-orange { background-color: var(--color-bbq-orange); }
.bg-bbq-orange-light { background-color: var(--color-bbq-orange-light); }
.bg-bbq-flame { background-color: var(--color-bbq-flame); }
.bg-bbq-gold { background-color: var(--color-bbq-gold); }
.bg-bbq-cream { background-color: var(--color-bbq-cream); }
.bg-bbq-smoke { background-color: var(--color-bbq-smoke); }
.bg-bbq-charcoal { background-color: var(--color-bbq-charcoal); }

/* Background with opacity */
.bg-bbq-smoke\/90 { background-color: rgba(26, 26, 26, 0.9); }
.bg-bbq-smoke\/80 { background-color: rgba(26, 26, 26, 0.8); }
.bg-bbq-smoke\/60 { background-color: rgba(26, 26, 26, 0.6); }
.bg-bbq-charcoal\/80 { background-color: rgba(45, 45, 45, 0.8); }
.bg-bbq-charcoal\/60 { background-color: rgba(45, 45, 45, 0.6); }
.bg-bbq-charcoal\/50 { background-color: rgba(45, 45, 45, 0.5); }
.bg-bbq-orange\/90 { background-color: rgba(232, 107, 28, 0.9); }
.bg-bbq-orange\/10 { background-color: rgba(232, 107, 28, 0.1); }
.bg-bbq-orange\/15 { background-color: rgba(232, 107, 28, 0.15); }
.bg-bbq-orange\/5 { background-color: rgba(232, 107, 28, 0.05); }
.bg-bbq-flame\/15 { background-color: rgba(255, 69, 0, 0.15); }
.bg-bbq-gold\/15 { background-color: rgba(218, 165, 32, 0.15); }
.bg-bbq-orange-light\/15 { background-color: rgba(245, 158, 63, 0.15); }
.bg-bbq-brown\/30 { background-color: rgba(92, 51, 23, 0.3); }
.bg-bbq-brown\/40 { background-color: rgba(92, 51, 23, 0.4); }
.bg-bbq-brown\/50 { background-color: rgba(92, 51, 23, 0.5); }
.bg-bbq-brown\/60 { background-color: rgba(92, 51, 23, 0.6); }
.bg-bbq-brown\/20 { background-color: rgba(92, 51, 23, 0.2); }
.bg-bbq-cream\/5 { background-color: rgba(255, 248, 240, 0.05); }
.bg-bbq-charcoal\/70 { background-color: rgba(45, 45, 45, 0.7); }

/* Text colors */
.text-bbq-brown { color: var(--color-bbq-brown); }
.text-bbq-orange { color: var(--color-bbq-orange); }
.text-bbq-orange-light { color: var(--color-bbq-orange-light); }
.text-bbq-flame { color: var(--color-bbq-flame); }
.text-bbq-gold { color: var(--color-bbq-gold); }
.text-bbq-cream { color: var(--color-bbq-cream); }

/* Text with opacity */
.text-bbq-cream\/90 { color: rgba(255, 248, 240, 0.9); }
.text-bbq-cream\/80 { color: rgba(255, 248, 240, 0.8); }
.text-bbq-cream\/70 { color: rgba(255, 248, 240, 0.7); }
.text-bbq-cream\/60 { color: rgba(255, 248, 240, 0.6); }
.text-bbq-cream\/50 { color: rgba(255, 248, 240, 0.5); }
.text-bbq-cream\/40 { color: rgba(255, 248, 240, 0.4); }
.text-bbq-cream\/30 { color: rgba(255, 248, 240, 0.3); }
.text-bbq-cream\/25 { color: rgba(255, 248, 240, 0.25); }
.text-bbq-cream\/20 { color: rgba(255, 248, 240, 0.2); }
.text-bbq-cream\/15 { color: rgba(255, 248, 240, 0.15); }
.text-bbq-orange\/80 { color: rgba(232, 107, 28, 0.8); }
.text-bbq-flame\/60 { color: rgba(255, 69, 0, 0.6); }
.text-bbq-flame\/50 { color: rgba(255, 69, 0, 0.5); }
.text-bbq-flame\/40 { color: rgba(255, 69, 0, 0.4); }
.text-bbq-gold\/60 { color: rgba(218, 165, 32, 0.6); }
.text-bbq-orange\/30 { color: rgba(232, 107, 28, 0.3); }
.text-bbq-cream\/35 { color: rgba(255, 248, 240, 0.35); }
.text-bbq-cream\/10 { color: rgba(255, 248, 240, 0.1); }

/* Border colors */
.border-bbq-brown\/30 { border-color: rgba(92, 51, 23, 0.3); }
.border-bbq-brown\/40 { border-color: rgba(92, 51, 23, 0.4); }
.border-bbq-brown\/20 { border-color: rgba(92, 51, 23, 0.2); }
.border-bbq-brown\/10 { border-color: rgba(92, 51, 23, 0.1); }
.border-bbq-brown\/50 { border-color: rgba(92, 51, 23, 0.5); }
.border-bbq-orange\/30 { border-color: rgba(232, 107, 28, 0.3); }
.border-bbq-orange\/20 { border-color: rgba(232, 107, 28, 0.2); }
.border-bbq-orange\/50 { border-color: rgba(232, 107, 28, 0.5); }
.border-bbq-flame\/30 { border-color: rgba(255, 69, 0, 0.3); }
.border-bbq-flame\/25 { border-color: rgba(255, 69, 0, 0.25); }
.border-bbq-flame\/50 { border-color: rgba(255, 69, 0, 0.5); }
.border-bbq-flame\/60 { border-color: rgba(255, 69, 0, 0.6); }
.border-bbq-gold { border-color: var(--color-bbq-gold); }
.border-bbq-gold\/30 { border-color: rgba(218, 165, 32, 0.3); }
.border-bbq-gold\/40 { border-color: rgba(218, 165, 32, 0.4); }
.border-bbq-gold\/15 { border-color: rgba(218, 165, 32, 0.15); }
.border-bbq-cream\/20 { border-color: rgba(255, 248, 240, 0.2); }
.border-bbq-cream\/30 { border-color: rgba(255, 248, 240, 0.3); }
.border-bbq-cream\/15 { border-color: rgba(255, 248, 240, 0.15); }
.border-bbq-orange\/20 { border-color: rgba(232, 107, 28, 0.2); }
.border-bbq-orange-light { border-color: var(--color-bbq-orange-light); }
.border-bbq-orange-light\/40 { border-color: rgba(245, 158, 63, 0.4); }
.border-bbq-orange-light\/30 { border-color: rgba(245, 158, 63, 0.3); }

/* Ring colors */
.ring-bbq-orange\/30 { --tw-ring-color: rgba(232, 107, 28, 0.3); }
.ring-bbq-flame\/30 { --tw-ring-color: rgba(255, 69, 0, 0.3); }

/* Shadow colors */
.shadow-bbq-orange\/30 { --tw-shadow-color: rgba(232, 107, 28, 0.3); }

/* Gradient from/via/to custom colors */
.from-bbq-smoke { --tw-gradient-from: var(--color-bbq-smoke); }
.from-bbq-smoke\/80 { --tw-gradient-from: rgba(26, 26, 26, 0.8); }
.from-bbq-smoke\/60 { --tw-gradient-from: rgba(26, 26, 26, 0.6); }
.from-bbq-charcoal { --tw-gradient-from: var(--color-bbq-charcoal); }
.from-bbq-flame { --tw-gradient-from: var(--color-bbq-flame); }
.from-bbq-brown-dark { --tw-gradient-from: var(--color-bbq-brown-dark); }
.via-bbq-charcoal\/70 { --tw-gradient-via: rgba(45, 45, 45, 0.7); }
.via-bbq-charcoal\/40 { --tw-gradient-via: rgba(45, 45, 45, 0.4); }
.via-bbq-brown-dark { --tw-gradient-via: var(--color-bbq-brown-dark); }
.via-bbq-charcoal { --tw-gradient-via: var(--color-bbq-charcoal); }
.via-bbq-orange { --tw-gradient-via: var(--color-bbq-orange); }
.to-bbq-smoke { --tw-gradient-to: var(--color-bbq-smoke); }
.to-bbq-brown-dark { --tw-gradient-to: var(--color-bbq-brown-dark); }
.to-bbq-gold { --tw-gradient-to: var(--color-bbq-gold); }
.to-transparent { --tw-gradient-to: transparent; }

/* Custom gradient backgrounds that Tailwind CDN can't resolve */
.bg-gradient-flame-bar {
  background: linear-gradient(to right, var(--color-bbq-flame), var(--color-bbq-orange), var(--color-bbq-gold));
}

.bg-gradient-divider {
  background: linear-gradient(to right, var(--color-bbq-flame), var(--color-bbq-gold));
}

.bg-gradient-hero-overlay {
  background: linear-gradient(to bottom, rgba(26,26,26,0.8), rgba(45,45,45,0.7), var(--color-bbq-brown-dark));
}

.bg-gradient-section-alt {
  background: linear-gradient(to bottom, var(--color-bbq-smoke), var(--color-bbq-brown-dark), var(--color-bbq-smoke));
}

.bg-gradient-contact {
  background: linear-gradient(to bottom, var(--color-bbq-smoke), var(--color-bbq-charcoal), var(--color-bbq-brown-dark));
}

.bg-gradient-bottom-fade {
  background: linear-gradient(to top, var(--color-bbq-smoke), transparent);
}

.bg-gradient-top-fade {
  background: linear-gradient(to bottom, var(--color-bbq-smoke), transparent);
}

.bg-gradient-charcoal-brown {
  background: linear-gradient(to bottom right, var(--color-bbq-charcoal), var(--color-bbq-brown-dark));
}

.bg-gradient-team-overlay {
  background: linear-gradient(to top, var(--color-bbq-charcoal), rgba(45,45,45,0.4), transparent);
}

/* Focus ring for form elements */
.focus\:border-bbq-orange:focus { border-color: var(--color-bbq-orange); }
.focus\:ring-bbq-orange:focus { --tw-ring-color: var(--color-bbq-orange); }

/* Hover colors */
.hover\:text-bbq-orange:hover { color: var(--color-bbq-orange); }
.hover\:text-bbq-flame:hover { color: var(--color-bbq-flame); }
.hover\:text-bbq-orange-light:hover { color: var(--color-bbq-orange-light); }
.hover\:text-bbq-cream:hover { color: var(--color-bbq-cream); }
.hover\:text-bbq-cream\/40:hover { color: rgba(255, 248, 240, 0.4); }
.hover\:text-bbq-cream\/50:hover { color: rgba(255, 248, 240, 0.5); }
.hover\:text-bbq-cream\/60:hover { color: rgba(255, 248, 240, 0.6); }
.hover\:text-bbq-cream\/70:hover { color: rgba(255, 248, 240, 0.7); }
.hover\:text-bbq-flame\/50:hover { color: rgba(255, 69, 0, 0.5); }
.hover\:bg-bbq-flame:hover { background-color: var(--color-bbq-flame); }
.hover\:bg-bbq-orange:hover { background-color: var(--color-bbq-orange); }
.hover\:bg-bbq-gold:hover { background-color: var(--color-bbq-gold); }
.hover\:bg-bbq-orange-light:hover { background-color: var(--color-bbq-orange-light); }
.hover\:bg-bbq-brown\/50:hover { background-color: rgba(92, 51, 23, 0.5); }
.hover\:bg-bbq-brown\/60:hover { background-color: rgba(92, 51, 23, 0.6); }
.hover\:bg-bbq-brown\/20:hover { background-color: rgba(92, 51, 23, 0.2); }
.hover\:border-bbq-orange\/50:hover { border-color: rgba(232, 107, 28, 0.5); }
.hover\:border-bbq-flame\/40:hover { border-color: rgba(255, 69, 0, 0.4); }
.hover\:border-bbq-flame\/50:hover { border-color: rgba(255, 69, 0, 0.5); }
.hover\:border-bbq-flame\/60:hover { border-color: rgba(255, 69, 0, 0.6); }
.hover\:border-bbq-gold\/40:hover { border-color: rgba(218, 165, 32, 0.4); }
.hover\:border-bbq-cream\/40:hover { border-color: rgba(255, 248, 240, 0.4); }
.hover\:text-bbq-orange\/40:hover { color: rgba(232, 107, 28, 0.4); }
.hover\:text-bbq-gold\/40:hover { color: rgba(218, 165, 32, 0.4); }

/* Group hover states */
.group:hover .group-hover\:text-bbq-cream\/70 { color: rgba(255, 248, 240, 0.7); }
.group:hover .group-hover\:text-bbq-cream\/60 { color: rgba(255, 248, 240, 0.6); }
.group:hover .group-hover\:text-bbq-cream\/50 { color: rgba(255, 248, 240, 0.5); }
.group:hover .group-hover\:text-bbq-cream\/40 { color: rgba(255, 248, 240, 0.4); }
.group:hover .group-hover\:text-bbq-flame { color: var(--color-bbq-flame); }
.group:hover .group-hover\:text-bbq-flame\/50 { color: rgba(255, 69, 0, 0.5); }
.group:hover .group-hover\:text-bbq-flame\/40 { color: rgba(255, 69, 0, 0.4); }
.group:hover .group-hover\:text-bbq-orange\/40 { color: rgba(232, 107, 28, 0.4); }
.group:hover .group-hover\:text-bbq-gold\/40 { color: rgba(218, 165, 32, 0.4); }
.group:hover .group-hover\:border-bbq-flame\/40 { border-color: rgba(255, 69, 0, 0.4); }
.group:hover .group-hover\:border-bbq-orange\/40 { border-color: rgba(232, 107, 28, 0.4); }
.group:hover .group-hover\:bg-bbq-brown\/50 { background-color: rgba(92, 51, 23, 0.5); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* Placeholder text */
.placeholder\:text-bbq-cream\/30::placeholder { color: rgba(255, 248, 240, 0.3); }

/* Focus-visible on form inputs */
.focus-visible\:text-bbq-orange:focus-visible { color: var(--color-bbq-orange); }

/* Tabular numbers for countdown */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ======================================
   GLUTGEFÄHRTEN — Equipment- und Kultur-Partner-Sektion
   ====================================== */
.glutgefaehrten-section {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 69, 0, 0.12), transparent 70%),
    linear-gradient(180deg, var(--color-bbq-smoke) 0%, var(--color-bbq-brown-dark) 50%, var(--color-bbq-smoke) 100%);
}
.glut-quote::before,
.glut-quote::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(255, 69, 0, 0.5);
  vertical-align: middle;
  margin: 0 8px;
}
.partner-tile {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 248, 240, 0.08);
  transition: all 0.35s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  overflow: hidden;
}
.partner-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-bbq-flame), transparent);
  transform: translateX(-50%);
  transition: width 0.35s ease;
}
.partner-tile:hover {
  background: rgba(58, 31, 11, 0.4);
  border-color: rgba(255, 69, 0, 0.4);
  transform: translateY(-2px);
}
.partner-tile:hover::after { width: 70%; }
.partner-tile .corner-mark {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: rgba(255, 69, 0, 0.55);
  font-weight: 800;
  text-transform: uppercase;
}
/* Flammen-Video als Section-Hintergrund (nur on-hover sichtbar) */
.glutgefaehrten-section .flame-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  filter: saturate(1.1) contrast(1.1);
}
.glutgefaehrten-section.flame-active .flame-bg { opacity: 0.22; }
.glutgefaehrten-section .flame-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(26, 26, 26, 0.45) 80%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms ease;
}
.glutgefaehrten-section.flame-active .flame-veil { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .glutgefaehrten-section.flame-active .flame-bg { opacity: 0; }
  .glutgefaehrten-section.flame-active .flame-veil { opacity: 0; }
  .partner-tile { transition: none; }
}

/* ======================================
   CSP-Refactor (2026-05-19): Inline-Styles aus index.html in Klassen ueberfuehrt.
   Ziel: strict Content-Security-Policy ohne 'unsafe-inline'.
   ====================================== */

/* Fire-Division-Markendruck (orange/flame, semi-transparent) */
.fire-division-label { color: rgba(255, 69, 0, 0.8); }
.fire-division-footer-tag { color: rgba(255, 69, 0, 0.6); }

/* NoScript-Fallback-Banner (wird nur sichtbar, wenn JS deaktiviert ist) */
.noscript-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #2D2D2D;
  border-top: 2px solid #E86B1C;
  padding: 1.5rem;
  text-align: center;
  color: #FFF8F0;
  font-family: sans-serif;
}
.noscript-banner__title { margin-bottom: 0.5rem; font-weight: bold; }
.noscript-banner__hint { font-size: 0.875rem; opacity: 0.7; }
.noscript-banner__link { color: #E86B1C; text-decoration: underline; }

/* Hidden-Utility (Tailwind-Aequivalent fuer Honeypot-Felder etc.) */
.honeypot-hidden { display: none; }

/* Sponsor-Welcome-Bar Schatten */
.shadow-sponsor-welcome { box-shadow: 0 -4px 24px rgba(232, 107, 28, 0.35); }

/* CTA-Glow (Sponsor-Welcome-CTA-Button) */
.shadow-cta-glow { box-shadow: 0 0 12px rgba(255, 69, 0, 0.5); }

/* Cookie-Marketing-Toggle: Track-Hintergrund + Knopf-Position
   On-/Off-Zustaende werden via aria-checked gesteuert (Accessibility-konform),
   damit JavaScript keine Inline-Styles setzen muss (strict CSP). */
.cookie-toggle-track { background-color: rgba(92, 51, 23, 0.5); }
.cookie-toggle-track[aria-checked="true"] { background-color: var(--color-bbq-orange); }
.cookie-toggle-dot { transform: translateX(0); }
.cookie-toggle-dot--on { transform: translateX(1.25rem); }
.cookie-toggle-track[aria-checked="true"] .cookie-toggle-dot { transform: translateX(1.25rem); }
.cookie-toggle-track[aria-checked="false"] .cookie-toggle-dot { transform: translateX(0); }

/* Glutgefaehrten — Fallback wenn das Hintergrund-Video fehlschlaegt */
.glut-video-fallback-bg {
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.1), rgba(232, 107, 28, 0.05));
}

/* ======================================
   Smoke-Particles (Hero-Section) — 5 statische Konfigurationen
   ====================================== */
.smoke-particle--1 { width: 20px; height: 20px; left: 10%; bottom: 10%; animation-delay: 0s; animation-duration: 3.5s; }
.smoke-particle--2 { width: 35px; height: 35px; left: 28%; bottom: 10%; animation-delay: 0.8s; animation-duration: 4s; }
.smoke-particle--3 { width: 50px; height: 50px; left: 46%; bottom: 10%; animation-delay: 1.6s; animation-duration: 4.5s; }
.smoke-particle--4 { width: 65px; height: 65px; left: 64%; bottom: 10%; animation-delay: 2.4s; animation-duration: 5s; }
.smoke-particle--5 { width: 80px; height: 80px; left: 82%; bottom: 10%; animation-delay: 3.2s; animation-duration: 5.5s; }

/* Ember-Particles (Hero-Section) — 8 statische Konfigurationen */
.ember-particle--1 { width: 3px; height: 3px; left: 15%; bottom: 5%; animation-delay: 0s; animation-duration: 2s; }
.ember-particle--2 { width: 4px; height: 4px; left: 24%; bottom: 5%; animation-delay: 0.6s; animation-duration: 2.5s; }
.ember-particle--3 { width: 5px; height: 5px; left: 33%; bottom: 5%; animation-delay: 1.2s; animation-duration: 3s; }
.ember-particle--4 { width: 3px; height: 3px; left: 42%; bottom: 5%; animation-delay: 1.8s; animation-duration: 2s; }
.ember-particle--5 { width: 4px; height: 4px; left: 51%; bottom: 5%; animation-delay: 2.4s; animation-duration: 2.5s; }
.ember-particle--6 { width: 5px; height: 5px; left: 60%; bottom: 5%; animation-delay: 3s; animation-duration: 3s; }
.ember-particle--7 { width: 3px; height: 3px; left: 69%; bottom: 5%; animation-delay: 3.6s; animation-duration: 2s; }
.ember-particle--8 { width: 4px; height: 4px; left: 78%; bottom: 5%; animation-delay: 4.2s; animation-duration: 2.5s; }

/* Smoke-BG (Large background clouds) — 3 statische Konfigurationen */
.smoke-bg--1 { width: 200px; height: 200px; left: 0%; bottom: 0%; animation-delay: 0s; }
.smoke-bg--2 { width: 300px; height: 300px; left: 30%; bottom: 0%; animation-delay: 4s; }
.smoke-bg--3 { width: 400px; height: 400px; left: 60%; bottom: 0%; animation-delay: 8s; }