/* Design-Test Richtung B (Pfirsich/Lavendel) – gilt nur für Seiten mit <body class="db"> unter /design-test/ */
@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#3A0F40;--text:#2E2433;--muted:#6B5B73;--coral:#D63A2B;--coral-d:#B92F22;--peach:#FDE9E1;--lav:#EDE6F8;--lav-l:#F7F3FC;--lav-d:#CDBCEB;--line:#EADFF2;--ok:#1E6B4F;--ok-bg:#E3F3EA}
html{scroll-behavior:smooth;overflow-x:hidden}
html body.db{font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;color:var(--text);background:linear-gradient(180deg,#FDE9E1 0,#FEF1EC 300px,#fff 560px) no-repeat,#fff!important;background-image:linear-gradient(180deg,#FDE9E1 0,#FEF1EC 300px,#fff 560px)!important;background-size:100% 560px!important;background-repeat:no-repeat!important;background-color:#fff!important;line-height:1.55;overflow-x:hidden}
body.db .bg-blob{display:none!important}
body.db :focus-visible{outline:3px solid #1F5FBF;outline-offset:2px;border-radius:8px}
/* ---- Farben der bisherigen Seiten auf Richtung B umlenken ---- */
body.db .text-slate-800,body.db .text-slate-900,body.db h1,body.db h2{color:var(--ink)}
body.db .text-slate-700,body.db .text-slate-600{color:var(--text)}
body.db .text-slate-500{color:var(--muted)}
body.db .text-slate-400{color:#7D6E86}
body.db .text-pink-400,body.db .text-pink-500,body.db .text-pink-600,body.db .text-orange-400,body.db .text-orange-500{color:var(--coral-d)}
body.db .hover\:text-pink-500:hover,body.db .hover\:text-pink-600:hover{color:var(--coral-d)}
body.db .text-transparent.bg-clip-text{color:var(--coral-d)!important;-webkit-text-fill-color:var(--coral-d)!important;background:none!important}
body.db .bg-pink-500,body.db .bg-pink-600,body.db .bg-slate-900,body.db .hover\:bg-pink-500:hover,body.db .hover\:bg-pink-600:hover{background:var(--coral)!important;color:#fff}
body.db .bg-pink-500:hover,body.db .bg-slate-900:hover{background:var(--coral-d)!important}
body.db .bg-gradient-to-r.from-pink-500,body.db .bg-gradient-to-br.from-pink-400{background:var(--coral)!important}
body.db .bg-pink-50,body.db .bg-pink-100,body.db .bg-orange-50,body.db .from-pink-50,body.db .to-orange-50,body.db .hover\:bg-pink-50:hover,body.db .hover\:bg-pink-100:hover{background:var(--peach)!important}
body.db .bg-gradient-to-r.from-pink-50,body.db .bg-gradient-to-br.from-pink-50{background:var(--peach)!important}
body.db .bg-slate-50,body.db .bg-slate-100{background:var(--lav-l)!important}
body.db .border-pink-100,body.db .border-pink-200,body.db .border-pink-300,body.db .border-pink-400{border-color:#F3C9BF!important}
body.db .border-slate-100,body.db .border-slate-200{border-color:var(--line)!important}
body.db .bg-blue-50,body.db .bg-blue-100{background:var(--lav)!important}
body.db .text-blue-500,body.db .text-blue-600{color:var(--ink)}
body.db .prose-lp h2{color:var(--ink)}body.db .prose-lp h3{color:var(--text)}
body.db .prose-lp p,body.db .prose-lp li{color:var(--text);font-weight:600}
body.db input:not([type=checkbox]):not([type=radio]),body.db select,body.db textarea{border-radius:12px}
body.db input:focus,body.db select:focus,body.db textarea:focus{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(214,58,43,.2)!important;outline:none}
body.db a.bg-slate-900,body.db button.bg-slate-900,body.db .bg-pink-500{font-weight:800}
body.db table th{color:#7D6E86}
/* Alte schwebende Elemente aus, neue Hülle an */
body.db #site-header,body.db .fixed.top-4.right-4.z-30,body.db #sell-basket{display:none!important}
/* ---- Kopf ---- */
.db-kopf{position:sticky;top:0;z-index:35;background:rgba(253,233,225,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.db-kopf .in{max-width:1240px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:74px}
.db-marke{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:25px;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1}
.db-marke svg{width:40px;height:40px;flex:none}.db-marke i{font-style:normal;color:var(--coral)}
.db-nav{display:flex;align-items:center;gap:28px;font-weight:700;font-size:16px;color:var(--ink)}
.db-nav a{text-decoration:none;padding:10px 2px;color:var(--ink)}.db-nav a:hover{color:var(--coral-d)}
.db-nav a[aria-current=page]{color:var(--coral-d);box-shadow:inset 0 -3px 0 var(--coral)}
.db-korb{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border:0;border-radius:14px;padding:0 16px;height:48px;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 2px 10px rgba(58,15,64,.08);white-space:nowrap}
.db-korb:hover{box-shadow:0 4px 16px rgba(58,15,64,.16)}
.db-korb .n{background:var(--coral);color:#fff;border-radius:999px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;padding:0 6px}
.db-testband{background:#2B1830;color:#fff;font-size:13.5px;text-align:center;padding:7px 12px}.db-testband a{color:#FFC9C2}
@media(max-width:820px){.db-nav a{display:none}.db-marke{font-size:20px}.db-marke svg{width:34px;height:34px}.db-kopf .in{height:62px;padding:0 16px}.db-korb .lbl{display:none}.db-korb{padding:0 14px;gap:8px}}
/* ---- Fuß ---- */
.db-fuss{margin-top:70px;background:var(--lav);padding:42px 0 120px;color:var(--text);font-size:15px;font-weight:600}
.db-fuss .in{max-width:1240px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.db-fuss .marke2{font-size:21px;font-weight:900;color:var(--ink);margin-bottom:10px;line-height:1.2}.db-fuss .grad{color:var(--coral-d)}
.db-fuss .slogan{margin:0;color:var(--muted);font-weight:700;font-size:14px;line-height:1.6}
.db-fuss h4{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6B5B73;font-weight:900}
.db-fuss ul{list-style:none;margin:0;padding:0}.db-fuss li{margin:0 0 6px}
.db-fuss li a{display:inline-flex;align-items:center;gap:8px;padding:4px 0;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}.db-fuss li a:hover{color:var(--coral-d)}.db-fuss li a i{color:var(--coral)}
.db-fuss li.hinweis{font-size:12.5px;color:#6B5B73;padding-top:8px}
.db-fuss .klein{max-width:1240px;margin:34px auto 0;padding:20px 22px 0;border-top:1px solid #D9CDEE;font-size:12.5px;color:#6B5B73;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.db-fuss .in{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}@media(max-width:520px){.db-fuss .in{grid-template-columns:1fr}.db-fuss .klein{flex-direction:column;align-items:flex-start}}
/* ---- Korbleiste ---- */
#db-korbleiste{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));transform:translateY(120%);transition:transform .3s;pointer-events:none}
#db-korbleiste.da{transform:none}
#db-korbleiste button{pointer-events:auto;display:flex;align-items:center;gap:14px;width:100%;max-width:780px;margin:0 auto;background:var(--ink);color:#fff;border:0;border-radius:18px;padding:12px 18px;cursor:pointer;text-align:left;font:inherit;box-shadow:0 12px 32px rgba(58,15,64,.4)}
#db-korbleiste .ico{font-size:24px;color:#FFB4AB}#db-korbleiste .t1{font-weight:900;font-size:17px}#db-korbleiste .t2{font-size:14px;opacity:.95;font-weight:600}
#db-korbleiste .bar{display:block;height:6px;background:rgba(255,255,255,.25);border-radius:3px;margin-top:6px;overflow:hidden}#db-korbleiste .bar i{display:block;height:100%;background:#FF8E80;border-radius:3px;transition:width .3s}
#db-korbleiste .pf{margin-left:auto;font-size:22px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

body.db #tonie-img{mix-blend-mode:multiply}
body.db #ssr-info{margin:0 0 18px}
body.db .db-kopf+*{}

/* ---- Kacheln wie auf der neuen Startseite ---- */
body.db .raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:6px 0 10px}
@media(max-width:1100px){body.db .raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){body.db .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
body.db .karte{background:#fff;border:1px solid #E8E2D8;border-radius:18px;padding:10px 10px 14px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
body.db .karte:hover{border-color:#D9CFC0;box-shadow:0 8px 24px rgba(37,43,57,.08)}
body.db .karte .lnk{text-decoration:none;display:block;color:inherit}
body.db .karte .bildbox{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;border-radius:12px}
body.db .karte .bildbox img{width:100%;height:100%;object-fit:contain;max-width:none}
body.db .karte h3{font-size:16px;font-weight:700;color:#252B39;line-height:1.35;margin:8px 4px 6px;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.db .karte .preis{font-size:26px;font-weight:800;color:#252B39;letter-spacing:-.01em;line-height:1.1;margin:0 4px}
body.db .karte .preisLabel{font-size:13px;color:#5E6573;font-weight:500;margin:2px 4px 10px}
body.db .karte .cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 8px);align-self:center;min-height:48px;border:0;border-radius:13px;background:var(--coral)!important;color:#fff!important;font:inherit;font-size:16px;font-weight:800;cursor:pointer;text-decoration:none;text-align:center;padding:0 10px}
body.db .karte .cta:hover{background:var(--coral-d)!important}
body.db .karte .cta.ok{background:var(--ok)!important}
body.db .cta .kurz{display:none}
@media(max-width:700px){body.db .cta .lang{display:none}body.db .cta .kurz{display:inline}body.db .karte{padding:8px 8px 12px}body.db .karte h3{font-size:14.5px}body.db .karte .preis{font-size:20px}}
/* ---- Konto-Menü ---- */
.db-konto{position:relative}
.db-konto>button{background:none;border:0;font:inherit;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;padding:10px 2px;display:inline-flex;align-items:center;gap:8px}
.db-konto>button:hover{color:var(--coral-d)}
.db-konto .menue{display:none;position:absolute;right:0;top:100%;min-width:230px;background:#fff;border-radius:14px;box-shadow:0 12px 34px rgba(58,15,64,.2);padding:6px;z-index:50}
.db-konto.offen .menue{display:block}
.db-konto .menue a,.db-konto .menue button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;font:inherit;font-weight:700;font-size:15px;color:var(--ink);padding:11px 12px;border-radius:10px;text-decoration:none;cursor:pointer}
.db-konto .menue a:hover,.db-konto .menue button:hover{background:var(--lav-l);color:var(--coral-d)}
.db-konto .menue i{color:var(--coral);width:18px;text-align:center}
.db-mobil{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 2px 10px rgba(58,15,64,.08);margin-left:auto;margin-right:10px;position:relative}
@media(max-width:820px){.db-mobil{display:flex}.db-kopf .in{gap:0}.db-konto{display:none}}

/* Zustands-Chip im Korb entfällt (kein Neu/OVP mehr) */
body.db #sidebar-items .uppercase.border-blue-100{display:none!important}
body.db .karte .ovp{font-size:13px;color:var(--ok);font-weight:800;margin:-6px 4px 10px}

/* Detailseite: großes, unverzerrtes Produktbild */
body.db #tonie-img{max-height:none!important;width:100%!important;height:auto!important;max-width:560px;aspect-ratio:1/1;object-fit:contain;filter:none;mix-blend-mode:multiply}

/* Korb-Hintergrund: trägt die Klasse bg-slate-900, darf aber nicht coral werden */
body.db #sidebar-overlay,body #sidebar-overlay.bg-slate-900{background:rgba(58,15,64,.55)!important}
/* Korb: die ganze Spalte scrollt, damit die Positionen nie auf einen Streifen schrumpfen */
#checkout-sidebar{overflow-y:auto;-webkit-overflow-scrolling:touch}
#checkout-sidebar #sidebar-items{overflow:visible;flex:0 0 auto;min-height:120px}
#checkout-sidebar #checkout-fuss{flex:0 0 auto;box-shadow:none}
body.korb-offen #korbleiste{transform:translateY(120%)!important}