/* =========================
   HEADER + MENÜS (navigation.php + menu.php kompatibel)
   ========================= */

/* Header Shell */
.site-header{
  position:sticky;
  top:0;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;

  padding:0 1.25rem;
  height:58px;

  background:linear-gradient(120deg, rgba(22,163,74,.96), rgba(21,128,61,.94));
  color:#f9fafb;

  border-bottom:1px solid rgba(34,197,94,.55);
  backdrop-filter:saturate(1.15) blur(12px);
  -webkit-backdrop-filter:saturate(1.15) blur(12px);
  box-shadow:0 8px 24px rgba(22,163,74,.35);
}

/* animierte Unterstreichungs-Leiste */
.site-header::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  /* Gradient etwas breiter anlegen */
  background:linear-gradient(
    90deg,
    rgba(34,197,94,.95) 0%,
    rgba(190,242,100,.9) 50%,
    rgba(34,197,94,.95) 100%
  );
  background-size:200% 100%;
  opacity:.9;
  animation:site-header-gradient 6s linear infinite;
}

@keyframes site-header-gradient{
  0%{
    background-position:0% 0;
  }
  100%{
    background-position:200% 0;
  }
}

/* Branding */
.brand-link{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:inherit;
}

.brand-link img.logo{
  height:32px;
  width:auto;
  display:block;
  border-radius:10px;
}

.brand-text{
  font-weight:700;
  color:#f9fafb;
  font-size:1.05rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Rechts (Notification + Logout) */
.site-header .right-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  flex:0 0 auto;
  min-width:0;
}

.site-header .right-side > *{
  flex:0 0 auto;
}

/* Logout Button */
.logout.logout-red{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#dc2626;
  color:#fff !important;
  padding:.45rem .95rem;
  border-radius:.55rem;
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  width:auto;
  cursor:pointer;
  overflow:hidden;

  box-shadow:0 8px 18px rgba(220,38,38,.3);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .18s ease;
}

/* leichter Hover-Lift + Glow */
.logout.logout-red:hover{
  background:#b91c1c;
  text-decoration:none;
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 14px 30px rgba(185,28,28,.38);
}

/* Click-Animation: kurzer Pop */
.logout.logout-red:active{
  animation:logout-press .18s ease-out;
}

/* kleiner „Wave“-Highlight beim Klicken (optional) */
.logout.logout-red::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.35) 0, transparent 55%);
  opacity:0;
  transform:scale(0.4);
  pointer-events:none;
}

.logout.logout-red:active::after{
  animation:logout-wave .28s ease-out;
}

/* Keyframes */
@keyframes logout-press{
  0%{
    transform:translateY(0) scale(1);
    box-shadow:0 8px 18px rgba(220,38,38,.3);
  }
  50%{
    transform:translateY(1px) scale(.96);
    box-shadow:0 4px 10px rgba(220,38,38,.24);
  }
  100%{
    transform:translateY(0) scale(1.02);
    box-shadow:0 12px 26px rgba(185,28,28,.32);
  }
}

@keyframes logout-wave{
  0%{
    opacity:.6;
    transform:scale(0.4);
  }
  100%{
    opacity:0;
    transform:scale(1.6);
  }
}

/* =========================
   MENÜ – GEMEINSAME BASIS
   ========================= */

/* navigation.php Container */
.main-nav{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}

/* menu.php UL kann auch direkt im Header stehen → gleiche Optik */
.site-header ul.mainmenu{
  list-style:none;
  margin:0;
  padding:0;
}

/* Wenn menu.php Menü in der Mitte ist: als flex wie nav */
.site-header > ul.mainmenu,
.site-header .main-nav > ul.mainmenu{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Li Basis */
.site-header ul.mainmenu > li{
  position:relative;
  margin:0;
  padding:0;
}

/* =========================
   TOP-LEVEL LINKS – BEIDE SYSTEME
   ========================= */

/* navigation.php top links + dropdown trigger */
.main-nav > a,
.main-nav .dropdown > a,

/* menu.php top links */
.site-header ul.mainmenu > li > a,
.site-header ul.mainmenu > li > span{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  color:#e5e7eb;

  padding:.4rem .75rem;
  border-radius:.35rem;

  font-weight:500;
  font-size:.95rem;
  line-height:1;

  transition:color .2s ease, transform .15s ease, background .18s ease;
}

/* Unterstreichungs-Indicator (für Links) */
.main-nav > a::after,
.main-nav .dropdown > a::after,
.site-header ul.mainmenu > li > a::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-4px;
  height:2px;

  border-radius:999px;
  background:linear-gradient(90deg, #bbf7d0, #facc15);

  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

/* Hover */
.main-nav > a:hover,
.main-nav .dropdown > a:hover,
.site-header ul.mainmenu > li > a:hover{
  color:#ffffff;
  background:rgba(15,23,42,.24);
  transform:translateY(-1px);
}

.main-nav > a:hover::after,
.main-nav .dropdown > a:hover::after,
.main-nav > a.active::after,
.site-header ul.mainmenu > li > a:hover::after{
  transform:scaleX(1);
  opacity:1;
}

/* Active aus navigation.php */
.main-nav > a.active,
.main-nav .dropdown > a.active{
  color:#2a9113;
  background: #e5e7eb;
}

/* =========================
   DROPDOWN – navigation.php (div.dropdown + .dropdown-content)
   ========================= */

.dropdown{ position:relative; }

.dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:150%;
  height:12px;
}

.dropdown-content{
  display:block;
  visibility:hidden;
  pointer-events:none;

  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 10px) scale(.985);

  width:max-content;
  min-width:160px;
  white-space:nowrap;

  background:#ffffff;
  border-radius:.75rem;
  border:1px solid rgba(209,213,219,.95);

  box-shadow:
    0 18px 45px rgba(22,163,74,.28),
    0 0 0 1px rgba(148,163,184,.35);

  z-index:100;
  padding:.35rem;

  opacity:0;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  will-change:transform, opacity;

  backdrop-filter:saturate(1.05) blur(6px);
  -webkit-backdrop-filter:saturate(1.05) blur(6px);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transform:translate(-50%, 0) scale(1);
  transition:opacity .22s ease, transform .22s ease, visibility 0s;
}

/* Sub-links */
.dropdown-content a{
  display:flex;
  align-items:center;
  gap:.45rem;

  padding:.5rem .8rem;
  margin:.08rem;

  color:#374151;
  font-size:.93rem;
  text-decoration:none;

  border-radius:.55rem;
  transition:background .16s ease, color .16s ease, padding-left .16s ease, box-shadow .16s ease;
}
.dropdown-content a:hover{
  background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(190,242,100,.16));
  color:#0f172a;
  padding-left:1rem;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.35);
}

/* Focus */
.main-nav a:focus-visible{
  outline:2px solid rgba(190,242,100,.9);
  outline-offset:3px;
}
.dropdown-content a:focus-visible{
  outline:2px solid rgba(34,197,94,.9);
  outline-offset:0;
}

/* =========================
   DROPDOWN – menu.php (ul.mainmenu verschachtelt)
   ========================= */

/* Das verschachtelte UL wird zum Dropdown-Panel */
.site-header ul.mainmenu ul.mainmenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 10px) scale(.985);

  min-width:170px;
  width:max-content;
  white-space:nowrap;

  background:#ffffff;
  border-radius:.75rem;
  border:1px solid rgba(209,213,219,.95);

  box-shadow:
    0 18px 45px rgba(22,163,74,.24),
    0 0 0 1px rgba(148,163,184,.35);

  padding:.35rem;
  margin:0;
  z-index:100;

  visibility:hidden;
  opacity:0;
  pointer-events:none;

  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

/* Hover öffnet Dropdown */
.site-header ul.mainmenu li:hover > ul.mainmenu,
.site-header ul.mainmenu li:focus-within > ul.mainmenu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0) scale(1);
  transition:opacity .22s ease, transform .22s ease, visibility 0s;
}

/* Sub-Items in menu.php */
.site-header ul.mainmenu ul.mainmenu > li{
  margin:0;
}

.site-header ul.mainmenu ul.mainmenu > li > a,
.site-header ul.mainmenu ul.mainmenu > li > span{
  display:flex;
  align-items:center;

  padding:.5rem .8rem;
  margin:.08rem;

  border-radius:.55rem;
  text-decoration:none;

  color:#374151;
  font-size:.93rem;

  transition:background .16s ease, color .16s ease, padding-left .16s ease, box-shadow .16s ease;
}

.site-header ul.mainmenu ul.mainmenu > li > a:hover{
  background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(190,242,100,.16));
  color:#0f172a;
  padding-left:1rem;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.35);
}


/* =========================
   MOBILE (<=800px) – NOCH KOMPAKTER
   + neues Farbschema (clean, weniger “milchig”)
   + Submenüs klar erkennbar (Inset-Panel + Marker + Einzug)
   (Funktionalität bleibt wie bei deiner Version)
   ========================= */

