/*
 * verfuegung.css — Gestaltung der Vorlagen «Patientenverfügung»
 * (patientenverfuegung-kurz/-mittel/-ausfuehrlich.html).
 *
 * Bildschirm: ausfüllbares Formular. Druck (A4): Werte bzw. leere Linien zum
 * Schreiben, Kästchen angekreuzt oder leer. Die Druckabbilder (.druckwert)
 * legt verfuegung.js an; ohne JavaScript werden die Felder selbst gedruckt.
 * Kopf- und Fusszeile über @page-Randfelder (Chrome/Edge ab 2024).
 */
:root {
  --ink: #1a2224; --muted: #4a5558; --line: #c3ced1; --brand: #0e6e7e;
  --brand-hell: #eef5f6; --feld: #f3f8f9; --fokus: #c77700;
  --zeile: 7.5mm;            /* Zeilenabstand der Schreiblinien im Druck */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8rem; }
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); line-height: 1.5; font-size: 11pt;
  max-width: 820px; margin: 0 auto; padding: 0 1.5rem 4rem; background: #fff;
}
a { color: var(--brand); }
p { margin: .35rem 0 .55rem; }
ul, ol { margin: .3rem 0 .6rem 1.2rem; padding: 0; }
li { margin: .2rem 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ── Werkzeugleiste (nur Bildschirm) ─────────────────────────────── */
.werkzeug {
  position: sticky; top: 0; z-index: 20; background: #fff;
  border-bottom: 2px solid var(--brand); padding: .7rem 0 .6rem; margin: 0 0 1.4rem;
}
.werkzeug-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.knopf {
  background: var(--brand); color: #fff; border: 2px solid var(--brand); border-radius: 999px;
  padding: .45rem 1.1rem; font: inherit; font-size: 10.5pt; font-weight: 600; cursor: pointer;
}
.knopf:hover { background: #0a5662; border-color: #0a5662; }
.knopf-hell { background: #fff; color: var(--brand); }
.knopf-hell:hover { background: var(--brand-hell); color: #0a5662; }
.knopf-dezent { background: #fff; color: var(--muted); border-color: #aab5b8; font-weight: 500; }
.knopf-dezent:hover { background: #f4f6f6; color: var(--ink); border-color: #8d999c; }
.knopf:focus-visible, a:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.datenschutz {
  margin: .55rem 0 0; font-size: 10pt; background: #fff7e6; border-left: 4px solid #c77700;
  padding: .4rem .7rem; border-radius: 4px;
}
.fassungen { margin: .4rem 0 0; font-size: 9.5pt; color: var(--muted); }
.fassungen a { font-weight: 600; }
.fassungen [aria-current] { color: var(--ink); text-decoration: none; font-weight: 700; }
@media (max-width: 640px) {
  body { padding: 0 1rem 3rem; }
  .werkzeug { position: static; }
  html { scroll-padding-top: 1rem; }
}

.anleitung {
  background: var(--brand-hell); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 8px; padding: .7rem 1.1rem .5rem; margin: 0 0 1.6rem; font-size: 10.5pt;
}
.anleitung h2 { border: 0; margin: .1rem 0 .3rem; padding: 0; font-size: 12pt; }
.anleitung ol { margin-left: 1.3rem; }

/* ── Titel und Gliederung ─────────────────────────────────────────── */
.absender { margin: 0; font-size: 10pt; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
h1 { font-size: 23pt; color: var(--brand); margin: .1rem 0 0; line-height: 1.15; }
.untertitel { font-size: 12.5pt; font-weight: 600; margin: .1rem 0 .2rem; }
.stand { font-size: 9pt; color: var(--muted); margin: 0 0 1rem; }
.titel { border-bottom: 2px solid var(--brand); padding-bottom: .5rem; margin-bottom: .9rem; }
h2 {
  font-size: 13pt; color: var(--brand); margin: 1.5rem 0 .45rem;
  border-bottom: 1px solid var(--line); padding-bottom: .15rem;
  break-after: avoid; page-break-after: avoid;
}
h3 { font-size: 11pt; margin: 1rem 0 .25rem; break-after: avoid; page-break-after: avoid; }
.erkl { font-size: 9.5pt; color: var(--muted); }
.erkl strong { color: var(--ink); }
.einleitung { font-style: italic; }
.abschnitt-start { break-inside: avoid; }

/* ── Eingabefelder ───────────────────────────────────────────────── */
.zeile { display: grid; grid-template-columns: 1fr; gap: .25rem 1rem; margin: .25rem 0 .35rem; }
.zeile.s2 { grid-template-columns: 1fr 1fr; }
.zeile.s21 { grid-template-columns: 2fr 1fr; }
.zeile.s12 { grid-template-columns: 1fr 2fr; }
.zeile.s3 { grid-template-columns: 1fr 1fr 1fr; }
@media screen and (max-width: 560px) {
  .zeile.s2, .zeile.s21, .zeile.s12, .zeile.s3 { grid-template-columns: 1fr; }
}
.feld { min-width: 0; margin: .15rem 0; }
.feld > label, .feld > .bez { display: block; font-size: 9pt; color: var(--muted); margin: 0 0 .1rem; }
.vf input[type="text"], .vf input[type="tel"], .vf textarea {
  width: 100%; font: inherit; font-size: 11pt; color: var(--ink); background: var(--feld);
  border: 0; border-bottom: 1.5px solid #6f7c80; border-radius: 4px 4px 0 0; padding: .35rem .5rem;
}
.vf textarea { display: block; resize: vertical; line-height: 1.5; field-sizing: content; }
.vf textarea.z1 { min-height: calc(1 * 1.5em + .8rem); }
.vf textarea.z2 { min-height: calc(2 * 1.5em + .8rem); }
.vf textarea.z3 { min-height: calc(3 * 1.5em + .8rem); }
.vf textarea.z4 { min-height: calc(4 * 1.5em + .8rem); }
.vf textarea.z5 { min-height: calc(5 * 1.5em + .8rem); }
.vf input.inline { display: inline-block; width: 15em; max-width: 100%; padding: .1rem .4rem; margin: 0 0 0 .2rem; }
.vf input.inline.breit { width: 22em; }
.vf input:focus, .vf textarea:focus { outline: 3px solid var(--fokus); outline-offset: 1px; background: #fff; }

/* Kästchen: Ankreuzfelder und Auswahlfelder sehen gleich aus (Papier) */
.vf input[type="checkbox"], .vf input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem; margin: .18rem 0 0; padding: 0;
  border: 1.6px solid var(--ink); border-radius: 2px; background: #fff;
  display: inline-grid; place-content: center; cursor: pointer;
}
.vf input[type="checkbox"]::before, .vf input[type="radio"]::before {
  content: ""; display: none; width: .34rem; height: .64rem;
  border: solid var(--ink); border-width: 0 .18rem .18rem 0;
  transform: translate(0, -.06rem) rotate(45deg);
}
.vf input[type="checkbox"]:checked::before, .vf input[type="radio"]:checked::before { display: block; }
.vf input[type="checkbox"]:focus-visible, .vf input[type="radio"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.vf input[type="checkbox"]:hover, .vf input[type="radio"]:hover { background: var(--brand-hell); }

/* ── Entscheidblöcke ─────────────────────────────────────────────── */
.entscheid {
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .9rem .45rem;
  margin: .6rem 0 .8rem; min-width: 0; break-inside: avoid; page-break-inside: avoid;
}
.entscheid > legend { float: left; width: 100%; padding: 0; margin: 0 0 .15rem; font-weight: 700; font-size: 11pt; }
.entscheid > legend + * { clear: both; }
.entscheid .erkl { margin: .1rem 0 .35rem; }
.nur-eins { font-size: 8.5pt; color: var(--muted); font-style: italic; font-weight: 400; white-space: nowrap; }
.kosten { margin: .6rem 0 .2rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.option { display: flex; align-items: flex-start; gap: .6rem; margin: .32rem 0; }
.option-text { flex: 1 1 auto; min-width: 0; }
.option-text > label { cursor: pointer; }
.zusatz { margin-top: .5rem; padding-top: .4rem; border-top: 1px dashed var(--line); }

/* ── Situationen und Massnahmen ──────────────────────────────────── */
.situation { break-inside: avoid; page-break-inside: avoid; margin: .8rem 0 1rem; }
.situation h3 { color: var(--brand); margin-bottom: .15rem; }
.sit-beschr { margin: .1rem 0 .4rem; font-size: 10pt; }
table.matrix { width: 100%; border-collapse: collapse; margin: .3rem 0 .5rem; font-size: 10pt; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: .28rem .45rem; vertical-align: middle; }
.matrix thead th { background: var(--brand-hell); color: #0a5662; font-size: 8.5pt; font-weight: 700; text-align: center; line-height: 1.25; }
.matrix thead th:first-child { text-align: left; }
.matrix tbody th { text-align: left; font-weight: 600; }
.matrix tbody th small { display: block; font-weight: 400; font-size: 8.5pt; color: var(--muted); }
.matrix td { text-align: center; width: 12.5%; }
.matrix td input { margin: 0 !important; vertical-align: middle; }
.begriffe { font-size: 9.5pt; }
.begriffe dt { font-weight: 700; margin-top: .3rem; }
.begriffe dd { margin: 0 0 .15rem 0; color: var(--ink); }

/* ── Unterschrift, Linien, Tabellen zum Handschreiben ────────────── */
.unterschrift { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0 1.2rem; margin: 1.2rem 0 .4rem; break-inside: avoid; }
.unterschrift.zwei { grid-template-columns: 1fr 2fr; }
.u-linie { height: 2.4rem; border-bottom: 1.2px solid var(--ink); }
.u-bez { font-size: 9pt; color: var(--muted); margin-top: .15rem; }
.handschrift-hinweis { font-size: 9pt; color: var(--muted); font-style: italic; }
.linie-feld .u-linie { height: 2rem; }
table.pruefung { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: 10pt; break-inside: avoid; }
.pruefung th, .pruefung td { border: 1px solid #9aa6a9; padding: .2rem .45rem; text-align: left; }
.pruefung th { background: var(--brand-hell); font-size: 9pt; }
.pruefung td { height: 2.6rem; }
.pruefung .sp-datum { width: 24%; }
.pruefung .sp-unterschrift { width: 34%; }
.unterschrift-block { break-inside: avoid; page-break-inside: avoid; }
.kasten {
  display: inline-block; width: 1.05rem; height: 1.05rem; border: 1.6px solid var(--ink);
  border-radius: 2px; vertical-align: -.2rem; margin-right: .35rem;
}
.begriffe-kasten {
  background: #f7f9f9; border: 1px solid var(--line); border-radius: 8px;
  padding: .3rem .9rem .5rem; margin: .5rem 0 .8rem; break-inside: avoid; page-break-inside: avoid;
}
.begriffe-kasten h3 { margin-top: .3rem; }

/* ── Kästen im Anhang ────────────────────────────────────────────── */
.anhang h2 { margin-top: 1rem; }
.hinweise { font-size: 10pt; }
.hinweise h3 { font-size: 10.5pt; margin: .7rem 0 .15rem; color: var(--brand); }
.hinweise p { margin: .15rem 0 .35rem; }
.kontakt {
  background: var(--brand-hell); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 8px; padding: .6rem 1rem .4rem; margin: 1rem 0 .6rem; font-size: 10pt; break-inside: avoid;
}
.kontakt h2 { border: 0; margin: 0 0 .2rem; padding: 0; font-size: 12pt; }
.kontakt address { font-style: normal; font-weight: 600; margin: .3rem 0; }
.stand-vermerk { font-size: 8.5pt; color: var(--muted); border-top: 1px solid var(--line); padding-top: .4rem; margin-top: .8rem; break-inside: avoid; }
.stand-vermerk strong { color: var(--ink); }

/* ── Hinweiskarte (Kreditkartenformat 85,6 × 54 mm, zum Falten) ──── */
.karte-bereich { break-inside: avoid; page-break-inside: avoid; margin: 1.2rem 0 .5rem; }
.karte-bereich h2 { margin-top: .4rem; }
.schnitt { font-size: 9pt; color: var(--muted); margin: .2rem 0 .3rem; }
.karte {
  display: flex; flex-wrap: wrap; width: 171.2mm; max-width: 100%;
  border: 1px dashed #333; background: #fff; font-size: 7.6pt; line-height: 1.3;
}
.karte-seite { width: 85.6mm; max-width: 100%; height: 54mm; padding: 3mm 3.6mm 2.6mm; display: flex; flex-direction: column; overflow: hidden; }
.karte-seite + .karte-seite { border-left: 1px dotted #666; }
.karte-titel { font-weight: 800; color: var(--brand); font-size: 10pt; letter-spacing: .04em; margin: 0; }
.karte-titel-klein { font-size: 7.6pt; margin-bottom: .6mm; }
.karte-satz { font-weight: 600; margin: .4mm 0 .6mm; }
.k-zeile { display: flex; align-items: flex-end; gap: 1.4mm; margin-top: 1.5mm; min-width: 0; }
.k-bez { flex: 0 0 auto; color: var(--muted); font-size: 6.6pt; }
.kartenwert {
  flex: 1 1 0; min-width: 0; min-height: 4.4mm; border-bottom: .25mm solid #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 7.6pt; padding: 0 .5mm;
}
.kartenwert.kurz { flex: 0 0 24mm; }
.karte-fuss { margin-top: auto; font-size: 6pt; color: var(--muted); }

/* ── Druckabbilder (verfuegung.js) ───────────────────────────────── */
.druckwert { display: none; }

/* ── Druck ───────────────────────────────────────────────────────── */
/* Benannte Seiten: «verfuegung» (Kopfzeile mit Namen, Seitenzahl) und
   «anhang» (Hinweise, Kontakt, Hinweiskarte). verfuegung.js setzt vor dem
   Druck den Namen in @page verfuegung ein. */
@page {
  size: A4; margin: 16mm 16mm 15mm 17mm;
  @bottom-left { content: "Vorlage Patientenstelle Ostschweiz · Stand Oktober 2026"; font-family: "Segoe UI", Arial, sans-serif; font-size: 7.5pt; color: #555; vertical-align: top; padding-top: 3mm; }
}
@page verfuegung {
  @top-left { content: "Patientenverfügung von: ______________________________"; font-family: "Segoe UI", Arial, sans-serif; font-size: 8.5pt; color: #222; vertical-align: bottom; padding-bottom: 3mm; }
  @top-right { content: "geboren am: ________________"; font-family: "Segoe UI", Arial, sans-serif; font-size: 8.5pt; color: #222; vertical-align: bottom; padding-bottom: 3mm; }
  @bottom-right { content: "Seite " counter(page); font-family: "Segoe UI", Arial, sans-serif; font-size: 8.5pt; color: #222; vertical-align: top; padding-top: 3mm; }
}
@page anhang {
  @top-left { content: "Hinweise zur Patientenverfügung · gehören nicht zur Verfügung"; font-family: "Segoe UI", Arial, sans-serif; font-size: 8.5pt; color: #555; vertical-align: bottom; padding-bottom: 3mm; }
  @bottom-right { content: "Anhang"; font-family: "Segoe UI", Arial, sans-serif; font-size: 8.5pt; color: #555; vertical-align: top; padding-top: 3mm; }
}

.kopfgruppe, .feld, .begriff { break-inside: avoid; page-break-inside: avoid; }

@media print {
  :root { --zeile: 7mm; }
  html { scroll-padding-top: 0; }
  body { max-width: none; padding: 0; font-size: 10pt; line-height: 1.35; }
  .werkzeug, .anleitung, .nur-bildschirm { display: none !important; }
  a { color: var(--ink); text-decoration: none; }
  .verfuegung-teil { page: verfuegung; }
  .anhang { break-before: page; page-break-before: always; page: anhang; }
  .seitenumbruch { break-before: page; page-break-before: always; }

  h1 { font-size: 20pt; }
  .untertitel { font-size: 11.5pt; }
  .titel { margin-bottom: 2mm; padding-bottom: 1.5mm; }
  .stand { margin-bottom: 1mm; }
  h2 { font-size: 12pt; margin: 4.5mm 0 1.5mm; }
  h3 { font-size: 10.5pt; margin: 3mm 0 1mm; }
  p { margin: 1mm 0 1.6mm; }
  .erkl { font-size: 9pt; }

  .entscheid { padding: 1.8mm 3.2mm 1.2mm; margin: 1.6mm 0 2.4mm; }
  .entscheid > legend { font-size: 10pt; margin-bottom: .6mm; }
  .entscheid .erkl { margin: 0 0 1mm; }
  .option { margin: .7mm 0; gap: 2.2mm; }
  .zusatz { margin-top: 1.2mm; padding-top: 1mm; }
  .vf input[type="checkbox"], .vf input[type="radio"] { width: 3.6mm; height: 3.6mm; border-width: .3mm; margin-top: .4mm; }
  .vf input[type="checkbox"]::before, .vf input[type="radio"]::before { width: 1.2mm; height: 2.2mm; border-width: 0 .55mm .55mm 0; }
  .vf-leer .vf input[type="checkbox"]:checked::before, .vf-leer .vf input[type="radio"]:checked::before { display: none; }

  /* Ohne JavaScript: Felder selbst als Schreiblinien */
  .vf input[type="text"], .vf input[type="tel"], .vf textarea {
    background: transparent; border-radius: 0; border-bottom: .3mm solid #333; padding: 0 .5mm;
  }
  /* Mit JavaScript: Feld aus, Druckabbild ein */
  .vf-js .vf input[type="text"], .vf-js .vf input[type="tel"], .vf-js .vf textarea { display: none; }
  .druckwert {
    min-height: 7mm; border-bottom: .3mm solid #333; padding: 0 1mm .7mm;
    align-items: flex-end; white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .vf-js .druckwert { display: flex; }
  .vf-js .druckwert-mehrzeilig {
    display: block; border-bottom: 0; padding: 0 1mm 1.2mm;
    line-height: var(--zeile); min-height: calc(2 * var(--zeile) + 1.2mm);
    background-image: linear-gradient(to bottom, transparent calc(var(--zeile) - .3mm), #555 calc(var(--zeile) - .3mm));
    background-size: 100% var(--zeile); background-position: 0 -1.2mm; background-repeat: repeat;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .vf-js .druckwert-mehrzeilig.z1 { min-height: calc(1 * var(--zeile) + 1.2mm); }
  .vf-js .druckwert-mehrzeilig.z2 { min-height: calc(2 * var(--zeile) + 1.2mm); }
  .vf-js .druckwert-mehrzeilig.z3 { min-height: calc(3 * var(--zeile) + 1.2mm); }
  .vf-js .druckwert-mehrzeilig.z4 { min-height: calc(4 * var(--zeile) + 1.2mm); }
  .vf-js .druckwert-mehrzeilig.z5 { min-height: calc(5 * var(--zeile) + 1.2mm); }
  .vf-js .druckwert-inline { display: inline-block; min-height: 0; height: 5.2mm; min-width: 48mm; max-width: 100%; vertical-align: bottom; padding: 0 1mm; white-space: nowrap; overflow: hidden; }
  .vf-js .druckwert-inline.breit { min-width: 75mm; }
  .vf-leer .dw-text { display: none; }
  .vf-leer .kartenwert { color: transparent !important; }

  .feld { margin: .6mm 0; }
  .feld > label, .feld > .bez { font-size: 8pt; margin-bottom: 0; }
  .zeile { gap: .6mm 6mm; margin: .6mm 0 1.4mm; }

  .situation { margin: 2mm 0 3mm; }
  .sit-beschr { font-size: 9.5pt; margin: 0 0 1.2mm; }
  table.matrix { font-size: 9.5pt; margin: 1mm 0 1.6mm; }
  .matrix th, .matrix td { padding: .7mm 2mm; }
  .matrix thead th { font-size: 8pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .matrix tbody th small { font-size: 7.5pt; display: inline; margin-left: 1.5mm; }
  .begriffe-kasten { padding: 1mm 3.5mm 1.5mm; margin: 1.5mm 0 2.5mm; }
  .begriffe { columns: 2; column-gap: 6mm; font-size: 8.5pt; margin: 0; }
  .begriffe dt { margin-top: 1mm; }

  .unterschrift { margin: 3mm 0 1mm; }
  .u-linie { height: 11mm; }
  .linie-feld .u-linie { height: 8.5mm; }
  .pruefung td { height: 10mm; }
  .kontakt, .anleitung { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hinweise { font-size: 9pt; }
  .hinweise h3 { margin: 2.2mm 0 .6mm; font-size: 9.5pt; }
  .hinweise p { margin: .5mm 0 1.2mm; }
  .kontakt { font-size: 9pt; padding: 2mm 4mm 1.5mm; }
  .karte { width: 171.2mm; max-width: none; flex-wrap: nowrap; }
  .karte-seite { width: 85.6mm; max-width: none; }
}
@media print {
  .optionen.zweispaltig { columns: 2; column-gap: 6mm; }
  .optionen.zweispaltig .option { break-inside: avoid; margin-top: 0; }
}