/* desktop.css: der Desktop und die Hülle je Mensch (16.10.2026).

   Ein Reiter auf dem Desktop ist ein Raster aus acht Spalten; jedes Widget steht mit seiner Lage darin
   (desktop.js setzt grid-column und grid-row). Die Zeilenhöhe folgt der Dichte, die der Mensch wählt. Unter 700 Pixeln
   stapeln die Widgets in der Reihenfolge des Rasters. Farben nur aus den Variablen von app.css. */

.dkFlaeche { --dkZeile: 72px; --dkLuecke: 10px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: var(--dkZeile);
  gap: var(--dkLuecke); margin-bottom: 0; flex: none; position: relative; }
body[data-dichte="eng"] .dkFlaeche { --dkZeile: 56px; --dkLuecke: 8px; }
body[data-dichte="luftig"] .dkFlaeche { --dkZeile: 92px; --dkLuecke: 14px; }
.dkFlaeche > .wgKachel { height: auto; min-height: 0; grid-column: auto; }
.dkFlaeche > .wgKachel .wgLeib { min-height: 0; overflow: hidden; }   /* keine Scrollbalken (Flow, 17.10.2026) */

.dkFlaeche.dkStill { display: none; }
[data-dk-bearbeiten] .dkFlaeche.dkStill { display: grid; }
/* Größenklassen: was ein Widget in welcher Größe zeigt. Kleine Widgets sparen Kopf und Rand. */
.dkFlaeche > .wgKachel[data-klasse="punkt"] .wgKopf { padding-top: 4px; padding-bottom: 2px; font-size: 12px; }
.dkFlaeche > .wgKachel[data-klasse="punkt"] .wgLeib { padding: 2px 8px 6px; }
.dkFlaeche [data-angabe-aus] { display: none !important; }
/* Beim Anpassen bleibt die Titelzeile, auch abgewählt: an ihr wird gezogen. */
[data-dk-bearbeiten] .dkFlaeche > .wgKachel > .wgKopf[data-angabe-aus] { display: flex !important; opacity: .55; }
/* Die Zahl wächst mit dem Widget: Ein Zähler auf 4×4 füllt seine Fläche. */
.dkFlaeche > .wgKachel .wgLeib { container-type: size; }
.dkFlaeche .wzZahl .zkWert { font-size: clamp(22px, min(45cqh, 28cqw), 160px); line-height: 1; }
.dkFlaeche > .wgKachel[data-klasse="punkt"] .wzZahl .zkWert { font-size: clamp(16px, min(60cqh, 30cqw), 40px); }
.dkFlaeche .wzZahl .zkWert.wzWort { font-size: clamp(15px, min(24cqh, 12cqw), 64px); line-height: 1.1;
  overflow-wrap: anywhere; }
/* Listen: in der kleinsten Klasse nur die Anzahl, ein Tipp hebt das Widget als Fenster über die Seite. */
.dkKurz { display: none; font-size: clamp(18px, 50cqh, 40px); font-weight: 700; color: var(--kopf); }
.dkFlaeche > .wgKachel[data-klasse="punkt"] .dkKurz { display: block; }
.dkFlaeche > .wgKachel[data-klasse="punkt"] .wzListe, .dkFlaeche > .wgKachel[data-klasse="punkt"] .wsStrom,
.dkFlaeche > .wgKachel[data-klasse="punkt"] .wzMehr { display: none; }

/* Eigene Widgets: Notiz und Uhr. */
.dkNotiz { white-space: pre-wrap; line-height: 1.45; font-size: 14px; color: var(--text); }
.dkNotiz.leer { color: var(--dim); }
.dkNotizFeld { width: 100%; height: 100%; min-height: 60px; resize: none; border: 1px dashed var(--linie);
  border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 14px; padding: 6px;
  scrollbar-width: none; box-sizing: border-box; }
