/* The Archive — Designsprache des Redesigns. Liegt über style.css:
   Warenkorb, Formulare und Rechtstexte erben von dort. */
:root{--bg:#EFEEEA;--stone:#EFEEEA;--panel:#F7F6F3;--plate:#E2E0DA;--photo-ground:#E2E0DA;--card-ground:#E2E0DA;--ink:#0E0E0F;--line:#0E0E0F;--accent:#722438;
  --disp:"Archivo Black","Archivo",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0D0D0E;--stone:#0D0D0E;--panel:#151516;--plate:#1B1B1D;--photo-ground:#1B1B1D;--card-ground:#1B1B1D;--ink:#EFEEEA;--line:#EFEEEA;--accent:#C96A82}}
:root[data-theme="dark"]{--bg:#0D0D0E;--stone:#0D0D0E;--panel:#151516;--plate:#1B1B1D;--photo-ground:#1B1B1D;--card-ground:#1B1B1D;--ink:#EFEEEA;--line:#EFEEEA;--accent:#C96A82}
body{background:var(--bg)}
.btn,.buy__size,.buy__add,input,select,textarea{border-radius:0}
.xlabel{font:400 .72rem/1.5 var(--fm);letter-spacing:.04em;text-transform:uppercase;margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sw{display:inline-block;width:11px;height:11px;border:1px solid var(--line);border-radius:0;margin-right:6px;vertical-align:-1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Startseite */
.xhero{position:relative;min-height:calc(100svh - var(--head-h,64px));overflow:hidden;border-bottom:1px solid var(--line);padding:clamp(16px,2vw,28px)}
.xhero h1{font:400 clamp(3.4rem,14.6vw,15.5rem)/.84 var(--disp);letter-spacing:-.045em;text-transform:uppercase;margin:0;position:relative}
.xhero h1 em{font:italic 400 1.22em/.8 var(--fs);letter-spacing:-.03em;text-transform:none;color:var(--accent)}
.xhero__fig{position:absolute;right:7%;bottom:0;width:min(48vw,88svh);z-index:2}
.xhero__fig img{display:block;width:100%;height:auto}
.xhero__a{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}
.xhero__b{position:absolute;right:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);text-align:right;z-index:3}
.xhero__go{font:400 clamp(1.1rem,2vw,1.6rem) var(--disp);text-transform:uppercase;text-decoration:none;color:inherit;border-bottom:3px solid currentColor}
.xhero>.xhero__go{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:3}
.xrun{overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink);color:var(--bg)}
.xrun>div{display:flex;width:max-content;animation:xrun 70s linear infinite}
.xrun span{font:400 .75rem/2.6 var(--fm);text-transform:uppercase;padding-right:3.5em;white-space:nowrap}
@keyframes xrun{to{transform:translateX(-50%)}}
.xsel{padding-block:var(--space)}
.xsel__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);margin-top:18px}
.xsel__grid .xcard:nth-child(1){grid-column:1/6}
.xsel__grid .xcard:nth-child(2){grid-column:8/13;margin-top:18vw}
.xsel__grid .xcard:nth-child(3){grid-column:3/7;margin-top:-10vw}
.xsel__grid .xcard:nth-child(4){grid-column:7/11;margin-top:4vw}
.xdrop{border-block:1px solid var(--line);padding-block:var(--space)}
.xdrop h2{font:italic 400 clamp(2.8rem,10vw,10rem)/.92 var(--fs);margin:.15em 0 .4em}
.xdrop__row{display:grid;grid-template-columns:repeat(10,1fr);border-left:1px solid var(--line);margin-bottom:30px}
.xdrop__row a{border:1px solid var(--line);border-left:0;text-decoration:none;color:inherit;font:400 .62rem var(--fm);text-align:center;padding-bottom:6px}
.xdrop__row img{display:block;width:100%;height:auto}
.xdrop__row a:hover{background:var(--plate)}
.xstatement{padding-block:var(--space)}
.xstatement p:not(.xlabel){font:400 clamp(1.8rem,5vw,4.6rem)/1.04 var(--fs);max-width:19em;margin:0 0 .6em auto}

