/* Bearbeitungsbereich der Praxis-Website Irene Baumgärtel (Konzept vom 09.11.2026)
   In der Welt der Website, aber ruhig und werkzeughaft: Fira Sans, Tinte für Handlungen, Bernstein nur als Auszeichnung,
   Hell als Grund, Weiß für die Blöcke. Keine Schwünge, keine Scheiben. Große Felder und Knöpfe (mindestens 48 px) für Laptop, iPad und Handy. */

@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/schriften/fira-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/schriften/fira-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/schriften/fira-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/schriften/fira-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grund: #ffffff;
  --hell: #fef3dd;           /* wie auf der Website */
  --wand: #fbb231;           /* Bernstein: Etikett „Sichtbar“, Markierung, Hauptknopf der Vorschau */
  --tinte: #2b2624;          /* Text und Handlungen */
  --tinte-2: #4f4743;        /* Hilfetexte, 8,9 : 1 auf Weiß, 8,1 : 1 auf Hell */
  --linie: #e8d9bd;          /* Trennlinien */
  --feldrand: #7d7066;       /* Rand der Eingabefelder, 4,8 : 1 auf Weiß */
  --fehler: #a3221b;         /* 7,5 : 1 auf Weiß */
  --fehler-grund: #fdf0ee;
  --erfolg: #1d6338;         /* 7,1 : 1 auf Weiß */
  --erfolg-grund: #eef7f0;
  --rand: clamp(1rem, 3.5vw, 2rem);
  --breite: 50rem;
  --rundung: 1rem;
  --schrift: "Fira Sans", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--tinte); caret-color: var(--tinte); }
body.werkzeug {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--hell); color: var(--tinte);
  font-family: var(--schrift); font-size: 1.125rem; font-weight: 500; line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, legend { font-weight: 700; line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.625rem); margin: 0 0 .75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: #b9811c; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--tinte); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--wand); color: var(--tinte); }

.w-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w-sprung { position: absolute; left: 1rem; top: 1rem; z-index: 30; padding: .75rem 1rem; background: var(--tinte); color: #fff; clip-path: inset(50%); }
.w-sprung:focus { clip-path: none; }

/* ---------- Kopf und Fuß ---------- */
.w-kopf { background: var(--grund); border-bottom: 1px solid var(--linie); }
.w-kopf__innen { max-width: 70rem; margin: 0 auto; padding: .75rem var(--rand); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.w-marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; min-height: 3rem; }
.w-marke__logo { width: 2.75rem; }
.w-marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.w-marke__name { font-weight: 700; font-size: 1.125rem; }
.w-marke__zusatz { font-size: .9375rem; color: var(--tinte-2); }
.w-kopf__wege { display: flex; align-items: center; gap: .25rem 1.25rem; flex-wrap: wrap; }
.w-kopf__wege a, .w-kopf__wege .w-textknopf { min-height: 3rem; display: inline-flex; align-items: center; }
.w-kopf__wege form { margin: 0; }

.w-haupt { flex: 1; width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--rand) 4rem; }
.w-fuss { border-top: 1px solid var(--linie); background: var(--grund); }
.w-fuss__innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 1rem var(--rand); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.w-fuss__innen a { min-height: 3rem; display: inline-flex; align-items: center; }

.w-schmal { max-width: 32rem; }
.w-einleitung { font-size: 1.1875rem; max-width: 40rem; margin-bottom: 1.5rem; }
.w-zurueck { margin-bottom: .5rem; }
.w-zurueck a::before { content: "\2190\00a0"; }
.w-zurueck a, .w-nebenweg a, .w-wege a { display: inline-flex; align-items: center; min-height: 3rem; }
.w-wege { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: -.75rem 0 1.5rem; }
.w-hilfe { color: var(--tinte-2); font-size: 1rem; margin: 0 0 .5rem; max-width: 40rem; }
.w-frei { font-weight: 500; color: var(--tinte-2); font-size: 1rem; }

/* ---------- Blöcke ---------- */
.w-block {
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--rundung);
  padding: clamp(1.25rem, 3vw, 2rem); margin: 0 0 1.5rem; min-width: 0;
}
fieldset.w-block { padding-top: clamp(1rem, 2.5vw, 1.5rem); }
.w-block__titel { font-size: 1.5rem; padding: 0; margin: 0 0 1rem; float: left; width: 100%; }
.w-block__titel + * { clear: both; }
.w-block > :last-child { margin-bottom: 0; }

/* ---------- Felder ---------- */
.w-formular { margin: 0; }
.w-feld { margin: 0 0 1.5rem; min-width: 0; }
.w-label { display: block; font-weight: 700; margin-bottom: .25rem; }
.w-feld input, .w-feld textarea {
  display: block; width: 100%; min-height: 3.25rem; padding: .7rem .9rem;
  font: inherit; font-size: 1.125rem; line-height: 1.45; color: var(--tinte);
  background: var(--grund); border: 2px solid var(--feldrand); border-radius: .625rem;
}
.w-feld textarea { resize: vertical; min-height: 6rem; }
/* Ein Satz, der im Feld umbricht und mitwächst: so hoch wie ein Eingabefeld, nie mit Scrollleiste (Manny, 11.11.2026) */
.w-feld textarea[data-einzeilig] { min-height: 3.25rem; resize: none; overflow: hidden; }
.w-feld input:focus, .w-feld textarea:focus { outline: 3px solid var(--tinte); outline-offset: 1px; border-color: var(--tinte); }
.w-feld input[type="date"] { max-width: 14rem; }
.w-feld--kurz input { max-width: 20rem; }
.w-feld--mittel input { max-width: 28rem; }
.w-feld--zahl input { max-width: 7rem; }
.w-feld--fehler input, .w-feld--fehler textarea { border-color: var(--fehler); border-width: 3px; }
.w-fehler { color: var(--fehler); font-weight: 700; font-size: 1rem; margin: .25rem 0 .5rem; }

.w-wahl { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.w-wahl__punkt, .w-haken { display: flex; gap: .875rem; align-items: flex-start; padding: .75rem 0; cursor: pointer; }
.w-wahl__punkt + .w-wahl__punkt { border-top: 1px solid var(--linie); }
.w-wahl__punkt input, .w-haken input { flex: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; }
.w-wahl__name, .w-haken__text { display: block; font-weight: 700; }
.w-wahl__punkt .w-hilfe, .w-haken .w-hilfe { margin: 0; }

/* Passwort anzeigen (nur mit Skript) */
.w-passwort { position: relative; }
.w-passwort input { padding-right: 7.5rem; }
.w-passwort__knopf { position: absolute; right: .375rem; top: 50%; transform: translateY(-50%); min-height: 2.75rem; padding: 0 .875rem; }

/* ---------- Listen mit Zeilen (Termine, Themen, Inhalte) ---------- */
.w-zeilen { list-style: none; margin: 0 0 1rem; padding: 0; }
.w-zeile { padding: 1.25rem 0; border-top: 1px solid var(--linie); }
.w-zeile:last-child { border-bottom: 1px solid var(--linie); }
.w-zeile__titel { font-weight: 700; margin-bottom: .75rem; }
.w-zeile .w-feld { margin-bottom: 1rem; }
.w-zeile__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.w-zeile__titel .w-status { margin-left: .5rem; vertical-align: .1em; }
.w-ausweich { margin: 0 0 1rem; }
.w-ausweich summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: #b9811c;
}
.w-ausweich summary::-webkit-details-marker { display: none; }
.w-ausweich summary::before { content: ""; width: .5rem; height: .5rem; border: solid var(--tinte); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 150ms ease; }
.w-ausweich[open] summary::before { transform: rotate(45deg); }
.w-ausweich[open] summary { margin-bottom: .5rem; }
/* Der Text hat die ganze Breite, die Knöpfe stehen darunter (Manny, 11.11.2026: keine schmalen Kästen mit langen Sätzen) */
.w-zeile--einfach { display: grid; gap: .5rem 1rem; }
.w-zeile--einfach .w-feld { margin: 0; }

/* ---------- Knöpfe ---------- */
.w-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .625rem 1.75rem;
  font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  color: #fff; background: var(--tinte); border: 2px solid var(--tinte); border-radius: 999px; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.w-knopf:hover { background: #4a413d; border-color: #4a413d; }
.w-knopf:active { background: #1a1615; }
.w-knopf--zweit { color: var(--tinte); background: var(--grund); }
.w-knopf--zweit:hover { background: var(--hell); border-color: var(--tinte); }
.w-knopf--klein { min-height: 3rem; padding: .5rem 1.25rem; font-size: 1rem; }
.w-textknopf {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--tinte);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: #b9811c;
}
.w-textknopf:hover { text-decoration-thickness: 2px; text-decoration-color: var(--tinte); }

/* Leiste am Fuß des Formulars, bleibt beim Scrollen unten sichtbar */
.w-aktionen { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--rand)); padding: 0 var(--rand); background: var(--grund); border-top: 1px solid var(--linie); box-shadow: 0 -6px 16px -10px rgb(43 38 36 / .35); }
.w-aktionen__innen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .875rem 0 calc(.875rem + env(safe-area-inset-bottom)); }
/* Am Handy und bei wenig Höhe steht die Leiste einfach am Ende, sonst nimmt sie ein Viertel des Bildschirms */
@media (max-width: 40em), (max-height: 40em) {
  .w-aktionen { position: static; box-shadow: none; margin-top: .5rem; }
}
@media (max-width: 30em) {
  .w-aktionen__innen .w-knopf { flex: 1 1 100%; }
}

/* ---------- Meldungen ---------- */
.w-meldung { background: var(--grund); border: 2px solid var(--tinte); border-radius: var(--rundung); padding: 1rem 1.25rem; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.w-meldung p { margin: 0; flex: 1 1 18rem; }
.w-meldung form { margin: 0; }
.w-meldung--erfolg { border-color: var(--erfolg); background: var(--erfolg-grund); }
.w-meldung--erfolg p::before { content: ""; display: inline-block; width: 1.25rem; height: .7rem; margin: 0 .625rem .2rem 0; border: solid var(--erfolg); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.w-meldung--offen { border-color: var(--wand); }
.w-meldung--warnung { border-color: var(--fehler); background: var(--fehler-grund); }
.w-meldung__liste { margin: 0; padding-left: 1.25rem; flex: 1 1 100%; }
.w-meldung__liste a { display: inline-flex; min-height: 2.75rem; align-items: center; }

.w-fehlerliste { border: 3px solid var(--fehler); background: var(--grund); border-radius: var(--rundung); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.w-fehlerliste:focus { outline: 3px solid var(--tinte); outline-offset: 3px; }
.w-fehlerliste__titel { color: var(--fehler); font-size: 1.25rem; margin-bottom: .5rem; }
.w-fehlerliste ul { margin: 0; padding-left: 1.25rem; }
.w-fehlerliste li + li { margin-top: .25rem; }
.w-fehlerliste a { color: var(--fehler); font-weight: 700; }
.w-fehlerliste p { margin: 0; color: var(--fehler); font-weight: 700; }

/* ---------- Übersicht ---------- */
.w-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.w-liste__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--linie); }
.w-liste__zeile:last-child { border-bottom: 1px solid var(--linie); }
.w-liste__text { flex: 1 1 20rem; min-width: 0; }
.w-liste__name { font-weight: 700; font-size: 1.1875rem; margin: 0 0 .25rem; }
.w-liste__info { margin: 0 0 .5rem; color: var(--tinte-2); font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.w-liste__zeile .w-liste__info { margin: 0; }
.w-status { display: inline-block; padding: .125rem .75rem; border-radius: 999px; font-size: .9375rem; font-weight: 700; color: var(--tinte); white-space: nowrap; }
.w-status--sichtbar { background: var(--wand); }
.w-status--geplant { background: var(--hell); box-shadow: inset 0 0 0 1px #c99a3b; }
.w-status--aus { background: var(--grund); box-shadow: inset 0 0 0 1px var(--feldrand); }
.w-auszug { color: var(--tinte-2); font-size: 1rem; max-width: 40rem; }

.w-daten { margin: 0 0 1.25rem; }
.w-daten div { display: grid; gap: 0 1.5rem; padding: .625rem 0; border-top: 1px solid var(--linie); }
.w-daten div:last-child { border-bottom: 1px solid var(--linie); }
.w-daten dt { font-weight: 700; }
.w-daten dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 40em) { .w-daten div { grid-template-columns: 15rem 1fr; } }

.w-verlauf { list-style: none; margin: 0; padding: 0; }
.w-verlauf li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem 1rem; padding: .625rem 0; border-top: 1px solid var(--linie); font-size: 1rem; }
.w-verlauf li:last-child { border-bottom: 1px solid var(--linie); }
.w-verlauf__zeit { font-variant-numeric: tabular-nums; color: var(--tinte-2); min-width: 11.5rem; }
.w-verlauf__was { flex: 1 1 14rem; }
.w-verlauf a { margin-left: auto; min-height: 2.75rem; display: inline-flex; align-items: center; }

/* ---------- Fassungen ---------- */
.w-fassungen { list-style: none; padding-top: .5rem; padding-bottom: .5rem; }
.w-fassung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: 1rem 0; }
.w-fassung + .w-fassung { border-top: 1px solid var(--linie); }
.w-fassung__text { flex: 1 1 20rem; }
.w-fassung__zeit { font-weight: 700; margin: 0 0 .125rem; font-variant-numeric: tabular-nums; }
.w-fassung__was { margin: 0; color: var(--tinte-2); font-size: 1rem; }
.w-fassung form { margin: 0; }

/* ---------- Kurzanleitung ---------- */
.w-anleitung h2 { margin-top: 2.5rem; }
.w-anleitung ol { padding-left: 1.5rem; max-width: 40rem; }
.w-anleitung li + li { margin-top: .5rem; }
.w-anleitung figure { margin: 1rem 0 1.5rem; }
.w-anleitung figure img { border: 1px solid var(--linie); border-radius: .75rem; }
.w-anleitung figcaption { font-size: 1rem; color: var(--tinte-2); margin-top: .5rem; }
.w-anleitung .w-block { break-inside: avoid; }
.w-anleitung__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.w-anleitung__kopf h1 { margin-bottom: .5rem; }
.w-druck { margin: 0 0 .5rem; }
.w-anleitung ul { padding-left: 1.25rem; max-width: 40rem; }

/* ---------- Felder, Ergänzungen der Überarbeitung ---------- */
.w-feld select {
  display: block; width: 100%; min-height: 3.25rem; padding: .6rem .9rem;
  font: inherit; font-size: 1.125rem; color: var(--tinte); background: var(--grund);
  border: 2px solid var(--feldrand); border-radius: .625rem; cursor: pointer;
}
.w-feld select:focus { outline: 3px solid var(--tinte); outline-offset: 1px; border-color: var(--tinte); }
.w-feld--mittel select { max-width: 22rem; }
.w-felder-zwei { display: grid; gap: 0 1.25rem; }
/* Nebeneinander bündig (Manny, 11.11.2026): Überschriften in einer Reihe, Felder darunter auf gleicher Höhe, auch wenn eine Überschrift
   zweizeilig ist; Fehlermeldungen in einer eigenen Reihe dazwischen */
@media (min-width: 34em) {
  .w-felder-zwei { grid-template-columns: 3fr 2fr; grid-template-rows: auto auto auto; align-items: end; }
  .w-felder-zwei > .w-feld { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .w-felder-zwei .w-label { grid-row: 1; align-self: end; }
  .w-felder-zwei .w-fehler { grid-row: 2; }
  .w-felder-zwei textarea, .w-felder-zwei input, .w-felder-zwei select { grid-row: 3; align-self: start; }
}
.w-datumtext { margin: .3rem 0 0; min-height: 1.4em; font-size: .9375rem; color: var(--tinte-2); }
.w-feld--code input { max-width: 13rem; font-size: 1.75rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.w-nebenweg p { margin: 0; }

/* Schalter: Auswahl nebeneinander, darunter der Satz zur gewählten Möglichkeit */
.w-schalter { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.w-schalter__knoepfe { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--tinte); border-radius: .875rem; overflow: hidden; }
.w-schalter__wahl { position: relative; flex: 1 1 auto; }
.w-schalter__wahl + .w-schalter__wahl { border-left: 2px solid var(--tinte); }
.w-schalter__wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.w-schalter__wahl span { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem; font-weight: 700; white-space: nowrap; }
.w-schalter__wahl input:checked + span { background: var(--tinte); color: #fff; }
.w-schalter__wahl input:focus-visible + span { outline: 3px solid var(--wand); outline-offset: -5px; }
.w-schalter__wahl:hover input:not(:checked) + span { background: var(--hell); }
.w-schalter__satz { margin: .5rem 0 0; }

/* ---------- Editor: Formular links, große Vorschau rechts (ab 1024 px) ---------- */
.w-haupt--breit { max-width: calc(120rem + 2 * var(--rand)); }
.w-editor__formular { min-width: 0; }
.w-vorschau { display: none; }
@media (min-width: 64em) {
  .w-editor { display: grid; grid-template-columns: minmax(27rem, 36rem) minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 2.75rem); align-items: start; }
  .w-vorschau { display: flex; flex-direction: column; position: sticky; top: 1rem; height: calc(100vh - 2rem); min-height: 34rem; }
  .w-nur-schmal { display: none !important; }
}
.w-vorschau__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-bottom: .75rem; }
.w-vorschau__stand { flex: 1 1 16rem; margin: 0; display: flex; align-items: center; gap: .625rem; font-size: 1rem; font-weight: 700; }
.w-vorschau__stand::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--erfolg); }
.w-vorschau[data-zustand="entwurf"] .w-vorschau__stand::before { background: var(--wand); box-shadow: 0 0 0 2px #c98a12; }
.w-vorschau[data-zustand="laedt"] .w-vorschau__stand::before { background: var(--feldrand); }
.w-vorschau[data-zustand="fehler"] .w-vorschau__stand::before,
.w-vorschau[data-zustand="abgelaufen"] .w-vorschau__stand::before { background: var(--fehler); }
.w-vorschau__wahl { display: inline-flex; border: 2px solid var(--tinte); border-radius: 999px; overflow: hidden; }
.w-vorschau__wahl button { min-height: 2.5rem; padding: 0 1rem; border: 0; background: var(--grund); color: var(--tinte); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.w-vorschau__wahl button + button { border-left: 2px solid var(--tinte); }
.w-vorschau__wahl button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.w-vorschau__tab { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; font-weight: 700; }
.w-vorschau__fenster {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--grund); border: 1px solid #dcc9a6; border-radius: var(--rundung);
  box-shadow: 0 24px 48px -28px rgb(43 38 36 / .5), 0 2px 6px -2px rgb(43 38 36 / .12);
}
.w-vorschau__adresse { margin: 0; padding: .5rem .75rem; display: flex; background: #f7efe0; border-bottom: 1px solid var(--linie); }
.w-vorschau__adresse span { flex: 1; padding: .25rem .875rem; background: var(--grund); border-radius: 999px; font-size: .875rem; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-vorschau__lage { margin: 0; padding: .5rem .875rem; background: var(--hell); border-bottom: 1px solid var(--linie); font-size: .9375rem; font-weight: 700; }
.w-vorschau__flaeche { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--grund); }
.w-vorschau__rahmen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #fff; transform-origin: 0 0; transition: opacity 120ms ease; }
.w-vorschau__rahmen--neu { opacity: 0; pointer-events: none; }
.w-vorschau--handy .w-vorschau__flaeche { background: #efe5d3; }
.w-vorschau--handy .w-vorschau__rahmen { border-radius: 1.75rem; box-shadow: 0 0 0 .625rem var(--tinte); }

/* Knopfleiste im Editor: bleibt am Fuß der Formularspalte stehen */
.w-editor .w-aktionen { margin: 0; padding: 0 1.25rem; border: 1px solid var(--linie); border-bottom: 0; border-radius: var(--rundung) var(--rundung) 0 0; }
.w-aktionen__stand { flex: 1 1 100%; margin: 0; font-size: .9375rem; color: var(--tinte-2); }
.w-aktionen__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.w-knopf--speichern { min-width: 10rem; }

/* ---------- Termine: Kalenderblatt, Datum mit Wochentag, Thema ---------- */
.w-termine { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.w-termin { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.125rem 0; border-top: 1px solid var(--linie); transition: background-color 400ms ease; }
.w-termin:last-child { border-bottom: 1px solid var(--linie); }
.w-termin--hervor { background: var(--hell); }
.w-blatt {
  display: flex; flex-direction: column; align-items: center; align-self: start; width: 4.5rem; padding: .375rem 0 .5rem;
  background: var(--grund); border: 2px solid var(--tinte); border-radius: .75rem; line-height: 1.15; text-align: center;
}
.w-blatt__tag { font-size: .875rem; font-weight: 700; }
.w-blatt__zahl { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-blatt__monat { font-size: .75rem; color: var(--tinte-2); }
.w-termin--naechster .w-blatt { background: var(--wand); border-color: var(--wand); }
.w-termin--naechster .w-blatt__monat { color: var(--tinte); }
.w-termin--vorbei .w-blatt { border-color: var(--linie); color: var(--tinte-2); }
.w-termin__inhalt { min-width: 0; }
.w-termin__kopf { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; font-weight: 700; }
.w-termin__felder { display: grid; gap: 0 1rem; }
.w-termin__felder .w-feld { margin-bottom: .75rem; }
.w-termin .w-feld input[type="date"] { max-width: 14rem; }
.w-termin .w-ausweich { margin: 0; }
.w-termin__knoepfe { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 0 1.25rem; }
.w-termin__knoepfe .w-textknopf { min-height: 2.5rem; }
.w-termin--offen .w-blatt { border-style: dashed; border-color: var(--feldrand); }
.w-termin--offen .w-blatt__zahl { color: var(--tinte-2); }
/* Monatskalender */
.w-kalender { margin: 0 0 1.25rem; padding: 1rem 1rem .75rem; background: var(--grund); border: 1px solid var(--linie); border-radius: .875rem; max-width: 28rem; }
.w-kalender__kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.w-kalender__monat { margin: 0; font-size: 1.125rem; font-weight: 700; }
.w-kalender__pfeil { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--tinte); background: var(--grund); border: 2px solid var(--tinte); border-radius: 50%; cursor: pointer; }
.w-kalender__pfeil:hover { background: var(--hell); }
.w-kalender__gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.w-kalender__wt { padding: .25rem 0; text-align: center; font-size: .8125rem; font-weight: 700; color: var(--tinte-2); }
.w-kalender__tag {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0;
  font: inherit; font-size: 1rem; color: var(--tinte); background: transparent; border: 0; border-radius: .625rem; cursor: pointer; font-variant-numeric: tabular-nums;
}
.w-kalender__tag:hover:not(:disabled) { background: var(--hell); box-shadow: inset 0 0 0 2px var(--wand); }
.w-kalender__tag:disabled { color: #8f8379; cursor: default; }
.w-kalender__tag--heute { box-shadow: inset 0 0 0 2px var(--tinte); }
.w-kalender__tag--termin { background: var(--wand); font-weight: 700; }
.w-kalender__tag--termin.w-kalender__tag--vorbei { background: #f3e6cc; color: var(--tinte-2); }
.w-kalender__tag--ausweich { box-shadow: inset 0 0 0 2px var(--wand); }
.w-kalender__nr { position: absolute; top: .125rem; right: .3rem; font-size: .6875rem; font-weight: 700; }
.w-kalender__legende { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: .75rem 0 0; font-size: .875rem; color: var(--tinte-2); }
.w-kalender__muster { display: inline-block; width: 1rem; height: 1rem; border-radius: .3rem; margin-left: .5rem; }
.w-kalender__muster:first-child { margin-left: 0; }
.w-kalender__muster--termin { background: var(--wand); }
.w-kalender__muster--ausweich { box-shadow: inset 0 0 0 2px var(--wand); }
.w-kalender__muster--heute { box-shadow: inset 0 0 0 2px var(--tinte); }

@media (prefers-reduced-motion: reduce) {
  .w-termin, .w-vorschau__rahmen { transition: none; }
  .w-knopf, .w-textknopf, a { transition: none; }
}

@media print {
  body.werkzeug { background: #fff; font-size: 11pt; }
  .w-kopf, .w-fuss, .w-zurueck, .w-druck, .w-meldung, .w-sprung, .w-vorschau { display: none !important; }
  .w-haupt { padding: 0; max-width: none; }
  .w-block { border: 1px solid #ccc; }
  .w-anleitung h2 { break-after: avoid; }
  .w-anleitung figure { break-inside: avoid; }
  .w-anleitung figure img { max-height: 11cm; width: auto; }
  .w-anleitung__kopf h1 { font-size: 22pt; }
  .w-einleitung { font-size: 12pt; }
  a { text-decoration: none; }
}