/* ==========================================================================
   Vitality Spitex – Formulare Zuweisung und Kontakt (eigenes HTML/PHP statt Jotform)
   Version 2.0 · 10/2026 · gestaltet nach Lastenheft Abb. 3–6
   Alle Regeln mit .zf- vorangestellt; Farben aus vitality-pages.css (.vs).
   ========================================================================== */

.zf { --zf-line: #CFD8DC; --zf-ph: #9AA5AA; --zf-err: #B3261E; display: flex; flex-direction: column; }
.zf form { margin: 0; }

/* Bootstrap/Theme neutralisieren */
.zf fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.zf legend { width: auto; margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; color: inherit; }
.zf label { max-width: none; margin: 0; font-weight: 400; }
.zf input, .zf select, .zf textarea, .zf button { font-family: var(--vs-body); }

/* ---------- Fortschritt ---------- */
.zf-progress { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.zf-progress li { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 400; color: #8A979C; }
.zf-progress li::before { content: ""; height: 3px; border-radius: 2px; background: var(--vs-hair); transition: background .25s; }
.zf-progress li.is-done::before, .zf-progress li.is-current::before { background: var(--vs-teal); }
.zf-progress li.is-current { color: var(--vs-teal); font-weight: 600; }
@media (max-width: 480px) {
  .zf-progress { gap: 5px; margin-bottom: 26px; }
  .zf-progress li { font-size: 13px; gap: 9px; }
}

/* ---------- Schritte ---------- */
.zf-step { display: flex; flex-direction: column; gap: 22px; }
.zf-step[hidden] { display: none; }
.zf-title {
  display: block; margin: 0 0 4px !important; font-family: var(--vs-display); font-weight: 400;
  font-size: 34px !important; line-height: 1.2 !important; color: var(--vs-teal) !important;
}
@media (max-width: 1023px) { .zf-title { font-size: 28px !important; } }
/* Zweiter Abschnitt innerhalb eines Schritts */
.zf-title--sub { margin-top: 18px !important; padding-top: 34px; border-top: 1px solid var(--vs-hair); font-size: 30px !important; }
@media (max-width: 1023px) { .zf-title--sub { font-size: 26px !important; } }
.zf-step:focus { outline: none; }

/* ---------- Felder ---------- */
.zf-row { display: flex; gap: 16px; align-items: flex-start; }
.zf-row[hidden] { display: none; }
.zf-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.zf-field--date { flex: 0 1 200px; }
.zf-field--plz { flex: 0 1 110px; }
@media (max-width: 640px) {
  .zf-row { flex-wrap: wrap; }
  .zf-row > .zf-field { flex: 1 1 100% !important; }
  .zf-row > .zf-field--plz { flex: 0 1 110px !important; }
  .zf-row > .zf-field--plz + .zf-field { flex: 1 1 0 !important; }
}

.zf-label { font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--vs-ink); }
.zf-label i, .zf-label .zf-hint { font-style: normal; font-weight: 300; color: var(--zf-ph); }

.zf-input {
  width: 100%; height: 52px; padding: 0 16px; margin: 0;
  border: 1px solid var(--zf-line); border-radius: 2px; background: #FFFFFF; box-shadow: none;
  font-size: 16px; font-weight: 300; color: var(--vs-ink);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.zf-input::placeholder { color: var(--zf-ph); opacity: 1; }
.zf-input:hover { border-color: #B7C4C9; }
.zf-input:focus { outline: none; border-color: var(--vs-teal); box-shadow: 0 0 0 3px rgba(17, 127, 169, .14); }
textarea.zf-input { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
select.zf-input {
  padding-right: 42px; font-weight: 400; cursor: pointer;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E1E1E' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center;
}
input[type="date"].zf-input { padding-right: 10px; }
input[type="date"].zf-input:invalid:not(:focus)::-webkit-datetime-edit { color: var(--zf-ph); }

/* Fehler */
.zf-field.is-invalid .zf-input, .zf-group.is-invalid .zf-pill span { border-color: var(--zf-err); }
.zf-error { margin: 0; font-size: 13px; font-weight: 400; color: var(--zf-err); }
.zf-error:empty { display: none; }

/* ---------- Schalter ---------- */
.zf-switch { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; font-size: 15px; line-height: 1.4; color: var(--vs-ink); }
.zf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zf-switch-track {
  position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 13px;
  background: #CFD8DC; transition: background .2s;
}
.zf-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s;
}
.zf-switch input:checked + .zf-switch-track { background: var(--vs-teal); }
.zf-switch input:checked + .zf-switch-track::after { transform: translateX(20px); }
.zf-switch input:focus-visible + .zf-switch-track { outline: 2px solid var(--vs-teal); outline-offset: 2px; }
.zf-switch b { font-weight: 600; }

/* ---------- Pillen (Radio / Checkbox) ---------- */
.zf-group { display: flex; flex-direction: column; gap: 10px; }
.zf-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.zf-pill { position: relative; cursor: pointer; }
.zf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zf-pill span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border: 1px solid var(--zf-line); border-radius: 23px; background: #FFFFFF;
  font-size: 15.5px; font-weight: 400; color: var(--vs-ink); user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.zf-pill:hover span { border-color: var(--vs-teal); }
.zf-pill input:checked + span { background: var(--vs-teal); border-color: var(--vs-teal); color: #FFFFFF; }
.zf-pill input:focus-visible + span { outline: 2px solid var(--vs-teal); outline-offset: 2px; }

/* ---------- Leistungskarten ---------- */
.zf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .zf-cards { grid-template-columns: 1fr; } }
.zf-card { border: 1px solid var(--zf-line); border-radius: 2px; background: #FFFFFF; transition: background .15s, border-color .15s; }
.zf-card:hover { border-color: #B7C4C9; }
.zf-card.is-on { border-color: var(--vs-teal); background: var(--vs-tint); }
.zf-card-head { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; cursor: pointer; }
.zf-card-head input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zf-check {
  position: relative; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
  border: 1.5px solid #B7C4C9; border-radius: 2px; background: #FFFFFF;
}
.zf-card-head input:checked + .zf-check { border-color: var(--vs-teal); }
.zf-card-head input:checked + .zf-check::after { content: ""; position: absolute; inset: 3px; background: var(--vs-teal); }
.zf-card-head input:focus-visible + .zf-check { outline: 2px solid var(--vs-teal); outline-offset: 2px; }
.zf-card-text { display: flex; flex-direction: column; gap: 3px; }
.zf-card-text strong { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--vs-ink); }
.zf-card-text small { font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--vs-grey); }
.zf-card-body { display: flex; flex-direction: column; gap: 12px; padding: 0 22px 22px 60px; }
.zf-card-body[hidden] { display: none; }
@media (max-width: 480px) { .zf-card-body { padding-left: 22px; } }

/* ---------- Upload ---------- */
.zf-upload {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 84px; padding: 16px; border: 1.5px dashed #B7C9D1; border-radius: 2px;
  color: var(--vs-teal); font-size: 16px; font-weight: 400; text-align: center; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.zf-upload:hover, .zf-upload.is-drag { background: var(--vs-tint); border-color: var(--vs-teal); }
.zf-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zf-upload-label { display: inline-flex; align-items: center; gap: 12px; }
.zf-upload small { font-size: 12.5px; font-weight: 300; color: var(--vs-grey); }
.zf-upload input:focus-visible ~ .zf-upload-label { outline: 2px solid var(--vs-teal); outline-offset: 4px; }
.zf-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.zf-files li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--vs-tint);
  font-size: 14px; font-weight: 400; color: var(--vs-ink);
}
.zf-files li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-files li small { color: var(--vs-grey); font-size: 12.5px; }
.zf-files button { border: 0; background: none; padding: 2px 6px; font-size: 20px; line-height: 1; color: var(--vs-grey); cursor: pointer; }
.zf-files button:hover { color: var(--zf-err); }
.zf-note { margin: -10px 0 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--vs-grey); }

/* ---------- Einverständnis ---------- */
.zf-consent { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--vs-ink); }
.zf-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zf-consent input:checked + .zf-check { border-color: var(--vs-teal); }
.zf-consent input:checked + .zf-check::after { content: ""; position: absolute; inset: 3px; background: var(--vs-teal); }
.zf-consent input:focus-visible + .zf-check { outline: 2px solid var(--vs-teal); outline-offset: 2px; }
.zf-consent .zf-check { margin-top: 1px; }
.zf-group.is-invalid .zf-consent .zf-check { border-color: var(--zf-err); }

/* ---------- Navigation ---------- */
.zf-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 26px; border-top: 1px solid var(--vs-hair); }
.zf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 40px; border: 0; border-radius: 2px;
  background: var(--vs-teal); color: #FFFFFF; font-size: 16px; font-weight: 600; letter-spacing: .2px; cursor: pointer;
  transition: background .15s;
}
.zf-btn:hover { background: var(--vs-teal-dark); }
.zf-btn:focus-visible { outline: 2px solid var(--vs-teal); outline-offset: 3px; }
.zf-btn[disabled] { opacity: .65; cursor: progress; }
.zf-back { border: 0; background: none; padding: 8px 0; font-size: 16px; font-weight: 300; color: var(--vs-grey); cursor: pointer; }
.zf-back:hover { color: var(--vs-teal); }
.zf-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #FFFFFF; border-radius: 50%; animation: zf-spin .8s linear infinite; }
@keyframes zf-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .zf-btn { flex: 1 1 auto; padding: 0 24px; } }

