/* =========================================================
   fx27 · Effekte im Stil der NUBA-Website 2027 (18.10.2026)
   Gemeinsam für alle Seiten der Salon-Website.
   Dunkel dominant in den bisherigen Salon-Farben (Christoph 18.10.: nicht dunkler), Gold changiert.
   Texte und Überschriften werden NICHT animiert, nur Karten und Fotos.
   Parallax bleibt verboten.
   ========================================================= */
:root{
  --abyss:#000829;             /* Grund = bisheriges Tiefnavy der Startseite */
  --deep:#000829;              /* Flächen */
  --deep-2:#00051C;
  --navy:#000E3D;              /* nur Lichter/Verläufe und Text auf Gold */
  --gold:#EFC980; --gold-mid:#C9A04E; --gold-deep:#8A6A22;
  --cream:#FFFAEC;
  --cr:rgba(255,250,236,.88); --cr-soft:rgba(255,250,236,.66); --cr-faint:rgba(255,250,236,.56);
  --grad-gold:linear-gradient(100deg,#F8E4B4 0%,#EFC980 38%,#D4AA5C 72%,#EFC980 100%);
  --grad-gold-deep:linear-gradient(100deg,#A9822F 0%,#8A6A22 45%,#6F551B 100%);
  --ease:cubic-bezier(.22,.7,.2,1);
}
/* iPhone-Statusleiste bleibt dunkel: html/body haben den dunklen Salon-Grund (style.css, --black), dazu theme-color im Kopf */

/* Navigation: weicher Glas-Effekt mit Goldlinie */
nav{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(239,201,128,.16);}

/* ---------- Goldschimmer im Hintergrund ---------- */
.fx-glow{background:
  radial-gradient(55% 45% at 8% 0%,rgba(239,201,128,.11),transparent 70%),
  radial-gradient(45% 40% at 96% 100%,rgba(239,201,128,.08),transparent 70%),
  radial-gradient(70% 60% at 60% 40%,rgba(36,64,160,.22),transparent 70%),
  var(--navy) !important;}
.fx-glow.alt{background:
  radial-gradient(55% 45% at 92% 0%,rgba(239,201,128,.10),transparent 70%),
  radial-gradient(50% 45% at 5% 100%,rgba(36,64,160,.25),transparent 70%),
  var(--deep) !important;}
.fx-glow.mid{background:
  radial-gradient(60% 50% at 50% 0%,rgba(239,201,128,.09),transparent 70%),
  radial-gradient(40% 50% at 100% 60%,rgba(36,64,160,.22),transparent 70%),
  radial-gradient(40% 50% at 0% 70%,rgba(239,201,128,.06),transparent 70%),
  var(--deep) !important;}

/* ---------- Changierende Karten ---------- */
.fx-sheen,.fx-sub :is(.card,.step,.service,.contact-card){position:relative;border:1px solid rgba(239,201,128,.25);color:var(--cr);
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,250,236,.06) 45%,transparent 60%),
    radial-gradient(circle at 100% 0%,rgba(239,201,128,.16),rgba(239,201,128,0) 50%),
    linear-gradient(160deg,var(--navy) 0%,var(--deep) 100%);
  background-size:250% 100%,100% 100%,100% 100%;background-position:130% 0,0 0,0 0;
  box-shadow:0 40px 80px -40px rgba(0,14,61,.6),0 26px 60px -32px rgba(239,201,128,.30);
  animation:fxSheen 9s ease-in-out infinite;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s,opacity .95s var(--ease);}
:is(.fx-sheen,.fx-sub :is(.card,.step,.service,.contact-card)):nth-child(3n+2){animation-delay:1.5s;}
:is(.fx-sheen,.fx-sub :is(.card,.step,.service,.contact-card)):nth-child(3n){animation-delay:3s;}
@keyframes fxSheen{0%,15%{background-position:130% 0,0 0,0 0;}60%,100%{background-position:-30% 0,0 0,0 0;}}
@media(hover:hover){
  .fx-sheen:hover,.fx-sub :is(.card,.step,.service,.contact-card):hover{transform:translateY(-8px);border-color:rgba(239,201,128,.7);
    box-shadow:0 46px 90px -40px rgba(0,8,41,.9),0 30px 70px -28px rgba(239,201,128,.55);}
}

