/*
 * responsive.css — Nexeth Mobile Styles
 * ─────────────────────────────────────────────────────────────────────
 * Ausschließlich additive Overrides für kleine Bildschirme.
 * Bestehende Styles bleiben unberührt.
 *
 * Breakpoints (Projekt-weit, siehe css/nx-breakpoints.css):
 *   ≤767px  Phone · 768–1023px Tablet · ≥1024px Desktop
 *   Zusätzlich hier: ≤429px sehr kleine Phones (Nav-Links aus)
 *
 * Struktur:
 *   1. Globale Mobile-Basis (≤767px)
 *   2. Navigation
 *   3. Hero / Hello-Screen
 *   4. Galerie-Panels (Horizontal-Scroll) & Haupt-Galerie
 *   5. About-Bereich
 *   6. Commission-Bereich
 *   7. Shop-Slider (s-dec)
 *   8. Say-Hi / Footer
 *   8b. Checkout-Overlay (Anfrage-Formular, außerhalb #main)
 *   9. Wort-Umbruch-Fixes
 *  10. Kleine Extras (375–429px)
 * ─────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════
   1. GLOBALE MOBILE-BASIS (≤767px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Abschnitte: Padding reduzieren */
  .s {
    padding-left:  20px;
    padding-right: 20px;
  }

  .s-hello {
    padding: 0 20px;
  }

  /* Horizontale Überlappungen verhindern */
  body {
    overflow-x: hidden;
  }

  /* Dekorative Floating-Texte auf Mobile ausblenden */
  .wt {
    display: none !important;
  }

  /* Para-Shapes dezenter auf Mobile */
  .para-shape {
    opacity: .04 !important;
  }

}


/* ══════════════════════════════════════════════════════════════════
   2. NAVIGATION
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  #nav {
    padding: 18px 20px;
  }

  /* Nav-Links auf Mobile: scrollt horizontal oder versteckt */
  .n-links {
    gap: 20px;
    margin-right: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Verhindert Layout-Sprünge */
    flex-shrink: 1;
    min-width: 0;
  }
  .n-links::-webkit-scrollbar { display: none; }

  .n-a {
    font-size: .6rem;
    letter-spacing: .14em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .n-logo {
    font-size: .7rem;
    letter-spacing: .25em;
    flex-shrink: 0;
  }

  #langBtn {
    flex-shrink: 0;
  }

}

/* Extra-klein: Nav-Links verstecken */
@media (max-width: 429px) {

  .n-links {
    display: none;
  }

  /* Hamburger-Platzhalter (falls später implementiert) */
  #nav {
    justify-content: space-between;
  }

}


/* ══════════════════════════════════════════════════════════════════
   3. HERO / HELLO-SCREEN
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .s-hello {
    min-height: 100svh; /* safe viewport height */
    align-items: flex-end;
    padding-bottom: 10vh;
  }

  .hello-body {
    padding-top: 0;
  }

  /* Hero-Titel: kleinere Schrift auf Mobile */
  .h-line {
    font-size: clamp(3rem, 14vw, 5.5rem) !important;
    letter-spacing: -.025em;
  }
  .h-line.acc {
    font-size: clamp(3.5rem, 16vw, 6rem) !important;
  }

  .h-tag {
    font-size: .52rem;
    letter-spacing: .35em;
    margin-bottom: 18px;
  }

  /* Hero-Stage (3D-Boden) ausblenden — nicht .h-panel global: #s-hscroll-Reel nutzt dieselbe Klasse */
  .hello-stage,
  .hello-floor {
    display: none;
  }

  /* Floating-Text-Elemente im Hero */
  .ft1, .ft2, .ft3, .ft4 {
    display: none;
  }

  /* H-Panels-Wrap (Horizontal-Leiste) */
  .h-panels {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    margin: 0 -20px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .h-panels::-webkit-scrollbar { display: none; }

  .h-panel {
    display: block;     /* wieder einblenden für die Scroll-Leiste */
    width:  56vw;
    height: 24vw;
    flex-shrink: 0;
  }

  /* Horizontale Bild-Reel (#s-hscroll): genug Höhe, Panels lesbar */
  .s-hscroll {
    min-height: 180px;
  }

  .s-hscroll .reel-wrap {
    height: auto;
    min-height: 180px;
    max-height: 38vh;
  }

  .s-hscroll .h-strip {
    height: 34vw !important;
    min-height: 160px;
    max-height: 220px;
    align-items: stretch;
  }

  .s-hscroll .h-panel {
    width: 52vw !important;
    min-width: 200px;
    height: 100% !important;
    min-height: 140px;
  }

}

@media (max-width: 429px) {

  .h-line {
    font-size: clamp(2.6rem, 13vw, 4rem) !important;
  }
  .h-line.acc {
    font-size: clamp(3rem, 15vw, 5rem) !important;
  }

}


