:root {
  --navy: #0b2242;
  --cyan: #2fc3e8;
  --cyan-soft: #dff7fb;
  --cream: #fff8ed;
  --coral: #ff5474;
  --yellow: #ffd45e;
  --lavender: #b98aee;
  --ink-soft: #4a5a70;
  --white: #fff;
  --line: #dce6ec;
  --display: "Baloo 2", "Trebuchet MS", sans-serif;
  --body: "Nunito Sans", Arial, sans-serif;
  --shadow: 0 18px 50px rgba(11, 34, 66, .12);
  --radius: 26px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: var(--white); font-family: var(--body); line-height: 1.5; }
body.drawer-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); line-height: .98; }
h2 { margin-bottom: 12px; font-size: clamp(2.3rem, 5vw, 4.2rem); letter-spacing: -.04em; }
h3 { margin-bottom: 8px; font-size: 1.5rem; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; color: white; background: var(--navy); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }

.announcement { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 6px 18px; color: white; background: var(--cyan); font-size: .78rem; font-weight: 800; letter-spacing: .01em; }
.announcement-dot { width: 4px; height: 4px; border-radius: 50%; background: white; opacity: .7; }
.site-header { position: sticky; z-index: 30; top: 0; height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 0 max(24px, calc((100vw - 1380px) / 2)); border-bottom: 1px solid rgba(11,34,66,.08); background: rgba(255,255,255,.94); backdrop-filter: blur(15px); }
.brand { width: max-content; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.65rem; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { position: relative; width: 46px; height: 34px; display: inline-block; }
.brand-mark i { position: absolute; left: 0; width: 32px; height: 7px; border: 4px solid var(--cyan); border-top: 0; border-right: 0; border-left-color: transparent; border-radius: 50%; transform: rotate(5deg); }
.brand-mark i:nth-child(1) { top: 1px; }.brand-mark i:nth-child(2) { top: 10px; left: 4px; }.brand-mark i:nth-child(3) { top: 19px; }
.brand-mark b { position: absolute; right: 0; top: -5px; color: var(--coral); font-size: 1rem; }
.main-nav { display: flex; gap: clamp(24px, 4vw, 54px); align-items: center; font-weight: 800; }
.main-nav a { position: relative; text-decoration: none; }
.main-nav a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 3px; transform: scaleX(0); border-radius: 10px; background: var(--coral); content: ""; transition: transform .2s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.icon-button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--navy); background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--cyan-soft); }
.icon-button svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; top: 0; right: 0; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border: 2px solid white; border-radius: 20px; color: white; background: var(--coral); font-size: .68rem; font-weight: 800; }
.menu-toggle { display: none; }