/* ---------- Gold-Verlauf-Schrift ---------- */
/* Goldwörter changieren: der Verlauf wandert langsam hin und her */
.fx-gold,.fx-sub :is(h2,h3) em,.fx-sub .closing .stack em{
  background-image:linear-gradient(110deg,#9A7A2E 0%,#C9A84C 22%,#E8C97A 45%,#F7E8BE 50%,#E8C97A 55%,#C9A84C 78%,#9A7A2E 100%);
  background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:fxGold 10s cubic-bezier(.5,0,.5,1) infinite;}
.fx-gold-deep{
  background-image:linear-gradient(110deg,#6F541E 0%,#82632A 22%,#9A7A2E 45%,#C4A158 50%,#9A7A2E 55%,#82632A 78%,#6F541E 100%);
  background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:fxGold 10s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes fxGold{0%,100%{background-position:100% 0;}50%{background-position:0% 0;}}
/* Lichtstreif über die Hero-Überschrift */
.fx-shine,.fx-sub :is(.page-head,header.hero) h1 em{
  background-image:linear-gradient(110deg,rgba(255,250,236,0) 38%,rgba(255,250,236,.55) 45%,#fffdf6 50%,rgba(255,250,236,.55) 55%,rgba(255,250,236,0) 62%),var(--grad-gold);
  background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:130% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:fxShine 5s cubic-bezier(.6,0,.4,1) 1.2s infinite;}
@keyframes fxShine{0%,20%{background-position:130% 0,0 0;}80%,100%{background-position:-30% 0,0 0;}}
/* Pflicht: Verlaufsschrift nie abschneiden (Unterlängen, Umlaut-Punkte, kursive Überhänge) */
.fx-gold,.fx-gold-deep,.fx-shine,.fx-sub :is(h2,h3) em,.fx-sub .closing .stack em,.fx-sub :is(.page-head,header.hero) h1 em{-webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.2em .3em .42em .45em !important;margin:-.2em -.3em -.42em -.45em !important;}
/* wortweise (Safari schneidet mehrzeilige Verlaufsschrift sonst am Zeilenanfang ab), siehe fx27.js */
.gsplit{background:none !important;-webkit-text-fill-color:transparent;padding:0 !important;margin:0 !important;animation:none !important;}
.gsplit .gw{display:inline-block;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:.2em .3em .42em .45em;margin:-.2em -.3em -.42em -.45em;}

/* ---------- Gold-Buttons, die leuchten ---------- */
.fx-btn-gold,.btn.solid{background:var(--grad-gold) !important;background-size:200% 100% !important;background-position:0 0 !important;
  color:var(--navy) !important;border-color:transparent !important;
  box-shadow:0 18px 40px -14px rgba(239,201,128,.6);
  transition:background-position .6s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease) !important;}
.fx-btn-gold:hover,.fx-btn-gold:focus-visible,.btn.solid:hover,.btn.solid:focus-visible{background-position:100% 0 !important;color:var(--navy) !important;transform:translateY(-2px);
  box-shadow:0 22px 46px -12px rgba(239,201,128,.75);}
nav .btn.solid{box-shadow:0 10px 26px -12px rgba(239,201,128,.6);}

/* ---------- Lesefortschritt ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none;background:var(--grad-gold);
  transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 8px rgba(239,201,128,.55);}

/* ---------- Laufband ---------- */
.fx-band{background:var(--abyss);overflow:hidden;padding:1.25rem 0;border-top:1px solid rgba(239,201,128,.18);border-bottom:1px solid rgba(239,201,128,.18);}
.fx-band-track{display:flex;width:max-content;animation:fxMarquee 46s linear infinite;}
.fx-band:hover .fx-band-track{animation-play-state:paused;}
.fx-band-set{display:flex;list-style:none;flex:none;margin:0;padding:0;}
.fx-band-set li{display:flex;align-items:center;font-family:'Fraunces',serif;font-style:italic;font-weight:340;font-variation-settings:'wght' 340;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.4;color:var(--cr);white-space:nowrap;}
.fx-band-set li::after{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);margin:0 2.2rem;flex:none;}
@keyframes fxMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Schluss mit Ken Burns ---------- */
.fx-end{position:relative;overflow:hidden;isolation:isolate;background:var(--abyss);color:var(--cr);text-align:center;
  min-height:min(86vh,820px);display:flex;align-items:center;justify-content:center;}
.fx-end-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.fx-end-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 55% at 50% 50%,rgba(0,8,41,.5),rgba(0,8,41,.72) 100%),
  linear-gradient(180deg,rgba(0,8,41,.82) 0%,rgba(0,8,41,.45) 40%,rgba(0,8,41,.85) 100%);}
.fx-kb{position:absolute;inset:-3%;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;transform:scale(1.1);transition:transform 9s ease-out;}
.fx-kb img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:saturate(.85);display:block;}
.fx-end.in-view .fx-kb{transform:scale(1);}
@media(max-width:1000px){.fx-kb{grid-template-columns:repeat(2,1fr);}.fx-kb img:nth-child(n+3){display:none;}}

/* ---------- Einblenden: nur Karten und Fotos ---------- */
@media (prefers-reduced-motion:no-preference){
  .fx-in{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease);}
  .fx-in.in{opacity:1;transform:none;}
  /* fx27.js nimmt fx-in nach dem Hereingleiten wieder weg, dann gilt der schnelle Hover der Karte */
}

