/* =====================================================
   ANSGAR NAST-KOLB — PREMIUM TYPOGRAPHY SYSTEM
   Zentralisierte CSS-Datei
   ===================================================== */

/* ===== Root Design Tokens ===== */
:root{

  /* Colors */
  --navy:#0c2238;
  --navy2:#102a47;
  --sand:#f7f3ea;
  --text:#111;
  --muted:rgba(17,17,17,.72);
  --line:rgba(0,0,0,.06);

  /* Typography */
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;

  /* Spacing System (8px scale) */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  --space-8:128px;

  /* Layout */
  --wrap:1120px;
  --reading:60ch;
}


/* ===== Base ===== */

html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  letter-spacing:-0.005em;
  background:#fff;
}

/* Content wrapper */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}


/* ===== Elite Typography ===== */

/* Headlines */
h1{
  font-family:var(--serif);
  font-weight:760;
  letter-spacing:-0.035em;
  line-height:1.03;
  margin-bottom:18px;
}

h2{
  font-family:var(--serif);
  font-weight:720;
  letter-spacing:-0.025em;
  line-height:1.14;
  margin-bottom:14px;
}

/* Lead */
.lead{
  max-width:var(--reading);
  line-height:1.85;
  letter-spacing:-0.004em;
  color:rgba(17,17,17,.82);
}

/* Body text */
p{
  max-width:var(--reading);
  font-size:17px;
  line-height:1.95;
  letter-spacing:-0.002em;
  margin:0 0 16px;
  hyphens:auto;
  -webkit-hyphens:auto;
}

p:last-child{
  margin-bottom:0;
}

/* Small text */
.note{
  font-size:14px;
  line-height:1.75;
  color:rgba(17,17,17,.62);
}


/* ===== Premium Spacing ===== */

.section{
  padding:var(--space-6) 0;
}

.hero{
  padding:var(--space-7) 0 var(--space-5);
}

.card{
  padding:var(--space-5);
}

.rule{
  margin:var(--space-6) 0;
}


/* ===== Navigation refinement ===== */

.nav a{
  font-size:15px;
  letter-spacing:0.012em;
}


/* ===== Footer refinement ===== */

.footer{
  margin-top:var(--space-7);
}


/* ===== Responsive ===== */

@media (max-width: 768px){

  h1{
    line-height:1.08;
  }

  p{
    font-size:16.5px;
    line-height:1.9;
  }

  .hero{
    padding:72px 0 40px;
  }

}