/* ==========================================================================
   BB MAGIC – Bruno Bosco
   Design-System · Konzept "30 Zentimeter"
   ========================================================================== */

/* --- 1. TOKENS ---------------------------------------------------------- */
:root {
  /* Farben – Schweizer Reduktion.
     Kein Gold: Gold auf Schwarz ist die Standardpalette jedes Luxus-Templates.
     Stattdessen ein einziger Akzent, das Rot der Kartenfarben. */
  --c-black:      #0C0C0C;
  --c-surface:    #151513;
  --c-surface-hi: #1D1D1A;
  --c-gold:       #B4342F;   /* Akzent: Kartenrot (Variablenname historisch) */
  --c-gold-hi:    #D0453F;
  --c-red:        #B4342F;
  --c-text:       #EDEAE4;
  --c-text-dim:   #A5A099;
  --c-line:       #282825;
  --c-paper:      #EFECE5;
  --c-paper-text: #0C0C0C;

  /* Schrift */
  /* Die *-Fallback-Familien sind metrisch angeglichen (siehe fonts.css) und
     verhindern den Layout-Sprung beim Nachladen der Webfonts. */
  /* Eine Schriftfamilie für alles. Das ist die Entscheidung, die den Auftritt
     zusammenhält – keine Display/Body-Paarung, kein Serifen-Kontrast. */
  --f-display: Archivo, "Archivo Fallback", Helvetica, Arial, sans-serif;
  --f-body:    Archivo, "Archivo Fallback", Helvetica, Arial, sans-serif;

  /* Raster */
  --w-max:    1280px;
  --w-text:   68ch;
  --pad-x:    clamp(1.25rem, 5vw, 4rem);
  --sec-y:    clamp(6rem, 12vw, 12.5rem);

  /* Bewegung – nur drei Arten: Annähern, Aufdecken, Drehen */
  --e-out:    cubic-bezier(.2,.7,.3,1);
  --e-flip:   cubic-bezier(.4,0,.2,1);
  --t-micro:  .24s;
  --t-flip:   .52s;
  --t-reveal: .62s;
}

/* --- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* WICHTIG: kein `scroll-behavior: smooth` hier.
   Lenis setzt die Scrollposition pro Frame selbst; CSS-Smoothing macht daraus
   jeweils eine eigene Animation und blockiert das Scrollen praktisch komplett.
   Das weiche Scrollen liefert Lenis, die Reduced-Motion-Variante ist hart. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: clamp(1rem, .55vw + .9rem, 1.125rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
h1,h2,h3,h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; }
p { margin: 0 0 1.15em; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Fokus – immer sichtbar, immer gold */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screenreader-only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 999; background: var(--c-gold); color: var(--c-black);
  padding: .75rem 1.5rem; font-weight: 600; text-decoration: none;
  transition: transform var(--t-micro) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- 3. TYPOGRAFIE ------------------------------------------------------ */
.t-hero  { font-size: clamp(2.6rem, 8.5vw, 7rem);  font-weight: 600; line-height: .90; letter-spacing: -.048em; }
.t-h2    { font-size: clamp(2rem, 4.6vw, 3.9rem);   font-weight: 600; line-height: .98; letter-spacing: -.042em; }
.t-h3    { font-size: clamp(1.3rem, 2.1vw, 1.85rem); font-weight: 600; line-height: 1.16; letter-spacing: -.028em; }
.t-lead  { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 400; line-height: 1.45; letter-spacing: -.012em; color: var(--c-text); }
.t-label {
  font-family: var(--f-body); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .17em; color: var(--c-text-dim);
  margin: 0 0 1.75rem;
}
.t-num {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(4rem, 11vw, 11rem); line-height: .86;
  font-variant-numeric: tabular-nums; letter-spacing: -.055em;
}
.t-dim  { color: var(--c-text-dim); }
/* Nur fuer grosse Schrift verwenden (>= 24px bzw. 19px fett). */
.t-gold { color: var(--c-gold); }
.measure { max-width: var(--w-text); }
/* Die enge Zeilenhoehe der Ueberschriften (0.98) laesst kaum Unterlaenge —
   deshalb braucht der Folgeabsatz mehr Abstand als bei normaler Setzung. */
