/* ============================================================
   Global Styles for SCHUL-SHIRT.COM (bereinigt + modernisiert)
   ============================================================ */

/* --- Design Tokens --- */
:root{
  --brand:#007bc4;
  --brand-dark:#005f96;
  --ink:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --surface:#ffffff;
  --surface-alt:#f8f9fb;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --maxw:1600px;

  /* Theming via Inline-Variables (pro Schule) */
  --header-bg:#111111;
  --header-fg:#ffffff;
  --footer-bg:#111111;
  --footer-fg:#ffffff;
}

/* --- Reset & Base --- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;color:var(--ink);background:var(--surface-alt);
}
a{color:inherit;text-decoration:none}
a:focus{outline:2px solid var(--brand);outline-offset:2px}
button{cursor:pointer;font-family:inherit}

/* --- Utilities --- */
.container{max-width:var(--maxw);margin:2rem auto;padding:0 1rem}
.maxw{max-width:var(--maxw);margin:0 auto}
.flex{display:flex;gap:1rem;align-items:center}
.between{justify-content:space-between}

.container{
  max-width:var(--maxw);
  margin:2rem auto;
  padding:0 1.5rem; /* = gleicher Wert wie gap im Grid */
}


/* ============================================================
   Header & Navigation – modern
   ============================================================ */
.site-header.nav-modern{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--header-bg);
  color:var(--header-fg);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:visible; /* wichtig, damit das Logo nach unten überlappen darf */
}

.nav-modern .nav-shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding:.6rem 1rem;
  display:flex;
  align-items:center;          /* Basis: alles mittig in der Leiste */
  justify-content:space-between;
  gap:.75rem;
}

.nav-modern .brand{
  position:relative;
  display:inline-flex;
  align-items:center;          /* Logo + Schulname mittig */
  gap:.6rem;
  color:var(--header-fg);
  text-decoration:none;
  z-index:21;
}

/* Standard: Kompaktes Logo in der Headerleiste (alle Geräte) */
.nav-modern .brand .logo{
  display:block;
  height:48px;                 /* Höhe der Headerleiste */
  width:auto;
  max-width:100%;
  object-fit:contain;
  margin:0;                    /* keine Überlappung */
  pointer-events:none;
}

.nav-modern .brand-name{
  font-weight:700;
  letter-spacing:.2px;
  opacity:.95;
  font-size:1.25rem;
  line-height:1.2;
  white-space:nowrap;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

.nav-modern .nav-links{display:none}

/* Desktop: Großes, überlappendes Logo nur in Untershops */
@media (min-width:980px){
  body:not(.home) .nav-modern .nav-shell{
    align-items:flex-end;
  }

  body:not(.home) .nav-modern .brand .logo{
    width:400px;
    height:400px;
    margin-top:-140px;   /* Logo nach oben ziehen */
    margin-bottom:-160px;/* Überlappung nach unten */
  }
}

@media (min-width:980px){
  .nav-modern .nav-links{
    display:inline-flex;
    gap:.9rem;
    align-items:center;
  }
  .nav-modern .nav-links a{
    color:var(--header-fg);
    opacity:.9;
    padding:.4rem .6rem;
    border-radius:8px;
    transition:opacity .15s ease,background .15s ease;
  }
  .nav-modern .nav-links a:hover{opacity:1;background:rgba(255,255,255,.08)}
  .nav-modern .nav-links a.login{color:#dbeafe}
  .nav-modern .nav-links a.logout{color:#fecaca}
}

.nav-modern .nav-actions{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  justify-content:end;
}
.nav-modern .cart-link{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--header-fg);padding:.25rem .45rem;border-radius:10px;
  transition:background .15s ease;
}
.nav-modern .cart-link:hover{background:rgba(255,255,255,.08)}
.nav-modern .cart-link .badge,
#cart-count{
  display:inline-flex;min-width:18px;height:18px;border-radius:999px;
  font-size:11px;line-height:18px;justify-content:center;align-items:center;
  background:#ef4444;color:#fff;padding:0 6px;font-weight:700;
  box-shadow:0 0 0 2px rgba(17,24,39,.9);
}
#cart-count{position:absolute;top:-6px;right:0;transform:translateX(50%)}

/* Burger */
.nav-modern .nav-toggle{
  display:inline-flex;flex-direction:column;gap:4px;width:38px;height:32px;
  border:1px solid rgba(255,255,255,.15);border-radius:10px;background:transparent;color:var(--header-fg)
}
.nav-modern .nav-toggle .bar{height:2px;width:20px;background:var(--header-fg);border-radius:2px;margin:0 auto}
@media (min-width:980px){.nav-modern .nav-toggle{display:none}}

/* Mobile Panel */
.nav-modern .nav-mobile{
  display:none;flex-direction:column;gap:.5rem;padding:.6rem 1rem 1rem;
  border-top:1px solid rgba(255,255,255,.06);background:rgba(17,24,39,.95)
}
.nav-modern .nav-mobile a{
  color:#e5e7eb;padding:.6rem .4rem;border-radius:8px;
  display:flex;align-items:center;gap:.5rem;justify-content:space-between;
}
.nav-modern .nav-mobile a:hover{background:rgba(255,255,255,.06)}
.nav-modern .nav-mobile .badge{transform:translateY(-1px)}
.nav-modern .nav-mobile.open{display:flex}

/* ============================================================
   Start-/Auth-Seiten – gemeinsamer Vollbild-Background
   ============================================================ */
body:is(.home,.auth){
  background:url('/assets/img/background.png') center/cover no-repeat fixed;
  min-height:100vh;overflow:hidden;
}
body.home main.container{max-width:none;margin:0;padding:0}
body.auth main.container{max-width:none;margin:0;padding:0;background:transparent}

/* Optionaler Hero-Block (zentriert Inhalt) */
.home-hero{
  position:relative;width:100%;min-height:100vh;
  display:flex;
  flex-direction:column;          /* Form untereinander zentriert */
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:transparent;
}
.home-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:0}
.home-hero img{max-width:100%;height:auto}

