:root {
  --bg: #faf7f2; --paper: #fff; --ink: #1a1d24; --ink-light: #5c6370;
  --line: #d8d2c4; --accent: #2d5a4f; --hilite: #f2e9d8;
  --red: #a8412c; --red-bg: #fdf8f7; --red-line: #e8c4bc;
  --green: #4a7a4e; --yellow: #b56b2e;
  --green-bg: #edf4f1; --green-line: #b5d5c9;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'IBM Plex Sans', system-ui; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; margin: 0 auto; padding: 28px 20px 64px; flex: 1; }

.breadcrumb { font-size: 12px; color: var(--ink-light); margin-bottom: 28px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.card { background: var(--paper); border: 1px solid var(--line); padding: 24px 28px; margin-bottom: 20px; }
.card-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
  padding: 7px 9px; border: 1px solid var(--line); background: var(--bg);
  font-family: 'IBM Plex Sans', system-ui; font-size: 13px; color: var(--ink);
  outline: none; transition: border-color .15s; width: 100%;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus { border-color: var(--accent); }

.input-wrap { display: flex; align-items: stretch; }
.input-wrap input { flex: 1; }
.input-suffix {
  padding: 7px 9px; background: var(--hilite); border: 1px solid var(--line); border-left: none;
  font-size: 12px; color: var(--ink-light); display: flex; align-items: center; white-space: nowrap;
}

.btn {
  padding: 10px 22px; background: var(--accent); color: #fff; border: none;
  font-family: 'IBM Plex Sans', system-ui; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: opacity .15s; display: inline-block; text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary {
  padding: 10px 22px; background: none; color: var(--accent);
  border: 1px solid var(--accent); font-family: 'IBM Plex Sans', system-ui;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
  text-decoration: none; display: inline-block;
  white-space: nowrap;
  text-align: center;
}
.btn-secondary:hover { background: var(--accent); color: #fff; }

.actions, .actions-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.msg { padding: 10px 14px; font-size: 13px; margin-bottom: 20px; display: none; }
.msg.error   { background: var(--red-bg);   border: 1px solid var(--red-line);   color: var(--red); }
.msg.success { background: var(--green-bg); border: 1px solid var(--green-line); color: var(--accent); }

.toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--line); border-radius: 22px; cursor: pointer; transition: background .2s; }
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: none;
  font-size: 14px; color: var(--ink-light); cursor: pointer;
  vertical-align: middle; margin-left: 4px; position: relative; top: -1px;
  transition: color .15s;
}
.help-btn:hover, .help-btn.active { color: var(--accent); }
.help-btn:hover i::before, .help-btn.active i::before { content: "\f430"; }

/* ── Page Header ───────────────────────────────────────── */
.page-header { margin-bottom: 32px; }
.page-header h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.page-header h1 .acc { color: var(--accent); font-style: italic; }
.page-header p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--ink-light);
  font-size: 14px;
  margin-top: 4px;
}

