/* ============================================================
   SOL Solution Point — Basis-Layer
   Wortgetreue Übernahme der globalen Regeln aus global.css:
   Inset-System (.sol-container*), Reveal-on-Scroll, Typo-Utilities,
   Gap-System, Fokus-Ring, Brand-Gradient, Button-Fade.
   ============================================================ */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-sol-gray-900);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section[id] {
  scroll-margin-top: 120px;
}

::selection {
  background-color: var(--color-sol-blue-light);
  color: var(--color-sol-blue-dark);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-sol-blue-light) 55%, transparent);
  border-radius: var(--radius-sol-control);
}

/* ---------------------------------------------------------------
   Inset-System (Container.astro-Äquivalent)
--------------------------------------------------------------- */
.sol-container {
  margin-inline: auto;
  width: 100%;
}

.sol-container--none {
  max-width: 100%;
  padding-inline: 0;
}

.sol-container--small {
  max-width: 100%;
  padding-inline: 32px;
}
@media (min-width: 640px) {
  .sol-container--small { padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .sol-container--small { padding-inline: 80px; }
}

.sol-container--medium {
  max-width: 960px;
  padding-inline: 24px;
}
@media (min-width: 640px) {
  .sol-container--medium { padding-inline: 48px; }
}
@media (min-width: 1024px) {
  .sol-container--medium { padding-inline: 128px; }
}

.sol-container--large {
  max-width: 720px;
  padding-inline: 32px;
}
@media (min-width: 640px) {
  .sol-container--large { padding-inline: 64px; }
}
@media (min-width: 1024px) {
  .sol-container--large { padding-inline: 192px; }
}

/* ---------------------------------------------------------------
   Reveal-on-Scroll
--------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1.is-visible { transition-delay: 80ms; }
.reveal--delay-2.is-visible { transition-delay: 160ms; }
.reveal--delay-3.is-visible { transition-delay: 240ms; }
.reveal--delay-4.is-visible { transition-delay: 320ms; }
.reveal--delay-5.is-visible { transition-delay: 400ms; }

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------
   Brand-Gradient / Buttons
--------------------------------------------------------------- */
.bg-brand-gradient {
  background: linear-gradient(135deg, var(--color-sol-blue-dark) 0%, var(--color-sol-blue-light) 100%);
}

.sol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 400ms ease-out;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  border: none;
}
.sol-btn--sm { font-size: 0.75rem; padding: 0.625rem 1.25rem; }
.sol-btn--md { font-size: 0.875rem; padding: 0.875rem 1.75rem; }
.sol-btn--lg { font-size: 1rem; padding: 1.125rem 2.25rem; }

.sol-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-sol-blue-dark);
  color: #fff;
}
.sol-btn--primary::before,
.sol-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 450ms ease;
}
.sol-btn--primary::before {
  background: linear-gradient(160deg, var(--color-sol-blue-light) 0%, var(--color-sol-blue-dark) 100%);
  opacity: 1;
}
.sol-btn--primary::after {
  background: linear-gradient(160deg, var(--color-sol-blue-dark) 0%, var(--color-sol-blue-light) 100%);
  opacity: 0;
}
.sol-btn--primary:hover::after,
.sol-btn--primary:focus-visible::after { opacity: 1; }
.sol-btn--primary > span { position: relative; z-index: 10; }

.sol-btn--secondary {
  border: 2px solid var(--color-sol-blue-light);
  background: var(--color-sol-blue-light);
  color: var(--color-sol-blue-dark);
}
.sol-btn--secondary:hover { background: var(--color-sol-blue-dark); color: #fff; border-color: var(--color-sol-blue-dark); }

.sol-btn--outline {
  border: 2px solid var(--color-sol-blue-dark);
  background: transparent;
  color: var(--color-sol-blue-dark);
}
.sol-btn--outline:hover { background: var(--color-sol-blue-dark); color: #fff; }

.sol-btn--ghost-light {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
}
.sol-btn--ghost-light:hover { background: #fff; color: var(--color-sol-blue-dark); }

@media (prefers-reduced-motion: reduce) {
  .sol-btn--primary::after { transition: none; }
}

/* ---------------------------------------------------------------
   Typografie-Utilities (Größe + Gewicht + Zeilenhöhe komplett fix,
   wie im Original — bewusst nicht mit anderen Utilities mischen)
--------------------------------------------------------------- */
.display-hero { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.25rem, 5.5vw, 5rem); line-height: 1.04; letter-spacing: -0.02em; }
.display-xl { font-family: var(--font-sans); font-weight: 800; font-size: clamp(3rem, 2.4rem + 3.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em; }
.display-lg { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2.6vw, 3.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.display-md { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; }
.display-sm { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; }
.stat-display { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; }
.title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.3; letter-spacing: -0.01em; }
.lead { font-family: var(--font-sans); font-weight: 400; font-size: 1.1875rem; line-height: 1.65; }
.body { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.65; }
.body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.5; }
.eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 0.875rem; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; }
.label-uppercase { font-family: var(--font-sans); font-weight: 700; font-size: 0.75rem; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; }
.gas-formula { font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--color-sol-blue-dark); }
.gas-name { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--color-sol-blue-dark); }

/* ---------------------------------------------------------------
   Layout-Helfer
--------------------------------------------------------------- */
.text-block { max-width: 100%; margin-inline: auto; }
@media (min-width: 1024px) { .text-block { max-width: min(66.67%, 1100px); } }
.text-block--left { max-width: 100%; margin-inline: 0; }
@media (min-width: 1024px) { .text-block--left { max-width: min(66.67%, 1100px); } }
.text-center { text-align: center; }

.gap-sol-sm { gap: var(--gap-sol-sm); }
.gap-sol-md { gap: var(--gap-sol-md); }
.gap-sol-lg { gap: var(--gap-sol-lg); }

.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.sol-icon { width: 1.25em; height: 1.25em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* .legal-todo lebt in assets/css/blocks/legal.css (1:1 aus
   LegalLayout.astro übernommen) — hier bewusst nicht doppelt definiert. */