/*
 * serenya-responsive.css — CMS (Serenya): Tablet & Phone
 * Phone ≤767px · Tablet 768–1023px · Desktop ≥1024px
 * Lädt nach serenya.css
 */

/* ── Mobile: kein Sidebar-Resize ───────────────────────────────── */
@media (max-width: 1023px) {
  .sb-resizer {
    display: none !important;
  }
}

/* ── Off-Canvas Sidebar (Tablet + Phone) ───────────────────────── */
.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10020;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sb-menu-btn {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 10025;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: rgba(20, 20, 20, 0.92);
  color: var(--o);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.sb-menu-btn:hover {
  border-color: rgba(255, 107, 0, 0.45);
  background: rgba(255, 107, 0, 0.08);
}

.sb-menu-ico,
.sb-menu-ico::before,
.sb-menu-ico::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
}

.sb-menu-ico::before,
.sb-menu-ico::after {
  content: '';
  position: absolute;
  left: 0;
}

.sb-menu-ico::before {
  top: -6px;
}

.sb-menu-ico::after {
  top: 6px;
}

@media (max-width: 1023px) {
  .sb-menu-btn {
    display: flex;
  }

  .sb-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ez, cubic-bezier(0.16, 1, 0.3, 1));
  }

  body.nx-serenya.sb-open .sb-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  #sb {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10021;
    width: min(300px, 88vw) !important;
    max-width: min(300px, 88vw);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
    transform: translate3d(-102%, 0, 0);
    transition: transform 0.32s var(--ez, cubic-bezier(0.16, 1, 0.3, 1));
  }

  body.nx-serenya.sb-open #sb {
    transform: translate3d(0, 0, 0);
  }

  #main {
    padding-top: 58px;
  }

  /* Vollbreite Inhalt auf schmalen Screens */
  .pg {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .ph {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pa {
    flex-wrap: wrap;
  }

  /*
   * DE/EN- und Form-Grids: serenya.html + serenya-main.js nutzen viele
   * style="display:grid;grid-template-columns:1fr 1fr;…" — auf Tablet/Phone
   * untereinander statt zwei schmalen Spalten.
   */
  body.nx-serenya #main .fg,
  body.nx-serenya #main .fg.t3 {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:1fr 1fr;'],
  body.nx-serenya #main [style*='grid-template-columns: 1fr 1fr;'] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:1fr 1fr 1fr;'],
  body.nx-serenya #main [style*='grid-template-columns: 1fr 1fr 1fr;'] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:repeat(3,1fr)'] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:160px 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:auto 1fr;'] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:200px 1fr'] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main .rte-wrap {
    min-width: 0;
    width: 100%;
  }

  body.nx-serenya #main .ord-modal-grid {
    grid-template-columns: 1fr !important;
  }

  /*
   * Kachel-Zeilen (Commissions, Lizenzen, Studio-Subs, KV, …):
   * Inline grid-template-columns mit vielen Spalten — auf schmalen Screens stapeln,
   * damit nichts rechts aus der Karte ragt (statt horizontal scrollen).
   */
  body.nx-serenya #main .tile-row {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    overflow-x: visible;
    min-width: 0;
  }

  body.nx-serenya #main .tile-row > * {
    min-width: 0;
  }

  body.nx-serenya #main .tile-row > button:last-child {
    justify-self: start;
  }

  /* Cursor-Tab: Liste / Vorschau stapeln */
  .nx-cms-cursor-split {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .nx-cms-cursor-frame-wrap {
    min-height: min(260px, 42vh) !important;
    max-height: 55vh;
  }

  #tab-cursor .nx-cms-cursor-left > div:first-child,
  #tab-cursor .nx-cms-cursor-right > div:first-child {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Rechtstexte: DE/EN untereinander, Kopfzeile umbrechen */
  .nx-cms-legal-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #tab-legal-imp .ph,
  #tab-legal-agb .ph,
  #tab-legal-ds .ph {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #tab-legal-imp .pa,
  #tab-legal-agb .pa,
  #tab-legal-ds .pa {
    flex-wrap: wrap;
    width: 100%;
  }

  .legal-para-row {
    flex-wrap: wrap;
  }

  .legal-in-label {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  #tab-cursor .nx-cms-cursor-left {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
  }

  #tab-cursor .nx-cms-cursor-right {
    padding-left: 0 !important;
    padding-top: 16px !important;
  }

  body.nx-serenya #main [style*='grid-template-columns:180px 1fr 1fr 120px'] {
    grid-template-columns: 1fr !important;
  }

  /* Texte → Hobbies: eine Spalte, DE/EN untereinander */
  #hobbiesEditor .hb-row.hb-row-hobby {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #hobbiesEditor .hb-row.hb-row-hobby .hb-lang-cols {
    grid-template-columns: 1fr !important;
  }

  #hobbiesEditor .hb-icon-tools {
    flex-direction: column;
    align-items: stretch !important;
  }

  #hobbiesEditor .hb-icon-tools label {
    text-align: center;
  }

  #hobbiesEditor .hb-row.hb-row-hobby .hb-row-del {
    width: 100%;
    margin-top: 4px;
  }

  /* Icons-Seite: Karten nicht 4–5 nebeneinander quetschen */
  #pg-icons .ig {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  }

  /*
   * Shop-Verwaltung (#pg-shop): Inline-Grids in Karten (Hub, Rechnungen, …)
   * explizit auf eine Spalte — erhöht Spezifität falls andere Regeln nicht greifen.
   */
  body.nx-serenya #main #pg-shop .card[style*="grid-template-columns:1fr 1fr"],
  body.nx-serenya #main #pg-shop .card [style*="grid-template-columns:1fr 1fr"],
  body.nx-serenya #main #pg-shop .card[style*="grid-template-columns: 1fr 1fr"],
  body.nx-serenya #main #pg-shop .card [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  body.nx-serenya #main #pg-shop .card[style*="grid-template-columns:1fr 1fr 1fr"],
  body.nx-serenya #main #pg-shop .card [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 1024px) {
  body.nx-serenya.sb-open #sb {
    transform: none;
  }

  body.nx-serenya .sb-backdrop {
    display: none !important;
  }
}

