/* =====================================================================
b-prisma Object-Shop — Redesign-Layer (additiv)
---------------------------------------------------------------------
Kommt in: templates/b_prisma_02/assets/css/shop-redesign.css
Einbinden: in index.html NACH shop.css:
(oder den Inhalt einfach unten an assets/css/shop.css anhaengen)
Aendert NUR: Artikel-Karten, Kategorie-Box, Hero. Header/Menue/Footer
und alle Aussenmasse bleiben unberuehrt. Dark-Mode ueber die
vorhandene .dark-Klasse am .
===================================================================== */
/* -------- Farbtokens (an b-prisma.de angelehnt) -------- */
:root{
--sr-accent:#4a90ff; /* Marken-Blau (Links/Preis-Akzent) */
--sr-accent-h:#2f7de6; /* Blau Hover */
--sr-card:#ffffff; /* Kartenflaeche */
--sr-card-2:#f4f6fa; /* Bildflaeche / dezente Flaeche */
--sr-hover:#eef3fb; /* Hover-Flaeche (Listen) */
--sr-border:#e6e8ee; /* Rahmen */
--sr-text:#1f2937; /* Text */
--sr-muted:#6b7280; /* Sekundaertext */
--sr-price:#111827; /* Preis */
--sr-asoft:#eef4ff; /* dezente Akzentflaeche (Hinweis) */
--sr-ok:#1a9d6b; /* Haken/Erfolg */
--sr-shadow:0 1px 2px rgba(20,26,43,.05), 0 10px 26px rgba(20,26,43,.06);
--sr-shadow-h:0 6px 16px rgba(20,26,43,.10), 0 22px 46px rgba(20,26,43,.14);
}
.dark{
--sr-accent:#6ba3ff;
--sr-accent-h:#8bb8ff;
--sr-card:#1f2937;
--sr-card-2:#111827;
--sr-hover:#273140;
--sr-border:#374151;
--sr-text:#f9fafb;
--sr-muted:#9ca3af;
--sr-price:#ffffff;
--sr-asoft:#16233f;
--sr-ok:#34d399;
--sr-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35);
--sr-shadow-h:0 8px 20px rgba(0,0,0,.5), 0 26px 54px rgba(0,0,0,.55);
}
/* =====================================================================
1) ARTIKEL-RASTER (BOXANSICHT: .listingbox)
===================================================================== */
/* Raster statt Float — feste 3 Spalten (wie freigegeben), Kachelabstand 18px */
.listingcontainer,
.listingcontainer_full{
display:grid !important;
grid-template-columns:repeat(3, 1fr);
gap:18px;
float:none !important;
}
/* responsiv nach unten: 2 Spalten, dann 1 */
@media (max-width:1100px){ .listingcontainer, .listingcontainer_full{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .listingcontainer, .listingcontainer_full{ grid-template-columns:1fr; } }
/* WICHTIG: Clearfix (.cf) erzeugt ::before/::after — im Grid werden das
leere Zellen (leeres erstes/letztes Feld). Deshalb neutralisieren: */
.listingcontainer::before, .listingcontainer::after,
.listingcontainer_full::before, .listingcontainer_full::after{
content:none !important; display:none !important;
}
/* alte Float-/Breiten-Regeln der einzelnen Box neutralisieren */
.listingcontainer .listingbox,
.listingcontainer_full .listingbox{
float:none !important;
width:auto !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:none !important;
}
/* Die eigentliche Karte */
.listingbox .lb_inner{
display:flex;
flex-direction:column;
height:100%;
background:var(--sr-card);
border:1px solid var(--sr-border);
border-radius:16px;
overflow:hidden;
box-shadow:var(--sr-shadow);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
position:relative;
}
.listingbox .lb_inner:hover{
transform:translateY(-5px);
box-shadow:var(--sr-shadow-h);
border-color:var(--sr-accent);
}
/* --- Vorschaubild: gross, 4:3, randlos oben --- */
.listingbox .lb_image{
margin:0;
width:100%;
aspect-ratio:4 / 3;
background:var(--sr-card-2);
display:block;
overflow:hidden;
}
.listingbox .lb_image a,
.listingbox .lb_image picture{
display:block;
width:100%;
height:100%;
}
.listingbox .lb_image img{
width:100%;
height:100%;
/* contain = nichts wird abgeschnitten (fuer object-fit: cover unten aendern) */
object-fit:contain;
padding:14px; /* etwas Luft ums Objekt; bei cover auf 0 setzen */
transition:transform .3s ease;
}
.listingbox .lb_inner:hover .lb_image img{ transform:scale(1.04); }
/* "Neu"-Fahne dezent aufs Bild */
.listingbox .lb_new_flag{
position:absolute; top:12px; left:12px; z-index:2;
background:var(--sr-accent); color:#fff;
font-size:11px; font-weight:700; line-height:1;
padding:5px 10px; border-radius:20px;
}
/* --- Textbereich unten (wie 1a) --- */
.listingbox .lb_title{ padding:15px 16px 0; }
.listingbox .lb_title h2{
margin:0; font-size:15.5px; line-height:1.25; font-weight:600;
min-height:39px;
}
.listingbox .lb_title h2 a{ color:var(--sr-accent); text-decoration:none; }
.listingbox .lb_title h2 a:hover{ color:var(--sr-accent-h); text-decoration:underline; }
/* "Lieferzeit: Download sofort" entfernen (Wunsch) */
.listingbox .lb_shipping{ display:none !important; }
/* Bewertungssterne kompakt */
.listingbox .lb_rating_icons{ padding:8px 16px 0; color:#f5b301; font-size:13px; }
.listingbox .lb_rating_icons.no_reviews{ display:none; }
.listingbox .lb_rating_count{ color:var(--sr-muted); margin-left:4px; }
/* Preis gross */
.listingbox .lb_price{
padding:12px 16px 0;
color:var(--sr-price);
font-weight:700;
font-size:22px;
font-family:'Poppins', sans-serif;
position:static !important; float:none !important; height:auto !important;
line-height:1.15;
}
.listingbox .lb_price .price_container,
.listingbox .lb_price .productSpecialPrice{ color:var(--sr-price); }
/* Preis-Bausteine aus price_box.html sauber ausrichten (statt Ueberlappung) */
.listingbox .lb_price .standard_price,
.listingbox .lb_price .special_price,
.listingbox .lb_price .graduated_price,
.listingbox .lb_price .uvp_price{
display:inline-flex; align-items:baseline; gap:6px;
position:static !important; float:none !important;
}
.listingbox .lb_price .value_price{ font-size:22px; font-weight:700; color:var(--sr-price); font-family:'Poppins',sans-serif; }
.listingbox .lb_price .small_price{ font-size:13px; font-weight:500; color:var(--sr-muted); }
.listingbox .lb_tax{
padding:6px 16px 0 !important; margin:0 !important;
font-size:12px; color:var(--sr-muted); font-weight:400;
position:static !important; float:none !important; clear:both;
display:block;
}
.listingbox .lb_tax a{ color:var(--sr-muted); }
.listingbox .lb_vpe{ padding:2px 16px 0; font-size:12px; color:var(--sr-muted); }
/* --- Buttons unten, immer buendig am Kartenfuss --- */
.listingbox .lb_buttons{
display:flex;
gap:8px;
align-items:center;
padding:14px 16px 16px;
margin-top:auto;
}
.listingbox .lb_buttons .cssButtonPos11{ margin:0; }
/* "In den Warenkorb"/Kaufen soll die Karte fuellen */
.listingbox .lb_buttons .cssButtonPos11:last-child{ flex:1; }
/* Grafik-Buttons NICHT per CSS umlabeln (fuehrt bei
zu doppelten Buttons). Umstellung erfolgt im Template -> snippets/buttons-css.txt */
/* Falls die Buttons als CSS-Buttons ausgegeben werden (Admin:
"Button-Darstellung = CSS" statt Grafik) — modern stylen: */
.listingbox .lb_buttons a.button,
.listingbox .lb_buttons button,
.listingbox .lb_buttons input[type="submit"],
.listingbox .lb_buttons input[type="button"]{
display:inline-flex; align-items:center; justify-content:center;
width:100%;
padding:10px 14px;
border-radius:11px;
font-size:13.5px; font-weight:600;
border:1px solid var(--sr-border);
background:var(--sr-card-2); color:var(--sr-text);
cursor:pointer; text-decoration:none;
transition:background .15s, color .15s, border-color .15s;
}
/* zweiter Button (Kaufen) = Primaeraktion */
.listingbox .lb_buttons .cssButtonPos11:last-child a.button,
.listingbox .lb_buttons .cssButtonPos11:last-child button,
.listingbox .lb_buttons .cssButtonPos11:last-child input{
background:var(--sr-accent); color:#fff; border-color:var(--sr-accent);
}
.listingbox .lb_buttons .cssButtonPos11:last-child a.button:hover,
.listingbox .lb_buttons .cssButtonPos11:last-child button:hover,
.listingbox .lb_buttons .cssButtonPos11:last-child input:hover{
background:var(--sr-accent-h); border-color:var(--sr-accent-h);
}
/* Grafik-Buttons (gif) wenigstens sauber ausrichten */
.listingbox .lb_buttons img{ display:block; max-width:100%; height:auto; }
/* =====================================================================
2) KATEGORIE-BOX — die "bloeden Linien" raus
===================================================================== */
/* index.html liefert bereits die Ueberschrift "Kategorien" (.sidebar-box-header).
Die box_categories.html doppelt sie + zieht eine Linie — beides ausblenden. */
.sidebar-nav .box_category_header,
.sidebar-box-content .box_category_header{ display:none; }
.box_category_line{ display:none !important; }
/* Liste ohne Trennstriche, mit Hover-Pill
(hohe Spezifitaet + !important, um Basis-/shop.css-Linien sicher zu schlagen) */
.sidebar-nav #categorymenu,
#categorymenu{ list-style:none !important; margin:0 !important; padding:0 !important; }
.sidebar-nav #categorymenu li,
#categorymenu li{
border:0 !important;
box-shadow:none !important;
background:none !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
.sidebar-nav #categorymenu li a,
#categorymenu li a{
display:flex !important; align-items:center; justify-content:space-between;
gap:8px;
padding:9px 12px !important;
margin:2px 0 !important;
border:0 !important;
border-radius:10px !important;
box-shadow:none !important;
color:var(--sr-text) !important;
font-size:14px; font-weight:500;
text-decoration:none !important;
transition:background .14s, color .14s;
}
.sidebar-nav #categorymenu li a:hover,
#categorymenu li a:hover{
background:var(--sr-hover) !important;
color:var(--sr-accent) !important;
}
.sidebar-nav #categorymenu li.active1 > a,
#categorymenu li.active1 > a,
#categorymenu li a.active{
background:var(--sr-hover) !important;
color:var(--sr-accent) !important;
font-weight:600;
}
/* Unterkategorien leicht eingerueckt */
#categorymenu li li a{ padding-left:24px !important; font-size:13.5px; }
/* Artikelzahl-Zaehler (…(6)) als dezente Pille — modified schreibt sie
meist als Text " (6)" ans Ende; hier zumindest gedaempft */
#categorymenu .count,
#categorymenu li a .productcount{
font-size:12px; color:var(--sr-muted);
background:var(--sr-card-2);
padding:2px 9px; border-radius:20px; font-weight:600;
}
/* =====================================================================
3) HERO — animierte 3D BIM-Baustelle (ersetzt shop-banner.jpg)
Drahtgitter-Gebaeude mit Fassadenraster + aufsteigender Bau-Scanebene
+ Bemassung + umkreisende Bauformen + Blueprint-Boden. Reines CSS.
===================================================================== */
.gdl-hero{
position:relative;
height:340px;
overflow:hidden;
background:
radial-gradient(ellipse 60% 100% at 50% -15%, #1f4a92 0%, transparent 58%),
linear-gradient(165deg, #081027 0%, #0c2150 46%, #070e22 100%);
isolation:isolate;
}
/* Blueprint-Boden */
.gdl-hero__grid{
position:absolute; left:-60%; right:-60%; bottom:-50%; height:150%;
background-image:
linear-gradient(rgba(96,158,255,.22) 1px, transparent 1px),
linear-gradient(90deg, rgba(96,158,255,.22) 1px, transparent 1px);
background-size:46px 46px;
transform:perspective(560px) rotateX(72deg);
transform-origin:center bottom;
animation:sr-grid 7s linear infinite;
mask-image:radial-gradient(ellipse 55% 90% at 50% 100%, #000 8%, transparent 72%);
-webkit-mask-image:radial-gradient(ellipse 55% 90% at 50% 100%, #000 8%, transparent 72%);
}
.gdl-hero__glow{
position:absolute; inset:0;
background:radial-gradient(ellipse 50% 70% at 50% 44%, rgba(60,120,255,.30), transparent 66%);
animation:sr-glow 7s ease-in-out infinite;
}
/* schwebende Datenpunkte */
.gdl-hero__dots{
position:absolute; inset:0;
background-image:
radial-gradient(1.5px 1.5px at 12% 30%, rgba(150,195,255,.9), transparent),
radial-gradient(1.5px 1.5px at 82% 22%, rgba(255,170,90,.8), transparent),
radial-gradient(1.5px 1.5px at 68% 66%, rgba(150,195,255,.7), transparent),
radial-gradient(1.5px 1.5px at 26% 74%, rgba(150,195,255,.6), transparent),
radial-gradient(1.5px 1.5px at 92% 58%, rgba(150,195,255,.7), transparent);
animation:sr-drift 12s ease-in-out infinite alternate;
}
.gdl-hero__vignette{
position:absolute; inset:0;
background:
radial-gradient(ellipse at center, transparent 42%, rgba(5,9,22,.6) 100%),
linear-gradient(90deg, rgba(5,9,22,.55), transparent 18%, transparent 82%, rgba(5,9,22,.55));
}
/* 3D-Buehne */
.gdl-hero__scene{ position:absolute; inset:0; perspective:1150px; perspective-origin:50% 40%; }
.gdl-stage{ position:absolute; left:50%; top:54%; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(-22deg); }
.gdl-orbit{ position:absolute; inset:0; transform-style:preserve-3d; animation:sr-yaw 34s linear infinite; }
/* ---------- Drahtgitter-Gebaeude ---------- */
.gdl-bld{ position:absolute; left:-78px; top:-128px; width:156px; height:256px; transform-style:preserve-3d; }
/* Waende mit Fassadenraster (Fenster/Mullions) */
.gdl-wall{
position:absolute; width:156px; height:256px;
border:1.6px solid rgba(125,180,255,.75);
background:
repeating-linear-gradient(90deg, transparent 0 25px, rgba(120,175,255,.28) 25px 26px),
repeating-linear-gradient(0deg, transparent 0 30px, rgba(120,175,255,.28) 30px 31px),
linear-gradient(180deg, rgba(70,130,255,.12), rgba(70,130,255,.02));
box-shadow:inset 0 0 34px rgba(80,140,255,.14);
}
.gdl-wall.wf{ transform:translateZ(78px); }
.gdl-wall.wb{ transform:rotateY(180deg) translateZ(78px); }
.gdl-wall.wr{ transform:rotateY(90deg) translateZ(78px); }
.gdl-wall.wl{ transform:rotateY(-90deg) translateZ(78px); }
/* Geschossdecken */
.gdl-slab{
position:absolute; left:0; top:128px; width:156px; height:156px; margin-top:-78px;
border:1.4px solid rgba(160,205,255,.6); background:rgba(90,150,255,.06);
}
.gdl-slab.s0{ transform:translateY(-128px) rotateX(90deg); }
.gdl-slab.s1{ transform:translateY(-77px) rotateX(90deg); }
.gdl-slab.s2{ transform:translateY(-26px) rotateX(90deg); }
.gdl-slab.s3{ transform:translateY(26px) rotateX(90deg); }
.gdl-slab.s4{ transform:translateY(77px) rotateX(90deg); }
.gdl-slab.s5{ transform:translateY(128px) rotateX(90deg); }
/* Dach-Pyramide (First) */
.gdl-roof{ position:absolute; left:0; top:-128px; width:156px; height:156px; transform-style:preserve-3d; }
.gdl-roof i{ position:absolute; left:0; bottom:0; width:0; height:0;
border-left:78px solid transparent; border-right:78px solid transparent;
border-bottom:54px solid rgba(255,150,70,.16);
filter:drop-shadow(0 0 5px rgba(255,150,70,.4)); }
.gdl-roof .rf{ transform:translateY(-54px) translateZ(78px) rotateX(38deg); transform-origin:bottom; }
.gdl-roof .rb{ transform:translateY(-54px) translateZ(-78px) rotateX(-38deg); transform-origin:bottom; }
.gdl-roof .rr{ transform:translateY(-54px) rotateY(90deg) translateZ(78px) rotateX(38deg); transform-origin:bottom; }
.gdl-roof .rl{ transform:translateY(-54px) rotateY(-90deg) translateZ(78px) rotateX(38deg); transform-origin:bottom; }
/* aufsteigende Bau-Scanebene */
.gdl-scanplane{
position:absolute; left:-6px; top:128px; width:168px; height:168px; margin:-84px 0 0 -6px;
transform:rotateX(90deg);
background:
radial-gradient(closest-side, rgba(120,190,255,.35), rgba(120,190,255,.05)),
repeating-linear-gradient(90deg, transparent 0 12px, rgba(150,210,255,.5) 12px 13px),
repeating-linear-gradient(0deg, transparent 0 12px, rgba(150,210,255,.5) 12px 13px);
border:1.5px solid rgba(170,215,255,.9);
box-shadow:0 0 26px 6px rgba(110,180,255,.5);
animation:sr-build 6s ease-in-out infinite;
}
/* Eckknoten */
.gdl-node{ position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%;
background:#ff8a2a; box-shadow:0 0 12px 3px rgba(255,140,50,.8); animation:sr-glow 2.4s ease-in-out infinite; }
.gdl-node.n1{ left:0; top:0; transform:translateZ(78px); }
.gdl-node.n2{ left:156px;top:0; transform:translateZ(78px); }
.gdl-node.n3{ left:0; top:0; transform:translateZ(-78px); }
.gdl-node.n4{ left:156px;top:0; transform:translateZ(-78px); }
/* ---------- umkreisende Bauformen ---------- */
.gdl-shape{ position:absolute; left:50%; top:50%; transform-style:preserve-3d; }
.gdl-cube{ transform-style:preserve-3d; }
.gdl-cube > i{ position:absolute; display:block; }
.gdl-shape--cube{ animation:sr-orbit-a 20s linear infinite; }
.gdl-shape--cube .gdl-cube{ width:50px; height:50px; margin:-25px 0 0 -25px; animation:sr-spin 12s linear infinite; }
.gdl-shape--cube i{ width:50px; height:50px; border:1.4px solid rgba(135,185,255,.75); background:rgba(80,140,255,.05); }
.gdl-shape--cube i:nth-child(1){ transform:translateZ(25px); }
.gdl-shape--cube i:nth-child(2){ transform:rotateY(180deg) translateZ(25px); }
.gdl-shape--cube i:nth-child(3){ transform:rotateY(90deg) translateZ(25px); }
.gdl-shape--cube i:nth-child(4){ transform:rotateY(-90deg) translateZ(25px); }
.gdl-shape--cube i:nth-child(5){ transform:rotateX(90deg) translateZ(25px); }
.gdl-shape--cube i:nth-child(6){ transform:rotateX(-90deg) translateZ(25px); }
.gdl-shape--beam{ animation:sr-orbit-b 26s linear infinite; }
.gdl-shape--beam .gdl-cube{ width:104px; height:18px; margin:-9px 0 0 -52px; animation:sr-spin-r 18s linear infinite; }
.gdl-shape--beam i{ border:1.4px solid rgba(255,165,85,.7); background:rgba(255,150,60,.05); }
.gdl-shape--beam i:nth-child(1){ width:104px; height:18px; transform:translateZ(9px); }
.gdl-shape--beam i:nth-child(2){ width:104px; height:18px; transform:rotateY(180deg) translateZ(9px); }
.gdl-shape--beam i:nth-child(3){ width:18px; height:18px; left:96px; transform:rotateY(90deg) translateZ(9px); }
.gdl-shape--beam i:nth-child(4){ width:18px; height:18px; transform:rotateY(-90deg) translateZ(9px); }
.gdl-shape--beam i:nth-child(5){ width:104px; height:18px; transform:rotateX(90deg) translateZ(9px); }
.gdl-shape--beam i:nth-child(6){ width:104px; height:18px; transform:rotateX(-90deg) translateZ(9px); }
/* kleine umkreisende Dach-Pyramide */
.gdl-shape--pyr{ animation:sr-orbit-c 30s linear infinite; }
.gdl-shape--pyr .gdl-cube{ width:44px; height:44px; margin:-22px 0 0 -22px; animation:sr-spin 14s linear infinite; }
.gdl-shape--pyr i{ position:absolute; left:0; bottom:0; width:0; height:0;
border-left:22px solid transparent; border-right:22px solid transparent;
border-bottom:34px solid rgba(135,185,255,.16); filter:drop-shadow(0 0 5px rgba(90,150,255,.4)); }
.gdl-shape--pyr i:nth-child(1){ transform:translateZ(15px) rotateX(30deg); transform-origin:bottom; }
.gdl-shape--pyr i:nth-child(2){ transform:translateZ(-15px) rotateX(-30deg); transform-origin:bottom; }
.gdl-shape--pyr i:nth-child(3){ transform:rotateY(90deg) translateZ(15px) rotateX(30deg); transform-origin:bottom; }
.gdl-shape--pyr i:nth-child(4){ transform:rotateY(-90deg) translateZ(15px) rotateX(30deg); transform-origin:bottom; }
/* ---------- Bemassung (screen-space, dreht nicht mit) ---------- */
.gdl-dim{ position:absolute; z-index:2; font:600 11px/1 'Poppins',sans-serif; letter-spacing:.04em; color:#bcd6ff; pointer-events:none; }
.gdl-dim--h{ top:50%; left:calc(50% - 168px); height:190px; width:0; margin-top:-95px;
border-left:1.5px dashed rgba(150,195,255,.7); animation:sr-fade 6s ease-in-out infinite; }
.gdl-dim--h::before, .gdl-dim--h::after{ content:''; position:absolute; left:-4px; width:9px; height:1.5px; background:rgba(150,195,255,.85); }
.gdl-dim--h::before{ top:0; } .gdl-dim--h::after{ bottom:0; }
.gdl-dim--h span{ position:absolute; left:-64px; top:50%; transform:translateY(-50%); white-space:nowrap;
background:rgba(80,140,255,.14); border:1px solid rgba(120,170,255,.4); border-radius:6px; padding:3px 7px; }
.gdl-dim--w{ top:calc(50% + 108px); left:calc(50% - 96px); width:192px; height:0;
border-top:1.5px dashed rgba(150,195,255,.7); animation:sr-fade 6s ease-in-out infinite .6s; }
.gdl-dim--w::before, .gdl-dim--w::after{ content:''; position:absolute; top:-4px; width:1.5px; height:9px; background:rgba(150,195,255,.85); }
.gdl-dim--w::before{ left:0; } .gdl-dim--w::after{ right:0; }
.gdl-dim--w span{ position:absolute; left:50%; top:6px; transform:translateX(-50%); white-space:nowrap;
background:rgba(80,140,255,.14); border:1px solid rgba(120,170,255,.4); border-radius:6px; padding:3px 7px; }
/* Text */
.gdl-hero__content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 16px; z-index:3; pointer-events:none; }
.gdl-hero__badge{ display:inline-flex; align-items:center; gap:8px; margin:0 0 13px; padding:6px 15px; border-radius:20px;
font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#cfe0ff;
background:rgba(80,140,255,.16); border:1px solid rgba(120,170,255,.45); backdrop-filter:blur(3px); }
.gdl-hero__badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:#43e08a; box-shadow:0 0 10px 2px rgba(60,224,140,.7); animation:sr-glow 1.8s ease-in-out infinite; }
.gdl-hero__title{ margin:0; font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(32px,4.6vw,50px); color:#fff; letter-spacing:-.6px; text-shadow:0 3px 30px rgba(0,0,0,.55); }
.gdl-hero__title .accent{ color:#ff8a2a; }
.gdl-hero__title a,
.gdl-hero__title a:link,
.gdl-hero__title a:visited,
.gdl-hero__title a:hover,
.gdl-hero__title a:active{ color:#fff; text-decoration:none; }
.gdl-hero__title a .accent{ color:#ff8a2a; }
.gdl-hero__title a:hover .accent{ color:#ffa257; }
.gdl-hero__sub{ margin:9px 0 0; font-size:clamp(14px,1.8vw,18px); color:rgba(226,236,255,.92); text-shadow:0 1px 16px rgba(0,0,0,.6); }
@keyframes sr-yaw{ 0%{transform:rotateY(0);} 100%{transform:rotateY(360deg);} }
@keyframes sr-spin{ 0%{transform:rotateX(-18deg) rotateY(0);} 100%{transform:rotateX(-18deg) rotateY(360deg);} }
@keyframes sr-spin-r{ 0%{transform:rotateX(12deg) rotateY(360deg);} 100%{transform:rotateX(12deg) rotateY(0);} }
@keyframes sr-orbit-a{ 0%{transform:rotateY(0) translateX(224px) rotateY(0);} 100%{transform:rotateY(360deg) translateX(224px) rotateY(-360deg);} }
@keyframes sr-orbit-b{ 0%{transform:rotateY(120deg) translateX(252px) translateY(-34px) rotateY(-120deg);} 100%{transform:rotateY(-240deg) translateX(252px) translateY(-34px) rotateY(240deg);} }
@keyframes sr-orbit-c{ 0%{transform:rotateY(240deg) translateX(210px) translateY(46px) rotateY(-240deg);} 100%{transform:rotateY(-120deg) translateX(210px) translateY(46px) rotateY(120deg);} }
@keyframes sr-build{ 0%{top:250px; opacity:0;} 8%{opacity:1;} 82%{top:6px; opacity:1;} 92%{opacity:0;} 100%{top:6px; opacity:0;} }
@keyframes sr-grid{ 0%{background-position:0 0;} 100%{background-position:0 46px;} }
@keyframes sr-glow{ 0%,100%{opacity:.65;} 50%{opacity:1;} }
@keyframes sr-fade{ 0%,100%{opacity:.35;} 50%{opacity:.9;} }
@keyframes sr-drift{ 0%{transform:translateY(0);} 100%{transform:translateY(-12px);} }
@media (prefers-reduced-motion: reduce){
.gdl-hero__grid,.gdl-hero__glow,.gdl-hero__dots,.gdl-orbit,.gdl-shape,.gdl-cube,
.gdl-scanplane,.gdl-node,.gdl-dim--h,.gdl-dim--w,.gdl-hero__badge::before{ animation:none !important; }
.gdl-scanplane{ top:80px; opacity:.6; }
}
/* =====================================================================
4) PRODUKTDETAILSEITE (product_info_v1.html)
Reiner CSS-Override auf die vorhandenen .pd_*-Klassen. Kein Template-
Eingriff noetig. Light/Dark via .dark.
===================================================================== */
/* Kopfzeile */
#product_info{ color:var(--sr-text); }
#product_info .product_headline{ margin:0 0 22px; }
#product_info .product_headline h1{
font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(24px,2.4vw,32px);
line-height:1.15; letter-spacing:-.4px; color:var(--sr-text); margin:0;
}
#product_info .pd_manu_image{ float:right; max-width:130px; margin:0 0 12px 18px; }
#product_info .pd_manu_image img{ max-width:100%; height:auto; }
/* Zweispaltiges Layout: Bildergalerie | Kauf-/Infospalte */
#product_details{
display:grid !important;
grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
gap:34px;
align-items:start;
float:none !important; width:auto !important;
}
#product_details > br{ display:none; }
/* Basis-Float-Layout der Produktseite neutralisieren */
#product_details .pd_imagebox,
#product_details .pd_content,
#product_details .pd_summarybox,
#product_details .pd_infobox{
float:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important;
}
/* ----- Bildergalerie ----- */
.pd_imagebox{ margin:0; position:relative; }
.pd_big_image{
background:var(--sr-card-2);
border:1px solid var(--sr-border);
border-radius:16px;
overflow:hidden;
aspect-ratio:4 / 3;
display:flex; align-items:center; justify-content:center;
}
.pd_big_image a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.pd_big_image img{ width:100%; height:100%; object-fit:contain; padding:22px; }
.zoomtext{ margin:8px 2px 0; font-size:12.5px; color:var(--sr-muted); text-align:center; }
.pd_small_image_row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.pd_small_image{ margin:0; }
.pd_small_image_inner{
width:76px; height:76px; border:1px solid var(--sr-border); border-radius:11px;
background:var(--sr-card-2); overflow:hidden; transition:border-color .15s, transform .15s;
}
.pd_small_image_inner:hover{ border-color:var(--sr-accent); transform:translateY(-2px); }
.pd_small_image_inner a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.pd_small_image_inner img{ width:100%; height:100%; object-fit:contain; padding:8px; }
/* ----- Kauf-/Infospalte ----- */
.pd_content{ display:flex; flex-direction:column; gap:20px; min-width:0; }
/* Kaufbox */
.pd_summarybox{
background:var(--sr-card); border:1px solid var(--sr-border); border-radius:16px;
box-shadow:var(--sr-shadow); padding:22px 22px 24px;
}
.pd_summarybox_inner{ display:flex; flex-direction:column; }
.pd_price{ font-family:'Poppins',sans-serif; font-weight:700; font-size:30px; color:var(--sr-price); line-height:1.1; }
.pd_price #pd_puprice{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.pd_price .productSpecialPrice{ color:#e23b3b; }
.pd_price .productOldPrice, .pd_price s{ font-size:17px; color:var(--sr-muted); font-weight:500; }
.pd_vpe{ font-size:12.5px; color:var(--sr-muted); margin-top:6px; }
.pd_tax{ font-size:12.5px; color:var(--sr-muted); margin-top:6px; }
.pd_tax a{ color:var(--sr-accent); }
/* Menge + Buttons */
.addtobasket{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.addtobasket_input{ display:inline-flex; }
.addtobasket_input input{
width:74px; padding:11px 12px; text-align:center;
border:1px solid var(--sr-border); border-radius:11px;
background:var(--sr-card-2); color:var(--sr-text); font-size:15px; font-weight:600;
}
.addtobasket_actions{ display:flex; flex-wrap:wrap; gap:10px; flex:1; }
.addtobasket_actions .cssButtonPos10{ flex:1; min-width:150px; }
.addtobasket_actions .cssButtonPos10 a.button,
.addtobasket_actions .cssButtonPos10 button,
.addtobasket_actions .cssButtonPos10 input[type="submit"],
.addtobasket_actions .cssButtonPos10 input[type="button"]{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
width:100%; padding:13px 18px; border-radius:12px;
font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
background:var(--sr-accent); color:#fff; border:1px solid var(--sr-accent);
transition:background .15s, border-color .15s;
}
.addtobasket_actions .cssButtonPos10:first-child a.button,
.addtobasket_actions .cssButtonPos10:first-child button,
.addtobasket_actions .cssButtonPos10:first-child input{ background:var(--sr-accent); }
.addtobasket_actions .cssButtonPos10:not(:first-child) a.button,
.addtobasket_actions .cssButtonPos10:not(:first-child) button,
.addtobasket_actions .cssButtonPos10:not(:first-child) input{
background:transparent; color:var(--sr-accent);
}
.addtobasket_actions .cssButtonPos10 a.button:hover,
.addtobasket_actions .cssButtonPos10 button:hover,
.addtobasket_actions .cssButtonPos10 input:hover{ background:var(--sr-accent-h); border-color:var(--sr-accent-h); color:#fff; }
.addtobasket_actions img{ max-width:100%; height:auto; display:block; }
.express_info{ font-size:12.5px; color:var(--sr-muted); }
.pd_inforow_message{ font-size:13px; color:var(--sr-muted); margin-top:10px; }
/* Info-Tabelle */
.pd_infobox{
background:var(--sr-card); border:1px solid var(--sr-border); border-radius:16px;
box-shadow:var(--sr-shadow); padding:6px 22px 10px;
}
.pd_inforow_first{ display:none; }
.pd_inforow{
display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
padding:11px 0; border-bottom:1px solid var(--sr-border); font-size:14px; color:var(--sr-text);
}
.pd_infobox .pd_inforow:last-of-type{ border-bottom:0; }
.pd_inforow strong{ font-weight:600; color:var(--sr-muted); min-width:120px; }
.pd_inforow.red{ color:#e23b3b; }
.pd_rating_icons{ color:#f5b301; letter-spacing:1px; }
.pd_rating_icons .fa-star{ color:var(--sr-border); }
.pd_rating_icons .fa-star.full{ color:#f5b301; }
.pd_shipping_image{ height:16px; width:auto; vertical-align:middle; }
/* Aktions-Icons (Drucken / Bewerten / Merkzettel) */
ul.pd_iconlist{
list-style:none; margin:14px 0 0; padding:12px 0 4px;
display:flex; flex-wrap:wrap; gap:10px 20px; border-top:1px solid var(--sr-border);
}
ul.pd_iconlist li{ margin:0; }
ul.pd_iconlist a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--sr-muted); text-decoration:none; }
ul.pd_iconlist a:hover{ color:var(--sr-accent); }
/* Beschreibung + Abschnittsueberschriften */
h4.detailbox{
font-family:'Poppins',sans-serif; font-weight:600; font-size:19px; color:var(--sr-text);
margin:38px 0 14px; padding-bottom:10px; border-bottom:2px solid var(--sr-border); position:relative;
}
h4.detailbox::after{ content:''; position:absolute; left:0; bottom:-2px; width:56px; height:2px; background:var(--sr-accent); }
.pd_description{ font-size:15px; line-height:1.7; color:var(--sr-text); }
.pd_description img{ max-width:100%; height:auto; border-radius:10px; }
/* Hersteller-Infoblock */
.pd_manu_content{ background:var(--sr-card); border:1px solid var(--sr-border); border-radius:14px; padding:20px 22px; }
.pd_manu_address_row{ display:flex; flex-wrap:wrap; gap:26px; margin-top:12px; }
.pd_manu_address_heading{ font-weight:600; color:var(--sr-muted); margin-bottom:6px; }
.dateadded_border{ font-size:12.5px; color:var(--sr-muted); border-top:1px solid var(--sr-border); padding-top:12px; margin-top:26px; }
/* responsiv */
@media (max-width:900px){
#product_details{ grid-template-columns:1fr; gap:24px; }
}
/* =====================================================================
5) INTRO-/WILLKOMMENSBOX (fest in index.html, statt Contentmanager)
===================================================================== */
.gdl-intro{
background:var(--sr-card) !important;
border:1px solid var(--sr-border);
border-radius:18px;
box-shadow:var(--sr-shadow);
padding:30px 32px;
margin:0 0 32px;
color:var(--sr-text);
}
.gdl-intro h1{
font-family:'Poppins',sans-serif; font-weight:700;
font-size:clamp(24px,2.4vw,30px); line-height:1.15; letter-spacing:-.4px;
color:var(--sr-text); margin:0 0 14px;
}
.gdl-intro p{ font-size:15.5px; line-height:1.6; color:var(--sr-text); margin:0 0 14px; }
.gdl-intro a{ color:var(--sr-accent); font-weight:600; }
.gdl-intro strong{ color:var(--sr-accent); }
.gdl-intro__note{
display:flex; gap:12px; align-items:flex-start;
background:var(--sr-asoft); border:1px solid var(--sr-border); border-radius:12px;
padding:13px 16px; margin:0 0 18px; font-size:13px; line-height:1.55; color:var(--sr-text);
}
.gdl-intro__note strong{ color:var(--sr-text); }
.gdl-intro__note svg{ flex:0 0 auto; margin-top:1px; }
.gdl-intro__perks{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.gdl-intro__perk{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.5; color:var(--sr-text); }
.gdl-intro__perk svg{ flex:0 0 auto; margin-top:2px; }
@media (max-width:640px){ .gdl-intro__perks{ grid-template-columns:1fr; } }
/* Auf Wunsch ausgeblendet: Express-Kauf + Lieferzeit-Zeile
(gilt auch im echten Shop, ohne Template-Eingriff) */
.addtobasket_actions .cssButtonPos10 + .cssButtonPos10{ display:none; }
.addtobasket_actions .express_info{ display:none; }
.pd_infobox .pd_inforow_first + .pd_inforow{ display:none; }
/* PayPal "Bezahlen Sie nach 30 Tagen" / Ratenzahlungs-Hinweis ausblenden */
.pd_summarybox [data-pp-message],
.pd_summarybox [id^="paypal-installment"],
.pd_summarybox [id*="paypal-message"],
.pd_summarybox [id*="paypalMessage"],
.pd_summarybox [class*="paypal-installment"],
.pd_summarybox [class*="paypal_installment"],
.pd_summarybox [class*="paypal-messag"],
.pd_summarybox .paypalplus_installment,
.pd_summarybox iframe[src*="paypal"]{ display:none !important; }
/* ----- Dark Mode: helle Altlast-Felder aus stylesheet.css/sumoselect abdunkeln -----
Produktseite: Kaufbox-Innenfeld, Icon-Leiste, "Zuletzt angesehen"-Box, Options-Dropdown */
.dark .pd_summarybox_inner{ background-color:var(--sr-card-2); border-color:var(--sr-border); }
.dark ul.pd_iconlist{ background:transparent; border-color:var(--sr-border); }
.dark .box2{ background-color:var(--sr-card); border-color:var(--sr-border); color:var(--sr-muted); }
.dark .box2 .box_header{ color:var(--sr-text); }
.dark .box_image{ background-color:var(--sr-card-2); border-color:var(--sr-border); }
/* SumoSelect (Produktoptionen-Dropdown) */
.dark .SumoSelect > .CaptionCont{ background-color:var(--sr-card-2); border-color:var(--sr-border); color:var(--sr-text); }
.dark .SumoSelect:hover > .CaptionCont,
.dark .SumoSelect:focus > .CaptionCont,
.dark .SumoSelect.open > .CaptionCont{ background-color:var(--sr-hover); border-color:var(--sr-accent); color:var(--sr-text); }
.dark .SumoSelect > .CaptionCont > span.placeholder{ color:var(--sr-muted); }
.dark .SumoSelect > .optWrapper{ background:var(--sr-card); border-color:var(--sr-border); }
.dark .SumoSelect > .optWrapper > .options li.opt{ color:var(--sr-text); border-color:var(--sr-border); }
.dark .SumoSelect > .optWrapper > .options li.opt:hover{ background-color:var(--sr-hover); }
.dark .SumoSelect > .optWrapper > .options li.opt.selected{ color:var(--sr-accent); background:var(--sr-hover); }
.dark .SumoSelect > .optWrapper > .options li.opt.sel{ background-color:var(--sr-hover); }
/* Tabs-Produktansicht (pd_tabs / easyResponsiveTabs, z.B. products_id=138) */
.dark .pd_tabs{ background:var(--sr-card); }
.dark .pd_tabs .resp-tabs-container{ background-color:var(--sr-card); border-color:var(--sr-border); }
.dark .resp-tabs-list li{ color:var(--sr-muted); }
.dark .resp-tabs-list li.resp-tab-active{ background-color:var(--sr-card-2); color:var(--sr-accent); border-color:var(--sr-border); }
.dark .resp-tab-content{ border-color:var(--sr-border); }
.dark .pd_tabs h2.resp-accordion{ background:var(--sr-card-2); border-color:var(--sr-border); color:var(--sr-text); }
.dark .pd_tabs h2.resp-tab-active{ background:var(--sr-hover) !important; }