/* =========================================================
   Paul Frehse Weddings – Stylesheet
   Mobil zuerst · Breakpoints 640 / 960 / 1280
   ========================================================= */

/* ---------- Fonts (selbst gehostet, Hanselead-CI: Figtree + Instrument Serif Italic, SIL OFL) ---------- */
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-wght.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-ext-wght.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#F7F3EC;
  --linen:#EDE4D6;
  --sand:#CDBBA2;
  --olive:#8C7B68;
  --olive-deep:#6F604F;
  --ink:#1F1D1B;
  --error:#8E3B2B;
  --line:rgba(31,29,27,.14);
  --line-on-ink:rgba(247,243,236,.14);

  --serif:"Figtree","Helvetica Neue",Arial,sans-serif;
  --accent:"Instrument Serif",Georgia,serif;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif;

  --fs-h1:clamp(2.25rem, 1.083rem + 5.185vw, 5.75rem);
  --fs-h2:clamp(1.875rem, 1.25rem + 2.778vw, 3.75rem);
  --fs-h3:clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);
  --fs-lead:clamp(1.3125rem, 1.167rem + 0.648vw, 1.75rem);
  --fs-faq:clamp(1.25rem, 1.125rem + 0.556vw, 1.625rem);
  --fs-body:clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --fs-small:clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem);
  --fs-label:clamp(0.75rem, 0.729rem + 0.093vw, 0.8125rem);
  --fs-num:clamp(2.5rem, 2rem + 2.2vw, 4rem);

  --gutter:clamp(1.25rem, 0.167rem + 4.815vw, 4.5rem);
  --gap:clamp(0.75rem, 0.333rem + 1.852vw, 2rem);
  --section:clamp(6rem, 4.333rem + 7.407vw, 11rem);
  --head-gap:clamp(2.5rem, 1.75rem + 3.33vw, 4.5rem);
  --max:90rem;
  --max-wide:105rem;
  --measure:38rem;

  --ease-film:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-xs:160ms; --dur-s:240ms; --dur-m:400ms; --dur-l:900ms; --dur-xl:1200ms;

  --header-h:84px;
  --z-fab:40; --z-header:50;
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--paper);
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  letter-spacing:.005em;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.menu-open{ overflow:hidden; }
img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:400; }
ul,ol{ margin:0; padding:0; }
ul[role="list"],ol[role="list"]{ list-style:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
.nowrap{ white-space:nowrap; }
::selection{ background:var(--sand); color:var(--ink); }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.bg-ink :focus-visible,
.hero :focus-visible,
.inquiry__bg ~ * .glass--media:focus-visible,
.film-dialog :focus-visible,
.lightbox :focus-visible{ outline-color:var(--paper); }
.hero :focus-visible{ box-shadow:0 0 0 5px rgba(31,29,27,.45); }
.site-header[data-tone="media"] :focus-visible{ outline-color:var(--paper); box-shadow:0 0 0 5px rgba(31,29,27,.45); }
.site-header.is-menu-open :focus-visible{ outline-color:var(--ink); box-shadow:none; }

picture{ display:contents; }
.no-js .js-only{ display:none !important; }
/* main.js setzt .js-ready, sobald es läuft. Fehlt es (404/Fehler), bleiben JS-Bedienelemente unsichtbar. */
.js:not(.js-ready) .js-only{ visibility:hidden; }

section[id], [id="inhalt"]{ scroll-margin-top:var(--header-h); }
.legal [id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

.skip{
  position:fixed; left:16px; top:12px; z-index:100;
  padding:12px 18px; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transform:translateY(-160%); transition:transform var(--dur-s) var(--ease-standard);
}
.skip:focus{ transform:none; outline-color:var(--paper); }

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

.section{ padding-block:var(--section); position:relative; }
.section--follow{ padding-top:0; }

.bg-paper{ background:var(--paper); }
.bg-linen{ background:var(--linen); }
.bg-ink{ background:var(--ink); color:var(--paper); }

/* ---------- Typografie ---------- */
.label{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:500;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--olive-deep);
}
.bg-ink .label{ color:var(--sand); }

.h2{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:var(--fs-h2);
  line-height:1.08;
  letter-spacing:.04em;
  text-transform:uppercase;
  max-width:14em;
  text-wrap:balance;
  hyphens:manual;
}
.h2 em,
.footer__title em,
.claim em,
.hero__title em{
  font-style:italic;
}
.h2 em{
  text-transform:none;
  letter-spacing:0;
  font-size:1.1em;
  line-height:0;
}
.h3{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:var(--fs-h3);
  line-height:1.2;
}
.lead{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:var(--fs-lead);
  line-height:1.38;
  max-width:32ch;
  text-wrap:pretty;
}
.small{ font-size:var(--fs-small); line-height:1.55; letter-spacing:.01em; }

.section-head{ margin-bottom:var(--head-gap); }
.section-head .label{ margin-bottom:16px; }
.section-head--split{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 48px; }

.link{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
  transition:text-decoration-color var(--dur-s) var(--ease-standard);
}
.link:hover{ text-decoration-color:var(--olive-deep); }
.bg-ink .link:hover{ text-decoration-color:var(--sand); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px;
  border:0; border-radius:999px;
  font-family:var(--sans); font-size:.8125rem; font-weight:500; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--dur-s) var(--ease-standard), color var(--dur-s) var(--ease-standard), transform var(--dur-xs) var(--ease-standard);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--ink); color:var(--paper); padding:0 30px; }
.btn--primary:hover{ background:var(--olive-deep); }
.btn--on-ink{ background:var(--paper); color:var(--ink); }
.btn--on-ink:hover{ background:var(--sand); }
.icon-play{ flex:none; }

.link-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  font-size:var(--fs-body); color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
}
.link-btn:hover{ text-decoration-color:var(--olive-deep); }
.link-btn--small{ font-size:var(--fs-small); }

.icon-btn{
  display:inline-grid; place-items:center;
  width:44px; height:44px; padding:0; flex:none;
  border-radius:50%; border:0; cursor:pointer;
  transition:background-color var(--dur-s) var(--ease-standard);
}
.icon-btn .i-play{ display:none; }
.icon-btn[data-paused="true"] .i-pause{ display:none; }
.icon-btn[data-paused="true"] .i-play{ display:block; }
.icon-btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--olive); }
.icon-btn--ghost:hover{ background:rgba(31,29,27,.06); }

/* ---------- Liquid Glass ---------- */
/* Blur-Werte bewusst als Literal je Variante: Safari 18 ignoriert backdrop-filter mit var() (WebKit-Bug 297620). */
.glass{
  position:relative; isolation:isolate;
  -webkit-backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass--media{
  --tint:.40;
  -webkit-backdrop-filter:blur(16px) saturate(170%);
          backdrop-filter:blur(16px) saturate(170%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    rgba(31,29,27,var(--tint));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 10px 30px -12px rgba(20,18,16,.45);
  color:#fff;
}
.glass--media:hover{ --tint:.52; }
.glass--paper{
  -webkit-backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 60%),
    rgba(247,243,236,.72);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 0 0 1px rgba(31,29,27,.06),
    inset 0 1px 0 rgba(255,255,255,.90),
    0 12px 32px -14px rgba(31,29,27,.22);
  color:var(--ink);
}
.glass--paper.glass--cta{
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(16px) saturate(180%) brightness(1.06);
  background-color:rgba(247,243,236,.92);
  transition:background-color var(--dur-s) var(--ease-standard), transform var(--dur-xs) var(--ease-standard);
}
.glass--paper.glass--cta:hover{ background-color:rgba(247,243,236,.98); }
.hero .glass--cta{
  box-shadow:
    0 0 0 1px rgba(31,29,27,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -10px 18px -10px rgba(255,255,255,.35),
    0 14px 34px -14px rgba(20,18,16,.55);
}

@media (max-width:639px){
  .glass--media{ -webkit-backdrop-filter:blur(12px) saturate(170%); backdrop-filter:blur(12px) saturate(170%); }
  .glass--paper{ -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.06); backdrop-filter:blur(16px) saturate(180%) brightness(1.06); }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass--media{ background:rgba(31,29,27,.62); }
  .glass--paper, .glass--paper.glass--cta{ background:rgba(247,243,236,.96); }
}
@media (prefers-reduced-transparency: reduce){
  .glass{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .glass--media{ background:rgba(31,29,27,.78); }
  .glass--paper, .glass--paper.glass--cta{ background:var(--paper); }
}
@media (prefers-contrast: more){
  .glass::before{ display:none; }
  .glass--paper{ background:var(--paper); border-color:var(--ink); }
}

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px var(--gutter) 0;
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }

.brand{
  position:relative; display:block; text-decoration:none;
  min-height:44px; min-width:44px;
}
.brand__wordmark{
  display:block; width:156px; height:auto; margin-top:6px;
  transition:opacity 300ms var(--ease-standard), visibility 0s;
}
.coin{
  position:absolute; left:0; top:0;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-m) var(--ease-inout), visibility 0s linear var(--dur-m);
}
.coin img{ width:24px; height:auto; transform:translateX(1px); }

