/* Szenenmeister – Veredelung der Unterseiten auf das Niveau der Startseite.
   Lädt nach unterseiten.css. Ändert nur die Gestaltung, nie den Inhalt. */

/* Fliesstext wie auf der Startseite */
.section p:not(.eyebrow){color:var(--text-2)}
.section strong{color:var(--leinwand)}
.section li{color:var(--text-2)}

/* ---------- Kopfbereich als Bühne: Foto, Projektorstrahl, Schleier ---------- */
.hero.buehne-unter,.sm-hero.buehne-unter{position:relative;overflow:hidden;min-height:min(100svh,860px)!important;display:flex;align-items:flex-end;clip-path:polygon(0 0,100% 0,100% calc(100% - 6vw),0 100%);padding-bottom:6vw}
.buehne-unter .buehne__foto{position:absolute;inset:0;z-index:-3}
.buehne-unter .buehne__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero .buehne__kulisse,.sm-hero .buehne__kulisse{z-index:-2;opacity:1}
.buehne-unter .buehne__schleier{z-index:-1}
.buehne-unter .container{padding-bottom:clamp(2.5rem,6vw,4.5rem)!important}
.buehne-unter h1{font-size:clamp(2.45rem,8.6vw,5.4rem);line-height:.98;max-width:15ch;margin-bottom:1.3rem}
.buehne-unter h1 .neon-text--warm,.buehne-unter h1 .neon-text{display:block;font-size:.82em;line-height:1.1;padding-left:.1em}
.buehne-unter .container>p:not(.eyebrow):not(.buehne__schluss),.buehne-unter .hero-sub{max-width:46ch;color:#e3d8cb;font-size:clamp(1.02rem,1.5vw,1.18rem)}
.buehne-unter .hero-actions{margin:1.6rem 0 1.8rem}
.buehne-unter .buehne__schluss{margin:0}
.buehne-unter .hero-stats{display:flex;flex-wrap:wrap;gap:1.2rem 2.6rem;margin:0 0 1.8rem}
.buehne-unter .hero-stats .stat strong{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--leinwand);display:block}
.buehne-unter .hero-stats .stat:nth-child(3) strong{font-style:italic;color:var(--bernstein)}
.buehne-unter .hero-stats .stat span{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bernstein)}
@media (min-width:900px){
  .buehne-unter .buehne__foto{left:auto;width:52%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
  .buehne-unter .buehne__schleier{background:linear-gradient(90deg,rgba(15,12,10,.96) 0%,rgba(15,12,10,.9) 40%,rgba(15,12,10,.35) 75%,rgba(15,12,10,.2) 100%),linear-gradient(0deg,rgba(15,12,10,.6) 0%,rgba(15,12,10,0) 30%)}
  .buehne-unter .container>*{max-width:760px}
}
.buehne-unter--eigenbild{align-items:center}
.buehne-unter--eigenbild .buehne__schleier{background:linear-gradient(90deg,rgba(15,12,10,.6),rgba(15,12,10,.1))!important}

/* ---------- Abschnittskopf mit Bild: versetzt, wechselnde Seite und Format ---------- */
.abschnitt-kopf{display:grid;gap:1.6rem;margin-bottom:3rem}
.abschnitt-kopf>*{min-width:0}
.abschnitt-kopf .section-title{margin:0!important}
.abschnitt-bild{overflow:hidden;border-radius:4px;width:72%;max-width:380px;justify-self:end;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.abschnitt-bild img,.abschnitt-band img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s var(--ease)}
.f45{aspect-ratio:4/5}.f11{aspect-ratio:1/1}.f34{aspect-ratio:3/4}.f1610{aspect-ratio:16/10}.f23{aspect-ratio:2/3}
.abschnitt-kopf--links .abschnitt-bild{justify-self:start}
@media (min-width:960px){
  .abschnitt-kopf{grid-template-columns:1.45fr .55fr;align-items:end;gap:4rem}
  .abschnitt-kopf .abschnitt-bild{width:100%;transform:translateY(2.5rem)}
  .abschnitt-kopf--links{grid-template-columns:.55fr 1.45fr}
  .abschnitt-kopf--links .abschnitt-bild{order:-1;transform:translateY(-1.5rem)}
}
.abschnitt-band{overflow:hidden;border-radius:4px;aspect-ratio:16/9;margin:0 0 2.6rem;box-shadow:0 30px 60px rgba(0,0,0,.4)}
@media (min-width:760px){.abschnitt-band{aspect-ratio:2.39/1}}

/* ---------- Karten mit laufender Nummer (reine Gestaltung, kein Text im DOM) ---------- */
.grid{counter-reset:karte}
.grid>.feature{counter-increment:karte;position:relative}
.grid>.feature::after{content:counter(karte,decimal-leading-zero);position:absolute;right:1.1rem;top:.7rem;font-family:var(--serif);font-style:italic;font-size:1.7rem;color:rgba(230,168,102,.5);pointer-events:none}

/* ---------- Zeitleiste vor Foto mit Schleier, Schritte als versetzte Karten ---------- */
.abschnitt--schleier{position:relative;isolation:isolate;overflow:hidden}
.abschnitt__hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;filter:saturate(.6)}
.abschnitt__schleier{position:absolute;inset:0;z-index:-1;background:rgba(15,12,10,.88)}
.abschnitt--schleier .timeline{display:grid;gap:1.3rem;max-width:none;border-left:0;margin:0}
.abschnitt--schleier .timeline .step{display:block;margin:0;padding:1.5rem 1.4rem 1.4rem;background:rgba(24,18,14,.93);border:1px solid var(--linie);border-radius:6px;transform-style:preserve-3d}
.abschnitt--schleier .timeline .num{position:static;left:auto;margin:0 0 .6rem;width:auto;height:auto;min-width:0;padding:0;border:0;border-radius:0;background:none;display:block;font-family:var(--serif);font-style:italic;font-size:3rem;line-height:1;color:rgba(230,168,102,.85)}
@media (min-width:760px){
  .abschnitt--schleier .timeline{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}
  .abschnitt--schleier .timeline .step:nth-child(even){margin-top:3rem}
}

/* ---------- Preise auf hellem Grund, wie auf der Startseite ---------- */
.abschnitt--hell{background:var(--creme)!important;color:var(--creme-text)}
.abschnitt--hell h2,.abschnitt--hell h3{color:var(--creme-text)}
.abschnitt--hell .eyebrow{color:var(--braun)}
.abschnitt--hell p:not(.eyebrow),.abschnitt--hell .lead,.abschnitt--hell li{color:var(--creme-text-2)}
.abschnitt--hell p a{color:var(--braun)}
.abschnitt--hell strong{color:var(--creme-text)}
.abschnitt--hell .section-title::after{background:var(--braun)}
.abschnitt--hell .price:not(.featured){background:#fbf7f1;border:1px solid var(--linie-dunkel)}
.abschnitt--hell .price.featured p,.abschnitt--hell .price.featured li{color:var(--text-2)!important}
.abschnitt--hell .price.featured strong{color:var(--leinwand)}
.abschnitt--hell .abschnitt-bild{box-shadow:0 26px 50px rgba(60,35,15,.2)}

/* ---------- Reels als versetzte Wand, keine zwei gleichen Formate nebeneinander ---------- */
.reel-grid,.reel-grid.cols-3{display:block;columns:2;column-gap:12px}
.reel-grid>.reel-card{margin:0 0 12px;max-width:none;break-inside:avoid;aspect-ratio:auto}
.reel-grid>.reel-card:nth-child(4n+1){aspect-ratio:9/16}
.reel-grid>.reel-card:nth-child(4n+2){aspect-ratio:4/5}
.reel-grid>.reel-card:nth-child(4n+3){aspect-ratio:1/1}
.reel-grid>.reel-card:nth-child(4n+4){aspect-ratio:3/5}
@media (min-width:761px){.reel-grid,.reel-grid.cols-3{columns:3;column-gap:16px}.reel-grid>.reel-card{margin-bottom:16px}}

/* ---------- Beitragskarten im Blog ---------- */
a.video-card{text-decoration:none;display:block}

/* ---------- Schlussaufruf: Foto, Schleier, drei Wege ---------- */
.abschluss{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5rem,12vw,9.5rem)!important}
.abschluss__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.abschluss__schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,12,10,.95),rgba(15,12,10,.84))}
.abschluss .container{max-width:var(--breit)!important;display:grid;gap:0 4rem}
.abschluss h2{font-size:clamp(2.6rem,7.4vw,5.2rem);line-height:1}
.abschluss .container>p:not(.eyebrow){color:#ddd2c5!important;font-size:1.12rem;max-width:48ch}
.abschluss .hero-actions{justify-content:flex-start!important}
.abschluss__wege{display:grid;gap:.8rem;margin-top:2.6rem}
.abschluss__wege .weg{flex-direction:column;gap:.1rem;min-height:44px}
.abschluss__wege .weg span{color:var(--text-2);font-size:.95rem}
@media (min-width:960px){
  .abschluss .container{grid-template-columns:1.25fr .75fr}
  .abschluss .container>*:not(.abschluss__wege){grid-column:1}
  .abschluss__wege{grid-column:2;grid-row:1/span 5;align-self:end;margin:0}
  .abschluss__wege li:nth-child(2){margin-left:2rem}
}

/* Kartenraster: vier Spalten erst ab 1100 px, Titel mit Silbentrennung statt Wortbruch */
.feature h3{hyphens:auto;overflow-wrap:normal;word-break:normal}
@media (max-width:1099px) and (min-width:761px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grid--4 .feature h3{font-size:1.35rem}}

/* Atemzoom des Kopffotos im eigenen Rahmen abschneiden, nicht im Abschnitt */
.buehne-unter .buehne__foto{overflow:hidden}

/* Instagram-Karte in der Reel-Wand wie auf der Startseite */
.reel-grid>a.reel-card{display:grid!important;place-items:center;text-align:center;background:var(--nacht-3);text-decoration:none;color:var(--leinwand)}
.reel-grid>a.reel-card::after{display:none}
.reel-grid>a.reel-card>span{padding:.8rem!important;max-width:100%}
.reel-grid>a.reel-card>span>span:first-of-type{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.reel-grid>a.reel-card>span>span:last-child{font-size:.82rem;color:var(--text-2);overflow-wrap:anywhere}
.reel-grid>a.reel-card svg{margin:0 auto .6rem;stroke:var(--bernstein)}