/* RESILI.ONE - Grafische Oberflaeche
   Dunkles Design in der Anmutung einer Plasma-Sitzung. Bewusst OHNE die
   Bildroehren-Verzerrung des Terminals: gewoelbte Fensterkanten waeren beim
   Ziehen und beim Treffen von Knoepfen unbrauchbar. Geblieben ist die
   Farbfamilie, damit Terminal und Oberflaeche als ein System auftreten. */

:root {
    --grund:        #0d1014;
    --flaeche:      #171b21;
    --flaeche-hoch: #1f242c;
    --rand:         #2c333d;
    --rand-hell:    #3a434f;
    --schrift:      #d6dde6;
    --schrift-matt: #8b95a3;
    --akzent:       #3daee9;
    --akzent-matt:  rgba(61, 174, 233, 0.18);
    --rot:          #ff5a32;
    --gruen:        #57d97a;
    --blau:         #4a9eff;
    --leiste-h:     34px;
    --titel-h:      32px;
    --schatten:     0 12px 34px rgba(0, 0, 0, 0.55),
                    0 2px 8px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--grund);
    color: var(--schrift);
    font-family: 'Inter', 'Noto Sans', 'DejaVu Sans', system-ui, sans-serif;
    font-size: 13px;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   HINTERGRUND
   Der Verlauf sitzt auf einem festen Grundton, damit beim Laden nichts
   aufblitzt. Das Raster darueber ist dezent - es soll Tiefe geben, nicht
   vom Inhalt ablenken.
   --------------------------------------------------------------------------- */
#hintergrund {
    position: fixed;
    inset: 0;
    background: #0a0d11;
}

/* Die Leinwand traegt das bewegte Dreiecksmuster. Sie liegt hinter allem
   und nimmt keine Zeigerereignisse an. */
#grund {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

#marke {
    position: absolute;
    right: 26px;
    bottom: calc(var(--leiste-h) + 18px);
    text-align: right;
    pointer-events: none;
}

#marke b {
    display: block;
    font-size: 34px;
    letter-spacing: 5px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.11);
}

#marke span {
    display: block;
    font-size: 11px;
    letter-spacing: 3.2px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------------
   SYMBOLE AUF DER ARBEITSFLAECHE
   --------------------------------------------------------------------------- */
/* Spaltenweise von links oben, wie auf einer Arbeitsflaeche ueblich -
   erst nach unten, dann die naechste Spalte. */
#flaeche {
    position: fixed;
    inset: 0 0 var(--leiste-h) 0;
    padding: 8px 6px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 88px);
    grid-template-rows: repeat(auto-fill, 92px);
    grid-auto-flow: column;
    gap: 2px;
    align-content: start;
    justify-content: start;
}

.symbol {
    width: 88px;
    height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    padding: 4px;
}

.symbol:hover   { background: rgba(255, 255, 255, 0.055); }
.symbol.gewaehlt {
    background: var(--akzent-matt);
    border-color: rgba(255, 176, 0, 0.4);
}

.symbol .bild { width: 38px; height: 38px; }

/* Zwei Zeilen, dann Auslassung. Ein Umbruch mitten im Wort ("Lagemeldunge
   n") sieht nach Fehler aus; lieber kuerzen und den vollen Namen im
   Titeltext fuehren. */
.symbol .name {
    font-size: 11px;
    line-height: 1.28;
    color: #e8edf3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   FENSTER
   --------------------------------------------------------------------------- */
.fenster {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 180px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    box-shadow: var(--schatten);
    overflow: hidden;
}

.fenster.aktiv { border-color: var(--rand-hell); }

.fenster.maximiert {
    border-radius: 0;
    border-width: 0 0 1px 0;
}

/* Waehrend des Ziehens keine Uebergaenge: sonst laeuft das Fenster dem
   Zeiger sichtbar hinterher. */
.fenster.zieht, .fenster.zieht * { transition: none !important; }

.titelleiste {
    height: var(--titel-h);
    flex: 0 0 var(--titel-h);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 6px 0 11px;
    background: linear-gradient(180deg, #232a33 0%, #1c222a 100%);
    border-bottom: 1px solid #10141a;
    cursor: default;
}

.fenster.aktiv .titelleiste {
    background: linear-gradient(180deg, #2b333e 0%, #222932 100%);
}

.titelleiste .tbild { width: 15px; height: 15px; flex: 0 0 15px; }

.titelleiste .ttext {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--schrift-matt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fenster.aktiv .titelleiste .ttext { color: #e6ecf3; }

.knoepfe { display: flex; gap: 2px; }

.knopf {
    width: 28px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--schrift-matt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.knopf:hover      { background: rgba(255, 255, 255, 0.1); color: #fff; }
.knopf.zu:hover   { background: #d63b1f; color: #fff; }
.knopf svg        { width: 11px; height: 11px; }

.inhalt {
    flex: 1;
    overflow: auto;
    background: var(--grund);
    position: relative;
}

.inhalt iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Deckt das Fenster beim Ziehen ab. Ohne diese Schicht verschluckt ein
   iframe die Zeigerereignisse, sobald der Zeiger es ueberquert - das
   Fenster bleibt dann mitten in der Bewegung haengen. */
#zieh-schutz {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    cursor: inherit;
}

#zieh-schutz.an { display: block; }

.griff { position: absolute; z-index: 5; }
.griff.o  { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.griff.u  { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.griff.l  { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.griff.r  { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.griff.ol { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.griff.or { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.griff.ul { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.griff.ur { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; }

/* ---------------------------------------------------------------------------
   TASKLEISTE
   --------------------------------------------------------------------------- */
#leiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--leiste-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: rgba(16, 20, 26, 0.93);
    backdrop-filter: blur(14px);
    border-top: 1px solid #262d36;
    z-index: 10000;
}

#start {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--schrift);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.9px;
    cursor: pointer;
    font-family: inherit;
}

#start:hover  { background: rgba(255, 255, 255, 0.08); }
#start.offen  { background: var(--akzent-matt); color: var(--akzent); }
#start svg    { width: 17px; height: 17px; }

#fensterliste {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.aufgabe {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    max-width: 210px;
    padding: 0 13px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--schrift-matt);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    font-family: inherit;
    border-bottom: 2px solid transparent;
}

.aufgabe:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }

.aufgabe.aktiv {
    background: rgba(255, 176, 0, 0.13);
    color: #fff;
    border-bottom-color: var(--akzent);
}

.aufgabe.versteckt { opacity: 0.5; }
.aufgabe svg   { width: 14px; height: 14px; flex: 0 0 14px; }
.aufgabe .txt  { overflow: hidden; text-overflow: ellipsis; }

#ablage {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 4px;
}

#lagestand {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--schrift-matt);
    padding: 5px 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

#lagestand:hover { background: rgba(255, 255, 255, 0.09); }

.punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gruen);
}

.punkt.rot    { background: var(--rot); }
.punkt.orange { background: var(--akzent); }

#uhr {
    text-align: right;
    line-height: 1.2;
    cursor: default;
    min-width: 84px;
}

#uhr .zeit  { font-size: 13.5px; font-weight: 600; letter-spacing: 0.4px; }
#uhr .datum { font-size: 10.5px; color: var(--schrift-matt); }

/* ---------------------------------------------------------------------------
   STARTMENUE
   --------------------------------------------------------------------------- */
#menue {
    position: fixed;
    left: 10px;
    bottom: calc(var(--leiste-h) + 8px);
    width: 388px;
    max-height: 566px;
    display: none;
    flex-direction: column;
    background: rgba(23, 27, 33, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rand);
    border-radius: 10px;
    box-shadow: var(--schatten);
    z-index: 10001;
    overflow: hidden;
}

#menue.offen { display: flex; }

#menue-kopf {
    padding: 15px 16px 12px;
    border-bottom: 1px solid var(--rand);
}

#menue-kopf .wer { font-size: 13.5px; font-weight: 600; }
#menue-kopf .wo  { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }

#suche {
    width: 100%;
    margin-top: 11px;
    padding: 8px 11px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--schrift);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
}

#suche:focus { border-color: var(--akzent); }

#menue-liste {
    flex: 1;
    overflow-y: auto;
    padding: 7px;
}

