/* =========================================
   subpage.css
   - nutzt CI aus ci-base.css
   - neutralisiert Fullpage/Snap aus interior-page.css
   - behält Lenis Wrapper (#viewport + #fp-content)
   ========================================= */

body.is-subpage{
  /* Logo auf Subpages immer klein/zentriert */
  --safe-top: 82px; /* ähnlich wie is-logo-docked auf Index */
}

/* -----------------------------------------
   Lenis viewport (dein Container)
----------------------------------------- */
body.is-subpage #viewport.fp-viewport{
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* -----------------------------------------
   Fullpage / Snap neutralisieren
   (interior-page.css setzt .fp-section height:100vh etc.)
----------------------------------------- */
body.is-subpage .fp-section,
body.is-subpage .fp-inner{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative;
}

/* interior-page.css: .fp-section scroll-snap-align etc. */
body.is-subpage .fp-section{
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* Dots auf Subpage standardmäßig aus */
body.is-subpage .fp-dots{ display:none !important; }

/* Quote-Bar in interior-page.css ist absolut am bottom:
   Subpage: normaler Flow */
body.is-subpage .quote-bar{
  position: relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  min-height: 0 !important;
}

/* Container-Hack aus interior-page.css:
   .fp-inner > .container-fluid.h-100 { height: calc(100vh - var(--quote-h)) }
   -> auf Subpage NICHT */
body.is-subpage .fp-inner > .container-fluid.h-100{
  height: auto !important;
}

/* -----------------------------------------
   Floating Logo (wie Index-docked)
----------------------------------------- */
body.is-subpage .brand--floating{
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  transform-origin: center top;
}
body.is-subpage .brand--floating img{
  height: 40px;
}

@media (max-width: 576px){
  body.is-subpage .brand--floating{ top: 14px; }
  body.is-subpage .brand--floating img{ height: 24px; }
}

/* -----------------------------------------
   Subpage Layout Blocks
----------------------------------------- */
.subpage-content{
  padding-top: 0; /* safe-top steuern wir je Section */
}

/* HERO */
.sub-hero{
  padding-top: calc(var(--safe-top) + 28px);
  padding-bottom: clamp(18px, 3vw, 40px);
}
.sub-kicker{
  color: rgba(255,255,255,0.65);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9rem;
  margin: 0;
}

/* Standard Section */
.sub-section{
  padding-top: clamp(42px, 6vw, 96px);
  padding-bottom: clamp(42px, 6vw, 96px);
}

/* Gallery Page: oben nicht doppelt safe-top geben,
   da Hero bereits safe-top hat */
.gallery-page{
  padding-top: 0;
  padding-bottom: clamp(42px, 6vw, 96px);
}

/* Textblock unter Galerie */
.project-text{
  margin-top: clamp(18px, 3vw, 34px);
}

/* Connect Card */
.connect-card{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(254,209,54,.25);
  padding: clamp(18px, 3.2vw, 42px);
}

/* Quote-Bar Variante Subpage */
.quote-bar--subpage{
  margin-top: clamp(26px, 4vw, 48px);
}

/* CTA in Quote-Bar */
.quote-cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 14px;
  color: #fed136;
  text-decoration: none;
  border-bottom: 1px solid rgba(254,209,54,.45);
}
.quote-cta:hover,
.quote-cta:focus{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.6);
}

/* Optional: Menü optisch etwas trennen */
.menu-divider{
  height: 1px;
  width: min(520px, 80vw);
  margin: 28px auto;
  background: rgba(255,255,255,.14);
}

/* =========================================
   Akustik 3 Themenblöcke
========================================= */
/* =========================================
   Akustik 3 Themenblöcke (Font Awesome)
========================================= */
.ak3 { margin-top: .5rem; }

.ak3-row{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ak3-title{
  color:#fed136;
  letter-spacing:.04em;
  font-weight:300 !important;
  margin-bottom:.75rem;
}

.ak3-text{
  color: rgba(255,255,255,.88);
  line-height: 1.75;
  max-width: 62ch; /* verhindert “zu breit” */
}

/* Icon container */
.ak3-icon{
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(254,209,54,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 6px rgba(254,209,54,.06);
}

/* Font Awesome Icon */
.ak3-icon i{
  color: #fed136;
  font-size: 2.25rem;
  line-height: 1;
  opacity: .95;
}

/* Hover Glow */
@media (hover:hover){
  .ak3-row:hover .ak3-icon{
    box-shadow: 0 0 0 6px rgba(254,209,54,.10), 0 0 20px rgba(254,209,54,.14);
    border-color: rgba(254,209,54,.85);
  }
}

/* Mobile: kleiner */
@media (max-width: 991px){
  .ak3-icon{ width: 78px; height: 78px; }
  .ak3-icon i{ font-size: 2rem; }
}