/* Konnektor VPN marketing site — "Tanne" color scheme.
   Tokens match the design (Claude Design project "Konnektor Config UI Design",
   turn 3 "Abgeleitetes Farbschema"). Light is the hard default regardless of
   OS setting — dark activates ONLY via the explicit nav toggle (persisted in
   localStorage), per explicit request; this deliberately does not follow
   prefers-color-scheme.

   --k-btn-fill/--k-btn-fill-hover/--k-btn-on are a separate token from
   --k-primary-600: white text on --k-primary-600 in light mode measures
   ~4.3:1 contrast, below WCAG AA's 4.5:1 for normal text (the design's own
   claimed 4.6:1 was off) — --k-btn-fill uses the deeper --k-primary-700
   shade instead, ~6.2:1. Dark mode's fill already had good contrast
   (~7:1) and is unchanged. */

:root {
  --k-primary-900: #06423a;
  --k-primary-700: #0b6e5d;
  --k-primary-600: #0e8a74;
  --k-primary-500: #2ba58d;
  --k-primary-100: #c9e7de;
  --k-primary-50: #ecf5f1;

  --k-btn-fill: #0b6e5d;
  --k-btn-fill-hover: #06423a;
  --k-btn-on: #ffffff;

  --k-ink: #131a17;
  --k-ink-muted: #55655e;
  --k-ink-faint: #85948d;
  --k-border: #d1dcd6;
  --k-surface: #ecf1ef;
  --k-surface-card: #ffffff;

  --k-status-live-fg: #1a7a2e;
  --k-status-live-bg: #dcefe0;
  --k-status-live-line: #b1dcbb;
  --k-status-soon-fg: #b4690e;
  --k-status-soon-bg: #f8ecd9;
  --k-status-soon-line: #ecd0a4;
  --k-status-planned-fg: #b3364a;
  --k-status-planned-bg: #f8e0e5;
  --k-status-planned-line: #edbcc7;

  --k-footer-bg: #14181f;
  --k-footer-ink: #e7e9ef;
  --k-footer-muted: #a3aabb;
  --k-footer-border: #2a2f3b;
  --k-footer-field: #1d222c;
}

:root[data-theme="dark"] {
  --k-primary-900: #0e8a74;
  --k-primary-700: #4cc2a7;
  --k-primary-600: #4cc2a7;
  --k-primary-500: #6ed3bb;
  --k-primary-100: #173029;
  --k-primary-50: #18211d;

  --k-btn-fill: #4cc2a7;
  --k-btn-fill-hover: #6ed3bb;
  --k-btn-on: #0b2a22;

  --k-ink: #e7efec;
  --k-ink-muted: #a8b8b1;
  --k-ink-faint: #7f8f88;
  --k-border: #2c3b34;
  --k-surface: #101613;
  --k-surface-card: #18211d;

  --k-status-live-fg: #5fd97a;
  --k-status-live-bg: #14301c;
  --k-status-live-line: #2b5b38;
  --k-status-soon-fg: #f0b35f;
  --k-status-soon-bg: #332510;
  --k-status-soon-line: #63481f;
  --k-status-planned-fg: #f28ba0;
  --k-status-planned-bg: #341a21;
  --k-status-planned-line: #603140;

  --k-footer-bg: #0b0f0d;
  --k-footer-ink: #e7efec;
  --k-footer-muted: #a8b8b1;
  --k-footer-border: #2c3b34;
  --k-footer-field: #18211d;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--k-surface);
  color: var(--k-ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }

code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--k-primary-50);
  border-radius: 4px;
  padding: 0.05em 0.4em;
}

a { color: var(--k-primary-700); }
a:hover { color: var(--k-primary-600); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--k-primary-600);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-wrap: balance;
  letter-spacing: -0.01em;
  margin: 0;
}

.container { max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--k-surface-card);
  border-bottom: 1px solid var(--k-border);
}

.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.nav-brand span { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 15px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--k-ink-muted);
}

/* :not(.btn-primary) — otherwise this rule's higher specificity (class +
   element) beats .btn-primary's own color rule (one class) for the nav's
   Download button, silently overriding --k-btn-on with the muted nav text
   color. Confirmed live: background rgb(11,110,93) vs. text rgb(85,101,94)
   measured ~1:1 contrast — text was effectively invisible on the button. */
.nav-links a:not(.btn-primary) { color: inherit; text-decoration: none; }
.nav-links a:not(.btn-primary):hover { color: var(--k-primary-700); }

.lang-switch {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--k-ink-faint);
}
.lang-switch strong { color: var(--k-ink); font-weight: 600; }

.theme-toggle {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  background: none;
  border: 1px solid var(--k-border);
  color: var(--k-ink-muted);
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--k-primary-600); color: var(--k-primary-700); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--k-btn-fill);
  color: var(--k-btn-on);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 7px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--k-btn-fill-hover); color: var(--k-btn-on); }

.btn-secondary {
  display: inline-block;
  background: none;
  border: none;
  color: var(--k-primary-700);
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  padding: 76px 24px 64px;
  background: var(--k-surface-card);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-primary-700);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k-primary-600);
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.15;
  max-width: 760px;
  margin: 0 auto 18px;
}

