/* ===== Fenster (Content-Level 1) ===== */
/* transform bleibt DAUERHAFT übergangsfähig: die Fenster-Übersicht (unten) verkleinert die echten
   Fenster per scale() an ihren Platz und wieder zurück. Ziehen/Grösse laufen über left/top/width/
   height und bleiben davon unberührt — die haben bewusst KEINEN Übergang. */
.cc-win{position:absolute;width:var(--sz-820);height:var(--sz-560);max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);
  background:var(--surface);border:1px solid var(--grey-300);border-radius:var(--radius);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;overflow:hidden;
  transform-origin:0 0;transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur) var(--ease)}
.cc-win.active{box-shadow:var(--shadow-md)}
/* maximiert: Nav-Widget links frei lassen, damit Ampel-Controls klickbar bleiben */
/* !important auch auf Breite/Höhe: nach einem Resize steht die Grösse als Stil am Element und
   würde sonst gewinnen — das Fenster wäre „maximiert", bliebe aber klein. */
/* position:fixed (seit 12.09.2026): die Arbeitsfläche scrollt, Vollbild meint aber den SICHTBAREN Bereich —
   ein absolut stehendes Vollbild-Fenster läge nach dem Scrollen oben ausserhalb. Die gemerkte Lage davor
   (__preMax, Flächen-Koordinaten) bleibt davon unberührt; window.js rechnet beim Lösen den Scroll ein. */
.cc-win.cc-win-max{position:fixed;left:286px!important;top:12px!important;width:calc(100vw - 298px)!important;height:calc(100vh - 24px)!important}
.cc-win.cc-win-min{display:none}

.cc-win-bar{display:flex;align-items:center;gap:var(--sp-5);height:var(--sz-40);padding:0 var(--sp-5);background:var(--grey-50);
  border-bottom:1px solid var(--border);cursor:default;flex:0 0 auto;user-select:none}
