@import url("fonts.css");

/* =========================================================
   ETHEREAL — Design-Sprache "Liquid Chrome"
   Blickfang: der Chrom-Orb, der durch das Lichtportal wandert.
   ========================================================= */

:root{
  /* --- Scroll-Motor (von script.js gesetzt) --- */
  --mx:0; --my:0;

  --sky-scale:1.06; --sky-y:0px;

  --orb-x:-50%; --orb-y:0px; --orb-scale:1; --orb-opacity:1; --orb-bottom:14vh;
  --orb-glow:.55;

  --arch-scale:.86; --arch-y:0px; --arch-opacity:0; --arch-open:0;

  --slab-left-x:-50%; --slab-left-y:0px; --slab-left-scale:1; --slab-left-rot:0deg;
  --slab-right-x:-50%; --slab-right-y:0px; --slab-right-scale:1; --slab-right-rot:0deg;

  --haze:0; --scene-brightness:1; --scene-saturate:1;
  --sky-paint:
    radial-gradient(120% 90% at 50% 118%, rgba(150,110,205,.55) 0%, rgba(150,110,205,0) 62%),
    radial-gradient(70% 55% at 50% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(178deg,#f7f1ea 0%,#eadff2 34%,#dcc9ea 62%,#c9b0e0 84%,#b193d2 100%);
  --veil-opacity:0;
  --veil-tint:196,170,228;

  --title-y:0px; --title-scale:1; --title-opacity:1; --title-track:.42em;
  --intro-y:0px; --intro-opacity:1;

  --panel2-opacity:0; --panel2-y:calc(-50% + 58px);
  --panel3-opacity:0; --panel3-y:calc(-50% + 58px);

  --rail-visibility:hidden; --rail-enter-x:420vw; --rail-y:0px;
  --rail-controls-opacity:0; --rail-shift:0px;
  --rail-top:clamp(120px,20vh,230px);

  /* --- Palette --- */
  --cream:#f3ece5;
  --cream-2:#e9ded4;
  --ink:#2a2033;
  --ink-soft:#5b4d68;
  --mauve:#8f6fbe;
  --mauve-deep:#6d4f9c;
  --lavender:#c8b4e4;
  --neon:#b586ff;
  --line:rgba(42,32,51,.14);

  --chrome:linear-gradient(140deg,#fbf6fd 0%,#dccdee 18%,#b9a0d8 38%,#f4ebf9 52%,#a98ccd 70%,#e8dcf3 86%,#c7b0e2 100%);
  --glass:linear-gradient(150deg,rgba(255,255,255,.55),rgba(200,180,228,.18) 45%,rgba(255,255,255,.4));

  --shadow-soft:0 30px 70px rgba(78,54,110,.18);
  --shadow-card:0 18px 52px rgba(78,54,110,.14);

  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--cream);
}

*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;background:var(--cream);-webkit-text-size-adjust:100%}
body{min-height:100%;margin:0;overflow-x:clip;background:var(--cream);font-weight:300;line-height:1.5}
button{border:0;font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--mauve);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.serif{font-family:"Cormorant",Georgia,serif}
.accent{font-family:"Cormorant",Georgia,serif;font-style:italic;color:var(--mauve)}

.kicker{
  display:inline-block;font-size:.68rem;font-weight:400;letter-spacing:.38em;
  text-transform:uppercase;color:var(--mauve-deep);
}

/* =========================================================
   1 · Kino-Rig
   ========================================================= */
/* Die Scrollstrecke darf pro Gerät anders sein — script.js rechnet
   sie auf eine einheitliche Zeitachse um, die Choreografie bleibt gleich. */
.cinema{position:relative;height:calc(100vh + 3700px)}
.stage{
  position:sticky;top:0;height:100vh;min-height:620px;
  overflow:hidden;isolation:isolate;background:#e7dcef;
  contain:layout paint;
}
.world,.sky,.veil,.layer,.site-header,.hero-title,.intro-copy,
.story-panel,.rail,.rail-controls{position:absolute}
.world{inset:0;overflow:hidden}

/* --- Himmel: Lichtraum in Creme/Lavendel --- */
.sky{
  inset:-10%;
  background:var(--sky-paint);
  transform:translate3d(calc(var(--mx) * -14px), calc(var(--sky-y) + var(--my) * -6px), 0) scale(var(--sky-scale));
  filter:brightness(var(--scene-brightness)) saturate(var(--scene-saturate));
  will-change:transform;
}
/* Weichgezeichnete Zweitfassung. Der Weichzeichner ist fest und wird
   einmal berechnet — geblendet wird nur über die Deckkraft, und die
   erledigt die Grafikkarte. Ein animierter blur() kostet pro Bild neu. */
.sky::before{
  content:"";position:absolute;inset:-6%;
  background:var(--sky-paint);
  filter:blur(18px);
  opacity:var(--haze);
  will-change:opacity;
}
/* Lichtstrahlen wie in den Beiträgen */
.sky::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(102deg,
    rgba(255,255,255,.34) 0 2px,
    rgba(255,255,255,0) 2px 46px);
  mask-image:radial-gradient(80% 70% at 24% 0%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(80% 70% at 24% 0%,#000 0%,transparent 72%);
  opacity:.55;
}

/* --- Boden mit Spiegelung --- */
.floor{
  position:absolute;left:-10%;right:-10%;bottom:-4vh;height:46vh;z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(214,192,235,.35) 30%, rgba(150,116,196,.22) 100%);
  filter:brightness(var(--scene-brightness));
  transform:translate3d(0,calc(var(--my) * -3px),0);
  pointer-events:none;
  mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);
}
.floor::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 1px 90px);
  opacity:.5;
}

