/* ═══════════════════════════════════════════════════════════════════════
   Nevim Drive — Farben und Bausteine

   Die beiden Farbsaetze sind 1:1 aus der Vorlage uebernommen:
   2026-08-27T1031_agentenstudio_konsole-farben-vorschau.html
   Umgeschaltet wird ueber  document.documentElement.dataset.thema
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HELL ─────────────────────────────────────────────────────────────── */
:root {
  --bg:#ffffff; --bg-secondary:#fafbfa; --bg-tertiary:#f4f5f4; --bg-hover:#eef0ef;
  --surface:#ffffff; --border:#e6ebea;
  --text:#0a1e1a; --text-secondary:#5f7570; --text-muted:#94a5a0;
  --teal:#00C4A7; --teal-dark:#00a38b; --teal-darker:#007a68;
  --teal-light:#e6faf6; --teal-dim:rgba(0,196,167,0.1);
  --danger:#ef4444;
  /* Datei-Typ-Farben (D-Ablage-Sinnbilder): die vertrauten Farbwelten,
     nicht die Original-Logos. */
  --typ-word:#2B5797; --typ-excel:#217346; --typ-praesentation:#D24726; --typ-pdf:#C11E1E;
  /* Der harte Tresor (D-030) bekommt eine EIGENE Farbe, nicht das
     Haus-Tuerkis: der Bereich soll sich auf den ersten Blick vom Rest
     unterscheiden, weil er sich auch inhaltlich unterscheidet. */
  --tresor:#6C5CE7; --tresor-dim:rgba(108,92,231,0.10); --tresor-rand:#d6d1f7;
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono","Fira Code","Fira Mono",Menlo,Consolas,monospace;
  --transition:all 0.15s ease;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.04); --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --text-dim:var(--text-secondary);
}

/* ── DUNKEL ───────────────────────────────────────────────────────────── */
:root[data-thema="dunkel"] {
  --bg:#071310; --bg-secondary:#0c1a16; --bg-tertiary:#122320; --bg-hover:#1a2f2a;
  --surface:#0f1f1b; --border:#223b35;
  --text:#e8f2ef; --text-secondary:#9fb5af; --text-muted:#6f8880;
  --teal:#1fd9bb; --teal-dark:#00C4A7; --teal-darker:#7ff0dc;
  --teal-light:#123330; --teal-dim:rgba(31,217,187,0.14);
  --danger:#ff6b6b;
  /* Etwas gedaempfter als hell — auf dunklem Grund wirkt die volle
     Buero-Farbe sonst zu grell. */
  --typ-word:#7C97C4; --typ-excel:#6FA383; --typ-praesentation:#D98F72; --typ-pdf:#D97A7A;
  --tresor:#A79BF5; --tresor-dim:rgba(167,155,245,0.16); --tresor-rand:#3b3670;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.5);
}

* { box-sizing:border-box; margin:0; padding:0; }

