/* ===========================
   COMPONENTS.CSS
   - Header, Logo, Navigation
   - Button-Styles (primary/secondary)
   - Cards, Grids (Countdown-Tiles)
   - Details/Accordion, Footer
   - Formular-Felder
   =========================== */

/* Header / Branding */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 16px;          /* Parity: exakt wie im Proto */
}
header .logo {
  font-weight: 800;              /* Parity: 800 statt 700 */
  letter-spacing: .2px;
}

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 14px;            /* Parity */
  border-radius: 12px;           /* Parity */
  cursor: pointer;
  font-weight: 600;
  transition: transform .06s ease, opacity .2s ease;
}
.btn:hover { opacity: .95; }
.btn:active { transform: translateY(1px); }

.btn.secondary {
  background: transparent;
  color: var(--fg);
  border-color: rgba(0,0,0,.12); /* Parity: feste RGBA-Grenze wie im Proto */
}
@media (prefers-color-scheme: dark){
  .btn.secondary{ border-color: #1f2a44; } /* Parity: Dark-Border */
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06); /* Parity: feste RGBA statt var(--border) */
  border-radius: 16px;               /* Parity */
  padding: 20px;                     /* Parity */
}
@media (prefers-color-scheme: dark){
  .card { border-color: #1f2a44; }   /* Parity: Dark-Border */
}

/* Countdown Grid (4 → 2 → 1) */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;                         /* Parity */
  margin: 14px 0 6px;                /* Parity */
}
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
}

/* Tile */
.tile {
  text-align: center;
  padding: 18px 10px;                /* Parity */
  border-radius: 14px;               /* Parity */
  background: #fff;                  /* Parity */
  border: 1px solid rgba(0,0,0,.06); /* Parity */
}
@media (prefers-color-scheme: dark){
  .tile{
    background: #0e1626;             /* Parity */
    border-color: #1f2a44;           /* Parity */
  }
}
.num { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; letter-spacing: .5px; } /* Parity */
.label { font-size: .9rem; color: var(--muted); }

/* Details / Accordion */
details {
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06); /* Parity */
  border-radius: 12px;               /* Parity */
  padding: 12px 14px;                /* Parity */
}
@media (prefers-color-scheme: dark){
  details { border-color: #1f2a44; } /* Parity */
}
details + details { margin-top: 10px; }
summary { cursor: pointer; }

/* Sections */
section { margin: 26px 0; }

/* Footer */
footer {
  margin: 36px 0 12px;              /* Parity */
  color: var(--muted);
  font-size: .9rem;
}

/* Formular-Gruppen (Helper) */
.field {
  display: flex;
  gap: 10px;                         /* Parity */
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Zusätzliche Parity-Overrides für Typo ---------- */
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 8px 0 12px; } /* Parity */
.lead { color: var(--muted); margin: 0 0 18px; }                  /* Parity */

/* Optional: Container-Parität (falls nicht schon in base.css) */
.container { max-width: 920px; padding: 24px; }                   /* Parity */