/* ============================================================
   EYVO®
   Alle Werte stammen unverändert aus dem Code-Export des Brand Guide:
   _BRAND/PITCHDECK/eyvo-brand-guide.html, Abschnitt "Code Export".
   Nichts hier ist frei gewählt.
   ============================================================ */

/* ---------- Schriften, lokal ---------- */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/outfit-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-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: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-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;
}

/* ============================================================
   Token, wörtlich aus dem Brand Guide
   ============================================================ */

:root {
  /* Brand (Orange) */
  --orange: #E8845C;
  --orange-light: #F4A882;
  --orange-dark: #D4693F;
  /* Backgrounds */
  --cream: #FDFBF7;
  --card: #FFFFFF;
  --sand: #F5F0E8;
  --pressed: #F5F0E8;
  /* Text */
  --slate: #2D3436;
  --slate-light: #636E72;
  /* Accent (Mint) */
  --mint: #A8D5BA;
  --mint-dark: #7FB992;
  /* UI Elements */
  --border: #F5F0E8;
  --divider: #F5F0E8;
  --input-border: #E0D8CC;
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Auf hellem Grund ist der Logo-Ring Slate. */
  --logo: var(--slate);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'DM Sans', -apple-system, system-ui, sans-serif;
  --logo-font: 'Outfit', var(--sans);

  --shell: 1120px;
}

/* Dark theme overrides (warm browns, not gray) */
[data-theme="dark"] {
  --cream: #171411;
  --card: #2A2520;
  --sand: #211E1A;
  --pressed: #352F2A;
  --slate: #FDFBF7;
  --slate-light: #A39E95;
  --mint: #8FC9A3;
  --border: #3A3530;
  --divider: #3A3530;
  --input-border: #4A443E;

  /* Brand Guide, Dark Mode Guidelines:
     "Logo ring: Use white (#FFFFFF) on dark backgrounds instead of Slate" */
  --logo: #FFFFFF;
}

/* ============================================================
   Grundlagen
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--orange); color: var(--cream); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Bühne
   ============================================================ */

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vw, 26px);
  gap: clamp(20px, 4vh, 44px);
}

.bar {
  flex: none;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 20px;
  /* Nicht --border: das ist im hellen Satz mit --sand identisch, die
     Leiste hätte dann keine sichtbare Kante. --input-border ist der
     Token, den der Brand Guide für abgesetzte Ränder vorsieht. */
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xl);
  background: var(--sand);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-light);
}

.bar a {
  color: var(--slate-light);
  text-decoration: none;
  transition: color 0.25s ease;
}

.bar a:hover { color: var(--slate); }

.bar-inquiries,
.bar-end {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.bar-end { gap: 22px; }

.bar-label { opacity: 0.65; }

.bar-inquiries a {
  text-transform: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--input-border);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.bar-inquiries a:hover { border-color: var(--orange); }

.bar-copy { white-space: nowrap; }

/* ============================================================
   Kern
   ============================================================ */

.core {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(18px, 3vh, 34px);
  padding: clamp(24px, 5vh, 64px) 16px;
}

/* ---------- Logo-Lockup ----------
   E, Y, V als Text, das O ist das Auge. Übernommen aus dem Brand Guide,
   Klassen .wordmark-horizontal und .eye-o. Die dortigen Werte gelten,
   nicht die aus render/logo.ts: jene 0.76em stammen aus dem
   Canvas-Renderer für Social-Grafiken und lassen das O grösser als die
   Versalhöhe von E, Y und V erscheinen.

   Die Sperrung von 0.08em wirkt auch hinter dem V und ergibt den
   Abstand zum Auge. Deshalb kein zusätzliches gap. */

.lockup {
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--logo-font);
  font-weight: 600;
  font-size: clamp(3.2rem, 11.5vw, 8.6rem);
  letter-spacing: 0.08em;
  color: var(--logo);
  line-height: 1;

  /* Ausrichtung an der Grundlinie statt an der Mitte.
     Der Brand Guide fordert unter "Clear Space Rules" zwei Dinge:
     Ringunterkante auf der Grundlinie, Ringoberkante auf Versalhöhe.
     An der Grundlinie ausgerichtet ist das exakt herstellbar, weil die
     Unterkante des SVG dort aufsitzt. Zentriert hängt das Ergebnis
     zusätzlich von Ober- und Unterlängen der Schrift ab und liegt
     rechnerisch rund 1,6 Prozent daneben. */
  align-items: baseline;
}

