/* ============================================================================
   BKS Dienstleistungen — premium.css  ·  "MODERN DARK / SOPHISTICATED"
   ----------------------------------------------------------------------------
   Radikales Dark-Theme als reine VISUAL-Ebene. Ändert NUR die Darstellung —
   KEIN Inhalt, KEINE HTML-Struktur, KEINE Meta-Tags / Schema / Überschriften.
   Lädt nach style.css und überschreibt die hell-kodierten Tailwind-Farbklassen.

   Konzept:  Dunkelgrün-Basis + edle Gold-Akzente (passend zum Logo)
             Glassmorphism für Karten/Formulare, fließende Gradient-Tiefe,
             Fade-up-Scroll-Reveals, Glow-/Scale-Micro-Interactions,
             schrumpfender Glas-Header, Parallax (siehe premium.js),
             eleganter Serif-Display-Font (Fraunces) + Inter für Fließtext.
   Barrierefrei: respektiert prefers-reduced-motion, Kontraste hell auf dunkel.
   ========================================================================== */

/* Eleganter Luxus-Serif für Überschriften (Body bleibt Inter) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* Dunkel-Basis (Grün-Anthrazit) */
  --bg-0:        #0A0F0C;   /* tiefster Seitengrund */
  --bg-1:        #0E1511;   /* Sektions-Basis       */
  --bg-2:        #121B16;   /* erhöhte Fläche       */
  --green-deep:  #0C1C14;   /* dunkelgrüne Flächen  */
  --green-soft:  #142C20;
  --green:       #2E7D4F;   /* Logo-Grün            */
  --green-bright:#41A86A;

  /* Gold-Akzente */
  --gold:        #D4AF37;
  --gold-bright: #E8C766;
  --gold-deep:   #B8902F;

  /* Typo & Linien */
  --text:        #E9ECE6;
  --text-muted:  rgba(233, 236, 230, 0.70);
  --border:      rgba(255, 255, 255, 0.10);
  --border-gold: rgba(212, 175, 55, 0.35);

  /* Glas */
  --glass:        rgba(18, 27, 22, 0.55);
  --glass-strong: rgba(24, 34, 28, 0.74);
  --glass-blur:   18px;

  /* Schatten / Glow */
  --shadow-card: 0 2px 6px rgba(0,0,0,0.35), 0 14px 30px -12px rgba(0,0,0,0.55);
  --shadow-lift: 0 4px 10px rgba(0,0,0,0.4), 0 32px 60px -18px rgba(0,0,0,0.7);
  --glow-gold:   0 0 0 1px rgba(212,175,55,0.35), 0 14px 38px -10px rgba(212,175,55,0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================================
   1) GRUND: dunkler Seitengrund mit fließenden Gradient-Auren (Tiefe)
   ========================================================================== */
