/* happy.css · Abschnitte des Umbaus 29.09.2026 (Weggabelung, Einstiege, Business, Stimmen, Kontakt, Business-Seite)
   Nutzt ausschliesslich die Tokens aus tokens.css. Mobil zuerst. */

.sw-hb-head { max-width: 46rem; margin: 0 auto var(--sw-s-7); text-align: center; }
.sw-hb-head .sw-lead { margin-top: var(--sw-s-3); }

/* ---------- Weggabelung ---------- */
.sw-hb-wege__grid { display: grid; gap: var(--sw-s-5); }
.sw-hb-weg {
  display: flex; flex-direction: column; gap: var(--sw-s-3);
  padding: var(--sw-s-6); border-radius: var(--sw-r-xl);
  background: var(--sw-paper); border: 1px solid var(--sw-line);
  color: var(--sw-ink); text-decoration: none;
  box-shadow: var(--sw-sh-subtle);
  transition: transform .3s var(--sw-ease-out), box-shadow .3s var(--sw-ease-out), border-color .3s;
}
.sw-hb-weg:hover { transform: translateY(-3px); box-shadow: var(--sw-sh-lifted); border-color: var(--sw-orange-border); }
.sw-hb-weg:focus-visible { outline: 2px solid var(--sw-orange); outline-offset: 3px; }
.sw-hb-weg--business { background: var(--sw-ink); color: var(--sw-paper); border-color: var(--sw-ink); }
.sw-hb-weg__label {
  font-size: var(--sw-fs-eyebrow); letter-spacing: var(--sw-ls-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--sw-orange-deep);
}
.sw-hb-weg--business .sw-hb-weg__label { color: var(--sw-orange-soft); }
.sw-hb-weg__title { font-size: var(--sw-fs-h3); line-height: 1.25; margin: 0; }
.sw-hb-weg__text { margin: 0; color: var(--sw-ink-soft); }
.sw-hb-weg--business .sw-hb-weg__text { color: rgba(255,255,255,.78); }
.sw-hb-weg__cta { margin-top: auto; font-weight: 600; }
.sw-hb-weg__cta::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); }

/* ---------- Drei Einstiege ---------- */
.sw-hb-einstieg__grid { display: grid; gap: var(--sw-s-5); list-style: none; padding: 0; margin: 0; }
.sw-hb-karte {
  position: relative; display: flex; flex-direction: column; gap: var(--sw-s-3);
  padding: var(--sw-s-6); padding-top: var(--sw-s-7);
  border-radius: var(--sw-r-xl); background: var(--sw-off); border: 1px solid var(--sw-line);
}
.sw-hb-karte--betont { background: var(--sw-paper); border-color: var(--sw-orange-border); box-shadow: var(--sw-sh-soft); }
.sw-hb-karte__num {
  position: absolute; top: var(--sw-s-4); left: var(--sw-s-6);
  font-weight: 700; color: var(--sw-orange); font-size: .95rem;
}
.sw-hb-karte__title { font-size: var(--sw-fs-h3); margin: 0; }
.sw-hb-karte__text { margin: 0; color: var(--sw-ink-soft); }
.sw-hb-karte__preis { margin: 0; font-weight: 700; font-size: 1.15rem; }
.sw-hb-karte__preis span { display: block; font-weight: 400; font-size: var(--sw-fs-small); color: var(--sw-ink-faint); }
.sw-hb-karte .sw-btn { margin-top: auto; align-self: flex-start; }
.sw-hb-karte__alt { font-size: var(--sw-fs-small); color: var(--sw-ink-soft); }

/* ---------- Business-Teaser ---------- */
.sw-hb-business__grid { display: grid; gap: var(--sw-s-7); align-items: start; }
.sw-hb-business__quote {
  margin: var(--sw-s-5) 0; padding-left: var(--sw-s-5);
  border-left: 3px solid var(--sw-orange);
  font-family: var(--sw-font-serif); font-style: italic; font-size: 1.35rem; line-height: 1.4;
}
.sw-hb-business__hinweis { font-size: var(--sw-fs-small); color: var(--sw-ink-faint); max-width: 34rem; }
.sw-hb-schritte { list-style: none; padding: 0; margin: 0 0 var(--sw-s-6); display: grid; gap: var(--sw-s-4); }
.sw-hb-schritte li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sw-s-3); align-items: start; }
.sw-hb-schritte li > span {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--sw-orange); color: #fff; font-weight: 700;
}
.sw-hb-schritte strong { display: block; }
.sw-hb-schritte p { margin: .15rem 0 0; color: var(--sw-ink-soft); }

