/* workspace-bento-planer.css — Zusatz-Gestaltung des Bereichs „Planer" in der Bento-Ansicht (Logik: workspace-bento-planer.js). Kurzbeschreibung (für Laien): Ralph, 24.10.2026, nach seinen 10 Bento-Regeln: der Bereich besteht nur aus Kacheln im Raster der Bento-Startseite (gleiche Spalten, Reihenhöhe, Abstände, Rundung, Schatten wie workspace-bento.css) — vorn die kleine Ansicht-Kachel (Liste | Woche), daneben die Zeitraum- bzw. Wochen-Kachel, danach je Aufgabe eine Kachel und am Ende die „+"-Kachel (gestrichelt wie auf der Startseite). In der Woche darunter je Tag eine weiße Karte mit den Aufgaben als kleinen grauen Kacheln; die Tage teilen sich die Breite (nie seitlich scrollen), auf dem Handy stehen sie untereinander. Kennzahl-Leiste, Suchfeld, Plus-Knopf und Pillen der Vorlage sind hier ausgeblendet. Dazu die Felder im großen Detail und der rote Löschen-Knopf; Bearbeiten und „Neue Aufgabe" sind EINE ruhige Karte (.bp-e, Vorbild Aktionsplan .ba-e): Name groß ohne Rahmen, darunter je Angabe eine Zeile (Etikett links, Feld rechts), Speichern/Abbrechen unten. Die Filter-Kacheln (Ansicht, Zeitraum, Woche — .bp-filter) zeigen den Titel fett oben, den Umschalter mittig und unten klein, was gerade gilt; kein leerer Raum mehr unter den Pillen. Greift nur im geöffneten Planer-Bereich (#bsBereich[data-bereich="planer"]). */ /* ── Detail und Formular ── */ #bsBereich[data-bereich="planer"] .bp-ort { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #bsBereich[data-bereich="planer"] .bp-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 12px; } #bsBereich[data-bereich="planer"] .bp-feld[hidden] { display: none; } #bsBereich[data-bereich="planer"] .bp-feld .a4h-field { width: 100%; box-sizing: border-box; min-width: 0; } #bsBereich[data-bereich="planer"] .bp-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; } #bsBereich[data-bereich="planer"] .bp-hinweis { margin: -4px 0 12px; } #bsBereich[data-bereich="planer"] .bp-check { margin: 4px 0 12px; } #bsBereich[data-bereich="planer"] .bs-meldung .bs-box { margin: 0 0 12px; } #bsBereich[data-bereich="planer"] .bp-luecke { flex: 1 1 auto; } /* Löschen: Gefahr-Farbe nur als Schrift auf dem leisen Knopf (ein dunkler Hauptknopf je Fläche bleibt „Speichern") */ #bsBereich[data-bereich="planer"] .bp-gefahr { color: var(--marke-gefahr); } /* Auswahl als Pillen (Terminplan, Wer) statt Aufklapp-Liste (Bento-Regel 1) — Form wie die Filter-Pillen, schwarz = gewählt */ #bsBereich[data-bereich="planer"] .bp-pillen { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } #bsBereich[data-bereich="planer"] .bp-pillen button { max-width: 100%; border: 0; background: var(--bs-weich); border-radius: var(--marke-r-pill); padding: 7px 12px; font: 600 12px var(--marke-schrift); color: var(--bs-leise); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; } #bsBereich[data-bereich="planer"] .bp-pillen button:hover { background: var(--marke-feld); color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-pillen button.an { background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="planer"] .bp-pillen button:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; } /* ── Bearbeiten und „Neue Aufgabe": EINE ruhige Karte mittig auf dem grauen Grund (Ralph, 24.10.2026 abends, Vorbild .ba-e) ── */ #bsBereich[data-bereich="planer"][data-ansicht="raster"].bs-detail-auf .bs-detail { background: transparent; box-shadow: none; padding: 10px 2px 20px; } #bsBereich[data-bereich="planer"] .bs-detail > .bs-zurueck { align-self: flex-start; margin: 0 0 12px; } #bsBereich[data-bereich="planer"] .bp-e { width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; padding: 24px; border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wb-rand, var(--wbs-schatten)); font-family: var(--marke-schrift); transition: box-shadow .25s; } #bsBereich[data-bereich="planer"] .bp-e:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)), var(--wb-rand, var(--wbs-schatten)); } #bsBereich[data-bereich="planer"] .bp-e-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; } #bsBereich[data-bereich="planer"] .bp-e-titel { margin: 0; font: 700 15px/1.3 var(--marke-schrift); color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-e-ort { font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="planer"] .bp-e-ort.rot { color: var(--marke-gefahr); } #bsBereich[data-bereich="planer"] .bp-e-ort:empty { display: none; } /* Der Name: großes Feld ohne Rahmen — die Karte ist die Fläche */ #bsBereich[data-bereich="planer"] .bp-e-was { width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--bs-text); font: 600 20px/1.35 var(--marke-schrift); } #bsBereich[data-bereich="planer"] .bp-e-was::placeholder { color: var(--bs-leise); font-weight: 500; } /* Je Angabe eine Zeile, getrennt durch eine feine Linie: Etikett links, Inhalt rechts */ #bsBereich[data-bereich="planer"] .bp-e-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--bs-linie); } #bsBereich[data-bereich="planer"] .bp-e-etikett { padding-top: 8px; font: 600 13px var(--marke-schrift); color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-e-inhalt { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #bsBereich[data-bereich="planer"] .bp-e-klein { font: 500 12px var(--marke-schrift); color: var(--bs-leise); } #bsBereich[data-bereich="planer"] .bp-e .bp-feld { margin-bottom: 0; } #bsBereich[data-bereich="planer"] .bp-e .bp-felder { gap: 8px 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } #bsBereich[data-bereich="planer"] .bp-e .bp-check { margin: 0; } #bsBereich[data-bereich="planer"] .bp-e .bp-hinweis { margin: 0; } #bsBereich[data-bereich="planer"] .bp-e .bp-neuplan .a4h-field { max-width: 360px; } #bsBereich[data-bereich="planer"] .bp-e-fortschritt { display: flex; align-items: center; gap: 8px; min-width: 0; } #bsBereich[data-bereich="planer"] .bp-e-fortschritt .a4h-field { width: 88px; flex: none; } #bsBereich[data-bereich="planer"] .bp-e-prozent { font-size: 13px; color: var(--bs-leise); } #bsBereich[data-bereich="planer"] .bp-e-fortschritt .bp-balken { flex: 1 1 auto; margin: 0 0 0 8px; height: 6px; } #bsBereich[data-bereich="planer"] .bp-e .bs-meldung:empty { display: none; } #bsBereich[data-bereich="planer"] .bp-e .bs-meldung .bs-box { margin: 0 0 12px; } #bsBereich[data-bereich="planer"] .bp-e-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--bs-linie); } #bsBereich[data-bereich="planer"] .bp-e-luecke { flex: 1 1 auto; } #bsBereich[data-bereich="planer"] .bp-e-link { border: 0; background: transparent; padding: 8px 12px; border-radius: var(--marke-r-pill); color: var(--bs-leise); font: 600 13px var(--marke-schrift); cursor: pointer; transition: background .2s, color .2s; } #bsBereich[data-bereich="planer"] .bp-e-link:hover { background: var(--bs-weich); color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-e-link.bp-gefahr, #bsBereich[data-bereich="planer"] .bp-e-link.bp-gefahr:hover { color: var(--marke-gefahr); } #bsBereich[data-bereich="planer"] .bp-e-link:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; } #bsBereich[data-bereich="planer"] .bp-e-link:disabled { opacity: .55; cursor: default; } @media (max-width: 699px) { #bsBereich[data-bereich="planer"] .bp-e { padding: 18px; } #bsBereich[data-bereich="planer"] .bp-e-was { font-size: 17px; } #bsBereich[data-bereich="planer"] .bp-e-zeile { grid-template-columns: minmax(0, 1fr); padding: 12px 0; } #bsBereich[data-bereich="planer"] .bp-e-etikett { padding-top: 0; } #bsBereich[data-bereich="planer"] .bp-e .bp-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bsBereich[data-bereich="planer"] .bp-e .bp-neuplan .a4h-field { max-width: none; } } /* ── Nur Kacheln: Kennzahl-Leiste, Suche, Plus-Knopf und Pillen der Vorlage weg; das Raster scrollt mit Luft für Hover (Regel 9) ── */ #bsBereich[data-bereich="planer"] { grid-template-rows: minmax(0, 1fr); } #bsBereich[data-bereich="planer"] .bs-kopf, #bsBereich[data-bereich="planer"] .bs-werkzeug, #bsBereich[data-bereich="planer"] .bs-pillen { display: none; } #bsBereich[data-bereich="planer"] .bs-liste-karte { overflow: visible; } #bsBereich[data-bereich="planer"] .bs-liste { margin: 0 -20px -20px; padding: 12px 20px 20px; } /* Raster und Kachel exakt wie die Startseite (.wb-raster / .wb-k in workspace-bento.css) */ #bsBereich[data-bereich="planer"] .bp-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; } #bsBereich[data-bereich="planer"] .bp-k { position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 0; padding: 20px 22px; box-sizing: border-box; overflow: hidden; background: var(--bs-karte); color: var(--bs-text); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); font-family: var(--marke-schrift); transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="planer"] .bp-k.bs-kachel { cursor: pointer; } #bsBereich[data-bereich="planer"] .bp-k.bs-kachel:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } /* Regel 10: Ansicht-, Zeitraum- und Wochen-Kachel heben sich wie die Kacheln der Startseite (.wb-k:hover) */ #bsBereich[data-bereich="planer"] .bp-ansicht:hover, #bsBereich[data-bereich="planer"] .bp-zeitraum:hover, #bsBereich[data-bereich="planer"] .bp-wkopf:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="planer"] .bp-k.bs-kachel:focus-visible { box-shadow: 0 0 0 2px var(--bs-grund), 0 0 0 4px var(--marke-akzent); } #bsBereich[data-bereich="planer"] .bp-zeitraum, #bsBereich[data-bereich="planer"] .bp-wkopf, #bsBereich[data-bereich="planer"] .bp-leer { grid-column: span 2; } #bsBereich[data-bereich="planer"] .bp-leer { align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--bs-leise); } #bsBereich[data-bereich="planer"] .bp-l { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--bs-leise); white-space: nowrap; } #bsBereich[data-bereich="planer"] .bp-l > span { overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="planer"] .bp-s { font-size: 12px; color: var(--bs-leise); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="planer"] .bp-unten { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; } #bsBereich[data-bereich="planer"] .bp-s.bs-rot { color: var(--marke-gefahr); } /* Filter-Kacheln (Ansicht, Zeitraum, Woche): Titel fett-dunkel wie alle Kacheltitel, Umschalter mittig, unten klein, was gilt — so füllt der Inhalt die Kachel gleichmäßig statt eines Lochs unter den Pillen (Ralph 24.10.2026) */ #bsBereich[data-bereich="planer"] .bp-t { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="planer"] .bp-filter > .bp-seg, #bsBereich[data-bereich="planer"] .bp-filter > .bp-wzeile { margin: auto 0; } #bsBereich[data-bereich="planer"] .bp-filter > .bp-unten { margin-top: 0; } /* Umschalter in den kleinen Kacheln (Regel 6): schwarz = aktiv */ #bsBereich[data-bereich="planer"] .bp-seg { display: flex; gap: 2px; margin-top: 12px; padding: 4px; border-radius: var(--marke-r-pill); background: var(--bs-weich); } #bsBereich[data-bereich="planer"] .bp-seg button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: var(--marke-r-pill); padding: 9px 6px; font: 600 13px var(--marke-schrift); color: var(--bs-leise); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; } #bsBereich[data-bereich="planer"] .bp-seg button:hover { background: var(--marke-feld); color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-seg button.an { background: var(--bs-dunkel); color: #fff; cursor: default; } /* Aufgaben-Kachel */ #bsBereich[data-bereich="planer"] .bp-k-name { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } #bsBereich[data-bereich="planer"] .bp-k.meilenstein .bp-k-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 2px; background: var(--bs-dunkel); transform: rotate(45deg); } #bsBereich[data-bereich="planer"] .bp-k.sammel .bp-k-name { font-weight: 800; } #bsBereich[data-bereich="planer"] .bp-k-text { margin-top: 4px; font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="planer"] .bp-k-fuss { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--bs-leise); font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="planer"] .bp-k-fuss .bp-balken { flex: 1 1 auto; margin: 0; } #bsBereich[data-bereich="planer"] .bp-k-fuss .bs-rot { flex: none; } /* „+"-Kachel am Ende — wie „+ Kachel hinzufügen" auf der Startseite (.wb-k.plus / .wk-plus) */ #bsBereich[data-bereich="planer"] .bp-plus { align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--marke-linie-stark); box-shadow: none; color: var(--bs-leise); font: 600 13px var(--marke-schrift); cursor: pointer; text-align: center; } #bsBereich[data-bereich="planer"] .bp-plus:hover { background: var(--bs-karte); } #bsBereich[data-bereich="planer"] .bp-plus:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="planer"] .bp-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ── Wochen-Ansicht ── */ #bsBereich[data-bereich="planer"] .bp-wzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; } #bsBereich[data-bereich="planer"] .bp-wzeile b { font-size: 15px; font-weight: 700; } #bsBereich[data-bereich="planer"] .bp-wzeile > span { color: var(--bs-leise); } #bsBereich[data-bereich="planer"] .bp-pfeil, #bsBereich[data-bereich="planer"] .bp-heute { height: 32px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text); cursor: pointer; font: 600 12px var(--marke-schrift); } #bsBereich[data-bereich="planer"] .bp-pfeil { width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } #bsBereich[data-bereich="planer"] .bp-heute { padding: 0 12px; } #bsBereich[data-bereich="planer"] .bp-pfeil:hover, #bsBereich[data-bereich="planer"] .bp-heute:hover { background: var(--marke-feld); } #bsBereich[data-bereich="planer"] .bp-pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #bsBereich[data-bereich="planer"] .bp-woche { display: grid; grid-template-columns: repeat(var(--bp-tage, 5), minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; } #bsBereich[data-bereich="planer"] .bp-tag { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 352px; box-sizing: border-box; padding: 16px 12px 12px; background: var(--bs-karte); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); } #bsBereich[data-bereich="planer"] .bp-tag.heute { box-shadow: 0 0 0 2px var(--bs-dunkel); } #bsBereich[data-bereich="planer"] .bp-tag header { display: flex; align-items: baseline; gap: 6px; padding: 0 4px 4px; min-width: 0; } #bsBereich[data-bereich="planer"] .bp-tag header b { font-size: 15px; font-weight: 700; } #bsBereich[data-bereich="planer"] .bp-tag header span { font-size: 12px; color: var(--bs-leise); font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="planer"] .bp-tag header i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--marke-r-pill); background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="planer"] .bp-frei { margin: 0; padding: 0 4px; font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="planer"] .bp-chip { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; padding: 8px 10px; box-shadow: none; border: 0; border-radius: var(--bs-r-k); background: var(--bs-weich); color: var(--bs-text); text-align: left; font-family: var(--marke-schrift); cursor: pointer; transition: background .2s, box-shadow .2s; } #bsBereich[data-bereich="planer"] .bp-chip:hover { background: color-mix(in srgb, var(--bs-text) 10%, var(--bs-karte)); box-shadow: none; transform: none; } #bsBereich[data-bereich="planer"] .bp-chip:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--marke-akzent); } #bsBereich[data-bereich="planer"] .bp-chip b { font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } #bsBereich[data-bereich="planer"] .bp-chip small { font-size: 11px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="planer"] .bp-chip.rot small { color: var(--marke-gefahr); } #bsBereich[data-bereich="planer"] .bp-chip.meilenstein b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; background: var(--bs-dunkel); transform: rotate(45deg); } #bsBereich[data-bereich="planer"] .bp-balken { display: block; flex: none; height: 4px; margin-top: 4px; border-radius: var(--marke-r-pill); background: var(--bs-linie); overflow: hidden; } #bsBereich[data-bereich="planer"] .bp-balken span { display: block; height: 100%; background: var(--marke-ok); } /* Spalten wie die Startseite (workspace-bento.js spalten(): 6 · 4 bis 1100 px · 3 bis 899 px · 1 unter 700 px) */ @media (max-width: 1200px) { #bsBereich[data-bereich="planer"] .bp-tag { padding: 12px 8px 8px; } } @media (max-width: 1100px) { #bsBereich[data-bereich="planer"] .bp-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 899px) { #bsBereich[data-bereich="planer"] .bp-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { #bsBereich[data-bereich="planer"] .bs-liste { margin: 0 -12px -12px; padding: 12px; } #bsBereich[data-bereich="planer"] .bp-raster { gap: 12px; } #bsBereich[data-bereich="planer"] .bp-woche { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; } #bsBereich[data-bereich="planer"] .bp-tag { min-height: 0; padding: 14px 12px 12px; } #bsBereich[data-bereich="planer"] .bs-d-aktion { position: static; margin-top: 8px; } } @media (max-width: 699px) { #bsBereich[data-bereich="planer"] .bp-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; } #bsBereich[data-bereich="planer"] .bp-k { padding: 16px 18px; } #bsBereich[data-bereich="planer"] .bp-zeitraum, #bsBereich[data-bereich="planer"] .bp-wkopf, #bsBereich[data-bereich="planer"] .bp-leer { grid-column: span 1; } } /* ── Statusbericht (25.10.2026, Beta-Ring; Logik: sbZeichnen in workspace-bento-planer.js) ── Kachel „Statusbericht" neben der Ansicht; im Bericht: Plan-Pillen (2), Ampel (3) | Fortschritt, Offen, Verzug (je 1), Kurz gesagt (2), Weitergeben (1) | Listen je 3 Spalten × 2 Reihen. Farben nur aus der Marke, Hover wie alle Kacheln. */ #bsBereich[data-bereich="planer"] .bp-sb-plan, #bsBereich[data-bereich="planer"] .bp-sb-text { grid-column: span 2; } #bsBereich[data-bereich="planer"] .bp-sb-ampel, #bsBereich[data-bereich="planer"] .bp-sb-breit { grid-column: span 3; } #bsBereich[data-bereich="planer"] .bp-sb-liste { grid-column: span 3; } #bsBereich[data-bereich="planer"] .bp-sb-liste.hoch { grid-row: span 2; } #bsBereich[data-bereich="planer"] .bp-sb-start, #bsBereich[data-bereich="planer"] .bp-sb-plan, #bsBereich[data-bereich="planer"] .bp-sb-ampel, #bsBereich[data-bereich="planer"] .bp-sb-zahl, #bsBereich[data-bereich="planer"] .bp-sb-text, #bsBereich[data-bereich="planer"] .bp-sb-aktion, #bsBereich[data-bereich="planer"] .bp-sb-liste { transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="planer"] .bp-sb-plan:hover, #bsBereich[data-bereich="planer"] .bp-sb-ampel:hover, #bsBereich[data-bereich="planer"] .bp-sb-zahl:hover, #bsBereich[data-bereich="planer"] .bp-sb-text:hover, #bsBereich[data-bereich="planer"] .bp-sb-aktion:hover, #bsBereich[data-bereich="planer"] .bp-sb-liste:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="planer"] .bp-sb-start .bp-k-text { white-space: normal; } #bsBereich[data-bereich="planer"] .bp-sb-knopf { display: inline-flex; align-items: center; font: 600 13px var(--marke-schrift); } #bsBereich[data-bereich="planer"] .bp-sb-plan .bp-pillen { margin: 12px 0 8px; max-height: 76px; overflow-y: auto; } #bsBereich[data-bereich="planer"] .bp-sb-lade { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; color: var(--marke-ladekreis); } /* Ampel: getönte Kachel wie die Kennzahl-Kacheln der Vorlage (.bs-zahl.ton-*), Punkt in der Signalfarbe */ #bsBereich[data-bereich="planer"] .bp-sb-ampel { --bp-ton: var(--bs-karte); --bp-punkt: var(--bs-leise); background: linear-gradient(135deg, var(--bp-ton) 30%, color-mix(in srgb, var(--bp-ton) 66%, var(--bs-verlauf-ziel, #fff))); } #bsBereich[data-bereich="planer"] .bp-sb-ampel.ton-rot { --bp-ton: color-mix(in srgb, var(--marke-gefahr) 14%, var(--bs-karte)); --bp-punkt: var(--marke-gefahr); } #bsBereich[data-bereich="planer"] .bp-sb-ampel.ton-gelb { --bp-ton: color-mix(in srgb, var(--marke-warn) 16%, var(--bs-karte)); --bp-punkt: var(--marke-warn); } #bsBereich[data-bereich="planer"] .bp-sb-ampel.ton-gruen { --bp-ton: color-mix(in srgb, var(--marke-ok) 14%, var(--bs-karte)); --bp-punkt: var(--marke-ok); } #bsBereich[data-bereich="planer"] .bp-sb-punkt { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: 0; border-radius: var(--marke-r-pill); background: var(--bp-punkt); } #bsBereich[data-bereich="planer"] .bp-sb-ampel ul, #bsBereich[data-bereich="planer"] .bp-sb-liste ul { margin: 8px 0 0; padding-left: 18px; min-height: 0; overflow-y: auto; } #bsBereich[data-bereich="planer"] .bp-sb-ampel li { font-size: 12px; color: var(--bs-text); margin: 2px 0; } #bsBereich[data-bereich="planer"] .bp-sb-ampel .bp-k-text { white-space: normal; } #bsBereich[data-bereich="planer"] .bp-sb-zahl strong { margin: auto 0 4px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-sb-zahl strong.bs-rot { color: var(--marke-gefahr); } #bsBereich[data-bereich="planer"] .bp-sb-zahl .bp-balken { margin: 0 0 6px; } #bsBereich[data-bereich="planer"] .bp-sb-text p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; min-height: 0; overflow-y: auto; color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-sb-text p.bp-s { color: var(--bs-leise); white-space: normal; } #bsBereich[data-bereich="planer"] .bp-sb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 8px; } #bsBereich[data-bereich="planer"] .bp-sb-knoepfe .bs-knopf { display: inline-flex; align-items: center; gap: 4px; } #bsBereich[data-bereich="planer"] .bp-sb-aktion .bp-unten .bp-s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #bsBereich[data-bereich="planer"] .bp-sb-liste li { margin: 4px 0; font-size: 13px; line-height: 1.4; color: var(--bs-text); } #bsBereich[data-bereich="planer"] .bp-sb-liste li.bs-rot { color: var(--marke-gefahr); } @media (max-width: 1100px) { #bsBereich[data-bereich="planer"] .bp-sb-liste, #bsBereich[data-bereich="planer"] .bp-sb-ampel, #bsBereich[data-bereich="planer"] .bp-sb-breit { grid-column: span 2; } } @media (max-width: 699px) { #bsBereich[data-bereich="planer"] .bp-sb-plan, #bsBereich[data-bereich="planer"] .bp-sb-text, #bsBereich[data-bereich="planer"] .bp-sb-ampel, #bsBereich[data-bereich="planer"] .bp-sb-breit, #bsBereich[data-bereich="planer"] .bp-sb-liste { grid-column: span 1; } } /* ══ Menü-Modus (Beta, Ralph 02.11.2026 — „Seiten ohne Bento“) ══ Schmale Leiste oben (Ansicht, Zeitraum/Woche, Suche, „+ Neue Aufgabe“), darunter Liste nach Tagen links und die gewählte Aufgabe rechts. Bausteine .wss-* aus workspace-bento-schlicht.css; hier nur das, was der Planer zusätzlich braucht. Ohne html.wb-menue-modus wirkt nichts davon. */ :root.wb-menue-modus.bs-offen #bsBereich[data-bereich="planer"] { grid-template-rows: minmax(0, 1fr); padding-bottom: 0; } :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bs-kopf, :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bs-werkzeug, :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bs-pillen, :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bs-detail { display: none !important; } :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bs-liste-karte { overflow: visible; visibility: visible !important; background: transparent; box-shadow: none; padding: 0; } .bp-m { gap: var(--marke-sp-3); } .bp-m-kopf { flex-wrap: wrap; row-gap: var(--marke-sp-2); } .bp-m-leiste { display: contents; } .bp-m-kopf .wss-suche { flex: 1 1 160px; min-width: 140px; } .bp-m .wss-suche svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bp-m-gruppe { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--marke-r-pill); background: var(--wb-weich); } .bp-m-gruppe button, .bp-m-pille { border: 0; border-radius: var(--marke-r-pill); background: transparent; color: var(--wb-leise); padding: 6px 12px; font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; } .bp-m-pille { flex: none; background: var(--wb-weich); } .bp-m-gruppe button:hover, .bp-m-pille:hover { color: var(--wb-text); } .bp-m-gruppe button.an, .bp-m-pille.an { background: linear-gradient(135deg, var(--wbm-f, var(--marke-nav-blau)) 30%, color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 66%, var(--wb-verlauf-ziel, #fff))); color: #fff; } .bp-m-wnav { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--marke-schrift); color: var(--wb-leise); } .bp-m-wnav b { color: var(--wb-text); font-weight: 700; } .bp-m-wnav .bp-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--wb-weich); color: var(--wb-text); cursor: pointer; } .bp-m-wnav .bp-pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bp-m-kopf button:focus-visible, .bp-m-chip:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } .bp-m { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 16px 0 0; box-sizing: border-box; background: var(--bs-karte); border-radius: var(--bs-r, 16px); font: 400 13px var(--marke-schrift); color: var(--wb-text); } .bp-m-kopf { padding: 0 24px; } .bp-m-seite { flex: 1 1 0; height: auto; min-height: 0; column-gap: 24px; } .bp-m-mitte { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--marke-sp-3); padding: 4px 0 0 24px; box-sizing: border-box; } .bp-m-mitte > .wss-detail { flex: 1 1 auto; min-height: 0; border-left: 0; padding-left: 0; overflow: visible; } .bp-m-solo { grid-template-columns: minmax(0, 1fr); } .bp-m-solo > .bp-m-sp { display: none; } .bp-m-solo > .bp-m-mitte { padding-right: 24px; } .bp-m-sp { display: flex; min-height: 0; } .bp-m-seite[data-pane="nein"] .wss-detail { display: none; } .bp-m-haupt:empty { display: none; } .bp-m-haupt.bp-m-voll { padding: 4px 2px 20px; } .bp-m-rot .wss-sym { background: color-mix(in srgb, var(--marke-gefahr) 12%, transparent); color: var(--marke-gefahr); } .bp-m-rot .wss-meta { color: var(--marke-gefahr); } /* Woche: je Tag eine Spalte, kleine Einträge; mit offener Aufgabe steht das Formular darunter */ .bp-m-woche ~ .wss-detail { border-top: 1px solid var(--wb-linie); padding-top: var(--marke-sp-3); } .bp-m-woche { display: grid; grid-template-columns: repeat(var(--bp-tage, 5), minmax(0, 1fr)); gap: 10px; align-items: start; } .bp-m-tag { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 240px; box-sizing: border-box; padding: 10px 8px; border: 1px solid var(--wb-linie); border-radius: var(--marke-r-m); } .bp-m-tag.heute { border-color: var(--wbm-f, var(--marke-nav-blau)); } .bp-m-tag header { display: flex; align-items: baseline; gap: 6px; padding: 0 4px 4px; } .bp-m-tag header b { font: 700 13px var(--marke-schrift); } .bp-m-tag header span { font: 400 12px var(--marke-schrift); color: var(--wb-leise); font-variant-numeric: tabular-nums; } .bp-m-tag .bp-frei { margin: 4px; font: 400 12px var(--marke-schrift); color: var(--wb-leise); } .bp-m-chip { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 9px; border: 0; border-radius: var(--marke-r-s); background: var(--wb-weich); color: var(--wb-text); text-align: left; cursor: pointer; } .bp-m-chip:hover, .bp-m-chip.an { background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 12%, transparent); } .bp-m-chip b { font: 600 12px/1.35 var(--marke-schrift); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bp-m-chip small { font: 400 11px var(--marke-schrift); color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-m-chip.rot small { color: var(--marke-gefahr); } /* Formular rechts: keine schwebende Karte, die Fläche ist schon die große weiße Karte */ :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bp-m .wss-detail .bp-e { max-width: none; margin: 0; padding: 0 0 20px; background: transparent; box-shadow: none; } :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bp-m .wss-detail .bp-e:hover { box-shadow: none; } @media (max-width: 900px) { .bp-m-woche { grid-template-columns: minmax(0, 1fr); } .bp-m-tag { min-height: 0; } } /* Menü offen: der Planer liegt nur noch unter dem Menü — der dunkle Rahmen des heutigen Tages darf nicht an den Menü-Karten hervorschauen. */ :root.wb-menue-offen #bsBereich[data-bereich="planer"] { visibility: hidden; } /* ── Zeitleiste und kleines Anlegen-Feld (Ralph 08.11.2026) ── Links im Menü-Modus: oben das kleine Feld (.bp-q), darunter die Zeitleiste (.bp-g) oder der ruhige Startzustand (.bp-start). Bausteine aus marke-ui (a4h-field, a4h-btn, a4h-icon-btn, a4h-select, a4h-menue); Farben nur aus der Marke, Balken laufen leicht ins Weiße aus. */ :root.wb-menue-modus #bsBereich[data-bereich="planer"] .bp-m .wss-detail { gap: var(--marke-sp-4); } .bp-q-slot:empty { display: none; } .bp-q { display: flex; flex-direction: column; gap: var(--marke-sp-3); padding: var(--marke-sp-4); border: 1px solid var(--wb-linie); border-radius: var(--marke-r-l, 12px); background: var(--wb-karte); font-family: var(--marke-schrift); } .bp-q-kopf { display: flex; align-items: center; gap: var(--marke-sp-2); min-height: 30px; } .bp-q-kopf b { font: 600 14px var(--marke-schrift); color: var(--wb-text); } .bp-q-ort { flex: 1 1 auto; min-width: 0; font: 400 12px var(--marke-schrift); color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-q-ort.rot { color: var(--marke-gefahr); } .bp-q-kopf .a4h-icon-btn { margin-left: auto; flex: none; } .bp-q-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 130px; } .bp-q-feld.breit { flex: 1 1 100%; } .bp-q-feld[hidden] { display: none; } .bp-q-etikett { font: 500 12px var(--marke-schrift); color: var(--wb-leise); } .bp-q-feld .a4h-field, .bp-q-feld .a4h-select { width: 100%; box-sizing: border-box; min-width: 0; } .bp-q-reihe { display: flex; flex-wrap: wrap; gap: var(--marke-sp-3); align-items: flex-start; } .bp-q-bis { font: 400 11px var(--marke-schrift); color: var(--wb-leise); min-height: 14px; } .bp-q-bis:empty { display: none; } .bp-q-meil { align-self: flex-start; flex: 1 1 100%; margin: 0; } .bp-q-unten .bp-q-meil { flex: 0 0 auto; align-self: flex-end; margin-bottom: 8px; } .bp-q-unten .bp-q-feld { flex: 0 1 140px; } .bp-q-hinweis { margin: 0; font: 400 12px var(--marke-schrift); color: var(--wb-leise); } .bp-q-meldung:empty { display: none; } .bp-q-meldung .bs-box { margin: 0; } .bp-q-fuss { display: flex; align-items: center; gap: var(--marke-sp-2); } .bp-q-luecke { flex: 1 1 auto; } .bp-q .bp-q-loesch.a4h-btn { color: var(--marke-gefahr); } .bp-g-slot:empty { display: none; } .bp-g { --f: var(--wbm-f, var(--marke-nav-blau)); position: relative; font-family: var(--marke-schrift); color: var(--wb-text); } .bp-g-kopf { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: var(--bp-lab) minmax(0, 1fr); background: var(--wb-karte); border-bottom: 1px solid var(--wb-linie); } .bp-g-achse { position: relative; height: 44px; } .bp-g-baender, .bp-g-ticks { position: absolute; left: 0; right: 0; height: 22px; } .bp-g-ticks { top: 22px; } .bp-g-baender span { position: absolute; top: 0; height: 22px; line-height: 22px; padding-left: 4px; box-sizing: border-box; overflow: hidden; white-space: nowrap; font: 600 11px/22px var(--marke-schrift); color: var(--wb-text); border-left: 1px solid var(--wb-linie); } .bp-g-ticks span { position: absolute; top: 0; height: 22px; padding-left: 4px; white-space: nowrap; font: 400 11px/22px var(--marke-schrift); color: var(--wb-leise); font-variant-numeric: tabular-nums; } .bp-g-ticks span.we { opacity: .55; } .bp-g-koerper { position: relative; padding-bottom: var(--marke-sp-3); } .bp-g-linien { position: absolute; top: 0; bottom: 0; left: var(--bp-lab); right: 0; pointer-events: none; } .bp-g-linien i { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid color-mix(in srgb, var(--wb-linie) 70%, transparent); } .bp-g-linien i.heute { border-left: 2px solid var(--marke-akzent); opacity: .8; } .bp-g-plan { position: relative; display: flex; align-items: baseline; gap: var(--marke-sp-2); padding: 14px 0 4px; } .bp-g-plan b { font: 600 13px var(--marke-schrift); } .bp-g-plan span { font: 400 11px var(--marke-schrift); color: var(--wb-leise); } .bp-g-zeile { position: relative; display: grid; grid-template-columns: var(--bp-lab) minmax(0, 1fr); align-items: center; height: 34px; border-radius: var(--marke-r-m); cursor: pointer; } .bp-g-zeile:hover { background: color-mix(in srgb, var(--f) 6%, transparent); } .bp-g-zeile.an { background: color-mix(in srgb, var(--f) 12%, transparent); } .bp-g-zeile:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: -2px; } .bp-g-name { padding: 0 12px 0 8px; font: 500 13px var(--marke-schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-g-zeile.rot .bp-g-name { color: var(--marke-gefahr); } .bp-g-spur { position: relative; height: 100%; } .bp-g-balken { --b: var(--f); position: absolute; top: 9px; height: 16px; min-width: 8px; box-sizing: border-box; border-radius: var(--marke-r-pill); overflow: hidden; background: color-mix(in srgb, var(--b) 20%, var(--wb-karte)); } .bp-g-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--b) 30%, color-mix(in srgb, var(--b) 62%, var(--wb-verlauf-ziel, #fff))); } .bp-g-zeile.rot .bp-g-balken { --b: var(--marke-gefahr); } .bp-g-balken.sammel { top: 13px; height: 8px; } .bp-g-meil { position: absolute; top: 11px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--f); } .bp-g-zeile.rot .bp-g-meil { background: var(--marke-gefahr); } .bp-start { margin: auto; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: var(--marke-sp-3); padding: var(--marke-sp-6, 32px) 0; text-align: center; } .bp-start-sym { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--marke-r-l, 12px); background: color-mix(in srgb, var(--wbm-f, var(--marke-nav-blau)) 12%, transparent); color: var(--wbm-f, var(--marke-nav-blau)); } .bp-start-sym svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .bp-start b { font: 600 15px var(--marke-schrift); color: var(--wb-text); } .bp-start p { margin: 0; font: 400 13px/1.5 var(--marke-schrift); color: var(--wb-leise); } /* Rechte Spalte: Liste | Woche und „…“ in einer Reihe, darunter die Zeitraum-Auswahl */ .bp-m-mehr { position: relative; flex: none; } .bp-m-mehr svg { width: 16px; height: 16px; } .bp-m-mehr svg circle { fill: currentColor; stroke: none; } .bp-m-menue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; } .bp-m-zeit { flex: 0 0 auto; width: 180px; min-width: 0; } .bp-m-zeit .a4h-select { width: 100%; } @media (max-width: 900px) { /* Handy: Leiste, Zeitleiste/Feld und Liste stehen untereinander; die Seite scrollt als Ganzes */ .bp-m { height: auto; } .bp-m-seite.bsp-seite { height: auto; } .bp-m-seite.bsp-seite > .bsp-detail { display: flex; padding-right: 16px; } .bp-m-seite.bsp-seite > .bp-m-sp { display: block; } .bp-m-seite.bsp-seite .bsp { height: auto; max-height: 50vh; } .bp-m-kopf { padding: 0 16px; } .bp-m-mitte { overflow: visible; padding-left: 16px; } .bp-g-name { padding-right: 6px; font-size: 12px; } }