/* Desktop, Symbole, Taskleiste, Startbildschirm, Herunterfahren, Bildschirmschoner */

#desktop { position: fixed; inset: 0 0 var(--tbh) 0; overflow: hidden; }

#icons {
  position: absolute; inset: 0; z-index: 0;
  padding: 6px 2px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 75px);
  grid-auto-columns: 75px;
  justify-content: start;
  align-content: start;
}
#icons.refresh { visibility: hidden; }

.dicon {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center;
  width: 75px; height: 75px; margin: 0; padding: 4px 2px 0;
  border: 0; background: transparent; color: var(--weiss);
  font: 11px/1.2 var(--schrift); text-align: center; cursor: default;
  -webkit-touch-callout: none;
}
.dicon:focus { outline: none; }
.ib { position: relative; flex: none; display: block; width: 32px; height: 32px; margin-bottom: 4px; }
.ib > img { display: block; width: 100%; height: 100%; }
.ib .tint {
  position: absolute; inset: 0; display: none;
  background: repeating-conic-gradient(var(--navy) 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.sel > .ib .tint, .sel .ib .tint { display: block; }
.ib.shortcut::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 16px;
  background: url("../icons/shortcut16.svg") no-repeat; background-size: 100% 100%;
}
.dlabel {
  display: block; max-width: 100%; padding: 0 2px 1px;
  overflow-wrap: anywhere; word-break: break-word;
  text-shadow: 1px 1px 0 var(--schwarz);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dicon.sel .dlabel { background: var(--navy); text-shadow: none; outline: 1px dotted var(--weiss); outline-offset: -1px; }
.dicon:focus-visible .dlabel { outline: 1px dotted var(--weiss); outline-offset: -1px; }

#windows { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#windows .win { pointer-events: auto; }

/* ---------- Taskleiste ---------- */

#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  height: var(--tbh);
  display: flex; align-items: stretch; gap: 2px;
  padding: 4px 2px 2px;
  background: var(--grau);
  box-shadow: inset 0 1px 0 var(--grau-hell), inset 0 2px 0 var(--weiss);
  font: 11px var(--schrift);
}
.tb-btn {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0 4px; border: 0; border-radius: 0;
  background: var(--grau); color: var(--text); box-shadow: var(--bevel-erhoben);
  font: 11px var(--schrift); cursor: default; white-space: nowrap; min-width: 0;
}
.tb-btn:active, .tb-btn.on { box-shadow: var(--bevel-gedrueckt); }
.tb-btn:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -5px; }
.tb-btn img { flex: none; width: 16px; height: 16px; }
.start-btn { padding: 0 6px 0 3px; font-weight: bold; gap: 3px; flex: none; }
.start-btn.on { padding: 1px 5px 0 4px; }
.start-btn.on > span, .start-btn.on > img { transform: translate(0, 0); }
.tb-sep { flex: none; width: 2px; margin: 0 2px; box-shadow: inset 1px 0 var(--grau-dunkel), inset -1px 0 var(--weiss); }
.tb-grip { flex: none; width: 3px; margin: 0 1px 0 2px; box-shadow: inset 1px 0 var(--weiss), inset -1px 0 var(--grau-dunkel); }
.ql {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 24px; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: default;
}
.ql:hover { box-shadow: var(--bevel-flach-heraus); }
.ql:active { box-shadow: var(--bevel-flach-hinein); }
.ql:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -3px; }
.ql img { width: 16px; height: 16px; }

#tasks { flex: 1; display: flex; gap: 2px; min-width: 0; }
.task { flex: 1 1 0; max-width: 160px; min-width: 34px; padding: 0 5px 0 4px; overflow: hidden; }
.task > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.task.on { background: var(--dither); font-weight: bold; }
.task.on > span { background: transparent; }
.task:active:not(.on) { padding: 1px 4px 0 5px; }

.tray {
  flex: none; display: flex; align-items: center; gap: 2px;
  padding: 0 6px 0 2px; box-shadow: var(--bevel-flach-hinein);
}
.tray-btn {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; cursor: default;
}
.tray-btn:hover { box-shadow: var(--bevel-flach-heraus); }
.tray-btn.on, .tray-btn:active { box-shadow: var(--bevel-flach-hinein); }
.tray-btn:focus-visible { outline: 1px dotted var(--schwarz); outline-offset: -2px; }
.tray-btn img { width: 16px; height: 16px; }
#clock { padding: 0 2px 0 4px; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Startbildschirm / Herunterfahren ---------- */

#boot, #sd { position: fixed; inset: 0; display: none; }
#boot { z-index: 3000; }
#sd { z-index: 3500; }
html.boot-pending #boot { display: flex; }
#sd.on { display: flex; }

