/* ===========================
   RedBlock – Farbpalette
   ===========================
   Rot (Brand):       #e53935
   Rot dunkel:        #b71c1c
   Gold (Akzent):     #ffca28
   Gold dunkel:       #ffa000
   Braun (Text/Btns): #3e2723
   Schwarz / Hintergrund: #0e0a09
   Offwhite:          #f5e8c7
*/

:root{
  --red: #e53935;
  --red-dark: #b71c1c;
  --gold: #ffca28;
  --gold-dark: #ffa000;
  --brown: #3e2723;
  --black: #0e0a09;
  --offwhite: #f5e8c7;

  --bg: #140c0b;         /* Basis-Hintergrund */
  --bg-hero: #2a0f0d;    /* dunkles Rotbraun */
  --card: #1a0f0d;       /* Karten-Background */
  --muted: #bfae8f;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
  --radius: 16px;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--offwhite);
  line-height: 1.55;
}

/* Containers */
.container{
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(20,12,11,.9), rgba(20,12,11,.65));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}
.logo{ height: 42px; display:block; }
.logo.small{ height: 28px; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }

/* Nav */
.main-nav a{
  font-weight: 700;
  text-decoration: none;
  color: var(--gold);
  padding: 10px 14px;
  border-radius: 10px;
}
.main-nav a:hover{ background: rgba(255,202,40,.12); }

#nav-toggle{ display:none; }
.burger{ display:none; cursor:pointer; }
.burger span{
  display:block; width:28px; height:3px; background: var(--gold);
  margin:6px 0; transition:.2s;
}

/* Hero */
.hero{
  position: relative;
  background:
    linear-gradient(180deg, rgba(229,57,53,.15), transparent 40%),
    radial-gradient(1200px 500px at 50% -10%, rgba(255,202,40,.18), transparent 60%),
    var(--bg-hero);
  /* Pixelige Kachel-Optik */
  --px:#401613;
  --px2:#2b0f0d;
  --px3:#601c17;
  background-image:
    repeating-linear-gradient(0deg, var(--px), var(--px) 12px, var(--px2) 12px, var(--px2) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(0,0,0,.08) 12px, rgba(0,0,0,.08) 24px),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    linear-gradient(180deg, var(--bg-hero), var(--bg-hero));
  color: var(--offwhite);
  padding: 96px 0 72px;
  overflow: hidden;
}
.hero-shadow{
  position:absolute; inset:auto 0 0 0; height:80px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.5));
}
.hero-inner{ text-align:center; }
.title{
  font-family: "Russo One", sans-serif;
  letter-spacing: .5px;
  font-size: clamp(36px, 5vw, 64px);
  margin: 0 0 8px;
  text-shadow: 0 6px 0 rgba(0,0,0,.35);
}
.title span{
  color: var(--gold);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35));
}
.subtitle{
  color: var(--muted);
  font-size: clamp(16px, 2.3vw, 20px);
  margin: 0 0 28px;
}

.cta-row{
  display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-bottom: 18px;
}
.btn{
  --padx: 22px;
  --pady: 14px;
  appearance:none; border:0; border-radius: 14px;
  padding: var(--pady) var(--padx);
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transform: translateZ(0);
  box-shadow: var(--shadow);
}
.btn-primary{
  color: #3b250f;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-secondary{
  background: linear-gradient(180deg, #f1d388, #d8a52f);
  color: #3b250f;
}
.btn-outline{
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
}
.btn-outline:hover{ background: rgba(255,202,40,.12); }

/* IP Chip */
.ip-chip{
  display:flex; gap:10px; align-items:center; cursor:pointer;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  padding: 12px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.ip-chip .dot{
  width:10px; height:10px; border-radius:50%;
  background: #21c05e; box-shadow: 0 0 12px rgba(33,192,94,.7);
}

/* Sections */
.section{ padding: 72px 0; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%); }
.section-dark{ background: #120b09; }

.section-title{
  font-family: "Russo One", sans-serif;
  font-size: clamp(26px, 3.6vw, 38px);
  margin: 0 0 28px;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
}

/* Cards & Panels */
.grid{ display:grid; gap: 20px; }
.cards{
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background: linear-gradient(180deg, #20100e, #150b0a);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.card h3{
  margin:0; font-size: 22px; font-weight: 800; letter-spacing:.3px;
}
.card p{ color: var(--muted); margin: 8px 0 16px; }
.tag{
  display:inline-block; padding: 6px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 800; color: #3b250f;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.trio{ grid-template-columns: repeat(3, 1fr); }
.panel{
  background: #1a0f0d;
  border: 1px solid rgba(255,255,255,.06);
  padding: 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel h3{ margin-top:0; }

/* FAQ */
.faq{ grid-template-columns: repeat(3, 1fr); }
.faq-item{
  background: #1a0f0d;
  border: 1px solid rgba(255,255,255,.06);
  padding: 22px; border-radius: var(--radius);
}

/* Footer */
.site-footer{
  background: #0f0908;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap: 20px; padding: 28px 0;
}
.site-footer a{
  color: var(--muted); text-decoration:none; margin-left:16px;
}
.site-footer a:hover{ color: var(--gold); }

/* Responsive */
@media (max-width: 960px){
  .cards, .trio, .faq{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .header-inner{ grid-template-columns: auto auto auto; }
  .main-nav{
    position: absolute; inset: 72px 0 auto 0; background: rgba(14,10,9,.98);
    display: grid; gap: 6px; padding: 12px 16px; transform-origin: top; transform: scaleY(0);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #nav-toggle:checked ~ .main-nav{ transform: scaleY(1); }
  .burger{ display:block; justify-self:end; }
  .cards, .trio, .faq{ grid-template-columns: 1fr; }
  .logo{ height:36px; }
}