/* workspace-bento-zeit.css — Zusatz-Gestaltung des Bereichs „Zeiterfassung" in der Bento-Ansicht (Logik: workspace-bento-zeit.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). Ganz vorn die Stoppuhr (2×2) mit großer Zeit und rundem Start-/Stopp-Knopf (Türkis wie in der bisherigen Zeiterfassung — Rot heißt in der Marke „Mikrofon nimmt auf"; Vorschläge als Pillen in der Kachel), daneben die Zeitraum-Kachel (Umschalter + kleine Summe) und die Excel-Kachel, danach je Zeiteintrag eine Kachel und am Ende die „+"-Kachel zum Nachtragen. Filter- und Werkzeug-Kacheln heben sich beim Überfahren wie auf der Startseite. Kennzahl-Leiste, Suchfeld und Filter-Pillen der Vorlage sind hier ausgeblendet. Dazu das Bearbeiten-Formular im großen Detail. Greift nur im geöffneten Bereich (#bsBereich[data-bereich="zeit"]). */ /* ── Nur Kacheln: Kennzahl-Leiste, Suche und Pillen der Vorlage weg; das Raster scrollt mit Luft für Hover (Regel 9) ── */ #bsBereich[data-bereich="zeit"] { grid-template-rows: minmax(0, 1fr); } #bsBereich[data-bereich="zeit"] .bs-kopf, #bsBereich[data-bereich="zeit"] .bs-werkzeug, #bsBereich[data-bereich="zeit"] .bs-pillen { display: none; } #bsBereich[data-bereich="zeit"] .bs-liste-karte { overflow: visible; } #bsBereich[data-bereich="zeit"] .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="zeit"] .bz-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; } #bsBereich[data-bereich="zeit"] .bz-k { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 20px 22px; box-sizing: border-box; overflow: hidden; gap: 0; 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="zeit"] .bz-k.b2 { grid-column: span 2; } #bsBereich[data-bereich="zeit"] .bz-k.h2 { grid-row: span 2; } #bsBereich[data-bereich="zeit"] .bz-k.bs-kachel { cursor: pointer; } #bsBereich[data-bereich="zeit"] .bz-k.bs-kachel:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="zeit"] .bz-k.bs-kachel:focus-visible { box-shadow: 0 0 0 2px var(--bs-grund), 0 0 0 4px var(--marke-akzent); } #bsBereich[data-bereich="zeit"] .bz-k:has(input, textarea):hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); } /* Regel 10: Zeitraum- und Excel-Kachel heben sich wie die Kacheln der Startseite (.wb-k:hover); mit Eingabefeld nur Schatten (oben) */ #bsBereich[data-bereich="zeit"] .bz-schalter:hover, #bsBereich[data-bereich="zeit"] .bz-export-k:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } /* „+"-Kachel am Ende — wie „+ Kachel hinzufügen" auf der Startseite (.wb-k.plus) */ #bsBereich[data-bereich="zeit"] .bz-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="zeit"] .bz-plus:hover { background: var(--bs-karte); color: var(--bs-text); } #bsBereich[data-bereich="zeit"] .bz-plus:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="zeit"] .bz-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } #bsBereich[data-bereich="zeit"] .bz-k-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="zeit"] .bz-k-l > span { overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="zeit"] .bz-k-s { margin-top: auto; font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="zeit"] .bz-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="zeit"] .bz-k-text { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--bs-leise); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } #bsBereich[data-bereich="zeit"] .bz-k-dauer { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } #bsBereich[data-bereich="zeit"] .bz-laeuft .bz-k-dauer { font-size: 15px; font-weight: 700; letter-spacing: 0; } #bsBereich[data-bereich="zeit"] .bz-leer { align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--bs-leise); } /* Zeitraum-Kachel: nur der Umschalter, darunter klein die Summe (Regel 4 + 6) */ #bsBereich[data-bereich="zeit"] .bz-seg { display: flex; gap: 2px; margin-top: 12px; padding: 3px; border-radius: var(--marke-r-pill); background: var(--bs-weich); } #bsBereich[data-bereich="zeit"] .bz-seg button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: var(--marke-r-pill); padding: 8px 6px; 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="zeit"] .bz-seg button:hover { background: var(--marke-feld); color: var(--bs-text); } #bsBereich[data-bereich="zeit"] .bz-seg button.an { background: var(--bs-dunkel); color: #fff; cursor: default; } /* Excel-Kachel */ #bsBereich[data-bereich="zeit"] .bz-export-k .bs-knopf { margin-top: auto; align-self: flex-start; } #bsBereich[data-bereich="zeit"] .bz-export-k .bs-meldung .bs-box { margin: 6px 0 0; padding: 0; background: none; font-size: 12px; } /* Stoppuhr-Kachel */ #bsBereich[data-bereich="zeit"] .bz-uhr-k { padding-bottom: 16px; } #bsBereich[data-bereich="zeit"] .bz-zeile { margin: -4px 0 16px; font-size: 13px; color: var(--bs-leise); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #bsBereich[data-bereich="zeit"] .bz-form { display: grid; gap: 12px; margin-bottom: 12px; } #bsBereich[data-bereich="zeit"] .bz-feld { display: grid; gap: 4px; min-width: 0; } #bsBereich[data-bereich="zeit"] .bz-feld .a4h-field { width: 100%; box-sizing: border-box; min-width: 0; } #bsBereich[data-bereich="zeit"] .bz-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #bsBereich[data-bereich="zeit"] .bs-meldung .bs-box { margin: 0 0 12px; } #bsBereich[data-bereich="zeit"] .bz-gefahr { color: var(--marke-gefahr); margin-left: auto; } /* ── Stoppuhr ── */ #bsBereich[data-bereich="zeit"] .bz-stoppuhr { display: flex; flex-direction: column; flex: 1 0 auto; } #bsBereich[data-bereich="zeit"] .bz-uhr { display: grid; justify-items: center; align-content: center; gap: 8px; flex: 1 1 auto; padding-top: 6px; } #bsBereich[data-bereich="zeit"] .bz-suche { position: relative; width: 100%; display: grid; gap: 4px; justify-self: stretch; } #bsBereich[data-bereich="zeit"] .bz-suche .a4h-field { width: 100%; box-sizing: border-box; } /* Vorschläge als Pillen IN der Kachel (Regel 1: nie eine schwebende Liste) — ohne Eingabe „zuletzt", beim Tippen Kontakte. Höchstens zwei Reihen, damit Uhr und Knopf in der 2×2-Kachel bleiben. */ #bsBereich[data-bereich="zeit"] .bz-pillen { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 6px; width: 100%; max-height: 62px; overflow: hidden; } #bsBereich[data-bereich="zeit"] .bz-pillen:empty { display: none; } #bsBereich[data-bereich="zeit"] .bz-pillen-links { justify-content: flex-start; max-height: none; margin-top: -4px; } #bsBereich[data-bereich="zeit"] .bz-chip { max-width: 100%; height: 28px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text); font: 500 12px var(--marke-schrift); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bsBereich[data-bereich="zeit"] .bz-chip:hover { background: color-mix(in srgb, var(--bs-text) 10%, var(--bs-karte)); } #bsBereich[data-bereich="zeit"] .bz-chip.an { background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="zeit"] .bz-chip:disabled { opacity: .55; cursor: default; } /* marke-ausnahme: große Stoppuhr-Zahl wie in der bisherigen Zeiterfassung (40 px), Bühnen-Wert außerhalb der Werkzeug-Leiter */ #bsBereich[data-bereich="zeit"] .bz-zeit { margin-top: 4px; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1; color: var(--bs-leise); } #bsBereich[data-bereich="zeit"] .bz-uhr.laeuft .bz-zeit { color: var(--bs-text); } #bsBereich[data-bereich="zeit"] .bz-fuer { min-height: 18px; max-width: 100%; color: var(--bs-leise); font-size: 13px; display: flex; align-items: center; gap: 6px; } #bsBereich[data-bereich="zeit"] .bz-fuer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bsBereich[data-bereich="zeit"] .bz-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--marke-zweit); flex: none; animation: bz-puls 1.4s ease-in-out infinite; } @keyframes bz-puls { 50% { opacity: .3; transform: scale(.75); } } #bsBereich[data-bereich="zeit"] .bz-rund { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--marke-zweit); box-shadow: var(--marke-schatten); transition: transform .12s, filter .15s; } #bsBereich[data-bereich="zeit"] .bz-rund:hover { filter: brightness(1.06); } #bsBereich[data-bereich="zeit"] .bz-rund:active { transform: scale(.96); } #bsBereich[data-bereich="zeit"] .bz-rund:disabled { opacity: .45; cursor: default; filter: none; } #bsBereich[data-bereich="zeit"] .bz-rund:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 3px; } #bsBereich[data-bereich="zeit"] .bz-rund i { width: 24px; height: 24px; border-radius: 50%; background: #fff; } #bsBereich[data-bereich="zeit"] .bz-uhr.laeuft .bz-rund i { width: 22px; height: 22px; border-radius: 6px; } /* Nachfrage nach dem Stopp in derselben Kachel */ #bsBereich[data-bereich="zeit"] .bz-nachfrage { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; } #bsBereich[data-bereich="zeit"] .bz-nachfrage .bz-zeile { margin: 0; } #bsBereich[data-bereich="zeit"] .bz-nachfrage textarea { flex: 1 1 auto; min-height: 64px; width: 100%; box-sizing: border-box; resize: none; } #bsBereich[data-bereich="zeit"] .bz-nachfrage .bs-meldung .bs-box { margin: 0; } #bsBereich[data-bereich="zeit"] .bz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; } @media (prefers-reduced-motion: reduce) { #bsBereich[data-bereich="zeit"] .bz-punkt { animation: none; } #bsBereich[data-bereich="zeit"] .bz-schalter:hover, #bsBereich[data-bereich="zeit"] .bz-export-k:hover { transform: none; } } /* Spalten wie die Startseite (workspace-bento.js spalten(): 6 · 4 bis 1100 px · 3 bis 899 px · 1 unter 700 px) */ @media (max-width: 1100px) { #bsBereich[data-bereich="zeit"] .bz-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 899px) { #bsBereich[data-bereich="zeit"] .bz-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { #bsBereich[data-bereich="zeit"] .bs-liste { margin: 0 -12px -12px; padding: 12px 12px 12px; } #bsBereich[data-bereich="zeit"] .bz-raster { gap: 12px; } #bsBereich[data-bereich="zeit"] .bs-d-aktion { position: static; margin-top: 8px; } #bsBereich[data-bereich="zeit"] .bz-drei { grid-template-columns: 1fr 1fr; } #bsBereich[data-bereich="zeit"] .bz-drei .bz-feld:first-child { grid-column: 1 / -1; } } @media (max-width: 699px) { #bsBereich[data-bereich="zeit"] .bz-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; } #bsBereich[data-bereich="zeit"] .bz-k { padding: 16px 18px; } #bsBereich[data-bereich="zeit"] .bz-k.b2 { grid-column: span 1; } #bsBereich[data-bereich="zeit"] .bz-pillen { max-height: 28px; } /* Handy: eine Reihe Vorschläge */ #bsBereich[data-bereich="zeit"] .bz-k.h2 { grid-row: span 3; } /* Eingabe + Schnellstart + Uhr brauchen drei flache Reihen */ #bsBereich[data-bereich="zeit"] .bz-k.h2.bz-uhr-laeuft { grid-row: span 2; } } /* ── Menü-Modus (Beta, 02.11.2026): schmale Leiste oben, Zeiten als Liste links, Eintrag rechts (Grundstil: workspace-bento-schlicht.css) ── */ :root.wb-menue-modus #bsBereich[data-bereich="zeit"] .bs-liste { margin: 0; padding: 0; height: 100%; overflow: visible; } :root.wb-menue-modus #bsBereich[data-bereich="zeit"] .bs-liste-karte { height: 100%; } .bz-seite { 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); } .bz-mitte { padding: 0 24px; box-sizing: border-box; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--marke-sp-3); } .bz-mitte > .wss-detail { flex: 1 1 auto; min-height: 0; border-left: 0; padding-left: 0; overflow: visible; } .bz-liste { display: flex; min-height: 0; } .bz-leiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--marke-sp-2) var(--marke-sp-3); padding-bottom: var(--marke-sp-3); border-bottom: 1px solid var(--wb-linie); } .bz-stopp { flex: 1 1 380px; min-width: 0; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-stoppuhr { flex-direction: row; flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--marke-sp-2); } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-stoppuhr > .a4h-field { flex: 1 1 200px; min-width: 0; height: 34px; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-stoppuhr:has(.bz-lab) { align-items: flex-end; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-lab { flex: 1 1 200px; min-width: 0; display: grid; gap: 4px; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-lab .a4h-field { height: 34px; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-fuer { flex: 1 1 200px; min-height: 34px; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-zeit { line-height: 34px; margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wb-leise); } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-fuer + .bz-zeit { color: var(--wb-text); } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-startknopf { height: 34px; } #bsBereich[data-bereich="zeit"] .bz-stopp .bz-pillen { flex: 1 0 100%; justify-content: flex-start; max-height: none; } #bsBereich[data-bereich="zeit"] .bz-stopp .bs-meldung { flex: 1 0 100%; } .bz-werk { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--marke-sp-2); } .bz-werk .bs-knopf { height: 34px; } .bz-pillenreihe { display: inline-flex; gap: 4px; } .bz-pillenreihe button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-weich); color: var(--wb-leise); font: 600 12px var(--marke-schrift); cursor: pointer; } .bz-pillenreihe button:hover { color: var(--wb-text); } .bz-pillenreihe button.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; } .bz-sum { font-size: 12px; color: var(--wb-leise); font-variant-numeric: tabular-nums; white-space: nowrap; } .bz-meldung { flex: 1 0 100%; } .bz-meldung:empty { display: none; } .bz-meldung .bs-box { margin: 0; } .bz-dauer { flex: none; font: 600 12px var(--marke-schrift); font-variant-numeric: tabular-nums; color: var(--wb-leise); } .bz-dauer.laeuft { color: var(--marke-ok); } .bz-seite .wss-detail { padding-top: 0; } .bz-seite .wss-detail .bs-d-aktion { position: static; margin: 12px 0 0; padding: 0; background: none; border-top: 0; } .bz-seite .wss-detail .bz-nachfrage { flex: 0 0 auto; } .bz-seite .wss-detail .bz-k-l { margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--wb-leise); } /* Handy: Leiste und Liste stehen untereinander (die Stoppuhr muss immer erreichbar sein) */ @media (max-width: 900px) { .bz-seite.bsp-seite > .bsp-detail { display: flex; } .bz-seite.bsp-seite > .bz-liste { display: block; } .bz-seite .bz-liste { max-height: 40vh; } } #bsBereich[data-bereich="zeit"] .bz-seite .wss-detail .bz-nachfrage textarea { flex: none; height: 120px; max-width: 560px; }