/* =====================================================================
   Buchprojekt 1 — Ihr Ort für Kunst
   Design-System / gemeinsames Stylesheet (statischer Prototyp)
   H. W. Fichter Kunsthandel e.K., Frankfurt am Main
   ---------------------------------------------------------------------
   Architektur: Design-Token als CSS Custom Properties (Fundament für das
   spätere WooCommerce-Block-Theme). Mobile-first, BEM-nahe Klassen.
   Reihenfolge: 1 Tokens · 2 Reset · 3 Typografie · 4 Layout-Utilities
   5 Buttons · 6 Formulare · 7 Badges · 8 Cards · 9 Header · 10 Footer
   11 Overlays (Cart/Popup/Cookie/Modal/Search) · 12 Komponenten
   ===================================================================== */

/* ============================ 1 · TOKENS ============================ */
:root{
  /* Markenfarben (Branding-Guideline) */
  --ink:#090805;              /* Marken-Schwarz */
  --white:#ffffff;            /* Marken-Weiß  */

  /* Galerie-Palette (warm, zurückhaltend) */
  --paper:#F7F5F1;            /* Seitenhintergrund, gebrochenes Weiß */
  --paper-2:#FBFAF7;          /* leicht hellere Fläche */
  --paper-3:#EFEBE2;          /* eingesenkte Flächen / Bildrahmen */
  --surface:#ffffff;          /* Karten, Panels */
  --line:#E3DDD0;             /* Trennlinien, warm */
  --line-strong:#CFC7B6;

  --text:#211D17;             /* Fließtext, warmes Fast-Schwarz */
  --muted:#6E665A;            /* Sekundärtext, warmes Grau */
  --muted-2:#726A5B;          /* AA auf Papier (≈4,6:1) */

  /* Genau EINE Akzentfarbe: tiefes Oxblood/Bordeaux */
  --accent:#6E1E28;
  --accent-ink:#571620;
  --accent-tint:#F3E9E7;
  /* Messing-Gold — nur für redaktionelle Mikro-Akzente (Hairlines/Labels)
     abgedunkelt, damit auch als Kleintext auf Papier AA erreicht wird (≈4,6:1) */
  --gold:#8A6C2F;

  --ok:#3C6E47;
  --sold:#8A2B2B;

  /* Typografie */
  --font-display:'Bitter',Georgia,'Times New Roman',serif; /* Feedback 11.08.: neue Schrift überall statt Fraunces */
  --font-head:'Bitter',Georgia,'Times New Roman',serif;
  --font-body:'Inter','Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Typo-Skala (modular, rem) */
  --fs-xs:.75rem;    /* 12 */
  --fs-sm:.8125rem;  /* 13 */
  --fs-cap:.875rem;  /* 14 */
  --fs-base:1rem;    /* 16 */
  --fs-md:1.125rem;  /* 18 */
  --fs-lg:1.375rem;  /* 22 */
  --fs-xl:1.75rem;   /* 28 */
  --fs-2xl:2.25rem;  /* 36 */
  --fs-3xl:3rem;     /* 48 */
  --fs-4xl:3.75rem;  /* 60 */

  --lh-tight:1.12;
  --lh-snug:1.3;
  --lh-body:1.65;

  --tracking:.02em;
  --tracking-wide:.14em;   /* Eyebrows / Claim */

  /* Abstände (8er-Raster) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sp-9:6rem; --sp-10:8rem;

  /* Struktur */
  --container:1280px;
  --container-narrow:820px;
  --radius:2px;              /* museal: fast eckig */
  --radius-lg:4px;
  --border:1px solid var(--line);
  --shadow-sm:0 1px 2px rgba(20,16,10,.05);
  --shadow:0 6px 24px -12px rgba(20,16,10,.22);
  --shadow-lg:0 24px 60px -24px rgba(20,16,10,.34);
  --ring:0 0 0 3px rgba(110,30,40,.35);

  --header-h:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.4s;
}

/* ============================ 2 · RESET ============================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px}
::selection{background:var(--accent);color:#fff}
hr{border:none;border-top:var(--border)}
[hidden]{display:none!important}

/* ========================= 3 · TYPOGRAFIE ========================= */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:var(--lh-snug);color:var(--ink);letter-spacing:-.01em}
.display{font-family:var(--font-display);font-weight:400;line-height:var(--lh-tight);letter-spacing:-.015em}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p{max-width:72ch}
.lead{font-size:var(--fs-md);color:var(--muted);line-height:1.7;max-width:60ch}
small,.text-sm{font-size:var(--fs-sm)}
strong{font-weight:600;color:var(--ink)}
.prose p+p{margin-top:var(--sp-4)}
.prose{max-width:68ch;line-height:1.75}
.prose h3{margin:var(--sp-6) 0 var(--sp-3)}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7;position:relative;top:1px}
.eyebrow--center{justify-content:center}

.section-title{font-size:clamp(1.5rem,1rem + 2vw,2.25rem)}
.muted{color:var(--muted)}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.link:hover{color:var(--accent-ink)}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--fs-cap);letter-spacing:.02em;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s,gap .2s;padding-bottom:2px}
.link-arrow svg{width:16px;height:16px;transition:transform .2s}
.link-arrow:hover{border-color:var(--ink)}
.link-arrow:hover svg{transform:translateX(3px)}

@media (min-width:900px){
  h1{font-size:var(--fs-3xl)}
  h2{font-size:var(--fs-2xl)}
}

/* ====================== 4 · LAYOUT-UTILITIES ====================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
@media (min-width:600px){.container{padding-inline:var(--sp-5)}}
@media (min-width:900px){.container{padding-inline:var(--sp-6)}}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--sp-7)}
@media (min-width:900px){.section{padding-block:var(--sp-9)}}
.section--tight{padding-block:var(--sp-6)}
.section--dark{background:var(--ink);color:#E9E5DC}
.section--paper2{background:var(--paper-2)}
.section--panel{background:var(--paper-3)}

.stack>*+*{margin-top:var(--sp-4)}
.stack-lg>*+*{margin-top:var(--sp-6)}
.flow>*+*{margin-top:var(--sp-3)}
.center{text-align:center}
.center-x{margin-inline:auto}
.wrap{display:flex;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.grid{display:grid;gap:var(--sp-5)}
.mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)}
.hide{display:none!important}
@media (min-width:900px){.hide\@lg{display:none!important}.show\@lg{display:revert!important}}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.section-head p{margin-top:var(--sp-2)}
.section-head--center{flex-direction:column;align-items:center;text-align:center}

.divider-label{display:flex;align-items:center;gap:var(--sp-4);color:var(--muted);font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.divider-label::before,.divider-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ============================ 5 · BUTTONS ============================ */
.btn{
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-size:var(--fs-cap);font-weight:600;
  letter-spacing:.03em;line-height:1;text-align:center;
  padding:.95em 1.6em;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--radius);
  cursor:pointer;transition:transform .12s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:18px;height:18px;flex:none}
/* Optischer Ausgleich: nachgestellter Pfeil rueckt den Text sonst aus der Mitte */
.btn svg:last-child{margin-right:-.8em}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:1.15em 2em;font-size:var(--fs-base)}
.btn--sm{padding:.6em 1em;font-size:var(--fs-sm)}
.btn--block{display:flex;width:100%}
.btn--secondary{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--accent{--btn-bg:var(--accent);--btn-fg:#fff;--btn-bd:var(--accent)}
.btn--accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;padding-inline:.5em}
.btn--ghost:hover{background:transparent;color:var(--accent)}
.btn--on-dark{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--on-dark.btn--secondary{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5)}
.btn--on-dark.btn--secondary:hover{background:#fff;color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media (max-width:479px){.btn-pair{grid-template-columns:1fr}}

/* Icon-Button (Header-Aktionen) */
.iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:none;background:transparent;color:currentColor;
  cursor:pointer;border-radius:var(--radius);transition:color .2s,background .2s;
}
.iconbtn:hover{color:var(--accent)}
.iconbtn svg{width:22px;height:22px}
.iconbtn__count{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  background:var(--accent);color:#fff;font-family:var(--font-body);
  font-size:10px;font-weight:700;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}

/* ============================ 6 · FORMULARE ============================ */
.field{display:block;margin-bottom:var(--sp-4)}
.field__label{display:block;font-size:var(--fs-cap);font-weight:600;color:var(--ink);margin-bottom:var(--sp-2)}
.field__label .req{color:var(--accent)}
.field__hint{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2)}
.input,.select,.textarea{
  width:100%;padding:.8em 1em;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  font-size:var(--fs-base);color:var(--text);transition:border-color .2s,box-shadow .2s;
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.textarea{min-height:130px;resize:vertical;line-height:1.6}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E665A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.5em}
.field-row{display:grid;gap:var(--sp-4)}
@media (min-width:600px){.field-row{grid-template-columns:1fr 1fr}}
.field-row--3{grid-template-columns:1fr}
@media (min-width:600px){.field-row--3{grid-template-columns:2fr 1fr 1fr}}
/* Adresszeile: PLZ braucht wenig Platz, der Ortsname viel (Feedback 14.08.) */
@media (min-width:600px){.field-row--adresse{grid-template-columns:.75fr 1.75fr 1.5fr}}

.checkbox,.radio{display:flex;gap:.7em;align-items:flex-start;cursor:pointer;font-size:var(--fs-cap);line-height:1.5;color:var(--muted)}
.checkbox input,.radio input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--accent);cursor:pointer}
.checkbox>span,.radio>span{flex:1;min-width:0}
.checkbox a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.input-group{display:flex}
.input-group .input{border-right:none;border-radius:var(--radius) 0 0 var(--radius)}
.input-group .btn{border-radius:0 var(--radius) var(--radius) 0;white-space:nowrap}

/* hCaptcha-Platzhalter */
.captcha{
  display:flex;align-items:center;gap:.8em;width:302px;max-width:100%;height:76px;
  padding:0 1em;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--paper-2);color:var(--muted);font-size:var(--fs-sm);
}
.captcha__box{width:28px;height:28px;border:2px solid var(--line-strong);border-radius:3px;flex:none}
.captcha__brand{margin-left:auto;text-align:right;font-size:11px;line-height:1.3;color:var(--muted-2)}
.captcha__brand b{display:block;color:var(--muted);font-family:var(--font-head)}