/* ---------- Stimmen ---------- */
.sw-hb-stimmen__titel { font-size: var(--sw-fs-h3); margin: var(--sw-s-6) 0 var(--sw-s-4); }
.sw-hb-stimmen__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sw-s-4); }
.sw-hb-stimme { padding: var(--sw-s-5); border-radius: var(--sw-r-lg); background: var(--sw-off); }
.sw-hb-stimme blockquote { margin: 0 0 var(--sw-s-3); }
.sw-hb-stimme__wer { margin: 0; font-size: var(--sw-fs-small); color: var(--sw-ink-faint); }

/* ---------- Kontakt: WhatsApp-Knoepfe ---------- */
.sw-hb-kontakt__wa { display: flex; flex-wrap: wrap; gap: var(--sw-s-3); justify-content: center; margin-top: var(--sw-s-5); }
.sw-hb-kontakt__wa-hinweis { font-size: var(--sw-fs-small); color: var(--sw-ink-faint); text-align: center; margin-top: var(--sw-s-3); }

/* ---------- Business-Seite ---------- */
.sw-hb-stufen { display: grid; gap: var(--sw-s-3); margin-top: var(--sw-s-6); }
.sw-hb-stufe {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sw-s-1) var(--sw-s-3); align-items: start;
  padding: var(--sw-s-4) var(--sw-s-5); border-radius: var(--sw-r-lg);
  background: var(--sw-paper); border: 1px solid var(--sw-line); color: var(--sw-ink); text-decoration: none;
  transition: border-color .25s, transform .25s var(--sw-ease-out);
}
.sw-hb-stufe:hover { border-color: var(--sw-orange-border); transform: translateY(-2px); }
.sw-hb-stufe__num { grid-row: span 2; font-weight: 700; color: var(--sw-orange); font-size: 1.25rem; }
.sw-hb-stufe__titel { font-weight: 600; }
.sw-hb-stufe__text { font-size: var(--sw-fs-small); color: var(--sw-ink-soft); }
.sw-section--ink .sw-hb-stufe { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--sw-paper); }
.sw-section--ink .sw-hb-stufe__text { color: rgba(255,255,255,.72); }

.sw-hb-fuerwen { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sw-s-4); }
.sw-hb-fuerwen li { padding: var(--sw-s-5); border-radius: var(--sw-r-lg); background: var(--sw-paper); border: 1px solid var(--sw-line); }
.sw-hb-fuerwen strong { display: block; margin-bottom: var(--sw-s-2); }
.sw-hb-fuerwen p { margin: 0; color: var(--sw-ink-soft); }

.sw-hb-faq { max-width: 46rem; margin: 0 auto; }
.sw-hb-faq details { border-bottom: 1px solid var(--sw-line); padding: var(--sw-s-4) 0; }
.sw-hb-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--sw-s-4); }
.sw-hb-faq summary::-webkit-details-marker { display: none; }
.sw-hb-faq summary::after { content: "+"; color: var(--sw-orange); font-weight: 700; }
.sw-hb-faq details[open] summary::after { content: "\2212"; }
.sw-hb-faq details p { margin: var(--sw-s-3) 0 0; color: var(--sw-ink-soft); }

@media (min-width: 760px) {
  .sw-hb-wege__grid { grid-template-columns: 1fr 1fr; }
  .sw-hb-einstieg__grid { grid-template-columns: repeat(3, 1fr); }
  .sw-hb-business__grid { grid-template-columns: 1fr 1fr; gap: var(--sw-s-9); }
  .sw-hb-stimmen__grid { grid-template-columns: repeat(2, 1fr); }
  .sw-hb-fuerwen { grid-template-columns: 1fr 1fr; }
  .sw-hb-stufen { grid-template-columns: repeat(3, 1fr); }
}
.sw-hb-einstieg__stand { margin-top: var(--sw-s-5); text-align: center; font-size: var(--sw-fs-small); color: var(--sw-ink-faint); }

