.hero-nacht{--ease:cubic-bezier(.22, 1, .36, 1);background:var(--color-nacht);height:200vh;color:var(--color-elfenbein);position:relative}html:not(.js) .hero-nacht{height:auto}.hn-kleber{height:100svh;position:sticky;top:0;overflow:hidden}html:not(.js) .hn-kleber{min-height:100svh;position:relative}.hn-video{pointer-events:none;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000 22%,#000 55%);mask-image:linear-gradient(90deg,#0000 22%,#000 55%)}.hn-video img{object-fit:cover;object-position:75% center;opacity:.5;width:100%;height:100%;position:absolute;inset:0;transform:translate(12%)}@media (width<=767px){.hn-video{top:48%;-webkit-mask-image:linear-gradient(#0000 0%,#000 35%);mask-image:linear-gradient(#0000 0%,#000 35%)}.hn-video img{object-position:70% center;opacity:.45;transform:none}}.hn-nebel{pointer-events:none;position:absolute;inset:-20%}.hn-nebel i{width:var(--g);height:var(--g);background:var(--f);filter:blur(80px);opacity:.14;will-change:transform;border-radius:50%;position:absolute}.hn-text{z-index:20;max-width:560px;position:absolute;top:50%;left:clamp(16px,6vw,96px);transform:translateY(-50%)}.hn-zeile{letter-spacing:.22em;text-transform:uppercase;color:var(--color-gold);font-size:.75rem}.hero-nacht h1{letter-spacing:-.025em;color:var(--color-elfenbein);margin-top:18px;font-size:clamp(3rem,min(8.4vw,12.5vh),7.6rem);font-weight:340;line-height:.94}@media (width>=768px) and (height<=820px){.hn-unter,.hn-mischung,.hn-knoepfe{margin-top:18px}.hn-stand{display:none}}.hero-nacht h1 em{color:var(--color-gold);font-style:italic;font-weight:300}.hn-unter{color:var(--color-nacht-tinte);max-width:30em;margin-top:26px;font-size:1.06rem;line-height:1.65}.hn-knoepfe{margin-top:28px}.hn-stand{color:var(--color-nacht-tinte);margin-top:18px;font-size:.85rem}html.js .hn-ohne-js,html:not(.js) .hn-mit-js{display:none}.hn-mischung{margin-top:26px}.hn-mischung-titel{letter-spacing:.18em;text-transform:uppercase;color:var(--color-nacht-tinte);font-size:.75rem}.hn-plaetze{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.hn-platz{height:38px;color:var(--color-nacht-tinte);border:1px dashed #4d4036;border-radius:999px;align-items:center;gap:8px;padding:0 12px 0 6px;font-size:.82rem;display:inline-flex}.hn-platz.leer{padding:0 14px}.hn-platz.voll{border:1px solid var(--color-nacht-linie);background:var(--color-nacht-flaeche);color:var(--color-elfenbein)}.hn-klecks{border-radius:50%;width:26px;height:26px}.hn-weg{width:22px;height:22px;color:var(--color-nacht-tinte);border-radius:50%;place-items:center;font-size:15px;line-height:1;transition:background-color .3s;display:grid}.hn-weg:hover{background:var(--color-nacht-linie)}.hn-zeigen{color:var(--color-elfenbein);border-bottom:1px solid var(--color-gold);opacity:0;pointer-events:none;transition:opacity .5s var(--ease), transform .5s var(--ease);margin-top:12px;padding-bottom:2px;display:inline-block;transform:translateY(6px)}.hn-zeigen.da{opacity:1;pointer-events:auto;transform:none}.hn-zeigen b{font-weight:500}.hn-text.gemischt .hn-unter,.hn-text.gemischt .hn-knoepfe,.hn-text.gemischt .hn-stand{display:none}.hn-treffer{margin-top:18px}.hn-treffer ol{border-top:1px solid var(--color-nacht-linie);max-width:30rem;margin-top:8px}.hn-treffer li{border-bottom:1px solid var(--color-nacht-linie);animation:hn-rein .6s var(--ease) both;animation-delay:var(--v,0s);grid-template-columns:1fr auto;align-items:baseline;gap:2px 16px;padding:9px 0;display:grid}.hn-treffer .hn-t-name{font-family:var(--font-serif);color:var(--color-elfenbein);font-size:1.15rem;line-height:1.15}.hn-treffer .hn-t-marke{font-family:var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--color-nacht-tinte);margin-bottom:2px;font-size:.7rem;display:block}.hn-treffer .hn-t-preis{color:var(--color-gold);white-space:nowrap;font-size:.85rem}.hn-treffer .hn-t-noten{color:var(--color-nacht-tinte);grid-column:1/-1;font-size:.78rem}.hn-treffer-hinweis{color:var(--color-nacht-tinte);opacity:.8;margin-top:6px;font-size:.72rem}@keyframes hn-rein{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.hn-text2{z-index:20;opacity:0;max-width:520px;position:absolute;bottom:clamp(48px,12vh,120px);left:clamp(16px,6vw,96px);transform:translateY(30px)}.hn-text2 h2{letter-spacing:-.02em;color:var(--color-elfenbein);font-size:clamp(2.2rem,5vw,4.2rem);font-weight:340;line-height:1}.hn-text2 h2 em{color:var(--color-gold);font-style:italic}.hn-text2 p{color:var(--color-nacht-tinte);margin-top:16px;line-height:1.6}.hn-text2 a{color:var(--color-elfenbein);border-bottom:1px solid var(--color-gold);margin-top:14px;padding-bottom:2px;display:inline-block}html:not(.js) .hn-text2{display:none}.hn-flakon{z-index:10;width:clamp(140px,18vw,260px);left:var(--fx,70%);top:var(--fy,54%);will-change:transform;position:absolute;translate:-50% -50%}.hn-flakon svg{width:100%;height:auto;display:block;overflow:visible}.hn-flakon-logo{justify-content:center;width:24%;height:16%;display:flex;position:absolute;top:56%;left:38%}.hn-schicht,.hn-mix{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}.hn-mix{transition:transform 1s var(--ease)}.hn-welle{transform-box:fill-box;transform-origin:50%;opacity:0}.hn-welle.an{animation:hn-welle 1.1s var(--ease)}@keyframes hn-welle{0%{opacity:.8;transform:scale(.2)}to{opacity:0;transform:scale(1.4)}}.hn-faden{opacity:0;animation:6s ease-in-out infinite hn-steigen}.hn-faden:nth-of-type(2){animation-delay:3s}@keyframes hn-steigen{0%{opacity:0;transform:translateY(8px)}30%{opacity:.55}to{opacity:0;transform:translateY(-34px)}}.hn-etikett{z-index:21;top:0;left:calc(var(--fx) + clamp(95px, 10vw, 140px));letter-spacing:.14em;text-transform:uppercase;color:var(--color-nacht-tinte);opacity:0;white-space:nowrap;font-size:.75rem;position:absolute}.hn-etikett b{font-family:var(--font-serif);text-transform:none;letter-spacing:0;color:var(--color-elfenbein);margin-top:2px;font-size:17px;font-style:italic;font-weight:380;display:block}.hn-etikett:before{content:"";background:#4d4036;width:34px;height:1px;position:absolute;top:8px;right:calc(100% + 10px)}.hn-note{z-index:5;will-change:transform, opacity;user-select:none;-webkit-tap-highlight-color:transparent;opacity:0;cursor:pointer;border-radius:999px;align-items:center;gap:6px;display:flex;position:absolute;top:0;left:0}html:not(.js) .hn-note{display:none}.hn-figur{width:var(--g);height:var(--g);transition:transform .6s var(--ease);flex:none}.hn-figur svg{width:100%;height:100%;display:block;overflow:visible}.hn-beschriftung{text-align:left;flex-direction:column;align-items:flex-start;line-height:1.15;display:flex}.hn-name{font-family:var(--font-serif);color:var(--color-elfenbein);white-space:nowrap;font-size:17px;font-style:italic}.hn-art{color:var(--color-nacht-tinte);white-space:nowrap;opacity:0;transition:opacity .4s var(--ease), transform .4s var(--ease);font-size:11px;transform:translateY(-3px)}.hn-note:hover .hn-figur,.hn-note:focus-visible .hn-figur{transform:scale(1.25)rotate(-6deg)}.hn-note:hover .hn-art,.hn-note:focus-visible .hn-art{opacity:1;transform:none}.hn-note:hover .hn-name,.hn-note:focus-visible .hn-name{opacity:1!important}.hn-scroll{z-index:20;letter-spacing:.2em;text-transform:uppercase;color:var(--color-nacht-tinte);flex-direction:column;align-items:center;gap:10px;font-size:.75rem;display:flex;position:absolute;bottom:26px;left:50%;translate:-50%}.hn-scroll i{background:linear-gradient(var(--color-nacht-tinte), transparent);width:1px;height:38px;animation:hn-tropfen 2.4s var(--ease) infinite;transform-origin:top}@keyframes hn-tropfen{0%{opacity:1;transform:scaleY(0)}60%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(1)}}html:not(.js) .hn-scroll{display:none}@media (width<=767px){.hn-text{top:100px;right:16px;transform:none}.hn-zeile{font-size:.68rem}.hero-nacht h1{margin-top:12px;font-size:2.9rem}.hn-unter{margin-top:12px;font-size:.95rem}.hn-mischung,.hn-knoepfe{margin-top:16px}.hn-stand{display:none}.hn-platz{height:32px;padding:0 10px 0 5px;font-size:.72rem}.hn-platz.frei{display:none}.hn-treffer{margin-top:12px}.hn-treffer li{padding:6px 0}.hn-treffer li:nth-child(3),.hn-treffer-hinweis{display:none}.hn-treffer .hn-t-name{font-size:1rem}.hn-klecks{width:22px;height:22px}.hn-figur{width:var(--gk);height:var(--gk)}.hn-note[data-gross-only]{display:none}.hn-etikett{left:calc(var(--fx) + 84px);font-size:.68rem}.hn-etikett:before{width:20px}.hn-etikett b{font-size:15px}.hn-name{font-size:14px}.hn-text2{bottom:40px;right:16px}.hn-scroll{display:none}html:not(.js) .hn-text{padding:110px 0 48px;position:relative;top:auto}html:not(.js) .hn-flakon{display:none}}@media (prefers-reduced-motion:reduce){.hn-scroll i,.hn-faden{animation:none}.hn-mix{transition:none}}
