/* ================================================================
   Schergen Corp – Windows-XP-Ansicht für alle Werkzeuge
   Eine Haut über der 98er-Ansicht: greift nur bei
   <html data-theme="win98" data-skin="xp">. Fenster, Taskleiste und
   alle werkzeugeigenen 98er-Regeln gelten weiter; hier wird nur die
   Optik getauscht – Luna-Blau, runde Titelleisten, grüner Start-Knopf,
   Hügel und Himmel.

   Spezifität: :root[…][…] schlägt die 98er-Regeln (:root[…]) von
   selbst. Nur bei Rundungen nicht – win98.css nimmt sie mit
   !important überall weg. Wo XP rund sein muss, steht deshalb
   html:root[…][…] davor: gleich stark, und diese Datei kommt später.
   ================================================================ */

:root[data-theme="win98"][data-skin="xp"] {
  --bg:            #3a6ea5;
  --bg-2:          #ece9d8;
  --surface-2:     #f4f3ee;
  --line:          #aca899;
  --line-soft:     #d8d4c4;
  --accent:        #0b46c2;
  --accent-strong: #0b46c2;

  --w-face:    #ece9d8;
  --w-light:   #f1efe2;
  --w-hi:      #ffffff;
  --w-shadow:  #aca899;
  --w-dark:    #716f64;
  --w-title:   linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%,
                               #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  --w-desktop: #3a6ea5;
  --w-xp:      "Trebuchet MS", Tahoma, var(--w-ui);
  --w-select:  #316ac5;

  /* XP kennt kaum noch 3D-Kanten – dünne Linien statt Treppen */
  --w-raised:  inset 0 0 0 1px #aca899;
  --w-pressed: inset 0 0 0 1px #716f64, inset 1px 1px 2px rgba(0, 0, 0, .2);
  --w-sunken:  inset 0 0 0 1px #7f9db9;
  --w-field:   inset 0 0 0 1px #aca899;
}

