/* ==========================================================================
   KAVENTA — Produktmarke
   Quelle: docs/marke/KAVENTA-Marke.md · Maschinenlesbar: kaventa-tokens.json

   NAMENSRAUM --kv-*  =  KAVENTA als Betreiber.
   Sichtbar an Anmeldung, Fusszeile, Fehlerseiten, E-Mails, Rechnungen.

   NICHT ANFASSEN: --accent, --sm-*, --brand-*.
   Die gehoeren dem Mandanten und kommen je Anfrage aus brand.color_roles.
   tests/test_portal_contrast.py und tests/test_social_design.py halten sie fest.
   ========================================================================== */

:root {
  /* ---- Grundfarben ---- */
  --kv-ink:        #05070F;   /* Grundflaeche dunkel */
  --kv-ink-2:      #0A0E1D;   /* Karte auf dunkel */
  --kv-ink-3:      #121A31;   /* erhoehte Flaeche */
  --kv-blau:       #4B6BFF;   /* Primaerfarbe */
  --kv-blau-2:     #7B93FF;   /* Verlaufsende hell */
  --kv-akz:        #35D6E8;   /* Akzent Cyan - NUR auf dunklem Grund */
  --kv-akz-hell:   #0E7C8A;   /* Akzent fuer hellen Grund (AA auf #FFF) */
  --kv-hell:       #F2F5FC;   /* Text auf dunkel / Flaeche hell */
  --kv-mute:       #8A97B4;   /* Nebentext auf dunkel */
  --kv-mute-hell:  #5A6782;   /* Nebentext auf hell (AA auf #FFF) */

  /* ---- Linien und Flaechen ---- */
  --kv-line:       rgba(255,255,255,.08);
  --kv-line-hell:  #E6E9EE;
  --kv-surf:       rgba(255,255,255,.03);

  /* ---- Verlauf: nur Akzentwoerter, Logo, Trennlinien ---- */
  --kv-grad:       linear-gradient(90deg, var(--kv-blau), var(--kv-akz));

  /* ---- Schriften ---- */
  --kv-disp:       "Bricolage Grotesque", Georgia, serif;
  --kv-body:       "Instrument Sans", "Inter", system-ui, sans-serif;
  --kv-mono:       "JetBrains Mono", "DM Mono", ui-monospace, monospace;

  /* ---- Formen ---- */
  --kv-r-el:       12px;   /* Bedienelement */
  --kv-r-card:     16px;   /* Karte */
  --kv-r-pill:     30px;   /* Pille, Filter */
  --kv-touch:      44px;   /* Mindestberuehrflaeche */

  /* ---- Bewegung ---- */
  --kv-t:          .13s;
  --kv-t-lang:     .6s;
  --kv-ease:       cubic-bezier(.2,.7,.2,1);

  /* ---- Abstaende ---- */
  --kv-s1: 4px; --kv-s2: 8px; --kv-s3: 12px; --kv-s4: 16px;
  --kv-s5: 24px; --kv-s6: 32px; --kv-s7: 48px; --kv-s8: 80px;
}

/* ---- Akzentwort in Ueberschriften: traegt die Folgerung, nicht die Wiederholung ---- */
.kv-ak {
  background: var(--kv-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- Eyebrow-Label ueber einer Ueberschrift ---- */
.kv-eyebrow {
  font-family: var(--kv-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  background: var(--kv-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Betreiberzeile: die einzige Stelle, an der KAVENTA im Mandantenportal steht ---- */
.kv-betreiber {
  font-family: var(--kv-body); font-size: 12.5px;
  color: var(--kv-mute-hell); line-height: 1.5;
}
.kv-betreiber a { color: inherit; text-decoration: underline; }

/* ---- Dunkle Flaeche (Anmeldung, Fehlerseiten, Auftritt) ---- */
.kv-dunkel {
  background: var(--kv-ink); color: var(--kv-hell);
  font-family: var(--kv-body); -webkit-font-smoothing: antialiased;
}
.kv-dunkel h1, .kv-dunkel h2, .kv-dunkel h3 {
  font-family: var(--kv-disp); font-weight: 800; letter-spacing: -1px; line-height: 1.08;
}
.kv-dunkel .kv-karte {
  background: var(--kv-ink-2); border: 1px solid var(--kv-line);
  border-radius: var(--kv-r-card);
}

/* ---- Schaltflaeche: Verb plus Objekt, primaer mit Pfeil ---- */
.kv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--kv-touch); padding: 0 22px;
  border: 0; border-radius: var(--kv-r-el);
  background: var(--kv-blau); color: #fff;
  font-family: var(--kv-body); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: filter var(--kv-t) var(--kv-ease);
}
.kv-btn:hover { filter: brightness(1.12); }
.kv-btn--geist {
  background: transparent; color: var(--kv-hell);
  border: 1px solid var(--kv-line);
}

/* ---- Bewegung ist ein Angebot, keine Bedingung ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}