/* PenknerProduction — Stylesheet der Unterseiten.
   Getrennt von css/seite.css, weil `.hero` auf der Startseite (Vollbild-Video)
   und auf den Unterseiten (Bilderwand) zwei verschiedene Bausteine mit demselben
   Namen sind. Ein gemeinsamer Unterbau lohnt sich, sobald alle Seiten stehen
   und gemeinsam geprüft werden können. */
:root{
  --bg:#0a0a0a; --bg-2:#101010; --line:#242424;
  --text:#f5f5f3; --dim:#8a8a85;
  --font-display:"Archivo",sans-serif;
  --font-accent:"Fraunces",serif;
  --font-body:"Inter",sans-serif;
  --pad:clamp(20px,5vw,64px);
  /* Gleiche Textkante wie der alte .container: min(100%,1280px) zentriert + 48px */
  --pad-o:48px;
  --gutter:calc(max(0px,(100% - 1280px) / 2) + var(--pad-o));
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--text);color:var(--bg)}

/* ---------- Loader (aus Variante 1) ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad)}
.loader__word{font-family:var(--font-display);font-variation-settings:"wdth" 78;font-weight:800;font-size:clamp(12px,1.4vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.loader__num{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:800;font-size:clamp(72px,16vw,220px);line-height:.8;letter-spacing:-.03em}
.loader__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);height:1px;background:#1e1e1e}
.loader__bar i{display:block;height:100%;width:0%;background:var(--text)}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);mix-blend-mode:difference}
.brand{font-family:var(--font-display);font-variation-settings:"wdth" 78;font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.brand em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.nav{display:flex;gap:28px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav a{position:relative}
/* Nur die Textlinks bekommen das Polster für den Unterstrich — die Pille nicht:
   `.nav a` ist spezifischer als `.nav__cta`, das padding-bottom:2px hat den 9px
   der Pille überschrieben und den Text nach unten gedrückt. */
.nav a:not(.nav__cta){padding-bottom:2px}
.nav a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:not(.nav__cta):hover::after{width:100%}
@media(max-width:760px){.nav a:not(.nav__cta){display:none}}
.nav__cta{border:1px solid currentColor;border-radius:999px;padding:9px 18px}

@media(max-width:520px){
  .header{padding:15px var(--gutter)}
  .brand{font-size:12px;letter-spacing:.12em}
  .nav__cta{padding:8px 13px;font-size:11px}
}

/* ---------- Hero (Video aus Variante 1) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(28px,5vh,56px);overflow:hidden}
.hero__media{position:absolute;inset:-8% 0;z-index:-2}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,10,.96) 0%,rgba(10,10,10,.55) 42%,rgba(10,10,10,.35) 70%,rgba(10,10,10,.7) 100%)}
.grain{position:absolute;inset:0;z-index:-1;opacity:.32;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:auto;padding-top:clamp(96px,14vh,160px)}
.hero__meta span{display:flex;align-items:center;gap:10px}
.hero__meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text);opacity:.8}
.hero h1{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:clamp(46px,10.4vw,168px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase;margin-bottom:clamp(24px,4vh,44px)}
/* Kein Schriftwechsel mehr in Überschriften (Entscheidung 27.08.):
   die Auszeichnung erbt Schrift, Schnitt, Breite und Schreibweise. */
