/* Gemeinsame Grundgestaltung */
:root {
  --bg: #f3f4f6;
  --card: #ffffff;
  --text: #1a2129;
  --muted: #5b6570;
  --line: #d9dde2;
  --steel: #26323d;       /* Anthrazit */
  --accent: #e0661c;      /* Signalorange */
  --primary: #1d5ea8;
  --primary-dark: #164a85;
  --ok: #1e7d3a;
  --ok-bg: #e5f4e9;
  --warn: #9a5b00;
  --warn-bg: #fff3d9;
  --err: #b42318;
  --err-bg: #fde8e6;
  --info-bg: #e7f0fa;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.4; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.pos { color: var(--ok); }
.neg { color: var(--err); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 2px solid var(--line); background: #fff; border-radius: var(--radius);
  padding: .55em 1em; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--text);
}
.btn:hover { border-color: #b8bec6; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #8cb8ec; outline-offset: 1px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-danger { color: var(--err); border-color: #efb4ae; }
.btn-danger.btn-primary { background: var(--err); color: #fff; border-color: var(--err); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.badge { display: inline-block; padding: .1em .55em; border-radius: 999px; font-size: .85em; font-weight: 600; background: #eceef1; color: var(--steel); white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-info { background: var(--info-bg); color: var(--primary-dark); }

/* Dialog */
.dlg-wrap { position: fixed; inset: 0; background: rgba(20, 26, 33, .55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.dlg { background: #fff; border-radius: 14px; max-width: 460px; width: 100%; padding: 22px; box-shadow: 0 10px 40px rgba(0,0,0,.25); max-height: 92vh; overflow: auto; }
.dlg-wide { max-width: 760px; }
.dlg h2 { margin: 0 0 .6em; font-size: 1.3em; }
.dlg-body p { margin: 0 0 .8em; }
.dlg-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.warn-text { background: var(--warn-bg); border-left: 5px solid var(--accent); padding: 12px 14px; border-radius: 6px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; transition: .25s; z-index: 200;
  padding: 14px 22px; border-radius: 12px; font-weight: 600; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok { background: var(--ok); }
.toast-err { background: var(--err); }

.field { display: block; margin: 0 0 14px; }
.field > span { display: block; font-weight: 600; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: .6em .7em; border: 2px solid var(--line); border-radius: 8px; background: #fff;
}
.check { display: flex; gap: .5em; align-items: center; font-weight: 600; margin: 0 0 14px; }
.check input { width: 1.3em; height: 1.3em; }
.err-msg { color: var(--err); font-weight: 600; min-height: 1.2em; }