/* Bliss, so gut es ohne Bilddatei geht: Himmel, zwei Wolken, Hügel */
:root[data-theme="win98"][data-skin="xp"] body {
  background:
    radial-gradient(ellipse 130% 60% at 30% 112%, #86c64a 0%, #5ba530 38%, #3f8b22 57%, transparent 59.5%),
    radial-gradient(ellipse 80% 42% at 100% 112%, #73b83d 0%, #4d9728 55%, transparent 58%),
    radial-gradient(ellipse 22% 7% at 22% 24%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(ellipse 16% 5% at 31% 21%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(ellipse 20% 6% at 74% 33%, rgba(255, 255, 255, .6), transparent 70%),
    linear-gradient(180deg, #245ec8 0%, #3f82e0 32%, #8bbcf1 66%, #cfe5fb 84%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="win98"][data-skin="xp"] a         { color: #0b46c2; }
:root[data-theme="win98"][data-skin="xp"] a:visited { color: #5a2a96; }
:root[data-theme="win98"][data-skin="xp"] ::selection { background: #316ac5; color: #fff; }

/* ----------------------------------------------------------------
   Fenster
   ---------------------------------------------------------------- */
:root[data-theme="win98"][data-skin="xp"] [data-win] {
  padding-top: 38px !important;           /* Titelleiste ist 28 statt 18 px hoch */
  box-shadow:
    inset -1px -1px #00138c, inset 1px 1px #0831d9,
    inset -2px -2px #001ea0, inset 2px 2px #166aee,
    inset -3px -3px #003bda, inset 3px 3px #0855dd,
    3px 4px 10px rgba(0, 0, 0, .35);
}
html:root[data-theme="win98"][data-skin="xp"] [data-win] { border-radius: 8px 8px 0 0 !important; }

:root[data-theme="win98"][data-skin="xp"] [data-win]::before {
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  padding: 0 84px 0 10px;
  border-radius: 7px 7px 0 0;
  background: var(--w-title);
  font: bold 13px/28px var(--w-xp);
  text-shadow: 1px 1px #0f1089;
}
/* Minimieren, Maximieren, Schließen – das rote X */
:root[data-theme="win98"][data-skin="xp"] [data-win]::after {
  top: 4px;
  right: 5px;
  width: 67px;
  height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67' height='21'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236d9dfc'/%3E%3Cstop offset='1' stop-color='%231c4ed3'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f3a28b'/%3E%3Cstop offset='1' stop-color='%23c8361a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='20' height='20' rx='3' fill='url(%23b)' stroke='%23fff'/%3E%3Crect x='5' y='13' width='7' height='3' fill='%23fff'/%3E%3Crect x='23.5' y='.5' width='20' height='20' rx='3' fill='url(%23b)' stroke='%23fff'/%3E%3Crect x='28.5' y='5.5' width='10' height='10' fill='none' stroke='%23fff'/%3E%3Crect x='28' y='5' width='11' height='3' fill='%23fff'/%3E%3Crect x='46.5' y='.5' width='20' height='20' rx='3' fill='url(%23r)' stroke='%23fff'/%3E%3Cpath d='M51.5 5.5l10 10M61.5 5.5l-10 10' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat;
}

/* ----------------------------------------------------------------
   Taskleiste – Luna-Blau, grüner Start-Knopf, hellblauer Infobereich
   ---------------------------------------------------------------- */
:root[data-theme="win98"][data-skin="xp"] .topbar {
  min-height: 34px;
  padding: 0 0 0 0;
  align-items: stretch;
  background: linear-gradient(180deg, #1f2f86 0%, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%,
                              #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%,
                              #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
  box-shadow: none;
  color: #fff;
}
:root[data-theme="win98"][data-skin="xp"] .topbar__right { align-items: center; gap: 4px; }
:root[data-theme="win98"][data-skin="xp"] .topbar__note,
:root[data-theme="win98"][data-skin="xp"] .topbar__user { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); }

:root[data-theme="win98"][data-skin="xp"] .sc-home {
  padding: 0 22px 0 10px;
  color: #fff;
  background: linear-gradient(180deg, #5fbf5f 0%, #3c9d3c 12%, #2f8f2f 50%, #2a862a 85%, #1f6b1f 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 2px 0 4px rgba(0, 0, 0, .4);
  font: italic bold 15px var(--w-xp);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
}

/* Das Werkzeug: gedrückter Taskleisten-Knopf */
:root[data-theme="win98"][data-skin="xp"] .topbar__brand,
:root[data-theme="win98"][data-skin="xp"] .brand {
  margin-left: 8px;
  padding: 3px 12px 3px 8px;
  border: 1px solid #1c3f94;
  background: linear-gradient(180deg, #1e52b7, #1941a5);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .45);
  color: #fff;
  font: 12px var(--w-ui);
  text-shadow: none;
}
html:root[data-theme="win98"][data-skin="xp"] .sc-home { border-radius: 0 14px 14px 0 !important; }
html:root[data-theme="win98"][data-skin="xp"] .topbar__brand,
html:root[data-theme="win98"][data-skin="xp"] .brand { border-radius: 3px !important; }

/* Knöpfe in der Taskleiste wie laufende Programme */
:root[data-theme="win98"][data-skin="xp"] .topbar .btn {
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid #1c4bb8;
  background: linear-gradient(180deg, #4b9bff 0%, #3c81f3 10%, #2f6fe8 90%, #2558c9 100%);
  color: #fff;
  box-shadow: inset 1px 1px rgba(255, 255, 255, .3);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
}
:root[data-theme="win98"][data-skin="xp"] .topbar .btn:hover {
  border: 1px solid #1c4bb8;
  background: linear-gradient(180deg, #6bb0ff, #4a90f6 10%, #3d7ff0 90%, #2f66d6);
  box-shadow: inset 1px 1px rgba(255, 255, 255, .3);
}
:root[data-theme="win98"][data-skin="xp"] .topbar .btn:active,
:root[data-theme="win98"][data-skin="xp"] .sc-theme-toggle[aria-pressed="true"] {
  background: #1e52b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .4);
}
html:root[data-theme="win98"][data-skin="xp"] .topbar .btn { border-radius: 3px !important; }

:root[data-theme="win98"][data-skin="xp"] .sc-tray {
  align-self: stretch;
  height: auto;
  margin-left: 6px;
  padding: 0 12px;
  border-left: 1px solid #1042af;
  background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%,
                              #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%,
                              #137ed7 97%, #095bc9 100%);
  box-shadow: inset 1px 0 1px #18bbff;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

/* Schalter auf der Anmeldeseite */
:root[data-theme="win98"][data-skin="xp"] .sc-theme-float {
  padding: 4px;
  background: linear-gradient(180deg, #3682e5, #2157d6 40%, #1941a5);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .35);
}
:root[data-theme="win98"][data-skin="xp"] .sc-theme-float .btn {
  border: 1px solid #1c4bb8;
  background: linear-gradient(180deg, #4b9bff 0%, #3c81f3 10%, #2f6fe8 90%, #2558c9 100%);
  color: #fff;
}
html:root[data-theme="win98"][data-skin="xp"] .sc-theme-float { border-radius: 4px !important; }

/* ----------------------------------------------------------------
   Knöpfe, Reiter, Felder
   ---------------------------------------------------------------- */
:root[data-theme="win98"][data-skin="xp"] .btn {
  min-height: 23px;
  border: 1px solid #003c74;
  background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
  color: #000;
  box-shadow: none;
  font: 12px var(--w-ui);
}
:root[data-theme="win98"][data-skin="xp"] .btn:hover {
  border: 1px solid #003c74;
  background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
  box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}
:root[data-theme="win98"][data-skin="xp"] .btn:active {
  background: linear-gradient(180deg, #cdcac3 0%, #e3e3db 8%, #e5e5de 94%, #f2f2f1 100%);
  box-shadow: none;
}
:root[data-theme="win98"][data-skin="xp"] .btn--primary,
:root[data-theme="win98"][data-skin="xp"] .btn:focus-visible {
  box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6,
              inset 1px -1px #89ade4, inset 2px -2px #89ade4;
}
:root[data-theme="win98"][data-skin="xp"] .btn:disabled {
  border-color: #c9c7ba;
  background: #f5f4ea;
  color: #aca899;
  text-shadow: none;
  box-shadow: none;
}
html:root[data-theme="win98"][data-skin="xp"] .btn { border-radius: 3px !important; }

:root[data-theme="win98"][data-skin="xp"] .tab,
:root[data-theme="win98"][data-skin="xp"] .groupbar__item {
  margin-right: 1px;
  border: 1px solid #919b9c;
  border-bottom: 0;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 80%, #d8d2bd 100%);
  box-shadow: none;
}
:root[data-theme="win98"][data-skin="xp"] .tab.is-active,
:root[data-theme="win98"][data-skin="xp"] .groupbar__item.is-active {
  background: #fcfcfe;
  box-shadow: inset 0 2px #e68b2c, inset 0 3px #ffc73c;
}
html:root[data-theme="win98"][data-skin="xp"] .tab,
html:root[data-theme="win98"][data-skin="xp"] .groupbar__item { border-radius: 3px 3px 0 0 !important; }

:root[data-theme="win98"][data-skin="xp"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="win98"][data-skin="xp"] select,
:root[data-theme="win98"][data-skin="xp"] textarea {
  border: 1px solid #7f9db9;
  box-shadow: none;
}
:root[data-theme="win98"][data-skin="xp"] input:focus,
:root[data-theme="win98"][data-skin="xp"] select:focus,
:root[data-theme="win98"][data-skin="xp"] textarea:focus { border: 1px solid #316ac5; box-shadow: none; }

/* ----------------------------------------------------------------
   Statusleiste, Sprechblase, Texte auf dem Desktop
   ---------------------------------------------------------------- */
:root[data-theme="win98"][data-skin="xp"] .foot {
  border-top: 1px solid #aca899;
  box-shadow: 0 -1px 0 #fff inset, 3px 4px 10px rgba(0, 0, 0, .25);
}

:root[data-theme="win98"][data-skin="xp"] .toast {
  box-shadow: 2px 3px 6px rgba(0, 0, 0, .35);
  font: 12px var(--w-ui);
}
html:root[data-theme="win98"][data-skin="xp"] .toast { border-radius: 7px !important; }

/* Weiß auf Himmel und Wiese braucht einen Schatten */
:root[data-theme="win98"][data-skin="xp"] .shell > h1,
:root[data-theme="win98"][data-skin="xp"] .shell > p,
:root[data-theme="win98"][data-skin="xp"] .hero__meta { text-shadow: 1px 1px 2px rgba(0, 0, 0, .75); }
:root[data-theme="win98"][data-skin="xp"] .hero .hero__meta { text-shadow: none; }

/* ----------------------------------------------------------------
   Startseite: Kacheln mit hellerem Titel beim Darüberfahren,
   geplante wie inaktive Fenster
   ---------------------------------------------------------------- */
:root[data-theme="win98"][data-skin="xp"] .tile:hover::before {
  background: linear-gradient(180deg, #3aa8ff 0%, #1a6ef5 8%, #1a6bf5 40%, #2b84ff 88%, #1a5ae0 100%);
}
:root[data-theme="win98"][data-skin="xp"] .tile--planned::before {
  background: linear-gradient(180deg, #a8c0f0 0%, #7a96df 10%, #7b98e0 90%, #6e8ad8 100%);
}

/* Explorer-Spaltenköpfe */
:root[data-theme="win98"][data-skin="xp"] .table th,
:root[data-theme="win98"][data-skin="xp"] .table__row--head,
:root[data-theme="win98"][data-skin="xp"] .table__row--head:nth-child(odd),
:root[data-theme="win98"][data-skin="xp"] .pruef--kopf {
  background: linear-gradient(180deg, #fff 0%, #f1efe2 80%, #e2decd 100%);
  box-shadow: inset -1px 0 #d6d2c2, inset 0 -3px #e2decd;
}

/* Ansichtswahl: Klappfeld mit hellblauem Pfeilknopf */
:root[data-theme="win98"][data-skin="xp"] .sc-theme-select {
  height: 22px;
  border: 1px solid #7f9db9;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dce6fe'/%3E%3Cstop offset='1' stop-color='%23a9c0f7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='16' height='17' rx='2' fill='url(%23g)' stroke='%23b5c8f7'/%3E%3Cpath d='M5 7.5l3.5 3.5 3.5-3.5' fill='none' stroke='%234d6185' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1px center;
  box-shadow: none;
}