.hero h1 em{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}
.line{overflow:hidden;display:block;padding-bottom:.1em;margin-bottom:-.1em}
.line > span{display:block}
.hero__bottom{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,72px);align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:26px}
.hero__lead{max-width:44ch;color:#cfcfca;font-size:clamp(14px,1.15vw,16.5px);font-weight:300}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid #3a3a3a;border-radius:999px;padding:14px 26px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--solid:hover{background:transparent;color:var(--text);border-color:#3a3a3a}
.arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--dim),transparent);animation:cue 2.2s infinite var(--ease)}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.scrollcue{display:none}}
@media(max-height:700px){.scrollcue{display:none}}
@media(max-width:980px){:root{--pad-o:24px}}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;white-space:nowrap;background:var(--bg)}
.marquee__track{display:inline-flex;gap:44px;align-items:center;will-change:transform}
.marquee span{font-family:var(--font-display);font-variation-settings:"wdth" 96;font-weight:700;font-size:clamp(15px,2.1vw,26px);letter-spacing:.06em;text-transform:uppercase}
.marquee b{color:#3a3a3a;font-weight:400;font-size:.8em}

/* ---------- Statement (aus Variante 2) ---------- */
.stmt{padding:clamp(70px,11vw,150px) var(--gutter)}
.stmt p{font-family:var(--font-display);font-variation-settings:"wdth" 88;font-weight:600;
  font-size:clamp(22px,3.7vw,54px);line-height:1.12;letter-spacing:-.025em;max-width:20ch}
.stmt .w{display:inline-block;color:#3a3a3a;transition:color .4s var(--ease)}

/* ---------- Sections ---------- */
.section{padding:clamp(60px,9vw,120px) var(--gutter)}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(30px,4vw,52px);border-bottom:1px solid var(--line);padding-bottom:22px}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--dim)}
.sechead h2{font-family:var(--font-display);font-variation-settings:"wdth" 104;font-weight:800;font-size:clamp(28px,4.6vw,62px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.sechead h2 em{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}

/* ---------- CTA ---------- */
.cta{padding:clamp(80px,13vw,180px) var(--gutter);border-top:1px solid var(--line);text-align:center}
/* Der Abbinder war mit 11vw bis 180px schlicht zu groß: vier Zeilen füllten
   den halben Schirm, und lange Wörter wie FESTHALTEN liefen aus der Zeile,
   wo die Maske sie abschnitt. Jetzt an der Spalte gemessen (cqw) und auf
   ein lesbares Maß gedeckelt. Zeilenabstand .95 statt .85, weil deutsche
   Versalien mit Umlaut sonst in die Zeile darüber stoßen. */
.cta{container-type:inline-size}
.cta h2{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:clamp(30px,min(8cqw,96px),96px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase}
.cta h2 em{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}
.cta p{color:var(--dim);margin:26px auto 34px;max-width:46ch;font-weight:300}
.footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:26px var(--pad);border-top:1px solid var(--line);font-size:12px;color:var(--dim);letter-spacing:.05em}

/* ============================================================
   Bereiche aus dem bisherigen Entwurf — Regeln 1:1 aus css/style.css,
   gekapselt unter .legacy, damit sie mit den neuen Teilen nicht kollidieren.
   ============================================================ */
.legacy{
  --pad:48px;
  --text-dim:#9a9a94; --bg-3:#1a1a1a;
  --accent:#ffffff; --accent-contrast:#0a0a0a;
  --container:1280px; --radius:2px;
}
@media(max-width:980px){.legacy{--pad:24px}}

.legacy .container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
/* Abschnittsabstände wachsen mit dem Fenster — dieselbe Kurve wie bei den
   neuen Bausteinen (.section), damit die Seite auf dem Handy nicht aus
   Leerraum besteht. */
.legacy .section{padding:clamp(60px,9vw,120px) 0}
.legacy .section--tight{padding:clamp(44px,6.4vw,80px) 0}
.legacy h1,.legacy h2,.legacy h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-0.02em;text-wrap:balance}
.legacy .h-lg{font-size:clamp(40px,5vw,72px);text-transform:uppercase}
/* Große Überschriften am Handy: lange Wörter (z. B. ANSPRECHPARTNER) sprengten die Breite (Prüfung 14.09.) */
@media(max-width:480px){.legacy .h-lg{font-size:clamp(30px,8.2vw,40px);hyphens:auto;overflow-wrap:break-word}}

.legacy .accent-word{font-family:inherit;font-style:normal;font-weight:inherit;font-variation-settings:inherit;text-transform:inherit;letter-spacing:inherit}
.legacy .eyebrow{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:12px;margin-bottom:28px}
.legacy .eyebrow::before{content:"";width:32px;height:1px;background:var(--text-dim)}
.legacy .lead{font-size:clamp(17px,1.4vw,20px);color:var(--text-dim);max-width:66ch}
/* Überschrift und Link nebeneinander — auf schmalen Schirmen untereinander,
   sonst rutscht der Link rechts aus dem Bild und die Seite wird breiter als das Fenster. */
.legacy .section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 40px}
.legacy .section-head .lead{margin-top:20px}
.legacy .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;padding:16px 30px;border:1px solid var(--text);border-radius:100px;background:transparent;color:var(--text);transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.legacy .btn:hover{background:var(--accent);color:var(--accent-contrast);transform:translateY(-2px)}
.legacy .btn .arrow{transition:transform .35s var(--ease)}
.legacy .btn:hover .arrow{transform:translateX(4px)}
.legacy .link-underline{position:relative;padding-bottom:2px}
.legacy .link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.legacy .link-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* Bild-Platzhalter */
.legacy .ph{position:relative;background:var(--bg-3);
  background-image:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px);
  border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.legacy .ph::after{content:attr(data-label);font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);opacity:.7}
.legacy .ph--16x9{aspect-ratio:16/9}
.legacy .ph--4x3{aspect-ratio:4/3}
.legacy .ph--3x4{aspect-ratio:3/4}

