/* =========================================================
   Felix Staffa – Portfolio
   Fluid, responsive layout: alle Größen skalieren mit dem Viewport
   (clamp / max-width / aspect-ratio) statt fixer Pixelwerte.
   ========================================================= */

:root{
  --bg: #0b0b0b;
  --surface: #161616;
  --surface-2: #1f1e1e;
  --line: rgba(255,252,238,.09);
  --text: #FFFCEE;
  --muted: rgba(255,252,238,.68);
  --accent: #FFAA00;
  --accent-dark: #BB7E05;
  --accent-rgb: 255,170,0;
  --accent-hover: #ffbb33;
  --font-display: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --accent-ink: #FFAA00;               /* Akzent als Textfarbe (im Hell-Modus dunkler für Lesbarkeit) */
  --bg-rgb: 11,11,11;                  /* Hintergrund als RGB für halbtransparente Flächen */
  --glass: rgba(43,42,42,.85);         /* Menü-Pille, Sprachschalter */
  --menu-bg: rgba(24,24,24,.96);       /* aufgeklapptes Menü, Nach-oben-Button */
  --frame: rgba(255,255,255,.12);      /* Rahmen um Bilder/Videos */
  --surface-hi: #232222;               /* Lichtpunkt in Equipment-Karten */
  --gear-glow: rgba(255,255,255,.25);
  --stripe: rgba(255,255,255,.02);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.4);
  color-scheme: dark;

  --maxw: 1200px;
  --gutter: clamp(16px, calc(4vw / var(--zoom)), 48px);
  --radius: 20px;
  --radius-sm: 12px;
  --header-h: 72px;

  --ease: cubic-bezier(.22,.9,.35,1);
  --shadow: 0 18px 50px rgba(0,0,0,.5);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(15px, calc(1vw / var(--zoom)) + 10px, 17px);
  line-height: 1.7;
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; }
p{ margin: 0 0 1em; }
h1, h2, h3{ margin: 0; line-height: 1.1; font-weight: 700; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--accent); color: #0b0b0b; padding: 10px 16px;
  border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus{ top: 12px; }

.container{
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

/* ---------- Header / Navigation ---------- */

.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--bg-rgb),.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.topbar.is-scrolled{
  border-bottom-color: var(--line);
  background: rgba(var(--bg-rgb),.88);
}
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand{
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
}
.brand__dot{ color: var(--accent); font-weight: 800; margin-left: 3px; }