html, body { background-color: var(--bg-0) !important; }
body {
  color: var(--text) !important;
  background-color: var(--bg-0) !important;
  background-image:
      radial-gradient(46rem 40rem at 8% -8%,   rgba(46,125,79,0.16),  transparent 60%),
      radial-gradient(44rem 40rem at 100% 4%,  rgba(212,175,55,0.12), transparent 60%),
      radial-gradient(50rem 46rem at 50% 116%, rgba(46,125,79,0.12),  transparent 60%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elegante Serif-Überschriften + ruhigere Laufweite */
.font-display { font-family: 'Fraunces', Georgia, serif !important; letter-spacing: -0.01em; }
h1, h2, h3 { letter-spacing: -0.012em; }

/* Gold-Fokusring (höhere Spezifität schlägt Inline) */
body :focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px; }

/* Markenkonforme Custom-Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold), var(--gold-deep));
  border-radius: 999px; border: 3px solid var(--bg-0);
}
::selection { background: rgba(212,175,55,0.30); }

/* ============================================================================
   2) FARB-MAPPING: helle Tailwind-Utilities → Dark-Theme
   (premium.css lädt nach style.css → gewinnt; !important sichert Hover-Varianten)
   ========================================================================== */

/* ---- Flächen ---- */
.bg-paper { background-color: var(--bg-2) !important; }
.bg-mist  { background-color: var(--bg-1) !important; }
.bg-mist\/40 { background-color: rgba(14,21,17,0.6) !important; }
.bg-mist\/60 { background-color: rgba(14,21,17,0.7) !important; }

/* Petrol-Flächen → dunkelgrün */
.bg-petrol      { background-color: var(--green-deep) !important; }
.bg-petrol-deep { background-color: #07110B !important; }
.bg-petrol-soft { background-color: var(--green-soft) !important; }
.bg-petrol\/\[0\.06\] { background-color: rgba(255,255,255,0.04) !important; }

/* ---- Textfarben (dunkel → hell) ----
   Sicherheits-Catch-all: erfasst JEDE Opazitäts-Variante (z. B. text-ink/85,
   die in den Impressum/Datenschutz-Dialogen genutzt wird) → nie dunkel-auf-dunkel.
   Die enumerierten Regeln darunter verfeinern danach die Abstufungen. */
[class*="text-ink"] { color: var(--text) !important; }
[class*="text-petrol"]:not([class*="petrol-deep"]) { color: #F2F4EE !important; }

.text-ink     { color: var(--text) !important; }
.text-ink\/80 { color: rgba(233,236,230,0.86) !important; }
.text-ink\/75 { color: rgba(233,236,230,0.80) !important; }
.text-ink\/70 { color: rgba(233,236,230,0.74) !important; }
.text-ink\/65 { color: rgba(233,236,230,0.68) !important; }
.text-ink\/60 { color: rgba(233,236,230,0.62) !important; }
.text-ink\/55 { color: rgba(233,236,230,0.56) !important; }
.text-ink\/50 { color: rgba(233,236,230,0.50) !important; }
.text-ink\/45 { color: rgba(233,236,230,0.46) !important; }

/* Petrol-Text (Headlines) → warmes Off-White */
.text-petrol     { color: #F2F4EE !important; }
.text-petrol\/80 { color: rgba(242,244,238,0.82) !important; }
.text-petrol\/60 { color: rgba(242,244,238,0.62) !important; }

/* Text auf Gold-Buttons (war text-petrol-deep) → sehr dunkel = top Kontrast */
.text-petrol-deep { color: #0A0F0C !important; }

/* Grün-Akzent-Text → Gold */
.text-mint-dark { color: var(--gold) !important; }
.text-mint      { color: var(--gold-bright) !important; }

/* ---- Rahmen ---- */
.border-mist      { border-color: var(--border) !important; }
.border-mint      { border-color: var(--border-gold) !important; }
.border-mint\/40  { border-color: rgba(212,175,55,0.30) !important; }
.border-petrol    { border-color: var(--border-gold) !important; }

/* ---- Mint-Akzentflächen → Gold-/Grün-Töne ---- */
.bg-mint-tint     { background-color: rgba(212,175,55,0.14) !important; }
.bg-mint\/10      { background-color: rgba(212,175,55,0.10) !important; }
.bg-mint\/20      { background-color: rgba(212,175,55,0.18) !important; }

/* ---- Verlauf-Stops (hell → dunkel): betrifft Hero-Bereiche ALLER Seiten ----
   Behebt "weiße Schrift auf hellem Verlauf" auf Unterseiten (z. B. Karriere). */
.from-mint-tint,
.from-mint-tint\/60 { --tw-gradient-from: #0E1813 var(--tw-gradient-from-position) !important; }
.from-petrol        { --tw-gradient-from: #0C1C14 var(--tw-gradient-from-position) !important; }
.via-paper,
.via-white          { --tw-gradient-stops: var(--tw-gradient-from), #0A0F0C var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-petrol         { --tw-gradient-stops: var(--tw-gradient-from), #0C1C14 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-paper,
.to-mist            { --tw-gradient-to: #0A0F0C var(--tw-gradient-to-position) !important; }
.to-petrol-deep     { --tw-gradient-to: #07110B var(--tw-gradient-to-position) !important; }

/* ============================================================================
   3) GLASSMORPHISM — Karten & Formulare als frostige Glaspaneele
   ========================================================================== */
.bg-white {
  background-color: var(--glass) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-color: var(--border) !important;
}
/* Header / Mobile-Menü brauchen mehr Deckkraft */
.bg-white\/90 { background-color: rgba(10,15,12,0.90) !important; }
.bg-white\/95 { background-color: rgba(10,15,12,0.95) !important; }
.bg-paper\/90 { background-color: rgba(10,15,12,0.90) !important; }
.bg-paper\/95 { background-color: rgba(10,15,12,0.95) !important; }  /* Dialog-Kopfleiste */

/* Helle Transparenz-Overlays auf dunklen Sektionen leicht anheben */
.bg-white\/\[0\.06\] { background-color: rgba(255,255,255,0.06) !important; }
.bg-white\/\[0\.07\] { background-color: rgba(255,255,255,0.07) !important; }
.bg-white\/10        { background-color: rgba(255,255,255,0.10) !important; }

/* Große Karten: Premium-Schatten + Gold-Lichtkante + Hover-Lift  [ANIM: hover] */
#usps .reveal,
#leistungen article,
#ablauf li,
#anfrage .lead-form,
#faq .bg-white,
#kontakt .bg-paper,
#standorte a,
#referenzen figure {
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              background-color 0.3s ease, border-color 0.3s ease;
}
/* dezente Gold→Grün-Lichtkante per Maskentrick */
#leistungen article::after,
#anfrage .lead-form::after,
#standorte a::after,
#faq .bg-white::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(212,175,55,0.55), rgba(46,125,79,0.35) 50%, transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.6; transition: opacity 0.4s var(--ease); pointer-events: none;
}
@media (hover: hover) {
  #usps .reveal:hover,
  #leistungen article:hover,
  #ablauf li:hover,
  #faq .bg-white:hover,
  #kontakt .bg-paper:hover,
  #standorte a:hover,
  #referenzen figure:hover {
    transform: translateY(-8px) scale(1.015);          /* [ANIM] Karte schwebt */
    background-color: var(--glass-strong) !important;
    box-shadow: var(--shadow-lift), var(--glow-gold);  /* [ANIM] Gold-Glow */
  }
  #leistungen article:hover::after,
  #anfrage .lead-form:hover::after,
  #standorte a:hover::after,
  #faq .bg-white:hover::after { opacity: 1; }
}

/* ============================================================================
   4) HERO — animierter Mesh-/Aurora-Verlauf  [ANIM: bks-mesh]
   ========================================================================== */
#hero {
  position: relative; overflow: clip;
  background:
      radial-gradient(54rem 42rem at 6% -12%,  rgba(212,175,55,0.18), transparent 55%),
      radial-gradient(50rem 42rem at 96% -4%,  rgba(46,125,79,0.22),  transparent 55%),
      radial-gradient(42rem 36rem at 60% 116%, rgba(212,175,55,0.10), transparent 55%),
      linear-gradient(180deg, #0E1813, var(--bg-0) 72%) !important;
}
#hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
      radial-gradient(30rem 30rem at 22% 28%, rgba(46,125,79,0.22), transparent 60%),
      radial-gradient(26rem 26rem at 78% 62%, rgba(212,175,55,0.18), transparent 60%);
  filter: blur(22px);
  animation: bks-mesh 20s ease-in-out infinite alternate;   /* [ANIM] fließender Mesh */
}
@keyframes bks-mesh {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
/* Hero-Headline-Akzent als Gold-Verlauf */
#hero h1 .text-mint-dark {
  background: linear-gradient(100deg, var(--gold-bright), var(--green-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
/* Hero-Bildfläche → dunkles Glas statt hellem Verlauf */
#hero .bg-gradient-to-br {
  background: linear-gradient(135deg, #14211A, #0C1611) !important;
  border: 1px solid var(--border);
}

/* ============================================================================
   5) Sichtbare Farb-Auren hinter hellen Sektionen  [ANIM: bks-aura-drift]
   z-index:-1 → über Sektionsfarbe, unter Inhalt. overflow:clip = sicher.
   ========================================================================== */
#usps, #leistungen, #ablauf, #anfrage, #faq, #kontakt, #standorte, #ueber-uns {
  position: relative; overflow: clip;
}
#usps::before, #leistungen::before, #ablauf::before, #anfrage::before,
#faq::before, #kontakt::before, #standorte::before, #ueber-uns::before,
#leistungen::after, #anfrage::after, #faq::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 34rem; height: 34rem; border-radius: 50%; filter: blur(70px); opacity: 0.75;
}
#usps::before, #ablauf::before, #faq::before, #kontakt::before, #standorte::before {
  top: -10rem; right: -6rem;
  background: radial-gradient(circle, rgba(212,175,55,0.22), transparent 62%);
  animation: bks-aura-drift 18s ease-in-out infinite;
}
#leistungen::before, #anfrage::before, #ueber-uns::before {
  bottom: -12rem; left: -8rem;
  background: radial-gradient(circle, rgba(46,125,79,0.26), transparent 62%);
  animation: bks-aura-drift 22s ease-in-out infinite reverse;
}
#leistungen::after, #faq::after {
  top: -8rem; right: -10rem;
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 62%);
  animation: bks-aura-drift 26s ease-in-out infinite;
}
#anfrage::after {
  top: -6rem; right: -6rem;
  background: radial-gradient(circle, rgba(46,125,79,0.20), transparent 62%);
  animation: bks-aura-drift 24s ease-in-out infinite reverse;
}
@keyframes bks-aura-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(32px, 24px) scale(1.12); }
}