.dkUhr { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.dkUhrZeit { font-size: clamp(18px, 4vw, 48px); font-weight: 700; color: var(--kopf);
  font-variant-numeric: tabular-nums; }
.dkUhrTag { font-size: 13px; color: var(--dim); }
.wgKachel[data-klasse="punkt"] .dkUhrTag { display: none; }
.dkMarkeEigen { font-size: 10.5px; color: var(--dim); margin-left: 6px; white-space: nowrap; flex: none; }
/* Schmal: statt „nur für dich“ ein Punkt, das Wort steht im Hinweis; der Titel behält seinen Platz. */
.dkFlaeche > .wgKachel:is([data-klasse="punkt"], [data-klasse="klein"]) .dkMarkeEigen { font-size: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold); margin-left: 6px; }
@media (max-width: 700px) { .dkFlaeche > .wgKachel .dkMarkeEigen { font-size: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); } }

/* Anpassen: Raster sichtbar, Griffe an den Widgets. */
[data-dk-bearbeiten] .dkFlaeche {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--gold) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--gold) 14%, transparent) 1px, transparent 1px);
  background-size: calc((100% + var(--dkLuecke)) / 8) calc(var(--dkZeile) + var(--dkLuecke));
  min-height: calc(8 * (var(--dkZeile) + var(--dkLuecke))); }
[data-dk-bearbeiten] .dkFlaeche > .wgKachel { outline: 1px dashed var(--gold); outline-offset: -1px; }
[data-dk-bearbeiten] .dkFlaeche > .wgKachel .wgKopf { cursor: grab; touch-action: none; }
[data-dk-bearbeiten] .dkFlaeche > .wgKachel .wgLeib { pointer-events: none; }
[data-dk-bearbeiten] .dkFlaeche > .wgKachel.dkZieht { opacity: .85; z-index: 3; box-shadow: var(--schatten); }
.dkGriff { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize;
  touch-action: none; z-index: 2; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
  border-bottom-right-radius: 6px; }
.dkFlaeche > .wgKachel { position: relative; }
.dkMehrKnopf { margin-left: auto; border: 1px solid var(--linie); background: var(--panel); color: var(--text);
  border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; cursor: pointer; min-height: 24px; }
.dkLeiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px;
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--rundKlein, 8px); background: var(--zeile); }
.dkLeiste .dkHinweis { flex: 1 1 260px; font-size: 13px; color: var(--dim); }
.dkLeiste button, .dkMenue button, .dkHuelle button { border: 1px solid var(--linie); background: var(--panel);
  color: var(--text); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer;
  min-height: 32px; }
.dkLeiste button.haupt, .dkHuelle button.gewaehlt, .dkMenue button.gewaehlt { border-color: var(--gold);
  color: var(--goldText); font-weight: 600; }