.eye {
  /* Höhe des Auges, hergeleitet statt geschätzt.

     Versalhöhe von Outfit: sCapHeight steht in der Schriftdatei auf 703
     bei 1000 Einheiten pro Geviert, also 0.703em. Der Brand Guide misst
     diesen Wert zur Laufzeit und legt ihn auf --eye-cap-height; sein
     Rückfallwert 0.63em ist 10 Prozent zu klein und greift, sobald die
     Messung ausbleibt. Der Wert der Schriftdatei ist fest, deshalb hier
     direkt eingetragen.

     Der Ring endet im SVG bei 49 von 50 Einheiten, füllt also nur 98
     Prozent der Box. Da die Regel den RING auf die Versalhöhe legt und
     nicht die Box, wird herausgerechnet:
     0.703 / 0.98 = 0.7173em */
  width: 0.7173em;
  height: 0.7173em;
  display: inline-block;
  margin: 0 0.01em;

  /* An der Grundlinie sitzt die Boxunterkante auf, der Ring beginnt
     aber ein Prozent darüber. Diese 0.7173 mal 0.01 schiebt ihn
     herunter, damit die Ringunterkante die Grundlinie trifft. */
  transform: translateY(0.0072em);
}

.eye-ring { stroke: var(--logo); }

.lockup-r {
  font-size: 0.15em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--slate-light);
  /* An der Grundlinie ausgerichtet, dann angehoben, bis die Oberkante
     auf Versalhöhe liegt. Eigene Versalhöhe 0.703 mal 0.15 = 0.105em
     der Wortmarke, gewünschte Oberkante 0.703em, also 0.598em anheben.
     In eigenen em: 0.598 geteilt durch 0.15 ergibt rund 4. */
  align-self: baseline;
  transform: translateY(-4em);
  margin-left: 0.4em;
}

/* ---------- Zeilen darunter ---------- */

.tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.18;
  color: var(--slate);
  max-width: 22ch;
  text-wrap: balance;
}

/* Der Punkt am Satzende ist die Pupille der Marke. */
.stop { color: var(--orange); font-style: normal; }

/* ============================================================
   Impressum
   ============================================================ */

.sheet {
  background: var(--sand);
  color: var(--slate);
  padding: clamp(64px, 11vh, 128px) clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--border);
}

.sheet-inner {
  max-width: 620px;
  margin-inline: auto;
}

.sheet-eyebrow {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

.sheet-title {
  margin: 0 0 clamp(30px, 5vh, 46px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1;
}

.sheet-title-second {
  margin-top: clamp(56px, 9vh, 92px);
  padding-top: clamp(30px, 5vh, 46px);
  border-top: 1px solid var(--divider);
}

/* Keine Linie je Zeile, der Abstand trennt genug. */
.spec { margin: 0; }

.spec-row {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 20px;
  padding: 9px 0;
}

.spec dt {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-light);
  padding-top: 5px;
}

.spec dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.spec dd a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid var(--input-border);
  transition: border-color 0.25s ease;
}

.spec dd a:hover { border-color: var(--orange); }

.sheet-note {
  margin: clamp(30px, 5vh, 46px) 0 0;
  padding-top: clamp(24px, 4vh, 34px);
  border-top: 1px solid var(--divider);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--slate-light);
}

.colophon {
  margin: clamp(34px, 6vh, 56px) 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-light);
}

.colophon-up {
  text-decoration: none;
  transition: color 0.25s ease;
}

.colophon-up:hover { color: var(--orange); }

/* ============================================================
   Kleine Schirme
   ============================================================ */

@media (max-width: 720px) {
  .bar {
    padding: 11px 16px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .bar-bottom {
    flex-direction: column;
    gap: 9px;
    padding: 13px 16px;
  }

  .spec-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 11px 0;
  }

  .spec dt { padding-top: 0; }
}

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