/* ==========================================================================
   Fenster: Rahmen, Titelleiste, Steuerknöpfe, Griffe zum Größe-Ändern
   ========================================================================== */

.fenster {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  pointer-events: auto;
  transform-origin: 50% 40%;
}
.fenster:focus { outline: none; }

.fenster-rahmen {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-l);
  background: transparent;
  box-shadow: var(--schatten-fenster);
  transition: box-shadow var(--dauer);
}
.fenster.aktiv .fenster-rahmen { box-shadow: var(--schatten-fenster-aktiv); }
.fenster:focus-visible .fenster-rahmen { outline: 2px solid var(--akzent); outline-offset: 2px; }
.fenster.maximiert .fenster-rahmen { border-radius: var(--radius-m); }

/* Titelleiste: hier wird das Fenster gezogen */
.fenster-titelleiste {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 7px 0 14px;
  border-bottom: 1px solid var(--linie);
  /* Glas-Effekt nur hier, im Inhalt bleibt der Hintergrund deckend */
  position: relative;
  z-index: 2;            /* Tooltips der Knöpfe liegen über dem Inhalt */
  background: var(--glas-stark);
  backdrop-filter: blur(24px) saturate(1.5);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.fenster-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--akzent);
}
.fenster-symbol .ico { width: 18px; height: 18px; }
.fenster-symbol .projekt-icon { width: 20px; height: 20px; border-radius: 6px; }
.fenster-titel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 620;
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fenster.aktiv .fenster-titel { color: var(--text); }

.fenster-steuerung { display: flex; gap: 2px; }
.fenster-steuerung .symbolknopf { width: 32px; height: 30px; border-radius: 8px; }
.fenster-steuerung .fenster-schliessen:hover { background: var(--gefahr); color: #fff; }

/* Inhalt scrollt im Fenster, nie die ganze Seite */
.fenster-inhalt {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--flaeche);
  container-type: inline-size;
  container-name: fenster;
}

/* Sanfter Übergang beim Maximieren */
.fenster.groesse-animiert {
  transition: translate var(--dauer) var(--kurve), width var(--dauer) var(--kurve), height var(--dauer) var(--kurve);
}

/* ---------- Griffe an Kanten und Ecken ---------- */
.fenster-griff { position: absolute; z-index: 3; }
.griff-n { top: -5px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.griff-s { bottom: -5px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.griff-o { right: -5px; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.griff-w { left: -5px; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.griff-no { top: -6px; right: -6px; width: 18px; height: 18px; cursor: nesw-resize; }
.griff-sw { bottom: -6px; left: -6px; width: 18px; height: 18px; cursor: nesw-resize; }
.griff-nw { top: -6px; left: -6px; width: 18px; height: 18px; cursor: nwse-resize; }
.griff-so { bottom: -6px; right: -6px; width: 18px; height: 18px; cursor: nwse-resize; }
.fenster.maximiert .fenster-griff { display: none; }

/* Während Ziehen/Skalieren: keine Textauswahl, eingebettete Inhalte nicht „verschlucken“ lassen */
.fenster-ebene.wird-bewegt { user-select: none; -webkit-user-select: none; }
.fenster-ebene.wird-bewegt iframe,
.fenster-ebene.wird-bewegt object,
.fenster-ebene.wird-bewegt video { pointer-events: none; }