/*
 * effectum.css — Shared styles for effectumgruppe.de
 * Single source of truth for: variables, reset, nav, footer, buttons,
 * section layouts, typography, common components.
 *
 * Each page file only contains page-specific CSS.
 */

/* ── RESET + VARIABLES ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0B1F2E;
  --navy2:  #0F2840;
  --blue:   #02679A;
  --blue2:  #3687B3;
  --gold:   #B29C79;
  --text:   #2E2E2E;
  --white:  #FFFFFF;
  --muted:  #B3D3E6;
  --light:  #F2F4F6;
  --border: rgba(179,211,230,0.12);
}

/* ── BASE ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Figtree', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 18px;
}

/* ── NAV ───────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(11,31,46,0.96);
  backdrop-filter: blur(10px);
  padding: 0 15%;
  height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}

.nav-links {
  display: flex; gap: 40px;
  list-style: none; align-items: center;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  transition: color .2s;
}

.nav-links a:hover  { color: var(--white); }
.nav-links a.active { color: var(--white); }

.nav-cta {
  background: var(--blue) !important;
  color: var(--white) !important;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--blue2) !important; }

/* ── NAV RIGHT GROUP ───────────────────────────────────────────────── */
.nav-right {
  display: flex; align-items: center; gap: 16px;
}

/* ── HAMBURGER TOGGLE ──────────────────────────────────────────────── */
.nav-toggle {
  display: flex;
  background: none; border: none;
  cursor: pointer; padding: 8px 4px;
  flex-direction: column; gap: 5px; align-items: center;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

/* ── MOBILE NAV PANEL ──────────────────────────────────────────────── */
.nav-mobile {
  display: none;
  position: fixed; top: 92px; left: 0; right: 0; z-index: 99;
  background: rgba(11,31,46,0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-mobile.open { display: block; }
.nav-mobile ul {
  list-style: none; margin: 0;
  padding: 8px 15% 14px;
  display: flex; flex-direction: column; gap: 0;
}
.nav-mobile ul li a {
  display: block; color: var(--muted);
  text-decoration: none; font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(179,211,230,0.06);
  transition: color .2s;
}
.nav-mobile ul li:last-child a { border-bottom: none; }
.nav-mobile ul li a:hover { color: var(--white); }
.nav-mobile ul li a.nav-cta-mobile {
  color: var(--gold); font-weight: 700;
  background: none; padding: 9px 0; border-radius: 0;
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border-radius: 8px;
  font-weight: 600; transition: .2s;
}

.btn-primary {
  background: var(--blue); color: var(--white);
  padding: 18px 36px; font-size: 16px;
}
.btn-primary:hover { background: var(--blue2); transform: translateY(-2px); }

.btn-primary-dark {
  background: var(--navy); color: var(--white);
  padding: 18px 36px; font-size: 16px;
}
.btn-primary-dark:hover { background: #163650; transform: translateY(-2px); }

.btn-outline {
  border: 1.5px solid rgba(179,211,230,0.35);
  color: var(--white); padding: 18px 36px;
  font-size: 16px; font-weight: 500;
}
.btn-outline:hover { border-color: var(--muted); background: rgba(179,211,230,0.06); }

.btn-outline-light {
  border: 1.5px solid rgba(179,211,230,0.35);
  color: var(--white); padding: 18px 36px;
  font-size: 16px; font-weight: 500;
  border-radius: 8px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: .2s;
}
.btn-outline-light:hover { border-color: var(--muted); background: rgba(179,211,230,0.06); }

/* ── SECTION LAYOUTS ───────────────────────────────────────────────── */
.section      { padding: 110px 15%; }
.section-bg   { padding: 110px 15%; background: var(--light); }
.section-dark { padding: 110px 15%; background: var(--navy); }

/* ── SECTION TYPOGRAPHY ────────────────────────────────────────────── */
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: block;
}

.section-label-light {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(178,156,121,0.7);
  margin-bottom: 16px; display: block;
}

.section-title {
  font-size: clamp(30px, 3.5vw, 46px); font-weight: 700;
  color: var(--navy); line-height: 1.15; margin-bottom: 20px;
}

.section-title-light {
  font-size: clamp(30px, 3.5vw, 46px); font-weight: 700;
  color: var(--white); line-height: 1.15; margin-bottom: 20px;
}

.section-sub {
  font-size: 19px; color: #666;
  line-height: 1.7; margin-bottom: 56px;
}

/* ── FACTS ROW (Über-mich teaser + Über-mich Seite) ────────────────── */
.facts-row {
  display: flex; gap: 36px; padding: 22px 0; margin-bottom: 36px;
  border-top: 1px solid rgba(2,103,154,0.1);
  border-bottom: 1px solid rgba(2,103,154,0.1);
  align-items: flex-start;
}

.fact {
  display: flex; flex-direction: column;
}

.fact-value {
  display: block;
  font-size: 20px; font-weight: 700;
  color: var(--navy); margin-bottom: 4px; line-height: 1.2;
}

.fact-label {
  display: block;
  font-size: 11px; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2;
  white-space: nowrap;
}

/* ── GOLD CORNER BRACKETS (shared decoration) ─────────────────────── */
.has-corners {
  position: relative;
}
.has-corners::before {
  content: ''; position: absolute; top: 14px; left: 14px;
  width: 20px; height: 20px;
  border-top: 2.5px solid rgba(178,156,121,0.4);
  border-left: 2.5px solid rgba(178,156,121,0.4);
  pointer-events: none;
}
.has-corners::after {
  content: ''; position: absolute; bottom: 14px; right: 14px;
  width: 20px; height: 20px;
  border-bottom: 2.5px solid rgba(178,156,121,0.4);
  border-right: 2.5px solid rgba(178,156,121,0.4);
  pointer-events: none;
}

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer {
  background: #0B1F2E;
  padding: 52px 15%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(179,211,230,0.05);
}

.footer-brand {
  color: rgba(255,255,255,0.3);
  font-size: 15px; font-weight: 300;
  letter-spacing: 4px; text-transform: lowercase;
}

.footer-links {
  display: flex; gap: 32px; list-style: none;
}

.footer-links a {
  color: rgba(255,255,255,0.3);
  text-decoration: none; font-size: 14px; transition: color .2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.65); }

.footer-copy {
  font-size: 13px; color: rgba(255,255,255,0.2);
}

/* ── CTA SECTION (shared across pages) ─────────────────────────────── */
.cta-section {
  background: var(--navy); padding: 110px 15%;
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 640px; height: 640px;
  border: 1px solid rgba(2,103,154,0.1); border-radius: 50%;
  pointer-events: none;
}
.cta-section::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 420px; height: 420px;
  border: 1px solid rgba(2,103,154,0.07); border-radius: 50%;
  pointer-events: none;
}
.cta-inner-centered { position: relative; z-index: 1; }
.cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
}
.cta-headline {
  font-size: clamp(34px, 4.5vw, 56px); font-weight: 700;
  color: var(--white); margin-bottom: 20px; line-height: 1.12;
}
.cta-body-center {
  font-size: 19px; color: var(--muted); margin-bottom: 52px;
  max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.7;
}
.cta-note {
  margin-top: 20px; font-size: 14px; color: rgba(179,211,230,0.4);
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  nav { padding: 0 5%; }
  .nav-links { display: none; }
  .section, .section-bg, .section-dark, footer,
  .cta-section { padding-left: 5%; padding-right: 5%; }
}