h2 + p, .t-h2 + p { margin-top: 1.9rem; }
h3 + p, .t-h3 + p { margin-top: 1.1rem; }
.steps h3 + p { margin-top: .5rem; }
h1 + p, .t-hero + p { margin-top: 2.1rem; }
h2 + .t-lead, .t-h2 + .t-lead { margin-top: 1.5rem; }

/* --- 4. LAYOUT ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--sec-y); position: relative; }
.section + .section { padding-top: calc(var(--sec-y) * .55); }
.section--paper { background: var(--c-paper); color: var(--c-paper-text); }
.section--paper .t-label { color: #6B6459; }
.section--paper .t-dim   { color: #5C564C; }

.grid-2 { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Goldfaden – Scroll-Fortschritt */
.thread {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--c-gold) 15%, var(--c-gold-hi) 50%, var(--c-gold) 85%, transparent);
  z-index: 90; pointer-events: none;
}

/* Kartenrücken-Textur – liegt über dunklen Flächen */
.texture::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Nur noch eine Ahnung von Struktur, kein Ornament. */
  background-image: url("../img/guilloche.svg");
  background-size: 300px;
  opacity: .012;
  mix-blend-mode: screen;
}

/* --- 5. BUTTONS --------------------------------------------------------- */
.btn {
  --btn-c: var(--c-text);
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.125rem 2.5rem; border: 1px solid var(--btn-c); border-radius: 2px;
  background: transparent; color: var(--btn-c);
  font-family: var(--f-body); font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--t-micro) var(--e-out);
}
/* Hover: Goldfläche füllt sich von unten nach oben */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-c); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .28s var(--e-out);
}
.btn:hover, .btn:focus-visible { color: var(--c-black); }
.btn--accent { --btn-c: var(--c-gold); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.section--paper .btn { --btn-c: #8A6A22; }
.section--paper .btn:hover { color: var(--c-paper); }

/* Sekundär: Textlink mit wachsender Unterlinie */
.link {
  position: relative; display: inline-block; text-decoration: none;
  color: var(--c-text); padding-bottom: .25rem;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--c-gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-micro) var(--e-out);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
/* Kleiner Text nie in Akzentrot: 3.24:1 reicht nur fuer grosse Schrift.
   Links tragen die Textfarbe, das Rot liegt in der Unterlinie. */
.link--gold { color: var(--c-text); }
.link--gold::after { background: var(--c-gold); height: 2px; }
.link--gold::after { transform: scaleX(1); transform-origin: 100% 50%; }
.link--gold:hover::after { transform: scaleX(0); }
.section--paper .link { color: var(--c-paper-text); }
.section--paper .link::after { background: #8A6A22; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 599px) { .cta-row { flex-direction: column; align-items: flex-start; } }

/* --- 6. HEADER ---------------------------------------------------------- */
.hdr {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 80;
  padding-block: 1.25rem;
  transition: background .4s var(--e-out), padding .4s var(--e-out), border-color .4s;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(11,11,13,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--c-line);
  padding-block: .75rem;
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hdr__mark {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text);
}
.hdr__mark svg { width: 34px; height: 34px; flex: none; }
.hdr__nav { display: none; gap: 2.25rem; align-items: center; }
@media (min-width: 1000px) { .hdr__nav { display: flex; } }
.hdr__nav a {
  text-decoration: none; font-size: .875rem; letter-spacing: .02em;
  color: var(--c-text); position: relative; padding-block: .25rem;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--c-gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-micro) var(--e-out);
}
.hdr__nav a:hover::after, .hdr__nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__nav a[aria-current="page"] { color: var(--c-text); }
.hdr__nav a[aria-current="page"]::after { background: var(--c-gold); height: 2px; }

/* Sprachumschalter – kleine Karte, die sich dreht */
.lang { perspective: 400px; }
.lang__card {
  display: flex; border: 1px solid var(--c-line); border-radius: 2px; overflow: hidden;
  transition: transform var(--t-flip) var(--e-flip);
  transform-style: preserve-3d;
}
.lang:hover .lang__card { transform: rotateY(-14deg); }
.lang a {
  padding: .45rem .7rem; font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--c-text-dim);
  transition: color var(--t-micro), background var(--t-micro);
}
.lang a[aria-current] { color: #FFFFFF; background: var(--c-gold); }
.lang a:not([aria-current]):hover { color: var(--c-gold); }

/* Mobiles Menü */
.burger {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span { display: block; width: 22px; height: 1px; background: var(--c-text); transition: transform .3s var(--e-out), opacity .3s; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 79; background: var(--c-black);
  display: grid; place-content: center; gap: 1.75rem; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--e-out), visibility .35s;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav a {
  font-family: var(--f-display); font-size: clamp(1.75rem, 7vw, 2.75rem);
  text-decoration: none; color: var(--c-text);
}
.mnav a:hover { color: var(--c-gold); }

/* --- 7. HERO ------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media canvas {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform, filter;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(11,11,13,.90) 0%, rgba(11,11,13,.62) 38%, rgba(11,11,13,.10) 68%, rgba(11,11,13,.35) 100%),
    linear-gradient(to top, var(--c-black) 0%, rgba(11,11,13,.30) 34%, transparent 62%);
}
.hero__in { position: relative; z-index: 2; padding-bottom: clamp(4.5rem, 11vh, 9rem); padding-top: 8rem; }
.hero__in h1 { max-width: 16ch; }
.hero .t-lead { max-width: 42ch; color: #DDD8CF; margin-top: 1.5rem; }
.hero .cta-row { margin-top: clamp(2rem, 4vw, 3rem); }

/* Scroll-Hinweis */
.hero__scroll {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: grid; justify-items: center; gap: .6rem;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-dim);
}
.hero__scroll i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--c-gold), transparent); }
/* Auf schmalen Schirmen ueberlagert der Hinweis den zweiten Link – und dort
   weiss ohnehin jeder, dass gescrollt wird. */
