/* =========================================================
   STYLE.CSS – zentrales Stylesheet für SanaVAS
   Basierend auf dem Branding Board.
   ========================================================= */

:root {

  /* ============ BASISFARBEN – weich & beruhigend ============ */
  --sand:         #F4EFEA;  /* Warm Sand / Soft Beige */
  --blush:        #E9CFCB;  /* Puderrosa / Soft Blush */
  --sage-medium:  #C9D6CF;  /* Salbeigrün soft-medium */
  --sage-light:   #DCE5DF;  /* Salbeigrün hell */

  /* ============ NEBENFARBEN – Tiefgang & Kompetenz ============ */
  --midnight-blue: #1F2A44; /* Dunkelblau */
  --olive:          #5F6B4F; /* Olivegrün satt */
  --indigo:         #253A63; /* Deep Indigo Blue */

  /* ============ AKZENTFARBEN ============ */
  --honey:      #D9B45C;  /* Honey */
  --beere:      #8E4A5A;  /* Beere gedämpft */
  --gold:       #C8A45D;  /* Warm Gold / Honigton */
  --champagner: #D6B878;  /* Soft Honey / Champagner */

  /* ============ EINFACHE TEXTREGEL (genau 2 Fälle) ============
     Heller Hintergrund (Sand/Blush/Salbei) -> IMMER Midnight Blue als Text.
     Dunkler Hintergrund (Midnight Blue/Olive/Indigo) -> IMMER Sand als Text. */
  --text-on-light: var(--midnight-blue);
  --text-on-dark:  var(--sand);

  --bg-default: var(--sand);
  --border-color: color-mix(in srgb, var(--midnight-blue) 12%, white);

  /* ============ SCHRIFTEN (3 Rollen, wie im Branding Board) ============ */

  /* Rolle 1: Logo / Haupt-Headline / Key Messages.
     Freie, edle Web-Alternative zu "Black Mango" (Lizenzschrift, im Web-Code
     nicht ohne Weblizenz nutzbar). Bodoni Moda: hoher Strichkontrast, edel. */
  --font-heading: "Bodoni Moda", Georgia, serif;

  /* Rolle 2: Body Text / Untertitel / Beschreibung – Google Font, frei nutzbar */
  --font-body: "Montserrat", -apple-system, sans-serif;
  --font-body-weight: 300; /* "Montserrat LEICHT" laut Board */

  /* Rolle 3: Akzent / Quotes / kleine dekorative Texte – Google Font, frei nutzbar.
     Laut Board: sparsam einsetzen, nicht für Fließtext! */
  --font-accent: "Coming Soon", cursive;

  /* ============ LOGO ============ */
  --logo-height: 150px;

  /* ============ LAYOUT ============ */
  --max-width: 1000px;
  --radius: 6px;
}

/* =========================================================
   LOKAL GEHOSTETE SCHRIFTEN
   Dateien müssen in einem Ordner "fonts" neben dieser CSS-Datei liegen.
   Download-Anleitung: siehe Chat.
   ========================================================= */

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coming Soon";
  src: url("fonts/coming-soon-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  color: var(--text-on-light);
  background-color: var(--bg-default);
  line-height: 1.6;
}

main {
  flex: 1;
}

a {
  color: var(--midnight-blue);
  text-decoration: underline;
}

a:hover {
  color: var(--olive);
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* ---------- HEADER / NAVIGATION ---------- */

.site-header {
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(to bottom right, var(--olive), var(--midnight-blue));
}

.nav-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: var(--logo-height);
  width: auto;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-on-dark);
}

.main-nav a {
  margin-left: 24px;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
}

.main-nav a:hover {
  color: var(--honey);
}

/* ---------- HERO / STARTSEITEN-BEREICH ---------- */

.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 24px;
  text-align: left;
  background-color: var(--sand);
  color: var(--text-on-light);
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 16px;
  color: var(--text-on-light);
}

.hero p {
  max-width: 60ch;
  font-size: 1.15rem;
  color: var(--text-on-light);
  margin-bottom: 32px;
}

