:root{
  --blue:#202782; --blue-2:#2A317A; --blue-deep:#1B2170; --cream:#FEFDF9;
  --pink:#F88DA7; --pink-soft:#F6A9BD; --pink-edge:#d97490; --ink:#20233A;
  --pink-ink:#C2456D;
  --muted-blue:#C9CBE4; --muted-ink:#6E7080; --line-cream:#E7E4D8; --line-blue:#4A4F9A;
  --display:"Literata",Georgia,serif; --body:"Jost",system-ui,-apple-system,sans-serif;
  --t-xs:.78rem; --t-sm:.9rem; --t-base:1.05rem; --t-lg:1.31rem;
  --t-xl:1.64rem; --t-2xl:2.05rem; --t-3xl:2.7rem; --t-4xl:3.6rem; --t-5xl:4.6rem;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --maxw:1120px;
  /* Wellen des Kopfbereichs — dieselben Werte wie auf der Startseite */
  --blob-1:rgba(248,141,167,.18);
  --blob-2:rgba(246,169,189,.26);
  --blob-3:rgba(32,39,130,.10);
  --blob-4:rgba(254,253,249,.55);
  --nav-h:110px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:var(--t-base);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
a{color:inherit}
img{max-width:100%}
p,h1,h2,h3,h4,li,span,label,a,td{overflow-wrap:break-word}
.eyebrow{font-family:var(--body);font-size:var(--t-sm);letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;overflow-wrap:anywhere;color:var(--pink-ink)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.01em;font-optical-sizing:auto}
em{font-style:italic;color:var(--pink-ink)}
.on-blue .eyebrow,.on-blue em{color:var(--pink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pink);color:var(--blue);
  font-family:var(--display);padding:.7em 1.2em;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ——— BUTTONS ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);
  font-size:var(--t-base);letter-spacing:.16em;padding:.85em 1.8em;cursor:pointer;
  text-decoration:none;border:1px solid transparent;border-radius:6px;
  transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease}
.btn-raised{background:var(--pink);color:var(--blue);
  box-shadow:0 4px 0 0 var(--pink-edge),0 12px 24px rgba(248,141,167,.4)}
.btn-raised:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--pink-edge),0 8px 16px rgba(248,141,167,.35)}
.btn-raised:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--pink-edge),0 4px 10px rgba(248,141,167,.3)}
.btn-raised[disabled]{opacity:.45;pointer-events:none}
.btn-raised-blue{background:var(--blue);color:var(--cream);
  box-shadow:0 4px 0 0 var(--blue-deep),0 12px 24px rgba(27,33,112,.35)}
.btn-raised-blue:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--blue-deep),0 8px 16px rgba(27,33,112,.3)}
.on-blue .btn-raised{background:var(--pink);color:var(--blue);
  box-shadow:0 4px 0 0 var(--pink-edge),0 12px 24px rgba(0,0,0,.22)}
.btn-ghost{font-family:var(--display);font-style:italic;font-size:var(--t-lg);letter-spacing:.02em;
  color:var(--blue);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:2px;
  background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;
  transition:color .18s,border-color .18s}
.btn-ghost:hover{color:var(--pink-ink)}
.on-blue .btn-ghost{color:var(--cream)}
.on-blue .btn-ghost:hover{color:var(--pink)}

/* ——— NAV ——— */
.nav{position:sticky;top:0;z-index:80;transition:transform .3s ease}
.nav.hide{transform:translateY(-100%)}
.nav .util{background:var(--blue);color:var(--cream)}
.nav .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:40px}
.nav .util .contact{font-size:.8rem;color:var(--pink-soft);white-space:nowrap}
.nav .util .contact a{text-decoration:none;color:inherit}
.nav .util .contact a:hover{color:var(--cream)}
.nav .main{background:rgba(254,253,249,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-cream)}
.nav .main .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:70px}
.logo{font-family:var(--display);font-weight:400;font-size:var(--t-xl);letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;line-height:1;color:var(--blue)}
.logo small{display:block;font-family:var(--body);font-weight:400;font-size:.5rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted-ink);margin-top:3px}
.nav .links{display:flex;gap:20px;align-items:center}
.nav .links a{font-size:.96rem;text-decoration:none;color:var(--ink);position:relative;padding:2px 0;cursor:pointer}
.nav .links a:hover{color:var(--pink-ink)}
.nav .links a[aria-current="page"]{color:var(--pink-ink)}
.toggle{display:inline-flex;border:1px solid var(--cream);border-radius:2px;overflow:hidden}
.toggle button{font-family:var(--display);font-size:.9rem;letter-spacing:.05em;padding:.28em .7em;
  background:transparent;color:var(--cream);border:0;border-right:1px solid rgba(254,253,249,.35);
  cursor:pointer;transition:.15s}
.toggle button:last-child{border-right:0}
.toggle button.active,.toggle button:hover{background:var(--cream);color:var(--blue)}
.nav .links a.nav-cta{position:relative;font-family:var(--display);letter-spacing:.18em;font-size:.86rem;
  text-transform:lowercase;color:var(--blue);background:transparent;border:2px solid var(--blue);
  padding:.55em 1.3em;border-radius:4px;text-decoration:none;white-space:nowrap;overflow:hidden;
  z-index:0;transition:color .25s,border-color .25s}
.nav .links a.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav .links a.nav-cta:hover{color:var(--blue);border-color:var(--pink)}
.nav .links a.nav-cta:hover::before{transform:scaleX(1)}
.navwrap{position:relative}
.navwrap>a.has::after{content:"▾";font-size:.7em;margin-left:5px;color:var(--muted-ink)}
/* Derselbe Griff wie in der Startseiten-Vorlage: Der Abstand zum Menüpunkt
   steckt im MENÜPUNKT, nicht zwischen ihm und dem Untermenü. Lagen dort 12px
   margin, berührte der Zeiger auf dem Weg nach unten kurz weder das eine noch
   das andere — .navwrap:hover wurde falsch, und das Untermenü schloss sich,
   bevor man es erreichen konnte. Optisch steht es genauso weit unter dem Text,
   der Zwischenraum gehört jetzt aber zum Trefferbereich. */
.navwrap>a.has{padding-top:12px;padding-bottom:12px}
.dropdown{position:absolute;top:100%;left:0;margin-top:0;display:none;
  background:var(--cream);border:1px solid var(--line-cream);border-radius:8px;
  box-shadow:0 14px 30px rgba(32,39,130,.14);padding:8px;min-width:210px;z-index:90}