@media (prefers-reduced-motion:reduce){
  .fx-sheen,.fx-gold,.fx-gold-deep,.fx-shine,.fx-sub :is(.card,.step,.service,.contact-card),.fx-sub :is(h2,h3) em,.fx-sub .closing .stack em,.fx-sub :is(.page-head,header.hero) h1 em{animation:none;}
  .fx-sheen:hover,.fx-sub :is(.card,.step,.service,.contact-card):hover{transform:none;}
  .fx-band-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}
  .fx-band-set[aria-hidden="true"]{display:none;}
  .fx-band-set{flex-wrap:wrap;justify-content:center;row-gap:.6rem;}
  .fx-kb{transform:none;transition:none;}
}

/* =========================================================
   Unterseiten (body.fx-sub): dieselben Effekte auf den bestehenden Bauteilen.
   Farben bleiben wie bisher (Grund --black, Inseln --panel), dazu der Hell-Dunkel-Schimmer.
   ========================================================= */
.fx-sub .page-head{background:
  radial-gradient(50% 75% at 10% 0%,rgba(239,201,128,.12),transparent 70%),
  radial-gradient(55% 80% at 94% 100%,rgba(36,64,160,.22),transparent 70%),
  var(--black);}
.fx-sub main > section:not(.salon):not(.titles):not(.closing):nth-of-type(odd),
.fx-sub main > .pair-desktop > section:not(.salon):not(.titles):not(.closing):nth-of-type(odd){background:
  radial-gradient(50% 45% at 4% 0%,rgba(239,201,128,.07),transparent 70%),
  radial-gradient(55% 55% at 100% 75%,rgba(36,64,160,.17),transparent 70%),
  var(--black);}
.fx-sub main > section:not(.salon):not(.titles):not(.closing):nth-of-type(even),
.fx-sub main > .pair-desktop > section:not(.salon):not(.titles):not(.closing):nth-of-type(even){background:
  radial-gradient(50% 45% at 96% 0%,rgba(239,201,128,.07),transparent 70%),
  radial-gradient(55% 55% at 0% 80%,rgba(36,64,160,.17),transparent 70%),
  var(--black);}
.fx-sub .salon{background:
  radial-gradient(55% 45% at 8% 0%,rgba(239,201,128,.11),transparent 70%),
  radial-gradient(45% 40% at 96% 100%,rgba(239,201,128,.08),transparent 70%),
  radial-gradient(70% 60% at 60% 40%,rgba(36,64,160,.22),transparent 70%),
  var(--panel);}

/* Überschriften im CI-Gewicht 340 */
.fx-sub :is(h1,h2,.closing .stack){font-weight:340;font-variation-settings:'wght' 340;}

/* Texte stehen sofort da (alte Abschnitts-Einblendung aus), nur Karten und Fotos gleiten herein (fx27.js) */
.fx-sub .reveal{opacity:1 !important;transform:none !important;transition:none !important;}

/* Karten: Mobil-Hervorhebung beim Scrollen im neuen Look */
@media(max-width:860px){.fx-sub :is(.card,.step,.service,.contact-card).is-active{transform:translateY(-4px);border-color:rgba(239,201,128,.7);
  box-shadow:0 30px 70px -36px rgba(0,8,41,.9),0 22px 50px -28px rgba(239,201,128,.5);}}

/* Fotos und Vorher/Nachher: Goldrand beim Hovern */
.fx-sub :is(.intro-shot,.duo-media img,.ba-pair figure,.salon-photos img,.slideshow,.mag-cover){transition:border-color .5s,box-shadow .5s var(--ease);}
@media(hover:hover){.fx-sub :is(.intro-shot,.duo-media img,.ba-pair figure,.salon-photos img,.slideshow,.mag-cover):hover{border-color:rgba(239,201,128,.7);box-shadow:0 30px 70px -34px rgba(239,201,128,.45);}}

/* Schluss mit Ken Burns */
.fx-sub .closing.fx-end{min-height:min(74vh,700px);padding:6rem 0;}
.fx-sub .closing.fx-end > .wrap{width:100%;position:relative;z-index:1;}
@media(max-width:760px){.fx-sub .closing.fx-end{min-height:0;padding:5rem 0;}}

/* Urlaubs-Leiste (urlaubs-hinweis.js) liegt fix oben: Navigation und Seite rücken um ihre Höhe nach unten (21.10.2026) */
nav{top:var(--ub,0px);}
body{padding-top:var(--ub,0px);}
@media(max-width:1080px){.mobile-menu{padding-top:calc(6rem + var(--ub,0px));}}

/* Handy 23.10.: Schlussbild als ein Foto statt zwei schmaler Streifen */
@media(max-width:600px){.fx-kb{grid-template-columns:1fr;}.fx-kb img:nth-child(n+2){display:none;}}