/* Fairhours – Einrichtung (a–d) und Anmelden (Nachbau von design/website/Fairhours Konto.dc.html) */

body.konto { display: flex; flex-direction: column; }

.konto-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 68px; padding: 0 clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--line); background: var(--bg);
}
.konto-marke { text-decoration: none; color: var(--ink); font-size: 25px; }
.konto-marke:hover { color: var(--ink); }
.zurueck-link {
  display: flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.zurueck-link:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Schale: Seitenleiste + Inhalt ---------- */
.schale { flex: 1; display: flex; flex-direction: column; }
.leiste { background: var(--deep); color: var(--on-deep); display: flex; flex-direction: column; padding: 14px 20px; }
.leiste-text { display: none; }
.fortschritt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.fortschritt li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fs-punkt {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  box-shadow: inset 0 0 0 2px var(--on-deep2); color: var(--on-deep);
}
.fs-label { position: relative; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--on-deep2); display: none; }
.fortschritt li[aria-current="step"] .fs-label { display: inline; color: var(--on-deep); }
.fortschritt li[data-zustand="erledigt"] .fs-punkt { background: var(--ac); color: var(--on-ac); box-shadow: none; }
.fortschritt li[data-zustand="aktuell"] .fs-punkt,
.fortschritt li[data-zustand="problem"] .fs-punkt { background: var(--on-deep); color: var(--deep); box-shadow: none; }

@media (min-width: 960px) {
  .schale { flex-direction: row; }
  .leiste { width: 38%; max-width: 520px; gap: 48px; padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px); }
  .leiste-text { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
  .fortschritt { flex-direction: column; align-items: stretch; gap: 18px; }
  .fs-label { display: inline; font-size: 16px; }
}
.leiste-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-deep2); }
.leiste-claim { margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; letter-spacing: -.04em; }
.leiste-unter { margin: 0; font-size: 17px; line-height: 1.55; color: var(--on-deep2); }

.konto-inhalt { flex: 1; display: flex; justify-content: center; padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.konto-spalte { width: 100%; max-width: 640px; }
.laedt .bildschirm { visibility: hidden; }

.bildschirm { display: flex; flex-direction: column; gap: 28px; animation: fhIn10 .4s var(--ez) both; }
.bildschirm.eng { gap: 26px; }
.bildschirm > .knopf { align-self: flex-start; }
.check-kopf:disabled { cursor: default; }
.titel-block { display: flex; flex-direction: column; gap: 14px; }
.titel-block.g16 { gap: 16px; }
.h1-konto {
  margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(34px, 5vw, 52px);
  line-height: 1; letter-spacing: -.04em; text-wrap: balance;
}
.nowrap { white-space: nowrap; }
.unter-18 { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink2); }
.text-16 { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.text-15 { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }

.fehler-box {
  padding: 14px 18px; border-radius: 14px; background: var(--bad-s); color: var(--bad);
  font-size: 16px; font-weight: 700; line-height: 1.45;
}

/* a) Vor der Zustimmung */
.wer-box { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--ac-s); }
.wer-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ac); color: var(--on-ac);
  display: flex; align-items: center; justify-content: center;
}
.wer-text { display: flex; flex-direction: column; gap: 6px; }
.wer-text h2 { margin: 0; font-size: 18px; font-weight: 700; }
.wer-text p { margin: 0; font-size: 16px; line-height: 1.5; }
.wer-link { align-self: flex-start; min-height: 32px; display: flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.wer-link:hover { color: var(--ink); }
.rechte { display: flex; flex-direction: column; }
.rechte-h { margin: 0 0 6px; font-family: var(--fd); font-weight: 750; font-size: 24px; letter-spacing: -.02em; }
.rechte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rechte li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.recht-nr {
  width: 40px; height: 40px; border-radius: 12px; background: var(--pt-s); color: var(--pt);
  display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 800; font-size: 16px;
}
.recht-text { display: flex; flex-direction: column; gap: 4px; }
.recht-t { font-size: 18px; font-weight: 700; line-height: 1.3; }
.recht-w { font-size: 16px; line-height: 1.5; color: var(--ink2); }
.recht-w strong { color: var(--ink); }
.recht-c {
  align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--sf2);
  font-family: var(--fm); font-size: 13px; color: var(--ink2);
}
.aktion { display: flex; flex-direction: column; gap: 14px; }
.aktion .knopf { align-self: flex-start; }
.lade-56 { min-height: 56px; font-size: 17px; }
.lade-41 { min-height: 41px; font-size: 16px; }
.lade-41 .spinner { width: 22px; height: 22px; }