.navwrap:hover .dropdown,.navwrap:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:8px 12px;border-radius:5px;font-size:.9rem;color:var(--ink)}
.dropdown a:hover{background:#F3EEE1;color:var(--blue)}
.burger{display:none;font-size:1.5rem;background:none;border:0;cursor:pointer;color:var(--blue);
  order:-1;margin-right:var(--s2);line-height:1;padding:4px 6px}
.mobile-menu{display:none;background:var(--cream);border-bottom:1px solid var(--line-cream);
  box-shadow:0 18px 34px rgba(32,39,130,.12)}
.mobile-menu.open{display:block;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu .wrap{padding-top:var(--s3);padding-bottom:var(--s4)}
.mobile-menu a{display:block;text-decoration:none;color:var(--ink);font-size:1.06rem;
  padding:.62em 0;border-bottom:1px solid var(--line-cream)}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.sub{padding-left:var(--s3);font-size:.94rem;color:var(--muted-ink)}
.mobile-menu .m-contact{margin-top:var(--s3);font-size:.9rem;color:var(--muted-ink)}

/* ——— sections ——— */
section{padding:var(--s7) 0}
.sec-head{max-width:64ch;margin-bottom:var(--s5)}
.sec-head .eyebrow{margin:0 0 var(--s2);color:var(--pink-ink)}
.on-blue .sec-head .eyebrow{color:var(--pink)}
.sec-head h2{font-size:var(--t-3xl);margin:0;color:var(--blue)}
.on-blue .sec-head h2{color:var(--cream)}
.sec-head p{color:var(--muted-ink);margin:var(--s2) 0 0;font-size:var(--t-lg)}
.on-blue .sec-head p{color:var(--muted-blue)}
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ——— PAGE HEAD ——— */
.pagehead{background:var(--cream);position:relative;overflow:hidden;padding:var(--s7) 0 var(--s6)}
/* weicher Ausklang nach unten, damit das Wellenfeld nicht hart abbricht */
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,rgba(254,253,249,0) 0%,
  rgba(254,253,249,.4) 45%,rgba(254,253,249,.82) 78%,var(--cream) 100%)}
.pagehead .wrap{position:relative;z-index:2}
.blob-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.blob-field svg{width:100%;height:100%;display:block}
.blob-field g{transform-box:view-box;transform-origin:center}
/* the four waves read their colour from a token, so day and night are one swap */
.blob-field .b1{fill:var(--blob-1)}
.blob-field .b2{fill:var(--blob-2)}
.blob-field .b3{fill:var(--blob-3)}
.blob-field .b4{fill:var(--blob-4)}
/* stars — only ever visible at night */
.blob-field .stars circle{fill:var(--cream);opacity:0;transition:opacity .8s ease}
.hero.night .blob-field .stars circle{opacity:var(--star-o,.7);
  animation:twinkle var(--star-dur,5s) ease-in-out var(--star-delay,0s) infinite}
@keyframes twinkle{0%,100%{opacity:var(--star-o,.7)}50%{opacity:calc(var(--star-o,.7) * .25)}}
.blob-field .drift{animation:drift 26s ease-in-out infinite}
.blob-field .drift-2{animation:drift2 34s ease-in-out infinite}
.blob-field .drift-3{animation:drift3 30s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2.5%,2%) scale(1.06)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2.5%) scale(1.05)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,-3%) scale(1.08)}}
.blob-field .b1{fill:var(--blob-1)}
.blob-field .b2{fill:var(--blob-2)}
.blob-field .b3{fill:var(--blob-3)}
.blob-field .b4{fill:var(--blob-4)}
.pagehead h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:0 0 var(--s3);
  max-width:18ch;color:var(--blue)}
.pagehead .lead{max-width:60ch;color:var(--muted-ink);font-size:var(--t-lg);margin:0 0 var(--s4)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5);
  max-width:900px}
.fact{border-top:2px solid var(--pink);padding-top:var(--s2)}
.fact b{display:block;font-family:var(--display);font-weight:400;font-size:var(--t-lg);color:var(--blue)}
.fact span{font-size:var(--t-sm);color:var(--muted-ink)}

/* ——— CATALOGUE ——— */
.catalog{background:var(--cream);padding-top:var(--s5)}
/* Die Leiste klebt unter der Navigation und wandert mit, wenn diese
   ausblendet. Sobald Karten darunter durchlaufen, macht ein Schatten die
   Ebenen sichtbar — vorher war die Leiste halbtransparent und die Karten
   schienen mitten durch sie hindurch. */
.cat-sentinel{height:1px;margin:0}
/* Randlos über die volle Breite, damit der Schatten nicht bei 1120px endet.
   Wichtig: bei position:sticky ist `left` ein Klebe-Offset und KEIN Versatz —
   die sonst übliche Kombination left:50%/margin-left:-50vw schiebt die Leiste
   deshalb aus dem Bild. Negative Aussenränder wirken dagegen positionsneutral. */
/* Die Leiste klebt unter der Navigation. Beide zusammen nahmen 45% der
   Bildschirmhöhe ein — dafür ist die Liste zu wichtig. Suche und Kategorien
   stehen deshalb auf breiten Schirmen nebeneinander, die Trefferzahl steht
   darunter außerhalb der klebenden Leiste, und der Innenabstand ist kleiner. */
.cat-tools{position:sticky;top:var(--nav-h,110px);z-index:40;background:var(--cream);
  margin-inline:calc(50% - 50vw);margin-bottom:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line-cream);
  transition:top .3s ease,box-shadow .25s ease,border-color .25s ease}
.cat-tools.is-stuck{border-color:transparent;box-shadow:0 12px 26px rgba(32,39,130,.16)}
.cat-search{position:relative;max-width:520px}
.cat-search input{width:100%;font-family:var(--body);font-size:var(--t-base);font-weight:300;
  color:var(--ink);background:#fff;border:1px solid var(--line-cream);border-radius:100px;
  padding:.85em 1.2em .85em 3em}
.cat-search input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(248,141,167,.25)}
.cat-search .mag{position:absolute;left:1.15em;top:50%;transform:translateY(-50%);
  color:var(--muted-ink);pointer-events:none;font-size:1.05rem}
.cat-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
@media(min-width:1000px){
  .cat-tools .wrap{display:flex;align-items:center;gap:var(--s3)}
  .cat-search{flex:0 0 340px}
  .cat-cats{margin-top:0}
}
.cat-cats button{font-family:var(--body);font-weight:500;font-size:.82rem;letter-spacing:.02em;
  color:var(--blue);background:#fff;border:1px solid var(--line-cream);border-radius:100px;
  padding:.45em 1.1em;cursor:pointer;transition:.16s}
