/* ============================================================
   MZG Design-System – meyerzugellenbeck.org
   Gemeinsame Basis für die Hauptseite UND coach.meyerzugellenbeck.org
   Einbinden mit:  <link rel="stylesheet" href="/mzg-design.css">
   Schriften-Pfad ggf. an den Server anpassen (siehe @font-face unten).
   ============================================================ */

/* ---- Schriften (Futura) ---------------------------------- */
/* Auf dem Server liegen die .ttf z.B. unter /fonts/ – Pfad anpassen! */
@font-face {
  font-family: 'Futura';
  src: url('fonts/Futura Book font.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('fonts/futura medium condensed bt.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('fonts/Futura Bold font.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Farb- & Design-Tokens ------------------------------- */
:root {
  --blue:        #4d7fa3;   /* Haupt-Hintergrund        */
  --blue-dark:   #3a6480;   /* Sektionen, Über-mich     */
  --blue-darker: #2e5068;   /* CTA, Footer, Rechtsseiten*/
  --olive:       #8b9e5a;   /* Marke / Kreise           */
  --light-blue:  #adc6d1;   /* Marke / Kreise           */
  --button-red:  #c05c6a;   /* Outline-Buttons          */
  --cream:       #faf7f2;   /* heller Akzent (Coach)    */
  --ink:         #2b2622;   /* dunkler Text             */
  --ink-soft:    #4a423c;   /* Fließtext dunkel         */
  --accent-ocker:#a0876b;   /* warmer Akzent            */
  --white:       #ffffff;
}

/* ---- Basis ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  background: var(--blue);
  color: var(--white);
  font-weight: 300;
  line-height: 1.6;
}

/* ---- Navigation (fixed, transparent) --------------------- */
.mzg-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: flex-end; gap: 2rem;
  padding: 1rem 2rem;
  background: rgba(45, 78, 103, 0.85);
  backdrop-filter: blur(6px);
}
.mzg-nav a {
  color: var(--white); text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.85; transition: opacity 0.2s;
}
.mzg-nav a:hover { opacity: 1; }

/* ---- Buttons --------------------------------------------- */
.mzg-btn {                /* heller Flächen-Button */
  display: inline-block; background: var(--blue); color: var(--white);
  text-decoration: none; padding: 0.75rem 2.5rem; border-radius: 8px;
  font: inherit; font-weight: 500; letter-spacing: 0.05em;
  transition: background 0.2s; cursor: pointer; border: none;
}
.mzg-btn:hover { background: var(--blue-dark); }

.mzg-btn-dark {           /* dunkler Pillen-Button (Coach) */
  display: inline-block; background: var(--ink); color: var(--cream);
  text-decoration: none; padding: 0.8rem 2rem; border-radius: 999px;
  font: inherit; font-weight: 500; letter-spacing: 0.03em;
  transition: background 0.2s; cursor: pointer; border: none;
}
.mzg-btn-dark:hover { background: var(--ink-soft); }

.mzg-btn-outline {        /* „mehr Infos"-Stil */
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 2px solid var(--button-red); border-radius: 999px;
  padding: 0.35rem 1rem; color: var(--button-red);
  font: inherit; font-size: 0.8rem; font-weight: 500; background: transparent;
  cursor: pointer; letter-spacing: 0.05em; transition: background 0.2s, color 0.2s;
}
.mzg-btn-outline:hover { background: var(--button-red); color: #fff; }

/* ---- Helle Karte (Coach-Look) ---------------------------- */
.mzg-card {
  background: var(--cream); color: var(--ink);
  border-radius: 20px; padding: 3rem 2.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
.mzg-badge {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-ocker);
  border: 1px solid #d8c9b4; border-radius: 999px; padding: 0.3rem 0.9rem;
}

/* ---- Kompakter Footer ------------------------------------ */
.mzg-footer {
  padding: 3rem 1.5rem 2rem; text-align: center;
  background: var(--blue-darker); border-top: 1px solid rgba(255,255,255,0.1);
}
.mzg-footer a { color: var(--white); text-decoration: none; }
.mzg-footer a:hover { text-decoration: underline; }
.mzg-footer .meta {
  margin-top: 1.5rem; font-size: 0.75rem; opacity: 0.55;
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
}

/* ---- Überschriften-Stil ---------------------------------- */
.mzg-h1 { font-size: clamp(2rem,5vw,3.5rem); font-weight: 300; }
.mzg-h2 { font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 500; line-height: 1.35; }

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