/* ============================================================
   1. BILD-PFADE
   Alle Bilder liegen unter /assets/images/ – hier zentral referenziert,
   damit im restlichen CSS nie ein Dateiname auftaucht.
   ============================================================ */
:root{
  --img-logo:      url('../assets/images/logo.png');       /* Schriftzug, freigestellt */
  --img-logo-full: url('../assets/images/logo-full.png');  /* inkl. Tagline, fuer Social/Print */
  --img-hero:      url('../assets/images/hero.jpg');       /* 3200 px, Qualitaet 93, ohne Farbunterabtastung */
  --img-about:     url('../assets/images/about.jpg');
  --img-band-about:    url('../assets/images/bands/about.jpg');
  --img-band-services: url('../assets/images/bands/services.jpg');
  --img-band-workflow: url('../assets/images/bands/workflow.jpg');
  --img-band-work:     url('../assets/images/bands/work.jpg');
  --img-footer:    url('../assets/images/footer.jpg');
  --img-service-1: url('../assets/images/services/filmproduktion.jpg');
  --img-service-2: url('../assets/images/services/drohne.jpg');
  --img-service-3: url('../assets/images/services/postproduktion.jpg');
  --img-work-1:    url('../assets/images/work/stoos-custom-cape-town.jpg');
  --img-work-2:    url('../assets/images/work/interview.jpg');
  --img-work-3:    url('../assets/images/work/kino-spot.jpg');
  --img-work-4:    url('../assets/images/work/zeus-custom-bangkok.jpg');
  --img-work-5:    url('../assets/images/work/dvg-shapes-cape-town.jpg');
  --img-work-6:    url('../assets/images/work/solemate-podcast.jpg');
  --img-work-7:    url('../assets/images/work/kurzdoku.jpg');
  --img-work-8:    url('../assets/images/work/talking-heads.jpg');
}

/* ============================================================
   2. DESIGN-TOKENS
   ============================================================ */