/* ---------- CALL TO ACTION / "STÖRER" ----------
   Immer: Hintergrund = eine Akzentfarbe, Schrift = Sand. */

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  background-color: var(--honey);
  color: var(--sand);
  padding: 12px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.button:hover {
  background-color: var(--beere);
  color: var(--sand);
}

/* ---------- HINWEIS: SEITE IM AUFBAU ---------- */

.notice {
  width: 100%;
  margin: 0 0 48px;
  padding: 12px 0;
  background-color: var(--beere);
  color: var(--text-on-dark);
  font-size: 0.95rem;
  overflow: hidden;
}

.notice-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  width: 100%;
  padding: 0 32px;
  overflow: hidden;
}

.notice-item {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .notice-item:nth-child(n+4) {
    display: none;
  }
  .notice-track {
    gap: 32px;
    padding: 0 16px;
  }
  .notice {
    font-size: 0.85rem;
  }
}

/* ---------- THEMEN-BLÖCKE ----------
   Direkt aus dem Branding Board. Klasse auf eine <section> setzen, je
   nachdem, worum es im Inhalt geht. 1:1 übertragbar auf Instagram-Kategorien.
   Hell -> Midnight Blue Text. Dunkel (blau/oliv) -> Sand Text. */

.theme-ernaehrung {
  background-color: var(--sage-medium);
  color: var(--text-on-light);
  padding: 56px 24px;
}
.theme-ernaehrung a, .theme-ernaehrung .highlight { color: var(--honey); }

.theme-heilkraeuter {
  background-color: var(--olive);
  color: var(--text-on-dark);
  padding: 56px 24px;
}
.theme-heilkraeuter h1, .theme-heilkraeuter h2, .theme-heilkraeuter h3 { color: var(--text-on-dark); }
.theme-heilkraeuter a, .theme-heilkraeuter .highlight { color: var(--beere); }

.theme-gesundheit {
  background-color: var(--midnight-blue);
  color: var(--text-on-dark);
  padding: 56px 24px;
}
.theme-gesundheit h1, .theme-gesundheit h2, .theme-gesundheit h3 { color: var(--text-on-dark); }
.theme-gesundheit a, .theme-gesundheit .highlight { color: var(--honey); }

.theme-persoenlich {
  background-color: var(--blush);
  color: var(--text-on-light);
  padding: 56px 24px;
}

.theme-zitat {
  background-color: var(--sage-light);
  color: var(--text-on-light);
  padding: 72px 24px;
  text-align: center;
}
.theme-zitat p {
  font-family: var(--font-accent);
  font-size: 1.4rem;
  max-width: 50ch;
  margin: 0 auto;
}

.theme-ernaehrung .inner,
.theme-heilkraeuter .inner,
.theme-gesundheit .inner,
.theme-persoenlich .inner,
.theme-zitat .inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ---------- CONTENT / RECHTLICHE SEITEN ---------- */

.content {
  max-width: 700px;
  margin: 0 auto;
  padding: 60px 24px;
}

.content h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  hyphens: auto;
  overflow-wrap: break-word;
}

.content h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: 40px;
  margin-bottom: 8px;
  color: var(--text-on-light);
}

.content p {
  margin: 4px 0;
}

/* ---------- FOOTER ---------- (dunkelblauer Abschluss statt Salbei) */

.site-footer {
  background: linear-gradient(to bottom right, var(--olive), var(--midnight-blue));
  color: var(--text-on-dark);
  margin-top: 60px;
}

.footer-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-on-dark);
}

.footer-wrapper a {
  color: var(--text-on-dark);
  text-decoration: underline;
}

.footer-wrapper a:hover {
  color: var(--honey);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 600px) {
  .nav-wrapper {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    .content h1 {
    font-size: 1.6rem;
  }
  .main-nav a {
    margin-left: 0;
    margin-right: 16px;
  }
  .hero,
  .theme-ernaehrung, .theme-heilkraeuter, .theme-gesundheit,
  .theme-persoenlich, .theme-zitat {
    padding: 48px 24px;
  }
}