/* =========================
   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(37,99,235,.96), rgba(29,78,216,.94));
  color:#f9fafb;

  border-bottom:1px solid rgba(59,130,246,.55);
  backdrop-filter:saturate(1.15) blur(12px);
  -webkit-backdrop-filter:saturate(1.15) blur(12px);
  box-shadow:0 8px 24px rgba(37,99,235,.35);
}

/* animierte Unterstreichungs-Leiste */
.site-header::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(59,130,246,.95) 0%,
    rgba(191,219,254,.9) 50%,
    rgba(59,130,246,.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 */
.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(37,99,235,.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(59,130,246,.12), rgba(191,219,254,.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(191,219,254,.9);
  outline-offset:3px;
}

.dropdown-content a:focus-visible{
  outline:2px solid rgba(59,130,246,.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(37,99,235,.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(59,130,246,.12), rgba(191,219,254,.16));
  color:#0f172a;
  padding-left:1rem;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.35);
}

/* =========================
   KOMPAKTER DESKTOP-ZWISCHENBEREICH
   früher etwas enger, bevor der Panel-Modus greift
   ========================= */
@media (max-width:1320px){
  .site-header{
    padding:0 .9rem;
    gap:.7rem;
  }

  .main-nav{
    gap:.35rem;
  }

  .main-nav > a,
  .main-nav .dropdown > a,
  .site-header ul.mainmenu > li > a,
  .site-header ul.mainmenu > li > span{
    padding:.38rem .58rem;
    font-size:.89rem;
  }

  .brand-text{
    font-size:.98rem;
    letter-spacing:.04em;
  }

  .logout.logout-red{
    padding:.42rem .8rem;
    font-size:.86rem;
  }
}

/* =========================
   RESPONSIVER PANEL-MODUS
   früher als bisher:
   - ab 1180px
   - oder Hochkant bis 1366px
   ========================= */

@media (max-width:1180px), (orientation:portrait) and (max-width:1366px){

  :root{
    --mh: 56px;

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

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

    /* neutral + grüner Akzent */
    --line: rgba(7,26,20,.10);
    --bg: rgba(250,252,251,.92);
    --chip: rgba(255,255,255,.98);
    --chip2: rgba(245,249,247,.96);

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

    /* subs */
    --sub-bg: rgba(16,185,129,.10);
    --sub-chip: rgba(255,255,255,.98);
    --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;
    height:var(--mh);
    gap:.5rem;
  }

  .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);

    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);

    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:980px){
    .main-nav,
    .site-header > ul.mainmenu,
    .site-header .main-nav > ul.mainmenu{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:560px){
    .main-nav,
    .site-header > ul.mainmenu,
    .site-header .main-nav > ul.mainmenu{
      grid-template-columns:1fr;
    }
  }

  /* -------------------------
     MAIN LINKS – kompakter
     ------------------------- */

  .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;
    min-height:30px;

    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 */
  .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 */
  .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;
    border-radius:.82rem;

    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);
  }

  .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
     ------------------------- */

  .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;

    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;
    gap:.42rem;

    padding:.30rem .44rem;
    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;
    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);
  }

  .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 */
  .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;
  transform-origin:50% 8px;
}

.site-header .notif-wrap.has-notif .notif-btn{
  animation:notif-bell-ring 4.8s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(239,68,68,.10);
}

.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(37,99,235,0.95); /* passt zum Header */
}

.site-header .notif-wrap.has-notif .notif-badge{
  animation:notif-badge-pulse 2.8s ease-in-out infinite;
}