@media (max-width: 899px) { .hero__scroll { display: none; } }

/* --- 8. MASSBAND -------------------------------------------------------- */
.tape { position: relative; overflow: hidden; }
.tape__rail { position: relative; height: 1px; background: var(--c-line); margin-block: clamp(3rem, 7vw, 5.5rem); }
.tape__fill {
  position: absolute; inset: 0 auto 0 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-hi));
  transform: scaleX(0); transform-origin: 0 50%;
}
.tape__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.tape__ticks span {
  width: 1px; height: 11px; background: var(--c-line); transform: translateY(-5px);
}
.tape__ticks span:last-child { height: 24px; background: var(--c-gold); transform: translateY(-11px); }
.tape__read { display: flex; align-items: baseline; gap: .35rem; color: var(--c-gold); }
.tape__read small { font-family: var(--f-body); font-size: clamp(1rem,2vw,1.5rem); letter-spacing: .04em; }
.tape__ends {
  display: flex; justify-content: space-between;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim);
}
.tape__ends b:last-child { color: var(--c-gold); font-weight: 500; }
.tape__msg { margin-top: clamp(3rem, 6vw, 5rem); max-width: 46ch; }

/* --- 9. KARTEN ---------------------------------------------------------- */
.card {
  position: relative; aspect-ratio: 5 / 7; border-radius: 6px;
  perspective: 1200px; background: transparent; border: 0; padding: 0;
  cursor: pointer; text-align: left; color: inherit;
  display: block; width: 100%; text-decoration: none;
}
.card__inner {
  display: block; position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform var(--t-flip) var(--e-flip);
}
.card:hover .card__inner,
.card:focus-visible .card__inner,
.card.is-flipped .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 6px; border: 1px solid var(--c-line); overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, #17171C, #0E0E12);
}
.card__back { transform: rotateY(180deg); }

