/*
 * FERN·LEUCHTEN · Piano Black
 * Verbindliche Produktionsschicht für alle Seiten:
 * Tiefe, bündige Flächen statt Körnung, Halos und schwebender Schattenkarten.
 */

:root{
  --piano-black:#030303;
  --piano-depth:#080808;
  --piano-mid:#171717;
  --piano-edge:rgba(255,255,255,.13);
  --piano-inner:inset 0 1px 0 rgba(255,255,255,.14);
  --piano-field:linear-gradient(180deg,#030303 0%,#080808 54%,#030303 100%);
  --piano-surface:linear-gradient(133deg,#050505 0%,#171717 58%,#060606 100%);
  --display-accent-font:FernSans,"Segoe UI",Helvetica,Arial,sans-serif;
  --display-accent-weight:600;
  --display-accent-tracking:-.07em;
}

body:after{content:none!important;display:none!important}

/*
 * Globale Titelrichtung: Der zweite Gedanke wird nicht mehr durch eine
 * dekorative Kursivschrift, sondern durch Gewicht, Maßstab und Orange geführt.
 * So bleibt die Typografie auf dunklen und hellen Kapiteln aus einem System.
 */
:where(h1,h2,.display,.title) em{
  font-family:var(--display-accent-font)!important;
  font-size:1em!important;
  font-style:normal!important;
  font-weight:var(--display-accent-weight)!important;
  letter-spacing:var(--display-accent-tracking)!important;
}

.site-header.is-scrolled{
  background:linear-gradient(180deg,rgba(2,2,2,.96),rgba(7,7,7,.91));
  border-color:rgba(255,255,255,.1);
  box-shadow:none;
}

/* Dunkle Kapitel: neutral und tief. Reflexe bleiben innerhalb klar begrenzter Flächen. */
:where(
  .chapter-dark,.chapter-soft,.contact-chapter,
  .home-origin,.hm-tasks,.hm-process,
  .about-hero,.about-leadership,.about-origin,.about-reydel,.about-final,
  .campaign-hero,.campaign-world,.campaign-channels,
  .ga-hero,.ga-journey,.ga-account,.ga-rhythm,
  .meta-hero,.meta-impulse,.meta-formats,.meta-rhythm,
  .consulting-hero,.consulting-experience,.consulting-avvicenda,.consulting-final
){background:var(--piano-field)!important}

:where(.ga-hero,.ga-journey,.ga-account,.ga-rhythm,.meta-hero,.meta-impulse,.meta-formats,.meta-rhythm):before{
  background:var(--piano-field)!important;
}

:where(.home-origin,.about-hero,.contact-chapter):before{content:none!important}
.about-origin:before{content:none!important}

/* Helle Kapitel bleiben ruhig: kein orangefarbener Nebel hinter dem Inhalt. */
:where(
  .hm-fragment,.hm-direction,.hm-entries,
  .campaign-origin,.campaign-anatomy,.campaign-process,
  .ga-intent,.ga-tools,.meta-story,.meta-system,
  .consulting-situations,.consulting-future,.consulting-process
){background:linear-gradient(112deg,var(--paper) 0%,var(--paper-deep) 100%)!important}

.meta-system{background:var(--paper-deep)!important}

/* Bündige Piano-Flächen statt schwebender dunkler Karten. */
:where(
  .search-stage,.phase-panel,.experience-panel,
  .ga-hero-stage,.ga-search-card,.ga-search-stage,.ga-ledger,
  .meta-hero-gallery,.meta-impulse-orbit,.meta-orbit-center,.meta-orbit-item,
  .meta-story-message,.meta-format-board,.meta-device,
  .channel-card,.bridge-card + article,.principle-pair article + article,
  .hm-entry + article,.ai-boundary article + article
){
  background:var(--piano-surface)!important;
  border-color:var(--piano-edge)!important;
  box-shadow:var(--piano-inner)!important;
  backdrop-filter:none!important;
}

/* Hero-Bühnen bilden jeweils ein einziges Objekt. */
.ga-hero-stage{
  overflow:hidden;
  padding:18px;
  border:1px solid var(--piano-edge);
  border-radius:54px 54px 142px 54px;
}
.ga-hero-stage:before{content:none!important}
.ga-hero-photo{inset:18px 18px 18px 38%;border:1px solid rgba(255,255,255,.1);border-radius:34px 34px 100px 34px;box-shadow:none!important}
.ga-search-card{left:24px;bottom:24px;width:51%;box-shadow:none!important}
.ga-ledger:after,.ga-search-stage:before,.channel-card:after{content:none!important}

/* Bilder sitzen im Layout, sie schweben nicht darüber. */
:where(
  .world-detail-photo,.home-work-photo,.hm-hero-visual>img,.hm-direction-photo>img,
  .campaign-hero-image>img,.ga-hero-photo,.meta-story-image,
  .founder-portrait-image,.reydel-portrait
){box-shadow:none!important;border-color:rgba(255,255,255,.12)}

.founder-portrait:before{content:none!important}
.founder-proof-strip>span,.hm-photo-note{box-shadow:none!important;border:1px solid rgba(17,17,17,.14)}

/* Leichte Informationskarten erhalten Kontur statt diffuser Tiefe. */
:where(
  .definition-cards article,.home-journey-grid article,.bridge-card,
  .principle-pair article,.ai-layout article,.model-pair article,.after-grid article,
  .origin-card,.campaign-process-path article,
  .ga-intent-map article,.ga-tool-pair article,
  .meta-system-map,.meta-system-map article,.hm-entry,.ai-boundary,.form-card
){box-shadow:none!important}

:where(
  .definition-cards article,.home-journey-grid article,.bridge-card,
  .ai-layout article,.model-pair article,.after-grid article,
  .origin-card,.campaign-process-path article,
  .ga-intent-map article,.ga-tool-pair article,.meta-system-map article,.hm-entry
){background-color:rgba(240,234,223,.56)}

/* Signale sind präzise Punkte, keine leuchtenden Blasen. */
:where(
  .proof-note:before,.rhythm article:before,.contact-assurance span:before,
  .home-service-row>b:before,.concept-ledger b:before,
  .campaign-hero-image:after,.campaign-stamp i,.channel-number i,.campaign-process-path i,
  .origin-steps button i,.format-tabs button i,.anatomy-item button i,
  .ga-live i,.ga-intent-map article i,.ga-account-note i,.ga-tool-number i,
  .meta-orbit-item>i,.meta-story-message>span i,.meta-system-core>i,
  .meta-story-tabs button i,.meta-format-tabs button i,
  .hm-task-number i,.hm-service-mark i,.chronicle-line article.is-key:before
){box-shadow:none!important}

.world-picker,.ga-query{box-shadow:none!important}
.ga-query{border:1px solid rgba(255,255,255,.11)}

/* Das zentrale Meta-Motiv bleibt die Referenz für die neue Materialität. */
.meta-hero-gallery{
  box-shadow:none!important;
  background:var(--piano-surface)!important;
}
.meta-frame{box-shadow:none!important}

/* Keine Schattenzunahme beim Darüberfahren. */
:where(.bridge-card,.hm-entry,.channel-card,.ga-intent-map article,.ga-tool-pair article):hover{
  box-shadow:none!important;
}

@media(max-width:1099px){
  html{scroll-snap-type:y proximity}
  main>section{scroll-snap-align:start;scroll-snap-stop:always}
  .ga-hero-stage{min-height:650px}
}

@media(min-width:721px) and (max-width:1099px){
  main>section{min-height:100svh!important}
}

@media(max-width:720px){
  .ga-hero-stage{min-height:590px;padding:10px;border-radius:34px 34px 82px 34px}
  .ga-hero-photo{inset:10px 10px 45% 10px;border-radius:24px 24px 58px 24px}
  .ga-search-card{left:18px;right:18px;bottom:18px;width:auto}
}

@media(prefers-reduced-motion:reduce){
  .meta-frame img,.ga-hero-photo img{transition:none!important}
}

/* Ein gemeinsamer kompakter Abschluss sitzt auf jeder letzten Vollbildseite. */
main>section:last-child{
  position:relative;
  padding-bottom:134px;
}
main>section:last-child>.production-footer{
  display:block;
  flex:none;
  position:absolute!important;
  inset:auto 0 0!important;
  z-index:4;
  width:100%;
  height:82px;
  min-height:82px!important;
  align-items:initial;
  gap:0;
  background:#030303!important;
}
main>section:last-child>.production-footer .production-footer-inner{
  width:min(calc(100% - 72px),var(--shell));
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,2vw,32px);
  padding:10px 0 9px;
}
main>section:last-child>.production-footer .footer-brand{
  width:156px;
}
main>section:last-child>.production-footer nav{
  justify-self:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px clamp(8px,.85vw,14px);
  font-size:.41rem;
  line-height:1.25;
}
main>section:last-child>.production-footer .footer-brand small{
  margin-top:5px;
  color:rgba(240,234,223,.5);
  font-size:.39rem;
}
main>section:last-child>.production-footer .footer-legal{
  grid-column:auto;
  justify-content:flex-end;
  gap:11px;
  padding-top:0;
  border-top:0;
  color:rgba(240,234,223,.43);
  font-size:.4rem;
  white-space:nowrap;
}

@media(min-width:1100px) and (max-height:699px){
  main>section:last-child{
    height:100svh;
    min-height:100svh;
    max-height:100svh;
    padding-top:calc(var(--header) + 14px);
    padding-bottom:94px;
  }
  main>section:last-child .title{
    font-size:clamp(2.5rem,4vw,3.35rem)!important;
    line-height:.9;
  }
  main>section:last-child .lede{
    font-size:.76rem;
    line-height:1.5;
  }
  main>section:last-child .actions{
    margin-top:20px;
  }
  main>section:last-child>.shell{
    transform:translateY(-10px);
  }
  main>section:last-child>.production-footer{
    height:68px;
    min-height:68px!important;
  }
  main>section:last-child>.production-footer .production-footer-inner{
    padding:6px 0 5px;
  }
  main>section:last-child>.production-footer .footer-brand{
    width:140px;
  }
}

@media(max-width:1099px){
  main>section:last-child{
    padding-bottom:176px;
  }
  main>section:last-child>.production-footer{
    height:128px;
    min-height:128px!important;
  }
  main>section:last-child>.production-footer .production-footer-inner{
    width:min(calc(100% - 52px),var(--shell));
    grid-template-columns:1fr auto;
    gap:13px 24px;
    padding:13px 0 11px;
  }
  main>section:last-child>.production-footer nav{
    justify-self:end;
    max-width:670px;
  }
  main>section:last-child>.production-footer .footer-legal{
    grid-column:1/-1;
    justify-content:flex-start;
    padding-top:9px;
    border-top:1px solid rgba(240,234,223,.1);
  }
}

@media(max-width:720px){
  main>section:last-child{
    min-height:100svh;
    padding-bottom:210px;
  }
  .hm-final{padding-bottom:169px!important}
  .hm-final>.shell{transform:translateY(-41px)}
  .campaign-final{padding-bottom:161px!important}
  .campaign-final>.shell{transform:translateY(-49px)}
  .about-final{padding-bottom:190px!important}
  .about-final>.shell{transform:translateY(-20px)}
  .consulting-final{padding-bottom:201px!important}
  .consulting-final>.shell{transform:translateY(-9px)}
  main>section:last-child>.production-footer{
    height:166px;
    min-height:166px!important;
  }
  main>section:last-child>.production-footer .production-footer-inner{
    width:min(calc(100% - 36px),var(--shell));
    grid-template-columns:1fr;
    gap:13px;
    padding:14px 0 12px;
  }
  main>section:last-child>.production-footer nav{
    justify-self:start;
    justify-content:flex-start;
    display:grid;
    width:100%;
    max-width:none;
    grid-template-columns:repeat(3,1fr);
    gap:8px 12px;
    font-size:.39rem;
  }
  main>section:last-child>.production-footer .footer-legal{
    grid-column:auto;
    flex-wrap:wrap;
    gap:12px 18px;
  }
}