/* v4 – Desktop-Erweiterungen (Papierkorb, Spiele mit Solitär und Security-Quiz, Sprache, Herunterfahren). Bestehende Optik bleibt. */
/* Desktop-Symbole im Raster (Raster-Anpassung 26.10.2026): feste, gleich grosse Zellen (7.2em = 8em-Feld + Rand bei 0.8em Schrift),
   eine Spalte von oben nach unten; reicht die Höhe über der Taskleiste nicht, geht es spaltenweise im gleichen Raster weiter */
.desktop{display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,7.2em);grid-auto-columns:7.2em;align-content:start;justify-content:start;
  padding-bottom:calc(2.75rem + 2px)}
.desktop > .icon-wrapper,.desktop > a.icon-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:8em;height:8em;margin:.5em;padding:1em 0 0}
.desktop > .icon-wrapper > .icon{flex:0 0 auto}
/* Schmale Bildschirme: 3 pro Spalte (nicht über dem Logo), Spiele und Papierkorb in der zweiten Spalte */
@media (max-width:600px) and (min-height:561px){.desktop{grid-template-rows:repeat(3,7.2em)}}

/* Startpositionen der neuen Fenster (leicht versetzt, wie Win95) */
@media (min-width:1024px){
  #security-quiz{top:9vh;left:calc(5vh + 14vw);width:560px;height:auto}
  #security-quiz .window__inner{height:auto;max-height:calc(100vh - 9vh - 100px)}
  #papierkorb{top:14vh;left:calc(5vh + 22vw);width:520px}
  #spiele{top:11vh;left:calc(5vh + 18vw);width:420px}
}
#papierkorb .window__inner{height:auto}