/* ---------- Warum mit Sarah (Business-Seite, 29.09.2026) ---------- */
.sw-hb-warum__intro { display: grid; gap: var(--sw-s-6); align-items: center; margin-bottom: var(--sw-s-8); }
.sw-hb-warum__intro .sw-lead { margin-top: var(--sw-s-4); }
.sw-hb-warum__foto { margin: 0; max-width: 20rem; justify-self: center; }
.sw-hb-warum__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sw-r-2xl); box-shadow: var(--sw-sh-lifted); }
.sw-hb-gruende { list-style: none; padding: 0; margin: 0 0 var(--sw-s-8); display: grid; gap: var(--sw-s-5); }
.sw-hb-gruende li { padding: var(--sw-s-5) 0 0; border-top: 2px solid var(--sw-orange); }
.sw-hb-gruende h3 { font-size: var(--sw-fs-h3); margin: 0 0 var(--sw-s-2); }
.sw-hb-gruende p { margin: 0; color: var(--sw-ink-soft); }
.sw-hb-statement { margin: 0 auto var(--sw-s-8); max-width: 48rem; text-align: center; padding: var(--sw-s-7) var(--sw-s-5); border-radius: var(--sw-r-2xl); background: var(--sw-paper-warm); }
.sw-hb-statement__satz { font-family: var(--sw-font-serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.25; margin: 0 0 var(--sw-s-4); color: var(--sw-ink); }
.sw-hb-statement__text { margin: 0 auto; max-width: 38rem; color: var(--sw-ink-soft); }
.sw-hb-geben { display: grid; gap: var(--sw-s-5); margin-bottom: var(--sw-s-8); }
.sw-hb-geben__spalte { padding: var(--sw-s-6); border-radius: var(--sw-r-xl); background: var(--sw-off); }
.sw-hb-geben__spalte--ink { background: var(--sw-ink); color: var(--sw-paper); }
.sw-hb-geben__spalte h3 { font-size: var(--sw-fs-h3); margin: 0 0 var(--sw-s-4); }
.sw-hb-geben__spalte ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sw-s-3); }
.sw-hb-geben__spalte li { position: relative; padding-left: 1.5rem; }
.sw-hb-geben__spalte li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sw-orange); }
.sw-hb-geben__spalte--ink li { color: rgba(255,255,255,.86); }
.sw-hb-warum__abschluss { text-align: center; max-width: 40rem; margin: 0 auto; }
.sw-hb-warum__abschluss p { color: var(--sw-ink-soft); margin: var(--sw-s-3) 0 var(--sw-s-5); }
.sw-hb-warum__alt { font-size: var(--sw-fs-small); }
.sw-hb-business__warum { margin: 0 0 var(--sw-s-3); font-weight: 600; }
.sw-hb-business__warum a { color: var(--sw-orange-deep); }
@media (min-width: 760px) {
  .sw-hb-warum__intro { grid-template-columns: 1.4fr 1fr; gap: var(--sw-s-9); }
  .sw-hb-gruende { grid-template-columns: 1fr 1fr; gap: var(--sw-s-6) var(--sw-s-8); }
  .sw-hb-geben { grid-template-columns: 1fr 1fr; }
}

/* ---------- Fester WhatsApp-Knopf (01.10.2026) ---------- */
.sw-hb-wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem; border-radius: var(--sw-r-pill);
  background: var(--sw-ink); color: var(--sw-paper); text-decoration: none; font-weight: 600; font-size: .95rem;
  box-shadow: var(--sw-sh-lifted); transition: transform .2s var(--sw-ease-out);
}
.sw-hb-wa:hover { transform: translateY(-2px); }
.sw-hb-wa:focus-visible { outline: 2px solid var(--sw-orange); outline-offset: 3px; }
@media (max-width: 480px) { .sw-hb-wa span { display: none; } .sw-hb-wa { padding: .9rem; } }
@media print { .sw-hb-wa { display: none; } }