:root{
  --bg:            #08090a;
  --bg-soft:       #0d0f11;
  --line:          #1e2124;
  --ink:           #ffffff;
  --ink-muted:     #9aa0a4;
  --ink-dim:       #6c7378;
  --accent:        #f15824;   /* Orange aus der Logodatei */
  --accent-soft:   #ff7a4d;
  --logo-grey:     #b8b0a5;   /* Grau der Logo-Ornamente */

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  --wrap: 1190px;
  --gutter: clamp(20px, 5vw, 44px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   3. BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Typo-Bausteine */
.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:.005em;
  margin:0;
}
.eyebrow{
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:500;
  margin:0;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:1.1em;
  padding:.95em 1.5em;
  border:1px solid rgba(255,255,255,.35);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
  z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ border-color:var(--accent); }
.btn:hover::before{ transform:translateY(0); }
.btn svg{ width:22px; height:9px; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn--solid{ border-color:rgba(255,255,255,.5); }

/* ============================================================
   4. HEADER / NAVIGATION
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  padding-block:22px;
  transition:background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s;
}
.site-header.is-stuck{
  text-shadow:none;
  background:rgba(8,9,10,.86);
  backdrop-filter:blur(14px);
  padding-block:12px;
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.brand{ display:block; width:104px; flex:0 0 auto; transition:width .5s var(--ease); }
.site-header.is-stuck .brand{ width:70px; }
.brand-mark{
  display:block;                 /* Span -> ohne dies greifen width/aspect-ratio nicht */
  width:100%; aspect-ratio:320/442;
  background:var(--img-logo) center/contain no-repeat;
}
.brand-tag{
  display:block;
  margin:.55em 0 0;
  font-size:.5rem;
  letter-spacing:.2em;
  line-height:1.5;
  text-align:center;
  color:var(--logo-grey);
  text-transform:uppercase;
}
.site-header.is-stuck .nav a{ color:var(--ink-muted); }

.nav{ display:flex; gap:clamp(18px,3vw,42px); padding-top:14px; }
.nav a{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  position:relative;
  padding-bottom:4px;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-actions{ display:flex; align-items:center; gap:18px; padding-top:6px; }
.header-actions .btn{ padding:.8em 1.3em; }

.burger{
  width:34px; height:22px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  flex:0 0 auto;
}
.burger span{
  display:block; height:2px; background:#fff;
  border-radius:2px;
  /* Der Schatten haelt die Striche auch auf hellen Bildstellen sichtbar */
  box-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:transform .4s var(--ease), opacity .3s;
}
.site-header.is-stuck .burger span{ box-shadow:none; }
.burger.is-open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* Overlay-Menü */
.overlay{
  position:fixed; inset:0; z-index:99;
  background:var(--bg);
  display:grid; place-items:center;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .7s var(--ease), visibility 0s linear .7s;
}
.overlay.is-open{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:clip-path .7s var(--ease), visibility 0s;
}
.overlay-nav{ display:grid; gap:.1em; text-align:center; }
.overlay-nav a{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(2.4rem,9vw,5rem);
  line-height:1.05;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.overlay-nav a:hover{ color:var(--accent); }
.overlay-meta{
  position:absolute; bottom:8vh; left:0; right:0;
  text-align:center; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;   /* Fallback fuer Browser ohne svh */
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:var(--img-hero) 42% center/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
/* Nur ein schmaler Verlauf ganz oben, damit die Navigation lesbar bleibt.
   Das Bild selbst bleibt unangetastet – Schrift wird über Schatten abgesetzt. */
.hero::after{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:230px;
  background:linear-gradient(to bottom, rgba(8,9,10,.6) 0%, rgba(8,9,10,0) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding:0 var(--gutter) clamp(34px,5vh,58px);
}
/* .claim = die grosse Zeile ueber einem Bild. Wird vom Hero und von jedem
   Section-Band benutzt, damit Groesse und Bewegung ueberall identisch sind. */
.claim{
  font-size:clamp(3rem,8.6vw,7.4rem);
  text-shadow:0 6px 44px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.45);
}
.claim span{ display:block; overflow:hidden; }
.claim span > i{
  display:block; font-style:normal;
  transform:translateY(105%);
}
.hero-title{
  text-align:right;
  margin-bottom:clamp(34px,7vh,76px);
}
/* Kleine Zeile ueber dem Claim. Breite an die Headline angeglichen: die
   Headline ist ~5.7em breit (11 schmale Versalzeichen), diese Zeile ~13em
   (25 Zeichen) – bei rund 0.44x der Claim-Groesse decken sich beide Breiten. */
.hero-kicker{
  text-align:right;
  margin:0 0 .55em;
  font-size:clamp(.85rem,2.55vw,2.15rem);
  color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
}
.hero-kicker span{
  display:block;
  overflow:hidden;
  /* Die Anton-Versalien ragen oben aus der Zeilenbox; ohne diese Reserve
     kappt overflow:hidden die Oberkante waehrend der Einblende-Animation. */
  padding-top:.14em;
}
.hero-kicker span > i{
  display:block; font-style:normal;
  transform:translateY(110%);
  animation:riseIn .95s var(--ease) .02s forwards;
}
.hero-title span > i{ animation:riseIn .95s var(--ease) forwards; }
.hero-title span:nth-child(1) > i{ animation-delay:.15s; }
.hero-title span:nth-child(2) > i{ animation-delay:.28s; }
.hero-title span:nth-child(3) > i{ animation-delay:.41s; }
@keyframes riseIn{ to{ transform:translateY(0); } }

.hero-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.scroll-cue{
  display:flex; flex-direction:column; gap:14px;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; line-height:1.6;
  margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.scroll-track{
  width:1px; height:52px;
  background:rgba(255,255,255,.28);
  position:relative; overflow:hidden;
}
.scroll-track i{
  position:absolute; inset:0;
  background:var(--accent);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

.showreel{
  display:inline-flex; align-items:center; gap:16px;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.showreel-play{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  display:grid; place-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.showreel-play svg{ width:9px; height:11px; margin-left:2px; }
.showreel:hover .showreel-play{ background:var(--accent); border-color:var(--accent); transform:scale(1.12); }


/* ============================================================
   6. SECTION-BANDS  (bildfuellender Auftakt je Section)
   Aufbau im HTML:
     <div class="band band--about">
       <div class="band-bg"></div>
       <h2 class="display claim band-title"><span><i>About</i></span></h2>
     </div>
   Neue Section = ein Bild in assets/images/bands/, eine Variable oben
   und eine .band--NAME Regel hier unten.
   ============================================================ */
.band{
  position:relative;
  min-height:100vh;   /* Fallback fuer Browser ohne svh */
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.band-bg{
  position:absolute; inset:0;
  background-color:var(--bg-soft);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.band-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  width:100%; max-width:1320px;
  margin:0 auto;
  padding:0 var(--gutter) clamp(34px,7vh,76px);
  text-align:right;
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(.72rem,1.35vw,1.05rem);
  letter-spacing:.06em;
  line-height:1.3;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
@media (max-width:620px){
  /* Auf schmalen Schirmen ueber die About-Zeile setzen, sonst ueberlagern sich beide. */
  .band-caption{
    text-align:left;
    bottom:auto; top:0;
    padding:clamp(90px,16vh,130px) var(--gutter) 0;
    font-size:.72rem;
  }
}
.band-title{
  position:relative; z-index:2;
  width:100%; max-width:1320px;
  margin:0 auto;
  padding:0 var(--gutter) clamp(34px,7vh,76px);
}
/* Zeile rechts statt links ausrichten, falls das Bild es verlangt */
.band--right .band-title{ text-align:right; }

/* Helles Bild: Schrift dunkel, Schatten hell – sonst verschwindet die Zeile */
.band--light .band-title{
  color:var(--bg);
  text-shadow:0 4px 34px rgba(255,255,255,.75), 0 1px 3px rgba(255,255,255,.6);
}

/* Bewegung wie im Hero, aber ausgeloest beim Hereinscrollen */
.band.is-visible .claim span > i{ animation:riseIn .95s var(--ease) forwards; }
.band.is-visible .claim span:nth-child(1) > i{ animation-delay:.15s; }
.band.is-visible .claim span:nth-child(2) > i{ animation-delay:.28s; }
.band.is-visible .claim span:nth-child(3) > i{ animation-delay:.41s; }

.band--about .band-bg{ background-image:var(--img-band-about); }

/* Luft nach einem Band. Bewusst als margin, nicht als padding: die Zitat-Sektion
   hat eine bildfuellende Spalte, die ihre Hoehe aus der Textspalte bezieht –
   Innenabstand wuerde das Bild mitwachsen lassen und den Ausschnitt aendern. */
.band + .about{
  margin-top:clamp(78px,11vw,140px);
  margin-bottom:clamp(64px,9vw,110px);
}
.band--services .band-bg{ background-image:var(--img-band-services); }
.band--workflow .band-bg{ background-image:var(--img-band-workflow); }
.band--work .band-bg{ background-image:var(--img-band-work); }

/* ============================================================
   7. ZITAT / ÜBER UNS
   ============================================================ */
.about{
  display:grid;
  /* Zweiter Wert steuert die Bildbreite: hoeher = groesseres Bild. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  /* Beidseitig auf das Raster der uebrigen Sections ausgerichtet: die rechte
     Bildkante steht damit in einer Flucht mit den Karten und Buttons darunter. */
  padding-inline:max(var(--gutter), calc(50% - var(--wrap) / 2 + var(--gutter)));
}
.about-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(24px,3.5vw,44px);
  align-items:start;
  padding:clamp(52px,8vw,92px) clamp(28px,5vw,64px) clamp(52px,8vw,92px) 0;
}
.about-quote{ font-size:clamp(1.7rem,3.5vw,2.7rem); line-height:1.02; }
.about-text{ padding-top:0; }
.about-text p{
  /* Der grosse Zeilenabstand erzeugt oberhalb der ersten Zeile eine Luecke.
     Der negative Wert gleicht genau diese halbe Zeilenhoehe aus, damit der
     Absatz auf derselben Hoehe beginnt wie das Zitat daneben:
     (1.85 - 1) / 2 = 0.425em */
  margin:-.425em 0 0;
  color:var(--ink-muted);
  font-size:.95rem;
  line-height:1.85;
  max-width:38ch;
}
/* Festes Format statt Streckung: das Bild richtet sich nach sich selbst,
   nicht nach der Hoehe der Textspalte daneben. */
.about-media{
  background:var(--img-about) 48% center/cover no-repeat;
  aspect-ratio:17/9;
  align-self:center;
}

/* ============================================================
   8. LEISTUNGEN
   ============================================================ */
.section{ padding-block:clamp(64px,9vw,110px); border-bottom:1px solid var(--line); }
/* Nach einem bildfuellenden Band braucht der Inhalt mehr Luft, sonst klebt er
   direkt unter der Bildkante. */
.band + .section{ padding-top:clamp(78px,11vw,140px); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  margin-bottom:clamp(32px,5vw,52px);
}
.section-head h2{ font-size:clamp(1.9rem,4.4vw,3.15rem); margin-top:.5em; line-height:.98; }

.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.card{
  position:relative;
  aspect-ratio:293/226;
  overflow:hidden;
  display:block;
}
.card-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1);
  transition:transform .9s var(--ease), filter .6s var(--ease);
  filter:saturate(.95);
}
.card:hover .card-img{ transform:scale(1.07); filter:saturate(1.15); }
.card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,9,10,.88) 6%, rgba(8,9,10,.15) 62%);
  transition:opacity .5s var(--ease);
}
.card-num{
  position:absolute; top:14px; left:18px; z-index:2;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4vw,3.5rem);
  line-height:1;
  color:rgba(255,255,255,.42);
  transition:color .5s var(--ease);
}
.card:hover .card-num{ color:var(--accent); }
.card-label{
  position:absolute; left:18px; right:18px; bottom:14px; z-index:2;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.25rem);
  letter-spacing:.02em;
}
.card-1 .card-img{ background-image:var(--img-service-1); }
.card-2 .card-img{ background-image:var(--img-service-2); }
.card-3 .card-img{ background-image:var(--img-service-3); }

/* ============================================================
   9. ARBEITEN
   ============================================================ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
/* Alle Kacheln haben dasselbe Format. Die Bilddateien sind zusaetzlich auf
   exakt 1200x675 px vereinheitlicht, damit keine unterschiedlich scharf
   wirkenden Zuschnitte entstehen. */
.work-item{ position:relative; aspect-ratio:16/9; overflow:hidden; display:block; }
.work-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .9s var(--ease), filter .6s var(--ease);
  filter:brightness(.86);
}
.work-item:hover .work-img{ transform:scale(1.06); filter:brightness(1); }
.work-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,9,10,.55) 0%, rgba(8,9,10,0) 55%);
}