.card__front { padding: clamp(.9rem, 1.6vw, 1.35rem); justify-content: space-between; align-items: stretch; }
.card__front .card__title { margin-block: auto; }
.card__pip {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1;
  font-family: var(--f-display); color: var(--c-text);
}
.card__pip--red { color: var(--c-gold); }
.card__pip--gold { color: var(--c-gold); }
.card__pip:last-child { align-self: flex-end; transform: rotate(180deg); }
.card__title {
  font-family: var(--f-display); font-size: clamp(1rem, 1.55vw, 1.35rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.03em;
  text-align: center; padding-inline: .35rem;
}
.card__hint {
  font-size: .65rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-text-dim); text-align: center;
}
.card__back { padding: clamp(1rem, 1.8vw, 1.6rem); justify-content: center; gap: .85rem; }
.card__back p { font-size: clamp(.8rem, 1.05vw, .95rem); line-height: 1.6; color: #D8D3CA; margin: 0; }
.card__back strong { font-size: 1rem; color: var(--c-text); font-weight: 600; letter-spacing: -.02em; }

/* Karte mit Guilloche-Rückseite (Deck-Optik) */
.card--deck .card__face {
  background: linear-gradient(165deg, #1A1620, #0D0B11);
  border-color: rgba(198,162,92,.34);
  align-items: center; justify-content: center; gap: .75rem;
}
.card--deck .card__face::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198,162,92,.28); border-radius: 3px;
  background: url("../img/guilloche.svg") center / 120px; opacity: .3;
}
.card--deck .card__face > span { position: relative; z-index: 1; }

/* Fächer – horizontaler Scroll */
.fan { position: relative; }
.fan__viewport { position: relative; overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
.fan__track {
  display: flex; gap: clamp(1rem, 2.2vw, 2rem); align-items: center;
  padding-inline: var(--pad-x);
}
.fan__track > li { flex: 0 0 clamp(200px, 24vw, 290px); }
@media (max-width: 899px) {
  .fan__track {
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-block: .5rem;
  }
  .fan__track::-webkit-scrollbar { display: none; }
  .fan__track > li { flex: 0 0 min(68vw, 280px); scroll-snap-align: center; }
}
.fan__note {
  margin-top: clamp(3.5rem, 7vw, 6rem); max-width: 40ch;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.45; color: var(--c-text-dim);
}
.fan__note b { color: var(--c-text); font-weight: 500; font-style: normal; }

/* --- 10. DER TRICK ------------------------------------------------------ */
.trick { text-align: center; }
.trick__hand {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(.6rem, 1.6vw, 1.35rem);
  max-width: 720px; margin: clamp(2.5rem,5vw,4rem) auto 0;
}
@media (min-width: 720px) { .trick__hand { grid-template-columns: repeat(6, 1fr); max-width: 860px; } }
.trick__hand .card { cursor: default; }
.trick__hand .card:hover .card__inner { transform: none; }
.playing {
  position: relative; aspect-ratio: 5/7; border-radius: 5px;
  border: 1px solid rgba(237,234,228,.14);
  background: linear-gradient(168deg, #F3F0EA, #DAD5CB);
  color: #0C0C0C; display: grid; place-content: center; gap: .1rem;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.playing b {
  font-family: var(--f-display); font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 600; line-height: 1;
}
.playing i { font-style: normal; font-size: clamp(1.1rem, 2.6vw, 1.7rem); line-height: 1; }
.playing--red { color: #B4342F; }
.trick__note { margin-top: 2rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); }

/* --- 11. ANLASS-MORPH --------------------------------------------------- */
.morph { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.morph__stage { position: absolute; inset: 0; }
.morph__layer {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  will-change: opacity, transform;
}
.morph__layer:first-child { opacity: 1; }
.morph__stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,11,13,.93) 0%, rgba(11,11,13,.72) 46%, rgba(11,11,13,.42) 100%);
}
.morph__in { position: relative; z-index: 2; width: 100%; }
.morph__slot { position: relative; min-height: 13rem; }
.morph__item {
  position: absolute; inset: 0; opacity: 0; max-width: 34ch;
  transform: translateY(14px);
}
.morph__item:first-child { opacity: 1; transform: none; }
.morph__item h3 { margin-bottom: .85rem; }
.morph__dots { display: flex; gap: .55rem; margin-top: 2.5rem; }
.morph__dots i { width: 30px; height: 2px; background: var(--c-line); display: block; }
.morph__dots i.is-on { background: var(--c-gold); }

/* --- 12. ÜBER / STICKY -------------------------------------------------- */
.about__media { position: relative; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: var(--c-surface); }
@media (min-width: 900px) { .about__media { position: sticky; top: 6.5rem; } }
.about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--e-out); }
.about__media img.is-on { opacity: 1; }
.about__step { padding-block: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--c-line); }
.about__step:last-of-type { border-bottom: 0; }
.about__step h3 { margin-bottom: .9rem; }
.pull {
  border-left: 2px solid var(--c-gold); padding: .2rem 0 .2rem 1.5rem;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500;
  line-height: 1.35; letter-spacing: -.025em; color: var(--c-text); margin: 2.5rem 0 0;
}