.cat-cats button:hover{border-color:var(--pink)}
.cat-cats button[aria-pressed="true"]{background:var(--blue);color:var(--cream);border-color:var(--blue)}
.cat-count{margin:var(--s3) 0 0;font-size:var(--t-sm);color:var(--muted-ink)}
.cat-status{margin:var(--s4) 0;font-family:var(--display);font-style:italic;font-size:var(--t-lg);
  color:var(--muted-ink)}
.cat-status[data-state="error"]{color:var(--pink-ink)}
.cat-status[data-state="stale"]{color:var(--pink-ink)}

.cat-grid{display:flex;flex-direction:column;gap:var(--s3)}
/* Ein Buch je Reihe, in der Kartensprache der Startseite: vollfarbige Karte,
   Cover auf einer aufgehellten Fläche darin, Titel in Literata, runder Badge.
   Anders als auf der Startseite ohne Neigung — über die volle Breite würde ein
   gekippter Block schief wirken und rechts überstehen. */
.bk{position:relative;display:grid;grid-template-columns:132px 1fr auto;gap:var(--s4);
  align-items:center;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:rgb(var(--card-rgb,183,166,216));border:0;border-radius:18px;padding:14px;
  box-shadow:0 8px 20px rgba(var(--card-rgb,183,166,216),.34);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease}
.bk:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(var(--card-rgb,183,166,216),.5)}
.bk[aria-pressed="true"]{box-shadow:0 0 0 3px var(--blue),0 18px 36px rgba(var(--card-rgb),.5)}

.bk-cover{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(0,0,0,.14));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bk-cover img{width:auto;height:100%;max-width:100%;object-fit:contain;display:block;
  position:relative;z-index:1;border-radius:2px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.34))}
/* Open Library hat für die wenigsten italienischen ISBN ein Cover. Das
   Monogramm liegt deshalb IMMER darunter — schlägt das Bild fehl, entfernt es
   sich selbst und der Buchstabe steht schon da, statt einer leeren Fläche. */
.bk-cover .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-style:italic;font-size:2.6rem;color:var(--blue);opacity:.42}

.bk-body{min-width:0;display:flex;flex-direction:column;gap:6px;padding:var(--s1) 0}
.bk-pill{align-self:flex-start;font-family:var(--body);font-weight:600;font-size:.66rem;
  letter-spacing:.01em;color:var(--blue);background:var(--cream);border-radius:100px;
  padding:.3em .8em}
.bk-title{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.18;
  color:var(--blue);margin:0}
.bk-author{font-size:.86rem;color:var(--blue);opacity:.72;margin:0}
.bk-meta{margin-top:4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em .9em;
  font-size:.76rem;color:var(--blue);opacity:.66}

/* Preis und Aktion rechts, damit die Reihe einen klaren Abschluss bekommt */
.bk-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-right:var(--s2)}
.bk-price{font-family:var(--display);font-size:var(--t-xl);color:var(--blue);white-space:nowrap}
.bk-add{width:40px;height:40px;border-radius:50%;background:var(--cream);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.14);transition:.18s;pointer-events:none}
.bk:hover .bk-add{transform:scale(1.08)}
.bk[aria-pressed="true"] .bk-add{background:var(--blue);color:var(--cream)}
.bk-badge{position:absolute;top:12px;right:12px;z-index:2;min-width:34px;height:34px;padding:0 10px;
  border-radius:100px;background:var(--cream);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.05em;
  box-shadow:0 4px 12px rgba(0,0,0,.18)}
.cat-more{text-align:center;margin-top:var(--s5);color:var(--muted-ink);font-size:var(--t-sm)}

/* ——— BASKET ——— */
.basket-fab{position:fixed;right:var(--s3);bottom:var(--s3);z-index:70;
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-size:var(--t-base);
  letter-spacing:.04em;color:var(--blue);background:var(--pink);border:0;border-radius:100px;
  padding:.85em 1.5em;cursor:pointer;
  box-shadow:0 4px 0 0 var(--pink-edge),0 14px 30px rgba(248,141,167,.45);
  transition:transform .12s ease,box-shadow .12s ease,opacity .2s ease}
.basket-fab:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--pink-edge),0 8px 18px rgba(248,141,167,.4)}
.basket-fab .n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 7px;border-radius:100px;background:var(--blue);color:var(--cream);
  font-family:var(--body);font-weight:600;font-size:.78rem}
.basket-fab[hidden]{display:none}

.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.open{display:block}
.modal-back{position:absolute;inset:0;background:rgba(14,18,51,.55);backdrop-filter:blur(3px)}
.modal-panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:var(--cream);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(14,18,51,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--line-cream)}
.modal-head h2{font-size:var(--t-2xl);margin:0;color:var(--blue)}
.modal-close{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted-ink);cursor:pointer;padding:4px 8px}
.modal-close:hover{color:var(--pink-ink)}
.modal-body{flex:1;overflow-y:auto;padding:var(--s4);overscroll-behavior:contain}
.modal-foot{border-top:1px solid var(--line-cream);padding:var(--s3) var(--s4) var(--s4);background:var(--cream)}
.bsk-empty{font-family:var(--display);font-style:italic;color:var(--muted-ink);font-size:var(--t-lg)}
.bsk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bsk-item{display:flex;gap:var(--s2);align-items:flex-start;padding-bottom:var(--s2);
  border-bottom:1px solid var(--line-cream)}
.bsk-item .t{font-family:var(--display);font-size:.98rem;color:var(--blue);margin:0;line-height:1.25}
.bsk-item .s{font-size:.76rem;color:var(--muted-ink);margin:2px 0 0}
.bsk-item .p{margin-left:auto;font-family:var(--display);color:var(--blue);white-space:nowrap}
.bsk-item .x{background:none;border:0;color:var(--muted-ink);cursor:pointer;font-size:1.1rem;
  line-height:1;padding:2px 4px}
.bsk-item .x:hover{color:var(--pink-ink)}
.bsk-total{display:flex;justify-content:space-between;align-items:baseline;margin:var(--s3) 0 0;
  font-family:var(--display);font-size:var(--t-xl);color:var(--blue)}
.bsk-ship{font-size:var(--t-xs);color:var(--muted-ink);margin:.2em 0 0}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
/* display auf einer Klasse ueberstimmt das hidden-Attribut des Browsers —
   ohne diese Regel bleibt die Lieferadresse bei „Abholung" sichtbar */
