/* ============================================================
   hallo!wach verlag — Design-System
   ============================================================ */

/* ---------- Farb-Tokens: 3 Theme-Zustände ---------- */
:root{
  --rot:#D8231E; --rot-tief:#A81813;
  --text:#1C1613; --text-weich:#5A514B;
  --grund:#FAF6F0; --flaeche:#FFFFFF; --panel:#F1EAE0; --linie:#E4DACE;
  --schatten:0 18px 40px -22px rgba(40,20,16,.45);
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --rot:#F04A40; --rot-tief:#D23A31;
    --text:#F2EAE0; --text-weich:#B0A498;
    --grund:#161210; --flaeche:#211B16; --panel:#1C1712; --linie:#33291F;
    --schatten:0 20px 44px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --rot:#F04A40; --rot-tief:#D23A31;
  --text:#F2EAE0; --text-weich:#B0A498;
  --grund:#161210; --flaeche:#211B16; --panel:#1C1712; --linie:#33291F;
  --schatten:0 20px 44px -22px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--body); font-size:1.06rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.6rem);}

/* ---------- Festes „!"-Wasserzeichen (bleibt beim Scrollen stehen) ---------- */
.wz-fest{
  position:fixed; right:clamp(.5rem,3vw,3.5rem); top:0; height:100vh; height:100dvh;
  width:auto; opacity:.15; z-index:-1; pointer-events:none; user-select:none;
}
@media (max-width:820px){ .wz-fest{opacity:.07;} }

/* ---------- Typo-Bausteine ---------- */
.eyebrow{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:700; color:var(--text-weich); margin:0 0 1rem;
  display:flex; align-items:center; gap:.5rem;
}
.ruf{color:var(--rot); font-weight:900; font-size:1.15em; line-height:0; transform:translateY(.08em) rotate(-6deg); display:inline-block;}
h1,h2,h3{font-family:var(--display); text-transform:uppercase; font-weight:800; margin:0; text-wrap:balance;}
h1{font-size:clamp(2.6rem,6.4vw,5rem); line-height:.94; letter-spacing:-.02em;}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.02; letter-spacing:-.01em;}
h3{font-size:1.28rem; letter-spacing:.005em;}
p{margin:0 0 1rem;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  font-size:.82rem; padding:.85em 1.5em; border-radius:2px; display:inline-flex; align-items:center;
  gap:.5em; cursor:pointer; border:1.5px solid var(--rot); transition:transform .18s, background .18s, color .18s;
}
.btn-voll{background:var(--rot); color:#fff;}
.btn-voll:hover{background:var(--rot-tief); border-color:var(--rot-tief); transform:translateY(-2px);}
.btn-linie{background:transparent; color:var(--text);}
.btn-linie:hover{background:var(--rot); color:#fff; transform:translateY(-2px);}

/* ---------- Header ---------- */
header.top{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linie);
}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem;}
.brand img{height:38px; width:auto;}
nav.haupt{display:flex; gap:1.6rem; align-items:center;}
nav.haupt a{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:.78rem;
  font-weight:700; color:var(--text-weich); padding:.3em 0; position:relative;
}
nav.haupt a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--rot); transition:width .22s;}
nav.haupt a:hover, nav.haupt a.active{color:var(--text);}
nav.haupt a:hover::after, nav.haupt a.active::after{width:100%;}
.theme-btn{
  background:transparent; border:1px solid var(--linie); color:var(--text); border-radius:50%;
  width:36px; height:36px; cursor:pointer; font-size:1rem; display:grid; place-items:center; flex:0 0 auto;
}
.theme-btn:hover{border-color:var(--rot);}
@media (max-width:820px){ nav.haupt{display:none;} }

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.6rem,7vw,5.5rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
.hero-claim .intro{font-size:1.16rem; color:var(--text-weich); max-width:34ch; margin-top:1.4rem;}
.hero-claim .hw{color:var(--rot); font-family:var(--display); font-weight:800; font-style:normal; text-transform:uppercase; letter-spacing:.01em;}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem;}

