/* ============================================================
   ing-consult — Beratende Ingenieure
   Brand foundation · Variante "Klassisch Corporate" (V6)
   Shared by every page. Palette: corporate blue + clean grays.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --blue:#1B4F8A;        /* primary corporate blue */
  --blue-700:#163F6F;
  --blue-900:#102D50;
  --blue-50:#EAF1F8;
  --blue-100:#D6E4F2;

  --ink:#1F2A37;
  --soft:#4F5C6B;
  --muted:#8A94A1;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --bg:#FFFFFF;
  --gray:#F5F7FA;
  --gray-2:#EDF1F6;
  --foot:#1F2A37;

  --fd:'Source Sans 3', system-ui, sans-serif;     /* display + body */
  --fs:'Merriweather', Georgia, serif;             /* serif headings */

  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sh-sm:0 1px 3px rgba(31,42,55,.06);
  --sh-md:0 12px 30px -16px rgba(27,79,138,.35);
  --sh-lg:0 24px 50px -20px rgba(27,79,138,.30);

  --container:1140px;
  --dur:.18s; --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--fd); font-size:17px; line-height:1.65;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3,h4{ margin:0; line-height:1.2; font-weight:700; color:var(--ink); }
h1,h2{ font-family:var(--fs); letter-spacing:-.01em; }
p{ margin:0 0 1em; }
a{ color:var(--blue); text-decoration:none; }

.eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); display:inline-block; }

/* — Layout — */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:28px; }
.section{ padding-block:clamp(56px,8vw,100px); }
.center{ text-align:center; max-width:62ch; margin-inline:auto; }
.lede{ font-size:clamp(1.08rem,1.4vw,1.28rem); color:var(--soft); }

/* — Buttons — */
.btn{
  font-family:var(--fd); font-weight:600; font-size:1rem;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.6em; border-radius:var(--r-sm);
  border:2px solid var(--blue); background:var(--blue); color:#fff;
  cursor:pointer; transition:var(--dur) var(--ease); white-space:nowrap;
}
.btn:hover{ background:var(--blue-700); border-color:var(--blue-700); }
.btn--o{ background:transparent; color:var(--blue); }
.btn--o:hover{ background:var(--blue-50); color:var(--blue-700); }
.btn--light{ background:#fff; color:var(--blue); border-color:#fff; }
.btn--light:hover{ background:var(--blue-50); border-color:var(--blue-50); }
.btn .ico{ width:18px; height:18px; }

/* — Top utility bar — */
.topbar{ background:var(--blue-700); color:#cfe0f0; font-size:.85rem; }
.topbar .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-block:8px; }
.topbar a{ color:#fff; }

/* — Header / nav — */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-sm); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px; }
.brand-lockup img{ height:44px; width:auto; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ color:var(--soft); font-weight:600; font-size:.97rem; position:relative; padding:4px 0; }
.nav a:hover{ color:var(--blue); }
.nav a.active{ color:var(--blue); }
.nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--blue); }

.langtoggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; font-size:.78rem; font-weight:600; }
.langtoggle button{ border:0; background:transparent; padding:.42em .7em; cursor:pointer; color:var(--muted); font:inherit; }
.langtoggle button.on{ background:var(--blue); color:#fff; }

.flex{ display:flex; } .center-y{ align-items:center; } .gap-m{ gap:18px; }

/* — Page hero (subpages) — */
.page-hero{ background:var(--gray); border-bottom:1px solid var(--line); padding-block:clamp(48px,6vw,82px); }
.page-hero .inner{ max-width:50ch; }

/* — Cards — */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); transition:var(--dur) var(--ease); }
.card--interactive:hover{ border-color:var(--blue); box-shadow:var(--sh-md); transform:translateY(-3px); }

/* — Footer — */
.site-footer{ background:var(--foot); color:#AEB8C4; }
.site-footer a{ color:#AEB8C4; } .site-footer a:hover{ color:#fff; }
.site-footer img{ height:38px; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.foot__col h4{ color:#fff; font-size:.95rem; margin-bottom:12px; }
.foot__col a{ display:block; margin-bottom:6px; }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:36px; padding-top:20px; border-top:1px solid #33414f; font-size:.84rem; color:var(--muted); }

/* — Reveal on scroll — */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
}

@media (max-width:880px){
  .nav{ display:none; }
  .foot__top{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .container{ padding-inline:20px; }
}