/* ============================================================
   MEKISKA Consulting & Engineering — Basis
   EINZIGE QUELLE fuer Farben, Schriften, Masse und gemeinsame
   Bausteine. Wird von index.html, impressum.html und
   datenschutz.html geladen.

   Farbwelt aus dem Logo abgeleitet:
     Gruen     #63930C
     Grau      #817F84
     Anthrazit #1B1C20 (Schattenton der Wortmarke)
   ============================================================ */

:root{
  /* --- Farben --- */
  --gruen:      #63930C;
  --gruen-licht:#A8D24F;
  --gruen-tief: #2C4409;
  --anthrazit:  #16171A;
  --anthrazit-2:#1E2024;
  --grau:       #817F84;
  --film:       #ECECEE;
  --blatt:      #F7F7F8;
  --linie:      #D4D3D8;
  --linie-2:    #E2E1E5;

  /* Dieselben Farben als RGB-Tripel, damit sie mit Transparenz
     verwendet werden koennen: rgba(var(--gruen-rgb), .08) */
  --gruen-rgb:     99,147,12;
  --blatt-rgb:     247,247,248;
  --anthrazit-rgb: 22,23,26;

  /* --- Schriften --- */
  --disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Masse --- */
  --pad:  clamp(20px, 5vw, 88px);
  --maxw: 1320px;
  --kopf: 68px;
}

/* ---------- Grundlagen ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--film);
  color:var(--anthrazit);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gruen); color:#fff; }
:focus-visible{ outline:2px solid var(--gruen); outline-offset:3px; }

/* ---------- Typografie ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--grau);
  display:flex; align-items:center; gap:12px;
  margin:0;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gruen); flex:none; }

.h-xl{
  font-family:var(--disp); font-stretch:108%; font-weight:800;
  font-size:clamp(2.6rem,7.4vw,6.2rem);
  line-height:.94; letter-spacing:-.035em; text-transform:uppercase;
  margin:0;
}
.h-lg{
  font-family:var(--disp); font-stretch:104%; font-weight:750;
  font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.02; letter-spacing:-.028em; text-transform:uppercase;
  margin:.35em 0 0;
}
.h-md{
  font-family:var(--disp); font-stretch:100%; font-weight:700;
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  line-height:1.15; letter-spacing:-.015em; margin:0;
}
.lead{
  font-size:clamp(1.05rem,1.5vw,1.32rem);
  line-height:1.55; font-weight:300;
  color:var(--anthrazit-2); max-width:62ch;
}
.muted{ color:var(--grau); }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; }

/* ---------- Raster ---------- */

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- Kopfleiste ---------- */

.topbar{
  position:sticky; top:0; z-index:80;
  height:var(--kopf);
  display:flex; align-items:center;
  background:rgba(var(--blatt-rgb),.94);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linie);
}
.topbar .wrap{ display:flex; align-items:center; gap:24px; width:100%; }

.brand{ display:block; margin-right:auto; line-height:0; }
.brand img{ height:40px; width:auto; }

.nav{ display:none; gap:26px; }
@media(min-width:1020px){ .nav{ display:flex; } }
.nav a{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--anthrazit); opacity:.68;
  position:relative; padding-bottom:3px;
  transition:opacity .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  height:2px; width:0; background:var(--gruen);
  transition:width .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ width:100%; }

.zurueck{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--anthrazit);
  border-bottom:2px solid var(--gruen); padding-bottom:3px;
}
.zurueck:hover{ color:var(--gruen); }

@media(max-width:640px){
  .brand img{ height:28px; }
  .zurueck{ font-size:10px; letter-spacing:.12em; }
}

/* ---------- Schaltflaechen ---------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:11px 18px; border:1px solid currentColor;
  color:var(--gruen); background:transparent; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
}
.btn::after{ content:"→"; transition:transform .25s; }
.btn:hover{ background:var(--gruen); border-color:var(--gruen); color:#fff; }
.btn:hover::after{ transform:translateX(4px); }

.btn-solid{ background:var(--gruen); color:#fff; border-color:var(--gruen); }
.btn-solid:hover{ background:var(--anthrazit); border-color:var(--anthrazit); color:#fff; }

@media(max-width:640px){
  .btn{ padding:9px 13px; font-size:10px; letter-spacing:.12em; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}