/*
 * KI-Lernen24.de globales Designsystem
 * Quelle: AI-Mentorix Design System aus Open Design
 * Ziel: Kadence Child und Kadence Blocks
 */

:root {
  /* Stahlblau */
  --ki24-blue: #3f7cc4;
  --ki24-blue-bright: #5a8fd0;
  --ki24-blue-deep: #1d4585;
  --ki24-blue-ink: #143160;
  --ki24-blue-soft: #e6effb;

  /* Chrom und Silber */
  --ki24-silver-highlight: #f4f6f8;
  --ki24-silver-1: #dfe4ea;
  --ki24-silver-2: #c3cbd5;
  --ki24-silver-3: #9aa4b1;
  --ki24-silver-4: #7b8593;

  /* Anthrazit */
  --ki24-ink: #23272d;
  --ki24-ink-2: #2f343b;
  --ki24-ink-3: #3c424a;
  --ki24-ink-4: #4b525b;

  /* Papier und Flächen */
  --ki24-paper: #e9eef6;
  --ki24-paper-2: #e0e7f2;
  --ki24-paper-3: #d4deec;
  --ki24-card: #f6f9fd;
  --ki24-white: #fbfcfe;

  /* Text und Linien */
  --ki24-text: #33383f;
  --ki24-text-2: #4b525b;
  --ki24-muted: #737b85;
  --ki24-line: #d3dbe8;
  --ki24-line-2: #c2ccdd;

  /* Dunkle Flächen */
  --ki24-dark: #23272d;
  --ki24-dark-2: #2c3138;
  --ki24-dark-3: #363c44;
  --ki24-cream: #eef1f4;

  /* Typografie und Layout */
  --ki24-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ki24-font-heading: "Roboto Slab", Georgia, "Times New Roman", serif;
  --ki24-content-max: 1290px;
  --ki24-content-padding-inline: 0px;
  --ki24-radius: 8px;
  --ki24-text-body: 20px;
  --ki24-text-h1: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --ki24-text-h2: clamp(2.125rem, 1.5357rem + 2.619vw, 3.5rem);
  --ki24-text-h3: clamp(1.75rem, 1.375rem + 1.6667vw, 2.625rem);
  --ki24-text-h4: clamp(1.5rem, 1.2857rem + 0.9524vw, 2rem);
  --ki24-text-h5: clamp(1.3125rem, 1.1786rem + 0.5952vw, 1.625rem);
  --ki24-text-h6: clamp(1.125rem, 1.0179rem + 0.4762vw, 1.375rem);

  /* Kadence-Integration */
  --global-body-font-family: var(--ki24-font-body);
  --global-heading-font-family: var(--ki24-font-heading);
  --global-content-width: var(--ki24-content-max);
  --global-content-edge-padding: var(--ki24-content-padding-inline);
  --global-edge-spacing: var(--ki24-content-padding-inline);
  --global-calc-content-width: calc(
    var(--global-content-width) - var(--global-content-edge-padding) -
      var(--global-content-edge-padding)
  );
  --global-palette1: var(--ki24-blue);
  --global-palette2: var(--ki24-blue-deep);
  --global-palette3: var(--ki24-ink);
  --global-palette4: var(--ki24-text);
  --global-palette5: var(--ki24-text-2);
  --global-palette6: var(--ki24-muted);
  --global-palette7: var(--ki24-paper-3);
  --global-palette8: var(--ki24-card);
  --global-palette9: var(--ki24-white);
  --global-palette9rgb: 251, 252, 254;
  --global-palette-highlight: var(--ki24-blue);
  --global-palette-highlight-alt: var(--ki24-blue-deep);
  --global-palette-highlight-alt2: var(--ki24-white);
  --global-palette-btn-bg: var(--ki24-blue-deep);
  --global-palette-btn-bg-hover: var(--ki24-blue-ink);
  --global-palette-btn: var(--ki24-white);
  --global-palette-btn-hover: var(--ki24-white);
}

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

html {
  background-color: var(--ki24-paper);
}

body,
button,
input,
select,
optgroup,
textarea {
  font-family: var(--ki24-font-body);
}

body {
  background-color: var(--ki24-paper);
  color: var(--ki24-text);
  font-size: var(--ki24-text-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ki24-ink);
  font-family: var(--ki24-font-heading);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--ki24-text-h1);
  font-weight: 700;
  line-height: 1.08;
}

h2 {
  font-size: var(--ki24-text-h2);
  line-height: 1.12;
}

h3 {
  font-size: var(--ki24-text-h3);
  line-height: 1.18;
}

h4 {
  font-size: var(--ki24-text-h4);
  line-height: 1.25;
}

h5 {
  font-size: var(--ki24-text-h5);
  line-height: 1.3;
}

h6 {
  font-size: var(--ki24-text-h6);
  line-height: 1.4;
}

a {
  color: var(--ki24-blue-deep);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--ki24-blue);
}

:where(
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  .wp-element-button,
  .wp-block-button__link,
  .kb-button
) {
  border: 1px solid transparent;
  border-radius: var(--ki24-radius);
}

:where(
  input:not([type="button"]):not([type="reset"]):not([type="submit"]),
  select,
  textarea
) {
  background-color: var(--ki24-white);
  border: 1px solid var(--ki24-line-2);
  border-radius: var(--ki24-radius);
  color: var(--ki24-text);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--ki24-blue) 70%, var(--ki24-white) 30%);
  outline-offset: 3px;
}

.ki24-section {
  width: 100%;
}

.ki24-container {
  width: 100%;
  max-width: var(--ki24-content-max);
  margin-inline: auto;
  padding-inline: var(--ki24-content-padding-inline);
}

.ki24-lead {
  font-weight: 300;
}

.ki24-card {
  background-color: var(--ki24-card);
  border: 1px solid var(--ki24-line);
  border-radius: var(--ki24-radius);
}

.ki24-section-dark {
  background-color: var(--ki24-dark);
  color: var(--ki24-cream);
}

.ki24-section-dark :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ki24-cream);
}

@media (max-width: 1289.98px) {
  :root {
    --ki24-content-padding-inline: 20px;
  }
}

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