/* Szenenmeister – Unterseiten im Design der neuen Startseite.
   Lädt nach styles.css (Raster der Bestandsseiten) und stil.css (Kopf, Fuss, Farben).
   Der Inhalt der Seiten bleibt unverändert; hier ändert sich nur, wie er aussieht. */

:root{
  --c-bg:#0f0c0a; --c-bg-2:#18120e; --c-surface:#1d1612; --c-surface-2:#261d17;
  --c-orange:#e6a866; --c-orange-deep:#c8844f; --c-amber:#f0c08a;
  --c-text:#f4ede4; --c-muted:#c2b6a8; --c-border:rgba(244,237,228,.14); --c-border-2:rgba(244,237,228,.08);
  --font-head:"Instrument Serif",Georgia,serif; --font-body:"Inter",system-ui,sans-serif;
  --neon-cyan:#e6a866; --neon-blue:#c8844f; --neon-magenta:#d98b52; --neon-pink:#f0c08a; --neon-violet:#b9763f;
  --glow:0 0 0 1px rgba(230,168,102,.45),0 18px 40px rgba(0,0,0,.4);
  --glow-neon:0 0 0 1px rgba(230,168,102,.45),0 18px 40px rgba(0,0,0,.4);
  --header-h:72px; --maxw:1240px; --radius:8px;
}
body{overflow-x:visible;line-height:1.65}
p{margin:0 0 1em}

/* Überschriften: Filmtitel statt Poppins */
main h1,main h2,main h3,main h4{font-family:var(--serif);font-weight:400;color:var(--leinwand);letter-spacing:-.01em;hyphens:auto}
main h1{font-size:clamp(2.7rem,9.5vw,5.8rem);line-height:.98}
main h2{font-size:clamp(2rem,5.4vw,3.5rem);line-height:1.04;margin-bottom:.9rem}
main h3{font-size:clamp(1.45rem,3vw,1.85rem);line-height:1.12}
.neon-text,.neon-text--warm{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--bernstein)!important;font-style:italic;animation:none!important}

