/* ============================================================
   FARBEN

   Zwei Ebenen, bewusst getrennt:

   1. MARKENFARBEN — Alexandras feste Palette. Diese Werte ändern sich nie,
      weder im hellen noch im dunklen Modus.
   2. ROLLEN — was gerade Grund, Text, Linie oder Akzent ist. Nur diese
      Werte werden umgeschaltet. Kein Baustein nennt je eine Farbe direkt,
      alle greifen auf eine Rolle zu. Deshalb genügt das Umlegen dieser
      Liste, um die ganze Website umzufärben.

   Die hellen Werte stehen zweimal: einmal für die bewusste Wahl über den
   Schalter, einmal für Besucher, deren System auf Hell steht. Beide Blöcke
   werden aus derselben Quelle erzeugt und sind immer identisch.
   ============================================================ */

:root{
  /* --- Markenfarben (modusunabhängig) --- */
  --marke-navy:#1C2036;
  --marke-gruen:#172E13;
  --marke-bordeaux:#59001B;
  --marke-stahl:#7395B8;
  --marke-creme:#F1EDE3;

  /* --- Masse --- */
  --maxw:1300px;
  --pad:clamp(20px,5vw,64px);
  --glas-blur:blur(26px) saturate(135%);

  /* --- Schriftfamilien --- */
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* --- Bildüberlagerungen: liegen auf Fotos und bleiben in beiden Modi dunkel,
         damit die weisse Schrift darauf immer lesbar ist --- */
  --foto-verlauf-a:rgba(8,9,14,.90);
  --foto-verlauf-b:rgba(8,9,14,.45);
  --foto-schleier:rgba(10,12,18,.35);
}

/* --- Dunkler Modus: Standard --- */
:root,
:root[data-modus="dunkel"]{
  color-scheme:dark;
  --grund:#0A0C12;
  --grund-2:#11141E;
  --text:#F1EDE3;
  --text-leise:rgba(241,237,227,.66);
  --text-zart:rgba(241,237,227,.40);
  --akzent:#7395B8;
  --akzent-weich:#93AECB;
  --linie:rgba(241,237,227,.17);
  --linie-zart:rgba(241,237,227,.10);
  --glas:rgba(14,17,26,.58);
  --glas-hell:rgba(23,27,40,.72);
  --schleier:rgba(10,12,18,.72);
  --band:rgba(28,32,54,.50);
  --band-zart:rgba(10,12,18,.45);
  --band-cta:rgba(28,32,54,.42);
  --fuss:rgba(10,12,18,.55);
  --menue-grund:rgba(8,10,15,.90);
  --lightbox-grund:rgba(6,7,11,.94);
  --hinweis-grund:rgba(89,0,27,.18);
  --knopf-hover:rgba(241,237,227,.06);
  --korn:.042;
  --aufhellung:linear-gradient(170deg, rgba(115,149,184,.55), rgba(241,237,227,.85));
  --aufhellung-max:.085;
  --logo-filter:none;
  --modus-dreh:0deg;
  --schimmer-rand:#7395B8;
  --schimmer-kern:#FFFDF6;
  --blase-1:rgba(44,53,92,.98);
  --blase-2:rgba(115,149,184,.46);
  --blase-3:rgba(32,66,26,.80);
  --blase-4:rgba(124,12,45,.54);
  --blase-5:rgba(147,174,203,.34);
  --blase-6:rgba(241,237,227,.16);
}

/* --- Heller Modus: bewusst gewählt --- */
:root[data-modus="hell"]{
  color-scheme:light;
  --grund:#F4F1E9;
  --grund-2:#E9E4D7;
  --text:#12151F;
  --text-leise:rgba(18,21,31,.72);
  --text-zart:rgba(18,21,31,.48);
  --akzent:#3D6087;
  --akzent-weich:#2F5079;
  --linie:rgba(18,21,31,.20);
  --linie-zart:rgba(18,21,31,.11);
  --glas:rgba(255,253,247,.62);
  --glas-hell:rgba(255,254,250,.80);
  --schleier:rgba(244,241,233,.80);
  --band:rgba(115,149,184,.20);
  --band-zart:rgba(255,253,247,.55);
  --band-cta:rgba(115,149,184,.16);
  --fuss:rgba(233,228,215,.62);
  --menue-grund:rgba(244,241,233,.94);
  --lightbox-grund:rgba(244,241,233,.95);
  --hinweis-grund:rgba(89,0,27,.09);
  --knopf-hover:rgba(18,21,31,.05);
  --korn:.030;
  --aufhellung:linear-gradient(170deg, rgba(255,255,255,.95), rgba(115,149,184,.42));
  --aufhellung-max:.115;
  --logo-filter:invert(1);
  --modus-dreh:180deg;
  --schimmer-rand:#5D82AC;
  --schimmer-kern:#9CBBD9;
  --blase-1:rgba(115,149,184,.52);
  --blase-2:rgba(28,32,54,.20);
  --blase-3:rgba(23,46,19,.24);
  --blase-4:rgba(89,0,27,.20);
  --blase-5:rgba(115,149,184,.30);
  --blase-6:rgba(255,255,255,.70);
}

