/* Details für die Startseite: Schmetterling, Tropfen, Kapitel-Leiste, Randnotizen, Herkunftssiegel, Körnung.
   Ergänzt liquid-glass.css, ersetzt nichts. Alles ist Kür – ohne diese Datei bleibt die Seite lesbar. */

/* Feine Körnung nimmt dem Dunkel das Digitale – wie mattes Glas. */
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;animation:grain-shift 1.4s steps(4) infinite}
@keyframes grain-shift{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(2%,2%)}}

/* Der Schmetterling: ein Schemen im Bühnenhintergrund – hinter den Flaschen, klein, fast durchsichtig, langsam. */
.butterfly-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.butterfly{position:absolute;left:0;top:0;width:44px;height:auto;color:#cfeee7;opacity:.32;pointer-events:none;filter:blur(.3px) drop-shadow(0 0 8px rgba(182,245,231,.25));will-change:transform}
.butterfly__wing{transform-origin:336px 208px;transform-box:view-box;will-change:transform;fill:currentColor}
.butterfly__shadow{display:none}
@media(max-width:680px){.butterfly{width:32px}}
@media(prefers-reduced-motion:reduce){.butterfly{opacity:.2}}

/* Die Bühne: dunkles nasses Glas, Lichtkegel von oben, Originalflaschen mit Spiegelung. */
.hero-ambient{background-image:
    linear-gradient(100deg,#050b0ed9 0%,#050b0ec2 26%,#060d1094 46%,#060d1066 66%,#060d1040 100%),
    linear-gradient(180deg,#060c0f66 0%,#060c0f00 40%,#060c0fbb 86%,#060c0f 100%),
    url(../assets/hero-bg-glas.webp);
  background-size:cover,cover,cover;background-position:center,center,8% 62%;background-repeat:no-repeat}
.hero-frame{position:absolute;inset:0 0 40px 3%;border-radius:30px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0a161b 0%,#0c1a20 55%,#07111500 100%),#08141a;
  box-shadow:0 40px 90px -40px #000,inset 0 1px 0 rgba(240,255,255,.08);border:1px solid rgba(193,224,230,.12)}
.stage-floor{position:absolute;left:-10%;right:-10%;bottom:0;height:40%;z-index:1;
  background:radial-gradient(ellipse at 50% 100%,#1c4249 0%,#0e2228 45%,transparent 75%),linear-gradient(180deg,transparent,#0b191f 40%,#08141a);
  mask-image:linear-gradient(180deg,transparent,#000 30%)}
.stage-floor::before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,#adf5ff06 1px,transparent 1px),linear-gradient(#adf5ff05 1px,transparent 1px);background-size:64px 64px;transform:perspective(500px) rotateX(62deg);transform-origin:50% 0;opacity:.9}
.stage-floor::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#b6f5e755 30%,#b6f5e755 70%,transparent)}
.stage-light{position:absolute;left:20%;right:20%;top:-30%;height:100%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(182,245,231,.16),rgba(120,200,190,.06) 40%,transparent 70%);animation:light-sway 14s ease-in-out infinite alternate}
@keyframes light-sway{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.hero-frame .water-canvas{inset:auto 0 0 0;width:100%;height:55%;z-index:2;opacity:.6;mix-blend-mode:screen}
.hero-products{position:absolute;left:0;right:0;bottom:19%;top:auto;height:auto;z-index:5;display:flex;justify-content:center;align-items:flex-end;gap:6%;transform-style:preserve-3d}
.bottle{position:relative;display:grid;justify-items:center}
.bottle--large{order:2}
.bottle--small{order:1;margin-bottom:0}
.bottle .hero-bottle{position:static;width:auto;max-height:none;transform:none;animation:none;filter:drop-shadow(-10px 22px 18px #000c)}
.bottle--large .hero-bottle{height:300px}.bottle--small .hero-bottle{height:190px}
.bottle__mirror{width:auto;margin-top:-2px;height:auto;max-height:110px;transform:scaleY(-1);opacity:.28;filter:blur(1.2px) saturate(.8);
  mask-image:linear-gradient(180deg,transparent 5%,#000 90%);-webkit-mask-image:linear-gradient(180deg,transparent 5%,#000 90%)}
.bottle--large{animation:bottle-drift 9s ease-in-out infinite}.bottle--small{animation:bottle-drift-small 8s ease-in-out infinite}
@keyframes bottle-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bottle-drift-small{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero-frame .droplets{z-index:6;mask-image:radial-gradient(ellipse at 50% 40%,#000 45%,transparent 90%)}
.fog-glass{position:absolute;inset:0;z-index:7;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
.fog-hint{position:absolute;z-index:8;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.08em;color:#e6f6f4;pointer-events:none;
  padding:10px 16px;border-radius:30px;background:#0b161ccc;border:1px solid #b6f5e733;transition:opacity .8s,transform .8s var(--ease);animation:hint-pulse 2.4s ease-in-out infinite}
.fog-hint__icon{font-size:16px;line-height:1;animation:hint-hand 1.8s ease-in-out infinite}
@keyframes hint-hand{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes hint-pulse{0%,100%{box-shadow:0 0 0 0 #b6f5e733}50%{box-shadow:0 0 0 8px #b6f5e700}}
.fog-hint.is-done{opacity:0;transform:translate(-50%,-70%)}
.hero-frame .hero__visual-label{z-index:9;left:22px;top:20px;padding:7px 11px;border-radius:20px;background:#0b161cb8;color:#c6dcd8;border:1px solid #b6f5e71f}
.hero-caption{position:absolute;z-index:9;left:28px;right:28px;bottom:26px;margin:0;display:flex;gap:14px;align-items:flex-start;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:19px;line-height:1.35;color:#dfeeee;max-width:380px;text-wrap:balance;pointer-events:none}
.hero-caption__line{flex:none;width:28px;height:1px;background:var(--accent);margin-top:12px;box-shadow:0 0 10px var(--accent)}
.floating-note{z-index:10;right:0;left:auto;top:-22px;bottom:auto;min-width:0}
.hero__visual{height:610px;width:100%}
.water-orbit,.visual-caption{display:none}
@media(min-width:1600px){.hero__visual{height:650px}.bottle--large .hero-bottle{height:330px}.bottle--small .hero-bottle{height:210px}}
@media(max-width:1150px){.hero__visual{width:100%}.hero-frame{inset:0 0 40px 0}.hero-caption{font-size:16px}.floating-note{right:0}}
@media(max-width:960px){.hero__visual{height:520px}.bottle--large .hero-bottle{height:250px}.bottle--small .hero-bottle{height:160px}.hero-caption{font-size:15px;bottom:20px;left:20px;max-width:260px}.hero-frame .hero__visual-label{left:20px;top:18px}.floating-note{top:-16px}}
@media(max-width:680px){.hero__visual{height:460px;width:100%}.hero-frame{inset:0 0 30px 0;border-radius:22px}.hero-caption{font-size:14px;max-width:220px;bottom:18px;left:18px}.hero-frame .hero__visual-label{font-size:7px}
  .hero-products{bottom:20%;gap:5%}.bottle--large .hero-bottle{height:220px}.bottle--small .hero-bottle{height:140px}.bottle__mirror{max-height:70px}.floating-note{top:-14px;right:0;max-width:70%;padding:10px 12px}.fog-hint{display:none}}
@media(max-width:370px){.hero__visual{height:420px}}

/* Tropfen auf dem Hero-Glas: Linse mit Glanzpunkt, gleiten langsam ab. */
.droplets{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse at 66% 48%,#000 30%,transparent 82%)}
.droplets span{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s) * 1.15);border-radius:46% 46% 54% 54%/58% 58% 42% 42%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,1) 0 10%,rgba(255,255,255,.3) 18%,rgba(182,245,231,.10) 42%,rgba(182,245,231,.05) 62%,rgba(224,255,250,.7) 100%);
  box-shadow:inset 0 0 0 1px rgba(224,255,250,.55),inset 0 -2px 4px rgba(255,255,255,.4),0 0 10px rgba(182,245,231,.25),0 4px 10px rgba(0,0,0,.4);
  backdrop-filter:blur(1.5px) brightness(1.35) saturate(1.2);-webkit-backdrop-filter:blur(1.5px) brightness(1.35) saturate(1.2);opacity:0;
  animation:drop-life var(--t) var(--d) ease-in infinite}
@keyframes drop-life{0%{opacity:0;transform:translateY(0) scale(.6)}8%{opacity:.9;transform:translateY(0) scale(1)}70%{opacity:.9;transform:translateY(calc(var(--slide) * .35)) scaleY(1.06)}92%{opacity:.4;transform:translateY(var(--slide)) scaleY(1.35) scaleX(.85)}100%{opacity:0;transform:translateY(calc(var(--slide) * 1.15)) scale(.4)}}
.motion-paused .droplets span{animation-play-state:paused;opacity:.7}

/* Überschrift erscheint wie freigewischt – ein Streifen klarer Sicht zieht über das Wort. */
.wipe-in>span,.wipe-in>em{position:relative;clip-path:inset(0 100% 0 0);animation:wipe .95s var(--ease) forwards}
.wipe-in>span:nth-child(2){animation-delay:.18s}.wipe-in>em{animation-delay:.36s}
@keyframes wipe{to{clip-path:inset(0 -2% 0 0)}}
.motion-paused .wipe-in>span,.motion-paused .wipe-in>em{clip-path:none;animation:none}

/* Kapitel-Leiste am rechten Rand: Nummern, aktive Zeile hell, Fortschrittslinie. */
.chapter-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:14px;justify-items:end;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7a959d}
.chapter-rail__label{font-size:7px;letter-spacing:.3em;color:#5f7a82;writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:6px}
.chapter-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.chapter-rail a{display:flex;align-items:center;gap:10px;min-height:28px;padding:2px 0;color:inherit;transition:color .35s}
.chapter-rail a span{font-variant-numeric:tabular-nums;font-size:8px;opacity:.7}
.chapter-rail a em{font-style:normal;font-size:0;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease),font-size .2s}
.chapter-rail:hover a em,.chapter-rail a[aria-current] em{font-size:9px;max-width:140px}
.chapter-rail a[aria-current]{color:var(--accent)}
.chapter-rail a::after{content:'';width:14px;height:1px;background:currentColor;opacity:.35;transition:width .4s var(--ease),opacity .4s}
.chapter-rail a[aria-current]::after{width:26px;opacity:1}
.chapter-rail__track{position:relative;width:1px;height:70px;background:#ffffff14;justify-self:end;margin-right:6px}
.chapter-rail__fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(#b6f5e700,var(--accent));transition:height .2s linear}
@media(max-width:1499px){.chapter-rail{display:none}}

/* Randnotizen: Kapitelnummer senkrecht am linken Rand des Abschnitts, wie in einem gedruckten Katalog. */
.container{position:relative}
.marginal{position:absolute;left:-52px;top:6px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:.32em;text-transform:uppercase;color:#5f7a82;white-space:nowrap;pointer-events:none}
.marginal::before{content:'';display:inline-block;width:1px;height:38px;background:linear-gradient(#5f7a8200,#5f7a82);margin-bottom:12px;vertical-align:middle}
@media(max-width:1150px){.marginal{display:none}}

/* Der Ablauf: eine Linie verbindet die Schritte und füllt sich beim Lesen. */
.process-list{position:relative;--fill:0%}
.process-list::before,.process-list::after{content:'';position:absolute;left:15px;top:14px;bottom:20px;width:1px}
.process-list::before{background:#ffffff12}
.process-list::after{background:linear-gradient(var(--accent),#b6f5e7aa);height:var(--fill);bottom:auto;max-height:calc(100% - 34px);box-shadow:0 0 12px #b6f5e766}
.process-step>span:first-child{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;margin-top:-2px;border-radius:50%;background:#0b161c;border:1px solid #b6f5e733;font-size:9px;transition:border-color .5s,box-shadow .5s}
.process-step.is-visible>span:first-child{border-color:var(--accent);box-shadow:0 0 0 4px #b6f5e712}
@media(max-width:680px){.process-list::before,.process-list::after{left:11px}.process-step>span:first-child{width:23px;height:23px;font-size:8px}}

/* Herkunftssiegel: kreisender Text um den Logo-Schmetterling, Puls wie ein Sender. */
.origin-stamp{position:relative;width:170px;height:170px;margin-top:54px;color:#9fd9cd;display:grid;place-items:center}
.origin-stamp__ring{position:absolute;inset:0;width:100%;height:100%;animation:stamp-spin 60s linear infinite}
.origin-stamp__text{font-size:10.4px;letter-spacing:.2em;fill:currentColor;fill-opacity:.7;font-family:var(--font);font-weight:600}
.origin-stamp__mark{position:relative;width:78px;height:auto;filter:drop-shadow(0 0 12px rgba(182,245,231,.35))}
.origin-stamp__pulse{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);bottom:38px;right:44px;box-shadow:0 0 0 0 #b6f5e766;animation:pulse 2.6s ease-out infinite}
@keyframes stamp-spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #b6f5e766}70%{box-shadow:0 0 0 18px #b6f5e700}100%{box-shadow:0 0 0 0 #b6f5e700}}
.motion-paused .origin-stamp__ring,.motion-paused .origin-stamp__pulse{animation:none}
@media(max-width:680px){.origin-stamp{display:none}}

/* Fußzeile: Ortszeit als leises Lebenszeichen. */
.footer-time{display:inline-flex;gap:6px;align-items:center;color:#92abb3;font-size:10px;margin-left:26px;font-variant-numeric:tabular-nums}
.footer-time::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
@media(max-width:960px){.footer-time{margin-left:0}}

/* Knöpfe folgen dem Zeiger einen Hauch – magnetisch, nicht zappelig. */
.button{--mx:0px;--my:0px;translate:var(--mx) var(--my);transition:translate .35s var(--ease),transform .4s var(--ease),box-shadow .4s,border-color .4s}

/* Produktkarten: das große Wort im Bild wandert leicht gegen die Scrollrichtung – Tiefe ohne Bewegungsspektakel. */
.product-card__word{transition:transform .9s var(--ease)}
.product-card:hover .product-card__word{transform:translateX(10px)}
.product-card__visual::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 60%);transform:translateX(-120%);transition:transform 1.1s var(--ease);pointer-events:none}
.product-card:hover .product-card__visual::before{transform:translateX(120%)}

/* Zahlenleiste: Werte zählen beim ersten Erscheinen kurz hoch – dezent. */
.proof-item strong{display:inline-block;transition:transform .6s var(--ease),opacity .6s}
.proof-item.will-reveal strong{transform:translateY(6px);opacity:0}

/* Liste im Lösungsabschnitt: Pfeile ziehen nach, wenn die Zeile erscheint. */
.check-list li::before{transition:transform .5s var(--ease)}
.check-list li:hover::before{transform:translate(2px,-2px)}

/* Der Header bekommt bei Scroll eine hauchdünne Lichtkante. */
.site-header.is-scrolled::before{content:'';position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,#b6f5e755,transparent)}