/* Visenza Design Tokens
   Einbetten oder Inhalt übernehmen bei jedem HTML-Output.
   Quelle: Visenza Design-Profil (Christina, Juni 2026). */

/* Schriften liegen im Projekt, nicht bei Google.

   Vorher holte diese Datei die drei Familien per @import von
   fonts.googleapis.com. Das kostet zwei fremde Verbindungen vor dem ersten
   Zeichen und setzt voraus, dass der Rechner online ist — beim Ansehen der
   entpackten Dateien war das nicht gegeben, dann fiel die Seite auf
   Systemschriften zurueck.

   Jetzt liegen die woff2-Dateien in fonts/ (rund 186 kB fuer alle drei
   Familien, geladen wird davon je nach Text nur ein Teil). Die Regeln
   unten sind zeichengleich das, was Google ausgeliefert hat, nur mit
   oertlichen Adressen: dieselben Subsets latin und latin-ext, dieselben
   unicode-range-Angaben, dasselbe font-display: swap.

   Cormorant Garamond und Jost sind variable Schriften — Google liefert je
   Subset EINE Datei fuer beide Schnitte, deshalb zeigen 300 und 400 auf
   dieselbe Datei. Das ist kein Versehen, sondern spart die Haelfte.

   Alle drei stehen unter der SIL Open Font License 1.1; die Lizenztexte
   liegen daneben in fonts/. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pinyon-script-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pinyon-script-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Farben */
  --kalk:  #F2EDE8; /* Haupthintergrund */
  --sand:  #E9E1D5; /* sekundäre Flächen, Karten */
  --stein: #D6CEC2; /* Trennlinien, Borders */
  --lehm:  #C8BAA6; /* subtile Akzente, Texturen */
  --erde:  #A89680; /* sekundärer Akzent, Labels */
  --moos:  #8A8F7A; /* Tiefe, selten */
  --fels:  #6E8B62; /* Akzent-Kontrast, selten */
  --nacht: #2A2A2E; /* Text, dunkle Flächen */

  /* Typografie */
  --font-head:   'Cormorant Garamond', serif;
  --font-body:   'Jost', sans-serif;
  --font-script: 'Pinyon Script', cursive;

  /* Rhythmus */
  --section-gap: 100px;
  --radius: 2px;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.3;
}

.script {
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: normal;
}

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

/* Primär-Button: Outline in Nacht */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid var(--nacht);
  background: transparent;
  color: var(--nacht);
  padding: 12px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn:hover {
  background: var(--nacht);
  color: var(--kalk);
}

/* Sekundär-Button: Erde */
.btn--sekundaer {
  border-color: var(--erde);
  color: var(--erde);
}
.btn--sekundaer:hover {
  background: var(--erde);
  color: var(--kalk);
}

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