/* Services (1:1 aus css/style.css) */
.legacy .media{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.legacy .media img{display:block;width:100%;height:100%;object-fit:cover}
.legacy .media--16x9{aspect-ratio:16/9}
.legacy .media--4x3{aspect-ratio:4/3}
.legacy .media--3x4{aspect-ratio:3/4}
.legacy .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:64px}
.legacy .service-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:52px;background:var(--bg-2);display:flex;flex-direction:column;gap:24px;transition:border-color .4s,transform .4s var(--ease)}
.legacy .service-card:hover{border-color:var(--text-dim);transform:translateY(-4px)}
.legacy .service-card--featured{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.legacy .service-card--featured .ph{margin:0}
.legacy .service-card--featured > div:first-child{display:flex;flex-direction:column;gap:26px}
.legacy .service-num{font-family:var(--font-display);font-style:normal;font-weight:400;font-variation-settings:"wdth" 96;letter-spacing:0;font-size:15px;color:var(--text-dim);margin-bottom:-12px}
.legacy .service-card h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15;text-transform:uppercase}
.legacy .service-card--featured h3{font-size:clamp(28px,3vw,42px);line-height:1.12}
.legacy .services-grid .service-card:not(.service-card--featured) h3{min-height:2.3em}
.legacy .service-card p{color:var(--text-dim);line-height:1.7;max-width:60ch}
.legacy .service-tags{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
/* Porträt & Event: alle Kacheln so hoch wie die höchste, Chips bündig unten, Kachel springt zum Preisblock */
.legacy .services-grid--gleich{grid-auto-rows:1fr}
.legacy .services-grid--gleich .service-tags{margin-top:auto}
.legacy a.service-card{color:inherit;text-decoration:none;cursor:pointer}
.legacy .price-subhead[id]{scroll-margin-top:110px}
.legacy .service-card__badge{position:absolute;top:22px;right:22px}
.legacy .service-tags li{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
.legacy .service-link{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-top:auto}

/* Stats */
.legacy .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:80px}
.legacy .stat{padding:40px 24px;border-left:1px solid var(--line);text-align:center}
.legacy .stat:first-child{border-left:none}
.legacy .stat-value{font-family:var(--font-display);font-size:clamp(40px,4vw,64px);font-weight:700;line-height:1}
.legacy .stat-value em{font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em}
.legacy .stat-label{color:var(--text-dim);font-size:14px;margin-top:10px}

/* About-Teaser */
.legacy .about-split{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.legacy .about-split .ph{position:sticky;top:120px}
.legacy .about-text p{color:var(--text-dim);margin-bottom:24px}
.legacy .about-text p strong{color:var(--text);font-weight:600}

/* Kundenlogos */
.legacy .logo-item{font-family:var(--font-display);font-size:clamp(15px,1.6vw,20px);font-weight:700;letter-spacing:.02em;color:var(--text-dim);opacity:.55;transition:opacity .3s,color .3s}
.legacy .logo-item:hover{opacity:1;color:var(--text)}
.legacy .logo-marquee{overflow:hidden;white-space:nowrap;margin-top:40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.legacy .logo-track{display:inline-flex;align-items:center;gap:64px;padding-right:64px;animation:marquee 34s linear infinite}
.legacy .logo-marquee:hover .logo-track{animation-play-state:paused}
.legacy .logo-track .logo-item{display:inline-flex;align-items:center;gap:64px;flex-shrink:0}
.legacy .logo-track .logo-item::after{content:"✦";font-size:11px;opacity:.6}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Testimonials */
.legacy .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.legacy .testimonial{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:40px 36px;display:flex;flex-direction:column;gap:26px;transition:border-color .4s,transform .4s var(--ease)}
.legacy .testimonial:hover{border-color:var(--text-dim);transform:translateY(-4px)}
/* Bleibt kursiv: Zitate sind der klassische Grund für eine Kursive */
.legacy .testimonial-mark{font-family:var(--font-accent);font-style:italic;font-size:60px;line-height:.4;color:var(--text-dim);opacity:.5}
.legacy .testimonial-quote{font-family:var(--font-accent);font-style:italic;font-size:19px;line-height:1.55;color:var(--text)}
.legacy .testimonial-author{margin-top:auto;display:flex;align-items:center;gap:14px}
.legacy .testimonial-avatar{width:46px;height:46px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-dim)}
.legacy .testimonial-author .name{font-family:var(--font-display);font-weight:600;font-size:14px}
.legacy .testimonial-author .role{font-size:13px;color:var(--text-dim);margin-top:3px}
.legacy .form-note{font-size:13px;color:var(--text-dim)}

/* FAQ */
.legacy .faq-list{margin-top:64px;border-top:1px solid var(--line)}
.legacy .faq-item{border-bottom:1px solid var(--line)}
.legacy .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-family:var(--font-display);font-size:18px;font-weight:600}
.legacy .faq-item summary::-webkit-details-marker{display:none}
.legacy .faq-item summary::after{content:"+";font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em;font-size:24px;color:var(--text-dim);flex-shrink:0;transition:transform .3s var(--ease)}
.legacy .faq-item[open] summary::after{transform:rotate(45deg)}
.legacy .faq-item p{color:var(--text-dim);max-width:74ch;padding-bottom:26px}

/* Footer */
.legacy .logo{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.legacy .logo span{color:var(--text-dim);font-weight:500}
.legacy .site-footer{border-top:1px solid var(--line);padding:80px 0 40px;margin-top:40px}
.legacy .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:72px}
.legacy .footer-brand p{color:var(--text-dim);max-width:32ch;margin-top:16px;font-size:14px}
.legacy .footer-col h4{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px}
.legacy .footer-col{min-width:0}
.legacy .footer-col li{margin-bottom:12px}

.legacy .footer-col a{font-size:14px;color:var(--text-dim);transition:color .3s}
.legacy .footer-col a:hover{color:var(--text)}
.legacy .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--line);font-size:13px;color:var(--text-dim)}
.legacy .footer-bottom .legal{display:flex;gap:24px}
.legacy .footer-bottom a:hover{color:var(--text)}

@media(max-width:980px){
  .legacy .services-grid,.legacy .service-card--featured{grid-template-columns:1fr}
  .legacy .service-card{padding:36px}
  .legacy .about-split{grid-template-columns:1fr}
  .legacy .testimonials-grid{grid-template-columns:1fr}
  .legacy .stats{grid-template-columns:1fr}
  .legacy .stat{border-left:none;padding-left:0;border-top:1px solid var(--line)}
  .legacy .footer-grid{grid-template-columns:1fr 1fr}
}

/* Der alte Entwurf ist Desktop-first; unter 560px würde der Footer sonst
   die Seite aufschieben (lange E-Mail). Desktop bleibt unverändert. */
@media(max-width:560px){
  .legacy .footer-grid{grid-template-columns:1fr;gap:36px;margin-bottom:48px}
  .legacy .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

/* Kopfleiste: über dem Hero transparent, danach echte Leiste mit Blur */
.header{border-bottom:1px solid transparent;will-change:transform;
  transition:transform .5s var(--ease),background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease)}
/* Beim Runterscrollen fährt die Leiste weg, beim Hochscrollen wieder ein */
.header.is-hidden{transform:translateY(-101%)}
.header.menu-open{transform:none}
.header.is-stuck{mix-blend-mode:normal;background:rgba(10,10,10,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);padding-top:14px;padding-bottom:14px}

.anim .fade,.anim .reveal{opacity:0;transform:translateY(22px)}
/* Seitenwechsel: die Seite blendet beim Laden ein und vor dem Verlassen aus,
   statt hart umzuschalten. Ohne JS bleibt alles sofort sichtbar. */
.anim body{opacity:0;transition:opacity .6s ease}
.anim.ist-da body{opacity:1}
.anim.geht body{opacity:0;transition:opacity .3s ease}

/* ============================================================
   Weitere Komponenten aus css/style.css (1:1, .legacy-Scope,
   Bildpfade auf diesen Unterordner angepasst)
   ============================================================ */
.legacy .page-hero{padding:200px 0 80px}
.legacy .page-hero .lead{margin-top:28px}
.legacy .detail-media{margin-top:64px}
.legacy .back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:32px;transition:color .3s}
.legacy .back-link:hover{color:var(--text)}