/* --- Lichtportal (Bogen) --- */
.arch{
  left:50%;bottom:8vh;z-index:2;
  width:min(46vw,560px);height:min(74vh,760px);
  transform:translate3d(calc(-50% + var(--mx) * 16px), calc(var(--arch-y) + var(--my) * 7px), 0) scale(var(--arch-scale));
  transform-origin:50% 100%;
  opacity:var(--arch-opacity);
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
  background:
    radial-gradient(60% 46% at 50% 78%, rgba(255,255,255,.98) 0%, rgba(255,244,255,.6) 40%, rgba(220,200,244,0) 76%),
    linear-gradient(180deg,#fff9ff 0%,#efe2f8 48%,#cdb3e6 100%);
  box-shadow:0 0 140px 40px rgba(200,168,244,.6), inset 0 0 90px rgba(255,255,255,.9);
  pointer-events:none;
  will-change:transform,opacity;
  /* unten weich auslaufen lassen, sonst schneidet die Box hart ab */
  mask-image:radial-gradient(78% 88% at 50% 34%,#000 42%,transparent 100%);
  -webkit-mask-image:radial-gradient(78% 88% at 50% 34%,#000 42%,transparent 100%);
}
/* die Öffnung, die sich im Scroll weitet */
.arch::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:calc(52% + var(--arch-open) * 46%);
  height:calc(78% + var(--arch-open) * 20%);
  transform:translateX(-50%);
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
  background:radial-gradient(70% 60% at 50% 90%, #ffffff 0%, #fff4ff 34%, rgba(255,240,255,0) 78%);
  filter:blur(6px);
}

/* --- Glas-Stelen links / rechts --- */
.slab{
  bottom:6vh;z-index:4;width:min(23vw,300px);height:min(60vh,600px);
  border-radius:150px 150px 26px 26px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 40px 90px rgba(86,58,122,.24), inset 0 0 60px rgba(255,255,255,.55);
  pointer-events:none;will-change:transform;
}
.slab::before{
  content:"";position:absolute;inset:10% 18% 12%;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.5) 0 1px, rgba(255,255,255,0) 1px 16px);
  opacity:.7;
}
.slab-left{
  left:26%;
  transform:translate3d(calc(var(--slab-left-x) + var(--mx) * 22px), calc(var(--slab-left-y) + var(--my) * 10px),0)
            scale(var(--slab-left-scale)) rotate(var(--slab-left-rot));
  transform-origin:80% 60%;
}
.slab-right{
  left:74%;
  transform:translate3d(calc(var(--slab-right-x) + var(--mx) * 22px), calc(var(--slab-right-y) + var(--my) * 10px),0)
            scale(var(--slab-right-scale)) rotate(var(--slab-right-rot));
  transform-origin:20% 60%;
}

/* --- Der Chrom-Orb: der benannte Blickfang --- */
.orb-wrap{
  left:50%;bottom:var(--orb-bottom);z-index:5;
  width:min(30vw,360px);height:min(30vw,360px);
  transform:translate3d(calc(var(--orb-x) + var(--mx) * 26px), calc(var(--orb-y) + var(--my) * 12px),0) scale(var(--orb-scale));
  opacity:var(--orb-opacity);
  pointer-events:none;will-change:transform,opacity;
}
.orb{
  position:absolute;inset:0;border-radius:50%;
  background:var(--chrome);
  box-shadow:
    inset -18px -26px 60px rgba(90,58,130,.42),
    inset 22px 18px 50px rgba(255,255,255,.95),
    0 40px 90px rgba(86,58,122,.34);
}
.orb::after{
  content:"";position:absolute;left:20%;top:14%;width:34%;height:24%;
  border-radius:50%;background:rgba(255,255,255,.92);filter:blur(10px);
}
.orb-glow{
  position:absolute;inset:-46%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(181,134,255,.7) 0%, rgba(181,134,255,0) 70%);
  opacity:var(--orb-glow);
}
.orb-ring{
  position:absolute;left:50%;top:50%;width:168%;height:168%;
  transform:translate(-50%,-50%) rotateX(74deg);
  border:1px solid rgba(255,255,255,.8);border-radius:50%;
  box-shadow:0 0 30px rgba(181,134,255,.55);
  opacity:.75;
}