.cluster{position:relative; display:grid; aspect-ratio:5/4; place-items:center;}
.cluster .karte{grid-area:1/1; width:52%; border-radius:3px; box-shadow:var(--schatten); border:5px solid var(--flaeche); transition:transform .35s;}
.cluster .k1{transform:translate(-42%,6%) rotate(-7deg);}
.cluster .k2{transform:translate(0,-6%) rotate(2.5deg); z-index:2;}
.cluster .k3{transform:translate(42%,10%) rotate(8deg);}
.cluster:hover .k1{transform:translate(-46%,2%) rotate(-9deg);}
.cluster:hover .k3{transform:translate(46%,6%) rotate(10deg);}
@media (max-width:820px){ .hero{grid-template-columns:1fr;} .cluster{max-width:440px; margin-inline:auto; width:100%;} }

/* ---------- Section-Rahmen ---------- */
section{padding-block:clamp(2.6rem,6vw,4.6rem); border-top:1px solid var(--linie);}
.sec-kopf{max-width:52ch; margin-bottom:2.4rem;}
.sec-kopf p{color:var(--text-weich); margin-top:.7rem;}

/* ---------- Zwei Türen ---------- */
.tueren{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
.tuer{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:4px; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; align-items:stretch; transition:transform .25s, box-shadow .25s;
}
.tuer:hover{transform:translateY(-4px); box-shadow:var(--schatten);}
.tuer .bild{width:118px; overflow:hidden; background:var(--panel);}
.tuer .bild img{height:100%; width:100%; object-fit:cover;}
.tuer .txt{padding:1.5rem 1.6rem;}
.tuer .txt p{font-size:.98rem; color:var(--text-weich); margin:.5rem 0 1.1rem;}
.tuer .mehr{font-family:var(--display); text-transform:uppercase; font-size:.76rem; font-weight:700; letter-spacing:.06em; color:var(--rot); display:inline-flex; gap:.4em;}
.tuer:hover .mehr .pfeil{transform:translateX(4px);}
.pfeil{transition:transform .2s; display:inline-block;}
@media (max-width:720px){ .tueren{grid-template-columns:1fr;} }

/* ---------- Programm-Slider ---------- */
.slider-kopf{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.8rem;}
.nav-btns{display:flex; gap:.5rem;}
.nav-btns button{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--linie); background:var(--flaeche);
  color:var(--text); cursor:pointer; font-size:1.1rem; display:grid; place-items:center; transition:.18s;
}
.nav-btns button:hover{border-color:var(--rot); color:var(--rot);}
.track{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none;}
.track::-webkit-scrollbar{display:none;}
.werk{flex:0 0 clamp(210px,26vw,264px); scroll-snap-align:start;}
.werk .cover{position:relative; border-radius:4px; overflow:hidden; box-shadow:var(--schatten); aspect-ratio:4/5; transition:transform .3s;}
.werk .cover img{width:100%; height:100%; object-fit:cover;}
.werk:hover .cover{transform:rotate(-1.5deg) scale(1.02);}
.werk .cover .ovl{
  position:absolute; inset:0; background:linear-gradient(to top,rgba(15,8,6,.92) 0%,rgba(15,8,6,.55) 35%,rgba(15,8,6,0) 62%);
  opacity:0; transition:opacity .3s; display:flex; align-items:flex-end; padding:1.1rem; color:#fff;
}
.werk:hover .cover .ovl, .werk:focus-within .cover .ovl{opacity:1;}
.werk .ovl .tag{font-family:var(--body); font-style:italic; font-size:.9rem; line-height:1.35;}
.werk .meta{display:flex; justify-content:space-between; gap:.6rem; margin-top:.85rem; align-items:baseline;}
.werk .meta .ti{font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:.92rem; letter-spacing:.01em;}
.werk .meta .bes{font-family:var(--display); font-size:.7rem; letter-spacing:.05em; color:var(--rot); font-weight:700; white-space:nowrap;}
.werk .aut{font-size:.82rem; color:var(--text-weich); font-style:italic;}

/* ---------- Themen ---------- */
.themen{background:var(--panel);}
.themen-in{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.8rem,5vw,4rem); align-items:center;}
.themen blockquote{margin:0; font-family:var(--body); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.4;}
.themen blockquote .hl{color:var(--rot); font-style:italic;}
.chips{display:flex; flex-wrap:wrap; gap:.65rem;}
.chip{
  font-family:var(--display); text-transform:uppercase; font-size:.74rem; font-weight:700; letter-spacing:.04em;
  padding:.55em 1em; border:1.5px solid var(--linie); border-radius:100px; color:var(--text-weich); background:var(--flaeche);
  transition:.18s;
}
.chip:hover{border-color:var(--rot); color:var(--rot); transform:translateY(-2px);}
@media (max-width:720px){ .themen-in{grid-template-columns:1fr;} }