/* Portfolio-Grid */
.legacy .work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:64px}
.legacy .work-item{position:relative;display:block}
.legacy .work-item--lg{grid-column:span 8}
.legacy .work-item--md{grid-column:span 6}
.legacy .work-item--sm{grid-column:span 4}

/* Prozess */
.legacy .process-list{counter-reset:step;border-top:1px solid var(--line);margin-top:64px}
.legacy .process-item{display:grid;grid-template-columns:80px 1fr 1.4fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--line);align-items:baseline}
.legacy .process-item::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em;font-size:22px;color:var(--text-dim)}
.legacy .process-item h3{font-size:22px;text-transform:uppercase}
.legacy .process-item p{color:var(--text-dim)}

/* Pakete */
.legacy .package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;align-items:stretch}
.legacy .package{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:40px 36px;display:flex;flex-direction:column;gap:18px;position:relative;transition:border-color .4s,transform .4s var(--ease)}
.legacy .package:hover{border-color:var(--text-dim);transform:translateY(-4px)}
.legacy .package h3{font-size:20px;text-transform:uppercase}
.legacy .package .package-desc{color:var(--text-dim);font-size:14px}
.legacy .package .price{font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em;font-size:18px;margin-top:4px}
.legacy .package-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.legacy .package-top h3{flex:1 1 auto}
.legacy .package-top .price{margin-top:0;flex-shrink:0;white-space:nowrap}
.legacy .package-grid--two{grid-template-columns:repeat(2,1fr)}
.legacy .package-grid--four{grid-template-columns:repeat(4,1fr)}
.legacy .package-grid--four .package{padding:32px 28px;gap:10px}
.legacy .package-grid--four .package .price{margin-top:0}

/* Preislisten */
.legacy .price-subhead{font-family:var(--font-display);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin-top:56px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.legacy .price-list{border-top:1px solid var(--line);margin-top:28px}
.legacy .price-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.legacy .price-row-name{font-family:var(--font-display);font-weight:600;font-size:16px}
.legacy .price-row-desc{color:var(--text-dim);font-size:14px;margin-top:4px;max-width:74ch}
.legacy .price-row-value{font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em;font-size:19px;color:var(--text);white-space:nowrap;flex-shrink:0}

/* Badges */
.legacy .addon-badge,.legacy .opt-badge{font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line);border-radius:100px;padding:4px 10px;white-space:nowrap}
.legacy .incl-badge{font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-contrast);background:var(--accent);border-radius:100px;padding:4px 10px;white-space:nowrap}

/* Vorher/Nachher-Regler */
.legacy .compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;margin-top:56px}
.legacy .compare-block h3{font-size:20px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.legacy .compare-block .compare-desc{color:var(--text-dim);font-size:14px;margin-bottom:18px;max-width:54ch}
.legacy .compare-footnote{font-size:13px;color:var(--text-dim);margin-top:26px}
.legacy .compare{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;--pos:50%}
.legacy .compare:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.legacy .compare-layer{position:absolute;inset:0;display:flex;align-items:center;background-color:var(--bg-3);
  background-image:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.legacy .compare-before{justify-content:flex-start;clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:2}
.legacy .compare-after{justify-content:flex-end}
.legacy .compare--pro .compare-before{background-image:url("../images/immobilien/vorher-nachher/profi-vorher.jpg")}
.legacy .compare--pro .compare-after{background-image:url("../images/immobilien/vorher-nachher/profi-nachher.jpg")}
.legacy .compare--staging .compare-before{background-image:url("../images/immobilien/vorher-nachher/staging-vorher.jpg")}
.legacy .compare--staging .compare-after{background-image:url("../images/immobilien/vorher-nachher/staging-nachher.jpg")}
.legacy .compare--rasen .compare-before{background-image:url("../images/immobilien/vorher-nachher/rasen-vorher.jpg")}
.legacy .compare--rasen .compare-after{background-image:url("../images/immobilien/vorher-nachher/rasen-nachher.jpg")}
.legacy .compare--twilight .compare-before{background-image:url("../images/immobilien/vorher-nachher/twilight-vorher.jpg")}
.legacy .compare--twilight .compare-after{background-image:url("../images/immobilien/vorher-nachher/twilight-nachher.jpg")}
.legacy .compare--declutter .compare-before{background-image:url("../images/immobilien/vorher-nachher/declutter-vorher.jpg")}
.legacy .compare--declutter .compare-after{background-image:url("../images/immobilien/vorher-nachher/declutter-nachher.jpg")}
.legacy .compare-label{position:absolute;bottom:14px;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:100px;background:rgba(10,10,10,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--text);pointer-events:none;z-index:3}
.legacy .compare-label--before{left:14px}
.legacy .compare-label--after{right:14px}
.legacy .compare-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--text);transform:translateX(-1px);z-index:4;pointer-events:none}
.legacy .compare-handle{position:absolute;top:50%;left:var(--pos);width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:5;pointer-events:none;box-shadow:0 4px 24px rgba(0,0,0,.55)}
.legacy .compare-hint{font-size:13px;color:var(--text-dim);margin-top:20px}
.legacy .compare-featured{margin-top:48px}
.legacy .compare-featured .compare{aspect-ratio:16/9}
.legacy .compare-why{columns:2;column-gap:48px;margin-top:32px}
.legacy .compare-why li{break-inside:avoid;position:relative;padding:11px 0 11px 24px;font-size:15px;line-height:1.6;color:var(--text-dim)}
.legacy .compare-why li::before{content:"✦";position:absolute;left:0;top:11px;font-size:10px;line-height:24px;color:var(--text-dim)}
.legacy .compare-why strong{color:var(--text);font-weight:600}
.legacy .compare-sub{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-top:72px}