.site-header[data-tone="paper"] .brand__wordmark{ opacity:0; visibility:hidden; transition:opacity 300ms var(--ease-standard), visibility 0s linear 300ms; }
.site-header[data-tone="paper"] .coin,
.site-header.is-scrolled .coin{ opacity:1; visibility:visible; transition:opacity var(--dur-m) var(--ease-inout), visibility 0s; }
.site-header.is-scrolled .brand__wordmark{ opacity:0; visibility:hidden; transition:opacity 300ms var(--ease-standard), visibility 0s linear 300ms; }
/* Münze über dem Video: dunkles Glas mit weißem Monogramm, passend zur Pill */
.site-header[data-tone="media"] .coin{
  background-color:rgba(31,29,27,.5); background-image:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px -12px rgba(20,18,16,.45);
}
.site-header[data-tone="media"] .coin img{ filter:brightness(0) invert(1); }
/* Über dem dunklen Film wird Glass-Paper sonst grau: Deckung .9 */
.site-header[data-tone="paper"] .coin{ background-color:rgba(247,243,236,.9); }
.no-js .site-header{ position:absolute; }
.no-js .nav__cta{ display:inline-flex; }

.nav{
  -webkit-backdrop-filter:blur(16px) saturate(170%);
          backdrop-filter:blur(16px) saturate(170%);
  display:flex; align-items:center; gap:4px;
  height:52px; padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background-image:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  background-color:rgba(31,29,27,.50);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px -12px rgba(20,18,16,.45);
  transition:background-color var(--dur-m) var(--ease-inout), color var(--dur-m) var(--ease-inout), border-color var(--dur-m) var(--ease-inout), box-shadow var(--dur-m) var(--ease-inout);
}
.site-header[data-tone="paper"] .nav{
  -webkit-backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
  background-image:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 60%);
  background-color:rgba(247,243,236,.9);
  border-color:rgba(255,255,255,.55);
  color:var(--ink);
  box-shadow:0 0 0 1px rgba(31,29,27,.06), inset 0 1px 0 rgba(255,255,255,.9), 0 12px 32px -14px rgba(31,29,27,.22);
}
.nav__links{ display:none; list-style:none; }
.nav__links a{
  position:relative; display:flex; align-items:center; height:44px; padding:0 14px;
  font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:calc(14px + .14em); bottom:11px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 300ms var(--ease-standard);
}
.nav__links a:hover::after,
.nav__links a[aria-current="location"]::after{ transform:scaleX(1); }

.nav__cta{
  display:none; align-items:center; height:42px; padding:0 20px;
  border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(247,243,236,.92); color:var(--ink);
  transition:background-color var(--dur-m) var(--ease-inout), color var(--dur-m) var(--ease-inout);
}
.nav__cta:hover{ background:#fff; }
.site-header[data-tone="media"] .nav__cta{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.site-header[data-tone="media"] .nav__cta:hover{ background:rgba(255,255,255,.12); }
.site-header[data-tone="paper"] .nav__cta{ background:var(--ink); color:var(--paper); }
.site-header[data-tone="paper"] .nav__cta:hover{ background:var(--olive-deep); }

.nav__toggle{
  position:relative; width:44px; height:42px; padding:0; border:0; border-radius:999px;
  background:transparent; color:inherit; cursor:pointer;
}
.nav__toggle-line{
  position:absolute; left:13px; right:13px; height:1px; background:currentColor;
  transition:transform 250ms var(--ease-inout), top 250ms var(--ease-inout);
}
.nav__toggle-line:nth-child(1){ top:17px; }
.nav__toggle-line:nth-child(2){ top:24px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2){ top:21px; transform:rotate(-45deg); }

/* Mobiles Menü */
.menu{
  position:fixed; inset:0; z-index:-1;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:calc(var(--header-h) + 40px) var(--gutter) max(32px, env(safe-area-inset-bottom));
  background:rgba(247,243,236,.97);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
          backdrop-filter:blur(24px) saturate(140%);
  color:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-m) var(--ease-inout), visibility 0s linear var(--dur-m);
  overflow-y:auto;
}
.menu.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-m) var(--ease-inout), visibility 0s; }
.menu__links{ list-style:none; display:grid; gap:4px; }
.menu__links a{
  display:block; padding:6px 0;
  font-family:var(--serif); font-size:clamp(2rem, 1.5rem + 2.5vw, 2.75rem); line-height:1.15;
  text-decoration:none;
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-m) var(--ease-film), transform var(--dur-m) var(--ease-film);
}
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu.is-open .menu__links li:nth-child(2) a{ transition-delay:60ms; }
.menu.is-open .menu__links li:nth-child(3) a{ transition-delay:120ms; }
.menu.is-open .menu__links li:nth-child(4) a{ transition-delay:180ms; }
.menu.is-open .menu__links li:nth-child(5) a{ transition-delay:240ms; }
.menu__cta{ margin-top:40px; align-self:flex-start; }
.menu__contact{ margin-top:auto; padding-top:40px; display:flex; flex-wrap:wrap; gap:4px 24px; color:var(--olive-deep); }
.menu__contact a{ display:inline-flex; align-items:center; min-height:44px; }
.site-header.is-menu-open .nav{
  background-color:transparent; background-image:none; border-color:transparent; box-shadow:none; color:var(--ink);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.site-header.is-menu-open .nav::before{ display:none; }
.site-header.is-menu-open .brand__wordmark{ opacity:0; visibility:hidden; }
.site-header.is-menu-open .coin{ opacity:1; visibility:visible; }

@media (min-width:640px){
  .brand__wordmark{ width:176px; }
  .nav{ padding:4px 4px 4px 4px; }
  .nav__cta{ display:inline-flex; }
}
@media (min-width:960px){
  .brand__wordmark{ width:200px; }
  .nav{ padding:4px 4px 4px 12px; }
  .nav__links{ display:flex; }
  .nav__toggle{ display:none; }
  .menu{ display:none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
  background:#2b2723;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__poster img,
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
}
.hero__video{ opacity:0; transition:opacity 800ms var(--ease-standard); }
.hero__video.is-playing{ opacity:1; }
/* Lokaler Scrim: oben ein schmales Plateau für die Nav, unten links nur hinter dem Textblock.
   Gesichter und die rechte Bildhälfte bleiben hell. Werte gemessen, siehe Bericht. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(20,18,16,.40) 0, rgba(20,18,16,.32) 96px, rgba(20,18,16,0) 200px),
    linear-gradient(to top, rgba(20,18,16,.80) 0%, rgba(20,18,16,.66) 30%, rgba(20,18,16,.34) 52%, rgba(20,18,16,0) 70%);
}
@media (orientation: landscape), (min-width:960px){
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(20,18,16,.40) 0, rgba(20,18,16,.32) 96px, rgba(20,18,16,0) 200px),
      radial-gradient(62% 74% at 20% 74%, rgba(20,18,16,.76) 0%, rgba(20,18,16,.68) 46%, rgba(20,18,16,.36) 74%, rgba(20,18,16,0) 100%),
      linear-gradient(to top, rgba(20,18,16,.32) 0, rgba(20,18,16,0) 26%);
  }
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' 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");
}
.hero__veil{ position:absolute; inset:0; background:var(--ink); opacity:0; pointer-events:none; }

.hero__layer{ position:relative; }
.hero__content{
  position:relative;
  padding-top:calc(var(--header-h) + 48px);
  padding-bottom:calc(clamp(2.5rem, 8vh, 6rem) + 56px);
}
.hero__title{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:var(--fs-h1);
  line-height:1.04;
  letter-spacing:-.015em;
  max-width:11.5em;
  text-shadow:0 2px 28px rgba(20,18,16,.4);
}
.hero__eyebrow{
  display:block; width:max-content; margin-bottom:20px; margin-left:-12px; padding:5px 12px;
  border-radius:999px;
  background:rgba(20,18,16,.36);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--sans); font-size:var(--fs-label); font-weight:500; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; text-shadow:none;
}
.line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.line > span{ display:block; }
.hero__sub{
  margin-top:24px; max-width:34em; text-wrap:balance;
  font-size:var(--fs-body); line-height:1.55;
  text-shadow:0 1px 12px rgba(20,18,16,.35);
}
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 12px; margin-top:32px; }
.hero__micro{ margin-top:16px; font-size:.875rem; line-height:1.5; letter-spacing:.01em; text-shadow:0 1px 10px rgba(20,18,16,.45); }

.hero__aside{
  position:absolute; right:var(--gutter); bottom:clamp(1.25rem, 4vh, 2.5rem);
  display:flex; align-items:center; gap:14px;
}
.hero__caption{
  padding:5px 12px; border-radius:999px;
  background:rgba(20,18,16,.36);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
}

.hide-sm{ display:inline; }
@media (max-width:639px){
  .hero__content{ padding-bottom:clamp(1.5rem, 5vh, 2.5rem); padding-top:calc(var(--header-h) + 24px); }
  .hero__eyebrow{ margin-bottom:14px; }
  .hero__sub{ margin-top:16px; }
  .hero__actions{ margin-top:24px; }
  .hero__micro{ margin-top:10px; }
  .hero__caption{ display:none; }
  .hero__aside{ bottom:calc(clamp(1.5rem, 5vh, 2.5rem) + 2.1rem); }
  .hide-sm{ display:none; }
  .hero__actions .glass--cta{ width:100%; }
  .hero__secondary{
    height:44px; padding:0; background:none !important; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px;
    letter-spacing:.12em;
  }
  .hero__secondary::before{ display:none; }
  .hero__micro{ max-width:24em; }
}
@media (min-width:1100px){
  .hero__content{ padding-bottom:clamp(2.5rem, 8vh, 6rem); }
  .hero__aside{ bottom:clamp(2.5rem, 8vh, 6rem); }
}
/* Kurze Hochformat-Screens (Smartphone mit Browserleiste): kräftigerer Scrim, etwas kleinere H1 */
@media (orientation: portrait) and (max-height:700px){
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(20,18,16,.46) 0, rgba(20,18,16,.36) 96px, rgba(20,18,16,0) 200px),
      linear-gradient(to top, rgba(20,18,16,.82) 0%, rgba(20,18,16,.70) 38%, rgba(20,18,16,.52) 64%, rgba(20,18,16,.24) 80%, rgba(20,18,16,0) 92%);
  }
  .hero__eyebrow{ background:rgba(20,18,16,.5); }
  .hero__title{ font-size:clamp(2rem, 1.2rem + 3.6vw, 2.5rem); }
}
@media (max-width:359px){ .hero__micro{ padding-right:56px; } }
/* Beim ersten Scrollen blendet der Hero-Inhalt aus, damit kein Text durch Logo und Nav läuft */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero__layer{ animation:hero-out linear both; animation-timeline:scroll(root); animation-range:0 55vh; }
    @keyframes hero-out{ to{ opacity:0; transform:translateY(-6vh); } }
  }
}