/* Explorer (Papierkorb) */
.menubar{display:flex;gap:2px;padding:2px 0 3px;font-size:.95em}
.menubar span{padding:2px 7px}
.menubar u{text-decoration:underline}
.explorer{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;padding:2px;height:190px;overflow:hidden;user-select:none}
.explorer table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.95em}
.explorer th{font-weight:normal;text-align:left;padding:3px 6px;background:silver;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px #dfdfdf}
.statusbar{display:flex;gap:3px;margin-top:3px;font-size:.95em}
.statusbar span{flex:1 1 auto;padding:2px 6px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray}
.statusbar span:last-child{flex:0 0 35%}
@media (max-width:600px){.explorer th:nth-child(n+3){display:none}.explorer col:nth-child(n+3){width:0}}

/* Security-Quiz (Win95-Dialog) */
#security-quiz .window__content{padding:1.1rem 1.25rem}
.quiz-head{display:flex;gap:.9rem;align-items:flex-start}
.quiz-head img{flex:0 0 auto;margin-top:.2rem}
.quiz-head h2{font-size:1.2em;margin:0 0 .5em}
.quiz-head p{margin:0 0 .6em}
.quiz-step{font-weight:bold;margin:0 0 .5em}
.quiz-msg{background:#fff;padding:.7rem .9rem;margin:.25rem 0 .9rem;user-select:text;
  box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}
.quiz-msg dl{margin:0 0 .6em;display:grid;grid-template-columns:max-content 1fr;gap:.15em .6em}
.quiz-msg dt{color:#333}
.quiz-msg dd{margin:0;overflow-wrap:anywhere}
.quiz-msg p{margin:.4em 0}
.quiz-link{color:#00f;text-decoration:underline;overflow-wrap:anywhere}
.quiz-fake-button{display:inline-block;padding:.3em .8em;background:#004264;color:#fff}
.quiz-result{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 .5rem}
.quiz-result p{margin:0 0 .5em}
.quiz-result ul{margin:.3em 0 0;padding-left:1.2em}
.quiz-result li{margin:.2em 0}
#security-quiz .dialog-buttons{margin-top:1rem}
#security-quiz .button[disabled]{color:gray;text-shadow:1px 1px #fff}

/* Solitär: Fensterrahmen (Spiel-CSS wird erst beim Öffnen geladen) */
#solitaer{width:min(760px,calc(100vw - 16px));max-width:none;height:min(640px,calc(100vh - 3vh - 56px));top:3vh;left:max(8px,calc(50vw - 380px))}
#solitaer .window__inner{flex:1 1 auto;height:auto;min-height:0;overflow:hidden;background:#008000;user-select:none}
@media (max-width:1023px){#solitaer{top:6px;left:4px;width:calc(100vw - 8px);height:calc(100% - 58px)}}

/* Ohne JS: Quiz und Solitär ausblenden (brauchen JavaScript) */
html:not(.js-tasks) #security-quiz,html:not(.js-tasks) #solitaer{display:none!important}
.quiz-typ{margin:0 0 .4em!important;border-bottom:1px solid silver;padding-bottom:.3em}
.menubar button{font:inherit;background:none;border:0;padding:2px 7px;color:#000;cursor:pointer;border-radius:0}
.menubar button:hover,.menubar button:focus-visible{background:#004264;color:#fff;outline:none}
.menubar button[disabled]{color:gray;text-shadow:1px 1px #fff;cursor:default;background:none}
#solitaer .statusbar{margin-top:2px}

/* Ordner «Spiele» (Explorer mit grossen Symbolen) */
#spiele .window__inner{height:auto}
.explorer.folder-view{height:150px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px;padding:6px}
#spiele .folder-view .icon-wrapper,#spiele .folder-view .icon-wrapper:link,#spiele .folder-view .icon-wrapper:visited{color:#000;width:7.5em;height:7.5em;margin:.25em;font-size:.85em;cursor:default}
#spiele .folder-view .icon-wrapper p{padding:1px 3px}
#spiele .folder-view .icon-wrapper.icon--active{background:none;border-color:transparent}
#spiele .folder-view .icon-wrapper.icon--active p{background:#000080;color:#fff}
#spiele .folder-view .icon-wrapper.icon--active img{filter:brightness(.6) sepia(1) hue-rotate(190deg) saturate(4)}

/* Tastaturfokus auf Symbolen: gepunkteter Rahmen um die Beschriftung (Win95) */
.icon-wrapper:focus{outline:none}
.icon-wrapper:focus-visible > p,.icon-wrapper.icon--active:focus > p{outline:1px dotted currentColor;outline-offset:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Quiz: Antwortknöpfe und Musik-Knopf */
.quiz-toolbar{justify-content:flex-end}
.quiz-toolbar button{display:inline-flex;align-items:center;gap:5px}
.quiz-toolbar button[aria-pressed=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px gray}
.quiz-optionen{display:flex;flex-direction:column;gap:6px;margin:.4rem 0 0}
.quiz-optionen .button.quiz-option{justify-content:flex-start;text-align:left;padding:.45rem .7rem;line-height:1.3}
.quiz-buchstabe{flex:0 0 auto;display:inline-block;width:1.6em;font-weight:bold}
.quiz-frage{margin:.3em 0 .5em}
html:not(.js-tasks) #spiele [data-doubleclick-window]{display:none}

/* Sprachumschalter in der Taskleiste (rechts neben dem Lautsprecher) */
.lang-tray{font:inherit;font-size:.8em;font-weight:bold;line-height:1;min-width:24px;margin:0 2px 0 6px;padding:3px 4px;border:0;border-radius:0;
  background:#000080;color:#fff;cursor:pointer}
.lang-tray:focus-visible{outline:1px dotted #000;outline-offset:2px}
html:not(.js-tasks) .lang-tray,html:not(.js-tasks) .start-menu [data-js-only]{display:none}

/* Herunterfahren */
.start-menu a[data-shutdown]{cursor:default}
.start-menu a[data-shutdown]:focus{color:#fff;background-color:#004264;outline:none}
.start-menu a:focus-visible{color:#fff;background-color:#004264;outline:none}
.sd-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background-image:repeating-conic-gradient(#0000 0 25%,#00000073 0 50%);background-size:2px 2px}
.sd-dialog{background:silver;padding:3px;width:min(380px,calc(100vw - 16px));box-shadow:inset -2px -2px #121212,inset 2px 2px #fff,inset -1px -1px gray,inset 1px 1px #dfdfdf}
.sd-dialog .title-bar{cursor:default}
.sd-body{display:flex;gap:14px;padding:16px 14px 6px}
.sd-body img{flex:0 0 auto}
.sd-body p{margin:0 0 .7em}
.sd-body label{display:flex;align-items:center;gap:6px;margin:.35em 0}
.sd-dialog .dialog-buttons{display:flex;justify-content:center;gap:8px;padding:10px 0 10px}
.sd-dialog .dialog-buttons .button{min-width:76px}
.sd-dialog .button:focus-visible,.sd-dialog .button:focus{outline:1px dotted #000;outline-offset:-5px}
.sd-off{position:fixed;inset:0;z-index:3000;background:#000;display:flex;align-items:center;justify-content:center;cursor:none;outline:none}
.sd-off p{color:#ff8c00;font-size:clamp(20px,4.2vw,44px);text-align:center;line-height:1.35;margin:0;padding:1rem}

/* v4.3 (26.10.2026): Startzustand nur «Willkommen». «Fernwartung» öffnet erst über das Symbol «Fernwartungs-Software» (oder Startmenü) */
#fernwartung{display:none}
/* «Willkommen» rechts neben der Symbolspalte, damit «Fernwartungs-Software» oben links frei bleibt (Breite unverändert) */
@media (min-width:1024px){
  #willkommen{top:10vh;left:200px}
  #willkommen .window__inner{max-height:calc(88vh - 100px)}
}
/* Wenig Höhe: Symbole stehen in zwei bzw. drei Spalten */
@media (min-width:1024px) and (max-height:637px){#willkommen{left:315px}}
@media (min-width:1024px) and (max-height:407px){#willkommen{left:430px}}

/* v4.4 – neue Spiele im Ordner «Spiele»: Fensterrahmen (Spiel-CSS wird erst beim Öffnen geladen) */
.g44 .window__inner{height:auto;overflow:auto;flex:1 1 auto;min-height:0}
@media (min-width:1024px){
  #spiele{width:440px}
  #spiele .folder-view{height:auto}
  #snake{top:6vh;left:calc(5vh + 24vw);width:380px}
  #bloecke{top:4vh;left:calc(5vh + 28vw);width:360px}
  #passwort{top:7vh;left:calc(5vh + 20vw);width:560px}
  .g44{max-height:calc(100vh - 4vh - 56px)}
}
@media (max-width:1023px){.g44{top:6px;left:4px;width:calc(100vw - 8px);max-width:none;max-height:calc(100% - 58px)}}
#spiele .folder-view{height:auto;min-height:150px}
html:not(.js-tasks) .g44{display:none!important}