/* ── Tablet: weniger Padding, KPI 2×2 ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg {
    padding: 32px 28px;
  }

  .srow,
  .srow4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rev-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ── Phone: eine Spalte, kompakter ──────────────────────────────── */
@media (max-width: 767px) {
  .login-box {
    width: min(100% - 40px, 380px);
    padding: 32px 24px;
  }

  .srow,
  .srow4 {
    grid-template-columns: 1fr;
  }

  .rev-kpi-row {
    grid-template-columns: 1fr;
  }

  .rev-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .fg,
  .fg.t3 {
    grid-template-columns: 1fr;
  }

  .color-grid {
    grid-template-columns: 1fr;
  }

  .tp-cols {
    grid-template-columns: 1fr;
  }

  .crop-body {
    grid-template-columns: 1fr !important;
    overflow-y: auto;
  }

  .crop-box {
    height: auto;
    min-height: 60vh;
    max-height: none;
  }

  #tw {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .toast {
    max-width: none;
  }

  .sec-tabs {
    flex-wrap: wrap;
    gap: 4px 10px;
    row-gap: 8px;
  }

  .sec-tab {
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  /*
   * Shop: Produktliste — Flex-Zeile wird zu schmal; Inhalt untereinander.
   * DOM: Ziehen | Bild | Titelblock | Preis/Status | Bearbeiten
   */
  body.nx-serenya #main #pg-shop #shopProdList > .card[data-prod-id] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.nx-serenya #main #pg-shop #shopProdList > .card[data-prod-id] > div:nth-child(3) {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  body.nx-serenya #main #pg-shop #shopProdList > .card[data-prod-id] > div:nth-child(4) {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px 16px;
    width: 100%;
    text-align: left !important;
  }

  body.nx-serenya #main #pg-shop #shopProdList > .card[data-prod-id] > .btn {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /*
   * Shop: Rabattcodes — erste Spalte volle Breite, Rest umbrechen (Buttons bleiben erreichbar).
   */
  body.nx-serenya #main #pg-shop #shopDiscountList > .card {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.nx-serenya #main #pg-shop #shopDiscountList > .card > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  body.nx-serenya #main #pg-shop #shopDiscountList > .card > .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    box-sizing: border-box;
  }

  /* Shop-Panel: volle nutzbare Breite für Formulare */
  body.nx-serenya #main #pg-shop #shop-settings > div[style*="max-width:600px"],
  body.nx-serenya #main #pg-shop #shop-hub > div[style*="max-width:920px"] {
    max-width: 100% !important;
  }

  /* Druckereien: Kopfzeile nicht in einer gequetschten Flex-Zeile */
  body.nx-serenya #main #pg-shop #shopPrinterList .card > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.nx-serenya #main #pg-shop #shopPrinterList .card > div:first-child > div:last-child {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .tbl th,
  .tbl td {
    padding: 8px 8px;
    font-size: 0.8rem;
  }

  #mod {
    padding: 16px;
    align-items: flex-end;
  }

  .mb {
    max-height: 92dvh;
    border-radius: 4px 4px 0 0;
  }

  .pt {
    font-size: 1.45rem;
  }
}

/* ── Lore / Page-Builder Overlays: stapeln auf schmal ──────────── */
@media (max-width: 1023px) {
  #loreOverlay.on {
    flex-direction: column;
  }

  #loreSidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 38vh;
    min-height: 180px;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  #loreMain {
    flex: 1;
    min-height: 0;
  }

  #pbOverlay.on {
    flex-direction: column;
  }

  #pbSidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40vh;
    min-height: 200px;
    max-height: 48vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #pbMain {
    min-height: 0;
    flex: 1;
  }

  #pbResizeHandle {
    display: none;
  }

  .pb-sections {
    padding-bottom: 24px;
  }

  .di-split,
  .pb-split,
  .di-editorial,
  .pb-editorial,
  .di-text2,
  .pb-text2,
  .di-text3,
  .pb-text3,
  .di-img-lr,
  .pb-lr {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .di-framed,
  .pb-editorial-text {
    padding: 24px 5vw !important;
  }
}

@media (max-width: 767px) {
  .pb-hero-preview {
    height: 36vh;
    min-height: 200px;
  }

  .pb-full-img,
  .di-full {
    height: 42vh !important;
    min-height: 200px;
  }
}