/*
Theme Name: StepSuite
Theme URI: https://stepsuite.de
Author: StepSuite
Description: Schlankes, klassisches Theme fuer die StepSuite-Verkaufsseite. Bewusst ohne Block-Editor-Abhaengigkeiten, damit das Layout vorhersagbar bleibt.
Version: 1.0.0
License: GPLv2 or later
Text Domain: stepsuite
*/

:root {
  --ss-bg: #ffffff;
  --ss-bg-soft: #f5f7fb;
  --ss-ink: #16202e;
  --ss-ink-soft: #4c5b6e;
  --ss-line: #dfe5ee;
  --ss-brand: #1f4bd8;
  --ss-brand-dark: #14349c;
  --ss-accent: #ff7a45;
  --ss-radius: 14px;
  --ss-shadow: 0 10px 30px rgba(22, 32, 46, .08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--ss-brand); }

.ss-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- Kopfzeile ---------- */
.ss-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ss-line);
}
.ss-header .ss-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px; flex-wrap: wrap;
}
.ss-logo {
  font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  text-decoration: none; color: var(--ss-ink);
}
.ss-logo span { color: var(--ss-brand); }
.ss-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ss-nav a { color: var(--ss-ink-soft); text-decoration: none; font-weight: 600; font-size: 15px; }
.ss-nav a:hover { color: var(--ss-brand); }

/* ---------- Buttons ---------- */
.ss-btn {
  display: inline-block; padding: 13px 24px; border-radius: 999px;
  background: var(--ss-brand); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: 16px; border: 0; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ss-btn:hover { background: var(--ss-brand-dark); transform: translateY(-1px); }
.ss-btn--ghost { background: transparent; color: var(--ss-brand) !important; border: 2px solid var(--ss-brand); }
.ss-btn--ghost:hover { background: var(--ss-bg-soft); }
.ss-btn--big { padding: 16px 34px; font-size: 18px; }

/* ---------- Hero ---------- */
.ss-hero {
  background: linear-gradient(160deg, #eef3ff 0%, #ffffff 62%);
  padding: 76px 0 64px;
  border-bottom: 1px solid var(--ss-line);
}
.ss-hero h1 {
  font-size: clamp(32px, 5vw, 52px); line-height: 1.12; margin: 0 0 18px;
  letter-spacing: -.025em; max-width: 16ch;
}
.ss-hero p.ss-lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--ss-ink-soft); max-width: 62ch; margin: 0 0 30px; }
.ss-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ss-eyebrow {
  display: inline-block; background: #e2e9ff; color: var(--ss-brand-dark);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px;
}

/* ---------- Abschnitte ---------- */
.ss-section { padding: 66px 0; }
.ss-section--soft { background: var(--ss-bg-soft); border-top: 1px solid var(--ss-line); border-bottom: 1px solid var(--ss-line); }
.ss-section h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; margin: 0 0 12px; }
.ss-section > .ss-wrap > p.ss-lead { color: var(--ss-ink-soft); max-width: 68ch; font-size: 18px; margin-top: 0; }

/* ---------- Karten-Raster ---------- */
.ss-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 34px; }
.ss-card {
  background: #fff; border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
  padding: 26px; box-shadow: var(--ss-shadow);
}
.ss-card h3 { margin: 0 0 8px; font-size: 19px; }
.ss-card p { margin: 0; color: var(--ss-ink-soft); font-size: 16px; }
.ss-card ul { margin: 10px 0 0; padding-left: 20px; color: var(--ss-ink-soft); font-size: 16px; }
.ss-card li { margin-bottom: 5px; }
.ss-icon {
  width: 42px; height: 42px; border-radius: 12px; background: #e7edff;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 14px;
}

/* ---------- Preis ---------- */
.ss-price-card {
  max-width: 480px; margin: 34px auto 0; text-align: center;
  background: #fff; border: 2px solid var(--ss-brand); border-radius: 20px;
  padding: 38px 30px; box-shadow: 0 18px 44px rgba(31, 75, 216, .16);
}
.ss-price-name { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-brand); }
.ss-price-amount { font-size: 60px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 12px 0 2px; }
.ss-price-amount small { font-size: 19px; font-weight: 600; color: var(--ss-ink-soft); }
.ss-price-note { color: var(--ss-ink-soft); margin: 0 0 22px; }
.ss-price-list { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; }
.ss-price-list li { padding: 9px 0 9px 30px; border-bottom: 1px solid var(--ss-line); position: relative; }
.ss-price-list li:last-child { border-bottom: 0; }
.ss-price-list li::before {
  /* Haken als 6-stellige Escape-Sequenz mit abschliessendem Leerzeichen -
     die Kurzform "\2713" wird von manchen Parsern falsch abgetrennt. */
  content: "\002713 "; position: absolute; left: 0; top: 9px;
  color: #17a05a; font-weight: 800;
}

/* ---------- Inhaltsseiten ---------- */
.ss-page { padding: 56px 0 72px; }
.ss-page h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin: 0 0 22px; }
.ss-page h2 { font-size: 24px; margin: 34px 0 10px; }
.ss-page h3 { font-size: 19px; margin: 24px 0 8px; }
.ss-content { max-width: 760px; }
.ss-content ul, .ss-content ol { padding-left: 22px; }

/* ---------- Hinweisboxen ---------- */
.ss-warn {
  background: #fff4e5; border: 2px solid #ff9d3c; border-left-width: 8px;
  border-radius: 10px; padding: 18px 20px; margin: 0 0 26px; font-weight: 600;
}
.ss-warn strong { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; color: #a35200; margin-bottom: 6px; }
.ss-note { background: #eef3ff; border: 1px solid #c3d2ff; border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; }
.ss-error { background: #ffecec; border: 1px solid #ffb3b3; border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; color: #9c1c1c; }
.ss-ok { background: #e8f8ee; border: 1px solid #a7dfbd; border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; color: #14663a; }

/* ---------- Formular ---------- */
.ss-form { max-width: 560px; }
.ss-field { margin-bottom: 18px; }
.ss-field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.ss-field input[type=text], .ss-field input[type=email] {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; color: var(--ss-ink);
}
.ss-field input:focus { outline: 3px solid #c6d4ff; border-color: var(--ss-brand); }
.ss-hint { font-size: 14px; color: var(--ss-ink-soft); margin-top: 5px; }
.ss-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Status-Kacheln (Kundendashboard) ---------- */
.ss-status { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.ss-status--wartet  { background: #fff1cf; color: #8a5a00; }
.ss-status--laeuft  { background: #dfe8ff; color: #1c3ea8; }
.ss-status--aktiv   { background: #dcf5e6; color: #14663a; }
.ss-status--fehler  { background: #ffdede; color: #9c1c1c; }
.ss-status--neu     { background: #ececf1; color: #4c5b6e; }

/* ---------- Fusszeile ---------- */
.ss-footer { background: #10192a; color: #a9b6c9; padding: 44px 0 34px; margin-top: 0; font-size: 15px; }
.ss-footer a { color: #d7e1f2; text-decoration: none; }
.ss-footer a:hover { text-decoration: underline; }
.ss-footer-cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.ss-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ss-footer-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid #22314a; font-size: 14px; }

@media (prefers-color-scheme: dark) {
  /* Bewusst helles Design beibehalten - Verkaufsseite mit fester Markenoptik. */
}