.field[hidden],[hidden]{display:none}
.field label{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-ink)}
.field input,.field textarea{font-family:var(--body);font-size:var(--t-base);font-weight:300;
  color:var(--ink);background:#fff;border:1px solid var(--line-cream);border-radius:8px;
  padding:.75em 1em;width:100%}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--pink)}
.field.err input,.field.err textarea{border-color:var(--pink-ink);background:#fff6f8}
.field .msg{font-size:.76rem;color:var(--pink-ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.delivery{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.delivery label{display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--line-cream);border-radius:100px;padding:.5em 1.1em;cursor:pointer}
.delivery label:has(input:checked){border-color:var(--pink);box-shadow:0 0 0 2px rgba(248,141,167,.3)}
.consent{display:flex;gap:.6em;align-items:flex-start;font-size:.84rem;color:var(--muted-ink);
  margin-bottom:var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:var(--s3) 0 0;font-size:.82rem;color:var(--muted-ink)}
.form-note a{color:var(--pink-ink)}
.sent{text-align:center;padding:var(--s5) 0}
.sent h3{font-size:var(--t-2xl);color:var(--blue);margin:0 0 var(--s2)}
.sent p{color:var(--muted-ink);margin:0 auto;max-width:40ch}

/* ——— STEPS (blue) ——— */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.step .n{font-family:var(--display);font-style:italic;font-size:var(--t-5xl);color:var(--pink-soft);line-height:.9}
.step h3{font-size:var(--t-lg);margin:var(--s3) 0 .3em;color:var(--cream)}
.step p{font-size:var(--t-sm);color:var(--muted-blue);margin:0}
.step strong{color:var(--cream);font-weight:400}

/* ——— KONTAKT ——— */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5)}
.contact-item{border-top:2px solid var(--pink);padding-top:var(--s3)}
.contact-item .c-label{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-ink);margin:0 0 var(--s2)}
.contact-item a,.contact-item p{font-family:var(--display);font-size:var(--t-lg);color:var(--blue);
  text-decoration:none;margin:0;line-height:1.3;display:block}
.contact-item a:hover{color:var(--pink-ink)}

/* ——— FOOTER ——— */
footer{background:var(--blue);color:var(--muted-blue);padding:var(--s7) 0 var(--s4)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s5)}
footer h4{font-family:var(--body);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);margin:0 0 var(--s3)}
footer a{display:block;color:var(--muted-blue);text-decoration:none;font-size:var(--t-sm);margin-bottom:.5em}
footer a:hover{color:var(--pink)}
.f-logo{font-family:var(--display);font-size:var(--t-2xl);color:var(--cream)}
.f-base{border-top:1px solid var(--line-blue);margin-top:var(--s6);padding-top:var(--s3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);font-size:var(--t-xs)}
.f-legal a{display:inline;color:var(--muted-blue);text-decoration:none;margin:0}
.f-legal a:hover{color:var(--pink)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .bk,.basket-fab,.cat-tools{transition:none}
  .blob-field .drift,.blob-field .drift-2,.blob-field .drift-3{animation:none}
  .blob-field animate{display:none}
}
@media(max-width:1080px){
  .nav .links a:not(.nav-cta){display:none}
  .nav .links .navwrap{display:none}
  .burger{display:inline-flex}
}
@media(max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--t-3xl:1.9rem;--t-2xl:1.7rem;--s8:72px;--s7:56px}
  .eyebrow{letter-spacing:.18em}
  .steps{grid-template-columns:1fr;gap:var(--s3)}
  .step{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 var(--s3)}
  .step .n{grid-row:1/3;align-self:start}
  .step h3{margin:0 0 .3em}
  .f-grid,.contact-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  /* Schmal: Cover kleiner, Preis und Aktion wandern unter den Text — dreispaltig
     bliebe bei 320px rechnerisch keine Breite mehr für den Titel übrig. */
  .bk{grid-template-columns:92px 1fr;gap:var(--s3);padding:12px}
  .bk-side{grid-column:2;flex-direction:row;align-items:center;gap:var(--s3);padding-right:0}
  .bk-badge{top:8px;right:8px;height:28px;min-width:28px;padding:0 8px;font-size:.64rem}
  .bk-title{font-size:1.08rem}
  .bk-price{font-size:var(--t-lg)}
  .bk-add{width:36px;height:36px}
  .bk-cover .ini{font-size:1.9rem}
  .nav .util .contact{display:none}
  .nav .util .wrap{justify-content:center;padding:0 16px}
  .nav .main .wrap{gap:12px;padding:0 16px}
  .nav .links a.nav-cta{letter-spacing:.06em;padding:.55em .85em;font-size:.76rem}
  .logo{font-size:1.2rem}
  .logo small{letter-spacing:.24em;font-size:.46rem}
  .modal-panel{width:100%}
  .basket-fab{left:var(--s3);right:var(--s3);justify-content:center}
}
@media(max-width:400px){
  .eyebrow{letter-spacing:.12em}
  .logo{font-size:1.05rem}
  .nav .links a.nav-cta{padding:.5em .7em;font-size:.68rem;letter-spacing:.03em}
  .nav .main .wrap{padding:0 12px;gap:8px}
}


.reveal{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════════
   Ergänzungen der WordPress-Fassung
   ---------------------------------------------------------------------------
   Nur das, was erst durch WordPress dazukommt: die Grundtypografie gegen zwei
   fremde Stylesheets behaupten, Sprachlinks statt Knöpfe, Formular­rückmeldungen,
   der Redaktionshinweis an offenen Bereichen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Grundtypografie zurückholen ───────────────────────────────────────
   Zwei Stylesheets greifen in WordPress in dieselben Elemente:

     hello-elementor/reset.css   body{font-family:-apple-system,…;font-weight:400}
                                 h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500}
     Elementor-Kit               .elementor-kit-7{font-family:"Roboto"}

   Die Regeln des Entwurfs sind reine Elementselektoren (body, h1,h2,h3) und
   damit gleich stark wie Hellos — wer später kommt, gewinnt. Und gegen die
   Kit-Klasse (0,1,0) verliert `body` ohnehin.

   Deshalb hier dieselben Werte noch einmal, aber unter .bhl-page. Das ist
   0,1,0 für den Rumpf und 0,1,1 für die Überschriften — stark genug, ohne
   irgendwo !important zu brauchen. Die Werte stammen unverändert aus dem
   Entwurf; ändert sich dort etwas, gehört es auch hierher.

   Zusätzlich lädt das Theme sein Stylesheet erst nach den beiden anderen
   (siehe inc/assets.php) — Reihenfolge und Spezifität zusammen. */

