/* ============ RESET / GLOBAL HELPERS ============ */
[hidden]{ display:none !important; }

/* ============ TOKENS ============ */
:root{
  --bg:#EDE6D6; --bg-b:#E4DCC5;
  --surface:#E3DAC7; --surface-2:#D9CDAE; --surface-3:#CFC29E;
  --text:#24262B; --text-dim:#6b6656;
  --accent:#9C7A2E; --accent-strong:#7C611F; --on-accent:#FBF7EE;
  --accent-soft:rgba(156,122,46,.14);
  --border:rgba(36,38,43,.16);
  --danger:#A6432B;
  --shadow:rgba(40,32,10,.14);
  --radius-tile:16px; --radius-squircle:22%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#23272D; --bg-b:#14161A;
    --surface:#454B54; --surface-2:#3A3F47; --surface-3:#33383F;
    --text:#EDE6D6; --text-dim:#A79F8E;
    --accent:#C8A44D; --accent-strong:#E7C878; --on-accent:#1C2025;
    --accent-soft:rgba(200,164,77,.16);
    --border:rgba(237,230,214,.14);
    --danger:#D97B5F;
    --shadow:rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#23272D; --bg-b:#14161A;
  --surface:#454B54; --surface-2:#3A3F47; --surface-3:#33383F;
  --text:#EDE6D6; --text-dim:#A79F8E;
  --accent:#C8A44D; --accent-strong:#E7C878; --on-accent:#1C2025;
  --accent-soft:rgba(200,164,77,.16);
  --border:rgba(237,230,214,.14);
  --danger:#D97B5F;
  --shadow:rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ============ FARBSCHEMA-PRESETS (Einstellungen) ============ */
/* Messing ist der Standard (keine .theme-* Klasse nötig, siehe :root oben). */
:root.theme-salbei{ --accent:#5B7A52; --accent-strong:#46603F; --on-accent:#F6F9F3; --accent-soft:rgba(91,122,82,.14); }
@media (prefers-color-scheme: dark){
  :root.theme-salbei:not([data-theme="light"]){ --accent:#8FBF82; --accent-strong:#B3D9A8; --on-accent:#16221A; --accent-soft:rgba(143,191,130,.18); }
}
:root[data-theme="dark"].theme-salbei{ --accent:#8FBF82; --accent-strong:#B3D9A8; --on-accent:#16221A; --accent-soft:rgba(143,191,130,.18); }

:root.theme-taube{ --accent:#43648A; --accent-strong:#33506F; --on-accent:#F3F7FC; --accent-soft:rgba(67,100,138,.14); }
@media (prefers-color-scheme: dark){
  :root.theme-taube:not([data-theme="light"]){ --accent:#7FA8D6; --accent-strong:#A6C6E8; --on-accent:#16202B; --accent-soft:rgba(127,168,214,.18); }
}
:root[data-theme="dark"].theme-taube{ --accent:#7FA8D6; --accent-strong:#A6C6E8; --on-accent:#16202B; --accent-soft:rgba(127,168,214,.18); }

:root.theme-bordeaux{ --accent:#8C3A46; --accent-strong:#6E2C36; --on-accent:#FBF3F4; --accent-soft:rgba(140,58,70,.14); }
@media (prefers-color-scheme: dark){
  :root.theme-bordeaux:not([data-theme="light"]){ --accent:#D08893; --accent-strong:#E3AEB5; --on-accent:#2A1418; --accent-soft:rgba(208,136,147,.18); }
}
:root[data-theme="dark"].theme-bordeaux{ --accent:#D08893; --accent-strong:#E3AEB5; --on-accent:#2A1418; --accent-soft:rgba(208,136,147,.18); }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(120% 140% at 15% -10%, var(--bg) 0%, var(--bg-b) 70%);
  color:var(--text);
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft);}
button{font-family:inherit;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
.display{font-family:'Cinzel',serif;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============ SPRITE ============ */
.sprite{display:none;}

/* ============ AUTH SCREEN ============ */
.auth-screen{ display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:34px 28px 28px; box-shadow:0 24px 50px var(--shadow); text-align:center; }
.auth-card .brand-mark{ width:52px; height:52px; margin:0 auto 14px; }
.auth-card .brand-mark svg{ width:30px; height:30px; }
.auth-card h1{ font-family:'Cinzel',serif; font-size:24px; margin:0 0 4px; letter-spacing:.02em; }
.auth-lead{ font-size:13px; color:var(--text-dim); margin:0 0 22px; }
.auth-tabs{ display:flex; border-bottom:1px solid var(--border); margin-bottom:20px; }
.auth-tabs button{ flex:1; background:none; border:none; padding:10px; font-size:13px; font-weight:600; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.auth-tabs button.active{ color:var(--accent); border-color:var(--accent); }
.field{ text-align:left; margin-bottom:14px; }
.field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); margin-bottom:5px; }
.field input{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14px; font-family:inherit; }
.btn.block{ width:100%; justify-content:center; margin-top:6px; }
.btn[disabled]{ opacity:.6; cursor:default; }
.auth-note{ font-size:11px; color:var(--text-dim); margin-top:20px; line-height:1.55; }
.auth-error{ font-size:12.5px; color:var(--danger); margin:-4px 0 12px; text-align:left; }
.auth-hint{ font-size:11px; color:var(--text-dim); margin:-8px 0 14px; text-align:left; line-height:1.5; }

/* ============ HEADER ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:16px; row-gap:10px;
  padding:14px clamp(18px,4vw,44px);
  border-bottom:1px solid var(--border);
  background:linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 100%);
  backdrop-filter:blur(6px);
}
/* Drei-Spalten-Grid statt Flexbox (26.08., Runde 9): Logo/Marke, Titel und
   Konto-Bereich bekommen dadurch je eine eigene Spalte, wobei die mittlere
   (der Titel) den ganzen Rest-Platz bekommt – so ist der Titel wirklich
   mittig auf der ganzen Topbar-Breite, unabhängig davon, wie breit Logo
   bzw. Konto-Bereich gerade sind. Vorher (flex + justify-content:center im
   Titel-Container) war die "Mitte" nur die Mitte zwischen den beiden
   Aussenseiten, nicht die Mitte der Seite. */
/* Der Seitentitel (Büro-Titel bzw. Name der aktuellen Mappe/des Fachs, inkl.
   Bearbeiten-Stift auf der Büro-Übersicht) sitzt mittig zwischen Logo und
   Konto-Bereich, in derselben Cinzel-Optik wie zuvor im Inhaltsbereich – nur
   jetzt in der sticky Topbar, damit er beim Scrollen sichtbar bleibt und man
   immer weiß, wo man ist. Ersetzt den früheren separaten Ort-Text komplett. */
.topbar-title-row{ min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; }
/* Namensschild-Optik wie beim Aktenschrank-Emblem (.cabinet-tag): kleine
   Retro-Plakette statt schlichtem Fließtext, damit der Ort in der Topbar
   ein richtiges Highlight ist. Etwas grösser als zuvor (Runde 9-Wunsch). */
.topbar-title-row .level-title{
  font-size:clamp(17px,2vw,23px); margin:0; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  color:var(--text); background:var(--surface-3); padding:9px 22px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px var(--border);
}
@media (max-width:760px){ .topbar-title-row{ display:none; } }
.topbar > *{ position:relative; z-index:1; }
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:80px; height:80px; border-radius:var(--radius-squircle);
  background:linear-gradient(145deg, var(--surface) 0%, var(--surface-3) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1px var(--border);
  flex:0 0 auto;
}
/* Icon deutlich grösser im Kreis zur Geltung bringen (26.08., Runde 11) –
   die Umrandung (80px) bleibt, nur das Symbol darin wächst. */
.brand-mark svg{width:58px; height:58px;}
.brand-word{
  font-family:'Cinzel',serif; font-weight:700; font-size:36px; letter-spacing:.04em;
  color:var(--text);
}
.brand-sub{
  display:none;
  font-size:17px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
  margin-left:4px; padding-left:15px; border-left:1px solid var(--border);
}
@media (min-width:900px){ .brand-sub{display:inline;} }

.topbar-controls{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; justify-content:flex-end; }

.plan-chip{
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim);
  font-size:16px; font-weight:700; letter-spacing:.04em; padding:11px 19px; border-radius:999px; cursor:pointer;
}
.plan-chip.is-pro{ color:var(--accent-strong); border-color:var(--accent); background:var(--accent-soft); }

.icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); }

.account-chip{ position:relative; }
/* Abmelden steckt jetzt im Dropdown unter Name/Avatar statt als eigener,
   immer sichtbarer Button (26.08., Runde 9, Leos Wunsch). */
.account-trigger{
  display:flex; align-items:center; gap:11px; padding:7px 17px 7px 7px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font:inherit;
}
.account-trigger:hover{ border-color:var(--accent); }
.account-avatar{ width:41px; height:41px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; font-family:'Cinzel',serif; flex:0 0 auto; }
.account-email{ font-size:17px; color:var(--text-dim); max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:180px; z-index:50;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 16px 34px var(--shadow); padding:6px;
}
.account-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; border-radius:9px;
  padding:10px 13px; font-size:14.5px; font-weight:600; color:var(--text); cursor:pointer; font-family:inherit;
}
.account-menu-item:hover{ background:var(--surface-2); color:var(--accent); }

/* ============ FRAME (app vs web) ============ */
/* flex:1 lässt den Inhaltsbereich den ganzen restlichen Platz der Seite
   einnehmen, sodass Impressum/Datenschutz/AGB/Widerruf unten (.foot) immer
   am unteren Rand der Seite bleiben, statt bei wenig Inhalt mittendrin zu
   "schweben" – passt sich dabei ganz normal an jede Bildschirmgrösse an
   (26.08., Runde 10, Leos Wunsch). */
.viewport{ padding:clamp(16px,4vw,40px); display:flex; justify-content:center; flex:1 0 auto; }
.stage-wrap{ width:100%; max-width:min(97vw, 1880px); margin:0 auto; }

body.mode-app .stage-wrap{ max-width:400px; }
.phone{ position:relative; }
body.mode-app .phone{
  border-radius:46px; padding:14px; background:linear-gradient(160deg,var(--surface-3),var(--surface));
  box-shadow:0 30px 60px var(--shadow), inset 0 0 0 1px var(--border);
}
.stage{ position:relative; background:transparent; }
body.mode-app .stage{ border-radius:32px; overflow:hidden; background:var(--bg); min-height:760px; }
.status-row{
  display:none; justify-content:center; align-items:center;
  padding:14px 26px 6px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--text);
}
body.mode-app .status-row{ display:flex; }
.island{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:100px; height:26px; background:#0b0c0e; border-radius:16px; z-index:5;
}
body:not(.mode-app) .island{ display:none; }
.home-indicator{
  display:none; position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:120px; height:4px; border-radius:3px; background:var(--text); opacity:.35;
}
body.mode-app .home-indicator{ display:block; }

/* ============ NAVIGATION (Zurück / Anfang) ============ */
/* Ersetzt die frühere Breadcrumb-Leiste ("Büro > Aktenschrank > Mappe") und
   das "Büro-Übersicht"-Eyebrow-Textchen komplett (26.08., Runde 9, Leos
   Wunsch) – der aktuelle Ort steht ja schon im Namensschild oben in der
   Topbar. Stattdessen zwei feste Buttons, nur sichtbar wenn man nicht schon
   auf der Büro-Übersicht ist. */
.level-nav{ padding:14px 22px 0; display:flex; gap:8px; justify-content:center; }
body.mode-app .level-nav{ padding:12px 16px 0; }
.nav-btn{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-dim); padding:8px 15px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:transform .15s, color .15s, border-color .15s;
}
.nav-btn:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.nav-btn svg{ width:15px; height:15px; }
.nav-btn .chev-left{ transform:scaleX(-1); }

.btn{
  display:inline-flex; align-items:center; gap:7px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); padding:9px 15px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:transform .15s, background .15s, box-shadow .15s;
}
.btn svg{ width:16px; height:16px; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px var(--shadow); }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn.danger{ background:var(--danger); color:#fff; border-color:transparent; }
.btn.locked-btn{ opacity:.85; }

/* ============ LEVEL LABEL ============ */
.level-title-row{ display:flex; align-items:center; gap:8px; }
.level-title{ font-family:'Cinzel',serif; font-weight:700; font-size:clamp(23px,3vw,36px); margin:2px 0 0; }
body.mode-app .level-title{ font-size:21px; }
.title-edit-btn{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
}
.title-edit-btn svg{ width:13px; height:13px; }
.title-edit-btn:hover{ color:var(--accent); border-color:var(--accent); }
.loading-hint{ padding:20px 22px; color:var(--text-dim); font-size:13px; }
.load-error{ padding:24px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.load-error p{ margin:0; color:var(--text); font-size:14px; font-weight:600; }
.load-error-detail{ color:var(--text-dim) !important; font-size:12px !important; font-weight:400 !important; }

/* ============ GRID ============ */
/* auto-fit statt auto-fill: bei wenigen Kacheln (z. B. 5–7 Aktenschränke)
   verteilen sich diese über die volle Breite und werden dabei größer, statt
   links zusammengedrängt zu stehen mit leerem Platz rechts. Erst wenn genug
   Kacheln da sind, um mehrere Reihen zu füllen, bleiben sie bei der
   Mindestgröße und es entstehen weitere Zeilen. */
.grid{
  display:grid; gap:18px; padding:20px 22px 10px; justify-content:center;
  grid-template-columns:repeat(auto-fit, minmax(190px,230px));
}
body.mode-app .grid{ grid-template-columns:1fr 1fr; padding:14px 16px 6px; gap:12px; justify-content:initial; }
.grid.cabinets{ grid-template-columns:repeat(auto-fit, minmax(190px,220px)); justify-content:center; align-items:end; }
body.mode-app .grid.cabinets{ grid-template-columns:repeat(3,1fr); justify-content:initial; }

/* generic tile */
.tile{ position:relative; cursor:pointer; }
.tile:hover .tile-face{ transform:translateY(-3px); box-shadow:0 14px 26px var(--shadow); }
.tile.locked:hover .tile-face{ transform:none; }
/* Drag & Drop: Kacheln lassen sich ziehen (Platz-Tausch), und Kacheln nehmen
   gezogene Dateien/Kacheln als Ablageziel an (26.08., Runde 16). */
.tile[draggable="true"]{ cursor:grab; }
.tile.is-dragging{ opacity:.4; }
.tile.is-drop-target .tile-face{ outline:2.5px dashed var(--accent); outline-offset:3px; }
.tile-face{ position:relative; transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; }
.tile.locked .tile-face{ filter:saturate(.55) brightness(.9); }
.tile-label{
  margin-top:9px; font-size:15px; font-weight:600; line-height:1.25;
  display:flex; align-items:center; gap:6px;
}
.tile-count{ font-size:12.5px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; margin-top:1px; }

/* Löschen/Bearbeiten stehen jetzt direkt neben dem Namen statt als
   schwebende Icons oben in der Tile-Ecke (26.08., Runde 15, Leos Wunsch:
   "neben dem, wo der Name draufsteht"). Weiterhin nur beim Hover/Fokus
   sichtbar (opacity), nur nicht mehr absolut positioniert. */
.tile-name-row{ display:flex; align-items:center; gap:5px; min-width:0; max-width:100%; }

.tile-delete{
  z-index:2; width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:rgba(20,18,10,.45); border:none; color:#F1E7CE; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity .15s, background .15s;
}
.tile-delete svg{ width:10px; height:10px; }
.tile-delete:hover{ background:var(--danger); }
.tile:hover .tile-delete, .tile:focus-within .tile-delete{ opacity:1; }
body.mode-app .tile-delete{ opacity:.8; }

.tile-rename{
  z-index:2; width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:rgba(20,18,10,.45); border:none; color:#F1E7CE; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity .15s, background .15s;
}
.tile-rename svg{ width:10px; height:10px; }
.tile-rename:hover{ background:var(--accent); color:var(--on-accent); }
.tile:hover .tile-rename, .tile:focus-within .tile-rename{ opacity:1; }
body.mode-app .tile-rename{ opacity:.8; }

.tile-lock{
  position:absolute; top:8px; right:8px; z-index:2; display:flex; align-items:center; gap:3px;
  background:rgba(20,18,10,.6); color:#F1E7CE; font-size:9px; font-weight:700; letter-spacing:.05em;
  padding:4px 8px 4px 6px; border-radius:999px;
}
.tile-lock svg{ width:10px; height:10px; }

/* folder-style tile (Mappe / Fach / weitere Kacheln) */
.folder-face{ width:100%; aspect-ratio:4/3; box-shadow:0 6px 16px var(--shadow); border-radius:14px; overflow:hidden; }
.folder-face svg{ width:100%; height:100%; display:block; }
/* Namensschild direkt auf der Kachel, im unteren dunkleren Bereich der Mappe
   (wie ein echtes Beschriftungsschild) – zeigt Name UND Anzahl/leer, statt
   als separater Text unter der Kachel zu stehen. */
.folder-nameplate{
  position:absolute; left:8%; right:8%; top:60%; bottom:7%;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  overflow:hidden; pointer-events:none;
}
/* Die Namenszeile braucht pointer-events zurück (das Nameplate selbst hat
   pointer-events:none, damit Klicks auf die Kachel durchgehen) – sonst
   wären Stift/Mülleimer daneben nicht klickbar (26.08., Runde 15). */
.folder-nameplate .tile-name-row{ pointer-events:auto; }
.folder-name{
  font-family:'Cinzel',serif; font-weight:700; font-size:clamp(12.5px,1.6vw,15px);
  color:var(--text); letter-spacing:.01em; line-height:1.2; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.folder-sub{
  font-size:9.5px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* cabinet tile (root Aktenschränke) — the signature element */
.cabinet{
  width:100%; aspect-ratio:3/4; border-radius:18px; padding:16px 12px 13px;
  /* Bei gewählter Kachelfarbe färbt sich die gesamte Kachelfläche leicht ein
     (nicht nur Icon/Punkte), damit der farbliche Unterschied auf einen Blick
     erkennbar ist. Ohne Farbe (--tile-accent nicht gesetzt) bleibt es exakt
     wie vorher, weil dann mit sich selbst gemischt wird. */
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--tile-accent, var(--surface)) 16%, var(--surface)) 0%,
    color-mix(in srgb, var(--tile-accent, var(--surface-2)) 22%, var(--surface-2)) 75%);
  box-shadow:0 10px 24px var(--shadow), inset 0 0 0 1.5px var(--tile-accent, var(--border));
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
/* Icon-Kreis + Fachboden-Striche oben in der Mitte auf der Aktenschrank-
   Kachel nochmal grösser (26.08., Runde 13, Leos Wunsch), Kachel selbst
   dafür einen Tick tiefer (aspect-ratio oben 3/3.75 → 3/4). */
.cabinet-icon{
  width:56px; height:56px; border-radius:50%;
  background: color-mix(in srgb, var(--tile-accent, var(--accent)) 20%, transparent);
  display:flex; align-items:center; justify-content:center; color:var(--tile-accent, var(--accent)); flex:0 0 auto;
}
.cabinet-icon svg{ width:30px; height:30px; }
.cabinet-shelves{ width:100%; display:flex; flex-direction:column; gap:11px; flex:0 0 auto; justify-content:center; padding:0 6%; }
.cabinet-shelves span{ height:1.3px; background:var(--border); position:relative; display:block; }
.cabinet-shelves span::after{ content:""; position:absolute; right:0; top:-2.6px; width:6.5px; height:6.5px; border-radius:50%; background:var(--tile-accent, var(--accent)); opacity:.75; }
/* Namensschild + Anzahl/leer zusammen als ein Block unten auf der
   Aktenschrank-Kachel (26.08., Runde 14, Leos Wunsch) – vorher stand die
   Anzahl separat unter der Kachel, jetzt wie bei Mappen/Fächern beides
   direkt drauf. */
.cabinet-nameblock{ display:flex; flex-direction:column; align-items:center; gap:4px; max-width:100%; }
.cabinet-tag{
  font-family:'Cinzel',serif; font-size:15.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text); background:var(--surface-3); padding:7px 15px; border-radius:999px; min-width:0;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 0 0 0 1px var(--border);
}
.cabinet-sub{
  font-size:12px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* add tile */
.tile.add .tile-face{
  aspect-ratio:4/3; border:1.5px dashed var(--border); border-radius:16px;
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  background:transparent; box-shadow:none;
}
.grid.cabinets .tile.add .tile-face{ aspect-ratio:3/3.75; border-radius:18px; }
.tile.add:not(.locked):hover .tile-face{ border-color:var(--accent); color:var(--accent); box-shadow:none; transform:none; }
.tile.add .tile-face svg{ width:22px; height:22px; }
.tile.add .tile-label{ color:var(--text-dim); justify-content:center; text-align:center; }
.tile.add.locked .tile-face{ filter:none; border-color:var(--border); color:var(--text-dim); }
.tile.add.locked .tile-face svg{ width:18px; height:18px; }

/* ============ FILES SECTION ============ */
.files-section{ margin:6px 22px 30px; }
body.mode-app .files-section{ margin:6px 16px 116px; }
.files-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:2px; }
.files-title{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:700; margin:0; }
.files-toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
body.mode-app .files-toolbar{ display:none; }
.files-empty{ padding:20px 4px 6px; color:var(--text-dim); font-size:13px; }

.file-row{
  display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border);
  animation:riseIn .35s ease both; cursor:grab;
}
/* Drag & Drop: eine Datei auf eine Kachel im Grid darüber ziehen, um sie
   dort hinein zu verschieben (26.08., Runde 16). */
.file-row.is-dragging{ opacity:.4; }
@keyframes riseIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.file-icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:9px; background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.file-icon svg{ width:18px; height:18px; }
.file-icon.is-busy{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.file-main{ flex:1; min-width:0; }
.file-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-meta{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.file-az{ font-family:'IBM Plex Mono',monospace; }
.file-chips{ display:flex; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  font-size:11px; font-weight:700; letter-spacing:.03em; padding:5px 9px; border-radius:7px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; color:var(--text-dim);
}
.chip:hover{ color:var(--accent); border-color:var(--accent); }
.chip.chip-delete:hover{ color:#fff; background:var(--danger); border-color:var(--danger); }

/* ============ APP MODE BOTTOM ACTION BAR ============ */
.action-dock{
  display:none; position:absolute; left:12px; right:12px; bottom:16px; z-index:6;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 16px 30px var(--shadow);
  padding:7px; gap:3px;
}
body.mode-app .action-dock{ display:flex; }
.action-dock button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:transparent; border:none; border-radius:13px; padding:8px 2px; cursor:pointer;
  color:var(--text-dim); font-size:9.5px; font-weight:600;
}
.action-dock button svg{ width:17px; height:17px; }
.action-dock button.primary-action{ color:var(--on-accent); background:var(--accent); }
.action-dock button:active{ transform:scale(.94); }

/* ============ RECORD / SCAN / MODAL OVERLAY ============ */
.overlay{
  position:fixed; inset:0; background:rgba(10,10,10,.5); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px; overflow-y:auto;
}
.overlay.show{ display:flex; }
.overlay-card{
  background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:30px 26px;
  width:100%; max-width:340px; text-align:center; box-shadow:0 30px 60px var(--shadow);
}
.overlay-card h3{ margin:14px 0 4px; font-size:16px; font-family:'Cinzel',serif; }
.overlay-card p{ margin:0; font-size:12.5px; color:var(--text-dim); }
.pulse-ring{
  width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.pulse-ring::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent-soft);
  animation:pulseRing 1.2s ease-out infinite;
}
@keyframes pulseRing{ 0%{transform:scale(.9); opacity:.7;} 100%{transform:scale(1.9); opacity:0;} }
.pulse-ring svg{ width:26px; height:26px; color:var(--accent); position:relative; z-index:1; }
.wave{ display:flex; align-items:center; justify-content:center; gap:3px; height:22px; margin-top:14px; }
.wave span{ width:3px; background:var(--accent); border-radius:2px; animation:bar 1s ease-in-out infinite; }
.wave span:nth-child(2){ animation-delay:.1s; } .wave span:nth-child(3){ animation-delay:.2s; }
.wave span:nth-child(4){ animation-delay:.3s; } .wave span:nth-child(5){ animation-delay:.4s; }
@keyframes bar{ 0%,100%{height:5px;} 50%{height:20px;} }
.dictate-live{ margin-top:14px; font-size:13px; color:var(--text); min-height:40px; text-align:left; background:var(--surface); border-radius:10px; padding:10px 12px; max-height:160px; overflow-y:auto; }
.dictate-actions{ display:flex; gap:10px; margin-top:16px; }
.dictate-actions .btn{ flex:1; justify-content:center; }

/* ============ ADD / DELETE MODAL ============ */
.modal-card{ text-align:left; }
.modal-card label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin:14px 0 6px; }
.modal-card input{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:14px; font-family:inherit;
}
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; justify-content:center; }

/* ============ PAYWALL ============ */
.paywall-card{ max-width:400px; text-align:left; }
.paywall-card h3{ text-align:center; }
.paywall-card > p.lead{ text-align:center; font-size:12.5px; color:var(--text-dim); }
.plan-compare{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 14px; }
.plan-col{ border:1px solid var(--border); border-radius:12px; padding:12px; font-size:12px; }
.plan-col.pro{ border-color:var(--accent); background:var(--accent-soft); }
.plan-col strong{ display:block; margin-bottom:6px; font-size:12.5px; }
.plan-col ul{ margin:0; padding-left:16px; }
.plan-col li{ margin-bottom:3px; color:var(--text-dim); }
.plan-col.pro li{ color:var(--text); }
.price-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
.price-card{ border:1.5px solid var(--border); border-radius:12px; padding:10px 8px; background:var(--surface); cursor:pointer; text-align:center; }
.price-card span{ display:block; font-size:11px; color:var(--text-dim); }
.price-card strong{ display:block; font-size:17px; margin:2px 0; }
.price-card em{ font-style:normal; font-size:10px; color:var(--text-dim); }
.price-card.active{ border-color:var(--accent); background:var(--accent-soft); }
.paywall-fineprint{ font-size:10.5px; color:var(--text-dim); text-align:center; margin-top:8px; }

/* ============ TOAST ============ */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:200;
  background:var(--surface-3); color:var(--text); border:1px solid var(--border);
  padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600;
  box-shadow:0 16px 30px var(--shadow); opacity:0; transition:opacity .25s, transform .25s;
  display:flex; align-items:center; gap:9px; max-width:90vw;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:16px; height:16px; color:var(--accent); flex:0 0 auto; }