/* --- Vordergrund-Kugeln --- */
.pebbles{position:absolute;inset:0;z-index:6;pointer-events:none}
.pebble{
  position:absolute;border-radius:50%;background:var(--chrome);
  box-shadow:inset -6px -10px 22px rgba(90,58,130,.4), inset 8px 6px 18px rgba(255,255,255,.9), 0 18px 34px rgba(86,58,122,.3);
}
.pebble-a{left:6%;bottom:6vh;width:120px;height:120px;transform:translate3d(calc(var(--mx) * 42px), calc(var(--my) * 18px),0)}
.pebble-b{right:8%;bottom:3vh;width:170px;height:170px;transform:translate3d(calc(var(--mx) * 54px), calc(var(--my) * 22px),0)}
.pebble-c{right:22%;bottom:22vh;width:58px;height:58px;opacity:.85;transform:translate3d(calc(var(--mx) * 30px), calc(var(--my) * 14px),0)}

/* --- Farbschleier über der Szene --- */
/* Fester Verlauf, geblendet nur über die Deckkraft — sonst müsste
   der Browser den Verlauf bei jedem Bild neu zeichnen. */
.veil{
  inset:0;z-index:10;pointer-events:none;
  opacity:var(--veil-opacity);
  background:linear-gradient(180deg,
    rgba(var(--veil-tint),.40) 0%,
    rgba(var(--veil-tint),.30) 48%,
    rgba(var(--veil-tint),.50) 100%);
  will-change:opacity;
}

/* =========================================================
   2 · Kopfzeile
   ========================================================= */
.site-header{
  top:0;left:0;right:0;z-index:20;
  display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr);
  align-items:center;gap:32px;padding:28px 36px;
}
.site-logo{
  justify-self:start;text-decoration:none;line-height:1;
  font-family:"Cormorant",Georgia,serif;font-size:1.55rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
}
.site-logo small{
  display:block;margin-top:6px;font-family:"Jost",sans-serif;
  font-size:.52rem;letter-spacing:.44em;color:var(--ink-soft);
}
.site-nav{display:flex;justify-content:center;gap:clamp(20px,2.2vw,42px)}
.site-nav a{
  font-size:.78rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);opacity:.78;transition:opacity .25s;
}
.site-nav a:hover{opacity:1}
.header-cta{
  justify-self:end;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 24px;border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--cream);
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:var(--shadow-card);transition:transform .3s,background .3s;
}
.header-cta:hover{transform:translateY(-2px);background:var(--mauve-deep)}

/* =========================================================
   3 · Titel & Einleitung
   ========================================================= */