/* ============================ 7 · BADGES ============================ */
.badge{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.4em .7em;border-radius:var(--radius);
  background:var(--ink);color:#fff;line-height:1;
}
.badge--unikat{background:var(--ink);color:#fff}
.badge--unikat svg{width:13px;height:13px}
.badge--accent{background:var(--accent);color:#fff}
.badge--soft{background:var(--paper-3);color:var(--muted);border:1px solid var(--line)}
.badge--gold{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.badge--sold{background:var(--sold);color:#fff}
.badge--new{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.badge--outline{background:transparent;color:var(--ink);border:1px solid currentColor}

.pill{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border:1px solid var(--line-strong);border-radius:100px;font-size:var(--fs-sm);color:var(--muted);background:var(--surface);transition:border-color .2s,color .2s}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill--active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill--active:hover{color:#fff}

/* Chips (aktive Filter) */
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.4em .5em .4em .85em;background:var(--paper-3);border:1px solid var(--line);border-radius:100px;font-size:var(--fs-sm);color:var(--ink)}
.chip button{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border:none;background:var(--line-strong);color:var(--ink);border-radius:50%;cursor:pointer;font-size:11px;line-height:1;transition:background .2s}
.chip button:hover{background:var(--accent);color:#fff}

/* ============================ 8 · CARDS ============================ */
/* Werk-Karte (Shop/Home/Künstler) */
.artcard{position:relative;display:flex;flex-direction:column;background:transparent}
.artcard__media{position:relative;display:block;background:var(--paper-3);border:1px solid var(--line);overflow:hidden;aspect-ratio:4/5}
.artcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden}
.artcard__media--contain{background:var(--paper-3)}
.artcard__media--contain img{object-fit:contain}
.artcard:hover .artcard__media img{transform:scale(1.035)}
.artcard__fav{
  position:absolute;top:10px;right:10px;width:38px;height:38px;display:inline-flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.9);
  border:1px solid var(--line);border-radius:50%;color:var(--ink);cursor:pointer;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s,color .2s,background .2s;
  backdrop-filter:blur(2px);
}
.artcard__fav svg{width:18px;height:18px}
.artcard:hover .artcard__fav,.artcard__fav:focus-visible{opacity:1;transform:none}
.artcard__fav:hover,.artcard__fav.is-active{color:var(--accent)}
.artcard__fav.is-active svg{fill:var(--accent)}
@media (hover:none){.artcard__fav{opacity:1;transform:none}}
.artcard__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.artcard__body{padding-top:var(--sp-3);display:flex;flex-direction:column;gap:2px}
.artcard__artist{font-family:var(--font-body);font-size:var(--fs-cap);font-weight:600;color:var(--ink);letter-spacing:.01em}
.artcard__artist:hover{color:var(--accent)}
.artcard__title{font-family:var(--font-display);font-size:var(--fs-md);font-weight:400;font-style:italic;color:var(--text);line-height:1.3}
.artcard__meta{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.artcard__price{font-family:var(--font-head);font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-top:var(--sp-2)}
.artcard__price small{font-family:var(--font-body);font-weight:400;font-size:var(--fs-xs);color:var(--muted);display:block}
.artcard--sold .artcard__media{filter:saturate(.85)}
.artcard--sold .artcard__price{color:var(--muted)}
.artcard-link::after{content:"";position:absolute;inset:0}/* Karte klickbar, innere Links darüber via z-index */
/* Der Merkzettel-Button muss absolut bleiben (Regel oben) — als relatives Flex-Kind schob er
   jedes Kartenbild um seine Breite nach rechts (Feedback 13.08.: „Bilder alle nach rechts
   verschoben statt mittig"). Nur der Stapelkontext wird hier gesetzt. */
.artcard__artist{position:relative;z-index:1}
.artcard__fav{z-index:1}

/* Produktgrid */
.artgrid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.artgrid{gap:var(--sp-6)}}
@media (min-width:900px){.artgrid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.artgrid--4{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.artgrid--4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.artgrid--3.artgrid--wide{grid-template-columns:repeat(3,1fr)}}

/* Kategorie-/Sammlungskachel */
.tile{position:relative;display:flex;align-items:flex-end;min-height:220px;padding:var(--sp-5);overflow:hidden;background:var(--paper-3);border:1px solid var(--line);color:var(--ink)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,5,.72),rgba(9,8,5,.05) 60%);z-index:1}
.tile:hover img{transform:scale(1.05)}
.tile img{transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden}
.tile__inner{position:relative;z-index:2;color:#fff}
.tile__inner h3{color:#fff;font-family:var(--font-display);font-weight:400}
.tile__inner span{font-size:var(--fs-sm);color:rgba(255,255,255,.8)}
.tile--tall{min-height:340px}

/* Info-/Vorteilskarte */
.feature{display:flex;gap:var(--sp-4);align-items:flex-start}
.feature__icon{flex:none;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);background:var(--surface)}
.feature__icon svg{width:22px;height:22px}
.feature h4{font-family:var(--font-head);margin-bottom:2px}
.feature p{font-size:var(--fs-cap);color:var(--muted);line-height:1.55}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)}
.card--pad-lg{padding:var(--sp-6)}
.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)}

/* Definition-List / Katalogangaben */
/* Zitierfaehiger Leitsatz ueber der Detailliste (18.08.2026). Etwas groesser als die Liste,
   damit er als Satz gelesen wird und nicht als erste Tabellenzeile. */
.leitsatz{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text);margin:0 0 var(--sp-4)}
.speclist{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--border)}
.speclist>div{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--sp-3) 0;border-bottom:var(--border)}
@media (min-width:600px){.speclist>div{grid-template-columns:200px 1fr;gap:var(--sp-4)}}
.speclist dt{font-size:var(--fs-cap);font-weight:600;color:var(--muted);font-family:var(--font-body)}
.speclist dd{font-size:var(--fs-cap);color:var(--text);line-height:1.6}
.speclist dd a.link{color:var(--accent)} /* klickbare Namen einheitlich im Akzentrot (Feedback 11.08.) */
.speclist dd.is-longform{line-height:1.75}

/* ============================ 9 · HEADER ============================ */

.header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--border);transition:box-shadow .3s}
.header.is-stuck{box-shadow:var(--shadow-sm)}
/* Ausblenden animiert, Einblenden beim Hochscrollen sofort (Feedback 11.08.) */
.header.is-hidden{transform:translateY(-105%);box-shadow:none;transition:box-shadow .3s,transform .35s}
.header__bar{display:flex;align-items:center;gap:var(--sp-4);min-height:88px;transition:min-height .3s}
.header.is-compact .header__bar{min-height:66px}
.header__logo{display:flex;align-items:center;flex:none}
.header__logo img{height:74px;width:auto;transition:height .3s}
.header.is-compact .header__logo img{height:56px}
.header__nav{display:none}
@media (min-width:1000px){
  .header__nav{display:flex;align-items:center;gap:var(--sp-5);margin-inline:auto;flex-wrap:nowrap}
  .header__nav .navlink{white-space:nowrap} /* Menüpunkte nie umbrechen (Feedback 11.08.) */
}
@media (min-width:1000px) and (max-width:1240px){.header__nav{gap:var(--sp-4)}.header__nav .navlink{font-size:var(--fs-sm)}}
.navlink{position:relative;display:inline-flex;align-items:center;gap:.35em;font-size:var(--fs-cap);font-weight:500;letter-spacing:.02em;color:var(--ink);padding:.4em 0}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--accent);transition:right .25s var(--ease)}
.navlink:hover::after,.navlink[aria-current]::after{right:0}
.navlink svg{width:12px;height:12px;opacity:.7}
.header__actions{display:flex;align-items:center;gap:2px;margin-left:auto}
@media (min-width:1000px){.header__actions{margin-left:0}}
/* Auf schmalen Phones Header entlasten — Konto & Sprache stehen im Mobile-Menü */
@media (max-width:560px){
  .header__actions .langswitch{display:none}
  .header__actions .iconbtn--account{display:none}
}
@media (max-width:360px){.header__logo img{height:56px}}

/* Skip-Link (Tastatur): unsichtbar bis fokussiert */
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;transition:top .2s}
.skip-link:focus{top:8px}

/* Anker-Ziele nicht unter dem Sticky-Header verstecken (A–Z, #datenschutz …) */
[id]{scroll-margin-top:130px}

/* Sticky Buy-Bar (Produktseite, mobil): Kaufweg bleibt immer erreichbar */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:.65rem var(--sp-4) calc(.65rem + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--line-strong);
  box-shadow:0 -8px 24px -16px rgba(20,16,10,.35);
  transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s;
}
.buybar.is-visible{transform:none;visibility:visible}
.buybar__price{font-family:var(--font-head);font-weight:700;font-size:var(--fs-md);line-height:1.1;flex:none}
/* Pflichtangabe nach §§ 3, 6 PAngV — muss „deutlich lesbar" sein, deshalb 11,5 px statt 10 */
.buybar__price small{display:block;font-family:var(--font-body);font-weight:400;font-size:11.5px;line-height:1.35;color:var(--muted);white-space:nowrap}
.buybar .btn{flex:1;white-space:nowrap}
/* Kaufleiste jetzt auch auf dem Desktop (Auftrag 15.08.) — dort mittig im Raster,
   auf dem Telefon volle Breite mit Knöpfen von mindestens 48 px Höhe. */
.buybar__inner{width:100%;max-width:var(--container,1200px);margin:0 auto;display:flex;align-items:center;gap:var(--sp-3)}
.buybar__bild{width:44px;height:44px;object-fit:contain;background:var(--paper-3);border:1px solid var(--line);flex:none}
.buybar__werk{flex:1;min-width:0;display:none}
.buybar__titel{display:block;font-family:var(--font-head);font-size:var(--fs-base);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__meta{display:block;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__form{flex:none}
.buybar__btn{min-height:48px;white-space:nowrap}
/* Auf schmalen Telefonen passen Preis mit Pflichtangabe und beide Knoepfe nicht in eine Zeile
   (schon vorher lief die Leiste knapp ueber). Deshalb zwei Reihen: oben Werk und Preis,
   darunter die Knoepfe nebeneinander ueber die volle Breite. */
@media (max-width:560px){
  .buybar__inner{flex-wrap:wrap;row-gap:.5rem}
  .buybar__werk{display:block}
  .buybar__price{flex:none;margin-left:auto;text-align:right}
  .buybar__form{flex:1 1 calc(50% - .375rem)}
  .buybar__form .btn{width:100%}
  .buybar__btn{flex:1 1 calc(50% - .375rem)}
}
@media (min-width:960px){
  .buybar{padding-block:.7rem}
  .buybar__werk{display:block}
  .buybar .btn{flex:none}
  .buybar__price{margin-left:auto;font-size:var(--fs-lg)}
}
@media (max-width:959px){
  .buybar__bild{width:38px;height:38px}
  .buybar .buybar__btn{flex:1}
}
body.has-buybar .cookiebar{bottom:calc(var(--sp-4) + 76px)}
body.has-buybar .toast{bottom:calc(var(--sp-6) + 72px)}
@media (max-width:959px){
}

/* Touch-Ziele auf grober Zeigereingabe (≥44px, WCAG 2.5.8) */
@media (pointer:coarse){
  .azbar a{width:44px;height:44px}
  .chip button{width:24px;height:24px}
  .langswitch a,.langswitch__aktiv,.langswitch__aus{padding:.55em .85em}
  .gallery__tab,.tabs button{padding-top:.85em;padding-bottom:.85em}
}

/* Horizontale Kategorie-Chips (Shop mobil): Kategorien ohne Filter-Umweg */
.chiprow{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-2);margin-bottom:var(--sp-3);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chiprow::-webkit-scrollbar{display:none}
.chiprow .pill{flex:none}
@media (min-width:900px){.chiprow{display:none}}

/* Karten-Kaufweg (Merkliste): kleiner Direkt-Button unter der Karte */
.artcard__buy{margin-top:var(--sp-3);position:relative;z-index:1}

/* Sprachumschalter */
.langswitch{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:100px;overflow:hidden;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;margin-left:var(--sp-2)}
.langswitch a,.langswitch__aktiv,.langswitch__aus{padding:.35em .7em;color:var(--muted);line-height:1}
.langswitch a[aria-current],.langswitch__aktiv{background:var(--ink);color:#fff}

/* Mega-Menü (Sammlungen) */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper-2);
  border-top:var(--border);border-bottom:var(--border);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s var(--ease);z-index:55;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);padding-block:var(--sp-6)}
.mega__col h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted);margin-bottom:var(--sp-3);font-family:var(--font-body)}
.mega__col a{display:block;padding:.3em 0;font-size:var(--fs-cap);color:var(--text)}
.mega__col a:hover{color:var(--accent)}
.mega__feature{background:var(--ink);color:#fff;padding:var(--sp-5)}
.mega__feature .display{color:#fff;font-size:var(--fs-lg)}
@media (max-width:999px){.mega{display:none}}

/* Mobile Nav (Offcanvas) */
.burger{display:inline-flex}
@media (min-width:1000px){.burger{display:none}}
.mobilenav{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:var(--paper);z-index:120;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow-y:auto}
.mobilenav.is-open{transform:none;visibility:visible}
.mobilenav__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4);border-bottom:var(--border)}
.mobilenav__body{padding:var(--sp-4)}
.mobilenav a.m-link{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) 0;font-family:var(--font-head);font-size:var(--fs-md);color:var(--ink);border-bottom:var(--border)}
.mobilenav details summary{list-style:none;cursor:pointer}
.mobilenav details summary::-webkit-details-marker{display:none}
.mobilenav details[open] summary .chev{transform:rotate(180deg)}
.mobilenav .submenu a{display:block;padding:.5em 0 .5em var(--sp-4);font-family:var(--font-body);font-size:var(--fs-cap);color:var(--muted);border:none}

