/* dptrs 98 - Grundwerte. Farben und Bevel-Listen stammen aus dem Designsystem der Finanzen-App
   (referenz-finanzen-app.css) und sind hier unveraendert uebernommen; ergaenzt sind nur die
   Werte, die der Desktop zusaetzlich braucht (inaktive Titelleiste, Tooltip-Gelb, Taskleistenhoehe). */

:root {
  --grau: #c0c0c0;
  --grau-hell: #dfdfdf;
  --weiss: #ffffff;
  --grau-dunkel: #808080;
  --schwarz: #0a0a0a;
  --navy: #000080;
  --navy-hell: #1084d0;
  --desktop: #008080;
  --text: #000000;
  --text-leise: #404040;
  --link: #0000ee;
  --rot: #b00000;
  --schrift: Tahoma, Verdana, "Segoe UI", sans-serif;
  --mono: Fixedsys, "Lucida Console", "Courier New", monospace;
  --serif: "Times New Roman", Times, serif;

  --bevel-erhoben: inset -1px -1px var(--schwarz), inset 1px 1px var(--weiss),
    inset -2px -2px var(--grau-dunkel), inset 2px 2px var(--grau-hell);
  --bevel-gedrueckt: inset -1px -1px var(--weiss), inset 1px 1px var(--schwarz),
    inset -2px -2px var(--grau-hell), inset 2px 2px var(--grau-dunkel);
  --bevel-feld: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel),
    inset -2px -2px var(--grau-hell), inset 2px 2px var(--schwarz);
  --bevel-flach-hinein: inset -1px -1px var(--weiss), inset 1px 1px var(--grau-dunkel);
  --bevel-flach-heraus: inset -1px -1px var(--grau-dunkel), inset 1px 1px var(--weiss);
  --titel-verlauf: linear-gradient(90deg, var(--navy), var(--navy-hell));

  /* Zusaetze des Desktops */
  --titel-inaktiv: linear-gradient(90deg, var(--grau-dunkel), #b5b5b5);
  --tip: #ffffe1;
  --dither: repeating-conic-gradient(var(--grau) 0% 25%, var(--weiss) 0% 50%) 0 0 / 2px 2px;
  --tbh: 28px;               /* Hoehe der Taskleiste */
  --tb-skala: 1;             /* Vergroesserung der Titelleisten-Knoepfe (mobil groesser) */
  --pfeil-auswahl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23c0c0c0' d='M0 0h16v17H0z'/%3E%3Cpath fill='%23fff' d='M0 0h16v1H1v16H0z'/%3E%3Cpath fill='%230a0a0a' d='M15 0h1v17H0v-1h15z'/%3E%3Cpath fill='%23808080' d='M14 1h1v15H1v-1h13z'/%3E%3Cpath fill='%23000' d='M4 6h7v1H9v1H8v1H7V8H6V7H4z'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (max-width: 699px) {
  :root { --tbh: 40px; --tb-skala: 1.5; }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--desktop);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font: 11px/1.25 var(--schrift);
  -webkit-font-smoothing: none;
  font-smooth: never;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  cursor: default;
}

button, input, select, textarea { font: inherit; color: inherit; }
img, svg { image-rendering: pixelated; }
[hidden] { display: none !important; }

/* Klassische Rollbalken mit Pfeilknoepfen (nur Rechner mit Maus; mobil bleibt das System-Verhalten) */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 16px; height: 16px; }
  ::-webkit-scrollbar-track { background: var(--dither); }
  ::-webkit-scrollbar-thumb { background: var(--grau); box-shadow: var(--bevel-erhoben); }
  ::-webkit-scrollbar-corner { background: var(--grau); }
  ::-webkit-scrollbar-button:single-button {
    display: block; width: 16px; height: 16px; background-color: var(--grau);
    box-shadow: var(--bevel-erhoben); background-repeat: no-repeat; background-position: center;
  }
  ::-webkit-scrollbar-button:single-button:active { box-shadow: var(--bevel-gedrueckt); background-position: 1px 1px; }
  ::-webkit-scrollbar-button:vertical:start:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:vertical:end:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:horizontal:start:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 3h1v1H0zM1 2h1v3H1zM2 1h1v5H2zM3 0h1v7H3z'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:horizontal:end:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement,
  ::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Desktop-Tapeten (per CSS erzeugte Muster). Gelten fuer <html> und fuer die Vorschau im Anzeige-Dialog. */
.tp-tuerkis { background: #008080; }
.tp-gewebe {
  background-color: #008080;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.20) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px);
  background-size: auto;
}
.tp-karo {
  background: repeating-conic-gradient(#008080 0% 25%, #006868 0% 50%) 0 0 / 16px 16px;
}
.tp-raster {
  background-color: #000080;
  background-image:
    linear-gradient(rgba(16,132,208,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,132,208,.55) 1px, transparent 1px);
  background-size: 16px 16px;
}
.tp-sterne {
  background-color: #000030;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 80px, #fff, transparent),
    radial-gradient(1px 1px at 150px 20px, #a6caf0, transparent),
    radial-gradient(2px 2px at 60px 130px, #fff, transparent),
    radial-gradient(1px 1px at 130px 150px, #fff, transparent),
    radial-gradient(1px 1px at 180px 100px, #ffff80, transparent);
  background-size: 200px 180px;
}