/* Karten */
.xcard{position:relative;display:block;text-decoration:none;color:inherit}
.xcard__no{display:block;font:400 .68rem/1.9 var(--fm)}
.xcard__img{position:relative;display:block;aspect-ratio:1;background:var(--plate);overflow:hidden}
.xcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .28s}
.xcard__img img+img{opacity:0}
@media (hover:hover){.xcard:hover .xcard__img img{opacity:0}.xcard:hover .xcard__img img+img{opacity:1}}
.xcard__tag{position:absolute;right:0;top:1.35rem;background:var(--ink);color:var(--bg);font:400 .62rem/1 var(--fm);text-transform:uppercase;padding:5px 7px;z-index:1}
.xcard__name{display:block;font:400 clamp(.86rem,1.2vw,1.05rem)/1.15 var(--disp);text-transform:uppercase;margin-top:9px}
.xcard__meta{display:flex;justify-content:space-between;gap:8px;font:400 .7rem/1.7 var(--fm)}
.xgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px) clamp(10px,1.2vw,18px)}
.xgrid--shop{grid-template-columns:repeat(3,1fr);padding-block:28px var(--space)}
.xgrid--shop .xcard:nth-child(7n+1){grid-column:span 2}

/* Shop */
.xshop__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px;border-bottom:1px solid var(--line);padding-block:clamp(26px,5vw,60px) 14px}
.xshop__head h1{font:400 clamp(3.4rem,13vw,12rem)/.85 var(--disp);letter-spacing:-.04em;text-transform:uppercase;margin:0;flex:1 1 100%;overflow-wrap:anywhere}
.xshop__cats{margin-left:auto;display:flex;gap:18px;font:400 .72rem var(--fm);text-transform:uppercase}
.xshop__cats a{color:inherit;text-decoration:none;padding:8px 0}
.xshop__cats a[aria-current]{border-bottom:2px solid currentColor}

/* Produktseite */
.xpdp__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);align-items:start;border-bottom:1px solid var(--line)}
.xpdp__gallery{display:grid;grid-template-columns:1fr 1fr;border-right:1px solid var(--line)}
.xpdp__gallery figure{position:relative;margin:0;background:var(--plate);border-bottom:1px solid var(--bg);border-right:1px solid var(--bg)}
.xpdp__gallery figure:first-child{grid-column:1/-1}
.xpdp__gallery img{display:block;width:100%;height:auto}
.xpdp__gallery figcaption{position:absolute;left:10px;bottom:8px;font:400 .62rem var(--fm)}
.xpdp__facts{position:sticky;top:var(--head-h,64px);max-height:calc(100vh - var(--head-h,64px));overflow:auto;padding:clamp(18px,2.6vw,38px)}
.xpdp__facts .xlabel a{color:inherit}
.xpdp__facts h1{font:400 clamp(2rem,3.9vw,3.8rem)/.92 var(--disp);letter-spacing:-.03em;text-transform:uppercase;margin:16px 0 4px}
.xpdp__colour{font:italic 400 clamp(1.5rem,2.4vw,2.2rem)/1.1 var(--fs);margin:0}
.xpdp__price{font:400 1rem var(--fm);margin:14px 0}
.xpdp__line{max-width:40ch;margin:0 0 20px}
.xpdp__sibs{display:flex;gap:6px;list-style:none;margin:6px 0 20px;padding:0}
.xpdp__sibs a{display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent}
.xpdp__sibs a[aria-current]{border-color:var(--line)}
.xpdp__sibs .sw{width:24px;height:24px;margin:0}
.xpdp details{border-top:1px solid var(--line);padding:13px 0}
.xpdp details:first-of-type{margin-top:22px}
.xpdp summary{cursor:pointer;font:400 .75rem var(--fm);text-transform:uppercase}
.xpdp details table{width:100%;margin-top:10px;font-size:.84rem}
.xrelated{padding-block:clamp(36px,5vw,70px)}
.xrelated h2{margin-bottom:14px}

