/* =========================================================
   Elgass Tech & Consulting – styles
   No external fonts, no trackers, mobile-first.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --c-bg: #f5f7fa;
  --c-surface: #ffffff;
  --c-ink: #0f1f33;          /* dark base */
  --c-ink-2: #1c3a5e;
  --c-ink-soft: #3a4a60;
  --c-muted: #5b6878;
  --c-line: #d8dee7;
  --c-line-soft: #e6ebf2;
  --c-accent: #14b89a;       /* technical teal */
  --c-accent-2: #34d9b4;
  --c-accent-ink: #064d40;
  --c-warn-bg: #fff8e6;
  --c-warn-ink: #6b4f00;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15,31,51,.06), 0 1px 1px rgba(15,31,51,.04);
  --shadow-md: 0 8px 24px rgba(15,31,51,.08);

  --w-wrap: 1140px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;

  --fs-1: clamp(2rem, 4.6vw, 3rem);
  --fs-2: clamp(1.5rem, 3vw, 2rem);
  --fs-3: 1.25rem;
  --fs-body: 1.0625rem;
  --lh: 1.6;
}

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

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg{ max-width:100%; height:auto; display:block; }

a{ color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus-visible{ color: var(--c-accent-ink); }
a:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }

h1,h2,h3{ color: var(--c-ink); line-height: 1.25; margin: 0 0 var(--space-2); }
h1{ font-size: var(--fs-1); letter-spacing:-.01em; }
h2{ font-size: var(--fs-2); letter-spacing:-.005em; }
h3{ font-size: var(--fs-3); }
p{ margin: 0 0 var(--space-2); }

ul, ol{ margin: 0 0 var(--space-2); padding-left: 1.25rem; }

.wrap{
  max-width: var(--w-wrap);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.skiplink{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skiplink:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  padding:.5rem .75rem; background:var(--c-ink); color:#fff; z-index:100;
  border-radius: 6px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--c-line);
}
.header-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-2);
  padding-block: .75rem;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  color: var(--c-ink); text-decoration: none;
}
.brand-mark svg{ display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-weight:700; font-size:1.05rem; }
.brand-sub{ font-size:.78rem; color: var(--c-muted); letter-spacing:.04em; text-transform: uppercase; }

.primary-nav{ display:none; }
.primary-nav ul{ list-style:none; padding:0; margin:0; display:flex; gap:1.25rem; }
.primary-nav a{ text-decoration:none; color: var(--c-ink-soft); font-weight:500; }
.primary-nav a:hover, .primary-nav a:focus-visible{ color: var(--c-ink); }

.header-cta{ display:none; }

.nav-toggle{
  appearance:none; border:0; background:transparent; padding:.5rem; cursor:pointer;
  width:42px; height:42px; display:inline-flex; flex-direction:column; gap:5px;
  justify-content:center; align-items:center;
  border:1px solid var(--c-line); border-radius:8px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background: var(--c-ink); border-radius:2px; }
.nav-toggle:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

@media (max-width: 860px){
  .primary-nav.open{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
  }
  .primary-nav.open ul{ flex-direction:column; gap:.85rem; }
}