/* Hero-Einblendung: nur Zeilen, Eyebrow, Buttons und Aside animieren. Unterzeile, Mikrocopy
   und Header sind sofort sichtbar (LCP). Ein CSS-Failsafe blendet alles nach 2,5 s ein,
   auch wenn main.js fehlt oder abbricht. */
@media (prefers-reduced-motion: no-preference){
  .js .hero__veil{ opacity:.6; transition:opacity var(--dur-xl) var(--ease-standard); }
  .js .hero .line > span{ transform:translateY(110%); transition:transform var(--dur-l) var(--ease-film); }
  .js .hero__eyebrow,
  .js .hero__actions,
  .js .hero__aside{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-l) var(--ease-film), transform var(--dur-l) var(--ease-film); }

  .is-loaded .hero__veil{ opacity:0; }
  .is-loaded .hero .line > span{ transform:none; }
  .is-loaded .hero .line:nth-of-type(1) > span{ transition-delay:200ms; }
  .is-loaded .hero .line:nth-of-type(2) > span{ transition-delay:290ms; }
  .is-loaded .hero__eyebrow{ opacity:1; transform:none; transition-delay:100ms; }
  .is-loaded .hero__actions{ opacity:1; transform:none; transition-delay:450ms; }
  .is-loaded .hero__aside{ opacity:1; transform:none; transition-delay:650ms; }

  .js:not(.is-loaded) .hero__veil{ animation:failsafe-veil 0s 2.5s forwards; }
  .js:not(.is-loaded) :is(.hero .line > span, .hero__eyebrow, .hero__actions, .hero__aside){ animation:failsafe 0s 2.5s forwards; }
}
@keyframes failsafe{ to{ opacity:1; transform:none; } }
@keyframes failsafe-veil{ to{ opacity:0; } }
@keyframes failsafe-clip{ to{ clip-path:none; } }

/* =========================================================
   Intro
   ========================================================= */
.intro{ padding-bottom:calc(var(--section) * .55); }
.intro__grid{ display:grid; gap:32px; }
.claim{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(2rem, 1.15rem + 3.6vw, 4.5rem);
  line-height:1.1;
  letter-spacing:-.01em;
  max-width:13em;
  text-wrap:balance;
}
.intro__text{ max-width:28em; font-size:var(--fs-body); }
@media (min-width:960px){
  .intro__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); }
  .claim{ grid-column:1 / 10; }
  .intro__text{ grid-column:8 / 13; margin-top:8px; }
}

/* =========================================================
   Marquee
   ========================================================= */
.marquee-section{
  --m-gap:clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --h:clamp(12.5rem, 9.583rem + 12.963vw, 21.25rem);
  padding-bottom:calc(var(--section) * .6);
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.marquee + .marquee{ margin-top:var(--m-gap); }
.marquee__track{
  display:flex; width:max-content;
  animation:marquee var(--dur, 90s) linear infinite;
}
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee__group{ display:flex; flex:none; list-style:none; }
.marquee__group > li{ flex:none; margin-right:var(--m-gap); }
.marquee img{ height:var(--h); width:auto; max-width:none; object-fit:cover; background:var(--linen); }
.marquee--rev img{ height:calc(var(--h) * .72); }
.marquee--rev li:nth-child(3n+2) img{ aspect-ratio:4 / 5; width:auto; object-fit:cover; object-position:50% 35%; }
.marquee-section.is-paused .marquee__track,
.marquee-section.is-offscreen .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }

.marquee--rev{ display:none; }
@media (min-width:960px){
  .marquee--rev{ display:block; }
}
.marquee__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:24px;
}

