/* =========================================================
your trend // Streetwear Pop-Art Moodboard Stylesheet
1) Tokens · Reset · Typo
2) Header / Ticker
3) Moodboard Grid + Tiles (Hero, Product, Story, Quote, Scarcity, Social, CTA)
4) Apparel-Frame (Tee/Hoodie Mockups via CSS)
5) WHY · Newsletter · FAQ · Footer
6) Cart Drawer · Quick View · Cookie Banner · Toast
7) Effects: Cursor-Gravity · Parallax · Magnet · Reveal
8) Accessibility · Reduced Motion
========================================================= */
/* ---------- 1. TOKENS / RESET / TYPO ---------- */
:root{
--bg:#FFFFFF;
--ink:#0A0A0A;
--ink-soft:#1a1a1a;
--paper:#fafafa;
--line:#0A0A0A;
--cyan:#00E5FF;
--magenta:#FF1FA4;
--yellow:#FFE600;
--red:#FF2D2D;
--green:#00D26A;
--violet:#7A2BFF;
--gap: clamp(12px, 1.6vw, 22px);
--radius: 18px;
--radius-sm: 10px;
--shadow-hard: 6px 6px 0 0 var(--ink);
--shadow-pop: 10px 10px 0 0 var(--ink);
--shadow-pop-magenta: 10px 10px 0 0 var(--magenta);
--ease-out: cubic-bezier(.2,.8,.2,1);
--header-h: 64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
html{scroll-behavior:smooth}
/* =========================================================
PATCH-v12 (v1.5.3) — WP-THEME OVERRIDE
Greift NUR auf Pages mit dem Shortcode (body.has-yourtrend Class).
- Issue 1: WP-Theme-Primary-Nav verstecken (AGB|Datenschutz|Home|...
wird doppelt mit unserem Plugin-Header gerendert)
- Issue 2: Volle Viewport-Breite (Hostinger-Theme cappt .entry-content
auf ~1200px max-width)
========================================================= */
body.has-yourtrend .site-header,
body.has-yourtrend header.site-header,
body.has-yourtrend .main-navigation,
body.has-yourtrend .primary-navigation,
body.has-yourtrend .primary-menu,
body.has-yourtrend nav#site-navigation,
body.has-yourtrend nav.main-navigation,
body.has-yourtrend .header-navigation,
body.has-yourtrend .menu-primary-container,
body.has-yourtrend #masthead nav,
body.has-yourtrend #masthead .menu,
body.has-yourtrend .hostinger-site-header,
body.has-yourtrend .wp-block-navigation,
body.has-yourtrend .entry-header,
body.has-yourtrend .entry-title,
body.has-yourtrend .page-title{
display:none !important;
}
/* Voller Breite — Hostinger-Default-Theme cappt .entry-content/.site-main */
body.has-yourtrend .entry-content,
body.has-yourtrend .site-main,
body.has-yourtrend .site-content,
body.has-yourtrend .content-area,
body.has-yourtrend main,
body.has-yourtrend #main,
body.has-yourtrend #primary,
body.has-yourtrend .wp-site-blocks,
body.has-yourtrend .wp-block-post-content,
body.has-yourtrend article.page,
body.has-yourtrend article.post{
max-width:none !important;
width:100% !important;
padding-left:0 !important;
padding-right:0 !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Body-Padding/Margin clean (manche Themes haben body { padding:20px }) */
body.has-yourtrend{
padding-left:0 !important;
padding-right:0 !important;
overflow-x:hidden;
}
/* PATCH-v13 (v1.5.4) — Aggressive Wildcard-Wrapper-Override.
Hostinger-/Astra-/Kadence-/Twenty-Twenty-XX-Themes nutzen alle moeglichen
Wrapper-Selektoren (.container, .wrap, .ast-container, .site-container, ...).
Wir brechen ALLE Klassen mit "container", "wrap", "boxed" oder "ast-" Prefix,
nur fuer direct-children von #page/#main/.site (die Plugin-Section).
Plus selectors fuer GeneratePress, OceanWP, Storefront. */
body.has-yourtrend [class*="container"],
body.has-yourtrend [class*="wrapper"],
body.has-yourtrend [class*="ast-container"],
body.has-yourtrend [class*="boxed-layout"],
body.has-yourtrend .ast-container,
body.has-yourtrend .site-container,
body.has-yourtrend .inside-article,
body.has-yourtrend .gp-site-container,
body.has-yourtrend .ocean-row,
body.has-yourtrend #wrapper,
body.has-yourtrend #page,
body.has-yourtrend .site,
body.has-yourtrend .hfeed{
max-width:100vw !important;
width:100% !important;
padding-left:0 !important;
padding-right:0 !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Falls Theme das oder mit max-width cappt */
html.has-yourtrend, html:has(body.has-yourtrend){
max-width:100% !important;
width:100% !important;
}
/* PATCH-v11: scroll-margin-top fuer alle Nav-Anchor-Targets, damit
sticky-Header (~64px) den Section-Anfang nicht abschneidet. */
#home, #collection, #lookbook, #why, #faq, #newsletter, #main-feed{
scroll-margin-top:calc(var(--header-h) + 16px);
}
/* PATCH-v11: Flash-Highlight wenn Lookbook -> Collection-Tile deeplinkt */
.is-flashing{
animation:flashTile 1.5s ease-out;
}
@keyframes flashTile{
0% { box-shadow:0 0 0 0 var(--magenta), 6px 6px 0 0 var(--ink); transform:scale(1); }
20% { box-shadow:0 0 0 8px rgba(255,31,164,.4), 6px 6px 0 0 var(--ink); transform:scale(1.03); }
100% { box-shadow:0 0 0 0 transparent, 6px 6px 0 0 var(--ink); transform:scale(1); }
}
body{
font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight:600;
line-height:1.45;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* === PATCH-v14 (v1.5.5) — Aggressive Full-bleed-Break-Out ===
Vorher: margin-inline:calc(50% - 50vw) — funktionierte nicht durchgehend,
weil parent-container mit overflow:hidden / padding-overrides
den Break-Out cliped.
Jetzt: Combo aus width:100vw + margin-left:calc(50%-50vw) +
position:relative — wirkt unabhaengig von Parent-Padding,
solange parent kein overflow-hidden hat. Plus !important fuer
Theme-Overrides (Astra/Hostinger/Twenty-Twenty-X). */
.ticker,
.moodboard-grid,
.lookbook,
.collection-section,
.why-section,
.newsletter,
.faq,
footer.footer,
.yt-mb-footer{
position:relative !important;
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
box-sizing:border-box !important;
}
@media (max-width: 760px){
.ticker,
.moodboard-grid,
.lookbook,
.collection-section,
.why-section,
.newsletter,
.faq,
footer.footer,
.yt-mb-footer{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* PATCH-v14: Falls Parent-Container overflow:hidden hat, ueberschreiben.
Hostinger-Theme nutzt teilweise .entry-content{overflow:hidden}. */
body.has-yourtrend .entry-content,
body.has-yourtrend .post-content,
body.has-yourtrend .site-content,
body.has-yourtrend .content-area,
body.has-yourtrend article.post,
body.has-yourtrend article.page,
body.has-yourtrend main#main{
overflow:visible !important;
max-width:none !important;
width:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
img,svg,picture{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
fieldset{border:0;padding:0}
input,select,textarea{font:inherit}
.display{font-family:"Archivo Black","Inter",sans-serif;letter-spacing:-.01em;line-height:.95;font-size:clamp(28px,4.4vw,68px)}
.display--md{font-size:clamp(20px,2.6vw,38px)}
.display--sm{font-size:clamp(18px,2.2vw,30px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--ink);color:#fff;padding:10px 14px;border-radius:0 0 8px 0;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.18em;
}
.skip-link:focus{left:0}
/* ---------- 2. STICKY HEADER ---------- */
.sticky-header{
position:sticky;top:0;z-index:50;
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
padding:12px clamp(16px,3vw,36px);
background:rgba(255,255,255,.85);
backdrop-filter:saturate(160%) blur(10px);
-webkit-backdrop-filter:saturate(160%) blur(10px);
border-bottom:2px solid var(--ink);
}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-img{width:auto;height:40px;object-fit:contain}
.sticky-header nav{display:flex;justify-content:center;gap:clamp(14px,2.4vw,30px)}
.sticky-header nav a{
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.18em;
position:relative;padding:6px 2px;
}
.sticky-header nav a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:var(--ink);transform:scaleX(0);transform-origin:left;
transition:transform .35s var(--ease-out);
}
.sticky-header nav a:hover::after{transform:scaleX(1)}
.header-actions{
justify-self:end;
display:inline-flex;align-items:center;gap:8px;
}
.cart-icon{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border:2px solid var(--ink);border-radius:999px;
background:var(--yellow);
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.12em;
box-shadow:3px 3px 0 0 var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.cart-icon:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--ink)}
/* LANGUAGE SWITCHER — Pop-Art Pill mit Dropdown */
.lang-switcher{
position:relative;
}
.lang-current{
display:inline-flex;align-items:center;gap:6px;
padding:8px 12px;border:2px solid var(--ink);border-radius:999px;
background:#fff;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.12em;
box-shadow:3px 3px 0 0 var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s;
}
.lang-current:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--magenta);background:var(--cyan)}
.lang-current[aria-expanded="true"]{
background:var(--ink);color:#fff;
box-shadow:3px 3px 0 0 var(--magenta);
}
.lang-current__caret{font-size:9px;line-height:1;transition:transform .2s var(--ease-out)}
.lang-current[aria-expanded="true"] .lang-current__caret{transform:rotate(180deg)}
.lang-menu{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;
list-style:none;padding:6px;margin:0;
border:2px solid var(--ink);border-radius:14px;
background:#fff;
box-shadow:5px 5px 0 0 var(--ink);
min-width:180px;
display:flex;flex-direction:column;gap:2px;
opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.lang-switcher.is-open .lang-menu{
opacity:1;transform:translateY(0);pointer-events:auto;
}
.lang-menu li{margin:0}
.lang-menu button{
display:flex;align-items:center;gap:10px;width:100%;
padding:10px 12px;border-radius:8px;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.08em;
background:transparent;color:var(--ink);text-align:left;cursor:pointer;
transition:background .15s, color .15s;
}
.lang-menu button:hover{background:var(--yellow)}
.lang-menu button[aria-current="true"]{background:var(--ink);color:var(--cyan)}
.lang-menu button[aria-current="true"]:hover{background:var(--ink);color:var(--yellow)}
.lang-code{
font-size:11px;letter-spacing:.18em;
background:var(--magenta);color:#fff;
padding:2px 8px;border-radius:999px;border:2px solid var(--ink);
display:inline-block;min-width:32px;text-align:center;
}
.lang-menu button[aria-current="true"] .lang-code{background:var(--cyan);color:var(--ink)}
.lang-name{flex:1}
/* Mobile-Anpassung */
@media (max-width: 540px){
.lang-current span:not(.lang-current__caret){display:none}
.lang-current::before{
content:attr(data-lang-code);
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.12em;
}
.lang-menu{right:-40px}
}
/* ---------- v1.5.2 CURRENCY-SWITCHER (analog Lang-Switcher) ---------- */
.currency-switcher{position:relative}
.currency-current{
display:inline-flex;align-items:center;gap:6px;
padding:8px 12px;border:2px solid var(--ink);border-radius:999px;
background:#fff;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.12em;
box-shadow:3px 3px 0 0 var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s;
}
.currency-current:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--magenta);background:var(--yellow)}
.currency-current[aria-expanded="true"]{
background:var(--ink);color:#fff;
box-shadow:3px 3px 0 0 var(--magenta);
}
.currency-current__caret{font-size:9px;line-height:1;transition:transform .2s var(--ease-out)}
.currency-current[aria-expanded="true"] .currency-current__caret{transform:rotate(180deg)}
.currency-menu{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;
list-style:none;padding:6px;margin:0;
border:2px solid var(--ink);border-radius:14px;
background:#fff;
box-shadow:5px 5px 0 0 var(--ink);
min-width:200px;
display:flex;flex-direction:column;gap:2px;
opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.currency-switcher.is-open .currency-menu{
opacity:1;transform:translateY(0);pointer-events:auto;
}
.currency-menu li{margin:0}
.currency-menu button{
display:flex;align-items:center;gap:10px;width:100%;
padding:10px 12px;border-radius:8px;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.08em;
background:transparent;color:var(--ink);text-align:left;cursor:pointer;
transition:background .15s, color .15s;
}
.currency-menu button:hover{background:var(--cyan)}
.currency-menu button[aria-current="true"]{background:var(--ink);color:var(--yellow)}
.currency-menu button[aria-current="true"]:hover{background:var(--ink);color:var(--cyan)}
.currency-symbol{
font-size:14px;background:var(--yellow);color:var(--ink);
padding:2px 8px;border-radius:999px;border:2px solid var(--ink);
display:inline-block;min-width:36px;text-align:center;
}
.currency-menu button[aria-current="true"] .currency-symbol{background:var(--magenta);color:#fff}
.currency-menu .currency-code{
font-size:11px;letter-spacing:.16em;color:var(--ink);opacity:.7;
display:inline-block;min-width:36px;
}
.currency-menu button[aria-current="true"] .currency-code{color:var(--cyan);opacity:1}
.currency-name{flex:1}
@media (max-width: 540px){
.currency-current .currency-name,.currency-current .currency-symbol{display:none}
.currency-menu{right:-20px;min-width:180px}
}
.cart-count{
background:var(--magenta);color:#fff;border-radius:999px;
padding:0 6px;font-size:11px;line-height:18px;min-width:18px;text-align:center;
}
.menu-toggle{display:none}
@media (max-width: 760px){
.sticky-header{grid-template-columns:auto 1fr auto}
.sticky-header nav{
position:fixed;inset:64px 0 auto 0;z-index:49;
background:#fff;border-bottom:2px solid var(--ink);
flex-direction:column;align-items:center;gap:18px;padding:18px 0;
transform:translateY(-120%);transition:transform .35s var(--ease-out);
}
.sticky-header nav.open{transform:translateY(0)}
.menu-toggle{
display:inline-flex;align-items:center;gap:6px;
border:2px solid var(--ink);border-radius:999px;padding:6px 10px;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.1em;
}
}
/* ---------- TICKER ---------- */
.ticker{border-bottom:2px solid var(--ink);background:var(--ink);color:var(--yellow);overflow:hidden}
.ticker-track{
display:flex;gap:48px;white-space:nowrap;padding:10px 0;
animation:ticker 38s linear infinite;
font-family:"Archivo Black",sans-serif;letter-spacing:.18em;font-size:13px;
}
.ticker-track span{display:inline-flex;align-items:center;gap:14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--magenta);display:inline-block}
.dot--cyan{background:var(--cyan)}
.dot--yellow{background:var(--yellow)}
.dot--green{background:var(--green)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- 3. MOODBOARD GRID ---------- */
.moodboard-grid{
padding:clamp(16px,2.4vw,28px);
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:90px;
gap:var(--gap);
grid-auto-flow:dense;
}
.grid-item{
position:relative;
border:2px solid var(--ink);border-radius:var(--radius);
background:#fff;overflow:hidden;
will-change:transform;
transition:transform .4s var(--ease-out), box-shadow .3s var(--ease-out);
box-shadow:var(--shadow-hard);
}
.grid-item:hover{box-shadow:var(--shadow-pop)}
/* span helpers */
.c-3{grid-column:span 3}.c-4{grid-column:span 4}.c-5{grid-column:span 5}
.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-8{grid-column:span 8}
.c-9{grid-column:span 9}.c-12{grid-column:span 12}
.r-2{grid-row:span 2}.r-3{grid-row:span 3}.r-4{grid-row:span 4}
@media (max-width: 1100px){
.moodboard-grid{grid-template-columns:repeat(8,1fr)}
.c-7,.c-8{grid-column:span 8}
.c-5{grid-column:span 5}
.c-3,.c-4{grid-column:span 4}
}
@media (max-width: 760px){
.moodboard-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:78px}
.c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-9,.c-12{grid-column:span 4}
.r-3{grid-row:span 3}.r-4{grid-row:span 4}
}
/* ---------- TILE TYPES ---------- */
.main-image-tile{
padding:0;
/* Pop-Art Light-Bg fuer Print-Designs auf weiss/transparent */
background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%);
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.main-image-tile picture,
.main-image-tile img{width:100%;height:100%}
/* DEFAULT (Print-Design Illustration): contain — zeigt komplettes Design,
keine Crops, mit Pop-Art-Background-Gradient */
.main-image-tile img{
object-fit:contain;
object-position:center center;
padding:8px;
transition:transform .8s var(--ease-out);
}
.main-image-tile:hover img{transform:scale(1.04)}
/* Editorial-Tile (MockUp mit Statement) — cover mit Gesicht-position */
.main-image-tile.editorial-tile{
background:transparent;
}
.main-image-tile.editorial-tile img{
object-fit:cover;
/* center 28%: Gesicht + Print-Bereich (obere 1/3 des Bildes) bleiben sichtbar.
Reicht fuer alle MockUps von 4:5 bis 9:16 — keine Koepfe abgeschnitten. */
object-position:center 28%;
padding:0;
}
.img-caption{
position:absolute;left:14px;bottom:14px;z-index:2;
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.22em;
background:#fff;color:var(--ink);padding:6px 10px;border-radius:999px;
border:2px solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);
pointer-events:none;
/* Word-wrap fallback wenn zu lang (lange Statement-Captions) */
max-width:calc(100% - 28px);
word-break:break-word;overflow-wrap:break-word;
}
/* Editorial-Caption Variante (Hero-Tiles mit MockUp + Statement) — gelber Sticker */
.img-caption.editorial-caption{
background:var(--yellow);
border-radius:10px;
letter-spacing:0;
font-size:clamp(11px,1vw,13px);
line-height:1.2;
text-transform:none;
padding:7px 11px;
max-width:calc(100% - 28px);
}
/* Story / Slogan */
.story-tile{
display:flex;flex-direction:column;justify-content:space-between;
padding:clamp(16px,2vw,28px);gap:14px;
}
.story-tile p{font-size:14px;color:#333;max-width:46ch}
.bg-yellow{background:var(--yellow)}
.bg-cyan{background:var(--cyan)}
.bg-magenta{background:var(--magenta);color:#fff}
.bg-magenta p{color:#ffe5f1}
.bg-ink{background:var(--ink);color:#fff}
.bg-ink p{color:#cfcfcf}
.kicker{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.22em;
background:var(--ink);color:#fff;padding:6px 10px;border-radius:999px;
}
.kicker--ink{background:#fff;color:var(--ink)}
.kicker--magenta{background:#fff;color:var(--magenta)}
.kicker--yellow{background:var(--yellow);color:var(--ink)}
.kicker--cyan{background:var(--cyan);color:var(--ink)}
.cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.link-arrow{
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.18em;
border-bottom:2px solid var(--ink);padding-bottom:2px;
}
.link-arrow::after{content:" →"}
.rating-mini{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;letter-spacing:.06em;color:var(--ink);
}
.stars{color:var(--magenta);font-size:14px;letter-spacing:1px}
/* ---------- 4. APPAREL FRAME (Tee/Hoodie via CSS) ---------- */
.product-tile{
display:flex;flex-direction:column;background:#fff;
}
.apparel-frame{
flex:1;min-height:0;width:100%;
background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%);
position:relative;display:flex;align-items:center;justify-content:center;
padding:8% 16% 12%;
border-bottom:2px solid var(--ink);
}
/* Tee silhouette (CSS-only) */
.apparel-frame::before{
content:"";position:absolute;inset:6% 8% 4% 8%;
background:#fff;border:2px solid var(--ink);border-radius:14px 14px 18px 18px;
z-index:0;
}
.apparel-frame.apparel-tee::after{
content:"";position:absolute;top:6%;left:8%;right:8%;height:6%;
background:#fff;border-bottom:2px solid var(--ink);
clip-path:polygon(28% 0,40% 100%,60% 100%,72% 0);
z-index:1;
}
.apparel-frame.apparel-hoodie::before{
border-radius:18px 18px 18px 18px;
inset:14% 6% 4% 6%;
}
.apparel-frame.apparel-hoodie::after{
content:"";position:absolute;top:6%;left:32%;right:32%;height:14%;
background:#fff;border:2px solid var(--ink);border-bottom:none;
border-radius:60% 60% 0 0;
z-index:1;
}
.apparel-frame picture, .apparel-frame img{
position:relative;z-index:2;
width:62%;max-height:78%;object-fit:contain;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.05));
transition:transform .5s var(--ease-out);
}
.product-tile:hover .apparel-frame img{transform:scale(1.04)}
.product-tile .pinfo{
border-top:0;
padding:12px 14px 6px;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.product-tile .pname{font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.04em}
.product-tile .pprice{font-family:"Archivo Black",sans-serif;font-size:14px}
.swatches{display:flex;gap:6px;padding:0 14px 6px}
.swatches .sw{width:14px;height:14px;border-radius:50%;display:inline-block}
.badge{
position:absolute;top:10px;left:10px;z-index:3;
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.14em;
padding:6px 10px;border-radius:999px;border:2px solid var(--ink);
background:var(--yellow);color:var(--ink);
box-shadow:3px 3px 0 0 var(--ink);
transform:rotate(-4deg);
}
.badge.sale{background:var(--red);color:#fff}
.badge.scarcity{background:var(--magenta);color:#fff;top:auto;bottom:74px;left:auto;right:10px;transform:rotate(4deg)}
/* Quote */
.quote-tile{
padding:clamp(16px,2vw,28px);
display:flex;flex-direction:column;justify-content:center;gap:10px;
background:#fff;
}
.quote-tile q{font-family:"Archivo Black",sans-serif;font-size:clamp(18px,2.2vw,28px);line-height:1.05;quotes:"„" "“"}
.quote-tile .who{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#555}
/* Scarcity */
.scarcity-tile{
display:flex;flex-direction:column;justify-content:center;
padding:clamp(16px,2vw,26px);
background:repeating-linear-gradient(135deg,var(--yellow) 0 18px,#000 18px 22px);
}
.scarcity-card{
background:#fff;border:2px solid var(--ink);border-radius:14px;padding:14px 16px;
box-shadow:4px 4px 0 0 var(--ink);
}
.scarcity-card .lbl{font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.22em;color:var(--magenta)}
.scarcity-card .ttl{font-family:"Archivo Black",sans-serif;font-size:clamp(18px,2.2vw,28px);margin-top:6px;line-height:1}
.scarcity-card .meter{margin-top:10px;height:8px;background:#eee;border-radius:999px;overflow:hidden;border:1px solid var(--ink)}
.scarcity-card .meter > i{display:block;height:100%;background:var(--red)}
.scarcity-card small{display:block;margin-top:6px;font-size:12px;color:#444}
/* Social Proof Photo Wall */
.social-tile{
display:flex;flex-direction:column;background:#fff;padding:10px;gap:8px;
}
.social-tile__title{
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.22em;
background:var(--ink);color:#fff;align-self:flex-start;
padding:6px 10px;border-radius:999px;
}
.social-tile__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;min-height:0}
.social-tile .sp{
border-radius:8px;border:2px solid var(--ink);
background-color:#eee;background-size:cover;background-position:center;
position:relative;overflow:hidden;
}
.social-tile .sp::after{
content:"♥";position:absolute;right:6px;bottom:4px;color:#fff;font-size:14px;
text-shadow:0 1px 2px rgba(0,0,0,.5);
}
/* CTA Big */
.cta-tile{
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;
padding:clamp(18px,2.4vw,32px);
background:var(--ink);color:#fff;
}
.cta-tile h3{font-family:"Archivo Black",sans-serif;font-size:clamp(20px,3vw,42px);line-height:.95}
.cta-tile p{color:#bdbdbd;font-size:14px}
.cta-tile .ts{color:#888;font-size:12px;letter-spacing:.06em}
.cta-tile .ts strong{color:var(--yellow);font-family:"Archivo Black",sans-serif;letter-spacing:.06em}
/* CTA Button */
.cta-button{
display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
background:var(--ink);color:#fff;
padding:14px 22px;border-radius:999px;border:2px solid var(--ink);
font-family:"Archivo Black",sans-serif;letter-spacing:.18em;font-size:13px;
box-shadow:5px 5px 0 0 var(--magenta);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
white-space:nowrap;
}
.cta-button:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--magenta)}
.cta-button:active{transform:translate(0,0);box-shadow:3px 3px 0 0 var(--magenta)}
.cta-button[disabled]{opacity:.5;cursor:not-allowed}
.cta-button--cyan{background:var(--cyan);color:var(--ink);box-shadow:5px 5px 0 0 var(--ink)}
.cta-button--cyan:hover{box-shadow:8px 8px 0 0 var(--ink)}
.cta-button--small{padding:10px 16px;font-size:11px;margin:8px 14px 14px;align-self:flex-start}
.bg-yellow .cta-button{background:var(--ink);color:var(--yellow);box-shadow:5px 5px 0 0 var(--magenta)}
.bg-magenta .cta-button{background:var(--ink);color:#fff;box-shadow:5px 5px 0 0 var(--yellow)}
.bg-cyan .cta-button{background:var(--ink);color:var(--cyan);box-shadow:5px 5px 0 0 var(--magenta)}
/* Sentinel */
.sentinel{
grid-column:1 / -1;
display:grid;place-items:center;
padding:30px 0;color:#777;font-size:12px;letter-spacing:.2em;
font-family:"Archivo Black",sans-serif;
}
.sentinel.is-done{color:#bbb}
.spinner{
width:28px;height:28px;border-radius:50%;
border:3px solid #eee;border-top-color:var(--magenta);
animation:spin 1s linear infinite;margin-bottom:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- 5. WHY · NEWSLETTER · FAQ · FOOTER ---------- */
.why-section{
border-top:2px solid var(--ink);
padding:clamp(40px,7vw,96px) clamp(16px,3vw,36px);
background:var(--paper);
}
.why-grid{
max-width:min(1800px, 96vw);margin:0 auto;
display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);
align-items:center;
}
@media (max-width: 900px){.why-grid{grid-template-columns:1fr}}
.why-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.why-text p{font-size:16px;color:#333;max-width:54ch}
.why-points{list-style:none;display:grid;gap:10px;font-size:14px}
.why-points li{
padding-left:24px;position:relative;color:#444;
}
.why-points li::before{
content:"";position:absolute;left:0;top:.5em;
width:12px;height:12px;border-radius:50%;
background:var(--magenta);border:2px solid var(--ink);
}
.why-collage{
position:relative;aspect-ratio:1;
display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:12px;
}
.why-collage .wc{
width:100%;height:100%;object-fit:cover;
border:2px solid var(--ink);border-radius:14px;background:#fff;
box-shadow:6px 6px 0 0 var(--ink);
transition:transform .5s var(--ease-out);
}
.why-collage .wc-1{transform:rotate(-3deg)}
.why-collage .wc-2{transform:rotate(2deg)}
.why-collage .wc-3{transform:rotate(3deg)}
.why-collage .wc-4{transform:rotate(-2deg)}
.why-collage .wc:hover{transform:rotate(0) scale(1.04)}
.newsletter{
border-top:2px solid var(--ink);
background:var(--ink);color:#fff;
padding:clamp(40px,7vw,96px) clamp(16px,3vw,36px);
text-align:center;
}
.nl-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.newsletter h2{color:#fff}
.newsletter p{color:#bdbdbd;font-size:15px}
.nl-form{
display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;margin-top:8px;
}
.nl-form input{
flex:1;min-width:240px;
padding:14px 18px;border-radius:999px;
border:2px solid #fff;background:#1a1a1a;color:#fff;
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.06em;
}
.nl-form input::placeholder{color:#888}
.nl-form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,229,255,.25)}
.nl-form .cta-button{box-shadow:5px 5px 0 0 var(--magenta)}
.nl-fineprint{color:#888;font-size:11px;max-width:48ch;line-height:1.5}
.nl-fineprint a{color:var(--cyan);border-bottom:1px solid var(--cyan)}
.nl-success{
margin-top:14px;background:var(--green);color:var(--ink);
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.1em;
padding:12px 18px;border-radius:999px;border:2px solid var(--ink);
}
.faq{
border-top:2px solid var(--ink);
padding:clamp(40px,7vw,96px) clamp(16px,3vw,36px);
max-width:920px;margin:0 auto;
display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.faq h2{margin-bottom:14px}
.faq-item{
width:100%;
border:2px solid var(--ink);border-radius:14px;background:#fff;
box-shadow:5px 5px 0 0 var(--ink);
overflow:hidden;
transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.faq-item[open]{box-shadow:8px 8px 0 0 var(--magenta);transform:translate(-2px,-2px)}
.faq-item summary{
list-style:none;cursor:pointer;
padding:18px 22px;
font-family:"Archivo Black",sans-serif;font-size:14px;letter-spacing:.06em;
display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:"+";font-size:24px;line-height:1;transition:transform .25s var(--ease-out);color:var(--magenta);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 22px 18px;color:#444;font-size:14px;line-height:1.6}
footer[role="contentinfo"]{
border-top:2px solid var(--ink);
background:#fff;
padding:clamp(28px,4vw,56px) clamp(16px,3vw,36px) 16px;
}
.footer-grid{
max-width:min(1800px, 96vw);margin:0 auto;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(20px,3vw,48px);
}
@media (max-width: 760px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-grid h4{font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.22em;margin-bottom:12px}
.footer-grid nav{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#444}
.footer-grid nav a:hover{color:var(--magenta)}
.footer-brand p{font-size:13px;color:#444;margin:10px 0 14px;max-width:34ch}
.footer-logo{height:40px;width:auto;margin-bottom:6px}
.payment-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.payment-row span{
font-family:"Archivo Black",sans-serif;font-size:10px;letter-spacing:.14em;
border:2px solid var(--ink);padding:4px 8px;border-radius:6px;background:#fff;
}
.footer-bottom{
max-width:min(1800px, 96vw);margin:18px auto 0;
border-top:1px dashed #aaa;padding-top:14px;
display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
font-size:12px;color:#666;
}
/* ---------- 6. CART DRAWER · QUICK VIEW · COOKIE · TOAST ---------- */
.overlay{
position:fixed;inset:0;z-index:90;
background:rgba(10,10,10,.55);
opacity:0;transition:opacity .35s var(--ease-out);
pointer-events:none;
}
.overlay.is-open{opacity:1;pointer-events:auto}
.cart-drawer{
position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:100;
background:#fff;border-left:2px solid var(--ink);
display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .4s var(--ease-out);
box-shadow:-12px 0 0 0 rgba(0,0,0,.06);
}
.cart-drawer.is-open{transform:translateX(0)}
.cd-header{
display:flex;justify-content:space-between;align-items:center;
padding:16px 20px;border-bottom:2px solid var(--ink);
}
.cd-header h3{font-family:"Archivo Black",sans-serif;letter-spacing:.16em;font-size:14px}
.cd-close{font-size:28px;line-height:1;width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:#fff}
.cd-close:hover{background:var(--magenta);color:#fff}
.cd-progress{padding:14px 20px;border-bottom:1px solid #eee}
.cd-progress__label{font-size:12px;letter-spacing:.06em;color:#444;margin-bottom:6px}
.cd-progress__bar{height:8px;background:#eee;border-radius:999px;border:1px solid var(--ink);overflow:hidden}
.cd-progress__bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--cyan));transition:width .4s var(--ease-out)}
.cd-items{
flex:1;overflow-y:auto;list-style:none;padding:8px 12px;display:flex;flex-direction:column;gap:8px;
}
.cd-empty{padding:20px;text-align:center;color:#666;display:flex;flex-direction:column;gap:14px;align-items:center}
.cart-drawer.has-items .cd-empty{display:none}
.cart-drawer:not(.has-items) .cd-items{display:none}
.cart-drawer:not(.has-items) #checkoutBtn{display:none}
.cd-item{
display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
padding:8px;border:2px solid var(--ink);border-radius:12px;background:#fff;
}
.cd-item img{width:64px;height:64px;object-fit:contain;background:#fafafa;border-radius:8px}
.cd-item .ci-name{font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.04em;line-height:1.2}
.cd-item .ci-price{font-size:12px;color:#444;margin-top:2px}
.cd-item .ci-qty{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.cd-item .ci-qty button{width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:800}
.cd-item .ci-qty span{min-width:18px;text-align:center;font-family:"Archivo Black",sans-serif}
.cd-item .ci-remove{align-self:start;font-size:18px;color:#888;width:24px;height:24px;border-radius:50%}
.cd-item .ci-remove:hover{background:var(--red);color:#fff}
.cd-footer{border-top:2px solid var(--ink);padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.cd-total{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.cd-total strong{font-family:"Archivo Black",sans-serif;font-size:18px}
.cd-trust{color:#777;font-size:11px;text-align:center;letter-spacing:.04em}
/* Quick View Modal — PATCH-v14 (v1.5.5): 1040px -> min(1400px, 70vw)
Auf 1920er Monitor: 70vw = 1344px (gut), unter 2000px viewport min(1400, 70vw)
= 70vw bis 2000px, dann 1400px Cap. Auf 1024er Monitor: 70vw=717px (eng aber lesbar). */
.quickview{
border:2px solid var(--ink);border-radius:18px;padding:0;overflow:hidden;
width:min(1400px, 70vw);max-height:92vh;
box-shadow:12px 12px 0 0 var(--magenta);background:#fff;
}
/* Auf kleinen Bildschirmen (Tablet) breiter, auf Mobile fast voll */
@media (max-width:1100px){
.quickview{width:min(900px, 88vw)}
}
@media (max-width:700px){
.quickview{width:94vw}
}
.quickview::backdrop{background:rgba(10,10,10,.55)}
.quickview[open]{animation:qvIn .35s var(--ease-out)}
@keyframes qvIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.qv-close{
position:absolute;top:14px;right:14px;z-index:2;
width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;background:#fff;font-size:24px;line-height:1;
}
.qv-close:hover{background:var(--magenta);color:#fff}
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:420px}
@media (max-width: 700px){.qv-body{grid-template-columns:1fr}}
.qv-img{
background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%);
display:flex;align-items:center;justify-content:center;padding:24px;
border-right:2px solid var(--ink);
}
@media (max-width: 700px){.qv-img{border-right:none;border-bottom:2px solid var(--ink)}}
.qv-img img{max-width:100%;max-height:60vh;object-fit:contain}
/* v1.4.0 — Galerie mit Thumbnail-Strip */
.qv-gallery{
display:flex;flex-direction:column;gap:10px;padding:18px;
background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%);
border-right:2px solid var(--ink);
max-height:88vh;
}
@media (max-width: 700px){.qv-gallery{border-right:none;border-bottom:2px solid var(--ink)}}
.qv-gallery__main{
flex:1;min-height:300px;
display:flex;align-items:center;justify-content:center;
background:#fff;border:2px solid var(--ink);border-radius:10px;
overflow:hidden;padding:12px;
}
.qv-gallery__main img{max-width:100%;max-height:50vh;object-fit:contain}
.qv-gallery__thumbs{
display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
max-height:120px;overflow-y:auto;
}
.qv-thumb{
width:54px;height:54px;padding:0;border:2px solid var(--ink);
border-radius:8px;background:#fff;cursor:pointer;overflow:hidden;
transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out);
}
.qv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qv-thumb:hover{transform:translateY(-2px);box-shadow:2px 2px 0 var(--magenta)}
.qv-thumb.is-active{box-shadow:2px 2px 0 var(--cyan);outline:2px solid var(--cyan)}
/* v1.4.0 — Color-Swatches */
.qv-attr{border:none;padding:0;margin:0 0 14px 0}
.qv-attr legend{
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.18em;
color:var(--ink);margin-bottom:6px;padding:0;
}
/* PATCH-v12 (v1.5.3) — Issue 5: Color-Swatches komplett ueberarbeitet.
Vorher: 34x34 Kreise, weisse/helle Farben verschwinden gegen weisses Modal.
Jetzt: groesser (40x40), inset-shadow fuer Weiss-Sichtbarkeit, Label
STAENDIG unter jedem Swatch sichtbar — kein versteckter Hover-Tooltip. */
/* PATCH-v14 (v1.5.5) — Color-Swatches: Farbe MUSS im Kreis sichtbar sein.
Vorher: 40x40 + inset-white-ring 2px + inset-dark-bottom 6px verdeckten die
Farbe fast komplett (besonders bei hellen Toenen).
Plus: always-on Label unter jedem Swatch -> lange Namen wie "Athletic Heather"
und "Carolina Blue" ueberlappten sich gegenseitig zu Pixelsalat.
Jetzt: 56x56 fuer dominante Farbflaeche, KEIN inset-white-ring mehr
(nur subtle bottom-shadow fuer Tiefe), und Name als Tooltip
erscheint NUR auf Hover/Focus — keine Overlap-Probleme mehr.
Selected-State zeigt aktuelle Wahl in einem Sub-Label unter dem Row. */
.qv-swatches{
display:flex;flex-wrap:wrap;
gap:10px 10px;
margin-bottom:14px;
}
.qv-swatch{
position:relative;
width:44px;height:44px;border-radius:50%;
border:2px solid var(--ink);
background:var(--swatch-color, #ddd);
/* Nur dezenter unterer Schatten fuer Tiefe — Farbe dominiert die Flaeche */
box-shadow:
inset 0 -4px 8px rgba(0,0,0,.12),
2px 2px 0 0 var(--ink);
cursor:pointer;
display:block;
transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out);
}
/* Sehr helle Farben (white/sand) bekommen einen sichtbaren Outer-Ring durch Border-Width */
.qv-swatch[data-swatch-color="#FFFFFF" i],
.qv-swatch[data-swatch-color="#fff" i]{
border-width:3px;
box-shadow:
inset 0 -4px 8px rgba(0,0,0,.18),
2px 2px 0 0 var(--ink);
}
.qv-swatch:hover{
transform:translate(-1px,-1px) scale(1.1);
box-shadow:
inset 0 -4px 8px rgba(0,0,0,.12),
4px 4px 0 0 var(--magenta);
}
.qv-swatch input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.qv-swatch:has(input:checked){
outline:3px solid var(--cyan);outline-offset:3px;
box-shadow:
inset 0 -4px 8px rgba(0,0,0,.12),
3px 3px 0 0 var(--ink);
}
/* Name = Tooltip-Pill, nur sichtbar auf Hover/Focus/Checked-Hover.
Kein Always-On -> keine Overlap-Probleme mehr. */
.qv-swatch .qv-pill__text{
position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
font-family:"Inter",sans-serif;font-weight:700;
font-size:11px;letter-spacing:.02em;color:#fff;
white-space:nowrap;
background:var(--ink);padding:4px 9px;border-radius:6px;
pointer-events:none;
opacity:0;
transition:opacity .15s var(--ease-out);
z-index:5;
}
.qv-swatch .qv-pill__text::before{
content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);
border-left:5px solid transparent;border-right:5px solid transparent;
border-bottom:5px solid var(--ink);
}
.qv-swatch:hover .qv-pill__text,
.qv-swatch:focus-within .qv-pill__text,
.qv-swatch:has(input:checked) .qv-pill__text{
opacity:1;
}
/* Aktuelle Auswahl als kleine Bestaetigungs-Zeile unter dem ganzen Row.
JS schreibt aktuellen Color-Namen in [data-qv-color-current]. */
.qv-attr--color::after{
content: attr(data-current-label);
display:block;
margin-top:14px;
font-family:"Inter",sans-serif;font-weight:700;
font-size:12px;letter-spacing:.06em;text-transform:uppercase;
color:var(--magenta);
}
/* v1.4.0 — Size + Other Attribute Pills */
.qv-pills{display:flex;flex-wrap:wrap;gap:6px}
.qv-pill{
position:relative;display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:38px;padding:0 12px;
border:2px solid var(--ink);border-radius:999px;background:#fff;
cursor:pointer;font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.06em;
text-transform:uppercase;
transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out);
}
.qv-pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.qv-pill:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--magenta)}
.qv-pill:has(input:checked){
background:var(--ink);color:var(--yellow);
box-shadow:3px 3px 0 var(--cyan);
}
.qv-no-options{font-size:12px;color:#999;font-style:italic}
/* v1.4.0 — Variation-Status (Stock-Hinweis bei OOS oder ungültiger Kombi) */
.qv-variation-status{
font-size:12px;padding:8px 12px;border-radius:6px;border:2px dashed;
}
.qv-var-warn{color:#b8860b;}
.qv-var-out{color:var(--magenta);font-family:"Archivo Black",sans-serif;letter-spacing:.04em}
.qv-variation-status:has(.qv-var-warn){border-color:#b8860b;background:rgba(184,134,11,.06)}
.qv-variation-status:has(.qv-var-out){border-color:var(--magenta);background:rgba(255,31,164,.06)}
/* v1.4.0 — Loading-State */
.qv-loading{
font-size:13px;color:#999;font-style:italic;
display:flex;align-items:center;gap:8px;
}
.qv-loading::before{
content:"";width:14px;height:14px;border-radius:50%;
border:2px solid #ddd;border-top-color:var(--magenta);
animation:qvSpin 0.8s linear infinite;
}
@keyframes qvSpin{to{transform:rotate(360deg)}}
/* v1.4.0 — WC-Description (HTML aus WC-Long-Description) */
.qv-wc-desc{
font-size:13.5px;line-height:1.55;color:#333;
}
.qv-wc-desc h3{
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.06em;
color:var(--ink);margin:14px 0 6px;text-transform:uppercase;
}
.qv-wc-desc h3:first-child{margin-top:0}
.qv-wc-desc p{margin:6px 0}
.qv-wc-desc ul{margin:6px 0;padding-left:20px}
.qv-wc-desc strong{color:var(--ink)}
/* v1.4.0 — Specs-Tabelle */
.qv-specs{
margin-top:8px;border-top:2px solid var(--ink);padding-top:10px;
}
.qv-specs summary{
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.18em;
color:var(--ink);cursor:pointer;padding:6px 0;list-style:none;
display:flex;align-items:center;gap:8px;
}
.qv-specs summary::before{content:"▸";transition:transform .15s}
.qv-specs[open] summary::before{transform:rotate(90deg)}
.qv-specs summary::-webkit-details-marker{display:none}
.qv-specs__table{
width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px;
}
.qv-specs__table tr{border-bottom:1px solid #eee}
.qv-specs__table th{
text-align:left;padding:6px 8px 6px 0;font-weight:normal;color:#666;width:35%;
font-family:"Archivo Black",sans-serif;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;
}
.qv-specs__table td{padding:6px 0;color:var(--ink)}
/* v1.4.0 — FAQ-Accordion im Quick-View */
.qv-faq{
margin-top:8px;border-top:2px solid var(--ink);padding-top:14px;
display:flex;flex-direction:column;gap:6px;
}
.qv-faq__title{
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.22em;
color:var(--ink);margin:0 0 4px;
}
.qv-faq__item{
border:2px solid var(--ink);border-radius:8px;background:#fafafa;padding:8px 12px;
}
.qv-faq__item summary{
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.04em;
color:var(--ink);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
}
.qv-faq__item summary::before{content:"+";font-size:16px;color:var(--magenta);transition:transform .15s}
.qv-faq__item[open] summary::before{content:"–"}
.qv-faq__item summary::-webkit-details-marker{display:none}
.qv-faq__item p{font-size:12.5px;line-height:1.5;color:#444;margin:6px 0 0;padding-left:18px}
/* v1.1.10 — Long-Description (Groessentabelle, Pflege, Welche Groesse passt mir)
Default-OPEN: kaufentscheidende Infos muessen sichtbar sein BEVOR Add-to-Cart. */
.qv-longdesc{
margin-top:8px;border-top:2px solid var(--ink);padding-top:18px;
font-size:13.5px;line-height:1.6;color:#222;
display:flex;flex-direction:column;gap:6px;
}
.qv-longdesc h3{
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.16em;
text-transform:uppercase;margin:14px 0 8px;
padding-bottom:4px;border-bottom:2px solid var(--ink);
}
.qv-longdesc h3:first-child{margin-top:0}
.qv-longdesc p{margin:6px 0}
.qv-longdesc ul{padding-left:18px;margin:6px 0;display:flex;flex-direction:column;gap:4px}
.qv-longdesc strong{color:var(--ink)}
.qv-longdesc hr{border:0;border-top:1px dashed #ccc;margin:12px 0}
.qv-longdesc small{font-size:11.5px;color:#888;font-style:italic}
.qv-longdesc table{
width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:13px;
border:2px solid var(--ink);border-radius:8px;overflow:hidden;
box-shadow:3px 3px 0 0 var(--ink);
}
.qv-longdesc table thead{background:var(--ink);color:#fff}
.qv-longdesc table th,
.qv-longdesc table td{padding:9px 12px;text-align:left;border-bottom:1px solid #eee}
.qv-longdesc table th{
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;
}
.qv-longdesc table tbody tr:nth-child(odd){background:#fafafa}
.qv-longdesc table tbody tr:hover{background:rgba(0,229,255,.08)}
.qv-longdesc table tbody tr:last-child td{border-bottom:none}
@media (max-width:700px){
.qv-longdesc table{display:block;overflow-x:auto;white-space:nowrap}
}
.qv-info{padding:28px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:92vh}
.qv-info .kicker{align-self:flex-start}
.qv-price{font-family:"Archivo Black",sans-serif;font-size:24px}
/* QV — Catalog Rich-Content Bloecke */
.qv-info .qv-hook{
font-family:"Archivo Black",sans-serif;font-size:16px;line-height:1.3;
color:var(--ink);background:var(--yellow);
padding:10px 14px;border:2px solid var(--ink);border-radius:10px;
box-shadow:3px 3px 0 0 var(--ink);align-self:flex-start;
}
.qv-info .qv-bullets{
list-style:none;display:flex;flex-direction:column;gap:6px;
padding:0;margin:4px 0;font-size:13.5px;line-height:1.55;color:#333;
}
.qv-info .qv-bullets li{
padding-left:22px;position:relative;
}
.qv-info .qv-bullets li::before{
content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;
background:var(--magenta);border:2px solid var(--ink);
}
.qv-info .qv-trust-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.qv-info .qv-trust-badge{
font-family:"Archivo Black",sans-serif;font-size:10px;letter-spacing:.14em;
background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:4px 10px;
}
.qv-info .qv-scarcity{
font-size:13px;color:var(--magenta);
background:rgba(255,31,164,.08);border:2px dashed var(--magenta);
padding:8px 12px;border-radius:8px;
}
.qv-info .qv-scarcity strong{font-family:"Archivo Black",sans-serif;letter-spacing:.04em}
.qv-info .qv-quote{
margin:0;padding:10px 14px;
background:#fff;border:2px solid var(--ink);border-left:6px solid var(--cyan);
border-radius:6px;display:flex;flex-direction:column;gap:6px;
}
.qv-info .qv-quote q{font-size:13.5px;line-height:1.5;color:var(--ink);quotes:"„" "“"}
.qv-info .qv-quote span{font-size:11px;letter-spacing:.06em;color:#666;font-family:"Archivo Black",sans-serif}
.qv-info .qv-loss{
font-size:12.5px;color:#666;font-style:italic;
border-top:1px dashed #ccc;padding-top:8px;margin-top:4px;
}
/* Cross-Sell unter dem Quick-View */
.qv-crosssell{
border-top:2px solid var(--ink);margin-top:8px;padding-top:14px;
display:flex;flex-direction:column;gap:10px;
}
.qv-crosssell h4{
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.22em;color:var(--ink);
}
.qv-crosssell__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.qv-crosssell__item{
display:flex;flex-direction:column;align-items:flex-start;gap:4px;
border:2px solid var(--ink);border-radius:10px;padding:6px;background:#fff;
text-decoration:none;color:var(--ink);
box-shadow:3px 3px 0 0 var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.qv-crosssell__item:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--magenta)}
.qv-crosssell__item img{
width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:#fafafa;
}
.qv-crosssell__name{
font-family:"Archivo Black",sans-serif;font-size:10px;letter-spacing:.04em;
line-height:1.2;
}
.qv-crosssell__price{font-size:11px;color:#666}
@media (max-width: 700px){.qv-crosssell__grid{grid-template-columns:repeat(2,1fr)}}
.qv-options fieldset{display:flex;flex-wrap:wrap;gap:8px}
.qv-options legend{font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.18em;margin-bottom:6px}
.qv-options label{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;padding:8px 12px;border:2px solid var(--ink);border-radius:999px;cursor:pointer;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.06em;background:#fff;
}
.qv-options input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.qv-options label:has(input:checked){background:var(--ink);color:#fff}
.qv-trust{color:#888;font-size:11px}
/* Cookie banner */
.cookie-banner{
position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
background:#fff;border:2px solid var(--ink);border-radius:14px;
box-shadow:8px 8px 0 0 var(--ink);
padding:16px;display:grid;gap:12px;
grid-template-columns:1fr auto;align-items:center;
opacity:1;transform:translateY(0);
transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
/* hidden-Attribut hat in einigen Browsern niedrige Spezifitaet — explizit ueberschreiben */
.cookie-banner[hidden]{display:none !important}
.cookie-banner.is-fading{opacity:0;transform:translateY(20px);pointer-events:none}
.cookie-banner p{font-size:13px;color:#333;line-height:1.5}
.cookie-banner a{border-bottom:1px solid var(--ink)}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-actions .cta-button{margin:0}
@media (max-width: 700px){.cookie-banner{grid-template-columns:1fr}}
/* Toast */
.toast-stack{
position:fixed;right:16px;bottom:16px;z-index:130;
display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
background:var(--ink);color:#fff;border:2px solid var(--ink);
padding:12px 18px;border-radius:14px;
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.08em;
box-shadow:5px 5px 0 0 var(--magenta);
pointer-events:auto;
animation:toastIn .35s var(--ease-out);
}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast.is-out{animation:toastOut .35s var(--ease-out) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px)}}
/* ---------- 7. EFFECTS ---------- */
.gravity-item{transition:transform .35s var(--ease-out);will-change:transform}
.cta-button{will-change:transform}
[data-parallax]{will-change:transform}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
/* =========================================================
8.5 LOOKBOOK / ON THE STREETS (Mockups + Statements)
========================================================= */
.lookbook{
border-top:2px solid var(--ink);
padding:clamp(40px,6vw,80px) clamp(16px,3vw,36px);
background:#fff;
}
.lookbook .lb-header{
max-width:min(1800px, 96vw);margin:0 auto clamp(24px,3vw,40px);
display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.lookbook .lb-header p{font-size:14.5px;color:#444;max-width:54ch;line-height:1.5}
.lb-grid{
max-width:min(1800px, 96vw);margin:0 auto;
display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);
grid-auto-flow:dense;
}
@media (max-width: 1100px){.lb-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 760px){.lb-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 460px){.lb-grid{grid-template-columns:1fr}}
/* PATCH-v13 (v1.5.4) — Card-Architektur-Wechsel:
Vorher: position:relative + overflow:hidden + absolute-positionierte Captions
als Overlay UEBER dem Image -> Captions verdecken Models.
Jetzt: flex-column. Image und Captions sind SIBLINGS, keine Overlays.
Image ist 100% sichtbar. Captions ueber/unter, nicht drueber.
*/
.lb-card{
position:relative;
display:flex;flex-direction:column;
/* KEINE aspect-ratio mehr — Card-Hoehe ist Image+Captions kombiniert */
/* KEIN overflow:hidden — Captions duerfen aus den Card-Bounds (z.B. Hover-Discover-Pill) */
border:2px solid var(--ink);border-radius:14px;
background:#fff;
overflow:hidden; /* fuer rounded-corners auf Image */
cursor:pointer;
box-shadow:6px 6px 0 0 var(--ink);
transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
text-decoration:none;color:var(--ink);
}
.lb-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 0 var(--magenta)}
.lb-card.lb-wide{grid-column:span 2}
@media (max-width: 460px){.lb-card.lb-wide{grid-column:span 1}}
.lb-card__img{
/* Image ist jetzt Flex-Item statt absolute-overlay.
aspect-ratio sorgt fuer konsistente Hoehe innerhalb der Card. */
position:static;
display:block;width:100%;height:auto;
aspect-ratio:4/5;
object-fit:cover;
order:2; /* image kommt nach statement (order:1), vor footer-tags (order:3) */
/* center 28% statt center top — keeps Gesicht + Brust-Print sichtbar
statt nur den Himmel/Hintergrund oben anzuzeigen */
object-position:center 28%;
transition:transform .8s var(--ease-out);
}
.lb-card:hover .lb-card__img{transform:scale(1.06)}
/* PATCH-v7 — Lazy-Load: kein Image bevor IntersectionObserver fuelltern.
Card-Background bleibt #0A0A0A (siehe .lb-card), bis das Image geladen ist. */
.lb-card__img.lb-lazy{
opacity:0;
}
.lb-card__img.lb-loaded{
opacity:1;
transition:opacity .35s var(--ease-out), transform .8s var(--ease-out);
}
/* v1.5.4: KEIN Gradient mehr — Image hat keine Tags-Overlay mehr, kein Lesbarkeits-Problem */
.lb-card::after{ content:none; }
/* PATCH-v13 (v1.5.4) — Lookbook-Statement: TOP-Band als Flex-Sibling, NICHT Overlay.
Sitzt UEBER dem Image, das Image bleibt 100% sichtbar. Wie screenshot 2 rechts (gut). */
.lb-statement{
position:static; /* kein absolute mehr */
order:1; /* erstes Flex-Item — UEBER dem Image */
display:block;
width:100%;
font-family:"Archivo Black",sans-serif;
font-size:clamp(12px,1.1vw,15px);
letter-spacing:0;
line-height:1.25;
color:var(--ink);background:var(--yellow);
border-bottom:2px solid var(--ink);
padding:10px 14px;
text-align:center;
word-break:normal;
overflow-wrap:break-word;
hyphens:auto;
min-height:48px; /* konsistente Hoehe, sieht ordentlich aus auch bei kurzem Text */
display:flex;align-items:center;justify-content:center;
transition:background .25s var(--ease-out);
}
.lb-wide .lb-statement{
font-size:clamp(13px,1.3vw,17px);
padding:12px 18px;
min-height:54px;
}
.lb-card:hover .lb-statement{
background:var(--magenta);color:#fff;
}
.lb-statement--cyan{background:var(--cyan)}
.lb-statement--magenta{background:var(--magenta);color:#fff}
.lb-statement--magenta{box-shadow:3px 3px 0 var(--ink)}
/* PATCH-v13 (v1.5.4) — Location + Product werden Flex-Siblings UNTER dem Image.
Als kombinierter Footer-Bar (Magenta-Band) statt floating Pills auf dem Image.
Image bleibt 100% sichtbar. */
.lb-location{
position:static;order:4; /* unter Product (order:3) wenn beide da */
display:block;width:100%;
font-family:"Archivo Black",sans-serif;
font-size:10px;letter-spacing:.2em;
background:var(--cyan);color:var(--ink);
border-top:2px solid var(--ink);
padding:6px 14px;
text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-product{
position:static;order:3; /* erstes Footer-Element, direkt nach Image */
display:block;width:100%;
font-family:"Archivo Black",sans-serif;
font-size:11px;letter-spacing:.18em;
background:var(--magenta);color:#fff;
border-top:2px solid var(--ink);
padding:8px 14px;
text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-product--no-link{background:#fff;color:var(--ink)}
/* Focus state for keyboard */
.lb-card:focus-visible{outline:3px solid var(--magenta);outline-offset:4px}
/* PATCH-v13 (v1.5.4) — Discover-Hint: floating-Pill mittig auf dem Image (Hover-Only).
Sitzt center-center auf der Image-Section, nicht auf den Captions. */
.lb-discover{
position:absolute;
left:50%;top:50%;transform:translate(-50%, -50%) scale(.95);
z-index:3;
font-family:"Archivo Black",sans-serif;
font-size:11px;letter-spacing:.2em;
background:var(--ink);color:var(--yellow);
border:2px solid var(--ink);border-radius:999px;
padding:8px 14px;
box-shadow:3px 3px 0 var(--cyan);
opacity:0;pointer-events:none;
transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
white-space:nowrap;
}
.lb-card:hover .lb-discover,
.lb-card:focus-visible .lb-discover{
opacity:1;transform:translate(-50%, -50%) scale(1);
}
/* v1.5.4 — Product-Pill bleibt sichtbar (steht ja UNTER dem Image, kollidiert nicht mehr) */
/* Yellow statement variant (explicit) */
.lb-statement--yellow{background:var(--yellow)}
/* Filter-Tabs (Umbrella-Filter ueber dem Grid) */
.lb-filter{
display:flex;flex-wrap:wrap;gap:8px;
margin-top:16px;
}
.lb-filter__btn{
font-family:"Archivo Black",sans-serif;
font-size:11px;letter-spacing:.18em;
background:#fff;color:var(--ink);
border:2px solid var(--ink);border-radius:999px;
padding:8px 14px;
cursor:pointer;
display:inline-flex;align-items:center;gap:8px;
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s;
}
.lb-filter__btn:hover{
transform:translate(-2px,-2px);
box-shadow:3px 3px 0 var(--magenta);
}
.lb-filter__btn.is-active{
background:var(--ink);color:var(--yellow);
box-shadow:3px 3px 0 var(--cyan);
}
.lb-filter__num{
font-size:10px;font-weight:normal;
background:rgba(255,255,255,.15);
padding:2px 7px;border-radius:999px;
border:1px solid currentColor;
}
.lb-filter__btn:not(.is-active) .lb-filter__num{
background:var(--paper);color:var(--ink);
}
/* Hidden cards (during filter) */
.lb-card.is-hidden{display:none}
/* Empty-State */
.lb-empty{
grid-column:1/-1;
padding:clamp(30px,5vw,60px);
text-align:center;
border:2px dashed var(--ink);
border-radius:14px;
background:#fafafa;
font-family:"Archivo Black",sans-serif;
font-size:13px;letter-spacing:.1em;color:#666;
}
.lb-empty code{
background:#fff;border:1px solid var(--ink);
padding:2px 6px;border-radius:4px;
font-family:ui-monospace,monospace;font-size:12px;
}
/* =========================================================
9. COLLECTION SECTION (Sidebar-Tabs + Filter-Grid)
========================================================= */
.collection-section{
border-top:2px solid var(--ink);
padding:clamp(40px,6vw,80px) clamp(16px,3vw,36px);
background:var(--paper);
}
.cs-header{
max-width:min(1800px, 96vw);margin:0 auto clamp(20px,3vw,40px);
display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.cs-layout{
max-width:min(1800px, 96vw);margin:0 auto;
display:grid;grid-template-columns:240px 1fr;gap:clamp(20px,3vw,36px);
}
@media (max-width: 900px){.cs-layout{grid-template-columns:1fr}}
/* Sidebar Tabs */
.cs-tabs{
display:flex;flex-direction:column;gap:10px;
position:sticky;top:84px;align-self:start;
}
@media (max-width: 900px){
.cs-tabs{
position:static;flex-direction:row;flex-wrap:nowrap;
overflow-x:auto;padding:4px 0 12px;
scrollbar-width:thin;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
.cs-tabs .cs-tab{flex:0 0 auto;scroll-snap-align:start}
}
.cs-tab{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 18px;border:2px solid var(--ink);border-radius:14px;
background:#fff;box-shadow:4px 4px 0 0 var(--ink);
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.12em;
cursor:pointer;white-space:nowrap;color:var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s, color .2s;
}
.cs-tab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--magenta)}
.cs-tab.is-active{background:var(--ink);color:#fff;box-shadow:4px 4px 0 0 var(--magenta)}
.cs-tab__num{
font-size:11px;
background:#f0f0f0;border-radius:999px;padding:2px 8px;color:var(--ink);
font-family:"Inter",sans-serif;font-weight:800;letter-spacing:.04em;
}
.cs-tab.is-active .cs-tab__num{background:var(--cyan)}
/* Filter Grid */
.cs-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:16px;align-content:start;
}
.cs-grid .product-tile{height:auto;min-height:340px;display:flex;flex-direction:column}
.cs-grid .product-tile:not(.is-visible){display:none}
.cs-grid .apparel-frame{aspect-ratio:1/1}
.cs-empty{
grid-column:1/-1;
border:2px dashed var(--ink);border-radius:14px;
padding:40px 20px;text-align:center;color:#777;
font-family:"Archivo Black",sans-serif;letter-spacing:.18em;font-size:13px;
}
/* =========================================================
10. APPAREL FRAMES — neue Kategorien
========================================================= */
/* TANK TOP — schmal, ohne Aermel, breitere Schulteroeffnung */
.apparel-frame.apparel-tank::before{
content:"";position:absolute;inset:6% 22% 4% 22%;
background:#fff;border:2px solid var(--ink);border-radius:8px 8px 16px 16px;
z-index:0;
}
.apparel-frame.apparel-tank::after{
content:"";position:absolute;top:6%;left:36%;right:36%;height:5%;
background:#fff;border-bottom:2px solid var(--ink);
clip-path:polygon(20% 0,42% 100%,58% 100%,80% 0);
z-index:1;
}
/* LONGSLEEVE — Tee-Form mit langem Saum */
.apparel-frame.apparel-longsleeve::before{
content:"";position:absolute;inset:6% 4% 4% 4%;
background:#fff;border:2px solid var(--ink);border-radius:14px 14px 18px 18px;
z-index:0;
}
.apparel-frame.apparel-longsleeve::after{
content:"";position:absolute;top:6%;left:38%;right:38%;height:5%;
background:#fff;border-bottom:2px solid var(--ink);
clip-path:polygon(20% 0,42% 100%,58% 100%,80% 0);
z-index:1;
}
/* CAP — Halbkreis mit Schirm */
.apparel-frame.apparel-cap{padding:14% 18% 18%}
.apparel-frame.apparel-cap::before{
content:"";position:absolute;left:18%;right:18%;top:24%;height:48%;
background:#fff;border:2px solid var(--ink);
border-radius:50% 50% 14% 14%;
z-index:0;
}
.apparel-frame.apparel-cap::after{
content:"";position:absolute;left:8%;right:8%;bottom:22%;height:14%;
background:#fff;border:2px solid var(--ink);border-radius:50% 50% 0 0/100% 100% 0 0;
z-index:0;
}
.apparel-frame.apparel-cap img{width:48%;max-height:46%}
/* MUG — Becher mit Henkel */
.apparel-frame.apparel-mug::before{
content:"";position:absolute;inset:14% 30% 14% 18%;
background:#fff;border:2px solid var(--ink);border-radius:8px;
z-index:0;
}
.apparel-frame.apparel-mug::after{
content:"";position:absolute;right:14%;top:30%;width:18%;height:40%;
border:2px solid var(--ink);border-left:none;border-radius:0 60% 60% 0;
z-index:0;background:transparent;
}
.apparel-frame.apparel-mug img{margin-right:14%;width:48%;max-height:62%}
/* BOTTLE — schmale Flasche mit Verschluss */
.apparel-frame.apparel-bottle::before{
content:"";position:absolute;inset:18% 38% 4% 38%;
background:#fff;border:2px solid var(--ink);border-radius:8px 8px 18px 18px;
z-index:0;
}
.apparel-frame.apparel-bottle::after{
content:"";position:absolute;top:8%;left:46%;right:46%;height:12%;
background:#fff;border:2px solid var(--ink);border-radius:6px 6px 0 0;
z-index:1;
}
.apparel-frame.apparel-bottle img{width:32%;max-height:62%}
/* =========================================================
11. WHY TABS (Story / Blogs / Feedback)
========================================================= */
.why-section{padding-top:clamp(40px,7vw,96px)}
.why-section .why-header{
max-width:min(1800px, 96vw);margin:0 auto 22px;
display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.why-tabs{
max-width:min(1800px, 96vw);margin:0 auto 28px;
display:flex;gap:10px;flex-wrap:wrap;
border-bottom:2px solid var(--ink);padding-bottom:18px;
}
.why-tab{
padding:12px 24px;border:2px solid var(--ink);border-radius:999px;
background:#fff;box-shadow:4px 4px 0 0 var(--ink);
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.14em;
cursor:pointer;color:var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s, color .2s;
}
.why-tab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--magenta)}
.why-tab.is-active{background:var(--ink);color:#fff;box-shadow:4px 4px 0 0 var(--magenta)}
.why-panel{max-width:min(1800px, 96vw);margin:0 auto}
.why-panel[hidden]{display:none}
/* Blog Grid */
.blog-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
}
.blog-card{
border:2px solid var(--ink);border-radius:14px;background:#fff;
box-shadow:5px 5px 0 0 var(--ink);overflow:hidden;
display:flex;flex-direction:column;
transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
text-decoration:none;color:inherit;
}
a.blog-card{cursor:pointer}
a.blog-card:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.blog-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--magenta)}
.blog-card .blog-img{
height:180px;background-size:cover;background-position:center;
background-color:#0A0A0A;
border-bottom:2px solid var(--ink);position:relative;
}
/* Empty-State Fallback: Pop-Art-Stripes wenn kein inline-background-image gesetzt.
Das inline-style hat hoehere Specificity, ueberschreibt die Stripes automatisch
wenn vorhanden. Wenn $img leer war (kein Featured-Image -> sollte durch
meta_query gefiltert sein, aber Safety-Net), bleibt der Fallback sichtbar. */
.blog-card .blog-img:not([style]){
background-image:linear-gradient(135deg,
var(--cyan) 0%, var(--cyan) 33%,
var(--magenta) 33%, var(--magenta) 66%,
var(--yellow) 66%, var(--yellow) 100%);
}
.blog-card .blog-tag{
position:absolute;top:12px;left:12px;
font-family:"Archivo Black",sans-serif;font-size:10px;letter-spacing:.18em;
background:var(--ink);color:#fff;padding:5px 10px;border-radius:999px;
}
.blog-card .blog-tag--cyan{background:var(--cyan);color:var(--ink)}
.blog-card .blog-tag--magenta{background:var(--magenta);color:#fff}
.blog-card .blog-tag--yellow{background:var(--yellow);color:var(--ink)}
.blog-card .blog-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card h3{font-family:"Archivo Black",sans-serif;font-size:16px;line-height:1.2}
.blog-card p{font-size:13px;color:#444;line-height:1.5}
.blog-card .blog-meta{
margin-top:auto;font-size:11px;color:#888;letter-spacing:.04em;
display:flex;justify-content:space-between;
}
.blog-more{
margin-top:24px;display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:12px;padding:14px 18px;
border:2px dashed var(--ink);border-radius:14px;background:#fafafa;
}
.blog-more-meta{font-size:12px;color:#666;letter-spacing:.04em;margin:0}
/* Feedback Grid */
.feedback-summary{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
margin-bottom:18px;padding:18px 22px;
background:#fff;border:2px solid var(--ink);border-radius:14px;
box-shadow:5px 5px 0 0 var(--ink);
}
.feedback-summary .fs-rating{font-family:"Archivo Black",sans-serif;font-size:36px;line-height:1}
.feedback-summary .fs-stars{color:var(--magenta);font-size:18px;letter-spacing:2px}
.feedback-summary .fs-meta{font-size:13px;color:#444}
.feedback-summary .fs-cta{margin-left:auto}
.feedback-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
}
.review-card{
border:2px solid var(--ink);border-radius:14px;background:#fff;
box-shadow:5px 5px 0 0 var(--ink);
padding:18px 22px;display:flex;flex-direction:column;gap:10px;
transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.review-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--cyan)}
.review-card .review-stars{color:var(--magenta);font-size:16px;letter-spacing:2px;line-height:1}
.review-card q{font-size:14px;line-height:1.5;color:#222;quotes:"„" "“";display:block}
.review-card .review-who{
font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.06em;
display:flex;align-items:center;gap:8px;
}
.review-card .review-avatar{
width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);
background:linear-gradient(135deg,var(--cyan),var(--magenta));display:inline-block;
}
.review-card .review-meta{font-size:11px;color:#888;letter-spacing:.04em}
.review-card .review-product{
font-size:10px;padding:4px 8px;border:1.5px solid var(--ink);border-radius:999px;
align-self:flex-start;font-family:"Archivo Black",sans-serif;letter-spacing:.1em;
background:var(--yellow);
}
/* =========================================================
13. LEGAL PAGES (AGB, Impressum, Datenschutz, Widerruf)
========================================================= */
.legal-page{
max-width:880px;margin:0 auto;
padding:clamp(28px,5vw,72px) clamp(16px,3vw,36px) clamp(40px,6vw,80px);
}
.legal-page .legal-header{
display:flex;flex-direction:column;gap:14px;align-items:flex-start;
margin-bottom:clamp(20px,3vw,40px);
}
.legal-page .legal-header h1{
font-family:"Archivo Black",sans-serif;line-height:.95;
font-size:clamp(36px,6vw,72px);letter-spacing:-.01em;
}
.legal-page .legal-meta{font-size:13px;color:#666;letter-spacing:.04em}
.legal-notice{
display:flex;gap:14px;align-items:flex-start;
border:2px solid var(--ink);border-radius:14px;background:var(--yellow);
padding:14px 18px;box-shadow:5px 5px 0 0 var(--ink);
margin-bottom:clamp(24px,3vw,40px);
}
.legal-notice__icon{
flex:0 0 auto;width:32px;height:32px;border-radius:50%;
background:var(--ink);color:var(--yellow);display:grid;place-items:center;
font-family:"Archivo Black",sans-serif;font-size:16px;
}
.legal-notice p{font-size:13.5px;line-height:1.55;color:var(--ink)}
.legal-notice strong{font-family:"Archivo Black",sans-serif;letter-spacing:.04em}
.legal-toc{
border:2px solid var(--ink);border-radius:14px;background:#fff;
padding:18px 22px;box-shadow:5px 5px 0 0 var(--ink);
margin-bottom:clamp(24px,3vw,40px);
}
.legal-toc h2{font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.18em;margin-bottom:10px}
.legal-toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 18px}
.legal-toc ol > li{counter-increment:toc;font-size:13px}
.legal-toc ol > li::before{
content:"§ " counter(toc) " ";color:var(--magenta);
font-family:"Archivo Black",sans-serif;
}
.legal-toc a:hover{border-bottom:2px solid var(--magenta)}
.legal-page .vendor-card{
border:2px solid var(--ink);border-radius:14px;background:#fff;
padding:16px 20px;box-shadow:4px 4px 0 0 var(--ink);
margin:6px 0 18px;display:grid;gap:6px;font-size:14px;
}
.legal-page .vendor-card strong{font-family:"Archivo Black",sans-serif;letter-spacing:.04em}
.legal-page section.legal-section{margin-bottom:clamp(20px,2.5vw,32px);scroll-margin-top:90px}
.legal-page section.legal-section h2{
font-family:"Archivo Black",sans-serif;
font-size:clamp(20px,2.4vw,28px);line-height:1.1;letter-spacing:-.005em;
margin-bottom:10px;display:flex;gap:10px;align-items:baseline;
}
.legal-page section.legal-section h2 .num{color:var(--magenta)}
.legal-page section.legal-section h3{
font-family:"Archivo Black",sans-serif;
font-size:14px;letter-spacing:.04em;margin-top:14px;margin-bottom:6px;
}
.legal-page section.legal-section p,
.legal-page section.legal-section li{
font-size:14.5px;line-height:1.7;color:#222;font-weight:500;
max-width:68ch;
}
.legal-page section.legal-section p + p{margin-top:8px}
.legal-page section.legal-section ul,
.legal-page section.legal-section ol{
padding-left:22px;margin:6px 0 4px;display:flex;flex-direction:column;gap:4px;
}
.legal-page section.legal-section ul li::marker{color:var(--magenta)}
.legal-page .revoke-form{
border:2px dashed var(--ink);border-radius:14px;background:#fafafa;
padding:18px 22px;margin:14px 0;font-size:13.5px;line-height:1.7;
}
.legal-page .revoke-form h4{
font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.18em;
margin-bottom:10px;color:var(--magenta);
}
.legal-page a{
color:var(--ink);border-bottom:2px solid var(--magenta);
transition:color .15s, background .15s;
}
.legal-page a:hover{background:var(--yellow)}
.legal-back{
display:inline-flex;align-items:center;gap:6px;
margin-bottom:18px;padding:8px 14px;
border:2px solid var(--ink);border-radius:999px;background:#fff;
font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.18em;
box-shadow:3px 3px 0 0 var(--ink);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.legal-back:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--magenta);background:var(--yellow) !important}
/* =========================================================
14. ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce){
*{animation:none !important;transition:none !important}
.gravity-item,[data-parallax]{transform:none !important}
.reveal{opacity:1;transform:none}
}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:6px}
button:focus-visible,a:focus-visible{outline-offset:4px}
/* =========================================================
15. CUSTOM CURSOR (Pop-Art Antigravity Particle Field)
- Inner-Dot folgt direkt der Maus
- ~60 .yt-particle sind ueber das Viewport verstreut und
werden bei Cursor-Naehe zur Maus angezogen (siehe script.js §15).
- Alle Layers: pointer-events:none -> kein Klick-Blocker.
========================================================= */
/* nativen Cursor verstecken, sobald JS aktiv ist */
html.yt-cursor-active,
html.yt-cursor-active *{cursor:none !important}
/* ---- Quick-View / Modal-Dialog Fix ----
Dialoge mit showModal() rendern in der Browser-Top-Layer, die ueber
ALLEM liegt — auch ueber unserem custom .yt-cursor (z-index 9999).
Innerhalb des Dialogs muss der Cursor deshalb per CSS-`cursor`-Property
am Element selbst gesetzt werden. Wir verwenden eine inline-SVG-URL
mit dem Pop-Art-Arrow (cyan fill + ink stroke), Fallback auf `auto`. */
html.yt-cursor-active dialog,
html.yt-cursor-active dialog *,
html.yt-cursor-active dialog::backdrop{
cursor: url("data:image/svg+xml;utf8,") 4 2,
auto !important;
}
html.yt-cursor-active dialog button,
html.yt-cursor-active dialog a,
html.yt-cursor-active dialog [role="button"],
html.yt-cursor-active dialog label{
cursor: url("data:image/svg+xml;utf8,") 4 2,
pointer !important;
}
.yt-cursor{
position:fixed;top:0;left:0;
pointer-events:none;
z-index:9999;
opacity:0;
will-change:transform;
transition:opacity .25s ease;
}
.yt-cursor.is-visible{opacity:1}
/* CURSOR ARROW — Pop-Art Maus-Pfeil (SVG) */
#yt-cursor-arrow{
width:22px;height:26px;
filter:drop-shadow(2px 2px 0 var(--magenta));
transition:filter .2s ease;
}
#yt-cursor-arrow svg{
width:100%;height:100%;display:block;overflow:visible;
}
#yt-cursor-arrow polygon{
fill:var(--cyan);
stroke:var(--ink);
stroke-width:2.2;
stroke-linejoin:round;
stroke-linecap:round;
transition:fill .2s ease;
}
#yt-cursor-arrow.is-hovering{
filter:drop-shadow(2px 2px 0 var(--ink));
}
#yt-cursor-arrow.is-hovering polygon{fill:var(--magenta)}
#yt-cursor-arrow.is-cta{
filter:drop-shadow(2px 2px 0 var(--ink));
}
#yt-cursor-arrow.is-cta polygon{fill:var(--yellow)}
#yt-cursor-arrow.is-clicking polygon{
animation:ytArrowPulse .25s ease;
}
@keyframes ytArrowPulse{
0% {fill:var(--cyan)}
50% {fill:var(--yellow)}
100%{fill:var(--cyan)}
}
/* PARTICLES — kleine Pop-Art-Punkte, ueber Viewport verstreut */
.yt-particle{
position:fixed;top:0;left:0;
pointer-events:none;
z-index:9997;
width:6px;height:6px;
border:1.5px solid var(--ink);
border-radius:50%;
opacity:0;
will-change:transform;
transition:opacity .35s ease, box-shadow .25s ease, border-color .25s, background .25s, transform .15s linear;
}
html.yt-particles-on .yt-particle{opacity:.55}
html.yt-particles-on .yt-particle.is-active{
opacity:1;
box-shadow:2px 2px 0 var(--ink);
}
/* Farbvarianten */
.yt-particle[data-kind="cyan"] {background:var(--cyan)}
.yt-particle[data-kind="magenta"]{background:var(--magenta)}
.yt-particle[data-kind="yellow"] {background:var(--yellow)}
.yt-particle[data-kind="ink"] {background:var(--ink);border-color:var(--ink)}
/* Formvarianten */
.yt-particle[data-shape="square"]{border-radius:2px}
.yt-particle[data-shape="plus"]{
border:none;background:transparent;border-radius:0;
/* + Zeichen via Conic-/Linear-Gradient */
background-image:
linear-gradient(to right, transparent 40%, var(--ink) 40% 60%, transparent 60%),
linear-gradient(to bottom, transparent 40%, var(--ink) 40% 60%, transparent 60%);
}
.yt-particle[data-shape="plus"][data-kind="cyan"]{
background-image:
linear-gradient(to right, transparent 40%, var(--cyan) 40% 60%, transparent 60%),
linear-gradient(to bottom, transparent 40%, var(--cyan) 40% 60%, transparent 60%);
}
.yt-particle[data-shape="plus"][data-kind="magenta"]{
background-image:
linear-gradient(to right, transparent 40%, var(--magenta) 40% 60%, transparent 60%),
linear-gradient(to bottom, transparent 40%, var(--magenta) 40% 60%, transparent 60%);
}
.yt-particle[data-shape="plus"][data-kind="yellow"]{
background-image:
linear-gradient(to right, transparent 40%, var(--yellow) 40% 60%, transparent 60%),
linear-gradient(to bottom, transparent 40%, var(--yellow) 40% 60%, transparent 60%);
}
/* CLICK BURST — radial Pop-Art Welle */
.yt-cursor-burst{
position:fixed;
pointer-events:none;
z-index:9998;
width:24px;height:24px;
border:3px solid var(--magenta);
border-radius:50%;
background:transparent;
transform:translate(-50%,-50%);
animation:ytBurst .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ytBurst{
0% {width:24px;height:24px;opacity:1;border-color:var(--magenta);border-width:3px}
60% {opacity:.7;border-color:var(--cyan)}
100% {width:220px;height:220px;opacity:0;border-color:var(--cyan);border-width:1px}
}
/* GRAVITY-ITEM in Cursor-Naehe -> Magenta-Halo */
.gravity-item.is-near-cursor{
box-shadow:12px 12px 0 0 var(--magenta) !important;
z-index:2;
}
/* Reduced-motion / touch: alles aus (Sicherheits-Doppelung zur JS-Pruefung) */
@media (prefers-reduced-motion: reduce){
.yt-cursor,.yt-cursor-burst,.yt-particle{display:none !important}
html.yt-cursor-active,
html.yt-cursor-active *{cursor:auto !important}
}
@media (hover: none) and (pointer: coarse){
.yt-cursor,.yt-cursor-burst,.yt-particle{display:none !important}
html.yt-cursor-active,
html.yt-cursor-active *{cursor:auto !important}
}