/* --- Heller Modus: System steht auf Hell, nichts gewählt --- */
@media (prefers-color-scheme: light){
  :root:not([data-modus="dunkel"]){
    color-scheme:light;
    --grund:#F4F1E9;
    --grund-2:#E9E4D7;
    --text:#12151F;
    --text-leise:rgba(18,21,31,.72);
    --text-zart:rgba(18,21,31,.48);
    --akzent:#3D6087;
    --akzent-weich:#2F5079;
    --linie:rgba(18,21,31,.20);
    --linie-zart:rgba(18,21,31,.11);
    --glas:rgba(255,253,247,.62);
    --glas-hell:rgba(255,254,250,.80);
    --schleier:rgba(244,241,233,.80);
    --band:rgba(115,149,184,.20);
    --band-zart:rgba(255,253,247,.55);
    --band-cta:rgba(115,149,184,.16);
    --fuss:rgba(233,228,215,.62);
    --menue-grund:rgba(244,241,233,.94);
    --lightbox-grund:rgba(244,241,233,.95);
    --hinweis-grund:rgba(89,0,27,.09);
    --knopf-hover:rgba(18,21,31,.05);
    --korn:.030;
    --aufhellung:linear-gradient(170deg, rgba(255,255,255,.95), rgba(115,149,184,.42));
    --aufhellung-max:.115;
    --logo-filter:invert(1);
  --modus-dreh:180deg;
  --schimmer-rand:#5D82AC;
  --schimmer-kern:#9CBBD9;
    --blase-1:rgba(115,149,184,.52);
    --blase-2:rgba(28,32,54,.20);
    --blase-3:rgba(23,46,19,.24);
    --blase-4:rgba(89,0,27,.20);
    --blase-5:rgba(115,149,184,.30);
    --blase-6:rgba(255,255,255,.70);
  }
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:var(--sans);font-weight:300;line-height:1.7;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.02;text-wrap:balance;letter-spacing:-.012em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

/* Inhalt liegt immer über der Hintergrundwelt */
body > header,body > main,body > footer,body > .mobile-nav,body > .lightbox{position:relative;z-index:1}
body > header{z-index:100}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec-pad{padding:clamp(70px,11vh,132px) 0}

.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--text);color:var(--grund);padding:12px 20px;font-family:var(--mono);font-size:.75rem}
.skip:focus{left:var(--pad);top:12px}

/* ============================================================
   Hintergrundwelt: weiche Lichtblasen hinter Milchglas
   ============================================================ */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  transform:rotate(var(--amb-dreh,0deg)) scale(1.52);
  /* Die gedrehte Fläche wird an ihrem eigenen Rand beschnitten. Ohne Maske ergäbe
     das eine harte Diagonale quer durchs Bild. Die vielen Zwischenstufen sorgen für
     einen langen, weichen Auslauf — die Form bleibt erkennbar, der Schnitt ist weg. */
  -webkit-mask-image:radial-gradient(ellipse 96% 96% at 50% 50%,
    #000 16%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.46) 62%,
    rgba(0,0,0,.24) 74%, rgba(0,0,0,.09) 86%, transparent 100%);
  mask-image:radial-gradient(ellipse 96% 96% at 50% 50%,
    #000 16%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.46) 62%,
    rgba(0,0,0,.24) 74%, rgba(0,0,0,.09) 86%, transparent 100%);
}

/* Beim Scrollen hellt sich der Grund sanft auf — der Wert kommt aus dem Skript */
.aufhellung{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--aufhellung);
  opacity:calc(var(--scroll-fortschritt,0) * var(--aufhellung-max));
  transition:opacity .25s linear;
}
.ambient span{
  position:absolute;display:block;will-change:transform;
  /* Radialverlauf statt Vollfläche: heller Kern, weicher Auslauf. Dadurch wirkt
     es wie Licht und nicht wie ein Farbfleck — die Weichzeichnung darf deshalb
     geringer ausfallen, was den Kern kräftiger stehen lässt. */
  filter:blur(72px);
}
.ambient span:nth-child(1){width:62vw;height:62vw;left:-16vw;top:-18vw;
  background:radial-gradient(circle at 50% 50%,var(--blase-1) 0%,transparent 68%);
  animation:drift1 46s ease-in-out infinite}