.bhl-page{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-base);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Die Serifenschrift der Überschriften — der eigentliche Befund. */
.bhl-page h1,
.bhl-page h2,
.bhl-page h3{
  font-family:var(--display);
  font-weight:300;
  letter-spacing:-.01em;
  font-optical-sizing:auto;
}

/* h4–h6 nutzt der Entwurf nicht als Titel; sie sollen wie Fließtext aussehen
   und nicht mit Hellos Gewicht 500 herausstechen. */
.bhl-page h4,
.bhl-page h5,
.bhl-page h6{
  font-family:var(--body);
  font-weight:500;
}

/* Hello setzt Formularelemente auf font-family:inherit und Knöpfe auf 400. */
.bhl-page input,
.bhl-page textarea,
.bhl-page select{
  font-family:var(--body);
  font-weight:300;
}
.bhl-page .btn,
.bhl-page .btn-raised,
.bhl-page .cta-split,
.bhl-page .btn-ghost{
  font-family:var(--display);
  font-weight:300;
}
.bhl-page .eyebrow,
.bhl-page .hero-eyebrow{
  font-family:var(--body);
  font-weight:500;
}

/* Betonung: Hello rührt <em> nicht an, das Kit aber setzt die Schriftfamilie
   auf dem Rumpf — ohne diese Zeile erbt eine kursive Stelle in einer
   Überschrift die falsche Schrift. */
.bhl-page em{
  font-family:inherit;
  font-style:italic;
}

/* Der Umschalter gibt <a> aus, die Vorlage stylte <button>. */
.toggle a{
  font-family:var(--display);font-size:.9rem;letter-spacing:.05em;padding:.28em .7em;
  text-decoration:none;color:var(--cream);background:transparent;
  border-right:1px solid rgba(254,253,249,.35);
  transition:background-color .15s ease,color .15s ease;
}
.toggle a:last-child{border-right:0}
.toggle a.active,.toggle a:hover{background:var(--cream);color:var(--blue)}