/* Ohne Bewegung (Reduced Motion) oder ohne JS (kein Pause-Button, WCAG 2.2.2): statisch, wischbar */
@media (prefers-reduced-motion: reduce){
  .marquee{
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none;
    padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
  }
  .marquee__track{ animation:none; }
  .marquee__group[aria-hidden="true"]{ display:none; }
  .marquee__group > li{ scroll-snap-align:start; }
  .marquee-section [data-marquee-toggle]{ display:none; }
}
.no-js .marquee{
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:none; mask-image:none;
  padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
}
.no-js .marquee__track{ animation:none; }
.no-js .marquee__group[aria-hidden="true"]{ display:none; }
.no-js .marquee__group > li{ scroll-snap-align:start; }
.js:not(.js-ready) .marquee__track{ animation-play-state:paused; }

/* =========================================================
   Leistungen
   ========================================================= */
.offers-section{ padding-bottom:calc(var(--section) * .7); }
.offers-scroller{
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.offers-scroller::-webkit-scrollbar{ display:none; }
.offers{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:16px; list-style:none;
}
.offer{ scroll-snap-align:start; }
.offer__img{ aspect-ratio:4 / 5; overflow:hidden; background:var(--sand); }
.offer__img img{ width:100%; height:100%; object-fit:cover; }
.offer .h3{ margin-top:20px; }
.plus{ font-family:var(--sans); font-weight:400; font-size:.8em; vertical-align:.06em; }
.offer__meta .plus{ font-size:1em; vertical-align:0; }
.offer__text{ margin-top:10px; max-width:24em; }
.offer__meta{
  margin-top:14px;
  font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-deep);
}
.offers__note{ margin-top:48px; color:var(--olive-deep); }

@media (min-width:640px){
  .offers-scroller{ margin-inline:0; padding-inline:0; overflow:visible; }
  .offers{ grid-auto-flow:row; grid-template-columns:repeat(2, 1fr); gap:56px var(--gap); }
  .offer:nth-child(even){ margin-top:clamp(2rem, 6vw, 5rem); }
}
@media (min-width:1280px){
  .offers{ grid-template-columns:repeat(4, 1fr); }
  .offer:nth-child(even){ margin-top:clamp(3rem, 6vw, 6rem); }
}

/* USP */
.usp{ padding-bottom:var(--section); }
.usp__grid{ display:grid; gap:28px; padding-top:calc(var(--section) * .3); border-top:1px solid var(--line); }
.h2--xl{ font-size:clamp(2.5rem, 1.4rem + 4.8vw, 6.25rem); line-height:1.02; }
@media (min-width:960px){
  .usp__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); align-items:end; }
  .usp .h2{ grid-column:1 / 8; }
  .usp__text{ grid-column:8 / 13; padding-bottom:.6em; }
}

/* =========================================================
   Film (Kinosaal)
   ========================================================= */
.film__head{ margin-bottom:var(--head-gap); }
.film__head .label{ margin-bottom:16px; }
.film__lead{ margin-top:24px; max-width:30em; color:var(--paper); }
.film__frame{ position:relative; }
.film__screen{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#0f0e0d; }
.film__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.no-js .film__video, .no-js .film__open{ display:none; }
.no-js .film__screen{ background:#0f0e0d url("../video/film-poster.jpg") 50% 45% / cover no-repeat; }
.film__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,18,16,.62) 0%, rgba(20,18,16,.3) 32%, rgba(20,18,16,0) 55%);
}
.film__controls{
  position:absolute; left:clamp(12px, 2.5vw, 40px); right:clamp(12px, 2.5vw, 40px); bottom:clamp(12px, 2.5vw, 40px);
  display:flex; align-items:center; gap:16px;
}
.film__open{ -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); }
.film__hint{ font-size:var(--fs-small); color:#fff; }
.film__pause{ margin-left:auto; }
.film__foot{ margin-top:40px; }
@media (max-width:639px){
  .film__controls{ gap:8px; }
  .film__open{ height:48px; padding:0 18px; letter-spacing:.08em; }
  .film .container-wide{ width:100%; }
  .film__screen{ aspect-ratio:4 / 3; }
}
@media (min-width:640px){
  .film__screen{ aspect-ratio:2.39 / 1; }
}

/* Dialoge */
dialog{ padding:0; border:0; }
html:has(dialog[open]){ overflow:hidden; }
.film-dialog,
.lightbox{
  width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:none; margin:0;
  background:rgba(20,18,16,.96); color:var(--paper);
}
.film-dialog::backdrop,
.lightbox::backdrop{ background:rgba(20,18,16,.7); }
.film-dialog[open],
.lightbox[open]{ display:grid; place-items:center; }
.film-dialog__inner{ position:relative; width:min(100% - 2*var(--gutter), 1280px); }
.film-dialog__video{ width:100%; aspect-ratio:16 / 9; background:#000; }
.film-dialog__close,
.lightbox__close{
  position:fixed; top:16px; right:16px; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(247,243,236,.3); background:rgba(31,29,27,.6); cursor:pointer;
}
.film-dialog__close span,
.lightbox__close span{ position:absolute; left:14px; right:14px; top:23px; height:1px; background:var(--paper); }
.film-dialog__close span:first-child,
.lightbox__close span:first-child{ transform:rotate(45deg); }
.film-dialog__close span:last-child,
.lightbox__close span:last-child{ transform:rotate(-45deg); }

.lightbox__figure{ margin:0; display:grid; place-items:center; grid-template:minmax(0,1fr) / minmax(0,1fr); width:100%; height:100%; min-width:0; min-height:0; padding:72px 64px; }
.lightbox__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lightbox__count{ position:fixed; left:20px; top:28px; font-size:var(--fs-label); letter-spacing:.18em; color:var(--sand); font-variant-numeric:tabular-nums; }
.lightbox__btn{ color:var(--paper); }
.lightbox__prev,
.lightbox__next{
  position:fixed; top:50%; translate:0 -50%;
  width:48px; height:48px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(247,243,236,.3); background:rgba(31,29,27,.6); cursor:pointer;
}
.lightbox__prev{ left:12px; }
.lightbox__next{ right:12px; }
@media (max-width:639px){
  .lightbox__figure{ padding:72px 0; }
  .lightbox__prev, .lightbox__next{ top:auto; bottom:20px; translate:none; }
  .lightbox__prev{ left:calc(50% - 60px); }
  .lightbox__next{ right:calc(50% - 60px); }
}

/* =========================================================
   Galerie (grau → Farbe)
   ========================================================= */
.gallery__hint{ color:var(--olive-deep); display:none; }
@media (hover:hover) and (pointer:fine){
  .gallery__hint{ display:block; }
}
.gallery__foot{ display:flex; justify-content:flex-end; margin-top:clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.gallery{ display:grid; grid-template-columns:1fr; row-gap:40px; }
.g-item{ margin:0; min-width:0; }
.g-frame{ display:block; overflow:hidden; background:var(--linen); cursor:zoom-in; }
.g-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.96);
  transform:scale(1);
  transition:filter var(--dur-xl) var(--ease-standard), transform 1400ms var(--ease-film);
}
@media (hover:hover) and (pointer:fine){
  .g-frame:hover img,
  .g-frame:focus-visible img{
    filter:grayscale(0) contrast(1) brightness(1);
    transform:scale(1.03);
    transition-duration:900ms, 1400ms;
  }
}
.g-item.is-developed .g-frame img{ filter:grayscale(0) contrast(1) brightness(1); }

.g-item--cinema .g-frame{ aspect-ratio:16 / 10; }
.g-item--cinema img{ object-position:50% 38%; }

.caption{
  margin-top:12px;
  font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--olive-deep);
}