@media (max-width:800px){

  :root{
    --mh: 56px;

    /* tighter */
    --panel-pad: .42rem;
    --radius: .88rem;
    --card-radius: .58rem;

    /* ink */
    --ink: #071a14;
    --muted: rgba(7,26,20,.72);

    /* neues Farbgefühl: neutral + grüner Akzent (mehr “richtig”, weniger candy) */
    --line: rgba(7,26,20,.10);
    --bg: rgba(250,252,251,.92);          /* panel glass (neutral) */
    --chip: rgba(255,255,255,.98);        /* button top */
    --chip2: rgba(245,249,247,.96);       /* button bottom */

    /* accent */
    --accent: rgba(16,185,129,.95);
    --accent-soft: rgba(16,185,129,.16);
    --accent-line: rgba(16,185,129,.32);

    /* subs deutlich abgesetzt */
    --sub-bg: rgba(16,185,129,.10);       /* dropdown-content bg (tinted) */
    --sub-chip: rgba(255,255,255,.98);    /* sub links bg */
    --sub-line: rgba(16,185,129,.26);

    /* active */
    --active-top: rgba(255,255,255,.98);
    --active-bot: rgba(236,253,245,.94);
    --active-line: rgba(16,185,129,.55);

    --shadow: 0 18px 46px rgba(2,6,23,.14);
    --shadow2: 0 10px 24px rgba(2,6,23,.12);

    --ease: cubic-bezier(.2,.9,.2,1);
    --fast: 160ms;
    --mid: 230ms;
  }

  .site-header{
    padding:0 .62rem; /* tighter */
    height:var(--mh);
  }

  .brand-link{ cursor:pointer; -webkit-tap-highlight-color: transparent; }
  .brand-text{ display:none; }

  /* -------------------------
     PANEL (stable scrolling)
     ------------------------- */

  .main-nav,
  .site-header > ul.mainmenu,
  .site-header .main-nav > ul.mainmenu{
    position:fixed;
    top:var(--mh);
    left:.44rem;
    right:.44rem;

    max-height:calc(100vh - var(--mh) - .44rem);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:auto;

    padding:var(--panel-pad);
    border-radius:0 0 var(--radius) var(--radius);
    border:1px solid var(--line);
    box-shadow:var(--shadow);

    /* neutral glass + subtle accent glow */
    background:
      radial-gradient(900px 240px at 50% 0%, var(--accent-soft), transparent 64%),
      var(--bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    z-index:9999;
    box-sizing:border-box;

    visibility:hidden;
    opacity:0;
    pointer-events:none;

    clip-path: inset(0 0 100% 0 round 0 0 var(--radius) var(--radius));
    transition:
      opacity var(--mid) var(--ease),
      clip-path var(--mid) var(--ease),
      visibility 0s linear var(--mid);

    /* COMPACT GRID */
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:.26rem;
    align-content:start;

    text-align:center;
    overflow-anchor:none;
  }

  .site-header.nav-open .main-nav,
  .site-header.nav-open > ul.mainmenu,
  .site-header.nav-open .main-nav > ul.mainmenu{
    visibility:visible;
    opacity:1;
    pointer-events:auto;

    clip-path: inset(0 0 0 0 round 0 0 var(--radius) var(--radius));
    transition:
      opacity var(--mid) var(--ease),
      clip-path var(--mid) var(--ease),
      visibility 0s;
  }

  @media (max-width:420px){
    .main-nav,
    .site-header > ul.mainmenu,
    .site-header .main-nav > ul.mainmenu{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width:360px){
    .main-nav,
    .site-header > ul.mainmenu,
    .site-header .main-nav > ul.mainmenu{
      grid-template-columns: 1fr;
    }
  }

  /* -------------------------
     MAIN LINKS – kompakter (weniger oben/unten)
     ------------------------- */

  .main-nav > a,
  .main-nav .dropdown > a,
  .site-header ul.mainmenu > li > a,
  .site-header ul.mainmenu > li > span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.30rem;

    padding:.30rem .42rem;  /* weniger oben/unten */
    min-height:30px;        /* kompakter */

    border-radius: var(--card-radius);
    border:1px solid rgba(7,26,20,.10);

    background: linear-gradient(180deg, var(--chip), var(--chip2));
    color: var(--muted);

    box-shadow: 0 1px 0 rgba(2,6,23,.04);
    box-sizing:border-box;

    font-size:.86rem;
    line-height:1.02;
    letter-spacing:.10px;

    user-select:none;
    -webkit-tap-highlight-color: transparent;

    transition:
      transform var(--fast) var(--ease),
      box-shadow var(--fast) var(--ease),
      background var(--fast) var(--ease),
      border-color var(--fast) var(--ease),
      color var(--fast) var(--ease),
      opacity var(--fast) var(--ease);
  }

  .main-nav > a::after,
  .main-nav .dropdown > a::after,
  .site-header ul.mainmenu > li > a::after{
    display:none !important;
  }

  .main-nav > a:hover,
  .main-nav .dropdown > a:hover,
  .site-header ul.mainmenu > li > a:hover{
    color: var(--ink);
    border-color: var(--accent-line);
    box-shadow: 0 10px 18px rgba(2,6,23,.10);
    transform: translateY(-1px);
  }

  .main-nav > a:active,
  .main-nav .dropdown > a:active,
  .site-header ul.mainmenu > li > a:active{
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(2,6,23,.10);
  }

  .main-nav a:focus-visible,
  .site-header ul.mainmenu a:focus-visible{
    outline:2px solid var(--accent-line);
    outline-offset:2px;
  }

  /* -------------------------
     "Selected goes to top"
     ------------------------- */

  .main-nav > a.active,
  .main-nav > a[aria-current="page"],
  .site-header ul.mainmenu > li > a.active,
  .site-header ul.mainmenu > li > a[aria-current="page"]{
    color: var(--ink);
    border-color: var(--active-line);
    background: linear-gradient(180deg, var(--active-top), var(--active-bot));
    box-shadow: var(--shadow2);

    position: sticky;
    top: 0;
    z-index: 3;

    animation: navActiveRise 320ms var(--ease) both;
  }

  @keyframes navActiveRise{
    from{ transform: translateY(8px); filter: blur(.2px); }
    to{ transform: translateY(0); filter: blur(0); }
  }

  /* Hide others if active exists (modern browsers) */
  .main-nav:has(> a.active),
  .main-nav:has(> a[aria-current="page"]),
  .site-header ul.mainmenu:has(> li > a.active),
  .site-header ul.mainmenu:has(> li > a[aria-current="page"]){
    grid-template-columns: 1fr;
  }

  .main-nav:has(> a.active) > a:not(.active),
  .main-nav:has(> a[aria-current="page"]) > a:not([aria-current="page"]),
  .site-header ul.mainmenu:has(> li > a.active) > li:not(:has(> a.active)),
  .site-header ul.mainmenu:has(> li > a[aria-current="page"]) > li:not(:has(> a[aria-current="page"])){
    opacity:0;
    transform: translateY(6px);
    max-height:0;
    padding:0;
    margin:0;
    border:0;
    pointer-events:none;
    overflow:hidden;
    transition:
      opacity 140ms var(--ease),
      transform 140ms var(--ease),
      max-height 180ms var(--ease);
  }

  /* Temporary focus mode (tap) */
  .main-nav:has(> a:focus) > a:not(:focus),
  .site-header ul.mainmenu:has(> li > a:focus) > li:not(:has(> a:focus)){
    opacity:0;
    transform: translateY(6px);
    max-height:0;
    padding:0;
    margin:0;
    border:0;
    pointer-events:none;
    overflow:hidden;
  }

  /* -------------------------
     DROPDOWN – Container klar als "hat Submenü"
     ------------------------- */

  .dropdown{
    grid-column: 1 / -1;
    width:100%;
    display:grid;
    grid-template-columns: 1fr;
    gap:.22rem;

    padding:.34rem;          /* tighter */
    border-radius: .82rem;

    /* sichtbar anders als normale Buttons */
    border:1px solid rgba(16,185,129,.22);
    background:
      linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,.86));
    box-shadow: 0 1px 0 rgba(2,6,23,.04);
    box-sizing:border-box;

    position:relative;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  }

  /* kleiner Akzent-Strich oben = "Gruppe" */
  .dropdown::before{
    content:"";
    position:absolute;
    left:.44rem;
    right:.44rem;
    top:.30rem;
    height:2px;
    border-radius:999px;
    background: rgba(16,185,129,.28);
    pointer-events:none;
  }

  .dropdown:hover{
    box-shadow: 0 12px 22px rgba(2,6,23,.10);
    transform: translateY(-1px);
  }

  .dropdown::after{ display:none !important; }

  /* -------------------------
     SUBMENÜ PANEL – klar getrennt + Marker + Einzug
     ------------------------- */

  .dropdown-content{
    position:static !important;
    left:auto !important;
    transform:none !important;

    width:100%;
    margin:0;

    background: var(--sub-bg);
    border:1px solid var(--sub-line);
    border-radius: .78rem;

    /* Inset-Look = eindeutig "untergeordnet" */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.80),
      inset 0 0 0 1px rgba(2,6,23,.03);

    padding:0;
    max-height:0;
    overflow:hidden;

    visibility:hidden;
    pointer-events:none;
    opacity:0;

    transition:
      max-height .25s ease,
      opacity .2s ease,
      visibility 0s linear .25s,
      padding .25s ease;
  }

  .dropdown.open .dropdown-content{
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    max-height:56vh;
    padding:.34rem;
    transition:
      max-height .28s ease,
      opacity .22s ease,
      visibility 0s,
      padding .28s ease;
  }

  .dropdown-content a{
    display:flex;
    align-items:center;
    justify-content:flex-start;   /* SUBS nicht mehr wie Hauptbuttons zentriert */
    gap:.42rem;

    padding:.30rem .44rem;        /* kompakter */
    min-height:30px;

    margin:.22rem 0 0;
    border-radius:.64rem;

    background: var(--sub-chip);
    color: rgba(7,26,20,.78);
    border:1px solid rgba(16,185,129,.16);
    box-shadow: 0 1px 0 rgba(2,6,23,.04);

    font-size:.84rem;             /* minimal kleiner = Hierarchie */
    line-height:1.02;

    transition:
      transform var(--fast) var(--ease),
      box-shadow var(--fast) var(--ease),
      color var(--fast) var(--ease),
      border-color var(--fast) var(--ease);
  }

  /* SUB Marker = klare Erkennung */
  .dropdown-content a::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background: rgba(16,185,129,.26);
    box-shadow: inset 0 0 0 2px rgba(16,185,129,.18);
    flex:0 0 10px;
  }

  .dropdown-content a:hover{
    color: var(--ink);
    border-color: rgba(16,185,129,.34);
    box-shadow: 0 10px 18px rgba(2,6,23,.10);
    transform: translateY(-1px);
  }

  /* -------------------------
     menu.php Sub-UL – wie dropdown-content + Marker
     ------------------------- */

  .site-header ul.mainmenu ul.mainmenu{
    grid-column: 1 / -1;
    position:static !important;
    transform:none !important;

    width:100%;
    max-width:100%;

    visibility:visible;
    opacity:1;
    pointer-events:auto;

    background: var(--sub-bg);
    border:1px solid var(--sub-line);
    border-radius:.82rem;

    padding:.34rem;
    margin:.16rem 0 0;
    white-space:normal;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.80),
      inset 0 0 0 1px rgba(2,6,23,.03);
  }

  .site-header ul.mainmenu ul.mainmenu > li > a{
    justify-content:flex-start;
    gap:.42rem;

    background: var(--sub-chip);
    border:1px solid rgba(16,185,129,.16);
    box-shadow: 0 1px 0 rgba(2,6,23,.04);
    color: rgba(7,26,20,.78);

    border-radius:.64rem;

    padding:.30rem .44rem;
    min-height:30px;

    font-size:.84rem;
    line-height:1.02;
  }

  .site-header ul.mainmenu ul.mainmenu > li > a::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background: rgba(16,185,129,.26);
    box-shadow: inset 0 0 0 2px rgba(16,185,129,.18);
    flex:0 0 10px;
  }

  /* micro stagger for items (panel itself is stable) */
  .site-header.nav-open .main-nav > a,
  .site-header.nav-open .main-nav .dropdown,
  .site-header.nav-open > ul.mainmenu > li,
  .site-header.nav-open .main-nav > ul.mainmenu > li{
    animation: navItemPop 220ms var(--ease) both;
  }

  @keyframes navItemPop{
    from{ opacity:0; transform: translateY(5px) scale(.997); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }

  /* scrollbars */
  .main-nav::-webkit-scrollbar,
  .site-header > ul.mainmenu::-webkit-scrollbar,
  .site-header .main-nav > ul.mainmenu::-webkit-scrollbar{
    width:10px;
  }
  .main-nav::-webkit-scrollbar-thumb,
  .site-header > ul.mainmenu::-webkit-scrollbar-thumb,
  .site-header .main-nav > ul.mainmenu::-webkit-scrollbar-thumb{
    background: rgba(7,26,20,.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}


/* =========================
   NOTIFICATION CENTER (scoped)
   ========================= */

.site-header .notif-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.site-header .notif-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;

  height:36px;
  min-width:36px;
  padding:0 .55rem;

  border:1px solid rgba(255,255,255,0.22);
  background:rgba(15,23,42,0.18);
  color:#f9fafb;

  border-radius:.65rem;
  cursor:pointer;
  line-height:1;

  transition:background .16s ease, transform .12s ease, border-color .16s ease;
}

.site-header .notif-btn:hover{
  background:rgba(15,23,42,0.28);
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.28);
}

.site-header .notif-badge{
  position:absolute;
  top:-7px;
  right:-7px;

  min-width:18px;
  height:18px;
  padding:0 5px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:.72rem;
  font-weight:800;

  background:#ef4444;
  color:#fff;

  border-radius:999px;
  border:2px solid rgba(22,163,74,0.95); /* passt zum Header */
}

.site-header .notif-wrap.open .notif-panel{
  display:block;
}

.site-header .notif-panel{
  display:none;

  position:absolute;
  top:calc(100% + 10px);
  right:0;

  width:min(420px, 92vw);
  max-height:60vh;
  overflow:auto;

  background:#ffffff;
  border:1px solid rgba(209,213,219,0.95);
  border-radius:12px;

  box-shadow:0 18px 45px rgba(15,23,42,0.18);
  z-index:200;
}

.site-header .notif-head{
  padding:.75rem .85rem;
  border-bottom:1px solid rgba(229,231,235,0.95);
  font-size:.95rem;
  color:#111827;
  background:linear-gradient(180deg, rgba(249,250,251,1), rgba(255,255,255,1));
}

.site-header .notif-list{
  list-style:none;
  margin:0;
  padding:.35rem;
}

.site-header .notif-item{
  display:flex;
  align-items:center;
  gap:.55rem;

  padding:.55rem .55rem;
  border-radius:10px;

  color:#111827;
  background:#ffffff;
  border:1px solid rgba(229,231,235,0.85);

  margin:.35rem 0;
}

.site-header .notif-item.is-new{
  border-color:rgba(34,197,94,0.35);
  background:linear-gradient(135deg, rgba(34,197,94,0.08), rgba(190,242,100,0.10));
}

.site-header .notif-item.is-todo{
  border-color:rgba(239,68,68,0.35);
  background:linear-gradient(135deg, rgba(239,68,68,0.08), rgba(251,191,36,0.08));
}

.site-header .notif-tag{
  flex:0 0 auto;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.05em;

  padding:.18rem .45rem;
  border-radius:999px;

  background:rgba(15,23,42,0.08);
  color:#111827;
}

.site-header .notif-text{
  flex:1 1 auto;
  min-width:0;
  display:block;
}

.site-header .notif-msg{
  display:block;
  font-size:.9rem;
  font-weight:600;
  color:#111827;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.site-header .nc-tick{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:8px;

  border:1px solid rgba(209,213,219,0.95);
  background:#ffffff;
  color:#16a34a;

  font-weight:900;
  cursor:pointer;

  transition:background .14s ease, transform .12s ease, border-color .14s ease;
}

.site-header .nc-tick:hover{
  background:rgba(34,197,94,0.10);
  border-color:rgba(34,197,94,0.35);
  transform:translateY(-1px);
}

.site-header .nc-tick:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.site-header .nc-tick-spacer{
  width:28px;
  height:28px;
}

.site-header .notif-empty{
  padding:.85rem;
  text-align:center;
  color:#6b7280;
  font-weight:600;
}

/* =========================
   NOTIFICATION – Mobile Viewport Fix (kein Rauslaufen mehr)
   ========================= */
@media (max-width:800px){

  .site-header .notif-panel{
    position:fixed !important;   /* <<< am Bildschirm, nicht an Glocke */
    left:8px !important;
    right:8px !important;
    top:64px !important;         /* unter dem Header */

    width:auto !important;
    max-width:none !important;

    transform:none !important;
    margin:0 !important;
  }

}


/* =========================
   FOOTER (fixed)
   ========================= */
/* Gradient-Leiste oben auf dem Footer */
.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  box-shadow:0 2px 10px rgba(34,197,94,.18);

  background:linear-gradient(
    90deg,
    rgba(34,197,94,.95) 0%,
    rgba(190,242,100,.9) 50%,
    rgba(34,197,94,.95) 100%
  );

  background-size:200% 100%;
  opacity:.9;

  animation:site-header-gradient 6s linear infinite;

  pointer-events:none;
}

/* kleiner Glow für Tiefe */

.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  height:40px;
  padding:0 14px;

  background:#ffffff;
  color:#111827;

  border-top:1px solid rgba(209,213,219,.95);
  box-shadow:0 -8px 24px rgba(15,23,42,.08);

  font-size:.82rem;
  line-height:1.1;
}

/* Links/Mitte */
.footer-left,
.footer-center{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.footer-left{
  flex:1 1 40%;
  opacity:.92;
  padding: 12px
}

.footer-left a{
  color:inherit;
  text-decoration:none;
  font-weight:700;
}
.footer-left a:hover{
  text-decoration:underline;
}

.footer-center{
  flex:0 1 36%;
  text-align:center;
  opacity:.85;
}

/* Rechts-Block */
.footer-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* Tools rechts */
.footer-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Theme Button */
.footer-theme-form{
  margin:0;
  padding:0;
}

.footer-theme-btn{
  width:30px;
  height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;
  border:1px solid rgba(209,213,219,.95);
  background:#ffffff;
  cursor:pointer;

  box-shadow:0 6px 16px rgba(15,23,42,.08);
  transition:transform .12s ease, box-shadow .16s ease, background .16s ease;
}

.footer-theme-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
  background:rgba(148,163,184,.10);
}

/* Settings Button */
.footer-settings-btn{
  height:25px;
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:0 10px;
  border-radius:10px;

  border:1px solid rgba(209,213,219,.95);
  background:#ffffff;
  color:#111827;

  cursor:pointer;
  font-weight:600;

  box-shadow:0 6px 16px rgba(15,23,42,.08);
  transition:transform .12s ease, box-shadow .16s ease, background .16s ease;
}

.footer-settings-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
  background:rgba(148,163,184,.10);
}

/* Panel */
.footer-tools{
  position:relative;   /* <<< Referenz für Panel */
}

.footer-settings-panel{
  position:absolute;
  left:0;              /* <<< startet am Button */
  bottom:calc(100% + 10px);

  width:max-content;
  max-width:min(320px, 92vw);
  min-width:180px;

  background:#ffffff;

  border:1px solid rgba(209,213,219,.95);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.14);

  padding:8px;
  z-index:200;
}

.footer-settings-panel[hidden]{
  display:none !important;
}

.footer-settings-panel ul{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-settings-panel li{
  margin:0;
  padding:0;
}

.footer-settings-panel a{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 10px;
  border-radius:12px;

  text-decoration:none;
  color:#111827;
  font-weight:500;

  transition:background .14s ease, transform .12s ease;
}

.footer-settings-panel a:hover{
  background:rgba(148,163,184,.14);
  transform:translateY(-1px);
}

/* Lizenz-Pille */
.footer-lic{
  flex:0 0 auto;
}

.lic-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:7px 10px;
  border-radius:999px;

  border:1px solid rgba(209,213,219,.95);
  background:#ffffff;

  font-weight:600;
  font-size:.78rem;

  white-space:nowrap;
}

.lic-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#9ca3af;
}

.lic-pill-text{
  display:inline-block;
}

/* Status Farben */
.lic-pill-ok .lic-dot{ background:#22c55e; }
.lic-pill-warn .lic-dot{ background:#f59e0b; }
.lic-pill-bad .lic-dot{ background:#ef4444; }

/* User */
.footer-user{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
  opacity:.9;
  padding: 12px
}

.footer-user-p-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 1px;
}


/* =========================
   ADMIN USERS – Layout
   ========================= */
.users-wrap{
  display:grid;
  gap:16px;
}

/* =========================
   Card
   ========================= */
.card{
  background:#ffffff;
  border:1px solid rgba(209,213,219,.95);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  overflow:hidden;
}

.card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid rgba(229,231,235,.95);
  background:linear-gradient(180deg, rgba(249,250,251,1), rgba(255,255,255,1));
}

.card-h h2{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  color:#111827;
}

/* =========================
   Buttons – schlank, modern, smooth
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width: max-content;
  max-width: 240px;   /* z.B. Obergrenze */
  margin-top: 5px;

  height:auto;
  min-height:32px;
  padding:6px 11px;

  border-radius:9px;
  border:1px solid rgba(209,213,219,.95);
  background:#ffffff;
  color:#111827;

  font-weight:600;
  font-size:.88rem;
  line-height:1.15;

  cursor:pointer;

  box-shadow:
    0 4px 10px rgba(15,23,42,.06),
    0 1px 2px rgba(15,23,42,.05);

  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    background .16s ease,
    border-color .16s ease,
    filter .16s ease;
  
  white-space:normal;
  text-align:center;
}

.btn,
.btn span{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* -------- hover baseline -------- */
.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 22px rgba(15,23,42,.12),
    0 4px 8px rgba(15,23,42,.08);
  background:rgba(148,163,184,.08);
}

/* -------- click -------- */
.btn:active{
  transform:translateY(0);
  box-shadow:
    0 5px 12px rgba(15,23,42,.10);
}

/* =========================
   Primary – subtle glow
   ========================= */
.btn-primary{
  background:#16a34a;
  border-color:rgba(22,163,74,.6);
  color:#ffffff;
}

.btn-primary:hover{
  background:#15803d;
  border-color:#16a34a;
  box-shadow:
    0 12px 26px rgba(22,163,74,.35),
    0 6px 14px rgba(22,163,74,.25);
  filter:saturate(1.05);
}

/* =========================
   Danger – subtle glow
   ========================= */
.btn-danger{
  background:#dc2626;
  border-color:rgba(220,38,38,.6);
  color:#ffffff;
}

.btn-danger:hover{
  background:#b91c1c;
  border-color:#dc2626;
  box-shadow:
    0 12px 26px rgba(220,38,38,.35),
    0 6px 14px rgba(220,38,38,.25);
  filter:saturate(1.05);
}

/* =========================
   Mobile – nur leicht feiner
   ========================= */
@media (max-width: 640px){
  .btn{
    min-height:30px;
    padding:6px 9px;
    font-size:.86rem;
  }

  /* Touch = kein Schweben */
  .btn:hover{
    transform:none;
    box-shadow:
      0 4px 10px rgba(15,23,42,.08),
      0 1px 2px rgba(15,23,42,.05);
  }

  .btn-primary:hover,
  .btn-danger:hover{
    box-shadow:
      0 6px 14px rgba(0,0,0,.18);
  }
}



/* =========================
   Table row actions (Buttons)
   ========================= */

/* Table darf wachsen */
.users-table{
  table-layout: auto;
}

/* Zelle = Abstand zum Tabellenrand */
.users-table td.row-actions{
  text-align: right;
  vertical-align: top;

  padding: 12px 14px;   /* <<< Luft rundherum */

  height: auto !important;
  overflow: visible;
}

/* Wrapper = Button-Anordnung */
.users-table td.row-actions .row-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;            /* <<< Abstand zwischen Buttons */

  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

/* Buttons */
.users-table td.row-actions .btn,
.users-table td.row-actions a.btn,
.users-table td.row-actions button.btn{
  flex: 0 1 auto;
  white-space: nowrap;
}


/* =========================
   Mobile FIX (passt zu deinem @media max-width:900px Table-Layout!)
   - überschreibt NUR die Action-Zelle
   ========================= */

@media (max-width: 900px){

  /* Diese eine Zelle darf NICHT wie normale td (Label links / Wert rechts) laufen */
  .users-table td.row-actions{
    display: block !important;
    padding: 10px 12px !important; /* wie deine anderen Mobile-td */
    text-align: center !important;
  }

  /* Label in dieser Zelle aus (sonst quetscht es den Inhalt) */
  .users-table td.row-actions::before{
    content: none !important;
    display: none !important;
  }

  /* Buttons untereinander, immer im Rahmen */
  .users-table td.row-actions .row-actions{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;       /* td hat schon padding */
    gap: 10px !important;

    overflow: visible !important;
  }

  .users-table td.row-actions .btn,
  .users-table td.row-actions a.btn,
  .users-table td.row-actions button.btn{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 14px;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;

    text-align: center;
    
  }
}



/* ===================== TABLE ===================== */
.table-wrap{
  overflow:auto;
  padding:12px 14px 14px; /* falls du das Padding behalten willst */
}

/* Outer card-look table */
.users-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.92rem;

  border:1px solid rgba(209,213,219,0.9);
  border-radius:.75rem;
  overflow:hidden;

  background:#ffffff;
  box-shadow:
    0 14px 30px rgba(15,23,42,0.06),
    0 0 0 1px rgba(148,163,184,0.25);

  /* falls bei großen Tabellen: */
  min-width:720px;
}

.users-table th,
.users-table td{
  border-bottom:1px solid rgba(229,231,235,0.95);
  padding:.55rem .6rem;
  text-align:left;
  vertical-align:middle;
}

/* Header */
.users-table thead th{
  color:#f9fafb;
  font-weight:600;
  background:linear-gradient(135deg, #22c55e, #16a34a);
  letter-spacing:.02em;
}

/* abgerundete obere Ecken */
.users-table thead th:first-child{ border-top-left-radius:.75rem; }
.users-table thead th:last-child{  border-top-right-radius:.75rem; }

/* Zebra-Streifen */
.users-table tbody tr:nth-child(even){ background:#f9fafb; }
.users-table tbody tr:nth-child(odd){  background:#ffffff; }

/* Hover/Focus Effekt */
.users-table tbody tr{
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.users-table tbody tr:hover,
.users-table tbody tr:focus-within{
  background:
    radial-gradient(circle at left, rgba(34,197,94,0.18), transparent 60%),
    #f9fafb;
  box-shadow: inset 3px 0 0 0 rgba(34,197,94,0.9);
  transform: translateY(-1px);
}

/* "Cool modern" Selected-State (wie früher) */
.users-table tbody tr.is-selected{
  background:
    radial-gradient(circle at left, rgba(34,197,94,0.22), transparent 62%),
    #f1f5f9;
  box-shadow:
    inset 4px 0 0 0 rgba(34,197,94,1),
    0 8px 18px rgba(15,23,42,0.08);
}

/* optional: Selected soll Hover nicht kaputt machen */
.users-table tbody tr.is-selected:hover{
  transform: translateY(-1px);
}



/* =========================
   Tags (statt .tag)
   ========================= */
.ui-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:4px 10px;
  border-radius:999px;

  font-size:.78rem;
  font-weight:700;

  background:rgba(15,23,42,.06);
  border:1px solid rgba(209,213,219,.95);
  color:#111827;

  white-space:nowrap;
}

.ui-tag--ok{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.30);
  color:#065f46;
}

.ui-tag--warn{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.30);
  color:#92400e;
}

/* =========================
   Form (Modal Inhalt)
   ========================= */

.user-form{
  display:grid;
  gap:12px;

  /* WICHTIG – Luft zum Rand */
  padding:18px 20px;
  box-sizing:border-box;
}

/* Label Titel */
.user-form label > div{
  font-size:.82rem;
  font-weight:700;
  color:#374151;
  margin-bottom:4px;
}

/* Inputs / Selects / Textarea */
.user-form input,
.user-form select,
.user-form textarea{
  width:100%;
  min-height:38px;
  padding:8px 10px;

  border-radius:10px;
  border:1px solid rgba(209,213,219,.95);
  background:#ffffff;
  color:#111827;

  outline:none;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}

/* Fokus modern */
.user-form input:focus,
.user-form select:focus,
.user-form textarea:focus{
  border-color:rgba(22,163,74,.6);
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

/* Textarea etwas höher */
.user-form textarea{
  resize:vertical;
  min-height:80px;
}

/* =========================
   Button-Zeile
   ========================= */

.form-actions{
  display:flex;
  flex-wrap:wrap;          
  gap:12px;
  justify-content:flex-start;
  padding:10px 20px;
  align-items:center;
}

/* Buttons: wachsen nur bis Limit */
.form-actions .btn,
.form-actions a.btn,
.form-actions button.btn{
  flex: 1 1 80px;         
  max-width: 100px;       /* <<< verhindert Endlos-Breite */
  width:100%;
}

/* =========================
   Mobile feiner
   ========================= */

@media (max-width: 900px){

  .user-form{
    padding:14px 14px;
    gap:10px;
    text-align:left;              /* Labels/Text links */
  }
  .form-actions{
    gap:10px;
  }

  .form-actions .btn,
  .form-actions a.btn,
  .form-actions button.btn{
    flex: 1 1 220px;      
    max-width: 100%;     /* <<< auf Mobile darf er voll breit sein */
  }
}



/* =========================
   Mobile Table: data-label Anzeige
   ========================= */
@media (max-width:900px){
  .users-table{ min-width:0; }

  .users-table thead{
    display:none;
  }

  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td{
    display:block;
    width:100%;
  }

  .users-table tr{
    border:1px solid rgba(229,231,235,.95);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:10px;
    background:#ffffff;
  }

  .users-table td{
    display:flex;
    
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid rgba(243,244,246,.95);
  }

  .users-table td:last-child{
    border-bottom:none;
  }

  .users-table td::before{
    content:attr(data-label);
    font-weight:800;
    color:#374151;
    font-size:.82rem;
  }

 
}

/* =========================
   GLOBAL MODAL
   ========================= */

.m-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* sanfter, heller Hintergrundverlauf + leichtes Rauschen */
.m-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.08), transparent 55%),
    radial-gradient(circle at bottom right, rgba(34,197,94,.07), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(248,250,252,.95));
  pointer-events:none;
}

.m-overlay[aria-hidden="true"]{
  display: none;
}

/* dunklere Backdrop-Layer, aber nicht zu hart */
.m-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(4px);
}


/* Dialog */
.m-dialog{
  position: relative;
  background: rgba(255,255,255,.98);
  border-radius: 14px;
  overflow: hidden;

  max-width: 92vw;
  max-height: 90vh;

  display: flex;
  flex-direction: column;

  box-shadow:
    0 18px 50px rgba(15,23,42,.32),
    0 0 0 1px rgba(148,163,184,.15);

  /* Einstiegseffekt */
  transform: translateY(6px) scale(.96);
  opacity: 0;
  animation: m-dialog-in .2s ease-out forwards;
}

/* kleine, farbige Akzent-Linie oben */
.m-dialog::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,
    rgba(34,197,94,1),
    rgba(190,242,100,1),
    rgba(59,130,246,1)
  );
  opacity:.9;
}

/* Größenklassen */
.m-md{ width: 640px; }
.m-lg{ width: 820px; }
.m-xl{ width: 1020px; }


/* Kopf/Fuß */
.m-head,
.m-foot{
  flex: 0 0 auto;
  padding: 14px 16px;
  background: rgba(255,255,255,.96);
}

.m-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(226,232,240,1);
}

.m-foot{
  border-top: 1px solid rgba(226,232,240,1);
}

/* Body */
.m-body{
  flex: 1 1 auto;
  padding: 16px;
  overflow: auto;
  background: radial-gradient(circle at top, rgba(248,250,252,1), rgba(241,245,249,1));
}

/* Title & Close */
.m-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color:#0f172a;
}

/* Close mit Hover-Feedback */
.m-close{
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  color:#64748b;
  border-radius:999px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.m-close:hover{
  background:rgba(148,163,184,.15);
  color:#0f172a;
  transform:scale(1.05);
}
.m-close:active{
  transform:scale(.96);
}


/* Einstiegseffekt Keyframes */
@keyframes m-dialog-in{
  0%{
    transform: translateY(8px) scale(.94);
    opacity: 0;
  }
  100%{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}


/* ===== kleinere Screens ===== */
@media (max-width: 1200px), (max-height: 800px){
  .m-dialog{ max-height: 88vh; }
  .m-md{ width: 560px; }
  .m-lg{ width: 720px; }
  .m-xl{ width: 880px; }
}
@media (max-height: 700px){
  .m-dialog{ max-height: 84vh; }
  .m-head, .m-foot{ padding: 12px 14px; }
  .m-body{ padding: 14px; }
}

/* ===== Search Bar (Admin) – wie user-form ===== */
.search-bar{
  /* wirkt wie ein normaler Formular-Block */
  display:grid;
  gap:12px;
  margin: 10px 0 14px;
}

/* Feld verhält sich wie ein user-form label */
.search-bar__field{
  display:block;
}

.search-bar__label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
}

/* Input soll exakt wie in euren Formularen wirken */
.search-bar__input{
  width:100%;
  max-width:none;
}

/* Buttons wie form-actions: rechts, sauber, mit Abstand */
.search-bar__actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}

/* Optional: auf großen Screens nicht so breit (wie form max-width üblich) */
@media (min-width: 900px){
  .search-bar{
    max-width: 720px;
  }
}

/* ================================
   Sichtbarkeit Toggle – Desktop
================================ */

.visibility-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visibility-toggle > div:first-child {
  font-weight: 600;
  font-size: 14px;
}

.visibility-toggle > div:last-child {
  display: flex;
  gap: 14px;
}

.visibility-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #f7f7f7;
}

.visibility-toggle input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.visibility-toggle label:hover {
  background: #eee;
}

.visibility-toggle input[type="radio"]:checked + span {
  font-weight: 600;
}

.visibility-toggle input[type="radio"]:checked {
  accent-color: #2c7be5; /* falls Browser unterstützt */
}

.visibility-toggle label:has(input:checked) {
  background: #e8f0ff;
  border-color: #2c7be5;
}


/* ================================
   Mobile Anpassung
================================ */

@media (max-width: 600px) {

  .visibility-toggle {
    gap: 6px;
  }

  .visibility-toggle > div:first-child {
    font-size: 13px;
  }

  .visibility-toggle > div:last-child {
    display: flex;
    flex-direction: row;
    gap: 18px;   /* <<< MEHR ABSTAND ZWISCHEN DEN BUTTONS */
    align-items: center;
  }

  .visibility-toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    white-space: nowrap;
  }

   .visibility-toggle input[type="radio"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    transform: none;
  }


  .visibility-toggle span {
    font-size: 15px;
    line-height: 1;
  }

}


/* =========================================================
   Ernte Return: Mitarbeiter-Suche (Autocomplete)
   Klassen aus der PHP:
   .employee-lookup-wrapper
   .employee-suggestions
   plus: input[name="employee_lookup"]
   ========================================================= */

/* Wrapper: Input + Dropdown sauber untereinander */
.employee-lookup-wrapper{
  position: relative;
  width: 100%;
}

