/* Jahrgang 2009: Windows-7-Desktop mit Aero-Glas auf 7.css.
   Zähler und 88x31-Buttons kommen aus ../css/common.css, Fenster, Taskleiste und
   Startmenü aus ../js/desktop.js, Gadgets und Aero Peek aus ../js/seven.js. */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 54px;              /* Platz für die Superbar */
  color: #000;
  background: #1650a8;
  font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;
}
/* Wallpaper: Blau mit leuchtender Flagge und Lichtstreifen, bleibt beim Scrollen stehen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' opacity='.92'%3E%3Cpath d='M8 22 Q30 12 55 20 L55 48 Q30 40 8 50 Z' fill='%23f65314'/%3E%3Cpath d='M62 18 Q90 8 112 14 L112 42 Q90 36 62 46 Z' fill='%237cbb00'/%3E%3Cpath d='M8 56 Q30 46 55 54 L55 82 Q30 74 8 84 Z' fill='%2300a1f1'/%3E%3Cpath d='M62 52 Q90 42 112 48 L112 76 Q90 70 62 80 Z' fill='%23ffbb00'/%3E%3C/g%3E%3C/svg%3E") no-repeat 66% 44% / 240px auto,
    radial-gradient(ellipse 55% 45% at 66% 45%, rgba(150, 215, 255, .5) 0, rgba(70, 150, 240, .2) 40%, transparent 72%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 31%, transparent 33.5%),
    linear-gradient(108deg, transparent 52%, rgba(255, 255, 255, .06) 53%, transparent 55.5%),
    linear-gradient(120deg, transparent 70%, rgba(255, 255, 255, .05) 71%, transparent 73%),
    linear-gradient(180deg, #2a6ac9 0%, #1650a8 35%, #0c3a86 65%, #062559 100%);
}

a { color: #0066cc; }
a:hover { color: #3399ff; }
a:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }

/* ---------- Desktop-Layout ---------- */

.desktop {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 170px;
  gap: 12px 20px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 16px 16px 24px;
  box-sizing: border-box;
}
.defs { position: absolute; }