/* Mobil: eine Spalte mit wechselnden Breiten */
@media (max-width:639px){
  .gallery .g-2, .gallery .g-6{ width:80%; justify-self:end; }
  .gallery .g-4, .gallery .g-7{ width:86%; justify-self:start; }
}
/* Tablet: zwei Spalten mit Versatz, Kino-Bild über volle Breite */
@media (min-width:640px) and (max-width:959px){
  .gallery{ grid-template-columns:repeat(2, 1fr); column-gap:var(--gap); row-gap:56px; align-items:start; }
  .g-2, .g-4, .g-7{ margin-top:6rem; }
  .g-item--cinema, .g-8{ grid-column:1 / -1; }
}
/* Desktop: asymmetrisches 12er-Raster */
@media (min-width:960px){
  .gallery{
    grid-template-columns:repeat(12, 1fr);
    column-gap:var(--gap);
    row-gap:clamp(2.5rem, 1rem + 4vw, 5rem);
    align-items:start;
  }
  .g-1{ grid-column:1 / 8; }
  .g-2{ grid-column:9 / 13; margin-top:clamp(3rem, 6vw, 6rem); }
  .g-3{ grid-column:2 / 6; }
  .g-4{ grid-column:7 / 13; margin-top:clamp(3rem, 7vw, 7rem); }
  .g-5{ grid-column:1 / 13; }
  .g-item--cinema .g-frame{ aspect-ratio:2.39 / 1; }
  .g-6{ grid-column:1 / 8; }
  .g-7{ grid-column:9 / 13; margin-top:clamp(3rem, 6vw, 6rem); }
  .g-8{ grid-column:3 / 11; }
}

/* =========================================================
   Über Paul
   ========================================================= */
/* Gleicher Grund hintereinander (Galerie → Über → Ablauf): Abstand nicht verdoppeln, Haarlinie als Trenner */
.gallery-section, .about{ padding-bottom:calc(var(--section) * .6); }
.section--joined{ padding-top:0; }
.section--joined > .container:first-child{ padding-top:calc(var(--section) * .6); border-top:1px solid var(--line); }
.about__grid{ display:grid; gap:40px; }
@media (max-width:959px){ .about__text{ order:-1; } }
.about__media{ margin:0; }
.about__frame{ overflow:hidden; background:var(--sand); }
.about__frame img{ width:100%; height:auto; }
.about__text .label{ margin-bottom:16px; }
.about__body{ margin-top:28px; max-width:var(--measure); text-wrap:pretty; }
.signature{ display:flex; align-items:center; gap:14px; margin-top:32px; color:var(--olive); }
.signature__mark{ width:43px; height:40px; }
.signature__name{ font-family:var(--serif); font-style:italic; font-size:1.75rem; line-height:1; color:var(--ink); }
@media (min-width:960px){
  .about__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); align-items:center; }
  .about__media{ grid-column:1 / 8; }
  .about__text{ grid-column:9 / 13; }
}

/* =========================================================
   Ablauf
   ========================================================= */
.steps{ display:grid; gap:0; list-style:none; counter-reset:none; }
.step{
  display:grid; grid-template-columns:4.25rem 1fr; column-gap:16px;
  padding:28px 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__num{
  grid-row:1 / span 2;
  font-family:var(--serif); font-size:var(--fs-num); line-height:1;
  font-variant-numeric:lining-nums; color:var(--olive);
}
.step .h3{ align-self:end; }
.step p{ margin-top:8px; max-width:24em; }
.steps__band{ margin-top:clamp(3.5rem, 2rem + 5vw, 6rem); }
.band{ overflow:hidden; aspect-ratio:16 / 10; background:var(--linen); }
.band img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
@media (min-width:640px){ .band{ aspect-ratio:2.39 / 1; } }
.steps__cta{ margin-top:clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width:960px){
  .steps{ grid-template-columns:repeat(5, 1fr); column-gap:var(--gap); }
  .step{ display:block; padding:28px 0 0; }
  .step:last-child{ border-bottom:0; }
  .step__num{ display:block; margin-bottom:28px; }
  .step p{ margin-top:12px; }
}

/* =========================================================
   Stimmen (vorbereitet, aktuell hidden)
   ========================================================= */
.voices__list{ display:grid; gap:48px; margin-top:var(--head-gap); }
.voice{ margin:0; }
.voice blockquote{ margin:0; font-family:var(--serif); font-size:var(--fs-lead); line-height:1.38; }
.voice figcaption{ margin-top:16px; font-size:var(--fs-small); color:var(--olive-deep); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:var(--head-gap); }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:72px; padding:16px 0;
  cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__q{ font-family:var(--serif); font-optical-sizing:auto; font-size:var(--fs-faq); line-height:1.3; }
.faq__icon{ position:relative; flex:none; width:18px; height:18px; transition:transform 300ms var(--ease-inout); }
.faq__icon::before,
.faq__icon::after{ content:""; position:absolute; background:var(--ink); transition:background-color var(--dur-s) var(--ease-standard); }
.faq__icon::before{ left:0; right:0; top:50%; height:1px; }
.faq__icon::after{ top:0; bottom:0; left:50%; width:1px; }
.faq__item summary:hover .faq__icon::before,
.faq__item summary:hover .faq__icon::after{ background:var(--olive-deep); }
.faq__item[open] .faq__icon{ transform:rotate(45deg); }
.faq__a{ padding-bottom:32px; max-width:var(--measure); }
.faq__a p{ text-wrap:pretty; }

@supports (interpolate-size: allow-keywords){
  .faq{ interpolate-size:allow-keywords; }
  .faq__item::details-content{
    block-size:0; overflow:clip;
    transition:block-size var(--dur-m) var(--ease-inout), content-visibility var(--dur-m) allow-discrete;
  }
  .faq__item[open]::details-content{ block-size:auto; }
}
@media (min-width:960px){
  .faq{ grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); align-items:start; }
  .faq__head{ grid-column:1 / 5; position:sticky; top:120px; }
  .faq__list{ grid-column:6 / 13; }
}

/* =========================================================
   Anfrage
   ========================================================= */
.inquiry{ position:relative; background:var(--paper); overflow:hidden; }
.inquiry__bg{ position:relative; height:62vh; height:62svh; min-height:340px; overflow:hidden; }
.inquiry__bg img{ width:100%; height:100%; object-fit:cover; object-position:48% 40%; }
.inquiry__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(247,243,236,0) 45%, rgba(247,243,236,.55) 78%, var(--paper) 100%);
}
.inquiry__inner{ position:relative; margin-top:-26vh; margin-top:-26svh; padding-bottom:var(--section); }
.inquiry__card{
  -webkit-backdrop-filter:blur(28px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(28px) saturate(180%) brightness(1.06);
  max-width:560px; margin-inline:auto;
  padding:clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  border-radius:22px;
  background-color:rgba(247,243,236,.9);
}
.inquiry__card .label{ margin-bottom:14px; }
.inquiry__title{ font-size:clamp(1.75rem, 1.2rem + 2.2vw, 3rem); max-width:12em; font-optical-sizing:none; font-variation-settings:"opsz" 28; }
.inquiry__lead{ margin-top:20px; }
.inquiry__facts{ margin-top:14px; color:var(--olive-deep); }
.form-fallback{ margin-top:28px; }
.form-fallback a{ color:var(--ink); text-underline-offset:3px; }

@media (min-width:960px){
  .inquiry{ display:grid; min-height:0; overflow:clip; }
  .inquiry__bg{ grid-area:1 / 1; position:sticky; top:0; height:100vh; height:100svh; min-height:0; }
  .inquiry__bg img{ object-position:100% 50%; }
  .inquiry__bg::after{ background:linear-gradient(90deg, rgba(20,18,16,.28) 0, rgba(20,18,16,0) 55%); }
  .inquiry__inner{ grid-area:1 / 1; margin-top:0; padding-block:var(--section); display:flex; justify-content:flex-start; }
  .inquiry__card{ margin-inline:0; max-width:520px; border-radius:28px; background-color:rgba(247,243,236,.93); }
}

/* Formular */
.form{ margin-top:36px; }
.form__summary:empty{ display:none; }
.form__summary{
  margin-bottom:24px; padding:12px 16px; border-left:2px solid var(--error);
  color:var(--error); font-size:var(--fs-small); background:rgba(142,59,43,.06);
}
.field{ position:relative; margin:0 0 24px; padding:0; border:0; min-width:0; }
.field > label,
.field legend{
  display:block; margin-bottom:4px; padding:0;
  font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--olive-deep);
  transition:color var(--dur-s) var(--ease-standard);
}
.field:focus-within > label{ color:var(--ink); }
.field input[type="text"],
.field textarea{
  display:block; width:100%;
  min-height:56px; padding:14px 0 12px;
  border:0; border-bottom:1px solid var(--olive); border-radius:0;
  background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:1.125rem; line-height:1.4;
  transition:box-shadow var(--dur-s) var(--ease-standard), border-color var(--dur-s) var(--ease-standard);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:76px; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--olive-deep); opacity:1; }