/* Honigtopf — aus dem Bild geschoben, nicht display:none. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Formularrückmeldung */
.form-status{margin:var(--s2) 0 0;font-size:var(--t-sm);line-height:1.5;min-height:1.2em}
.form-status:empty{margin:0;min-height:0}
.form-status.ok{color:var(--blue);font-weight:400}
.form-status.err{color:#B3261E}
/* Auf dunkler Fläche hell. bhl-on-blue ist die Klasse für Elementor-Container,
   on-blue die der Theme-Abschnitte — die Statuszeile braucht beide, sonst steht
   sie hinter dem Shortcode blau auf Blau. */
.on-blue .form-status.ok,
.bhl-on-blue .form-status.ok{color:var(--cream)}
.on-blue .form-status.err,
.bhl-on-blue .form-status.err{color:#FFB4AB}
.form-status.ok::before{content:"✓ "}
.form-status.err::before{content:"! ";font-weight:600}
form[data-bhl-form][aria-busy="true"] button[type="submit"]{opacity:.6;pointer-events:none}

/* Hinweis an einem Bereich, der noch die Entwurfsfassung zeigt.
   Nur für angemeldete Redakteure — siehe inc/slots.php. */
.bhl-slot-hinweis{
  max-width:var(--maxw);margin:var(--s3) auto 0;padding:var(--s2) var(--s3);
  border:1px dashed var(--pink);border-radius:8px;background:rgba(248,141,167,.07);
  font-size:var(--t-sm);color:var(--muted-ink);
}
.on-blue .bhl-slot-hinweis{color:var(--muted-blue);background:rgba(248,141,167,.12)}
.bhl-slot-hinweis code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.bhl-slot-hinweis a{color:var(--pink-ink)}
.on-blue .bhl-slot-hinweis a{color:var(--pink)}

/* Die Admin-Leiste überlagert sonst die klebende Navigation. */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

/* ── Zusatz zu den Öffnungszeiten ──────────────────────────────────────────
   Die Samstagszeiten wechseln über das Jahr. Die Erläuterung steht nur im
   Kontaktblock — oben neben Telefon und E-Mail und in der Fußzeile ist die
   Zeile dafür zu kurz. Kleiner und ruhiger gesetzt: sie ergänzt die Angabe,
   sie ist nicht die Angabe. */
.c-note{
  display:inline-block;
  margin-top:.35em;
  font-size:var(--t-sm);
  line-height:1.45;
  color:var(--muted-ink);
  max-width:32ch;
}
.on-blue .c-note{color:var(--muted-blue)}

/* Derselbe Zusatz in der Fußzeile. Er steht dort neben Links, ist selbst aber
   keiner — deshalb eigene Klasse statt .f-grid a. Die Kontaktspalte ist rund
   240px breit, der Satz bricht also um; block statt inline, damit er in der
   Spalte bleibt und nicht neben dem Link klebt. */
.f-note{
  display:block;
  /* Eng an die Zeiten darüber, aber mit dem normalen Zeilenabstand der Spalte
     nach unten — sonst klebt der nächste Eintrag am Zusatz. */
  margin:-.3em 0 .55em;
  font-size:var(--t-xs);
  line-height:1.5;
  color:var(--muted-blue);
  opacity:.85;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Inhaltsseiten — der Text aus dem WordPress-Editor
   ---------------------------------------------------------------------------
   templates/bhl-inhalt.php gibt den Rahmen des Entwurfs aus und setzt in die
   Mitte, was im Backend steht. Der Entwurf kennt für Fließtext keine Form —
   er besteht aus gestalteten Abschnitten —, deshalb steht sie hier.

   Zwei Regeln haben den Zuschnitt bestimmt:

   · Zeilenlänge vor Seitenbreite. 68 Zeichen sind für langen Text die
     angenehme Grenze; der Satzspiegel der Seite ist mit 1120px fast doppelt
     so breit. Tabellen und Bilder dürfen ausbrechen, Text nicht.
   · Nichts erfinden, was der Entwurf schon hat. Überschriften, Farben,
     Abstände und der Ghost-Button stammen unverändert von dort — eine
     Textseite soll wie dieselbe Website aussehen, nicht wie ein Anhang.

   Gilt für den Block-Editor und für Elementor gleichermaßen: beides läuft
   durch the_content() und landet in .bhl-prose.
   ═══════════════════════════════════════════════════════════════════════════ */

.bhl-page .content-page{padding-bottom:0}
.bhl-page .content-body{padding-top:var(--s5)}

.bhl-page .bhl-prose{max-width:68ch;color:var(--ink);font-size:var(--t-base);line-height:1.7}

/* Überschriften: dieselbe Stufung wie in den Sektionen, eine Stufe leiser —
   die H1 der Seite steht bereits darüber. */
.bhl-page .bhl-prose h2{font-size:var(--t-2xl);color:var(--blue);margin:var(--s6) 0 var(--s2);line-height:1.15}
.bhl-page .bhl-prose h3{font-size:var(--t-xl);color:var(--blue);margin:var(--s5) 0 var(--s2);line-height:1.2}
.bhl-page .bhl-prose h4{font-family:var(--body);font-weight:500;font-size:var(--t-lg);
  color:var(--blue);margin:var(--s4) 0 var(--s1)}
.bhl-page .bhl-prose > :first-child{margin-top:0}
.bhl-page .bhl-prose > :last-child{margin-bottom:0}

.bhl-page .bhl-prose p{margin:0 0 var(--s3)}
.bhl-page .bhl-prose strong{font-weight:500;color:var(--blue)}
.bhl-page .bhl-prose em{font-style:italic;color:var(--pink-ink)}

/* Links im Fließtext werden unterstrichen. Farbe allein genügt nicht, und
   --pink-ink ist der Rosaton, der auf Creme die Kontrastschwelle hält. */
.bhl-page .bhl-prose a{color:var(--pink-ink);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1px}
.bhl-page .bhl-prose a:hover{color:var(--blue)}

.bhl-page .bhl-prose ul,
.bhl-page .bhl-prose ol{margin:0 0 var(--s3);padding-left:1.4em}
.bhl-page .bhl-prose ul{list-style:disc}
.bhl-page .bhl-prose ol{list-style:decimal}
.bhl-page .bhl-prose li{margin:0 0 var(--s1)}
.bhl-page .bhl-prose li::marker{color:var(--pink-ink)}
.bhl-page .bhl-prose li > ul,
.bhl-page .bhl-prose li > ol{margin:var(--s1) 0 0}

.bhl-page .bhl-prose blockquote,
.bhl-page .bhl-prose .wp-block-quote{margin:var(--s4) 0;padding:0 0 0 var(--s3);
  border-left:2px solid var(--pink);font-family:var(--display);font-style:italic;
  font-size:var(--t-lg);color:var(--blue)}
.bhl-page .bhl-prose blockquote cite{display:block;margin-top:var(--s2);font-family:var(--body);
  font-style:normal;font-size:var(--t-sm);color:var(--muted-ink)}

.bhl-page .bhl-prose hr,
.bhl-page .bhl-prose .wp-block-separator{border:0;border-top:1px solid var(--line-cream);margin:var(--s6) 0}

/* Bilder und Tabellen dürfen breiter werden als der Text — sie lesen sich
   nicht zeilenweise. Beide bleiben im Satzspiegel der Seite. */
.bhl-page .bhl-prose figure,
.bhl-page .bhl-prose .wp-block-image{margin:var(--s4) 0;max-width:min(100%,var(--maxw))}
.bhl-page .bhl-prose img{border-radius:12px;display:block;height:auto}
.bhl-page .bhl-prose figcaption{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted-ink)}

.bhl-page .bhl-prose .wp-block-table,
.bhl-page .bhl-prose table{width:100%;max-width:min(100%,var(--maxw));border-collapse:collapse;
  margin:var(--s4) 0;font-size:var(--t-sm)}
/* Eine schmale Tabelle bricht auf dem Telefon sonst die Seite auf. */
.bhl-page .bhl-prose .wp-block-table{overflow-x:auto}
.bhl-page .bhl-prose th{text-align:left;font-family:var(--body);font-weight:500;color:var(--blue);
  border-bottom:1px solid var(--line-cream);padding:var(--s2) var(--s2) var(--s2) 0}
.bhl-page .bhl-prose td{border-bottom:1px solid var(--line-cream);padding:var(--s2) var(--s2) var(--s2) 0;
  vertical-align:top}

.bhl-page .bhl-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(32,39,130,.06);border-radius:4px;padding:.1em .35em}
.bhl-page .bhl-prose pre{overflow-x:auto;padding:var(--s3);border-radius:12px;
  background:rgba(32,39,130,.06);margin:var(--s4) 0}
.bhl-page .bhl-prose pre code{background:none;padding:0}

/* Knöpfe aus dem Block-Editor bekommen den Ghost-Button des Entwurfs. */
.bhl-page .bhl-prose .wp-block-button__link{display:inline-block;background:none;border:0;
  border-bottom:2px solid var(--pink);border-radius:0;padding:0 0 2px;
  font-family:var(--display);font-style:italic;font-size:var(--t-lg);letter-spacing:.02em;
  color:var(--blue);text-decoration:none;transition:color .18s,border-color .18s}
.bhl-page .bhl-prose .wp-block-button__link:hover{color:var(--pink-ink)}
.bhl-page .bhl-prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s4) 0}

/* Die Ausrichtungen des Block-Editors. „Weit" und „voll" dürfen aus der
   Lesebreite heraus, aber nicht aus dem Satzspiegel. */
.bhl-page .bhl-prose .alignwide,
.bhl-page .bhl-prose .alignfull{max-width:min(100%,var(--maxw))}
.bhl-page .bhl-prose .aligncenter{margin-left:auto;margin-right:auto}
.bhl-page .bhl-prose .has-text-align-center{text-align:center}
.bhl-page .bhl-prose .has-text-align-right{text-align:right}

/* Elementor bringt in the_content() seine eigenen Abstände mit; innerhalb der
   Lesespalte sollen die des Entwurfs gelten. */
.bhl-page .bhl-prose .elementor-widget:last-child{margin-bottom:0}

/* Mit Elementor gebaute Inhaltsseiten. Die Abschnitte bringen Fläche, Breite
   und Innenabstand selbst mit — hier gehört nichts drumherum. Die zwei Zeilen
   sind nur Vorsorge: ein Container, der sich verrechnet, soll die Seite nicht
   waagrecht aufziehen. */
.bhl-page .bhl-elementor{width:100%}
.bhl-page .bhl-elementor > *{max-width:100%}

