/* ================================================================== Sektor 7 Blog -- Designsprache als CSS-Grundlage Stand: Relief Forte in der Linktree-Glas-Fassung (v0.5.0, 25.08.2026), Verfeinerungsrunde nach Leons Mockup-Vergleich am 26.08.2026 (Kopfzeile, quadratische Bildfelder, Kopfzonen-Vignette, Autor-Popover, Seitenleisten-Mockup-Optik, kein Kartendruck mehr), danach der Schema-Durchgang gegen die kanonische Designsprache (docs/superpowers/specs/2026-08-26-designsprache-relief-memory.md): K.I.T.T.-Scanner, kanonische Glaskarten-Werte, Trenner-Rezept, Gummidruck-Normwerte, Fusszeilen-Sockel. Zuletzt die offenen Punkte 1-3 vom 26.08.2026: Scanner mit stehendem Traeger in Textbreite, Aufmacher-Bild vollflaechig im formatgetreuen Feld (--s7b-bv), Rasterkarten und Grundverlauf im Mockup-Mass. Spec: docs/superpowers/specs/2026-08-25-relief-forte-redesign.md, exakte Werte: 2026-08-25-linktree-designwerte.md, verbindliche Optik: 2026-08-25-mockup-relief-forte.html. Diese Datei ist HANDGESCHRIEBEN und die einzige Quelle fuer das Frontend-Aussehen. Im Linktree ist genau das schiefgegangen: linktree.css ist erzeugt, jede Handaenderung darin war beim naechsten Lauf weg. Hier gibt es keine erzeugte Zweitdatei -- was hier steht, gilt. Alle Werte stammen aus dem abgenommenen Relief-Forte-Mockup und sind aus sektor7-linktree/assets/css/linktree-extra.css WORTGLEICH uebernommen, nicht nachempfunden. Der Grund steht in der Herkunftszeile an jedem Baustein: zwei Mulden nebeneinander, die sich in der Tiefe um einen Hauch unterscheiden, faellt sofort auf -- im Linktree schon passiert. Deshalb liegen Relief und Flaechen als TOKEN vor und nicht als abgeschriebene Schattenlisten an jedem Baustein. Ein Token kann nicht auseinanderlaufen; eine Kopie schon. Aufbau -- erst die Bausteine, dann das Layout: 1. Token hell 2. Relief-Karte .s7b-karte (jetzt Glas) 3. Mulde .s7b-mulde 4. Pille .s7b-pille (+ Schiene, Gleiter, Zwilling) 5. Druckknopf .s7b-knopf (+ wandernde Randlinie) 6. Glanzstreifen .s7b-glanz 6b. Buehne .s7b-buehne (Hochkantbilder) 6c. Kicker+Avatar .s7b-kicker, .s7b-avatar 6d. Themenschalter .s7b-thema-* 6e. K.I.T.T.-Scanner unter den Ueberschriften 7. Dunkelschema [data-s7-thema="dunkel"] 8. Wurzel .s7b -- traegt die Token aus 1 8b. Grund+Wolken .s7b-bg, .s7b-bg-wolke (+ Kopfzonen-Vignette) 8c. Kopfzeile .s7b-kopfzeile, .s7b-logo, .s7b-kopfnav 9. Uebersicht Filter (+ Label), Raster, Aufmacher, Nachladen 10. Artikelseite Krumen, Meta (+ Autor-Popover), Kuerze, Inhalt 11. Seitenleiste Newsletter, Verwandtes, Teilen, Autor-Zitat 11b. Fusszeile .s7b-fusszeile, Glas-Sockel mit Chips 12. Bewegung aus prefers-reduced-motion 13. Feinschliff letzte Nachtraege fuer breite Schirme Mobil zuerst: der Grundzustand ist fuer 430x724 gebaut (Instagram- In-App-Browser, Leons wichtigster Kanal). Die Verbreiterungen stehen als min-width-Nachtrag jeweils DIREKT bei ihrem Baustein -- so sieht man beim Lesen einer Komponente sofort, was mit ihr auf dem Rechner passiert. Nur ASCII in den Kommentaren -- dieselbe Regel wie in PHP und JS, damit keine Datei je an einer Zeichensatz-Umstellung haengt. ================================================================== */ /* ------------------------------------------------------------------ 1. Token -- Tageslicht Warum ueberhaupt Token: siehe Kopf. Sie sitzen auf .s7b, damit der Blog auch INNERHALB des Linktree laufen kann, ohne dessen Werte zu ueberschreiben. Der Akzent wird geerbt, wenn er da ist (--s7-accent steht im Linktree als Inline-Stil am Wurzel-Div), sonst greift der Werkswert. ------------------------------------------------------------------ */ .s7b { /* Akzent: Rot bleibt Rot, hell wie dunkel. */ --s7b-akzent: var(--s7-accent, #c40000); --s7b-akzent-tief: var(--s7-accent-deep, #a80000); /* * Roter TEXT auf getoenten Flaechen (Primaerknopf, Pille): der pure * Akzent kaeme auf der 26-%-Mischung nicht auf 4,5:1. Richtung * #7f0000 abgedunkelt traegt er AA; im Dunkeln Richtung #ff8a8a * aufgehellt (Werte aus der Spec). */ --s7b-akzent-stark: #7f0000; /* * Schrift. Archivo (Versalien-Titel, 700/800) plus Instrument Sans * (Fliesstext) -- die Fonts selbst laedt S7B_Render::assets() ueber * Google Fonts (Aufgabe R3), hier stehen nur die Stacks mit echten * Rueckfaellen. */ --s7b-schrift: "Instrument Sans", "Segoe UI", "Helvetica Neue", sans-serif; --s7b-versal: "Archivo", "Montserrat", "Arial Narrow", sans-serif; /* * Tinte: die HAUSFARBE, nicht eine zweite. * * Die Regel "nie blau" aus der abgenommenen Designsprache meint * SCHATTEN -- ein blauer Schatten unter einer roetlichen Karte laesst * die Flaeche herausspringen. Sie meint NICHT die Schriftfarbe. Die * Hausschrift ist im ganzen Linktree var(--s7-text, #15153d), im * Dunkeln var(--s7-d-tinte, #efe6e6). * * Ein erster Anlauf hier hat daraus ein roetliches Schwarz gemacht. * Das faellt in dem Moment auf, in dem der Blog IM Linktree * eingebettet laeuft: roetlich-braune Blogschrift und blauschwarze * Linktree-Schrift stehen dann direkt untereinander. * * Mit der Rueckfallkette erbt der Blog im Linktree dessen gepflegten * Wert (--s7-text steht dort als Inline-Stil am Wurzel-Div) und * greift auf der Hauptseite auf den Werkswert zurueck. */ --s7b-tinte: var(--s7-text, #15153d); /* * Die leise Stufe wird aus der Tinte ABGELEITET, nie als zweiter * Farbwert gesetzt -- sonst laufen die Stufen auseinander, sobald der * Grundton im Backend gepflegt wird. * * 72 % und nicht die 58 % der Linktree-Karten: nachgerechnet. * Der unguenstigste echte Fall ist eine Karte am Seitenrand, wo der * Grundverlauf schon nach rgba(0,0,0,0.42) laeuft und die * Kartenflaeche unten nur noch 36 % Weiss traegt. Dort liefern 58 % * gerade 3,4:1 -- unter den 4,5:1, die WCAG AA fuer kleinen Text * verlangt, und die Pillen sind mit 12,5px genau das. 72 % ergeben * 4,9:1 und tragen auch dort noch. */ --s7b-tinte-leise: color-mix(in srgb, var(--s7b-tinte) 72%, transparent); /* * KEINE Textfarbe -- Haarlinien, Trenner, Icon-Striche. * * Der frueher hier stehende dritte Textton (40 %) kam auf 2,2:1 und * war damit fuer Text unbrauchbar, sah aber wie eine Textstufe aus: * die naechste Aufgabe haette ihn fuer Datum oder Lesezeit genommen * und eine AA-Verletzung ausgeliefert. Er heisst darum jetzt nach dem, * wofuer er taugt. Wer eine dritte, leisere SCHRIFT braucht, nimmt * --s7b-tinte-leise und macht sie kleiner, nicht blasser. * Wert wie der Linktree-Trenner (rgba(11, 11, 42, 0.14)). */ --s7b-linie: color-mix(in srgb, var(--s7b-tinte) 14%, transparent); /* * EINE Beleuchtungsrichtung fuer alles: Licht von oben links. * Erhaben und vertieft sind dieselben drei Lagen, einmal nach aussen, * einmal nach innen. * * Herkunft erhaben: .s7-thema-scheibe (linktree-extra.css) -- * die Gleit-Scheibe des Tages-Switchers, der kanonische erhabene * Koerper des Schemas. */ --s7b-erhaben: -1px -1px 2px rgba(255, 255, 255, 0.9), 1px 2px 5px rgba(107, 62, 62, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); /* * Hover hebt und VERLAENGERT den Schatten -- Zustaende laufen ueber * Licht, nie ueber Farbe. Struktur 1:1 aus der Dunkelfassung * (.s7-linktree[data-s7-thema="dunkel"] .s7-switch-btn:hover), die * Helligkeiten sind die Tages-Entsprechung dazu. */ --s7b-erhaben-hoch: -1px -1px 3px rgba(255, 255, 255, 0.95), 2px 4px 9px rgba(107, 62, 62, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7); /* * Herkunft vertieft: .s7-switch-rails und .s7-thema-schalter -- * beide tragen im Linktree exakt diese Liste. * * Die dritte Lage `0 1px 0 rgba(255,255,255,0.9)` ist die LIPPE unter * der Aussenkante, die Kante, an der die Flaeche wieder ansteigt. * Ohne sie liest man die Mulde als dunkles Rechteck statt als * Vertiefung. Sie ist der Grund, warum das hier ein Token ist und * keine Sammlung von Abschriften: sie wird beim Abschreiben vergessen. */ --s7b-vertieft: inset 2px 3px 7px rgba(107, 62, 62, 0.11), inset -2px -2px 5px rgba(255, 255, 255, 0.75), 0 1px 0 rgba(255, 255, 255, 0.9); /* * Flaechen. Die Karten sind jetzt GLAS auf dem lebendigen Grund: * transluzentes Weiss mit backdrop-filter (steht an der Komponente, * nicht hier), 1px-Lichtrand und Lichtkante oben innen -- Licht von * oben links. Herkunft: die Linktree-Glaskarten * (2026-08-25-linktree-designwerte.md). Der warme Schattenton * 64/30/30 statt Schwarz haelt die Regel "nie blau/kalt". * * Die Mulden bleiben im warmen Grau 128/74/74 -- der Ton, der die * Flaeche zur roetlichen Seite zieht, ohne als Farbe aufzufallen. */ /* * KANONISCHE Glaskarte (designsprache-relief, 19.08.2026) -- exakt * die Werte der Linktree-Stats-Box: 0.42 Weiss, Rand 0.45, Schatten * 0 10px 30px Schwarz 0.07 plus das inset-Paar 0.65/0.18. Die 0.42 * tragen auch am unguenstigsten Punkt (Karte in der Kopf-Vignette): * die 72-%-Tinte kam schon bei 36 % Weiss auf 4,9:1 (Rechnung an * --s7b-tinte-leise), 42 % liegen darueber. */ --s7b-karte-flaeche: rgba(255, 255, 255, 0.42); --s7b-karte-rand: rgba(255, 255, 255, 0.45); --s7b-glas-schatten: 0 10px 30px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.18); /* Hover: gleiche Bauform, eine Stufe laenger -- Zustaende laufen ueber Licht (Regel 3 des Schemas). */ --s7b-glas-schatten-hoch: 0 14px 36px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.18); --s7b-glas-verlauf: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.68)); /* Rueckfall ohne backdrop-filter: deckende Flaeche im Grundton. */ --s7b-deckend: #f7ecea; --s7b-mulde-flaeche: linear-gradient(180deg, rgba(128, 74, 74, 0.13), rgba(128, 74, 74, 0.07)); --s7b-mulde-rand: rgba(128, 74, 74, 0.05); --s7b-pille-flaeche: linear-gradient(180deg, rgba(128, 74, 74, 0.035), rgba(128, 74, 74, 0.065)); --s7b-pille-rand: rgba(128, 74, 74, 0.07); /* * Der aktive Zustand -- Rot NIE vollflaechig, immer als transparente * color-mix-Mischung (Linktree-Rezept: 26 % nach 18 %, Rand 34 %). */ --s7b-aktiv-flaeche: linear-gradient(180deg, color-mix(in srgb, var(--s7b-akzent) 26%, transparent), color-mix(in srgb, var(--s7b-akzent) 18%, transparent)); --s7b-aktiv-rand: color-mix(in srgb, var(--s7b-akzent) 34%, transparent); --s7b-aktiv-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(64, 30, 30, 0.1); --s7b-aktiv-tinte: var(--s7b-tinte); /* Primaerknopf: dieselbe Mischlogik, eine Stufe kraeftiger (28/18, Rand 40) -- Herkunft: .btn--primary im Mockup. */ --s7b-knopf-flaeche: linear-gradient(180deg, color-mix(in srgb, var(--s7b-akzent) 28%, transparent), color-mix(in srgb, var(--s7b-akzent) 18%, transparent)); --s7b-knopf-rand: color-mix(in srgb, var(--s7b-akzent) 40%, transparent); --s7b-knopf-schatten: 0 6px 16px rgba(64, 30, 30, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.45); --s7b-knopf-schatten-hoch: 0 10px 24px rgba(64, 30, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55); /* Spitze der wandernden Randlinie am Primaerknopf. */ --s7b-randlicht: rgba(255, 255, 255, 0.9); /* Gummidruck-Normwerte (designsprache-relief): Kern circle 26px rgba(84,40,40,0.2), weiter Hof 0.14. */ --s7b-delle: rgba(84, 40, 40, 0.2); --s7b-delle-weit: rgba(84, 40, 40, 0.14); --s7b-gedrueckt: inset 1px 4px 8px rgba(84, 40, 40, 0.19), inset -1px -2px 3px rgba(255, 255, 255, 0.5); /* Glanzband. Im Dunkeln muss es deutlich leiser sein, sonst wird aus dem Streifen ein Scheinwerfer. */ --s7b-glanz-kern: rgba(255, 255, 255, 0.42); --s7b-glanz-saum: rgba(255, 255, 255, 0.2); /* * Seitengrund + Wolken. Rezept WORTGLEICH aus dem Linktree * (page_bg + --s7-glow-a/b/c): radialer Verlauf ueber warmem Grundton, * drei treibende Wolken als reine radial-gradients -- KEIN * filter: blur, ein Weichzeichner ueber eine halbe Bildschirmflaeche * kostet pro Bild mehr als alles andere auf der Seite zusammen. */ --s7b-grund-basis: #fdf3f0; --s7b-grund-verlauf: radial-gradient(at center center, rgba(255, 238, 238, 0.98) 0%, rgba(0, 0, 0, 0.42) 100%); --s7b-wolke-a: rgba(163, 66, 66, 0.22); --s7b-wolke-b: rgba(110, 14, 14, 0.19); --s7b-wolke-c: rgba(196, 0, 0, 0.12); /* * Buehne fuer Hochkantbilder: hoehengedeckelte Flaeche mit warmem * Verlaufs-Glow statt einer geblurrten Bildkopie -- im Mockup-Test * fror `filter: blur` ueber grosse Bilder schwache Renderpfade ein; * der Verlauf leistet dasselbe zum Nulltarif. */ --s7b-buehne-grund: #e8d6d3; --s7b-buehne-glow: radial-gradient(120% 90% at 50% 42%, rgba(233, 200, 190, 0.9) 0%, rgba(210, 168, 158, 0.55) 48%, rgba(160, 116, 108, 0.45) 100%); /* Licht faellt von oben links auf die Buehne. */ --s7b-buehne-licht: linear-gradient(135deg, rgba(255, 251, 246, 0.3) 0%, rgba(255, 251, 246, 0) 42%), linear-gradient(315deg, rgba(107, 62, 62, 0.22) 0%, rgba(107, 62, 62, 0) 46%); /* Avatar-Initiale an der Meta-Zeile. */ --s7b-avatar-verlauf: linear-gradient(150deg, #f4e3de, #e2cbc4); /* * Trenner-Rezept (designsprache-relief): 1px, an den Enden weich * auslaufend. Im Linktree steht er senkrecht (to bottom) zwischen * Spalten; die Blog-Trenner liegen waagerecht, also dieselben drei * Stufen auf der to-right-Achse. Der 11/11/42-Ton ist Tinte, kein * Schatten -- die "nie blau"-Regel zielt auf Schattenlagen. */ --s7b-trenner: linear-gradient(to right, rgba(11, 11, 42, 0.02), rgba(11, 11, 42, 0.14), rgba(11, 11, 42, 0.02)); /* "Roetliches Schwarz" -- Leons Wahl fuer das (c)-Zeichen: dunkle Warmtoene schlagen reines Rot bei Textzeichen. */ --s7b-signatur: rgba(56, 16, 16, 0.82); /* Geometrie. Radius 26 ist der kanonische Glaskarten-Radius. */ --s7b-radius: 26px; --s7b-radius-knopf: 13px; /* * Zeiten. Die Feder mit Ueberschwingen ist das, was den Gummi macht * -- ohne das Nachfedern fuehlt sich der Knopf hart an. */ --s7b-feder: cubic-bezier(0.34, 1.8, 0.5, 1); --s7b-fahrt: cubic-bezier(0.22, 1, 0.36, 1); color: var(--s7b-tinte); } /* ------------------------------------------------------------------ 2. Relief-Karte -- jetzt Glas Transluzente Flaeche auf dem lebendigen Grund, backdrop-filter macht daraus Milchglas. Die Relief-Logik bleibt: Lichtkante oben innen (Licht von oben links) und dunkle Unterkante stecken im Glas-Schattenrezept, erhaben/vertieft lesen sich weiter ueber die Schatten -- sie liegen nur jetzt auf Glas. ------------------------------------------------------------------ */ .s7b-karte { position: relative; display: flex; flex-direction: column; border-radius: var(--s7b-radius); background: var(--s7b-karte-flaeche); border: 1px solid var(--s7b-karte-rand); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--s7b-glas-schatten); color: var(--s7b-tinte); text-decoration: none; /* * Haelt Bild und Glanzstreifen in der Rundung. Der eigene Schatten * der Karte wird davon NICHT beschnitten -- overflow greift nur auf * Kinder. (Die Falle aus dem Linktree war eine andere: overflow-x * auf einem UMGEBENDEN Kasten klemmt auch vertikal ab und frisst * die Schatten der Kinder. Wer .s7b-karte in eine Scroll-Leiste * setzt, braucht dort Innenpolster plus negativen Aussenabstand.) */ overflow: hidden; transform-origin: 50% 100%; transition: transform 0.45s var(--s7b-feder), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; } /* * Rueckfall: kann der Browser kein backdrop-filter, wird die Flaeche * deckend -- durchsichtiges Glas OHNE Weichzeichner laesst den Grund * durch den Text scheinen und die Kontraste kippen. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .s7b-mulde, .s7b-autor-popover, .s7b-fuss-kapsel, /* Die Seitenleisten-Glaskaesten ohne Karten-Klasse (11). */ .s7b-empfohlen, .s7b-teilen, .s7b-leiste-kasten, .s7b-karte { background: var(--s7b-deckend); } } @media (hover: hover) { /* Hinter der Kapsel, weil der Zustand auf dem Handy sonst nach dem Antippen kleben bleibt -- und fast jeder Besucher kommt ueber Instagram, also vom Handy. */ .s7b-karte:hover { transform: translateY(-4px); box-shadow: var(--s7b-glas-schatten-hoch); } } /* * KEIN Gummidruck mehr auf Karten -- Leons Wunsch vom 26.08.2026 * ("zu much"): beim Klick soll sich nicht das ganze Feld bewegen. * Der Hover-Hub bleibt; Stauchung, Kippen und Delle gibt es nur noch * an Bedienelementen (Knopf, Pille, Raste, Teilen-Knopf, * Themenschalter). Jede Karte verhaelt sich damit wie frueher nur * .s7b-karte--starr; die Klasse bleibt fuer die Ansichten bestehen, * ist aber wirkungslos geworden. */ .s7b-karte--starr:active { transform: none; } .s7b-karte:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } /* Bild im Kartenkopf: fuellt die Breite, behaelt sein Format, bleibt beim Hover STEHEN. Im Linktree liefen Kartenhub und Bildzoom gegeneinander, das Bild wanderte dabei aus seiner neuen Rundung. QUADRATISCH (1/1): Leons Bilder sind fast alle Instagram-1:1 -- im Quadrat erscheinen sie komplett, cover schneidet nichts ab; nur seltene Hochkant-Reels verlieren oben/unten (Leons Vorgabe, 26.08.2026). */ .s7b-karte-bild { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transform: none; } .s7b-karte-inhalt { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; } /* ------------------------------------------------------------------ 3. Mulde Dieselben Lagen wie die Karte, nur nach innen -- plus die helle Lippe. Basisklasse traegt NUR die Flaeche, das Innenleben kommt aus einem Zusatz. So kann eine Mulde eine Pillen-Schiene sein oder ein Text-Kasten, ohne dass jemand die Rezeptur zweimal abschreibt. ------------------------------------------------------------------ */ .s7b-mulde { position: relative; border-radius: var(--s7b-radius); background: var(--s7b-mulde-flaeche); border: 1px solid var(--s7b-mulde-rand); /* Auch die Mulde ist Glas -- eine Stufe schwaecher als die Karte. */ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--s7b-vertieft); } /* Kasten-Fassung: "The gist" und die aufklappbare Inhaltsuebersicht. */ .s7b-mulde--kasten { padding: 16px 18px; } /* * Schienen-Fassung: die Pillenreihe. * * Die Pillen brechen HIER um, nicht nach einer Schaetzung aus dem PHP * -- eine Schaetzung lag im Linktree um bis zu 30 % daneben, die zweite * Reihe brauchte mehr Platz als die Schiene breit war und der Gleiter * stand links ueber den Rand hinaus. Der Browser misst genau, also * laesst man ihn messen. */ .s7b-mulde--schiene { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px 8px; padding: 5px; /* * NUR SO BREIT WIE NOETIG (Leons Wunsch, 27.08.2026: "bei den * Collections und Topics soll die Mulde auch nur so gross sein wie * noetig -- das Ganze dynamisch"). * * Dasselbe Prinzip wie an der Daumenleiste der Bildstrecke, und aus * demselben Grund: eine Mulde, die weiter reicht als ihr Inhalt, * sieht aus wie ein leeres Regal. Bei vier Topics stand die Schiene * ueber die halbe Seite und rechts war nichts. * * fit-content laesst sie mit der Zahl der Pillen wachsen und bei * wenigen schmal bleiben; margin-inline haelt sie mittig, und * max-width haelt sie im Rahmen -- danach bricht sie wie bisher in * sich um. */ width: fit-content; max-width: 100%; margin-inline: auto; } /* ------------------------------------------------------------------ 4. Pille -- Kategorien und Themen Machart des Linktree-Switchers. Der aktive Zustand ist eine EIGENE, gleitende Pille und kein Hintergrund am Knopf: ein Hintergrund kann nicht von einem Element zum anderen wandern, er kann nur erscheinen und verschwinden. ------------------------------------------------------------------ */ .s7b-pille { /* z-index 3: ueber dem Gleiter (2), der ueber der Schiene liegt. */ position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; /* * 44px Tippflaeche. Gemessen waren die Linktree-Reiter anfangs 34px * hoch -- zu wenig fuer einen Daumen, und Leons Publikum kommt vom * Handy. */ min-height: 44px; margin: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--s7b-pille-rand); background: var(--s7b-pille-flaeche); box-shadow: var(--s7b-erhaben); color: var(--s7b-tinte-leise); font: inherit; /* Versalien-Schrift wie alle Auszeichnungen im Mockup. */ font-family: var(--s7b-versal); /* 12,5px statt 13,5px: nur so passen drei laengere Namen in eine Reihe. Weiter runter geht es nicht, darunter leidet die Lesbarkeit auf dem Handy. */ font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.15; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; /* Mittiger Ursprung, nicht die Unterkante: eine Pille soll beim Sinken gleichmaessig nach innen gehen, nicht um die Unterkante kippen. */ transform-origin: 50% 50%; transition: transform 0.45s var(--s7b-feder), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.22s ease; } @media (hover: hover) { .s7b-pille:hover { box-shadow: var(--s7b-erhaben-hoch); color: var(--s7b-tinte); transform: translateY(-1px); } } .s7b-pille:active { transition-duration: 0.06s, 0.06s, 0.06s, 0.06s, 0.06s; transform: perspective(200px) scale(0.95, 0.9) rotateX(var(--s7b-neig-x, var(--s7-neig-x, 0deg))) rotateY(var(--s7b-neig-y, var(--s7-neig-y, 0deg))); background: radial-gradient(circle 26px at var(--s7b-druck-x, var(--s7-druck-x, 50%)) var(--s7b-druck-y, var(--s7-druck-y, 55%)), var(--s7b-delle), transparent), var(--s7b-pille-flaeche); box-shadow: var(--s7b-gedrueckt); } .s7b-pille:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } /* * Die aktive Pille traegt die Fuellung SELBST, solange kein Gleiter * unterwegs ist. Das ist der Zustand ohne JS und der Ruhezustand * danach -- und er ist notwendig, nicht nur ein Rueckfall: * Subpixel-Glaettung gibt es nur mit deckender Flaeche direkt hinter * der Schrift in derselben Ebene. Eine durchsichtige Pille ueber einem * bewegten Gleiter bekommt grobe Kanten; am Handy verdeckt das die * Pixeldichte, am Rechner sieht man es sofort. */ .s7b-pille.ist-aktiv { background: var(--s7b-aktiv-flaeche); border-color: var(--s7b-aktiv-rand); box-shadow: var(--s7b-aktiv-schatten); color: var(--s7b-aktiv-tinte); font-weight: 800; } /* * Nur WAEHREND der Fahrt gibt die Pille ihre Flaeche ab -- sonst laegen * zwei Pillen uebereinander und beim Wechsel blitzte die alte auf. * `ist-ruht` setzt das JS, sobald der Gleiter angekommen ist. */ .s7b-mulde--schiene:has(.s7b-gleiter:not(.ist-still)) .s7b-pille.ist-aktiv:not(.ist-ruht) { background: transparent; border-color: transparent; box-shadow: none; } /* * FALLE, die im Linktree Stunden gekostet hat: font-weight 800 aendert * die Breite. Die aktive Pille schob ihre Nachbarn und zwang den * Gleiter nachzuwachsen. `-webkit-text-stroke` als Ersatz sah * verschwommen aus (weiche Kontur um jede Rundung, beim S am * deutlichsten). Loesung: ein unsichtbarer Zwilling der Beschriftung, * dauerhaft in 800, im selben Rasterfeld -- ER bestimmt die Breite, * die sichtbare Schrift darf darin dick werden, ohne etwas zu * verschieben. */ .s7b-pille-text { display: grid; } .s7b-pille-text > * { grid-area: 1 / 1; } /* * Die sichtbare Beschriftung MITTIG im reservierten Feld. Der Zwilling * ist in 800 breiter als der ruhende Text -- ohne diese Zeile klebte * die Beschriftung einer nicht-aktiven Pille am linken Rand ihrer * eigenen Reserve statt in der Mitte zu stehen. */ .s7b-pille-jetzt { justify-self: center; } .s7b-pille-zwilling { font-weight: 800; visibility: hidden; pointer-events: none; } /* * Der Gleiter. Position und Groesse misst das JS bei jedem Wechsel neu * (getBoundingClientRect, Nullpunkt = Innenkante der Schiene inklusive * Rahmenbreite) und schreibt sie hierher; die erste Setzung springt * ohne Uebergang (Klasse `ohne-fahrt`). */ .s7b-gleiter { position: absolute; top: 0; left: 0; z-index: 2; border-radius: 999px; background: var(--s7b-aktiv-flaeche); border: 1px solid var(--s7b-aktiv-rand); box-shadow: var(--s7b-aktiv-schatten); pointer-events: none; /* Weicher Anlauf, klares Ankommen -- kein Nachfedern, das wirkt hier spielerisch. Die Feder gehoert dem Finger, nicht der Fahrt. */ transition: transform 0.42s var(--s7b-fahrt), width 0.42s var(--s7b-fahrt), height 0.42s var(--s7b-fahrt); } .s7b-gleiter.ohne-fahrt { transition: none; } /* * FALLE: bruchteilgenau positionierte Ebenen lugen hervor. Der Gleiter * lag je nach Pixelrundung mal ein halbes Pixel tiefer als die Pille -- * dunkle Unterkante und Schlagschatten erschienen als sporadischer * "Unterstrich". Im Ruhezustand tritt er darum KOMPLETT ab, es zeichnet * nur noch eine Ebene. */ .s7b-gleiter.ist-still { visibility: hidden; } /* ------------------------------------------------------------------ 5. Druckknopf -- Gummidruck Drei Bewegungen zusammen ergeben Gummi und nicht Klick: Stauchung mit Ursprung UNTERKANTE, eine Delle am Fingerpunkt und ein Kippen zur Fingerseite. Das JS schreibt --s7b-druck-x/y (Fingerpunkt in Prozent) und --s7b-neig-x/y (Neigung bis 3,5 Grad) bei pointerdown. Die Rueckfallkette --s7b-* -> --s7-* -> Werkswert kostet nichts und faengt den Fall ab, dass ein Vorfahr die alten Namen setzt. Sie ersetzt aber KEIN eigenes Skript -- eine fruehere Fassung dieses Kommentars hat das behauptet, und das war falsch. Nachgesehen in linktree.js: die dortige Delegation haengt am Wurzel-Element, sucht per closest() aber nur ihre EIGENE Klassenliste ab ('.s7-link-btn, .s7-mosaik-knopf, .s7-nl-knopf, .share-btn, ...') -- .s7b-knopf und .s7b-pille stehen nicht darin. Und druckstelle() schreibt die Variablen auf das getroffene Element SELBST. Custom Properties vererben nach unten, nicht seitwaerts: ein Blog-Knopf, der bloss irgendwo innerhalb von .s7-linktree steht, bekommt nie einen Wert. Ohne eigenes Skript bleibt es also bei 50%/55% und 0deg -- die Delle sitzt mittig statt am Finger, das Kippen entfaellt. Stauchung und Feder laufen trotzdem, der Knopf fuehlt sich nur weniger genau an. ------------------------------------------------------------------ */ .s7b-knopf { /* * Anker fuer den Glanzstreifen, der als IM * Knopf liegt (S7B_Render::knopf baut ihn dorthin). Ohne diese Zeile * richtet sich das absolut positionierte Kind am naechsten * positionierten VORFAHREN aus -- das ist die Karte, und der Streifen * lief quer ueber die ganze Kartenflaeche statt ueber den Knopf. * * Dieselbe Pflicht gilt an .s7b-karte, .s7b-mulde, .s7b-pille und * .s7b-kurz-punkt. Ein Test haelt alle fuenf fest. */ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* 44px empfohlene Tippflaeche -- siehe Pille. */ min-height: 44px; padding: 10px 16px; border-radius: var(--s7b-radius-knopf); border: 1px solid var(--s7b-knopf-rand); background: var(--s7b-knopf-flaeche); box-shadow: var(--s7b-knopf-schatten); /* Roter Text auf der Rot-Toenung: die AA-sichere Stufe, nicht der pure Akzent (siehe Token). */ color: var(--s7b-akzent-stark); font: inherit; font-family: var(--s7b-versal); font-size: 13px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.15; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; /* Ursprung Unterkante: der Knopf sackt in seine Standflaeche, er schrumpft nicht in der Luft. */ transform-origin: 50% 100%; transition: transform 0.45s var(--s7b-feder), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; } @media (hover: hover) { .s7b-knopf:hover { transform: translateY(-2px); box-shadow: var(--s7b-knopf-schatten-hoch); } } .s7b-knopf:active { /* Eindruecken 60ms, Zurueckfedern 0.45s mit Ueberschwingen (oben in transition). Das Nachfedern ist der Gummi. */ transition-duration: 0.06s, 0.06s, 0.06s, 0.06s; transform: perspective(200px) scale(0.94, 0.88) translateY(1px) rotateX(var(--s7b-neig-x, var(--s7-neig-x, 0deg))) rotateY(var(--s7b-neig-y, var(--s7-neig-y, 0deg))); /* Die Delle liegt UEBER der Knopfflaeche -- die bleibt auch beim Druecken die transparente Rot-Mischung, nie vollflaechig. */ background: radial-gradient(circle 26px at var(--s7b-druck-x, var(--s7-druck-x, 50%)) var(--s7b-druck-y, var(--s7-druck-y, 55%)), var(--s7b-delle), transparent), var(--s7b-knopf-flaeche); box-shadow: var(--s7b-gedrueckt); } /* * Breite Fassung (Weiterlesen ueber die ganze Kartenbreite, Nachladen, * Modell-Knoepfe unterm Aufmacherbild). Sanfter skaliert, weiter * gestreute Delle -- ein sechsmal breiterer Koerper mit derselben * Stauchung sieht aus, als falle er um. */ .s7b-knopf--breit { width: 100%; } .s7b-knopf--breit:active { transform: perspective(600px) scale(0.975, 0.94) translateY(1px) rotateX(calc(var(--s7b-neig-x, var(--s7-neig-x, 0deg)) * 0.7)) rotateY(calc(var(--s7b-neig-y, var(--s7-neig-y, 0deg)) * 0.7)); background: radial-gradient(circle 44px at var(--s7b-druck-x, var(--s7-druck-x, 50%)) var(--s7b-druck-y, var(--s7-druck-y, 55%)), var(--s7b-delle-weit), transparent), var(--s7b-knopf-flaeche); } /* Leiser Zweitknopf: gleiche Geometrie, gleiche Feder, nur ohne den roten Anspruch -- das Glas-Rezept des Mockup-Standardknopfs (.btn: glass-grad, Lichtrand, Glas-Schatten). Fuer "On Instagram" neben den Verkaufsknoepfen. */ .s7b-knopf--leise { border-color: var(--s7b-karte-rand); background: var(--s7b-glas-verlauf); box-shadow: var(--s7b-glas-schatten); color: var(--s7b-tinte); } @media (hover: hover) { .s7b-knopf--leise:hover { box-shadow: var(--s7b-glas-schatten-hoch); color: var(--s7b-tinte); } } /* Ohne diese Zeile mischte der Druck aus .s7b-knopf:active den Akzent ein -- der leise Knopf waere ausgerechnet beim Antippen roter geworden als der rote daneben. Dieselbe Delle, nur auf seinem eigenen Grund. */ .s7b-knopf--leise:active { background: radial-gradient(circle 26px at var(--s7b-druck-x, var(--s7-druck-x, 50%)) var(--s7b-druck-y, var(--s7-druck-y, 55%)), var(--s7b-delle), transparent), var(--s7b-glas-verlauf); } .s7b-knopf:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } /* Angezeigt wird nur, was eine Adresse hat -- nie ein toter Knopf. Falls doch einer gesperrt werden muss: er gibt dann nicht nach. */ .s7b-knopf[aria-disabled="true"], .s7b-knopf:disabled { opacity: 0.55; cursor: default; } .s7b-knopf[aria-disabled="true"]:active, .s7b-knopf:disabled:active { transform: none; background: var(--s7b-knopf-flaeche); box-shadow: var(--s7b-knopf-schatten); } /* Marken-Logo im Knopf. Als Hintergrundbild auf einem leeren , NICHT als : das Lazyload des Themes tauscht bei jedem die Quelle gegen ein data-Attribut aus, und sein Skript ist auf diesen Seiten abgemeldet. */ .s7b-knopf-logo { display: block; width: 20px; height: 20px; flex-shrink: 0; background-position: center; background-repeat: no-repeat; background-size: contain; } /* * Wandernde Randlinie am Primaerknopf (Herkunft: s7BorderMove, * ::before der Linktree-Link-Knoepfe): ein 120deg-Verlauf mit heller * Spitze wandert bei Hover einmal rundherum. Die Maske stanzt die * Flaeche aus, uebrig bleibt der 1px-Rahmen -- so leuchtet die LINIE, * nie die Fuellung. Der leise Zweitknopf bekommt sie nicht: er hat * keinen roten Anspruch. */ .s7b-knopf:not(.s7b-knopf--leise)::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent 0%, var(--s7b-akzent) 30%, var(--s7b-randlicht) 50%, var(--s7b-akzent) 70%, transparent 100%); background-size: 250% 250%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } @keyframes s7bRandlinie { from { background-position: 0% 50%; } to { background-position: 250% 50%; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .s7b-knopf:not(.s7b-knopf--leise):hover::before { opacity: 1; animation: s7bRandlinie 1.8s linear infinite; } } /* ------------------------------------------------------------------ 6. Glanzstreifen Ein geneigter Streifen, der EINMAL ueber die Flaeche gleitet. Bewegt wird ueber translateX, NICHT ueber eine prozentuale background-position: dabei verschiebt sich der Verlauf relativ zur eigenen Groesse, der sichtbare Kern springt statt zu wandern -- im Linktree live als Blitzen erlebt. Und translateX laeuft ausserdem im Compositor, es kostet kein Layout. Der Weg entspricht dem des Linktree-Laeufers (dort left -60% -> 120% bei 60% Breite): das sind, auf die EIGENE Breite des Streifens gerechnet, -100% -> 200%. ------------------------------------------------------------------ */ .s7b-glanz { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; } .s7b-glanz::before { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; opacity: 0; transform: translateX(-100%) skewX(-20deg); background: linear-gradient(120deg, transparent 0%, var(--s7b-glanz-saum) 35%, var(--s7b-glanz-kern) 50%, var(--s7b-glanz-saum) 65%, transparent 100%); } @keyframes s7bGlanz { 0% { transform: translateX(-100%) skewX(-20deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(200%) skewX(-20deg); opacity: 0; } } @media (hover: hover) { /* Direktes Kind, damit eine verschachtelte Karte nicht den Glanz ihrer Mutter mit ausloest. Der Streifen gehoert auf jede GLASKARTE und groessere Kachel (Schema-Forderung) -- die MULDE bekommt ihn bewusst NICHT: sie ist vertieft, und ein Lichtstreifen ueber einer Vertiefung widerspricht der einen Beleuchtungsrichtung. */ .s7b-karte:hover > .s7b-glanz::before, .s7b-knopf:hover > .s7b-glanz::before, .s7b-fuss-kapsel:hover > .s7b-glanz::before { animation: s7bGlanz 1.2s ease; } } /* Auf Touch gibt es kein Hover. Diese Klasse setzt das JS beim Tippen kurz und nimmt sie danach wieder weg -- so bekommt auch der Instagram-Besucher den Streifen zu sehen. */ .s7b-glanz.laeuft::before { animation: s7bGlanz 1.2s ease; } /* ------------------------------------------------------------------ 6b. Buehne -- Hochkantbilder (Instagram 9:16 / 4:5) Eine hoehengedeckelte Flaeche mit warmem Verlaufs-Glow, das Bild darin per object-fit: contain. KEINE geblurrte Bildkopie: im Mockup-Test fror `filter: blur` ueber grosse Bilder schwache Renderpfade ein -- der Verlauf leistet dasselbe zum Nulltarif. Und box-shadow statt drop-shadow am Bild: das JPEG ist deckend, gleiche Wirkung, kein Filter-Raster. Identisch am Aufmacher und am Artikelbild. Der feste Hoehendeckel ist zugleich die Reparatur des Aufmacher-Bugs: ein Hochkantbild blaehte die Karte vorher auf ~670px, weil das Bild selbst die Kartenhoehe bestimmte. Hier bestimmt die Buehne, nie das Bild. ------------------------------------------------------------------ */ .s7b-buehne { position: relative; display: grid; place-items: center; margin: 0; height: clamp(300px, 82vw, 430px); overflow: hidden; isolation: isolate; background: var(--s7b-buehne-glow), var(--s7b-buehne-grund); } /* Lichtfall von oben links -- dieselbe Richtung wie am Relief. */ .s7b-buehne::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--s7b-buehne-licht); } /* * Ueberschreibt bewusst die .s7b-karte-bild- und .s7b-artikel-bild- * Werte (das Bild traegt beide Klassen). Der Eltern-Selektor ist * Absicht: er wiegt schwerer als die Einzelklassen der Bild-Regeln, * egal in welcher Reihenfolge die Abschnitte stehen. * * Das Bild behaelt sein NATUERLICHES Seitenverhaeltnis (Leons Vorgabe, * praezisiert 26.08.2026): quadratische Instagram-Bilder erscheinen * quadratisch, laengliche laenglich -- nichts wird beschnitten, das * Objekt passt sich der Buehne ein. Gedeckelt wird ueber die * Buehnenhoehe (das Bild fuellt sie minus Luft) und max-width; beides * zusammen kann das Verhaeltnis nicht verzerren, weil width auto * folgt. object-fit: contain faengt den Fall ab, dass BEIDE Klemmen * zugleich greifen. */ .s7b-buehne .s7b-buehne-bild { position: relative; z-index: 1; width: auto; height: calc(100% - 36px); max-width: calc(100% - 36px); object-fit: contain; border-radius: 10px; box-shadow: 8px 14px 26px rgba(30, 12, 12, 0.5); } /* * Die Buehne des ARTIKELS schmiegt sich ans Bild (Leons Fund, * 27.08.2026: "das Bild sitzt viel zu weit oben und der rote Kasten * sieht nicht gut aus"). * * Vorher war sie ein Feld fester Hoehe ueber die volle Spaltenbreite. * Ein quadratisches Instagram-Bild fuellte davon die Mitte, und links * und rechts blieben je zweihundert Pixel leeres Rosa -- das Bild sass * IN einem Kasten, statt eingefasst zu sein. Mit fit-content wird aus * dem Feld ein schmaler Rahmen, der dem Bild folgt: quadratisch beim * Quadrat, hochkant beim Hochformat. * * Die Karten-Buehne der Uebersicht bleibt unberuehrt -- dort FUELLT * das Bild seine Rasterspalte, das ist dort richtig. */ .s7b-artikel-figur.s7b-buehne { width: fit-content; max-width: 100%; height: auto; margin-inline: auto; padding: 16px; border-radius: 18px; } .s7b-artikel-figur.s7b-buehne .s7b-buehne-bild { width: auto; height: auto; max-width: 100%; /* Der Deckel steht in vh, nicht in px: auf einem flachen Schirm soll ein Hochkantbild nicht ueber den Rand hinauswachsen. */ max-height: min(520px, 68vh); } /* * Ein VIDEO auf der Buehne traegt dieselbe Fassung wie das Bild -- * Rundung, Schatten, Deckel. Eigene Klasse statt einer Bild-Klasse am * video-Element: die img-Regeln oben rechnen mit object-fit und * Bildmassen, und ein Selektor, der beides trifft, ist ehrlicher als * ein video, das sich als img ausgibt. */ .s7b-buehne-video { display: block; position: relative; z-index: 1; width: auto; height: auto; max-width: 100%; max-height: min(520px, 68vh); border-radius: 10px; box-shadow: 8px 14px 26px rgba(30, 12, 12, 0.5); /* Ein Video ohne Standbild-Frame waere ein durchsichtiges Loch im Rose-Glas -- der warme Dunkelton fuellt es bis zum ersten Frame. */ background: #241c1f; } /* * Die Buehne der MEHRBILD-Strecke steht fest (Leons Vorgabe): beim * Wechsel Hochkant/Quer darf das Layout darunter nicht springen. Das * Passepartout-fit-content der Einzelbild-Buehne ist dafuer genau * falsch -- es folgt dem Bild. Hier bestimmt die Buehne, nie das Bild. * * grid-template-rows minmax(0, 1fr): die erste Zeile ist das Bildfeld, * eine Bildunterschrift faellt in eine implizite auto-Zeile darunter * und nimmt dem Feld nur ihre eigene Hoehe. */ .s7b-artikel-figur.s7b-buehne--fest { position: relative; /* * Die Hoehe steht als TOKEN da, weil das Medium darin sie braucht: * es soll nie hoeher werden als das Feld, und "max-height: 100%" * traegt in einer schrumpfenden Fassung nicht (Prozent an einer * Hoehe, die selbst erst vom Inhalt kommt, ist ein Zirkel). */ --s7b-buehne-hoehe: min(520px, 68vh); width: 100%; height: var(--s7b-buehne-hoehe); /* * Ein Raster mit EINER Zelle, mittig: die Fassung darin nimmt die * Groesse des Bildes an und steht trotzdem in der Mitte. Eine * Bildunterschrift faellt in eine implizite auto-Zeile darunter. */ display: grid; grid-template-rows: minmax(0, 1fr); justify-items: center; align-items: center; /* pan-y: senkrecht scrollt die Seite weiter, waagerecht gehoert der Finger der Strecke (Wischen, blog.js). */ touch-action: pan-y; /* * KEIN eigener Grund und keine Fassung AM FELD (Leons Fund, * 27.08.2026: "der rosa Kasten dahinter sieht doof aus"). * * Das Feld ist breiter als jedes Bild darin -- ein quadratisches * Instagram-Bild laesst links und rechts je zweihundert Pixel * uebrig. Ein Aussehen an dieser Stelle waere immer das Aussehen * der LUFT, nie das des Bildes. Die Hoehe bleibt fest: sie ist der * Grund, warum beim Wechsel Hoch/Quer nichts springt. */ padding: 0; background: none; } /* * DIE FASSUNG -- die Mulde um das Bild (Leons Wunsch, 27.08.2026: * "das Bild ist abgerundet, aber es gibt noch keine Mulde dafuer"). * * Dieselbe Rezeptur wie die Daumen-Leiste darunter, damit Buehne und * Ablage als EIN Bauteil lesen: Mulden-Token, vertieftes Relief, * fit-content. Nichts davon steht hier als Zahl, alles kommt aus den * Token -- zwei Mulden, die sich um einen Hauch unterscheiden, faellt * sofort auf (im Linktree schon passiert). * * fit-content statt voller Breite ist der ganze Punkt: die Mulde * umschliesst das BILD. Sie ist damit bei einem Hochkantbild schmal * und bei einem Querbild breit -- genau so, wie ein Passepartout um * ein Bild geschnitten wird und nicht um den Raum daneben. */ .s7b-buehne-fassung { position: relative; display: block; width: fit-content; max-width: 100%; padding: 10px; border-radius: 20px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--s7b-vertieft); } /* * Die Pfeile an der Buehne (Leons Wunsch, 27.08.2026, in zweiter * Fassung nachgebessert: "die Pfeile sind noch nicht professionell"). * * Was an der ersten Fassung falsch war: sie hingen am FELD, nicht an * der Fassung. Das Feld ist breiter als das Bild, also standen sie * weit daneben in der Luft -- zwei Scheiben ohne Bezug zu irgendetwas. * Jetzt sitzen sie AUF dem Bild, dicht an seiner Kante. * * Und das Zeichen ist kein Text mehr. Ein Textpfeil erbt Schriftart, * Strichstaerke und optische Mitte der Schrift -- bei Archivo sitzt * das Glyph sichtbar zu hoch in der Scheibe. Ein gezeichneter Haken * hat genau die Strichstaerke, die man ihm gibt, und liegt mittig. */ .s7b-buehne-pfeil { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; /* 44px: das Tippziel, das die WCAG als Empfehlung nennt. */ width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--s7b-karte-rand); background: var(--s7b-karte-flaeche); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--s7b-glas-schatten); color: var(--s7b-tinte); cursor: pointer; /* Ruhig, solange niemand hinsieht -- aber nicht unsichtbar: wer die Strecke nicht kennt, soll sehen, dass es weitergeht. */ opacity: 0.78; transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } /* Der gezeichnete Haken: 16px im 44er Feld, Strich 2, runde Enden und Ecken -- dieselbe weiche Kante wie ueberall sonst im Schema. */ .s7b-buehne-pfeil svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* AUF dem Bild, dicht an der Kante: 14px vom Rand der Fassung, deren Innenraum 10px betraegt -- der Pfeil ueberlappt das Bild also um vier Pixel und sitzt damit sichtbar IM Bild, nicht auf der Mulde. */ .s7b-buehne-pfeil--zurueck { left: 14px; } .s7b-buehne-pfeil--vor { right: 14px; } @media (hover: hover) { .s7b-buehne-pfeil:hover { opacity: 1; /* Der Akzent nur am RAND, nicht als Fuellung: Rot vollflaechig ist im Schema der Zustandsfarbe vorbehalten. */ border-color: color-mix(in srgb, var(--s7b-akzent) 34%, transparent); } .s7b-buehne-pfeil--zurueck:hover { transform: translateY(-50%) translateX(-2px); } .s7b-buehne-pfeil--vor:hover { transform: translateY(-50%) translateX(2px); } } /* Ohne Hover-Geraet gibt es kein "erst zeigen, wenn jemand hinsieht" -- dort sind sie immer da. */ @media (hover: none) { .s7b-buehne-pfeil { opacity: 0.88; } } .s7b-buehne-pfeil:focus-visible { opacity: 1; outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .s7b-buehne-pfeil { transition: none; } .s7b-buehne-pfeil:hover { transform: translateY(-50%); } } /* * Auf schmalen Schirmen ruecken die Pfeile enger zusammen: bei einem * Hochkantbild von 300 Pixeln Breite fraessen zwei 44er Scheiben mit * je 14 Pixeln Abstand ein Drittel des Bildes. */ @media (max-width: 560px) { .s7b-buehne-pfeil { width: 38px; height: 38px; } .s7b-buehne-pfeil svg { width: 14px; height: 14px; } .s7b-buehne-pfeil--zurueck { left: 8px; } .s7b-buehne-pfeil--vor { right: 8px; } } /* Die Lichtkante der Buehne gehoert zum Grund und geht mit ihm. */ .s7b-artikel-figur.s7b-buehne--fest::after { content: none; } /* * Im festen Feld spannt sich das MEDIUM ueber die ganze Flaeche und * laesst object-fit: contain den Rest erledigen. Der Bildschatten und * die Rundung treten ab: beide saessen am ELEMENT, das jetzt auch die * Letterbox-Luft umfasst -- ein Schatten um unsichtbare Luft haengt * sichtbar neben dem Bild. Die Tiefe traegt hier die Buehne selbst. */ /* * Die lange Selektorkette ist Absicht, keine Nachlaessigkeit: die * Buehnenregel weiter oben heisst * ".s7b-artikel-figur.s7b-buehne .s7b-buehne-bild" und waere mit drei * Klassen staerker als eine kuerzere Fassung hier. Sie hat dem Bild * live den Deckel des ganzen Feldes gegeben statt des Feldes MINUS * Innenraum -- die Fassung ragte dadurch oben und unten aus dem Feld * heraus (gemessen am 27.08.2026). Mit vier Klassen gewinnt diese. */ /* * DAS IST FUER DAS LAYOUT NICHT DA (Leons Fund, * 28.08.2026: "das Bild ist oben und unten abgeschnitten"). * * Seit die Bilder eine WebP-Schwester bekommen, steckt das in * einem . Damit war es kein direktes Kind der Fassung mehr, * und die Hoehenbegrenzung eine Zeile weiter unten -- ein * Kind-Selektor -- griff nicht: das Bild wuchs ueber das feste Feld * hinaus und wurde an dessen Kante beschnitten. * * display: contents nimmt den Umschlag aus dem Kastenbaum: fuers * Layout ist das wieder direktes Kind. Der Selektor unten * nennt beide Wege ausdruecklich -- Auswahl richtet sich nach dem * DOM, nicht nach dem Layout, und display: contents allein haette * ihn nicht wieder passen lassen. */ .s7b-buehne-fassung > picture, .s7b-buehne > picture { display: contents; } .s7b-artikel-figur.s7b-buehne--fest .s7b-buehne-fassung > .s7b-buehne-bild, .s7b-artikel-figur.s7b-buehne--fest .s7b-buehne-fassung > picture > .s7b-buehne-bild, .s7b-artikel-figur.s7b-buehne--fest .s7b-buehne-fassung > .s7b-buehne-video { display: block; /* * Das Bild bestimmt seine Groesse SELBST und die Fassung folgt ihm. * width/height auto statt 100 Prozent: mit 100 Prozent nimmt das * Element die Groesse des FELDES an, und Rundung, Rand und Schatten * saessen dann um die unsichtbare Letterbox-Luft statt um das Bild. * Die Deckel sind die beiden Kanten des Feldes -- die Hoehe abzueglich * Innenraum und Rand. */ width: auto; height: auto; max-width: 100%; max-height: calc(var(--s7b-buehne-hoehe) - 22px); /* Etwas staerker gerundet als die Daumen (10px) -- die groessere Flaeche vertraegt den groesseren Radius, und die Fassung darum wiederholt ihn eine Stufe hoeher (20px). */ border-radius: 12px; background: none; /* * KEIN eigener Schatten mehr. Das Video bringt von der * Einzelbild-Buehne einen kraeftigen Schlagschatten mit (8/14/26) -- * in einer Mulde saehe das aus wie ein Bild, das aus seiner eigenen * Fassung herausfaellt. Die Tiefe traegt hier die Fassung. */ box-shadow: none; } /* * Der Zaehler: eine kleine Plakette oben rechts auf dem Rose-Glas -- * Archivo-Versalien, gesperrt wie der Kicker, auf einem Hauch Buehnen- * Grund mit Milchglas. Er liegt ueber dem Lichtfall (::after, z-index * 2), sonst schimmerte der Schleier ueber die Schrift. Farben ueber * die Buehnen-Token: das Dunkelschema zieht von selbst mit. */ .s7b-buehne-zaehler { position: absolute; /* * OBEN LINKS, nicht rechts (Leons Fund, 27.08.2026: "oben rechts * haben wir ja immer das Wasserzeichen"). * * Rechts war richtig, solange dort nichts stand. Seit das Studiologo * in jedes Bild gezeichnet wird, sitzt der Zaehler genau darauf -- * und verdeckt ausgerechnet die Herkunftsangabe, um derentwillen das * Zeichen ueberhaupt da ist. Links ist frei und bleibt es: das * Zeichen sitzt fest oben rechts. * * 14px wie die Pfeile: der Zaehler haengt in der FASSUNG, nicht am * Feld -- er soll auf derselben Linie sitzen wie sie. */ top: 14px; left: 14px; z-index: 3; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--s7b-karte-rand); background: color-mix(in srgb, var(--s7b-buehne-grund) 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(30, 12, 12, 0.18); font-family: var(--s7b-versal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--s7b-tinte); /* Ziffern gleicher Breite: "2 / 8" -> "3 / 8" darf nicht wackeln. */ font-variant-numeric: tabular-nums; pointer-events: none; } /* * Die Buehne mit Grossansicht laedt zum Klick -- aber nur ueber dem * BILD: ein Video traegt eigene Controls, dort waere zoom-in eine * falsche Ansage. */ [data-s7b-lupe] .s7b-buehne-bild { cursor: zoom-in; } /* ------------------------------------------------------------------ Uebersicht ALLER Kollektionen (/blog/collections/) Leons Wunsch vom 27.08.2026: "eine Seite, wo alle Collections aufgelistet werden". Bauform wie die Beitragskarten -- Bild oben, Text darunter --, damit die Seite nicht wie eine fremde aussieht. ------------------------------------------------------------------ */ /* * Drei Spalten ab Tablet statt der zwei des Beitragsrasters: eine * Kollektionskachel traegt weniger Text als eine Beitragskarte, und in * zwei Spalten wirkten fuenfundzwanzig davon endlos. */ /* * Topic-Kacheln: ohne Bildfeld. Topics haben keines, und ein leeres * graues Feld ueber jedem Namen saehe aus wie ein fehlgeschlagener * Ladevorgang. Die ganze Kachel ist der Verweis -- ein Knopf darin * waere ein Ziel im Ziel. */ @media (min-width: 560px) { .s7b-raster--themen { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .s7b-raster--themen { grid-template-columns: repeat(4, 1fr); } } .s7b-themakachel { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-decoration: none; color: var(--s7b-tinte); } .s7b-themakachel-titel { font-family: var(--s7b-versal); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; color: var(--s7b-tinte); } .s7b-themakachel-text { font-size: 13.5px; line-height: 1.5; color: var(--s7b-tinte-leise); } .s7b-themakachel-zahl { margin-top: auto; padding-top: 8px; font-family: var(--s7b-versal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s7b-tinte-leise); } @media (hover: hover) { a.s7b-themakachel:hover .s7b-themakachel-titel { color: var(--s7b-akzent-tief); } } a.s7b-themakachel:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 3px; } /* * Die Ueberschriften des Verzeichnisses fuehren auf die Verzeichnisse * (Leons Wunsch, 27.08.2026). Sie sehen aus wie zuvor -- nur der * Pfeil und der Farbwechsel bei Hover sagen, dass es weitergeht. */ .s7b-verz-titel-link { text-decoration: none; color: inherit; transition: color 0.18s ease; } @media (hover: hover) { .s7b-verz-titel-link:hover { color: var(--s7b-akzent-tief); } } .s7b-verz-titel-link:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .s7b-verz-titel-link { transition: none; } } /* * Die Uebersichtsseite selbst braucht keine eigene Optik -- sie erbt * alles von .s7b-archiv. Die Klasse steht als benannter Haken da, * damit spaetere Sonderwuensche eine Stelle haben und niemand sie fuer * vergessen haelt (dieselbe Begruendung wie bei den Knopfgruppen). */ .s7b-archiv--kollektionen { display: block; } @media (min-width: 760px) { .s7b-raster--kollektionen { grid-template-columns: repeat(3, 1fr); } } .s7b-kollkachel { display: flex; flex-direction: column; } /* * Das Bildfeld hat ein FESTES Verhaeltnis. Kollektionsbilder kommen * aus dem Linktree in wechselnden Formaten, und ohne festes Feld * stuenden die Titel einer Reihe auf verschiedenen Hoehen. */ .s7b-kollkachel-bildfeld { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--s7b-akzent) 7%, transparent); } .s7b-kollkachel-bild { display: block; width: 100%; height: 100%; /* cover, nicht contain: hier ist das Bild Blickfang, kein Dokument. Auf der Kollektionsseite selbst steht es gross und ungeschnitten. */ object-fit: cover; } .s7b-kollkachel-titel { margin: 0; font-family: var(--s7b-versal); font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; /* Ausdruecklich: das Website-Theme faerbt Ueberschriften direkt. */ color: var(--s7b-tinte); } .s7b-kollkachel-unter { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--s7b-tinte-leise); } .s7b-kollkachel-zahl { margin: 0; font-family: var(--s7b-versal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s7b-tinte-leise); } /* Der Knopf sitzt unten, egal wie lang der Untertitel ist -- sonst staenden die Knoepfe einer Reihe auf verschiedenen Hoehen. */ .s7b-kollkachel .s7b-knopf { margin-top: auto; } /* ------------------------------------------------------------------ Druckeinstellungen am Artikelende Begriff und Wert als dl/dt/dd -- es sind Begriffe und ihre Werte, keine Daten in Zeilen und Spalten. ------------------------------------------------------------------ */ .s7b-druck { margin-top: 4px; } .s7b-druck-liste { display: grid; /* Eine Spalte auf dem Handy: zwei nebeneinander liessen jeden Wert auf zwei Zeilen umbrechen, und "Bambulab PLA Matte black" ist der laengste davon. */ grid-template-columns: 1fr; gap: 2px 20px; margin: 0; } @media (min-width: 620px) { .s7b-druck-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .s7b-druck-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid var(--s7b-linie); } /* Die letzte Zeile jeder Spalte ohne Strich -- ein Strich unter dem letzten Eintrag zieht eine Linie ins Leere. */ .s7b-druck-zeile:last-child, .s7b-druck-zeile:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .s7b-druck-name { margin: 0; font-family: var(--s7b-versal); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s7b-tinte-leise); } .s7b-druck-wert { margin: 0; font-size: 14px; line-height: 1.45; color: var(--s7b-tinte); } /* ------------------------------------------------------------------ Seitenleiste: zu welchen Kollektionen gehoert dieses Modell Leons Vorgabe vom 27.08.2026 -- ein KLEINERER Kasten rechts, mit Bild. Und von Anfang an eine Liste: "wichtig, dass spaeter auch ein Modell mehrere Kollektionen haben kann". ------------------------------------------------------------------ */ /* * Der Kasten ist KLEINER als seine Nachbarn in der Leiste (Leons * Wunsch): er ordnet nur ein, er verlangt nichts. Weniger Polster, * kein eigener Grund -- er erbt den der Leiste. */ .s7b-kollkarte { gap: 10px; } .s7b-kollkarte-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .s7b-kollkarte-zeile { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--s7b-tinte); transition: background 0.18s ease; } .s7b-kollkarte-bild { width: 48px; height: 48px; flex: 0 0 auto; object-fit: cover; border-radius: 10px; border: 1px solid var(--s7b-linie); /* Fehlt das Bild, bleibt die Flaeche als ruhiges Feld stehen -- ohne sie ruecken die Namen unterschiedlich weit ein. */ background: color-mix(in srgb, var(--s7b-akzent) 8%, transparent); } .s7b-kollkarte-name { font-family: var(--s7b-versal); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } @media (hover: hover) { a.s7b-kollkarte-zeile:hover { background: color-mix(in srgb, var(--s7b-akzent) 9%, transparent); } } a.s7b-kollkarte-zeile:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .s7b-kollkarte-zeile { transition: none; } } /* ------------------------------------------------------------------ Bildstrecke: das grosse Medium und die Daumenleiste darunter ------------------------------------------------------------------ */ .s7b-galerie { display: flex; flex-direction: column; gap: 12px; } /* * Die Leiste ist eine MULDE wie die Filter-Schiene: die Daumen liegen * vertieft im Grund, nicht als lose Kacheln auf ihm -- so liest sich * die Strecke als EIN Bauteil (Buehne oben, Ablage darunter). Flaeche, * Rand und Relief kommen aus den Mulden-Token; das Dunkelschema zieht * damit von selbst mit. fit-content statt voller Breite: eine Mulde, * die weiter reicht als ihre Daumen, saehe wie ein leeres Regal aus. */ .s7b-galerie-leiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); box-shadow: var(--s7b-vertieft); } .s7b-galerie-daumen { /* Der Knopf ist nur der Rahmen des Bildes -- alles, was ein Browser einem Knopf sonst mitgibt, muss weg. */ appearance: none; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; line-height: 0; overflow: hidden; opacity: 0.62; transition: opacity 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .s7b-galerie-daumen img { display: block; /* 68px: ueber dem 24px-Mindestziel der WCAG 2.5.8 und klein genug, dass sechs Daumen in eine Zeile passen. */ width: 68px; height: 68px; object-fit: cover; border-radius: 8px; } /* Das gerade gezeigte Bild ist voll da und rot eingefasst -- ohne die Markierung wuesste niemand, welcher Daumen oben steht. */ .s7b-galerie-daumen.ist-aktiv { opacity: 1; border-color: color-mix(in srgb, var(--s7b-akzent) 55%, transparent); } @media (hover: hover) { .s7b-galerie-daumen:hover { opacity: 1; transform: translateY(-2px); } } .s7b-galerie-daumen:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .s7b-galerie-daumen { transition: none; } .s7b-galerie-daumen:hover { transform: none; } } /* * Video-Daumen: das Abspiel-Dreieck als span + CSS, kein Bild (ein * zweites img ginge durch die Lazyload-Muehle des Themes). Eine kleine * Scheibe im warmen Dunkel mit hellem Dreieck -- FESTE Werte statt * Token, mit Grund: das Zeichen liegt auf einem FOTO, nicht auf einer * Themenflaeche. Ueber wechselnden Bildern traegt nur dunkel-auf-hell, * in beiden Schemata gleich. */ .s7b-galerie-daumen--video { position: relative; } /* * DIE 3D-KACHEL (Leons Wunsch, 27.08.2026): die letzte Kachel der * Bildstrecke fuehrt ins Modell aus ViewerPress3D. * * Das Abzeichen ist ein Wuerfel statt eines Dreiecks -- sonst dieselbe * Bauform wie am Video: eine dunkle Glasscheibe, damit es ueber jedem * Vorschaubild lesbar bleibt. Unten RECHTS statt in der Mitte: anders * als beim Video sagt es nicht "hier kommt Ton", sondern "hier kommt * etwas anderes als ein Bild" -- eine Marke, kein Aufruf. */ .s7b-daumen-modell { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(24, 14, 16, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); color: rgba(255, 251, 246, 0.95); pointer-events: none; } /* Ohne Aufnahme aus ViewerPress3D steht der Wuerfel gross in der Mulde. Eine leere Kachel liesse offen, ob dort etwas fehlt. */ .s7b-daumen-leer { display: grid; place-items: center; width: 100%; height: 100%; background: var(--s7b-mulde-flaeche); color: var(--s7b-tinte-leise); } /* * Der aktive Rahmen bekommt den Akzent wie jeder aktive Daumen -- die * Regel steht an .s7b-galerie-daumen.ist-aktiv und gilt hier mit. * Diese Klasse traegt nur, was die Modellkachel von einem Bild * unterscheidet: sie ist ein Verweis in etwas Bedienbares, kein * Bildwechsel. */ .s7b-galerie-daumen--modell { position: relative; } /* * DAS 3D-FENSTER auf der Buehne. Es nimmt die volle Flaeche der * Fassung -- der Viewer bringt seinen eigenen Rand und seinen eigenen * Grund mit, ein zweiter Rahmen darum waere ein Bild im Bild. * * Feste Hoehe ueber die Buehne (--s7b-buehne-hoehe): das Fenster laedt * erst auf Druck, und ohne feste Hoehe spraenge die Seite in dem * Moment, in dem es kommt. */ .s7b-buehne-modell { display: block; /* * GENAU DIE GROESSE DES TITELBILDS (Leons Wunsch, 27.08.2026). Das * Verhaeltnis kommt aus dem PHP, gerechnet aus den echten Massen des * ersten Bildes -- siehe S7B_Render::galerie. * * Die Breite fuehrt, die Hoehe folgt dem Verhaeltnis: umgekehrt * (feste Hoehe, max-width als Deckel) braeche das Verhaeltnis * genau dann, wenn der Deckel greift, also auf schmalen Schirmen. * * Die 22 Pixel sind Innenraum und Rand der Fassung -- derselbe * Abzug, mit dem auch Bild und Video ihren Deckel bekommen. * * WARUM UEBERHAUPT EINE ANGABE: ein iframe ohne Breitenangabe faellt * auf seine Werksbreite von 300 Pixeln zurueck. In der Fassung * (fit-content) hat 100 Prozent keinen Bezug -- die Fassung wartet * ja selbst auf das Kind. Genau so stand das Fenster hochkant und * schmal in Leons Screenshot. */ aspect-ratio: var(--s7b-modell-verhaeltnis, 1); /* * 100 Prozent DER FASSUNG -- die bekommt ihre Breite eine Regel * weiter unten, und zwar eine bestimmte. * * Der Umweg ist noetig, weil die Fassung sonst fit-content ist: * ein Prozentwert gegen einen Elter, der selbst erst auf sein Kind * wartet, ist ein Zirkel. Der Browser verwirft ihn stillschweigend, * und ein iframe faellt dann auf seine Werksbreite von 300 Pixeln * zurueck -- live gemessen, genau das stand in Leons Screenshot. */ width: 100%; height: auto; border: 0; border-radius: 12px; background: var(--s7b-mulde-flaeche); } /* * DIE FASSUNG UM DAS MODELL bekommt die Groesse des Titelbilds * (Leons Wunsch, 27.08.2026). Vier Klassen, damit sie das * fit-content der Grundregel schlaegt -- Falle 1 des Designschemas. * * Die Rechnung ist dieselbe, die Bild und Video ohnehin bekommen: * Buehnenhoehe minus 22 Pixel Innenraum und Rand, mal Seitenverhaeltnis * -- plus die 22 wieder drauf, denn hier ist die AUSSENkante gemeint. * Der Deckel bei 100 Prozent greift auf schmalen Schirmen; er * rechnet gegen die Buehne, und die ist bestimmt. */ .s7b-artikel-figur.s7b-buehne.zeigt-modell .s7b-buehne-fassung { width: min( 100%, calc((var(--s7b-buehne-hoehe) - 22px) * var(--s7b-modell-verhaeltnis, 1) + 22px) ); } /* Auf der Modell-Kachel gibt es keine Lupe -- der Zeiger soll das nicht anders versprechen. */ .s7b-buehne.zeigt-modell { cursor: default; } .s7b-daumen-abspielen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .s7b-daumen-abspielen::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: rgba(24, 14, 16, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .s7b-daumen-abspielen::after { content: ""; position: absolute; /* Das Dreieck optisch mittig: die Spitze wiegt schwerer als die Basis, 1px nach rechts gleicht das aus. */ width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent rgba(255, 251, 246, 0.95); } /* * Ueberblendung beim Medienwechsel: blog.js setzt ist-neu neu auf das * frische Medium. Als Animation statt transition -- eine transition * braeuchte zwei Zustaende am selben Knoten, das Element wird aber * getauscht. Hinter dem no-preference-Guard: wer weniger Bewegung * will, bekommt den harten Schnitt, der ist hier die ruhigere Fassung. */ @media (prefers-reduced-motion: no-preference) { .s7b-buehne-bild.ist-neu, .s7b-buehne-video.ist-neu { animation: s7bMedienBlende 0.18s ease; } } @keyframes s7bMedienBlende { from { opacity: 0; } } /* ------------------------------------------------------------------ 6b2. Grossansicht -- die Lupe (Overlay, gebaut von blog.js) Eine eigene, ruhigere Flaeche: warmes Fast-Schwarz statt des hellen Grunds -- vor dunklem Grund tritt ein Foto vor, vor hellem tritt es zurueck. Die Werte sind FEST und nicht aus den Token, mit Grund: die Lupe ist in BEIDEN Schemata dunkel (ein heller Vollbild-Blitz beim Oeffnen aus dem Dunkelschema waere ein Schlag ins Auge, ein dunkler aus dem Hellen ist der erwartete "Kino"-Moment). Schrift, Rundungen und der Akzent bleiben die der Seite: Archivo-Versalien fuer den Zaehler, --s7b-akzent fuer den Fokusring. Der Vorhang haengt am body und traegt darum selbst die Klasse s7b -- so erreichen ihn die Token trotzdem. AUSDRUECKLICH KEIN im Top-Layer mehr (Leons dritter Fund, 27.08.2026: "Wenn ich im Vollbildmodus war und dann rausgehe, ist die Seite komplett zerschossen") -- warum, steht am Vorhang unten. ------------------------------------------------------------------ */ /* Solange die Lupe offen ist, steht die Seite dahinter still. */ html.s7b-lupe-offen { overflow: hidden; } /* * DIE LUPE IST EIN FENSTER, kein Vollbild (Leons Wunsch, 27.08.2026: * "Ich moechte das lieber als Overlay, was fast den ganzen Bildschirm * einnimmt -- so wie ein professionelles Overlay, in unserem * Blogdesign"). * * Vorher fuellte der Dialog den Schirm randlos mit fast-schwarzer * Flaeche. Das ist die Machart einer Diaschau, nicht die dieses Blogs * -- hier hat alles eine Fassung, eine Rundung und eine Kante. * * Die Bausteine sind darum die des Schemas (docs/DESIGNSCHEMA.md): * eine Karte als Fenster, eine Mulde um das Bild, Glasplaketten fuer * Zaehler und Pfeile, die Daumen in derselben Machart wie unter der * Buehne. * * DAS FENSTER FOLGT DEM FARBSCHEMA (Leons Wunsch, 27.08.2026: "der * Viewer ist nicht an das Farbschema von Dark und Light angepasst"). * * Eine Fassung lang war es bewusst immer dunkel, mit dem Argument, ein * dunkler Rahmen lasse das Foto besser wirken. Das Argument stimmt * fuer eine Diaschau; hier ist es falsch. Wer im Hellschema liest, * klickt ein Bild an und bekommt einen schwarzen Kasten -- das ist ein * Bruch mitten in der Seite, und die Rezeptur der Seite kennt fuer so * etwas laengst Bausteine. * * Alle Farben kommen darum aus den Token. Der GRUND dahinter bleibt in * beiden Schemata dunkel: er ist kein Bauteil, sondern der Vorhang, * der den Blick vom Dahinter nimmt. */ /* * DER VORHANG -- die Schicht, die frueher Top-Layer plus ::backdrop * des war. * * Gemessen auf der Live-Seite (27.08.2026): faellt der offene Dialog * aus dem Top-Layer -- Chromium tut ihm das beim Verlassen des * Vollbilds an, und dasselbe passiert, wenn ein Skript einen * Vorfahren kurz aus- und wieder einhaengt --, dann bleibt open=true, * das close-Ereignis kommt nie, und der Dialog faellt in die normale * Malreihenfolge. Dort verliert er: .site-main des Themes ist ein * Stapelkontext (z-index: 5), und die sticky Seitenspalte steht im * Markup hinter dem Artikel -- ihre Karten lagen mitten im Fenster. * Ein fixes Element am body war nie im Top-Layer und kann darum * nicht herausfallen. * * Die DOPPELklasse .s7b.s7b-lupe-vorhang ist Absicht: .s7b bringt * die Token (der Vorhang haengt am body, ausserhalb des .s7b-Baums * der Seite), setzt aber weiter unten im Blatt auch display: flex, * gap und width: 100% -- die hoehere Spezifitaet hier gewinnt gegen * diese Regel unabhaengig von der Reihenfolge. */ .s7b.s7b-lupe-vorhang { position: fixed; inset: 0; /* * Praktisch die Decke der z-Skala. Das Hoechste im Theme sind die * GDPR-Leisten mit 9999; nicht das Maximum 2147483647, damit ein * Rest Luft bleibt, falls doch einmal etwas darueber muss. */ z-index: 2147483000; /* * HIER STAND "isolation: isolate", UND GENAU DAS WAR DER FEHLER * (Leons Fund, 28.08.2026: "man sieht im Hintergrund immer noch * nicht den Blog"). * * isolation: isolate macht aus dem Vorhang eine eigene * ZEICHENGRUPPE. Ein Weichzeichner greift aber genau das ab, was * hinter ihm liegt -- und hinter einer eigenen Gruppe liegt * nichts. Der Vorhang zeichnete also ein leeres Dahinter weich und * blieb eine glatte Flaeche, ganz gleich wie klein Toenung und * Radius waren. * * Die Zeile war ohnehin doppelt gemoppelt: position: fixed mit * einem z-index ungleich auto erzeugt den Stapelkontext bereits, * und backdrop-filter erzeugt ihn ein zweites Mal. Was sie schuetzen * sollte -- dass sich nichts aus der Lupe in die Stapel der Seite * einsortiert -- gilt unveraendert weiter. */ display: grid; place-items: center; width: auto; /* * DER VORHANG IST RANDLOS (Messung vom 27.08.2026). * * Die Doppelklasse holt sich die Token von .s7b -- und damit * ungewollt auch deren Seitenpolster und Breitendeckel: die sind * fuer die SEITENSPALTE gedacht, nicht fuer eine Schicht ueber * allem. Auf 390 Pixeln waren das 16 Pixel links, und das * 100vw breite Fenster darin stand entsprechend 16 Pixel zu weit * rechts und ragte rechts hinaus (der Schliessknopf saß 8 Pixel * vor der Kante). * * Ein Vorhang hat keinen Rand. Darum hier ausdruecklich zurueck * auf null. */ padding: 0; max-width: none; margin: 0; /* * DER GRUND IST EIN SCHLEIER, KEIN BRETT (Leons Wunsch, 28.08.2026: * "ich moechte das nicht auf der kompletten Seite haben -- alles * praktisch als Overlay, sodass ich den Hintergrund vom Beitrag * noch verschwommen sehe"). * * Bis hierher deckte er mit 88 Prozent alles zu; der Beitrag war * weg, und die grosse Ansicht wirkte wie eine eigene Seite statt * wie eine Schicht darueber. Jetzt 52 Prozent plus Weichzeichner: * man sieht, WO man ist, ohne dass es vom Bild ablenkt. * * DER WEICHZEICHNER WAR HIER LANGE VERBOTEN -- er hatte die Seite * zweimal zerlegt. Beide Male aber am mit ::backdrop und * dem Top-Layer, aus dem die Lupe herausfiel. Diesen Bau gibt es * nicht mehr: der Vorhang ist ein festes div mit eigenem * Stapelkontext und der Decke der z-Skala. Was er jetzt noch * anrichten kann, ist genau eines -- er macht sich zum * Bezugsrahmen der fest gesetzten Pfeile. Die liegen aber ohnehin * an den Schirmraendern, und der Vorhang IST der Schirm. Live * nachgemessen. * * Der @supports-Zweig weiter unten stellt die Deckung wieder her, * wo es den Weichzeichner nicht gibt: ein halbdurchsichtiger Grund * ohne Weichzeichner ist kein Schleier, sondern ein Blick auf zwei * Bilder gleichzeitig. */ /* * NACHGEZOGEN am 28.08.2026 (Leons Fund: "momentan ist alles die * gleiche Farbe -- man soll im Hintergrund noch die Blogseite * sehen, zwar leicht verschwommen, aber wirklich noch den Blog"). * * 18 Pixel Weichzeichner ueber einer ganzen Seite verruehren alles * zu EINEM Ton: Karten, Text und Bilder verschwinden, und uebrig * bleibt eine Flaeche. Genau das war der erste Anlauf. * * 8 Pixel lassen die Gliederung stehen -- man erkennt Karten und * Ueberschriften wieder, ohne sie lesen zu koennen. Und die * Toenung faellt von 52 auf 22 Prozent: sie soll den Blick * daempfen, nicht das Bild dahinter loeschen. * * Dass die grosse Ansicht trotzdem klar vorne steht, traegt sie * selbst: ihre Flaeche ist deckend. */ background: rgba(12, 8, 10, 0.22); -webkit-backdrop-filter: blur(8px) saturate(115%); backdrop-filter: blur(8px) saturate(115%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .s7b.s7b-lupe-vorhang { background: rgba(12, 8, 10, 0.88); } } /* * hidden muss gegen das display: grid oben gewinnen -- die leise * UA-Regel [hidden] { display: none } verloere den Vergleich, und * die "geschlossene" Lupe stuende weiter ueber der ganzen Seite. */ .s7b.s7b-lupe-vorhang[hidden] { display: none; } .s7b-lupe { /* * Der Anker der absolut gesetzten Pfeile, des Kreuzes und des * Zaehlers. Beim uebernahm dessen UA-position diese * Rolle nebenbei -- ein div muss sie ausdruecklich tragen, sonst * ankern die Knoepfe am Vorhang und haengen neben dem Fenster. */ position: relative; /* Fast der ganze Schirm, aber eben nicht ganz: der Rand Grund ringsum macht aus der Flaeche ein Fenster. */ width: min(1280px, 94vw); height: min(920px, 92vh); max-width: 94vw; max-height: 92vh; padding: 12px; border: 1px solid var(--s7b-karte-rand); border-radius: var(--s7b-radius); /* Deckend, nicht durchsichtig: hinter dem Fenster steht die Seite, und ein Glasfenster davor waere ein unruhiger Untergrund fuer ein Foto. --s7b-deckend ist genau dafuer da und zieht im Dunkelschema von selbst mit. */ background: var(--s7b-deckend); color: var(--s7b-tinte); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--s7b-randlicht); overflow: hidden; /* * Zwei Zeilen: das Bildfeld nimmt, was da ist, die Daumenleiste nur * ihre eigene Hoehe. minmax(0, 1fr) ist Pflicht -- ohne die Null als * Untergrenze waere der Inhalt die Untergrenze, und das Bild * spraengte das Fenster (derselbe Fehler wie frueher an der * Bildflaeche, siehe dort). */ display: grid; grid-template-rows: minmax(0, 1fr); gap: 10px; } /* Mit Daumenleiste sind es zwei Zeilen. :has faellt auf einem alten Browser aus -- dann bleibt es bei einer Zeile, und die Leiste bekommt ihre Hoehe aus sich selbst. */ .s7b-lupe:has(.s7b-lupe-leiste) { grid-template-rows: minmax(0, 1fr) auto; } /* * Auf dem Handy ist ein Fenster mit Rand Verschwendung: bei 390 Pixeln * Breite sind sechs Prozent Rand zwanzig Pixel, die dem Bild fehlen. * Dort bleibt es beim randlosen Vollbild -- die Rundung faellt mit weg, * damit keine Ecke Grund durchscheint. */ /* * ZWEI BEDINGUNGEN, nicht eine (27.08.2026): schmal ODER flach. Ein * Handy im Querformat ist 844 Pixel breit und faellt damit durch jede * Breitenabfrage -- es bekaeme die Rechnerfassung mit 92 Prozent * Hoehe, und darin blieben fuer das Bild rund 250 Pixel uebrig. * * dvh statt vh, mit vh als Rueckfall davor: vh meint auf Handys den * GROSSEN Ausschnitt, also den ohne Adressleiste. Solange die Leiste * steht -- und im Instagram-Browser steht sie praktisch immer --, war * das Fenster hoeher als der Vorhang. Weil der Vorhang seinen Inhalt * mittig setzt, ragte es oben UND unten heraus: Zaehler und * Schliesskreuz lagen unter der oberen Kante, die Daumenleiste unter * der unteren. Genau der Kanal, fuer den dieses Stilblatt gebaut ist. * * Alte Browser ueberlesen die dvh-Zeile und behalten vh -- darum * beide, in dieser Reihenfolge, statt eines @supports. */ @media (max-width: 560px), (max-height: 500px) { .s7b-lupe { width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; } } .s7b-lupe-flaeche { position: relative; display: grid; place-items: center; width: 100%; height: 100%; /* * minmax(0, 1fr) fuer BEIDE Achsen -- ohne das war das Bild in der * Grossansicht viel zu gross (Leons Fund, 27.08.2026). * * Der Grund ist eine Feinheit des Rasters: die Flaeche hat zwar * height: 100%, ihre einzige ZEILE bemisst sich aber am Inhalt. Ein * max-height: 100% am Bild rechnet gegen diese Zeile -- und eine * inhaltsbestimmte Zeile hat keine feste Hoehe, gegen die man * rechnen koennte. Die Angabe wurde also verworfen, und das Bild * erschien in seiner vollen Aufloesung: 1280 Pixel hoch in einem * 720 Pixel hohen Fenster. * * Mit minmax(0, 1fr) bekommt die Zeile eine feste Hoehe, und die 0 * als Untergrenze erlaubt ihr, kleiner zu werden als ihr Inhalt -- * ohne sie waere der Inhalt weiterhin die Untergrenze. */ grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; /* * Das Bildfeld ist eine MULDE, wie die Buehne im Artikel -- dieselbe * Rezeptur, nur in den dunklen Werten des Fensters. Ohne sie schwaebe * das Bild in einer schwarzen Flaeche; mit ihr sitzt es in einer * Fassung, und das Fenster liest sich als Bauteil. */ border-radius: 18px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); box-shadow: var(--s7b-vertieft); } /* * DIE DAUMEN IM FENSTER. Sie sind der Unterschied zwischen "Bild * gross" und "Viewer": bei acht Bildern will man springen, nicht * siebenmal klicken. * * Waagerecht rollend statt umbrechend: eine Leiste, die bei zwanzig * Bildern in vier Zeilen umbricht, nimmt dem Bild die halbe Hoehe. */ .s7b-lupe-leiste { display: flex; gap: 8px; justify-content: flex-start; /* * NUR SO BREIT WIE NOETIG (Leons Wunsch, 27.08.2026: "so gross wie * moeglich, so gross wie noetig -- wenn es mehrere Bilder sind, soll * die Leiste groesser werden"). * * fit-content laesst die Mulde mit der Zahl der Bilder wachsen und * haelt sie bei dreien schmal; margin-inline: auto haelt sie dabei * mittig. Ueber die Fensterbreite hinaus wird gerollt statt * umgebrochen -- dieselbe Ueberlegung wie an der Leiste unter der * Buehne: eine Mulde, die weiter reicht als ihre Daumen, sieht wie * ein leeres Regal aus. */ width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); scrollbar-width: thin; } .s7b-lupe-daumen { flex: 0 0 auto; appearance: none; padding: 0; border: 2px solid transparent; border-radius: 9px; background: none; cursor: pointer; line-height: 0; overflow: hidden; opacity: 0.55; transition: opacity 0.18s ease, border-color 0.18s ease; } .s7b-lupe-daumen img { display: block; width: 54px; height: 54px; object-fit: cover; } .s7b-lupe-daumen.ist-aktiv { opacity: 1; border-color: var(--s7b-akzent); } @media (hover: hover) { .s7b-lupe-daumen:hover { opacity: 0.85; } } .s7b-lupe-daumen:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .s7b-lupe-daumen { transition: none; } } /* Auf dem Handy kleiner: dort zaehlt jeder Pixel Bildhoehe. Schmal ODER flach -- im Querformat zaehlt er noch mehr. */ @media (max-width: 560px), (max-height: 500px) { .s7b-lupe-leiste { border-radius: 0; border: 0; justify-content: flex-start; } .s7b-lupe-daumen img { width: 44px; height: 44px; } /* Randlos: ohne den Innenraum des Fensters darf der Zaehler naeher an die Kante. */ .s7b-lupe-zaehler { top: 14px; left: 14px; } } .s7b-lupe-bild { display: block; max-width: 100%; max-height: 100%; object-fit: contain; /* Alle Gesten gehoeren dem Skript: Pinch, Ziehen, Wischen. Ohne touch-action: none braeche der Browser die Zeigerfolge fuer sein eigenes Seiten-Pinch ab (pointercancel mitten im Zoom). */ touch-action: none; cursor: zoom-in; /* transform (Zoom + Zug) kommt als Inline-Stil aus blog.js. */ transform-origin: center; } .s7b-lupe-bild.ist-gezoomt { cursor: grab; } .s7b-lupe-bild.ist-gezoomt:active { cursor: grabbing; } .s7b-lupe-video { display: block; max-width: 100%; max-height: 100%; background: #140e10; } /* * DAS 3D-MODELL IN DER LUPE (Leons Wunsch, 27.08.2026: "zusaetzlich * soll das auch in der grossen Ansicht zu sehen sein"). * * Hier gilt das Gegenteil der Buehne: dort bekommt das Fenster die * Groesse des Titelbilds, hier nimmt es den ganzen Platz. Wer die * Grossansicht oeffnet, will gross -- und ein Modell, das man drehen * kann, erst recht. * * Kein touch-action: none wie am Bild: die Gesten gehoeren hier dem * Viewer im Rahmen, nicht unserem Zoom. Ein iframe verschluckt sie * ohnehin, aber die Regel steht als Ansage da, nicht als Zufall. */ .s7b-lupe-modell { display: block; /* * Ausdruecklich gedehnt: die Lupenflaeche zentriert ihre Kinder * (place-items: center), und ein zentriertes Rasterkind bemisst * sich an seinem Inhalt. Ein iframe hat als Inhalt nichts, was der * Elter sehen koennte -- es bliebe bei den 300 Pixeln ab Werk. */ justify-self: stretch; align-self: stretch; width: 100%; height: 100%; border: 0; border-radius: 12px; background: var(--s7b-mulde-flaeche); } /* * Die Modellkachel in der Lupenleiste. Ohne Aufnahme aus * ViewerPress3D traegt sie nur den Wuerfel -- dann braucht sie eine * Flaeche, sonst faellt sie als leeres Loch zwischen den Bildern auf. */ .s7b-lupe-daumen--modell { display: grid; place-items: center; background: rgba(255, 251, 246, 0.1); } .s7b-lupe-daumen--modell > * { grid-area: 1 / 1; } /* ================================================================== DIE GASTSEITE (Leons Idee, 28.08.2026): eine eigenstaendige Seite in Blog-Optik -- Karte auf dem Grund, die Felder als Mulden. Sie nutzt die Token des Blogs, gehoert aber keinem Theme: das Markup rendert S7B_Gast selbst. ================================================================== */ .s7b-gastseite { margin: 0; min-height: 100vh; background: var(--s7b-grund-basis, #fdf3f0); font-family: var(--s7b-schrift); color: var(--s7b-tinte); } .s7b-gast { max-width: 680px; margin: 0 auto; padding: clamp(24px, 6vw, 56px) clamp(14px, 4vw, 20px); } .s7b-gast-kopf { margin-bottom: 22px; } .s7b-gast-titel { margin: 6px 0 10px; font-family: var(--s7b-versal); font-size: clamp(22px, 4.4vw, 32px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--s7b-tinte); overflow-wrap: break-word; } .s7b-gast-text { margin: 0; color: var(--s7b-tinte-leise); line-height: 1.6; } .s7b-gast-meldung { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--s7b-akzent); border-radius: 0 10px 10px 0; background: var(--s7b-karte-flaeche); font-weight: 600; } .s7b-gast-formular { display: flex; flex-direction: column; gap: 16px; } .s7b-gast-feld { display: flex; flex-direction: column; gap: 6px; } .s7b-gast-feld > span { font-family: var(--s7b-versal); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .s7b-gast-feld input, .s7b-gast-feld textarea { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); box-shadow: var(--s7b-vertieft); color: var(--s7b-tinte); /* 16px: darunter zoomt iOS beim Fokus die ganze Seite. */ font-size: 16px; font-family: var(--s7b-schrift); } .s7b-gast-feld textarea { resize: vertical; } .s7b-gast-werk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; } .s7b-gast-werk input { margin-top: 3px; } .s7b-gast-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; } /* Der Honigtopf: raus aus dem Bild, aber NICHT display:none -- die dummen Bots pruefen genau darauf. */ .s7b-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ================================================================== DIE SUCHE in der Kopfzeile (Ideenkatalog 28.08.2026). Das Feld ist eine Mulde (etwas, in das man etwas hineinlegt), die Trefferliste eine schwebende Karte -- dieselbe Sprache wie das Autor-Popover. ================================================================== */ .s7b-suche { position: relative; width: min(420px, 100%); } /* * DIE ZWEI PLAETZE DER SUCHE (Leons Wuensche, 28.08.2026). * * Uebersicht: als DRITTE GRUPPE im Filterblock, unter Collections * und Topics -- eingebettet wie die Schienen, mit derselben kleinen * Beschriftung und einem dezenten Trennstrich darueber. Ein erster * Wurf hatte sie rechts neben dem Archiv-Kopf; Leons Entscheid war * die Einbettung bei den Kategorien. * * Artikel: als Kasten in der Seitenleiste (siehe .s7b-suche-kasten). */ /* ================================================================== DER EINKLAPPBARE FILTERBLOCK (Leons Wunsch, 28.08.2026: "das nimmt mit der Zeit zu viel Platz weg"). Zugeklappt ist es EINE Zeile in Muldenform -- dieselbe Rezeptur wie die Schienen darin, damit der Kopf sichtbar zu ihnen gehoert. ================================================================== */ /* * DER GEMEINSAME KASTEN (Leons Vorschlag, 28.08.2026): Suche und * Kategorien in EINER Karte, in derselben Sprache wie die * Seitenleisten-Kaesten. Die Karten-Token holt sich der Block ueber * .s7b-karte in der Klassenliste; hier steht nur sein Innenleben. */ .s7b-filter-block { width: fit-content; max-width: 100%; margin-inline: auto; padding: 16px 20px; } /* * EINE REIHE, solange zu ist. Geht der Klappteil auf, nimmt er die * volle Breite (Regel unten) und rutscht damit in eine eigene Zeile * -- die Karte waechst von selbst mit. Das ist die ganze "Dynamik": * eine Zeile CSS statt eines Skripts, das Hoehen misst. */ .s7b-filter-reihe { display: flex; flex-wrap: wrap; /* * An der UNTERKANTE ausrichten, nicht mittig (Leons Fund, * 28.08.2026: "die beiden Mulden sollen in einer Linie sein"). * * Die Suche traegt ueber ihrer Mulde noch die Beschriftung * "SEARCH", der Kategorie-Balken nichts. Mittig ausgerichtet * werden die GRUPPEN zentriert -- und weil die eine hoeher ist, * rutschte ihre Mulde nach unten. Beide Mulden sind 38 Pixel hoch * und schliessen unten ab: an der Unterkante liegen sie damit * exakt auf einer Linie. */ align-items: flex-end; justify-content: center; gap: 12px 18px; } .s7b-filter-klapp { width: fit-content; max-width: 100%; } .s7b-filter-klapp[open] { flex: 1 1 100%; } /* * Die Gruppe um den Klappteil traegt seine Ueberschrift -- genau wie * bei der Suche daneben. Geht der Klappteil auf, geht die Gruppe * mit auf volle Breite, sonst risse der Kasten in zwei Spalten. */ .s7b-filter-gruppe--klapp { margin: 0; } .s7b-filter-gruppe--klapp:has(.s7b-filter-klapp[open]) { flex: 1 1 100%; } /* * DER SUCHKASTEN DARF NICHT BESCHNEIDEN (Leons Fund, 28.08.2026: * "auf der Hauptseite verschwinden die Treffer innerhalb des * Kastens"). * * Der Filterkasten ist eine Karte, und Karten haben im Blog * overflow: hidden -- damit ein Kartenbild an der Rundung endet. Die * Trefferliste haengt aber UNTER dem Feld und ragt aus der Karte * heraus; sie wurde an deren Kante abgeschnitten. Sichtbar heisst * hier: die Liste darf hinaus. * * position + z-index dazu, aus demselben Grund wie am * Seitenleisten-Kasten: die backdrop-filter der Nachbarn spannen * eigene Zeichenraeume auf, aus denen ein z-index nicht * herausreicht (Falle 8). */ .s7b-filter-block { overflow: visible; position: relative; } .s7b-filter-block:focus-within, .s7b-filter-block:has(.s7b-suche-treffer:not([hidden])) { z-index: 9; } /* * FILTER ZURUECKSETZEN. Steht als letzte Zeile im aufgeklappten * Teil, in der Sprache der Chips -- aber mit dem Akzent am Rand: * es ist die einzige Handlung dort, die etwas WEGNIMMT. */ .s7b-filter-zurueck { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin-top: 4px; padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--s7b-akzent) 34%, transparent); background: var(--s7b-karte-flaeche); color: var(--s7b-akzent-tief); font-family: var(--s7b-versal); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } @media (hover: hover) { .s7b-filter-zurueck:hover { border-color: var(--s7b-akzent); } } .s7b-filter-zurueck:focus-visible { outline: 2px solid color-mix(in srgb, var(--s7b-akzent) 55%, transparent); outline-offset: 2px; } .s7b-klapp-kopf { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); box-shadow: var(--s7b-vertieft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; /* Die Werksmarke des summary sitzt in jedem Browser anders -- der eigene Haken rechts ersetzt sie. */ list-style: none; } .s7b-klapp-kopf::-webkit-details-marker { display: none; } /* Der Kicker im Kopf traegt keinen eigenen Abstand mehr -- die Zeile setzt ihn ueber gap. */ .s7b-klapp-kopf .s7b-filter-label { margin: 0; } /* * Was gerade gefiltert ist, steht IN der Zeile: ein zugeklappter * Filter, der seinen Zustand verschweigt, waere eine Falle. Der * Akzent traegt ihn -- er ist die einzige Stelle im Kopf, die eine * Entscheidung meldet. */ .s7b-klapp-aktiv { font-family: var(--s7b-versal); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s7b-akzent-tief); } .s7b-klapp-zahl { font-size: 11px; color: var(--s7b-tinte-leise); } .s7b-klapp-pfeil { display: grid; place-items: center; color: var(--s7b-tinte-leise); } @media (prefers-reduced-motion: no-preference) { .s7b-klapp-pfeil { transition: transform 0.18s ease; } } .s7b-filter-klapp[open] .s7b-klapp-pfeil { transform: rotate(180deg); } @media (hover: hover) { .s7b-klapp-kopf:hover { border-color: color-mix(in srgb, var(--s7b-akzent) 34%, transparent); } } .s7b-klapp-kopf:focus-visible { outline: 2px solid color-mix(in srgb, var(--s7b-akzent) 55%, transparent); outline-offset: 3px; } /* Luft zwischen Kopf und den aufgeklappten Schienen. */ .s7b-filter-klapp[open] .s7b-filter-gruppen { margin-top: 16px; } /* In der Reihe traegt der Kasten den Abstand -- ein eigener Rand hier verschoebe die Suche gegen den Kategorie-Balken daneben. */ .s7b-filter-gruppe--suche { margin: 0; } /* * DIE MULDE UM DAS FELD -- dieselbe Rezeptur wie die Pillen-Schienen * (Token, keine Kopie). Das Feld darin ist RANDLOS: die Mulde IST * jetzt das Eingefaesst-Sein, ein zweiter vertiefter Rand im * vertieften Traeger waere ein Relief im Relief. */ .s7b-suche-mulde { width: min(420px, 100%); margin-inline: auto; /* * KEIN eigenes Polster: das traegt das Feld darin. Zwei Polster * uebereinander machten die Mulde 60 Pixel hoch, waehrend der * Kategorie-Balken daneben 38 misst (live gemessen, 28.08.2026) -- * zwei Bedienelemente derselben Zeile duerfen sich in der Hoehe * nicht unterscheiden. */ padding: 0; border-radius: 999px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); box-shadow: var(--s7b-vertieft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .s7b-suche-mulde .s7b-suche { width: 100%; } .s7b-suche-mulde .s7b-suche-feld { border: 0; background: none; box-shadow: none; /* * KLEMME GEGEN DAS THEME (live gemessen, 28.08.2026): das Feld war * 277 Pixel breit in einer 243er Mulde und ragte 35 Pixel rechts * hinaus -- der helle Streifen in Leons Screenshot. Das * Website-Theme gibt seinen Suchfeldern eine eigene Breite und * schlaegt die Ein-Klassen-Regel darueber; hier stehen zwei * Klassen, und max-width laesst ihm keinen Ausweg. */ width: 100%; max-width: 100%; min-width: 0; /* * 8 statt 9 wie am Kategorie-Kopf: die Mulde traegt hier einen * eigenen Rahmen, der Kopf zaehlt seinen ins Polster. Ein Pixel je * Seite weniger, und beide messen live dieselben 38 (nachgemessen * 28.08.2026). Die Schrift bleibt bei 16px -- darunter zoomt iOS. */ padding: 8px 18px; line-height: 20px; } /* Im Seitenleisten-Kasten nimmt das Feld die Kastenbreite. */ .s7b-suche-kasten .s7b-suche { width: 100%; } /* * DER SUCHKASTEN LIEGT OBEN, SOLANGE GESUCHT WIRD (Leons Fund, * 28.08.2026: "die anderen Boxen liegen ueber den Suchergebnissen, * die sind nicht lesbar"). * * Ursache ist Falle 8 des Designschemas, diesmal harmlos-gemeint: * JEDER Seitenleisten-Kasten traegt backdrop-filter, und der spannt * einen eigenen Zeichenraum auf. Damit malt jeder Kasten, der im * Markup SPAETER kommt, ueber die Trefferliste -- deren z-index 7 * gilt nur innerhalb ihres eigenen Raums und kann aus ihm nicht * heraus. * * position + z-index heben den Suchkasten in dieselbe Ebene wie * seine Nachbarn und dort nach vorn. :focus-within statt dauerhaft: * ausserhalb der Suche soll die normale Reihenfolge gelten -- ein * Kasten, der immer oben liegt, waere ein Fenster ohne Anlass. */ .s7b-suche-kasten { position: relative; } /* * SOLANGE DIE LISTE OFFEN IST, nicht nur solange der Fokus drin sitzt * (Leons Fund, 28.08.2026: "wenn ich wegklicke und die Suche noch * aktiv hab, ist sie wieder unterhalb der Kaestchen"). * * :focus-within allein reichte nicht: die Trefferliste bleibt nach * einem Klick daneben stehen, der Fokus aber nicht -- und in dem * Augenblick fiel der Kasten in die normale Reihenfolge zurueck und * die Nachbarn malten wieder darueber. * * :has fragt nach dem, worum es wirklich geht: liegt hier eine * sichtbare Trefferliste? Beide Regeln stehen nebeneinander, damit * ein Browser ohne :has wenigstens das alte Verhalten behaelt. */ .s7b-suche-kasten:focus-within, .s7b-suche-kasten:has(.s7b-suche-treffer:not([hidden])) { z-index: 9; } /* * ZWEI KLASSEN, UND DAS IST DER GANZE WITZ (live nachgewiesen, * 28.08.2026). * * Das Website-Theme setzt `input[type="search"] { box-sizing: * content-box }`. Dieser Selektor hat Typ PLUS Attribut und schlaegt * damit jede Ein-Klassen-Regel -- auch die .s7b-Grundregel und einen * ersten Reparaturversuch direkt an .s7b-suche-feld. Das Innenpolster * kam dadurch OBEN DRAUF: das Feld war 277 Pixel breit in einer * 243er Mulde und ragte 35 Pixel hinaus, im Seitenleisten-Kasten * 22 Pixel. * * .s7b davor macht zwei Klassen und gewinnt. Falle 1 des * Designschemas, diesmal gegen eine Regel von aussen. */ .s7b .s7b-suche-feld { box-sizing: border-box; } .s7b-suche-feld { width: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--s7b-mulde-rand); background: var(--s7b-mulde-flaeche); box-shadow: var(--s7b-vertieft); color: var(--s7b-tinte); /* 16px, nicht kleiner: darunter zoomt iOS beim Fokus die ganze Seite -- dieselbe Regel wie am Newsletter-Feld. */ font-size: 16px; font-family: var(--s7b-schrift); } .s7b-suche-feld::placeholder { color: var(--s7b-tinte-leise); } .s7b-suche-feld:focus-visible { outline: 2px solid color-mix(in srgb, var(--s7b-akzent) 55%, transparent); outline-offset: 2px; } /* * IN DER MULDE TRAEGT DIE MULDE DEN RING (Leons Fund, 28.08.2026: * "der rote aktivierte Balken ist nicht gleich dem der Kontur"). * * Am Feld gezeichnet lag der Ring zwei Pixel AUSSERHALB der Mulde * und folgte einer anderen Kante als der sichtbaren -- zwei fast * gleiche Pillen uebereinander sehen aus wie ein Fehler. Jetzt * umfaehrt er genau die Kontur, die man sieht. */ .s7b-suche-mulde:focus-within { outline: 2px solid color-mix(in srgb, var(--s7b-akzent) 55%, transparent); outline-offset: 2px; } .s7b-suche-mulde .s7b-suche-feld:focus-visible { outline: none; } /* Das eingebaute Loesch-Kreuz der Browser reicht -- kein eigenes. */ .s7b-suche-treffer { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 7; max-height: min(420px, 60vh); overflow-y: auto; padding: 8px; border-radius: var(--s7b-radius); /* * DECKEND, nicht glaesern (Leons Fund, 28.08.2026: "die Suchen * werden oberhalb der Boxen angezeigt, sind aber transparent -- * dadurch wird der Inhalt der darunterliegenden Boxen sichtbar"). * * --s7b-glas-verlauf laeuft von 85 auf 68 Prozent Weiss aus. Ueber * dem hellen Seitengrund faellt das nicht auf; ueber einem * Nachbarkasten mit eigenem Text schon -- dann standen zwei * Schriften uebereinander, und keine war zu lesen. * * Der Schimmer bleibt: er liegt jetzt als background-IMAGE auf * einer deckenden Grundfarbe, statt selbst der ganze Grund zu sein. * backdrop-filter faellt weg -- was dahinter liegt, soll gar nicht * mehr durchkommen, weder scharf noch verschwommen. */ background-color: var(--s7b-deckend); background-image: var(--s7b-glas-verlauf); border: 1px solid var(--s7b-karte-rand); box-shadow: var(--s7b-glas-schatten-hoch); } /* [hidden] muss gegen nichts gewinnen -- aber ausdruecklich, wie ueberall im Blog (Falle 3 des Designschemas). */ .s7b-suche-treffer[hidden] { display: none; } .s7b-suche-eintrag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--s7b-tinte); } .s7b-suche-eintrag img { width: 44px; height: 44px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; } @media (hover: hover) { .s7b-suche-eintrag:hover { background: var(--s7b-mulde-flaeche); } } .s7b-suche-eintrag:focus-visible { outline: 2px solid color-mix(in srgb, var(--s7b-akzent) 55%, transparent); outline-offset: -2px; } .s7b-suche-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .s7b-suche-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s7b-suche-unter { font-size: 11.5px; color: var(--s7b-tinte-leise); } .s7b-suche-leer { margin: 0; padding: 10px 12px; font-size: 13px; color: var(--s7b-tinte-leise); } /* ================================================================== "MORE FROM THE STUDIO" -- der Kartenblock unter dem Artikel (Ideenkatalog 28.08.2026). Vier kleine Karten: Bild, Titel, Datum. Bewusst kleiner als die Uebersichtskarten -- unter einem gelesenen Artikel ist das ein Wegweiser, kein zweites Schaufenster. ================================================================== */ .s7b-weiter { margin-top: 26px; } /* * ZWEI KLASSEN, WEIL DIE UEBERSCHRIFT ZWEI TRAEGT (Leons Fund, * 28.08.2026 -- er musste zweimal nachfassen, bis ich es sah). * * Das h2 heisst "s7b-autor-kicker s7b-weiter-titel". Beide Regeln * hatten EINE Klasse, und bei gleicher Spezifitaet gewinnt die * spaetere Zeile -- .s7b-autor-kicker steht rund viertausend Zeilen * weiter unten mit margin-bottom 10px und hat meine 24 und dann 34 * schlicht ueberschrieben. Live gemessen: 10 Pixel, obwohl 34 * dastand. Falle 2 des Designschemas, lehrbuchmaessig. * * Der rote Traeger sitzt ausserdem UNTER dem Text und isst vom * Abstand mit -- darum die grosszuegige Zahl. */ .s7b-weiter .s7b-weiter-titel { margin: 0 0 34px; } /* * DAS LAUFBAND. Vier gleich breite Karten, die zur Seite laufen, * wenn sie nicht passen -- mit Schnappen, damit nie eine halbe Karte * stehen bleibt. * * Der Balken bleibt verborgen: er wuerde das Band um seine eigene * Hoehe aufblaehen, und gerollt wird mit Finger oder Pfeil. */ .s7b-weiter-band { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; -ms-overflow-style: none; /* Damit der Kartenschatten nicht am Rand des Bandes abgeschnitten wird -- gerollt wird waagerecht, senkrecht darf er hinaus. */ padding-block: 4px; } .s7b-weiter-band::-webkit-scrollbar { display: none; } /* * Auf dem Handy 78 Prozent: die naechste Karte lugt hervor. Ein Band, * das mit einer ganzen Karte abschliesst, sieht aus wie ein Ende -- * der angeschnittene Nachbar ist die Einladung zum Wischen. */ .s7b-weiter-band > .s7b-weiter-karte { flex: 0 0 78%; scroll-snap-align: start; } @media (min-width: 560px) { .s7b-weiter-band > .s7b-weiter-karte { flex-basis: calc((100% - 12px) / 2); } } /* Ab Tablet-Breite passen alle vier -- dann rollt nichts mehr, und die Pfeile bleiben weg (das entscheidet blog.js an der Messung). */ @media (min-width: 700px) { .s7b-weiter-band > .s7b-weiter-karte { flex-basis: calc((100% - 36px) / 4); } } /* * Die Pfeile sitzen NEBEN der Ueberschrift, nicht auf den Karten: * auf einem Bild liegend braeuchten sie eine Glasplakette und Platz, * den die kleinen Karten nicht haben. Oben rechts sind sie da, wo * man sie sucht, und verdecken nichts. */ .s7b-weiter-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .s7b-weiter-steuer { display: flex; gap: 8px; flex: 0 0 auto; } /* * [hidden] MUSS gegen das display: flex darueber gewinnen -- sonst * ist das Attribut wirkungslos, und die Pfeile stuenden auch da, wo * es nichts zu rollen gibt. Falle 3 des Designschemas, und ich bin * beim Bauen prompt hineingetreten (28.08.2026). */ .s7b-weiter-steuer[hidden] { display: none; } /* * Die Karte selbst traegt die Karten-Token (via .s7b-karte in der * Klassenliste); hier steht nur das Innenleben. Der ganze Kasten ist * der Verweis -- Tippziel weit ueber jeder Untergrenze. */ .s7b-weiter-karte { display: flex; flex-direction: column; gap: 8px; padding: 10px; text-decoration: none; color: var(--s7b-tinte); } .s7b-weiter-bild { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; } /* Ohne Bild ein stiller Platzhalter in Muldenfarbe -- die Zeile soll buendig bleiben. */ .s7b-weiter-bild--leer { background: var(--s7b-mulde-flaeche); } .s7b-weiter-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .s7b-weiter-name { font-family: var(--s7b-versal); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; /* Zwei Zeilen, dann Schluss: ein fuenfzeiliger Titel spraengte die Kartenreihe auseinander. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .s7b-weiter-datum { font-size: 11px; color: var(--s7b-tinte-leise); } @media (hover: hover) { .s7b-weiter-karte:hover .s7b-weiter-name { color: var(--s7b-akzent-tief); } } /* * Der Schliessknopf: dieselbe runde Glas-Bauform wie die Teilen- * Knoepfe, nur auf dunklem Grund -- feste helle Werte, Begruendung * wie am Lupen-Grund (die Flaeche ist in beiden Schemata dunkel). */ /* * DIE PFEILE IN DER LUPE (Leons Wunsch, 27.08.2026). * * Blaettern konnte die Lupe schon -- ueber Tasten und Wischen. Nur * sehen konnte man es nicht, und was man nicht sieht, benutzt niemand. * * Dieselbe Scheibe wie der Schliessen-Knopf, nur groesser: sie liegen * am aeusseren Rand einer dunklen Flaeche, wo es keine Nachbarschaft * gibt, an der sich die Groesse relativieren koennte. */ .s7b-lupe-pfeil { position: absolute; /* * 44 Prozent statt 50: die Daumenleiste sitzt unten im Fenster, und * die exakte Mitte laege damit tiefer als die Mitte des BILDES. Der * Pfeil gehoert zum Bild. */ top: 44%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; appearance: none; border-radius: 50%; border: 1px solid var(--s7b-karte-rand); /* * DECKEND und ausdruecklich OHNE backdrop-filter (Leons Fund, * 27.08.2026, zweiter Anlauf). * * Ein Weichzeichner am Grund des damaligen hatte die * Seite schon einmal zerlegt; ich habe ihn dort entfernt und im * selben Zug an die Plaketten IM Fenster gehaengt -- und damit * denselben Fehler noch einmal gemacht. backdrop-filter spannt * einen eigenen Zeichenraum auf, und mehrere Browser warfen * daraufhin den ganzen Dialog aus der obersten Ebene: die Seite * dahinter wurde ueber ihm gezeichnet. * * Diese Scheiben liegen ohnehin auf einer deckenden Flaeche, nicht * auf dem Foto -- ein Weichzeichner haette hier nie etwas zu * verwischen gehabt. */ background: var(--s7b-deckend); color: var(--s7b-tinte); cursor: pointer; box-shadow: var(--s7b-glas-schatten); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .s7b-lupe-pfeil svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 24px vom Fensterrand: der Innenraum betraegt 12, die Scheibe liegt also sichtbar AUF dem Bild und nicht halb auf der Fassung. */ .s7b-lupe-pfeil--zurueck { left: 24px; } .s7b-lupe-pfeil--vor { right: 24px; } @media (hover: hover) { .s7b-lupe-pfeil:hover { border-color: color-mix(in srgb, var(--s7b-akzent) 34%, transparent); } .s7b-lupe-pfeil--zurueck:hover { transform: translateY(-50%) translateX(-2px); } .s7b-lupe-pfeil--vor:hover { transform: translateY(-50%) translateX(2px); } } .s7b-lupe-pfeil:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .s7b-lupe-pfeil { transition: none; } .s7b-lupe-pfeil:hover { transform: translateY(-50%); } } /* * Auf dem Handy ruecken sie nach unten neben den Zaehler, statt links * und rechts auf dem Bild zu liegen: bei 390 Pixeln Breite fraessen * zwei 52er Scheiben ein Viertel des Bildes -- und genau dieses Bild * will man in der Lupe ja gross sehen. */ /* * NUR im Hochformat nach unten. Im Querformat ist links und rechts * Platz genug -- dort bleiben sie am Bildrand, wo sie hingehoeren. * * bottom: 82px statt 18px (Fund vom 27.08.2026): die Daumenleiste ist * die unterste Rasterzeile des Fensters und rund 64 Pixel hoch. Mit * 18 Pixeln lagen die Pfeile MITTEN DARAUF und verdeckten deckend * genau die Kacheln in der Mitte -- ausgerechnet die, auf die das * Skript den aktiven Daumen rollt. Und Pfeile gibt es nur bei * mehreren Medien, die Leiste auch: wo die einen sind, ist immer * auch die andere. */ @media (max-width: 560px) { .s7b-lupe-pfeil { top: auto; bottom: 82px; transform: none; width: 46px; height: 46px; } .s7b-lupe-pfeil--zurueck { left: calc(50% - 84px); } .s7b-lupe-pfeil--vor { right: calc(50% - 84px); } @media (hover: hover) { .s7b-lupe-pfeil--zurueck:hover, .s7b-lupe-pfeil--vor:hover { transform: none; } } } /* * Das Schliesskreuz. Es ist der einzige Knopf, den man SUCHT statt zu * finden, wenn er zu leise ist (Leons Fund, 27.08.2026: "oben rechts * das x sieht man nicht gut"). Vorher war es eine helle Glasscheibe * auf einer hellen Flaeche -- im Hellschema kaum vom Grund zu * unterscheiden. * * Jetzt traegt es die Tinte als Flaeche und den Grund als Zeichen: * derselbe Umkehrtrick wie bei einem Zustandsknopf, und damit in * beiden Schemata der dunkelste oder hellste Punkt in seiner Ecke. */ .s7b-lupe-schliessen { position: absolute; top: 24px; right: 24px; z-index: 3; display: grid; place-items: center; /* * DIESELBE SCHEIBE WIE DIE PFEILE (Leons Fund, 27.08.2026: "der * X-Knopf soll professioneller gestaltet werden"). * * Vorher war er ein dunkler Klecks mit einem Malzeichen darin -- * eine eigene Machart neben zwei Knoepfen, die anders aussahen. * Drei Bedienelemente in einem Fenster sollen eine Familie sein: * gleiche Scheibe, gleicher Rand, gleiche Strichstaerke im Zeichen. * Nur etwas kleiner, denn Schliessen ist die seltenere Handlung. */ width: 44px; height: 44px; padding: 0; appearance: none; border-radius: 50%; border: 1px solid var(--s7b-karte-rand); background: var(--s7b-deckend); color: var(--s7b-tinte); cursor: pointer; box-shadow: var(--s7b-glas-schatten); transition: border-color 0.18s ease, color 0.18s ease, transform 0.12s ease; } /* Gezeichnet, nicht gesetzt -- und mit derselben Strichstaerke wie die Haken daneben. Etwas kleiner als sie: ein Kreuz fuellt seine Zeichenflaeche voll aus, ein Haken nur zur Haelfte. */ .s7b-lupe-schliessen svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (hover: hover) { .s7b-lupe-schliessen:hover { border-color: color-mix(in srgb, var(--s7b-akzent) 40%, transparent); color: var(--s7b-akzent); } } @media (hover: hover) { .s7b-lupe-schliessen:hover { background: rgba(255, 255, 255, 0.14); } } .s7b-lupe-schliessen:active { transform: scale(0.94, 0.88); } .s7b-lupe-schliessen:focus-visible, .s7b-lupe-bild:focus-visible { outline: 2px solid var(--s7b-akzent); outline-offset: 2px; } /* * Der Zaehler der Lupe: dieselbe Plakette wie auf der Buehne, in der * Dunkel-Fassung der Flaeche -- unten mittig, wo der Daumen beim * Wischen ohnehin liegt. */ /* * Der Zaehler sitzt OBEN LINKS im Fenster (Leons Fund, 27.08.2026: * "der Seitenzaehler sitzt ueber den Bildern, der muss woanders hin"). * * Unten mittig war richtig, solange das Fenster nur ein Bild enthielt. * Seit die Daumenleiste dort steht, lag er auf ihr -- und verdeckte * ausgerechnet die Kacheln in der Mitte. * * Oben links ist die einzige freie Ecke: oben rechts sitzt das * Schliesskreuz, links und rechts auf halber Hoehe die Pfeile, unten * die Daumen. Und es ist die Ecke, an der man ohnehin zu lesen * beginnt. */ .s7b-lupe-zaehler { position: absolute; top: 24px; left: 24px; z-index: 2; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--s7b-karte-rand); /* Deckend, kein backdrop-filter -- siehe .s7b-lupe-pfeil. */ background: var(--s7b-deckend); font-family: var(--s7b-versal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--s7b-tinte-leise); font-variant-numeric: tabular-nums; pointer-events: none; } /* ------------------------------------------------------------------ 6c. Kicker und Avatar Der Kicker ist die gesperrte Versalien-Zeile ueber Karten- und Artikelkoepfen, mit dem roten Merkquadrat davor. Der Avatar ist die Initiale an der Meta-Zeile -- eine warme Scheibe, kein Foto. ------------------------------------------------------------------ */ .s7b-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--s7b-versal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s7b-tinte-leise); } .s7b-kicker::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--s7b-akzent); box-shadow: 1px 2px 3px rgba(107, 62, 62, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .s7b-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--s7b-avatar-verlauf); box-shadow: var(--s7b-erhaben); font-family: var(--s7b-versal); font-size: 13px; font-weight: 800; color: var(--s7b-akzent-tief); } /* * MEHRERE AUTOREN (Leons Wunsch, 27.08.2026): die Avatare liegen wie * aufgefaecherte Karten uebereinander. * * Der Ueberlappung braucht es einen Saum, sonst verschmelzen zwei * Scheiben zu einer Bohne. Der Saum ist ein zweiter, ausserer * box-shadow in der Grundfarbe -- ein Rand wuerde die Scheibe * groesser machen und die Reihe aus der Zeilenhoehe druecken. * * Die spaeteren Scheiben liegen HINTER den frueheren (z-index * absteigend ueber isolation am Stapel): so verdeckt der Hauptautor * die anderen und nicht umgekehrt. */ .s7b-avatar-stapel { display: inline-flex; align-items: center; isolation: isolate; flex-shrink: 0; } .s7b-avatar-stapel .s7b-avatar { box-shadow: var(--s7b-erhaben), 0 0 0 2px var(--s7b-deckend); } .s7b-avatar-stapel .s7b-avatar + .s7b-avatar { margin-left: -12px; z-index: -1; } .s7b-avatar-stapel .s7b-avatar + .s7b-avatar + .s7b-avatar { z-index: -2; } /* * Das Bindewort zwischen zwei Namen. Leiser als die Namen, aber nicht * grau -- "leiser heisst kleiner oder blasser, nie grau" * (DESIGNSCHEMA, Abschnitt 3). */ .s7b-autor-und { opacity: 0.6; font-weight: 600; } /* Nur Abstandhalter: das Komma klebt am Namen davor und traegt die Luecke zum naechsten. */ .s7b-autor-komma { opacity: 0.6; } /* * Die Bild-Fassung des Avatars: dieselbe Scheibe, nur mit Foto. Ein * img bringt andere Werkswerte mit als ein span (inline mit * Grundlinien-Luecke, line-height wirkt mit) -- display: block raeumt * das weg. object-fit beschneidet statt zu verzerren. Die innere * Relief-Lippe aus --s7b-erhaben laege UNTER dem Foto und bliebe * unsichtbar -- der feine Rand aus der Haarlinie ersetzt sie; ueber * das Token stimmt er auch im Dunkeln. Groesse, Rundung und Schatten * erben beide Fassungen aus .s7b-avatar, damit sie identisch wirken. */ .s7b-avatar--bild { display: block; object-fit: cover; border: 1px solid var(--s7b-linie); } /* ------------------------------------------------------------------ 6d. Themenschalter -- hell / auto / dunkel Bauform WORTGLEICH zum Linktree-Tages-Switch (linktree-extra.css): Mulde 118x38, Gleit-Scheibe 32, Fahrweg 118 - 2*3 (Rand) - 32 (Scheibe) = 80px, Mitte bei 40px. Nur die Klassen heissen s7b- und der Zustand haengt an data-s7b-wahl; das Schema-Attribut am Wurzelelement bleibt data-s7-thema (darauf ist das Dunkel-CSS gekeyt), der Speicher-Schluessel s7lt_thema -- EINE Wahl fuer Linktree und Blog. Position: oben rechts im Blog-Container (links sitzt die dunkle Seitenleiste des Themes). ------------------------------------------------------------------ */ .s7b-thema-container { display: flex; flex-direction: column; align-items: center; gap: 5px; align-self: flex-end; } /* Die Mulde. */ .s7b-thema-schalter { /* * Waagerechte Zuege gehoeren dem Skript, senkrechtes Scrollen ueber * dem Schalter der Seite. Ohne diese Zeile darf der Browser die * Zeigerfolge jederzeit fuer eigenes Scrollen kassieren * (pointercancel mitten im Zug) -- dieselbe Falle, die am Lupenbild * schon abgesichert ist. */ touch-action: pan-y; position: relative; /* flex haelt die drei Rasten IN der Mulde -- als Inline-Knoepfe brachen sie um und standen untereinander (Linktree, 19.08.2026). */ display: flex; align-items: stretch; width: 118px; height: 38px; border-radius: 999px; background: linear-gradient(180deg, rgba(128, 74, 74, 0.07), rgba(128, 74, 74, 0.035)); border: 1px solid rgba(128, 74, 74, 0.05); box-shadow: inset 2px 3px 7px rgba(107, 62, 62, 0.11), inset -2px -2px 5px rgba(255, 255, 255, 0.75), 0 1px 0 rgba(255, 255, 255, 0.9); } /* Drei gleich breite Tastfelder ueber der Mulde, ohne eigene Flaeche -- die traegt die Scheibe darunter. */ .s7b-thema-raste { position: relative; z-index: 2; width: 33.33%; height: 100%; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: rgba(21, 21, 61, 0.4); transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.5, 1); } .s7b-thema-schalter[data-s7b-wahl="hell"] [data-s7b-wahl-knopf="hell"], .s7b-thema-schalter[data-s7b-wahl="auto"] [data-s7b-wahl-knopf="auto"], .s7b-thema-schalter[data-s7b-wahl="dunkel"] [data-s7b-wahl-knopf="dunkel"] { color: rgba(21, 21, 61, 0.85); } /* Die Gleit-Scheibe: helle Erhebung aus der Mulde, Licht von oben links. */ .s7b-thema-scheibe { position: absolute; top: 3px; left: 3px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg, rgba(128, 74, 74, 0.035), rgba(128, 74, 74, 0.065)); border: 1px solid rgba(128, 74, 74, 0.07); box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.9), 1px 2px 5px rgba(107, 62, 62, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); pointer-events: none; transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.5, 1); } /* Fahrweg: 118 - 2*3 (Rand) - 32 (Scheibe) = 80px, Mitte bei 40px. */ .s7b-thema-schalter[data-s7b-wahl="hell"] .s7b-thema-scheibe { transform: translateX(0); } .s7b-thema-schalter[data-s7b-wahl="auto"] .s7b-thema-scheibe { transform: translateX(40px); } .s7b-thema-schalter[data-s7b-wahl="dunkel"] .s7b-thema-scheibe { transform: translateX(80px); } /* Gummigefuehl: kurzer Squeeze bei Druck, Scheibe UND Raste. Die Verschiebung muss im selben transform stehen wie die Stauchung, sonst ueberschreibt der Zustandswechsel die Position. */ .s7b-thema-raste:active { transition-duration: 0.06s; transform: scale(0.92); } .s7b-thema-schalter:active .s7b-thema-scheibe { transition-duration: 0.06s; } .s7b-thema-schalter[data-s7b-wahl="hell"]:active .s7b-thema-scheibe { transform: scale(0.92); } .s7b-thema-schalter[data-s7b-wahl="auto"]:active .s7b-thema-scheibe { transform: translateX(40px) scale(0.92); } .s7b-thema-schalter[data-s7b-wahl="dunkel"]:active .s7b-thema-scheibe { transform: translateX(80px) scale(0.92); } /* Wechselnder Schriftzug unter der Mulde. */ .s7b-thema-label { font-family: var(--s7b-versal); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(21, 21, 61, 0.5); } /* ------------------------------------------------------------------ 6e. K.I.T.T.-Scanner Das rote Leuchtsegment aus dem Linktree (Leons Gimmick, 19.08.2026): ein STEHENDER Balken unter der Ueberschrift, und AUF ihm laeuft der helle Kern mit weichem Hof -- wie der Scanner am Nightrider-Auto. Eine fruehere Fassung hatte nur das wandernde Licht ohne Traeger; Leon hat das am 26.08.2026 beanstandet: im Linktree traegt .s7-header-line (der Balken) das Licht als ::after. Hier sind die Titel Text, keine Balken-Elemente -- darum uebernimmt ::before die Rolle des Balkens und ::after die des Lichts. Das Licht laeuft nur ueber transform, also gratis fuer die Grafikkarte. Breite = TEXTLAENGE der Ueberschrift (Leons Markierung im Screenshot): die Titel bekommen width: fit-content, der Balken spannt sich ueber genau diese Breite -- nie ueber die Spalte. Zwei Stufen wie im Original: der grosse unter den Seitentiteln (Traeger-Rezept wortgleich linktree.css .s7-header-line), der leise unter Zwischenueberschriften und Seitenleisten-Kickern (Traeger wortgleich .s7-underline: Akzent-Ton, 3px, Radius 2 -- ueber das Token folgt das Dunkelschema von selbst). Lichter wortgleich aus linktree-extra.css (.s7-header-line::after / .s7-underline::after). ------------------------------------------------------------------ */ .s7b-archiv-titel { position: relative; /* Der Balken laeuft so weit wie der Text, nicht wie die Spalte. */ width: fit-content; max-width: 100%; /* Eigener Platz fuer den Scanner: im Polster der Ueberschrift, damit er nie mit der Zeile darunter kollidiert. */ padding-bottom: 16px; } /* Der stehende Traeger. Festwerte, keine Token: die Vorgabe ist die wortgleiche Uebernahme aus linktree.css Zeile 60; das Dunkelschema ueberschreibt weiter unten ebenso wortgleich. */ .s7b-archiv-titel::before { content: ""; position: absolute; /* Balkenmitte auf 5,5px ueber der Unterkante -- dieselbe Mitte wie das 5px-Licht bei bottom: 3px. Traeger und Licht teilen die Achse wie im Linktree (dort ueber top: 50% am Balken geloest). */ bottom: 4px; left: 0; right: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #8B0000, #c40000); box-shadow: 0 2px 8px rgba(139, 0, 0, 0.18); pointer-events: none; } .s7b-archiv-titel::after { content: ""; position: absolute; bottom: 3px; left: 0; width: 26%; height: 5px; border-radius: 999px; /* Heller Kern, weicher Hof -- das Licht, nicht ein zweiter Balken. */ background: radial-gradient(closest-side, rgba(255, 120, 120, 0.95), rgba(230, 40, 40, 0.55) 55%, rgba(196, 0, 0, 0) 100%); box-shadow: 0 0 8px rgba(230, 40, 40, 0.55); animation: s7b-kitt 1.7s ease-in-out infinite alternate; pointer-events: none; } @keyframes s7b-kitt { from { transform: translateX(0); } /* 284% der eigenen Breite = einmal quer ueber die restlichen 74%. */ to { transform: translateX(284%); } } /* Die leise Stufe: Zwischenueberschriften im Artikel (ersetzt den frueheren statischen roten Strich) und die Seitenleisten-Kicker. */ .s7b-inhalt h2, .s7b-empfohlen-titel, .s7b-teilen-titel, .s7b-zitat-titel, .s7b-kollkarte-titel, .s7b-autor-kicker, .s7b-druck-titel, .s7b-kauf-titel, .s7b-partner-titel, .s7b-nl-titel { position: relative; /* Auch hier: Balkenbreite = Textbreite, nie Spaltenbreite. Die ausdrueckliche Breite schlaegt das stretch der Flex-Eltern. */ width: fit-content; max-width: 100%; } /* Der leise Traeger -- wortgleich linktree.css .s7-underline (dort #c40000 = der Akzent; als Token geschrieben, damit das Dunkelschema von selbst auf #ff5252 folgt, exakt wie --s7-d-rot im Linktree). Mitte bei -6px unter der Unterkante, dieselbe Achse wie das 4px-Licht bei bottom: -8px. */ .s7b-inhalt h2::before, .s7b-empfohlen-titel::before, .s7b-teilen-titel::before, .s7b-zitat-titel::before, .s7b-kollkarte-titel::before, .s7b-autor-kicker::before, .s7b-druck-titel::before, .s7b-kauf-titel::before, .s7b-partner-titel::before, .s7b-nl-titel::before { content: ""; position: absolute; bottom: -7.5px; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--s7b-akzent); pointer-events: none; } .s7b-inhalt h2::after, .s7b-empfohlen-titel::after, .s7b-teilen-titel::after, .s7b-zitat-titel::after, .s7b-kollkarte-titel::after, .s7b-autor-kicker::after, .s7b-druck-titel::after, .s7b-kauf-titel::after, .s7b-partner-titel::after, .s7b-nl-titel::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 30%; height: 4px; border-radius: 999px; background: radial-gradient(closest-side, rgba(255, 120, 120, 0.9), rgba(230, 40, 40, 0.5) 55%, rgba(196, 0, 0, 0) 100%); box-shadow: 0 0 5px rgba(230, 40, 40, 0.4); animation: s7b-kitt-leise 2.1s ease-in-out infinite alternate; pointer-events: none; } @keyframes s7b-kitt-leise { from { transform: translateX(0); } /* 233% der eigenen Breite = quer ueber die restlichen 70%. */ to { transform: translateX(233%); } } /* Bei "weniger Bewegung" tritt das LICHT ab -- ein eingefrorener Leuchtfleck saehe wie ein Fehler aus. Der stehende Traeger (::before) ist Form, keine Bewegung: er BLEIBT sichtbar (Leons Vorgabe). */ @media (prefers-reduced-motion: reduce) { .s7b-archiv-titel::after, .s7b-inhalt h2::after, .s7b-empfohlen-titel::after, .s7b-teilen-titel::after, .s7b-zitat-titel::after, .s7b-kollkarte-titel::after, .s7b-autor-kicker::after, .s7b-druck-titel::after, .s7b-kauf-titel::after, .s7b-partner-titel::after, .s7b-nl-titel::after { animation: none; opacity: 0; } } /* ------------------------------------------------------------------ 7. Dunkelschema Dieselbe Formensprache wie am Tag -- Relief, Mulden, Gummidruck, Licht von OBEN LINKS --, nur die Helligkeit ist umgedreht. Der Akzent bleibt Rot, eine Stufe heller: der dunkle Grund frisst Leuchtkraft. VOLLSTAENDIG eigene Werte, keine Invertierung. Herkunft: der dark-mode-Block in linktree-extra.css (.s7-switch-rails, .s7-switch-btn, .s7-thema-schalter, .s7-switch-gleiter). Umgesetzt ueber die Token, nicht ueber Komponentenregeln -- anders als im Linktree, wo jede Komponente einzeln nachgezogen werden muss, weil dort neun Design-Variablen als INLINE-Stil am Wurzel-Div haengen und jede Klassenregel schlagen. Die --s7b-* hier setzt niemand inline, deshalb genuegt eine Stelle. Kein !important noetig: das Attribut plus die Klasse waehlt hoeher als die Klasse allein. Das Attribut darf am Blog-Wurzelknoten oder an einem beliebigen Vorfahren stehen (html, oder das Linktree-Wurzel-Div, wenn der Blog dort eingebettet laeuft) -- beide Faelle sind abgedeckt. ------------------------------------------------------------------ */ .s7b[data-s7-thema="dunkel"], [data-s7-thema="dunkel"] .s7b { --s7b-akzent: #ff5252; --s7b-akzent-tief: #e64545; /* Roter Text auf Tints: im Dunkeln Richtung hell, nicht dunkel. */ --s7b-akzent-stark: #ff8a8a; /* Dieselbe Rueckfallkette wie am Tag: im Linktree erbt der Blog dessen Dunkel-Tinte, sonst greift der Werkswert. */ --s7b-tinte: var(--s7-d-tinte, #efe6e6); /* * 62 % statt der 72 % vom Tag -- nicht aus Nachlaessigkeit, sondern * weil der dunkle Kartengrund ein viel staerkerer Gegenspieler ist: * dieselbe Deckung traegt hier 7,3:1 statt 4,9:1. 62 % ergeben 6,0:1, * bleiben also klar ueber AA und kommen der optischen Leise der * Linktree-Dunkelfassung naeher. */ --s7b-tinte-leise: color-mix(in srgb, var(--s7b-tinte) 62%, transparent); --s7b-linie: color-mix(in srgb, var(--s7b-tinte) 10%, transparent); --s7b-erhaben: -1px -1px 2px rgba(255, 255, 255, 0.04), 1px 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --s7b-erhaben-hoch: -1px -1px 3px rgba(255, 255, 255, 0.06), 2px 4px 9px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07); /* Auch hier bleibt die dritte Lage die Lippe -- nur ist sie im Dunkeln ein schwaches Licht statt eines hellen Saums. */ --s7b-vertieft: inset 2px 3px 7px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.05); /* Glaskarte dunkel: exakt die Linktree-d-Werte (--s7-d-karte, --s7-d-rand, --s7-d-karten-schatten). */ --s7b-karte-flaeche: rgba(38, 28, 31, 0.55); --s7b-karte-rand: rgba(255, 255, 255, 0.08); --s7b-glas-schatten: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.35); --s7b-glas-schatten-hoch: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.35); --s7b-glas-verlauf: linear-gradient(180deg, rgba(48, 36, 40, 0.66), rgba(38, 28, 31, 0.78)); --s7b-deckend: #251c1f; --s7b-mulde-flaeche: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.18)); --s7b-mulde-rand: rgba(0, 0, 0, 0.35); /* * DURCHSCHEINEND, nicht deckend -- sonst ist der Gleiter im Dunkeln * unsichtbar. * * Der Gleiter liegt mit z-index 2 UNTER den Pillen (z-index 3). Im * Hellen faellt das nicht auf, weil die ruhende Pille dort fast * durchsichtig ist (rgba(128,74,74,0.035)) -- man sieht die Fahrt * durch sie hindurch. Hier stand vorher linear-gradient(180deg, * #2e2427, #241c1f), also VOLL DECKEND: die 0,42s Fahrt lief * unsichtbar hinter den Pillen ab, zu sehen war nur, wie die * Fuellung bei A verschwindet und bei B wieder auftaucht -- eine * Bewegung, die man nicht sieht, deren Ende man aber als Sprung * wahrnimmt. Das ist schlechter als gar keine Fahrt. * * ACHTUNG beim Nachschlagen: der Linktree loest das NICHT. Sein * dunkler Reiter (--s7-d-knopf) ist derselbe deckende Verlauf, die * Fahrt ist dort im Dunkeln genauso verdeckt. Was hier steht, ist * die Uebertragung seines HELL-Verhaltens auf das Dunkelschema, * keine Abschrift. * * Warum eine halbdeckende WARME Farbe und keine duenne weisse * Waschung: beide machen den Gleiter sichtbar, aber die Waschung * laesst ihn ungedaempft durch (gemessen rgb(153,62,62)), und die * ruhende Beschriftung faellt darauf auf 3,64:1 -- unter AA. Diese * Fuellung daempft, was hinter ihr liegt: der Gleiter bleibt mit * dE 35-56 klar sichtbar, die Beschriftung haelt dabei mindestens * 5,18:1. * * Die Werte sind so gewaehlt, dass die RUHENDE Pille aussieht wie * vorher -- ueber der Schiene ergeben sie rgb(49,37,39) oben und * rgb(36,28,31) unten, gegenueber rgb(46,36,39)/rgb(36,28,31) * deckend. Das Relief bleibt ein Koerper und wird nicht zur blossen * Beschriftung. */ --s7b-pille-flaeche: linear-gradient(180deg, rgba(70, 52, 55, 0.55), rgba(42, 33, 37, 0.55)); --s7b-pille-rand: rgba(255, 255, 255, 0.06); /* * Aktive Pille und Primaerknopf brauchen hier KEINE eigene Flaeche: * ihre Token sind color-mix-Formeln ueber var(--s7b-akzent), und der * Akzent ist oben schon auf #ff5252 umgestellt -- die Mischung folgt * von selbst, das Rot bleibt auch im Dunkeln transparent statt * vollflaechig. Nur die Schatten sind eigene Dunkel-Werte. */ --s7b-aktiv-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.4); /* * DER PRIMAERKNOPF BEKOMMT IM DUNKELN EINE EIGENE FLAECHE (Leons * Fund, 27.08.2026: "der Hover ist relativ dunkel, passe die Buttons * bitte an"). * * Der Kommentar darueber stimmt fuer die aktive Pille, aber nicht * fuer diesen Knopf. Gemessen auf der Kollektionsseite: die * 28-Prozent-Mischung ergab auf dem dunklen Kartengrund * rgb(95, 41, 43) -- ein Kontrast von 1,51 zur Umgebung. Der Knopf * war damit kein Knopf mehr, sondern ein dunklerer Fleck; der * Hover-Zustand hob ihn kaum davon ab. * * 58 Prozent ergeben rgb(162, 58, 60) und einen Kontrast von rund * 2,7 -- der Knopf steht als Flaeche da. Der Text wird dafuer WEISS * statt akzentfarben: auf der kraeftigeren Flaeche kaeme das helle * Rot nur auf 2,7 und faellt damit unter jede Lesbarkeitsschwelle, * Weiss kommt auf ueber 6. * * Das bricht die Hausregel "Rot nie vollflaechig" nicht: 58 Prozent * sind eine Mischung, keine Fuellung -- der Grund scheint weiter * durch, nur eben sichtbar. */ --s7b-knopf-flaeche: linear-gradient(180deg, color-mix(in srgb, var(--s7b-akzent) 58%, transparent), color-mix(in srgb, var(--s7b-akzent) 46%, transparent)); --s7b-knopf-rand: color-mix(in srgb, var(--s7b-akzent) 72%, transparent); --s7b-knopf-schatten: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); --s7b-knopf-schatten-hoch: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Randlinie: Spitze in Akzent-Hell statt Weiss (Linktree-Dunkelwert). */ --s7b-randlicht: rgba(255, 82, 82, 0.95); /* Dunkle Delle am Fingerpunkt (Linktree: rgba(0,0,0,0.45)-0.5). */ --s7b-delle: rgba(0, 0, 0, 0.5); --s7b-delle-weit: rgba(0, 0, 0, 0.32); --s7b-gedrueckt: inset 1px 4px 8px rgba(0, 0, 0, 0.55), inset -1px -2px 3px rgba(255, 255, 255, 0.04); /* Gedimmter Glanz: exakt die Linktree-Dunkelwerte (0.06/0.12/0.06) -- derselbe Streifen wie am Tag waere hier ein Scheinwerfer. */ --s7b-glanz-kern: rgba(255, 255, 255, 0.12); --s7b-glanz-saum: rgba(255, 255, 255, 0.06); /* Grund und Wolken: die Linktree-Dunkelwerte. Die Basis unter der Kopfzone einen Hauch heller als der Verlauf (#1b1518 statt #171114): derselbe weiche Hell-Uebergang wie am Tag, nur subtil -- kein harter Bruch, die Tinte #efe6e6 traegt darauf weit ueber AA. */ --s7b-grund-basis: #1b1518; --s7b-grund-verlauf: linear-gradient(160deg, #201a1c 0%, #171114 55%, #120d10 100%); --s7b-wolke-a: rgba(150, 52, 52, 0.26); --s7b-wolke-b: rgba(120, 40, 40, 0.25); --s7b-wolke-c: rgba(150, 30, 30, 0.18); /* Buehne: derselbe Glow, in die Tiefe gedreht. */ --s7b-buehne-grund: #2a2023; --s7b-buehne-glow: radial-gradient(120% 90% at 50% 42%, rgba(90, 62, 66, 0.9) 0%, rgba(64, 44, 48, 0.55) 48%, rgba(40, 28, 31, 0.45) 100%); --s7b-buehne-licht: linear-gradient(135deg, rgba(255, 251, 246, 0.06) 0%, rgba(255, 251, 246, 0) 42%), linear-gradient(315deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 46%); --s7b-avatar-verlauf: linear-gradient(150deg, #3c2e32, #2b2226); /* Trenner analog hell: weisse Toene, niedrige Alpha. */ --s7b-trenner: linear-gradient(to right, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); /* Die helle Entsprechung des roetlichen Schwarz. */ --s7b-signatur: rgba(239, 230, 230, 0.82); color: var(--s7b-tinte); } /* * Die eine Stelle, die ein Token nicht abdeckt: der ruhende Text der * Pille ist im Dunkeln kraeftiger als --s7b-tinte-leise, sonst * verschwindet er im Knopfgrund (gemessener Wert aus dem Linktree). */ .s7b[data-s7-thema="dunkel"] .s7b-pille, [data-s7-thema="dunkel"] .s7b .s7b-pille { color: color-mix(in srgb, var(--s7b-tinte) 72%, transparent); } /* * Kaufbox im Dunkeln. Grund und Rand kommen aus den Token und ziehen * von selbst mit; zwei Festwerte tun das nicht: die weisse Lichtkante * oben innen (auf dunklem Grund ein greller Strich) und der rote * Streuschatten (auf dunklem Grund unsichtbar, dafuer traegt hier ein * Glimmen). */ /* * Die Tinte des Primaerknopfes im Dunkeln: WEISS. * * Auf der kraeftigeren Flaeche (58 Prozent Akzent) kaeme das helle * Rot nur auf einen Kontrast von 2,7 und faellt damit unter jede * Lesbarkeitsschwelle. Weiss kommt auf ueber 6. */ .s7b[data-s7-thema="dunkel"] .s7b-knopf:not(.s7b-knopf--leise), [data-s7-thema="dunkel"] .s7b .s7b-knopf:not(.s7b-knopf--leise) { color: #fff; } .s7b[data-s7-thema="dunkel"] .s7b-kauf-knopf, [data-s7-thema="dunkel"] .s7b .s7b-kauf-knopf { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08); } @media (hover: hover) { .s7b[data-s7-thema="dunkel"] .s7b-kauf-knopf:hover, [data-s7-thema="dunkel"] .s7b .s7b-kauf-knopf:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 18px rgba(255, 82, 82, 0.22); } /* * Die Plattform-Hausfarben sind fuer HELLEN Grund gemacht -- * Patreon-Rostrot und Thangs-Blau haben auf dunklem Grund keinen * ausreichenden Kontrast mehr (WCAG 1.4.3). Im Dunkeln bleibt der * Text also hell, und die Plattform gibt nur noch dem Rand und dem * Schein ihre Farbe. */ .s7b[data-s7-thema="dunkel"] .s7b-kauf-knopf--patreon:hover, [data-s7-thema="dunkel"] .s7b .s7b-kauf-knopf--patreon:hover { color: var(--s7b-tinte); border-color: #e8674f; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(232, 103, 79, 0.3); } .s7b[data-s7-thema="dunkel"] .s7b-kauf-knopf--thangs:hover, [data-s7-thema="dunkel"] .s7b .s7b-kauf-knopf--thangs:hover { color: var(--s7b-tinte); border-color: #6aa9e0; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(106, 169, 224, 0.3); } } /* Gluehring am Primaerknopf -- nur im Dunkeln, nur bei Hover (Linktree: .s7-link-btn:hover::after im Dunkelblock). */ @media (hover: hover) { .s7b[data-s7-thema="dunkel"] .s7b-knopf:not(.s7b-knopf--leise):hover, [data-s7-thema="dunkel"] .s7b .s7b-knopf:not(.s7b-knopf--leise):hover { /* * Der Hover geht nach OBEN, nicht nach unten. Vorher wurde er * dunkler und der Knopf verschwand beim Beruehren fast im Grund -- * das Gegenteil dessen, was ein Hover sagen soll. */ background: linear-gradient(180deg, color-mix(in srgb, var(--s7b-akzent) 74%, transparent), color-mix(in srgb, var(--s7b-akzent) 62%, transparent)); border-color: var(--s7b-akzent); box-shadow: var(--s7b-knopf-schatten-hoch), 0 0 0 1px color-mix(in srgb, var(--s7b-akzent) 30%, transparent); } } /* * Themenschalter, Dunkel-Fassung -- wortgleich zum Linktree-Nachtrag * (linktree-extra.css, "dark mode, Nachtrag: Tages-Switch"). Die * Zustandsfarben sind Festwerte wie dort, keine Token: der Schalter * ist ein 1:1 uebernommenes Bauteil. */ .s7b[data-s7-thema="dunkel"] .s7b-thema-schalter, [data-s7-thema="dunkel"] .s7b .s7b-thema-schalter { background: rgba(20, 14, 16, 0.6); border-color: rgba(255, 255, 255, 0.05); box-shadow: inset 2px 3px 7px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.05); } .s7b[data-s7-thema="dunkel"] .s7b-thema-scheibe, [data-s7-thema="dunkel"] .s7b .s7b-thema-scheibe { background: linear-gradient(180deg, #2e2427, #241c1f); border-color: rgba(255, 255, 255, 0.08); } .s7b[data-s7-thema="dunkel"] .s7b-thema-raste, [data-s7-thema="dunkel"] .s7b .s7b-thema-raste { color: rgba(239, 230, 230, 0.4); } .s7b[data-s7-thema="dunkel"] .s7b-thema-schalter[data-s7b-wahl="hell"] [data-s7b-wahl-knopf="hell"], .s7b[data-s7-thema="dunkel"] .s7b-thema-schalter[data-s7b-wahl="auto"] [data-s7b-wahl-knopf="auto"], .s7b[data-s7-thema="dunkel"] .s7b-thema-schalter[data-s7b-wahl="dunkel"] [data-s7b-wahl-knopf="dunkel"], [data-s7-thema="dunkel"] .s7b .s7b-thema-schalter[data-s7b-wahl="hell"] [data-s7b-wahl-knopf="hell"], [data-s7-thema="dunkel"] .s7b .s7b-thema-schalter[data-s7b-wahl="auto"] [data-s7b-wahl-knopf="auto"], [data-s7-thema="dunkel"] .s7b .s7b-thema-schalter[data-s7b-wahl="dunkel"] [data-s7b-wahl-knopf="dunkel"] { color: rgba(239, 230, 230, 0.9); } .s7b[data-s7-thema="dunkel"] .s7b-thema-label, [data-s7-thema="dunkel"] .s7b .s7b-thema-label { color: rgba(239, 230, 230, 0.5); } /* K.I.T.T.-Scanner im Dunkeln: eine Stufe heller, das Gluehen etwas staerker -- dunkler Grund frisst Leuchtkraft (Linktree-Dunkelwerte). */ /* Der grosse Traeger leuchtet mit -- wortgleich der Linktree-Dunkelwert an .s7-header-line (c62828 -> ff5252, Glow 10px). Der leise Traeger braucht keine eigene Regel: er haengt am Akzent-Token, und das steht hier oben schon auf #ff5252 (wie --s7-d-rot im Linktree). */ .s7b[data-s7-thema="dunkel"] .s7b-archiv-titel::before, [data-s7-thema="dunkel"] .s7b .s7b-archiv-titel::before { background: linear-gradient(90deg, #c62828, #ff5252); box-shadow: 0 2px 10px rgba(255, 82, 82, 0.28); } .s7b[data-s7-thema="dunkel"] .s7b-archiv-titel::after, [data-s7-thema="dunkel"] .s7b .s7b-archiv-titel::after { background: radial-gradient(closest-side, rgba(255, 190, 190, 1), rgba(255, 82, 82, 0.65) 55%, rgba(255, 82, 82, 0) 100%); box-shadow: 0 0 12px rgba(255, 82, 82, 0.7); } .s7b[data-s7-thema="dunkel"] .s7b-inhalt h2::after, .s7b[data-s7-thema="dunkel"] .s7b-empfohlen-titel::after, .s7b[data-s7-thema="dunkel"] .s7b-zitat-titel::after, .s7b[data-s7-thema="dunkel"] .s7b-kollkarte-titel::after, .s7b[data-s7-thema="dunkel"] .s7b-autor-kicker::after, .s7b[data-s7-thema="dunkel"] .s7b-teilen-titel::after, .s7b[data-s7-thema="dunkel"] .s7b-nl-titel::after, [data-s7-thema="dunkel"] .s7b .s7b-inhalt h2::after, [data-s7-thema="dunkel"] .s7b .s7b-empfohlen-titel::after, [data-s7-thema="dunkel"] .s7b .s7b-zitat-titel::after, [data-s7-thema="dunkel"] .s7b .s7b-kollkarte-titel::after, [data-s7-thema="dunkel"] .s7b .s7b-autor-kicker::after, [data-s7-thema="dunkel"] .s7b .s7b-teilen-titel::after, [data-s7-thema="dunkel"] .s7b .s7b-nl-titel::after { background: radial-gradient(closest-side, rgba(255, 180, 180, 0.95), rgba(255, 82, 82, 0.6) 55%, rgba(255, 82, 82, 0) 100%); box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); } /* ================================================================== AB HIER: LAYOUT Alles davor sind Bausteine, die fuer sich stehen. Ab hier kommt die Anordnung -- die Klassen, die die Ansichten (templates/*.php und S7B_Render) tatsaechlich ausgeben. Durchweg MOBIL ZUERST: der Grundzustand gilt fuer 430x724, den Instagram-In-App-Browser. Jede Verbreiterung steht als min-width- Nachtrag DIREKT bei ihrem Baustein und nicht in einem Sammelblock am Ende -- so sieht man beim Lesen einer Komponente sofort, was mit ihr auf dem Rechner passiert. ================================================================== */ /* ------------------------------------------------------------------ 8. Die Wurzel
bzw.
. Diese Klasse traegt die Token aus Abschnitt 1 -- ohne sie greift von der ganzen Architektur nichts. ------------------------------------------------------------------ */ /* * box-sizing nur INNERHALB des Blogs umstellen, nicht global: die Datei * laeuft in einem fremden Theme und im Linktree. Ein globales * *-Selektorenpaar wuerde dort Fremdes umstellen. */ .s7b, .s7b *, .s7b *::before, .s7b *::after { box-sizing: border-box; } /* * JEDE UEBERSCHRIFT BEKOMMT DIE TINTE -- ohne Ausnahme. * * Leons Fund vom 27.08.2026: "Im Dark Mode sind viele Ueberschriften * nicht lesbar." Gemessen: sie standen in rgb(33, 34, 39). Das ist * #212227, die Ueberschriftenfarbe des Website-Themes -- es faerbt * h1 bis h6 direkt, und wo unsere Regel keine Farbe setzt, gewinnt * seine. Im Hellschema faellt das nicht auf (dunkel auf hell ist * lesbar); im Dunkelschema steht dunkel auf dunkel. * * Am 26.08. ist dasselbe schon einmal am Artikeltitel passiert, und * damals habe ich nur DIESEN einen Titel repariert. Das war die * falsche Reichweite: es war nie ein Fehler des Titels, sondern eine * Luecke im Fundament -- und sie hat seither an jeder neuen * Ueberschrift wieder zugeschlagen. * * :where() macht die Regel spezifitaetslos: sie schlaegt das Theme * (ein blosses h2 wiegt weniger als .s7b), verliert aber gegen jede * eigene Regel weiter unten, die bewusst eine andere Farbe setzt -- * die leise Tinte eines Kickers etwa. So ist sie ein Netz, kein * Diktat. */ .s7b :where(h1, h2, h3, h4, h5, h6) { color: var(--s7b-tinte); } .s7b { display: flex; flex-direction: column; gap: 22px; width: 100%; /* * Deckel gegen zu breite Themes. Im Linktree ist er wirkungslos -- * dessen Spalte ist ohnehin schmaler --, auf der Hauptseite haelt er * das Raster zusammen. */ max-width: 1180px; margin-inline: auto; /* Am Rand des Handys darf nichts kleben; mehr als 20px verschenkt auf 430px zu viel von der ohnehin knappen Breite. */ padding-inline: clamp(14px, 4vw, 20px); /* Eigene Hausschrift statt Theme-Erbe: Instrument Sans fuer den Text, Archivo fuer Versalien (Token in Abschnitt 1, geladen von S7B_Render::assets()). */ font-family: var(--s7b-schrift); font-size: 16px; line-height: 1.6; } /* * Der Seitengrund als fixierte Ebene -- Bauform wie .s7-linktree::before, * aber NUR der helle warme Grundton. Der Rose-Vignetten-Verlauf liegt * nicht mehr hier: er traegt nur noch die Kopfzone und laeuft weich in * diesen Grund aus (siehe .s7b-bg::before in 8b) -- vorher lag das * radiale page_bg ueberall und unten blieb es genauso dunkel wie oben * (Leons Mockup-Vergleich, 26.08.2026). */ .s7b::before { content: ""; position: fixed; inset: 0; z-index: -1; background-color: var(--s7b-grund-basis); pointer-events: none; } .s7b-uebersicht, .s7b-artikel-seite, .s7b-archiv { display: flex; flex-direction: column; gap: 24px; } /* Nur fuer Vorleser: visuell versteckt, im Zugriffsbaum vorhanden (Mockup: .vh). clip-path statt clip -- clip ist abgekuendigt. */ .s7b-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------------ 8b. Wolken -- der bewegte Hintergrund Drei treibende Wolken auf einer fixen Ebene, WORTGLEICH aus dem Linktree (.s7-bg / .s7-bg-wolke): reine radial-gradients, KEIN filter: blur -- ein Weichzeichner ueber eine halbe Bildschirmflaeche kostet pro Bild mehr als alles andere auf der Seite zusammen. Die Drift laeuft ausschliesslich ueber transform, also im Compositor. Oben und unten 22vh Ueberstand: die Ebene darf sich bewegen, ohne dass an einer Kante der nackte Grundverlauf freiliegt. ------------------------------------------------------------------ */ .s7b-bg { position: fixed; left: 0; right: 0; top: -22vh; bottom: -22vh; z-index: -1; overflow: hidden; pointer-events: none; } /* * Die Rose-Vignette NUR in der Kopfzone: das radiale page_bg-Rezept * liegt als eigene Lage unter den Wolken und wird per mask-image nach * unten weich ausgeblendet -- oben die rose-graue Wolken-Zone, unten * laeuft sie in den hellen warmen Grund (.s7b::before) aus. Genau * dieser sichtbare Uebergang hinter dem Raster ist die abgenommene * Mockup-Optik (Leon, 26.08.2026). * * Rechnung zu den Maskenstufen: die Ebene ueberragt das Fenster oben * und unten um 22vh, ist also 144vh hoch; 1vh Fenster = 0,69 % Ebene, * der Fensterrand liegt bei 15,3 %. Vollton bis 36 % = rund 30vh unter * dem Fensterrand (die Kopfzone: Logo, Nav, Titel, Filter), die * Ausblendung endet bei 74 % = rund 85vh -- also NOCH IM ERSTEN * FENSTER. Die alte 42/88-Staffel lief erst ~105vh unterm Rand aus: * der Uebergang lag unter der Falte, das Raster stand auf demselben * dunklen Ton wie der Kopf und der Verlauf war unsichtbar (Leons * markierte Screenshots, 26.08.2026). Jetzt sitzt der weiche Wechsel * vom rose Kopf in den hellen Grund sichtbar hinter den oberen * Kartenreihen -- die Mockup-Optik. */ .s7b-bg::before { content: ""; position: absolute; inset: 0; background: var(--s7b-grund-verlauf); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 74%); mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 74%); } .s7b-bg-wolke { position: absolute; display: block; border-radius: 50%; will-change: transform; } .s7b-bg-wolke:nth-child(1) { width: 62vmax; height: 62vmax; top: -18vmax; left: -14vmax; background: radial-gradient(closest-side, var(--s7b-wolke-a), transparent 78%); } .s7b-bg-wolke:nth-child(2) { width: 70vmax; height: 70vmax; right: -22vmax; bottom: -26vmax; left: auto; background: radial-gradient(closest-side, var(--s7b-wolke-b), transparent 76%); } .s7b-bg-wolke:nth-child(3) { width: 48vmax; height: 48vmax; top: 24%; right: -12vmax; left: auto; background: radial-gradient(closest-side, var(--s7b-wolke-c), transparent 78%); } /* * Ausschlaege von 4 bis 7vmax bei 52 bis 72 Sekunden Umlauf: eine * Wolke braucht ueber eine halbe Minute fuer ihren Weg. Schneller * wirkt es unruhig, und unruhig ist das Gegenteil von dezent. */ @keyframes s7b-wolke-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vmax, 4vmax, 0) scale(1.06); } } @keyframes s7b-wolke-b { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(-6vmax, -4vmax, 0) scale(1); } } @keyframes s7b-wolke-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4vmax, 6vmax, 0) scale(1.08); } } /* * Die Drift NUR, wenn das System Bewegung erlaubt -- die Animationen * stehen komplett INNERHALB der Kapsel, nicht draussen mit einem * Ausschalter daneben: was es ohne Erlaubnis nicht gibt, muss auch * niemand wieder abschalten. */ @media (prefers-reduced-motion: no-preference) { .s7b-bg-wolke:nth-child(1) { animation: s7b-wolke-a 52s ease-in-out infinite alternate; } .s7b-bg-wolke:nth-child(2) { animation: s7b-wolke-b 72s ease-in-out infinite alternate; } .s7b-bg-wolke:nth-child(3) { animation: s7b-wolke-c 61s ease-in-out infinite alternate; } } @media (prefers-reduced-motion: reduce) { .s7b-bg-wolke { animation: none; } } /* ------------------------------------------------------------------ 8c. Kopfzeile -- Logo und Hauptnavigation Die Masthead-Optik aus dem Mockup: rote S7-Kachel mit Relief, zweizeilige Wortmarke, daneben gesperrte Versalien-Verweise. Der aktive Punkt ist eine ERHABENE Glas-Pille mit rotem Text (Leons Vorgabe -- nicht die Mulde des Mockups). Alles token-getrieben, die Dunkel-Fassung kommt ueber die Token von selbst. ------------------------------------------------------------------ */ .s7b-kopfzeile { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; /* Bewusst OHNE eigene Flaeche: Logo und Nav stehen frei auf dem Grund (Leons Korrektur vom 26.08. -- die Glasleiste drumherum war zu viel; eingebettet wird nur die NAV, siehe unten). */ margin-bottom: 18px; } .s7b-logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } .s7b-logo:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 3px; border-radius: 8px; } /* * Leons echtes Logo-Lockup (S-Zeichen + Wortmarke + "blog"-Schriftzug) * als Bild, in heller und weisser Fassung. KEIN Relief, keine Kachel, * kein Rahmen: das Logo steht frei auf dem Grund. Die Hoehe ist fest, * die Breite folgt (quadratische Datei mit viel Weissraum -- 132px * wirken optisch wie ~90px; Leon will das Logo GROSS, 26.08.). */ .s7b-logo-bild { display: block; width: auto; height: 116px; } @media (min-width: 760px) { .s7b-logo-bild { height: 168px; } } /* * Schema-Umschaltung ueber display, nicht ueber zwei Requests hinweg * gefiltert: beide Fassungen stehen im Markup, sichtbar ist genau * eine. Standard (hell) zeigt die helle Fassung ... */ .s7b-logo-bild--dunkel { display: none; } /* ... und im Dunkelschema tauschen die beiden -- dieselben zwei Selektor-Fassungen wie an allen uebrigen Dunkel-Regeln. */ .s7b[data-s7-thema="dunkel"] .s7b-logo-bild--hell, [data-s7-thema="dunkel"] .s7b .s7b-logo-bild--hell { display: none; } .s7b[data-s7-thema="dunkel"] .s7b-logo-bild--dunkel, [data-s7-thema="dunkel"] .s7b .s7b-logo-bild--dunkel { display: block; } /* * Die Nav ist ihre EIGENE Scroll-Schiene: passt sie nicht in die * Zeile, scrollt sie seitlich in sich -- nie die Seite (der * Instagram-In-App-Browser verzeiht keinen Seiten-Overflow). Mobil * bricht sie als volle Reihe unter das Logo. */ .s7b-kopfnav { display: flex; gap: 2px; flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; /* Die Nav sitzt in einer MULDE wie der Themenschalter (Leons Wunsch vom 26.08.): dieselbe vertiefte Kapsel, die Punkte als Rasten, der aktive als erhabene Scheibe. Rezept wortgleich zur Schalter-Mulde; die Dunkel-Fassung steht im Dunkel-Block. */ padding: 3px; border-radius: 999px; background: linear-gradient(180deg, rgba(128, 74, 74, 0.07), rgba(128, 74, 74, 0.035)); border: 1px solid rgba(128, 74, 74, 0.05); box-shadow: inset 2px 3px 7px rgba(107, 62, 62, 0.11), inset -2px -2px 5px rgba(255, 255, 255, 0.75), 0 1px 0 rgba(255, 255, 255, 0.9); } .s7b-kopfnav::-webkit-scrollbar { display: none; } @media (min-width: 760px) { .s7b-kopfnav { flex: 0 1 auto; margin-left: auto; } } /* * Die Nav-Punkte SIND Pillen (Klasse s7b-pille aus dem PHP): Optik, * Hover, roter Aktiv-Tint (ist-aktiv) und Gummidruck kommen komplett * aus dem Pillen-Rezept -- wie die Linktree-Knoepfe, Leons Vorgabe * vom 26.08. Hier steht nur noch, was die Mulde zusaetzlich braucht: * Icon-Abstand und ein wenig Luft zwischen den Rasten. */ .s7b-kopfnav a { gap: 7px; } /* * Der Trennstrich in der Leiste -- dieselbe Zierde wie zwischen den * Sozial-Zeichen im Linktree: eine feine senkrechte Linie, die oben * und unten ausblendet, damit sie nicht wie ein Rahmenstueck wirkt. * Reine Zierde, im Markup mit aria-hidden. */ .s7b-kopfnav-trenner { flex: 0 0 auto; align-self: stretch; width: 1px; margin-inline: 6px; border-radius: 1px; background: linear-gradient(to bottom, rgba(11, 11, 42, 0.02), rgba(11, 11, 42, 0.14), rgba(11, 11, 42, 0.02)); } .s7b[data-s7-thema="dunkel"] .s7b-kopfnav-trenner, [data-s7-thema="dunkel"] .s7b .s7b-kopfnav-trenner { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)); } /* Ein eigenes Logo aus den Einstellungen steht anstelle des Zeichens -- gleiche Kantenlaenge, damit die Pillen gleich hoch bleiben. */ .s7b-knopf-logo-bild { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; } .s7b-kopfnav .s7b-knopf-icon { width: 16px; height: 16px; flex: 0 0 auto; } /* --- Archivkopf (Kollektions- und Themenseiten) --- */ .s7b-archiv-kopf { display: flex; flex-direction: column; gap: 10px; } .s7b-archiv-titel { margin: 0; /* Ausdruecklich, nicht geerbt: das Website-Theme faerbt Ueberschriften direkt (h1 { color: #212227 }) und schluege sonst die Schema-Tinte -- im Dunkelmodus stand dunkler Titel auf dunklem Grund (Live-Fund 26.08.2026). */ color: var(--s7b-tinte); font-family: var(--s7b-versal); font-size: clamp(30px, 5.4vw, 48px); font-weight: 800; line-height: 1.04; letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; } .s7b-archiv-text { margin: 0; max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--s7b-tinte-leise); } .s7b-archiv-zahl { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s7b-tinte-leise); } /* ------------------------------------------------------------------ 9. Uebersicht -- Filter, Raster, Nachladen ------------------------------------------------------------------ */ /* Die Filterleiste ist eine Pillen-Schiene (Abschnitt 4) und braucht hier nur noch ihre Breite. */ .s7b-filter { align-self: center; max-width: 100%; } /* * "Browse by category" ueber der Schiene, im Kicker-Stil. Der negative * Unterabstand rechnet gegen den Spalten-gap der Wurzel: uebrig * bleiben die ~12px aus dem Mockup (.filters__label), ohne dass die * Ansicht einen eigenen Wickel-Kasten braucht. */ /* * Das Kategorien-Verzeichnis unter der Liste. * * Leon fragte, ob es einen Uebergang braucht -- ja: ohne ihn saehe der * Block wie eine vergessene Zeile unter dem Raster aus. Der Uebergang * ist aber KEIN harter Streifen, sondern ein eigener ruhiger Grund mit * viel Luft davor. Der Verlauf oben laeuft aus dem Nichts an, damit * keine sichtbare Kante entsteht. */ .s7b-verzeichnis { position: relative; margin-top: clamp(48px, 7vw, 88px); padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 34px) clamp(32px, 4vw, 48px); border-radius: var(--s7b-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--s7b-akzent) 3%, transparent), transparent 62%), var(--s7b-karte-flaeche); border: 1px solid var(--s7b-karte-rand); box-shadow: var(--s7b-glas-schatten); } /* Der Hauch von Trennung ueber dem Block -- dieselbe Rezeptur wie die uebrigen ruhigen Trenner, nur breiter und weiter ausgelaufen. */ .s7b-verzeichnis::before { content: ""; position: absolute; top: calc(clamp(48px, 7vw, 88px) / -2); left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, rgba(11, 11, 42, 0.02), rgba(11, 11, 42, 0.12), rgba(11, 11, 42, 0.02)); } .s7b[data-s7-thema="dunkel"] .s7b-verzeichnis::before, [data-s7-thema="dunkel"] .s7b .s7b-verzeichnis::before { background: linear-gradient(to right, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)); } .s7b-verz-spalten { display: grid; gap: clamp(24px, 3vw, 36px); margin-top: 18px; } @media (min-width: 760px) { .s7b-verz-spalten { grid-template-columns: 1fr 1fr; } } .s7b-verz-titel { margin: 0 0 12px; font-family: var(--s7b-versal); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s7b-tinte); } .s7b-verz-punkte { display: flex; flex-wrap: wrap; gap: 8px; } /* Die Punkte sind Pillen wie in der Filterschiene, nur ruhiger: das Verzeichnis ist ein Ausgang, kein zweiter Blickfang. */ .s7b-verz-punkt { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--s7b-linie); font-family: var(--s7b-versal); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--s7b-tinte-leise); transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .s7b-verz-zahl { font-size: 10px; letter-spacing: 0; /* Erbt die leise Stufe der Pille -- eine noch blassere Textfarbe faellt unter AA (dafuer gibt es die Pruefung in css.test.mjs). */ font-variant-numeric: tabular-nums; opacity: 0.75; } /* Die Spalte selbst ordnet nur -- sie braucht keine eigene Optik, aber eine Regel, damit der Klassen-Abgleich sie kennt. */ .s7b-verz-spalte { min-width: 0; } @media (hover: hover) { .s7b-verz-punkt:hover { color: var(--s7b-akzent-tief); border-color: color-mix(in srgb, var(--s7b-akzent) 34%, transparent); background: color-mix(in srgb, var(--s7b-akzent) 6%, transparent); } } .s7b-verz-punkt:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } /* * Themen-Chips auf der Karte: die LEISE Achse. Kein Relief, keine * Fuellung -- nur ein feiner Rand und kleine Versalien. Die * Kollektions-Pillen darueber bleiben damit der Blickfang, und die * Karte traegt zwei Achsen, ohne wie ein Etikettenhaufen zu wirken. */ /* 25px wie der Mehr-Chip daneben: darunter liegt das Ziel unter der 24er Untergrenze, die dieses Stilblatt sonst ueberall zitiert -- und die Chips fuehren auf die Themenseiten, sind also echte Ziele. */ .s7b-thema-chip { min-height: 25px; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--s7b-linie); font-family: var(--s7b-versal); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--s7b-tinte-leise); transition: color 0.18s ease, border-color 0.18s ease; } @media (hover: hover) { a.s7b-thema-chip:hover { color: var(--s7b-akzent-tief); border-color: color-mix(in srgb, var(--s7b-akzent) 34%, transparent); } } a.s7b-thema-chip:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } /* * Ruhiger Trenner zwischen dem Kopf der Uebersicht und der Liste * (Leons Wunsch, 27.08.2026): AUSDRUECKLICH nicht der rote Scanner -- * der gehoert zu Ueberschriften. Dieselbe Rezeptur wie die uebrigen * Trenner im Blog, nur waagerecht. */ .s7b-kopf-trenner { height: 1px; margin: 22px 0 20px; border: 0; background: linear-gradient(to right, rgba(11, 11, 42, 0.02), rgba(11, 11, 42, 0.14), rgba(11, 11, 42, 0.02)); } .s7b[data-s7-thema="dunkel"] .s7b-kopf-trenner, [data-s7-thema="dunkel"] .s7b .s7b-kopf-trenner { background: linear-gradient(to right, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)); } /* * Filterblock mit ZWEI Achsen nebeneinander (Leons Wunsch, * 27.08.2026): links die Collections, daneben die Topics. * * Der Block ist ein eigenes Flex-Element, weil die Schienen frueher * direkte Kinder der Seitenspalte waren und deren Abstaende erbten. */ .s7b-filter-block { display: flex; flex-direction: column; align-items: center; gap: 14px; } .s7b-filter-gruppen { display: flex; flex-wrap: wrap; justify-content: center; /* Grosszuegig: die zwei Schienen sollen als zwei Dinge lesbar sein, nicht als eine lange. */ gap: 14px 28px; } .s7b-filter-gruppe { display: flex; flex-direction: column; align-items: center; gap: 8px; /* minmax-Ersatz fuer Flex: ohne das sprengt eine Schiene mit vielen Pillen die Zeile, statt in sich umzubrechen. */ min-width: 0; max-width: 100%; } /* * UNTER 1000 PIXELN BEKOMMT JEDE SCHIENE DIE GANZE ZEILE (Messung vom * 27.08.2026). * * Nebeneinander teilten sich Collections und Topics auf dem Tablet * die Breite: jede bekam 356 von 713 Pixeln und wurde dadurch nicht * schmaler, sondern HOEHER -- zusammen 740 Pixel Pillen, bevor der * erste Beitrag kam. Untereinander hat jede die volle Breite und * braucht rund die Haelfte der Hoehe. * * Erst oberhalb, wo wirklich Platz fuer zwei ist, stehen sie wieder * nebeneinander -- dort ist die Zweiteilung ein Gewinn und keine * Verengung. */ @media (max-width: 999px) { .s7b-filter-gruppe { flex: 1 0 100%; } } /* * AM HANDY EINE ZEILE, DIE SCROLLT (Messung vom 27.08.2026). * * Umbrechend waren die beiden Schienen auf 390 Pixeln zusammen 612 * Pixel hoch -- der Filterblock 705 von den 1510 Pixeln, die man bis * zum ersten Beitrag scrollen musste. Auf 390 Pixeln hilft kein * Umbruch mehr: da ist nichts breiter zu machen. * * Also dieselbe Loesung wie eine Zeile darueber in der Kopfzeile, wo * sie sich bewaehrt hat: eine Zeile, die zur Seite laeuft. Der * Balken bleibt verborgen -- er wuerde die Mulde um seine eigene * Hoehe aufblaehen; gerollt wird mit dem Finger. * * scroll-padding: die aktive Pille soll beim Hinrollen nicht an der * Kante kleben. */ @media (max-width: 700px) { /* * Der Deckel muss die GANZE Kette hoch (live gemessen): eine Zeile, * die nicht umbricht, ist der Mindestbeitrag ihrer Eltern zur * Breite. Ohne Deckel wuchsen Gruppenkasten und Gruppe auf * dieselben 2110 Pixel mit -- dann war "100 Prozent" an der * Schiene eben 2110, und sie rollte nicht, sondern ragte hinaus. */ .s7b-filter-gruppen, .s7b-filter-gruppe { max-width: 100%; min-width: 0; } .s7b-mulde--schiene.s7b-filter { flex-wrap: nowrap; justify-content: flex-start; /* * BEIDES noetig, sonst rollt sie nicht, sondern ragt hinaus * (live gemessen: 2110 statt 356 Pixel). * * width: 100% loest das fit-content der Grundregel ab -- ohne * Umbruch ist "so breit wie noetig" die volle Zeile. * min-width: 0 nimmt der Schiene ihren Mindestbeitrag zur * Breite der Eltern: ohne das wuchsen Gruppe und Gruppenkasten * auf dieselben 2110 Pixel mit, und die Zeile lief aus dem Bild * statt in sich zu rollen. */ width: 100%; min-width: 0; overflow-x: auto; scroll-padding-inline: 12px; scrollbar-width: none; -ms-overflow-style: none; } .s7b-mulde--schiene.s7b-filter::-webkit-scrollbar { display: none; } /* Sonst schrumpfen die Pillen, statt die Zeile zu verlaengern. */ .s7b-mulde--schiene.s7b-filter > * { flex: 0 0 auto; } } .s7b-filter-titel { font-family: var(--s7b-versal); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s7b-tinte-leise); opacity: 0.8; } .s7b-filter-label { align-self: center; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--s7b-versal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s7b-tinte-leise); } .s7b-filter-label::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--s7b-akzent); box-shadow: 1px 2px 3px rgba(107, 62, 62, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* * Das Kartenraster. Einspaltig auf dem Handy -- zwei Spalten auf 430px * ergaeben Karten von rund 190px, in denen weder Bild noch Titel * lesbar bleiben. Die zweite Spalte kommt erst, wenn eine Karte * mindestens rund 260px behaelt. */ /* * minmax(0, 1fr) STATT 1fr -- ueberall an diesem Raster (Leons Fund, * 28.08.2026: "in der kompakten Rasteransicht sind die Beitraege * abgeschnitten"). * * "1fr" ist die Kurzform von "minmax(auto, 1fr)", und dieses auto * heisst: mindestens so breit wie der INHALT. Eine Karte enthaelt * Pillen, die nicht umbrechen duerfen ("HALLOWEEN COLLECTION"), und * einen Titel in Versalien. Bei drei Spalten passte das; bei vier * wurde jede Spalte breiter als ihr Viertel, das Raster wuchs ueber * seinen Kasten hinaus, und rechts schnitt der Rand die Karten ab. * * Die Null als Untergrenze erlaubt der Spalte, schmaler zu werden als * ihr Inhalt -- dann bricht der Inhalt um oder wird gekuerzt, statt * das Raster zu sprengen. Genau derselbe Fehler steckte schon einmal * in der Lupe (siehe .s7b-lupe-flaeche). */ .s7b-raster { display: grid; grid-template-columns: minmax(0, 1fr); /* Kartenabstand WORTGLEICH aus dem Relief-Forte-Mockup (.grid): Leons Screenshot-Abgleich vom 26.08.2026 -- die frueheren 16/18/20px liessen das Raster gedraengter wirken als die Vorlage. Ein clamp fuer alle Breiten, die Spaltenzahl bleibt getrennt. */ gap: clamp(20px, 3vw, 30px); } @media (min-width: 560px) { .s7b-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .s7b-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* * Die schmale Fassung steht in der Seitenleiste und bleibt IMMER * einspaltig. Zwei Klassen (0,2,0) statt einer, damit die Regel nicht * von der Reihenfolge der min-width-Bloecke oben abhaengt. */ .s7b-raster.s7b-raster--schmal { grid-template-columns: 1fr; gap: 14px; } /* * Beitragskarten fuellen ihr Rasterfeld ganz aus. Ohne das waere jede * Karte nur so hoch wie ihr Inhalt, und in einer Zeile mit einem * zweizeiligen Titel stuenden die Nachbarn kuerzer daneben. */ .s7b-karte--beitrag { height: 100%; } /* * Gestaffeltes FadeUp der Karten beim Laden (Herkunft: s7StatsFadeUp). * KOMPLETT innerhalb der no-preference-Kapsel, inklusive der * Verzoegerungen: `backwards` haelt die Karte vor ihrem Start * unsichtbar -- staende die Animation ausserhalb der Kapsel, bekaeme * ein Nutzer mit reduzierter Bewegung unsichtbare Karten statt * ruhender. */ @keyframes s7bFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .s7b-raster > .s7b-karte { animation: s7bFadeUp 0.7s ease backwards; } .s7b-raster > .s7b-karte:nth-child(1) { animation-delay: 0.05s; } .s7b-raster > .s7b-karte:nth-child(2) { animation-delay: 0.12s; } .s7b-raster > .s7b-karte:nth-child(3) { animation-delay: 0.19s; } .s7b-raster > .s7b-karte:nth-child(4) { animation-delay: 0.26s; } .s7b-raster > .s7b-karte:nth-child(5) { animation-delay: 0.33s; } .s7b-raster > .s7b-karte:nth-child(6) { animation-delay: 0.4s; } } /* * Der Inhaltsteil einer Karte waechst, der Knopf sitzt unten: mit * margin-top:auto stehen die Knoepfe einer Rasterzeile auf einer * Linie, auch wenn die Titel unterschiedlich lang umbrechen. */ .s7b-karte-inhalt { flex: 1 1 auto; } .s7b-karte-inhalt > .s7b-knopf { margin-top: auto; } .s7b-karte-pillen { display: flex; flex-wrap: wrap; gap: 6px; } /* * Kategorie-Schilder in einer Karte sind kleiner als die Pillen der * Filterschiene -- drei Pillen zu 44px wuerden die Karte erschlagen. * 28px bleiben ueber den 24x24 CSS-Pixeln, die WCAG 2.5.8 (AA) als * Mindestziel verlangt; die 44px der Schiene sind die AAA-Empfehlung * und bleiben dort, wo tatsaechlich gezielt getippt wird. */ .s7b-karte-pillen .s7b-pille { min-height: 28px; padding: 6px 10px; font-size: 10.5px; } /* * Kollektion und Topic stehen NEBENEINANDER, aber unterscheidbar * (Leons Wunsch, 27.08.2026: "es soll zusaetzlich deutlich werden, * was die Kategorie ist und was das Topic ist"). * * Der Unterschied traegt DREI Signale, nicht eines: die Beschriftung * davor benennt die Achse im Klartext, die Kollektion traegt die * gefuellte Pille und das Topic den blossen Umriss, und ein feiner * Strich trennt die Gruppen. Ein Signal allein reichte nicht -- * Farbe allein faellt bei Farbsinnschwaeche aus (WCAG 1.4.1), und * zwei gleich aussehende Etiketten nebeneinander liest niemand als * zwei verschiedene Achsen. */ .s7b-etikett { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } .s7b-etikett-name { font-family: var(--s7b-versal); font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; /* Leiser als die Etiketten selbst: die Beschriftung ordnet ein, sie konkurriert nicht mit dem Namen der Kollektion. */ color: var(--s7b-tinte-leise); opacity: 0.72; } /* * Die Kollektion ist die staerkere der beiden Achsen -- sie sagt, zu * welcher Serie ein Modell gehoert. Deshalb traegt ihre Pille eine * Fuellung, das Topic nur einen Umriss. Die Fuellung bleibt eine * Mischung, kein volles Rot: Rot vollflaechig ist im Sektor-7-Schema * ausdruecklich der Zustandsfarbe vorbehalten. */ .s7b-etikett--koll .s7b-pille { background: color-mix(in srgb, var(--s7b-akzent) 14%, transparent); border-color: color-mix(in srgb, var(--s7b-akzent) 30%, transparent); color: var(--s7b-akzent-tief); } /* Der Trenner haengt am zweiten Block, damit er nie allein steht -- ohne Topics gibt es auch keinen Strich. */ .s7b-etikett--topic { padding-left: 12px; border-left: 1px solid var(--s7b-linie); } /* Auf schmalen Karten bricht die Zeile; dann waere ein linker Strich ein Fragment ohne Bezug. Der Trenner wandert nach oben. */ @media (max-width: 560px) { .s7b-karte-pillen { flex-direction: column; align-items: flex-start; } .s7b-etikett--topic { padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--s7b-linie); align-self: stretch; } } /* Versalien-Titel wie im Mockup: Archivo 800, knapper Durchschuss. */ .s7b-karte-titel { margin: 0; /* Ausdruecklich, nicht geerbt: das Website-Theme faerbt Ueberschriften direkt (h1 { color: #212227 }) und schluege sonst die Schema-Tinte -- im Dunkelmodus stand dunkler Titel auf dunklem Grund (Live-Fund 26.08.2026). */ color: var(--s7b-tinte); font-family: var(--s7b-versal); font-size: 19px; font-weight: 800; line-height: 1.18; letter-spacing: -0.005em; text-transform: uppercase; } .s7b-karte-link { color: inherit; text-decoration: none; } @media (hover: hover) { .s7b-karte-link:hover { text-decoration: underline; text-underline-offset: 3px; } } .s7b-karte-datum { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s7b-tinte-leise); } .s7b-karte-auszug { margin: 0; font-size: 14px; line-height: 1.55; color: var(--s7b-tinte-leise); } /* * Rasterkarten-Aufbau wie im Relief-Forte-Mockup (.card__body, Leons * Screenshot-Abgleich 26.08.2026): Pille und Datum in EINER Zeile, * darunter der Titel, unten der ruhige "READ MORE"-Textverweis. Das * Markup bleibt unveraendert (Pillen, Titel, Datum, Auszug, Knopf in * dieser Reihenfolge) -- das Grid ORDNET nur um: benannte Zeilen je * Klasse, das Datum rueckt neben die Pillen. NUR die Rasterkarten; * der Aufmacher behaelt seine Flex-Spalte samt Auszug und rotem Knopf. */ /* * DER AUFBAU DER RASTERKARTE, neu geordnet am 27.08.2026. * * Leons Fund: "Die Vorschau sieht noch nicht professionell aus, da ist * irgendwie alles durcheinander." Gemessen war es das: * * - Das Datum stand in einer Spalte von 31 Pixeln und brach in DREI * Zeilen ("July / 26, / 2026"). Ursache war * "grid-template-columns: auto 1fr": die auto-Spalte nahm sich, * was die Pillen brauchten, und der Rest blieb dem Datum. * - Die beiden Etiketten begannen bei x=108 und x=121, weil die * Pillenzeile umbrach und die zweite Gruppe hinter der ersten * wieder ansetzte. Zwei Beschriftungen, die um dreizehn Pixel * gegeneinander versetzt sind, liest das Auge als Unfall. * * Jetzt eine EINZIGE Spalte und feste Zeilen: Datum, Etiketten, Titel, * Luft, Verweis. Das Datum bekommt die volle Breite und passt damit * immer in eine Zeile. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt { display: grid; /* * minmax(0, 1fr), nicht 1fr -- DIESELBE Falle wie am Raster selbst, * nur eine Ebene tiefer (Leons Fund, 28.08.2026: "in der kompakten * Rasteransicht sind die Beitraege abgeschnitten"). * * Das aeussere Raster war schon gerichtet, und die Karten standen * brav in ihren Spalten. Der INHALT der Karte aber sass in einem * zweiten Raster mit demselben "1fr" -- und dessen Mindestmass ist * wieder der Inhalt. Live gemessen: eine 263 Pixel breite Karte mit * einer 292 Pixel breiten Etikettenzeile darin. * * Eine gerichtete Ebene genuegt eben nicht, wenn die naechste * denselben Fehler noch einmal macht. */ grid-template-columns: minmax(0, 1fr); /* Die 1fr-Zeile vor dem Verweis drueckt ihn an den Kartenfuss -- das leistete vorher margin-top: auto im Flex, das in einem Grid nichts mehr verteilt. */ grid-template-rows: auto auto auto 1fr; align-items: start; row-gap: 10px; } /* Das Datum ist der Kicker der Karte: eine ruhige Zeile ganz oben, wie am Artikelkopf. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-datum { grid-row: 1; justify-self: start; /* Nie umbrechen: "July 26, 2026" ist eine Angabe, kein Satz. */ white-space: nowrap; } .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-pillen { grid-row: 2; } .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-titel { grid-row: 3; align-self: start; } /* * DIE ETIKETTEN FLUCHTEN. Jede Achse bekommt ihre eigene Zeile, und * die Beschriftung eine feste Spalte -- so beginnen "Collection" und * "Topics" an derselben Kante und ihre Pillen ebenfalls. * * Das ist kein Rueckschritt gegenueber "beide nebeneinander": beide * sind weiter gleichzeitig zu sehen, und der Unterschied zwischen den * Achsen bleibt an drei Signalen erkennbar (Beschriftung, gefuellte * Pille gegen blossen Umriss, eigene Zeile). Nebeneinander wurden sie * bei einem langen Kollektionsnamen ohnehin umgebrochen -- und genau * dieser Umbruch war die Unordnung. */ /* * DIE ETIKETTEN FLUCHTEN AUF JEDER KARTE -- auch auf dem Aufmacher * (Leons Wunsch, 27.08.2026: "Auf dem grossen ersten Beitrag soll das * bitte so gemacht werden wie in den kleineren"). * * Diese Regeln standen eine Fassung lang unter * ":not(.s7b-karte--aufmacher)" -- der Aufmacher behielt die alte * Zeile, in der die Pillen direkt hinter der Beschriftung ansetzen. * Da "COLLECTION" laenger ist als "TOPICS", begannen seine beiden * Pillengruppen an verschiedenen Kanten. Zwei Karten nebeneinander, * die dasselbe verschieden zeigen, liest man als Fehler. * * Gilt jetzt fuer JEDE Beitragskarte, gross wie klein. */ .s7b-karte--beitrag .s7b-karte-pillen { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .s7b-karte--beitrag .s7b-etikett { display: flex; align-items: center; /* * NICHT umbrechen (Leons Fund, 27.08.2026). Bricht eine Achse um, * wird die Karte hoeher als ihre Nachbarin -- und im Raster stehen * dann zwei Karten unterschiedlich hoch nebeneinander, je nachdem * wie lang die Topic-Namen zufaellig sind. Der Inhalt ist auf einen * Chip plus "+N" gekappt und passt damit immer. */ flex-wrap: nowrap; gap: 8px; width: 100%; /* min-width: 0 laesst den Chip notfalls schrumpfen statt die Zeile zu sprengen -- ein sehr langer Themenname wird dann gekuerzt. */ min-width: 0; } .s7b-karte--beitrag .s7b-etikett .s7b-pille, .s7b-karte--beitrag .s7b-etikett .s7b-thema-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s7b-karte--beitrag .s7b-etikett-name { /* Feste Spalte, damit beide Pillengruppen an derselben Kante beginnen. 74px traegt "COLLECTION" in der gesperrten Versalie. */ flex: 0 0 74px; } /* * KEIN Trennstrich mehr an der Karte. * * Er war ein SENKRECHTER Strich zwischen zwei Gruppen, die * nebeneinander standen. Seit sie untereinander stehen, ist er ein * Fragment ohne Bezug -- und er hat die zweite Zeile um zwoelf Pixel * eingerueckt (live gemessen: Etikett eins bei x=108, Etikett zwei bei * x=121). Genau diese Unruhe hat Leon gesehen. * * Der Trenner wird auch nicht durch einen waagerechten ersetzt: Leon * hat einen solchen an der Kollektionskarte schon einmal abgelehnt * ("den kannst du entfernen, das wirkt einfach nicht"). Die Achsen * unterscheiden sich weiter an der Beschriftung und daran, dass die * Kollektion eine gefuellte Pille traegt und das Topic einen Umriss -- * zwei Signale, wo die WCAG eines verlangt. */ .s7b-karte--beitrag .s7b-etikett--topic { padding-left: 0; padding-top: 0; border-left: 0; border-top: 0; } /* * Die Mockup-Karte kennt keinen Auszug: Bildfeld, Tags-Zeile, Titel, * Verweis -- mehr nicht (Leons markierter Screenshot, 26.08.2026). * Der Auszug bleibt im Markup, weil der Aufmacher ihn weiter zeigt; * in den Rasterkarten nimmt display: none ihn bewusst auch aus dem * Zugriffsbaum -- Titel und Verweis sagen alles, der volle Text steht * einen Klick weiter im Artikel. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-auszug { display: none; } /* * Der Kartenverweis als ruhiger Text statt Glasknopf (Mockup: * .card__cta "READ POST ->"): Kicker-Versalien in der leisen Tinte, * kein Koerper, kein Relief -- der rote Knopf bleibt dem Aufmacher. * Deshalb hier alles abraeumen, was .s7b-knopf mitbringt: Flaeche, * Rand, Schatten, Randlinien-::before, Glanz und den Gummidruck -- * Text drueckt nicht. 24px Mindesthoehe bleiben als Tippflaeche * (WCAG 2.5.8, dieselbe Stufe wie die Karten-Pillen). */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf { /* * ZEILE 4, nicht mehr 3 (27.08.2026). Seit das Datum eine eigene * Zeile hat, sitzt der Titel in Zeile 3 -- der Verweis lag also auf * ihm. Zwei Rasterkinder in derselben Zelle legt der Browser * nebeneinander: er zog dafuer eine zweite Spalte ein, und der Titel * quetschte sich in 153 Pixel (live gemessen). * * Zeile 4 ist die 1fr-Zeile; align-self: end drueckt den Verweis an * ihren Fuss, und die Karte bleibt unten buendig, egal wie lang der * Titel ist. */ grid-row: 4; align-self: end; /* * EIN DEZENTER KNOPF statt eines nackten Textverweises (Leons * Wunsch, 27.08.2026: "Read more soll einen schoenen dezenten Knopf * bekommen, der professionell aussieht und in Dark wie Light gut * aussieht"). * * Ein Umriss, keine Fuellung: der rote Druckknopf gehoert dem * Aufmacher, und drei gefuellte Knoepfe nebeneinander im Raster * waeren drei Aufforderungen, wo eine reicht. Der Umriss sagt * "anklickbar", ohne mit dem Titel darueber um Aufmerksamkeit zu * streiten. * * ALLE Farben aus Token, keine einzige fest: nur so sieht er im * Hellschema wie im Dunkeln richtig aus -- und genau das war Leons * zweite Bedingung. justify-self: start, damit der Knopf so breit * ist wie seine Beschriftung und nicht ueber die Karte laeuft. */ justify-self: start; justify-content: center; /* width: auto schlaegt die 100 Prozent, die .s7b-knopf mitbringt -- ohne das lief der Knopf ueber die ganze Kartenbreite, und justify-self hatte nichts zu ruecken. */ width: auto; min-height: 36px; padding: 8px 16px; /* * NACHGESCHAERFT (Leons Wunsch, 28.08.2026: "der Read-More-Knopf * soll etwas professioneller gestaltet werden"). * * Drei Dinge liessen ihn nach Vorgabe aussehen statt nach Entwurf: * * 1. Der Pfeil war ein SCHRIFTZEICHEN (\2192). Es kommt aus der * Ersatzschrift des Browsers, traegt deren Strichstaerke und * deren Grundlinie -- neben einer 11px-Versalzeile sass es zu * tief und zu fett. Jetzt ist er gezeichnet (siehe unten), wie * jedes andere Zeichen im Blog auch (Designschema, Falle 9). * * 2. Der Rand war reines Grau. Eine Spur Akzent darin bindet den * Knopf an die Karte, statt ihn wie einen Fremdkoerper wirken zu * lassen -- sichtbar wird das kaum, spuerbar schon. * * 3. Kein Licht auf der Kante. Die feine helle Linie oben ist das, * was jede andere Flaeche im Blog traegt (--s7b-glas-schatten); * ohne sie lag der Knopf flach auf der Karte. */ border: 1px solid color-mix(in srgb, var(--s7b-akzent) 14%, var(--s7b-linie)); border-radius: 999px; background: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); color: var(--s7b-tinte); font-size: 11px; letter-spacing: 0.14em; /* Text und Pfeil: knapper als die 8px des Grundknopfes -- der gezeichnete Pfeil ist schmaler als ein Schriftzeichen und stuende sonst verloren. */ gap: 9px; transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; } /* * DIESER BLOCK STEHT VOR DEN @media-BLOECKEN, und das ist Absicht. * * Er stand einmal dahinter. Bei gleicher Spezifitaet entscheidet die * Reihenfolge (Falle 2 des Designschemas) -- die Grundregel schlug * damit das "transition: none" der Bewegung-aus-Regel, und wer * Animationen abgeschaltet hat, bekam sie hier trotzdem. Ein Test * hielt es fest, weil er ebenfalls die erste passende Regel las und * dabei auf die falsche stiess. */ /* * DER PFEIL WOHNT IM MARKUP, nicht mehr in Pseudo-Elementen * (Leons Schema, 28.08.2026: "der Pfeil soll nicht nur danebenstehen, * sondern nach dem Schema" -- also in einer Scheibe). * * Zwei Pseudo-Elemente konnten Schaft und Spitze zeichnen, aber nicht * INEINANDER legen: ein Element ist entweder der Kreis oder der Pfeil. * Fuer beides braucht es zwei Elemente, und die kommen jetzt aus * S7B_Render::knopf (Feld 'nach'). * * Die Scheibe ist die kleine Schwester der Karussell-Pfeile: runder * Rand, feine Linie, kein Relief. So liest sich der Kartenknopf als * Teil derselben Familie. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf > .s7b-knopf-nach { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; margin-right: -4px; border-radius: 50%; border: 1px solid currentColor; /* Der Rand traegt die Form, nicht die Farbe: bei voller Deckung waere die Scheibe lauter als die Beschriftung daneben. */ opacity: 0.4; transition: opacity 0.22s ease, background 0.22s ease, transform 0.22s ease; } .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf > .s7b-knopf-nach svg { display: block; /* Der Schaft des Pfeils darf ruhig an den Rand stossen -- eine Scheibe mit zuviel Luft innen sieht aus wie ein leerer Knopf. */ width: 13px; height: 13px; } /* * Beim Hover wandert der Pfeil nach rechts -- die Ankuendigung * dessen, was gleich passiert. Der Akzent kommt an den RAND und in * die Schrift, nicht als Flaeche: gefuelltes Rot ist im Schema der * Zustandsfarbe vorbehalten. */ @media (hover: hover) { .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf:hover { border-color: color-mix(in srgb, var(--s7b-akzent) 45%, transparent); background: color-mix(in srgb, var(--s7b-akzent) 8%, transparent); color: var(--s7b-akzent-text, var(--s7b-tinte)); } /* * Die Scheibe tritt hervor und rueckt ein Stueck nach rechts -- die * Ankuendigung dessen, was gleich passiert. Ein Hauch Akzent im * Grund, nicht die volle Fuellung: gefuelltes Rot ist im Schema der * Zustandsfarbe vorbehalten. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf:hover > .s7b-knopf-nach { opacity: 1; background: color-mix(in srgb, var(--s7b-akzent) 12%, transparent); transform: translateX(2px); } } .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf:focus-visible { outline: 2px solid var(--s7b-akzent-tief); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf, .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf > .s7b-knopf-nach { transition: none; } /* Die Scheibe rueckt nicht -- dass sie hervortritt, sagt schon genug. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf:hover > .s7b-knopf-nach { transform: none; } } /* * DER PFEIL, GEZEICHNET (28.08.2026). * * Zwei Teile aus reinem CSS: ein Schaft (::before, ein Strich) und * eine Spitze (::after, zwei Kanten eines Kaestchens, um 45 Grad * gedreht). Beide in currentColor -- sie folgen der Textfarbe des * Knopfes durch Hell, Dunkel und Hover, was ein eingebettetes Bild * nicht koennte. * * order: der Knopf ist ein Flex-Kasten, und ::before waere darin von * Haus aus das ERSTE Kind -- der Schaft staende links vom Wort. Die * beiden Ordnungszahlen schieben ihn hinter den Text. * * Der negative Rand zieht die Spitze an den Schaft: als getrennte * Flex-Kinder trennte sie sonst die Luecke des Kastens, und aus einem * Pfeil wuerden ein Strich und ein Winkel. */ .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf > .s7b-glanz { display: none; } @media (hover: hover) { .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf:hover { transform: none; /* Das Kantenlicht BLEIBT (28.08.2026) -- nur das Relief des Grundknopfes faellt weg. Vorher loeschte box-shadow: none beim Hover auch die feine helle Linie oben, und der Knopf wurde im Ueberfahren flacher statt lebendiger. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); color: var(--s7b-akzent-tief); } } .s7b-karte--beitrag:not(.s7b-karte--aufmacher) .s7b-karte-inhalt > .s7b-knopf:active { transform: none; background: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* * Kompakte Meta-Zeile am Aufmacher (Mockup: .meta): kleiner Avatar, * Name fett, dazwischen die Trennerpunkte, Datum und Lesezeit leise. * Die Trenner- und Datums-Spannen kommen aus meta_zeile() und tragen * ihre Farben schon (Abschnitt 10). */ .s7b-karte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; color: var(--s7b-tinte-leise); } /* Eine Stufe kleiner als der 34px-Avatar der Artikel-Meta. */ .s7b-karte-meta .s7b-avatar { width: 26px; height: 26px; font-size: 11px; } .s7b-karte-meta .s7b-autor-name { font-weight: 700; color: var(--s7b-tinte); } /* * Der Avatar-Faecher auf der Karte: die Scheiben sind hier 26 statt * 34 Pixel, also darf sich auch die Ueberdeckung nicht blind aus der * Artikel-Meta uebernehmen -- 12 Pixel Versatz an einer 26er Scheibe * verdeckten fast die Haelfte. */ .s7b-karte-meta .s7b-avatar-stapel .s7b-avatar + .s7b-avatar { margin-left: -9px; } /* * Der Aufmacher. Auf dem Handy ist er einfach eine groessere Karte -- * nebeneinander waere bei 430px beides zu schmal. Erst ab 760px stehen * Bild und Text nebeneinander. */ .s7b-karte--aufmacher .s7b-karte-titel { font-size: clamp(24px, 4.4vw, 34px); } /* * Das Aufmacher-Bild fuellt sein Feld KOMPLETT (Leon, 26.08.2026: * "da ist das Bild noch mal in einem Kasten eingebettet [...] Das soll * auf der ganzen Flaeche rein"): kein Innenpolster, kein eigener * Bildrahmen, kein eigener Schatten -- die Rundung kommt allein vom * overflow: hidden der Karte. NUR am Aufmacher; die Artikel-Buehne * behaelt ihre Passepartout-Fassung (object-fit: contain). * * Das FELD folgt dem BILDFORMAT: S7B_Render::karte() schreibt das * gemessene Seitenverhaeltnis als --s7b-bv (z.B. "1080 / 1350") inline * an die Buehne. Quadratbild -> quadratisches Feld, Reel -> laengliches * Feld, die Karte waechst mit. Der 1/1-Rueckfall ist Leons Regelfall * (Instagram-Quadrate) und greift, wenn WordPress keine Masse kennt. * height: auto schlaegt den clamp-Deckel der Basis-Buehne -- der war * die Reparatur fuer die alte contain-Buehne; mit aspect-ratio kann * das Bild die Karte nicht mehr unkontrolliert aufblaehen. */ .s7b-karte--aufmacher .s7b-buehne { height: auto; aspect-ratio: var(--s7b-bv, 1 / 1); } /* Der Lichtfall-Schleier der Buehne (::after) gehoert zum Passepartout-Look -- ueber einem randlosen Foto waere er nur ein Grauschleier. */ .s7b-karte--aufmacher .s7b-buehne::after { content: none; } .s7b-karte--aufmacher .s7b-buehne .s7b-buehne-bild { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none; } @media (min-width: 760px) { .s7b-karte--aufmacher { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; } /* Der Glanzstreifen ist absolut positioniert und damit KEIN Rasterfeld -- er liegt weiter ueber der ganzen Karte. */ /* * Hochkant-Feld (s7b-karte--bild-hoch aus dem Render, Hoehe > * 1,15 x Breite): die Bildspalte wird schmaler, die Textspalte * breiter. Ein 4:5- oder 9:16-Feld in der 1.1fr-Spalte risse die * Karte sonst weit ueber Schirmhoehe -- schmaler bleibt das Feld * laenglich (Leons Vorgabe), ohne den Text zu erdruecken. Die * Textspalte bleibt ueber align-items: center vertikal mittig. */ .s7b-karte--aufmacher.s7b-karte--bild-hoch { grid-template-columns: 0.85fr 1.15fr; } .s7b-karte--aufmacher .s7b-karte-inhalt { justify-content: center; gap: 12px; padding: 28px 30px; } .s7b-karte--aufmacher .s7b-karte-titel { font-size: clamp(27px, 3.4vw, 40px); } .s7b-karte--aufmacher .s7b-karte-auszug { font-size: 15px; } /* Hier soll der Knopf unter dem Text stehen, nicht am Kartenfuss: die Spalte ist hoeher als ihr Inhalt. */ .s7b-karte--aufmacher .s7b-karte-inhalt > .s7b-knopf { margin-top: 4px; width: auto; align-self: start; } } /* Nachladen statt Seitenzahlen. Der Knopf ist breit gebaut, hier aber ein zentriertes Ziel und nicht die volle Zeilenbreite. */ .s7b-mehr { display: flex; justify-content: center; } .s7b-mehr .s7b-knopf--breit { width: auto; min-width: 220px; max-width: 100%; padding-inline: 32px; } /* Kein Treffer: eine Mulde mit einem Satz, mittig. */ .s7b-leer { margin: 0; text-align: center; color: var(--s7b-tinte-leise); } /* ------------------------------------------------------------------ 10. Artikelseite Mobil eine Spalte: Artikel, darunter die Seitenleiste. Die Seitenleiste ist Beiwerk -- sie gehoert unter den Text, nicht davor. ------------------------------------------------------------------ */ .s7b-artikel { display: flex; flex-direction: column; gap: 22px; /* Im Raster sonst nicht schrumpffaehig: ein breites 
 oder eine
     Tabelle im Fliesstext sprengte die Spalte. */
  min-width: 0;
}

.s7b-artikel-kopf {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==================================================================
   DER ARTIKELKOPF (Leons Wunsch, 28.08.2026: "professioneller,
   moderner -- die Pillen kleiner").

   Krumenpfad, Pillen und Titel sind EIN Block: erst der Weg hierher,
   dann die Einordnung, dann die Ueberschrift. Die Pillen sind hier
   BESCHRIFTUNGEN, keine Filterknoepfe -- darum eine Stufe kleiner als
   auf der Uebersicht, wo dieselbe Pille ein 44er Tippziel ist. Die
   Relief-Rezeptur bleibt, nur die Masse aendern sich.
   ================================================================== */
.s7b-artikel-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.s7b-artikel-pillen .s7b-pille {
  min-height: 28px;
  padding: 5px 12px;
  font-size: 9.5px;
  letter-spacing: 0.09em;
}

/* Der Krumenpfad rueckt naeher an die Pillen: beide sagen, wo man
   ist -- sie gehoeren zusammen. */
.s7b-artikel-kopf .s7b-krumen {
  margin-bottom: 0;
  color: var(--s7b-tinte-leise);
}

/* Und der Titel bekommt Luft nach oben, damit der Block atmet, statt
   an der Ueberschrift zu kleben. */
.s7b-artikel-kopf .s7b-artikel-titel {
  margin-top: 18px;
}

/*
 * Die Versalien-Skala aus dem Mockup, seit dem 27.08.2026 eine Stufe
 * kleiner: bis ~44px statt ~56px (Leons Wunsch).
 *
 * Der Grund war nicht die Groesse an sich, sondern die Laenge. Solange
 * der Titel BEIDES trug -- Name und Versprechen, "Black Dragon
 * Sculpture: A Crouched, Battle-Ready 3D Print" --, standen bei 56px
 * vier Zeilen Versalien da, und der Name ging im Nachsatz unter. Seit
 * das Versprechen in der Unterzeile steht, ist der Titel kurz, und ein
 * kurzer Titel braucht die ganz grosse Stufe nicht mehr.
 */
.s7b-artikel-titel {
  margin: 0;
  /* Ausdruecklich, nicht geerbt: das Website-Theme faerbt Ueberschriften
     direkt (h1 { color: #212227 }) und schluege sonst die Schema-Tinte --
     im Dunkelmodus stand dunkler Titel auf dunklem Grund (Live-Fund
     26.08.2026). */
  color: var(--s7b-tinte);
  font-family: var(--s7b-versal);
  font-size: clamp(27px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  /* Verhindert die einsame letzte Silbe in der Schlusszeile. */
  text-wrap: balance;
}

/*
 * Die Unterzeile (Leons Wunsch, 27.08.2026): sie sagt, was man
 * bekommt, waehrend die Ueberschrift das Modell nennt.
 *
 * Bewusst NICHT in Versalien und nicht in der Anzeigenschrift: zwei
 * Versalienzeilen uebereinander lesen sich als eine einzige, zu lange
 * Ueberschrift -- genau das Bild, das hier abgeschafft werden sollte.
 * Die Unterzeile ist Fliesstext in gedaempfter Tinte; der Abstand nach
 * oben ist knapp, damit sie sichtbar ZUR Ueberschrift gehoert und
 * nicht wie ein erster Absatz aussieht.
 */
.s7b-artikel-unterzeile {
  margin: -4px 0 0;
  color: var(--s7b-tinte-leise);
  font-family: var(--s7b-schrift);
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

.s7b-artikel-figur {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/* Das Artikelbild steht auf derselben Buehne wie der Aufmacher, nur
   mit eigener Rundung -- die Figur hat keine Karte um sich. */
.s7b-artikel-figur .s7b-buehne {
  height: clamp(340px, 88vw, 520px);
  border-radius: var(--s7b-radius);
}

.s7b-artikel-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--s7b-radius);
}

.s7b-artikel-bu {
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--s7b-tinte-leise);
}

/* --- Krumenpfad --- */

/* Schriftbild am nav, Anordnung an der Liste -- so bleibt die
   Typografie an einer Stelle, auch wenn die Liste sich aendert. */
.s7b-krumen {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * DER KRUMENPFAD BEKOMMT EINE LEISTE (Leons Wunsch, 28.08.2026:
 * "dezent in einer Leiste, hochwertig und professionell").
 *
 * DIESELBE Rezeptur wie die Meta-Zeile mit dem Autor eine Zeile
 * tiefer -- runde Pille, feine Linie, ein Hauch Akzent im Grund. So
 * lesen sich Krumenpfad, Pillen und Meta-Zeile als drei Teile EINER
 * Kopfzeile statt als drei fremde Bausteine. Nackt dazwischen sah
 * der Pfad aus, als hatte man ihn vergessen.
 *
 * Nur so breit wie noetig (fit-content): eine Leiste, die weiter
 * reicht als ihr Inhalt, ist ein leeres Regal -- dieselbe Regel wie
 * an den Filterschienen und der Daumenleiste.
 */
.s7b-artikel-kopf .s7b-krumen {
  width: fit-content;
  max-width: 100%;
  /*
   * FLACH (Leons Wunsch, 28.08.2026: "der Breadcrumb-Kasten soll
   * etwas dezenter von der Hoehe sein").
   *
   * Die Leiste kam urspruenglich auf 48 Pixel: 7px Polster aussen
   * plus 8px an jedem Verweis darin, fuer die Trefferflaeche. Damit
   * ueberragte sie die Pillenreihe darunter um die Haelfte -- und der
   * Pfad, der das LEISESTE Element der Kopfzeile sein soll, war ihr
   * groesstes.
   *
   * Jetzt 28: dieselbe Hoehe wie die Pillen eine Zeile tiefer. Der
   * Pfad ordnet sich ein, statt die Kopfzeile anzufuehren.
   *
   * Der Grund wird ebenfalls leiser (2 statt 4 Prozent Akzent): eine
   * flache Leiste mit kraeftigem Grund wirkt wie ein Balken, eine mit
   * angedeutetem wie eine Fassung.
   */
  padding: 2px 13px;
  border-radius: 999px;
  border: 1px solid var(--s7b-linie);
  background: color-mix(in srgb, var(--s7b-akzent) 2%, transparent);
}

/*
 * 4px statt 8: das kleinere Ziel ist hier vertretbar, weil die
 * Krumen nebeneinander stehen und waagerecht reichlich Flaeche haben
 * -- die Pillen darunter tragen dieselbe Hoehe. Der letzte Punkt ist
 * ohnehin kein Verweis.
 */
.s7b-artikel-kopf .s7b-krumen .s7b-krumen-link {
  padding-block: 4px;
}

/* Umgebrochen wie die Meta-Zeile: eine ruhige Ecke statt einer
   verrutschten Pille. */
@media (max-width: 560px) {
  .s7b-artikel-kopf .s7b-krumen {
    border-radius: 16px;
  }
}

.s7b-krumen-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s7b-krumen-punkt {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Der Trenner gehoert zwischen zwei Stufen, nie vor die erste. */
.s7b-krumen-punkt + .s7b-krumen-punkt::before {
  content: "/";
  color: var(--s7b-tinte-leise);
}

/* Hoehere Trefferflaeche, ohne die Zeile zu sprengen: der Verweis
   wird zum Block und bekommt Polster oben und unten. Die Krumenzeile
   bricht per flex-wrap ohnehin sauber um. */
.s7b-krumen-link {
  display: inline-block;
  padding-block: 8px;
  color: var(--s7b-tinte-leise);
  text-decoration: none;
}

@media (hover: hover) {
  .s7b-krumen-link:hover { color: var(--s7b-tinte); text-decoration: underline; }
}

.s7b-krumen-hier {
  color: var(--s7b-tinte);
}

/* --- Zeile mit Autor, Datum, Lesezeit --- */

/*
 * Die Zeile unter dem Titel -- Autor, Datum, Lesezeit.
 *
 * Sie steht in einem DEZENTEN Rahmen (Leons Wunsch, 27.08.2026:
 * "irgendwie dezent verpacken"). Vorher schwebte sie zwischen dem
 * grossen Titel und dem Bild, ohne dass ihr etwas Halt gab.
 *
 * Bewusst KEIN Glasrezept wie die Karten: der Rahmen soll die Zeile
 * fassen, nicht sie hervorheben. Deshalb nur eine Haarlinie und ein
 * Hauch Fuellung -- beide aus den Token, also im Dunkeln von selbst
 * richtig. Und nur so breit wie ihr Inhalt: ueber die volle Spalte
 * gezogen waere aus der Fassung ein Balken geworden.
 */
.s7b-meta {
  /* Anker fuer das Autor-Popover -- es haengt absolut an dieser Zeile. */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--s7b-linie);
  background: color-mix(in srgb, var(--s7b-akzent) 4%, transparent);
  font-size: 12.5px;
  color: var(--s7b-tinte-leise);
}

/*
 * Auf schmalen Schirmen bricht die Zeile in mehrere Zeilen um. Eine
 * Vollrundung um einen zweizeiligen Block sieht aus wie eine
 * verrutschte Pille -- dann eine ruhige Ecke.
 */
@media (max-width: 560px) {
  .s7b-meta {
    border-radius: 16px;
  }
}

.s7b-autor-knopf .s7b-autor-name {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.s7b-meta-autor .s7b-autor-name {
  font-weight: 700;
  color: var(--s7b-tinte);
}

/*
 * Der Autor-Name als Ausloeser fuers Popover: die gepunktete
 * Unterstreichung sagt "hier steckt mehr dahinter", ohne wie ein
 * gewoehnlicher Verweis auszusehen.
 */
.s7b-autor-knopf {
  /*
   * Flex, nicht inline: seit der Avatar ein  sein kann (Foto
   * statt Initiale), brach der Name in die zweite Zeile um -- ein
   * Block-Bild in einer Inline-Zeile (Leons Fund, 27.08.2026).
   * Die punktierte Unterstreichung sitzt deshalb am NAMEN, nicht am
   * Verweis: am Verweis haette sie auch unter dem Foto gelegen.
   */
  display: inline-flex;
  /*
   * Umbrechend, seit ein Beitrag bis zu drei Autoren haben kann: ein
   * Flex-Kasten bricht seine Kinder von Haus aus NICHT um, und
   * "Faecher + A, B & C" ist auf 390 Pixeln breiter als die
   * Meta-Pille. Die senkrechte Luecke bleibt klein -- zwei Zeilen
   * Autor sollen nicht auseinanderfallen.
   */
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  /* Erlaubt dem Namensblock, schmaler zu werden als sein laengstes
     Wort -- ohne das schiebt er die Pille auf. */
  min-width: 0;
  color: var(--s7b-tinte);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/*
 * Die Huelle um die Namen. Sie ist EIN Flex-Kind; innen ist wieder
 * gewoehnlicher Fliesstext, damit die Luecke des Knopfes nicht auch
 * vor dem Komma steht ("Leon , Axel") und die Namen wie Text
 * umbrechen.
 */
.s7b-autor-namen {
  min-width: 0;
}

@media (hover: hover) {
  .s7b-autor-knopf:hover {
    color: var(--s7b-akzent-tief);
  }
}

.s7b-autor-knopf:focus-visible {
  outline: 2px solid var(--s7b-akzent-tief);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * Das Autor-Popover: eine kleine Glas-Karte unter der Meta-Zeile.
 * z-index 6 hebt es ueber Karteninhalte und den Glanz (z 1-3); die
 * Breite klemmt am Schirmrand, bevor sie die 300px erreicht.
 */
.s7b-autor-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 6;
  /* 420 statt 300: "LEON -- Founder & Lead Designer, Sektor 7
     Studios" brach sonst auf drei Zeilen um (Leons Fund, 27.08.2026).
     Die Klemme auf die Fensterbreite bleibt fuers Handy. */
  width: min(420px, calc(100vw - 40px));
  padding: 18px 20px;
  border-radius: var(--s7b-radius);
  /* Deckender als die kanonische 0.42er-Karte -- mit Begruendung: das
     Popover schwebt ueber beliebigem Karteninhalt, bei 0.42 schiene
     der Text darunter durch die Kleinschrift. Der satte Verlauf haelt
     die 13,5px-Bio sicher ueber AA. */
  background: var(--s7b-glas-verlauf);
  border: 1px solid var(--s7b-karte-rand);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--s7b-glas-schatten-hoch);
  color: var(--s7b-tinte);
  font-size: 13.5px;
  line-height: 1.55;
  /*
   * Eine SPALTE von Personen (Leons Wunsch nach bis zu drei Autoren,
   * 27.08.2026). Die Zeile Bild-neben-Text ist eine Ebene tiefer
   * gewandert, an .s7b-popover-person -- stuende sie noch hier,
   * legte das Popover drei Personen nebeneinander.
   */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*
 * EINE Person: Bild und Text nebeneinander. Sie standen frueher fast
 * aneinander (Leons Fund, 27.08.2026) -- 16px ist derselbe Wert, den
 * der Autor-Kasten zwischen Avatar und Text haelt.
 */
.s7b-popover-person {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Eine feine Linie zwischen zwei Personen: ohne sie liest sich die
   zweite Bio als Fortsetzung der ersten. */
.s7b-popover-person + .s7b-popover-person {
  padding-top: 16px;
  border-top: 1px solid var(--s7b-linie);
}

/* [hidden] MUSS gewinnen: display auf der Klasse selbst wuerde das
   Attribut sonst wirkungslos machen. Steht NACH der display:flex-Regel
   darueber, sonst zeigte das Popover sich trotz Attribut. */
.s7b-autor-popover[hidden] {
  display: none;
}

/* Weiches Einblenden -- nur, wenn das System Bewegung erlaubt. */
@media (prefers-reduced-motion: no-preference) {
  .s7b-autor-popover {
    animation: s7bFadeUp 0.22s ease backwards;
  }
}

.s7b-autor-popover .s7b-avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
  /* Der Avatar darf nicht schrumpfen, wenn der Name umbricht. */
  flex: 0 0 auto;
}

.s7b-popover-text {
  min-width: 0;
}

/*
 * Der rote Strich unter der Namenszeile -- dasselbe Zeichen wie unter
 * den Ueberschriften im Blog, nur schmal: stehender Traeger, darauf
 * das wandernde Licht. Er macht aus der Karte eine Visitenkarte
 * (Leons Wunsch, 27.08.2026).
 */
.s7b-popover-strich {
  position: relative;
  display: block;
  width: 64px;
  height: 3px;
  margin: 9px 0 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8B0000, #c40000);
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.18);
  overflow: hidden;
}

.s7b-popover-strich::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 4px;
  transform: translate(0, -50%);
  border-radius: 999px;
  background: radial-gradient(closest-side,
    rgba(255, 120, 120, 0.9),
    rgba(230, 40, 40, 0.5) 55%,
    rgba(196, 0, 0, 0) 100%);
  box-shadow: 0 0 5px rgba(230, 40, 40, 0.4);
  animation: s7b-kitt-leise 2.1s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Nur das Licht tritt ab -- der Traeger bleibt, sonst fehlte das
   Zeichen ganz. */
@media (prefers-reduced-motion: reduce) {
  .s7b-popover-strich::after { animation: none; opacity: 0; }
}

.s7b[data-s7-thema="dunkel"] .s7b-popover-strich,
[data-s7-thema="dunkel"] .s7b .s7b-popover-strich {
  background: linear-gradient(90deg, #c62828, #ff5252);
}

.s7b-popover-bio {
  margin: 0;
  color: var(--s7b-tinte-leise);
}

/* Die Rolle unterm Namen: rot und klein (Mockup: .author-box span). */
.s7b-autor-popover .s7b-autor-rolle {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--s7b-akzent-tief);
}

.s7b-autor-popover .s7b-autor-name {
  font-family: var(--s7b-versal);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s7b-tinte);
}

.s7b-autor-popover p {
  margin: 6px 0 0;
  color: var(--s7b-tinte-leise);
}

.s7b-meta-datum,
.s7b-meta-zeit,
.s7b-meta-neu,
.s7b-meta-trenner {
  color: var(--s7b-tinte-leise);
}

/* --- Knopfleisten --- */

/*
 * flex-basis auto statt einer festen Halbierung: die Knoepfe messen
 * sich an ihrer Beschriftung. Passen zwei nicht nebeneinander,
 * rutschen sie durch flex-wrap untereinander -- das ist auf dem Handy
 * ohnehin das groessere Tippziel und immer noch besser, als eine
 * Beschriftung mitten im Wort zu brechen.
 */
.s7b-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.s7b-knoepfe .s7b-knopf {
  flex: 1 1 auto;
}

/* Die Beschriftung liegt UEBER dem Glanzstreifen (der ist z-index 1
   und deckt sonst die Schrift ab). */
.s7b-knopf-text {
  position: relative;
  z-index: 2;
}

/* Kleines Inline-SVG links der Beschriftung (Patreon, Thangs,
   Instagram): erbt die Knopf-Farbe ueber currentColor und liegt wie
   die Schrift ueber dem Glanz. */
.s7b-knopf-icon {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/*
 * Die Modell-Knoepfe stehen direkt unterm Aufmacherbild -- dort ist
 * die Kauflust am groessten und der Knopf bekommt Luft nach oben.
 */
.s7b-knoepfe--modell {
  margin-top: 2px;
}

/* ------------------------------------------------------------------
   Die Kaufbox -- Bauform und Werte aus der Linktree-Karte
   (linktree-extra.css, .s7-card-actions / .s7-card-action). Leons
   Wunsch vom 27.08.2026: "eins zu eins die Buttons wie beim Linktree".
   Dort steht ueber den zwei Knoepfen der Name der Kollektion, hier der
   Name des Modells.
   ------------------------------------------------------------------ */

/*
 * Die Box ist ein eigener KASTEN, kein blosser Abstandhalter (Leons
 * Korrektur, 27.08.2026: "sollen noch mal in einem Kasten sein").
 * Damit steht das Kaufangebot als geschlossene Einheit im Artikel,
 * statt zwei lose Knoepfe in den Text zu haengen.
 */
.s7b-kauf {
  display: flex;
  flex-direction: column;
  /* Mittig (Leons Vorgabe, 27.08.2026): die Knoepfe sind nur so breit
     wie noetig, und linksbuendig haetten sie eine wachsende Luecke
     rechts hinterlassen. */
  align-items: center;
  /*
   * Und der Kasten selbst ist nur so breit wie sein Inhalt (Leons
   * Praezisierung am selben Tag). Ueber die volle Spalte gezogen war
   * er ein Band quer durch den Artikel; jetzt sitzt er als kompakte
   * Karte mittig ueber dem Text -- auf derselben Achse wie der
   * Instagram-Knopf am Ende.
   */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 12px;
  /*
   * Dasselbe Glasrezept wie die uebrigen Kaesten der Seite (Leons
   * Wunsch, 27.08.2026: "so eine Box wie bei den Druckeinstellungen").
   *
   * Vorher trug der Kasten eine rote Toenung -- und die Knoepfe darin
   * ebenfalls. Zwei getoente Flaechen uebereinander addieren ihre
   * Helligkeit, genau wie bei der Teilen-Leiste: der Kasten stach
   * heraus, statt die Knoepfe zu fassen. Jetzt traegt das Rot nur
   * noch, was man anklicken soll.
   */
  padding: 14px 16px 16px;
  border-radius: var(--s7b-radius);
  background: var(--s7b-karte-flaeche);
  border: 1px solid var(--s7b-karte-rand);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--s7b-glas-schatten);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s7b-kauf { background: var(--s7b-deckend); }
}

@media (min-width: 680px) {
  .s7b-kauf { padding: 18px 22px 20px; }
}

/*
 * Der leise Knopf: er gehoert in den Kasten, fuehrt aber woandershin.
 * Instagram steht unter der Ueberschrift "Get this model" -- gleich
 * laut verspraeche er die Datei, die es dort nicht gibt. Kein Rot,
 * nur ein Umriss; die Form bleibt dieselbe, damit die Reihe eine
 * Reihe bleibt.
 */
.s7b-kauf-knopf--leise {
  background: transparent;
  border-color: var(--s7b-linie);
  color: var(--s7b-tinte-leise);
  box-shadow: none;
}

@media (hover: hover) {
  .s7b-kauf-knopf--leise:hover {
    color: var(--s7b-tinte);
    border-color: color-mix(in srgb, var(--s7b-akzent) 30%, transparent);
    box-shadow: none;
  }
}

.s7b-kauf--modell {
  margin-top: 2px;
}

/*
 * Innerhalb der Kollektionskarte KEIN zweiter Kasten: die Karte ist
 * schon einer, und ein Rahmen im Rahmen sieht nach Versehen aus.
 */
.s7b-kauf--koll {
  /* Luft nach oben (Leons Fund, zweimal nachgeschaerft): die
     Ueberschrift klebte am Kollektionsnamen darueber. */
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  /*
   * Weichzeichner und Schatten MUESSEN mit zurueck. Sie standen
   * anfangs nicht hier, und der Kasten blieb als hellere Flaeche
   * sichtbar, obwohl Rand und Grund weg waren -- ein Rahmen im Rahmen
   * ohne Rahmen (Leons Fund, 27.08.2026). Wer eine Rezeptur
   * zuruecknimmt, muss sie GANZ zuruecknehmen.
   */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  /* Und die Gruppen stehen hier untereinander: die Karte ist schmal,
     zwei Spalten daneben braechen die Knoepfe in zwei Zeilen. */
  flex-direction: column;
  align-items: flex-start;
}

/*
 * Den Abschluss-Kasten gibt es seit dem 27.08.2026 nicht mehr: alle
 * Knoepfe stehen in EINEM Kasten. Die Klasse bleibt als benannter
 * Haken stehen, damit niemand sie fuer vergessen haelt -- und falls
 * eine Stelle ausserhalb der Artikelvorlage sie noch benutzt.
 */
.s7b-kauf--abschluss {
  margin-top: 12px;
}

/*
 * Groesse, Sperrung und der rote Traeger kommen aus der gemeinsamen
 * Regel der Kastenkoepfe (Leons Wunsch, 27.08.2026: "soll auch einen
 * roten Unterstrich bekommen"). Hier bleibt nur, was diese
 * Ueberschrift von jenen unterscheidet -- sie steht mittig ueber
 * ihren Knoepfen, nicht linksbuendig ueber einem Kasten.
 */
.s7b-kauf-titel {
  align-self: center;
  /* Kein eigener Rand: den Abstand macht die Luecke der Gruppe, wie
     bei den Kastenkoepfen der Seitenleiste auch. Zwei Quellen fuer
     denselben Abstand ergaeben ihn doppelt. */
  margin: 0;
  text-transform: uppercase;
  /* Ausdruecklich, nicht geerbt: das Website-Theme faerbt Absaetze
     direkt und schluege sonst die Schema-Tinte. */
  color: var(--s7b-tinte);
  text-wrap: balance;
}

/*
 * Zwei benannte Gruppen nebeneinander (Leons Wunsch, 27.08.2026):
 * links das Modell, rechts hinter einem Trennstrich die sozialen
 * Ziele. Jede Gruppe sagt, was sie ist -- vorher stand "View on
 * Instagram" unter "Get this model" und verspreche etwas, das es dort
 * nicht gibt.
 */
.s7b-kauf-gruppe {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
   * 26px, damit der SICHTBARE Abstand zwischen dem roten Traeger und
   * den Knoepfen derselbe ist wie in der Seitenleiste zwischen Traeger
   * und Bild: dort sind es gemessene 24 Pixel (Leons Vorgabe,
   * 27.08.2026).
   *
   * Nachgemessen: mit 26 waren es 26 -- die Zeile schliesst also
   * buendig ab, und der Traeger haengt ausserhalb ihrer Kante. 24 gibt
   * 24. Nachgemessen statt gerechnet.
   */
  gap: 24px;
  min-width: 0;
}

/*
 * Der Trennstrich haengt an der ZWEITEN Gruppe, damit er nie allein
 * steht: gibt es keine sozialen Ziele, gibt es auch keinen Strich.
 */
.s7b-kauf-gruppe + .s7b-kauf-gruppe {
  padding-left: 18px;
  border-left: 1px solid var(--s7b-linie);
}

/*
 * Auf schmalen Schirmen stehen die Gruppen untereinander. Ein linker
 * Strich waere dann ein Fragment ohne Bezug -- er wandert nach oben.
 */
@media (max-width: 640px) {
  .s7b-kauf {
    align-items: stretch;
  }

  .s7b-kauf-gruppe + .s7b-kauf-gruppe {
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid var(--s7b-linie);
  }
}

@media (min-width: 641px) {
  .s7b-kauf {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
}

.s7b-kauf-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/*
 * Ein Glyph statt eines Bildlogos (Instagram). Dieselbe Flaeche wie
 * die Bildlogos, damit die Knoepfe in einer Reihe nicht unterschiedlich
 * hoch werden; das SVG erbt die Knopffarbe ueber currentColor.
 */
.s7b-kauf-logo--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
}

/*
 * flex-basis auto statt 0 -- die Linktree-Lektion im Wortlaut: mit
 * einer festen Halbierung brach "ON PATREON" in zwei Zeilen. Passen
 * zwei Knoepfe nicht nebeneinander, rutschen sie durch flex-wrap
 * untereinander; das ist auf dem Handy ohnehin das groessere Tippziel.
 */
.s7b-kauf-knopf {
  /* Nur so breit wie noetig (Leons Korrektur, 27.08.2026): ueber die
     ganze Breite gezogen sahen zwei Knoepfe wie Formularfelder aus.
     Die 0 als Wachstum, auto als Ausgangsbreite -- schrumpfen duerfen
     sie, wachsen nicht. */
  flex: 0 1 auto;
  /* 44px: das Tippziel der AAA-Empfehlung, wie im Linktree. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--s7b-akzent) 20%, transparent),
    color-mix(in srgb, var(--s7b-akzent) 13%, transparent));
  border: 1px solid color-mix(in srgb, var(--s7b-akzent) 26%, transparent);
  color: var(--s7b-tinte);
  text-decoration: none;
  font-family: var(--s7b-versal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 6px 16px rgba(120, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Die Logos behalten ihre Originalfarben. Als Hintergrundbild statt
 * , aus demselben Grund wie im Linktree: das Website-Theme
 * tauscht bei jedem  die Quelle gegen ein Lazyload-Attribut, und
 * sein Skript ist auf dieser Seite abgemeldet. Der Pfad ist relativ zu
 * dieser Datei, es braucht also keine Adresse aus PHP.
 */
.s7b-kauf-logo {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.s7b-kauf-logo--patreon { background-image: url(../images/PATREON.webp); }
.s7b-kauf-logo--thangs  { background-image: url(../images/THANGS.webp); }
/*
 * DAS ECHTE INSTAGRAM-LOGO, von Leon geliefert (27.08.2026, dritter
 * Anlauf: "Das Logo ist immer noch nicht da -- nimm einfach das hier").
 *
 * Vorher stand hier ein selbst gezeichnetes SVG in den Markenfarben.
 * Es war gueltiges XML und lud nachweislich, aber Leon sah es in
 * seinem Browser nie -- und nach zwei vergeblichen Anlaeufen ist die
 * Frage, WARUM, weniger wert als ein Logo, das da ist.
 *
 * Jetzt eine PNG-Datei wie PATREON und THANGS, in derselben Groesse
 * (156 Pixel) aus derselben Quelle wie sie: dem Server des Studios.
 * Drei Logos nebeneinander, drei gleiche Dateiarten -- was fuer die
 * beiden anderen seit Monaten zuverlaessig funktioniert, funktioniert
 * auch fuer das dritte.
 */
.s7b-kauf-logo--instagram { background-image: url(../images/INSTAGRAM.png); }

@media (hover: hover) {
  .s7b-kauf-knopf:hover {
    transform: translateY(-2px);
    box-shadow:
      0 10px 24px rgba(120, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  .s7b-kauf-knopf:hover .s7b-kauf-logo {
    transform: scale(1.08);
  }

  /* Beim Hover nimmt der Knopf die Hausfarbe seiner Plattform an --
     Patreon rostrot, Thangs blau. Wie im Linktree. */
  .s7b-kauf-knopf--patreon:hover {
    border-color: #a3331f;
    box-shadow: 0 10px 24px rgba(163, 51, 31, 0.3);
    color: #a3331f;
  }

  .s7b-kauf-knopf--thangs:hover {
    border-color: #0d4577;
    box-shadow: 0 10px 24px rgba(13, 69, 119, 0.3);
    color: #0d4577;
  }
}

.s7b-kauf-knopf:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.s7b-kauf-knopf:focus-visible {
  outline: 2px solid var(--s7b-akzent-tief);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .s7b-kauf-knopf,
  .s7b-kauf-logo {
    transition: none;
  }

  .s7b-kauf-knopf:hover,
  .s7b-kauf-knopf:active {
    transform: none;
  }
}

/* Abschluss und Kollektionsknoepfe brauchen keine Sonderform -- sie
   erben die Leiste. Die Klassen stehen trotzdem, damit die Ansichten
   einen benannten Haken haben und niemand sie fuer vergessen haelt. */
.s7b-knoepfe--abschluss,
.s7b-knoepfe--koll {
  margin-top: 4px;
}

/* Die Teilen-Ziele: eine Reihe runder Icon-Knoepfe mit Luecke
   (Mockup: .share-row) statt des frueheren 2x2-Rasters. */
.s7b-knoepfe--teilen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Das Wichtigste in Kuerze --- */

.s7b-kurz-titel,
.s7b-toc-titel,
.s7b-empfohlen-titel,
.s7b-teilen-titel,
.s7b-zitat-titel,
.s7b-kollkarte-titel,
.s7b-autor-kicker,
.s7b-druck-titel,
.s7b-koll-hinweis {
  margin: 0;
  font-family: var(--s7b-versal);
  font-size: 11px;
  /*
   * AUSDRUECKLICH, nicht geerbt. Das Website-Theme gibt seinen
   * Ueberschriften eine Zeilenhoehe von 53px -- bei 11px Schrift ist
   * die Zeile damit fuenfmal so hoch wie der Text. Der rote Traeger
   * haengt an der UNTERKANTE dieser Zeile und sass dadurch weit unter
   * der Schrift (Leons Fund am Druck-Kasten, 27.08.2026).
   *
   * Dieselbe Falle gab es schon bei den Seitenleisten-Ueberschriften.
   * Sie steht jetzt an der gemeinsamen Regel, damit die naechste neue
   * Ueberschrift nicht wieder hineinlaeuft.
   */
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s7b-tinte-leise);
}

/*
 * Der Kuerze-Kasten ist die Stelle, die zitiert werden soll (GEO) --
 * er bekommt etwas mehr Innenraum als die uebrigen Mulden.
 * KEIN display hier: die Mulde ist ein