.hero-title{
  left:50%;top:clamp(120px,20vh,210px);z-index:8;
  width:min(96vw,1500px);margin:0;
  font-family:"Cormorant",Georgia,serif;font-weight:300;
  font-size:clamp(3.4rem,11vw,11rem);line-height:.86;text-align:center;
  letter-spacing:var(--title-track);text-indent:var(--title-track);
  color:var(--ink);
  transform:translate3d(-50%,var(--title-y),0) scale(var(--title-scale));
  opacity:var(--title-opacity);
  will-change:transform,opacity;pointer-events:none;
}
.hero-title span{
  display:block;margin-top:18px;
  font-family:"Jost",sans-serif;font-size:.6rem;font-weight:300;
  letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;color:var(--mauve-deep);
}

.intro-copy{
  left:50%;bottom:clamp(48px,12vh,150px);z-index:9;
  width:min(600px,calc(100vw - 40px));text-align:center;
  transform:translate3d(-50%,var(--intro-y),0);
  opacity:var(--intro-opacity);will-change:transform,opacity;
}
.intro-copy p{
  margin:0 auto;max-width:520px;font-size:1.06rem;font-weight:300;line-height:1.55;
  color:var(--ink);text-shadow:0 2px 20px rgba(255,255,255,.7);
}
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.hero-tags span{
  display:inline-flex;align-items:center;min-height:40px;padding:0 22px;
  border-radius:999px;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  box-shadow:0 10px 26px rgba(86,58,122,.14);
}

/* =========================================================
   4 · Story-Panels im Kino
   ========================================================= */
.story-panel{
  left:50%;top:50%;z-index:12;
  width:min(760px,calc(100vw - 42px));text-align:center;pointer-events:none;
  transform:translate3d(-50%,-50%,0);will-change:transform,opacity;
}
/* weicher Lichtteppich, damit die Schrift auf jedem Untergrund trägt */
.story-panel::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:130%;height:190%;transform:translate(-50%,-50%);
  background:radial-gradient(52% 46% at 50% 50%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.story-panel h2{
  margin:0;font-family:"Cormorant",Georgia,serif;font-weight:300;
  font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.02;color:var(--ink);
  text-shadow:0 16px 42px rgba(255,255,255,.55);
}
.story-panel p{
  width:min(520px,100%);margin:22px auto 0;
  font-size:1.02rem;font-weight:300;line-height:1.6;color:var(--ink-soft);
}
.panel-bridge{top:58%;opacity:var(--panel2-opacity);transform:translate3d(-50%,var(--panel2-y),0)}
.panel-bazaar{top:32%;opacity:var(--panel3-opacity);transform:translate3d(-50%,var(--panel3-y),0)}

.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;
  width:min(560px,100%);margin:52px auto 0;
}
.facts dt{
  font-family:"Cormorant",Georgia,serif;font-weight:300;
  font-size:clamp(2.2rem,4vw,3.6rem);line-height:.94;color:var(--mauve-deep);
}
.facts dd{
  margin:12px 0 0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.panel-cta{
  display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:30px;
  padding:0 30px;border-radius:999px;background:var(--ink);color:var(--cream);
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  pointer-events:auto;cursor:pointer;box-shadow:var(--shadow-card);
  transition:transform .3s,background .3s;
}
.panel-cta:hover{transform:translateY(-2px);background:var(--mauve-deep)}

/* =========================================================
   5 · Karten-Schiene (Endlos-Slider)
   ========================================================= */
.rail{
  left:0;right:0;top:var(--rail-top);z-index:14;
  visibility:var(--rail-visibility);
  transform:translate3d(var(--rail-enter-x),var(--rail-y),0);
  transform-origin:0 0;pointer-events:auto;will-change:transform;
}
.rail-track{
  display:flex;gap:clamp(14px,1.1vw,22px);align-items:stretch;
  transform:translate3d(calc(var(--rail-shift) - 16vw),0,0);
  transition:transform 640ms cubic-bezier(.22,1,.36,1);will-change:transform;
}
.rail-track.is-jumping{transition:none}
.rail-card{
  position:relative;flex:0 0 clamp(300px,20vw,380px);min-height:236px;
  padding:26px;border-radius:26px;cursor:pointer;user-select:none;
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(238,228,247,.82));
  box-shadow:var(--shadow-card);color:var(--ink);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
}
.rail-card.is-active{transform:translateY(-10px);box-shadow:0 28px 64px rgba(86,58,122,.26)}
.rail-num{
  position:absolute;top:22px;right:24px;
  font-family:"Cormorant",Georgia,serif;font-size:2.6rem;font-weight:300;
  color:var(--lavender);line-height:1;
}
.rail-card .kicker{margin-bottom:56px}
.rail-card h3{
  margin:0;font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:1.65rem;line-height:1.1;
}
.rail-card p{margin:12px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}