/* --- 13. GALERIE / LICHTKEGEL ------------------------------------------- */
.beam { --mx: 50%; --my: 50%; }
.beam__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 1.4vw, 1rem); }
@media (min-width: 760px) { .beam__grid { grid-template-columns: repeat(4, 1fr); } }
.beam__item {
  position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 3/4;
  background: var(--c-surface); border: 0; padding: 0; cursor: pointer;
}
/* Die Kacheln liegen in <li>, daher greift nth-child auf .beam__item nicht wie
   beabsichtigt. Ein einheitliches Verhaeltnis ist hier ohnehin ruhiger — und es
   deckt sich exakt mit den Bildmassen, was Layout-Spruenge ausschliesst. */
.beam__item img { aspect-ratio: 3/4; }
.beam__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72) saturate(.72); transform: scale(1.02);
  transition: filter .55s var(--e-out), transform .7s var(--e-out);
}
/* Lichtkegel: nur die Kachel unter dem Cursor wird hell */
.beam__item.is-lit img { filter: brightness(1.25) saturate(1.1); transform: scale(1.05); }
.beam__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 190px at var(--mx) var(--my), rgba(226,198,140,.20), transparent 68%);
  transition: opacity .4s var(--e-out);
}
.beam__item.is-lit::after { opacity: 1; }
.beam__hint { margin-top: 1.5rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); }
@media (hover: none) { .beam__hint { display: none; } }

/* --- 14. STIMMEN ---------------------------------------------------------
   Bewusst KEINE Karten und kein Anführungszeichen in der Ecke – das ist die
   Standardform jedes Templates. Stattdessen redaktionell: Haarlinie, Text,
   Herkunft. Die Aussage trägt sich selbst. */