.ambient span:nth-child(2){width:46vw;height:46vw;right:-10vw;top:8vh;
  background:radial-gradient(circle at 50% 50%,var(--blase-2) 0%,transparent 70%);
  animation:drift2 58s ease-in-out infinite}
.ambient span:nth-child(3){width:64vw;height:64vw;left:16vw;bottom:-28vw;
  background:radial-gradient(circle at 50% 50%,var(--blase-3) 0%,transparent 68%);
  animation:drift3 64s ease-in-out infinite}
.ambient span:nth-child(4){width:38vw;height:38vw;right:6vw;bottom:2vh;
  background:radial-gradient(circle at 50% 50%,var(--blase-4) 0%,transparent 70%);
  animation:drift4 52s ease-in-out infinite}
.ambient span:nth-child(5){width:32vw;height:32vw;left:42vw;top:22vh;
  background:radial-gradient(circle at 50% 50%,var(--blase-5) 0%,transparent 72%);
  animation:drift2 70s ease-in-out infinite reverse}
.ambient span:nth-child(6){width:28vw;height:28vw;left:6vw;bottom:20vh;
  background:radial-gradient(circle at 50% 50%,var(--blase-6) 0%,transparent 72%);
  animation:drift3 78s ease-in-out infinite reverse}

@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,4vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,6vh)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(4vw,-5vh)}}
@keyframes drift4{0%,100%{transform:translate(0,0)}50%{transform:translate(-4vw,-4vh)}}

/* Jede Seite bekommt eine andere Blickrichtung auf dieselbe Farbwelt */
body[data-seite="start"]      {--amb-dreh:0deg}
body[data-seite="portfolio"]  {--amb-dreh:132deg}
body[data-seite="business"]   {--amb-dreh:58deg}
body[data-seite="hochzeit"]   {--amb-dreh:206deg}
body[data-seite="kreativ"]    {--amb-dreh:284deg}
body[data-seite="ueber"]      {--amb-dreh:96deg}
body[data-seite="leistungen"] {--amb-dreh:170deg}
body[data-seite="kontakt"]    {--amb-dreh:242deg}
body[data-seite="impressum"]  {--amb-dreh:318deg}
body[data-seite="datenschutz"]{--amb-dreh:24deg}

/* Milchglas-Baustein */
.glas{
  background:var(--glas);
  -webkit-backdrop-filter:var(--glas-blur);
  backdrop-filter:var(--glas-blur);
  border:1px solid var(--linie-zart);
}
/* Ganze Bandbreite über die Seite (Abschnittsflächen) */
.flaeche{
  background:var(--glas);
  -webkit-backdrop-filter:var(--glas-blur);
  backdrop-filter:var(--glas-blur);
  border-top:1px solid var(--linie-zart);
  border-bottom:1px solid var(--linie-zart);
}

/* ---------- Filmkorn: das „Korn" im Namen ---------- */
body::after{
  content:"";position:fixed;inset:-140px;z-index:900;pointer-events:none;opacity:var(--korn);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;animation:korn 560ms steps(3) infinite;
}
@keyframes korn{0%{transform:translate(0,0)}33%{transform:translate(-7px,4px)}66%{transform:translate(5px,-6px)}100%{transform:translate(0,0)}}

/* ---------- Schrift-Bausteine ---------- */
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-leise);font-weight:400}
.label--accent{color:var(--akzent)}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--text-zart)}
.lead{font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--text-leise);line-height:1.65;max-width:52ch}

/* ---------- Kopfzeile ---------- */
header{
  position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);border-bottom:1px solid transparent;
  transition:background .4s ease,padding .4s ease,border-color .4s ease;
}
header.scrolled{
  background:var(--schleier);
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--linie-zart);
}
/* Wortmarke: folgt dem Zeiger ein paar Pixel und bekommt beim Darüberfahren
   einen Lichtstreifen — wie Licht, das über eine Oberfläche wandert. */
