/* ============================================================================ DESIGN „GLAS" — Planung und Schichten (TASK-009) ---------------------------------------------------------------------------- produktion/planung.php — der eine Ort zum Planen (der Reiter „Schichten" ist seit 04.10.2026 nur noch eine Weiterleitung hierher): das Raster (includes/_planungsraster.php, Abschnitt PLANUNGSRASTER der Grundvorlage), dazu Dock, Pool-Karten, zweite Ansicht, Vorschlags-Blatt und das Fenster „Schicht anlegen". Mit einem zweiten Projekt stehen zwei Raster nebeneinander (Grundvorlage, Abschnitt „PLANUNG — ZWEI PROJEKTE NEBENEINANDER"). Die Hülle des Rasters ist Milchglas (00-grund.css). Darin gilt: Kopfzeile und Zellen durchsichtig — das Glas trägt stehende Spalte DECKEND (--surface), sonst scheint das Raster beim Seitwärts-Schieben durch den Stationsnamen Schicht offen erhabene Fläche, Belegung als Abzeichen im Akzent Schicht besetzt still: nur eine Tönung, kein Rand zeitlich offen kein Rand, keine Zeile mehr: ein Punkt an der Belegung, die Zeit dazu in der Hinweiszeile des Docks (Grundvorlage) Passung beim Einteilen grün ganz · orange zum Teil · blau gestrichelt „wird Anfrage" — je eine getönte Fläche MIT Rand, damit die drei auch ohne Farbsehen auseinanderzuhalten sind Anfrage offen gestrichelte Pille im Akzent Die Farben dafür (--gefahr, --gut-flaeche, --erhaben …) stehen mit heller und dunkler Belegung in 90-dunkel.css. ============================================================================ */ /* --- Hülle und Kopf ------------------------------------------------------- */ html[data-design="glas"] .planung-grid-wrap { border-radius: var(--radius-lg); } html[data-design="glas"] .planung-grid th { background: transparent; } html[data-design="glas"] .planung-grid th, html[data-design="glas"] .planung-grid td { border-bottom-color: var(--line); } /* Wochenende und Vergangenes treten zurück; der Liefertag ist getönt. Beides stand in der Grundvorlage schwächer als die Kopfregel hier und muss deshalb wieder hin. */ html[data-design="glas"] .planung-grid .is-we, html[data-design="glas"] .planung-grid .day-cell.past { background: var(--mulde); } html[data-design="glas"] .planung-grid th.delivery { background: var(--accent-soft); } /* --- Stehende Spalte: deckend --------------------------------------------- */ html[data-design="glas"] .planung-grid .pg-ecke, html[data-design="glas"] .planung-grid .station-cell { background: var(--surface); border-right-color: var(--line-2); } /* --- Schichtkasten -------------------------------------------------------- */ html[data-design="glas"] .shift-box { border-radius: var(--radius-sm); background: var(--erhaben); border-color: var(--line-2); box-shadow: var(--shadow); } html[data-design="glas"] .shift-box.full, html[data-design="glas"] .shift-box.ohne-soll { background: var(--paper-2); border-color: transparent; box-shadow: none; } html[data-design="glas"] .planung-grid .station-del:hover, html[data-design="glas"] .planung-grid .shift-del:hover { background: var(--gefahr-flaeche); border-color: var(--gefahr-linie); color: var(--gefahr); } html[data-design="glas"] .add-shift-cell, html[data-design="glas"] .add-station-btn { border-radius: var(--radius-sm); } /* Passung beim Einteilen. Drei Klassen wie in der Grundvorlage — sie müssen über .full gewinnen. Dieselben Farben zeigen beim Verschieben, was der Server zu einem Ziel sagt (passt · passt teilweise · mit Rückfrage). */ html[data-design="glas"] .planung-grid .shift-box.fit-ganz { background: var(--gut-flaeche); border-color: var(--success); box-shadow: 0 0 0 1px var(--success); } /* Der Rand von „passt zum Teil" nimmt die Schriftfarbe --achtung: Sie ist in beiden Modi gegen die getönte Fläche gesetzt. --achtung-voll ist eine FLÄCHE für weiße Schrift und wäre als Rand im Dunkeln zu dunkel. */ html[data-design="glas"] .planung-grid .shift-box.fit-teil { background: var(--achtung-flaeche); border-color: var(--achtung); box-shadow: 0 0 0 1px var(--achtung); } html[data-design="glas"] .planung-grid .shift-box.fit-keine { background: var(--info-flaeche); border-color: var(--info); box-shadow: none; } /* Ziel beim Ziehen und die gewählte Schicht: ein Ring aus Tinte (im Dunkeln hell). */ html[data-design="glas"] .planung-grid .shift-box.fit-ziel, html[data-design="glas"] .shift-box.is-gewaehlt { box-shadow: 0 0 0 3px var(--ink), var(--shadow-md); } html[data-design="glas"] .planung-grid.has-selection .shift-box:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* --- Eine Person in der Schicht ------------------------------------------- */ html[data-design="glas"] .assignment-pill { border-radius: 12px; } html[data-design="glas"] .assignment-pill.has-actual { border-color: var(--gut-linie); } html[data-design="glas"] .assignment-pill.no-show { border-color: var(--achtung-linie); color: var(--achtung); } /* Zum Verschieben gewählt: Die Person sucht ihr Ziel (Tipp-Weg, zwei Projekte im Bild). */ html[data-design="glas"] .assignment-pill.tap-selected { border-color: var(--accent); color: var(--accent-2); } /* Meldung der Aushilfe („komme später" / „bin krank"): Signalfarben mit dunkler Belegung. */ html[data-design="glas"] .assignment-pill .pill-meldung { color: var(--achtung); } html[data-design="glas"] .assignment-pill .pill-meldung.ist-krank { color: var(--gefahr); } html[data-design="glas"] .am-meldung { background: var(--achtung-flaeche); color: var(--achtung); } html[data-design="glas"] .assignment-pill .ap-note { background: var(--info-flaeche); color: var(--info); } /* --- Dock: liegt ÜBER dem Raster, also deckend ----------------------------- */ html[data-design="glas"] .aushilfen-pool.pool-dock { background: var(--surface); border-color: var(--glas-kante); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -1px 0 var(--line-2), var(--shadow-md); } html[data-design="glas"] .pool-filter { border-color: transparent; } html[data-design="glas"] .pool-filter button.active { background: var(--erhaben); box-shadow: var(--shadow); } html[data-design="glas"] .pool-search { background: var(--paper); border-color: var(--line); } html[data-design="glas"] .pool-search:focus { background: var(--paper); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* --- Pool-Karte ------------------------------------------------------------ */ html[data-design="glas"] .pcard { border-radius: var(--radius-sm); } html[data-design="glas"] .pcard.is-taken { border-left-color: var(--vergeben); } html[data-design="glas"] .pcard.is-free { border-left-color: var(--success); } /* Das leere Tages-Kästchen: leise, aber lesbar (--ink-4 stand dort bei 3,6:1). :where() hält die Regel schwächer als die farbigen Kästchen und die gewählte Karte. */ html[data-design="glas"] :where(.pday) { color: var(--ink-3); } /* „Woanders vergeben": dunkle Tönung mit Streifen — im Dunkeln heller, sonst verschwindet sie neben den leeren Kästchen. Die Streifen der Grundvorlage sind weiß (20 %). Auf der helleren Tönung im Dunkeln stand die weiße Schrift darauf nur bei 3,6:1. Deshalb mischt sich der Streifen hier aus den Farben des Modus: ein Fünftel --surface, der Rest --mulde. Hell ergibt das den hellen Streifen wie bisher, dunkel einen DUNKLEN — die Schrift steht dann überall auf etwas, das mindestens so dunkel ist wie die Tönung selbst. Die zwei Zeilen mit .tap-selected halten das auch auf der GEWÄHLTEN Karte fest: Dort setzt 90-dunkel.css alle Kästchen auf dieselbe helle Tönung — „woanders vergeben" sah dann aus wie ein leerer Tag, genau während man die Person einteilt. */ html[data-design="glas"] .pday.is-other, html[data-design="glas"] .pday.is-mixed, html[data-design="glas"] .pcard.tap-selected .pday.is-other, html[data-design="glas"] .pcard.tap-selected .pday.is-mixed { background-color: var(--vergeben); color: #fff; background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--surface) 20%, var(--mulde)) 0 3px, transparent 3px 7px); } html[data-design="glas"] .pcard.sortable-drag, html[data-design="glas"] .pcard.sortable-fallback { background: var(--surface); } /* --- Zwei Projekte nebeneinander: Kopf über jedem Raster -------------------- */ html[data-design="glas"] .pt-zu { border-color: var(--glas-kante); background: var(--glas-stark); } html[data-design="glas"] .pt-zu:hover, html[data-design="glas"] .pt-zu:focus-visible { border-color: var(--accent); color: var(--accent-2); } /* Das × einer Person schwebt zu zweit über der Pille: deckend, damit der Name nicht durchscheint. */ @media (min-width: 1280px) and (hover: hover) { html[data-design="glas"] .planung-paar.ist-zwei .assignment-pill .remove-x { background: var(--surface); } } /* --- Zweite Ansicht (Annahme-Pool) ----------------------------------------- */ html[data-design="glas"] .second-view { border-radius: var(--radius-lg); } html[data-design="glas"] .sv-day { border-radius: var(--radius-sm); background: var(--paper-2); border-color: transparent; } html[data-design="glas"] .sv-day.today { border-color: var(--accent); } html[data-design="glas"] .sv-people .pool-person { border-radius: 12px; } /* --- Vorschlags-Blatt ------------------------------------------------------ */ html[data-design="glas"] .vp-backdrop { background: var(--schleier); } /* Das Skript hängt Blatt und Schleier an den — hier ist der Weichzeichner erlaubt. */ html[data-design="glas"] .vp { border-color: var(--glas-kante); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--glas-stark); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } html[data-design="glas"] .vp-row { border-radius: var(--radius-sm); } html[data-design="glas"] .vp-search { background: var(--paper); } @media (min-width: 700px) { html[data-design="glas"] .vp { border-radius: var(--radius-lg); } } /* --- Kopf der Planung ------------------------------------------------------ */ html[data-design="glas"] .plan-stand { border-color: var(--glas-kante); background: var(--glas-stark); } html[data-design="glas"] .plan-stand.ist-offen { border-color: var(--accent); color: var(--accent-2); } html[data-design="glas"] .second-view-picker select { border-color: var(--glas-kante); background: var(--glas-stark); } /* --- Tafel (produktion/board.php): dieselben Zustände wie im Raster -------- */ html[data-design="glas"] .board-strip, html[data-design="glas"] .board-pool { border-radius: var(--radius-lg); } html[data-design="glas"] .board-strip-head { background: transparent; } html[data-design="glas"] .bshift { border-radius: var(--radius-sm); background: var(--erhaben); box-shadow: var(--shadow); } html[data-design="glas"] .bshift.is-full, html[data-design="glas"] .bshift.ohne-soll { background: var(--paper-2); border-color: transparent; box-shadow: none; } html[data-design="glas"] .pill { border-radius: 12px; } /* --- Dialoge: Schicht anlegen (Planung, Tafel) und Ist-Zeit ------------------ Rundung, Rand und Schleier stehen im style-Attribut — dagegen hilft nur der Vorrang-Zusatz. So sehen die Dialoge gleich aus. */ html[data-design="glas"] #addshift-modal, html[data-design="glas"] #actual-modal { border-color: var(--glas-kante) !important; border-radius: var(--radius-lg) !important; } html[data-design="glas"] #addshift-backdrop, html[data-design="glas"] #actual-modal-backdrop { background: var(--schleier) !important; } /* Touch: das × einer Person ist ein Tippziel (36 px statt 34). */ @media (hover: none), (max-width: 768px) { html[data-design="glas"] .assignment-pill .remove-x, html[data-design="glas"] .pill .remove-x { width: 36px; height: 36px; } } /* --- Farbwahl (Fenster „Schicht anlegen", Stationen in projekt.php, Stations- Vorlagen in users.php) ----------------------------------------------------- Die Farbkreise (includes/colors.php, Ring per assets/js/kollin.js) tragen ihren Auswahl-Ring als festes helles Papier im style-Attribut — im Dunkeln hatte dadurch JEDE Farbe einen hellen Rand. Hier zeigt eine Kontur in Tinte die gewählte. Der Kreis steht im Markup direkt hinter seinem Feld: `input + span` — das kann jeder Browser, die Marke hängt nicht an :has(). */ html[data-design="glas"] .color-picker span[data-bubble] { box-shadow: none !important; } html[data-design="glas"] .color-picker input:checked + span[data-bubble] { outline: 2px solid var(--ink); outline-offset: 2px; }