/* Suchfeld */
.employee-lookup-wrapper input[name="employee_lookup"]{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  outline: none;
}

/* Fokus */
.employee-lookup-wrapper input[name="employee_lookup"]:focus{
  border-color: rgba(0,0,0,.35);
}

/* Dropdown-Box */
.employee-lookup-wrapper .employee-suggestions{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 9999;

  display: none;
  max-height: 260px;
  overflow: auto;

  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Eintrag */
.employee-lookup-wrapper .employee-suggestions > div{
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1.25;
  border-bottom: 1px solid rgba(0,0,0,.08);
  user-select: none;
}

/* Letzter ohne Trennlinie */
.employee-lookup-wrapper .employee-suggestions > div:last-child{
  border-bottom: none;
}

/* Hover/Active */
.employee-lookup-wrapper .employee-suggestions > div:hover{
  background: rgba(0,0,0,.05);
}

/* iPhone / Mobile: kompakter + besser fingerbar */
@media (max-width: 600px){
  .employee-lookup-wrapper input[name="employee_lookup"]{
    padding: 9px 10px;
    border-radius: 12px;
  }

  .employee-lookup-wrapper .employee-suggestions{
    max-height: 220px;
    border-radius: 14px;
  }

  .employee-lookup-wrapper .employee-suggestions > div{
    padding: 12px 12px; /* finger-friendly */
  }
}

/* ===== Modal Return List Styling Rückmeldung Modal ===== */
.ret-list-wrap{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.ret-list-wrap [data-role="returns-hint"]{
  color:#6b7280;
  font-size:13px;
  padding:6px 2px 10px 2px;
}
.ret-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding:10px 8px;
  border-top:1px solid #f1f5f9;
}
.ret-row:first-child{ border-top:0; }
.ret-left{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex:1 1 auto;
  cursor:pointer;
  user-select:none;
  min-width:0;
}
.ret-left input.ret-check{
  transform:translateY(2px);
}
.ret-text{
  min-width:0;
}
.ret-text > div{
  line-height:1.25;
  word-break:break-word;
}
.ret-right{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  white-space:nowrap;
}
.ret-qty{
  width:120px;
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
}
.ret-qty:focus{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.25);
}
.ret-unit{
  font-size:13px;
  color:#374151;
  opacity:.9;
  min-width:60px;
  text-align:left;
}
.ret-creator{
  font-size:12px;
  color:#6b7280;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Employee Suggest */
.emp-suggest{
  position:relative;
}
.emp-suggest [data-role="emp-suggest-list"]{
  border:1px solid #e5e7eb !important;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  overflow:hidden;
}
.emp-item{
  padding:9px 10px !important;
  cursor:pointer;
  border-bottom:1px solid #f1f5f9 !important;
}
.emp-item:last-child{ border-bottom:0 !important; }
.emp-item:hover{
  background:#f8fafc;
}

/* Make the returns container look consistent in both modals */
.user-form .ret-list-wrap{
  margin-top:6px;
}

/* Slightly better spacing on small screens */
@media (max-width: 720px){
  .ret-row{
    flex-direction:column;
    align-items:stretch;
  }
  .ret-right{
    justify-content:flex-start;
    flex-wrap:wrap;
    white-space:normal;
  }
  .ret-qty{ width:100%; }
  .ret-unit{ min-width:auto; }
  .ret-creator{ max-width:100%; }
}


/* Gleiche Head-Anordnung wie Ernte-Erfassung (ernte_orders) */
.card-h.ernte-orders-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-h.ernte-orders-head .head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-h.ernte-orders-head .head-top h2 {
    margin: 0;
}

.card-h.ernte-orders-head .card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.card-h.ernte-orders-head .search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 0;
}

.card-h.ernte-orders-head .search-bar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 180px;
    min-width: 180px;
}

.card-h.ernte-orders-head .search-bar-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex: 0 0 auto;
}

.card-h.ernte-orders-head .search-bar-label {
    font-size: 12px;
    opacity: .8;
}

/* Zusatz Modal Produktsauftrag planung */
.card-h.prod-head{display:flex;flex-direction:column;gap:10px;}
.card-h.prod-head .head-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-h.prod-head .head-top h2{margin:0;}
.card-h.prod-head .card-actions{display:flex;justify-content:flex-end;align-items:center;}
.card-h.prod-head .search-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:0;}
.card-h.prod-head .search-bar-field{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:180px;}
.card-h.prod-head .search-bar-actions{display:flex;gap:8px;align-items:flex-end;flex:0 0 auto;}
.card-h.prod-head .search-bar-label{font-size:12px;opacity:.8;}
.details-cell{white-space:pre-line; font-size:12px; line-height:1.25;}
.small-muted{font-size:12px;opacity:.75;}
.pallet-live{font-weight:700;}

/* Zusatz Ansicht Buchungsbelege */
.stock_head{display:flex;flex-direction:column;gap:12px;}
.stock_head_top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.stock_head_title{margin:0;}

.stock_filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.stock_field{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:180px;}
.stock_label{font-size:12px;opacity:.8;}
.stock_actions{display:flex;gap:8px;align-items:flex-end;flex:0 0 auto;}

.stock_table td{vertical-align:top;}
.stock_mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.stock_small{font-size:12px;opacity:.85;}
.stock_badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(0,0,0,.12);white-space:nowrap;}
.stock_badge_neg{border-color: rgba(220,0,0,.35);}
.stock_badge_pos{border-color: rgba(0,120,0,.35);}

.stock_pager{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.stock_pager_left,.stock_pager_mid,.stock_pager_right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.stock_pageinfo{opacity:.85;}
.stock_pagebtn{display:inline-block;padding:6px 10px;border:1px solid rgba(0,0,0,.15);border-radius:8px;text-decoration:none;}
.stock_pagebtn_active{font-weight:700;border-color: rgba(0,0,0,.35);}
.stock_muted{opacity:.7;}

/* =========================================================
   STOCK: Header (Titel links, LIVE + Dots rechts in 1 Zeile)
   ========================================================= */

.stock_head{
  display: flex;
  align-items: center;
  width: 100%;
}

.stock_head_top{
  display: flex;
  align-items: center;
  min-width: 0;          /* verhindert Flex-Overflow bei langen Titeln */
}

.stock_head_title{
  margin: 0;
  line-height: 1.2;
}

/* Rechter Block: LIVE + Dots */
.live-dots{
  margin-left: auto;     /* ganz nach rechts */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* LIVE Text */
.live-text{
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #19c37d;
  margin-right: 4px;
  user-select: none;
  white-space: nowrap;
}


/* =========================================================
   STOCK: Live Blink Dots
   ========================================================= */

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #19c37d; /* grün */
  opacity: 0.25;
  box-shadow: 0 0 0 rgba(25,195,125,0);
}

.dot-a{
  animation: liveBlink 1s infinite ease-in-out;
}

.dot-b{
  animation: liveBlink 1s infinite ease-in-out;
  animation-delay: 0.5s;
}

@keyframes liveBlink{
  0%{
    opacity: 0.25;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(25,195,125,0);
  }
  50%{
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(25,195,125,0.55);
  }
  100%{
    opacity: 0.25;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(25,195,125,0);
  }
}

@media (prefers-reduced-motion: reduce){
  .dot-a,
  .dot-b{
    animation: none;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }
}


/* =========================================================
   STOCK: Grid / Cards / Table (NUR stock_* Klassen)
   ========================================================= */

.stock_grid{
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .stock_grid{
    grid-template-columns: 1fr;
  }
}

/* Header innerhalb der Lager-Karten */
.stock_lager_card .card-h{
  gap: 10px;
  align-items: flex-start;
}

.stock_lager_title{
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Tabelle */
.stock_table th,
.stock_table td{
  font-size: 0.9rem;
}

.stock_table td{
  vertical-align: top;
}

.stock_num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stock_small{
  font-size: 12px;
  opacity: 0.85;
}


.vp-confirm-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  z-index: 50;
}

.vp-confirm-card{
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}

.vp-confirm-head{
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
  align-items: center;
}

.vp-confirm-head .vp-confirm-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 193, 7, .25);
}

.vp-confirm-body{
  padding: 12px 14px;
  color: rgba(0,0,0,.75);
  line-height: 1.35;
}