.zf-alert { margin: 0; padding: 14px 18px; border-left: 3px solid var(--zf-err); background: #FCF1F0; font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--vs-ink); }
.zf-alert[hidden] { display: none; }

/* Honigtopf für Spam-Bots */
.zf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Danke ---------- */
.zf-done { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 0; }
.zf-done[hidden] { display: none; }
.zf-done-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--vs-tint); display: flex; align-items: center; justify-content: center; }
.zf-done p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; }
.zf-done .zf-btn { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) { .zf * { transition: none !important; animation: none !important; } }

/* Legende im fieldset nimmt nicht am Flex-Abstand teil */
legend.zf-title { margin-bottom: 24px !important; }

/* ==========================================================================
   Kontaktformular (#kf) · Seite /page-contact-style1 und /eng/page-contact-style1
   Markup gemäss «Anpassungen Website · Kontaktformular und Zuweisungsformular», S. 9–10
   ========================================================================== */
#kf .zf-step { gap: 20px; }
#kf .zf-title { margin: 0 0 6px !important; font-size: 32px !important; }
@media (max-width: 1023px) { #kf .zf-title { font-size: 28px !important; } }

/* Abschnittsköpfe «1 Worum geht es?» usw. */
#kf .zf-chips { min-width: 0; margin: 0; padding: 0; border: 0; }
#kf .zf-chips > legend.zf-label { display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; font-size: 15px; line-height: 1.4; color: var(--vs-ink); }
#kf .zf-label > span[style], #kf legend > span[style] { font-size: 21px; font-weight: 300; vertical-align: -1px; }

/* Trennlinien zwischen den Abschnitten (wie Entwurf) */
#kf .zf-chips + .zf-label,
#kf .zf-chips + .zf-field { margin-top: 10px; padding-top: 34px; border-top: 1px solid var(--vs-hair); }
#kf .zf-field:has(textarea) { padding-bottom: 34px; border-bottom: 1px solid var(--vs-hair); }

/* Kacheln (Thema, Rückruf) */
.zf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) {
  .zf-tiles--topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zf-chip { position: relative; display: block; margin: 0; cursor: pointer; }
.zf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; bottom: 0; }
.zf-chip span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--zf-line); border-radius: 2px; background: #FFFFFF; text-align: center;
  font-size: 15.5px; font-weight: 400; line-height: 1.3; color: var(--vs-ink); user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.zf-chip:hover span { border-color: var(--vs-teal); }
.zf-chip input:checked + span { background: var(--vs-teal); border-color: var(--vs-teal); color: #FFFFFF; }
.zf-chip input:focus-visible + span { outline: 2px solid var(--vs-teal); outline-offset: 2px; }
@media (max-width: 400px) { .zf-chip span { font-size: 14.5px; padding: 8px; } }

/* Hinweise und Fehler */
.zf-hint { margin: -6px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--vs-grey); }
.zf-hint a { color: var(--vs-teal); }
#kf .zf-error { margin: -6px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--zf-err); }
.zf .zf-input[aria-invalid="true"] { border-color: var(--zf-err); }
#kf label[for="kf-name"]::after { content: " *"; color: var(--vs-teal); }

/* Breiter Button */
.zf-btn--wide { width: 100%; margin-top: 4px; }
#kf .zf-btn--wide + .zf-hint { margin-top: 0; }

/* Danke */
#kf .zf-done { gap: 14px; }