braucht keinen Ring. */
main:focus {
outline: none;
}
/* Globaler Tastatur-Fokus — gilt für alle interaktiven Elemente, die sonst
keinen eigenen sichtbaren Fokus haben (Links, Buttons, Nav, Tabs). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 2px;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- TeX-Formeln (KaTeX) --- */
/* Vor dem Client-Rendering zeigen die Spans den rohen TeX-Quelltext (Fallback
ohne JS); Display-Formeln stehen als Block, überbreite scrollen horizontal. */
.math-display {
display: block;
overflow-x: auto;
overflow-y: hidden;
padding: 0.2rem 0;
}
/* ===== Listenansichten: Projekte (LLM-157) und Katalog (LLM-175) =====
Beide Seiten zeigen dieselbe Sache in zwei Darstellungen (Kachel/Tabelle)
und teilen sich deshalb die Bausteine: .liste-fullwidth (Breite),
.liste-toolbar + .ansicht-umschalter (Kopfzeile), .karten-grid/.karte
(Kacheln), .liste-tabelle/.liste-zeile (Tabelle). Die Namen sind seit
LLM-175 neutral — vorher trugen sie ein „projekt-"-Präfix, was beim zweiten
Nutzer entweder zu einer Kopie derselben Regeln oder zu einem irreführenden
Namen geführt hätte. Projekt- bzw. katalogspezifisch bleiben nur die
Ergänzungen (Zeilenmenü dort, Sektions-Chip hier). */
/* Steuerzone: Umschalter samt Filter und (im Katalog) die Kategorie-Chips
gehören zusammen — sie steuern alle dieselbe Liste. Vorher standen Kopfzeile,
„Zuletzt ingestiert", Toolbar, Chips und Liste in fast gleichem Abstand
(2,4 / 1,5 / 1,6 / 1,6rem); bei gleichmäßigen Abständen kann das Auge nicht
erkennen, was zusammengehört, und alles wirkt gedrängt. Jetzt: innen eng
(gap), außen Luft, und eine Haarlinie schließt die Zone gegen die Liste ab.
Auf der Projektübersicht enthält die Zone nur die Toolbar — dieselbe Regel
trägt beide Fälle. */
.liste-steuerung {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin: 0 0 1.9rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--rule-soft);
}
/* Die Kinder bringen eigene Außenabstände mit (sie stehen auch außerhalb der
Zone); hier zählt allein der gap. */
.liste-steuerung > * { margin-bottom: 0; }
.liste-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin: 0 0 1.6rem;
}
/* Umschalter und (in der Projektübersicht) „Neues Projekt" bilden die linke
Gruppe, damit rechts in BEIDEN Übersichten dasselbe steht: der Textfilter
(LLM-176). Der Abstand ist größer als der Gruppen-Innenabstand von
.ansicht-umschalter, damit der Knopf nicht wie dessen dritter Reiter wirkt. */
.liste-toolbar-links {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
}
/* ——— Textfilter der Übersichten (LLM-176) ——— */
/* Allgemeine Hilfsklasse: sichtbar für Screenreader, unsichtbar am Schirm.
Dasselbe Rezept steckt bisher zweimal inline im Stylesheet (eingeklappte
Sidebar, Datei-Input der PDF-Dropzone); neue Stellen nutzen diese Klasse. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.liste-filter {
display: flex;
align-items: center;
gap: 0.5rem;
}
.liste-filter input[type="search"] {
width: min(18rem, 60vw);
padding: 0.35rem 0.7rem;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--paper-raised);
color: var(--ink);
font-family: inherit;
font-size: 0.85rem;
}
.liste-filter input[type="search"]::placeholder { color: var(--ink-faint); }
.liste-filter input[type="search"]:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 1px;
}
/* Nur ohne JavaScript sichtbar: das Skript blendet ihn beim Start aus, weil
dann das Tippen filtert. */
.liste-filter-los {
padding: 0.35rem 0.8rem;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--paper-raised);
color: var(--ink-soft);
font-family: inherit;
font-size: 0.85rem;
cursor: pointer;
}
/* Sitzt IN der Filterzeile links vom Feld (LLM-176): Als eigene Zeile darunter
erschien sie erst beim Filtern und schob die ganze Liste nach unten. Die
Filtergruppe ist rechtsbündig, also wächst sie nach links und das Eingabefeld
bleibt an seinem Platz. nowrap, damit „12 von 72" nicht umbricht und die
Zeilenhöhe verändert. */
.liste-filter-treffer {
font-size: 0.8rem;
color: var(--ink-faint);
white-space: nowrap;
}
.liste-filter-leer {
margin: 0 0 1.4rem;
font-size: 0.9rem;
color: var(--ink-soft);
}
@media (max-width: 600px) {
/* Auf schmalen Schirmen steht der Filter unter der linken Gruppe und nimmt
die volle Breite – ein 18rem-Feld neben zwei Bedienelementen bräche um. */
.liste-filter { width: 100%; }
.liste-filter input[type="search"] { width: 100%; }
}
.ansicht-umschalter {
display: inline-flex;
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
}
.ansicht-umschalter a {
padding: 0.4rem 0.9rem;
font-size: 0.82rem;
text-decoration: none;
/* --ink-faint statt --ink-muted, weil der Hintergrund die erhöhte Fläche
ist: dort unterschreitet --ink-muted den AA-Kontrast (4,39:1 statt 4,5:1),
--ink-faint ist in den Themes genau dafür getunt. Gleiche Begründung wie
bei .pdf-dropzone__hint weiter oben; axe-Lauf 2026-07-25. */
color: var(--ink-faint);
background: var(--paper-raised);
}
.ansicht-umschalter a + a { border-left: 1px solid var(--rule); }
.ansicht-umschalter a[aria-current="true"] {
background: var(--sage-wash);
color: var(--sage-deep);
font-weight: 600;
}
.ansicht-umschalter a:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: -2px;
}
/* ——— Breite beider Ansichten ——— */
/* Sechs Tabellenspalten (LLM-167) wie auch mehrere Kacheln je Reihe sprengen
--measure (34rem) deutlich – dasselbe Mittel wie .column.ws-fullwidth/
.column.graph-fullwidth (Unterseite gibt dem über main_extra eine
zusätzliche Klasse), hier aber nur max-width statt Vollbreiten-Ausbruch:
die Seite bleibt zentriert, nur breiter. Bewusst für BEIDE Ansichten, sonst
springt beim Umschalten auch der Kopf, der in beiden derselbe ist. */
.column.liste-fullwidth {
max-width: calc(var(--measure) * 2.2);
}
/* Kicker, Titel und der einleitende Absatz sollen trotzdem Lesebreite
behalten, sonst läuft der Fließtext über 1000px – nur Toolbar, Tabelle und
Kachelgitter sollen die neue Breite ausnutzen. Scoped auf
.liste-fullwidth, damit keine andere Seite mit
.kicker/h1.title/.meta betroffen ist. */
.column.liste-fullwidth .kicker,
.column.liste-fullwidth h1.title,
.column.liste-fullwidth .meta {
max-width: var(--measure);
}
/* ——— Kachelansicht ——— */
/* Mindestbreite und Innenabstand je +15% gegenüber dem ersten Entwurf
(16rem/1.1rem 1.2rem): In der schmalen Lesespalte passten nur zwei Kacheln
nebeneinander, in der jetzt vollen Breite sind es vier – die Kacheln dürfen
dabei nicht kleinteilig wirken (bei voller Breite 344px statt 303px).
min(…, 100%) statt der nackten 18.4rem: Eine Mindestbreite größer als der
Container zwingt die Spur trotzdem auf ihren Mindestwert und schiebt die
Kachel seitlich aus dem Bildschirm – auf 320px-Geräten liegen 18.4rem
(276px im pkm-Theme, 313px im garten-Theme) über der Inhaltsbreite von
275px bzw. 269px. Der min()-Riegel deckelt die Spur auf den Container. */
.karten-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(18.4rem, 100%), 1fr));
gap: 1.1rem;
}
.karte {
position: relative;
border: 1px solid var(--rule);
border-radius: 8px;
background: var(--paper-raised);
padding: 1.25rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.karte-link {
text-decoration: none;
color: var(--ink);
border-radius: 3px;
}
.karte-link:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
}
/* Reserviert Platz rechts, damit der Titeltext nicht unter das absolut
positionierte Menü läuft – das Menü liegt oben rechts über der Titelzeile
(.karte-menue, LLM-167). */
.karte-titel {
font-family: var(--display);
font-size: 1.15rem;
font-weight: 600;
margin: 0;
padding-right: 2rem;
}
/* Vier Zeilen Deckel (LLM-175): Die Katalog-Beschreibungen kommen aus
index.md und reichen von einem Halbsatz bis zu mehreren Sätzen. Ungedeckelt
bestimmt die längste Beschreibung die Höhe der GANZEN Gitterreihe, und
daneben stehen drei fast leere Kacheln. Der volle Text steht weiterhin in
der Tabellenansicht (title-Attribut) und auf der Seite selbst.
Projektbeschreibungen sind kurz — dort ändert der Deckel nichts. */
.karte-beschreibung {
color: var(--ink-soft);
font-size: 0.9rem;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
/* `margin-top: auto` statt eines festen Abstands (LLM-175): Die Kacheln einer
Gitterreihe sind gleich hoch, ihre Inhalte aber unterschiedlich lang — ohne
das Auto-Maß hinge der Fuß (Kategorie bzw. Zähler/Datum) bei kurzen Kacheln
in der Mitte, bei langen unten. So sitzt er in jeder Kachel auf gleicher
Höhe. Gilt für beide Listenseiten. */
.karte-fuss {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 0.4rem;
}
/* --ink-faint: die Karte liegt auf --paper-raised, siehe .ansicht-umschalter a. */
.karte-datum {
font-size: 0.76rem;
color: var(--ink-faint);
}
/* Verankert das Menü der Kachel oben rechts (Vorbild: .liste-zeile-menue in
der Tabelle – dort übernimmt die | die Positionierung, hier übernimmt
dieser Wrapper dieselbe Rolle, LLM-167). */
.karte-menue {
position: absolute;
top: 1rem;
right: 1rem;
}
/* ——— Tabellenansicht ——— */
/* Bildlauf-Rahmen der Tabellenansicht. Bewusst NICHT durchgehend
`overflow-x: auto` (so stand es als Inline-Style im Template): Sobald eine
Achse einen anderen Wert als `visible` trägt, zieht die CSS-Overflow-
Spezifikation die andere Achse auf `auto` nach – der Container klippt dann
auch nach unten und schneidet das aufgeklappte Zeilen-Menü ab
(.liste-zeile-aktionen, position:absolute), sichtbar als plötzlicher
senkrechter Scrollbalken neben einem halben Menü. Auf Breiten, wo die
Tabelle ohnehin passt, gibt es also gar nichts zu scrollen und `visible`
ist richtig; erst darunter braucht es den waagerechten Bildlauf, und dort
ist das Menü der seltenere Fall. */
.liste-tabelle-wrap { overflow: visible; }
@media (max-width: 600px) {
.liste-tabelle-wrap { overflow-x: auto; }
}
.liste-tabelle {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.liste-tabelle th {
text-align: left;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-faint);
padding: 0.5rem 0.7rem;
border-bottom: 1px solid var(--rule);
}
.liste-tabelle td {
padding: 0.6rem 0.7rem;
border-bottom: 1px solid var(--rule-soft);
}
.liste-zeile { cursor: pointer; }
.liste-zeile:hover { background: var(--sage-wash); }
/* Der Titel-Link trägt die Tastatur-/No-JS-Navigation der Zeile; er soll sich
optisch aber wie Zellentext lesen, nicht wie ein Fließtext-Link. */
.liste-zeile-link {
color: var(--ink);
text-decoration: none;
font-weight: 600;
}
.liste-zeile-link:hover { color: var(--sage-deep); }
.liste-zeile-link:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
border-radius: 3px;
}
/* Einzeilig mit Ellipse plus title-Attribut für den vollen Text – dasselbe
Muster wie .projekt-kopf-beschreibung in projekte_workspace.html, nur ohne
deren Flex-spezifisches flex:1/min-width:0 (hier ein | , kein Flex-Kind).
max-width erzwingt die Kappung: ohne festen Wert würde die Spalte im
Auto-Table-Layout einfach so breit wie der Text (LLM-167). */
.liste-zeile-beschreibung {
max-width: 22rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.liste-zeile-menue { position: relative; text-align: right; }
/* Beide Ansichten sollen exakt dasselbe Icon-Erscheinungsbild haben, ohne
CSS zu duplizieren – die vier Regeln dieses Blocks gelten deshalb für
beide Menü-Wrapper (LLM-167). */
.liste-zeile-menue summary,
.karte-menue summary {
cursor: pointer;
list-style: none;
padding: 0.15rem 0.5rem;
border-radius: 4px;
color: var(--ink-faint);
}
.liste-zeile-menue summary::-webkit-details-marker,
.karte-menue summary::-webkit-details-marker { display: none; }
.liste-zeile-menue summary:hover,
.karte-menue summary:hover { background: var(--rule-soft); }
.liste-zeile-menue summary:focus-visible,
.karte-menue summary:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
}
.liste-zeile-aktionen {
position: absolute;
right: 0;
top: 100%;
z-index: 5;
display: flex;
flex-direction: column;
min-width: 9rem;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--paper-raised);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
.liste-zeile-aktionen button,
.liste-zeile-aktionen form button {
width: 100%;
text-align: left;
padding: 0.5rem 0.8rem;
border: none;
background: none;
font: inherit;
color: var(--ink);
cursor: pointer;
}
.liste-zeile-aktionen button:hover { background: var(--sage-wash); }
/* ——— Katalog: Kategorie als Filter und Chip (LLM-175) ——— */
/* Die Filterzeile ersetzt das frühere Sektions-Akkordeon: Sie zeigt dieselbe
Übersicht (alle Kategorien mit Zähler), ist aber immer sichtbar statt nur
im zugeklappten Zustand — und sie filtert, was das Akkordeon nie konnte.
Bewusst Links statt JS-Umschalter: ohne JavaScript bedienbar, verlinkbar,
und der Server filtert ohnehin. */
.sektions-filter {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 1.6rem;
}
.sektions-filter a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.7rem;
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 0.8rem;
text-decoration: none;
/* --ink-faint statt --ink-muted: der Chip liegt auf --paper-raised, dort
unterschreitet --ink-muted den AA-Kontrast (gleiche Begründung wie bei
.ansicht-umschalter a). */
color: var(--ink-faint);
background: var(--paper-raised);
}
.sektions-filter a:hover { color: var(--sage-deep); border-color: var(--sage-light); }
.sektions-filter a[aria-current="true"] {
background: var(--sage-wash);
border-color: var(--sage-light);
color: var(--sage-deep);
font-weight: 600;
}
.sektions-filter a:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
}
.sektions-filter-zahl { font-variant-numeric: tabular-nums; opacity: 0.8; }
/* Der Chip an Kachel und Tabellenzeile trägt dieselbe Kategorie wie die
Filterzeile und führt auf denselben Filter — die Kategorie ist damit
überall dasselbe Ding, egal wo man sie anfasst. */
.sektions-chip {
display: inline-block;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: var(--sage-wash);
color: var(--sage-deep);
font-size: 0.74rem;
text-decoration: none;
/* Ohne nowrap bricht „Sicherheit & Datenschutz" in der Tabellenspalte um und
die Pille wird zum zweizeiligen Klotz; die Spalte hat die Breite dafür. */
white-space: nowrap;
}
.sektions-chip:hover { background: var(--sage-light); color: var(--paper); }
.sektions-chip:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
}
/* Sortierbare Spaltenköpfe: Der Pfeil erscheint erst, wenn JavaScript die
Sortierung übernommen hat (aria-sort wird dann von "none" weggesetzt) —
ohne JS zeigt der Kopf keinen Hinweis auf eine Funktion, die es nicht gibt. */
/* Die Projekttabelle deckelt die Beschreibung auf 22rem, weil dort fünf
weitere Spalten daneben stehen. Der Katalog hat drei Spalten und damit Platz
— ohne eigenen Deckel bliebe die Beschreibung grundlos beschnitten. */
.katalog-tabelle .liste-zeile-beschreibung { max-width: 36rem; }
.katalog-tabelle th[data-sort] { cursor: pointer; user-select: none; }
.katalog-tabelle th[data-sort]:hover { color: var(--sage-deep); }
.katalog-tabelle th[aria-sort="ascending"]::after { content: " ↑"; }
.katalog-tabelle th[aria-sort="descending"]::after { content: " ↓"; }
.katalog-tabelle th[data-sort]:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: -2px;
}
/* ——— Dialoge (Anlegen/Umbenennen/Picker) ——— */
/* Gedämpfter Text IM Dialog trägt --ink-soft statt --ink-faint: der Dialog
liegt auf --paper, wo selbst der AA-getunte Meta-Ton knapp reißt (garten
4,31:1). Betrifft Feldbeschriftungen, Reiter, Vorschauzahlen, Slug-Zusatz. */
.projekt-dialog {
width: min(30rem, 92vw);
padding: 1.4rem 1.5rem;
border: 1px solid var(--rule);
border-radius: 8px;
background: var(--paper);
color: var(--ink);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.projekt-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.projekt-dialog h2 {
margin: 0 0 0.9rem;
font-family: var(--display);
font-size: 1.2rem;
}
.projekt-dialog form {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.projekt-dialog label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-soft);
margin-top: 0.5rem;
}
.projekt-dialog input[type="text"],
.projekt-dialog textarea,
.projekt-dialog select {
border: 1px solid var(--rule);
border-radius: 5px;
padding: 0.45rem 0.65rem;
font-family: var(--serif);
font-size: 0.95rem;
background: var(--paper-raised);
color: var(--ink);
}
.projekt-dialog-aktionen {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin-top: 1rem;
}
/* ——— Picker (vier Reiter) ——— */
.projekt-picker-dialog { width: min(34rem, 92vw); }
.projekt-picker-tabs {
display: flex;
gap: 0.3rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--rule);
}
.projekt-picker-tabs [role="tab"] {
border: none;
background: none;
font: inherit;
font-size: 0.85rem;
padding: 0.5rem 0.8rem;
color: var(--ink-soft);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.projekt-picker-tabs [role="tab"][aria-selected="true"] {
color: var(--sage-deep);
border-bottom-color: var(--sage-deep);
font-weight: 600;
}
.projekt-picker-tabs [role="tab"]:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
}
.projekt-picker-auswahl,
.projekt-picker-vorschau {
font-size: 0.82rem;
color: var(--ink-soft);
margin: 0.3rem 0;
}
.projekt-picker-seitenliste {
list-style: none;
margin: 0.4rem 0;
padding: 0;
max-height: 14rem;
overflow-y: auto;
border: 1px solid var(--rule-soft);
border-radius: 6px;
}
.projekt-picker-seite {
padding: 0.35rem 0.7rem;
border-bottom: 1px solid var(--rule-soft);
font-size: 0.88rem;
}
.projekt-picker-seite:last-child { border-bottom: none; }
.projekt-picker-seite label { display: flex; align-items: flex-start; gap: 0.5rem; text-transform: none; letter-spacing: normal; color: var(--ink); font-size: inherit; margin: 0; }
.projekt-picker-seite input[type="checkbox"] { flex: none; margin-top: 0.2rem; }
.projekt-picker-seite-text { flex: 1; }
.projekt-picker-slug { color: var(--ink-soft); font-size: 0.78rem; }
/* ——— Workspace (dreispaltig: Quellen · Chat · Studio) ——— */
/* --ink-soft: --ink-faint erreicht auf --paper im Garten-Theme nur 4,31:1.
Das gilt dort für JEDE --ink-faint-Fläche auf Papier, nicht nur hier – der
Zielwert steht so im Theme-Kommentar, wird aber knapp verfehlt; siehe
.projekt-regel-anzahl. Diese Klasse wird nur vom Workspace benutzt. */
.projekt-zurueck {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--ink-soft);
text-decoration: none;
}
.projekt-zurueck:hover { color: var(--sage-deep); }
/* Kompakte einzeilige Kopfleiste des Workspace: Zurück-Link, Titel,
Beschreibung und Umbenennen nebeneinander statt gestapelt. Die frühere
gestapelte Variante (.projekt-workspace-kopf) ist damit entfallen. */
.projekt-kopfzeile {
display: flex;
align-items: baseline;
gap: 0.9rem;
flex-wrap: wrap;
}
/* Hebt das margin-bottom der allgemeinen .projekt-zurueck-Regel auf – in der
einzeiligen Leiste würde es die Grundlinien auseinanderziehen. */
.projekt-kopfzeile .projekt-zurueck {
margin-bottom: 0;
white-space: nowrap;
}
.projekt-titel {
font-family: var(--display);
font-variation-settings: "opsz" 40, "wght" 420, "SOFT" 20;
font-size: 1.35rem;
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0;
color: var(--ink);
/* KEIN white-space:nowrap (stand hier bis zur Messung unten): Der Titel ist
der einzige Teil der Kopfzeile, dessen Länge der Nutzer frei bestimmt –
`_NAME_MAX_LEN` in projects.py erlaubt 120 Zeichen. Mit nowrap wuchs er
einfach weiter und schob die ganze Seite über die Fensterkante, und zwar
auf JEDER Breite: gemessen 1386px Seitenbreite bei 901px Fenster
(Titelbreite allein 1104px), auf Telefonbreite schon ab knapp 50 Zeichen
(441px bei 375px Fenster). Deshalb kein Breakpoint – die Kopfzeile ist
ohnehin `flex-wrap: wrap`, der Titel brach als einziges Kind nicht mit um.
Umbrechen statt kappen: Anders als bei .projekt-kopf-beschreibung (Ellipse
+ title-Attribut) ist der Name die Identität der Seite; „Wissensbasis fuer
die redaktio…“ nimmt sie weg, zwei Zeilen kosten nur Höhe. Solange Platz
ist, ändert sich nichts – bei 48 Zeichen auf 901px und 1280px sind
Titelbreite, Zeilenhöhe und Nachbarpositionen unverändert (gemessen).
`anywhere` statt `break-word`: Nur `anywhere` senkt auch die
Inhaltsmindestbreite, das Flex-Kind darf also wirklich schrumpfen – bei
`break-word` bliebe ein einzelner überlanger Name (ein Wort ohne
Leerzeichen) weiterhin ein starrer Block. Gleiche Wahl und gleicher Grund
wie bei .lernhilfe-beleg a. */
overflow-wrap: anywhere;
}
.projekt-titel em {
font-style: italic;
font-variation-settings: "opsz" 40, "wght" 400, "SOFT" 100, "WONK" 1;
color: var(--sage-deep);
}
/* Nimmt den Rest der Zeile und schneidet ab, statt umzubrechen – der volle
Text steht im title-Attribut (s. Template). min-width:0 ist nötig, sonst
ignoriert ein Flex-Kind das text-overflow und dehnt die Zeile. */
.projekt-kopf-beschreibung {
flex: 1;
min-width: 0;
margin: 0;
font-family: var(--serif);
font-size: 0.8rem;
color: var(--ink-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ohne Beschreibung fehlt das dehnende Flex-Kind – dann schiebt der Knopf
sich selbst an den rechten Rand. */
.projekt-kopfzeile .btn-ghost { margin-left: auto; }
/* Der Workspace ist die einzige Ansicht, die den Inhaltsbereich VOLLSTÄNDIG
ausfüllt – randlos bis an Fensterkante und -boden, direkt anschließend an
die Sidebar. Begründung: Es ist eine dichte Arbeitsfläche aus drei
Spalten; ein zentrierter Kasten mit Weißraum ringsum verschenkt auf
Laptop-Schirmen genau die Fläche, die die Spalten brauchen, und erzeugt
nebenbei einen zweiten Bildlauf (Seite UND Spalte).
.column bringt für Lesetexte eine Breitenbegrenzung und Ränder mit; beides
wird hier abgeräumt und in die Kopfzone verlegt, die als einzige noch
Seitenrand trägt. Die Flex-Spalte ersetzt zugleich jede geratene
Höhenformel: die Kopfzone nimmt, was sie braucht, das Gitter exakt den
Rest – unabhängig davon, ob eine Projektbeschreibung oder eine
Flash-Meldung darübersteht. */
.column.ws-fullwidth {
max-width: none;
padding: 0;
height: 100dvh;
display: flex;
flex-direction: column;
}
.projekt-kopfzone {
flex: none;
padding: 0.75rem var(--gutter);
}
@media (max-width: 900px) {
/* Einspaltig gestapelt braucht die Seite mehr als die Fensterhöhe – hier
scrollt wieder das Dokument, nicht die einzelne Spalte. */
.column.ws-fullwidth {
height: auto;
display: block;
}
}
/* Die drei Spalten sind EINE zusammenhängende Fläche mit Trennlinien, keine
drei gerundeten Einzelkarten (Vorbild: das Flow-Mockup zum
Projekte-Konzept). Kein Rahmen und kein Radius außen herum: das Gitter
grenzt links an die Sidebar, rechts an die Fensterkante und unten an den
Fensterboden – gerundete Ecken bräuchten dort einen Rand, der genau den
Platz kostet, um den es geht. Bleibt die Linie nach oben, die es vom
Seitenkopf trennt.
Feste Außenspalten, flexible Mitte: der Chat ist die Arbeitsfläche und
bekommt jeden zusätzlichen Pixel, Quellen- und Studio-Spalte behalten ihre
Lesebreite. */
.ws-grid {
display: grid;
/* Die drei Spaltenbreiten stehen als Variablen statt als feste Werte im
grid-template-columns: Einklappen heißt dann nur noch, --ws-links bzw.
--ws-rechts auf --ws-leiste zu setzen (s. „Außenspalten einklappen“
weiter unten), und ein späteres Ziehen der Breiten griffe auf dieselbe
Variable. Ohne diesen Zwischenschritt entstünden zwei konkurrierende
Mechanismen für dieselbe Größe. */
/* Quellen-Spalte wächst stufenlos mit dem Fenster statt fest zu stehen
(LLM-207). Das Platzbudget erzwingt es: Die Sidebar belegt 258px, das
Studio 300px — bei 1440px Fensterbreite bleiben der Mitte damit 632px,
also GENAU ihre Lesebreite. Ein fester Zuwachs auf 300px ginge deshalb
unmittelbar von der Mitte ab und drückte den Chat auf einem 1280px-Schirm
unter seine Lesebreite. Gemessen an dieser Formel: 250px bis 1190px
Fensterbreite (unverändert wie vorher), 302px bei 1440px (die
gewünschten +20%), 360px ab 1715px.
Die Untergrenze ist Teil der Entscheidung, nicht Vorsicht: ohne sie liefe
die Spalte auf schmalen Fenstern unter ihre Lesbarkeit. */
--ws-links: clamp(250px, 21vw, 360px);
--ws-rechts: 300px;
/* Breite der eingeklappten Leiste. In rem, damit sie mit einer vom Nutzer
hochgesetzten Schriftgröße mitwächst (WCAG 1.4.4) – der Klapp-Knopf darin
ist ein Icon-Knopf und würde bei fester px-Breite irgendwann anstoßen. */
--ws-leiste: 2.6rem;
grid-template-columns: var(--ws-links) 1fr var(--ws-rechts);
/* Gleiche Bewegung wie beim Einklappen der Sidebar (.side). Der globale
prefers-reduced-motion-Block am Dateiende schaltet sie mit ab. */
transition: grid-template-columns 200ms ease;
border-top: 1px solid var(--rule);
/* Weiße Arbeitsfläche wie im Mockup: die Karten darin (Regeln, Artefakte,
Studio-Kacheln, Lernhilfe) tragen dieselbe Fläche und heben sich allein
durch ihre Rahmen ab. ACHTUNG bei Textfarben in diesen Panels –
--paper ist in allen drei Themes DUNKLER als --paper-raised, die
Kontraste sind hier also knapper als auf einer abgesetzten Fläche. */
background: var(--paper);
/* Nimmt exakt die Resthöhe unter der Kopfzone – alle drei Spalten damit
gleich hoch, jede scrollt für sich (s. .ws-panel-koerper). Ohne
min-height:0 würde ein Flex-Kind nicht unter seine Inhaltshöhe
schrumpfen und das Gitter über den Fensterboden hinausschieben. */
flex: 1;
min-height: 0;
}
/* Ohne Studio-Panel (`lernhilfen_enabled: false`) rendert das Template nur
zwei Panels – dann darf das Gitter auch nur zwei Spuren haben, sonst steht
rechts eine leere Spalte, die der Mitte fehlt.
Bewusst über grid-template-columns statt über `--ws-rechts: 0`: die
Klapp-Regeln weiter unten setzen genau diese Variable, und ein aus einer
früheren Sitzung gemerktes `ws-rechts-zu` gewänne dort über die
Spezifität – die leere Spur wäre wieder da, nur schmaler. Eine fehlende
Spur kann keine Variable zurückholen. --ws-links bleibt unangetastet (die
Quellen-Spalte klappt weiter und ließe sich später ziehen), --ws-rechts hat
in diesem Zustand schlicht keine Spalte mehr.
Steht vor dem gestapelten Breakpoint: dort gewinnt die einspaltige Regel
bei gleicher Spezifität über die Quellreihenfolge. */
.ws-grid-ohne-rechts {
grid-template-columns: var(--ws-links) 1fr;
}
@media (max-width: 900px) {
.ws-grid {
grid-template-columns: 1fr;
/* Einspaltig gestapelt ergibt eine gemeinsame Höhe keinen Sinn – die
Panels wachsen mit ihrem Inhalt, die Seite scrollt als Ganzes. */
flex: none;
}
/* Gestapelt kommt auf /fragen der Chat ZUERST (LLM-207, Etappe 2): Die
Seite ist die Startseite des Wikis, und in Dokumentreihenfolge stünde
sonst die Quellenspalte davor — wer die Seite öffnet, landete zuerst bei
einer Liste (im leeren Zustand: bei deren Erklärungstext) und müsste
daran vorbeiscrollen, um überhaupt fragen zu können.
Nur für den Chat, nicht für den Projekt-Workspace: Dort ist die
Quellenliste die Arbeitsgrundlage, die man beim Betreten zuerst prüft,
und die Reihenfolge ist Bestand. */
.ws-panel-chat-fragen { order: -1; }
}
.ws-panel {
display: flex;
flex-direction: column;
/* Ohne min-height:0 wächst ein Flex-Element über seinen Inhalt hinaus,
statt den Kind-Container scrollen zu lassen (Flexbox-Default
min-height:auto) – der Panel-Körper bekäme dann nie eine Scroll-Grenze. */
min-height: 0;
/* Dasselbe Argument für die Waagerechte, hier aber als GITTER-Element: die
automatische Mindestgröße (min-width:auto) hält ein Grid-Element auf
seiner Inhaltsmindestbreite – es überläuft dann seine Spur, statt zu
schrumpfen. Bei großer Wurzelschrift (Browser-Schriftgröße „sehr groß“,
ab etwa 22px) schob das den ganzen Workspace über die Fensterkante:
gemessen 419px Panelbreite bei 375px Viewport, also ein waagerechter
Bildlauf der GESAMTEN Seite auf Telefonbreite. Mit min-width:0 schrumpft
das Panel mit und der Überlauf landet dort, wo ihn der Entwurf erwartet –
im Scroll-Container der Spalte (.ws-panel-koerper).
`minmax(0, 1fr)` auf der Spur allein genügt NICHT (gemessen): dann
schrumpft zwar die Spur, das Element mit min-width:auto überläuft sie
trotzdem. Die Regel gilt deshalb für BEIDE Breakpoints – auf dem Desktop
stehen zwar feste Spurbreiten (250px/300px), die automatische
Mindestgröße greift dort aber genauso. */
min-width: 0;
border-right: 1px solid var(--rule);
}
.ws-panel:last-child { border-right: 0; }
@media (max-width: 900px) {
/* Senkrechte Trennlinien stünden im gestapelten Fluss quer. */
.ws-panel {
border-right: 0;
border-bottom: 1px solid var(--rule);
}
.ws-panel:last-child { border-bottom: 0; }
/* Gestapelt ist Klappen gegenstandslos (die Spalten stehen untereinander,
es gibt keine Breite zu gewinnen) – der Knopf entfällt ganz. Die
Klapp-Regeln selbst stehen in einer min-width-Abfrage und greifen hier
ohnehin nicht, ein aus einer Desktop-Sitzung persistierter Zustand kann
die gestapelte Darstellung also nicht verstellen. Gleiches Vorgehen wie
beim Sidebar-Einklappen (s. .side-toggle im 600px-Query). */
.ws-panel-klapp { display: none; }
}
/* ——— Außenspalten einklappen —————
Quellen- und Studio-Spalte lassen sich auf eine schmale Leiste einklappen,
die Mitte (Chat/Werkzeug) nimmt den frei werdenden Platz. Die Spalte
verschwindet dabei NICHT ganz: Knopf und ein senkrechtes Rubrum bleiben
stehen, sonst fehlte der Weg zurück.
Nur außerhalb des gestapelten Breakpoints wirksam – exakt die Bauweise des
Sidebar-Einklappens (@media (min-width: 601px) weiter oben): ein in einer
Desktop-Sitzung gemerkter Klappzustand darf die gestapelte Darstellung auf
dem Telefon nicht überschreiben. */
@media (min-width: 901px) {
/* Öffnet man eine Quelle im Panel, verbreitert sich die Spalte für die
Leseansicht (LLM-169, W3) — dieselbe Variable wie die Klapp-Regel
darunter (Vertrag für ein späteres Ziehen der Breiten, LLM-170), kein
zweiter Mechanismus für dieselbe Größe. Steht VOR der `ws-quellen-zu`-
Regel: beide Selektoren haben dieselbe Spezifität (0,2,1), bei
gleichzeitig gesetzten Klassen gewinnt über die Quellreihenfolge das
Einklappen — die richtige Rangfolge, denn Einklappen ist die explizite,
zuletzt getroffene Nutzerhandlung (das Klapp-Skript in
projekte_workspace.html entfernt `ws-quellen-offen` beim Einklappen
ohnehin aktiv, diese Reihenfolge ist also nur die zweite Absicherung).
Kein fester Wert: 480px ließen der Chat-Mitte direkt am Breakpoint
(901px) kaum Platz. Bis LLM-207 stand hier `min(480px, 38vw)` — also
eine reine Obergrenze ohne Untergrenze, wodurch die Leseansicht auf
schmalen Fenstern beliebig eng werden konnte.
Die Werte sind nach dem ersten Praxiseinsatz gesenkt worden (34vw statt
40vw, Deckel 560 statt 620): Auf einem 14-Zoll-MacBook (1512px) ergaben
40vw eine 605px breite Leseansicht, und mit Sidebar (258px) und rechter
Spalte (300px) blieben dem Chat GEMESSEN 349px — die Antwortblase war
dann 285px breit, Überschriften brachen in Einzelwörter. Nichts lief
technisch über, es war schlicht unbenutzbar. Zusammen mit dem
automatischen Einklappen der rechten Spalte (s. _spalten_klapp.html)
bleiben demselben Fenster jetzt rund 700px. */
html.ws-quellen-offen .ws-grid { --ws-links: clamp(380px, 34vw, 560px); }
html.ws-quellen-zu .ws-grid { --ws-links: var(--ws-leiste); }
html.ws-rechts-zu .ws-grid { --ws-rechts: var(--ws-leiste); }
/* Die Klapp-Regeln hängen an den POSITIONS-Markern `.ws-panel-links` und
`.ws-panel-rechts`, nicht an den inhaltlichen Klassen (bis LLM-207:
`.ws-panel-quellen` und `.ws-panel-studio`): Rechts steht im Workspace
das Studio, auf /fragen die Gliederung — zwei verschiedene Inhalte an
derselben Stelle. `:first-child`/`:last-child` wären der naheliegende
Ersatz, greifen aber daneben, sobald die rechte Spur fehlt
(`ws-grid-ohne-rechts`): Letztes Panel ist dann der Chat, und ein aus
einer früheren Sitzung gemerktes `ws-rechts-zu` blendete dessen Körper
aus. Ein expliziter Marker kann das nicht. */
html.ws-quellen-zu .ws-panel-links .ws-panel-koerper,
html.ws-rechts-zu .ws-panel-rechts .ws-panel-koerper { display: none; }
/* Titel und Zähl-Badge weichen, der Knopf rückt in die Mitte der Leiste.
Der Innenabstand des Kopfes (1rem seitlich) passt in 2,6rem nicht mehr –
die Mindesthöhe bleibt unangetastet, damit die Trennlinie unter dem Kopf
weiter mit den beiden anderen Spalten fluchtet. */
html.ws-quellen-zu .ws-panel-links .ws-panel-kopf,
html.ws-rechts-zu .ws-panel-rechts .ws-panel-kopf {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
html.ws-quellen-zu .ws-panel-links .ws-panel-kopf > h2,
html.ws-quellen-zu .ws-panel-links .ws-panel-kopf > .ws-panel-zahl,
html.ws-rechts-zu .ws-panel-rechts .ws-panel-kopf > h2,
html.ws-rechts-zu .ws-panel-rechts .ws-panel-kopf > .ws-panel-zahl {
display: none;
}
html.ws-quellen-zu .ws-panel-links .ws-panel-leiste,
html.ws-rechts-zu .ws-panel-rechts .ws-panel-leiste {
display: flex;
}
}
/* Icon-Knopf im Spaltenkopf, im Stil von .side-toggle (dasselbe Panel-Icon,
dieselbe Bedeutung). flex: none, damit ihn der Kopf nicht staucht. */
.ws-panel-klapp {
flex: none;
background: none;
border: none;
cursor: pointer;
padding: 0.3rem;
line-height: 0;
border-radius: 4px;
color: var(--ink-muted);
transition: color 160ms ease, background 160ms ease;
}
/* --paper-raised statt --paper wie bei .side-toggle: die Panels stehen hier
selbst auf --paper, ein Hover in derselben Farbe wäre unsichtbar. */
.ws-panel-klapp:hover {
color: var(--ink);
background: var(--paper-raised);
}
/* Inhalt der eingeklappten Leiste: Zähl-Badge über gestürztem Rubrum. Nur im
eingeklappten Zustand eingeblendet (display:flex, s. oben) – die
Voreinstellung `none` hier deckt zugleich den gestapelten Breakpoint unter
900 px ab, wo die Klapp-Regeln gar nicht greifen.
Das Badge ist der eigentliche Indikator: eingeklappt sagt allein die Zahl,
ob in der Spalte etwas liegt (s. Begründung am Markup im Template). Es
steht im DOM ein zweites Mal, weil der Spaltenkopf seine Mindesthöhe
behalten muss, damit die Trennlinien der drei Spalten fluchten. */
.ws-panel-leiste {
display: none;
flex-direction: column;
align-items: center;
gap: 0.55rem;
flex: none;
padding-top: 0.7rem;
}
/* Senkrechtes Rubrum: sagt, WELCHE Spalte hier steckt. aria-hidden im
Template – die trägt ihr aria-label unverändert und der Knopf
seinen eigenen Namen, vorgelesen wäre das die dritte Wiederholung desselben
Wortes. Die Zahl daneben bleibt zugänglich, sonst wäre der Indikator
sehend-exklusiv. */
.ws-panel-leiste-titel {
writing-mode: vertical-rl;
font-family: var(--display);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
/* --ink-soft: die Panels stehen auf --paper, dort verfehlen --ink-muted und
--ink-faint im Garten-Theme AA (s. Kommentar bei .projekt-regel-anzahl). */
color: var(--ink-soft);
user-select: none;
}
/* Die Panels stehen auf --paper (weiße Arbeitsfläche). Dort verfehlen BEIDE
naheliegenden Metatöne AA im Garten-Theme: --ink-muted von Haus aus und
--ink-faint mit 4,31:1 knapp. Deshalb --ink-soft, wie bei
.projekt-regel-anzahl. Nur hier überschrieben, die globale
.empty-state-Regel bleibt unangetastet. */
.ws-panel .empty-state { color: var(--ink-soft); }
.ws-panel h2 {
font-family: var(--display);
font-size: 1.05rem;
margin: 0;
}
/* Kopf bleibt beim Scrollen des Panel-Körpers stehen (flex: none) und trägt
die Trennlinie nach unten.
`min-height` samt `nowrap`: die drei Spaltenköpfe MÜSSEN exakt gleich hoch
sein, sonst laufen ihre Trennlinien auf drei verschiedenen Höhen quer
durchs Gitter. Deshalb steht hier eine feste Mindesthöhe statt eines
umbrechenden Kopfes – Knöpfe, die daneben nicht mehr passen, gehören in
den Panel-Körper (s. „Quelle hinzufügen“ im Template). */
.ws-panel-kopf {
display: flex;
flex: none;
align-items: center;
flex-wrap: nowrap;
min-height: 3.4rem;
gap: 0.6rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--rule);
}
/* Kopf-Knöpfe kompakt, damit sie die Kopfhöhe nicht aufblähen. */
.ws-panel-kopf .btn,
.ws-panel-kopf .btn-ghost {
font-size: 0.75rem;
padding: 0.3rem 0.7rem;
white-space: nowrap;
}
.ws-panel-kopf h2 { margin: 0; }
/* Schiebt alles nach dem Zähl-Badge (den Knopf) an den rechten Rand. Steht
auf dem Badge statt auf dem Knopf, weil nicht jeder Panel-Kopf einen Knopf
hat (Studio) und nicht jeder ein Badge (Chat/Werkzeug). */
.ws-panel-kopf .ws-panel-zahl { margin-right: auto; }
/* --paper-raised: das Badge liegt auf der jetzt weißen Panel-Fläche und
bräuchte sonst allein den Rahmen, um sich abzuheben (Mockup: .count auf
--raised). */
.ws-panel-zahl {
font-size: 0.7rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
background: var(--paper-raised);
border: 1px solid var(--rule);
border-radius: 99px;
padding: 0.05em 0.55em;
}
/* Der eine Scroll-Container je Spalte. */
.ws-panel-koerper {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 1rem;
}
.projekt-regelliste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.projekt-regel {
border: 1px solid var(--rule-soft);
border-radius: 6px;
padding: 0.7rem 0.8rem;
}
.projekt-regel-kopf {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.projekt-regel-pill {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.1em 0.55em;
border-radius: 99px;
background: var(--rule-soft);
/* --ink-soft, nicht --ink-faint: --rule-soft ist die dunkelste der hellen
Flächen, dort reicht auch der AA-getunte Meta-Ton nicht (garten 3,87:1). */
color: var(--ink-soft);
}
.projekt-regel-pill-statisch {
background: var(--sage-wash);
color: var(--sage-deep);
}
.projekt-regel-wert {
font-size: 0.9rem;
color: var(--ink);
margin: 0 0 0.5rem;
word-break: break-word;
}
/* Umbruch erlaubt: in der 250px-Spalte passen Seitenzahl, „Bearbeiten“ und
„Entfernen“ nicht in eine Zeile – ohne wrap schöbe der Fuß die Spalte
waagerecht auf (gemessen 274px Inhalt in 249px Spalte). */
.projekt-regel-fuss {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.4rem 0.6rem;
}
.projekt-regel-aktionen {
display: flex;
align-items: center;
gap: 0.4rem;
}
/* --ink-soft: seit die Panels auf --paper stehen (weiße Arbeitsfläche wie im
Mockup) erreicht --ink-faint im Garten-Theme nur noch 4,31:1 und verfehlt
AA. --ink-muted hilft dort NICHT – garten dreht die Reihenfolge um und
setzt --ink-muted (#8A8175) heller als --ink-faint (#777163). */
.projekt-regel-anzahl {
font-size: 0.8rem;
color: var(--ink-soft);
}
/* Vollbreiten-Knopf über der Regelliste (Mockup `.addsrc`). */
.projekt-quelle-hinzufuegen {
display: block;
width: 100%;
margin-bottom: 0.9rem;
text-align: center;
}
.projekt-effektiv {
margin-top: 1.1rem;
padding-top: 0.9rem;
border-top: 1px solid var(--rule);
font-size: 0.9rem;
}
/* --ink-soft, gleiche Begründung wie .projekt-regel-anzahl oben. */
.projekt-effektiv-hinweis {
font-size: 0.78rem;
color: var(--ink-soft);
margin-top: 0.2rem;
}
.projekt-seitenliste {
margin-top: 0.6rem;
font-size: 0.85rem;
}
.projekt-seitenliste summary {
cursor: pointer;
color: var(--ink-soft);
}
.projekt-seitenliste summary:hover { color: var(--sage-deep); }
/* Bewusst OHNE eigenes max-height/overflow-y: der Panel-Körper ist der EINE
Scroll-Container je Spalte (s. .ws-panel-koerper). Ein geschachtelter
zweiter Scrollbalken erschien schon bei einer Handvoll Einträgen, während
darunter die halbe Spalte leer stand. Lang wird die Liste nur, wenn der
Nutzer sie selbst aufklappt – dann darf sie die Spalte füllen.
Negativer Seitenrand: Trennlinien und Hover-Fläche greifen etwas über die
Textkante hinaus, der Linktext selbst fluchtet dank des ausgleichenden
Innenabstands am weiter mit dem übrigen Panelinhalt. */
.projekt-seitenliste ul {
list-style: none;
margin: 0.5rem -0.45rem 0;
padding: 0;
border-top: 1px solid var(--rule);
}
/* Trennlinie je Eintrag: Wiki-Titel sind oft mehrzeilig (Haupttitel + Zusatz
nach „ – “), ohne Linie verschwimmt das Ende des einen Links mit dem Anfang
des nächsten. --rule statt --rule-soft, weil letzteres im PKM-Theme mit
--paper-raised identisch ist und auf der weißen Panel-Fläche unsichtbar
bliebe. */
.projekt-seitenliste li {
border-bottom: 1px solid var(--rule);
}
.projekt-seitenliste li a {
display: block;
padding: 0.45rem;
line-height: 1.35;
color: var(--ink);
/* Die durchgehende Unterstreichung war der zweite Grund für den verwischten
Eindruck – über drei Zeilen gezogen liest sie sich als Fläche statt als
Linkgrenze. In einer Liste, deren Einträge ausnahmslos Links sind, trägt
die Zeile selbst die Affordanz (WCAG 1.4.1 zielt auf Links IM Fließtext);
bei Hover und Tastaturfokus kehrt die Unterstreichung zurück. */
text-decoration: none;
}
.projekt-seitenliste li a:hover,
.projekt-seitenliste li a:focus-visible {
color: var(--sage-deep);
background: var(--paper-raised);
text-decoration: underline;
}
/* ——— Quellenansicht im Panel (LLM-169, W3) ——————————————————
Öffnet eine Seite aus der Seitenliste OHNE den Workspace zu verlassen —
Kurzfassung = Zusammenfassung + Text, kein Nachbau von seite.html (keine
TOC, kein „Siehe auch", kein Graph). Rendert in derselben Panel-Spalte wie
die Regelliste oben (.ws-panel-koerper), deshalb bewusst kompakter
als die Vollseiten-Leseansicht. */
.projekt-quelle-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.9rem;
}
.projekt-quelle-kopf .btn-ghost {
font-size: 0.78rem;
padding: 0.3rem 0.6rem;
}
/* Eigene Klasse statt Wiederverwendung von .projekt-zurueck: beide Links
spielen dieselbe Rolle (unauffällige Navigation), sitzen aber in
unterschiedlichen Kontexten (Kopfzeile des ganzen Workspace vs. Kopf der
Quellenansicht) und sollen sich unabhängig voneinander ändern lassen. */
.projekt-quelle-vollstaendig {
flex: none;
font-size: 0.78rem;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
}
.projekt-quelle-vollstaendig:hover { color: var(--sage-deep); }
/* Gleiche Größe wie .ws-panel h2 (Vorbild: spielt hier dieselbe Rolle
als prominente Überschrift innerhalb der Spalte). */
.projekt-quelle-titel {
font-family: var(--display);
font-size: 1.05rem;
line-height: 1.3;
margin: 0 0 0.7rem;
color: var(--ink);
}
/* --paper-raised (heller als die --paper-Panelfläche, s. Kommentar bei
.ws-grid) plus linker Akzentstreifen setzen die
Zusammenfassung sichtbar vom Fließtext darunter ab, ohne ein eigenes
Aufklapp-Element zu brauchen (Index-Beschreibungen sind auf 300 Zeichen
begrenzt, s. Kommentar im Partial). */
.projekt-quelle-zusammenfassung {
background: var(--paper-raised);
border-left: 3px solid var(--sage-light);
border-radius: 0 4px 4px 0;
padding: 0.6rem 0.8rem;
margin: 0 0 1.2rem;
font-size: 0.88rem;
color: var(--ink-soft);
}
/* Etwas kleiner als die Vollseiten-Leseansicht: dort erbt `article p` die
Root-Größe, hier ist die Spalte auch im geöffneten Zustand
(--ws-links: min(480px, 38vw)) schmaler als die Lesespalte. word-break/
overflow-wrap gegen lange unumbrochene Tokens (URLs, lange Slugs) in
dieser schmalen Spalte. */
.projekt-quelle-text {
font-size: 0.92rem;
word-break: break-word;
overflow-wrap: break-word;
}
/* article img bringt bereits max-width:100% mit (s. „Artikel-Bilder"
weiter oben) – hier zusätzlich explizit, falls sich diese Klasse einmal
vom article-Element löst. */
.projekt-quelle-text img {
max-width: 100%;
}
/* ——— Chat im Projekt-Workspace (LLM-158, Etappe E3) ——————————
Bettet die geteilte Chat-Shell (Abschnitt "Chat-Shell" oben,
templates/_fragen_chat.html/_fragen_chat_js.html) in die mittlere
Panel-Spalte des Workspace ein. Rein additiv — die /fragen-Vollseiten-
Regeln oben bleiben unverändert, hier ausschließlich Overrides mit dem
Panel-Präfix .ws-panel-chat. */
/* Chat- und Werkzeug-Ansicht teilen sich die Mittelspalte und werden per
`hidden` umgeblendet (s. projekte_workspace.html). Beide brauchen die
Flex-Achse der Spalte, damit ihr Kopf steht und ihr Körper scrollt.
ACHTUNG: `display: flex` würde das `hidden`-Attribut überstimmen — dieses
Stylesheet hat KEINEN globalen [hidden]-Reset. Die zweite Regel ist
deshalb kein Beiwerk, sondern die Bedingung dafür, dass das Umblenden
überhaupt noch funktioniert. */
.ws-panel-chat > div {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
.ws-panel-chat > div[hidden] { display: none; }
/* Trägt nur Innenabstand und Flex-Achse; der Verlauf scrollt eine Ebene
tiefer in .chat-log (s. Kommentar im Template). */
.ws-chat-koerper {
overflow-y: visible;
display: flex;
flex-direction: column;
}
/* calc(100dvh - …) ist für einen Chat als eigene Vollseite gedacht; im Panel
bestimmt die Spaltenhöhe den Rahmen, nicht der Viewport.
Diese Regel gilt seit LLM-207 (Etappe 2) für BEIDE Chats — /fragen ist
seither ebenfalls eine Arbeitsfläche mit diesem Panel in der Mitte. Die
Spur bleibt flexibel — sie bekommt weiterhin jeden Pixel, den die
Außenspalten übriglassen —, aber der Inhalt darin läuft nicht mehr über
die volle Breite. Auf einem 1920px-Schirm waren das vorher über 1000px
Zeilenlänge, also weit jenseits dessen, was sich ruhig liest; die beiden
Chats sahen nebeneinander wie zwei verschiedene Oberflächen aus. (Die
Breite von /fragen stand bis dahin in einer eigenen
`.column.has-chat-toc`-Regel, die mit der freistehenden Gliederungs-Aside
entfallen ist.)
`margin-inline: auto` zentriert die begrenzte Box in der Spur; ein
`width: 100%` braucht es dafür nicht, das Flex-Kind wird ohnehin bis zur
max-width gestreckt. */
.ws-panel-chat .chat-shell {
min-height: 0;
flex: 1;
max-width: calc(var(--measure) * 1.2);
margin-inline: auto;
}
/* Verlauf füllt die Restfläche der Spalte und scrollt darin. Früher eine
feste max-height: seit das Gitter eine gemeinsame Spaltenhöhe hat, würde
ein fester Wert entweder Luft verschenken oder überlaufen.
Der Innenabstand rechts gehört zu DIESEM Kasten und nicht zur .chat-shell:
Der Scrollbalken sitzt an seiner Innenkante, und die Fragenblase steht
rechtsbündig (`margin-left: auto`) — ohne Abstand klebt sie unmittelbar
daran. Links bleibt es bei null, dort ist keine Kante, an die etwas stoßen
könnte, und die Antwortblase soll die Breite behalten. */
.ws-panel-chat .chat-log {
overflow-y: auto;
flex: 1;
min-height: 0;
padding-right: 0.9rem;
}
/* Die Gesprächsliste ist Beiwerk über dem Verlauf: sie darf ihm bei vielen
Gesprächen nicht die Fläche nehmen, sondern scrollt selbst. */
.ws-panel-chat .projekt-chatliste {
flex: none;
max-height: 8rem;
overflow-y: auto;
}
/* position:sticky bezieht sich auf den Viewport-Rand der Vollseite; im
Panel-Gitter würde die Leiste beim Scrollen der GESAMTEN Seite über die
Panel-Grenzen hinaus "kleben" — hier reicht der normale Fluss am Ende
des Panels (border-top bleibt als optische Trennlinie erhalten). */
/* Transparent statt der eigenen Fläche: die Leiste soll die Fläche des
Panels durchscheinen lassen, egal welche das ist. Die Trennlinie oben
bleibt als Abgrenzung. */
.ws-panel-chat .chat-compose {
position: static;
box-shadow: none;
background: transparent;
padding-bottom: 0;
}
/* Die zentrierte Startansicht (.chat-shell-empty oben) braucht Platz, den die
Chat-Spalte des Workspace nicht hat — der Kopf ist dort ohnehin leer
(chat_hero=False) und bleibt einfach im normalen Fluss.
Gescopt auf den Workspace, seit /fragen dieselben Panel-Bausteine benutzt
(LLM-207): Dort trägt der leere Zustand den Hero („Frag dein Wiki"), und
der gehört wie bisher in die Mitte der Fläche. Die Unterscheidung ist die
Zusatzklasse am Panel, nicht die Fensterbreite — die beiden Fälle
unterscheiden sich im INHALT, nicht in der Größe. */
.ws-panel-chat-projekt .chat-shell-empty { justify-content: flex-start; }
/* Gegenstück für /fragen (LLM-207, Etappe 2): Dort ist der leere Zustand die
Startansicht des Wikis — Hero und Eingabefeld gehören zusammen in die Mitte
der Fläche, wie vor dem Spalten-Umbau.
Nötig, weil `.ws-panel-chat .chat-log { flex: 1 }` (Verlauf füllt die
Spalte und scrollt darin) seit dem Umbau AUCH auf /fragen greift und dort
`.chat-shell-empty .chat-log { flex: 0 0 auto }` bei gleicher Spezifität
über die Quellreihenfolge schlägt: Der leere Verlauf nahm die ganze Höhe,
schob die Eingabe an den Fensterboden und ließ den Hero oben allein
stehen. Mit der zusätzlichen Klasse (0,3,0) gewinnt wieder die
Startansicht — und nur sie, der gefüllte Thread scrollt unverändert. */
.ws-panel-chat-fragen .chat-shell-empty .chat-log { flex: 0 0 auto; }
/* ——— Gesprächsliste des Projekts (nur DIESES Projekts, siehe
projekte_workspace.html) — eigene schlichte Klasse im Stil der übrigen
Projekt-Panels, spiegelt aber das Muster der Sidebar-Chatliste
(.chatlist-item, _layout.html). */
.projekt-chatliste-liste {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.projekt-chatliste-item {
border-radius: 4px;
transition: background 130ms ease;
}
/* --paper-raised: die Panel-Fläche ist jetzt selbst --paper, ein Hover in
derselben Farbe wäre unsichtbar. */
.projekt-chatliste-item:hover,
.projekt-chatliste-item:focus-within { background: var(--paper-raised); }
.projekt-chatliste-item.is-active { background: var(--sage-wash); }
.projekt-chatliste-item.is-active .projekt-chatliste-link { color: var(--sage-deep); }
/* --ink-soft (nicht --ink-faint): das Panel steht auf --paper, wo --ink-faint
AA verfehlt (siehe .ws-panel .empty-state oben) — und für einen Link
statt reinem Metatext ist der kräftigere Ton ohnehin richtig. */
.projekt-chatliste-link {
display: block;
overflow: hidden;
padding: 0.35rem 0.5rem;
color: var(--ink-soft);
text-decoration: none;
font-size: 0.84rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ——— Studio-Panel (LLM-159, E4) ————————————————————————
Bis hierher hatten die im Template verwendeten Studio-Klassen GAR KEIN
CSS – das Panel rendelte in Browser-Defaults (Listenpunkte, grauer
Standard-Knopf). Aufbau nach dem Flow-Mockup zum Projekte-Konzept.
Schriftgrößen: die rem-Werte des Mockups sind UNVERÄNDERT übernommen, nicht
auf eine px-Größe umgerechnet. Die Wurzelgröße ist hier nämlich keine
Konstante, sondern Theme-Sache – pkm und philosophie setzen 100% (16px,
exakt die Mockup-Basis), die Garten-Basis 112,5% (18px), und alle drei
verkleinern auf Mobilgeräten noch einmal. Eine feste Umrechnung träfe
damit höchstens ein Theme und bräche die Absicht der anderen; relative
Werte skalieren dagegen mit. Ausnahme ist der KI-Badge, s. dort. */
/* auto-fit statt fester zwei Spalten: real existiert derzeit genau EIN
Format (study-guide), das dann die volle Breite nimmt, statt neben einer
leeren Zelle zu stehen. Ab zwei Formaten entsteht das Raster des Mockups. */
.projekt-studio-starter {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
gap: 0.5rem;
}
/* Kachel statt Knopf. Bewusst OHNE Icon und Untertitel: das Mockup zeigt
dort zehn Formate mit Symbol und Kurzbeschreibung, für die es im Wiki
weder einen Icon-Satz noch ein Beschreibungsfeld gibt (Format trägt nur
`label`). Erfundene Untertitel wären eine Behauptung über das Format. */
.projekt-studio-tool {
display: block;
width: 100%;
text-align: left;
font-family: var(--display);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 0.6rem 0.7rem;
cursor: pointer;
transition: background 130ms ease, border-color 130ms ease;
}
.projekt-studio-tool:hover {
border-color: var(--sage-light);
background: var(--sage-wash);
}
/* --ink-soft statt des naheliegenden --ink-muted: als kleines Versallabel
auf --paper-raised erreicht --ink-muted im Garten-Theme nur 3,58:1 und
verfehlt AA (gemessen; pkm 4,39, philosophie 4,58 – ebenfalls knapp).
Gleiche Begründung wie bei .projekt-regel-pill weiter oben.
0,68rem ist die Untergrenze der Hausskala: der kleinste Wert, den das Wiki
auch anderswo verwendet (Sidebar-Gruppenlabel, .toc-label, Badge-Pill).
Die früheren 0,64rem stammten aus dem Studio-Mockup und lagen darunter –
auf Mobilgeräten (Wurzel 93,75%) wären das 9,6px versal mit Sperrung. */
.projekt-studio-erzeugt-kopf {
font-family: var(--display);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--ink-soft);
margin: 1.2rem 0 0.6rem;
padding-top: 0.9rem;
border-top: 1px solid var(--rule);
}
.projekt-artefakt-liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
/* Titel/Meta links, „Löschen“ rechts in DERSELBEN Zeile – ohne diese Regel
stapelt der Browser Knopf und Formular untereinander. */
.projekt-artefakt {
display: flex;
align-items: center;
gap: 0.4rem;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--paper);
padding-right: 0.4rem;
}
.projekt-artefakt:hover { border-color: var(--sage-light); }
.projekt-artefakt-oeffnen-btn {
flex: 1;
/* Ohne min-width:0 ignoriert ein Flex-Kind das text-overflow seines
Inhalts und drückt stattdessen die Zeile auseinander. */
min-width: 0;
text-align: left;
font-family: var(--display);
background: none;
border: 0;
padding: 0.45rem 0.55rem;
cursor: pointer;
}
.projekt-artefakt-titel {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --ink-soft, nicht --ink-faint: der Chip liegt auf --paper, wo --ink-faint
im Garten-Theme nur 4,31:1 erreicht. --ink-muted hilft hier nicht weiter –
--paper ist dort DUNKLER als --paper-raised, der Wert fiele noch tiefer.
Die Abstufung zum Titel bleibt erhalten, der steht auf --ink. */
.projekt-artefakt-meta {
display: block;
font-size: 0.7rem;
color: var(--ink-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ——— Artefakt-Aktionsmenü (LLM-167) ————————————————————————
Quellen/Umbenennen/Löschen passen nicht mehr nebeneinander in die 300px-
Spalte – dasselbe Klapp-Menü-Muster wie .liste-zeile-menue/-aktionen
weiter oben (Projekt-Aktionen in der Übersichtstabelle): position:relative
auf dem , position:absolute auf dem aufklappenden Inhalt. Der
Inhalt bleibt damit außerhalb des normalen Flusses – die Zeilenhöhe der
Artefaktkarte ändert sich beim Öffnen nicht, das Menü schwebt darüber statt
die Liste darunter aufzustoßen. --ink-soft statt --ink-muted/--ink-faint
für Metatexte, gleiche Begründung wie überall in diesem Panel (die Panels
stehen auf --paper, s. Kommentar bei .ws-panel .empty-state oben). */
.projekt-artefakt-menue { position: relative; }
.projekt-artefakt-menue summary {
cursor: pointer;
list-style: none;
padding: 0.15rem 0.5rem;
border-radius: 4px;
color: var(--ink-soft);
}
.projekt-artefakt-menue summary::-webkit-details-marker { display: none; }
.projekt-artefakt-menue summary:hover { background: var(--rule-soft); }
.projekt-artefakt-menue summary:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 2px;
}
/* Feste Breite statt min-width (anders als .liste-zeile-aktionen, deren
Inhalt nur einzeilige Knöpfe sind): die 300px-Spalte hat nach Innenabstand
nur rund 268px Platz, und .ws-panel-koerper scrollt mit
overflow-y:auto – das zieht overflow-x auf denselben Nicht-"visible"-Wert
(CSS-Overflow-Spezifikation), ein zu breites Dropdown bekäme also eine
eigene Scrollleiste statt sichtbar überzustehen. `right:0` verankert am
rechten Rand des (das dank .projekt-artefakt bereits nah am
rechten Kartenrand sitzt), 14rem bleiben innerhalb der 268px.
Die 14rem sind allerdings nur bei normaler Wurzelschrift schmal genug: Sie
wachsen mit ihr, der verfügbare Platz (Fensterbreite) nicht. Da `right:0`
die RECHTE Kante festnagelt, wandert die linke nach außen – ab etwa 28px
Wurzelschrift auf Telefonbreite über die linke Fensterkante hinaus
(gemessen: linke Kante bei -57px), und dorthin kann in einer
Links-nach-rechts-Schrift NIEMAND scrollen: der Menüanfang wäre schlicht
weg. Deshalb der Deckel. Er rechnet mit der Fensterbreite statt mit `100%`,
weil `100%` sich auf das bezöge – das ist der gut 20px breite
⋮-Auslöser, kein brauchbarer Bezug. Die abgezogenen 2,4rem sind der Weg der
rechten Menükante zur rechten Fensterkante (1rem Panel-Innenabstand +
0,4rem Kartenrand) plus dieselbe 1rem links, damit das Menü genauso weit
eingerückt steht wie die Karte darüber. Ein Breakpoint ist dafür unnötig:
ab 901px Fensterbreite ist der Deckel nie kleiner als 14rem und damit
wirkungslos – die Desktop-Darstellung bleibt unberührt. */
.projekt-artefakt-aktionen {
position: absolute;
right: 0;
top: 100%;
z-index: 5;
width: 14rem;
max-width: calc(100vw - 2.4rem);
/* KEIN eigenes Padding und overflow:hidden – jeder Abschnitt bringt sein
Padding selbst mit, damit die trennenden Haarlinien durchlaufen statt
eingerückt zu enden (Bauweise wie .liste-zeile-aktionen). */
overflow: hidden;
border: 1px solid var(--rule);
border-radius: 6px;
/* Der kräftigere Schatten (0.16 statt 0.12) trägt hier die Ablösung: im
PKM-Theme steht das Panel auf reinem Weiß, --paper-raised ist dort nur
ein Hauch Grau – ohne deutlichen Schlagschatten wirkt das Menü flach
auf der Karte aufliegend statt darüber schwebend. */
background: var(--paper-raised);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.projekt-artefakt-abschnitt { padding: 0.6rem 0.7rem; }
.projekt-artefakt-abschnitt + .projekt-artefakt-abschnitt,
.projekt-artefakt-loeschen-form { border-top: 1px solid var(--rule); }
/* Uppercase-Idiom des Panels, gleiche Größe wie .projekt-studio-erzeugt-kopf:
„3 QUELLEN“ und „TITEL“ sind Rubriken des Menüs, kein Fließtext. Vorher
0,6rem und damit noch eine Stufe unter der Hausuntergrenze (Begründung dort)
– bei 16px-Wurzel 9,6px, auf Mobilgeräten 9px.
Als |