@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* === Atlas Brand Fonts ===
   Plus Jakarta Sans (SIL Open Font License 1.1, kostenlos kommerziell nutzbar).
   Eine Schriftfamilie für Headlines, UI und Body. */

/* ========================================================
   Atlas Finanz - Sub-Page v4-Stack Override
   Wird nach dem inline <style> jeder Sub-Page geladen
   und harmonisiert sie mit der Landing-Page v4.1.
   ======================================================== */

:root {
  --bg: #f4f5f7;
  --bg-soft: #ffffff;
  --bg-card: #ffffff;
  --bg-deep: #0b1322;
  --bg-cream: #fff4e0;
  --ink: #0e1422;
  --ink-2: #2b3242;
  --ink-3: #5b6577;
  --ink-4: #8a93a3;
  --line: #e5e7eb;
  --line-soft: #eef0f3;
  /* Atlas-Brand-Cyan (12.05.2026) */
  --blue: #0079aa;
  --blue-hi: #009CDA;
  --blue-deep: #005f86;
  --blue-tint: #E6F6FC;
  --radius: 14px;
  --radius-lg: 22px;
  --serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  background: var(--bg);
  font-family: var(--sans);
}

/* ===== Wordmark: PNG statt Text ===== */
.wordmark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wordmark .compass,
.wordmark .a,
.wordmark > span {
  display: none !important;
}
.wordmark img {
  height: 44px;
  width: auto;
  display: block;
}

/* ===== Header (sticky, v4 backdrop) ===== */
header#hdr {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* ===== Section-Backgrounds ===== */
section.block { background: var(--bg); }
section.block.soft { background: var(--bg-soft); }
.page-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  position: relative;
}
.page-hero::before {
  background: radial-gradient(120% 90% at 95% 10%, var(--blue-tint) 0%, transparent 55%);
  width: auto !important;
  height: auto !important;
  inset: 0 !important;
  border-radius: 0 !important;
  z-index: 0;
}
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* ===== Cards/Tiles auf weiß, mit subtilem Schatten ===== */
.stage {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 42, 115, .02), 0 12px 32px -24px rgba(15, 42, 115, .12);
}
.tile {
  background: #fff;
  border: 1px solid var(--line);
}
.tile.dark {
  background: var(--bg-deep);
  border-color: transparent;
}
.product-list li {
  background: #fff;
  border: 1px solid var(--line);
}

/* ===== Buttons (konsistent zu v4-1) ===== */
.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover {
  background: var(--blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(27, 63, 160, .55);
}
.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line);
  background: #fff;
}
.btn-ghost:hover {
  border-color: var(--ink-2);
}

/* ===== Crumb in Atlas-Blau ===== */
.crumb {
  display: flex;
  font-family: var(--serif);
  font-style: italic;
  color: var(--blue);
  margin-bottom: 10px;
}

.page-hero .back-link {
  margin-bottom: 32px;
}

/* ===== Active-Nav-Underline in Atlas-Blau ===== */
nav.primary a.active::after {
  background: var(--blue);
}

/* ===== Eyebrow-Style konsistent zu v4-1 ===== */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ===== Headlines mit Plus Jakarta Sans (Medium) ===== */
.page-hero h1,
.block h2,
.final-cta h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.page-hero h1 em,
.block h2 em,
.final-cta h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}
.tile h3,
.team-card h4,
.aud-card h3 {
  /* Card-Titles bleiben sans wegen Hierarchy */
  font-family: var(--sans);
}

/* ===== Mobile-Tweaks ===== */
@media (max-width: 720px) {
  .wordmark img { height: 32px; }
}

/* Header and footer refinements */
.head-finlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-right: 12px;
  transition: all .2s var(--ease);
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}
.head-finlink:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.head-finlink.is-disabled {
  cursor: default;
  opacity: .72;
}

.head-finlink.is-disabled:hover {
  color: var(--ink-2);
  border-color: var(--line);
}
.head-finlink svg { width: 12px; height: 12px; }
.head-cta svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.btn-primary svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.final-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: transparent;
}
.final-cta .btn-ghost:hover {
  color: var(--bg-deep);
  background: #fff;
  border-color: #fff;
}
@media (max-width: 1024px) {
  .head-finlink { display: none !important; }
}
@media (min-width: 1025px) {
  .head-finlink {
    display: inline-flex !important;
  }
}