/* Fenster, Menues, Knoepfe und Bedienelemente im klassischen Stil */

/* ---------- Fensterrahmen ---------- */

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px;
  background: var(--grau);
  box-shadow: var(--bevel-erhoben);
  color: var(--text);
}
.win.dialog { padding: 1px; }
.win.min { display: none; }
.win.max {
  left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  padding: 0; box-shadow: none;
}
.win-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: calc(18px * var(--tb-skala));
  padding: calc(2px * var(--tb-skala)) 2px calc(2px * var(--tb-skala)) 3px;
  background: var(--titel-verlauf);
  color: var(--weiss);
  font-weight: bold;
  white-space: nowrap;
  touch-action: none;
}
.win:not(.active) .win-titlebar { background: var(--titel-inaktiv); color: var(--grau); }
.win.flash .win-titlebar { background: var(--titel-inaktiv); color: var(--grau); }
.win.flash.active .win-titlebar { background: var(--titel-verlauf); color: var(--weiss); }
.win-ico { flex: none; width: 16px; height: 16px; margin-right: 1px; }
.win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win-btns { flex: none; display: flex; gap: 0; }
.win-btn {
  position: relative;
  display: block;
  width: calc(16px * var(--tb-skala));
  height: calc(14px * var(--tb-skala));
  padding: 0;
  border: 0;
  background: var(--grau);
  box-shadow: var(--bevel-erhoben);
  color: var(--schwarz);
  cursor: default;
}
.win-btn + .win-btn { margin-left: 0; }
.win-btn.close { margin-left: 2px; }
.win-btn svg { display: block; width: 100%; height: 100%; fill: currentColor; shape-rendering: crispEdges; }
.win-btn:active { box-shadow: var(--bevel-gedrueckt); }
.win-btn:active svg { transform: translate(1px, 1px); }
.win-btn::after { content: ""; position: absolute; inset: -4px -1px; }   /* groessere Trefferflaeche */
.win-btn:disabled { color: var(--grau-dunkel); }
.win-btn:disabled svg { filter: drop-shadow(1px 1px 0 var(--weiss)); }
.win-btn:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -4px; }

.win-menu { flex: none; }
.win-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.win:focus { outline: none; }

/* Groesse aendern: acht unsichtbare Griffe */
.rh { position: absolute; z-index: 3; touch-action: none; }
.rh-n { top: 0; left: 8px; right: 8px; height: 4px; cursor: ns-resize; }
.rh-s { bottom: 0; left: 8px; right: 8px; height: 4px; cursor: ns-resize; }
.rh-w { left: 0; top: 8px; bottom: 8px; width: 4px; cursor: ew-resize; }
.rh-e { right: 0; top: 8px; bottom: 8px; width: 4px; cursor: ew-resize; }
.rh-nw { left: 0; top: 0; width: 8px; height: 8px; cursor: nwse-resize; }
.rh-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.rh-ne { right: 0; top: 0; width: 8px; height: 8px; cursor: nesw-resize; }
.rh-sw { left: 0; bottom: 0; width: 8px; height: 8px; cursor: nesw-resize; }
.win.max .rh, .win.dialog .rh, .win.fixed .rh { display: none; }

