/* keAI website — shared component styles (header, footer, form controls,
   heading highlight). Pages link ds/styles.css (tokens) + this file. */

/* ---------- Links ---------- */
.kontakt-page a, .keai-page a { color: var(--accent-primary-press); }
.kontakt-page a:hover, .keai-page a:hover { color: var(--accent-primary); }

/* ---------- Header ---------- */
.keai-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.keai-header-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter); height: 76px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--space-5);
  font-family: var(--font-sans);
}
.keai-header a { text-decoration: none; }
.keai-header-nav { display: flex; align-items: center; gap: var(--space-6); justify-self: center; }
.keai-header-nav a {
  font-weight: var(--fw-bold); font-size: var(--fs-small);
  color: var(--text-strong); white-space: nowrap;
}
.keai-header-nav a:hover { color: var(--accent-primary); }
.keai-btn-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-small); line-height: 1; padding: 10px 18px;
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: transparent; color: var(--text-strong); cursor: pointer;
  white-space: nowrap; transition: border-color 180ms ease, background 180ms ease;
}
.keai-btn-pill:hover { border-color: var(--ke-green); background: var(--ke-green); }
.keai-btn-contact {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-small); line-height: 1; padding: 10px 20px;
  border: 1px solid var(--ke-blue); border-radius: var(--radius-full);
  background: var(--ke-blue); color: var(--ke-black); cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.keai-btn-contact:hover { background: transparent; color: var(--ke-black); }

/* ---------- Heading highlight ---------- */
.ke-highlight {
  background: linear-gradient(var(--ke-green), var(--ke-green));
  background-size: 100% 35%; background-repeat: no-repeat; background-position: bottom;
}

/* ---------- Form controls (Input / Textarea / Checkbox / Button) ---------- */
.ke-field { display: flex; flex-direction: column; gap: 6px; }
.ke-label {
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-small); color: var(--text-strong);
}
.ke-input, .ke-textarea {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  color: var(--text-strong); background: var(--surface-card);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.ke-input { padding: 11px 14px; font-size: var(--fs-body); }
.ke-textarea { padding: 11px 14px; font-size: var(--fs-body); resize: vertical; min-height: 148px; }
.ke-input::placeholder, .ke-textarea::placeholder { color: var(--text-muted); }
.ke-input:focus, .ke-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}
.ke-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ke-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.ke-checkbox .box {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-default); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.ke-checkbox .box svg { opacity: 0; }
.ke-checkbox input:checked + .box { background: var(--accent-primary); border-color: var(--accent-primary); }
.ke-checkbox input:checked + .box svg { opacity: 1; }
.ke-checkbox input:focus-visible + .box {
  outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset);
}
.ke-checkbox .lbl {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  font-size: var(--fs-body); color: var(--text-strong); line-height: var(--lh-body);
}
.ke-button {
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  line-height: 1; letter-spacing: 0.01em; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; font-size: var(--fs-body-lg);
  background: var(--accent-primary); color: var(--text-on-accent);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.ke-button:hover { background: var(--accent-primary-hover); }
.ke-ghost-pill {
  margin-top: 26px; display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-small); line-height: 1; padding: 11px 22px;
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: transparent; color: var(--text-strong); cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.ke-ghost-pill:hover { border-color: var(--ke-blue); background: var(--ke-blue); color: var(--ke-black); }

/* ---------- Footer ---------- */
.keai-footer { background: var(--ke-blue); font-family: var(--font-sans); }
.keai-footer a { color: var(--text-on-accent); text-decoration: none; }
.keai-footer a:hover { text-decoration: underline; color: var(--text-on-accent); }

/* ---------- Mobile burger + menu overlay (per Header.dc) ---------- */
.keai-header-burger {
  display: none; justify-self: end; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--text-strong);
}
.keai-menu-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface-page); z-index: 60; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.keai-menu-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---------- Shared responsive ---------- */
@media (max-width: 820px) {
  .keai-header-nav { display: none !important; }
  .keai-header-cta { display: none !important; }
  .keai-header-burger { display: inline-flex !important; }
}
/* Footer responsive (per Footer.dc) */
@media (max-width: 820px) {
  .keai-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .keai-footer-brand { grid-column: 1 / -1 !important; }
}