.sky {
  align-items: center; justify-content: center; flex-direction: column;
  background:
    radial-gradient(ellipse 22% 9% at 18% 16%, rgba(255,255,255,.95) 0 60%, transparent 100%),
    radial-gradient(ellipse 30% 11% at 30% 20%, rgba(255,255,255,.85) 0 60%, transparent 100%),
    radial-gradient(ellipse 26% 9% at 78% 12%, rgba(255,255,255,.9) 0 60%, transparent 100%),
    radial-gradient(ellipse 34% 12% at 70% 26%, rgba(255,255,255,.8) 0 60%, transparent 100%),
    radial-gradient(ellipse 28% 10% at 12% 78%, rgba(255,255,255,.7) 0 60%, transparent 100%),
    radial-gradient(ellipse 30% 10% at 86% 74%, rgba(255,255,255,.75) 0 60%, transparent 100%),
    linear-gradient(180deg, #2f6fb8 0%, #6fa6dc 45%, #bcd8f2 100%);
  color: var(--weiss); cursor: default;
}
.sky-logo { display: flex; align-items: center; gap: 18px; text-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.sky-logo img { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.35)); }
.sky-word { display: flex; flex-direction: column; line-height: 1; }
.sky-word .w1 { font: bold italic 54px/1 "Trebuchet MS", Tahoma, Verdana, sans-serif; letter-spacing: -1px; }
.sky-word .w1 sup { font: bold italic 54px/1 "Trebuchet MS", Tahoma, Verdana, sans-serif; color: #ffe27a; margin-left: 6px; vertical-align: baseline; }
.sky-word .w2 { margin-top: 8px; font: bold 18px/1 Tahoma, Verdana, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.sky-cap { margin-top: 38px; font: bold 17px Tahoma, Verdana, sans-serif; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
.sky-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: #000080; overflow: hidden; }
.sky-bar::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: -140px; width: 140px;
  background: repeating-linear-gradient(90deg, #1084d0 0 11px, transparent 11px 15px);
  animation: skybar 1.1s linear infinite;
}
@keyframes skybar { to { left: 100%; } }

#sd.black { background: #000; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #ffb400; cursor: pointer; }
#sd.black .sd-text { font: bold 24px/1.5 Tahoma, Verdana, sans-serif; }
#sd.black .sd-text small { display: block; margin-top: 18px; font: 14px Tahoma, Verdana, sans-serif; color: #a37800; }

#saver { position: fixed; inset: 0; z-index: 4000; width: 100%; height: 100%; background: #000; cursor: none; display: block; }

/* ---------- Mobil (< 700px): Desktop bleibt erkennbar, Symbole im Raster ---------- */

@media (max-width: 699px) {
  #icons {
    grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: max-content;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-columns: auto; padding: 12px 10px; row-gap: 6px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .dicon { width: 100%; height: auto; min-height: 96px; padding: 6px 2px 4px; font-size: 13px; }
  .ib { width: 64px; height: 64px; margin-bottom: 6px; }
  .ib.shortcut::after { width: 32px; height: 32px; }
  .dlabel { -webkit-line-clamp: 2; }
  #taskbar { padding: 5px 3px 3px; font-size: 13px; }
  .tb-btn { font-size: 13px; }
  .tb-btn img { width: 20px; height: 20px; }
  .start-btn { padding: 0 10px 0 6px; }
  .ql { display: none; }
  .tb-sep { display: none; }
  .tb-grip { display: none; }
  .tray-btn { width: 34px; height: 100%; }
  .tray-btn img { width: 20px; height: 20px; }
  .task { min-width: 40px; max-width: 120px; }
  .task > span { display: none; }
  .task.on > span, .task:only-child > span, #tasks:has(.task:nth-child(2)) .task.on > span { display: block; }
  .sky-logo img { width: 64px; height: 64px; }
  .sky-word .w1, .sky-word .w1 sup { font-size: 38px; }
  .sky-word .w2 { font-size: 13px; letter-spacing: 2px; }
  #sd.black .sd-text { font-size: 20px; }
}

@media (max-width: 699px) and (max-height: 520px) {
  #icons { padding-top: 6px; }
}

.nojs { position: fixed; inset: 0; padding: 24px; background: var(--desktop); color: var(--weiss); font: 14px/1.5 var(--schrift); overflow: auto; }
.nojs h1 { margin: 0 0 8px; font-size: 20px; }

/* Text fuer Suchmaschinen und Screenreader ohne JS; visuell verborgen */
.nur-suchmaschinen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gummi { position: absolute; z-index: 0; border: 1px dotted var(--weiss); box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }