@charset "UTF-8";

/* =========================================================
   0) Fonts
   ========================================================= */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url(pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url(pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url(pxiEyp8kv8JHgFVrJJfecnFHGPc.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   1) Base / Reset
   ========================================================= */
* { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

html, body {
  margin: auto;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 900px;
  text-align: center;
  font-size: 1em;
  font-family: Poppins, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  background-color: #ddf1fd;
}

/* =========================================================
   2) Layout: Header / Footer / Grundseiten
   ========================================================= */
h1 { text-align: center; }

p.hinweis { color: red; text-align: center; font-size: 0.9em; }
p.footer, #header { padding: 5px; margin: 10px 20px; text-align: center; font-size: 0.9em; }
#header img { width: 334px; }
#header p, #header h1 { padding: 0; margin: 0; }
#header h1 { padding: 10px 0; }
p.footer { margin: 20px 20px; }
p.footer a { color: #333; font-weight: bold; display: inline-block; margin-top: 5px; }
p a.dokument { color: #333; display: inline-block; margin: 5px 15px 10px 0; font-size: 0.9em; }
p.error { padding: 0 10px; color: #E41216; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; border-radius: 3px; font-weight: bold; }

/* =========================================================
   3) Login
   ========================================================= */
#login { width: 100%; max-width: 220px; margin: 40px auto; text-align: center; }
#login label { display: block; margin: 0; padding: 5px; }
#login input { width: 90%; background-color: #ddd; margin: 0 0 20px; text-align: center; }
#login input:hover { background-color: #fff; cursor: pointer; }

/* =========================================================
   4) Formular: allgemeine Felder / Inputs
   ========================================================= */
input, textarea, select {
  width: 100%;
  border: 1px solid #C9C8C8;
  padding: 5px;
  margin: 10px 0 0;
  font-size: 1em;
}
input#benutzername, input#passwort { width: 90%; background-color: #ddf1fd; }
select#typ { background-color: #ddf1fd; }
input[type="checkbox"] {
  background-color: #ddf1fd;
  accent-color: #ddf1fd;
  color: #fff;
  font-size: 2em;
  border: 1px solid #ddf1fd;
  cursor: pointer;
  user-select: none;
  width: 0.55em; height: 0.55em;
}

/* Date inputs – mittig */
input[type="date"] { text-align: center; text-align-last: center; width: 6em; }
input[type="date"]::-webkit-datetime-edit { text-align: center; }
input[type="date"]::-webkit-date-and-time-value { text-align: center; } /* Safari */

/* =========================================================
   5) Schablone / Form-Layout
   ========================================================= */
#schablone { width: 100%; max-width: 920px; margin: 10px auto; padding: 0; }
#schablone form { margin: 0; padding: 0; }
#schablone table { width: 90%; margin: 10px auto; padding: 0; max-width: 920px; }
#schablone table tr { margin: 0; padding: 0; }
#schablone table label { display: block; padding: 0; margin: 17px 10px 0; font-size: 0.9em; font-weight: bold; }
#schablone table input, #schablone table textarea, #schablone table select { max-width: 98%; padding: 5px; margin: 0; }
#schablone table .small { max-width: 240px; }
#schablone table select { background-color: #fff; }

/* Spezielle Absätze */
td.absatz { display: block; padding: 0 30px 10px; margin: 20px 0; background-color: #f5ede2; }
td.upload { margin: 0 0 10px; padding: 10px 20px 20px; }

/* =========================================================
   6) Uploader-Komponente
   ========================================================= */
.uploader {
  --accent: #43a047; --radius: 10px; --gap: 12px;
  display: grid; grid-template-columns: 1fr; gap: var(--gap);
  padding: 14px; margin: 6px 30px;
  border: 1px solid #eee; border-radius: var(--radius);
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.uploader .upload-title { font-weight: 600; margin-bottom: 6px; font-size: 0.9em; }
.uploader .upload-box {
  font-size: 0.9em; border: 2px dashed var(--accent); border-radius: var(--radius);
  padding: 24px; text-align: center; color: #555; background: #f9fbff; cursor: pointer; transition: .2s ease-in-out;
}
.uploader .upload-box:hover { background: #f3f8ff; }
.uploader .upload-box.dragover { background: #f0f8ff; border-color: #43a047; }
.uploader .actions { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.uploader button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.uploader button:disabled { opacity: .6; cursor: not-allowed; }
.uploader .muted { color: #777; font-size: .8rem; text-align: center; }
.uploader .progress-wrap { margin-top: 10px; display: none; }
.uploader .progress-row { display: flex; align-items: center; gap: 10px; }
.uploader progress { width: 100%; height: 14px; }
.uploader .status-line { display: flex; justify-content: space-between; margin-top: 4px; }
.uploader .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #ccc; border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.uploader .preview { display: grid; grid-template-columns: 1fr; gap: 12px; }
.uploader .card { border: 1px solid #eee; border-radius: 8px; padding: 10px; background: #fff; }
.uploader .card img { width: 100%; height: auto; display: inline-block; border-radius: 6px; }

/* 2-Spalten-Layout (optional via .layout-2col) */
@media (min-width: 800px) {
  .uploader.layout-2col {
    display: grid;
    grid-template-columns: minmax(320px, 42%) 1fr;
    grid-template-areas: "title title" "box preview";
    column-gap: 16px; row-gap: 12px; align-items: start;
  }
  .uploader.layout-2col .upload-title { grid-area: title; }
  .uploader.layout-2col .upload-box   { grid-area: box; }
  .uploader.layout-2col .preview      { grid-area: preview; }
  .uploader.layout-2col .preview img { max-width: 100%; height: auto; display: block; }
}
@media (min-width: 1200px) {
  .uploader.layout-2col { grid-template-columns: minmax(360px, 38%) 1fr; column-gap: 20px; }
}
/* kompakt */
.uploader.compact { padding: 10px; --gap: 10px; }
.uploader.compact .upload-box { padding: 18px; }
/* Dateifeld verstecken */
.uploader input[type=file] { display: none; }

/* =========================================================
   7) WYSIWYG-Toolbar
   ========================================================= */
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; justify-content: center; }
.toolbar button.wysiwyg { padding: .35rem .6rem; border: 1px solid #ccc; min-width: 5px; color: #000; background: #f8f8f8; border-radius: .5rem; cursor: pointer; }
.toolbar button.wysiwyg:hover { background: #eee; }
textarea { width: 100%; box-sizing: border-box; }
.hint { font-size: .9rem; color: #666; margin: .25rem 0 .75rem; }
.preview { border: 1px solid #ddd; padding: .75rem; border-radius: .5rem; background: #fff; text-align: left; }

/* =========================================================
   8) Navigation-Block
   ========================================================= */
#naviblock { text-align: center; }
#naviblock ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 auto; justify-content: center; max-width: 800px; }
#naviblock li {
  list-style: none; background-color: #fff; flex: 0 0 calc(33.333% - 14px);
  margin: 7px; padding: 10px;
}
#naviblock li a {
  color: #000; text-decoration: none; cursor: pointer;
  padding: 5px; width: 150px; margin: 5px;
}
#naviblock li:hover { background-color: #ddf1fd; }

@media (max-width: 700px) {
    #naviblock li {
        flex: 0 0 calc(50% - 22px);
    }
}

@media (max-width: 500px) {
    #naviblock li {
        flex: 0 0 calc(100% - 20px);
    }
    #naviblock li a {
       margin: 5px auto;
    }
}
/* =========================================================
   9) Tabellen & Listen
   ========================================================= */
table { border-spacing: 0; border-collapse: collapse; table-layout: fixed; margin: 0 auto; }
table table table { table-layout: auto; }

#protokolltabelle, #benutzertabelle, #sortable {
  background-color: #fff; margin: 10px auto; padding: 10px; text-align: left;
}
#protokolltabelle td, #protokolltabelle th,
#benutzertabelle td, #benutzertabelle th,
#sortable td, #sortable th { padding: 5px 10px; text-align: left; }
#protokolltabelle th, #benutzertabelle th, #sortable th { font-size: 0.9em; }
#protokolltabelle th.center, #benutzertabelle th.center, #sortable th.center,
#protokolltabelle td.center, #benutzertabelle td.center, #sortable td.center { text-align: center !important; }
#benutzertabelle a, #sortable a { color: #000; }
#benutzertabelle a:hover, #sortable a:hover { text-decoration: none; }
.pointer, #sortable thead th:hover { cursor: pointer; }

table.searchresult { background: #fff; border-color: #555; padding: 10px 15px; margin-bottom: 30px; border-radius: 7px; font-size: 0.9em; }
table.searchresult a { color: #0b8280; }
table.searchresult td { padding: 5px 15px; border-bottom: 1px dashed #455; }
table.searchresult th { padding: 5px 0; }

/* =========================================================
   10) Buttons
   ========================================================= */
:root {
  --btn-base: #f5ede2;
  --btn-accent: #e53935;
  --btn-accent-hover: #d32f2f;
  --btn-accent-active: #b71c1c;
  --btn-text-dark: #3a2b20;
  --btn-text-light: #fff;
  --btn-border: #f5c1bc;
  --btn-focus: #f28b82;
  --btn-disabled-bg: #e0d6cf;
  --btn-disabled-text: #8c7b75;
  --btn-radius: 12px;
  --btn-font-w: 600;
  --btn-shadow: 0 6px 14px rgba(0,0,0,.08);
  --btn-shadow-focus: 0 0 0 4px var(--btn-focus);
}

input[type="submit"], a.button {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; width: 300px; max-width: 100%;
  padding: 0 15px; margin: 10px;
  border-radius: var(--btn-radius); border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  font-weight: var(--btn-font-w); line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--btn-accent); color: var(--btn-text-light);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
#benutzertabelle a.button, #sortable a.button { color: #fff; }
input[type="submit"]:hover, a.button:hover { background: var(--btn-accent-hover); transform: translateY(-1px); }
input[type="submit"]:active, a.button:active { background: var(--btn-accent-active); transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,.10); }
input[type="submit"]:focus-visible, a.button:focus-visible { outline: none; box-shadow: var(--btn-shadow-focus); }
input[type="submit"][disabled], a.button[aria-disabled="true"] {
  background: var(--btn-disabled-bg); color: var(--btn-disabled-text); border-color: transparent;
  cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none;
}
/* Variante Soft/Ghost */
a.button--soft, input[type="submit"].button--soft { background: var(--btn-base); color: var(--btn-text-dark); border-color: var(--btn-border); }
a.button--soft:hover, input[type="submit"].button--soft:hover { background: #cfe8fb; }
/* Grün-Variante */
.button.btn-green, input[type="button"].btn-green {
  --btn-accent: #43a047; --btn-accent-hover: #388e3c; --btn-accent-active: #2e7d32;
  --btn-border: #c3e6c8; --btn-focus: #81c784;
}
/* Bewegungsarme Nutzer */
@media (prefers-reduced-motion: reduce) {
  input[type="button"], a.button { transition: none; }
}

/* =========================================================
   11) Gruppe-Form (grp-form) – “form-header”
   (ehem. <style>-Block sauber überführt)
   ========================================================= */
table .form-header td { padding: 10px 40px; background: #fafafa; }
table .form-header tr:nth-child(even) td { background: #f5f7fb; }
table .form-header label { display: block; font-weight: 600; margin-bottom: 6px; }
#schablone table .form-header label { margin-top: 7px; }

table .form-header input[type="text"],
table .form-header input[type="email"],
table .form-header input[type="tel"],
table .form-header select {
  width: 100%; max-width: 560px; padding: 10px 12px;
  border: 1px solid #d1d7e0; border-radius: 10px; background: #fff; outline: none;
}
table .form-header input.small { max-width: 280px; }
table .form-header { border: 1px solid #e6eaf0; border-radius: 12px; overflow: hidden; display: inline-block; max-width: 600px; margin: 10px auto; text-align:center; }

/* gezentert in grp-form */
table tbody.form-header.grp-form input[type="text"],
table tbody.form-header.grp-form input[type="email"],
table tbody.form-header.grp-form input[type="tel"] { display: block; margin: 0 auto; }

/* =========================================================
   12) Gruppe-Form (grp-form) – spezifische Felder & Grid
   ========================================================= */
.grp-form td { padding: 10px 12px; background: #fafafa; }
.grp-form tr:nth-child(even) td { background: #f5f7fb; }
.grp-form label { display: block; font-weight: 600; margin-bottom: 6px; }

.grp-form input[type="text"],
.grp-form input[type="email"],
.grp-form input[type="tel"],
.grp-form select {
  width: 100%; max-width: 560px; padding: 10px 12px;
  border: 1px solid #d1d7e0; border-radius: 10px; background: #fff; outline: none;
}
.grp-form input.small { max-width: 280px; }

/* Feldbreiten */
.grp-form input#title,
.grp-form input#strasse,
.grp-form input#telefon,
.grp-form input#email { max-width: 520px; }
.grp-form input#plz { max-width: 140px; }
.grp-form input#ort { max-width: 360px; }

/* 2-Spalten nur für explizite .row-2 Container */
.grp-form .row-2 { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: start; max-width: 520px; margin: 0 auto; }
.grp-form .row-2 .col label { margin-bottom: 6px; }
.grp-form .row-2 .col input { width: 100%; max-width: 100%; }

/* Mobile: falls nötig gleich lassen (identische Spaltenbreiten wie Original) */
@media (max-width: 900px) {
  .grp-form .row-2 { grid-template-columns: 140px 1fr; gap: 12px; }
}


/* =========================================================
   9b) Tabellen – Mobile- & Sortier-Verbesserungen (Addon)
   ========================================================= */
/* Klick-Hinweis + Pfeile über ARIA */
#sortable thead th,
table.js-sortable thead th {
  position: sticky; top: 0;
  background: #f7fbff; /* Header bleibt sichtbar */
  z-index: 2;
  user-select: none;
}
#sortable thead th.sortable,
table.js-sortable thead th.sortable {
  padding-right: 1.4em;
}
#sortable thead th.sortable .sort-indicator,
table.js-sortable thead th.sortable .sort-indicator {
  position: absolute; right: .5em; top: 50%; transform: translateY(-50%);
  font-size: .9em; opacity: .5;
}
#sortable thead th[aria-sort="ascending"] .sort-indicator,
table.js-sortable thead th[aria-sort="ascending"] .sort-indicator { content: "▲"; opacity: .9; }
#sortable thead th[aria-sort="descending"] .sort-indicator,
table.js-sortable thead th[aria-sort="descending"] .sort-indicator { content: "▼"; opacity: .9; }
#sortable thead th[aria-sort="none"] .sort-indicator,
table.js-sortable thead th[aria-sort="none"] .sort-indicator { content: "↕"; }

/* Hover/Focus für bessere Erkennbarkeit (Klickbar) */
#sortable thead th.sortable:hover,
table.js-sortable thead th.sortable:hover { background: #eef6ff; }
#sortable thead th.sortable:focus-visible,
table.js-sortable thead th.sortable:focus-visible {
  outline: 3px solid #81c784; outline-offset: 2px;
}

/* Zebra + zarte Zelltrennung */
#sortable tbody tr:nth-child(odd),
table.js-sortable tbody tr:nth-child(odd) { background: #fafcff; }
#sortable tbody td, #sortable thead th,
table.js-sortable tbody td, table.js-sortable thead th { border-bottom: 1px solid #eef2f7; }

/* Grössere Klickfläche am Header für Touch */
#sortable thead th, table.js-sortable thead th { min-height: 44px; line-height: 1.2; }

/* Responsives Tabellen-Layout: unter 700px Card-Ansicht */
@media (max-width: 700px) {
  #sortable, table.js-sortable { width: 100%; }
  #sortable thead, table.js-sortable thead { display: none; }
  #sortable tbody tr, table.js-sortable tbody tr {
    display: grid; grid-template-columns: 1fr; gap: 6px;
    background: #fff; margin: 10px 0; padding: 10px 12px; border: 1px solid #e6edf5; border-radius: 10px;
  }
  #sortable tbody td, table.js-sortable tbody td {
    display: grid; grid-template-columns: 140px 1fr; gap: 8px;
    padding: 4px 0; border: none;
  }
  #sortable tbody td::before, table.js-sortable tbody td::before {
    content: attr(data-label);
    font-weight: 600; color: #34495e;
  }
}

/* Leichte Schatten/Abstand wie bei .searchresult */
#sortable, table.js-sortable {
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border-radius: 8px;
}


/* =========================================================
   9c) Tabellen – Spacing-Finetuning (Sortierpfeile & Ränder)
   ========================================================= */
/* Mehr Abstand zwischen Header-Text und Pfeil */
#benutzertabelle thead th.sortable,
table.js-sortable thead th.sortable,
#sortable thead th.sortable {
  padding-right: 2.6em; /* vorher 1.4em */
  position: sticky; /* sicherstellen, dass bestehende Regel greift */
  top: 0;
}
#benutzertabelle thead th.sortable .sort-indicator,
table.js-sortable thead th.sortable .sort-indicator,
#sortable thead th.sortable .sort-indicator {
  right: 0.8em; /* etwas weiter nach aussen */
  font-size: 1.0em; /* leicht grösser für Klarheit */
  opacity: .7;
}

/* Mehr „Atemraum“ für die Tabelle */
#benutzertabelle,
table.js-sortable,
#sortable {
  border-radius: 10px;
  overflow: hidden; /* runde Ecken sichtbar halten */
  margin: 16px auto; /* etwas Aussenabstand */
}
#benutzertabelle th, #benutzertabelle td,
table.js-sortable th, table.js-sortable td,
#sortable th, #sortable td {
  padding: 10px 14px; /* grössere Innenabstände */
}

/* Mobile Card-Ansicht: ebenfalls etwas luftiger */
@media (max-width: 700px) {
  #benutzertabelle tbody tr,
  table.js-sortable tbody tr,
  #sortable tbody tr {
    padding: 12px 14px;
    gap: 8px;
  }
  #benutzertabelle tbody td,
  table.js-sortable tbody td,
  #sortable tbody td {
    grid-template-columns: 130px 1fr; /* etwas kompakteres Label */
    padding: 6px 0;
  }
}






/* Menü-Design */
  :root #menu{
    /* --bg:#0f172a; */
    --panel:#111827; --muted:#94a3b8; --text:#e5e7eb;
    --border:rgba(255,255,255,.08);
    --radius:14px; --shadow:0 12px 32px rgba(0,0,0,.35);
    --icon-bg:#fff; --icon-fg:#000;
    --icon-size:20px; --icon-btn:40px;
    --focus-color:#000; --focus-bg:#fff;
    --btn-font:14px;
  }
  *{box-sizing:border-box}
  body#menu{
    margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Inter,Roboto,Arial;
    /* color:var(--text); */
    background:radial-gradient(1200px 800px at 50% 10%,#0b1225 0%,var(--bg) 60%);
    display:grid;place-items:center;padding:24px;
  }
  .wrapper{
    /* width:min(980px,96vw);  */
    padding:18px 18px 26px;
    background:linear-gradient(180deg,#0b1225,#0d1630 70%);
    border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  }
  header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 4px 14px;border-bottom:1px dashed var(--border)}
  .title{font-weight:600;letter-spacing:.2px}
  .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content: center;}
  .link-btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:var(--btn-font); line-height:1; font-weight:500; font-family:inherit;
    background:#fff;color:#000;border:1px solid #000;
    padding:8px 12px;border-radius:10px;cursor:pointer;transition:.15s
  }
  .link-btn:hover{filter:brightness(.95)}
  .link-btn:active{transform:translateY(1px)}
  input[type="file"]{display:none}

  .tree{display:flex;flex-direction:column;gap:12px;padding:16px 6px 0}
  .node{position:relative;padding-left:22px}
  .node::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.06)}
  .node.root{padding-left:0}
  .node.root::before{display:none}
  .node-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

  .menu-btn{
    padding:10px 14px;
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    cursor:pointer;
    font-weight:500;
    transition:.15s ease;
  }
  .menu-btn:hover{border-color:rgba(255,255,255,.25);box-shadow:0 18px 48px rgba(255,255,255,.18)}
  .menu-btn:active{transform:translateY(1px)}
  .menu-btn.editing{background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.10));}

  .menu-btn:focus-visible,
  .icon-btn:focus-visible,
  .link-btn:focus-visible,
  .item:focus-visible,
  .menu-input:focus-visible{
    outline:3px solid var(--focus-color);
    outline-offset:3px;
    box-shadow:none;
    background-color:var(--focus-bg);
    color:#000;
  }

  .menu-input{
    width:100%;max-width:420px;background:#fff;color:#000;border:1px solid #000;
    border-radius:10px;padding:8px 10px;font:inherit;outline:none;
  }

  .node-tools{display:flex;gap:6px;align-items:center}
  .icon-btn{
    width:var(--icon-btn);height:var(--icon-btn);
    display:flex;align-items:center;justify-content:center;
    background:var(--icon-bg);color:var(--icon-fg);
    border:1px solid #000;border-radius:10px;cursor:pointer;transition:.15s;
  }
  .icon-btn:hover{filter:brightness(.9)}
  .icon-btn:active{transform:translateY(1px)}
  .icon-btn:disabled{opacity:.45;cursor:not-allowed}
  .icon-btn svg{width:var(--icon-size);height:var(--icon-size);stroke:var(--icon-fg);fill:none;stroke-width:2;display:block;margin:auto}

  .children{margin:10px 0 0 28px;display:flex;flex-direction:column;gap:10px}

  .dropdown{
    position:absolute;z-index:10;top:calc(100% + 8px);left:0;
    width:min(420px,92vw);background:#fff;color:#000;
    border:1px solid #000;border-radius:12px;
    box-shadow:var(--shadow);overflow:hidden;animation:fadeIn .12s ease-out;
  }
  @keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .list{max-height:340px;overflow:auto;scrollbar-width:thin}
  .item{
    width:100%; text-align:left; padding:12px 14px; background:#fff; color:#000;
    border:0; border-bottom:1px solid #000; cursor:pointer; transition:.12s
  }
  .item:last-child{border-bottom:0}
  .item:hover{background:#f3f3f3}

  .maxdepth-note{
    position:absolute;z-index:10;top:calc(100% + 8px);left:0;
    background:#fff;color:#000;border:1px solid #000;border-radius:10px;
    padding:10px 12px;box-shadow:var(--shadow);max-width:320px;
  }

  .hint{text-align:center;color:var(--muted);font-size:.9rem;margin-top:14px}
  @media (max-width:560px){.children{margin-left:18px}}

  /* --- Menü speichern Button --- */
.actions {
  margin-top: 20px; /* Abstand nach oben */
}

#saveMenuBtn {
  background-color: #d9534f; /* schönes Rot (Bootstrap-like) */
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease-in-out;
}

#saveMenuBtn:hover {
  background-color: #c9302c; /* dunkleres Rot bei Hover */
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

#saveMenuBtn:active {
  background-color: #ac2925;
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.dropdown .filterbar {
  display: flex;
  gap: 6px;
  padding: 6px 6px 4px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
}
.dropdown .filterbtn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  cursor: pointer;
  font-size: 12px;
}
.dropdown .filterbtn.active {
  background: #dbeafe;
  border-color: #93c5fd;
}
.dropdown .item .type-badge {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

 /* Menü-Design Ende */