/* ============================================================
   Autumn / Herbst 2026 Theme — Heroradio
   Warmes, gemütliches Herbst-Design mit fallenden Blättern
   ============================================================ */

.theme-autumn {
  --bg:        #1a0d06;
  --bg-2:      #2a1608;
  --bg-3:      #3a1e0c;
  --fg:        #fff1dc;
  --muted:     #d9b48a;
  --primary:   #e8801a;
  --secondary: #4a1e08;
  --accent:    #c8442a;
  --danger:    #b21e1e;
  --warning:   #f2c14e;
  --success:   #7fbf5a;
  --card:      rgba(46, 22, 10, .85);
  --card-border: rgba(232, 128, 26, .32);
  --shadow-glow: 0 0 24px rgba(232,128,26,.35), 0 0 60px rgba(200,68,42,.22);
}

.theme-autumn body {
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(232,128,26,.20), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(200,68,42,.20), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(140,60,20,.18), transparent 70%),
    linear-gradient(180deg, #1a0d06 0%, #2a1608 55%, #1a0d06 100%);
  color: var(--fg);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}

.theme-autumn .bg-grain {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(232,128,26,.18), transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(200,68,42,.16), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(242,193,78,.10), transparent 40%);
  opacity: .9;
}

/* ---------- Header / Navigation ---------- */
.theme-autumn .site-header {
  background: linear-gradient(180deg, rgba(26,13,6,.96), rgba(42,22,8,.85));
  border-bottom: 1px solid rgba(232,128,26,.35);
  box-shadow: 0 4px 24px rgba(232,128,26,.18);
}
.theme-autumn .brand-mark {
  background: linear-gradient(135deg, #e8801a, #c8442a);
  box-shadow: 0 0 22px rgba(232,128,26,.55);
}
.theme-autumn .brand-text strong {
  background: linear-gradient(90deg, #f5a742, #e8801a, #c8442a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(232,128,26,.35);
  letter-spacing: .5px;
}
.theme-autumn .site-nav a { color: var(--fg); }
.theme-autumn .site-nav a:hover,
.theme-autumn .site-nav a.active {
  color: var(--primary);
  text-shadow: 0 0 12px rgba(232,128,26,.55);
}

/* ---------- Buttons ---------- */
.theme-autumn .btn,
.theme-autumn button.btn {
  background: linear-gradient(135deg, #e8801a, #c8442a);
  border: none; color: #fff;
  box-shadow: 0 4px 16px rgba(232,128,26,.35);
}
.theme-autumn .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.theme-autumn .btn-outline {
  background: transparent;
  border: 1px solid rgba(232,128,26,.5);
  color: var(--fg);
}

/* ---------- Cards ---------- */
.theme-autumn .card {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,128,26,.08);
  backdrop-filter: blur(6px);
}
.theme-autumn .card:hover { border-color: rgba(232,128,26,.55); }

/* ---------- Inputs ---------- */
.theme-autumn input, .theme-autumn textarea, .theme-autumn select {
  background: rgba(20,10,4,.7);
  border: 1px solid rgba(232,128,26,.28);
  color: var(--fg);
}
.theme-autumn input:focus, .theme-autumn textarea:focus, .theme-autumn select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232,128,26,.25);
}

/* ---------- Footer ---------- */
.theme-autumn .site-footer {
  background: linear-gradient(0deg, rgba(10,5,2,.95), rgba(26,13,6,.6));
  border-top: 1px solid rgba(232,128,26,.28);
}

/* ---------- Decorations (rendered from header.php) ---------- */

/* Sun rays / warm glow */
.au-sun {
  position: fixed;
  top: 80px;
  right: 50px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffe0a8 0%, #f5a742 55%, #c8442a 100%);
  box-shadow:
    0 0 50px rgba(245,167,66,.55),
    0 0 120px rgba(232,128,26,.35);
  z-index: 2;
  pointer-events: none;
  animation: au-sun-pulse 8s ease-in-out infinite alternate;
}
@keyframes au-sun-pulse {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.15); }
}

/* Falling leaves */
.au-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.au-leaves span {
  position: absolute;
  top: -40px;
  font-size: 26px;
  animation: au-leaf-fall linear infinite;
  will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
@keyframes au-leaf-fall {
  0%   { transform: translate(0, -10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(-40px, 25vh) rotate(120deg); }
  50%  { transform: translate(40px, 50vh) rotate(220deg); }
  75%  { transform: translate(-30px, 75vh) rotate(300deg); }
  95%  { opacity: 1; }
  100% { transform: translate(20px, 110vh) rotate(420deg); opacity: 0; }
}

/* Pumpkins & acorns floating along bottom */
.au-ground {
  position: fixed;
  inset: auto 0 0 0;
  height: 90px;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.au-ground span {
  position: absolute;
  bottom: 6px;
  font-size: 30px;
  animation: au-ground-drift linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
@keyframes au-ground-drift {
  0%   { transform: translateX(110vw); }
  100% { transform: translateX(-20vw); }
}

/* Tree branches in corners */
.au-branch {
  position: fixed;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.au-branch.tl { top: 0; left: 0; }
.au-branch.tr { top: 0; right: 0; transform: scaleX(-1); }

/* Autumn banner */
.au-banner {
  position: relative;
  background: linear-gradient(90deg, #e8801a 0%, #c8442a 55%, #8a3410 100%);
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 1rem;
  z-index: 5;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  box-shadow: 0 4px 22px rgba(232,128,26,.4);
  margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .au-leaves span, .au-ground span, .au-sun { animation: none !important; }
}