/* ============================ 10 · FOOTER ============================ */
.footer{background:var(--ink);color:#B9B2A5;font-size:var(--fs-cap)}
.footer a{color:#D4CEC2;transition:color .2s}
.footer a:hover{color:#fff}
.footer__top{padding-block:var(--sp-8)}
.footer__grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media (min-width:600px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer__logo img{height:64px;margin-bottom:var(--sp-4)}
.footer h5{color:#fff;font-family:var(--font-body);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--sp-4)}
.footer ul li{margin-bottom:.6em}
.footer__contact p{max-width:none;margin-bottom:.4em;color:#B9B2A5}
/* Ohne feste Groesse skalieren die Kontakt-SVGs auf Spaltenbreite (Feedback: "Icons zu gross") */
.footer__contact p svg{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:.35em;flex:none}
.footer__social{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.footer__social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:50%}
.footer__social a:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.footer__social svg{width:18px;height:18px}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--sp-4)}
.footer__bar .container{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:center;justify-content:space-between;font-size:var(--fs-sm);color:#8E8778}
.footer__pay{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.paylogo{height:26px;padding:0 .5em;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:3px;font-size:10px;font-weight:700;color:var(--ink);letter-spacing:.02em;font-family:var(--font-body)}

/* ================= 11 · OVERLAYS ================= */
.scrim{position:fixed;inset:0;background:rgba(9,8,5,.5);opacity:0;visibility:hidden;transition:opacity .3s;z-index:100;backdrop-filter:blur(1px)}
.scrim.is-open{opacity:1;visibility:visible}
body.no-scroll{overflow:hidden}

/* Slide-in-Warenkorb */
.cartdrawer{position:fixed;inset:0 0 0 auto;width:min(92vw,420px);background:var(--paper);z-index:130;transform:translateX(100%);visibility:hidden;transition:transform .38s var(--ease),visibility .38s;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.cartdrawer.is-open{transform:none;visibility:visible}
.cartdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:var(--border)}
.cartdrawer__head h3{font-family:var(--font-head)}
.cartdrawer__added{display:flex;align-items:center;gap:.6em;padding:var(--sp-3) var(--sp-5);background:var(--accent-tint);color:var(--accent-ink);font-size:var(--fs-cap);font-weight:600}
.cartdrawer__added svg{width:18px;height:18px}
.cartdrawer__body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5)}
.cartdrawer__foot{border-top:var(--border);padding:var(--sp-5);background:var(--paper-2)}
.mini-line{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:var(--border)}
.mini-line__media{width:72px;height:88px;flex:none;background:var(--paper-3);border:1px solid var(--line);object-fit:cover}
.mini-line__info{flex:1;min-width:0}
.mini-line__info .a{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.mini-line__info .t{font-family:var(--font-display);font-style:italic;font-size:var(--fs-cap);color:var(--muted)}
.mini-line__info .p{font-family:var(--font-head);font-weight:600;margin-top:2px}
.mini-line__remove{border:none;background:none;color:var(--muted-2);cursor:pointer;font-size:var(--fs-sm);align-self:flex-start}
.mini-line__remove:hover{color:var(--accent)}

/* Modal (Preisvorschlag / generisch) */
.modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:var(--sp-4);opacity:0;visibility:hidden;transition:opacity .3s;background:rgba(9,8,5,.55);backdrop-filter:blur(1px)}
.modal.is-open{opacity:1;visibility:visible}
.modal__panel{background:var(--paper);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);transform:translateY(12px);transition:transform .3s var(--ease)}
.modal.is-open .modal__panel{transform:none}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) 0}
.modal__head h3{font-family:var(--font-head)}
.modal__body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}

.modal-close,.drawer-close{border:none;background:none;color:var(--muted);cursor:pointer;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,color .2s;flex:none}
.modal-close:hover,.drawer-close:hover{background:var(--paper-3);color:var(--ink)}
.modal-close svg,.drawer-close svg{width:22px;height:22px}

