/* =============================================
   BKG Design System
   Dark: header / hero / prefooter / footer (#21293A)
   Light: ALL other sections (#FFFFFF)
   Accents: lime #D3EC8E (CTA only), pink #ED8EC3 (tags only)
   ============================================= */

:root {
  --bkg-dark:        #21293A;
  --bkg-text-light:  #f5f5f5;
  --bkg-text-dark:   #21293A;
  --bkg-muted-dark:  rgba(33, 41, 58, 0.55);
  --bkg-accent-lime: #D3EC8E;
  --bkg-accent-pink: #ED8EC3;

  /* bg--orange sections stay dark; bg--grey-50 → white via explicit rules below */
  --color-orange: 33, 41, 58;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
html, body, div, p, h1, h2, h3, h4, h5, h6, span, a, li, ul, ol,
button, label, input, textarea, select, nav, section, article, footer, header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !important;
}

/* =============================================
   BODY + HTML
   ============================================= */
html { background: #ffffff !important; }
body { background: #ffffff !important; color: var(--bkg-text-dark) !important; }

/* =============================================
   WHITE SECTIONS — all content sections
   ============================================= */
.bg--grey-50,
.home__vision,
.matrix__section,
.schema__section,
.values__section,
.home__carousel,
.home__stack,
.project__stack,
.section__stack,
.section__image__parallax,
.home__video + section,
.related-cases__list,
.page__content,
.journal__list,
.contact__section,
.faqs__section,
.pilares__section,
.team__section,
.about__section {
  background-color: #ffffff !important;
}

/* Global text on white sections → dark */
.bg--grey-50 *,
.home__vision *,
.matrix__section *,
.schema__section *,
.values__section *,
.home__carousel *,
.home__stack *,
.project__stack *,
.section__stack * {
  color: var(--bkg-text-dark) !important;
}

/* Restore accent-colored elements within white sections */
.bg--grey-50 .bkg-accent-lime,
.home__stack .c__square { background: var(--bkg-accent-lime) !important; }

/* =============================================
   DARK SECTIONS — hero / prefooter / footer
   ============================================= */
.bg--orange {
  background-color: var(--bkg-dark) !important;
}
.bg--orange * { color: var(--bkg-text-light) !important; }

/* Subpage hero — white text */
.page__hero { background-color: var(--bkg-dark) !important; }
.page__hero * { color: var(--bkg-text-light) !important; }
.page__hero { padding-top: calc(var(--header-height, 88px) + 3rem) !important; padding-bottom: 4rem !important; min-height: 35vh !important; box-sizing: border-box !important; }
.page__hero h1, .page__hero .title, .page__hero .hero__title { position: relative !important; z-index: 2 !important; }
.page__hero p, .page__hero .text__description { color: rgba(245,245,245,0.8) !important; }

/* Prefooter */
.prefooter { background-color: var(--bkg-dark) !important; }
.prefooter * { color: var(--bkg-text-light) !important; }
.prefooter .button--ghost-white { border-color: rgba(245,245,245,0.35) !important; }
.prefooter .button--ghost-white:hover * { color: var(--bkg-accent-lime) !important; }

/* =============================================
   HEADER
   ============================================= */
.page__header { z-index: 50 !important; pointer-events: all !important; background: var(--bkg-dark) !important; }
.footer--in .page__header { transform: none !important; }
.menu--opened .page__header { z-index: 9 !important; }
.page__header__inner { padding: 0.625rem var(--grid-margin) !important; }
.page__header * { color: var(--bkg-text-light) !important; }

/* Header logo */
.header__logo__symbol { height: auto !important; display: flex !important; align-items: center !important; }
.header__logo__symbol img { height: 52px !important; width: auto !important; display: block !important; filter: brightness(0) invert(1) !important; }

/* Kontakt CTA button → lime */
.page__header .button--full.button--black,
.page__header .button--full {
  background: var(--bkg-accent-lime) !important;
  border-color: var(--bkg-accent-lime) !important;
}
.page__header .button--full * { color: var(--bkg-dark) !important; }
.page__header .button--full path { fill: var(--bkg-dark) !important; }

/* Menü ghost button stays subtle */
.page__header .menu__trigger,
.page__header .button--ghost-black { border-color: rgba(245,245,245,0.3) !important; }
.page__header .menu__icon--line { background: var(--bkg-text-light) !important; }

/* header--light mode (over white section) */
.header--light { background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(8px) !important; }
.header--light * { color: var(--bkg-text-dark) !important; }
.header--light .header__logo__symbol img { filter: brightness(0) !important; }
.header--light .menu__icon--line { background: var(--bkg-text-dark) !important; }
.header--light .button--full.button--black { background: var(--bkg-dark) !important; border-color: var(--bkg-dark) !important; }
.header--light .button--full * { color: var(--bkg-text-light) !important; }

/* =============================================
   MENU OVERLAY — white panel
   ============================================= */
.menu__container { background: #ffffff !important; }
.menu__container * { color: var(--bkg-text-dark) !important; }
.menu__logo__link { height: auto !important; padding: 1rem !important; }
.menu__logo__text img { height: 48px !important; width: auto !important; filter: brightness(0) !important; }
.menu--opened .page__header__inner { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s !important; }

/* =============================================
   HERO HOMEPAGE — dark section, light text
   ============================================= */
.home__hero { background-color: var(--bkg-dark) !important; }
.home__hero * { color: var(--bkg-text-light) !important; }
.home__hero .hero__logo img { filter: brightness(0) invert(1) !important; }
.hero__logo__mobile img { filter: brightness(0) invert(1) !important; }
.h-logo--center { will-change: transform; }
.hero__logo__container { perspective: 1200px; }

/* Crosshair lines */
#interactive--logo { position: absolute !important; inset: 0 !important; pointer-events: all !important; }
.h-line { position: absolute !important; background: rgba(245,245,245,0.2) !important; }
.h-line--top, .h-line--bottom { height: 1px !important; width: 100% !important; left: 0 !important; }
.h-line--left, .h-line--right { width: 1px !important; height: 100% !important; top: 0 !important; }
.h-line--top    { top: 0 !important; }
.h-line--bottom { bottom: 0 !important; top: auto !important; }
.h-line--left   { left: 0 !important; }
.h-line--right  { right: 0 !important; left: auto !important; }

/* Video section — dark */
.home__video { background-color: var(--bkg-dark) !important; }
.home__video * { color: var(--bkg-text-light) !important; }

/* =============================================
   TAGS — pink accent (restrained)
   ============================================= */
.tag, .tag--white, .slide__tags .tag {
  background: rgba(237, 142, 195, 0.15) !important;
  border: 1px solid rgba(237, 142, 195, 0.35) !important;
  color: #9b3e73 !important;   /* darkened pink for 4.5:1 contrast on white */
  border-radius: 3px !important;
  padding: 0.1em 0.45em !important;
}
/* Tags on dark backgrounds can be the lighter pink */
.bg--orange .tag, .home__hero .tag,
.page__hero .tag, .prefooter .tag {
  color: var(--bkg-accent-pink) !important;
}

/* =============================================
   STACK ITEMS — services + project list
   ============================================= */
/* Explicit white background prevents text from lower cards bleeding through
   (important because contain:paint clips but doesn't add a background).
   position:sticky is handled by global.css for .home__stack .stack__item.    */
.stack__item {
  border-top: 1px solid rgba(33, 41, 58, 0.1) !important;
  background-color: #ffffff !important;
}
.stack__item:last-child { border-bottom: 1px solid rgba(33, 41, 58, 0.1) !important; }

/* Extend sticky top values for items 6-12 — global.css only covers 1-5.
   Formula matches Enerblock: (n-1) * (1.125rem + --grid-margin * 2) + --header-height - 1px */
@media (min-width: 681px) {
  .home__stack .stack__item:nth-of-type(6)  { top: calc(5  * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
  .home__stack .stack__item:nth-of-type(7)  { top: calc(6  * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
  .home__stack .stack__item:nth-of-type(8)  { top: calc(7  * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
  .home__stack .stack__item:nth-of-type(9)  { top: calc(8  * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
  .home__stack .stack__item:nth-of-type(10) { top: calc(9  * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
  .home__stack .stack__item:nth-of-type(11) { top: calc(10 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
  .home__stack .stack__item:nth-of-type(12) { top: calc(11 * (1.125rem + var(--grid-margin) * 2) + var(--header-height) - 1px) !important; }
}

/* Numbers */
.stack__item .pretitle { color: rgba(33, 41, 58, 0.4) !important; }

/* Category label */
.stack__item__header .pretitle.panel--scroll,
.stack__item__header .pretitle.ref--scroll { color: rgba(33, 41, 58, 0.5) !important; }

/* Clickable scroll triggers */
.stack__item .panel--scroll,
.stack__item .ref--scroll { cursor: pointer; }

/* Title */
.stack__title, .stack__item .title { color: var(--bkg-text-dark) !important; }

/* Description */
.stack__item .text__description p,
.stack__item .text__description { color: rgba(33, 41, 58, 0.7) !important; }

/* Ghost button on white bg */
.stack__item .button--ghost-black { border-color: rgba(33, 41, 58, 0.3) !important; }
.stack__item .button--ghost-black * { color: var(--bkg-text-dark) !important; }
.stack__item .button--ghost-black path { fill: var(--bkg-text-dark) !important; }
.stack__item .button--ghost-black:hover { border-color: var(--bkg-dark) !important; }

/* C__header square → lime dot */
.c__square { background: var(--bkg-accent-lime) !important; }
.c__header .pretitle { color: rgba(33, 41, 58, 0.45) !important; }

/* Dash icon */
.dash-icon path { fill: rgba(33, 41, 58, 0.35) !important; }

/* =============================================
   PROJECT STACK (referenzen page)
   ============================================= */
.project-stack__item {
  display: block !important;
  border-top: 1px solid rgba(33, 41, 58, 0.1) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
  cursor: pointer !important;
}
.project-stack__item:last-child { border-bottom: 1px solid rgba(33, 41, 58, 0.1) !important; }
.project-stack__item * { color: var(--bkg-text-dark) !important; }
.project-stack__item:hover { background: rgba(33, 41, 58, 0.025) !important; }
.project-stack__item:hover .stack__title,
.project-stack__item:hover .project__title { color: var(--bkg-dark) !important; }
.project-stack__item .stack__item__image { aspect-ratio: 4/3; overflow: hidden; }
.project-stack__item .stack__item__image img { transition: transform 0.5s cubic-bezier(0.25,0,0,1) !important; }
.project-stack__item:hover .stack__item__image img { transform: scale(1.04) !important; }

/* =============================================
   VALUES / TOGGLE BOXES
   ============================================= */
.values__section toggle-box { border-color: rgba(33, 41, 58, 0.12) !important; }
.values__section .toggle__header * { color: var(--bkg-text-dark) !important; }
.values__section .toggle__content * { color: rgba(33, 41, 58, 0.7) !important; }
.plus__icon::before, .plus__icon::after { background: var(--bkg-text-dark) !important; }

/* =============================================
   SLIDE ITEMS (carousel)
   ============================================= */
.slide__title, .slide__card * { color: var(--bkg-text-dark) !important; }
.home__carousel { border-top: 1px solid rgba(33,41,58,0.08) !important; border-bottom: 1px solid rgba(33,41,58,0.08) !important; }

/* =============================================
   FOOTER — dark
   ============================================= */
.page__footer { background-color: var(--bkg-dark) !important; }
.page__footer * { color: var(--bkg-text-light) !important; }
.page__footer .footer__menu__item a span { color: rgba(245,245,245,0.75) !important; }
.page__footer .footer__menu__item a:hover span { color: var(--bkg-accent-lime) !important; }
.page__footer .c__header { display: none !important; }   /* hide BLCK labels via CSS backup */

/* Footer address */
.footer__menu__column > div div,
.footer__social + div,
.footer__social + div > div { display: block !important; line-height: 1.65 !important; color: rgba(245,245,245,0.6) !important; }
.footer__social + div a { color: rgba(245,245,245,0.6) !important; }
.footer__social + div a:hover { color: var(--bkg-accent-lime) !important; }

/* Subfooter */
.subfooter { border-top: 1px solid rgba(245,245,245,0.1) !important; }
.subfooter .grid__layout { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; padding: 1.25rem 0 !important; }
.subfooter__column, .subfooter__author { flex: 0 0 auto !important; grid-column: unset !important; padding-left: 0 !important; }
.subfooter .copyright, .subfooter .legal__link span, .subfooter a, .subfooter .text--s { color: rgba(245,245,245,0.45) !important; font-size: 0.72rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }

/* Footer parallax (hidden, kept for JS) */
.footer__parallax { display: none !important; }
.footer__over { opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; max-height: 0 !important; }
.enerblock__window { position: relative !important; overflow: visible !important; }

/* BKG wordmark at bottom of footer */
.bkg-footer-logo-section { display: flex !important; justify-content: center !important; align-items: center !important; padding: 3rem 1.5rem 2.5rem !important; width: 100% !important; box-sizing: border-box !important; border-top: 1px solid rgba(245,245,245,0.08) !important; }
.bkg-footer-logo-section img { width: 68% !important; max-width: 680px !important; min-width: 240px !important; height: auto !important; display: block !important; filter: brightness(0) invert(1) !important; opacity: 0.45 !important; }

/* =============================================
   GLOBAL LINK HOVER
   ============================================= */
.link--underline:hover span,
.menu__item__link:hover span { color: var(--bkg-accent-lime) !important; }

/* =============================================
   MOBILE
   ============================================= */
@media (max-width: 680px) {
  .bkg-footer-logo-section img { width: 86% !important; }
  .menu__logo__text img { height: 36px !important; }
  .header__logo__symbol img { height: 40px !important; }
}