/* ==========================================================================
   KI:Expertisezentrum.nrw — design tokens
   Source of truth: elemente/uploads/website/wcg.htm (WCAG-remediated variant)
   Values are transcribed verbatim. Do not substitute the component library's
   superseded accents (#912EFF / #FF5700 / #00DACE / #F8C600).
   ========================================================================== */

:root {
  /* Brand */
  --kiez-purple:     #3C1F66;   /* Deep Learning Purple — dark surfaces */
  --kiez-orange:     #EC6329;   /* Firewall Orange — CTA, eyebrows, links */
  --kiez-violet:     #8635F6;   /* Ctrl+Violett — headings, outline buttons */
  --kiez-cyan:       #21D6CD;   /* Open Source Cyan */
  --kiez-blue:       #27B5FC;   /* Bluetooth Blue */
  --kiez-gold:       #F0C808;   /* Token Gold */
  --kiez-white:      #fff;
  --kiez-off-white:  #FAFAFD;

  /* Violet tints — borders, hairlines, hover washes */
  --kiez-violet-50:  rgba(134, 53, 246, .5);
  --kiez-violet-25:  rgba(134, 53, 246, .25);
  --kiez-violet-15:  rgba(134, 53, 246, .15);
  --kiez-violet-10:  rgba(134, 53, 246, .10);
  --kiez-violet-06:  rgba(134, 53, 246, .06);
  --kiez-violet-03:  rgba(134, 53, 246, .03);

  /* Text tokens — the reason wcg.htm is canonical. Never hand-patch these
     with rgba()/opacity; translucent text has no computable contrast. */
  --kiez-text-on-dark:       #FFFFFF;   /* 13.29:1 on purple */
  --kiez-text-on-dark-soft:  #F2ECFF;   /* 11.53:1 on purple */
  --kiez-text-on-light:      #3C1F66;   /* 13.29:1 on white  */
  --kiez-text-on-light-soft: #5C447E;   /*  8.13:1 on white  */

  /* Focus */
  --kiez-focus-light: #F0C808;  /* on dark surfaces */
  --kiez-focus-dark:  #FFFFFF;  /* on light surfaces */

  /* Type */
  --kiez-display: 'Funnel Display', system-ui, sans-serif;
  --kiez-body:    'Funnel Sans', system-ui, sans-serif;

  /* Geometry */
  --kiez-r:   8px;
  --kiez-max: calc(100% - 48px);
}

/* --------------------------------------------------------------------------
   Base typography — scale from component library section 03 "Typografie",
   weights per wcg.htm (which raised 600 -> 700 for legibility).
   -------------------------------------------------------------------------- */

.confera-body,
.confera-body p,
.confera-body li {
  font-family: var(--kiez-body);
}

.confera-body h1, .confera-body h2, .confera-body h3,
.confera-body h4, .confera-body h5, .confera-body h6,
.confera-body .confera-title-font,
.confera-body .gdlr-core-title-font {
  font-family: var(--kiez-display);
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* Heading SIZES deliberately live in the Confera typography options, not here
   (they emit `.confera-body h3{...}` into uploads/confera-style-custom.css).
   Duplicating them here caused a cascade fight: the generated rule scores
   (0,1,1) and beat single-class component rules like .kiez-news-headline
   (0,1,0), so every card title rendered at the section-heading size.
   Display sizes belong to the component classes that need them. */

.confera-body { font-size: 15px; line-height: 1.5; color: var(--kiez-text-on-light); }

.kiez-eyebrow {
  font-family: var(--kiez-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--kiez-orange);
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.1;
}

.kiez-intro { font-size: clamp(15px, 2vw, 18px); line-height: 1.5; }
.kiez-small { font-size: 13px; line-height: 1.6; color: var(--kiez-text-on-light-soft); }

/* Text on dark surfaces */
.kiez-on-dark              { color: var(--kiez-text-on-dark); }
.kiez-on-dark .kiez-soft,
.kiez-on-dark p            { color: var(--kiez-text-on-dark-soft); }

/* --------------------------------------------------------------------------
   Focus — visible on both surfaces. wcg.htm rings form inputs in gold; we
   extend the same treatment to every focusable element so keyboard users are
   never lost. The live staging build ships zero focus-visible rules.
   -------------------------------------------------------------------------- */

.confera-body a:focus-visible,
.confera-body button:focus-visible,
.confera-body input:focus-visible,
.confera-body select:focus-visible,
.confera-body textarea:focus-visible,
.confera-body [tabindex]:focus-visible {
  outline: 3px solid var(--kiez-violet);
  outline-offset: 2px;
  border-radius: 3px;
}

.kiez-on-dark a:focus-visible,
.kiez-on-dark button:focus-visible,
.kiez-on-dark input:focus-visible,
.kiez-on-dark textarea:focus-visible,
.kiez-on-dark [tabindex]:focus-visible {
  outline-color: var(--kiez-focus-light);
}

/* Skip link — present in wcg.htm, absent from the live build */
.kiez-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--kiez-purple);
  color: var(--kiez-text-on-dark);
  font-family: var(--kiez-display);
  font-weight: 700;
  border-radius: 0 0 var(--kiez-r) 0;
}
.kiez-skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Scroll reveal — namespaced .kiez-rv so it cannot collide with GDLR or the
   agency's unprefixed .rv. assets/js/reveal.js adds .kiez-v on intersection.
   -------------------------------------------------------------------------- */

.kiez-rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
}
.kiez-rv.kiez-v { opacity: 1; transform: none; }
.kiez-d1 { transition-delay: .08s; }
.kiez-d2 { transition-delay: .16s; }
.kiez-d3 { transition-delay: .24s; }
.kiez-d4 { transition-delay: .32s; }

/* --------------------------------------------------------------------------
   Reduced motion — transcribed from wcg.htm, namespaced.
   -------------------------------------------------------------------------- */

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

  .kiez-rv { opacity: 1; transform: none; transition: none; }

  .confera-body *,
  .confera-body *::before,
  .confera-body *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Decorative video is suppressed entirely; the poster image remains. */
  .kiez-hero-video,
  .kiez-cta-video-el { display: none; }
}