/* Social Media Einfach, Entwurf. Eine Akzentfarbe (Signalgelbgrün), Knöpfe rund, Flächen 18 px. */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-var.woff2") format("woff2");font-weight:400 900;font-display:swap}

:root{
  --bg:#0e1110; --fl:#171c1a; --fl2:#1f2623; --linie:#2c3430;
  --text:#f3f1ea; --leise:#aeb5af; --akz:#d8ff3e; --tinte:#0e1110;
  --r:18px;
  --titel:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --lauf:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --weich:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.55 var(--lauf);overflow-x:clip}
h1,h2,h3{font-family:var(--titel);font-weight:800;letter-spacing:-.025em;line-height:1;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--akz);outline-offset:3px;border-radius:6px}
.rahmen{width:min(100% - 2rem,1240px);margin-inline:auto}
.sprung{position:absolute;left:1rem;top:-5rem;z-index:50;background:var(--akz);color:var(--tinte);padding:.8rem 1rem;border-radius:999px;font-weight:700}
.sprung:focus{top:.6rem}
.vorrat{position:absolute}

/* Knopf */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.6rem;border-radius:999px;background:var(--akz);color:var(--tinte);font:700 1.0625rem/1 var(--lauf);text-decoration:none;white-space:nowrap;transition:transform .25s var(--weich),box-shadow .25s var(--weich)}
.knopf:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.knopf:active{transform:translateY(0) scale(.98)}
.knopf-klein{min-height:44px;padding:0 1.1rem;font-size:.9375rem}
.knopf-dunkel{background:var(--tinte);color:var(--text)}
.knopf-dunkel:hover{box-shadow:0 10px 30px -12px rgba(14,17,16,.7)}
.knopf-dunkel:focus-visible{outline-color:var(--tinte)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(14,17,16,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:64px}
.marke{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font:700 1.125rem/1 var(--titel);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.marke-b{background:var(--akz);color:var(--tinte);padding:.22em .42em .26em;border-radius:7px;font-weight:800}
.kopf-nav{display:none;gap:2rem;margin-left:auto;margin-right:1.25rem}
.kopf-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500;color:var(--leise);white-space:nowrap;transition:color .2s}
.kopf-nav a:hover{color:var(--text)}
@media (max-width:430px){
  .marke{flex-direction:column;align-items:flex-start;gap:3px;font-size:.9375rem}
  .marke-b{padding:.12em .36em .16em;border-radius:5px}
  .knopf-klein{padding:0 .95rem;font-size:.875rem}
}
@media (min-width:860px){.kopf-nav{display:flex}.kopf-innen{height:72px}}

/* Einstieg */
.einstieg{position:relative;padding:1.75rem 0 3.5rem;overflow:clip}
.einstieg-raster{display:grid;gap:2.25rem}
h1{font-size:clamp(2.2rem,10.6vw,5.6rem);line-height:.94}
.h1-zwei{display:block;white-space:nowrap}
h1 em{font-style:normal;color:var(--akz)}
.lead{margin:1.1rem 0 1.5rem;max-width:34ch;font-size:clamp(1.0625rem,1.5vw,1.3rem);line-height:1.45;color:var(--leise)}
@media (min-width:900px){
  .einstieg{padding:3rem 0 5rem}
  .einstieg-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:2rem;min-height:min(680px,calc(100dvh - 72px - 8rem))}
  .lead{margin:1.6rem 0 2.2rem}
}

