/* ========================================================================= * ERSCHEINUNGSBILD: Tischdecke, Saum und Knotenkante * * ERZEUGT von werkzeuge/haut-erzeugen.py – NICHT VON HAND ÄNDERN. * Die Werte stehen in werkzeuge/haut-erzeugen.html; dort drehen und neu * erzeugen lassen. * * Drei Lagen, von unten nach oben: * 1. Leinen – feine Fasern und ein Webgitter, damit es nach Stoff * aussieht und nicht nach Farbe. * 2. Damast – zwei gegenläufig schraffierte Kreismuster, sehr blass. * 3. Saum – ein grünes Tartanband als Akzent. * 4. Knoten – die keltische Kante, die mit Jahreszeit und Festtag * wechselt. Als eigene Datei, siehe --band. * ========================================================================= */ :root { /* Höhe des Knotenbandes. Steht hier, weil Blade und CSS beide damit rechnen müssen und zwei Zahlen zwangsläufig auseinanderlaufen. */ --band-hoehe: 131px; /* * ECHTE FARBEN. * * Die Grundfarben der Seite kommen aus der Redaktion und sind am Logo * ausgerichtet – ein Violett. Wenn aber ALLES in dieses Violett getönt * wird, sieht ein Kleeblatt aus wie ein violettes Blatt und ein Apfel wie * eine violette Kugel. Dinge sollen aussehen wie die Dinge. * * Darum diese zweite, kleine Palette: Sie gehört NICHT der Marke, sondern * den Gegenständen. Sie steht hier und nicht in den Einstellungen, weil * ein Kleeblattgrün nichts ist, was man in der Redaktion verstellt. * * Alle Werte auf dem Papier gegengerechnet, damit sie auch als Text * taugen, wo sie als Text vorkommen. */ --gruen-klee: #2e7d4f; /* Kleeblatt, Irisches, Frisches */ --gruen-tief: #1f5c38; /* Tartan, Blattwerk, Tannen */ --blau-korn: #4a6fa5; /* Kornblume, Deutsches, Himmel */ --gold-stroh: #c89a3c; /* Korn, Honig, Messing */ --rot-ziegel: #b3503a; /* Hagebutte, Dach, Terrakotta */ --pergament: #f3e5c9; /* Kennzahlenband, Tabellenkopf */ --flieder: #d3c8d1; /* der Etikettgrund des Logos */ /* * DIE LEISE SCHRIFT WAR ZU LEISE. * * --text-leise stand auf 65 % der Textfarbe. Nachgemessen auf der * gefüllten Startseite: 3,41:1 gegen das Papier. Die Richtlinie verlangt * 4,5:1 für gewöhnlichen Text – und es trifft nicht irgendein Detail, * sondern 51 Stellen: Unterzeile, alle Rubriken, jeden Kicker, jedes * Datum, die Anrisstexte in den Karten. * * Auf 82 % angehoben. Das bleibt deutlich leiser als der Fließtext – die * Rangfolge bleibt also erhalten –, ist aber lesbar. Im Dunkeln dasselbe * Problem in Grün: dort waren die Chips bei 3,87. */ --text-leise: color-mix(in srgb, var(--text) 82%, var(--papier)); --tinte-60: var(--text-leise); /* Das Band des Tages. Wird in der Seite überschrieben – siehe App\Support\Jahresband. Steht hier ein Rückfall, damit die Kante auch ohne PHP nicht leer bleibt. */ --band: url("../bilder/band/band-fruehling-1.svg"); } /* ------------------------------------------------------------- Die Fläche Vier Lagen übereinander: Damast, Faserrauschen und zwei Webgitter. Eine einzelne Lage sähe aus wie Rauschen oder wie Millimeterpapier – erst zusammen ergibt es Textil. */ body { background-color: var(--papier); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22320%22%20viewBox%3D%220%200%20160%20320%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22a%22%20width%3D%225%22%20height%3D%225%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(45)%22%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%225%22%20stroke%3D%22%234d0f30%22%20stroke-opacity%3D%220.03%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%22b%22%20width%3D%225%22%20height%3D%225%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(-45)%22%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%225%22%20stroke%3D%22%234d0f30%22%20stroke-opacity%3D%220.03%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22160%22%20height%3D%22320%22%20fill%3D%22url(%23a)%22%2F%3E%3Cg%20fill%3D%22%23fff%22%20fill-opacity%3D%220.078%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%200.7)%22%3E%3Cpath%20d%3D%22M92.9%2092.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M67.1%2092.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M67.1%2067.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M92.9%2067.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3Cpath%20d%3D%22M12.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M-12.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M-12.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M12.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3Cpath%20d%3D%22M172.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M147.1%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M147.1%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M172.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%234d0f30%22%20fill-opacity%3D%220.027%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20-0.7)%22%3E%3Cpath%20d%3D%22M92.9%2092.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M67.1%2092.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M67.1%2067.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M92.9%2067.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3Cpath%20d%3D%22M12.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M-12.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M-12.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M12.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3Cpath%20d%3D%22M172.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M147.1%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M147.1%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M172.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22url(%23b)%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M92.9%2092.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M67.1%2092.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M67.1%2067.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M92.9%2067.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3Cpath%20d%3D%22M12.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M-12.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M-12.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M12.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3Cpath%20d%3D%22M172.9%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M147.1%20252.9m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M147.1%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200M172.9%20227.1m-25%200a25%2025%200%201%200%2050%200a25%2025%200%201%200%20-50%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%224%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url(%23f)%22%20opacity%3D%220.07%22%2F%3E%3C%2Fsvg%3E"), repeating-linear-gradient(90deg, rgba(120,100,80,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(120,100,80,.04) 0 1px, transparent 1px 4px); } /* --------------------------------------------------------------- Der Saum Das grüne Tartan trennt den Kopfbereich vom Inhalt. Es sitzt auf dem Maßband-Element, das im Blade ohnehin an dieser Stelle steht: .massband--kraeftig zwischen den Rubriken und dem Inhalt. Das hat drei Vorteile – es braucht kein neues Element, es hat von sich aus die Breite des Textbereichs statt über die ganze Fensterbreite zu laufen, und das Lineal, das vorher dort lag, ist damit ersetzt statt zusätzlich vorhanden. Die Maßbänder an anderen Stellen (Startseite, Rechtstexte, Export) bleiben Lineale – dort sind sie gewollt. */ .kopf .massband { height: 30px; border-top: 0; border-radius: 2px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2251%22%20height%3D%2251%22%20viewBox%3D%220%200%2051%2051%22%3E%3Cg%20opacity%3D%221%22%3E%3Cg%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%220%22%20width%3D%222%22%20height%3D%2251%22%20fill%3D%22%23e4ddc8%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2251%22%20fill%3D%22%234d0f30%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2241%22%20y%3D%220%22%20width%3D%222%22%20height%3D%2251%22%20fill%3D%22%23e4ddc8%22%2F%3E%3Crect%20x%3D%2243%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(90%2025.5%2025.5)%22%20opacity%3D%220.5%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3Crect%20x%3D%2219%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%220%22%20width%3D%222%22%20height%3D%2251%22%20fill%3D%22%23e4ddc8%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2251%22%20fill%3D%22%234d0f30%22%2F%3E%3Crect%20x%3D%2233%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2241%22%20y%3D%220%22%20width%3D%222%22%20height%3D%2251%22%20fill%3D%22%23e4ddc8%22%2F%3E%3Crect%20x%3D%2243%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2251%22%20fill%3D%22%232f4a2b%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%220%22%20width%3D%225%22%20height%3D%2251%22%20fill%3D%22%2339676a%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: repeat-x; background-position: center; /* Die Kachel ist quadratisch und so breit wie das ganze Sett. Ohne background-size würde sie in ihrer eigenen Größe gezeichnet und vom schmalen Streifen angeschnitten – man sähe einen willkürlichen Ausschnitt statt des Musters. */ background-size: auto 100%; box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(60,40,30,.18); /* Über die volle Breite, wie das Knotenband unten. Es sitzt im Blade außerhalb der Hülle, damit es nicht am Satzspiegel endet; die abgerundeten Ecken entfallen dafür – ein Band, das die Seite quert, hat keine Ecken. */ border-radius: 0; margin-block: .35rem 0; } /* ------------------------------------------------------ Die Knotenkante Sitzt über der Fußzeile, ebenfalls ohne eigenes Element: .fuss bekommt oben Platz, und ::before füllt ihn mit dem Band des Tages. WICHTIG: nur waagerecht kacheln, und die Fläche genau so hoch wie das Bild. Steht dort eine andere Höhe, beginnt oben und unten ein zweites Band – das sieht aus wie ein Fehler im Muster, ist aber die Kachelung. */ /* * KEINE LINIE ÜBER DEM BAND. * * blog.css gibt der Fußzeile ein border-top in der Akzentfarbe. Solange die * Akzentfarbe ein sehr dunkles Bordeaux war, verschwand die Haarlinie fast. * Mit dem Logoviolett steht sie deutlich da – und zwar quer durch den * oberen Rand des Knotenbandes, wie ein Fehler im Druck. * * Die Trennung macht das Band selbst. Eine zweite Linie daneben trennt * nicht besser, sie stört nur. */ .fuss { position: relative; /* Enger als vorher: Das Band selbst trennt schon kraeftig, darunter braucht es keinen Hof. Vorher 1rem Luft unter dem Band, 5rem Abstand nach oben, 2/3rem Polster - zusammen ueber 250 Punkte fuer vier Zeilen Text. */ padding-top: calc(var(--band-hoehe) + .2rem); border-top: 0; } /* * UNTER DEM BAND WIRD ES DUNKLER. * * Der Fuss stand auf demselben hellen Leinen wie der Text darueber und * franste nach unten aus - die Seite hoerte nicht auf, sie wurde nur * leer. Jetzt legt sich ab der Unterkante des Knotenbandes ein Verlauf * darueber, der nach unten in den Logoton laeuft: ein Fuss, der schliesst. * * Der Verlauf beginnt GENAU am Band (background-position) und ist genau * so hoch wie der Rest (background-size), sonst liefe er unter dem Band * hindurch und das Muster wuerde truebe. */ .fuss::after { content: ""; position: absolute; inset: var(--band-hoehe) 0 0 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to bottom, rgba(42, 26, 48, 0) 0%, rgba(42, 26, 48, .10) 40%, rgba(42, 26, 48, .24) 100%); } .fuss::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--band-hoehe); background-image: var(--band); background-repeat: repeat-x; background-position: left bottom; /* * background-size: auto 100% – das Band füllt die Höhe IMMER aus. * * Ohne diese Zeile wird das SVG in seiner eigenen Größe gezeichnet. * Stimmen --band-hoehe und die Bildhöhe nicht überein – etwa weil die * Einstellungen geändert, die Dateien aber noch nicht neu erzeugt * wurden –, ist das Band abgeschnitten oder es klafft eine Lücke. Mit * auto 100% skaliert es mit und bleibt in jedem Fall durchgehend. */ background-size: auto 100%; } /* ------------------------------------------------- Karten als Stoffstücke Aufgenäht: eine Steppnaht ringsum, ein weicher Schlagschatten und oben eine helle Kante, als fiele Licht von vorn. Die Naht sitzt INNEN – genau so näht man eine Applikation auf. .karte hatte bisher keinen Hintergrund und keinen Innenabstand. Ohne den liefe die Steppnaht quer über das Bild. */ .karte { position: relative; padding: .75rem .8rem 1rem; border-radius: 5px; background: var(--flaeche); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.05) inset, 0 2px 5px rgba(60,40,30,.13), 0 10px 20px -12px rgba(60,40,30,.25); } .karte::after { content: ""; position: absolute; inset: 6px; border: 1.5px dashed color-mix(in srgb, var(--text) 30%, var(--flaeche)); border-radius: 3px; pointer-events: none; opacity: .65; } .karte__bild { border-radius: 3px; } /* Überschriften geprägt statt geworfen: heller Rand nach unten, dunkler nach oben. So sieht Papier aus, in das etwas eingedrückt wurde. */ .kopf__titel, .aufmacher__titel, .seitentitel { text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(77,15,48,.12); } /* Das Logo wird nirgends umgeschaltet oder umgerechnet – es gibt nur eines, und nur ein Schema, in dem es stehen kann. */ /* ------------------------------------------------------- Der Blogname Mit dem Pinselstift geschrieben statt gesetzt. Die Schrift läuft kleiner als eine Druckschrift derselben Punktzahl – Handschriften haben eine niedrigere x-Höhe. Deshalb der Faktor, sonst steht der Name plötzlich kleiner da als vorher. Kein text-shadow hier: Die geprägte Wirkung passt zu gesetzter Schrift, nicht zu einem Filzstiftstrich. Ein Strich liegt AUF dem Papier, er ist nicht hineingedrückt. Stattdessen ein Hauch Drehung, als hätte jemand schnell unterschrieben. */ .kopf__titel, .kopf__titel a { font-family: "Caveat", "Fraunces", Palatino, Georgia, serif; font-weight: 600; font-size: calc(clamp(1.9rem, 5vw, 2.9rem) * 1.5); letter-spacing: .005em; text-shadow: none; } .kopf__titel { display: inline-block; transform: rotate(-1.2deg); transform-origin: left center; /* Die Drehung rückt die Grundlinie – das holt der Abstand zurück. */ margin-block: .1em .15em; } /* Die Hülle um Wortmarke oder Logo. Sie ist auf der Startseite ein

und sonst ein
– damit jede Seite genau eine Überschrift hat, die sie auch beschreibt. Ein

bringt eigene Maße mit (Schriftgröße, Außenabstand oben und unten); hier soll es nur die Bedeutung beitragen, nicht das Aussehen. Deshalb alles zurück auf null. */ .kopf__marke { margin: 0; font: inherit; font-weight: inherit; } /* Das Logo steht an GENAU DERSELBEN Stelle wie der geschriebene Name – im Blade sind es zwei Zweige desselben @if. Lädt die Redaktion ein Logo hoch, verschwindet die Handschrift. Damit beide Fälle gleich zuhause wirken, bekommt das Logo dieselbe leichte Schräge und einen Schatten, als läge es auf dem Papier. */ .kopf__logo { transform: rotate(-1.2deg); transform-origin: left center; filter: drop-shadow(0 1px 1px rgba(60,40,30,.22)); } /* Hier stand das dunkle Leinen samt Damast. Ausgebaut am 21.10.2026. */ /* ========================================================================= * PLASTISCH: die Dinge, aus denen dieser Blog handelt * ========================================================================= */ /* ------------------------------------------------------------ Der Knopf Kein Rechteck mit Farbe, sondern ein gedrückter Knopf: Verlauf von oben hell nach unten dunkel, eine Lichtkante innen oben, ein Schatten innen unten. Beim Drücken kehrt sich das um – das ist der Teil, den man fühlt, ohne ihn zu benennen. */ .knopf { border: 0; border-radius: 4px; background-image: linear-gradient( color-mix(in srgb, var(--akzent) 82%, #ffffff), var(--akzent) 55%, color-mix(in srgb, var(--akzent) 86%, #000000)); /* * Auch der dunkle Knopf bekommt einen Ring. * * Vorher hatte ihn nur der helle, und beim Draufzeigen machten die beiden * deshalb verschiedene Gesten: der helle bekam eine Umrandung, der lila * wurde bloß etwas dunkler. Gleiche Geste, nur spiegelverkehrt – auf * Dunkel muss der Ring aufhellen, auf Hell abdunkeln, sonst sieht man ihn * nicht. */ box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -2px 4px rgba(0,0,0,.28) inset, 0 0 0 1px color-mix(in srgb, var(--akzent) 58%, #000000), 0 2px 4px rgba(60,40,30,.32); text-shadow: 0 -1px 0 rgba(0,0,0,.35); } .knopf:active { box-shadow: 0 2px 5px rgba(0,0,0,.35) inset, 0 0 0 1.5px color-mix(in srgb, var(--akzent) 48%, #ffffff); transform: translateY(1px); } /* * Der leise Knopf: ein Hornknopf neben dem lackierten. * * Erster Anlauf war eine Steppnaht ringsum – gestrichelt. Das sah nicht nach * Material aus, sondern nach Auswahlmarkierung, so wie ein Platzhalter in * einem Entwurf. Dazu kamen zwei handfeste Fehler: Der Rand machte den Knopf * 41 statt 38 Punkte hoch, also stand er neben dem Hauptknopf schief; und er * war fast so hell wie das Papier, wirkte also eher wie ein Loch. * * Jetzt: kein Rand, sondern ein Ring aus box-shadow – der braucht keinen * Platz, beide Knöpfe bleiben gleich hoch. Der Verlauf geht von fast weiß * oben zu einem Hauch Akzent unten, wie die Wölbung eines Knopfes. Die * Schrift steht in der Akzentfarbe, damit man sieht, dass er anfassbar ist. */ .knopf--leise { border: 0; color: var(--akzent); background-image: linear-gradient( color-mix(in srgb, var(--flaeche) 97%, #ffffff) 0%, color-mix(in srgb, var(--flaeche) 92%, var(--akzent)) 58%, color-mix(in srgb, var(--flaeche) 84%, var(--akzent)) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 3px color-mix(in srgb, var(--akzent) 10%, transparent) inset, 0 0 0 1px color-mix(in srgb, var(--akzent) 30%, var(--papier)), 0 2px 4px rgba(60,40,30,.2); text-shadow: 0 1px 0 rgba(255,255,255,.85); } .knopf--leise:active { box-shadow: 0 2px 4px color-mix(in srgb, var(--akzent) 22%, transparent) inset, 0 0 0 1px color-mix(in srgb, var(--akzent) 34%, var(--papier)); transform: translateY(1px); } /* ------------------------------------------------- Beim Draufzeigen * * Hier war etwas kaputt, und zwar an drei Stellen gleichzeitig. Alle drei * kommen daher, dass blog.css seine Hover-Zustände an Dinge hängt, die * diese Datei ersetzt hat: * * 1. .knopf:hover setzt die KURZFORM background. Die Kurzform * setzt background-image auf none – beim Draufzeigen verschwand also * die Wölbung, und der Knopf wurde schlagartig flach. * 2. .knopf--leise:hover ändert border-color. Der Rand ist hier aber * kein Rand mehr, sondern ein Ring aus box-shadow (damit beide Knöpfe * gleich hoch bleiben) – es passierte also gar nichts. * 3. .schlagwort:hover ebenso. * * Deshalb werden die Zustände hier noch einmal gesetzt, mit demselben * Mittel wie der Ruhezustand. */ /* Dieselbe Geste wie beim hellen Knopf: der Ring wird deutlicher und nimmt die 1,5 Punkte an, und der Schatten wächst mit. */ .knopf:hover { background-image: linear-gradient( color-mix(in srgb, var(--akzent) 72%, #ffffff), color-mix(in srgb, var(--akzent) 82%, var(--text)) 55%, color-mix(in srgb, var(--akzent) 70%, #000000)); box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 -2px 4px rgba(0,0,0,.3) inset, 0 0 0 1.5px color-mix(in srgb, var(--akzent) 42%, #ffffff), 0 3px 6px rgba(60,40,30,.38); } .knopf:focus-visible { background-image: linear-gradient( color-mix(in srgb, var(--akzent) 74%, #ffffff), color-mix(in srgb, var(--akzent) 84%, var(--text)) 55%, color-mix(in srgb, var(--akzent) 72%, #000000)); } .knopf--leise:hover { background-image: linear-gradient( color-mix(in srgb, var(--flaeche) 99%, #ffffff) 0%, color-mix(in srgb, var(--flaeche) 88%, var(--akzent)) 58%, color-mix(in srgb, var(--flaeche) 78%, var(--akzent)) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 3px color-mix(in srgb, var(--akzent) 14%, transparent) inset, 0 0 0 1.5px var(--akzent), 0 3px 6px rgba(60,40,30,.26); } /* Beim Draufzeigen wird das Label kräftiger – ein Ring ginge nicht, den würde die Maske anknabbern. */ .schlagwort:hover { color: var(--flaeche); background-image: linear-gradient( color-mix(in srgb, var(--akzent-zwei) 78%, var(--flaeche)), var(--akzent-zwei)); } /* Die Karte hebt sich schon in blog.css um zwei Punkte an. Jetzt wirft sie dabei auch einen längeren Schatten – sonst schwebt sie ohne Grund. */ .karte { transition: transform .15s ease, box-shadow .15s ease; } .karte:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.05) inset, 0 4px 8px rgba(60,40,30,.16), 0 16px 28px -14px rgba(60,40,30,.32); } /* ---------------------------------------------------------- Das Maßband Holz statt Linie. Die Teilstriche aus blog.css bleiben – hier kommt nur der warme Grund darunter und eine eingedrückte Kante dazu. Deshalb wird background-image NICHT angefasst; sonst wären die Striche weg. */ .massband { background-color: #efdfc2; border-top-color: color-mix(in srgb, var(--akzent) 55%, #6b4a2a); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 4px rgba(120,80,40,.22) inset, 0 1px 2px rgba(60,40,30,.18); } /* Die Kennzahlen eines Beitrags sind das Lineal, an dem man abliest. */ .kennzahlen { padding: .55rem .85rem; border-radius: 3px; background-color: var(--pergament); background-image: repeating-linear-gradient(90deg, rgba(120,90,50,.34) 0 1px, transparent 1px 12px); box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 -2px 4px rgba(120,80,40,.2) inset, 0 1px 3px rgba(60,40,30,.2); } .kennzahl { color: #6a553f; } /* * Die kleine Beschriftung über der Zahl braucht ihre eigene Farbe. * * blog.css gibt ihr --tinte-60, und das ist aus Text und PAPIER gemischt. * Auf dem Papier stimmt das auch. Hier liegt sie aber auf dem Pergamentband * (#f3e5c9), und dagegen kam sie nur auf 4,43 : 1 – bei 10,9 Punkten * Schriftgröße zu wenig, verlangt sind 4,5. Nachgemessen am 21.10.2026 auf * allen sechs Beitragsseiten; es war der einzige Kontrastfehler, der übrig * blieb. * * Also hier mit dem Band mischen statt mit dem Papier: 90 % ergibt * 5,46 : 1 und sieht unverändert zurückhaltend aus. */ .kennzahl dt { color: color-mix(in srgb, var(--text) 90%, var(--pergament)); } /* -------------------------------------------------------- Fotopapier Bilder bekommen einen weißen Rand und einen schwachen Schatten nach innen – dann liegen sie auf der Seite, statt in sie geschnitten zu sein. */ .karte__bild, .aufmacher__bild, .beitrag__bild, .album__bild, .produkt__bild { border-radius: 2px; /* Der weiße Rand ist die Fläche der Seite – dadurch stimmt er in beiden Schemata, ohne zweite Regel. */ box-shadow: 0 0 0 4px var(--flaeche), 0 1px 2px rgba(60,40,30,.22), 0 8px 18px -10px rgba(60,40,30,.35); } /* ------------------------------------------------------ Der Zettel Angesteckt statt eingerahmt: Papierverlauf, ein Hauch Drehung und oben eine Nadel. Die Drehung ist bewusst winzig – ein deutlich schiefer Kasten mitten im Text liest sich schlecht. */ .hinweis { position: relative; border-left: 0; border-radius: 3px; padding-top: 1.15rem; /* Ein Hauch Gelb in die Fläche gemischt – dann ist es Notizpapier, und zwar in beiden Schemata. */ background-image: linear-gradient( color-mix(in srgb, var(--flaeche) 88%, #f0d389), color-mix(in srgb, var(--flaeche) 80%, #e8c87a)); transform: rotate(-.35deg); box-shadow: 0 2px 6px rgba(60,40,30,.18), 0 12px 20px -16px rgba(60,40,30,.4); } /* Die Nadel sitzt auf ::after, nicht auf ::before. * * Sie hatte ::before, und weiter unten legte das Herzband derselben * Stelle Breite, Hoehe und ein Hintergrundbild auf. Zwei Regeln, ein * Pseudoelement: Es blieb bei position:absolute; left:50%; top:6px aus * dieser Regel, bekam aber 288 mal 30 Punkte und das Band als Bild. Das * Ergebnis lag quer ueber der ersten Zeile und ragte rechts aus dem * Zettel heraus - auf jeder Seite mit einem Hinweis, im Blog wie auf den * Anmeldemasken. Getrennte Pseudoelemente, getrennte Aufgaben. */ .hinweis::after { content: ""; position: absolute; left: 50%; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9566a, #8e2436); box-shadow: 0 1px 2px rgba(0,0,0,.45); } .hinweis--warnung::after { background: radial-gradient(circle at 35% 30%, #e0a04a, #a2601a); } /* ----------------------------------------------------- Das Stofflabel Schlagworte sind eingenähte Labels: weicher Grund, Steppnaht, ein Schatten, als läge der Streifen auf. */ /* * Das Label muss sich vom Tuch abheben. * * Erste Fassung lag mit ihrem fast weißen Verlauf so dicht am Papier, dass * man sie über dem Damast kaum fand – drei Schlagworte sahen aus wie drei * Kratzer. Jetzt: ein Hauch Akzent im Grund, ein deutlicher Ring, und 0,78 * statt 0,72 rem. Unter zwölf Punkten wird Schrift auf gemustertem Grund * ohnehin schwer lesbar. */ .schlagwort { /* * DIE ZACKENSCHERE GEHÖRT AN DEN RAND, NICHT ÜBER DIE FLÄCHE. * * blog.css legt auf das Label eine Maske: * mask-image: radial-gradient(circle at 4px 4px, transparent 4px, #000 0); * mask-size: 8px 8px; * Gemeint ist ein gezackter Rand, wie mit der Zackenschere geschnitten. * Tatsächlich wird die Maske über die GANZE Fläche gekachelt, und eine * Maske wirkt auf alles im Element – auch auf die Schrift. Auf einem * 96x29 großen Label sind das 48 ausgestanzte Löcher quer durch die * Buchstaben. * * Aufgefallen ist es bisher nicht, weil --sandton fast Papierfarbe hat; * die Löcher waren praktisch unsichtbar. Mit einem kräftigeren Grund * sieht man sie sofort – die Schlagworte wirkten „wie mit Punkten * überdeckt". * * Hier wird die Maske deshalb aus drei Lagen zusammengesetzt: oben und * unten je ein gezackter Streifen, dazwischen durchgehend deckend. Die * Lagen vereinigen sich, der Rand bleibt gezackt, die Schrift bleibt * heil. */ --zacke: 4px; mask-image: radial-gradient(circle at var(--zacke) var(--zacke), transparent var(--zacke), #000 0), radial-gradient(circle at var(--zacke) var(--zacke), transparent var(--zacke), #000 0), linear-gradient(#000, #000); mask-size: calc(var(--zacke) * 2) calc(var(--zacke) * 2), calc(var(--zacke) * 2) calc(var(--zacke) * 2), 100% calc(100% - var(--zacke) * 2); mask-position: calc(var(--zacke) * -1) top, calc(var(--zacke) * -1) bottom, 0 var(--zacke); mask-repeat: repeat-x, repeat-x, no-repeat; border: 0; border-radius: 0; font-size: 0.78rem; /* Oben und unten so viel Luft, dass die Zacken die Schrift nicht erreichen: der Zahn ist --zacke hoch. */ padding: calc(var(--zacke) + 0.18rem) 0.7rem; /* Kein Ring aus box-shadow: Den würde die Maske mit ausstanzen. Die Kontur macht hier der kräftigere Grund. */ background-image: linear-gradient( color-mix(in srgb, var(--akzent) 10%, var(--flaeche)), color-mix(in srgb, var(--akzent) 20%, var(--flaeche))); box-shadow: none; position: relative; } /* * KEINE Steppnaht auf dem Label. * * Erst hatte es eine, wie die Karten. Auf einem 88x27 großen Schildchen * blieben damit 1,8 Punkte Luft zwischen Naht und Schrift – die gestrichelte * Linie saß praktisch auf den Buchstaben, und aus drei Schlagworten wurde * ein Gekritzel. Andeuten heißt auch: weglassen, wo kein Platz ist. Der * Ring und der Verlauf reichen völlig. */ /* ------------------------------------------------------- Der Anhänger Die Downloadzeile als Papieranhänger mit gestanztem Loch. */ .download { position: relative; border-left: 0; border-radius: 3px; padding-left: 2.2rem; background-image: linear-gradient( color-mix(in srgb, var(--flaeche) 94%, #ffffff), color-mix(in srgb, var(--flaeche) 86%, #d8bb7a)); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 3px rgba(60,40,30,.2); } .download::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--papier); box-shadow: 0 1px 1px rgba(0,0,0,.35) inset, 0 0 0 1px rgba(60,40,30,.25); } /* --------------------------------------------------- Eingedrückte Felder Eingaben sehen aus, als wäre etwas hineingedrückt: Schatten oben innen, Lichtkante unten. Genau umgekehrt zum Knopf. */ .suche__formular input, .code-eingabe, .masshelfer__eingaben input { border-radius: 3px; background-image: linear-gradient( color-mix(in srgb, var(--flaeche) 88%, #000000), var(--flaeche) 60%); box-shadow: 0 2px 4px rgba(60,40,30,.18) inset, 0 1px 0 rgba(255,255,255,.9); } /* ------------------------------------------------------- Die Naht Absatztrenner im Fließtext: eine Steppnaht mit einer kleinen Triquetra in der Mitte. Damit kommt das keltische Thema auch zwischen den Absätzen vor und nicht nur an der Kante. */ .fliesstext hr, .rechtstext hr { height: 40px; border: 0; background-color: transparent; /* Nur die Zier in der Mitte. Hier lag zusätzlich ein linear-gradient, der einen 2 Punkte breiten senkrechten Strich links daneben zeichnete – ein Rest aus einem früheren Entwurf, der auf der Beitragsseite als einzelner Strich neben dem Zeichen stand. Die gestrichelten Linien machen ::before und ::after. */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22trif0%22%3E%3Ccircle%20cx%3D%2229.86%22%20cy%3D%2219.24%22%20r%3D%224.65%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22trif1%22%3E%3Ccircle%20cx%3D%2213.17%22%20cy%3D%2228.88%22%20r%3D%228.68%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22trif2%22%3E%3Ccircle%20cx%3D%2226.83%22%20cy%3D%2228.88%22%20r%3D%228.68%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22trif3%22%3E%3Ccircle%20cx%3D%2210.14%22%20cy%3D%2219.24%22%20r%3D%224.65%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22trif4%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2236.33%22%20r%3D%224.65%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22trif5%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2217.05%22%20r%3D%228.68%22%2F%3E%3C%2FclipPath%3E%3Cpath%20id%3D%22trip0%22%20d%3D%22M20%2034.12L20.57%2033.88L21.14%2033.62L21.69%2033.34L22.23%2033.03L22.76%2032.71L23.27%2032.36L23.77%2032L24.26%2031.61L24.73%2031.2L25.18%2030.78L25.61%2030.34L26.03%2029.88L26.43%2029.41L26.81%2028.92L27.17%2028.41L27.51%2027.89L27.83%2027.36L28.12%2026.81L28.4%2026.26L28.65%2025.69L28.88%2025.12L29.09%2024.53L29.27%2023.94L29.43%2023.34L29.56%2022.73L29.68%2022.12L29.76%2021.51L29.82%2020.89L29.86%2020.27L29.87%2019.65L29.86%2019.03L29.82%2018.42L29.76%2017.8L29.68%2017.18L29.56%2016.57L29.43%2015.97L29.27%2015.37L29.09%2014.78L28.88%2014.19L28.65%2013.62L28.4%2013.05L28.12%2012.49L27.83%2011.95L27.51%2011.42L27.17%2010.9L26.81%2010.39L26.43%209.9L26.03%209.43L25.61%208.97L25.18%208.53L24.73%208.1L24.26%207.7L23.77%207.31L23.27%206.95L22.76%206.6L22.23%206.27L21.69%205.97L21.14%205.69L20.57%205.43L20%205.19L19.43%205.43L18.86%205.69L18.31%205.97L17.77%206.27L17.24%206.6L16.73%206.95L16.23%207.31L15.74%207.7L15.27%208.1L14.82%208.53L14.39%208.97L13.97%209.43L13.57%209.9L13.19%2010.39L12.83%2010.9L12.49%2011.42L12.17%2011.95L11.88%2012.49L11.6%2013.05L11.35%2013.62L11.12%2014.19L10.91%2014.78L10.73%2015.37L10.57%2015.97L10.44%2016.57L10.32%2017.18L10.24%2017.8L10.18%2018.42L10.14%2019.03L10.13%2019.65L10.14%2020.27L10.18%2020.89L10.24%2021.51L10.32%2022.12L10.44%2022.73L10.57%2023.34L10.73%2023.94L10.91%2024.53L11.12%2025.12L11.35%2025.69L11.6%2026.26L11.88%2026.81L12.17%2027.36L12.49%2027.89L12.83%2028.41L13.19%2028.92L13.57%2029.41L13.97%2029.88L14.39%2030.34L14.82%2030.78L15.27%2031.2L15.74%2031.61L16.23%2032L16.73%2032.36L17.24%2032.71L17.77%2033.03L18.31%2033.34L18.86%2033.62L19.43%2033.88Z%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cmask%20id%3D%22trim0%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-40%22%20y%3D%22-40%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Crect%20x%3D%22-40%22%20y%3D%22-40%22%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20clip-path%3D%22url(%23trif0)%22%3E%3Cpath%20d%3D%22M34.49%2023.61L34.13%2023.1L33.74%2022.62L33.34%2022.15L32.92%2021.69L32.48%2021.25L32.02%2020.83L31.55%2020.43L31.06%2020.05L30.56%2019.69L30.04%2019.35L29.51%2019.03L28.97%2018.73L28.41%2018.45L27.85%2018.2L27.27%2017.96L26.69%2017.75L26.1%2017.57L25.5%2017.41L24.89%2017.27L24.28%2017.16L23.67%2017.07%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23trif1)%22%3E%3Cpath%20d%3D%22M16.35%2017.91L15.77%2018.14L15.2%2018.39L14.65%2018.66L14.1%2018.96L13.57%2019.27L13.05%2019.61L12.54%2019.97L12.05%2020.35L11.97%2020.96L11.91%2021.58L11.88%2022.2L11.87%2022.82L11.89%2023.44L11.93%2024.06L12%2024.67L12.09%2025.29L12.21%2025.89L12.35%2026.5L12.51%2027.1L12.7%2027.69L12.91%2028.27L13.15%2028.84L13.41%2029.41L13.69%2029.96L13.99%2030.5L14.31%2031.03L14.66%2031.55L15.02%2032.05L15.4%2032.54L15.81%2033.01L16.23%2033.46L16.67%2033.9L17.12%2034.32L17.6%2034.72L18.09%2035.1L18.59%2035.46L19.11%2035.81L19.64%2036.13L20.18%2036.43L20.74%2036.7L21.3%2036.96%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cpath%20id%3D%22trip1%22%20d%3D%22M12.05%2020.35L11.97%2020.96L11.91%2021.58L11.88%2022.2L11.87%2022.82L11.89%2023.44L11.93%2024.06L12%2024.67L12.09%2025.29L12.21%2025.89L12.35%2026.5L12.51%2027.1L12.7%2027.69L12.91%2028.27L13.15%2028.84L13.41%2029.41L13.69%2029.96L13.99%2030.5L14.31%2031.03L14.66%2031.55L15.02%2032.05L15.4%2032.54L15.81%2033.01L16.23%2033.46L16.67%2033.9L17.12%2034.32L17.6%2034.72L18.09%2035.1L18.59%2035.46L19.11%2035.81L19.64%2036.13L20.18%2036.43L20.74%2036.7L21.3%2036.96L21.88%2037.19L22.46%2037.4L23.05%2037.59L23.65%2037.75L24.25%2037.89L24.86%2038L25.48%2038.09L26.09%2038.15L26.71%2038.19L27.33%2038.21L27.95%2038.2L28.57%2038.16L29.19%2038.1L29.8%2038.02L30.41%2037.91L31.02%2037.78L31.62%2037.62L32.21%2037.44L32.8%2037.24L33.38%2037.01L33.94%2036.76L34.5%2036.49L35.05%2036.2L35.58%2035.88L36.1%2035.54L36.61%2035.19L37.1%2034.81L37.18%2034.19L37.24%2033.58L37.27%2032.96L37.28%2032.34L37.26%2031.72L37.21%2031.1L37.15%2030.48L37.06%2029.87L36.94%2029.26L36.8%2028.66L36.63%2028.06L36.45%2027.47L36.23%2026.88L36%2026.31L35.74%2025.75L35.46%2025.19L35.16%2024.65L34.84%2024.12L34.49%2023.61L34.13%2023.1L33.74%2022.62L33.34%2022.15L32.92%2021.69L32.48%2021.25L32.02%2020.83L31.55%2020.43L31.06%2020.05L30.56%2019.69L30.04%2019.35L29.51%2019.03L28.97%2018.73L28.41%2018.45L27.85%2018.2L27.27%2017.96L26.69%2017.75L26.1%2017.57L25.5%2017.41L24.89%2017.27L24.28%2017.16L23.67%2017.07L23.05%2017L22.44%2016.96L21.82%2016.95L21.2%2016.96L20.58%2016.99L19.96%2017.05L19.34%2017.13L18.73%2017.24L18.13%2017.37L17.53%2017.53L16.93%2017.71L16.35%2017.91L15.77%2018.14L15.2%2018.39L14.65%2018.66L14.1%2018.96L13.57%2019.27L13.05%2019.61L12.54%2019.97Z%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cmask%20id%3D%22trim1%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-40%22%20y%3D%22-40%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Crect%20x%3D%22-40%22%20y%3D%22-40%22%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20clip-path%3D%22url(%23trif4)%22%3E%3Cpath%20d%3D%22M13.91%2038.15L14.52%2038.09L15.14%2038L15.75%2037.89L16.35%2037.75L16.95%2037.59L17.54%2037.4L18.12%2037.19L18.7%2036.96L19.26%2036.7L19.82%2036.43L20.36%2036.13L20.89%2035.81L21.41%2035.46L21.91%2035.1L22.4%2034.72L22.88%2034.32L23.33%2033.9L23.77%2033.46L24.19%2033.01L24.6%2032.54L24.98%2032.05%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23trif5)%22%3E%3Cpath%20d%3D%22M27.91%2025.29L28%2024.67L28.07%2024.06L28.11%2023.44L28.13%2022.82L28.12%2022.2L28.09%2021.58L28.03%2020.96L27.95%2020.35L27.46%2019.97L26.95%2019.61L26.43%2019.27L25.9%2018.96L25.35%2018.66L24.8%2018.39L24.23%2018.14L23.65%2017.91L23.07%2017.71L22.47%2017.53L21.87%2017.37L21.27%2017.24L20.66%2017.13L20.04%2017.05L19.42%2016.99L18.8%2016.96L18.18%2016.95L17.56%2016.96L16.95%2017L16.33%2017.07L15.72%2017.16L15.11%2017.27L14.5%2017.41L13.9%2017.57L13.31%2017.75L12.73%2017.96L12.15%2018.2L11.59%2018.45L11.03%2018.73L10.49%2019.03L9.96%2019.35L9.44%2019.69L8.94%2020.05%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cpath%20id%3D%22trip2%22%20d%3D%22M27.95%2020.35L27.46%2019.97L26.95%2019.61L26.43%2019.27L25.9%2018.96L25.35%2018.66L24.8%2018.39L24.23%2018.14L23.65%2017.91L23.07%2017.71L22.47%2017.53L21.87%2017.37L21.27%2017.24L20.66%2017.13L20.04%2017.05L19.42%2016.99L18.8%2016.96L18.18%2016.95L17.56%2016.96L16.95%2017L16.33%2017.07L15.72%2017.16L15.11%2017.27L14.5%2017.41L13.9%2017.57L13.31%2017.75L12.73%2017.96L12.15%2018.2L11.59%2018.45L11.03%2018.73L10.49%2019.03L9.96%2019.35L9.44%2019.69L8.94%2020.05L8.45%2020.43L7.98%2020.83L7.52%2021.25L7.08%2021.69L6.66%2022.15L6.26%2022.62L5.87%2023.1L5.51%2023.61L5.16%2024.12L4.84%2024.65L4.54%2025.19L4.26%2025.75L4%2026.31L3.77%2026.88L3.55%2027.47L3.37%2028.06L3.2%2028.66L3.06%2029.26L2.94%2029.87L2.85%2030.48L2.79%2031.1L2.74%2031.72L2.72%2032.34L2.73%2032.96L2.76%2033.58L2.82%2034.19L2.9%2034.81L3.39%2035.19L3.9%2035.54L4.42%2035.88L4.95%2036.2L5.5%2036.49L6.06%2036.76L6.62%2037.01L7.2%2037.24L7.79%2037.44L8.38%2037.62L8.98%2037.78L9.59%2037.91L10.2%2038.02L10.81%2038.1L11.43%2038.16L12.05%2038.2L12.67%2038.21L13.29%2038.19L13.91%2038.15L14.52%2038.09L15.14%2038L15.75%2037.89L16.35%2037.75L16.95%2037.59L17.54%2037.4L18.12%2037.19L18.7%2036.96L19.26%2036.7L19.82%2036.43L20.36%2036.13L20.89%2035.81L21.41%2035.46L21.91%2035.1L22.4%2034.72L22.88%2034.32L23.33%2033.9L23.77%2033.46L24.19%2033.01L24.6%2032.54L24.98%2032.05L25.34%2031.55L25.69%2031.03L26.01%2030.5L26.31%2029.96L26.59%2029.41L26.85%2028.84L27.09%2028.27L27.3%2027.69L27.49%2027.1L27.65%2026.5L27.79%2025.89L27.91%2025.29L28%2024.67L28.07%2024.06L28.11%2023.44L28.13%2022.82L28.12%2022.2L28.09%2021.58L28.03%2020.96Z%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cmask%20id%3D%22trim2%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-40%22%20y%3D%22-40%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Crect%20x%3D%22-40%22%20y%3D%22-40%22%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20clip-path%3D%22url(%23trif2)%22%3E%3Cpath%20d%3D%22M15.74%2031.61L16.23%2032L16.73%2032.36L17.24%2032.71L17.77%2033.03L18.31%2033.34L18.86%2033.62L19.43%2033.88L20%2034.12L20.57%2033.88L21.14%2033.62L21.69%2033.34L22.23%2033.03L22.76%2032.71L23.27%2032.36L23.77%2032L24.26%2031.61L24.73%2031.2L25.18%2030.78L25.61%2030.34L26.03%2029.88L26.43%2029.41L26.81%2028.92L27.17%2028.41L27.51%2027.89L27.83%2027.36L28.12%2026.81L28.4%2026.26L28.65%2025.69L28.88%2025.12L29.09%2024.53L29.27%2023.94L29.43%2023.34L29.56%2022.73L29.68%2022.12L29.76%2021.51L29.82%2020.89L29.86%2020.27L29.87%2019.65L29.86%2019.03L29.82%2018.42L29.76%2017.8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23trif3)%22%3E%3Cpath%20d%3D%22M11.6%2013.05L11.35%2013.62L11.12%2014.19L10.91%2014.78L10.73%2015.37L10.57%2015.97L10.44%2016.57L10.32%2017.18L10.24%2017.8L10.18%2018.42L10.14%2019.03L10.13%2019.65L10.14%2020.27L10.18%2020.89L10.24%2021.51L10.32%2022.12L10.44%2022.73L10.57%2023.34L10.73%2023.94L10.91%2024.53L11.12%2025.12L11.35%2025.69%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%220.72%22%3E%3Cg%20mask%3D%22url(%23trim0)%22%3E%3Cuse%20href%3D%22%23trip0%22%20stroke%3D%22%23230716%22%20stroke-width%3D%223.4%22%2F%3E%3Cuse%20href%3D%22%23trip0%22%20stroke%3D%22%234d0f30%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20mask%3D%22url(%23trim1)%22%3E%3Cuse%20href%3D%22%23trip1%22%20stroke%3D%22%23230716%22%20stroke-width%3D%223.4%22%2F%3E%3Cuse%20href%3D%22%23trip1%22%20stroke%3D%22%234d0f30%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20mask%3D%22url(%23trim2)%22%3E%3Cuse%20href%3D%22%23trip2%22%20stroke%3D%22%23230716%22%20stroke-width%3D%223.4%22%2F%3E%3Cuse%20href%3D%22%23trip2%22%20stroke%3D%22%234d0f30%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; margin-block: 2.2rem; position: relative; } .fliesstext hr::before, .fliesstext hr::after, .rechtstext hr::before, .rechtstext hr::after { content: ""; position: absolute; top: 50%; width: calc(50% - 38px); height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--text) 32%, var(--papier)); } .fliesstext hr::before, .rechtstext hr::before { left: 0; } .fliesstext hr::after, .rechtstext hr::after { right: 0; } /* -------------------------------------------------- Die aktive Rubrik Unterstrichen mit einer Steppnaht statt mit einem Strich. */ .rubrik[aria-current="true"] { border-bottom-style: dashed; border-bottom-width: 2px; } /* --------------------------------------------- Der Punkt vor dem Kicker Ein Perlmuttknopf im Kleinformat. */ .kicker__punkt { background-image: radial-gradient(circle at 36% 30%, #fffdf8, currentColor 70%); box-shadow: 0 1px 1px rgba(60,40,30,.35); } /* ------------------------------------------------------ Die Fehlerseite Die große Nummer geprägt statt nur blass. */ .fehlerseite__nummer { color: color-mix(in srgb, var(--akzent) 22%, var(--papier)); text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(77,15,48,.14); } /* =========================================================================== * FEINSCHLIFF – aus der Durchsicht am vollen Blog * =========================================================================== * * Alles hier geht auf etwas zurück, das beim Ansehen der gefüllten Seite * aufgefallen ist. Die Begründung steht jeweils dabei; ohne sie wäre es * Geschmack, und Geschmack lässt sich nicht nachvollziehen. */ /* ---------------------------------------------------- Ein ruhiges Lesefeld * * Die Tischdecke lief bisher unter dem Text durch. Bei voller Breite waren * acht Damastrosetten gleichzeitig hinter einem Absatz zu sehen – hübsch, * aber unruhig zu lesen. * * Jetzt liegt der Inhalt auf einem Blatt, und das Tuch RAHMT ihn. Das ist * auch die ehrlichere Metapher: ein Blatt Papier auf der Tischdecke. * Kopfbereich und Fußzeile bleiben bewusst draußen, damit Band und Saum * weiterhin über die ganze Breite laufen. */ main { /* * Auf MAIN, nicht auf .huelle: Die Startseite hat eine .huelle direkt * unter main, die Beitragsseite deren zwei innerhalb des Artikels. Auf * .huelle gesetzt gäbe das dort zwei Blätter übereinander mit einer * Fuge dazwischen. main gibt es auf jeder Seite genau einmal. */ display: block; max-width: calc(var(--breite) + 5rem); margin-inline: auto; padding-block: clamp(1.25rem, 2.5vw, 2.25rem); background: color-mix(in srgb, var(--flaeche) 88%, transparent); border-radius: 6px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 10px rgba(60,40,30,.10), 0 24px 48px -32px rgba(60,40,30,.22); } /* ------------------------------------------- Auf schmalen Geräten * * Bei 375 Punkten brach die Rubrikenzeile ungünstig: „Alles Nähtagebuch" * nebeneinander, dann „Probenähen & Designnähen" allein, am Ende „Album" * als Waise. Der Grund sind sehr unterschiedlich lange Namen in einer * umbrechenden Zeile – da entscheidet die Zufälligkeit der Längen, wo * Lücken entstehen. * * Auf dem Telefon wird daraus eine waagerecht wischbare Reihe. Das ist * aus Apps vertraut, hält die Rangfolge der Rubriken als EINE Zeile * zusammen und spart im Kopfbereich drei Zeilen Höhe. */ /* =========================================================================== * DAUMENMASS AUF TASTGERÄTEN * =========================================================================== * * Mit der Maus trifft man 18 Punkte, mit dem Daumen nicht. Gemessen auf * 375 Punkten Breite waren es: Rubriken 37, Schlagworte 32, Knöpfe 38, * Fußzeilenverweise 18, Dateiverweise 26. Verlangt sind 44. * * Die Regel gilt nur dort, wo wirklich getippt wird – an einem Zeigegerät * bliebe die Seite sonst unnötig luftig. (pointer: coarse) fängt auch * Tablets, die breiter als 860 Punkte sind. * * Nicht angefasst: Verweise MITTEN IM TEXT. Sie sind Teil eines Satzes, * kein Bedienelement; ihnen 44 Punkte zu geben, risse den Absatz * auseinander. Ebenso der Sprungverweis „Zum Inhalt springen" – der ist * 1x1 und wird erst beim Hineinspringen sichtbar, das ist Absicht. */ @media (max-width: 860px), (pointer: coarse) { .rubrik, /* Plus und Minus am Portionsrechner: 32 Punkte, gemessen am 21.10.2026 - sie waren nie aufgefallen, weil der Rechner wegen falscher Testdaten gar nicht erschien. */ .rechner__knopf, /* "Weiter" und "Zurueck" zwischen den Seiten: 30 Punkte. Auch die fielen erst mit echten Inhalten auf - im Testbestand gab es nie eine zweite Seite, also auch nie einen Blaetterverweis. */ .blaettern__zu, .aufmacher__titel a, .karte__titel a, .suchtreffer > li > a, .artfilter a, .album__filter a, .schlagwort, .kicker a, .knopf, .fuss nav a, .downloads a, .fehlerseite__wege a, .wetter__schalter, .katze__weiter, .katze__schlaf { display: inline-flex; align-items: center; min-height: 44px; } /* Plus und Minus sind rund und tragen EIN Zeichen. Bei ihnen reicht die Höhe nicht: Sie blieben 32 Punkte breit, weil kein Text sie auseinanderzieht. Ein Daumen trifft aber eine Fläche, keine Säule. Bei den übrigen oben zieht die Beschriftung die Breite von selbst über 44 Punkte. */ .rechner__knopf { min-width: 44px; justify-content: center; } /* Die Fußzeilenverweise stehen dicht untereinander – ohne etwas Luft dazwischen berühren sich die vergrößerten Flächen. MITTIG: Die Fußzeile ist auf schmalen Geräten zentriert, der Verweisblock war es nicht mehr – aus display:flex wird text-align nicht mehr geerbt, die letzte Zeile klebte links. */ .fuss nav { display: flex; flex-wrap: wrap; gap: 0 1.2rem; justify-content: center; } } /* Auf breiten Schirmen steht die Zeile wieder auseinandergezogen, und der Verweisblock schließt rechts ab. */ @media (min-width: 861px) and (pointer: fine) { .fuss nav { justify-content: flex-end; } } /* ---------------------------------------------- Dass es weitergeht * * Die Rubrikzeile ist auf dem Telefon 959 Punkte lang und 375 sichtbar – * fast zwei Drittel liegen rechts außerhalb. Ohne Hinweis sieht man eine * abgeschnittene Zeile und hält sie für vollständig. Ein weicher Verlauf * am rechten Rand sagt: Da kommt noch etwas. * * Der Verlauf sitzt am