/* b) Erfolg + Checkliste */
.erfolg-kreis {
  width: 64px; height: 64px; border-radius: 50%; background: var(--ac); color: var(--on-ac);
  display: flex; align-items: center; justify-content: center; animation: fhPop6 .55s var(--ez) .1s both;
}
.checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check { border-radius: 18px; background: var(--sf); border: 1.5px solid var(--line); }
.check.offen { border-color: var(--pt); }
.check-kopf { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; text-align: left; }
.check-punkt {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 800; font-size: 16px; background: var(--sf2); color: var(--ink);
}
.check.offen .check-punkt { background: var(--pt); color: var(--on-pt); }
.check.erledigt .check-punkt { background: var(--ac); color: var(--on-ac); }
.check-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.check-t { font-size: 17px; font-weight: 700; }
.check-sum { font-size: 15px; color: var(--ink2); overflow-wrap: anywhere; }
.check-inhalt { display: flex; flex-direction: column; gap: 16px; padding: 0 18px 18px 72px; }
.check-inhalt.g12 { gap: 12px; }
@media (max-width: 479.98px) { .check-inhalt { padding-left: 18px; } }
.feld { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
.feld input, .feld select {
  min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); font-size: 17px; font-weight: 500; width: 100%;
}
.feld select { padding: 0 12px; }
.feld input:focus { border-color: var(--pt); }
.datei-feld {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px;
  border-radius: 12px; border: 1.5px dashed var(--ink2); font-size: 16px; font-weight: 700; cursor: pointer;
}
.datei-feld:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.datei-feld input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.datei-name { overflow-wrap: anywhere; }
.gruppe {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; border-radius: 14px;
  cursor: pointer; border: 1.5px solid var(--line); background: transparent;
}
.gruppe:has(input:checked) { border-color: var(--pt); background: var(--pt-s); }
.gruppe input { width: 20px; height: 20px; accent-color: var(--pt); flex: none; margin: 0; }
.gruppe-text { display: flex; flex-direction: column; }
.gruppe-t { font-size: 16px; font-weight: 700; }
.gruppe-d { font-size: 14px; color: var(--ink2); }
.check-weiter { align-self: flex-start; }
.link-inline { font-weight: 700; color: var(--pt); text-decoration: underline; text-underline-offset: 3px; }
.link-inline:hover { color: var(--pt-d); }
.knopf.anim-rein { animation: fhIn10 .4s var(--ez) both; }
.status-box {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px;
  background: var(--sf); border: 1px solid var(--line); animation: fhIn10 .35s var(--ez) both;
}
.status-box .knopf { align-self: flex-start; }

/* c) Admin nötig, d2) privates Konto */
.konto-chip {
  display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 6px 16px 6px 6px;
  border-radius: 999px; background: var(--sf); border: 1px solid var(--line); font-size: 15px;
}
.konto-chip.privat { background: var(--warn-s); border: 0; color: var(--ink); }
.chip-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--pt-s); color: var(--pt);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none;
}
.privat .chip-av { background: var(--sf); color: var(--ink); }
.konto-chip span:last-child { overflow-wrap: anywhere; }
.link-panel {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px;
  background: var(--sf); border: 1px solid var(--line); animation: fhIn10 .35s var(--ez) both;
}
.link-panel input { font-family: var(--fm); font-size: 14px; }
.panel-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-rahmen.knopf-klein { padding: 0 20px; }
.knopf-primaer.knopf-klein { padding: 0 20px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe .knopf-rahmen { padding: 0 24px; }
.link-fett { font-weight: 700; }
.link-44 { align-self: flex-start; min-height: 44px; display: flex; align-items: center; font-size: 16px; font-weight: 700; }
.abbruch-kreis, .start-kreis {
  width: 64px; height: 64px; border-radius: 50%; background: var(--sf2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.info-box {
  padding: 18px 20px; border-radius: 18px; background: var(--sf); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.info-box h2 { margin: 0; font-size: 17px; font-weight: 700; }
.ms-block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ms-block-l { font-size: 15px; font-weight: 700; }

/* ---------- Anmelden ---------- */
.anmelden-haupt { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 6vw, 80px) 20px; }
.anmelden-spalte {
  width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  animation: fhIn10 .4s var(--ez) both;
}
.app-symbol .fl { fill: var(--pt); }
.app-symbol .ring { fill: none; stroke: var(--bg); stroke-width: 9; }
.app-symbol .viertel { fill: var(--ac); }
.h1-anmelden { margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(40px, 7vw, 56px); line-height: .98; letter-spacing: -.04em; }
.anmelden-fuss { width: 100%; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink2); }
.anmelden-fuss a { font-weight: 700; }
.hinweis-warn {
  width: 100%; padding: 14px 18px; border-radius: 14px; background: var(--warn-s); color: var(--ink);
  font-size: 16px; line-height: 1.45;
}