/* CTA-Band */
.legacy .cta-band{text-align:center;padding:clamp(80px,13vw,180px) 0;border-top:1px solid var(--line)}
.legacy .cta-band h2{margin-bottom:40px}
.legacy .cta-band .lead{margin:0 auto 40px}
.legacy .highlight-box{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--bg-2);padding:36px 40px;margin-top:48px}
.legacy .highlight-box h3{font-size:20px;text-transform:uppercase;margin-bottom:12px}
.legacy .highlight-box p{color:var(--text-dim)}
/* Weg zur Website unter dem Beispiel, im Stil der Hero-Fußzeile */
.legacy .highlight-box__link{display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#d5d5d0;text-decoration:none;transition:color .25s}
.legacy .highlight-box__link:hover{color:var(--text)}

@media(max-width:980px){
  .legacy .package-grid,.legacy .package-grid--two,.legacy .package-grid--four{grid-template-columns:1fr}
  .legacy .compare-grid{grid-template-columns:1fr}
  .legacy .compare-why{columns:1}
  .legacy .price-row{flex-direction:column;gap:6px}
  .legacy .process-item{grid-template-columns:48px 1fr}
  .legacy .process-item p{grid-column:2}
  .legacy .process-item{gap:20px 24px}
  .legacy .process-item h3{font-size:19px;hyphens:auto;overflow-wrap:anywhere}
  .legacy .work-item--lg,.legacy .work-item--md,.legacy .work-item--sm{grid-column:span 12}
  .legacy .page-hero{padding:150px 0 60px}
}

/* Nachgezogen für die Seite Privat & Business */
.legacy .media--square{aspect-ratio:1}
.legacy .package--featured{border-color:var(--text)}
.legacy .package-badge{position:absolute;top:-13px;left:32px;font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;background:var(--accent);color:var(--accent-contrast);border-radius:100px;padding:6px 14px}
.legacy .gallery-masonry{columns:2;column-gap:24px;margin-top:56px}
.legacy .gallery-masonry .media,.legacy .gallery-masonry .ph{margin-bottom:24px;break-inside:avoid;border-radius:var(--radius)}
@media(min-width:900px){.legacy .gallery-masonry{columns:3}}
@media(max-width:600px){.legacy .gallery-masonry{columns:1;column-gap:0}}

/* ============================================================
   Social-Media-Komponenten (1:1 aus css/style.css, .legacy-Scope)
   ============================================================ */
.legacy .reel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.legacy .reel{position:relative;aspect-ratio:9/16;border-radius:22px;border:1px solid var(--line);
  background-color:var(--bg-3);background-image:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px);
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;
  transition:transform .4s var(--ease),border-color .4s}
.legacy .reel:hover{transform:translateY(-4px);border-color:var(--text-dim)}
.legacy .reel::before,.legacy .reel::after{transition:opacity .35s var(--ease)}
.legacy .reel.is-playing::before{opacity:0}
.legacy .reel.is-playing::after{opacity:.55}
.legacy .reel img,.legacy .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.legacy .reel-poster{opacity:1;transition:opacity .35s var(--ease)}
.legacy .reel.is-playing .reel-poster{opacity:0}
.legacy .reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 32%,transparent 58%)}
.legacy .reel::before{content:"\25B6";position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;padding-left:4px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--text);font-size:16px}
.legacy .reel-tag,.legacy .feed-tag{position:absolute;z-index:2;top:16px;left:16px;font-family:var(--font-display);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  background:rgba(10,10,10,.6);padding:5px 10px;border-radius:100px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.legacy .reel-cap,.legacy .feed-cap{position:relative;z-index:2;font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--text)}
.legacy .feed-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.legacy .feed-item{position:relative;margin:0;aspect-ratio:4/5;border-radius:22px;border:1px solid var(--line);
  background-color:var(--bg-3);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;
  transition:transform .4s var(--ease),border-color .4s}
.legacy .feed-item:hover{transform:translateY(-4px);border-color:var(--text-dim)}
.legacy .feed-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.legacy .feed-item::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 32%,transparent 58%)}
.legacy .case-media{margin-top:20px}
.legacy .case-media .feed-row{margin-top:0}
.legacy .feed-row .reel{aspect-ratio:4/5}
.legacy .case-cap{color:var(--text-dim);font-size:13px;margin-top:12px}
.legacy .case-media .media video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.legacy .case-toggle{margin-top:28px;border-top:1px solid var(--line)}
.legacy .case-toggle summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:24px;padding:20px 0 4px;font-family:var(--font-display);font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;transition:color .3s}
.legacy .case-toggle summary::-webkit-details-marker{display:none}
.legacy .case-toggle summary:hover{color:var(--text-dim)}
.legacy .case-toggle summary::after{content:"+";font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em;font-size:24px;
  color:var(--text-dim);flex-shrink:0;transition:transform .3s var(--ease)}
.legacy .case-toggle[open] summary::after{transform:rotate(45deg)}
.legacy .case-toggle .case-body{padding-top:22px}
.legacy .case-toggle .case-cap{margin-top:14px}
.legacy .case-toggle .media video{width:100%;height:100%;object-fit:cover;background:#000}

.legacy .link-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.legacy .link-tile{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:28px 30px;overflow:hidden;
  transition:border-color .4s,background .4s,transform .4s var(--ease)}
.legacy .link-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.legacy .link-tile:hover{border-color:var(--text-dim);background:var(--bg-3);transform:translateY(-4px)}
.legacy .link-tile:hover::before{transform:scaleY(1)}
.legacy .link-tile h3{font-size:17px;text-transform:uppercase;letter-spacing:.01em}
.legacy .link-tile p{color:var(--text-dim);font-size:14px;margin-top:6px}
.legacy .link-tile .arrow{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:16px;border:1px solid var(--line);border-radius:var(--radius);
  transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.legacy .link-tile:hover .arrow{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent);transform:translateX(3px)}

@media(max-width:980px){
  .legacy .reel-row,.legacy .feed-row{grid-template-columns:repeat(2,1fr)}
  .legacy .link-tiles{grid-template-columns:1fr}
}

/* ---------- Leistungs-Übersicht (1:1 aus css/style.css portiert) ---------- */
.legacy .service-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:80px 0;
  border-top:1px solid var(--line);align-items:center;align-content:stretch;
  /* Einheitliche Höhe: Bild + Button sitzen in jedem Bereich gleich zentriert */
  min-height:740px}