/* Logo im Hero komplett ausblenden, damit nichts verschoben wird */
.home-hero .hero-logo{
  display:none;
}

/* Card z. B. für Schulauswahl/Login */
.school-chooser{
  position:relative;z-index:1;background:rgba(255,255,255,.92);
  backdrop-filter:blur(3px);border-radius:var(--radius);padding:2rem;
  width:min(92%,540px);box-shadow:var(--shadow);text-align:left;color:var(--ink);
}
.school-chooser h1{margin:0 0 1rem;color:var(--brand);font-size:clamp(1.3rem,3vw,1.8rem)}
.school-chooser input,.school-chooser select{
  width:100%;padding:.85rem 1rem;margin:.4rem 0 1rem;font-size:1rem;
  border:1px solid var(--line);border-radius:.6rem;background:#fff;
}
.school-chooser input:focus,.school-chooser select:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,123,196,.15);outline:none;
}
.school-chooser .btn{
  display:inline-block;background:var(--brand);color:#fff;border:none;
  padding:.9rem 1.4rem;border-radius:.7rem;font-weight:600;
  transition:background .2s ease,transform .08s ease;
}
.school-chooser .btn:hover{background:var(--brand-dark)}
.school-chooser .btn:active{transform:translateY(1px)}

/* ============================================================
   Product Grid & Cards (FRONTEND)
   ============================================================ */

/* Wrapper wie im Template: <div class="product-grid"> */
.product-grid{
  display:grid;
  gap:1.5rem; /* gleicher Abstand zwischen den Kacheln */
  grid-template-columns:repeat(1,minmax(0,1fr)); /* Smartphones: einspaltig */
  padding:0; /* kein zusätzliches Padding mehr */
}

/* Tablet: 2 Spalten */
@media (min-width:768px){
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Desktop: 3 Spalten */
@media (min-width:1024px){
  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Großer Desktop: 4 Spalten */
@media (min-width:1280px){
  .product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.product-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem;transition:transform .15s ease;
  display:flex;
  flex-direction:column;
}
.product-card:hover{transform:translateY(-3px)}

/* Nur das Produktbild in der Karte quadratisch + abgerundet */
.product-card .product-render img.base {
  width: 100%;
  border-radius: .6rem;
  margin-bottom: .5rem;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.product-card h2{margin:.4rem 0 .2rem;font-size:1.05rem}
.product-link{display:block;color:inherit}
.price{font-weight:700;color:var(--brand);margin:.25rem 0}
.product-card .card-cta{color:var(--muted);margin:.1rem 0 0}

/* ============================================================
   NEUES PRODUKTDETAIL-LAYOUT passend zu product_detail.php
   ============================================================ */

.product-detail{
  padding:1.5rem 0 3rem;
}

.product-detail .wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.5rem;
}

/* Breadcrumbs */
.breadcrumbs{
  font-size:.875rem;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  margin-bottom:.75rem;
}
.breadcrumbs a{
  color:var(--brand);
}

/* Titel */
.pd-header{
  margin-bottom:1rem;
}
.pd-title{
  margin:0;
  font-size:1.6rem;
  line-height:1.2;
}

/* Obere Kachel mit Bild + Farbswatches */
.pd-images{
  margin-bottom:1.5rem;
}

.pd-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem;
}

.pd-card-media .pd-media-inner{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
@media(min-width:960px){
  .pd-card-media .pd-media-inner{
    flex-direction:row;
    align-items:flex-start;
  }
}

/* Hauptbild + Logo-Overlay */
.product-render{
  position:relative;
  flex:1 1 60%;
  max-width:520px;
  margin:0 auto;
}
.product-render img.base{
  display:block;
  width:100%;
  height:auto;
  border-radius:.8rem;
}
.product-render img.logo{
  position:absolute;
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:normal;
}

/* Rechte Spalte: Farbauswahl */
.pd-image-thumbs{
  flex:1 1 40%;
}

.pd-section-header{
  margin-bottom:.5rem;
}
.pd-section-label{
  font-size:.9rem;
  font-weight:600;
  color:#4b5563;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.pd-image-thumbs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:.5rem;
}

.pd-swatch{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  padding:.25rem;
  border-radius:.5rem;
  cursor:pointer;
  transition:border .15s ease,box-shadow .15s ease,transform .06s ease;
}
.pd-swatch img{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
}
.pd-swatch:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.pd-swatch.is-active{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,123,196,.16);
}

/* Untere Reihe: Beschreibung links, Kaufen rechts */
.pd-bottom-grid{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-top:1.5rem;
}
@media(min-width:960px){
  .pd-bottom-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1.1fr);
    align-items:flex-start;
  }
}