@media (min-width: 861px){
  .nav-toggle{ display:none; }
  .primary-nav{ display:block; }
  .header-cta{ display:inline-flex; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.15rem;
  border-radius: var(--radius);
  font-weight:600; text-decoration:none;
  border:1px solid transparent;
  transition: transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  font-size: .98rem;
  line-height:1.1;
}
.btn-primary{
  background: var(--c-accent);
  color:#04231e;
  border-color: var(--c-accent);
}
.btn-primary:hover, .btn-primary:focus-visible{
  background: var(--c-accent-2);
  color:#04231e;
}
.btn-ghost{
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn-ghost:hover, .btn-ghost:focus-visible{
  background: var(--c-ink);
  color:#fff;
}

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(180deg, #0f1f33 0%, #15304f 100%);
  color:#eaf2fb;
  padding: var(--space-5) 0 var(--space-6);
}
.hero h1{ color:#fff; }
.hero .lead{ color:#cdd9e8; font-size:1.1rem; }
.hero-wrap{
  display:grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items:center;
}
.eyebrow{
  text-transform: uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color: var(--c-accent-2);
  margin-bottom: var(--space-2);
}
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block: var(--space-3); }
.hero .btn-ghost{ color:#fff; border-color:#cdd9e8; }
.hero .btn-ghost:hover, .hero .btn-ghost:focus-visible{ background:#fff; color: var(--c-ink); }
.trust-list{
  list-style:none; padding:0; margin: var(--space-3) 0 0;
  display:grid; gap:.4rem;
  color:#cdd9e8;
  font-size:.95rem;
}
.trust-list li{ display:flex; align-items:flex-start; gap:.6rem; }
.dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--c-accent-2);
  display:inline-block; margin-top:.55rem; flex:0 0 8px;
}
.hero-visual{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,.08);
}

@media (min-width: 880px){
  .hero-wrap{ grid-template-columns: 1.05fr .95fr; gap: var(--space-5); }
}

/* ---------- Sections ---------- */
.section{ padding: var(--space-6) 0; }
.section + .section{ border-top: 1px solid var(--c-line-soft); }
.section-intro{ color: var(--c-muted); max-width: 56ch; margin-bottom: var(--space-4); }

.problem{ background: var(--c-surface); }
.problem .prose{ max-width: 70ch; font-size:1.075rem; }
.prose.accent{
  border-left: 3px solid var(--c-accent);
  padding: .25rem 0 .25rem 1rem;
  color: var(--c-ink-2);
  font-weight: 500;
}

/* ---------- Cards (Leistungen) ---------- */
.cards{
  display:grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cards{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display:flex; flex-direction:column; gap:.5rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover{ border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.card-icon{
  width:42px; height:42px;
  background: rgba(20,184,154,.1);
  color: var(--c-accent-ink);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.25rem;
}
.card-icon svg{ width:24px; height:24px; }
.card h3{ margin:.25rem 0; }
.card p{ color: var(--c-ink-soft); }
.card-cta{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:600; text-decoration:none;
  color: var(--c-accent-ink);
}
.card-cta:hover, .card-cta:focus-visible{ color: var(--c-ink); }

/* ---------- Ablauf ---------- */
.ablauf{ background: var(--c-surface); }
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap: var(--space-3);
  grid-template-columns: 1fr;
  counter-reset: steps;
}
@media (min-width: 760px){
  .steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px){
  .steps{ grid-template-columns: repeat(4, 1fr); }
}
.steps li{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  position:relative;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background: var(--c-ink); color:#fff; font-weight:700;
  margin-bottom:.5rem;
}
.steps h3{ margin: .25rem 0; }
.steps p{ color: var(--c-ink-soft); margin:0; }

/* ---------- Warum ---------- */
.warum .reasons{
  list-style:none; padding:0; margin:0;
  display:grid; gap: var(--space-2);
}
@media (min-width: 760px){
  .warum .reasons{ grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}
.warum .reasons li{
  background:#fff;
  border:1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Über ---------- */
.two-col{
  display:grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items:start;
}
@media (min-width: 880px){
  .two-col{ grid-template-columns: 1.4fr .9fr; gap: var(--space-5); }
}
.bullet{ padding-left:1.1rem; }
.bullet li{ margin-bottom:.35rem; color: var(--c-ink-soft); }

.portrait-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align:center;
}
.portrait-shape{ margin-bottom: var(--space-2); border-radius: var(--radius); overflow:hidden; }
.portrait-name{ font-weight:700; margin:.25rem 0 0; }
.portrait-role{ color: var(--c-muted); margin:.1rem 0; font-size:.95rem; }
.portrait-region{ color: var(--c-ink-soft); margin:.1rem 0 0; font-size:.9rem; }

/* ---------- Abgrenzung ---------- */
.abgrenzung{ background: var(--c-surface); }
.abgrenzung .notes{
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--c-ink-soft);
}
.abgrenzung .notes li{ margin-bottom:.4rem; }

/* ---------- Kontakt ---------- */
.kontakt{ background: linear-gradient(180deg,#fff 0%, #eef3f8 100%); }
.contact-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.contact-card h3{ margin-top:0; }
.contact-list{ list-style:none; padding:0; margin: 0 0 var(--space-2); }
.contact-list li{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.55rem 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.contact-list li:last-child{ border-bottom:0; }
.contact-label{
  text-transform:uppercase; font-size:.72rem; letter-spacing:.1em;
  color: var(--c-muted);
}
.contact-btn{ width:100%; }
.hint{
  margin-top: var(--space-2);
  font-size:.85rem;
  color: var(--c-muted);
  background: var(--c-warn-bg);
  border: 1px solid #f1e4b8;
  border-radius: 8px;
  padding:.5rem .65rem;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--c-ink);
  color:#cdd9e8;
  padding: var(--space-4) 0;
}
.site-footer a{ color:#eaf2fb; text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible{ color: var(--c-accent-2); }
.footer-wrap{
  display:grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .footer-wrap{ grid-template-columns: 1.2fr 1.4fr 1fr; align-items:start; }
  .footer-copy{ grid-column: 1 / -1; }
}
.footer-brand{ font-weight:700; color:#fff; margin:0; }
.footer-region{ color:#9bacc4; font-size:.9rem; margin:.2rem 0 0; }
.footer-nav, .footer-legal{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:1rem; }
.footer-copy{ margin-top: var(--space-3); color:#7e91aa; font-size:.85rem; }

/* ---------- Legal pages ---------- */
.legal-page{
  background: var(--c-surface);
  padding: var(--space-5) 0 var(--space-6);
  min-height: 50vh;
}
.legal-page .wrap{ max-width: 800px; }
.legal-page h1{ margin-bottom: var(--space-3); }
.legal-page h2{ margin-top: var(--space-4); font-size: 1.4rem; }
.legal-page p, .legal-page ul{ color: var(--c-ink-soft); }
.placeholder{
  background: var(--c-warn-bg);
  border:1px solid #f1e4b8;
  border-radius: var(--radius);
  padding: var(--space-2);
  color: var(--c-warn-ink);
  margin: var(--space-2) 0;
  font-size:.95rem;
}