.brand{position:relative;display:block;
  transform:translate(var(--marke-x,0px),var(--marke-y,0px));
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.brand img{height:36px;width:auto;display:block;filter:var(--logo-filter)}
.brand-schimmer{display:none}
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .brand-schimmer{
    display:block;position:absolute;inset:0;pointer-events:none;opacity:0;
    -webkit-mask:var(--logo) left center/contain no-repeat;
            mask:var(--logo) left center/contain no-repeat;
    background:linear-gradient(100deg,
      transparent 34%, var(--schimmer-rand) 46%, var(--schimmer-kern) 52%, var(--schimmer-rand) 58%, transparent 70%);
    background-size:280% 100%;background-position:135% 0;
    transition:opacity .25s ease;
  }
  .brand:hover .brand-schimmer,.brand:focus-visible .brand-schimmer,
  .foot-marke:hover .brand-schimmer,.foot-marke:focus-visible .brand-schimmer{
    opacity:1;animation:schimmer 1s cubic-bezier(.35,.6,.3,1);
  }
}
@keyframes schimmer{from{background-position:135% 0}to{background-position:-70% 0}}
nav.main{display:flex;align-items:center;gap:38px}
nav.main a{font-size:.98rem;color:var(--text-leise);position:relative;padding:5px 0;transition:color .3s ease}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--akzent);transition:width .32s cubic-bezier(.2,.7,.2,1)}
nav.main a:hover{color:var(--text)}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{width:100%}
nav.main a[aria-current="page"]{color:var(--text)}
.kopf-rechts{display:flex;align-items:center;gap:20px}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em}
.lang a{color:var(--text-zart);padding:4px 7px;transition:color .3s ease}
.lang a:hover{color:var(--text)}
.lang a[aria-current="true"]{color:var(--akzent)}
.lang span{color:var(--linie)}
/* Hell/Dunkel-Schalter: halb gefüllter Kreis, der sich beim Wechsel dreht */
.modus-schalter{
  width:22px;height:22px;flex:none;padding:0;cursor:pointer;border-radius:50%;
  background:transparent;border:1px solid var(--text-zart);position:relative;overflow:hidden;
  transform:rotate(var(--modus-dreh,0deg));
  transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .3s ease;
}
.modus-schalter::before{
  content:"";position:absolute;inset:-1px;background:var(--text);
  clip-path:inset(0 50% 0 0);
}
.modus-schalter:hover{border-color:var(--text)}

.menu-btn{display:none}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 28px;border:1px solid var(--text);color:var(--grund);background:var(--text);cursor:pointer;
  transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--akzent);border-color:var(--akzent);color:var(--grund)}
.btn--ghost{background:none;color:var(--text);border-color:var(--linie)}
.btn--ghost:hover{background:var(--knopf-hover);border-color:var(--text);color:var(--text)}
.btn .arw{transition:transform .3s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- Bildrahmen ---------- */
/* Volle Helligkeit: Alexandras Aufnahmen sind hell — die dunkle Oberfläche
   ist der Rahmen, nicht ein Filter. Deshalb kein Abdunkeln, nur ein Hauch Korn. */
.shot{position:relative;overflow:hidden;background:var(--grund-2)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size:170px 170px;
}
.cropmark{position:absolute;width:15px;height:15px;z-index:3;opacity:.75}
.cropmark::before,.cropmark::after{content:"";position:absolute;background:var(--text)}
.cropmark::before{width:100%;height:1px;top:0;left:0}
.cropmark::after{height:100%;width:1px;top:0;left:0}
.cropmark.tl{top:10px;left:10px}
.cropmark.tr{top:10px;right:10px;transform:scaleX(-1)}
.cropmark.bl{bottom:10px;left:10px;transform:scaleY(-1)}
.cropmark.br{bottom:10px;right:10px;transform:scale(-1,-1)}

/* Filmrand mit Perforation */
.filmedge{position:absolute;top:0;bottom:0;left:-30px;width:26px;display:flex;flex-direction:column;
  justify-content:space-between;padding:8px 0;z-index:2}
.filmedge .fnum{font-family:var(--mono);font-size:.56rem;color:var(--text-zart);writing-mode:vertical-rl;letter-spacing:.2em}
.filmedge .spro{display:flex;flex-direction:column;gap:9px}
.filmedge .spro i{width:11px;height:7px;border-radius:1px;background:var(--linie);display:block;margin-left:6px}

/* ---------- Startseite: Hero ---------- */
.hero{position:relative;padding-top:clamp(132px,17vh,190px);padding-bottom:clamp(44px,6vh,76px)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,58px);align-items:end}
.hero-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.hero-eyebrow .tick{height:1px;width:54px;background:var(--akzent);opacity:.85}
.hero h1{font-size:clamp(3.1rem,9vw,8.2rem);line-height:.94;letter-spacing:-.028em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--akzent)}
.hero-sub{margin-top:30px;max-width:47ch;font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--text-leise);line-height:1.65}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-frame{position:relative;align-self:stretch;min-height:clamp(400px,58vh,620px)}
.hero-frame .shot{height:100%}