/* Beschreibungskarte */
.pd-card-desc .pd-desc-title{
  margin:0 0 .75rem;
  font-size:1.15rem;
}

/* Kaufen-Karte */
.pd-card-buy .pd-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.pd-buy-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
.pd-price-main{
  font-size:1.4rem;
  font-weight:700;
  color:var(--brand);
}
.pd-price-tax-hint{
  font-size:.85rem;
  color:var(--muted);
}

/* Form-Felder */
.pd-field{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.95rem;
}
.pd-label{
  font-weight:600;
}

.pd-select,
.pd-qty-input{
  padding:.55rem .7rem;
  border-radius:.55rem;
  border:1px solid var(--line);
  font:inherit;
}
.pd-select:focus,
.pd-qty-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,123,196,.16);
}

/* Menge + Rückenprint */
.pd-qty-row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.pd-field-qty{
  max-width:160px;
}
.pd-checkbox-label{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.9rem;
  color:#374151;
}

/* Zwischensumme */
.pd-subtotal-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.95rem;
  padding:.6rem .75rem;
  border-radius:.55rem;
  background:#f9fafb;
  color:#4b5563;
}
.pd-subtotal-row strong{
  font-size:1.05rem;
}

/* CTA */
.pd-actions{
  margin-top:.25rem;
}
.pd-btn-add{
  width:100%;
  padding:.85rem 1rem;
  border-radius:.9rem;
  border:none;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:1rem;
}
.pd-btn-add:hover{
  background:var(--brand-dark);
}

/* Hersteller-Logo auf Produktdetailseite */
.pd-manufacturer{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.pd-manufacturer-label{
  font-size:.9rem;
  color:var(--muted);
}
.pd-manufacturer-logo-wrap{
  max-width:160px;
}
.pd-manufacturer-logo-wrap img{
  max-width:100%;
  max-height:80px;
  object-fit:contain;
  display:block;
}

/* ============================================================
   Mini-Cart
   ============================================================ */
.cart-popup.hidden{display:none}
.cart-popup{
  position:fixed;top:70px;right:30px;background:#fff;border:1px solid #ccc;border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);padding:1rem 1.5rem;width:280px;z-index:1000;
}
.cart-popup-box{display:flex;flex-direction:column;gap:.75rem}
.cart-popup-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cart-items{max-height:60vh;overflow:auto}
.cart-popup-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem}

.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer}
.btn:hover{border-color:#c7cbd1}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-outline{background:#fff;border:1px solid var(--brand);color:var(--brand);border-radius:.5rem;padding:.7rem 1.2rem}

/* ============================================================
   Cart Page
   ============================================================ */
.cart-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.cart-table th,.cart-table td{padding:.75rem;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table th{background:var(--surface-alt);font-weight:600}
.thumb{width:70px;height:auto;border-radius:8px;border:1px solid #ddd}

.cart-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--footer-bg);color:var(--footer-fg);text-align:center;padding:1rem;
}
.site-footer a{color:var(--footer-fg)}

/* ============================================================
   Admin (heller Stil)
   ============================================================ */
.admin{--admin-bg:#0b0f14;--admin-fg:#e5e7eb;--admin-muted:#9ca3af;--admin-card:#fff;--admin-border:#e5e7eb}
.admin a{color:inherit;text-decoration:none}
.admin .wrap{max-width:1080px;margin:24px auto 64px;padding:0 16px}
.admin h1{font-size:1.75rem;line-height:1.2;margin:0 0 16px}
.admin p.lead{color:var(--muted);margin:0 0 16px}

/* Tabs/Reiter */
.admin .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}
.admin .tab{
  padding:9px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);
  color:#111;box-shadow:var(--shadow);font-weight:600;transition:background .15s,border-color .15s;
}
.admin .tab:hover{background:#f8f9fb;border-color:#d6dbe2}
.admin .tab.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,123,196,.12),var(--shadow);color:#111}

