/* =========================================================
   kolOS 2.0 — Schreibtisch, Fenster, Taskleiste, Seitenleiste
   ---------------------------------------------------------
   Ergaenzt style.css. Hier steht ausschliesslich die Huelle:
   der Desktop, die Fensterverwaltung, die Taskleiste, das
   Startmenue, die Minianwendungen und die IE-Chrome.
   Der Inhalt der Seite (Panels, Karten, Gaestebuch) bleibt
   unveraendert in style.css.
   ========================================================= */

/* ---------------------------------------------------------
   Der Schreibtisch
   Fruehere Fassung war ein scrollendes Dokument. Jetzt ist der
   Koerper fest und der Inhalt scrollt INNERHALB der Fenster --
   sonst scrollt beim Ziehen eines Fensters die ganze Seite mit.
   --------------------------------------------------------- */
html.kolos, html.kolos body { height: 100%; overflow: hidden; }
body.kolos { padding: 0; margin: 0; }

#desktop {
  position: fixed;
  left: 0; right: 0; top: 0;
  bottom: var(--tb-h, 44px);
  overflow: hidden;
  z-index: 5;
}

/* Fenster liegen hier drin, damit die Symbole immer darunter bleiben. */
#winlayer { position: absolute; inset: 0; }

/* ---------------------------------------------------------
   Desktop-Symbole
   --------------------------------------------------------- */
