:root {
  color-scheme: dark;
  --glow: #14254a;
  --topbar-bg: rgba(17, 26, 46, .88);
  --head-bg: rgba(255, 255, 255, .02);
  --shadow: rgba(0, 0, 0, .55);
  --backdrop: rgba(0, 0, 0, .6);
  --blue-text: #93c5fd;
  --red-text: #fca5a5;
  --green-text: #86efac;
  --bg: #0b1220;
  --panel: #111a2e;
  --panel-2: #16213a;
  --border: #22304f;
  --text: #e6edf8;
  --muted: #8fa0bf;
  --blue: #3b82f6;
  --blue-2: #2563eb;
  --red: #ef4444;
  --green: #22c55e;
  --amber: #f59e0b;
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { background: var(--bg); }

body {
  background: radial-gradient(1200px 600px at 80% -10%, var(--glow) 0%, var(--bg) 60%) fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
code { background: var(--bg); padding: 2px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.muted { color: var(--muted); }
small, .hint { color: var(--muted); font-size: .85rem; }
.hint { margin: 12px 0 0; }
.hint a, .banner a, .link { text-decoration: underline; text-underline-offset: 2px; }
.center { text-align: center; }

/* ---------- Kopfzeile ---------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 24px;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 500; white-space: nowrap; }
.logo b { color: var(--blue); font-weight: 700; }

.mainnav { display: flex; gap: 4px; flex: 1; }
.mainnav a {
  padding: 8px 14px; border-radius: 10px; color: var(--muted); font-size: .95rem; white-space: nowrap;
  transition: background .15s, color .15s;
}
.mainnav a:hover { background: var(--panel-2); color: var(--text); }
.mainnav a.active { background: rgba(59, 130, 246, .16); color: var(--blue-text); }

.userbox { display: flex; align-items: center; gap: 10px; margin: 0; }
.username { color: var(--muted); font-size: .9rem; white-space: nowrap; display: flex; align-items: center; gap: 6px; }

/* ---------- Seiten-Gerüst ---------- */
.container { max-width: 1000px; margin: 0 auto; padding: 24px 16px 80px; }
.container.wide { max-width: 1240px; }
.container.narrow { max-width: 700px; }
.page-title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 600; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-head p { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.flashes { max-width: 1240px; margin: 16px auto 0; padding: 0 16px; display: grid; gap: 8px; }

/* ---------- Banner, Badges ---------- */
.banner { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 16px; }
.banner.error { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .5); }
.banner.ok { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .5); }
.banner.info { background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .45); }
.banner form.inline { display: inline; margin-left: 8px; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .75rem; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.badge.admin { background: rgba(59, 130, 246, .18); border-color: rgba(59, 130, 246, .5); color: var(--blue-text); }
.badge.ok { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .45); color: var(--green-text); }
.badge.bad { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .45); color: var(--red-text); }
.badge.info { color: var(--text); }

/* ---------- Buttons & Formularfelder ---------- */
.btn {
  display: inline-block; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 18px; font-size: .95rem; font-family: inherit; cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--blue); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--blue-2); border-color: var(--blue-2); font-weight: 600; }
.btn.primary:hover { background: var(--blue); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.small { padding: 6px 12px; font-size: .85rem; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

.field {
  flex: 1 1 160px; padding: 10px 12px; font-size: 1rem; font-family: inherit; min-width: 0;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
}
.field.small { flex: 0 1 auto; padding: 7px 10px; font-size: .9rem; }
.field:focus, .code-input:focus { outline: 2px solid var(--blue); border-color: transparent; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.inline-form label { color: var(--muted); font-size: .85rem; min-width: 130px; }
.stack-form { display: grid; gap: 10px; max-width: 420px; }
.check { color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.code-input { letter-spacing: .25em; text-align: center; font-size: 1.3rem !important; }

/* ---------- Dateien: Gerüst mit Seitenleiste ---------- */
.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.sidebar { position: sticky; top: 76px; display: grid; gap: 18px; }
.places { display: grid; gap: 4px; }
.place {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted);
  transition: background .15s, color .15s;
}
.place:hover { background: var(--panel-2); color: var(--text); }
.place.active { background: rgba(59, 130, 246, .16); color: var(--blue-text); font-weight: 600; }
.place-icon { font-size: 1.15rem; }
.place em {
  margin-left: auto; font-style: normal; font-size: .75rem; background: var(--blue-2); color: #fff;
  border-radius: 99px; padding: 1px 8px;
}
.meter { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; }
.meter-text { font-size: .85rem; }
.meter-sub { font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.meter-sub:last-child { margin-bottom: 0; }

.bar { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.bar.big { height: 12px; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, var(--blue-2)); border-radius: 99px; }
.bar-fill.warn { background: linear-gradient(90deg, #f59e0b, var(--red)); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); margin-bottom: 14px; font-size: .95rem; }
.crumbs a:hover { color: var(--blue); }
.crumbs a:last-child { color: var(--text); font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar-hint { margin-left: auto; color: var(--muted); font-size: .8rem; }
.small-note { font-size: .85rem; }

/* ---------- Karten und Tabellen ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel { padding: 22px 24px; margin-bottom: 18px; overflow: visible; }
.panel h2 { margin: 0 0 12px; font-size: 1.1rem; }
.panel h3 { margin: 22px 0 6px; font-size: 1rem; }
.panel p { color: var(--muted); margin: 0 0 12px; }
.panel p b { color: var(--text); }

.row {
  display: grid; grid-template-columns: 1fr 110px 160px 56px; align-items: center;
  gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row.item:hover { background: var(--panel-2); }
.row.item.ctx-open { background: rgba(59, 130, 246, .12); }
.row.head { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--head-bg); }
.row.head a:hover { color: var(--blue); }
.c-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.c-size, .c-date { color: var(--muted); font-size: .9rem; }
.c-act { display: flex; justify-content: flex-end; }
.icon { font-size: 1.4rem; }
.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name:hover { color: var(--blue); }
.shared-row { grid-template-columns: 1fr 160px 200px; }

.icon-btn {
  background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1;
  padding: 8px 12px; border-radius: 8px; color: var(--muted); font-family: inherit;
}
.icon-btn:hover { background: var(--border); color: var(--text); }
.row.item .more { opacity: 0; transition: opacity .12s; }
.row.item:hover .more, .row.item .more:focus-visible, .row.item.ctx-open .more { opacity: 1; }
@media (hover: none) { .row.item .more { opacity: 1; } }

.empty { text-align: center; padding: 64px 20px; color: var(--muted); }
.empty-icon, .big-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.empty h2 { color: var(--text); margin: 0 0 6px; }

/* ---------- Rechtsklick-Menü ---------- */
.ctx {
  position: fixed; z-index: 90; min-width: 230px; max-width: 300px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 18px 50px var(--shadow);
}
.ctx-head {
  padding: 6px 12px 6px; font-size: .78rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctx button {
  display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: var(--text);
  padding: 9px 12px; border-radius: 8px; font: inherit; font-size: .93rem; text-align: left; cursor: pointer;
}
.ctx button:hover, .ctx button:focus-visible { background: rgba(59, 130, 246, .2); outline: none; }
.ctx button.danger { color: var(--red-text); }
.ctx button.danger:hover, .ctx button.danger:focus-visible { background: rgba(239, 68, 68, .2); }
.ctx .ctx-icon { width: 1.4em; text-align: center; }
.ctx hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

/* ---------- Upload ---------- */
.uploads { display: grid; gap: 10px; margin-bottom: 16px; }
.up { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.up-top { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; margin-bottom: 8px; }
.up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-state { color: var(--muted); white-space: nowrap; }
.up.done .up-state { color: var(--green); }
.up.fail { border-color: rgba(239, 68, 68, .6); }
.up.fail .up-state { color: var(--red); white-space: normal; text-align: right; }

.drop-overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(37, 99, 235, .25); backdrop-filter: blur(3px);
  border: 3px dashed var(--blue); font-size: 1.5rem; font-weight: 600;
}

/* ---------- Hinweise (Toasts) und Dialoge ---------- */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 100; width: min(92vw, 420px); }
.toast {
  background: var(--panel-2); border: 1px solid var(--border); border-left: 4px solid var(--blue);
  padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 30px var(--shadow);
}
.toast.error { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; width: min(92vw, 440px);
}
dialog.wide { width: min(94vw, 560px); }
dialog::backdrop { background: var(--backdrop); }
dialog h3 { margin: 0 0 8px; }
dialog p { margin: 0 0 14px; color: var(--muted); word-break: break-word; }
dialog input[type=text] {
  width: 100%; padding: 10px 12px; margin-bottom: 14px; font-size: 1rem; font-family: inherit;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
dialog input[type=text]:focus { outline: 2px solid var(--blue); border-color: transparent; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.props { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 6px; }
.props dt { color: var(--muted); }
.props dd { margin: 0; word-break: break-word; }

.share-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; margin: 6px 0; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.share-row select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font: inherit; }

/* ---------- Login-Seiten ---------- */
.login-page { display: grid; place-items: center; padding: 20px; }
.login-card {
  width: min(100%, 400px); background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 28px; box-shadow: 0 20px 60px var(--shadow);
}
.login-logo { text-align: center; margin-bottom: 22px; }
.login-logo h1 { margin: 8px 0 2px; font-size: 1.8rem; font-weight: 500; }
.login-logo h1 b { color: var(--blue); }
.login-logo p { margin: 0; color: var(--muted); }
.login-form { display: grid; gap: 8px; }
.login-form label { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.login-form input {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
}
.login-form input:focus { outline: 2px solid var(--blue); border-color: transparent; }
.login-btn { margin-top: 14px; width: 100%; padding: 12px; font-size: 1rem; }
.login-card .banner { margin-bottom: 14px; font-size: .9rem; }

/* ---------- Sicherheit ---------- */
.status { font-weight: 500; }
.status.on, .status.off { color: var(--text) !important; }
.steps { color: var(--muted); padding-left: 20px; margin: 0 0 12px; }
.steps li { margin-bottom: 6px; }
.qr { background: #fff; width: fit-content; padding: 10px; border-radius: 12px; margin: 8px 0 14px; }
.qr img { display: block; }
.secret { display: inline-block; margin-top: 6px; letter-spacing: .08em; user-select: all; }
.codes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codes li {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; text-align: center; user-select: all;
}
.history .row { grid-template-columns: 150px 1.3fr 1fr 130px; font-size: .9rem; }
.history.cols5 .row { grid-template-columns: 150px 110px 1.3fr 1fr 130px; }
.history.activity .row { grid-template-columns: 150px 110px 170px 1fr; }
.history .detail { word-break: break-word; }
.filters { margin-bottom: 14px; }

/* ---------- Speicher-Seite ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 2px; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat b { font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.stat small { color: var(--muted); }
.stat.alert { border-color: rgba(239, 68, 68, .55); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) minmax(110px, 170px); align-items: center; gap: 12px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label a:hover { color: var(--blue); }
.hbar { height: 12px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.hbar div { height: 100%; border-radius: 99px; min-width: 3px; }
.bar-value { display: grid; text-align: right; line-height: 1.25; }
.bar-value small { font-size: .75rem; }
.stackbar { display: flex; height: 16px; background: var(--panel-2); border-radius: 99px; overflow: hidden; gap: 2px; }
.stackbar div { height: 100%; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 14px 0 0; color: var(--muted); font-size: .9rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.free { background: var(--panel-2); border: 1px solid var(--border); }
.legend b { color: var(--text); margin-left: 4px; }
.table.compact .row { padding: 9px 4px; }
.big-row { grid-template-columns: 1fr 90px 110px; }
.limit-row { grid-template-columns: 1fr 100px minmax(120px, 1fr); }

.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg a { padding: 7px 14px; font-size: .9rem; color: var(--muted); }
.seg a.on { background: rgba(59, 130, 246, .2); color: var(--blue-text); font-weight: 600; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tabs a { padding: 10px 16px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--blue-text); border-bottom-color: var(--blue); font-weight: 600; }

/* ---------- Admin ---------- */
.user-list { display: grid; gap: 12px; }
.user-card { padding: 16px 20px; display: grid; gap: 10px; overflow: visible; }
.user-card.is-disabled { opacity: .7; }
.user-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.user-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.05rem; }
.user-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .88rem; }
.manage summary { width: fit-content; }
.manage[open] summary { margin-bottom: 12px; }
.manage-body { display: grid; gap: 12px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.manage-actions form { margin: 0; }

/* ---------- Tablet / Smartphone ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 14px; }
  .sidebar { position: static; }
  .places { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .place { white-space: nowrap; background: var(--panel); border: 1px solid var(--border); padding: 8px 14px; }
  .meter { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .mainnav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .userbox { margin-left: auto; }
  .username { display: none; }
  .row { grid-template-columns: 1fr 44px; padding: 11px 14px; }
  .row.head .c-size, .row.head .c-date { display: none; }
  .row .c-size, .row .c-date { display: none; }
  .row.head { grid-template-columns: 1fr; }
  .shared-row { grid-template-columns: 1fr; }
  .shared-row .c-size, .shared-row .c-date { display: block; padding-left: 40px; }
  .history .row, .history.cols5 .row, .history.activity .row { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .history .row.head { display: none; }
  .history .row .c-date, .history .row div { display: block; }
  .big-row, .limit-row { grid-template-columns: 1fr auto; }
  .big-row .c-date, .limit-row .c-date { display: none; }
  .limit-row .c-date { display: block; grid-column: 1 / -1; }
  .bar-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .bar-row .hbar { grid-column: 1 / -1; grid-row: 2; }
  .codes { grid-template-columns: 1fr; }
  .toolbar-hint { display: none; }
  .inline-form label { min-width: 100%; }
}

/* ======================================================================
   Erweiterungen: Navigation, Rechtsklick-Menü, Speicher, Admin
   ====================================================================== */
:root {
  --viz-1: #3987e5;                      /* Balken / Anteil (Blau, Stufe 400) */
  --viz-track: rgba(57, 135, 229, .16);  /* Balkenspur: dieselbe Farbfamilie, heller */
  --viz-other: #7d8aa6;                  /* "Rest" / Hintergrund-Grau */
  --warning: #fab219;
  --critical: #d03b3b;
}

.btn { display: inline-block; text-decoration: none; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.spaced { margin-top: 16px; }
.stack-form { display: grid; gap: 10px; max-width: 420px; }
.hint-inline { color: var(--muted); font-size: .85rem; }
.link-inline { color: var(--blue); text-decoration: underline; margin-left: 8px; }

/* Kopfzeile mit Hauptmenü */
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; }
.mainnav a { padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: .95rem; white-space: nowrap; }
.mainnav a:hover { background: var(--panel-2); color: var(--text); }
.mainnav a.on { background: rgba(59, 130, 246, .18); color: var(--text); }
.role-badge { font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); margin-left: 6px; vertical-align: middle; }
.role-badge.admin { background: rgba(59, 130, 246, .22); color: var(--blue-text); }
.bar-fill.warn { background: var(--warning); }
.bar-fill.crit { background: var(--critical); }

/* Meldungen */
.banner { margin-bottom: 16px; }
.banner.warn { background: rgba(250, 178, 25, .1); border: 1px solid rgba(250, 178, 25, .5); }
.banner.info { background: rgba(59, 130, 246, .1); border: 1px solid rgba(59, 130, 246, .4); }
.infobar { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; color: var(--muted); font-size: .9rem; }
.infobar b { color: var(--text); }
.tip { margin-left: auto; color: var(--muted); font-size: .82rem; align-self: center; }

/* Dateiliste: Schilder und Zeilen */
.c-name { min-width: 0; }
.c-name .name { min-width: 0; }
.badge { flex: none; font-size: .72rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.badge.shared { border-color: rgba(59, 130, 246, .55); color: var(--blue-text); }
.badge.all { border-color: rgba(34, 197, 94, .5); color: var(--green-text); }
.badge.orphan { border-color: rgba(250, 178, 25, .6); color: var(--warning); }
.badge.foreign { border-color: rgba(143, 160, 191, .4); }
.row.ctx-target { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--blue); }
.c-act .icon-btn { font-weight: 700; }

/* Rechtsklick-Menü */
.ctx { position: fixed; z-index: 80; min-width: 240px; max-width: calc(100vw - 16px); background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px var(--shadow); }
.ctx[hidden] { display: none; }
.ctx hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; border-radius: 8px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ctx-item:hover, .ctx-item:focus-visible { background: rgba(59, 130, 246, .22); outline: none; }
.ctx-item.danger { color: var(--red-text); }
.ctx-item.danger:hover, .ctx-item.danger:focus-visible { background: rgba(239, 68, 68, .22); }
.ctx-ic { width: 1.5em; text-align: center; flex: none; }

/* Große Dialoge (Freigabe, Eigenschaften) */
dialog.wide { width: min(94vw, 520px); }
dialog.wide h3 { margin: 0 0 14px; }
dialog h4 { margin: 18px 0 10px; font-size: .95rem; }
.dlg-actions { margin-top: 18px; }
.share .hint { margin: 0 0 14px; }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: center; margin-bottom: 10px; }
.share-row .field { min-width: 0; width: 100%; }
.infolist { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.infolist dt { color: var(--muted); }
.infolist dd { margin: 0; word-break: break-word; }

/* Seitenkopf mit Knöpfen */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .page-title { margin: 0; }
.page-head-right { display: flex; align-items: center; gap: 12px; }

/* Speicher: Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.kpi-label { color: var(--muted); font-size: .85rem; }
.kpi-value { font-size: 1.9rem; font-weight: 600; margin: 4px 0 2px; }
.kpi-sub { color: var(--muted); font-size: .85rem; }

/* Speicher: Festplatte (Balken in einer Reihe, 2px Lücke dazwischen) */
.stack { display: flex; gap: 2px; height: 16px; }
.seg { display: block; min-width: 0; height: 100%; }
.seg:first-child { border-radius: 4px 0 0 4px; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg-cloud { background: var(--viz-1); }
.seg-other { background: var(--viz-other); }
.seg-free { background: var(--viz-track); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 14px 0 0; color: var(--muted); font-size: .9rem; }
.legend b { color: var(--text); margin-left: 4px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.sw-cloud { background: var(--viz-1); }
.sw-other { background: var(--viz-other); }
.sw-free { background: var(--viz-track); box-shadow: inset 0 0 0 1px var(--border); }
.meter { height: 10px; background: var(--viz-track); border-radius: 5px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--viz-1); }
.meter-fill.warn { background: var(--warning); }
.meter-fill.crit { background: var(--critical); }
.meter-text { margin: 10px 0 0; color: var(--muted); }
.meter-text b { color: var(--text); }

/* Speicher: Balkenlisten */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.brow { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr) minmax(130px, auto); align-items: center; gap: 16px; }
.blabel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic txt" "ic sub"; column-gap: 10px; align-items: center; min-width: 0; }
.bic { grid-area: ic; font-size: 1.25rem; }
.btxt { grid-area: txt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsub { grid-area: sub; color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btrack { display: block; height: 14px; background: var(--viz-track); border-radius: 0 4px 4px 0; }
.bfill { display: block; height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.bval { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.bval small { color: var(--muted); font-size: .76rem; }
.callout { background: rgba(59, 130, 246, .08); border: 1px solid rgba(59, 130, 246, .3); border-radius: 10px; padding: 12px 14px; color: var(--text) !important; }
.biglist { list-style: none; margin: 0; padding: 0; }
.biglist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.biglist li:last-child { border-bottom: 0; }
.bigname { display: flex; flex-direction: column; min-width: 0; }
.bigname a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bigname a:hover { color: var(--blue); }
.bigname small { color: var(--muted); }

/* Tabellen (Admin, Anmeldeverlauf) */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tabs a { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--blue); }
.tablewrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.wrap { word-break: break-word; min-width: 180px; }
.tbl tr.is-disabled td { opacity: .6; }
.tbl a:hover { color: var(--blue); }
.tag { font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); margin-left: 6px; vertical-align: middle; }
.tag.bad { background: rgba(239, 68, 68, .18); color: var(--red-text); }
.res { white-space: nowrap; }
.card .tablewrap + .hint, .panel .tablewrap { margin-top: 14px; }
.panel .tablewrap + .hint { margin-top: 14px; }

/* Admin: Aktionen pro Benutzer */
.actions summary { list-style: none; cursor: pointer; display: inline-block; }
.actions summary::-webkit-details-marker { display: none; }
.actions-pop { display: grid; gap: 10px; padding: 12px 0 4px; min-width: 260px; }
.actions-pop .inline-form { flex-wrap: nowrap; }
.actions-pop .field { flex: 1 1 120px; min-width: 0; padding: 7px 10px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row form { margin: 0; }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plain li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .mainnav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .tip { display: none; }
}
@media (max-width: 720px) {
  .brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; gap: 6px 12px; }
  .brow .blabel { grid-area: label; }
  .brow .btrack { grid-area: track; }
  .brow .bval { grid-area: val; }
  .share-row { grid-template-columns: 1fr; gap: 6px; }
  .tbl th, .tbl td { padding: 10px 10px; }
  .c-name .badge { display: none; }
}


/* ======================================================================
   Helles Design  (wird mit <html data-theme="light"> eingeschaltet, siehe theme.js)
   ====================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-2: #eaf0f9;
  --border: #d3dcec;
  --text: #15233f;
  --muted: #53648a;
  --blue: #2563eb;
  --blue-2: #1d4ed8;
  --red: #dc2626;
  --green: #16a34a;
  --amber: #b45309;
  --warning: #c26a04;
  --critical: #b42323;
  --glow: #dbe6fa;
  --topbar-bg: rgba(255, 255, 255, .9);
  --head-bg: rgba(21, 35, 63, .035);
  --shadow: rgba(26, 45, 90, .18);
  --backdrop: rgba(15, 25, 50, .45);
  --blue-text: #1d4ed8;
  --red-text: #b91c1c;
  --green-text: #15803d;
  --viz-1: #2f6fd0;
  --viz-track: rgba(37, 99, 235, .13);
  --viz-other: #8a97b3;
}

/* Weiße Schrift auf farbigen Knöpfen - in beiden Designs */
.btn.primary, .btn.danger { color: #fff; }

/* ======================================================================
   Suche, Verschieben, Profilbilder, Darstellung
   ====================================================================== */
.toolbar .search { position: relative; flex: 1 1 240px; max-width: 420px; margin-left: auto; }
.search .field { width: 100%; padding-left: 38px; padding-right: 36px; }
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; opacity: .8; }
.search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 6px 9px; border-radius: 8px; }
.search-clear:hover { background: var(--panel-2); color: var(--text); }
.scope { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; white-space: nowrap; }
p.tip { margin: -4px 0 14px; font-size: .82rem; color: var(--muted); }
.toolbar .tip { display: none; }
.results-head { padding: 12px 16px; color: var(--muted); font-size: .9rem; border-bottom: 1px solid var(--border); }
.results-head:empty { display: none; }
.c-text { display: grid; min-width: 0; }
.c-text .loc { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-text .loc:hover { color: var(--blue); text-decoration: underline; }
mark { background: rgba(250, 178, 25, .35); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Verschieben */
.row { -webkit-touch-callout: none; }
.row a { -webkit-user-drag: none; -webkit-touch-callout: none; }
body.dragging, body.dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
.row.lifted { opacity: .45; outline: 2px dashed var(--blue); outline-offset: -2px; }
.row.drop-hover { background: rgba(59, 130, 246, .22); outline: 2px solid var(--blue); outline-offset: -2px; }
.crumbs a.drop-hover { background: rgba(59, 130, 246, .25); outline: 2px solid var(--blue); border-radius: 8px; color: var(--text); }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; max-width: min(80vw, 320px);
  padding: 8px 14px; border-radius: 10px; background: var(--blue-2); color: #fff; font-weight: 600; font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 30px var(--shadow);
}
.picker-where { font-size: .85rem; color: var(--muted); margin-bottom: 8px; word-break: break-all; }
.picker-list { display: grid; gap: 4px; max-height: 45vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--bg); }
.picker-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.picker-item:hover, .picker-item:focus-visible { background: rgba(59, 130, 246, .18); outline: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Profilbilder */
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; background: var(--panel-2); }
.avatar.sm { width: 24px; height: 24px; font-size: .75rem; }
.avatar.lg { width: 96px; height: 96px; font-size: 2.4rem; }
.avatar.ph { display: inline-grid; place-items: center; color: #fff; font-weight: 700; line-height: 1; }
.avatar.c0 { background: #2563eb; } .avatar.c1 { background: #7c3aed; } .avatar.c2 { background: #0d9488; }
.avatar.c3 { background: #c2410c; } .avatar.c4 { background: #be185d; } .avatar.c5 { background: #4d7c0f; }
.username { text-decoration: none; }
.username:hover { color: var(--text); }
.user-cell { display: inline-flex; align-items: center; gap: 8px; }
.share-who { display: inline-flex; align-items: center; gap: 6px; }
.profile-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.profile-name { font-size: 1.2rem; font-weight: 600; }
.cropper { display: grid; justify-items: center; gap: 12px; }
.crop-canvas { width: 256px; height: 256px; max-width: 100%; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); cursor: grab; touch-action: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; color: var(--muted); }

/* Darstellung */
.theme-btn { font-size: 1.05rem; }
.theme-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.theme-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.theme-seg button:hover { color: var(--text); }
.theme-seg button[aria-pressed="true"] { background: var(--blue-2); color: #fff; font-weight: 600; }

@media (max-width: 720px) {
  .toolbar .search { order: 5; flex-basis: 100%; max-width: none; margin-left: 0; }
  .username span.role-badge { display: none; }
  .c-text .loc { white-space: normal; }
}

/* Kopfzeile rechts: Speicheranzeige, Darstellung, Benutzer */
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.storage { min-width: 170px; }
.storage-text { font-size: .78rem; color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.storage .bar { height: 6px; }
.theme-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.profile-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.profile-avatar { display: grid; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .mainnav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 720px) {
  .storage { display: none; }
  .username { display: flex; }
  .username > :not(.avatar) { display: none; }
  .profile-row { grid-template-columns: 1fr; justify-items: start; }
}
.crop-zoom input { accent-color: var(--blue); }

/* ======================================================================
   Server-Anzeige, Warnstreifen, Einstellungen, Mülleimer
   ====================================================================== */
.alert-strip { background: rgba(239, 68, 68, .14); border-bottom: 1px solid rgba(239, 68, 68, .55); padding: 10px 24px; }
.alert-item { max-width: 1240px; margin: 0 auto; font-size: .92rem; }
.alert-item .link-inline { margin-left: 10px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.tile header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile h3 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--muted); }
.tile-state { font-size: .78rem; font-weight: 600; white-space: nowrap; padding: 2px 9px; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.tile[data-state="ok"] .tile-state { color: var(--green-text); background: rgba(34, 197, 94, .14); }
.tile[data-state="warn"] .tile-state { color: var(--warning); background: rgba(250, 178, 25, .16); }
.tile[data-state="crit"] .tile-state { color: var(--red-text); background: rgba(239, 68, 68, .16); }
.tile[data-state="crit"] { border-color: rgba(239, 68, 68, .55); }
.tile-value { font-size: 2rem; font-weight: 700; line-height: 1.15; word-break: break-word; }
.tile-value.small { font-size: 1.25rem; }
.tile-sub { color: var(--muted); font-size: .82rem; min-height: 1.2em; word-break: break-word; }
.spark { width: 100%; height: 44px; margin-top: 6px; }
.spark polyline { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.meter-track { height: 10px; background: var(--viz-track); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.meter-bar { height: 100%; background: var(--viz-1); border-radius: 99px; transition: width .4s; }
.tile[data-state="warn"] .meter-bar { background: var(--warning); }
.tile[data-state="crit"] .meter-bar { background: var(--critical); }
.sys-alerts .banner { margin-bottom: 14px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 8px; }
.form-grid label { display: grid; gap: 4px; color: var(--muted); font-size: .85rem; }
.form-grid .field { width: 100%; flex: none; }
.form-grid-wide, .form-grid-actions { grid-column: 1 / -1; }
.wide-form { max-width: 480px; }
.subsection { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.subsection summary { cursor: pointer; }

.trash-actions { display: flex; gap: 8px; justify-content: flex-end; }
.trash-actions form { margin: 0; }
.trash-table .row { grid-template-columns: minmax(0, 1fr) 100px 150px auto; }
.trash-group { margin-bottom: 14px; }
.trash-group h3 { margin: 0; }
@media (max-width: 720px) {
  .alert-strip { padding: 10px 14px; }
  .trash-table .row { grid-template-columns: 1fr; gap: 6px; }
  .trash-table .row.head { display: none; }
  .trash-table .row .c-size, .trash-table .row .c-date { display: block; color: var(--muted); font-size: .82rem; }
  .trash-actions { justify-content: flex-start; }
}

/* ---- PIN-Schutz ---- */
.badge.pin { background: rgba(245, 158, 11, .16); color: #fbbf24; border: 1px solid rgba(245, 158, 11, .35); margin-left: .35rem; }
:root[data-theme="light"] .badge.pin { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.pin-card { max-width: 26rem; margin-inline: auto; }
.pin-form { display: flex; gap: .6rem; margin: 1rem 0; }
.pin-form .pin-input { flex: 1; min-width: 0; text-align: center; letter-spacing: .25em; font-size: 1.1rem; }
.pin-box { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border, rgba(148,163,184,.25)); display: grid; gap: .5rem; }
.pin-box h4 { margin: 0; }
.pin-box .hint { margin: 0; }

/* ---- Ansehen (Viewer) ---- */
.viewer-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.viewer-title { margin: 0; flex: 1; min-width: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer { padding: .75rem; text-align: center; }
.viewer-img, .viewer-video { max-width: 100%; max-height: 80vh; border-radius: 8px; }
.viewer-audio { width: 100%; max-width: 32rem; margin: 1rem 0; }
.viewer-text { text-align: left; margin: 0; padding: 1rem; overflow: auto; max-height: 75vh; white-space: pre-wrap;
  word-break: break-word; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.viewer.view-only { -webkit-user-select: none; user-select: none; }
.pdf-pages { display: grid; gap: .75rem; justify-items: center; }
.pdf-page { width: 100%; max-width: 900px; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); overflow: hidden; }
.pdf-page.pdf-failed { background: rgba(239, 68, 68, .15); }
.pdf-canvas { display: block; width: 100%; height: auto; }
.pdf-status { margin: 0 0 .5rem; }
/* ---- PDF-Werkzeuge ---- */
.pdf-tool { display: grid; gap: .6rem; }
.pdf-tool .hint { margin: 0; }
.pdf-list { display: grid; gap: .25rem; max-height: 14rem; overflow: auto; border: 1px solid var(--border, rgba(148,163,184,.25)); border-radius: 8px; padding: .35rem; }
.pdf-item { display: flex; align-items: center; gap: .5rem; padding: .25rem .35rem; border-radius: 6px; }
.pdf-item:hover { background: rgba(59, 130, 246, .1); }
.pdf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-merge, .pdf-one, .pdf-pages, .pdf-angle { display: grid; gap: .5rem; }
.pdf-tool [hidden] { display: none !important; }

/* ======================================================================
   v8 - Neues Design: Tiefschwarz, Anthrazit, Blau/Cyan, Glas, Regen, Einstieg
   Sparsam gebaut: Animationen nur mit transform/opacity, Weichzeichner nur auf wenigen Flächen.
   ====================================================================== */
:root:not([data-theme="light"]) {
  --bg: #05070b;
  --panel: rgba(22, 27, 36, .72);
  --panel-2: rgba(34, 41, 54, .78);
  --border: rgba(120, 160, 220, .16);
  --text: #e9f0fa;
  --muted: #8d9bb3;
  --blue: #3d8bff;
  --blue-2: #1f6bff;
  --cyan: #22d3ee;
  --glow: #0b1d3a;
  --topbar-bg: rgba(10, 13, 19, .78);
  --head-bg: rgba(255, 255, 255, .03);
  --shadow: rgba(0, 0, 0, .7);
  --backdrop: rgba(0, 0, 0, .72);
  --blue-text: #7cc4ff;
  --accent-glow: 0 0 0 1px rgba(61, 139, 255, .45), 0 0 22px rgba(34, 211, 238, .22);
}
:root[data-theme="light"] { --cyan: #0891b2; --accent-glow: 0 0 0 1px rgba(37, 99, 235, .35), 0 6px 18px rgba(37, 99, 235, .18); }

:root:not([data-theme="light"]) body {
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(31, 107, 255, .20), transparent 70%),
    radial-gradient(700px 420px at 5% 105%, rgba(34, 211, 238, .10), transparent 70%),
    linear-gradient(180deg, #080b11, #05070b) fixed;
}

/* Inhalt liegt über dem Regen-Canvas */
main.container, .login-card, .layout { position: relative; z-index: 1; }
.topbar { z-index: 20; }

/* ---------- Glas ---------- */
.card, .panel, .up, .login-card, dialog, .ctx, .toast {
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 38%);
}
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .35);
}
:root:not([data-theme="light"]) .topbar {
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(61, 139, 255, .18);
  box-shadow: 0 1px 0 rgba(34, 211, 238, .06), 0 8px 24px rgba(0, 0, 0, .35);
}
:root:not([data-theme="light"]) dialog,
:root:not([data-theme="light"]) .ctx,
:root:not([data-theme="light"]) .login-card {
  background-color: rgba(18, 23, 32, .82);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(120, 170, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 20px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(31, 107, 255, .10);
}
dialog[open] { animation: v8-pop .22s cubic-bezier(.2, .8, .2, 1); }
dialog::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ctx { animation: v8-pop .14s ease-out; transform-origin: top left; }
@keyframes v8-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Knöpfe, Felder, Hover ---------- */
.btn, .icon-btn, .field, .row.item, .card, .up { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s, color .18s; }
.btn:hover { box-shadow: var(--accent-glow); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(135deg, var(--blue-2), #0ea5c8); border-color: transparent; box-shadow: 0 4px 16px rgba(31, 107, 255, .35); }
.btn.primary:hover { background: linear-gradient(135deg, var(--blue), #22d3ee); box-shadow: 0 6px 22px rgba(34, 211, 238, .35); }
.field:focus, .code-input:focus, dialog input[type=text]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 139, 255, .28); }
.icon-btn:hover { box-shadow: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.name:hover { color: var(--cyan); }
.login-logo h1 b { color: var(--cyan); text-shadow: 0 0 18px rgba(34, 211, 238, .45); }
:root[data-theme="light"] .login-logo h1 b { text-shadow: none; }

/* ---------- Passwort-Auge ---------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 46px; }
.pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: none; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s;
}
.pw-eye:hover { color: var(--cyan); background: rgba(61, 139, 255, .12); }
.pw-eye[aria-pressed="true"] { color: var(--cyan); }
.inline-form .pw-wrap, .stack-form .pw-wrap { flex: 1 1 160px; width: auto; }

/* ---------- Effekte-Schalter ---------- */
.fx-check { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; color: var(--text); }
.fx-check input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.rain-btn[aria-pressed="true"] { color: var(--cyan); background: rgba(34, 211, 238, .12); }
.fx-float { position: fixed; right: 16px; bottom: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); }
.fx-float[aria-pressed="true"] { color: var(--cyan); }
.view-btn { font-size: 1.2rem; }
.view-btn[aria-pressed="true"] { color: var(--cyan); }

/* ---------- Regen ---------- */
.fx-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

/* ---------- Dateiliste: Listenansicht ---------- */
.row.item:hover { background: rgba(61, 139, 255, .08); }
.row.item { position: relative; }
.row.item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--blue), var(--cyan)); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .18s;
}
.row.item:hover::before, .row.item.ctx-open::before { opacity: 1; transform: none; }
.thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; flex: none; background: var(--panel-2); opacity: 0; transition: opacity .35s; }
.thumb[src] { opacity: 1; }
.c-name:has(img.thumb[src]) > .icon { display: none; }
.c-name > .icon { transition: transform .2s; }
.row.item:hover .c-name > .icon { transform: scale(1.12); }

@keyframes v8-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#fileTable .row.item { animation: v8-rise .38s cubic-bezier(.2, .8, .2, 1) backwards; }
#fileTable .row.item:nth-child(2) { animation-delay: .02s; } #fileTable .row.item:nth-child(3) { animation-delay: .04s; }
#fileTable .row.item:nth-child(4) { animation-delay: .06s; } #fileTable .row.item:nth-child(5) { animation-delay: .08s; }
#fileTable .row.item:nth-child(6) { animation-delay: .10s; } #fileTable .row.item:nth-child(7) { animation-delay: .12s; }
#fileTable .row.item:nth-child(n+8) { animation-delay: .14s; }

/* ---------- Dateiliste: Kartenansicht ---------- */
:root[data-view="grid"] #fileTable { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; padding: 14px; }
:root[data-view="grid"] #fileTable .row.head { display: none; }
:root[data-view="grid"] #fileTable .row.item {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); min-width: 0;
}
:root[data-view="grid"] #fileTable .row.item:hover {
  transform: translateY(-3px); border-color: rgba(61, 139, 255, .55); background: rgba(61, 139, 255, .10);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 22px rgba(34, 211, 238, .14);
}
:root[data-view="grid"] .row.item::before { display: none; }
:root[data-view="grid"] .row.item .c-name { flex-direction: column; align-items: stretch; gap: 8px; }
:root[data-view="grid"] .row.item .thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
:root[data-view="grid"] .row.item .icon { font-size: 2.6rem; text-align: center; padding: 14px 0 6px; }
:root[data-view="grid"] .row.item .name { text-align: center; font-weight: 500; }
:root[data-view="grid"] .row.item .badge { align-self: center; }
:root[data-view="grid"] .row.item .c-size, :root[data-view="grid"] .row.item .c-date { font-size: .78rem; text-align: center; }
:root[data-view="grid"] .row.item .c-act { position: absolute; top: 6px; right: 6px; }
:root[data-view="grid"] .row.item .more, :root[data-view="grid"] .row.item .c-act .icon-btn {
  background: rgba(5, 7, 11, .6); border-radius: 8px; padding: 5px 9px; font-size: 1rem;
}
:root[data-view="grid"] .row.item .c-act { opacity: 0; transition: opacity .15s; }
:root[data-view="grid"] .row.item:hover .c-act, :root[data-view="grid"] .row.item.ctx-open .c-act { opacity: 1; }
@media (hover: none) { :root[data-view="grid"] .row.item .c-act { opacity: 1; } }
@media (max-width: 640px) { :root[data-view="grid"] #fileTable { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; } }

/* ---------- Upload-Balken ---------- */
.bar { position: relative; }
.up .bar-fill {
  position: relative; overflow: hidden; transition: width .25s ease-out;
  background: linear-gradient(90deg, var(--blue-2), var(--cyan));
  box-shadow: 0 0 12px rgba(34, 211, 238, .45);
}
.up .bar-fill::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: v8-shimmer 1.4s linear infinite;
}
.up.done .bar-fill::after, .up.fail .bar-fill::after { animation: none; display: none; }
.up.done .bar-fill { background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: 0 0 10px rgba(34, 197, 94, .4); }
.up { animation: v8-rise .3s ease-out; }
@keyframes v8-shimmer { to { transform: translateX(100%); } }

/* ---------- Einstiegs-Animation (nur transform/opacity) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(circle at 50% 45%, #0b1d3a 0%, #05070b 65%);
  animation: v8-intro-out .7s ease-in 2.7s forwards; cursor: pointer;
}
.intro.skip { animation: v8-intro-out .25s ease-in forwards; }
.intro-glow {
  position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .35), rgba(31, 107, 255, .18) 45%, transparent 70%);
  animation: v8-glow 2.8s ease-in-out both;
}
.intro-logo { position: relative; filter: drop-shadow(0 0 22px rgba(34, 211, 238, .5)); animation: v8-logo 1s cubic-bezier(.2, .8, .2, 1) both; }
.intro-outline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v8-draw 1.4s ease-out .1s forwards; }
.intro-water { transform: translateY(70px); animation: v8-fill 1.5s cubic-bezier(.3, .7, .2, 1) .7s forwards; }
.intro-wave { animation: v8-wave 1.8s linear infinite; }
.intro-sheen { transform: translateX(-10px) skewX(-18deg); animation: v8-sheen 1.1s ease-in-out 1.7s both; }
.intro-word {
  position: relative; font-size: 2.4rem; font-weight: 300; letter-spacing: .04em; color: #e9f0fa;
  animation: v8-word .9s ease-out 1.1s both;
}
.intro-word b { color: var(--cyan); font-weight: 600; text-shadow: 0 0 22px rgba(34, 211, 238, .6); }
@keyframes v8-intro-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes v8-glow { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; } 100% { opacity: .75; transform: scale(1.15); } }
@keyframes v8-logo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes v8-draw { to { stroke-dashoffset: 0; } }
@keyframes v8-fill { to { transform: translateY(-4px); } }
@keyframes v8-wave { to { transform: translateX(-28px); } }
@keyframes v8-sheen { from { transform: translateX(-10px) skewX(-18deg); } to { transform: translateX(80px) skewX(-18deg); } }
@keyframes v8-word { from { opacity: 0; transform: translateY(14px); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .04em; } }
body.has-intro > header, body.has-intro > main { animation: v8-reveal .8s ease-out 3s backwards; }
@keyframes v8-reveal { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
:root[data-intro="off"] .intro { display: none; }
:root[data-intro="off"] body.has-intro > header, :root[data-intro="off"] body.has-intro > main { animation: none; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.thumb:not([src]) { display: none; }

/* ---------- v9: Regen-Sound, Wetterleuchten ---------- */
.fx-float-2 { bottom: 68px; }
.sound-btn[aria-pressed="true"] { color: var(--cyan); background: rgba(34, 211, 238, .12); }
.fx-vol { gap: 14px; }
.fx-vol input[type=range] { width: min(260px, 60vw); accent-color: var(--blue); }
.fx-flash { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 60% 20%, rgba(190, 220, 255, .55), rgba(120, 170, 255, .12) 60%, transparent 85%); }
.fx-flash.on { animation: v9-flash 1.1s ease-out; }
@keyframes v9-flash { 0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .25; } 22% { opacity: .8; } 100% { opacity: 0; } }
:root[data-theme="light"] .fx-flash { background: radial-gradient(circle at 60% 20%, rgba(255, 255, 255, .8), transparent 80%); }

/* ---------- v10: Regen im Hintergrund, Lautstärke in der Kopfzeile, Einstellungen mit Seitenleiste ---------- */
.fx-rain { filter: blur(.4px); }
.snd-vol { display: none; width: 78px; accent-color: var(--cyan); cursor: pointer; align-self: center; }
.sound-btn[aria-pressed="true"] + .snd-vol { display: block; }
@media (max-width: 720px) { .sound-btn[aria-pressed="true"] + .snd-vol { width: 56px; } }

.container.settings-wrap { max-width: 1020px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 26px; align-items: start; }
.settings-title { grid-column: 1 / -1; }
.settings-nav { position: sticky; top: 116px; display: grid; gap: 4px; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.settings-nav a { padding: 9px 12px; border-radius: 9px; color: var(--muted); font-size: .92rem; transition: background .15s, color .15s; }
.settings-nav a:hover { background: rgba(61, 139, 255, .12); color: var(--text); }
.settings-main { min-width: 0; }
.settings-main section[id] { scroll-margin-top: 116px; }
html { scroll-behavior: smooth; }
@media (max-width: 800px) {
  .container.settings-wrap { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; display: flex; overflow-x: auto; margin-bottom: 14px; gap: 6px; }
  .settings-nav a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.fx-out { min-width: 3.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-vol input[type=range] { width: min(300px, 50vw); }


/* ---------- v12: cooleres Maus-Leuchten + mehr Animationen ---------- */
.fx-glow, .fx-core { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.fx-glow { width: 280px; height: 280px; margin: -140px 0 0 -140px; z-index: 150; }
.fx-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s;
  background: radial-gradient(circle, rgba(60, 120, 230, .13), rgba(30, 170, 200, .05) 38%, rgba(100, 70, 220, .02) 55%, transparent 68%);
}
.fx-glow.hot::before { transform: scale(1.2); background: radial-gradient(circle, rgba(30, 170, 200, .18), rgba(55, 120, 230, .07) 40%, transparent 68%); }
.fx-core { width: 10px; height: 10px; margin: -5px 0 0 -5px; z-index: 152; }
.fx-core::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s;
  background: radial-gradient(circle, rgba(225, 245, 255, .85) 0 22%, rgba(110, 190, 230, .6) 40%, rgba(34, 211, 238, 0) 72%);
  box-shadow: 0 0 9px 2px rgba(34, 160, 200, .32);
}
.fx-core.hot::before { transform: scale(1.8); box-shadow: 0 0 14px 3px rgba(55, 110, 220, .35); }
.fx-glow.on, .fx-core.on { opacity: 1; }
.fx-spark { position: fixed; left: 0; top: 0; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; pointer-events: none; z-index: 151; opacity: 0;
  background: #6fc3dd; box-shadow: 0 0 5px 1px rgba(34, 160, 200, .45); will-change: transform, opacity; }
.fx-ring { position: fixed; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; z-index: 151;
  border: 1.5px solid rgba(34, 170, 205, .55); box-shadow: 0 0 10px rgba(55, 110, 220, .3); animation: v12-ring .65s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes v12-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(5.5); opacity: 0; } }
:root[data-theme="light"] .fx-glow::before { mix-blend-mode: normal; background: radial-gradient(circle, rgba(37, 99, 235, .10), rgba(14, 165, 200, .04) 40%, transparent 66%); }
:root[data-theme="light"] .fx-core::before { background: radial-gradient(circle, #fff 0 18%, rgba(37, 99, 235, .8) 40%, rgba(37, 99, 235, 0) 72%); box-shadow: 0 0 12px 2px rgba(37, 99, 235, .4); }
:root[data-theme="light"] .fx-spark { background: #2563eb; box-shadow: 0 0 6px 1px rgba(37, 99, 235, .5); }
:root[data-theme="light"] .fx-ring { border-color: rgba(37, 99, 235, .7); box-shadow: 0 0 12px rgba(37, 99, 235, .35); }

/* Knopf-Wellen */
.btn { position: relative; overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: v12-rip .6s ease-out forwards; }
@keyframes v12-rip { to { transform: scale(1); opacity: 0; } }

/* Lichtkegel, der der Maus auf Karten folgt */
.card, .panel, .up, .settings-nav a, .login-card, .row.item { position: relative; }
.card::after, .panel::after, .up::after, .settings-nav a::after, .login-card::after, .row.item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(60, 120, 230, .07), transparent 65%);
}
.card:hover::after, .panel:hover::after, .up:hover::after, .settings-nav a:hover::after, .login-card:hover::after, .row.item:hover::after { opacity: 1; }
:root[data-theme="light"] .card::after, :root[data-theme="light"] .panel::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, .07), transparent 65%); }
#listing:hover::after { opacity: 0; }

/* Eingang & Schweben */
.logo svg { animation: v12-float 5s ease-in-out infinite; transform-origin: 50% 70%; filter: drop-shadow(0 0 8px rgba(61, 139, 255, .45)); }
.login-logo svg { animation: v12-float 5s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(34, 211, 238, .45)); }
@keyframes v12-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.login-card { animation: v12-rise-lg .7s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes v12-rise-lg { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.page-title { animation: v12-rise .5s cubic-bezier(.2, .8, .2, 1) backwards; }
main .card.panel { animation: v12-rise .55s cubic-bezier(.2, .8, .2, 1) backwards; }
main .settings-main section:nth-of-type(2) { animation-delay: .06s; } main .settings-main section:nth-of-type(3) { animation-delay: .12s; }
main .settings-main section:nth-of-type(4) { animation-delay: .18s; }
@keyframes v12-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv { opacity: 0; transform: translateY(26px); animation: none !important; }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .8, .2, 1); }

/* Balken wachsen von links */
.bar-fill, .hbar > div, .stackbar > div { transform-origin: left center; animation: v12-grow .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.up .bar-fill { animation: none; }
@keyframes v12-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Navigation, Symbole, Zeilen */
.mainnav a { position: relative; transition: background .2s, color .2s, transform .2s; }
.mainnav a:hover { transform: translateY(-1px); }
.mainnav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.mainnav a:hover::after, .mainnav a.active::after { transform: scaleX(1); }
.icon-btn { transition: background .15s, color .15s, transform .18s; }
.icon-btn:hover { transform: scale(1.12) rotate(-4deg); }
.icon-btn:active { transform: scale(.94); }
.row.item:hover .c-name > .icon { animation: v12-wiggle .5s ease-in-out; }
@keyframes v12-wiggle { 0%, 100% { transform: scale(1.12) rotate(0); } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(1.18) rotate(6deg); } }
.row.lifted { animation: none; }
.toast { animation: v12-toast .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes v12-toast { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
.btn.primary { background-size: 200% 100%; }
.btn.primary:hover { animation: v12-sheen 1.2s ease-in-out infinite alternate; }
@keyframes v12-sheen { from { background-position: 0 0; } to { background-position: 100% 0; } }
.badge, .role-badge { animation: v12-pop .4s cubic-bezier(.2, .9, .3, 1.3) backwards; }
@keyframes v12-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.empty-icon, .big-icon { animation: v12-float 4s ease-in-out infinite; }

/* Zusatz-Animationen abschalten */
:root[data-anim="off"] .logo svg, :root[data-anim="off"] .login-logo svg, :root[data-anim="off"] .empty-icon, :root[data-anim="off"] .big-icon,
:root[data-anim="off"] .card, :root[data-anim="off"] .panel, :root[data-anim="off"] .page-title, :root[data-anim="off"] .login-card,
:root[data-anim="off"] .bar-fill, :root[data-anim="off"] .hbar > div, :root[data-anim="off"] .stackbar > div, :root[data-anim="off"] .toast,
:root[data-anim="off"] .badge, :root[data-anim="off"] #fileTable .row.item { animation: none !important; }
:root[data-anim="off"] .rv { opacity: 1; transform: none; }
:root[data-anim="off"] .icon-btn:hover, :root[data-anim="off"] .mainnav a:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .fx-ring, .fx-ripple { display: none; } .rv { opacity: 1; transform: none; } }

/* ======================================================================
   v13 - Feinschliff: Typografie, Eingabefelder, Tabellen, Anmeldung/Registrierung, Passkeys
   ====================================================================== */
body.has-intro.intro-done > header, body.has-intro.intro-done > main { animation: v12-rise .4s cubic-bezier(.2, .8, .2, 1) backwards; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em; }
h1, h2, h3 { letter-spacing: -.015em; }
.page-title { font-size: 1.7rem; font-weight: 650; margin: 6px 0 18px; }
:root:not([data-theme="light"]) .page-title { background: linear-gradient(90deg, #f2f7ff, #9ccfff 70%, #6fe3f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel h2, .card h2 { font-weight: 650; }
::selection { background: rgba(61, 139, 255, .35); color: inherit; }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 150, 200, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120, 150, 200, .3); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 170, 255, .55); background-clip: content-box; border: 2px solid transparent; }

/* Karten & Bereiche */
:root { --radius: 18px; }
.card, .panel { border-color: rgba(130, 170, 230, .14); }
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .panel { background-color: rgba(18, 23, 33, .72); }
.panel { padding: 24px 26px; }
.panel h3 { margin: 24px 0 8px; font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }

/* Eingabefelder */
.field, .login-form input, dialog input[type=text], .share-row select, .field select, select.field {
  border-radius: 12px; padding: 11px 14px; transition: border-color .18s, box-shadow .18s, background .18s;
}
.field::placeholder, .login-form input::placeholder, dialog input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field:hover, .login-form input:hover { border-color: rgba(120, 170, 255, .4); }
select.field, .share-row select, .field.small[type=select], select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238d9bb3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
.btn { border-radius: 12px; padding: 10px 18px; font-weight: 500; }
.btn.small { padding: 6px 13px; border-radius: 10px; }
.btn:not(.primary):not(.danger) { background: color-mix(in srgb, var(--panel-2) 85%, transparent); }
.btn.danger { background: linear-gradient(135deg, #dc2f2f, #b91c1c); border-color: transparent; }
.btn.danger:hover { box-shadow: 0 0 0 1px rgba(239, 68, 68, .5), 0 6px 20px rgba(239, 68, 68, .28); }

/* Kopfzeile */
.topbar { padding: 12px 26px; }
.mainnav a { border-radius: 11px; padding: 9px 14px; font-weight: 500; }
.mainnav a.active { background: linear-gradient(135deg, rgba(31, 107, 255, .22), rgba(34, 211, 238, .12)); box-shadow: inset 0 0 0 1px rgba(80, 150, 255, .3); }
.username { border-radius: 99px; padding: 4px 12px 4px 4px; transition: background .18s; }
.username:hover { background: rgba(61, 139, 255, .12); }

/* Tabellen */
.tbl { border-collapse: separate; border-spacing: 0; width: 100%; }
.tbl th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; padding: 12px 16px; background: var(--head-bg); text-align: left; }
.tbl td { padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: rgba(61, 139, 255, .06); }
.tag, .role-badge, .badge { border-radius: 99px; }

/* Hinweis-Kästen */
.banner { border-radius: 14px; padding: 12px 16px; border: 1px solid var(--border); }
.banner.ok { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .35); color: var(--green-text); }
.banner.error { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .38); color: var(--red-text); }
.banner.ok::before { content: "✓  "; font-weight: 700; }
.banner.error::before { content: "!  "; font-weight: 700; }

/* Dialoge */
dialog { border-radius: 20px; padding: 26px; }
dialog h3 { font-size: 1.2rem; font-weight: 650; }
.dlg-actions { margin-top: 20px; }

/* Anmeldung / Registrierung */
.login-card { width: min(100%, 420px); padding: 34px 30px 26px; border-radius: 24px; }
.login-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), rgba(31, 107, 255, .0), rgba(61, 139, 255, .75), rgba(34, 211, 238, .8), rgba(31, 107, 255, 0) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: v13-spin 7s linear infinite;
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes v13-spin { to { --ang: 360deg; } }
:root[data-theme="light"] .login-card::before { opacity: .55; }
:root[data-anim="off"] .login-card::before { animation: none; }
.login-logo h1 { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }
.login-logo p { margin-top: 4px; }
.login-form label { font-weight: 500; letter-spacing: .01em; }
.login-form input { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.login-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(61, 139, 255, .22); }
.login-btn { padding: 13px; border-radius: 13px; font-weight: 600; letter-spacing: .01em; }
.field-hint { margin: -2px 2px 2px; font-size: .78rem; }
.field-hint code { background: transparent; padding: 0; color: var(--blue-text); }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--border); border-radius: 14px; }
.auth-switch a { text-align: center; padding: 9px 10px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: .93rem; transition: color .18s, background .18s, box-shadow .18s; }
.auth-switch a:hover { color: var(--text); }
.auth-switch a.on { color: #fff; background: linear-gradient(135deg, var(--blue-2), #0ea5c8); box-shadow: 0 4px 14px rgba(31, 107, 255, .35); }
.auth-foot { text-align: center; color: var(--muted); font-size: .88rem; margin: 18px 0 0; }
.auth-foot a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; }
.passkey-input { text-align: center; letter-spacing: .12em; font-size: 1.05rem !important; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; }

/* Passkey-Anzeige im Admin-Bereich */
.passkey-new { margin: 6px 0 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(34, 211, 238, .4);
  background: linear-gradient(135deg, rgba(31, 107, 255, .14), rgba(34, 211, 238, .08)); box-shadow: 0 0 30px rgba(34, 211, 238, .12); animation: v12-pop .5s cubic-bezier(.2, .9, .3, 1.2); }
.passkey-new small { color: var(--muted); }
.passkey-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.passkey-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 1.35rem; letter-spacing: .1em; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, .35); user-select: all; word-break: normal; }
:root[data-theme="light"] .passkey-code { background: rgba(37, 99, 235, .08); }
@media (max-width: 520px) { .passkey-code { font-size: 1.05rem; letter-spacing: .06em; } .login-card { padding: 28px 20px 22px; } }
.mainnav a { padding: 8px 12px; }
.topbar { padding: 10px 24px; gap: 14px; }
.thumb { width: 28px; height: 28px; border-radius: 7px; }
.row.item .c-name { gap: 12px; }

/* ===== v14: Speicher-Limits ===== */
.q-mini { height: 5px; width: 120px; margin: 5px 0 3px; }
.inline-label { color: var(--muted); font-size: .88rem; align-self: center; }
.storage.quota .storage-text { color: var(--text); }
#quotas .inline-form { margin: 10px 0 4px; }
#myQuota .meter-text { margin-top: 8px; }
.quota-form { flex-wrap: wrap; gap: 8px; }
.quota-form .field[name=amount] { width: 84px; flex: 0 0 84px; min-width: 0; }
.quota-form select.field { width: 86px; flex: 0 0 86px; min-width: 0; }
.quota-form .btn { white-space: nowrap; }
#dqAmount { width: 120px; flex: 0 0 120px; }

/* ======================================================================
   v15 - Apple-Stil: Schrift (SF auf Apple-Geräten, sonst die mitgelieferte, sehr ähnliche „Inter“)
   und Bewegungen mit Feder-Kurven wie bei iOS/macOS
   ====================================================================== */
@font-face {
  font-family: "BlubSans"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "BlubSans", "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --ease-apple: cubic-bezier(.32, .72, 0, 1);              /* die Standard-Kurve von iOS-Blättern und -Menüs */
  --spring: cubic-bezier(.34, 1.4, .64, 1);                /* Ersatz für ältere Browser */
  --spring-soft: cubic-bezier(.25, 1.1, .5, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .04, .139, .271, .417, .561, .693, .807, .9, .971, 1.023, 1.056, 1.076, 1.083, 1.082, 1.075, 1.065, 1.053, 1.041, 1.029, 1.019, 1.011, 1.004, .999, .996, .994, .993, .993, .993, .994, .995, .996, .997, .998, .999, .999, 1, 1, 1, 1.001, 1);
    --spring-soft: linear(0, .038, .13, .249, .376, .498, .61, .706, .787, .852, .903, .941, .969, .988, 1.001, 1.009, 1.013, 1.015, 1.015, 1.014, 1.012, 1.01, 1.008, 1.007, 1.005, 1.004, 1.003, 1.002, 1.001, 1.001, 1);
  }
}
:root[data-font="blub"] { --font-apple: "BlubSans", "Inter", "Segoe UI", system-ui, sans-serif; }
html, body { font-family: var(--font-apple); }
body {
  letter-spacing: -.011em; font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, .page-title, .login-title, .profile-name { letter-spacing: -.022em; }
.page-title { font-weight: 700; letter-spacing: -.028em; }
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }

/* Seite erscheint: Inhalte gleiten weich herein (leicht gestaffelt, mit kurzer Unschärfe) */
@keyframes ap-in { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
body:not(.has-intro) main > *, body.intro-done main > * { animation: ap-in .75s var(--ease-apple) backwards; }
main > :nth-child(2) { animation-delay: .04s; } main > :nth-child(3) { animation-delay: .08s; }
main > :nth-child(4) { animation-delay: .12s; } main > :nth-child(5) { animation-delay: .16s; }
main > :nth-child(6) { animation-delay: .2s; } main > :nth-child(n+7) { animation-delay: .24s; }
main > * .card.panel, main > * .page-title { animation: none; }
.settings-main section { animation: ap-in .75s var(--ease-apple) backwards; }

/* Knöpfe: federn beim Drücken zurück */
.btn, .icon-btn, .theme-seg button, .auth-switch a, .settings-nav a, .ctx button {
  transition: transform .55s var(--spring), background-color .2s, color .2s, box-shadow .25s, opacity .2s;
}
.btn:active, .icon-btn:active, .theme-seg button:active, .auth-switch a:active, .settings-nav a:active { transform: scale(.95); transition-duration: .12s; }
.icon-btn:hover { transform: scale(1.06); }
.btn.primary:hover { animation: none; }

/* Dialoge, Rechtsklick-Menü, Hinweise: aufploppen wie unter iOS */
@keyframes ap-dialog { from { opacity: 0; transform: scale(.9); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes ap-toast { from { opacity: 0; transform: translateY(28px) scale(.9); } to { opacity: 1; transform: none; } }
dialog[open] { animation: ap-dialog .55s var(--spring-soft); }
dialog[open]::backdrop { animation: ap-fade .35s var(--ease-apple); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
.ctx { animation: ap-pop .42s var(--spring-soft); }
.toast { animation: ap-toast .6s var(--spring); }
details.actions[open] .actions-pop { animation: ap-pop .4s var(--spring-soft); transform-origin: top right; }

/* Hauptmenü: der Leucht-Hintergrund gleitet von Punkt zu Punkt (wird per Skript gesetzt) */
.mainnav.has-ind { position: relative; }
.mainnav.has-ind a { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; }
.mainnav.has-ind a:hover { transform: none; }
.mainnav.has-ind a::after { display: none; }
.mainnav.has-ind a.on, .mainnav.has-ind a.ind-at { color: var(--text); }
.nav-ind {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 11px; pointer-events: none;
  background: linear-gradient(135deg, rgba(31, 107, 255, .24), rgba(34, 211, 238, .13));
  box-shadow: inset 0 0 0 1px rgba(80, 150, 255, .32), 0 4px 18px rgba(31, 107, 255, .14);
  transition: transform .6s var(--spring-soft), width .6s var(--spring-soft), height .6s var(--spring-soft), opacity .25s;
}
.nav-ind.no-anim { transition: none; }

/* Schalter in den Einstellungen im iOS-Stil */
.fx-check input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; cursor: pointer;
  width: 46px; height: 28px; border-radius: 99px; margin: 0;
  background: color-mix(in srgb, var(--muted) 35%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background-color .3s var(--ease-apple);
}
.fx-check input[type=checkbox]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .05);
  transition: transform .5s var(--spring), width .25s var(--ease-apple);
}
.fx-check input[type=checkbox]:checked { background: linear-gradient(135deg, #34c759, #30d158); }
.fx-check input[type=checkbox]:checked::before { transform: translateX(18px); }
.fx-check input[type=checkbox]:active::before { width: 30px; }
.fx-check input[type=checkbox]:checked:active::before { transform: translateX(12px); }
.fx-check input[type=checkbox]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Ohne Zusatz-Animationen / „Bewegung reduzieren“: alles ruhig */
:root[data-anim="off"] main > *, :root[data-anim="off"] .settings-main section, :root[data-anim="off"] dialog[open],
:root[data-anim="off"] dialog[open]::backdrop, :root[data-anim="off"] .ctx, :root[data-anim="off"] .actions-pop { animation: none !important; }
:root[data-anim="off"] .nav-ind { transition: none; }
@media (prefers-reduced-motion: reduce) {
  main > *, .settings-main section, dialog[open], dialog[open]::backdrop, .ctx, .toast, .actions-pop { animation: none !important; }
  .nav-ind, .fx-check input[type=checkbox]::before, .btn, .icon-btn { transition: none !important; }
}

/* ======================================================================
   v16 - Dashboard (Übersicht)
   ====================================================================== */
.dash-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 8px 0 22px; }
.dash-date { margin: 0 0 4px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.dash-title { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.032em; line-height: 1.1; }
.dash-name { background: linear-gradient(120deg, #60a5fa, var(--cyan, #22d3ee)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-sub { margin: 6px 0 0; color: var(--muted); }
.dash-quick { display: flex; gap: 10px; flex-wrap: wrap; }
.quick {
  display: grid; justify-items: center; gap: 6px; min-width: 92px; padding: 12px 10px; border-radius: 16px;
  border: 1px solid var(--border); color: var(--text); font-size: .82rem; font-weight: 500; text-align: center;
  transition: transform .55s var(--spring), border-color .2s, background-color .2s;
}
.quick:hover { transform: translateY(-3px) scale(1.03); border-color: rgba(96, 165, 250, .5); }
.quick:active { transform: scale(.95); transition-duration: .12s; }
.q-ic { font-size: 1.5rem; line-height: 1; }

.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.tile {
  display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); color: var(--text); min-width: 0;
  transition: transform .55s var(--spring), border-color .2s;
}
.tile:hover { transform: translateY(-3px); border-color: rgba(96, 165, 250, .45); }
.tile-label { color: var(--muted); font-size: .84rem; font-weight: 500; }
.tile-value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-sub { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-bar { height: 6px; margin: 4px 0 2px; }
.dash-stats > :nth-child(2) { animation-delay: .05s; } .dash-stats > :nth-child(3) { animation-delay: .1s; } .dash-stats > :nth-child(4) { animation-delay: .15s; }
.dash-stats > .tile { animation: ap-in .75s var(--ease-apple) backwards; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.dash-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-side { display: grid; gap: 16px; }
.dash .card.panel { margin: 0; }
.dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dash-head h2 { margin: 0; font-size: 1.05rem; }
.dash-more { color: var(--blue-text); font-size: .85rem; white-space: nowrap; }
.dash-empty { display: grid; justify-items: center; text-align: center; color: var(--muted); padding: 18px 8px; }
.dash-empty p { margin: 4px 0 0; max-width: 34ch; }

.recent-list, .mini-list, .act-list, .cat-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { display: flex; align-items: center; gap: 10px; border-radius: 12px; transition: background-color .2s; }
.recent-list li:hover { background: rgba(96, 165, 250, .08); }
.recent-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 9px 10px; color: var(--text); }
.recent-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; font-size: 1.3rem; background: rgba(96, 165, 250, .1); border: 1px solid rgba(96, 165, 250, .16); transition: transform .5s var(--spring); }
.recent-list li:hover .recent-ic { transform: scale(1.08) rotate(-3deg); }
.recent-txt { display: grid; min-width: 0; }
.recent-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-txt small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-where { flex: none; max-width: 34%; padding: 4px 10px; margin-right: 6px; border-radius: 99px; font-size: .76rem; color: var(--muted); border: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-where:hover { color: var(--text); border-color: rgba(96, 165, 250, .45); }
.recent-list li { animation: ap-in .6s var(--ease-apple) backwards; }
.recent-list li:nth-child(2) { animation-delay: .04s; } .recent-list li:nth-child(3) { animation-delay: .08s; } .recent-list li:nth-child(4) { animation-delay: .12s; }
.recent-list li:nth-child(5) { animation-delay: .16s; } .recent-list li:nth-child(n+6) { animation-delay: .2s; }

.mini-list li a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); }
.mini-list li a:hover { background: rgba(96, 165, 250, .08); }
.mini-list li a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-list small { color: var(--muted); font-size: .78rem; flex: none; }

.cat-list li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; }
.cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.cat-val { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.act-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.act-list li:last-child { border-bottom: 0; }
.act-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-list small { color: var(--muted); white-space: nowrap; }

.server-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mini-tile { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(96, 165, 250, .05); }
.mini-tile span { color: var(--muted); font-size: .76rem; }
.mini-tile b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.mini-tile.bad b { color: var(--red-text); }

@media (max-width: 900px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid, .dash-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .server-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dash-quick { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick { min-width: 0; padding: 10px 4px; font-size: .74rem; }
  .tile { padding: 14px; } .tile-value { font-size: 1.5rem; }
  .recent-where { display: none; }
  .server-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   v16 - Liquid Glass (Regler in den Einstellungen: 0 % = matt, 100 % = klares Glas)
   --glass wird von theme.js schon vor dem ersten Bild gesetzt (kein Flackern).
   ====================================================================== */
:root { --glass: .5; --glass-tint: 17, 24, 38; --glass-edge: 255, 255, 255; }
:root[data-theme="light"] { --glass-tint: 255, 255, 255; --glass-edge: 255, 255, 255; }
html:root[data-glass] .card, html:root[data-glass] .panel, html:root[data-glass] .tile, html:root[data-glass] .quick,
html:root[data-glass] .settings-nav, html:root[data-glass] .login-card, html:root[data-glass] dialog,
html:root[data-glass] .ctx, html:root[data-glass] .toast, html:root[data-glass] .up, html:root[data-glass] .actions-pop {
  background-color: rgba(var(--glass-tint), calc(.96 - var(--glass) * .66));
  background-image:
    linear-gradient(135deg, rgba(var(--glass-edge), calc(var(--glass) * .13)), rgba(var(--glass-edge), 0) 42%),
    radial-gradient(140% 70% at 0% 0%, rgba(var(--glass-edge), calc(var(--glass) * .05)), transparent 60%);
  -webkit-backdrop-filter: blur(calc(var(--glass) * 28px)) saturate(calc(100% + var(--glass) * 90%));
  backdrop-filter: blur(calc(var(--glass) * 28px)) saturate(calc(100% + var(--glass) * 90%));
  border-color: rgba(var(--glass-edge), calc(.06 + var(--glass) * .16));
  box-shadow:
    inset 1px 1px 0 rgba(var(--glass-edge), calc(.04 + var(--glass) * .22)),
    inset -1px -1px 0 rgba(var(--glass-edge), calc(var(--glass) * .07)),
    0 calc(8px + var(--glass) * 10px) calc(24px + var(--glass) * 26px) rgba(0, 0, 0, calc(.3 + var(--glass) * .12));
}
:root[data-theme="light"][data-glass] .card, :root[data-theme="light"][data-glass] .panel, :root[data-theme="light"][data-glass] .tile {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .8), 0 8px 26px rgba(15, 23, 42, calc(.06 + var(--glass) * .06));
  border-color: rgba(15, 23, 42, calc(.1 - var(--glass) * .04));
}
html:root[data-glass] .topbar {
  background-color: rgba(var(--glass-tint), calc(.92 - var(--glass) * .5));
  -webkit-backdrop-filter: blur(calc(6px + var(--glass) * 22px)) saturate(calc(100% + var(--glass) * 80%));
  backdrop-filter: blur(calc(6px + var(--glass) * 22px)) saturate(calc(100% + var(--glass) * 80%));
}
/* Farbige Lichter hinter dem Glas - je mehr Glas, desto sichtbarer */
html:root[data-glass] body::before {
  content: ""; position: fixed; inset: -15%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(28% 32% at 18% 26%, rgba(37, 99, 235, .55), transparent 70%),
    radial-gradient(26% 30% at 82% 22%, rgba(34, 211, 238, .38), transparent 70%),
    radial-gradient(30% 34% at 70% 82%, rgba(139, 92, 246, .38), transparent 70%),
    radial-gradient(24% 26% at 22% 84%, rgba(14, 165, 233, .32), transparent 70%);
  filter: blur(30px); opacity: calc(var(--glass) * .9);
  animation: glass-drift 38s ease-in-out infinite alternate;
}
:root[data-theme="light"][data-glass] body::before { opacity: calc(var(--glass) * .5); }
@keyframes glass-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-6deg) scale(1); }
}
:root[data-anim="off"] body::before { animation: none; }
@media (prefers-reduced-motion: reduce) { html:root[data-glass] body::before { animation: none; } }

/* ======================================================================
   v16 - Neues Intro: Aurora-Lichter, Glas-Kugel mit Logo, Buchstaben aus der Unschärfe,
   persönliche Begrüßung, Ladelinie und ein Zoom-Übergang zur Seite (insgesamt ca. 3 Sekunden)
   ====================================================================== */
.intro {
  background: radial-gradient(120% 90% at 50% 40%, #07122a 0%, #03050a 62%, #000 100%);
  animation: ap-intro-out .75s cubic-bezier(.55, 0, .75, .2) 2.65s forwards; overflow: hidden; gap: 0;
}
.intro.skip { animation: ap-intro-out .35s cubic-bezier(.55, 0, .75, .2) forwards; }
@keyframes ap-intro-out { to { opacity: 0; transform: scale(1.08); filter: blur(14px); visibility: hidden; pointer-events: none; } }
.intro-glow { display: none; }
.intro-aurora { position: absolute; inset: -20%; filter: blur(60px); opacity: 0; animation: ap-fade 1.4s ease-out .05s forwards; }
.au { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.au1 { width: 46vmax; height: 46vmax; left: 12%; top: 18%; background: radial-gradient(circle, rgba(37, 99, 235, .75), transparent 65%); animation: au-a 7s ease-in-out infinite alternate; }
.au2 { width: 40vmax; height: 40vmax; right: 8%; top: 8%; background: radial-gradient(circle, rgba(34, 211, 238, .55), transparent 65%); animation: au-b 8s ease-in-out infinite alternate; }
.au3 { width: 44vmax; height: 44vmax; left: 34%; bottom: 0; background: radial-gradient(circle, rgba(139, 92, 246, .5), transparent 65%); animation: au-c 9s ease-in-out infinite alternate; }
@keyframes au-a { to { transform: translate(14%, 10%) scale(1.15); } }
@keyframes au-b { to { transform: translate(-16%, 14%) scale(.9); } }
@keyframes au-c { to { transform: translate(-10%, -14%) scale(1.12); } }
.intro-sparks span {
  position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
  background: #bfe9ff; box-shadow: 0 0 8px rgba(125, 211, 252, .9); opacity: 0;
  animation: ap-spark var(--t) ease-out var(--d) infinite;
}
@keyframes ap-spark { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70vh); } }
.intro-stage { position: relative; display: grid; justify-items: center; gap: 14px; }
.intro-orb {
  position: relative; display: grid; place-items: center; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .02));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .35), inset -1px -1px 0 rgba(255, 255, 255, .08),
              0 30px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(59, 130, 246, .28);
  animation: ap-orb 1.1s var(--spring) .1s backwards;
}
@keyframes ap-orb { from { opacity: 0; transform: scale(.55); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.intro-ring {
  position: absolute; inset: -10px; border-radius: 50%; padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(103, 232, 249, .9) 75%, rgba(99, 102, 241, .9) 90%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ap-spin 2.2s linear infinite, ap-fade .6s ease-out .5s backwards;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }
.intro-logo { filter: drop-shadow(0 0 18px rgba(103, 232, 249, .55)); animation: ap-logo 1s var(--spring) .3s backwards; }
@keyframes ap-logo { from { opacity: 0; transform: scale(.7) translateY(8px); } to { opacity: 1; transform: none; } }
.intro-outline { animation: v8-draw 1.2s ease-out .35s forwards; }
.intro-water { animation: v8-fill 1.4s var(--ease-apple) .8s forwards; }
.intro-sheen { animation: v8-sheen 1s ease-in-out 1.8s both; }
.intro-word { display: flex; gap: 0; margin-top: 8px; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 600; letter-spacing: -.035em; color: #f1f6ff; animation: none; text-shadow: none; }
.intro-word b { display: flex; font-weight: 700; color: transparent; text-shadow: none; }
.intro-word span { display: inline-block; animation: ap-letter .8s var(--ease-apple) calc(.9s + var(--i) * .055s) backwards; }
.intro-word b span { background: linear-gradient(120deg, #67e8f9, #60a5fa 60%, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes ap-letter { from { opacity: 0; transform: translateY(18px) scale(.9); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
.intro-hello { color: rgba(226, 236, 255, .78); font-size: 1.05rem; letter-spacing: -.01em; animation: ap-in .8s var(--ease-apple) 1.45s backwards; }
.intro-hello b { color: #fff; font-weight: 600; }
.intro-line { width: 160px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 8px; animation: ap-fade .4s ease-out 1.5s backwards; }
.intro-line span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #3b82f6, #818cf8); transform-origin: left; transform: scaleX(0); animation: ap-load 1.1s var(--ease-apple) 1.55s forwards; }
@keyframes ap-load { to { transform: scaleX(1); } }
.intro-hint { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: rgba(226, 236, 255, .38); font-size: .78rem; animation: ap-fade 1s ease-out 1.2s backwards; }
body.has-intro > header, body.has-intro > main { animation: ap-reveal .9s var(--ease-apple) 2.85s backwards; }
@keyframes ap-reveal { from { opacity: 0; transform: scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
body.has-intro.intro-done > header, body.has-intro.intro-done > main { animation: ap-reveal .55s var(--ease-apple) backwards; }
:root[data-intro="off"] body.has-intro > header, :root[data-intro="off"] body.has-intro > main { animation: none; }
/* Kopfleiste: mit dem neuen Menüpunkt „Übersicht“ alles in eine Zeile */
@media (min-width: 721px) {
  .mainnav { flex-wrap: nowrap; gap: 2px; }
  .mainnav a { padding: 8px 10px; font-size: .92rem; }
  .topbar { gap: 14px; }
  .storage { min-width: 140px; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .storage { display: none; }
}

/* ======================================================================
   v17 - „Die Zukunft von heute“: Seitenleiste + schlanke Kopfleiste (inverted L), breiter Inhalt,
   Befehlspalette (Strg+K), farbige Dateityp-Symbole, Handy-Leiste unten, viele Kleinigkeiten.
   Glas nur auf der Bedien-Ebene (Seitenleiste, Kopfleiste, Menüs, Palette) – Inhalte bleiben gut lesbar.
   ====================================================================== */
:root { --side-w: 256px; --top-h: 60px; --accent: #38bdf8; --accent-2: #6366f1; --ring: #38bdf8; }
:root[data-theme="light"] { --accent: #0284c7; --ring: #0284c7; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.i { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; }
.icon-btn .i { width: 18px; height: 18px; }
kbd { display: inline-block; min-width: 1.5em; padding: 1px 6px; border-radius: 6px; font: 600 .72rem/1.5 var(--font-apple); text-align: center;
      color: var(--muted); background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .22); border-bottom-width: 2px; }

/* ---------- Grundgerüst ---------- */
main.container { max-width: 1480px; width: 100%; box-sizing: border-box; padding: 26px clamp(16px, 2.6vw, 40px) 90px; }
main.container.settings-wrap { max-width: 1240px; }
@media (min-width: 1000px) { body:has(> .side) { padding-left: var(--side-w); } }
@media (min-width: 721px) and (max-width: 999px) { :root { --side-w: 78px; } body:has(> .side) { padding-left: var(--side-w); } }

/* ---------- Seitenleiste ---------- */
.side {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 30; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 14px;
  border-right: 1px solid rgba(148, 163, 184, .12);
  background: rgba(var(--glass-tint), calc(.94 - var(--glass) * .5));
  -webkit-backdrop-filter: blur(calc(10px + var(--glass) * 24px)) saturate(calc(120% + var(--glass) * 70%));
  backdrop-filter: blur(calc(10px + var(--glass) * 24px)) saturate(calc(120% + var(--glass) * 70%));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, calc(var(--glass) * .06));
}
.side-logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; font-size: 1.16rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.side-logo b { color: var(--accent); font-weight: 700; }
.side-new {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 2px 10px; padding: 11px 14px; border-radius: 13px;
  color: #fff; font-weight: 600; font-size: .94rem; background: linear-gradient(135deg, #3b82f6, #06b6d4);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .55s var(--spring), box-shadow .25s, filter .2s;
}
.side-new:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 28px rgba(37, 99, 235, .42), inset 0 1px 0 rgba(255, 255, 255, .3); }
.side-new:active { transform: scale(.96); transition-duration: .12s; }
.side .mainnav { display: grid; gap: 2px; flex: none; flex-wrap: nowrap; order: 0; width: auto; overflow: visible; }
.side .mainnav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: .93rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.side .mainnav a:hover, .side .mainnav a.ind-at { color: var(--text); }
.side .mainnav a.on { color: var(--text); }
.side .mainnav a.on .i { color: var(--accent); }
.side .mainnav a .i { width: 19px; height: 19px; }
.side .nav-ind { border-radius: 10px; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 8px -4px 0; padding: 0 4px; scrollbar-width: thin; }
.side-sec { margin-top: 14px; }
.side-h { padding: 0 12px 6px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 9px; font-size: .87rem; color: var(--muted); min-width: 0; transition: background-color .15s, color .15s; }
.side-link:hover { background: rgba(148, 163, 184, .1); color: var(--text); }
.side-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.side-tag { font-size: .62rem; font-weight: 600; padding: 1px 5px; border-radius: 5px; color: #fcd34d; background: rgba(251, 191, 36, .12); }
.muted-link { opacity: .75; }
.dot.folder { width: 15px; height: 12px; flex: none; border-radius: 3px 3px 3px 3px; background: linear-gradient(135deg, #60a5fa, #6366f1); position: relative; }
.dot.folder::before { content: ""; position: absolute; left: 0; top: -2px; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: #60a5fa; }
.avatar.xs { width: 18px; height: 18px; font-size: .62rem; flex: none; }
.side .side-meter.storage { display: grid !important; gap: 7px; min-width: 0; margin-top: 8px; padding: 12px 13px; border-radius: 13px; border: 1px solid rgba(148, 163, 184, .14); background: rgba(148, 163, 184, .06); color: var(--text); transition: border-color .2s, background-color .2s; }
.side .side-meter:hover { border-color: rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .07); }
.side-meter-top { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.side-meter-top .i { width: 16px; height: 16px; color: var(--accent); }
.side-meter .storage-text { font-weight: 600; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.side-meter .bar { display: block; height: 6px; }
.side-meter .bar-fill { display: block; }
.side-meter small { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Schmale Bildschirme (Tablet): nur Symbole */
@media (min-width: 721px) and (max-width: 999px) {
  .side { padding: 14px 10px; align-items: stretch; }
  .side-logo span, .side-new span, .side .mainnav a span, .side-scroll, .side-meter small, .side-meter .storage-text { display: none; }
  .side-logo { justify-content: center; padding: 4px 0 12px; }
  .side-new { padding: 11px 0; margin: 0 0 10px; }
  .side .mainnav a { justify-content: center; padding: 11px 0; }
  .side .side-meter.storage { margin-top: auto; padding: 10px 8px; }
  .side-meter-top { justify-content: center; }
}

/* ---------- Kopfleiste ---------- */
body .topbar {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; flex-wrap: nowrap; gap: 14px;
  height: var(--top-h); box-sizing: border-box; padding: 0 clamp(16px, 2.6vw, 40px);
  border-bottom: 1px solid rgba(148, 163, 184, .1); box-shadow: none;
  background: rgba(var(--glass-tint), calc(.86 - var(--glass) * .5));
  -webkit-backdrop-filter: blur(calc(10px + var(--glass) * 22px)) saturate(160%); backdrop-filter: blur(calc(10px + var(--glass) * 22px)) saturate(160%);
}
.top-logo { display: none; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.top-logo b { color: var(--accent); }
.cmdk {
  flex: 1; max-width: 580px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 13px; border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .18); background: rgba(148, 163, 184, .07); color: var(--muted);
  font: inherit; font-size: .9rem; text-align: left; cursor: text; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.cmdk:hover { border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .06); }
.cmdk:focus-visible { box-shadow: 0 0 0 3px rgba(56, 189, 248, .25); }
.cmdk-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .16); background: rgba(148, 163, 184, .06); transition: border-color .2s, background-color .2s; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { border-color: rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .07); }
.usermenu .username { font-size: .9rem; font-weight: 500; color: var(--text); display: inline; }
.um-chev { width: 15px; height: 15px; color: var(--muted); transition: transform .35s var(--spring); }
.usermenu[open] .um-chev { transform: rotate(180deg); }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 10px); width: 270px; padding: 6px; border-radius: 16px; z-index: 40; display: grid; gap: 2px;
  border: 1px solid rgba(148, 163, 184, .2); background: rgba(var(--glass-tint), calc(.96 - var(--glass) * .35));
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform-origin: top right; animation: ap-pop .4s var(--spring-soft);
}
.um-head { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(148, 163, 184, .14); }
.um-head div { display: grid; }
.um-head small { color: var(--muted); font-size: .78rem; }
.usermenu-pop > a, .usermenu-pop > button, .usermenu-pop .um-logout {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.usermenu-pop > a:hover, .usermenu-pop > button:hover, .usermenu-pop .um-logout:hover { background: rgba(56, 189, 248, .1); }
.usermenu-pop kbd { margin-left: auto; }
.usermenu-pop .userbox { display: block; margin: 4px 0 0; padding-top: 4px; border-top: 1px solid rgba(148, 163, 184, .14); }
.usermenu-pop .um-logout { color: var(--red-text); }
.usermenu-pop .i { color: var(--muted); }
.usermenu-pop .um-logout .i { color: inherit; }

/* ---------- Handy: Leiste unten ---------- */
.tabbar { display: none; }
@media (max-width: 720px) {
  .side { display: none; }
  body:has(> .tabbar) { padding-bottom: 86px; }
  .top-logo { display: flex; }
  .cmdk { height: 38px; padding: 0 10px; }
  .cmdk-txt { font-size: .86rem; }
  .cmdk-kbd, .usermenu .username, .um-chev { display: none; }
  .usermenu > summary { padding: 3px; }
  body .topbar { gap: 10px; padding: 0 12px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; z-index: 35;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; padding: 0 6px; border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .2); background: rgba(var(--glass-tint), calc(.9 - var(--glass) * .45));
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .tabbar > a, .tab-more > summary { display: grid; justify-items: center; gap: 3px; padding: 6px 0; font-size: .66rem; font-weight: 500; color: var(--muted); list-style: none; cursor: pointer; }
  .tab-more > summary::-webkit-details-marker { display: none; }
  .tabbar .i { width: 22px; height: 22px; }
  .tabbar > a.on, .tab-more > summary.on { color: var(--accent); }
  .tab-plus { justify-self: center; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 17px; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #3b82f6, #06b6d4); box-shadow: 0 8px 20px rgba(37, 99, 235, .4); transition: transform .5s var(--spring); }
  .tab-plus:active { transform: scale(.92); }
  .tab-sheet { position: fixed; right: 14px; bottom: 86px; display: grid; gap: 2px; min-width: 210px; padding: 8px; border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .2); background: rgba(var(--glass-tint), .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5); transform-origin: bottom right; animation: ap-pop .4s var(--spring-soft); }
  .tab-sheet a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--text); font-size: .95rem; }
  .tab-sheet a:hover { background: rgba(56, 189, 248, .1); }
  .toasts { bottom: 92px; }
}

/* ---------- Befehlspalette ---------- */
dialog.palette {
  width: min(640px, calc(100vw - 24px)); max-height: min(560px, 76vh); margin: 11vh auto auto; padding: 0; overflow: hidden; display: none;
  border: 1px solid rgba(148, 163, 184, .22); border-radius: 18px; color: var(--text);
  background: rgba(var(--glass-tint), calc(.95 - var(--glass) * .3)); background-image: none;
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
}
dialog.palette[open] { display: flex; flex-direction: column; }
dialog.palette::backdrop { background: rgba(2, 6, 14, .45); }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid rgba(148, 163, 184, .14); }
.pal-in .i { width: 20px; height: 20px; color: var(--accent); }
.pal-input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text); font: inherit; font-size: 1.05rem; padding: 0 !important; margin: 0 !important; }
.pal-list { overflow-y: auto; padding: 6px 8px 10px; flex: 1; min-height: 0; }
.pal-g { padding: 10px 10px 4px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pal-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--text); font: inherit; font-size: .93rem; text-align: left; cursor: pointer; }
.pal-item .i { color: var(--muted); width: 19px; height: 19px; }
.pal-item .ft { width: 20px !important; height: 24px !important; }
.pal-item .ft::after { display: none; }
.pal-item small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item kbd { margin-left: auto; }
.pal-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item.on { background: linear-gradient(135deg, rgba(59, 130, 246, .24), rgba(6, 182, 212, .14)); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .3); }
.pal-item.on .i { color: var(--accent); }
.pal-empty { padding: 26px; text-align: center; color: var(--muted); }
.pal-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid rgba(148, 163, 184, .12); color: var(--muted); font-size: .76rem; }
.pal-foot kbd { margin-right: 3px; }
@media (max-width: 720px) { .pal-foot { display: none; } dialog.palette { margin-top: 8vh; } }

/* ---------- Farbige Dateityp-Symbole ---------- */
.ft {
  --c: #64748b; position: relative; display: inline-grid; place-items: end center; width: 28px; height: 34px; flex: none;
  font-size: 0 !important; line-height: 0; color: transparent; padding: 0 !important;
}
.ft::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(225deg, rgba(255, 255, 255, .55) 0 7px, rgba(255, 255, 255, 0) 7.5px), linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 34'%3E%3Cpath d='M4 0h14.5L28 9.5V30a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 34'%3E%3Cpath d='M4 0h14.5L28 9.5V30a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--c) 35%, transparent));
}
.ft::after { content: attr(data-ext); position: relative; margin-bottom: 6px; font: 700 7.5px/1 var(--font-apple); letter-spacing: .02em; color: #fff; }
.ft[data-k="image"] { --c: #a855f7; } .ft[data-k="video"] { --c: #ec4899; } .ft[data-k="audio"] { --c: #f59e0b; }
.ft[data-k="doc"] { --c: #3b82f6; } .ft[data-k="sheet"] { --c: #16a34a; } .ft[data-k="archive"] { --c: #ca8a04; }
.ft[data-k="code"] { --c: #0d9488; } .ft[data-k="other"] { --c: #64748b; }
.ft[data-ext="PDF"] { --c: #ef4444; } .ft[data-ext="PPT"], .ft[data-ext="PPTX"] { --c: #f97316; } .ft[data-ext="TXT"], .ft[data-ext="MD"] { --c: #64748b; }
.ft[data-k="folder"] { width: 32px; height: 27px; place-items: center; }
.ft[data-k="folder"]::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%), linear-gradient(135deg, #60a5fa, #4f46e5);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 27'%3E%3Cpath d='M0 4a4 4 0 0 1 4-4h7.2a3 3 0 0 1 2.2 1l2.4 2.6H28a4 4 0 0 1 4 4V23a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 27'%3E%3Cpath d='M0 4a4 4 0 0 1 4-4h7.2a3 3 0 0 1 2.2 1l2.4 2.6H28a4 4 0 0 1 4 4V23a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 5px rgba(79, 70, 229, .35));
}
.ft[data-k="folder"]::after { content: none; }
.row.item:hover .c-name > .ft { animation: none; transform: translateY(-1px) scale(1.06); }
.c-name > .ft { transition: transform .45s var(--spring); }
:root[data-view="grid"] .row.item .ft { width: 54px; height: 66px; margin: 16px auto 8px; font-size: 0 !important; padding: 0 !important; }
:root[data-view="grid"] .row.item .ft::after { font-size: 12px; margin-bottom: 11px; }
:root[data-view="grid"] .row.item .ft[data-k="folder"] { width: 66px; height: 56px; }
.recent-ic .ft { width: 22px; height: 27px; }
.recent-ic .ft::after { font-size: 6px; margin-bottom: 5px; }
.recent-ic .ft[data-k="folder"] { width: 26px; height: 22px; }
.ml-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ml-name .ft[data-k="folder"] { width: 20px; height: 17px; }
.ml-owner { display: inline-flex; align-items: center; gap: 6px; }
.viewer-head .ft { width: 30px; height: 37px; }

/* ---------- Dateiliste ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 1.02rem; }
.crumbs a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; font-weight: 500; }
.crumbs a:hover { background: rgba(148, 163, 184, .1); }
.crumbs a:last-child { color: var(--text); font-weight: 600; }
.crumb-sep { display: inline-grid; color: var(--muted); opacity: .6; }
.crumb-sep .i { width: 14px; height: 14px; }
.toolbar .btn .i { width: 17px; height: 17px; }
.search-ic { display: inline-grid; place-items: center; color: var(--muted); }
.search-ic .i { width: 17px; height: 17px; }
label.scope.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; font-size: .84rem; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .22); color: var(--muted); user-select: none; transition: all .2s; }
label.scope.chip input { position: absolute; opacity: 0; pointer-events: none; }
label.scope.chip:has(input:checked) { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3b82f6, #06b6d4); }
label.scope.chip:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.tip { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, .14); background: rgba(56, 189, 248, .05); font-size: .82rem; }
.tip[hidden] { display: none; }
.tip > span { flex: 1; }
.tip kbd { font-size: .68rem; }
.tip-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.tip-x:hover { background: rgba(148, 163, 184, .14); color: var(--text); }
.tip-x .i { width: 15px; height: 15px; }
#fileTable .row.item .c-date, #fileTable .row.item .c-size { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .88rem; }
@media (hover: hover) {
  #fileTable .row.item .c-act .icon-btn, #resultsList .row .c-act .icon-btn { opacity: .0; transition: opacity .15s, background-color .15s, transform .5s var(--spring); }
  #fileTable .row.item:hover .c-act .icon-btn, #fileTable .row.item:focus-within .c-act .icon-btn, #fileTable .row.item.ctx-target .c-act .icon-btn,
  #resultsList .row:hover .c-act .icon-btn, #resultsList .row:focus-within .c-act .icon-btn { opacity: 1; }
}
#fileTable .row.item .c-act .icon-btn { width: 34px; height: 34px; border-radius: 9px; }
.btn.pulse { animation: btn-pulse 1.4s ease-out 3; }
@keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .7); } 100% { box-shadow: 0 0 0 16px rgba(56, 189, 248, 0); } }
:root[data-view="grid"] #fileTable { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
:root[data-view="grid"] #fileTable .row.item .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-view="grid"] #fileTable .row.item .c-date { display: none; }

/* Leerer Ordner = Ablagefeld */
.empty.dropzone { margin: 6px; padding: clamp(32px, 6vw, 64px) 20px; border: 2px dashed rgba(56, 189, 248, .3); border-radius: 18px; text-align: center;
  background: radial-gradient(60% 80% at 50% 0%, rgba(56, 189, 248, .07), transparent 70%); }
.empty.dropzone h2 { margin: 10px 0 4px; font-size: 1.25rem; }
.empty.dropzone p { margin: 0 auto; color: var(--muted); max-width: 44ch; }
.empty-art svg { animation: v12-float 4s ease-in-out infinite; filter: drop-shadow(0 8px 24px rgba(56, 189, 248, .25)); }
.empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
body.drop-active .empty.dropzone { border-color: var(--accent); background: rgba(56, 189, 248, .12); }

/* ---------- Übersicht ---------- */
.quick { border: 1px solid rgba(148, 163, 184, .16); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 500; min-width: 98px; }
.quick .i { width: 24px; height: 24px; padding: 9px; border-radius: 12px; box-sizing: content-box; color: #fff; }
.quick.q-blue .i { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 6px 16px rgba(37, 99, 235, .35); }
.quick.q-cyan .i { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 6px 16px rgba(8, 145, 178, .35); }
.quick.q-violet .i { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 6px 16px rgba(99, 102, 241, .35); }
.quick.q-amber .i { background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 6px 16px rgba(234, 88, 12, .3); }
.recent-ic { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .14); }
.dash-empty.onboarding { padding: 6px 0 4px; }
.ob-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; text-align: left; }
.ob-step { display: grid; gap: 4px; padding: 16px; border-radius: 14px; border: 1px dashed rgba(56, 189, 248, .3); color: var(--text); transition: transform .5s var(--spring), border-color .2s, background-color .2s; }
.ob-step:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(56, 189, 248, .06); }
.ob-step small { color: var(--muted); }
.ob-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3b82f6, #06b6d4); margin-bottom: 4px; }
@media (max-width: 720px) { .ob-steps { grid-template-columns: 1fr; } }
.tile-sub { white-space: normal; }

/* ---------- Speicher: zweispaltig ---------- */
main.storage-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
main.storage-page > * { grid-column: 1 / -1; min-width: 0; }
main.storage-page > section.card.panel { margin: 0; }
main.storage-page > section.half { grid-column: auto; }
@media (max-width: 1100px) { main.storage-page > section.half { grid-column: 1 / -1; } }

/* ---------- Viewer ---------- */
.viewer-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.viewer-head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.viewer-meta { display: grid; min-width: 0; }
.viewer-meta .viewer-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-meta small { color: var(--muted); font-size: .82rem; }
.viewer-nav { display: flex; gap: 6px; }
.viewer-nav .icon-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(148, 163, 184, .2); }
.viewer-nav .icon-btn.disabled { opacity: .3; pointer-events: none; }

/* ---------- Glas: Inhalt ruhig, Bedien-Ebene glasig ---------- */
html:root[data-glass] .card, html:root[data-glass] .panel, html:root[data-glass] .tile, html:root[data-glass] .quick, html:root[data-glass] .up {
  background-color: rgba(var(--glass-tint), calc(.97 - var(--glass) * .4));
  -webkit-backdrop-filter: blur(calc(var(--glass) * 16px)) saturate(calc(100% + var(--glass) * 50%));
  backdrop-filter: blur(calc(var(--glass) * 16px)) saturate(calc(100% + var(--glass) * 50%));
}

/* ---------- Einstellungen: nichts ragt am Handy heraus ---------- */
.fx-check.fx-vol { flex-wrap: wrap; }
.fx-check.fx-vol input[type=range] { flex: 1 1 140px; min-width: 0; }
.settings-nav { position: sticky; top: calc(var(--top-h) + 16px); }
@media (max-width: 720px) { .settings-nav { position: static; } }

/* Dialog „Neuer Ordner“ usw.: Eingabefeld sichtbar */
dialog input[type=text]::placeholder { color: var(--muted); opacity: .7; }
.cmdk { min-width: 0; }
.top-logo { flex: none; }
@media (max-width: 420px) { .top-logo span { display: none; } }
.dash-head h2, .tile-label { display: inline-flex; align-items: center; gap: 8px; }
.dash-head h2 .i { width: 19px; height: 19px; color: var(--accent); }
.tile-label .i { width: 15px; height: 15px; color: var(--accent); }
.page-title { display: inline-flex; align-items: center; gap: 12px; }
.page-title .i { width: 30px; height: 30px; color: var(--accent); stroke: var(--accent); flex: none; }
@media (hover: none) { .tip-keys { display: none; } }

/* ---------- v17b: Korrekturen aus der unabhängigen Prüfung ---------- */
.dash-side { grid-template-columns: minmax(0, 1fr); }
.ml-name { flex: 1; min-width: 0; }
.ml-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-list li a { min-width: 0; }
.usermenu-pop { background: rgba(var(--glass-tint), .97); }
:root[data-theme="light"] .usermenu-pop { background: rgba(255, 255, 255, .98); }
.tab-sheet { background: rgba(var(--glass-tint), .98) !important; }
.row.head .c-act { display: none; }
@media (max-width: 720px) { .row.head { grid-template-columns: 1fr; } }
.badge { display: inline-flex; align-items: center; gap: 4px; }
.badge .i { width: 12px; height: 12px; }
.ctx-ic { display: inline-grid; place-items: center; }
.ctx-ic .i { width: 17px; height: 17px; color: var(--muted); }
.ctx button:hover .ctx-ic .i, .ctx button:focus-visible .ctx-ic .i { color: var(--accent); }
.ctx button.danger .ctx-ic .i { color: currentColor; }
.tip-txt .i { width: 15px; height: 15px; color: var(--accent); }
.bic .ft { width: 18px; height: 22px; }
.bic .ft::after { display: none; }
.bic .ft[data-k="folder"] { width: 20px; height: 17px; }
.cat-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.cat-name .ft { width: 16px; height: 20px; }
.cat-name .ft::after { display: none; }
.cat-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-art { display: grid; place-items: center; margin-bottom: 6px; }
.ob-steps { align-items: start; }
.ob-step { align-content: start; height: 100%; box-sizing: border-box; }
.toolbar { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 720px) {
  .viewer-meta small .vm-date { display: none; }
  .viewer-bar { gap: 10px; }
  .viewer-head { flex-basis: calc(100% - 120px); }
  .viewer-bar > .btn.primary span { display: none; }
  .tip { display: none !important; }
  .ctx { max-height: 60vh; overflow-y: auto; }
}
main.container:not(.storage-page):not(.dash) > section.card + section.card { margin-top: 16px; }
@media (max-width: 520px) {
  .dash-quick { gap: 8px; }
  .quick { padding: 10px 2px; min-width: 0; }
  .quick span { font-size: .68rem; line-height: 1.2; overflow-wrap: anywhere; }
  .quick .i { width: 20px; height: 20px; padding: 7px; }
}

/* ======================================================================
   v18 - Teilen-Links, Sicherheits-Hinweis, letzte Symbole
   ====================================================================== */
.sec-hint { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; color: var(--text);
  border: 1px solid rgba(245, 158, 11, .35); background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(234, 88, 12, .06)); font-size: .9rem;
  transition: border-color .2s, transform .5s var(--spring); }