/* Footer */
.xfoot{border-top:1px solid var(--line);padding-top:30px;overflow:hidden}
.xfoot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.xfoot nav a{display:block;color:inherit;text-decoration:none;font:400 .74rem/2.1 var(--fm);overflow-wrap:anywhere}
.xfoot nav a:hover{text-decoration:underline}
.xfoot__mark{font:400 13.1vw/.9 var(--disp);letter-spacing:-.05em;text-transform:uppercase;white-space:nowrap;margin:30px 0 8px;text-align:center}
.xfoot small{display:block;font:400 .66rem var(--fm);padding-bottom:16px}

@media (max-width:900px){
  .xpdp__top{grid-template-columns:1fr}
  .xpdp__gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-right:0}
  .xpdp__gallery figure{flex:0 0 86vw;scroll-snap-align:start}
  .xpdp__facts{position:static;max-height:none}
}
@media (max-width:700px){
  .xhero h1{font-size:19.5vw}
  .xhero__fig{right:-6%;width:104vw}
  .xhero__a{display:none}
  .xhero__b{top:auto;bottom:62px}
  .xsel__grid{grid-template-columns:1fr 1fr}
  .xsel__grid .xcard:nth-child(n){grid-column:auto;margin:0}
  .xsel__grid .xcard:nth-child(3n+1){grid-column:1/-1}
  .xdrop__row{grid-template-columns:repeat(5,1fr)}
  .xgrid,.xgrid--shop{grid-template-columns:1fr 1fr}
  .xgrid--shop .xcard:nth-child(7n+1){grid-column:auto}
  .xgrid--shop .xcard:nth-child(5n+1){grid-column:1/-1}
  .xfoot__grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.xrun>div{animation:none}.xcard__img img{transition:none}}

/* Korrekturen nach Sichtprüfung */
.xhero__b{top:auto;bottom:calc(clamp(16px,2vw,28px) + 44px)}
.xgrid--shop{grid-auto-flow:dense}
.xpdp .pspec{table-layout:fixed;width:100%;min-width:0}
.xpdp .pspec th,.xpdp .pspec td{white-space:normal;overflow-wrap:anywhere;padding-inline:0}
.xpdp .pspec th{width:32%}
@media (max-width:700px){.xhero__b{display:none}}