/* Der Reihenkopf auf heller Fläche.
   Im Entwurf gibt es ihn nur in der blauen Empfehlungssektion — Überschrift
   creme, Unterzeile rosa, Trennlinie im hellen Blau. Baut die Brücke ihn in
   einer mit Elementor gebauten Seite nach, kann die Fläche ebenso gut creme
   sein; dann wäre er unsichtbar. Die Werte stammen aus der Sektionsüberschrift
   auf Creme, damit beide Köpfe dieselbe Sprache sprechen. */
.bhl-page .row-head--hell{border-bottom-color:var(--line-cream)}
.bhl-page .row-head--hell h3{color:var(--blue)}
.bhl-page .row-head--hell p{color:var(--muted-ink)}

/* ── Was Hello Elementor an Knöpfen und Pfeilen verstellt ──────────────────
   Zwei Stellen, an denen fremde Regeln stärker sind als die des Entwurfs:

   1 · a:hover{color:…} in hello-elementor/reset.css hat mit (0,1,1) mehr
       Gewicht als .btn-raised-blue mit (0,1,0). Der Entwurf ändert beim
       Überfahren nur Schatten und Position, nie die Schriftfarbe — auf der
       Installation wurde daraus dunkles Blau auf dunklem Blau, der Knopf war
       im Hover-Zustand nicht mehr zu lesen.

   2 · Die Pfeile der Bilderreihe sind im Entwurf weiße Kreise. Ein
       Element-Selektor auf button (Hello, Elementor-Kit) genügt, um Rundung
       und Fläche zu verlieren — dann stehen dort eckige, farblose Kästchen.

   Beide Male dieselben Werte wie im Entwurf, nur mit .bhl-page davor. */
.bhl-page .btn-raised-blue:hover,
.bhl-page .btn-raised-blue:focus{color:var(--cream)}
.bhl-page .btn-raised:hover,
.bhl-page .btn-raised:focus{color:var(--blue)}
.bhl-page .on-blue .btn-raised:hover,
.bhl-page .on-blue .btn-raised:focus{color:var(--blue)}
.bhl-page .btn-ghost:hover{color:var(--pink)}

.bhl-page .slideshow .slide-nav{
  width:38px;height:38px;border-radius:50%;border:0;padding:0;
  background:rgba(254,253,249,.92);color:var(--blue);
  box-shadow:0 4px 12px rgba(0,0,0,.22)}
.bhl-page .slideshow .slide-nav:hover{background:var(--cream);color:var(--blue)}

/* ═══════════════════════════════════════════════════════════════════════════
   Elementor-Pro-Formulare in der Gestalt des Entwurfs
   ---------------------------------------------------------------------------
   Wer den Newsletter an Mailchimp anbinden will, ersetzt das Formular des
   Themes durch eines aus Elementor Pro — die Vorlagennummer trägt man unter
   Design → Anpassen → Buchhandlung List → Formulare ein, bhl_form() nimmt dann
   diese statt der eigenen (siehe inc/forms.php).

   Elementor bringt dafür eigenes Markup mit: .elementor-field-label statt
   label, .elementor-field-textual statt input, .elementor-button statt .btn.
   Hier bekommen diese Klassen dieselben Werte wie die Felder des Entwurfs —
   damit sieht das fremde Formular aus wie das eigene, und zwar auf beiden
   Flächen: auf Creme dunkel, auf Blau hell.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Beschriftung ─────────────────────────────────────────────────────────── */
.bhl-page .elementor-form .elementor-field-label{
  font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-ink);margin-bottom:6px}
.bhl-page .on-blue .elementor-form .elementor-field-label,
.bhl-page .bhl-on-blue .elementor-form .elementor-field-label{color:var(--pink-soft)}

/* ── Eingabefelder ────────────────────────────────────────────────────────── */
.bhl-page .elementor-form .elementor-field-textual{
  font-family:var(--body);font-size:var(--t-base);font-weight:300;
  color:var(--ink);background:#fff;border:1px solid var(--line-cream);
  border-radius:8px;padding:.8em 1em;width:100%;line-height:1.4;height:auto}
.bhl-page .elementor-form .elementor-field-textual:focus{
  outline:none;border-color:var(--pink);box-shadow:none}
.bhl-page .elementor-form textarea.elementor-field-textual{min-height:130px;resize:vertical}

.bhl-page .on-blue .elementor-form .elementor-field-textual,
.bhl-page .bhl-on-blue .elementor-form .elementor-field-textual{
  color:var(--cream);background:rgba(255,255,255,.08);border-color:var(--line-blue)}
.bhl-page .on-blue .elementor-form .elementor-field-textual::placeholder,
.bhl-page .bhl-on-blue .elementor-form .elementor-field-textual::placeholder{color:rgba(201,203,228,.62)}
.bhl-page .on-blue .elementor-form .elementor-field-textual:focus,
.bhl-page .bhl-on-blue .elementor-form .elementor-field-textual:focus{
  border-color:var(--pink);background:rgba(255,255,255,.12)}

/* ── Absendeknopf: der Raised-Button des Entwurfs ─────────────────────────── */
.bhl-page .elementor-form .elementor-button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-size:var(--t-base);font-weight:400;letter-spacing:.16em;
  padding:.85em 1.8em;border:1px solid transparent;border-radius:6px;
  background:var(--pink);color:var(--blue);
  box-shadow:0 4px 0 0 var(--pink-edge),0 12px 24px rgba(248,141,167,.4);
  transition:transform .12s ease,box-shadow .12s ease}
.bhl-page .elementor-form .elementor-button[type="submit"]:hover{
  color:var(--blue);transform:translateY(2px);
  box-shadow:0 2px 0 0 var(--pink-edge),0 8px 16px rgba(248,141,167,.34)}
.bhl-page .elementor-form .elementor-button[type="submit"]:active{
  transform:translateY(4px);box-shadow:0 0 0 0 var(--pink-edge),0 4px 10px rgba(248,141,167,.3)}

/* ── Einwilligung und Rückmeldungen ───────────────────────────────────────── */
.bhl-page .elementor-form .elementor-field-type-acceptance .elementor-field-option label{
  font-family:var(--body);font-size:.84rem;font-weight:300;color:var(--muted-ink);
  text-transform:none;letter-spacing:0}
.bhl-page .on-blue .elementor-form .elementor-field-type-acceptance .elementor-field-option label,
.bhl-page .bhl-on-blue .elementor-form .elementor-field-type-acceptance .elementor-field-option label{
  color:var(--muted-blue)}