.field input[type="text"]:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--ink); box-shadow:0 1px 0 0 var(--ink); }
.field input[type="text"]:focus-visible,
.field textarea:focus-visible{ outline:none; }
.field [aria-invalid="true"]{ border-bottom-color:var(--error) !important; box-shadow:0 1px 0 0 var(--error) !important; }
.field__error:empty{ display:none; }
.field__error{
  display:flex; align-items:flex-start; gap:6px;
  margin-top:8px; font-size:.875rem; line-height:1.45; color:var(--error);
}
.field__error::before{
  content:"!"; flex:none; display:grid; place-items:center;
  width:16px; height:16px; margin-top:2px; border-radius:50%;
  background:var(--error); color:var(--paper); font-size:11px; font-weight:700; line-height:1;
}

.chips legend{ margin-bottom:12px; }
.chips__list{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.chip label{
  display:inline-flex; align-items:center; height:44px; padding:0 18px;
  border-radius:999px; box-shadow:inset 0 0 0 1px var(--olive);
  font-size:.9375rem; cursor:pointer; user-select:none;
  transition:background-color var(--dur-s) var(--ease-standard), color var(--dur-s) var(--ease-standard), box-shadow var(--dur-s) var(--ease-standard);
}
.chip label:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.chip input:checked + label{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1px var(--ink); }
.chip input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:3px; }

.field--check{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start; }
.field--check input{
  width:24px; height:24px; margin:2px 0 0; accent-color:var(--ink); cursor:pointer;
}
.field--check label{
  margin:0; font-size:var(--fs-small); font-weight:400; letter-spacing:.01em; text-transform:none; color:var(--ink); line-height:1.55;
  cursor:pointer;
}
.field--check label a{ text-underline-offset:3px; }
.field--check .field__error{ grid-column:1 / -1; }
.field--check input[aria-invalid="true"]{ outline:2px solid var(--error); outline-offset:2px; }

.form__prep{ color:var(--olive-deep); margin-bottom:16px; }
.form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.form__actions .btn--wa{ padding:0 24px; }
.btn--wa{ width:100%; }
.form__note{ margin-top:16px; color:var(--olive-deep); }
.form__status:empty{ display:none; }
.form__status{ margin-top:24px; padding:14px 16px; background:rgba(31,29,27,.05); border-left:2px solid var(--ink); font-size:var(--fs-small); }
.form__after{ margin-top:16px; display:grid; gap:10px; justify-items:start; }
.form__next strong{ display:block; font-weight:600; }
.form__help{ color:var(--olive-deep); }
.form__help a{ color:var(--ink); }
@media (min-width:640px){
  .btn--wa{ width:auto; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  padding-top:var(--section);
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
}
.footer__cta{ padding-bottom:96px; }
.footer__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.005em;
  max-width:12em; text-wrap:balance;
}
.footer__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:36px; }
.footer__cols{
  display:grid; gap:36px;
  padding-block:48px; border-top:1px solid var(--line-on-ink);
}
.footer__label{
  margin-bottom:12px;
  font-family:var(--sans); font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sand);
}
.footer__col ul{ list-style:none; display:grid; gap:2px; font-size:.9375rem; }
.footer__col li{ min-height:32px; display:flex; align-items:center; }
.footer__col a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.footer__col a:hover{ text-decoration:underline; text-underline-offset:5px; }
.footer__mark{ margin:48px auto 0; width:clamp(15rem, 9.167rem + 25.926vw, 32.5rem); }
.footer__mark img{ display:block; width:100%; height:auto; }
.footer__copy{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--line-on-ink);
  font-size:.8125rem; color:var(--sand);
}
@media (min-width:960px){
  .footer__cols{ grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); }
  .footer__col:nth-of-type(1){ grid-column:1 / 5; }
  .footer__col:nth-of-type(2){ grid-column:5 / 9; }
  .footer__col:nth-of-type(3){ grid-column:9 / 13; }
}

/* =========================================================
   Schwebender WhatsApp-Button
   ========================================================= */
.fab{
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(16px) saturate(180%) brightness(1.06);
  background-color:rgba(247,243,236,.92);
  position:fixed; z-index:var(--z-fab);
  right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:56px; height:56px; border-radius:999px;
  text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur-m) var(--ease-standard), transform var(--dur-m) var(--ease-standard), visibility 0s linear var(--dur-m), background-color var(--dur-s) var(--ease-standard);
}
.fab.is-visible{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--dur-m) var(--ease-standard), transform var(--dur-m) var(--ease-standard), visibility 0s, background-color var(--dur-s) var(--ease-standard);
}
.fab:hover{ background-color:rgba(247,243,236,.98); }
.fab__text{ display:none; font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.no-js .fab{ opacity:1; visibility:visible; transform:none; }
@media (max-width:959px){ .no-js .fab{ display:none; } }
@media (min-width:960px){
  .fab{ width:auto; height:52px; padding:0 22px 0 18px; right:24px; bottom:24px; }
  .fab__text{ display:inline; }
}

/* =========================================================
   Scroll-Reveals (nur mit JS, nur ohne Reduced Motion)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{
    opacity:0; transform:translate3d(0,16px,0);
    transition:opacity var(--dur-l) var(--ease-film), transform var(--dur-l) var(--ease-film);
    transition-delay:calc(var(--i, 0) * 70ms);
  }
  .js [data-reveal].is-in{ opacity:1; transform:none; }

  .js .reveal-img{ clip-path:inset(12% 0 12% 0); }
  .js .reveal-img img,
  .js .reveal-img video{ transform:scale(1.08); }
  .js .reveal-img.is-in{ clip-path:none; animation:reveal-clip var(--dur-xl) var(--ease-film); }
  @keyframes reveal-clip{ from{ clip-path:inset(12% 0 12% 0); } to{ clip-path:inset(0 0 0 0); } }
  .js:not(.is-loaded) :is([data-reveal], .reveal-img){ animation:failsafe 0s 2.5s forwards; }
  .js:not(.is-loaded) .reveal-img{ animation:failsafe-clip 0s 2.5s forwards; }
  .js .reveal-img.is-in img,
  .js .reveal-img.is-in video{ transform:scale(1); transition:transform 1600ms var(--ease-film), filter var(--dur-xl) var(--ease-standard); }
  @media (hover:hover) and (pointer:fine){
    .js .g-frame.is-in:hover img,
    .js .g-frame.is-in:focus-visible img{ transform:scale(1.03); transition:filter 900ms var(--ease-standard), transform 1400ms var(--ease-film); }
  }
}

/* Dezentes Parallax als Progressive Enhancement (CSS scroll-driven) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width:960px){
    .hero__media{
      animation:hero-drift linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
    }
    @keyframes hero-drift{ to{ transform:translate3d(0,15vh,0); } }
    .film__frame{
      animation:film-open linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 40%;
    }
    @keyframes film-open{ from{ transform:scale(.88); } to{ transform:none; } }
  }
}

/* =========================================================
   Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .js .hero__veil{ display:none; }
  .js .hero .line > span,
  .js .hero__eyebrow, .js .hero__actions, .js .hero__aside{ opacity:1; transform:none; transition:none; }
  .g-frame img{ transform:none !important; transition:filter 200ms linear !important; }
  .menu__links a{ opacity:1; transform:none; transition:none; }
  .faq__icon{ transition:none; }
  .fab{ transition:opacity 1ms, visibility 0s; transform:none; }
}

/* =========================================================
   Rechtstexte (Impressum, Datenschutz)
   ========================================================= */
.legal{ padding-top:calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem)); padding-bottom:var(--section); }
.legal__inner{ max-width:var(--measure); }
.legal h1{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(2.25rem, 1.8rem + 2vw, 3.5rem); line-height:1.08;
}
.legal__note{
  margin-top:24px; padding:12px 16px; border-left:2px solid var(--olive);
  background:var(--linen); font-size:var(--fs-small); color:var(--olive-deep);
}
.legal h2{
  margin-top:48px; margin-bottom:12px;
  hyphens:auto; overflow-wrap:break-word;
  font-family:var(--serif); font-optical-sizing:auto; font-size:1.5rem; line-height:1.25;
}
.legal p, .legal ul{ margin-top:12px; hyphens:auto; overflow-wrap:break-word; }
.legal ul{ padding-left:1.2em; }
.legal li{ margin-top:6px; }
.legal a{ text-underline-offset:3px; word-break:break-word; }
.legal__back{ margin-top:56px; }
.page-legal .footer__cta{ display:none; }
.page-legal .footer{ padding-top:64px; }

