/* === base.css (MOGA FINAL – GLOBAL BACKGROUND + GRID) === */
:root{
  --primary:#005abb;
  --accent:#fed600;

  --bg:#eef6f4;
  --text:#07130f;
  --muted: rgba(7,19,15,.70);
  --line: rgba(0,0,0,.08);

  --radius:18px;
  --header-h:64px;

  /* === KEY FIX: make the site scale on big screens === */
  --max: clamp(1060px, 90vw, 1320px);

  /* HERO media scales with viewport, but stays within sane bounds */
  --media-w: clamp(520px, 42vw, 720px);
  --media-h: clamp(300px, 24vw, 420px);

  /* HERO copy can breathe on desktop */
  --hero-copy: clamp(420px, 34vw, 560px);

  /* Section vertical rhythm scales */
  --section-pad-y: clamp(40px, 4.2vw, 72px);

  /* Optional: slightly bigger type on very large screens */
  --type-scale: 1;

  /* Global grid controls */
  --grid-size: 64px;
  --grid-line: rgba(0,0,0,0.018);

  /* Footer */
  --footer-h:56px;
}

/* Reset & Base Elements */
*{ box-sizing:border-box; }
html, body{ height:100%; }

html{ background: var(--bg); }

body{
  margin:0;
  position: relative;            /* needed for pseudo background */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text);
  background: var(--bg);
}

/* =========================================================
   === GLOBAL GRID BACKGROUND (ONE PLACE, ALWAYS BEHIND)
   === This is behind ALL content and does not affect cards
   ========================================================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);

  z-index: -1; /* always behind everything in the document */
}

/* Media defaults */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }

/* Skip Link (Accessibility) */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
}
.skip-link:focus{
  left:12px;
  top:12px;
  z-index:9999;
}

/* Typography Helpers */
.kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(7,19,15,.55);
}
.h2{
  margin:0 0 12px;
  font-size: clamp(26px, 2.6vw, calc(34px * var(--type-scale)));
  letter-spacing:-0.03em;
}
.h3{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:-0.01em;
}
.lead{
  margin:0 0 18px;
  color: rgba(7,19,15,0.74);
  line-height:1.75;
  font-size: calc(15.5px * var(--type-scale));
  max-width:42ch;
}
.sublead{
  margin:0;
  color: rgba(7,19,15,0.70);
  line-height:1.75;
  font-size: calc(15px * var(--type-scale));
  max-width:70ch;
}
.t-dark{ color: rgba(7,19,15,.95); }
.t-accent{ color: var(--primary); }
.muted{ margin:0; color: rgba(7,19,15,0.62); font-size:13.5px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--primary{
  background: var(--accent);
  color:#0a0f14;
  box-shadow: 0 14px 34px rgba(254,214,0,.28);
}
.btn--primary:hover{ filter: brightness(.97); }
.btn--ghost{
  background: rgba(0,90,187,.06);
  border-color: rgba(0,90,187,.20);
  color: rgba(7,19,15,.92);
}
.btn--ghost:hover{ background: rgba(0,90,187,.10); }

/* Inline Links with Icons */
.link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: rgba(7,19,15,.78);
  font-size:14px;
  transition: all 0.2s ease;
}
.link:hover{
  color: var(--primary);
  transform: translateX(2px);
}
.link i{
  color: var(--primary);
  opacity:0.7;
  transition: opacity 0.2s ease;
}
.link:hover i{ opacity:1; }

/* =========================================================
   === CARD ACCENT (blue line)
   ========================================================= */
.card-accent{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  pointer-events:none;

  width:44px;
  height:4px;
  border-radius:999px;

  background: linear-gradient(90deg, var(--primary), rgba(0,90,187,0.35));
}

/* =========================================================
   === FOOTER (ONLY ON CONTACT)
   ========================================================= */

/* Hidden by default */
.site-footer{
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  height: var(--footer-h);
  z-index: 999;

  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.08);

  opacity:0;
  transform: translateY(12px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}

.site-footer__inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
}

/* Visible only when JS toggles */
body.footer-on .site-footer{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Prevent overlap only in contact section */
#kontakt{
  padding-bottom: calc(var(--footer-h) + 16px);
}

/* Anchor jumps never hide behind the fixed header */
section[id]{
  scroll-margin-top: var(--header-h);
}