/* ══════════════════════════════════════════════════════════════════
   4. GALERIE-PANELS & HAUPT-GALERIE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Haupt-Galerie: 1 Spalte statt Grid */
  #world {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: unset !important;
    gap: 2px;
  }

  .gi {
    width: 100%;
    height: 56vw;
    min-height: 200px;
  }

  /* Erstes Item: nicht mehr volle Breite nötig */
  .gi:first-child {
    grid-column: unset;
    height: 60vw;
  }

  /* Overlay immer etwas sichtbar auf Mobile */
  .gi-ov {
    opacity: .65;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 60%);
  }

  .gi-cap {
    font-size: .62rem;
    letter-spacing: .15em;
  }

}

@media (max-width: 429px) {

  .gi {
    height: 68vw;
  }

  .gi:first-child {
    height: 72vw;
  }

}


/* ══════════════════════════════════════════════════════════════════
   5. ABOUT-BEREICH (s-read) + SKILLS
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Index: About — zweispaltiges Grid → Text + Bild untereinander */
  .s-read {
    padding: 72px 20px !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  .read-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    width: 100%;
    max-width: 100%;
  }

  .r-num {
    margin-bottom: 20px;
  }

  .r-h {
    font-size: clamp(2rem, 9vw, 3.4rem) !important;
    line-height: 0.95 !important;
    transform: none !important;
    margin-bottom: 24px;
  }

  .r-h em {
    font-size: clamp(2.3rem, 10vw, 3.8rem) !important;
  }

  .r-p {
    max-width: 100% !important;
  }

  .r-right {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .r-frame {
    transform: none !important;
  }

  .r-shadow {
    top: 14px;
    left: 14px;
  }

  /* Hobby-Icons: erzwingt 4 nebeneinander (kein Flex-Wrap 5+3 durch ältere/cached Styles) */
  #s-read #hobbiesRow.r-hobbies,
  #s-read .r-hobbies {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px 8px;
    box-sizing: border-box;
  }

  .r-hobby {
    font-size: 0.48rem;
    letter-spacing: 0.14em;
  }

  /* Icon-Größe (JS setzt 52px inline) — etwas kleiner = 4 Spalten lesbarer */
  #s-read .r-hobby > div:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
  }

  #s-read .r-hobby svg {
    width: 44px !important;
    height: 44px !important;
  }

  #s-read .r-hobby img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain;
  }

  /* Skills: eine Spalte, Headline ohne 3D-Overflow */
  .s-skills {
    padding: 72px 20px !important;
  }

  .skills-head {
    margin-bottom: 40px;
  }

  .skills-h {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    line-height: 0.92 !important;
    transform: none !important;
  }

  .skills-grid {
    grid-template-columns: 1fr !important;
    gap: 32px 0 !important;
  }

  /* Skill-Bars */
  .skill-item {
    margin-bottom: 0;
  }

  .skill-pct {
    font-size: clamp(1.5rem, 7vw, 2.6rem) !important;
  }

  /* Legacy-Klassen (falls andere Templates) */
  .s-about {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-h,
  .ab-h {
    font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
    line-height: .9;
  }

  .about-body,
  .ab-body {
    font-size: .85rem;
    line-height: 1.8;
  }

}