.dicons {
  position: absolute;
  left: 10px; top: 10px; bottom: 10px;
  width: 92px;
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  z-index: 1;
}
.dicon {
  width: 88px;
  padding: 8px 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  cursor: default;
  /* Vista hat die Beschriftung auf dem Desktop hart beschattet, damit sie
     auf jedem Hintergrundbild lesbar bleibt. Genau das macht sie hier auch
     ueber dem hellen Himmel lesbar. */
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.dicon .di-ico { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.dicon .di-txt { display: block; word-break: break-word; }
.dicon:hover { background: rgba(150,205,255,.28); border-color: rgba(190,225,255,.5); }
.dicon.sel, .dicon:focus-visible {
  background: rgba(90,170,240,.45);
  border-color: rgba(190,225,255,.75);
  outline: none;
}

/* ---------------------------------------------------------
   Fenster
   --------------------------------------------------------- */
.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 260px; min-height: 140px;
  border-radius: 9px 9px 5px 5px;
  border: 1px solid rgba(255,255,255,.55);
  /* Echtes Aero-Glas: durchscheinend genug, dass der Schreibtisch
     hindurchschimmert, und stark geblurt wie bei Vista. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(240,250,255,.40) 40%, rgba(210,238,252,.46) 100%);
  box-shadow:
    0 22px 60px rgba(10,40,70,.38),
    0 2px 10px rgba(10,40,70,.22),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
  will-change: transform;
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
}
.win.inactive { box-shadow: 0 10px 30px rgba(10,40,70,.22); }
.win.inactive .win-tb { filter: saturate(.55) brightness(1.04); }
.win.min { display: none; }
.win.snap-anim, .win.wm-anim { transition: left .16s ease, top .16s ease, width .16s ease, height .16s ease; }

/* Vista-Titelleiste: Glas, Lichtkante oben, Text mit weichem Schein. */
.win-tb {
  position: relative;
  flex: 0 0 auto;
  height: 30px;
  display: flex; align-items: center; gap: 7px;
  padding: 0 6px 0 9px;
  cursor: default;
  user-select: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(210,236,252,.46) 46%, rgba(178,216,244,.42) 52%, rgba(214,240,255,.52) 100%);
  border-bottom: 1px solid rgba(120,175,215,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
}
/* Der glaenzende Bogen, der bei Aero ueber jede Titelleiste lief. */
.win-tb::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  border-radius: 8px 8px 40% 40% / 8px 8px 100% 100%;
  pointer-events: none;
}
.win-ico { font-size: 15px; line-height: 1; position: relative; z-index: 1; }
.win-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 700; color: #17384f;
  text-shadow: 0 0 5px rgba(255,255,255,1), 0 1px 0 rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 1;
}
.win-btns { display: flex; gap: 2px; position: relative; z-index: 1; }
.win-btns button {
  width: 26px; height: 19px;
  border: 1px solid rgba(120,170,205,.75);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(214,236,252,.85) 48%, rgba(180,215,242,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  color: #14364d; font: 700 11px/1 "Segoe UI", system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.win-btns button:hover { background: linear-gradient(180deg, #fff, #e6f5ff 48%, #c6e6ff); }
.win-btns button:active { background: linear-gradient(180deg, #bcdcf4, #d8eeff); }
.win-btns .wb-cls {
  width: 42px;
  border-color: rgba(190,90,90,.8);
  background: linear-gradient(180deg, rgba(255,235,235,.95), rgba(248,180,180,.9) 48%, rgba(226,110,110,.95));
  color: #5c1414;
}
.win-btns .wb-cls:hover { background: linear-gradient(180deg, #fff0f0, #ffb0b0 48%, #ef7676); }

.win-body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }

/* Der Vista-Griff unten rechts: drei Diagonalen. */
.win-grip {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 4;
  background:
    linear-gradient(135deg, transparent 45%, rgba(120,165,200,.9) 45%, rgba(120,165,200,.9) 55%, transparent 55%) no-repeat,
    linear-gradient(135deg, transparent 62%, rgba(120,165,200,.7) 62%, rgba(120,165,200,.7) 72%, transparent 72%) no-repeat;
}
.win.maxed .win-grip { display: none; }
.win.maxed { border-radius: 0; border-left: 0; border-right: 0; }

/* Unsichtbare Ziehkanten. 6 px reichen mit der Maus und stoeren nie. */
.win-edge { position: absolute; z-index: 3; }
.win-edge.n { left: 6px; right: 6px; top: -2px; height: 6px; cursor: ns-resize; }
.win-edge.s { left: 6px; right: 16px; bottom: -2px; height: 6px; cursor: ns-resize; }
.win-edge.w { top: 6px; bottom: 6px; left: -2px; width: 6px; cursor: ew-resize; }
.win-edge.e { top: 6px; bottom: 16px; right: -2px; width: 6px; cursor: ew-resize; }
.win.maxed .win-edge { display: none; }

/* Snap-Vorschau (Aero Snap) */
#snapghost {
  position: absolute; z-index: 999; pointer-events: none;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 6px;
  background: rgba(140,205,255,.30);
  box-shadow: 0 0 40px rgba(120,200,255,.6), inset 0 0 40px rgba(255,255,255,.35);
  transition: left .1s ease, top .1s ease, width .1s ease, height .1s ease;
}

/* ---------------------------------------------------------
   Taskleiste
   Ersetzt die alte Regel aus style.css (dort .taskbar) --
   diese Datei wird spaeter geladen und gewinnt.
   --------------------------------------------------------- */
:root { --tb-h: 44px; }

.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--tb-h);
  z-index: 60;
  display: flex; align-items: center; gap: 6px;
  padding: 0 0 0 4px;
  background:
    linear-gradient(180deg, rgba(40,80,115,.58) 0%, rgba(14,44,72,.74) 42%, rgba(8,28,50,.80) 50%, rgba(18,52,84,.74) 100%);
  border-top: 1px solid rgba(190,230,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 -6px 24px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
}

/* Der Start-Orb ragt oben aus der Leiste heraus, so wie bei Vista. */
.startbtn {
  flex: 0 0 auto;
  width: 52px; height: 40px;
  border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.startbtn .orb-big {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    0 0 16px rgba(120,205,255,.75);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .18s ease, transform .18s ease;
}
.startbtn:hover .orb-big { box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 0 26px rgba(150,220,255,1), inset 0 -6px 12px rgba(0,0,0,.3); }
.startbtn:active .orb-big { transform: scale(.94); }
.startbtn .orb-companion {
  width: 40px; height: 40px; border-radius: 50%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
body.startopen .startbtn .orb-big { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 30px rgba(170,230,255,1), inset 0 -6px 12px rgba(0,0,0,.3); }

/* Schnellstartleiste */
.quicklaunch {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 3px;
  padding: 0 6px;
  border-left: 1px solid rgba(0,0,0,.35);
  border-right: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.15), inset -1px 0 0 rgba(255,255,255,.15);
  height: 30px;
}
.ql {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 3px;
  background: none; color: #eaf6ff; font-size: 15px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ql:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.35); }

/* Fensterknoepfe */
.tasks {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px;
  overflow: hidden;
}
.taskbtn {
  flex: 0 1 172px; min-width: 42px;
  height: 30px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 48%, rgba(0,0,0,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  color: #eef8ff; font: 500 12px/1 "Segoe UI", system-ui, sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.taskbtn .tb-t { overflow: hidden; text-overflow: ellipsis; }
.taskbtn:hover { background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.14) 48%, rgba(0,0,0,.06)); }
.taskbtn.active {
  background: linear-gradient(180deg, rgba(180,225,255,.55), rgba(120,190,240,.30) 48%, rgba(90,160,215,.28));
  border-color: rgba(210,240,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 12px rgba(130,205,255,.5);
}

/* Infobereich */
.tray {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 2px;
  height: 30px; padding: 0 4px 0 8px;
  border-left: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.15);
}
.trayitem {
  min-width: 26px; height: 26px; padding: 0 5px;
  border: 1px solid transparent; border-radius: 3px;
  background: none; color: #eaf6ff; font-size: 13px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.trayitem:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.35); }
.trayitem.lang { font-size: 10px; font-weight: 700; }
/* style.css setzt .trayitem.sound und .trayitem.eggs mit zwei Klassen und
   gewinnt sonst gegen die einfache .trayitem-Regel hier drueber. */
.taskbar .trayitem.sound, .taskbar .trayitem.eggs {
  font-size: 13px; line-height: 1; padding: 0 5px; color: #eaf6ff;
}
.trayitem.lang .lang-alt { opacity: .55; font-weight: 400; }
.trayclock {
  padding: 0 10px; color: #eef8ff;
  font: 500 11.5px/1.25 "Segoe UI", system-ui, sans-serif;
  text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  cursor: default; background: none; border: 1px solid transparent; border-radius: 3px;
}
.trayclock:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.trayclock b { display: block; font-weight: 600; }
.trayclock small { display: block; opacity: .8; font-size: 10px; }
/* Der schmale Streifen ganz rechts: Desktop anzeigen. */
.showdesk {
  flex: 0 0 auto; width: 12px; height: var(--tb-h);
  border: 0; border-left: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
  cursor: pointer;
}
.showdesk:hover { background: rgba(255,255,255,.3); }

/* Sprechblase aus dem Infobereich */
.balloon {
  position: fixed; right: 12px; bottom: calc(var(--tb-h) + 12px);
  z-index: 70; width: min(310px, calc(100vw - 24px));
  padding: 11px 13px 12px 40px;
  border: 1px solid rgba(150,195,230,.9);
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #eaf6ff);
  box-shadow: 0 12px 34px rgba(10,40,70,.35);
  font-size: 12.5px; color: #17384f;
  animation: balloonin .26s ease both;
}
.balloon::before {
  content: attr(data-ico);
  position: absolute; left: 11px; top: 11px; font-size: 20px; line-height: 1;
}
.balloon::after {
  content: ""; position: absolute; right: 22px; bottom: -9px;
  border: 9px solid transparent; border-top-color: #eaf6ff; border-bottom: 0;
  filter: drop-shadow(0 1px 0 rgba(150,195,230,.9));
}
.balloon b { display: block; margin-bottom: 2px; font-size: 12.5px; }
.balloon .bx {
  position: absolute; right: 5px; top: 4px;
  width: 17px; height: 17px; padding: 0;
  border: 0; border-radius: 3px; background: none;
  color: #5b7f99; font-size: 12px; cursor: pointer;
}
.balloon .bx:hover { background: rgba(0,0,0,.08); }
.balloon.out { animation: balloonout .2s ease both; }
@keyframes balloonin { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes balloonout { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------------------------------------------------------
   Startmenue (echte zweispaltige Vista-Form)
   --------------------------------------------------------- */
.startmenu {
  position: fixed;
  left: 4px; bottom: calc(var(--tb-h) - 2px);
  z-index: 65;
  width: 508px; max-width: calc(100vw - 8px);
  display: grid; grid-template-columns: 246px 1fr;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg, rgba(28,68,105,.90), rgba(12,40,68,.94));
  box-shadow: 0 -6px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  overflow: hidden;
  color: #eaf6ff;
  animation: smin .16s ease both;
}
@keyframes smin { from { opacity: 0; transform: translateY(12px); } }

.sm-left {
  display: flex; flex-direction: column;
  padding: 8px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,248,255,.92));
  color: #16374e;
  border-right: 1px solid rgba(120,170,210,.5);
}
.sm-progs { flex: 1 1 auto; overflow: auto; min-height: 190px; }
.sm-item {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border: 1px solid transparent; border-radius: 4px;
  background: none; color: inherit;
  font: 500 12.5px/1.3 "Segoe UI", system-ui, sans-serif;
  text-align: left; cursor: pointer;
}
.sm-item .smi { font-size: 19px; line-height: 1; width: 22px; text-align: center; flex: 0 0 auto; }
.sm-item .smt { flex: 1 1 auto; min-width: 0; }
.sm-item .smt small { display: block; font-size: 10.5px; opacity: .62; font-weight: 400; }
.sm-item:hover, .sm-item:focus-visible {
  background: linear-gradient(180deg, rgba(230,244,255,.95), rgba(186,220,250,.95));
  border-color: rgba(130,185,225,.8);
  outline: none;
}
.sm-left hr { border: 0; border-top: 1px solid rgba(120,170,210,.4); margin: 5px 4px; }
.sm-allprogs { font-weight: 700; }
.sm-allprogs .smi { transform: rotate(0deg); transition: transform .18s ease; }
.startmenu.progs .sm-allprogs .smi { transform: rotate(90deg); }

.sm-search { flex: 0 0 auto; position: relative; margin-top: 6px; }
.sm-search input {
  width: 100%; height: 26px;
  padding: 0 26px 0 8px;
  border: 1px solid rgba(120,170,210,.85);
  border-radius: 3px;
  background: #fff; color: #16374e;
  font: 400 12px/1 "Segoe UI", system-ui, sans-serif;
}
.sm-search input:focus { outline: 2px solid rgba(120,195,250,.8); outline-offset: -1px; }
.sm-search::after {
  content: "\1F50D"; position: absolute; right: 7px; top: 5px;
  font-size: 12px; opacity: .55; pointer-events: none;
}

.sm-right { display: flex; flex-direction: column; padding: 10px 8px 6px; }
.sm-user { text-align: center; margin-bottom: 8px; }
.sm-user img {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  object-fit: cover;
}
.sm-user b { display: block; margin-top: 5px; font-size: 12.5px; }
.sm-places { flex: 1 1 auto; }
.sm-place {
  width: 100%;
  display: block; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 4px;
  background: none; color: #eaf6ff;
  font: 500 12.5px/1.3 "Segoe UI", system-ui, sans-serif;
  text-align: left; cursor: pointer;
}
.sm-place:hover, .sm-place:focus-visible {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  outline: none;
}
.sm-right hr { border: 0; border-top: 1px solid rgba(255,255,255,.22); margin: 5px 2px; }
.sm-power { display: flex; gap: 5px; justify-content: flex-end; padding-top: 6px; }
.sm-power button {
  width: 30px; height: 24px; padding: 0;
  border: 1px solid rgba(255,255,255,.35); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
  color: #eaf6ff; font-size: 13px; cursor: pointer;
}
.sm-power button:hover { background: rgba(255,255,255,.3); }

/* Suchergebnisse ersetzen die Programmliste. */
.sm-results .sm-head2 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: #5b829d; padding: 6px 8px 2px; font-weight: 700;
}
.sm-none { padding: 10px 8px; font-size: 12px; color: #5b829d; }

/* ---------------------------------------------------------
   Vista-Seitenleiste mit Minianwendungen
   --------------------------------------------------------- */
.vsidebar {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 148px;
  z-index: 2;
  padding: 10px 8px 10px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.22));
  border-left: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  scrollbar-width: thin;
}
body.nosidebar .vsidebar { display: none; }

/* Abgenommene Minianwendungen liegen frei auf dem Schreibtisch. */
.gadget.floating {
  position: absolute; z-index: 3; width: 132px;
}
.gadget { position: relative; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
/* Nichts ragt aus der Seitenleiste heraus: breite Inhalte werden
   abgeschnitten oder umbrochen, nie ueber den Rand geschoben. */
.vsidebar .gadget { overflow: hidden; }
.gadget .g-grip {
  position: absolute; right: 2px; top: 2px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transition: opacity .15s ease;
}
.gadget:hover .g-grip, .gadget:focus-within .g-grip { opacity: 1; }
.g-grip button {
  width: 16px; height: 16px; padding: 0;
  border: 1px solid rgba(120,170,210,.7); border-radius: 3px;
  background: linear-gradient(180deg, #fff, #dcefff);
  color: #16374e; font-size: 9px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.g-grip button:hover { background: linear-gradient(180deg, #fff, #bfe4ff); }
.g-grip .g-drag { cursor: move; }

/* ---------------------------------------------------------
   Internet Explorer 7
   --------------------------------------------------------- */
.ie { display: flex; flex-direction: column; height: 100%; background: #fff; }

.ie-nav {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 7px;
  background: linear-gradient(180deg, #f6fbff, #dceefc);
  border-bottom: 1px solid rgba(140,185,220,.6);
}
.ie-back, .ie-fwd {
  width: 25px; height: 25px; padding: 0;
  border: 1px solid rgba(120,170,210,.6); border-radius: 50%;
  background: linear-gradient(180deg, #d9f0ff, #9fd0f2);
  color: #0d3f6b; font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ie-back { background: linear-gradient(180deg, #d9f0ff, #7ec2ee); }
.ie-back:disabled, .ie-fwd:disabled { opacity: .4; cursor: default; }
.ie-back:not(:disabled):hover, .ie-fwd:not(:disabled):hover { background: linear-gradient(180deg, #eaf8ff, #b6e0fb); }

.ie-addr {
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; align-items: center; gap: 5px;
  height: 25px; padding: 0 2px 0 6px;
  border: 1px solid rgba(120,170,210,.85); border-radius: 3px;
  background: #fff;
}
.ie-addr img { width: 15px; height: 15px; flex: 0 0 auto; }
.ie-addr input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; background: none; color: #123;
  font: 400 12px/1 "Segoe UI", system-ui, sans-serif;
}
.ie-addr input:focus { outline: none; }
.ie-go {
  flex: 0 0 auto; width: 21px; height: 21px; padding: 0;
  border: 1px solid rgba(120,170,210,.5); border-radius: 3px;
  background: linear-gradient(180deg, #eafaff, #bfe6fb);
  color: #0d5a8c; font-size: 11px; cursor: pointer;
}
.ie-go:hover { background: linear-gradient(180deg, #fff, #a5dbfa); }
.ie-search {
  flex: 0 0 138px; height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(120,170,210,.85); border-radius: 3px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'><circle cx='5.2' cy='5.2' r='3.6' fill='none' stroke='%23789' stroke-width='1.6'/><path d='M8 8l4 4' stroke='%23789' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 6px center;
  font: 400 12px/1 "Segoe UI", system-ui, sans-serif;
  color: #123;
}
.ie-search:focus { outline: 2px solid rgba(120,195,250,.7); outline-offset: -1px; }

/* Die Tab-Reihe */
.ie-tabs {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 2px;
  padding: 4px 6px 0;
  background: linear-gradient(180deg, #dceefc, #cfe6f8);
  border-bottom: 1px solid rgba(120,170,210,.75);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.ie-tabs::-webkit-scrollbar { height: 0; }
.ie-quicktabs {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-right: 3px;
  border: 1px solid rgba(120,170,210,.7); border-radius: 3px;
  background: linear-gradient(180deg, #fff, #dcefff);
  color: #17506f; font-size: 11px; cursor: pointer;
}
.ie-quicktabs:hover { background: linear-gradient(180deg, #fff, #b8e2ff); }

/* Der Reiter selbst -- Klassen .tab/.is-active bleiben, damit die
   Umschaltlogik in script.js unveraendert weiterlaeuft. */
.ie-tabs .tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  max-width: 168px; height: 24px;
  padding: 0 11px;
  border: 1px solid rgba(120,170,210,.75); border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(214,235,250,.9));
  color: #2b5a78; font: 500 12px/1 "Segoe UI", system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  position: relative; top: 1px;
}
.ie-tabs .tab:hover { background: linear-gradient(180deg, #fff, #e6f5ff); }
.ie-tabs .tab.is-active {
  background: linear-gradient(180deg, #ffffff, #ffffff);
  color: #123; font-weight: 700;
  height: 26px;
  box-shadow: 0 -2px 6px rgba(60,130,180,.18);
  z-index: 1;
}
.ie-tabs .tab .ico { flex: 0 0 auto; }
.ie-newtab {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
  border: 1px solid transparent; border-radius: 3px 3px 0 0;
  background: none; color: #2b5a78; font-size: 14px; line-height: 1; cursor: pointer;
}
.ie-newtab:hover { background: rgba(255,255,255,.7); border-color: rgba(120,170,210,.6); }

.ie-page { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; position: relative; }
/* Der Innenabstand des Seiteninhalts. Frueher trug ihn `.window-body`;
   das Element gibt es seit dem Umbau nicht mehr, und der Text klebte
   danach an beiden Fensterkanten. */
.ie-doc { padding: 18px 24px 26px; }
/* Lange Zeilen sind auf breiten Fenstern muehsam zu lesen. */
.ie-doc .panel > p,
.ie-doc .panel > .intro p,
.ie-doc .panel > .lead { max-width: 74ch; }

.ie-status {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 22px; padding: 0 9px;
  background: linear-gradient(180deg, #f2f9ff, #dceefc);
  border-top: 1px solid rgba(140,185,220,.6);
  font: 400 11px/1 "Segoe UI", system-ui, sans-serif;
  color: #3d6b8c;
}
.ie-status .grow { flex: 1 1 auto; }
.ie-status .zone { display: flex; align-items: center; gap: 4px; }
.ie-prog {
  width: 92px; height: 9px; border-radius: 2px;
  border: 1px solid rgba(120,170,210,.7);
  background: #fff; overflow: hidden;
}
.ie-prog b {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(180deg, #b6f0a0, #4fbe3f);
  transition: width .18s linear;
}
.ie-prog[hidden] { display: none !important; }

/* Quick Tabs: Vorschaukacheln aller Reiter */
.qt-grid {
  position: absolute; inset: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 14px;
  background: linear-gradient(180deg, #eef7ff, #d6e9f8);
  overflow: auto;
}
.qt-cell {
  border: 1px solid rgba(120,170,210,.8); border-radius: 5px;
  background: #fff; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 3px 10px rgba(30,80,120,.16);
  text-align: left;
}
.qt-cell:hover { box-shadow: 0 6px 18px rgba(30,80,120,.3); border-color: #6fb6e6; }
.qt-cap {
  flex: 0 0 auto; padding: 5px 8px;
  background: linear-gradient(180deg, #f4fbff, #dceefc);
  border-bottom: 1px solid rgba(140,185,220,.6);
  font: 700 11.5px/1.3 "Segoe UI", system-ui, sans-serif; color: #17506f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qt-shot {
  flex: 1 1 auto; min-height: 92px; position: relative; overflow: hidden;
  background: #fff;
}
.qt-shot > .qt-scale {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Willkommenscenter / Computer / Editor
   --------------------------------------------------------- */
.app-pad { padding: 16px 18px 18px; }
.wc-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #4a9fd8, #1e6ba8);
  color: #fff;
}
.wc-head img { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); object-fit: cover; }
.wc-head h2 { margin: 0 0 3px; font-size: 19px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.wc-head p { margin: 0; font-size: 12.5px; opacity: .92; }
.wc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px; padding: 16px;
}
.wc-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(140,185,220,.7); border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #eaf5ff);
  cursor: pointer; text-align: left;
  font: 500 12.5px/1.35 "Segoe UI", system-ui, sans-serif; color: #16374e;
}
.wc-tile:hover { border-color: #6fb6e6; box-shadow: 0 4px 14px rgba(40,110,160,.2); }
.wc-tile .wt-ico { font-size: 24px; line-height: 1; }
.wc-tile small { display: block; font-weight: 400; opacity: .68; }

.sysprop { padding: 0; }
.sysprop .sp-band {
  padding: 14px 18px;
  background: linear-gradient(120deg, #1f6fae, #57b0e2);
  color: #fff;
}
.sysprop .sp-band b { font-size: 17px; }
.sysprop dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 0; padding: 16px 18px; font-size: 12.5px; }
.sysprop dt { color: #4b7794; }
.sysprop dd { margin: 0; color: #16374e; font-weight: 500; }
.sysprop .sp-score {
  margin: 0 18px 18px; padding: 11px 14px;
  border: 1px solid rgba(140,185,220,.7); border-radius: 6px;
  background: linear-gradient(180deg, #f6fbff, #e6f3ff);
  display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: #16374e;
}
.sysprop .sp-num {
  font-size: 30px; font-weight: 700; color: #1f6fae; line-height: 1;
}

.notepad { display: flex; flex-direction: column; height: 100%; background: #fff; }
.np-menu {
  flex: 0 0 auto; display: flex; gap: 2px; padding: 2px 4px;
  background: #f0f4f8; border-bottom: 1px solid #c8d8e4;
  font: 400 12px/1 "Segoe UI", system-ui, sans-serif; color: #234;
}
.np-menu span { padding: 4px 8px; border-radius: 3px; cursor: default; }
.np-menu span:hover { background: #d6e8f8; }
.np-text {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 10px 12px; margin: 0;
  font: 400 12.5px/1.55 Consolas, "Lucida Console", monospace;
  color: #111; white-space: pre-wrap; word-break: break-word;
}

/* ---------------------------------------------------------
   Startsequenz
   --------------------------------------------------------- */
#boot {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; color: #dfefff;
  font: 400 13px/1.5 "Segoe UI", system-ui, sans-serif;
}
#boot .boot-brand { font-size: 30px; font-weight: 200; letter-spacing: .04em; }
#boot .boot-brand b { font-weight: 600; }
#boot .boot-bar {
  width: 190px; height: 12px; border-radius: 7px;
  border: 1px solid rgba(150,200,240,.5);
  background: rgba(255,255,255,.05);
  overflow: hidden; position: relative;
}
#boot .boot-bar i {
  position: absolute; top: 0; bottom: 0; width: 56px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(120,200,255,0), #9fdcff 45%, rgba(120,200,255,0));
  animation: bootslide 1.6s linear infinite;
}
@keyframes bootslide { from { left: -60px; } to { left: 190px; } }
#boot .boot-skip {
  position: absolute; right: 16px; bottom: 14px;
  padding: 6px 12px; border: 1px solid rgba(160,210,250,.5); border-radius: 4px;
  background: rgba(255,255,255,.08); color: #cfe8ff; font-size: 12px; cursor: pointer;
}
#boot .boot-skip:hover { background: rgba(255,255,255,.18); }
#boot.welcome { background: linear-gradient(160deg, #1d4f79, #0d2c4c 70%); }
#boot .boot-user { display: none; text-align: center; }
#boot.welcome .boot-user { display: block; }
#boot.welcome .boot-brand, #boot.welcome .boot-bar { display: none; }
#boot .boot-user img {
  width: 96px; height: 96px; border-radius: 8px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 30px rgba(0,0,0,.6); object-fit: cover;
}
#boot .boot-user b { display: block; margin-top: 12px; font-size: 20px; font-weight: 400; }
#boot .boot-user small { display: block; margin-top: 5px; opacity: .7; }
#boot.gone { animation: bootgone .5s ease both; pointer-events: none; }
@keyframes bootgone { to { opacity: 0; } }

/* ---------------------------------------------------------
   Handy: Fenster werden Vollbild-Blaetter
   Unter 820 px ist ein Zieh-Desktop unbedienbar. Fenster fuellen
   dann den Schirm, die Taskleiste wird zum App-Umschalter und
   die Seitenleiste faehrt als Klappe herunter.
   --------------------------------------------------------- */
@media (max-width: 819px) {
  .win {
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
    box-shadow: none;
  }
  .win:not(.front) { display: none; }
  .win-grip, .win-edge { display: none; }
  .win-btns .wb-max { display: none; }
  .win-tb { height: 34px; }

  .dicons {
    left: 0; right: 0; top: 0; bottom: 0; width: auto;
    flex-direction: row; flex-wrap: wrap; align-content: flex-start;
    gap: 4px; padding: 12px 8px;
  }
  .dicon { width: calc(25% - 4px); }

  .vsidebar {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-height: 72%;
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.4);
    transform: translateY(100%);
    transition: transform .22s ease;
    background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.10));
  }
  body.sidebar-open .vsidebar { transform: none; }
  .vsidebar .gadget { flex: 0 0 132px; }

  .startmenu {
    left: 0; right: 0; width: auto; max-width: none;
    grid-template-columns: 1fr;
    border-radius: 8px 8px 0 0;
    max-height: 80vh; overflow: auto;
  }
  .sm-right { order: -1; border-bottom: 1px solid rgba(255,255,255,.2); }
  .sm-places { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

  .quicklaunch { display: none; }
  .taskbtn { flex: 1 1 0; min-width: 0; }
  .taskbtn .tb-t { display: none; }
  .trayclock small { display: none; }
  .showdesk { display: none; }

  .ie-search { display: none; }
  .ie-addr { font-size: 16px; }
  .ie-tabs .tab { max-width: 132px; }
  .qt-grid { grid-template-columns: 1fr 1fr; }

  /* ---- Lesbarkeit auf dem Handy ----
     Tims Meldung: Text bis an die Kante, Schrift zu gross. Der Abstand
     bleibt spuerbar, die Schrift wird eine Spur kleiner und die Zeilen
     kuerzer -- ohne dass es nach Kleingedrucktem aussieht. */
  .ie-doc { padding: 14px 16px 22px; font-size: 14.5px; }
  .ie-doc .panel > p,
  .ie-doc .panel > .intro p,
  .ie-doc .panel > .lead { max-width: none; }
  .ie-doc h1, .ie-doc .hero { font-size: 22px; line-height: 1.25; }
  .ie-doc h2 { font-size: 18px; line-height: 1.3; }
  .ie-doc h3 { font-size: 15px; }
  .ie-doc .lead { font-size: 14px; }
  .ie-doc .intro p { font-size: 14.5px; line-height: 1.6; }
  .ie-doc .footer { font-size: 11.5px; line-height: 1.6; }
  /* Formulare: volle Breite, aber mit Luft zum Rand. */
  .ie-doc input, .ie-doc textarea, .ie-doc select { font-size: 16px; }
}

/* Auf Zeigergeraeten ohne Maus sind 16-px-Griffe unbrauchbar. */
@media (hover: none) {
  .win-edge { display: none; }
  .win-grip { width: 26px; height: 26px; }
  .win-btns button { height: 24px; width: 32px; }
  .win-btns .wb-cls { width: 46px; }
  .gadget .g-grip { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .win.snap-anim, .win.wm-anim { transition: none; }
  #boot .boot-bar i { animation: none; left: 60px; }
  .startmenu, .balloon { animation: none; }
}

/* Statuszeile im Willkommenscenter (traegt das MSN-Easteregg). */
.wc-head { align-items: flex-start; }
.wc-head img { cursor: pointer; }
.wc-status { display: flex; align-items: center; gap: 6px; margin-top: 5px !important; font-size: 12px; opacity: .95; }
.wc-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8ffd0, #46c93a 60%, #248a1c);
  box-shadow: 0 0 6px rgba(120,255,120,.8);
}
/* Der "es geht rechts weiter"-Verlauf an der Reiterreihe. */
.ie-tabs { position: relative; }
.ie-tabs.more-right { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
/* Das Maskottchen als Haftnotiz in der Seitenleiste. */
.gadget-note { padding: 8px 8px 10px; }
.gadget-note .mascot { display: block; margin: 0; }

/* =========================================================
   Dunkelmodus -- die Huelle
   ========================================================= */
body.dark .win {
  background: linear-gradient(180deg, rgba(16,34,48,.78) 0%, rgba(12,28,42,.66) 34%, rgba(6,20,32,.74) 100%);
  border-color: rgba(120,180,220,.28);
  box-shadow: 0 22px 60px rgba(0,6,14,.55), 0 2px 10px rgba(0,6,14,.4), inset 0 1px 0 rgba(160,215,250,.2);
}
body.dark .win-body { background: rgba(8,20,30,.55); }
body.dark .win-tb {
  background: linear-gradient(180deg, rgba(90,130,160,.55) 0%, rgba(46,80,104,.5) 46%, rgba(30,58,80,.55) 52%, rgba(56,92,118,.55) 100%);
  border-bottom-color: rgba(120,180,220,.3);
}
body.dark .win-title { color: #dfeffa; text-shadow: 0 1px 2px rgba(0,10,20,.8); }
body.dark .win.inactive { box-shadow: 0 10px 30px rgba(0,6,14,.45); }
body.dark .taskbar {
  background: linear-gradient(180deg, rgba(16,34,50,.78) 0%, rgba(8,22,36,.86) 42%, rgba(4,14,24,.9) 50%, rgba(10,28,44,.86) 100%);
  border-top-color: rgba(120,180,220,.3);
}
body.dark .trayitem, body.dark .ql { color: #cfe6f6; }
body.dark .balloon {
  background: linear-gradient(180deg, rgba(20,40,56,.88), rgba(10,26,40,.9));
  border-color: rgba(120,180,220,.3); color: #d7e8f4;
}
body.dark .startmenu {
  background: linear-gradient(180deg, rgba(16,34,48,.9), rgba(8,22,36,.92));
  border-color: rgba(120,180,220,.3); color: #d7e8f4;
}
body.dark .sm-left { background: rgba(8,20,30,.5); border-right-color: rgba(120,180,220,.2); }
body.dark .sm-item, body.dark .sm-place { color: #d7e8f4; }
body.dark .sm-item:hover, body.dark .sm-place:hover { background: rgba(90,150,200,.22); }
body.dark .sm-search input { background: rgba(6,18,28,.7); border-color: rgba(120,180,220,.3); color: #e8f4fb; }
body.dark .sm-user b, body.dark .smt b { color: #e8f4fb; }
body.dark .smt small, body.dark .sm-sub { color: #9dbccd; }
body.dark .vsidebar {
  background: linear-gradient(180deg, rgba(14,30,44,.6), rgba(8,20,30,.5));
  border-color: rgba(120,180,220,.22);
}
body.dark .gadget { background: linear-gradient(180deg, rgba(22,46,62,.62), rgba(12,28,40,.52)); border-color: rgba(120,180,220,.25); color: #d7e8f4; }
body.dark .gadget h4 { color: #9dc7e2; }
body.dark .dialog.glass {
  background: linear-gradient(180deg, rgba(16,34,48,.82) 0%, rgba(10,26,40,.76) 50%, rgba(16,34,48,.82) 100%);
  border-color: rgba(120,180,220,.3); color: #d7e8f4;
}
body.dark .dialog .titlebar {
  background: linear-gradient(180deg, rgba(90,130,160,.5), rgba(40,72,96,.45) 50%, rgba(30,58,80,.5));
  border-bottom-color: rgba(120,180,220,.3); text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.dark .dialog .dlg-body, body.dark .dialog .dlg-text { color: #d7e8f4; }
body.dark .dialog .dlg-actions { border-top-color: rgba(120,180,220,.2); }
body.dark .booth-warn { background: linear-gradient(180deg, #3a3020, #2e2618); border-color: #6b5b30; color: #e9d9b0; }
body.dark .booth-fail { background: linear-gradient(180deg, #3a2020, #2e1818); border-color: #7a4040; color: #f0c8c8; }
body.dark .ie-nav, body.dark .ie-status { background: linear-gradient(180deg, #173342, #0f2431); border-color: rgba(120,180,220,.22); color: #c3d9e8; }
body.dark .ie-page, body.dark .notepad, body.dark .sysprop { background: rgba(10,22,32,.6); color: #d7e8f4; }
body.dark .ie-tabs .tab {
  background: linear-gradient(180deg, rgba(34,60,80,.85), rgba(18,40,56,.85));
  border-color: rgba(120,180,220,.32); color: #cfe4f2; text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
body.dark .ie-tabs .tab:hover { background: linear-gradient(180deg, #2c4e68, #1d3c52); color: #eaf6ff; }
body.dark .ie-tabs .tab.is-active {
  background: linear-gradient(180deg, #24506e, #16344a);
  color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: 0 -2px 6px rgba(0,0,0,.35);
}
body.dark .ie-newtab { color: #9dbccd; }
body.dark .ie-newtab:hover { background: rgba(255,255,255,.12); border-color: rgba(120,180,220,.4); }
body.dark .ie-quicktabs { background: linear-gradient(180deg, #2a4a60, #17324a); border-color: rgba(120,180,220,.4); color: #cfe4f2; }
body.dark .ie-addr { background: rgba(8,20,30,.72); border-color: rgba(120,180,220,.3); }
body.dark .ie-addr input, body.dark .ie-search {
  background: rgba(8,20,30,.7); border-color: rgba(120,180,220,.3); color: #e8f4fb;
}
body.dark .ie-addr input::placeholder, body.dark .ie-search::placeholder { color: #7d9bb0; }
body.dark .ie-back, body.dark .ie-fwd, body.dark .ie-go {
  background: linear-gradient(180deg, #2a4a60, #17324a); border-color: rgba(120,180,220,.4); color: #cfe4f2;
}
body.dark .win-btns button {
  background: linear-gradient(180deg, rgba(70,100,120,.8), rgba(40,64,84,.75) 48%, rgba(30,52,70,.8));
  border-color: rgba(120,180,220,.4); color: #cfe6f6;
}
body.dark .win-btns button:hover { background: linear-gradient(180deg, #4a6c86, #33526c 48%, #284258); }
body.dark .dicon { color: #fff; }

/* =========================================================
   Aero-Nachschlag (2026-09-11)
   ---------------------------------------------------------
   Das Kennzeichen von Vista war nicht die glaenzende Titel-
   leiste allein, sondern der dicke, durchscheinende GLASRAHMEN
   rings um das Fenster: aussen Glas, dann eine dunkle Haarlinie,
   dann erst der Inhalt. Genau das fehlte hier -- deshalb sah es
   nach "Farbverlauf" aus und nicht nach Aero.

   Diese Regeln stehen bewusst am Ende der Datei und ueber-
   schreiben die obigen. So bleibt die alte Fassung lesbar.
   ========================================================= */

.win {
  /* Der Glasrahmen. Oben schmaler als unten -- so war es auch. */
  padding: 4px 7px 7px;
  border-radius: 11px 11px 7px 7px;
  border: 1px solid rgba(255,255,255,.42);
  background:
    /* farbiger Schimmer, der von oben links einfaellt */
    radial-gradient(120% 80% at 15% -10%, rgba(180,235,255,.42), rgba(180,235,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(232,247,255,.26) 42%, rgba(196,231,250,.30) 100%);
  box-shadow:
    0 28px 70px rgba(8,34,60,.42),
    0 3px 12px rgba(8,34,60,.26),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  backdrop-filter: blur(34px) saturate(1.9);
}

/* Die Titelleiste sitzt IM Rahmen und bekommt eigene Rundungen. */
.win-tb {
  height: 32px;
  border-radius: 7px 7px 0 0;
  padding: 0 4px 0 9px;
  border-bottom: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(226,244,255,.44) 45%,
      rgba(168,212,242,.36) 51%,
      rgba(222,243,255,.50) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
}

/* Der Lichtbogen darf kraeftiger sein -- das ist DAS Aero-Zitat. */
.win-tb::after {
  height: 56%;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.08));
  border-radius: 7px 7px 46% 46% / 7px 7px 100% 100%;
}

/* Die dunkle Haarlinie zwischen Glas und Inhalt. Ohne sie
   verschwimmt der Rahmen mit dem Fensterinhalt. */
.win-body {
  border-radius: 0 0 5px 5px;
  box-shadow:
    0 0 0 1px rgba(38,88,124,.38),
    0 -1px 0 rgba(38,88,124,.38),
    inset 0 1px 3px rgba(10,45,75,.18);
  background: rgba(255,255,255,.055);
}

/* Der Inhalt selbst bleibt lesbar, laesst den Schreibtisch aber
   ahnen -- wie Vistas Fensterinhalt mit eingeschaltetem Glas. */
.win-body > .sn-app, .win-body > .sn-studio,
.win-body > .sn-charts, .win-body > .gb2 {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,.62), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(238,249,254,.90) 0%, rgba(214,238,251,.86) 45%, rgba(200,231,247,.88) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

/* Ein unbeteiligtes Fenster tritt zurueck: weniger Farbe, mehr Glas.
   Bei Vista war das der wichtigste Hinweis, welches Fenster gerade
   die Tastatur hat. */
.win.inactive {
  border-color: rgba(255,255,255,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(235,246,252,.18) 100%);
  box-shadow: 0 14px 38px rgba(8,34,60,.24), inset 0 1px 0 rgba(255,255,255,.6);
}
.win.inactive .win-tb { filter: saturate(.4) brightness(1.06); opacity: .92; }
.win.inactive .win-title { color: #4a687d; text-shadow: 0 0 5px rgba(255,255,255,.85); }

/* Maximiert gibt es keinen Rahmen -- so macht es Windows auch. */
.win.maxed { padding: 0; border-radius: 0; }
.win.maxed .win-tb { border-radius: 0; }
.win.maxed .win-body { border-radius: 0; }

/* Die Knoepfe etwas glaeserner und mit dem typischen Leuchten. */
.win-btns button {
  height: 20px;
  border-radius: 4px;
  border-color: rgba(255,255,255,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(206,234,252,.6) 48%, rgba(168,210,240,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(10,45,75,.18);
}
.win-btns button:hover {
  background: linear-gradient(180deg, #fff, #dff2ff 48%, #b8e2fb);
  box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(120,215,255,.9);
}
.win-btns .wb-cls:hover {
  background: linear-gradient(180deg, #fff2f2, #ffb8b8 48%, #f07d7d);
  box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(255,130,130,.9);
}

/* Dunkelmodus: dasselbe Glas, nur nachts. */
body.dark .win {
  border-color: rgba(150,205,240,.22);
  background:
    radial-gradient(120% 80% at 15% -10%, rgba(90,170,220,.24), rgba(90,170,220,0) 60%),
    linear-gradient(180deg, rgba(38,66,90,.52) 0%, rgba(22,42,60,.42) 100%);
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
body.dark .win-tb {
  background: linear-gradient(180deg, rgba(70,110,140,.6) 0%, rgba(36,64,88,.42) 48%, rgba(52,88,116,.46) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
body.dark .win-tb::after { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
body.dark .win-body { box-shadow: 0 0 0 1px rgba(120,180,220,.28), inset 0 1px 3px rgba(0,0,0,.4); }
body.dark .win-body > .sn-app, body.dark .win-body > .sn-studio,
body.dark .win-body > .sn-charts, body.dark .win-body > .gb2 {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(120,190,235,.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(22,41,58,.92), rgba(16,31,44,.9));
}

/* Weniger Bewegung, weniger Glas: wer das eingestellt hat, bekommt
   ruhigere Flaechen statt teurer Unschaerfe. */
@media (prefers-reduced-transparency: reduce) {
  .win, .win-tb { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .win { background: linear-gradient(180deg, rgba(242,251,255,.96), rgba(214,238,251,.96)); }
}