.icons { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.icon {
  width: 96px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.25;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .7);
}
.icon svg { width: 48px; height: 48px; display: block; margin: 0 auto 4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.icon:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.icon.selected,
.icon:focus-visible { background: linear-gradient(rgba(120, 180, 255, .35), rgba(60, 120, 220, .45)); border-color: rgba(150, 200, 255, .75); outline: none; }

.windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.win-wide { grid-column: 1 / -1; }
.window { min-width: 0; }
.window.dragging { user-select: none; }
.window.maximized { grid-column: 1 / -1; }
@media (min-width: 821px) { .windows > .window > .title-bar { touch-action: none; } }

/* Fenster-Chrome */
h2.title-bar-text {
  flex: 1;
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.window-body > .menubar {
  list-style: none;
  margin: calc(var(--w7-w-space) * -1) calc(var(--w7-w-space) * -1) var(--w7-w-space);
  padding: 4px 8px;
  display: flex;
  gap: 14px;
  background: #f0f0f0;
  border-bottom: 1px solid #dcdcdc;
}
.menubar li { cursor: default; }
.window-body p { margin: 0 0 8px; }
.window-body > :last-child { margin-bottom: 0; }
.field-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }

/* ---------- Willkommen (Editor) ---------- */

.window-body .notepad {
  margin: 0 0 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid #c9c9c9;
  font: 13px/1.45 Consolas, "Lucida Console", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Über mich ---------- */

.tabs [role="tabpanel"] { padding: 12px; }
.profile { display: flex; gap: 14px; align-items: flex-start; }
.photo {
  flex: 0 0 auto;
  width: 80px;
  height: 96px;
  object-fit: cover;
  border: 1px solid #9aa9b8;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.props { table-layout: auto; white-space: normal; background: transparent; border: 0; }
.props th, .props td {
  white-space: normal;
  overflow: visible;
  border: 0 !important;
  padding: 2px 10px 2px 0;
  height: auto;
  text-align: left;
  vertical-align: top;
  background: none !important;
}
.props th { font-weight: 600; }

.buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* Links, die wie Windows-7-Buttons aussehen (7.css stylt nur <button>) */
.btn {
  box-sizing: border-box;
  display: inline-block;
  min-width: 75px;
  padding: 3px 12px;
  border: 1px solid #707070;
  border-radius: 3px;
  background: linear-gradient(#f2f2f2, #ebebeb 45%, #dddddd 45%, #cfcfcf);
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.btn:hover { border-color: #3c7fb1; background: linear-gradient(#eaf6fd, #d9f0fc 45%, #bee6fd 45%, #a7d9f5); color: #000; }
.btn:active { background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .2); }

/* ---------- Philosophie (WordPad mit Ribbon) ---------- */

.ribbon {
  margin: calc(var(--w7-w-space) * -1) calc(var(--w7-w-space) * -1) 0;
  background: #fff;
  border-bottom: 1px solid #b6bccc;
  font-size: 11px;
}
.ribbon-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 4px 8px 0; background: linear-gradient(#dfe9f5, #c9d9ec); }
.rt { padding: 3px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; color: #15428b; }
.rt.active { background: #fff; border-color: #b6bccc; }
.rt-file { padding: 3px 12px; margin-right: 6px; border-radius: 3px 3px 0 0; background: linear-gradient(#6fb1e8, #2e7ed8); color: #fff; font-weight: 600; }
.ribbon-band { display: flex; padding: 6px 8px 4px; background: linear-gradient(#fdfdfe, #eef2f8); overflow-x: auto; }
.rb-group { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 10px; border-right: 1px solid #d5dbe6; white-space: nowrap; }
.rb-group:last-child { border-right: 0; }
.rb-items { display: flex; align-items: center; gap: 4px; }
.rb-big { padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; }
.rb-stack { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
.rb-field { min-width: 28px; padding: 2px 6px; border: 1px solid #abadb3; border-radius: 2px; background: #fff; }
.rb-field.wide { min-width: 100px; }
.rb-btn { min-width: 20px; padding: 2px 5px; border: 1px solid transparent; border-radius: 2px; text-align: center; }
.rb-label { color: #4c607a; }
.wordpad-bg {
  margin: 0 calc(var(--w7-w-space) * -1) calc(var(--w7-w-space) * -1);
  padding: 16px;
  background: #e9e9e9;
}
.wordpad-page {
  max-width: 72ch;
  margin: 0 auto;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid #c6c6c6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  font: 14px/1.6 Calibri, "Segoe UI", "Noto Sans", sans-serif;
}
.wordpad-page h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.wordpad-page p { margin: 0 0 10px; }
.wordpad-page p:last-child { margin-bottom: 0; }

/* ---------- Projekte (Explorer mit Navigationsbereich) ---------- */

.addressrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(#fbfbfb, #ececec);
  border-bottom: 1px solid #d5d5d5;
}
.navbtns { display: inline-flex; gap: 3px; }
.nb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #7fc4ff, #1f6fd6 70%, #0b3d8a);
  color: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.breadcrumb {
  flex: 1;
  min-width: 0;
  height: 24px;
  box-sizing: border-box;
  padding: 0 8px;
  line-height: 22px;
  background: #fff;
  border: 1px solid #abadb3;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addressrow .searchbox { flex: 0 0 auto; }
.addressrow .searchbox input[type="search"] { width: 170px; }
.explorer7-panes { display: flex; min-height: 220px; }
.navpane { flex: 0 0 180px; border-right: 1px solid #e3e3e3; background: #fff; overflow: auto; }
.navpane .tree-view { padding: 8px; }
.navpane summary { font-weight: 600; color: #1e395b; cursor: pointer; }
.explorer7 .content { flex: 1; min-width: 0; background: #fff; padding: 6px 10px; }
.details-pane {
  padding: 8px 12px;
  background: linear-gradient(#f7f9fc, #e6edf6);
  border-top: 1px solid #d5dde8;
  font-size: 11px;
  color: #1e395b;
}

/* ---------- Links ---------- */

.linklist { margin: 0; padding-left: 18px; }
.webring { text-align: center; font-weight: 600; }
.small { font-size: 11px; color: #555; }

/* ---------- Gästebuch ---------- */

.entries { min-height: 60px; margin: 0 0 10px; padding: 10px; background: #fff; border: 1px solid #c9c9c9; border-radius: 2px; }
.entries .empty { margin: 0; color: #666; font-style: italic; }

/* ---------- Minianwendungen ---------- */

.gadgets { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.gadget {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.gadget-clock svg { display: block; width: 100%; height: auto; }
.gadget-clock .face { fill: url(#g-face); stroke: #2b3a4d; stroke-width: 3; }
.gadget-clock .tick { stroke: #2b3a4d; stroke-width: 2; }
.gadget-clock .hand { stroke: #1b2430; stroke-width: 3; stroke-linecap: round; }
.gadget-clock .hand.minute { stroke-width: 2.2; }
.gadget-clock .hand.second { stroke: #d0342c; stroke-width: 1.2; }
.gadget-clock .cap { fill: #1b2430; }
.gadget-cal { text-align: center; padding: 8px 10px; }
.cal-wd { display: block; font-size: 12px; opacity: .9; }
.cal-day { display: block; font-size: 44px; line-height: 1; font-weight: 300; }
.cal-month { display: block; font-size: 12px; }
.gadget-note { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gadget-note .note {
  padding: 12px 12px 16px;
  background: linear-gradient(#fff7a8, #ffe860);
  color: #5a4a00;
  text-shadow: none;
  font: 13px/1.4 "Segoe Print", "Comic Sans MS", cursive;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, .4);
  border-radius: 2px;
  transform: rotate(-1.5deg);
}
.gadget-note b { display: block; margin-bottom: 4px; }
html:not(.js) .gadget-cal,
html:not(.js) .gadget-clock { display: none; }

/* Aero Peek */
body.peek .windows .window { opacity: .12; transition: opacity .2s; }

/* ---------- Startmenü ---------- */

.startmenu {
  position: fixed;
  left: 0;
  bottom: 40px;
  z-index: 1000;
  display: flex;
  width: 400px;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(rgba(70, 110, 170, .85), rgba(35, 65, 120, .93));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 2px 2px 10px rgba(0, 0, 0, .6);
  font-size: 12px;
}
.sm-left { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #6d7fa0; border-radius: 4px; }
.sm-programs { list-style: none; margin: 0; padding: 6px 0; flex: 1; }
.sm-programs li.sep,
.sm-places li.sep { height: 1px; margin: 6px 10px; background: linear-gradient(90deg, transparent, #c6ccd8, transparent); }
.sm-programs a { display: flex; align-items: center; gap: 8px; padding: 5px 12px; color: #000; text-decoration: none; }
.sm-programs a svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sm-programs a:hover,
.sm-programs a:focus { background: linear-gradient(#e8f2fc, #cfe4f7); outline: 1px solid #9dc5e6; outline-offset: -1px; }
.sm-search { padding: 6px 8px 8px; border-top: 1px solid #dfe5ee; }
.sm-search input { width: 100%; box-sizing: border-box; }
.sm-right { flex: 0 0 150px; display: flex; flex-direction: column; padding: 4px 6px 4px 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sm-user { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 10px; }
.sm-user img { width: 52px; height: 52px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .85); border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.sm-places { list-style: none; margin: 0; padding: 0; flex: 1; }
.sm-places li.sep { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); }
.sm-places a { display: block; padding: 4px 8px; color: #fff; text-decoration: none; border-radius: 3px; }
.sm-places a:hover,
.sm-places a:focus { background: rgba(255, 255, 255, .2); outline: none; }
.sm-foot { padding: 8px 0 4px; text-align: right; }
.sm-foot a {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid rgba(0, 0, 0, .6);
  border-radius: 3px;
  background: linear-gradient(#f2f2f2, #ebebeb 45%, #dddddd 45%, #cfcfcf);
  color: #000;
  text-decoration: none;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.sm-foot a:hover { border-color: #3c7fb1; background: linear-gradient(#eaf6fd, #d9f0fc 45%, #bee6fd 45%, #a7d9f5); }

/* ---------- Dialog ---------- */

#overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .2); }
.dialog { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 380px; max-width: calc(100% - 20px); }
.dialog[role="dialog"]:not([hidden]) { opacity: 1; visibility: visible; }
.dialog-body { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.dialog-icon { flex: 0 0 auto; width: 40px; height: 40px; }

/* ---------- Superbar ---------- */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  padding: 0 0 0 2px;
  background: linear-gradient(rgba(40, 70, 120, .55), rgba(15, 30, 55, .82));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
  overflow-x: auto;
  overflow-y: hidden;
}
.start { flex: 0 0 auto; width: 54px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.start svg { width: 38px; height: 38px; filter: drop-shadow(0 0 3px rgba(80, 160, 255, .8)); transition: filter .2s; }
.start:hover svg,
.start.pressed svg { filter: drop-shadow(0 0 7px rgba(140, 210, 255, 1)) brightness(1.15); }
.task {
  flex: 0 1 190px;
  min-width: 44px;
  margin: 3px 2px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.task svg { width: 22px; height: 22px; flex: 0 0 auto; }
.task:hover { background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); border-color: rgba(255, 255, 255, .35); color: #fff; }
.task.pressed {
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .12));
  border-color: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .35);
}
.tray {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 12px;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.tray svg { width: 16px; height: 16px; }
.clockbox { display: flex; flex-direction: column; align-items: center; line-height: 1.25; padding: 0 4px; }
html:not(.js) .clockbox { display: none; }
.show-desktop {
  width: 11px;
  align-self: stretch;
  margin-left: 6px;
  border-left: 1px solid rgba(0, 0, 0, .5);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .3);
  background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
}
.show-desktop:hover,
.show-desktop[aria-pressed="true"] { background: rgba(255, 255, 255, .35); }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 1100px) {
  .desktop { grid-template-columns: 110px minmax(0, 1fr); }
  .gadgets { display: none; }
}
@media (max-width: 820px) {
  .desktop { grid-template-columns: minmax(0, 1fr); padding: 12px 10px 20px; }
  .icons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 2px; padding-top: 0; }
  .icon { width: 84px; }
  .windows { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .profile { flex-direction: column; }
  .explorer7-panes { flex-direction: column; }
  .navpane { flex-basis: auto; border-right: 0; border-bottom: 1px solid #e3e3e3; }
  .addressrow { flex-wrap: wrap; }
  .task span { display: none; }
  .task { flex: 0 0 auto; padding: 0 6px; }
  .startmenu { width: calc(100% - 8px); }
  .sm-right { flex-basis: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.peek .windows .window { transition: none; }
  .start svg { transition: none; }
}