.dkMeldung { font-size: 13px; color: var(--dim); }
.dkMeldung.fehler { color: var(--rot, #c0392b); }

/* Das Menü an einem Widget und die Palette „Hinzufügen“: ein schwebendes Feld. */
.dkMenue { position: fixed; z-index: 70; min-width: 220px; max-width: min(92vw, 340px); max-height: 70vh;
  overflow-y: auto; padding: 10px; border: 1px solid var(--linie); border-radius: var(--rund, 12px);
  background: var(--panel); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 8px; }
.dkMenue h4 { margin: 4px 0 0; font-size: 12px; color: var(--dim); font-weight: 600; }
.dkGroessen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dkGroessen button { padding: 4px; font-size: 12px; min-height: 28px; }
.dkAngabe { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* Einrichten der Hülle: ein Dialog in der Mitte. */
.dkHuelle { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(8, 6, 3, .45); }
.dkHuelleKarte { width: min(94vw, 460px); padding: 18px; border-radius: var(--rund, 12px); background: var(--panel);
  border: 1px solid var(--linie); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 14px; }
.dkHuelleKarte h3 { margin: 0; font-size: 17px; color: var(--kopf); }
.dkHuelleKarte p { margin: 0; font-size: 13.5px; color: var(--dim); }
.dkWahl { display: flex; flex-wrap: wrap; gap: 6px; }
.dkZeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }

/* --- Das Menü an einem anderen Rand (nur am Schreibtisch; darunter bleibt die Schublade) --------------------- */
@media (min-width: 901px) {
  body[data-menuerand="rechts"] #rumpf { flex-direction: row-reverse; }
  body[data-menuerand="rechts"] #seitenmenue { border-right: 0; border-left: 1px solid var(--linie); }
  body[data-menuerand="oben"] #rumpf { flex-direction: column; }
  body[data-menuerand="unten"] #rumpf { flex-direction: column-reverse; }
  body[data-menuerand="oben"] #seitenmenue, body[data-menuerand="unten"] #seitenmenue {
    width: auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 14px; overflow: visible;
    border-right: 0; }
  body[data-menuerand="oben"] #seitenmenue { border-bottom: 1px solid var(--linie); }
  body[data-menuerand="unten"] #seitenmenue { border-top: 1px solid var(--linie); }
  body[data-menuerand="oben"] .mkopf, body[data-menuerand="unten"] .mkopf { margin: 0; flex: none; }
  body[data-menuerand="oben"] #projektWahl, body[data-menuerand="unten"] #projektWahl {
    width: auto; max-width: 220px; margin: 0; flex: none; }
  body[data-menuerand="oben"] .navFlach, body[data-menuerand="unten"] .navFlach {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
  body[data-menuerand="oben"] .navFlach .navKnopf, body[data-menuerand="unten"] .navFlach .navKnopf {
    width: auto; flex: none; white-space: nowrap; }
  /* Die Reiter des Projekts und die festen reihen sich in dieselbe Zeile ein. */
  body[data-menuerand="oben"] .navPromm:not([hidden]), body[data-menuerand="unten"] .navPromm:not([hidden]),
  body[data-menuerand="oben"] .navFestZeile:not([hidden]), body[data-menuerand="unten"] .navFestZeile:not([hidden]) {
    display: contents; }
  body[data-menuerand="oben"] .navFlach .navKnopf, body[data-menuerand="unten"] .navFlach .navKnopf {
    min-height: 30px; padding: 5px 9px; font-size: 13px; }
  body[data-menuerand="oben"] .chipHalter, body[data-menuerand="unten"] .chipHalter {
    margin: 0 0 0 auto; padding: 0; flex: none; width: 210px; }
  body[data-menuerand="oben"] #nutzerChip, body[data-menuerand="unten"] #nutzerChip { margin: 0; }
  body[data-menuerand="oben"] .chipMenue { bottom: auto; top: 100%; margin: 6px 0 0; }
  body[data-menuerand="oben"] .railFuss, body[data-menuerand="unten"] .railFuss { display: none; }

  /* Schmal: nur Symbole, die Wörter stehen im Hinweis. */
  body[data-menueschmal="1"]:not([data-menuerand="oben"]):not([data-menuerand="unten"]) #seitenmenue {
    width: 68px; padding: 14px 8px; }
  body[data-menueschmal="1"] #seitenmenue .navKnopf > span:not(.navZahl), body[data-menueschmal="1"] .pwName,
  body[data-menueschmal="1"] .pwPfeil, body[data-menueschmal="1"] .ncText, body[data-menueschmal="1"] .marke > :not(.markeZeichen),
  body[data-menueschmal="1"] .railFuss { display: none; }
  body[data-menueschmal="1"] #seitenmenue .marke { font-size: 0; }
  body[data-menueschmal="1"] .navPromm { margin-left: 0; padding-left: 0; border-left: 0; }
  body[data-menueschmal="1"] .navKnopf, body[data-menueschmal="1"] #projektWahl, body[data-menueschmal="1"] #nutzerChip {
    justify-content: center; padding-left: 6px; padding-right: 6px; }
  body[data-menueschmal="1"] .navZahl { position: absolute; margin: -14px 0 0 18px; }
  body[data-menueschmal="1"] .navKnopf { position: relative; }
  body[data-menueschmal="1"] .chipMenue { width: 260px; right: auto; }
  body[data-menueschmal="1"][data-menuerand="rechts"] .chipMenue { left: auto; right: 0; }
}

