/* Tackly Marketing-Site — gemeinsames Styling für Landing + Legal + Support */
:root {
  --bg: #0a1628;
  --bg-2: #102236;
  --bg-card: rgba(255,255,255,0.04);
  --fg: #e9f2fa;
  --fg-muted: #8aa6c2;
  --fg-dim: #5e7791;
  --accent: #59bdec;
  --accent-hover: #7fcef1;
  --border: rgba(255,255,255,0.08);
  --max-width: 880px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(ellipse at top, var(--bg-2) 0%, var(--bg) 60%);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header / Navigation */
header.site-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
}
header.site-header .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
header.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
  font-size: 1.1rem;
}
header.site-header .brand img { width: 28px; height: 28px; }
header.site-header nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 0.92rem;
}
header.site-header nav a {
  color: var(--fg-muted);
  text-decoration: none;
}
header.site-header nav a:hover { color: var(--accent); }

/* Main */
main {
  flex: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px;
  width: 100%;
}

/* Hero (Landing) */
.hero {
  text-align: center;
  padding: 32px 0 48px;
}
.hero .logo {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  display: block;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.hero .tagline {
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.hero .lead {
  font-size: 1.1rem;
  color: var(--fg-muted);
  max-width: 600px;
  margin: 0 auto 32px;
}

/* Card / Box */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 1.25rem;
  margin: 0 0 12px;
  color: var(--fg);
}
.card h3 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
  color: var(--accent);
}
.card p, .card li { color: var(--fg-muted); }
.card strong { color: var(--fg); font-weight: 600; }
.card a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card a:hover { color: var(--accent-hover); }
.card ul { padding-left: 22px; }
.card li { margin-bottom: 4px; }

/* Legal-Pages: lange Texte */
.legal-page main { max-width: 760px; }
.legal-page h1 { font-size: 1.75rem; margin-bottom: 8px; }
.legal-page .updated {
  color: var(--fg-dim);
  font-size: 0.85rem;
  margin-bottom: 32px;
}
.legal-page section { margin-bottom: 32px; }
.legal-page h2 { font-size: 1.2rem; color: var(--fg); margin: 0 0 12px; }
.legal-page h3 { font-size: 1rem; color: var(--accent); margin: 20px 0 8px; }
.legal-page p, .legal-page li { color: var(--fg-muted); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.92rem; }
.legal-page th, .legal-page td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-page th { background: rgba(255,255,255,0.05); color: var(--fg); font-weight: 600; }

/* Placeholder-Tokens (rechtliche Felder, die noch auszufüllen sind) */
.placeholder-token {
  background: rgba(255,170,0,0.15);
  color: #ffc869;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
  border: 1px dashed rgba(255,170,0,0.4);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s;
}
.btn:hover { background: var(--accent-hover); color: var(--bg); }
.btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn.ghost:hover { background: rgba(89,189,236,0.1); }

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  margin-top: 48px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-dim);
}
footer.site-footer a {
  color: var(--fg-muted);
  text-decoration: none;
  margin: 0 8px;
}
footer.site-footer a:hover { color: var(--accent); }
footer.site-footer .legal-links { margin-bottom: 8px; }