/* Statusleiste mit Griff */
.statusbar { flex: none; display: flex; gap: 2px; padding: 2px 0 0; min-height: 22px; }
.sb-cell {
  min-width: 0; padding: 2px 4px 1px; box-shadow: var(--bevel-flach-hinein);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.sb-cell.fill { flex: 1; }
.sb-grip { flex: none; width: 13px; align-self: flex-end; height: 13px; margin-left: 1px; }
.sb-grip svg { display: block; shape-rendering: crispEdges; }

/* ---------- Ebene fuer modale Dialoge ---------- */

#modals { position: fixed; inset: 0; z-index: 800; pointer-events: none; }
#modals.active { pointer-events: auto; }
#modals.dim::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(0,0,0,.45) 0% 25%, transparent 0% 50%) 0 0 / 2px 2px; }
#modals .win { pointer-events: auto; }

/* ---------- Dialoginhalt ---------- */

.dlg { padding: 12px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.dlg-row { display: flex; gap: 14px; align-items: flex-start; }
.dlg-row > img { flex: none; width: 32px; height: 32px; }
.dlg-text { min-width: 0; padding-top: 2px; line-height: 1.35; white-space: pre-line; user-select: text; -webkit-user-select: text; }
.dlg-buttons { display: flex; justify-content: center; gap: 6px; padding: 12px; flex-wrap: wrap; }
.dlg-buttons.right { justify-content: flex-end; }

/* ---------- Knoepfe ---------- */

.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 75px; height: 23px; padding: 0 8px; margin: 0;
  border: 0; border-radius: 0;
  background: var(--grau); color: var(--text);
  box-shadow: var(--bevel-erhoben);
  font: 11px var(--schrift);
  white-space: nowrap;
  cursor: default;
}
.btn.default { box-shadow: 0 0 0 1px var(--schwarz), var(--bevel-erhoben); margin: 1px; }
.btn:active:not(:disabled) { box-shadow: var(--bevel-gedrueckt); padding: 2px 7px 0 9px; }
.btn.default:active:not(:disabled) { box-shadow: 0 0 0 1px var(--schwarz), var(--bevel-gedrueckt); }
.btn:focus { outline: 1px dotted var(--schwarz); outline-offset: -5px; }
.btn:disabled { color: var(--grau-dunkel); text-shadow: 1px 1px 0 var(--weiss); }

/* ---------- Felder ---------- */

.field, .win select, .win input[type="text"], .win textarea.field {
  -webkit-appearance: none; appearance: none;
  height: 21px; margin: 0; padding: 2px 4px; border: 0; border-radius: 0;
  background-color: var(--weiss); color: var(--text);
  box-shadow: var(--bevel-feld);
  font: 11px var(--schrift);
  user-select: text; -webkit-user-select: text;
  cursor: text;
}
.win select {
  padding-right: 20px; cursor: default;
  background-image: var(--pfeil-auswahl); background-repeat: no-repeat; background-position: right 2px center; background-size: 16px 17px;
  user-select: none; -webkit-user-select: none;
}
.win select:disabled { color: var(--grau-dunkel); }
.field:focus, .win input[type="text"]:focus { outline: none; }

.chk, .rad { display: inline-flex; align-items: center; gap: 6px; min-height: 18px; cursor: default; }
.chk input, .rad input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 13px; height: 13px; margin: 0; background: var(--weiss); box-shadow: var(--bevel-feld);
  background-position: center; background-repeat: no-repeat;
}
.chk input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v2H6zM5 2h1v2H5zM4 4h1v1H4zM0 2h1v3H0zM1 3h1v3H1zM2 4h1v3H2zM3 5h1v1H3z'/%3E%3C/svg%3E"); }
.rad input { border-radius: 50%; border: 1px solid; border-color: var(--grau-dunkel) var(--weiss) var(--weiss) var(--grau-dunkel); box-shadow: inset 1px 1px 0 var(--schwarz), inset -1px -1px 0 var(--grau-hell); }
.rad input:checked { background-image: radial-gradient(circle, var(--schwarz) 0 2px, transparent 2.5px); }
.chk input:focus-visible, .rad input:focus-visible { outline: none; }
.chk:has(input:focus-visible) span, .rad:has(input:focus-visible) span { outline: 1px dotted var(--schwarz); }
.chk input:disabled + span, .rad input:disabled + span { color: var(--grau-dunkel); text-shadow: 1px 1px 0 var(--weiss); }

fieldset.gruppe {
  margin: 0; padding: 6px 10px 8px; min-width: 0;
  border: 1px solid var(--grau-dunkel); box-shadow: 1px 1px 0 var(--weiss), inset 1px 1px 0 var(--weiss);
}
fieldset.gruppe > legend { padding: 0 3px; }

.etched { height: 2px; border: 0; border-top: 1px solid var(--grau-dunkel); border-bottom: 1px solid var(--weiss); margin: 6px 0; }

.listbox:focus { outline: none; }
.listbox:focus .li.sel { outline: 1px dotted var(--weiss); outline-offset: -2px; }
.listbox { background: var(--weiss); box-shadow: var(--bevel-feld); overflow: auto; padding: 2px; }
.listbox .li { display: flex; align-items: center; gap: 4px; padding: 1px 3px; white-space: nowrap; }
.listbox .li.sel { background: var(--navy); color: var(--weiss); outline: 1px dotted var(--grau); outline-offset: -1px; }

/* ---------- Reiter ---------- */

.tabs { display: flex; padding-left: 2px; position: relative; z-index: 1; }
.tab {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
  margin: 2px 0 0; padding: 2px 8px 1px;
  background: var(--grau);
  box-shadow: inset 1px 1px 0 var(--weiss), inset -1px 0 0 var(--schwarz), inset -2px 0 0 var(--grau-dunkel);
  font: 11px var(--schrift); color: var(--text); cursor: default; height: 20px;
}
.tab[aria-selected="true"] {
  margin: 0 -2px -2px; padding: 4px 10px 2px; height: 24px; position: relative; z-index: 2;
}
.tab:focus-visible > span { outline: 1px dotted var(--schwarz); outline-offset: 1px; }
.tabpanel {
  position: relative; z-index: 0; padding: 10px;
  box-shadow: inset -1px -1px 0 var(--schwarz), inset 1px 1px 0 var(--weiss), inset -2px -2px 0 var(--grau-dunkel), inset 2px 2px 0 var(--grau-hell);
}

