/* ── Fenster: das eine Modal der Anwendung (fenster.js, app\widgets\Fenster) ──
   Kopffarbe, Titelgröße und Schrift stehen NUR hier. Auch der alte
   `.modal__head` (app.css) liest dieselben Variablen — ein Dreh, jedes Fenster.
   Das Kundenportal setzt in portal.css seine hellere Kopffarbe darüber. */
:root {
  --fenster-kopf-bg: var(--navy, #002147);
  --fenster-kopf-text: #fff;
  --fenster-kopf-text-2: rgba(255, 255, 255, .72);
  --fenster-kopf-rand: transparent;
  --fenster-zu-hover: rgba(255, 255, 255, .14);
  --fenster-titel-groesse: 17px;
  --fenster-titel-gewicht: 600;
  --fenster-schrift: 14px;
  --fenster-radius: var(--radius, 10px);
  --fenster-flaeche: var(--surface, #fff);
  --fenster-rand: var(--border, #dfe3ea);
  --fenster-leiste: var(--surface-2, #f5f7fa);
  --fenster-schatten: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, .28));
  --fenster-hinten: rgba(0, 33, 71, .55);
}

dialog.fenster {
  padding: 0; border: 0; background: transparent; color: var(--text, inherit);
  width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  overflow: visible;
}
dialog.fenster[open] { animation: fensterAuf .14s ease; }
dialog.fenster::backdrop { background: var(--fenster-hinten); animation: fensterGrau .12s ease; }
/* Größen mit dem Gewicht von `dialog.fenster` — vorher schlug dessen Vorgabe
   (560px) jede Größenklasse, und JEDES Fenster war gleich schmal. Dieselben
   Stufen gelten für das ältere `.modal__dialog` (app.css). */
dialog.fenster--sm { width: 440px; }
dialog.fenster--md { width: 640px; }
dialog.fenster--lg { width: 920px; }
dialog.fenster--xl { width: min(1360px, calc(100vw - 32px)); }
dialog.fenster--voll { width: calc(100vw - 32px); height: calc(100vh - 32px); }
dialog.fenster--hoch { height: min(860px, calc(100vh - 32px)); }

.fenster__kasten {
  display: flex; flex-direction: column; height: 100%; max-height: calc(100vh - 32px);
  background: var(--fenster-flaeche); border: 1px solid var(--fenster-rand);
  border-radius: var(--fenster-radius); box-shadow: var(--fenster-schatten); overflow: hidden;
}
.fenster__kopf {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 20px; min-height: 58px;
  background: var(--fenster-kopf-bg); color: var(--fenster-kopf-text);
  border-bottom: 1px solid var(--fenster-kopf-rand);
}
.fenster__ico { flex: none; display: inline-flex; align-items: center; }
.fenster__ico svg { width: 20px; height: 20px; }
.fenster__ico[hidden] { display: none; }
.fenster__titelblock { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fenster__ober { font-size: 12px; line-height: 1.2; color: var(--fenster-kopf-text-2); }
.fenster__ober[hidden] { display: none; }
.fenster__titel {
  margin: 0; font-size: var(--fenster-titel-groesse); font-weight: var(--fenster-titel-gewicht);
  line-height: 1.3; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fenster__kopf-rechts { flex: none; display: flex; align-items: center; gap: 8px; }
.fenster__kopf-rechts:empty { display: none; }
.fenster__kopf .btn-ghost { color: var(--fenster-kopf-text); border-color: currentColor; background: transparent; }
.fenster__kopf .btn-ghost:hover { background: var(--fenster-zu-hover); }
.fenster__zu {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--fenster-kopf-text-2); cursor: pointer;
}
.fenster__zu:hover, .fenster__zu:focus-visible { background: var(--fenster-zu-hover); color: var(--fenster-kopf-text); }
.fenster__zu[hidden] { display: none; }

.fenster__leiste {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 20px; background: var(--fenster-leiste); border-bottom: 1px solid var(--fenster-rand);
}
.fenster__inhalt { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; font-size: var(--fenster-schrift); }
.fenster__inhalt--bundig { padding: 0; }
/* Rumpf, der eine Seite zeigt (Druckvorschau, Auftrag im Chat). */
.fenster__inhalt--rahmen { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.fenster__inhalt--rahmen > iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }
.fenster__inhalt--rahmen > [role=status] { flex: none; margin: 0; padding: 10px 20px; }
.fenster__inhalt--rahmen > [role=status][hidden] { display: none; }
.fenster__fuss {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--fenster-rand); background: var(--fenster-flaeche);
}
.fenster__fuss-links { margin-right: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fenster__leiste[hidden], .fenster__fuss[hidden] { display: none; }
/* Ein <form> zwischen Kasten und Teilen reicht die Flex-Spalte weiter. */
.fenster__kasten > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.fenster__frage { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.fenster__eingabe { display: block; width: 100%; margin-top: 10px; }

html.fenster-offen { overflow: hidden; }

/* Meldungen als Popover (fenster.js): Lage und Aussehen bleiben die von toastr —
   die Vorgaben des Browsers fuer Popover (mittig, Rahmen, Hintergrund) nicht. */
#toast-container[popover] {
  inset: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  overflow: visible; width: auto; height: auto;
}
#toast-container[popover].toast-bottom-right { right: 12px; bottom: 12px; }
#toast-container[popover].toast-top-right { right: 12px; top: 12px; }

/* Das ältere `.modal` in der obersten Ebene (fenster.js → Popover): die Vorgaben
   des Browsers für Popover (Größe nach Inhalt, Rahmen, eigene Schriftfarbe)
   dürfen es nicht verformen — es bleibt die ganzflächige, graue Bühne. */
.modal[popover] {
  inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; border: 0; overflow: visible; color: inherit;
}

/* Umgestellte Dialoge behalten ihre alte Klasse für den Inhalt. Deren Rahmen-
   regeln (Innenabstand, Rand, Kopf, display:flex) dürfen das Fenster nicht mehr
   formen — daher hier bewusst die höhere Spezifität. */
dialog.fenster.fenster { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
dialog.fenster.fenster[open] { display: block; }
dialog.fenster.fenster::backdrop { background: var(--fenster-hinten); }
dialog.fenster .fenster__kopf .fenster__titel {
  display: block; margin: 0; font-size: var(--fenster-titel-groesse); font-weight: var(--fenster-titel-gewicht);
  line-height: 1.3; color: inherit; letter-spacing: normal; text-transform: none;
}
dialog.fenster .fenster__kopf .fenster__ico svg { width: 20px; height: 20px; }
dialog.fenster .fenster__kopf .fenster__zu svg { width: 20px; height: 20px; }
dialog.fenster .fenster__kopf .fenster__zu { font-size: 0; }

/* ── Bedienelemente im Fenster ────────────────────────────────────────────
   Die Verwaltung stylt .btn und .input in app.css; das Kundenportal kennt sie
   nicht (dort heissen sie .knopf/.eingabe) — ein Fenster sah dort aus wie ein
   Formular von 1998. Deshalb hier derselbe Satz, mit :where() ohne eigenes
   Gewicht: in der Verwaltung gewinnt weiter app.css (lädt danach), im Portal
   greift dieser. Select2 braucht das Gewicht, um dessen Grundblatt zu schlagen. */
:where(dialog.fenster) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 10px 20px; min-height: var(--control-h, 42px); text-decoration: none;
  border-radius: var(--radius-sm, 8px); border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
:where(dialog.fenster) .btn:disabled { opacity: .5; cursor: not-allowed; }
:where(dialog.fenster) .btn svg { width: 15px; height: 15px; flex: none; }
:where(dialog.fenster) .btn-primary { background: var(--brand-500, #46b972); border-color: var(--brand-500, #46b972); color: var(--navy, #002147); }
:where(dialog.fenster) .btn-primary:hover:not(:disabled) { background: var(--brand-600, #2f7f5c); border-color: var(--brand-600, #2f7f5c); color: #fff; }
:where(dialog.fenster) .btn-ghost { background: var(--surface, #fff); color: var(--navy, #002147); border-color: var(--border, #dde3ec); }
:where(dialog.fenster) .btn-ghost:hover:not(:disabled) { background: var(--navy, #002147); border-color: var(--navy, #002147); color: #fff; }
:where(dialog.fenster) .btn-danger { background: var(--danger, #c1443f); border-color: var(--danger, #c1443f); color: #fff; }
:where(dialog.fenster) .btn-sm { padding: 7px 16px; font-size: 12.5px; min-height: 34px; }
:where(dialog.fenster) .input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: var(--text, #17263a);
  background: var(--surface, #fff); border: 1px solid var(--border, #dde3ec); border-radius: var(--radius-sm, 8px);
  padding: 10px 13px; outline: none; transition: border-color .12s, box-shadow .12s;
}
:where(dialog.fenster) input.input, :where(dialog.fenster) select.input { height: var(--control-h, 42px); }
:where(dialog.fenster) .input:focus { border-color: var(--brand-500, #46b972); box-shadow: 0 0 0 3px rgba(70, 185, 114, .25); }
:where(dialog.fenster) .input::placeholder { color: var(--text-3, #8fa3ba); }
dialog.fenster .select2-container--default .select2-selection--single {
  height: var(--control-h, 42px); display: flex; align-items: center;
  border: 1px solid var(--border, #dde3ec); border-radius: var(--radius-sm, 8px); background: var(--surface, #fff);
}
dialog.fenster .select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1; min-width: 0; padding: 0 32px 0 13px; font-size: 14px; line-height: 1.4; color: var(--text, #17263a);
}
dialog.fenster .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-3, #8fa3ba); }
dialog.fenster .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }
dialog.fenster .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; right: 0; margin: 0 30px 0 0; color: var(--text-3, #8fa3ba); }
dialog.fenster .select2-container--open .select2-selection--single,
dialog.fenster .select2-container--focus .select2-selection--single { border-color: var(--brand-500, #46b972); }
dialog.fenster .select2-dropdown { border-color: var(--border, #dde3ec); border-radius: var(--radius-sm, 8px); overflow: hidden; font-size: 14px; }
dialog.fenster .select2-search--dropdown .select2-search__field { height: 36px; padding: 6px 10px; border: 1px solid var(--border, #dde3ec); border-radius: 6px; font: inherit; font-size: 14px; }
dialog.fenster .select2-results__option--highlighted[aria-selected],
dialog.fenster .select2-results__option--highlighted.select2-results__option--selectable { background: var(--brand-50, #eaf6ef); color: var(--text, #17263a); }

@media (max-width: 640px) {
  dialog.fenster:not(.fenster--sm) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  dialog.fenster:not(.fenster--sm) .fenster__kasten { max-height: none; border-radius: 0; border: 0; }
  .fenster__inhalt { padding: 16px; }
}
@keyframes fensterAuf { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fensterGrau { from { opacity: 0; } to { opacity: 1; } }
@media print { dialog.fenster::backdrop { background: none; } }