/* ============================================================
   TvK Consult · Brand Foundation
   Farben aus Website-Design-Draft + CD-Toolbox (Stand 2026)
   Schrift: Trasandina (Hausschrift)
   ============================================================ */

/* ---- Schriften ---------------------------------------------------------- */
@font-face {
  font-family: "Trasandina";
  src: url("assets/fonts/trasandina-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trasandina";
  src: url("assets/fonts/trasandina-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trasandina";
  src: url("assets/fonts/trasandina-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trasandina";
  src: url("assets/fonts/trasandina-black.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Design-Tokens ------------------------------------------------------ */
:root {
  /* Primär / Web-Palette (Design-Draft) */
  --tvk-navy:        #00294D;   /* Haupt-/Textfarbe, Flächen */
  --tvk-navy-700:    #103a5e;   /* dunkles Verlaufs-/Hover-Navy */
  --tvk-navy-500:    #3c5d7d;   /* gedämpfter Text, Sublines  */
  --tvk-navy-300:    #8aa1b8;   /* Hilfslinien, Captions      */
  --tvk-azure:       #009AFA;   /* Akzent, Linien, Highlights */
  --tvk-azure-600:   #0079d6;   /* Azure Hover                */
  --tvk-azure-soft:  #6fc2ff;   /* helle Akzent-Variante      */
  --tvk-ice:         #e9eff7;   /* heller Flächen-Hintergrund */
  --tvk-ice-deep:    #d6e3f1;   /* Ice-Abstufung, Trennlinien */
  --tvk-white:       #ffffff;

  /* Funktional */
  --tvk-text:        var(--tvk-navy);
  --tvk-text-muted:  var(--tvk-navy-500);
  --tvk-line:        var(--tvk-ice-deep);
  --tvk-bg:          var(--tvk-white);
  --tvk-bg-alt:      var(--tvk-ice);

  /* Schrift-Rollen (CD-Toolbox) */
  --tvk-font:        "Trasandina", "Helvetica Neue", Arial, sans-serif;
  --tvk-w-light:     300;  /* Headlines, Sublines, Zitate      */
  --tvk-w-book:      400;  /* Fließtext, Diagramme             */
  --tvk-w-medium:    500;  /* Sublines, Betonung, Aufzählungen */
  --tvk-w-black:     800;  /* Lead Headlines, Eye-Catcher      */

  /* Raster / Maße (6-Spalten-Prinzip) */
  --tvk-maxw:        1200px;
  --tvk-gap:         clamp(16px, 2vw, 28px);
  --tvk-radius:      4px;     /* sachlich, geringe Rundung */
  --tvk-radius-lg:   10px;

  /* Bewegung · bewusst ruhig/seriös */
  --tvk-ease:        cubic-bezier(.22, .61, .36, 1);
  --tvk-dur:         .7s;
}

/* ---- Basistypografie (optional einbindbar) ------------------------------ */
.tvk {
  font-family: var(--tvk-font);
  color: var(--tvk-text);
  font-weight: var(--tvk-w-book);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tvk-lead {
  font-weight: var(--tvk-w-black);
  line-height: .96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.tvk-h {
  font-weight: var(--tvk-w-light);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.tvk-sub {
  font-weight: var(--tvk-w-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--tvk-azure);
}
.tvk-body {
  font-weight: var(--tvk-w-book);
  line-height: 1.6;
  color: var(--tvk-text-muted);
}

/* Eyebrow / Kapitel-Marke: kurze Linie + Label (CD: Ordnungslinien) */
.tvk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--tvk-w-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--tvk-azure);
}
.tvk-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--tvk-azure);
  display: inline-block;
}

/* ---- Plus-/Pfeil-Aufzählung (CD: statt Bullet Points) ------------------- */
.tvk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.tvk-list li {
  position: relative;
  padding-left: 30px;
  font-weight: var(--tvk-w-book);
  color: var(--tvk-text);
  line-height: 1.45;
}
.tvk-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--tvk-azure);
  font-weight: var(--tvk-w-black);
  font-size: 1.1em;
  line-height: 1.3;
}
.tvk-list--arrow li::before { content: "›"; font-size: 1.25em; top: -2px; }

/* ---- Reveal-Helfer (sehr dezent, von tvk-animations.js gesteuert) ------- */
.tvk-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--tvk-dur) var(--tvk-ease),
              transform var(--tvk-dur) var(--tvk-ease);
  will-change: opacity, transform;
}
.tvk-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tvk-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}