/* ---------- Unterseiten: Kopfbereich ---------- */
.seitenkopf{padding-top:clamp(128px,16vh,180px);padding-bottom:clamp(30px,5vh,54px)}
.seitenkopf h1{font-size:clamp(2.4rem,6.4vw,5.2rem);line-height:.98;letter-spacing:-.025em}
.seitenkopf h1 em{font-style:italic;font-weight:400;color:var(--akzent)}
.seitenkopf .label{display:block;margin-bottom:20px}
.seitenkopf .lead{margin-top:26px}

/* ---------- Slogan-Band ---------- */
.slogan{border-top:1px solid var(--linie-zart);border-bottom:1px solid var(--linie-zart);
  background:var(--band);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  padding:clamp(46px,7vh,86px) 0;text-align:center}
.slogan-haupt{font-family:var(--display);font-weight:500;font-size:clamp(2rem,5.2vw,4rem);
  line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.slogan-haupt em{font-style:italic;font-weight:400;color:var(--akzent)}
.slogan-sub{margin-top:18px;font-family:var(--mono);font-size:clamp(.7rem,1vw,.82rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-leise)}

/* ---------- Filmstreifen: die Bewegung zeigt Arbeiten, keine Schlagworte ---------- */
.filmstreifen{position:relative;overflow:hidden;border-bottom:1px solid var(--linie-zart);
  padding:14px 0;background:var(--band-zart);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.filmstreifen-lauf{display:flex;gap:12px;width:max-content;animation:laufen 90s linear infinite}
.filmstreifen:hover .filmstreifen-lauf{animation-play-state:paused}
/* Feste Höhe, freie Breite: jedes Foto behält sein eigenes Seitenverhältnis.
   Hochformate erscheinen dadurch schmal, Querformate breit — nichts wird beschnitten. */
.filmstreifen figure{margin:0;flex:none;height:clamp(130px,14vw,200px);overflow:hidden}
.filmstreifen img{height:100%;width:auto;max-width:none;display:block}
/* Weiche Kanten links und rechts, damit der Streifen nicht abgeschnitten wirkt */
.filmstreifen::before,.filmstreifen::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);z-index:2;pointer-events:none}
.filmstreifen::before{left:0;background:linear-gradient(to right,var(--grund),transparent)}
.filmstreifen::after{right:0;background:linear-gradient(to left,var(--grund),transparent)}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Instagram-Bereich ---------- */
.insta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.insta a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--grund-2)}
.insta img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.insta a:hover img{transform:scale(1.05)}
.insta a::after{content:"";position:absolute;inset:0;background:var(--foto-schleier);opacity:0;transition:opacity .35s ease}
.insta a:hover::after{opacity:1}
.insta-hinweis{margin-top:22px}

/* Zwei-Klick-Lösung: erst nach Einwilligung wird der externe Feed geladen */
.insta-huelle{position:relative}
.insta-huelle[data-geladen="nein"] .insta{filter:blur(7px);opacity:.45;pointer-events:none}
.insta-consent{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;padding:clamp(20px,3vw,36px);
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:1px solid var(--linie-zart);
}
.insta-consent h3{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem)}
.insta-consent p{color:var(--text-leise);font-size:.9rem;max-width:54ch}
.insta-consent .btn{margin-top:4px}

/* ---------- Abschnittsköpfe ---------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vh,64px)}
.sec-head h2{font-size:clamp(2rem,4.8vw,3.5rem)}
.sec-head .idx{font-family:var(--mono);font-size:.72rem;color:var(--text-zart);letter-spacing:.2em}

/* ---------- Disziplinen-Kacheln ---------- */
.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.disc-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--linie-zart);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s ease;
}
.disc-card:hover{transform:translateY(-4px);border-color:var(--linie)}
.disc-card .thumb{position:relative;height:clamp(280px,36vh,440px)}
.disc-card .thumb .shot{height:100%}
.disc-card:hover .shot img{transform:scale(1.05)}
/* Der Textbereich hebt sich als Milchglas-Fläche vom Hintergrund ab */
.disc-card .body{
  padding:28px 26px 32px;flex:1;
  background:var(--glas-hell);
  -webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border-top:1px solid var(--linie-zart);
}
.disc-card h3{font-size:1.8rem;margin-bottom:10px}
.disc-card p{color:var(--text-leise);font-size:.95rem;max-width:36ch}
.disc-card .more{display:inline-flex;gap:9px;align-items:center;margin-top:22px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}
.disc-card .more .arw{transition:transform .3s ease}
.disc-card:hover .more .arw{transform:translateX(5px)}

