/* Token-Manager Tabs: use Urlaub-like blue active */
.tok-tabs{ }
.tok-tabs .tab-btn.active{ background: var(--sel-blue-bg); border-color: var(--sel-blue-border); color:#e5e7eb; }
html, body{ -webkit-tap-highlight-color: transparent; }
/* ===== Inline style block 1 (migrated from index.html) ===== */
:root{
      --bg: #0b2a52;
      --text: rgba(255,255,255,.92);
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius: 14px;
      --taskbar-h: 54px;

      /* Selection (mail-like blue) */
      --sel-blue-bg: rgba(37,99,235,.28);
      --sel-blue-border: rgba(37,99,235,.35);
      --sel-blue-thumb: rgba(37,99,235,.95);

      /* Animations (Win11-ish) */
      --anim-fast: 160ms;
      --anim-med: 220ms;
      --ease-win: cubic-bezier(.2,.9,.2,1);
    }

    *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
    html, body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    html{ color-scheme: dark; }
    :focus{ outline: none; }
    ::selection{ background: rgba(120,200,255,.25); }

    body{
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(87,157,255,.55), transparent 60%),
        radial-gradient(1100px 700px at 90% 40%, rgba(0,208,255,.35), transparent 55%),
        radial-gradient(900px 700px at 40% 90%, rgba(94,255,190,.20), transparent 60%),
        linear-gradient(135deg, #081a33, var(--bg));
      color: var(--text);
      overflow:hidden;
      user-select:none;

      /* FIX: Background layer mismatch vermeiden (4 Layer => 4 values) */
      background-size: cover, auto, auto, auto;
      background-position: center, 0 0, 0 0, 0 0;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      backface-visibility:hidden;
      transform: translateZ(0);
    }

    /* Inputs/Textareas müssen selektierbar sein (für Kopieren/Fallback) */
    input, textarea{ user-select: text; -webkit-user-select:text; }

    /* =======================
       LOGIN (Windows 11 Style)
       ======================= */
    body.locked #desktop,
    body.locked .taskbar,
    body.locked #startMenu,
    body.locked #calendarFlyout,
    body.locked #volumeFlyout,
    body.locked #ctxMenu,
    body.locked #ctxSubLinks,
    body.locked #ctxSubNew,
    body.locked #scCtx,
    body.locked #tbCtx,
    body.locked #modalBackdrop{
      pointer-events:none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      filter: none !important;
      transform: none !important;
    }

    .login-screen{
      position: fixed;
      inset: 0;
      z-index: 30000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 22px;
      user-select:none;

      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(.985);
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win);
      will-change: opacity, transform;
    }
    .login-screen.show{
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .login-veil{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.22);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      pointer-events: none;
      z-index: 0;
    }

    .login-panel{
      position: relative;
      z-index: 1;
      width: min(420px, 100%);
      border-radius: 22px;
      background: rgba(28,32,44,.78);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 22px 90px rgba(0,0,0,.60);
      overflow:hidden;
      color: rgba(255,255,255,.92);
      backface-visibility:hidden;
      transform: translateZ(0);
    }

    .login-top{
      padding: 16px 18px 12px;
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .login-time{
      font-weight: 900;
      letter-spacing: .2px;
      line-height: 1.1;
    }
    .login-time .t{ font-size: 18px; }
    .login-time .d{ font-size: 12px; color: rgba(255,255,255,.72); font-weight: 800; margin-top: 2px; }

    .login-body{
      padding: 18px;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .login-user{
      display:flex;
      align-items:center;
      gap: 12px;
      margin-bottom: 4px;
    }
    .login-avatar{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      display:grid;
      place-items:center;
      font-weight: 900;
      color: #e5e7eb;
    }
    .login-usertext{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 0;
    }
    .login-usertext .hello{
      font-weight: 900;
      font-size: 14px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .login-usertext .sub{
      font-size: 12px;
      color: rgba(255,255,255,.70);
      font-weight: 700;
    }

    .login-field{
      display:flex;
      flex-direction:column;
      gap: 6px;
    }
    .login-field label{
      font-size: 12px;
      color: rgba(255,255,255,.75);
      font-weight: 800;
    }
    .login-input{
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      color: #e5e7eb;
      padding: 0 12px;
      outline:none;
      font-weight: 800;
    }
    .login-input::placeholder{ color: rgba(255,255,255,.45); font-weight: 700; }

    .login-actions{
      display:flex;
      gap: 10px;
      justify-content:flex-end;
      align-items:center;
      margin-top: 6px;
      flex-wrap: wrap;
    }

    .login-btn{
      height: 40px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: #e5e7eb;
      cursor: pointer;
      font-weight: 900;
      user-select:none;
    }
    .login-btn:hover{ background: rgba(255,255,255,.12); }
    .login-btn.primary{
      background: rgba(120,200,255,.22);
      border-color: rgba(120,200,255,.35);
    }
    .login-btn:disabled{
      opacity: .55;
      filter: saturate(.85);
      pointer-events:none;
    }

    .login-error{
      min-height: 18px;
      font-size: 12px;
      color: rgba(255,140,140,.95);
      font-weight: 800;
      margin-top: 2px;
    }

    .login-hint{
      font-size: 12px;
      color: rgba(255,255,255,.62);
      font-weight: 700;
      margin-top: 2px;
    }

    .shake{ animation: shake 420ms ease; }
    @keyframes shake{
      0%{ transform: translateX(0); }
      20%{ transform: translateX(-8px); }
      40%{ transform: translateX(8px); }
      60%{ transform: translateX(-6px); }
      80%{ transform: translateX(6px); }
      100%{ transform: translateX(0); }
    }

    /* =======================
       Win11 Login (neues Design – login.html)
       ======================= */
    body.login-win11{
      overflow:hidden;
      background: #050816;
    }
    .w11-login-bg{
      position: fixed;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(1200px 900px at 25% 25%, rgba(60,120,255,.55), rgba(10,18,48,0) 60%),
        radial-gradient(900px 700px at 70% 55%, rgba(120,70,255,.45), rgba(10,18,48,0) 62%),
        radial-gradient(900px 700px at 55% 85%, rgba(0,220,255,.22), rgba(10,18,48,0) 70%),
        linear-gradient(135deg, #06112b, #040713);
      filter: blur(0px) saturate(1.05);
    }
    .w11-login-dim{
      position: fixed;
      inset: 0;
      z-index: 2;
      background: rgba(0,0,0,.22);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .w11-login-screen{
      position: fixed;
      inset: 0;
      z-index: 30000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 22px;
      user-select:none;

      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(.985);
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win);
      will-change: opacity, transform;
    }
    .w11-login-screen.show{
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .w11-login-center{
      position: relative;
      z-index: 3;
      width: min(360px, calc(100% - 40px));
display:flex;
      flex-direction:column;
      align-items:center;
      gap: 16px;
    }

    .w11-user{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px;
      margin-bottom: 2px;
      color: rgba(255,255,255,.94);
      text-shadow: 0 8px 40px rgba(0,0,0,.55);
    }
    .w11-user-avatar{
      width: 86px;
height: 86px;
border-radius: 999px;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 14px 50px rgba(0,0,0,.45);
    }
    .w11-user-avatar svg{
      width: 44px;
height: 44px;
color: rgba(255,255,255,.9);
    }
    .w11-user-name{
      font-weight: 800;
      letter-spacing: .2px;
      font-size: 24px;
      text-align: center;
      width: 100%;
}

    .w11-form{
      width: min(280px, 100%);
      padding: 0;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .w11-field{ width: 100%; }
    .w11-input{
      width: 100%;
      height: 34px;
      border-radius: 2px;
      border: 1px solid rgba(255,255,255,0);
      border-bottom: 1px solid rgba(255,255,255,.22);
      background: rgba(0,0,0,.28);
      color: rgba(255,255,255,.92);
      padding: 0 10px;
      outline:none;
      font-weight: 650;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
      transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    }
    .w11-input:hover{
      border-color: rgba(255,255,255,.16);
      border-bottom-color: rgba(255,255,255,.34);
      background: rgba(0,0,0,.31);
    }
    .w11-input::placeholder{ color: rgba(255,255,255,.60); }
    .w11-input:focus{
      border-color: rgba(200,230,255,.55);
      border-bottom-color: rgba(200,230,255,.90);
      background: rgba(0,0,0,.34);
      box-shadow: 0 16px 40px rgba(0,0,0,.22);
    }
    .w11-pass-wrap{ position: relative; }
    /* make room for the Win11-style arrow button inside the password field */
    .w11-pass-wrap .w11-input{ padding-right: 44px; }

    .w11-pass-go{
      position:absolute;
      right: 0;
      top: 0;
      width: 34px;
      height: 34px;
      border: none;
      border-left: 1px solid rgba(255,255,255,0);
      background: transparent;
      color: rgba(255,255,255,.92);
      cursor: pointer;
      display:grid;
      place-items:center;
      transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
    }
    .w11-pass-wrap:hover .w11-pass-go{
      border-left-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
    }
    .w11-pass-go:hover{ background: rgba(255,255,255,.08); }
    .w11-pass-go:active{ transform: translateY(1px); }
    .w11-pass-go svg{ width: 18px; height: 18px;
}
    .w11-pass-reveal{
      position:absolute;
      right: 6px;
      top: 6px;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      display:grid;
      place-items:center;
      color: rgba(255,255,255,.85);
      cursor: pointer;
    }
    .w11-pass-reveal:hover{ background: rgba(255,255,255,.10); }
    .w11-pass-reveal svg{ width: 18px; height: 18px; }

    .w11-actions{
      margin-top: 6px;
      display:flex;
      gap: 10px;
      justify-content:center;
      align-items:center;
      flex-wrap: wrap;
    }
    .w11-btn{
      height: 36px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      cursor: pointer;
      font-weight: 800;
      user-select:none;
      box-shadow: 0 12px 36px rgba(0,0,0,.25);
    }
    .w11-btn:hover{ background: rgba(255,255,255,.16); }
    .w11-btn.ghost{
      background: rgba(0,0,0,.20);
      border-color: rgba(255,255,255,.12);
    }
    .w11-btn:disabled{ opacity:.55; pointer-events:none; }

    .w11-links{
      margin-top: 6px;
      display:flex;
      flex-direction:column;
      gap: 6px;
      align-items:center;
      color: rgba(255,255,255,.80);
      font-size: 12px;
      font-weight: 650;
      text-shadow: 0 10px 40px rgba(0,0,0,.45);
    }
    .w11-link.muted{ opacity: .78; }
    .w11-link-action{
      color: rgba(230,240,255,.92);
      text-decoration: none;
      cursor: pointer;
    }
    .w11-link-action:hover{ text-decoration: underline; }
    .w11-hidden{ display:none; }

    .w11-login-bottom{
      position: fixed;
      right: 18px;
      bottom: 16px;
      z-index: 4;
      pointer-events:auto;
}
    .w11-br{
      display:flex;
      gap: 10px;
      align-items:center;
      color: rgba(255,255,255,.90);
      font-weight: 700;
      font-size: 12px;
      text-shadow: 0 10px 40px rgba(0,0,0,.55);
    }
    .w11-br-item{
      padding: 6px 8px;
      border-radius: 10px;
      background: transparent;
border: 1px solid transparent;
}
    .w11-br-btn{
      width: 34px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      display:grid;
      place-items:center;
      color: rgba(255,255,255,.92);
      cursor: default;
      transition: background 140ms ease, border-color 140ms ease;
    }
    .w11-br-btn:hover{
      background: rgba(0,0,0,.22);
      border-color: rgba(255,255,255,.14);
    }
    .w11-br-btn:active{ transform: translateY(1px); }
    .w11-br-btn svg{ width: 18px; height: 18px; }
    .w11-br-lang{
      width: auto;
      padding: 0 10px;
      font-weight: 750;
      letter-spacing: .2px;
    }


    /* login error should look clean on the new layout */
    body.login-win11 .login-error{
      margin-top: 2px;
      text-align:center;
      color: rgba(255,160,160,.96);
      text-shadow: 0 10px 30px rgba(0,0,0,.45);
    }

    /* =======================
       Anmelden/Abmelden Overlay (Win11-ish)
       ======================= */
    .overlay{
      position: fixed;
      inset: 0;
      z-index: 31000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 22px;

      opacity: 0;
      pointer-events: none;
      transform: translateY(10px) scale(.985);
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win);
      will-change: opacity, transform;
    }
    .overlay.show{
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .overlay-veil{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .overlay-panel{
      position: relative;
      width: min(360px, 100%);
      border-radius: 22px;
      background: rgba(28,32,44,.82);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 22px 90px rgba(0,0,0,.60);
      overflow:hidden;
      color: #e5e7eb;
      padding: 18px;
      display:flex;
      align-items:center;
      gap: 14px;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
    .spinner{
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,.25);
      border-top-color: rgba(120,200,255,.90);
      animation: spin 700ms linear infinite;
      flex: 0 0 auto;
    }
    @keyframes spin{ to{ transform: rotate(360deg); } }
    .overlay-text{
      display:flex;
      flex-direction:column;
      gap: 4px;
      min-width: 0;
    }
    .overlay-text .title{
      font-weight: 900;
      letter-spacing: .2px;
    }
    .overlay-text .sub{
      font-size: 12px;
      color: rgba(255,255,255,.70);
      font-weight: 700;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }

    /* Desktop tint overlay */
    .bg-tint-layer{
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background: transparent;
      mix-blend-mode: normal;
      z-index: 0;
      backface-visibility:hidden;
      transform: translateZ(0);
    }

    /* Desktop area */
    .desktop{
      position:relative;
      height: calc(100% - var(--taskbar-h));
      padding: 18px;
      z-index: 1;
      backface-visibility:hidden;
      transform: translateZ(0);
    }

    /* =======================
       Sticky note (top-right)
       ======================= */
    .sticky-note{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 320px;
  min-height: 220px;
  border-radius: 16px;
  background: rgba(18,25,40,.78);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  color: #e5e7eb;
  z-index: 5;

  /* Anti-flicker (Firefox/Windows) */
  isolation: isolate;
  contain: layout paint;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.sticky-top{
      height: 46px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 12px 0 12px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .sticky-title{
      display:flex;
      align-items:center;
      gap: 10px;
      font-weight: 900;
      letter-spacing: .2px;
      font-size: 13px;
      color: #e5e7eb;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .sticky-badge{
      width: 26px;
      height: 26px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(120,200,255,.18);
      display:grid;
      place-items:center;
      font-weight: 900;
    }
    .sticky-badge.is-img{ background: rgba(255,255,255,.06); }
    .sticky-badge.is-img img{
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
      image-rendering: -webkit-optimize-contrast;
    }
    .sticky-hint{
      font-size: 11px;
      color: rgba(255,255,255,.62);
      font-weight: 800;
      user-select:none;
  position:relative;
  z-index:4;
      white-space: nowrap;
    }

    .sticky-body{
      padding: 12px 12px 12px;
      font-size: 13px;
      line-height: 1.35;
      white-space: normal;
      word-break: break-word;
      max-height: 420px;
      overflow:auto;
      overflow-x:hidden;
    }
    .sticky-empty{
      color: rgba(255,255,255,.62);
      font-style: italic;
      padding: 12px;
    }
    .sticky-item{
      position: relative;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      padding: 10px 10px;
      margin-bottom: 10px;
      overflow:hidden;
    }

    .sticky-item.has-tags{
      /* room for pin/label in the top-right corner */
      padding-top: 28px;
    }

    .sticky-tags{
      display:flex;
      align-items:center;
      gap: 6px;
      margin-bottom: 0;
      position: absolute;
      top: 8px;
      right: 8px;
      justify-content: flex-end;
    }
    .sticky-pin{
      font-size: 12px;
      opacity: .85;
    }
    .sticky-label{
      font-size: 10px;
      line-height: 1;
      padding: 4px 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--lbl, #eab308) 35%, transparent);
      border: 1px solid color-mix(in srgb, var(--lbl, #eab308) 60%, transparent);
      color: rgba(255,255,255,.90);
      white-space: nowrap;
    }

    .sticky-meta{
      font-size: 10px;
      color: rgba(255,255,255,.55);
      margin-top: 6px;
      display:block;
      white-space: normal;
      overflow:hidden;
    }
    .sticky-meta > div{ line-height: 1.2; }
    .sticky-meta-line{ font-size: 10px; }
    .sticky-who{ display:block; font-size: 10px; }
    .sticky-rank{
      display:inline-block;
      padding:0;
      border-radius:0;
      border:none;
      background:transparent;
      color: inherit;
      font-weight: inherit;
      font-size: inherit;
      line-height: inherit;
      margin-right: 6px;
      flex: 0 0 auto;
    }
    .sticky-name{ font-size: 10px; }

    .sticky-content{
      font-size: 13px;
      line-height: 1.35;
      word-break: break-word;
      white-space: normal;
      color: #e5e7eb;
    }

    /* Shortcut (snap-to-grid) */
    .shortcut{
      width: 100px;
      position:absolute;
      left: 18px;
      top: 18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 6px;
      padding: 8px 6px;
      border-radius: 10px;
      cursor: pointer;
      touch-action:none;
      z-index: 2;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
    .shortcut:focus,
    .shortcut:hover{
      background: rgba(255,255,255,.08);
      outline: none;
    }
    /* Entfernt den Linksklick-/Active-Effekt auf Desktop-Verknüpfungen */
    .shortcut:active{ background: transparent; }

    .icon{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--app-bg, rgba(255,255,255,.92));
      color: var(--app-fg, #0a2a52);
      position: relative;
      display:grid;
      place-items:center;
      font-weight: 800;
      letter-spacing:.5px;
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
      font-size: 12px;
      border: 1px solid rgba(255,255,255,.14);
    }

    /* Icon images */
    .icon.is-img{
      /* Liquid-glass plate for transparent PNGs (Win11-ish) */
      position: relative;
      background: transparent !important;
      border: none !important;
	      /* ultra-subtle (more transparent) */
	      box-shadow: 0 4px 10px rgba(0,0,0,.12);
      padding: 0;
    }
    .icon.is-img::before{
      content:"";
      position:absolute;
      inset: 0;
      border-radius: 12px;
      /* Slightly milky liquid glass (still subtle, Win11-ish) */
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.06),
        0 2px 10px rgba(0,0,0,.08);
      backdrop-filter: blur(2.2px) saturate(1.02);
      -webkit-backdrop-filter: blur(2.2px) saturate(1.02);
      pointer-events:none;
    }

    .shortcut .icon{ position: relative; }

/* Desktop icon notification bubble (WhatsApp-like) */
    .shortcut .icon .sc-notif{
  position:absolute !important;
  top: -8px !important;
  right: -8px !important;
  bottom:auto !important;
  left:auto !important;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;

  display:none;
  align-items:center;
  justify-content:center;

  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;

  border: 2px solid rgba(10,42,82,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);

  pointer-events:none;
  user-select:none;
  z-index: 6;
}
    .icon.is-img img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 12px;
      display:block;
      user-select:none;
  position:relative;
  z-index:4;
      pointer-events:none;
      position: relative;
      z-index: 1;
    }

    .shortcut .label{
      font-size: 12px;
      color: var(--text);
      text-align:center;
      line-height: 1.15;
      text-shadow: 0 1px 2px rgba(0,0,0,.45);
      width: 100%;
      padding: 0 2px;

      /* 2 Zeilen erlauben (z.B. "Strafverzeichnis") */
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* App icon themes (Desktop + Start + Window title icon) */
    .shortcut[data-app="sheet"], .sm-app[data-open="sheet"], .window[data-app="sheet"]{
      --app-bg: linear-gradient(135deg, rgba(34,197,94,.95), rgba(34,197,94,.55));
      --app-fg: rgba(255,255,255,.96);
    }
    .shortcut[data-app="doc"], .sm-app[data-open="doc"], .window[data-app="doc"]{
      --app-bg: linear-gradient(135deg, rgba(59,130,246,.95), rgba(59,130,246,.55));
      --app-fg: rgba(255,255,255,.96);
    }
    .shortcut[data-app="staff"], .sm-app[data-open="staff"], .window[data-app="staff"]{
      --app-bg: linear-gradient(135deg, rgba(168,85,247,.95), rgba(168,85,247,.55));
      --app-fg: rgba(255,255,255,.96);
    }
    .shortcut[data-app="notes"], .sm-app[data-open="notes"], .window[data-app="notes"]{
      --app-bg: linear-gradient(135deg, rgba(245,158,11,.95), rgba(245,158,11,.55));
      --app-fg: rgba(10,18,32,.98);
    }
    .shortcut[data-app="laws"], .sm-app[data-open="laws"], .window[data-app="laws"]{
      --app-bg: linear-gradient(135deg, rgba(239,68,68,.95), rgba(239,68,68,.55));
      --app-fg: rgba(255,255,255,.96);
    }
    .shortcut[data-app="straf"], .sm-app[data-open="straf"], .window[data-app="straf"]{
      --app-bg: linear-gradient(135deg, rgba(6,182,212,.95), rgba(6,182,212,.55));
      --app-fg: rgba(10,18,32,.98);
    }
    --strafkatalog-theme--
    .shortcut[data-app="strafkatalog"], .sm-app[data-open="strafkatalog"], .window[data-app="strafkatalog"]{
      --app-bg: linear-gradient(135deg, rgba(167,139,250,.95), rgba(167,139,250,.55));
      --app-fg: rgba(10,18,32,.98);
    }

    .sm-app[data-open="settings"], .shortcut[data-app="settings"], .window[data-app="settings"]{
      --app-bg: linear-gradient(135deg, rgba(148,163,184,.95), rgba(148,163,184,.55));
      --app-fg: rgba(10,18,32,.98);
    }


    .rename-input{
      width: 100%;
      height: 22px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(0,0,0,.35);
      color: rgba(255,255,255,.95);
      outline:none;
      padding: 0 6px;
      font-size: 12px;
      text-align:center;
    }

    /* Taskbar */
    .taskbar{
      position:fixed;
      left:0; right:0; bottom:0;
      height: var(--taskbar-h);
      background: rgba(18,25,40,.62);
      border-top: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      display:flex;
      align-items:center;
      padding: 0 12px;
      z-index: 9000;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
    .tb-left, .tb-center, .tb-right{
      display:flex;
      align-items:center;
      gap: 4px;
}
    .tb-left{ width: 200px; }
    .tb-center{ flex: 1; justify-content:center; gap: 10px; }
    .tb-right{ width: 240px; justify-content:flex-end; }

    .tb-icon{
      width: 40px;
      height: 40px;
      border-radius: 12px;
	      border: 1px solid transparent;
	      background: transparent; /* nur Hover soll "Kontur"/Hintergrund zeigen */
      display:grid;
      place-items:center;
      cursor: pointer;
      color: #e5e7eb;
      font-weight: 900;
      overflow:hidden;
    }
    .tb-icon:hover{
	      background: rgba(255,255,255,.10);
	      border-color: rgba(255,255,255,.18);
    }

    .tb-start-img{
      width: 22px;
      height: 22px;
      object-fit: contain;
      display:block;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
      user-select:none;
  position:relative;
  z-index:4;
      pointer-events:none;
    }

    .tb-app{
      position:relative;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      display:grid;
      place-items:center;
      cursor: pointer;
      font-weight: 900;
      color: #e5e7eb;
      user-select:none;
  position:relative;
  z-index:4;
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      will-change: transform, opacity;
      transition: background var(--anim-fast) ease, border-color var(--anim-fast) ease, transform var(--anim-med) var(--ease-win), opacity var(--anim-fast) ease;
    }

    /* Taskbar button enter/exit animation (Win11-ish) */
    .tb-app.tb-enter,
    .tb-app.tb-exit{
      opacity: 0;
      transform: translateY(8px) scale(.88) translateZ(0);
    }

    .tb-app.tb-exit{
      pointer-events: none;
    }

    /* Minimize feedback (keeps icon visible) */
    .tb-app.tb-min{
      animation: tbMinPulse 180ms var(--ease-win);
    }
    @keyframes tbMinPulse{
      0%{ transform: translateY(0) scale(1) translateZ(0); }
      50%{ transform: translateY(1px) scale(.92) translateZ(0); }
      100%{ transform: translateY(0) scale(1) translateZ(0); }
    }


    /* Taskbar app icon images */
    .tb-app.is-img{
      font-size: 0;
    }
    .tb-app.is-img img{
      width: 22px;
      height: 22px;
      object-fit: contain;
      display:block;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
      user-select:none;
  position:relative;
  z-index:4;
      pointer-events:none;
    }
    .tb-app:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); }
    .tb-app::after{
      content:"";
      position:absolute;
      bottom: 6px;
      width: 16px;
      height: 3px;
      border-radius: 99px;
      background: rgba(255,255,255,.35);
      opacity: 1;
    }
    .tb-app.active::after{ background: var(--sel-blue-thumb); }
.sys-tray{
      height: 40px;
      display:flex;
      align-items:center;
      gap: 4px;            /* WLAN/Lautstärke näher zur Uhr */
      padding: 0 2px;
      border-radius: 12px;
      border: none;        /* Gruppen-Kontur entfernen */
      background: transparent;
    }
    .tray-sep{ width: 1px; height: 22px; background: rgba(255,255,255,.14); }

    .tray-btn{
      width: var(--tray-sz, 34px);
      height: var(--tray-sz, 34px);
      border-radius: 10px;
      display:grid;
      place-items:center;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
	      background: transparent; /* Kontur nur beim Hover */
	      border: 1px solid transparent;
    }
    .tray-btn:hover{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.12);
    }
    .tray-btn img{ width:16px; height:16px; display:block; }

    .clock{
      font-size: 12px;
      line-height: 1.08;
      color: var(--text);
      min-width: 0;
      width: max-content; /* Hover-Rahmen soll eng am Inhalt sitzen */
      cursor: pointer;
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      user-select:none;
  position:relative;
  z-index:4;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
}
    .clock:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

    /* Window instances */
    .window{
      position:absolute;
      left: 140px;
      top: 70px;
      width: min(980px, calc(100% - 220px));
      height: min(640px, calc(100% - 140px));
      border-radius: var(--radius);
      background: rgba(18,25,40,.82);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-width: 360px;
      min-height: 220px;

      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win);
      will-change: opacity, transform;
      z-index: 50;
      backface-visibility:hidden;
    }
    .window.is-hidden{
      opacity: 0;
      transform: translateY(10px) scale(.985) translateZ(0);
      pointer-events: none;
    }

    /* Win11-like window animations (open/close/min/max) */
    .window.is-opening{
      opacity: 0;
      transform: translateY(16px) scale(.985) translateZ(0);
      pointer-events: none;
    }
    .window.is-closing{
      opacity: 0;
      transform: translateY(12px) scale(.985) translateZ(0);
      pointer-events: none;
    }


    .titlebar{
      min-height: 44px;
      display:flex;
      align-items:stretch;
      justify-content:space-between;
      /* Windows 11-like: window controls are flush to the top/right without inner margins */
      padding: 0 0 0 12px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,.10);
      cursor: default;
      flex: 0 0 auto;
    }
    .titlebar:active{ cursor: default; }

    .win-title{
      display:grid;
      grid-template-columns: 26px 1fr;
      grid-template-rows: auto auto;
      align-items:center;
      column-gap: 10px;
      color: #e5e7eb;
      font-size: 13px;
      font-weight: 600;
      min-width: 0;
      align-self: center;
      padding: 6px 0;
    }
    .mini-icon{ grid-column:1; grid-row:1; }

    /* Window mini icon images */
    .mini-icon.is-img{
      background: transparent !important;
      border: none !important;
      padding: 0;
    }
    .mini-icon.is-img img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 6px;
      display:block;
      user-select:none;
  position:relative;
  z-index:4;
      pointer-events:none;
    }
    .win-title-stack{ grid-column:2; grid-row:1; min-width:0; }
    .win-nav.under-title{ grid-column: 1 / span 2; grid-row:2; justify-self:start; margin-top:4px; display:flex; gap:6px; }

    .win-title-stack{
      display:flex;
      flex-direction:column;
      gap: 4px;
      line-height: 1.05;
      min-width: 0;
    }
    .win-title-text{ min-width:0; }
    .win-nav.under-title{
      display:flex;
      gap: 6px;
      align-items:center;
      justify-content:flex-start;
      margin-top: 0px;
    }

    .mini-icon{
      width: 18px;
      height: 18px;
      border-radius: 6px;
      background: var(--app-bg, rgba(255,255,255,.92));
      display:grid;
      place-items:center;
      font-size: 11px;
      font-weight: 900;
      color: var(--app-fg, #0a2a52);
      flex: 0 0 auto;
      border: 1px solid rgba(255,255,255,.14);
    }

    .win-controls{
      display:flex;
      gap: 0;
      flex: 0 0 auto;
      height: 100%;
      align-self: stretch;
    }

    .ctrl{
      width: 46px;
      height: 100%;
      border-radius: 0;
      display:grid;
      place-items:center;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
      position: relative;

      /* Hide fallback glyphs (— □ ✕) and draw Win11-like icons via CSS */
      font-size: 0;
      color: rgba(255,255,255,.88);
      background: transparent;
      transition: background var(--anim-fast) ease, color var(--anim-fast) ease;
    }
    .ctrl:hover{ background: rgba(255,255,255,.08); }

    /* Close button should respect the window corner radius */
    .ctrl.close{ border-top-right-radius: var(--radius); }

    /* Minimize */
    .ctrl[data-act="min"]::before{
      content:"";
      position:absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      /* Center the glyph horizontally + vertically (Win11-like: slightly lower) */
      transform: translate(-50%, -50%) translateY(6px);
    }

    /* Maximize (default) */
    .ctrl[data-act="max"]::before{
      content:"";
      position:absolute;
      width: 12px;
      height: 10px;
      border: 2px solid currentColor;
      border-radius: 2px;
      box-sizing: border-box;
    }

    /* Restore icon when window is maximized */
    .window.max .ctrl[data-act="max"]::before{
      width: 10px;
      height: 8px;
      border: 2px solid currentColor;
      border-radius: 2px;
      transform: translate(2px,-2px);
      background: transparent;
    }
    .window.max .ctrl[data-act="max"]::after{
      content:"";
      position:absolute;
      width: 10px;
      height: 8px;
      border: 2px solid currentColor;
      border-radius: 2px;
      box-sizing: border-box;
      transform: translate(-2px,2px);
      background: transparent;
    }

    /* Close */
    .ctrl.close::before,
    .ctrl.close::after{
      content:"";
      position:absolute;
      width: 14px;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
    }
    .ctrl.close::before{ transform: rotate(45deg); }
    .ctrl.close::after{ transform: rotate(-45deg); }

    .ctrl.close:hover{
      background: #E11D48;
      color: #fff;
    }

    /* Light theme tuning for Win11 controls */
    .theme-light .ctrl{ color: rgba(15,23,42,.86); }
    .theme-light .ctrl:hover{ background: rgba(0,0,0,.06); }
    .theme-light .ctrl.close:hover{ background: #E11D48; color:#fff; }
    .window-body{
      flex: 1;
      background: #0f172a;
      overflow:auto;
      min-height:0;
      transform: translateZ(0);
    }

    /* Dialog/Modal: kein horizontales Scrollen am Fenster selbst */
    .window[data-app="dialog"] .window-body{ overflow-x:hidden; }
    .window[data-app="dialog"] .rt-editor{ overflow-x:auto; }

    iframe{ width:100%; height:100%; border:0; background: white; }

    .window.max{
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      height: calc(100% - var(--taskbar-h)) !important;
      border-radius: 0 !important;
    }

    /* Resizers */
    .resizer{ position:absolute; z-index: 5; }
    .resizer.n{ top:-4px; left:10px; right:10px; height:8px; cursor: ns-resize; }
    .resizer.s{ bottom:-4px; left:10px; right:10px; height:8px; cursor: ns-resize; }
    .resizer.e{ right:-4px; top:10px; bottom:10px; width:8px; cursor: ew-resize; }
    .resizer.w{ left:-4px; top:10px; bottom:10px; width:8px; cursor: ew-resize; }
    .resizer.ne{ right:-4px; top:-4px; width:12px; height:12px; cursor: nesw-resize; }
    .resizer.nw{ left:-4px; top:-4px; width:12px; height:12px; cursor: nwse-resize; }
    .resizer.se{ right:-4px; bottom:-4px; width:12px; height:12px; cursor: nwse-resize; }
    .resizer.sw{ left:-4px; bottom:-4px; width:12px; height:12px; cursor: nesw-resize; }
    .window.max .resizer{ display:none; }

    /* Calendar flyout */
    .calendar-flyout{
      position: fixed;
      right: 10px;
      bottom: calc(var(--taskbar-h) + 10px);
      width: 332px;
      border-radius: 18px;
      /* Match Startmenu look */
      background: rgba(28,32,44,.93);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 60px rgba(0,0,0,.60);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
      z-index: 9999;
      user-select: none;

      opacity: 0;
      transform: translateY(14px) scale(.985) translateZ(0);
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win),
        visibility 0s linear var(--anim-fast);
      will-change: opacity, transform;
      backface-visibility:hidden;
    }
    .calendar-flyout.show{
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      pointer-events: auto;
      visibility: visible;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win),
        visibility 0s linear 0s;
    }

    .cal-top{
      padding: 10px 10px 8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      color: #e5e7eb;
      font-weight: 600;
      font-size: 13px;
      background: rgba(255,255,255,.03);
    }
    .cal-close{
      width: 30px;
      height: 26px;
      border-radius: 8px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      cursor: pointer;
      color: rgba(255,255,255,.88);
      user-select:none;
  position:relative;
  z-index:4;
    }
    .cal-close:hover{ background: rgba(255,255,255,.08); }

    .cal-month{
      padding: 10px 10px 8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      color: #e5e7eb;
      font-weight: 700;
    }
    .cal-nav{ display:flex; gap: 6px; margin-left:auto; }
    .cal-btn{
      width: 28px;
      height: 26px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      display:grid;
      place-items:center;
      color: rgba(255,255,255,.88);
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .cal-btn:hover{ background: rgba(255,255,255,.08); }

    .cal-grid{ padding: 0 10px 10px; }
    .cal-weekdays{
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      padding: 4px 4px 6px;
      color: rgba(255,255,255,.70);
      font-size: 12px;
    }
    .cal-days{
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      padding: 0 4px 6px;
    }

    .day{
      height: 40px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      color: rgba(255,255,255,.90);
      font-size: 13px;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .day:hover{ background: rgba(255,255,255,.06); }
    .day.muted{ color: rgba(255,255,255,.45); font-weight: 700; }
    .day.today{
      background: rgba(120,200,255,.25);
      border: 1px solid rgba(120,200,255,.35);
    }
    .day.selected{
      background: rgba(64,176,255,.85);
      color: #0b1a2a;
      font-weight: 800;
    }

    /* Volume flyout */
    .volume-flyout{
      position: fixed;
      right: 10px;
      bottom: calc(var(--taskbar-h) + 10px);
      width: 320px;
      border-radius: 18px;
      background: rgba(28,32,44,.93);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 20px 60px rgba(0,0,0,.55);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
      z-index: 10001;
      user-select: none;

      opacity: 0;
      transform: translateY(14px) scale(.985) translateZ(0);
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win),
        visibility 0s linear var(--anim-fast);
      will-change: opacity, transform;
      backface-visibility:hidden;
    }
    .volume-flyout.show{
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      pointer-events: auto;
      visibility: visible;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win),
        visibility 0s linear 0s;
    }
    .vol-top{
      padding: 10px 10px 8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.10);
      color: #e5e7eb;
      font-weight: 900;
      font-size: 13px;
    }
    .vol-close{
      width: 30px;
      height: 26px;
      border-radius: 8px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(255,255,255,0);
      background: rgba(255,255,255,.04);
      cursor: pointer;
      color: rgba(255,255,255,.88);
      user-select:none;
  position:relative;
  z-index:4;
    }
    .vol-close:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

    .vol-body{
      padding: 12px 12px 14px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      color: #e5e7eb;
    }
    .vol-row{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .vol-ico{
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0);
      background: rgba(255,255,255,.06);
      display:grid;
      place-items:center;
      font-size: 16px;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .vol-ico:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
#volMute.vol-ico{ border-radius: 0 !important; border: 1px solid rgba(255,255,255,0); background: transparent; }
#volMute.vol-ico:hover{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.10); }
    .vol-val{
      min-width: 46px;
      text-align:right;
      font-weight: 900;
      color: rgba(255,255,255,.80);
      font-size: 12px;
    }

    input[type="range"].vol-slider{
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 34px;
      background: transparent;
      outline:none;
    }
    input[type="range"].vol-slider::-webkit-slider-runnable-track{
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.10);
    }
    input[type="range"].vol-slider::-webkit-slider-thumb{
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      margin-top: -6px;
      background: var(--sel-blue-thumb);
      border: 1px solid rgba(255,255,255,.22);
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
    }
    input[type="range"].vol-slider::-moz-range-track{
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.10);
    }
    input[type="range"].vol-slider::-moz-range-thumb{
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: var(--sel-blue-thumb);
      border: 1px solid rgba(255,255,255,.22);
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
    }

    .vol-hint{
      font-size: 12px;
      color: rgba(255,255,255,.65);
      font-weight: 700;
    }

    /* Start menu */
    .startmenu{
      position: fixed;
      left: 12px;
      bottom: calc(var(--taskbar-h) + 10px);
      width: 420px;
      height: 520px;
      border-radius: 18px;
      background: rgba(28,32,44,.93);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 18px 60px rgba(0,0,0,.60);
      z-index: 11000;
      overflow:hidden;
      color: #e5e7eb;
      display:flex;
      flex-direction:column;

      opacity: 0;
      transform: translateY(14px) scale(.985) translateZ(0);
      pointer-events: none;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win);
      will-change: opacity, transform;
      backface-visibility:hidden;
    }
    .startmenu.show{
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      pointer-events: auto;
    }

    .sm-top{
      padding: 14px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .sm-search{
      width: 100%;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: #e5e7eb;
      padding: 0 12px;
      outline:none;
    }

    .sm-body{
      padding: 14px;
      display:flex;
      flex-direction:column;
      gap: 14px;
      flex:1;
      overflow-y:auto;
      overflow-x:hidden;
      min-height:0;
      padding-bottom: 18px;
    }
    .sm-section-title{
      font-size: 13px;
      font-weight: 800;
      color: rgba(255,255,255,.90);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .sm-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .sm-app{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      border-radius: 14px;
      padding: 10px 8px;
      cursor: pointer;
      display:flex;
      flex-direction:column;
      gap: 8px;
      align-items:center;
      justify-content:flex-start;
      user-select:none;
  position:relative;
  z-index:4;
      text-align:center;
    }
    .sm-app:hover{ background: rgba(255,255,255,.10); }
    .sm-app .sm-ico{
      width: 34px; height: 34px; border-radius: 12px;
      background: var(--app-bg, rgba(255,255,255,.92));
      color: var(--app-fg, #0a2a52);
      display:grid; place-items:center;
      font-weight: 900;
      font-size: 12px;
      border: 1px solid rgba(255,255,255,.14);
    }

    /* Startmenu icon images */
    .sm-app .sm-ico.is-img{
      background: transparent !important;
      border: none !important;
      padding: 0;
    }
    .sm-app .sm-ico.is-img img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 12px;
      display:block;
      user-select:none;
  position:relative;
  z-index:4;
      pointer-events:none;
    }
    .sm-app .sm-name{
      font-size: 11px;
      color: #e5e7eb;
      line-height:1.1;
      width: 100%;
      text-align:center;
    }

    .sm-bottom{
      position: relative;
      left:0; right:0; bottom:0;
      height: 62px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 14px;
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      flex: 0 0 auto;
    }
    .sm-user{ display:flex; align-items:center; gap: 10px; }
    .sm-avatar{
      width: 30px; height: 30px; border-radius: 10px;
      background: rgba(255,255,255,.12);
      display:grid; place-items:center;
      border: 1px solid rgba(255,255,255,.14);
      font-weight: 900;
    }
    .sm-power{
      width: 40px; height: 40px; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      display:grid; place-items:center;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .sm-power:hover{ background: rgba(255,255,255,.10); }

    
    /* Strafverzeichnis */
    .sv-wrap{
      height: 100%;
      min-height: 100%;
      display:flex;
      flex-direction:column;
      gap: 10px;
      padding: 12px;
      color: #e5e7eb;
    }
    .sv-toolbar{
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap: wrap;
    }
    .sv-search{
      flex: 1;
      min-width: 280px;
      height: 40px;
      border-radius: 12px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: #0b1220;
      color: #e5e7eb;
      outline:none;
    }

    .sv-search.is-compact{
      min-width: 0 !important;
      width: auto;
      height: 36px;
    }
    .sv-search:focus{ border-color: rgba(255,255,255,.22); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }

    /* Karte: Suche Marker – wie Strafverzeichnis-Suche */
    .km-search{
      flex: 1;
      min-width: 280px;
      height: 40px;
      border-radius: 12px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: #0b1220;
      color: #e5e7eb;
      outline:none;
    }
    .km-search:focus{ border-color: rgba(255,255,255,.22); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }


    .sv-tablewrap{ flex:1; min-height:0; overflow:auto; }
    .sv-table{
      width: 100%;
      border-collapse: collapse;
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.12);
      background: #0b1220;
    }
    .sv-table thead th{
      text-align:left;
      padding: 10px 12px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(255,255,255,.72);
      background: #111c2e;
      border-bottom: 1px solid rgba(255,255,255,.10);
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .sv-table tbody td{
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      font-size: 13px;
      color: rgba(255,255,255,.90);
    }
    .sv-table tbody tr{ cursor: pointer; }
    .sv-table tbody tr:hover{ background: rgba(255,255,255,.04); }
    .sv-table tbody tr.sv-selected{ outline: 2px solid rgba(59,130,246,.35); outline-offset: -2px; background: rgba(59,130,246,.10); }

    .sv-badge{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      white-space: nowrap;
    }
    .sv-badge.lock{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
    .sv-badge.ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }

    .sv-person-head{
      display:flex;
      gap: 12px;
      align-items:center;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: #0b1220;
      margin-bottom: 12px;
    }
    .sv-mug{
      width: 64px; height: 84px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      overflow:hidden;
      background: #0b1220;
      flex: 0 0 auto;
    }
    .sv-mug img{ width:100%; height:100%; object-fit:cover; display:block; }

    .sv-folders{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
    }
    .sv-folder{
      border: 1px solid rgba(255,255,255,.12);
      background: #0b1220;
      border-radius: 16px;
      padding: 12px;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .sv-folder:hover{ background: rgba(255,255,255,.04); }
    .sv-folder.is-selected{
      background: rgba(120,200,255,.10);
      border-color: rgba(120,200,255,.55);
      box-shadow: 0 0 0 1px rgba(120,200,255,.28) inset, 0 14px 44px rgba(0,0,0,.40);
    }
    .sv-folder.is-selected .ficon{
      background: rgba(120,200,255,.16);
      border-color: rgba(120,200,255,.35);
    }
    .sv-folder.type-fahndung.is-selected{
      box-shadow: 0 0 0 1px rgba(255,159,67,.30) inset, 0 14px 44px rgba(0,0,0,.40);
    }
    .sv-folder.type-haftbefehl.is-selected{
      box-shadow: 0 0 0 1px rgba(239,68,68,.28) inset, 0 14px 44px rgba(0,0,0,.40);
    }
    .sv-folder .az{ font-weight: 900; letter-spacing:.02em; }
    .sv-folder .meta{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.70); display:flex; flex-wrap:wrap; gap: 8px; }
    .sv-kv{
      display:grid;
      grid-template-columns: repeat(3, max-content);
      gap: 8px 14px;
      align-items:center;
      color: rgba(255,255,255,.78);
      font-size: 12px;
    }
    .sv-kv > div{ display:flex; align-items:center; gap: 6px; }

    
    /* Stichpunkte */
    .sv-bullets{
      margin: 8px 0 0 18px;
      padding: 0;
      color: rgba(255,255,255,.86);
      font-size: 13px;
      line-height: 1.45;
    }
    .sv-bullets li{ margin: 4px 0; }

    .sv-sachverhalt-ta{
      width:100%;
      min-height:220px;
      resize: vertical;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:#0b1220;
      color: #e5e7eb;
      padding: 14px 16px;
      outline:none;
      font: inherit;
      line-height:1.45;
      white-space: pre-wrap;
      text-indent: 0 !important;
    }

/* Delikt-Liste (Akte hinzufügen) */
    .sv-delict-table{
      /* Compact list for selected delicts */
      max-height: 220px;
      overflow:auto;
      padding-right: 4px;
    }
    .sv-delict-head{
      display:grid;
      grid-template-columns: 1fr 88px 92px 34px;
      gap: 10px;
      padding: 0 10px 6px;
      color: rgba(255,255,255,.62);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .sv-delict-row{
      display:grid;
      grid-template-columns: 1fr 88px 92px 34px;
      gap: 8px;
      align-items:start;
      padding: 8px 10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.14);
      border-radius: 12px;
      margin-bottom: 6px;
    }
    .sv-delict-row .name{
      font-weight: 700;
      letter-spacing: .01em;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      line-height: 1.25;
    }
    .sv-delict-title{
      font-weight: 900;
      color: rgba(255,255,255,.92);
      font-size: 12px;
    }
    .sv-delict-def{
      margin-top: 2px;
      font-weight: 600;
      color: rgba(255,255,255,.65);
      font-size: 10.5px;
      line-height: 1.2;
    }
    .sv-delict-def .muted{ color: rgba(255,255,255,.55); }
    .sv-delict-row .val{
      text-align:right;
      font-weight: 900;
      color: rgba(255,255,255,.88);
      font-size: 11px;
    }
    .sv-delict-row .btn-delict-remove{
      justify-self: end;
      height: 26px;
      width: 26px;
      padding: 0;
      border-radius: 10px;
      font-weight: 950;
      cursor: pointer;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    @media (max-width: 760px){
      .sv-delict-head{ display:none; }
      .sv-delict-row{
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .sv-delict-row .val{ text-align:left; }
      .sv-delict-row .btn-delict-remove{ justify-self: start; }
    }


/* Desktop context menus */
    .ctx, .ctx-sub{
      position: fixed;
      width: 260px;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(33,41,58,.94), rgba(24,30,44,.94));
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 18px 70px rgba(0,0,0,.55);
      display:none;
      z-index: 12000;
      overflow:hidden;
      color: rgba(255,255,255,.90);
      padding: 6px;
      user-select:none;
  position:relative;
  z-index:4;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
    .ctx.show, .ctx-sub.show{ display:block; }

    .ctx-item{
      height: 38px;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 0 10px;
      font-size: 13px;
      cursor: pointer;
      border-radius: 8px;
      position: relative;
    }
    /* Hover bridge for submenus (prevents gaps) */
    .ctx-item.has-sub::after{
      content:"";
      position:absolute;
      right:-14px;
      top:-8px;
      width: 18px;
      height: 54px;
    }

    .ctx-item:hover{ background: rgba(255,255,255,.06); }
    .ctx-ico{
      width: 22px;
      display:grid;
      place-items:center;
      color: rgba(255,255,255,.70);
      font-weight: 800;
    }
    .ctx-text{ flex:1; }
    .ctx-caret{
      color: rgba(255,255,255,.55);
      font-weight: 900;
    }
    .ctx-sep{
      height: 1px;
      background: rgba(255,255,255,.10);
      margin: 6px 6px;
    }

    .sc-ctx{
      position: fixed;
      width: 220px;
      border-radius: 12px;
      background: rgba(28,32,44,.92);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      display:none;
      z-index: 12500;
      overflow:hidden;
      padding: 6px;
      color: #e5e7eb;
      user-select:none;
  position:relative;
  z-index:4;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
    .sc-ctx.show{ display:block; }
    .sc-ctx .item{
      height: 38px;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 0 10px;
      font-size: 13px;
      cursor: pointer;
      border-radius: 8px;
    }
    .sc-ctx .item:hover{ background: rgba(255,255,255,.06); }
    .sc-ctx .ico{ width: 22px; display:grid; place-items:center; color: rgba(255,255,255,.70); font-weight: 900; }

    /* Taskbar context menu uses the same Win11-style context menu styling as the Desktop (.ctx)
       We only adjust z-index so it always stays above windows. */
    .tb-ctx{ z-index: 13000; }

    /* Settings previews */
    .swatches{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .swatch{
      width: 86px;
      height: 56px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      overflow:hidden;
      cursor: pointer;
      position: relative;
      box-shadow: 0 10px 25px rgba(0,0,0,.18);
      user-select:none;
  position:relative;
  z-index:4;
    }
    .swatch .thumb{
      position:absolute;
      inset:0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .swatch .tint{
      position:absolute;
      inset:0;
      
      background: #2563eb;
      mix-blend-mode: color;
    }
    .swatch::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(135deg, rgba(0,0,0,.0), rgba(0,0,0,.22));
    }
    .swatch.active{
      outline: 2px solid rgba(120,200,255,.95);
      outline-offset: 2px;
    }

    /* Notes window */
    .notes-wrap{ padding: 12px; }
    .notes-toolbar{
      display:flex;
      gap: 10px;
      align-items:center;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .notes-list{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(5,18,40,.45);
      border-radius: 14px;
      overflow:hidden;
    }
    .note-row{
      padding: 10px 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      display:flex;
      gap: 10px;
      align-items:center;
    }
    .note-row:last-child{ border-bottom:none; }
    .note-text{
      flex:1;
      font-size: 13px;
      line-height: 1.35;
      white-space: normal;
      word-break: break-word;
      color: #e5e7eb;
    }

    .note-main{ flex:1; min-width:0; }
    .note-meta{
      margin-top: 6px;
      font-size: 11px;
      color: rgba(255,255,255,.65);
      line-height: 1.2;
    }
    .note-actions{ display:flex; gap: 8px; flex: 0 0 auto; }
    .note-btn-pin{ width: 34px; min-width: 34px; height: 34px; padding: 0 !important; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; text-align:center; }
    .note-btn-pin:hover{ filter: brightness(1.1); }
    .note-btn-pin.is-pinned{ background: #16a34a !important; border-color: rgba(0,0,0,.15) !important; color:#fff !important; }
    .note-label{ --lbl:#eab308; display:inline-block; font-size: 10px; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--lbl) 35%, transparent); border: 1px solid color-mix(in srgb, var(--lbl) 60%, transparent); color: rgba(255,255,255,.92); }
    .note-btn{
      height: 32px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: #e5e7eb;
      cursor: pointer;
      font-weight: 900;
      user-select:none;
  position:relative;
  z-index:4;
      white-space: nowrap;
    }
    .note-btn:hover{ background: rgba(255,255,255,.12); }
    .note-btn.edit{ background: rgba(234,179,8,.22); border-color: rgba(234,179,8,.35); }
    .note-btn.del{ background: rgba(225,29,72,.22); border-color: rgba(225,29,72,.35); }
    .notes-empty{ padding: 14px; color: rgba(255,255,255,.70); font-style: italic; }

    .rt-toolbar{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
    }
    .rt-btn{
      height: 34px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: #e5e7eb;
      font-weight: 900;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .rt-btn:hover{ background: rgba(255,255,255,.12); }
    .rt-color{
      width: 44px;
      height: 34px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      overflow:hidden;
    }
    .rt-color input{ width: 100%; height: 100%; border: 0; padding: 0; background: transparent; }
    .rt-editor{
      min-height: 180px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: #e5e7eb;
      outline: none;
      line-height: 1.35;
      white-space: normal;
      word-break: break-word;
    }
    .rt-hint{ color: rgba(255,255,255,.65); font-size: 12px; margin-top: 8px; }

    .window[data-app="textdoc"] .window-body{ overflow:hidden; }
    /* Textdocument window */
    .tdoc-wrap{
      height: 100%;
      overflow:hidden;
      min-height: 100%;
      display:flex;
      flex-direction:column;
      background: #0f172a;
      min-height:0;
    }
    .tdoc-toolbar{
      height: 46px;
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 0 12px;
      background: #111c2e;
      border-bottom: 1px solid rgba(255,255,255,.08);
      flex: 0 0 auto;
    }
    .tdoc-select{
      height: 32px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(10,18,32,.55);
      color: #e5e7eb;
      padding: 0 10px;
      outline:none;
      font-weight: 800;
      appearance: none;
    }
    .tdoc-select option{ background: rgba(10,18,32,.98); color: #e5e7eb; }
    .tdoc-toolbtn{
      height: 32px;
      min-width: 32px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: #e5e7eb;
      cursor: pointer;
      font-weight: 900;
      user-select:none;
  position:relative;
  z-index:4;
      display:grid;
      place-items:center;
    }
    .tdoc-toolbtn:hover{ background: rgba(255,255,255,.12); }
    .tdoc-color{
      width: 46px;
      height: 32px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      overflow:hidden;
      background: rgba(255,255,255,.08);
    }
    .tdoc-color input{ width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
    .tdoc-spacer{ flex:1; }
    .tdoc-status{ font-size: 12px; color: rgba(255,255,255,.65); padding-right: 6px; user-select:none;
  position:relative;
  z-index:4; white-space: nowrap; }
    .tdoc-editor{
      flex: 1;
      min-height: 0;
      padding: 18px;
      outline:none;
      background: #0b1220; /* dunkler Editor */
      color: rgba(255,255,255,.92);
      font-size: 14px;
      line-height: 1.5;
      white-space: normal;
      word-break: break-word;
      overflow:auto;
      overflow-x:hidden;
      font-family: Calibri, "Segoe UI", Arial, sans-serif;
      caret-color: rgba(255,255,255,.92);
    }
    .tdoc-editor:empty:before{
      content: "Text hier eingeben…";
      color: rgba(255,255,255,.35);
    }

    
    /* Zugriff wird serverseitig gesteuert (Login sperrt, bis Fraktion "POLIZEI" gesetzt ist).
       Daher wird im UI nichts mehr ausgeblendet. */
/* Mitarbeiter */

    
    .staff-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .staff-toolbar-left{ display:flex; gap:10px; flex-wrap:wrap; }
    .staff-toolbar-right{ margin-left:auto; display:flex; gap:10px; }
/* Mitarbeiterliste: klickbarer Name (Detailfenster) */
    .staff-name{ white-space: nowrap; }
    .staff-link{
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      color: #e5e7eb;
      font-weight: 900;
      cursor: pointer;
      text-align: left;
    }
    .staff-link:hover{ text-decoration: underline; }
    .staff-link:focus-visible{
      outline: 3px solid rgba(59,130,246,.25);
      outline-offset: 2px;
      border-radius: 8px;
    }


    .staff-wrap{
      height: 100%;
      min-height: 100%;
      display:flex;
      flex-direction:column;
      gap: 10px;
      padding: 12px;
      color: #e5e7eb;
    }
    .staff-toolbar{
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap: wrap;
    }
    .staff-tablewrap{
      flex: 1;
      min-height: 0;
      overflow:auto;
    }
    .staff-table{
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: #0b1220;
      table-layout: fixed;
    }
    .staff-table th{
      background: #111c2e;
      color: rgba(255,255,255,.72);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      text-align: left;
      position: sticky;
      top: 0;
      z-index: 1;
      vertical-align: middle;
    }
    .staff-table td{
      padding: 10px 12px;
      font-size: 13px;
      color: rgba(255,255,255,.90);
      border-bottom: 1px solid rgba(255,255,255,.08);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      text-align: left;
      vertical-align: middle;
    }
    .staff-table tbody tr:hover{ background: rgba(255,255,255,.04); }
    .staff-table tr:last-child td{ border-bottom: none; }

    .dn{ width: 50px; text-align: center; font-weight: 900; color: #e5e7eb; }
    .col-weapon{ width: 70px; text-align: center; }
    .rank-cell{ width: 260px; padding: 0 12px !important; text-align: left; white-space: normal; }
    .rank-inline{ display:flex; align-items:center; gap: 8px; justify-content:flex-start; padding: 8px 0; width: 100%; }
    .rank-img{
      width: 30px; height: 20px; border-radius: 6px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      object-fit: contain;
      display:block; flex: 0 0 auto;
    }
    .insignia-fallback{
      width: 30px; height: 20px; border-radius: 6px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      display:grid; place-items:center;
      font-size: 11px; font-weight: 900;
      color: rgba(255,255,255,.90);
      flex: 0 0 auto;
    }
    .rank-text{
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      color: #e5e7eb;
      font-weight: 800;
      flex: 0 1 auto;
      max-width: 190px;
      text-align:left;
    }

    .col-anrede{ width: 70px; }
    .col-name{ width: 110px; }
    .col-vorname{ width: 110px; }
    .col-tel{ width: 130px; }
    .col-bei{ width: 110px; }
    .col-email{ width: 240px; }

    /* Ehemalige Mitarbeiter: kompaktere Spaltenbreiten */
    .staff-table-former .dn{ width: 70px; }
    .staff-table-former .col-anrede{ width: 70px; }
    .staff-table-former .col-name{ width: 130px; }
    .staff-table-former .col-vorname{ width: 130px; }
    .staff-table-former .col-rank{ width: 165px; }
    .staff-table-former .col-tel{ width: 120px; }
    .staff-table-former .col-bei{ width: 110px; }
    .staff-table-former .col-removed{ width: 110px; }


    .staff-email{ white-space: nowrap; }
    .staff-email-link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      font-weight: 850;
      cursor: pointer;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .staff-email-link:hover{
      background: rgba(59,130,246,.16);
      border-color: rgba(59,130,246,.30);
    }
    .staff-email-link:focus-visible{
      outline: 3px solid rgba(59,130,246,.25);
      outline-offset: 2px;
      border-radius: 12px;
    }


/* Administration */
.admin-wrap{
  height:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 12px;
  color: #e5e7eb;
}
.admin-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.admin-head .title{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .02em;
}
.admin-head .sub{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  margin-top: 4px;
  max-width: 70ch;
  line-height: 1.45;
}
.admin-tabs{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}
.admin-tab{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  font-weight: 800;
  user-select:none;
  position:relative;
  z-index:4;
}
.admin-tab.active{
  background: var(--sel-blue-bg);
  border-color: var(--sel-blue-border);
}
.admin-body{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.admin-card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,16,28,.55);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
.admin-card .card-title{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: 10px;
  color: rgba(255,255,255,.90);
}
.admin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.admin-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.admin-row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}


/* Dienstgrade: frei sortierbar */
.drag-handle{
  width: 18px;
  text-align:center;
  opacity:1;
  cursor: default;
  user-select:none;
  position:relative;
  z-index:4;
  font-weight: 900;
  letter-spacing: -1px;
}
.admin-row.dragging{ opacity:.55; }
.admin-row.drag-over{ outline: 1px solid rgba(255,255,255,.26); }
/* Audit log improvements */
.audit-toolbar .field input{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  padding: 10px 12px;
  outline: none;
}
.audit-toolbar .field input:focus{
  border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}
.audit-date{ flex: 0 0 auto; min-width: 160px; }
.audit-list{ display:flex; flex-direction:column; gap:10px; }
.audit-item{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  border-radius: 14px;
  overflow: hidden;
}
.audit-item summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  user-select: none;
}
.audit-item summary::-webkit-details-marker{ display:none; }
.audit-grid{
  display:grid;
  grid-template-columns: 170px 1fr 220px;
  gap: 12px;
  align-items: center;
}
.audit-time{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 850;
}
.audit-type{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight: 950;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  max-width: 100%;
}
.audit-summary{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
  word-break: break-word;
}
.audit-meta{
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}
.audit-details{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.audit-kv{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap: 8px 12px;
  font-size: 12px;
}
.audit-k{
  color: rgba(255,255,255,.70);
  font-weight: 950;
}
.audit-v{
  color: rgba(255,255,255,.90);
  font-weight: 650;
  word-break: break-word;
}
.audit-v.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  opacity: .95;
  white-space: pre-wrap;
}
@media (max-width: 860px){
  .audit-grid{ grid-template-columns: 1fr; }
  .audit-meta{ text-align:left; opacity:.85; }
}

.admin-row .left{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 0;
}
.admin-row .name{
  font-weight: 900;
  color: #e5e7eb;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.admin-row .meta{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.admin-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.admin-ico{
  width: 36px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.admin-ico img{ width: 100%; height: 100%; object-fit: contain; display:block; }
.admin-ico .fallback{ font-weight: 950; font-size: 12px; }
    .col-rank{ width: 260px; }
/* Staff Modal Form */
    .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .field{ display:flex; flex-direction:column; gap: 6px; }
    .field label{ font-size: 12px; color: rgba(255,255,255,.75); font-weight: 800; }
    .field input, .field select, .field textarea{
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: #e5e7eb;
      padding: 10px 10px;
      outline:none;
      font-family: inherit;
      font-size: 13px;
    }
    .field input, .field select{ height: 38px; padding: 0 10px; }
    .field textarea{ min-height: 140px; resize: vertical; }
    .field .input-static{
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: #e5e7eb;
      padding: 10px 10px;
      height: 38px;
      display:flex;
      align-items:center;
      gap:8px;
      overflow:hidden;
    }

    .field.full{ grid-column: 1 / -1; }

    .field input.input-error, .field select.input-error, .field textarea.input-error{
      border-color: rgba(239,68,68,.65) !important;
      box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
    }

    .field select{
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
                        linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
      background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
      padding-right: 34px;
    }
    .field select option{ background: #0f172a; color: #e5e7eb; }
    .field select option[disabled]{ font-weight: 950; color: rgba(255,255,255,.92); opacity: 1; }

    .rank-select-row{ display:flex; gap: 10px; align-items:center; }
    .rank-preview{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      display:grid;
      place-items:center;
      overflow:hidden;
      flex: 0 0 auto;
    }
    .rank-preview img{ width: 30px; height: 20px; object-fit: contain; display:block; }
    .rank-preview .fallback{ font-weight: 900; color: rgba(255,255,255,.85); font-size: 12px; }

    .pill-group{ display:flex; gap: 8px; }
    .pill-choice{
      flex: 1;
      height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: #e5e7eb;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .pill-choice:hover{ background: rgba(255,255,255,.09); }
    .pill-choice.active{
      background: rgba(120,200,255,.22);
      border-color: rgba(120,200,255,.35);
    }

    .checks{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .chk{
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
      font-weight: 900;
      color: #e5e7eb;
    }
    .chk input{ width: 16px; height: 16px; accent-color: rgba(120,200,255,.95); }

    /* Ausbildungen: checkboxes stay clearly visible when not in edit mode (read-only, not disabled) */
    .train-ga-wrap{ display:inline-flex; align-items:center; justify-content:center; }
    .train-ga{ width: 16px; height: 16px; accent-color: rgba(120,200,255,.95); }
    .train-ga[data-ro="1"]{ pointer-events:none; opacity:1; filter:none; cursor: default; }

    /* Modal */
    .modal-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 20000;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
    .modal-backdrop.show{ display:flex; }
    .modal{
      width: min(560px, 100%);
      border-radius: 18px;
      background: rgba(28,32,44,.92);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 60px rgba(0,0,0,.60);
      overflow:hidden;
      max-height: calc(100vh - 32px);
      display:flex;
      flex-direction:column;
      color: #e5e7eb;
      backface-visibility:hidden;
      transform: translateZ(0);
    }
/* Fix: allow dropdown panels (combo) to overflow modal bounds (Delikte auswählen) */
.modal.modal-akteadd, .modal.modal-akteedit{ overflow: visible; }
.modal.modal-akteadd .modal-body, .modal.modal-akteedit .modal-body{ overflow: visible; }

    .modal.modal-lg{ width: min(760px, 100%); }
    .modal.modal-xl{ width: min(980px, 100%); }
    .modal.modal-xxl{ width: min(1180px, 100%); }
    .modal.modal-xxxl{ width: min(calc(100% - 32px), 1600px); }

    /* Tall Akte hinzufügen modal: fixed height (very high) and no growth when adding delicts */
    .modal.modal-akteadd{
      height: calc(100vh - 190px);
    }
    .modal.modal-akteadd .modal-body{ flex: 1 1 auto; }
    .modal.modal-akteadd .sv-addcase-layout{ height: 100%; align-items: stretch; }
    .modal.modal-akteadd .sv-addcase-left{ display:flex; flex-direction:column; }
    .modal.modal-akteadd .sv-addcase-left .field{ flex:1 1 auto; display:flex; flex-direction:column; }
    .modal.modal-akteadd #svAkteText{ flex:1 1 auto; min-height: 420px; resize:vertical !important; }
    .modal.modal-akteadd .sv-addcase-right{ height:100%; display:flex; flex-direction:column; }
    .modal.modal-akteadd #svSelDelicts{ flex:1 1 auto; min-height:0; overflow:auto; }
    .modal.modal-akteadd .sv-delict-table{ max-height:none; }



    .modal-head{
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      font-weight: 900;
    }
    .modal-x{
      width: 34px;
      height: 30px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      user-select:none;
  position:relative;
  z-index:4;
    }
    .modal-x:hover{ background: rgba(255,255,255,.10); }
    .modal-body{ padding: 14px; overflow:auto; }
    .modal-actions{
      padding: 12px 14px;
      display:flex;
      justify-content:flex-end;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }

    .btn{ padding: 8px 12px; border-radius: 10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.12); color: #e5e7eb; font-weight: 900; cursor:pointer; }
    .btn:hover{ background: rgba(255,255,255,.26); }
    /* Danger tone (match provided red swatch) */
    .btn.danger{ background: #E11D48 !important; border-color: #E11D48 !important; color: #ffffff !important; }
    .btn.danger:hover{ filter: brightness(1.05); background: #E11D48 !important; }
    .btn:disabled{ opacity:.55; filter: saturate(.85); cursor: default; pointer-events:none; }


    .btn-icon{
      width: 36px;
      height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-weight: 950;
      line-height: 0;
    }
    .btn-icon img.ico-refresh{
      width: 18px;
      height: 18px;
      display:block;
      object-fit: contain;
      pointer-events:none;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .btn-icon[disabled]{ opacity:.45; cursor: default; filter:none !important; }


    /* Mitarbeiterliste: Aktualisieren-Button soll gleiche Höhe wie 'Mitarbeiter hinzufügen' haben */
    #staffRefreshBtn{ height: 38px; width: 38px; }

    .sig-line{
      font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive;
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: .02em;
      color: #e5e7eb;
    }

    /* Tabs (Token-Manager, Mitarbeiter-Detail, ...) */
    .tabs{
      display:flex;
      gap:8px;
      padding: 6px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .tab-btn{
      height: 34px;
      padding: 0 12px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      color: rgba(255,255,255,.82);
      cursor: pointer;
      font-weight: 950;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .tab-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
    .tab-btn.active{ background: rgba(120,200,255,.18); border-color: rgba(120,200,255,.35); color: #e5e7eb; }
    /* Mail-like blue selection for specific tab sets */
    .blue-tabs .tab-btn.active{
      background: var(--sel-blue-bg);
      border-color: var(--sel-blue-border);
      color: #e5e7eb;
    }
    .tab-btn:focus-visible{ outline: 3px solid rgba(120,200,255,.22); outline-offset: 2px; }

    /* Strafverzeichnis: interne Navigation */
    .sv-topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      margin: 12px 16px 0;
    }
    .sv-topbar .left{
      display:flex;
      align-items:center;
      gap: 8px;
      min-width: 200px;
    }
    .sv-topbar .title{
      font-weight: 950;
      letter-spacing: .01em;
      color: #e5e7eb;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    /* Akten als "Ordner" */
    .sv-folder{
      display:flex;
      gap: 10px;
      align-items:flex-start;
    }
    .sv-folder .ficon{
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .sv-folder .fmeta{
      flex: 1 1 auto;
      min-width: 0;
    }
    .sv-folder .fname{
      font-weight: 950;
      letter-spacing:.01em;
      white-space: normal;
      word-break: break-word;
      line-height: 1.15;
    }
    .sv-folder .fsub{
      margin-top: 6px;
      font-size: 12px;
      color: rgba(255,255,255,.70);
      display:flex;
      flex-wrap:wrap;
      gap: 8px;
    }
    .sv-folder.type-fahndung{ background: rgba(255, 159, 67, .20); border-color: rgba(255, 159, 67, .32); }
    .sv-folder.type-haftbefehl{ background: rgba(239, 68, 68, .20); border-color: rgba(239, 68, 68, .34); }
    /* Akte-Status (nur bei Fahndung/Haftbefehl auswählbar) */
    .sv-status:disabled{ opacity:.70; cursor:not-allowed; }
    .sv-status.st-offen{ border-color: rgba(34,197,94,.55) !important; }
    .sv-status.st-bearb{ border-color: rgba(245,158,11,.55) !important; }
    .sv-status.st-geschlossen{ border-color: rgba(239,68,68,.55) !important; }


    .btn-ghost{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e5e7eb; }
    .btn-primary{ background: rgba(120,200,255,.22); border: 1px solid rgba(120,200,255,.35); color: #e5e7eb; }
    .btn-add{ background: #16a34a; border-color: rgba(0,0,0,.15); color: #fff; }
    .btn-warn{ background:#f59e0b; border-color: rgba(0,0,0,.18); color:#ffffff; }
    .btn-warn:hover{ filter: brightness(1.04); }
    .btn-edit{ background: #eab308; border-color: rgba(0,0,0,.15); color: #fff; }
    .btn-del{ background: #e11d48; border-color: rgba(0,0,0,.15); color: #fff; }
  

    /* Strafverzeichnis: Navigation im Fenstertitel */
    .titlebar{ gap: 10px; }
    .win-nav{ display:flex; align-items:center; gap:8px; }
    .win-navbtn{ width: 34px; height: 30px; padding: 0; border-radius: 10px; font-size: 18px; line-height: 1; }
    .titlebar.sv-titlebar .sv-navrow .win-navbtn{ width: 36px; height: 32px; font-size: 20px; }

    
    /* Strafverzeichnis: Titelbar 2-zeilig (Controls bleiben oben wie bei anderen Fenstern) */
    .titlebar.sv-titlebar{
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding-bottom: 10px;
    }
    .titlebar.sv-titlebar .sv-trow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      width: 100%;
    }
    .titlebar.sv-titlebar .sv-navrow{
      display:flex;
      align-items:center;
      gap: 6px;
      padding-left: 0px; /* mit Icon fluchten */
      margin-top: 2px;   /* etwas kompakter */
    }
/* Personenakte: Header Layout */
    .pa-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:nowrap; }
    .pa-left{ display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width: 0; }
    .pa-left > div{ min-width:0; }
    .pa-actions{ display:flex; gap:8px; flex-direction:column; align-items:flex-end; flex:0 0 auto; }
    @media (max-width: 720px){
      .pa-head{ flex-wrap:wrap; }
      .pa-actions{ flex-direction:row; width:100%; justify-content:flex-end; }
    }

    /* ===== Toasts ===== */
    .toast-host{
      position:fixed;
      right:14px;
      bottom:72px; /* oberhalb Taskleiste */
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:9999;
      pointer-events:none;
      align-items:flex-end;
    }
    .toast{
      pointer-events:auto;
      width:340px;
      max-width:min(380px, calc(100vw - 28px));
      padding:0;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(20,24,33,.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 18px 45px rgba(0,0,0,.35);
      overflow:hidden;
      transform: translateY(10px);
      opacity:0;
      transition: transform .22s ease, opacity .22s ease;
    }
    .toast.show{ transform: translateY(0); opacity:1; }
    .toast.hide{ transform: translateY(10px); opacity:0; }

    .toast-card{ padding:10px 12px; }
    .toast-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
    }
    .toast-app{ display:flex; align-items:center; gap:10px; min-width:0; }
    .toast-icon{
      width:18px; height:18px;
      border-radius:6px;
      background: rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
      flex:0 0 auto;
      background-image: url('../img/ams_logo.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .toast-title{
      font-size:12px;
      color: rgba(255,255,255,.82);
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .toast-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
    .toast-time{ font-size:12px; color: rgba(255,255,255,.55); }
    .toast-x{
      width:26px; height:26px;
      display:flex; align-items:center; justify-content:center;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.85);
      cursor:pointer;
    }
    .toast-x:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
    .toast-body{ padding-left:28px; }
    .toast-msg{ font-size:14px; color: rgba(255,255,255,.92); line-height:1.25; }
    .toast-sub{ margin-top:6px; font-size:12px; color: rgba(255,255,255,.65); line-height:1.25; }

    .toast .dot{
      width:10px; height:10px; border-radius:999px;
      margin-top:4px;
      flex:0 0 auto;
      background: rgba(255,255,255,.35);
    }
    .toast.success .dot{ background: rgba(34,197,94,.95); }
    .toast.warn .dot{ background: rgba(245,158,11,.95); }
    .toast.error .dot{ background: rgba(239,68,68,.95); }
    .toast .msg{ line-height:1.25; }
    .toast .sub{ font-weight:600; opacity:.7; font-size:12px; margin-top:2px; }
    .toast.show{ animation: toastIn 220ms var(--ease-win) both; }
    .toast.hide{ animation: toastOut 220ms var(--ease-win) both; }
    @keyframes toastIn{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
    @keyframes toastOut{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(10px); opacity:0; } }

    /* ===== Personenakte Cards & Tools ===== */
    .pa-section{
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      padding: 14px;
    }
    .pa-person{
      background: rgba(255,255,255,.05);
    }
    .pa-cases{
      background: #0b1220;
    }

    
    /* Personenakte: Actionbar zwischen Personaldaten und Akten */
    .pa-actionbar{
      margin-top: 12px;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .pa-actionbar .btn{ height: 40px; border-radius: 12px; }
    .pa-ab-left{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .pa-ab-center{ display:flex; align-items:center; justify-content:center; flex:1 1 220px; }
    .pa-ab-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
    .pa-ab-left .btn, .pa-ab-center .btn{ min-width: 180px; }

    /* Personenakte: Akten-Card etwas "quadratischer"/klarer abgesetzt */
    .pa-cases{
      box-shadow: 0 14px 46px rgba(0,0,0,.28);
    }

    /* Personenakte: Suche + Filter einheitlicher */
    .pa-toolbar{ padding: 10px; }
    .pa-searchwrap{ height: 42px; border-radius: 14px; }
    .pa-search{ font-size: 14px; }
    .pa-filters .input, .pa-filters select{
      height: 42px;
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      color: #e5e7eb;
    }
    .pa-filters .input:hover, .pa-filters select:hover{ background: rgba(255,255,255,.07); }
    .pa-filters .input:focus, .pa-filters select:focus{
      outline: none;
      border-color: rgba(59,130,246,.45);
      box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    }
    .pa-filters select option{
      background: #0f172a;
      color: #e5e7eb;
    }

    @media (max-width: 720px){
      .pa-ab-left .btn, .pa-ab-center .btn{ min-width: 140px; }
    }

.pa-section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin: 0 0 10px 2px;
    }
    .pa-section-title{
      font-weight: 950;
      letter-spacing: .01em;
    }
    .pa-countpill{
      display:inline-flex;
      align-items:center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.86);
      white-space: nowrap;
    }

    /* Win11-ish toolbar for search/filter/sort (Personenakte → Akten) */
    .pa-toolbar{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      padding:10px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      margin: 0 0 10px 2px;
    }
    .pa-searchwrap{
      flex: 1 1 420px;
      min-width: 320px;
      height: 40px;
      display:flex;
      align-items:center;
      gap:10px;
      padding: 0 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.16);
    }
    .pa-searchwrap:focus-within{
      border-color: rgba(59,130,246,.35);
      box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    }
    .pa-searchico{
      opacity:.80;
      font-size: 14px;
      line-height: 1;
      transform: translateY(-.5px);
    }
    .pa-searchwrap .pa-search{
      flex: 1 1 auto;
      height: 38px;
      border: none !important;
      outline: none !important;
      background: transparent !important;
      color: #e5e7eb;
      font-size: 13px;
      font-weight: 750;
      padding: 0 !important;
      margin: 0 !important;
    }
    .pa-searchwrap .pa-search::placeholder{
      color: rgba(255,255,255,.55);
      font-weight: 700;
    }

    .pa-filters{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      flex: 0 0 auto;
    }
    .pa-filters .input, .pa-filters select{
      height:40px;
      border-radius: 12px;
      min-width: 190px;
    }
    .pa-filters .input:focus, .pa-filters select:focus{
      box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    }

    @media (max-width: 720px){
      .pa-searchwrap{ min-width: 100%; flex: 1 1 100%; }
      .pa-filters{ width:100%; }
      .pa-filters .input, .pa-filters select{ flex: 1 1 180px; min-width: 180px; }
    }

    /* ===== Folder actions ===== */
    .sv-folder{ position:relative; }
    .sv-folder .folder-del{
      position:absolute;
      top:10px;
      right:10px;
      width:26px;
      height:26px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      color: rgba(255,255,255,.9);
      font-weight:900;
      cursor:pointer;
      opacity:0;
      transform: translateY(-2px);
      transition: opacity var(--anim-fast) var(--ease-win), transform var(--anim-fast) var(--ease-win), background var(--anim-fast) var(--ease-win);
    }
    .sv-folder:hover .folder-del{ opacity:1; transform: translateY(0); }
    .sv-folder .folder-del:hover{ background: rgba(255,255,255,.10); }

    /* ===== Änderungshistorie ===== */
    .sv-history{
      margin-top:12px;
      padding-top:10px;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .sv-history ul{ margin:0; padding-left:18px; }
    .sv-history li{ margin: 6px 0; color: rgba(255,255,255,.82); font-size: 13px; }
    .sv-history .ts{ opacity:.72; font-size: 12px; font-weight: 700; }

    /* ===== Personenakte: finale Overrides (Suchleiste + Filter einheitlich) ===== */
    .pa-toolbar .pa-searchwrap{ height: 42px; border-radius: 14px; }
    .pa-toolbar .pa-search{ font-size: 14px; }
    .pa-toolbar .pa-filters .input,
    .pa-toolbar .pa-filters select{
      height: 42px;
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      color: #e5e7eb;
      min-width: 190px;
    }
    .pa-toolbar .pa-filters .input:hover,
    .pa-toolbar .pa-filters select:hover{ background: rgba(255,255,255,.07); }
    .pa-toolbar .pa-filters .input:focus,
    .pa-toolbar .pa-filters select:focus{
      outline: none;
      border-color: rgba(59,130,246,.45);
      box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    }


    /* Win11 Color Flyout (Rundnotiz + Textdoc) */
    .win-colorbtn{
      height: 34px;
      min-width: 74px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: #e5e7eb;
      display:flex;
      align-items:center;
      gap: 8px;
      cursor: pointer;
      user-select:none;
  position:relative;
  z-index:4;
    }
    .win-colorbtn:hover{ background: rgba(255,255,255,.12); }
    .win-colorbtn .swatch{
      width: 22px;
      height: 22px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,.25);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    }
    .win-colorbtn .caret{ margin-left:auto; opacity:.8; font-weight:900; transform: translateY(-1px); }

    .win-colorbtn.is-icon{ min-width: 44px; padding: 0 8px; gap: 6px; }
    .win-colorbtn.is-icon .caret{ margin-left: 0; }

    .win-colorbtn.is-icon{ min-width: 44px; padding: 0 8px; gap: 6px; }
    .win-colorbtn.is-icon .caret{ margin-left: 0; }
    .win-colorbtn.is-icon{ min-width: 46px; padding: 0 8px; gap: 6px; }
    .win-colorbtn.is-icon .caret{ margin-left: 0; }
    .win-color-native{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

    .color-flyout{
      position: fixed;
      width: 320px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(22,32,52,.92), rgba(14,20,34,.92));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 20px 60px rgba(0,0,0,.55);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
      z-index: 99999;

      opacity: 0;
      transform: translateY(12px) scale(.985) translateZ(0);
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win),
        visibility 0s linear var(--anim-fast);
    }
    .color-flyout.show{
      opacity: 1;
      transform: translateY(0) scale(1) translateZ(0);
      pointer-events: auto;
      visibility: visible;
      transition:
        opacity var(--anim-fast) ease,
        transform var(--anim-med) var(--ease-win),
        visibility 0s linear 0s;
    }

    .cf-top{
      padding: 10px 10px 8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      color: #e5e7eb;
      font-weight: 800;
      font-size: 13px;
      background: rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .cf-close{
      width: 30px; height: 26px;
      border-radius: 8px;
      display:grid; place-items:center;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      cursor: pointer;
    }
    .cf-close:hover{ background: rgba(255,255,255,.08); }

    .cf-body{ padding: 10px; }
    .cf-grid{ display:grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
    .cf-swatch{
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      cursor:pointer;
    }
    .cf-swatch:hover{ outline: 2px solid rgba(120,200,255,.35); outline-offset: 2px; }

    .cf-custom{
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 8px;
      color: rgba(255,255,255,.88);
      font-weight: 900;
      font-size: 12px;
    }
    .cf-actions{ display:flex; gap: 8px; }
    .cf-act{
      height: 30px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: #e5e7eb;
      cursor:pointer;
      font-weight: 900;
    }
    .cf-act:hover{ background: rgba(255,255,255,.08); }

    /* Strafkatalog: keine Vor/Zurück Buttons */
    .window[data-app="strafkatalog"] .sv-navrow,
    .window[data-app="strafkatalog"] .win-navbtn,
    .window[data-app="strafkatalog"] [data-act="back"],
    .window[data-app="strafkatalog"] [data-act="forward"],
    .window[data-app="strafkatalog"] .win-nav,
    .window[data-app="strafkatalog"] .w-nav,
    .window[data-app="strafkatalog"] .navBtns{
      display:none !important;
    }



    /* Mitarbeiterliste: an Fensterbreite anpassen */
    .staff-table{ width:100% !important; }


    /* Verknüpfungs-Icons: individuelle Farben je App */
    .shortcut[data-app="settings"] .app-icon,
    .sm-app[data-open="settings"] .app-icon{
      background: linear-gradient(135deg, rgba(180,180,180,.95), rgba(120,120,120,.55)) !important;
      color: rgba(10,18,32,.98) !important;
    }

    .shortcut[data-app="staff"] .app-icon,
    .sm-app[data-open="staff"] .app-icon{
      background: linear-gradient(135deg, rgba(52,211,153,.95), rgba(16,185,129,.55)) !important;
    }

    .shortcut[data-app="admin"] .app-icon,
    .sm-app[data-open="admin"] .app-icon{
      background: linear-gradient(135deg, rgba(251,146,60,.95), rgba(245,101,101,.55)) !important;
    }

    .shortcut[data-app="laws"] .app-icon,
    .sm-app[data-open="laws"] .app-icon{
      background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(99,102,241,.55)) !important;
    }

    .shortcut[data-app="straf"] .app-icon,
    .sm-app[data-open="straf"] .app-icon{
      background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(244,114,182,.45)) !important;
    }

    .shortcut[data-app="notes"] .app-icon,
    .sm-app[data-open="notes"] .app-icon{
      background: linear-gradient(135deg, rgba(250,204,21,.95), rgba(245,158,11,.55)) !important;
      color: rgba(10,18,32,.98) !important;
    }

    .shortcut[data-app="textdoc"] .app-icon,
    .sm-app[data-open="textdoc"] .app-icon{
      background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(14,165,233,.55)) !important;
    }

    .shortcut[data-app="strafkatalog"] .app-icon,
    .sm-app[data-open="strafkatalog"] .app-icon{
      background: linear-gradient(135deg, rgba(167,139,250,.95), rgba(147,197,253,.55)) !important;
      color: rgba(10,18,32,.98) !important;
    }


    /* Fix7: Strafkatalog – Back/Forward ausblenden */
    .window[data-app="strafkatalog"] button[data-act="back"],
    .window[data-app="strafkatalog"] button[data-act="forward"],
    .window[data-app="strafkatalog"] .win-nav,
    .window[data-app="strafkatalog"] .w-nav,
    .window[data-app="strafkatalog"] .navBtns{
      display: none !important;
    }

/* ===== Inline style block 2 (migrated from index.html) ===== */
@page{ size: A4; margin: 18mm 16mm; }
          *{ box-sizing:border-box; }
          body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0b1220; }
          .sheet{ position:relative; border: 2px solid #0b1220; border-radius: 14px; padding: 14mm 12mm; }
          .watermark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
          .watermark span{ font-size: 96px; font-weight: 900; letter-spacing: .14em; opacity: .05; transform: rotate(-18deg); }
          .head{ display:flex; gap: 14px; align-items:flex-start; }
          .mug{ width: 34mm; height: 44mm; border: 1px solid #0b1220; border-radius: 12px; overflow:hidden; background:#f1f5f9; flex: 0 0 auto; }
          .mug img{ width:100%; height:100%; object-fit:cover; display:block; }
          .title{ flex:1; min-width:0; }
          h1{ margin:0; font-size: 22px; letter-spacing: .02em; }
          .subtitle{ margin-top:4px; color:#1f2937; font-size: 12px; }
          .metaTop{ text-align:right; font-size:12px; color:#111827; }
          .grid{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
          .field{ border:1px solid #0b1220; border-radius: 10px; padding: 8px 10px; }
          .field .k{ font-size:11px; color:#374151; }
          .field .v{ margin-top:3px; font-weight:800; font-size: 13px; }
          .secTitle{ margin-top: 14px; font-weight: 900; font-size: 14px; letter-spacing: .02em; }
          table{ width:100%; border-collapse: collapse; margin-top: 8px; font-size: 11px; }
          th, td{ border:1px solid #0b1220; padding: 6px 6px; vertical-align: top; }
          th{ background:#0b1220; color:#ffffff; text-align:left; font-size: 11px; }
          tr.sub td{ background:#f8fafc; font-size: 10.5px; color:#111827; }
          .foot{ margin-top: 12px; display:flex; justify-content:space-between; gap:12px; font-size: 11px; color:#111827; }
          .note{ color:#374151; }
          .sig{ margin-top: 18px; display:flex; justify-content:flex-end; }
          .sigbox{ width: 240px; border-top: 1px solid #0b1220; padding-top: 6px; text-align:center; font-size: 11px; color:#111827; }

/* ===== Inline style block 3 (migrated from index.html) ===== */
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 24px; }
          h1{ margin:0 0 6px; font-size: 20px; }
          .meta{ color:#334155; font-size: 13px; margin-bottom: 14px; }
          .badge{ display:inline-block; padding: 3px 10px; border-radius:999px; border:1px solid #cbd5e1; background:#f1f5f9; font-size: 12px; }
          pre{ white-space: pre-wrap; border:1px solid #e2e8f0; border-radius: 14px; padding: 12px; }




/* Phase 2 (UX) — Window snapping */
#snapPreview{
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 99998;

  opacity: 0;
  transition: opacity var(--anim-fast) var(--ease-win);
}
#snapPreview.show{ opacity: 1; }

#snapPreview .box{
  position:absolute;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(120,200,255,.12);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  transform: scale(.985) translateZ(0);
  transition: opacity var(--anim-fast) var(--ease-win), transform var(--anim-fast) var(--ease-win);
}
#snapPreview.show .box{
  opacity: 1;
  transform: scale(1) translateZ(0);
}

.window.snap-left{
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 50vw !important;
  height: calc(100vh - var(--taskbar-h)) !important;
  border-radius: 0 !important;
}
.window.snap-right{
  position: fixed !important;
  left: 50vw !important;
  top: 0 !important;
  width: 50vw !important;
  height: calc(100vh - var(--taskbar-h)) !important;
  border-radius: 0 !important;
}

/* Focus ring (Win11-ish) */
button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid rgba(120,200,255,.65);
  outline-offset: 2px;
}


    .ctx-sub{ z-index: 12050; }



/* ---- Taskbar clock shows date (2 lines) ---- */
#clock{
  position: relative;
  white-space: pre-line;
  line-height: 1.05;
  text-align: right;
}

/* ---- Context menu: Win11 light (nur wenn theme-light aktiv ist) ---- */
body.theme-light .ctx-menu, body.theme-light .ctx-submenu, body.theme-light .context-menu{
  background: rgba(255,255,255,.96);
  color: rgba(0,0,0,.88);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.theme-light .ctx-menu .ctx-item, body.theme-light .ctx-submenu .ctx-item, body.theme-light .context-menu .ctx-item,
body.theme-light .ctx .ctx-item, body.theme-light .ctx-sub .ctx-item{
  color: rgba(0,0,0,.88);
}
body.theme-light .ctx-menu .ctx-item:hover, body.theme-light .ctx-submenu .ctx-item:hover, body.theme-light .context-menu .ctx-item:hover,
body.theme-light .ctx .ctx-item:hover, body.theme-light .ctx-sub .ctx-item:hover{
  background: rgba(0,0,0,.06);
}
body.theme-light .ctx-sep, body.theme-light .ctx-separator,
body.theme-light .ctx .ctx-sep, body.theme-light .ctx-sub .ctx-sep,
body.theme-light .ctx .ctx-separator, body.theme-light .ctx-sub .ctx-separator{
  background: rgba(0,0,0,.10);
}
body.theme-light .ctx-ico,
body.theme-light .ctx .ctx-ico, body.theme-light .ctx-sub .ctx-ico{
  color: rgba(0,0,0,.70);
}


/* Taskbar clock hover outline (like volume/WLAN) */
.clock{
      font-size: 12px;
      line-height: 1.08;
      color: var(--text);
      min-width: 0;
      width: max-content; /* enger Hover-Umriss */
      cursor: pointer;
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      user-select:none;
  position:relative;
  z-index:4;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
}
.clock:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}



/* === PATCH: THEME + STREIFE (Zwischenstand) === */
html.theme-light{ color-scheme: light; }
body.theme-light{
  color: rgba(0,0,0,.86);
}
body.theme-light .taskbar{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.86);
}
body.theme-light #startMenu,
body.theme-light .ctx,
body.theme-light .ctx-sub{
  background: rgba(255,255,255,.82);
  color: rgba(0,0,0,.86);
  border-color: rgba(0,0,0,.08);
}
.segmented{ display:flex; gap:3px; padding:3px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); width: fit-content; }
.seg-btn{ border:1px solid transparent; background:transparent; color: var(--text); border-radius:11px; padding:8px 12px; font-weight:900; font-size:12px; cursor:pointer; }
.seg-btn.active{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); }
body.theme-light .segmented{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.04); }
body.theme-light .seg-btn{ color: rgba(0,0,0,.86); }
body.theme-light .seg-btn.active{ background: rgba(255,255,255,.78); border-color: rgba(0,0,0,.10); }

/* === Streife (fixed design, no Light/Dark logic, no transparency) === */
.streife-wrap{
  padding: 14px 14px 18px;
  color: #e5e7eb;
}
.streife-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.streife-title{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .2px;
  color: #ffffff; /* requested */
}
.streife-sub{
  margin-top: 4px;
  font-size: 13px;
  color: #cbd5e1;
  
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.streife-upd{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #0f172a;
  font-weight: 900;
}
.streife-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
}
.streife-dot.offline{ background:#ef4444; }

.streife-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Wrapper so "Anmerkungen" are always UNDER the Streifenblock */
.streife-tile{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.streife-card{
  height: 240px; /* fits 3 officers without growing */
  display:flex;
  flex-direction:column;
  border-radius: 16px;
  border: 1px solid #334155;
  background: #111827;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  transition: background-color 220ms cubic-bezier(.2,.9,.2,1), border-color 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1);
  overflow:hidden;
}

/* Banner */
.streife-banner{
  height: 54px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  background: #0b1220;
  border-bottom: 1px solid #334155;
  transition: background-color 220ms cubic-bezier(.2,.9,.2,1), border-bottom-color 220ms cubic-bezier(.2,.9,.2,1);
}
.streife-label{
  font-weight: 950;
  font-size: 15px;
  color: #ffffff;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.streife-controls{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* Status dropdown same height as Enter/Leave icon button */
select.streife-statusbtn{
  height: 34px;
  min-width: 54px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #ffffff;
  font-weight: 950;
  font-size: 12px;
  outline: none;
  appearance: none;
}
select.streife-statusbtn:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb;
}
select.streife-statusbtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Streife body */
.streife-body{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
  min-height:0;
}
.streife-occupants{
  display:flex;
  flex-direction:column;
  gap: 8px;
  overflow:auto; /* more than 3 officers => scroll, card height stays */
  padding-right: 4px;
  flex:1;
  min-height:0;
}

/* Occupant row: DN left of name (requested) */
.occ-item{
  display:flex;
  align-items:center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid #334155;
  background: #0f172a;
  padding: 8px 10px;
}
.occ-dnbox{
  width: 46px;
  flex: 0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #111827;
}
.occ-dn{
  font-weight: 950;
  font-size: 12px;
  color: #ffffff;
}
.occ-main{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.occ-name{
  font-weight: 950;
  font-size: 13px;
  line-height: 15px;
  color: #ffffff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.occ-rank{
  font-size: 12px;
  line-height: 13px;
  margin-top: 1px;
  color: #cbd5e1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Notes under block */
.streife-note-out textarea.streife-note{
  width: 100%;
  resize: none;
  border-radius: 14px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  outline: none;
}
.streife-note-out textarea.streife-note::placeholder{
  color: #94a3b8;
}
.streife-note-out textarea.streife-note:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb;
}

/* Global icon buttons (e.g., Sammelakte Entfernen) */
.icon-btn{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #334155;
  background: rgba(255,255,255,.06);
  color: #ffffff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}
.icon-btn:hover{ filter: brightness(1.05); }
.icon-btn.danger{
  background: #E11D48 !important;
  border-color: #E11D48 !important;
  color: #ffffff !important;
}
.icon-btn.success{
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

/* Buttons: knalliger background like "Person hinzufügen" */
.streife-banner .icon-btn{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #334155;
}
.streife-banner .icon-btn.success{
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}
.streife-banner .icon-btn.danger{
  background: #E11D48 !important;
  border-color: #E11D48 !important;
  color: #ffffff !important;
}
/* Ensure "Verlassen" (leave) uses the same tone even if classes change */
.streife-banner .icon-btn[data-mode="leave"]{
  background: #E11D48 !important;
  border-color: #E11D48 !important;
  color: #ffffff !important;
}
.streife-banner .icon-btn.success:hover,
.streife-banner .icon-btn.danger:hover{
  filter: brightness(1.05);
}

@keyframes streifeRedBlink{
  0%,100%{ box-shadow: 0 18px 46px rgba(0,0,0,.35); }
  50%{ box-shadow: 0 18px 46px rgba(0,0,0,.35), 0 0 0 2px rgba(239,68,68,.22), 0 0 18px rgba(239,68,68,.14); }
}
@keyframes streifeRedBlinkBanner{
  0%,100%{ background: rgba(127,29,29,.18); }
  50%{ background: rgba(127,29,29,.32); }
}

/* Status colors (requested mapping) */
.streife-card[data-status="0"]{ border-color:#7f1d1d;; animation: streifeRedBlink 1.1s ease-in-out infinite; }
.streife-card[data-status="1"],
.streife-card[data-status="2"]{ border-color:#16a34a; }
.streife-card[data-status="3"]{ border-color:#eab308; }
.streife-card[data-status="4"]{ border-color:#f97316; }
.streife-card[data-status="5"]{ border-color:#a855f7; }
.streife-card[data-status="6"]{ border-color:#9ca3af; }

/* Header (banner) also tinted */
.streife-card[data-status="0"] .streife-banner{ background: rgba(127,29,29,.22); border-bottom-color:#7f1d1d;  animation: streifeRedBlinkBanner 1.1s ease-in-out infinite; }
.streife-card[data-status="1"] .streife-banner,
.streife-card[data-status="2"] .streife-banner{ background: rgba(22,163,74,.22); border-bottom-color:#16a34a; }
.streife-card[data-status="3"] .streife-banner{ background: rgba(234,179,8,.20); border-bottom-color:#eab308; }
.streife-card[data-status="4"] .streife-banner{ background: rgba(249,115,22,.20); border-bottom-color:#f97316; }
.streife-card[data-status="5"] .streife-banner{ background: rgba(168,85,247,.20); border-bottom-color:#a855f7; }
.streife-card[data-status="6"] .streife-banner{ background: rgba(156,163,175,.18); border-bottom-color:#9ca3af; }


/* Hide old admin row if present */
.streife-adminrow{ display:none !important; }

/* Hide legacy *desktop* menus (we keep shortcut menu #scCtx for right-click on icons like Textdokument) */
#ctxMenu, #ctxSubNew, #ctxSubLinks { display:none !important; }

.win11-cm{
  position: fixed;
  z-index: 99999;
  min-width: 260px;
  max-width: 340px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(32,32,32,.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  transform: scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  user-select: none;
}
body:not(.locked) .win11-cm.show{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.win11-cm .cm-item{
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1;
  cursor: default;
  position: relative;
  white-space: nowrap;
}
.win11-cm .cm-item:hover{
  background: rgba(255,255,255,.10);
}
.win11-cm .cm-item:active{
  background: rgba(255,255,255,.14);
}

.win11-cm .cm-ico{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  opacity: .92;
  flex: 0 0 18px;
}
.win11-cm .cm-ico svg{
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,.88);
}
.win11-cm .cm-text{ flex: 1; overflow:hidden; text-overflow: ellipsis; }
.win11-cm .cm-right{
  opacity: .72;
  font-size: 12px;
  margin-left: 8px;
}
.win11-cm .cm-caret{
  width: 14px;
  opacity: .75;
  display: grid;
  place-items: center;
  margin-left: 6px;
}
.win11-cm .cm-caret svg{ width: 14px; height: 14px; fill: rgba(255,255,255,.78); }

.win11-cm .cm-sep{
  height: 1px;
  margin: 6px 8px;
  background: rgba(255,255,255,.10);
}

/* Submenu should look identical */
.win11-cm.sub{
  min-width: 240px;
  max-width: 320px;
}

@media (prefers-reduced-motion: reduce){
  .win11-cm{ transition: none; }
}

/* Akte hinzufügen – 2-Spalten Layout (Sachverhalt links, Details rechts) */
.sv-addcase-layout{ display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; align-items:start; }
.sv-addcase-left, .sv-addcase-right{ min-width:0; }
@media (max-width: 980px){ .sv-addcase-layout{ grid-template-columns: 1fr; } }

/* Akte hinzufügen – Sachverhalt-Textarea (Win11 dark input, not flat grey) */
.akteadd-view .akte-sv{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  padding: 14px 16px;
  outline: none;
  font: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.akteadd-view .akte-sv:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.akteadd-view .akte-sv:focus{
  border-color: rgba(96,165,250,.55);
  box-shadow: 0 0 0 3px rgba(96,165,250,.20), 0 10px 30px rgba(0,0,0,.22);
}
.akteadd-view .akte-sv::placeholder{ color: rgba(255,255,255,.48); }


/* ===== Win11 Startup transition (login.html -> index.html) ===== */
.overlay-panel.boot-panel{
  flex-direction: column;
  text-align: center;
  gap: 12px;
  padding: 22px;
}
.boot-logo{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.boot-logo svg{ width: 28px; height: 28px; }
body.page-leave{
  opacity: 0;
  transition: opacity 180ms ease;
}


/* Sammelakte Chips */
.sv-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:800;
  margin:0 6px 6px 0;
  color: rgba(255,255,255,.92);
}


/* === Urlaub App === */
.urlaub-ui{ height: 100%; display:flex; flex-direction:column; }
.urlaub-hint{
  margin: 6px 0 12px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}
.urlaub-wrap{
  padding: 14px 14px 18px;
  color: rgba(255,255,255,.92);
  height: 100%;
  display:flex;
  flex-direction:column;
}
.urlaub-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.urlaub-title{
  font-weight: 950;
  font-size: 18px;
  color:#fff;
}
.urlaub-sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.68);
}
.urlaub-actions{ display:flex; gap:10px; align-items:center; }

.urlaub-table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}
.urlaub-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.urlaub-table thead th{
  text-align:left;
  padding: 10px 12px;
  font-weight: 950;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: sticky;
  top: 0;
  z-index: 2;
}
.urlaub-table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.urlaub-table tbody tr:hover{ background: rgba(255,255,255,.04); }

.btn.small{ height: 30px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 900; }
.vac-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.vac-pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 16px rgba(0,0,0,.12);
  backdrop-filter: blur(6px) saturate(1.12);
  -webkit-backdrop-filter: blur(6px) saturate(1.12);
  font-weight: 950;
  font-size: 12px;
  color: rgba(255,255,255,.92);
}
.vac-pill.open{
  border-color: rgba(234,179,8,.40);
  background: linear-gradient(135deg, rgba(234,179,8,.22), rgba(234,179,8,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px rgba(234,179,8,.10);
}
.vac-pill.ok{
  border-color: rgba(34,197,94,.45);
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px rgba(34,197,94,.10);
}
.vac-pill.no{
  border-color: rgba(239,68,68,.45);
  background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(239,68,68,.09));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px rgba(239,68,68,.10);
}

/* Urlaub: aktive genehmigte Urlaube (heute innerhalb Zeitraum) */
.staff-table tbody tr.vac-active td{
  background: rgba(34,197,94,.14);
}
.staff-table tbody tr.vac-active:hover td{
  background: rgba(34,197,94,.18);
}

/* Windows-11-like "Datei löschen" Dialog (heller Stil) */
#modal.modal-win-delete{
  background: rgba(245,246,249,.96);
  color: rgba(10,10,12,.92);
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
#modal.modal-win-delete .modal-head{
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.12);
  color: rgba(10,10,12,.92);
}
#modal.modal-win-delete .modal-x{ color: rgba(10,10,12,.75); }
#modal.modal-win-delete .modal-body{ color: rgba(10,10,12,.88); }
#modal.modal-win-delete .modal-actions{ border-top: 1px solid rgba(0,0,0,.10); }
#modal.modal-win-delete .btn{
  background: rgba(255,255,255,.86);
  color: rgba(10,10,12,.92);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
#modal.modal-win-delete .btn:hover{ background: rgba(255,255,255,.96); }
#modal.modal-win-delete .btn-ghost{
  background: rgba(255,255,255,.40);
}
#modal.modal-win-delete .btn-primary{
  background: #2563eb;
  border-color: rgba(37,99,235,.85);
  color: #fff;
}

.vac-dialog-backdrop{
  position: absolute;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vac-dialog-backdrop.show{ display:flex; }
.vac-dialog{
  width: min(520px, calc(100% - 40px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,25,38,.86);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.vac-dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  font-weight: 950;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.vac-x{
  width: 32px; height: 32px;
  border-radius: 12px;
  display:grid; place-items:center;
  cursor:pointer;
  border: 1px solid transparent;
}
.vac-x:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

.vac-dialog-body{ padding: 12px 14px; }
.vac-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px){ .vac-grid{ grid-template-columns: 1fr; } }

.vac-field{ display:flex; flex-direction:column; gap: 6px; }
.vac-lbl{ font-size: 12px; font-weight: 900; color: rgba(255,255,255,.76); }
.vac-field input,
.vac-field textarea{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 10px 10px;
  outline: none;
  font-family: inherit;
}
.vac-field input{ height: 38px; padding: 0 10px; }
.vac-field textarea{ resize: vertical; min-height: 92px; }
.vac-field input:focus,
.vac-field textarea:focus{
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 2px rgba(59,130,246,.32);
}
.vac-dialog-foot{
  display:flex;
  justify-content:flex-end;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}


    /* Mail app (Outlook-like) */
.mail-app{
  height: 100%;
  display: grid;
  grid-template-columns: 250px 360px 1fr;
  background: #0f172a;
  color: rgba(255,255,255,.92);
}
.mail-sidebar{ overflow:hidden; 
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  background: rgba(255,255,255,.02);
}
.mail-logo{ display:flex; gap:10px; align-items:center; padding: 6px 6px 10px; }
.mail-logo-ico{ width: 40px; height:40px; border-radius: 12px; background: rgba(255,255,255,.08); display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.mail-logo-ico img{ width: 26px; height:26px; object-fit:contain; }
.mail-logo-title{ font-weight: 900; letter-spacing: .2px; }
.mail-logo-sub{ font-size: 12px; color: rgba(255,255,255,.70); margin-top: 2px; }

.mail-compose-btn{ width: 100%; justify-content:center; }

.mail-folders{ display:flex; flex-direction:column; gap: 6px; }
.mail-folder{
  width: 100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 800;
}
.mail-folder:hover{ background: rgba(255,255,255,.10); }
.mail-folder.active{ background: rgba(37,99,235,.28); border-color: rgba(37,99,235,.35); }
.mail-badge{
  height: 18px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239,68,68,.92);
  color: white;
  font-size: 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.mail-list{ overflow:hidden; 
  border-right: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  min-width: 0;
}
.mail-list-top{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.mail-search{
  flex:1;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,18,32,.55);
  color: rgba(255,255,255,.92);
  padding: 0 14px;
  outline:none;
  font-weight: 700;
}
.mail-list-actions{ display:flex; gap: 8px; }
.mail-items{flex:1; overflow:auto; padding: 10px; display:flex; flex-direction:column; gap:8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mail-item{
  width:100%;
  text-align:left;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  cursor:pointer;
}
.mail-item:hover{ background: rgba(255,255,255,.08); }
.mail-item.active{ background: rgba(37,99,235,.22); border-color: rgba(37,99,235,.35); }
.mail-item.unread{ box-shadow: 0 0 0 1px rgba(56,189,248,.25) inset; }
.mail-item-top{ display:flex; justify-content:space-between; gap: 10px; align-items:center; }
.mail-item-who{ font-weight: 900; font-size: 13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-item-date{ font-size: 11px; color: rgba(255,255,255,.65); white-space:nowrap; }
.mail-item-subject{ margin-top: 4px; font-weight: 900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-item-preview{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.70); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-empty-list{ padding: 18px; color: rgba(255,255,255,.70); font-weight:700; }

.mail-read{ overflow:hidden; 
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
}
.mail-read-empty{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.mail-empty-ico{ font-size: 38px; opacity:.8; }
.mail-read-pane{ height:100%; display:flex; flex-direction:column; min-width:0; }
.mail-read-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.mail-read-subject{ font-weight: 950; font-size: 18px; }
.mail-read-meta{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.70); }
.mail-read-actions{ display:flex; align-items:flex-start; gap: 8px; }
.mail-read-body{
  flex:1;
  overflow:auto;
  padding: 16px;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  white-space: pre-wrap;
  color: rgba(255,255,255,.92);
}

/* Compose overlay */
.mail-compose{
  position:absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.mail-compose.show{ display:flex; }
.mail-compose-card{
  width: min(860px, calc(100% - 40px));
  height: min(640px, calc(100% - 60px));
  border-radius: 16px;
  background: rgba(15,23,42,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.mail-compose-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mail-compose-row{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
  min-width:0;
}
.mail-compose-label{ width: 64px; font-weight: 900; color: rgba(255,255,255,.80); }
.mail-compose-to{ flex:1; display:flex; gap: 8px; flex-wrap:wrap; min-width:0; }
.mail-compose-input{
  flex:1;
  min-width:0;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,18,32,.55);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
  outline:none;
  font-weight: 800;
}

/* Mail compose recipient select should look like "Delikt auswählen" */
.mail-compose-window select.mail-compose-input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.mail-compose-window select.mail-compose-input option{ background: #0f172a; color: #e5e7eb; }
.mail-compose-editor{
  flex:1;
  padding: 14px;
  outline:none;
  overflow-y:auto;
  overflow-x:hidden;
  color: rgba(255,255,255,.92);
  word-break: break-word;
  background: rgba(255,255,255,.03);
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mail-compose-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

/* Compose in its own window (Outlook-ish toolbar) */
.mail-compose-window{
  height: 100%;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}
.mailfmt-toolbar{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  flex-wrap:wrap;
}
.mailfmt-btn{
  width: 34px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight: 950;
  user-select:none;
  position:relative;
  z-index:4;
}
.mailfmt-btn:hover{ background: rgba(255,255,255,.10); }
.mailfmt-btn img{ width:16px; height:16px; display:block; object-fit:contain; }
.mail-compose-editor{ color:#ffffff; }
.mailfmt-sep{
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.10);
  margin: 0 4px;
}

.mail-chip{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 800;
}
.mail-chip-x{ cursor:pointer; opacity:.85; }
.mail-chip-x:hover{ opacity:1; }
.mail-chip-hint{ color: rgba(255,255,255,.60); font-size: 12px; font-weight:700; }

/* Recipient picker */
.mail-recipient-picker{
  position:absolute;
  inset: 16px;
  border-radius: 16px;
  background: rgba(15,23,42,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.mail-recipient-picker.show{ display:flex; }
.mail-picker-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mail-picker-controls{
  display:flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mail-picker-select{
  width: 180px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,18,32,.55);
  color: rgba(255,255,255,.92);
  padding: 0 10px;
  font-weight: 800;
  outline:none;
}
.mail-picker-search{
  flex:1;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,18,32,.55);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
  outline:none;
  font-weight: 800;
}
.mail-picker-list{ flex:1; overflow:auto; padding: 10px 14px; display:flex; flex-direction:column; gap: 8px; }
.mail-pick-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.mail-pick-row:hover{ background: rgba(255,255,255,.08); }
.mail-pick-row input{ margin-top: 3px; }
.mail-pick-main{ flex:1; min-width:0; }
.mail-pick-name{ font-weight: 900; }
.mail-pick-dn{ margin-left: 8px; font-size: 11px; color: rgba(255,255,255,.65); font-weight: 800; }
.mail-pick-sub{ font-size: 12px; color: rgba(255,255,255,.70); margin-top: 3px; }
.mail-picker-actions{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .mail-app{ grid-template-columns: 220px 1fr; }
  .mail-read{ display:none; }
}


.mail-compose-editor img{ max-width:100%; height:auto; }

.window.is-mail-compose .window-body{ overflow:hidden; }

/* Urlaub Kalender (Google-Calendar-ish) */
.vac-calendar{
  height: 100%;
  display:flex;
  flex-direction:column;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
  /* JS sets this to the same value as MAX_VISIBLE_ROWS */
  --vac-max-rows: 3;
}
.vac-cal-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.vac-cal-title{
  font-weight: 950;
  letter-spacing:.2px;
}
.vac-cal-grid{
  display:flex;
  flex-direction:column;
  gap: 0;
  padding: 0;
  flex:1;
  min-height:0;
}

/* Header row kept aligned with the scrollable body even when a vertical scrollbar is present */
.vac-cal-dow-row{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-right: var(--vac-scrollbar, 0px);
  background: rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vac-cal-dow{
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  border-right: 1px solid rgba(255,255,255,.06);
}
.vac-cal-dow:nth-child(7n){ border-right:none; }

.vac-cal-days{
  width: 100%;
  flex:1;
  min-height:0;
  overflow:auto;
  overflow-x:hidden;
  display:block;
}
.vac-cal-cell{
  position:relative;
  padding: 10px 10px 8px;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);
  overflow:hidden;
}
.vac-cal-cell:nth-child(7n){ border-right:none; }
.vac-cal-cell.is-out{ opacity:.45; }
.vac-cal-daynum{
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  width: 26px;
  height: 26px;
  display:grid;
  place-items:center;
  border-radius: 999px;
}
.vac-cal-cell.is-today .vac-cal-daynum{
  background: rgba(96,165,250,.35);
  border: 1px solid rgba(96,165,250,.55);
}
.vac-cal-events{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vac-cal-event{
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.35);
  color: rgba(255,255,255,.92);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.vac-cal-event.is-active{
  background: rgba(34,197,94,.26);
  border-color: rgba(34,197,94,.55);
}
.vac-cal-more{
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 800;
}

/* Month view: week rows + spanning bars */
.vac-cal-week{
  position:relative;
  display:block;
}
.vac-cal-week-cells{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}
.vac-cal-week-bars{
  position:absolute;
  left:0;
  right:0;
  top: 44px; /* below day number */
  padding: 0 8px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 26px;
  gap:6px;
  pointer-events:none;

  /* Prevent bars from visually spilling into the next week row */
  height: calc((var(--vac-max-rows, 3) * 32px) - 6px);
  overflow:hidden;
  z-index: 2;
}
.vac-cal-bar{
  pointer-events:auto;
  display:flex;
  align-items:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;

  /* Color per employee via --vac-h */
  background: hsla(var(--vac-h) 70% 58% / .18);
  border: 1px solid hsla(var(--vac-h) 70% 58% / .42);
  margin-left: -6px;
  margin-right: -6px;
}
.vac-cal-bar.is-start{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.vac-cal-bar.is-end{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.vac-cal-bar.is-hidden{ display:none; }

/* "+X mehr" clickable */
.vac-cal-more{
  /* Month view: place the "+X mehr" chip below the visible bar lanes (Google-like) */
  width: fit-content;
  cursor:pointer;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  user-select:none;
  position:absolute;
  left: 10px;
  top: calc(44px + (var(--vac-max-rows, 3) * 32px) + 6px);
  z-index: 3;
}
.vac-cal-more:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* Popup for day details (contextmenu-like: non-modal, does not block the calendar) */
.vac-cal-pop{
  position: fixed;
  left: -9999px;
  top: -9999px;
  display:none;
  z-index: 9999;
  /* contextmenu-like: the popup only occupies its own size, so it won't block the calendar */
  pointer-events: auto;
}
.vac-cal-pop.open{ display:block; }
.vac-cal-pop-inner{
  width: 320px;
  max-width: calc(100% - 22px);
  background: rgba(25,25,25,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 12px 14px 14px;
  pointer-events: auto; /* allow interactions inside */
}
.vac-cal-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.vac-cal-pop-date{
  font-weight: 950;
  letter-spacing:.3px;
  color: rgba(255,255,255,.92);
}
.vac-cal-pop-x{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.vac-cal-pop-x:hover{
  background: rgba(255,255,255,.10);
}
.vac-cal-pop-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 360px;
  overflow:auto;
  padding-right: 2px;
}
.vac-cal-pop-item{
  border-radius: 14px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.vac-cal-pop-chip{
  font-weight: 950;
  color: rgba(255,255,255,.95);
  padding: 6px 10px;
  border-radius: 12px;
  display:inline-flex;
  width:100%;
  background: hsla(var(--vac-h) 70% 58% / .18);
  border: 1px solid hsla(var(--vac-h) 70% 58% / .42);
  margin-left: -6px;
  margin-right: -6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vac-cal-pop-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.75);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
}


.vac-cal-week-cells .vac-cal-cell{
  /* Space for: day number area (44px) + bar lanes (rows*32px - 6px) + "+X mehr" + breathing room */
  min-height: calc(44px + (var(--vac-max-rows, 3) * 32px) + 34px);
}

/* Keep day number and the "+X mehr" chip above the bar layer */
.vac-cal-week-cells{
  position:relative;
  z-index: 3;
}

/* =========================
   Taskbar hover preview (Win11-ish)
   ========================= */
.tb-preview-host{
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%) translateY(10px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-win), transform 220ms var(--ease-win);
}
.tb-preview-host.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.tb-preview{
  will-change: transform, opacity;

  width: 250px;
  border-radius: 16px;
  background: rgba(20,26,40,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.tb-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px 8px 12px;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tb-preview-title{
  font-size: 13px;
  font-weight: 800;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.tb-preview-x{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tb-preview-x:hover{ background: rgba(255,255,255,.16); }

.tb-preview-body{ padding: 10px; }
.tb-preview-mini{
  width: 100%;
  height: 105px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
}
.tb-preview-clone{
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transform-origin: top left;
  pointer-events:none;
}

.tb-preview-stage{
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}


/* =========================
   Urlaub calendar tooltip
   ========================= */
.vac-cal-tip{
  position: fixed;
  z-index: 99999;
  display: none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20,26,40,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  color: rgba(255,255,255,.92);
  max-width: 320px;
  pointer-events: none;
}
.vac-cal-tip .t1{ font-weight: 900; font-size: 13px; margin-bottom: 4px; }
.vac-cal-tip .t2{ font-size: 12px; opacity: .9; }
.vac-cal-tip .t3{ font-size: 12px; opacity: .8; margin-top: 4px; }


/* =========================
   Karte App
   ========================= */
.karte-wrap{height:100%;display:flex;flex-direction:column;min-height:0;}
.karte-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(20,20,28,.55);backdrop-filter: blur(10px);}
.karte-left{display:flex;align-items:center;gap:12px;min-width:0;}
.karte-right{display:flex;align-items:center;gap:10px;}
.karte-seg{display:inline-flex;gap:6px;padding:4px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
.karte-seg button{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.85);font-weight:700;font-size:12px;padding:7px 10px;border-radius:8px;cursor:pointer;}
.karte-seg button.active{background:rgba(255,255,255,.14);box-shadow: 0 8px 18px rgba(0,0,0,.25) inset;}
.karte-tools{display:flex;align-items:center;gap:8px;}
.karte-tools .btn{padding:7px 10px;min-width:36px;}
.karte-viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:rgba(0,0,0,.25);}
.karte-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;--km-marker-scale:1;}
.karte-stage img{display:block;max-width:none;user-select:none;pointer-events:none;}
.karte-markers-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.km-marker{position:absolute;width:30px;height:30px;pointer-events:auto;cursor:pointer;transform-origin:50% 100%;transform:translate3d(-50%,-100%,0) scale(var(--km-marker-ui-scale,1));will-change:transform;}
.km-marker::before{content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:999px;pointer-events:auto;background:transparent;}

.km-marker::after{content:"";position:absolute;left:50%;top:86%;width:16px;height:7px;transform:translate(-50%,-50%);background:rgba(0,0,0,.35);filter:blur(4px);border-radius:999px;z-index:-1;opacity:.9;}
.km-marker img{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));transition:transform 140ms cubic-bezier(.2,.9,.2,1);transform:translateZ(0);image-rendering:-webkit-optimize-contrast;
}
.km-marker:hover img{transform:translateY(-1px) scale(1.03);} 
.karte-hint{position:absolute;left:14px;bottom:14px;padding:10px 12px;border-radius:12px;background:rgba(15,15,22,.55);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.88);font-size:12px;backdrop-filter: blur(10px);}
.karte-popup{position:absolute;min-width:260px;max-width:360px;padding:12px 12px 10px;border-radius:14px;background:rgba(18,18,26,.80);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 55px rgba(0,0,0,.55);backdrop-filter: blur(12px);z-index:5;}
.karte-popup .km-badge{display:inline-block;margin:0 0 8px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:11px;color:rgba(255,255,255,.82);}
.karte-popup h4{margin:0 0 6px;font-size:14px;color:rgba(255,255,255,.92);}
.karte-popup .km-desc{margin:0 0 10px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.80);}
.karte-popup .km-actions{display:flex;justify-content:flex-end;gap:8px;}
.karte-popup .btn{padding:7px 10px;font-size:12px;}
.karte-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);}

/* Volume icon images */
.tb-vol-ico{
  width:18px;
  height:18px;
  display:block;
}
.fly-vol-ico{
  width:22px;
  height:22px;
  display:block;
}

.tray-btn img, .vol-ico img{pointer-events:none;}

.km-marker.is-highlight img{transform:translateZ(0) scale(1.12);filter:drop-shadow(0 10px 16px rgba(0,0,0,.65));}

.karte-mid{display:flex; align-items:center; gap:10px; margin-left:10px;}
.km-searchbox{position:relative; width:min(320px, 42vw);}
.km-search{height:34px;}
.km-filter{height:34px; min-width:170px;}
.km-search-results{position:absolute; left:0; right:0; top:calc(100% + 6px); background:rgba(28,32,40,.92); border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.45); overflow:hidden; z-index:50; backdrop-filter: blur(10px);}
.km-sr-item{width:100%; text-align:left; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:rgba(255,255,255,.92); background:transparent; border:0; cursor:pointer;}
.km-sr-item:hover{background:rgba(255,255,255,.07);}
.km-sr-title{font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.km-sr-cat{font-size:12px; opacity:.75; flex:0 0 auto;}
.km-coords{font-size:12px; opacity:.85; padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); user-select:none; white-space:nowrap;color:rgba(255,255,255,.95);}


/* Marker Dialog (Windows 11 Look) */
.km-md{display:flex;flex-direction:column;gap:12px;}
.km-md-head{display:flex;flex-direction:column;gap:4px;padding:2px 0 4px;}
.km-md-title{font-size:14px;font-weight:950;color:rgba(255,255,255,.92);}
.km-md-sub{font-size:12px;color:rgba(255,255,255,.72);}
.km-md-body{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;}
@media (max-width: 720px){
  .km-md-body{grid-template-columns:1fr;}
}
.km-md-left{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);}
.km-md-preview{width:100%;height:110px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);}
.km-md-preview img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));}
.km-md-upload{display:flex;flex-direction:column;gap:6px;}
.km-md-upload-hint{font-size:11px;opacity:.70;}
.km-md-section{font-size:12px;font-weight:900;color:rgba(255,255,255,.82);margin-top:2px;}
.km-ico-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;max-height:230px;overflow:auto;padding-right:4px;}
.km-ico-item{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:14px;padding:8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.88);transition:transform 120ms cubic-bezier(.2,.9,.2,1), background 120ms, border-color 120ms;}
.km-ico-item img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));}
.km-ico-item span{font-size:11px;font-weight:850;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.km-ico-item:hover{background:rgba(255,255,255,.10);transform:translateY(-1px);}
.km-ico-item.is-sel{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(59,130,246,.18);}
.km-md-right{display:flex;flex-direction:column;gap:10px;}
.km-md-footnote{font-size:11px;opacity:.72;line-height:1.3;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);}


/* Urlaub Schnellfilter */
.vac-qf{ display:flex; gap:8px; align-items:center; }
.qf-btn{ height:34px; padding:0 12px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.86); font-weight:900; cursor:pointer; }
.qf-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.qf-btn.active{ background: rgba(120,200,255,.18); border-color: rgba(120,200,255,.35); color:#e5e7eb; }

/* Strafkatalog Gesetzbuch Drag&Drop */
.sk-law-drag{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.75); cursor:grab; user-select:none; }
.sk-law-drag:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.sk-law-row.dragging{ opacity:.55; }

/* =======================
   STAFF INTERN (WIN11 CARD STYLE)
   ======================= */
.sd-intern-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:14px;
  align-items:start;
}
.sd-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.sd-card-title{
  font-weight: 900;
  margin-bottom: 8px;
}
.sd-intern-side{
  position: sticky;
  top: 10px;
}
.sd-intern-noteedit{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}
.sd-intern-actions{
  display:flex;
  justify-content:flex-end;
}
@media (max-width: 980px){
  .sd-intern-grid{ grid-template-columns: 1fr; }
  .sd-intern-side{ position: static; }
}

/* =======================
   STAFF OVERVIEW: nicht eingrauen (View-Mode)
   ======================= */
#sdOv .input[readonly],
#sdOv input[readonly],
#sdOv textarea[readonly]{
  opacity: 1 !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#sdOv select:disabled{
  opacity: 1 !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  cursor: default !important;
}

/* =======================
   STAFF INTERN: Schrift weiß + Notiz wie Akte hinzufügen
   ======================= */
.sd-intern-grid, .sd-intern-grid *{
  color: #fff !important;
}
#sdNoteText{
  min-height: 230px !important;
  resize: vertical !important;
  text-indent: 0 !important;
}
#sdNoteAdd.btn-add{
  height: 38px;
  border-radius: 12px;
  font-weight: 900;
}


/* Remove focus/active click flash on shortcuts */
.shortcut:focus, .shortcut:focus-visible{ outline:none; }
.shortcut:active{ background: transparent !important; }


    /* Settings: Background variant previews */
    .bg-variant-card{
      width: 170px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      padding: 10px;
      cursor: pointer;
      display:flex;
      flex-direction:column;
      gap: 8px;
      text-align:left;
      transition: transform .08s ease, background .12s ease, border-color .12s ease;
    }
    .bg-variant-card:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
    .bg-variant-card.selected{ border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 2px rgba(255,255,255,.16) inset; }
    .bg-variant-preview{
      width: 100%;
      height: 92px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,.16);
      background-color: rgba(0,0,0,.25);
    }
    .bg-variant-label{ font-size: 12px; font-weight: 800; opacity: .92; }


/* Login: AMS Logo als Profilbild */
.w11-user-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
  display:block;
}



/* --- PATCH v19 --- */
/* Mail: do not scroll whole window; only mail-items area scrolls */
.window-body.mail-window-body{ overflow:hidden; overscroll-behavior: contain; height:100%; }

/* Mitarbeiter hinzufügen (Token Manager): ensure white text + Urlaub-like green active tab */
.staff-token-manager, .staff-token-manager *{ color: rgba(255,255,255,.92); }
.staff-token-manager a{ color: rgba(180,220,255,.95); }
.staff-token-manager input, .staff-token-manager select, .staff-token-manager textarea{
  color: rgba(255,255,255,.92);
}
.staff-token-manager ::placeholder{ color: rgba(255,255,255,.45); }



/* v22: Rundnotiz Pin-Button centering */
.note-pin-btn, .note-pin, .rn-pin-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
}


.icon-btn svg{ width: 18px; height: 18px; display:block; pointer-events:none; }

/* ==============================
   AMS: Textarea wie "Akte hinzufügen" (Sachverhalt)
   + kompaktere Intern-Notiz
   ============================== */
.ams-sachverhalt-textarea{
  width:100%;
  background: rgba(16, 22, 35, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 12px !important;
  padding: 12px 12px !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  resize: vertical;
  text-indent: 0;
  white-space: pre-wrap;
}
.ams-sachverhalt-textarea::placeholder{ color: rgba(255,255,255,0.45); }
.ams-sachverhalt-textarea:focus{
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.ams-intern-note-compact{
  min-height: 120px !important;
  height: 120px !important;
  max-height: 190px !important;
  padding: 10px 10px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.ams-rank-history-compact{
  font-size: 12px !important;
  line-height: 1.25 !important;
}

@media print{
  .ams-pdf-disclaimer-rail{
    position: fixed;
    right: -320px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    font-size: 9px;
    letter-spacing: 0.2px;
    color: rgba(0,0,0,0.55);
    max-width: 520px;
    white-space: normal;
    line-height: 1.2;
    pointer-events: none;
  }
}


/* --- Personenakte: Akte hinzufügen - Standort anlegen (Win11-style) --- */
.sv-loc-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.sv-loc-btn{
  padding: 8px 12px;
}
.sv-loc-val{
  margin-left:auto;
  font-size:12px;
  color: rgba(255,255,255,.70);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  min-width: 170px;
  text-align:center;
}

/* Fix perceived blur after maximize for heavy dialog content (backdrop-filter + transform layers) */
.window.max.sv-addcase-win{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(18,25,40,.92) !important;
}
.window.sv-addcase-win{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
/* Help some browsers keep text crisp after maximize */
.window.max.sv-addcase-win .content{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Standort-Picker (uses Karte assets) */
.window.sv-loc-win .content{
  overflow: hidden;
}
.sv-loc-picker{
  height: 100%;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.sv-loc-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
.sv-loc-coords{
  font-size:12px;
  color: rgba(255,255,255,.75);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  min-width: 170px;
  text-align:center;
}
.sv-loc-viewport{
  position:relative;
  flex:1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #0b1220;
  overflow:hidden;
}
.sv-loc-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor: crosshair;
}
.sv-loc-img{
  position:absolute;
  left:0; top:0;
  transform-origin: top left;
  user-select:none;
  -webkit-user-drag:none;
}
.sv-loc-marker-layer{
  position:absolute;
  left:0; top:0;
  width:1px; height:1px;
  transform-origin: top left;
  pointer-events:none;
}
.sv-loc-marker{
  position:absolute;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.sv-loc-marker img{
  width: 34px;
  height: 34px;
}
.sv-loc-hint{
  position:absolute;
  left: 12px;
  bottom: 12px;
  font-size:12px;
  color: rgba(255,255,255,.70);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}


/* === Akte Viewer (Win11) === */
.akte-view{ padding:14px; color:rgba(255,255,255,.92); }
.akte-topbar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;
  position:sticky; top:0; z-index:3;
  background: rgba(11,18,32,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
}
.akte-title{ font-weight:950; font-size:16px; letter-spacing:.2px; }
.akte-sub{ margin-top:6px; color:rgba(255,255,255,.72); font-size:12px; }
.akte-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.akte-grid{ margin-top:12px; display:grid; grid-template-columns: 1.35fr 1fr; gap:12px; align-items:start; }
@media (max-width: 980px){ .akte-grid{ grid-template-columns: 1fr; } .akte-topbar{ position:relative; } }
.akte-card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius:16px;
  padding:12px;
}
.akte-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.akte-card-title{ font-weight:900; }
.akte-card-hint{ margin-top:3px; font-size:12px; color:rgba(255,255,255,.65); }
.akte-sv{ min-height: 420px; resize: vertical; }
.akte-kpi-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; }
@media (max-width: 980px){ .akte-kpi-grid{ grid-template-columns: 1fr; } }
.akte-kpi{
  padding:9px; border-radius:14px; background:#0b1220; border:1px solid rgba(255,255,255,.10);
}
.akte-kpi .lbl{ font-size:12px; color:rgba(255,255,255,.65); font-weight:800; }
.akte-kpi .val{ margin-top:4px; font-weight:900; }
.akte-kpi-wide{ grid-column: 1 / -1; }

/* ============================
   Akte hinzufügen – Validation
   ============================ */
.input-error,
textarea.input-error,
select.input-error{
  border-color: rgba(255, 80, 80, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.35) !important;
}
.input-error:focus,
textarea.input-error:focus,
select.input-error:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.45) !important;
}

@keyframes win11Shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-3px); }
  40%{ transform: translateX(3px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(2px); }
}
.win11-validate-shake{ animation: win11Shake 220ms ease-in-out; }

/* ============================
   Akte – Standort Preview
   ============================ */
.akte-map-preview{
  position: relative;
  width: 100%;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 220%; /* zoom a bit so marker is readable */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
}
.akte-map-marker{
  position:absolute;
  left:50%;
  top:50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%,-100%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.akte-map-marker:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.95);
}
.akte-map-marker:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(255, 80, 80, 0.95);
}

/* Standort unter Sachverhalt */
.akte-sv-loc{
  margin-top: 12px;
}
.akte-sv-loc .akte-map-preview{
  height: 210px;
  background-size: 240%;
}
.akte-section{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.10); }
.akte-sec-title{ font-size:12px; color:rgba(255,255,255,.65); font-weight:900; margin-bottom:6px; }
.akte-empty{ color:rgba(255,255,255,.72); font-size:13px; }
.akte-note{ padding:9px; border-radius:14px; background:#0b1220; border:1px solid rgba(255,255,255,.10); }
.akte-note .t{ font-size:12px; color:rgba(255,255,255,.65); font-weight:800; }
.akte-note .v{ margin-top:4px; font-weight:900; }
.akte-history .ts{ opacity:.72; font-weight:800; }


.sv-loc-row-compact{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.sv-loc-row-compact .sv-loc-val{ font-size:12px; color:rgba(255,255,255,.80); padding:8px 10px; border-radius:12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }

.akte-inline-hint{ margin-top:6px; font-size:12px; color:rgba(255,255,255,.55); }
.akte-form-grid{ gap:12px; }
.akte-subcard{ margin-top:10px; padding:10px; border-radius:14px; background:#0b1220; border:1px solid rgba(255,255,255,.10); }
.akteadd-view .akte-sv{ min-height: 520px; }
@media (max-width: 980px){ .akteadd-view .akte-sv{ min-height: 380px; } }


/* Akte hinzufügen – Delikte Suche (compact input) */
.input.input-compact{
  height: 38px;
  border-radius: 14px;
}


/* === Combo (Searchable Dropdown) – used in Akte hinzufügen === */

/* Akte: allow dropdowns to overflow (Delikte auswählen) */
.akte-card-details,
.akte-card-details .akte-section,
.akte-card-details .form-grid{
  overflow: visible !important;
}
.combo{ position:relative; width:100%; }
.combo-btn{
  width:100%;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.combo-btn:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.combo-btn:focus{ outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.combo-label{ text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combo-caret{ opacity:.75; font-size:12px; }

.combo-panel{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  z-index: 9999;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding:10px;
}
.combo-panel .combo-search{ width:100%; }
.combo-list{
  margin-top:8px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
.combo-head{
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.65);
}
.combo-opt{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
  cursor:pointer;
  color: rgba(255,255,255,.92);
  user-select:none;
}
.combo-opt:hover{ background: rgba(255,255,255,.06); }
.combo-opt:focus{ outline:none; background: rgba(255,255,255,.08); }
.combo-empty{
  padding:10px;
  border-radius:12px;
  font-size:12px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

/* v90 fixes: consistent titlebar controls + notes scroll */
.titlebar.sv-titlebar .sv-trow{
  min-height: 44px;
  align-items: stretch;
}

/* When maximized: window corners + caption buttons should be fully squared like Win11 */
.window.max .win-controls .ctrl{
  border-radius: 0 !important;
}

/* Rundnotiz: avoid window-level vertical scrollbar; scroll only inside the list */
.window[data-app="notes"] .window-body{
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.window[data-app="notes"] .notes-wrap{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.window[data-app="notes"] .notes-list{
  flex: 1;
  min-height: 0;
  overflow: auto;
}