/* ══════════════════════════════════════════════════════════════════
   6. COMMISSION-BEREICH
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Commission-Header */
  .comm-h {
    font-size: clamp(2.4rem, 10vw, 4rem) !important;
    line-height: .92;
    transform: none !important; /* perspective/rotateX erzeugt oft seitlichen Overflow */
    overflow-wrap: break-word;
  }

  .comm-sub {
    font-size: .82rem;
    max-width: 100%;
  }

  .comm-head {
    margin-bottom: 40px;
  }

  /* Kategorie-Grid: 2 Spalten */
  .comm-cats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap:   2px;
    margin-left:  -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }

  /*
   * Produkt-/Detail-Kacheln (Schritt 2–4, ohne Hintergrundbild): einspaltig —
   * nicht verwechseln mit .comm-cats (Commission-Typ mit Bildern): bleibt 2-spaltig.
   */
  .comm-grid {
    grid-template-columns: 1fr !important;
    gap: 3px;
  }
  .comm-grid.cols4 {
    grid-template-columns: 1fr !important;
  }
  .comm-grid.cols2 {
    grid-template-columns: 1fr !important;
  }

  /* Kategorien: Höhe anpassen */
  .comm-cat {
    height: 42vw;
  }

  /* Commission-Grid full-bleed */
  .comm-grid-full {
    margin-left:  -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }

  /* Kacheln: genug Luft zum Rand (Text nicht am Rand kleben) */
  .comm-tile {
    padding: 24px 22px 22px !important;
  }

  .comm-tile.sm {
    padding: 20px 18px 18px !important;
  }

  /* Step-Labels */
  .comm-step-lbl {
    font-size: .48rem;
    letter-spacing: .3em;
  }

  /* KV Basis-Tiles */
  .kv-base-tile-body {
    padding: 18px 22px;
    gap: 12px;
  }

  /* Breakdown-Rows */
  .breakdown-row {
    font-size: .75rem;
  }

  /* Summary / Breakdown: gleiche Außenränder wie .s (20px), kein seitlicher Scroll */
  #commSummary,
  #commBreakdown {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    box-sizing: border-box;
  }

  #commSummary.vis {
    flex-direction: column;
    align-items: stretch !important;
    gap: 20px;
    padding: 18px 20px !important;
  }

  #commSummary .sum-left,
  #commSummary .sum-right {
    min-width: 0;
  }

  .sum-price {
    font-size: clamp(1.15rem, 6vw, 1.75rem) !important;
    line-height: 1.1;
  }

  .sum-right {
    align-items: flex-start !important;
    width: 100%;
  }

  .breakdown-row {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px 20px !important;
    align-items: flex-start !important;
  }

  .breakdown-label {
    flex: 1 1 200px;
    min-width: 0;
    word-break: break-word;
  }

  .breakdown-price {
    flex-shrink: 0;
    margin-left: auto;
  }

  .bd-sub-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 20px 10px 28px !important;
  }

  /* Kontaktformular nach Anfrage */
  .comm-form-grid {
    grid-template-columns: 1fr !important;
    gap: 8px 0 !important;
  }

  #commFormBlock {
    padding: 22px 16px !important;
  }

  .cf-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Rechte / Zahlung — 4 Spalten → stapeln */
  .comm-terms-bar.vis {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  .cterm {
    padding: 24px 22px !important;
  }

  /* Patreon / Gumroad untereinander */
  .support-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .support-tile {
    min-height: 0;
    padding: 32px 22px !important;
  }

  /* Key-Visual-Basis: Kachel nicht horizontal quetschen */
  .kv-base-tile {
    flex-direction: column;
    align-items: stretch;
  }

  .kv-base-tile-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 22px !important;
    gap: 12px !important;
  }

  .kv-base-tile-qty {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-direction: row;
  }

  .kv-count-ctrl {
    flex-direction: row !important;
    height: auto !important;
    min-height: 44px;
  }

  .kv-count-btn:first-child {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, .08);
    flex: 1;
  }

  .kv-count-btn {
    flex: 1;
  }

  /* Pro-Artwork-Konfiguration */
  .kv-artwork-grid {
    grid-template-columns: 1fr !important;
  }

  .kv-artwork-tile-body {
    grid-template-columns: 1fr !important;
    padding: 18px 22px 22px !important;
  }

  .kv-artwork-tile-head {
    padding: 22px 22px 16px !important;
  }

  .kv-atile-chars {
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }

  .kv-atile-lw {
    padding-left: 0 !important;
    padding-top: 12px;
  }

  /* Sektion: horizontales Überlaufen vermeiden */
  #s-comm {
    min-width: 0;
    overflow-x: clip;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /*
   * Step-Grids: index.css zieht mit -8vw full-bleed — auf Phone soll der Inhalt
   * im Sektions-Padding bleiben (sichtbarer Rand zum Viewport).
   * Spaltenanzahl: weiter über .comm-grid { 1fr } (Abschnitt oben).
   */
  #commStep2 .comm-grid,
  #commStep3 .comm-grid,
  #commStep4 .comm-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #commStep2 .comm-tile .comm-tile-price,
  #commStep3 .comm-tile .comm-tile-price,
  #commStep4 .comm-tile .comm-tile-price {
    font-size: clamp(0.92rem, 5.5vw, 1.35rem) !important;
    line-height: 1.15;
    word-break: break-word;
  }
  #commStep2 .comm-tile .comm-tile-name,
  #commStep3 .comm-tile .comm-tile-name,
  #commStep4 .comm-tile .comm-tile-name {
    font-size: 0.9rem !important;
    line-height: 1.3;
  }
  #commStep2 .comm-tile .comm-tile-tag,
  #commStep3 .comm-tile .comm-tile-tag,
  #commStep4 .comm-tile .comm-tile-tag {
    font-size: 0.5rem !important;
    letter-spacing: 0.22em !important;
  }
  #commStep2 .comm-tile .comm-tile-inc,
  #commStep3 .comm-tile .comm-tile-inc,
  #commStep4 .comm-tile .comm-tile-inc {
    font-size: 0.62rem !important;
    line-height: 1.55;
  }

  /* Dekor-Shapes (große Buchstaben/Linien) können die Scrollbreite sprengen */
  #s-comm .para-shape {
    display: none;
  }

}

@media (max-width: 429px) {

  /* Kommunikation: 1 Spalte */
  .comm-cats {
    grid-template-columns: 1fr 1fr !important;
  }

  .comm-cat {
    height: 50vw;
  }

  .comm-grid {
    grid-template-columns: 1fr !important;
  }

  /* cols4 hat höhere Spezifität als .comm-grid — sonst bleiben 2 Spalten */
  .comm-grid.cols4 {
    grid-template-columns: 1fr !important;
  }

  /* wie ≤767: Produkt-Kacheln einspaltig (nicht .comm-cats) */
  .comm-grid.cols2 {
    grid-template-columns: 1fr !important;
  }

}


