/* ============================================================
   3D-Fotobox auf der Webseite: Hero der Startseite (.hero3d) und die Seite »Die Fotobox« (.tour).
   Das Modell selbst kommt als Baustein aus dem Projekt online-v2 (assets/3d/, dort `npm run baustein`).
   ============================================================ */

/* Unter diesem Namen zeichnet der Bildschirm der 3D-Fotobox seine Texte */
@font-face { font-family: 'NeueEinstellung-Bold'; src: url('../fonts/NeueEinstellung-Bold.ttf') format('truetype'); font-display: swap; }

/* ---------- Hero der Startseite ----------
   Der Wald des Hero besteht aus acht großen Vektorbildern, die der Browser erst nach und nach zeichnet – so lange
   fehlten die Bäume. Darunter liegt deshalb dasselbe Bild als ein fertiges Foto (die acht Ebenen zusammengesetzt,
   gleiche Lage: füllend, mittig, unten angelegt an 125 % der Höhe). Es bleibt, bis gescrollt wird (hero3d.js) –
   dann wandern die Ebenen auseinander, und es schiene dahinter hervor. */
html.js .hero-scene::before { content: ""; position: absolute; inset: 0 0 auto; height: 125%; background: url('../3d/wald.jpg?v=1') center bottom / cover no-repeat; }
html.wald-da .hero-scene::before { display: none; }

/* Die 3D-Fotobox: Mit JavaScript ist ihr Platz von Anfang an reserviert (nichts verschiebt sich, wenn sie
   erscheint), und sie blendet ein, sobald sie steht. Das Bild gibt es nur ohne JavaScript und als Rückfall, wenn
   der Browser kein 3D kann (.hero3d--bild). */
.hero3d canvas, .hero3d__leiste, .hero3d__tipp { display: none; }
.hero3d__mehr { display: block; margin-top: 1rem; text-align: center; font-size: var(--text-sm); color: rgba(255,253,248,.82); }
.hero3d__mehr span { text-decoration: underline; text-underline-offset: 3px; }
.hero3d__mehr:hover { color: var(--color-heading-light); }

html.js .hero3d { width: min(100%, 540px); aspect-ratio: 4 / 5; margin-block: -30px 26px; }
html.js .hero3d::after { bottom: 4%; width: 62%; opacity: 0; transition: opacity .7s ease; }
html.js .hero3d.da::after, html.js .hero3d--bild::after { opacity: 1; }
html.js .hero3d--bild { display: flex; align-items: center; justify-content: center; }
html.js .hero3d--bild > img { width: 62%; height: auto; }
html.js .hero3d--bild canvas { display: none; }
html.js .hero3d canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .7s ease; }
html.js .hero3d canvas:active { cursor: grabbing; }
html.js .hero3d.da canvas { opacity: 1; }
html.js .hero3d.auf-box canvas { cursor: pointer; }
html.js .hero3d__unten { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55rem; width: max-content; max-width: 100vw; margin-top: -14px; }
html.js .hero3d__leiste { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(20,40,41,.62); border: 1px solid rgba(255,243,231,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255,253,248,.8); font-size: .8rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .6s ease .4s, visibility 0s .4s; }
html.js .hero3d.da .hero3d__leiste { opacity: 1; visibility: visible; }
.hero3d__leiste button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 0 12px -2px var(--c); }
.hero3d__leiste button[aria-pressed="true"] { outline: 2px solid var(--color-heading-light); outline-offset: 2px; }
html.js .hero3d__mehr { margin-top: 0; }
html.js .hero3d__tipp { display: block; position: absolute; right: 2%; top: 30%; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-brand-orange); color: var(--color-cream); font-size: .8rem; font-family: var(--font-heading); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
html.js .hero3d.auf-box .hero3d__tipp { opacity: 1; transform: none; }
@media (max-width: 768px) {
  html.js .hero3d { width: min(84%, 340px); margin-block: 0 74px; }
}

/* ---------- Seite »Die Fotobox«: die Kamera fährt beim Scrollen von Teil zu Teil ----------
   Die Zeichenfläche steht fest hinter dem Text. Ohne 3D (kein JavaScript, alter Browser, Datensparmodus) bleibt
   die Seite ein dunkler Textblock mit dem Bild der Fotobox. */