.legacy .service-section:first-of-type{border-top:none}
.legacy .service-section:nth-child(even) .service-section-media{order:-1}
.legacy .service-section h2{font-size:clamp(28px,3vw,44px);text-transform:uppercase;margin-bottom:20px}
.legacy .service-section p{color:var(--text-dim);margin-bottom:16px}
.legacy .service-includes{margin-top:24px;border-top:1px solid var(--line);list-style:none}
.legacy .service-includes li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;font-size:15px}
.legacy .service-includes li::before{content:"✦";font-size:10px;color:var(--text-dim);align-self:flex-start;line-height:24px}
.legacy .service-detail-link{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;
  margin-top:20px;padding:18px 26px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.legacy .service-detail-link:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.legacy .service-detail-link .arrow{display:none}
@media(max-width:980px){
  .legacy .service-section{grid-template-columns:1fr;min-height:0;gap:36px}
  .legacy .service-section:nth-child(even) .service-section-media{order:0}
}

/* ---------- Portfolio: Filter, Bildunterschriften, Lightbox (1:1 portiert) ---------- */
.legacy .work-caption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.legacy .work-caption h3{font-size:17px;font-weight:600;text-transform:none;letter-spacing:0}
.legacy .work-caption span{font-family:var(--font-display);font-style:normal;font-weight:400;font-variation-settings:"wdth" 96;letter-spacing:0;font-size:14px;color:var(--text-dim)}
.legacy .filter-bar{display:flex;flex-wrap:wrap;gap:10px}
.legacy .filter-btn{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 22px;border:1px solid var(--line);border-radius:100px;
  background:transparent;color:var(--text-dim);cursor:pointer;transition:all .3s var(--ease)}
.legacy .filter-btn:hover{color:var(--text);border-color:var(--text-dim)}
.legacy .filter-btn.active{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.legacy .work-item.is-hidden{display:none}
/* Bilder statt Platzhalter: gleiche Hover-Geste wie beim .ph */
.legacy .work-item .media{transition:transform .5s var(--ease)}
.legacy .work-item:hover .media{transform:scale(.985)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:6vh 7vw;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease);font-family:var(--font-ui)}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-stage{width:min(1000px,100%);display:flex;flex-direction:column}
.lightbox-stage img{width:100%;max-height:76vh;object-fit:contain;display:block}
.lightbox-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:16px;color:var(--text)}
.lightbox-caption h3{font-family:var(--font-display);font-size:18px;font-weight:600;text-transform:none;letter-spacing:0}
.lightbox-caption span{font-family:var(--font-display);font-style:normal;font-weight:400;font-variation-settings:"wdth" 96;letter-spacing:0;color:var(--dim);font-size:15px}
.lightbox-close,.lightbox-nav{position:absolute;border:1px solid var(--line);background:rgba(10,10,10,.5);
  color:var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .3s,color .3s}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--text);color:var(--bg)}
.lightbox-close{top:24px;right:28px;width:44px;height:44px;font-size:18px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:24px}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

/* ---------- Über mich (1:1 aus css/style.css portiert) ---------- */
.legacy .about-split{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.legacy .about-split .media{position:sticky;top:120px}
.legacy .about-text p{color:var(--text-dim);margin-bottom:24px}
.legacy .about-text p strong{color:var(--text);font-weight:600}
.legacy .facts-list{border-top:1px solid var(--line);margin-top:40px;list-style:none}
.legacy .facts-list li{display:flex;justify-content:space-between;gap:24px;padding:18px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.legacy .facts-list li span:first-child{color:var(--text-dim)}
.legacy .about-lead{font-size:18px;line-height:1.8;color:var(--text-dim)}
.legacy .about-lead strong{color:var(--text);font-weight:600}
.legacy .about-story-inner{max-width:820px;margin:0 auto}
.legacy .about-story-inner p{color:var(--text-dim);font-size:17px;line-height:1.85;margin-bottom:22px}
.legacy .about-sub{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);margin:60px 0 20px;display:flex;align-items:center;gap:14px}
.legacy .about-sub::before{content:"";width:30px;height:1px;background:var(--accent);flex-shrink:0}
.legacy .about-story-inner > .about-sub:first-child{margin-top:0}
.legacy .pull-quote{font-family:var(--font-accent);font-style:italic;font-size:clamp(21px,2.6vw,30px);
  line-height:1.45;color:var(--text);border-left:2px solid var(--accent);padding-left:28px;margin:48px 0}
@media(max-width:980px){
  .legacy .about-split{grid-template-columns:1fr;gap:40px}
  .legacy .about-split .media{position:static}
}

/* ---------- Kontaktseite: Formular und Konfigurator (1:1 aus css/style.css) ---------- */
.legacy .contact-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}

.legacy .contact-info-list { margin-top: 40px; }
.legacy .contact-info-list li { margin-bottom: 28px; }
.legacy .contact-info-list .label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: 6px;
}
.legacy .contact-info-list a, .legacy .contact-info-list p { font-size: 17px; }