/* ---------- Menues ---------- */

.menubar { display: flex; align-items: stretch; padding: 1px 0; border-bottom: 1px solid var(--grau-dunkel); box-shadow: 0 1px 0 var(--weiss); margin-bottom: 1px; flex-wrap: wrap; }
.mb-item {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; background: transparent;
  margin: 0; padding: 2px 6px; height: 18px; font: 11px var(--schrift); color: var(--text); cursor: default;
  display: flex; align-items: center;
}
.mb-item:hover:not(.open) { box-shadow: var(--bevel-flach-heraus); }
.mb-item.open { box-shadow: var(--bevel-flach-hinein); padding: 3px 5px 1px 7px; }
.mb-item:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -3px; }

#menus { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.menu {
  position: fixed; pointer-events: auto;
  display: flex; flex-direction: row;
  min-width: 120px; padding: 2px;
  background: var(--grau); box-shadow: var(--bevel-erhoben);
  font: 11px var(--schrift); color: var(--text); white-space: nowrap;
}
.menu .mitems { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.menu .mi {
  position: relative; display: flex; align-items: center;
  height: 20px; padding: 0 4px 0 0; cursor: default;
}
.mi-gut { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; }
.mi-gut svg { fill: currentColor; shape-rendering: crispEdges; }
.mi-gut img { width: 16px; height: 16px; }
.mi-lab { flex: 1; padding-right: 22px; }
.mi-lab b { font-weight: bold; }
.mi-acc { padding-left: 16px; padding-right: 8px; }
.mi-arr { flex: none; width: 10px; display: flex; justify-content: center; }
.mi-arr svg { fill: currentColor; shape-rendering: crispEdges; }
.menu .mi.hot { background: var(--navy); color: var(--weiss); }
.menu .mi.off { color: var(--grau-dunkel); text-shadow: 1px 1px 0 var(--weiss); }
.menu .mi.off.hot { background: transparent; color: var(--grau-dunkel); }
.menu .msep { height: 2px; margin: 3px 1px; border-top: 1px solid var(--grau-dunkel); border-bottom: 1px solid var(--weiss); }

.menu.start { padding: 2px; }
.menu.start .mitems { display: flex; flex-direction: column; min-width: 150px; }
.menu.start .mi { height: 36px; font-size: 12px; }
.menu.start .mi-gut { width: 40px; }
.menu.start .mi-gut img { width: 32px; height: 32px; }
.menu.start .mi-lab { padding-right: 24px; }
.mband {
  flex: none; width: 24px; display: flex; align-items: flex-end; justify-content: flex-start;
  margin: 0 2px 0 0; padding: 4px 0;
  background: linear-gradient(0deg, var(--navy-hell), var(--navy));
  color: var(--weiss); writing-mode: vertical-rl; transform: rotate(180deg);
  font: 22px/24px Tahoma, Verdana, "Segoe UI", sans-serif; letter-spacing: 0.5px; white-space: nowrap;
}
.mband b { font-weight: bold; }
.mband span { font-weight: normal; opacity: .9; margin-block-end: 4px; }

/* ---------- Tooltip ---------- */

.tip {
  position: fixed; z-index: 1000; pointer-events: none;
  padding: 1px 3px 2px; background: var(--tip); color: var(--text);
  border: 1px solid var(--schwarz); font: 11px var(--schrift); white-space: nowrap;
}

/* ---------- Mobil: groessere Bedienflaechen ---------- */

@media (max-width: 699px) {
  .btn { height: 32px; min-width: 88px; font-size: 13px; }
  .field, .win select, .win input[type="text"] { height: 32px; font-size: 16px; }
  .menu .mi { height: 30px; font-size: 13px; }
  .menu.start .mi { height: 44px; font-size: 14px; }
  .mb-item { height: 26px; font-size: 13px; padding: 2px 8px; }
  .menu { font-size: 13px; }
  .tab { height: 28px; font-size: 13px; }
  .tab[aria-selected="true"] { height: 32px; }
  .chk input, .rad input { width: 18px; height: 18px; }
  .chk, .rad { min-height: 28px; font-size: 13px; }
  .dlg { font-size: 13px; }
}