/* ========================================================================== Look «Karte» (docs/DESIGN.md §8) Flaechen statt Linien: IBM Plex Sans, weiche Radien 10/12/18, Listengruppen auf --surface, Zeilen mit eigener Ecke und Hoverflaeche, pillenfoermige Knoepfe, ein staerkerer Schatten unter den Dialogen, und eine Leiste, die als eigenes Feld auf dem Grund liegt. Das ist der einzige Look, der Regel 4 aus docs/DESIGN.md §1 («keine Kaesten, keine Pillen») aussetzt — er ist als Gegenentwurf gewaehlt, nicht aus Versehen; wer ihn waehlt, will genau das. Alle anderen drei halten sich daran. Farben kommen weiterhin aus dem Farbtheme. Formeln (KaTeX) und Code (--mono) bleiben unberuehrt. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root[data-look="karte"] { /* Die Abstandsskala bleibt beim Nullpunkt. Die Luft dieses Looks kommt aus den Flaechen selbst — jede Gruppe traegt ihren eigenen Innenabstand. Waere beides gross, stuende das Themenraster bei 1440 × 900 nicht mehr im ersten Bildschirm (docs/DESIGN.md §7). */ --look-plus: 0px; --look-raum: 1; --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; /* IBM Plex Sans laeuft etwas kleiner als Instrument Sans; eine halbe Stufe mehr bei den Zeilen gleicht das aus, der Fliesstext bleibt bei 15 px. */ --t--3: calc(0.78125rem + var(--look-plus)); /* 12.5 px */ --t--2: calc(0.8125rem + var(--look-plus)); /* 13 px */ --t--1b: calc(0.84375rem + var(--look-plus)); /* 13.5 px */ --t--1: calc(0.90625rem + var(--look-plus)); /* 14.5 px */ --t-0: calc(0.90625rem + var(--look-plus)); /* 14.5 px */ --t-0b: calc(0.90625rem + var(--look-plus)); /* 14.5 px */ --t-1: calc(0.9375rem + var(--look-plus)); /* 15 px */ --t-2: calc(1rem + var(--look-plus)); /* 16 px */ --t-3: calc(1.25rem + var(--look-plus)); /* 20 px */ --t-4: calc(1.75rem + var(--look-plus) - var(--titel-minus)); /* 28 px */ --t-5: calc(2.25rem + var(--look-plus) - var(--titel-minus)); /* 36 px */ --zeile: 1.5; --zeile-eng: 1.4; /* Weiche Radien 10 / 12 / 18. */ --radius-sm: 10px; --radius: 12px; --radius-lg: 18px; /* Schwebende Flaechen brauchen einen Schatten, der sie traegt. */ --shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 44px -12px rgba(0, 0, 0, 0.30); --raum-1: calc(0.25rem * var(--look-raum)); --raum-2: calc(0.5rem * var(--look-raum)); --raum-3: calc(0.75rem * var(--look-raum)); --raum-4: calc(1rem * var(--look-raum)); --raum-5: calc(1.5rem * var(--look-raum)); --raum-6: calc(2rem * var(--look-raum)); --raum-7: calc(3rem * var(--look-raum)); --reihe: 36px; --feld: 36px; --dz-zeile: 42px; --rand: 44px; --leiste: var(--leiste-wahl, 360px); /* Abstand des Leistenfeldes zum Fensterrand. Ein eigenes Token, weil drei Regeln denselben Wert brauchen. */ --karte-inset: 12px; } /* «komfort» bleibt wirksam, gerechnet auf der Skala dieses Looks. */ :root[data-look="karte"][data-layout="komfort"] { --look-plus: 1px; --look-raum: 1.25; --reihe: 40px; --dz-zeile: 46px; --leiste: var(--leiste-wahl, 380px); } /* -------------------------------------------------------------------------- Gezielte Regeln -------------------------------------------------------------------------- */ /* ---- Knoepfe als Pillen ---------------------------------------------- */ /* Ausdruecklich erlaubt: die Form ist der Look. Felder und Menues bleiben bei --radius, sonst wird aus einem Look eine Apotheke. */ [data-look="karte"] .knopf { border-radius: 999px; padding-inline: var(--raum-5); } /* ---- Listengruppen als Flaechen -------------------------------------- */ /* Was zusammengehoert, steht auf einer Flaeche: eine Gruppe des Themenrasters, eine Dokumentliste, ein Institutionsblock. Die Flaeche ersetzt die Gruppenlinie; sie kommt nicht zu ihr dazu. */ [data-look="karte"] .tr-gebiet, [data-look="karte"] .dz-liste, [data-look="karte"] .institution { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--raum-2) var(--raum-3); } /* Die Flaeche traegt den Abstand schon in sich: zwischen zwei Gruppen reicht darum die halbe Luecke des Nullpunkts. */ [data-look="karte"] .tr-gebiete { gap: var(--raum-3) var(--raum-4); } [data-look="karte"] .tr-titel { padding-inline: var(--raum-2); } /* Der Kopf der Dokumentliste gehoert IN die Flaeche seiner Gruppe: Vorher stand er auf dem Seitengrund und die Karte begann 22 px darunter — Kopf und Tabelle waren optisch zwei Dinge. Jetzt traegt der Kopf die obere Haelfte derselben Karte, die Liste die untere; zwischen ihnen keine Linie, nur der Rand aussen herum. Das waagrechte Polster ist an beiden gleich und bleibt es: Kopf und Zeile sind Subgrids desselben Rasters (app.css §30), und ein Polster nur an einem von beiden verschoebe seine Spuren gegen das andere. Nur in der Ansicht «Tabelle»: dort gibt es eine Kopfzeile. In «Liste» und «Raster» ist sie ausgeblendet, und die Flaeche der Liste bleibt die ganze Karte. Look und Ansicht stehen beide am , darum zwei Attribute am selben Selektor und kein Nachfahre dazwischen. */ [data-look="karte"][data-ansicht="tabelle"] .dz-kopf { background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding: var(--raum-2) var(--raum-3); margin-bottom: 0; } [data-look="karte"][data-ansicht="tabelle"] .dz-liste { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); } /* ---- Zeilen mit eigener Ecke ----------------------------------------- */ /* Kein waagrechtes Polster an der Zeile: sie ist ein Subgrid, ein Polster verschöbe ihre Kanten gegen den Kopf (app.css §30); den Einzug trägt die Fläche der Liste. */ [data-look="karte"] .dz { border-bottom: 0; border-radius: 8px; } /* Auf der Flaeche ist der Hover eine zweite Flaeche, kein Farbwechsel: --bg liegt hinter --surface und hebt die Zeile darum sichtbar ab. */ [data-look="karte"] .dz:hover, [data-look="karte"] .dz:focus-visible, [data-look="karte"] .dz.ist-gewaehlt { background: var(--hover, var(--surface-2)); } [data-look="karte"] .tr-liste li { padding-inline: var(--raum-2); border-radius: 8px; } [data-look="karte"] .tr-liste li:hover { background: var(--hover, var(--surface-2)); } /* ---- Die Leiste als eigenes Feld ------------------------------------- */ /* Unter 900 px ist die Leiste ein Off-Canvas-Menue; dort waere ein schwebendes Feld sinnlos und stuende ausserdem im Weg. */ @media (min-width: 901px) { /* Der Innenabstand sitzt an der Huelle, nicht als Rand an der Leiste: leiste.js misst die Breite ab getBoundingClientRect().left der Leiste, und ein Rand an ihr wuerde diese Messung um genau diesen Betrag verfaelschen. Padding an der Huelle verschiebt die linke Kante mit und laesst die Rechnung stimmen. */ [data-look="karte"] .shell { padding: var(--karte-inset); column-gap: var(--karte-inset); } [data-look="karte"] .seitenleiste { top: var(--karte-inset); height: calc(100vh - 2 * var(--karte-inset)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Die Hauptspalte darf die Huelle nicht ueberragen: sonst waeren die 12 px unten ein Scrollweg. */ [data-look="karte"] .spalte { min-height: calc(100vh - 2 * var(--karte-inset)); } /* Die Schiene (Layout «fokus») ist dasselbe Feld, nur schmal. */ [data-look="karte"] .schiene { top: var(--karte-inset); height: calc(100vh - 2 * var(--karte-inset)); border-radius: var(--radius-lg); } } /* ---- Vorschau und Dialoge -------------------------------------------- */ /* Das Vorschau-Panel ist im Nullpunkt eine Kante zur Liste; hier ist es eine Flaeche wie alles andere. */ [data-look="karte"] .dokupanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--raum-4); margin-left: var(--raum-4); } [data-look="karte"] .dokumente.hat-panel-ueber .dokupanel { margin-left: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }