/* koslo Patientenportal: lesbar ab 360 px, Bedienelemente mindestens 44 px, keine externen Ressourcen. */
:root {
  color-scheme: light;
  --c-page: #f3f4f8;
  --c-bg: #ffffff;
  --c-text: #0c0c38;
  --c-mute: rgba(12, 12, 56, 0.66);
  --c-line: rgba(12, 12, 56, 0.14);
  --c-line-strong: rgba(12, 12, 56, 0.32);
  --c-accent: #2d6cc0;
  --c-accent-press: #22579f;
  --c-accent-soft: rgba(79, 143, 224, 0.14);
  --c-danger: #b42a42;
  --c-danger-soft: rgba(200, 50, 75, 0.1);
  --c-ok: #1d7048;
  --c-ok-soft: rgba(29, 112, 72, 0.1);
  --radius: 12px;
  --radius-klein: 8px;
  --control: 44px;
  --abstand: 16px;
  /* Markierung neben Text (wie koslo DESIGN.md §5): Zeilenhöhe des Textes und Größe der Markierung */
  --zeile: 26px;
  --mark-size: 20px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

.seite {
  max-width: 46rem;
  margin: 0 auto;
  padding: max(var(--abstand), env(safe-area-inset-top)) max(var(--abstand), env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom)) max(var(--abstand), env(safe-area-inset-left));
}

/* ---------- Kopf ---------- */

.kopf {
  margin: 8px 0 20px;
}

.kopf__praxis {
  margin: 0 0 4px;
  color: var(--c-mute);
  font-size: 0.9375rem;
  font-weight: 600;
}

.kopf__titel {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
}

.kopf__text {
  margin: 8px 0 0;
  color: var(--c-mute);
}

.laden {
  color: var(--c-mute);
}

/* ---------- Karten und Text ---------- */

.karte {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 20px var(--abstand);
  margin: 0 0 20px;
}

.karte__titel {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
}

.karte p {
  margin: 0 0 12px;
}

.dokument__text {
  margin-bottom: 8px;
}

.dokument__zwischen {
  margin: 20px 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.dokument__liste {
  margin: 0 0 12px;
  padding-left: 1.4em;
}

.dokument__liste li {
  margin: 0 0 4px;
}

.dokument__felder {
  border-top: 1px solid var(--c-line);
  margin-top: 16px;
  padding-top: 16px;
}

.hinweis {
  color: var(--c-mute);
  font-size: 0.9375rem;
  margin: 0 0 12px;
}

.fuss {
  color: var(--c-mute);
  font-size: 0.9375rem;
  margin-top: 8px;
}

/* ---------- Felder ---------- */

.feld {
  margin: 0 0 16px;
}

.feld__label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 1rem;
}

.feld__fehler {
  margin: 0 0 12px;
  color: var(--c-danger);
  font-weight: 600;
}

.feld__fehler--am-feld {
  margin: 6px 0 0;
  font-size: 0.9375rem;
}

.eingabe {
  display: block;
  width: 100%;
  min-height: var(--control);
  padding: 10px 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-klein);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-size: 1.0625rem; /* ab 16 px zoomt iOS beim Fokus nicht */
}

textarea.eingabe {
  resize: vertical;
  min-height: 96px;
}

select.eingabe {
  appearance: auto;
}

.eingabe:focus-visible,
.knopf:focus-visible,
.haken__box:focus-visible,
.rolle__radio:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

.eingabe[aria-invalid="true"] {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.datum {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
  min-width: 0;
}

.datum > legend,
.rollen > legend {
  padding: 0;
}

.datum__teile {
  display: flex;
  gap: 12px;
}

.datum__teil {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9375rem;
  color: var(--c-mute);
}

.datum__eingabe {
  width: 4.5rem;
  text-align: center;
}

.datum__teil--jahr .datum__eingabe {
  width: 6.5rem;
}

/* Markierung neben Fließtext: Box so hoch wie die Zeile, Markierung 20 px darin mittig, Zeile 44 px über Polster. */
.mark-line {
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
  line-height: var(--zeile);
  padding-block: calc((var(--control) - var(--zeile)) / 2);
  cursor: pointer;
}

.mark-line input[type="checkbox"],
.mark-line input[type="radio"] {
  flex: none;
  box-sizing: border-box;
  width: var(--mark-size);
  height: var(--mark-size);
  margin-block: calc((var(--zeile) - var(--mark-size)) / 2);
  margin-inline: 0;
  accent-color: var(--c-accent);
}

.haken__box[aria-invalid="true"],
.rolle__radio[aria-invalid="true"] {
  outline: 2px solid var(--c-danger);
  outline-offset: 2px;
}

.haken--pflicht {
  font-weight: 600;
}

.rollen {
  border: 0;
  margin: 0 0 8px;
  padding: 0;
  min-width: 0;
}

.wahl {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.wahl > legend {
  padding: 0;
}

/* Honigtopf: für Menschen unsichtbar, nicht per Tab erreichbar (tabindex -1), für Bots ein normales Feld. */
.honig {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__felder {
  border-top: 1px solid var(--c-line);
  margin-top: 16px;
  padding-top: 16px;
}

.formular__felder .feld:last-child {
  margin-bottom: 0;
}

/* ---------- Unterschrift ---------- */

.unterschrift {
  border-top: 1px solid var(--c-line);
  margin-top: 16px;
  padding-top: 16px;
}

.unterschrift__titel {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
}

.pad {
  position: relative;
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--radius-klein);
  background: var(--c-bg);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.pad::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  border-bottom: 1px solid var(--c-line-strong);
  pointer-events: none;
}

.pad__flaeche {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  touch-action: none;
  cursor: crosshair;
}

.pad__hinweis {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  text-align: center;
  color: var(--c-mute);
  pointer-events: none;
}

.pad--tinte .pad__hinweis {
  display: none;
}

.pad--fehler {
  border-color: var(--c-danger);
}

.pad__voll {
  margin: 8px 0 0;
  color: var(--c-danger);
  font-weight: 600;
}

.pad__leiste {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 4px;
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control);
  min-width: var(--control);
  padding: 10px 20px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-klein);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knopf--primaer {
  min-height: 52px;
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #ffffff;
}

.knopf--primaer:active {
  background: var(--c-accent-press);
}

.knopf--breit {
  width: 100%;
}

.knopf--zweit:active {
  background: var(--c-accent-soft);
}

.knopf:disabled {
  opacity: 0.6;
  cursor: progress;
}

.abschluss {
  margin: 4px 0 8px;
}

/* ---------- Meldungen ---------- */

.meldung {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-klein);
  font-weight: 600;
}

.meldung--fehler {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  border: 1px solid rgba(180, 42, 66, 0.3);
}

.fertig {
  background: var(--c-ok-soft);
  border-color: rgba(29, 112, 72, 0.3);
}

.fertig .karte__titel {
  margin: 0;
  color: var(--c-ok);
}

.fertig .karte__titel:focus {
  outline: none;
}

@media (min-width: 600px) {
  .kopf__titel {
    font-size: 1.75rem;
  }

  .karte {
    padding: 24px 28px;
  }
}