.nav{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.nav__link{
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: var(--text);
  transition: color .18s, background .18s;
}
.nav__link:hover{ color: var(--accent-ink); }
.nav__link.is-active{ background: rgba(var(--accent-rgb),.14); color: var(--accent-ink); font-weight: 500; }
.nav__link--cta{ background: var(--accent); color: #0b0b0b; font-weight: 600; }
.nav__link--cta:hover,
.nav__link--cta.is-active{ background: var(--accent-hover); color: #0b0b0b; }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg{ width: 22px; height: 22px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

@media (max-width: 1240px){
  .nav-toggle{ display: inline-flex; }
  .nav{
    position: absolute;
    top: calc(100% + 8px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--menu-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav.is-open{ opacity: 1; visibility: visible; transform: none; }
  .nav__link{ padding: 14px 16px; font-size: 17px; border-radius: 12px; }
}

/* ---------- Buttons & kleine Elemente ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--ease), background .18s, color .18s, border-color .18s;
}
.btn svg{ width: 20px; height: 20px; flex: none; }
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--accent); color: #0b0b0b; }
.btn--primary:hover{ background: var(--accent-hover); }
.btn--ghost{ border-color: rgba(var(--accent-rgb),.55); color: var(--text); background: transparent; }
.btn--ghost:hover{ border-color: var(--accent-ink); color: var(--accent-ink); }

.accent-underline{
  color: var(--accent-ink);
  font-weight: 600;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 1px;
}

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after{ content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after{ transform: translateX(4px); }

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s;
}
.back-link:hover{ background: rgba(var(--accent-rgb),.14); }

/* ---------- Sektionen & Überschriften ---------- */

.section{
  padding-block: clamp(64px, calc(9vw / var(--zoom)), 120px);
  border-top: 1px solid var(--line);
}
.section--first{ border-top: 0; }

.section-title{ margin-bottom: clamp(28px, calc(4vw / var(--zoom)), 48px); }
.section-title__small{
  display: block;
  font-size: clamp(28px, calc(4vw / var(--zoom)), 48px);
  font-weight: 300;
  line-height: 1;
}
.section-title__big{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: clamp(34px, calc(5.5vw / var(--zoom)), 68px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.section-title__big::before{
  content: "";
  flex: none;
  width: clamp(28px, calc(4vw / var(--zoom)), 56px);
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.section-title--center{ text-align: center; }
.section-title--center .section-title__big{ justify-content: center; }

.lead{ font-size: 1.08em; color: var(--text); }
.muted{ color: var(--muted); }

/* ---------- Hero ---------- */

.hero{
  padding-block: clamp(24px, calc(5vw / var(--zoom)), 64px) clamp(48px, calc(7vw / var(--zoom)), 96px);
}

.hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; }

.social{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s, border-color .18s;
}
.social svg{ width: 18px; height: 18px; }
.social:hover{ color: var(--accent-ink); border-color: rgba(var(--accent-rgb),.5); }

.role{
  margin: 4px 0 16px;
  font-size: clamp(24px, calc(2.6vw / var(--zoom)), 34px);
  font-weight: 800;
  line-height: 1.15;
}

@media (max-width: 640px){
  
  
  
  
  .hero__actions{ justify-content: center; }
  
}

/* ---------- Arbeiten-Karussell ---------- */

.carousel{ position: relative; }
.carousel__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, calc(3vw / var(--zoom)), 32px);
}
.carousel__head .section-title{ margin-bottom: 0; }
.carousel__controls{ display: flex; gap: 10px; }
.carousel__btn{
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, opacity .18s;
}
.carousel__btn svg{ width: 20px; height: 20px; }
.carousel__btn:hover:not(:disabled){ background: var(--accent); color: #0b0b0b; }
.carousel__btn:disabled{ opacity: .35; cursor: default; }

.carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, calc(38vw / var(--zoom)), 460px);
  gap: clamp(16px, calc(2vw / var(--zoom)), 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: 12px;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.carousel__track::-webkit-scrollbar{ display: none; }
.carousel__track > *{ scroll-snap-align: start; }

/* ---------- Video-/Projektkarten ---------- */

.work-card{ display: flex; flex-direction: column; gap: 14px; }

.media{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.media::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--frame);
  pointer-events: none;
  transition: border-color .2s, box-shadow .2s;
}
.media:hover::after,
.media:focus-visible::after{
  border-color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.media:focus-visible{ outline-offset: 4px; }

.media img,
.media video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media img{ transition: transform .4s var(--ease), opacity .3s; }
.media:hover img{ transform: scale(1.04); }
.media video{ opacity: 0; transition: opacity .3s; }
.media.is-previewing video{ opacity: 1; }

.play-icon{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(48px, calc(5vw / var(--zoom)), 64px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  transition: transform .2s var(--ease), background .2s, opacity .2s;
}
.play-icon::after{
  content: "";
  margin-left: 4px;
  border-left: 14px solid #FFFCEE;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.media:hover .play-icon{ background: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
.media:hover .play-icon::after{ border-left-color: #0b0b0b; }
.media.is-previewing .play-icon{ opacity: 0; }

.work-card__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.work-card__title{ font-size: clamp(17px, calc(1.4vw / var(--zoom)), 20px); font-weight: 600; }
.work-card__tag{
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
  letter-spacing: .5px;
}
.work-card__link{ font-size: 14px; }

.carousel__footer{ margin-top: clamp(20px, calc(3vw / var(--zoom)), 32px); }

/* ---------- Zwei-Spalten-Layout (Text + Bild) ---------- */

.split{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, calc(6vw / var(--zoom)), 88px);
  align-items: center;
}
.split--reverse{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split--reverse .split__media{ order: -1; }

.split__media{
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
.split__media img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split__text p{ color: var(--muted); max-width: 62ch; }
.split__text p strong{ color: var(--text); font-weight: 500; }

@media (max-width: 860px){
  .split,
  .split--reverse{ grid-template-columns: 1fr; }
  .split--reverse .split__media{ order: 0; }
  .split__media{ max-width: 420px; }
}

.facts{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.facts li{
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  line-height: 1.3;
}
.facts strong{ display: block; color: var(--accent-ink); font-size: 1.25em; font-weight: 700; }
.facts li > span{ display: block; font-size: 13px; color: var(--muted); }

/* ---------- Leistungen ---------- */

.services{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service{
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s, transform .2s var(--ease);
}
.service:hover{ border-color: rgba(var(--accent-rgb),.45); transform: translateY(-3px); }
.service__title{
  display: inline-block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2.5px solid var(--accent);
  line-height: 1.4;
}
.service__desc{ margin: 0; color: var(--muted); font-size: .95em; line-height: 1.55; }
@media (max-width: 560px){ .services{ grid-template-columns: 1fr; } }

.cutout{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  justify-self: center;
}
.cutout::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 92%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 4px solid var(--accent);
}
.cutout img{
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

/* ---------- Equipment ---------- */

.gear-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, calc(2vw / var(--zoom)), 22px);
}
.gear{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 20%, var(--surface-hi) 0%, var(--surface) 70%);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s var(--ease);
}
.gear:hover{ border-color: rgba(var(--accent-rgb),.5); transform: translateY(-4px); }
.gear__img{
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}
/* Bild immer mittig im gleich großen Feld, proportional eingepasst */
.gear__img img{
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  margin: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 10px var(--gear-glow));
  transition: transform .3s var(--ease), filter .3s;
}
.gear:hover .gear__img img{
  transform: scale(1.06);
  filter: drop-shadow(0 0 22px rgba(var(--accent-rgb),.55));
}
.gear__title{ font-size: 19px; font-weight: 600; }
.gear__desc{ margin: 6px 0 0; color: var(--muted); font-size: .92em; line-height: 1.55; }
.gear .link-arrow{ margin-top: 12px; font-size: 14px; }

.gear ul{ margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: .92em; line-height: 1.55; }
.gear li + li{ margin-top: 6px; }

/* ---------- Kontakt ---------- */

.contact{
  text-align: center;
  padding: clamp(36px, calc(6vw / var(--zoom)), 72px) clamp(20px, calc(5vw / var(--zoom)), 64px);
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(var(--accent-rgb),.16), transparent 60%),
    var(--surface);
  border: 1px solid rgba(var(--accent-rgb),.2);
}
.contact p{ color: var(--muted); max-width: 52ch; margin-inline: auto; }
.contact__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.contact__details{
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Footer / Impressum ---------- */

.footer{
  padding-block: clamp(40px, calc(6vw / var(--zoom)), 72px) 32px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.footer h3{
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-ink);
}

.footer p{ line-height: 1.6; }
.footer a{ color: var(--text); }

/* ---------- Projekte-Seite ---------- */

.page-head{ padding-block: clamp(24px, calc(4vw / var(--zoom)), 48px) 0; }
.page-head p{ color: var(--muted); max-width: 60ch; }

.work-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, calc(4vw / var(--zoom)), 48px) clamp(20px, calc(3vw / var(--zoom)), 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-grid > .work-card--featured{ grid-column: 1 / -1; }
@media (max-width: 720px){ .work-grid{ grid-template-columns: 1fr; } }

.work-card__actions{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Projekt-Detailseite ---------- */

.player{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--frame);
}
.player video{ width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }

.stills{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.stills img{
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.stills img:nth-child(2){ margin-top: 40px; }

/* ---------- Post-Produktion ---------- */

.figure{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--frame);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.figure img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.figure--portrait img{ aspect-ratio: 4 / 5; object-position: center; }
.figure figcaption{ padding: 10px 16px; font-size: 13px; color: var(--muted); }

.stack{ display: grid; gap: clamp(48px, calc(8vw / var(--zoom)), 104px); }

/* ---------- Lightbox ---------- */

.lightbox{
  --text: #FFFCEE;
  --muted: rgba(255,252,238,.68);
  --surface-2: #1f1e1e;
  width: min(100% - 2 * var(--gutter), 1200px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.lightbox::backdrop{
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.lightbox__title{ font-size: clamp(16px, calc(2vw / var(--zoom)), 22px); font-weight: 600; }
.lightbox__close{
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover{ background: var(--accent); color: #0b0b0b; }
.lightbox__close svg{ width: 20px; height: 20px; }
.lightbox video{
  width: 100%;
  max-height: calc(calc(100vh / var(--zoom)) - 140px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: #000;
}
.lightbox__hint{ margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Scroll-Animation ---------- */

.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible{ opacity: 1; transform: none; }

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

/* ---------- Projekt-Kategorien ---------- */

.category-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.category-nav a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s, color .18s;
}
.category-nav a:hover{ border-color: rgba(var(--accent-rgb),.5); color: var(--accent-ink); }

.badge{
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0b0b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}

.category{ padding-block: clamp(40px, calc(6vw / var(--zoom)), 72px); }
.category__title{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
  margin-bottom: clamp(20px, calc(3vw / var(--zoom)), 32px);
  font-size: clamp(26px, calc(3.4vw / var(--zoom)), 40px);
  font-weight: 700;
  text-transform: uppercase;
}
.category__title .category__small{
  font-weight: 300;
  text-transform: none;
  color: var(--muted);
}
.category__title::before{
  content: "";
  align-self: center;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- Hochzeiten ---------- */

/* Platzhalter für Bilder/Videos, die noch geliefert werden */
.placeholder{
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: var(--radius);
  border: 2px dashed rgba(var(--accent-rgb),.35);
  background:
    repeating-linear-gradient(135deg, var(--stripe) 0 12px, transparent 12px 24px),
    var(--surface);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.placeholder svg{ width: 36px; height: 36px; color: var(--accent-ink); opacity: .8; }

.placeholder small{ display: block; font-size: 12px; font-weight: 300; opacity: .8; }

.gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, calc(1.6vw / var(--zoom)), 18px);
}
.gallery > :nth-child(1){ grid-column: span 2; grid-row: span 2; }
.gallery > :nth-child(1).placeholder{ aspect-ratio: auto; height: 100%; }
.gallery img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 640px){
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery > :nth-child(1){ grid-column: 1 / -1; grid-row: auto; }
  .gallery > :nth-child(1).placeholder{ aspect-ratio: 16 / 9; }
}

/* Ablauf */
.steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(14px, calc(2vw / var(--zoom)), 22px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step{
  position: relative;
  padding: 24px 22px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  counter-increment: step;
}
.step::before{
  content: "0" counter(step);
  display: block;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-ink);
}
.step h3{ font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.step p{ margin: 0; color: var(--muted); font-size: .94em; line-height: 1.6; }

/* Pakete */
.pricing{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, calc(2vw / var(--zoom)), 24px);
  align-items: stretch;
}
.price-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, calc(3vw / var(--zoom)), 32px);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
}
.price-card--featured{
  border-color: rgba(var(--accent-rgb),.6);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--accent-rgb),.14), transparent 70%),
    var(--surface);
  box-shadow: 0 20px 60px rgba(var(--accent-rgb),.08);
}
.price-card__badge{
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0b0b;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.price-card__name{ font-size: 20px; font-weight: 600; }
.price-card__desc{ margin: 6px 0 18px; color: var(--muted); font-size: .92em; line-height: 1.5; }
.price-card__price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 20px;
  font-size: clamp(34px, calc(4vw / var(--zoom)), 44px);
  font-weight: 800;
  line-height: 1;
}
.price-card__price small{ font-size: 14px; font-weight: 400; color: var(--muted); }
.price-card ul{
  flex: 1;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: .94em;
  line-height: 1.5;
}
.price-card li{
  position: relative;
  padding-left: 28px;
}
.price-card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.15);
}
.price-card li::after{
  content: "";
  position: absolute;
  left: 3px;
  top: calc(.2em + 3px);
  width: 12px;
  height: 12px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-card li strong{ font-weight: 600; color: var(--accent-ink); }
.price-card .btn{ width: 100%; }
.pricing-note{ margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; }

/* FAQ */
.faq{ display: grid; gap: 10px; max-width: 860px; }
.faq details{
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s;
}
.faq details[open]{ border-color: rgba(var(--accent-rgb),.4); }
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  flex: none;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ margin: 0; padding: 0 22px 20px; color: var(--muted); }

/* =========================================================
   Hochzeits-Theme (nur hochzeiten.html, body.theme-wedding)
   Gleiches System, aber wärmer und eleganter:
   Champagner-Gold statt Orange, Serifen-Überschriften, Filmkorn.
   Zum Deaktivieren einfach die Klasse im <body> entfernen.
   ========================================================= */

.theme-wedding{
  --bg: #0f0c0a;
  --surface: #1a1511;
  --surface-2: #241d17;
  --line: rgba(255,236,210,.1);
  --text: #FBF5EA;
  --muted: rgba(251,245,234,.7);
  --accent: #E0B36A;
  --accent-dark: #9A7440;
  --accent-rgb: 224,179,106;
  --accent-hover: #EBC585;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --accent-ink: #E0B36A;
  --bg-rgb: 15,12,10;
  --radius: 26px;
  --radius-sm: 16px;
}

.theme-wedding .topbar{ background: rgba(var(--bg-rgb),.7); }
.theme-wedding .topbar.is-scrolled{ background: rgba(var(--bg-rgb),.9); }

/* Feines Filmkorn über der ganzen Seite */
.theme-wedding::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Serifen-Überschriften */
.theme-wedding .section-title__small{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, calc(4vw / var(--zoom)), 48px);
  color: var(--accent-ink);
}
.theme-wedding .section-title__big{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, calc(6vw / var(--zoom)), 76px);
  letter-spacing: .04em;
  margin-top: 0;
}
.theme-wedding .section-title__big::before{ height: 2px; }
.theme-wedding .price-card__price,
.theme-wedding .step::before{
  font-family: var(--font-display);
  font-weight: 600;
}
.theme-wedding .step::before{ font-size: 44px; }
.theme-wedding .price-card__price{ font-size: clamp(42px, calc(5vw / var(--zoom)), 54px); }
.theme-wedding .price-card__name{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Weichere, ruhigere Details */
.theme-wedding .media::after,
.theme-wedding .figure{ border-width: 1px; }
.js .theme-wedding .reveal{ transform: translateY(14px); transition-duration: 1.1s; }
.js .theme-wedding .reveal.is-visible{ transform: none; }
.theme-wedding .section{ padding-block: clamp(72px, calc(10vw / var(--zoom)), 136px); }

/* Großes Titelbild */
.wedding-cover{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(88vh / var(--zoom)), 860px);
  padding-block: clamp(32px, calc(5vw / var(--zoom)), 64px) clamp(48px, calc(8vw / var(--zoom)), 96px);
  overflow: hidden;
  isolation: isolate;
}
.wedding-cover__bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.wedding-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb),.55) 0%, rgba(var(--bg-rgb),.15) 35%, rgba(var(--bg-rgb),.75) 72%, var(--bg) 100%),
    linear-gradient(90deg, rgba(var(--bg-rgb),.7) 0%, rgba(var(--bg-rgb),0) 65%);
}
.wedding-cover__inner{ position: relative; }
.wedding-cover__top{
  position: absolute;
  top: clamp(16px, calc(3vw / var(--zoom)), 32px);
  left: 0;
  right: 0;
}
.wedding-cover .back-link{
  margin: 0;
  background: rgba(var(--bg-rgb),.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wedding-cover__kicker{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.wedding-cover__kicker::before{
  content: "";
  width: 40px;
  height: 1px;
  background: var(--accent);
}
.wedding-cover__title{
  font-family: var(--font-display);
  font-size: clamp(52px, calc(9vw / var(--zoom)), 120px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.wedding-cover__title em{ color: var(--accent-ink); font-weight: 400; }
.wedding-cover__text{
  max-width: 50ch;
  color: var(--text);
  opacity: .9;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.wedding-cover__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.wedding-cover__actions .btn--ghost{
  background: rgba(var(--bg-rgb),.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--play::before{
  content: "";
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

@media (max-width: 640px){
  .wedding-cover__bg{ object-position: 60% 30%; }
}
@media (prefers-reduced-motion: reduce){
  .js .theme-wedding .reveal{ transform: none; }
}

/* =========================================================
   Mehrsprachigkeit (DE/EN)
   Texte stehen doppelt im HTML: lang="de" und lang="en".
   Angezeigt wird nur die Sprache, die auf <html lang> gesetzt ist.
   ========================================================= */

html:not([lang="en"]) body [lang="en"],
html[lang="en"] body [lang="de"]{ display: none !important; }

.topbar__right{ display: flex; align-items: center; gap: 12px; }

.lang-switch{
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
}
.lang-switch__opt{
  padding: 6px 10px;
  border-radius: 999px;
  transition: background .18s, color .18s;
}
html:not([lang="en"]) .lang-switch__opt[data-opt="de"],
html[lang="en"] .lang-switch__opt[data-opt="en"]{
  background: var(--accent);
  color: #0b0b0b;
}
.lang-switch:hover{ color: var(--text); }

/* ---------- Ton-Hinweis bei stummer Vorschau ---------- */

.sound-hint{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFCEE;                      /* liegt immer auf dem Video – in beiden Modi hell */
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s var(--ease);
  pointer-events: none;
}
.sound-hint svg{ width: 16px; height: 16px; color: var(--accent-ink); }
.media.is-previewing .sound-hint{ opacity: 1; transform: none; }
.media.is-previewing .sound-hint svg{ animation: sound-pulse 1.6s ease-in-out infinite; }
@keyframes sound-pulse{ 50%{ transform: scale(1.18); } }

/* ---------- E-Mail kopieren ---------- */

.copy-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .18s, background .18s;
}
.copy-btn:hover{ border-color: rgba(var(--accent-rgb),.5); }
.copy-btn svg{ width: 14px; height: 14px; }
.copy-btn.is-copied{ background: var(--accent); color: #0b0b0b; border-color: var(--accent-ink); }

/* ---------- Nach-oben-Button ---------- */

.to-top{
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--menu-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s, background .18s, color .18s;
}
.to-top.is-visible{ opacity: 1; visibility: visible; transform: none; }
.to-top:hover{ background: var(--accent); color: #0b0b0b; }
.to-top svg{ width: 20px; height: 20px; }

/* ---------- 404 ---------- */

.error-page{
  min-height: calc(calc(100vh / var(--zoom)) - var(--header-h) - 120px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 64px;
}
.error-page__code{
  font-size: clamp(96px, calc(20vw / var(--zoom)), 200px);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}
.error-page h1{ margin: 12px 0; font-size: clamp(24px, calc(3vw / var(--zoom)), 34px); }
.error-page p{ color: var(--muted); max-width: 44ch; margin-inline: auto; }
.error-page .hero__actions{ justify-content: center; margin-top: 24px; }

/* =========================================================
   Hell-Modus  (<html data-theme="light">)
   Nur Farben werden überschrieben – Layout bleibt identisch.
   ========================================================= */

html[data-theme="light"]{
  --bg: #FAF8F4;
  --bg-rgb: 250,248,244;
  --surface: #FFFFFF;
  --surface-2: #F0ECE4;
  --surface-hi: #FFFFFF;
  --line: rgba(20,18,15,.1);
  --text: #151412;
  --muted: rgba(21,20,18,.68);
  --accent: #FFAA00;
  --accent-dark: #F0B640;
  --accent-ink: #B36B00;
  --accent-hover: #FFB92E;
  --glass: rgba(255,255,255,.88);
  --menu-bg: rgba(255,255,255,.97);
  --frame: rgba(20,18,15,.1);
  --gear-glow: rgba(var(--accent-rgb),.55);   /* sichtbarer, warmer Schein auf hellem Grund */
  --stripe: rgba(20,18,15,.035);
  --shadow: 0 18px 50px rgba(40,28,0,.12);
  --shadow-sm: 0 10px 30px rgba(40,28,0,.1);
  color-scheme: light;
}
html[data-theme="light"] .nav{ box-shadow: 0 10px 30px rgba(40,28,0,.08); }
html[data-theme="light"] .facts li,
html[data-theme="light"] .service,
html[data-theme="light"] .gear,
html[data-theme="light"] .step,
html[data-theme="light"] .price-card,
html[data-theme="light"] .faq details{ box-shadow: 0 6px 24px rgba(40,28,0,.05); }

/* Hochzeitsseite hell: Creme & Gold */
html[data-theme="light"] .theme-wedding{
  --bg: #FBF6EE;
  --bg-rgb: 251,246,238;
  --surface: #FFFFFF;
  --surface-2: #F3EBDD;
  --line: rgba(60,40,20,.12);
  --text: #2B2118;
  --muted: rgba(43,33,24,.7);
  --accent: #D9A55A;
  --accent-dark: #B88A45;
  --accent-ink: #94662A;
  --accent-hover: #E3B46F;
  --accent-rgb: 217,165,90;
  --glass: rgba(255,255,255,.85);
  --menu-bg: rgba(255,255,255,.97);
}
html[data-theme="light"] .theme-wedding::after{ filter: invert(1); opacity: .045; }
html[data-theme="light"] .wedding-cover__text{ text-shadow: none; }

/* ---------- Hell/Dunkel-Schalter ---------- */

.theme-toggle{
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.theme-toggle:hover{ color: var(--accent-ink); border-color: rgba(var(--accent-rgb),.5); }
.theme-toggle svg{ width: 18px; height: 18px; }
.theme-toggle .icon-moon{ display: none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display: none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display: block; }

/* ---------- Einmaliger Hinweis auf den Hell/Dunkel-Schalter ---------- */

.theme-hint{
  position: fixed;
  z-index: 120;
  max-width: min(260px, calc(calc(100vw / var(--zoom)) - 32px));
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--accent);
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s, transform .3s var(--ease);
  pointer-events: none;
}
.theme-hint.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.theme-hint::before{
  content: "";
  position: absolute;
  top: -6px;
  right: var(--arrow-right, 16px);
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}

.theme-toggle.is-pulsing{ animation: theme-pulse 1.4s var(--ease) 2; }
@keyframes theme-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.65); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}

/* ---------- Hell-Modus: dezentere Überblendungen ---------- */

/* Hochzeits-Titelbild: nur links hinter dem Text + weicher Übergang unten, Rest bleibt klar */
html[data-theme="light"] .wedding-cover::before{
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb),.3) 0%, rgba(var(--bg-rgb),0) 22%, rgba(var(--bg-rgb),0) 70%, var(--bg) 100%),
    linear-gradient(90deg, rgba(var(--bg-rgb),.82) 0%, rgba(var(--bg-rgb),.5) 32%, rgba(var(--bg-rgb),0) 58%);
}
@media (max-width: 640px){
  html[data-theme="light"] .wedding-cover::before{
    background: linear-gradient(180deg, rgba(var(--bg-rgb),.25) 0%, rgba(var(--bg-rgb),.1) 25%, rgba(var(--bg-rgb),.6) 55%, rgba(var(--bg-rgb),.88) 78%, var(--bg) 100%);
  }
}

/* ---------- Equipment-Seite ---------- */

.gear-more{ margin-top: clamp(20px, calc(3vw / var(--zoom)), 32px); }

.gear__badge{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0b0b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}

.gear-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ .gear-grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .gear-grid--3{ grid-template-columns: 1fr; } }

/* Hell-Modus: Geräte-Schein etwas breiter, damit er auf hellem Grund wirkt */
html[data-theme="light"] .gear__img img{ filter: drop-shadow(0 0 14px var(--gear-glow)); }
html[data-theme="light"] .gear:hover .gear__img img{ filter: drop-shadow(0 0 24px rgba(var(--accent-rgb),.75)); }

/* ---------- Galerie mit echten Bildern ---------- */

.gallery__item{
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  aspect-ratio: 1;
}
.gallery__item img{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  transition: transform .5s var(--ease);
}
.gallery__item:hover img{ transform: scale(1.04); }
.gallery__item:focus-visible{ outline-offset: 3px; }
.gallery > .gallery__item:first-child{ aspect-ratio: auto; }
.gallery__item--wide{ grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 640px){
  .gallery > .gallery__item:first-child{ aspect-ratio: 16 / 10; }
  .gallery__item--wide{ grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* Bild-Großansicht */
.lightbox--image img{
  width: 100%;
  max-height: calc(calc(100vh / var(--zoom)) - 120px);
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* =========================================================
   Hero mit Video-Hintergrund ("Mini-Showreel" aus Szenen)
   Bleibt in hell & dunkel gleich – Text liegt immer auf dem abgedunkelten Video.
   ========================================================= */

.hero-reel{
  --text: #FFFCEE;
  --muted: rgba(255,252,238,.78);
  --line: rgba(255,252,238,.16);
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(92vh / var(--zoom)), 900px);
  padding-block: clamp(96px, calc(14vh / var(--zoom)), 160px) clamp(40px, calc(7vh / var(--zoom)), 72px);
  color: var(--text);
  background: #0b0b0b;
  overflow: hidden;
  isolation: isolate;
}
.hero-reel__media{ position: absolute; inset: 0; z-index: -2; }
.hero-reel__media img,
.hero-reel__media video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-reel__media video{ opacity: 0; transition: opacity 1s ease; }
.hero-reel__media video.is-active{ opacity: 1; }
.hero-reel::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,.1) 30%, rgba(11,11,11,.35) 60%, rgba(11,11,11,.92) 100%),
    linear-gradient(90deg, rgba(11,11,11,.7) 0%, rgba(11,11,11,.15) 60%);
}

.hero-reel__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--muted);
}
.hero-reel__meta strong{ color: var(--text); font-weight: 600; }
.hero-reel__meta > span + span::before{
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 14px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--accent);
}
.hero-reel__title{
  max-width: 15ch;
  font-size: clamp(40px, calc(7vw / var(--zoom)), 92px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.hero-reel__title em{ font-style: normal; color: var(--accent); }
.hero-reel__text{
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(16px, calc(1.3vw / var(--zoom)), 19px);
  color: var(--muted);
}
.hero-reel__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-reel .btn--ghost{
  border-color: rgba(255,252,238,.4);
  color: #FFFCEE;
  background: rgba(11,11,11,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-reel .btn--ghost:hover{ border-color: var(--accent); color: var(--accent); }

.hero-reel__refs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: clamp(36px, calc(7vh / var(--zoom)), 64px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.hero-reel__refs b{ color: #FFFCEE; font-weight: 500; }
.hero-reel__refs a{ color: inherit; text-decoration: none; transition: color .18s; }
.hero-reel__refs a:hover{ color: var(--accent); }

/* Szenen-Anzeige (welcher Film läuft gerade) */
.hero-reel__scene{
  position: absolute;
  right: var(--gutter);
  bottom: clamp(40px, calc(7vh / var(--zoom)), 72px);
  display: flex;
  gap: 6px;
}
.hero-reel__scene i{
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,252,238,.3);
  transition: background .3s, width .3s;
}
.hero-reel__scene i.is-active{ width: 36px; background: var(--accent); }
@media (max-width: 720px){ .hero-reel__scene{ display: none; } }

/* ---------- Team-Hinweis (Hochzeiten) & Credits ---------- */

.team-note{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 860px;
  margin: clamp(24px, calc(4vw / var(--zoom)), 40px) auto 0;
  padding: clamp(20px, calc(3vw / var(--zoom)), 28px);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb),.35);
}
.team-note__icon{
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb),.15);
  color: var(--accent-ink);
}
.team-note__icon svg{ width: 24px; height: 24px; }
.team-note h3{ margin-bottom: 6px; font-size: 18px; font-weight: 600; }
.team-note p{ margin: 0; color: var(--muted); }
.team-note a,
.work-card__credit a,
.faq details p a{ color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.team-note a:hover,
.work-card__credit a:hover,
.faq details p a:hover{ text-decoration: underline; }
.work-card__credit{ margin: -6px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 520px){ .team-note{ flex-direction: column; } }
.price-card ul{ align-content: start; }
.team-note p strong{ color: var(--text); font-weight: 600; }

/* =========================================================
   Kontaktformular
   ========================================================= */

.contact-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, calc(5vw / var(--zoom)), 64px);
  align-items: start;
}
@media (max-width: 900px){ .contact-layout{ grid-template-columns: 1fr; } }

.contact-form,
.form-success{
  padding: clamp(22px, calc(3.5vw / var(--zoom)), 40px);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
}
.form-group{ display: grid; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.form-group label,
.form-group legend{ font-size: 15px; font-weight: 600; color: var(--text); padding: 0; margin-bottom: 2px; }
.form-group small{ font-weight: 400; color: var(--muted); }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;               /* verhindert Zoom auf iPhone */
  transition: border-color .18s, box-shadow .18s;
}
.contact-form textarea{ resize: vertical; min-height: 140px; line-height: 1.55; }
.contact-form ::placeholder{ color: var(--muted); opacity: .7; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2);
}
.contact-form .is-invalid{ border-color: #e5484d !important; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip input{ position: absolute; opacity: 0; pointer-events: none; }
.chip > span{
  display: inline-flex;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.chip:hover > span{ border-color: rgba(var(--accent-rgb),.5); }
.chip input:checked + span{ background: var(--accent); border-color: var(--accent); color: #0b0b0b; }
.chip input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }

.check{ display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.check input{ flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.check a{ color: var(--accent-ink); }

.form-error{ display: none; margin: 0; font-size: 13px; color: #e5484d; }
.form-error.is-visible{ display: block; }
.check + .form-error{ margin-top: 6px; }

.contact-form__submit{ margin-top: 24px; min-width: 220px; }
.contact-form__submit[disabled]{ opacity: .6; cursor: progress; transform: none; }
.form-status{ margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.form-status.is-error{ color: #e5484d; }

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-success{ text-align: center; padding-block: clamp(40px, calc(6vw / var(--zoom)), 72px); }
.form-success__icon{
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #0b0b0b;
  font-size: 30px; font-weight: 800;
}
.form-success h2{ font-size: clamp(22px, calc(3vw / var(--zoom)), 30px); margin-bottom: 8px; }
.form-success p{ color: var(--muted); }

.contact-aside h2{ font-size: 22px; margin-bottom: 16px; }
.contact-aside h3{ font-size: 17px; margin: 28px 0 12px; }
.contact-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-list li{ padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.contact-list__label{ display: block; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contact-list a{ color: var(--text); font-weight: 500; text-decoration: none; word-break: break-word; }
.contact-list a:hover{ color: var(--accent-ink); }
.contact-list .copy-btn{ margin-left: 6px; }
.mini-steps{ margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 8px; font-size: .95em; }
.mini-steps li::marker{ color: var(--accent-ink); font-weight: 700; }

/* =========================================================
   Schlanker Footer (alle Seiten) & Rechtstexte
   ========================================================= */

.site-footer{
  padding-block: clamp(36px, calc(5vw / var(--zoom)), 56px);
  border-top: 1px solid var(--line);
}
.site-footer__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.site-footer .brand{ font-size: 28px; }
.site-footer__links{ display: flex; flex-wrap: wrap; gap: 6px 26px; }
.site-footer__links a{
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s;
}
.site-footer__links a:hover{ color: var(--accent-ink); }
.site-footer__copy{ flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); opacity: .8; }
@media (max-width: 640px){
  .site-footer__inner{ flex-direction: column; align-items: flex-start; }
}

.legal-wrap{ max-width: 820px; }
.legal-card{
  margin-bottom: 16px;
  padding: clamp(20px, calc(3vw / var(--zoom)), 28px) clamp(20px, calc(3vw / var(--zoom)), 32px);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.legal-card h2{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}
.legal-card h2::before{ content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--accent); }
.legal-card p, .legal-card li{ color: var(--muted); line-height: 1.7; }
.legal-card p:last-child{ margin-bottom: 0; }
.legal-card ul{ margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.legal-card a{ color: var(--accent-ink); }

/* ---------- Hochzeit: Datums-Check im Titelbild ---------- */

.date-check{
  display: grid;
  gap: 10px;
  max-width: 520px;
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(var(--bg-rgb), .55);
  border: 1px solid rgba(var(--accent-rgb), .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.date-check label{ font-family: var(--font-display); font-size: 22px; font-style: italic; color: var(--accent-ink); }
.date-check__row{ display: flex; flex-wrap: wrap; gap: 10px; }
.date-check input{
  flex: 1 1 180px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  color-scheme: inherit;
}
.date-check input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2); }
.date-check + .wedding-cover__actions{ margin-top: 16px; }

.legal-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.legal-grid .legal-card{ margin-bottom: 16px; }
@media (max-width: 640px){ .legal-grid{ grid-template-columns: 1fr; gap: 0; } }
.legal-card strong{ color: var(--text); font-weight: 600; }
.legal-updated{ margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Instagram-Einbettung: lädt erst nach Klick (Datenschutz) */
.insta-embed{
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--frame);
  box-shadow: var(--shadow);
}
.insta-embed.is-loaded{ aspect-ratio: auto; background: #fff; }
.insta-embed iframe{ display: block; width: 100%; height: 720px; border: 0; }
.insta-embed__load{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border: 0;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb),.16), transparent 65%), var(--surface);
}
.insta-embed__load .play-icon{ position: static; transform: none; transition: background .18s var(--ease), transform .18s var(--ease); }
.insta-embed__load:hover .play-icon{ background: var(--accent); transform: scale(1.08); }
.insta-embed__load:hover .play-icon::after{ border-left-color: #0b0b0b; }
.insta-embed__title{ font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.insta-embed__note{ max-width: 28ch; font-size: 13px; color: var(--muted); }
.insta-embed__links{ margin: 14px 0 0; text-align: center; }

/* Lautstärke-Regler (Popup & Player) */
.volume{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
}
.lightbox__head .volume{ margin-left: auto; }
.player + .volume{ margin-top: 12px; }
.volume__btn{
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
.volume__btn:hover{ color: var(--accent-ink); }
.volume__btn svg{ width: 20px; height: 20px; }
.volume__off,
.volume.is-muted .volume__on{ display: none; }
.volume.is-muted .volume__off{ display: block; }
.volume__range{
  --fill: 100%;
  width: clamp(80px, calc(14vw / var(--zoom)), 140px);
  height: 4px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--accent) var(--fill), rgba(255,252,238,.22) var(--fill));
  cursor: pointer;
}
.volume__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 0;
}
.volume__range::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 0;
}
.volume__range:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
html[data-theme="light"] .player + .volume .volume__range{ background: linear-gradient(to right, var(--accent) var(--fill), rgba(0,0,0,.18) var(--fill)); }
.lightbox__head .lightbox__title{ flex: 1; min-width: 0; }
@media (max-width: 520px){
  .lightbox__head{ gap: 10px; }
  .lightbox__head .volume{ gap: 6px; padding: 4px 10px 4px 4px; }
  .lightbox__head .volume__range{ width: 64px; }
  .lightbox__title{ font-size: 15px; }
}

/* Schwebender Zurück-Button (unten links, Gegenstück zu .to-top) */
.back-float{
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--menu-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background .18s, color .18s;
}
.back-float.is-visible{ opacity: 1; visibility: visible; transform: none; }
.back-float:hover{ background: var(--accent); color: #0b0b0b; }

/* ---------- Große Bildschirme ----------
   Ab 1800 px Fensterbreite wächst die ganze Seite gleichmäßig mit, damit sie auf
   24"/27"-Monitoren so wirkt wie auf einem Laptop. Viewport-Einheiten (vh/vw)
   werden oben durch --zoom geteilt, damit sie weiter zur echten Fenstergröße passen. */
:root{ --zoom: 1; }
@media (min-width: 1800px){ :root{ --zoom: 1.15; } html{ zoom: 1.15; } }
@media (min-width: 2200px){ :root{ --zoom: 1.3; } html{ zoom: 1.3; } }
@media (min-width: 3000px){ :root{ --zoom: 1.6; } html{ zoom: 1.6; } }

/* Hinweis für Videos, die vorübergehend ohne Ton laufen (data-no-sound) */
.lightbox__note{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb),.14);
  color: var(--text);
  font-size: 14px;
}
.lightbox__note[hidden], .volume[hidden]{ display: none; }
.lightbox__note svg{ flex: none; width: 18px; height: 18px; color: var(--accent); }

/* Vorschau-Karte, die direkt zu Instagram verlinkt (für Beiträge, die sich nicht einbetten lassen) */
.insta-link{ display: block; text-decoration: none; }
.insta-link img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insta-link .insta-embed__load{ justify-content: flex-end; padding-bottom: 36px; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.35) 38%, transparent 60%); color: #FFFCEE; }
.insta-link .insta-embed__note{ color: rgba(255,252,238,.8); }
.insta-link:hover .play-icon{ background: var(--accent); transform: scale(1.08); }
.insta-link:hover .play-icon::after{ border-left-color: #0b0b0b; }
.insta-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }

/* Projektkarte ohne Standbild: Typo auf Verlauf (z. B. Kickforce) */
.media--typo{
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 78% 22%, rgba(var(--accent-rgb),.38), transparent 55%),
    radial-gradient(circle at 12% 90%, rgba(var(--accent-rgb),.16), transparent 50%),
    #121110;
  text-decoration: none;
}
.media__typo{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 7%;
  bottom: 10%;
  color: #FFFCEE;
  font-family: var(--font-display);
  font-size: clamp(30px, calc(4vw / var(--zoom)), 52px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.media__typo small{ margin-bottom: 8px; font-size: 13px; font-weight: 500; letter-spacing: .18em; color: rgba(255,252,238,.7); }
.media__typo b{ color: var(--accent); }
.media--typo:hover .play-icon{ background: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
.media--typo:hover .play-icon::after{ border-left-color: #0b0b0b; }