/* Drauf & Dran Teamwear · © 2026 Jens Richter · jens-richter.com · Alle Rechte vorbehalten */
/* =====================================================================
   Textilprint-OS — UI
   Corporate Design (v2.0.0):
   Oswald (Headlines) + Roboto (Body), dunkles Orange #9A4A1F / Anthrazit #15181C (v2.0.0),
   kühles Hellgrau #f7f8fc, dunkles Slate #323a45, Bildkacheln mit Overlay.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root{
  --ink:#1a1a1a;
  --ink-soft:#3a3f47;
  --body:#6d6f72;
  --muted:#94949a;
  --line:#e4e7ee;
  --line-soft:#eceef6;
  --paper:#f7f8fc;
  --card:#ffffff;
  --accent:#9A4A1F;
  --accent-dark:#7A3916;
  --orange:#8C4420;
  --steel:#15181C;
  --steel-dark:#0D0F12;
  --header-bg:#0F1114;
  --header-fg:#E8E8E8;
  --ok:#2e7d32;
  --radius:10px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(26,26,26,.05), 0 10px 30px -14px rgba(26,26,26,.16);
  --shadow-lg:0 26px 60px -24px rgba(26,26,26,.35);
  --maxw:1180px;
  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Roboto',Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--body);background:#fff;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;
  letter-spacing:.005em;margin:0;color:var(--ink);text-transform:none}
h1{font-size:clamp(2rem,4.2vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2.15rem)}
h3{font-size:1.18rem}
p{margin:0 0 1rem}
strong,b{color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);
  font-weight:500;font-size:.95rem;padding:.8rem 1.7rem;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;transition:.18s ease;line-height:1;
  letter-spacing:.01em;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(154,74,31,.55)}
.btn--ghost{background:transparent;border-color:var(--steel);color:var(--steel)}
.btn--ghost:hover{background:var(--steel);color:#fff}
.btn--light{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--light:hover{border-color:var(--steel)}
.btn--dark{background:var(--steel);color:#fff}
.btn--dark:hover{background:var(--steel-dark)}
.btn--lg{padding:.95rem 2rem;font-size:1.02rem}

/* ---------- Topbar (Orange, wie draufunddran.net) ---------- */
.topbar{background:var(--orange);color:#fff;font-size:.84rem}
.topbar .container{display:flex;align-items:center;height:36px;gap:18px}
.topbar a{color:#fff;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{text-decoration:underline}
.topbar .tb-tel svg{width:14px;height:14px}
.topbar .tb-spacer{flex:1}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,24,33,.02)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:28px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);
  font-weight:700;font-size:1.4rem;letter-spacing:.01em;color:var(--accent);
  text-transform:uppercase;line-height:1}
.brand .amp{color:var(--ink)}
.brand small{font-family:var(--font-body);font-weight:700;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);
  padding-left:.55rem;align-self:center}
.nav-links{display:flex;gap:28px;font-weight:600;font-size:.93rem;white-space:nowrap}
.nav-links .nav-menu-cta{display:none}
.nav-links a{color:var(--ink-soft);position:relative;padding:.2rem 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .2s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:14px;align-items:center}
.cart-link{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);
  border-radius:50%;color:var(--ink);transition:.15s;flex:none}
.cart-link svg{width:20px;height:20px}
.cart-link:hover{border-color:var(--accent);color:var(--accent-dark)}
.cart-count{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;
  padding:0 5px;border:2px solid #fff;line-height:1}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink);width:42px;height:42px;
  border:1px solid var(--line);border-radius:10px;place-items:center;flex:none}
.burger svg{width:21px;height:21px}
.burger.open{border-color:var(--accent);color:var(--accent-dark)}

