/* =====================================================================
   CartSoft Theme „Galerie“ – bildstark, ruhig, hochwertig
   Ergänzt das Basis-Stylesheet (wird danach geladen).
   Farben: Nachtschwarz #0e0f13, Violett #6d4aff (Primärfarbe), Rosé #ff5c8a (Akzent), Flächen #f6f6f9
   Schrift: Inter (lokal, SIL OFL 1.1)
   ===================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/inter-700.woff) format("woff")}

:root{
  --primary:#6d4aff;--primary-hover:#5a37f0;--primary-ink:#5a37f0;--primary-soft:#f1edff;--primary-soft-2:#f8f6ff;--on-primary:#fff;
  --primary-deep:#2d1d7a;--primary-line:#d6ccff;--primary-line-2:#e8e2ff;--primary-glow:rgba(109,74,255,.32);--primary-ring:rgba(109,74,255,.22);--primary-tint:rgba(109,74,255,.1);
  --accent:#ff5c8a;--cart-btn:#6d4aff;--cart-btn-hover:#5a37f0;
  --dark:#14151b;--black:#0e0f13;--text:#4a4d5a;--text-strong:#14151b;--muted:#6b6f7d;--line:#e6e6ee;--line-2:#efeff5;--bg-alt:#f6f6f9;--info-soft:#f1edff;
  --radius:14px;--radius-sm:10px;--radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(14,15,19,.05);--shadow:0 8px 22px rgba(14,15,19,.08);--shadow-lg:0 22px 48px rgba(14,15,19,.14);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--header-h:78px;
  --gl-night:#0e0f13;--gl-night-2:#17181f;--gl-night-line:#262833;--gl-on-night:#e9e9f1;--gl-on-night-muted:#a3a6b5;
}
body{font-size:16px;line-height:1.65;background:#fff}
h1,h2,h3,h4{letter-spacing:-.025em;font-weight:700;color:var(--text-strong)}
::selection{background:var(--primary);color:#fff}
.btn{border-radius:999px;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--primary),#8b5cff);border:0;box-shadow:0 8px 20px -8px var(--primary-glow)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover),#7b4dff)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=date],select,textarea{border-radius:12px}

/* ---------- Kopfbereich: Farbverlauf oben, dunkle Navigation darunter ---------- */
.gl-header{background:linear-gradient(115deg,#241a52 0%,#3b2a8c 45%,#6a2f86 80%,#8a3270 100%);color:var(--gl-on-night);border-bottom:0}
.gl-header .header-row{min-height:var(--header-h);gap:28px}
.gl-header .logo,.gl-header .logo-name,.gl-header .logo-text,.gl-header a.logo{color:#fff}
.gl-header .logo-slogan{color:rgba(255,255,255,.72)}
.gl-header .search-form{flex:1;max-width:640px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;backdrop-filter:blur(6px)}
.gl-header .search-form input{background:transparent;color:#fff;border:0}
.gl-header .search-form input::placeholder{color:rgba(255,255,255,.72)}
.gl-header .search-btn{background:#fff;color:var(--primary);border-radius:999px}
.gl-header .icon-btn,.gl-header .header-actions a,.gl-header .icon-label,.gl-header .nav-toggle{color:#fff}
.gl-header .cart-count{background:var(--accent);color:#fff}
.gl-header .main-nav{background:#0e0f13;border-top:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.gl-header .main-nav .menu-item>a{color:var(--gl-on-night)}
.gl-header .main-nav .menu-item>a:hover,.gl-header .main-nav .menu-item.is-active>a{color:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
.gl-header .dd,.gl-header .dd-wrap{color:var(--text)}

/* ---------- Startseite: dichtes Mosaik aus Hintergrundbildern ---------- */
.gl-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#2c2168,#4a35a8 50%,#7a3a8f);color:#fff;padding:84px 0 76px;isolation:isolate}
.gl-mosaic{position:absolute;top:50%;left:50%;width:150%;display:grid;grid-template-columns:repeat(16,1fr);gap:10px;transform:translate(-50%,-50%) rotate(-10deg);z-index:-2}
.gl-tile{display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.gl-tile .rf-pic,.gl-tile img{display:block;width:100%;height:100%;object-fit:cover}
.gl-mosaic .gl-tile:nth-child(2n){transform:translateY(40%)}
/* farbige Platzhalter, solange noch keine Bilder da sind */
.gl-c0{background:linear-gradient(160deg,#6d4aff,#ff5c8a)}.gl-c1{background:linear-gradient(160deg,#0ea5e9,#22c55e)}.gl-c2{background:linear-gradient(160deg,#f59e0b,#ef4444)}.gl-c3{background:linear-gradient(160deg,#1e3a8a,#7c3aed)}
.gl-c4{background:linear-gradient(160deg,#14b8a6,#3b82f6)}.gl-c5{background:linear-gradient(160deg,#ec4899,#f97316)}.gl-c6{background:linear-gradient(160deg,#0f172a,#6366f1)}.gl-c7{background:linear-gradient(160deg,#84cc16,#06b6d4)}
/* Bilder bleiben hell und klar – nur ein Hauch Tönung; lesbar wird der Text durch die Glasfläche dahinter */
.gl-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,14,50,.08)}
.gl-hero h1,.gl-hero-sub,.gl-pill{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.gl-hero-inner{text-align:center;max-width:820px;padding:34px 38px 30px;border-radius:26px;background:rgba(28,20,66,.52);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.gl-pill{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.85rem;font-weight:600;color:#fff}
.gl-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;margin:0 0 16px}
.gl-hero-sub{color:rgba(255,255,255,.88);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:680px;margin:0 auto 26px}
.gl-hero-search .search-form{max-width:640px;margin:0 auto;background:#fff;border-radius:999px;box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
.gl-hero-search .search-form input{border:0;background:transparent;font-size:1.05rem;padding:16px 22px}
.gl-hero-search .search-btn{background:var(--primary);color:#fff;border-radius:999px;margin:6px}
.gl-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0;padding:0}
.gl-chips a{display:inline-block;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);color:#fff;font-size:.88rem;text-decoration:none}
.gl-chips a:hover{background:#fff;color:var(--dark)}

/* ---------- Kategorie-Kacheln: Vollbild-Motiv ---------- */
.gl-cat-grid,.cat-grid{gap:18px}
.cat-tile{border:0;border-radius:18px;box-shadow:var(--shadow-sm);position:relative;background:var(--gl-night)}
.cat-tile .cat-visual{aspect-ratio:4/3;padding:0;border:0;background:var(--gl-night-2)}
.cat-tile .cat-visual img{object-fit:cover}
.cat-tile:has(.cat-visual img) .cat-body{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(to top,rgba(14,15,19,.88),rgba(14,15,19,0));color:#fff}
.cat-tile:has(.cat-visual img) .cat-name{color:#fff;font-size:1.05rem}
.cat-tile:has(.cat-visual img) .cat-sub,.cat-tile:has(.cat-visual img) .cat-count{color:rgba(255,255,255,.78)}
.cat-tile:has(.cat-visual img) .cat-go{color:#fff}
.cat-tile:not(:has(.cat-visual img)){background:#fff;border:1px solid var(--line)}
.cat-tile:hover{box-shadow:var(--shadow-lg)}

/* ---------- Produktkarten: Hochformat, Bild im Mittelpunkt ---------- */
.product-card{border:0;border-radius:18px;background:transparent;box-shadow:none}
.product-card:hover{box-shadow:none}
.pc-media{aspect-ratio:4/5;border-radius:16px;border:0;background:var(--bg-alt)}
.pc-media img{transition:transform .5s ease}
.product-card:hover .pc-media img{transform:scale(1.04)}
.pc-info{padding:12px 4px 0}
.pc-cat{color:var(--primary-ink)}
.pc-title{font-size:.94rem;min-height:0;-webkit-line-clamp:2}
.pc-foot{padding:10px 4px 6px}
.product-grid{gap:26px 20px}

/* ---------- Produktseite: Bild in voller Länge auf neutraler Fläche ---------- */
.gallery-main{background:#f1f1f5;border:0}
.gallery-main img{background:transparent;object-fit:contain}
.p-title{letter-spacing:-.03em}

/* ---------- Ablauf & Vorteile ---------- */
.gl-center{text-align:center;margin:0 0 26px}
.gl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:none}
.gl-steps li{background:var(--bg-alt);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;gap:6px}
.gl-steps b{color:var(--text-strong);font-size:1.05rem}
.gl-step-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700;margin-bottom:6px}
.gl-benefits{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gl-benefits li{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font-weight:600;color:var(--text-strong);font-size:.94rem}
.gl-b-icon{color:var(--primary);display:inline-flex}

/* ---------- SEO-Text: gut lesbar, gegliedert ---------- */
.gl-seo{background:#fff}
.gl-seo-text{max-width:860px;margin:0 auto}
.gl-seo-text h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:2.2em 0 .6em}
.gl-seo-text h2:first-child{margin-top:0}
.gl-seo-text h3{font-size:1.12rem;margin:1.6em 0 .4em}
.gl-seo-text ul{padding-left:1.2em}

/* ---------- Footer (dunkel) ---------- */
.site-footer{background:var(--gl-night);color:var(--gl-on-night-muted);border-top:0}
.site-footer a{color:var(--gl-on-night)}
.site-footer a:hover{color:#fff}
.site-footer .footer-title{color:#fff}
.footer-cta{background:linear-gradient(135deg,var(--primary),#8b5cff 55%,var(--accent))}

@media (max-width:900px){
  .gl-mosaic{grid-template-columns:repeat(12,1fr);width:190%}
  .gl-steps{grid-template-columns:1fr}
  .gl-benefits{grid-template-columns:repeat(2,1fr)}
  .gl-header .header-row{gap:12px}
}
@media (max-width:600px){
  .gl-hero{padding:48px 0 40px}
  .gl-mosaic{grid-template-columns:repeat(10,1fr);gap:6px;width:250%}
  .gl-hero-inner{padding:24px 18px 22px;border-radius:20px;margin:0 12px;width:auto}
  .gl-benefits{grid-template-columns:1fr}
  .product-grid{gap:20px 12px}
}
@media (prefers-reduced-motion:reduce){.pc-media img{transition:none}.product-card:hover .pc-media img{transform:none}}

/* Logo-Bilder auf dunklem Kopf: heller, abgerundeter Hintergrund, damit auch dunkle Logos gut sichtbar sind
   (Text-Logos erscheinen weiß). Abschalten (Logo für dunkle Flächen): Einstellungen-Schlüssel gl_logo_plain = 1 – setzt das Plugin KI-Bildershop beim Einspielen des Logos automatisch */
.gl-header.gl-logo-chip .logo img{background:#fff;border-radius:10px;padding:6px 10px;box-sizing:content-box}

/* Startseite: große Suche im Bildbereich – die Suche im Kopf entfällt dort */
.page-home .gl-header .search-form{visibility:hidden}
@media (max-width:900px){.page-home .gl-header .search-form{display:none}.gl-chips li:nth-child(n+7){display:none}}