/* ==========================================================================
   Vitality Spitex – Seiten Zuweisung, Tarife, Kontakt
   Version 1.0 · 16.10.2026
   Alle Regeln sind mit .vs- vorangestellt und beeinflussen das Theme nicht.
   Einbinden: im Theme (z. B. WordPress: Design → Customizer → Zusätzliches CSS
   oder als eigene Datei im Child-Theme).
   ========================================================================== */

/* ---------- 1. Design-Tokens ---------- */
.vs {
  --vs-teal: #117FA9;
  --vs-teal-dark: #0D5F7E;
  --vs-ink: #1E1E1E;
  --vs-grey: #6B6B6B;
  --vs-hair: #E8ECEE;
  --vs-row: #F0F3F4;
  --vs-tint: #F4F8FA;
  --vs-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --vs-body: 'Open Sans', Arial, Helvetica, sans-serif;
  font-family: var(--vs-body);
  font-weight: 300;
  color: var(--vs-ink);
  background: #FFFFFF;
}
.vs *, .vs *::before, .vs *::after { box-sizing: border-box; }
.vs a { color: var(--vs-teal); text-decoration: none; }
.vs a:hover { color: var(--vs-teal-dark); }
.vs a:focus-visible, .vs .vs-btn:focus-visible { outline: 2px solid var(--vs-teal); outline-offset: 2px; }

/* ---------- 2. Seitenraster ----------
   Desktop: links Einleitung (max. 380 px), rechts Inhalt (max. 720 px).
   Handy:   eine Spalte in der Reihenfolge des HTML (top → main → bottom). */
.vs-page {
  max-width: 1170px;
  margin: 0 auto;
  padding: 70px 24px 90px;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 720px);
  grid-template-areas: "top main" "bottom main";
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  row-gap: 36px;
  align-items: start;
}
.vs-top    { grid-area: top;    display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.vs-bottom { grid-area: bottom; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.vs-main   { grid-area: main;   display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 1023px) {
  .vs-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "main" "bottom";
    grid-template-rows: auto;
    padding: 40px 20px 48px;
    row-gap: 32px;
  }
}

/* ---------- 3. Typografie ---------- */
.vs-intro { display: flex; flex-direction: column; gap: 16px; }
.vs-kicker { margin: 0; font-size: 13px; font-weight: 400; color: var(--vs-ink); }
.vs-h1 {
  margin: 0; font-family: var(--vs-display); font-weight: 400;
  font-size: 42px; line-height: 1.18; color: var(--vs-teal); text-wrap: balance;
}
.vs-h2 {
  margin: 0; font-family: var(--vs-display); font-weight: 400;
  font-size: 28px; line-height: 1.25; color: var(--vs-teal);
}
.vs-lead { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--vs-ink); }
.vs-note { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--vs-grey); }
@media (max-width: 1023px) {
  .vs-h1 { font-size: 34px; }
  .vs-h2 { font-size: 26px; }
}

/* Abschnitts-Label: fett, darunter 24 × 1.5 px Linie in Teal */
.vs-label {
  display: flex; flex-direction: column; gap: 7px; margin: 0;
  font-size: 13px; font-weight: 700; color: var(--vs-ink);
}
.vs-label::after { content: ""; width: 24px; height: 1.5px; background: var(--vs-teal); }

.vs-block { display: flex; flex-direction: column; gap: 10px; }
.vs-block p:not(.vs-label) { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; }

/* Grosse Telefonnummer – bewusst Open Sans Light, nicht Marcellus */
.vs-phone {
  font-family: var(--vs-body); font-weight: 300; font-size: 34px; line-height: 1.15;
  color: var(--vs-teal); font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) { .vs-phone { font-size: 30px; } }

/* Nummerierte Aufzählung (Ablauf, «Gut zu wissen») */
.vs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: vs; }
.vs-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.45; counter-increment: vs; }
.vs-steps li::before { content: counter(vs); width: 14px; flex-shrink: 0; font-size: 18px; font-weight: 300; color: var(--vs-teal); }

/* ---------- 4. Abschnitte rechts ---------- */
.vs-section { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid var(--vs-hair); }
.vs-section + .vs-section { margin-top: 30px; }
.vs-section-note { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--vs-grey); }

/* ---------- 5. Preisliste (Tarife) ---------- */
.vs-prices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-price {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--vs-row);
}
.vs-price-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-price-name strong { font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--vs-ink); }
.vs-price-name span { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--vs-grey); }
.vs-price-value { flex-shrink: 0; text-align: right; white-space: nowrap; }
.vs-price-value b { font-size: 22px; font-weight: 300; color: var(--vs-teal); font-variant-numeric: tabular-nums; }
.vs-price-value small { font-size: 12.5px; font-weight: 400; color: var(--vs-grey); }
@media (max-width: 480px) { .vs-price-value b { font-size: 19px; } }

/* ---------- 6. Hinterlegte Box mit Button ---------- */
.vs-cta {
  margin-top: 40px; padding: 30px 32px; background: var(--vs-tint);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.vs-cta .vs-h2 { font-size: 26px; }
.vs-cta p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; }
.vs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 30px; border: 0; border-radius: 2px;
  background: var(--vs-teal); color: #FFFFFF !important;
  font-family: var(--vs-body); font-size: 14px; font-weight: 600; letter-spacing: .3px;
}
.vs-btn:hover { background: var(--vs-teal-dark); }
@media (max-width: 480px) {
  .vs-cta { padding: 24px 20px; }
  .vs-btn { align-self: stretch; }
}

/* ---------- 7. Jotform-Einbettung ---------- */
.vs-form { padding-top: 28px; border-top: 1px solid var(--vs-hair); display: flex; flex-direction: column; gap: 20px; }
.vs-form iframe { display: block; width: 100%; min-width: 100%; max-width: 100%; border: 0; background: transparent; }

/* ---------- 8. Anpassung an das bestehende Theme (Lastenheft Kap. 4 / Abb. 1) ----------
   Aktiver Menuepunkt und aktueller Footer-Link in Teal. Gilt nur auf den Seiten,
   die diese Datei einbinden (Zuweisung, Tarife, Kontakt – DE und EN). */
.menuzord .menuzord-menu > li.active > a { color: #117FA9; }
.footer a[aria-current="page"] { color: #117FA9; }

/* ---------- 9. Zuweisung: Jotform-Kartenformular naeher an den Titel ----------
   Jotform setzt ueber der Willkommens-Karte einen festen Leerraum (~140 px).
   Nur Desktop; auf dem Handy steht das Formular unter der Telefonnummer.
   Wird das Formular in Jotform auf «klassisch» (4 Seiten) umgestellt,
   diesen Abschnitt entfernen. */
@media (min-width: 1024px) {
  .vs-form--card { padding-top: 0; border-top: 0; }
  .vs-form--card iframe { margin-top: -70px; }
}
@media (max-width: 1023px) {
  /* Handy/Tablet: Linie weg, nur leicht hoeher – das leere Iframe-Feld darf die Telefonnummer nicht ueberdecken */
  .vs-form--card { padding-top: 0; border-top: 0; }
  .vs-form--card iframe { margin-top: -20px; }
}