/* ══════════════════════════════════════════════════════════════════
   7. SHOP-SLIDER (s-dec)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .s-dec {
    padding: 80px 20px 80px !important;
  }

  /* dec-layout: untereinander */
  .dec-layout {
    grid-template-columns: 1fr !important;
    gap:    32px;
  }

  .dec-h {
    font-size: clamp(2.2rem, 9vw, 4rem) !important;
    transform: none !important;  /* 3D-Effekt deaktivieren */
    margin-bottom: 16px;
  }
  .dec-h strong {
    font-size: clamp(2.8rem, 11vw, 5rem) !important;
  }

  .dec-p {
    font-size: .82rem;
    max-width: 100%;
    margin-bottom: 28px;
  }

  /* Slider: volle Breite */
  .shop-slider-wrap {
    margin-right: -20px !important;
  }

  /* Kacheln: größer auf Mobile */
  .shop-item {
    flex: 0 0 calc(72vw) !important;
  }

}

@media (max-width: 429px) {

  .shop-item {
    flex: 0 0 calc(82vw) !important;
  }

  .shop-info {
    padding: 12px 14px 16px;
  }

  .shop-name {
    font-size: .62rem;
  }

}


/* ══════════════════════════════════════════════════════════════════
   8. SAY HI / CONTACT / FOOTER
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .s-sayhi {
    padding-top:    80px;
    padding-bottom: 80px;
  }

  /* Basis ist CSS-Grid (1fr 1fr) — flex-direction allein wirkt nicht auf Grid */
  .sayhi-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    width: 100%;
    max-width: 100%;
  }

  .sayhi-left,
  .sayhi-right {
    width: 100%;
    min-width: 0;
  }

  .sayhi-right .form {
    max-width: 100%;
  }

  /* Say-Hi Headline */
  .sh-h {
    font-size: clamp(3.5rem, 13vw, 6rem) !important;
    line-height: .85;
  }

  .sh-pre {
    font-size: .5rem;
    letter-spacing: .4em;
  }

  .sh-sub {
    font-size: .82rem;
    max-width: 100%;
  }

  /* Footer: untereinander */
  .site-footer {
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    padding-top:    24px;
  }

  .footer-legal-link {
    font-size: .52rem;
    letter-spacing: .2em;
  }

}

@media (max-width: 429px) {

  .sh-h {
    font-size: clamp(3rem, 14vw, 5rem) !important;
  }

}


/* ══════════════════════════════════════════════════════════════════
   8b. CHECKOUT-OVERLAY (liegt außerhalb #main — eigene Grid-/Flex-Fixes)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  #checkoutOverlay > div[style*="max-width"] {
    padding: 28px 16px 56px !important;
    max-width: 100% !important;
  }

  #checkoutOverlay [style*="grid-template-columns:1fr 1fr"],
  #checkoutOverlay [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #checkoutOverlay #coBreakdown > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
  }

  #checkoutOverlay #coBreakdown > div[style*="display:flex"] > span:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  #checkoutOverlay #coBreakdown > div[style*="display:flex"] > span:last-child {
    flex-shrink: 0;
    margin-left: auto;
  }

  #checkoutOverlay > div[style*="max-width"] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  #checkoutOverlay #coClose {
    align-self: flex-end;
  }

}


/* ══════════════════════════════════════════════════════════════════
   9. WORT-UMBRUCH-FIXES
   Verhindert überlaufende Texte auf engen Bildschirmen.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Allgemeiner Schutz: lange Wörter umbrechen */
  p, li, .comm-sub, .dec-p, .sh-sub, .about-body, .r-p, .skill-desc {
    overflow-wrap:      break-word;
    word-wrap:          break-word;     /* Legacy IE */
    word-break:         break-word;
    hyphens:            auto;
    -webkit-hyphens:    auto;
  }

  /* E-Mail-Adressen und URLs umbrechen */
  a[href^="mailto:"],
  a[href^="http"],
  a[href^="https"] {
    word-break: break-all;
  }

  /* Überlange Labels kürzen */
  .comm-pre, .dec-n, .h-tag,
  .comm-step-lbl, .shop-badge {
    overflow:     hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }

  /* Preise und Zahlen: kein Umbrechen */
  .shop-price, .dec-price,
  .breakdown-total, .kv-price {
    white-space: nowrap;
  }

}

/* Spezielle Fixes für xs (≤374px) */
@media (max-width: 374px) {

  /* Letter-Spacing reduzieren damit Text nicht abgeschnitten wird */
  .h-tag,
  .comm-pre,
  .dec-n,
  .shop-badge,
  .comm-step-lbl {
    letter-spacing: .18em;
  }

  /* Sehr kleine Schriften etwas größer machen (Mindest-Lesbarkeit) */
  .n-a,
  .footer-legal-link,
  .gi-cap,
  .gi-sub {
    font-size: .6rem;
  }

}


/* ══════════════════════════════════════════════════════════════════
   10. EXTRA-KLEINE DETAILS (375–429px)
══════════════════════════════════════════════════════════════════ */
@media (min-width: 375px) and (max-width: 429px) {

  /* Slider: 1,5 Items sichtbar = gutes Peek-Preview */
  .shop-item {
    flex: 0 0 calc(78vw) !important;
  }

  /* Punkte-Navigation bei wenig Platz */
  .shop-dots {
    gap: 5px;
  }

  .shop-dot {
    width: 18px;
  }
  .shop-dot.on {
    width: 28px;
  }

  /* Commission-Kategorie-Text anpassen */
  .comm-cat-name {
    font-size: .58rem;
  }

}