/* Cookie-Consent */
.cookiebar{position:fixed;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);z-index:90;max-width:520px;background:var(--ink);color:#E4DFD5;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-5);transform:translateY(140%);transition:transform .45s var(--ease)}
.cookiebar.is-open{transform:none}
.cookiebar h4{color:#fff;font-family:var(--font-head);margin-bottom:var(--sp-2)}
.cookiebar p{font-size:var(--fs-sm);color:#B9B2A5;line-height:1.55;max-width:none}
.cookiebar p a{color:#fff;text-decoration:underline}
.cookiebar__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}

/* Newsletter-Popup */
.nlpop{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:var(--sp-4);opacity:0;visibility:hidden;transition:opacity .35s;background:rgba(9,8,5,.55);backdrop-filter:blur(1px)}
.nlpop.is-open{opacity:1;visibility:visible}
.nlpop__panel{position:relative;display:grid;grid-template-columns:1fr;background:var(--paper);width:100%;max-width:720px;box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);overflow:hidden;transform:scale(.97);transition:transform .35s var(--ease)}
.nlpop.is-open .nlpop__panel{transform:none}
/* Bildspalte des Popups: fuellt die ganze Panelhoehe (Feedback 19.08.2026: „eines, dass den Platz
   auch komplett ausfüllt"). Vorher blieb das Bild kuerzer als die Spalte — height:100% loest gegen
   einen Elternteil ohne eigene Hoehe zu auto auf, und darunter zeigte sich der dunkle Grund.
   Mit position:absolute im relativen Kasten haengt die Hoehe an der Rasterzeile, nicht am Bild. */
.nlpop__media{display:none;position:relative;overflow:hidden;background:var(--paper-3);min-height:100%}
.nlpop__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nlpop__body{padding:var(--sp-6)}
.nlpop__body .display{font-size:var(--fs-2xl)}
.nlpop .modal-close{position:absolute;top:8px;right:8px;z-index:2}
@media (min-width:640px){.nlpop__panel{grid-template-columns:1fr 1fr}.nlpop__media{display:block}}

/* Such-Overlay */
.searchpanel{position:fixed;inset:0 0 auto 0;z-index:125;background:var(--paper);box-shadow:var(--shadow);transform:translateY(-100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;border-bottom:var(--border)}
.searchpanel.is-open{transform:none;visibility:visible}
.searchpanel__inner{padding-block:var(--sp-6)}
.searchpanel__form{display:flex;align-items:center;gap:var(--sp-3);border-bottom:2px solid var(--ink);padding-bottom:var(--sp-3)}
.searchpanel__form input{flex:1;border:none;background:none;font-family:var(--font-display);font-size:var(--fs-xl);color:var(--ink)}
.searchpanel__form input:focus{outline:none}
.searchpanel__sug{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* Instant-Suche: Vorschlagsliste unter dem Suchfeld */
.suggest{margin-top:var(--sp-3);max-height:52vh;overflow-y:auto}
.suggest__group{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted-2);padding:.9em 0 .35em}
.suggest__item{display:flex;align-items:center;gap:var(--sp-3);padding:.55em .6em;border-radius:var(--radius);color:var(--ink)}
.suggest__item:hover,.suggest__item.is-active{background:var(--paper-3)}
.suggest__item .thumb{width:38px;height:46px;object-fit:cover;background:var(--paper-3);border:1px solid var(--line);flex:none}
.suggest__item .ico{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--accent)}
.suggest__item .ico svg{width:16px;height:16px}
.suggest__item small{display:block;color:var(--muted);font-size:var(--fs-sm)}
.suggest__item mark{background:none;color:var(--accent);font-weight:600}
.suggest__typo{font-size:var(--fs-sm);color:var(--muted);padding:.5em .6em}
.suggest__typo b{color:var(--accent)}

/* Zoom-Lens: echter Pan/Zoom */
.zoomlens{touch-action:none}
.zoomlens img{transition:transform .18s ease-out;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.zoomlens.is-zoomed img{cursor:grab}
.zoomlens.is-panning img{cursor:grabbing;transition:none}
.zoomlens__close{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.zoomlens__close:hover{background:rgba(255,255,255,.25)}
.zoomlens__close svg{width:20px;height:20px}
.zoomlens__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.zoomlens__nav:hover{background:rgba(255,255,255,.25)}
.zoomlens__nav svg{width:22px;height:22px}
.zoomlens__nav--prev{left:14px}
.zoomlens__nav--next{right:14px}
@media (max-width:719px){.zoomlens__nav{width:42px;height:42px}.zoomlens__nav--prev{left:8px}.zoomlens__nav--next{right:8px}}
.zoomlens__hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:var(--fs-xs);background:rgba(9,8,5,.6);padding:.45em .9em;border-radius:100px;pointer-events:none}

/* Express-Zahlung (Apple Pay / Google Pay) */
.expresspay{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.expresspay button{display:inline-flex;align-items:center;justify-content:center;gap:.45em;height:46px;border-radius:var(--radius);border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:var(--fs-cap);cursor:pointer;letter-spacing:.01em}
.expresspay button:hover{background:#000}
.expresspay .gpay{background:#fff;color:var(--ink)}
.expresspay .gpay:hover{background:var(--paper-3)}
.expresspay-note{display:flex;align-items:center;gap:var(--sp-3);margin:.6rem 0;color:var(--muted-2);font-size:var(--fs-xs)}
.expresspay-note::before,.expresspay-note::after{content:"";flex:1;height:1px;background:var(--line)}

/* Options-Liste (Rahmung) */
.optlist{display:grid;gap:.5rem}
.optlist label{display:flex;align-items:center;gap:.7em;padding:.75rem .9rem;border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;font-size:var(--fs-cap);background:var(--surface)}
.optlist label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.optlist input{accent-color:var(--accent);width:18px;height:18px;flex:none}
.optlist .opt-price{margin-left:auto;font-weight:600;white-space:nowrap}

/* Ehrliche Knappheit */
.scarcity{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-sm);color:var(--accent-ink)}
.scarcity svg{width:15px;height:15px}

/* Bewertungen */
.reviews-strip{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media (min-width:900px){.reviews-strip{grid-template-columns:repeat(3,1fr)}}
.review{border-left:2px solid var(--gold);padding-left:var(--sp-4)}
.review blockquote{font-family:var(--font-display);font-style:italic;font-size:var(--fs-md);line-height:1.5;color:var(--text)}
.review cite{display:block;margin-top:var(--sp-3);font-style:normal;font-size:var(--fs-sm);color:var(--muted)}
.rating{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-cap);color:var(--ink)}
.rating__stars{display:inline-flex;color:var(--gold)}
.rating__stars svg{width:16px;height:16px;fill:currentColor}
.trustbadge{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--line-strong);border-radius:var(--radius);padding:.55em .9em;font-size:var(--fs-sm);color:var(--muted);background:var(--surface)}
.trustbadge b{color:var(--ink)}

/* SEO-/Redaktionszone (Facetten-Landingpages, Shop-Fuß) */
.seo-zone{border-top:var(--border);padding-top:var(--sp-6);columns:1;max-width:none}
@media (min-width:900px){.seo-zone{columns:2;column-gap:var(--sp-8)}}
.seo-zone p{font-size:var(--fs-cap);color:var(--muted);line-height:1.75;max-width:none;break-inside:avoid;margin-bottom:1em}
.seo-zone h2,.seo-zone h3{column-span:all;margin-bottom:.75rem}
.facet-links{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* Lexikon */
.lex-entry{padding:var(--sp-6) 0;border-bottom:var(--border);display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media (min-width:800px){.lex-entry{grid-template-columns:220px 1fr}}
.lex-entry figure{margin:0}
.lex-entry figure img{border:1px solid var(--line);background:var(--paper-3)}
.lex-entry figcaption{font-size:var(--fs-xs);color:var(--muted-2);margin-top:.5rem}
.glossary dt{font-family:var(--font-head);font-weight:600;margin-top:var(--sp-4)}
.glossary dd{color:var(--muted);font-size:var(--fs-cap);line-height:1.7;max-width:68ch}

/* WhatsApp-Kontakt (dezent) */
.wa-link{display:inline-flex;align-items:center;gap:.6em;font-weight:600;color:var(--ink);font-size:var(--fs-cap)}
.wa-link svg{width:18px;height:18px;color:#1DA851}

/* Toast */
.toast{position:fixed;left:50%;bottom:var(--sp-6);transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:.9em 1.4em;border-radius:100px;font-size:var(--fs-cap);box-shadow:var(--shadow-lg);z-index:140;transition:transform .4s var(--ease);display:flex;align-items:center;gap:.6em}
.toast.is-open{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:#8FBF9B}

/* ================= 12 · KOMPONENTEN ================= */
/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:var(--fs-sm);color:var(--muted);padding-block:var(--sp-4)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb li{display:flex;align-items:center;gap:.5em}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--line-strong)}
.breadcrumb [aria-current]{color:var(--ink)}

/* Trust-Leiste */
.trustbar{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);padding:var(--sp-4);border:var(--border);border-radius:var(--radius);background:var(--paper-2)}
@media (min-width:700px){.trustbar{grid-template-columns:repeat(4,1fr)}}
.trustbar__item{display:flex;gap:.6em;align-items:center;font-size:var(--fs-sm);color:var(--muted);line-height:1.35}
.trustbar__item svg{width:22px;height:22px;color:var(--accent);flex:none}
.trustbar[style*="text-align:center"] .trustbar__item{justify-content:center}
/* Leiste mit DREI Merkmalen. Das Grundraster hat vier Spalten; bei drei Einträgen blieb die
   vierte leer, die Gruppe hing links, und jede Beschriftung wurde in eine Viertelbreite gepresst
   („Für das / gesamte / Sortiment"). Gemeldet am 20.08.2026 auf /gutschein/: „inhalt zentrieren". */
/* ---------------------------------------------------------------------------
   Großer Banner auf der Startseite (Feedback 20.08.2026).

   Ein Werk oder eine laufende Online-Ausstellung, breit und mit eigener Typografie. Die Fläche ist
   EIN Verweis — nicht Bild und Knopf getrennt, damit jeder Klick trifft. Der Knopf ist deshalb ein
   span und kein a: ein a im a ist ungültiges HTML und bricht die Tastaturbedienung.
   --------------------------------------------------------------------------- */
.banner-gross__flaeche{display:grid;gap:0;text-decoration:none;color:inherit;background:var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 48px -28px rgba(9,8,5,.55)}
@media (min-width:900px){.banner-gross__flaeche{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.banner-gross__bild{display:block;overflow:hidden;background:var(--paper-3);aspect-ratio:16/10}
@media (min-width:900px){.banner-gross__bild{aspect-ratio:auto;min-height:26rem}}
.banner-gross__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.banner-gross__flaeche:hover .banner-gross__bild img{transform:scale(1.03)}
.banner-gross__text{display:flex;flex-direction:column;gap:var(--sp-3);justify-content:center;padding:var(--sp-6);color:#E9E5DC}
@media (min-width:900px){.banner-gross__text{padding:var(--sp-8) var(--sp-7)}}
.banner-gross__titel{display:block;font-size:clamp(1.75rem,3.4vw,2.9rem);color:#fff;text-wrap:balance}
.banner-gross__unter{display:block;color:rgba(233,229,220,.78);font-size:var(--fs-sm);line-height:1.6;max-width:46ch}
.banner-gross__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2)}
.banner-gross__zusatz{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--gold)}
/* Der Knopf ist ein span — er erbt das Aussehen, aber nicht das Verhalten eines Verweises. */
.banner-gross__fuss .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.banner-gross__flaeche:hover .banner-gross__fuss .btn{background:#fff}
@media (prefers-reduced-motion:reduce){.banner-gross__bild img{transition:none}.banner-gross__flaeche:hover .banner-gross__bild img{transform:none}}

/* ---------------------------------------------------------------------------
   KI-generierte Bilder: Markierung unten rechts.

   Sie liegt IM Bild, nicht darunter — so bleibt sie beim Bild, auch wenn das Layout eng wird oder
   jemand einen Bildschirmausschnitt macht. Kontrast: dunkle, halbtransparente Fläche mit weißem
   Text, damit sie auf hellen wie dunklen Motiven lesbar bleibt.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Service-Kacheln mit Foto als Hintergrund (Feedback 21.08.2026).

   Der Verlauf laeuft von oben durchsichtig nach unten fast deckend: Das Motiv bleibt oben zu sehen,
   unten traegt es die Schrift. Rechts unten bleibt Platz frei — dort sitzt die eingebrannte
   KI-Marke im Bild, und Marke und Beschriftung sollen sich nicht ueberlagern.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Kasse: Einwilligungen und Abschlussknopf (Feedback 21.08.2026).

   Die Haken lagen an zwei Stellen, getrennt durch die Bestelluebersicht, und man musste aus einem
   Sternchen schliessen, was Pflicht ist. Jetzt ein Block, eine Spalte, jede Zeile beschriftet.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Konto: Inhaltsflaeche und Adressen (Feedback 21.08.2026).

   Drei Beanstandungen mit derselben Wurzel: WooCommerce zentriert und begrenzt seine
   Kontoinhalte, das Theme nicht. Dadurch standen Bloecke nicht am linken Rand, und unten fehlte
   Luft zum schwarzen Newsletter-Fuss.
   --------------------------------------------------------------------------- */
/* WooCommerce legt den Kontoinhalt als rechte Spalte an (`float:right;width:68%` in
   woocommerce-layout.css) — dieses Theme fuehrt die Navigation aber als Reiterleiste darueber.
   Folge: Der Block stand um ein Drittel eingeruegt und der Abschnitt hatte wegen des Floats
   keine Hoehe, also auch keinen Abstand zum Fuss (Feedback 21.08.2026, 09:49 und 09:53).
   Die Regel braucht ZWEI Klassen, sonst gewinnt WooCommerce nach Spezifitaet. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-MyAccount-content{float:none;width:100%;max-width:none;margin:0;text-align:left;
  padding-bottom:var(--sp-6)}
.woocommerce-MyAccount-content>*{margin-left:0;margin-right:0}
.woocommerce-MyAccount-content p{max-width:72ch}
/* WooCommerce-Float-Spalten im Konto abschalten — sie kollidieren mit den Rastern des Themes. */
.woocommerce-MyAccount-content .u-columns,
.woocommerce-MyAccount-content .col2-set{display:block;width:auto}
.woocommerce-MyAccount-content .col-1,
.woocommerce-MyAccount-content .col-2{float:none;width:auto;padding:0}
/* Unten Luft, damit der Inhalt nicht am dunklen Fuss klebt. */
.woocommerce-account .section--paper2{padding-bottom:var(--sp-8)}

/* Archivfilter auf /verkaufte-werke/ — Seitenleiste wie im Shop (Feedback 21.08.2026). */
.verkauft-filter{display:flex;flex-direction:column;gap:var(--sp-4)}
.verkauft-filter__titel{margin:0 0 .2rem;font-family:var(--font-head);font-size:var(--fs-md)}
.verkauft-filter .field{width:100%}
.verkauft-filter .select{width:100%}

/* Werkuebersicht auf der Preisvorschlagsseite (Feedback 21.08.2026). */
.vorschlagswerk{display:flex;gap:var(--sp-4);align-items:flex-start;border:var(--border);
  border-radius:var(--radius);background:var(--paper-2);padding:var(--sp-4);margin-top:var(--sp-4)}
.vorschlagswerk__bild{flex:none;width:92px;display:block;background:var(--paper-3);border-radius:calc(var(--radius) / 1.5);overflow:hidden}
.vorschlagswerk__bild img{width:100%;height:auto;display:block}
.vorschlagswerk__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vorschlagswerk__titel{font-family:var(--font-head);font-size:var(--fs-md);color:inherit;text-decoration:none}
.vorschlagswerk__titel:hover{text-decoration:underline}
.vorschlagswerk__preis{margin-top:.35rem;font-family:var(--font-display);color:var(--accent)}
@media (max-width:479px){.vorschlagswerk{flex-direction:column}.vorschlagswerk__bild{width:120px}}

.kontoadressen{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
@media (min-width:700px){.kontoadressen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kontoadressen__karte{border:var(--border);border-radius:var(--radius);background:var(--paper);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.kontoadressen__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.kontoadressen__titel{margin:0;font-family:var(--font-head);font-size:var(--fs-md)}
.kontoadressen__text{font-style:normal;line-height:1.6;color:var(--ink)}
.kontoadressen__leer{margin:0}

/* Kein Flexlayout im Fieldset: Ein <legend> wird vom Browser an den oberen Rahmen gesetzt und
   ragte dort halb aus dem Kasten heraus (Feedback 21.08.2026, 11:08). Als Float ist die
   Legende ein gewoehnlicher Block und sitzt sauber innerhalb der Polsterung. */
.einwilligungen{border:var(--border);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5) var(--sp-4);
  margin:0 0 var(--sp-5);background:var(--paper-2)}
.einwilligungen::after{content:'';display:block;clear:both}
.einwilligungen>*+*{margin-top:var(--sp-3)}
.einwilligungen__titel{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:600;
  float:left;width:100%;padding:0;margin:0 0 var(--sp-3);color:var(--ink)}
.einwilligungen__zeile{align-items:flex-start;gap:.65em;line-height:1.5}
.einwilligungen__zeile input[type=checkbox]{margin-top:.2em;flex:none}
.einwilligungen__pflicht,.einwilligungen__frei{display:inline-block;margin-left:.3em;padding:.1em .5em;
  border-radius:100px;font-size:.72em;font-weight:600;letter-spacing:.02em;white-space:nowrap;vertical-align:.06em}
.einwilligungen__pflicht{background:var(--accent-tint);color:var(--accent)}
.einwilligungen__frei{background:var(--paper-3);color:var(--muted)}
.einwilligungen__fuss{margin:.2rem 0 0}
/* Der Verweis auf die Datenschutzerklaerung war in der gedaempften Fussnote kaum als Link zu
   erkennen (Feedback 21.08.2026, 11:08) — jetzt in Textfarbe und unterstrichen wie oben. */
.einwilligungen__fuss a,.woocommerce-privacy-policy-text a{color:var(--ink);text-decoration:underline;
  text-underline-offset:.15em;font-weight:500}
.einwilligungen__fuss a:hover,.woocommerce-privacy-policy-text a:hover{color:var(--accent)}

/* Bestelldetails im Konto — Positionen mit Bild, Angaben und Zertifikat
   (Feedback 21.08.2026, 11:54: „besser ausgebaut … mit Foto und kurzer Info“). */
.bestellposten{max-width:820px;margin-top:var(--sp-4);border-top:1px solid var(--line)}
.bestellposten__zeile{display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.bestellposten__bild{flex:none;width:96px;height:120px;background:var(--paper-3);
  border:1px solid var(--line);display:block;overflow:hidden}
.bestellposten__bild img{width:100%;height:100%;object-fit:cover;display:block}
.bestellposten__info{flex:1;min-width:0}
.bestellposten__kuenstler{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.bestellposten__titel{display:block;font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-cap);color:var(--ink);text-decoration:none;margin-top:1px}
a.bestellposten__titel:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.15em}
.bestellposten__angaben,.bestellposten__meta{margin-top:.3rem}
.bestellposten__meta p{margin:0}
.bestellposten__knoepfe{margin-top:.7rem;gap:.4rem}
.bestellposten__preis{flex:none;text-align:right;font-family:var(--font-head);font-weight:600}
.bestellposten__menge{display:block;font-weight:400}

/* Zwei Klassen, weil `.card{max-width:100%}` weiter unten im Stylesheet sonst gewinnt. */
.bestellsummen.card{max-width:420px;margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5)}

.bestellsteuer,.bestellnotizen{max-width:820px;margin-top:var(--sp-5)}
.bestellsteuer__titel{font-size:var(--fs-base);margin:0 0 .6rem}
.bestellsteuer__liste{margin:0;display:grid;gap:.35rem .9rem}
.bestellsteuer__liste>div{display:grid;grid-template-columns:11rem 1fr;gap:.9rem;align-items:baseline}
.bestellsteuer__liste dt{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.bestellsteuer__liste dd{margin:0;font-size:var(--fs-sm)}
.bestellnotizen__eintrag{padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.bestellnotizen__eintrag p{margin:.2rem 0 0}

@media (max-width:640px){
  .bestellposten__zeile{flex-wrap:wrap}
  .bestellposten__preis{text-align:left;width:100%}
  .bestellsteuer__liste>div{grid-template-columns:1fr}
  .bestellsteuer__liste dt{margin-top:.4rem}
}

/* Gutscheinfeld in der Bestelluebersicht der Kasse (Feedback 21.08.2026, 11:07). */
.gutscheinfeld{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.gutscheinfeld__zeile{display:block}
.gutscheinfeld__titel{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:.4rem}
.gutscheinfeld__eingabe{display:flex;gap:.5rem;align-items:stretch}
.gutscheinfeld__eingabe .input{flex:1;min-width:0}
.gutscheinfeld__eingabe .btn{flex:none;white-space:nowrap}
.gutscheinfeld__aktiv{margin:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.gutscheinfeld__weg{background:none;border:none;padding:0;font:inherit;color:var(--muted);
  text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
.gutscheinfeld__weg:hover{color:var(--accent)}

/* Abschlussknopf: eine Flaeche fuer Knopf und Hinweis, damit der Satz wirklich unter der Mitte
   des Knopfes sitzt und nicht in der Mitte des umgebenden Kastens. */
.bestellabschluss{display:flex;flex-direction:column;align-items:stretch;margin-top:var(--sp-4)}
/* max-width:none ist der eigentliche Punkt: Absaetze im Theme haben eine Lesebreite (hier 545 px),
   der Knopf ist 622 px breit. Beide linksbuendig — dadurch sass der Satz 77 px neben der Knopfmitte,
   genau wie am 21.08.2026 gemeldet („der text steht nicht zentriert unter dem Button"). */
.bestellabschluss__hinweis{margin:.6rem 0 0;max-width:none;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
/* Die ID-Regel `.woocommerce #place_order` im Theme setzt background auf var(--ink) und schlaegt jede
   reine Klassenregel. Deshalb steht der Verlauf hier mit derselben Spezifitaet. */
.woocommerce #place_order.bestellknopf,
.bestellknopf{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;
  padding:1.05em 1.4em;border:0;border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-md);font-weight:600;letter-spacing:.01em;
  color:#fff;background:linear-gradient(180deg,#8d2634 0%,var(--accent) 55%,#5d1922 100%);
  box-shadow:0 10px 24px -12px rgba(110,30,40,.65);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s}
.bestellknopf svg{width:19px;height:19px;flex:none;opacity:.9}
.bestellknopf__summe{margin-left:.15em;padding-left:.7em;border-left:1px solid rgba(255,255,255,.32);
  font-family:var(--font-display);font-size:1.02em}
.woocommerce #place_order.bestellknopf:hover,
.bestellknopf:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(110,30,40,.7);filter:saturate(108%);
  background:linear-gradient(180deg,#9c2b3a 0%,#7a2230 55%,#661d26 100%)}
.bestellknopf:active{transform:translateY(0);box-shadow:0 6px 16px -10px rgba(110,30,40,.7)}
.bestellknopf:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:479px){.bestellknopf{font-size:var(--fs-sm);padding:.95em 1em;flex-wrap:wrap}
  .bestellknopf__summe{border-left:0;padding-left:0;margin-left:0;flex-basis:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.bestellknopf{transition:none}.bestellknopf:hover{transform:none}}

.service-kachel{border-radius:var(--radius);overflow:hidden;background:var(--paper-2);border:var(--border)}
.service-kachel__flaeche{position:relative;display:block;min-height:19rem;text-decoration:none;color:inherit}
.service-kachel__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.service-kachel--foto{border-color:transparent}
.service-kachel--foto .service-kachel__flaeche::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,8,5,.10) 0%,rgba(9,8,5,.42) 42%,rgba(9,8,5,.86) 100%)}
.service-kachel--foto:hover .service-kachel__bild{transform:scale(1.04)}
.service-kachel__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:.45rem;
  height:100%;justify-content:flex-end;padding:1.5rem 1.5rem 1.4rem}
/* Rechts unten Platz fuer die eingebrannte Marke */
.service-kachel--foto .service-kachel__mehr{padding-right:9.5rem}
.service-kachel__symbol{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;
  border-radius:50%;margin-bottom:.35rem}
.service-kachel__symbol svg{width:20px;height:20px}
.service-kachel__titel{font-family:var(--font-head);font-size:var(--fs-lg);line-height:1.15}
.service-kachel__unter{font-size:var(--fs-sm);line-height:1.55}
.service-kachel__mehr{font-size:var(--fs-sm);font-weight:600;margin-top:.35rem}
/* Mit Foto: helle Schrift auf dem Verlauf */
.service-kachel--foto .service-kachel__text{color:#fff}
.service-kachel--foto .service-kachel__symbol{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28)}
.service-kachel--foto .service-kachel__unter{color:rgba(255,255,255,.82)}
.service-kachel--foto .service-kachel__mehr{color:#fff}
.service-kachel--foto:hover .service-kachel__mehr{text-decoration:underline}
/* Ohne Foto: gewoehnliche helle Karte, damit keine leere dunkle Flaeche entsteht */
.service-kachel:not(.service-kachel--foto) .service-kachel__flaeche{min-height:0}
.service-kachel:not(.service-kachel--foto) .service-kachel__symbol{background:var(--accent-tint);color:var(--accent)}
.service-kachel:not(.service-kachel--foto) .service-kachel__unter{color:var(--muted)}
.service-kachel:not(.service-kachel--foto) .service-kachel__mehr{color:var(--accent)}
@media (max-width:479px){.service-kachel__flaeche{min-height:16rem}.service-kachel--foto .service-kachel__mehr{padding-right:8rem}}
@media (prefers-reduced-motion:reduce){.service-kachel__bild{transition:none}.service-kachel--foto:hover .service-kachel__bild{transform:none}}

.kibild{position:relative;display:block;overflow:hidden;border-radius:var(--radius)}
.kibild img{display:block;width:100%;height:100%;object-fit:cover}
.kibild__marke{position:absolute;right:.5rem;bottom:.5rem;z-index:1;padding:.28em .6em;border-radius:100px;
  background:rgba(9,8,5,.66);color:#fff;font-size:.7rem;line-height:1.25;letter-spacing:.02em;
  font-family:var(--font-body);white-space:nowrap;backdrop-filter:saturate(140%) blur(2px);
  border:1px solid rgba(255,255,255,.22)}
@media (max-width:479px){.kibild__marke{font-size:.64rem;right:.35rem;bottom:.35rem}}
/* Im Druck ohne Transparenz — sonst verschwindet der Hinweis. */
@media print{.kibild__marke{background:#000;border-color:#000;backdrop-filter:none}}

.trustbar--3{grid-template-columns:1fr}
@media (min-width:700px){.trustbar--3{grid-template-columns:repeat(3,auto);justify-content:center;gap:var(--sp-6)}}

.grid--feat3{grid-template-columns:repeat(3,1fr)}
@media (max-width:899px){.grid--feat3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
/* Merkliste: Entfernen als kleines X oben rechts (Feedback 13.08.) */
.mini-line{position:relative}
.mini-line__x{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.mini-line__x:hover{color:var(--accent);border-color:var(--accent)}
/* "Mehr anzeigen" dezent als Textlink statt Button (Feedback 11.08.) */
[data-clamp-toggle]{background:none;border:none;padding:.2em 0;cursor:pointer;color:var(--accent);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px}
[data-clamp-toggle]:hover{color:var(--ink)}
/* Pagination ansprechender (Feedback 11.08./12.08.: kein WC-Aussenrahmen, Zahlen exakt mittig).
   Hohe Spezifität nötig — das WooCommerce-Core-CSS (.woocommerce nav... ul li a) setzt sonst display:block + padding. */
.woocommerce-pagination ul.page-numbers,nav.woocommerce-pagination ul{border:none!important;display:flex;gap:.45rem;justify-content:center;align-items:center;list-style:none;margin:0;padding:0}
.woocommerce-pagination ul.page-numbers li,nav.woocommerce-pagination ul li{border:none!important;float:none!important;overflow:visible;margin:0}
.woocommerce-pagination a.page-numbers,.woocommerce-pagination span.page-numbers,
nav.woocommerce-pagination ul li a,nav.woocommerce-pagination ul li span{display:inline-flex!important;align-items:center;justify-content:center;min-width:42px!important;height:42px;padding:0 .6em!important;line-height:1!important;border:1px solid var(--line-strong);border-radius:100px;background:var(--surface);color:var(--muted);font-size:var(--fs-sm);text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.woocommerce-pagination a.page-numbers:hover,nav.woocommerce-pagination ul li a:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.woocommerce-pagination span.page-numbers.current,nav.woocommerce-pagination ul li span.current{background:var(--ink)!important;border-color:var(--ink);color:#fff!important;font-weight:600}
.woocommerce-pagination span.page-numbers.dots{border:none;background:none;min-width:auto!important}
/* Hero-Headline besser lesbar: Schrift der Abschnittstitel (Feedback 11.08.) */
.hero .display,.hero h1.display{font-family:var(--font-head);letter-spacing:-.01em}
/* FAQ/Glossar kompakter (Feedback 11.08.) */
details.lex-entry summary{padding:.35rem 0!important}
details.lex-entry > p,details.lex-entry div p{margin:0 0 .6rem}
#faq details.lex-entry,#glossar .glossary__item{padding-top:.15rem;padding-bottom:.15rem}
.glossary__item dd{margin-bottom:.5rem}

/* Slider (horizontales Scroll-Snap) */
.slider{position:relative}
.slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp-3);scrollbar-width:thin}
.slider__track>*{scroll-snap-align:start}
.slider__track::-webkit-scrollbar{height:6px}
.slider__track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
@media (min-width:600px){.slider__track{grid-auto-columns:40%}}
@media (min-width:900px){.slider__track{grid-auto-columns:23%}}
.slider__nav{display:none;gap:var(--sp-2)}
@media (min-width:900px){.slider__nav{display:flex}}
.slider__btn{width:44px;height:44px;border:1px solid var(--line-strong);background:var(--surface);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.slider__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.slider__btn svg{width:20px;height:20px}

/* Hero — Werk wird NIE beschnitten: contain auf dunklem Grund */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__grid{display:grid;gap:var(--sp-6);align-items:center;padding-block:var(--sp-8)}
@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr;padding-block:6rem;gap:var(--sp-8)}}
.hero__inner{position:relative;z-index:2;max-width:640px}
.hero .display{color:#fff;font-size:clamp(2.2rem,1rem + 5vw,3.75rem)}
.hero p{color:rgba(255,255,255,.85);max-width:46ch}
/* Heller Grund statt fast schwarzem Verlauf (Feedback 19.08.2026: „helleren Hintergrund für das
   Bild"). Vorher #171310 auf #0d0b08 mit dunklem Innenschatten — ein Blatt auf hellem Papier
   sass darin wie in einem schwarzen Rahmen. Jetzt liest der Kasten wie eine Montage auf Karton. */
.hero__art{position:relative;background:linear-gradient(160deg,var(--paper),var(--paper-3));border:1px solid rgba(255,255,255,.22);padding:clamp(1rem,3vw,2rem);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero__art img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block;filter:drop-shadow(0 10px 18px rgba(9,8,5,.18))}
.hero__art figcaption{position:absolute;left:0;right:0;bottom:-1.9rem;text-align:center;font-size:var(--fs-xs);color:rgba(255,255,255,.55);letter-spacing:.04em}
@media (max-width:899px){.hero__art{margin-bottom:1.5rem}.hero__art figcaption{position:static;margin-top:.75rem}}

/* Storytelling-Split */
.split{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-8)}.split--media-right .split__media{order:2}}
.split__media{background:var(--paper-3);border:1px solid var(--line);aspect-ratio:4/3;overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover}
/* Bildspalte in eigener Höhe, oben ausgerichtet (Feedback 19.08.2026: „den komischen rand unten
   entfernen. Lieber bild oben in einer zeile bündig mit ---über uns").
   Ursache des Randes: .split__media erzwingt 4:3 mit Hintergrundfarbe; ein Bild mit height:auto
   endet darin höher, und darunter blieb der Hintergrund als Streifen stehen. Hier bekommt das Bild
   sein eigenes Seitenverhältnis, der Kasten keine Fläche mehr. */
.split--media-eigen{align-items:start}
.split--media-eigen .split__media{aspect-ratio:auto;background:transparent}
.split--media-eigen .split__media img{height:auto;object-fit:initial}

/* Budget-Einstiege */
.budgetgrid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:700px){.budgetgrid{grid-template-columns:repeat(3,1fr)}}
.budgetcard{display:flex;flex-direction:column;justify-content:space-between;min-height:180px;padding:var(--sp-5);border:1px solid var(--line-strong);background:var(--surface);transition:background .3s,color .3s,border-color .3s}
.budgetcard:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.budgetcard:hover .budgetcard__k,.budgetcard:hover h3{color:#fff}
.budgetcard__k{font-family:var(--font-display);font-size:clamp(1.9rem,7vw,3rem);line-height:1;color:var(--ink)}
.budgetcard span{font-size:var(--fs-sm);color:var(--muted)}
.budgetcard:hover span{color:rgba(255,255,255,.75)}

/* Filter-Sidebar / Offcanvas */
.shop-layout{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media (min-width:900px){.shop-layout{grid-template-columns:260px 1fr;gap:var(--sp-7)}}
.filters{background:var(--surface)}
@media (max-width:899px){
  .filters{position:fixed;inset:0 0 0 auto;width:min(90vw,340px);z-index:120;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;overflow-y:auto;box-shadow:var(--shadow-lg);padding:var(--sp-4)}
  .filters.is-open{transform:none;visibility:visible}
}
.filter-group{border-bottom:var(--border);padding-block:var(--sp-4)}
.filter-group>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-family:var(--font-head);font-size:var(--fs-cap);font-weight:600;color:var(--ink)}
.filter-group>summary::-webkit-details-marker{display:none}
.filter-group[open]>summary .chev{transform:rotate(180deg)}
.filter-group__body{padding-top:var(--sp-3)}
.filter-opt{display:flex;align-items:center;gap:.6em;padding:.28em 0;font-size:var(--fs-cap);color:var(--muted);cursor:pointer}
.filter-opt input{width:18px;height:18px;accent-color:var(--accent)}
.filter-opt .count{margin-left:auto;font-size:var(--fs-xs);color:var(--muted-2)}
.chev{width:14px;height:14px;transition:transform .2s;flex:none}

/* Range-Slider (Preis) — reine Optik */
.range{position:relative;height:34px;margin-top:var(--sp-2)}
.range__bar{position:absolute;top:15px;left:0;right:0;height:3px;background:var(--line-strong);border-radius:2px}
.range__fill{position:absolute;top:15px;height:3px;background:var(--accent);border-radius:2px}
.range__thumb{position:absolute;top:9px;width:16px;height:16px;background:var(--surface);border:2px solid var(--accent);border-radius:50%;box-shadow:var(--shadow-sm)}

/* Toolbar (Sortierung/Zähler) */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);justify-content:space-between;padding-block:var(--sp-4);border-bottom:var(--border);margin-bottom:var(--sp-5)}
.toolbar__count{font-size:var(--fs-cap);color:var(--muted)}
.toolbar__count b{color:var(--ink)}

/* Produktseite */
.pdp{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media (min-width:960px){.pdp{grid-template-columns:1.15fr .85fr;gap:var(--sp-8);align-items:start}}
.gallery__stage{position:relative;background:var(--paper-3);border:1px solid var(--line);overflow:hidden;cursor:zoom-in}
.gallery__stage img{width:100%;height:auto;display:block}
/* „Im Raum": Werk maßstäblich an einer Wand statt formatfüllend */
/* Referenzbild "Im Raum" ohne Kunst-Inszenierung: nur das Foto selbst (Feedback 11.08. R25b) */
.gallery__stage--room{cursor:zoom-in}
.gallery__zoomhint{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:.4em .7em;font-size:var(--fs-xs);color:var(--muted);border-radius:100px}
.gallery__zoomhint svg{width:14px;height:14px}
.gallery__thumbs{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.gallery__thumb{width:74px;height:88px;background:var(--paper-3);border:1px solid var(--line);object-fit:cover;cursor:pointer;transition:border-color .2s;padding:4px}
.gallery__thumb.is-active,.gallery__thumb:hover{border-color:var(--ink)}
/* Festes Bildprogramm (Sotheby's-Buy-Now-Standard): Label unter jedem Thumb */
.gallery__thumbwrap{display:flex;flex-direction:column;align-items:center;gap:3px;width:74px}
/* Team-Porträts (19.08.2026). Die Aufnahmen sind im Querformat und die Person sitzt jeweils rechts
   der Mitte — deshalb quadratischer Anschnitt mit object-position rechts der Mitte, sonst stünde das
   Gesicht am Rand. */
.teamfoto{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% 22%;border:1px solid var(--line);background:var(--paper-3);display:block}
/* Marke an der Im-Raum-Miniatur (18.08.2026). Sie stand vorher in einem eigenen Reiter und war
   damit versteckt; in der Reihe braucht sie eine Kennzeichnung, damit sie nicht fuer eine weitere
   Werkansicht gehalten wird. */
.gallery__thumbwrap--raum{position:relative}
.gallery__marke{position:absolute;left:50%;transform:translateX(-50%);bottom:-2px;background:var(--ink);color:#fff;font-size:9px;letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;border-radius:2px;white-space:nowrap;pointer-events:none}
.gallery__thumbwrap figcaption{font-size:10px;color:var(--muted);letter-spacing:.02em;text-align:center;line-height:1.25}
.gallery__thumbwrap:has(.is-active) figcaption{color:var(--ink);font-weight:600}
/* Raum-Ansicht: Maßstabsbezug statt AR (Marktstandard 2026) */
.gallery__roomnote{display:none;position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:.4em .7em;font-size:var(--fs-xs);color:var(--muted);border-radius:100px}
.gallery__tabs{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);border-bottom:var(--border)}
.gallery__tab{padding:.5em 0;font-size:var(--fs-cap);font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none}
.gallery__tab.is-active{color:var(--ink);border-color:var(--accent)}
.pdp__sticky{position:sticky;top:calc(var(--header-h) - 20px)}
@media (max-width:959px){.pdp__sticky{position:static}}
.price{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:700;color:var(--ink);line-height:1}
.price__note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2);line-height:1.5}
.price__ship{color:var(--ok);font-weight:600}
.tax-note{display:flex;gap:.6em;padding:var(--sp-3);background:var(--paper-3);border-left:2px solid var(--gold);font-size:var(--fs-sm);color:var(--muted);line-height:1.5;border-radius:0 var(--radius) var(--radius) 0}

/* Zoom-Lens */
.zoomlens{position:fixed;inset:0;z-index:135;background:rgba(9,8,5,.92);display:grid;place-items:center;padding:var(--sp-5);opacity:0;visibility:hidden;transition:opacity .3s}
.zoomlens.is-open{opacity:1;visibility:visible}
.zoomlens img{width:auto;height:auto;max-width:100%;max-height:90vh;object-fit:contain;cursor:zoom-out}

/* Beratungsblock */
.advice{background:var(--paper-3);border:1px solid var(--line);padding:var(--sp-5)}
.advice__row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}
.advice__contact{display:inline-flex;align-items:center;gap:.6em;font-weight:600;color:var(--ink);font-size:var(--fs-cap)}
.advice__contact svg{width:18px;height:18px;color:var(--accent)}

/* A–Z-Register */
.azbar{display:flex;flex-wrap:wrap;gap:.25em;justify-content:center}
.azbar a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);transition:background .2s,color .2s}
.azbar a:hover,.azbar a.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.azbar a.is-empty{color:var(--muted-2);pointer-events:none;opacity:.5}

.artist-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:var(--border)}
.artist-row__name{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--ink)}
.artist-row__name:hover{color:var(--accent)}
.artist-row__dates{font-size:var(--fs-sm);color:var(--muted)}
.artist-row__count{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}

.az-letter{font-family:var(--font-display);font-size:var(--fs-2xl);color:var(--accent);border-bottom:2px solid var(--line);padding-bottom:var(--sp-2);margin-top:var(--sp-6)}

/* Tabelle (Warenkorb) */
.carttable{width:100%;border-collapse:collapse}
.carttable th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding:var(--sp-3) var(--sp-3);border-bottom:2px solid var(--line-strong)}
.carttable td{padding:var(--sp-4) var(--sp-3);border-bottom:var(--border);vertical-align:top}
.carttable th:last-child,.carttable td:last-child{text-align:right}
@media (max-width:719px){
  .carttable thead{display:none}
  .carttable,.carttable tbody,.carttable tr,.carttable td{display:block;width:100%}
  .carttable tr{border-bottom:var(--border);padding:var(--sp-3) 0}
  .carttable td{border:none;padding:.2em var(--sp-3);text-align:left!important}
}

/* Summen-Panel */
.summary-row{display:flex;justify-content:space-between;gap:var(--sp-4);padding:.5em 0;font-size:var(--fs-cap);color:var(--muted)}
.summary-row--total{border-top:var(--border);margin-top:var(--sp-3);padding-top:var(--sp-3);font-size:var(--fs-md);color:var(--ink);font-family:var(--font-head);font-weight:700}
.summary-row--total span:last-child{font-size:var(--fs-lg)}

/* Stepper (Checkout) */
.steps{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.steps li{display:flex;align-items:center;gap:.6em;font-size:var(--fs-cap);color:var(--muted)}
.steps li::after{content:"";width:24px;height:1px;background:var(--line-strong);margin-left:var(--sp-2)}
.steps li:last-child::after{display:none}
.steps__n{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:600}
.steps li.is-active{color:var(--ink);font-weight:600}
.steps li.is-active .steps__n{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Account-Tabs — mobil horizontal scrollbar statt mehrzeilig */
.tabs{display:flex;gap:var(--sp-4);border-bottom:var(--border);margin-bottom:var(--sp-5);flex-wrap:wrap}
.tabs button{padding:.7em 0;font-family:var(--font-head);font-weight:600;font-size:var(--fs-cap);color:var(--muted);border:none;background:none;border-bottom:2px solid transparent;cursor:pointer}
.tabs button.is-active{color:var(--ink);border-color:var(--accent)}
@media (max-width:719px){
  .tabs:not([data-tabs-vertical]){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs:not([data-tabs-vertical])::-webkit-scrollbar{display:none}
  .tabs:not([data-tabs-vertical]) button{white-space:nowrap;flex:none}
}

/* Bestellstatus-Timeline (Bestätigung & Konto) */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);margin:var(--sp-4) 0}
.timeline li{position:relative;text-align:center;font-size:var(--fs-xs);color:var(--muted);padding-top:26px;line-height:1.35}
.timeline li::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);z-index:1}
.timeline li:not(:first-child)::after{content:"";position:absolute;top:12px;right:50%;width:100%;height:2px;background:var(--line-strong)}
.timeline li.is-done{color:var(--ink)}
.timeline li.is-done::before{background:var(--ok);border-color:var(--ok)}
.timeline li.is-done:not(:first-child)::after{background:var(--ok)}
.timeline li.is-active{color:var(--ink);font-weight:600}
.timeline li.is-active::before{border-color:var(--ok)}

/* Sammelgebiete: Pill-Toggles (Präferenzprofil) */
.prefgroup{margin-bottom:var(--sp-5)}
.prefgroup h4{font-size:var(--fs-cap);margin-bottom:var(--sp-3)}
.prefgroup .cluster{gap:var(--sp-2)}
button.pill{cursor:pointer;font-family:var(--font-body)}

/* Gespeicherte Suchen / Alert-Zeilen */
.alert-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:var(--border)}
.alert-row__icon{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);background:var(--surface)}
.alert-row__icon svg{width:18px;height:18px}
.alert-row__main{flex:1;min-width:180px}
.alert-row__main strong{display:block}
.alert-row__main span{font-size:var(--fs-sm);color:var(--muted)}
.alert-row .select{width:auto;padding:.45em 2.2em .45em .8em;font-size:var(--fs-sm)}

/* Event-Karte */
.event{display:grid;gap:var(--sp-4);grid-template-columns:1fr;border:var(--border);background:var(--surface)}
@media (min-width:640px){.event{grid-template-columns:200px 1fr}}
.event__media{background:var(--paper-3);aspect-ratio:4/3;overflow:hidden}
.event__media img{width:100%;height:100%;object-fit:cover}
.event__body{padding:var(--sp-5)}
.event__date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;background:var(--ink);color:#fff;border-radius:var(--radius);line-height:1;flex:none}
.event__date b{font-family:var(--font-head);font-size:var(--fs-lg)}
.event__date span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* 404 / leere Zustände */
.state{text-align:center;max-width:520px;margin-inline:auto;padding-block:var(--sp-8)}
.state .display{font-size:clamp(4rem,10vw,7rem);color:var(--accent);line-height:1}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* Werkakte / druckbare Dokumente (Zertifikat, Sammlungsübersicht) */
.sheet{background:#fff;max-width:210mm;margin:0 auto var(--sp-6);padding:18mm 20mm;box-shadow:var(--shadow);border:1px solid var(--line)}
.sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);border-bottom:2px solid var(--ink);padding-bottom:var(--sp-4);margin-bottom:var(--sp-5)}
.sheet__head img{height:52px}
.sheet__doc{text-align:right;font-size:var(--fs-sm);color:var(--muted)}
.sheet__doc b{display:block;font-family:var(--font-head);font-size:var(--fs-md);color:var(--ink)}
.sheet h1{font-size:var(--fs-xl)}
.sheet .speclist dt{width:auto}
.sheet__art{display:grid;grid-template-columns:1fr;gap:var(--sp-5);margin:var(--sp-5) 0}
@media (min-width:700px){.sheet__art{grid-template-columns:240px 1fr}}
.sheet__art img{border:1px solid var(--line);background:var(--paper-3)}
.sheet__sign{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);margin-top:var(--sp-8)}
.sheet__sign div{border-top:1px solid var(--ink);padding-top:.5rem;font-size:var(--fs-sm);color:var(--muted)}
.sheet__qr{width:74px;height:74px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:9px;color:var(--muted-2);text-align:center;flex:none}
.sheet table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.sheet table th{text-align:left;border-bottom:2px solid var(--ink);padding:.5em .4em;font-family:var(--font-body);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted)}
.sheet table td{border-bottom:1px solid var(--line);padding:.6em .4em;vertical-align:top}
.sheet table td:last-child,.sheet table th:last-child{text-align:right}
.printbar{position:sticky;top:calc(var(--header-h) - 24px);z-index:40;display:flex;gap:var(--sp-3);justify-content:center;padding:var(--sp-3);background:var(--paper);border-bottom:var(--border);margin-bottom:var(--sp-5)}