.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(59,130,246,0.35);
  background:linear-gradient(135deg, rgba(59,130,246,0.08), rgba(191,219,254,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:#2563eb;

  font-weight:900;
  cursor:pointer;

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

.site-header .nc-tick:hover{
  background:rgba(59,130,246,0.10);
  border-color:rgba(59,130,246,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;
}

.notif-wrap{
  position:relative;
  display:inline-block;
}

.notif-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid rgba(209,213,219,.9);
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  transform-origin:50% 10px;
}

.notif-wrap.has-notif .notif-btn{
  box-shadow:0 0 0 3px rgba(239,68,68,.08);
  animation:notif-bell-ring 4.8s ease-in-out infinite;
}

.notif-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:12px;
  line-height:20px;
  text-align:center;
  font-weight:700;
}

.notif-wrap.has-notif .notif-badge{
  animation:notif-badge-pulse 2.8s ease-in-out infinite;
}

.notif-badge.is-hidden{
  display:none;
}

.notif-panel{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:380px;
  max-width:calc(100vw - 30px);
  max-height:460px;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(209,213,219,.9);
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,.12);
  z-index:9999;
}

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

.notif-head{
  position:sticky;
  top:0;
  background:#fff;
  padding:14px 16px;
  border-bottom:1px solid rgba(229,231,235,1);
  z-index:2;
}

.notif-list{
  list-style:none;
  margin:0;
  padding:0;
}

.notif-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:start;
  padding:12px 16px;
  border-bottom:1px solid rgba(243,244,246,1);
}

.notif-item.is-new{
  background:#fffdf5;
}

.notif-item.is-todo .notif-tag{
  background:#fef3c7;
  color:#92400e;
  border-color:#fcd34d;
}

.notif-tag{
  display:inline-block;
  font-size:11px;
  line-height:1;
  padding:5px 7px;
  border-radius:999px;
  border:1px solid rgba(209,213,219,.9);
  background:#f9fafb;
  white-space:nowrap;
  margin-top:2px;
}

.notif-text{
  min-width:0;
}

.notif-link{
  display:inline-block;
  width:100%;
  color:inherit;
  text-decoration:none;
}

.notif-link:hover{
  text-decoration:underline;
}

.notif-msg{
  word-break:break-word;
  line-height:1.35;
}

.nc-tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid rgba(209,213,219,.9);
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
}

.nc-tick:disabled{
  opacity:.55;
  cursor:default;
}

.nc-tick-spacer{
  width:28px;
  height:28px;
  display:inline-block;
}

.notif-empty{
  padding:16px;
  color:#6b7280;
}

.notif-empty.is-hidden{
  display:none;
}

@keyframes notif-bell-ring{
  0%, 84%, 100%{
    transform:rotate(0deg);
  }
  86%{
    transform:rotate(14deg);
  }
  88%{
    transform:rotate(-12deg);
  }
  90%{
    transform:rotate(10deg);
  }
  92%{
    transform:rotate(-8deg);
  }
  94%{
    transform:rotate(5deg);
  }
  96%{
    transform:rotate(-3deg);
  }
  98%{
    transform:rotate(1deg);
  }
}

@keyframes notif-badge-pulse{
  0%, 100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(220,38,38,0);
  }
  12%{
    transform:scale(1.08);
    box-shadow:0 0 0 6px rgba(220,38,38,0.16);
  }
  24%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(220,38,38,0);
  }
}

/* =========================
   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(59,130,246,.18);

  background:linear-gradient(
    90deg,
    rgba(59,130,246,.95) 0%,
    rgba(191,219,254,.9) 50%,
    rgba(59,130,246,.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:#3ac12e; }
.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(7, 88, 210, 0.725);
  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(23, 102, 181, 0.49), 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:#2563eb;
  border-color:rgba(37,99,235,.6);
  color:#ffffff;
}

.btn-primary:hover{
  background:#1d4ed8;
  border-color:#2563eb;
  box-shadow:
    0 12px 26px rgba(37,99,235,.35),
    0 6px 14px rgba(37,99,235,.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, #3b82f6, #2563eb);
  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(59,130,246,0.18), transparent 60%),
    #f9fafb;
  box-shadow: inset 3px 0 0 0 rgba(59,130,246,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(59,130,246,0.22), transparent 62%),
    #f1f5f9;
  box-shadow:
    inset 4px 0 0 0 rgba(59,130,246,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(59,130,246,.14);
  border-color:rgba(59,130,246,.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(37,99,235,.6);
  box-shadow:0 0 0 4px rgba(59,130,246,.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(59,130,246,.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;
  border:2px solid rgba(7, 88, 210, 0.725);

  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(59,130,246,1),
    rgba(191,219,254,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(59,130,246,.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(59,130,246,.20);
  border-color: rgba(59,130,246,.28);
  filter:saturate(1.03);
}

/* Active (aria-selected) */
.register_card[aria-selected="true"]{
  border-color: rgba(37,99,235,.45);
  background:
    radial-gradient(900px 160px at 30% 0%, rgba(59,130,246,.20), transparent 62%),
    linear-gradient(180deg, rgba(236,253,245,1), rgba(255,255,255,1));
  box-shadow:
    0 18px 50px rgba(37,99,235,.20),
    0 0 0 1px rgba(37,99,235,.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(59,130,246,1),
    rgba(191,219,254,1),
    rgba(59,130,246,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(59,130,246,.22);
  border-color: rgba(59,130,246,.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%;
  }
}
/* message center - clean light layout */

.m-center-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #1f2937;
    background: #eef3f8;
}

/* Main whatsapp-style shell */

.m-center-whatsapp-shell {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    min-height: calc(100vh - 220px);
}

.m-center-chatlist,
.m-center-chatview {
    background: #f8fbfd;
    border: 1px solid #d6e0ea;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

/* Left column */

.m-center-chatlist {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.m-center-chatlist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    background: #eaf1f7;
    border-bottom: 1px solid #d6e0ea;
}

.m-center-chatlist__user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.m-center-chatlist__user-meta {
    min-width: 0;
}

.m-center-chatlist__user-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}

.m-center-chatlist__user-sub {
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
}

.m-center-chatlist__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-center-chatlist__search {
    padding: 14px 14px 0;
    background: #f8fbfd;
}

.m-center-chatlist__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fbfd;
}

/* Right column */

.m-center-chatview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100vh - 220px);
}

/* Header / title areas */

.m-center-card__head,
.m-center-thread-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #dbe4ec;
    background: #edf3f8;
}

.m-center-card__head--tight {
    padding-bottom: 14px;
}

.m-center-card__title,
.m-center-thread-head__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.m-center-thread-head__title {
    font-size: 20px;
}

.m-center-thread-head__meta {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

.m-center-thread-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Pills */

.m-center-thread-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.m-center-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d6e0ea;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.m-center-pill.is-accent {
    background: #e3eefc;
    border-color: #bfd3f6;
    color: #1d4ed8;
}

/* Buttons */

.m-center-page .btn,
.m-center-quick-btn,
.m-center-compose-close {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-sizing: border-box;
}

.m-center-page .btn:hover,
.m-center-quick-btn:hover,
.m-center-compose-close:hover {
    background: #f8fafc;
    border-color: #b8c6d6;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.m-center-page .btn.btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.m-center-page .btn.btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.m-center-page .btn:focus-visible,
.m-center-quick-btn:focus-visible,
.m-center-compose-close:focus-visible,
.m-center-field__input:focus-visible,
.m-center-field__textarea:focus-visible,
.m-center-field__select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

/* Searchbar */

.m-center-searchbar {
    padding: 12px 12px 0;
}

.m-center-searchbar__form {
    display: flex;
    gap: 8px;
}

.m-center-searchbar__input {
    flex: 1;
    min-width: 0;
}

.m-center-section-note {
    padding: 0 14px 14px;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

/* Badges */

.m-center-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid #d6e0ea;
    background: #edf2f7;
    color: #475569;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    box-sizing: border-box;
}

.m-center-badge.is-hot {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* Thread list */

.m-center-thread-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow: auto;
    background: #f8fbfd;
}

.m-center-thread-list--full {
    flex: 1;
    max-height: none;
}

.m-center-thread-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 14px;
    border: 1px solid #dde6ef;
    border-radius: 14px;
    background: #ffffff;
    text-decoration: none;
    color: #1f2937;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.m-center-thread-item:hover {
    background: #f9fbfd;
    border-color: #c7d4e2;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.m-center-thread-item.is-active {
    background: #eaf3ff;
    border-color: #bfd4f5;
    box-shadow: inset 0 0 0 1px #d7e6fb;
}

.m-center-thread-item.is-unread {
    border-left: 4px solid #2563eb;
    padding-left: 11px;
}

.m-center-thread-item__top,
.m-center-thread-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.m-center-thread-item__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.m-center-thread-item__main {
    min-width: 0;
    flex: 1;
}

.m-center-thread-item__subject {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
}

.m-center-thread-item__date,
.m-center-thread-item__meta {
    font-size: 12px;
    color: #64748b;
}

.m-center-thread-item__date {
    white-space: nowrap;
}

.m-center-thread-item__snippet {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    min-width: 0;
    flex: 1;
}

/* Avatar */

.m-center-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.75);
}

