/* ============================================================
   site.css — Seiten-Layout & Komponenten für marketing-autopilot.ch
   Baut auf design-system.css auf (nutzt dessen Tokens, definiert
   NICHTS doppelt: keine Farben-Rohwerte, nur --tokens).
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text, var(--gray-950));
  background: var(--color-bg, #fff);
}

a { color: var(--color-primary); }

.section-inner,
.footer-inner { max-width: var(--container-max, 1120px); margin-inline: auto; padding-inline: var(--container-pad, 1.5rem); }

/* -------- Header -------- */
/* Skip-Link (WCAG 2.4.1) [M1.1] */
.skip-link {
  position: absolute; left: var(--space-3); top: var(--space-2); z-index: 10;
  background: var(--surface-page); color: var(--text); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.site-header-wrap { border-top: var(--header-brand-line) solid var(--color-brand); border-bottom: 1px solid var(--border); }
.site-header {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  max-width: var(--container-max, 1120px); margin-inline: auto;
  padding: var(--space-2) var(--container-pad, 1.5rem);
}
.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo img { display: block; height: var(--logo-height); width: auto; }
.header-cta { white-space: nowrap; }
.site-nav { display: flex; gap: var(--space-4); margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--color-text, var(--gray-950)); }
.site-nav a[aria-current="page"] { color: var(--color-accent-text); font-weight: var(--fw-semibold); }
.theme-toggle {
  border: 1px solid var(--border); background: transparent; color: inherit;
  border-radius: var(--radius-pill, 999px); padding: .35rem .8rem; cursor: pointer; font-size: var(--fs-small);
}

/* -------- Buttons (ergänzt Design-System) -------- */
.btn {
  display: inline-block; text-decoration: none; border-radius: var(--radius, 8px);
  padding: .7rem 1.3rem; font-weight: var(--fw-semibold); border: 1px solid transparent;
  transition: background var(--dur-fast, .15s) var(--ease, ease);
}
.btn-lg { padding: .95rem 1.7rem; font-size: var(--fs-lead); }
.btn-primary { background: var(--action-primary, var(--color-primary)); color: #fff; }
.btn-primary:hover { background: var(--action-primary-hover, var(--color-primary-dark)); }
.btn-ghost { background: transparent; border-color: var(--color-accent); color: var(--color-accent-text); }
.btn-ghost:hover { background: var(--color-accent-light, #fdf3eb); }
.btn-brand {
  background: var(--btn-brand-bg); color: var(--btn-brand-color);
  padding: var(--btn-brand-padding); border-radius: var(--btn-brand-radius); font-weight: var(--btn-brand-font-weight);
}
.btn-brand:hover { background: var(--btn-brand-bg-hover); color: var(--btn-brand-color); }

/* Bewegung reduzieren [M1.1] */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Mobile Header [M1.1] */
@media (max-width: 640px) {
  .site-header { gap: var(--space-2); padding-inline: var(--space-3); }
  .site-logo { order: 1; }
  .site-logo img { height: var(--logo-height-mobile); }
  .header-cta { order: 2; margin-left: auto; padding: var(--space-2) var(--space-3); font-size: var(--fs-interface); }
  .site-nav { order: 3; flex: 0 1 auto; margin-left: 0; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-interface); }
  .theme-toggle { order: 4; margin-left: auto; }
}

/* -------- Hero -------- */
.hero { padding: var(--space-6) 0; background: var(--color-primary-faint, #f3f7f8); }
.hero-inner { max-width: 820px; margin-inline: auto; padding-inline: var(--container-pad, 1.5rem); text-align: center; }
.hero-eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-text); font-weight: var(--fw-semibold); }
.hero-title { font-size: var(--fs-display); line-height: var(--lh-snug); color: var(--color-primary); margin: var(--space-3) 0; }
.hero-sub { font-size: var(--fs-lead); color: var(--gray-700); max-width: 620px; margin: 0 auto var(--space-5); }
.hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* -------- Trust-Leiste -------- */
.trust { border-block: 1px solid var(--border); }
.trust-list {
  max-width: var(--container-max, 1120px); margin-inline: auto; list-style: none;
  display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap;
  padding: var(--space-3) var(--container-pad, 1.5rem); margin-block: 0; color: var(--gray-700);
}
.trust-list strong { color: var(--color-primary); }

/* -------- Sections -------- */
.section { padding: var(--space-6) 0; }
.section-alt { background: var(--color-primary-faint, #f3f7f8); }
.section-title { font-size: var(--fs-display); color: var(--color-primary); text-align: center; margin-bottom: var(--space-5); }

/* -------- Cards -------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.card {
  background: var(--color-bg, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px);
  padding: var(--space-4); border-top: 3px solid var(--color-accent);
}
.card h3 { color: var(--color-primary); margin-top: 0; }
.card-link { display: inline-block; margin-top: var(--space-2); color: var(--color-accent-text); font-weight: var(--fw-semibold); text-decoration: none; }

/* -------- About-Teaser -------- */
.about-teaser { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5); align-items: center; }
.about-photo {
  aspect-ratio: 1; border-radius: var(--radius-lg, 12px); background: var(--petrol-200, #e8f0f1);
  display: grid; place-items: center; color: var(--gray-500); font-size: var(--fs-small);
}
@media (max-width: 640px) { .about-teaser { grid-template-columns: 1fr; } }

/* -------- CTA-Band -------- */
.cta-band { background: var(--color-primary); color: #fff; text-align: center; padding: var(--space-6) 0; }
.cta-band h2 { margin-top: 0; }
.cta-band p { color: var(--petrol-200, #e8f0f1); margin-bottom: var(--space-4); }

/* -------- Footer -------- */
.site-footer { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-block: var(--space-5); }
.footer-inner { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: space-between; align-items: start; }
.site-footer nav { display: flex; flex-direction: column; gap: var(--space-1); }
.site-footer nav a { color: var(--gray-700); text-decoration: none; }
.footer-copy { text-align: center; color: var(--gray-500); font-size: var(--fs-small); margin-top: var(--space-4); }