/* ========================================================================= portfolio.css — Die Sammelseite in der Bildsprache der Startseite. ------------------------------------------------------------------------- index.html ist die Vorlage. Diese Datei erfindet nichts Neues, sie traegt die vorhandene Sprache auf drei Bauteile weiter, die es auf der Startseite noch nicht gab: Reiter, Schlagwortfilter, Karten. Die Sprache heisst BUEROGLAESER: eine geaetzte Scheibe, leicht getoent, Lichtsaum an der Oberkante, feine Kante, Schatten mit Abstand zur Wand. Welche Auspraegung wo gilt, ist die eine Entscheidung, die diese Datei trifft: Reiter wie die Nav-Scheibe — eine durchgehende Scheibe mit Segmenten, flacher Schatten, KEINE Punkthalter. Karten dieselbe Scheibe, ebenfalls ohne Punkthalter. Auf Reys Entscheidung: bei sechs bis zwoelf Karten waeren 24 bis 48 Punkte gleichzeitig auf dem Schirm. Die Punkthalter bleiben das Kennzeichen der zwei Hero-Schaltflaechen. Karten tragen KEINEN diagonalen Glanz. Er liegt im hard-light-Modus ueber der Flaeche und wuerde ueber einem Foto die Farben kippen. Reiter und Schlagworte haben ihn, sie tragen kein Bild. KEIN FARBWERT IN DIESER DATEI. Kein Hexwert, kein rgba, kein Schatten, kein Radius, keine Dauer — alles kommt aus tokens.css. ========================================================================= */ /* Die Kopfzeile ist fest positioniert und liegt ueber dem Inhalt. Anders als in der Hero, die 100svh hoch ist und darunter durchlaeuft, muss hier der Platz freigehalten werden. Gerechnet mit der GROSSEN Kopfhoehe: oben auf der Seite ist sie noch nicht geschrumpft. */ .portfolio { padding-block-start: calc(var(--kopf-hoehe-frei) + var(--raum-7)); padding-block-end: var(--raum-9); /* Bezugspunkt fuer die Randnotizen weiter unten. Ohne das haengen sie am Dokument statt am Inhalt — und wandern, sobald oben etwas dazukommt. */ position: relative; } .portfolio-kopf { margin-block-end: var(--raum-6); } /* Wie die Hero-Headline, nur eine Stufe kleiner: dieselbe Schriftfarbe, dasselbe Gewicht, dieselbe enge Sperrung. */ /* GROSS. Die Seite hatte keinen einzigen grossen Moment — Reys Befund vom 25.08.: "wir sind einfach etwas monoton". Der Seitentitel ist die naheliegendste Stelle dafuer und die billigste: 72 px statt 44 bei 1920. Er gibt der Seite einen Einstieg, statt sie mit vier gleich lauten Kacheln beginnen zu lassen. */ .portfolio-titel { color: var(--hero-titel); /* Von 72 auf 56 px — Reys "Schriften etwas kleiner". Der Einstieg bleibt gross genug, um einer zu sein, drueckt die Reiterleiste darunter aber nicht mehr an den Rand. */ font-size: var(--schrift-seitentitel); font-weight: var(--gewicht-schwer); line-height: var(--zeile-eng); letter-spacing: var(--sperrung-eng); } /* Der Schlusspunkt in Gruen-Tuerkis — dieselbe Klammer wie bei den drei Zeilen der Hero und dem Geviertstrich in der Wortmarke. */ .portfolio-punkt { color: var(--hero-punkt); } /* ========================================================================= Reiter — eine Scheibe, drei Segmente ------------------------------------------------------------------------- Baugleich mit .kopf__liste in nav.css. overflow: hidden beschneidet die Toenung des offenen Segments auf die Rundung der Scheibe; ohne das braeuchten erstes und letztes Segment eigene Radien. ========================================================================= */ .portfolio-reiter { position: relative; display: inline-flex; align-items: stretch; max-width: 100%; overflow: hidden; margin-block-end: var(--raum-6); border: var(--rahmen-linie); border-radius: var(--radius-voll); background-color: var(--rahmen-flaeche); box-shadow: var(--rahmen-innenglanz); filter: var(--nav-abheben); } /* Diagonaler Glanz wie an der Nav-Scheibe. Steht still. */ .portfolio-reiter::after { content: ""; position: absolute; inset: 0; background: var(--glanz); background-size: 440%; opacity: var(--glanz-deckkraft); mix-blend-mode: hard-light; filter: blur(1px); pointer-events: none; } .portfolio-reiter-knopf { /* z-index, weil der Glanz als ::after der letzte Kindknoten ist und sonst UEBER der Beschriftung laege — dieselbe Stelle wie in nav.css. */ position: relative; z-index: 1; display: flex; align-items: center; padding: var(--pille-polsterung); border: 0; background: none; font: inherit; white-space: nowrap; cursor: pointer; /* BEDIENSCHRIFT (Formstandard, Regel 5, 26.08.). Hier stand 16 px ohne Sperrung, waehrend jeder andere Glas-Schalter der Seite 17 px mit +0.05em traegt — Knopf in der Hero, Knopf in der Karte, Schild auf den Nachweisen. Es war das EINZIGE Bauteil, das ohne Grund abwich; alle uebrigen Unterschiede sind eigene Rollen oder Reys Entscheidungen. */ color: var(--knopf-text); font-size: var(--schrift-knopf); font-weight: var(--gewicht-mittel); letter-spacing: var(--sperrung-knopf); transition: background-color var(--dauer-mittel) var(--kurve-weich), color var(--dauer-mittel) var(--kurve-weich); } .portfolio-reiter-knopf:hover, .portfolio-reiter-knopf[aria-selected="true"] { background-color: var(--nav-aktiv-flaeche); color: var(--knopf-text-hover); } /* DER WANDERNDE BALKEN ------------------------------------------------------------------------- Warum ueberhaupt ein Balken: Die blosse Toenung unterscheidet den offenen Reiter nur mit 1,28:1 von seinen Nachbarn (Messwert aus Uebergabe.md). Fuer einen Hover reicht das, weil man die Aenderung geschehen sieht. Ein Reiter dagegen muss dauerhaft sagen, welcher Bereich offen ist — dort vergleicht man mit den Nachbarn. Warum EINER statt vier: Ein Balken je Reiter kann nur an- und ausgehen. Einer, der wandert, zeigt den Weg von hier nach dort — dieselbe Geste, die auch das Glas traegt: etwas bewegt sich UEBER die Scheibe, nicht auf ihr. Seine Lage setzt js/portfolio.js aus der Geometrie des offenen Knopfes; hier steht nur, wie er aussieht und wie schnell er laeuft. Bewusst NICHT ueber ein staerkeres Schriftgewicht geloest: fette Schrift ist breiter, das Segment waechst, und die Scheibe wechselt bei jedem Reiterwechsel ihre Breite. */ .portfolio-reiter-lauf { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 0; block-size: 3px; z-index: 2; background-color: var(--hero-punkt); pointer-events: none; transition: left var(--dauer-mittel) var(--kurve-aus), top var(--dauer-mittel) var(--kurve-aus), width var(--dauer-mittel) var(--kurve-aus), height var(--dauer-mittel) var(--kurve-aus); } /* Nach innen, sonst schneidet ihn das overflow der Scheibe ab — wie in nav.css. */ .portfolio-reiter-knopf:focus-visible { outline-color: var(--vorlage-bindung); outline-offset: -3px; } /* ========================================================================= Schlagwortfilter — kleine Scheiben ========================================================================= */ .portfolio-filter { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-block-end: var(--raum-3); } /* PILLEN, ABER KEIN GLAS — Reys Befund vom 25.08.: "Die Filter unter den Kategorien sind irgendwie... sie wirken nicht wie etwas, das man anklicken kann. Also vielleicht doch weiss mit feinem Rahmen und Pille?" Er hat recht, und der Zwischenschritt war zu weit: Als schlichter Text sahen die Schlagworte aus wie die Schlagworte IN den Karten — und die kann man nicht anklicken. Gleiches Aussehen, verschiedenes Verhalten, das ist der schlechteste Fall. Die Form kommt also zurueck, das Material nicht: Rundung und Haarlinie sagen "Schalter", die gedeckte weisse Flaeche haelt sie aus dem Glas heraus. Damit bleibt es bei drei Glasflaechen auf der Seite. Gewaehlt wird ueber Farbe und Kante, NICHT ueber das Schriftgewicht: Fett ist breiter, die zwoelf Pillen wuerden bei jedem Klick neu umbrechen. */ .portfolio-schlagwort { padding: var(--pille-polsterung-eng); border: var(--rand-fein); border-radius: var(--radius-voll); background-color: var(--palette-weiss); color: var(--text-leise); font: inherit; font-size: var(--schrift-xs); cursor: pointer; transition: border-color var(--dauer-mittel) var(--kurve-weich), color var(--dauer-mittel) var(--kurve-weich); } .portfolio-schlagwort:hover { border-color: var(--linie-stark); color: var(--knopf-text-hover); } /* Kante UND Schrift in der Bindung: Die Kante allein traegt bei einer Haarlinie zu wenig, die Schrift allein sieht nach einem Verweis aus. */ .portfolio-schlagwort[aria-pressed="true"] { border-color: var(--vorlage-bindung); color: var(--vorlage-bindung); } .portfolio-schlagwort:focus-visible { outline-color: var(--vorlage-bindung); outline-offset: 2px; } /* Kein Schalter, sondern ein Weg zurueck — deshalb keine Scheibe, sondern Text in der Bindung. */ .portfolio-filter-loesen { padding: var(--pille-polsterung-eng); border: 0; background: none; color: var(--vorlage-bindung); font: inherit; font-size: var(--schrift-xs); font-weight: var(--gewicht-mittel); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .portfolio-bilanz, .portfolio-filter-leer { margin-block: 0 var(--raum-5); color: var(--text-leise); font-size: var(--schrift-xs); } /* ========================================================================= Zwei Raster statt einem ------------------------------------------------------------------------- Reys Entscheidung vom 25.08.: "vier Highlights. Die stehen in gross und oben. Darunter kommt dann ein Raster - kleiner, unauffaelliger, kompakter." Warum das die richtige Antwort auf die flaue Seite ist: Sechs gleich grosse Kacheln behaupten, sechs gleich wichtige Dinge zu zeigen. Ein Recherchepapier ist aber kein Projekt. Wenn alles gleich wichtig aussieht, ist nichts wichtig — und genau daher kam der fehlende Blickpunkt. Die Hierarchie kommt jetzt aus dem Inhalt, nicht aus Farbe, Glas oder Bildern. Die Zahlen: Bei 1720 px Rasterbreite sind zwei Spalten je rund 848 px, vier je rund 400 px. Ein Highlight ist damit gut viermal so gross wie ein kompakter Eintrag — deutlich genug, dass man es sieht, ohne dass der Rest zur Fussnote wird. ========================================================================= */ .portfolio-highlights, .portfolio-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--raum-5); align-items: stretch; /* Alle Karten einer Reihe gleich hoch, ueber Reihen hinweg. */ grid-auto-rows: 1fr; } /* Der Abstand zwischen den beiden Bereichen ist groesser als der zwischen zwei Karten. Er ist die einzige Trennung — eine Ueberschrift ueber dem unteren Raster braeuchte einen Namen, und "Sonstiges" waere ehrlich, aber kein Aushaengeschild. */ .portfolio-highlights { margin-block-end: var(--raum-8); } @media (min-width: 68rem) { /* Drei statt zwei — Reys Ansage vom 25.08. Bei 1720 px Rasterbreite sind das rund 557 px je Highlight statt 848. */ .portfolio-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } .portfolio-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================================= Die Karte — KEINE Scheibe mehr ------------------------------------------------------------------------- Reys Befund vom 25.08.: "Ich mag das Glas, aber es ist einfach zu viel Glass." Nach einer Stunde an Deckkraft und Farbe war klar, dass das nicht die Stellschraube ist. DAS PROBLEM WAR DIE ANZAHL, NICHT DIE STAERKE. Auf dieser Seite trug alles dasselbe Material: Navigation, Reiterleiste, zwoelf Filterpillen, sechs Karten, in jeder Karte die Bildflaeche, darin der Knopf. Wenn jedes Element aus Glas ist, zeichnet Glas nichts mehr aus — es ist dann kein Effekt, sondern der Hintergrund. Jede Aenderung an der Deckkraft verschiebt nur die Lautstaerke, nicht die Zahl der Stimmen. Die Karte ist mit 515 x 574 px die groesste Flaeche im Raster und damit der Hauptgrund, warum die Seite ueberall nach Glas aussah. Sie bekommt deshalb GAR KEINE Oberflaeche mehr: keine Toenung, keinen Rahmen, keinen Lichtsaum, keinen Wurf. Was sie zusammenhaelt, sind Abstand, die Haarlinie unter dem Bild und die Haarlinie ueber dem Fuss — die Mittel eines gesetzten Textes, nicht die eines Bedienelements. Eine Karte ist ja auch keins: geklickt wird sie zwar, aber sie ist ein Stueck Inhalt. Glas bleibt danach an genau drei Stellen: Navigation, Reiterleiste und der Knopf in der Karte. Der wird dadurch von selbst zum auffaelligsten Ding im Raster — nicht durch Farbe, sondern weil er das einzige ist, das noch eine Oberflaeche hat. ========================================================================= */ .portfolio-karte { display: flex; flex-direction: column; min-width: 0; block-size: 100%; /* Bezugspunkt fuer die Verweisflaeche weiter unten. */ position: relative; /* Verlauf von Weiss nach Cyan, dazu ein weit gestreuter Schatten — Begruendungen an den Tokens. Die Haarlinie bleibt: Sie fasst die obere Kante, wo der Verlauf reines Weiss ist und die Karte sonst in den Seitenhintergrund liefe. */ border: var(--rand-fein); background-image: var(--karte-verlauf); box-shadow: var(--karte-schatten); border-radius: var(--radius-l); transition: opacity var(--dauer-karte) var(--kurve-aus), transform var(--dauer-karte) var(--kurve-aus), border-color var(--dauer-mittel) var(--kurve-weich), background-image var(--dauer-mittel) var(--kurve-weich), box-shadow var(--dauer-mittel) var(--kurve-weich); } .portfolio-karte:hover, .portfolio-karte:focus-within { border-color: var(--linie-stark); background-image: var(--karte-verlauf-hover); box-shadow: var(--karte-schatten-hover); transform: translateY(var(--karte-hub)); } /* Ohne Flaeche kann die Karte beim Hover auch nichts aufleuchten lassen. Die Rueckmeldung liegt deshalb dort, wo bei Text ueblicherweise etwas passiert: an der Ueberschrift. Der Knopf antwortet zusaetzlich mit. */ .portfolio-karte:hover .portfolio-karte-titel, .portfolio-karte:focus-within .portfolio-karte-titel { color: var(--vorlage-bindung); } /* Die Bildflaeche behaelt ihre Form, auch wenn noch kein Medium da ist — sonst saehe die Karte ohne Bild ganz anders aus als die mit, und der spaetere Tausch erzeugte einen Layout-Sprung. */ .portfolio-karte-buehne { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; border-block-end: var(--rand-fein); } .portfolio-karte-buehne img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Kein Glasblock mehr und auch kein eigener Rahmen: Die Karte hat jetzt einen, und die Linie unter der Bildflaeche schliesst den Platz nach unten ab. Zwei Rahmen ineinander waeren eine Linie zu viel. */ /* Kursiv und in der Bindung: es soll als Fehlstelle lesbar sein, nicht als Gestaltung. Solange die Medien entstehen, muss der Unterschied zwischen "kein Bild vorgesehen" und "Bild fehlt noch" sichtbar bleiben. */ .portfolio-karte-fehlt { color: var(--vorlage-bindung); font-size: var(--schrift-xs); font-style: italic; } .portfolio-karte-koerper { display: flex; flex-direction: column; gap: var(--raum-3); flex: 1 1 auto; } /* Ein Highlight hat Luft — oben und an den Seiten. UNTEN NICHT: Reys Ansage vom 25.08., der Fuss soll "weiter in die Ecke runter". Das ist mehr als Geschmack. Schlagworte und Knopf sind die Randnotiz der Karte, nicht ihr Inhalt; sitzen sie in den unteren Ecken statt frei im Feld, liest sich die Karte als Flaeche mit einer Fusszeile — und der Titel bekommt den Raum, der vorher zwischen Text und Knopf verpuffte. Die 16 px, die bleiben, sind kein Zierrand: Der Schattenwurf des Knopfes reicht rund 10 px nach unten und wuerde sonst an der Kartenkante enden. */ .portfolio-karte--gross .portfolio-karte-koerper { padding: var(--raum-6) var(--raum-6) var(--raum-4); gap: var(--raum-4); } /* Der kompakte Eintrag ist knapp gesetzt — er soll als Zeile im Verzeichnis lesen, nicht als kleine Kachel. */ /* Dasselbe im Kleinen: seitlich und oben Luft, unten knapp. Die Polsterung liegt bewusst ZWISCHEN Highlight (2rem) und dem frueheren knappen Mass (1rem) — bei 1 rem klebte der Text an der Kante, bei 2 rem waere der Groessenunterschied zum Highlight verschwunden, der die Hierarchie traegt. */ .portfolio-karte--kompakt .portfolio-karte-koerper { padding: var(--raum-5) var(--raum-5) var(--raum-4); } /* DIE ECKE OBEN RECHTS — 112 px, quadratisch, nur im Highlight. EIN PLATZ MIT ZWEI MOEGLICHEN INHALTEN: Bild, wenn es eines gibt, sonst das Symbol des Bereichs. Beide teilen sich diese Regel, damit der Platz IDENTISCH ist, egal was darin steht — gleiche Groesse, gleiche Ecke, gleiche Rundung. Nur so faellt eine Reihe nicht auseinander, in der ein Projekt ein Bild hat und zwei noch keins. Absolut gesetzt statt im Fluss: So bestimmt die Ecke die Hoehe der Karte nicht mit. Eine Karte ohne alles ist genauso hoch wie eine mit Bild. BEWUSST OHNE z-index: Die Verweisflaeche des Titels traegt eine 1 und liegt damit darueber. Sonst waere die Ecke die eine Stelle der Karte, an der ein Klick ins Leere geht. Das gilt auch fuer die Animationen — sie laufen unter der Flaeche und fangen nichts ab. */ .portfolio-karte-ecke { position: absolute; inset-block-start: var(--raum-6); inset-inline-end: var(--raum-6); inline-size: 8.4rem; block-size: 8.4rem; } /* Das Bild: Viereck mit runden Ecken, kein Kreis — ein Kreis beschneidet jedes Motiv an vier Seiten und zwingt jedes kuenftige Bild in eine Mitte, die es vielleicht nicht hat. object-fit: cover, damit ein nicht ganz quadratisches Bild mittig beschnitten wird statt verzerrt. Die Rundung ist die der Karte, eine Stufe kleiner — sie sitzt ja darin. */ .portfolio-karte-bild { object-fit: cover; border-radius: var(--radius-l); border: var(--rand-fein); } /* Die kompakte Ausgabe: dieselbe Ecke, nur ein Drittel so gross. Der Abstand folgt der knapperen Polsterung dieser Karten, damit das Symbol nicht weiter innen sitzt als der Text darunter. */ .portfolio-karte--kompakt .portfolio-karte-ecke { inset-block-start: var(--raum-5); inset-inline-end: var(--raum-5); inline-size: 4.5rem; block-size: 4.5rem; } /* Etikett und Titel machen Platz — ohne das laufen sie unter das Symbol. Der Freiraum ist Symbolbreite plus dessen Abstand zur Kante; wer hier nur schaetzt, bekommt bei langen Titeln wieder Text unter dem Symbol. */ .portfolio-karte--kompakt .portfolio-karte-art, .portfolio-karte--kompakt .portfolio-karte-titel { padding-inline-end: 6.25rem; } /* Das Symbol als Rueckfall. Im Ruhezustand zurueckgenommen: Es ist Beiwerk, bis man hinfaehrt. Das Bild dagegen steht immer voll da — es ist Inhalt. */ .portfolio-karte-symbol { color: var(--vorlage-tuerkis); opacity: 0.55; transition: opacity var(--dauer-mittel) var(--kurve-weich); } .portfolio-karte:hover .portfolio-karte-symbol, .portfolio-karte:focus-within .portfolio-karte-symbol { opacity: 1; } /* Linien und Flaechen der Zeichnung. currentColor, damit die Farbe an einer Stelle steht — oben am Symbol selbst. */ .portfolio-karte-symbol .symbol-strich, .portfolio-karte-symbol .symbol-strich * { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* Die Zahnraeder brauchen einen duenneren Strich als der Rest der Familie. Der Grund ist geometrisch, nicht geschmacklich: Eine Zahnluecke ist bei neun Zaehnen rund 3,5 Einheiten breit. Ein 2,4er Strich mit runden Ecken traegt links und rechts je gut die Haelfte davon auf — die Luecke lief zu, und aus den Zaehnen wurde ein gewellter Rand. Mit 2,0 bleibt sichtbar, dass da Zaehne sind. */ .portfolio-karte-symbol .symbol-rad .symbol-strich { stroke-width: 2; } .portfolio-karte-symbol .symbol-fleck, .portfolio-karte-symbol .symbol-auge { fill: currentColor; } .portfolio-karte-symbol .symbol-blatt { fill: currentColor; opacity: 0.28; } /* Etikett und Titel machen Platz. Die Beschreibung darunter laeuft wieder ueber die volle Breite — die Marke reicht nicht so weit herunter. */ .portfolio-karte--gross .portfolio-karte-art, .portfolio-karte--gross .portfolio-karte-titel { /* Ecke plus Abstand — waechst mit ihr mit. */ padding-inline-end: 10rem; } /* DAS ETIKETT. Versalien und weite Sperrung, damit es bei dieser Groesse noch lesbar ist und sich als Vorzeile liest, nicht als Ueberschrift. Die Bindungsfarbe traegt darauf 5,1:1 gegen den Kartengrund. */ .portfolio-karte-art { color: var(--vorlage-bindung); /* 12 statt 14 px. Fest und nicht ueber --schrift-xs: Das Etikett ist Vorzeile, keine Textgroesse der Seite — es soll nicht mitwachsen, wenn der Fliesstext es irgendwann tut. Versalien und weite Sperrung halten es bei dieser Groesse noch lesbar. */ font-size: 0.75rem; font-weight: var(--gewicht-mittel); letter-spacing: var(--sperrung-weit); text-transform: uppercase; margin-block-end: calc(var(--raum-2) * -1); } .portfolio-karte--kompakt .portfolio-karte-art { font-size: 0.6875rem; } .portfolio-karte-titel { color: var(--hero-titel); font-size: var(--schrift-m); /* Sicherheitsnetz: Ein einzelnes langes Wort — und in diesem Projekt sind "Prozessautomatisierung" und "Namenskonventionen" die Regel, nicht die Ausnahme — soll die Karte nie sprengen, sondern umbrechen. */ overflow-wrap: break-word; transition: color var(--dauer-mittel) var(--kurve-weich); font-weight: var(--gewicht-schwer); line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-eng); /* ZWEI ZEILEN SIND RESERVIERT, auch wenn der Titel nur eine braucht — Reys Ansage: "die Beschreibungen auf einem Level halten". Ohne das faengt die Beschreibung in jeder Karte auf anderer Hoehe an, und drei nebeneinanderstehende Karten lesen sich als drei verschiedene Bauteile statt als eine Reihe. Der Wert haengt an der Zeilenhoehe und nicht an einer Pixelzahl, geht also mit jeder Schriftgroesse mit. Bekannte Grenze: Ein dreizeiliger Titel schiebt trotzdem. Ihn hart abzuschneiden waere schlimmer — dann fehlte Inhalt, den niemand sieht. */ min-block-size: calc(var(--zeile-knapp) * 2em); } .portfolio-karte-kurz { color: var(--text-leise); font-size: var(--schrift-s); line-height: var(--zeile-fliess); } .portfolio-karte-schlagworte { display: flex; flex-wrap: wrap; /* Waagerecht traegt der Mittelpunkt die Trennung, senkrecht die Luecke. */ column-gap: var(--raum-2); row-gap: 0; } /* KEINE PILLEN — Reys Ansage vom 25.08.: "Ich glaube das wird zu viel Cyan/Glass." Er hat recht, und es ist nachzaehlbar: Bei drei Karten lagen Reiter, Filterzeile und Karten zusammen bei siebzehn getoenten Glasflaechen auf einem Schirm. Das Glas ist die Auszeichnung der Seite — wenn alles daraus besteht, zeichnet es nichts mehr aus. Die Schlagworte in der Karte sind ohnehin keine Schalter, sondern Beschriftung. Anklicken kann man sie in der Filterzeile darueber. Sie stehen deshalb als schlichter Text. */ .portfolio-karte-schlagwort { color: var(--text-leise); font-size: var(--schrift-xs); } /* Der Trenner haengt am Wort und nicht in der Luecke: so wandert er beim Umbruch mit und faengt keine Zeile an. Am letzten steht keiner. */ .portfolio-karte-schlagwort:not(:last-child)::after { content: "\00b7"; margin-inline-start: var(--raum-2); color: var(--linie-stark); } /* Warum diese Karte in der Auswahl steht. Ohne Flaeche geht das jetzt ueber die Farbe — dieselbe Bindung wie am gewaehlten Filter. */ .portfolio-karte-schlagwort.ist-gewaehlt { color: var(--vorlage-bindung); font-weight: var(--gewicht-mittel); } /* ========================================================================= Der Fuss der Karte ------------------------------------------------------------------------- Schlagworte und Weg stehen zusammen und werden mit margin-block-start:auto an die Unterkante gedrueckt. Damit liegt der Aufruf in JEDER Karte einer Reihe auf derselben Hoehe, egal wie lang die Beschreibung darueber ist — das ist die zweite Haelfte von "auf einem Level". Die Haarlinie darueber ist kein Zierrat: sie trennt Beschreibung von Handlung. Ohne sie steht der Aufruf einfach als naechster Absatz da. ========================================================================= */ /* SCHLAGWORTE LINKS, KNOPF RECHTS, beides auf einer Hoehe — Reys Ansage vom 25.08. Der Fuss ist deshalb eine Zeile und keine Spalte mehr. align-items: center und nicht flex-end: Die Schlagworte koennen zweizeilig umbrechen, der Knopf nie. Ausgerichtet an der Unterkante haenge der Knopf dann an der zweiten Zeile und die Zeile saehe schief aus; mittig bleibt sie in beiden Faellen ruhig. */ .portfolio-karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4); margin-block-start: auto; padding-block-start: var(--raum-3); border-block-start: var(--rand-fein); } /* Nimmt den Platz links, laesst dem Knopf seinen rechts. min-width: 0, sonst verhindert der laengste Begriff das Umbrechen und drueckt den Knopf raus. */ .portfolio-karte-schlagworte { flex: 1 1 auto; min-width: 0; } /* ZWEI ZEILEN, IMMER — die zweite Haelfte der Loesung fuer den wandernden Fuss (die erste ist der Deckel von drei Schlagworten in portfolio.js). Der Deckel allein reicht nicht: Ein Fall mit einem Schlagwort braucht eine Zeile, einer mit dreien zwei — der Fuss waere immer noch verschieden hoch. Die feste Hoehe macht die Flaeche unabhaengig von ihrem Inhalt, und erst dadurch sitzen Trennlinie und Knopf in jeder Karte auf derselben Hoehe. Der Preis ist eine halbleere Zeile bei Faellen mit wenigen Schlagworten. Das ist der guenstigere Preis: Leerraum an derselben Stelle liest sich als Ruhe, unterschiedlich hohe Fuesse lesen sich als Fehler. */ .portfolio-karte--gross .portfolio-karte-schlagworte { font-size: var(--schrift-xs); line-height: var(--zeile-fliess); block-size: calc(var(--zeile-fliess) * 2em); align-content: flex-start; overflow: hidden; } /* Die Groesse steht jetzt an der Liste, damit die Zeilenrechnung oben aufgeht — der einzelne Eintrag erbt sie. */ .portfolio-karte--gross .portfolio-karte-schlagwort { font-size: inherit; } /* Was nicht mehr hineinpasst, wird gezaehlt statt weggelassen. Leiser als die Schlagworte selbst: Es ist eine Auskunft, kein Inhalt. */ .portfolio-karte-schlagwort.ist-rest { color: var(--linie-stark); } /* ========================================================================= DER AUFRUF — zweiter Anlauf am 25.08. ------------------------------------------------------------------------- Reys Befund zum Textweg: "etwas langweilig und sieht nicht nach Button aus". Er bekommt jetzt denselben Baustein wie die Startseite, Zeichen fuer Zeichen: .schaltflaeche aus komponenten.css. Geaetzte Scheibe, vier Punkthalter, Lichtsaum, und beim Hover laeuft der diagonale Glanz breiter. An Groesse und Schatten wird NICHT gedreht. In komponenten.css steht "ALLE Knoepfe sehen gleich aus" als Reys Regel, und ein Knopf, der fast wie der von der Startseite aussieht, waere schlimmer als einer, der es ganz tut. Damit ist auch die Sorge erledigt, die frueher an dieser Stelle stand — sechs Glasschaltflaechen im Raster seien lauter als die zwei in der Hero. Sie war nicht unbegruendet, aber es ist Reys Entscheidung, und er hat sie getroffen. ========================================================================= */ /* DIE GANZE KARTE IST DER VERWEIS — und trotzdem steht nur EIN Link im Dokument. Der Verweis haengt am Titel, und sein ::after legt sich unsichtbar ueber die ganze Karte. Ergebnis: Jeder Punkt der Karte fuehrt zum Projekt, aber es gibt genau ein — eine Station beim Durchtabben, ein Eintrag in der Linkliste eines Vorleseprogramms, und sein Name ist der Titel des Falls. Der Knopf ist deshalb ein , kein zweiter Verweis. Ein im ist nicht erlaubt, und zwei Links auf dasselbe Ziel waeren fuer Tastatur und Vorleseprogramm eine Dopplung ohne Gewinn. Er sieht aus wie ein Knopf und antwortet wie einer — geklickt wird die Karte. Die Flaeche traegt z-index: 1, der Knopf bewusst KEINEN. Sonst laege der Knopf ueber der Flaeche (er steht spaeter im Dokument) und waere die eine Stelle der Karte, an der ein Klick ins Leere geht. BEKANNTE FOLGE: Text in der Karte laesst sich kaum noch markieren, weil die Flaeche darueber liegt. Der Preis dieser Bauweise, bei einer Vitrinen-Karte vertretbar. */ .portfolio-karte-verweis { color: inherit; text-decoration: none; } .portfolio-karte-verweis::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Der Fokusring gehoert um die ganze Karte, nicht um die Titelzeile — sie ist ja das, was angeklickt wird. */ .portfolio-karte:focus-within { outline: var(--rand-stark); outline-color: var(--vorlage-bindung); outline-offset: 3px; } .portfolio-karte-verweis:focus-visible { outline: none; } /* HIER STAND DIE AUSNAHME, DIE JETZT DIE REGEL IST. Der Knopf in der Karte bekam am 25.08. als einziger einen gedeckten Grund, weil er auf hellem Untergrund sitzt. Seit dem 26.08. ist genau das die Voreinstellung jeder Schaltflaeche (komponenten.css) — die Zeile hier waere eine zweite Quelle fuer denselben Wert und ist deshalb entfallen. Am Aussehen aendert sich nichts: --glas-auf-weiss IST --knopf-flaeche-karte. */ .portfolio-karte-knopf { /* Rechts, und er schrumpft nicht mit. */ flex: 0 0 auto; /* DIE EINE ABWEICHUNG VOM KNOPF DER STARTSEITE, und sie betrifft nicht sein Aussehen, sondern seine Hoehe ueber dem Grund. --knopf-abheben ist ein vierlagiger Wurf bis 64 px Versatz bei 33 Prozent Schwarz. Er ist dafuer gebaut, dass ein Glasschild vor einer Wand schwebt, und in der Hero stimmt das. In einer Karte lag darunter ein dunkler Fleck, der ueber die Unterkante hinauslief — angesehen und verworfen. Auch --nav-abheben war noch zu viel: Die vier gestaffelten Lagen verstaerken sich gegenseitig, und die Karte wirft selbst schon einen Schatten. --knopf-abheben-flach hat zwei kurze Lagen — der Knopf hebt sich ab, ohne dass unter ihm etwas dunkel wird. Rahmen, Punkthalter, Lichtsaum, Glanz und das ganze Hover-Verhalten bleiben unangetastet: Es ist derselbe Knopf, nur naeher am Grund. */ filter: var(--knopf-abheben-flach); } /* DER KNOPF ANTWORTET AUF DIE GANZE KARTE. Sonst muesste man ihn treffen, um zu sehen, dass er reagiert — obwohl die ganze Flaeche klickt. Dieselben vier Aenderungen wie an der Startseite: satterer Ton, kraeftigerer Lichtsaum, tiefere Aetzung, breiter laufender Glanz. :not(.ist-ohne-ziel), weil eine Karte ohne Ziel nichts zu versprechen hat. */ .portfolio-karte:hover .portfolio-karte-knopf:not(.ist-ohne-ziel), .portfolio-karte:focus-within .portfolio-karte-knopf:not(.ist-ohne-ziel) { color: var(--knopf-text-hover); } .portfolio-karte:hover .portfolio-karte-knopf:not(.ist-ohne-ziel) .schaltflaeche__rahmen, .portfolio-karte:focus-within .portfolio-karte-knopf:not(.ist-ohne-ziel) .schaltflaeche__rahmen { background-color: var(--knopf-flaeche-karte-hover); box-shadow: var(--rahmen-innenglanz-hover); } .portfolio-karte:hover .portfolio-karte-knopf:not(.ist-ohne-ziel) .schaltflaeche__rahmen::after, .portfolio-karte:focus-within .portfolio-karte-knopf:not(.ist-ohne-ziel) .schaltflaeche__rahmen::after { background-size: 700%; } /* Der Pfeil rueckt nach. Steht hier und nicht in komponenten.css, weil er sonst auch die beiden Knoepfe der Startseite aendern wuerde — und die sollte niemand anfassen. */ .portfolio-karte-knopf .schaltflaeche__pfeil { display: inline-block; transition: transform var(--dauer-mittel) var(--kurve-aus); } .portfolio-karte:hover .portfolio-karte-knopf:not(.ist-ohne-ziel) .schaltflaeche__pfeil { transform: translateX(0.25em); } /* Solange es die Projektseite noch nicht gibt (Feature 9): Der Knopf steht da, aber die Karte ist kein Verweis. Er verliert die Haelfte seiner Deckkraft — Umriss und Punkthalter bleiben lesbar, das Versprechen nicht. Der Schattenwurf bleibt derselbe wie am aktiven Knopf. Ein deaktivierter, der HOEHER schwebt als ein benutzbarer, sagt das Gegenteil von dem, was gemeint ist. */ .portfolio-karte-knopf.ist-ohne-ziel { opacity: 0.5; cursor: default; } .portfolio-leer { grid-column: 1 / -1; margin: 0; color: var(--text-leise); } /* ========================================================================= Schmale Viewports ------------------------------------------------------------------------- Drei Reiter nebeneinander passen hier nicht: allein "Prozessautomatisierung" misst bei 14 px rund 150 px, die Scheibe liefe weit ueber den Viewport hinaus. Sie kippt deshalb auf uebereinander und wird dabei vom Langloch zur Tafel — die Rundung muss mitgehen, sonst stuenden drei Segmente in einer Pillenform uebereinander. ========================================================================= */ @media (max-width: 48rem) { .portfolio-reiter { display: flex; flex-direction: column; width: 100%; border-radius: var(--radius-l); font-size: var(--schrift-xs); } .portfolio-reiter-knopf { justify-content: flex-start; padding: var(--pille-polsterung); } /* Der Balken wandert auf schmalen Viewports an die LINKE Kante: unten liegt dort der naechste Reiter, nicht der Inhalt. Seine Masze setzt js/portfolio.js, das die Umschaltung selbst mitliest. */ /* ---- DIE ECKE WIRD ZUM KOPFBILD (26.08., Reys Befund "Portfolio ueberlappen Texte und Bilder") ------------------------------------ Auf dem Desktop steht das Bild als Ecke oben rechts, und Etikett und Titel lassen 10rem Platz dafuer. Auf einem Telefon geht das nicht auf, und zwar nicht knapp: Bei 360 px bleiben dem Etikett 155 px, waehrend allein das Wort "PROZESSAUTOMATISIERUNG" in Versalien mit weiter Sperrung 206 px misst. Gemessen, nicht geschaetzt. EIN EINZELNES WORT KANN NICHT UMBRECHEN. Deshalb hilft es auch nicht, die Ecke zu verkleinern — der erste Anlauf tat genau das und war bei 390 px sauber, bei 360 px wieder nicht. Was hilft, ist, den Text nicht mehr neben dem Bild stehen zu lassen: Die Ecke wandert aus der absoluten Lage in den Fluss und wird zum Kopfbild der Karte. Damit ist die Ueberlappung nicht kleiner, sondern unmoeglich. */ .portfolio-karte--gross .portfolio-karte-art, .portfolio-karte--gross .portfolio-karte-titel { padding-inline-end: 0; } /* Das Bild ueber die volle Breite, oben so rund wie die Karte. Kein Seitenrand und keine Seitenlinie — es sitzt buendig in der Kante. */ .portfolio-karte--gross img.portfolio-karte-ecke { position: static; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-l) var(--radius-l) 0 0; border-inline: 0; border-block-start: 0; } /* Ein Symbol statt eines Bildes wird NICHT zum Band — ueber die volle Breite gezogen waere eine Strichzeichnung nur noch eine grosze leere Flaeche. Es bleibt klein, rueckt aber ebenfalls in den Fluss und stellt sich nach rechts. Auch hier gilt: im Fluss kann nichts ueberlappen. */ .portfolio-karte--gross svg.portfolio-karte-ecke { position: static; inline-size: 5rem; block-size: 5rem; margin: var(--raum-5) var(--raum-5) 0 auto; } /* ---- DER KNOPF LAG AUF DEN SCHLAGWORTEN --------------------------- Der Fusz ist eine Zeile: Schlagworte links, Knopf rechts. Bei 286 px Innenbreite braucht der Knopf allein 217 px — die Schlagworte wurden darunter zusammengedrueckt und verschwanden hinter ihm ("Chatbot / Datens..." lag unter "Projekt ansehen"). Untereinander statt nebeneinander, und der Knopf ueber die volle Breite: Auf einem Telefon ist er ohnehin das Ziel des Daumens. */ .portfolio-karte-fuss { flex-wrap: wrap; align-items: stretch; } .portfolio-karte-schlagworte { flex: 1 1 100%; } .portfolio-karte-knopf { flex: 1 1 100%; display: flex; } .portfolio-karte-knopf .schaltflaeche { inline-size: 100%; } } /* DIE KOMPAKTEN KARTEN AUF SEHR SCHMALEN SCHIRMEN (26.08.). Bei 320 px — iPhone SE und kleine Android-Geraete — trifft sie derselbe Fall wie die groszen: Das Etikett "PROZESSAUTOMATISIERUNG" braucht 206 px, die Spalte neben dem 4,5rem-Symbol gibt sie nicht her. Ab 360 px ist es sauber, deshalb greift die Regel erst darunter und laesst die geprueften Breiten unberuehrt. */ @media (max-width: 22.5rem) { .portfolio-karte--kompakt .portfolio-karte-ecke { position: static; inline-size: 4rem; block-size: 4rem; margin: var(--raum-5) var(--raum-5) 0 auto; } .portfolio-karte--kompakt .portfolio-karte-art, .portfolio-karte--kompakt .portfolio-karte-titel { padding-inline-end: 0; } } /* ========================================================================= Auftritt und Abgang der Karten ------------------------------------------------------------------------- Beim Filtern aendert sich der Inhalt, ohne dass sich der Fokus bewegt — ohne Bewegung merkt man kaum, DASS etwas passiert ist. Zwei Vorgaenge: ABGANG Die alten Karten sinken leicht nach oben weg und blenden aus. Kurz gehalten (--dauer-abgang): Verschwinden darf nicht warten lassen. js/portfolio.js setzt dafuer .geht und baut das Raster erst danach neu. AUFTRITT Die neuen kommen von unten herauf, eine nach der anderen. Die laufende Nummer steht als --nummer an der Karte, den Abstand gibt --versatz-karte. Die Richtungen sind Absicht und nicht vertauschbar: Was geht, geht nach oben weg; was kommt, kommt von unten nach. Beides zusammen liest sich als EINE Bewegung, nicht als zwei. Bei prefers-reduced-motion greift die Abschaltung in base.css — dort stehen alle Dauern global auf --dauer-aus, und js/portfolio.js ueberspringt zusaetzlich das Warten auf den Abgang. Es steht dann alles sofort an seinem Platz. */ /* DER AUFTRITT HAENGT AM SCROLLEN, nicht am Laden. Vorher lief die Staffel genau einmal, beim Aufbau der Seite — und weil das untere Raster da noch gar nicht sichtbar war, hat sie dort niemand gesehen. Die Seite stand danach still. In CLAUDE.md steht, Animationen seien der Kern und nicht die Deko; davon war nichts eingeloest. Jetzt setzt js/portfolio.js die Klasse `ist-sichtbar`, sobald eine Karte in den Blick kommt — ueber IntersectionObserver, nie ueber ein scroll-Ereignis (auch das steht so in CLAUDE.md). Beim Filtern greift dasselbe: Die neuen Karten sind sofort im Blick, treten also sofort auf. Als Uebergang und nicht als Animation, weil `.geht` sonst dagegen anlaufen muesste — eine abgelaufene Animation mit fill-mode haelt ihren Endwert fest und schlaegt jeden Uebergang auf derselben Eigenschaft. */ .portfolio-karte { opacity: 0; transform: translateY(14px); transition-delay: calc(var(--nummer, 0) * var(--versatz-karte)); } .portfolio-karte.ist-sichtbar { opacity: 1; transform: none; } /* Beim Hover darf nichts nachhaengen — der Zeitversatz gehoert zum Auftritt, nicht zur Zuwendung. */ .portfolio-karte:hover, .portfolio-karte:focus-within { transition-delay: 0s; } .portfolio-karte.geht { opacity: 0; transform: translateY(-6px); transition-duration: var(--dauer-abgang); transition-delay: 0s; } /* ========================================================================= Was Highlight und kompakter Eintrag unterscheidet ------------------------------------------------------------------------- Nur Groesse und Menge, keine eigene Farbe und kein eigenes Material. Der Unterschied soll aus dem Gewicht kommen, nicht aus einer zweiten Gestaltungssprache. ========================================================================= */ /* Von --schrift-l (26 px) auf --schrift-xl (44 px). Der Abstand zum kompakten Eintrag (16 px) war vorher knapp das Anderthalbfache — man musste den Unterschied suchen statt ihn zu sehen. Jetzt liegt fast das Dreifache dazwischen, und die Seite bekommt eine Tonleiter: 72 - 44 - 19 - 16 - 13. */ .portfolio-karte--gross .portfolio-karte-titel { /* 32 statt 44 px — nicht aus Geschmack, sondern weil drei Spalten es erzwingen. Die Tonleiter bleibt trotzdem deutlich: 72 - 32 - 16 - 16 - 13. */ font-size: var(--schrift-karte); line-height: var(--zeile-eng); /* Der Zwei-Zeilen-Deckel von oben gilt hier nicht: Bei 848 px Breite passt fast jeder Titel in eine Zeile, und reservierte Leerzeile darunter saehe nach Fehler aus. */ min-block-size: 0; } .portfolio-karte--gross .portfolio-karte-kurz { /* Eine Stufe kleiner als vorher (16 statt 19 px). In einer 557 px breiten Spalte liest sich das ruhiger, und der Abstand zum Titel waechst — der Titel gewinnt dadurch, ohne groesser zu werden. */ font-size: var(--schrift-s); max-width: var(--breite-text); } .portfolio-karte--kompakt .portfolio-karte-titel { font-size: var(--schrift-s); min-block-size: calc(var(--zeile-knapp) * 2em); } .portfolio-karte--kompakt .portfolio-karte-kurz { font-size: var(--schrift-xs); } /* Ohne Knopf braucht der Fuss auch keine trennende Linie mehr — dann stehen dort nur noch die Schlagworte, und die sind Beschriftung, keine Handlung. */ .portfolio-karte--kompakt .portfolio-karte-fuss { border-block-start: 0; padding-block-start: var(--raum-1); } /* ========================================================================= Die Symbole bewegen sich — aber nur, solange man auf der Karte steht ------------------------------------------------------------------------- Reys Auftrag vom 25.08.: Roboter blinzelt, Zahnraeder drehen sich, der Kalender reisst alle zwei Sekunden ein Blatt ab. Endlos, solange gehovert. WARUM DIE ANIMATION AM HOVER HAENGT UND NICHT DAUERND LAEUFT: Drei Symbole, die ununterbrochen zappeln, sind Unruhe auf einer Seite, an der wir den ganzen Tag Ruhe gesucht haben. Bewegung, die auf Zuwendung antwortet, ist eine Geste; Bewegung ohne Anlass ist Deko — und "bewegt, nicht verspielt" steht so in CLAUDE.md. transform-box: fill-box ist bei SVG-Kindern PFLICHT und die Stelle, an der solche Animationen sonst scheitern: Ohne sie bezieht sich transform-origin auf das gesamte SVG-Koordinatensystem, nicht auf das Teil selbst — das Zahnrad drehte sich dann um die linke obere Ecke der Zeichnung. ========================================================================= */ .portfolio-karte-symbol .symbol-auge, .portfolio-karte-symbol .symbol-rad, .portfolio-karte-symbol .symbol-blatt { transform-box: fill-box; transform-origin: center; } /* --- KI-Integration: der Roboter blinzelt --- Zwei Lider statt eines Blinzelns im Gleichtakt waeren gruselig — beide Augen schliessen gemeinsam, so wie es Augen tun. Der lange ruhige Teil der Kurve macht das Blinzeln zum Ereignis statt zum Flackern. */ @keyframes symbol-blinzeln { 0%, 42%, 52%, 88%, 100% { transform: scaleY(1); } 46%, 48% { transform: scaleY(0.08); } 93%, 95% { transform: scaleY(0.08); } } .portfolio-karte:hover .symbol--ki-integration .symbol-auge, .portfolio-karte:focus-within .symbol--ki-integration .symbol-auge { animation: symbol-blinzeln 3.2s var(--kurve-weich) infinite; } /* --- Prozessautomatisierung: die Zahnraeder greifen ineinander --- Gegenlaeufig, sonst greifen sie nicht ineinander, sondern aneinander vorbei. Das kleine Rad hat weniger Zaehne und dreht deshalb schneller — dasselbe Verhaeltnis wie an echten Raedern, sonst sieht es falsch aus, ohne dass man sagen koennte warum. */ /* ZWEI ZAHNRAEDER, DIE WIRKLICH INEINANDER GREIFEN — Reys Befund vom 25.08.: "Das kleinere sollte nicht nur vier Zaehne haben, und sie sollten echt ineinander greifen." Vorher waren es zwei Kreise mit Speichen, acht und vier. Das sah aus wie ein Zahnrad und war keins: Die Speichen zeigten ins Leere, die Raeder beruehrten sich nicht, und ihre Drehzahlen (4 s und 2,6 s) waren frei gewaehlt. Wer zwei Zahnraeder kennt, sieht das sofort. DREI BEDINGUNGEN, damit es stimmt, alle drei beim Erzeugen ausgerechnet: 1. GLEICHER MODUL. Der Modul ist die Zahngroesse; nur bei gleichem Modul passen die Zaehne des einen in die Luecken des anderen. Hier 1,75. Daraus folgt der Waelzkreis: r = Modul * Zaehnezahl / 2, also 10,5 bei zwoelf Zaehnen und 7,0 bei acht. 2. ACHSABSTAND = SUMME DER WAELZKREISE, hier 17,5. Nur dann beruehren sich die Waelzkreise, und nur dann kaemmen die Zaehne. 3. PHASE AUF LUECKE. Am Beruehrpunkt braucht das eine Rad einen Zahn und das andere eine Luecke. Das grosse hat deshalb einen Zahn genau auf der Verbindungslinie, das kleine einen Zahn eine halbe Teilung daneben. DIE UMLAUFZEITEN SIND KEINE GESCHMACKSFRAGE MEHR. Zwei kaemmende Raeder legen am Beruehrpunkt denselben Weg zurueck; die Drehzahlen verhalten sich also umgekehrt wie die Zaehnezahlen. 12 zu 8 heisst: Das kleine dreht sich anderthalb mal so schnell. 6 s und 4 s. Jede andere Paarung laesst die Zaehne durcheinanderlaufen — und weil beide linear und gleichzeitig starten, bleibt das Verhaeltnis dauerhaft exakt. */ @keyframes symbol-drehen { to { transform: rotate(360deg); } } @keyframes symbol-drehen-rueck { to { transform: rotate(-360deg); } } .portfolio-karte:hover .symbol--prozessautomatisierung .symbol-rad--gross, .portfolio-karte:focus-within .symbol--prozessautomatisierung .symbol-rad--gross { animation: symbol-drehen 6s linear infinite; } .portfolio-karte:hover .symbol--prozessautomatisierung .symbol-rad--klein, .portfolio-karte:focus-within .symbol--prozessautomatisierung .symbol-rad--klein { animation: symbol-drehen-rueck 4s linear infinite; } /* --- Projektmanagement: der Kalender reisst ein Blatt ab --- Zwei Sekunden je Blatt, wie beauftragt. Der Riss selbst dauert nur ein Sechstel davon; die uebrige Zeit liegt das Blatt still. Genau das macht den Abriss zum Ereignis — ein gleichmaessig durchlaufender Zyklus saehe aus wie ein Ladebalken. Das neue Blatt kommt nicht von oben hereingeflogen, sondern ist bei 0 Prozent einfach wieder da: Ein Kalender legt nach, er wirft nicht. */ @keyframes symbol-abreissen { 0%, 70% { transform: translateY(0) rotate(0deg); opacity: 0.28; } 82% { transform: translateY(7px) rotate(-9deg); opacity: 0; } 83%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.28; } } .portfolio-karte:hover .symbol--projektmanagement .symbol-blatt, .portfolio-karte:focus-within .symbol--projektmanagement .symbol-blatt { animation: symbol-abreissen 2s var(--kurve-weich) infinite; } /* Wer Bewegung abbestellt hat, bekommt keine. base.css setzt zwar alle Dauern global auf --dauer-aus, aber eine ENDLOSE Animation liefe damit nicht ruhig, sondern rasend schnell — sie muss hier ausdruecklich aus. */ @media (prefers-reduced-motion: reduce) { .portfolio-karte-symbol .symbol-auge, .portfolio-karte-symbol .symbol-rad, .portfolio-karte-symbol .symbol-blatt { animation: none !important; } } /* ========================================================================= RANDNOTIZEN — handgezeichnete Pfeile mit Zuruf am Rand. Livias Vorschlag vom 25.08., die Texte und die Zuordnung sind Reys. Drei Stueck: an den Filtern, an den Highlights, am Knopf. WARUM GEFUELLTE FORMEN UND KEIN stroke. Das ist der Unterschied zwischen "wirkt gezeichnet" und "wirkt geklickt". Ein stroke hat ueberall dieselbe Staerke; ein Stift traegt duenn an, wird in der Mitte satt und laeuft zur Spitze aus. Genau das laesst sich mit stroke-width nicht sagen. Die Pfade sind deshalb GEFUELLTE Umrisse, aus einer Mittellinie berechnet, deren Halbbreite ueber den Verlauf wandert. RUNDUNGEN SCHLAGEN GERADEN — Reys Regel vom 25.08., und sie gilt fuer jeden kuenftigen Pfeil hier: "Rundungen sind schoener als gerade." Praktisch heisst das etwas Bestimmtes ueber die Steuerpunkte: Liegen sie ungefaehr auf der Verbindungslinie zwischen Anfang und Ende, kommt eine Gerade mit Knick heraus, auch wenn im Code "Kurve" steht. Ein echter Bogen entsteht, wenn der erste Steuerpunkt die Anfangsrichtung WEIT vom Ziel weg zeigen laesst und der zweite die Endrichtung schon vorwegnimmt. Bei der Notiz an der Wortmarke: erster Punkt fast senkrecht ueber dem Anfang, zweiter waagerecht links vom Ende — dazwischen liegt der Viertelbogen von selbst. ZWEI WEGE, DIE VERWORFEN SIND, damit sie niemand noch einmal geht: (1) Derselbe Pfad zweimal, leicht versetzt, als "zweiter Stiftstrich". Sieht nicht nach Tinte aus, sondern nach Doppelbild. (2) Duenn auslaufende Widerhaken. Neben einem satten Schaft wirken sie spillerig; die Spitze braucht das Gewicht des Schafts. z-index: -1 UND isolation: isolate — beides zusammen, sonst nichts. Reys Vorgabe: "Pfeile immer hinter dem Content und auch hinter Schatten." Die DOM-Reihenfolge allein reicht dafuer NICHT: Ein absolut positioniertes Element malt grundsaetzlich ueber normalen Inhalt, egal wo es im Markup steht. Der grosse Pfeil lief dadurch quer ueber die Filterpillen. Erst eine negative Ebene setzt ihn darunter — und die braucht einen eigenen Stapelkontext auf .portfolio, sonst faellt er durch bis hinter den Seitenhintergrund. Kartenschatten gehoeren zur Karte und liegen damit ebenfalls darueber, genau wie gewuenscht. DIE POSITIONEN SIND FESTE PIXEL, und das ist eine bewusste Schwaeche. Eine Notiz zeigt auf eine bestimmte Stelle; ein Wert in Prozent zeigt nach dem naechsten Textumbruch woanders hin. Sie haengen an .portfolio, nicht am Dokument. Aendert sich oben etwas an der Hoehe, wandern sie mit — nur nicht weiter als die Zeile, an der sie haengen. JEDE SPITZE ENDET DEUTLICH VOR IHREM ZIEL. Zuerst war das nur eine technische Notwendigkeit: Lag die Spitze auf der Karte, verschwand der Pfeilkopf hinter ihr — mit z-index: -1 erst recht. Dann kam Reys inhaltlicher Grund dazu, und der wiegt schwerer: Je naeher die Spitze, desto kleiner das, worauf sie zu zeigen scheint. Bei 12 px Abstand zur Highlight-Reihe wirkte die Notiz, als meine sie nur die eine Karte darunter. "Mehr Abstand reicht — die Pfeilspitze weist den Weg." Richtwert seitdem: rund 60 px, nicht rund 15. Unter 75rem ist kein Platz mehr dafuer, dann sind sie weg. Ein Zuruf, der ueber dem Inhalt klebt, ist kein Zuruf mehr. ========================================================================= */ .portfolio { isolation: isolate; } .portfolio-notiz { position: absolute; pointer-events: none; z-index: -1; color: var(--notiz-tinte); /* Ein SVG schneidet an seiner Zeichenflaeche ab. Genau daran ist das letzte "n" von "nach Schwerpunkt filtern" verschwunden — 5 px zu lang und still weggeschnitten. Wer hier den Text aendert, soll das nicht wieder suchen muessen: Der Ueberstand darf raushaengen. */ overflow: visible; } /* NUR DIE SICHTBAREN FORMEN, nicht der Pfad in der Maske. Die frueher hier stehende Fassung lautete `.portfolio-notiz path` und traf beides — CSS schlaegt Praesentationsattribute, der Maskenpfad verlor damit sein stroke="#fff" und bekam stattdessen eine Fuellung. Ohne Strich greift stroke-dashoffset an nichts, und der Pfeil stand von der ersten Sekunde an fertig da. Zwei Stunden Fehlersuche an der falschen Stelle (pathLength, Maskenreferenz, getComputedStyle in defs) - der Fehler war diese Zeile. */ .portfolio-notiz g path { fill: var(--notiz-pfeil); stroke: none; } .portfolio-notiz text { font-family: "Caveat", cursive; /* Fest und nicht ueber die Schriftstufen der Seite: Diese Groesse gehoert zur Zeichnung, nicht zur Typografie — sie ist am Pfeil bemessen. */ font-size: 27px; fill: currentColor; } /* ========================================================================= WORAN EINE NOTIZ HAENGT — die Korrektur vom 25.08. Reys Befund: "Auf 1920px ist es was ganz anderes mit der Positionierung als mit WQHD und 32 Zoll." Nachgemessen bei 1280, 1440, 1600, 1920 und 2560 waren es ZWEI verschiedene Fehler, nicht einer. ERSTENS: Die Notizen standen auf festen Pixelwerten ab dem Seitenanfang. Der Inhaltsblock ist aber nur bis 1720 px breit; darunter waechst er mit dem Fenster, und damit wandern die Zeilen. Die Unterkante der Filterzeile liegt bei 1280 px auf 351, bei 1600 auf 374, ab 1820 auf 392. Eine Notiz auf einem festen Wert zeigt je nach Fenster woanders hin — bei 1280 waere sie in die Filterzeile hineingerutscht. Die Loesung ist nicht ein weiterer Wert, sondern ein anderer BEZUG: Jede Notiz haengt an der Zone des Elements, auf das sie zeigt. Und zwar an dessen fester Kante, NICHT ueber Prozentwerte auf die Hoehe — sonst haengt es doch wieder daran, ob die Filterzeile ein- oder zweizeilig umbricht. ZWEITENS steht weiter unten, bei den Filzstiften. ========================================================================= */ .portfolio-zone { position: relative; } /* Unter der Filterzeile. Sie zeigt hinauf; oben stand sie einmal in einer Reihe mit der Highlight-Notiz und las sich wie deren Zwilling — Reys Korrektur. Der Abstand ist bewusst grosszuegig, siehe unten. */ .portfolio-notiz--filter { inset-block-end: -62px; inset-inline-start: 380px; } /* Kleiner als die anderen beiden — Reys Ansage. Sie steht am dichtesten am Text der Seite und wuerde sonst mit den Filterpillen um Aufmerksamkeit streiten. */ .portfolio-notiz--filter text { font-size: 23px; } /* Der grosse Schwung von oben rechts hinunter auf die Highlight-Reihe. RECHTS verankert, nicht links: Wird der Inhalt schmaler, soll sie am rechten Rand bleiben, wo sie hingehoert. DER ABSTAND IST DIE AUSSAGE. Mit 12 px stand die Spitze fast auf Karte 3, und die Notiz las sich, als sei nur diese eine gemeint — Reys Befund: "sieht aus, als meinten wir nur das dritte der Highlights". Sie zielt aber auf die REIHE. Mit 62 px Luft zeigt der Pfeil in eine Richtung, statt auf ein Rechteck. */ .portfolio-notiz--gross { inset-block-start: -330px; inset-inline-end: 160px; } @media (max-width: 75rem) { .portfolio-notiz { display: none; } } /* ========================================================================= DER TEXTMARKER — angeschnitten von oben. Reys Bild, Reys Platzierung ("irgendwo da", Skizze vom 25.08.). Er soll Schwung bringen, ohne sich vorzudraengen. DER DECKEL GEHOERT DAZU. Die erste Fassung hatte ihn weggerechnet — meine Entscheidung, und sie war falsch: "Oh, wo ist der Deckel hin? Ich fand der passte gut." Er liegt im Bild als eigenes Stueck neben dem Stift und macht aus einem Produktfoto eine abgelegte Sache. WARUM DAS BILD NICHT DAS ORIGINAL IST. Die Vorlage ist ein PNG mit 518 KB bei 1210x997. Angezeigt werden 340 px. Daneben liegt jetzt eine WebP-Fassung mit 50 KB bei doppelter Anzeigegroesse — zugeschnitten auf das, was wirklich drauf ist, statt auf den transparenten Rand ringsum. Reys Original bleibt unangetastet im Ordner liegen. FOTOREALISTISCH WAR DIE OFFENE FRAGE, und die Antwort ist ja: Der Stift trifft die Palette fast genau und liest sich dadurch als Teil der Seite, nicht als aufgeklebtes Stockfoto. Eine flach gerechnete Fassung ist ausprobiert und verworfen — bei einem Foto steckt die Form im Verlauf, nimmt man den weg, bleibt eine Silhouette ohne Koerper. Flach muesste GEZEICHNET sein, nicht gefiltert. z-index: -1 wie bei den Randnotizen: hinter allem Inhalt. Ein Stift, der ueber der Ueberschrift liegt, ist kein Requisit mehr, sondern ein Fehler. ========================================================================= */ .portfolio-marker { position: absolute; z-index: -1; pointer-events: none; /* Angeschnitten: Der negative Wert oben ist der Anschnitt selbst, nicht ein Versehen. Er laesst gut ein Drittel ausserhalb liegen. */ inline-size: 340px; block-size: auto; inset-block-start: -170px; inset-inline-start: 620px; } /* Wie die Randnotizen: Unter 75rem ist der Platz weg, und ein Requisit, das sich in die Navigation schiebt, ist keins mehr. */ @media (max-width: 75rem) { .portfolio-marker { display: none; } } /* ========================================================================= DIE FILZSTIFTE — unten links, aus dem Bild laufend. KEINE DREHUNG, und das ist keine Bequemlichkeit: In beiden neuen Bildern sind die SCHATTEN MIT IM BILD. Dreht man ein solches Bild, dreht sich der Schatten mit und faellt plötzlich gegen das Licht der uebrigen Seite. Reys Ansage dazu war ausdruecklich. Die Lage muss also aus dem Bild selbst kommen — deshalb steht hier nur, WO es liegt, nicht WIE es gedreht ist. Aus demselben Grund ist beim Zuschneiden die Schwelle sehr niedrig (Alpha > 4 statt > 24): Ein hoeherer Wert kappt die weichen Raender des Schattens, und der endet dann an einer geraden Kante. ========================================================================= */ .portfolio-stifte { position: absolute; z-index: -1; pointer-events: none; inline-size: 250px; block-size: auto; inset-block-end: -40px; /* ZWEITENS, aus derselben Messung: Was aus dem BILD laufen soll, darf nicht am Inhaltsblock haengen. Der ist auf 1720 px gedeckelt und steht mittig — bei 1920 sind links 100 px Rand, bei 2560 aber 420. Mit einem festen -150px liefen die Stifte bei 1920 sauber ueber die Kante (Schirm-x -50) und schwebten bei 2560 mitten im Rand (Schirm-x +270). Genau das hat Rey auf dem 32-Zoeller gesehen. (100% - 100vw) / 2 ist der Weg von der linken Inhaltskante zur linken FENSTERkante — bei jeder Breite. Die 50 px danach sind der Ueberstand. Ergebnis: Schirm-x -50, egal wie breit das Fenster ist. */ inset-inline-start: calc((100% - 100vw) / 2 - 50px); } @media (max-width: 75rem) { .portfolio-stifte { display: none; } } /* ========================================================================= DIE PFLANZE — rechts, aus dem Bild laufend. Reys Bild. UNGEDREHT wie die Filzstifte: Der Schatten ist mit im Bild, eine Drehung wuerde ihn gegen das Licht der uebrigen Seite fallen lassen. Am FENSTERrand verankert, nicht am Inhaltsblock — dieselbe Rechnung wie bei den Stiften, Begruendung steht dort. ANMERKUNG ZUR FARBE, weil sie jemandem auffallen wird: Die Bluete bringt ein kraeftiges Rot und Orange in eine Seite, die sonst nur Tuerkis und Petrol kennt. Das ist kein Versehen, sondern faellt unter Reys eigene Regel vom 25.08.: Eine farbige Kachel ist Oberflaeche und muss sich der Palette beugen, ein BILD ist Inhalt und darf eigene Farben mitbringen. ========================================================================= */ .portfolio-pflanze { position: absolute; z-index: -1; pointer-events: none; inline-size: 406px; /* Reys Mass, in zwei Schritten: +30 %, dann +20 % */ block-size: auto; /* In die untere Ecke, Reys Ansage. Sie haengt unter die Inhaltskante wie die Stifte auf der anderen Seite und laeuft nach rechts aus dem Bild. */ inset-block-end: -30px; inset-inline-end: calc((100% - 100vw) / 2 - 95px); } @media (max-width: 75rem) { .portfolio-pflanze { display: none; } } /* ========================================================================= DER AUFTRITT DER RANDNOTIZEN — geschrieben und gezeichnet. Reys Wunsch vom 25.08.: "einen Schreib-Effekt als Animation ... sowie einen Zeicheneffekt fuer die Pfeile. Keine Ahnung ob das sauber geht. Aber so 3s nach dem Laden? und dann nacheinander mit je 3s Pause?" ES GEHT, ABER NICHT AUF DEM UEBLICHEN WEG. Ein Pfeil wird sonst ueber stroke-dasharray/stroke-dashoffset gezeichnet — das setzt voraus, dass er ein STRICH ist. Unsere sind gefuellte Formen (Begruendung weiter oben: nur so laesst sich die Strichstaerke veraendern). An einer Fuellung greift dashoffset nicht. Der Ausweg: Die Form wird durch eine MASKE freigelegt, und die Maske ist ein dick gezeichneter Strich entlang derselben Mittellinie. Der Strich laesst sich zeichnen, die Fuellung erscheint darunter — der Stift wandert also wirklich den Pfeil entlang und faellt nicht ein. pathLength="1" im Markup ist der Trick, der es hier ohne JS haelt: Damit ist die Pfadlaenge auf 1 normiert, egal wie lang sie wirklich ist, und dasselbe Paar Werte gilt fuer alle drei Pfeile. DER TEXT wird nicht wirklich geschrieben, sondern von links aufgedeckt. Echtes Schreiben braeuchte die Buchstaben als Striche, nicht als Schrift — das waere ein eigenes Stueck Arbeit fuer jeden Text neu. Mit einer Handschrift liest sich das Aufdecken nah genug an einem Stift. REIHENFOLGE: erst das Wort, dann der Pfeil dorthin. Andersherum zeigt ein Pfeil einen Moment lang auf eine Beschriftung, die es noch nicht gibt. ========================================================================= */ .portfolio-notiz-wort { clip-path: inset(0 100% 0 0); animation: notiz-schreiben 900ms var(--kurve-weich) both; } .portfolio-notiz-zug { /* Ausdruecklich noch einmal in CSS, obwohl es schon als Attribut im Markup steht: Damit kann keine allgemeinere Regel es mehr kippen. */ fill: none; stroke: var(--maske-voll); /* DIE ECHTE LAENGE, nicht pathLength="1". Der naheliegende Weg waere, die Pfadlaenge auf 1 zu normieren und mit dasharray/dashoffset 1 zu arbeiten — dann gaelte dieselbe Regel fuer alle drei Pfeile. Chrome rechnet stroke-dashoffset: 1 aber als EINEN PIXEL: nachgemessen kam "1px" heraus, die Strichelung war damit 1 px lang und der Pfeil sah von Anfang an fertig aus. Jede Notiz bringt ihre Laenge deshalb selbst mit, ausgerechnet beim Erzeugen. */ stroke-dasharray: var(--zug-laenge); stroke-dashoffset: var(--zug-laenge); animation: notiz-zeichnen 1100ms var(--kurve-weich) both; } @keyframes notiz-schreiben { to { clip-path: inset(0 -2% 0 0); } } @keyframes notiz-zeichnen { to { stroke-dashoffset: 0; } } /* DIE STAFFEL. 3 s bis zur ersten, dann je 3 s — Reys Vorgabe. Der Pfeil setzt jeweils an, wenn das Wort fast steht (700 ms nach dessen Beginn), damit es eine Bewegung bleibt und nicht zwei getrennte werden. DREI NOTIZEN, NICHT VIER. "mehr erfahren" am Knopf der ersten Karte ist am 25.08. wieder entfallen, nachdem die Notiz an der Wortmarke dazukam: Reys Befund war "3 reichen". Er hat recht — vier Zurufe auf einer Seite sind kein Zuruf mehr, sondern ein Chor. Und der Knopf beschriftet sich ohnehin selbst mit "Projekt ansehen". */ /* DIE NOTIZ AN DER WORTMARKE — Reys Wunsch vom 25.08., oben links AUSSEN. Sie haengt am Inhaltsblock und ragt 284 px nach links darueber hinaus, denn ihre Spitze muss die Wortmarke treffen, und die steht im Inhalt. Am Fensterrand verankert wie die Stifte ginge nicht: Der Weg vom Fensterrand zur Wortmarke ist bei 1920 gut 160 px und bei 2560 fast 490 — ein und dieselbe Pfeillaenge kann nicht beides treffen. DARAUS FOLGT, DASS SIE PLATZ BRAUCHT, DEN ES NICHT ueberall GIBT. Der Rand neben dem Inhalt ist (Fensterbreite - 1720) / 2: bei 1920 sind das 100 px, bei 2560 aber 420. Unter rund 2320 px Fensterbreite steht die Notiz halb ausserhalb und wird abgeschnitten — deshalb erscheint sie erst darueber. Das ist eine bewusste Entscheidung und kein Versehen: Lieber nicht da als angeschnitten. SIE HAENGT DIREKT IM INHALT und in keiner Zone — anders als die drei uebrigen Notizen. Der erste Anlauf stand neben der Filternotiz und damit IN deren Zone; ihre Spitze landete dadurch auf Hoehe der Filterzeile (y 356) statt bei der Wortmarke (y 23). Ihr Ziel liegt eben nicht in einer Zone, sondern in der Kopfzeile. Zwei Zeilen und zwei eigene -Elemente, damit jede Zeile fuer sich geschrieben wird. Ein Aufdeck-Streifen ueber beide gleichzeitig sieht aus wie ein Vorhang, nicht wie ein Stift. */ .portfolio-notiz--marke { inset-block-start: 16px; inset-inline-start: -300px; } /* Dieselbe Groesse wie die Notiz an den Filtern. Bei 20 px war sie am weitesten aussen UND am kleinsten und fiel damit doppelt zurueck — sie ist aber die einzige, die etwas ueber die Seite selbst sagt. */ .portfolio-notiz--marke text { font-size: 23px; } @media (max-width: 145rem) { .portfolio-notiz--marke { display: none; } } /* Sie steht als erste in der Staffel: oben links, wo man zu lesen anfaengt. Die zweite Zeile setzt 500 ms nach der ersten an. */ .portfolio-notiz--marke .portfolio-notiz-wort--1 { animation-delay: 3000ms; } .portfolio-notiz--marke .portfolio-notiz-wort--2 { animation-delay: 3500ms; } .portfolio-notiz--marke .portfolio-notiz-zug { animation-delay: 4400ms; } .portfolio-notiz--filter .portfolio-notiz-wort { animation-delay: 6000ms; } .portfolio-notiz--filter .portfolio-notiz-zug { animation-delay: 6700ms; } .portfolio-notiz--gross .portfolio-notiz-wort { animation-delay: 9000ms; } .portfolio-notiz--gross .portfolio-notiz-zug { animation-delay: 9700ms; } /* Wer Bewegung abbestellt hat, sieht die Notizen fertig — und zwar SOFORT, nicht nach zwoelf Sekunden. Eine Animation nur zu verkuerzen genuegt hier nicht: Die Verzoegerung bliebe stehen, und bis dahin waere nichts zu sehen. Deshalb die Endwerte von Hand und animation: none. */ @media (prefers-reduced-motion: reduce) { .portfolio-notiz-wort { animation: none; clip-path: none; } .portfolio-notiz-zug { animation: none; stroke-dashoffset: 0; } }