/* ══════════════════════════════════════════════════════════════════
   CUSTOMER.HTML RESPONSIVE — Alle Breakpoints
   ─────────────────────────────────────────────────────────────────
   Additive Overrides, bestehende Styles unberührt.
══════════════════════════════════════════════════════════════════ */


/* ── customer: Globale Mobile-Basis (≤767px) ──────────────────── */
@media (max-width: 767px) {

  /* Auth-Panels */
  #authWrap {
    padding: calc(var(--nav-h) + 24px) 20px 48px;
    align-items: flex-start;
  }
  .auth-panel {
    max-width: 100% !important;
  }
  .auth-logo {
    font-size: 1.5rem;
  }
  .auth-sub {
    font-size: .6rem;
    letter-spacing: .12em;
    margin-bottom: 28px;
  }
  .auth-input {
    padding: 10px 12px;
    font-size: .82rem;
  }
  .auth-btn {
    padding: 13px;
  }

  /* Konto-Bereich */
  #accountWrap {
    padding-top: calc(var(--nav-h) + 24px);
  }
  .acc-inner {
    padding: 0 20px !important;
  }
  .acc-greeting {
    font-size: clamp(1.4rem, 7vw, 2rem);
    margin-bottom: 4px;
  }
  .acc-email {
    font-size: .62rem;
    margin-bottom: 24px;
  }

  /* Tabs */
  .acc-tabs {
    gap: 0;
    margin-bottom: 24px;
  }
  .acc-tab {
    padding: 10px 12px;
    font-size: .5rem;
    letter-spacing: .2em;
  }

  /* Produkte-Grid: 2-spaltig */
  .owned-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .owned-info {
    padding: 8px 10px;
  }
  .owned-name {
    font-size: .72rem;
  }
  .owned-sub {
    font-size: .58rem;
  }
  .owned-actions {
    padding: 7px 10px;
    gap: 4px;
  }
  .owned-dl-btn,
  .owned-view-btn {
    font-size: .5rem;
    padding: 7px 8px;
    letter-spacing: .2em;
  }

  /* Downloads */
  .acc-dl-item {
    padding: 14px 16px;
  }
  .acc-dl-top {
    gap: 10px;
  }
  .acc-dl-name {
    font-size: .78rem;
  }
  .acc-dl-meta,
  .acc-dl-ttl {
    font-size: .6rem;
  }
  .acc-dl-btn {
    padding: 8px 14px;
    font-size: .5rem;
    letter-spacing: .25em;
  }

  /* Bestellungen: Grid ausblenden, Karten stapeln */
  .order-table-header {
    display: none !important;
  }
  .acc-order-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 12px 16px;
  }
  .acc-order-id {
    font-size: .65rem;
    letter-spacing: .04em;
  }
  .acc-order-date {
    grid-column: 1;
    font-size: .68rem;
  }
  .acc-order-items {
    grid-column: 1 / -1;
    font-size: .72rem;
  }
  .acc-order-total {
    grid-row: 1;
    grid-column: 2;
    font-size: .85rem;
  }
  .acc-order-status {
    font-size: .48rem;
    padding: 2px 7px;
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
  }
  .acc-order-invoice-btn {
    display: none; /* Rechnungs-Button im Expanded-State anzeigen */
  }
  .order-detail-row {
    padding: 12px 16px;
  }
  .order-timeline {
    flex-wrap: wrap;
    gap: 4px;
  }
  .ot-step {
    flex: 0 0 auto;
    min-width: 60px;
    font-size: .44rem;
    letter-spacing: .14em;
    padding: 6px 8px;
  }

  /* Bewertungen */
  .rev-card {
    padding: 16px 16px;
  }
  .rev-card-top {
    gap: 10px;
  }
  .star-btn {
    font-size: 1.2rem;
    padding: 0 3px;
  }
  .rev-submit-btn {
    padding: 8px 16px;
    font-size: .5rem;
    letter-spacing: .25em;
  }

  /* Profil */
  .acc-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .acc-profile-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
  .acc-section-title {
    font-size: .5rem;
    letter-spacing: .3em;
  }

  /* Topbar */
  #topbar {
    padding: 0 20px;
  }
  #tbLogo a {
    font-size: .9rem;
  }
  #tbShopLink {
    font-size: .5rem;
    letter-spacing: .2em;
  }
  #btnLogout {
    font-size: .5rem;
    letter-spacing: .2em;
  }

  /* Passwort-Stärke-Bar */
  #pwStrengthBar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
  }

}


/* ── customer: 375–429px ──────────────────────────────────────── */
@media (max-width: 429px) {

  .acc-tab {
    padding: 10px 9px;
    font-size: .45rem;
    letter-spacing: .14em;
  }

  .owned-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px;
  }
  .owned-stamp {
    font-size: .42rem;
    padding: 2px 6px;
  }
  .owned-type {
    font-size: .42rem;
    padding: 2px 5px;
  }

  .acc-dl-btn,
  .acc-dl-resume-btn {
    padding: 7px 10px;
    font-size: .48rem;
  }

  /* Auth-Banner im Erstlogin */
  .auth-banner {
    font-size: .7rem;
    padding: 12px 14px;
  }

}


/* ── customer: Tablet (768–1023px) ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  .acc-inner {
    padding: 0 40px !important;
  }

  .acc-greeting {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  /* Tabs: etwas mehr Platz */
  .acc-tab {
    padding: 11px 16px;
    font-size: .54rem;
  }

  /* Produkte: 3-spaltig */
  .owned-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }

  /* Bestellungen: verkürzte Spalten */
  .acc-order-row {
    grid-template-columns: 120px 1fr 100px 100px 80px 70px !important;
  }

  /* Bewertungen: Sterne größer */
  .star-btn {
    font-size: 1.3rem;
  }

}


/* ── customer: Desktop-S (1024–1279px) ───────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  .acc-inner {
    padding: 0 6vw !important;
    max-width: 100%;
  }

  /* Produkte: 4-spaltig */
  .owned-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

}