/* ---------- Kontaktabzug (Startseite) ---------- */
.sheet{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;padding:clamp(14px,2.2vw,26px)}
.cell{position:relative;overflow:hidden;grid-column:span 3;min-height:clamp(190px,26vh,300px)}
.cell.tall{grid-row:span 2;min-height:clamp(390px,54vh,610px)}
.cell .shot{height:100%}
.cell:hover .shot img{transform:scale(1.045)}
.cell .ttl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 13px 12px;
  background:linear-gradient(to top,var(--foto-verlauf-a),var(--foto-verlauf-b) 55%,transparent);
  transform:translateY(6px);opacity:0;transition:transform .4s ease,opacity .4s ease}
.cell:hover .ttl,.cell:focus-within .ttl{transform:translateY(0);opacity:1}
.cell .ttl .t{font-family:var(--display);font-size:1.05rem;line-height:1.2;color:var(--marke-creme)}
.cell .ttl .c{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#A9C2DC}

/* ---------- Galerie ---------- */
.galerie{columns:3;column-gap:14px}
.galerie figure{break-inside:avoid;margin:0 0 14px;position:relative}
.galerie button.bild{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.galerie img{width:100%;height:auto;display:block;background:var(--grund-2);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.galerie button.bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)'/%3E%3C/svg%3E");
  background-size:170px 170px;
}
.galerie button.bild:hover img{transform:scale(1.02)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:500;background:var(--lightbox-grund);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,48px)}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;display:block}
.lb-schliessen{position:absolute;top:16px;right:16px;z-index:2;background:none;border:1px solid var(--linie);
  color:var(--text);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;cursor:pointer;padding:10px 16px;text-transform:uppercase}
.lb-schliessen:hover{border-color:var(--text)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid var(--linie);
  color:var(--text);cursor:pointer;font-size:1.2rem;line-height:1;padding:16px 18px;transition:border-color .3s ease}
.lb-nav:hover{border-color:var(--text)}
.lb-prev{left:clamp(8px,2vw,28px)}
.lb-next{right:clamp(8px,2vw,28px)}
.lb-zaehler{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:.7rem;letter-spacing:.18em;color:var(--text-zart)}

/* ---------- Über mich ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.about .portrait{position:relative;min-height:clamp(400px,58vh,620px)}
.about .portrait .shot{height:100%}
.about blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.9rem);
  line-height:1.14;letter-spacing:-.012em}
.about blockquote em{font-style:italic;color:var(--akzent)}
.about .txt{margin-top:26px;color:var(--text-leise);max-width:52ch}
.about .txt p + p{margin-top:14px}
.about .sig{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.about .sig .nm{font-family:var(--display);font-style:italic;font-size:1.45rem}
.about .sig .rl{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-zart)}

/* ---------- Leistungen ---------- */
.leistung{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4.5vw,64px);align-items:center;
  padding:clamp(46px,7vh,84px) 0;border-top:1px solid var(--linie-zart)}
.leistung:first-of-type{border-top:0}
.leistung .bild{position:relative;min-height:clamp(320px,46vh,500px)}
.leistung .bild .shot{height:100%}
.leistung.gedreht .bild{order:2}
/* Textseite als abgesetzte Milchglas-Fläche */
.leistung .text{
  padding:clamp(26px,3vw,42px);
  background:var(--glas-hell);
  -webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:1px solid var(--linie-zart);
}
.leistung h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:16px}
.leistung .lead{margin-bottom:24px}
.enthalten{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.enthalten li{display:flex;gap:12px;align-items:flex-start;color:var(--text-leise);font-size:.95rem}
.enthalten li::before{content:"—";color:var(--akzent);flex:none;font-family:var(--mono)}

/* Ablauf: hier ist die Nummerierung echte Reihenfolge, kein Dekor */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ablauf .schritt{
  padding:30px 24px 34px;
  background:var(--glas-hell);
  -webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  border:1px solid var(--linie-zart);
}
.ablauf .nr{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--akzent)}
.ablauf h3{font-size:1.35rem;margin:14px 0 10px}
.ablauf p{color:var(--text-leise);font-size:.93rem}
.ablauf--drei{grid-template-columns:repeat(3,1fr)}

.faq details{border-bottom:1px solid var(--linie-zart);padding:22px 0}
.faq details:first-of-type{border-top:1px solid var(--linie-zart)}
.faq summary{cursor:pointer;font-family:var(--display);font-size:1.25rem;list-style:none;display:flex;
  justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--akzent);font-size:1.15rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:14px;color:var(--text-leise);font-size:.96rem;max-width:64ch}

