/* ============================================================================ * svg-vorschau.css — EINE Regel für jede SVG-Vorschau (18.08.2026) * ============================================================================ * * WAS HIER GERADEGEZOGEN WIRD * --------------------------- * Peters Handtest: *„im finalize sind die svgs nicht so breit gefüllt wie sie sein sollten … * die breite muss auch im finalize genutzt werden, das ist wichtig, weil finalize der letzte * step vor dem fixieren in die pdf ist."* * * Nachgemessen war es nicht das Finalize allein. Im Browser gemessen, Feldbreite gegen SVG-Breite: * * Finalize 47 % ← Peters Fund * Karussell (Dokument) 58 % Breite, 9 % Höhe ← winzig in weisser Fläche * Meine Aufgaben 70 % * Karussell (Einführung) 100 % Breite, lief über und wurde ABGESCHNITTEN * * Sechs Klassennamen bezeichneten dieselbe Sache — `.task-svg-preview`, * `.explanation-svg-preview`, `.task-preview`, `.svg-preview-small`, `.svg-preview-content`, * `preview-latex-rendered` — und drei Stylesheets überboten sich mit `!important`: * 100 px in `components/base/svg.css`, 120 px in `svg-preview-shared.css`, „egal" in * `content-card-shared.css` — letzteres allerdings nur für ZWEI der acht Orte. * * Die Füll-Regel existierte also. Ihr Kommentar zählte sogar auf, wo sie gilt: *„the two * creators' list containers"*. Sechs weitere Orte kamen in der Aufzählung nicht vor — zum * wiederholten Mal die richtige Regel an der halben Zahl der Eingänge, diesmal in CSS. * * ZWEI MODI, WEIL ES ZWEI BEDÜRFNISSE GIBT * ---------------------------------------- * Wer sie in eine Regel presst, bekommt genau die zwei alten Fehler zurück. * * fliessend Liste · Warenkorb · Finalize · Meine Aufgaben · Module · Admin * Die Breite füllt, die Höhe folgt dem Inhalt, die Karte wächst mit. * * eingepasst Karussell · Kachelraster * Fester Kasten, das SVG wird hineinskaliert — mittig, unverzerrt, vollständig. * Peter: *„fixe grösse, damit die karussell idee überhaupt greift, aber den platz * der kachel so füllen, dass auch potenziell das ganze svg drin ist."* * * WARUM DAS OHNE JAVASCRIPT GEHT * ------------------------------ * Jedes erzeugte SVG trägt `viewBox` UND `preserveAspectRatio="xMidYMid meet"` — im Bestand * nachgezählt, nicht angenommen (37 von 37). Ein SVG mit `width: 100%; height: 100%` in einem * Kasten mit fester Höhe wird damit vom Browser selbst eingepasst: mittig, ohne Verzerrung, ohne * Abschneiden. `object-fit` wäre der falsche Griff — es wirkt bei Inline-SVG nicht. * * Und `svgEinbetten` entfernt `width`/`height` am SVG (`svgEinbetten.js:105`): *„Ohne feste Maße * bestimmt das viewBox-Seitenverhältnis die Höhe und CSS die Breite."* Diese Datei ist genau das, * was dieser Kommentar seit jeher voraussetzt. * * WARUM EINE VARIABLE UND KEINE SELEKTORLISTE * ------------------------------------------- * Eine Custom Property erbt. Wer morgen einen neuen Ort baut, bekommt die Vorgabe geschenkt und * ändert bei Bedarf EINE Zeile an seinem Behälter — er muss weder diese Datei anfassen noch sich * irgendwo eintragen. Genau das Eintragen-Müssen hat den Fehler erzeugt, der hier behoben wird. * ============================================================================ */ .svg-vorschau { /* Vorgabe: fliessend. `auto` heisst „die viewBox bestimmt die Höhe". */ --svg-vorschau-hoehe: auto; width: 100%; /* `min-width: 0` loest die Standard-Mindestbreite von Flex-Kindern. Ohne sie kann ein breites SVG seinen Flex-Behälter aufblähen, statt sich einzupassen. */ min-width: 0; } .svg-vorschau svg { display: block; width: 100%; max-width: 100%; height: var(--svg-vorschau-hoehe); /* Kein `max-height`: Eine Obergrenze kann nur schrumpfen, nie vergrössern — und genau das war der Fehler im Aufgaben-Karussell (27 px SVG in einem 308 px hohen Feld). Wer eine Höhe braucht, setzt sie über die Variable, und dann gilt sie in BEIDE Richtungen. */ } /* Die Mathe-Schrift des Vorschau-SVG (30.08.2026, S-5, aus `creator.css` hierher). Dort hingen sie an `.task-preview-item .task-svg-preview svg` — also an zwei Klassennamen, die nur noch JS-Griffe sein sollen, und galten deshalb NUR im Finalize-Eintrag. Dieselbe Schrift gehoert an jedes Vorschau-SVG; sonst sieht dieselbe Formel je nach Ort anders aus. */ .svg-vorschau svg text { font-family: 'Computer Modern', 'Latin Modern Math', serif; } .svg-vorschau svg .MathJax, .svg-vorschau svg [id*="MathJax"] { font-family: 'Computer Modern', 'Latin Modern Math', serif !important; } /* ===== Modus „eingepasst" ===== */ /* Feld UND SVG füllen den Kasten; die viewBox skaliert sich hinein. Eine Regel, kein zweiter Selektorbaum: Wer einen weiteren Kachel-Ort baut, setzt `--svg-vorschau-hoehe: 100%` und `height: 100%` an seinem Feld — oder trägt seinen Behälter hier in EINE Zeile ein. */ .svg-vorschau--eingepasst, .carousel-card .svg-vorschau { --svg-vorschau-hoehe: 100%; height: 100%; min-height: 0; } /* ===== Das Aussehen — hier, nicht an drei Klassennamen (K-4, 18.08.2026) ===== */ /* * Bis hierher trugen `.task-svg-preview`, `.explanation-svg-preview` und `.task-preview` das * Aussehen, verteilt auf `svg-preview-shared.css`, `content-card-shared.css` und * `components/base/svg.css`. Drei Namen fuer dieselbe Sache, und `.task-preview` heisst in * `admin-tasks.css` zusaetzlich etwas voellig anderes (ein Textblock mit grauem Grund) — eine * Namenskollision, die genau so lange gutgeht, bis jemand die eine Regel fuer die andere haelt. * * Die alten Namen bleiben im Markup — als GRIFF fuer JavaScript, so wie `data-modul-liste`. * Was sie nicht mehr tragen, ist Gestaltung. Ein `grep` nach ihnen im CSS findet ab jetzt nur * noch Kommentare. */ .svg-vorschau { /* SVGs entstehen aus LaTeX auf WEISSEM Papier: schwarze Linien, keine eigene Flaeche. Ohne hellen Grund verschwindet die Formel im Dunkelmodus. Ein e2e-Fall misst deshalb nicht die Klasse, sondern die tatsaechliche Helligkeit unter dem SVG. */ background: var(--color-paper); border-radius: var(--radius-sm, 0.375rem); padding: 0.75rem; cursor: pointer; transition: box-shadow 0.2s ease; /* ⚠️ Diese beiden kamen bis zum 30.08.2026 aus `admin-tasks.css .task-preview` — einer Regel fuer die ADMIN-Aufgabenliste, die global geladen wird und zufaellig denselben Namen trug. Sie stehen jetzt hier, mit denselben Werten: Das Aussehen bleibt gleich, die Zustaendigkeit stimmt. Beide sind ERBSTUECKE, keine Entscheidung — `margin-bottom` gehoert der Sache nach an die Karte, nicht an das Vorschaufeld, und `overflow: hidden` macht aus einem zu grossen SVG ein abgeschnittenes. Wer sie anfasst, hat das Netz auf seiner Seite: `svg-vorschau. spec.js` misst Fuellgrad und Ueberlauf an sechs Orten. */ margin-bottom: 1rem; overflow: hidden; } /* Hinweis „hier kann man klicken" — ohne Geometrie zu bewegen. Ein `transform: scale()` stand hier bis zum 18.08. und schob ein bildfuellendes SVG ueber die Kante (s. oben). */ .svg-vorschau:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } /* Im Vorschau-Modal: dieselbe Vorschau, nur mit Rahmen, Abstand und „Klick schliesst" (27.08.2026). Vorher trug `ContentPreviewModal` diese vier Angaben als `style.cssText` — wortgleich zu dem, was `.svg-vorschau` ohnehin liefert, plus diese drei. */ .svg-vorschau--modal { border: 1px solid var(--color-border); margin-bottom: 1.5rem; cursor: zoom-out; } /* Der Warenkorb bringt sein Papier selbst mit (`.content-item-preview`) — doppelt gerahmt sieht gequetscht aus. Gemessen bleibt der Grund darunter hell. */ .content-item-preview > .svg-vorschau { background: transparent; padding: 0; }