/* "Über uns"-Karte (war Petrol-Verlauf) → edler Grün-Gold-Verlauf */
#ueber-uns .bg-gradient-to-br {
  background: linear-gradient(135deg, #11271C, #0A140E) !important;
  border: 1px solid var(--border-gold);
}

/* ============================================================================
   6) PREMIUM-BUTTONS (Gold) — Verlauf, Glow, Scale  [ANIM: hover]
   ========================================================================== */
.bg-mint { background-color: var(--gold) !important; }
a.bg-mint, button.bg-mint, .bg-mint.cta-shine {
  background-image: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-deep) 100%) !important;
  color: #0A0F0C !important;
  box-shadow: 0 10px 26px -10px rgba(212,175,55,0.5);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s ease;
}
.hover\:bg-mint-dark:hover { background-color: var(--gold-deep) !important; }
.hover\:text-mint-dark:hover { color: var(--gold-bright) !important; }
.hover\:bg-petrol:hover      { background-color: var(--green-deep) !important; }
.hover\:bg-petrol-soft:hover { background-color: var(--green-soft) !important; }
@media (hover: hover) {
  a.bg-mint:hover, button.bg-mint:hover, .bg-mint.cta-shine:hover {
    transform: translateY(-3px) scale(1.03);                 /* [ANIM] Button hebt */
    box-shadow: var(--glow-gold);                            /* [ANIM] Gold-Glow   */
    filter: brightness(1.05);
  }
  a.bg-mint:active, button.bg-mint:active { transform: translateY(0) scale(0.99); }
  .audience-btn:hover { transform: translateY(-8px) scale(1.02); }  /* [ANIM] */
  a.border-petrol:hover, .border-2.border-petrol:hover { box-shadow: var(--glow-gold); }
}