/* Dezenter Playbutton, mittig auf jeder Kachel */
.work-play{
  position:absolute; top:50%; left:50%; z-index:2;
  width:clamp(38px,4.2vw,52px); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  background:rgba(8,9,10,.22);
  transform:translate(-50%,-50%);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.work-play svg{ width:34%; height:auto; margin-left:8%; }
.work-item:hover .work-play{
  background:var(--accent);
  border-color:var(--accent);
  transform:translate(-50%,-50%) scale(1.12);
}

.work-title{
  position:absolute; left:14px; bottom:11px; z-index:2;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.work-item:hover .work-title{ opacity:1; transform:translateY(0); }

.work-1 .work-img{ background-image:var(--img-work-1); }
.work-2 .work-img{ background-image:var(--img-work-2); }
.work-3 .work-img{ background-image:var(--img-work-3); }
.work-4 .work-img{ background-image:var(--img-work-4); }
.work-5 .work-img{ background-image:var(--img-work-5); }
.work-6 .work-img{ background-image:var(--img-work-6); }
.work-7 .work-img{ background-image:var(--img-work-7); }
.work-8 .work-img{ background-image:var(--img-work-8); }


/* ============================================================
   10. WORKFLOW  (Prozessschritte)
   Die Nummerierung steht hier zu Recht: die Schritte sind eine
   Reihenfolge, keine Dekoration.
   ============================================================ */
.workflow-figure{ margin:0; }
.workflow-image{
  display:block;
  width:100%; height:auto;
  /* Helle Zeichnung auf dunkler Seite: leichter Rahmen statt harter Kante */
  border:1px solid var(--line);
}


/* ============================================================
   11. VIDEO-OVERLAY  (Showreel)
   Das iframe wird erst beim Klick erzeugt und beim Schliessen wieder
   entfernt. So laedt YouTube nichts, solange niemand das Video startet,
   und der Ton hoert beim Schliessen auf.
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid;
  grid-template-rows:auto auto;
  align-content:center; justify-items:center;
  gap:16px;
  padding:clamp(16px,5vw,56px);
  /* Bewusst durchscheinend: die Seite dahinter muss erkennbar bleiben,
     sonst wirkt das Overlay wie eine eigene Seite. */
  background:rgba(8,9,10,.9);
  backdrop-filter:blur(10px);
  animation:lightboxIn .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
@keyframes lightboxIn{ from{ opacity:0; } to{ opacity:1; } }

.lightbox-frame{
  width:100%; max-width:1240px;
  aspect-ratio:16/9;
  background:#000;
}

.lightbox-frame iframe{
  display:block; width:100%; height:100%; border:0;
}
.lightbox-fallback{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox-fallback:hover{ color:var(--accent); border-color:var(--accent); }

.lightbox-close{
  position:absolute;
  top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px);
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:var(--ink);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox-close svg{ width:18px; height:18px; }
.lightbox-close:hover{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }


/* ============================================================
   12. UNTERSEITEN
   Der Kopf der Seite ist fixiert, deshalb braucht der Inhalt oben
   Platz – auf der Startseite uebernimmt das der Hero.
   ============================================================ */
.subpage{ padding-top:clamp(200px,26vw,240px); }
.page-title{ font-size:clamp(2.4rem,6vw,4.4rem); margin:.3em 0 0; line-height:.98; }
.page-media{
  aspect-ratio:21/9;
  background:var(--img-service-1) center/cover no-repeat;
  margin:clamp(30px,5vw,54px) 0 clamp(34px,5vw,58px);
}
.page-lead{
  margin:0 0 1em;
  font-size:1.02rem;
  line-height:1.75;
  color:var(--ink);
  max-width:52ch;
}
.page-sub{
  margin:0 0 2.4em;
  font-size:.9rem;
  line-height:1.7;
  color:var(--ink-muted);
}
.page-label{
  font-family:var(--font-body);
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-dim);
  margin:0 0 1.1em;
}
.page-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0 0 2.6em; padding:0;
}
.page-tags li{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
  border:1px solid var(--line);
  padding:.6em .95em;
}
.page-media--drohne{ background-image:var(--img-service-2); }
.page-media--postproduktion{ background-image:var(--img-service-3); }
/* --- Rechtstexte --- */
.legal{ max-width:74ch; }
.legal h2{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  letter-spacing:.01em;
  margin:2.6em 0 .9em;
  color:var(--ink);
}
.legal h2:first-child{ margin-top:0; }
.legal h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  margin:2em 0 .6em;
  color:var(--ink);
}
.legal p{
  margin:0 0 1.2em;
  font-size:.92rem;
  line-height:1.85;
  color:var(--ink-muted);
}
.legal p strong{ color:var(--ink); font-weight:500; }
.legal a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.legal .legal-emphasis{
  font-size:.82rem;
  line-height:1.9;
  letter-spacing:.01em;
  border-left:2px solid var(--line);
  padding-left:clamp(16px,2.5vw,26px);
}
.legal-source{
  margin-top:3em;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* --- Rechtstexte --- */
.legal{ max-width:76ch; }
.legal h2{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.1;
  margin:2.8em 0 .9em;
}
.legal h2:first-of-type{ margin-top:1.6em; }
.legal h3{
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  margin:2.2em 0 .7em;
}
.legal p{
  margin:0 0 1.3em;
  color:var(--ink-muted);
  font-size:.95rem;
  line-height:1.9;
}
.legal address{
  font-style:normal;
  color:var(--ink);
  line-height:2;
  margin:0 0 1.3em;
}
.legal a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.legal .legal-caps{
  font-size:.82rem;
  line-height:1.85;
  color:var(--ink-dim);
}
.legal-source{
  margin-top:3em;
  font-size:.78rem;
  color:var(--ink-dim);
}

/* --- Rechtstexte (Impressum, Datenschutz) --- */
.legal{ max-width:72ch; }
.legal h2{
  font-family:var(--font-display);
  font-weight:400; text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  letter-spacing:.01em;
  margin:2.6em 0 .9em;
}
.legal h2:first-of-type{ margin-top:1.8em; }
.legal p,
.legal address{
  margin:0 0 1.3em;
  font-style:normal;
  color:var(--ink-muted);
  font-size:.95rem;
  line-height:1.85;
}
.legal strong{ color:var(--ink); font-weight:500; }
.legal a{ color:var(--accent); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.legal a:hover{ border-color:var(--accent); }
.legal-note{
  margin:0 0 2.4em;
  padding:1em 0 1em 1.3em;
  border-left:2px solid var(--accent);
  color:var(--ink);
  font-size:.92rem;
  line-height:1.8;
}
.page-back{
  display:inline-flex; align-items:center; gap:.9em;
  margin-top:clamp(36px,6vw,64px);
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .3s var(--ease);
}
.page-back svg{ width:22px; height:9px; transform:rotate(180deg); }
.page-back:hover{ color:var(--accent); }

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer{ position:relative; padding-top:clamp(64px,9vw,104px); }
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(28px,5vw,56px);
  align-items:start;
}
.footer-cta h2{ font-size:clamp(1.9rem,4vw,2.9rem); line-height:.98; }
.footer-cta .btn{ margin-top:1.8em; }
.footer-media{
  aspect-ratio:900/291;
  background:var(--img-footer) center/cover no-repeat;
  opacity:.85;
}
.footer-contact{ display:grid; gap:.9em; justify-items:start; }
.footer-brand{ width:82px; margin-bottom:.6em; }
.footer-brand .brand-mark{ width:100%; }
.footer-contact a{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted);
  transition:color .3s var(--ease);
}
.footer-contact a:hover{ color:var(--accent); }
.footer-social{ display:flex; gap:22px; margin-top:.8em; }
.footer-address{
  margin:0 0 .4em;
  font-size:.78rem;
  line-height:1.75;
  color:var(--ink-muted);
}
.footer-bottom{
  margin-top:clamp(34px,5vw,52px);
  padding-block:22px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:10px clamp(18px,3vw,34px);
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
}
.footer-legal{ display:flex; gap:clamp(18px,3vw,34px); }
.footer-legal a{ transition:color .3s var(--ease); }
.footer-legal a:hover{ color:var(--accent); }

/* ============================================================
   14. SCROLL-REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-d1.is-visible{ transition-delay:.08s; }
.reveal-d2.is-visible{ transition-delay:.16s; }
.reveal-d3.is-visible{ transition-delay:.24s; }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{ display:none; }
  .about{ grid-template-columns:1fr; padding-right:var(--gutter); }
  .about-content{ padding-right:0; }
}
@media (max-width:860px){
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-media{ order:3; }
  .about-content{ grid-template-columns:1fr; }
  .hero-title{ text-align:left; }
  .hero-kicker{ text-align:left; }
}
@media (max-width:620px){
  .header-actions .btn{ display:none; }
  /* Kompakter Kopf: kleineres Logo und weniger Abstand, damit der Header
     auch bei niedriger Fensterhoehe vollstaendig sichtbar bleibt. */
  .site-header{ padding-block:14px; }
  .brand{ width:70px; }
  .burger{ margin-top:4px; }
  .section-head{ align-items:flex-start; }
  .hero-foot{ align-items:center; }
  .scroll-cue{ display:none; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .about-text p{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .claim span > i{ transform:none; }
}