/* Mobile-first: Basis-Regeln gelten fuer Smartphones, Erweiterungen ab min-width */

:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #1b1b1b;
  --color-label: #6b6b6b;
  --color-primary: #1f4e5f;
  --color-primary-contrast: #ffffff;
  --color-border: #d8d8d8;
  --color-error-bg: #fdecea;
  --color-error-text: #7a1f1f;
  --color-success-bg: #e8f5e9;
  --color-success-text: #1b5e20;
  --color-warning: #b5620a;
  --spacing: 0.85rem;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(20, 20, 20, 0.06), 0 2px 8px rgba(20, 20, 20, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f2f4f5;
  color: var(--color-text);
  line-height: 1.45;
  font-size: 15px;
}

h1, h2, h3 {
  margin: 0 0 0.6rem;
  line-height: 1.25;
}

h1 { font-size: 1.3rem; }
h2 { font-size: 1.02rem; }
h3 { font-size: 0.92rem; color: var(--color-label); text-transform: uppercase; letter-spacing: 0.03em; }

/* Grundschrift fuer alle Formularelemente vereinheitlichen - ohne das wird ein
   <select> in manchen Browsern kleiner gerendert als ein <input> daneben. */
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
}

/* Abschnitts-Karte: gibt jedem Block einen sichtbaren Rand statt dass alles
   ohne Trennung ineinanderlaeuft. */
.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

/* <details class="card"> als aufklappbare Karte (z.B. "+ Neue Person anlegen") */
.card > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}

.card[open] > summary {
  margin-bottom: 0.75rem;
}

.nav {
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: var(--spacing);
  padding: 0.6rem var(--spacing);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow);
}

.nav-brand {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  margin-right: auto;
}

.nav-logo {
  height: 28px;
  width: auto;
  margin-right: 0.5rem;
}

.nav-link {
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-logout button {
  background: transparent;
  border: 1px solid var(--color-primary-contrast);
  color: inherit;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
}

.nav-user {
  font-size: 0.9rem;
}

/* Burger-Icon: drei Balken als Flex-Column innerhalb des Buttons. */
.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: 30px;
  height: 30px;
  padding: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  height: 2px;
  background: var(--color-primary-contrast);
  border-radius: 2px;
}

/* Modales Dropdown-Panel statt volle Breite: absolut positioniert relativ
   zur Nav-Leiste (siehe position:relative auf .nav), rechtsbuendig unter dem
   Burger-Icon, feste Maximalbreite - liegt als eigene Ebene (z-index) ueber
   dem Seiteninhalt statt ihn nach unten zu verdraengen. */
.nav-menu {
  position: absolute;
  top: 100%;
  right: var(--spacing);
  margin-top: 0.5rem;
  width: min(300px, calc(100vw - 2 * var(--spacing)));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.nav-menu[hidden] {
  display: none;
}

/* Abgedunkelter Hintergrund hinter dem Menue - eigene Ebene ueber dem
   restlichen Seiteninhalt, schliesst das Menue per Klick (siehe app.js). */
.nav-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.nav-menu-backdrop[hidden] {
  display: none;
}

.nav-menu-link {
  display: block;
  width: 100%;
  padding: 0.85rem var(--spacing);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
}

.nav-menu form:last-child .nav-menu-link,
.nav-menu-link:last-child {
  border-bottom: none;
}

.page {
  padding: var(--spacing);
  max-width: 640px;
  margin: 0 auto;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Schmale Formulare (Login) sollen nicht auf volle Kartenbreite stretchen -
   Grunddaten/Adresse & Berichte hingegen brauchen die Breite (2-Spalten-Raster,
   Rich-Text-Editor). */
.card-narrow {
  max-width: 420px;
}

/* Labels deutlich kleiner/zurueckhaltender als der eigentliche Wert, damit
   das Auge zuerst auf die Daten faellt, nicht auf die Beschriftung. */
.form label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-label);
  margin-top: 0.5rem;
}

.form input,
.form select,
.form textarea {
  padding: 0.55rem 0.6rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 100%;
}

.form button,
.nav-logout button {
  cursor: pointer;
}

.form button[type="submit"] {
  /* .form ist eine Flex-Column ohne align-items, d.h. Kinder werden per
     Default (stretch) auf volle Breite gezogen - der Button soll aber nur
     so breit wie sein Inhalt sein, wie z.B. "Hinzufuegen". */
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

/* Mehrere Submit-Buttons nebeneinander (z.B. "Speichern" / "Speichern und
   Einreichen") statt der .form-Default-Stapelung. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.form-actions button[type="submit"] {
  margin-top: 0;
}

.btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* Hoehere Spezifitaet als ".form button[type=submit]" noetig, sonst gewinnt
   dessen teal Fuellfarbe (gleiches Problem hat bereits .btn-secondary). */
.form button[type="submit"].btn-danger {
  background: #fff;
  color: var(--color-error-text);
  border: 1px solid var(--color-error-text);
}

/* Ungespeicherte Aenderungen (unsaved-changes.js): Speichern-Button faerbt
   um UND bekommt ein Symbol davor - nicht nur Farbe, auch fuer
   Farbfehlsichtige erkennbar. */
.form-dirty button[type="submit"] {
  background: var(--color-warning);
}

.form-dirty button[type="submit"]::before {
  content: "● ";
}

.flash {
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: var(--spacing);
}

.flash-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.flash-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Budget-Auslastung eines Klientenberichts: gruen/orange/rot je nach Prozent
   (80%/100%-Schwellen wie im Perfex-Original). */
.budget-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.budget-badge-ok {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.budget-badge-warning {
  background: #fff3e0;
  color: var(--color-warning);
}

.budget-badge-danger {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.75rem;
}

.search-form input[type="search"] {
  flex: 1 1 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.search-form button {
  padding: 0.55rem 1rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-clear {
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.search-clear:hover {
  text-decoration: underline;
}

.limit-select {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: auto;
}

.limit-select select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.list-hint {
  color: #555;
  font-size: 0.9rem;
  font-style: italic;
}

/* Seiten vor/zurueck unterhalb einer Liste - zwei feste Slots (links/rechts),
   damit "Zurueck" und "Weiter" immer an derselben Seite bleiben, auch wenn
   nur einer der beiden Links vorhanden ist. */
.list-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.list-pagination a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.list-pagination a:hover {
  text-decoration: underline;
}

.back-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.empty-state {
  color: #555;
}

/* Tabelle scrollt horizontal innerhalb ihres eigenen Containers, statt die
   Seite aufzubrechen - so bleiben die 6 Spalten auch auf schmalen Handys
   nutzbar (Wischen statt Layout-Bruch). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1rem;
  padding: 0 1rem;
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 0.9rem;
}

.contact-table th,
.contact-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.contact-table thead th {
  background: #f5f5f5;
  font-weight: 600;
}

.contact-table tbody tr:hover {
  background: #fafafa;
}

/* Ganze Zeile klickbar (contacts-list.js) statt einzelnem Link mit
   abweichender a:visited-Farbe - Cursor + Fokusring als Hinweis. */
.row-link {
  cursor: pointer;
}

.row-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.sort-link:hover {
  text-decoration: underline;
}

.sort-active {
  color: var(--color-primary);
}

.sort-arrow {
  font-size: 0.75em;
}

/* Verwaltungsseite (Stammdaten: Leistungsarten/Anwender-Gruppen/Attribut-Typen/
   Dokumenttypen) - kompakte Inline-Formulare je Tabellenzeile (Umbenennen) sowie
   ein Zeilen-Formular fuer "Neu anlegen" unterhalb jeder Tabelle. */
.settings-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.settings-inline-form input[type="text"],
.settings-inline-form select {
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.settings-inline-form input[type="text"] {
  width: 10rem;
}

.settings-inline-form button[type="submit"] {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.settings-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

.settings-create-form select,
.settings-create-form input[type="text"] {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.settings-create-form button {
  padding: 0.6rem 1rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Kontakt-Detailseite */

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.7rem 1rem;
  margin-bottom: 0.75rem;
}

.detail-header h1 {
  margin: 0;
}

/* Verwendung (Kontakttyp) hinter dem Namen, z.B. "Malika Assaid (Eltern)" - dezenter
   als der Name selbst, damit das Auge zuerst auf den Namen faellt. */
.detail-header-type {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--color-label);
}

.inline-form {
  display: inline;
}

.btn-danger-link {
  background: none;
  border: none;
  color: var(--color-error-text);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  font-size: 0.95rem;
}

/* Loeschen-Icon vor statt hinter dem Eintrag (Details/Kontaktmoeglichkeiten) -
   feste Groesse/Position, damit alle Zeilen sauber untereinander stehen statt
   je nach Textlaenge unterschiedlich weit rechts zu enden. */
.btn-icon-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--color-error-text);
  opacity: 0.6;
}

.btn-icon-delete:hover {
  opacity: 1;
}

/* Auf/Ab-Buttons zum Umsortieren der Details/Kontaktmoeglichkeiten. */
.attribute-move-buttons {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
}

.btn-icon-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 0.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-label);
  opacity: 0.6;
}

.btn-icon-move:hover {
  opacity: 1;
}

.btn-icon-move:disabled {
  opacity: 0.2;
  cursor: default;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.25rem;
  overflow-x: auto;
}

.tab-link {
  padding: 0.5rem 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}

.tab-link.tab-active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}

/* Ohne JS sind alle drei Bereiche sichtbar (nutzbar); mit JS blendet
   contact-detail.js per [hidden] aus - progressive enhancement. */
.tab-section {
  margin-bottom: 0.75rem;
}

/* Feldraster: fuer Formulare (.form .field) und Lese-Ansichten
   (.field-label/.field-value) gleichermassen - ab 1024px zweispaltig, siehe
   Media Query unten. */
.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
}

.form .field-grid {
  gap: 0.35rem 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-label);
}

.field-value {
  font-size: 1rem;
}

/* Telefonnummer eines Begleiters, direkt unter Name/Auswahl als klickbarer
   tel:-Link (fuer den schnellen Anruf vom Handy aus) - bewusst auffaellig
   (groesser, fett), da das Anrufen des Begleiters eine zentrale, haeufig
   genutzte Funktion ist. */
.field-phone-row {
  margin: 0.3rem 0 0;
}

.field-phone-label {
  font-size: 0.85rem;
  color: var(--color-label);
}

.field-phone {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.field-phone:hover {
  text-decoration: underline;
}

.field-full {
  grid-column: 1 / -1;
}

/* Innerhalb eines .field uebernimmt bereits das flex-gap den Abstand -
   das globale label-margin-top waere hier zusaetzlich und unerwuenscht. */
.field-grid .field label {
  margin-top: 0;
}

/* Zweites Textfeld innerhalb derselben .field-Zelle (Passwort + Wiederholung
   uebereinander in einer Grid-Spalte statt verteilt auf zwei Zellen). */
.field-grid .field label.field-sublabel {
  margin-top: 0.35rem;
}

/* Ueberschrift einer Checkbox-Gruppe (Status, Mobilitaet, Zugriff auf
   Anwender-Gruppe, Rechtegruppe): eigene Akzentfarbe statt des neutralen
   Label-Grautons, damit sie sich von normalen Feldbeschriftungen abhebt -
   und eine Zeile Abstand nach oben zur Abgrenzung vom Feld/der Gruppe
   darueber, wie im Altsystem. */
.field-group-label {
  color: var(--color-primary);
  margin-top: 1.4rem;
}

/* Checkbox-Gruppen (Mobilitaet, Anwender-Gruppe, Rechtegruppe): Optionen
   untereinander mit knappem Abstand, Kaestchen + Text linksbuendig. Der
   Block selbst ist ein normales .field und reiht sich damit ins 2-spaltige
   Feldraster ein statt die volle Breite zu belegen.
   2-Spalten-Grid (Kaestchen | Text) statt verschachteltem Flexbox: bei
   Flexbox-in-Flexbox fuehrte die "shrink-to-fit"-Breitenberechnung von
   Labels mit umbrechendem Text (z.B. "Team Huerth/Bruehl/Wesseling") dazu,
   dass Kaestchen+Text je nach Textlaenge auf unterschiedlichen
   X-Positionen landeten. Das Grid gibt jeder Spalte eine feste Breite,
   dadurch bleiben alle Kaestchen exakt untereinander. */
.checkbox-list {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.2rem 0.4rem;
}

/* .checkbox-item selbst nimmt an keinem eigenen Layout teil (display:contents) -
   Kaestchen und Text werden direkte Grid-Kinder von .checkbox-list und landen
   dadurch sauber in ihrer jeweiligen Spalte. */
.checkbox-item {
  display: contents;
}

.checkbox-item input[type="checkbox"] {
  margin-top: 0.2rem;
}

.checkbox-item span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-label);
}

.attribute-list,
.relationship-list,
.document-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attribute-list-item,
.relationship-item,
.document-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}

.attribute-list-item:last-child,
.relationship-item:last-child,
.document-list-item:last-child {
  border-bottom: none;
}

.attribute-type {
  color: var(--color-label);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Links in Kontakt Moeglichkeiten (tel:/mailto:/https:) und Beziehungen -
   sonst faellt der Browser auf blau+unterstrichen zurueck. */
.attribute-list-item a,
.relationship-item a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.attribute-list-item a:hover,
.relationship-item a:hover {
  text-decoration: underline;
}

.notizen-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.report-item {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.4rem 0.65rem;
  margin-bottom: 0.4rem;
}

.report-item:last-child {
  margin-bottom: 0;
}

.report-item summary {
  cursor: pointer;
  font-weight: 600;
}

.rich-text {
  margin-top: 0.5rem;
}

.rich-text p:first-child {
  margin-top: 0;
}

.document-type {
  color: #555;
  font-size: 0.85rem;
}

.document-note {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: #555;
}

.attribute-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

.attribute-create-form select,
.attribute-create-form input[type="text"] {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.attribute-create-form button {
  padding: 0.6rem 1rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.relationship-create-form {
  max-width: 480px;
  margin-top: 0.5rem;
}

.search-results {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.search-results li {
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.search-results li:last-child {
  border-bottom: none;
}

.search-results li:hover,
.search-results li:focus {
  background: #f0f4f5;
}

.selected-target {
  font-size: 0.9rem;
  color: var(--color-primary);
  min-height: 1.2em;
}

.rich-text-editor {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem;
  background: #f5f5f5;
  border-bottom: 1px solid var(--color-border);
}

.rte-toolbar button {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.rte-editable {
  min-height: 140px;
  padding: 0.75rem;
  outline: none;
}

.rte-editable p:first-child {
  margin-top: 0;
}

.signature-preview {
  width: 200px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.signature-hint {
  font-size: 0.85rem;
  color: var(--color-label);
  margin: 0 0 0.35rem;
}

/* Signatur-Pad (Lehrer*in unterschreibt direkt auf dem Handy-Display):
   feste Canvas-Aufloesung (width/height-Attribute), die Anzeigegroesse
   skaliert responsiv per CSS - siehe pos()-Umrechnung im zugehoerigen JS.
   touch-action:none verhindert Scrollen/Zoomen der Seite waehrend des
   Unterschreibens. */
.signature-pad {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 180px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  touch-action: none;
  margin-bottom: 0.5rem;
}

#signature-clear {
  display: block;
  width: 100%;
  max-width: 500px;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 1rem;
  font-weight: normal;
}

@media (min-width: 640px) {
  .page {
    padding: 2rem;
    max-width: 1100px;
  }

  .notizen-columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grunddaten und Adresse: ab 1024px zweispaltig statt gestapelt. */
@media (min-width: 1024px) {
  .field-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 2.5rem;
  }
}