.bhl-page .elementor-form .elementor-field-type-acceptance a{color:var(--pink-ink)}
.bhl-page .on-blue .elementor-form .elementor-field-type-acceptance a,
.bhl-page .bhl-on-blue .elementor-form .elementor-field-type-acceptance a{color:var(--pink)}

.bhl-page .elementor-message{
  font-family:var(--display);font-style:italic;font-size:var(--t-base);
  color:var(--pink-ink);background:none;border:0;padding:var(--s2) 0 0}
.bhl-page .on-blue .elementor-message,
.bhl-page .bhl-on-blue .elementor-message{color:var(--pink)}

/* ── Die eigene Kopfzeile der Widgets ──────────────────────────────────────
   bh_events und bh_nouveautes geben eine eigene Abschnittsüberschrift aus
   (im Panel „Abschnittstitel" bzw. „Kopf anzeigen"). Steht darüber schon die
   Kopfzeile der Sektion, ist das derselbe Satz zweimal — dazu deren Abstand,
   der auf der Startseite eine Lücke von mehreren hundert Pixeln aufriss.

   Die Brücke entfernt den Block, sobald sie ihn findet. Diese Regel ist das
   Netz darunter: Sie greift auch ohne JavaScript und in dem Augenblick, bevor
   das Skript läuft — sonst blitzt der doppelte Titel beim Laden kurz auf.
   :has() liest „eine Sektion, die bereits eine Kopfzeile hat". */
.bhl-page section:has(.sec-head) .bhe-section-header,
.bhl-page section:has(.sec-head) .bh-section-label{display:none}

/* ── Knöpfe, die keine Knöpfe sein wollen ──────────────────────────────────
   In hello-elementor/reset.css steht

     [type="button"], [type="submit"], button { display:inline-block }

   Der Attributselektor wiegt (0,1,0) — genauso viel wie eine Klasse. Wo der
   Entwurf ein <button> mit einer einklassigen Regel formt, entscheidet also
   die Ladereihenfolge, und die liegt nicht in unserer Hand: Hello meldet sein
   Reset teils später an, als unsere Abhängigkeit greift.

   Sichtbar wurde das im Lagerkatalog. Die Buchzeile ist ein <button>; statt
   des dreispaltigen Rasters stand sie als Block da, das Cover wuchs auf volle
   Breite — gemessen 1038 x 1384 statt 132 x 176 Pixel, die Zeile 1621 statt
   194 Pixel hoch. Dieselbe Falle trifft die Pfeile der Bilderreihe, den
   Warenkorb-Knopf und jeden Knopf im Buttonstil.

   Deshalb hier dieselben Werte noch einmal mit .bhl-page davor (0,2,0). */
.bhl-page .bk{display:grid}
.bhl-page .slide-nav{display:flex;align-items:center;justify-content:center}
.bhl-page .basket-fab{display:inline-flex}
.bhl-page .btn{display:inline-flex}

/* ── Der Warenkorb-Knopf und das Barrierefreiheits-Werkzeug ────────────────
   Beide sitzen unten rechts fest: der Knopf des Entwurfs und der runde Knopf
   des Zugänglichkeits-Plugins. Auf der Installation lag „Meine Bestellung"
   hinter dem Werkzeug. Der Knopf rückt deshalb eine Knopfhöhe nach oben —
   die Ecke gehört dem Plugin, das seine Lage nicht ändern lässt. */
.bhl-page .basket-fab{bottom:calc(var(--s3) + 68px)}
@media(max-width:560px){
  .bhl-page .basket-fab{bottom:calc(var(--s2) + 64px)}
}

/* ── Hellos Knopfvorgaben, Zustand für Zustand zurückgeholt ────────────────
   Die Reihenfolge allein reicht nicht. Hellos Regel für den Überfahrzustand

     [type=button]:hover, [type=submit]:hover, button:hover{
       background-color:#c36; color:#fff }

   wiegt (0,2,0) — Attribut plus Pseudoklasse. Der Entwurf ändert beim
   Überfahren meist nur Schatten und Position, definiert dort also gar keine
   Farbe und hat nichts, was dagegenhält. Ergebnis auf der Installation: jede
   Buchzeile wurde beim Überfahren knallrot.

   Dazu zwei Eigenschaften aus demselben Reset, die im Katalog Schaden
   anrichten: white-space:nowrap und text-align:center. Die Buchzeile IST ein
   <button>, beides vererbt sich auf Titel und Autor — der Titel brach nicht
   mehr um, lief über den Preis und aus der Karte hinaus.

   Hier steht deshalb je Bauteil noch einmal, was der Entwurf will. */

/* Die Buchzeile: Text bricht innerhalb der Karte um, linksbündig — und die
   Bonbonfarbe steht hier noch einmal, damit sie auch dann bleibt, wenn die
   Ladereihenfolge einmal wieder kippt. */
.bhl-page .bk{white-space:normal;text-align:left;
  background:rgb(var(--card-rgb,183,166,216));color:var(--blue);
  border:0;border-radius:18px;padding:14px;font-size:1rem}
.bhl-page .bk .bk-title,
.bhl-page .bk .bk-author,
.bhl-page .bk .bk-meta{white-space:normal;overflow-wrap:anywhere}

/* Kein Farbwechsel beim Überfahren — die Karte behält ihre Bonbonfarbe. */
.bhl-page .bk:hover,
.bhl-page .bk:focus,
.bhl-page .bk[aria-pressed="true"]:hover{
  background:rgb(var(--card-rgb,183,166,216));color:var(--blue)}

/* Die übrigen Knöpfe des Entwurfs, jeweils mit ihrem eigenen Zustand. */
.bhl-page .cat-cats button:hover{background:#fff;color:var(--blue);border-color:var(--pink)}
.bhl-page .cat-cats button[aria-pressed="true"]:hover{background:var(--blue);color:var(--cream)}
.bhl-page .basket-fab:hover{background:var(--pink);color:var(--blue)}
.bhl-page .modal-close:hover{background:none;color:var(--pink-ink)}
.bhl-page .burger:hover{background:none;color:var(--blue)}
.bhl-page .slide-nav:hover{background:var(--cream);color:var(--blue)}
.bhl-page .scroll-ctrls button:hover{background:var(--blue);color:var(--cream)}
.bhl-page .toggle button:hover{background:var(--cream);color:var(--blue)}
.bhl-page .btn-raised:hover{background:var(--pink);color:var(--blue)}
.bhl-page .btn-raised-blue:hover{background:var(--blue);color:var(--cream)}
.bhl-page .on-blue .btn-raised:hover{background:var(--pink);color:var(--blue)}