.cc-win-lights{display:flex;gap:var(--sp-3);flex:0 0 auto}
.cc-lg{width:var(--sz-12);height:var(--sz-12);border-radius:50%;border:0;cursor:pointer;padding:0;position:relative}
.cc-lg-close{background:var(--win-close)}.cc-lg-min{background:var(--win-min)}.cc-lg-max{background:var(--win-max)}
.cc-lg:hover{filter:brightness(.9)}
.cc-win-title{flex:1;text-align:center;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--grey-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-win-tools{display:flex;gap:var(--sp-1);flex:0 0 auto}
.cc-win-tool{width:var(--sz-26);height:var(--sz-26);border:0;background:none;border-radius:var(--radius);color:var(--grey-500);cursor:pointer;font-size:var(--fs-md);line-height:1}
.cc-win-tool:hover{background:var(--border);color:var(--ink)}

/* Kein Top-Padding: sonst lugen beim Scrollen Zeilen im Padding ÜBER dem sticky Tabellen-Kopf durch.
   Der 18px-Abstand oben kommt aus einem mitscrollenden ::before-Spacer → Header klebt bündig (top:0). */
.cc-win-body{flex:1;overflow:auto;background:var(--surface);padding:0 var(--sp-7) var(--sp-7);
  /* Am Listenende NICHT die (seit 12.09.2026 scrollbare) Arbeitsfläche mitreissen — sonst springt der
     Desktop weg, sobald eine Tabelle ausgescrollt ist. Über Wall und Titelleiste scrollt die Fläche normal. */
  overscroll-behavior:contain}
.cc-win-body::before{content:'';display:block;height:var(--sz-18)}
.cc-win-loading{display:flex;align-items:center;justify-content:center;height:100%}
.cc-win-empty{padding:var(--sp-11);text-align:center;color:var(--muted);font-size:var(--fs-md)}

/* Resize-Handle unten rechts */
.cc-win-resize{position:absolute;right:0;bottom:0;width:var(--sz-16);height:var(--sz-16);cursor:nwse-resize;z-index:var(--z-raised)}
.cc-win-resize::after{content:"";position:absolute;right:3px;bottom:3px;width:var(--sz-6);height:var(--sz-6);border-right:2px solid var(--grey-300);border-bottom:2px solid var(--grey-300)}
/* Auch im Vollbild greifbar: der Anfasser holt das Fenster aus dem Vollbild (window.js: freezeMaximized). */

/* Spinner (bis Modul `spinner` eigene Variante liefert) */
/* Lade-Kringel = KERN-Spinner (mage-spinner, spinner-Modul) — kein zweiter Spinner im System. */

/* ================================================================================
   FENSTER-UMSCHALTER — ersetzt die frühere Taskleiste am unteren Rand.
   Zwei gleichwertige Wege, keiner drängt sich auf:
     (1) die Leiste hier am rechten Bildschirmrand,
     (2) die Navigation (nav-Modul: Punkt am Eintrag + Gruppe „Offen").
   Die Leiste zeigt je offenem Fenster EINEN senkrechten Strich — mehr nicht. Ein Klick auf
   einen Strich öffnet die Übersicht, in der die ECHTEN Fenster verkleinert nebeneinander
   liegen (kein Abbild: dasselbe DOM, nur per scale() kleiner).

   TREFFFLÄCHE (Florian 12.09.2026: „die Striche sind zu schmal zum Klicken"):
   Sichtbar bleibt alles in der 12px-Rinne, die ein maximiertes Fenster rechts ohnehin frei
   lässt (.cc-win-max: right = 12px) — der Strich verdeckt also NIE Fensterinhalt. Er ist
   dafür doppelt so breit wie vorher (--sz-6 = 6px statt 3px), beim Überfahren 8px + orange.
   Die TREFFFLÄCHE reicht zusätzlich unsichtbar nach links über die Rinne hinaus: der Behälter
   ist --sz-12 + --sz-16 = 28px breit.
   Damit dieses Übermass Klicks auf den Fensterinhalt NICHT dauerhaft blockiert:
     .cc-ws (der ganze, bildschirmhohe Behälter) hat pointer-events:none,
     nur die .cc-ws-bar-Zeilen haben pointer-events:auto.
   Es fängt also ausschliesslich dort, wo wirklich ein Strich steht (je Fenster ~28px hoch,
   mittig gebündelt) — der Rest der rechten Kante bleibt komplett durchlässig. Der Klick
   blubbert vom Strich zum <button> hoch, der Umschalt-Handler in window.js bleibt unverändert.
   (Ein ::before als Trefffläche geht hier NICHT: tooltip.css blendet die Pseudo-Elemente jedes
   [data-tooltip] per !important aus — und die Striche tragen den Fenstertitel als Zeigetext.)
   ================================================================================ */
/* padding:0 ist PFLICHT: der Browser gibt einem <button> von Haus aus seitlichen Innenabstand —
   der frisst die Rinne komplett auf, und die Striche darin messen dann 0 Pixel. */
.cc-ws{position:fixed;right:0;top:0;bottom:0;width:calc(var(--sz-12) + var(--sz-16));z-index:var(--z-window);
  /* align-items:flex-end statt stretch: die Zeilen füllen ohnehin 100% Breite — aber sobald eine
     SCHMALER wird (Übersicht, s.u.), muss sie am rechten Rand kleben und nicht am linken. */
  display:none;flex-direction:column;align-items:flex-end;justify-content:center;gap:var(--sp-1);
  margin:0;padding:0;border:0;background:none;appearance:none;-webkit-appearance:none;
  pointer-events:none}
.cc-ws.cc-ws-live{display:flex}
/* Der Fokus-Ring sitzt an den STRICHEN, nicht am (jetzt 28px breiten, unsichtbaren) Behälter —
   sonst läge ein oranger Rahmen quer über der rechten Fensterkante. */
.cc-ws:focus-visible{outline:none}
.cc-ws:focus-visible .cc-ws-tick{box-shadow:var(--focus)}

/* Ein Strich je Fenster. Der ÄUSSERE Kasten ist die Trefffläche (volle 28px breit, --sp-1 Luft
   über und unter dem Strich), sichtbar ist nur der Strich rechts darin.
   Höhe = Strichhöhe + 2x --sp-1 Polster: box-sizing ist global border-box, der Strich behält
   damit exakt seine bisherige Höhe (20 / 36 / 10 px) und nur der Fangbereich wächst.
   Der Strich ist ein ECHTES Element, kein ::after: tooltip.css blendet die Pseudo-Elemente
   jedes [data-tooltip] per !important aus (Schutz gegen CSS-Tooltips von früher) — und der
   Zeigetext mit dem Fenstertitel gehört genau hierhin. */
.cc-ws-bar{position:relative;display:flex;align-items:stretch;justify-content:flex-end;
  width:100%;height:calc(var(--sz-20) + 2 * var(--sp-1));
  padding:var(--sp-1) var(--sp-1) var(--sp-1) 0;cursor:pointer;pointer-events:auto;
  transition:height var(--dur) var(--ease)}
.cc-ws-tick{width:var(--sz-6);border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  transition:background var(--dur) var(--ease),width var(--dur) var(--ease)}
/* Zeigen auf IRGENDEINEN Strich hellt die ganze Leiste auf (war vorher .cc-ws:hover — der greift
   nicht mehr, weil der Behälter keine Zeigerereignisse mehr annimmt).
   :has() steckt in :where(), damit es NICHTS zur Spezifität beiträgt: sonst schlägt diese Regel
   (0,4,0) den gezielten Überfahr-Effekt am einzelnen Strich (0,3,0) — der Strich unter dem Zeiger
   würde dann breiter, aber nicht orange (in Chromium nachgemessen). So bleibt die Rangfolge exakt
   die von vorher (.cc-ws:hover war ebenfalls 0,2,0). */
.cc-ws:where(:has(.cc-ws-bar:hover)) .cc-ws-tick{background:color-mix(in srgb, var(--surface) 85%, transparent)}
.cc-ws-bar.cc-ws-on{height:calc(var(--sz-36) + 2 * var(--sp-1))}
.cc-ws-bar.cc-ws-on .cc-ws-tick,.cc-ws:where(:has(.cc-ws-bar:hover)) .cc-ws-bar.cc-ws-on .cc-ws-tick{background:var(--o)}
.cc-ws-bar.cc-ws-min{height:calc(var(--sz-10) + 2 * var(--sp-1))}
.cc-ws-bar.cc-ws-min .cc-ws-tick{background:color-mix(in srgb, var(--surface) 30%, transparent)}
/* Überfahr-Effekt am gemeinten Strich: doppelte Breite (8px füllt die Rinne bündig aus) + orange.
   Steht NACH den Zustandsregeln, damit er bei gleicher Spezifität gewinnt. */
.cc-ws-bar:hover .cc-ws-tick{width:var(--sz-8);background:var(--o)}

/* In der ÜBERSICHT zieht sich die Trefffläche auf die Rinne zurück: dort liegen die verkleinerten
   Fenster bis auf 12px an den rechten Rand (window.js rechnet mit WS_STRIP = 12), und ein Klick auf
   die überstehende Fangzone würde die Übersicht schliessen statt die gemeinte Kachel zu wählen.
   Der Behälter selbst bleibt anklickbar — die Übersicht lässt sich weiter über die Leiste zumachen. */
body:has(.cc-winlayer.cc-ws-expo) .cc-ws-bar{width:var(--sz-12)}

/* Zeigen auf einen Strich hebt das GEMEINTE Fenster hervor — man sieht vor dem Klick, welches es ist. */
.cc-win.cc-ws-hl{box-shadow:var(--focus),var(--shadow-lg)}

/* ---- Übersicht: alle echten Fenster verkleinert ----
   Der Schleier liegt IM Fenster-Layer (z unter jedem Fenster, das dort bei 300 aufwärts steht) —
   so bleiben die Fenster darüber sichtbar und der Schleier deckt trotzdem Wall und Navigation. */
/* position:fixed: der Layer ist seit 12.09.2026 so gross wie die gewachsene Fläche — der Schleier und die
   Beschriftungen darin gehören aber auf den SICHTBAREN Ausschnitt (relayout rechnet in Viewport-Werten). */
.cc-ws-scrim{position:fixed;inset:0;z-index:var(--z-base);background:var(--scrim);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.cc-ws-scrim.cc-ws-in{opacity:1}
.cc-winlayer.cc-ws-expo .cc-win{cursor:pointer}
/* Einen Takt ohne Übergang: wählt man in der Übersicht ein Fenster ausserhalb des Ausschnitts, scrollt
   window.js erst hin und setzt die Verkleinerung für die neue Scrolllage neu — ohne diese Klasse liefe
   das Fenster dabei sichtbar um die Scrollstrecke hin und her. */
.cc-winlayer.cc-ws-jump .cc-win{transition:none}
.cc-winlayer.cc-ws-expo .cc-win.cc-win-min{display:flex}          /* minimierte gehören in die Übersicht */
.cc-winlayer.cc-ws-expo .cc-win > *{pointer-events:none}           /* Inhalt ist Vorschau, nicht bedienbar */
.cc-winlayer.cc-ws-expo .cc-win:hover{box-shadow:var(--focus),var(--shadow-lg)}

/* Beschriftung je Kachel — sitzt AUSSERHALB des skalierten Fensters, bleibt also lesbar. */
.cc-ws-cap{position:absolute;text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.cc-ws-cap.cc-ws-in{opacity:1}
.cc-ws-cap-min{opacity:var(--op-soft);font-weight:var(--fw-normal);font-style:italic}
.cc-ws-hint{position:absolute;left:0;right:0;bottom:var(--sp-7);text-align:center;font-size:var(--fs-sm);
  color:color-mix(in srgb, var(--surface) 70%, transparent);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.cc-ws-hint.cc-ws-in{opacity:1}

/* Ruhigere Bewegung, wenn der Nutzer das so eingestellt hat. */
@media (prefers-reduced-motion:reduce){
  .cc-win,.cc-ws-bar,.cc-ws-tick,.cc-ws-scrim,.cc-ws-cap,.cc-ws-hint{transition:none}
}

/* ---- Snap-Hinweis beim Ziehen an den Rand ---- */
.cc-snap-hint{position:fixed;z-index:var(--z-window);pointer-events:none;background:color-mix(in srgb, var(--o) 16%, transparent);
  border:2px solid var(--o);border-radius:var(--radius);transition:all var(--dur-fast) ease}
.cc-snap-hint.cc-snap-left{left:286px;top:12px;width:calc((100vw - 298px)/2 - 3px);height:calc(100vh - 24px)}
.cc-snap-hint.cc-snap-right{left:calc(286px + (100vw - 298px)/2 + 3px);top:12px;width:calc((100vw - 298px)/2 - 3px);height:calc(100vh - 24px)}
.cc-snap-hint.cc-snap-max{left:286px;top:12px;width:calc(100vw - 298px);height:calc(100vh - 24px)}

/* ---- Verbesserter Fehler-/Leer-Zustand im Fenster ---- */
.cc-win-empty-ico{font-size:var(--fs-xxl);color:var(--warn);margin-bottom:var(--sp-3)}
.cc-win-empty-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.cc-win-empty-retry{margin-top:var(--sp-6);border:1px solid var(--border);background:var(--surface);
  color:var(--text);padding:var(--sp-2) var(--sp-7);border-radius:var(--radius);font-size:var(--fs-base);cursor:pointer}
.cc-win-empty-retry:hover{background:var(--o);border-color:var(--o);color:var(--surface)}

/* Kind randlos über die volle Fensterbreite (bricht aus dem 18px-Body-Padding aus). */
.cc-win-flush{margin-left:calc(-1 * var(--sp-7));margin-right:calc(-1 * var(--sp-7))}