/* ==========================================================================
   Villa Admin: der Reiter Urlaubsmeldung
   --------------------------------------------------------------------------
   Angelegt 10.09.2026, am 11.09.2026 auf Dirks Ansage umgebaut.

   Vorbild ist das Meldungsformular der Praxis Ragnitz: links die Eingabe
   in nummerierten Bloecken, rechts die Vorschau, die beim Scrollen stehen
   bleibt, unten der Verlauf. Dirks Begruendung: uebersichtlicher.

   Uebernommen ist der AUFBAU, nicht die Farbe. Ragnitz ist gruen und
   creme, die Villa ist burgund und gold.

   Dunkelmodus ist mitgebaut, das Panel schaltet ueber
   html[data-theme="dark"], siehe assets/js/dark-mode.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zwei Spalten. Unter 880 Pixeln untereinander, sonst nebeneinander mit
   der Vorschau rechts. Genau wie beim Doktor.
   -------------------------------------------------------------------------- */
.um-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 28px);
  align-items: start;
}

@media (min-width: 880px) {
  .um-layout {
    /* minmax(0, ...) statt 1fr: sonst sprengt ein breites Bild die Spalte. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .um-vorschau-spalte {
    position: sticky;
    top: clamp(18px, 3.5vw, 44px);
  }
}

.um-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Ein nummerierter Block
   -------------------------------------------------------------------------- */
.um-field {
  margin: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-papier, #FBF7EE);
}

.um-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 0 12px;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vr-burgund, #6E1A24);
}

.um-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

.um-note {
  margin: 8px 0 0;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
  line-height: 1.45;
}

.um-heute {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: var(--vr-radius-full, 9999px);
  background: var(--vr-creme-tief, #EFE6D2);
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

/* --------------------------------------------------------------------------
   Felder
   -------------------------------------------------------------------------- */
.um-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.um-feld { margin-top: 12px; }
.um-feld:first-child { margin-top: 0; }

.um-feld label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--vr-text-xs, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vr-text-muted, #6B5E50);
}

.um-feld input[type="text"],
.um-feld input[type="date"],
.um-feld textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--vr-linie, #C9B998);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-papier, #FBF7EE);
  color: var(--vr-text-dunkel, #1A1410);
  /* 16px, sonst zoomt iOS beim Antippen in das Feld hinein. */
  font-size: 16px;
  font-family: var(--vr-font-body, Georgia, serif);
  line-height: 1.45;
}

.um-feld textarea { resize: vertical; }

.um-feld input:focus-visible,
.um-feld textarea:focus-visible {
  outline: 2px solid var(--vr-gold, #B8924A);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Anlass-Kacheln
   -------------------------------------------------------------------------- */
.um-anlass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}

.um-anlass {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px;
  border: 1.5px solid var(--vr-linie, #C9B998);
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-papier, #FBF7EE);
  color: var(--vr-text-dunkel, #1A1410);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.um-anlass:hover:not(:disabled) {
  border-color: var(--vr-burgund, #6E1A24);
  transform: translateY(-2px);
}

.um-anlass.is-selected {
  background: var(--vr-burgund, #6E1A24);
  border-color: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
}

.um-anlass:focus-visible {
  outline: 3px solid var(--vr-gold, #B8924A);
  outline-offset: 2px;
}

.um-anlass:disabled { cursor: default; opacity: 0.65; }
.um-anlass-ico svg { width: 30px; height: 30px; display: block; }
.um-anlass-label { font-size: 14px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Fotokacheln
   -------------------------------------------------------------------------- */
.um-motive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
}

.um-motiv {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-papier, #FBF7EE);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.um-motiv:hover:not(:disabled) { border-color: var(--vr-gold, #B8924A); }
.um-motiv:focus-visible {
  outline: 3px solid var(--vr-gold, #B8924A);
  outline-offset: 2px;
}
.um-motiv.is-selected {
  border-color: var(--vr-burgund, #6E1A24);
  box-shadow: 0 0 0 1px var(--vr-burgund, #6E1A24);
}
.um-motiv:disabled { cursor: default; opacity: 0.65; }

.um-motiv img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.um-motiv-name {
  display: block;
  padding: 8px 10px;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-motiv.is-selected .um-motiv-name {
  color: var(--vr-burgund, #6E1A24);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Rechte Spalte: die Vorschau
   -------------------------------------------------------------------------- */
.um-vorschau-rahmen {
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-lg, 16px);
  background: var(--vr-papier, #FBF7EE);
  box-shadow: var(--vr-shadow-md, 0 4px 12px rgba(26, 20, 16, 0.10));
  overflow: hidden;
}

.um-vorschau-eyebrow {
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--vr-linie-soft, #E8DDC4);
  background: var(--vr-creme-tief, #EFE6D2);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vr-text-muted, #6B5E50);
}

.um-vorschau {
  padding: clamp(18px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.um-pv-figure { margin: 0; border-radius: var(--vr-radius-md, 8px); overflow: hidden; }

.um-pv-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.um-pv-titel {
  margin: 0;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-xl, 1.5rem);
  color: var(--vr-burgund, #6E1A24);
}

.um-pv-text,
.um-pv-nachsatz {
  margin: 0;
  font-size: var(--vr-text-base, 1rem);
  line-height: 1.55;
  color: var(--vr-text-dunkel, #1A1410);
}

.um-pv-nachsatz {
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-pv-phase {
  border-left: 3px solid var(--vr-gold, #B8924A);
  padding-left: 14px;
}

.um-pv-phase-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vr-text-muted, #6B5E50);
  font-weight: 600;
}

.um-pv-reopen {
  display: block;
  margin-top: 2px;
  font-size: var(--vr-text-md, 1.125rem);
  font-weight: 600;
  color: var(--vr-burgund, #6E1A24);
}

/* --------------------------------------------------------------------------
   Speichern und Meldungen
   -------------------------------------------------------------------------- */
.um-speichern {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  letter-spacing: 0.04em;
  cursor: pointer;
  /* 44 Pixel sind Pflicht, nicht Geschmack. */
  min-height: 44px;
}

.um-speichern:hover:not(:disabled) { background: var(--vr-burgund-tief, #4A0E18); }
.um-speichern:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.um-speichern:disabled { opacity: 0.55; cursor: default; }

.um-hinweis {
  padding: 10px 14px;
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-creme-tief, #EFE6D2);
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-hinweis--fehler {
  background: #F6E3E5;
  color: var(--vr-burgund, #6E1A24);
  font-weight: 600;
}

.um-hinweis--gut {
  background: #E4EFE2;
  color: #2F5B2A;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Verlauf, unten ueber die volle Breite
   -------------------------------------------------------------------------- */
.um-liste-abschnitt { margin-top: clamp(24px, 4vw, 40px); }

.um-liste-h {
  margin: 0 0 12px;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-lg, 1.25rem);
  color: var(--vr-burgund, #6E1A24);
}

.um-liste { display: flex; flex-direction: column; gap: 10px; }

.um-zeile {
  padding: 14px 16px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-left: 3px solid var(--vr-gold, #B8924A);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-papier, #FBF7EE);
}

.um-zeile-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.um-zeile-typ {
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  color: var(--vr-burgund, #6E1A24);
}

.um-zeile-zeitraum {
  margin-top: 4px;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-dunkel, #1A1410);
}

.um-zeile-fuss {
  margin-top: 6px;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-vermerk {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--vr-radius-full, 9999px);
  background: var(--vr-creme-tief, #EFE6D2);
  font-style: italic;
}

.um-abzeichen {
  padding: 3px 10px;
  border-radius: var(--vr-radius-full, 9999px);
  font-size: var(--vr-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.um-abzeichen--laeuft  { background: #E4EFE2; color: #2F5B2A; }
.um-abzeichen--geplant { background: #EFE6D2; color: #8E6E2E; }
.um-abzeichen--beendet { background: #E8E3DA; color: #6B5E50; }
.um-abzeichen--entwurf { background: #E8E3DA; color: #6B5E50; }

/* --------------------------------------------------------------------------
   Dunkelfassung, nach demo-patches.css ab Zeile 519:
   Grund #1F1A15, Karten #2A2520, Text #F5EFE0, Rahmen #4A4035.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .um-field,
html[data-theme="dark"] .um-anlass,
html[data-theme="dark"] .um-motiv,
html[data-theme="dark"] .um-vorschau-rahmen,
html[data-theme="dark"] .um-zeile,
html[data-theme="dark"] .um-feld input[type="text"],
html[data-theme="dark"] .um-feld input[type="date"],
html[data-theme="dark"] .um-feld textarea {
  background: #2A2520;
  border-color: #4A4035;
  color: #F5EFE0;
}

html[data-theme="dark"] .um-vorschau-eyebrow,
html[data-theme="dark"] .um-heute,
html[data-theme="dark"] .um-hinweis,
html[data-theme="dark"] .um-vermerk {
  background: #241F1B;
  border-color: #4A4035;
  color: #B5A895;
}

html[data-theme="dark"] .um-legend,
html[data-theme="dark"] .um-pv-titel,
html[data-theme="dark"] .um-pv-reopen,
html[data-theme="dark"] .um-liste-h,
html[data-theme="dark"] .um-zeile-typ,
html[data-theme="dark"] .um-motiv.is-selected .um-motiv-name {
  color: #D4B070;
}

html[data-theme="dark"] .um-step,
html[data-theme="dark"] .um-anlass.is-selected,
html[data-theme="dark"] .um-speichern {
  background: #8E2A36;
  color: #F5EFE0;
  border-color: #8E2A36;
}

html[data-theme="dark"] .um-note,
html[data-theme="dark"] .um-motiv-name,
html[data-theme="dark"] .um-feld label,
html[data-theme="dark"] .um-pv-phase-label,
html[data-theme="dark"] .um-pv-nachsatz,
html[data-theme="dark"] .um-zeile-fuss {
  color: #B5A895;
}

html[data-theme="dark"] .um-pv-text,
html[data-theme="dark"] .um-zeile-zeitraum {
  color: #F5EFE0;
}

html[data-theme="dark"] .um-hinweis--fehler { background: #3A2225; color: #E8A0AC; }
html[data-theme="dark"] .um-hinweis--gut    { background: #22301F; color: #A8D3A0; }

html[data-theme="dark"] .um-abzeichen--laeuft  { background: #22301F; color: #A8D3A0; }
html[data-theme="dark"] .um-abzeichen--geplant { background: #332B1F; color: #D4B070; }
html[data-theme="dark"] .um-abzeichen--beendet,
html[data-theme="dark"] .um-abzeichen--entwurf { background: #2F2A24; color: #B5A895; }

/* --------------------------------------------------------------------------
   Schmale Schirme. Nur die drei Breakpunkte, die im Haus gelten.
   -------------------------------------------------------------------------- */
@media (max-width: 490px) {
  .um-anlass-grid,
  .um-motive,
  .um-zwei {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Vier Anlaesse, Vorlauf, eigene Fotos, grosse Vorschau, Schalter
   Angehaengt am 12.09.2026, Sitzung d336ce82.
   ========================================================================== */

/* ⚠️ Guertel und Hosentraeger. Mehrere dieser Bloecke tragen ein eigenes
   display (fieldset ist flex, die Raster sind grid), und eine eigene Regel
   schlaegt das hidden-Attribut. Deshalb beides: das Attribut und die Klasse,
   und dazu die Regel fuer [hidden] mit !important. Genau daran ist im Panel
   der Praxis einmal ein ausgeblendeter Block sichtbar und bedienbar
   geblieben. */
#um-inhalt [hidden] { display: none !important; }
#um-inhalt .um-aus { display: none !important; }

/* --------------------------------------------------------------------------
   Auswahllisten
   -------------------------------------------------------------------------- */
.um-auswahl {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: var(--vr-text-base, 1rem);
  color: var(--vr-text-dunkel, #1A1410);
}

.um-auswahl:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.um-auswahl:disabled { opacity: 0.6; cursor: default; }

/* --------------------------------------------------------------------------
   Die neuen Zeiten
   -------------------------------------------------------------------------- */
.um-zeiten { display: flex; flex-direction: column; gap: 10px; }

.um-zeit-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-papier, #FBF7EE);
}

.um-zeit-tag {
  min-width: 92px;
  font-weight: 600;
  color: var(--vr-burgund, #6E1A24);
}

.um-zeit-felder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.um-zeit-klein { font-size: var(--vr-text-sm, 0.875rem); color: var(--vr-text-muted, #6B5E50); }

.um-zeit-zeile input[type="time"] {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  /* 16px, sonst zoomt iOS beim Antippen. */
  font-size: 1rem;
  color: var(--vr-text-dunkel, #1A1410);
}

.um-zeit-zu {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-zeit-zu input { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Eigenes Foto
   -------------------------------------------------------------------------- */
.um-eigenes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--vr-linie-soft, #E8DDC4);
}

.um-eigenes-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--vr-text-sm, 0.875rem);
  font-weight: 600;
  color: var(--vr-text-dunkel, #1A1410);
}

.um-eigenes-feld {
  width: 100%;
  min-height: 44px;
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-dunkel, #1A1410);
}

.um-eigenes-stand {
  margin-top: 8px;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-motiv-huelle { position: relative; display: flex; flex-direction: column; }

.um-motiv--eigen img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; display: block; }

.um-motiv-weg {
  margin-top: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.um-motiv-weg:hover:not(:disabled) { background: #F6E3E5; }
.um-motiv-weg:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.um-motiv-weg:disabled { opacity: 0.55; cursor: default; }

/* --------------------------------------------------------------------------
   Schiebeschalter. Kein Haekchen, Dirks Ansage: es soll schoen aussehen.
   Der Schutz ist das disabled am Feld, nicht die Optik.
   -------------------------------------------------------------------------- */
.um-schalter {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-papier, #FBF7EE);
  cursor: pointer;
  min-height: 44px;
}

/* Das Kaestchen selbst bleibt bedienbar und im Fokuslauf, es liegt nur
   unsichtbar unter der Bahn. So bleibt die Tastatur voll nutzbar. */
.um-schalter input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.um-schalter-bahn {
  position: relative;
  flex: 0 0 auto;
  width: 52px; height: 30px;
  margin-top: 2px;
  border-radius: 9999px;
  background: #D8CDB8;
  transition: background 0.18s ease;
}

.um-schalter-knauf {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 9999px;
  background: var(--vr-weiss, #FFFDF9);
  box-shadow: 0 1px 3px rgba(26, 20, 16, 0.30);
  transition: transform 0.18s ease;
}

.um-schalter input:checked + .um-schalter-bahn { background: var(--vr-burgund, #6E1A24); }
.um-schalter input:checked + .um-schalter-bahn .um-schalter-knauf { transform: translateX(22px); }
.um-schalter input:focus-visible + .um-schalter-bahn {
  outline: 3px solid var(--vr-gold, #B8924A);
  outline-offset: 2px;
}
.um-schalter input:disabled + .um-schalter-bahn { opacity: 0.5; }

.um-schalter-text { display: flex; flex-direction: column; gap: 3px; }
.um-schalter-tit { font-weight: 600; color: var(--vr-text-dunkel, #1A1410); }
.um-schalter-sub { font-size: var(--vr-text-sm, 0.875rem); color: var(--vr-text-muted, #6B5E50); }

@media (prefers-reduced-motion: reduce) {
  .um-schalter-bahn, .um-schalter-knauf { transition: none; }
}

/* Der Vermerk bleibt sichtbar, aber ausgegraut, bis der Schalter angeht. */
.um-vermerk-bereich { margin-top: 12px; opacity: 0.5; }
.um-vermerk-bereich.is-offen { opacity: 1; }

/* --------------------------------------------------------------------------
   Die zwei Knoepfe unter der Vorschau
   -------------------------------------------------------------------------- */
.um-vorschau-knoepfe {
  display: flex;
  gap: 10px;
  padding: 14px clamp(18px, 3vw, 26px) clamp(18px, 3vw, 26px);
  flex-wrap: wrap;
}

.um-pv-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--vr-gold, #B8924A);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  font-weight: 600;
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.um-pv-knopf:hover { background: var(--vr-creme-tief, #EFE6D2); }
.um-pv-knopf:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Die grosse Vorschau. Kein iframe: die CSP des Panels steht auf
   frame-src 'none'. Die Handy-Ansicht ist ein Rahmen mit fester Breite.
   -------------------------------------------------------------------------- */
.um-gross { position: fixed; inset: 0; z-index: 100040; }
/* ⚠️ 12.09.2026, Dirks Ansage: die Tafel steht MITTIG im Fenster, nicht
   oben. Vorher haing sie an inset 4vh und wirkte nach oben gerutscht.
   Zentriert wird ueber Flex im Grund, nicht ueber transform: eine
   Verschiebung eroeffnet einen eigenen Bezugsrahmen, und daran ist auf
   dieser Seite schon einmal ein Vollbild-Effekt zerbrochen. */
.um-gross.is-offen { display: flex; align-items: center; justify-content: center; }

.um-gross-grund {
  position: absolute;
  inset: 0;
  background: rgba(26, 20, 16, 0.72);
}

.um-gross-tafel {
  position: relative;
  width: min(960px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--vr-radius-lg, 16px);
  background: var(--vr-papier, #FBF7EE);
  box-shadow: 0 18px 48px rgba(26, 20, 16, 0.45);
  overflow: hidden;
}

.um-gross-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vr-linie-soft, #E8DDC4);
  background: var(--vr-creme-tief, #EFE6D2);
}

.um-gross-modi { display: flex; gap: 8px; }

.um-gross-modus {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: 9999px;
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-dunkel, #1A1410);
  cursor: pointer;
}

.um-gross-modus.is-selected {
  background: var(--vr-burgund, #6E1A24);
  border-color: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
  font-weight: 600;
}

.um-gross-modus:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

.um-gross-zu {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: 9999px;
  background: var(--vr-weiss, #FFFDF9);
  font-size: 18px;
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.um-gross-zu:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

.um-gross-buehne {
  padding: clamp(18px, 3vw, 30px);
  overflow-y: auto;
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Die Vorschau selbst, dieselbe Bauweise in drei Groessen
   -------------------------------------------------------------------------- */
.um-pv { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* Handy-Ansicht: genau die Breite eines iPhone-Fensters, mit Rahmen, damit
   der Unterschied auch am grossen Schirm sichtbar ist. */
.um-pv--handy {
  width: 390px;
  max-width: 100%;
  padding: 16px;
  border: 10px solid #1A1410;
  border-radius: 32px;
  background: var(--vr-papier, #FBF7EE);
}

.um-pv--wichtig { border-left: 4px solid #8E2A36; padding-left: 14px; }

.um-pv-marke {
  margin: 0;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #8E2A36;
  color: #FFFDF9;
  font-size: var(--vr-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.um-pv-zeiten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

.um-pv-zeiten li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-creme-tief, #EFE6D2);
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-dunkel, #1A1410);
}

.um-zeile-anlass {
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  font-size: var(--vr-text-xs, 0.75rem);
  color: var(--vr-text-muted, #6B5E50);
}

.um-hinweis--info {
  border-left: 3px solid var(--vr-gold, #B8924A);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Dunkelfassung
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .um-auswahl,
html[data-theme="dark"] .um-zeit-zeile,
html[data-theme="dark"] .um-zeit-zeile input[type="time"],
html[data-theme="dark"] .um-schalter,
html[data-theme="dark"] .um-motiv-weg,
html[data-theme="dark"] .um-pv-knopf,
html[data-theme="dark"] .um-gross-tafel,
html[data-theme="dark"] .um-gross-modus,
html[data-theme="dark"] .um-gross-zu {
  background: #2A2520;
  border-color: #4A4035;
  color: #F5EFE0;
}

html[data-theme="dark"] .um-gross-kopf,
html[data-theme="dark"] .um-pv-zeiten li { background: #241F1B; border-color: #4A4035; color: #F5EFE0; }
html[data-theme="dark"] .um-pv--handy { background: #241F1B; border-color: #0F0C0A; }
html[data-theme="dark"] .um-zeit-tag { color: #D4B070; }
html[data-theme="dark"] .um-schalter-tit { color: #F5EFE0; }
html[data-theme="dark"] .um-schalter-sub,
html[data-theme="dark"] .um-zeit-klein,
html[data-theme="dark"] .um-zeit-zu,
html[data-theme="dark"] .um-eigenes-stand,
html[data-theme="dark"] .um-zeile-anlass { color: #B5A895; }
html[data-theme="dark"] .um-schalter-bahn { background: #4A4035; }
html[data-theme="dark"] .um-schalter input:checked + .um-schalter-bahn { background: #8E2A36; }
html[data-theme="dark"] .um-gross-modus.is-selected { background: #8E2A36; border-color: #8E2A36; color: #F5EFE0; }
html[data-theme="dark"] .um-eigenes { border-top-color: #4A4035; }
html[data-theme="dark"] .um-eigenes-label { color: #F5EFE0; }

/* --------------------------------------------------------------------------
   Schmale Schirme. Nur die drei Breakpunkte, die im Haus gelten.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .um-gross-tafel { inset: 0; transform: none; width: 100%; max-height: 100%; border-radius: 0; }
}

@media (max-width: 490px) {
  .um-zeit-zeile { align-items: flex-start; flex-direction: column; }
  .um-vorschau-knoepfe { flex-direction: column; }
  .um-pv-knopf { width: 100%; justify-content: center; }
  .um-pv--handy { width: 100%; border-width: 6px; border-radius: 20px; }
}


/* ==========================================================================
   MELDUNGSLISTE, 15.09.2026, Sitzung 160e0796
   Jede Karte mit Bearbeiten, Deaktivieren und Wieder aktivieren, die
   Rueckfrage direkt in der Karte. Seit dem Abend des 15.09. stehen die
   Karten UNTER dem Formular, ohne Ueberschrift und ohne Leiste, Dirks
   Wunsch. Der Verlauf ist unten aufklappbar. Alle Knoepfe 44 Pixel hoch.
   Breakpunkt nur 490.
   ========================================================================== */

.um-liste-abschnitt { margin: clamp(24px, 4vw, 40px) 0 0; }
#um-liste-meldung { margin-bottom: 12px; }

.um-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--vr-gold, #B8924A);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  font-weight: 600;
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.um-knopf:hover:not(:disabled) { background: var(--vr-creme-tief, #EFE6D2); }
.um-knopf:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.um-knopf:disabled { opacity: 0.55; cursor: default; }
.um-knopf[aria-current] { background: var(--vr-creme-tief, #EFE6D2); cursor: default; }

.um-knopf--haupt {
  background: var(--vr-burgund, #6E1A24);
  border-color: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
}

.um-knopf--haupt:hover:not(:disabled) { background: var(--vr-burgund-tief, #4A0E18); }
.um-knopf--aus { border-color: var(--vr-burgund, #6E1A24); }
.um-knopf--an { border-color: #2F5B2A; color: #2F5B2A; }

.um-knopf--voll.um-knopf--aus {
  background: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
}

.um-knopf--voll.um-knopf--an {
  background: #2F5B2A;
  border-color: #2F5B2A;
  color: #FFFDF9;
}

.um-knopf--voll.um-knopf--aus:hover:not(:disabled) { background: var(--vr-burgund-tief, #4A0E18); }
.um-knopf--voll.um-knopf--an:hover:not(:disabled) { background: #22451E; }

.um-zeile-marken {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.um-zeile-aktionen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.um-zeile--laeuft { border-left-color: #2F5B2A; }
.um-zeile--aus,
.um-zeile--beendet { border-left-color: #B5A895; }
.um-zeile.is-in-arbeit { box-shadow: 0 0 0 2px var(--vr-gold, #B8924A); }

.um-abzeichen--aus { background: #F6E3E5; color: var(--vr-burgund, #6E1A24); }
.um-abzeichen--seite { background: var(--vr-burgund, #6E1A24); color: var(--vr-creme, #F8F2E4); }

.um-frage {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--vr-burgund, #6E1A24);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-creme-tief, #EFE6D2);
}

.um-frage-text {
  margin: 0 0 10px;
  font-size: var(--vr-text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--vr-text-dunkel, #1A1410);
}

.um-frage-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* Beim Bearbeiten springt der Fokus auf das Formular. Mit der Maus ohne
   Rahmen, mit der Tastatur sichtbar. */
.um-layout:focus { outline: none; }
.um-layout:focus-visible { outline: 2px solid var(--vr-gold, #B8924A); outline-offset: 6px; }

/* Der Vermerk steht in Karte und Verlauf auf einer eigenen Zeile. Als Pille
   mit voller Rundung wurde er am iPhone X ueber drei Zeilen ein Klecks,
   gemessen am 15.09.2026. */
.um-zeile-fuss .um-vermerk,
.um-verlauf-eintrag .um-vermerk {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 4px 10px;
  border-radius: var(--vr-radius-sm, 4px);
}
.um-verlauf {
  margin-top: clamp(24px, 4vw, 40px);
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-papier, #FBF7EE);
}

.um-verlauf-kopf {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  color: var(--vr-burgund, #6E1A24);
}

.um-verlauf-kopf:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.um-verlauf-liste { padding: 0 16px 14px; }

.um-verlauf-eintraege {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.um-verlauf-eintrag {
  padding: 8px 0;
  border-top: 1px solid var(--vr-linie-soft, #E8DDC4);
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-dunkel, #1A1410);
}

.um-verlauf-was { font-weight: 700; color: var(--vr-burgund, #6E1A24); }
.um-verlauf-klein { display: block; margin-top: 2px; color: var(--vr-text-muted, #6B5E50); }

html[data-theme="dark"] .um-knopf,
html[data-theme="dark"] .um-verlauf {
  background: #2A2520;
  border-color: #4A4035;
  color: #F5EFE0;
}

html[data-theme="dark"] .um-knopf--haupt,
html[data-theme="dark"] .um-knopf--voll.um-knopf--aus { background: #8E2A36; border-color: #8E2A36; color: #F5EFE0; }
html[data-theme="dark"] .um-knopf--an { border-color: #A8D3A0; color: #A8D3A0; }
html[data-theme="dark"] .um-knopf--voll.um-knopf--an { background: #2F5B2A; border-color: #2F5B2A; color: #F5EFE0; }
html[data-theme="dark"] .um-frage { background: #241F1B; color: #F5EFE0; }
html[data-theme="dark"] .um-frage-text,
html[data-theme="dark"] .um-verlauf-eintrag { color: #F5EFE0; border-top-color: #4A4035; }
html[data-theme="dark"] .um-verlauf-kopf,
html[data-theme="dark"] .um-verlauf-was { color: #D4B070; }
html[data-theme="dark"] .um-verlauf-klein { color: #B5A895; }
html[data-theme="dark"] .um-abzeichen--aus { background: #3A2225; color: #E8A0AC; }
html[data-theme="dark"] .um-abzeichen--seite { background: #8E2A36; color: #F5EFE0; }

@media (max-width: 490px) {
  .um-zeile-aktionen .um-knopf,
  .um-frage-knoepfe .um-knopf { flex: 1 1 100%; }
}