/* ============================================================================
   7) STICKY-HEADER — Milchglas + Gold-Akzent (Spezifität schlägt Inline)
   ========================================================================== */
header#site-header {
  background-color: rgba(10,15,12,0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
}
header#site-header.scrolled {
  background-color: rgba(10,15,12,0.82) !important;
  box-shadow: 0 12px 36px -16px rgba(0,0,0,0.7) !important;
  border-bottom: 1px solid var(--border-gold);
}
/* Nav-Unterstreichung in Gold/Grün */
.nav-link::after { background: linear-gradient(90deg, var(--gold), var(--green-bright)) !important; }

/* ============================================================================
   8) SCROLL-REVEALS — Fade-up + Blur + Stagger  [ANIM: ~1000ms, duration-1000]
   main .reveal schlägt die Inline-Basisregel .reveal
   ========================================================================== */
main .reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(10px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s ease;  /* [ANIM] */
  will-change: opacity, transform, filter;
}
/* Unterseiten schalten .reveal.in, Startseite .reveal.is-visible — beide abdecken,
   sonst bleibt der Blur dauerhaft hängen ("ausgeblurt"). */
main .reveal.is-visible,
main .reveal.in { opacity: 1 !important; transform: none !important; filter: none !important; }
#usps .reveal:nth-child(2)       { transition-delay: 0.08s; }
#usps .reveal:nth-child(3)       { transition-delay: 0.16s; }
#usps .reveal:nth-child(4)       { transition-delay: 0.24s; }
#leistungen article:nth-child(2) { transition-delay: 0.06s; }
#leistungen article:nth-child(3) { transition-delay: 0.12s; }
#leistungen article:nth-child(5) { transition-delay: 0.06s; }
#leistungen article:nth-child(6) { transition-delay: 0.12s; }
#referenzen figure:nth-child(2)  { transition-delay: 0.08s; }
#referenzen figure:nth-child(3)  { transition-delay: 0.16s; }