.hero { min-height: 650px; display: grid; grid-template-columns: minmax(390px, .88fr) minmax(500px, 1.12fr); overflow: hidden; background: radial-gradient(circle at 8% 80%, rgba(255,212,94,.25), transparent 29%), linear-gradient(105deg, #fffaf2 0%, #fff 48%, #e7f7f7 100%); }
.hero-copy { z-index: 2; align-self: center; padding: 72px 0 72px max(28px, calc((100vw - 1380px)/2)); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--coral); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow > span { width: 30px; height: 3px; border-radius: 10px; background: currentColor; }
.eyebrow-center { justify-content: center; }
.hero h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(3.2rem, 5.9vw, 6.1rem); letter-spacing: -.06em; }
.hero-lead { max-width: 600px; margin-bottom: 30px; color: var(--ink-soft); font-size: 1.08rem; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 24px; border: 0; border-radius: 999px; text-decoration: none; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--coral); box-shadow: 0 10px 24px rgba(255,84,116,.25); }
.button-dark { color: white; background: var(--navy); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px 24px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .78rem; font-weight: 800; }
.hero-notes span { margin-right: 6px; color: var(--coral); font-size: 1.2rem; }
.hero-stage { position: relative; min-height: 650px; }
.mascot-frame { position: absolute; z-index: 2; top: 64px; left: 5%; width: min(45vw, 490px); height: 405px; overflow: hidden; filter: drop-shadow(0 25px 22px rgba(11,34,66,.16)); -webkit-mask-image: radial-gradient(ellipse 74% 72% at 50% 43%,#000 62%,transparent 96%); mask-image: radial-gradient(ellipse 74% 72% at 50% 43%,#000 62%,transparent 96%); }
.mascot-frame img { width: 100%; height: auto; transform: scale(1.13); transform-origin: 50% 6%; mix-blend-mode: multiply; }
.package { position: absolute; z-index: 1; top: 78px; right: 7%; width: 240px; height: 320px; padding: 28px 22px; transform: rotate(3deg); border: 1px solid #eee1d1; border-radius: 9px; background: #fffaf3; box-shadow: var(--shadow); }
.mini-logo { font-family: var(--display); font-weight: 900; font-size: .85rem; }.mini-logo span { color: var(--cyan); font-size: 1.8rem; vertical-align: middle; }.package p { margin: 12px 0; text-align: center; font-family: var(--display); font-size: 1.1rem; }
.package-window { height: 150px; display: grid; place-items: center; border-radius: 12px; background: #e9f7f5; box-shadow: inset 0 0 0 6px white; }.tiny-soap { width: 110px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px; color: white; background: linear-gradient(145deg,#59d9f2,#19a8d2); font-size: 2rem; }
.hero-soap { position: absolute; z-index: 5; right: 10%; bottom: 42px; width: 240px; height: 190px; display: grid; place-items: center; border-radius: 48px; color: rgba(255,255,255,.55); background: linear-gradient(145deg, rgba(203,245,239,.9), rgba(116,207,211,.95)); box-shadow: inset 10px 10px 24px rgba(255,255,255,.4), 0 22px 30px rgba(11,34,66,.2); font-size: 4rem; transform: rotate(2deg); }
.capsule { position: absolute; bottom: 22px; left: 48px; width: 140px; height: 54px; display: grid; place-items: center; transform: rotate(-4deg); border: 6px solid rgba(255,255,255,.65); border-radius: 40px; background: linear-gradient(90deg,#fff9e9 0 48%,#e0dad0 49% 52%,#fff9e9 53%); box-shadow: 0 5px 12px rgba(11,34,66,.18); }.capsule i { color: var(--coral); font-style: normal; font-size: 1.3rem; }
.capsule-note { position: absolute; z-index: 6; right: 1%; bottom: 220px; display: flex; align-items: end; transform: rotate(-5deg); font-family: var(--display); font-size: 1.2rem; font-weight: 700; }.capsule-note svg { width: 100px; height: 60px; fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bubble { position: absolute; border: 2px solid rgba(47,195,232,.42); border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: inset 5px 5px 8px white; }.bubble-one { top: 80px; left: 2%; width: 34px; height: 34px; }.bubble-two { top: 28%; right: 2%; width: 65px; height: 65px; }.bubble-three { bottom: 9%; left: 12%; width: 46px; height: 46px; }

.how-it-works { padding: 90px max(24px, calc((100vw - 1220px)/2)) 105px; background: white; }
.section-heading { max-width: 720px; margin: 0 auto 55px; }.section-heading p:last-child { color: var(--ink-soft); }.centered { text-align: center; }
.process { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.process-wave { position: absolute; z-index: 0; top: 85px; left: 5%; width: 90%; height: 130px; overflow: visible; }.process-wave path { fill: none; stroke: #63d5ec; stroke-width: 9; stroke-linecap: round; }.process-wave circle { fill: rgba(255,255,255,.8); stroke: #63d5ec; stroke-width: 3; }
.step { position: relative; z-index: 1; text-align: center; }.step p { max-width: 300px; margin: 0 auto; color: var(--ink-soft); }.step-number { position: absolute; z-index: 3; top: -10px; left: calc(50% - 104px); width: 50px; height: 50px; display: grid; place-items: center; border: 5px solid white; border-radius: 50%; color: white; font-family: var(--display); font-size: 1.45rem; font-weight: 900; }.step-coral .step-number { background: var(--coral); }.step-yellow .step-number { color: var(--navy); background: var(--yellow); }.step-lavender .step-number { background: var(--lavender); }
.step-visual { position: relative; width: 210px; height: 210px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; box-shadow: inset 0 0 0 15px rgba(255,255,255,.45); }.step-coral .step-visual { background: #ffe3e9; }.step-yellow .step-visual { background: #fff3c9; }.step-lavender .step-visual { background: #eee1ff; }
.envelope { width: 112px; height: 78px; display: grid; place-items: center; border: 4px solid var(--navy); border-radius: 6px; color: var(--coral); background: white; font-size: 2rem; box-shadow: 0 10px 0 rgba(11,34,66,.08); }.envelope::before, .envelope::after { position: absolute; top: 80px; width: 76px; height: 4px; background: var(--navy); content: ""; transform-origin: right; transform: rotate(31deg); }.envelope::after { transform-origin: left; transform: rotate(-31deg); }
.soap-mold { width: 125px; height: 92px; display: grid; place-items: center; border-radius: 18px; color: white; background: var(--cyan); box-shadow: inset 0 -12px 0 rgba(11,34,66,.12); font-size: 2rem; }.pour-stream { position: absolute; top: -6px; width: 18px; height: 78px; border-radius: 0 0 50% 50%; background: white; transform: rotate(14deg); }
.reveal-visual::before { width: 122px; height: 122px; border-radius: 28px; background: linear-gradient(145deg,#57d8ed,#149fcf); content: ""; }.mini-capsule { position: absolute; width: 105px; height: 42px; display: grid; place-items: center; transform: rotate(-12deg); border: 5px solid white; border-radius: 30px; color: var(--coral); background: #fff9ee; }

.shop-section { padding: 90px max(24px, calc((100vw - 1280px)/2)) 72px; background: linear-gradient(180deg,#fff9ef 0%,#fff5e6 100%); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { overflow: hidden; border: 1px solid rgba(11,34,66,.08); border-radius: var(--radius); background: white; box-shadow: 0 14px 35px rgba(11,34,66,.08); transition: transform .2s ease, box-shadow .2s ease; }.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-art { position: relative; height: 260px; overflow: hidden; }.edition-schlager .product-art { background: radial-gradient(circle at 20% 20%,#e3caff,transparent 30%), linear-gradient(145deg,#c998f4,#7156c9); }.edition-birthday .product-art { background: radial-gradient(circle at 20% 20%,#fff2ad,transparent 30%),linear-gradient(145deg,#ffd967,#f0a225); }.edition-love .product-art { background: radial-gradient(circle at 20% 20%,#ffd1dc,transparent 30%),linear-gradient(145deg,#ff91aa,#e93f68); }
.soap-block { position: absolute; z-index: 2; right: 10%; bottom: 28px; width: 140px; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-4deg); border-radius: 30px; color: rgba(255,255,255,.7); background: linear-gradient(145deg,#64dcf0,#1ea5cb); box-shadow: inset 10px 9px 17px rgba(255,255,255,.4),0 18px 25px rgba(11,34,66,.2); font-size: 3rem; }.edition-love .soap-block { background: linear-gradient(145deg,#ff9db2,#ef5c7e); }.edition-birthday .soap-block { background: linear-gradient(145deg,#5de0ed,#2cb4d0); }
.art-box { position: absolute; left: 8%; bottom: 20px; width: 150px; height: 190px; display: flex; flex-direction: column; justify-content: start; padding: 20px 14px; transform: rotate(3deg); border-radius: 8px; background: #fff8ee; box-shadow: 0 14px 22px rgba(11,34,66,.2); }.art-box small { color: var(--cyan); font-weight: 900; }.art-box b { margin-top: 12px; font-family: var(--display); font-size: 1.35rem; line-height: 1; }.art-note { position: absolute; z-index: 3; top: 18px; right: 10%; color: white; font-family: var(--display); font-size: 3rem; font-weight: 900; transform: rotate(8deg); text-shadow: 0 7px 15px rgba(11,34,66,.2); }
.product-body { padding: 26px; text-align: center; }.product-tag { margin-bottom: 6px; color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.product-body > p:not(.product-tag) { min-height: 48px; color: var(--ink-soft); }.product-bottom { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }.product-bottom > span { font-family: var(--display); font-size: 1.15rem; font-weight: 900; }.product-button { width: 100%; color: white; background: var(--lavender); }.edition-birthday .product-button { color: var(--navy); background: var(--yellow); }.edition-love .product-button { background: var(--coral); }
.preview-disclaimer { margin: 28px auto 0; color: var(--ink-soft); text-align: center; font-size: .78rem; }

.personalizer { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,100px); padding: 100px max(28px, calc((100vw - 1250px)/2)); background: linear-gradient(115deg,#e8fafd 0 49%,#d8f1f2 49%); }
.personalizer-copy h2 { max-width: 570px; }.personalizer-copy > p:not(.eyebrow) { max-width: 550px; color: var(--ink-soft); }
#personalizer-form { max-width: 600px; display: grid; gap: 10px; margin-top: 30px; } fieldset { min-width: 0; margin: 0 0 10px; padding: 0; border: 0; } legend, #personalizer-form > label { margin-bottom: 6px; font-weight: 900; } .field-hint { float: right; color: var(--ink-soft); font-size: .75rem; font-weight: 600; }
.edition-options { display: flex; gap: 8px; }.edition-options label { flex: 1; cursor: pointer; }.edition-options input { position: absolute; opacity: 0; }.edition-options span { min-height: 46px; display: grid; place-items: center; padding: 8px; border: 2px solid transparent; border-radius: 14px; background: rgba(255,255,255,.72); font-size: .85rem; font-weight: 800; }.edition-options input:checked + span { border-color: var(--navy); background: white; box-shadow: 0 5px 15px rgba(11,34,66,.08); }.edition-options input:focus-visible + span { outline: 4px solid var(--yellow); outline-offset: 3px; }
textarea, input[type="url"], input[type="search"] { width: 100%; border: 2px solid rgba(11,34,66,.15); border-radius: 15px; color: var(--navy); background: white; }.personalizer textarea, .personalizer input[type="url"] { padding: 13px 15px; } textarea { resize: vertical; }.field-meta { color: var(--ink-soft); text-align: right; font-size: .75rem; }.form-error { margin: 2px 0; color: #a51e3b; font-size: .85rem; font-weight: 800; }.add-to-cart { width: 100%; margin-top: 10px; }
.personalizer [aria-invalid="true"] { border-color: #a51e3b; box-shadow: 0 0 0 3px rgba(165,30,59,.12); }
.message-preview-wrap { align-self: center; }.preview-label { text-align: center; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.preview-scene { position: relative; min-height: 450px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; padding: 50px; border: 1px solid rgba(255,255,255,.65); border-radius: 52% 48% 45% 55% / 42% 55% 45% 58%; background: rgba(255,255,255,.45); box-shadow: inset 0 0 90px rgba(255,255,255,.5); }
.preview-soap { position: relative; z-index: 2; width: 230px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 45px; color: rgba(255,255,255,.58); background: linear-gradient(145deg,var(--preview-light,#57d8eb),var(--preview-deep,#1fa5c8)); box-shadow: inset 12px 12px 28px rgba(255,255,255,.35),0 25px 35px rgba(11,34,66,.2); font-size: 4rem; transition: background .25s ease; }.preview-capsule { position: absolute; right: -18px; bottom: 25px; width: 130px; height: 50px; display: grid; place-items: center; border: 5px solid white; border-radius: 30px; color: var(--coral); background: #fffaf0; font-size: 1.4rem; transform: rotate(-10deg); }
.preview-scene[data-edition="Schlager-Edition"] { --preview-light: #cda8f4; --preview-deep: #8760cf; }
.preview-scene[data-edition="Geburtstags-Edition"] { --preview-light: #57d8eb; --preview-deep: #1fa5c8; }
.preview-scene[data-edition="Liebe-Edition"] { --preview-light: #ff9fb3; --preview-deep: #ef5c7e; }
.message-card { position: relative; z-index: 3; min-height: 210px; display: flex; flex-direction: column; justify-content: center; padding: 34px; transform: rotate(3deg); border: 1px solid #eee2d3; border-radius: 7px; background: #fffaf2; box-shadow: 0 22px 35px rgba(11,34,66,.16); }.message-card p { margin: 0; font-family: "Segoe Print","Comic Sans MS",cursive; font-size: clamp(1.2rem,2vw,1.75rem); line-height: 1.3; overflow-wrap: anywhere; }.message-mark { position: absolute; top: 14px; right: 18px; color: var(--coral); }.preview-edition { margin-bottom: 12px; color: var(--ink-soft); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.fake-qr { width: 55px; height: 55px; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 18px; padding: 4px; background: white; }.fake-qr i { background: var(--navy); }.fake-qr i:nth-child(2),.fake-qr i:nth-child(4),.fake-qr i:nth-child(8){ background: white; }
.preview-bubble { position: absolute; border: 3px solid rgba(47,195,232,.45); border-radius: 50%; background: rgba(255,255,255,.5); }.b1 { top: 8%; left: 4%; width: 40px; height: 40px; }.b2 { right: 4%; bottom: 4%; width: 62px; height: 62px; }.b3 { top: 4%; right: 27%; width: 22px; height: 22px; }.preview-note { margin: 16px auto 0; color: var(--ink-soft); text-align: center; font-size: .74rem; }

.trust-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding: 30px max(28px, calc((100vw - 1250px)/2)); border-block: 1px solid var(--line); background: white; }.trust-strip article { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 30px; border-right: 1px solid var(--line); }.trust-strip article:last-child { border-right: 0; }.trust-strip > article > span { color: var(--coral); font-size: 2.2rem; }.trust-strip h3 { margin: 0 0 3px; font-size: 1.2rem; }.trust-strip p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.about { min-height: 430px; display: grid; grid-template-columns: .8fr 1.7fr .7fr; align-items: center; gap: 40px; overflow: hidden; padding: 60px max(28px, calc((100vw - 1380px)/2)); text-align: center; background: radial-gradient(circle at 10% 100%,#e4f9fc,transparent 35%),white; }.about > div:nth-child(2) { z-index: 2; }.about p:not(.eyebrow) { max-width: 660px; margin: 0 auto 25px; color: var(--ink-soft); }.about-mascot { height: 280px; overflow: hidden; }.about-mascot img { width: 330px; transform: scale(1.2); transform-origin: 50% 8%; mix-blend-mode: multiply; }.handwritten { transform: rotate(-6deg); font-family: "Segoe Print","Comic Sans MS",cursive; font-size: 1.35rem; }
.site-footer { position: relative; display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 50px; padding: 64px max(28px, calc((100vw - 1250px)/2)) 80px; background: var(--navy); color: white; }.footer-brand p { margin-top: 18px; color: #b8c4d2; }.site-footer h2 { margin-bottom: 18px; font-family: var(--body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }.site-footer > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }.site-footer > div:not(.footer-brand) a,.footer-link { color: #d3dce7; text-decoration: none; font-size: .85rem; }.footer-link { padding: 0; border: 0; background: none; cursor: pointer; }.site-footer a:hover,.footer-link:hover { color: var(--cyan); }.footer-note { position: absolute; right: max(28px, calc((100vw - 1250px)/2)); bottom: 20px; margin: 0; color: #8291a4; font-size: .72rem; }

.search-panel { position: fixed; z-index: 50; inset: 0; padding: 140px 20px 20px; background: rgba(11,34,66,.93); }.search-panel form { position: relative; max-width: 720px; margin: auto; color: white; }.search-panel label { display: block; margin-bottom: 20px; font-family: var(--display); font-size: 2.5rem; }.search-panel form > div { display: flex; gap: 10px; }.search-panel input { padding: 15px 18px; }.search-close { position: absolute; top: -55px; right: 0; border: 0; color: white; background: none; font-size: 2.8rem; cursor: pointer; }
.drawer-backdrop { position: fixed; z-index: 59; inset: 0; background: rgba(11,34,66,.48); backdrop-filter: blur(3px); }.cart-drawer { position: fixed; z-index: 60; top: 0; right: 0; width: min(460px,100%); height: 100%; display: flex; flex-direction: column; padding: 28px; transform: translateX(105%); background: white; box-shadow: -20px 0 60px rgba(11,34,66,.2); transition: transform .28s ease; }.cart-drawer[aria-hidden="false"] { transform: none; }.drawer-header { display: flex; align-items: start; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.drawer-header h2 { margin: 0; font-size: 2.2rem; }.drawer-header .eyebrow { margin-bottom: 7px; }.drawer-close { font-size: 2rem; }.cart-items { flex: 1; overflow-y: auto; padding: 24px 0; }.empty-cart { margin-top: 70px; text-align: center; }.empty-cart > span { color: var(--coral); font-size: 3rem; }.empty-cart p { color: var(--ink-soft); }.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }.cart-thumb { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 18px; color: white; background: linear-gradient(145deg,#5eddee,#20a7cd); font-size: 1.7rem; }.cart-line h3 { margin: 3px 0 5px; font-size: 1.1rem; }.cart-message { max-width: 190px; margin-bottom: 8px; overflow: hidden; color: var(--ink-soft); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 20px; }.quantity-control button { width: 29px; height: 29px; border: 0; background: none; cursor: pointer; }.quantity-control span { min-width: 25px; text-align: center; font-size: .8rem; font-weight: 800; }.remove-item { align-self: start; padding: 2px; border: 0; color: var(--ink-soft); background: none; cursor: pointer; text-decoration: underline; font-size: .72rem; }.cart-summary { padding-top: 20px; border-top: 1px solid var(--line); }.cart-summary > div { display: flex; justify-content: space-between; font-size: 1.1rem; }.cart-summary p { color: var(--ink-soft); font-size: .75rem; }.cart-summary .button { width: 100%; }.toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; max-width: min(380px,calc(100% - 48px)); padding: 14px 18px; transform: translateY(120px); border-radius: 15px; color: white; background: var(--navy); box-shadow: var(--shadow); opacity: 0; transition: .25s ease; }.toast.visible { transform: none; opacity: 1; }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }.main-nav { position: absolute; top: 78px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 24px 24px; border-bottom: 1px solid var(--line); background: white; }.main-nav.open { display: flex; }.main-nav a { padding: 14px; }.menu-toggle { display: grid; grid-column: 2; }.header-actions { grid-column: 2; grid-row: 1; margin-right: 52px; }.account-button { display: none; }
  .hero { grid-template-columns: 1fr; }.hero-copy { padding: 65px clamp(28px,7vw,70px) 15px; }.hero-stage { min-height: 550px; }.mascot-frame { left: 8%; width: 450px; height: 375px; }.package { right: 8%; }.hero-soap { right: 10%; }
  .personalizer { grid-template-columns: 1fr; background: linear-gradient(170deg,#e8fafd 0 57%,#d8f1f2 57%); }.personalizer-copy { max-width: 720px; }.message-preview-wrap { max-width: 720px; width: 100%; margin: auto; }.about { grid-template-columns: .7fr 2fr; }.handwritten { display: none; }
}
@media (max-width: 780px) {
  .announcement { text-align: center; }.announcement-dot,.announcement span:nth-of-type(4) { display: none; }.site-header { height: 68px; padding: 0 16px; }.brand { font-size: 1.25rem; }.brand-mark { transform: scale(.8); transform-origin: left; margin-right: -7px; }.main-nav { top: 68px; }.search-button { display: none; }.header-actions { margin-right: 44px; }
  .hero { min-height: auto; }.hero-copy { padding: 55px 22px 10px; text-align: center; }.hero .eyebrow { justify-content: center; }.hero h1 { font-size: clamp(2.75rem,13vw,4.4rem); }.hero-lead { margin-inline: auto; }.hero-notes { justify-content: center; }.hero-stage { min-height: 470px; }.mascot-frame { top: 50px; left: -7%; width: 360px; height: 305px; }.package { top: 35px; right: 3%; width: 170px; height: 230px; padding: 16px; }.package-window { height: 105px; }.tiny-soap { width: 75px; }.hero-soap { right: 5%; bottom: 15px; width: 180px; height: 145px; }.capsule { left: 28px; bottom: 15px; width: 115px; height: 46px; }.capsule-note { display: none; }
  .how-it-works,.shop-section { padding: 72px 20px; }.section-heading { margin-bottom: 38px; }.process { grid-template-columns: 1fr; gap: 48px; }.process-wave { top: 70px; left: 50%; width: 110px; height: 750px; transform: translateX(-50%) rotate(90deg); opacity: .35; }.step p { padding-inline: 18px; background: white; }.product-grid { grid-template-columns: 1fr; max-width: 480px; margin: auto; }.product-body > p:not(.product-tag) { min-height: 0; }
  .personalizer { padding: 72px 20px; }.personalizer h2 { font-size: 2.65rem; }.edition-options { flex-direction: column; }.edition-options label { width: 100%; }.preview-scene { min-height: 520px; grid-template-columns: 1fr; justify-items: center; padding: 35px 25px; border-radius: 45px; }.preview-soap { width: 190px; }.message-card { width: min(300px,100%); min-height: 160px; }.trust-strip { grid-template-columns: 1fr; padding-block: 12px; }.trust-strip article { justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }.trust-strip article:last-child { border-bottom: 0; }
  .about { grid-template-columns: 1fr; padding: 60px 22px; }.about-mascot { height: 190px; order: 2; }.about-mascot img { width: 250px; margin: auto; }.site-footer { grid-template-columns: 1fr 1fr; gap: 38px 25px; padding: 50px 24px 90px; }.footer-brand { grid-column: 1/-1; }.footer-note { right: 24px; left: 24px; text-align: left; }
  .search-panel form > div { flex-direction: column; }
}
@media (max-width: 420px) { .header-actions .icon-button { width: 40px; }.hero-stage { min-height: 420px; }.mascot-frame { width: 300px; }.package { width: 145px; height: 205px; }.package p { font-size: .85rem; }.hero-soap { width: 155px; height: 125px; }.capsule { width: 98px; }.site-footer { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; } }
html, body { overflow-x: hidden; }
.cart-line { grid-template-columns: 76px minmax(0, 1fr) auto; }
@media (max-width: 1050px) { .menu-toggle { grid-row: 1; justify-self: end; } }
@media (max-width: 780px) {
  .process-wave { display: none; }
  .process::before { position: absolute; z-index: 0; top: 90px; bottom: 90px; left: calc(50% - 3px); width: 6px; border-radius: 8px; background: repeating-linear-gradient(to bottom, rgba(47,195,232,.35) 0 18px, transparent 18px 30px); content: ""; }
  .trust-strip article { min-width: 0; padding-inline: 16px; }
  .trust-strip article div { min-width: 0; }
  .trust-strip h3 { overflow-wrap: anywhere; }
}
.cart-thumb.thumb-schlager { background: linear-gradient(145deg,#cda8f4,#8760cf); }
.cart-thumb.thumb-birthday { background: linear-gradient(145deg,#5eddee,#20a7cd); }
.cart-thumb.thumb-wedding { color: var(--navy); background: linear-gradient(145deg,#fffaf0,#e8d7c3); }
.cart-thumb.thumb-love { background: linear-gradient(145deg,#ff9fb3,#ef5c7e); }

/* Referenznahe 3D-Bildwelt */
.hero-stage { display: flex; align-items: stretch; justify-content: stretch; padding: 38px 0 0; }
.hero-reference { width: 100%; height: 100%; min-height: 610px; object-fit: cover; object-position: 52% center; border-radius: 0; }
.step-visual { overflow: hidden; background: white !important; box-shadow: 0 16px 34px rgba(11,34,66,.1); }
.step-visual { overflow: visible; box-shadow: none; }
.step-visual img { width: 100%; height: 100%; object-fit: contain; }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.shop-section .section-heading { max-width: 1000px; }
.product-art { height: 235px; background: white !important; }
.product-art img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 24px 20px; }
.product-body > p:not(.product-tag) { min-height: 72px; }
.edition-wedding .product-button { color: var(--navy); background: #f0dfcb; }
.edition-wedding .product-tag { color: #9d684b; }
.edition-wedding .product-bottom small { display: block; margin-top: 2px; color: var(--ink-soft); font-family: var(--body); font-size: .68rem; font-weight: 700; }
.preview-product-image { position: relative; z-index: 2; width: 280px; max-width: 100%; aspect-ratio: 1.42; object-fit: cover; border-radius: 34px; box-shadow: 0 25px 35px rgba(11,34,66,.18); transition: opacity .2s ease; }
.about-mascot img { width: 100%; height: 100%; object-fit: contain; transform: none; mix-blend-mode: multiply; }
.site-footer { border-top: 1px solid var(--line); color: var(--navy); background: white; }
.footer-brand p { color: var(--ink-soft); }
.site-footer > div:not(.footer-brand) a, .footer-link { color: var(--ink-soft); }
.footer-note { color: #7b8796; }
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-body > p:not(.product-tag) { min-height: 48px; }
  .hero-stage, .hero-reference { min-height: 500px; }
}
@media (max-width: 780px) {
  .product-grid { grid-template-columns: 1fr; }
  .hero-reference { min-height: 330px; object-position: 52% center; }
  .hero-stage { min-height: 330px; padding-top: 10px; }
  .product-art { height: 260px; }
  .product-body > p:not(.product-tag) { min-height: 0; }
  .preview-product-image { width: min(300px,100%); }
}
@media (max-width: 420px) { .hero-stage, .hero-reference { min-height: 300px; } }

/* Nahtloser Hero und kräftige Marken-Hierarchie */
h1, h2, h3 { font-weight: 800; }
.brand { font-size: 1.72rem; font-weight: 800; letter-spacing: -.055em; }
.button { font-family: var(--display); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.hero { position: relative; min-height: 650px; display: block; background: #fff8ed; }
.hero-stage { position: absolute; z-index: 0; inset: 0; min-height: 0; padding: 0; }
.hero-reference { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }
.hero-copy { position: relative; z-index: 2; width: calc(max(28px, (100vw - 1380px) / 2) + 560px); max-width: 48%; min-height: 650px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 60px 0 60px max(28px, calc((100vw - 1380px) / 2)); background: transparent; }
.hero h1 { font-size: clamp(3.2rem, 4.2vw, 5.2rem); font-weight: 800; line-height: .91; letter-spacing: -.065em; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.hero-lead { width: 100%; max-width: 540px; }
.hero-notes { width: 100%; max-width: 560px; flex-wrap: nowrap; justify-content: space-between; gap: 14px; }
.hero-notes li { min-width: 0; white-space: nowrap; }

/* Referenznaher Personalisierungs-Showcase plus interaktiver Builder */
.personalizer { display: block; padding: 0; background: white; }
.personalizer-showcase { display: grid; grid-template-columns: .9fr 1.45fr .75fr; align-items: center; gap: 34px; padding: 72px max(28px,calc((100vw - 1380px)/2)); background: linear-gradient(105deg,#dff7fb 0%,#f9ffff 46%,#fff8ed 100%); }
.showcase-copy h2 { margin-bottom: 18px; font-size: clamp(2.7rem,4.2vw,4.4rem); }
.showcase-copy > p:not(.eyebrow) { color: var(--ink-soft); }
.showcase-image { position: relative; min-width: 0; }
.showcase-image img { width: 100%; height: 330px; object-fit: cover; object-position: center; border-radius: 26px; box-shadow: 0 18px 44px rgba(11,34,66,.12); }
.showcase-image p { position: absolute; z-index: 2; top: 45%; left: 67%; width: 28%; margin: 0; transform: translate(-50%,-50%) rotate(-2deg); color: var(--navy); font-family: "Segoe Print","Comic Sans MS",cursive; font-size: clamp(.8rem,1.25vw,1.25rem); line-height: 1.3; }
.showcase-benefits { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.showcase-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.showcase-benefits span { color: var(--coral); font-family: var(--body); font-weight: 900; }
.personalizer-builder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,100px); padding: 100px max(28px,calc((100vw - 1250px)/2)); background: linear-gradient(115deg,#e8fafd 0 49%,#d8f1f2 49%); scroll-margin-top: 90px; }

/* Größere Nutzenleiste wie in der Vorlage */
.trust-strip { padding-top: 32px; padding-bottom: 32px; }
.trust-strip article { gap: 20px; padding-block: 18px; }
.trust-strip > article > span { min-width: 48px; color: var(--coral); font-size: 3rem; line-height: 1; text-align: center; }
.trust-strip h3 { font-size: 1.4rem; }
.trust-strip p { font-size: .9rem; }

@media (max-width: 1100px) {
  .personalizer-showcase { grid-template-columns: .9fr 1.25fr; }
  .showcase-benefits { grid-column: 1/-1; grid-template-columns: repeat(4,1fr); }
  .personalizer-builder { grid-template-columns: 1fr; background: linear-gradient(170deg,#e8fafd 0 57%,#d8f1f2 57%); }
}
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; min-height: auto; }
  .hero-copy { width: 100%; max-width: none; min-height: auto; align-items: center; padding: 58px clamp(22px,7vw,60px) 42px; text-align: center; background: linear-gradient(105deg,rgba(255,248,237,.98),rgba(255,255,255,.9)); }
  .hero .eyebrow { justify-content: center; }
  .hero-notes { flex-wrap: wrap; justify-content: center; }
  .hero-stage { position: relative; inset: auto; order: 2; width: 100%; height: 390px; }
  .hero-reference { object-position: 68% center; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip article { min-width: 0; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-strip article:last-child { border-bottom: 0; }
}
@media (max-width: 780px) {
  .personalizer-showcase { grid-template-columns: 1fr; padding: 64px 20px; text-align: center; }
  .personalizer-showcase .eyebrow { justify-content: center; }
  .showcase-copy > p:not(.eyebrow) { max-width: 520px; margin-inline: auto; }
  .showcase-image img { height: 280px; }
  .showcase-benefits { grid-column: auto; grid-template-columns: 1fr 1fr; text-align: left; }
  .personalizer-builder { padding: 72px 20px; }
  .trust-strip > article > span { min-width: 42px; font-size: 2.5rem; }
  .trust-strip h3 { font-size: 1.2rem; }
  .trust-strip p { font-size: .82rem; }
}
@media (max-width: 420px) {
  .hero-stage { height: 300px; }
  .showcase-benefits { grid-template-columns: 1fr; }
  .showcase-image img { height: 240px; }
  .site-header { gap: 6px; padding-inline: 10px; }
  .site-header .brand { font-size: 1.08rem; }
  .site-header .brand-mark { transform: scale(.72); margin-right: -11px; }
  .menu-toggle, .header-actions .icon-button { width: 38px; height: 38px; }
  .header-actions { margin-right: 38px; }
}

.checkout-panel { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: rgba(11,34,66,.62); backdrop-filter: blur(6px); }
.checkout-panel form { position: relative; width: min(580px,100%); display: grid; gap: 10px; padding: 38px; border-radius: 28px; background: white; box-shadow: 0 30px 80px rgba(11,34,66,.28); }
.checkout-panel h2 { margin-bottom: 4px; font-size: clamp(2rem,5vw,3.2rem); }
.checkout-panel form > p:not(.eyebrow):not(.form-error) { color: var(--ink-soft); }
.checkout-panel input,.checkout-panel textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--navy); background: white; }
.checkout-panel textarea { resize: vertical; }
.checkout-panel .button { margin-top: 8px; }
.checkout-close { position: absolute; top: 14px; right: 18px; border: 0; color: var(--navy); background: none; font-size: 2rem; cursor: pointer; }
@media (max-width: 520px) { .checkout-panel { padding: 10px; }.checkout-panel form { padding: 28px 20px; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Finale Referenzkorrekturen: Logo, ausgerichtete Produktkarten und Showcase */
.brand-logo { display: block; width: auto; height: 48px; max-width: 250px; object-fit: contain; }
.product-card { height: 100%; display: flex; flex-direction: column; }
.product-body { flex: 1; display: flex; flex-direction: column; }
.product-bottom { margin-top: auto; padding-top: 20px; }

.personalizer { display: flex; flex-direction: column; }
.personalizer-builder { order: 1; }
.personalizer-showcase { order: 2; padding-top: 46px; padding-bottom: 46px; }
.showcase-copy h2 { font-size: clamp(2.45rem,3.35vw,3.65rem); }
.showcase-image { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 26px; box-shadow: 0 18px 44px rgba(11,34,66,.12); }
.showcase-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; box-shadow: none; }
.showcase-note-card { position: absolute; z-index: 2; top: 36.2%; left: 53.1%; width: 39.2%; height: 40.8%; display: flex; align-items: flex-start; padding: 4.2% 3.5%; transform: rotate(-1.5deg); transform-origin: center; overflow: hidden; }
.showcase-note-card p { position: static; width: auto; max-width: 100%; margin: 0; transform: none; color: var(--navy); font-family: "Segoe Print","Comic Sans MS",cursive; font-size: clamp(.72rem,1.05vw,1.08rem); line-height: 1.22; overflow-wrap: normal; }
.showcase-image > p { display: none; }

.trust-strip { padding-top: 18px; padding-bottom: 18px; background: #fffaf2; }
.trust-strip article { min-height: 78px; padding-block: 10px; }
.trust-strip > article > span { color: var(--navy); font-size: 2.6rem; }
.trust-strip h3 { margin-bottom: 2px; font-size: 1.15rem; }
.trust-strip p { font-size: .78rem; }
.about { min-height: 300px; padding-top: 34px; padding-bottom: 34px; }
.about-mascot { height: 225px; }
.about h2 { font-size: clamp(2.4rem,4.3vw,3.9rem); }
.about p:not(.eyebrow) { margin-bottom: 17px; }
.site-footer { gap: 36px; padding-top: 38px; padding-bottom: 62px; }
.footer-brand p { margin-top: 10px; }

@media (max-width: 1100px) {
  .product-card { min-height: 540px; }
  .product-body { min-height: 245px; }
}
@media (max-width: 780px) {
  .brand-logo { height: 38px; max-width: 195px; }
  .product-card, .product-body { min-height: 0; }
  .personalizer-showcase { padding-top: 54px; padding-bottom: 54px; }
  .showcase-image { width: min(100%,620px); margin-inline: auto; }
  .showcase-note-card p { font-size: clamp(.78rem,3.4vw,1.08rem); }
}
@media (max-width: 420px) {
  .brand-logo { height: 31px; max-width: 158px; }
  .showcase-note-card { padding: 4.1% 3.2%; }
  .showcase-note-card p { font-size: clamp(.68rem,3.45vw,.84rem); }
  .about { min-height: 0; }
}

/* Rechtliche Entwurfsseiten – erst nach abschließender Prüfung veröffentlichen */
.legal-page { min-height: 100vh; background: linear-gradient(180deg,#eafafd 0,#fff 330px); }
.legal-page .site-header { position: relative; }
.legal-header { padding: 76px max(24px,calc((100vw - 1120px)/2)) 52px; }
.legal-header .eyebrow { margin-bottom: 18px; }
.legal-header h1 { max-width: 860px; margin-bottom: 18px; font-size: clamp(3.2rem,7vw,6.6rem); }
.legal-header > p:not(.eyebrow) { max-width: 760px; color: var(--ink-soft); font-size: 1.08rem; }
.legal-draft-banner { padding: 14px max(24px,calc((100vw - 1120px)/2)); color: #612033; background: #ffe1e8; border-block: 1px solid #ffb3c1; font-weight: 800; }
.legal-layout { width: min(1120px,calc(100% - 48px)); display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 56px; margin: 0 auto; padding: 58px 0 96px; }
.legal-toc { position: sticky; top: 24px; align-self: start; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 14px 38px rgba(11,34,66,.08); }
.legal-toc strong { display: block; margin-bottom: 12px; font-family: var(--display); font-size: 1.2rem; }
.legal-toc a { display: block; padding: 6px 0; color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.legal-toc a:hover,.legal-toc a:focus-visible { color: var(--coral); }
.legal-content { min-width: 0; }
.legal-content section { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.legal-content section:last-child { border-bottom: 0; }
.legal-content h2 { margin-bottom: 18px; font-size: clamp(2rem,4vw,3rem); }
.legal-content h3 { margin-top: 26px; font-size: 1.35rem; line-height: 1.15; }
.legal-content p,.legal-content li { color: #273a54; }
.legal-content ul,.legal-content ol { padding-left: 1.3rem; }
.legal-content li + li { margin-top: 8px; }
.legal-card { padding: 24px; border-radius: 22px; background: #fff8ed; }
.legal-note { padding: 18px 20px; border-left: 5px solid var(--cyan); border-radius: 0 14px 14px 0; background: var(--cyan-soft); }
.legal-meta { color: var(--ink-soft); font-size: .86rem; }
.legal-source-list a { overflow-wrap: anywhere; }
.legal-page .site-footer { margin-top: 0; }
@media (max-width: 820px) {
  .legal-header { padding-top: 54px; }
  .legal-layout { grid-template-columns: 1fr; gap: 30px; }
  .legal-toc { position: static; }
}
@media (max-width: 520px) {
  .legal-header { padding: 44px 20px 34px; }
  .legal-draft-banner { padding-inline: 20px; }
  .legal-layout { width: calc(100% - 40px); padding-top: 38px; }
  .legal-header h1 { font-size: clamp(2.7rem,15vw,4.4rem); }
  .legal-content h2 { font-size: 2rem; }
  .legal-card { padding: 19px; }
}