/* Consortium Vault v0.42.1 – Mobile Premium Compact Layout */

@media (max-width: 820px) {
  body::before {
    padding: 8px 12px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
  }

  header,
  .hero,
  .cv-demo-hero {
    padding: 20px !important;
    margin-top: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 22px !important;
  }

  h1,
  .cv-demo-title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.04 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.045em !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
    margin-bottom: 12px !important;
  }

  h3 {
    font-size: clamp(18px, 4.8vw, 24px) !important;
  }

  header p,
  .hero p,
  .cv-demo-subtitle,
  p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .cv-demo-kicker,
  [class*="kicker"],
  [class*="label"] {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  .card,
  .panel,
  .box,
  .module,
  .tile,
  .login-card,
  .dashboard-card,
  .admin-card,
  .notice,
  form,
  .cv-demo-card,
  .cv-demo-warning,
  .cv-demo-credentials,
  .cv-demo-flow {
    padding: 15px !important;
    margin-bottom: 13px !important;
    border-radius: 17px !important;
  }

  /* Status-/KPI-Karten im oberen Bereich kompakter machen */
  header .card,
  header .panel,
  header .box,
  header .module,
  header .tile,
  .hero .card,
  .hero .panel,
  .hero .box,
  .hero .module,
  .hero .tile {
    padding: 13px 14px !important;
    min-height: auto !important;
  }

  header .card p,
  header .panel p,
  header .box p,
  header .module p,
  header .tile p,
  .hero .card p,
  .hero .panel p,
  .hero .box p,
  .hero .module p,
  .hero .tile p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  header strong,
  .hero strong,
  .card strong,
  .panel strong,
  .box strong,
  .module strong,
  .tile strong {
    font-size: 15px !important;
  }

  /* Wenn die Statuskarten in einem Grid liegen: auf Handy 2 Spalten */
  header .grid,
  header .cards,
  header .card-grid,
  header .stats,
  header .kpi-grid,
  .hero .grid,
  .hero .cards,
  .hero .card-grid,
  .hero .stats,
  .hero .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .cv-demo-grid {
    gap: 12px !important;
  }

  .cv-demo-card-title {
    font-size: 17px !important;
    margin-bottom: 6px !important;
  }

  .cv-demo-card-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .cv-demo-step {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .cv-demo-step-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  input,
  select,
  textarea {
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }

  button,
  .button,
  .btn,
  input[type="submit"] {
    padding: 11px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 520px) {
  header,
  .hero,
  .cv-demo-hero {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  h1,
  .cv-demo-title {
    font-size: clamp(26px, 8vw, 36px) !important;
  }

  header p,
  .hero p,
  .cv-demo-subtitle,
  p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .card,
  .panel,
  .box,
  .module,
  .tile,
  .login-card,
  .dashboard-card,
  .admin-card,
  .notice,
  form,
  .cv-demo-card,
  .cv-demo-warning,
  .cv-demo-credentials,
  .cv-demo-flow {
    padding: 13px !important;
    margin-bottom: 11px !important;
    border-radius: 16px !important;
  }

  header .grid,
  header .cards,
  header .card-grid,
  header .stats,
  header .kpi-grid,
  .hero .grid,
  .hero .cards,
  .hero .card-grid,
  .hero .stats,
  .hero .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Sehr kleine Geräte: wieder 1 Spalte, damit nichts gequetscht wird */
@media (max-width: 360px) {
  header .grid,
  header .cards,
  header .card-grid,
  header .stats,
  header .kpi-grid,
  .hero .grid,
  .hero .cards,
  .hero .card-grid,
  .hero .stats,
  .hero .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}