/* E-Mail-Template-Vorschau */
.emailframe{width:100%;max-width:660px;height:720px;border:1px solid var(--line);background:#EDEAE3;display:block;margin:0 auto}
.email-preview{background:var(--paper-3);padding:var(--sp-5) var(--sp-3);border:1px solid var(--line)}

/* Druck: Chrome ausblenden, Dokumente sauber setzen */
@media print{
  .header,.footer,.cookiebar,.cartdrawer,.mobilenav,.nlpop,.modal,.searchpanel,.buybar,.demo-flag,.scrim,.toast,.printbar,.breadcrumb,.skip-link{display:none!important}
  body{background:#fff!important;color:#000}
  .section,.section--tight{padding-block:0}
  .sheet{box-shadow:none;border:none;max-width:none;margin:0;padding:0;page-break-after:always}
  .sheet:last-child{page-break-after:auto}
  a{color:#000;text-decoration:none}
  .reveal{opacity:1!important;transform:none!important}
}
/* ---------------------------------------------------------------------------
   Druckfassung der Werkakte (Feedback 21.08.2026).

   Kopf mit Logo und Fuss mit Impressum erscheinen NUR im Druck: Auf dem Schirm stehen beide
   ohnehin in Kopfzeile und Fuss der Seite, im PDF fehlen sie sonst voellig — und ein
   ausgedrucktes Zertifikat muss den Ausstellenden nennen.
   --------------------------------------------------------------------------- */
.druckkopf,.druckfuss{display:none}
@media print{
  .no-print{display:none!important}
  .druckkopf{display:flex;align-items:baseline;justify-content:space-between;gap:8mm;
    padding-bottom:3mm;margin-bottom:8mm;border-bottom:.4pt solid #000}
  .druckkopf img{height:9mm;width:auto}
  .druckkopf__zeile{font-size:8pt;letter-spacing:.02em;color:#000}
  .druckfuss{display:block;margin-top:10mm;padding-top:3mm;border-top:.4pt solid #000;
    font-size:7.5pt;line-height:1.5;color:#000}
  .druckfuss a{color:#000;text-decoration:none}
  /* Das Zertifikat bleibt ein Blatt — kein Umbruch mitten in den Angaben. */
  .zertblatt{page-break-inside:avoid}
  .zertblatt .panel{border:.4pt solid #000!important;background:#fff!important;box-shadow:none!important}
  .zertblatt .badge{border:.4pt solid #000;background:#fff!important;color:#000!important}
  /* Der QR-Code muss lesbar bleiben. */
  .zertblatt .qr img{width:22mm;height:22mm}
}

@page{margin:16mm}

/* Prototyp-Marker (nur Demo, kein Produktivelement) */
.proto-note{font-size:var(--fs-xs);color:var(--muted-2);font-style:italic}
.demo-flag{position:fixed;left:8px;bottom:8px;z-index:70;background:rgba(9,8,5,.82);color:#fff;font-size:11px;padding:.35em .7em;border-radius:100px;letter-spacing:.03em;pointer-events:none}
@media print{.demo-flag{display:none}}

/* --- Feedback-Runde 4 --- */
/* Sicherheitsnetz: Inline-SVGs in Fliesstext/Karten nie ungebremst skalieren ("Icon zu gross") */
p > svg, h4 > svg, .tax-note > svg, .prose svg, .card svg{width:16px;height:16px;flex:none;vertical-align:-3px}
.card .link-arrow svg{width:16px;height:16px}
/* Karten-Platzhalter (z. B. Anfahrtskarte) duerfen ein groesseres, aber begrenztes Icon zeigen */
.card .center > svg{width:48px;height:48px}
/* Suchformular auf der Ergebnisseite: Lupe klein und im Feld positioniert */
form.searchpanel__form{position:relative}
form.searchpanel__form > svg{width:20px;height:20px;flex:none;position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
form.searchpanel__form > input{padding-left:44px}
/* Shop-Filter: kein weisser Kasten mehr — Abgrenzung nur ueber Trennlinien */
.filterbox,.filters,.facets{background:transparent}
/* Sortier-Select kompakt (Feedback: Box zu gross) */
select.select{border:1px solid var(--line);border-radius:var(--radius);background-color:var(--surface);padding:.45em 2.4em .45em .9em;font:500 var(--fs-sm)/1.3 var(--font-body);color:var(--ink)}
/* Mobile-Filter-Drawer braucht wieder Flaeche */
@media (max-width:959px){.filters{background:var(--surface)}}
/* Fuehrendes Button-Icon nicht am Text kleben (Feedback EN-Produktseite) */
.btn > svg:first-child{margin-right:.15em}
/* Runde 5: Entfernen-Icon im Warenkorb klein */
.mini-line__remove svg{width:14px;height:14px;vertical-align:-2px}
/* Kuenstler-Index: Pfeil klein und in der Zeile mit der Werkzahl */
.artist-row__count svg{width:14px;height:14px;flex:none;vertical-align:-2px}
.artist-row__count{white-space:nowrap;display:inline-flex;align-items:center;gap:.4em}
/* Captcha-Demo klickbar (Feedback: "Spam-Schutz nicht klickbar") */
.captcha,.captcha__box{cursor:pointer}
.captcha__box.is-checked{background:var(--accent) !important;border-color:var(--accent) !important;position:relative}
.captcha__box.is-checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
/* Lexikon-FAQ: Frage einzeilig mit +/- , Antwort direkt darunter */
details.lex-entry{border-bottom:1px solid var(--line)}
details.lex-entry summary{display:flex;align-items:center;justify-content:space-between;gap:1em;list-style:none}
details.lex-entry summary::-webkit-details-marker{display:none}
details.lex-entry summary::after{content:"+";font-size:1.2em;color:var(--accent);flex:none}
details.lex-entry[open] summary::after{content:"–"}
details.lex-entry > p{margin:0 0 1rem;max-width:none}
/* Glossar-Suche */
.glossary__item{display:contents}
/* Mobile: Toolbar/Chips duerfen nicht die Seite aufspreizen (Shop 375px-Overflow) */
.toolbar{flex-wrap:wrap;max-width:100%}
.toolbar .chiprow,.chiprow{min-width:0;max-width:100%}
.toolbar > *{min-width:0}
/* Konto-Tabs auf schmalen Screens scrollbar statt ueberbreit */
@media (max-width:700px){.tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%}.tabs::-webkit-scrollbar{display:none}}
/* Grid-Items duerfen schrumpfen (Ursache des 375px-Overflows auf Shop/Konto/Suche) */
.shop-layout > *{min-width:0}
.grid > *,.split > *{min-width:0}
/* Werkakte: Tabellen auf schmalen Screens im Blatt scrollen statt Seite aufspreizen */
@media (max-width:700px){.sheet{padding:10mm 6mm}.sheet table{display:block;overflow-x:auto}}
form.searchpanel__form{max-width:100%}
form.searchpanel__form > input{width:100%;box-sizing:border-box;min-width:0}
.card{min-width:0;max-width:100%}
.card .input,.card .select,.card textarea{max-width:100%;box-sizing:border-box}

/* --- Klassischer WooCommerce-Warenkorb/Kasse im Prototyp-Look (Runde 6) --- */
.woocommerce table.shop_table{border:1px solid var(--line);border-collapse:separate;border-radius:var(--radius);overflow:hidden}
.woocommerce table.shop_table th{background:var(--paper-3);font-size:var(--fs-sm)}
.woocommerce table.cart img{width:72px;height:88px;object-fit:cover;border:1px solid var(--line);background:var(--paper-3)}
.woocommerce table.cart td.product-remove a{color:var(--muted-2);font-size:20px;text-decoration:none;line-height:1}
.woocommerce table.cart td.product-remove a:hover{color:var(--accent)}
.woocommerce table.cart .product-name a{font-family:var(--font-head);font-weight:600;color:var(--ink);text-decoration:none}
.woocommerce table.cart .product-price,.woocommerce table.cart .product-subtotal{font-weight:600;white-space:nowrap}
.woocommerce .cart_totals h2,.woocommerce h3#order_review_heading{font-size:var(--fs-lg)}
/* #place_order:not(.bestellknopf): Der Abschlussknopf hat seine eigene Gestaltung (.bestellknopf,
   siehe oben). Diese Sammelregel setzte background mit !important und hat sie deshalb ueberstimmt —
   selbst ein direkt am Element gesetzter Verlauf blieb wirkungslos. Statt ein weiteres !important
   daraufzusetzen, ist der Knopf hier ausgenommen. */
.woocommerce a.checkout-button,.woocommerce button.button,.woocommerce a.button,.woocommerce #place_order:not(.bestellknopf){background:var(--ink) !important;color:#fff !important;border-radius:var(--radius);padding:.9em 1.5em;font-weight:600;border:0}
.woocommerce a.checkout-button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,.woocommerce #place_order:not(.bestellknopf):hover{background:#33546c !important}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1px solid var(--line);border-radius:var(--radius);padding:.7em .9em;background:var(--surface)}

/* ---------- Runde 8: WC-Kernseiten im Prototyp-Stil ---------- */
.tabs a{padding:.85em 0;font-family:var(--font-head);font-weight:600;font-size:var(--fs-cap);color:var(--muted);border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;flex:none}
.tabs a.is-active{color:var(--ink);border-color:var(--accent)}
.tabs a:hover{color:var(--ink)}
a.mini-line__remove{display:inline-flex;align-items:center;justify-content:center}
#payment{background:transparent}
#payment ul.wc_payment_methods{list-style:none;margin:0;padding:0}
#payment li.wc_payment_method{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line-strong);padding:.9rem 1rem;border-radius:var(--radius);margin-bottom:.6rem;cursor:pointer}
#payment li.wc_payment_method>label{flex:1;font-weight:500;cursor:pointer;margin:0}
#payment li.wc_payment_method img{max-height:20px}
#payment div.payment_box{flex-basis:100%;font-size:var(--fs-sm);color:var(--muted);margin:.4rem 0 0;padding:0}
#payment li.wc_payment_method{flex-wrap:wrap}
#payment .place-order{padding:0;margin-top:.5rem;float:none}
#payment .woocommerce-terms-and-conditions-wrapper{margin-bottom:1rem}
#payment .woocommerce-privacy-policy-text{font-size:var(--fs-sm);color:var(--muted);margin:.5rem 0 1rem}
#place_order{width:100%}
/* Farbe des Abschlussknopfes NACH der Sammelregel, damit die Reihenfolge eindeutig ist. */
.woocommerce #place_order.bestellknopf{background:linear-gradient(180deg,#8d2634 0%,var(--accent) 55%,#5d1922 100%);color:#fff}
.woocommerce #place_order.bestellknopf:hover{background:linear-gradient(180deg,#9c2b3a 0%,#7a2230 55%,#661d26 100%)}
.woocommerce-checkout-review-order-table .mini-line{border-bottom:1px solid var(--line)}
.woocommerce-checkout-review-order-table .mini-line:last-of-type{border-bottom:none}
.woocommerce-MyAccount-content>.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-MyAccount-content .woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;max-width:720px}
.woocommerce-MyAccount-content .woocommerce-Address{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,.woocommerce-MyAccount-content h2{font-size:var(--fs-lg)}

/* ---------- Runde 9: Preis-Slider in der Shop-Toolbar ---------- */
.toolbar__price{display:flex;align-items:center;gap:.75rem;margin-left:1rem;flex:1;max-width:420px}
.range2{position:relative;flex:1;height:22px;min-width:140px}
.range2 input[type=range]{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range2 input[type=range]::-webkit-slider-runnable-track{height:3px;background:transparent}
.range2 input[type=range]:first-child::-webkit-slider-runnable-track{background:var(--line-strong);border-radius:2px}
.range2 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer;pointer-events:auto;margin-top:-6.5px}
.range2 input[type=range]::-moz-range-track{height:3px;background:var(--line-strong);border-radius:2px}
.range2 input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--paper);cursor:pointer;pointer-events:auto}
@media (max-width:820px){.toolbar__price{flex-basis:100%;margin-left:0;order:3;max-width:none}}

/* ---------- Runde 10 ---------- */
/* Lange Katalogtexte: 10 Zeilen, letzte Zeile ausgeblendet, aufklappbar */
.bp1-clamp{max-height:15.5em;overflow:hidden;position:relative}
.bp1-clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.6em;background:linear-gradient(to bottom,transparent,var(--paper))}
.bp1-clamp.is-open{max-height:none}
.bp1-clamp.is-open::after{display:none}
/* Werk-Karten: einheitliche Bildboxen (contain, ruhiges Raster) */
.artcard__media--contain{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:var(--paper-3);overflow:hidden}
/* Gleiche Bildbreite in der Übersicht, damit der beige Rand links/rechts überall gleich ist
   (Feedback 13.08.). Nur ausgesprochene Hochformate werden von der Höhe begrenzt. */
.artcard__media--contain img{width:86%;max-width:86%;height:auto;max-height:94%;object-fit:contain}
a.trustbar__item:hover{color:var(--ink)}

/* Rechtstexte: Nummerierungen/Listen der Kanzlei-Texte darstellen (Reset aufheben) */
.prose ol{list-style:decimal;padding-left:1.5em;margin:0 0 1em}
.prose ol ol{list-style:lower-alpha}
.prose ul{list-style:disc;padding-left:1.4em;margin:0 0 1em}
.prose li{margin-bottom:.35em}

/* Künstler-Index: Namen schlanker (Feedback 11.08.) */
.artist-row__name{font-weight:500 !important;font-size:var(--fs-base) !important}

/* Sprachumschalter: solange nur Deutsch existiert, ist EN sichtbar, aber kein toter Link
   (Feedback 13.08.: „Englische Version nicht verfügbar", „Button nicht aktiv") */
/* Zustand des Umschalters — die Geometrie kommt aus der Pillen-Regel oben, sonst sieht der
   Knopf beschaedigt aus (Feedback 14.08.) */
.langswitch__aktiv,.langswitch__aus{display:inline-flex;align-items:center;justify-content:center}
.langswitch__aus{color:var(--muted);opacity:.5;cursor:not-allowed}
/* Kachel ohne Bestand: sichtbar, aber nicht anklickbar */
.tile--inaktiv{cursor:default;opacity:.7}
.tile--inaktiv .tile__inner{pointer-events:none}

/* Zahlarten-Logos: gleich breite Felder, Höhen auf gleiche optische Fläche abgestimmt
   (Feedback 13.08.) */
.paylogos{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.paylogos__label{margin-right:.3rem}
.paylogo--bild{width:56px;height:30px;padding:0;background:#fff;border:1px solid var(--line-strong);border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.paylogo--bild img{width:auto;max-width:44px;object-fit:contain;display:block}
.paylogo--text{height:30px;padding:0 .6em;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);font-size:var(--fs-xs);font-weight:500;display:inline-flex;align-items:center}

/* Rechtstexte: Abschnittsüberschriften kleiner als der Dokumenttitel, Sprungziele nicht
   unter dem Kopf verschwinden lassen (Feedback 13.08.) */
.prose h3{font-size:var(--fs-lg);margin-top:2rem}
.prose h4{font-size:var(--fs-md);margin-top:1.4rem}
.prose h5{font-size:var(--fs-base);margin-top:1.1rem}
.prose h3[id]{scroll-margin-top:6rem}
.prose ol a.link{text-decoration:none}
.prose ol a.link:hover{text-decoration:underline}

/* Piktogramme in Abschnittsüberschriften: etwas größer, mit Luft zum Text und im Akzentrot
   wie die Piktogramme bei den Adressdaten (Feedback 13.08.) */
.prose h3 > svg,.prose h4 > svg,.card h4 > svg{width:20px;height:20px;margin-right:.5em;color:var(--accent);vertical-align:-4px}

/* Bestellübersicht auf der Kasse: Beträge rechts, Gesamtpreis als eigene rechtsbündige Zeile,
   Steuerhinweis und Lieferzeit darunter (Feedback 13.08.) */
.bestellblock__zeile{display:flex;justify-content:space-between;gap:1rem}
.bestellblock__summe{display:block;text-align:right;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line)}
.bestellblock__hinweis{display:block;text-align:right;font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}
.bestellblock__liefer{display:block;text-align:left;margin-top:.7rem}



/* Kopfzeile: ein Versprechen, mittig und ruhig (Auftrag 15.08.) */
/* Die drei Zusagen im Footer */
.footer__versprechen{list-style:none;margin:0 0 var(--sp-5);padding:0 0 var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:center;border-bottom:1px solid rgba(255,255,255,.12);font-size:var(--fs-sm);color:#B9B2A5}
.footer__versprechen li{display:inline-flex;align-items:center;gap:.5em}
.footer__versprechen svg{width:17px;height:17px;flex:none}

/* Zustand: Punkte, gefüllt = gut (Entwurf 15.08.). Die Farbe kommt je Stufe aus dem PHP. */
.zustand-punkte{display:inline-flex;gap:.32em;align-items:center}
.zustand-punkt{width:.62em;height:.62em;border-radius:50%;border:1px solid var(--line-strong);background:transparent}
.zustand-punkt.is-gefuellt{background:var(--zustand-farbe,#3f6b4f);border-color:var(--zustand-farbe,#3f6b4f)}

/* Werkseite */
.zustand{margin:1.4rem 0 .2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.zustand__titel{font-size:var(--fs-md);margin:0}
.zustand__zeile{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.7rem 0 0}
.zustand__wert{font-size:var(--fs-base)}
.zustand__zahl{white-space:nowrap}
.zustand__text{margin:.5rem 0 0;max-width:60ch}

/* Legende auf der Echtheitsseite */
.zustand-legende{max-width:60ch}
.zustand-legende__liste{list-style:none;margin:2rem 0 0;padding:0}
.zustand-legende__zeile{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0;border-top:1px solid var(--line)}
.zustand-legende__zeile:last-child{border-bottom:1px solid var(--line)}
.zustand-legende__wort{display:block;font-family:var(--font-head);font-size:var(--fs-lg);line-height:1.2}
.zustand-legende__was{display:block;margin:.25rem 0 .15rem;max-width:46ch}
.zustand__definition{margin:.4rem 0 0;max-width:60ch}
.zustand-legende__wert{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex:none;font-size:1.15rem}
.zustand-legende__fuss{margin-top:1.5rem}
@media (max-width:520px){
  .zustand-legende__zeile{flex-direction:column;align-items:flex-start;gap:.5rem}
  .zustand-legende__wert{align-items:flex-start}
}

/* Empfehlungen mit Reitern (Auftrag 15.08.) */
.empfehlungen__reiter{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;border-bottom:1px solid var(--line);margin-bottom:1.75rem}
.empfehlungen__reiter-knopf{background:none;border:0;padding:.7rem 0;cursor:pointer;color:var(--muted);font-family:var(--font-body);font-size:var(--fs-base);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.empfehlungen__reiter-knopf:hover{color:var(--ink)}
.empfehlungen__reiter-knopf.is-aktiv{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.empfehlungen__hinweis{margin:0 0 1.25rem;display:flex;flex-wrap:wrap;gap:.2rem .75rem;align-items:baseline}
.empfehlungen__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem 1.5rem}
.empfehlungen__mehr{margin:1.75rem 0 0}
/* Verkauft: sichtbar als Marktbeleg, nicht versteckt */
.artcard__verkauft{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:var(--ink);color:#fff;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;padding:.4em 1em}
.artcard--sold .artcard__media img{opacity:.72;filter:saturate(.8)}
.artcard__preiszeile{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:baseline;margin-top:.35rem}

/* Vormerken statt Newsletter: kontextbezogen am Werk (Auftrag 15.08.) */
.benachr{display:flex;gap:1.25rem;align-items:flex-start;margin:1.6rem 0 0;padding:1.25rem;background:var(--paper-3);border:1px solid var(--line)}
.benachr__bild{width:78px;height:78px;object-fit:contain;background:var(--surface);border:1px solid var(--line);flex:none}
.benachr__text{flex:1;min-width:0}
.benachr__titel{font-size:var(--fs-md);margin:0 0 .2rem}
.benachr__form{margin-top:.9rem}
.benachr__zeile{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-start}
.benachr__form .field{margin:0}
.benachr__form altcha-widget{margin:.9rem 0 .6rem!important}
@media (max-width:600px){.benachr{flex-direction:column}.benachr__bild{width:60px;height:60px}}