/* ---------- Hero (zentriert, heller Grund mit Schwüngen) ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(3.2rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem);
  background:#fff;text-align:center}
.hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:
   radial-gradient(900px 380px at 88% -10%, rgba(255,102,0,.10), transparent 60%),
   radial-gradient(760px 360px at 6% 112%, rgba(50,58,69,.08), transparent 55%)}
.hero>.container{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;
  font-family:var(--font-body)}
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:2px;background:var(--accent)}
.hero h1{margin:0 auto 1rem;max-width:22ch}
.hero .lead{font-size:1.14rem;color:var(--body);max-width:54ch;margin:0 auto 1.8rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:1.6rem}
.hero-trust{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:.9rem;font-weight:500}
.hero-trust b{color:var(--ink)}

/* ---------- Sections ---------- */
.section{padding:clamp(2.8rem,6vw,4.6rem) 0}
.section--paper{background:var(--paper)}
.section--card{background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{max-width:62ch;margin-bottom:2.2rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .eyebrow{margin-bottom:.7rem}
.section-head p{color:var(--body);font-size:1.04rem}

/* ---------- Benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.2s}
.benefit:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.benefit .ic{width:42px;height:42px;border-radius:9px;background:rgba(255,54,0,.09);
  display:grid;place-items:center;color:var(--accent);margin-bottom:14px;font-size:1.25rem;font-weight:700}
.benefit b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  margin-bottom:.35rem;color:var(--ink)}
.benefit p{color:var(--body);font-size:.92rem;margin:0}

/* ---------- Audience: Bildkacheln mit dunkler Overlay-Box (D&D-Stil) ---------- */
.audience{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.aud-card{position:relative;overflow:hidden;min-height:230px;color:#fff;display:flex;
  align-items:flex-end;padding:14px;transition:.25s;
  background:linear-gradient(165deg,#3a4350,#252b34)}
.aud-card:nth-child(1){background:linear-gradient(165deg,#39424f,#20262e)}
.aud-card:nth-child(2){background:linear-gradient(165deg,#4a4039,#2b241f)}
.aud-card:nth-child(3){background:linear-gradient(165deg,#502a20,#2e1812)}
.aud-card:nth-child(4){background:linear-gradient(165deg,#2e3d4d,#1b2530)}
.aud-card:nth-child(5){background:linear-gradient(165deg,#46392b,#28201610)}
.aud-card::before{content:'';position:absolute;inset:0;
  background:radial-gradient(420px 240px at 75% 18%, rgba(255,102,0,.18), transparent 65%)}
.aud-card .box{position:relative;z-index:1;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
  padding:14px 16px;width:100%;transition:.25s}
/* Foto-Hintergrund der Zielgruppen-Kacheln (1.20.5) */
.aud-card .aud-bg,.aud-card picture{position:absolute;inset:0;z-index:0}
.aud-card .aud-bg,.aud-card picture img{width:100%;height:100%;object-fit:cover;display:block}
.aud-card.has-img::before{background:linear-gradient(165deg,rgba(0,0,0,.12),rgba(0,0,0,.42));z-index:0}
.aud-card.has-img:hover .aud-bg,.aud-card.has-img:hover picture img{transform:scale(1.04)}
.aud-card .aud-bg,.aud-card picture img{transition:transform .35s ease}
.aud-card:hover .box{background:rgba(255,54,0,.82)}
.aud-card .k{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:.25rem}
.aud-card b{font-family:var(--font-display);font-weight:600;font-size:1.18rem;line-height:1.15;color:#fff}
.aud-card .arr{position:absolute;top:14px;right:14px;z-index:1;opacity:.55;transition:.2s;color:#fff}
.aud-card:hover .arr{opacity:1;transform:translateX(3px)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.step{padding:26px 20px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .n{font-family:var(--font-display);font-weight:600;font-size:2rem;color:var(--accent);line-height:1;margin-bottom:.55rem}
.step b{display:block;margin-bottom:.3rem;font-size:1rem;font-family:var(--font-display);font-weight:600;color:var(--ink)}
.step p{color:var(--body);font-size:.88rem;margin:0}

/* ---------- Technique cards ---------- */
.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tech-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.tech-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.tech-card .top{height:140px;position:relative;color:#fff;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(160deg,#39424f,#20262e)}
.tech-card:nth-child(2) .top{background:linear-gradient(160deg,#4a3326,#2b1c13)}
.tech-card:nth-child(3) .top{background:linear-gradient(160deg,#2e3d4d,#16202b)}
.tech-card .top::after{content:'';position:absolute;inset:0;
  background:radial-gradient(360px 200px at 80% 0%, rgba(255,102,0,.22), transparent 65%)}
.tech-card .top .badge{position:relative;z-index:1;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:.35rem .7rem;border-radius:999px;font-weight:700}
/* Foto in der Übersichts-Kachel (1.20.3) — füllt .top, Badge bleibt obenauf */
.tech-card .top .tech-card__img,
.tech-card .top picture{position:absolute;inset:0;z-index:0}
.tech-card .top .tech-card__img,
.tech-card .top picture img{width:100%;height:100%;object-fit:cover;display:block}
.tech-card.has-img .top::after{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05) 55%,transparent)}
.tech-card.has-img .top .badge{background:rgba(0,0,0,.45)}
.tech-card .body{padding:20px}
.tech-card h3{margin-bottom:.35rem}
.tech-card .eign{color:var(--muted);font-size:.86rem;margin:.6rem 0 0}

/* ---------- Product grid ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.prod:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.prod .ph{aspect-ratio:1;background:linear-gradient(155deg,#f1f2f7,#e4e7ee);position:relative;display:grid;place-items:center}
.prod .ph .mono{font-family:var(--font-display);font-weight:600;font-size:2.6rem;color:#c6cad4}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .hero-flag{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.prod .info{padding:16px 16px 18px;display:flex;flex-direction:column;gap:.3rem;flex:1}
.prod .brand-tag{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.prod .nm{font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.2;color:var(--ink)}
.prod .swatches{display:flex;gap:5px;margin:.2rem 0 .5rem}
.prod .sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.prod .price{margin-top:auto;font-weight:700;color:var(--ink)}
.prod .price small{font-weight:400;color:var(--muted)}

/* ---------- Catalog layout ---------- */
.cat-head{padding:2.4rem 0 1.2rem}
.cat-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2rem}
.chip{font-size:.88rem;font-weight:500;padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);transition:.16s}
.chip:hover{border-color:var(--steel)}
.chip.active{background:var(--steel);color:#fff;border-color:var(--steel)}

/* ---------- Product detail ----------
   Welle 1.56.6 — Die alte .pd-Detailseite ist vollständig durch das .pdx-
   Redesign ersetzt. Keine View trägt mehr die .pd-Klasse, daher sind die
   früheren .pd-/.pd .gallery-/.pd .pd-thumb-Regeln entfernt. Die wenigen
   Klassen, die das .pdx-Markup mit dem Designer (.dz) teilt — Swatches —
   laufen jetzt unter .pdx/.dz (siehe unten). Alle übrigen geteilten Regeln
   gelten nur noch dem Designer (.dz). */
.dz .opt-label{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.2rem 0 .5rem}
.pdx .swatch-row,.dz .swatch-row{display:flex;gap:8px;flex-wrap:wrap}
.pdx .swatch,.dz .swatch{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:999px;
  padding:.4rem .85rem;font-size:.88rem;font-weight:600;background:#fff;cursor:pointer;color:var(--ink);
  transition:border-color .12s,box-shadow .12s}
.pdx .swatch:hover,.dz .swatch:hover{border-color:var(--ink-soft)}
.pdx .swatch i,.dz .swatch i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.12);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);flex:0 0 auto}
.pdx .swatch.sel,.dz .swatch.sel,.pdx .swatch.is-active,.dz .swatch.is-active{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none!important}
.pdx .swatch--more,.dz .swatch--more{color:var(--muted);font-weight:700;cursor:pointer}
.pdx .swatch--more:hover,.dz .swatch--more:hover{border-color:var(--ink-soft);color:var(--ink)}
.pdx .swatch.is-hidden,.dz .swatch.is-hidden{display:none}
.dz .size-row{display:flex;gap:8px;flex-wrap:wrap}
.dz .size{min-width:46px;text-align:center;border:1px solid var(--line);border-radius:8px;padding:.5rem;
  font-weight:700;font-size:.9rem;background:#fff;cursor:pointer;color:var(--ink-soft)}
.dz .tech-pick:not(.pdx-tech){display:flex;gap:10px;flex-wrap:wrap}
/* Welle 1.56.7 — Die Haupt-Veredelungskarten tragen jetzt .pdx-techcard
   (gleiche Optik wie auf der Produktseite). Die alten .tech-pill-Regeln gelten
   daher nur noch den DYNAMISCH erzeugten Pills (Garnfarben, Etikettformen),
   die kein .pdx-techcard tragen — sonst überschriebe .dz .tech-pill (0,2,0)
   das .pdx-techcard (0,1,0). */
.dz .tech-pill:not(.pdx-techcard){border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;font-size:.88rem;
  flex:1;min-width:130px;background:#fff;cursor:pointer;text-align:left;color:var(--ink-soft)}
.dz .tech-pill:not(.pdx-techcard) b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink)}
.dz .tech-pill:not(.pdx-techcard) span{color:var(--muted);font-size:.8rem}
.dz .price-box{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dz .price-box .big{font-family:var(--font-display);font-weight:600;font-size:1.8rem;color:var(--ink)}
.dz .price-box small{color:var(--muted);font-weight:400}

/* ---------- CTA band ---------- */
.cta-band{background:var(--steel);color:#fff;border-radius:var(--radius);padding:clamp(2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:'';position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,102,0,.45),transparent 70%)}
.cta-band h2{color:#fff;max-width:20ch;position:relative;z-index:1}
.cta-band p{color:rgba(255,255,255,.8);margin:.6rem 0 0;max-width:46ch;position:relative;z-index:1}
.cta-band .btn{position:relative;z-index:1}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:640px;box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700;font-size:.84rem;margin-bottom:.4rem;color:var(--ink-soft)}
.field input,.field textarea,.field select{width:100%;padding:.8rem .9rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent);background:#fff}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.field.row2{grid-template-columns:1fr}}
.field.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:560px){.field.row3{grid-template-columns:1fr}}

.tw-flash{padding:.85rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem}
.tw-flash--success{background:#eaf6ec;border:1px solid #b5dcb9;color:#1f6b27}
.tw-flash--error{background:#fdecec;border:1px solid #f5b5b5;color:#a31010}
.tw-flash--info{background:#eef3fb;border:1px solid #c2d4ef;color:#234e8c}
.tw-flash--warning{background:#fdf6e7;border:1px solid #ecd9a6;color:#8a6400}

/* Einmal-Anzeige für frisch erzeugte Zugangsdaten (Welle 1.110.1).
   Bewusst anders als eine Meldung: ein Kasten, den man als „hier steht ein
   Geheimnis" liest, statt Fließtext zwischen Speichern- und Löschen-Hinweisen. */
.tw-einmal{margin-bottom:1.25rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);
  background:#fdf6e7;border:1px solid #e2b13b;border-left-width:4px}
.tw-einmal__kopf{font-weight:700;color:#8a6400;margin-bottom:.35rem}
.tw-einmal__hinweis{margin:0 0 .75rem;font-size:.86rem;color:#6b5220;line-height:1.45}
.tw-einmal__zeile{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;flex-wrap:wrap}
.tw-einmal__zeile>span{min-width:5.5rem;font-size:.84rem;color:#6b5220}
.tw-einmal__zeile input{flex:1 1 18rem;min-width:0;padding:.45rem .6rem;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.86rem;border:1px solid #e2b13b;border-radius:var(--radius-sm);background:#fff;color:#3b2f10}

/* ---------- Footer (hell, wie draufunddran.net) ---------- */
.site-footer{background:var(--paper);color:var(--body);border-top:1px solid var(--line);
  padding:3rem 0 1.6rem;margin-top:4rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;margin-bottom:2rem}
.foot-grid > :first-child{grid-column:span 2;min-width:240px}
.site-footer h4{color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1rem;margin:0 0 .8rem}
.site-footer a{display:block;color:var(--body);padding:.18rem 0}
.site-footer a:hover{color:var(--accent)}
.foot-brand{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--accent);
  text-transform:uppercase;margin-bottom:.5rem}
.foot-brand .amp{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line);padding-top:1.2rem;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--muted)}
.foot-bottom a{display:inline;color:inherit;padding:0;text-decoration:underline}
.foot-bottom a:hover{color:var(--accent)}
/* Cookie-Hinweis (rein informativ, Welle 0.73.2) */
.cookie-hinweis{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#1a1f29;color:#e6e8ec;
  border-top:2px solid var(--accent);box-shadow:0 -6px 24px rgba(0,0,0,.28)}
.cookie-hinweis__inner{max-width:1100px;margin:0 auto;padding:.85rem 1.1rem;display:flex;align-items:center;
  gap:1rem;flex-wrap:wrap;justify-content:space-between}
.cookie-hinweis p{margin:0;font-size:.85rem;line-height:1.5;color:#c9cdd6;max-width:78ch}
.cookie-hinweis a{color:#fff;text-decoration:underline}
.cookie-hinweis .btn{white-space:nowrap;flex:none}
@media (max-width:560px){.cookie-hinweis__inner{flex-direction:column;align-items:stretch}
  .cookie-hinweis .btn{width:100%}}

/* ---------- Admin ---------- */
/* ---------- Produkt-Designer (MVP 1) ---------- */
.dz{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:42px;padding:2.2rem 0;align-items:start}
/* Welle 1.56.0 — beide Spalten EXPLIZIT verankern. Vorher hatte .dz-tools
   keinerlei eigene Grid-/Spaltenregel und lag nur „irgendwie" in Zelle 2.
   In Kombination mit der sticky, overflow-hidden, viewport-hohen .dz-stage
   konnte der Browser die Werkzeugspalte bei großem Mockup in dieselbe
   Grid-Zeile/-Spalte legen → sie scrollte optisch HINTER bzw. UNTER das Bild
   (Preis/Warenkorb/GESAMT klebten im Bildbereich übereinander). Jede Spalte
   bekommt jetzt ihre feste Grid-Column; physische Überlappung ist damit
   ausgeschlossen. */
.dz > .dz-stage{grid-column:1}
.dz > .dz-tools{grid-column:2;min-width:0;align-self:start}
.dz-stage{min-width:0;position:sticky;top:88px;align-self:start;
  /* Welle 1.35.0 — die gepinnte Vorschau darf NIE höher als der sichtbare
     Bereich werden. War sie das (großes Mockup wie das Shirt), konnte der
     Browser sie nicht sauber pinnen: der untere Teil (Hinweistext) blieb
     stehen, während die rechte Spalte (Farb-Swatches) darüber/darunter
     wegscrollte → optische Überlappung. Höhe an den Viewport koppeln und
     intern zusammenhalten. */
  max-height:calc(100vh - 104px);display:flex;flex-direction:column;overflow:hidden}
.dz-tabs{display:flex;gap:8px;margin-bottom:12px}
.dz-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.45rem 1rem;
  font-weight:700;font-size:.85rem;cursor:pointer;color:var(--ink-soft)}
.dz-tab.active{background:var(--steel);border-color:var(--steel);color:#fff}
.dz-canvas-holder{background:linear-gradient(155deg,#f1f2f7,#e4e7ee);border-radius:var(--radius);
  overflow:hidden;position:relative;min-height:0;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center}
/* Canvas-Maße setzt das JS (resize()) explizit in px — gegen Breite UND
   Viewport-Höhe gedeckelt. CSS hält ihn nur innerhalb der Bühne und zentriert
   ihn (flex am Holder), falls er bei Höhendeckelung schmaler als die Spalte ist. */
.dz-canvas-holder canvas{display:block;max-width:100%;max-height:100%;
  touch-action:none;cursor:grab}
/* Welle 0.62.0 — Drag&Drop-Zustand: Bild/Logo direkt auf die Fläche ziehen. */
.dz-canvas-holder.is-drop{outline:2px dashed var(--accent);outline-offset:-6px}
.dz-canvas-holder.is-drop::after{content:"Bild hier ablegen";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);
  background:rgba(255,255,255,.55);pointer-events:none;font-size:1rem}
.dz-warn{margin-top:12px;background:#fdf3df;border:1px solid #efdfba;color:#8a5a00;
  border-radius:10px;padding:.7rem .9rem;font-size:.86rem;display:flex;flex-direction:column;gap:.45rem;
  position:relative;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.dz-tabs{flex:0 0 auto}
#tw-dz-ampel,.dz-warn{flex:0 0 auto}
.dz-hint{color:var(--muted);font-size:.8rem;margin-top:.7rem;flex:0 0 auto}
.dz-tools h1{font-size:1.7rem;margin:0 0 1rem}
.dz-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
.dz-block-titel{font-family:var(--font-display);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.8rem}
.dz-addrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.dz-mini{padding:.4rem .7rem;font-size:.82rem}
.dz-del{color:#b3261e}
.dz-leer{color:var(--muted);font-size:.85rem;margin-top:.9rem;background:#fafbfe;
  border:1px dashed var(--line);border-radius:8px;padding:.8rem .9rem}
.dz-achsen{background:#fafbfe;border:1px solid var(--line);border-radius:8px;padding:.7rem .85rem}
/* Welle 1.57.0 — DTF-Druckvorschau: volle Spaltenbreite (Grid) + Lightbox.
   Karten füllen die Spalte statt 84px-Daumenkino; Klick öffnet die Großansicht. */
.dz-dtfpv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.dz-dtfpv figure{margin:0;text-align:center;font-size:.72rem;color:var(--muted)}
.dz-dtfpv button.dz-pv-btn{display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;cursor:zoom-in;background:
  repeating-conic-gradient(#e9e9ee 0% 25%,#fff 0% 50%) 0 0/16px 16px;transition:box-shadow .15s,border-color .15s}
.dz-dtfpv button.dz-pv-btn:hover{border-color:var(--accent,#e8502e);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.dz-dtfpv button.dz-pv-btn:focus-visible{outline:2px solid var(--accent,#e8502e);outline-offset:2px}
.dz-dtfpv img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain}
.dz-dtfpv figcaption{margin-top:.3rem;font-weight:600}
/* Lightbox */
.dz-lightbox{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(15,17,22,.9);padding:2.5rem 1rem 1.5rem}
.dz-lightbox[hidden]{display:none}
.dz-lightbox__stage{max-width:min(92vw,1100px);max-height:78vh;border-radius:10px;
  background:repeating-conic-gradient(#3a3d44 0% 25%,#2a2c31 0% 50%) 0 0/24px 24px;
  box-shadow:0 12px 48px rgba(0,0,0,.5);overflow:hidden;display:flex}
.dz-lightbox__stage img{max-width:min(92vw,1100px);max-height:78vh;object-fit:contain;display:block}
.dz-lightbox__cap{color:#f3f4f6;font-size:.95rem;font-weight:600;margin-top:1rem;text-align:center}
.dz-lightbox__tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.9rem}
.dz-lightbox__tabs button{padding:.45rem .9rem;font-size:.84rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#e5e7eb}
.dz-lightbox__tabs button.is-active{background:#fff;color:#15171c;border-color:#fff}
.dz-lightbox__close{position:absolute;top:1rem;right:1.1rem;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;font-size:1.4rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dz-lightbox__close:hover{background:rgba(0,0,0,.55)}
.dz-feld{margin-top:.8rem}
.dz-feld label{display:block;font-size:.74rem;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
/* Welle 0.97.1 — alle Texteingaben im Designer einheitlich gestalten
   (vorher fielen type=number und textarea auf den Browser-Default zurück
   → unrunde „DOS\"-Felder). */
.dz-feld input[type=text],.dz-feld input[type=number],.dz-feld textarea,.dz-feld select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.55rem .7rem;font-size:.92rem;font-family:inherit;color:var(--ink);
  background:var(--paper);transition:border-color .15s,background .15s;-webkit-appearance:none;appearance:none}
.dz-feld textarea{line-height:1.4}
.dz-feld select{-webkit-appearance:none;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 fill='%23888' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.dz-feld input[type=text]:focus,.dz-feld input[type=number]:focus,.dz-feld textarea:focus,.dz-feld select:focus{
  outline:0;border-color:var(--accent);background:#fff}
/* Maß-Felder (Breite × Höhe) behalten ihre kompakte feste Breite,
   bekommen aber dasselbe einheitliche Aussehen. */
.dz-feld input[type=number]::-webkit-inner-spin-button,
.dz-feld input[type=number]::-webkit-outer-spin-button{opacity:1}
.dz-feld input[type=range]{width:100%;accent-color:var(--accent)}
.dz-feld input[type=color]{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:.15rem}
.dz-feld--halb{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.dz-elacts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1rem}
@media(max-width:980px){.dz{grid-template-columns:1fr;gap:24px}
  .dz > .dz-stage,.dz > .dz-tools{grid-column:1}
  .dz-stage{position:static;top:auto;max-height:none;display:block}}

/* ---------- Warenkorb-Summen (Welle 0.97.1) ----------
   Label links, Betrag rechtsbündig; lange Labels (z. B. „Einrichtung
   Stickerei-Grundpreis (je Motiv) (einmalig)\") umbrechen sauber, ohne
   den Betrag auf eine eigene Zeile zu reißen. */
.sum-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.2rem;padding:.32rem 0;font-size:.95rem;line-height:1.35}
.sum-row>span:first-child{color:var(--ink-soft);min-width:0}
.sum-row .sum-amt{flex:none;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.sum-row--muted>span:first-child,.sum-row--muted .sum-amt{color:var(--muted)}
.sum-row--total{font-size:1.18rem;padding:.5rem 0 .1rem}
.sum-row--total .sum-amt{font-weight:700}
.sum-row--save>span,.sum-row--save .sum-amt{color:#1a7a3a}
.sum-note{font-size:.82rem;color:#1a7a3a;margin:.15rem 0 .2rem}
.cart-input{padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;color:var(--ink);background:var(--paper);-webkit-appearance:none;appearance:none}
.cart-input:focus{outline:0;border-color:var(--accent);background:#fff}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — Design-System (Welle 0.9.0)
   Werkstatt-Charakter in der D&D-CI: Steel-Sidebar, präzise Flächen,
   Orange ausschließlich als Führungsfarbe (max. eine Primär-Aktion
   pro Kontext). Oswald für Display, Mono für Kennungen/Beträge.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --a-side:#262c35; --a-side-deep:#1e242c; --a-side-line:rgba(255,255,255,.07);
  --a-ok:#1f7a33; --a-ok-bg:#e8f5eb;
  --a-warn:#8a5a00; --a-warn-bg:#fdf3df;
  --a-danger:#b3261e; --a-danger-bg:#fdecea;
  --a-info:#1d5fa8; --a-info-bg:#e9f1fb;
  --a-neutral:#5b6068; --a-neutral-bg:#eef0f4;
  --a-accent-bg:#ffeae3;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.admin-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ── Sidebar ── */
.admin-side{background:var(--a-side);color:#cfd2d8;display:flex;flex-direction:column;
  padding:0 14px 18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-side .brand{display:flex;align-items:center;gap:10px;padding:22px 10px 20px;
  border-bottom:1px solid var(--a-side-line);margin-bottom:14px}
.admin-side .brand .mark{width:34px;height:34px;border-radius:8px;background:var(--accent);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.05rem;flex:none}
.admin-side .brand .t{line-height:1.15}
.admin-side .brand .t b{display:block;font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:.98rem;letter-spacing:.02em}
.admin-side .brand .t span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:#828a96}
.admin-side .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:#6e7682;
  padding:14px 12px 6px}

/* Akkordion-Gruppen (Welle 0.56.0) — nur die aktive Gruppe offen */
.admin-side .nav-grp{margin-top:6px}
.admin-side .nav-grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  color:#6e7682;padding:12px 12px 6px;user-select:none;transition:color .13s}
.admin-side .nav-grp>summary::-webkit-details-marker{display:none}
.admin-side .nav-grp>summary:hover{color:#aeb3bc}
.admin-side .nav-grp__chev{width:14px;height:14px;opacity:.6;transition:transform .18s ease}
.admin-side .nav-grp[open]>summary>.nav-grp__chev{transform:rotate(180deg)}
.admin-side .nav-grp[open]>summary{color:#9aa1ad}
.admin-side .nav-grp__body{padding-top:2px}

/* Eingerückte Unterpunkte (Welle 1.28.2) — z. B. Einstellungen → Steuersätze/KI/Cron/Lexware */
.admin-side .nav-sub{margin:1px 0}
.admin-side .nav-sub>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:4px;user-select:none}
.admin-side .nav-sub>summary::-webkit-details-marker{display:none}
.admin-side .nav-sub>summary>a{flex:1}
.admin-side .nav-sub__chev{width:14px;height:14px;flex:none;opacity:.55;margin-right:8px;
  color:#aeb3bc;transition:transform .18s ease}
.admin-side .nav-sub[open]>summary>.nav-sub__chev{transform:rotate(180deg)}
.admin-side .nav-sub__body{margin:1px 0 3px 22px;padding-left:8px;
  border-left:1px solid var(--a-side-line)}
.admin-side .nav-sub__body a{font-size:.85rem;padding:.42rem .6rem}
.admin-side .nav-sub__body a svg{width:15px;height:15px}
.admin-side nav a{display:flex;align-items:center;gap:11px;color:#aeb3bc;padding:.56rem .75rem;
  border-radius:8px;font-size:.9rem;margin-bottom:1px;position:relative;transition:.13s}
.admin-side nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;opacity:.75}
.admin-side nav a:hover{background:var(--a-side-deep);color:#fff}
.admin-side nav a.active{background:var(--a-side-deep);color:#fff;font-weight:600}
.admin-side nav a.active::before{content:'';position:absolute;left:-14px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.admin-side nav a.active svg{opacity:1;stroke:var(--accent)}
.admin-side .side-foot{margin-top:auto;border-top:1px solid var(--a-side-line);padding-top:12px}
.admin-side .side-foot .who{display:flex;align-items:center;gap:9px;padding:6px 10px 12px;color:#828a96;font-size:.78rem}
.admin-side .side-foot .who .dot{width:7px;height:7px;border-radius:50%;background:#3fbf5a;flex:none}
.admin-side .side-foot .who b{color:#cfd2d8;font-weight:600}

/* ── Hauptbereich + Seitenkopf ── */
.admin-main{padding:30px 38px 56px;background:var(--paper);min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.page-head .kicker{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:.45rem}
.page-head .kicker::before{content:'';width:18px;height:2px;background:var(--accent)}
.page-head h1{font-size:1.72rem;margin:0;line-height:1.1}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:.45rem;max-width:64ch}
.page-head .actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ── Karten ── */
.a-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(20,24,33,.04);margin-bottom:20px;overflow:hidden}
.a-card__head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--line-soft)}
.a-card__head h3{margin:0;font-size:1.02rem}
.a-card__head .hint{color:var(--muted);font-size:.8rem;font-weight:400}
.a-card__body{padding:20px}
.a-card__body--flush{padding:0}
.a-card__foot{padding:12px 20px;border-top:1px solid var(--line-soft);background:#fbfbfd;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ── Statistik-Karten ── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  display:flex;gap:14px;align-items:flex-start;box-shadow:0 1px 2px rgba(20,24,33,.04)}
.stat .ic{width:38px;height:38px;border-radius:9px;background:var(--a-accent-bg);color:var(--accent);
  display:grid;place-items:center;flex:none}
.stat .ic svg{width:19px;height:19px;stroke:currentColor}
.stat .v{font-family:var(--font-display);font-weight:600;font-size:1.7rem;color:var(--ink);line-height:1.05}
.stat .l{color:var(--muted);font-size:.8rem;margin-top:.15rem}
.stat a{font-size:.78rem;color:var(--accent-dark);font-weight:600}

/* ── Tabellen ── */
.table{width:100%;border-collapse:collapse;background:#fff}
.a-card .table{border:0}
.table:not(.a-card .table){border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th{text-align:left;background:#fbfbfd;padding:.62rem 1rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:.72rem 1rem;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--ink-soft);vertical-align:middle}
.table tbody tr:first-child td{border-top:0}
.table tbody tr{transition:.1s}
.table tbody tr:hover{background:#fafbff}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .mono{font-family:var(--font-mono);font-size:.82rem;letter-spacing:0}
.table .row-link{font-weight:600;color:var(--ink)}
.table .row-link:hover{color:var(--accent-dark)}
.table .sub{display:block;color:var(--muted);font-size:.78rem;font-weight:400;margin-top:.1rem}
.table tbody tr.klickzeile:hover{background:var(--a-neutral-bg)}
.table tbody tr.ist-spam{background:var(--a-danger-bg)}
.table tbody tr.ist-spam:hover{background:#fbe0dd}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;
  padding:.22rem .62rem;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.65}
.badge--ok{background:var(--a-ok-bg);color:var(--a-ok)}
.badge--warn{background:var(--a-warn-bg);color:var(--a-warn)}
.badge--danger{background:var(--a-danger-bg);color:var(--a-danger)}
.badge--info{background:var(--a-info-bg);color:var(--a-info)}
.badge--neutral{background:var(--a-neutral-bg);color:var(--a-neutral)}
.badge--accent{background:var(--a-accent-bg);color:var(--accent-dark)}
.badge--plain::before{display:none}
/* Abwärtskompatibilität (Frontend nutzt badge--neu/erledigt nicht, Views werden umgestellt) */
.badge--neu{background:var(--a-accent-bg);color:var(--accent-dark)}
.badge--erledigt{background:var(--a-ok-bg);color:var(--a-ok)}

/* ── Buttons (Admin-Erweiterung) ── */
.btn--ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn--ghost:hover{background:var(--a-neutral-bg);color:var(--ink)}
.btn--danger{background:#fff;border-color:#f0c4c0;color:var(--a-danger)}
.btn--danger:hover{background:var(--a-danger-bg);border-color:var(--a-danger)}
.btn--sm{padding:.5rem 1.1rem;font-size:.85rem;border-radius:999px}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Formulare ── */
.form-card{box-shadow:0 1px 2px rgba(20,24,33,.04)}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  margin-bottom:.32rem;letter-spacing:.01em}
.field .help{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.field input[type=text],.field input[type=email],.field input[type=password],.field input:not([type]),
.field input[type=number],.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:.58rem .75rem;font-size:.9rem;
  font-family:inherit;color:var(--ink);background:#fff;transition:.12s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,54,0,.12)}
.field .mono,.field input.mono{font-family:var(--font-mono);font-size:.82rem}
.check{display:flex;gap:.5rem;align-items:center;font-weight:400;font-size:.9rem;color:var(--ink-soft);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}

/* ── Schlüssel/Wert-Liste (Detailseiten) ── */
.kv{display:grid;grid-template-columns:170px 1fr}
.kv>div{padding:.62rem 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.kv>div:nth-child(-n+2){border-top:0}
.kv .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;padding-top:.78rem}
.kv .v{color:var(--ink-soft)}

/* ── Code/Token-Felder ── */
.tokenline{display:flex;gap:.45rem;align-items:stretch}
.tokenline input{flex:1;font-family:var(--font-mono);font-size:.78rem;padding:.55rem .7rem;
  background:#fbfbfd;border:1px solid var(--line);border-radius:8px;color:var(--ink-soft)}
code.chip{font-family:var(--font-mono);font-size:.74rem;background:var(--a-neutral-bg);color:var(--a-neutral);
  padding:.14rem .45rem;border-radius:5px}

/* ── Dropzone (Mediathek) ── */
.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:34px 24px;text-align:center;
  background:#fbfbfd;transition:.15s;cursor:pointer}
.dropzone:hover,.dropzone.is-drag{border-color:var(--accent);background:var(--a-accent-bg)}
.dropzone .dz-ic{width:42px;height:42px;border-radius:10px;background:var(--a-accent-bg);color:var(--accent);
  display:grid;place-items:center;margin:0 auto 12px}
.dropzone .dz-ic svg{width:21px;height:21px;stroke:currentColor}
.dropzone b{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.dropzone p{color:var(--muted);font-size:.82rem;margin:.35rem 0 0}

/* ── Mediathek-Grid ── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.media-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,24,33,.04)}
.media-card .ph{aspect-ratio:4/3;background:#f1f2f8;position:relative}
.media-card .ph img{width:100%;height:100%;object-fit:cover}
.media-card .ph .use{position:absolute;top:8px;right:8px}
.media-card .meta{padding:10px 12px 12px}
.media-card .meta input{width:100%;border:1px solid transparent;border-radius:6px;padding:.32rem .45rem;
  font-size:.82rem;color:var(--ink);background:transparent;transition:.12s}
.media-card .meta input:hover{border-color:var(--line)}
.media-card .meta input:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(255,54,0,.1)}
.media-card .dims{font-size:.7rem;color:var(--muted);font-family:var(--font-mono);padding:.3rem .45rem .4rem}
.media-card .acts{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-soft);
  padding:8px 10px}

/* ── Produktbild-Kacheln (Formular) ── */
.pic-grid{display:flex;gap:12px;flex-wrap:wrap}
.pic{width:148px;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;margin-bottom:.4rem}
.pic .check{font-size:.78rem}
.pic .btn{width:100%;margin-top:.4rem}

/* ── Modal ── */
.modal-back{display:none;position:fixed;inset:0;background:rgba(30,36,44,.55);z-index:80;
  align-items:center;justify-content:center;padding:20px}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:12px;max-width:880px;width:100%;max-height:82vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(20,24,33,.3)}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;
  border-bottom:1px solid var(--line-soft)}
.modal__head h3{margin:0;font-size:1.05rem}
.modal__body{padding:20px 22px;overflow:auto}

/* ── Flash ── */
.flash{display:flex;gap:.65rem;align-items:flex-start;border-radius:10px;padding:.85rem 1.05rem;
  margin-bottom:20px;font-size:.9rem;border:1px solid}
.flash--success{background:var(--a-ok-bg);color:var(--a-ok);border-color:#cfe8d4}
.flash--error{background:var(--a-danger-bg);color:var(--a-danger);border-color:#f4cbc7}
.flash::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;margin-top:.42rem}

/* ── Leere Zustände ── */
.empty{padding:46px 24px;text-align:center;color:var(--muted)}
.empty .e-ic{width:44px;height:44px;border-radius:11px;background:var(--a-neutral-bg);color:var(--a-neutral);
  display:grid;place-items:center;margin:0 auto 12px}
.empty .e-ic svg{width:21px;height:21px;stroke:currentColor}
.empty b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink-soft);font-size:1rem;margin-bottom:.2rem}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .benefits{grid-template-columns:repeat(2,1fr)}
  .audience{grid-template-columns:repeat(2,1fr)}
  .aud-card{min-height:180px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .tech{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{display:none}
  .nav-links{display:none}
  .burger{display:grid}
  .nav-cta-btn{display:none}
  .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(20,24,33,.12);
    padding:.4rem 0 .8rem}
  .site-header .nav-links.open a{padding:.85rem 22px;border-top:1px solid var(--line-soft);font-size:1rem;color:var(--ink-soft)}
  .site-header .nav-links.open a:hover{color:var(--accent)}
  .nav-links.open a:first-child{border-top:0}
  .nav-links.open a::after{display:none}
  .nav-links.open .nav-menu-cta{display:block;margin:.5rem 22px .2rem;padding:.8rem 1rem;text-align:center;
    background:var(--accent);color:#fff;border-radius:999px;font-weight:700;border-top:0}
  .topbar .container{height:32px;font-size:.8rem}
}

/* ============================================================
   Multi-Shop Cockpit (0.21.0): Shopfilter-Leiste + Kachel-Start
   ============================================================ */

/* --- Shopfilter (Segmented control über den Cockpit-Listen) --- */
.shopfilter{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  margin:-6px 0 18px;padding:6px;background:#fff;border:1px solid var(--line);
  border-radius:12px}
.shopfilter__label{font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;
  font-weight:700;color:var(--a-neutral);padding:0 .4rem 0 .55rem}
.shopfilter__chip{font-size:.86rem;font-weight:600;padding:.42rem .9rem;border-radius:8px;
  color:var(--a-neutral);transition:.15s;white-space:nowrap}
.shopfilter__chip:hover{background:var(--a-neutral-bg);color:var(--ink)}
.shopfilter__chip.is-active{background:var(--a-side);color:#fff}
.shopfilter__chip.is-active:hover{background:var(--a-side-deep);color:#fff}

/* --- Kachel-Startseite (eine Kachel je Shop) --- */
.shop-kachel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.shop-kachel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:.18s;position:relative;
  box-shadow:0 1px 2px rgba(20,24,33,.04)}
.shop-kachel::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--k-primary,#262c35),var(--k-accent,#e67e22))}
.shop-kachel:hover{transform:translateY(-2px);border-color:var(--k-accent,var(--steel));
  box-shadow:0 14px 30px rgba(20,24,33,.12)}
.shop-kachel.is-inaktiv{opacity:.62}
.shop-kachel__kopf{display:flex;align-items:center;gap:12px;padding:20px 20px 14px}
.shop-kachel__logo{width:42px;height:42px;border-radius:9px;object-fit:contain;
  background:#f4f5f8;border:1px solid var(--line-soft);flex:none}
.shop-kachel__mark{width:42px;height:42px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:#fff;
  background:linear-gradient(135deg,var(--k-primary,#262c35),var(--k-accent,#e67e22))}
.shop-kachel__titel{line-height:1.2;min-width:0}
.shop-kachel__titel b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.04rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-kachel__titel span{font-size:.78rem;color:var(--muted)}
.shop-kachel__badge{margin-left:auto;align-self:flex-start;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:.18rem .5rem;border-radius:6px;
  background:var(--a-neutral-bg);color:var(--a-neutral)}
.shop-kachel__stats{display:flex;gap:6px;padding:6px 20px 18px}
.shop-kachel__stats>div{flex:1;display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;background:var(--paper);border-radius:10px;min-width:0}
.shop-kachel__stats .v{font-family:var(--font-display);font-weight:600;font-size:1.12rem;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-kachel__stats .l{font-size:.7rem;color:var(--muted)}
.shop-kachel__fuss{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;border-top:1px solid var(--line-soft);font-weight:600;font-size:.88rem;
  color:var(--k-primary,var(--ink))}
.shop-kachel__fuss svg{width:18px;height:18px;stroke:currentColor;transition:transform .18s}
.shop-kachel:hover .shop-kachel__fuss svg{transform:translateX(3px)}
.shop-kachel--alle{border-style:dashed}

/* ── Externe Shops (Fulfillment-Frontends) ── */
.ext-shop-trenner{margin:34px 0 16px;padding-top:26px;border-top:1px solid var(--line-soft)}
.ext-shop-trenner h2{font-family:var(--font-display);font-weight:600;font-size:1.12rem;
  color:var(--ink);margin:0 0 4px}
.ext-shop-trenner p{margin:0;font-size:.82rem;color:var(--muted);max-width:60ch}
.shop-kachel--extern{border-style:solid}
.shop-kachel--neu{border-style:dashed;opacity:.92}
.shop-kachel__badge--extern{background:rgba(124,140,255,.14);color:#5b63c4}

@media (max-width:560px){
  .shop-kachel-grid{grid-template-columns:1fr}
  .shopfilter{margin-top:0}
}

/* ============================================================
   DTF-Shop (0.23.0): Storefront /dtf — dunkel + Gold, Staffelmodell
   ============================================================ */

/* v2.1.0 — Demo-Leiste (nur demo.<domain>) */
.demo-leiste{background:var(--accent);color:#fff;font-size:.82rem;font-weight:600}
.demo-leiste .container{display:flex;align-items:center;gap:16px;height:34px}
.demo-leiste__tag{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.25);padding:.15rem .55rem;border-radius:4px}
.demo-leiste__text{opacity:.92}
.demo-leiste a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.demo-leiste a:hover{opacity:.85}
@media (max-width:720px){.demo-leiste__text{display:none}}

/* v2.0.0 — EIN Auftritt: dunkler Header/Topbar für den ganzen Shop
   (vormals nur im DTF-Bereich). Akzent = dunkles Orange aus :root. */
.site-header{background:var(--header-bg);border-bottom-color:rgba(255,255,255,.08)}
.site-header .brand{color:#fff}
.site-header .brand .amp{color:var(--accent)}
.site-header .brand small{color:#9aa0a8;border-left-color:rgba(255,255,255,.2)}
.site-header .nav-links a{color:#d7d7d7}
.site-header .nav-links a:hover{color:#fff}
.topbar{background:#1a1d21;color:#cfcfcf}
.site-header .cart-link{color:#fff;border-color:rgba(255,255,255,.45)}
.site-header .cart-link svg{stroke:#fff}
.site-header .cart-link:hover{color:var(--accent);border-color:var(--accent)}
.site-header .cart-link:hover svg{stroke:var(--accent)}
.site-header .burger{color:#fff;border-color:rgba(255,255,255,.35)}

/* Hero (dunkel, Gold-Akzent) */
.dtf-hero{background:radial-gradient(120% 140% at 50% -20%,#23231f 0%,#0d0d0d 60%);color:#fff;padding:4.5rem 0 4rem;text-align:center}
.dtf-hero .eyebrow{color:var(--accent);letter-spacing:.12em}
.dtf-hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:.5rem 0 .8rem;line-height:1.08}
.dtf-hero h1 .gold{color:var(--accent)}
.dtf-hero .lead{color:#cfd0d2;max-width:62ch;margin:0 auto 1.6rem}
.dtf-hero .hero-cta{justify-content:center}

/* Trust-Leiste */
.dtf-trust{background:#161616;color:#e6e6e6;border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a}
.dtf-trust__row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;padding:14px 24px;font-size:.92rem}
.dtf-trust__row span{white-space:nowrap}

/* So-geht's-Schritte (3) */
.dtf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dtf-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.dtf-step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:#0d0d0d;color:var(--accent);font-weight:800;font-family:var(--font-display);margin-bottom:10px}
.dtf-step b{display:block;margin-bottom:4px}
.dtf-step p{color:var(--muted);font-size:.9rem;margin:0}

/* Produktkacheln */
.dtf-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.dtf-prod{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:.16s}
.dtf-prod:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,13,13,.14)}
.dtf-prod__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dtf-prod__head b{font-family:var(--font-display);font-size:1.08rem;color:var(--ink)}
.dtf-prod__lfm{font-weight:800;color:var(--accent);white-space:nowrap}
.dtf-prod p{color:var(--muted);font-size:.9rem;margin:0;flex:1}
.dtf-prod__meta{display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.dtf-prod__cta{font-weight:700;color:var(--ink)}

.dtf-info .section-title,.dtf-info p{max-width:72ch}
.dtf-info p{color:var(--muted);line-height:1.7}

/* Eyebrow/Headline-Varianten für dunkle Sektion (Welle 0.56.0) */
.eyebrow--gold{color:var(--accent)}
.section-title--light{color:#fff}

/* „So geht's" — dunkle Sektion mit verbindender Linie + Icon-Steps */
.dtf-howto{background:#0d0d0d;color:#e9e9ec}
.dtf-howto .section-head{margin-bottom:38px}
.dtf-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.dtf-flow__line{position:absolute;top:34px;left:14%;right:14%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(212,160,23,.5) 18%,rgba(212,160,23,.5) 82%,transparent);z-index:0}
.dtf-flow__step{position:relative;z-index:1;text-align:center;padding:0 6px}
.dtf-flow__ico{width:68px;height:68px;margin:0 auto 14px;border-radius:18px;
  display:grid;place-items:center;background:#1a1a1a;border:1px solid #2a2a2a;color:var(--accent)}
.dtf-flow__ico svg{width:30px;height:30px}
.dtf-flow__n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#0d0d0d;font-weight:800;font-size:.82rem;font-family:var(--font-display);
  margin-bottom:8px}
.dtf-flow__step b{display:block;font-family:var(--font-display);font-size:1.12rem;color:#fff;margin-bottom:6px}
.dtf-flow__step p{color:#9a9aa2;font-size:.92rem;line-height:1.55;margin:0;max-width:30ch;margin-inline:auto}

/* Verfahren-Detailblöcke (ersetzt graue Textwüste) */
.dtf-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dtf-detail__block{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;
  transition:.16s}
.dtf-detail__block:hover{border-color:var(--accent);box-shadow:0 14px 34px rgba(13,13,13,.08)}
.dtf-detail__icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:16px;color:#fff}
.dtf-detail__icon--textil{background:linear-gradient(135deg,#d4a017,#b8860b)}
.dtf-detail__icon--hart{background:linear-gradient(135deg,#1f2d3d,#3a4d63)}
.dtf-detail__icon svg{width:28px;height:28px}
.dtf-detail__block h3{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);margin:0 0 10px}
.dtf-detail__block p{color:var(--muted);line-height:1.7;margin:0}

@media(max-width:760px){
  .dtf-flow{grid-template-columns:1fr;gap:30px}
  .dtf-flow__line{display:none}
  .dtf-detail__grid{grid-template-columns:1fr}
}

/* Konfigurator-Layout */
.dtf-konf__head{max-width:62ch;margin-bottom:1.8rem}
.dtf-konf__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:28px;align-items:start}
/* Welle 1.24.3 — display:grid/block überschrieb sonst das hidden-Attribut beim
   Modus-Umschalter (Motiv ↔ Druckbogen); analog zur Welle-1.12.2-Lösung für
   .dtf-ampel/.dtf-doktor__freigabe. */
.dtf-konf__grid[hidden]{display:none!important}
.dtf-bogen-card[hidden]{display:none!important}
.dtf-col{display:flex;flex-direction:column;gap:16px}

/* Schritt-Karten */
.dtf-step-card{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.dtf-step-no{flex:none;width:34px;height:34px;border-radius:9px;background:#0d0d0d;color:var(--accent);
  font-family:var(--font-display);font-weight:800;display:grid;place-items:center}
.dtf-step-body{flex:1;min-width:0}
.dtf-step-body h3{margin:0 0 .3rem}
.dtf-muted{color:var(--muted);font-size:.86rem;margin:0 0 .8rem}

.dtf-field{display:flex;flex-direction:column;gap:5px;margin-bottom:.8rem}
.dtf-field label{font-weight:600;font-size:.9rem}
.dtf-field input,.dtf-field select{padding:.7rem .8rem;border:1px solid var(--line);border-radius:9px;font-size:1rem;background:var(--paper);color:var(--ink);font-family:inherit;width:100%}
.dtf-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center}
.dtf-field input:focus,.dtf-field select:focus{outline:none;border-color:var(--accent)}
.dtf-field .hint{font-size:.78rem;color:var(--muted)}
.dtf-field .help{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.dtf-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dtf-field--menge{max-width:340px}

/* Drop-Zone */
.dtf-drop{position:relative;display:block;border:2px dashed var(--line);border-radius:14px;background:var(--paper);min-height:180px;cursor:pointer;overflow:hidden;transition:.16s}
.dtf-drop:hover,.dtf-drop.is-over{border-color:var(--accent);background:#fff}
.dtf-drop__inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;color:var(--muted)}
.dtf-drop__inner svg{width:38px;height:38px;stroke:var(--accent)}
.dtf-drop__inner b{color:var(--ink)}
.dtf-drop__inner span{font-size:.82rem}
.dtf-drop__inner[hidden]{display:none!important}
.dtf-drop__preview{width:100%;height:auto;max-height:300px;object-fit:contain;display:block;background:#fff}
.dtf-drop__preview[hidden]{display:none!important}
/* Welle 1.26.2 — Bogen-Vorschau LIEGEND + in der Breite scrollbar. Ein
   Druckbogen ist lang und schmal; hochkant in ein kleines Feld gequetscht
   kann der Kunde nichts erkennen. Wir legen ihn auf eine feste, gut sichtbare
   Höhe und machen die Länge horizontal scrollbar — so prüft der Kunde die
   komplette Datei (der einzige sinnvolle Weg). */
.dtf-bogen-vorschau{position:relative;border:1px solid var(--line);border-radius:10px;background:#fff;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;margin:0 0 4px;overscroll-behavior-x:contain}
.dtf-bogen-vorschau[hidden]{display:none!important}
.dtf-bogen-vorschau::-webkit-scrollbar{height:10px}
.dtf-bogen-vorschau::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.dtf-bogen-vorschau__img{display:block;height:220px;width:auto;max-width:none}
.dtf-bogen-vorschau__hint{position:sticky;left:0;display:flex;align-items:center;gap:6px;padding:4px 10px;font-size:.78rem;color:var(--muted);background:linear-gradient(90deg,#fff 70%,rgba(255,255,255,0))}
.dtf-bogen-vorschau__hint svg{width:14px;height:14px;stroke:currentColor;flex:0 0 auto}

/* Ampel */
.dtf-ampel{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:#fff;margin-top:12px}
.dtf-ampel[hidden]{display:none!important}/* Welle 1.12.2 — display:flex überschrieb sonst das hidden-Attribut */
.dtf-ampel__dot{width:15px;height:15px;border-radius:50%;flex:none;margin-top:2px;background:#c8ccd4}
.dtf-ampel__text{font-size:.88rem;color:var(--ink);line-height:1.5}
.dtf-ampel[data-ampel="lade"] .dtf-ampel__dot{background:#9aa0a6;animation:dtfpulse 1s infinite}
.dtf-ampel[data-ampel="gruen"]{background:#f0fff4;border-color:#bfe6c7}
.dtf-ampel[data-ampel="gruen"] .dtf-ampel__dot{background:#2e9e4b}
.dtf-ampel[data-ampel="gelb"]{background:#fffaf0;border-color:#f0dcb0}
.dtf-ampel[data-ampel="gelb"] .dtf-ampel__dot{background:#e0a020}
.dtf-ampel[data-ampel="rot"]{background:#fff5f4;border-color:#f0c5c0}
.dtf-ampel[data-ampel="rot"] .dtf-ampel__dot{background:#cc3322}
.dtf-ampel[data-ampel="unbekannt"] .dtf-ampel__dot{background:#5b8bd0}
@keyframes dtfpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Motiv-Optimierung bei zu kleiner Datei (0.34.0) */
.dtf-optfix{margin-top:12px;padding:14px;border:1px solid #f0dcb0;background:#fffaf0;border-radius:11px}
/* Verifikations-Gate (0.75.0) */
.dtf-verify{margin-top:12px;padding:14px 16px;border:1px solid #cfe7d6;background:#f3faf5;border-radius:11px}
.dtf-verify__head{display:flex;align-items:center;gap:.5rem;color:#0a7d3a}
.dtf-verify__head b{font-size:1rem}
.dtf-verify__sub{margin:.5rem 0 .8rem;color:#444;font-size:.9rem}
.dtf-verify__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.dtf-step-card.is-gesperrt{position:relative;opacity:.55;pointer-events:none;filter:grayscale(.3)}
.dtf-step-card.is-gesperrt::after{content:"Bitte zuerst das Motiv bestätigen";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.35);border-radius:inherit;font-size:.85rem;color:#666;font-weight:600;pointer-events:none}
.dtf-optfix__head{display:flex;gap:11px;align-items:flex-start}
.dtf-optfix__head svg{width:22px;height:22px;flex:none;color:#c0392b;margin-top:1px}
.dtf-optfix__head b{display:block;color:var(--ink);font-size:.95rem}
.dtf-optfix__hint{margin:.2rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.5}
.dtf-optfix__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.dtf-optfix__actions .btn{flex:1 1 auto;min-width:max-content}
.dtf-optfix__actions .btn small{font-weight:600;opacity:.85;margin-left:.25rem}
.dtf-optfix__done{margin-top:10px;padding:9px 11px;border-radius:9px;background:#f0fff4;border:1px solid #bfe6c7;color:#1f6b34;font-size:.85rem;line-height:1.5}

/* Optionen */
.dtf-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:.6rem;cursor:pointer}
.dtf-opt:hover{border-color:var(--accent)}
.dtf-opt input{width:18px;height:18px;accent-color:var(--accent)}
.dtf-opt small{color:var(--muted)}

/* Zusammenfassung (rechte Spalte, sticky) */
/* Welle 0.52.3 — sticky auf die Spalte legen (robuster als auf das innere
   Summary-Element); die Box läuft so beim Scrollen zuverlässig mit. */
.dtf-konf__grid > .dtf-col:last-child{position:sticky;top:90px;align-self:start}
.dtf-summary{align-self:flex-start;background:#0d0d0d;color:#fff;border-radius:16px;padding:22px}
.dtf-summary h3{margin:0 0 .8rem;color:#fff}
.dtf-staffel{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:.86rem}
.dtf-staffel td{padding:6px 8px;border-bottom:1px solid #232323;color:#cfd0d2}
.dtf-staffel td:last-child{text-align:right;color:#fff;font-weight:600}
.dtf-staffel tr.is-active td{color:var(--accent)}

.dtf-preis{background:#161616;border-radius:12px;padding:14px 16px;margin-bottom:1rem}
.dtf-preis__row{display:flex;justify-content:space-between;padding:4px 0;color:#bcbdbf}
.dtf-preis__row b{color:#fff}
.dtf-preis__row--total{border-top:1px solid #2a2a2a;margin-top:6px;padding-top:10px;font-size:1.2rem}
.dtf-preis__row--total b{color:var(--accent)}
.dtf-preis__hint{margin:8px 0 0;font-size:.78rem;color:#8a8b8d}

.dtf-summary .btn{width:100%;justify-content:center;margin-top:.5rem}
/* Welle 0.52.3 — Ghost-Button auf dunklem Summary-Grund hell darstellen
   (sonst dunkelgrauer Text auf Schwarz = unsichtbar, v. a. disabled). */
.dtf-summary .btn--ghost{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.5);color:#fff}
.dtf-summary .btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.dtf-summary .btn--ghost[disabled]{opacity:.6;color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.28)}
.dtf-err{background:#3a1a18;border:1px solid #5a2a26;color:#ffb4ad;border-radius:10px;padding:10px 14px;font-size:.88rem;margin-bottom:.6rem}
.dtf-note{font-size:.78rem;color:#8a8b8d;margin:.6rem 0 0;text-align:center}

@media (max-width:820px){
  .dtf-konf__grid{grid-template-columns:minmax(0,1fr)}
  .dtf-konf__grid > .dtf-col:last-child{position:static}
  .dtf-summary{position:static}
  .dtf-steps{grid-template-columns:1fr}
}
@media (max-width:520px){
  .dtf-field-row{grid-template-columns:1fr}
}

/* ============================================================
   DTF 0.24.0: Toggles, Nesting-Hinweise, Rollen-Vorschau, Settings-Tabs
   ============================================================ */

/* Toggle (Goldfolie / Datenprüfung) im Konfigurator */
.dtf-toggle-field{margin-bottom:1rem}
.dtf-toggle-label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.dtf-toggle-label small{color:var(--muted);font-weight:400}
.dtf-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.dtf-toggle__btn{padding:.5rem 1.4rem;background:#fff;border:0;cursor:pointer;font-weight:600;color:var(--muted)}
.dtf-toggle__btn.is-active{background:var(--accent);color:#fff}

/* Nesting-Hinweis im Konfigurator (werblich) */
.dtf-nesthint{background:#fff8e6;border:1px solid #e8d39a;border-radius:11px;padding:12px 14px;font-size:.85rem;color:#5a4a1a;margin:1rem 0}
.dtf-nesthint b{color:#7a5c12}

/* Welle 0.61.12 — Mehrere Größen desselben Motivs */
.dtf-multi{margin:1rem 0}
.dtf-multi__check{display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;font-size:.9rem;line-height:1.35}
.dtf-multi__check input{margin-top:.18rem;flex:0 0 auto}
.dtf-multi__box{margin-top:.8rem;padding:.9rem;border:1px solid var(--line);border-radius:11px;background:#fafafa}
.dtf-multi__hint{font-size:.8rem;color:var(--muted);margin:0 0 .7rem}
.dtf-multi__rows{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.7rem}
.dtf-multi__row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem}
.dtf-multi__row--main{background:#f4f6f8;border-style:dashed}
.dtf-multi__lbl{font-size:.78rem;color:var(--muted);flex:0 0 auto;min-width:118px}
.dtf-multi__mass{font-weight:600;font-size:.85rem}
.dtf-multi__row input{width:74px;padding:.35rem .45rem;border:1px solid var(--line);border-radius:7px;font-size:.85rem}
.dtf-multi__row input.dtf-multi__m{width:62px}
.dtf-multi__x{color:var(--muted);font-size:.85rem}
.dtf-multi__ampel{width:12px;height:12px;border-radius:50%;flex:0 0 auto;margin-left:auto;background:#d4d7da}
.dtf-multi__ampel[data-ampel="gut"]{background:#2ecc71}
.dtf-multi__ampel[data-ampel="warn"]{background:#f1c40f}
.dtf-multi__ampel[data-ampel="rot"]{background:#e74c3c}
.dtf-multi__ampel[data-ampel="unbekannt"]{background:#95a5a6}
.dtf-multi__ampel[data-ampel="lade"]{background:#3498db;animation:dtfpulse 1s infinite}
.dtf-multi__ampel[data-ampel="leer"]{background:#d4d7da}
@keyframes dtfpulse{0%,100%{opacity:1}50%{opacity:.35}}
.dtf-multi__del{margin-left:.2rem;width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;color:var(--muted);font-size:1.05rem;line-height:1;flex:0 0 auto}
.dtf-multi__del:hover{background:#fdecea;border-color:#e74c3c;color:#e74c3c}
.btn--sm{padding:.4rem .9rem;font-size:.82rem}

/* Nesting-Info im Warenkorb */
.dtf-cart-nest{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;background:#fff8e6;border:1px solid #e8d39a;border-radius:11px;padding:12px 16px;margin-bottom:1.2rem;font-size:.9rem;color:#5a4a1a}
.dtf-cart-nest b{color:#7a5c12}
.dtf-cart-nest__save{font-weight:700;color:#2e7d32}

/* Rollen-Vorschau-Modal */
.dtf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;background:rgba(13,13,13,.6)}
.dtf-modal[hidden]{display:none}
.dtf-modal__box{background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:24px;position:relative}
.dtf-modal__box h3{margin:0 0 .3rem}
.dtf-modal__close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--muted)}
.dtf-roll{margin-top:1rem;border-radius:8px}
/* Welle 0.52.3 — neue Rollen-Vorschau: echtes Verhältnis, vertikal scrollbar. */
.dtf-roll-canvas{margin-top:.8rem;max-height:60vh;overflow:auto;display:flex;justify-content:center;
  background:repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 0/18px 18px;border-radius:8px;padding:10px}
.dtf-roll-warn{background:#fdf3e3;border:1px solid #e9c98a;border-left:4px solid #d98a1f;border-radius:10px;
  padding:12px 14px;font-size:.88rem;line-height:1.5;color:#5a4420}
.dtf-roll-warn u{text-decoration-color:#d98a1f}
.dtf-roll-hint{background:#f4f6f4;border:1px solid #dde3dd;border-radius:10px;padding:9px 13px;font-size:.84rem;color:#566}
/* Welle 1.26.4 — Mehrbahn-Vorschau */
.dtf-db-mehrbahn-hint{background:#eef4fb;border:1px solid #c5d8ee;border-radius:10px;padding:9px 13px;font-size:.86rem;color:#2c4a6b;margin:0 0 12px}
.dtf-db-bahn-titel{font-weight:700;font-size:.9rem;color:var(--ink,#222);margin:14px 0 6px}
.dtf-db-bahn-titel:first-of-type{margin-top:4px}

/* Einstellungen: Tab-Leiste */
.set-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin-bottom:1.4rem}
.set-tab-btn{padding:.6rem 1.1rem;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;font-weight:600;color:var(--muted);font-size:.95rem}
.set-tab-btn:hover{color:var(--ink)}
.set-tab-btn.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.set-panel{display:none}
.set-panel.is-active{display:block;animation:setfade .15s ease}
@keyframes setfade{from{opacity:.4}to{opacity:1}}

/* Admin-Formularbreiten: großzügig & responsiv statt schmaler Inline-Fesseln */
.admin-form{max-width:1024px;width:100%}
.admin-form--wide{max-width:1240px}
.admin-narrow{max-width:760px;width:100%}
/* Zweispaltige Karten-Anordnung ab genug Platz — nutzt die Breite */
.a-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;align-items:start}
.a-grid-2>.a-card{margin-bottom:0}

/* ============================================================
   DTF 0.25.0: Hero-Foto-Slider, Logo-Brand, Foto-Produktkacheln
   ============================================================ */

/* Logo im DTF-Header */
.brand--dtf{display:flex;align-items:center}
.brand--dtf img{display:block;height:34px;width:auto}

/* Hero mit Foto-Slider */
.dtf-hero--photo{position:relative;overflow:hidden;padding:0;min-height:560px;display:flex;align-items:center;text-align:left}
.dtf-hero__slider{position:absolute;inset:0;z-index:0}
.dtf-hero__slide{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:0;transition:opacity 1.1s ease}
.dtf-hero__slide.is-active{opacity:1}
.dtf-hero__cap{position:absolute;right:20px;bottom:16px;color:#fff;font-size:.78rem;letter-spacing:.03em;background:rgba(13,13,13,.6);padding:6px 13px;border-radius:20px;backdrop-filter:blur(4px);z-index:3}
/* Kräftiger Verlauf: links voll deckend (Textspalte), rechts Foto frei */
.dtf-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0d0d0d 0%,rgba(13,13,13,.96) 30%,rgba(13,13,13,.72) 52%,rgba(13,13,13,.2) 80%,rgba(13,13,13,.05) 100%)}
.dtf-hero__content{position:relative;z-index:2;width:100%;color:#fff;padding:3.5rem 24px;max-width:var(--maxw);margin:0 auto;text-align:left}
.dtf-hero__col{max-width:600px;margin:0}
.dtf-hero__col .eyebrow{margin-left:0}
.dtf-hero--photo h1,.dtf-hero--photo .lead{margin-left:0;margin-right:0}
.dtf-hero--photo .eyebrow{color:var(--accent);justify-content:flex-start}
.dtf-hero--photo h1{font-size:clamp(2rem,4.6vw,3.3rem);margin:.6rem 0 .9rem;line-height:1.1;max-width:16ch;color:#fff}
.dtf-hero--photo h1 .gold{color:var(--accent);display:inline}
.dtf-hero--photo .lead{color:#e3e4e6;max-width:46ch;margin:0 0 1.7rem;font-size:1.08rem}
.dtf-hero--photo .hero-cta{justify-content:flex-start;margin-bottom:0}
/* Sekundär-CTA auf dem Foto klar sichtbar machen */
.dtf-hero--photo .btn--ghost{color:#fff;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.dtf-hero--photo .btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}

/* Produktkacheln mit Foto */
.dtf-prod--photo{padding:0;overflow:hidden}
.dtf-prod__foto{height:170px;background-size:cover;background-position:center}
.dtf-prod__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}

@media (max-width:760px){
  .dtf-hero--photo{min-height:480px}
  .dtf-hero__slide{background-position:center}
  .dtf-hero__overlay{background:linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,.82) 55%,rgba(13,13,13,.92) 100%)}
  .dtf-hero__content{max-width:100%;text-align:center}
  .dtf-hero__col{max-width:100%;margin-left:auto;margin-right:auto}
  .dtf-hero--photo .eyebrow,.dtf-hero--photo .hero-cta{justify-content:center}
  .dtf-hero--photo h1{max-width:100%}
  .dtf-hero--photo .lead{margin-left:auto;margin-right:auto}
}

/* UV-DTF-Teaser auf der DTF-Landing */
.dtf-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.dtf-teaser:hover{box-shadow:0 14px 40px rgba(13,13,13,.13);transform:translateY(-2px)}
.dtf-teaser__foto{min-height:230px;background-size:cover;background-position:center}
.dtf-teaser__body{padding:28px 30px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.dtf-teaser__body h3{margin:.2rem 0 .2rem;font-size:1.5rem}
.dtf-teaser__body .eyebrow{color:var(--accent);justify-content:flex-start}
@media (max-width:680px){
  .dtf-teaser{grid-template-columns:1fr}
  .dtf-teaser__foto{min-height:180px}
}

/* Konfigurator: Korbstand-Band (mehrere Motive nacheinander anlegen) */
.dtf-korbband{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;background:#fff8e6;border:1px solid #e8d39a;border-radius:12px;padding:12px 18px;margin-bottom:1.6rem}
.dtf-korbband__info{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.92rem;color:#5a4a1a}
.dtf-korbband__info b{color:#7a5c12}
.dtf-korbband__tip{color:#7a5c12;font-weight:600;width:100%}
.dtf-korbband__cta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dtf-korbband__cta .btn--ghost{background:#fff;border:1.5px solid #d9b85a;color:#7a5c12}
.dtf-korbband__cta .btn--ghost:hover{background:#fff3cf;color:#5a4a1a}
.dtf-drop--pulse{animation:dtfDropPulse 1.6s ease}
@keyframes dtfDropPulse{
  0%{box-shadow:0 0 0 0 rgba(224,176,32,0);border-color:var(--line)}
  25%{box-shadow:0 0 0 6px rgba(224,176,32,.35);border-color:var(--accent)}
  100%{box-shadow:0 0 0 0 rgba(224,176,32,0)}
}
@media (max-width:560px){
  .dtf-korbband{flex-direction:column;align-items:stretch}
  .dtf-korbband .btn{text-align:center}
  .dtf-korbband__cta{flex-direction:column;align-items:stretch}
}

/* Produktspezifische Info-Tabs unter dem Konfigurator */
.dtf-tabs__nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin-bottom:1.6rem}
.dtf-tab-btn{appearance:none;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:.8rem 1.1rem;font-size:.95rem;font-weight:600;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}
.dtf-tab-btn:hover{color:var(--ink)}
.dtf-tab-btn.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.dtf-tab-panel{display:none;animation:dtfFade .25s ease}
.dtf-tab-panel.is-active{display:block}
@keyframes dtfFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dtf-tab-panel h4{margin:1.3rem 0 .6rem;font-size:1.05rem}
.dtf-tab-panel h4:first-child{margin-top:0}
.dtf-tab-panel ol{margin:.4rem 0 .4rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.dtf-tab-panel p{margin:0 0 .8rem;max-width:70ch;color:var(--body)}
.info-table{width:100%;border-collapse:collapse;max-width:760px}
.info-table th,.info-table td{text-align:left;vertical-align:top;padding:.7rem .9rem;border-bottom:1px solid var(--line);font-size:.93rem}
.info-table th{width:34%;font-weight:600;color:var(--ink);background:#faf9f7}
.info-table td{color:var(--body)}
@media (max-width:560px){
  .dtf-tab-btn{padding:.7rem .7rem;font-size:.86rem}
  .info-table th{width:42%}
}

/* Großes Konfigurator-CTA-Band auf den Landings */
.dtf-cta-band{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s;box-shadow:0 8px 30px rgba(13,13,13,.06)}
.dtf-cta-band:hover{box-shadow:0 16px 46px rgba(13,13,13,.14);transform:translateY(-2px)}
.dtf-cta-band__foto{min-height:300px;background-size:cover;background-position:center}
.dtf-cta-band__body{padding:38px 40px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.dtf-cta-band__body .eyebrow{color:var(--accent);justify-content:flex-start}
.dtf-cta-band__body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.2rem 0 .3rem;line-height:1.15}
.dtf-cta-band__body p{color:var(--body);max-width:48ch;margin:0 0 .6rem}
.dtf-cta-band__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:.4rem}
.dtf-cta-band__price{font-weight:700;color:var(--ink);font-size:1.05rem}
@media (max-width:760px){
  .dtf-cta-band{grid-template-columns:1fr}
  .dtf-cta-band__foto{min-height:200px;order:-1}
  .dtf-cta-band__body{padding:28px 24px}
}
/* SEO-Block dezent */
.dtf-seo{padding-top:1rem}
.dtf-seo .section-title{font-size:1.3rem}
.dtf-seo p{color:var(--muted);font-size:.95rem;max-width:80ch}

/* Rechtstext-Seiten (AGB, Widerruf, Zahlung …) */
.legal-doc{max-width:820px;margin-left:auto;margin-right:auto}
.legal-doc__title{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 1.4rem;line-height:1.15}
.legal-doc__body{color:var(--body);line-height:1.7}
.legal-doc__body h2{font-size:1.28rem;margin:2rem 0 .7rem;color:var(--ink);line-height:1.25}
.legal-doc__body h2:first-child{margin-top:0}
.legal-doc__body h3{font-size:1.12rem;margin:1.8rem 0 .6rem;color:var(--ink)}
.legal-doc__body h3:first-child{margin-top:0}
.legal-doc__body p{margin:0 0 .9rem;max-width:78ch}
.legal-doc__body ul{margin:.4rem 0 1rem 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.legal-doc__body hr{border:none;border-top:1px solid var(--line);margin:1.8rem 0}
.legal-doc__body a{color:var(--accent-dark,#a87d10);text-decoration:underline}

/* ── DTF-Home: Zwei-Card-Gabelung (DTF · UV-DTF) ── */
.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:.5rem}
.home-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.home-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.home-card__foto{aspect-ratio:16/10;background-size:cover;background-position:center}
.home-card__body{padding:1.6rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.home-card__body .eyebrow{margin-bottom:.5rem}
.home-card__body h3{font-family:var(--font-display);font-size:1.6rem;margin:0 0 .5rem;line-height:1.1}
.home-card__body p{color:var(--body);font-size:.98rem;margin:0 0 1.3rem;flex:1}
.home-card__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.home-card__cta{font-weight:700;color:var(--accent);font-size:.96rem}
.home-card__price{font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:.3rem .85rem;font-size:.9rem;white-space:nowrap}
@media(max-width:680px){.home-card__foto{aspect-ratio:16/9}}

/* ── DTF-FAQ-Accordion ── */
.faq-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);overflow:hidden}
.faq-item summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--accent);font-size:1.3rem;line-height:1;flex:none}
.faq-item[open] summary::after{content:'–'}
.faq-answer{padding:0 1.2rem 1.1rem;color:var(--body);line-height:1.6}
.faq-cta{margin-top:2.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.faq-cta h3{margin:0 0 .3rem;font-family:var(--font-display)}
.faq-cta p{margin:0;color:var(--body)}

/* ── DTF-Kontakt-Grid ── */
.kontakt-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
@media(max-width:820px){.kontakt-grid{grid-template-columns:1fr;gap:28px}}

/* ── Welle 0.42.0 — DTF-Doktor (Konfigurator: Achsen + Vorschauen) ── */
.dtf-doktor{margin:.6rem 0 0;border:1px solid var(--line,#e6e4d9);border-radius:12px;padding:.8rem .9rem;background:#fff}
.dtf-doktor__axes{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
/* Drei Spalten mit FESTER Label-Breite: Punkt · Label (fix) · Text.
   So beginnt jeder Text — und jede umgebrochene Folgezeile — an derselben
   senkrechten Kante, bündig untereinander (Welle 0.76.3). */
.dtf-doktor__axes li{display:grid;grid-template-columns:13px 9.5rem 1fr;align-items:start;column-gap:.55rem;font-size:.84rem}
@media(max-width:480px){.dtf-doktor__axes li{grid-template-columns:13px 7.5rem 1fr}}
.dtf-doktor__dot{width:11px;height:11px;border-radius:50%;background:#c8ccd4;margin-top:.28rem}
.dtf-doktor__dot.gruen{background:#2e9e4b}.dtf-doktor__dot.gelb{background:#e0a020}
.dtf-doktor__dot.rot{background:#cc3322}.dtf-doktor__dot.unbekannt{background:#5b8bd0}
.dtf-doktor__lbl{font-weight:700}
.dtf-doktor__txt{color:#666;line-height:1.45}
.dtf-doktor__prev{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.8rem}
@media(max-width:560px){.dtf-doktor__prev{grid-template-columns:1fr}}
.dtf-doktor__cap{font-size:.78rem;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.35rem}
.dtf-doktor__sw{margin-left:auto;display:inline-flex;border:1px solid var(--line,#e6e4d9);border-radius:7px;overflow:hidden}
.dtf-doktor__sw button{border:0;background:#fff;padding:.25rem .55rem;font-size:.72rem;cursor:pointer;color:#555}
.dtf-doktor__sw button.is-active{background:var(--gold,#E2B13B);color:#1a1a1a;font-weight:700}
.dtf-doktor__imgwrap{border-radius:8px;overflow:hidden;background:#222;display:flex;align-items:center;justify-content:center;min-height:150px;position:relative}
.dtf-doktor__imgwrap img{max-width:100%;max-height:260px;display:block}
.dtf-doktor__imgwrap img[hidden]{display:none}
/* Vorschau (noch) nicht verfügbar: dezenter Hinweis statt kaputtem Bild-Icon. */
.dtf-doktor__imgwrap.is-leer{background:#f3f2ec;min-height:120px}
.dtf-doktor__imgwrap.is-leer::after{content:"Vorschau wird erstellt …";color:#8a8678;font-size:.74rem;font-style:italic}
.dtf-doktor__freigabe{display:flex;gap:.55rem;align-items:flex-start;margin-top:.8rem;padding:.6rem .7rem;
  background:#fffaf0;border:1px solid #f0dcb0;border-radius:9px;font-size:.83rem;cursor:pointer;line-height:1.4}
.dtf-doktor__freigabe input{margin-top:.15rem;flex:none}
.dtf-doktor__freigabe[hidden]{display:none!important}/* Welle 1.12.2 — sonst blieb das Häkchen bei grüner Ampel sichtbar */

/* Welle 0.76.2 — DTF-Doktor neu: ruhige Status-Headline führt, Detail-Achsen
   sind einklappbar. Ziel: EIN klarer Status + max. eine Aktion statt eines
   Stapels widersprüchlich wirkender Meldungsblöcke. */
.dtf-doktor__status{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;
  border-radius:10px;border:1px solid var(--line,#e6e4d9);background:#fff}
.dtf-doktor__statusdot{width:14px;height:14px;border-radius:50%;flex:none;margin-top:.2rem;background:#c8ccd4}
.dtf-doktor__statusbody{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.dtf-doktor__statusbody b{font-size:.95rem;line-height:1.3;color:var(--ink,#1a1a1a)}
.dtf-doktor__statusbody span{font-size:.84rem;line-height:1.45;color:#666}
.dtf-doktor__status[data-ampel="gruen"]{background:#f0fff4;border-color:#bfe6c7}
.dtf-doktor__status[data-ampel="gruen"] .dtf-doktor__statusdot{background:#2e9e4b}
.dtf-doktor__status[data-ampel="gelb"]{background:#fffaf0;border-color:#f0dcb0}
.dtf-doktor__status[data-ampel="gelb"] .dtf-doktor__statusdot{background:#e0a020}
.dtf-doktor__status[data-ampel="rot"]{background:#fff5f4;border-color:#f0c5c0}
.dtf-doktor__status[data-ampel="rot"] .dtf-doktor__statusdot{background:#cc3322}
.dtf-doktor__status[data-ampel="unbekannt"] .dtf-doktor__statusdot{background:#5b8bd0;animation:dtfpulse 1s infinite}
/* Einklappbare Detail-Achsen: standardmäßig zu, dezenter Auslöser. */
.dtf-doktor__details{margin-top:.7rem;border-top:1px solid var(--line,#e6e4d9);padding-top:.6rem}
.dtf-doktor__details>summary{list-style:none;cursor:pointer;font-size:.8rem;font-weight:600;
  color:#777;display:inline-flex;align-items:center;gap:.35rem;user-select:none}
.dtf-doktor__details>summary::-webkit-details-marker{display:none}
.dtf-doktor__details>summary::before{content:"▸";font-size:.7rem;transition:transform .15s;color:#aaa}
.dtf-doktor__details[open]>summary::before{transform:rotate(90deg)}
.dtf-doktor__details>summary:hover{color:#333}
.dtf-doktor__details .dtf-doktor__axes{margin-top:.6rem}

/* Welle 0.42.2 — Kontaktseite: vollständiger Kontaktblock mit Icons */
.kontakt-info{margin-top:1.6rem;display:grid;gap:.7rem;max-width:30rem}
.kontakt-info__row{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.kontakt-info__row:hover{border-color:var(--accent);box-shadow:0 6px 18px -10px rgba(0,0,0,.25)}
.kontakt-info__ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,0,0,.04);color:var(--accent)}
.kontakt-info__ico svg{width:19px;height:19px}
.kontakt-info__row span:last-child{display:block;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.kontakt-info__row small{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);opacity:.7}
.kontakt-info__row b{display:block;color:var(--ink);font-size:1rem;margin:.05rem 0 .15rem}
.kontakt-info__row--static{cursor:default}

/* ── Dashboard 0.45.0: Schnellzugriff, Überwachung, Statistik ─────── */
.dash-section{margin:0 0 26px}
.dash-section__hd{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.dash-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dash-section__hd::after{content:'';flex:1;height:1px;background:var(--line)}
.dash-section__hd .badge{order:3}

/* Schnellzugriff-Kacheln */
.qa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.qa{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 12px;
  text-decoration:none;color:var(--ink-soft);transition:border-color .15s,transform .15s,box-shadow .15s}
.qa:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(255,54,0,.45);color:var(--ink)}
.qa__ic{width:40px;height:40px;border-radius:10px;background:var(--a-accent-bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.qa__ic svg{width:20px;height:20px;stroke:currentColor}
.qa__t{font-size:.84rem;font-weight:600;line-height:1.2}

/* Überwachungs-Karten */
.mon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mon{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;border-left-width:4px}
.mon--ok{border-left-color:var(--a-ok)}
.mon--warn{border-left-color:var(--a-warn)}
.mon--danger{border-left-color:var(--a-danger)}
.mon--info{border-left-color:var(--a-info)}
.mon__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mon__ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--a-neutral-bg);color:var(--ink-soft)}
.mon--ok .mon__ic{background:var(--a-ok-bg);color:var(--a-ok)}
.mon--warn .mon__ic{background:var(--a-warn-bg);color:var(--a-warn)}
.mon--danger .mon__ic{background:var(--a-danger-bg);color:var(--a-danger)}
.mon__ic svg{width:18px;height:18px;stroke:currentColor}
.mon__v{font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--ink);line-height:1}
.mon__l{font-weight:600;font-size:.92rem;margin:.5rem 0 .15rem;color:var(--ink)}
.mon__h{font-size:.8rem;color:var(--muted);line-height:1.45;min-height:2.3em}
.mon__a{display:inline-block;margin-top:.5rem;font-size:.8rem;font-weight:600;
  color:var(--accent-dark);text-decoration:none}
.mon__a:hover{text-decoration:underline}

/* Statistik-Sparkline */
.spark{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:8px}
.spark__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;min-width:0}
.spark__bar{width:100%;max-width:34px;background:var(--a-info);border-radius:5px 5px 0 0;
  transition:background .15s;min-height:3px}
.spark__col:hover .spark__bar{background:var(--accent)}
.spark__col.is-today .spark__bar{background:var(--accent)}
.spark__x{font-size:.66rem;color:var(--muted);margin-top:6px;white-space:nowrap}

@media (max-width:1100px){
  .qa-grid{grid-template-columns:repeat(3,1fr)}
  .mon-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .qa-grid{grid-template-columns:repeat(2,1fr)}
  .mon-grid{grid-template-columns:1fr}
}

/* Filter-Chip (z. B. Statusfilter in Listen) */
.filter-chip{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;
  background:var(--a-info-bg);color:var(--a-info);border-radius:999px;padding:7px 14px;font-size:.84rem}
.filter-chip strong{color:var(--a-info)}
.filter-chip a{color:var(--a-info);text-decoration:none;font-weight:700;opacity:.85}
.filter-chip a:hover{opacity:1;text-decoration:underline}

/* ── Dashboard-Statistik 0.46.0: Top-Listen, Shop-Umsatz, Konversion ── */
.stat2-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}
.stat2-col{display:flex;flex-direction:column;gap:16px}

/* Rang-Listen (Top-Produkte, Umsatz nach Shop) */
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.rank--compact{gap:11px}
.rank__row{display:flex;align-items:flex-start;gap:12px}
.rank__n{flex:none;width:24px;height:24px;border-radius:7px;background:var(--a-accent-bg);
  color:var(--accent-dark);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;margin-top:1px}
.rank__body{flex:1;min-width:0}
.rank__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rank__name{font-weight:600;font-size:.9rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank__val{flex:none;font-weight:700;font-size:.88rem;color:var(--ink)}
.rank__barwrap{height:7px;background:var(--line-soft);border-radius:4px;margin:.4rem 0 .2rem;overflow:hidden}
.rank__bar{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.rank__bar--steel{background:var(--steel)}
.rank__sub{font-size:.76rem;color:var(--muted)}

/* Konversions-Ring (CSS-conic-gradient, --p = Prozent 0..100) */
.konv{display:flex;align-items:center;gap:18px}
.konv__ring{flex:none;width:96px;height:96px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line-soft) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.konv__ring::after{content:'';position:absolute;inset:11px;background:#fff;border-radius:50%}
.konv__pct{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.konv__txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.konv__txt strong{font-size:1rem;color:var(--ink)}
.konv__txt span{font-size:.84rem;color:var(--ink-soft)}
.konv__txt small{font-size:.74rem;color:var(--muted);margin-top:.25rem;line-height:1.4}

@media (max-width:980px){
  .stat2-grid{grid-template-columns:1fr}
}

/* ── DTF-Doktor Empfehlungen (Welle 0.49.0) — „führen statt warnen" ─── */
.dtf-empf{display:flex;flex-direction:column;gap:9px;margin:12px 0 0}
.dtf-empf__card{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;background:#fff;border-left-width:4px}
.dtf-empf__card--gruen{border-left-color:#2e9e4b;background:#f6fef8}
.dtf-empf__card--gelb{border-left-color:#e0a020;background:#fffdf6}
.dtf-empf__card--rot{border-left-color:#cc3322;background:#fffaf9}
.dtf-empf__body{flex:1;min-width:0}
.dtf-empf__titel{font-weight:700;font-size:.92rem;color:var(--ink);margin-bottom:.15rem}
.dtf-empf__text{font-size:.84rem;color:var(--muted);line-height:1.5}
.dtf-empf__btn{flex:none;align-self:center;border:0;border-radius:9px;cursor:pointer;
  padding:9px 14px;font-size:.84rem;font-weight:700;background:var(--accent);color:#fff;
  transition:filter .15s,transform .15s;white-space:nowrap}
.dtf-empf__btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.dtf-empf__btn:disabled{background:#2e9e4b;cursor:default;transform:none;filter:none}
.dtf-empf__btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.dtf-empf__btn--ghost:hover{background:#f5f6f8;filter:none}
.dtf-empf__hint{margin-top:10px;padding:9px 11px;border-radius:9px;background:#eef5ff;
  border:1px solid #cfe0fb;color:#1d5fa8;font-size:.84rem;line-height:1.5}
@media (max-width:560px){
  .dtf-empf__card{flex-direction:column;align-items:stretch}
  .dtf-empf__btn{width:100%}
}

/* ── Produktions-Cockpit (Welle 0.51.0) ──────────────────────────── */
.prod-sum{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.prod-sum__item{flex:1 1 160px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;display:flex;flex-direction:column;gap:2px}
.prod-sum__item .v{font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--ink);line-height:1.05}
.prod-sum__item .l{font-size:.8rem;color:var(--muted)}
.prod-strecke{margin-bottom:18px}
.prod-table td{vertical-align:top}
.prod-table .sub{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.prod-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prod-actions{display:flex;align-items:center;gap:6px}
/* Welle 0.57.0 — Druckdatei-Download direkt in der Produktions-Warteschlange */
.prod-file{display:inline-flex;align-items:center;gap:5px;margin:3px 0 1px;padding:3px 9px;
  border:1px solid var(--accent);border-radius:7px;font-size:.78rem;font-weight:700;
  color:var(--accent-dark);text-decoration:none;line-height:1.2;background:var(--a-ok-bg,#f3faf5)}
.prod-file:hover{background:var(--accent);color:#fff}
.prod-file svg{flex:none}
.prod-more{position:relative;display:inline-block}
.prod-more summary{list-style:none;cursor:pointer;padding:4px 8px;border-radius:7px;
  border:1px solid var(--line);color:var(--muted);font-weight:700;line-height:1}
.prod-more summary::-webkit-details-marker{display:none}
.prod-more[open] summary{background:var(--a-neutral-bg)}
.prod-more__menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px -12px rgba(0,0,0,.3);
  padding:6px;min-width:170px;display:flex;flex-direction:column;gap:2px}
.prod-more__menu button{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:8px 10px;border-radius:7px;font-size:.84rem;color:var(--ink-soft)}
.prod-more__menu button:hover{background:var(--a-neutral-bg);color:var(--ink)}
.prod-notiz{margin-top:6px;font-size:.78rem;color:var(--muted);max-width:240px}

/* ---------- UV-DTF Schnittform-Wahl (Welle 0.55.2) ---------- */
.dtf-cutform{margin-top:14px;padding:12px 14px;background:var(--paper,#f7f7f9);border:1px solid var(--line-soft,#e6e6ea);border-radius:10px}
.dtf-cutform__lbl{display:block;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#777);margin-bottom:8px}
.dtf-cutform__opts{display:flex;flex-wrap:wrap;gap:14px}
.dtf-cutform__opts label{display:flex;align-items:center;gap:6px;font-size:.92rem;cursor:pointer}
.dtf-cutform__opts input{width:16px;height:16px;cursor:pointer}
.dtf-cutform__hint{margin:10px 0 0;font-size:.82rem;color:var(--muted,#777);line-height:1.5}

/* ── Rechnungsausgang (Welle 0.56.1) ───────────────────────────────── */
/* Kennzahlen-Leiste */
.a-stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1rem}
.a-stat{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.a-stat__lbl{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.a-stat__val{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink)}

/* Karten-/Listen-Umschalter */
.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.view-toggle a{display:grid;place-items:center;width:38px;height:38px;color:var(--muted);background:#fff;transition:.13s}
.view-toggle a svg{width:18px;height:18px}
.view-toggle a:hover{background:var(--paper);color:var(--ink)}
.view-toggle a.is-active{background:var(--ink);color:#fff}
.view-toggle a+a{border-left:1px solid var(--line)}

/* Karten-Ansicht */
.rg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rg-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.15s}
.rg-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,13,13,.1)}
.rg-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rg-card__top strong{font-family:var(--font-display);font-size:1.02rem;color:var(--ink)}
.rg-card__empf{font-size:.92rem;color:var(--ink)}
.rg-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rg-card__ord{font-size:.78rem;color:var(--muted)}
.rg-card__foot{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px;padding-top:8px;border-top:1px solid var(--line-soft,#eee)}
.rg-card__date{font-size:.8rem;color:var(--muted)}
.rg-card__sum{font-weight:800;color:var(--ink)}

/* Positionstabelle im Formular */
.rg-postable input,.rg-postable select{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font-size:.92rem}
.rg-postable input:focus,.rg-postable select:focus{outline:none;border-color:var(--accent)}
.rg-num{text-align:right}
.rg-sum{line-height:1.7}

/* ── Kundencenter — in Website integriert (Welle 0.56.2) ───────────── */
/* CI: nutzt die Shop-Akzentfarbe der Website (--accent) statt eigener Vars. */
.kc-page{padding:26px 0 60px;background:#f4f5f8;min-height:60vh}
.kc-page .container{max-width:1080px}
.kc-tabs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:22px;
  border-bottom:1px solid var(--line);padding-bottom:0}
.kc-tab{display:inline-flex;align-items:center;padding:11px 16px;font-weight:600;font-size:.92rem;
  color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0}
.kc-tab:hover{color:var(--ink);background:rgba(0,0,0,.03)}
.kc-tab.is-active{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}
.kc-tabs__spacer{flex:1}
.kc-tab--cta{color:#fff;background:var(--accent);border-radius:9px;font-weight:700;margin-bottom:6px}
.kc-tab--cta:hover{filter:brightness(.94);color:#fff;background:var(--accent)}
.kc-content{min-width:0}

/* Inhalts-Bausteine (vormals im Layout-Style, jetzt zentral) */
.kc-h1{font-size:1.6rem;margin:0 0 4px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.kc-sub{color:var(--muted);margin:0 0 22px}
.kc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px}
.kc-card h2{font-size:1.05rem;margin:0 0 14px}
.kc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:880px){.kc-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.kc-stats{grid-template-columns:1fr}}
.kc-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.kc-stat__n{font-size:1.7rem;font-weight:800;line-height:1;color:var(--steel,#1f2d3d)}
.kc-stat__l{color:var(--muted);font-size:.84rem;margin-top:6px}
.kc-stat--alert .kc-stat__n{color:var(--accent)}
.kc-actions{display:flex;flex-wrap:wrap;gap:10px}
.kc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px 18px;font-weight:700;font-size:.92rem;text-decoration:none;cursor:pointer}
.kc-btn:hover{filter:brightness(.94)}
.kc-btn--light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.kc-btn--light:hover{border-color:var(--steel,#1f2d3d);filter:none}
.kc-warn{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:10px;margin-bottom:9px;font-size:.9rem;border:1px solid}
.kc-warn--freigabe{background:#fff8ec;border-color:#f0dcb0}
.kc-warn--zahlung{background:#fff5f4;border-color:#f0c5c0}
.kc-warn--rueckfrage{background:#eef4ff;border-color:#c5d6f0}
.kc-warn a{color:var(--steel,#1f2d3d);font-weight:700}
.kc-table{width:100%;border-collapse:collapse}
.kc-table th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.kc-table td{padding:12px 10px;border-bottom:1px solid var(--line-soft,#eee);font-size:.92rem;vertical-align:middle}
.kc-table tr:hover td{background:#fafbfc}
.kc-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.kc-badge--prod{background:#eef4ff;color:#2657c4}
.kc-badge--done{background:#eafaef;color:#1f8a43}
.kc-badge--freigabe{background:#fff3da;color:#a06a00}
.kc-badge--storno{background:#f3f4f6;color:#6b7280}
.kc-badge--reklamiert{background:#fdeceb;color:#c0392b}
/* Welle 0.57.0 — Reklamations-Hinweise im Dashboard/Navigation */
.kc-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;
  white-space:nowrap;vertical-align:middle;background:#f3f4f6;color:#6b7280}
.kc-pill--alert{background:#fdeceb;color:#c0392b}
.kc-badge-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);
  vertical-align:middle;margin-left:2px}
.kc-tab__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:6px}
.kc-link{color:var(--steel,#1f2d3d);font-weight:700;text-decoration:none}
.kc-link:hover{text-decoration:underline}
.kc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.kc-step{display:flex;gap:13px;align-items:flex-start;padding:0 0 18px;position:relative}
.kc-step:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:-2px;width:2px;background:var(--line)}
.kc-step.is-done:not(:last-child)::before{background:var(--accent)}
.kc-step__dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--muted);z-index:1}
.kc-step.is-done .kc-step__dot{background:var(--accent);border-color:var(--accent);color:#fff}
.kc-step.is-current .kc-step__dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.kc-step__txt{padding-top:1px;font-size:.92rem}
.kc-step.is-current .kc-step__txt{font-weight:800}
.kc-step.is-pending .kc-step__txt{color:var(--muted)}
.kc-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.kc-flash{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-size:.92rem;font-weight:600}
.kc-flash--success{background:#eafaef;color:#1f8a43;border:1px solid #b9e6c7}
.kc-flash--error{background:#fdeceb;color:#c0392b;border:1px solid #f1c4bf}
@media(max-width:760px){
  .kc-tabs{gap:2px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .kc-tab{padding:10px 12px;white-space:nowrap}
  .kc-tab--cta{margin-left:4px}
}

/* ════════════════════════════════════════════════════════════════════
   Welle 0.61.0 — Backend-Konsistenz: Formularelemente & Listen-Muster
   Ein durchgängiger Stil für ALLE bare input/select/textarea/button im
   Admin (.admin-main), damit nirgends mehr eckige Browser-Defaults
   durchschlagen. .field-Felder und .btn behalten ihre eigenen Regeln.
   ════════════════════════════════════════════════════════════════════ */

/* Bare Formularfelder im Admin — konsistent abgerundet, gleiche Höhe */
.admin-main input:not([type=checkbox]):not([type=radio]):not([type=range]),
.admin-main select,
.admin-main textarea{
  font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.62rem .8rem;line-height:1.3;
  transition:border-color .14s, box-shadow .14s;
}
.admin-main select{
  min-height:42px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394949a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:16px;
  padding-right:2.1rem;
}
.admin-main input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.admin-main select:focus,
.admin-main textarea:focus{
  outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,54,0,.12);
}
.admin-main textarea{min-height:88px;resize:vertical}
/* .field-Felder behalten ihren eigenen (Paper-)Look */
.admin-main .field input,
.admin-main .field select,
.admin-main .field textarea{background:var(--paper);border-radius:var(--radius-sm)}
.admin-main .field input:focus,
.admin-main .field select:focus,
.admin-main .field textarea:focus{background:#fff}

/* Kleine sekundäre Buttons (Filtern/Suchen-Leisten, Werkzeugknöpfe) — Pille,
   passend zur .btn-Familie, aber kompakt. Klasse .btn-sm für bare <button>. */
.admin-main .btn-sm{
  display:inline-flex;align-items:center;gap:.4rem;
  font:inherit;font-weight:500;font-size:.88rem;line-height:1;
  padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  transition:.15s ease;white-space:nowrap;
}
.admin-main .btn-sm:hover{border-color:var(--steel);background:var(--paper)}
.admin-main .btn-sm--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.admin-main .btn-sm--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.admin-main .btn-sm--danger{color:var(--accent);border-color:var(--line)}
.admin-main .btn-sm--danger:hover{border-color:var(--accent);background:rgba(255,54,0,.06)}

/* ── Einheitliches Listen-Muster (Komponente _liste.php) ─────────────── */

/* Filter-/Such-Leiste */
.lst-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Druckbogen-Umschalter Live/Stilistik (geteilt, Welle 0.73.9) */
.dd-db-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:0 0 .8rem}
.dd-db-toggle__btn{appearance:none;border:0;background:#fff;padding:.42rem .95rem;font-size:.85rem;font-weight:600;color:var(--muted,#667);cursor:pointer;transition:.12s}
.dd-db-toggle__btn+.dd-db-toggle__btn{border-left:1px solid var(--line)}
.dd-db-toggle__btn.is-active{background:#0d0d0d;color:#fff}
.dd-roll-canvas{max-height:62vh;overflow:auto;border-radius:8px}
.dd-db-legende{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.8rem;font-size:.82rem}
.dd-db-legende span.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px;border:1px solid rgba(0,0,0,.2)}
.lst-livefilter{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.lst-livefilter__input{flex:1;min-width:220px;padding:.55rem .85rem;border:1px solid var(--line);border-radius:8px;font-size:.92rem;background:#fff}
.lst-livefilter__input:focus{outline:none;border-color:var(--a-accent,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.lst-livefilter__count{font-size:.8rem;color:var(--muted);white-space:nowrap}
.lst-bar .lst-search{flex:1;min-width:220px}
.lst-bar .lst-spacer{flex:1}

/* Tabelle: ganze Zeile klickbar, große Trefferfläche */
.lst-table{width:100%;border-collapse:collapse;background:#fff}
.lst-table thead th{
  text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.lst-table thead th.num{text-align:right}
.lst-table thead th.act{text-align:right}
.lst-table tbody tr{
  border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s;
}
.lst-table tbody tr:last-child{border-bottom:0}
.lst-table tbody tr:hover{background:var(--paper)}
.lst-table tbody tr.is-muted{opacity:.55}
.lst-table td{padding:15px 16px;vertical-align:middle}
.lst-table td.num{text-align:right;white-space:nowrap}
.lst-table td.act{text-align:right;white-space:nowrap}
.lst-table .lst-prim{font-weight:600;color:var(--ink);display:block}
.lst-table .lst-sub{display:block;font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.3}
/* Paginierungs-Footer (Welle 0.64.0) */
.lst-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-top:1rem;padding:.4rem .2rem}
.lst-pager__info{color:var(--muted);font-size:.85rem}
.lst-pager__nav{display:inline-flex;align-items:center;gap:.25rem}
.lst-pager__btn,.lst-pager__num{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:600;transition:.12s}
.lst-pager__btn svg{width:16px;height:16px}
.lst-pager__btn:hover,.lst-pager__num:hover{background:var(--paper);border-color:var(--steel)}
.lst-pager__num.is-active{background:var(--ink);color:#fff;border-color:var(--ink);cursor:default}
.lst-pager__btn.is-disabled{opacity:.35;pointer-events:none}
.lst-pager__gap{color:var(--muted);padding:0 2px}
/* Aktionsspalte: immer rechts, gleiche Optik überall */
.lst-act{
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:500;font-size:.9rem;color:var(--accent);
}
.lst-act svg{width:16px;height:16px;stroke:currentColor;transition:transform .15s}
.lst-table tbody tr:hover .lst-act svg{transform:translateX(3px)}
.lst-actions{display:inline-flex;align-items:center;gap:.5rem;justify-content:flex-end}

/* Karten-Ansicht */
.lst-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lst-card{
  display:flex;flex-direction:column;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  transition:.15s;cursor:pointer;text-decoration:none;color:inherit;
}
.lst-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,13,13,.1)}
.lst-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lst-card__top strong{font-size:1rem;color:var(--ink)}
.lst-card__row{font-size:.86rem;color:var(--ink-soft)}
.lst-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lst-card__foot{display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:.85rem}

/* =====================================================================
   Veredelung-Detailseite (1.20.0) — datengetriebene Verkaufsseite
   ===================================================================== */
.tech-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;margin-bottom:2.4rem}
.tech-hero__media{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;color:#fff}
.tech-hero__media::after{content:'';position:absolute;inset:0;
  background:radial-gradient(420px 240px at 80% 0%, rgba(255,102,0,.20), transparent 65%);pointer-events:none}
.tech-hero__img,.tech-hero__media picture{position:absolute;inset:0;width:100%;height:100%}
.tech-hero__img{object-fit:cover}
.tech-hero__media picture img{width:100%;height:100%;object-fit:cover}
.tech-hero__badge{position:absolute;top:16px;left:16px;z-index:1;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);
  padding:.4rem .8rem;border-radius:999px;font-weight:700}
.tech-hero__copy{min-width:0}

.tech-vorteile{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.55rem}
.tech-vorteile li{position:relative;padding-left:1.7rem;color:var(--ink-soft);font-size:.97rem;line-height:1.5}
.tech-vorteile li::before{content:'';position:absolute;left:0;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

.tech-cta{display:flex;flex-wrap:wrap;gap:12px}
.tech-cta .btn{flex:0 1 auto}

.tech-fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 2.2rem}
.tech-fakt{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:16px 18px;display:flex;flex-direction:column;gap:.25rem}
.tech-fakt__label{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tech-fakt__wert{font-family:var(--font-display);font-size:1.12rem;color:var(--ink)}

.tech-eignung{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:1rem}

@media (max-width:860px){
  .tech-hero{grid-template-columns:1fr;gap:24px}
  .tech-hero__media{aspect-ratio:16/10}
  .tech-fakten{grid-template-columns:repeat(2,1fr)}
  .tech-cta .btn{flex:1 1 100%;justify-content:center}
}

/* Veredelung — Detail-/Makro-Aufnahme (1.20.1) */
.tech-detail{margin:0 0 2rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.tech-detail__img,.tech-detail picture{display:block;width:100%}
.tech-detail picture img{display:block;width:100%}
.tech-detail__cap{font-size:.84rem;color:var(--muted);padding:10px 16px;background:var(--paper);margin:0}

/* ── Hero-Slider (1.20.6) ─────────────────────────────────────────── */
.hero-slider{position:relative;min-height:clamp(440px,62vh,640px);overflow:hidden;background:#1a1f26}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;display:flex;align-items:center}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide__bg,.hero-slide picture{position:absolute;inset:0;z-index:0}
.hero-slide__bg,.hero-slide picture img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,12,15,.82) 0%,rgba(10,12,15,.6) 42%,rgba(10,12,15,.15) 100%)}
.hero-slide__inner{position:relative;z-index:2;color:#fff;padding-top:2rem;padding-bottom:2rem;max-width:760px}
.hero-slide__inner .eyebrow{color:var(--accent);font-weight:700}
.hero-slide__inner h1{color:#fff;margin:.4rem 0 .8rem}
.hero-slide__inner .lead{color:rgba(255,255,255,.9);max-width:54ch;margin-bottom:1.4rem}
.hero-slide__inner .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-slider .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero-slider .btn--ghost:hover{background:rgba(255,255,255,.12)}
.hero-dots{position:absolute;z-index:3;left:0;right:0;bottom:18px;display:flex;gap:.55rem;justify-content:center}
.hero-dot{width:10px;height:10px;border-radius:999px;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.4);transition:.2s}
.hero-dot:hover{background:rgba(255,255,255,.7)}
.hero-dot.is-active{background:var(--accent);width:26px}
@media(max-width:640px){
  .hero-slide__scrim{background:linear-gradient(180deg,rgba(10,12,15,.5) 0%,rgba(10,12,15,.8) 100%)}
  .hero-slide__inner{padding-top:1.4rem;padding-bottom:2.6rem}
}

/* ── Zielgruppen-Hero mit Foto (1.20.9) ──────────────────────────── */
.aud-hero{position:relative;overflow:hidden;min-height:clamp(360px,46vh,460px);display:flex;align-items:center;background:#1a1f26}
.aud-hero__bg,.aud-hero picture{position:absolute;inset:0;z-index:0}
.aud-hero__bg,.aud-hero picture img{width:100%;height:100%;object-fit:cover;display:block}
.aud-hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,12,15,.84) 0%,rgba(10,12,15,.62) 45%,rgba(10,12,15,.2) 100%)}
.aud-hero__inner{position:relative;z-index:2;color:#fff;padding-top:2.4rem;padding-bottom:2.4rem;max-width:760px}
.aud-hero__inner .eyebrow{color:var(--accent);font-weight:700}
.aud-hero__inner h1{color:#fff;margin:.4rem 0 .8rem}
.aud-hero__inner .lead{color:rgba(255,255,255,.92)}
.aud-hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.aud-hero .btn--ghost:hover{background:rgba(255,255,255,.12)}
@media(max-width:640px){
  .aud-hero__scrim{background:linear-gradient(180deg,rgba(10,12,15,.45) 0%,rgba(10,12,15,.82) 100%)}
}

/* ── Settings-Akkordeon (Welle 1.28.2) ───────────────────────────────────
   Native <details>/<summary>-Sektionen für die DTF-/Stick-Parameter. Erste
   Sektion offen (open im Markup), alle anderen geschlossen. Kein JS nötig. */
.set-acc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(20,24,33,.04);margin-bottom:14px;overflow:hidden}
.set-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;cursor:pointer;list-style:none;user-select:none}
.set-acc>summary::-webkit-details-marker{display:none}
.set-acc>summary:hover{background:var(--line-soft)}
.set-acc>summary h3{margin:0;font-size:1.02rem}
.set-acc>summary .hint{color:var(--muted);font-size:.8rem;font-weight:400;
  flex:1;text-align:right;margin-right:4px}
.set-acc__chev{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .18s ease}
.set-acc[open]>summary{border-bottom:1px solid var(--line-soft)}
.set-acc[open]>summary .set-acc__chev{transform:rotate(180deg)}
.set-acc__body{padding:20px}
@media(max-width:640px){
  .set-acc>summary .hint{display:none}
}

/* ============================================================
   Produktliste — Live-Filter, Auswahl-Banner, Bulk-Modal
   (Welle 1.36.1, Namespace .pl-)
   ============================================================ */
.pl-busy{font-size:.82rem;color:var(--muted);align-self:center;animation:pl-pulse 1s ease-in-out infinite}
@keyframes pl-pulse{0%,100%{opacity:.4}50%{opacity:1}}

.pl-empty{padding:2.4rem 1.2rem;text-align:center;color:var(--muted)}
.pl-empty b{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.05rem;margin-bottom:.3rem}

.pl-grouprow td{background:var(--paper);font-family:var(--font-display);font-size:.9rem;padding:.5rem .8rem !important;color:var(--ink-soft)}

.badge.pl-qf{border:0;cursor:pointer;font-family:inherit}
.badge.pl-qf:hover{filter:brightness(.96)}
.badge--plain{background:var(--paper);color:var(--ink-soft)}

/* Auswahl-/Treffer-Banner */
.pl-selbar{position:sticky;top:72px;z-index:20;display:flex;align-items:center;gap:1rem;
  background:var(--steel);color:#fff;border-radius:var(--radius);padding:.7rem 1rem;margin-bottom:1rem;
  box-shadow:var(--shadow-lg)}
.pl-selbar__info{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;font-size:.92rem}
.pl-selbar__info strong{font-family:var(--font-display)}
.pl-selbar__hint{color:#cdd2da;font-size:.88rem}
.pl-selbar__act{display:flex;gap:.5rem;align-items:center}
.pl-link{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.pl-link:hover{color:var(--orange)}

/* Modal */
.pl-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem}
.pl-modal[hidden]{display:none}
.pl-modal__backdrop{position:absolute;inset:0;background:rgba(20,22,28,.55);backdrop-filter:blur(2px)}
.pl-modal__box{position:relative;z-index:1;background:var(--card);border-radius:var(--radius);width:100%;max-width:560px;
  box-shadow:var(--shadow-lg);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.pl-modal__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.pl-modal__head h3{font-size:1.15rem}
.pl-modal__x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 .2rem}
.pl-modal__x:hover{color:var(--ink)}
.pl-modal__body{padding:1.2rem;overflow:auto}
.pl-modal__foot{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.2rem;border-top:1px solid var(--line);background:var(--paper)}

/* Ziel-Umschalter */
.pl-target{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.1rem}
.pl-target__opt{display:flex;gap:.55rem;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .8rem;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.pl-target__opt:has(input:checked){border-color:var(--accent);background:#fff6f3}
.pl-target__opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.pl-target__opt input{margin-top:.2rem}
.pl-target__opt b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.92rem}
.pl-target__opt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}

/* Felder im Modal */
.pl-fld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.pl-fld>span{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.pl-fld select,.pl-fld input[type=number]{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.pl-fld select[multiple]{padding:.3rem}
.pl-fld-row{display:flex;gap:.7rem;flex-wrap:wrap}
.pl-fld-row .pl-fld{flex:1 1 120px;margin-bottom:.4rem}
.pl-note{font-size:.8rem;color:var(--muted);line-height:1.45;margin:.2rem 0 0;background:var(--paper);
  border-left:3px solid var(--line);padding:.5rem .7rem;border-radius:0 6px 6px 0}
.pl-confirm{margin-top:.6rem;font-size:.88rem;color:var(--ink-soft);background:#fff6f3;border:1px solid #ffd9cc;
  border-radius:8px;padding:.7rem .85rem;line-height:1.5}

/* Toast */
.pl-toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,1.5rem);z-index:1100;
  background:var(--steel);color:#fff;padding:.8rem 1.2rem;border-radius:999px;font-size:.9rem;
  box-shadow:var(--shadow-lg);opacity:0;transition:opacity .25s ease,transform .25s ease;max-width:90vw}
.pl-toast.is-on{opacity:1;transform:translate(-50%,0)}

@media(max-width:640px){
  .pl-target{grid-template-columns:1fr}
  .pl-selbar{top:60px;flex-direction:column;align-items:stretch}
  .pl-selbar__act{justify-content:flex-end}
}

/* ============================================================
   STOREFRONT-REDESIGN (Welle 1.50.0) — verbindliche Ziel-Mockups
   Sortimentsliste (zweistufige Pill-Filter, Filterbar-Card,
   Empfehlungs-Callout, neue Produktkarten) + Produktdetailseite
   (Galerie-Thumbstrip, Trust-Row, Veredelungs-Karten,
   Personalisierung, Info-Spalten, „Passt gut dazu").
   Nur additive Klassen mit dem Präfix .sf-/.pdx- — bestehende
   .prod/.chip-Stile bleiben für andere Seiten unangetastet.
   ============================================================ */

/* ---------- Sortiment: Kopf ---------- */
.sf-head{padding:2.2rem 0 1.1rem}
.sf-head .eyebrow{display:block;color:var(--accent);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.35rem}
.sf-head h1{font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.02;margin:0 0 .55rem}
.sf-head .sf-sub{color:var(--ink-soft);max-width:70ch;font-size:1.02rem;margin:0}

/* ---------- Zweistufige Pill-Filter ---------- */
.sf-pillbar{display:flex;flex-direction:column;gap:.7rem;margin:1.3rem 0 1.4rem}
.sf-pillrow{display:flex;gap:.6rem;flex-wrap:wrap}
.sf-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.62rem 1.15rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);
  font-weight:600;font-size:.92rem;line-height:1;cursor:pointer;transition:.15s;white-space:nowrap}
.sf-pill svg{width:18px;height:18px;flex:none;stroke-width:1.8}
.sf-pill:hover{border-color:var(--steel);color:var(--ink)}
.sf-pill.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px -8px rgba(255,54,0,.6)}
.sf-pill.is-active svg{stroke:#fff}
.sf-pillrow--sub .sf-pill{font-weight:500;padding:.55rem 1rem}

/* ---------- Filter-Bar (weiße Card) ---------- */
.sf-filterbar{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:1.05rem 1.2rem;display:grid;
  grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(120px,1fr)) auto;
  gap:1rem 1.1rem;align-items:end;margin-bottom:1.1rem}
.sf-fb-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sf-fb-field>label{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.sf-fb-search{position:relative}
.sf-fb-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--muted);pointer-events:none}
.sf-fb-search input{width:100%;padding:.7rem .9rem .7rem 2.35rem;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.sf-fb-field select{width:100%;padding:.65rem .8rem;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff;color:var(--ink);cursor:pointer}
.sf-fb-field input:focus,.sf-fb-field select:focus{outline:0;border-color:var(--accent)}
.sf-fb-farbe{position:relative}
.sf-fb-farbe::before{content:"";position:absolute;left:11px;top:calc(50% + .55rem);
  transform:translateY(-50%);width:15px;height:15px;border-radius:50%;z-index:1;
  background:conic-gradient(#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935);
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sf-fb-farbe select{padding-left:2.05rem}
.sf-fb-preis .sf-preis-out{font-size:.86rem;color:var(--ink);font-weight:600;padding:.1rem 0 .15rem}
.sf-range{position:relative;height:24px;display:flex;align-items:center}
.sf-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:var(--line);border-radius:3px;outline:none;margin:0}
.sf-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer}
.sf-range input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);cursor:pointer}
.sf-range .sf-range-fill{position:absolute;height:3px;background:var(--accent);border-radius:3px;pointer-events:none}
.sf-fb-reset{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-soft);
  font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:.15s;height:fit-content}
.sf-fb-reset:hover{border-color:var(--steel);color:var(--ink)}
.sf-fb-reset svg{width:15px;height:15px;stroke-width:2}

/* ---------- Werbeartikel-Kategorie-Kacheln (Baustein 2) ---------- */
.sf-katkacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1rem;margin:0 0 1.6rem}
.sf-katkachel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:.16s}
.sf-katkachel:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(20,22,30,.08)}
.sf-katkachel__media{position:relative;aspect-ratio:4/3;background:var(--paper);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.sf-katkachel__media img{width:100%;height:100%;object-fit:cover;display:block}
.sf-katkachel__ph{color:var(--muted)}
.sf-katkachel__ph svg{width:40px;height:40px}
.sf-katkachel__body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.sf-katkachel__name{font-weight:700;font-size:.98rem;line-height:1.25}
.sf-katkachel__count{color:var(--muted);font-size:.82rem}
@media (max-width:560px){
  .sf-katkacheln{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
  .sf-katkachel__name{font-size:.9rem}
}

/* ---------- Angebote / Deals (Welle 1.79.0) ---------- */
/* Kachelfeld unter den Filter-Pills — kaufbare Aktionsangebote. */
.sf-deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1rem;margin:0 0 1.6rem}
.sf-deal{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);
  transition:.18s;position:relative}
.sf-deal:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,22,30,.10)}
.sf-deal__media{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#fff6f2,#fbe9e1);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.sf-deal__media img{width:100%;height:100%;object-fit:cover;display:block}
.sf-deal__ic{display:grid;place-items:center;color:var(--accent)}
.sf-deal__ic svg{width:46px;height:46px;stroke-width:1.5;fill:none}
.sf-deal__badge{position:absolute;top:12px;left:12px;padding:.32rem .72rem;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.sf-deal__body{padding:.95rem 1.05rem .4rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.sf-deal__title{font-family:var(--font-display,inherit);font-weight:700;font-size:1.08rem;line-height:1.25;color:var(--ink)}
.sf-deal__sub{color:var(--ink-soft);font-size:.88rem;line-height:1.35}
.sf-deal__kond{margin-top:.3rem;color:var(--accent-dark);font-weight:800;font-size:1rem}
.sf-deal__cta{display:inline-flex;align-items:center;gap:.35rem;margin:.2rem 1.05rem 1rem;
  color:var(--accent-dark);font-weight:700;font-size:.88rem}
.sf-deal__cta svg{width:15px;height:15px;stroke-width:2.2}
.sf-deal:hover .sf-deal__cta{gap:.55rem}
@media (max-width:560px){
  .sf-deals{grid-template-columns:1fr;gap:.8rem}
}

/* Angebots-Detailseite */
.sf-deal-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);
  font-weight:600;font-size:.9rem;text-decoration:none;margin-bottom:1.2rem;transition:.15s}
.sf-deal-back svg{width:16px;height:16px}
.sf-deal-back:hover{color:var(--accent)}
.sf-deal-detail{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:start}
.sf-deal-detail__media{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#fff6f2,#fbe9e1);display:flex;align-items:center;justify-content:center}
.sf-deal-detail__media img{width:100%;height:100%;object-fit:cover}
.sf-deal-detail__ph{color:var(--accent)}
.sf-deal-detail__ph svg{width:84px;height:84px}
.sf-deal-detail__badge{position:absolute;top:16px;left:16px;padding:.4rem .9rem;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.85rem;font-weight:800}
.sf-deal-detail__body h1{margin:.3rem 0 .4rem}
.sf-deal-detail__sub{color:var(--ink-soft);font-size:1.05rem;margin:0 0 1rem}
.sf-deal-detail__kond{display:inline-block;background:var(--accent);color:#fff;font-weight:800;
  padding:.45rem 1rem;border-radius:10px;font-size:1.05rem;margin-bottom:1rem}
.sf-deal-detail__desc{color:var(--ink-soft);font-size:.96rem;line-height:1.6;margin-bottom:1.4rem}
.sf-deal-detail__form{display:flex;flex-direction:column;gap:.9rem;max-width:360px}
.sf-deal-detail__lbl{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem;color:var(--ink)}
.sf-deal-detail__lbl select,.sf-deal-detail__lbl input{padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:10px;font-size:1rem;font-weight:400}
.sf-deal-detail__hint{color:var(--muted);font-size:.82rem;margin:0}
.sf-deal-detail__price{display:flex;flex-direction:column;gap:.15rem;padding:.6rem 0}
.sf-deal-detail__total{font-size:1.7rem;font-weight:800;color:var(--accent-dark)}
.sf-deal-detail__per{color:var(--muted);font-size:.9rem}
.sf-deal-detail__save{color:#2f6f4f;font-weight:700;font-size:.92rem}
.sf-deal-detail__btn{margin-top:.3rem}
.sf-deal-detail__note{color:var(--muted);font-size:.8rem;margin:.2rem 0 0}
@media (max-width:760px){
  .sf-deal-detail{grid-template-columns:1fr;gap:24px}
}

/* ---------- Empfehlungs-Callout ---------- */
.sf-empf{display:flex;align-items:center;gap:1.1rem;background:#fff6f2;border:1px solid #ffd9cc;
  border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.3rem}
.sf-empf__ic{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent);color:#fff}
.sf-empf__ic svg{width:24px;height:24px;stroke:#fff;stroke-width:1.7}
.sf-empf__tx{flex:1;min-width:0}
.sf-empf__tx b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.15rem}
.sf-empf__tx span{color:var(--ink-soft);font-size:.9rem}
.sf-empf__cta{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.15rem;
  border:1px solid var(--accent);border-radius:10px;color:var(--accent-dark);background:#fff;
  font-weight:700;font-size:.9rem;transition:.15s;white-space:nowrap}
.sf-empf__cta:hover{background:var(--accent);color:#fff}
.sf-empf__cta svg{width:15px;height:15px;stroke-width:2.2}

/* ---------- Treffer-Zeile + Ansicht-Toggle ---------- */
.sf-resultbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 1rem}
.sf-resultbar .sf-count{color:var(--muted);font-size:.9rem}
.sf-viewtoggle{display:inline-flex;gap:.3rem}
.sf-viewtoggle button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--muted);cursor:pointer;transition:.15s}
.sf-viewtoggle button svg{width:17px;height:17px}
.sf-viewtoggle button.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.sf-viewtoggle button:not(.is-active):hover{border-color:var(--steel);color:var(--ink)}

/* ---------- Neue Produktkarte ---------- */
.sf-grid,.prod-grid:has(.sf-card){display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:2.2rem}
.sf-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.sf-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#d9dde8}
.sf-card__ph{position:relative;aspect-ratio:1;background:linear-gradient(155deg,#f4f5f9,#e9ecf3);
  display:grid;place-items:center;overflow:hidden}
.sf-card__ph img{width:100%;height:100%;object-fit:contain;padding:7%;transition:.25s}
.sf-card:hover .sf-card__ph img{transform:scale(1.03)}
.sf-card__ph .mono{font-family:var(--font-display);font-weight:600;font-size:2.6rem;color:#c6cad4}
.sf-badge{position:absolute;top:13px;left:13px;z-index:2;padding:.32rem .7rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--accent);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.sf-badge--verein{background:#1c2b46}
.sf-badge--firma{background:#2f6f4f}
.sf-badge--stick{background:#6b3fa0}
.sf-fav{position:absolute;top:11px;right:11px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--muted);
  cursor:pointer;transition:.15s}
.sf-fav svg{width:18px;height:18px;stroke-width:1.8;fill:none}
.sf-fav:hover{color:var(--accent);border-color:var(--accent)}
.sf-fav.is-on{color:var(--accent);border-color:var(--accent)}
.sf-fav.is-on svg{fill:var(--accent)}
.sf-card__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:.32rem;flex:1}
.sf-swatches{display:flex;align-items:center;gap:6px;margin-bottom:.25rem}
.sf-swatches .sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.sf-swatches .more{font-size:.74rem;color:var(--muted);font-weight:600;margin-left:.1rem}
.sf-card__brand{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.sf-card__name{font-family:var(--font-display);font-weight:600;font-size:1.06rem;line-height:1.2;color:var(--ink)}
.sf-card__price{margin-top:auto;padding-top:.45rem}
.sf-card__price .ab{color:var(--accent-dark);font-weight:700}
.sf-card__price .amt{color:var(--accent-dark);font-weight:700;font-size:1.12rem}
.sf-card__price .tax{display:block;color:var(--muted);font-weight:400;font-size:.78rem;margin-top:.05rem}

/* Listenansicht */
.sf-grid.is-list{grid-template-columns:1fr;gap:14px}
.sf-grid.is-list .sf-card{flex-direction:row;align-items:stretch}
.sf-grid.is-list .sf-card__ph{width:170px;flex:none;aspect-ratio:auto}
.sf-grid.is-list .sf-card__body{padding:18px 20px}

/* ============================================================
   PRODUKTDETAIL-REDESIGN (.pdx-)
   ============================================================ */
.pdx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.6rem;
  padding:1.6rem 0 2.4rem;align-items:start}
.pdx-crumbs{font-size:.85rem;color:var(--muted);margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.pdx-crumbs a{color:var(--muted)}
.pdx-crumbs a:hover{color:var(--ink)}
.pdx-crumbs .sep{color:#c8ccd6}
.pdx-crumbs .cur{color:var(--ink-soft)}

/* Galerie mit Thumb-Strip links */
.pdx-gallery{display:grid;grid-template-columns:74px 1fr;gap:14px}
.pdx-gallery--single{grid-template-columns:1fr}
.pdx-thumbs{display:flex;flex-direction:column;gap:11px}
.pdx-thumb{width:74px;height:88px;padding:0;border:1.5px solid var(--line);border-radius:10px;
  overflow:hidden;cursor:pointer;background:#fff;transition:.15s}
.pdx-thumb img{width:100%;height:100%;object-fit:cover}
.pdx-thumb.is-active{border-color:var(--accent)}
.pdx-thumb:hover{border-color:var(--steel)}
.pdx-stage{position:relative;aspect-ratio:1;min-width:0;border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg,#f4f5f9,#e9ecf3);display:grid;place-items:center}
.pdx-stage img{width:100%;height:100%;object-fit:contain;padding:6%}
.pdx-stage .mono{font-family:var(--font-display);font-weight:600;font-size:5rem;color:#c9cdd7}
.pdx-zoom{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;
  color:var(--ink-soft);box-shadow:var(--shadow);transition:.15s}
.pdx-zoom:hover{color:var(--accent);border-color:var(--accent)}
.pdx-zoom svg{width:18px;height:18px;stroke-width:2}

/* Rechte Spalte */
.pdx-badge{display:inline-block;padding:.32rem .8rem;border-radius:999px;background:var(--accent);
  color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.02em;margin-bottom:.7rem}
.pdx-brand{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;
  font-size:.8rem;font-weight:700;margin-bottom:.2rem}
.pdx-title{font-size:clamp(1.7rem,3vw,2.1rem);line-height:1.06;margin:0 0 .7rem}
.pdx-desc{color:var(--body);line-height:1.6;margin:0 0 1.2rem;max-width:54ch}
.pdx-price{display:flex;align-items:baseline;gap:.45rem;margin:0 0 .15rem}
.pdx-price .ab{color:var(--accent-dark);font-weight:700;font-size:1.1rem}
.pdx-price .amt{color:var(--accent-dark);font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1}
.pdx-price-tax{color:var(--muted);font-size:.82rem;margin:0 0 1.2rem}

/* Trust-Row */
.pdx-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding:.85rem 0;margin:0 0 1.2rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pdx-trust span{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-soft);
  font-size:.8rem;font-weight:500;letter-spacing:.005em;white-space:nowrap}
.pdx-trust svg{width:15px;height:15px;stroke:var(--muted);stroke-width:1.7;flex:none}
@media(max-width:560px){.pdx-trust{gap:.55rem 1.2rem}.pdx-trust span{font-size:.76rem}}

/* Options-Label */
.pdx-optlabel{display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:.86rem;color:var(--ink-soft);margin:0 0 .5rem}
.pdx-optlabel .cur{color:var(--muted);font-weight:500}
.pdx-optlabel a{color:var(--muted);font-size:.82rem;font-weight:500;text-decoration:underline}
.pdx-optlabel a:hover{color:var(--accent)}

/* Zwei-Spalten: Farbe | Größe */
.pdx-optgrid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:1.2rem}

/* Farb-Dots */
/* Größen-Pills */
.pdx-sizes{display:flex;flex-wrap:wrap;gap:7px}
.pdx-size{min-width:44px;text-align:center;border:1px solid var(--line);border-radius:8px;
  padding:.45rem .55rem;font-weight:600;font-size:.86rem;background:#fff;cursor:pointer;color:var(--ink-soft);transition:.15s}
.pdx-size:hover{border-color:var(--steel);color:var(--ink)}
.pdx-size.is-active{background:var(--steel);border-color:var(--steel);color:#fff}

/* Veredelungs-Karten */
.pdx-tech{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.2rem;align-items:stretch}
@media(max-width:680px){.pdx-tech{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.pdx-tech{grid-template-columns:1fr}}
.pdx-techcard{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);
  border-radius:10px;padding:.7rem .75rem;background:#fff;cursor:pointer;text-align:left;transition:.15s;position:relative}
.pdx-techcard svg{width:19px;height:19px;stroke:var(--ink-soft);stroke-width:1.6;flex:none}
.pdx-techcard b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.9rem;line-height:1.15}
.pdx-techcard small{display:block;color:var(--muted);font-size:.74rem;margin-top:.05rem;line-height:1.25}
.pdx-techcard:hover{border-color:var(--steel)}
.pdx-techcard.is-active{border-color:var(--accent);background:#fff6f2}
.pdx-techcard.is-active svg{stroke:var(--accent-dark)}
/* Info-„i" oben rechts in der Veredelungskachel (Wunsch Frank). Eigenes
   klickbares Element im <button> → öffnet Erklär-Modal, ohne die Kachel
   auszuwählen (stopPropagation im JS). */
.pdx-techinfo{position:absolute;top:5px;right:5px;width:20px;height:20px;display:grid;
  place-items:center;border-radius:50%;color:var(--muted);cursor:pointer;transition:.12s;z-index:1}
.pdx-techinfo svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;margin:0}
.pdx-techinfo:hover{color:var(--accent-dark);background:#fff1ec}
.pdx-techinfo:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Veredelungs-Info-Modal */
.pdx-infomodal{position:fixed;inset:0;z-index:2100;background:rgba(15,15,18,.55);
  display:grid;place-items:center;padding:5vh 1.2rem;animation:pdxFade .12s ease}
@keyframes pdxFade{from{opacity:0}to{opacity:1}}
.pdx-infomodal__box{background:#fff;border-radius:14px;max-width:380px;width:100%;
  padding:1.4rem 1.5rem 1.5rem;position:relative;box-shadow:0 18px 50px rgba(15,15,18,.25)}
.pdx-infomodal__x{position:absolute;top:.6rem;right:.7rem;border:0;background:none;
  font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:.2rem .4rem}
.pdx-infomodal__x:hover{color:var(--ink)}
.pdx-infomodal__h{font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:1.1rem;margin:0 1.5rem .5rem 0}
.pdx-infomodal__t{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:0}
/* Welle 1.56.7 — Im Designer (.dz) markiert tw-designer.js die aktive Technik
   mit .sel (nicht .is-active). Gleiche Aktiv-Optik wie auf der Produktseite. */
.pdx-techcard.sel{border-color:var(--accent);background:#fff6f2}
.pdx-techcard.sel svg{stroke:var(--accent-dark)}
/* „Ohne Veredelung" bleibt als Blankware-Default funktional, aber dezent —
   keine rote Dauer-Hervorhebung; erst bei echter Auswahl akzentuiert. */
.pdx-techcard--ohne{background:var(--paper)}
.pdx-techcard--ohne b{color:var(--ink-soft)}
/* Kombiprodukt-Karten (Welle 1.56.6 — vom alten .pd .tech-pill--kombi auf .pdx
   portiert): keine Auswahl, sondern „gehören zusammen". Dezenter Akzentrahmen,
   nicht klickbar; ein „+" verbindet aufeinanderfolgende Kombi-Karten. */
.pdx-techcard--kombi{cursor:default;border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,#fff)}
.pdx-tech:has(.pdx-techcard--kombi){align-items:center}
.pdx-techcard--kombi + .pdx-techcard--kombi{position:relative}
.pdx-techcard--kombi + .pdx-techcard--kombi::before{content:"+";position:absolute;left:-1.1rem;top:50%;
  transform:translateY(-50%);color:var(--accent-dark);font-weight:700;font-size:1.1rem}

/* Personalisierung */
.pdx-perso{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.3rem}
@media(max-width:560px){.pdx-perso{grid-template-columns:1fr}}
.pdx-perso input{width:100%;padding:.72rem .85rem;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;color:var(--ink)}
.pdx-perso input:focus{outline:0;border-color:var(--accent)}

/* Menge + CTA */
.pdx-design-btn{display:flex;width:100%;justify-content:center;align-items:center;
  border:1.5px solid var(--accent);color:var(--accent-dark);font-weight:700;
  margin-bottom:1rem}
.pdx-design-btn:hover{background:#fff6f2;border-color:var(--accent-dark)}
.pdx-buyrow{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;margin-bottom:1rem}
.pdx-qty{display:flex;flex-direction:column;gap:.4rem}
.pdx-qty>label{font-weight:700;font-size:.82rem;color:var(--ink-soft)}
.pdx-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pdx-stepper button{width:42px;height:44px;border:0;background:#fff;color:var(--ink-soft);font-size:1.3rem;
  cursor:pointer;display:grid;place-items:center;transition:.12s}
.pdx-stepper button:hover{background:var(--paper);color:var(--accent)}
.pdx-stepper input{width:58px;height:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font:inherit;font-weight:700;color:var(--ink);background:#fff}
.pdx-minqty{color:var(--muted);font-size:.8rem;margin-top:.3rem}
.pdx-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:.9rem}
@media(max-width:560px){.pdx-cta{grid-template-columns:1fr}}
.pdx-cta .btn{width:100%;justify-content:center}
.pdx-cta .btn svg{width:17px;height:17px;margin-right:.45rem;vertical-align:-3px}

/* Feature-Strip */
.pdx-features{display:flex;flex-wrap:wrap;gap:.4rem 2rem;padding:1.1rem 0;margin:.5rem 0 2.2rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:space-between}
.pdx-features span{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink-soft);font-size:.88rem}
.pdx-features svg{width:19px;height:19px;stroke:var(--muted);stroke-width:1.7;flex:none}

/* Größentabelle-Modal (Welle 1.56.7) */
.pdx-gt{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.2rem}
.pdx-gt[hidden]{display:none!important}
.pdx-gt__backdrop{position:absolute;inset:0;background:rgba(15,18,24,.5)}
.pdx-gt__dialog{position:relative;width:100%;max-width:440px;background:#fff;border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;animation:pdxGtIn .16s ease-out}
@keyframes pdxGtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pdx-gt__head{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.pdx-gt__head h3{margin:0;font-size:1.1rem}
.pdx-gt__x{width:34px;height:34px;border:0;background:transparent;color:var(--ink-soft);
  cursor:pointer;border-radius:8px;display:grid;place-items:center;transition:.12s}
.pdx-gt__x:hover{background:var(--paper);color:var(--accent)}
.pdx-gt__x svg{width:18px;height:18px}
.pdx-gt__body{padding:1.1rem 1.3rem 1.4rem}
.pdx-gt__table{width:100%;border-collapse:collapse;font-size:.9rem}
.pdx-gt__table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;padding:0 .5rem .55rem;border-bottom:1px solid var(--line)}
.pdx-gt__table td{padding:.55rem .5rem;border-bottom:1px solid var(--paper);color:var(--ink-soft)}
.pdx-gt__table tbody tr:last-child td{border-bottom:0}
.pdx-gt__table td b{color:var(--ink)}
.pdx-gt__hint{margin:.9rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}

/* Info-Spalten (Beschreibung / Größen / Veredelung / Teamshop) */
.pdx-info{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:2.6rem;background:#fff}
.pdx-info__tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.pdx-info__tab{padding:1rem 1.2rem;font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--ink-soft);border-bottom:3px solid transparent}
.pdx-info__tab:first-child{color:var(--ink);border-bottom-color:var(--accent)}
.pdx-info__cols{display:grid;grid-template-columns:repeat(4,1fr)}
.pdx-info__col{padding:1.3rem 1.3rem 1.5rem;border-right:1px solid var(--line);font-size:.86rem;color:var(--ink-soft);line-height:1.6}
.pdx-info__col:last-child{border-right:0}
.pdx-info__col p{margin:0 0 .6rem}
.pdx-info__col ul{list-style:none;margin:.3rem 0 0;padding:0}
.pdx-info__col li{position:relative;padding-left:1rem;margin-bottom:.3rem}
.pdx-info__col li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:700}
.pdx-info__col a{color:var(--accent);font-weight:600;text-decoration:none}
.pdx-info__col a:hover{text-decoration:underline}
.pdx-info__lbl{color:var(--muted);font-size:.8rem}
@media(max-width:820px){
  .pdx-info__tabs,.pdx-info__cols{grid-template-columns:1fr 1fr}
  .pdx-info__col:nth-child(2){border-right:0}
  .pdx-info__tab{border-bottom:1px solid var(--line)}
}
@media(max-width:520px){
  .pdx-info__tabs,.pdx-info__cols{grid-template-columns:1fr}
  .pdx-info__col{border-right:0;border-bottom:1px solid var(--line)}
}

/* „Passt gut dazu" */
.pdx-related{margin-bottom:2rem;position:relative}
.pdx-related h2{font-size:1.4rem;margin:0 0 1.1rem}
.pdx-related__track{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pdx-relcard{display:flex;align-items:center;gap:1rem;border:1px solid var(--line);border-radius:12px;
  padding:.85rem;background:#fff;transition:.15s}
.pdx-relcard:hover{box-shadow:var(--shadow);border-color:#d9dde8}
.pdx-relcard__ph{width:84px;height:84px;flex:none;border-radius:9px;overflow:hidden;
  background:linear-gradient(155deg,#f4f5f9,#e9ecf3);display:grid;place-items:center}
.pdx-relcard__ph img{width:100%;height:100%;object-fit:contain;padding:8%}
.pdx-relcard__ph .mono{font-family:var(--font-display);font-weight:600;font-size:1.6rem;color:#c6cad4}
.pdx-relcard__tx{min-width:0}
.pdx-relcard__tx .nm{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:.96rem;line-height:1.2;margin-bottom:.3rem}
.pdx-relcard__tx .pr{color:var(--accent-dark);font-weight:700;font-size:.95rem}
.pdx-relcard__sw{display:flex;gap:4px;margin-top:.4rem;align-items:center}
.pdx-relcard__sw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.pdx-relcard__sw .more{font-size:.72rem;color:var(--muted);font-weight:600}

@media(max-width:980px){
  .sf-grid,.prod-grid:has(.sf-card),.pdx-related__track{grid-template-columns:repeat(3,1fr)}
  .pdx{grid-template-columns:1fr;gap:1.8rem}
  .sf-filterbar{grid-template-columns:1fr 1fr;gap:.9rem}
}
@media(max-width:680px){
  .sf-grid,.prod-grid:has(.sf-card),.pdx-related__track{grid-template-columns:repeat(2,1fr)}
  .sf-filterbar{grid-template-columns:1fr}
  .pdx-gallery{grid-template-columns:1fr}
  .pdx-thumbs{flex-direction:row;order:2}
  .pdx-thumb{width:60px;height:60px}
}

/* ============================================================
   FILTERBAR-POPUPS (Welle 1.51.0) — Marke/Größe/Farbe als
   dreispaltige Dropdown-Popups statt nativer <select>; Farbe mit
   runden Farb-Pills (Punkt + Name). Versteckte #cat-* Inputs
   tragen weiter den Wert für catalog-filter.js.
   ============================================================ */
.sf-pop{position:relative}
.sf-pop__trg{display:flex;align-items:center;gap:.45rem;width:100%;padding:.65rem .8rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  font:inherit;cursor:pointer;text-align:left;transition:.15s}
.sf-pop__trg:hover{border-color:var(--steel)}
.sf-pop.is-open .sf-pop__trg{border-color:var(--accent)}
.sf-pop__trg .sf-pop__lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-pop__trg svg{width:16px;height:16px;flex:none;stroke:var(--muted);transition:transform .18s}
.sf-pop.is-open .sf-pop__trg svg{transform:rotate(180deg)}
/* Farb-Trigger: Punkt links */
.sf-pop__trg--farbe{padding-left:.7rem}
.sf-pop__dot{width:15px;height:15px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.sf-pop__dot--all{background:conic-gradient(#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935)}

/* Menü */
.sf-pop__menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;
  min-width:max(100%,300px);max-width:440px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:.6rem;max-height:340px;overflow:auto}
.sf-pop__menu[hidden]{display:none}
.sf-pop__menu--farbe{min-width:max(100%,340px);max-width:480px}
.sf-pop__grid{display:grid;gap:.4rem}
.sf-pop__grid--3{grid-template-columns:repeat(3,1fr)}

/* Text-Optionen (Marke/Größe) */
.sf-pop__opt{padding:.55rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--ink-soft);font:inherit;font-size:.86rem;cursor:pointer;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.13s}
.sf-pop__opt:hover{border-color:var(--steel);color:var(--ink)}
.sf-pop__opt.is-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* Farb-Pills (rund, Punkt + Name) */
.sf-pop__color{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink-soft);font:inherit;font-size:.84rem;cursor:pointer;
  text-align:left;transition:.13s;min-width:0}
.sf-pop__color i{width:17px;height:17px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.sf-pop__color span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-pop__color:hover{border-color:var(--steel);color:var(--ink)}
.sf-pop__color.is-active{border-color:var(--accent);color:var(--ink);font-weight:600;
  box-shadow:0 0 0 1.5px var(--accent)}

@media(max-width:560px){
  .sf-pop__menu{min-width:min(92vw,360px);left:auto;right:0}
  .sf-pop__grid--3{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Angebots-Formular: Produkt-Tippsuche (Welle 1.79.1) ---------- */
.ang-prodpick{position:relative;display:flex;gap:.5rem;align-items:flex-start}
.ang-prodpick #ang-prodsearch{flex:1}
.ang-prodresults{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(20,22,30,.14);
  max-height:320px;overflow:auto}
.ang-prodrow{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;
  padding:.55rem .8rem;border:0;background:none;cursor:pointer;border-bottom:1px solid var(--line)}
.ang-prodrow:last-child{border-bottom:0}
.ang-prodrow:hover{background:var(--paper)}
.ang-prodname{font-weight:600;color:var(--ink);font-size:.95rem}
.ang-prodmeta{color:var(--muted);font-size:.8rem}
.ang-prodempty{padding:.7rem .8rem;color:var(--muted);font-size:.88rem}

/* Bild-Picker-Feld */
.ang-mediapick{display:flex;gap:1rem;align-items:center}
.ang-mediapreview{flex:none;width:88px;height:66px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper) center/cover no-repeat;display:block}
.ang-mediapick__actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- Mediathek-Picker-Modal (wiederverwendbar) ---------- */
.mp-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,17,24,.5);
  display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
.mp-overlay[hidden]{display:none}
.mp-modal{background:#fff;border-radius:16px;width:min(900px,96vw);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.mp-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.mp-head strong{font-size:1.05rem}
.mp-x{border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.mp-x:hover{color:var(--ink)}
.mp-tools{display:flex;gap:.7rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--line)}
.mp-search{flex:1;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;font-size:1rem}
.mp-kat{padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;font-size:.95rem;max-width:240px}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem;
  padding:1.1rem 1.2rem;overflow:auto;flex:1}
.mp-card{display:flex;flex-direction:column;gap:.35rem;border:1px solid var(--line);border-radius:10px;
  background:#fff;padding:.4rem;cursor:pointer;text-align:left;transition:.14s}
.mp-card:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(20,22,30,.1)}
.mp-thumb{display:block;width:100%;aspect-ratio:4/3;border-radius:7px;background:var(--paper) center/cover no-repeat}
.mp-name{font-size:.8rem;color:var(--ink);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mp-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:2rem}
.mp-pager{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem;border-top:1px solid var(--line)}
.mp-pg{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1.1rem}
.mp-pg.is-off{opacity:.4;cursor:default}
.mp-pginfo{color:var(--muted);font-size:.88rem}

/* ---------- Kollektions-Admin: Chip-Auswahl (Welle 1.80.0) ---------- */
.koll-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.koll-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;
  border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.88rem;
  background:#fff;transition:.14s;user-select:none}
.koll-chip:hover{border-color:var(--steel)}
.koll-chip input{margin:0}
.koll-chip:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- Kollektionsberater Wizard (Welle 1.80.3) ---------- */
.brt{max-width:920px;margin:0 auto;padding:2rem 1.2rem}
.brt__head{margin-bottom:2rem}
.brt__kicker{display:inline-block;color:var(--accent);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:.6rem}
.brt__steps{display:flex;flex-wrap:wrap;gap:.5rem}
.brt__step{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted);padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line)}
.brt__step b{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--paper);font-size:.78rem}
.brt__step.is-now{color:var(--ink);border-color:var(--accent)}
.brt__step.is-now b{background:var(--accent);color:#fff}
.brt__step.is-done b{background:#2e7d32;color:#fff}
.brt__h1{font-size:1.9rem;line-height:1.15;margin:0 0 .5rem}
.brt__sub{color:var(--muted);margin:0 0 1.6rem;font-size:1.02rem}
.brt__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;margin-bottom:1.8rem}
.brt__grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.brt__grid--3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.brt__opt{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;transition:.14s}
.brt__opt:hover{border-color:var(--accent)}
.brt__opt:has(input:checked){border-color:var(--accent);background:#fff5f0;box-shadow:inset 0 0 0 1px var(--accent)}
.brt__opt input{flex:none;width:1.1rem;height:1.1rem;accent-color:var(--accent)}
.brt__opt-tx{font-size:.96rem}
.brt__opt--big{padding:1.3rem 1.2rem}
.brt__opt--big .brt__opt-tx{display:flex;flex-direction:column;gap:.2rem}
.brt__opt--big b{font-size:1.1rem}
.brt__opt--big small{color:var(--muted)}
.brt__field{margin-bottom:1.6rem}
.brt__field>label{display:block;font-weight:700;margin-bottom:.6rem}
.brt__field input[type=number]{width:100%;max-width:220px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;font-size:1.05rem}
.brt__check{display:flex;align-items:center;gap:.6rem;font-weight:500;cursor:pointer}
.brt__check input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.brt__nav{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem}
.brt__nav--center{justify-content:center;margin-top:1.6rem}

/* Ergebnis */
.brt--result{max-width:1100px}
.brt__rhead{text-align:center;margin-bottom:2rem}
.brt-sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;align-items:start}
.brt-set{border:1px solid var(--line);border-radius:16px;padding:1.4rem;background:#fff;display:flex;flex-direction:column;gap:.9rem;position:relative}
.brt-set--best{border-color:var(--accent);box-shadow:0 10px 30px rgba(226,103,46,.12)}
.brt-set__tag{position:absolute;top:-.7rem;left:1.2rem;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;padding:.25rem .7rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.brt-set--best .brt-set__tag{background:var(--accent)}
.brt-set:not(.brt-set--best) .brt-set__tag{background:var(--ink,#1c1f24)}
.brt-set__name{font-size:1.3rem;margin:.4rem 0 0}
.brt-set__desc{color:var(--muted);margin:0;font-size:.92rem}
.brt-set__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.brt-set__items li{display:flex;align-items:flex-start;gap:.6rem;font-size:.94rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.brt-set__items li:last-child{border-bottom:0}
.brt-set__qty{font-weight:800;color:var(--accent);flex:none}
.brt-set__pname{display:flex;flex-direction:column;line-height:1.3}
.brt-set__pname small{color:var(--muted);font-size:.8rem}
.brt-set__opt{margin-left:auto;font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem;align-self:center}
.brt-set__why{background:var(--paper);border-radius:10px;padding:.8rem 1rem;font-size:.88rem}
.brt-set__why b{display:block;margin-bottom:.3rem}
.brt-set__why ul{margin:0;padding-left:1.1rem;color:var(--muted)}
.brt-set__foot{margin-top:auto;display:flex;flex-direction:column;gap:.1rem}
.brt-set__sum{font-size:1.3rem;font-weight:800;color:var(--accent)}
.brt-set__foot small{color:var(--muted);font-size:.78rem}
.brt-set__cta{width:100%}
.brt-empty{max-width:60ch;margin:0 auto;text-align:center;background:var(--paper);border-radius:14px;padding:2rem}