.rail-controls{
  left:44px;top:calc(var(--rail-top) + 262px);z-index:15;
  display:flex;gap:12px;opacity:var(--rail-controls-opacity);
  transform:translate3d(0,var(--rail-y),0);
  pointer-events:none;will-change:transform,opacity;
}
.rail-controls.is-ready{pointer-events:auto}
.rail-nav{
  width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.94);box-shadow:0 18px 36px rgba(86,58,122,.2);
  transition:transform .25s,background .25s;
}
.rail-nav:hover{transform:translateY(-2px);background:#fff}

/* =========================================================
   6 · Abschnitte unter dem Kino
   ========================================================= */
.section{
  position:relative;padding:clamp(80px,11vw,150px) clamp(20px,5vw,72px);
  /* Abschnitte außerhalb des Bildschirms werden nicht gerendert */
  content-visibility:auto;contain-intrinsic-size:auto 900px;
}
.section-inner{max-width:1180px;margin:0 auto}
.section-head{max-width:720px;margin:0 0 clamp(40px,6vw,72px)}
.section-head h2{
  margin:18px 0 0;font-family:"Cormorant",Georgia,serif;font-weight:300;
  font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.04;color:var(--ink);
}
.section-head p{margin:20px 0 0;max-width:540px;font-size:1.02rem;line-height:1.65;color:var(--ink-soft)}

.section-light{background:linear-gradient(180deg,#f7f1ea 0%,#efe6f2 100%)}
.section-mist{background:linear-gradient(180deg,#efe6f2 0%,#e3d4ee 60%,#efe6f2 100%)}
.section-ink{background:linear-gradient(170deg,#2a2033 0%,#3b2a4d 55%,#2a2033 100%);color:var(--cream)}
.section-ink .section-head h2,.section-ink h3{color:var(--cream)}
.section-ink .section-head p,.section-ink p{color:rgba(243,236,229,.72)}
.section-ink .kicker{color:var(--lavender)}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.tile{
  position:relative;padding:34px 30px 36px;border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(238,228,247,.7));
  box-shadow:var(--shadow-card);
}
.tile h3{margin:16px 0 0;font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:1.6rem;line-height:1.15}
.tile p{margin:12px 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.tile-orb{
  position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:var(--chrome);opacity:.5;filter:blur(2px);
}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;counter-reset:step}
.step{position:relative;padding-top:30px;border-top:1px solid rgba(243,236,229,.24)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:"Cormorant",Georgia,serif;font-size:2.4rem;font-weight:300;color:var(--lavender);
}
.step h3{margin:10px 0 0;font-size:1.35rem;font-weight:400;font-family:"Cormorant",Georgia,serif}
.step p{margin:10px 0 0;font-size:.94rem;line-height:1.6}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  font-family:"Cormorant",Georgia,serif;font-size:1.3rem;font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mauve);font-family:"Jost",sans-serif;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0;max-width:640px;font-size:.98rem;line-height:1.66;color:var(--ink-soft)}

/* Schluss-CTA */
.finale{position:relative;overflow:hidden;text-align:center;padding:clamp(90px,13vw,170px) 24px}
.finale::before{
  content:"";position:absolute;left:50%;top:50%;width:min(80vw,760px);height:min(80vw,760px);
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(181,134,255,.5) 0%, rgba(181,134,255,0) 70%);
}
.finale-inner{position:relative}
.finale h2{
  margin:20px 0 0;font-family:"Cormorant",Georgia,serif;font-weight:300;
  font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:1;color:var(--cream);
}
.finale p{margin:22px auto 0;max-width:520px;font-size:1.05rem;line-height:1.6;color:rgba(243,236,229,.76)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 36px;border-radius:999px;cursor:pointer;text-decoration:none;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  transition:transform .3s,background .3s,color .3s;
}
.btn-light{background:var(--cream);color:var(--ink);box-shadow:0 20px 44px rgba(0,0,0,.3)}
.btn-light:hover{transform:translateY(-3px);background:#fff}
.btn-ink{background:var(--ink);color:var(--cream);box-shadow:var(--shadow-card)}
.btn-ink:hover{transform:translateY(-3px);background:var(--mauve-deep)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.6)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* Fußzeile */
.site-footer{
  padding:56px clamp(20px,5vw,72px);background:#241b2d;color:rgba(243,236,229,.62);
  font-size:.82rem;
}
.footer-inner{
  max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;
  justify-content:space-between;align-items:center;
}
.site-footer a{color:rgba(243,236,229,.8);text-decoration:none;margin-right:18px}
.site-footer a:hover{color:#fff}

/* Sanftes Einblenden beim Scrollen */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   7 · Unterseiten (Bewerbung / Admin / Recht)
   ========================================================= */
.page-shell{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#f7f1ea 0%,#eadff2 45%,#e0d0ed 100%)}
.page-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px clamp(20px,5vw,56px);
}
.page-main{flex:1;padding:clamp(30px,6vw,70px) clamp(20px,5vw,56px) 90px}
.page-narrow{max-width:820px;margin:0 auto}
.page-wide{max-width:1240px;margin:0 auto}

.legal h1{font-family:"Cormorant",Georgia,serif;font-weight:300;font-size:clamp(2rem,5vw,3.2rem);margin:0 0 8px}
.legal h2{font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:1.5rem;margin:38px 0 10px}
.legal p,.legal li{font-size:.98rem;line-height:1.7;color:var(--ink-soft)}
.legal .todo{background:rgba(181,134,255,.16);border-left:3px solid var(--mauve);padding:14px 18px;border-radius:0 10px 10px 0}

/* --- Formular --- */
.apply-hero{text-align:center;margin-bottom:clamp(30px,5vw,54px)}
.apply-hero h1{
  margin:16px 0 0;font-family:"Cormorant",Georgia,serif;font-weight:300;
  font-size:clamp(2.3rem,6vw,4.2rem);line-height:1;
}
.apply-hero p{margin:18px auto 0;max-width:520px;color:var(--ink-soft);line-height:1.6}

.progress{display:flex;gap:8px;margin:0 0 30px}
.progress span{
  flex:1;height:3px;border-radius:999px;background:rgba(42,32,51,.12);
  transition:background .4s;
}
.progress span.is-done{background:var(--mauve)}

.form-card{
  padding:clamp(26px,4vw,46px);border-radius:30px;
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(240,231,248,.86));
  box-shadow:var(--shadow-soft);
}
.step-panel{display:none}
.step-panel.is-active{display:block;animation:fade-up .5s cubic-bezier(.22,1,.36,1)}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.step-panel h2{
  margin:0 0 6px;font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.3rem);
}
.step-panel > p.hint{margin:0 0 28px;color:var(--ink-soft);font-size:.95rem}

.field{margin:0 0 22px}
.field > label,.field > legend,.field-label{
  display:block;margin:0 0 8px;padding:0;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.field input[type=text],.field input[type=email],.field input[type=date],
.field input[type=number],.field input[type=url],.field input[type=tel],
.field select,.field textarea{
  width:100%;min-height:52px;padding:14px 18px;border-radius:14px;
  border:1px solid rgba(42,32,51,.16);background:rgba(255,255,255,.85);
  font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--mauve);box-shadow:0 0 0 4px rgba(143,111,190,.16);
}
.field .help{margin:8px 0 0;font-size:.82rem;color:var(--ink-soft)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#c0446a;box-shadow:0 0 0 4px rgba(192,68,106,.12)}
.error-msg{display:none;margin:8px 0 0;font-size:.82rem;color:#a53355}
.field.has-error .error-msg{display:block}
fieldset{margin:0 0 22px;padding:0;border:0}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;min-height:46px;padding:0 20px;cursor:pointer;
  border-radius:999px;border:1px solid rgba(42,32,51,.16);background:rgba(255,255,255,.7);
  font-size:.9rem;transition:all .25s;
}
.chip input:checked + span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--mauve);outline-offset:3px}

.scale{display:flex;flex-wrap:wrap;gap:8px}
.scale .chip span{min-width:56px;justify-content:center;padding:0 14px}

.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.check input{margin-top:3px;width:20px;height:20px;accent-color:var(--mauve-deep);flex:0 0 auto}
.check a{color:var(--mauve-deep)}

.form-nav{display:flex;justify-content:space-between;gap:14px;margin-top:34px}

.review-list{margin:0;padding:0;list-style:none}
.review-list div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.review-list dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);flex:0 0 42%}
.review-list dd{margin:0;text-align:right;font-size:.95rem}