.gruppe {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--schrift-matt);
    padding: 10px 9px 5px;
    font-weight: 600;
}

.eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 9px;
    border-radius: 6px;
    cursor: pointer;
}

.eintrag:hover, .eintrag.hell { background: var(--akzent-matt); }
.eintrag svg { width: 24px; height: 24px; flex: 0 0 24px; }
.eintrag .et { font-size: 12.5px; }
.eintrag .eb { font-size: 10.5px; color: var(--schrift-matt); margin-top: 1px; }

#menue-fuss {
    display: flex;
    gap: 6px;
    padding: 9px;
    border-top: 1px solid var(--rand);
}

.fussknopf {
    flex: 1;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--schrift-matt);
    font-size: 11.5px;
    cursor: pointer;
    font-family: inherit;
}

.fussknopf:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }

/* ---------------------------------------------------------------------------
   INHALTE IN DEN FENSTERN
   --------------------------------------------------------------------------- */
.app { padding: 15px; font-size: 12.5px; line-height: 1.55; user-select: text; }
.app h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.app .unter { color: var(--schrift-matt); font-size: 11.5px; margin-bottom: 13px; }

.tafel {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tafel th {
    text-align: left;
    font-size: 10px;
    letter-spacing: 1.1px;
    color: var(--schrift-matt);
    padding: 6px 9px;
    border-bottom: 1px solid var(--rand);
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--grund);
}

.tafel td {
    padding: 7px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    vertical-align: top;
}

.tafel tr:hover td { background: rgba(255, 255, 255, 0.035); }
.tafel tr.klickbar { cursor: pointer; }
.tafel .zahl { text-align: right; font-variant-numeric: tabular-nums; }

.marke {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

.marke.rot    { background: rgba(255, 90, 50, 0.19);  color: #ff8f6e; }
.marke.orange { background: rgba(255, 176, 0, 0.19);  color: #ffc451; }
.marke.gruen  { background: rgba(87, 217, 122, 0.16); color: #7fe39a; }
.marke.grau   { background: rgba(255, 255, 255, 0.09); color: var(--schrift-matt); }

.laden {
    padding: 26px;
    text-align: center;
    color: var(--schrift-matt);
    font-size: 12px;
}

.werte { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 15px; }

.wert {
    padding: 11px 13px;
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    border-radius: 7px;
}

.wert .k { font-size: 10px; letter-spacing: 1.1px; color: var(--schrift-matt); }
.wert .v { font-size: 20px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.wert .n { font-size: 10.5px; color: var(--schrift-matt); margin-top: 1px; }

.balken {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 7px;
}

.balken i { display: block; height: 100%; background: var(--akzent); }

.hinweis {
    padding: 9px 12px;
    border-left: 2px solid var(--rand-hell);
    background: rgba(255, 255, 255, 0.03);
    color: var(--schrift-matt);
    font-size: 11.5px;
    margin-top: 13px;
    border-radius: 0 5px 5px 0;
}

/* ---------------------------------------------------------------------------
   KONTEXTMENUE, AUSWAHL, ANDOCKEN
   --------------------------------------------------------------------------- */
.kontext {
    position: fixed;
    z-index: 12000;
    min-width: 216px;
    padding: 5px;
    background: rgba(26, 30, 37, 0.985);
    backdrop-filter: blur(16px);
    border: 1px solid var(--rand-hell);
    border-radius: 7px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
    font-size: 12.5px;
}

.kontext-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 11px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.kontext-zeile:hover  { background: var(--akzent-matt); color: var(--akzent); }
.kontext-zeile.aus    { opacity: 0.4; cursor: default; }
.kontext-zeile.aus:hover { background: transparent; color: inherit; }
.kontext-zeile .kk    { font-size: 10.5px; color: var(--schrift-matt); }

.kontext-strich {
    height: 1px;
    margin: 4px 8px;
    background: var(--rand);
}

/* Gummiband beim Aufziehen auf der Arbeitsflaeche. */
.auswahl {
    position: fixed;
    z-index: 400;
    border: 1px solid rgba(255, 176, 0, 0.75);
    background: rgba(255, 176, 0, 0.11);
    pointer-events: none;
    border-radius: 2px;
}

/* Zeigt vor dem Loslassen, wohin das Fenster springt. */
#andock {
    position: fixed;
    z-index: 8500;
    display: none;
    border: 2px solid rgba(255, 176, 0, 0.65);
    background: rgba(255, 176, 0, 0.1);
    border-radius: 6px;
    pointer-events: none;
    transition: all 0.12s ease-out;
}

#andock.an { display: block; }

/* ---------------------------------------------------------------------------
   FARBIGE SYMBOLE
   Jede Anwendung bekommt ihren eigenen Ton. Einheitlich weisse Striche
   sahen aus wie eine Zeichenlegende, nicht wie eine Arbeitsflaeche - man
   musste lesen statt zu erkennen.
   --------------------------------------------------------------------------- */
.symbol .bild {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ton, #2a323d);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.symbol .bild svg { width: 24px; height: 24px; color: #fff; }

.eintrag .bildchen,
.aufgabe .bildchen,
.titelleiste .bildchen {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--ton, #2a323d);
    flex: 0 0 auto;
}

.eintrag .bildchen      { width: 27px; height: 27px; }
.eintrag .bildchen svg  { width: 16px; height: 16px; color: #fff; }
.bildchen svg { color: #fff; }
.aufgabe .bildchen      { width: 18px; height: 18px; border-radius: 4px; }
.aufgabe .bildchen svg  { width: 11px; height: 11px; color: #fff; }
.titelleiste .bildchen  { width: 18px; height: 18px; border-radius: 4px; }
.titelleiste .bildchen svg { width: 11px; height: 11px; color: #fff; }

/* Taskleiste schmaler: Knoepfe und Uhr mitziehen. */
#start        { height: 26px; padding: 0 11px 0 9px; font-size: 11.5px; }
#start svg    { width: 15px; height: 15px; }
.aufgabe      { height: 26px; font-size: 11.5px; padding: 0 11px; }
#uhr .zeit    { font-size: 12px; }
#uhr .datum   { font-size: 9.5px; }
#lagestand    { font-size: 11px; padding: 4px 9px; }
#menue        { bottom: calc(var(--leiste-h) + 7px); }

/* ---------------------------------------------------------------------------
   STARTMENUE MIT SEITENSPALTE
   Links die Gruppen als schmale Leiste, rechts die Liste - so bleibt die
   Auswahl sichtbar, ohne dass Ueberschriften den Platz kosten.
   --------------------------------------------------------------------------- */
#menue { flex-direction: row; width: 412px; padding: 0; }

#menue-spalte {
    width: 48px;
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0;
    background: rgba(0, 0, 0, 0.26);
    border-right: 1px solid var(--rand);
}

.spaltenknopf {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--schrift-matt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

.spaltenknopf:hover { background: rgba(255, 255, 255, 0.09); color: var(--schrift); }
.spaltenknopf svg   { width: 17px; height: 17px; }
.spaltenknopf.an    { background: var(--akzent-matt); color: var(--akzent); }

/* Der Streifen links zeigt die aktive Gruppe auch dann, wenn die Farbe
   allein nicht auffaellt. */
.spaltenknopf.an::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 8px;
    bottom: 8px;
    width: 2.5px;
    border-radius: 2px;
    background: var(--akzent);
}

.spaltenluecke { flex: 1; }

#menue-haupt {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   KALENDER, VORSCHAU
   --------------------------------------------------------------------------- */
.kalender {
    position: fixed;
    z-index: 11500;
    width: 262px;
    padding: 11px;
    background: rgba(23, 27, 33, 0.985);
    backdrop-filter: blur(18px);
    border: 1px solid var(--rand-hell);
    border-radius: 9px;
    box-shadow: var(--schatten);
}

.kal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.kal-monat { font-size: 12.5px; font-weight: 600; }

.kal-pfeil {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--schrift-matt);
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
}

.kal-pfeil:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }

.kal-netz {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.kal-wt {
    text-align: center;
    font-size: 9.5px;
    color: var(--schrift-matt);
    padding: 3px 0 5px;
    font-weight: 600;
}

.kal-tag {
    text-align: center;
    font-size: 11.5px;
    padding: 5px 0;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
}

.kal-tag:hover { background: rgba(255, 255, 255, 0.08); }

.kal-tag.heute {
    background: var(--akzent);
    color: #151a20;
    font-weight: 700;
}

.vorschau {
    position: fixed;
    z-index: 11500;
    padding: 8px 12px;
    background: rgba(23, 27, 33, 0.985);
    border: 1px solid var(--rand-hell);
    border-radius: 7px;
    box-shadow: var(--schatten);
    pointer-events: none;
    max-width: 260px;
}

.vorschau .v-titel { font-size: 12px; font-weight: 600; }
.vorschau .v-lage  { font-size: 10.5px; color: var(--schrift-matt); margin-top: 2px; }

/* Schieberegler in den Einstellungen an die Farbfamilie angleichen. */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--akzent);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--akzent);
    cursor: pointer;
}

/* Solange die Oberflaeche liegt, traegt die Seite deren Grundton; im
   Terminal bleibt es beim Schwarz aus terminal.css. */
#os-schicht[hidden] { display: none; }
html.os-an, html.os-an body { background: var(--grund); }

/* ---------------------------------------------------------------------------
   LEISTE IM PLASMA-ZUSCHNITT
   Reihenfolge wie in Lucas Panel: Anwendungsmenue, Arbeitsflaechen,
   Fensterleiste mit angehefteten Programmen, Systemabschnitt, Uhr und ganz
   rechts der Streifen zum Freiraeumen der Flaeche.
   --------------------------------------------------------------------------- */
#start {
    width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 0;
}

#start svg { width: 19px; height: 19px; }

#pager {
    display: flex;
    gap: 2px;
    padding: 0 3px;
}

.flaeche-knopf {
    width: 21px;
    height: 21px;
    border: 1px solid var(--rand-hell);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--schrift-matt);
    font-size: 9.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.flaeche-knopf:hover  { background: rgba(255, 255, 255, 0.12); }
.flaeche-knopf.belegt { color: var(--schrift); border-color: var(--schrift-matt); }

.flaeche-knopf.an {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #10151b;
    font-weight: 700;
}

.leiste-trenner {
    width: 1px;
    height: 20px;
    background: var(--rand-hell);
    margin: 0 4px;
}

/* Angeheftete, die gerade nicht laufen, treten zurueck. */
.aufgabe.ruht {
    background: transparent;
    opacity: 0.62;
    padding: 0 8px;
}

.aufgabe.ruht:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }

/* Laufende bekommen den Strich, den man von Plasma kennt. */
.aufgabe.laeuft { border-bottom: 2px solid var(--rand-hell); }
.aufgabe.aktiv  { border-bottom-color: var(--akzent); }

#ablage-auf {
    width: 20px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--schrift-matt);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ablage-auf:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }
#ablage-auf svg   { width: 13px; height: 13px; }
#ablage-auf.offen { color: var(--akzent); transform: rotate(180deg); }

/* Der schmale Streifen ganz rechts raeumt die Flaeche frei. */
#zeige-flaeche {
    width: 9px;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--rand);
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
}

#zeige-flaeche:hover { background: rgba(255, 255, 255, 0.13); }

#ablage-feld {
    position: fixed;
    right: 8px;
    bottom: calc(var(--leiste-h) + 7px);
    width: 268px;
    display: none;
    padding: 11px;
    background: rgba(23, 27, 33, 0.985);
    backdrop-filter: blur(18px);
    border: 1px solid var(--rand-hell);
    border-radius: 9px;
    box-shadow: var(--schatten);
    z-index: 11400;
}

#ablage-feld.offen { display: block; }

.af-kopf {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--schrift-matt);
    font-weight: 600;
    margin-bottom: 8px;
}

.af-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 5px;
}

.af-zeile:hover { background: rgba(255, 255, 255, 0.05); }
.af-zeile .af-sinn { width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.07); flex: 0 0 26px; }
.af-zeile .af-sinn svg { width: 14px; height: 14px; color: var(--schrift-matt); }
.af-zeile .af-t { font-size: 12px; }
.af-zeile .af-w { font-size: 10.5px; color: var(--schrift-matt); margin-top: 1px; }

/* ---------------------------------------------------------------------------
   STARTMENUE-FUSS: Benutzerzeile und Knoepfe, wie im Anwendungsmenue
   --------------------------------------------------------------------------- */
#menue-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 9px 11px;
    border-top: 1px solid var(--rand);
    background: rgba(0, 0, 0, 0.2);
}

.benutzer { display: flex; align-items: center; gap: 9px; }

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--akzent);
    color: #10151b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.bname { font-size: 12px; font-weight: 600; }
.bwo   { font-size: 10px; color: var(--schrift-matt); }

.fussknoepfe { display: flex; gap: 3px; }

.fk {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--schrift-matt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.fk:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }
.fk svg   { width: 16px; height: 16px; }

/* ===========================================================================
   BEWEGUNG
   Ohne Uebergaenge wirkt jede Oberflaeche tot: Fenster erscheinen hart,
   Menues springen ins Bild. Die Zeiten liegen bewusst kurz (140-190 ms) -
   laenger fuehlt sich zaeh an, kuerzer sieht man nicht.
   =========================================================================== */
