/* ============================================================
   DIE FEUERDETEKTIVE VON MITTELBERG — Design System
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand color — cinematic night + fire */
  --navy:        #0A1424;   /* deep night base — header, sections, footer */
  --navy-2:      #12203A;   /* raised panel */
  --navy-3:      #1C3158;   /* card hover / accent line */
  --night:       #060C18;   /* darkest — image vignettes */
  --red:         #E0241B;   /* Feuerwehr signal red — primary CTA */
  --red-deep:    #B5160F;
  --red-soft:    #F25C50;
  --amber:       #F4A91C;   /* warm bernstein secondary */
  --amber-deep:  #D98708;
  --ember:       #E8762A;   /* fire glow orange */
  --cream:       #FAF4E8;   /* warm paper reading surface */
  --cream-2:     #F1E7D2;
  --cream-line:  #E4D8BE;
  --smoke:       #C7CCD6;
  --smoke-deep:  #8A93A6;
  --ink:         #14213D;   /* text on cream */
  --ink-soft:    #4A5468;
  --white:       #FFFFFF;
  --green:       #1F9D57;   /* "Erhältlich" badge */

  /* Fire-glow gradient atoms */
  --glow-fire:  radial-gradient(115% 95% at 70% 118%, rgba(232,118,42,.62), rgba(224,36,27,.18) 38%, transparent 60%);
  --glow-cool:  radial-gradient(90% 80% at 16% -12%, rgba(40,78,150,.55), transparent 58%);
  --night-base: linear-gradient(168deg, #112038 0%, #0A1424 48%, #060C18 100%);

  /* Type */
  --display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SF Mono", monospace;

  /* Radius / shadow */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --shadow-sm: 0 2px 10px rgba(8,14,28,.14);
  --shadow-md: 0 16px 38px rgba(6,12,24,.28);
  --shadow-lg: 0 34px 80px rgba(6,12,24,.48);
  --shadow-red: 0 14px 30px rgba(224,36,27,.36);

  /* Layout */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  /* Tweakable */
  --accent-2: var(--amber);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.02; margin: 0; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ---------- Helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(56px, 8vw, 110px); position: relative; }
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block;
}
.section-title {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: .98;
}
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); max-width: 56ch; }
.center { text-align: center; }
.center .eyebrow, .center .lead { margin-inline: auto; }
.center .lead { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 800; font-size: 16px;
  padding: 15px 26px; border-radius: 999px;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { transform: translateY(-2px); background: var(--red-deep); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px rgba(14,27,51,.22); }
.btn-ghost:hover { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 2px var(--navy); transform: translateY(-2px); }
.btn-amber { background: var(--accent-2); color: var(--navy); box-shadow: 0 12px 26px rgba(244,169,28,.34); }
.btn-amber:hover { transform: translateY(-2px); background: var(--amber-deep); }
.btn-light { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-on-dark { box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); color:#fff; }
.btn-on-dark:hover { background:#fff; color: var(--navy); box-shadow: inset 0 0 0 2px #fff; transform: translateY(-2px); }

/* circular arrow button used on cards */
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-2); color: var(--navy);
  transition: transform .2s, background .2s, box-shadow .2s;
  flex: none;
}
.fab svg { width: 22px; height: 22px; }
.fab:hover { transform: translateX(4px) scale(1.04); box-shadow: 0 10px 22px rgba(244,169,28,.4); }
.fab--red { background: var(--red); color:#fff; }
.fab--red:hover { box-shadow: var(--shadow-red); }

/* ---------- Placeholder image system — cinematic ---------- */
.ph {
  position: relative;
  background: var(--glow-cool), var(--glow-fire), var(--night-base);
  color: #fff;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* faint film grain + ember speckle so flat areas read as a scene */
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(1.5px 1.5px at 20% 70%, rgba(255,180,90,.5), transparent),
    radial-gradient(1.5px 1.5px at 62% 84%, rgba(255,150,70,.45), transparent),
    radial-gradient(1px 1px at 78% 64%, rgba(255,200,120,.5), transparent),
    radial-gradient(1px 1px at 42% 90%, rgba(255,160,80,.4), transparent);
}
.ph__tag {
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  border: 1px dashed rgba(255,255,255,.28);
  padding: 8px 13px; border-radius: 8px; margin: 14px;
  max-width: 82%; text-align: center; line-height: 1.5;
  background: rgba(6,12,24,.42); backdrop-filter: blur(2px);
}
/* mood variants */
.ph--cream {
  background:
    repeating-linear-gradient(135deg, rgba(20,33,61,.05) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #fff, var(--cream-2));
  color: var(--ink);
}
.ph--cream::before { display: none; }
.ph--cream .ph__tag { color: var(--ink-soft); border-color: rgba(20,33,61,.28); background: rgba(255,255,255,.5); }

/* ---------- Decorative motifs ---------- */
.tower { position: absolute; bottom: 0; }
.smoke-path { animation: drift 9s ease-in-out infinite; transform-origin: bottom center; }
@keyframes drift {
  0%,100% { transform: translateX(0) scaleY(1); opacity:.7; }
  50%     { transform: translateX(8px) scaleY(1.05); opacity:1; }
}
.radio-ring { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }
}

/* badge */
.badge {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; display: inline-flex; align-items:center; gap:6px;
}
.badge--live { background: var(--green); color:#fff; }
.badge--soon { background: var(--smoke); color: var(--navy); }
.badge--pre  { background: var(--amber); color: var(--navy); }
.badge--live::before, .badge--soon::before, .badge--pre::before {
  content:""; width:7px; height:7px; border-radius:50%; background: currentColor;
}