/* Visenza Design Tokens · Single Source of Truth
   Einbetten oder Inhalt übernehmen bei jedem HTML-Output (Guideline, Karussell, Landingpage).
   Aendert sich ein Wert hier, ziehen alle Outputs nach. Farben/Fonts NIE woanders neu erfinden.
   Stand: 2026-07-02 (Brief v3 + Franz/Christina-Entscheidungen). */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  /* Farben (verbindlich, nicht interpolieren) */
  --kalk:  #F4F1EC; /* Haupthintergrund, viel Weißraum */
  --sand:  #E7E0D4; /* sekundaere Flaechen, Karten, Sektionen */
  --stein: #D6CEC2; /* Trennlinien, dezente Borders */
  --lehm:  #C8B9A6; /* subtile Akzente, Texturen */
  --erde:  #A69887; /* Akzent, Labels, PRIMAER-Button-Hintergrund */
  --moos:  #4E5A51; /* dunkles Olivgruen, Tiefe, selten */
  --fels:  #3D3D38; /* dunkles Charcoal (KEIN Gruen) */
  --nacht: #1E1D1B; /* Primaertext, dunkle Sektionen */

  /* Typografie: ZWEI Schriften. Eine Serif, eine Sans. Keine dritte. */
  --font-head: 'Cormorant Garamond', serif; /* Überschriften, Versalien, gesperrt */
  --font-body: 'Inter', sans-serif;         /* Fließtext, Nav, Buttons, Labels */
  /* Akzent/Handschrift-Gefühl = Cormorant KURSIV, keine Script-Schrift.
     Verwendung über .akzent (siehe unten). */

  /* Rhythmus */
  --section-gap: 120px; /* min. Sektionsabstand oben/unten Desktop */
  --radius: 1px;        /* kantig, kein Soft-Feeling */
  --maxw: 1200px;
}

body {
  background: var(--kalk);
  color: var(--nacht);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.25;
  margin: 0;
}

/* Akzentzeile: Cormorant kursiv, gemischte Schreibweise, ruhig.
   Ersetzt die fruehere Script-Schrift (bewusst raus: zu wellness). */
.akzent {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--erde);
}

/* Label / Eyebrow */
.label {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--erde);
}

section { padding: var(--section-gap) 0; }

/* Primaer-Button: GEFUELLT Erde, Kalk-Text */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background: var(--erde);
  color: var(--kalk);
  border: 1px solid var(--erde);
  padding: 14px 34px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.btn:hover { background: var(--nacht); border-color: var(--nacht); }

/* Sekundaer-Button: Outline Nacht, transparent */
.btn--sekundaer {
  background: transparent;
  color: var(--nacht);
  border-color: var(--nacht);
}
.btn--sekundaer:hover { background: var(--nacht); color: var(--kalk); }

/* Light-Button: auf dunklem Hintergrund, Outline hell */
.btn--light {
  background: transparent;
  color: var(--kalk);
  border-color: rgba(244, 241, 236, 0.5);
}
.btn--light:hover { background: var(--kalk); color: var(--nacht); border-color: var(--kalk); }

/* Textlink mit Pfeil: "Mehr entdecken →" */
.link-arrow {
  color: var(--nacht);
  text-decoration: none;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

/* placeholder until real Visenza photography is delivered (replace <img>/background-image usage), do not delete this class silently */
.placeholder-photo {
  --ratio: 16 / 9;
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio);
  background: linear-gradient(135deg, var(--erde) 0%, var(--stein) 50%, var(--fels) 100%);
}