/*
Theme Name: Zero-PC Storefront Child
Theme URI: https://zero-pc.de
Template: storefront
Author: Zero-PC
Description: Zero-PC Design (dunkel, orange) fuer WooCommerce auf Basis des Storefront-Themes.
Version: 1.62.0
Text Domain: zero-pc-storefront-child
*/
/* Google Fonts are loaded as a real via a
private pseudo-element that the outline property above has no power
over at all - a separate, Firefox-only reset is required. */
button::-moz-focus-inner {
border: 0;
}
/* Real root cause of the recurring "white/grey box" reports (FAQ items,
header icons, etc.) - found live, not guessed: WordPress/Storefront's
own global-styles inline CSS sets a plain "button:hover { background-
color: #d5d5d5 }" (light grey) that nothing in this theme was
overriding for buttons without their own custom hover background (the
FAQ toggle, spec toggle, wishlist/cart/menu icons, quantity buttons...).
:not(.btn) so the real .btn-primary orange hover is untouched. */
button:not(.btn):hover {
background-color: transparent !important;
}
h1, h2, h3, h4 {
margin: 0;
font-family: var(--disp);
font-weight: 600;
letter-spacing: -0.01em;
}
h1 {
font-size: clamp(34px, 4.4vw, 54px);
line-height: 1.08;
}
h1 em {
font-style: normal;
color: var(--accent);
}
.text-accent { color: var(--accent); }
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-weight: 600;
font-size: 14px;
padding: 10px 20px;
border-radius: 100px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
cursor: pointer;
transition: border-color .2s, background .2s, transform .15s;
white-space: nowrap;
}
.btn[disabled] {
opacity: .5;
cursor: not-allowed;
}
.sold-out-buy-btn {
opacity: 1;
background: #322D28;
border-color: #322D28;
color: var(--text);
font-weight: 700;
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-text);
}
.btn-primary:hover { background: #ff6b34; transform: translateY(-1px); }
.btn:not(.btn-primary):hover { border-color: var(--text-dim); background: var(--panel); }
.btn-block { width: 100%; justify-content: center; }
/* --------------------------------------------------------------------------
Section shell
-------------------------------------------------------------------------- */
section { position: relative; z-index: 1; padding: 48px 0; }
@media (min-width: 860px) {
section { padding: 72px 0; }
}
/* Two specific gaps were reported as too large: after the "weitere
Builds" carousel (before the payment badges) and before the FAQ
(after the about-stats box). Scoped, targeted reductions - trims just
those two gaps without touching the normal section rhythm everywhere
else on the page. */
/* Clicking "PCs entdecken" in the hero jumps to #pcs - without this, the
sticky header (and sticky trust bar above it) lands directly on top of
the section's heading since the anchor scroll otherwise puts the
section's very top edge at the very top of the viewport. */
#pcs { padding-bottom: 28px; scroll-margin-top: 100px; }
/* The hero's "PCs entdecken" button targets this instead of #pcs now - it
should scroll past the heading/toolbar straight to the cards themselves
("noch weiter nach unten"), not just clear the sticky header at the
section's very top. */
#pcs-grid { scroll-margin-top: 100px; }
#faq { padding-top: 28px; }
#bewertungen { padding-bottom: 28px; }
#ueber-uns { padding-top: 28px; }
@media (min-width: 860px) {
#pcs { padding-bottom: 44px; }
#faq { padding-top: 44px; }
#bewertungen { padding-bottom: 44px; }
#ueber-uns { padding-top: 44px; }
}
.sec-head { margin-bottom: 52px; max-width: 560px; }
/* This section's subheading paragraph is currently empty (see
templates/index.json), so .sec-head's usual bottom margin - sized to
leave room for that paragraph - left an oversized gap before the sort
toolbar with nothing in it. Scoped to #pcs only, so sections that do
have a subheading keep their normal spacing. */
#pcs .sec-head { margin-bottom: 24px; }
/* Less empty air before the first question than the default 52px gap. */
#faq .sec-head { margin-bottom: 28px; }
.sec-eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
display: block;
}
.sec-head h2 {
font-size: clamp(26px, 3vw, 36px);
letter-spacing: -.01em;
margin-bottom: 14px;
}
.sec-head p { color: var(--text-dim); font-size: 15.5px; }
/* Pairs a heading/tier label with the round "i" info badge next to it. */
.pc-tier-row { display: flex; align-items: center; gap: 8px; }
.sec-head .pc-tier-row { margin-bottom: 14px; }
.sec-head .pc-tier-row h2 { margin-bottom: 0; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
/* --------------------------------------------------------------------------
Scroll reveal
-------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* --------------------------------------------------------------------------
Placeholder icon panel (used when no image is picked)
-------------------------------------------------------------------------- */
.icon-panel {
width: 100%;
height: 150px;
border-radius: 8px;
background: radial-gradient(circle at 30% 20%, rgba(255, 90, 31, .10), transparent 60%), var(--bg-alt);
border: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.used-goods-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
width: 22px;
height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--bg) 78%, transparent);
border: 1px solid var(--text-faint);
color: var(--text-dim);
font-family: var(--disp);
font-size: 12px;
font-style: italic;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.used-goods-badge:hover,
.used-goods-badge:focus-visible,
.used-goods-badge[aria-expanded="true"] {
border-color: var(--accent);
color: var(--accent);
}
.used-goods-tooltip {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 200px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--panel);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--body);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 1.4;
text-align: left;
white-space: normal;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
pointer-events: none;
}
.used-goods-badge:hover .used-goods-tooltip,
.used-goods-badge[aria-expanded="true"] .used-goods-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.info-badge {
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 50%;
background: transparent;
border: 1px solid var(--text-faint);
color: var(--text-dim);
font-family: var(--disp);
font-size: 10px;
font-style: italic;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
position: relative;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
}
.info-badge:hover,
.info-badge:focus-visible,
.info-badge[aria-expanded="true"] {
border-color: var(--accent);
color: var(--accent);
}
.info-badge-tooltip {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 220px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--panel);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--body);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 1.4;
text-align: left;
white-space: normal;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
pointer-events: none;
z-index: 4;
}
.info-badge:hover .info-badge-tooltip,
.info-badge[aria-expanded="true"] .info-badge-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (max-width: 619px) {
.info-badge-tooltip { width: 170px; font-size: 11px; padding: 8px 10px; }
}
@media (max-width: 619px) {
.used-goods-tooltip { width: 150px; font-size: 11px; padding: 8px 10px; }
}
.icon-panel svg { width: 64%; height: 64%; }
.icon-panel img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pc-card.sold-out .pc-card-details-btn,
.pc-card.reserved .pc-card-details-btn { opacity: .7; }
/* Standard "corner ribbon" technique: a small FIXED-size square, pinned to
the image's top-left corner with its own overflow:hidden, is what
actually clips the ribbon - not the (very differently sized) image box
itself. Every earlier attempt sized/positioned the ribbon relative to the
image box, which meant a size that worked for one context (mobile card,
desktop card, detail overlay) was always wrong for another, and made the
rotation's clipping asymmetric (breaking text centering). A square wrap
is symmetric by construction, so both ends clip evenly and the centered
text stays centered, in every context, with no per-context tuning. */
.pc-sold-out-ribbon-wrap {
position: absolute;
/* -1px instead of 0 so the wrap's sharp square corner fully overlaps the
image's own rounded corner with zero hairline gap, however that corner
is anti-aliased - this is what was still reading as "next to" the
image rather than "on" it. */
top: -1px;
left: -1px;
width: 150px;
height: 150px;
overflow: hidden;
z-index: 3;
pointer-events: none;
}
.pc-sold-out-ribbon {
position: absolute;
top: 32px;
left: -50px;
width: 210px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-40deg);
background: #322D28;
border: 1px solid var(--border-soft);
}
.pc-sold-out-ribbon span {
display: block;
padding: 8px 0;
text-align: center;
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
letter-spacing: .06em;
color: var(--text);
white-space: nowrap;
}
.pc-sale-ribbon {
position: absolute;
top: 16px;
left: -36px;
width: 150px;
transform: rotate(-40deg);
background: var(--accent);
z-index: 3;
}
.pc-sale-ribbon span {
display: block;
padding: 5px 0;
text-align: center;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
color: var(--accent-text);
}
.pc-intro-row { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; }
.pc-intro-text { margin-bottom: 0; }
.pc-sale-feature { margin-bottom: 0; max-width: 420px; }
.pc-sale-feature .icon-panel { height: auto; aspect-ratio: 3 / 4; }
.pc-sale-feature .icon-panel img { object-fit: contain; }
@media (min-width: 861px) {
.pc-intro-row--with-sale {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
}
.pc-intro-row--with-sale .pc-intro-text { max-width: 380px; flex-shrink: 0; margin-top: 8px; }
.pc-intro-row--with-sale .pc-sale-feature { flex: 1; max-width: 460px; }
}
/* --------------------------------------------------------------------------
PC row list (regular, non-Sale builds) - horizontal list rows instead of
a grid, deliberately neutral/muted (no accent orange on price or button)
so the Sale card above reads as the one highlighted deal.
-------------------------------------------------------------------------- */
.pc-row-list { display: flex; flex-direction: column; gap: 14px; }
.pc-row {
display: grid;
grid-template-columns: 140px 1fr auto;
align-items: center;
gap: 20px;
padding: 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.pc-row-media { width: 100%; height: 120px; margin-bottom: 0; }
.pc-row-media img { object-fit: contain; }
.pc-row-media svg { width: 50%; height: 50%; }
.pc-row-info { min-width: 0; }
.pc-row-head { margin-bottom: 10px; }
.pc-row-head h3 { font-size: 17px; margin: 3px 0 6px; }
.pc-row-specs { margin-bottom: 0; }
.pc-row-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 170px; }
.pc-row .pc-price { font-size: 22px; color: var(--text); }
.pc-row-details-btn,
.pc-row-buy-btn { width: 100%; justify-content: center; }
@media (max-width: 700px) {
.pc-row { grid-template-columns: 1fr; }
.pc-row-media { height: 180px; }
.pc-row-buy { align-items: stretch; }
}
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: sticky;
top: var(--sticky-strip-active-h, 0px);
z-index: 100;
padding: 20px 0;
transition: background .35s ease, border-color .35s ease, padding .35s ease, top .18s ease;
border-bottom: 1px solid transparent;
background: var(--bg);
}
.site-header.scrolled {
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-soft);
padding: 14px 0;
}
.headrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* A bit more inset from the header's own edges so the logo (and the
actions on the other side, for symmetry) don't sit flush against the
very corner. */
.headrow .logo { margin-left: 10px; }
.headrow .header-actions { margin-right: 10px; }
.logo {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--disp);
font-weight: 700;
font-size: 19px;
letter-spacing: .01em;
/* .logo is an - Storefront's own style.css sets a plain "a { color }"
rule (dark grey) that ties with our own "a { color: inherit }" reset on
specificity, and can win depending on load order, leaving the wordmark
a dim grey instead of the real bright off-white. !important here
forces the real color regardless of that tie. */
color: var(--text) !important;
}
.logo .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 rgba(143, 191, 127, .6);
animation: pulseDot 2.4s ease-out infinite;
flex-shrink: 0;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(143, 191, 127, .55); }
70% { box-shadow: 0 0 0 7px rgba(143, 191, 127, 0); }
100% { box-shadow: 0 0 0 0 rgba(143, 191, 127, 0); }
}
.navlinks { display: flex; gap: 34px; font-size: 14.5px; color: var(--text-dim); }
.navlinks a { position: relative; padding: 4px 0; transition: color .2s; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--text); }
.navlinks a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--accent);
transition: width .25s ease;
}
.navlinks a:hover::after { width: 100%; }
.nav-plain-button {
/* A carries browser-default border/background/line-height/
font-size that a plain doesn't - without resetting them here,
"Benchmarks" could sit at a slightly different size/position than its
sibling nav links, and the ::after underline could end up
misaligned or hidden behind the default button chrome.
font-size is intentionally NOT re-declared here (unlike the previous
version) - .navlinks a inherits its size from .navlinks itself, which
is what correctly shrinks from 14.5px to 13px at the mobile breakpoint
below. A hardcoded value here would silently ignore that and stay
14.5px on mobile, which is exactly why "Benchmarks" looked a
different size than its siblings there. */
appearance: none;
background: none;
border: none;
cursor: pointer;
font: inherit;
position: relative;
padding: 4px 0;
color: var(--text-dim);
transition: color .2s;
}
.nav-plain-button:hover { color: var(--text); }
.nav-plain-button::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--accent);
transition: width .25s ease;
}
.nav-plain-button:hover::after { width: 100%; }
.nav-plain-button.is-active { color: var(--text); }
.nav-plain-button.is-active::after { width: 100%; }
.nav-dropdown { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-dropdown-trigger {
/* Same reasoning as .nav-plain-button above: no hardcoded font-size, so
it correctly inherits .navlinks' own size at every breakpoint instead
of staying fixed at the desktop value on mobile. */
padding: 4px 0;
font: inherit;
color: var(--text-dim);
transition: color .2s;
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown-trigger[aria-expanded="true"] { color: var(--text); }
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
padding: 8px;
margin-top: 10px;
background: var(--panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-menu a {
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--text-dim);
}
.nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--text); }
.mobile-nav-heading {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-faint);
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.mobile-menu nav a.mobile-nav-sublink,
.mobile-menu nav button.mobile-nav-sublink {
font-size: 17px;
padding-left: 14px;
color: var(--text-dim);
}
/* Items without a real link yet (the coming-soon-overlay trigger buttons)
show a visible "Bald verfügbar" badge right in the list, instead of only
revealing that on click. */
.mobile-menu nav button.mobile-nav-sublink {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mobile-nav-badge {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-faint);
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
}
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-cart-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
color: var(--text);
flex-shrink: 0;
}
.header-cart-link svg { width: 100%; height: 100%; }
.header-cart-count {
position: absolute;
top: -8px;
right: -10px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-text);
font-size: 10.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.header-menu-toggle {
display: flex;
width: 26px;
height: 26px;
/* Missing in the real source (a Shopify never picks up
WordPress/Storefront's generic "button { padding: 0.618em 1.41575em }"
reset, so it never needed its own padding:0 to cancel it) - here it
was inflating this button from 26px to ~45px, same bug as the
wishlist heart. */
padding: 0;
border: none;
background: none;
align-items: center;
justify-content: center;
color: var(--text);
flex-shrink: 0;
}
.hamburger-toggle { position: relative; }
.hamburger-line {
position: absolute;
left: 4px;
right: 4px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.hamburger-line:nth-child(1) { top: 7px; }
.hamburger-line:nth-child(2) { top: 13px; }
.hamburger-line:nth-child(3) { top: 19px; }
.hamburger-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
top: 13px;
transform: rotate(45deg);
}
.hamburger-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
top: 13px;
transform: rotate(-45deg);
}
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: var(--bg);
padding: 20px 24px 32px;
display: flex;
flex-direction: column;
gap: 28px;
transform: translateX(100%);
transition: transform .3s ease;
overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-head .header-menu-toggle { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a,
.mobile-menu nav button {
font-family: var(--disp);
font-size: 20px;
padding: 12px 0;
border-bottom: 1px solid var(--border-soft);
color: var(--text);
display: block;
width: 100%;
text-align: left;
}
body.menu-open { overflow: hidden; }
@media (max-width: 860px) {
.headrow { flex-wrap: wrap; }
.navlinks {
display: flex;
order: 3;
flex: 1 0 100%;
gap: 18px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
overflow-x: auto;
white-space: nowrap;
font-size: 13px;
scrollbar-width: none;
}
.navlinks::-webkit-scrollbar { display: none; }
.header-menu-toggle { display: flex; }
}
/* Hidden on phones and tablets (incl. iPad in both orientations) - the
header CTA is desktop-only, separate from the 860px nav/hamburger
breakpoint above since tablets are wider than that. */
@media (max-width: 1024px) {
.header-cta { display: none; }
}
/* --------------------------------------------------------------------------
Wishlist
-------------------------------------------------------------------------- */
.wishlist-toggle {
position: absolute;
/* Top-left on desktop (original placement); moved to bottom-left only on
mobile (see the max-width: 619px override below) at the user's
request. Also made noticeably more visible: the old 55%-transparent
dark circle with a dim icon color blended into darker product photos
and read as "just black". A more opaque background, a real shadow for
edge definition against any photo, and the brighter --text colour
(not --text-dim) fix that. */
top: 4px;
left: 4px;
z-index: 3;
width: 30px;
height: 30px;
/* WordPress/Storefront's own generic "button { padding: 0.618em
1.41575em }" reset otherwise adds real padding on top of the 30px
width above (this button never set its own padding to cancel it out),
inflating the circle to ~47px and throwing off the SVG's centering. */
padding: 0;
box-sizing: border-box;
border-radius: 50%;
background: color-mix(in srgb, var(--bg) 80%, transparent);
border: 1px solid var(--border-soft);
box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
transition: color .2s, border-color .2s, background .2s;
}
@media (max-width: 619px) {
.wishlist-toggle { top: auto; bottom: 4px; }
}
/* The wishlist heart button also lives inside .icon-panel (same as the
original), which collides with ".icon-panel svg { width:64%; height:64%
}" - that rule is meant for the placeholder PC-tower icon shown when a
product has no photo, but has identical (0,1,1) specificity to this one,
so it was winning the tie and computing the heart's svg to 0px (an SVG
has no intrinsic width to fall back to). Scoped one level tighter here
so it reliably wins regardless of source order. */
.icon-panel .wishlist-toggle svg { width: 16px; height: 16px; }
.wishlist-toggle:hover,
.wishlist-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }
.wishlist-toggle.is-active { color: var(--accent); border-color: var(--accent); }
.wishlist-toggle.is-active svg { fill: var(--accent); }
.wishlist-toggle--inline {
position: static;
margin-left: auto;
width: 28px;
height: 28px;
background: transparent;
}
.wishlist-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(360px, 100%);
z-index: 210;
background: var(--bg);
border-left: 1px solid var(--border-soft);
padding: 20px 20px 32px;
display: flex;
flex-direction: column;
gap: 18px;
transform: translateX(100%);
transition: transform .3s ease;
overflow-y: auto;
}
.wishlist-drawer.open { transform: translateX(0); }
.wishlist-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--disp);
font-size: 18px;
}
.wishlist-drawer-body { display: flex; flex-direction: column; gap: 14px; }
.wishlist-empty { color: var(--text-dim); font-size: 14px; }
body.wishlist-open { overflow: hidden; }
.wishlist-item { display: flex; align-items: center; gap: 12px; }
.wishlist-item-media { width: 54px; height: 54px; border-radius: 8px; }
.wishlist-item-media svg { width: 40%; height: 40%; }
.wishlist-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
text-align: left;
color: var(--text);
}
.wishlist-item-info span:first-child {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wishlist-item-remove {
width: 26px;
height: 26px;
padding: 0;
border: none;
background: none;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
}
.wishlist-item-remove svg { width: 14px; height: 14px; }
.wishlist-item-remove:hover { color: var(--accent); }
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
border-top: 1px solid var(--border-soft);
background: var(--bg-alt);
padding: 32px 0 30px;
position: relative;
z-index: 1;
}
.foot-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.foot-brand { display: flex; flex-direction: column; gap: 16px; }
.foot-social { display: flex; gap: 12px; }
/* Each icon is now its own real, coloured logo badge (own rounded-square
background baked into the svg) instead of a plain currentColor outline,
so the extra circular border+background this link used to draw around
it would just double up as a frame-around-a-frame - dropped in favour
of a plain hover lift instead. */
.foot-social a {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s;
}
.foot-social a svg { width: 32px; height: 32px; }
.foot-social a:hover { transform: translateY(-2px); }
.foot-cols { display: flex; gap: 32px; flex-wrap: wrap; }
@media (min-width: 620px) {
.foot-cols { gap: 60px; }
}
.foot-col h5 {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
}
.foot-col a { display: block; font-size: 13.5px; color: var(--text-dim); margin-bottom: 9px; }
.foot-col a:hover { color: var(--text); }
.foot-contact-intro { font-size: 13.5px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
.foot-legal-link { color: #6ea8ff; }
.foot-legal-link:hover { color: #93bfff; }
.foot-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
font-size: 12.5px;
color: var(--text-faint);
font-family: var(--mono);
}
/* Side by side left too little room for each line on a narrow screen,
wrapping mid-phrase (even mid-word in "Zero-PC") - stacked and centered
instead, so each line gets the full width and wraps naturally if at
all. */
@media (max-width: 500px) {
.foot-bottom { flex-direction: column; gap: 6px; text-align: center; }
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
z-index: 1;
padding: 24px 0 4px;
max-width: 640px;
}
/* The section right after the hero (top-3 builds) shouldn't add its own
full top padding on top of the hero's - that's what created the large
empty gap between the hero buttons and "Unsere Builds" on mobile. */
.hero + section { padding-top: 18px; }
@media (min-width: 860px) {
.hero + section { padding-top: 28px; }
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 22px;
}
.eyebrow::before { content: '//'; color: var(--text-faint); }
.hero p.lead { font-size: 17px; color: var(--text-dim); max-width: 460px; margin: 22px 0 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Real review-average line under the CTAs - reuses .pc-rating's markup
(star-rating.liquid) but sized up to match the hero's own scale. Fills
some of the hero's empty space below the buttons with real, existing
review data instead of decorative padding or invented copy. */
.hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-trust .pc-rating { margin-bottom: 0; font-size: 15px; gap: 8px; }
.hero-trust .pc-rating .stars { font-size: 17px; }
.hero-trust-label { font-size: 13.5px; color: var(--text-faint); }
.pc-price { font-family: var(--disp); font-size: 26px; font-weight: 700; color: var(--accent); }
.pc-price-old { font-family: var(--mono); font-size: 14px; color: var(--text-faint); text-decoration: line-through; }
@media (min-width: 860px) {
/* Reduced (was 56px 0 28px) - less empty vertical space on desktop now
that the hero is single-column again (no Sale card, no trust line). */
.hero { padding: 36px 0 16px; }
}
/* Hero + Sale card: two columns side by side on desktop, stacked on mobile.
Only applies when a Sale card is actually configured - a plain hero
keeps its narrower single-column max-width above.
v1 variant: kept compact and centered rather than stretched edge to edge
- a capped max-width + margin: auto centers the whole text+card group
within .wrap, and the text keeps its own max-width instead of growing to
fill all remaining space, so there's consistent breathing room on both
the outer edge and between the text and the card. */
.hero--with-sale {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px;
}
@media (min-width: 960px) {
.hero--with-sale {
flex-direction: row;
align-items: center;
gap: 40px;
}
/* Widened from 460px so the heading wraps across fewer, more evenly
balanced lines instead of several short/uneven ones - per feedback
that the text should "stretch a bit longer" without changing the
wording, just how it wraps. */
.hero--with-sale .hero-text { flex: 1 1 0; min-width: 0; max-width: 540px; }
}
.hero-sale-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 20px;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 380px;
cursor: pointer;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hero-sale-card:hover {
border-color: #4a4438;
transform: translateY(-5px);
box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .6);
}
.hero-sale-card:focus-visible { outline: none; }
@media (min-width: 960px) {
/* Narrower + pushed further right than the first pass, so the heading
column gets noticeably more room to breathe. */
.hero-sale-card { flex: 0 0 300px; max-width: 300px; }
}
.hero-sale-badge-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 16px;
}
.hero-sale-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-dim);
}
.hero-sale-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #3ecf6a;
box-shadow: 0 0 0 0 rgba(62, 207, 106, .6);
animation: hero-sale-pulse 1.8s infinite;
flex-shrink: 0;
}
@keyframes hero-sale-pulse {
0% { box-shadow: 0 0 0 0 rgba(62, 207, 106, .55); }
70% { box-shadow: 0 0 0 6px rgba(62, 207, 106, 0); }
100% { box-shadow: 0 0 0 0 rgba(62, 207, 106, 0); }
}
.hero-sale-ribbon {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
color: var(--accent-text);
background: var(--accent);
border-radius: 6px;
padding: 5px 10px;
white-space: nowrap;
}
.hero-sale-media { height: auto; aspect-ratio: 1 / 1; margin-bottom: 18px; }
.hero-sale-media img { object-fit: contain; }
.hero-sale-media svg { width: 46%; height: 46%; }
.hero-sale-tagline { font-size: 13.5px; color: var(--text-dim); margin: -4px 0 18px; }
/* ==========================================================================
Advantages strip
========================================================================== */
.strip {
position: relative;
z-index: 1;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: var(--bg-alt);
}
/* Compact copy of a few of the same facts, pinned at the very top of the
viewport (above the header, which shifts down to sit right below it
while visible - see the --sticky-strip-active-h var set in
assets/theme.js) once the real strip has scrolled out of view - same
idea as the persistent top bar on mifcom.de. A visible border + shadow
make clear it's a floating overlay, not a normal part of the page. */
.strip-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 110;
background: var(--bg-alt);
border-bottom: 2px solid var(--accent);
box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
transform: translateY(-100%);
opacity: 0;
transition: transform .16s ease, opacity .16s ease;
}
.strip-sticky.is-visible { transform: translateY(0); opacity: 1; }
.strip-sticky-inner {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
padding: 11px 20px;
}
.strip-sticky-item { font-size: 15px; color: var(--text-dim); white-space: nowrap; display: inline-flex; align-items: center; }
.strip-sticky-item b { font-family: var(--disp); color: var(--accent); margin-right: 4px; display: inline-flex; align-items: center; }
/* The number-vs-glyph size-matching problem is gone now that "∞" renders
as a real icon (see icon-infinity.liquid) instead of relying on a font
glyph that never looked right at any size - its dimensions are set
directly in pixels below instead of scaled with font-size. */
/* First attempt (22x11px) was too conservative and still read as smaller
than the bold "48"/"12" numbers next to it - sized up noticeably. */
/* Pulled a bit closer to the item before it (Garantie) - the shared flex
gap applies evenly between every item, so a negative margin on just
this one shifts it left without also tightening the Versand/Garantie
gap. Icon bumped up minimally too. */
.strip-sticky-item--symbol { margin-left: -8px; }
.strip-sticky-item--symbol b svg { width: 54px; height: 27px; }
/* Short label variant (e.g. "Support" instead of "Lebenslanger Support")
for the mobile sticky bar, set per-block via the "short_title" setting -
only one of the two is ever visible at a time. Falls back to just the
plain title text with no wrapping span when short_title is blank (see
the {% else %} in advantages-strip.liquid), so items without a short
variant are completely unaffected. */
.strip-sticky-title-short { display: none; }
@media (max-width: 620px) {
/* Text and the ∞ icon sized up per explicit "größer" feedback - the
previous 10px/24x12 was reading as too small. Grown text/icon offset
by tightening gap and padding further than before, so the row's total
width stays roughly where it was and doesn't reopen the wrapping bug
that's recurred every time this element grew (v88, v95, v102, v104). */
.strip-sticky-inner { gap: 3px 4px; padding: 8px 8px; }
.strip-sticky-item { font-size: 11px; }
.strip-sticky-item b { margin-right: 3px; }
/* The desktop -8px pull isn't needed here - the gap is already tight
enough on its own, stacking both would look overcorrected. */
.strip-sticky-item--symbol { margin-left: 0; }
.strip-sticky-item--symbol b svg { width: 36px; height: 18px; }
.strip-sticky-title-full { display: none; }
.strip-sticky-title-short { display: inline; }
}
/* 2-per-row from the smallest screen up (was 1-per-row stacked below
620px) - two side by side, the other two directly underneath, for
quicker scanning on mobile instead of a long single-column stack. */
.strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; padding: 42px 32px; }
/* Number on top, title + description stacked below it - not side by side
with the number anymore. That gives the description the item's full
width to wrap in (instead of squeezed into a narrow column next to the
number) and makes it start flush under the number's left edge, instead
of looking like two separately-aligned columns. */
.strip-item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 0 0;
border-top: 1px solid var(--border-soft);
min-width: 0;
}
.strip-text { min-width: 0; }
.strip-item:first-child,
.strip-item:nth-child(2) { border-top: none; padding-top: 0; }
.strip-num {
font-family: var(--mono);
font-size: 26px;
font-weight: 600;
line-height: 1;
color: var(--accent);
}
.strip-num sup { font-size: 13px; color: var(--text-faint); font-weight: 500; }
.strip-text b { display: block; font-family: var(--disp); font-size: 15px; margin-bottom: 4px; }
.strip-text span { font-size: 13.5px; color: var(--text-dim); }
/* "∞" now renders as a real icon (icon-infinity.liquid: two even loops,
a controlled stroke-width) instead of relying on the font's own glyph,
which never looked right (too small, uneven loops, too bold) at any
size tried before. Sized directly in pixels rather than scaled off
font-size. The title/description still get a small bump so the item
overall reads as equally prominent, not just the icon alone. */
.strip-num svg { display: block; width: 46px; height: 23px; }
.strip-item--symbol .strip-text b { font-size: 17.5px; }
.strip-item--symbol .strip-text span { font-size: 14.5px; }
@media (min-width: 860px) {
/* All 4 advantages in one row now that there are 4 again (Stresstest was
re-added) - was 3 columns, which pushed the 4th item down onto its
own half-empty row instead of sitting inline with the others. */
.strip-inner { grid-template-columns: repeat(4, 1fr); gap: 0; }
.strip-item { padding: 0 24px; border-top: none; border-left: 1px solid var(--border-soft); }
.strip-item:first-child { border-left: none; padding-left: 0; }
}
/* ==========================================================================
PC cards
========================================================================== */
.pc-filter-empty {
text-align: center;
color: var(--text-dim);
font-size: 14px;
padding: 24px;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
margin-bottom: 20px;
}
/* This container-width override has swung back and forth several rounds
now (1160 default -> 1400 -> reverted to 1160 -> 1280 -> here removed
again) chasing "bigger"/"smaller" feedback about the cards. Removed
entirely this time and left at the site's normal --page-width (1160px)
- card size on desktop is now controlled by the aspect-ratio below
instead of also being pulled on by this container width. */
/* Same idea on mobile, the other direction: the PC grid's own .wrap side
padding (32px, same as every other section) ate a lot of a phone's
narrow width - reduced just here so the 2-up cards stretch closer to
the screen edge and end up bigger, instead of touching a wide margin
on both sides. */
@media (max-width: 767px) {
/* Pushed even closer to the true screen edge than before (was 12px). */
[data-pc-section] .wrap { padding: 0 6px; }
}
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Cards stand alone (one per row) on mobile instead of forcing 3 tiny ones
into a row - the old cramped 3-per-row treatment further down is gone,
replaced by the same full-size card styling used at desktop widths. */
@media (max-width: 767px) {
.pc-grid { grid-template-columns: 1fr; gap: 18px; }
}
/* The homepage's regular PCs stand in pairs (2 per row) instead of 3 -
scoped to this modifier only, so /pages/builds' own .pc-grid usage is
unaffected. Stays 2-per-row on mobile too now (was 1-per-row there) -
the card content below gets a compact treatment at that width so two
full-detail cards still fit legibly side by side on a phone. */
.pc-grid--pairs { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) {
/* Scaled up close to full desktop-card sizing per an explicit size
reference - the earlier version compacted this much more
aggressively (hid the tier label, much smaller fonts throughout). */
.pc-grid--pairs { gap: 8px; }
.pc-grid--pairs .pc-card { padding: 14px 9px 16px; }
.pc-grid--pairs .pc-card .icon-panel { aspect-ratio: 2 / 3; margin-bottom: 12px; }
.pc-grid--pairs .pc-card .pc-tier { display: block; font-size: 10px; margin-bottom: 6px; }
.pc-grid--pairs .pc-card .pc-rating { display: none; }
.pc-grid--pairs .pc-card .pc-card-tagline { display: none; }
.pc-grid--pairs .pc-card h3 { font-size: 18px; line-height: 1.2; margin-bottom: 12px; }
.pc-grid--pairs .pc-card .pc-specs { row-gap: 8px; margin-bottom: 14px; }
.pc-grid--pairs .pc-card .pc-specs li span,
.pc-grid--pairs .pc-card .pc-specs li b { font-size: 12px; padding-bottom: 6px; }
.pc-grid--pairs .pc-card .pc-price-row { margin-bottom: 14px; }
.pc-grid--pairs .pc-card .pc-price { font-size: 20px; }
.pc-grid--pairs .pc-card .pc-price-old { font-size: 11px; }
.pc-grid--pairs .pc-card .btn { padding: 10px 8px; font-size: 12.5px; white-space: normal; line-height: 1.2; text-align: center; }
/* The base ribbon above is now sized generously for the wide desktop
card ("größer auf der PC-Ansicht") - too big for this narrow 2-per-row
mobile card, so it keeps its own smaller wrap+ribbon here. Shrunk
further per explicit "auf der Handy-Ansicht etwas kleiner" feedback -
desktop's size above is untouched. */
.pc-grid--pairs .pc-card .pc-sold-out-ribbon-wrap { width: 90px; height: 90px; }
.pc-grid--pairs .pc-card .pc-sold-out-ribbon { top: 19px; left: -30px; width: 125px; }
.pc-grid--pairs .pc-card .pc-sold-out-ribbon span { padding: 6px 0; font-size: 11px; }
}
.pc-extra-grid {
max-height: 0;
overflow: hidden;
opacity: 0;
margin-top: 0;
transition: max-height .5s ease, opacity .5s ease, margin .5s ease;
}
.pc-extra-grid.open { max-height: 6000px; opacity: 1; margin-top: 10px; }
.pc-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
.pc-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.pc-grid--four { grid-template-columns: 1fr; }
}
.pc-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 20px 22px;
display: flex;
flex-direction: column;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
position: relative;
overflow: hidden;
}
.pc-card:hover {
border-color: #4a4438;
transform: translateY(-7px) scale(1.015);
box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .6);
}
.pc-card .icon-panel img { transition: transform .4s ease; }
.pc-card:hover .icon-panel img { transform: scale(1.06); }
/* Orange highlight treatment removed per explicit request - the
"Hervorgehoben" checkbox on a card no longer changes its color, it now
looks the same as every other card (the z-index/hover tweaks below are
unrelated to the orange styling, left as-is). */
@media (min-width: 620px) {
.pc-card.highlight { z-index: 1; }
.pc-card.highlight:hover { transform: translateY(-7px) scale(1.015); }
}
.pc-card { cursor: pointer; }
.pc-card:focus-visible { outline: none; }
.pc-tier {
font-family: var(--mono);
font-size: 12px;
color: var(--text-faint);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.pc-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 20px; }
.pc-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 12.5px; }
.pc-rating .stars { margin-bottom: 0; font-size: 13px; }
.pc-rating-value { font-weight: 600; color: var(--text-dim); }
.pc-rating-count { color: var(--text-faint); }
/* Every row's label/value share ONE grid across the whole list (not a
separate grid per ), with the label column sized to fit the longest
label ("Storage") and nothing more - the value column then gets every
remaining pixel, and can never visually collide with the label since
they're always separate grid columns, no matter how wide the value text
gets. becomes a pure grouping element (display: contents) so its
two children (the label and the value ) become direct grid
items and land in the same two columns on every row. */
.pc-specs {
list-style: none;
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 10px;
row-gap: 9px;
margin-bottom: 24px;
min-width: 0;
/* Guards the "Preise auf gleicher Höhe" fix above against a second,
separate cause: a product missing one of the 4 spec attributes
(CPU/GPU/RAM/Speicher) renders one fewer row here, which would shrink
this list's own height and shift the price above it back out of
alignment with cards that have all 4 filled in. Locked to the height
4 full rows actually take up, so a 3-row card still reserves the same
space. */
min-height: 145px;
}
.pc-specs li { display: contents; }
.pc-specs li span,
.pc-specs li b {
font-size: 13px;
padding-bottom: 9px;
border-bottom: 1px solid var(--border-soft);
font-family: var(--mono);
color: var(--text-dim);
}
.pc-specs li b { color: var(--text); font-weight: 500; font-family: var(--body); }
/* margin-top was "auto" here before, pushing the price down to keep the
button(s) pinned to the card's bottom edge - but that meant the price
itself sat at a DIFFERENT height on every card depending on how many
buttons follow it (1 for sold-out cards, 2 for in-stock ones), which is
exactly the "Preis auf gleicher Höhe" mismatch reported live (43px gap
between a sold-out and an in-stock card's price row, confirmed via
measurement). Moved the auto margin onto .pc-card-details-btn instead
(always the first button after the price, in stock or not) so the price
now sits right after the specs list at the same height on every card,
while the button(s) still get pushed down to the bottom as before. */
.pc-card .pc-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; margin-bottom: 18px; }
.pc-card .btn { width: 100%; justify-content: center; }
.pc-card .icon-panel { margin-bottom: 20px; }
/* Top-3 grid + "Alle Builds" page: image scales with the column width and
stays the dominant element, text is trimmed down to the essentials.
Reduced again on desktop (4/5 -> 5/6) per follow-up feedback that the
whole card was still too big - combined with removing the wider
container above, this should be a more noticeable reduction than the
aspect-ratio change alone. Mobile keeps its own separate, bigger ratio
below (unaffected). Still object-fit: cover (the default, see
.icon-panel img), so it always fills the box with no letterboxing/black
bars, unlike the hero Sale card's contain treatment. */
.pc-grid .pc-card .icon-panel { height: auto; aspect-ratio: 5 / 6; }
.pc-card-tagline { font-size: 13.5px; color: var(--text-dim); margin: -12px 0 16px; line-height: 1.4; }
@media (max-width: 767px) {
/* One full-width card per row (see the .pc-grid breakpoint above) gets
all the room the desktop card already has, so it reuses the exact same
sizing instead of a separate cramped ruleset - tier label, rating and
tagline all stay visible instead of being stripped out. */
.pc-grid .pc-card { padding: 18px 16px 20px; }
.pc-grid .pc-card .icon-panel { aspect-ratio: 1 / 1; margin-bottom: 16px; }
.pc-grid .pc-card h3 { font-size: 20px; margin-bottom: 8px; }
.pc-grid .pc-card .pc-card-tagline { margin: -4px 0 14px; }
.pc-grid .pc-card .pc-specs { margin-bottom: 20px; }
.pc-grid .pc-card .pc-price { font-size: 22px; }
.pc-grid .pc-card .btn { padding: 8px 16px; font-size: 14px; }
}
/* The 5-PC layout (.pc-grid--four: 4 columns desktop, 2 tablet, 1 phone)
never goes as narrow per-card as the old always-3-columns grid did, so
the ultra-compact rules above (tuned for ~110px-wide cards) made the
image look oversized and the text illegibly small once reused here at
much wider column widths. Same specificity as the rules above (two
classes), placed after them so it wins by source order. */
.pc-grid--four .pc-card .icon-panel { aspect-ratio: 4 / 3; }
@media (max-width: 619px) {
.pc-grid--four {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
gap: 16px;
}
.pc-grid--four .pc-card { padding: 14px 12px 16px; }
.pc-grid--four .pc-card .icon-panel { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.pc-grid--four .pc-card .pc-tier { display: block; }
.pc-grid--four .pc-card .pc-rating { display: flex; }
.pc-grid--four .pc-card h3 { font-size: 16px; line-height: 1.25; margin-bottom: 10px; }
.pc-grid--four .pc-card .pc-specs {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 10px;
row-gap: 7px;
margin-bottom: 14px;
}
.pc-grid--four .pc-card .pc-specs li { display: contents; }
.pc-grid--four .pc-card .pc-specs li span,
.pc-grid--four .pc-card .pc-specs li b {
font-size: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-soft);
}
.pc-grid--four .pc-card .pc-price-row { margin-bottom: 12px; }
.pc-grid--four .pc-card .pc-price { font-size: 18px; }
.pc-grid--four .pc-card .btn { padding: 10px 14px; font-size: 13px; white-space: normal; text-align: center; line-height: 1.2; }
}
.pc-card-details-btn { margin-top: auto; margin-bottom: 10px; }
.pc-card-add-form { display: block; }
/* --------------------------------------------------------------------------
PC category filter (reuses the same data-category-filter/applyCategoryFilter
JS already built for the header's Katalog dropdown - here it's a set of
on-page pill buttons instead of navigation links, so it works standalone
on /pages/builds regardless of where the merchant's own nav menu links
point to.)
-------------------------------------------------------------------------- */
.pc-category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pc-category-filter-btn {
font-family: var(--mono);
font-size: 12.5px;
color: var(--text-dim);
background: none;
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 16px;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.pc-category-filter-btn:hover { color: var(--text); border-color: var(--border-soft); }
.pc-category-filter-btn.is-active {
color: var(--accent-text);
background: var(--accent);
border-color: var(--accent);
}
/* --------------------------------------------------------------------------
PC sort toolbar
-------------------------------------------------------------------------- */
.pc-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin-bottom: 20px;
}
.pc-toolbar-label {
font-family: var(--mono);
font-size: 12px;
color: var(--text-faint);
}
.pc-toolbar-select {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
font-size: 13.5px;
font-family: var(--body);
}
.more-wrap { display: flex; justify-content: center; }
@media (min-width: 620px) {
/* Tightened from 22px per explicit "Spalt zwischen den PCs sollte
weniger werden" - the bulk of that gap was actually the grid-row
stretch bug fixed above (li.product.pc-card height:100%), this just
trims the intentional design gap on top of that fix. */
.pc-grid { gap: 16px; }
}
/* --------------------------------------------------------------------------
PC carousel ("weitere Builds")
-------------------------------------------------------------------------- */
.pc-carousel-wrap {
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--border-soft);
}
.pc-carousel-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 20px;
}
.pc-carousel-head .pc-toolbar { margin-bottom: 0; justify-content: flex-start; }
.pc-carousel-head h3 {
font-size: 18px;
color: var(--text-dim);
font-weight: 500;
}
/* Same look as .pc-carousel-head h3 above, used now that the sort toolbar
sits up by the section heading instead of paired with this one. */
.pc-carousel-standalone-heading {
font-size: 18px;
color: var(--text-dim);
font-weight: 500;
margin-bottom: 20px;
}
.pc-carousel {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 620px) {
.pc-carousel { gap: 20px; }
}
@media (max-width: 767px) {
.pc-carousel { grid-template-columns: 1fr; gap: 18px; }
}
.pc-carousel .pc-card .icon-panel { height: auto; aspect-ratio: 1 / 1; }
/* ==========================================================================
How it works
========================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: 28px; position: relative; }
.step { position: relative; padding-right: 20px; }
.step-num {
font-family: var(--mono);
font-size: 13px;
color: var(--bg);
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.step h4 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--text-dim); }
/* Inline link inside a step's own text (e.g. "Zusammenbauen" -> jumps to
and opens the matching FAQ answer) - styled to read as a small button-
like affordance rather than a plain text link, so it's obvious it's
clickable. */
.step-link {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.step-link:hover { color: var(--text); }
@media (min-width: 860px) {
.steps {
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.steps::before {
content: '';
position: absolute;
top: 19px;
left: 6%;
right: 6%;
height: 1px;
background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
z-index: 0;
}
}
/* ==========================================================================
About
========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.about-body p { color: var(--text-dim); font-size: 15px; margin-bottom: 16px; }
.about-body p:last-child { margin-bottom: 0; }
/* Lead sentence styled a step bigger/brighter than the rest, so the text
reads as a deliberate intro + supporting paragraphs instead of one
undifferentiated block. */
.about-body p:first-child {
font-family: var(--disp);
font-size: 19px;
font-weight: 600;
color: var(--text);
line-height: 1.35;
}
.about-stats {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.about-stat {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 18px 22px;
border-bottom: 1px solid var(--border-soft);
background: var(--panel);
}
.about-stat:first-child { padding-top: 22px; }
.about-stat:last-child { border-bottom: none; padding-bottom: 22px; }
.about-stat span { font-size: 13.5px; color: var(--text-dim); }
.about-stat b { font-family: var(--disp); font-size: 20px; color: var(--accent); }
.about-stats-swap { position: relative; min-height: 262px; }
.about-swap-panel {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.about-swap-panel.is-visible { opacity: 1; pointer-events: auto; }
.about-swap-dots { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
.about-swap-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-faint);
transition: background .3s ease;
}
.about-swap-dot.is-active { background: var(--text); }
.about-scan-visual {
position: relative;
height: 106px;
background: var(--bg-alt);
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.about-scan-visual svg { width: 38px; height: 38px; color: var(--text-faint); }
.about-scan-line {
position: absolute;
top: 0;
left: -26%;
width: 22%;
height: 100%;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-left: 1px solid var(--accent);
border-right: 1px solid var(--accent);
animation: about-scan-sweep 2.6s linear infinite;
}
@keyframes about-scan-sweep {
0% { left: -26%; }
55% { left: 104%; }
100% { left: 104%; }
}
.about-scan-badge {
position: absolute;
top: 8px;
right: 8px;
background: var(--accent);
color: var(--accent-text);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: var(--radius-sm);
letter-spacing: .4px;
animation: about-scan-pulse 2s ease-in-out infinite;
}
@keyframes about-scan-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* --------------------------------------------------------------------------
Benchmarks
-------------------------------------------------------------------------- */
.benchmarks-widget { margin-top: 28px; }
.benchmarks-controls {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.benchmarks-games { display: flex; flex-wrap: wrap; gap: 8px; }
.benchmarks-game {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: var(--panel);
color: var(--text-dim);
font-size: 13.5px;
transition: color .2s, border-color .2s;
}
.benchmarks-game svg, .benchmarks-game img { width: 15px; height: 15px; border-radius: 3px; object-fit: contain; }
.benchmarks-game.is-active { border-color: var(--accent); color: var(--accent); }
.benchmarks-res {
display: flex;
gap: 6px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 3px;
}
.benchmarks-res-btn { padding: 6px 14px; border-radius: 4px; font-size: 13px; color: var(--text-dim); }
.benchmarks-res-btn.is-active { background: var(--accent); color: var(--accent-text); }
.benchmarks-chart-title {
font-family: var(--disp);
font-size: 16px;
color: var(--text);
text-align: center;
margin: 0 0 16px;
}
.benchmarks-chart { display: flex; flex-direction: column; gap: 16px; }
.benchmarks-bar-row {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
gap: 14px;
}
.benchmarks-bar-label { font-size: 14px; color: var(--text); }
.benchmarks-bar-track {
height: 26px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--border-soft);
overflow: hidden;
}
.benchmarks-bar-fill {
height: 100%;
width: 0;
background: var(--accent);
/* Set from JS per-bar based on its FPS value relative to the fastest PC
shown for the current game/res/quality - higher FPS reads as a fuller,
more vivid orange, lower FPS as a fainter one. Default here covers the
instant before JS runs. */
opacity: .35;
border-radius: 999px;
transition: width .4s ease, opacity .3s ease, background .2s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
overflow: hidden;
}
.benchmarks-bar-row.is-sold-out .benchmarks-bar-fill { background: var(--text-faint); opacity: 1; }
.benchmarks-bar-row.is-highlighted .benchmarks-bar-label { color: var(--accent); }
.benchmarks-bar-sold-out-note {
display: block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .04em;
color: var(--text-faint);
margin-top: 2px;
}
.benchmarks-bar-fill-value {
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--bg);
white-space: nowrap;
}
.benchmarks-note { margin-top: 22px; font-size: 12px; color: var(--text-faint); }
@media (max-width: 560px) {
.benchmarks-bar-row { grid-template-columns: 80px 1fr; gap: 8px; }
}
/* Restored per explicit request to bring back the early-version layout:
text on the left, the animated stats/scan panel on the right - stacked
single-column below this breakpoint (mobile), same as always. */
@media (min-width: 860px) {
.about-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; }
}
/* ==========================================================================
Reviews
========================================================================== */
.review-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.review-extra {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .5s ease, opacity .5s ease, margin .5s ease;
}
.review-extra.open { max-height: 3000px; opacity: 1; margin-top: 20px; }
.review-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
}
.stars { color: var(--accent); font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card p { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
.review-who {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--mono);
font-size: 12px;
color: var(--text-faint);
}
.review-who b { color: var(--text); font-family: var(--body); font-weight: 600; font-size: 13px; }
@media (min-width: 860px) {
.review-grid, .review-extra { grid-template-columns: repeat(3, 1fr); }
}
/* --------------------------------------------------------------------------
Reviews: auto-scrolling ticker (replaces grid + "mehr lesen"), now shown
on desktop too, not just mobile - the grid/toggle stay in the markup
(recoverable) but are hidden at every width now instead of only below
860px.
-------------------------------------------------------------------------- */
.review-marquee {
display: block;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}
.review-marquee-track {
display: flex;
width: max-content;
gap: 16px;
animation: reviewMarquee 90s linear infinite;
}
/* Hover-to-pause removed per explicit request - keeps scrolling continuously
under the mouse now. :focus-within is kept (not asked to remove, and
dropping it would hurt keyboard users - without it, tabbing into a card
to read it would have the row keep sliding out from under the focused
card with no way to stop it). */
.review-marquee:focus-within .review-marquee-track { animation-play-state: paused; }
.review-marquee-card { width: 240px; flex-shrink: 0; }
@media (min-width: 860px) {
/* Wider cards on desktop so the ticker doesn't look like an oversized
mobile component stretched across a much wider viewport. */
.review-marquee-card { width: 300px; }
.review-marquee-track { gap: 20px; }
}
@keyframes reviewMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.review-marquee-track { animation: none; }
}
#bewertungen .review-grid,
#bewertungen .review-extra,
#bewertungen .more-wrap { display: none; }
/* ==========================================================================
Product page
========================================================================== */
/* Single-column flow: big image block first, specs/buy info right below it -
not a side-by-side grid anymore, so the PC photo can be shown as large as
possible before anything else. */
.product-inner {
display: flex;
flex-direction: column;
gap: 28px;
}
.product-image { height: 340px; margin-bottom: 12px; }
.product-thumbs { display: flex; gap: 10px; }
.product-thumbs img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.product-description { color: var(--text-dim); line-height: 1.7; margin: 20px 0 24px; }
.product-option { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.product-option select { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; }
/* ==========================================================================
Collection / list-collections / page / cart / 404
========================================================================== */
.collection-pagination { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.page-inner { max-width: 720px; }
.page-content { margin-top: 20px; color: var(--text-dim); line-height: 1.7; }
.page-back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-dim);
font-family: var(--body);
font-size: 13.5px;
text-decoration: none;
margin-top: 28px;
margin-bottom: 24px;
}
.page-back-link:hover { color: var(--text); }
.page-back-link svg { width: 16px; height: 16px; }
/* Shopify's own policy-page content (see layout/theme.liquid) has no
top padding of its own, unlike .page-inner above - added here so the
injected back link doesn't sit flush against the header. */
.policy-back-bar { padding-top: 28px; }
.policy-back-bar .page-back-link { margin-bottom: 0; }
/* Some breathing room before the "Weiter einkaufen" button so an empty
cart doesn't feel cramped right under the heading. */
.cart-empty { margin-top: 40px; }
.cart-empty p { margin-bottom: 20px; color: var(--text-dim); }
.cart-items { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.cart-item {
display: grid;
grid-template-columns: 56px 1fr;
align-items: center;
gap: 6px 14px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-soft);
}
.cart-item-media { width: 56px; height: 56px; }
.cart-item-info { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.cart-item-info span { font-size: 12px; color: var(--text-faint); }
.cart-item-controls { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cart-item-qty { width: 56px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.cart-item-remove {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: color-mix(in srgb, #E4382E 14%, transparent);
color: #E4382E;
flex-shrink: 0;
}
.cart-item-remove svg { width: 13px; height: 13px; }
.cart-item-remove:hover { background: color-mix(in srgb, #E4382E 24%, transparent); }
.cart-summary { display: flex; justify-content: space-between; padding-block: 20px; font-size: 18px; }
@media (min-width: 560px) {
.cart-item { grid-template-columns: 64px 1fr auto auto auto; gap: 16px; }
.cart-item-media { width: 64px; height: 64px; }
.cart-item-controls { display: contents; }
}
.cart-upsell { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.cart-upsell-title { font-family: var(--disp); font-size: 16px; margin-bottom: 16px; }
.cart-upsell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cart-upsell-item { display: flex; flex-direction: column; gap: 8px; }
.cart-upsell-media { width: 100%; height: 110px; }
.cart-upsell-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cart-upsell-name { color: var(--text); }
.cart-upsell-add { width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); }
.cart-upsell-add:hover { border-color: var(--accent); color: var(--accent); }
.not-found-inner { text-align: center; padding-block: 40px; }
.not-found-inner p { color: var(--text-dim); margin: 16px 0 28px; }
/* ==========================================================================
Trust badges
========================================================================== */
.trust-badges-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding-block: 36px;
}
.trust-badges-heading {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-faint);
text-align: center;
}
.trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px;
}
/* All 9 badges (8 payment + DHL) stretched out in a single row - was a
fixed repeat(8, ...) track list, so adding the 9th (DHL) badge had
nowhere to go but its own row underneath instead of sitting inline with
the rest ("DHL soll außen ran, nicht darunter"). Falls back to the
previous 2-row x 4-column arrangement once a single row would get too
cramped to stay readable. */
.trust-badges-grid {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 18px 24px;
max-width: 1100px;
margin: 0 auto;
}
.trust-badges-grid .trust-badge { display: flex; justify-content: center; min-width: 0; }
.trust-badges-grid .trust-badge-chip { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 900px) {
.trust-badges-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
.trust-badges-grid { gap: 14px; }
.trust-badges-grid .trust-badge-chip {
/* Explicit height (was padding-derived, plus white-space: normal let
the text wrap inside it) so it comes out reliably small on mobile
instead of depending on how the text happens to wrap. */
height: 20px;
padding: 0 8px;
font-size: 9px;
text-align: center;
line-height: 20px;
white-space: nowrap;
}
}
.trust-badge img {
height: 28px;
width: auto;
filter: grayscale(1) brightness(1.6);
opacity: .8;
transition: opacity .2s ease, filter .2s ease;
}
.trust-badge img:hover { filter: none; opacity: 1; }
/* Real, official payment icons via shop.enabled_payment_types (rendered
through Shopify's own payment_type_svg_tag filter in trust-badges.liquid)
- shown in full color as-is, no grayscale/opacity treatment like the
custom text-chip badges below (these come straight from Shopify, so no
logo/trademark concerns). */
.trust-badge-native-img,
.trust-badges .trust-badge svg {
height: 26px;
width: auto;
border-radius: 4px;
}
/* Shopify's own PayPal SVG has more built-in padding around the mark than
the other payment icons, so at the same fixed height it visually reads
slightly smaller - nudged up to compensate. 1.6x (and 1.2x on mobile)
turned out to be much too aggressive once all the real payment icons
were visible together (11 icons in a row) - PayPal clearly stood out as
the biggest. Dialed back to a much smaller correction. */
.trust-badge[data-payment-type="paypal" i] svg { transform: scale(1.15); }
@media (max-width: 900px) {
.trust-badge[data-payment-type="paypal" i] svg { transform: scale(1.05); }
}
.trust-badges--compact .trust-badge-native-img,
.trust-badges--compact .trust-badge svg { height: 18px; }
.trust-badge-chip {
display: inline-flex;
align-items: center;
/* Sized down further per follow-up feedback that it still read as too
big/long next to the native Shopify icons (height: 24px, was 26px,
was originally padding-derived at ~32px; padding tightened too, since
a text label is naturally wider than an icon mark and the goal here
is to get as close to that squarer shape as still-readable text
allows). */
height: 24px;
padding: 0 9px;
border-radius: 6px;
font-family: var(--disp);
font-weight: 700;
font-size: 11px;
letter-spacing: .01em;
}
/* A small generic icon (never a real trademarked logo - see the schema
info text) instead of a wide text-only pill, so Barzahlung/DHL read
closer to the compact, logo-like shape of the real payment icons next
to them instead of a noticeably wider text chip. */
.trust-badge-chip--icon { gap: 5px; padding: 0 8px; }
.trust-badge-chip--icon svg { width: 12px; height: 12px; flex-shrink: 0; }
.trust-badges-wrap.trust-badges--compact { padding-block: 0; align-items: flex-start; }
.trust-badges--compact .trust-badges { justify-content: flex-start; gap: 10px; }
.trust-badges--compact .trust-badge-chip { padding: 6px 12px; font-size: 11.5px; }
.trust-badges--compact .trust-badge img { height: 20px; }
/* ==========================================================================
Product gallery: thumbnail rail + large framed main image
(alternate "pc" template + build-detail overlay)
========================================================================== */
.product-gallery { display: flex; flex-direction: column; gap: 12px; }
/* The "cool frame" around the main image - no forced aspect-ratio or
object-fit:cover on the img itself, so real photos never get cropped.
The image is shown as large as the frame allows. */
.gallery-main {
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .55);
overflow: hidden;
}
.gallery-main img {
width: 100%;
max-width: 480px;
height: auto;
display: block;
margin: 0 auto;
border-radius: 6px;
}
.gallery-main.gallery-main--empty {
aspect-ratio: 4 / 3;
padding: 0;
border: 1px solid var(--border-soft);
box-shadow: none;
}
/* Thumbnails run horizontally underneath the main image, with arrow
buttons instead of a visible scrollbar for navigating past the edge. */
.gallery-thumbs-row { display: flex; align-items: center; gap: 6px; }
.gallery-thumbs {
display: flex;
flex-direction: row;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs-nav {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text-dim);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.gallery-thumbs-nav:hover { border-color: var(--accent); color: var(--accent); }
.gallery-thumbs-nav svg { width: 16px; height: 16px; }
.gallery-thumbs-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.gallery-thumb {
width: 92px;
height: 92px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
padding: 0;
background: var(--panel);
opacity: .6;
cursor: pointer;
transition: opacity .2s ease, border-color .2s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--accent); }
@media (min-width: 620px) {
.gallery-main { padding: 24px; }
.gallery-main img { max-width: 600px; }
.gallery-thumb { width: 108px; height: 108px; }
}
/* ==========================================================================
Product components list
========================================================================== */
.components-list {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.components-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 20px;
padding: 16px 22px;
border-bottom: 1px solid var(--border-soft);
background: var(--panel);
}
.components-row:last-child { border-bottom: none; }
.components-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.components-value { font-weight: 600; text-align: right; }
/* ==========================================================================
Shipping info
========================================================================== */
.shipping-points { display: grid; grid-template-columns: 1fr; gap: 28px; }
.shipping-point-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.shipping-point-icon svg { width: 22px; height: 22px; }
.shipping-point h4 { font-size: 16px; margin-bottom: 8px; }
.shipping-point p { font-size: 13.5px; color: var(--text-dim); }
@media (min-width: 620px) {
.shipping-points { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 990px) {
.shipping-points { grid-template-columns: repeat(4, 1fr); }
}
/* ==========================================================================
FAQ accordion
========================================================================== */
.faq-list { display: flex; flex-direction: column; max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:first-child { border-top: 1px solid var(--border-soft); }
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 4px;
background: none;
border: none;
text-align: left;
font-family: var(--disp);
font-size: 16px;
font-weight: 600;
color: var(--text);
cursor: pointer;
}
.faq-icon {
position: relative;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.faq-icon::before, .faq-icon::after {
content: '';
position: absolute;
top: 50%; left: 50%;
background: var(--accent);
transform: translate(-50%, -50%);
transition: transform .25s ease;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.faq-answer.open { max-height: 600px; }
.faq-answer-inner {
padding: 0 4px 20px;
color: var(--text-dim);
font-size: 14px;
line-height: 1.7;
}
/* ==========================================================================
Build detail overlay (shared styles, also used by the PC product template)
========================================================================== */
.build-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 400;
background: var(--bg);
overflow-y: auto;
}
.build-overlay.open { display: block; }
.build-overlay-topbar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
background: var(--bg);
border-bottom: 1px solid var(--border-soft);
}
.build-overlay-back {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: var(--text-dim);
font-family: var(--body);
font-size: 13.5px;
cursor: pointer;
}
.build-overlay-back:hover { color: var(--text); }
.build-overlay-back svg { width: 16px; height: 16px; }
.build-overlay-topbar-actions { display: flex; align-items: center; gap: 16px; }
.build-overlay-content { padding-top: 32px; padding-bottom: 60px; }
/* A bit more breathing room below the topbar specifically here, per
explicit feedback that the heading felt too close to the top. */
[data-warranty-overlay] .build-overlay-content { padding-top: 48px; }
.coming-soon-content {
max-width: 420px;
margin: 15vh auto 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.coming-soon-content h2 { font-size: 28px; }
.coming-soon-content p { color: var(--text-dim); }
.pc-modal-specs { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 6px; }
.pc-modal-specs li {
display: flex;
justify-content: space-between;
font-size: 13.5px;
padding-bottom: 9px;
border-bottom: 1px solid var(--border-soft);
font-family: var(--mono);
color: var(--text-dim);
}
.pc-modal-specs li b { color: var(--text); font-weight: 500; font-family: var(--body); }
/* --------------------------------------------------------------------------
Buy box: bordered spec/price/CTA card
-------------------------------------------------------------------------- */
.buy-box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .5);
}
.buy-box-header {
padding: 18px 22px 20px;
background: var(--bg);
border-bottom: 1px solid var(--border-soft);
}
.buy-box-header .pc-tier-row { margin-bottom: 6px; }
.buy-box-header .pc-tier-row .pc-tier { margin-bottom: 0; }
.buy-box-header h1 { font-size: 21px; line-height: 1.25; }
.buy-box-specs {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 18px;
padding: 20px 22px 4px;
}
.buy-box-specs li {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 14px;
font-family: var(--mono);
color: var(--text-dim);
}
.buy-box-specs li b { color: var(--text); font-weight: 600; font-family: var(--body); font-size: 16px; padding-left: 14px; }
.spec-toggle,
.spec-toggle:hover,
.spec-toggle:focus,
.spec-toggle:active {
display: flex;
align-items: center;
gap: 6px;
padding: 0;
border: none;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
/* The real a:focus-visible/button:focus-visible rule (near the top of this
file) gives an orange outline, but that's keyed to :focus-visible
specifically - some browsers still draw their own default (often a
purple/blue "Highlight"-colored box tied to the OS accent color) plain
:focus outline on a clicked button first. Explicit here so a mouse click
never shows that default box, only the real orange outline when it's
actually keyboard focus. */
.spec-toggle:focus {
outline: none;
}
.spec-toggle:focus-visible {
outline: none;
border-radius: 4px;
}
.spec-toggle-icon {
width: 14px;
flex-shrink: 0;
color: var(--accent);
font-weight: 700;
text-align: center;
}
.spec-toggle-icon::before { content: '+'; }
.spec-toggle[aria-expanded="true"] .spec-toggle-icon::before { content: '−'; }
.spec-detail {
display: none;
margin: 4px 0 0;
padding-left: 14px;
font-family: var(--body);
font-size: 11.5px;
font-weight: 400;
line-height: 1.4;
color: var(--text-faint);
}
.spec-toggle[aria-expanded="true"] ~ .spec-detail { display: block; }
.buy-box-price-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
padding: 18px 22px 4px;
}
.buy-box-price-row .pc-price { font-size: 32px; }
.buy-box-price-note { font-size: 12px; color: var(--text-faint); }
.benchmarks-pill-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--border-soft);
border-radius: 999px;
font-size: 12.5px;
font-family: inherit;
color: var(--text-dim);
flex-shrink: 0;
transition: color .2s, border-color .2s;
}
.benchmarks-pill-trigger svg { width: 14px; height: 14px; }
.benchmarks-pill-trigger:hover { border-color: var(--accent); color: var(--accent); }
.buy-box .pc-modal-buy-form,
.buy-box .pc-modal-buy-note { margin: 16px 22px 0; }
.buy-box-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
.buy-box-btn::after { content: '→'; }
/* "Sofort kaufen" sits right under "In den Warenkorb" - outline style
(not the solid accent fill) so the two are visually ordered as
primary/secondary, and a small gap instead of sitting flush against it. */
.buy-box-btn--now {
margin-top: 10px;
}
.buy-box-delivery {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--text-dim);
padding: 16px 22px 20px;
}
.buy-box-delivery-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ok);
flex-shrink: 0;
}
.pc-modal-buy-note {
font-size: 12.5px;
color: var(--text-faint);
text-align: center;
padding: 12px 0;
border: 1px dashed var(--border);
border-radius: 8px;
}
.pc-modal-payments { margin-top: 20px; text-align: center; }
.pc-modal-payments-label {
display: block;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 10px;
}
.pc-modal-payments .trust-badges { justify-content: center; gap: 8px; }
.pc-modal-payments .trust-badge-chip { padding: 6px 12px; font-size: 11.5px; }
.build-description {
color: var(--text-dim);
font-size: 15.5px;
line-height: 1.8;
margin-top: 20px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 32px;
box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .5);
}
.build-description p { margin-bottom: 12px; }
.build-description p:last-child { margin-bottom: 0; }
.build-description strong { color: var(--text); }
.pc-modal-support {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-soft);
text-align: center;
}
.pc-modal-support p {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 10px;
}
.pc-modal-support-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--accent);
}
.pc-modal-support-link svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
.wrap { padding-left: 20px; padding-right: 20px; }
}
/* ==========================================================================
Custom configuration request form ("Eigene Konfiguration")
========================================================================== */
.custom-config .sec-eyebrow { display: block; margin-bottom: 14px; }
.custom-config h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.01em; }
.custom-config-form { margin-top: 40px; }
.form-section-label {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-faint);
margin: 32px 0 16px;
}
.custom-config-form .form-section-label:first-of-type { margin-top: 0; }
.form-hint { font-size: 13.5px; color: var(--text-dim); margin-bottom: 18px; }
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 620px) {
.form-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; color: var(--text-dim); }
.form-field input,
.form-field textarea {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
font-size: 14px;
font-family: var(--body);
}
.form-field textarea { resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-faint); }
.form-field input:focus,
.form-field textarea:focus { outline: none; border-color: var(--accent); }
.form-success {
padding: 14px 16px;
border-radius: 8px;
background: var(--ok-soft);
border: 1px solid var(--ok);
color: var(--text);
margin-bottom: 24px;
}
.form-error {
padding: 14px 16px;
border-radius: 8px;
background: color-mix(in srgb, #E4573D 12%, transparent);
border: 1px solid #E4573D;
color: var(--text);
margin-bottom: 24px;
}
.form-error ul { margin: 0; padding-left: 18px; }
/* ==========================================================================
WooCommerce-only bridge
Everything above this point is the real Shopify theme.css, copied
close to verbatim. Everything below exists ONLY because WooCommerce
needs it and Shopify's theme has no equivalent to copy from (cart page,
checkout, my-account, stock/notice markup, a couple of small custom
widgets like the wishlist drawer/mobile menu wiring) - built with the
same design tokens (var(--accent) etc.) for visual consistency, not
re-derived colors/spacing.
========================================================================== */
/* WooCommerce's own core CSS ships grid-column/grid-row assumptions on
individual items for its own [products columns="N"] shortcode -
stripped here so the real .pc-grid/.pc-grid--pairs auto-placement (see
above) is the only thing deciding layout, not a leftover WooCommerce
value fighting it. */
.woocommerce ul.products li.product {
grid-column: auto !important;
grid-row: auto !important;
}
/* The actual root cause of cards landing in the wrong column (found via
live inspection, not the grid-column reset above - that alone didn't
fix it): WooCommerce's own core CSS gives ul.products a clearfix
(::before/::after { content:''; display:table }) left over from its old
float-based grid. display:table is NOT display:none, so in a CSS Grid
container that pseudo-element becomes a real (invisible) grid item
occupying the very first cell - pushing every real card over by one
slot, which is exactly why the first card always ended up alone on its
own row. */
.woocommerce ul.products.pc-grid::before,
.woocommerce ul.products.pc-grid::after {
display: none !important;
}
/* WooCommerce's own "-20%" onsale ribbon has no equivalent in the real
design (the price row already shows old + new price inline via
.pc-price-old/.pc-price) - hidden instead of restyled. */
.woocommerce span.onsale { display: none; }
/* Small pop animation on the wishlist heart when toggled (zero-pc.js adds
.zpc-pop) - not a real theme.css class, a small addition of our own. */
@keyframes zpcHeartPop {
0% { transform: scale(1); }
35% { transform: scale(1.28); }
100% { transform: scale(1); }
}
.zpc-pop { animation: zpcHeartPop 0.4s ease; }
/* ---------- WooCommerce notices (added-to-cart, errors, form validation) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
color: var(--text);
padding: 14px 18px;
margin: 0 0 20px;
list-style: none;
font-size: 14px;
}
.woocommerce-error { border-left-color: #E4382E; }
.woocommerce-message .button,
.woocommerce-error .button {
float: none;
display: inline-block;
margin-left: 12px;
}
/* ---------- Quantity input, cart/checkout tables, my-account (no real design to copy - built with the same tokens) ---------- */
.quantity .qty,
input.qty {
width: 64px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
font-family: var(--body);
}
.woocommerce table.shop_table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-soft);
color: var(--text-dim);
text-align: left;
}
.woocommerce table.shop_table th { color: var(--text-faint); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-cart-form .product-remove a,
.woocommerce a.remove {
color: #E4382E !important;
}
.woocommerce-checkout-review-order-table,
.woocommerce-checkout #payment {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
padding: 10px 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
display: inline-block;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-dim);
font-size: 13.5px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
color: var(--accent);
border-color: var(--accent);
}
/* ---------- WooCommerce's own default product gallery (kept for its zoom/thumbnail JS), reskinned to match .gallery-main's frame ---------- */
.woocommerce-product-gallery__image {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
/* Site-wide bug found via live inspection: WordPress/WooCommerce injects an
inline