.toast.is-warn svg{ color:var(--danger); }

/* ============ FOOTER NOTE ============ */
.foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px;
  text-align:center; padding:52px 20px 50px; margin-top:14px; font-size:12px; color:var(--text-dim);
}
.foot a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
.foot a:hover{ color:var(--accent); }

/* ============ EINSTELLUNGEN ============ */
.settings-card{ text-align:left; }
.settings-section{ margin:0 0 20px; }
.settings-section:last-of-type{ margin-bottom:0; }
.settings-section h4{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); margin:0 0 10px; }
.theme-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.theme-swatch{
  width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--border); position:relative;
}
.theme-swatch.active{ border-color:var(--text); }
.theme-swatch.active::after{
  content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--bg);
}
.theme-swatch.swatch-none{
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--text-dim) calc(50% - 1px), var(--text-dim) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--surface-2);
}
.mode-toggle{ display:flex; gap:8px; }
.mode-toggle button{
  flex:1; padding:9px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer;
}
.mode-toggle button.active{ color:var(--accent-strong); border-color:var(--accent); background:var(--accent-soft); }
.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px;
}
.settings-row:last-child{ border-bottom:none; }
.settings-row .legal-links{ display:flex; gap:14px; flex-wrap:wrap; }
.settings-row .legal-links a{ color:var(--accent); font-size:13px; font-weight:600; text-decoration:none; }
.settings-row .legal-links a:hover{ text-decoration:underline; }
.danger-zone{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--border);
}
.danger-zone p{ font-size:12.5px; color:var(--text-dim); margin:0 0 10px; }

/* ============ COMPACT / MOBILE BROWSER LAYOUT ============ */
/* Applies to any narrow browser viewport (web, not wrapped native — that uses
   body.mode-app above via Capacitor detection in js/app.js). Reuses the same
   dock-instead-of-toolbar pattern for comfortable one-handed use. */
@media (max-width: 640px){
  .action-dock{ display:flex; position:sticky; bottom:10px; margin:10px 12px 0; }
  .grid{ grid-template-columns:1fr 1fr; padding:14px 16px 6px; gap:12px; }
  .grid.cabinets{ grid-template-columns:repeat(2,1fr); }
  .files-toolbar{ display:none; }
  .files-section{ margin:6px 16px 100px; }
  .level-nav{ padding-left:16px; padding-right:16px; }
}