.legacy .form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.legacy .form-field { display: flex; flex-direction: column; gap: 8px; }
.legacy .form-field--full { grid-column: 1 / -1; }
.legacy .form-field label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.legacy .form-field input, .legacy .form-field select, .legacy .form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  color: var(--text);
  font: inherit;
  transition: border-color 0.3s;
  border-radius: 0;
}
.legacy .form-field select { appearance: none; cursor: pointer; }
/* Handy: das Auswahlfeld darf nicht breiter als sein Feld werden (die längste Option bestimmte sonst die Breite, Prüfung 14.09.) */
.legacy .form-field { min-width: 0; }
.legacy .form-field input, .legacy .form-field select, .legacy .form-field textarea { width: 100%; max-width: 100%; min-width: 0; }
.legacy .form-field select option { background: var(--bg-2); color: var(--text); }
.legacy .form-field textarea { resize: vertical; min-height: 120px; }
.legacy .form-field input:focus, .legacy .form-field select:focus, .legacy .form-field textarea:focus { outline: none; border-bottom-color: var(--text); }
.legacy .form-field input::placeholder, .legacy .form-field textarea::placeholder { color: #55554f; }

.legacy .form-note { grid-column: 1 / -1; font-size: 13px; color: var(--text-dim); }
.legacy .form .btn { grid-column: 1 / -1; justify-content: center; white-space: nowrap; }


.legacy .configurator { display: none; grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 28px; }
.legacy .configurator.is-active { display: block; }
.legacy .config-intro { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
.legacy .config-group { margin-top: 24px; }
.legacy .config-group:first-of-type { margin-top: 0; }
.legacy .config-glabel { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.legacy .config-options { display: flex; flex-wrap: wrap; gap: 10px; }
.legacy .config-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 100px; padding: 10px 16px; cursor: pointer; font-size: 14px; transition: border-color 0.25s, background 0.25s, color 0.25s; user-select: none; }
.legacy .config-chip:hover { border-color: var(--text-dim); }
.legacy .config-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.legacy .config-chip .chip-price { color: var(--text-dim); font-size: 13px; }
.legacy .config-chip.is-checked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text); }
.legacy .config-chip.is-checked .chip-price { color: var(--text); }
.legacy .config-qty-row { margin-top: 12px; display: none; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); }
.legacy .config-qty-row.is-visible { display: flex; }
.legacy .config-qty { width: 64px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 14px; }
.legacy .config-hint { color: var(--text-dim); font-size: 12px; }
.legacy .config-summary { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.legacy .config-summary h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.legacy .config-summary ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.legacy .config-summary li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.legacy .config-summary li .s-price { color: var(--text-dim); white-space: nowrap; }
.legacy .config-empty { color: var(--text-dim); font-size: 14px; }
.legacy .config-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.legacy .config-total .t-label { font-size: 14px; color: var(--text-dim); }
.legacy .config-total .t-value { font-family:var(--font-display);font-style:normal;font-weight:300;font-variation-settings:"wdth" 96;letter-spacing:-.01em; font-size: 22px; color: var(--text); }
.legacy .config-note { color: var(--text-dim); font-size: 12px; margin-top: 12px; line-height: 1.5; }


.legacy .config-current[hidden], .legacy .config-cart[hidden] { display: none; }
.legacy .config-cart { border: 1px solid var(--text-dim); border-radius: var(--radius); background: var(--bg-2); padding: 24px 28px; margin-bottom: 22px; }
.legacy .config-cart > h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.legacy .cart-item { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legacy .cart-item:last-child { border-bottom: none; }
.legacy .cart-item .ci-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.legacy .cart-item .ci-lines { color: var(--text-dim); font-size: 13px; margin-top: 5px; line-height: 1.55; }
.legacy .cart-item .ci-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.legacy .cart-item .ci-price { font-family:var(--font-display);font-style:normal;font-weight:400;font-variation-settings:"wdth" 96;letter-spacing:0; font-size: 16px; white-space: nowrap; }
.legacy .cart-item .ci-actions { display: flex; gap: 14px; }
.legacy .cart-item .ci-actions button { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; transition: color 0.25s; }
.legacy .cart-item .ci-actions button:hover { color: var(--text); }
.legacy .config-grand { border-top-width: 2px; }
.legacy .config-grand .t-label { color: var(--text); }
.legacy .config-grand .t-value { font-size: 24px; }
.legacy .config-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.legacy .config-add { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--text-dim); background: none; color: var(--text); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 12px 22px; border-radius: 100px; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.legacy .config-add:hover { border-color: var(--text); }
.legacy .config-add--primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.legacy .config-add--primary:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.legacy .config-add[hidden] { display: none; }
.legacy .config-add-hint { flex-basis: 100%; max-width: 640px; margin-top: 2px; line-height: 1.5; }
.legacy .config-add-hint[hidden] { display: none; }





.legacy .page-hero { padding: 200px 0 80px; }
.legacy .page-hero .lead { margin-top: 28px; }


.legacy .legal-content { max-width: 720px; padding-bottom: 120px; }
.legacy .legal-content h2 { font-size: 22px; margin: 48px 0 16px; }
.legacy .legal-content p { color: var(--text-dim); margin-bottom: 16px; }
.legacy .legal-content ul { color: var(--text-dim); margin: 0 0 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.legacy .legal-content li { list-style: disc; }
.legacy .legal-content a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.legacy .legal-stand { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
@media(max-width:980px){
  .legacy .contact-split{grid-template-columns:1fr;gap:44px}
  .legacy .form{grid-template-columns:1fr}
}
/* ══ Wortmarke ═══════════════════════════════════════════════════════════════
   Das Monogramm führt durch die Seite — Kopf und Fußzeile.
   Die Signatur unterschreibt nur Inhalte: Ladebild, „Über mich", Abbinder. */

.brand--logo{display:inline-flex;align-items:center;gap:6px;line-height:0}
.brand--logo .logo-wort{transform:translateY(1px)}
.brand--logo .logo-mono{height:30px;width:auto}
@media(max-width:760px){.brand--logo .logo-mono{height:24px}}

.logo-wort{font-family:var(--font-display);font-weight:800;font-variation-settings:"wdth" 78;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;font-style:normal}
.logo-wort i{display:block;font-style:normal;font-weight:600;font-size:9px;
  letter-spacing:.3em;opacity:.72;margin-top:1px}

.legacy .footer-brand .logo{display:inline-flex;align-items:center;gap:18px;line-height:0;margin-bottom:6px}
.legacy .footer-brand .logo .logo-mono{height:64px;width:auto}
.logo-wort--gross{font-size:20px;letter-spacing:.18em}
.logo-wort--gross i{font-size:13px;margin-top:3px}
@media(max-width:760px){
  .legacy .footer-brand .logo .logo-mono{height:48px}
  .logo-wort--gross{font-size:16px}
}

/* Unterschrift unter „Über mich" */
.logo-unterschrift{display:block;margin:2px 0 34px;line-height:0;color:var(--text)}
.logo-unterschrift svg{height:124px;width:auto;opacity:.92}
@media(max-width:760px){.logo-unterschrift svg{height:96px}}

/* Abbinder unter dem Kontakt-Block. Die Seite setzt svg{display:block},
   damit greift text-align:center nicht mehr — also selbst mittig legen. */
.logo-abbinder{line-height:0;margin-top:clamp(52px,7vw,96px);display:flex;justify-content:center}
.logo-abbinder svg{height:clamp(88px,11vw,140px);width:auto;opacity:.8}

/* Wasserzeichen in der Großansicht. Die Ecke setzt js/unterseite.js aus der
   tatsächlichen Bildfläche — bei hochformatigen Fotos läge eine feste
   Fensterecke sonst neben dem Bild. */
.lightbox-stage{position:relative}
.logo-wasser{position:absolute;left:0;top:0;line-height:0;pointer-events:none;z-index:4;
  transform:translate(calc(-100% - clamp(14px,1.6vw,26px)),calc(-100% - clamp(12px,1.4vw,22px)));
  transition:opacity .3s var(--ease)}
.logo-wasser svg{height:clamp(40px,5.2vw,70px);width:auto;opacity:.68;
  filter:drop-shadow(0 1px 7px rgba(0,0,0,.6))}
@media(max-width:560px){.logo-wasser svg{height:30px}}

/* ── Reel-Kacheln (1:1 aus css/style.css, unter .legacy gekapselt) ────────
   Vier hochformatige Clips, die beim Überfahren anspringen. */
.legacy .reel-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.legacy .reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  border: 1px solid var(--line);
  background-color: var(--bg-3);
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,0.025) 14px 15px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.legacy .reel:hover { transform: translateY(-4px); border-color: var(--text-dim); }
/* Während der Wiedergabe verschwinden Play-Symbol und Abdunklung */
.legacy .reel.is-playing::before { opacity: 0; }
.legacy .reel.is-playing::after { opacity: 0.55; }
.legacy .reel::before, .legacy .reel::after { transition: opacity 0.35s var(--ease); }
/* Echte Vorschaubilder und Clips */
.reel img,
.legacy .reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Das Thumbnail liegt als eigenes Bild über dem Video. Nur so ist sicher, dass
   nach dem Stoppen wieder das Thumbnail zu sehen ist und nicht der Frame,
   auf dem das Video gerade stand. */
.legacy .reel-poster {
  opacity: 1;
  transition: opacity 0.35s var(--ease);
}
.legacy .reel.is-playing .reel-poster { opacity: 0; }
/* Abdunklung unten, damit die Beschriftung lesbar bleibt */
.legacy .reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 32%, transparent 58%);
  pointer-events: none;
}
.legacy .reel::before {
  content: "\25B6";
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--text);
  font-size: 16px;
}
.reel-tag,
.legacy .feed-tag {
  position: absolute;
  z-index: 2;
  top: 16px; left: 16px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 10, 10, 0.6);
  padding: 5px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.reel-cap,