/* ══════════════════════════════════════════════════════════════════
   Utility-Klassen basierend auf html.bp-* (via responsive.js)
   Nur sichtbar wenn die entsprechende Breakpoint-Klasse gesetzt ist.
══════════════════════════════════════════════════════════════════ */

/* Verstecken auf Mobile */
html.bp-xs  .hide-xs,
html.bp-sm  .hide-sm,
html.bp-md  .hide-md  { display: none !important; }

/* Verstecken ab bestimmter Breite */
html.bp-min-lg .hide-mobile { display: none !important; }

/* Nur auf Mobile anzeigen */
html.bp-min-lg .show-mobile { display: none !important; }

/* Nützliche Spacing-Utilities auf Mobile */
html.bp-xs .mt-0-xs,
html.bp-sm .mt-0-xs { margin-top: 0 !important; }

html.bp-xs .px-sm-xs,
html.bp-sm .px-sm-xs { padding-left: 20px !important; padding-right: 20px !important; }


/* ══════════════════════════════════════════════════════════════════
   TABLET (768px – 1023px)
   ─────────────────────────────────────────────────────────────────
   Additive Overrides. Bestehende Styles unberührt.
══════════════════════════════════════════════════════════════════ */


/* ── 1. Globale Tablet-Basis ───────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Sektion-Padding reduzieren */
  .s {
    padding-left:  40px;
    padding-right: 40px;
  }

  .s-hello,
  .s-skills,
  .s-comm,
  .s-dec,
  .s-sayhi {
    padding-left:  40px;
    padding-right: 40px;
  }

  /* full-bleed-Flächen neu berechnen */
  .comm-cats,
  .comm-grid-full {
    margin-left:  -40px !important;
    margin-right: -40px !important;
    width: calc(100% + 80px) !important;
  }

}


/* ── 2. Navigation ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  #nav {
    padding: 22px 40px;
  }

  .n-links {
    gap: 24px;
  }

  .n-a {
    font-size: .66rem;
    letter-spacing: .18em;
  }

}


/* ── 3. Hero / Hello-Screen ────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Titel: leicht verkleinert */
  .h-line {
    font-size: clamp(3.8rem, 8.5vw, 8rem) !important;
  }
  .h-line.acc {
    font-size: clamp(4.2rem, 10vw, 9.5rem) !important;
  }

  /* Hero-Panels-Leiste: etwas niedriger */
  .h-panel {
    width:  34vw;
    height: 22vh;
  }

  /* Mehr Abstand nach unten damit Galerie nicht sofort erscheint */
  .s-hello {
    padding-bottom: 8vh;
  }

}


/* ── 4. Galerie-Panels ─────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* #world: 2-spaltiges Grid */
  #world {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Erstes Element: volle Breite */
  .gi:first-child {
    grid-column: 1 / -1;
    height: 52vw;
  }

  .gi {
    height: 48vw;
  }

}


/* ── 5. Skills / About ─────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  .s-skills {
    padding-top:    100px;
    padding-bottom: 100px;
  }

  /* Headline */
  .skills-h {
    font-size: clamp(2.4rem, 5.5vw, 5rem) !important;
    transform: none !important;   /* 3D-Effekt deaktivieren */
  }

  /* Skills-Grid: 2-spaltig */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 48px;
  }

  /* Prozent-Zahlen etwas kleiner */
  .skill-pct {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  }

  .skill-desc {
    font-size: .78rem;
  }

  /* About: Hobby-Icons — 4 pro Zeile (gleiches Raster wie Desktop) */
  #s-read #hobbiesRow.r-hobbies,
  #s-read .r-hobbies {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 100%;
    gap: 18px 14px;
  }

}


/* ── 6. Commission-Bereich ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Headline */
  .comm-h {
    font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
    transform: none !important;
  }

  .comm-sub {
    font-size: .88rem;
  }

  .comm-head {
    margin-bottom: 52px;
  }

  /* Kategorie-Kacheln: 3-spaltig (statt 4) */
  .comm-cats {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Kategorie-Höhe */
  .comm-cat {
    height: 28vw;
  }

  /* Commission-Grid: 3-spaltig */
  .comm-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .comm-grid.cols4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .comm-grid.cols2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Gleicher Rand wie Sektion — kein -8vw-Full-Bleed */
  #commStep2 .comm-grid,
  #commStep3 .comm-grid,
  #commStep4 .comm-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Step 4 (Creator-Lizenz-Staffel): max. 2 Spalten — mehr Luft als 3×3-Raster */
  #commStep4 .comm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #commStep4 .comm-grid.cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* KV Basis-Tiles: zweispaltig */
  #kvBaseGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Konfiguratorbereich: kein overflow nach rechts */
  .kv-base-tile-body {
    padding: 20px 24px;
  }

  /* Textfelder ohne Hintergrundbild: mehr Luft zum Kastenrand (Tablet) */
  .comm-tile {
    padding: 28px 26px 24px !important;
  }

  .comm-tile.sm {
    padding: 22px 22px 18px !important;
  }

  .cterm {
    padding: 28px 26px !important;
  }

  .kv-artwork-tile-head {
    padding: 22px 26px 16px !important;
  }

  .kv-artwork-tile-body {
    padding: 18px 26px 22px !important;
  }

  /* Breakdown-Tabelle: etwas kleiner */
  .breakdown-row {
    font-size: .8rem;
    padding: 14px 24px !important;
  }

  .bd-sub-row {
    padding: 10px 24px 10px 32px !important;
  }

}