/* ---------- News ---------- */
.news-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
.news{background:var(--flaeche); border:1px solid var(--linie); border-radius:4px; padding:1.6rem 1.7rem; transition:.22s;}
.news:hover{border-color:var(--rot); transform:translateY(-3px);}
.news time{font-family:var(--display); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; color:var(--rot); font-weight:700;}
.news h3{margin:.6rem 0 .5rem; font-size:1.12rem;}
.news p{font-size:.96rem; color:var(--text-weich); margin:0;}
@media (max-width:720px){ .news-grid{grid-template-columns:1fr;} }

/* ---------- Rotes CTA-Band (bewusst einfarbig, in beiden Themes) ---------- */
.band{background:#D8231E; color:#fff; border:none;}
.band-in{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;}
.band h2{color:#fff;}
.band p{color:rgba(255,255,255,.9); margin:.6rem 0 0; max-width:42ch; font-size:1.02rem;}
.band .btn-weiss{background:#fff; color:var(--rot-tief); border-color:#fff;}
.band .btn-weiss:hover{transform:translateY(-2px); background:#f7ece0;}
.band .btn-geist{background:transparent; border-color:rgba(255,255,255,.7); color:#fff;}
.band .btn-geist:hover{background:rgba(255,255,255,.14); transform:translateY(-2px);}
.band-cta{display:flex; gap:.8rem; flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer.fuss{background:#141010; color:#CDBFB2; border:none; padding-block:clamp(2.6rem,5vw,3.8rem);}
.fuss-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem;}
.fuss img{height:34px; margin-bottom:1.1rem;}
.fuss .kontakt{font-size:.94rem; line-height:1.7;}
.fuss .kontakt .mail{color:var(--rot);}
.fuss h4{font-family:var(--display); text-transform:uppercase; font-size:.74rem; letter-spacing:.1em; color:#fff; margin:0 0 1rem;}
.fuss ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.92rem;}
.fuss ul a:hover{color:#fff;}
.fuss .unten{margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#8B7D71;}
@media (max-width:720px){ .fuss-grid{grid-template-columns:1fr;} }

/* ---------- Reveal-Animation ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none; transition:none;}
  .cluster .karte{transition:none;}
}

/* ============================================================
   Innenseiten (Katalog, Detail, Formulare, statische Seiten)
   ============================================================ */

.seite{max-width:1180px; margin-inline:auto; padding-block:clamp(1.6rem,4vw,3rem);}
.breadcrumb{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  font-weight:700; color:var(--text-weich); margin-bottom:1.8rem;
}
.breadcrumb a{color:var(--text-weich);}
.breadcrumb a:hover{color:var(--rot);}
.breadcrumb span{margin:0 .3em; color:var(--linie);}

/* ---- Katalog-Raster ---- */
.katalog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:clamp(1.1rem,2.5vw,1.8rem);}
.kk{display:flex; flex-direction:column; gap:.7rem;}
.kk-cover{aspect-ratio:4/5; overflow:hidden; border-radius:4px; box-shadow:var(--schatten); background:var(--panel);}
.kk-cover img{width:100%; height:100%; object-fit:cover; transition:transform .35s;}
.kk:hover .kk-cover img{transform:scale(1.04) rotate(-1deg);}
.kk-info{display:flex; flex-direction:column; gap:.15rem;}
.kk-titel{font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:.94rem; letter-spacing:.01em; line-height:1.15;}
.kk-aut{font-style:italic; font-size:.85rem; color:var(--text-weich);}
.kk-bes{font-family:var(--display); font-size:.68rem; letter-spacing:.05em; color:var(--rot); font-weight:700; text-transform:uppercase;}
.kk-preis{font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--text);}

/* ---- Detailseite ---- */
.detail{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:start; margin-bottom:2.5rem;}
.detail-cover{border-radius:5px; overflow:hidden; box-shadow:var(--schatten); background:var(--panel); position:sticky; top:90px;}
.detail-cover img{width:100%; display:block;}
.detail-info h1{margin:.2rem 0 0;}
.detail-kurz{font-size:1.14rem; color:var(--text-weich); margin:1rem 0 1.4rem; font-style:italic;}
.meta-liste{display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin:0 0 1.4rem; padding:1.1rem 0; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);}
.meta-liste div{display:flex; flex-direction:column;}
.meta-liste dt{font-family:var(--display); text-transform:uppercase; font-size:.66rem; letter-spacing:.08em; color:var(--text-weich); font-weight:700;}
.meta-liste dd{margin:.15rem 0 0; font-weight:600;}
.detail-chips{margin-bottom:1.6rem;}
@media (max-width:720px){ .detail{grid-template-columns:1fr;} .detail-cover{position:static; max-width:280px;} }

/* ---- CTA-Box (Lizenz) ---- */
.cta-box{background:var(--panel); border:1px solid var(--linie); border-radius:6px; padding:1.4rem 1.5rem; margin:.5rem 0 1.4rem;}
.cta-box-titel{font-family:var(--display); text-transform:uppercase; font-weight:800; letter-spacing:.02em; margin:0 0 .5rem;}
.cta-box-text{font-size:.94rem; color:var(--text-weich); margin:0 0 1.1rem;}
.cta-box-btns{display:flex; gap:.7rem; flex-wrap:wrap;}

/* ---- Preis-Box (Buch) ---- */
.preis-box{background:var(--panel); border:1px solid var(--linie); border-radius:6px; padding:1.3rem 1.5rem; margin:.5rem 0 1.4rem;}
.preis-zeile{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem 0;}
.preis-zeile + .preis-zeile{border-top:1px solid var(--linie);}
.preis-zeile small{color:var(--text-weich); font-weight:400;}
.preis-zeile strong{font-family:var(--display); font-size:1.15rem;}
.btn-block{display:flex; width:100%; justify-content:center; margin-top:1rem;}
.preis-hinweis{font-size:.8rem; color:var(--text-weich); margin:.7rem 0 0; text-align:center;}

.querverweis{font-size:.95rem; color:var(--text-weich); margin-top:1rem;}
.querverweis a{color:var(--rot); font-weight:600;}

/* ---- Fließtext ---- */
.prosa{max-width:70ch;}
.prosa-breit{max-width:74ch;}
.prosa h2{font-size:1.5rem; margin:2rem 0 .8rem;}
.prosa p{margin:0 0 1.1rem;}
.prosa .lead{font-size:1.2rem; color:var(--text);}
.prosa .hw{color:var(--rot); font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.01em;}
.platzhalter-hinweis{background:var(--panel); border-left:3px solid var(--rot); padding:.8rem 1rem; font-size:.9rem; color:var(--text-weich); border-radius:0 4px 4px 0;}

/* ---- Formulare ---- */
.kontakt-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start;}
.formular{display:flex; flex-direction:column; gap:1rem; max-width:34rem;}
.formular label{display:flex; flex-direction:column; gap:.35rem; font-family:var(--display); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; font-weight:700; color:var(--text-weich);}
.formular input, .formular textarea{
  font-family:var(--body); font-size:1rem; color:var(--text); background:var(--flaeche);
  border:1.5px solid var(--linie); border-radius:4px; padding:.7em .8em; width:100%;
}
.formular input:focus, .formular textarea:focus{outline:none; border-color:var(--rot);}
.formular textarea{resize:vertical;}
.formular .btn{align-self:flex-start; margin-top:.4rem;}
.kontakt-info{background:var(--panel); border:1px solid var(--linie); border-radius:6px; padding:1.5rem 1.6rem;}
.kontakt-info h3{font-size:1.1rem; margin:0 0 .8rem;}
.kontakt-info p{font-size:.95rem; line-height:1.7; margin:0 0 1rem;}
.kontakt-info a{color:var(--rot);}
@media (max-width:720px){ .kontakt-layout{grid-template-columns:1fr;} }

.hinweis{padding:1rem 1.2rem; border-radius:6px; margin-bottom:1.4rem; font-size:.96rem;}
.hinweis-ok{background:#eef7ee; border:1px solid #a5d6a7; color:#1a5d1a;}
.hinweis-err{background:#fdecea; border:1px solid #f3c9c4; color:#a3271f;}
:root:not([data-theme="light"]) .hinweis-ok, :root[data-theme="dark"] .hinweis-ok{background:#16281a; border-color:#2f5d34; color:#a7dcab;}
:root:not([data-theme="light"]) .hinweis-err, :root[data-theme="dark"] .hinweis-err{background:#2c1512; border-color:#653029; color:#f0a79f;}

/* ---- Autoren ---- */
.autoren-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem;}
.autor-karte{display:flex; gap:1.1rem; align-items:center; background:var(--flaeche); border:1px solid var(--linie); border-radius:6px; padding:1.1rem 1.2rem; transition:.22s;}
.autor-karte:hover{border-color:var(--rot); transform:translateY(-3px); box-shadow:var(--schatten);}
.autor-foto{width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.autor-initialen{display:grid; place-items:center; background:var(--rot); color:#fff; font-family:var(--display); font-weight:800; font-size:1.3rem;}
.autor-text{display:flex; flex-direction:column; gap:.2rem;}
.autor-name{font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:1rem;}
.autor-bio{font-size:.88rem; color:var(--text-weich); line-height:1.4;}
.autor-detail{display:flex; gap:1.8rem; align-items:flex-start; margin-bottom:2rem; flex-wrap:wrap;}
.autor-foto-gross{width:120px; height:120px; border-radius:50%; object-fit:cover; flex:0 0 auto; font-size:2.4rem;}
.autor-bio-voll{max-width:60ch; color:var(--text-weich); margin-top:1rem;}
.werk-block{margin-top:2.5rem;}
.werk-block h2{font-size:1.4rem; margin-bottom:1.2rem;}

/* ============================================================
   Phase 3 — Warenkorb, Kasse, Buch-Bestellform
   ============================================================ */

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.btn-text{background:none; border:none; color:var(--text-weich); font-family:var(--display); text-transform:uppercase; font-size:.74rem; letter-spacing:.05em; font-weight:700; cursor:pointer; padding:.6em .4em;}
.btn-text:hover{color:var(--rot);}

/* ---- Header: Warenkorb-Zähler ---- */
.top-actions{display:flex; align-items:center; gap:.7rem; flex:0 0 auto;}
.wk-link{position:relative; color:var(--text); display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid transparent;}
.wk-link:hover{color:var(--rot); border-color:var(--linie);}
.wk-badge{position:absolute; top:-2px; right:-2px; background:var(--rot); color:#fff; font-family:var(--display); font-weight:800; font-size:.62rem; line-height:1; min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 4px;}

/* ---- Buch: Mengen-/Vorschauzeile ---- */
.menge-zeile{display:flex; align-items:center; gap:.9rem; margin:1.1rem 0 .3rem; flex-wrap:wrap;}
.menge-zeile label{font-family:var(--display); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; font-weight:700; color:var(--text-weich);}
.menge-input{width:5.2rem; font-family:var(--body); font-size:1rem; color:var(--text); background:var(--flaeche); border:1.5px solid var(--linie); border-radius:4px; padding:.55em .6em; text-align:center;}
.menge-input:focus{outline:none; border-color:var(--rot);}
.preis-vorschau{font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--rot);}

/* ---- Warenkorb ---- */
.wk-tabelle{border-top:1px solid var(--linie); margin-bottom:1.6rem;}
.wk-zeile{display:flex; gap:1.1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--linie);}
.wk-cover{flex:0 0 56px;}
.wk-cover img{width:56px; height:72px; object-fit:cover; border-radius:3px; box-shadow:var(--schatten);}
.wk-titel{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.25rem;}
.wk-titel a{font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:.95rem;}
.wk-titel a:hover{color:var(--rot);}
.wk-typ{font-size:.82rem; color:var(--text-weich);}
.wk-typ.ist-ks{color:var(--rot); font-weight:600;}
.wk-menge input{width:4.4rem; font-family:var(--body); font-size:1rem; color:var(--text); background:var(--flaeche); border:1.5px solid var(--linie); border-radius:4px; padding:.45em .5em; text-align:center;}
.wk-menge input:focus{outline:none; border-color:var(--rot);}
.wk-summe{flex:0 0 auto; min-width:6rem; text-align:right; font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums;}
.wk-entfernen{flex:0 0 auto; background:none; border:none; color:var(--text-weich); font-size:1.1rem; cursor:pointer; padding:.3em .5em; border-radius:4px; line-height:1;}
.wk-entfernen:hover{color:var(--rot); background:var(--panel);}

.wk-fuss{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start;}
.wk-aktionen{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;}
.wk-summen{min-width:min(340px,100%); flex:0 0 auto; background:var(--panel); border:1px solid var(--linie); border-radius:6px; padding:1.3rem 1.5rem;}
.wk-summe-zeile{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.4rem 0;}
.wk-summe-zeile strong{font-variant-numeric:tabular-nums;}
.wk-summe-zeile.gesamt{border-top:1px solid var(--linie); margin-top:.4rem; padding-top:.8rem; font-family:var(--display); text-transform:uppercase;}
.wk-summe-zeile.gesamt strong{font-size:1.3rem;}
.wk-summen .btn-block{margin-top:1rem;}
@media (max-width:640px){ .wk-fuss{flex-direction:column;} .wk-summen{width:100%;} }

/* ---- Kasse ---- */
.kasse-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start;}
.formular-reihe{display:flex; gap:1rem;}
.formular-reihe .klein{flex:0 0 8rem;}
.formular-reihe label{flex:1 1 auto;}
.formular small{color:var(--text-weich); font-weight:400; text-transform:none; letter-spacing:0;}
.kasse-zusammenfassung{background:var(--panel); border:1px solid var(--linie); border-radius:6px; padding:1.5rem 1.6rem; position:sticky; top:90px;}
.kasse-zusammenfassung h3{font-size:1.05rem; margin:0 0 1rem;}
.kz-zeile{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.4rem 0; font-size:.94rem;}
.kz-zeile small{color:var(--text-weich);}
.kz-zeile strong{font-variant-numeric:tabular-nums; white-space:nowrap;}
.kz-gesamt{border-top:1px solid var(--linie); margin-top:.5rem; padding-top:.8rem; font-family:var(--display); text-transform:uppercase; font-size:1rem;}
.kz-gesamt strong{font-size:1.2rem;}
.kz-zurueck{display:inline-block; margin-top:1rem; font-size:.86rem; color:var(--text-weich);}
.kz-zurueck:hover{color:var(--rot);}
@media (max-width:720px){ .kasse-layout{grid-template-columns:1fr;} .kasse-zusammenfassung{position:static;} }

/* ---- Danke ---- */
.danke-box{max-width:52rem; margin:0 auto; text-align:center; padding-block:clamp(1rem,4vw,2.5rem);}
.danke-lead{font-size:1.15rem; color:var(--text-weich); max-width:40ch; margin:1rem auto 1.8rem;}
.danke-uebersicht{text-align:left; max-width:30rem; margin:0 auto 2rem; background:var(--panel); border:1px solid var(--linie); border-radius:6px; padding:1.2rem 1.5rem;}
.danke-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}

/* ============================================================
   Phase 4 — Aufführungslizenzen (Auswahl + Formulare)
   ============================================================ */

/* Select genauso stylen wie Inputs */
.formular select{
  font-family:var(--body); font-size:1rem; color:var(--text); background:var(--flaeche);
  border:1.5px solid var(--linie); border-radius:4px; padding:.7em .8em; width:100%; cursor:pointer;
}
.formular select:focus{outline:none; border-color:var(--rot);}

/* Honeypot: für Menschen unsichtbar */
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none;}

/* Auswahlseite */
.typ-wahl{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
.typ-karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:6px; padding:1.7rem 1.8rem; display:flex; flex-direction:column; gap:.6rem; transition:transform .25s, box-shadow .25s, border-color .25s;}
.typ-karte:hover{border-color:var(--rot); transform:translateY(-4px); box-shadow:var(--schatten);}
.typ-karte h3{font-size:1.18rem;}
.typ-karte p{font-size:.95rem; color:var(--text-weich); margin:0;}
.typ-karte .mehr{margin-top:auto; padding-top:.6rem; font-family:var(--display); text-transform:uppercase; font-size:.76rem; font-weight:700; letter-spacing:.06em; color:var(--rot); display:inline-flex; gap:.4em;}
.typ-karte:hover .mehr .pfeil{transform:translateX(4px);}
@media (max-width:640px){ .typ-wahl{grid-template-columns:1fr;} }

/* Formular-Layout mit Seitenspalte */
.lizenz-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start;}
@media (max-width:820px){ .lizenz-layout{grid-template-columns:1fr;} }
.lizenz-intro{background:var(--panel); border-left:3px solid var(--rot); border-radius:0 6px 6px 0; padding:1.1rem 1.4rem; margin-bottom:1.6rem;}
.lizenz-intro p{margin:0 0 .7rem; font-size:.96rem;}
.lizenz-intro p:last-child{margin-bottom:0;}
.lizenz-mini{color:var(--text-weich); font-size:.9rem !important;}