.sec-hint:hover { border-color: rgba(245, 158, 11, .7); transform: translateY(-1px); }
.sec-hint > .i { width: 22px; height: 22px; color: #f59e0b; }
.sec-hint > span:nth-child(2) { flex: 1; }
.sec-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #f59e0b; white-space: nowrap; }
.sec-go .i { width: 15px; height: 15px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; }
.settings-nav a .i { width: 17px; height: 17px; color: var(--muted); }
.settings-nav a:hover .i { color: var(--accent); }
.tabs a, .admin-tabs a { display: inline-flex; align-items: center; gap: 8px; }
.tabs a .i, .admin-tabs a .i { width: 17px; height: 17px; }
.card h2 .i, .tile h3 .i, .card h3 .i { width: 19px; height: 19px; color: var(--accent); vertical-align: -3px; margin-right: 4px; }
.empty-icon .i { width: 48px; height: 48px; color: var(--accent); stroke-width: 1.4; }
/* Link-Liste (Einstellungen) */
.link-table { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.link-table li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(148, 163, 184, .04); }
.link-table li.expired { opacity: .55; }
.lt-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.lt-main small { color: var(--muted); font-size: .78rem; }
.lt-url { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--muted); }
.lt-btns { display: flex; gap: 6px; flex: none; }
@media (max-width: 720px) { .link-table li { flex-direction: column; align-items: stretch; } }
/* Dialog „Teilen-Link“ */
.link-dlg .link-new { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; margin: 10px 0 6px; }
.link-dlg .link-new label { display: grid; gap: 5px; font-size: .84rem; color: var(--muted); }
.link-dlg .link-new .field { margin: 0; }
.link-dlg .link-check { display: flex !important; align-items: center; gap: 8px; color: var(--text) !important; }
.link-dlg [data-create] { justify-self: end; }
.link-dlg h4 { margin: 18px 0 8px; }
.link-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.link-row { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--border); }
.link-row.expired { opacity: .55; }
.link-left { display: grid; gap: 4px; flex: 1; min-width: 0; }
.link-left small { color: var(--muted); font-size: .74rem; }
.link-url { margin: 0 !important; font-size: .8rem !important; padding: 7px 9px !important; }
.link-btns { display: flex; gap: 6px; flex: none; }
@media (max-width: 560px) { .link-dlg .link-new { grid-template-columns: 1fr; } .link-row { flex-direction: column; align-items: stretch; } }
/* Öffentliche Link-Seite */
.share-page { min-height: 100vh; }
.share-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(148, 163, 184, .12); background: rgba(var(--glass-tint), .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.share-top .logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.1rem; }
.share-top .logo b { color: var(--accent); }
.share-by { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .88rem; }
.share-by .i { width: 16px; height: 16px; }
.share-main { max-width: 1100px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(14px, 3vw, 32px) 40px; position: relative; z-index: 1; }
.share-card { padding: 22px; }
.share-card.center { text-align: center; max-width: 460px; margin: 6vh auto 0; display: grid; justify-items: center; gap: 6px; }
.share-card h1 { margin: 6px 0 2px; font-size: 1.4rem; letter-spacing: -.02em; }
.share-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, rgba(59, 130, 246, .2), rgba(6, 182, 212, .14)); color: var(--accent); }
.share-art .i { width: 30px; height: 30px; }
.share-pw { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.share-pw .field { flex: 1; margin: 0; }
.share-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.share-head > .ft { width: 34px; height: 41px; }
.share-head > .ft[data-k="folder"] { width: 40px; height: 34px; }
.share-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.share-title h1 { margin: 0; font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.share-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.share-item { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 11px 6px; color: var(--text); }
.share-item:hover { background: rgba(56, 189, 248, .06); }
.share-name { display: grid; min-width: 0; }
.share-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-name small { color: var(--muted); font-size: .8rem; }
.share-view { border-radius: 14px; overflow: hidden; display: grid; place-items: center; min-height: 200px; background: rgba(0, 0, 0, .25); }
.share-view .viewer-img, .share-view .viewer-video { max-width: 100%; max-height: 75vh; display: block; }
.share-view .viewer-text { width: 100%; box-sizing: border-box; margin: 0; max-height: 70vh; overflow: auto; }
.share-view .pdf-pages { width: 100%; }
.share-novi { display: grid; justify-items: center; gap: 10px; padding: 40px 10px; }
.share-novi .ft { width: 56px; height: 68px; }
.share-foot { text-align: center; color: var(--muted); font-size: .76rem; margin-top: 22px; opacity: .7; }
.center { text-align: center; }
.share-title .crumbs { font-size: 1.15rem; }
.share-title .crumbs a { padding: 0 4px 0 0; }
.share-title .crumbs a:first-child { padding-left: 0; }

/* ======================================================================
   v17 - Intro "Warp": Sternen-Warp, Partikel formen das Logo (Canvas, fx.js),
   Lichtblitz + Schockwelle + Wackler, Schriftzug knallt mit Glitch rein,
   am Ende Flug durch das Logo auf die Seite (ca. 4 Sekunden)
   ====================================================================== */
.intro { animation: ap-intro-out .6s cubic-bezier(.55, 0, .75, .2) 3.45s forwards; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro-aurora { animation: ap-fade 1.2s ease-out 1.35s forwards; }
.intro-sparks { opacity: 0; animation: ap-fade .8s ease-out 1.6s forwards; }
.intro-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .95), rgba(165, 243, 252, .45) 30%, rgba(59, 130, 246, .12) 55%, transparent 75%);
  animation: intro-flash .9s ease-out 1.42s;
}
@keyframes intro-flash { 0% { opacity: 0; } 7% { opacity: 1; } 100% { opacity: 0; } }
.intro-stage { animation: intro-shake .55s linear 1.45s, intro-through .7s cubic-bezier(.5, 0, .85, .35) 3.2s forwards; }
@keyframes intro-shake {
  0% { transform: translate(0, 0); } 12% { transform: translate(-9px, 6px) rotate(-.6deg); } 25% { transform: translate(8px, -7px) rotate(.5deg); }
  40% { transform: translate(-6px, -4px); } 55% { transform: translate(5px, 4px); } 72% { transform: translate(-2px, 2px); } 100% { transform: none; }
}
@keyframes intro-through { to { transform: scale(7); opacity: 0; } }
.intro-orb { animation: ap-orb 1s var(--spring) 1.4s backwards; }
.intro-ring { animation: ap-spin 1.6s linear infinite, ap-fade .6s ease-out 1.6s backwards; }
.intro-logo { animation: ap-logo .9s var(--spring) 1.45s backwards; }
.intro-outline { animation: v8-draw .5s ease-out 1.4s forwards; }
.intro-water { animation: v8-fill 1.1s var(--ease-apple) 1.75s forwards; }
.intro-sheen { animation: v8-sheen .9s ease-in-out 2.55s both; }
.intro-word { animation: intro-jolt .32s steps(3) 2.75s; }
.intro-word span { animation: intro-slam .7s cubic-bezier(.2, .9, .2, 1) calc(1.8s + var(--i) * .045s) backwards; }
@keyframes intro-slam {
  0% { opacity: 0; transform: translateY(-.2em) scale(2.4); filter: blur(10px); text-shadow: -10px 0 rgba(255, 40, 140, .9), 10px 0 rgba(40, 240, 255, .9); }
  55% { opacity: 1; transform: scale(.94); filter: none; text-shadow: -3px 0 rgba(255, 40, 140, .7), 3px 0 rgba(40, 240, 255, .7); }
  78% { transform: scale(1.03); text-shadow: 2px 0 rgba(255, 40, 140, .45), -2px 0 rgba(40, 240, 255, .45); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 0 transparent; }
}
@keyframes intro-jolt {
  0% { transform: translateX(-4px) skewX(-8deg); filter: drop-shadow(-3px 0 rgba(255, 40, 140, .8)); }
  50% { transform: translateX(3px) skewX(6deg); filter: drop-shadow(3px 0 rgba(40, 240, 255, .8)); }
  100% { transform: none; filter: none; }
}
.intro-hello { animation: ap-in .8s var(--ease-apple) 2.25s backwards; }
.intro-line { animation: ap-fade .4s ease-out 2.3s backwards; }
.intro-line span { animation: ap-load .9s var(--ease-apple) 2.35s forwards; }
.intro-hint { animation: ap-fade 1s ease-out .6s backwards; }
body.has-intro > header, body.has-intro > main { animation: ap-reveal .9s var(--ease-apple) 3.55s backwards; }
body.has-intro.intro-done > header, body.has-intro.intro-done > main { animation: ap-reveal .55s var(--ease-apple) backwards; }
:root[data-intro="off"] body.has-intro > header, :root[data-intro="off"] body.has-intro > main { animation: none; }