/* Die Bühne: der Bereich in der Mitte, in dem Text (links) und Fotobox (rechts) stehen. Ihre Breite hängt auch an
   der Fensterhöhe – die Fotobox wird so groß gezeichnet, wie das Fenster hoch ist. Auf sehr breiten Bildschirmen
   bleibt die Bühne deshalb mittig stehen, statt Text und Fotobox an die Ränder auseinanderzuziehen; Textspalte
   und Schriftgrößen wachsen mit ihr. */
.tour { --tour-rand: clamp(1.25rem, 6vw, 6rem); --tour-c: min(100vw - 2 * var(--tour-rand), 145vh); }
.tour { position: relative; color: var(--color-text-light); background: radial-gradient(120% 90% at 62% 42%, #1f484c, #122425) fixed; }
/* Höhe = die größte Fensterhöhe (lvh): Am Handy ändert die ein- und ausfahrende Adressleiste die sichtbare Höhe –
   hinge die Zeichenfläche daran, würde sie beim Scrollen dauernd neu angelegt und die Fotobox spränge. */
#tour-grund, #tour-buehne { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; pointer-events: none; }
#tour-grund { z-index: -2; background: radial-gradient(120% 90% at 62% 42%, #1f484c, #122425); }
#tour-grund::before, #tour-grund::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
#tour-grund::before { background: radial-gradient(120% 90% at 62% 42%, #6a5644, #2a2019); }
#tour-grund::after { background: radial-gradient(120% 90% at 62% 42%, #33241a, #0f0a07); }
html[data-tour="festsaal"] #tour-grund::before, html[data-tour="cozy"] #tour-grund::after { opacity: 1; }
#tour-buehne { z-index: -1; width: 100%; display: block; opacity: 0; transition: opacity .35s ease; }
/* Solange die 3D-Fotobox lädt (html.tour-3d ohne .tour-da), steht schon das, womit die Seite beginnt: der Wald,
   formatfüllend und genauso gelegt wie gleich im Bildschirm der Fotobox (füllend, mittig, unten angelegt an 125 %
   der Höhe, darüber dieselbe Abdunklung). Die Überschrift kommt mit der Fotobox dazu; die Texte der Abschnitte
   bleiben so lange unsichtbar. Kommt die Fotobox nicht, nimmt das Skript .tour-3d wieder weg. */
#tour-wald { display: none; position: fixed; z-index: -1; inset: 0 0 auto; height: 125vh; height: 125lvh; pointer-events: none; background: #1a3c3d url('../3d/wald.jpg?v=1') center bottom / cover no-repeat; transition: opacity .35s ease .35s, visibility 0s .7s; }
#tour-wald::after { content: ""; position: absolute; inset: 0 0 auto; height: 80%; background: linear-gradient(0deg, rgba(20,40,41,.5), rgba(20,40,41,0) 30%), radial-gradient(circle 62vmax at 50% 50%, rgba(20,40,41,.62), rgba(20,40,41,.3) 55%, rgba(20,40,41,0)); }
html.tour-3d #tour-wald { display: block; }
html.tour-da #tour-wald { opacity: 0; visibility: hidden; }
html.tour-3d:not(.tour-da) .tour__text { visibility: hidden; }
/* sobald die 3D-Fotobox steht: Seite durchsichtig, dahinter Grund und Zeichenfläche */
html.tour-3d { background: #122425; }
html.tour-3d body { background: transparent; }
html.tour-3d .tour { background: none; }
html.tour-da #tour-buehne { opacity: 1; }

.tour__kapitel { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 12vh calc((100vw - var(--tour-c)) / 2); }
.tour__text { width: min(100%, max(22rem, var(--tour-c) * 0.38)); }
.tour__marke { margin: 0 0 1rem; font-family: var(--font-heading); font-size: clamp(.8rem, var(--tour-c) * 0.0105, 1.05rem) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--color-orange-soft); }
.tour__kapitel h1, .tour__kapitel h2 { margin: 0 0 1.1rem; font-size: clamp(2.2rem, var(--tour-c) * 0.05, 6rem); line-height: 1.04; color: var(--color-heading-light); }
.tour__kapitel h1 span, .tour__kapitel h2 span { color: var(--color-orange-soft); }
.tour__kapitel p { font-size: clamp(1.05rem, var(--tour-c) * 0.0142, 1.5rem); line-height: 1.6; color: rgba(255,253,248,.84); max-width: 34ch; }
.tour__fakt { margin-top: 1.4rem; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.tour__fakt div { display: flex; flex-direction: column; line-height: 1.2; }
.tour__fakt b { font-family: var(--font-heading); font-size: clamp(1.5rem, var(--tour-c) * 0.02, 2.3rem); color: var(--color-heading-light); }
.tour__fakt span { font-size: var(--text-sm); color: rgba(255,253,248,.62); }
.tour__kapitel .hero__actions { margin-top: 2rem; }
.tour__weiter { display: none; }
/* Einstieg mit 3D: die Überschrift steht im Bildschirm der Fotobox (für Vorleseprogramme bleibt sie hier), dazu
   ein Hinweis am unteren Rand */
html.tour-3d .tour__kapitel--einstieg { position: relative; }
html.tour-3d .tour__kapitel--einstieg .tour__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0; background: none; }
html.tour-da .tour__kapitel--einstieg .tour__weiter { display: block; position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); margin: 0; max-width: none; font-family: var(--font-heading); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,253,248,.72); transition: opacity .3s ease; }
html.tour-da .tour__kapitel--einstieg .tour__weiter span { display: inline-block; animation: tour-hinweis 1.8s ease-in-out infinite; }
html.tour-gescrollt .tour__kapitel--einstieg .tour__weiter { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
@keyframes tour-hinweis { 50% { transform: translateY(5px); } }
.tour__kapitel--mitte { justify-content: center; text-align: center; }
.tour__kapitel--mitte .tour__text { width: min(100%, 40rem); }
.tour__kapitel--mitte p { max-width: none; }
.tour__kapitel--mitte .hero__actions { justify-content: center; }
.tour__farben { display: flex; gap: 10px; margin-top: 1.4rem; }
.tour__farben i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px -2px var(--c); opacity: .35; transition: opacity .3s ease, transform .3s ease; }
.tour__farben i.an { opacity: 1; transform: scale(1.2); }
html:not(.tour-3d) .tour__farben i { opacity: 1; }
/* Fortschritt am rechten Rand */
#tour-punkte { position: fixed; z-index: 3; right: max(18px, (100vw - var(--tour-c)) / 2 - 3.5rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
html.tour-da #tour-punkte.sichtbar { opacity: 1; }
#tour-punkte i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,253,248,.28); transition: background .3s ease, transform .3s ease; }
#tour-punkte i.an { background: var(--color-orange-soft); transform: scale(1.5); }
/* ohne 3D: das Bild der Fotobox neben dem ersten Abschnitt, die Abschnitte dichter */
.tour__bild { display: none; }
html:not(.tour-3d) .tour__kapitel { min-height: 0; padding-block: clamp(3rem, 8vh, 5rem); }
html:not(.tour-3d) .tour__kapitel:first-of-type { gap: clamp(1.5rem, 6vw, 5rem); justify-content: space-between; }
html:not(.tour-3d) .tour__bild { display: block; width: min(34vw, 300px); margin-right: clamp(0rem, 6vw, 6rem); filter: drop-shadow(0 28px 50px rgba(0,0,0,.5)); }

