html{scroll-behavior:smooth}
a{color:var(--accent-mauve)}a:hover{color:var(--accent-hover)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.h1{margin:0;font-family:var(--font-serif-display);font-weight:400;font-size:clamp(36px,4.4vw,var(--text-h1));line-height:var(--lh-h1);letter-spacing:var(--ls-h1);color:var(--ink);text-wrap:balance}
.h2{margin:0;font-family:var(--font-serif-display);font-weight:400;font-size:clamp(28px,3.2vw,var(--text-h2));line-height:var(--lh-h2);color:var(--ink);text-wrap:balance}
.lead{margin:0;font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--ink-soft);max-width:48ch;text-wrap:pretty}
.meta{margin:0;font:500 13px/1.4 var(--font-sans);color:var(--ink-faint)}

/* Kopf A: Text links, großes Motiv rechts */
.head-a{padding:calc(var(--nav-height) + clamp(32px,5vw,72px)) 0 clamp(40px,5vw,72px)}
.head-a .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.head-a__txt{display:grid;gap:18px;align-content:center}
.head-a__art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-height:520px;width:100%;border-radius:var(--radius-lg);background:var(--surface-alt);overflow:hidden}
.head-a__card{grid-area:1/1;width:46%;aspect-ratio:2480/3496;border-radius:var(--radius-xs);background:var(--postcard-blush) center/cover no-repeat;box-shadow:var(--shadow-postcard);transition:transform var(--dur-slow) var(--ease-out)}
.head-a__card:nth-child(1){transform:translateX(-24%) rotate(-7deg)}
.head-a__card:nth-child(2){transform:translateX(22%) rotate(5deg) translateY(3%)}
@media (hover:hover) and (pointer:fine){.head-a__art:hover .head-a__card:nth-child(1){transform:translateX(-30%) rotate(-9deg)}.head-a__art:hover .head-a__card:nth-child(2){transform:translateX(28%) rotate(7deg) translateY(3%)}}

/* Kopf B: zentrierter Text, aufgefächerte Motive */
.head-b{padding:calc(var(--nav-height) + clamp(36px,5vw,72px)) 0 0;background:var(--surface-alt);overflow:hidden}
.head-b__txt{display:grid;gap:16px;justify-items:center;text-align:center}
.head-b__txt .lead{max-width:56ch}
.head-b__fan{position:relative;height:clamp(140px,17vw,230px);margin-top:clamp(28px,4vw,44px);display:flex;justify-content:center}
.head-b__card{position:absolute;bottom:-18%;width:clamp(120px,15vw,200px);aspect-ratio:2480/3496;border-radius:var(--radius-xs);background:var(--postcard-blush) center/cover no-repeat;box-shadow:var(--shadow-postcard);transform-origin:50% 120%;transition:transform var(--dur-slow) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.head-b__card:hover{transform:var(--t) translateY(-14px)!important}}

