/**
 * ============================================================================
 *  RESPONSIVE.CSS – Breakpoints
 * ============================================================================
 *  Mobile-First-Prinzip: style.css enthält bereits das mobile Basis-Layout.
 *  Diese Datei ergänzt/überschreibt gezielt für größere Viewports.
 *
 *  Breakpoints:
 *   - ≥ 480px  : kleine Anpassungen (Innenabstände)
 *   - ≥ 640px  : Seitenketten erscheinen
 *   - ≥ 960px  : großzügigeres Karten-Layout, größeres Logo
 *   - ≥ 1440px : mehr Weißraum, Ketten weiter außen
 * ============================================================================
 */

/* -------------------------------------------------------------------------
 * ≥ 480px – kleine Smartphones -> größere Phones
 * ---------------------------------------------------------------------- */
@media (min-width: 480px) {
  .card {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
}

/* -------------------------------------------------------------------------
 * ≥ 640px – Tablet Hochformat: Seitenketten werden sichtbar
 * ---------------------------------------------------------------------- */
@media (min-width: 640px) {
  .chain {
    display: block;
  }
}

/* -------------------------------------------------------------------------
 * ≥ 960px – Desktop: klassisches, zentriertes Premium-Card-Layout
 * ---------------------------------------------------------------------- */
@media (min-width: 960px) {
  .card {
    margin-top: var(--space-7);
    box-shadow: var(--shadow-card), 0 0 120px -40px rgba(161, 21, 21, 0.25);
  }

  .logo-frame {
    width: 152px;
    height: 152px;
  }

  .brand__name {
    font-size: 2.6rem;
  }

  .chain {
    left: clamp(24px, 6vw, 96px);
    right: clamp(24px, 6vw, 96px);
  }
}

/* -------------------------------------------------------------------------
 * ≥ 1440px – große Desktops: mehr Luft, Ketten wandern weiter nach außen
 * ---------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .chain {
    left: clamp(48px, 9vw, 180px);
    right: clamp(48px, 9vw, 180px);
    opacity: 0.65;
  }
}

/* -------------------------------------------------------------------------
 * Kurze Viewports (z. B. Smartphone im Querformat) -> Karte kompakter
 * ---------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .card {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
  }

  .logo-frame {
    width: 88px;
    height: 88px;
  }

  .brand {
    margin-bottom: var(--space-3);
  }
}

/* -------------------------------------------------------------------------
 * Sehr schmale Geräte (< 340px) -> Innenabstände weiter reduzieren
 * ---------------------------------------------------------------------- */
@media (max-width: 340px) {
  .card {
    padding: var(--space-5) var(--space-3) var(--space-4);
  }

  .btn {
    padding: var(--space-2) var(--space-3);
  }
}