/* Breakpoint 768–899px: Commission-Kacheln 2-spaltig */
@media (min-width: 768px) and (max-width: 899px) {

  .comm-cats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .comm-cat {
    height: 38vw;
  }

  .comm-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

}


/* ── 7. Shop-Slider (s-dec) ────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  .s-dec {
    padding-top:    100px;
    padding-bottom: 100px;
  }

  /* dec-layout: untereinander */
  .dec-layout {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  /* Headline 3D deaktivieren */
  .dec-h {
    transform: none !important;
    font-size: clamp(2.4rem, 6vw, 5rem) !important;
  }
  .dec-h strong {
    font-size: clamp(3rem, 7vw, 6rem) !important;
  }

  .dec-p {
    max-width: 480px;
    font-size: .88rem;
  }

  /* Slider: full-bleed auf Tablet */
  .shop-slider-wrap {
    margin-right: -40px !important;
  }

  /* 3 Kacheln sichtbar */
  .shop-item {
    flex: 0 0 calc(33.33% - 3px) !important;
  }

}

/* 768–899px: 2.5 Kacheln */
@media (min-width: 768px) and (max-width: 899px) {

  .shop-item {
    flex: 0 0 calc(46% - 2px) !important;
  }

}


/* ── 8. Say Hi / Contact ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  .s-sayhi {
    padding-top:    100px;
    padding-bottom: 100px;
  }

  /* Zweispaltig bleibt, aber Abstand reduzieren */
  .sayhi-inner {
    gap: 6vw !important;
  }

  /* Headline leicht verkleinern */
  .sh-h {
    font-size: clamp(3.5rem, 7.5vw, 8rem) !important;
    margin-bottom: 32px;
  }
  .sh-h em {
    font-size: clamp(4rem, 9vw, 10rem) !important;
  }

  .sh-sub {
    font-size: .88rem;
    max-width: 100%;
  }

  /* Footer-Zeile anpassen */
  .site-footer {
    gap: 12px;
  }

}


/* ── 9. Schriftgrößen-Korrekturen Tablet ───────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Abschnitts-Nummern */
  .dec-n,
  .comm-pre,
  .skills-pre {
    font-size: .52rem;
    letter-spacing: .38em;
  }

  /* Beschreibungstexte */
  .dec-p,
  .comm-sub {
    font-size: .88rem;
    line-height: 1.85;
  }

  /* Badges & Labels */
  .shop-badge {
    font-size: .44rem;
    padding: 2px 7px;
  }

  .shop-name {
    font-size: .65rem;
  }

  .shop-price {
    font-size: .8rem;
  }

  /* Wort-Umbruch-Schutz für Tablet */
  .comm-h,
  .skills-h,
  .dec-h,
  .sh-h {
    overflow-wrap: break-word;
    word-wrap:     break-word;
  }

}


/* ── 10. Utility-Klassen für Tablet ────────────────────────────── */

/* Verstecken auf Tablet */
html.bp-lg .hide-tablet { display: none !important; }

/* Nur auf Tablet anzeigen */
html.bp-xs  .show-tablet,
html.bp-sm  .show-tablet,
html.bp-md  .show-tablet,
html.bp-xl  .show-tablet,
html.bp-2xl .show-tablet,
html.bp-3xl .show-tablet { display: none !important; }

/* Tablet = exklusiv lg (768–1023px)
   entspricht html.bp-lg laut responsive.js */


/* ══════════════════════════════════════════════════════════════════
   DESKTOP-S (1024px – 1279px)
   ─────────────────────────────────────────────────────────────────
   Engerer Desktop: viele Designs sind für ≥1440px optimiert.
   Dieses Breakpoint korrigiert Überlauf, skaliert Abstände und
   Schriften auf 1024–1279px ohne das Layout zu brechen.
══════════════════════════════════════════════════════════════════ */


/* ── 1. Globale Basis Desktop-S ────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Horizontalen Überlauf verhindern */
  body { overflow-x: hidden; }

  /* Abschnitt-Padding skalieren: 8vw → 6vw */
  .s-hello, .s-skills, .s-comm, .s-dec, .s-sayhi, .s-read {
    padding-left:  6vw;
    padding-right: 6vw;
  }

  /* Full-bleed-Flächen neu berechnen */
  .comm-cats,
  .comm-grid-full {
    margin-left:  -6vw !important;
    margin-right: -6vw !important;
    width: calc(100% + 12vw) !important;
  }

  /* Step-Grids: gleiche -6vw-Kompensation wie Sektions-Padding (index.css nutzt -8vw) */
  #commStep2 .comm-grid,
  #commStep3 .comm-grid,
  #commStep4 .comm-grid {
    margin-left:  -6vw !important;
    margin-right: -6vw !important;
    width: calc(100% + 12vw) !important;
  }

  /* Galerie-Kopf */
  .see-head {
    padding-left:  6vw;
    padding-right: 6vw;
  }

}