.m-center-avatar.is-small {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

/* Empty state */

.m-center-thread-empty {
    display: grid;
    place-items: center;
    flex: 1;
    padding: 28px;
    background: #f8fbfd;
}

.m-center-thread-empty__inner {
    max-width: 460px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-center-thread-empty__inner h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.m-center-thread-empty__inner p {
    margin: 0;
    line-height: 1.6;
    color: #64748b;
}

.m-center-empty {
    padding: 24px;
    text-align: center;
    color: #64748b;
}

/* Messages area */

.m-center-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    padding: 18px;
    overflow: auto;
    background: #f3f7fb;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.m-center-message {
    display: flex;
}

.m-center-message.is-own {
    justify-content: flex-end;
}

.m-center-message.is-other {
    justify-content: flex-start;
}

.m-center-message__bubble {
    max-width: min(760px, 82%);
    padding: 14px 15px 12px;
    border-radius: 16px;
    border: 1px solid #dbe4ec;
    box-sizing: border-box;
}

.m-center-message.is-own .m-center-message__bubble {
    background: #dbeafe;
    border-color: #bfd4f5;
}

.m-center-message.is-other .m-center-message__bubble {
    background: #ffffff;
    border-color: #dbe4ec;
}

.m-center-message__head,
.m-center-message__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.m-center-message__sender {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.m-center-message__date {
    font-size: 12px;
    white-space: nowrap;
    color: #64748b;
}

.m-center-message__body {
    margin: 10px 0 12px;
    font-size: 14px;
    line-height: 1.65;
    color: #1f2937;
    word-break: break-word;
}

/* Read states */

.m-center-msg-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.m-center-msg-state.is-read {
    color: #166534;
    background: #ecfdf3;
    border-color: #b7e4c2;
}

.m-center-msg-state.is-unread {
    color: #92400e;
    background: #fff7ed;
    border-color: #f3cf9c;
}

/* Reply box */

.m-center-reply {
    padding: 16px 18px 18px;
    background: #eef4f8;
}

.m-center-reply__form,
.m-center-compose-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m-center-reply__actions,
.m-center-compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Fields */

.m-center-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-center-field__label {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.m-center-field__help {
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

.m-center-field__input,
.m-center-field__textarea,
.m-center-field__select {
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #0f172a;
    padding: 12px 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.m-center-field__input::placeholder,
.m-center-field__textarea::placeholder {
    color: #94a3b8;
}

.m-center-field__input:hover,
.m-center-field__textarea:hover,
.m-center-field__select:hover {
    border-color: #b8c6d6;
}

.m-center-field__input:focus,
.m-center-field__textarea:focus,
.m-center-field__select:focus {
    border-color: #2563eb;
    background: #ffffff;
}

.m-center-field__textarea {
    resize: vertical;
    min-height: 120px;
}

.m-center-field__select[multiple] {
    min-height: 140px;
}

.m-center-field__select option {
    background: #ffffff;
    color: #0f172a;
}

/* Compose drawer */

.m-center-compose-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.30);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.m-center-compose-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(760px, 100vw);
    height: 100vh;
    z-index: 9991;
    display: flex;
    flex-direction: column;
    background: #f4f8fb;
    border-left: 1px solid #d6e0ea;
    box-shadow: -14px 0 30px rgba(15, 23, 42, 0.10);
    transform: translateX(100%);
    transition: transform 0.20s ease;
}

body.m-center-compose-open .m-center-compose-overlay {
    opacity: 1;
    visibility: visible;
}

body.m-center-compose-open .m-center-compose-drawer {
    transform: translateX(0);
}

body.m-center-compose-open {
    overflow: hidden;
}

.m-center-compose-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #d6e0ea;
    background: #eaf1f7;
}

.m-center-compose-head__title {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.m-center-compose-head__meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

.m-center-compose-body {
    flex: 1;
    overflow: auto;
    padding: 20px 22px 24px;
}

.m-center-compose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.m-center-compose-card {
    padding: 16px;
    border: 1px solid #d6e0ea;
    border-radius: 16px;
    background: #ffffff;
}

.m-center-compose-card__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

/* Picker */

.m-center-picker-search {
    margin-bottom: 12px;
}

.m-center-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow: auto;
}

.m-center-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dde6ef;
    border-radius: 12px;
    background: #fdfefe;
    box-sizing: border-box;
}

.m-center-picker-item input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}