@media (max-width: 800px) {
  .tour { --tour-rand: 1.25rem; }
  /* Hochkant mit 3D: Die Abschnitte sind nur Scrollstrecke. Der Text steht fest am unteren Rand und blendet je
     Abschnitt ein und aus (die Deckkraft setzt fotobox-tour.js), die Fotobox steht darüber – so schiebt sich beim
     Scrollen nie ein Textblock über sie. */
  html.tour-3d .tour__kapitel { padding: 0; }
  html.tour-3d .tour__text { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; width: auto; margin: 0; padding: 4.5rem 1.25rem max(1.9rem, calc(env(safe-area-inset-bottom) + 1.3rem)); background: linear-gradient(0deg, rgba(14,27,28,.97) 68%, rgba(14,27,28,0)); opacity: 0; visibility: hidden; }
  html.tour-3d .tour__text.zu-sehen { visibility: visible; }
  html.tour-3d .tour__kapitel--einstieg .tour__text { visibility: visible; }
  html.tour-3d .tour__kapitel h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); margin-bottom: .8rem; }
  .tour__kapitel p { font-size: 1rem; }
  html.tour-3d .tour__fakt { margin-top: 1rem; }
  html.tour-3d .tour__kapitel .hero__actions { margin-top: 1.3rem; }
  #tour-punkte { right: 8px; top: 34%; }
  html:not(.tour-3d) .tour__kapitel:first-of-type { flex-direction: column-reverse; align-items: flex-start; }
  html:not(.tour-3d) .tour__bild { width: min(60vw, 240px); margin: 0 auto; }
}