.vp-confirm-actions{
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Wichtig: Container muss position:relative haben, damit overlay korrekt liegt das ist für abrechung button anklicen*/
.js-order-form{
  position: relative;
}

/* Abrechnung: Block "Verfügbare Rückmeldungen" */
.settlement-returns{
  margin-top:12px; /* falls du später inline entfernen willst */
}

.settlement-returns__title{
  margin-bottom:6px;
}

.settlement-returns__list{
  /* hier kannst du später Design geben */
}

.settlement-returns__hint{
  opacity:.85;
  margin:6px 0;
}

.settlement-returns__items{
  /* wrapper für die dynamischen Rows */
}

.settlement-returns__note{
  display:block;
  margin-top:6px;
  opacity:.75;
}

/* =========================
   ZEITERFASSUNG: REGISTER CARDS (Tabs)
   Klassen aus der View:
   .register_wrap
   .register_cards
   .register_card
   .register_card_title
   .register_card_hint
   .register_panel / .is_active
   ========================= */

.register_wrap{
  width:100%;
}

/* Tab-Leiste */
.register_cards{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin-top:12px;
}

/* Card = Button/Tab */
.register_card{
  appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(800px 120px at 30% 0%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
  border-radius:14px;

  padding:10px 12px;
  min-width: 180px;

  cursor:pointer;
  user-select:none;

  display:flex;
  flex-direction:column;
  gap:4px;

  box-shadow:
    0 10px 28px rgba(15,23,42,.08),
    0 0 0 1px rgba(148,163,184,.18);

  transition:
    transform .14s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;

  text-align:left;
  color:#0f172a;
}

/* Hover Lift */
.register_card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 44px rgba(15,23,42,.12),
    0 0 0 1px rgba(34,197,94,.20);
  border-color: rgba(34,197,94,.28);
  filter:saturate(1.03);
}

/* Active (aria-selected) */
.register_card[aria-selected="true"]{
  border-color: rgba(22,163,74,.45);
  background:
    radial-gradient(900px 160px at 30% 0%, rgba(34,197,94,.20), transparent 62%),
    linear-gradient(180deg, rgba(236,253,245,1), rgba(255,255,255,1));
  box-shadow:
    0 18px 50px rgba(22,163,74,.20),
    0 0 0 1px rgba(22,163,74,.22);
  transform: translateY(-1px);
}

/* kleiner “Glow”-Strich oben (nur active) */
.register_card[aria-selected="true"]::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  border-radius:14px 14px 0 0;
  background: linear-gradient(90deg,
    rgba(34,197,94,1),
    rgba(190,242,100,1),
    rgba(34,197,94,1)
  );
  opacity:.9;
}

/* Wichtig: ::before braucht position context */
.register_card{
  position:relative;
  overflow:hidden;
}

/* Titel */
.register_card_title{
  font-weight:800;
  font-size:.96rem;
  line-height:1.15;
  letter-spacing:.01em;
}

/* Hint / Subtext */
.register_card_hint{
  opacity:.78;
  font-size:.88rem;
  line-height:1.25;
  color:#334155;
}

/* Keyboard Focus */
.register_card:focus{
  outline:none;
}
.register_card:focus-visible{
  box-shadow:
    0 18px 44px rgba(15,23,42,.12),
    0 0 0 4px rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.38);
}

/* Panels */
.register_panel{
  display:none;
}
.register_panel.is_active{
  display:block;
  margin-top:12px;
}

/* Optional: wenn du hidden verwendest */
.register_panel[hidden]{
  display:none !important;
}

/* =========================
   Responsive
   ========================= */

/* Auf kleineren Screens: Cards werden grid-like */
@media (max-width: 900px){
  .register_cards{
    gap:8px;
  }
  .register_card{
    min-width: 160px;
    padding:10px 10px;
  }
}

/* Sehr klein: 2 Spalten */
@media (max-width: 520px){
  .register_cards{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .register_card{
    min-width: 0;
  }
}

/* Ultra klein: 1 Spalte */
@media (max-width: 360px){
  .register_cards{
    grid-template-columns: 1fr;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .register_card{
    transition:none !important;
  }
  .register_card:hover{
    transform:none !important;
  }
}

/* =========================
   ZUORDNUNG: Matrix kompakt + Checkbox mittig + Selected Dot
   Klassen: .zta-assign-table .zta-assign-col .zta-assign-cell .zta-check .zta-check-ui
   ========================= */

/* Tabelle nur so breit wie nötig (wrappt nicht auf 100%) */
.table-wrap .zta-assign-table{
  width: max-content;       /* <<< nur so breit wie nötig */
  min-width: 0;
  table-layout: auto;
}

/* falls users-table min-width:720px bei dir gesetzt ist -> für diese Tabelle überschreiben */
.table-wrap .zta-assign-table.users-table{
  min-width: 0 !important;
}

/* Header-Spalten kompakt */
.zta-assign-table thead th.zta-assign-col{
  text-align: center;
  white-space: nowrap;
  padding: .45rem .55rem;   /* kleiner */
  font-size: .85rem;        /* kompakter */
}

/* Zellen kompakt und mittig */
.zta-assign-table td.zta-assign-cell{
  text-align: center;
  vertical-align: middle;
  padding: .40rem .55rem;   /* kleiner */
  width: 44px;              /* <<< fix klein */
}

/* Mitarbeiter-Spalte darf breiter sein, Rest bleibt klein */
.zta-assign-table td:first-child,
.zta-assign-table th:first-child{
  min-width: 280px;
}

/* Checkbox-Label = Center */
.zta-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

/* Native checkbox unsichtbar */
.zta-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* UI-Kästchen */
.zta-check-ui{
  width: 18px;
  height: 18px;
  border-radius: 9px;               /* rundlicher */
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  display:inline-block;
  position: relative;
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}

/* Hover */
.zta-check:hover .zta-check-ui{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* Selected: Ring + blauer Punkt */
.zta-check input:checked + .zta-check-ui{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.14);
  background: linear-gradient(180deg, rgba(239,246,255,1), rgba(255,255,255,1));
}

/* Blauer Punkt mittig */
.zta-check input:checked + .zta-check-ui::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(59,130,246,1);
  box-shadow: 0 0 0 2px rgba(59,130,246,.20);
}

/* Saving-State */
.zta-assign-table tr.is-saving{
  opacity: .72;
}

/* Optional: Table-wrap soll horizontal scrollen, wenn zu viele Modelle */
.table-wrap{
  overflow:auto;
}

/* Mobile: Header ggf. kürzer + Zellen noch enger */
@media (max-width: 900px){
  .zta-assign-table thead th.zta-assign-col{
    font-size: .82rem;
    padding: .40rem .45rem;
  }
  .zta-assign-table td.zta-assign-cell{
    padding: .35rem .45rem;
    width: 42px;
  }
  .zta-assign-table td:first-child,
  .zta-assign-table th:first-child{
    min-width: 220px;
  }
}

.zf .row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.zf .table-wrap { overflow:auto; }

.zf .tag { display:inline-block; padding:3px 8px; border-radius:999px; font-weight:800; font-size:.92em; }
.zf .tag.ok { background:rgba(16,185,129,.10); color:#065f46; border:1px solid rgba(16,185,129,.25); }
.zf .tag.warn { background:rgba(239,68,68,.08); color:#7f1d1d; border:1px solid rgba(239,68,68,.22); }
.zf .tag.neu { background:rgba(59,130,246,.08); color:#1e3a8a; border:1px solid rgba(59,130,246,.22); }

.zf .small-muted { opacity:.78; font-size:.95em; }

/* KPI */
.zf .zf-kpis { display:grid; grid-template-columns:repeat(12,1fr); gap:10px; margin-top:10px; }
.zf .zf-kpi { grid-column:span 6; padding:12px; border-radius:14px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); }
.zf .zf-kpi.good { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.22); }
.zf .zf-kpi.bad { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.22); }
.zf .zf-kpi.neutral { background:rgba(59,130,246,.06); border-color:rgba(59,130,246,.18); }
.zf .zf-kpi-title { font-weight:900; opacity:.85; }
.zf .zf-kpi-val { font-size:22px; font-weight:950; margin-top:3px; line-height:1.1; }
@media (min-width: 980px){ .zf .zf-kpi { grid-column:span 3; } }

/* Tabs */
.zf .zf-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.zf .zf-tab {
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.zf .zf-tab[aria-selected="true"]{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
}
.zf .zf-panel { margin-top:12px; }
.zf .zf-panel[hidden]{ display:none !important; }

/* Cards */
.zf .zf-cardlist { display:flex; flex-direction:column; gap:10px; }
.zf .zf-card {
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  border-radius:16px;
  padding:12px;
}
.zf .zf-card-h { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.zf .zf-card-title { font-weight:950; }
.zf .zf-card-sub { margin-top:4px; }
.zf .zf-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.zf .zf-kv { background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:10px; }
.zf .zf-kv-k { font-weight:900; opacity:.75; font-size:.90em; }
.zf .zf-kv-v { font-weight:950; margin-top:2px; }

/* Desktop/Mobile */
.zf .zf-desktop-only { display:none; }
.zf .zf-mobile-only { display:block; }
@media (min-width: 900px){
  .zf .zf-desktop-only { display:block; }
  .zf .zf-mobile-only { display:none; }
}

/* Bottom Action Bar */
.zf .zf-bottom {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 14px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92), rgba(255,255,255,.98));
}
.zf .zf-bottom-inner{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
}
@media (min-width: 900px){
  .zf .zf-bottom { position: static; background:none; padding:0; }
  .zf .zf-bottom-inner { padding:0; border:0; background:transparent; backdrop-filter:none; justify-content:flex-end; }
}

.zf .zf-topline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }


.zf-row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.zf-table-wrap { overflow:auto; }