html, body { height:100%; }
body {
  font-family:var(--font); background:var(--bg-secondary); color:var(--text);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
button, input { font:inherit; color:inherit; }
a { color:var(--teal-darker); }

/* ── Grundriss ────────────────────────────────────────────────────────── */
.rahmen { display:grid; grid-template-columns:256px 1fr;
          grid-template-rows:var(--nevim-kopf, 56px) 1fr;
          grid-template-areas:"kopf kopf" "leiste flaeche"; height:100vh; }

/* ── Kopfzeile ────────────────────────────────────────────────────────── */
.kopf { grid-area:kopf; display:flex; align-items:center; gap:14px;
        padding:0 16px; background:var(--bg); border-bottom:1px solid var(--border); }
.marke { display:flex; align-items:center; gap:10px; width:224px; flex:none;
         font-size:1.35rem; font-weight:600; color:var(--text); letter-spacing:.01em; }
.marke svg { flex:none; }

.suchfeld { flex:1; max-width:720px; position:relative; }
.suchfeld input {
  width:100%; padding:11px 16px 11px 46px; border:1px solid transparent;
  border-radius:var(--radius-lg); background:var(--bg-tertiary); color:var(--text);
  outline:none; transition:var(--transition);
}
.suchfeld input:focus { background:var(--surface); border-color:var(--teal);
                        box-shadow:var(--shadow-md); }
.suchfeld input::placeholder { color:var(--text-muted); }
.suchfeld .lupe { position:absolute; left:15px; top:50%; transform:translateY(-50%);
                  color:var(--text-secondary); pointer-events:none; }

.kopf-rechts { display:flex; align-items:center; gap:6px; margin-left:auto; }

.rund { width:40px; height:40px; display:grid; place-items:center; flex:none;
        border:none; border-radius:50%; background:transparent; color:var(--text-secondary);
        cursor:pointer; transition:var(--transition); }
.rund:hover { background:var(--bg-hover); color:var(--text); }
.rund.aktiv { background:var(--teal-dim); color:var(--teal-darker); }


/* ── Linke Leiste ─────────────────────────────────────────────────────── */
.leiste { grid-area:leiste; background:var(--bg); border-right:1px solid var(--border);
          padding:8px 12px 16px; display:flex; flex-direction:column; overflow-y:auto; }

.neu { display:flex; align-items:center; gap:10px; align-self:flex-start;
       margin:8px 0 20px; padding:14px 22px 14px 18px;
       border:1px solid var(--border); border-radius:var(--radius-lg);
       background:var(--surface); color:var(--text); font-weight:600;
       box-shadow:var(--shadow-sm); cursor:pointer; transition:var(--transition); }
.neu:hover { background:var(--bg-hover); box-shadow:var(--shadow-md); }

.weg { display:flex; align-items:center; gap:14px; width:100%;
       padding:9px 14px; margin-bottom:2px; border:none; border-radius:999px;
       background:transparent; color:var(--text-secondary); font-size:.9rem;
       text-align:left; cursor:pointer; transition:var(--transition); }
.weg:hover { background:var(--bg-hover); color:var(--text); }
.weg.aktiv { background:var(--teal-dim); color:var(--teal-darker); font-weight:600; }
.weg svg { flex:none; }
.trennlinie { height:1px; background:var(--border); margin:10px 6px; }

.platz { margin-top:auto; padding:14px 14px 4px; }
/* Haus-Standard: Einstellungen-Zugang im Leisten-Fuss (wie Mail/To-do). */
.leiste-fuss { border-top:1px solid var(--border); margin-top:10px; padding-top:6px; }
.leiste-fuss .weg { width:100%; }
.platz-balken { height:5px; border-radius:999px; background:var(--bg-tertiary);
                overflow:hidden; margin:10px 0 8px; }
.platz-balken i { display:block; height:100%; background:var(--teal);
                  border-radius:999px; transition:width .3s ease; }
.platz-text { font-size:.8rem; color:var(--text-secondary); }

/* ── Hauptflaeche ─────────────────────────────────────────────────────── */
.flaeche { grid-area:flaeche; padding:20px 24px 40px; overflow-y:auto; position:relative; }

.brotkrumen { display:flex; align-items:center; gap:4px; flex-wrap:wrap;
              font-size:1.4rem; font-weight:500; min-height:44px; }
.brotkrumen button { border:none; background:transparent; font:inherit; color:var(--text);
                     padding:4px 10px; border-radius:var(--radius-sm); cursor:pointer; }
.brotkrumen button:hover { background:var(--bg-hover); }
.brotkrumen .pfeil { color:var(--text-muted); font-size:1.1rem; }

.kopf-zeile { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.kopf-zeile .rechts { margin-left:auto; display:flex; align-items:center; gap:4px;
                      background:var(--bg-tertiary); border-radius:999px; padding:3px; }
.kopf-zeile .rechts .rund { width:34px; height:34px; }

/* Die Fotos-Werkzeugzeile (KI-Schalter + Aufraeumen) traegt selbst keine
   Pille — die einzelnen Teile bringen ihren eigenen, dezenten Rahmen mit. */
.kopf-zeile .rechts.fotos-werkzeuge { background:transparent; padding:0; }
.fotos-werkzeuge-ziel { display:flex; align-items:center; gap:10px; }

/* ── KI-Schalter (Fotos durchsuchbar machen) ─────────────────────────── */
.ki-schalter { display:inline-flex; align-items:center; gap:8px; border:none;
               background:transparent; color:var(--text-secondary); cursor:pointer;
               padding:5px 10px; border-radius:999px; transition:var(--transition); }
.ki-schalter:hover { background:var(--bg-hover); color:var(--text); }
.ki-schalter-spur { position:relative; flex:none; width:30px; height:16px;
                    border-radius:999px; background:var(--bg-tertiary);
                    border:1px solid var(--border); transition:var(--transition); }
.ki-schalter-knopf { position:absolute; top:1px; left:1px; width:12px; height:12px;
                     border-radius:50%; background:var(--text-muted); transition:var(--transition); }
.ki-schalter[aria-checked="true"] .ki-schalter-spur { background:var(--teal-dim); border-color:var(--teal); }
.ki-schalter[aria-checked="true"] .ki-schalter-knopf { transform:translateX(14px); background:var(--teal); }

.aufraeumen-knopf { padding:7px 16px; border:1px solid var(--border); border-radius:999px;
                    background:var(--surface); color:var(--text); font-size:.85rem;
                    font-weight:600; cursor:pointer; transition:var(--transition); }
.aufraeumen-knopf:hover { background:var(--bg-hover); }

.duplikate-knopf { padding:7px 16px; border:1px solid var(--border); border-radius:999px;
                   background:var(--surface); color:var(--text); font-size:.85rem;
                   font-weight:600; cursor:pointer; transition:var(--transition); }
.duplikate-knopf:hover { background:var(--bg-hover); }

/* Werkzeugleiste bei Auswahl */
.werkzeuge { display:flex; align-items:center; gap:4px; padding:6px 8px;
             background:var(--teal-dim); border-radius:999px; }
.werkzeuge .anzahl { font-size:.9rem; font-weight:600; color:var(--teal-darker);
                     padding:0 10px 0 6px; }

/* ── Kacheln ──────────────────────────────────────────────────────────── */
.raster { display:grid; gap:12px;
          grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

.kachel { position:relative; border:1px solid var(--border); border-radius:var(--radius);
          background:var(--surface); overflow:hidden; cursor:pointer;
          transition:var(--transition); user-select:none; }
.kachel:hover { background:var(--bg-hover); }
.kachel.gewaehlt { border-color:var(--teal); background:var(--teal-dim); }

/* ── Mehrfachauswahl: Haekchen auf Kachel UND Listen-Zeile (Rico 14.09.) ──
   Liegt immer im DOM (Muster foto-haekchen in fotos.js), sichtbar nur im
   Auswahl-Modus (`#inhalt.auswahl-modus`) — kein zweiter Code-Pfad noetig,
   wenn eine Kachel/Zeile neu gezeichnet wird. */
.kachel .haekchen { position:absolute; top:8px; left:8px; width:22px; height:22px;
                    border-radius:50%; border:2px solid var(--border);
                    background:var(--surface); display:none; z-index:1; }
.liste .haekchen { position:relative; display:none; flex:none; width:18px; height:18px;
                   border-radius:4px; border:2px solid var(--border); background:var(--surface); }
#inhalt.auswahl-modus .haekchen { display:inline-block; }
.kachel.gewaehlt .haekchen,
.liste tr.gewaehlt .haekchen { background:var(--teal); border-color:var(--teal); }
.kachel.gewaehlt .haekchen::after,
.liste tr.gewaehlt .haekchen::after {
  content:""; position:absolute; left:7px; top:3px; width:6px; height:10px;
  border:solid #062e28; border-width:0 2px 2px 0; transform:rotate(40deg);
}
.liste .haekchen::after { left:5px; top:1px; width:5px; height:9px; }

.kachel-kopf { display:flex; align-items:center; gap:8px; padding:10px 6px 10px 12px; }
.kachel-name { flex:1; font-size:.87rem; font-weight:500; white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; }
.kachel-bild { height:150px; margin:0 8px 8px; border-radius:var(--radius-sm);
               background:var(--bg-tertiary); display:grid; place-items:center;
               overflow:hidden; }
.kachel-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.kachel-bild .sinnbild { color:var(--text-muted); }

.kachel.ordner .kachel-kopf { padding:14px 12px; }
.kachel.ordner .kachel-bild { display:none; }

/* ── Datei-Typ-Sinnbilder: dezenter Farbtupfer, nicht der ganze Kachel-
   Anstrich (Rico: "das gewohnte Datei-Typ-Aussehen"). Nur das Symbol
   selbst traegt Farbe — Kachel und Zeile bleiben unveraendert. ─────────── */
.typ-symbol { display:inline-flex; flex:none; }
.typ-word          { color:var(--typ-word); }
.typ-excel         { color:var(--typ-excel); }
.typ-praesentation { color:var(--typ-praesentation); }
.typ-pdf           { color:var(--typ-pdf); }

/* ── Liste ────────────────────────────────────────────────────────────── */
.liste { width:100%; border-collapse:collapse; font-size:.88rem; }
.liste th { text-align:left; font-weight:600; color:var(--text-secondary);
            font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
            padding:8px 12px; border-bottom:1px solid var(--border); }
.liste td { padding:9px 12px; border-bottom:1px solid var(--border); }
.liste tbody tr { cursor:pointer; user-select:none; }
.liste tbody tr:hover { background:var(--bg-hover); }
.liste tbody tr.gewaehlt { background:var(--teal-dim); }
.liste .name-zelle { display:flex; align-items:center; gap:10px; }
.liste .klein { color:var(--text-secondary); white-space:nowrap; }

/* ── Suche: eigene Bilder-Gruppe unter den normalen Treffern ─────────── */
.suche-untertitel { font-size:1rem; font-weight:600; color:var(--text); margin:22px 0 10px; }
.suche-bilder { margin-top:2px; }

/* ── Leere Flaeche, Meldungen ─────────────────────────────────────────── */
.leer { text-align:center; padding:80px 20px; color:var(--text-muted); }
.leer strong { display:block; font-size:1.05rem; color:var(--text-secondary);
               margin-bottom:6px; font-weight:600; }

.meldung { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
           background:var(--surface); border:1px solid var(--border);
           border-radius:var(--radius); padding:12px 20px; box-shadow:var(--shadow-md);
           font-size:.9rem; z-index:60; }
.meldung.fehler { border-color:var(--danger); color:var(--danger); }

/* ── Menue (Neu-Knopf, rechte Maustaste) ──────────────────────────────── */
.menue { position:fixed; min-width:210px; padding:6px; z-index:70;
         background:var(--surface); border:1px solid var(--border);
         border-radius:var(--radius); box-shadow:var(--shadow-md); }
.menue button { display:flex; align-items:center; gap:12px; width:100%;
                padding:9px 12px; border:none; border-radius:var(--radius-sm);
                background:transparent; font-size:.88rem; text-align:left; cursor:pointer; }
.menue button:hover { background:var(--bg-hover); }
.menue button.gefahr { color:var(--danger); }
.menue hr { border:none; border-top:1px solid var(--border); margin:5px 4px; }

/* ── Fortschritt beim Hochladen ───────────────────────────────────────── */
.fortschritt { position:fixed; right:24px; bottom:24px; width:340px; z-index:60;
               background:var(--surface); border:1px solid var(--border);
               border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; }
.fortschritt h3 { font-size:.85rem; font-weight:600; padding:12px 14px;
                  background:var(--bg-tertiary); }
.fortschritt ul { list-style:none; max-height:220px; overflow-y:auto; }
.fortschritt li { padding:10px 14px; border-top:1px solid var(--border); font-size:.82rem; }
.fortschritt .zeile { display:flex; gap:10px; align-items:center; }
.fortschritt .zeile span:first-child { flex:1; overflow:hidden;
                                        text-overflow:ellipsis; white-space:nowrap; }
.fortschritt .balken { height:4px; border-radius:999px; background:var(--bg-tertiary);
                       margin-top:7px; overflow:hidden; }
.fortschritt .balken i { display:block; height:100%; background:var(--teal);
                         transition:width .2s ease; }
.fortschritt .fertig { color:var(--teal-darker); }
.fortschritt .kaputt { color:var(--danger); }

/* ── Ablege-Schleier beim Ziehen ──────────────────────────────────────── */
.schleier { position:absolute; inset:12px; border:2px dashed var(--teal);
            border-radius:var(--radius-lg); background:var(--teal-dim);
            display:grid; place-items:center; font-weight:600; color:var(--teal-darker);
            pointer-events:none; z-index:50; }

/* ── Dialog ───────────────────────────────────────────────────────────── */
.vorhang { position:fixed; inset:0; background:rgba(0,0,0,.4);
           display:grid; place-items:center; z-index:80; padding:20px; }
.dialog { width:100%; max-width:420px; background:var(--surface);
          border:1px solid var(--border); border-radius:var(--radius-lg);
          box-shadow:var(--shadow-md); padding:22px; }
.dialog h2 { font-size:1.1rem; font-weight:600; margin-bottom:14px; }
.dialog input, .dialog select {
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg); color:var(--text); outline:none; }
.dialog input:focus, .dialog select:focus { border-color:var(--teal); }
.dialog p { color:var(--text-secondary); font-size:.9rem; margin-bottom:14px; }
.dialog .knoepfe { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }

.knopf { padding:9px 18px; border:none; border-radius:var(--radius-sm);
         background:var(--teal); color:#062e28; font-weight:600; cursor:pointer;
         box-shadow:var(--shadow-sm); transition:var(--transition); }
.knopf:hover { background:var(--teal-dark); }
.knopf.stumm { background:transparent; color:var(--text-secondary); box-shadow:none; }
.knopf.stumm:hover { background:var(--bg-hover); color:var(--text); }
.knopf.gefahr { background:var(--danger); color:#fff; }

/* ── Vorschau-Fenster ─────────────────────────────────────────────────── */
.schau { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:90;
         display:flex; flex-direction:column; }
.schau-kopf { display:flex; align-items:center; gap:12px; padding:12px 18px;
              color:#fff; font-size:.95rem; }
.schau-kopf .rund { color:#fff; }
.schau-kopf .rund:hover { background:rgba(255,255,255,.15); }
.schau-koerper { flex:1; display:grid; place-items:center; padding:0 20px 24px;
                 overflow:auto; }
.schau-koerper img, .schau-koerper video { max-width:100%; max-height:100%;
                                            border-radius:var(--radius); }
.schau-koerper pre { width:100%; max-width:900px; max-height:100%; overflow:auto;
                     background:var(--surface); color:var(--text); padding:20px;
                     border-radius:var(--radius); font-family:var(--mono);
                     font-size:.82rem; white-space:pre-wrap; }

/* ── Fotos-Sicht (Zeitleiste) ─────────────────────────────────────────── */
.fotos-sicht { display:flex; gap:18px; align-items:flex-start; }
.fotos-inhalt { flex:1; min-width:0; display:flex; flex-direction:column; gap:24px; }
.fotos-waechter { height:1px; }

.monat-gruppe { display:flex; flex-direction:column; gap:10px; }
.monat-titel { font-size:1rem; font-weight:600; color:var(--text);
               position:sticky; top:0; background:var(--bg-secondary);
               padding:4px 0; z-index:2; }
.foto-raster { display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.foto-kachel { position:relative; aspect-ratio:1/1; border:none; padding:0;
               border-radius:var(--radius-sm); overflow:hidden;
               background:var(--bg-tertiary); cursor:pointer; }
.foto-kachel img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-kachel.ohne-vorschau { display:flex; align-items:center; justify-content:center; }
.foto-name { font-size:.72rem; color:var(--text-muted); padding:4px; text-align:center;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.foto-abspiel { position:absolute; right:6px; bottom:6px; color:#fff;
                text-shadow:0 1px 3px rgba(0,0,0,.6); font-size:.9rem; pointer-events:none; }

.fotos-jahre { position:sticky; top:12px; align-self:flex-start; display:flex;
               flex-direction:column; gap:3px; flex:none; width:auto;
               max-height:calc(100vh - var(--nevim-kopf, 56px) - 40px);
               overflow-y:auto; scrollbar-width:none;
               padding:8px 5px; border:1px solid var(--border); border-radius:999px;
               background:var(--surface);
               background:color-mix(in srgb, var(--surface) 68%, transparent);
               -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
               box-shadow:var(--shadow-sm); }
.fotos-jahre::-webkit-scrollbar { display:none; }
.fotos-jahre button { border:none; background:transparent; color:var(--text-secondary);
                      font-size:.74rem; font-weight:600; min-width:32px;
                      padding:5px 7px; border-radius:999px;
                      cursor:pointer; text-align:center; transition:var(--transition); }
.fotos-jahre button:hover { background:var(--bg-hover); color:var(--text); }
.fotos-jahre button:active { background:var(--teal-dim); color:var(--teal-darker); }
.fotos-jahre button.aktuell { background:var(--teal-dim); color:var(--teal-darker); font-weight:700; }

/* ── Karte-Sicht ──────────────────────────────────────────────────────── */
.foto-karte-rahmen { position:relative; height:calc(100vh - var(--nevim-kopf, 56px) - 100px);
                     border-radius:var(--radius); overflow:hidden; }
.foto-karte-flaeche { width:100%; height:100%; }
.foto-marke img { width:40px; height:40px; border-radius:50%; object-fit:cover;
                  border:2px solid var(--surface); box-shadow:var(--shadow-md); }
.foto-cluster div { background:var(--teal); color:#062e28; border-radius:50%;
                    text-align:center; font-weight:700; font-size:.82rem;
                    box-shadow:var(--shadow-md); border:2px solid var(--surface); }
.foto-streifen { position:absolute; left:0; right:0; bottom:0; display:flex; gap:8px;
                 padding:10px; background:rgba(0,0,0,.55); overflow-x:auto; align-items:center; }
.foto-streifen-bild { flex:none; width:64px; height:64px; border:none; padding:0;
                      border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; }
.foto-streifen-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-streifen-zu { margin-left:auto; flex:none; color:#fff; }
.foto-streifen-zu:hover { background:rgba(255,255,255,.15); }

/* ── Leuchtkasten (Fotos gross ansehen, Fotos- und Karte-Sicht teilen ihn) */
.leuchtkasten { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:95;
                display:flex; flex-direction:column; }
.leuchtkasten .lk-zu { position:absolute; top:12px; right:12px; color:#fff; z-index:2; }
.leuchtkasten .lk-zu:hover { background:rgba(255,255,255,.15); }
.lk-zurueck, .lk-vor { position:absolute; top:50%; transform:translateY(-50%); color:#fff;
                       width:48px; height:48px; font-size:1.6rem; z-index:2; }
.lk-zurueck { left:12px; }
.lk-vor { right:12px; }
.lk-zurueck:hover, .lk-vor:hover { background:rgba(255,255,255,.15); }
.lk-buehne { flex:1; display:grid; place-items:center; padding:60px 70px 20px; overflow:hidden; }
.lk-buehne img, .lk-buehne video { max-width:100%; max-height:100%; border-radius:var(--radius); }
.lk-zeile { display:flex; align-items:center; gap:14px; padding:14px 20px; color:#fff;
            font-size:.86rem; flex-wrap:wrap; }
.lk-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.lk-info { color:rgba(255,255,255,.75); }
.lk-knoepfe { margin-left:auto; display:flex; gap:8px; }
.lk-knoepfe button { padding:8px 14px; border:none; border-radius:var(--radius-sm);
                     background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.lk-knoepfe button:hover { background:rgba(255,255,255,.22); }
.lk-knoepfe button:disabled { opacity:.6; cursor:default; }

/* "Ähnliche"-Streifen: eigener Kachelstreifen unter der Buehne, gleiches
   Klick-Verhalten wie der Kachelstreifen der Karte (foto-karte.js). */
.lk-aehnliche { display:flex; gap:8px; padding:0 20px 12px; overflow-x:auto; }
.lk-aehnliche button { flex:none; width:56px; height:56px; border:none; padding:0;
                       border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
                       opacity:.85; transition:var(--transition); }
.lk-aehnliche button:hover { opacity:1; }
.lk-aehnliche img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Aufraeum-Ansicht (Fotos, Vollflaeche) ────────────────────────────── */
.aufraeumen-ansicht { position:fixed; inset:0; z-index:92; background:var(--bg-secondary);
                      display:flex; flex-direction:column; }
.aufraeumen-kopf { display:flex; align-items:center; gap:12px; padding:14px 20px;
                   background:var(--surface); border-bottom:1px solid var(--border);
                   color:var(--text); font-size:1.05rem; flex:0 0 auto; }
.aufraeumen-kopf strong { flex:1; }
.aufraeumen-raster { flex:1; overflow-y:auto; padding:20px 24px 40px; align-content:start;
                     display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.aufraeumen-kachel { border:1px solid var(--border); border-radius:var(--radius);
                     background:var(--surface); overflow:hidden; display:flex; flex-direction:column; }
.aufraeumen-bild { aspect-ratio:1/1; background:var(--bg-tertiary); overflow:hidden; }
.aufraeumen-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.aufraeumen-grund { padding:8px 10px 0; font-size:.82rem; color:var(--text-secondary); }
.aufraeumen-knoepfe { display:flex; gap:8px; padding:10px; margin-top:auto; }
.aufraeumen-knoepfe .knopf { flex:1; padding:8px 10px; font-size:.85rem; box-shadow:none; }

/* ── Duplikate-Ansicht (Fotos, Vollflaeche, gruppiert) ────────────────── */
.duplikate-ansicht { position:fixed; inset:0; z-index:92; background:var(--bg-secondary);
                     display:flex; flex-direction:column; }
.duplikate-kopf { display:flex; align-items:center; gap:12px; padding:14px 20px;
                  background:var(--surface); border-bottom:1px solid var(--border);
                  color:var(--text); font-size:1.05rem; flex:0 0 auto; }
.duplikate-kopf-info { flex:1; font-size:.85rem; font-weight:400; color:var(--text-secondary); }
.duplikate-raster { flex:1; overflow-y:auto; padding:20px 24px 40px;
                    display:flex; flex-direction:column; gap:26px; }

.dup-gruppe { display:flex; flex-direction:column; gap:10px; }
.dup-gruppe-kopf { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.dup-etikett { font-weight:600; padding:3px 10px; border-radius:999px;
               background:var(--teal-dim); color:var(--teal-darker); }
.dup-einsparung { color:var(--text-secondary); }

.dup-kacheln { display:flex; flex-wrap:wrap; gap:12px; }
.dup-kachel { position:relative; flex:0 0 200px; width:200px; display:flex; flex-direction:column;
              border:1px solid var(--border); border-radius:var(--radius);
              background:var(--surface); overflow:hidden; }
.dup-kachel--vorschlag { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset; }
.dup-vorschau { border:none; padding:0; margin:0; cursor:pointer; aspect-ratio:1/1;
                background:var(--bg-tertiary); }
.dup-vorschau img { width:100%; height:100%; object-fit:cover; display:block; }
.dup-abzeichen { position:absolute; top:6px; left:6px; background:var(--teal); color:#062e28;
                 font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:999px; }
.dup-name { padding:8px 10px 0; font-size:.83rem; font-weight:500;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dup-meta { padding:2px 10px 0; font-size:.76rem; color:var(--text-secondary); }
.dup-knoepfe { display:flex; flex-wrap:wrap; gap:6px; padding:10px; margin-top:auto; }
.dup-knoepfe .knopf { flex:1; min-width:64px; padding:7px 8px; font-size:.76rem; box-shadow:none; }

/* ── Auswahl-Modus in der Fotos-Zeitleiste ────────────────────────────── */
.auswaehlen-knopf { padding:7px 16px; border:1px solid var(--border); border-radius:999px;
                    background:var(--surface); color:var(--text); font-size:.85rem;
                    font-weight:600; cursor:pointer; transition:var(--transition); }
.auswaehlen-knopf:hover { background:var(--bg-hover); }

.auswahl-leiste { display:flex; align-items:center; gap:4px; padding:4px 4px 4px 12px;
                  background:var(--teal-dim); border-radius:999px; flex-wrap:wrap; }
.auswahl-anzahl { font-size:.85rem; font-weight:600; color:var(--teal-darker); white-space:nowrap; }

/* Haekchen sitzt immer im DOM (siehe fotos.js), sichtbar nur im Auswahl-
   Modus — so muss beim Kachel-Recycling nichts Zusaetzliches passieren. */
.foto-haekchen { position:absolute; top:6px; left:6px; width:22px; height:22px;
                 border-radius:50%; border:2px solid rgba(255,255,255,.85);
                 background:rgba(0,0,0,.25); display:none; z-index:1; }
.auswahl-modus .foto-kachel { cursor:pointer; }
.auswahl-modus .foto-haekchen { display:block; }
.foto-kachel.ausgewaehlt { box-shadow:0 0 0 3px var(--teal) inset; }
.foto-kachel.ausgewaehlt .foto-haekchen {
  background:var(--teal); border-color:var(--teal);
}
.foto-kachel.ausgewaehlt .foto-haekchen::after {
  content:""; position:absolute; left:6px; top:3px; width:7px; height:11px;
  border:solid #062e28; border-width:0 2px 2px 0; transform:rotate(40deg);
}

/* ── "Heute vor N Jahren" — Streifen oben in der Fotos-Sicht ─────────── */
.fotos-erinnerungen { display:flex; flex-direction:column; gap:8px; }
.erinnerungen-kopf { display:flex; align-items:center; gap:8px; width:100%;
                     border:none; background:transparent; color:var(--text);
                     font-size:.95rem; font-weight:600; text-align:left;
                     padding:2px 0; cursor:pointer; }
.erinnerungen-pfeil { transition:transform .15s ease; color:var(--text-secondary); }
.fotos-erinnerungen.zu .erinnerungen-pfeil { transform:rotate(-90deg); }
.fotos-erinnerungen.zu .erinnerungen-reihe { display:none; }
.erinnerungen-reihe { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.erinnerungen-kachel { flex:none; width:140px; height:140px; border:none; padding:0;
                       border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
                       background:var(--bg-tertiary); }
.erinnerungen-kachel img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Alben-Uebersicht ─────────────────────────────────────────────────── */
.alben-raster { display:grid; gap:14px;
                grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.alben-kachel { border:1px solid var(--border); border-radius:var(--radius);
                background:var(--surface); overflow:hidden; cursor:pointer;
                text-align:left; transition:var(--transition); }
.alben-kachel:hover { background:var(--bg-hover); }
.alben-kachel-bild { height:130px; background:var(--bg-tertiary); display:grid;
                     place-items:center; overflow:hidden; }
.alben-kachel-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.alben-kachel-platzhalter { width:100%; height:100%; background:var(--bg-tertiary); display:block; }
.alben-kachel-info { display:flex; flex-direction:column; gap:2px; padding:10px 12px; }
.alben-kachel-name { font-size:.9rem; font-weight:600; white-space:nowrap;
                     overflow:hidden; text-overflow:ellipsis; }
.alben-kachel-anzahl { font-size:.78rem; color:var(--text-secondary); }
.alben-kachel--neu { display:flex; flex-direction:column; align-items:center;
                     justify-content:center; gap:8px; min-height:186px;
                     border-style:dashed; color:var(--text-secondary); font-weight:600; }
.alben-kachel--neu:hover { color:var(--text); border-color:var(--teal); }
.alben-kachel-plus { font-size:1.8rem; line-height:1; color:var(--teal); }
.alben-leer { grid-column:1 / -1; }

/* ── Album-Ansicht ────────────────────────────────────────────────────── */
.alben-detail-kopf { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.alben-detail-name { font-size:1.2rem; font-weight:600; cursor:pointer;
                     border-radius:var(--radius-sm); padding:2px 6px; margin-left:2px; }
.alben-detail-name:hover { background:var(--bg-hover); }
.alben-detail-knoepfe { display:flex; gap:8px; margin-left:auto; }
.alben-eintrag-kachel { position:relative; background:var(--bg-tertiary); }
.alben-eintrag-bild { position:absolute; inset:0; width:100%; height:100%; border:none;
                      padding:0; cursor:pointer; background:transparent; }
.alben-eintrag-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.alben-eintrag-punkte { position:absolute; top:6px; right:6px; z-index:1;
                        background:rgba(0,0,0,.35); color:#fff; }
.alben-eintrag-punkte:hover { background:rgba(0,0,0,.55); }

/* ── Teilen-Dialog ────────────────────────────────────────────────────── */
.teilen-hinweis { color:var(--text-secondary); font-size:.85rem; margin-bottom:14px; }
.teilen-neu { display:flex; gap:8px; margin-bottom:16px; }
.teilen-neu select { flex:1; }
.teilen-liste { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.teilen-zeile { display:flex; align-items:center; gap:6px; padding:8px 4px;
               border-bottom:1px solid var(--border); }
.teilen-zeile-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.teilen-zeile-adresse { font-size:.8rem; font-family:var(--mono); overflow:hidden;
                        text-overflow:ellipsis; white-space:nowrap; }
.teilen-zeile-meta { font-size:.76rem; color:var(--text-secondary); }
.album-waehlen-liste { display:flex; flex-direction:column; gap:2px; max-height:240px;
                       overflow-y:auto; margin-bottom:6px; }
.album-waehlen-liste .weg { border-radius:var(--radius-sm); }
.leer-klein { padding:14px; color:var(--text-muted); font-size:.85rem; text-align:center; }

/* ── Einstellungen-Sicht (Rico 14.09.) ─────────────────────────────────
   Ein zentraler Ort fuer alles, was den Nutzer im Drive selbst betrifft:
   Karten-Optik, eine je Thema. Die Schalter sind bewusst dieselbe Klasse
   wie der frueher hier stehende KI-Schalter (`.ki-schalter`, siehe oben) —
   optisch derselbe Baustein, egal ob KI oder Erinnerungen umgeschaltet
   werden. ─────────────────────────────────────────────────────────────── */
.einstellungen-sicht { display:flex; flex-direction:column; gap:14px; max-width:640px; }
.einst-karte { display:flex; align-items:center; justify-content:space-between; gap:16px;
               flex-wrap:wrap; padding:18px 20px; border:1px solid var(--border);
               border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.einst-karte--spalte { flex-direction:column; align-items:stretch; }
.einst-karte-kopf h2 { font-size:1rem; font-weight:600; margin-bottom:4px; color:var(--text); }
.einst-karte-kopf p { font-size:.85rem; color:var(--text-secondary); }

.einst-platz-balken { height:8px; border-radius:999px; background:var(--bg-tertiary);
                      overflow:hidden; margin-top:14px; }
.einst-platz-balken i { display:block; height:100%; background:var(--teal);
                        border-radius:999px; transition:width .3s ease; }
.einst-platz-text { margin-top:8px; font-size:.85rem; color:var(--text-secondary); }

.einst-stufen { display:flex; gap:8px; margin-top:14px; }
.einst-stufe { flex:1; padding:9px 10px; border:1px solid var(--border); border-radius:999px;
               background:var(--bg-tertiary); color:var(--text-secondary); font-size:.85rem;
               font-weight:600; cursor:pointer; text-align:center; transition:var(--transition); }
.einst-stufe:hover { background:var(--bg-hover); color:var(--text); }
.einst-stufe.aktuell { background:var(--teal-dim); color:var(--teal-darker); border-color:var(--teal); }

.einst-google-knoepfe { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.einst-google-knoepfe button:disabled { opacity:.6; cursor:default; }
.einst-google-anfrage { display:flex; flex-direction:column; gap:4px; }
.einst-google-hinweis-klein { font-size:.78rem; color:var(--text-secondary); }
.einst-google-hinweis { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                        margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm);
                        background:var(--bg-tertiary); font-size:.85rem; color:var(--text-secondary); }
.einst-google-hinweis .knopf { padding:6px 12px; font-size:.82rem; }
.einst-google-fortschritt { margin-top:10px; font-size:.85rem; color:var(--text-secondary); }

/* ── Dokument bearbeiten ──────────────────────────────────────────────
   Der Editor bringt seine eigene Oberflaeche mit; hier steht nur der
   Rahmen darum. Farben aus der Vorlage, hell UND dunkel — der Editor
   selbst bekommt sein Thema ueber die Konfiguration mitgeteilt. */
.editor-rahmen { position:fixed; inset:0; z-index:95; display:flex;
                 flex-direction:column; background:var(--bg-secondary); }
.editor-kopf { display:flex; align-items:center; gap:12px; padding:8px 14px;
               background:var(--surface); border-bottom:1px solid var(--border);
               color:var(--text); font-size:.95rem; flex:0 0 auto; }
.editor-name { font-weight:600; overflow:hidden; text-overflow:ellipsis;
               white-space:nowrap; }
.editor-flaeche { flex:1; min-height:0; display:grid; place-items:stretch;
                  color:var(--text-secondary); }
/* Der Editor haengt sich in dieses Feld und will die volle Hoehe. */
.editor-flaeche > div { width:100%; height:100%; }
.editor-flaeche iframe { border:0; width:100%; height:100%; }


/* ── Der harte Tresor (D-030) ──────────────────────────────────────────
   Eigene Farbwelt (--tresor), damit sofort sichtbar ist: hier gelten
   andere Regeln als im uebrigen Drive. Alles hell UND dunkel. */
.weg-tresor.aktiv { background:var(--tresor-dim); color:var(--tresor); }
.weg-tresor.aktiv svg { color:var(--tresor); }

.tresor-sicht { display:flex; flex-direction:column; gap:14px; max-width:760px; }

.tresor-karte { background:var(--surface); border:1px solid var(--border);
                border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); }
.tresor-karte--gross { max-width:520px; }
.tresor-karte h2 { font-size:1.05rem; font-weight:600; margin-bottom:8px; color:var(--text); }
.tresor-karte p { font-size:.9rem; color:var(--text-secondary); margin-bottom:12px; }
.tresor-schloss { color:var(--tresor); margin-bottom:10px; }

.tresor-feld { display:block; margin-bottom:14px; }
.tresor-feld > span { display:block; font-size:.85rem; font-weight:600;
                      color:var(--text); margin-bottom:5px; }
.tresor-feld input { width:100%; padding:10px 12px; border:1px solid var(--border);
                     border-radius:var(--radius-sm); background:var(--bg-tertiary);
                     color:var(--text); outline:none; }
.tresor-feld input:focus { border-color:var(--tresor); background:var(--surface); }
.tresor-feld small { display:block; margin-top:5px; font-size:.78rem; color:var(--text-secondary); }
.tresor-code-feld { font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }

.tresor-knoepfe { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; flex-wrap:wrap; }
.tresor-knoepfe--links { justify-content:flex-start; margin-top:10px; }
.tresor-knoepfe .knopf { background:var(--tresor); }
.tresor-knoepfe .knopf:hover { filter:brightness(1.08); }
.tresor-knoepfe .knopf.stumm { background:transparent; color:var(--text-secondary); }
.tresor-knoepfe .knopf.stumm:hover { background:var(--bg-hover); color:var(--text); }
.tresor-knoepfe .knopf:disabled { opacity:.5; cursor:default; filter:none; }

/* Die harte Warnung beim Anlegen — sie darf NICHT aussehen wie ein
   beilaeufiger Hinweis. */
.tresor-warnung { border-color:var(--danger); }
.tresor-warnung h2 { color:var(--danger); }
.tresor-warnung-stark { color:var(--text) !important; font-size:.95rem !important;
                        font-weight:500; line-height:1.55; }

.tresor-haken { display:flex; align-items:flex-start; gap:10px; margin-top:6px;
                padding:12px 14px; border-radius:var(--radius-sm);
                background:var(--bg-tertiary); cursor:pointer; }
.tresor-haken input { margin-top:2px; flex:none; width:17px; height:17px;
                      accent-color:var(--tresor); }
.tresor-haken span { font-size:.88rem; color:var(--text); }

.tresor-code { font-family:var(--mono); font-size:1.25rem; letter-spacing:.09em;
               text-align:center; padding:18px 12px; margin:6px 0 12px;
               border:2px dashed var(--tresor-rand); border-radius:var(--radius);
               background:var(--tresor-dim); color:var(--text); user-select:all;
               word-break:break-all; }
.tresor-rat { font-size:.85rem; color:var(--text-secondary); }

.tresor-meldung { padding:10px 14px; border-radius:var(--radius-sm);
                  background:var(--tresor-dim); color:var(--text); font-size:.88rem; }
.tresor-meldung.fehler { background:var(--teal-dim); color:var(--danger); }

/* ── Der offene Tresor ───────────────────────────────────────────────── */
.tresor-kopf { display:flex; align-items:center; justify-content:space-between;
               gap:12px; flex-wrap:wrap; }
.tresor-kopf-links { display:flex; align-items:center; gap:10px; min-width:0; }
.tresor-kopf-rechts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tresor-kopf-rechts .knopf { background:var(--tresor); }
.tresor-kopf-rechts .knopf.stumm { background:transparent; color:var(--text-secondary); }
.tresor-kopf-rechts .knopf.stumm:hover { background:var(--bg-hover); color:var(--text); }
.tresor-auf { color:var(--tresor); display:flex; }
.tresor-krumen { display:flex; align-items:center; gap:5px; font-size:.95rem;
                 color:var(--text-secondary); overflow:hidden; }
.tresor-krume { border:none; background:none; color:var(--text-secondary);
                cursor:pointer; padding:2px 4px; border-radius:var(--radius-sm);
                max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tresor-krume:hover { background:var(--bg-hover); color:var(--text); }
.tresor-krumen button:last-child { color:var(--text); font-weight:600; }

/* Der sichtbare Unterschied: dieser Kasten steht ueber JEDER Liste im
   Tresor und sagt in einem Satz, was hier anders ist. */
.tresor-blind { display:flex; align-items:center; gap:10px;
                padding:11px 14px; border-radius:var(--radius);
                background:var(--tresor-dim); border:1px solid var(--tresor-rand);
                color:var(--text); font-size:.86rem; }
.tresor-blind svg { color:var(--tresor); flex:none; width:22px; height:22px; }

.tresor-liste { list-style:none; display:flex; flex-direction:column; gap:2px; }
.tresor-zeile { display:flex; align-items:center; gap:6px; border-radius:var(--radius-sm);
                transition:var(--transition); }
.tresor-zeile:hover { background:var(--bg-hover); }
.tresor-zeile-haupt { flex:1; min-width:0; display:flex; align-items:center; gap:12px;
                      padding:10px 12px; border:none; background:none; cursor:pointer;
                      color:var(--text); text-align:left; font-size:.93rem; }
.tresor-sym { color:var(--tresor); display:flex; flex:none; }
.tresor-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tresor-groesse { flex:none; font-size:.82rem; color:var(--text-secondary); }
.tresor-zeile-werkzeug { display:flex; gap:2px; opacity:0; transition:var(--transition); }
.tresor-zeile:hover .tresor-zeile-werkzeug,
.tresor-zeile:focus-within .tresor-zeile-werkzeug { opacity:1; }
.tresor-zeile-werkzeug .rund { width:34px; height:34px; }
.tresor-zeile-werkzeug .rund.gefahr:hover { color:var(--danger); }
.tresor-leer { padding:34px 8px; text-align:center; color:var(--text-secondary); font-size:.92rem; }

.tresor-fuss { display:flex; align-items:center; justify-content:space-between;
               gap:10px; padding-top:6px; border-top:1px solid var(--border);
               font-size:.84rem; color:var(--text-secondary); flex-wrap:wrap; }
.tresor-link { border:none; background:none; color:var(--tresor); cursor:pointer;
               font-size:.85rem; padding:4px 0; text-decoration:underline;
               text-underline-offset:3px; }

/* ── Die ehrliche Grenze ─────────────────────────────────────────────── */
.tresor-grenze { border-top:1px solid var(--border); padding-top:12px; }
.tresor-grenze-text { margin-top:10px; padding:14px 16px; border-radius:var(--radius);
                      background:var(--bg-tertiary); }
.tresor-grenze-text h3 { font-size:.92rem; font-weight:600; color:var(--text);
                         margin-bottom:8px; }
.tresor-grenze-text p { font-size:.85rem; color:var(--text-secondary);
                        line-height:1.6; margin-bottom:9px; }
.tresor-grenze-text p:last-child { margin-bottom:0; }

.tresor-verwalten { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.tresor-verwalten .knopf { width:100%; }
.tresor-dialog-fehler { color:var(--danger) !important; font-size:.85rem; min-height:1.2em; }

/* ── Handy ────────────────────────────────────────────────────────────── */
.schublade-knopf { display:none; }
@media (max-width:860px) {
  .rahmen { grid-template-columns:1fr; grid-template-areas:"kopf" "flaeche"; }
  .marke { width:auto; }
  .marke .schrift { display:none; }
  .schublade-knopf { display:grid; }
  .leiste { position:fixed; top:var(--nevim-kopf, 56px); bottom:0; left:0; width:280px; z-index:55;
            transform:translateX(-100%); transition:transform .2s ease;
            box-shadow:var(--shadow-md); }
  .leiste.offen { transform:none; }
  .flaeche { padding:16px 14px 40px; }
  .raster { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .fortschritt { right:12px; left:12px; width:auto; }

  /* Fotos/Karte auf dem Handy: Jahresleiste waagerecht statt einer
     schmalen Spalte, sonst frisst sie ein Drittel des schmalen Bildschirms.
     Sie klebt (sticky) oben unter der Werkzeugleiste und ist zum Wischen
     gedacht — nicht zum Umbrechen. */
  .fotos-sicht { flex-direction:column; gap:10px; }
  .fotos-jahre { position:sticky; top:0; z-index:4; align-self:stretch;
                 flex-direction:row; flex-wrap:nowrap; width:auto; max-height:none;
                 overflow-x:auto; overflow-y:hidden;
                 border-radius:0; border:none; border-bottom:1px solid var(--border);
                 padding:8px 4px; }
  .fotos-jahre button { flex:none; }
  .foto-raster { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .foto-karte-rahmen { height:calc(100vh - var(--nevim-kopf, 56px) - 60px); }
  .lk-buehne { padding:56px 14px 10px; }
  .lk-zurueck, .lk-vor { width:40px; height:40px; }
  .lk-name { max-width:140px; }
  .lk-aehnliche { padding:0 14px 10px; }

  /* KI-Schalter + Aufraeumen-Knopf: auf dem Handy enger, der Knopftext
     bleibt lesbar statt auf ein Sinnbild zu schrumpfen. */
  .fotos-werkzeuge-ziel { gap:6px; }
  .ki-schalter { padding:5px 6px; }
  .aufraeumen-knopf { padding:6px 11px; font-size:.8rem; }

  .aufraeumen-kopf { padding:10px 14px; }
  .aufraeumen-raster { padding:14px; gap:10px;
                       grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }

  /* Duplikate: Gruppen-Kacheln werden auf dem Handy zur wischbaren Reihe
     statt zu umbrechen — sonst zerreisst es den Vergleich in der Gruppe. */
  .duplikate-knopf { padding:6px 11px; font-size:.8rem; }
  .duplikate-kopf { padding:10px 14px; }
  .duplikate-raster { padding:14px; gap:18px; }
  .dup-kacheln { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .dup-kachel { flex:0 0 160px; width:160px; }

  /* Auswahl-Kopfleiste: auf dem Handy voller Zeilenbreite statt einer
     schmalen Pille, sonst quetschen sich Zahl + zwei Knoepfe zusammen. */
  .auswahl-leiste { width:100%; justify-content:space-between; padding:6px 6px 6px 14px; }
  .auswaehlen-knopf { padding:6px 11px; font-size:.8rem; }

  /* Mehrfachauswahl-Kopfleiste der ABLAGE (nicht Fotos, siehe oben): auf
     dem Handy als untere Leiste in Daumen-Naehe statt oben in der schmalen
     Kopf-Zeile (Auftrag Rico 14.09.). */
  .werkzeuge { position:fixed; left:10px; right:10px; bottom:10px; z-index:40;
               justify-content:space-between; padding:8px 10px;
               box-shadow:var(--shadow-md); flex-wrap:wrap; }
  .werkzeuge .anzahl { padding:0 4px; }

  /* Alben-Raster: schmalere Mindestbreite wie das Ordner-Raster. */
  .alben-raster { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .alben-detail-kopf { gap:8px; }
  .alben-detail-knoepfe { margin-left:0; width:100%; }
  .alben-detail-knoepfe .knopf { flex:1; }

  /* "Heute vor N Jahren": kleinere Kacheln, bleibt eine wischbare Reihe. */
  .erinnerungen-kachel { width:104px; height:104px; }

  /* Einstellungen-Karten: etwas knapper, damit sie auf dem schmalen
     Bildschirm nicht zu viel Platz fressen. */
  .einst-karte { padding:14px 16px; }

  /* Tresor: Karten knapper, Werkzeuge immer sichtbar (kein Schweben auf
     dem Telefon), Notfall-Code kleiner, damit er in eine Zeile passt. */
  .tresor-karte { padding:16px 16px; }
  .tresor-kopf-rechts { width:100%; }
  .tresor-kopf-rechts .knopf { flex:1; }
  .tresor-zeile-werkzeug { opacity:1; }
  .tresor-code { font-size:1rem; letter-spacing:.05em; padding:14px 8px; }
}