/* Grid & Cards */
.admin .grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){.admin .grid{grid-template-columns:1fr 1fr}}
.admin .card{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);color:var(--ink);
}
.admin .card .hd{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.admin .card .bd{padding:16px}
.admin .card .ft{padding:14px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

/* Inputs */
.admin label{display:block;margin:10px 0 6px;font-size:.95rem;color:#111}
.admin input[type="text"],
.admin input[type="number"],
.admin input[type="color"],
.admin textarea,
.admin select{
  width:100%;padding:10px 12px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;outline:none;
}
.admin textarea{min-height:120px;resize:vertical}
.admin input:focus,.admin textarea:focus,.admin select:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,123,196,.12);
}

/* Alternative Admin-Tabs (adm-*) */
.adm-lead{color:var(--muted);margin:.25rem 0 1rem}
.adm-tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.adm-tab{
  display:inline-block;background:#fff;border:1px solid var(--line);border-radius:.8rem;
  padding:.6rem .9rem;box-shadow:var(--shadow);color:#111;font-weight:600;
  transition:background .15s ease,border-color .15s ease;
}
.adm-tab:hover{border-color:#d6dbe2;background:#f8f9fb;color:#111}
.adm-tab.is-active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,123,196,.12),var(--shadow);color:#111}

.adm-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:.75rem}
@media (min-width:960px){.adm-grid{grid-template-columns:1fr 1fr}}
.adm-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.adm-hd{padding:1rem 1.1rem;font-weight:700;border-bottom:1px solid var(--line);color:var(--ink)}
.adm-bd{padding:1rem 1.1rem}
.adm-ft{padding:.9rem 1.1rem;border-top:1px solid var(--line);display:flex;gap:.6rem;justify-content:flex-end}
.adm-card label{display:block;margin:.5rem 0 .25rem;font-weight:600;color:#111}
.adm-card input[type="text"],
.adm-card input[type="number"],
.adm-card select,
.adm-card textarea{
  width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:.6rem;background:#fff;font:inherit;color:var(--ink)
}
.adm-card textarea{min-height:120px;resize:vertical}
.adm-card input:focus,.adm-card textarea:focus,.adm-card select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,123,196,.12)}
.admin .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.admin .btn:hover{border-color:#38475f1a}
.admin .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.admin .btn.success{background:#10b981;border-color:#0b8a64;color:#00150f}
.admin .btn.warn{background:#f59e0b;border-color:#8a5b08;color:#1a1305}
.admin .btn.danger{background:#ef4444;border-color:#811d1d;color:#fff}

/* Admin: klare Trennung zum Front-Look */
body.admin{background:var(--surface-alt);color:var(--ink)}
body.admin .site-footer{position:static;height:auto;padding:1rem}
body.admin main.container{padding-bottom:0 !important}
body.admin .site-header{position:sticky;background:var(--header-bg);border-bottom:1px solid #000}

/* ============================================================
   Theme Overrides – pro Schule via Inline-CSS in layout.php
   ============================================================ */
.site-header{background:var(--header-bg) !important;color:var(--header-fg) !important}
.site-header .nav-links a,
.site-header .cart-link,
.site-header .brand,
.site-header .brand .logo{color:var(--header-fg) !important}

.site-footer{background:var(--footer-bg) !important;color:var(--footer-fg) !important}
.site-footer a{color:var(--footer-fg) !important}

/* ============================================================
   Responsive Tweaks
   ============================================================ */
@media (max-width:720px){
  .nav-modern .nav-links a{font-size:.9rem}
}

/* =========================
   1) Sticky-Footer (immer sichtbar bei wenig Content)
   ========================= */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.container{
  flex: 1 0 auto;
}

/* Footer wird automatisch nach unten gedrückt */
.site-footer{
  margin-top: auto;
}

/* ============================================================
   ADMIN: Produktübersicht (Thumbnails + Karten)
   ============================================================ */
.admin .grid .card {
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.admin .grid .card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.admin .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.admin .helper {
  color: #6b7280;
  font-size: 0.85rem;
}
.admin .grid {
  gap: 20px;
}
.admin .btn.primary {
  background: var(--brand, #007bc4);
  color: #fff;
  border: none;
  transition: background .2s ease;
}
.admin .btn.primary:hover {
  background: var(--brand-dark, #005f96);
}

/* Farbswatch Chip */
.pd-swatch-chip {
  border: 1px solid rgba(0,0,0,0.1);
}

/* ============================================================
   ADMIN: OVERLAY
   ============================================================ */
.admin-overlay-editor .overlay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:1rem;
}
.admin-overlay-editor .overlay-card{
  background:var(--surface-alt,#f8f9fb);
  border-radius:var(--radius,12px);
  padding:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.admin-overlay-editor .overlay-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.5rem;
}
.admin-overlay-editor .color-badge{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.1);
}
.admin-overlay-editor .overlay-preview{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e5e7eb;
  margin-bottom:.75rem;
  aspect-ratio:4/5;
}
.admin-overlay-editor .overlay-base{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.admin-overlay-editor .overlay-rect{
  position:absolute;
  border:2px dashed rgba(59,130,246,.9);
  background:rgba(59,130,246,.15);
  cursor:move;
  box-sizing:border-box;
}
.admin-overlay-editor .overlay-logo-preview{
  width:100%;
  height:100%;
  background-image:url('/assets/img/logo-preview.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:multiply;
}
.admin-overlay-editor .overlay-handle{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#2563eb;
  border:2px solid #fff;
}
.admin-overlay-editor .overlay-handle-br{
  right:-7px;
  bottom:-7px;
  cursor:nwse-resize;
}
.admin-overlay-editor .overlay-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem .75rem;
}
.admin-overlay-editor .overlay-fields label{
  display:flex;
  flex-direction:column;
  font-size:.8rem;
  gap:.15rem;
}
.admin-overlay-editor .overlay-fields input{
  padding:.2rem .35rem;
  font-size:.85rem;
}

/* ============================================================
   FRONTEND: OVERLAY – (Grunddefinition, Detail-Layout oben)
   ============================================================ */
.product-render{
  position:relative;
  display:block;
}
.product-render img.base{
  display:block;
  width:100%;
  height:auto;
}
/* Logo im Frontend: normales Bild, KEIN Overlay-Effekt */
.product-render img.logo{
  position:absolute;
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:normal;
}

.admin-overlay-editor .overlay-logo-preview {
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.admin-overlay-editor .overlay-logo-img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.product-image-wrapper {
  position: relative;
  max-width: 420px;
}

.product-base-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Logo liegt einfach darüber – original Farben bleiben */
.product-logo-overlay {
  position: absolute;
  top: 50%;     /* wird per inline-style überschrieben */
  left: 50%;    /* wird per inline-style überschrieben */
  transform: translate(-50%, -50%);
  z-index: 2;   /* über dem Shirt-Bild */
  pointer-events: none;
}

/* Logo selbst ganz normal, keine Blend-Mode-Spielerei */
.product-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================
   FIX: Heller Streifen unter dem Header (Startseite)
   ========================================== */
body.home main.container{
  max-width: none;
  margin: 0 !important;   /* kein vertikaler Abstand mehr */
  padding: 0 !important;
}

/* Falls im Home-Template irgendwo margin-top auf .home-hero sitzt: killen */
body.home .home-hero{
  margin-top: 0 !important;
}

/* ============================================================
   Versand & Zahlung Seite
   ============================================================ */
.shipping-payment-page {
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.shipping-payment-page h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.shipping-payment-page h2 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.shipping-payment-page h3 {
  font-size: 1.1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
}

.shipping-block,
.payment-block {
  margin-bottom: 1.5rem;
}

.shipping-payment-page p {
  margin: 0 0 0.75rem;
}

.shipping-payment-separator {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1.5rem 0;
}

/* ============================================================
   SCHOOL REGISTER – Styling wie Admin-Bereich / Startseite
   ============================================================ */

.school-register-hero {
  /* nutzt home-hero Grundstil, hier nur Feintuning */
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

/* Card-Optik wie bei .school-chooser im Rest */
.school-register-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* fieldset/legend Defaults komplett neutralisieren (falls irgendwo noch vorhanden) */
.school-register-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem 0;
  min-inline-size: auto;
}
.school-register-form legend {
  padding: 0;
  margin: 0 0 .6rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #111827;
}

/* neue Sektionen statt Fieldset */
.school-register-form .form-section {
  padding: .6rem 0 1rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.school-register-form .form-section:last-of-type {
  border-bottom: 0;
  margin-bottom: .5rem;
}
.school-register-form .form-section h3 {
  margin: 0 0 .65rem 0;
  font-size: 1.05rem;
}

/* Inputs sauber bündig wie im restlichen Layout */
.school-register-form label {
  display: block;
  font-weight: 600;
  margin-bottom: .65rem;
  color: #111827;
}
.school-register-form input[type="text"],
.school-register-form input[type="email"],
.school-register-form input[type="url"],
.school-register-form input[type="tel"],
.school-register-form input[type="password"] {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
}

/* Fokus wie modern */
.school-register-form input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Hint Text */
.school-register-form .form-hint {
  color: #6b7280;
  font-size: .9rem;
  margin: .75rem 0 1rem 0;
  line-height: 1.35;
}

/* Actions wie überall */
.school-register-form .form-actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: .25rem;
}

/* Mobile Feintuning */
@media (max-width: 640px) {
  .school-register-card {
    padding: .95rem 1rem;
  }
  .school-register-form .form-actions {
    justify-content: stretch;
  }
  .school-register-form .form-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* FINAL FIX – macht School-Register exakt wie Admin Cards */
body .home-hero.school-register-hero {
  padding: 2.25rem 1rem !important;
}

body .home-hero.school-register-hero > .school-chooser,
body .home-hero.school-register-hero .school-register-card {
  width: min(92%, 640px) !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 1.1rem 1.2rem !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}

body .home-hero.school-register-hero fieldset,
body .home-hero.school-register-hero legend {
  all: unset !important;
  display: block !important;
}

body .home-hero.school-register-hero legend,
body .home-hero.school-register-hero .form-section h3 {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin: 0 0 .6rem 0 !important;
  color: #111827 !important;
}

body .home-hero.school-register-hero label {
  display: block !important;
  font-weight: 600 !important;
  margin-bottom: .65rem !important;
}

body .home-hero.school-register-hero input[type="text"],
body .home-hero.school-register-hero input[type="email"],
body .home-hero.school-register-hero input[type="url"],
body .home-hero.school-register-hero input[type="tel"] {
  width: 100% !important;
  margin-top: .35rem !important;
  padding: .6rem .7rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 1rem !important;
}

/* ============================================================
   SCHOOL REGISTER – Card wirklich weiß (Overlay neutralisieren)
   ============================================================ */
.home-hero.school-register-hero .school-chooser,
.home-hero.school-register-hero .school-register-card{
  background:#fff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ============================================================
   SCHOOL REGISTER – Flash/Popup in der Card anzeigen
   ============================================================ */

/* Falls dein System .msg/.ok/.err global als Toast fixed platziert */
.home-hero.school-register-hero .msg,
.home-hero.school-register-hero .ok,
.home-hero.school-register-hero .err{
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;

  display: block !important;
  width: 100% !important;
  margin: 0 0 1rem 0 !important;
  border-radius: 10px;
}

/* Falls es einen generischen Toast/Flash-Container gibt */
.home-hero.school-register-hero .toast,
.home-hero.school-register-hero .flash,
.home-hero.school-register-hero .alert{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 0 1rem 0 !important;
  width: 100% !important;
}

/* Editor für News-Text */
.editor-toolbar {
  margin-bottom: .4rem;
}

.editor-toolbar button {
  padding: 5px 8px;
  margin-right: 3px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}

.editor-toolbar button:hover {
  background: #e8e8e8;
}

.editor-area {
  border: 1px solid #ccc;
  min-height: 120px;
  padding: 10px;
  background: white;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow-y: auto;
}

/* ==========================================
   Produktbeschreibung – HTML Formatierung
   ========================================== */

.product-description {
  font-size: 1rem;
  line-height: 1.65;
  color: #374151; /* dunkles Grau */
  margin-top: .5rem;
}

/* Absatzabstände */
.product-description p {
  margin: 0 0 .8rem;
}

/* Fett / Kursiv / Underline */
.product-description strong,
.product-description b {
  font-weight: 700;
}

.product-description em,
.product-description i {
  font-style: italic;
}

.product-description u {
  text-decoration: underline;
}

/* Ungeordnete Liste */
.product-description ul {
  margin: .5rem 0 .75rem 1.4rem;
  padding: 0;
  list-style: disc;
}

.product-description ul li {
  margin-bottom: .35rem;
}

/* Geordnete Liste */
.product-description ol {
  margin: .5rem 0 .75rem 1.4rem;
  padding: 0;
  list-style: decimal;
}

.product-description ol li {
  margin-bottom: .35rem;
}

/* Horizontale Linie */
.product-description hr {
  border: 0;
  border-top: 1px solid #d1d5db;
  margin: 1.2rem 0;
}

/* Optional: Listenpunkte etwas weicher */
.product-description ul li::marker,
.product-description ol li::marker {
  color: #6b7280;
}

/* ============================================================
   SUPERADMIN IMPORT WIZARD – kompakt & admin-like
   ============================================================ */

.admin .adm-pagehead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 .75rem;
}
.admin .adm-pagehead-sub{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:.1rem;
}

/* Steps kompakt */
.admin .import-steps{
  display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem;
}
.admin .import-step{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;background:#fff;
  font-weight:700;font-size:.9rem;color:#111827;
}
.admin .import-step span{
  width:20px;height:20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eef2f7;font-size:.8rem;
}
.admin .import-step.is-active{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.admin .import-step.is-active span{background:rgba(255,255,255,.22);color:#fff}

/* Alerts */
.admin .adm-alert{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;margin:0 0 1rem;box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.admin .adm-alert-danger{border-left:4px solid #ef4444}

/* 2-Spalten Layout in Steps */
.admin .import-two-col{
  display:grid;gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .admin .import-two-col{grid-template-columns:1fr 1fr;}
}

/* Default-Row */
.admin .import-default-row{
  display:flex;gap:1rem;align-items:center;
}
.admin .import-thumb-sm{
  width:120px;height:120px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:10px;
}

/* ===== STEP 2: Varianten kompakte Liste ===== */
.admin .import-variant-list{
  display:flex;flex-direction:column;gap:.75rem;
}

.admin .import-variant-item{
  display:grid;gap:.75rem;
  grid-template-columns:110px 1fr;
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.6rem .7rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
@media(max-width:640px){
  .admin .import-variant-item{grid-template-columns:1fr;}
}

.admin .import-variant-thumb img{
  width:100%;height:110px;object-fit:contain;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}

.admin .import-variant-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.35rem;
}
.admin .import-variant-code{
  font-weight:800;display:flex;gap:.5rem;align-items:center;
  text-transform:uppercase;
}
.admin .import-variant-badges{
  display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;
}
.admin .import-badge{
  font-size:.75rem;font-weight:800;padding:.15rem .4rem;border-radius:999px;
  border:1px solid var(--line);
}
.admin .import-badge.ok{background:#ecfdf5;border-color:#86efac;color:#065f46;}
.admin .import-badge.warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}

.admin .btn-sm{padding:6px 8px;border-radius:8px;font-size:.85rem}

/* Felder rechts als 2-Grid */
.admin .import-variant-grid{
  display:grid;gap:.6rem;
  grid-template-columns:1fr 1fr;
}
@media(max-width:720px){
  .admin .import-variant-grid{grid-template-columns:1fr;}
}

.admin .import-hex-row{
  display:flex;gap:.5rem;align-items:center;
}
.admin .import-hex-row input[type="color"]{
  width:46px;height:38px;padding:0;border-radius:8px;
}

/* Step 4 Overview Grid */
.admin .import-summary-grid{
  display:grid;gap:.75rem;
  grid-template-columns:1fr 1fr;
}
@media(max-width:640px){.admin .import-summary-grid{grid-template-columns:1fr;}}

.admin .import-variant-overview{
  display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.admin .import-variant-mini{
  border:1px solid var(--line);border-radius:10px;padding:.5rem;background:#fff;
  display:flex;flex-direction:column;gap:.35rem;align-items:center;
}
.admin .import-variant-mini img{
  width:100%;height:140px;object-fit:contain;border-radius:8px;border:1px solid var(--line);
  background:#fff;
}
.admin .import-variant-mini-name{
  font-weight:700;display:flex;gap:.4rem;align-items:center;text-align:center;
}

/* Reuse dot */
.admin .color-dot{
  width:16px;height:16px;border-radius:999px;border:1px solid rgba(0,0,0,.15);
  display:inline-block;
}

/* ============================================================
   SUPERADMIN IMPORT WIZARD – Fallback, falls body.admin fehlt
   ============================================================ */

/* gleiche Regeln wie zuvor, aber zusätzlich auf .superadmin-import */
.superadmin-import .adm-pagehead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 .75rem;
}
.superadmin-import .adm-pagehead-sub{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:.1rem;
}

.superadmin-import .import-steps{
  display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem;
}
.superadmin-import .import-step{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;background:#fff;
  font-weight:700;font-size:.9rem;color:#111827;
}
.superadmin-import .import-step span{
  width:20px;height:20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eef2f7;font-size:.8rem;
}
.superadmin-import .import-step.is-active{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.superadmin-import .import-step.is-active span{
  background:rgba(255,255,255,.22);color:#fff
}

/* Alerts */
.superadmin-import .adm-alert{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;margin:0 0 1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.superadmin-import .adm-alert-danger{border-left:4px solid #ef4444}

/* Columns */
.superadmin-import .import-two-col{
  display:grid;gap:1rem;grid-template-columns:1fr;
}
@media(min-width:900px){
  .superadmin-import .import-two-col{grid-template-columns:1fr 1fr;}
}

/* Default row */
.superadmin-import .import-default-row{
  display:flex;gap:1rem;align-items:center;
}
.superadmin-import .import-thumb-sm{
  width:120px;height:120px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:10px;
}

/* Step2 list */
.superadmin-import .import-variant-list{
  display:flex;flex-direction:column;gap:.75rem;
}

.superadmin-import .import-variant-item{
  display:grid;gap:.75rem;grid-template-columns:110px 1fr;
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.6rem .7rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
@media(max-width:640px){
  .superadmin-import .import-variant-item{grid-template-columns:1fr;}
}

.superadmin-import .import-variant-thumb img{
  width:100%;height:110px;object-fit:contain;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}

.superadmin-import .import-variant-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.35rem;
}
.superadmin-import .import-variant-code{
  font-weight:800;display:flex;gap:.5rem;align-items:center;
  text-transform:uppercase;
}
.superadmin-import .import-variant-badges{
  display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;
}

.superadmin-import .import-badge{
  font-size:.75rem;font-weight:800;padding:.15rem .4rem;border-radius:999px;
  border:1px solid var(--line);
}
.superadmin-import .import-badge.ok{background:#ecfdf5;border-color:#86efac;color:#065f46;}
.superadmin-import .import-badge.warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}

.superadmin-import .btn-sm{padding:6px 8px;border-radius:8px;font-size:.85rem}

.superadmin-import .import-variant-grid{
  display:grid;gap:.6rem;grid-template-columns:1fr 1fr;
}
@media(max-width:720px){
  .superadmin-import .import-variant-grid{grid-template-columns:1fr;}
}

.superadmin-import .import-hex-row{
  display:flex;gap:.5rem;align-items:center;
}
.superadmin-import .import-hex-row input[type="color"]{
  width:46px;height:38px;padding:0;border-radius:8px;
}

/* Step4 overview */
.superadmin-import .import-summary-grid{
  display:grid;gap:.75rem;grid-template-columns:1fr 1fr;
}
@media(max-width:640px){
  .superadmin-import .import-summary-grid{grid-template-columns:1fr;}
}

.superadmin-import .import-variant-overview{
  display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.superadmin-import .import-variant-mini{
  border:1px solid var(--line);border-radius:10px;padding:.5rem;background:#fff;
  display:flex;flex-direction:column;gap:.35rem;align-items:center;
}
.superadmin-import .import-variant-mini img{
  width:100%;height:140px;object-fit:contain;border-radius:8px;border:1px solid var(--line);
  background:#fff;
}
.superadmin-import .import-variant-mini-name{
  font-weight:700;display:flex;gap:.4rem;align-items:center;text-align:center;
}

/* dot */
.superadmin-import .color-dot{
  width:16px;height:16px;border-radius:999px;border:1px solid rgba(0,0,0,.15);
  display:inline-block;
}

/* ===== Mobile-Optimierung für Popups ===== */
@media (max-width: 768px) {

  /* ÄUSSERER CONTAINER – der „Kasten“ vom Popup */
  .ss-popup,
  .info-popup,
  .popup-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 420px;
    max-height: calc(100% - 3rem);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    padding: 1rem 1.1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ss-popup-inner,
  .info-popup-inner {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  .ss-popup h2,
  .info-popup h2,
  .popup-modal h2 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: .5rem;
  }

  .ss-popup p,
  .info-popup p,
  .popup-modal p {
    font-size: .9rem;
    line-height: 1.4;
  }

  .ss-popup-close,
  .info-popup-close,
  .popup-close {
    position: absolute;
    top: .4rem;
    right: .5rem;
    font-size: 1.2rem;
    line-height: 1;
    padding: .25rem .4rem;
  }

  .ss-popup-overlay,
  .info-popup-overlay,
  .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    z-index: 1000;
  }
}

/* ============================================================
   Hersteller-Logo in Produktkachel
   ============================================================ */

.product-brand{
  margin-top: .5rem;
  min-height: 70px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.product-brand-name{
  font-size: .85rem;
  color: #6b7280;
}

/* Zwei-Spalten-Layout für Infos + Herstellerlogo */
.product-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .4rem;
}

.product-info-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* RECHTE LOGO-SPALTE */
.product-info-brand {
  flex: 0 0 auto;
  max-width: 120px;
  max-height: 80px;
  padding: 2px;
  margin-top: .25rem;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}

/* Herstellerlogo: nie beschneiden */
.product-brand-logo,
.product-card .product-info-brand img.product-brand-logo {
  display: block;
  max-width: 120px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
}

/* ============================================================
   Produktdetail – Mengenrabatte / Staffelpreise
   ============================================================ */
.pd-volume {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.pd-volume-title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.pd-volume-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  font-size: 0.9rem;
}

.pd-volume-table thead {
  background: #f3f4f6;
}

.pd-volume-table th,
.pd-volume-table td {
  padding: 0.35rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.pd-volume-table th {
  font-weight: 600;
  color: #374151;
}

.pd-volume-table tbody tr:last-child td {
  border-bottom: none;
}

.pd-volume-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.pd-volume-table tbody tr:hover {
  background: #eef2ff;
}

.pd-volume-note {
  margin-top: 0.35rem;
  color: #6b7280;
  font-size: 0.8rem;
}

/* Auf kleineren Screens volle Breite, aber weiterhin kompakt */
@media (max-width: 640px) {
  .pd-volume-table {
    max-width: 100%;
    font-size: 0.85rem;
  }

  .pd-volume-table th,
  .pd-volume-table td {
    padding: 0.3rem 0.45rem;
  }
}
/* ======================================
   FIX: "In den Warenkorb"-Button sichtbar
   ====================================== */
.pd-btn-add {
  background: var(--brand) !important;
  color: #fff !important;
  border: 1px solid var(--brand) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 1rem 1.25rem !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  transition: background .2s ease;
}

.pd-btn-add:hover {
  background: var(--brand-dark) !important;
}