.tag { display:inline-block; padding:3px 8px; border-radius:999px; font-weight:800; font-size:.92em; }
.tag.ok { background:rgba(16,185,129,.10); color:#065f46; border:1px solid rgba(16,185,129,.25); }
.tag.warn { background:rgba(239,68,68,.08); color:#7f1d1d; border:1px solid rgba(239,68,68,.22); }
.tag.neu { background:rgba(59,130,246,.08); color:#1e3a8a; border:1px solid rgba(59,130,246,.22); }

.small-muted { opacity:.78; font-size:.95em; }

/* KPI */
.zf-kpis { display:grid; grid-template-columns:repeat(12,1fr); gap:10px; margin-top:10px; }
.zf-kpi { grid-column:span 6; padding:12px; border-radius:14px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); }
.zf-kpi.good { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.22); }
.zf-kpi.bad { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.22); }
.zf-kpi.neutral { background:rgba(59,130,246,.06); border-color:rgba(59,130,246,.18); }
.zf-kpi-title { font-weight:900; opacity:.85; }
.zf-kpi-val { font-size:22px; font-weight:950; margin-top:3px; line-height:1.1; }
@media (min-width: 980px){ .zf-kpi { grid-column:span 3; } }

/* Tabs */
.zf-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.zf-tab {
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.zf-tab[aria-selected="true"]{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
}
.zf-panel { margin-top:12px; }
.zf-panel[hidden]{ display:none !important; }

/* Cards */
.zf-cardlist { display:flex; flex-direction:column; gap:10px; }
.zf-card {
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  border-radius:16px;
  padding:12px;
}
.zf-card-h { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.zf-card-title { font-weight:950; }
.zf-card-sub { margin-top:4px; }
.zf-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.zf-kv { background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:10px; }
.zf-kv-k { font-weight:900; opacity:.75; font-size:.90em; }
.zf-kv-v { font-weight:950; margin-top:2px; }

/* Desktop/Mobile */
.zf-desktop-only { display:none; }
.zf-mobile-only { display:block; }
@media (min-width: 900px){
  .zf-desktop-only { display:block; }
  .zf-mobile-only { display:none; }
}

/* Bottom Action Bar */
.zf-bottom {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 14px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92), rgba(255,255,255,.98));
}
.zf-bottom-inner{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
}
@media (min-width: 900px){
  .zf-bottom { position: static; background:none; padding:0; }
  .zf-bottom-inner { padding:0; border:0; background:transparent; backdrop-filter:none; justify-content:flex-end; }
}

.zf-topline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }



/* Datei: creat_barcode_view.css (oder in euer globales CSS einfügen)
   Alles scoped auf .creat_barcode_view
*/

.creat_barcode_view .muted{ opacity:.75; font-size:.9em; }
.creat_barcode_view .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.creat_barcode_view .cb-pad{ padding: 12px 18px; }

.creat_barcode_view .cb-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}

.creat_barcode_view .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  font-size:.85em;
  background: rgba(0,0,0,.02);
}
.creat_barcode_view .pill-ok{ background: rgba(0, 200, 83, .08); }
.creat_barcode_view .pill-warn{ background: rgba(255, 193, 7, .12); }

/* NEW: Controls header layout */
.creat_barcode_view .cb-controls{ margin-top: 12px; }
.creat_barcode_view .cb-controls-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 12px;
  align-items:start;
  padding: 12px 14px 14px;
}
@media (max-width:1200px){
  .creat_barcode_view .cb-controls-grid{ grid-template-columns: 1fr; }
}

.creat_barcode_view .cb-controlbox{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0,0,0,.01);
}

.creat_barcode_view .cb-controlbox-title{
  font-weight: 900;
  margin-bottom: 10px;
  opacity: .85;
}

.creat_barcode_view .cb-inline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.creat_barcode_view .cb-inline-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.creat_barcode_view .cb-field{ display:block; }
.creat_barcode_view .cb-label{ font-size: .85em; opacity: .8; margin-bottom: 6px; }
.creat_barcode_view .cb-input{
  width: 100%;
  min-width: 220px;
}

.creat_barcode_view .cb-details summary{
  cursor:pointer;
  font-weight: 800;
  opacity: .9;
}
.creat_barcode_view .cb-details{
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,.6);
}

/* Bulk bar & table area */
.creat_barcode_view .cb-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.creat_barcode_view .cb-tools-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.creat_barcode_view .cb-bulkbar{ padding: 10px 14px 0; }
.creat_barcode_view .cb-bulk-select{ min-width: 320px; }

.creat_barcode_view .cb-table-wrap{ padding: 12px 14px 14px; }

.creat_barcode_view .cb-col-check{ width: 44px; }
.creat_barcode_view .cb-col-status{ width: 120px; }
.creat_barcode_view .cb-col-date{ width: 110px; }
.creat_barcode_view .cb-col-actions{ width: 260px; }

.creat_barcode_view .cb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.85em;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  white-space:nowrap;
}
.creat_barcode_view .cb-badge-free{ background: rgba(0, 200, 83, .08); border-color: rgba(0, 200, 83, .25); }
.creat_barcode_view .cb-badge-used{ background: rgba(255, 193, 7, .12); border-color: rgba(255, 193, 7, .28); }

.creat_barcode_view .cb-orderbox{ display:flex; flex-direction:column; gap:4px; }
.creat_barcode_view .cb-order-nr{ font-weight:900; color: rgba(0,0,0,.85); }
.creat_barcode_view .cb-order-sub{ font-size: .85em; opacity:.75; word-break: break-word; }

.creat_barcode_view .cb-row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.creat_barcode_view .cb-hint{ margin-top:6px; }

/* Mobile */
@media (max-width:900px){
  .creat_barcode_view .cb-row-actions{ justify-content:flex-start; }
  .creat_barcode_view .cb-bulk-select{ min-width: 100%; }
  .creat_barcode_view .cb-input{ min-width: 100%; }
}
/* Sortierbare Tabellenköpfe */
.creat_barcode_view .cb-table thead th.is-sortable{
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.creat_barcode_view .cb-table thead th.is-sortable .sort-ind{
  display:inline-block;
  margin-left:6px;
  opacity:.55;
  font-size:.85em;
}

.creat_barcode_view .cb-table thead th.is-sortable.is-sorted .sort-ind{
  opacity:.9;
}

/* =========================================================
   Abrechnung Modal – Verfügbare Rückmeldungen (clean layout)
   ========================================================= */

.abret-headline{
  margin: 4px 0 10px 0;
  font-size: 15px;
  font-weight: 600;
}

.abret-footnote{
  display:block;
  margin-top: 10px;
  opacity:.7;
  font-size:12px;
}

/* Container */
.abret-returns{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

/* Hinweis */
.abret-hint{
  padding:12px 14px;
  font-size:13px;
  background:#f6f7f9;
  border-bottom:1px solid #e5e7eb;
  color:#555;
}

/* Liste */
.abret-list{
  max-height:360px;
  overflow:auto;
}

/* Zeile */
.abret-row{
  display:grid;
  grid-template-columns: 1fr 150px;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid #f0f0f0;
  align-items:center;
  transition:background .12s ease;
}

.abret-row:last-child{
  border-bottom:0;
}

.abret-row:hover{
  background:#fafafa;
}

/* linke Seite */
.abret-left{
  display:grid;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
}

/* Checkbox */
.abret-check{
  width:14px;
  height:14px;
  margin-top:4px;
  accent-color:#2b7cff;
  flex:0 0 grid;
}

/* Textblock */
.abret-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

/* Produktzeile */
.abret-title{
  font-size:13px;
  line-height:1.3;
}

.abret-label{
  color:#777;
  margin-right:4px;
}

.abret-value{
  font-weight:600;
  color:#111;
}

/* Meta */
.abret-meta{
  font-size:12px;
  color:#666;
}

.abret-dot{
  margin:0 6px;
  color:#bbb;
}

/* rechte Seite */
.abret-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

/* Mengeneingabe Box */
.abret-qtywrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  border:1px solid #dcdfe3;
  border-radius:8px;
  padding:5px 8px;
  background:#fff;
  min-width:130px;
}

/* Input */
.abret-qty{
  width:70px;
  border:0;
  outline:none;
  text-align:right;
  font-size:13px;
  background:transparent;
}

/* Einheit */
.abret-unit{
  font-size:12px;
  color:#666;
}

/* Rückmelder */
.abret-creator{
  font-size:11.5px;
  color:#888;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Scrollbar hübscher */
.abret-list::-webkit-scrollbar{
  width:8px;
}
.abret-list::-webkit-scrollbar-thumb{
  background:#ddd;
  border-radius:10px;
}
.abret-list::-webkit-scrollbar-thumb:hover{
  background:#cfcfcf;
}

/* Mobile */
@media (max-width:640px){
  .abret-row{
    grid-template-columns:1fr;
    gap:10px;
  }

  .abret-right{
    align-items:flex-start;
  }

  .abret-qtywrap{
    min-width:unset;
  }

  .abret-creator{
    max-width:100%;
  }
}