.voices { display: grid; gap: clamp(3rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
@media (min-width: 900px) { .voices { grid-template-columns: repeat(2, 1fr); } }
.voice { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--c-line); }
.voice blockquote { margin: 0; }
.voice p {
  font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.6;
  letter-spacing: -.008em; color: var(--c-text);
}
.voice p:last-of-type { margin-bottom: 0; }
.voice footer { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.voice cite {
  font-style: normal; font-weight: 600; font-size: .95rem;
  letter-spacing: -.015em; color: var(--c-text);
}
.voice .meta {
  font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-text-dim);
}
.voice .meta::before { content: "— "; }

/* --- 15. FORMULAR ------------------------------------------------------- */
.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; gap: 1.35rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field > label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }
.field > label .req { color: var(--c-gold); font-size: 1.2em; line-height: 0; vertical-align: middle; }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: 2px; color: var(--c-text);
  font-size: 1rem; transition: border-color var(--t-micro), box-shadow var(--t-micro);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A29C92' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(198,162,92,.28);
}
.field .err { font-size: .82rem; color: #E0687A; min-height: 0; }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: #96131F; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Formular dreht sich weg wie eine Karte */
.formflip { perspective: 1400px; }
.formflip__inner { position: relative; transform-style: preserve-3d; transition: transform .72s var(--e-flip); }
.formflip.is-done .formflip__inner { transform: rotateY(180deg); }
.formflip__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.formflip__face--back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: grid; align-content: center; gap: 1rem; text-align: center;
  border: 1px solid rgba(198,162,92,.4); border-radius: 3px; padding: 2.5rem;
  background: linear-gradient(165deg, #17141C, #0D0B11);
}
.formflip.is-done .formflip__face--front { visibility: hidden; }

.contact__meta { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.contact__meta a {
  font-family: var(--f-display); font-size: clamp(1.35rem,2.6vw,2rem); font-weight: 600;
  letter-spacing: -.03em; text-decoration: none; color: var(--c-text);
  border-bottom: 2px solid var(--c-gold); padding-bottom: .15rem;
}
.contact__meta a:hover { border-bottom-color: var(--c-text); }
.micro { font-size: .82rem; color: var(--c-text-dim); margin: 0; }

/* Sticky Telefon-CTA (Mobile) */
.callbar {
  position: fixed; left: 0; bottom: 0; width: 100%; z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem; background: var(--c-gold); color: var(--c-black);
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; transform: translateY(105%); transition: transform .4s var(--e-out);
}
.callbar.is-on { transform: none; }
@media (min-width: 1000px), (hover: hover) and (pointer: fine) { .callbar { display: none; } }

/* --- 16. FOOTER --------------------------------------------------------- */
.ftr { border-top: 1px solid var(--c-line); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.ftr__top { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .ftr__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.ftr .ftr__h { font-family: var(--f-body); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 1.1rem; }
.ftr ul { display: grid; gap: .65rem; }
.ftr a { text-decoration: none; font-size: .95rem; }
.ftr a:hover { color: var(--c-text); text-decoration: underline;
  text-decoration-color: var(--c-gold); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ftr__bottom {
  margin-top: clamp(3rem,6vw,4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .8rem; color: var(--c-text-dim);
}
.ftr__bottom a { font-size: inherit; }

/* --- 17. VORHANG-INTRO -------------------------------------------------- */
.curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.curtain__half { position: absolute; left: 0; width: 100%; height: 50.5%; background: var(--c-black); }
.curtain__half--t { top: 0; }
.curtain__half--b { bottom: 0; }
.curtain__card {
  position: absolute; top: 50%; left: 50%; width: clamp(96px, 12vw, 140px); aspect-ratio: 5/7;
  transform: translate(-50%,-50%); z-index: 1;
  border: 1px solid rgba(198,162,92,.45); border-radius: 6px;
  background: linear-gradient(165deg, #1A1620, #0D0B11) center / cover;
  display: grid; place-items: center;
}
.curtain__card::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198,162,92,.3); border-radius: 3px;
  background: url("../img/guilloche.svg") center / 100px; opacity: .38;
}
.curtain__card svg { width: 46%; position: relative; z-index: 1; }
body.is-intro { overflow: hidden; }

/* --- 18. SCROLL-REVEAL -------------------------------------------------- */
.rv { opacity: 0; transform: translateY(22px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out); }
.rv-blur { opacity: 0; filter: blur(5px); transform: translateY(16px); }
.rv-blur.is-in { opacity: 1; filter: blur(0); transform: none; transition: opacity .75s var(--e-out), filter .75s var(--e-out), transform .75s var(--e-out); }

/* --- 19. REDUCED MOTION ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv, .rv-blur { opacity: 1 !important; transform: none !important; filter: none !important; }
  .curtain { display: none !important; }
  .hero__media img, .hero__media canvas { transform: none !important; filter: none !important; }
  .beam__item img { filter: brightness(.92) saturate(.95) !important; transform: none !important; }
  .morph__layer { position: relative; opacity: 1 !important; min-height: 50svh; }
  .morph { min-height: 0; display: block; }
  .morph__stage { position: relative; inset: auto; }
  .morph__item { position: relative; opacity: 1 !important; transform: none !important; margin-bottom: 2.5rem; }
  .morph__slot { min-height: 0; }
  .card__inner { transition: none; }
  .fan__track { flex-wrap: wrap; justify-content: center; }
  .fan__track > li { flex: 0 0 min(280px, 44%); }
}

/* --- 20. UNTERSEITEN ---------------------------------------------------- */
.section--head { padding-top: clamp(9rem, 16vh, 13rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.section--head h1 { margin-bottom: 1.5rem; }

/* Formate auf /zauberei/ */
.fmt__list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.fmt {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--c-line);
}
@media (min-width: 780px) { .fmt { grid-template-columns: 5.5rem 1fr; } }
.fmt__mark { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; }
.fmt__mark .card__pip { font-size: inherit; }
.fmt p { max-width: 62ch; }
.fmt__fit {
  margin-top: 1.5rem; font-size: .82rem; letter-spacing: .04em;
  color: var(--c-text-dim); border-left: 2px solid var(--c-gold); padding-left: 1rem;
}
.fmt__fit b { color: var(--c-text); font-weight: 600; }

/* FAQ */
.faq { border-top: 1px solid var(--c-line); max-width: 58rem; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500;
  transition: color var(--t-micro) var(--e-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1px solid var(--c-gold); border-bottom: 1px solid var(--c-gold);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-micro) var(--e-out);
}
.faq__item[open] summary { color: var(--c-gold); }
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq__item summary:hover { color: var(--c-gold); }
.faq__a { padding-bottom: 1.5rem; max-width: 62ch; }
.faq__a p { margin: 0; }

/* Lange Lesestrecken auf hellem Grund */
.section--paper .measure + .measure { margin-top: 0; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.prose h3 { margin-top: clamp(2rem, 4vw, 3rem); }
.prose ul { display: grid; gap: .6rem; padding-left: 1.25rem; list-style: disc; }
.prose li::marker { color: var(--c-gold); }
.prose a { color: inherit; text-decoration-color: var(--c-gold);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Ablauf-Schritte */
.steps { counter-reset: s; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.5rem; }
.steps li {
  counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding-bottom: clamp(1.5rem,3vw,2.25rem); border-bottom: 1px solid var(--c-line);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(s); font-family: var(--f-display); font-size: 1.75rem;
  color: var(--c-gold); line-height: 1;
}
.steps h3 { margin-bottom: .4rem; }
.steps p { margin: 0; }

/* Galerie-Seite: volles Raster */
.gal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 1.4vw, 1rem); }
@media (min-width: 700px)  { .gal__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .gal__grid { grid-template-columns: repeat(4, 1fr); } }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: rgba(5,5,7,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--e-out), visibility .3s;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-width: min(100%, 1100px); max-height: 84vh; object-fit: contain; border-radius: 2px; }
.lb__cap { margin-top: 1rem; font-size: .85rem; color: var(--c-text-dim); text-align: center; max-width: 60ch; }
.lb__close {
  position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem);
  width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: 50%;
  background: transparent; color: var(--c-text); cursor: pointer; font-size: 1.25rem; line-height: 1;
}
.lb__close:hover { border-color: var(--c-gold); color: var(--c-gold); }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 1px solid var(--c-line); border-radius: 50%;
  background: rgba(11,11,13,.6); color: var(--c-text); cursor: pointer; font-size: 1.1rem;
}
.lb__nav:hover { border-color: var(--c-gold); color: var(--c-gold); }
.lb__nav--prev { left: clamp(.5rem,2vw,2rem); }
.lb__nav--next { right: clamp(.5rem,2vw,2rem); }

/* Platzhalter-Hinweis (nur solange keine echten Fotos/Texte vorliegen) */
.ph-note {
  display: block; margin-bottom: 0;
  border: 1px dashed rgba(198,162,92,.45); border-radius: 3px;
  padding: 1rem 1.25rem; margin-top: 2rem; max-width: 60ch;
  font-size: .85rem; line-height: 1.6; color: var(--c-text-dim);
}
.ph-note b { color: var(--c-text); font-weight: 600; }
/* Auf der hellen Sektion waere Warmweiss auf Papierweiss unsichtbar (1.01:1). */
.section--paper .ph-note b { color: var(--c-paper-text); }
.section--paper .ph-note { color: #5C564C; }

/* 404 */
.err404 { min-height: 76svh; display: grid; place-content: center; text-align: center; gap: 1.5rem; }

/* --- 21. HERO: Kartenfächer als Vektorebene über dem Foto ---------------- */
/* Selektor muss .hero__media img (0,1,1) uebertreffen, sonst greift dort
   width/height:100% und der Faecher wird auf Vollbild gestreckt. */
.hero__media img.hero__cards {
  position: absolute; z-index: 1; pointer-events: none;
  right: 3%; bottom: 8%; width: clamp(240px, 30vw, 520px); height: auto;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.65));
  will-change: transform;
}
@media (max-width: 899px) {
  .hero__media img.hero__cards { right: -8%; bottom: 14%; width: 60vw; opacity: .85; }
}

/* --- 22. HERO-VIDEO ------------------------------------------------------
   Das Standbild bleibt der LCP. Das Video legt sich erst darüber, wenn es
   abspielbereit ist – und bei prefers-reduced-motion gar nicht. */
.hero__media .hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--e-out); will-change: opacity, transform;
}
.hero__media .hero__vid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__vid { display: none !important; } }