/* --- Schmale Schirme: die Widgets stapeln in der Reihenfolge des Rasters ------------------------------------- */
@media (max-width: 700px) {
  /* Zwei Spalten statt eines langen Stapels (17.10.2026): Was auf dem Desktop schmal ist, steht nebeneinander,
     was breit ist, über beide Spalten. desktop.js setzt --dkHandB und --dkHandH. */
  .dkFlaeche { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 54px; grid-auto-flow: row dense;
    gap: 8px; background-image: none !important; min-height: 0 !important; }
  .dkFlaeche > .wgKachel { grid-column: span var(--dkHandB, 2) !important; grid-row: span var(--dkHandH, 3) !important;
    height: auto; }
  /* Ziehen geht auf dem Telefon nicht, das Menü am Widget schon: entfernen, ausblenden, wählen, was es zeigt. */
  .dkGriff { display: none; }
}

/* Keine Scrollbalken (Flow, 17.10.2026): Das Menü rückt auf niedrigen Schirmen enger zusammen; was dann noch
   nicht passt, rollt ohne sichtbaren Balken. */
body[data-desktop="1"] #seitenmenue, body[data-desktop="1"] .kwLesesaal { scrollbar-width: none; }
body[data-desktop="1"] #seitenmenue::-webkit-scrollbar, body[data-desktop="1"] .kwLesesaal::-webkit-scrollbar { display: none; }
@media (max-height: 960px) and (min-width: 901px) {
  body[data-desktop="1"]:not([data-menuerand="oben"]):not([data-menuerand="unten"]) #seitenmenue .navKnopf {
    min-height: 0; padding-top: 5px; padding-bottom: 5px; }
}
/* Die Notiz ist direkt beschreibbar: ohne Rahmen, bis man hineintippt. */
.dkNotizDirekt { border-color: transparent; }
.dkNotizDirekt:focus { border-color: var(--linie); outline: none; }

/* --- Galerie „Hinzufügen“ (desktop-galerie.js) --------------------------------------------------------------- */
.dgFlaeche { width: min(94vw, 760px); max-height: min(88vh, 760px); overflow-y: auto; scrollbar-width: none; gap: 10px; }
.dgKopf { display: flex; align-items: center; justify-content: space-between; }
.dgZu { border: 0; background: transparent; color: var(--dim); font-size: 22px; cursor: pointer; min-height: 0 !important; }
.dgGruppe { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.dgRaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dgKlein { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.dgKarte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 11px !important;
  border: 1px solid var(--linie); border-radius: 10px !important; background: var(--panel); color: var(--text); cursor: pointer;
  font: inherit; transition: border-color .15s, transform .15s; min-height: 92px !important; }
.dgKarte:hover, .dgKarte:focus-visible { border-color: var(--gold); transform: translateY(-1px); outline: none; }
.dgSymbol { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--goldText); }
.dgSymbol .ikon { width: 17px; height: 17px; }
.dgTitel { font-size: 13.5px; font-weight: 600; }
.dgWozu { font-size: 11.5px; color: var(--dim); line-height: 1.35; }
.dgWahl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dgQuelle { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text); }
.dgQuelle:hover, .dgQuelle:focus-visible { border-color: var(--gold); color: var(--goldText); outline: none; }
.dgMehrere { cursor: default; }

/* Anpassen per Tastatur: das gewählte Widget ist deutlich markiert. */
[data-dk-bearbeiten] .dkFlaeche > .wgKachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }