/* ==========================================================================
   GRÜNVOGEL IMMOBILIEN — Design System
   Brand: Navy #1e1f26 · Gold #bf9254 (aus dem GD-Monogramm abgeleitet)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Farben */
  --ink:      #171921;
  --ink-2:    #1e2029;
  --ink-3:    #262933;   /* Marken-Navy, leicht aufgehellt */
  --ink-4:    #33363f;

  --gold:     #bf9254;   /* Marken-Gold */
  --gold-lt:  #dcb783;
  --gold-dk:  #8a6738;
  --gold-glow: rgba(191,146,84,.35);

  --cream:    #faf8f4;
  --cream-2:  #f1ebe2;
  --cream-3:  #ddd3c4;
  --paper:    #ffffff;

  /* Rollen */
  --bg:        var(--cream);
  --fg:        var(--ink);
  --fg-soft:   rgba(12,13,17,.62);
  --fg-faint:  rgba(12,13,17,.38);
  --rule:      rgba(12,13,17,.13);

  /* Typografie */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-eyebrow: 500 clamp(.62rem,.72vw,.7rem)/1.4 var(--sans);
  --ls-eyebrow: .3em;

  /* Raster */
  --pad: clamp(1.25rem, 5vw, 6.5rem);
  --maxw: 1560px;
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);

  /* Motion */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.76,0,.24,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
  --d: .9s;

  --header-h: 84px;
}

@media (max-width:860px){ :root{ --header-h: 68px; } }

/* ---------- 2. Reset / Base --------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  color-scheme: light;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 clamp(.95rem,1.02vw,1.0625rem)/1.68 var(--sans);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; background:var(--cream-2); }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.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{
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  transform:translateY(-160%); transition:transform .3s var(--e-out);
  background:var(--ink); color:var(--cream); padding:.75rem 1.25rem; border-radius:2px;
  font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ transform:none; }

/* ---------- 3. Layout ---------------------------------------------------- */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.shell--wide{ max-width:1860px; }
.section{ padding-block: clamp(5rem, 11vw, 12rem); position:relative; }
.section--tight{ padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--flush{ padding-block:0; }

.grid{ display:grid; gap:var(--gap); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
@media (max-width:1000px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .g-2,.g-3,.g-4{ grid-template-columns:minmax(0,1fr); } }

/* Dunkle Zonen */
.zone-dark{
  background:var(--ink); color:var(--cream);
  --fg:var(--cream); --fg-soft:rgba(247,244,239,.62); --fg-faint:rgba(247,244,239,.34);
  --rule:rgba(247,244,239,.14);
}
.zone-navy{ background:var(--ink-3); }
.zone-paper{ background:var(--paper); }
.zone-cream2{ background:var(--cream-2); }

/* ---------- 4. Typografie ------------------------------------------------ */
.display{
  font-family:var(--serif); font-weight:300;
  line-height:.94; letter-spacing:-.015em;
  text-wrap:balance;
}
.d-1{ font-size:clamp(2.6rem, 7.6vw, 7.8rem); }
.d-2{ font-size:clamp(2.4rem, 6.4vw, 6.2rem); }
.d-3{ font-size:clamp(1.9rem, 4vw, 3.6rem); line-height:1.02; }
.d-4{ font-size:clamp(1.4rem, 2.3vw, 2.15rem); line-height:1.12; letter-spacing:-.01em; }
.display em{ font-style:italic; color:var(--gold); }

.eyebrow{
  font:var(--t-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:clamp(18px,3vw,40px); height:1px;
  background:currentColor; opacity:.8; flex:none;
}
.eyebrow--plain::before{ display:none; }

.lead{ font-size:clamp(1.06rem,1.42vw,1.375rem); line-height:1.55; color:var(--fg-soft); text-wrap:pretty; }
.body-lg{ font-size:clamp(1rem,1.12vw,1.125rem); line-height:1.72; color:var(--fg-soft); text-wrap:pretty; }
.small{ font-size:.8125rem; line-height:1.6; color:var(--fg-faint); }
.measure{ max-width:62ch; }
.measure-sm{ max-width:48ch; }

.num{ font-variant-numeric:tabular-nums lining-nums; }

/* Gold-Sweep über Text */
.gold-sweep{
  background:linear-gradient(100deg,var(--gold-dk) 0%,var(--gold) 30%,var(--gold-lt) 45%,var(--gold) 60%,var(--gold-dk) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ to{ background-position:-250% 0; } }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --btn-fg:var(--ink); --btn-bg:var(--gold);
  position:relative; display:inline-flex; align-items:center; gap:.75em;
  padding:1.05em 1.9em; border-radius:999px;
  font:600 .78rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--btn-fg); background:var(--btn-bg);
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .45s var(--e-out), transform .5s var(--e-out), box-shadow .5s var(--e-out);
  will-change:transform;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--ink);
  transform:translateY(101%); transition:transform .55s var(--e-io);
}
.btn:hover{ color:var(--gold); box-shadow:0 18px 40px -18px var(--gold-glow); }
.btn:hover::after{ transform:translateY(0); }
.btn .arw{ transition:transform .5s var(--e-out); }
.btn:hover .arw{ transform:translateX(4px); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--fg); box-shadow:inset 0 0 0 1px var(--rule); }
.btn--ghost::after{ background:var(--gold); }
.btn--ghost:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold); }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--cream); }
.btn--dark::after{ background:var(--gold); }
.btn--dark:hover{ color:var(--ink); }
.btn--sm{ padding:.85em 1.5em; font-size:.7rem; }

/* Textlink mit Unterstrich-Wipe */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  font:500 .8rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.5em; color:var(--fg);
}
.tlink::before,.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
.tlink::before{ background:var(--rule); }
.tlink::after{
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--e-io);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink:hover{ color:var(--gold); }

/* ---------- 6. Cursor ---------------------------------------------------- */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:190; pointer-events:none;
  border-radius:50%; opacity:0; mix-blend-mode:difference;
}
.cursor{ width:6px; height:6px; background:var(--gold-lt); margin:-3px 0 0 -3px; transition:opacity .3s; }
.cursor-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(220,183,131,.7);
  transition:width .4s var(--e-out),height .4s var(--e-out),margin .4s var(--e-out),opacity .3s,background .4s;
}
.cursor-on .cursor,.cursor-on .cursor-ring{ opacity:1; }
.cursor-ring.is-lg{ width:78px; height:78px; margin:-39px 0 0 -39px; background:rgba(191,146,84,.16); }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{ display:none; } }

/* ---------- 7. Grain + Progress ------------------------------------------ */
.grain{
  position:fixed; inset:-120%; z-index:170; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)}
}
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:181;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));
}

/* ---------- 8. Preloader ------------------------------------------------- */
.pre{
  position:fixed; inset:0; z-index:210; display:grid; place-items:center;
  background:var(--ink); color:var(--cream);
}
.pre__mark{ width:clamp(76px,9vw,120px); height:auto; }
.pre__mark .ring{
  fill:none; stroke:var(--gold); stroke-width:2.4;
  stroke-dasharray:302; stroke-dashoffset:302;
  animation:draw 1.5s var(--e-out) .15s forwards;
}
.pre__mark .mono{ opacity:0; animation:fadeUp .9s var(--e-out) .85s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.pre__meta{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(1.5rem,4vw,3rem);
  display:flex; justify-content:space-between; align-items:end; gap:1rem;
  font:var(--t-eyebrow); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(247,244,239,.5);
}
.pre__count{ font-family:var(--serif); font-size:clamp(2.5rem,7vw,5rem); line-height:.85; color:var(--cream); letter-spacing:-.02em; }
.pre__bar{ position:absolute; left:0; bottom:0; height:1px; background:var(--gold); width:0; }
.pre.is-done{ pointer-events:none; }
.pre__curtain{ position:absolute; inset:0; display:flex; }
.pre__curtain i{ flex:1; background:var(--ink); transform-origin:50% 100%; }
.pre.is-done .pre__curtain i{ animation:curtain .95s var(--e-io) forwards; }
.pre.is-done .pre__inner{ opacity:0; transition:opacity .35s; }
@keyframes curtain{ to{ transform:scaleY(0); } }

/* ---------- 9. Header ---------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:180; height:var(--header-h);
  display:flex; align-items:center;
  transition:transform .6s var(--e-out), background .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
}
.hdr__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.hdr.is-stuck{
  background:rgba(12,13,17,.72);
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 1px 0 rgba(247,244,239,.1);
}
.hdr.is-hidden{ transform:translateY(-105%); }
.hdr{ color:var(--cream); }
.hdr.on-light:not(.is-stuck){ color:var(--ink); }

.brand{ display:flex; align-items:center; gap:.8rem; flex:none; }
.brand__mark{ width:40px; height:40px; flex:none; border-radius:50%; box-shadow:0 0 0 1px rgba(191,146,84,.42); transition:transform .7s var(--e-out), box-shadow .5s ease; }
.brand:hover .brand__mark{ box-shadow:0 0 0 1px var(--gold); }
.brand:hover .brand__mark{ transform:rotate(-12deg) scale(1.06); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; gap:.3rem; }
.brand__txt b{ font:500 .95rem/1 var(--serif); letter-spacing:.2em; text-transform:uppercase; }
.brand__txt span{ font:var(--t-eyebrow); letter-spacing:.24em; text-transform:uppercase; opacity:.55; font-size:.55rem; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.2rem); }
.nav a{
  position:relative; font:500 .74rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  padding:.4rem 0; opacity:.82; transition:opacity .3s, color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--e-io);
}
.nav a:hover{ opacity:1; color:var(--gold-lt); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]{ opacity:1; color:var(--gold); }
.hdr__cta{ display:flex; align-items:center; gap:1rem; flex:none; }
@media (max-width:1180px){ .nav{ display:none; } }
@media (max-width:600px){ .hdr__cta .btn{ display:none; } .brand__txt span{ display:none; } }

/* Burger */
.burger{
  display:none; width:46px; height:46px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px currentColor; position:relative;
}
.burger i{
  position:absolute; left:50%; width:16px; height:1px; background:currentColor;
  transform:translateX(-50%); transition:transform .5s var(--e-io), opacity .3s;
}
.burger i:nth-child(1){ top:20px; } .burger i:nth-child(2){ top:26px; }
.is-menu .burger i:nth-child(1){ transform:translateX(-50%) translateY(3px) rotate(45deg); }
.is-menu .burger i:nth-child(2){ transform:translateX(-50%) translateY(-3px) rotate(-45deg); }
@media (max-width:1180px){ .burger{ display:block; } }

/* Fullscreen-Menü */
.menu{
  position:fixed; inset:0; z-index:179; background:var(--ink); color:var(--cream);
  display:grid; grid-template-rows:1fr auto; padding-top:var(--header-h);
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--e-io);
  visibility:hidden;
}
.is-menu .menu{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list{ display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:2rem var(--pad); }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,8vw,5rem); line-height:1.12;
  transform:translateY(110%); transition:transform .8s var(--e-out), color .4s;
}
.menu__list a:hover{ color:var(--gold); }
.menu__list a i{ font:var(--t-eyebrow); letter-spacing:.2em; color:var(--gold); font-style:normal; }
.is-menu .menu__list a{ transform:none; }
.menu__list li:nth-child(1) a{ transition-delay:.14s } .menu__list li:nth-child(2) a{ transition-delay:.2s }
.menu__list li:nth-child(3) a{ transition-delay:.26s } .menu__list li:nth-child(4) a{ transition-delay:.32s }
.menu__list li:nth-child(5) a{ transition-delay:.38s }
.menu__foot{
  padding:2rem var(--pad); border-top:1px solid rgba(247,244,239,.12);
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; justify-content:space-between;
  font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:rgba(247,244,239,.6);
}
.menu__foot a:hover{ color:var(--gold); }

/* ---------- 10. Reveals -------------------------------------------------- */
.js [data-rv]{ opacity:0; transition:opacity 1s var(--e-out), transform 1.05s var(--e-out); }
[data-rv="up"]{ transform:translateY(38px); }
[data-rv="fade"]{ transform:none; }
[data-rv="left"]{ transform:translateX(-38px); }
[data-rv="right"]{ transform:translateX(38px); }
[data-rv="scale"]{ transform:scale(.94); }
[data-rv].is-in{ opacity:1; transform:none; }

/* Bild-Reveal per clip-path */
.rv-img{ overflow:hidden; position:relative; }
.js .rv-img > img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.22);
  transition:clip-path 1.35s var(--e-io), transform 1.8s var(--e-out);
  will-change:clip-path,transform;
}
.rv-img.is-in > img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* Zeilen-/Wort-Maske */
.split{ display:block; }
.split .ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.js .split .wd{
  display:inline-block; transform:translateY(105%);
  transition:transform 1.1s var(--e-out);
}
.split.is-in .wd{ transform:none; }

/* ---------- 11. Hero ----------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  background:var(--ink); color:var(--cream); overflow:clip; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{
  width:100%; height:118%; object-fit:cover; object-position:50% 55%;
  transform:scale(1.12); opacity:0;
  animation:heroIn 2.6s var(--e-out) .1s forwards;
  will-change:transform;
}
@keyframes heroIn{ to{ transform:scale(1); opacity:1; } }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(16,18,24,.60) 0%, rgba(16,18,24,.10) 30%, rgba(16,18,24,.40) 64%, rgba(16,18,24,.86) 100%),
    linear-gradient(90deg, rgba(16,18,24,.60) 0%, rgba(16,18,24,.24) 44%, transparent 72%),
    radial-gradient(120% 80% at 12% 88%, rgba(191,146,84,.16) 0%, transparent 62%);
}
.hero__in{ padding-block: clamp(6rem,13vh,9rem) clamp(3.5rem,7vh,5rem); position:relative; }
.hero h1{ margin:.4em 0 .42em; max-width:17ch; text-shadow:0 2px 30px rgba(10,12,16,.5); }
.hero .lead{ color:rgba(250,248,244,.92); max-width:52ch; text-shadow:0 1px 18px rgba(10,12,16,.55); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(1.75rem,3.5vw,2.75rem); }

.hero__facts{
  margin-top:clamp(2rem,4.5vw,3.25rem); padding-top:1.5rem;
  border-top:1px solid rgba(250,248,244,.3);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem;
}
.hero__facts div b{
  display:block; font:300 clamp(1.5rem,2.6vw,2.4rem)/1 var(--serif); color:var(--gold-lt);
  letter-spacing:-.01em; text-shadow:0 1px 14px rgba(10,12,16,.55);
}
.hero__facts div > span{
  display:block; margin-top:.5rem; font:var(--t-eyebrow); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(247,244,239,.55);
}
.hero__facts b > span{ display:inline; margin:0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }
@media (max-width:820px){ .hero__facts{ grid-template-columns:repeat(2,1fr); gap:1.5rem 1rem; } }

/* rotierendes Störer-Badge */
.stoerer{
  position:absolute; right:var(--pad); top:clamp(6rem,16vh,11rem); z-index:3;
  width:clamp(112px,13vw,168px); aspect-ratio:1;
  display:grid; place-items:center; color:var(--cream); isolation:isolate;
}
/* weicher Abdunkler, damit der Kreistext auch ueber hellem Himmel liest */
.stoerer::before{
  content:""; position:absolute; inset:-22%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(16,18,24,.62) 38%, rgba(16,18,24,.28) 62%, transparent 74%);
}
.stoerer__ring{ position:absolute; inset:0; animation:spin 26s linear infinite; }
.stoerer__ring text{ font:600 7.4px var(--sans); letter-spacing:0; text-transform:uppercase; fill:#f0d5ac; }
.stoerer__core{
  position:relative; width:58%; aspect-ratio:1; border-radius:50%;
  background:rgba(191,146,84,.14); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(220,183,131,.45);
  display:grid; place-items:center; transition:transform .6s var(--e-out), background .4s;
}
.stoerer:hover .stoerer__core{ transform:scale(1.1); background:rgba(191,146,84,.3); }
.stoerer__core svg{ width:32%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width:860px){ .stoerer{ display:none; } }

.scroll-cue{
  position:absolute; right:calc(var(--pad) * .38); top:50%; transform:translateY(-50%);
  display:grid; justify-items:center; gap:1rem; z-index:3; writing-mode:vertical-rl;
  font:var(--t-eyebrow); letter-spacing:.28em; text-transform:uppercase; color:rgba(247,244,239,.42);
}
.scroll-cue i{ display:block; width:1px; height:64px; background:rgba(247,244,239,.25); position:relative; overflow:hidden; }
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  animation:cue 2.1s var(--e-io) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (max-width:1180px){ .scroll-cue{ display:none; } }

/* ---------- 12. Marquee -------------------------------------------------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--rule);
  padding-block:clamp(1rem,2vw,1.7rem); background:var(--ink-3); color:var(--cream);
  --rule:rgba(247,244,239,.14);
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  display:inline-flex; align-items:center; gap:clamp(1.5rem,3vw,3rem);
  padding-inline:clamp(.75rem,1.5vw,1.5rem);
  font:300 clamp(1.1rem,2.4vw,2.1rem)/1 var(--serif); letter-spacing:.02em; white-space:nowrap;
}
.marquee__track span::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 13. Section-Head --------------------------------------------- */
.shead{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.shead--split{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:end; }
@media (max-width:900px){ .shead--split{ grid-template-columns:1fr; } }
.shead__idx{
  font:var(--t-eyebrow); letter-spacing:.2em; color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}

/* ---------- 14. Sticky-Stack (Qualität) ---------------------------------- */
.stack{ display:grid; gap:clamp(1rem,2vw,1.5rem); }
.stack__item{ position:sticky; top:calc(var(--header-h) + clamp(1rem,4vh,3rem)); }
.stack__card{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--ink-3); color:var(--cream); border-radius:3px; overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(12,13,17,.75), inset 0 0 0 1px rgba(247,244,239,.08);
  min-height:clamp(320px,52vh,520px);
  transition:transform .8s var(--e-out);
}
.stack__item:nth-child(1) .stack__card{ background:#262933; }
.stack__item:nth-child(2) .stack__card{ background:#2c2f3a; }
.stack__item:nth-child(3) .stack__card{ background:#333641; }
.stack__item:nth-child(4) .stack__card{ background:#3a3d49; }
.stack__body{ padding:clamp(1.75rem,3.4vw,3.5rem); display:flex; flex-direction:column; gap:1.15rem; justify-content:center; }
.stack__body h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.7rem); line-height:1.04; }
.stack__body p{ color:rgba(247,244,239,.66); max-width:44ch; }
.stack__n{ font:var(--t-eyebrow); letter-spacing:.24em; color:var(--gold); }
.stack__media{ position:relative; overflow:hidden; }
.stack__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e-out); }
.stack__card:hover .stack__media img{ transform:scale(1.06); }
.stack__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.tag{
  font:500 .66rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  padding:.55em .9em; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(247,244,239,.2);
  color:rgba(247,244,239,.75);
}
@media (max-width:900px){
  .stack__card{ grid-template-columns:1fr; }
  .stack__media{ min-height:220px; order:-1; }
  .stack__item{ position:static; }
}

/* ---------- 15. Kennzahlen ----------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); }
.stats > div{ background:var(--bg); padding:clamp(1.75rem,3.4vw,3rem) clamp(1rem,2vw,2rem); }
.stats b{
  display:block; font:300 clamp(2.4rem,5.6vw,4.6rem)/.9 var(--serif);
  letter-spacing:-.02em; color:var(--fg);
}
.stats b i{ font-style:normal; font-size:.42em; color:var(--gold); margin-left:.15em; letter-spacing:0; }
.stats > div > span{ display:block; margin-top:.9rem; font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); }
.stats b > span{ display:inline; font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 16. Split-Feature -------------------------------------------- */
.feature{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); align-items:center; }
.feature__media{ grid-column:span 6; }
.feature__body{ grid-column:8 / span 5; display:grid; gap:1.5rem; align-content:center; }
.feature--rev .feature__media{ grid-column:7/13; }
.feature--rev .feature__body{ grid-column:1 / span 5; }
@media (max-width:960px){
  .feature__media,.feature__body,.feature--rev .feature__media,.feature--rev .feature__body{ grid-column:1/-1; }
  .feature--rev .feature__media{ order:-1; }
}
.ratio{ position:relative; overflow:hidden; background:var(--cream-2); }
.ratio > img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.r-43{ aspect-ratio:4/3; } .r-11{ aspect-ratio:1; } .r-169{ aspect-ratio:16/9; }
.r-32{ aspect-ratio:3/2; } .r-45{ aspect-ratio:4/5; } .r-var{ aspect-ratio:16/11; }

.cap{ margin-top:.9rem; display:flex; justify-content:space-between; gap:1rem; font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); }

/* ---------- 17. Projekt-Karten ------------------------------------------- */
.pcard{
  position:relative; display:block; background:var(--ink-3); color:var(--cream);
  overflow:hidden; border-radius:3px; isolation:isolate;
  transform-style:preserve-3d; transition:box-shadow .6s var(--e-out);
}
.pcard:hover{ box-shadow:0 50px 90px -45px rgba(12,13,17,.6); }
.pcard__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--e-out), filter .8s; }
.pcard:hover .pcard__media img{ transform:scale(1.07); }
.pcard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,13,17,.35) 0%,transparent 34%,rgba(12,13,17,.9) 100%);
}
.pcard__body{ position:absolute; inset:auto 0 0; padding:clamp(1.25rem,2.4vw,2.1rem); z-index:2; display:grid; gap:.6rem; }
.pcard__body h3{ font:300 clamp(1.4rem,2.4vw,2.2rem)/1.05 var(--serif); }
.pcard__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:rgba(247,244,239,.62); }
.chip{
  position:absolute; top:clamp(1rem,2vw,1.6rem); left:clamp(1rem,2vw,1.6rem); z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  font:600 .64rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  padding:.6em 1em; border-radius:999px;
  background:rgba(12,13,17,.55); backdrop-filter:blur(8px); color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(247,244,239,.2);
}
.chip--live{ background:rgba(191,146,84,.9); color:var(--ink); box-shadow:none; }
.chip__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }

/* ---------- 18. Drag-Galerie --------------------------------------------- */
.drag{
  display:flex; gap:clamp(.75rem,1.5vw,1.25rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.5rem; cursor:grab; scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
  -webkit-overflow-scrolling:touch;
}
.drag.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.drag.is-dragging *{ pointer-events:none; }
.drag::-webkit-scrollbar{ height:3px; }
.drag::-webkit-scrollbar-track{ background:var(--rule); }
.drag::-webkit-scrollbar-thumb{ background:var(--gold); }
.drag > figure{ flex:0 0 auto; width:clamp(280px,42vw,620px); scroll-snap-align:start; margin:0; }
.drag > figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.drag > figure figcaption{ margin-top:.8rem; font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); }
.drag-hint{ display:flex; align-items:center; gap:.6rem; font:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); }

/* ---------- 19. Faktenraster --------------------------------------------- */
.facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); }
.facts > div{ background:var(--bg); padding:clamp(1.25rem,2.4vw,2rem); display:grid; gap:.7rem; align-content:start; }
.facts dt{ font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.facts dd{ margin:0; font:300 clamp(1.05rem,1.7vw,1.45rem)/1.25 var(--serif); }
@media (max-width:1000px){ .facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .facts{ grid-template-columns:1fr; } }

/* ---------- 20. Tabelle -------------------------------------------------- */
.tbl{ width:100%; font-size:.95rem; }
.tbl th,.tbl td{ text-align:left; padding:1.15rem 1rem; border-bottom:1px solid var(--rule); vertical-align:middle; }
.tbl th{ font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); font-weight:500; }
.tbl tbody tr{ transition:background .35s; }
.tbl tbody tr:hover{ background:rgba(191,146,84,.07); }
.tbl td:first-child{ font-family:var(--serif); font-size:1.3rem; font-weight:400; }
.tbl .st{ display:inline-flex; align-items:center; gap:.5em; font:600 .66rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dk); }
.tbl .st::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tbl-wrap{ overflow-x:auto; }
@media (max-width:700px){ .tbl{ min-width:560px; } }

/* ---------- 21. Timeline ------------------------------------------------- */
.tl{ position:relative; padding-left:clamp(1.75rem,4vw,3.5rem); }
.tl::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:1px; background:var(--rule);
}
.tl__fill{
  position:absolute; left:0; top:.6rem; width:1px; background:var(--gold);
  height:0; transition:height 1.6s var(--e-out);
}
.tl li{ position:relative; padding-block:clamp(1rem,2vw,1.6rem); }
.tl li::before{
  content:""; position:absolute; left:calc(-1 * clamp(1.75rem,4vw,3.5rem) - 4px); top:calc(clamp(1rem,2vw,1.6rem) + .55em);
  width:9px; height:9px; border-radius:50%; background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--gold); transition:background .5s;
}
.tl li.is-done::before{ background:var(--gold); }
.tl h4{ font:300 clamp(1.15rem,1.9vw,1.6rem)/1.2 var(--serif); }
.tl time{ display:block; font:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem; }
.tl p{ color:var(--fg-soft); max-width:52ch; margin-top:.4rem; }

.tl-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.tl-split__media{ position:sticky; top:calc(var(--header-h) + 2rem); }
@media (max-width:960px){ .tl-split{ grid-template-columns:1fr; } .tl-split__media{ position:static; order:-1; } }

/* ---------- 22. Akkordeon ------------------------------------------------ */
.acc{ border-top:1px solid var(--rule); }
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__btn{
  width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(1rem,2.5vw,2.5rem);
  align-items:center; text-align:left; padding:clamp(1.4rem,2.6vw,2.2rem) 0;
  transition:color .4s;
}
.acc__btn:hover{ color:var(--gold); }
.acc__n{ font:var(--t-eyebrow); letter-spacing:.2em; color:var(--gold); font-variant-numeric:tabular-nums; padding-top:.35em; }
.acc__q{ font:300 clamp(1.15rem,2.1vw,1.85rem)/1.22 var(--serif); text-wrap:balance; }
.acc__ic{ position:relative; width:34px; height:34px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--rule); flex:none; transition:box-shadow .4s, background .4s, transform .6s var(--e-out); }
.acc__ic::before,.acc__ic::after{
  content:""; position:absolute; inset:50% auto auto 50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .5s var(--e-io), opacity .3s;
}
.acc__ic::before{ width:12px; height:1px; }
.acc__ic::after{ width:1px; height:12px; }
.acc__btn:hover .acc__ic{ box-shadow:inset 0 0 0 1px var(--gold); }
.acc__item.is-open .acc__ic{ background:var(--gold); color:var(--ink); transform:rotate(180deg); box-shadow:none; }
.acc__item.is-open .acc__ic::after{ opacity:0; }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .65s var(--e-io); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__content{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(1.5rem,3vw,3.5rem);
  padding:0 0 clamp(1.75rem,3vw,2.75rem) 0;
  padding-left:calc(clamp(1rem,2.5vw,2.5rem) + 3.2ch);
  opacity:0; transform:translateY(14px); transition:opacity .6s .1s, transform .7s var(--e-out) .1s;
}
.acc__item.is-open .acc__content{ opacity:1; transform:none; }
.acc__content p + p{ margin-top:1rem; }
.acc__aside{
  align-self:start; padding:clamp(1.15rem,2vw,1.6rem);
  background:rgba(191,146,84,.09); border-left:2px solid var(--gold); border-radius:0 3px 3px 0;
}
.acc__aside b{ display:block; font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:.6rem; }
.acc__aside p, .acc__aside li{ font-size:.9rem; line-height:1.62; color:var(--fg-soft); }
.acc__aside li{ padding-left:1.1rem; position:relative; }
.acc__aside li + li{ margin-top:.55rem; }
.acc__aside li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
@media (max-width:900px){
  .acc__content{ grid-template-columns:1fr; padding-left:0; }
  .acc__btn{ grid-template-columns:auto minmax(0,1fr) auto; }
}

/* ---------- 23. MaBV-Ratenbalken ----------------------------------------- */
.raten{ display:grid; gap:1.25rem; }
.raten__bar{
  display:flex; width:100%; height:clamp(58px,7vw,86px); border-radius:3px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--rule); background:rgba(247,244,239,.05);
}
.raten__seg{
  position:relative; flex-grow:0; flex-shrink:0; flex-basis:0%;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:inset -1px 0 0 rgba(12,13,17,.28);
  transition:flex-basis 1.1s var(--e-out), filter .35s, transform .35s;
  transform-origin:50% 100%;
  cursor:default;
}
.raten__seg:nth-child(even){ background:linear-gradient(180deg,var(--gold),var(--gold-dk)); }
.raten.is-in .raten__seg{ flex-basis:var(--w); }
.raten__seg:hover{ filter:brightness(1.22); transform:scaleY(1.08); z-index:2; }
.raten__seg::after{
  content:attr(data-p); position:absolute; left:0; right:0; bottom:.55rem;
  text-align:center; font:600 .62rem/1 var(--sans); letter-spacing:.02em;
  color:rgba(12,13,17,.62); opacity:0; transition:opacity .5s ease .9s;
  pointer-events:none;
}
.raten.is-in .raten__seg::after{ opacity:1; }
.raten__seg > span{
  position:absolute; inset:auto auto calc(100% + 12px) 50%; transform:translateX(-50%) translateY(6px);
  background:var(--ink); color:var(--cream); padding:.6rem .85rem; border-radius:3px;
  font:500 .7rem/1.4 var(--sans); letter-spacing:.02em; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--e-out); z-index:5;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
}
.raten__seg > span b{ color:var(--gold-lt); }
.raten__seg:hover > span{ opacity:1; transform:translateX(-50%) translateY(0); }
.raten__scale{ display:flex; justify-content:space-between; font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); }
.raten__legend{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.55rem 1.5rem; margin-top:.5rem; }
.raten__legend li{ display:flex; gap:.7rem; align-items:baseline; font-size:.855rem; color:var(--fg-soft); }
.raten__legend b{ color:var(--gold); font-variant-numeric:tabular-nums; min-width:3.6ch; flex:none; font-weight:600; }
@media (max-width:760px){ .raten__seg::after{ display:none; } }
@media (max-width:700px){ .raten__bar{ height:44px; } }

/* ---------- 24. Sicherheitskette ----------------------------------------- */
.chain{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); }
.chain__step{ background:var(--bg); padding:clamp(1.5rem,2.8vw,2.4rem); display:grid; gap:1rem; align-content:start; position:relative; }
.chain__num{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold);
  font:var(--t-eyebrow); letter-spacing:.1em;
  transition:background .6s var(--e-out), color .6s var(--e-out);
}
.chain__step.is-in .chain__num{ background:var(--gold); color:var(--ink); }
.chain__step h4{ font:300 clamp(1.1rem,1.7vw,1.45rem)/1.2 var(--serif); }
.chain__step p{ font-size:.9rem; color:var(--fg-soft); }
.chain__step cite{ font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); font-style:normal; }
@media (max-width:1000px){ .chain{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .chain{ grid-template-columns:1fr; } }

/* ---------- 25. Zitat ---------------------------------------------------- */
.quote{ display:grid; gap:clamp(1.75rem,3vw,2.5rem); max-width:26ch; }
.quote blockquote{ font:300 clamp(1.6rem,3.6vw,3.2rem)/1.12 var(--serif); letter-spacing:-.015em; max-width:20ch; }
.quote blockquote::before{ content:"„"; color:var(--gold); }
.quote blockquote::after{ content:"“"; color:var(--gold); }
.quote figcaption{ display:flex; align-items:center; gap:1rem; }
.quote figcaption > span{ display:grid; gap:0; }
.quote figcaption b{ display:block; font:500 .95rem/1.3 var(--sans); }
.quote figcaption span{ display:block; font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); margin-top:.3rem; }
.sigmark{ width:52px; height:52px; flex:none; }

/* ---------- 26. Formular ------------------------------------------------- */
.form{ display:grid; gap:1.5rem; }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.field{ position:relative; }
.field input,.field textarea,.field select{
  width:100%; padding:1.4rem 0 .7rem; background:none; border:0;
  border-bottom:1px solid var(--rule); color:var(--fg); font:400 1rem/1.5 var(--sans);
  border-radius:0; transition:border-color .4s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field label{
  position:absolute; left:0; top:1.35rem; pointer-events:none;
  font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint);
  transition:transform .4s var(--e-out), color .4s;
  transform-origin:0 50%;
}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.25rem) scale(.88); color:var(--gold);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold); }
.field__line{ position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-io); }
.field input:focus ~ .field__line,.field textarea:focus ~ .field__line{ transform:scaleX(1); }
.check{ display:flex; gap:.85rem; align-items:flex-start; font-size:.82rem; color:var(--fg-soft); line-height:1.55; }
.check input{ margin-top:.2rem; accent-color:var(--gold); width:16px; height:16px; flex:none; }
.check a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

/* ---------- 27. Kontakt-Liste -------------------------------------------- */
.clist{ display:grid; gap:0; }
.clist a,.clist div{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.5rem; align-items:center;
  padding:1.35rem 0; border-bottom:1px solid var(--rule); transition:padding-left .5s var(--e-out), color .4s;
}
.clist a:hover{ padding-left:.85rem; color:var(--gold); }
.clist dt,.clist .k{ font:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); min-width:9ch; }
.clist .v{ font:300 clamp(1.05rem,1.7vw,1.4rem)/1.3 var(--serif); }
.clist .arw{ opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .5s var(--e-out); color:var(--gold); }
.clist a:hover .arw{ opacity:1; transform:none; }

/* ---------- 28. CTA-Band ------------------------------------------------- */
.band{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream); isolation:isolate; }
.band__bg{ position:absolute; inset:0; z-index:-2; }
.band__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 120% at 50% 120%, rgba(191,146,84,.3), transparent 60%);
}
.band__in{ padding-block:clamp(4.5rem,10vw,9rem); display:grid; gap:2rem; justify-items:center; text-align:center; }
.band__in h2{ max-width:18ch; }

/* ---------- 29. Footer --------------------------------------------------- */
.ftr{ background:var(--ink); color:var(--cream); --rule:rgba(247,244,239,.13); --fg-faint:rgba(247,244,239,.42); --fg-soft:rgba(247,244,239,.62); }
.ftr__top{ padding-block:clamp(3.5rem,7vw,6rem); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); }
.ftr__brand{ display:grid; gap:1.5rem; align-content:start; }
.ftr__brand p{ color:rgba(247,244,239,.6); max-width:34ch; }
.ftr__col{ display:grid; gap:1rem; align-content:start; }
/* explizite Spalten – nth-of-type zählt je Elementtyp und platziert sonst falsch */
.ftr__top > *:nth-child(1){ grid-column:1 / span 4; }
.ftr__top > *:nth-child(2){ grid-column:6 / span 2; }
.ftr__top > *:nth-child(3){ grid-column:8 / span 2; }
.ftr__top > *:nth-child(4){ grid-column:10 / span 3; }
.ftr__col h4{ font:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.ftr__col a{ font-size:.925rem; color:rgba(247,244,239,.68); transition:color .35s, transform .4s var(--e-out); display:inline-block; }
.ftr__col a:hover{ color:var(--gold-lt); transform:translateX(3px); }
.ftr__addr{ display:grid; gap:1rem; align-content:start; }
.ftr__big{
  padding-block:clamp(2rem,5vw,4rem); border-top:1px solid var(--rule);
  font:300 clamp(2.6rem,13vw,11rem)/.86 var(--serif); letter-spacing:-.03em;
  color:rgba(247,244,239,.09); text-align:center; user-select:none; white-space:nowrap; overflow:hidden;
}
.ftr__bot{
  padding-block:1.75rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; align-items:center;
  font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:rgba(247,244,239,.42);
}
.ftr__bot a:hover{ color:var(--gold); }
@media (max-width:1000px){
  .ftr__top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr__top > *:nth-child(1){ grid-column:1 / -1; }
  .ftr__top > *:nth-child(2),.ftr__top > *:nth-child(3),.ftr__top > *:nth-child(4){ grid-column:auto; }
}
@media (max-width:620px){
  .ftr__top{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- 30. Lightbox ------------------------------------------------- */
.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(8,9,12,.96); padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s;
}
.lb.is-open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:82vh; object-fit:contain; transform:scale(.96); transition:transform .6s var(--e-out); background:none; }
.lb.is-open img{ transform:none; }
.lb__cap{ position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2rem); text-align:center; color:rgba(247,244,239,.6); font:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; }
.lb__x,.lb__nav{
  position:absolute; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(247,244,239,.25); color:var(--cream); transition:background .4s, color .4s, box-shadow .4s;
}
.lb__x:hover,.lb__nav:hover{ background:var(--gold); color:var(--ink); box-shadow:none; }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__nav--p{ left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb__nav--n{ right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
[data-lb]{ cursor:zoom-in; }

/* ---------- 31. Divers --------------------------------------------------- */
.rule{ height:1px; background:var(--rule); border:0; margin:0; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  font:500 .7rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  padding:.75em 1.15em; border-radius:999px; box-shadow:inset 0 0 0 1px var(--rule);
  color:var(--fg-soft); transition:box-shadow .4s, color .4s, background .4s;
}
.pill:hover,.pill.is-on{ box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold); }
.pill.is-on{ background:var(--gold); color:var(--ink); box-shadow:none; }

.note{
  display:grid; gap:.6rem; padding:clamp(1rem,2vw,1.5rem);
  border:1px dashed var(--rule); border-radius:3px; font-size:.82rem; color:var(--fg-faint); line-height:1.6;
}
.note b{ color:var(--fg-soft); font-weight:500; }

.ilist{ display:grid; gap:.85rem; }
.ilist li{ position:relative; padding-left:1.6rem; color:var(--fg-soft); }
.ilist li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-left:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(-45deg) translateY(-1px);
}

.hair{ display:grid; gap:0; }
.hair > * { padding-block:1.15rem; border-bottom:1px solid var(--rule); }
.hair > *:first-child{ border-top:1px solid var(--rule); }

.parallax{ will-change:transform; }

/* Seitenübergang läuft über .trans (JS) — siehe Abschnitt 34 */

/* ---------- 32. Reduced Motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .rv-img > img{ clip-path:none !important; transform:none !important; }
  .split .wd{ transform:none !important; }
  .grain,.scroll-cue,.stoerer__ring{ display:none; }
  .raten__seg{ flex-basis:var(--w) !important; }
  @view-transition{ navigation:none; }
}

/* ---------- 33. Print ---------------------------------------------------- */
@media print{
  .hdr,.menu,.cursor,.cursor-ring,.grain,.progress,.pre,.scroll-cue,.stoerer{ display:none !important; }
  body{ background:#fff; color:#000; }
  .zone-dark,.band,.ftr{ background:#fff !important; color:#000 !important; }
}

/* ==========================================================================
   34. MOTION ENGINE v2 — neue Effekte
   ========================================================================== */

/* ---- Preloader v2 -------------------------------------------------------- */
.pre__words{ position:relative; height:1.6em; overflow:hidden; margin-top:1.5rem; }
.pre__word{
  position:absolute; inset:0; display:grid; place-items:center;
  font:var(--t-eyebrow); letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(60%); transition:opacity .35s, transform .45s var(--e-out);
}
.pre__word.is-on{ opacity:1; transform:none; }
.pre__bar{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .25s linear;
}
.pre__curtain i{ transition-delay:0ms; }
.pre.is-done .pre__curtain i:nth-child(1){ animation-delay:0ms }
.pre.is-done .pre__curtain i:nth-child(2){ animation-delay:70ms }
.pre.is-done .pre__curtain i:nth-child(3){ animation-delay:140ms }
.pre.is-done .pre__curtain i:nth-child(4){ animation-delay:210ms }
.pre.is-done .pre__curtain i:nth-child(5){ animation-delay:280ms }

/* ---- Cursor-Label -------------------------------------------------------- */
.cursor-label{
  position:fixed; top:0; left:0; z-index:191; pointer-events:none;
  transform:translate3d(-50%,-50%,0); opacity:0;
  font:600 .58rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); transition:opacity .3s;
}
.cursor-ring.has-label ~ .cursor-label{ opacity:0; }
.cursor-ring.is-press{ transform-origin:50% 50%; }
.cursor-ring.is-press::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:rgba(220,183,131,.35); }
@media (hover:none),(pointer:coarse){ .cursor-label{ display:none; } }

/* ---- Sektions-Rail ------------------------------------------------------- */
.rail{
  position:fixed; right:calc(var(--pad) * .34); top:50%; transform:translateY(-50%);
  z-index:150; display:grid; gap:1rem; opacity:0; pointer-events:none;
  transition:opacity .5s var(--e-out);
}
.rail.is-vis{ opacity:1; pointer-events:auto; }
.rail__dot{ display:flex; align-items:center; justify-content:flex-end; gap:.75rem; }
.rail__dot i{
  width:8px; height:8px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(191,146,84,.55); background:transparent;
  transition:background .45s var(--e-out), transform .45s var(--e-out), box-shadow .45s;
}
.rail__dot span{
  font:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
  opacity:0; transform:translateX(8px); transition:opacity .4s, transform .5s var(--e-out);
}
.rail__dot:hover span{ opacity:1; transform:none; }
.rail__dot.is-on i{ background:var(--gold); transform:scale(1.45); box-shadow:0 0 0 4px rgba(191,146,84,.18); }
@media (max-width:1280px){ .rail{ display:none; } }

/* ---- Zeichen-Reveal ------------------------------------------------------- */
.chars{ display:block; }
.cw{ display:inline-block; white-space:nowrap; }
.js .ch{
  display:inline-block; opacity:0; transform:translateY(.5em) rotateX(-70deg);
  transform-origin:50% 100%;
  transition:opacity .7s var(--e-out), transform .9s var(--e-out);
}
.chars.is-in .ch{ opacity:1; transform:none; }

/* ---- Slice-Bildreveal ----------------------------------------------------- */
.slice{ position:relative; overflow:hidden; }
.slice__mask{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.slice__mask i{
  position:absolute; top:0; height:100%; background:var(--bg);
  transform:scaleY(1); transform-origin:50% 100%;
  transition:transform 1.05s var(--e-io);
}
.slice.is-in .slice__mask i{ transform:scaleY(0); }
.zone-dark .slice__mask i,.band .slice__mask i,.ftr .slice__mask i{ background:var(--ink); }
.zone-navy .slice__mask i{ background:var(--ink-3); }
.zone-cream2 .slice__mask i{ background:var(--cream-2); }
.zone-paper .slice__mask i{ background:var(--paper); }

/* ---- Stagger-Container ---------------------------------------------------- */
.js [data-stagger] > *{
  opacity:0; transform:translateY(34px);
  transition:opacity .85s var(--e-out), transform 1s var(--e-out);
}
[data-stagger] > *.is-in{ opacity:1; transform:none; }

/* ---- Gepinnte Horizontal-Galerie ------------------------------------------ */
.pin{ position:relative; }
.pin__stage{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
}
.pin.is-off .pin__stage{ position:static; height:auto; overflow:visible; padding-block:2rem; }
.pin__head{
  padding-inline:var(--pad); display:flex; justify-content:space-between;
  align-items:flex-end; gap:2rem; margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.pin__track{
  display:flex; gap:clamp(1rem,2vw,2rem); padding-inline:var(--pad);
  will-change:transform; align-items:stretch;
}
.pin.is-off .pin__track{
  flex-wrap:wrap; transform:none !important;
}
.pin__card{ flex:0 0 auto; width:clamp(260px,32vw,460px); display:grid; gap:1rem; align-content:start; }
.pin.is-off .pin__card{ width:100%; }
.pin__card figure{ margin:0; position:relative; overflow:hidden; aspect-ratio:4/5; }
.pin__card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e-out); }
.pin__card:hover img{ transform:scale(1.06); }
.pin__n{ font:var(--t-eyebrow); letter-spacing:.22em; color:var(--gold); }
.pin__card h3{ font:300 clamp(1.25rem,2vw,1.8rem)/1.1 var(--serif); }
.pin__card p{ font-size:.9rem; color:var(--fg-soft); max-width:38ch; }
.pin__bar{
  margin-top:clamp(1.5rem,3vw,2.5rem); margin-inline:var(--pad);
  height:1px; background:var(--rule); position:relative; overflow:hidden;
}
.pin__bar i{
  position:absolute; inset:0; background:var(--gold);
  transform:scaleX(0); transform-origin:0 50%;
}
.pin.is-off .pin__bar{ display:none; }

/* ---- Odometer ------------------------------------------------------------- */
/* Die Walzenfenster brauchen mehr Hoehe als 1em: Ober- und Unterlaenge der
   Cormorant-Ziffern ragen sonst aus ihrer Zelle und die Nachbarziffer blitzt
   als Strich am Rand durch. 1.32em plus zentrierte Glyphen loest das. */
.odo{ display:inline-flex; align-items:baseline; }
.odo__col{
  display:inline-block; height:1.32em; overflow:hidden;
  line-height:1.32em; vertical-align:baseline; margin-bottom:-.24em;
}
.odo__reel{ display:block; transform:translateY(0); transition:transform 1.5s var(--e-out); }
.odo__reel > span{
  display:flex; align-items:center; justify-content:center;
  height:1.32em; line-height:1;
}
.odo__sep{ display:inline-block; }

/* ---- Spotlight ------------------------------------------------------------ */
.has-spot{ position:relative; isolation:isolate; }
.has-spot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(191,146,84,.16), transparent 65%);
  opacity:0; transition:opacity .6s var(--e-out);
}
.has-spot:hover::before{ opacity:1; }
.has-spot > *{ position:relative; z-index:1; }

/* ---- Glanz auf Tilt-Karten ------------------------------------------------ */
.sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),
             rgba(255,255,255,.15), transparent 60%);
  opacity:0; transition:opacity .5s var(--e-out);
}
[data-tilt]:hover .sheen{ opacity:1; }

/* ---- Schwebende Bildvorschau (Listen + Menü) ------------------------------ */
.rowimg,.menu__prev{
  position:fixed; top:0; left:0; z-index:178; pointer-events:none;
  width:clamp(200px,20vw,320px); aspect-ratio:4/5; overflow:hidden; border-radius:3px;
  opacity:0; transition:opacity .45s var(--e-out);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
.rowimg img,.menu__prev img{ width:100%; height:100%; object-fit:cover; }
.rowimg.is-on,.menu__prev.is-on{ opacity:1; }
.menu__prev{ z-index:178; }
@media (max-width:1180px){ .rowimg,.menu__prev{ display:none; } }

/* Zeilenliste mit Hover-Bild */
.rows{ border-top:1px solid var(--rule); }
.rows li{ border-bottom:1px solid var(--rule); }
.rows a,.rows > li > div{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(1rem,3vw,3rem);
  align-items:baseline; padding:clamp(1.25rem,2.6vw,2rem) 0;
  transition:padding-left .55s var(--e-out), color .4s;
}
.rows a:hover{ padding-left:1.25rem; color:var(--gold); }
.rows .rows__n{ font:var(--t-eyebrow); letter-spacing:.2em; color:var(--gold); }
.rows .rows__t{ font:300 clamp(1.3rem,2.6vw,2.3rem)/1.1 var(--serif); }
.rows .rows__m{ font:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); white-space:nowrap; }

/* ---- Hero: Bildversatz per Cursor ----------------------------------------- */
[data-heromouse] img{
  transform:scale(1.12) translate3d(var(--hx,0),var(--hy,0),0);
  transition:transform .1s linear;
}
.is-ready [data-heromouse] img{ animation:none; opacity:1; transform:scale(1.06) translate3d(var(--hx,0),var(--hy,0),0); }

/* ---- Marquee: Geschwindigkeit folgt dem Scrollen -------------------------- */
.marquee__track{ animation-duration:calc(42s / var(--mq-boost, 1)); }

/* ---- Seitenübergang ------------------------------------------------------- */
.trans{
  position:fixed; inset:0; z-index:205; pointer-events:none; display:flex;
}
.trans i{
  flex:1; background:var(--ink); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .55s var(--e-io);
}
.trans.is-out{ pointer-events:all; }
.trans.is-out i{ transform:scaleY(1); }
.trans.is-out i:nth-child(1){ transition-delay:0ms }
.trans.is-out i:nth-child(2){ transition-delay:55ms }
.trans.is-out i:nth-child(3){ transition-delay:110ms }
.trans.is-out i:nth-child(4){ transition-delay:165ms }
.trans.is-out i:nth-child(5){ transition-delay:220ms }
.trans__mark{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  opacity:0; transition:opacity .3s .25s;
}
.trans__mark img{ width:56px; height:56px; border-radius:50%; }
.trans.is-out .trans__mark{ opacity:1; }

/* Einblenden beim Laden */
.is-loaded main,.is-loaded .ftr{ animation:pageIn .8s var(--e-out) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---- Über-uns-Bausteine ---------------------------------------------------- */
.bio{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); align-items:start; }
.bio__media{ grid-column:1 / span 5; position:sticky; top:calc(var(--header-h) + 2rem); }
.bio__body{ grid-column:7 / span 6; display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (max-width:960px){
  .bio__media,.bio__body{ grid-column:1 / -1; }
  .bio__media{ position:static; }
}
.bio__lead{ font:300 clamp(1.35rem,2.4vw,2.1rem)/1.28 var(--serif); text-wrap:pretty; }

.steps{ counter-reset:st; display:grid; gap:0; }
.steps > li{
  counter-increment:st; position:relative; padding:clamp(1.25rem,2.4vw,1.9rem) 0 clamp(1.25rem,2.4vw,1.9rem) clamp(3rem,5vw,4.5rem);
  border-bottom:1px solid var(--rule);
}
.steps > li:first-child{ border-top:1px solid var(--rule); }
.steps > li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute; left:0; top:clamp(1.25rem,2.4vw,1.9rem);
  font:var(--t-eyebrow); letter-spacing:.2em; color:var(--gold);
}
.steps h4{ font:300 clamp(1.15rem,1.9vw,1.55rem)/1.2 var(--serif); margin-bottom:.5rem; }
.steps p{ color:var(--fg-soft); max-width:56ch; }

.creds{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); }
.creds > div{ background:var(--bg); padding:clamp(1.5rem,2.8vw,2.4rem); display:grid; gap:.75rem; align-content:start; }
.creds dt{ font:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.creds dd{ margin:0; font:300 clamp(1.5rem,3vw,2.4rem)/1 var(--serif); }
.creds small{ display:block; font-size:.82rem; color:var(--fg-faint); line-height:1.5; }
@media (max-width:820px){ .creds{ grid-template-columns:1fr; } }

/* Großes Zitat über die volle Breite */
.bigquote{ text-align:center; display:grid; gap:clamp(1.5rem,3vw,2.5rem); justify-items:center; }
.bigquote blockquote{
  font:300 clamp(1.7rem,4.6vw,4rem)/1.1 var(--serif); letter-spacing:-.02em;
  max-width:20ch; text-wrap:balance;
}
.bigquote blockquote em{ font-style:italic; color:var(--gold); }
.bigquote figcaption{ font:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); }

/* ---- Reduced Motion: alles Neue ebenfalls stilllegen ---------------------- */
@media (prefers-reduced-motion: reduce){
  .chars .ch,[data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .slice__mask{ display:none; }
  .pin__stage{ position:static; height:auto; overflow:visible; }
  .pin__track{ flex-wrap:wrap; transform:none !important; }
  .rail,.rowimg,.menu__prev,.trans{ display:none !important; }
  .has-spot::before{ display:none; }
  .is-loaded main,.is-loaded .ftr{ animation:none; }
  [data-heromouse] img{ transform:none !important; }
}

/* ---- Volle Wortmarke (heller Grund entfaellt, nur fuer dunkle Flaechen) ---- */
.brand--full{ display:block; }
.brand__logo{
  width:clamp(150px,14vw,208px); height:auto;
  transition:opacity .4s var(--e-out), transform .6s var(--e-out);
}
.brand--full:hover .brand__logo{ opacity:.85; transform:translateY(-2px); }

/* ==========================================================================
   35. COOKIE-BANNER
   Ablehnen ist gleich gross und gleich prominent wie Akzeptieren —
   ungleiche Gestaltung gilt als unwirksame Einwilligung.
   ========================================================================== */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  padding:clamp(.75rem,2vw,1.5rem);
  display:flex; justify-content:center;
  transform:translateY(120%); opacity:0;
  transition:transform .7s var(--e-out), opacity .5s ease;
}
.cc.is-on{ transform:none; opacity:1; }
.cc__box{
  width:100%; max-width:940px;
  background:rgba(23,25,33,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  color:var(--cream); border-radius:4px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(191,146,84,.28);
  padding:clamp(1.25rem,2.6vw,2rem);
  display:grid; gap:1.25rem;
}
.cc__h{ font:300 clamp(1.15rem,2vw,1.6rem)/1.15 var(--serif); color:var(--cream); }
.cc__t{ font-size:.9rem; line-height:1.62; color:rgba(250,248,244,.72); max-width:74ch; }

.cc__opts{ display:grid; gap:.85rem; padding-top:.5rem; border-top:1px solid rgba(250,248,244,.14); }
.cc__opts[hidden]{ display:none; }  /* sonst schlaegt display:grid das hidden-Attribut */
.cc__opt{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; cursor:pointer; }
.cc__opt input{ width:17px; height:17px; margin-top:.15rem; accent-color:var(--gold); flex:none; }
.cc__opt input:disabled{ opacity:.55; cursor:not-allowed; }
.cc__opt b{ display:block; font:600 .78rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.cc__opt span{ font-size:.85rem; line-height:1.55; color:rgba(250,248,244,.66); }

.cc__acts{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.cc__btn{
  flex:1 1 210px; min-height:52px; padding:.95em 1.4em; border-radius:999px;
  font:600 .76rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  transition:filter .3s, box-shadow .3s, background .3s, color .3s;
}
/* gleiche Groesse, gleiche Schrift, gleiches Gewicht — nur die Farbe unterscheidet */
.cc__btn--accept{ background:var(--gold); color:var(--ink); }
.cc__btn--accept:hover{ filter:brightness(1.08); }
.cc__btn--reject{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(250,248,244,.5); }
.cc__btn--reject:hover{ background:rgba(250,248,244,.1); box-shadow:inset 0 0 0 1px rgba(250,248,244,.75); }
.cc__btn--save{ background:transparent; color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.cc__btn--save:hover{ background:rgba(191,146,84,.14); }
.cc__more{
  flex:0 0 auto; padding:.95em .6em; color:rgba(250,248,244,.66);
  font:500 .76rem/1 var(--sans); letter-spacing:.1em; text-decoration:underline;
  text-underline-offset:3px;
}
.cc__more:hover{ color:var(--gold); }
.cc__legal{ font-size:.75rem; color:rgba(250,248,244,.44); }
.cc__legal a{ color:rgba(250,248,244,.66); text-decoration:underline; text-underline-offset:2px; }
.cc__legal a:hover{ color:var(--gold); }

@media (max-width:640px){
  .cc__btn{ flex:1 1 100%; }
  .cc__more{ flex:1 1 100%; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .cc{ transition:none; transform:none; }
}

/* ==========================================================================
   36. VIDEO
   preload="none" — es wird nichts geladen, bevor jemand auf Play drueckt.
   ========================================================================== */
.vid{ position:relative; margin:0; overflow:hidden; border-radius:3px; background:var(--ink); }
.vid video{ display:block; width:100%; height:auto; }
.vid--169 video{ aspect-ratio:16/9; object-fit:cover; }
.vid--916 video{ aspect-ratio:9/16; object-fit:cover; }
.vid__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(23,25,33,.25), rgba(23,25,33,.55));
  transition:opacity .45s var(--e-out), visibility .45s;
}
.vid.is-playing .vid__play{ opacity:0; visibility:hidden; }
.vid__play i{
  width:clamp(64px,7vw,88px); aspect-ratio:1; border-radius:50%;
  background:rgba(191,146,84,.92); display:grid; place-items:center;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
  transition:transform .5s var(--e-out), background .4s;
}
.vid__play i::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:20px solid var(--ink);
  border-top:13px solid transparent; border-bottom:13px solid transparent;
}
.vid__play:hover i{ transform:scale(1.09); background:var(--gold-lt); }
.vid__lbl{
  position:absolute; left:0; right:0; bottom:clamp(1rem,2.5vw,2rem); text-align:center;
  font:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(250,248,244,.82); pointer-events:none;
}
.vid__len{
  position:absolute; top:clamp(.75rem,2vw,1.25rem); right:clamp(.75rem,2vw,1.25rem);
  z-index:3; font:600 .66rem/1 var(--sans); letter-spacing:.14em;
  padding:.5em .8em; border-radius:999px;
  background:rgba(23,25,33,.6); color:var(--cream);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vid.is-playing .vid__len{ opacity:0; transition:opacity .3s; }

/* Kaufpreisspalte hervorheben */
.tbl td.pr{ font:500 1.0rem/1 var(--sans); letter-spacing:.01em; white-space:nowrap; color:var(--fg); }