/* ── 2. Navigation ─────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  #nav {
    padding: 24px 6vw;
  }

  .n-links {
    gap: 28px;
  }

  .n-a {
    font-size: .68rem;
    letter-spacing: .2em;
  }

  .n-logo {
    font-size: .75rem;
  }

}


/* ── 3. Hero ───────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Titel minimal skalieren */
  .h-line {
    font-size: clamp(4.5rem, 9vw, 9.5rem) !important;
  }
  .h-line.acc {
    font-size: clamp(5rem, 10.5vw, 11rem) !important;
  }

  /* h-panels etwas schmaler */
  .h-panel {
    width:  28vw;
    height: 22vh;
  }
  .h-panel-title {
    font-size: clamp(1rem, 1.6vw, 1.5rem);
  }

}


/* ── 4. Galerie ────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Galerie-Überschrift */
  .see-h {
    font-size: clamp(3rem, 7vw, 8rem) !important;
  }

  /* Galerie-Items: etwas weniger Höhe */
  .gi {
    height: 92vh;
  }

}


/* ── 5. Skills / About ─────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  .s-skills {
    padding-top:    110px;
    padding-bottom: 110px;
  }

  /* Headline skalieren */
  .skills-h {
    font-size: clamp(2.6rem, 5vw, 5.5rem) !important;
  }

  /* Grid: weiterhin 3-spaltig, aber enger */
  .skills-grid {
    gap: 40px 48px;
  }

  .skill-pct {
    font-size: clamp(1.9rem, 3.2vw, 3rem) !important;
  }

  .skill-desc {
    font-size: .8rem;
    line-height: 1.75;
  }

  /* Read-Sektion: Grid-Gap reduzieren */
  .read-grid {
    gap: 6vw;
  }
  .r-p {
    font-size: .88rem;
    line-height: 1.85;
  }
  /* Wie Mobile/Tablet: 4 Spalten → gleiche Rasterlogik (z. B. 8 Hobbies = 4+4) */
  #s-read #hobbiesRow.r-hobbies,
  #s-read .r-hobbies {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 560px;
    gap: 18px 18px;
  }

}


/* ── 6. Commission ─────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Headline */
  .comm-h {
    font-size: clamp(3rem, 6.5vw, 7rem) !important;
  }

  .comm-sub {
    font-size: .9rem;
    max-width: 520px;
  }

  /* Kategorie-Kacheln: 4-spaltig bleibt, Höhe anpassen */
  .comm-cat {
    height: 22vw;
  }

  /* Commission-Grid: 3-spaltig */
  .comm-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .comm-grid.cols4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* KV-Tiles: Abstände */
  .kv-base-tile-body {
    padding: 16px 20px;
    gap:     16px;
  }

}


/* ── 7. Shop-Slider ────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* dec-layout: zweispaltig bleibt, Abstände anpassen */
  .dec-layout {
    gap: 4vw !important;
    grid-template-columns: 1fr 1.6fr !important;
  }

  .dec-h {
    font-size: clamp(2.6rem, 5.5vw, 6rem) !important;
  }
  .dec-h strong {
    font-size: clamp(3rem, 6.5vw, 7.5rem) !important;
  }

  .dec-p {
    font-size: .88rem;
    max-width: 340px;
  }

  /* Slider: 3 Kacheln */
  .shop-item {
    flex: 0 0 calc(33.33% - 2px) !important;
  }

  /* full-bleed Slider */
  .shop-slider-wrap {
    margin-right: -6vw !important;
  }

}


/* ── 8. Say Hi / Footer ────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Zweispaltig, Abstände reduzieren */
  .sayhi-inner {
    gap: 7vw !important;
    max-width: 1100px;
  }

  .sh-h {
    font-size: clamp(4rem, 8.5vw, 11rem) !important;
    margin-bottom: 40px;
  }
  .sh-h em {
    font-size: clamp(4.5rem, 10vw, 13rem) !important;
  }

  .sh-sub {
    font-size: .9rem;
  }

}


/* ── 9. Schriftgrößen Desktop-S ────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Abschnitts-Nummern */
  .dec-n, .comm-pre, .skills-pre {
    font-size: .52rem;
    letter-spacing: .4em;
  }

  /* Sektion-Padding oben/unten leicht reduzieren */
  .s-comm {
    padding-top:    120px;
    padding-bottom: 120px;
  }
  .s-dec {
    padding-top:    120px;
    padding-bottom: 120px;
  }
  .s-sayhi {
    padding-top:    120px;
    padding-bottom: 120px;
  }

  /* Allgemeine Text-Skalierung */
  .dec-p,
  .comm-sub,
  .sh-sub {
    line-height: 1.85;
  }

}


/* ── 10. Utility-Klassen Desktop-S ─────────────────────────────── */

/* Verstecken auf Desktop-S */
html.bp-xl .hide-desktop-s { display: none !important; }

