/* atlas-angebot.css — Spezialseiten (Jobcoach-, Musiker-Websites, KI-Training für Coaches) und
   Website-Kalkulator im Atlas-Design. Markup, IDs und Formular-/Kalkulator-Skripte dieser Seiten
   bleiben unverändert; dieses Stylesheet stellt ihre Bausteine im hellen Atlas-Stil dar.
   Die Umrechnung der alten Token-Namen für website-kalkulator.css steht in atlas.css,
   weil der Kalkulator auch auf /websites/ eingebettet ist. */

/* ─── Abschnitte ───────────────────────────────────────────────────────────── */
main>section{padding-block:56px;border-top:1px solid var(--line)}
main>section:nth-of-type(even){background:#fff}
main>section#hero{border-top:0;padding-block:28px 56px}
.inner,.hero-inner{width:min(1120px,calc(100% - 80px));margin-inline:auto}
.eyebrow,.hero-eyebrow{font-size:0.8125rem;color:var(--muted);margin-bottom:16px}
h1 em,h2 em,.thesis-quote em{font-style:normal}
h1{margin-bottom:0}
.hero-sub,.lead{max-width:760px;margin-top:20px;font-size:1.125rem;color:var(--muted)}
.lead{font-size:1rem;margin-top:0;margin-bottom:32px}
#hero .btn{margin-top:28px;margin-right:20px}
.hero-scroll{width:min(1120px,calc(100% - 80px));margin:28px auto 0;font-size:0.75rem;color:var(--muted)}
.hero-wave{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:14px 20px;border-radius:4px;font-size:0.875rem;font-weight:600;text-decoration:none}
.btn-fill{background:var(--accent);color:#fff}
.btn-fill:hover{background:#1943c0}
.btn-ghost{color:var(--accent);padding-inline:0;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ─── Aussagen, Probleme, Leistungen ──────────────────────────────────────── */
.thesis-quote{font-size:1.75rem;line-height:1.4;max-width:780px}
.thesis-sub{margin-top:18px;max-width:700px;color:var(--muted)}
.problem-grid,.feat-grid,.leistung-grid,.module-grid,.steps,.ablauf-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.steps,.ablauf-steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
.ablauf-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.problem-cell,.feat-cell,.leistung-cell,.modul,.step,.ablauf-step{padding-block:22px;border-top:1px solid var(--line);min-width:0}
.problem-cell p,.feat-cell p,.leistung-cell p,.modul p,.step p,.ablauf-step p{color:var(--muted);font-size:0.9375rem}
.n,.step-num,.ablauf-num,.modul-num{font-size:0.8125rem;font-weight:600;color:var(--accent)!important;margin-bottom:8px}
.feat-icon,.leistung-icon{display:inline-block;color:var(--accent);font-size:1.125rem;margin-bottom:10px}
.step-dauer,.modul-dauer{margin-top:10px;font-size:0.75rem!important}
.platform-tags{display:flex;flex-wrap:wrap;gap:10px}
.platform-tag{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:0.8125rem}
.platform-note{display:flex;gap:16px;margin-top:32px;max-width:780px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);background:#fff}
.platform-note-icon{color:var(--accent)}
.platform-note p{color:var(--muted);font-size:0.9375rem}
.about-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:72px}
.about-text p{color:var(--muted)}
.about-text p+p{margin-top:14px}

/* ─── Pakete (KI-Training) ────────────────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.paket{position:relative;display:flex;flex-direction:column;padding:28px 24px;border:1px solid var(--line);border-radius:8px;background:#fff}
.paket.best{border:2px solid var(--accent)}
.paket-badge{position:absolute;top:-12px;left:24px;padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:0.75rem;font-weight:600}
.paket-name{font-size:1.25rem;font-weight:600}
.paket-tag{color:var(--muted);font-size:0.875rem;margin-top:4px}
.paket-price{font-size:2rem;font-weight:500;margin-top:18px}
.paket-price-old{font-size:1rem;color:var(--muted);text-decoration:line-through;margin-left:8px}
.paket-price-note{font-size:0.75rem;color:var(--muted)}
.paket-features{list-style:none;padding:0;margin:20px 0 24px;flex:1}
.paket-features li{padding:8px 0;border-top:1px solid var(--line);font-size:0.875rem}
.paket-features li.off{color:var(--muted);text-decoration:line-through}
.paket-cta{min-height:46px;border:1px solid var(--accent);border-radius:4px;background:#fff;color:var(--accent);font-weight:600;font-size:0.875rem}
.paket.best .paket-cta,.paket-cta:hover{background:var(--accent);color:#fff}

/* ─── FAQ (details/summary) ───────────────────────────────────────────────── */
.faq-list{border-top:1px solid var(--line);max-width:860px}
.faq-a{padding-bottom:22px;color:var(--muted);font-size:0.9375rem}

/* ─── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:72px}
.kontakt-intro p{color:var(--muted);font-size:0.9375rem}
.kontakt-intro p+p{margin-top:12px}
.kontakt-meta{margin-top:18px}
.kontakt-meta-item{padding:10px 0;border-top:1px solid var(--line);font-size:0.875rem;color:var(--muted)}
.kontakt-meta-item a{overflow-wrap:anywhere}
.form-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.form-row{margin-top:18px}
.form-row label{margin-top:0}
.form-note{font-size:0.8125rem;color:var(--muted)}
.form-check{display:flex;gap:12px;align-items:flex-start}
.form-check input{width:auto;margin-top:3px;flex:none}
.form-check label{margin:0;font-size:0.8125rem;line-height:1.6;color:var(--muted)}
.form-hidden{display:none}
.form-submit{margin-top:24px}
.form-submit button{min-height:46px;padding:14px 20px;border:0;border-radius:4px;background:var(--accent);color:#fff;font-weight:600;font-size:0.875rem}
.form-submit button:hover{background:#1943c0}
.form-submit button:disabled{opacity:.6;cursor:default}
.form-msg{display:none;margin-top:16px;padding:12px 16px;border-radius:4px;font-size:0.875rem}
.form-msg.ok{background:#e8f4ec;color:#1d5b33}
.form-msg.err{background:#fbeaea;color:#8c1d18}

/* ─── Seitenkopf Kalkulator-Seite ─────────────────────────────────────────── */
/* „main“ erhöht die Spezifität: website-kalkulator.css wird nach dieser Datei geladen. */
main .page-hero{width:min(1120px,calc(100% - 80px));max-width:none;padding:28px 0 40px}
main .page-hero::before,main .page-hero .hero-eyebrow::before{display:none}
main .page-hero .hero-eyebrow{font-size:0.8125rem;letter-spacing:0;text-transform:none;color:var(--muted)}
main .page-hero h1{font-size:2.875rem;font-weight:500;line-height:1.15}
main .page-hero h1 em{font-style:normal;color:inherit}
main .page-hero .lead{font-size:1.125rem;line-height:1.7;margin-top:24px}
@media(max-width:850px){main .page-hero{width:calc(100% - 40px)}main .page-hero h1{font-size:2.375rem}}
@media(max-width:580px){main .page-hero{padding:24px 0 32px}main .page-hero h1{font-size:2rem}}

@media(max-width:850px){
  .inner,.hero-inner,.hero-scroll{width:calc(100% - 40px)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-grid{grid-template-columns:minmax(0,1fr);max-width:520px}
  .kontakt-inner,.about-inner{gap:36px}
}
@media(max-width:580px){
  main>section{padding-block:36px}
  .problem-grid,.feat-grid,.leistung-grid,.module-grid,.steps,.ablauf-steps,.form-2col,.kontakt-inner,.about-inner{grid-template-columns:minmax(0,1fr)}
  .kontakt-inner,.about-inner{gap:24px}
  .thesis-quote{font-size:1.375rem}
  .hero-sub{font-size:1rem}
}