/* Abschnitte: linksbündig, versetzt */
.container{max-width:var(--breit);padding-inline:var(--rand)}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section--bg{background:var(--nacht-2)}
.section--neon{background:#120d0b}
.section-title{text-align:left!important;max-width:760px;margin:0 0 3rem}
.section-title .lead,.lead{margin-inline:0!important;color:var(--text-2)}
.section:nth-of-type(even) .section-title{margin-left:clamp(0rem,8vw,7rem)}
.section-title::after{content:"";display:block;width:64px;height:2px;background:var(--bernstein);margin-top:1.4rem}
.eyebrow{text-align:left!important;justify-content:flex-start}
.eyebrow--neon{color:var(--bernstein)}
.neon-divider{background:var(--bernstein);animation:none;margin-left:0;width:64px}
main p[style*="text-align:center"]{text-align:left!important}

/* Kopfbereich jeder Unterseite: eine kleine Bühne */
.hero,.sm-hero{background:var(--nacht)!important;min-height:auto!important;isolation:isolate;align-items:flex-end;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5vw),0 100%);padding-bottom:5vw}
.hero::before,.hero::after,.sm-hero .sm-orbs,.sm-orbs{display:none!important}
.hero .buehne__kulisse,.sm-hero .buehne__kulisse{position:absolute;inset:0;z-index:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.9}
.hero .container,.sm-hero .container{position:relative;z-index:2;padding-top:calc(var(--header-h) + clamp(3rem,9vw,6rem))!important;padding-bottom:clamp(3rem,7vw,5rem)!important}
.hero h1{max-width:16ch;text-shadow:none}
.hero p{color:#e3d8cb;font-size:clamp(1.05rem,1.8vw,1.22rem);max-width:52ch}
.sm-hero .hero-sub{color:#e3d8cb}
.hero-stats .stat strong{font-family:var(--serif);font-weight:400;font-size:2.2rem;color:var(--leinwand)}
.hero-stats .stat span{color:var(--text-2)}
.streifen--klein{margin-top:-3.6vw;padding:.95rem 0}
.streifen--klein .streifen__band{font-size:clamp(1.1rem,2vw,1.45rem)}

/* Knöpfe wie auf der Startseite */
.btn{font-family:var(--sans);min-height:48px;border-radius:999px;border-width:1.5px;padding:.8rem 1.5rem;box-shadow:none}
.btn--lg{padding:.9rem 1.8rem;font-size:1.02rem}
.btn--primary{background:var(--bernstein);color:#1a110a}
.btn--primary:hover{background:#f2bd83;color:#1a110a;box-shadow:none}
.btn--ghost,.btn--neon{background:transparent;color:var(--leinwand);border-color:rgba(244,237,228,.55)}
.btn--ghost:hover,.btn--neon:hover{background:transparent;color:var(--bernstein);border-color:var(--bernstein)}
.btn--outline{color:var(--bernstein);border-color:var(--bernstein)}
.btn--outline:hover{background:var(--bernstein);color:#1a110a}

/* Karten: flach, mit Linie, versetzt */
.feature{background:rgba(29,22,18,.72);border:1px solid var(--linie);border-radius:6px;padding:1.6rem 1.5rem;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.feature:hover{border-color:rgba(230,168,102,.55);box-shadow:0 22px 44px rgba(0,0,0,.35)}
.feature .ico{width:48px;height:48px;border-radius:50%;background:transparent;border:1px solid rgba(230,168,102,.45);color:var(--bernstein)}
.feature .ico svg path,.feature .ico svg circle,.feature .ico svg rect,.feature .ico svg line,.feature .ico svg polyline,.feature .ico svg polygon{stroke-dasharray:80;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}
.js .reveal:not(.in) .feature .ico svg *,.js .feature.reveal:not(.in) .ico svg *{stroke-dashoffset:80}
.feature:hover .ico svg *{animation:linie 1s var(--ease)}
@keyframes linie{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.feature h3{font-size:1.5rem;color:var(--leinwand)}
.feature p{color:var(--text-2)}
a.feature:hover h3{color:var(--bernstein)}
@media (min-width:901px){
  .grid--3>.feature:nth-child(3n+2),.grid--4>.feature:nth-child(even){margin-top:2rem}
}

/* Ablauf */
.timeline{max-width:820px;margin-inline:0;gap:0;border-left:1px solid var(--linie);padding-left:0}
.timeline .step{padding:1.3rem 0 1.3rem 1.4rem;position:relative}
.timeline .step:nth-child(even){margin-left:clamp(0rem,5vw,3.5rem)}
.timeline .num{position:relative;left:-2.2rem;margin-right:-1.4rem;width:auto;min-width:44px;padding:0 .45rem;border-radius:999px;height:44px;background:var(--nacht);border:1px solid var(--bernstein);color:var(--bernstein);font-family:var(--serif);font-style:italic;font-size:1.4rem;font-weight:400}
.timeline h3{margin-bottom:.35rem}
.timeline p{color:var(--text-2)}

/* Preise */
.price-table{max-width:none;margin-inline:0}
.price{background:var(--creme);color:var(--creme-text);border:0;border-radius:8px;transition:transform .5s var(--ease),box-shadow .4s}
.price:hover{box-shadow:0 26px 50px rgba(0,0,0,.35)}
.price .pname{font-family:var(--sans);font-weight:700;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--braun)}
.price .chf{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,3.2rem);color:var(--creme-text);line-height:1}
.price p{color:var(--creme-text-2)!important}
.price ul li{color:var(--creme-text-2)}
.price ul li::before{border-color:var(--braun)}
.price.featured{background:var(--creme-text);color:var(--leinwand);box-shadow:0 0 0 1.5px var(--bernstein)}
.price.featured .pname{color:var(--bernstein)}
.price.featured .chf{color:var(--leinwand)}
.price.featured p,.price.featured ul li{color:var(--text-2)!important}
.price.featured ul li::before{border-color:var(--bernstein)}
.price .btn--ghost{color:var(--creme-text);border-color:rgba(28,21,17,.5)}
.price .btn--ghost:hover{color:var(--braun);border-color:var(--braun)}
.price.featured .btn--ghost{color:var(--leinwand);border-color:rgba(244,237,228,.55)}
.price span[style*="background"]{background:var(--bernstein)!important;color:#1a110a!important}
@media (min-width:901px){.price-table>.price:nth-child(2){margin-top:-1.5rem}.price-table>.price:nth-child(3){margin-top:1.5rem}}

/* Fragen */
.faq{max-width:860px;margin-inline:0}
.faq-item{border-bottom:1px solid var(--linie)}
.faq-item:first-child{border-top:1px solid var(--linie)}
.faq-q{font-family:var(--sans);font-weight:600;color:var(--leinwand);min-height:56px}
.faq-q::after{content:"";width:12px;height:12px;border-right:2px solid var(--bernstein);border-bottom:2px solid var(--bernstein);transform:translateY(-70%) rotate(45deg);font-size:0}
.faq-q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(225deg)}
.faq-a-inner{color:var(--text-2)}

/* Reels und Bilder */
.reel-card{border-radius:6px;border-color:var(--linie)}
.reel-card:hover{border-color:rgba(230,168,102,.6);box-shadow:0 22px 44px rgba(0,0,0,.4)}
.reel-card:focus-visible{outline-color:var(--bernstein)}
.reel-play span{background:rgba(15,12,10,.62);border:1.5px solid rgba(244,237,228,.7);color:var(--leinwand);box-shadow:none}
.reel-card:hover .reel-play span{background:var(--bernstein);color:#1a110a}
.reel-meta .tag{color:var(--bernstein)}
.reel-meta .ttl{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.neon-frame{background:none;padding:0;border-radius:4px;animation:none;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.neon-frame>img,.neon-frame>video{border-radius:4px}
.neon-frame.tilt{transform:none}
.neon-badge{border-color:var(--bernstein);font-family:var(--sans)}
.neon-badge .dot{background:#ff4a3d;box-shadow:none}
.work-copy .tag{color:var(--bernstein)}
.video-card{border-radius:6px;border-color:var(--linie)}
.video-card .play span{background:var(--bernstein)}
.video-card .vlabel{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.pullquote,blockquote{font-family:var(--serif)}

/* Formular */
.form{margin-inline:0}
.field label{color:var(--leinwand)}
.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea{min-height:48px;background:var(--nacht);border-color:rgba(244,237,228,.28);border-radius:6px;max-width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bernstein);box-shadow:0 0 0 3px rgba(230,168,102,.22)}
.field--check input{width:18px;height:18px;min-height:0;accent-color:var(--bernstein);flex:none}
.form-row>*,.grid>*{min-width:0}
.field .req{color:#ffa597}

/* Lightbox der Reels (aus main.js ersetzt durch den Kino-Dialog) */
.sm-lb video{border-color:var(--linie);box-shadow:none}

/* Links im Fliesstext */
main p a:not(.btn),main li a:not(.btn),.faq-a-inner a{color:var(--bernstein);text-underline-offset:3px}

/* Einblenden: alte Klasse .reveal läuft über dasselbe Skript wie .zeige */
.js .reveal{opacity:0;transform:translateY(var(--y,22px));transition:opacity var(--d,.8s) var(--ease),transform var(--d,.8s) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

@media (max-width:760px){
  .section:nth-of-type(even) .section-title{margin-left:0}
  .timeline .step:nth-child(even){margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{transform:none!important}
  .feature .ico svg *{stroke-dashoffset:0!important}
}

/* Rechtstexte-Bausatz (Impressum, Datenschutz): Bedienelemente auf Tappgrösse */
.rt-wurzel a:not(p a):not(li li a),.rt-wurzel button{min-height:44px;display:inline-flex;align-items:center}
.rt-toc-liste a{display:flex}
.rt-schalter a,.rt-knopf,.rt-kopieren{min-height:44px!important;min-width:44px}
.field--check label{min-height:44px;padding-block:.55rem}