/* ---------- Kontaktseite ---------- */
.kontakt-raster{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.kontakt-bild{grid-column:1/9;grid-row:1;position:relative;min-height:clamp(380px,58vh,640px)}
.kontakt-bild .shot{height:100%}
.kontakt-karte{
  grid-column:7/13;grid-row:1;z-index:2;
  padding:clamp(28px,3.4vw,46px);
  background:var(--glas-hell);
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  border:1px solid var(--linie);
}
.kontakt-karte h2{font-size:clamp(1.6rem,2.6vw,2.3rem);margin:18px 0 10px}
.kontakt-karte > p{color:var(--text-leise);font-size:.96rem;margin-bottom:26px}
.kontaktzeile{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-top:1px solid var(--linie-zart);transition:padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.kontaktzeile:last-of-type{border-bottom:1px solid var(--linie-zart)}
.kontaktzeile:hover{padding-left:8px}
.kontaktzeile .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-zart);flex:none;width:88px}
.kontaktzeile .v{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.35rem);flex:1;word-break:break-word}
.kontaktzeile:hover .v{color:var(--akzent)}
.kontaktzeile .ort-zusatz{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent);margin-top:6px}
.kontaktzeile .pfeil{color:var(--akzent);font-family:var(--mono);flex:none;transition:transform .35s ease}
.kontaktzeile:hover .pfeil{transform:translateX(4px)}
.kontakt-fuss{margin-top:24px}

/* ---------- Kontaktband (Abschluss der meisten Seiten) ---------- */
.cta{border-top:1px solid var(--linie-zart);
  background:var(--band-cta);
  -webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur)}
.cta .wrap{padding-top:clamp(70px,11vh,124px);padding-bottom:clamp(70px,11vh,124px)}
.cta h2{font-size:clamp(2.2rem,6vw,4.7rem);max-width:16ch}
.cta h2 em{font-style:italic;color:var(--akzent)}
.cta-links{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:44px}
.cta-links a{display:flex;flex-direction:column;gap:4px;transition:transform .3s ease}
.cta-links a:hover{transform:translateY(-3px)}
.cta-links .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-zart)}
.cta-links .v{font-family:var(--display);font-size:1.5rem;word-break:break-word}
.cta-links a:hover .v{color:var(--akzent)}

/* ---------- Fusszeile ---------- */
footer{border-top:1px solid var(--linie-zart);
  background:var(--fuss);
  -webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur)}
.foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding:clamp(52px,8vh,88px) 0 40px}
.foot-brand{max-width:38ch}
.foot-marke{
  position:relative;display:inline-block;margin-bottom:24px;
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.foot-marke:hover,.foot-marke:focus-visible{transform:scale(1.06)}
.foot-brand img{height:44px;width:auto;display:block;filter:var(--logo-filter)}
.foot-brand p{color:var(--text-leise);font-size:.95rem}
.foot-cols{display:flex;gap:clamp(38px,6vw,88px);flex-wrap:wrap}
.foot-col h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-zart);margin:0 0 14px;font-weight:400}
.foot-col a{display:block;color:var(--text-leise);font-size:.93rem;padding:5px 0;transition:color .3s ease}
.foot-col a:hover{color:var(--akzent)}
.foot-edge{display:flex;gap:5px;padding:14px 0;border-top:1px solid var(--linie-zart)}
.foot-edge i{flex:1;height:8px;background:var(--linie-zart);border-radius:1px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 40px}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:72ch;margin:0 auto;padding-bottom:clamp(60px,9vh,110px)}
.rechtstext h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:24px}
.rechtstext h3{font-family:var(--display);font-size:1.35rem;margin:36px 0 12px}
.rechtstext h4{font-family:var(--sans);font-weight:500;font-size:.97rem;margin:22px 0 6px;color:var(--akzent-weich)}
.rechtstext p{color:var(--text-leise);font-size:.95rem;margin-bottom:12px}
.rechtstext ul{color:var(--text-leise);font-size:.95rem;padding-left:20px;margin:0 0 14px}
.rechtstext li{margin-bottom:8px}
.rechtstext a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.rechtstext hr{border:none;border-top:1px solid var(--linie);margin:30px 0}
.hinweis{border-left:2px solid var(--marke-bordeaux);background:var(--hinweis-grund);padding:16px 20px;margin:0 0 26px;
  font-family:var(--mono);font-size:.73rem;line-height:1.75;color:var(--text-leise)}