/* Reel */
.reel{--hw:min(268px,74vw);position:relative;width:var(--hw);justify-self:center}
@media (min-width:900px){.reel{--hw:clamp(270px,23vw,318px)}}
.reel-buehne{position:relative}
.reel-flaeche{position:absolute;inset:9% -27% 9% -27%;background:var(--akz);border-radius:var(--r);transform:rotate(-7deg)}
.reel-handy{position:relative;aspect-ratio:9/18.2;padding:9px;border-radius:44px;background:#050606;box-shadow:0 0 0 1.5px #3a423e,0 40px 70px -30px rgba(0,0,0,.9)}
.schirm{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#5c9a7d;perspective:680px;isolation:isolate}
.schirm::after{content:"";position:absolute;inset:0 0 auto;height:34%;background:linear-gradient(rgba(14,17,16,.82),rgba(14,17,16,0));z-index:2;pointer-events:none}
.szenen,.szene{position:absolute;inset:0}
.szene{opacity:0;visibility:hidden;overflow:hidden}
.szene.ist-an{opacity:1;visibility:visible}
html:not(.js) .szene:last-child{opacity:1;visibility:visible}
.bild{position:absolute;inset:0;width:100%;height:100%}

.segmente{position:absolute;inset:0 0 auto;display:flex;gap:4px;padding:0 14px;z-index:4}
html:not(.js) .segmente{display:none}
.seg{flex:1;height:44px;padding:13px 0 0;background:none;border:0;cursor:pointer;display:block}
.seg:focus-visible{outline-offset:-4px}
.balken{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.38);overflow:hidden}
.fuell{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.seg.war .fuell,.seg.ist-an .fuell{transform:scaleX(1)}
.seg:nth-child(1){--dauer:3.6s}.seg:nth-child(2){--dauer:4.8s}.seg:nth-child(3){--dauer:4.4s}.seg:nth-child(4){--dauer:4.8s}

/* Szenentexte: ohne Skript als Liste unter dem Handy, mit Skript im Bild */
.reel-texte{list-style:none;margin:2.6rem 0 0;padding:0;position:relative;display:grid;gap:.3rem;font-size:.9375rem;color:var(--leise)}
.reel.bereit .reel-texte{position:absolute;margin:0;top:44px;left:26px;right:26px;z-index:5;pointer-events:none;display:block;color:#fff;font:700 1.0625rem/1.22 var(--titel);letter-spacing:-.01em}
.reel.bereit .reel-texte li{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(8px)}
.reel.bereit .reel-texte li.ist-an{opacity:1;transform:none;transition:opacity .35s .12s,transform .5s .12s var(--weich)}

.reel-pause{position:relative;display:flex;align-items:center;gap:.5rem;margin:.9rem auto 0;min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--linie);background:var(--bg);color:var(--text);font:600 .875rem/1 var(--lauf);cursor:pointer;transition:border-color .2s}
.reel-pause:hover{border-color:var(--leise)}
.reel-pause svg{width:14px;height:14px;fill:currentColor}
.reel-pause .i-play,.reel.pausiert .reel-pause .i-pause{display:none}
.reel.pausiert .reel-pause .i-play{display:block}

/* Szene 1: Betrieb */
.aufnahme{position:absolute;left:18px;bottom:20px;width:34px;height:20px;border-radius:999px;background:rgba(14,17,16,.82);display:grid;place-items:center}
.aufnahme i{width:8px;height:8px;border-radius:50%;background:var(--akz)}
.sucher{position:absolute;inset:25% 9% 13%;--w:linear-gradient(#fff,#fff);background:var(--w) 0 0/22px 2px,var(--w) 0 0/2px 22px,var(--w) 100% 0/22px 2px,var(--w) 100% 0/2px 22px,var(--w) 0 100%/22px 2px,var(--w) 0 100%/2px 22px,var(--w) 100% 100%/22px 2px,var(--w) 100% 100%/2px 22px;background-repeat:no-repeat;opacity:.9}
/* Szene 2: Drohne steigt, Ansicht kippt */
.s2-vorn{opacity:0;transform-origin:50% 100%}
.s2-oben{transform-origin:50% 60%}
.s2-drohne{position:absolute;left:50%;top:40%;width:36%;transform:translateX(-50%)}
.s2-schatten{position:absolute;left:50%;top:56%;width:22%;aspect-ratio:2.4;border-radius:50%;background:#0e1110;opacity:.28;transform:translateX(-50%)}
/* Szene 3: Schnitt */
.s3-titel{position:absolute;left:9%;top:33%;overflow:hidden;border-radius:8px}
.s3-titel span{display:block;background:var(--akz);color:var(--tinte);font:800 1.5rem/1 var(--titel);letter-spacing:-.02em;padding:.3em .45em .36em}
.pult{position:absolute;inset:auto 0 0;height:34%;background:rgba(14,17,16,.95);border-radius:var(--r) var(--r) 0 0;padding:20px 8% 0}
.spur{display:flex;gap:3px}
.spur-a i{height:38px;border-radius:7px;flex:0 0 auto}
.spur-a i:nth-child(1){width:30%;background:#e8623c}
.spur-a i:nth-child(2){width:40%;background:#86b99f}
.spur-a i:nth-child(3){width:calc(30% - 6px);background:#8fd0e0}
.spur-b{margin-top:8px}
.spur-b i{height:16px;width:48%;margin-left:22%;border-radius:5px;background:var(--akz);transform-origin:0 50%}
.nadel{position:absolute;left:8%;right:8%;top:10px;bottom:16px;transform:translateX(62%)}
.nadel::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;border-radius:2px;background:#fff}
/* Szene 4: fertiges Video */
.s4-gross{position:absolute;left:31%;top:39%;width:38%;fill:var(--akz);opacity:0}
.s4-leiste{position:absolute;right:12px;bottom:11%;display:grid;gap:12px}
.s4-leiste>span{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(14,17,16,.82);display:grid;place-items:center;color:#fff}
.s4-leiste svg{width:24px;height:24px}
.s4-herz svg{fill:var(--akz)}
.s4-herz .flug{position:absolute;left:10px;top:10px;opacity:0}

@media (prefers-reduced-motion:no-preference){
  .js .szene.s1.ist-an .s1-bild{animation:s1-zoom 3.8s linear both}
  .js .szene.s1.ist-an .aufnahme i{animation:blink 1s steps(2,jump-none) infinite}
  .js .szene.s1.ist-an .sucher{animation:sucher .7s var(--weich) both}
  .js .szene.s2.ist-an .s2-vorn{animation:s2-vorn 4.8s cubic-bezier(.5,0,.3,1) both}
  .js .szene.s2.ist-an .s2-oben{animation:s2-oben 4.8s cubic-bezier(.4,0,.2,1) both}
  .js .szene.s2.ist-an .s2-drohne{animation:s2-drohne 4.8s cubic-bezier(.4,0,.2,1) both}
  .js .szene.s2.ist-an .s2-schatten{animation:s2-schatten 4.8s linear both}
  .js .szene.s3.ist-an .pult{animation:von-unten .6s var(--weich) both}
  .js .szene.s3.ist-an .spur-a i{animation:clip .55s var(--weich) both}
  .js .szene.s3.ist-an .spur-a i:nth-child(1){animation-delay:.45s}
  .js .szene.s3.ist-an .spur-a i:nth-child(2){animation-delay:.8s}
  .js .szene.s3.ist-an .spur-a i:nth-child(3){animation-delay:1.15s}
  .js .szene.s3.ist-an .spur-b i{animation:wachs .5s 1.9s var(--weich) both}
  .js .szene.s3.ist-an .s3-titel span{animation:von-unten .55s 2.1s var(--weich) both}
  .js .szene.s3.ist-an .nadel{animation:nadel 4.4s linear both}
  .js .szene.s3.ist-an .s3-bild{animation:s3-bild 4.4s linear both}
  .js .szene.s4.ist-an .s4-bild{animation:s4-bild 4.8s linear both}
  .js .szene.s4.ist-an .s4-gross{animation:herz-gross 4.8s var(--weich) both}
  .js .szene.s4.ist-an .s4-herz>svg:first-child{animation:herz-pop 4.8s var(--weich) both}
  .js .szene.s4.ist-an .flug{animation:flug 1.9s ease-out both}
  .js .szene.s4.ist-an .f1{animation-delay:1.3s;--x:-14px}
  .js .szene.s4.ist-an .f2{animation-delay:1.85s;--x:10px}
  .js .szene.s4.ist-an .f3{animation-delay:2.5s;--x:-6px}
  .js .szene.s4.ist-an .s4-auge svg{animation:auge 1.6s 2.2s ease-in-out both}
  .js .seg.ist-an .fuell{animation:lauf var(--dauer) linear both}

  .reel.pausiert .reel-handy *,.reel.ausser-sicht .reel-handy *,.reel-handy:has(:focus-visible) *{animation-play-state:paused!important}
  @media (hover:hover){.reel-handy:hover *{animation-play-state:paused!important}}

  .luft-drohne{animation:schweben 5s ease-in-out infinite}
}
@keyframes lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes blink{from{opacity:1}to{opacity:.15}}
@keyframes sucher{from{opacity:0;transform:scale(1.12)}}
@keyframes s1-zoom{from{transform:scale(1)}to{transform:scale(1.14) translateY(-2%)}}
@keyframes s2-vorn{0%{opacity:1;transform:scale(1.14) translateY(-2%)}36%{opacity:1;transform:translateY(24%) scale(.94)}60%,100%{opacity:0;transform:translateY(62%) rotateX(-58deg) scale(.9)}}
@keyframes s2-oben{0%,34%{opacity:0;transform:rotateX(66deg) scale(2) translateY(-16%)}66%{opacity:1;transform:rotateX(0) scale(1.28)}100%{opacity:1;transform:scale(1.02)}}
@keyframes s2-drohne{0%{transform:translate(-50%,300%) scale(.55)}36%{transform:translate(-50%,0) scale(1)}66%{transform:translate(-50%,-14%) scale(.92)}83%{transform:translate(-50%,4%) scale(.88)}100%{transform:translate(-50%,0) scale(.88)}}
@keyframes s2-schatten{0%,50%{opacity:0}72%,100%{opacity:.28}}
@keyframes von-unten{from{transform:translateY(105%)}}
@keyframes clip{from{opacity:0;transform:translateX(140%)}}
@keyframes wachs{from{transform:scaleX(0)}}
@keyframes nadel{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes s3-bild{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@keyframes s4-bild{from{transform:scale(1.16) rotate(-3deg)}to{transform:scale(1)}}
@keyframes herz-gross{0%,14%{opacity:0;transform:scale(.3)}22%{opacity:1;transform:scale(1.15)}28%,44%{opacity:1;transform:scale(1)}56%,100%{opacity:0;transform:scale(1.35)}}
@keyframes herz-pop{0%,18%{transform:scale(1)}25%{transform:scale(1.5)}33%,100%{transform:scale(1)}}
@keyframes flug{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x,0),-150px) scale(1.1)}}
@keyframes auge{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}60%{transform:scale(1)}80%{transform:scale(1.18)}}
@keyframes schweben{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-14%)}}

/* Abschnitte */
.abschnitt{padding:clamp(4rem,10vw,8.5rem) 0}
h2{font-size:clamp(2rem,5.6vw,4rem);margin-bottom:clamp(2rem,4.5vw,3.5rem)}

.gross-raster{display:grid;gap:1rem}
.kachel{position:relative;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-height:440px}
.kachel h3{font-size:clamp(2rem,4.4vw,3.4rem);hyphens:manual}
.kachel p{margin-top:.9rem;max-width:36ch;font-size:1.0625rem}
.kachel-text{padding:clamp(1.5rem,3vw,2.5rem)}
.kachel-video{background:var(--akz);color:var(--tinte)}
.streifen{position:relative;flex:1;min-height:210px;margin-top:auto}
.streifen svg{position:absolute;top:8%;width:30%;height:auto;aspect-ratio:9/16;border-radius:14px;border:3px solid var(--tinte);background:var(--tinte)}
.streifen svg:nth-child(1){left:9%;transform:rotate(-7deg)}
.streifen svg:nth-child(2){left:35%;top:0;transform:rotate(1deg);z-index:1}
.streifen svg:nth-child(3){left:61%;transform:rotate(8deg)}
.kachel-drohne{background:var(--fl)}
.luft{position:relative;flex:1;min-height:230px;overflow:hidden}
.luft-karte{position:absolute;inset:-40% -5%;width:110%;height:180%;transform:rotate(-14deg)}
.luft-drohne{position:absolute;left:50%;top:32%;width:min(34%,150px);transform:translateX(-50%);filter:drop-shadow(0 26px 10px rgba(14,17,16,.35))}
@media (min-width:860px){
  .gross-raster{grid-template-columns:1.2fr .8fr}
  .kachel{min-height:540px}
}

.zeilen{list-style:none;margin:clamp(2.5rem,6vw,4.5rem) 0 0;padding:0}
.zeilen li{display:grid;gap:.6rem;padding:1.6rem 0;border-top:1px solid var(--linie)}
.zeilen h3{font-size:clamp(1.7rem,4vw,2.9rem)}
.zeilen p{color:var(--leise);max-width:44ch;font-size:1.0625rem}
@media (min-width:760px){.zeilen li{grid-template-columns:1fr 1fr;align-items:baseline;gap:2rem;padding:2.1rem 0}}

.ablauf{background:var(--fl)}
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:2rem 1.5rem}
.schritte li{border-top:3px solid var(--akz);padding-top:1.1rem}
.schritte h3{font-size:clamp(1.5rem,2.3vw,2rem)}
.schritte p{margin-top:.7rem;color:var(--leise)}
@media (min-width:560px){.schritte{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.schritte{grid-template-columns:repeat(4,1fr)}}

.inhaber-raster{display:grid;gap:2rem;align-items:center}
.monogramm{width:min(100%,300px);aspect-ratio:1;border-radius:var(--r);background:var(--fl);display:grid;place-items:center}
.monogramm span{font:800 clamp(6rem,16vw,9rem)/1 var(--titel);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--akz)}
.inhaber-text h2{font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.01em;color:var(--leise);font-weight:600;margin-bottom:1.1rem}
.inhaber-text .gross{font:700 clamp(1.7rem,3.6vw,2.9rem)/1.08 var(--titel);letter-spacing:-.025em;max-width:22ch;text-wrap:balance}
.inhaber-text p+p{margin-top:1.3rem;color:var(--leise);max-width:52ch}
@media (min-width:820px){.inhaber-raster{grid-template-columns:300px 1fr;gap:clamp(2.5rem,6vw,5rem)}}

.schluss{background:var(--akz);color:var(--tinte);padding:clamp(4rem,9vw,7.5rem) 0}
.schluss :focus-visible{outline-color:var(--tinte)}
.schluss h2{font-size:clamp(2.3rem,6.4vw,5rem);margin-bottom:1.3rem;max-width:12ch}
.schluss-raster{display:grid;gap:2.5rem}
.schluss-raster>div>p{max-width:38ch;font-size:1.125rem;margin-bottom:1.8rem}
.schluss-daten{font-style:normal;display:grid;gap:1.4rem;align-content:end}
.schluss-daten p{font:700 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--titel);letter-spacing:-.015em}
.schluss-daten a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.18em}
.klein{display:block;font:600 .9375rem/1.4 var(--lauf);letter-spacing:0}
@media (min-width:860px){.schluss-raster{grid-template-columns:1.3fr .7fr;align-items:end}}

.fuss{padding:2.5rem 0 3rem;color:var(--leise);font-size:.9375rem}
.fuss-innen{display:grid;gap:1.25rem}
.fuss strong{color:var(--text)}
.fuss-links{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
.fuss-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-underline-offset:.2em}
@media (min-width:760px){.fuss-innen{grid-template-columns:1fr auto auto;align-items:end;gap:3rem}.fuss-vorschau{padding-bottom:.6rem}}

/* Einblenden beim Scrollen: nur wo der Browser es ohne Skript kann, sonst steht alles da */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .zeig{animation:hoch linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .schritte .zeig:nth-child(2),.zeilen .zeig:nth-child(2){animation-range:entry 8% entry 63%}
    .schritte .zeig:nth-child(3),.zeilen .zeig:nth-child(3){animation-range:entry 16% entry 71%}
    .schritte .zeig:nth-child(4){animation-range:entry 24% entry 79%}
  }
}
@keyframes hoch{from{opacity:.15;transform:translateY(34px)}}

/* Rechtstexte */
.recht{padding:2.5rem 0 5rem}
.recht .rahmen{max-width:46rem}
.recht h1{font-size:clamp(2.2rem,7vw,3.6rem);margin-bottom:1.5rem}
.recht h2{font-size:1.5rem;letter-spacing:-.015em;margin:2.4rem 0 .7rem;line-height:1.15}
.recht p,.recht ul{margin:0 0 1rem;color:#d6d9d2}
.recht ul{padding-left:1.2rem}
.recht a{text-underline-offset:.2em}
.hinweis{border:1px solid var(--akz);border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:2rem;color:var(--text)!important;font-weight:600}
.offen{background:rgba(216,255,62,.16);color:var(--akz);border-radius:5px;padding:.05em .4em;font-weight:600;white-space:nowrap}
.zurueck{display:inline-flex;align-items:center;min-height:44px;margin-bottom:1rem;color:var(--leise)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}