/* =========================================================
   Druck
   ========================================================= */
@media print{
  [data-reveal], .reveal-img, .reveal-img img, .hero .line > span, .hero__eyebrow, .hero__actions, .hero__aside, .hero__layer{
    opacity:1 !important; transform:none !important; clip-path:none !important; animation:none !important; transition:none !important;
  }
  .skip, .fab, .hero__video, .hero__veil, .site-header, .marquee-section, .film__controls, dialog{ display:none !important; }
  .hero{ min-height:0; }
  .g-frame img{ filter:none !important; }
}


/* =========================================================
   Schrift-Anpassung 23.10.2026: Hanselead-CI-Schriften, besser lesbar
   Figtree für alles, Instrument Serif Italic nur für Akzentwörter
   ========================================================= */
.h2,.hero__title,.claim,.footer__title,.legal h1,.inquiry__title,.menu__links a{ font-weight:600; }
.h2{ letter-spacing:.02em; }
.hero__title,.claim,.footer__title{ letter-spacing:-.02em; }
.h3,.legal h2,.faq__q{ font-weight:600; }
.lead,.voice blockquote{ font-weight:500; }
.step__num{ font-weight:500; }
.label{ font-weight:600; }
.small,.gallery__hint{ font-weight:500; }
.h2 em,.footer__title em,.claim em,.hero__title em,.signature__name{
  font-family:var(--accent); font-weight:400; font-style:italic;
}


/* =========================================================
   Überarbeitung 23.10.2026 (2): Überschriften-System, Lesbarkeit, Layout
   Ersetzt die Versalien-Headlines mit kursivem Einzelwort.
   A = Zweizeiler, Zeile 2 kursiv (Hero, Film, Footer)
   B = gerade, ohne Kursiv (alle Sach-Abschnitte)
   C = ganze Zeile kursiv (Intro-Claim, Galerie)
   ========================================================= */
:root{
  --fs-h1:clamp(2.75rem, 1.9rem + 4vw, 5.75rem);
  --fs-h2:clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem);
  --fs-body:clamp(1.0625rem, 1.02rem + .19vw, 1.125rem);
  --fs-num:clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
body{ font-weight:450; line-height:1.6; }