/* Nur auf Desktop-S anzeigen */
html.bp-xs  .show-desktop-s,
html.bp-sm  .show-desktop-s,
html.bp-md  .show-desktop-s,
html.bp-lg  .show-desktop-s,
html.bp-2xl .show-desktop-s,
html.bp-3xl .show-desktop-s { display: none !important; }


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


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

  /* Topbar */
  #topbar {
    padding: 0 20px;
  }
  #shopLogo {
    font-size: .68rem;
    letter-spacing: .25em;
    gap: 7px;
  }
  #shopLogoSub {
    display: none; /* "Shop" ausblenden auf xs */
  }
  #cartBtn {
    font-size: .58rem;
    letter-spacing: .18em;
    gap: 5px;
  }
  #cartCount {
    font-size: .55rem;
    padding: 1px 4px;
  }

  /* Feed-Hero (Fullscreen-Slider) — Typo unten, volle Höhe */
  .feed-hero-mega {
    min-height: 100svh;
  }
  .feed-hero-inner,
  #feedHero {
    min-height: 100svh;
    min-height: 100dvh;
    padding: calc(var(--nav-h) + 20px) 20px clamp(150px, 26vh, 220px);
  }
  #feedHeroTitle {
    font-size: clamp(2.2rem, 10vw, 4rem) !important;
    line-height: .9;
  }
  #feedHeroSub {
    font-size: .72rem;
  }
  .feed-hero-controls {
    bottom: 52px;
  }
  .feed-hero-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

  /* Filter-Leiste — gleiche Glas-Leiste wie Desktop, engerer Rand */
  #feedFilters {
    margin: 0 20px 22px;
    padding: 12px 14px;
    gap: 8px;
  }
  #filterSearch {
    min-width: 100%;
    order: -1; /* Suche zuerst */
    margin-bottom: 6px;
    margin-left: 0;
  }
  #filterSep {
    display: none;
  }
  .flt-btn {
    font-size: .52rem;
    padding: 6px 12px;
    letter-spacing: .2em;
  }

  /* Produkt-Grid */
  #feedGrid {
    padding: 0 20px 60px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  #feedEmpty {
    grid-column: 1 / -1;
  }

  /* Produkt-Karten */
  .prod-card-info {
    padding: 10px 12px 14px;
  }
  .prod-card-name {
    font-size: .72rem;
    letter-spacing: .08em;
  }
  .prod-card-sub {
    font-size: .58rem;
  }
  .prod-card-price {
    font-size: .82rem;
  }
  .prod-ov-buy {
    font-size: .6rem;
    letter-spacing: .2em;
    padding: 7px 0;
  }

  /* Cart-Overlay */
  #cartOverlay {
    width: 100vw; /* Volle Breite auf Mobile */
  }
  #cartHeader {
    padding: 16px 20px;
  }
  #cartItems {
    padding: 16px 20px;
  }
  #cartDiscountRow {
    padding: 12px 20px;
  }
  #cartTotals {
    padding: 12px 20px;
  }
  #cartFooter {
    padding: 16px 20px;
  }

  /* Print-Popup */
  #printPopupInner {
    max-height: 95vh;
  }
  #printPreviewCol {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 16px 20px;
  }
  #printFormatsCol {
    padding: 16px 20px;
  }
  .print-fmt-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }

  /* Unlock-Overlay */
  #unlockOverlay {
    padding: 40px 20px;
  }
  #downloadArea {
    width: 100%;
  }
  .dl-item {
    padding: 14px 16px;
  }

}


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

  #feedGrid {
    grid-template-columns: 1fr; /* 1-spaltig auf sehr kleinen Geräten */
    gap: 12px;
  }

  .prod-card-img .prod-badge {
    font-size: .42rem;
  }

  #printPopupBody {
    flex-direction: column;
  }
  .print-fmt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hero-Info unten links ausblenden */
  #detailHeroInfo {
    display: none !important;
  }

}


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

  #topbar {
    padding: 0 40px;
  }

  .feed-hero-inner,
  #feedHero {
    min-height: 100svh;
    padding: calc(var(--nav-h) + 28px) 40px clamp(160px, 22vh, 240px);
  }

  #feedFilters {
    margin: 0 40px 28px;
    padding: 14px 18px;
  }

  #feedGrid {
    padding: 0 40px 80px;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  /* Detail: Panel-Breite auf Tablet */
  #detailInner {
    grid-template-columns: 1fr min(380px, 44vw) !important;
  }
  #detailInfo {
    padding: calc(var(--nav-h) + 24px) 28px 80px;
  }

  /* Print-Popup: Body anpassen */
  #printPreviewCol {
    width: 200px;
  }

}


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

  #topbar {
    padding: 0 6vw;
  }

  .feed-hero-inner,
  #feedHero {
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--nav-h) + 28px) 6vw clamp(170px, 20vh, 250px);
  }

  #feedFilters {
    margin: 0 6vw 32px;
    padding: 14px 18px;
  }

  #feedGrid {
    padding: 0 6vw 80px;
    gap: 16px;
  }

  /* Detail-Panel etwas schmaler */
  #detailInner {
    grid-template-columns: 1fr min(420px, 38vw) !important;
  }

}

/* ══════════════════════════════════════════════════════════════════
   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;
  }

}