/* Werkzeugleiste */
.bar{position:sticky;top:var(--nav-height);z-index:20;background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-line)}
.bar__row{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.bar__row+.bar__row{padding-top:0}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:500 13px/1 var(--font-sans);letter-spacing:.02em;padding:9px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-fast,.12s) var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip:hover{border-color:var(--accent-mauve);color:var(--accent-mauve)}
.chip--on,.chip--on:hover{background:var(--accent-mauve);border-color:var(--accent-mauve);color:var(--on-accent)}
.tools{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.papers{position:relative}
.papers__btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center no-repeat;padding:6px 36px 6px 8px;cursor:pointer;color:var(--ink)}
.papers__btn:hover,.papers__btn--open{border-color:var(--accent-mauve)}
.papers__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sw{display:block;flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong)}
.sw--all{background:conic-gradient(#f4f0e6 0 25%,#f4e8a0 0 50%,#e8c4c4 0 75%,#c4d0b8 0)}
.papers__name{font:500 13px/1 var(--font-sans);color:var(--ink);white-space:nowrap}
.papers__menu{position:absolute;z-index:20;top:calc(100% + 6px);right:0;min-width:100%;margin:0;padding:6px;list-style:none;background:var(--surface-page,#fbfbfd);border:1px solid var(--line);border-radius:var(--radius-md,12px);box-shadow:var(--shadow-lg)}
.papers__opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:var(--radius-sm,8px);background:transparent;font:500 13px/1 var(--font-sans);color:var(--ink);text-align:left;white-space:nowrap;cursor:pointer}
.papers__opt:hover{background:var(--surface-alt,rgba(0,0,0,.04))}
.papers__opt--on{color:var(--accent-mauve)}
.papers__opt:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sort{appearance:none;-webkit-appearance:none;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center no-repeat;padding:9px 36px 9px 16px;font:500 13px/1 var(--font-sans);color:var(--ink);cursor:pointer}
.sort:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.count{font:500 13px/1 var(--font-sans);color:var(--ink-soft);white-space:nowrap}
.seg{display:inline-flex;padding:3px;border-radius:var(--radius-pill);background:var(--surface-alt)}
.seg button{border:0;background:none;padding:7px 13px;border-radius:var(--radius-pill);font:500 12px/1 var(--font-sans);color:var(--ink-soft);cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.seg button.on{background:var(--surface-card);color:var(--ink);box-shadow:var(--shadow-sm)}

/* Raster */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.5vw,48px) clamp(20px,2.2vw,28px);padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(56px,7vw,96px)}
.grid>*{display:grid}
.tile{display:grid;height:100%}
.tile>.esv-pc{height:100%;grid-template-rows:auto 1fr auto}
.tile__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px}
.tile__meta>div{min-width:0}
.tile__title{margin:0;font:500 15px/1.35 var(--font-sans);color:var(--ink);min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__sub{margin:4px 0 0;display:flex;align-items:center;gap:6px;font:400 13px/1.4 var(--font-sans);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-strong);flex:0 0 auto}
.tile__stock{margin:4px 0 0;font:400 12px/1.4 var(--font-sans);color:var(--ink-faint);white-space:nowrap}.tile__stock--low{color:var(--accent-mauve)}.tile__stock--out{color:var(--ink);font-weight:500}
.tile__price{font:500 14px/1.45 var(--font-sans);color:var(--ink);white-space:nowrap}
.empty{grid-column:1/-1;display:grid;gap:14px;justify-items:start;padding:24px 0}
.empty p{margin:0;font:400 15px/1.6 var(--font-sans);color:var(--ink-soft)}

/* Sets */
.sets{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.sets__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.sets__head>div{display:grid;gap:10px}
.sets__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3.5vw,48px) clamp(20px,2.2vw,28px)}
.settile{display:grid;align-content:start;gap:16px}
.settile__stack{position:relative;width:100%;aspect-ratio:4/3.4;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--surface-alt)}
.settile__card{position:absolute;width:42%;aspect-ratio:2480/3496;border-radius:var(--radius-xs);background:var(--postcard-blush) center/cover no-repeat;box-shadow:var(--shadow-postcard);transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.settile:hover .settile__card:nth-child(1){transform:rotate(-12deg) translate(-38%,2%)!important}.settile:hover .settile__card:nth-child(3){transform:rotate(12deg) translate(38%,4%)!important}
.settile__stack .settile__card:hover{z-index:4!important;transform:perspective(1000px) rotate(0deg) translate(0,0) scale(1.16)!important;box-shadow:var(--shadow-lg)}}
.settile__desc{margin:4px 0 0;font:400 13px/1.5 var(--font-sans);color:var(--ink-soft);min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.settile .tile__title{min-height:0;-webkit-line-clamp:1}

/* Liebe auf den zweiten Blick */
.second{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.second .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.second__art{position:relative;width:100%;aspect-ratio:4/3.4;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--surface-alt);overflow:hidden}
.second__card{position:absolute;width:30%;aspect-ratio:2480/3496;border-radius:var(--radius-xs);background:var(--postcard-blush) center/cover no-repeat;box-shadow:var(--shadow-postcard)}
.second__txt{display:grid;gap:16px;align-content:center;min-width:0}
.second__notes{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.second__notes li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;font:400 14px/1.55 var(--font-sans);color:var(--ink-soft);text-wrap:pretty}
.second__notes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-mauve);margin-top:8px}
.second__buy{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}

/* Banner */
.band{background:var(--surface-alt);padding:clamp(48px,6vw,80px) 0}
.band__row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.band__row>div{display:grid;gap:10px}

/* Auswahl-Dialog */
.pick{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(29,29,31,.42);animation:fade var(--dur-base) var(--ease-out)}
.pick__box{width:min(880px,100%);max-height:min(86vh,900px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:rise var(--dur-slow) var(--ease-spring,var(--ease-out))}
.pick__head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:24px 28px 18px;border-bottom:1px solid var(--line)}
.pick__head>div{display:grid;gap:6px}
.pick__x{border:0;background:none;width:36px;height:36px;border-radius:50%;font:300 24px/1 var(--font-sans);color:var(--ink-soft);cursor:pointer}
.pick__x:hover{background:var(--surface-alt);color:var(--ink)}
.pick__grid{overflow:auto;padding:22px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px 14px;align-content:start}
.pk{display:grid;gap:8px;border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit}
.pk:disabled{cursor:not-allowed;opacity:.4}
.pk__img{position:relative;aspect-ratio:2480/3496;border-radius:var(--radius-xs);background:var(--postcard-blush) center/cover no-repeat;box-shadow:var(--shadow-sm);outline:2px solid transparent;outline-offset:3px;transition:outline-color var(--dur-base) var(--ease-out),transform var(--dur-fast,.12s) var(--ease-out)}
.pk:active .pk__img{transform:scale(.97)}
.pk--on .pk__img{outline-color:var(--accent-mauve)}
.pk__n{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent-mauve);color:var(--on-accent);font:600 11px/1 var(--font-sans)}
.pk__t{font:500 12px/1.35 var(--font-sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;border-top:1px solid var(--line)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);background:var(--ink);color:var(--text-inverse);font:500 14px/1 var(--font-sans);padding:14px 18px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);animation:toast var(--dur-slow) var(--ease-out);z-index:80}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.head-a .wrap{grid-template-columns:1fr}.head-a__art{max-height:380px;aspect-ratio:4/3}.head-a__card{width:34%}.bar__row--a{flex-wrap:wrap}.bar__row--a .chips{flex-basis:100%}.bar__row--a .tools{width:100%;justify-content:space-between}.sets__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.second .wrap{grid-template-columns:1fr}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bar__row--b2{flex-wrap:wrap}.bar__row--b2 .tools{width:100%;justify-content:space-between}}
@media (max-width:560px){.bar__row--a .tools{width:100%;gap:10px}.bar__row--a .tools>*{flex:1 1 0;min-width:0}.bar__row--a .papers__btn,.bar__row--a .sort{width:100%}.sets__grid{grid-template-columns:1fr}.pick__head,.pick__grid,.pick__foot{padding-left:18px;padding-right:18px}}