:root{ /* Steuergroesse fuer Logo und alles, was sich daran ausrichtet. */ --logo-h:clamp(112px,min(21.5vh,36.5vw),250px); /* 41vw deckelt die Hoehe ueber die Fensterbreite: der Schwarm ist rund 155% der Logobreite und wuerde sonst auf hohen, schmalen Geraeten seitlich aus dem Bild ragen. */ /* Auf schmalen Geraeten bewusst kleiner: der Schwarm braucht seitlich Platz, sonst haengen die aeusseren Bienen angeschnitten am Bildrand. */ --ink:#08080a; --ink-2:#0e0e11; --ink-3:#141418; --line:rgba(233,227,214,.11); --line-strong:rgba(233,227,214,.22); --wax:#e9e3d6; --wax-dim:#9c958a; --wax-faint:#827b70; --honey:#d8a33c; --honey-soft:#e8c069; --maxw:1180px; --pad:clamp(1.25rem,4vw,3rem); } *,*::before,*::after{box-sizing:border-box} /* overflow-x:clip — NOT hidden: `hidden` would turn into the scroll container and permanently pin window.scrollY to 0, breaking the sticky header. */ html{scroll-behavior:smooth;overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--ink); color:var(--wax); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:clamp(.95rem,.92rem + .2vw,1.02rem); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip; } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* ---------- honeycomb texture ---------- */ .comb{ position:absolute;inset:0;pointer-events:none; /* True honeycomb: hexagons must be OFFSET and share walls, not stacked in columns. Tile is 52 x 90 (width = √3·R, height = 3·R with R = 30); the four corner hexagons plus one in the middle make the grid repeat seamlessly. */ background-image:url("data:image/svg+xml;utf8,"); background-size:52px 90px; opacity:.07; } /* ---------- header ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease; border-bottom:1px solid transparent; } header.solid{ background:rgba(8,8,10,.82); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); } .nav{display:flex;align-items:center;gap:2rem;height:78px;transition:height .35s ease} header.solid .nav{height:64px} /* Works as a wordmark today; drop an inside and it styles itself. */ .mark{ font-family:Cinzel,Georgia,serif;font-weight:600; font-size:1.18rem;letter-spacing:.34em; margin-right:auto;padding-left:.1em;white-space:nowrap; display:flex;align-items:center;flex:none; } .mark span{color:var(--honey)} /* The logo is tall (bee wings above and below the wordmark), so it needs more height than a plain wordmark would to stay legible. */ /* One background declaration, reused in header, hero and footer — in the built one-file version the image data then appears exactly once. */ .logo-img{ display:block;background:url(logo.webp) center/contain no-repeat; aspect-ratio:800/529;transition:height .35s ease; } .mark .logo-img{height:48px} header.solid .mark .logo-img{height:40px} .links{display:flex;gap:1.85rem;list-style:none;margin:0;padding:0} /* Wabenform statt schlichter Textzeile - greift das Motiv der Seite auf. clip-path schneidet auch einen outline ab, deshalb wird der Tastaturfokus ueber einen inneren Rahmen (box-shadow inset) sichtbar gemacht. */ /* Der sichtbare Rand entsteht durch zwei gestapelte Waben: das li traegt die Randfarbe, das a darin die Fuellung - clip-path wuerde einen echten border mit abschneiden. */ .links li{ clip-path:polygon(11% 0,89% 0,100% 50%,89% 100%,11% 100%,0 50%); background:rgba(216,163,60,.28); padding:1px; transition:background .28s ease; } .links li:hover{background:rgba(216,163,60,.75)} .links li:hover a{color:#100c04} .links a{ font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--wax-dim);position:relative;display:block; padding:.5rem 1.02rem; clip-path:polygon(11% 0,89% 0,100% 50%,89% 100%,11% 100%,0 50%); background:#0e0e10; transition:background .28s ease,color .28s ease; } .links a:hover{background:rgba(216,163,60,.16);color:var(--wax)} .links a:focus-visible{ outline:none;background:rgba(216,163,60,.3);color:var(--wax); } .links li:focus-within{background:var(--honey)} .links li:focus-within a{color:#100c04} .links a:hover{background:rgba(216,163,60,.19);color:var(--wax)} .links a:focus-visible{ outline:none;background:rgba(216,163,60,.26);color:var(--wax); box-shadow:inset 0 0 0 1.5px #100c04; } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:Inter,sans-serif;font-size:.72rem;font-weight:600; letter-spacing:.19em;text-transform:uppercase; padding:.82rem 1.6rem;border:1px solid var(--line-strong); color:var(--wax);background:transparent;cursor:pointer; transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease; } .btn:hover{border-color:var(--honey);color:var(--honey-soft);transform:translateY(-1px)} .btn-solid{background:var(--honey);border-color:var(--honey);color:#100c04} .btn-solid:hover{background:var(--honey-soft);border-color:var(--honey-soft);color:#100c04} .btn-sm{padding:.6rem 1.1rem;font-size:.66rem} /* Nur fuer Screenreader und Crawler sichtbar - die h1 traegt so echten Text. */ .vh-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- hero ---------- Type sits in a reserved band at the bottom; the video keeps the whole upper half to itself. Nothing is stacked on top of anything else. */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .hero-media{position:absolute;inset:0;z-index:-2;background:var(--ink)} .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* The official video is already dark and candle-lit, so it needs far less dimming than the earlier clip — the two scrims below do the rest. */ .hero-media img,.hero-media video{filter:saturate(.95) contrast(1.03) brightness(1)} /* Two targeted scrims instead of one flat veil: dark exactly where the nav and the headline sit, fully clear through the middle so the footage stays alive. */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(180deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.4) 11%,transparent 25%), linear-gradient(0deg,var(--ink) 0%,rgba(8,8,10,.93) 14%,rgba(8,8,10,.62) 32%,rgba(8,8,10,.18) 50%,transparent 64%); } /* Top padding only matters when the viewport gets short (phone in landscape): the block is bottom-aligned, so it grows upwards and keeps clear of the nav instead of sliding underneath it. */ .hero-inner{width:100%;padding-block:7rem clamp(3.4rem,8vh,6rem);position:relative;z-index:1} .hero-row{display:flex;align-items:flex-end;justify-content:center;gap:1.6rem 2rem;flex-wrap:wrap} .hero-copy{min-width:0;text-align:center} /* Keine max-width auf dem Block selbst: das Logo ist breiter als die Textspalte und wuerde sonst rechts aus der Mitte laufen. Der Text begrenzt sich selbst. */ .hero-copy .eyebrow{max-width:56ch;margin-inline:auto} .hero-inner h1{animation:logoSizzle 2.9s ease-in-out infinite} /* Das Logo ist nicht spiegelsymmetrisch. Die Fuehler treffen sich bei 57.1% der Bildbreite, die Fluegelunterkanten liegen bei 56.7% - also genau dort, wo der Text oben und unten anschliesst. Geometrisch zentriert wirkt er deshalb nach links gerutscht. Der ganze Textblock sitzt daher auf dieser optischen Achse, nur das Logo selbst bleibt im Rechteck mittig (als Ganzes liegt es bei 51.4%, ist also ausgewogen - die Fluegel oben gleichen den Schriftzug unten aus). 57px auf 800px Bildbreite = 10.8% der Bildhoehe. Hier gerechnet und nicht als Variable auf :root, wo --logo-h schon zum Mobilwert aufgeloest waere. */ .hero-copy .eyebrow,.hero-copy .tagline,.hero-copy .hero-cta{ /* Auf schmalen Geraeten gedeckelt: dort zaehlt ein gleichmaessiger Seitenrand mehr als die letzten Millimeter optischer Ausrichtung. */ transform:translateX(min(calc(var(--logo-h) * .023), 0.6vw))} /* letter-spacing adds a gap after the last character, which centring counts in — the line then sits half a space too far left. text-indent cancels it out. */ .hero-copy .eyebrow{text-indent:.42em} .eyebrow{ font-size:.68rem;letter-spacing:.42em;text-transform:uppercase; color:var(--honey);margin:0 0 1.3rem; } h1{ font-family:Cinzel,Georgia,serif;font-weight:400; font-size:clamp(2.7rem,10vw,7rem); letter-spacing:.15em;line-height:1;margin:0; text-shadow:0 2px 34px rgba(0,0,0,.72); } /* Sized by height, not width: the logo is nearly square, so a width rule would blow it up vertically on short viewports. */ .hero-logo{ position:relative; margin-inline:auto;height:var(--logo-h); filter:drop-shadow(0 3px 30px rgba(0,0,0,.9)); animation:logoGlow 5.2s ease-in-out infinite; } .tagline{ font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300; font-size:clamp(1.1rem,2.6vw,1.55rem); color:var(--wax);margin:1.3rem auto 0;max-width:36ch;line-height:1.5; text-shadow:0 1px 16px rgba(0,0,0,.8); } .hero-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.4rem} /* ---------- sections ---------- */ section{position:relative;padding-block:clamp(3.4rem,6.5vw,5.5rem)} section>.wrap>*:last-child,section .wrap>*:last-child{margin-bottom:0} .band{background:var(--ink-2)} .sec-head{display:flex;align-items:baseline;gap:1.4rem;margin-bottom:3.4rem;flex-wrap:wrap} h2{ font-family:Cinzel,Georgia,serif;font-weight:400; font-size:clamp(1.55rem,3.6vw,2.5rem); letter-spacing:.17em;text-transform:uppercase;margin:0; } .lede{ font-family:"Cormorant Garamond",Georgia,serif;font-weight:300; font-size:clamp(1.22rem,2.4vw,1.62rem);line-height:1.62;color:var(--wax); max-width:44ch;margin:0; } /* ---------- release ---------- */ /* Top-aligned: the tracklist is much taller than the cover, so centring left a large gap on the left. The streaming buttons now fill that column instead. */ .release{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,4.5vw,3.6rem);align-items:start} /* Fixed 2x2 grid: as a flex row the four buttons wrapped to two or three lines depending on font loading, which threw the two columns out of alignment. */ .release-media .dsp{ display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.5rem; } .release-media .dsp a{justify-content:center;white-space:nowrap;padding-inline:.6rem} .cover{position:relative} .cover .ph{ aspect-ratio:1/1;width:100%; border:1px solid var(--line); box-shadow:0 34px 90px -30px rgba(0,0,0,.95); transition:transform .6s cubic-bezier(.2,.7,.3,1); } .cover:hover .ph{transform:translateY(-6px)} .release-head{margin-bottom:clamp(1.8rem,3vw,2.6rem)} .release-head .meta-row{margin-bottom:0} .release h3,.release-head h3{ font-family:Cinzel,Georgia,serif;font-weight:400; font-size:clamp(1.8rem,4.2vw,2.9rem);letter-spacing:.09em; line-height:1.16;margin:.6rem 0 1.2rem; } .meta-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wax-faint);margin-bottom:1.6rem} .meta-row .dot{color:var(--honey)} /* Tracklist — set like the back of a sleeve: numbers in honey, hairline rules. */ .tracks{list-style:none;margin:0;padding:0} .tracks li{ display:flex;align-items:baseline;gap:.95rem; padding:.32rem 0;border-bottom:1px solid var(--line); } .tracks li:first-child{border-top:1px solid var(--line)} .t-no{ flex:none;min-width:1.6rem; font-size:.68rem;letter-spacing:.1em;color:var(--honey); font-variant-numeric:tabular-nums; } .t-name{font-size:.9rem;color:var(--wax-dim);transition:color .25s} .tracks li:hover .t-name{color:var(--wax)} .dsp{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem} .dsp a{ display:inline-flex;align-items:center;gap:.6rem; padding:.72rem 1.15rem;border:1px solid var(--line); font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wax-dim); transition:border-color .28s,color .28s,background .28s; } .dsp a:hover{border-color:var(--honey);color:var(--wax);background:rgba(216,163,60,.07)} .dsp svg{width:15px;height:15px;flex:none;fill:currentColor} /* ---------- about ---------- */ .about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem); align-items:stretch} /* Das Bild waechst auf die Hoehe der Textspalte mit, damit beide Spalten unten buendig abschliessen. Das Seitenverhaeltnis gibt dabei der Text vor - deshalb greift aspect-ratio hier nicht mehr, cover uebernimmt den Zuschnitt. */ .about .portrait{display:flex} .about .portrait .ph{aspect-ratio:auto;width:100%;height:100%;min-height:22rem} .pillars{display:grid;gap:2.1rem;margin-top:0} .pillar{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start} .pillar .hex{width:38px;height:44px;flex:none;fill:none;stroke:var(--honey);stroke-width:1.2;opacity:.85} .pillar h3{ font-family:Cinzel,Georgia,serif;font-weight:400;font-size:.92rem; letter-spacing:.2em;text-transform:uppercase;margin:.3rem 0 .55rem; } .pillar p{margin:0;color:var(--wax-dim);font-size:.92rem;line-height:1.75} .portrait{position:relative} .portrait .ph{aspect-ratio:3/4;border:1px solid var(--line);filter:grayscale(.35) contrast(1.05) brightness(.9)} /* ---------- events ---------- */ .event{ display:grid;grid-template-columns:130px 1fr auto;gap:2rem;align-items:center; padding:1.7rem .4rem;border-bottom:1px solid var(--line); transition:background .3s ease,padding-left .3s ease; } .event:first-of-type{border-top:1px solid var(--line)} .event:hover{background:rgba(216,163,60,.045);padding-left:1.1rem} .ev-date{font-family:Cinzel,serif;font-size:.86rem;letter-spacing:.13em;color:var(--honey);text-transform:uppercase;line-height:1.45} .ev-date small{display:block;font-family:Inter,sans-serif;font-size:.63rem;letter-spacing:.2em;color:var(--wax-faint);margin-top:.25rem} .ev-name{font-size:1.06rem;font-weight:500;letter-spacing:.01em;margin:0 0 .28rem} .ev-loc{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wax-dim);margin:0} /* Each photo is declared once here and reused wherever it appears — in the built one-file version the image data therefore occurs exactly once. */ .ph{display:block;background-position:center;background-size:cover;background-repeat:no-repeat} .img-band{background-image:url(band.webp)} .img-cover{background-image:url(cover.webp)} /* Held back until scrolled near — a CSS background ignores loading="lazy", so the observer below does that job instead. */ .js .lazy-img{background-image:none} /* ---------- official videos ---------- Same hexagon as the photo grid. The 16:9 thumbnails get cropped hard by that shape, so the titles sit below the cell rather than relying on the artwork. */ .films{ display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:2.2rem 1.4rem;margin-top:3.2rem;align-items:start; justify-items:center; } .film{position:relative;display:block;text-align:center;width:100%;max-width:300px} .film-frame{position:relative;display:block} .film-shot{ display:block;aspect-ratio:1/1.1; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); background-position:center;background-size:cover;background-repeat:no-repeat; background-color:var(--ink-3); filter:grayscale(.45) brightness(.66); transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s; } .film:hover .film-shot,.film:focus-visible .film-shot{transform:scale(1.07);filter:grayscale(0) brightness(.92)} .film-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:34px;height:39px;pointer-events:none;z-index:2; transition:transform .35s ease; } .film:hover .film-play{transform:translate(-50%,-50%) scale(1.12)} .film-play .hx{fill:rgba(8,8,10,.5);stroke:var(--honey);stroke-width:1.6;transition:fill .3s} .film:hover .film-play .hx{fill:rgba(216,163,60,.3)} .film-play .tri{fill:var(--honey)} .film-meta{display:block;padding:.95rem .4rem 0} .film-title{ display:block;font-family:Cinzel,Georgia,serif;font-size:.95rem;letter-spacing:.11em; transition:color .28s; } .film:hover .film-title{color:var(--honey-soft)} .img-clip-carmen{background-image:url(clip-carmen-reginarum.webp)} .img-clip-lupanar{background-image:url(clip-lupanar-apum.webp)} .img-clip-darkhive{background-image:url(clip-dark-hive.webp)} /* Archive tiles sit a step back from the official videos. */ .films-archive{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));max-width:820px;margin-inline:auto;gap:2rem 1.4rem} .films-archive .film{max-width:250px} .films-archive .film-shot{filter:grayscale(.35) brightness(.82) contrast(1.18)} .films-archive .film:hover .film-shot{filter:grayscale(0) brightness(.98) contrast(1.1)} .films-archive .film-title{font-size:.86rem} .films-archive .film-play{width:28px;height:32px} .img-video-apes{background-image:url(video-apes-saltis.webp)} .img-video-mel{background-image:url(video-mel-obscurum.webp)} .img-video-ten{background-image:url(video-tenebrae.webp)} @media (max-width:900px){ /* Einspaltig gibt es nichts mehr anzugleichen - zurueck zum Hochformat, sonst wird das Bild ueber die volle Breite unnatuerlich hoch. */ .about{grid-template-columns:1fr} .about .portrait .ph{aspect-ratio:3/4;height:auto;min-height:0} } @media (max-width:640px){ /* Termine einspaltig — dreispaltig ragten die Ticket-Schaltflaechen ueber den Rand */ .event{grid-template-columns:1fr;gap:.8rem;padding-block:1.5rem} .event .btn{justify-self:start} /* Genau ZWEI Spalten - nicht auto-fit. Die Zentrierregel weiter unten rechnet mit der Haelfte der Breite; bei drei Spalten waere das anderthalb Spalten und die dritte Kachel deutlich zu gross. */ .films{grid-template-columns:repeat(2,1fr)} /* Auf kleinen Kacheln nimmt das Symbol sonst zu viel vom Bild weg */ .film-play{width:28px;height:32px} .films-archive .film-play{width:24px;height:28px} /* Bei zwei Spalten bleibt das dritte Video allein in der letzten Reihe und stuende linksbuendig. Es bekommt daher beide Spalten und wird darin zentriert - mit derselben Breite wie seine Nachbarn darueber. */ .films > .film:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc(50% - .7rem); } } /* ---------- contact ---------- */ .contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.6rem} .contact h3{ font-size:.66rem;letter-spacing:.26em;text-transform:uppercase; color:var(--honey);margin:0 0 .85rem;font-weight:600; } /* Addresses stay on one line; the size scales down on narrow screens instead of breaking mid-address. */ .contact a{ font-size:clamp(.78rem,2.5vw,.94rem);color:var(--wax); border-bottom:1px solid transparent;transition:border-color .28s,color .28s; white-space:nowrap;display:inline-block; } .contact a:hover{border-bottom-color:var(--honey);color:var(--honey-soft)} .contact p{margin:.35rem 0 0;font-size:.78rem;color:var(--wax-faint)} /* Company marks under each contact. Held back in brightness so they support the address rather than compete with it. */ .co-logo{ display:block;margin-top:1.1rem;height:32px;width:100%;max-width:150px; background-position:left center;background-size:contain;background-repeat:no-repeat; opacity:.55;transition:opacity .3s ease; } .contact:hover .co-logo{opacity:.9} .co-events {background-image:url(logo-napalm-events.webp)} .co-records{background-image:url(logo-napalm-records.webp)} .co-iron {background-image:url(logo-iron-avantgarde.webp);opacity:.75} .contact:hover .co-iron{opacity:1} /* ---------- footer ---------- */ footer{background:var(--ink-2);border-top:1px solid var(--line);padding-block:3.6rem 2.4rem} .f-top{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem} .socials{display:flex;gap:.55rem} .socials a{ width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line); color:var(--wax-dim);transition:border-color .28s,color .28s,transform .28s; } .socials a:hover{border-color:var(--honey);color:var(--honey);transform:translateY(-2px)} .socials svg{width:17px;height:17px;fill:currentColor} .f-bot{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;font-size:.68rem;color:var(--wax-faint);letter-spacing:.08em} .f-bot a:hover{color:var(--honey)} /* ---------- reveal ---------- Scoped to .js so content stays visible if JavaScript never runs. */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)} .js .rv.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media (max-width:940px){ .release,.about{grid-template-columns:1fr} .cover{max-width:420px} .portrait{order:-1;max-width:460px} } /* 980px, not 820: below ~950 the wordmark + 6 links + store button + 4 language links no longer fit on one line and the language switch got clipped. */ /* Below 980px the categories stay visible as a fixed second row instead of hiding behind a burger. Five labels plus logo do not fit on one line at 375px, so the bar becomes two rows; the menu row can scroll sideways on very narrow phones rather than wrapping. */ @media (max-width:980px){ .nav{ flex-wrap:nowrap;height:auto; /* Schmalerer Innenabstand als der Rest der Seite: die Kopfleiste braucht jeden Millimeter fuer Logo und fuenf Waben nebeneinander. */ padding-block:.5rem;padding-inline:1rem;gap:.5rem; transition:padding .35s ease; } header.solid .nav{height:auto;padding-block:.4rem .1rem} .mark{margin-right:auto} .mark .logo-img{height:28px} header.solid .mark .logo-img{height:25px} .links li{clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)} .links{ position:static;order:0;width:auto;height:auto;flex:1;min-width:0; flex-direction:row;justify-content:flex-end;align-items:center; gap:.1rem; background:none;backdrop-filter:none; transform:none;transition:none;overflow-x:auto;overflow-y:hidden; padding:.15rem 0 .35rem; scrollbar-width:none; } .links::-webkit-scrollbar{display:none} .links a{ font-size:.625rem;letter-spacing:.04em;white-space:nowrap; /* flachere Schraegen und knapperer Innenabstand: fuenf Waben muessen neben das Logo in eine Zeile passen */ padding:.42rem .38rem; clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%); } } /* 980px, not 820: below ~950 the wordmark + 6 links + store button + 4 language links no longer fit on one line and the language switch got clipped. */ /* ================= text pages (imprint, privacy, 404) ================= */ .page{padding-block:clamp(8rem,16vh,11rem) clamp(4rem,8vh,6rem);min-height:70svh} .page .wrap{max-width:760px} .page h1{ font-family:Cinzel,Georgia,serif;font-weight:400; font-size:clamp(1.8rem,4.5vw,2.8rem);letter-spacing:.13em; text-transform:uppercase;margin:0 0 .8rem;text-shadow:none; } .page .updated{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wax-faint);margin:0 0 3.2rem} .page h2{ font-size:clamp(1rem,2vw,1.15rem);letter-spacing:.16em; margin:3rem 0 .9rem;color:var(--honey);font-family:Cinzel,Georgia,serif; } .page h3{font-size:.92rem;letter-spacing:.08em;margin:1.8rem 0 .5rem;font-weight:600} .page p,.page li{color:var(--wax-dim);font-size:.94rem;line-height:1.8} .page p{margin:0 0 1.1rem} .page ul{padding-left:1.2rem;margin:0 0 1.1rem} .page li{margin-bottom:.45rem} .page a{color:var(--honey);border-bottom:1px solid rgba(216,163,60,.55);transition:border-color .25s} .page a:hover{border-bottom-color:var(--honey)} .page strong{color:var(--wax);font-weight:600} .page .box{ border:1px solid var(--line);border-left:2px solid var(--honey); background:var(--ink-3);padding:1.2rem 1.4rem;margin:0 0 2rem; } .page .box p{margin:0;font-size:.88rem} .page-nav{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--line)} /* Glowing honey: three stacked shadows swell and fade, and the mark itself brightens slightly at the peak. Slow, so it reads as embers, not blinking. */ @keyframes logoGlow{ 0%,100%{ transform:scale(1); filter:drop-shadow(0 3px 30px rgba(0,0,0,.9)) drop-shadow(0 0 16px rgba(232,192,105,.45)) drop-shadow(0 0 40px rgba(216,163,60,.24)) brightness(1.04) saturate(1.05); } 50%{ transform:scale(1.022); filter:drop-shadow(0 3px 30px rgba(0,0,0,.9)) drop-shadow(0 0 34px rgba(255,214,138,.95)) drop-shadow(0 0 82px rgba(238,168,48,.62)) brightness(1.24) saturate(1.32); } } /* Ueber den ruhigen Puls legt sich ein schnelleres, absichtlich unregelmaessiges Flackern - das ist der Unterschied zwischen "leuchtet" und "brutzelt". Es sitzt auf dem h1 statt auf dem Logo selbst, weil zwei Animationen sonst um dieselbe filter-Eigenschaft konkurrieren und die spaetere die fruehere ueberschreibt. */ @keyframes logoSizzle{ 0% {filter:brightness(1) saturate(1)} 7% {filter:brightness(1.07) saturate(1.06)} 11% {filter:brightness(.975) saturate(.99)} 19% {filter:brightness(1.05) saturate(1.04)} 26% {filter:brightness(1.005) saturate(1)} 33% {filter:brightness(1.09) saturate(1.08)} 38% {filter:brightness(.965) saturate(.98)} 47% {filter:brightness(1.04) saturate(1.03)} 55% {filter:brightness(1.11) saturate(1.09)} 61% {filter:brightness(.985) saturate(.995)} 69% {filter:brightness(1.06) saturate(1.05)} 76% {filter:brightness(.97) saturate(.985)} 84% {filter:brightness(1.08) saturate(1.07)} 91% {filter:brightness(1.01) saturate(1.005)} 96% {filter:brightness(1.045) saturate(1.04)} 100% {filter:brightness(1) saturate(1)} } /* ================= Schwarm am Logo ================= Fuenf kleine Bienen haengen am Schriftzug wie an einem Stock. Jede schwirrt auf ihrer eigenen kleinen Schleife, mit versetzten Verzoegerungen — synchron sehen sie sonst mechanisch aus. Rein dekorativ, ohne Bedienfunktion. */ .logo-zone{position:relative;display:inline-block; /* Die Bounding-Box des Logos ist symmetrisch, aber sie wird von den duennen Fluegellinien bestimmt. Der massive Schriftzug - das, was das Auge als "das Logo" wahrnimmt - sitzt 5.6% der Bildbreite weiter rechts. Genau darum wirkt ein exakt zentriertes Rechteck nach rechts verrutscht. 5.6% der Breite = 8.47% der Hoehe. Der Schwarm sitzt mit drin und wandert deshalb mit. */ left:calc(var(--logo-h) * -.0847)} .swarm{position:absolute;inset:0;pointer-events:none} .sb{ position:absolute; animation:sbDriftL 6.5s ease-in-out infinite; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); } .sb-art{display:block;position:relative} .sb-art img{width:100%;height:auto;display:block} .sb-body{position:relative;z-index:1} .sb-wings{ position:absolute;inset:0;z-index:2; transform-origin:58.7% 52.8%; animation:wingBeat .07s ease-in-out infinite alternate; } /* kleine, unregelmaessige Schleife um den eigenen Platz */ /* ---------- einzelne Biene, die den Hero durchquert ---------- Sie fliegt in der freien Zone zwischen Navigation und Eyebrow, kreuzt also weder Logo noch Text. Groesse doppelt so gross wie die groesste Schwarmbiene (6.3% der Logobreite), an dieselbe Steuergroesse gekoppelt. */ .solo-bee{ /* Reiseflughoehe: knapp unter der Navigation (feste 78px), egal wie hoch der Hero auf dem jeweiligen Bildschirm ausfaellt. */ position:absolute;top:calc(90px + 3vh);left:0;z-index:3; width:calc(var(--logo-h) * .19); pointer-events:none; filter:drop-shadow(0 3px 9px rgba(0,0,0,.6)); animation:soloFlug 32s linear infinite; will-change:transform,opacity; } .solo-art{display:block;position:relative;transform:scaleX(-1)} /* Die Zeichnung schaut nach links, geflogen wird nach rechts - also spiegeln, sonst fliegt sie rueckwaerts. */ .solo-art img{width:100%;height:auto;display:block} .solo-bee .sb-body{position:relative;z-index:1} .solo-bee .sb-wings{ position:absolute;inset:0;z-index:2; transform-origin:58.7% 52.8%; animation:wingBeat .07s ease-in-out infinite alternate; } /* Die Bahn ist in drei entkoppelte Ebenen zerlegt: 1. soloFlug - die Reiseroute selbst (Ort, Groesse, Neigung), 32s 2. soloDrift - langsames Wandern um diese Route herum, 7.3s 3. soloJitter - schnelles Zittern des Fluges, 1.13s Die drei Perioden stehen bewusst in keinem ganzzahligen Verhaeltnis zueinander (32/7.3 = 4.38, 7.3/1.13 = 6.46). Dadurch wiederholt sich die sichtbare Bewegung praktisch nie - genau das nimmt ihr das Maschinelle. Die Route selbst: gekruemmter Steigflug von unten links (die Hoehenschritte werden kleiner, statt eine Rampe zu bilden), enge Querung ueber Eyebrow und Logo, dann ein Sturzflug in den freien Bereich rechts und ein steiler Ausflug nach oben. Die Neigung folgt der tatsaechlichen Bahnsteigung, gedaempft auf 45 Prozent - Bienen halten den Koerper flacher als ihre Flugbahn. Die Waagerechte bleibt streng linear, damit die Geschwindigkeit konstant bleibt; alle Lebendigkeit steckt in Hoehe, Groesse und Neigung. Die Hoehenwerte zwischen 30 und 62 Prozent sind gegen Navigation und Eyebrow geprueft (10 Bildschirmformate, geringster Abstand 3.9px). */ @keyframes soloFlug{ 0% {transform:translate(-14.00vw,34.00vh) scale(0.100); opacity:0.00} 2% {transform:translate(-10.86vw,30.36vh) scale(0.111); opacity:0.25} 4% {transform:translate(-7.71vw,26.88vh) scale(0.137); opacity:0.74} 6% {transform:translate(-4.53vw,23.61vh) scale(0.176); opacity:1.00} 8% {transform:translate(-1.33vw,20.41vh) scale(0.226); opacity:1.00} 10% {transform:translate(1.86vw,17.21vh) scale(0.286); opacity:1.00} 12% {transform:translate(4.97vw,14.63vh) scale(0.355); opacity:1.00} 14% {transform:translate(7.94vw,12.45vh) scale(0.429); opacity:1.00} 16% {transform:translate(10.76vw,9.70vh) scale(0.506); opacity:1.00} 18% {transform:translate(13.47vw,7.24vh) scale(0.587); opacity:1.00} 20% {transform:translate(16.16vw,5.53vh) scale(0.674); opacity:1.00} 22% {transform:translate(18.94vw,3.57vh) scale(0.770); opacity:1.00} 24% {transform:translate(21.87vw,1.00vh) scale(0.877); opacity:1.00} 26% {transform:translate(24.90vw,-0.94vh) scale(0.996); opacity:1.00} 28% {transform:translate(27.95vw,-1.88vh) scale(1.000); opacity:1.00} 30% {transform:translate(30.83vw,-0.63vh) scale(1.000); opacity:1.00} 32% {transform:translate(33.37vw,-0.03vh) scale(1.000); opacity:1.00} 34% {transform:translate(35.43vw,-1.70vh) scale(1.000); opacity:1.00} 36% {transform:translate(36.99vw,-1.42vh) scale(1.000); opacity:1.00} 38% {transform:translate(38.45vw,-0.12vh) scale(1.000); opacity:1.00} 40% {transform:translate(39.92vw,0.26vh) scale(1.000); opacity:1.00} 42% {transform:translate(41.39vw,-0.90vh) scale(1.000); opacity:1.00} 44% {transform:translate(42.85vw,-1.88vh) scale(1.000); opacity:1.00} 46% {transform:translate(44.32vw,-1.21vh) scale(1.000); opacity:1.00} 48% {transform:translate(45.85vw,0.10vh) scale(1.000); opacity:1.00} 50% {transform:translate(47.62vw,-0.21vh) scale(1.000); opacity:1.00} 52% {transform:translate(49.61vw,-1.78vh) scale(1.000); opacity:1.00} 54% {transform:translate(51.88vw,-0.62vh) scale(1.000); opacity:1.00} 56% {transform:translate(54.51vw,-0.10vh) scale(1.000); opacity:1.00} 58% {transform:translate(57.56vw,-1.76vh) scale(1.000); opacity:1.00} 60% {transform:translate(60.98vw,0.14vh) scale(1.000); opacity:1.00} 62% {transform:translate(64.60vw,-1.69vh) scale(1.000); opacity:1.00} 64% {transform:translate(68.18vw,0.12vh) scale(1.000); opacity:1.00} 66% {transform:translate(71.49vw,-0.15vh) scale(1.000); opacity:1.00} 68% {transform:translate(74.39vw,3.79vh) scale(1.000); opacity:1.00} 70% {transform:translate(76.92vw,6.85vh) scale(1.000); opacity:1.00} 72% {transform:translate(79.23vw,9.56vh) scale(1.000); opacity:1.00} 74% {transform:translate(81.58vw,12.11vh) scale(0.974); opacity:1.00} 76% {transform:translate(84.14vw,14.60vh) scale(0.908); opacity:1.00} 78% {transform:translate(87.03vw,16.35vh) scale(0.818); opacity:0.91} 80% {transform:translate(90.23vw,15.71vh) scale(0.703); opacity:0.77} 82% {transform:translate(93.66vw,11.58vh) scale(0.567); opacity:0.60} 84% {transform:translate(97.20vw,5.04vh) scale(0.416); opacity:0.41} 86% {transform:translate(100.68vw,-0.67vh) scale(0.258); opacity:0.20} 88% {transform:translate(104.00vw,-5.00vh) scale(0.100); opacity:0.00} 100% {transform:translate(104.00vw,-5.60vh) scale(.100); opacity:0.00} } /* Die Mikro-Ebenen bewegen sich in beide Richtungen. Ihr seitlicher Anteil laesst die Fluggeschwindigkeit flattern - das ist hier ausdruecklich erwuenscht. Die grossen Tempowechsel stecken in soloFlug selbst: die Abstaende der Stuetzstellen sind bewusst ungleich (Verhaeltnis 2.5 zu 1), mit Bremsen ueber dem Logo, Schub danach, Zoegern im Sturzflug. Rueckwaerts geht es nie und stehen bleibt sie auch nicht: der kleinste Vorwaertsschritt betraegt 1.47vw, das langsamste Tempo 0.54 des Mittels. */ /* Die Neigung sitzt in der INNERSTEN Ebene, damit die Mikro-Bewegungen nicht im geneigten Bezugssystem stattfinden. Sie folgt der Bildschirmsteigung dy/dx, gedaempft auf 45 Prozent - im engen Teil ueber Logo und Eyebrow zusaetzlich auf 60 Prozent davon, weil sonst die Huelle der gedrehten Biene den schmalen Korridor sprengt (nur 122px zwischen Nav und Eyebrow). */ .solo-tilt{display:block;animation:soloTilt 32s linear infinite} @keyframes soloTilt{ 0% {transform:rotate(-15.9deg)} 2% {transform:rotate(-15.7deg)} 4% {transform:rotate(-15.2deg)} 6% {transform:rotate(-14.7deg)} 8% {transform:rotate(-14.0deg)} 10% {transform:rotate(-13.3deg)} 12% {transform:rotate(-12.8deg)} 14% {transform:rotate(-12.6deg)} 16% {transform:rotate(-12.4deg)} 18% {transform:rotate(-11.9deg)} 20% {transform:rotate(-11.4deg)} 22% {transform:rotate(-10.9deg)} 24% {transform:rotate(-9.2deg)} 26% {transform:rotate(-5.8deg)} 28% {transform:rotate(-2.3deg)} 30% {transform:rotate(-0.5deg)} 32% {transform:rotate(-0.2deg)} 34% {transform:rotate(0.3deg)} 36% {transform:rotate(1.5deg)} 38% {transform:rotate(1.2deg)} 40% {transform:rotate(-0.7deg)} 42% {transform:rotate(-1.7deg)} 44% {transform:rotate(-0.4deg)} 46% {transform:rotate(1.2deg)} 48% {transform:rotate(1.1deg)} 50% {transform:rotate(-0.1deg)} 52% {transform:rotate(-0.5deg)} 54% {transform:rotate(-0.0deg)} 56% {transform:rotate(0.1deg)} 58% {transform:rotate(0.1deg)} 60% {transform:rotate(0.1deg)} 62% {transform:rotate(1.5deg)} 64% {transform:rotate(4.7deg)} 66% {transform:rotate(9.2deg)} 68% {transform:rotate(13.5deg)} 70% {transform:rotate(15.6deg)} 72% {transform:rotate(15.5deg)} 74% {transform:rotate(13.2deg)} 76% {transform:rotate(8.4deg)} 78% {transform:rotate(0.6deg)} 80% {transform:rotate(-8.3deg)} 82% {transform:rotate(-15.2deg)} 84% {transform:rotate(-18.5deg)} 86% {transform:rotate(-18.9deg)} 88% {transform:rotate(-18.4deg)} 100% {transform:rotate(-15.9deg)} } .solo-drift{display:block;animation:soloDrift 7.3s ease-in-out infinite} .solo-jitter{display:block;animation:soloJitter 1.13s ease-in-out infinite} @keyframes soloDrift{ 0% {transform:translate(0,0) scale(1)} 17% {transform:translate(.22vw,-1.20vh) scale(1.03)} 33% {transform:translate(-.18vw,.94vh) scale(.98)} 49% {transform:translate(.14vw,-1.20vh) scale(1.02)} 66% {transform:translate(-.20vw,.68vh) scale(.97)} 83% {transform:translate(.11vw,-1.02vh) scale(1.01)} 100% {transform:translate(0,0) scale(1)} } @keyframes soloJitter{ 0%,100% {transform:translate(0,0) rotate(0deg)} 19% {transform:translate(-.038vw,.30vh) rotate(1.8deg)} 37% {transform:translate(.050vw,-.21vh) rotate(-1.3deg)} 54% {transform:translate(-.024vw,.35vh) rotate(1.7deg)} 71% {transform:translate(.042vw,-.16vh) rotate(-1.0deg)} 88% {transform:translate(-.040vw,.24vh) rotate(1.5deg)} } @media (max-width:820px){ /* Auf schmalen Geraeten sitzt der Eyebrow tiefer - die Bahn rutscht mit, und die Biene wird etwas kleiner, damit sie nicht erschlaegt. */ .solo-bee{top:18%;width:calc(var(--logo-h) * .34)} } @keyframes wingBeat{ from{transform:rotate(-9deg) scaleY(1)} to {transform:rotate(13deg) scaleY(.62)} } @keyframes sbDriftL{ 0% {transform:translate(0.0%,0.0%) rotate(0.0deg)} 9% {transform:translate(-17.5%,-22.8%) rotate(3.5deg)} 19% {transform:translate(-40.2%,-35.0%) rotate(6.1deg)} 28% {transform:translate(-56.0%,-17.5%) rotate(2.6deg)} 37% {transform:translate(-50.8%,12.2%) rotate(-3.5deg)} 47% {transform:translate(-29.8%,31.5%) rotate(-6.1deg)} 56% {transform:translate(1.8%,40.2%) rotate(-4.4deg)} 65% {transform:translate(19.2%,28.0%) rotate(1.8deg)} 74% {transform:translate(17.5%,5.2%) rotate(5.2deg)} 83% {transform:translate(8.8%,-21.0%) rotate(3.5deg)} 92% {transform:translate(-12.2%,-28.0%) rotate(-1.8deg)} 100% {transform:translate(0.0%,0.0%) rotate(0.0deg)} } @keyframes sbDriftR{ 0% {transform:translate(-0.0%,0.0%) rotate(-0.0deg)} 9% {transform:translate(17.5%,-22.8%) rotate(-3.5deg)} 19% {transform:translate(40.2%,-35.0%) rotate(-6.1deg)} 28% {transform:translate(56.0%,-17.5%) rotate(-2.6deg)} 37% {transform:translate(50.8%,12.2%) rotate(3.5deg)} 47% {transform:translate(29.8%,31.5%) rotate(6.1deg)} 56% {transform:translate(-1.8%,40.2%) rotate(4.4deg)} 65% {transform:translate(-19.2%,28.0%) rotate(-1.8deg)} 74% {transform:translate(-17.5%,5.2%) rotate(-5.2deg)} 83% {transform:translate(-8.8%,-21.0%) rotate(-3.5deg)} 92% {transform:translate(12.2%,-28.0%) rotate(1.8deg)} 100% {transform:translate(-0.0%,0.0%) rotate(-0.0deg)} } /* Ab 1100px traegt der Kopfbereich viel Flaeche. Die Grundregel bindet das Logo allein an die Fensterhoehe — auf breiten Schirmen ist die Hoehe aber der kleinere Wert, das Logo bliebe klein. Deshalb hier zusaetzlich an die Breite gekoppelt, mit min() als Deckel gegen flache Fenster. */ @media (min-width:1100px){ .hero{--logo-h:clamp(260px,min(23vw,40vh),480px)} /* auf .hero statt .hero-inner: die einzelne Biene liegt eine Ebene hoeher und braucht denselben Wert, sonst faellt sie auf die Mobilgroesse zurueck */ .hero-inner{padding-bottom:clamp(6rem,14vh,11rem)} .tagline{font-size:clamp(1.3rem,1.8vw,1.85rem);max-width:40ch;margin-top:1.8rem} .eyebrow{font-size:.76rem;letter-spacing:.46em;margin-bottom:1.9rem} .hero-cta{margin-top:3rem} } .sl0{left:4.31%;top:-5.00%;width:5.62%;animation-name:sbDriftL;animation-duration:6.1s;animation-delay:-4.91s} .sl0 .sb-art{transform:scaleX(-1)} .sl0 .sb-wings{animation-delay:-0.066s} .sl1{left:-6.99%;top:0.02%;width:5.87%;animation-name:sbDriftL;animation-duration:5.5s;animation-delay:-3.58s} .sl1 .sb-art{transform:scaleX(-1)} .sl1 .sb-wings{animation-delay:-0.033s} .sl2{left:6.34%;top:9.72%;width:4.18%;animation-name:sbDriftL;animation-duration:6.8s;animation-delay:-2.21s} .sl2 .sb-art{transform:scaleX(-1)} .sl2 .sb-wings{animation-delay:-0.043s} .sl3{left:-2.10%;top:16.00%;width:4.27%;animation-name:sbDriftL;animation-duration:6.9s;animation-delay:-1.21s} .sl3 .sb-art{transform:scaleX(-1)} .sl3 .sb-wings{animation-delay:-0.057s} .sl4{left:-12.63%;top:16.26%;width:5.93%;animation-name:sbDriftL;animation-duration:7.6s;animation-delay:-7.15s} .sl4 .sb-art{transform:scaleX(-1)} .sl4 .sb-wings{animation-delay:-0.023s} .sl5{left:-22.32%;top:23.21%;width:4.42%;animation-name:sbDriftL;animation-duration:5.6s;animation-delay:-3.79s} .sl5 .sb-art{transform:scaleX(-1)} .sl5 .sb-wings{animation-delay:-0.07s} .sl6{left:-7.39%;top:31.31%;width:3.66%;animation-name:sbDriftL;animation-duration:6.2s;animation-delay:-5.18s} .sl6 .sb-art{transform:scaleX(-1)} .sl6 .sb-wings{animation:none;opacity:.75} .sl7{left:-27.19%;top:35.97%;width:5.1%;animation-name:sbDriftL;animation-duration:7.9s;animation-delay:-6.76s} .sl7 .sb-art{transform:scaleX(-1)} .sl7 .sb-wings{animation-delay:-0.053s} .sl8{left:-18.42%;top:41.31%;width:3.03%;animation-name:sbDriftL;animation-duration:6.9s;animation-delay:-6.56s} .sl8 .sb-art{transform:scaleX(-1)} .sl8 .sb-wings{animation:none;opacity:.75} .sl9{left:-11.74%;top:46.88%;width:3.84%;animation-name:sbDriftL;animation-duration:5.8s;animation-delay:-2.97s} .sl9 .sb-art{transform:scaleX(-1)} .sl9 .sb-wings{animation:none;opacity:.75} .sl10{left:-2.83%;top:50.90%;width:5.83%;animation-name:sbDriftL;animation-duration:6.8s;animation-delay:-3.45s} .sl10 .sb-art{transform:scaleX(-1)} .sl10 .sb-wings{animation-delay:-0.025s} .sl11{left:8.09%;top:52.84%;width:5.07%;animation-name:sbDriftL;animation-duration:6.2s;animation-delay:-6.17s} .sl11 .sb-art{transform:scaleX(-1)} .sl11 .sb-wings{animation-delay:-0.011s} .sl12{left:0.25%;top:67.34%;width:5.81%;animation-name:sbDriftL;animation-duration:7.3s;animation-delay:-3.31s} .sl12 .sb-art{transform:scaleX(-1)} .sl12 .sb-wings{animation-delay:-0.066s} .sl13{left:-8.89%;top:70.71%;width:4.04%;animation-name:sbDriftL;animation-duration:6.0s;animation-delay:-3.51s} .sl13 .sb-art{transform:scaleX(-1)} .sl13 .sb-wings{animation-delay:-0.068s} .sl14{left:9.89%;top:72.77%;width:3.03%;animation-name:sbDriftL;animation-duration:7.8s;animation-delay:-0.43s} .sl14 .sb-art{transform:scaleX(-1)} .sl14 .sb-wings{animation:none;opacity:.75} .sl15{left:9.06%;top:82.13%;width:3.6%;animation-name:sbDriftL;animation-duration:6.1s;animation-delay:-5.21s} .sl15 .sb-art{transform:scaleX(-1)} .sl15 .sb-wings{animation:none;opacity:.75} .sl16{left:6.15%;top:92.90%;width:4.64%;animation-name:sbDriftL;animation-duration:7.6s;animation-delay:-7.45s} .sl16 .sb-art{transform:scaleX(-1)} .sl16 .sb-wings{animation-delay:-0.07s} .sl17{left:-2.04%;top:93.00%;width:3.84%;animation-name:sbDriftL;animation-duration:6.0s;animation-delay:-3.63s} .sl17 .sb-art{transform:scaleX(-1)} .sl17 .sb-wings{animation:none;opacity:.75} .sr0{left:107.74%;top:-5.00%;width:5.99%;animation-name:sbDriftR;animation-duration:7.2s;animation-delay:-4.51s} .sr0 .sb-art{transform:scaleX(1)} .sr0 .sb-wings{animation-delay:-0.066s} .sr1{left:100.59%;top:0.76%;width:3.18%;animation-name:sbDriftR;animation-duration:7.7s;animation-delay:-7.44s} .sr1 .sb-art{transform:scaleX(1)} .sr1 .sb-wings{animation:none;opacity:.75} .sr2{left:124.19%;top:11.53%;width:6.0%;animation-name:sbDriftR;animation-duration:8.2s;animation-delay:-1.8s} .sr2 .sb-art{transform:scaleX(1)} .sr2 .sb-wings{animation-delay:-0.043s} .sr3{left:113.83%;top:12.29%;width:5.17%;animation-name:sbDriftR;animation-duration:7.7s;animation-delay:-2.8s} .sr3 .sb-art{transform:scaleX(1)} .sr3 .sb-wings{animation-delay:-0.057s} .sr4{left:104.91%;top:16.16%;width:4.4%;animation-name:sbDriftR;animation-duration:7.0s;animation-delay:-3.59s} .sr4 .sb-art{transform:scaleX(1)} .sr4 .sb-wings{animation-delay:-0.023s} .sr5{left:96.27%;top:23.70%;width:4.34%;animation-name:sbDriftR;animation-duration:7.3s;animation-delay:-0.66s} .sr5 .sb-art{transform:scaleX(1)} .sr5 .sb-wings{animation-delay:-0.07s} .sr6{left:104.62%;top:27.77%;width:3.21%;animation-name:sbDriftR;animation-duration:6.9s;animation-delay:-5.78s} .sr6 .sb-art{transform:scaleX(1)} .sr6 .sb-wings{animation:none;opacity:.75} .sr7{left:102.43%;top:37.77%;width:3.96%;animation-name:sbDriftR;animation-duration:6.1s;animation-delay:-3.46s} .sr7 .sb-art{transform:scaleX(1)} .sr7 .sb-wings{animation:none;opacity:.75} .sr8{left:110.12%;top:36.78%;width:2.98%;animation-name:sbDriftR;animation-duration:7.4s;animation-delay:-3.39s} .sr8 .sb-art{transform:scaleX(1)} .sr8 .sb-wings{animation:none;opacity:.75} .sr9{left:113.54%;top:46.58%;width:5.17%;animation-name:sbDriftR;animation-duration:8.5s;animation-delay:-3.19s} .sr9 .sb-art{transform:scaleX(1)} .sr9 .sb-wings{animation-delay:-0.036s} .sr10{left:102.37%;top:52.65%;width:5.8%;animation-name:sbDriftR;animation-duration:6.3s;animation-delay:-0.98s} .sr10 .sb-art{transform:scaleX(1)} .sr10 .sb-wings{animation-delay:-0.025s} .sr11{left:113.51%;top:60.89%;width:5.07%;animation-name:sbDriftR;animation-duration:6.7s;animation-delay:-3.01s} .sr11 .sb-art{transform:scaleX(1)} .sr11 .sb-wings{animation-delay:-0.011s} .sr12{left:123.23%;top:64.18%;width:4.08%;animation-name:sbDriftR;animation-duration:7.1s;animation-delay:-2.92s} .sr12 .sb-art{transform:scaleX(1)} .sr12 .sb-wings{animation-delay:-0.066s} .sr13{left:106.66%;top:73.52%;width:2.83%;animation-name:sbDriftR;animation-duration:6.5s;animation-delay:-0.66s} .sr13 .sb-art{transform:scaleX(1)} .sr13 .sb-wings{animation:none;opacity:.75} .sr14{left:100.21%;top:74.04%;width:3.2%;animation-name:sbDriftR;animation-duration:8.2s;animation-delay:-6.85s} .sr14 .sb-art{transform:scaleX(1)} .sr14 .sb-wings{animation:none;opacity:.75} .sr15{left:99.59%;top:83.13%;width:3.1%;animation-name:sbDriftR;animation-duration:7.8s;animation-delay:-7.02s} .sr15 .sb-art{transform:scaleX(1)} .sr15 .sb-wings{animation:none;opacity:.75} .sr16{left:106.65%;top:87.24%;width:6.14%;animation-name:sbDriftR;animation-duration:6.7s;animation-delay:-5.53s} .sr16 .sb-art{transform:scaleX(1)} .sr16 .sb-wings{animation-delay:-0.07s} .sr17{left:118.27%;top:93.00%;width:4.81%;animation-name:sbDriftR;animation-duration:5.5s;animation-delay:-2.87s} .sr17 .sb-art{transform:scaleX(1)} .sr17 .sb-wings{animation-delay:-0.054s} /* ================================================================== REDUZIERTE BEWEGUNG - steht bewusst am DATEIENDE: die Positions- regeln der Schwarmbienen (sl0-17, sr0-17) setzen animation-name und -duration mit gleicher Spezifitaet; die spaetere Regel gewinnt. ================================================================== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .solo-bee{display:none} .js .rv{transform:none;opacity:1} } /* ---------- Pausenschalter fuer Video und Animationen (WCAG 2.2.2) ---------- */ .motion-toggle{ position:absolute;right:1rem;bottom:1rem;z-index:5; width:38px;height:38px;border-radius:50%; border:1px solid rgba(233,227,214,.35); background:rgba(8,8,10,.55);color:var(--wax); display:flex;align-items:center;justify-content:center; cursor:pointer;transition:background .25s,border-color .25s; } .motion-toggle:hover,.motion-toggle:focus-visible{ background:rgba(8,8,10,.8);border-color:var(--honey);outline:none; } .motion-toggle svg{width:14px;height:14px;fill:currentColor} .motion-toggle .icon-play{display:none} .motion-paused .motion-toggle .icon-pause{display:none} .motion-paused .motion-toggle .icon-play{display:block} .motion-paused .hero,.motion-paused .hero *{ animation-play-state:paused !important; } /* Auffangtext, wenn kein Termin mehr in der Zukunft liegt - ohne ihn stuende an der Stelle ein leerer Bereich. */ .ev-none{ margin:0;padding:1.4rem 0; color:var(--wax-faint);font-style:italic; }