/* Grundstile für Bausteine, aufbauend auf tokens.css · Umsetzung: Jetzt läuft's, jetztlaeufts.de */
@import url("./tokens.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--jl-font-sans);
  color: var(--jl-ink);
  background: var(--jl-gradient-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.page-shell { position: relative; min-height: 100vh; }
.glow {
  position: absolute; width: 32rem; height: 32rem; border-radius: 999px;
  background: rgba(19, 200, 200, .16); filter: blur(38px);
  pointer-events: none; z-index: 0;
}
.glow.one { top: 7rem; left: -18rem; }
.glow.two { top: 34rem; right: -20rem; background: rgba(5, 13, 42, .12); }

.container { width: min(var(--jl-container-max), calc(100% - 40px)); margin: 0 auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 800; letter-spacing: -.01em; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  font-size: 15px;
}
.btn:hover { transform: translateY(-2px); }
/* Hover/Fokus: Fläche wird dunkler, Schrift bleibt lesbar (Kontrast >= 4,5:1).
   Die Zustände stehen hier zentral und schlagen das globale a:hover (Spezifität .klasse:hover). */
.btn-primary { position: relative; isolation: isolate; background: var(--jl-gradient-cta); color: #001728; box-shadow: var(--jl-shadow-button-cyan); }
.btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #0a7c9f, var(--jl-navy-2));   /* #0a7c9f = Endton von --jl-gradient-cta */ opacity: 0; transition: opacity .22s ease-out; }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; }
.btn-primary:hover::before, .btn-primary:focus-visible::before { opacity: 1; }
.btn-secondary { color: var(--jl-navy); background: rgba(255,255,255,.7); border-color: var(--jl-line-strong); }
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--jl-navy); background: #fff; border-color: var(--jl-cyan-2); }
/* Auf dunklem Navy-Grund (Abschluss-Box, CTA-Band) */
.btn-outline-dark { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.btn-outline-dark:hover, .btn-outline-dark:focus-visible { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(104,244,232,.65); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--jl-cyan-tint-34);
  background: var(--jl-cyan-tint-09);
  color: var(--jl-cyan-deep);
  border-radius: 999px;
  font-size: 13px; font-weight: 760; letter-spacing: .01em;
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: var(--jl-cyan); box-shadow: 0 0 0 6px rgba(19, 200, 200, .15);
}

/* Tag */
.tag {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  border-radius: 999px;
  background: var(--jl-cyan-tint-10);
  border: 1px solid var(--jl-cyan-tint-22);
  color: var(--jl-cyan-deep);
  font-size: 13px; font-weight: 800;
}

/* Kicker */
.kicker {
  color: var(--jl-cyan-deep);   /* Petrol statt Cyan-2: 7,5:1 statt 2,7:1 auf Papier */ font-size: 13px; text-transform: uppercase;
  letter-spacing: .13em; font-weight: 900; margin-bottom: 12px;
}

/* Headings */
h1, h2, h3, h4, p { margin: 0; }
h1.display {
  font-size: clamp(42px, 6.2vw, 76px); line-height: .94;
  letter-spacing: -.062em; color: var(--jl-navy); font-weight: 800;
}
h2.section {
  color: var(--jl-navy); font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02; letter-spacing: -.05em; font-weight: 800;
  text-wrap: pretty;
}
h3.card-title {
  color: var(--jl-navy); font-size: 21px; line-height: 1.18;
  letter-spacing: -.025em; font-weight: 800;
}

.headline-accent {
  color: transparent;
  background: var(--jl-gradient-headline);
  -webkit-background-clip: text; background-clip: text;
}

/* Cards */
.card-light {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-radius-lg);
  padding: 24px;
  box-shadow: var(--jl-shadow-card);
}

.icon-tile {
  width: 46px; height: 46px; border-radius: 16px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  color: #002639;
  background: var(--jl-gradient-icon);
  font-weight: 950; font-size: 14px; letter-spacing: .02em;
  box-shadow: var(--jl-shadow-icon);
}

.benefit-num {
  display: inline-flex; width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 999px; background: var(--jl-navy);
  color: white; font-size: 14px; font-weight: 900;
  margin-bottom: 18px;
}

.muted { color: var(--jl-fg-muted); line-height: 1.66; }
.lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--jl-fg-muted-2); max-width: 650px; }