*{box-sizing:border-box}
    body{
      margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;
      font-family:Segoe UI,Arial,sans-serif;color:#243244;
      background:linear-gradient(145deg,#edf5fb,#d9e7f3)
    }
    .login{
      width:min(430px,100%);padding:30px;border-radius:24px;background:#fff;
      box-shadow:0 24px 70px rgba(17,48,87,.18)
    }
    h1{margin:0 0 8px;color:#0b2f63}
    p{color:#6b7788;line-height:1.5}
    label{display:block;margin:18px 0 8px;font-weight:700;color:#0b2f63}
    input{width:100%;padding:14px;border:1px solid #d8e2ec;border-radius:12px;font:inherit}
    button{
      width:100%;margin-top:14px;padding:14px;border:0;border-radius:12px;
      background:#0b2f63;color:#fff;font:inherit;font-weight:800
    }
    .error{padding:10px 12px;background:#fff0f0;color:#a43737;border-radius:10px}
  
    .theme-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:40px;
      padding:8px 11px;
      border:1px solid #d8e2ec;
      border-radius:11px;
      background:#fff;
      color:#0b2f63;
      font:inherit;
      font-weight:800;
      cursor:pointer;
      white-space:nowrap
    }

    .theme-toggle-icon{font-size:.95rem}

    html[data-theme="dark"] body{
      color:#ececf1;
      background:#212121;
    }

    html[data-theme="dark"] .page{
      color:#ececf1;
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] .panel h2,
    html[data-theme="dark"] .name a,
    html[data-theme="dark"] .breadcrumbs a,
    html[data-theme="dark"] th,
    html[data-theme="dark"] .modal-header h2{
      color:#ececf1;
    }

    html[data-theme="dark"] .sub,
    html[data-theme="dark"] .muted,
    html[data-theme="dark"] .check,
    html[data-theme="dark"] .modal-note{
      color:#b4b4b4;
    }

    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .breadcrumbs,
    html[data-theme="dark"] .table-wrap,
    html[data-theme="dark"] tr,
    html[data-theme="dark"] .modal,
    html[data-theme="dark"] .login{
      background:#2f2f2f;
      color:#ececf1;
      border-color:#424242;
      box-shadow:0 16px 42px rgba(0,0,0,.32);
    }

    html[data-theme="dark"] th,
    html[data-theme="dark"] .modal-actions{
      background:#292929;
      color:#ececf1;
    }

    html[data-theme="dark"] td,
    html[data-theme="dark"] th,
    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-actions{
      border-color:#424242;
    }

    html[data-theme="dark"] input[type=file],
    html[data-theme="dark"] input[type=text],
    html[data-theme="dark"] input[type=password]{
      background:#212121;
      color:#ececf1;
      border-color:#4b4b4b;
    }

    html[data-theme="dark"] input::placeholder{
      color:#8f8f8f;
    }

    html[data-theme="dark"] .link,
    html[data-theme="dark"] .mini,
    html[data-theme="dark"] .logout,
    html[data-theme="dark"] .modal-close,
    html[data-theme="dark"] .modal-button.secondary,
    html[data-theme="dark"] .theme-toggle{
      background:#3a3a3a;
      color:#ececf1;
      border-color:#505050;
    }

    html[data-theme="dark"] .dashboard-link,
    html[data-theme="dark"] button:not(.danger-button):not(.modal-button){
      background:#ececf1;
      color:#212121;
    }

    html[data-theme="dark"] .danger-button{
      background:#492c2c;
      color:#ffb4b4;
      border-color:#694040;
    }

    html[data-theme="dark"] .warning{
      background:#332f23;
      color:#e8d59b;
      border-color:#5e5437;
    }

    html[data-theme="dark"] .icon{
      background:#3a3a3a;
    }

    html[data-theme="dark"] .folder .icon{
      background:#423b28;
    }

    html[data-theme="dark"] .modal-option{
      background:#252525;
      color:#ececf1;
    }

    html[data-theme="dark"] .upload-status.loading,
    html[data-theme="dark"] .ajax-toast.loading{
      background:#333333;
      color:#ececf1;
    }

    html[data-theme="dark"] .upload-status.success,
    html[data-theme="dark"] .ajax-toast.success{
      background:#20382b;
      color:#a7f3c6;
    }

    html[data-theme="dark"] .upload-status.error,
    html[data-theme="dark"] .ajax-toast.error{
      background:#482727;
      color:#ffc2c2;
    }

    html[data-theme="dark"] .login p,
    html[data-theme="dark"] .login label{
      color:#b4b4b4;
    }

:root{
      --blue:#0b2f63;
      --blue2:#1f5fa8;
      --yellow:#f6b600;
      --text:#263548;
      --muted:#6b7889;
      --line:#dce5ee;
    }
    *{box-sizing:border-box}
    body{
      margin:0;min-height:100vh;font-family:Segoe UI,Arial,sans-serif;color:var(--text);
      background:linear-gradient(145deg,#edf5fb,#dce9f4)
    }
    .page{width:min(1180px,calc(100% - 24px));margin:auto;padding:24px 0 32px}
    header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}
    h1{margin:0;color:var(--blue);font-size:clamp(1.9rem,4vw,3rem)}
    .sub{margin:5px 0 0;color:var(--muted)}
    .header-actions{
      display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end
    }
    .dashboard-link,.logout{
      padding:10px 14px;border-radius:12px;text-decoration:none;
      font-weight:700;white-space:nowrap
    }
    .dashboard-link{
      color:#fff;background:linear-gradient(145deg,var(--blue2),var(--blue));
      box-shadow:0 8px 20px rgba(11,47,99,.16)
    }
    .logout{
      color:var(--blue);background:#fff;border:1px solid var(--line)
    }
    .toolbar{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:18px}
    .panel{
      padding:20px;border-radius:20px;background:#fff;
      box-shadow:0 14px 38px rgba(17,48,87,.11)
    }
    .panel h2{margin:0 0 14px;color:var(--blue);font-size:1.05rem}
    .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    input[type=file],input[type=text]{
      flex:1;min-width:190px;padding:11px 12px;border:1px solid var(--line);
      border-radius:11px;font:inherit
    }
    button{
      padding:11px 15px;border:0;border-radius:11px;
      background:linear-gradient(145deg,var(--blue2),var(--blue));
      color:#fff;font:inherit;font-weight:800;cursor:pointer
    }
    .checks{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}

    .upload-status{
      display:none;align-items:center;gap:9px;margin-top:12px;padding:10px 12px;
      border-radius:11px;font-size:.88rem;font-weight:700
    }
    .upload-status.visible{display:flex}
    .upload-status.loading{background:#eef5fb;color:var(--blue)}
    .upload-status.success{background:#e8f7ef;color:#267a52}
    .upload-status.error{background:#fff0f0;color:#a43737}
    .upload-status-icon{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center}
    .upload-status.loading .upload-status-icon{
      border:2px solid rgba(11,47,99,.18);border-top-color:var(--blue);
      border-radius:50%;animation:toast-spin .8s linear infinite;font-size:0
    }

    .check{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.9rem}
    .breadcrumbs{
      display:flex;align-items:center;gap:7px;flex-wrap:wrap;
      padding:14px 16px;margin-bottom:14px;border-radius:16px;background:#fff
    }
    .breadcrumbs a{color:var(--blue);text-decoration:none;font-weight:700}
    .message{
      position:fixed;z-index:1000;top:14px;left:50%;transform:translateX(-50%);
      width:min(680px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;
      gap:14px;padding:13px 15px;border-radius:13px;font-weight:700;
      box-shadow:0 14px 36px rgba(17,48,87,.22)
    }
    .message-close{
      flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;
      background:rgba(255,255,255,.55);color:inherit;font-size:1.25rem;line-height:1
    }
    .success{background:#e8f7ef;color:#267a52}
    .error{background:#fff0f0;color:#a43737}
    .table-wrap{
      overflow:hidden;border-radius:20px;background:#fff;
      box-shadow:0 18px 46px rgba(17,48,87,.12)
    }
    table{width:100%;border-collapse:collapse}
    th,td{
      padding:15px 17px;text-align:left;border-bottom:1px solid var(--line);
      vertical-align:middle
    }
    th{background:#f4f8fc;color:var(--blue);font-size:.85rem;text-transform:uppercase}
    .name{display:flex;align-items:center;gap:11px;min-width:220px}
    .icon{
      width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
      background:rgba(11,47,99,.08)
    }
    .folder .icon{background:rgba(246,182,0,.18)}
    .name a{color:var(--blue);text-decoration:none;font-weight:750}
    .muted{color:var(--muted);font-size:.9rem}
    .badge{
      display:inline-flex;padding:4px 8px;border-radius:999px;
      background:#e9f6ef;color:#25744f;font-size:.76rem;font-weight:800
    }
    .actions{display:flex;gap:8px;flex-wrap:wrap}
    .link,.mini{
      padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--blue);
      background:#f0f5fa;border:1px solid var(--line);font-size:.86rem;font-weight:700
    }
    .project{background:#fff6d7;border-color:#ecd078}
    .action-button{cursor:pointer;font-family:inherit}
    .danger-button{background:#fff0f0;border-color:#efc5c5;color:#9b2f2f}

    .modal-backdrop{
      position:fixed;z-index:2000;inset:0;display:none;align-items:center;justify-content:center;
      padding:18px;background:rgba(8,25,48,.56);backdrop-filter:blur(4px)
    }
    .modal-backdrop.open{display:flex}
    .modal{
      width:min(460px,100%);max-height:calc(100vh - 36px);overflow:auto;
      border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.28)
    }
    .modal-header{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:18px 20px;border-bottom:1px solid var(--line)
    }
    .modal-header h2{margin:0;color:var(--blue);font-size:1.22rem}
    .modal-close{
      width:34px;height:34px;padding:0;border-radius:50%;background:#f0f5fa;
      color:var(--blue);font-size:1.15rem;line-height:1
    }
    .modal-body{padding:20px}
    .modal-body label.field-label{
      display:block;margin-bottom:7px;color:var(--blue);font-weight:750
    }
    .modal-body input[type=text]{
      width:100%;min-width:0;margin:0 0 15px;padding:11px 12px;border:1px solid var(--line);
      border-radius:10px;font:inherit
    }
    .modal-options{display:grid;gap:11px;margin-top:4px}
    .modal-option{
      display:flex;align-items:flex-start;gap:9px;padding:11px;border-radius:11px;
      background:#f6f9fc;color:var(--text);font-size:.92rem
    }
    .modal-option input{margin-top:2px}
    .modal-note{margin:0;color:var(--muted);line-height:1.55}
    .modal-actions{
      display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;
      border-top:1px solid var(--line);background:#fafcff
    }
    .modal-button{
      min-width:110px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);
      font:inherit;font-weight:800;cursor:pointer
    }
    .modal-button.secondary{background:#fff;color:var(--blue)}
    .modal-button.primary{background:linear-gradient(145deg,var(--blue2),var(--blue));color:#fff}
    .modal-button.danger{background:#b83a3a;color:#fff;border-color:#b83a3a}
    body.modal-open{overflow:hidden}

    .mini{cursor:pointer}
    .warning{
      margin-top:16px;padding:14px 16px;border-radius:15px;background:#fff8df;
      border:1px solid #f1d98a;color:#705a17;line-height:1.5;font-size:.92rem
    }
    @media(max-width:760px){
      .toolbar{grid-template-columns:1fr}
      header{align-items:flex-start}
      .table-wrap{overflow:visible;background:transparent;box-shadow:none}
      table,tbody,tr,td{display:block;width:100%}
      thead{display:none}
      tr{
        margin-bottom:14px;
        overflow:hidden;
        border-radius:18px;
        background:#fff;
        box-shadow:0 10px 28px rgba(17,48,87,.10)
      }
      td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:13px 15px;
        border-bottom:1px solid var(--line)
      }
      td:last-child{border-bottom:0}
      td:nth-child(2)::before{content:"Größe";font-weight:700;color:var(--blue)}
      td:nth-child(3)::before{content:"Geändert";font-weight:700;color:var(--blue)}
      td:nth-child(4){display:block}
      .name{min-width:0;width:100%}
      .name span,.name a{overflow-wrap:anywhere}
      .actions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
        gap:9px
      }
      .actions .link,
      .actions .mini{
        width:100%;
        min-height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center
      }
      .actions form{width:100%}
    }
    @media(max-width:520px){
      body{font-size:14px}
      .page{width:min(100% - 10px,1180px);padding-top:10px;padding-bottom:18px}
      header{flex-direction:row;align-items:flex-start;margin-bottom:10px}
      h1{font-size:1.55rem;line-height:1.05}
      .sub{font-size:.82rem;margin-top:3px}
      .header-actions{justify-content:flex-end;gap:7px}
      .dashboard-link,.logout{padding:7px 10px;border-radius:9px;font-size:.82rem}
      .panel{padding:12px;border-radius:14px}
      .panel h2{font-size:.95rem;margin-bottom:9px}
      .toolbar{gap:10px;margin-bottom:10px}
      .row{align-items:stretch;gap:7px}
      .row input[type=file],
      .row input[type=text],
      .row button{width:100%;min-width:0;padding:9px 10px;border-radius:9px}
      .checks{flex-direction:column;gap:7px;margin-top:9px}
      .check{font-size:.82rem}
      .upload-status{margin-top:9px;padding:8px 9px;border-radius:9px;font-size:.8rem}
      .breadcrumbs{padding:9px 11px;margin-bottom:9px;border-radius:12px;font-size:.88rem}
      tr{margin-bottom:9px;border-radius:13px}
      td{padding:9px 10px;gap:9px}
      .name{gap:8px}
      .icon{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:.95rem}
      .muted{font-size:.78rem}
      .badge{font-size:.68rem;padding:3px 6px}
      .actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
      .actions .link,
      .actions .mini{
        min-height:36px;padding:6px 7px;border-radius:8px;font-size:.78rem
      }
      .warning{margin-top:10px;padding:10px 11px;border-radius:11px;font-size:.78rem}
      .message{top:8px;width:calc(100% - 14px);padding:10px 11px;font-size:.85rem}
      .message-close{width:28px;height:28px;font-size:1rem}

      .modal-backdrop{padding:10px;align-items:flex-end}
      .modal{width:100%;border-radius:17px 17px 12px 12px;max-height:88vh}
      .modal-header{padding:13px 14px}
      .modal-header h2{font-size:1.05rem}
      .modal-body{padding:14px}
      .modal-body input[type=text]{padding:9px 10px;margin-bottom:11px}
      .modal-option{padding:9px;font-size:.82rem}
      .modal-actions{padding:11px 14px;gap:8px}
      .modal-button{min-width:0;flex:1;padding:9px 10px;font-size:.84rem}

    }
  
    .theme-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:40px;
      padding:8px 11px;
      border:1px solid #d8e2ec;
      border-radius:11px;
      background:#fff;
      color:#0b2f63;
      font:inherit;
      font-weight:800;
      cursor:pointer;
      white-space:nowrap
    }

    .theme-toggle-icon{font-size:.95rem}

    html[data-theme="dark"] body{
      color:#ececf1;
      background:#212121;
    }

    html[data-theme="dark"] .page{
      color:#ececf1;
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] .panel h2,
    html[data-theme="dark"] .name a,
    html[data-theme="dark"] .breadcrumbs a,
    html[data-theme="dark"] th,
    html[data-theme="dark"] .modal-header h2{
      color:#ececf1;
    }

    html[data-theme="dark"] .sub,
    html[data-theme="dark"] .muted,
    html[data-theme="dark"] .check,
    html[data-theme="dark"] .modal-note{
      color:#b4b4b4;
    }

    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .breadcrumbs,
    html[data-theme="dark"] .table-wrap,
    html[data-theme="dark"] tr,
    html[data-theme="dark"] .modal,
    html[data-theme="dark"] .login{
      background:#2f2f2f;
      color:#ececf1;
      border-color:#424242;
      box-shadow:0 16px 42px rgba(0,0,0,.32);
    }

    html[data-theme="dark"] th,
    html[data-theme="dark"] .modal-actions{
      background:#292929;
      color:#ececf1;
    }

    html[data-theme="dark"] td,
    html[data-theme="dark"] th,
    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-actions{
      border-color:#424242;
    }

    html[data-theme="dark"] input[type=file],
    html[data-theme="dark"] input[type=text],
    html[data-theme="dark"] input[type=password]{
      background:#212121;
      color:#ececf1;
      border-color:#4b4b4b;
    }

    html[data-theme="dark"] input::placeholder{
      color:#8f8f8f;
    }

    html[data-theme="dark"] .link,
    html[data-theme="dark"] .mini,
    html[data-theme="dark"] .logout,
    html[data-theme="dark"] .modal-close,
    html[data-theme="dark"] .modal-button.secondary,
    html[data-theme="dark"] .theme-toggle{
      background:#3a3a3a;
      color:#ececf1;
      border-color:#505050;
    }

    html[data-theme="dark"] .dashboard-link,
    html[data-theme="dark"] button:not(.danger-button):not(.modal-button){
      background:#ececf1;
      color:#212121;
    }

    html[data-theme="dark"] .danger-button{
      background:#492c2c;
      color:#ffb4b4;
      border-color:#694040;
    }

    html[data-theme="dark"] .warning{
      background:#332f23;
      color:#e8d59b;
      border-color:#5e5437;
    }

    html[data-theme="dark"] .icon{
      background:#3a3a3a;
    }

    html[data-theme="dark"] .folder .icon{
      background:#423b28;
    }

    html[data-theme="dark"] .modal-option{
      background:#252525;
      color:#ececf1;
    }

    html[data-theme="dark"] .upload-status.loading,
    html[data-theme="dark"] .ajax-toast.loading{
      background:#333333;
      color:#ececf1;
    }

    html[data-theme="dark"] .upload-status.success,
    html[data-theme="dark"] .ajax-toast.success{
      background:#20382b;
      color:#a7f3c6;
    }

    html[data-theme="dark"] .upload-status.error,
    html[data-theme="dark"] .ajax-toast.error{
      background:#482727;
      color:#ffc2c2;
    }

    html[data-theme="dark"] .login p,
    html[data-theme="dark"] .login label{
      color:#b4b4b4;
    }

/* Erzwungene Desktop-Vorschau auf schmalen Bildschirmen */
html[data-view="desktop"] body{min-width:1180px}
html[data-view="desktop"] .page{width:1150px;max-width:none}
html[data-view="desktop"] header{flex-direction:row;align-items:center}
html[data-view="desktop"] .toolbar{grid-template-columns:1.2fr .8fr}
html[data-view="desktop"] .table-wrap{overflow:hidden;background:var(--card);box-shadow:0 18px 46px rgba(17,48,87,.12)}
html[data-view="desktop"] table{display:table;width:100%}
html[data-view="desktop"] thead{display:table-header-group}
html[data-view="desktop"] tbody{display:table-row-group}
html[data-view="desktop"] tr{display:table-row;width:auto;margin:0;border-radius:0;box-shadow:none;background:transparent}
html[data-view="desktop"] th,html[data-view="desktop"] td{display:table-cell;width:auto;padding:15px 17px;border-bottom:1px solid var(--line)}
html[data-view="desktop"] td:nth-child(2)::before,html[data-view="desktop"] td:nth-child(3)::before{content:none}
html[data-view="desktop"] td:nth-child(4){display:table-cell}
html[data-view="desktop"] .actions{display:flex;width:auto;gap:8px}
html[data-view="desktop"] .actions .link,html[data-view="desktop"] .actions .mini{width:auto;min-height:0;display:inline-flex}
html[data-view="desktop"] .actions form{width:auto}