/* ============================================================
   KYVEN Design Tokens — Standard seit 2026-10 (abgeleitet von kyven.at)
   Fonts laden (im <head>):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&family=Manrope:wght@400;500;600;650;700;800&display=swap">
   ============================================================ */

:root {
  /* ----- Farben (exakt wie kyven.at) ----- */
  --kyven-paper:  #f5f6f2;  /* Seitenhintergrund, helles Salbei-Weiß */
  --kyven-ink:    #17221f;  /* Text, dunkle Buttons, fast-schwarzes Tannengrün */
  --kyven-muted:  #5f6762;  /* Fließtext sekundär, Leads */
  --kyven-line:   #dcded7;  /* Haarlinien, Listen-Trenner */
  --kyven-lime:   #d8ed8b;  /* EINZIGER Akzent: Highlight-Band, aktiver Knoten, em auf dunkel */
  --kyven-dark:   #18211e;  /* dunkle Sektionen, Footer, dunkle Karten */
  --kyven-dark-2: #202b25;  /* Fläche in dunklen Karten */
  --kyven-dark-line:  #3a453d;
  --kyven-dark-muted: #adb9b1;
  --kyven-sage:   #e9ece4;  /* helle Karten (z. B. "Akademie"-Karte) */
  --kyven-sage-line: #cdd3c8;
  --kyven-olive:  #556646;  /* kleine Akzent-Texte, Links "Mehr Termine" */
  --kyven-chip:      #e5efcf;  /* Auswahl-Chips, markierte Antworten */
  --kyven-chip-line: #b9cca0;
  --kyven-chip-ink:  #344827;
  --kyven-focus:  #748d2a;
  --kyven-logo-ai: #b79b6e; /* nur im Logo ("AI") */

  /* ----- Schrift ----- */
  --kyven-sans:  "Manrope", Arial, sans-serif;
  --kyven-serif: "DM Serif Display", Georgia, serif; /* nur kursiv, nur als <em> in Headlines */

  /* ----- Maße ----- */
  --kyven-content-max: 1408px;
  --kyven-gutter: 4.2%;
  --kyven-radius: 8px;     /* Karten, Bild-/Video-Flächen */
  --kyven-radius-sm: 5px;  /* Buttons, Chips, Inputs */
  --kyven-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Basis ----- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--kyven-paper);
  color: var(--kyven-ink);
  font-family: var(--kyven-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--kyven-lime); color: var(--kyven-ink); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 3px solid var(--kyven-focus);
  outline-offset: 6px;
}

/* ----- Headlines: Manrope 500, eng gespannt, Serif-Kursiv-Akzent ----- */
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(3rem, 6.9vw, 7.1rem); line-height: 1.03; letter-spacing: -0.065em; }
h2 { font-size: clamp(2.2rem, 3.25vw, 3.6rem); line-height: 1.15; letter-spacing: -0.05em; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; }
em { font-family: var(--kyven-serif); font-style: italic; font-weight: 400; letter-spacing: -0.045em; }
h1 em { white-space: nowrap; letter-spacing: -0.055em; }
h2 em { font-size: 1.08em; }

/* ----- Eyebrow: kleine Versalien mit 26px-Strich davor ----- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1.7;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }

.lead { font-size: 1rem; line-height: 1.8; color: var(--kyven-muted); max-width: 470px; }

/* ----- Buttons ----- */
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  min-height: 54px; padding: 16px 21px;
  background: var(--kyven-ink); color: #fff;
  border: 1px solid var(--kyven-ink); border-radius: var(--kyven-radius-sm);
  font: 600 0.875rem/1.5 var(--kyven-sans);
  transition: background .2s, transform .2s;
}
.button:hover { background: #34473d; transform: translateY(-2px); }
.button-small { font-size: 0.8125rem; padding: 11px 18px; min-height: 46px; }
.button-lime { background: var(--kyven-lime); color: var(--kyven-ink); border-color: var(--kyven-lime); }
.button-lime:hover { background: #e8f6b7; }
/* Pfeil rechts im Button als kleines SVG (Pfeil nach rechts oben), nie als Emoji */

.text-link { display: inline-flex; gap: 13px; align-items: center; font-size: 0.875rem; font-weight: 650; }
.text-link:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ----- Karten ----- */
.kyven-card { border-radius: var(--kyven-radius); padding: 40px; background: var(--kyven-sage); }
.kyven-card.is-dark { background: var(--kyven-dark); color: var(--kyven-paper); }
.kyven-card.is-dark p { color: var(--kyven-dark-muted); }
.num-ring { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #b5bcaf; border-radius: 50%; font-size: .75rem; }
.kyven-card.is-dark .num-ring { border-color: #57624c; color: var(--kyven-lime); }

/* ----- Nummerierte Schrittliste mit Haarlinien ----- */
.steps article { display: flex; gap: 25px; padding: 25px 0; border-bottom: 1px solid var(--kyven-line); }
.steps article > span { font-size: .75rem; color: #788268; padding-top: 5px; }
.steps p { font-size: .9375rem; line-height: 1.8; color: var(--kyven-muted); margin: 0; }

/* ----- Lime-Band (höchstens einmal pro Seite) ----- */
.kyven-band { display: flex; align-items: center; gap: 42px; background: var(--kyven-lime); padding: 39px 43px; border-radius: var(--kyven-radius); }
.kyven-band strong { font-size: 5rem; line-height: 1; font-weight: 450; letter-spacing: -.08em; }

/* ----- Chips (Auswahl, Zeitslots) ----- */
.chip { background: var(--kyven-chip); color: var(--kyven-chip-ink); border: 1px solid var(--kyven-chip-line); border-radius: var(--kyven-radius-sm); padding: 7px 10px; font-size: .75rem; font-weight: 600; }

/* ----- Dunkle Abschluss-Sektion (Kontakt, Footer) ----- */
.kyven-dark { background: var(--kyven-dark); color: var(--kyven-paper); }
.kyven-dark h2 em { color: var(--kyven-lime); }
.kyven-dark .eyebrow { color: #b9c3bb; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}