/* concrete.composition · gemeinsames System fuer index.html und raeume.html */ /* Tokens */ :root{ /* Farbe */ --paper:#07070A; --paper-2:#0B0B11; --ink:#EDEBE6; --ink-2:rgba(237,235,230,.78); --ink-3:rgba(237,235,230,.58); --akzent:#A46BEF; --linie:rgba(237,235,230,.14); /* Raster */ --rand:clamp(20px,4vw,64px); --spur:min(1240px, calc(100% - 2 * var(--rand))); --rinne:clamp(16px,1.6vw,24px); /* Abstand */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px; --s48:192px; /* Schrift */ /* Schrift · Meta-Ebene */ --t-xs:13px; --t-s:15px; --t-m:17px; --t-l:19px; --d1:clamp(22px,1.9vw,30px); --d2:clamp(30px,2.9vw,44px); --d3:clamp(40px,4.4vw,66px); } /* Kopfzeile */ /* Die ganze Zeile lag als style-Attribut im Markup. Attribute schlagen jede Medienregel, also liess sich mobil nichts davon anfassen · genau das hat den Ueberlauf unten so zaeh gemacht. Jetzt steht alles hier. */ .kopf{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:var(--s6); padding:var(--s4) var(--rand); backdrop-filter:blur(6px); background:linear-gradient(180deg, rgba(7,7,10,.92) 0%, rgba(7,7,10,.72) 60%, rgba(7,7,10,0) 100%); } .kopf__wege{ display:flex; align-items:center; gap:var(--s2); } /* Die Wortmarke stand als style-Attribut im Markup. Das war der Grund, warum sie sich mobil nicht verkleinern liess · ein Attribut schlaegt jede Medienregel, und nur !important kommt dagegen an. Statt dieses Wettruesten zu gewinnen, ist die Groesse jetzt hier, wo sie hingehoert. */ .kopf__marke{ font-weight:900; letter-spacing:-.02em; font-size:var(--t-l); color:var(--ink); display:inline-flex; align-items:center; min-height:44px; text-decoration:none; } .kopf__weg{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s4); font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; transition:color .3s cubic-bezier(.16,.84,.28,1); } .kopf__weg:hover, .kopf__weg:focus-visible{ color:var(--ink); } .kopf__weg:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; } .kopf__weg--voll{ background:var(--akzent); color:var(--paper); } .kopf__weg--voll:hover, .kopf__weg--voll:focus-visible{ color:var(--paper); } /* WARUM KATALOG BLEIBT (27.08.2026, Kundenwunsch woertlich): "Kannst Du bei der Mobilen Version oben noch den Katalog hinzufuegen? So dass man es direkt sieht?" · Vorher fielen unter 760 px ALLE Text-Wege weg, nur der Anfrage-Knopf blieb. Der Katalog ist aber der Kern der Seite, nicht ein Weg unter vieren. Angebot und Fotowalk treten zurueck, er bleibt. */ @media (max-width:760px){ .kopf__weg:not(.kopf__weg--voll):not(.kopf__weg--kern){ display:none; } .kopf__weg--kern{ padding:0 var(--s3); } /* Mit dem Katalog stehen jetzt DREI Dinge in der Zeile statt zwei · auf 375 px lief der Anfrage-Knopf ueber den rechten Rand hinaus (gemessen, nicht geschaetzt). Die Wortmarke tritt zurueck, sie ist der Teil, der auch klein noch gelesen wird · die beiden Wege sind Ziele. !important ist hier noetig und kein Faulheits-Zeichen: die Groesse steht als style-Attribut im Markup, und ein Attribut schlaegt jede Medienregel. */ /* NACHGERECHNET auf 375 px, nicht geschaetzt. Innen bleiben 335 px (375 minus zweimal --rand 20). Gebraucht haben die drei Teile bei den Desktop-Werten 362 px plus 24 px Zeilen-Abstand · deshalb hing der Anfrage-Knopf ueber dem Rand. Gespart wird an drei Stellen gleichmaessig, statt eine Sache klein zu quetschen: Wortmarke 19 auf 13 px -25 Katalog ohne Polster -24 (44 px Tasthoehe bleibt, Text ist breiter als 44 px, also tastbar) Anfrage-Polster 16 auf 12 -8 Zeilen-Abstand 24 auf 8 -16 Bleibt rund 313 px belegt, 22 px Luft. */ .kopf{ gap:var(--s2); flex-wrap:nowrap; } /* Feste Groessen waren hier der Fehler. Ich habe dreimal nachgerechnet und dreimal danebengelegen, weil Schriftbreite von der geladenen Schrift abhaengt und nicht von der Punktgroesse allein. Diese Fassung kann gar nicht ueberlaufen: die Wege behalten ihre Breite, die Wortmarke gibt nach und schneidet im aeussersten Fall mit Auslassungspunkten ab. Sie ist der einzige Teil, der auch halb gelesen noch verstanden wird · ein abgeschnittener Knopf dagegen ist unbenutzbar. */ .kopf__wege{ flex:0 0 auto; } /* Die Wortmarke wird zweizeilig statt kleiner. Einzeilig passte sie auf 375 px nur noch abgeschnitten, und "concrete.com..." liest sich wie eine Webadresse · schlimmer als jede Loesung, die wir vermeiden wollten. Gestapelt bleibt der ganze Name da, lesbar, und braucht die halbe Breite. Der Akzentpunkt bleibt am Ende der ersten Zeile, wo er auch gross steht. */ .kopf__marke{ flex:0 1 auto; min-width:0; line-height:1.05; display:flex; flex-direction:column; justify-content:center; } .kopf__m{ display:block; white-space:nowrap; } .kopf__weg--kern{ padding:0; } .kopf__weg--voll{ padding:0 var(--s3); } } /* Wortmarke */ .wortmarke { position:relative; display:block; width:max-content; margin:0; line-height:.80; text-transform:uppercase; } .wm__masse { display:block; font-size:var(--wm); letter-spacing:-.015em; font-variation-settings:'wght' 900,'wdth' 62; font-stretch:62%; font-weight:900; color:var(--ink); } .wm__raum { display:block; font-size:calc(var(--wm) * .4345); letter-spacing:-.005em; margin-top:.06em; font-variation-settings:'wght' 200,'wdth' 125; font-stretch:125%; font-weight:200; color:rgba(237,235,230,.82); } .wm__punkt { position:absolute; left:100%; top:0; font-size:var(--wm); font-variation-settings:'wght' 900,'wdth' 62; font-stretch:62%; font-weight:900; color:var(--akzent); } #heroType { --wm:clamp(56px, 12vw, 200px); } .ist-hoch #heroType { --wm:clamp(44px, 17vw, 104px); right:var(--rand); } /* Die Kopfzeile bei sehr schmalen Geraeten. Bei 320 px lief die Zeile ueber: Wortmarke plus vier Wege plus Knopf brauchten 369 px. Gemessen am 21.08. Unter 400 px treten die drei Text-Wege zurueck · die Wortmarke fuehrt nach oben, der Anfrage-Knopf bleibt. Beide Sprungziele sind ueber den Inhalt weiter erreichbar. */ @media (max-width: 400px){ .kopf__weg:not(.kopf__weg--voll):not(.kopf__weg--kern){ display:none; } } /* ══ ABSCHNITTS-RHYTHMUS ═══════════════════════════════════════════════════ Fotowalk und Anfrage lagen mit je 108 px Polster aneinander · 216 px tote Zone zwischen zwei Abschnitten mit DEMSELBEN Grund. Und der Wert war auf beiden Breiten gleich, weil er an 12vh hing, also an der Fensterhoehe. Er reagierte damit gar nicht auf das Geraet. Gemessen am 21.08. Jetzt ein breitenabhaengiger Wert, und der Fotowalk gibt sein unteres Polster ab · die Trennung traegt das obere des naechsten Abschnitts. */ :root{ --sektion:clamp(64px, 9vw, 128px); } #fotowalk{ padding:var(--sektion) 0 0; } #anfrage{ padding-top:var(--sektion) !important; } /* ══ DAS PAAR ══════════════════════════════════════════════════════════════ Zwei Bilder nebeneinander, gleiche Breite, gleiche Oberkante. Es ist dieselbe Sprache wie die Paar-Tafeln im Katalog · und hier sagt der Aufbau etwas Wahres, bevor der Text es sagt: zwei Fotografen, gleichrangig. Beide Rahmen bekommen ihr echtes Seitenverhaeltnis ueber --ar. Sie sind fast gleich (1,922 und 1,850), die Unterkanten stehen also nahezu bündig, ohne dass ein Bild beschnitten werden muss. */ .paar{ grid-column:1 / -1; display:grid; gap:var(--rinne); grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; } .paar__teil{ margin:0; min-width:0; } .paar__rahmen{ display:block; position:relative; aspect-ratio:var(--ar); overflow:hidden; background:var(--paper-2); border:1px solid var(--linie); } .paar__rahmen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,.84,.28,1); } a.paar__rahmen:hover img, a.paar__rahmen:focus-visible img{ transform:scale(1.02); } a.paar__rahmen:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; } .paar__beleg{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4); padding-top:var(--s3); border-top:1px solid var(--linie); font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .paar__nr{ color:var(--paper); background:var(--akzent); padding:2px 7px; font-variant-numeric:tabular-nums; } @media (max-width: 760px){ .paar{ grid-template-columns:1fr; gap:var(--s12); } } @media (prefers-reduced-motion: reduce){ .paar__rahmen img{ transition:none; } a.paar__rahmen:hover img{ transform:none; } } /* Kontaktbogen */ .kacheln{ display:grid; gap:var(--s3); margin-top:var(--s12); grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); } .kachel{ position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--ink); text-decoration:none; filter:grayscale(.55) contrast(1.05); } /* KEINE DAUER-DAEMPFUNG. Bis zum 20.08. standen hier grayscale(1) UND opacity .72, und beide kamen nur ueber :hover zurueck · auf einem Telefon gibt es kein Hover, also blieben elf nachts aufgenommene Motive dauerhaft entsaettigt und um 28 Prozent abgedunkelt. Genau dort steht "such dir eine Tafel aus und merk dir die Nummer". Jetzt volle Deckkraft, und die Entsaettigung nur noch halb · Farbe beim Hinsehen bleibt eine Zugabe fuer den Zeiger, kein Vorbehalt fuer alle. */ .kachel img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,.84,.28,1), filter .3s ease; } /* Kontaktbogen · Nummer */ .kachel__nr{ position:absolute; left:0; bottom:0; z-index:1; padding:3px 7px; background:rgba(7,7,10,.85); font-family:var(--meta); font-size:11px; letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--ink); } /* Kontaktbogen · Zustand beim Hinsehen */ .kachel:hover, .kachel:focus-visible{ filter:none; outline:2px solid var(--akzent); outline-offset:2px; } .kachel:hover img, .kachel:focus-visible img{ transform:scale(1.06); } @media (prefers-reduced-motion: reduce){ .kachel img{ transition:none; } .kachel:hover img, .kachel:focus-visible img{ transform:none; } } /* Ankersprung · KEIN scroll-behavior:smooth auf html. Gemessen am 20.08.: damit kamen von 70 Radumdrehungen a 300 px nur 436 px an, 2,1 Prozent der Eingabe · jedes Rad-Ereignis startete eine neue weiche Fahrt und brach die vorige ab. Die Seite fuehlte sich an, als klebe sie. Der weiche Sprung haengt jetzt am Klick auf einen Anker, nicht am Rad. */ /* Ankersprung · Abstand unter der festen Kopfzeile */ .tafel[id], section[id]{ scroll-margin-top:92px; } /* Katalog · Kopf */ .katalog__titel{ margin:var(--s6) 0 0; font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.9; color:var(--ink); font-size:clamp(40px, 8vw, 128px); overflow-wrap:anywhere; min-width:0; } .katalog__titel .zeile{ display:block; overflow:hidden; padding-bottom:.06em; } /* Katalog */ .katalog{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--rinne); row-gap:var(--s32); width:var(--spur); margin-inline:auto; } .tafel{ margin:0; grid-column:1 / -1; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--rinne); row-gap:var(--s4); } .tafel--t2{ grid-column:span 6; grid-template-columns:repeat(6, minmax(0,1fr)); } /* Tafel · Trio */ .tafel--t3{ grid-column:span 4; grid-template-columns:repeat(4, minmax(0,1fr)); } .tafel--t3 .beleg{ grid-template-columns:repeat(4, minmax(0,1fr)); } .tafel--t3 .beleg__ort, .tafel--t3 .beleg__satz, .tafel--t3 .beleg__exif{ grid-column:1 / -1; text-align:left; } .tafel--t3 .beleg__nr{ grid-column:1 / -1; justify-self:start; margin-bottom:var(--s2); } .tafel--t3 .beleg__exif{ margin-top:var(--s2); } .rahmen{ grid-column:1 / -1; position:relative; overflow:hidden; background:var(--paper-2); aspect-ratio:var(--ar); /* Tafel · Hoehe */ } .rahmen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Tafel · randlos */ .tafel--t0 .rahmen{ width:var(--vw); max-width:none; margin-left:calc(50% - var(--vw) / 2); } /* Beleg */ .beleg{ grid-column:1 / -1; display:grid; column-gap:var(--rinne); grid-template-columns:subgrid; padding-top:var(--s3); border-top:1px solid var(--linie); } @supports not (grid-template-columns:subgrid){ .beleg{ grid-template-columns:repeat(12, minmax(0,1fr)); } } .tafel--t2 .beleg{ grid-template-columns:repeat(6, minmax(0,1fr)); } .beleg__nr { grid-column:1 / span 1; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.08em; color:var(--paper); background:var(--akzent); padding:var(--s1) var(--s2); justify-self:start; align-self:start; /* Beleg · Nummernfeld */ } .beleg__ort { grid-column:2 / span 5; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); } .beleg__satz{ grid-column:2 / span 5; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:var(--s2); } .beleg__exif{ grid-column:9 / -1; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.1em; color:var(--ink-3); text-align:right; } .tafel--t2 .beleg__ort, .tafel--t2 .beleg__satz{ grid-column:2 / -1; } .tafel--t2 .beleg__exif{ grid-column:2 / -1; text-align:left; margin-top:var(--s2); } /* Erzaehltext */ /* Erzaehltext · Lage */ /* Gruppentitel · klein, violett, ueber der Gruppe. Er benennt die Gruppe wie ein Kapitelname im gedruckten Katalog, der Text darunter erklaert ihn. Derselbe Grad und dieselbe Sperrung wie die uebrigen Vorzeilen der Seite, damit es eine Familie bleibt und keine neue Sorte Ueberschrift. */ .tafel__titel{ grid-column:1 / -1; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--akzent); text-align:center; margin:0 0 var(--s8); } /* Der Erzaehltext steht seit dem 20.08. UNTER seiner Gruppe · der Strich sitzt deshalb oben und verbindet ihn nach oben mit den Bildern. */ .tafel__text{ grid-column:1 / -1; align-self:start; font-size:var(--t-l); line-height:1.6; color:var(--ink-2); margin:0 auto var(--s12); max-width:52ch; text-align:center; padding-top:var(--s8); position:relative; } .tafel__text::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:34px; height:2px; background:var(--akzent); } /* Kapitelkopf */ .kapitel{ grid-column:1 / -1; padding-top:var(--s8); margin-top:var(--s16); border-top:1px solid var(--ink-3); } .kapitel__num { font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--akzent); } .kapitel__name { margin:var(--s4) 0 0; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:var(--d3); color:var(--ink); overflow-wrap:anywhere; min-width:0; } .kapitel__unter{ margin:var(--s4) 0 0; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } /* ══ EINBLENDUNGEN, VOM SCROLL GETRIEBEN ════════════════════════════════════ Bis zum 20.08. waren die Einblendungen ein Schalter: der IntersectionObserver feuerte einmal, danach lief eine Zeit-Animation ueber 0,75 s. Das Element POPPTE, unabhaengig davon, wie schnell jemand scrollt. Mit animation-timeline: view() haengt der Fortschritt am Scroll selbst · das Element kommt MIT der Bewegung und bleibt stehen, wenn man stehen bleibt. Das ist der Unterschied zwischen "Effekt" und "Material". UND es ist billiger: Safari 26.4 laesst diese Animationen auf dem Compositor laufen (WebKit-Release-Notes), also genau dann weiter, wenn der Hauptfaden mit dem Auftakt-Canvas beschaeftigt ist. Erlaubt sind dort opacity, transform, translate, scale, rotate und filter · clip-path NICHT, deshalb wird hier keins verwendet. Firefox kann scroll-driven animations 2026 immer noch nicht. Deshalb steht alles hinter @supports, und das JavaScript erkennt dasselbe Merkmal: kann der Browser es, ruehrt der IntersectionObserver die Elemente gar nicht erst an. Kann er es nicht, laeuft der alte Weg unveraendert weiter. animation-timeline MUSS nach der animation-Kurzschreibweise stehen, sonst ueberschreibt die Kurzschreibweise es wieder. */ @keyframes reveal-auf { from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } } @keyframes reveal-rechts{ from{ opacity:0; transform:translateX(36px) } to{ opacity:1; transform:none } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-reveal]{ animation:reveal-auf linear both; animation-timeline:view(); /* FERTIG, BEVOR DAS ELEMENT ZUR RUHE KOMMEN KANN. Der erste Versuch lief bis "cover 33%". Das war ein Denkfehler mit Folgen: wenn der Fortschritt am Scroll haengt, ist eine halb eingeblendete Zeile kein Uebergang, sondern ein DAUERZUSTAND. Wer mit dem Daumen scrollt und loslaesst, laesst Text im unteren Drittel stehen · gemessen am 20.08. auf 390 px blieben Zeilen bei Deckkraft 0,14, 0,20 und 0,28 stehen, das sind 1,24:1 bis 1,9:1 gegen die geforderten 4,5:1. Die Umstellung auf scroll-getriebene Einblendung hatte die Seite an dieser Stelle also SCHLECHTER gemacht als der alte Schalter, der immer bis 1 durchlief. Jetzt endet der Bereich innerhalb der Eintritts-Phase: sobald das Element ganz im Bild steht, ist es voll da. Die Bindung an den Scroll bleibt, der Endzustand ist wieder eindeutig. Der Bereich endet bei 40 Prozent des Eintritts, nicht bei 90: wer mitten im Eintritt stehen bleibt, HAELT die Einblendung an, das laesst sich nicht wegdefinieren. Also muss sie fertig sein, sobald das Element ueberhaupt richtig im Bild steht. Gedaempft ist dann nur noch, was gerade eben am unteren Rand hereinlugt · genau das Verhalten des alten Schalters mit Schwelle 0,15. 20 statt 40, weil "entry" an der ELEMENTHOEHE misst: ein hoher Block braucht entsprechend viel Scrollweg bis 40 Prozent, und genau so einer blieb bei 0,46 stehen (Personal Branding, gemessen ueber 70 Scrollstaende). Bei 20 Prozent ist auch der hoechste Block voll da, sobald er ein Fuenftel hereingekommen ist. */ animation-range:entry 0% entry 20%; } [data-reveal="right"]{ animation-name:reveal-rechts; } /* Der Kontaktbogen staffelt sich von allein, weil jede Kachel ihren eigenen Eintritt hat · der data-delay-Versatz wird dort nicht gebraucht und wuerde die Bindung an den Scroll nur verwaschen. */ } } /* Der Filmzaehler auf dem Telefon. Er hing an derselben Unterkante wie die Wortmarke. Auf dem Rechner geht das auf, dort liegen 760 px zwischen beiden · auf dem Telefon ueberlappte seine zweite Zeile ("Einzelbild · KI-erzeugt") die Schlagwortzeile unter der Wortmarke. Gemessen am 20.08. auf 320, 375, 390 und 430 px: Ueberschneidung von 189 px, ab 760 px sauber. Oben rechts statt unten rechts: unter der 76 px hohen Kopfzeile, ueber dem Fortschrittsstrich (der sitzt bei 50 Prozent Hoehe). !important, weil die Lage des Elements inline steht. */ @media (max-width: 759px){ #heroZaehler{ bottom:auto !important; top:92px !important; /* Eigener Grund. Oben rechts liegt auf dem Telefon das HELLE Gefieder, nicht der dunkle Teil des Motivs · gemessen am 20.08. stand der Zaehler dort bei 1,63:1 und die Zeile darunter bei 1,83:1, gefordert sind 4,5:1. Volle Flaeche, kein Verlauf und kein backdrop-filter: ein Verlauf laesst Glyphen am Rand ungedeckt, und Milchglas kostet auf dem Telefon pro Scroll-Bild einen neuen Weichzeichner. */ /* .92, nicht .86: nachgerechnet fuer den schlechtesten denkbaren Fall, einen reinweissen Bildbereich darunter. Bei .86 ergibt der Akzent dort 4,06:1 und faellt durch, bei .92 sind es 4,86:1. Gemessen wird der Median, gerechnet wird der Grenzfall · beide muessen halten. */ background:rgba(7,7,10,.92); padding:8px 12px 10px; right:var(--rand, 20px) !important; } } /* ══ DAS TELEFON ═══════════════════════════════════════════════════════════ Rueckmeldung am 22.08.: das Telefon halte die Qualitaet des Rechners nicht, dort seien mehr Baustellen. Nachgemessen stimmte das an drei Stellen: 1. VON 173 TEXTELEMENTEN STANDEN 110 AUF 13 PX · 64 Prozent. Und die Anzeige-Ebene fiel von sechs Graden am Rechner (41 bis 173) auf drei (40, 32, 30) zusammen, die praktisch gleich gross sind. Es gab also auf dem Telefon fast keine Hierarchie mehr. 2. FLIESSTEXT WAR ZENTRIERT ueber bis zu sechs Zeilen. Das Auge sucht bei jeder Zeile einen neuen Einstiegspunkt. Zentriert bleiben Vorzeile und Ueberschrift, der Fliesstext wird linksbuendig. 3. TOTE ZONEN von rund 280 px zwischen Text und Bild, weil der Zeilenabstand des Katalogs fuer den Rechner gerechnet war. Am Rechner bleibt alles, wie es ist · dort hat er die Qualitaet gelobt. */ @media (max-width:760px){ /* Fliesstext linksbuendig, Vorzeile und Ueberschrift bleiben zentriert. */ .index p, .katalog p{ text-align:left; } .index p[style*="text-align:center"]{ text-align:left !important; } /* Eine echte Stufe zwischen Ueberschrift und Rest zurueckholen. --d2 und --d3 liefen beide in denselben unteren Anschlag. */ .katalog__titel{ font-size:clamp(46px, 13vw, 68px); } /* Der Beleg war lauter als das Bild: versal, gesperrt, ueber drei Zeilen. Kleiner, enger gesperrt, und die technische Zeile tritt zurueck. */ .beleg__exif{ font-size:11px; letter-spacing:.06em; opacity:.8; } .beleg__satz{ letter-spacing:.06em; } /* Die Kopfzeile war breiter als ihr Platz. Gemessen am 21.08.2026 auf 375 px: Logo 219 + Luecke 24 + Knopf 107 = 349 px Inhalt in 335 px Raum. Die 14 px Ueberlauf schoben den Knopf nach rechts hinaus · das Logo stand mit 20 px vom Rand, der Knopf mit 6. Es sah aus wie ein schiefer Kopf, war aber ein Ueberlauf. Beides eine Stufe kleiner, dann passt es mit Luft: 196 + 12 + 107 = 315. Die Groesse steht am Element, also kommt nur !important dagegen an. */ nav > a:first-child{ font-size:17px !important; } nav{ gap:var(--s3) !important; } .katalog{ grid-template-columns:minmax(0,1fr); row-gap:var(--s24); } .tafel, .tafel--t2, .tafel--t3{ grid-column:1 / -1; grid-template-columns:minmax(0,1fr); } /* Randlos auf dem Telefon · Kevens Wahl vom 22.08. („d und 1"). Auf 375 px sind die Ränder 2 x 20 px, also elf Prozent der Fläche. Am Rechner ist das Weißraum, auf dem Telefon ist es das Bild, das fehlt. Bis heute galt hier das Gegenteil: die Zeile setzte die randlose Art `--t0` extra ZURÜCK auf die Spur, damit alle Tafeln gleich aussehen. Jetzt bekommen alle das randlose Verhalten statt keiner. `--vw` statt `100vw`: die Seite setzt es aus `clientWidth`, also ohne Rollbalken. `100vw` zählt ihn mit und erzeugt einen Querlauf, den man erst am fremden Gerät sieht. Die Bildunterschrift behält ihre Ränder · sie ist Text, kein Bild. */ .tafel .rahmen{ width:var(--vw); max-width:none; margin-left:calc(50% - var(--vw) / 2); } .tafel img{ border-radius:0; } .beleg, .tafel--t2 .beleg, .tafel--t3 .beleg{ margin-top:var(--s4); } /* Die Nummer war eine gefüllte Fläche in der Akzentfarbe · neben einem randlosen Bild ist sie das Lauteste auf dem Schirm. Der Akzent ist Signal, nicht Fläche (Marken-System). Als Schrift bleibt er lesbar und tritt zurück. */ .beleg__nr{ background:none; color:var(--akzent); padding:0; letter-spacing:.2em; } /* Die Nummer stand neben dem Text, nicht darueber. Gemessen am 21.08.2026 auf 375 px: das Bild 335 px breit, der Text begann erst bei 103 px und hatte 252 px · ein Viertel der Zeilenbreite ging an eine Spalte fuer die Nummer. Ergebnis waren 20 bis 26 Zeichen je Zeile, wo 35 bis 60 gehoeren, und deshalb brach jeder Satz mitten im Gedanken um. Genau das hat der Kunde als Baustelle gemeldet. Auf dem Telefon ist Platz die knappste Groesse, nicht die Ordnung: eine Spalte, Nummer darueber. Ab 761 px bleibt das zweispaltige Raster. */ .beleg, .tafel--t2 .beleg, .tafel--t3 .beleg{ grid-template-columns:minmax(0,1fr); border-top:1px solid var(--linie); padding-top:var(--s3); row-gap:var(--s2); } .beleg > *{ grid-column:1; text-align:left; } .beleg__nr{ justify-self:start; margin-bottom:var(--s1); } .beleg__exif{ margin-top:0; border-top:none; padding-top:0; } /* ── DER MASSSTAB FÜRS TELEFON ────────────────────────────────────────── Gemessen am 22.08.: 79 Prozent aller Textstellen lagen bei 13 px oder darunter, und die Verkaufssätze standen in Versalien-Schreibmaschine mit 21 bis 26 Zeichen je Zeile. Angemessen sind 35 bis 55. Die Trennlinie ist NICHT "alles größer", sondern: APPARAT bleibt Schreibmaschine und versal · Nummer, Ort, technische Zeile. Das ist die Katalog-Ordnung, und der Kunde hat sie ausdrücklich gewollt ("die Idee dahinter ist toll"). PROSA wird lesbar · alles, was jemand überzeugen soll. Ein Etikett darf versal und schmal sein. Ein Satz nicht. */ /* Die Verkaufszeilen im Angebots-Verzeichnis. Der Block ist genau für die gebaut, die nicht weiterscrollen · und er war die kleinste Prosa der ganzen Seite. */ .index__dazu{ font-family:Archivo, system-ui, sans-serif; font-size:16px; line-height:1.5; letter-spacing:normal; text-transform:none; color:var(--ink-2); } /* Der Satz zu einer Aufnahme ist Inhalt, kein Etikett. */ .beleg__satz{ font-family:Archivo, system-ui, sans-serif; font-size:15px; line-height:1.5; letter-spacing:normal; text-transform:none; color:var(--ink-2); margin-top:var(--s1); } /* Technische Angaben bleiben leise, aber nicht winzig · zwölf ist die Untergrenze, unter der eine Angabe nicht mehr gelesen, sondern geraten wird. */ .beleg__exif{ font-size:12px; } .kachel__nr{ font-size:12px; } /* Apparat unangetastet: .beleg__nr, .beleg__ort, .serie__fuss, die Vorzeilen und das Laufband bleiben Schreibmaschine und versal. */ } /* ══ DIE SERIE ═════════════════════════════════════════════════════════════ Ein dichtes Raster statt Tafeln. Zwoelf weitere Tafeln haetten die Seite auf dem Telefon um rund zwoelf Bildschirmhoehen verlaengert und den Katalog verwaessert · und bei einer Serie zaehlt die Menge und der wiederkehrende Blick, nicht das einzelne Blatt. Quadrate, weil die Lieferung Hoch- und Querformate mischt: in einem Raster mit gemischten Hoehen entstehen Luecken, die wie ein Fehler aussehen. */ .serie{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s2); } .serie__stueck{ margin:0; aspect-ratio:1; overflow:hidden; background:var(--paper-2); } .serie__stueck img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,.61,.36,1); } .serie__stueck:hover img{ transform:scale(1.04); } .serie__fuss{ margin:var(--s6) 0 0; font-family:var(--meta); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } @media (prefers-reduced-motion:reduce){ .serie__stueck img{ transition:none; } .serie__stueck:hover img{ transform:none; } } @media (max-width:760px){ /* Drei statt vier. Bei vier Spalten misst ein Quadrat auf 375 px rund 82 px · darauf ist von einem Bahnsteig nichts mehr zu erkennen. Bei drei sind es 111 px, und die Serie bleibt als Menge lesbar. */ .serie{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px; } } /* Vorschau-Band · siehe Kommentar im Markup */ .vorschau{ position:fixed; left:var(--rand); bottom:14px; z-index:60; font-family:var(--meta); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:rgba(13,6,32,.82); border:1px solid var(--akzent); padding:7px 11px; border-radius:2px; backdrop-filter:blur(6px); pointer-events:none; } @media (max-width:760px){ .vorschau{ left:12px; bottom:10px; padding:6px 9px; } } @media print{ .vorschau{ display:none; } }