/* Drauf & Dran Teamwear · © 2026 Jens Richter · jens-richter.com · Alle Rechte vorbehalten */
/* =====================================================================
   Drauf & Dran Teamwear — UI
   Corporate Design nach draufunddran.net:
   Oswald (Headlines) + Roboto (Body), Orange #ff3600/#ff6600,
   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:#ff3600;
  --accent-dark:#d92e00;
  --orange:#ff6600;
  --steel:#323a45;
  --steel-dark:#252b34;
  --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(255,54,0,.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;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
  padding:14px 16px;width:100%;transition:.25s}
.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;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}
.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 ---------- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:2.5rem 0}
.pd .gallery{aspect-ratio:1;border-radius:var(--radius);background:linear-gradient(155deg,#f1f2f7,#e4e7ee);
  display:grid;place-items:center;position:relative}
.pd .gallery .mono{font-family:var(--font-display);font-weight:600;font-size:5rem;color:#c9cdd7}
.pd .gallery img{width:100%;height:100%;object-fit:contain;padding:5%;border-radius:var(--radius)}
.pd .pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd .pd-thumb{width:68px;height:52px;padding:0;border:2px solid var(--line);border-radius:8px;
  overflow:hidden;cursor:pointer;background:#fff;transition:.15s}
.pd .pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd .pd-thumb.active,.pd .pd-thumb:hover{border-color:var(--accent)}
.pd .crumbs{font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
.pd .crumbs a:hover{color:var(--ink)}
.pd h1{font-size:2rem;margin-bottom:.4rem}
.pd .desc{color:var(--body);margin:1rem 0 1.4rem}
.pd .opt-label,.dz .opt-label{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.2rem 0 .5rem}
.pd .swatch-row,.dz .swatch-row{display:flex;gap:8px;flex-wrap:wrap}
.pd .swatch,.dz .swatch{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;
  padding:.35rem .75rem;font-size:.85rem;background:#fff;cursor:pointer;color:var(--ink-soft)}
.pd .swatch i,.dz .swatch i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.pd .size-row,.dz .size-row{display:flex;gap:8px;flex-wrap:wrap}
.pd .size,.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)}
.pd .tech-pick,.dz .tech-pick{display:flex;gap:10px;flex-wrap:wrap}
.pd .tech-pill,.dz .tech-pill{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)}
.pd .tech-pill b,.dz .tech-pill b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink)}
.pd .tech-pill span,.dz .tech-pill span{color:var(--muted);font-size:.8rem}
.pd .price-box,.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}
.pd .price-box .big,.dz .price-box .big{font-family:var(--font-display);font-weight:600;font-size:1.8rem;color:var(--ink)}
.pd .price-box small,.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}

/* ---------- 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}
.dz-stage{min-width:0}
.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}
.dz-canvas-holder canvas{display:block;width: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}
.dz-hint{color:var(--muted);font-size:.8rem;margin-top:.7rem}
.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}
.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}
.dz-feld input[type=text],.dz-feld select{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:.55rem .7rem;font-size:.92rem;font-family:inherit}
.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}}

/* ═══════════════════════════════════════════════════════════════════
   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}
.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)}
  .pd{grid-template-columns:1fr;gap:28px}
  .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}
  .nav-links.open a{padding:.85rem 22px;border-top:1px solid var(--line-soft);font-size:1rem}
  .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
   ============================================================ */

/* Dunkler Header/Topbar im DTF-Kontext (invertiertes dtf-kontor-Logo-Gefühl) */
body[data-shop="dtf"] .site-header{background:#0d0d0d}
body[data-shop="dtf"] .site-header .brand{color:#fff}
body[data-shop="dtf"] .site-header .brand .amp{color:var(--accent)}
body[data-shop="dtf"] .site-header .nav-links a{color:#d7d7d7}
body[data-shop="dtf"] .site-header .nav-links a:hover{color:#fff}
body[data-shop="dtf"] .topbar{background:#1a1a1a;color:#cfcfcf}

/* Welle 0.42.2 — Warenkorb im dunklen DTF-Header sichtbar machen
   (war schwarz auf schwarz). Standard hell, Hover = Gold-Akzent. */
body[data-shop="dtf"] .site-header .cart-link{color:#fff;border-color:rgba(255,255,255,.45)}
body[data-shop="dtf"] .site-header .cart-link svg{stroke:#fff}
body[data-shop="dtf"] .site-header .cart-link:hover{color:#E2B13B;border-color:#E2B13B}
body[data-shop="dtf"] .site-header .cart-link:hover svg{stroke:#E2B13B}

/* 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:1.3fr .9fr;gap:28px;align-items:start}
.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}

/* 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__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: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}

/* 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}

/* 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}