/* Tabloid × Cut & Paste */
@font-face{font-family:"Anton";font-display:swap;src:url(fonts/anton-latin.woff2) format("woff2")}
@font-face{font-family:"Special Elite";font-display:swap;src:url(fonts/special-elite-latin.woff2) format("woff2")}
:root{--bg:#E8AEC5;--stone:#E8AEC5;--panel:#F3EFE6;--plate:#F3EFE6;--photo-ground:#F3EFE6;--card-ground:#F3EFE6;--ink:#111;--line:#111;--accent:#111;--tape:#F2E23A;
  --disp:"Anton","Archivo Black",Impact,sans-serif;--fm:"Special Elite","Space Mono",monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141213;--stone:#141213;--panel:#221F20;--plate:#E9E3D7;--photo-ground:#E9E3D7;--card-ground:#E9E3D7;--ink:#F3EFE6;--line:#F3EFE6;--accent:#E8AEC5}}
:root[data-theme="dark"]{--bg:#141213;--stone:#141213;--panel:#221F20;--plate:#E9E3D7;--photo-ground:#E9E3D7;--card-ground:#E9E3D7;--ink:#F3EFE6;--line:#F3EFE6;--accent:#E8AEC5}
.xhero h1{font-size:clamp(4rem,13.4vw,14rem);line-height:.98;letter-spacing:-.01em}
.xhero h1 em{font:inherit;color:#111;background:var(--tape);padding:0 .12em;display:inline-block;transform:rotate(-1.5deg)}
.xhero__fig{right:4%;width:min(44vw,82svh)}
.xhero__fig img{background:#F3EFE6;border:clamp(6px,.8vw,12px) solid #fff;box-sizing:border-box;transform:rotate(2deg)}
.xhero__c{position:absolute;z-index:1;width:27vw;pointer-events:none}
.xhero__c--a{right:38%;bottom:-3%;transform:rotate(-9deg)}
.xhero__c--b{right:-5%;top:6%;transform:rotate(8deg)}
.xhero__b,.xhero__a{background:#111;color:#fff;padding:6px 10px;transform:rotate(-1deg)}
.xhero>.xhero__go{background:var(--tape);color:#111;border:0;padding:6px 14px;transform:rotate(1.5deg)}
.xcard__name,.xshop__head h1,.xpdp__facts h1{font-weight:400;letter-spacing:0}
.xcard__img{border:8px solid #fff;box-sizing:border-box}
.xcard:nth-child(3n+1) .xcard__img{transform:rotate(-1.2deg)}
.xcard:nth-child(3n+2) .xcard__img{transform:rotate(.9deg)}
.xcard__tag{background:var(--tape);color:#111;transform:rotate(3deg)}
.xdrop{background:#111;color:#F3EFE6;--line:#F3EFE6}
.xdrop h2{font:400 clamp(3rem,10vw,10rem)/1 var(--disp);text-transform:uppercase}
.xdrop__row a{background:#F3EFE6;color:#111}
.xstatement p:not(.xlabel){font-family:var(--fm);font-size:clamp(1.4rem,3.4vw,3rem);line-height:1.2}
.xrun{background:var(--tape);color:#111}
.xpdp__colour{font:400 1.4rem var(--fm);background:var(--tape);color:#111;display:inline-block;padding:2px 10px;transform:rotate(-1.5deg)}
.xfoot__mark{font-size:17vw;letter-spacing:0}
@media (max-width:700px){
 .xhero h1{font-size:22vw}.xhero__fig{right:3%;width:68vw}
 .xhero__c{width:48vw}.xhero__c--a{right:auto;left:-8%;bottom:6%}.xhero__c--b{display:none}
 .xhero>.xhero__go{bottom:14px}
}
.xhero h1{z-index:2}
.xhero__c{height:auto;z-index:1}
.xhero__c--a{right:34%;bottom:-6%;width:20vw}
.xhero__fig{z-index:3}
@media (max-width:700px){.xhero__c--a{display:none}.xhero__fig{width:62vw}}
.xhero__a{display:none}
.xhero__fig{width:min(40vw,76svh)}
@media (min-width:701px){.xhero h1{font-size:min(12.4vw,23svh);max-width:56vw}}

/* Handy */
:root{--muted:#3D2A32;--faint:#4A343D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted:#C9C3B8;--faint:#B8B2A7}}
:root[data-theme="dark"]{--muted:#C9C3B8;--faint:#B8B2A7}
.buy__add{background:#111;color:#fff;border-color:#111}
@media (max-width:700px){
 .xhero{min-height:0;padding-bottom:18px}
 .xhero__fig{position:relative;display:block;right:auto;bottom:auto;width:86%;margin:18px auto 0}
 .xhero>.xhero__go{position:relative;display:block;width:max-content;right:auto;bottom:auto;margin:-26px 0 0 auto;z-index:4;font-size:1.5rem;padding:10px 20px}
 .xdrop__row a{padding-bottom:10px}
 .xfoot nav a{padding-block:7px;line-height:1.5}
 .xcard{min-width:0}
 .xcard__meta{font-size:.76rem}
 .buy__size{min-height:48px}
 .buy__add{min-height:54px}
 .xpdp__facts{padding-inline:16px}
 input,select,textarea{font-size:16px}
}