@keyframes fenster-auf {
    from { opacity: 0; transform: scale(0.94) translateY(9px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fenster-zu {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.93) translateY(7px); }
}

@keyframes menue-auf {
    from { opacity: 0; transform: translateY(11px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes blase-auf {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fenster {
    animation: fenster-auf 0.17s cubic-bezier(0.2, 0.9, 0.3, 1);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.fenster.geht { animation: fenster-zu 0.14s ease-in forwards; }

/* Beim Minimieren zur Leiste fahren statt einfach zu verschwinden. */
.fenster.faellt {
    transition: transform 0.19s cubic-bezier(0.4, 0, 0.9, 0.5), opacity 0.19s ease-in;
    transform: scale(0.34) translateY(60vh);
    opacity: 0;
    pointer-events: none;
}

.fenster.steigt {
    animation: fenster-auf 0.19s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Waehrend Ziehen und Groessenaenderung keine Uebergaenge - sonst laeuft
   das Fenster dem Zeiger hinterher. */
.fenster.zieht { animation: none !important; transition: none !important; }

#menue.offen   { animation: menue-auf 0.15s cubic-bezier(0.2, 0.9, 0.3, 1); }
.kontext       { animation: menue-auf 0.13s cubic-bezier(0.2, 0.9, 0.3, 1); }
.kalender      { animation: menue-auf 0.15s cubic-bezier(0.2, 0.9, 0.3, 1); }
#ablage-feld.offen { animation: menue-auf 0.15s cubic-bezier(0.2, 0.9, 0.3, 1); }
.vorschau      { animation: blase-auf 0.12s ease-out; }

/* Alles, was man anfassen kann, reagiert weich. */
.knopf, .aufgabe, .symbol, .eintrag, .spaltenknopf, .flaeche-knopf,
.fk, #start, #lagestand, #ablage-auf, .kontext-zeile, .kal-tag {
    transition: background-color 0.13s ease, color 0.13s ease,
                border-color 0.13s ease, opacity 0.13s ease;
}

.symbol { transition: background-color 0.13s ease, transform 0.13s ease; }
.symbol:active { transform: scale(0.95); }

.symbol .bild {
    transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1),
                box-shadow 0.15s ease;
}

.symbol:hover .bild {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Wer eine ruhende Anheftung anklickt, soll sehen, dass etwas passiert. */
@keyframes huepf {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-5px); }
}

.aufgabe.startet .bildchen { animation: huepf 0.42s ease-in-out 2; }

/* ===========================================================================
   BILDLAUFLEISTEN IM SYSTEMSTIL
   Die Standardleisten des Browsers waren das deutlichste Zeichen, dass hier
   eine Webseite laeuft.
   =========================================================================== */
.inhalt, #menue-liste, .kontext, #ablage-feld, .app {
    scrollbar-width: thin;
    scrollbar-color: var(--rand-hell) transparent;
}

.inhalt::-webkit-scrollbar,
#menue-liste::-webkit-scrollbar,
.app::-webkit-scrollbar { width: 11px; height: 11px; }

.inhalt::-webkit-scrollbar-track,
#menue-liste::-webkit-scrollbar-track,
.app::-webkit-scrollbar-track { background: transparent; }

.inhalt::-webkit-scrollbar-thumb,
#menue-liste::-webkit-scrollbar-thumb,
.app::-webkit-scrollbar-thumb {
    background: var(--rand-hell);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.inhalt::-webkit-scrollbar-thumb:hover,
#menue-liste::-webkit-scrollbar-thumb:hover,
.app::-webkit-scrollbar-thumb:hover { background-clip: content-box; background: var(--schrift-matt); }

/* Tastaturfokus sichtbar machen, ohne den Browser-Standardring. */
:focus { outline: none; }

.knopf:focus-visible, .aufgabe:focus-visible, .symbol:focus-visible,
.spaltenknopf:focus-visible, .fk:focus-visible, #start:focus-visible,
.flaeche-knopf:focus-visible {
    box-shadow: 0 0 0 2px var(--akzent);
}

/* ===========================================================================
   WERKZEUG- UND STATUSLEISTE IN DEN FENSTERN
   =========================================================================== */
.werkzeug {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    flex: 0 0 auto;
    min-height: 34px;
}

.wz {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--schrift-matt);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.13s ease, color 0.13s ease;
}

.wz:hover      { background: rgba(255, 255, 255, 0.09); color: var(--schrift); }
.wz.an         { background: var(--akzent-matt); color: var(--akzent); }
.wz svg        { width: 13px; height: 13px; }
.wz-trenner    { width: 1px; height: 17px; background: var(--rand); margin: 0 3px; }
.wz-luecke     { flex: 1; }

.wz-feld {
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--rand);
    border-radius: 4px;
    background: var(--grund);
    color: var(--schrift);
    font-size: 11.5px;
    font-family: inherit;
    outline: none;
    min-width: 130px;
    transition: border-color 0.13s ease;
}

.wz-feld:focus { border-color: var(--akzent); }

.statusleiste {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 10px;
    height: 23px;
    flex: 0 0 23px;
    background: var(--flaeche);
    border-top: 1px solid var(--rand);
    font-size: 10.5px;
    color: var(--schrift-matt);
}

.statusleiste .sl-rechts { margin-left: auto; }

/* Fenster mit Geruest: die Leisten bleiben stehen, nur der Rumpf rollt. */
.inhalt.mit-geruest {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rumpf {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.rumpf::-webkit-scrollbar { width: 11px; height: 11px; }
.rumpf::-webkit-scrollbar-track { background: transparent; }
.rumpf::-webkit-scrollbar-thumb {
    background: var(--rand-hell);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   STARTBILD
   --------------------------------------------------------------------------- */
#startbild {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: linear-gradient(165deg, #12171e 0%, #0a0d11 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#startbild.weg { opacity: 0; pointer-events: none; }

.sb-mitte { text-align: center; }

.sb-marke {
    font-size: 34px;
    font-weight: 300;
    letter-spacing: 9px;
    color: #e6ecf3;
    margin-bottom: 7px;
}

.sb-unter {
    font-size: 11px;
    letter-spacing: 2.6px;
    color: var(--schrift-matt);
    margin-bottom: 30px;
}

.sb-balken {
    width: 268px;
    height: 3px;
    margin: 0 auto 13px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.11);
    overflow: hidden;
}

.sb-balken i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--akzent);
    border-radius: 2px;
    transition: width 0.22s ease-out;
}

.sb-schritt {
    font-size: 11px;
    color: var(--schrift-matt);
    letter-spacing: 0.7px;
    min-height: 15px;
}

/* ---------------------------------------------------------------------------
   MELDUNGEN
   --------------------------------------------------------------------------- */
#meldungen {
    position: fixed;
    right: 11px;
    bottom: calc(var(--leiste-h) + 11px);
    z-index: 13000;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-end;
}

@keyframes meldung-auf {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
}

.meldung {
    min-width: 216px;
    max-width: 320px;
    padding: 10px 13px;
    background: rgba(26, 30, 37, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid var(--rand-hell);
    border-left: 3px solid var(--akzent);
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    animation: meldung-auf 0.19s cubic-bezier(0.2, 0.9, 0.3, 1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.meldung.geht { opacity: 0; transform: translateX(26px); }
.meldung .m-titel { font-size: 12px; font-weight: 600; }
.meldung .m-text  { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }

/* Ein Symbol, das gerade gezogen wird, haengt am Zeiger. */
.symbol.zieht {
    opacity: 0.82;
    transform: scale(1.06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------------
   KONSOLE IM FENSTER
   Schlicht und ohne Schauwerk: keine Woelbung, keine Blende, keine
   Seitenanzeigen. Das bleibt dem Vollbild-Terminal vorbehalten.
   --------------------------------------------------------------------------- */
.inhalt.konsole {
    display: flex;
    flex-direction: column;
    background: #0b0e12;
    font-family: 'DejaVu Sans Mono', 'Liberation Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    user-select: text;
    overflow: hidden;
}

.k-lauf {
    flex: 1;
    overflow-y: auto;
    padding: 11px 13px 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

.k-lauf::-webkit-scrollbar { width: 11px; }
.k-lauf::-webkit-scrollbar-track { background: transparent; }
.k-lauf::-webkit-scrollbar-thumb {
    background: var(--rand-hell);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.k-zeile { color: #c8d2dd; }
.k-matt  { color: #6f7c8a; }
.k-fehler, .k-zeile.k-fehler { color: #ff8f6e; }
.k-gruen { color: #7fe39a; }
.k-orange { color: #ffc451; }
.k-rot   { color: #ff8f6e; }
.k-ordner { color: #e8c66a; }

.k-eingabe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 11px;
    flex: 0 0 auto;
}

.k-frage {
    color: var(--akzent);
    white-space: nowrap;
    font-weight: 600;
}

.k-feld {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: #e2e9f0;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    caret-color: var(--akzent);
}

/* ===========================================================================
   EINSTELLBARE GROESSEN
   =========================================================================== */
:root { --ecke: 8px; --symbol: 44px; }

.fenster, .kontext, #menue, .kalender, #ablage-feld, .meldung, .dialog {
    border-radius: var(--ecke);
}

.symbol .bild { width: var(--symbol); height: var(--symbol); }
.symbol .bild svg { width: calc(var(--symbol) * 0.55); height: calc(var(--symbol) * 0.55); }

html.ohne-symbolnamen .symbol .name { display: none; }
html.ohne-glas #leiste, html.ohne-glas #menue, html.ohne-glas .kontext,
html.ohne-glas #ablage-feld, html.ohne-glas .kalender { backdrop-filter: none; }
html.ohne-bewegung * { animation: none !important; transition: none !important; }

/* Leiste am oberen Rand: Flaeche und Aufklappendes mitziehen. */
html.leiste-oben #leiste { top: 0; bottom: auto; border-top: 0;
    border-bottom: 1px solid #262d36; }
html.leiste-oben #flaeche { inset: var(--leiste-h) 0 0 0; }
html.leiste-oben #menue { top: calc(var(--leiste-h) + 7px); bottom: auto; }
html.leiste-oben #ablage-feld { top: calc(var(--leiste-h) + 7px); bottom: auto; }
html.leiste-oben #meldungen { top: calc(var(--leiste-h) + 11px); bottom: auto; }
html.leiste-oben .kalender { top: calc(var(--leiste-h) + 7px); bottom: auto; }
html.leiste-oben .vorschau { top: calc(var(--leiste-h) + 7px); bottom: auto; }

/* ===========================================================================
   RUECKFRAGE
   =========================================================================== */
@keyframes schleier-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-auf {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.schleier {
    position: fixed;
    inset: 0;
    z-index: 15000;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: schleier-auf 0.15s ease;
}

.schleier.geht { opacity: 0; transition: opacity 0.16s ease; }

.dialog {
    width: 420px;
    max-width: 90vw;
    padding: 20px 22px 16px;
    background: var(--flaeche);
    border: 1px solid var(--rand-hell);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.62);
    animation: dialog-auf 0.17s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.d-titel { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.d-text  { font-size: 12.5px; line-height: 1.6; color: var(--schrift-matt); }
.d-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.d-knopf {
    padding: 8px 17px;
    border: 1px solid var(--rand-hell);
    border-radius: 5px;
    background: transparent;
    color: var(--schrift);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.13s ease;
}

.d-knopf:hover { background: rgba(255, 255, 255, 0.09); }
.d-knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #10151b;
    font-weight: 600; }
.d-knopf.haupt:hover { filter: brightness(1.12); }

/* ===========================================================================
   SYSTEMEINSTELLUNGEN
   =========================================================================== */
.e-spalte {
    width: 226px;
    flex: 0 0 226px;
    overflow-y: auto;
    padding: 8px;
    background: var(--flaeche);
    border-right: 1px solid var(--rand);
}

.e-bereich {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.13s ease;
}

.e-bereich:hover { background: rgba(255, 255, 255, 0.055); }
.e-bereich.an    { background: var(--akzent-matt); }
.e-bereich.an .e-b-titel { color: var(--akzent); }

.e-sinn {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
}

.e-sinn svg { width: 16px; height: 16px; color: var(--schrift-matt);
    fill: none; stroke: currentColor; }
.e-bereich.an .e-sinn { background: rgba(255, 255, 255, 0.1); }
.e-bereich.an .e-sinn svg { color: var(--akzent); }
.e-b-titel { font-size: 12.5px; font-weight: 500; }
.e-b-unter { font-size: 10px; color: var(--schrift-matt); margin-top: 1px; }

.e-inhalt { flex: 1; overflow-y: auto; padding: 16px 22px 24px; min-width: 0; }

.e-ueberschrift {
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--schrift-matt);
    margin: 18px 0 6px;
}

.e-ueberschrift:first-child { margin-top: 0; }

.e-zeile {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.e-z-text { flex: 1; min-width: 0; }
.e-z-titel { font-size: 12.5px; }
.e-z-hinweis { font-size: 10.5px; color: var(--schrift-matt); margin-top: 2px;
    line-height: 1.45; }
.e-z-bedien { flex: 0 0 auto; }
.e-wert { font-size: 11px; color: var(--schrift-matt); min-width: 48px;
    font-variant-numeric: tabular-nums; }

.e-schalter {
    width: 42px; height: 23px;
    border: 0; border-radius: 12px; cursor: pointer; padding: 0;
    background: rgba(255, 255, 255, 0.16);
    position: relative;
    transition: background-color 0.16s ease;
}

.e-schalter span {
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff;
    transition: left 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.e-schalter.an { background: var(--akzent); }
.e-schalter.an span { left: 22px; }

.e-toene { display: flex; gap: 9px; flex-wrap: wrap; margin: 6px 0 4px; }

.e-ton {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.13s ease, border-color 0.13s ease;
}

.e-ton:hover { transform: scale(1.09); }
.e-ton.an { border-color: #fff; }

.e-auswahl { display: flex; gap: 3px; background: rgba(255, 255, 255, 0.05);
    padding: 3px; border-radius: 6px; }

.e-a-knopf {
    padding: 5px 12px;
    border: 0; border-radius: 4px;
    background: transparent;
    color: var(--schrift-matt);
    font-size: 11.5px; font-family: inherit; cursor: pointer;
    transition: background-color 0.13s ease, color 0.13s ease;
}

.e-a-knopf:hover { color: var(--schrift); }
.e-a-knopf.an { background: var(--akzent); color: #10151b; font-weight: 600; }

.e-knopf {
    padding: 7px 14px;
    border: 1px solid var(--rand-hell);
    border-radius: 5px;
    background: transparent;
    color: var(--schrift);
    font-size: 11.5px; font-family: inherit; cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.13s ease;
}

.e-knopf:hover { background: rgba(255, 255, 255, 0.09); }
.e-knopf.gefahr { border-color: rgba(255, 90, 50, 0.5); color: #ff8f6e; }
.e-knopf.gefahr:hover { background: rgba(255, 90, 50, 0.14); }

.e-taste {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--rand-hell);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 10.5px;
    font-family: 'DejaVu Sans Mono', monospace;
    white-space: nowrap;
}

/* ===========================================================================
   BROWSER
   =========================================================================== */
.inhalt.browser {
    display: flex;
    flex-direction: column;
    background: var(--grund);
    overflow: hidden;
}

.b-tableiste {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 5px 6px 0;
    background: var(--flaeche);
    flex: 0 0 auto;
    overflow-x: auto;
}

.b-tableiste::-webkit-scrollbar { height: 0; }

.b-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 118px;
    max-width: 210px;
    padding: 7px 8px 7px 12px;
    border-radius: 6px 6px 0 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--schrift-matt);
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.13s ease, color 0.13s ease;
}

.b-tab:hover { background: rgba(255, 255, 255, 0.09); }
.b-tab.an { background: var(--flaeche-hoch); color: var(--schrift); }
.b-tab-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.b-tab-zu {
    width: 17px; height: 17px; flex: 0 0 17px;
    border: 0; border-radius: 3px;
    background: transparent;
    color: inherit;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.6;
}

.b-tab-zu:hover { background: rgba(255, 255, 255, 0.18); opacity: 1; }
.b-tab-zu svg { width: 9px; height: 9px; }

.b-tab-neu {
    width: 26px; height: 26px;
    border: 0; border-radius: 5px;
    background: transparent;
    color: var(--schrift-matt);
    cursor: pointer; padding: 0; margin-bottom: 3px;
    display: flex; align-items: center; justify-content: center;
}

.b-tab-neu:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }
.b-tab-neu svg { width: 13px; height: 13px; }

.b-werkzeug {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    background: var(--flaeche-hoch);
    border-bottom: 1px solid var(--rand);
    flex: 0 0 auto;
}

.b-knopf {
    width: 28px; height: 28px;
    border: 0; border-radius: 5px;
    background: transparent;
    color: var(--schrift-matt);
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.13s ease, color 0.13s ease;
}

.b-knopf:hover { background: rgba(255, 255, 255, 0.1); color: var(--schrift); }
.b-knopf.aus { opacity: 0.3; cursor: default; }
.b-knopf.aus:hover { background: transparent; color: var(--schrift-matt); }
.b-knopf.an { color: var(--akzent); }
.b-knopf svg { width: 15px; height: 15px; }

.b-adresse {
    flex: 1;
    height: 28px;
    margin: 0 6px;
    padding: 0 12px;
    border: 1px solid var(--rand);
    border-radius: 14px;
    background: var(--grund);
    color: var(--schrift);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.13s ease;
}

.b-adresse:focus { border-color: var(--akzent); }

.b-lesezeichen {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    flex: 0 0 auto;
    overflow-x: auto;
}

.b-lesezeichen::-webkit-scrollbar { height: 0; }

.b-lz {
    padding: 4px 10px;
    border: 0; border-radius: 4px;
    background: transparent;
    color: var(--schrift-matt);
    font-size: 11px; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    transition: background-color 0.13s ease, color 0.13s ease;
}

.b-lz:hover { background: rgba(255, 255, 255, 0.09); color: var(--schrift); }
.b-lz-leer { font-size: 10.5px; color: var(--schrift-matt); opacity: 0.6;
    padding: 4px 6px; }

.b-buehne { flex: 1; position: relative; overflow: hidden; background: var(--grund); }
.b-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.b-start { position: absolute; inset: 0; overflow-y: auto; padding: 40px 30px; }
.b-start-kopf { text-align: center; margin-bottom: 34px; }
.b-start-marke { font-size: 30px; font-weight: 300; letter-spacing: 8px;
    color: #dbe3ec; }
.b-start-unter { font-size: 11.5px; color: var(--schrift-matt); margin-top: 6px;
    letter-spacing: 0.6px; }

.b-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
}

.b-kachel {
    padding: 15px 16px;
    border-radius: 8px;
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--ton, var(--akzent));
    cursor: pointer;
    transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1),
                background-color 0.14s ease;
}

.b-kachel:hover { background: var(--rand); transform: translateY(-2px); }
.b-k-titel { font-size: 13px; font-weight: 600; }
.b-k-unter { font-size: 10.5px; color: var(--schrift-matt); margin-top: 3px;
    line-height: 1.45; }

/* Auswahl und Ziehen in der Dateiliste. */
.tafel.auswaehlbar tr.gewaehlt td { background: var(--akzent-matt); }
.tafel.auswaehlbar tr.gewaehlt td:first-child { box-shadow: inset 2px 0 0 var(--akzent); }
.tafel tr.ziel td {
    background: var(--akzent-matt);
    box-shadow: inset 0 0 0 1px var(--akzent);
}
.tafel tr[draggable="true"] { cursor: default; }

/* ---------------------------------------------------------------------------
   SPERRBILDSCHIRM
   --------------------------------------------------------------------------- */
#sperre {
    position: fixed;
    inset: 0;
    z-index: 19000;
    background: linear-gradient(165deg, #141a22 0%, #0a0d11 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: schleier-auf 0.24s ease;
    transition: opacity 0.26s ease;
    cursor: pointer;
}

#sperre.weg { opacity: 0; }
.sp-mitte { text-align: center; }
.sp-uhr { font-size: 76px; font-weight: 200; letter-spacing: 3px; color: #e8eef5;
    line-height: 1; }
.sp-datum { font-size: 14px; color: var(--schrift-matt); margin-top: 9px;
    letter-spacing: 0.5px; }
.sp-nutzer { margin-top: 52px; }
.sp-rund {
    width: 62px; height: 62px; margin: 0 auto 11px;
    border-radius: 50%;
    background: var(--akzent);
    color: #10151b;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700;
}
.sp-name { font-size: 15px; font-weight: 600; }
.sp-wo { font-size: 11.5px; color: var(--schrift-matt); margin-top: 2px; }
.sp-hinweis { font-size: 11px; color: var(--schrift-matt); margin-top: 44px;
    opacity: 0.7; letter-spacing: 0.6px; }

/* ===========================================================================
   SYMBOLE AUF DER ARBEITSFLAECHE: FREISTEHEND
   Auf einem Schreibtisch liegen Ordner und Blaetter, keine Kacheln. Das
   farbige Kaestchen bleibt dort, wo es Ordnung schafft - in Taskleiste,
   Fenstertitel und Anwendungsmenue.
   =========================================================================== */
.symbol .bild {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: var(--symbol);
    height: var(--symbol);
}

.symbol .bild svg {
    width: 100%;
    height: 100%;
    color: var(--ton, #b9c4d0);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.symbol:hover .bild {
    transform: translateY(-2px) scale(1.06);
    box-shadow: none !important;
}

.symbol .name {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Vorschaubilder in den Einstellungen. */
.e-bilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 8px 0 6px;
}

.e-bild {
    border: 2px solid transparent;
    border-radius: 7px;
    overflow: hidden;
    cursor: pointer;
    background: var(--flaeche-hoch);
    transition: border-color 0.14s ease, transform 0.14s ease;
}

.e-bild:hover { transform: translateY(-2px); }
.e-bild.an { border-color: var(--akzent); }
.e-bild img { display: block; width: 100%; height: auto; }
.e-bild-name {
    font-size: 10.5px;
    padding: 6px 8px;
    color: var(--schrift-matt);
    text-align: center;
}
.e-bild.an .e-bild-name { color: var(--akzent); }

/* ---------------------------------------------------------------------------
   VERKNUEPFUNGEN UND PAPIERKORB
   Der kleine Pfeil unten links am Sinnbild zeigt an, dass hier nicht die
   Sache selbst liegt, sondern ein Verweis darauf - dieselbe Regel wie auf
   jedem Schreibtisch.
   --------------------------------------------------------------------------- */
.symbol.verweis .bild { position: relative; }

.symbol.verweis .bild::after {
    content: '';
    position: absolute;
    left: -2px;
    bottom: -1px;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    background: rgba(24, 30, 40, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dce4ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.symbol-feld {
    width: 84px;
    padding: 2px 4px;
    border: 1px solid var(--akzent);
    border-radius: 3px;
    background: var(--flaeche);
    color: var(--schrift);
    font-size: 11px;
    font-family: inherit;
    text-align: center;
    outline: none;
}

/* ---------------------------------------------------------------------------
   FENSTERWECHSLER (Alt+Tab)
   --------------------------------------------------------------------------- */
.wechsler {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
}

.wechsler-kasten {
    display: flex;
    gap: 9px;
    max-width: 84vw;
    overflow-x: auto;
    padding: 15px 17px;
    background: rgba(23, 27, 33, 0.97);
    backdrop-filter: blur(18px);
    border: 1px solid var(--rand-hell);
    border-radius: var(--ecke);
    box-shadow: var(--schatten);
    animation: menue-auf 0.12s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.wechsler-el {
    width: 106px;
    flex: 0 0 106px;
    padding: 12px 8px 9px;
    border-radius: 7px;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wechsler-el .bildchen { width: 34px; height: 34px; border-radius: 8px; }
.wechsler-el .bildchen svg { width: 20px; height: 20px; }
.wechsler-el.an { background: var(--akzent-matt); border-color: var(--akzent); }

.wechsler-name {
    font-size: 10.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.af-meldung {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 4px;
    font-size: 11px;
}

.af-meldung .af-zeit {
    color: var(--schrift-matt);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}