/* 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 */

  --scrim: 34 37 24;
  /* 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;

  /* public/experience.html's .media vertical offset (plan
     2026-08-31-nav-review-mode-and-ux-fixes, Step 9): applied as
     object-position's Y value (object-fit: cover stays full-bleed, no
     letterboxing) — moves the visible crop window down from dead-center
     (50%) so the video/photo reads as sitting lower in frame. A single
     tunable value, not a redesign; adjust here if a real-device pass (Step
     9/M8) calls for a different offset. */
  --media-offset-y: 58%;
}

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;
}