.h2,.hero__title,.claim,.footer__title,.inquiry__title,.menu__links a{
  text-transform:none; font-weight:500; letter-spacing:-.022em;
}
.hero__title{ letter-spacing:-.03em; line-height:1; }
.h2{ line-height:1.04; max-width:16em; }
.h-alt,
.hero .line--alt > span{
  display:block; font-family:var(--accent); font-style:italic; font-weight:400;
  font-size:1.12em; letter-spacing:-.01em; line-height:1;
}
.hero .line--alt{ padding-bottom:.14em; margin-bottom:-.14em; }
.is-accent{ font-family:var(--accent); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.h2.is-accent{ font-size:calc(var(--fs-h2) * 1.15); line-height:1.02; }
.claim.is-accent{ font-size:clamp(2.4rem, 1.4rem + 4.2vw, 5.25rem); line-height:1.02; max-width:12em; }
.inquiry__title{ font-variation-settings:normal; }

.h3{ font-weight:500; font-size:clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.faq__q{ font-weight:500; font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.label,.offer__meta,.caption,.field:not(.field--check) > label,.field legend,.footer__label,.hero__eyebrow,.hero__caption{
  font-size:max(12.5px, var(--fs-label)); font-weight:600; letter-spacing:.12em;
}
.step__num{ font-weight:400; }

/* Galerie: Bilder gleich in Farbe */
.g-frame img{ filter:none; }
.gallery__hint{ display:none !important; }

/* Leistungen: Titel auf einer Höhe, damit man vergleichen kann */
@media (min-width:640px){ .offer:nth-child(even){ margin-top:0; } }

/* Ablauf: Zeilen statt fünf schmaler Spalten */
.step{ grid-template-columns:2.75rem 1fr; }
@media (min-width:960px){
  .steps{ grid-template-columns:1fr; }
  .step{ display:grid; grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); align-items:baseline; padding:28px 0; }
  .step:last-child{ border-bottom:1px solid var(--line); }
  .step__num{ grid-column:1 / 2; grid-row:auto; margin-bottom:0; }
  .step .h3{ grid-column:2 / 6; align-self:baseline; }
  .step p{ grid-column:6 / 13; margin-top:0; max-width:36em; }
}

/* Footer: gleiche Zeilenabstände */
.footer__col li{ min-height:44px; }

/* Mobil: Pause-Knopf im Hero nicht neben „Film ansehen“ */
@media (max-width:639px){
  .hero__aside{ top:calc(var(--header-h) + 8px); bottom:auto; }
}

/* Anfrageformular mit Versand per Mail (23.10.2026) */
.field input[type="email"],
.field input[type="tel"]{
  display:block; width:100%;
  min-height:56px; padding:14px 0 12px;
  border:0; border-bottom:1px solid var(--olive); border-radius:0;
  background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:1.125rem; line-height:1.4;
  transition:box-shadow var(--dur-s) var(--ease-standard), border-color var(--dur-s) var(--ease-standard);
  -webkit-appearance:none; appearance:none;
}
.field input[type="email"]:focus,
.field input[type="tel"]:focus{ outline:none; border-bottom-color:var(--ink); box-shadow:0 1px 0 0 var(--ink); }
.field--hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form__fields[hidden]{ display:none; }
.form__privacy{ color:var(--olive-deep); margin:4px 0 20px; }
.form__privacy a{ color:var(--ink); text-underline-offset:3px; }
.form__submit{ min-width:12rem; }
.form__submit[disabled]{ opacity:.6; cursor:progress; }
.link-btn--wa{ gap:10px; }
.link-btn--wa svg{ flex:none; }
.form__done{ padding:8px 0 4px; outline:none; }
.form__done-title{ font-family:var(--accent); font-style:italic; font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height:1.1; margin-bottom:12px; }

/* Leistungen: drei Angebote, Ansprechpartner-Satz unter der Überschrift */
.offers__lead{ margin-top:16px; max-width:32em; font-size:var(--fs-body); }
@media (min-width:768px){ .offers{ grid-template-columns:repeat(3, 1fr); } }

/* =========================================================
   Liquid Glass, überarbeitet 23.10.2026
   Klarer statt milchig: weniger Blur, mehr Sättigung, dünne Lichtkante
   oben links, Innenschatten für Dicke. Gilt für Buttons, Nav, Münze, FAB,
   Formularkarte. Blur bewusst als Literal (Safari ignoriert var() in backdrop-filter).
   ========================================================= */
.glass{
  transition:transform var(--dur-xs) var(--ease-standard), box-shadow var(--dur-s) var(--ease-standard), background-color var(--dur-s) var(--ease-standard);
}
.glass::before{
  background:linear-gradient(140deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.18) 20%, rgba(255,255,255,0) 42%,
    rgba(255,255,255,0) 68%, rgba(255,255,255,.22) 88%, rgba(255,255,255,.55) 100%);
}
.glass--media{
  --tint:.24;
  -webkit-backdrop-filter:blur(10px) saturate(200%) brightness(1.04);
          backdrop-filter:blur(10px) saturate(200%) brightness(1.04);
  background:
    radial-gradient(130% 150% at 25% -30%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%),
    rgba(31,29,27,var(--tint));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 10px 16px -14px rgba(255,255,255,.45),
    inset 0 -10px 16px -14px rgba(255,255,255,.22),
    0 1px 2px rgba(20,18,16,.20),
    0 10px 26px -12px rgba(20,18,16,.50);
  text-shadow:0 1px 2px rgba(20,18,16,.35);
}
.glass--media:hover{ --tint:.34; }
.glass--paper{
  -webkit-backdrop-filter:blur(12px) saturate(190%) brightness(1.08);
          backdrop-filter:blur(12px) saturate(190%) brightness(1.08);
  background:
    radial-gradient(130% 150% at 25% -30%, rgba(255,255,255,.60), rgba(255,255,255,0) 58%),
    rgba(247,243,236,.62);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 0 0 .5px rgba(31,29,27,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(31,29,27,.05),
    inset 0 -12px 20px -16px rgba(255,255,255,.70),
    0 1px 2px rgba(31,29,27,.08),
    0 12px 30px -16px rgba(31,29,27,.30);
}
.glass--paper.glass--cta{
  -webkit-backdrop-filter:blur(12px) saturate(190%) brightness(1.08);
          backdrop-filter:blur(12px) saturate(190%) brightness(1.08);
  background-color:rgba(247,243,236,.92);
}
.glass--paper.glass--cta:hover{ background-color:rgba(247,243,236,.97); }
/* Formularkarte: Text muss lesbar bleiben, daher dichter */
.inquiry__card.glass--paper{
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(18px) saturate(180%) brightness(1.06);
  background:
    radial-gradient(130% 120% at 20% -20%, rgba(255,255,255,.55), rgba(255,255,255,0) 50%),
    rgba(247,243,236,.86);
}
@media (hover:hover) and (pointer:fine){
  a.glass:hover, button.glass:hover{ transform:translateY(-1px); }
}
a.glass:active, button.glass:active{ transform:scale(.985); }

/* Navigation im gleichen Glas */
.nav{
  -webkit-backdrop-filter:blur(10px) saturate(200%) brightness(1.04);
          backdrop-filter:blur(10px) saturate(200%) brightness(1.04);
  border-color:rgba(255,255,255,.16);
  background-image:radial-gradient(130% 160% at 20% -40%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  background-color:rgba(31,29,27,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 16px -14px rgba(255,255,255,.22),
    0 1px 2px rgba(20,18,16,.20),
    0 10px 26px -12px rgba(20,18,16,.50);
}
.site-header[data-tone="paper"] .nav{
  -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.08);
          backdrop-filter:blur(14px) saturate(190%) brightness(1.08);
  background-image:radial-gradient(130% 160% at 20% -40%, rgba(255,255,255,.65), rgba(255,255,255,0) 58%);
  background-color:rgba(247,243,236,.78);
  border-color:rgba(255,255,255,.65);
  box-shadow:
    0 0 0 .5px rgba(31,29,27,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -12px 20px -16px rgba(255,255,255,.70),
    0 1px 2px rgba(31,29,27,.08),
    0 12px 30px -16px rgba(31,29,27,.30);
}

/* Fallbacks erneut, damit sie die Überarbeitung schlagen */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass--media, .nav{ background-color:rgba(31,29,27,.70); }
  .glass--paper, .glass--paper.glass--cta, .inquiry__card.glass--paper, .site-header[data-tone="paper"] .nav{ background-color:rgba(247,243,236,.96); }
}
@media (prefers-reduced-transparency: reduce){
  .glass, .nav{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .glass--media, .nav{ background:rgba(31,29,27,.80); }
  .glass--paper, .glass--paper.glass--cta, .inquiry__card.glass--paper, .site-header[data-tone="paper"] .nav{ background:var(--paper); }
}
@media (prefers-contrast: more){
  .glass::before{ display:none; }
  .glass--paper, .inquiry__card.glass--paper{ background:var(--paper); border-color:var(--ink); }
}
@media (prefers-reduced-motion: reduce){
  a.glass:hover, button.glass:hover, a.glass:active, button.glass:active{ transform:none; }
}

/* Zweiter Film (Vimeo, lädt erst nach Klick) */
.film__more{ margin-top:clamp(3rem, 2rem + 3vw, 5rem); }
.film__more-title{ color:var(--paper); margin-bottom:20px; }
.film-card{
  display:grid; gap:16px; width:100%; max-width:560px; padding:0; text-align:left;
  background:none; border:0; color:var(--paper); cursor:pointer;
}
.film-card__img{ position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; background:#0f0e0d; }
.film-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-film); }
.film-card:hover .film-card__img img{ transform:scale(1.03); }
.film-card__play{
  position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  display:grid; place-items:center; padding-left:3px;
}
.film-card__text{ display:grid; gap:6px; }
.film-card__title{ font-family:var(--accent); font-style:italic; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height:1.1; }
.film-card__meta{ font-size:var(--fs-small); color:var(--sand); }
.film-card:focus-visible{ outline:2px solid var(--paper); outline-offset:6px; }
@media (min-width:960px){
  .film__more{ display:grid; grid-template-columns:repeat(12, 1fr); column-gap:var(--gap); align-items:start; }
  .film__more-title{ grid-column:1 / 5; }
  .film-card{ grid-column:5 / 11; }
}
.vimeo-dialog__frame{ position:relative; width:100%; aspect-ratio:16 / 9; background:#000; }
.vimeo-dialog__iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vimeo-consent{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:18px;
  padding:24px; text-align:center;
  background:#0f0e0d url("../img/film-tim-janice-1200.jpg") 50% 50% / cover no-repeat;
}
.vimeo-consent::before{ content:""; position:absolute; inset:0; background:rgba(20,18,16,.62); }
.vimeo-consent > *{ position:relative; }
.vimeo-consent[hidden]{ display:none; }
.vimeo-consent__title{ font-family:var(--accent); font-style:italic; font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height:1.1; }
.vimeo-consent__text{ max-width:30em; font-size:var(--fs-small); color:var(--sand); }
.vimeo-consent__text a{ color:var(--paper); text-underline-offset:3px; }

/* Formularkarte nach dem Senden nicht künstlich strecken */
@media (min-width:960px){ .inquiry__inner{ align-items:flex-start; } }

/* Mobil-Hero 23.10.2026: ohne Orts-Badge und Pause-Knopf, „Film ansehen“ als gleich großer Glas-Button */
@media (max-width:639px){
  .hero__eyebrow{ display:none; }
  .hero__aside{ display:none; }
  .hero__actions{ gap:10px; }
  .hero .hero__secondary{
    width:100%; height:52px; padding:0 28px;
    text-decoration:none; letter-spacing:.14em;
    -webkit-backdrop-filter:blur(10px) saturate(200%) brightness(1.04);
            backdrop-filter:blur(10px) saturate(200%) brightness(1.04);
    background:
      radial-gradient(130% 150% at 25% -30%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%),
      rgba(31,29,27,.30) !important;
    border:1px solid rgba(255,255,255,.18);
  }
  .hero .hero__secondary::before{ display:block; }
}
@media (max-width:430px){ .hero .line--alt > span{ font-size:1em; } }