.form-done{text-align:center;padding:40px 10px}
.form-done .done-orb{
  width:120px;height:120px;margin:0 auto 28px;border-radius:50%;background:var(--chrome);
  box-shadow:inset -14px -20px 44px rgba(90,58,130,.4),inset 16px 14px 38px rgba(255,255,255,.95),0 30px 60px rgba(86,58,122,.3);
}
.form-done h2{font-family:"Cormorant",Georgia,serif;font-weight:300;font-size:clamp(2rem,5vw,3rem);margin:0}
.form-done p{margin:16px auto 0;max-width:440px;color:var(--ink-soft);line-height:1.6}

.form-status{margin-top:18px;font-size:.9rem;color:var(--ink-soft);min-height:1.2em}
.form-status.is-error{color:#a53355}

/* --- Admin --- */
.admin-login{max-width:420px;margin:12vh auto 0}
.admin-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:26px;
}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.stat{
  padding:20px 22px;border-radius:20px;background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-card);
}
.stat b{display:block;font-family:"Cormorant",Georgia,serif;font-weight:300;font-size:2.2rem;line-height:1;color:var(--mauve-deep)}
.stat span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

.admin-tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.admin-tools input,.admin-tools select{
  min-height:46px;padding:10px 16px;border-radius:12px;border:1px solid rgba(42,32,51,.16);
  background:rgba(255,255,255,.85);font:inherit;
}
.admin-tools input{flex:1;min-width:220px}