/* ======================================================================
   v18 - Word-Dokumente ansehen & bearbeiten, Textdateien bearbeiten
   ====================================================================== */
.doc-wrap { overflow-x: auto; padding: 8px 0 18px; }
.doc-paper {
  box-sizing: border-box; width: 100%; max-width: 820px; min-height: 60vh; margin: 0 auto; padding: 64px 72px;
  background: #fff; color: #1f2328; text-align: left; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 40px rgba(0, 0, 0, .35);
  font: 11pt/1.5 Calibri, Carlito, "Segoe UI", Inter, Arial, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere;
  outline: none; transition: box-shadow .2s;
}
.doc-paper > :first-child { margin-top: 0; }
.doc-paper p { margin: 0 0 .55em; }
.doc-paper h1 { font-size: 18pt; color: #1f3864; margin: 1em 0 .35em; line-height: 1.25; }
.doc-paper h1.doc-title { font-size: 28pt; font-weight: 400; color: #111; margin-top: 0; letter-spacing: -.01em; }
.doc-paper h2 { font-size: 14pt; color: #2f5496; margin: .9em 0 .3em; }
.doc-paper h3 { font-size: 12pt; color: #2f5496; margin: .8em 0 .25em; }
.doc-paper blockquote { margin: .6em 2.2em; color: #595959; font-style: italic; }
.doc-paper ul, .doc-paper ol { margin: 0 0 .55em; padding-left: 2em; }
.doc-paper li { margin: .1em 0; }
.doc-paper a { color: #0563c1; text-decoration: underline; }
.doc-paper img { max-width: 100%; height: auto; vertical-align: bottom; }
.doc-table { border-collapse: collapse; width: 100%; margin: .4em 0 .8em; white-space: normal; }
.doc-table td { border: 1px solid #9aa4b2; padding: 4px 8px; vertical-align: top; min-width: 2em; }
.doc-table td > :last-child { margin-bottom: 0; }
.doc-paper[contenteditable="true"] { box-shadow: 0 0 0 2px var(--blue), 0 12px 40px rgba(0, 0, 0, .35); cursor: text; }
.doc-paper[contenteditable="true"] .doc-table td { outline: 1px dashed rgba(37, 99, 235, .25); }
@media (max-width: 720px) {
  .doc-paper { padding: 28px 20px; font-size: 10.5pt; min-height: 50vh; }
  .doc-paper h1.doc-title { font-size: 22pt; }
}

/* Bearbeiten-Leiste (klebt beim Scrollen oben) */
.edit-bar {
  position: sticky; top: 8px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: .75rem; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.edit-bar[hidden] { display: none; }
.edit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; }
.et-group { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(148, 163, 184, .1); }
.edit-tools button, .et-color {
  display: inline-grid; place-items: center; min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: .95rem; cursor: pointer;
}
.edit-tools button:hover, .et-color:hover { background: rgba(148, 163, 184, .18); }
.edit-tools button.on { background: var(--blue); color: #fff; }
.et-color { position: relative; font-weight: 700; text-decoration: underline 3px; text-decoration-color: var(--blue); }
.et-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
#docStyle { height: 34px; border-radius: 10px; padding: 0 8px; background: var(--panel-2, var(--panel)); color: var(--text); border: 1px solid var(--border); font: inherit; }
.edit-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.edit-status { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.edit-status.dirty { color: #f59e0b; }
.edit-status.ok { color: #22c55e; }
.edit-status.busy { color: var(--blue); }
.edit-text {
  display: block; width: 100%; box-sizing: border-box; min-height: 70vh; resize: vertical; tab-size: 4;
  border: 2px solid var(--blue); border-radius: 10px; color: var(--text); background: var(--panel-2, var(--panel));
  font: .92rem/1.55 ui-monospace, "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace; outline: none;
}
.edit-text[hidden] { display: none; }
body.is-editing .viewer-nav { opacity: .35; pointer-events: none; }
@media (max-width: 720px) {
  .edit-actions { width: 100%; justify-content: flex-end; }
  .edit-status { margin-right: auto; }
  #editBtn span { display: none; }
}

/* ======================================================================
   v19 - Umwandeln-Dialog, Symbole statt Emojis in der Bearbeiten-Leiste, Seitenumbruch
   ====================================================================== */
.viewer-bar > .btn { display: inline-flex; align-items: center; gap: 7px; }
.edit-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.edit-tools button .i { width: 18px; height: 18px; vertical-align: middle; }
.edit-tools button.on .i { color: #fff; }
.convert-list { display: grid; gap: 8px; margin-top: 4px; }
.convert-opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(148, 163, 184, .06); transition: border-color .15s, background .15s;
}
.convert-opt:hover { border-color: var(--blue); }
.convert-opt:has(input:checked) { border-color: var(--blue); background: rgba(59, 130, 246, .12); }
.convert-opt input { margin-top: 3px; accent-color: var(--blue); }
.convert-opt span { display: grid; gap: 2px; }
.convert-opt small { color: var(--muted); font-size: .84rem; }
.doc-paper hr.doc-pb, .doc-paper span.doc-pb {
  display: block; height: 0; margin: 1.4em -20px; border: 0; border-top: 2px dashed #c3cad6; position: relative; overflow: visible;
}
.doc-paper hr.doc-pb::after, .doc-paper span.doc-pb::after {
  content: "Seitenumbruch"; position: absolute; left: 50%; top: -.75em; transform: translateX(-50%);
  padding: 0 8px; background: #fff; color: #8a94a6; font: 600 8pt/1.5 Inter, Arial, sans-serif; letter-spacing: .04em;
}
@media (max-width: 720px) {
  .viewer-bar > #convertBtn span, .edit-actions #editSave span { display: none; }
}

/* ======================================================================
   v20 - Ladebalken beim Seitenwechsel ohne Neuladen (Musik läuft weiter)
   ====================================================================== */
.pjax-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, #22d3ee, #3b82f6, #818cf8); box-shadow: 0 0 10px rgba(59, 130, 246, .6);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
.pjax-bar.on { opacity: 1; }
.pjax-bar.done { transition: transform .2s ease-out, opacity .3s .15s; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pjax-bar { transition: opacity .2s; } }