/* ── Danger variants ───────────────────────────────────── */
.btn-danger {
  padding: 10px 22px; background: var(--red); color: #fff; border: none;
  font-family: 'IBM Plex Sans', system-ui; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: opacity .15s; display: inline-block; text-decoration: none;
}
.btn-danger:hover { opacity: .88; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.card-danger { border-color: var(--red-line); background: var(--red-bg); }

/* ── Colored dot ───────────────────────────────────────── */
.dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
  background: var(--c); flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 5px var(--c-line);
}
.dot.g { --c: var(--green); --c-bg: var(--green-bg); --c-line: var(--green-line); }
.dot.y { --c: var(--yellow); --c-bg: #faf3ea; --c-line: #e8d2b5; }
.dot.r { --c: var(--red);   --c-bg: var(--red-bg);  --c-line: var(--red-line); }

/* ── Help-all toggle button ────────────────────────────── */
.btn-help-all, .btn-help-toggle {
  font-size: 11px; color: var(--ink-light); background: none; border: 1px solid var(--line);
  padding: 4px 10px; cursor: pointer; font-family: 'IBM Plex Sans', system-ui;
  transition: border-color .15s, color .15s; white-space: nowrap;
}
.btn-help-all:hover, .btn-help-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Navigation ────────────────────────────────────────── */
.testbanner {
  position: fixed; top: 0; left: 0; right: 0; height: 22px;
  background: #e8a317; color: #fff;
  font-family: 'IBM Plex Sans', system-ui; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 52px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; z-index: 100;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 20px;
  text-decoration: none; color: var(--ink); 
  font-family: 'Fraunces', serif;
  font-weight: 500; 
  font-size: 17px; 
  letter-spacing: -0.01em; 
  flex-shrink: 0;
}
.nav-brand img { display: block; height: 12px; width: auto; }
.nav-brand:hover { color: var(--accent); }
.nav-items { display: flex; align-items: stretch; height: 100%; }
.nav-item {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--ink-light); font-size: 13px; font-family: 'IBM Plex Sans', system-ui;
  font-weight: 500; padding: 0 16px; border-left: 1px solid var(--line);
  transition: color .15s, background .15s; white-space: nowrap;
}
.nav-item:hover { color: var(--ink); background: var(--hilite); }
.nav-item.active { color: var(--accent); }
.nav-item.active svg { stroke: var(--accent); }
.nav-item svg { flex-shrink: 0; stroke: var(--ink-light); transition: stroke .15s; }
.nav-item:hover svg { stroke: var(--ink); }
.nav-depot-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.nav-depot-none { color: var(--line); font-style: italic; }

.subnav {
  position: fixed; top: 52px; left: 0; right: 0; height: 40px;
  background: var(--hilite); border-bottom: 1px solid var(--line);
  display: flex; justify-content: center; padding: 0 8px; z-index: 99;
}
.subnav-item {
  display: flex; align-items: center; padding: 0 12px; text-decoration: none;
  color: var(--ink-light); font-size: 12px; font-family: 'IBM Plex Sans', system-ui;
  font-weight: 600; letter-spacing: 0.02em; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.subnav-item:hover { color: var(--ink); }
.subnav-item.active { color: var(--accent); border-bottom-color: var(--accent); }

.subnav-mehr {
  display: none; flex-shrink: 0; align-items: center; height: 100%; padding: 0 12px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-light); font-size: 12px; font-family: 'IBM Plex Sans', system-ui;
  font-weight: 600; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.subnav-mehr:hover { color: var(--ink); }
.subnav-mehr.open  { color: var(--accent); }
.subnav-mehr.has-active { color: var(--accent); border-bottom-color: var(--accent); }

.subnav-mehr-panel {
  position: fixed; display: none;
  background: var(--paper); border: 1px solid var(--line);
  min-width: 160px; z-index: 98;
}
.subnav-mehr-panel.open { display: block; }
.subnav-mehr-panel > .subnav-item {
  display: flex; width: 100%; padding: 0 16px; height: 38px;
  border-bottom: 1px solid var(--hilite);
}
.subnav-mehr-panel > .subnav-item:last-child { border-bottom: none; }
.subnav-mehr-panel > .subnav-item.active { color: var(--accent); border-bottom-color: var(--hilite); }
.subnav-mehr-panel > .subnav-item:hover   { color: var(--ink); background: var(--hilite); }

.nav-spacer { height: 52px; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line); background: var(--paper);
  padding: 14px 20px; text-align: center; font-size: 11px;
  color: var(--ink-light); font-family: 'IBM Plex Sans', system-ui;
}
.site-footer a { color: var(--ink-light); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 520px) { .nav-brand span { display: none; } }
@media (max-width: 480px) {
  .wrap { padding: 20px 12px 48px; }
  .card { padding: 16px 12px; }
}

/* ── INFO-DUMMY ─────────────────────────────────────────────── */
/*
  Die folgenden CSS-Klassen dienen als Marker für die JS-Funktion, die die Buttons auf gleiche min-width angleicht, damit sie optisch einheitlich aussehen. Sie haben selbst keine Styles.

  alle Buttons dieser Gruppe werden per js mit gleicher min-width versehen, damit sie optisch einheitlich aussehen.
  .groupbtn {
    background-color: #4a7a4e !important; 
  }

  alle Buttons der Gruppen auf der gesamten Seite werden per js mit gleicher min-width versehen, damit sie optisch einheitlich aussehen.
  .sitebtn {
    background-color: #c62121 !important;  
  }
*/