@import "./tokens.css";

* { box-sizing: border-box; }
html {
  overflow-x: clip;
  background: #080f20;
}
html, body { margin: 0; padding: 0; }
body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
  background: #080f20;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Display type ---------- */
.d-xl { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.05; letter-spacing: -1.5px; color: var(--ink); }
.d-lg { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.1;  letter-spacing: -1px;   color: var(--ink); }
.d-md { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; color: var(--ink); }
.d-sm { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2;  letter-spacing: -0.3px; color: var(--ink); }
.t-lg { font-family: var(--font-body); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.t-md { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
.t-sm { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--ink); }
.b-md { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--body); }
.b-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--body); }
.cap   { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--muted); }
.cap-u { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.mono  { font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--body); }

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
section.band { padding: var(--s-section) 0; }
section.band + section.band { border-top: 1px solid var(--hairline-soft); }
.section-head { margin-bottom: var(--s-xxl); }
.section-head .cap-u { color: var(--primary); margin-bottom: var(--s-sm); display: block; }
.section-head h2 { margin: 0; }
.section-head .b-md { margin-top: var(--s-md); max-width: 64ch; }

/* ---------- Golden button animation (shared across all pages) ---------- */
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes btn-gold-spin {
  to { --btn-angle: 360deg; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1;
  padding: 0 20px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  text-decoration: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-active); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary.is-disabled { background: var(--primary-disabled); color: #ffffff; cursor: not-allowed; }
.btn-secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { background: var(--surface-soft); }
.btn-secondary-on-dark { background: var(--surface-dark-elevated); color: var(--on-dark); border-color: transparent; }
.btn-secondary-on-dark:hover { background: #2a2e33; }
.btn-text { background: transparent; padding: 0 4px; height: auto; color: var(--ink); border: none; }
.btn-text:hover { color: var(--primary); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); }
.btn-icon:hover { background: var(--surface-soft); }
.btn-on-primary {
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    conic-gradient(from var(--btn-angle),
      rgba(201,139,58,0.15) 0deg, rgba(201,139,58,0.15) 270deg,
      rgba(255,215,70,1) 315deg,
      rgba(201,139,58,0.15) 358deg) border-box;
  border: 1.5px solid transparent;
  color: var(--primary);
  animation: btn-gold-spin 3s linear infinite;
}
.btn-on-primary:hover { filter: brightness(0.96); }
.btn-ghost-on-primary {
  background:
    linear-gradient(rgba(30,58,95,0.2), rgba(30,58,95,0.2)) padding-box,
    conic-gradient(from var(--btn-angle),
      rgba(255,255,255,0.18) 0deg, rgba(255,255,255,0.18) 270deg,
      rgba(255,215,70,0.9) 315deg,
      rgba(255,255,255,0.18) 358deg) border-box;
  border: 1.5px solid transparent;
  color: var(--on-primary);
  animation: btn-gold-spin 3.6s linear infinite;
}

a.text-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}
a.text-link:hover { border-bottom-color: var(--primary); }
a.text-link:active { color: var(--primary-active); border-bottom-color: var(--primary-active); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 500;
  height: 22px; padding: 0 10px;
}
.badge-pill    { background: var(--surface-card); color: var(--ink); font-size: 12px; }
.badge-primary { background: var(--primary); color: var(--on-primary); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-amber   { background: var(--accent-amber); color: #1f1409; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-success { background: rgba(74, 122, 92, 0.14); color: var(--success); font-size: 12px; }
.badge-dot { display: inline-flex; align-items: center; gap: 6px; }
.badge-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink); }
input.text-input, select.text-input {
  font-family: var(--font-body); font-size: 16px;
  color: var(--ink); background: var(--canvas);
  height: 40px; padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
input.text-input:focus, select.text-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
}

/* ---------- Tabs ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-soft); border-radius: var(--r-md); }
.tab  { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; transition: background 120ms, color 120ms; }
.tab.active { background: var(--canvas); color: var(--ink); }

/* ---------- Feature card ---------- */
.feature-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 220px;
}
.feature-card .icon { width: 32px; height: 32px; color: var(--primary); }
.feature-card h4 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; color: var(--ink); }
.feature-card p  { margin: 0; color: var(--body); font-size: 15px; }

/* ---------- Callout primary ---------- */
.callout-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-lg);
  padding: 64px 56px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
.callout-primary h3 { font-family: var(--font-display); font-weight: 400; font-size: 40px; letter-spacing: -0.7px; margin: 0 0 12px; color: var(--on-primary); }
.callout-primary p  { margin: 0; opacity: 0.85; font-size: 16px; }
.callout-primary .actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ---------- Connector tile ---------- */
.connector {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 120ms, background 120ms;
}
.connector:hover { border-color: var(--primary); }
.connector .logo { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--primary); }
.connector .name { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0; }
.connector .desc { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--surface-dark);
  color: var(--on-dark-soft);
  padding: 80px 0 48px;
}
footer.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .callout-primary { grid-template-columns: 1fr; padding: 48px 36px; }
  .callout-primary .actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  section.band { padding: 64px 0; }
  .callout-primary { grid-template-columns: 1fr; padding: 40px 24px; }
  footer.site-footer .wrap { flex-direction: column; }
}

/* ---- Nav: transparent at top, dark on scroll ---- */
.site-nav {
  transition:
    background 280ms ease,
    backdrop-filter 280ms ease,
    -webkit-backdrop-filter 280ms ease,
    border-color 280ms ease;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
.site-nav.is-scrolled {
  background: rgba(8, 15, 32, 0.96) !important;
  backdrop-filter: saturate(120%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(12px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* Keyword-Highlight: KOSTENLOS / 15 Minuten — weiß, fett, Großbuchstaben */
.hl {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
}

/* Responsive text swap */
.show-sm { display: none; }
@media (max-width: 719px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
}