.app-list{display:grid;gap:14px}
.app-row{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:20px 24px;border-radius:20px;cursor:pointer;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-card);transition:transform .25s,box-shadow .25s;
}
.app-row:hover{transform:translateY(-2px);box-shadow:0 24px 50px rgba(86,58,122,.2)}
.app-row h3{margin:0;font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:1.4rem}
.app-row .meta{margin:6px 0 0;font-size:.85rem;color:var(--ink-soft)}
.badge{
  display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.badge-neu{background:rgba(181,134,255,.22);color:var(--mauve-deep)}
.badge-gesehen{background:rgba(42,32,51,.1);color:var(--ink-soft)}
.badge-zusage{background:rgba(72,160,120,.2);color:#2f7355}
.badge-absage{background:rgba(192,68,106,.16);color:#a53355}

.drawer{
  position:fixed;inset:0;z-index:60;display:none;
}
.drawer.is-open{display:block}
.drawer-scrim{position:absolute;inset:0;background:rgba(42,32,51,.45);backdrop-filter:blur(3px)}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);overflow-y:auto;
  padding:32px clamp(20px,4vw,40px) 60px;background:var(--cream);
  box-shadow:-30px 0 80px rgba(42,32,51,.3);
  animation:slide-in .4s cubic-bezier(.22,1,.36,1);
}
@keyframes slide-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer-panel h2{margin:0 0 4px;font-family:"Cormorant",Georgia,serif;font-weight:300;font-size:2rem}
.drawer-close{position:absolute;top:24px;right:24px;width:42px;height:42px;border-radius:999px;background:rgba(42,32,51,.08);cursor:pointer}
.detail-list{margin:24px 0 0}
.detail-list div{padding:14px 0;border-bottom:1px solid var(--line)}
.detail-list dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.detail-list dd{margin:6px 0 0;font-size:.98rem;line-height:1.55;white-space:pre-wrap}
.drawer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.drawer-actions .btn{min-height:46px;padding:0 22px;font-size:.7rem}

.empty{padding:60px 20px;text-align:center;color:var(--ink-soft)}

/* =========================================================
   8 · Breakpoints
   ========================================================= */
@media (max-width:1100px){
  .orb-wrap{width:min(42vw,320px);height:min(42vw,320px)}
  .arch{width:min(60vw,440px)}
  .slab{width:min(30vw,230px);height:min(48vh,440px)}
  .facts{gap:22px}
  .pebble-c{display:none}
}

@media (max-width:820px){
  .site-header{grid-template-columns:1fr auto;gap:10px;padding:16px 18px}
  .site-logo{font-size:1.25rem;letter-spacing:.28em}
  .site-logo small{margin-top:4px;font-size:.46rem;letter-spacing:.36em}
  .site-nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start;gap:16px;overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{font-size:.7rem;letter-spacing:.16em}
  .header-cta{min-height:40px}
  .header-cta{padding:0 18px;font-size:.68rem}
  .hero-title{
    top:17vh;font-size:clamp(2.4rem,8.4vw,4.4rem);
    letter-spacing:calc(var(--title-track) * .45);
    text-indent:calc(var(--title-track) * .45);
  }
  .hero-title span{letter-spacing:.42em;text-indent:.42em;font-size:.54rem}
  .orb-wrap{width:min(56vw,270px);height:min(56vw,270px);bottom:24vh}
  .arch{width:min(82vw,380px);height:56vh}
  .slab{width:38vw;height:34vh;border-radius:110px 110px 20px 20px}
  .slab-left{left:20%}
  .slab-right{left:80%}
  .pebble-a{width:74px;height:74px}
  .pebble-b{width:96px;height:96px}
  .intro-copy{bottom:40px}
  .facts{grid-template-columns:1fr;gap:18px;margin-top:32px;text-align:center}
  /* Karten links bündig statt angeschnitten */
  .rail-track{transform:translate3d(calc(var(--rail-shift) + 18px),0,0);gap:12px}
  .rail-card{flex:0 0 min(80vw,320px);min-height:252px}
  .rail-card .kicker{margin-bottom:34px}
  .rail-controls{left:18px;top:calc(var(--rail-top) + 270px)}
  /* unter der Kopfzeile bleiben, sonst überlagern sich Text und Menü */
  .story-panel{top:56%}
  .panel-bridge{top:62%}
  .panel-bazaar{top:44%}
  .story-panel h2{font-size:clamp(2rem,7.6vw,2.9rem)}
  .story-panel p{font-size:.98rem;margin-top:18px}
  .review-list div{flex-direction:column;gap:4px}
  .review-list dd{text-align:left}
  .app-row{grid-template-columns:1fr;align-items:flex-start}
  .form-nav{flex-direction:column-reverse;gap:10px;margin-top:30px}
  .form-nav .btn{width:100%;min-height:54px}
  .field input,.field select,.field textarea{font-size:16px} /* verhindert Zoom beim Tippen */
  .field{margin-bottom:18px}
  .chip span{min-height:48px}
  .check input{width:24px;height:24px}
  .apply-hero{margin-bottom:26px}
  .apply-hero p{font-size:.96rem}
}

@media (max-width:420px){
  .section{padding:64px 18px}
  .form-card{padding:22px 18px;border-radius:22px}
  .rail-card{padding:22px}
}

/* =========================================================
   9 · Handy: kürzere Bühne, weniger teure Effekte
   Weichzeichner und Backdrop-Filter kosten auf Mobilgeräten
   pro Bild echte Millisekunden — hier fliegen sie raus.
   ========================================================= */
@media (max-width:820px){
  .cinema{height:calc(100vh + 2400px)}

  .sky,.floor,.arch{filter:none !important}
  .sky::before{display:none}
  .sky::after{opacity:.35}
  .arch{box-shadow:0 0 90px 24px rgba(200,168,244,.5), inset 0 0 60px rgba(255,255,255,.85)}
  .hero-tags span{backdrop-filter:none;background:rgba(255,255,255,.72)}
  .orb-ring{display:none}
  .pebble-c{display:none}

  /* weniger dauerhaft beförderte Ebenen = weniger Speicher */
  .slab,.pebbles,.floor{will-change:auto}

  /* Karten per Wischen bedienbar */
  .rail{touch-action:pan-y}
  .rail-card{transition:none}
  .rail-card.is-active{transform:none;box-shadow:var(--shadow-card)}
}

/* Zeigergeräte ohne echten Mauszeiger brauchen keine Parallaxe */
@media (hover:none){
  .rail-nav:hover,.btn:hover,.header-cta:hover,.panel-cta:hover,.app-row:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .layer,.sky,.hero-title,.intro-copy,.story-panel,.rail,.rail-track,.orb{transition:none;animation:none}
  .reveal{opacity:1;transform:none}
}