.hero p {
  font-size: 18px;
  color: var(--k-ink-muted);
  max-width: 620px;
  margin: 0 auto 32px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hero-actions .btn-primary {
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 9px;
  box-shadow: 0 8px 24px -12px rgba(14, 138, 116, 0.5);
}

.hero-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--k-ink-faint);
}

/* ---------- Sections ---------- */

section.block { padding: 64px 24px; }
section.block h2 { font-size: 24px; text-align: center; margin: 0 0 6px; }
section.block > .container > p.lede { text-align: center; color: var(--k-ink-muted); font-size: 15px; margin: 0 0 28px; }

/* ---------- Comparison table ---------- */

.compare {
  background: var(--k-surface-card);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}

.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--k-border);
}
.compare-row:last-child { border-bottom: none; }

.compare-row > span { padding: 14px 20px; font-size: 14px; }
.compare-row.head > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--k-ink-faint);
  border-bottom: 1px solid var(--k-border);
}
.compare-row.head > span.k { color: var(--k-primary-700); font-family: "JetBrains Mono", monospace; }
.compare-row > span:first-child { font-weight: 600; }
.compare-row > span.k-yes { color: var(--k-status-live-fg); }
.compare-row > span.wg { color: var(--k-ink-muted); }

.compare-note { text-align: center; color: var(--k-ink-faint); font-size: 13.5px; margin-top: 12px; }

/* ---------- Downloads ---------- */

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dl-card {
  background: var(--k-surface-card);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 20px;
}

.dl-card.placeholder {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.dl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dl-head strong { font-size: 16px; }

.status-pill {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
  border: 1px solid transparent;
}
.status-pill.live { color: var(--k-status-live-fg); background: var(--k-status-live-bg); border-color: var(--k-status-live-line); }
.status-pill.soon { color: var(--k-status-soon-fg); background: var(--k-status-soon-bg); border-color: var(--k-status-soon-line); }
.status-pill.planned { color: var(--k-status-planned-fg); background: var(--k-status-planned-bg); border-color: var(--k-status-planned-line); }

.dl-meta { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--k-ink-faint); margin-bottom: 14px; }
.dl-desc { font-size: 13.5px; color: var(--k-ink-muted); margin-bottom: 14px; }

.btn-download {
  display: inline-block;
  background: var(--k-btn-fill);
  color: var(--k-btn-on);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 7px;
  text-decoration: none;
}
.btn-download.disabled {
  background: none;
  color: var(--k-ink-faint);
  border: 1px solid var(--k-border);
  pointer-events: none;
}

.teaser-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 28px;
  background: var(--k-primary-50);
  border: 1px solid var(--k-primary-100);
  border-radius: 12px;
  text-align: center;
}

.teaser-badge {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-btn-on);
  background: var(--k-btn-fill);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

.teaser-banner p { margin: 0; font-size: 14.5px; color: var(--k-ink); max-width: 620px; }

/* ---------- Steps ---------- */

.steps-section {
  background: var(--k-surface-card);
  border-top: 1px solid var(--k-border);
  border-bottom: 1px solid var(--k-border);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--k-primary-700);
  font-size: 13px;
  margin-bottom: 8px;
}
.step-title { font-size: 15px; font-weight: 600; }
.step-desc { font-size: 13.5px; color: var(--k-ink-muted); line-height: 1.55; margin: 6px 0 0; }

/* ---------- Teams panel ---------- */

.teams-panel {
  background: var(--k-surface-card);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
}

.teams-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-primary-700);
  margin-bottom: 10px;
}

.teams-panel h3 { font-size: 20px; margin: 0 0 10px; }
.teams-panel p { font-size: 14.5px; color: var(--k-ink-muted); margin: 0; }

.teams-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.teams-list li { display: flex; gap: 10px; }
.teams-list li::before { content: "✓"; color: var(--k-status-live-fg); font-weight: 700; }

/* ---------- Footer / newsletter ---------- */

footer.site-footer {
  background: var(--k-footer-bg);
  color: var(--k-footer-ink);
  padding: 44px 24px;
}

.newsletter {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}

.newsletter h3 { font-size: 18px; margin: 0 0 8px; }
.newsletter > div:first-child p { font-size: 13.5px; color: var(--k-footer-muted); margin: 0; line-height: 1.6; }

.newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-row { display: flex; gap: 10px; }

.newsletter-row input[type="email"] {
  flex: 1;
  background: var(--k-footer-field);
  border: 1px solid var(--k-footer-border);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--k-footer-ink);
  font-family: inherit;
}
.newsletter-row input[type="email"]::placeholder { color: var(--k-footer-muted); }

.newsletter-row button {
  background: var(--k-btn-fill);
  color: var(--k-btn-on);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 7px;
  border: none;
  white-space: nowrap;
  cursor: pointer;
}

.consent-label {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--k-footer-muted);
  line-height: 1.5;
  align-items: flex-start;
}
.consent-label input { margin-top: 2px; }
.consent-label a { color: var(--k-footer-ink); }

.footer-bottom {
  max-width: 920px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--k-footer-border);
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--k-footer-muted);
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-links { display: flex; gap: 20px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .nav-links { display: none; }
  .downloads-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .teams-panel, .newsletter { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > span:first-child { border-bottom: 1px dashed var(--k-border); }
}

@media (max-width: 520px) {
  .downloads-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}