/* ===== Tokens ===== */ :root{ --purple-deep:#2a1250; --purple:#4a1d78; --magenta:#c62a8a; --pink:#f0559b; --orange:#ff8a3d; --amber:#ffc85c; --cream:#ffe9c7; --ink:#170f2b; --paper:#fff8ee; --mojito:#8bc34a; --mojito-dark:#5a8f2a; --lemon:#ffb347; --lemon-dark:#e08a1e; --berry:#e85a9b; --berry-dark:#b8306f; /* Eigene Tokens NUR fuer Text. Die Markenfarben oben bleiben unangetastet, weil sie auch in Verlaeufen und Flaechen stecken -- dort ist Kontrast kein Thema. Als Text auf Weiss fielen sie dagegen durch WCAG AA (gemessen auf #ffffff): --lemon-dark #e08a1e 2,68:1 --mojito-dark #5a8f2a 3,89:1 Die Sorten-Unterzeile ist 14,4px fett, gilt also NICHT als grosser Text und braucht 4,5:1 statt 3,0:1. Beide Werte hier erfuellen das mit Reserve. */ --mojito-text:#47701f; /* 5,82:1 auf weiss */ --lemon-text:#99590e; /* 5,54:1 auf weiss */ --berry-text:#b8306f; /* 5,69:1 auf weiss, unveraendert */ --eyebrow-text:#c03574; /* 4,98:1 auf --paper, vorher --berry mit 3,13:1 */ --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: 'Oswald', var(--font); --font-heading: 'Poppins', var(--font); --container: 1180px; --radius: 18px; } *{box-sizing:border-box;} /* NOTE: do not be tempted to put overflow-x:clip (or hidden) on to stop sideways dragging. It works -- and it silently kills the sticky header, because any overflow value other than `visible` on an ancestor makes that ancestor the scroll container the sticky element resolves against. Measured: the header scrolled straight off the top instead of pinning. The sideways drag is fixed at its source instead, in the .main-nav rules in the mobile block near the end of this file. */ html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} .container{max-width:var(--container);margin:0 auto;padding:0 24px;} .skip-link{ position:absolute;left:-999px;top:0; background:var(--ink);color:#fff;padding:8px 16px;z-index:200; } .skip-link:focus{left:8px;top:8px;} /* Keyboard focus must stay visible everywhere. Several elements sit on photos or gradients where the browser's default ring can disappear, so the ring is defined explicitly with an offset. :focus-visible keeps it off mouse clicks. */ a:focus-visible, button:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; border-radius:4px; } .btn:focus-visible{outline-offset:4px;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;} } /* ===== Buttons ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center; padding:14px 28px;border-radius:999px;font-weight:700;font-family:var(--font-heading); font-size:.95rem;letter-spacing:.03em;text-transform:uppercase; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; border:2px solid transparent; white-space:nowrap; } /* Solid, not a gradient. Any gradient here reads as an uneven colour against the hero's own gradient backdrop -- one end always ends up close to the background. */ /* #f97316 mit weisser Schrift ergab 2,80:1 -- durchgefallen, auch fuer grossen Text (3,0:1). #bf4f06 erreicht 4,84:1 und erfuellt AA vollstaendig. */ .btn--primary{ background:#bf4f06; color:#fff; box-shadow:0 10px 30px -8px rgba(210,80,20,.5); } .btn--primary:hover{background:#a94304;transform:translateY(-3px);box-shadow:0 16px 34px -8px rgba(210,80,20,.62);} .btn--ghost{ background:transparent;border-color:rgba(23,15,43,.25);color:var(--ink); } .btn--ghost:hover{border-color:var(--ink);transform:translateY(-3px);} .btn--pill{padding:10px 22px;font-size:.8rem;} /* ===== Header ===== Solid from the first frame and sticky rather than fixed. Fixed meant it floated over the banner: the logo sat on the footage and the video ran behind it. Sticky puts the bar in the normal flow, so it takes up its own height and the banner starts cleanly underneath -- and it still pins to the top once you scroll. Because the bar is now always light, the logo and nav are dark from the start; the white-on-photo versions and their text shadows are gone. */ .site-header{ position:sticky;top:0;z-index:100; padding:14px 0; background:rgba(255,248,238,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:padding .3s ease, box-shadow .3s ease; } /* Only the compact state and the shadow are left to the scroll handler. */ .site-header.is-scrolled{ padding:10px 0; box-shadow:0 4px 24px rgba(23,15,43,.08); } .header-inner{display:flex;align-items:center;gap:24px;} .logo{ font-family:var(--font-display);font-weight:700;letter-spacing:.02em;font-size:clamp(1.25rem,1.9vw,1.95rem); color:var(--ink);display:flex;flex-direction:column;line-height:1;margin-right:auto; } .logo span{font-size:clamp(.5rem,.62vw,.65rem);font-weight:600;font-family:var(--font-heading);letter-spacing:.35em;opacity:.85;margin-top:4px;} .main-nav{display:flex;gap:28px;} .main-nav a{ color:var(--ink);font-weight:700;font-size:clamp(.8rem,.95vw,.95rem);letter-spacing:.03em;text-transform:uppercase; position:relative;padding:4px 0;transition:color .3s ease; } .main-nav a::after{ content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0%; background:var(--orange);transition:width .25s ease; } .main-nav a:hover::after{width:100%;} .header-cta{ background:linear-gradient(135deg,var(--orange),var(--berry)); border-color:transparent;color:#fff !important; display:inline-flex;align-items:center;gap:6px; } .header-cta-sub{font-size:.65rem;opacity:.75;font-weight:700;letter-spacing:.04em;} /* Mobile-only twin of .header-cta, living inside .main-nav. Hidden here; switched on in the max-width:760px block, where .header-cta itself is display:none. */ .nav-cta{display:none;} .nav-toggle{ display:none;flex-direction:column;justify-content:center;gap:5px; width:38px;height:38px;border:none;background:none;cursor:pointer;padding:0; } .nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s ease, opacity .3s ease;} /* ===== Hero (full-width video banner) ===== */ .hero{ position:relative; display:flex;align-items:center;justify-content:center; overflow:hidden; /* The gradient still sits underneath. It shows through the tint layer and covers the moment before the first frame paints, so the page never opens on a black box. */ background:linear-gradient(180deg,var(--purple-deep) 0%,var(--purple) 26%,var(--magenta) 52%,var(--orange) 76%,var(--cream) 92%,var(--cream) 100%); } /* The band carries the clip's own 864:496 aspect ratio, so the full frame is on screen and nothing is cropped at all -- no strip off the top, none off the bottom. The cost is height: across a 1440px viewport that makes the band 818px tall, more than a laptop screen has left under the header, so its lower edge sits just below the fold and the Sorten section starts further down. That is the deliberate trade -- the only other way to have the whole frame AND everything else on one screen would be a narrower video, which is the opposite of what this banner is for. No min-height and no max-height: either of them fights the aspect ratio, and a min-height once made the box resolve its WIDTH from its height (560 x 1.742 = 975px) which pushed the whole page sideways. */ .hero-banner{ position:relative; width:100%; aspect-ratio:864 / 496; overflow:hidden; } /* The phone keeps the cropped band it already had: at 390px wide the full ratio is only 224px tall, far too shallow to open a page with. No object-position here. The rule that used to sit in this block claimed to "push the visible window down the frame", but it did nothing twice over: the base .hero-video rule below sets object-position:center at equal specificity and later in the file, so it always won; and even had it applied, a 864x496 clip inside a 390x600 box covers by scaling to HEIGHT (factor 1.21 -> 1045x600), which crops 655px horizontally and 0px vertically. With no vertical overflow there is nothing for a Y offset to move. The product's height in the band is fixed by the footage, and it moves as the clip plays, which is why the copy is kept in the upper area rather than truly centred. */ @media (max-width:760px){ .hero-banner{aspect-ratio:auto;height:min(76vh,600px);} } .hero-video{ position:absolute;inset:0; width:100%;height:100%; /* cover with a matching aspect ratio has nothing left to crop; it stays instead of `contain` only so a sub-pixel rounding difference can never show as a letterbox seam against the band edge. */ object-fit:cover; object-position:center; display:block; background:#160b28; } /* Brand wash and legibility scrim in ONE layer, with normal blending. Two separate layers, or a mix-blend-mode on either of them, means the browser recomposites the full viewport on every frame of a playing video -- the same cost that had to be taken off the hero grain earlier in this build. A single plain gradient is composited once and then just sits there. The radial darkens the middle for the headline; the linear runs purple at the top to amber at the bottom, which is what keeps the brand's colour progression on the banner instead of leaving it looking like a bare video. */ .hero-tint{ position:absolute;inset:0; background: radial-gradient(ellipse 66% 56% at 50% 38%, rgba(10,4,24,.5), transparent 76%), linear-gradient(180deg, rgba(42,18,80,.7) 0%, rgba(74,29,120,.46) 22%, rgba(198,42,138,.34) 48%, rgba(255,138,61,.32) 74%, rgba(255,200,92,.36) 100%); pointer-events:none; } .hero-banner .hero-grain{z-index:1;opacity:.07;} /* Synthetic-media disclosure. Deliberately quiet -- it belongs on the footage, not in the headline -- but it stays legible: white at .82 on a dark scrim clears the 4.5:1 contrast bar, and it is real text, so it is read out and can be translated. */ .ai-note{ position:absolute;left:12px;bottom:12px;z-index:2; display:inline-flex;align-items:center;gap:6px; margin:0;padding:5px 11px 5px 9px; border-radius:999px; background:rgba(14,7,26,.58); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); color:rgba(255,255,255,.82); font-family:var(--font-heading);font-weight:600; font-size:.66rem;letter-spacing:.06em;text-transform:uppercase; pointer-events:none; } .ai-note svg{width:13px;height:13px;fill:currentColor;flex-shrink:0;opacity:.9;} @media (max-width:640px){ .ai-note{left:8px;bottom:8px;font-size:.6rem;padding:4px 9px 4px 7px;} } .hero-vignette{ position:absolute;inset:0; background:radial-gradient(ellipse 75% 65% at 50% 38%, transparent 45%, rgba(10,4,24,.4) 100%); } .hero-grain{ position:absolute;inset:-10%; /* mix-blend-mode removed: a blend mode on a full-screen layer forces the whole hero into an extra compositing pass on every frame of the pinned scroll. Plain low opacity gives virtually the same texture. */ opacity:.1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } /* warm sunrise/sunset light beam shining past the bottles */ .hero-sunbeam{ position:absolute;top:-10%;right:-10%;width:min(60vw,620px);height:120%; background:radial-gradient(ellipse 32% 90% at 50% 50%, rgba(255,224,160,.85), rgba(255,150,80,.35) 45%, transparent 72%); filter:blur(30px); mix-blend-mode:screen; transform:rotate(calc(18deg + var(--beam-extra-rotate, 0deg))); opacity:calc(.75 + var(--beam-extra-opacity, 0)); z-index:1; pointer-events:none; will-change:transform, opacity; } /* Warm sun shafts raking across the hero -- reads as real light through the canopy instead of decorative sparkles. */ .hero-rays{position:absolute;inset:-15% 0 0;overflow:hidden;z-index:1;pointer-events:none;mix-blend-mode:screen;} /* No blur filter here on purpose. A 22px blur on four full-height elements is re-rasterised on every frame of the pinned scroll and was a major source of the stutter. A wide horizontal gradient gives the same soft-edged look for free. */ .ray{ position:absolute;top:-20%;left:var(--x); width:calc(var(--w) * 2.6);height:135%; background: linear-gradient(90deg, transparent, rgba(255,238,200,.42) 35%, rgba(255,238,200,.42) 65%, transparent), linear-gradient(180deg, rgba(255,238,200,.34), rgba(255,206,140,.1) 55%, transparent 88%); background-blend-mode:multiply; transform:rotate(var(--rot)); transform-origin:50% 0; opacity:.5; animation:raySweep var(--dur) ease-in-out infinite; animation-delay:var(--delay); } @keyframes raySweep{ 0%,100%{opacity:.28;transform:rotate(var(--rot)) scaleX(.9);} 50%{opacity:.6;transform:rotate(calc(var(--rot) + 3deg)) scaleX(1.15);} } /* Two palm depths. The layer wrapper is what JS parallaxes (back slower than front); the inner .palm-wrap owns the sway so the two never fight. */ .palm-layer{position:absolute;inset:0;pointer-events:none;will-change:transform;} .palm-layer--back{z-index:1;} .palm-layer--front{z-index:2;} .palm-wrap{ position:absolute; pointer-events:none; animation:palmSway 4.6s ease-in-out infinite; transform-origin:50% 100%; } /* Front pair, deliberately mismatched so the framing doesn't read as a mirrored stencil. Both stay fully inside the viewport horizontally -- no clipped fronds. */ .palm-wrap--left{bottom:0;left:min(1vw,14px);width:min(45vw,600px);} .palm-wrap--right{bottom:0;right:min(1.5vw,20px);width:min(35vw,455px);scale:-1 1;animation-delay:-2.1s;animation-duration:5.3s;} /* Back pair: smaller, pulled inward and hazed back into the sky. */ .palm-wrap--back-l{bottom:7%;left:min(21vw,270px);width:min(23vw,290px);animation-duration:6.1s;animation-delay:-3.4s;} .palm-wrap--back-r{bottom:9%;right:min(18vw,235px);width:min(19vw,240px);scale:-1 1;animation-duration:5.7s;animation-delay:-1.2s;} .palm-img{ width:100%;height:auto;display:block; /* Fade the trunk out near the bottom so it dissolves into the horizon haze instead of being sliced off by the hero's overflow clip. */ -webkit-mask-image:linear-gradient(to bottom, black 74%, rgba(0,0,0,.5) 90%, transparent 100%); mask-image:linear-gradient(to bottom, black 74%, rgba(0,0,0,.5) 90%, transparent 100%); } .palm-layer--front .palm-img{opacity:.92;} /* No blur filter: the back layer is already read as distant via its smaller size and lower opacity, and a blur on a 566px image costs a repaint per scroll frame. */ .palm-layer--back .palm-img{opacity:.38;} @keyframes palmSway{ 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2.4deg);} } /* Anchored under the header rather than centred. Centred copy ran straight across the product, which is the one thing in the frame that must stay clear. Sitting it at the top, with the video's window pushed down, keeps the two apart. */ .hero-content{ position:absolute;left:0;right:0;top:0; padding-top:clamp(22px,4vh,48px); z-index:5;text-align:center; } /* Smaller than the section headings elsewhere: this one has to share a band with the product, and every line it saves is a line that is not sitting on the bottles. */ .hero--video .hero-title{ font-size:clamp(1.85rem,4.2vw,3.35rem); margin-bottom:14px; } .hero--video .hero-subtitle{margin-bottom:18px;} /* NOTE: the hero copy is deliberately visible by default and animated in by JS (see main.js). It previously used `animation: fadeUp ... both`, which holds the 0%-opacity start frame whenever the animation clock is stalled -- background tab, throttled compositing -- leaving the headline invisible. The most important text on the page must never depend on an animation running. */ .hero-kicker{ color:#fff;font-weight:600;letter-spacing:.15em;text-transform:uppercase; font-size:clamp(.82rem,1vw,.95rem);opacity:.9;margin:0 0 10px; } /* Oswald 500 rather than 700: keeps the condensed character of the bottle lettering without the heavy, closed-up look that 700 gave at display size. */ .hero-title{ margin:0 0 20px;color:#fff;font-weight:500;font-family:var(--font-display); text-transform:uppercase; font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1.16;letter-spacing:.015em; text-shadow:0 8px 30px rgba(0,0,0,.25); } .hero-title span{ background:linear-gradient(90deg,var(--amber),var(--orange) 60%,var(--berry)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-subtitle{ color:rgba(255,255,255,.92);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.45rem); margin:0 0 22px; } .hero-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;} .hero-actions .btn{padding:17px 36px;font-size:clamp(.95rem,1.05vw,1.08rem);} /* A fully transparent ghost button sits directly over the bottles, so the product showed through its label. A faint tinted blur keeps the ghost look but guarantees the text stays readable whatever passes behind it. */ .hero-actions .btn--ghost{ color:#fff;border-color:rgba(255,255,255,.6); background:rgba(30,12,50,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .hero-actions .btn--ghost:hover{border-color:#fff;background:rgba(30,12,50,.34);} .hero-bottles{ position:absolute;top:0;left:0;right:0;bottom:7%;z-index:3; display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,4.5vw,60px); pointer-events:none; transform-origin:50% 100%; transform:translate(var(--px,0px), var(--py,0px)) scale(var(--zoom-scale,1)) translateY(var(--zoom-y,0px)); will-change:transform; /* Soft fade at BOTH ends: the top so the zoom doesn't hard-clip the bottles as they rise, the bottom so their bases/shadows dissolve into the horizon haze instead of being sliced by the hero's overflow clip. */ -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 10%, black 22%, black 88%, rgba(0,0,0,.45) 96%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 10%, black 22%, black 88%, rgba(0,0,0,.45) 96%, transparent 100%); } .bottle{ position:relative; width:clamp(46px,8vh,82px);animation:floatBottle 4.5s ease-in-out infinite; pointer-events:auto;cursor:pointer; } .bottle-visual{ position:relative; transition:transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin:50% 100%; } .bottle-visual img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 18px rgba(0,0,0,.35));} .bottle:hover .bottle-visual{transform:scale(1.16);} .bottle-shine{ position:absolute;inset:0; mask-size:contain;mask-repeat:no-repeat;mask-position:bottom center; -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:bottom center; pointer-events:none; } .bottle--mojito .bottle-shine{-webkit-mask-image:url(../assets/bottle-mojito.webp);mask-image:url(../assets/bottle-mojito.webp);} .bottle--lemon .bottle-shine{-webkit-mask-image:url(../assets/bottle-lemon.webp);mask-image:url(../assets/bottle-lemon.webp);} .bottle--berry .bottle-shine{-webkit-mask-image:url(../assets/bottle-berry.webp);mask-image:url(../assets/bottle-berry.webp);} .bottle-shine{ background:radial-gradient(ellipse 45% 60% at 32% 30%, rgba(255,255,255,.85), rgba(255,255,255,.15) 55%, transparent 75%); mix-blend-mode:soft-light; opacity:0; animation:shineGlint 6s ease-in-out infinite; } .bottle--lemon .bottle-shine{animation-delay:-2s;} .bottle--berry .bottle-shine{animation-delay:-4s;} @keyframes shineGlint{ 0%,40%{opacity:0;} 52%{opacity:.9;} 62%{opacity:.35;} 75%,100%{opacity:0;} } /* The condensation drips are gone. They animated background-position on nine mask-image elements, which forces a repaint of each one every single frame -- the heaviest thing on the page, for an effect barely visible at an 88px bottle. */ /* Sized off the viewport, not off the (tiny) bottle width -- at 30% of a 124px bottle the fruit was ~37px and no animation on it could ever read. */ /* Behind the bottle (z-index 0 vs the visual's 1) and offset outward, so the fruit tucks in beside the product instead of covering the label. */ .fruit-badge{ position:absolute;top:44%;z-index:0; width:clamp(48px,7vh,88px); filter:drop-shadow(0 8px 12px rgba(0,0,0,.42)); will-change:transform; } .bottle-visual{z-index:1;} /* The fruit are properly cut-out photos now, so they must show their own silhouette. The old circular mask + object-fit:cover was clipping the real outline -- that is what made them look chopped off. Contain, no mask, no forced aspect. */ .fruit-img{ width:100%;height:auto;display:block;object-fit:contain; } /* Rotated so the small stub left over from the photo's reflection points at the bottle and is hidden behind it. Uses the standalone `rotate` property, not `transform`, so it composes with the GSAP bob instead of being overwritten. Slight lift in brightness to sit at the same level as the lime. */ .fruit-badge--lemon .fruit-img{ rotate:88deg; filter:brightness(1.08) saturate(1.12); } /* Berry reads better in front of the bottle, the citrus tucked behind. */ .fruit-badge--berry{z-index:3;} /* Clear of the label: offset by more than half the badge's own width so each fruit sits beside its bottle rather than on top of it. Each one gets its own gap -- putting mojito's and lemon's fruit on the same side crowded them into one spot. */ .bottle--mojito .fruit-badge{right:-58%;top:52%;} /* Tucked in close and overlapping the bottle edge -- it sits behind the glass, so a small overlap reads as the fruit nestling against the bottle rather than floating away from it. */ .bottle--lemon .fruit-badge{right:-30%;top:44%;} .bottle--berry .fruit-badge{right:-58%;top:46%;} /* Water burst radiating off the fruit. Motion is GSAP-driven (see main.js) so each droplet gets its own randomised arc; CSS only defines how a droplet looks. */ .splash{position:absolute;inset:0;overflow:visible;pointer-events:none;} .droplet{ position:absolute;left:50%;top:50%;width:9px;height:13px; border-radius:50% 50% 50% 50% / 66% 66% 34% 34%; background:linear-gradient(200deg, rgba(255,255,255,.98), rgba(190,232,255,.55)); box-shadow:0 0 7px rgba(255,255,255,.6); opacity:0; will-change:transform, opacity; } /* Expanding shock-ring at the moment of the burst -- the visual "splash!" beat. */ .splash-ring{ position:absolute;left:50%;top:50%;width:100%;height:100%; margin:-50% 0 0 -50%; border-radius:50%; border:2px solid rgba(255,255,255,.7); opacity:0; pointer-events:none; will-change:transform, opacity; } .bottle--mojito{ width:clamp(50px,8.2vh,84px); margin-bottom:-6px;animation-duration:4.6s;animation-delay:-1.6s; translate:calc(var(--spread,0px) * -1) 0; rotate:calc(var(--tilt,0deg) * -1); } .bottle--lemon{ width:clamp(76px,13vh,124px);z-index:1; margin-bottom:0; animation-duration:5.2s;animation-delay:-2.8s; } .bottle--berry{ width:clamp(62px,10.6vh,100px); margin-bottom:-10px;animation-duration:4.2s;animation-delay:-.6s; translate:var(--spread,0px) 0; rotate:var(--tilt,0deg); } @keyframes floatBottle{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-18px) rotate(2deg);} } /* Palms framing the dusk band. Pushed to the outer edges and kept fully inside the section -- the left half carries the copy, and a frond must never be clipped by the section edge. */ .story--showcase .palm-wrap--left{left:0;width:min(41vw,530px);} .story--showcase .palm-wrap--right{right:0;width:min(34vw,440px);} .story--showcase .palm-wrap--back-l{left:min(15vw,200px);width:min(20vw,255px);bottom:8%;} .story--showcase .palm-wrap--back-r{right:min(13vw,170px);width:min(16vw,210px);bottom:10%;} .story--showcase .palm-layer--front .palm-img{opacity:.9;} .story--showcase .palm-layer--back .palm-img{opacity:.34;} /* Horizon haze at the warm end, so the trunks dissolve into the light instead of stopping on the section edge. */ .story--showcase .hero-horizon{ position:absolute;left:0;right:0;bottom:0;height:20%;z-index:3; background:linear-gradient(180deg, rgba(255,233,199,0) 0%, rgba(255,238,214,.75) 78%, rgba(255,242,224,.95) 100%); pointer-events:none; } .scroll-cue{ position:absolute;left:50%;bottom:28px;transform:translateX(-50%); z-index:5;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px; opacity:.85; } .scroll-cue span{ width:20px;height:32px;border:2px solid rgba(255,255,255,.7);border-radius:12px;position:relative; } .scroll-cue span::before{ content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px; background:#fff;border-radius:2px;animation:scrollDot 1.6s ease-in-out infinite; } @keyframes scrollDot{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(10px);opacity:0;}100%{opacity:0;}} /* ===== Section shared ===== */ .eyebrow{ color:var(--eyebrow-text);font-weight:700;font-family:var(--font-heading);letter-spacing:.16em;text-transform:uppercase; font-size:.85rem;margin:0 0 10px;text-align:center; } .eyebrow--light{color:var(--amber);} .section-title{ font-family:var(--font-display);font-size:clamp(2rem,4.2vw,3rem);font-weight:500;text-transform:uppercase;text-align:center;margin:0 0 18px;letter-spacing:.015em; } .section-title--light{color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.25);} .section-lead{ max-width:620px;margin:0 auto 50px;text-align:center;font-size:1.05rem;color:rgba(23,15,43,.72);line-height:1.6; } /* Wide enough for one line. In the Sorten section this paragraph is the last thing that has to fit above the fold under the banner, and at 620px it wrapped to two -- the second line was the bit that dropped off on a short laptop screen. */ .sorten .section-lead{max-width:880px;margin-bottom:40px;} .section-lead--light{color:rgba(255,255,255,.85);} /* ===== Sorten ===== */ /* Normal rhythm again. This section spent a while squeezed up so its intro could land in the gap above the fold; now that the banner shows the full frame there is no such gap to aim for, and the cramped padding only looked cramped. */ .sorten{ position:relative;overflow:hidden; margin-top:-2px;padding:64px 0 100px; background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 6%,var(--paper) 45%); } /* Oversized brandmark as a tilted watermark. Kept very low contrast so it reads as texture behind the cards, never as content competing with them. */ /* Sits fully inside the viewport -- nothing is clipped by the left edge -- and reads straight through the cards. It is layered ABOVE the cards but composited with multiply, so it only ever darkens what is beneath it. Putting it behind opaque cards would hide it completely, and making the cards translucent instead would wash out their text. Multiply keeps the card backgrounds at full opacity while the mark still shows across them. */ .sorten-mark{ position:absolute;z-index:2; left:1.5%;top:15%; width:min(40vw,470px);height:auto; rotate:-13deg; opacity:.16; mix-blend-mode:multiply; pointer-events:none; user-select:none; } .sorten > .container{position:relative;z-index:1;} /* Die .ron-Regeln (Tornado-Auftritt) sind am 31.08.2026 entfernt worden -- die Variante ohne ihn ist die finale. Nebeneffekt fuers Handy: das Element war position:fixed mit translateX(130%) und ragte damit ueber den rechten Viewport-Rand hinaus. Fixed- Elemente werden vom overflow-x:hidden des body NICHT geclippt, also liess sich die Seite auf dem Handy seitlich schieben -- und alles Zentrierte sah dadurch verrutscht aus. */ @media (max-width:900px){ /* More inset than it looks like it needs: the -13deg rotation grows the element's bounding box sideways, so a small percentage still pokes past the edge. */ .sorten-mark{left:7%;top:auto;bottom:3%;width:min(66vw,340px);opacity:.1;} } .sorten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;} /* Shop-Verweis unter den Karten -- dort ist die Kaufabsicht am hoechsten. Das Brandmark-Wasserzeichen liegt darueber, genau wie ueber den Karten: multiply bei .16 Deckkraft dunkelt nur nach, es verdeckt nichts. */ .sorten-shop{ margin-top:52px;text-align:center; } .sorten-shop p{ margin:0 0 20px; font-size:1.05rem;color:rgba(23,15,43,.72); } .sorten-shop-btn{gap:10px;padding:16px 34px;font-size:1rem;} .sorten-shop-btn svg{width:19px;height:19px;transition:transform .25s ease;} .sorten-shop-btn:hover svg{transform:translateX(4px);} /* No overflow:hidden here on purpose -- the crown cap flies up out of the card on hover and would be sliced off. The tint layer below rounds itself via border-radius:inherit instead, so clipping is not needed. */ .sorte-card{ position:relative; background:#fff;border-radius:26px;padding:52px 34px 42px;text-align:center; box-shadow:0 20px 40px -20px rgba(23,15,43,.15); transition:transform .4s cubic-bezier(.22,.9,.3,1), box-shadow .4s ease; } /* A flavour-tinted wash that rises into the card on hover. Uses a pseudo-element so only opacity animates -- no repaint of the card's own background. */ .sorte-card::before{ content:"";position:absolute;inset:0;z-index:0; border-radius:inherit; background:linear-gradient(180deg, var(--tint, rgba(255,138,61,.16)), transparent 62%); opacity:0;transition:opacity .4s ease; pointer-events:none; } .sorte-card > *{position:relative;z-index:1;} .sorte-card:hover{transform:translateY(-12px);box-shadow:0 34px 60px -18px rgba(23,15,43,.26);} .sorte-card:hover::before{opacity:1;} .sorte-card[data-flavor="mojito"]{--tint:rgba(139,195,74,.22);} .sorte-card[data-flavor="lemon"]{--tint:rgba(255,179,71,.24);} .sorte-card[data-flavor="berry"]{--tint:rgba(232,90,155,.20);} .sorte-bottle{position:relative;width:112px;margin:0 auto 22px;} /* Carbonation burst at the bottle mouth. The anchor is a zero-size point at the neck (all three caps centre on ~50% and are ~5.2% of the bottle tall, so 5.5% lands on the opening); children are positioned off that point, which keeps the maths out of the animation code. Sits below the cap, above the bottle. */ .sorte-fizz{ position:absolute;left:50%;top:5.5%; width:0;height:0;z-index:2;pointer-events:none; } /* Tinted per flavour, NOT white. The card behind it is white, so white foam was simply invisible -- and coloured spray reads as the drink itself, which is more on-brand than generic foam anyway. */ .sorte-card[data-flavor="mojito"]{--fizz:#6ba32f;} .sorte-card[data-flavor="lemon"]{--fizz:#e0921e;} .sorte-card[data-flavor="berry"]{--fizz:#d63c86;} /* Deliberately weak in the centre and fading early: a dense blob read as a coloured ball stuck on the neck rather than spray coming out of it. */ .fizz-puff{ position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--fizz) 22%, transparent) 0%, color-mix(in srgb, var(--fizz) 34%, transparent) 38%, transparent 68%); opacity:0; will-change:transform,opacity; } .sorte-fizz i{ position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%; background:var(--fizz); box-shadow:0 0 6px color-mix(in srgb, var(--fizz) 60%, transparent); opacity:0; will-change:transform,opacity; } /* The crown cap, put back exactly where it was cut from the photo. Percentages mean it stays aligned no matter what size the bottle renders at. */ .sorte-cap{ position:absolute; left:var(--cap-l);top:var(--cap-t);width:var(--cap-w); height:auto;z-index:3; transform-origin:50% 100%; will-change:transform; pointer-events:none; } .sorte-card[data-flavor="mojito"] .bottle-shine{-webkit-mask-image:url(../assets/bottle-mojito-open.webp);mask-image:url(../assets/bottle-mojito-open.webp);} .sorte-card[data-flavor="lemon"] .bottle-shine{-webkit-mask-image:url(../assets/bottle-lemon-open.webp);mask-image:url(../assets/bottle-lemon-open.webp);animation-delay:-2.3s;} .sorte-card[data-flavor="berry"] .bottle-shine{-webkit-mask-image:url(../assets/bottle-berry-open.webp);mask-image:url(../assets/bottle-berry-open.webp);animation-delay:-4.6s;} /* :not(.sorte-cap) matters. The cap is an in here too, and a CSS transition on transform would re-target on every GSAP frame -- the pop would never actually travel. GSAP must own the cap's transform outright. */ .sorte-bottle img:not(.sorte-cap){ width:100%;height:auto;display:block;filter:drop-shadow(0 10px 14px rgba(23,15,43,.25)); transition:transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin:50% 100%; } .sorte-card:hover .sorte-bottle img:not(.sorte-cap){transform:scale(1.1) translateY(-6px);} /* Oswald here too, so the flavour names read as the same family as the section headlines and the bottle lettering instead of a second, unrelated voice. */ .sorte-card h3{ margin:0 0 8px;font-size:clamp(1.5rem,1.9vw,1.85rem);font-weight:500; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em; } .sorte-tagline{ margin:0 0 14px !important;font-family:var(--font-heading);font-weight:700; font-size:.9rem;letter-spacing:.05em;text-transform:uppercase; } .sorte-card p{margin:0;color:rgba(23,15,43,.7);line-height:1.62;font-size:1.02rem;} .sorte-tags{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;} .sorte-tags li{ background:rgba(23,15,43,.06);border-radius:999px;padding:7px 15px; font-size:.84rem;font-weight:600;font-family:var(--font-heading);color:var(--ink); transition:transform .3s ease, background .3s ease; } .sorte-card:hover .sorte-tags li{background:rgba(23,15,43,.09);} /* .45 alpha measured only 3.0:1 against white -- below the 4.5:1 WCAG AA minimum for text this size. .62 measures 5.2:1 and still reads as secondary. */ .sorte-spec{margin-top:20px !important;font-size:.86rem !important;color:rgba(23,15,43,.62) !important;letter-spacing:.03em;} .sorte-card[data-flavor="mojito"] h3, .sorte-card[data-flavor="mojito"] .sorte-tagline{color:var(--mojito-text);} .sorte-card[data-flavor="lemon"] h3, .sorte-card[data-flavor="lemon"] .sorte-tagline{color:var(--lemon-text);} .sorte-card[data-flavor="berry"] h3, .sorte-card[data-flavor="berry"] .sorte-tagline{color:var(--berry-text);} /* ===== Story (the animated dusk scene) ===== */ .story{margin-top:-2px;padding:100px 0;background:linear-gradient(180deg,var(--paper),#fff2e0);overflow:hidden;} /* Dusk sky: dark overhead, warm at the horizon. Two reasons it runs this way round rather than dark-at-the-bottom. The palms stand on the lower edge, so they need the bright band there to read as silhouettes at all -- against dark purple they simply vanished. And the Vertrieb band below opens on cream, so ending warm removes what was otherwise a hard cut between the two. The short ramp in the first 13% is what carries it out of the cream the Sorten section ends on. */ .story--showcase{ position:relative;isolation:isolate; min-height:min(96vh,880px); display:flex;align-items:center; padding:clamp(90px,11vh,140px) 0 clamp(80px,10vh,130px); /* clip statt hidden, plus Rand: die Lemon-Flasche ist im Ruhezustand nur ~35px von der Sektionsoberkante entfernt, und auf ihr stapeln sich ZWEI Vergroesserungen -- der Scroll-Zoom der Gruppe (bis 1.16) und der Hover der einzelnen Flasche (1.16). Beide wachsen wegen transform-origin:50% 100% nach OBEN. Gemessen 1440x900: 114px Ueberstand ueber die Oberkante, und schon ohne Hover lag die Kappe bei vollem Zoom 2,5px im Schnitt. overflow-clip-margin laesst genau diesen Ueberstand durch, ohne die Sektion sonst zu oeffnen. Kein overflow:visible, sonst laufen Sonnenstrahl und Koerner seitlich aus der Seite. */ overflow:clip; overflow-clip-margin:180px; background:linear-gradient(180deg, #fff2e0 0%, #b8618f 8%, var(--purple-deep) 20%, var(--purple) 38%, var(--magenta) 58%, var(--orange) 80%, var(--cream) 95%, #fff2e0 100%); } /* .hero-bg hatte bisher UEBERHAUPT keine Regel -- ein Div ohne Stil. Seine Kinder (Koerner inset:-10%, Sonnenstrahl top:-10%/right:-10%/height:120%, Strahlen inset:-15% 0 0) positionierten sich deshalb direkt gegen die Sektion und ragten oben und rechts hinaus. Das einzige, was sie bisher zurueckhielt, war das overflow:hidden der Sektion -- genau das, was der Flasche im Weg stand. Also bekommt der Hintergrund jetzt seinen eigenen Beschnitt auf exakt dem Sektionsrechteck. Der Deko-Beschnitt bleibt pixelgleich, die Flasche kommt frei. z-index:0 statt auto ist Absicht: die Kinder standen auf z-index:1 gleichauf mit .palm-layer--back und wurden nur durch die DOM-Reihenfolge uebermalt. Der eigene Stapelkontext auf Ebene 0 haelt sie unter beiden Palmenlagen -- gleiche Optik. */ .story--showcase .hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;} .story-bg{position:absolute;inset:0;z-index:0;overflow:hidden;} .story-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;} /* Copy left, product right. The bottles come first in the markup so that on a phone, where the grid collapses, the product is the thing you meet first. */ .story--showcase .story-inner{ grid-template-columns:1fr minmax(0,.92fr); align-items:center; z-index:4; } .story--showcase .story-text{grid-column:1;grid-row:1;} .story--showcase .showcase-bottles{grid-column:2;grid-row:1;} .story-text .eyebrow, .story-text .section-title{text-align:left;} .story-text p{color:rgba(23,15,43,.72);line-height:1.7;font-size:1.02rem;} /* Copy sits on the gradient, so it goes light with a shadow for guaranteed contrast. */ .story--showcase .story-text .section-title{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.45);} /* Amber, not ink. The copy column sits on the dark purple part of the sky here, where the dark eyebrow was effectively invisible. */ .story--showcase .story-text .eyebrow{color:var(--amber);text-shadow:0 2px 10px rgba(20,6,40,.5);} .story--showcase .story-text p{color:rgba(255,255,255,.94);text-shadow:0 2px 14px rgba(60,20,10,.55);} .story--showcase .story-text strong{color:#fff;} .story--showcase .story-benefits li{color:#fff;text-shadow:0 2px 10px rgba(60,20,10,.55);} /* The bottles ride the same custom properties the pointer and scroll parallax write, so one set of tweens drives both. transform-origin at the base keeps them planted while they grow. */ .showcase-bottles{ /* Declared, not just defaulted inside var(). GSAP reads a custom property's start value off the computed style, and an undeclared one comes back empty -- which it parses as 0, so the bottles began the scrub at scale 0 and were invisible until you had scrolled well into the band. */ --zoom-scale:1; --zoom-y:0px; --spread:0px; --tilt:0deg; --px:0px; --py:0px; display:flex;align-items:flex-end;justify-content:center; gap:clamp(6px,1.6vw,26px); transform-origin:50% 100%; transform:translate(var(--px), var(--py)) scale(var(--zoom-scale)) translateY(var(--zoom-y)); will-change:transform; } /* Sized off the viewport WIDTH here, not its height: this band is no longer a full-screen hero, so height-based sizing left them tiny on wide short displays. */ .showcase-bottles .bottle{width:auto;} .showcase-bottles .bottle--mojito{width:clamp(58px,7.6vw,112px);} .showcase-bottles .bottle--lemon{width:clamp(88px,11.6vw,168px);} .showcase-bottles .bottle--berry{width:clamp(72px,9.4vw,136px);} .showcase-bottles .fruit-badge{width:clamp(52px,6.2vw,94px);} .story-benefits{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;} .story-benefits li{display:flex;align-items:center;gap:14px;font-weight:700;color:var(--ink);font-size:1.02rem;} .story-benefits-icon{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%;flex-shrink:0;color:#fff; box-shadow:0 8px 16px -6px rgba(23,15,43,.35); } .story-benefits-icon svg{width:22px;height:22px;fill:currentColor;} .story-benefits-icon--sun{background:linear-gradient(140deg,var(--amber),var(--orange));} .story-benefits-icon--palm{background:linear-gradient(140deg,var(--mojito),var(--mojito-dark));} .story-benefits-icon--fiesta{background:linear-gradient(140deg,var(--pink),var(--berry-dark));} /* ===== Vertrieb ===== */ .vertrieb{ margin-top:-2px; padding:110px 0;text-align:center; background:linear-gradient(180deg,#fff2e0 0%,var(--orange) 24%,var(--magenta) 58%,var(--purple-deep) 100%); } /* The amber eyebrow read as muddy against the orange band it sits on -- white with reduced opacity separates cleanly at every point of the gradient. */ .vertrieb .eyebrow--light{color:rgba(255,255,255,.82);letter-spacing:.2em;} .vertrieb-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px;} .vertrieb-actions .btn{padding:17px 36px;font-size:clamp(.95rem,1.05vw,1.08rem);} .vertrieb-actions .btn--ghost{ color:#fff;border-color:rgba(255,255,255,.6); background:rgba(40,10,60,.2); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .vertrieb-actions .btn--ghost:hover{border-color:#fff;background:rgba(40,10,60,.34);} /* Replaces the cramped one-line "Firma ยท mail" run-on: company name and address on their own lines, with a proper divider, so it reads as a contact block. */ .vertrieb-contact{ margin-top:38px;padding-top:26px; border-top:1px solid rgba(255,255,255,.22); max-width:520px;margin-inline:auto; display:flex;flex-direction:column;align-items:center;gap:7px; font-family:var(--font-heading); } .vertrieb-contact-company{ font-size:.9rem;font-weight:600;letter-spacing:.02em; color:rgba(255,255,255,.9); } .vertrieb-contact-mail{ font-size:.95rem;font-weight:500;color:#fff; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px; transition:border-color .25s ease; } .vertrieb-contact-mail:hover{border-color:#fff;} /* ===== Footer ===== */ .site-footer{margin-top:-2px;background:linear-gradient(180deg,var(--purple-deep),var(--ink));color:rgba(255,255,255,.7);padding:40px 0;} .footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;} /* .logo hard-codes color:var(--ink) for the header, and the footer inherited it -- near black lettering on the near black footer gradient, which measured about 1.3:1 and was effectively invisible. The footer wordmark has to opt out of that. */ .footer-inner .logo{margin-right:0;color:#fff;} .footer-note{font-size:.82rem;margin:0;flex:1;text-align:center;} .footer-links{display:flex;gap:18px;font-size:.82rem;} .footer-links a:hover{color:#fff;} /* Deltatec credit strip, matching the "Umgesetzt von [Logo]" pattern. */ /* Ohne Trennlinie (Kundenwunsch). Der Abstand allein setzt die Zeile ab. */ .footer-credit{ margin-top:32px;padding-top:22px; display:flex;justify-content:center; } .footer-credit-link{ display:inline-flex;align-items:center;gap:16px; font-family:var(--font-heading);font-size:.82rem;font-weight:500; letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .25s ease, opacity .25s ease; } /* Kleinere Box als vorher, aber optisch groesseres Logo: die Datei ist auf den Schriftzug beschnitten (der Zierstrich darunter ist raus), also fuellt der Schriftzug jetzt 84% der Bildhoehe statt 52%. */ .footer-credit-link img{ height:clamp(26px,2.6vw,36px);width:auto;display:block; opacity:.85;transition:opacity .25s ease; } .footer-credit-link:hover{color:rgba(255,255,255,.9);} .footer-credit-link:hover img{opacity:1;} /* ===== Legal pages (Impressum, Datenschutz) ===== */ .legal{padding:70px 0 90px;background:var(--paper);} .legal-inner{max-width:760px;} .legal .eyebrow, .legal .section-title{text-align:left;} .legal .section-title{margin-bottom:34px;} .legal h2{ font-family:var(--font-heading);font-size:1.05rem;font-weight:700; color:var(--ink);margin:34px 0 8px; } .legal p{color:rgba(23,15,43,.75);line-height:1.72;margin:0 0 4px;font-size:1rem;} .legal a{color:var(--berry-dark);text-decoration:underline;text-underline-offset:2px;} .legal a:hover{color:var(--berry);} .legal-back{margin-top:48px;padding-top:26px;border-top:1px solid rgba(23,15,43,.12);} .legal-back a{font-family:var(--font-heading);font-weight:600;text-decoration:none;} /* ===== Reveal on scroll ===== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;} .reveal.is-visible{opacity:1;transform:translateY(0);} /* ===== Responsive ===== */ /* Short viewports (laptops, windowed browsers): the hero copy is vertically centred while the bottles are pinned to the bottom, so on a low window the two collide. Pull the copy up and ease off the type scale instead of letting the headline land on the product. min-width:761px is load-bearing, not cosmetic. These two blocks were written for the old full-screen hero, where the copy was vertically centred and a negative margin only nudged it back up towards the middle. The copy is now position:absolute at top:0 of the banner, so the same -7vh/-10vh drags it ABOVE the banner's top edge -- and .hero has overflow:hidden, which slices the kicker and the first line of the headline clean off. Every phone held upright is under 820px tall, so on mobile that was not an edge case, it was the normal view: the customer's "abgeschnitten". */ @media (min-width:761px) and (max-height:820px){ .hero-content{padding-top:0;margin-top:-7vh;} .hero-title{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:14px;} .hero-subtitle{font-size:clamp(1rem,1.3vw,1.2rem);margin-bottom:16px;} .hero-actions .btn{padding:14px 30px;} } @media (min-width:761px) and (max-height:660px){ .hero-content{margin-top:-10vh;} .hero-title{font-size:clamp(1.8rem,4.2vw,2.7rem);} .hero-kicker{margin-bottom:6px;} } @media (max-width:900px){ /* The Story band collapsing to one column is written with the SAME specificity as the two-column rule that sets it up (.story--showcase .story-inner, two classes). A plain .story-inner here is only one class, and specificity beats source order no matter how late the media query sits -- so the old rule never actually fired and the band stayed two columns all the way down to a phone. Splitting roughly 1 : 0.92 across a 390px screen leaves each column about 150px wide, which is where the "klobig und gequetscht" came from. The explicit grid-column/grid-row placements have to be undone for the same reason. */ .story--showcase .story-inner{grid-template-columns:1fr;gap:34px;text-align:center;} /* Bottles above the copy: the product is what the visitor should meet first, which is also why they come first in the markup. */ .story--showcase .showcase-bottles{grid-column:1;grid-row:1;} .story--showcase .story-text{grid-column:1;grid-row:2;} .story-inner{grid-template-columns:1fr;text-align:center;} .story-text .eyebrow,.story-text .section-title{text-align:center;} .sorten-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;} .palm-wrap{width:26vw;} } @media (max-width:760px){ /* The single worst bug on mobile lived here. The panel used to be parked at right:-340px. A position:fixed box resolves against the viewport, not against a scrolling ancestor, so the body's overflow-x:hidden never clipped it and the document measured 340px wider than the phone -- verified: the page really could be dragged 340px sideways. Once dragged, every centred element sat visibly off to one side with its right-hand end out of view. That is the reported "versetzt statt mittig und abgeschnitten". Swapping right:-340px for translateX(100%) alone does NOT fix it: a transform still contributes to scrollable overflow (measured: 320px, barely better). The panel has to be genuinely absent when closed, so it is display:none via .is-stowed, which JS removes just before opening and re-applies once the slide-out has finished. Closed: no box, no overflow. Open: transform back to 0, fully inside the viewport, still no overflow. .is-stowed is defined only inside this media query on purpose -- JS can leave the class on at any width and it simply does nothing on desktop, where the nav must always be visible. */ .main-nav{ position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(78vw,320px); background:var(--ink);display:flex;flex-direction:column;align-items:flex-start; padding:100px 32px 40px;gap:26px; transform:translateX(100%); transition:transform .35s ease; z-index:99; } .main-nav.is-open{transform:translateX(0);} .main-nav.is-stowed{display:none;} /* The panel is a SIBLING of the toggle inside the header, and the header's own z-index:100 opens a stacking context that both of them live in -- so the panel's z-index:99 beat the toggle's auto and painted straight over it. The open panel starts at x=86 on a 390px screen and the burger sits at x=355, i.e. underneath it: verified with elementFromPoint, a tap on the X hit the NAV, not the button, so the menu could not be closed again by the control that opened it. Raising the toggle above the panel is the whole fix. */ .nav-toggle{position:relative;z-index:100;} .main-nav a{color:#fff;font-size:1.1rem;} .header-cta{display:none;} /* The Salesfolder download, reachable on a phone. Styled as a pill so it reads as the action it is rather than a fourth section link, and separated by a hairline. */ .main-nav .nav-cta{ display:inline-flex;align-items:center;gap:6px; margin-top:22px;padding:13px 22px;border-radius:999px; background:linear-gradient(135deg,var(--orange),var(--berry)); color:#fff;font-size:.95rem; } .main-nav .nav-cta::after{content:none;} .nav-toggle{display:flex;} /* White while open. The bars are var(--ink) and the open panel is var(--ink) too, so the X was drawn in exactly the panel's own colour -- measured contrast 1.00:1, i.e. invisible. The z-index fix above made the control tappable; this makes it findable. Same defect class as the footer logo. */ .nav-toggle.is-open span{background:#fff;} .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle.is-open span:nth-child(2){opacity:0;} .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* --- Rhythm --- Every section was carrying its desktop padding unchanged. 110px of air above and below a headline is generous on a 1440px monitor and simply wastes half a phone screen, which is the other half of "klobig". */ .container{padding-inline:20px;} .site-header{padding:11px 0;} .site-header.is-scrolled{padding:8px 0;} .sorten{padding:52px 0 68px;} .story--showcase{min-height:auto;padding:64px 0 56px;} .vertrieb{padding:72px 0;} .site-footer{padding:34px 0;} .legal{padding:48px 0 62px;} .section-title{font-size:clamp(1.72rem,7.4vw,2.3rem);margin-bottom:14px;} .section-lead{font-size:1rem;line-height:1.62;margin-bottom:34px;} .sorten .section-lead{margin-bottom:30px;} .eyebrow{font-size:.76rem;letter-spacing:.14em;} /* --- Hero --- .hero--video .hero-title (two classes) outranks a bare .hero-title, so the old 10.5vw rule in here was dead code and the headline rendered at its 1.85rem floor -- small, and paired with the clipping above it read as "versetzt". Matching the original selector puts the size back under this block's control. */ /* Vertical placement of the hero copy on phones (customer request: sit the headline further toward the middle instead of glued under the header). Scaled in vh, not a fixed px value: the banner itself is min(76vh,600px), so a fixed padding that looks centred on a 844px iPhone rides down onto the product on a 667px iPhone SE. The upper bound stops tall Androids from pushing the buttons off the bottles' clear area. See the max-height refinement further down for short phones. */ .hero-content{padding-top:clamp(30px,6.6vh,62px);margin-top:0;} .hero-kicker{font-size:.74rem;letter-spacing:.12em;margin-bottom:8px;} .hero--video .hero-title{font-size:clamp(1.95rem,8.6vw,2.9rem);margin-bottom:12px;} .hero--video .hero-subtitle{font-size:1rem;margin-bottom:18px;} /* Stacked and full width. Side by side, the two buttons wrapped anyway, and .btn is white-space:nowrap -- so on a narrow phone "Jetzt entdecken" was pushing past the container edge and getting clipped by the body's overflow-x. */ .hero-actions{flex-direction:column;align-items:center;gap:10px;margin-bottom:14px;} .hero-actions .btn{width:100%;max-width:300px;padding:15px 22px;font-size:.92rem;} .palm-wrap{width:32vw;opacity:.85;} .hero-bottles{gap:4px;} /* --- Sorten cards --- 34px of side padding on a card that is itself only ~350px wide spends a fifth of the screen on nothing. */ .sorten-grid{gap:20px;} .sorten-shop{margin-top:36px;} .sorten-shop p{font-size:1rem;margin-bottom:16px;} .sorten-shop-btn{padding:15px 26px;font-size:.94rem;} .sorte-card{padding:38px 22px 32px;border-radius:22px;} .sorte-bottle{width:128px;margin-bottom:18px;} .sorte-card h3{font-size:1.45rem;} .sorte-card p{font-size:.97rem;line-height:1.58;} .sorte-tagline{font-size:.84rem;} .sorte-tags{gap:7px;margin-top:16px;} .sorte-tags li{font-size:.78rem;padding:6px 12px;} .sorte-spec{margin-top:16px !important;} /* --- Story --- Now that the band is genuinely one column, the bottles can have real size: they were sized off viewport WIDTH for wide-short desktops, which on a phone bottomed them out at their 58-88px minimums. */ /* Budget for the whole row: the scroll timeline still scales it up and fans it apart on top of these widths, so the base has to leave room for that. Measured at 390px, the berry's fruit was landing 34px past the right edge and the mojito bottle 3px past the left. 18+26+21vw plus two 2vw gaps is 69vw of base width; the reduced mobile zoom in main.js takes it to about 305px inside a 358px column, which leaves the fruit somewhere to go. */ .showcase-bottles{gap:2vw;} .showcase-bottles .bottle--mojito{width:18vw;} .showcase-bottles .bottle--lemon{width:26vw;} .showcase-bottles .bottle--berry{width:21vw;} .showcase-bottles .fruit-badge{width:14vw;} /* Tucked closer to their bottles than on desktop. The outer two are the ones that decide the row's real width, so they get pulled in hardest. */ .bottle--mojito .fruit-badge{right:-38%;} .bottle--lemon .fruit-badge{right:-24%;} .bottle--berry .fruit-badge{right:-22%;} .story-text p{font-size:.99rem;line-height:1.65;} .story-benefits{gap:13px;margin-top:22px;} /* The list is left-aligned flex inside a centred column -- without this the three rows sit hard against the left edge under a centred headline. */ .story-benefits li{justify-content:center;font-size:.96rem;gap:11px;} .story-benefits-icon{width:36px;height:36px;} .story-benefits-icon svg{width:19px;height:19px;} /* --- Vertrieb --- */ .vertrieb-actions{flex-direction:column;align-items:center;gap:11px;margin-top:20px;} .vertrieb-actions .btn{width:100%;max-width:330px;padding:15px 18px;font-size:.9rem;} .vertrieb-contact{margin-top:28px;padding-top:20px;} /* --- Footer --- space-between with a flex:1 centred note squeezes the three parts into slivers as soon as they share one line. Stacked, each gets the full width. */ .footer-inner{flex-direction:column;text-align:center;gap:14px;} .footer-note{flex:none;font-size:.78rem;} .footer-credit{margin-top:24px;padding-top:18px;} } @media (max-width:520px){ .palm-wrap{width:30vw;opacity:.7;} .palm-wrap--left{left:min(2vw,14px);} .palm-wrap--right{right:min(2vw,14px);} } /* Small phones (iPhone SE / mini class). Mostly a last step down on type and padding so the condensed headline still fits on one line without hyphenating. */ @media (max-width:400px){ /* padding-inline, NOT the `padding:0 16px` shorthand. .hero-content also carries .container, and both selectors are a single class, so they have equal specificity -- this block sits further down the file and therefore won a shorthand fight it was never meant to enter, resetting the hero's padding-top to 0 on every phone up to 400px wide (iPhone SE, iPhone 14) while a 412px Android kept its padding. That is why the headline sat glued to the header. */ .container{padding-inline:16px;} .hero--video .hero-title{font-size:clamp(1.72rem,8.2vw,2.4rem);} .section-title{font-size:1.6rem;} .sorte-card{padding:34px 18px 28px;} .sorte-bottle{width:112px;} .sorte-tags li{font-size:.75rem;padding:6px 11px;} } /* Short phones (iPhone SE class, ~667px tall). The banner is min(76vh,600px), so here it is only ~507px while the copy block is a near-constant ~266px -- it therefore eats 53% of the band instead of 44%, and the vh-scaled padding above put the buttons at 61% of the banner versus 54% on an iPhone 14. Rather than pull the copy back up towards the header (which is the thing the customer asked to fix), tighten the block's own internal spacing so it can sit low AND keep clear of the product. Placed after the 400px block so it wins on source order for the SE, which matches both queries. */ @media (max-width:760px) and (max-height:700px){ .hero-content{padding-top:clamp(24px,5vh,40px);} .hero-kicker{margin-bottom:6px;} .hero--video .hero-title{margin-bottom:10px;} .hero--video .hero-subtitle{margin-bottom:14px;} .hero-actions{gap:9px;margin-bottom:12px;} .hero-actions .btn{padding:13px 20px;font-size:.9rem;} }