:root{--n:#171717;--t:#e30613;--m:#f7eeee;--l:#e3e3e3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f9f8;color:var(--n);font:15px Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}header{height:76px;background:#fff;display:flex;align-items:center;padding:0 6vw;border-bottom:1px solid var(--l);gap:30px}header p{margin-left:auto;font-size:12px;color:#698087}.cta,.next,.send{background:var(--n);color:#fff;padding:14px 20px;border:0;border-radius:8px;text-decoration:none;font-weight:bold}.brand{display:flex;flex-direction:column}.brand span{font-size:20px;letter-spacing:4px}.brand b{font-size:9px;letter-spacing:4px;color:var(--t)}.logo{display:block;width:205px;max-height:58px;object-fit:contain;object-position:left center}footer .logo{filter:none;width:180px}.hero{padding:45px 8vw;min-height:265px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,#fafafa,#eceeef)}.hero>div{max-width:680px}.eyebrow{color:var(--t);letter-spacing:2px;font-size:10px;font-weight:bold}.hero h1{font:700 clamp(42px,6vw,70px)/.95 Georgia;margin:14px 0}.hero h1 em{color:var(--t);font-weight:400}.hero>div>span{color:#5d747a;line-height:1.6}.hero aside{display:flex;align-items:center;gap:15px;border-left:1px solid #d3d3d3;padding-left:35px}.hero aside b{font:64px Georgia;color:var(--t)}.progress{padding:22px 8vw 12px;background:#fff;display:grid;grid-template-columns:repeat(6,1fr)}.progress button{border:0;background:0;color:#94a5a8;font-size:11px;font-weight:bold}.progress button i{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #cbd5d6;border-radius:50%;margin-right:7px;font-style:normal}.progress .now i,.progress .done i{background:var(--t);color:#fff;border-color:var(--t)}.track{grid-column:1/-1;height:3px;background:#e8eeee;margin-top:17px}.track i{display:block;height:100%;background:var(--t);transition:.3s}.workspace{max-width:1300px;margin:35px auto 70px;padding:0 22px;display:grid;grid-template-columns:1.03fr .97fr;gap:26px;align-items:start}.config,.preview{background:#fff;border:1px solid var(--l);border-radius:15px;box-shadow:0 12px 35px #173b4210}.config{padding:34px}.stephead{display:flex;gap:20px;align-items:center;margin-bottom:28px}.stephead>b{font:italic 48px Georgia;color:#f0c9cc}.stephead h2{font:700 25px Georgia;margin:5px 0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{min-height:100px;border:1px solid var(--l);background:#fff;border-radius:11px;padding:14px;display:flex;align-items:center;text-align:left;gap:13px;position:relative;color:var(--n)}.card.on{border:2px solid var(--t);background:#fff5f5}.art{width:48px;height:55px;border-radius:8px;background:#f5eded;display:grid;place-items:center;font:700 20px Georgia;color:var(--t)}.clear,.metal{width:35px;margin:0 7px;border-radius:15px 15px 6px 6px}.clear{background:linear-gradient(90deg,#c9dddd,#fff,#bdd3d4)}.metal{background:linear-gradient(90deg,#899596,#f5f7f7,#929c9d)}.blue,.colorless,.red,.white{height:44px;width:44px;border-radius:50%;border:1px solid #ccd7d8}.blue{background:#239dcc}.red{background:#d83830}.white{background:white}.card span:nth-child(2){display:flex;flex-direction:column;gap:6px}.card small{font-size:11px;color:#7a8e92}.check{display:none;position:absolute;right:9px;top:9px;background:var(--t);color:#fff;border-radius:50%;width:20px;height:20px;text-align:center}.card.on .check{display:block}.nav{margin-top:32px;padding-top:20px;border-top:1px solid var(--l);display:flex;justify-content:space-between}.nav button{border:0;background:#fff;padding:13px;font-weight:bold}.nav button:disabled{opacity:.25}.nav .next{background:var(--n)}.preview{position:sticky;top:18px;overflow:hidden}.live{padding:16px 22px;border-bottom:1px solid var(--l);display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.2px}.studio{height:510px;background:radial-gradient(circle,#fff,#e8efed);display:grid;place-items:center;position:relative;overflow:hidden}.bottlebox{width:235px;height:440px;position:relative}.cap{position:absolute;top:2px;left:68px;width:100px;height:70px;z-index:4;border-radius:20px 20px 10px 10px;background:linear-gradient(90deg,#9f171b,#ed4032,#a51418);box-shadow:inset 0 5px 7px #fff6,0 5px 5px #0003}.cap:after{content:"";position:absolute;inset:8px;background:repeating-linear-gradient(90deg,transparent 0 7px,#0002 7px 8px)}.cap.whitecap{background:linear-gradient(90deg,#c9d1cf,#fff,#c0c9c7)}.bottle{position:absolute;bottom:0;width:235px;height:386px;clip-path:polygon(34% 0,66% 0,91% 14%,98% 23%,98% 94%,94% 100%,6% 100%,2% 94%,2% 23%,9% 14%);border-radius:50px 50px 30px 30px;overflow:hidden;border:1px solid #aebbbb;background:linear-gradient(90deg,#9fafafaa,#f3f8f7bb,#adbbbb99)}.bottle.silver{background:linear-gradient(90deg,#788586,#e7ecec 35%,#a6b0b1 80%,#748182)}.liquid{position:absolute;inset:64px 5px 5px;background:#d8e6e580}.liquid.bluefill{background:linear-gradient(90deg,#156e98cc,#45b9ddbb,#0f759dcc)}.gloss{position:absolute;inset:15px 0;background:linear-gradient(90deg,transparent 10%,#fff9 18%,transparent 30%,transparent 75%,#fff5 84%,transparent)}.label{position:absolute;left:35px;top:104px;width:165px;height:233px;background:white;border-radius:16px;overflow:hidden;box-shadow:0 4px 13px #173a4055}.label img{width:100%;height:100%;object-fit:contain;transform-origin:center}.neutral{height:100%;display:flex;flex-direction:column;text-align:center;align-items:center;padding:20px 10px;background:linear-gradient(#363b3d 0 51%,#fff 51%);color:#fff}.neutral span{font-size:7px;letter-spacing:2px;color:#ff9da4}.neutral b{font:700 17px Georgia;margin-top:13px}.neutral i{font-size:6px}.neutral strong{margin-top:42px;color:var(--n);font:700 14px Georgia}.neutral small{margin-top:auto;color:#547078;font-size:6px}.floor{position:absolute;bottom:21px;width:150px;height:18px;background:#28484d55;filter:blur(10px);border-radius:50%}.summary{padding:21px 24px}.summary-top{display:flex;justify-content:space-between;align-items:center}.summary h3{font:700 23px Georgia;margin:4px 0 13px}.linkbtn{border:0;background:0;color:var(--t);font-weight:bold}.summary dl{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--l)}.summary dl div{padding:11px 3px;display:flex;justify-content:space-between;border-bottom:1px solid var(--l);font-size:11px}.summary dl div:nth-child(odd){margin-right:16px}.summary dt{color:#819295}.summary dd{margin:0;font-weight:bold;text-transform:capitalize}.yes{color:var(--t)}.drop{padding:38px;border:2px dashed #a7c6c2;border-radius:12px;background:#f7fbfa;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.drop>i{width:42px;height:42px;border-radius:50%;background:var(--m);display:grid;place-items:center;color:var(--t);font-size:23px}.drop span,.drop small{color:#73898d}.drop input{display:none}.error{color:#b42525}.editor{border:1px solid var(--l);border-radius:10px;padding:15px;margin-top:15px}.file{display:flex;align-items:center;gap:10px;margin-bottom:15px}.file span{display:flex;flex-direction:column}.file button{margin-left:auto;border:0;background:0;color:#a33}.editor label{display:grid;grid-template-columns:90px 1fr 45px;margin:12px 0}.editor input{grid-column:2}.editor output{text-align:right}.selected{background:var(--m);padding:15px;border-radius:9px;display:flex;flex-direction:column;margin-bottom:18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:bold}.fields input,.fields select,.fields textarea{padding:12px;border:1px solid #ccd8d9;border-radius:7px}.wide{grid-column:1/-1}.privacy{display:block;margin:18px 0;font-size:11px}.send{width:100%}.success{margin-top:14px;padding:14px;background:#e9f7f1;color:#17664f;border-radius:8px;display:none;gap:10px}.success.show{display:flex}footer{background:var(--n);color:white;padding:35px 6vw;display:flex;align-items:center;gap:45px}footer nav{margin-left:auto}@media(max-width:900px){header p{display:none}.hero aside{display:none}.workspace{grid-template-columns:1fr}.preview{position:relative;grid-row:1}.progress button{font-size:0}.progress button i{font-size:11px}.studio{height:430px}}@media(max-width:560px){header .cta{display:none}.hero{padding:30px 20px}.hero h1{font-size:44px}.progress{padding:15px}.workspace{padding:0 9px}.config{padding:18px}.cards,.fields{grid-template-columns:1fr}.wide{grid-column:auto}.studio{height:390px}.bottlebox{transform:scale(.82)}.live span{display:none}.summary dl{grid-template-columns:1fr}.summary dl div:nth-child(odd){margin:0}footer{flex-direction:column;align-items:flex-start}footer nav{margin:0}}
/* Flaschenproportionen nach der 500-ml-Referenz */
.studio{height:540px}
.bottlebox{width:202px;height:470px}
.cap{top:0;left:56px;width:90px;height:63px;border-radius:18px 18px 8px 8px;box-shadow:inset 0 5px 7px #fff7,inset 0 -7px 8px #0002,0 4px 4px #0003}
.cap:before{content:"";position:absolute;left:7px;right:7px;bottom:-7px;height:10px;border-radius:0 0 50% 50%;background:inherit;filter:brightness(.72);box-shadow:0 2px 2px #0003}
.cap:after{inset:7px 6px 8px;background:repeating-linear-gradient(90deg,transparent 0 5px,#0002 5px 6px);border-radius:13px}
.bottle{width:202px;height:419px;border-radius:39px 39px 25px 25px;clip-path:polygon(39% 0,61% 0,84% 10%,97% 20%,98% 25%,98% 95%,94% 100%,6% 100%,2% 95%,2% 25%,3% 20%,16% 10%);box-shadow:inset 10px 0 14px #ffffff55,inset -11px 0 16px #52626444,inset 0 -12px 14px #68777833}
.bottle:before{content:"";position:absolute;z-index:2;left:25px;right:25px;top:88px;height:14px;border-top:3px solid #b7c2c188;border-bottom:2px solid #ffffff77;border-radius:50%;box-shadow:0 -8px 0 -5px #81909155}
.liquid{inset:78px 5px 6px}
.gloss{z-index:3;inset:15px 0;background:linear-gradient(90deg,transparent 7%,#fff9 13%,transparent 25%,transparent 76%,#fff5 88%,transparent 95%)}
.label{z-index:4;left:31px;top:112px;width:140px;height:257px;border-radius:13px;box-shadow:0 4px 14px #173a4044;transform:perspective(650px) rotateY(0deg)}
.neutral{padding:19px 8px;background:linear-gradient(#363b3d 0 49%,#fff 49%)}
.neutral b{font-size:15px;margin-top:12px}.neutral strong{margin-top:54px;font-size:13px}.neutral small{font-size:5px}
.floor{bottom:18px;width:132px;height:15px}
@media(max-width:560px){.studio{height:420px}.bottlebox{transform:scale(.82)}}

/* Gut lesbare Navigation und Footer */
.nav button{color:#242424;opacity:1}
.nav button:disabled{color:#707070;background:#f2f2f2;opacity:1;cursor:not-allowed}
.nav button.next,.send{background:#c90010;color:#ffffff;border:1px solid #c90010;min-height:48px;padding:14px 24px}
.nav button.next:hover,.send:hover{background:#a6000d;border-color:#a6000d;color:#ffffff}
.nav button:focus-visible,.send:focus-visible{outline:3px solid #242424;outline-offset:3px}
footer{background:#ffffff;color:#242424;border-top:1px solid #d5d5d5}
footer p,footer nav,footer a{color:#242424}
footer .logo{background:#ffffff;padding:6px;border-radius:4px}
/* Produktabhängige Gebinde */
.progress{grid-template-columns:repeat(5,1fr)}
.art.green{background:#26793d}.art.black{background:#242424}.art.green,.art.black{border-radius:50%;width:44px;height:44px}.notice{padding:14px;background:#f5f5f5;border-radius:8px;line-height:1.5}.fields input{min-width:0}.file b{overflow-wrap:anywhere}.cap.green-cap{background:linear-gradient(90deg,#164822,#36914d,#153f21)}.cap.black-cap{background:linear-gradient(90deg,#111,#555,#171717)}
.bottlebox.jar{width:260px;height:290px}.jar .bottle{width:260px;height:247px;clip-path:none;border-radius:28px 28px 45px 45px;background:linear-gradient(90deg,#cbd5d5,#fff,#d6dfdf)}.jar .cap{left:0;top:0;width:260px;height:51px;border-radius:24px 24px 8px 8px}.jar .label{left:20px;top:65px;width:220px;height:147px}.jar .neutral strong{margin-top:15px}.jar .neutral b{margin-top:4px}.jar .bottle:before{display:none}
.bottlebox.carton{width:230px;height:325px}.carton .cap,.carton .liquid,.carton .gloss{display:none}.carton .bottle{width:230px;height:325px;clip-path:none;border-radius:2px;background:linear-gradient(90deg,#e2e4e2 0 89%,#aaaead 89%);box-shadow:12px 12px 20px #0002}.carton .bottle:before{display:none}.carton .label{left:15px;top:20px;width:180px;height:282px;border-radius:0;box-shadow:none}
.bottlebox.liter{transform:scale(1.04)}.bottlebox.spray .cap{width:140px;left:45px;height:55px;border-radius:10px 25px 10px 5px;background:#252525}.spray .cap:after{inset:45px 0 auto 14px;width:12px;height:40px;transform:rotate(25deg);background:#333}.measure-cup{position:absolute;right:-75px;bottom:0;width:57px;height:65px;border:2px solid #91a7b399;border-radius:5px 5px 14px 14px;background:repeating-linear-gradient(0deg,transparent 0 10px,#8197a855 11px 12px);box-shadow:inset 5px 0 9px #fff9}.pack-caption{position:absolute;bottom:5px;text-align:center;font-size:11px;color:#566}
@media(max-width:560px){.bottlebox.liter{transform:scale(.82)}.bottlebox.jar,.bottlebox.carton{transform:scale(.85)}}

/* Trigger sprayer: nozzle at left, curved lever below, screw collar at neck. */
.spray-nozzle,.spray-collar{display:none}
.bottlebox.spray{height:470px;width:202px}
.bottlebox.spray .bottle{height:354px;clip-path:polygon(38% 0,62% 0,67% 9%,86% 18%,97% 27%,98% 94%,94% 100%,6% 100%,2% 94%,3% 27%,14% 18%,33% 9%)}
.bottlebox.spray .cap{top:8px;left:22px;width:159px;height:60px;border-radius:8px 48px 18px 8px;background:linear-gradient(160deg,#6a6a6a 0%,#292929 26%,#161616 60%,#404040 88%,#151515 100%);box-shadow:inset 0 3px 2px #ffffff55,inset 0 -5px 6px #0008,2px 5px 5px #0002;overflow:visible;z-index:6}
.bottlebox.spray .cap:before{left:20px;right:auto;top:10px;bottom:auto;width:101px;height:8px;background:linear-gradient(90deg,#ffffff44,transparent);border-radius:50%;filter:none;box-shadow:none;transform:rotate(7deg)}
.bottlebox.spray .cap:after{inset:auto;left:32px;top:46px;width:24px;height:78px;transform:rotate(23deg);transform-origin:top center;border-radius:4px 8px 14px 7px;background:linear-gradient(90deg,#222,#626262 40%,#242424 70%);box-shadow:inset 3px 0 2px #ffffff33,3px 2px 3px #0002;clip-path:polygon(15% 0,100% 0,78% 45%,62% 76%,20% 100%,0 92%,20% 65%,26% 35%)}
.spray .spray-nozzle{display:block;position:absolute;left:-15px;top:10px;width:27px;height:34px;border-radius:4px 2px 2px 4px;border:1px solid #111;background:linear-gradient(90deg,#111 0 18%,#4e4e4e 20% 80%,#222 85%);box-shadow:inset 0 2px 2px #aaa6,0 2px 2px #0004}
.spray .spray-nozzle:after{content:'';position:absolute;left:1px;top:11px;width:4px;height:10px;border-radius:50%;background:#080808;box-shadow:1px 0 1px #999}
.spray .spray-collar{display:block;position:absolute;left:54px;top:56px;width:62px;height:59px;border-radius:5px 5px 8px 8px;background:repeating-linear-gradient(90deg,transparent 0 3px,#0005 3px 5px),linear-gradient(90deg,#161616,#555 45%,#171717);border-bottom:5px solid #202020;box-shadow:inset 0 3px 2px #aaa5,0 3px 3px #0003}
.spray .label{top:101px;height:218px}

/* Fixed label zones prevent long names from pushing the brand into the dark area. */
.label .neutral{display:grid;grid-template-rows:12% 30% 7% 35% 16%;width:100%;height:100%;padding:0 9px;background:linear-gradient(#363b3d 0 49%,#fff 49%);gap:0;align-items:center;justify-items:center;box-sizing:border-box}
.label .neutral>*{min-width:0;max-width:100%;margin:0;text-align:center;box-sizing:border-box}
.label .neutral>span{font:600 6px/1.2 Arial,sans-serif;letter-spacing:1.2px;color:#ffc4c8;align-self:end;padding-bottom:3px}
.label .neutral>b{font:700 12px/1.22 Arial,sans-serif;color:#fff;overflow-wrap:anywhere;hyphens:auto;letter-spacing:0;align-self:center}
.label .neutral>i{font:normal 5px/1.2 Arial,sans-serif;letter-spacing:.6px;color:#fff;align-self:start}
.label .neutral>strong{font:700 13px/1.4 Georgia,serif;color:#242424;align-self:center}
.label .neutral>small{font:500 6px/1.35 Arial,sans-serif;color:#3b484c;overflow-wrap:anywhere;padding:0 2px}
.jar .label .neutral>b{font-size:11px;line-height:1.15}
.jar .label .neutral>strong{font-size:11px;line-height:1.25}
.jar .label .neutral>span{font-size:5px;padding-bottom:0}
.jar .label .neutral>i{font-size:4px}
.carton .label .neutral>b{font-size:14px}
.carton .label .neutral>strong{font-size:16px}

/* Real package photographs, with independently positioned editable labels. */
.studio{background:#fff;height:550px}
.bottlebox.photographic{width:300px;height:510px;transform:none}
.photographic #bottle,.photographic #cap{position:absolute;bottom:auto;border:0;border-radius:0;clip-path:none;box-shadow:none;background-color:transparent;background-repeat:no-repeat;overflow:visible}
.photographic #bottle:before,.photographic #cap:before,.photographic #cap:after,.photographic .gloss,.photographic .spray-nozzle,.photographic .spray-collar{display:none}
.photographic #cap{z-index:6;border-radius:13px 13px 7px 7px;mix-blend-mode:normal;opacity:1}
.photographic.spray #cap{border-radius:0;mix-blend-mode:normal}
.photographic #label{border-radius:8px;box-shadow:0 2px 4px #0002;transform:none;overflow:hidden}
.photographic.carton #label{border-radius:0;box-shadow:none}
.photographic .measure-cup{right:-5px;bottom:15px}
.studio .floor{display:none}
.photographic.jar .neutral>b{font-size:12px}
.photographic.carton .neutral>b{font-size:13px}
.custom-note{border-left:4px solid #c90010;background:#fff4f4}
.idea-field{padding:16px;border:1px solid #e7b9bc;border-radius:9px;background:#fff7f7}
.idea-field small{font-weight:normal;line-height:1.45;color:#5f6f72}
@media(max-width:560px){.studio{height:440px}.bottlebox.photographic{transform:scale(.8)}}