.legacy .feed-cap {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}


@media(max-width:900px){.legacy .reel-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.legacy .reel-row{grid-template-columns:1fr;gap:14px}}

/* ── Mobiles Menü ─────────────────────────────────────────────────────────
   Unter 760 px verschwinden die Textlinks aus der Kopfzeile. Bisher gab es
   dann keine Navigation außer der Fußzeile. Der Knopf klappt die Links als
   Liste unter die Leiste; die Pille „Projekt anfragen" bleibt immer sichtbar. */
.nav__toggle{display:none;width:40px;height:40px;margin-left:6px;padding:0;border:0;
  background:transparent;color:inherit;cursor:pointer;position:relative;flex:none}
.nav__toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),top .3s var(--ease),opacity .3s}
.nav__toggle span:first-child{top:15px}
.nav__toggle span:last-child{top:24px}
.header.menu-open .nav__toggle span:first-child{top:19.5px;transform:rotate(45deg)}
.header.menu-open .nav__toggle span:last-child{top:19.5px;transform:rotate(-45deg)}
@media(max-width:760px){
  .header{flex-wrap:wrap}
  .nav__toggle{display:block}
  .header.menu-open{mix-blend-mode:normal;background:rgba(10,10,10,.96);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .header.menu-open .nav{order:3;flex-basis:100%;flex-direction:column;align-items:flex-start;
    gap:0;padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.12);margin-top:12px}
  .header.menu-open .nav a:not(.nav__cta){display:block;padding:14px 0;font-size:15px;
    letter-spacing:.14em;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .header.menu-open .nav a:not(.nav__cta)::after{display:none}
  .header.menu-open .nav .nav__cta{margin-top:16px;align-self:flex-start}
}

/* Rückmeldung unter dem Kontaktformular */
.legacy .form-status{margin-top:18px;font-size:14px;line-height:1.5;color:#e0a8a0}
.legacy .form-status.is-ok{color:#9fd6a8}

/* Hervorgehobene Preisänderungen (Porträt & Event: brutto/netto) */
.legacy .price-row-value strong,.legacy .lead strong{font-weight:700;color:var(--text)}

/* Handy: kein Weichzeichner hinter der festen Kopfleiste — backdrop-filter über einem scrollenden
   Bildraster ruckelt auf iOS (15.09.) */
@media(max-width:980px){.header.is-stuck{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,10,.96)}}