.m-center-picker-item__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.m-center-picker-item__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}

.m-center-picker-item__meta {
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

/* Legacy classes kept compatible */

.m-center-topbar,
.m-center-shell,
.m-center-sidebar,
.m-center-content,
.m-center-grid,
.m-center-card,
.m-center-list-card,
.m-center-thread-card,
.m-center-nav,
.m-center-nav__item,
.m-center-quick-actions,
.m-center-quick-btn,
.m-center-quick-btn__title,
.m-center-quick-btn__meta,
.m-center-addressbook,
.m-center-addressbook__block,
.m-center-addressbook__title,
.m-center-addressbook__list,
.m-center-addressbook__item,
.m-center-addressbook__name,
.m-center-addressbook__meta,
.m-center-contact-tools,
.m-center-contact-tools__row,
.m-center-contact-empty {
    /* bewusst ohne zusätzliche Optik, nur kompatibel lassen */
}

/* Scrollbars */

.m-center-thread-list::-webkit-scrollbar,
.m-center-messages::-webkit-scrollbar,
.m-center-picker-list::-webkit-scrollbar,
.m-center-compose-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.m-center-thread-list::-webkit-scrollbar-thumb,
.m-center-messages::-webkit-scrollbar-thumb,
.m-center-picker-list::-webkit-scrollbar-thumb,
.m-center-compose-body::-webkit-scrollbar-thumb {
    background: #c7d2de;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.m-center-thread-list::-webkit-scrollbar-track,
.m-center-messages::-webkit-scrollbar-track,
.m-center-picker-list::-webkit-scrollbar-track,
.m-center-compose-body::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive */

@media (max-width: 1100px) {
    .m-center-whatsapp-shell {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .m-center-whatsapp-shell {
        grid-template-columns: 1fr;
    }

    .m-center-chatview {
        min-height: 600px;
    }

    .m-center-compose-drawer {
        width: 100vw;
    }
}

@media (max-width: 700px) {
    .m-center-chatlist__head,
    .m-center-thread-head,
    .m-center-compose-head,
    .m-center-message__head,
    .m-center-message__foot,
    .m-center-thread-item__top,
    .m-center-thread-item__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .m-center-searchbar__form,
    .m-center-reply__actions,
    .m-center-compose-actions,
    .m-center-chatlist__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .m-center-page .btn,
    .m-center-compose-close {
        width: 100%;
    }

    .m-center-message__bubble {
        max-width: 100%;
    }

    .m-center-compose-head,
    .m-center-compose-body,
    .m-center-chatlist__head,
    .m-center-thread-head,
    .m-center-reply {
        padding: 16px;
    }
}

.team-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* -----------------------------
Abteilung Teams Pillen
------------------------------ */

.team-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 5px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    background: #adb1b273;
    border: 1px solid #000000;
    color: #000000;
}

/* -----------------------------
Trainer css
------------------------------ */

  .trainer-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 14px;
  }

  .trainer-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .trainer-filter-group__label {
    font-weight: 600;
    opacity: .85;
    margin-right: 4px;
  }

  .trainer-filter-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .trainer-filter-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 34px;
    padding: 6px 12px;
    margin: 0;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: .15s ease;
    font-size: .92rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .trainer-filter-card:hover {
    border-color: rgba(0,0,0,.28);
    background: rgba(0,0,0,.03);
  }

  .trainer-filter-card.is-active {
    border-color: rgba(0,0,0,.45);
    background: rgba(0,0,0,.08);
    font-weight: 600;
  }

  .trainer-filter-card__title {
    margin: 0;
    overflow-wrap: normal;
  }

  .trainer-filter-card__meta,
  .trainer-filter-card__count {
    display: none !important;
  }

  .trainer-filter-status {
    margin: 0 0 10px;
    font-size: .9rem;
    opacity: .75;
  }

  .trainer-hidden-row {
    display: none !important;
  }

  .trainer-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .86rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .trainer-status-badge--active {
    background: rgba(46, 125, 50, .10);
    color: #2e7d32;
  }

  .trainer-status-badge--inactive {
    background: rgba(198, 40, 40, .10);
    color: #c62828;
  }

/* =========================================================
   TRAIN RETURN
   nur ergänzen, nichts löschen
   Scoped komplett auf .train-return
   ========================================================= */

.train-return{
  --tr-gap: 14px;
  --tr-radius: 14px;
  --tr-radius-sm: 10px;
  --tr-line: rgba(209,213,219,.95);
  --tr-line-soft: rgba(229,231,235,.95);
  --tr-bg-soft: #f8fafc;
  --tr-text: #111827;
  --tr-muted: #6b7280;
  --tr-blue: #2563eb;
  --tr-blue-soft: rgba(37,99,235,.10);
  --tr-green: #047857;
  --tr-green-soft: rgba(16,185,129,.12);
  --tr-red: #b91c1c;
  --tr-red-soft: rgba(239,68,68,.12);
  --tr-amber: #b45309;
  --tr-amber-soft: rgba(245,158,11,.14);
}

/* -------------------------
   Card / Head
   ------------------------- */

.train-return__card{
  overflow: hidden;
}

.train-return__head{
  align-items: flex-start;
  gap: 14px;
}

.train-return__title{
  margin: 0;
}

.train-return__head-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.train-return__head-btn{
  min-width: 180px;
}

/* -------------------------
   Trainer Cards
   ------------------------- */

.train-return__trainer-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.train-return__trainer-card{
  border: 1px solid var(--tr-line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}

.train-return__trainer-card-title{
  font-weight: 800;
  color: var(--tr-text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.train-return__trainer-card-line{
  color: var(--tr-muted);
  line-height: 1.45;
  word-break: break-word;
}

/* -------------------------
   Table Desktop
   ------------------------- */

.train-return__table-wrap{
  overflow: auto;
}

.train-return__table{
  width: 100%;
}

.train-return__table .train-return__row{
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.train-return__table .train-return__row:hover,
.train-return__table .train-return__row:focus-within{
  background:
    radial-gradient(circle at left, rgba(59,130,246,0.14), transparent 62%),
    #f9fafb;
  box-shadow: inset 3px 0 0 0 rgba(59,130,246,.85);
}

.train-return__cell{
  color: var(--tr-text);
}

.train-return__activity-top{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.train-return__activity-title{
  margin-top: 6px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.train-return__activity-time{
  margin-top: 4px;
}

.train-return__status-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* -------------------------
   Eigene Badges
   ------------------------- */

.train-return__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  border: 1px solid var(--tr-line);
  background: #fff;
  color: var(--tr-text);
}

.train-return__badge--open{
  background: #fff;
  border-color: rgba(148,163,184,.45);
  color: #334155;
}

.train-return__badge--done{
  background: var(--tr-green-soft);
  border-color: rgba(16,185,129,.32);
  color: var(--tr-green);
}

.train-return__badge--rejected{
  background: var(--tr-red-soft);
  border-color: rgba(239,68,68,.30);
  color: var(--tr-red);
}

.train-return__badge--notariff{
  background: var(--tr-amber-soft);
  border-color: rgba(245,158,11,.30);
  color: var(--tr-amber);
}

.train-return__badge--type{
  background: var(--tr-blue-soft);
  border-color: rgba(37,99,235,.24);
  color: #1d4ed8;
}

.train-return__badge--timefix{
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.24);
  color: #4338ca;
}

/* -------------------------
   Actions Desktop
   ------------------------- */

.train-return__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.train-return__action-btn{
  min-width: 150px;
}

/* -------------------------
   Modal / Form
   ------------------------- */

.train-return__form{
  gap: 12px;
}

.train-return__meta{
  padding: 12px;
  border: 1px solid var(--tr-line);
  border-radius: 12px;
  background: var(--tr-bg-soft);
  line-height: 1.5;
}

.train-return__meta > div + div{
  margin-top: 4px;
}

.train-return__history-wrap{
  display: grid;
  gap: 6px;
}

.train-return__history{
  border-radius: 12px;
  background: #f9fafb;
}

.train-return__field{
  display: block;
}

.train-return__field-help{
  line-height: 1.45;
}

.train-return__time-adjust{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.train-return__confirm-text{
  margin: 0;
  line-height: 1.5;
  color: var(--tr-text);
}

.train-return__hint{
  line-height: 1.45;
}

.train-return__form-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.train-return__form-btn{
  min-width: 140px;
}

/* -------------------------
   Modal Buttons / Actions Desktop
   ------------------------- */

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

.train-return .form-actions.train-return__form-actions .train-return__form-btn,
.train-return .form-actions.train-return__form-actions .btn{
  flex:0 1 auto;
  max-width:220px;
  width:auto;
  min-width:140px;
  margin-top:0;
}

.train-return .form-actions.train-return__form-actions .btn.btn-danger,
.train-return .form-actions.train-return__form-actions .btn.btn-primary{
  max-width:240px;
}

/* =========================================================
   Mobile
   Fokus:
   - weniger Reiz
   - Karte statt Tabellengefühl
   - Status und Aktionen sofort sichtbar
   - Details gestapelt
   ========================================================= */

@media (max-width: 900px){

  .train-return__head{
    flex-direction: column;
    align-items: stretch;
  }

  .train-return__head-actions{
    width: 100%;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
  }

  .train-return__head-btn{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .train-return__trainer-cards{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Tabelle wird Kartenlayout */
  .train-return__table{
    min-width: 0 !important;
    width: 100%;
  }

  .train-return__table thead{
    display: none;
  }

  .train-return__table,
  .train-return__table tbody,
  .train-return__table tr,
  .train-return__table td{
    display: block;
    width: 100%;
  }

  .train-return__table .train-return__row{
    margin-bottom: 12px;
    border: 1px solid var(--tr-line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
  }

  .train-return__table .train-return__row:hover,
  .train-return__table .train-return__row:focus-within{
    transform: none;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
    background: #fff;
  }

  .train-return__cell{
    border-bottom: 1px solid var(--tr-line-soft);
    padding: 10px 12px;
  }

  .train-return__cell:last-child{
    border-bottom: 0;
  }

  /* Standard Mobile-Zeilen mit Label links */
  .train-return__cell:not(.train-return__cell--activity):not(.train-return__cell--status):not(.train-return__cell--actions){
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .train-return__cell:not(.train-return__cell--activity):not(.train-return__cell--status):not(.train-return__cell--actions)::before{
    content: attr(data-label);
    font-size: .78rem;
    font-weight: 800;
    color: #475569;
    line-height: 1.35;
  }

  /* Aktivität als Kopfbereich der Karte */
  .train-return__cell--activity{
    padding: 12px;
    background:
      linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
  }

  .train-return__cell--activity::before{
    content: "Aktivität";
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 800;
    color: #475569;
    line-height: 1.2;
  }

  .train-return__activity-top{
    gap: 6px;
    margin-bottom: 8px;
  }

  .train-return__activity-title{
    margin-top: 0;
    font-size: .98rem;
    line-height: 1.35;
  }

  .train-return__activity-time{
    margin-top: 6px;
    font-size: .86rem;
  }

  /* Status sehr sichtbar */
  .train-return__cell--status{
    padding: 12px;
    background: #fcfcfd;
  }

  .train-return__cell--status::before{
    content: "Status";
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 800;
    color: #475569;
    line-height: 1.2;
  }

  .train-return__status-wrap{
    gap: 8px;
  }

  .train-return__badge{
    font-size: .78rem;
    padding: 5px 10px;
  }

  /* Aktionen vollbreit, klar, fingerfreundlich */
  .train-return__cell--actions{
    padding: 12px;
    background: #fff;
  }

  .train-return__cell--actions::before{
    content: none !important;
    display: none !important;
  }

  .train-return__actions{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .train-return__action-btn,
  .train-return__actions .btn{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Form Mobile */
  .train-return__meta{
    padding: 10px 12px;
    font-size: .9rem;
  }

  .train-return__time-adjust{
    grid-template-columns: 1fr;
  }

  /* Modal Buttons Mobile FIX */
  .train-return .form-actions.train-return__form-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding-top:4px;
  }

  .train-return .form-actions.train-return__form-actions .train-return__form-btn,
  .train-return .form-actions.train-return__form-actions .btn{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    height:auto !important;
    padding:8px 12px !important;
    font-size:.9rem !important;
    line-height:1.2 !important;
    margin-top:0 !important;
  }

  .train-return .form-actions.train-return__form-actions .btn.btn-primary,
  .train-return .form-actions.train-return__form-actions .btn.btn-danger{
    padding:9px 12px !important;
  }
}

/* Sehr kleine Geräte */
@media (max-width: 560px){

  .train-return{
    --tr-gap: 10px;
  }

  .train-return__title{
    font-size: 1rem;
    line-height: 1.25;
  }

  .train-return__trainer-card{
    padding: 10px;
  }

  .train-return__cell{
    padding: 9px 10px;
  }

  .train-return__cell:not(.train-return__cell--activity):not(.train-return__cell--status):not(.train-return__cell--actions){
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
  }

  .train-return__cell:not(.train-return__cell--activity):not(.train-return__cell--status):not(.train-return__cell--actions)::before,
  .train-return__cell--activity::before,
  .train-return__cell--status::before{
    font-size: .74rem;
  }

  .train-return__activity-title{
    font-size: .94rem;
  }

  .train-return__badge{
    font-size: .74rem;
  }

  .train-return__meta{
    font-size: .86rem;
  }

  .train-return .form-actions.train-return__form-actions .train-return__form-btn,
  .train-return .form-actions.train-return__form-actions .btn{
    padding:7px 10px !important;
    font-size:.85rem !important;
    min-height:34px !important;
  }
}

.ort-sperren-box {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.ort-sperren-empty {
  padding: 12px 14px;
  border: 1px dashed #c9ced6;
  border-radius: 10px;
  background: #fafbfc;
  font-size: 14px;
  color: #5f6b7a;
}

.ort-sperren-list {
  display: grid;
  gap: 8px;
}

.ort-sperren-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dfe5ec;
  border-radius: 10px;
  background: #fff;
}

.ort-sperren-item input[type="checkbox"] {
  margin-top: 3px;
}

.ort-sperren-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: left;
}

.ort-sperren-item__title {
  font-weight: 600;
}

.ort-sperren-item__sub {
  font-size: 12px;
  color: #6b7280;
}

.ort-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}