/* =================================================================== Calls & Meeting-Protokolle. Nur eine Gruppe wird optisch hervorgehoben: die, in der etwas fehlt. Alles andere bleibt bewusst ruhig -- sonst schreit die ganze Seite und man sieht nicht mehr, was wirklich dran ist. =================================================================== */ .gruppe { margin-bottom: 32px; } .stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .stufe__titel { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); } .stufe__zahl { min-width: 22px; padding: 1px 7px; text-align: center; font-size: .74rem; font-weight: 700; color: var(--text-still); background: rgba(255, 255, 255, .06); border-radius: 999px; } .block__frage { margin: 0 0 12px; font-size: .85rem; color: var(--text-still); } .gruppe__karten { display: grid; gap: 10px; margin-top: 12px; } .gruppe[data-gruppe="offen"] .stufe__titel { color: #f0c48a; } .gruppe[data-gruppe="offen"] .stufe__zahl { color: #f0c48a; background: rgba(240, 196, 138, .13); } /* ---------- Karte --------------------------------------------------------- */ .call { position: relative; padding: 15px 18px 15px 21px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-klein); transition: border-color .18s ease; } .call::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rand-stark, rgba(255, 255, 255, .18)); } .call[data-gruppe="offen"] { border-color: rgba(240, 196, 138, .32); background: rgba(240, 196, 138, .045); } .call[data-gruppe="offen"]::before { background: #f0c48a; } .call[data-gruppe="anstehend"]::before { background: var(--akzent); } .call[data-gruppe="erledigt"] { opacity: .82; } .call[data-gruppe="erledigt"]:hover { opacity: 1; } .call[data-gruppe="erledigt"]::before { background: #79d1a2; opacity: .55; } .call:hover { border-color: rgba(255, 255, 255, .18); } .call__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .call__titel { margin: 0; font-size: 1.02rem; font-weight: 650; } .call__zeit { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); } .call__text, .call__ort { margin: 10px 0 0; font-size: .86rem; color: var(--text-leise); } .call__ort::before { content: "Ort: "; color: var(--text-still); } .marke-fehlt { padding: 3px 9px; border-radius: 999px; font-size: .71rem; font-weight: 600; color: #f0c48a; background: rgba(240, 196, 138, .12); border: 1px solid rgba(240, 196, 138, .35); } /* ---------- Aufgeklappt ---------------------------------------------------- */ .call__detail { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--rand); } .call__abschnitt { margin: 2px 0 14px; font-size: .88rem; color: var(--text-leise); white-space: pre-wrap; max-width: 78ch; } .call__quelle { margin: 12px 0 0; font-size: .77rem; color: var(--text-still); } .call__verweis { color: var(--akzent); } .todo-liste { margin: 4px 0 0; padding: 0; list-style: none; } .todo-liste li { padding: 9px 13px; margin-bottom: 6px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-klein); font-size: .87rem; } .todo-liste li[data-status="erledigt"] { opacity: .6; } .todo-liste li[data-status="erledigt"] .todo-liste__titel { text-decoration: line-through; } .todo-liste__titel { display: block; } .todo-liste .kk__still { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-still); } /* ---------- Protokollbogen -------------------------------------------------- */ .bogen__hinweis { margin: 1px 0 6px; font-size: .78rem; color: var(--text-still); max-width: 70ch; } .bogen__feld { width: 100%; margin-bottom: 16px; padding: 10px 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rand); border-radius: var(--radius-klein); color: var(--text); font: inherit; resize: vertical; } .bogen__zeit { margin-bottom: 14px; padding: 9px 11px; background: rgba(255, 255, 255, .05); border: 1px solid var(--rand); border-radius: var(--radius-klein); color: var(--text); font: inherit; } .todos { display: grid; gap: 7px; margin: 4px 0 10px; } .todo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; } .todo__titel, .todo__frist { padding: 9px 11px; background: rgba(255, 255, 255, .05); border: 1px solid var(--rand); border-radius: var(--radius-klein); color: var(--text); font: inherit; } .bogen__feld:focus, .bogen__zeit:focus, .todo__titel:focus, .todo__frist:focus { outline: none; border-color: rgba(63, 189, 245, .65); box-shadow: 0 0 0 3px rgba(63, 189, 245, .14); } @media (max-width: 560px) { .todo { grid-template-columns: minmax(0, 1fr) auto; } .todo__frist { grid-column: 1 / 2; } .todo__weg { grid-row: 1 / 3; } } @media (prefers-reduced-motion: reduce) { .call, .todo__weg { transition: none; } } /* ---------- Aufklappbare Zeitraum-Blöcke -------------------------------- Wunsch Filipe, 06.09.2026, mit einem Bild von "STEHT AN 27": *"die liste da soll kategorisiert sein und werden mit einem button zum auf und zu machen."* Siebenundzwanzig Karten am Stück beantworten keine Frage -- man scrollt an allem vorbei, was diese Woche ansteht, um zu sehen, dass der Rest im November liegt. Jetzt: Heute · Diese Woche · Nächste Woche · Später, und offen ist nur der erste gefüllte Block. Gestaltet wie der Bereich "Abgebrochen" auf dem Aufgabenbrett -- dasselbe Bauteil soll auch gleich aussehen. */ .zeitblock { margin-top: 10px; border: 1px solid var(--rand); border-radius: 13px; background: rgba(255, 255, 255, .018); } .zeitblock + .zeitblock { margin-top: 8px; } .zeitblock__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-still); /* Das eigene Dreieck von weg -- es wird unten selbst gezeichnet, damit es links steht und sich beim Öffnen dreht. */ list-style: none; } .zeitblock__kopf::-webkit-details-marker { display: none; } .zeitblock__kopf:hover { color: var(--text-leise); } .zeitblock__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 13px; } .zeitblock__kopf::before { content: ""; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .18s ease; } .zeitblock[open] .zeitblock__kopf::before { transform: rotate(90deg); } .zeitblock__name { flex: none; } .zeitblock__zahl { padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: 0; color: var(--text-leise); background: rgba(255, 255, 255, .06); border: 1px solid var(--rand); font-variant-numeric: tabular-nums; } /* "ab 23. Sep" -- ohne das sagt "Später" nicht, ob morgen oder im November. Steht rechts und tritt zurück. */ .zeitblock__ab { margin-left: auto; font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-still); } /* Der offene Block hebt sich ab -- sonst sieht man beim Scrollen nicht, wo man gerade ist. */ .zeitblock[open] { border-color: var(--rand-hell); } .zeitblock[open] .zeitblock__kopf { color: var(--text-leise); } .zeitblock .gruppe__karten { padding: 4px 13px 14px; } /* ZUGEKLAPPT HEISST WIRKLICH WEG (06.09.2026, gefunden von pruef-call-kategorien).
versteckt seinen Inhalt von selbst -- aber nur, solange niemand dem Inhalt eine eigene `display`-Angabe gibt. `.gruppe__karten` traegt `display: grid` (aus dem gemeinsamen Stil der Gruppen), und damit war der Block zwar ZUGEKLAPPT, seine Karten standen aber weiterhin darunter: gemessen 367 Pixel Hoehe bei open=false. Die ganze Funktion waere damit wirkungslos gewesen -- der Knopf haette sich bewegt und sonst nichts getan. Im Bildschirmfoto fiel es nicht auf, weil der Ausschnitt genau darueber endete. Deshalb hier ausdruecklich: zu ist zu. */ .zeitblock:not([open]) .gruppe__karten { display: none; } @media (prefers-reduced-motion: reduce) { .zeitblock__kopf::before { transition: none; } } @media (forced-colors: active) { .zeitblock { border: 1px solid CanvasText; } .zeitblock__zahl { border: 1px solid CanvasText; } } /* ===================================================================== CALLS & PROTOKOLLE — übersichtlicher (07.09.2026) Wunsch Filipe: "ich will dass du diese komplette seite viel übersichtlicher machst ... total übersichtlich und hoch profissionell." --------------------------------------------------------------------- WAS AN DER SEITE UNÜBERSICHTLICH WAR Nicht die Menge -- 27 anstehende Gespräche sind viele, aber sie waren schon sauber gruppiert. Unübersichtlich waren DREI Dinge, und alle drei sind Abstände, keine Inhalte: 1. ALLES STAND GLEICH WEIT AUSEINANDER. Zwischen zwei Karten derselben Woche lag derselbe Abstand wie zwischen zwei Gruppen. Damit sieht man die Gliederung nicht mehr -- man liest eine lange Reihe statt drei Blöcke. Jetzt: 10 px innerhalb einer Gruppe, 32 px zwischen Gruppen, und die Gruppenüberschrift bekommt eine eigene Linie. 2. DIE KARTEN WAREN FAST DURCHSICHTIG. Auf einem Bild mit einem großen hellen Logo bedeutet das: Der Untergrund kämpft mit dem Text. Sie bekommen jetzt dasselbe Material wie überall -- beleuchtete Platte, Leuchtschiene in der Farbe ihres Zustands. 3. DER ZUSTAND STAND NUR IN DER FARBE. "Protokoll fehlt" war ein bernsteinfarbener Strich am Rand. Farbe allein ist nie genug -- die Schiene bleibt, aber die Karte trägt den Zustand ohnehin schon als Wort in ihrer Marke. Die Farben sind dieselben wie im ganzen Haus: Bernstein = wartet, Blau = steht an, Grün = erledigt. ===================================================================== */ .gruppe { margin-bottom: 34px; } /* Die Gruppenüberschrift bekommt eine Grundlinie über die ganze Breite -- das ist der billigste und stärkste Trick für Gliederung: Das Auge sieht einen Block, bevor es ein Wort gelesen hat. */ .gruppe > .stufe { padding-bottom: 10px; border-bottom: 1px solid rgba(150, 186, 220, .12); } .gruppe__karten { gap: 10px; margin-top: 14px; } .call { --c: var(--akzent); padding: 16px 18px 16px 22px; border-radius: 3px 16px 16px 3px; border-color: color-mix(in srgb, var(--c) 16%, rgba(150, 186, 220, .12)); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, transparent) 0%, color-mix(in srgb, var(--c) 6%, transparent) 14%, color-mix(in srgb, var(--c) 2%, transparent) 30%, transparent 50%), linear-gradient(163deg, rgba(21, 28, 41, .95) 0%, rgba(11, 15, 24, .95) 62%, rgba(8, 11, 18, .95) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .5), 0 12px 26px -18px rgba(0, 0, 0, .85); transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo); } /* Die Schiene läuft über die ganze Höhe, nicht mit 10 px Luft oben und unten. Ein Strich, der vor der Ecke aufhört, sieht aus wie ein Fehler; einer, der durchgeht, sieht aus wie Bauweise. */ .call::before { top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, transparent) 0%, color-mix(in srgb, var(--c) 42%, transparent) 100%); opacity: .75; transition: opacity var(--tempo); } .call[data-gruppe="offen"] { --c: #f0c48a; } .call[data-gruppe="anstehend"] { --c: var(--akzent); } .call[data-gruppe="erledigt"] { --c: #79d1a2; } /* Die alten Sonderregeln setzten Fläche und Strichfarbe getrennt -- jetzt steckt beides in --c. Diese eine Zeile ersetzt vier. */ .call[data-gruppe="offen"]::before, .call[data-gruppe="anstehend"]::before, .call[data-gruppe="erledigt"]::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, transparent) 0%, color-mix(in srgb, var(--c) 42%, transparent) 100%); } /* Erledigtes tritt zurück -- aber über die Fläche, nicht über die Schriftdeckkraft. `opacity` auf der ganzen Karte hätte auch den Text erfasst, und genau dieser Fehler hat am 07.09. an anderer Stelle einen Kontrast unter die Schwelle gedrückt. */ .call[data-gruppe="erledigt"] { opacity: 1; border-color: rgba(150, 186, 220, .10); } .call[data-gruppe="erledigt"]::before { opacity: .5; } .call:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 34%, rgba(150, 186, 220, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 4px 9px -4px rgba(0, 0, 0, .55), 0 18px 36px -20px rgba(0, 0, 0, .9); } .call:hover::before { opacity: 1; } .call__titel { font-size: 1.05rem; font-weight: 700; color: #eaf2fb; } .call__zeit { color: var(--text-leise); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .call, .call:hover { transform: none; } } @media (forced-colors: active) { .call { background: Canvas; box-shadow: none; border: 1px solid CanvasText; } }