/*
Theme Name: proLIBRIS
Theme URI: https://www.prolibris.at
Description: Leichtgewichtiges WooCommerce-Theme für proLIBRIS.at. Ersetzt Storefront + Elementor. Suche, Filter und Warenkorb-Schublade laufen ohne zusätzliche Plugins.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: prolibris
WC requires at least: 9.0
*/
/* proLIBRIS.at - modernised preview. Brand navy + light blue kept from the live site. */
@font-face{font-family:"Geist";src:url(assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Geist";src:url(assets/fonts/geist-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#14314c; --navy-deep:#05223d; --accent:#84a9e0;
  --bg:#f4f7fb; --surface:#fbfcfe; --surface-2:#e9eff7; --surface-3:#dde6f1;
  --text:#14212e; --muted:#4f5f70; --line:#d5dde8; --line-strong:#9fb0c3;
  --btn-bg:#14314c; --btn-fg:#fbfcfe; --btn-hover:#05223d;
  --link:#14314c; --focus:#2f6bc4; --mark:#d7e5f8;
  --ink:#14314c;   /* brand blue as icon, border, tick or focus colour on the page background (light blue in dark mode); --navy stays for navy areas */
  --shadow:0 1px 2px rgb(20 49 76/.08),0 10px 28px -12px rgb(20 49 76/.28);
  --shadow-lg:0 2px 6px rgb(20 49 76/.08),0 24px 60px -18px rgb(20 49 76/.38);
  --r:8px; --max:1320px; --hd:68px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;   /* scrollbars and form controls light as well (the meta tag allows dark) */
}
/* dark mode only on phones and small tablets (≤ 768 px); desktops always show the light design */
@media (prefers-color-scheme:dark) and (max-width:768px){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0b141e; --surface:#111d2a; --surface-2:#182838; --surface-3:#203347;
    --text:#e6edf5; --muted:#a3b2c3; --line:#243649; --line-strong:#40566d;
    --btn-bg:#84a9e0; --btn-fg:#05223d; --btn-hover:#a4c0ec;
    --link:#9dbbe8; --focus:#9dbbe8; --mark:#2a4a70; --ink:#9dbbe8;
    --shadow:0 1px 2px rgb(0 0 0/.4),0 12px 30px -12px rgb(0 0 0/.7);
    --shadow-lg:0 2px 6px rgb(0 0 0/.4),0 24px 60px -18px rgb(0 0 0/.8);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px)}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--surface);padding:10px 14px;border-radius:var(--r)}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
kbd{font:inherit;font-size:.75rem;border:1px solid currentColor;border-radius:4px;padding:0 6px;opacity:.7}

/* ---------- header: same navy bar + same nav labels as the live site ---------- */
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--navy-deep)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:var(--hd)}
.logo{flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:2px}
.nav a{color:#dbe6f5;text-decoration:none;padding:8px 13px;border-radius:var(--r);font-weight:500;font-size:.95rem;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{background:rgb(255 255 255/.1);color:#fff}
.nav a[aria-current="page"]{color:#fff;background:rgb(255 255 255/.14)}
.hd-search{flex:1;display:flex;justify-content:flex-end;min-width:0}
.hd-tools{display:flex;align-items:center;gap:2px;flex:none}
.hd-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:#fff;font-size:.92rem;padding:8px 11px;border-radius:var(--r);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s}
.hd-btn:hover{background:rgb(255 255 255/.12)}
.hd-btn i{font-size:1.25rem}
.cart-count{background:var(--accent);color:var(--navy-deep);font-weight:700;border-radius:99px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.78rem;padding:0 6px}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.menu-toggle,.search-toggle{display:none}

/* ---------- search box + suggestions (header, hero, shop) ---------- */
.sbox{position:relative;width:100%;max-width:420px;display:flex;align-items:center}
.sbox>i{position:absolute;left:13px;font-size:1.15rem;pointer-events:none;color:inherit;opacity:.85}
.sbox input{width:100%;font:inherit;font-size:.95rem;padding:10px 40px 10px 40px;border-radius:var(--r);border:1.5px solid rgb(255 255 255/.28);background:rgb(255 255 255/.09);color:#fff;transition:background .2s,border-color .2s}
.sbox input::placeholder{color:#c5d5ea}
.sbox input:focus{outline:none;background:var(--surface);color:var(--text);border-color:var(--accent)}
.sbox:focus-within>i{color:var(--muted)}
.sbox kbd{position:absolute;right:12px;color:#c5d5ea;pointer-events:none}
.sbox:focus-within kbd{display:none}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.suggest{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,480px);max-height:min(72vh,620px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:50;padding:6px}
.hd-search .suggest{left:auto;right:0}
.sg-sec{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--muted);padding:10px 10px 4px}
.sg-sec button{background:none;border:0;color:var(--link);cursor:pointer;font-size:.78rem;text-decoration:underline}
.sg-item{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:6px;text-decoration:none;cursor:pointer}
.sg-item img{width:34px;border-radius:2px;box-shadow:0 2px 6px -2px rgb(20 49 76/.4)}
.sg-item .ic{width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);font-size:1.1rem;color:var(--muted)}
.sg-item b{display:block;font-weight:600;font-size:.93rem;line-height:1.3}
.sg-item small{display:block;color:var(--muted);font-size:.8rem}
.sg-item .price{font-size:.9rem}
.sg-item[aria-selected="true"],.sg-item:hover{background:var(--surface-2)}
.sg-all{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 4px 2px;padding:11px;border-radius:6px;background:var(--surface-2);text-decoration:none;font-weight:600;font-size:.9rem;color:var(--link)}
.sg-all[aria-selected="true"],.sg-all:hover{background:var(--surface-3)}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 10px}
.sg-chips a{font-size:.85rem;padding:6px 11px;border-radius:var(--r);border:1px solid var(--line);text-decoration:none}
.sg-chips a:hover,.sg-chips a[aria-selected="true"]{border-color:var(--ink);background:var(--surface-2)}
.sg-none{padding:18px 12px;color:var(--muted);font-size:.92rem}
.sg-none a{color:var(--link);font-weight:600}

/* light-surface variant (hero + shop) */
.sbox.lg{max-width:none}
.sbox.lg>i{left:16px;font-size:1.3rem;color:var(--muted)}
.sbox.lg input{background:var(--surface);color:var(--text);border-color:var(--line-strong);font-size:1.05rem;padding:15px 16px 15px 48px;box-shadow:var(--shadow)}
.sbox.lg input::placeholder{color:var(--muted)}
.sbox.lg input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgb(132 169 224/.35)}
.sbox.lg .btn{position:absolute;right:6px;top:6px;bottom:6px;padding:0 18px}
.sbox.lg.has-btn input{padding-right:120px}

/* ---------- buttons: one radius system (8px) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:600;font-size:.95rem;padding:12px 20px;border-radius:var(--r);border:1.5px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s var(--ease),border-color .2s,color .2s}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--muted)}
.btn.sm{padding:8px 13px;font-size:.88rem}
.btn.icon{padding:0;width:42px;height:42px;flex:none}
.btn.icon i{font-size:1.2rem}
.btn.done{background:var(--accent);border-color:var(--accent);color:var(--navy-deep)}
.btn.block{width:100%}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--link);text-decoration:none;border-bottom:1.5px solid var(--accent)}
.textlink:hover{border-color:var(--link)}

/* ---------- home ---------- */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;min-height:min(540px,calc(100dvh - 140px))}
.hero h1{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 16px;font-weight:700}
.hero p{font-size:1.15rem;color:var(--muted);max-width:46ch;margin:0 0 26px}
.hero .sbox{max-width:560px}
.hero-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:.9rem;color:var(--muted);align-items:center}
.hero-links a{color:var(--link);font-weight:600;text-decoration:none;padding:4px 10px;border-radius:var(--r);background:var(--surface-2)}
.hero-links a:hover{background:var(--surface-3)}
.stack{position:relative;aspect-ratio:1.25/1;width:100%;max-width:600px;justify-self:center}
.stack img{position:absolute;width:44%;border-radius:4px;box-shadow:var(--shadow-lg);transition:transform .5s var(--ease)}
.stack img:nth-child(1){left:2%;top:14%;transform:rotate(-6deg)}
.stack img:nth-child(2){left:28%;top:0;z-index:2;transform:rotate(1deg)}
.stack img:nth-child(3){left:54%;top:18%;transform:rotate(7deg)}
.stack:hover img:nth-child(1){transform:rotate(-9deg) translateX(-10px)}
.stack:hover img:nth-child(2){transform:rotate(1deg) translateY(-8px)}
.stack:hover img:nth-child(3){transform:rotate(10deg) translateX(10px)}

section{padding:64px 0}
h2{font-size:clamp(1.55rem,2.5vw,2.1rem);letter-spacing:-.025em;line-height:1.1;margin:0 0 10px;font-weight:700}
.lead{color:var(--muted);max-width:60ch;margin:0 0 28px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{margin:0}




.band{background:var(--navy);color:#fff;border-radius:var(--r);padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.band h2{color:#fff;margin:0 0 6px}
.band p{margin:0;color:#c5d5ea;max-width:52ch}
.band .btn{background:var(--accent);border-color:var(--accent);color:var(--navy-deep)}
.band .btn:hover{background:#a4c0ec;border-color:#a4c0ec}

/* ---------- product card (grid + list) ---------- */
.rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}   /* 6 new titles: smaller covers stay sharp (the Wawi covers are only 350 px wide) */
@media (max-width:1080px){.rail{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* below ~155 px per card the cart button no longer fits next to the price */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
/* 3:4 like a book; min-height:0, otherwise the flex item grows with the cover image and the badges (.flags, same ratio) no longer sit at its bottom edge */
.card .cover{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;min-height:0;background:var(--surface-2);border-radius:6px;padding:16px;margin-bottom:12px}
.card .cover img{height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:0 8px 18px -8px rgb(20 49 76/.55);border-radius:2px;transition:transform .4s var(--ease)}
.card:hover .cover img{transform:scale(1.035)}

.card h3{font-size:.98rem;line-height:1.3;margin:0 0 3px;letter-spacing:-.01em;font-weight:650}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.card .sub{font-size:.86rem;color:var(--muted);margin:0 0 6px}
.card .facts{font-size:.8rem;color:var(--muted);margin:0 0 10px;font-variant-numeric:tabular-nums}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .foot .btn{position:relative;z-index:1}
.price{font-weight:700;font-size:1.08rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.price small{display:block;font-weight:400;font-size:.72rem;color:var(--muted)}
.card .lbl{display:none}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.shop>*,.grid>*,.rail>*,.pd>*,.hero .wrap>*{min-width:0}
.nav .nav-konto{display:none}
.grid.list{grid-template-columns:1fr;gap:10px}
.grid.list .card{display:grid;grid-template-columns:76px 1fr auto;gap:6px 20px;align-items:center;padding:12px 16px}
.grid.list .card:hover{transform:none}
.grid.list .cover{grid-row:span 2;aspect-ratio:auto;padding:0;background:none;margin:0}
.grid.list .cover img{height:auto;width:76px}
.grid.list .body{min-width:0}
.grid.list .facts{margin:0}
.grid.list .foot{grid-row:span 2;flex-direction:column;align-items:flex-end;margin:0}
.grid.list .foot .price{text-align:right}
.grid.list .foot .btn{width:auto;height:auto;padding:8px 14px}
.grid.list .lbl{display:inline}

/* ---------- shop ---------- */
.shop-hero{padding:28px 0 0}
.crumbs{font-size:.86rem;color:var(--muted);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.shop-hero h1{font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-.03em;margin:0 0 4px;line-height:1.1}
.shop-hero .intro{color:var(--muted);margin:0 0 18px;max-width:62ch}
.shop-search{margin:16px 0 18px}
.tabs{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;margin-bottom:6px;scrollbar-width:thin}
.tab{scroll-snap-align:start;flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:.92rem;transition:background .2s,border-color .2s}
.tab span{color:var(--muted);font-weight:500;font-size:.85rem}
.tab:hover{border-color:var(--line-strong)}
.tab[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.tab[aria-pressed="true"] span{color:inherit;opacity:.8}

.shop{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;padding:18px 0 64px}
.filters{position:sticky;top:calc(var(--hd) + 16px);max-height:calc(100dvh - var(--hd) - 32px);overflow:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.filters .f-head{display:none}
.fgroup{border-bottom:1px solid var(--line);padding:4px 0 14px;margin-bottom:12px}
.fgroup:last-of-type{border-bottom:0}
.fgroup h2{font-size:.9rem;letter-spacing:0;margin:0 0 6px;padding-top:6px}
.fopt{display:flex;align-items:center;gap:10px;padding:5px 6px;margin:0 -6px;border-radius:6px;cursor:pointer;font-size:.93rem}
.fopt:hover{background:var(--surface-2)}
.fopt span{margin-left:auto;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.fopt input{width:17px;height:17px;accent-color:var(--ink);margin:0;flex:none}
.fopt.zero{opacity:.45}
.f-foot{display:none}

.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.count{color:var(--muted);font-size:.93rem;margin:0}
.count b{color:var(--text)}
.tools-r{display:flex;gap:8px;align-items:center}
select{font:inherit;font-size:.92rem;color:var(--text);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r);padding:9px 12px;cursor:pointer}


.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--text)}
.filters-toggle{display:none}
.active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.active:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);cursor:pointer;font-size:.86rem;font-weight:500}
.achip i{font-size:.9rem;color:var(--muted)}
.achip:hover{border-color:var(--line-strong)}
.achip.clear{background:none;border-color:transparent;color:var(--link);text-decoration:underline;padding:6px 8px}
.hint{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-bottom:14px;font-size:.92rem}
.hint i{color:var(--muted);font-size:1.1rem}
.hint button,.hint a{background:none;border:0;padding:0;color:var(--link);font-weight:600;cursor:pointer;text-decoration:underline}
.empty{grid-column:1/-1;text-align:center;padding:56px 20px;border:1.5px dashed var(--line-strong);border-radius:var(--r);color:var(--muted)}
.empty i{font-size:2.2rem}
.empty h3{color:var(--text);margin:8px 0 6px}
.empty .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:32px;flex-wrap:wrap}
.pager button{min-width:42px;height:42px;padding:0 10px;display:grid;place-items:center;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums}
.pager button:hover:not([disabled]){border-color:var(--line-strong)}
.pager button[aria-current="page"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.pager button[disabled]{opacity:.4;cursor:default}
.pager .gap{color:var(--muted);padding:0 4px}

/* ---------- product page ---------- */
/* product page: stage | head + body | sticky buy box */
.pd-crumbs{padding-top:24px}
.pd-back{display:none}
.pd{display:grid;grid-template-columns:230px minmax(0,1fr) 320px;grid-template-rows:auto auto 1fr;grid-template-areas:"stage head buy" "stage facts buy" "stage body buy";column-gap:48px;align-items:start;padding:16px 0 40px}
.pd-stage{grid-area:stage;position:sticky;top:calc(var(--hd) + 28px);display:flex;flex-direction:column;align-items:center;gap:26px;padding-top:6px}
.pd-head{grid-area:head;min-width:0}
.pd>.facts-row{grid-area:facts}
.pd-buy{grid-area:buy;position:sticky;top:calc(var(--hd) + 28px)}
.pd-body{grid-area:body;min-width:0;max-width:720px}
/* soft band behind the top of the product page */
body[data-page="produkt"] main{background:linear-gradient(180deg,var(--surface-2) 0,var(--bg) 420px)}
.pd-series{display:grid;gap:8px;width:100%}
.pd-series a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .2s}
.pd-series a:hover{border-color:var(--ink)}
.pd-series span{grid-column:1;font-size:.78rem;color:var(--muted)}
.pd-series b{grid-column:1;font-size:.92rem;font-weight:600}
.pd-series i{grid-column:2;grid-row:1/span 2;color:var(--muted)}
.help{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:grid;gap:6px;font-size:.9rem}
.help b{font-size:.95rem}
.help p{margin:0 0 4px;color:var(--muted)}
.help a{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:600;text-decoration:none}
.help a:hover{text-decoration:underline}
/* book: cover with a subtle spine and page edge so it reads as an object, not a flat picture */
/* paperback: flat, square edges, soft contact + cast shadow */
.book{position:relative;display:inline-block;width:100%;max-width:230px;border-radius:1px;box-shadow:0 1px 2px rgb(20 49 76/.18),0 6px 12px -4px rgb(20 49 76/.2),0 26px 44px -20px rgb(20 49 76/.5)}
.book img{width:100%;border-radius:1px}
.pd-sec{margin-top:36px;padding:0}
.pd-buy .buy-row{flex-wrap:wrap}
.pd-buy .buy-row .btn{flex:1 1 150px;padding:12px 14px}
.pd-buy .stepper button{width:36px}
.pd-buy .stepper input{width:40px}
.pd-sec:first-child{margin-top:32px}
.pd-sec h2{font-size:1.15rem;margin:0 0 10px}
.desc p{margin:0 0 12px;max-width:68ch}
.desc.clamp:not(.open){max-height:11.5em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.more{background:none;border:0;padding:4px 0;color:var(--link);font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.facts-row{display:flex;flex-wrap:wrap;margin:22px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts-row div{flex:1 1 auto;padding:12px 16px;border-left:1px solid var(--line)}

.facts-row div:first-child{border-left:0}
.facts-row dt{font-size:.78rem;color:var(--muted)}
.facts-row dd{white-space:nowrap;margin:2px 0 0;font-weight:650;font-size:.98rem;font-variant-numeric:tabular-nums}
.assure{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.88rem;color:var(--muted)}

.assure i{font-size:1.1rem;color:var(--text);flex:none}
.pd-rail{padding:8px 0 36px}
.biblio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
@media (max-width:1180px){.biblio{grid-template-columns:repeat(2,minmax(0,1fr))}}
.biblio .wide{grid-column:1/-1}


.minis{display:grid;grid-auto-flow:column;grid-auto-columns:128px;gap:16px;overflow-x:auto;padding:2px 2px 10px;justify-content:start}
.mini{text-decoration:none;display:flex;flex-direction:column;gap:6px}
.mini-cover{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--surface-2);border-radius:6px;padding:10px;transition:background .2s}
.mini-cover img{height:100%;width:auto;object-fit:contain;box-shadow:0 6px 14px -6px rgb(20 49 76/.5);border-radius:2px}
.mini:hover .mini-cover{background:var(--surface-3)}
.mini b{font-size:.84rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini:hover b{text-decoration:underline}
.mini .price{font-size:.84rem;font-weight:600}
.drawer-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.pd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pd-tags a{font-size:.82rem;font-weight:600;text-decoration:none;padding:5px 10px;border-radius:var(--r);background:var(--surface-2);color:var(--link)}
.pd-tags a:hover{background:var(--surface-3)}
.pd h1{font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
.pd h1.long{font-size:clamp(1.55rem,2vw,1.9rem);line-height:1.18;letter-spacing:-.02em}
.pd .subt{font-size:1.15rem;color:var(--muted);margin:0 0 4px}
.pd .authors{margin:10px 0 0;font-size:.98rem}
.pd .authors span{color:var(--muted)}
.buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.buy .pr{font-size:2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.buy .tax{font-size:.86rem;color:var(--muted);margin:6px 0 14px}
.buy .tax a{color:var(--muted)}
.avail{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;margin-bottom:16px;color:var(--muted)}
.avail i{font-size:1.15rem;color:var(--text);margin-top:1px}
.buy-row{display:flex;gap:10px}
.buy-row .btn{flex:1}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:var(--r);overflow:hidden;flex:none}
.stepper button{width:40px;height:46px;border:0;background:var(--surface);cursor:pointer;font-size:1.05rem;display:grid;place-items:center}
.stepper button:hover{background:var(--surface-2)}
.stepper input{width:44px;height:46px;border:0;text-align:center;font:inherit;font-weight:600;background:var(--surface);color:var(--text);-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{display:none}
.buy-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:.86rem;color:var(--muted)}
.buy-meta button{background:none;border:0;padding:0;cursor:pointer;color:var(--link);display:inline-flex;align-items:center;gap:5px;font-size:.86rem}
#similar h2,#viewed h2{font-size:1.3rem}

.hscroll .card{scroll-snap-align:start}
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px -16px rgb(20 49 76/.4);padding:10px 16px;display:none;align-items:center;gap:12px;
  /* hidden = fully out, invisible and without its upward shadow (the shadow alone used to stay visible at the bottom edge, esp. on iOS) */
  transform:translateY(calc(100% + 40px));visibility:hidden;box-shadow:none;transition:transform .35s var(--ease),visibility 0s linear .35s,box-shadow .2s}
.stickybuy.show{transform:none;visibility:visible;box-shadow:0 -10px 30px -16px rgb(20 49 76/.4);transition:transform .35s var(--ease),visibility 0s,box-shadow .2s}
.stickybuy b{display:block;font-size:.9rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stickybuy .t{min-width:0;flex:1}
.notfound{text-align:center;padding:80px 20px}
.notfound .sbox{margin:24px auto 0;max-width:520px}

/* ---------- content pages (Unternehmen, Kontakt) ---------- */
.page-hero{padding:40px 0 8px}
.page-hero h1{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.035em;line-height:1.05;margin:0 0 14px}
.page-hero .lead{font-size:1.1rem;margin:0}
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center;padding:40px 0 56px}
.about p{font-size:1.05rem;max-width:62ch;margin:0 0 16px}
.covers-fan{position:relative;aspect-ratio:1.3/1;max-width:520px;justify-self:center;width:100%}
.covers-fan img{position:absolute;width:34%;border-radius:3px;box-shadow:var(--shadow-lg)}
.covers-fan img:nth-child(1){left:0;top:16%;transform:rotate(-8deg)}
.covers-fan img:nth-child(2){left:22%;top:4%;transform:rotate(-2deg)}
.covers-fan img:nth-child(3){left:44%;top:0;z-index:2;transform:rotate(3deg)}
.covers-fan img:nth-child(4){left:66%;top:12%;transform:rotate(8deg)}
.stats{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:28px}
.stats div b{display:block;font-size:2rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stats div span{color:var(--muted);font-size:.9rem}
.facts3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fact.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.fact.dark p,.fact.dark a{color:#dbe6f5}

.fact.dark i{color:var(--accent)}
.fact h3{font-size:1rem;margin:10px 0 6px}
.fact p{margin:0;color:var(--muted);font-size:.95rem}
.fact a{color:var(--link);font-weight:600}
/* Unternehmen: office building as a panorama, navy fading in from the left, fact cards overlapping its lower edge */
.office{padding-top:0}
.office-pic{position:relative;margin:0;height:clamp(230px,22vw,300px);border-radius:calc(var(--r) * 1.5);overflow:hidden;background:var(--navy-deep);box-shadow:var(--shadow-lg)}
.office-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;transition:transform 1.8s var(--ease)}
.office-pic.rv-wait:not(.in) img{transform:scale(1.08)}
.office-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(5 34 61/.93) 0%,rgb(5 34 61/.72) 30%,rgb(5 34 61/0) 62%),linear-gradient(0deg,rgb(5 34 61/.5),rgb(5 34 61/0) 38%)}
.office-cap{position:absolute;z-index:1;left:clamp(22px,3.5vw,44px);top:40%;transform:translateY(-50%);max-width:420px;color:#fff}
.office-eyebrow{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.office-cap h2{color:#fff;font-size:clamp(1.2rem,1rem + .8vw,1.55rem);margin:0 0 6px}
.office-cap p{color:#d3deea;margin:0;font-size:.95rem}
.office-facts{position:relative;z-index:2;margin:-48px clamp(16px,3vw,40px) 0}
.office-facts .fact{box-shadow:var(--shadow)}
@media (max-width:768px){
  .office-pic{height:300px}
  .office-pic img{object-position:64% 50%}
  .office-pic::after{background:linear-gradient(0deg,rgb(5 34 61/.95) 0%,rgb(5 34 61/.78) 40%,rgb(5 34 61/0) 72%)}
  .office-cap{top:auto;bottom:56px;right:22px;transform:none;max-width:none}
  .office-facts{margin:-36px 12px 0}
}
@media (min-width:769px) and (max-width:1024px){.facts3.office-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.office-facts .fact{padding:18px}}
@media (prefers-reduced-motion:reduce){.office-pic img{transition:none}.office-pic.rv-wait:not(.in) img{transform:none}}


.person:hover{border-color:var(--ink);transform:translateY(-2px)}
.person b{font-weight:600;font-size:.95rem}
.person small{color:var(--muted);white-space:nowrap}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:start;padding:32px 0 64px}
.c-list{display:grid;gap:12px}
.c-item{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.c-item .ic{width:40px;height:40px;border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center;font-size:1.2rem}
.c-item h3{margin:0 0 4px;font-size:.95rem}
.c-item p{margin:0;color:var(--muted);font-size:.95rem}
.c-item a{color:var(--link);font-weight:600;text-decoration:none}
.c-item a:hover{text-decoration:underline}

/* ---------- forms ---------- */
:root{--input-border:#7d8ea1}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]){--input-border:#6a8199}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.panel h2{font-size:1.25rem;margin:0 0 6px}
.panel>.muted{margin:0 0 20px}
.muted{color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 14px}
.field{display:flex;flex-direction:column;gap:6px;grid-column:span 6}
.field.h{grid-column:span 3}
.field.t{grid-column:span 2}
.field label{font-weight:600;font-size:.9rem}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--text);background:var(--surface);border:1.5px solid var(--input-border);border-radius:var(--r);padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgb(132 169 224/.35)}
.field .help{font-size:.84rem;color:var(--muted);margin:0}
.field .err{font-size:.86rem;color:#a3262a;margin:0;display:none;align-items:center;gap:5px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#a3262a}
.field.invalid .err{display:flex}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]) .field .err{color:#f19a9a}:root:not([data-theme="light"]) .field.invalid input,:root:not([data-theme="light"]) .field.invalid select,:root:not([data-theme="light"]) .field.invalid textarea{border-color:#f19a9a}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.check.invalid{color:#a3262a}
.check.invalid input{outline:2px solid #a3262a;outline-offset:1px}
.err-line{font-size:.86rem;color:#a3262a;margin:6px 0 0 28px}
.check a{color:var(--link)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--surface-2);font-size:.92rem;margin:0 0 18px}
.notice i{font-size:1.2rem;margin-top:1px}
.success{text-align:center;padding:40px 20px}
.success .big{width:64px;height:64px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;margin:0 auto 14px;font-size:2rem}
.success h2{margin:0 0 8px}

/* ---------- cart page ---------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start;padding:20px 0 56px}
.cart-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.cart-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:0}
.cart-row img{width:72px;border-radius:2px;box-shadow:0 6px 14px -6px rgb(20 49 76/.5)}
.cart-row a.t{font-weight:600;text-decoration:none;line-height:1.3;display:block}
.cart-row a.t:hover{text-decoration:underline}
.cart-row small{color:var(--muted);display:block;margin-top:2px}
.cart-row .rm{background:none;border:0;padding:0;margin-top:8px;color:var(--muted);cursor:pointer;font-size:.86rem;display:inline-flex;gap:5px;align-items:center}
.cart-row .rm:hover{color:var(--text);text-decoration:underline}
.cart-row .stepper button,.cart-row .stepper input{height:38px}
.cart-row .stepper button{width:34px}
.cart-row .stepper input{width:38px}
.cart-row .price{min-width:80px;text-align:right}
.summary{position:sticky;top:calc(var(--hd) + 20px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.summary h2{font-size:1.15rem;margin:0 0 14px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-variant-numeric:tabular-nums}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:700;font-size:1.2rem}
.sum-row small{color:var(--muted)}
.summary .field{margin:10px 0 14px}
.summary .btn{width:100%;margin-top:14px}
.summary .fine{font-size:.82rem;color:var(--muted);margin:12px 0 0}

.sum-items{list-style:none;margin:0 0 12px;display:grid;max-height:320px;overflow:auto;gap:14px;padding:2px 2px 4px}
.sum-items li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;font-size:.9rem}
.sum-items img{width:44px;border-radius:1px;box-shadow:0 1px 2px rgb(20 49 76/.2),0 6px 12px -4px rgb(20 49 76/.35)}
.sum-items a{text-decoration:none}
.sum-items a:hover b{text-decoration:underline}
.sum-items b{display:block;font-weight:600;line-height:1.3;-webkit-hyphens:auto;hyphens:auto}
.sum-items li>span:last-child{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.summary .sum-row:first-of-type{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.line img,.sg-item img,.cart-row img{box-shadow:0 1px 2px rgb(20 49 76/.2),0 6px 12px -4px rgb(20 49 76/.35)}
.sum-items .q{color:var(--muted);font-size:.82rem}
.empty-cart{text-align:center;padding:64px 20px}
.empty-cart i{font-size:2.6rem;color:var(--muted)}

/* ---------- checkout ---------- */
.steps{display:flex;gap:6px;list-style:none;margin:0 0 22px;padding:0;counter-reset:s;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--muted);font-weight:500}
.steps li+li::before{content:"";width:28px;height:1.5px;background:var(--line-strong);margin-right:6px}
.steps .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-strong);font-size:.85rem;font-weight:700}
.steps li[aria-current="step"]{color:var(--text)}
.steps li[aria-current="step"] .n{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.steps li.done{color:var(--text)}
.steps li.done .n{background:var(--surface-3);border-color:var(--surface-3)}
.step[hidden]{display:none}
.opt-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer}
.opt-card:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 3px rgb(132 169 224/.3)}
.opt-card input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--ink);flex:none}
.opt-card b{display:block}
.opt-card span{color:var(--muted);font-size:.9rem}
.opt-card .r{margin-left:auto;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.review .box{border:1px solid var(--line);border-radius:var(--r);padding:16px}
.review h3{font-size:.85rem;color:var(--muted);margin:0 0 6px;font-weight:600;display:flex;justify-content:space-between}
.review h3 button{background:none;border:0;padding:0;color:var(--link);cursor:pointer;font-size:.85rem;text-decoration:underline}
.review p{margin:0;font-size:.95rem}
.sec-title{font-size:1.05rem;margin:26px 0 12px}

/* ---------- account ---------- */
.acc-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--hd) + 20px)}
.acc-nav button{display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;padding:10px 12px;border-radius:var(--r);cursor:pointer;font-weight:500}
.acc-nav button:hover{background:var(--surface-2)}
.acc-nav button[aria-current="true"]{background:var(--surface-3);font-weight:600}
.acc-nav i{font-size:1.15rem}
.auth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:20px 0 64px;max-width:980px}
.orders{display:grid;gap:12px}
.order{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.order summary{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:16px 18px;cursor:pointer;list-style:none}
.order summary::-webkit-details-marker{display:none}
.order summary b{display:block}
.order summary small{color:var(--muted)}
.order .status{font-size:.82rem;font-weight:600;padding:4px 10px;border-radius:var(--r);background:var(--surface-2)}
.order .body{padding:0 18px 18px;border-top:1px solid var(--line)}
.order .body ul{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.order .body li{display:flex;justify-content:space-between;gap:12px;font-size:.93rem}
.dash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}
.dash button{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;transition:border-color .2s}
.dash button:hover{border-color:var(--ink)}
.dash b{display:block;font-size:1.6rem;letter-spacing:-.02em}
.dash span{color:var(--muted);font-size:.9rem}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:#c5d5ea;margin-top:24px;padding:44px 0 28px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.site-footer img{height:28px;width:auto;margin-bottom:12px}
.fl{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.fl a{text-decoration:none;color:#c5d5ea}
.fl a:hover{color:#fff;text-decoration:underline}
.copy{width:100%;border-top:1px solid rgb(255 255 255/.12);padding-top:18px;font-size:.88rem;margin:0}
/* newsletter plugin: hidden honeypot of the sign-up form ([prolibris_newsletter]), message pages */
.nl-form .nl-hp{position:absolute;left:-9999px}
.nl-page{padding-bottom:48px}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgb(5 34 61/.55);opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,100%);background:var(--surface);color:var(--text);z-index:70;transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer h2{margin:0;font-size:1.2rem}
.x{background:none;border:0;cursor:pointer;padding:8px;border-radius:var(--r);font-size:1.2rem;display:grid;place-items:center}
.x:hover{background:var(--surface-2)}
html.no-scroll{overflow:hidden}   /* cart drawer open (app.js) */
/* two addresses side by side with a fine line between them (pl_addresses()); stacked when the box is narrow */
.addrs{container-type:inline-size}   /* the box measures itself; .addrs-in reacts (a container cannot restyle itself) */
.addrs-in>p{margin:0}
@container (min-width:300px){
  .addrs-in{display:flex;align-items:stretch}
  .addrs-in>p{flex:0 1 auto}
  .addrs-in>p+.sr+p{border-left:1px solid var(--line);padding-left:20px;margin-left:20px}
}
@container (max-width:299.98px){
  .addrs-in>p+.sr+p{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
}
.brand-pro{font-style:italic}
/* notes under the hero search (Seiteninhalte → Startseite → Hinweise), the boxes of the product pages */
.home-notes{display:grid;gap:10px;max-width:560px;margin-top:20px}
.hero .home-notes .availnote{margin:0;color:var(--nt);font-size:.9rem;max-width:none}   /* not the hero's paragraph colour/size (white on phones) */       /* proLIBRIS: "pro" in italics, as the client writes the name (prolibris_brand()) */
.lines{flex:1;overflow:auto;padding:4px 22px;list-style:none;margin:0}

.line:last-child{border-bottom:0}

.line a{font-weight:600;font-size:.93rem;line-height:1.3;text-decoration:none;display:block}
.line a:hover{text-decoration:underline}
.line .qty{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-variant-numeric:tabular-nums}   /* drawer only, not WooCommerce's input.qty */
.qty button{width:32px;height:32px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;display:grid;place-items:center}
.drawer footer{padding:18px 22px;border-top:1px solid var(--line)}
.sum{display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem}
.sum-note{font-size:.82rem;color:var(--muted);margin:4px 0 14px}
.cart-empty{padding:48px 0;text-align:center;color:var(--muted)}
.cart-empty i{font-size:2.2rem}

/* ---------- motion: entry + hover only, honours reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* only sections below the visible area fade in (app.js marks them .rv-wait); what is in view at load is shown
     right away, without waiting for the scripts (faster first paint / LCP) */
  .rv{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*50ms)}
  .rv.rv-wait{opacity:0;transform:translateY(18px)}
  .rv.in{opacity:1;transform:none}
  /* hero: the headline/search column is visible from the first frame and only glides up (it is the largest
     element in view, so a fade from invisible would delay it); the book stack fades in as before */
  .hero .wrap>*:first-child{animation:glide .9s var(--ease) both}
  .hero .wrap>*:nth-child(2){animation:rise .9s var(--ease) .12s both}
  .suggest{animation:pop .18s var(--ease)}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes glide{from{transform:translateY(16px)}to{transform:none}}
  @keyframes pop{from{opacity:0;transform:translateY(-4px)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1180px){
  .hd-search{position:static}
  .search-toggle{display:inline-flex}
  .hd-search .sbox{display:none;position:absolute;left:0;right:0;top:var(--hd);max-width:none;background:var(--navy);padding:12px 20px 16px;border-top:1px solid var(--navy-deep)}
  .hd-search.open .sbox{display:flex}
  .hd-search .sbox>i{left:33px}
  .hd-search .sbox kbd{display:none}
  .hd-search .suggest{left:20px;right:20px;width:auto}
}
@media (max-width:1024px){
  .shop{grid-template-columns:1fr}
  .filters-toggle{display:inline-flex}
  .filters{position:fixed;top:0;left:0;bottom:0;width:min(360px,88%);max-height:none;z-index:70;background:var(--surface);padding:0;transform:translateX(-100%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
  .filters.open{transform:none;visibility:visible}
  .filters .f-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
  .filters .f-head h2{margin:0;font-size:1.15rem}
  .filters .f-body{flex:1;overflow:auto;padding:12px 20px}
  .f-foot{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
  .f-foot .btn{flex:1;padding:12px 10px}
  .cart-grid{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
  .acc-nav{position:static;flex-direction:row;overflow-x:auto}
  .acc-nav button{white-space:nowrap}
  .about,.contact{grid-template-columns:minmax(0,1fr);gap:32px}
  .facts3{grid-template-columns:minmax(0,1fr)}
  .stickybuy{display:flex}
}
@media (max-width:768px){
  :root{--hd:60px}
  .site-header .wrap{gap:4px}
  .logo{margin-right:auto}
  .menu-toggle{display:inline-flex;width:46px;height:46px;justify-content:center;font-size:1.55rem;margin-right:-8px}   /* big enough to hit with a thumb */
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;padding:12px 20px 18px;display:none;border-top:1px solid var(--navy-deep)}   /* below the whole header, incl. the search row */
  .nav.open{display:flex;z-index:5}   /* above the floating header search of the shop/home pages */
  .nav.open a{min-height:44px;display:flex;align-items:center}
  .hd-search{flex:none}
  .hd-label{display:none}
  .hd-konto{display:none!important}
  .nav .nav-konto{display:flex}
  .hd-btn{padding:8px}
  .hero{padding:28px 0 24px}
  .hero .wrap{grid-template-columns:1fr;gap:24px;min-height:0}
  .stack{max-width:420px}
  section{padding:44px 0}
  .band{padding:32px 24px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid.list .card{grid-template-columns:60px 1fr;padding:12px}
  .grid.list .cover img{width:60px}
  .grid.list .foot{grid-column:2;grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between}
  .suggest{width:100%}
  .sbox.lg.has-btn input{padding-right:16px}
  .sbox.lg .btn{display:none}
}
@media (max-width:520px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{padding:10px}
  .card .cover{padding:12px}
  .toolbar .count{width:100%}
  .review,.auth,.dash{grid-template-columns:minmax(0,1fr)}
  .field.h,.field.t{grid-column:span 6}
  .cart-row{grid-template-columns:60px minmax(0,1fr) auto;gap:10px 14px;padding:14px}
  .cart-row>a{grid-row:span 2}
  .cart-row img{width:60px}
  .cart-row>div:not(.stepper){grid-column:2/-1}
  .cart-row .stepper{grid-column:2;justify-self:start}
  .cart-row .price{grid-column:3;min-width:0}
  .panel{padding:20px}
  .steps .lbl{display:none}
  .steps li[aria-current="step"] .lbl{display:inline}
  .tools-r{width:100%}
  .tools-r select{flex:1 1 0;min-width:0;width:100%}
}

/* =====================================================================
   Layer 2: header search behaviour, product page, mobile refinements
   ===================================================================== */
.hd-search .sbox{transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
body[data-hds="off"] .hd-search .sbox{opacity:0;visibility:hidden;transform:translateY(-6px)}
body[data-hds="off"] .search-toggle{visibility:hidden}

.rail>.card:nth-child(n+7){display:none}
.cart-bar,.count-m{display:none}
/* footer always at the bottom, even on short pages */
body{margin:0;overflow-x:clip;font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* home: "Unser Programm" series showcase */
.prog{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.prog-tabs{display:flex;flex-direction:column;gap:4px;padding:14px}
.prog-tabs [role=tab]{text-align:left;background:none;border:0;border-radius:var(--r);padding:18px 18px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:background .2s,color .2s}
.prog-tabs [role=tab]:hover{background:var(--surface-2)}
.pt-n{font-size:1.08rem;font-weight:650;letter-spacing:-.01em}
.pt-c{font-size:.86rem;color:var(--muted)}
.prog-tabs [aria-selected="true"]{background:var(--navy);color:#fff}
.prog-tabs [aria-selected="true"]:hover{background:var(--navy)}
.prog-tabs [aria-selected="true"] .pt-c{color:#c5d5ea}

.prog-panel:focus-visible{outline-offset:-4px}
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:end}
.shelf a{display:block;transition:transform .35s var(--ease)}
.shelf a:hover{transform:translateY(-6px)}
.shelf img{width:100%;border-radius:1px;box-shadow:0 2px 4px rgb(0 0 0/.3),0 22px 36px -16px rgb(0 0 0/.75)}
.prog-foot{display:flex;justify-content:space-between;align-items:center;gap:28px;border-bottom:1px solid rgb(255 255 255/.14);padding-bottom:24px}
.prog-panel{background:var(--navy);color:#fff;padding:40px 40px 30px;display:flex;flex-direction:column;gap:30px;min-height:420px;justify-content:flex-start}

/* home: Landesrecht grid, 9 states = 3 x 3 */
.land{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.state{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 18px 12px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.state:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.state-img{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--surface-2)}
.state-img img{position:absolute;width:150%;max-width:none;height:auto;left:-14%;top:-10%}
.state-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(20 49 76/.12)}
.state-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.state b{font-size:1.02rem;font-weight:650}
.state small{color:var(--muted);font-size:.86rem}
.state i{color:var(--muted);font-size:1.1rem;transition:transform .25s var(--ease),color .2s}
.state:hover i{color:var(--text);transform:translateX(3px)}
@media (max-width:1024px){.land{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.land{grid-template-columns:minmax(0,1fr);gap:8px}.state{grid-template-columns:52px minmax(0,1fr) auto;padding:8px 14px 8px 8px}.state-img{width:52px;height:52px}}
.prog-foot p{margin:0;color:#c5d5ea;max-width:62ch}
.prog-foot .btn{background:var(--accent);border-color:var(--accent);color:var(--navy-deep)}
.prog-foot .btn:hover{background:#a4c0ec;border-color:#a4c0ec}
@media (prefers-reduced-motion:no-preference){
  .shelf a{animation:rise .55s var(--ease) both;animation-delay:calc(var(--k) * 60ms)}
}
@media (max-width:1024px){
  .prog{grid-template-columns:230px minmax(0,1fr)}
  .prog-panel{padding:28px}
  .shelf{gap:14px}
}
@media (max-width:768px){
  /* phones: all three series side by side as a segmented control (nothing cut off), three whole covers below */
  .prog{grid-template-columns:minmax(0,1fr)}
  .prog-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px}
  .prog-tabs [role=tab]{padding:10px 8px;gap:2px;justify-content:center;min-height:64px}
  .pt-n{font-size:.86rem;line-height:1.2;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:anywhere}
  .pt-c{font-size:.75rem}
  .prog-panel{padding:20px 18px 22px;min-height:0;gap:18px}
  .prog-foot{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:18px}
  .prog-foot p{font-size:.93rem;line-height:1.5}
  .prog-foot .btn{justify-content:center}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .shelf a:nth-child(n+4){display:none}
}
.card h3,.mini b,.cart-row a.t,.sg-item b{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* product page, tablet: buy box moves under the title */
@media (max-width:1180px){
  .pd{grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"stage head" "stage buy" "stage facts" "stage body";column-gap:40px}
  .pd-buy{position:static;margin-top:22px;max-width:560px}
  .pd-buy .help{display:none}
}

/* checkout + shop toolbar, tablet and below */
@media (max-width:1024px){
  .toolbar{position:sticky;top:var(--hd);z-index:30;background:var(--bg);margin:0 -20px 12px;padding:10px 20px;border-bottom:1px solid var(--line)}
}

@media (max-width:768px){
  /* header: second row with an always-reachable search */
  .site-header .wrap{flex-wrap:wrap;height:auto;column-gap:4px;row-gap:0}
  .site-header .logo,.site-header .hd-tools,.site-header .menu-toggle{height:60px;display:flex;align-items:center}
  .hd-search{order:10;flex:1 0 100%;display:block;padding-bottom:12px}
  .search-toggle{display:none!important}
  .hd-search .sbox{display:flex!important;position:relative;top:auto;left:auto;right:auto;padding:0;background:none;border:0;max-width:none}
  .hd-search .sbox>i{left:13px}
  .hd-search .suggest{left:0;right:0;width:auto;max-height:70dvh}
  .nav{top:100%}
  body:not([data-primary]){--hd:119px}
  .toolbar .count{display:none}
  .toolbar{flex-wrap:nowrap}
  .tools-r{width:100%}
  .tools-r select{flex:1 1 0;min-width:0;width:100%}
  .count-m{display:block;margin:0 0 12px}
  .card h3{font-size:.93rem}
  body[data-primary] .hd-search{position:absolute;left:0;right:0;top:100%;padding:0 20px 12px;background:var(--navy);border-bottom:1px solid var(--navy-deep);box-shadow:0 12px 24px -16px rgb(5 34 61/.6);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  body[data-primary][data-hds="off"] .hd-search{opacity:0;visibility:hidden;transform:translateY(-8px)}
  body[data-primary] .hd-search .sbox{opacity:1;visibility:visible;transform:none}
  body[data-primary][data-hds="on"]{--hd:119px}

  /* home: navy hero continues the header, covers rise out of the bottom edge */
  .hero{background:var(--navy);color:#fff;padding:28px 0 0;overflow:hidden}
  .hero:has(.suggest:not([hidden])){overflow:visible}   /* open suggestions must not be cut off at the hero's edge */
  .hero .wrap{gap:8px}
  .hero h1{color:#fff;font-size:2.15rem}
  .hero p{color:#c5d5ea;font-size:1.05rem;margin-bottom:20px}
  .hero .sbox.lg input{border-color:transparent;box-shadow:0 14px 30px -14px rgb(0 0 0/.6)}
  .hero-links{color:#c5d5ea}
  .hero-links a{background:rgb(255 255 255/.12);color:#fff}
  .hero-links a:hover{background:rgb(255 255 255/.2)}
  .hero .stack{max-width:360px;margin:14px auto -16%}
  .rail{grid-auto-flow:column;grid-auto-columns:clamp(155px,42%,220px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 14px;scroll-padding:0 20px;align-items:start}
  .rail>.card{scroll-snap-align:start}
  .rail>.card:nth-child(n+7){display:flex}

  /* product: cover on a stage tinted by its own colours */
  .pd-crumbs{display:none}
  .pd-back{display:inline-flex;align-items:center;gap:4px;padding:14px 0 6px;font-size:.92rem;font-weight:600;color:var(--link);text-decoration:none}
  .pd{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "head" "buy" "facts" "body";padding-top:0}
  body[data-page="produkt"] main{background:var(--bg)}
  /* neutral stage that melts into the page: no hard edge, no competing colour */
  .pd-stage{position:relative;top:auto;margin:0 -20px;padding:28px 0 34px;background:radial-gradient(ellipse 70% 60% at 50% 42%,var(--surface) 0,transparent 70%),linear-gradient(180deg,var(--surface-2) 0,var(--bg) 100%)}
  .pd-series{display:none}
  .book{max-width:min(52vw,220px)}
  .pd-head{padding-top:8px;display:flex;flex-direction:column}
  .pd-head h1{order:1}
  .pd-head .subt{order:2}
  .pd-head .pd-tags{order:3;margin:12px 0 0}   /* phones: title + abbreviation first, the series/topic tags below */
  .pd h1{font-size:1.85rem}
  .pd h1.long{font-size:1.45rem}
  .pd>.facts-row{margin-top:16px}
  .pd-buy .buy-row{flex-wrap:nowrap}
  .pd-buy .buy-row .btn{flex:1 1 auto;min-width:0;white-space:normal}   /* 320px: the label wraps instead of pushing the page wider */
  .facts-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts-row dd{white-space:normal}
  .facts-row div:nth-child(odd){border-left:0}
  .facts-row div:nth-child(n+3){border-top:1px solid var(--line)}
  .pd-buy{margin-top:18px;max-width:none}
  .buy{padding:18px;box-shadow:none}
  .buy .pr{font-size:1.75rem}
  .pd-sec:first-child{margin-top:28px}
  .stickybuy{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .stickybuy .btn{padding:11px 16px}

  /* cart: fixed checkout bar */
  .cart-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px -16px rgb(20 49 76/.4);padding:10px 20px calc(10px + env(safe-area-inset-bottom))}
  .cart-bar small{display:block;color:var(--muted);font-size:.8rem}
  .cart-bar b{font-size:1.15rem;font-variant-numeric:tabular-nums}
  body[data-page="warenkorb"] .site-footer{padding-bottom:96px}
  body[data-page="produkt"] .site-footer{padding-bottom:96px}
}

/* =====================================================================
   Authors: author page (/autor/<name>/) + author tiles on Unternehmen
   ===================================================================== */
.au{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;padding:24px 0 48px}
.au.no-photo{grid-template-columns:minmax(0,1fr)}
.au-main{max-width:760px}
.au h1{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
.au-aff{font-size:1.12rem;color:var(--muted);margin:0 0 10px}
.au-count{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;background:var(--surface-2);color:var(--link);padding:5px 12px;border-radius:var(--r);margin:4px 0 0}
.au-intro{margin-top:22px}
.au-intro p{max-width:68ch}
.au-h{font-size:1.15rem;margin:32px 0 14px}
.au-bio{list-style:none;margin:0;padding:0;position:relative}
.au-bio::before{content:"";position:absolute;left:162px;top:6px;bottom:6px;width:1px;background:var(--line)}
.au-bio li{display:grid;grid-template-columns:162px minmax(0,1fr);gap:12px;padding:9px 0;position:relative}
.au-bio li::after{content:"";position:absolute;left:158px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.au-when{font-size:.88rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;padding-right:16px;white-space:nowrap}
.au-what{padding-left:12px}
.au-bio li:has(.au-when:empty) .au-what{grid-column:2}
.au-books{border-top:1px solid var(--line);padding:36px 0 56px}
.au-books .sec-head h2{margin:0}
/* author page: 5 books per row (8 made the cards look stretched); in narrow cards the cart button moves below the price */
.au-books .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.au-books .card .foot{flex-wrap:wrap;gap:6px}
@media (max-width:1024px){.au-books .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:768px){.au-books .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (max-width:520px){.au-books .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.person{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .2s var(--ease);display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;justify-content:normal}
.person-ini{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:650;font-size:.95rem;letter-spacing:.02em}
.person-t{min-width:0;display:flex;flex-direction:column}
.person-t b{font-weight:600;font-size:.95rem;line-height:1.3}
.person-t small{color:var(--muted);font-size:.82rem;white-space:normal}
.person>i{color:var(--muted)}
.pd .authors a{color:var(--link);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent)}
.pd .authors a:hover{border-color:var(--link)}

@media (max-width:768px){
  .au{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:12px}
  .au-bio::before{left:0}
  .au-bio li{grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 0 8px 22px}
  .au-bio li::after{left:-4px;top:14px}
  .au-when{text-align:left;padding:0}
  .au-what{padding:0}
  .au-bio li:has(.au-when:empty) .au-what{padding-left:0}
}
/* =====================================================================
   Round 2: equal-height cards, author chips, Geschäftsführung, stacking
   ===================================================================== */
/* the hero/shop search sits above the following sections, so its suggestions aren't covered */
.hero,.shop-hero,.notfound{position:relative;z-index:3}
/* inside the hero the search column stays above the (animated) book stack */
.hero .wrap>*:first-child{position:relative;z-index:2}

/* cards: fixed rows -> every card in a row/rail has the same height, prices line up */
.card .kind{font-size:.78rem;font-weight:600;color:var(--muted);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.3em)}
.card .sub,.card .facts{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:210px;justify-content:start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;align-items:stretch}
.grid.list .card h3{min-height:0}

/* product page: authors as chips */
.pd-authors{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0}
.pd-authors-l{font-size:.86rem;color:var(--muted)}
.pd-authors ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.author-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;font-size:.9rem;font-weight:600;transition:border-color .2s,background .2s}
.author-chip:hover{border-color:var(--ink);background:var(--surface-2)}
.author-chip img,.author-chip .ini{width:28px;height:28px;border-radius:6px;object-fit:cover;flex:none}
.author-chip .ini{display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.72rem;font-weight:650}

/* Unternehmen: Geschäftsführung, quiet */
.gf{padding:8px 0 40px}
.gf-h{font-size:1.2rem;margin:0 0 14px}
.gf-card{display:inline-flex;align-items:center;gap:16px;padding:14px 22px 14px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.gf-img{width:64px;height:64px;border-radius:var(--r);object-fit:cover;flex:none}
.gf-card div{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.gf-card b{font-size:1rem}
.gf-card span{color:var(--muted);font-size:.9rem}
.gf-card a{display:inline-flex;align-items:center;gap:6px;color:var(--link);font-weight:600;font-size:.9rem;text-decoration:none;margin-top:4px}
.gf-card a:hover{text-decoration:underline}
.fact i{font-size:1.4rem;color:var(--ink)}

/* cart drawer + cart page: whole covers, never cropped */
.line img{border-radius:2px;width:48px;height:auto;max-height:68px;object-fit:contain;align-self:start;box-shadow:0 1px 2px rgb(20 49 76/.2),0 6px 12px -4px rgb(20 49 76/.35)}
.woocommerce table.cart .product-thumbnail img{width:56px;height:auto;aspect-ratio:auto}
@media (max-width:560px){.gf-card{display:flex}}
/* facts: one even row (columns = number of facts), long values wrap inside their box */
.pd .facts-row{display:grid;grid-template-columns:repeat(var(--n,4),minmax(min-content,1fr))}   /* never narrower than the longest word */
.pd .facts-row dd{white-space:normal}
@media (max-width:768px){.pd .facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* =====================================================================
   Round 3: availability note, Rechtsstand update line, supplements
   ===================================================================== */
:root{--note-bg:#fff4c2;--note-line:#f1d35f;--note-text:#4d3a00;--note-icon:#a47a00}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]){--note-bg:#3b3012;--note-line:#7a6320;--note-text:#f6e3a1;--note-icon:#f1c84b}}
/* yellow: the one deliberate exception to the single accent, reserved for "not yet shippable" information */
.availnote{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:11px 14px;border-radius:var(--r);background:var(--note-bg);border:1px solid var(--note-line);color:var(--note-text);font-weight:650;font-size:.95rem}
.availnote i{font-size:1.25rem;color:var(--note-icon);flex:none}
.pd>.pd-facts{grid-area:facts;min-width:0}
.pd>.pd-facts .facts-row{margin-top:22px}
.pd .facts-row dd small{display:block;font-weight:500;font-size:.78rem;color:var(--muted);margin-top:2px}





@media (max-width:768px){.pd>.pd-facts .facts-row{margin-top:16px}}

/* shop: results rise in when a filter, tab, sort or page changes */
@media (prefers-reduced-motion:no-preference){
  .grid.anim>.card{animation:rise .5s var(--ease) both;animation-delay:calc(var(--k,0) * 40ms)}
}
/* product page: authors get their own grid area (title column on desktop, under the price on phones) */
.pd{grid-template-rows:auto auto auto 1fr;grid-template-areas:"stage head buy" "stage authors buy" "stage facts buy" "stage body buy"}
.pd>.pd-authors{grid-area:authors;min-width:0}
.author-chip span{white-space:nowrap}
@media (max-width:1180px){
  .pd{grid-template-rows:auto;grid-template-areas:"stage head" "stage authors" "stage buy" "stage facts" "stage body"}
}
@media (max-width:768px){
  .pd{grid-template-areas:"stage" "head" "buy" "authors" "facts" "body"}
  .pd>.pd-authors{margin-top:18px}
}

/* ---------- Round: list toggle, author tint, order cards ---------- */
/* grid/list toggle never shrinks next to the sort select */
.seg{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:var(--r);overflow:hidden;flex:none}
.seg button{background:var(--surface);border:0;padding:8px 11px;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;color:var(--muted);min-width:38px}
/* author portraits on Unternehmen in a calm proLIBRIS blue duotone, full colour on hover (not the Geschäftsführung) */
/* availability in the buy box: a quiet green confirmation */
:root{--ok:#1f7a45}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]){--ok:#5cc98a}}

.assure li{display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.assure li>i{height:calc(.88rem * 1.5);line-height:1;display:flex;align-items:center}   /* icon box = one text line, so it centres on the first line */
.assure li.ok{color:var(--text)}
/* supplement download: a touch more presence than a plain row (light blue tint, readable label, real button) */
.pd-dl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;border:1px solid var(--line);border-radius:var(--r);font-size:.9rem;background:color-mix(in srgb,#84a9e0 13%,var(--surface));border-color:color-mix(in srgb,#84a9e0 45%,var(--line));padding:10px 10px 10px 14px}
.pd-dl span{display:inline-flex;align-items:center;gap:8px;margin-right:auto;color:var(--text);font-weight:500}
.pd-dl span i{color:var(--ink);font-size:1.3rem}
.pd-dl a{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;padding:7px 12px;border-radius:var(--r);background:var(--surface);border:1px solid color-mix(in srgb,#84a9e0 55%,var(--line));color:var(--ink);transition:background .2s,border-color .2s}
.pd-dl a:hover{text-decoration:none;background:var(--navy);border-color:var(--navy);color:#fff}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]) .pd-dl a{color:var(--text)}}
:root[data-theme="dark"] .pd-dl a{color:var(--text)}
@media (prefers-reduced-motion:reduce){.pd-dl a{transition:none}}
/* coloured boxes from the description shortcuts: /rot, /blau, /gelb, /gruen.
   Colours come from per-box tokens, so light and dark mode only swap the four token sets. */
.ed-note{align-items:flex-start;font-weight:500;font-size:.9rem;line-height:1.45;background:var(--nb);border-color:var(--nl);color:var(--nt)}
.ed-note i{margin-top:1px;color:var(--ni)}
.ed-note b{display:block;font-weight:700;font-size:.95rem;margin-bottom:2px}
.ed-note b:last-child{margin-bottom:0}
.ed-note.is-red{--nb:#fdecec;--nl:#f3b8b8;--nt:#7a1414;--ni:#c62828}
.ed-note.is-blue{--nb:#edf3fc;--nl:#c3d5f1;--nt:#14314c;--ni:#2f63ad}
.ed-note.is-yellow{--nb:var(--note-bg);--nl:var(--note-line);--nt:var(--note-text);--ni:var(--note-icon)}
.ed-note.is-green{--nb:#eaf6ee;--nl:#b9dfc6;--nt:#14532d;--ni:#1f7a45}
@media (prefers-color-scheme:dark) and (max-width:768px){
  :root:not([data-theme="light"]) .ed-note.is-red{--nb:#3a1717;--nl:#6e2a2a;--nt:#ffd6d6;--ni:#ff8a8a}
  :root:not([data-theme="light"]) .ed-note.is-blue{--nb:#16273d;--nl:#2c4a73;--nt:#dbe7f8;--ni:#84a9e0}
  :root:not([data-theme="light"]) .ed-note.is-green{--nb:#14301f;--nl:#2b5c3d;--nt:#d3f2de;--ni:#5cc98a}
}
:root[data-theme="dark"] .ed-note.is-red{--nb:#3a1717;--nl:#6e2a2a;--nt:#ffd6d6;--ni:#ff8a8a}
:root[data-theme="dark"] .ed-note.is-blue{--nb:#16273d;--nl:#2c4a73;--nt:#dbe7f8;--ni:#84a9e0}
:root[data-theme="dark"] .ed-note.is-green{--nb:#14301f;--nl:#2b5c3d;--nt:#d3f2de;--ni:#5cc98a}
/* "/lieferbar nein": the availability line in red */
:root{--no:#c62828}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]){--no:#ff8a8a}}

.assure li.no{color:var(--text)}
.assure li.no i,.assure li.no b{color:var(--no)}
.assure li.no b{font-weight:600}
/* shop card flags over the square cover: notes (top right), "Neu" (bottom left) and supplement download (bottom right).
   The overlay has the cover's exact box (card padding, square), so the corners line up; explanation on hover / focus / tap. */
.card .flags{position:absolute;top:12px;left:12px;right:12px;aspect-ratio:3/4;pointer-events:none;z-index:3}   /* exactly over .card .cover */
.flag{position:absolute;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:1.3rem;box-shadow:0 1px 4px rgba(20,49,76,.25);cursor:help;pointer-events:auto}
.flag-notes{top:8px;color:#c62828}
/* several notes: one white capsule, icons stacked by importance */
.flag-notes.multi{height:auto;border-radius:15px;padding:3px 0;display:flex;flex-direction:column;align-items:center;gap:1px}
.flag-notes.multi i{height:24px;display:grid;place-items:center}
.fc-red{color:#c62828}.fc-yellow{color:#b07800}.fc-blue{color:#2f63ad}.fc-green{color:#1f7a45}
.flag-dl{bottom:8px;color:var(--ink)}
.flag-new{bottom:8px;right:auto;left:8px;width:auto;height:auto;padding:3px 8px;border-radius:var(--r);background:var(--navy);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.03em;line-height:1.4}   /* "Neu" box, 30 days */
.flag:hover,.flag:focus-visible{z-index:2}
.flag:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]) .flag-dl{color:#14314c}}
:root[data-theme="dark"] .flag-dl{color:#14314c}
@media (max-width:768px){.card .flags{top:10px;left:10px;right:10px}.flag{right:6px;width:28px;height:28px;font-size:1.2rem}.flag-notes{top:6px}.flag-dl,.flag-new{bottom:6px}.flag-new{left:6px;right:auto;width:auto;height:auto;padding:2px 7px;font-size:.7rem}.flag-notes.multi{height:auto}}   /* "Neu" keeps its text size, not the icon circle's */
/* list view: the flags leave the small thumbnail and sit as a row in the free space between text and price */
.grid.list .card{grid-template-columns:76px minmax(0,1fr) auto auto}
.grid.list .card .flags{position:static;grid-column:3;grid-row:1/span 2;align-self:end;margin:0 -8px 11px 0;aspect-ratio:auto;display:flex;align-items:center;gap:6px;pointer-events:auto}   /* on the button's line, just left of it */
.grid.list .flag-new{order:1}   /* read from the button outwards: "Neu" right next to it, the other icons further left */
.grid.list .card .foot{grid-column:4}
.grid.list .flag{position:static;inset:auto}
.grid.list .flag-notes.multi{flex-direction:row;height:30px;padding:0 4px;border-radius:15px;gap:2px}
.grid.list .flag-notes.multi i{height:auto;width:24px}
@media (max-width:768px){
  .grid.list .card{grid-template-columns:60px minmax(0,1fr)}
  .grid.list .card .flags{position:absolute;top:10px;right:10px;left:auto;margin:0;grid-column:auto;grid-row:auto}   /* phones: top right corner of the row (no grid area, so the card is the reference) */
  .grid.list .card .foot{flex-wrap:wrap;gap:8px}
  .grid.list .card .foot .price{text-align:left}
  .grid.list .card:has(.flags) .body{padding-right:72px}
  .grid.list .card .foot{grid-column:2}
  .grid.list .flag-notes.multi{height:28px}
}

/* flag explanation: one floating element (app.js), position:fixed so no card, rail or scroll box can cut it off */
.tip-pop{position:fixed;z-index:90;max-width:min(260px,calc(100vw - 16px));padding:9px 11px;border-radius:var(--r);background:var(--navy);color:#fff;font-size:.8rem;font-weight:500;line-height:1.5;white-space:pre-line;box-shadow:0 8px 22px rgba(0,0,0,.22);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.tip-pop.on{opacity:1;transform:none}
.tip-pop.tone-red{background:#7a1414}
.tip-pop.tone-yellow{background:#5c4300}
.tip-pop.tone-green{background:#14532d}
@media (prefers-reduced-motion:reduce){.tip-pop{transition:none}}
/* fact values (e.g. "September 2025") never break; the small update note below may */
.pd .facts-row dd .nw{white-space:nowrap}
.assure li.ok i{color:var(--ok, #1f8a4c)}
.assure li.ok b{color:var(--ok, #1f8a4c);font-weight:600}
/* Bibliografische Angaben: one clean label/value table instead of a ragged multi-column grid */
.biblio{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:0;padding:4px 22px}
.biblio>div,.biblio .wide{display:contents}
.biblio dt,.biblio dd{padding:12px 0;border-top:1px solid var(--line)}
.biblio>div:first-child dt,.biblio>div:first-child dd{border-top:0}
.biblio dt{color:var(--muted);margin-bottom:2px;margin:0;padding-right:28px;font-size:.88rem;align-self:stretch}
.biblio dd{margin:0;font-size:.95rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-weight:500}
@media (max-width:520px){
  .biblio{grid-template-columns:1fr}
  .biblio dt{padding:12px 0 0}
  .biblio dd{border-top:0;padding:2px 0 12px}
  .biblio>div:first-child dt{border-top:0}
}
/* order cards: the item rows use the summary grid (cover, title left, price right) */
.order .body .sum-items li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;justify-content:normal;text-align:left}
.order .body .sum-items li a{color:inherit}
/* ---------- notes as chips under a title (cart drawer, cart page, checkout summary) ---------- */
.note-chips{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 2px}
.note-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 5px;border-radius:var(--r);font-size:.74rem;font-weight:600;line-height:1.4;background:var(--nb);color:var(--nt);border:1px solid var(--nl)}
.note-chip i{font-size:.95rem;color:var(--ni)}
.note-chip.nc-red{--nb:#fdecec;--nl:#f3b8b8;--nt:#7a1414;--ni:#c62828}
.note-chip.nc-blue{--nb:#edf3fc;--nl:#c3d5f1;--nt:#14314c;--ni:#2f63ad}
.note-chip.nc-yellow{--nb:var(--note-bg);--nl:var(--note-line);--nt:var(--note-text);--ni:var(--note-icon)}
.note-chip.nc-green{--nb:#eaf6ee;--nl:#b9dfc6;--nt:#14532d;--ni:#1f7a45}
@media (prefers-color-scheme:dark) and (max-width:768px){
  :root:not([data-theme="light"]) .note-chip.nc-red{--nb:#3a1717;--nl:#6e2a2a;--nt:#ffd6d6;--ni:#ff8a8a}
  :root:not([data-theme="light"]) .note-chip.nc-blue{--nb:#16273d;--nl:#2c4a73;--nt:#dbe7f8;--ni:#84a9e0}
  :root:not([data-theme="light"]) .note-chip.nc-green{--nb:#14301f;--nl:#2b5c3d;--nt:#d3f2de;--ni:#5cc98a}
}
:root[data-theme="dark"] .note-chip.nc-red{--nb:#3a1717;--nl:#6e2a2a;--nt:#ffd6d6;--ni:#ff8a8a}
:root[data-theme="dark"] .note-chip.nc-blue{--nb:#16273d;--nl:#2c4a73;--nt:#dbe7f8;--ni:#84a9e0}
:root[data-theme="dark"] .note-chip.nc-green{--nb:#14301f;--nl:#2b5c3d;--nt:#d3f2de;--ni:#5cc98a}

/* ---------- cart drawer: only as tall as its content ----------
   desktop: a floating panel at the top right; phones: a sheet from the bottom */
.lines{flex:0 1 auto}
@media (min-width:769px){
  .drawer{top:12px;right:12px;height:auto;max-height:calc(100dvh - 24px);border-radius:var(--r);transform:translateX(calc(100% + 24px))}
  .admin-bar .drawer{top:44px;max-height:calc(100dvh - 56px)}
  .drawer header{padding:16px 20px}
  .drawer footer{padding:16px 20px}
  .lines{padding:4px 20px}
  .cart-empty{padding:28px 0}
}
@media (max-width:768px){
  .drawer{top:auto;bottom:0;width:100%;height:auto;max-height:88dvh;border-radius:14px 14px 0 0;transform:translateY(100%)}
  .drawer footer{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ---------- password rule: min. 8 characters, weak only when confirmed (app.js) ---------- */
.woocommerce-password-hint{display:none}   /* WooCommerce's "12 characters" hint contradicts our 8-character rule */
.pw-policy{margin:-4px 0 14px;padding:10px 12px;border-radius:var(--r);font-size:.88rem;border:1px solid}
.pw-policy.bad{background:#fdecec;border-color:#f3b8b8;color:#7a1414}
.pw-policy.weak{background:var(--note-bg);border-color:var(--note-line);color:var(--note-text)}
.pw-policy p{margin:0}
.pw-ok{display:flex;gap:8px;align-items:center;margin-top:8px;font-weight:600;cursor:pointer}
.pw-ok input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]) .pw-policy.bad{background:#3a1717;border-color:#6e2a2a;color:#ffd6d6}}
:root[data-theme="dark"] .pw-policy.bad{background:#3a1717;border-color:#6e2a2a;color:#ffd6d6}

/* legal pages: the model cancellation form as a framed box */
.legal-form{margin:14px 0 24px;padding:18px 20px;border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface)}
.legal-form p{margin:0 0 10px}
.legal-form p:last-child{margin:0}

/* header when logged in: initials + full name (like the author chips) */
.hd-konto.is-me{gap:9px;padding:6px 10px 6px 6px}
.me-ini{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--accent,#84a9e0);color:var(--navy-deep,#0e2338);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.me-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;font-weight:600}

/* "/keinkaufen": cart buttons greyed out (product page, sticky bar, cards) */
:root{--off-bg:#e3e5e8;--off-line:#d2d5da;--off-text:#8b9097}   /* neutral grey, no brand blue: clearly not clickable */
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]){--off-bg:#2c3036;--off-line:#3a3f46;--off-text:#7d838b}}
:root[data-theme="dark"]{--ok:#5cc98a;--no:#ff8a8a;--off-bg:#2c3036;--off-line:#3a3f46;--off-text:#7d838b}
.btn:disabled,.btn:disabled:hover{background:var(--off-bg);border-color:var(--off-line);color:var(--off-text);cursor:not-allowed;box-shadow:none;transform:none}
.btn:disabled i{color:inherit}
.buy-row.is-off .stepper{opacity:.55}
.buy-row.is-off .stepper input,.buy-row.is-off .stepper button{cursor:not-allowed}
.buy-off{margin:8px 0 0;font-size:.86rem;color:var(--muted)}

/* ---------- Konto menu under the name in the header (same easing as the cart drawer) ---------- */
.me-wrap{position:relative}
.me-caret{font-size:.8rem;opacity:.75;transition:transform .3s var(--ease)}
.is-me[aria-expanded="true"] .me-caret{transform:rotate(180deg)}
.me-menu{position:absolute;left:50%;top:calc(100% + 10px);width:270px;z-index:65;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px) scale(.98);transform-origin:top center;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility .25s}
.me-menu.open{opacity:1;visibility:visible;transform:translateX(-50%)}   /* centred under the name */
.me-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.me-head span:last-child{min-width:0;display:flex;flex-direction:column}
.me-head b{font-size:.93rem;line-height:1.3;overflow-wrap:anywhere}
.me-head small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-menu ul{list-style:none;margin:0;padding:0}
.me-menu li a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:var(--text);text-decoration:none;font-size:.93rem}
.me-menu li a i{font-size:1.1rem;color:var(--muted)}
.me-menu li a:hover,.me-menu li a:focus-visible{background:var(--surface-2)}
.me-menu li.me-out{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
@media (max-width:600px){.me-menu{position:fixed;left:12px;right:12px;top:calc(var(--hd, 64px) + 6px);width:auto;transform:translateY(-8px) scale(.98)}.me-menu.open{transform:none}}
@media (prefers-reduced-motion:reduce){.me-menu,.me-caret{transition:none}}

/* very long names / words never break out of their box (header menu, Konto addresses, checkout review, order view) */
.woocommerce-Address address,.woocommerce-Address p,.review .box p,.vo-info p,.co-name,.sum-items b,.me-head small{overflow-wrap:anywhere}
.woocommerce-MyAccount-content .woocommerce-Address-title{gap:12px}

/* checkout: quantity after the title; company checkbox */
.co-qty{font-weight:600;color:var(--muted);white-space:nowrap}
.co-company-toggle{margin-bottom:6px}
.co-company-toggle label{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.co-company-toggle input{width:20px;height:20px;margin:0;accent-color:var(--ink)}

/* mobile menu: "Konto" with the initials box (the full name stays in the Konto pages) */
.nav-konto{align-items:center;gap:10px}   /* shown (flex) only in the mobile menu, see .nav .nav-konto */
.nav-konto .me-ini{width:26px;height:26px;font-size:.7rem}

/* touch screens keep :hover after a tap ("sticky" highlight on the burger etc.): hover only for real pointers,
   a tap gives a short flash instead that fades out by itself (the .2s background transition of .hd-btn / .nav a) */
@media (hover:none){
  .hd-btn:hover,.nav a:hover{background:none}
  .nav a[aria-current="page"]:hover{background:rgb(255 255 255/.14)}
  .hd-btn:active,.nav a:active{background:rgb(255 255 255/.16);transition:none}
}

/* ---------- shop list view on phones: one clean row per title ----------
   cover top left, text next to it without empty placeholder lines, price + button on one line at the bottom */
@media (max-width:768px){
  .grid.list{gap:10px}
  .grid.list .card{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:10px;align-items:start;padding:12px}
  .grid.list .cover{grid-column:1;grid-row:1/span 2;align-self:start;margin:0}
  .grid.list .cover img{width:56px}
  .grid.list .card .body{grid-column:2;grid-row:1}
  .grid.list .card .sub:empty,.grid.list .card .facts:empty{display:none}
  .grid.list .card .sub,.grid.list .card .facts{min-height:0;margin-bottom:2px}
  .grid.list .card h3{margin:2px 0 4px}
  .grid.list .card .foot{grid-column:2;grid-row:2;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;margin:0}
  .grid.list .card .foot .price{text-align:left;font-size:1.05rem;line-height:1.2;min-width:0}
  .grid.list .card .foot .btn{padding:8px 11px;font-size:.84rem;gap:5px;flex:none}
}
@media (max-width:380px){.grid.list .card .foot .btn .lbl{display:none}.grid.list .card .foot .btn{padding:10px 12px}}   /* very small phones: icon only */

/* ---------- placing the order: one calm full-page veil with a spinner instead of WooCommerce's partial white box ---------- */
form.checkout.processing .blockUI.blockOverlay{background:transparent!important;opacity:1!important}
body:has(form.checkout.processing)::before{content:"";position:fixed;inset:0;z-index:95;background:color-mix(in srgb,var(--bg,#f4f7fb) 72%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:veil-in .2s ease both}
body:has(form.checkout.processing)::after{content:"";position:fixed;left:50%;top:50%;z-index:96;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:4px solid color-mix(in srgb,var(--ink) 18%,transparent);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes veil-in{from{opacity:0}}   /* "spin" is defined in assets/woo.css */
@media (prefers-reduced-motion:reduce){body:has(form.checkout.processing)::after{animation-duration:2.4s}}

/* cart drawer: remove a title (qty 1 shows an x instead of the minus); row slides out, then the gap closes */
.line{display:grid;grid-template-columns:52px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;transition:opacity .2s var(--ease),transform .2s var(--ease),height .28s var(--ease),padding .28s var(--ease),border-width .28s}
.line.leaving{opacity:0;transform:translateX(28px);overflow:hidden}
.lines{overflow-x:hidden}   /* the sliding row must not cause a horizontal scrollbar */
.line.collapse{height:0!important;padding-top:0;padding-bottom:0;border-bottom-width:0}
.qty button.rm i{font-size:.85rem}
.qty button.rm:hover{background:#fdecec;border-color:#f3b8b8;color:#7a1414}
@media (prefers-color-scheme:dark) and (max-width:768px){:root:not([data-theme="light"]) .qty button.rm:hover{background:#3a1717;border-color:#6e2a2a;color:#ffd6d6}}
:root[data-theme="dark"] .qty button.rm:hover{background:#3a1717;border-color:#6e2a2a;color:#ffd6d6}
@media (prefers-reduced-motion:no-preference){.cart-empty{animation:empty-in .35s var(--ease) both}}
@keyframes empty-in{from{opacity:0;transform:translateY(6px)}}

/* each card is its own stacking layer: the cover flags (z-index 3) stay above their own cover only,
   never above the search suggestions, menus or the cart drawer */
.card{isolation:isolate}

/* "Fragen zu diesem Titel?": desktop next to the buy box, tablet/phone between Beschreibung and Bibliografische Angaben */
.help-inline{display:none}
@media (max-width:1180px){
  .help-inline{display:grid;margin-top:28px}
}

/* ---------- product page on tablets (769–1180 px) ----------
   same structure as desktop: cover on the left and buy box on the right both stay in view while scrolling,
   title, authors, facts and description in the middle. (The white bottom buy bar of the phones only appears
   if the buy box is out of view, which does not happen while it is sticky.) */
@media (min-width:769px) and (max-width:1180px){
  /* same structure as desktop: the content column flows on next to the buy box (no gap below the authors);
     the last row takes any extra height, so title, abbreviation and authors stay together */
  .pd{grid-template-columns:170px minmax(0,1fr) 290px;grid-template-rows:auto auto auto 1fr;
      grid-template-areas:"stage head buy" "stage authors buy" "stage facts buy" "stage body buy";column-gap:28px}
  .pd-buy{align-self:start}
  /* narrower content column: facts in two rows of two */
  .pd .facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd .facts-row div:nth-child(odd){border-left:0}
  .pd .facts-row div:nth-child(n+3){border-top:1px solid var(--line)}
  .pd-stage{position:sticky;top:calc(var(--hd) + 24px);gap:18px;align-self:start}
  .pd-buy{position:sticky;top:calc(var(--hd) + 20px);margin-top:0;max-width:none}   /* stays in view while scrolling, like on desktop */
  .pd-buy .help{display:grid}   /* right column has room below the buy box, like on desktop */
  .help-inline{display:none}
  .pd h1{font-size:clamp(1.6rem,3.2vw,2.2rem)}
  .stickybuy{display:flex}
}
@media (min-width:769px) and (max-width:959px){
  /* narrow tablets: facts in two columns so values like "September 2026" keep their room */
  .pd .facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd .facts-row div:nth-child(odd){border-left:0}
  .pd .facts-row div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* header on narrow tablets: menu + search + account + cart must fit in one line */
@media (min-width:769px) and (max-width:1000px){
  .nav a{padding:8px 9px}
  .hd-konto .hd-label,#cartBtn .hd-label{display:none}   /* icon / initials and the item count stay */
  .site-header .wrap{gap:12px}
}

/* narrow tablets (769–959 px, e.g. iPad portrait): three columns get too tight, so content | buy box;
   the cover sits small above the title (not sticky), the series links below it are not needed here */
@media (min-width:769px) and (max-width:959px){
  .pd{grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:auto auto auto auto 1fr;
      grid-template-areas:"stage buy" "head buy" "authors buy" "facts buy" "body buy";column-gap:24px}
  .pd-stage{position:static;align-items:flex-start;padding-top:0;gap:0}
  .pd-stage .book{max-width:130px}
  .pd-stage .pd-series{display:none}
  .pd-head{padding-top:14px}
}

/* ---------- used on every page (moved from assets/woo.css, which now only loads on regular pages) ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;clip:auto}
.spin{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{list-style:none;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;padding:14px 18px;margin:0 0 18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ink);font-size:.95rem}
.woocommerce-error{border-left-color:#a3262a}
.woocommerce-error li{margin:2px 0}
.woocommerce-message .button,.woocommerce-info .button{order:2;padding:8px 14px;font-size:.88rem}
.woocommerce-message a:not(.button),.woocommerce-info a:not(.button){color:var(--link);font-weight:600}
.woocommerce input[type=checkbox],.woocommerce input[type=radio]{width:18px;height:18px;accent-color:var(--ink);margin:0;flex:none}   /* also the shop filters (body.woocommerce) */
/* the shop's sort dropdown relied on these WooCommerce form rules (body.woocommerce); kept here since woo.css no longer loads in the shop */
.woocommerce select{font:inherit;font-size:1rem;color:var(--text);background:var(--surface);border:1.5px solid var(--input-border);border-radius:var(--r);padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
.woocommerce select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgb(132 169 224/.35)}