/* ---------- Mobiles Menü ---------- */
.mobile-nav{position:fixed;inset:0;z-index:200;background:var(--menue-grund);
  -webkit-backdrop-filter:blur(28px) saturate(130%);backdrop-filter:blur(28px) saturate(130%);
  display:none;flex-direction:column;padding:26px var(--pad)}
.mobile-nav.open{display:flex}
.mobile-nav .mtop{display:flex;justify-content:space-between;align-items:center}
.mobile-nav .mtop img{height:34px;width:auto;filter:var(--logo-filter)}
.mobile-nav .close{background:none;border:none;color:var(--text);font-family:var(--mono);font-size:.82rem;
  cursor:pointer;letter-spacing:.1em;padding:6px}
.mobile-nav .mlinks{display:flex;flex-direction:column;gap:4px;margin:auto 0}
.mobile-nav .mlinks a{font-family:var(--display);font-size:2.6rem;padding:8px 0}
.mobile-nav .mlinks a:hover{color:var(--akzent)}
.mobile-nav .mfoot{padding-top:24px;border-top:1px solid var(--linie)}
.mobile-nav .mfoot .lang{display:flex}

/* ---------- Sanftes Einfliegen ----------
   Der versteckte Ausgangszustand gilt nur, wenn JavaScript läuft (html.js).
   Ohne Skript ist alles sofort sichtbar — es bleibt nie etwas unsichtbar hängen.
   Bewusst nur wenige Elemente, damit die Seite ruhig bleibt. */
/* WICHTIG: Die Liste steht in :where(), damit sie KEIN Gewicht bekommt.
   Sonst schlägt eine Regel wie „html.js .about .txt" die Einblend-Regel
   „html.js .sichtbar" — die Elemente blieben dann für immer unsichtbar.
   Mit :where() gewinnt .sichtbar immer. */
html.js :where(
  .sec-head, .slogan-haupt, .slogan-sub, .disc-card, .cell,
  .leistung .text, .ablauf .schritt, .insta a, .kontakt-karte,
  .about blockquote, .about .txt, .about .sig
){
  opacity:0;transform:translateY(28px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--verzoegerung,0ms);
}
html.js .sichtbar{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js :where(
    .sec-head, .slogan-haupt, .slogan-sub, .disc-card, .cell,
    .leistung .text, .ablauf .schritt, .insta a, .kontakt-karte,
    .about blockquote, .about .txt, .about .sig
  ){opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .galerie{columns:2}
  .ablauf,.ablauf--drei{grid-template-columns:repeat(2,1fr)}
  .kontakt-bild{grid-column:1/13;grid-row:1;min-height:clamp(300px,42vh,420px)}
  .kontakt-karte{grid-column:1/13;grid-row:2;margin-top:-56px;margin-left:var(--pad);margin-right:var(--pad)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-frame{min-height:clamp(340px,50vh,460px)}
  .filmedge{display:none}
  .about,.leistung{grid-template-columns:1fr;gap:28px}
  .leistung.gedreht .bild{order:0}
  .about .portrait,.leistung .bild{min-height:clamp(340px,48vh,460px)}
  .disc{grid-template-columns:1fr}
  nav.main,.kopf-rechts .lang{display:none}
  .menu-btn{display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--text);cursor:pointer;
    font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;padding:6px}
  .menu-btn .bars{display:flex;flex-direction:column;gap:4px}
  .menu-btn .bars i{width:24px;height:1.5px;background:var(--text);display:block}
  .cell{grid-column:span 6;min-height:clamp(160px,32vw,240px)}
  .cell.tall{grid-row:span 2;min-height:clamp(330px,66vw,500px)}
  .ambient span{filter:blur(70px)}
}
@media (max-width:700px){
  .insta{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(2.7rem,14vw,4.2rem)}
  .galerie{columns:1}
  .ablauf,.ablauf--drei{grid-template-columns:1fr}
  .foot-top{flex-direction:column}
  .foot-brand img{height:38px}
  .kontaktzeile{flex-wrap:wrap;gap:4px 16px}
  .kontaktzeile .k{width:100%}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after,.filmstreifen-lauf,.ambient span,.brand-schimmer{animation:none}
  .brand{transform:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ---------- Druck ---------- */
@media print{
  header,.mobile-nav,.lightbox,.filmstreifen,.ambient,body::after{display:none !important}
  body{background:#fff;color:#000}
  a{color:#000}
  .glas,.flaeche,.disc-card .body,.ablauf .schritt,.kontakt-karte,.leistung .text{background:none;backdrop-filter:none}
}