/* ============================================================================
   9) FOOTER + DIALOGE
   ========================================================================== */
footer { position: relative; }
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--green-bright), var(--gold-deep));
}
dialog { background-color: var(--bg-2) !important; color: var(--text) !important; }
dialog[open] {
  box-shadow: var(--shadow-lift);
  animation: bks-dialog-in 0.32s var(--ease);   /* [ANIM] Dialog blendet ein */
}
@keyframes bks-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   10) PARALLAX-Ziele (Bewegung kommt aus premium.js)
   ========================================================================== */
[data-parallax] { will-change: transform; transition: transform 0.1s linear; }

/* ============================================================================
   12) MOBILE-OPTIMIERUNG (< 1024px) — flüssiger, performanter, sicher
   ========================================================================== */
@media (max-width: 1023px) {
  /* iOS rendert "fixed"-Hintergründe ruckelig → auf scroll umstellen */
  body { background-attachment: scroll !important; }

  /* Blur ist auf Handys teuer → reduzieren = flüssigeres Scrollen */
  .bg-white,
  header#site-header,
  #usps .reveal, #leistungen article, #ablauf li, #anfrage .lead-form,
  #faq .bg-white, #kontakt .bg-paper, #standorte a, #referenzen figure {
    -webkit-backdrop-filter: blur(10px) saturate(135%);
            backdrop-filter: blur(10px) saturate(135%);
  }

  /* Auren kleiner + dezenter → kein Übermalen, weniger GPU-Last */
  #usps::before, #usps::after, #leistungen::before, #leistungen::after,
  #ablauf::before, #anfrage::before, #anfrage::after, #faq::before, #faq::after,
  #kontakt::before, #standorte::before, #ueber-uns::before {
    width: 20rem; height: 20rem; filter: blur(48px); opacity: 0.6;
  }

  /* Kein horizontales Scrollen durch dekorative Elemente */
  html, body { overflow-x: hidden; }

  /* Reveal-Versatz mobil kleiner = ruhiger */
  main .reveal { transform: translateY(22px) scale(0.99); filter: blur(7px); }
}

/* ============================================================================
   11) BARRIEREFREIHEIT — Bewegungsreduktion respektieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  main .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-parallax] { transform: none !important; }
}