/* ------------------------------------------------------------------ FARBEN Uebernommen aus holdline/theme/colors.js, der einzigen Quelle der App. Beide Paletten sind dort auf Kontrast durchgerechnet (WCAG 4.5:1), die Werte werden hier NICHT neu erfunden. Drei Zustaende, nicht zwei: wer nichts einstellt, bekommt gar keine Markierung am , dann entscheidet allein prefers-color-scheme. ------------------------------------------------------------------ */ :root { /* WARUM DIESE ZEILE WICHTIGER IST, ALS SIE AUSSIEHT: sie sagt dem Browser, in welcher Helligkeit er die Dinge malt, die NICHT uns gehoeren. Die Bildlaufleiste der Galerie, die Auswahlmarkierung, die Innereien der Eingabefelder. Ohne sie nimmt der Browser "hell" an, auch wenn die Seite dunkel ist. Genau das war am 17.08. im Test zu sehen: unter der Galerie stand eine weisse Windows-Bildlaufleiste quer ueber der dunklen Seite. */ color-scheme: light; --ground: #f4f5f9; --surface: #ffffff; --text: #15152b; --muted: #5f6076; --accent: #007085; --line: #dfe2ec; --ring-track: #dfe2ec; --shadow: 0 1px 2px rgb(21 21 43 / 6%), 0 12px 32px rgb(21 21 43 / 8%); /* * DIE BREITE DER LESESPALTE, an EINER Stelle. * * Sie stand vorher dreimal im Blatt: am .wrap, im Raster der Abschnitte * und im Innenmass der Galerie. Drei Zahlen, die zusammenpassen muessen, * sind zwei Zahlen zu viel: wer eine aendert und die anderen vergisst, * bekommt eine Galerie, deren erste Karte schief zur Ueberschrift steht. * * 88rem sind 1408 Pixel. Absaetze bleiben unabhaengig davon bei 34em * (siehe `p`-Regel), es wird also nur die STRUKTUR breiter, nie der * Lesetext. */ --spalte: 88rem; --pad: clamp(1.25rem, 5vw, 3rem); /* Der Bandton liegt bewusst UNTER dem Grund, nicht darueber. So bleiben die Karten darin (die auf --surface stehen) weiterhin erhaben. Ein hellerer Ton haette sie verschluckt. */ --band: #eaedf5; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --ground: #1a1a2e; --surface: #232345; --text: #e0e0e0; --muted: #9494ad; --accent: #00b4d8; --line: #2e2e52; --ring-track: #2e2e52; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 35%); --band: #14142a; } } :root[data-theme='dark'] { color-scheme: dark; --ground: #1a1a2e; --surface: #232345; --text: #e0e0e0; --muted: #9494ad; --accent: #00b4d8; --line: #2e2e52; --ring-track: #2e2e52; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 35%); --band: #14142a; } /* ------------------------------------------------------------------ SCHRIFT System-Schrift, so wie topics/format-rules.md es fuer die App festlegt. Der Charakter kommt aus Groesse, Gewicht und Laufweite, nicht aus einer fremden Schriftart. Eine geladene Webschrift waere ausserdem eine Wette darauf, dass sie ankommt. ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ------------------------------------------------------------------ ANKERSPRUENGE UNTER DER GEPINNTEN KOPFLEISTE (17.08.) ------------------------------------------------------------------ Die Kopfleiste klebt seit dem 17.08. oben. Ein Ankersprung scrollt das Ziel aber an die OBERKANTE des Fensters, also unter die Leiste: die erste Zeile jedes angesprungenen Abschnitts war verdeckt. `scroll-padding-top` auf loest das fuer ALLE Anker auf einmal, auch fuer solche, die spaeter dazukommen. Die Alternative waere ein `scroll-margin-top` an jedem einzelnen Ziel, und genau das vergisst man beim naechsten neuen Abschnitt. Sanftes Scrollen gehoert hierher und nicht ins Javascript, weil der Browser es selbst kann. Wer im System "Bewegung reduzieren" gesetzt hat, bekommt den harten Sprung. ------------------------------------------------------------------ */ html { scroll-padding-top: 5.5rem; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { /* Von 68rem auf 88rem am 17.08. Auf einem breiten Bildschirm standen vorher rund 200 Pixel Leerraum an jeder Seite, und das las sich als unfertig statt als Rand. Der Wert steht jetzt als --spalte oben. WARUM NICHT GANZ RANDLOS: Fliesstext ueber die volle Breite eines 1920er Bildschirms ist unlesbar, das Auge verliert beim Ruecksprung die Zeile. Deshalb bleibt jeder Absatz bei 34em (`p`-Regel oben) und nur die STRUKTUR wird breiter: Karten, Galerie, Diagramme, Figuren. Die farbigen Baender weiter unten fuellen den Rest von Kante zu Kante, damit gar kein Leerraum mehr entsteht. */ max-width: var(--spalte); margin: 0 auto; padding: 0 var(--pad); } /* * DIE ABSCHNITTE LAUFEN VON KANTE ZU KANTE, DER TEXT NICHT. * * ERSTER VERSUCH UND WARUM ER SCHEITERTE (17.08.): ein Pseudoelement mit * `margin-inline: calc(50% - 50vw)` sollte den Hintergrund nach aussen * ziehen, und dagegen brauchte es `overflow-x: clip`, weil `50vw` die * Bildlaufleiste mitzaehlt. Genau dieses `clip` sass dann am Rahmen, der * ausbrechen sollte, und schnitt sein eigenes Band wieder ab. Sichtbar * blieb ein Kasten in Spaltenbreite. * * DIE LOESUNG BRAUCHT KEIN `vw` UND KEIN ABSCHNEIDEN. Jeder Abschnitt ist * volle Breite und traegt intern ein Raster aus drei Spalten: aussen zwei * flexible, in der Mitte die Lesespalte. Alle Kinder sitzen in der Mitte, * der Hintergrund gehoert dem ganzen Abschnitt. * * Der Nebeneffekt ist der eigentliche Gewinn: wer ausbrechen WILL, sagt * `grid-column: 1 / -1`. Genau das braucht die Galerie. */ .sections { max-width: none; padding: 0; } .sections > section, .sections > footer { display: grid; grid-template-columns: 1fr min(var(--spalte), 100% - 2 * var(--pad)) 1fr; } .sections > section > *, .sections > footer > * { grid-column: 2; } /* ------------------------------------------------------------------ DAS ZEICHEN IN DEN FREIEN RANDFLAECHEN (18.08., Balis Wunsch) ------------------------------------------------------------------ Die Abschnitte stehen in einem Raster aus drei Spalten: aussen zwei freie, in der Mitte die Lesespalte. Auf einem breiten Bildschirm sind die aeusseren zusammen mehrere hundert Pixel breit und komplett leer. Genau dort sitzt jetzt das Zeichen. WARUM ES NICHT EINFACH EIN HINTERGRUNDBILD AM ABSCHNITT IST: dann laege es AUCH unter dem Text, und ein Wasserzeichen unter Fliesstext macht ihn schlechter lesbar, egal wie leise es ist. Als eigenes Element in der Randspalte kann es nichts verdecken. ERST AB 74REM. Darunter gibt es keine freie Randflaeche, dort waere es kein Zeichen im Freiraum, sondern eines hinter dem Text. ------------------------------------------------------------------ */ .sections > section > .randzeichen { display: none; } @media (min-width: 74rem) { .sections > section > .randzeichen { display: block; grid-row: 1; align-self: center; justify-self: center; width: min(60%, 9rem); aspect-ratio: 32 / 22; pointer-events: none; /* Die Deckkraft sitzt im SVG, nicht hier: `opacity` auf dem Element wuerde eine eigene Ebene aufspannen und den Abschnitt darueber neu zeichnen lassen. */ background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Cg fill='%2315152b' fill-opacity='0.07'%3E%3Crect width='4.3' height='22'/%3E%3Crect x='12.2' width='4.3' height='22'/%3E%3Crect x='4.3' y='8.9' width='7.9' height='4.3'/%3E%3C/g%3E%3Crect x='20.1' y='17.8' width='11.8' height='4.2' rx='2.1' fill='%23007085' fill-opacity='0.22'/%3E%3C/svg%3E"); } /* Der Unterstrich ist der Akzent der Marke, deshalb bekommt er im Zeichen mehr Deckkraft als die Buchstaben. Sonst verschwindet genau das Teil, das HoldLINE von einem H unterscheidet. */ .sections > section > .randzeichen.links { grid-column: 1; } .sections > section > .randzeichen.rechts { grid-column: 3; transform: scaleX(-1); } } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .sections > section > .randzeichen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.07'%3E%3Crect width='4.3' height='22'/%3E%3Crect x='12.2' width='4.3' height='22'/%3E%3Crect x='4.3' y='8.9' width='7.9' height='4.3'/%3E%3C/g%3E%3Crect x='20.1' y='17.8' width='11.8' height='4.2' rx='2.1' fill='%2300b4d8' fill-opacity='0.28'/%3E%3C/svg%3E"); } } :root[data-theme='dark'] .sections > section > .randzeichen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.07'%3E%3Crect width='4.3' height='22'/%3E%3Crect x='12.2' width='4.3' height='22'/%3E%3Crect x='4.3' y='8.9' width='7.9' height='4.3'/%3E%3C/g%3E%3Crect x='20.1' y='17.8' width='11.8' height='4.2' rx='2.1' fill='%2300b4d8' fill-opacity='0.28'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------ DAS ZEICHEN IM HINTERGRUND (17.08., Vorbild trainlogapp.com) ------------------------------------------------------------------ Das HoldLINE-Zeichen liegt gross und sehr leise hinter den farbigen Baendern. DREI ENTSCHEIDUNGEN, die den Unterschied zwischen Marke und Unruhe machen: 1. NUR IN DEN BAENDERN, nicht auf jedem Abschnitt. Ein Wasserzeichen, das ueberall liegt, ist Tapete. So markiert es jeden zweiten Abschnitt und bekommt dadurch Bedeutung. 2. SEHR NIEDRIGER KONTRAST (3 Prozent hell, 4 Prozent dunkel). Es soll man es erst merken, wenn man hinsieht. Alles darueber kaempft mit dem Text. 3. ANGESCHNITTEN AM RAND, nicht zentriert. Ein zentriertes Logo hinter Text sieht nach Fehler aus, ein angeschnittenes nach Absicht. Es ist ein inline-SVG in der Hintergrund-Eigenschaft und kostet keine Anfrage. `pointer-events` braucht es nicht, weil es kein Element ist. ------------------------------------------------------------------ */ .band { background-color: var(--band); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22'%3E%3Cg fill='%2315152b' fill-opacity='0.045'%3E%3Crect width='4.3' height='22'/%3E%3Crect x='12.2' width='4.3' height='22'/%3E%3Crect x='4.3' y='8.9' width='7.9' height='4.3'/%3E%3Crect x='20.1' y='17.8' width='11.8' height='4.2' rx='2.1'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right -6vw top 50%; background-size: auto min(58%, 26rem); opacity: 1; } /* Die Deckkraft steckt nicht in `opacity` (das wuerde den Text mit verblassen), sondern in der Farbe des Zeichens selbst. Deshalb zwei Fassungen, eine je Palette. */ .band::before { content: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.05'%3E%3Crect width='4.3' height='22'/%3E%3Crect x='12.2' width='4.3' height='22'/%3E%3Crect x='4.3' y='8.9' width='7.9' height='4.3'/%3E%3Crect x='20.1' y='17.8' width='11.8' height='4.2' rx='2.1'/%3E%3C/g%3E%3C/svg%3E"); } } :root[data-theme='dark'] .band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.05'%3E%3Crect width='4.3' height='22'/%3E%3Crect x='12.2' width='4.3' height='22'/%3E%3Crect x='4.3' y='8.9' width='7.9' height='4.3'/%3E%3Crect x='20.1' y='17.8' width='11.8' height='4.2' rx='2.1'/%3E%3C/g%3E%3C/svg%3E"); } /* Die Trennlinie oben ist im Band ueberfluessig: der Farbwechsel ist die Trennung. Zwei Trennungen uebereinander sehen nach Versehen aus. */ .band, .band + section { border-top-color: transparent; } h1, h2, h3 { text-wrap: balance; margin: 0; } h1 { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; } h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0; max-width: 34em; } .eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------------ KOPF Bleibt beim Scrollen oben stehen, weil die Seite lang ist und der Weg zur Anmeldung sonst ein Zurückscrollen kostet. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ DER LAUFSTREIFEN ALS ABSCHNITTS-TRENNER (17.08.) ------------------------------------------------------------------ Er stand zuerst ganz oben ueber dem Kopf und sah dort nach Werbebanner aus, weil er neben dem Knopf in der Leiste dieselbe Sache zweimal sagte. Jetzt trennt er zwei Abschnitte in der Seitenmitte, und dort ist er kein Banner, sondern eine Einladung an der Stelle, an der der Besucher genug gesehen hat, um sich zu entscheiden. ES LAEUFT NUR EIN SATZ, wiederholt. Balis Vorgabe, und sie ist richtig: ein Fliessband mit wechselndem Inhalt liest man, ein Fliessband mit einem Satz wirkt. Hier ist eine CSS-Animation richtig, anders als bei der Galerie: es laeuft Text, kein base64-Bild, also darf der Inhalt doppelt im Markup stehen. KEINE LEEREN STELLEN: die Bahn traegt genug Wiederholungen, um auch einen breiten Bildschirm zweimal zu fuellen, und der Versatz betraegt genau die Haelfte. Beide Haelften sind gleich, also gibt es keinen sichtbaren Sprung und keine Luecke. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ DIE BAENDER, ueber die ganze Breite (18.08., Balis Entscheidung) ------------------------------------------------------------------ Am 17.08. waren sie kurz runde Pillen in der Lesespalte. Bali will sie ueber den ganzen Bildschirm, und das ist fuer ein Fliessband auch das Richtige: eine Pille schneidet die Bewegung an beiden Enden ab, ein durchlaufendes Band hat kein Ende, an dem es aufhoert. Der Glanz bleibt, die Rundung faellt weg. Was bleibt, ist der Schatten nach unten, damit das Band auf der Seite liegt und nicht in sie eingelassen wirkt. ------------------------------------------------------------------ */ .beltcta { grid-column: 1 / -1; margin: 0; max-width: none; width: 100%; background: var(--accent); overflow: hidden; text-decoration: none; display: block; position: relative; box-shadow: 0 6px 18px rgb(0 112 133 / 18%); } .beltcta-track { display: flex; width: max-content; animation: ticker-lauf 30s linear infinite; } /* DIE LUECKE IM UMSCHLAG, gemeldet am 17.08. Ein Fliessband aus zwei gleichen Haelften laeuft nur dann ohne Naht, wenn EINE Haelfte breiter ist als das Fenster. Sonst ist beim Sprung von -50 Prozent zurueck auf 0 der rechte Teil noch leer, und genau das war zu sehen. `min-width: 100vw` je Durchgang erzwingt das unabhaengig davon, wie breit der Bildschirm ist. */ .beltcta .run { min-width: 100vw; justify-content: space-around; } @keyframes ticker-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } .beltcta .run { display: flex; align-items: center; white-space: nowrap; padding: 0.8rem 0; } /* Das zweite Band traegt das Angebot und nicht die Aufforderung, deshalb steht es als Umriss statt gefuellt: zwei identisch laute Balken auf einer Seite heben sich gegenseitig auf. */ .beltcta.outline { background: transparent; border: 2px solid var(--accent); box-shadow: none; } .beltcta.outline .run span { color: var(--accent); } .beltcta.outline .run i { color: var(--accent); opacity: 0.4; } .beltcta .run span { /* Der Abstand steht hier und nicht als gap, damit die Wiederholung gleichmaessig ist: gap wuerde zwischen den beiden Haelften der Bahn fehlen und genau dort eine Luecke lassen. */ padding: 0 1.6rem; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ground); } .beltcta .run i { color: var(--ground); opacity: 0.45; font-style: normal; } /* Anhalten bei Beruehrung, dieselbe Regel wie bei der Galerie, damit die Seite sich einheitlich verhaelt. Wer klicken will, soll nicht auf ein bewegtes Ziel klicken muessen. */ .beltcta:hover .beltcta-track, .beltcta:focus-visible .beltcta-track { animation-play-state: paused; } .beltcta:focus-visible { outline: 3px solid var(--text); outline-offset: -3px; } /* ------------------------------------------------------------------ DIE GEPINNTE LEISTE ------------------------------------------------------------------ Sie ist ein direktes Kind von , und nur deshalb klebt sie ueber die ganze Seite. Der Kopf darin ist wieder statisch: zwei ineinander verschachtelte sticky-Elemente streiten sich um dieselbe Kante. ------------------------------------------------------------------ */ /* Jedes Anker-Ziel haelt Abstand zur gepinnten Leiste. Ohne diese Regel springt ein Menuepunkt genau so weit, dass seine eigene Ueberschrift unter der Leiste liegt, und der Besucher landet mitten im Text. */ section[id], form[id] { scroll-margin-top: 5.5rem; } .topbar { position: sticky; top: 0; z-index: 30; background: var(--ground); border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; } .topbar.stuck { border-bottom-color: var(--line); box-shadow: 0 4px 16px rgb(21 21 43 / 6%); } header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; } /* ------------------------------------------------------------------ DIE NAVIGATION (18.08. neu gebaut) ------------------------------------------------------------------ Bis zum 18.08. war sie unter 52rem auf `display: none` gesetzt, also auf jedem Telefon komplett unsichtbar. Bei einer langen Einzelseite war das noch verschmerzbar, bei drei echten Seiten kaeme man an zwei davon gar nicht mehr heran. AM HANDY KLAPPT SIE JETZT AUF, statt zu verschwinden. Kein Overlay ueber die ganze Seite: drei Punkte brauchen keinen Vollbildschirm, und ein Overlay muss man wieder schliessen. ------------------------------------------------------------------ */ header nav { display: flex; gap: 1.5rem; font-size: 0.875rem; } header nav a { color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap; } header nav a:hover { color: var(--text); } /* Die Seite, auf der man gerade ist. Nicht nur ueber die Farbe, sondern mit einer Linie darunter: Farbe allein unterscheidet sich zu wenig vom Hover-Zustand. */ header nav a[aria-current='page'] { color: var(--text); border-bottom: 2px solid var(--accent); padding-bottom: 0.15rem; } /* ---- Der Knopf, nur am Handy ---- */ .menuknopf { display: grid; gap: 4px; width: 42px; height: 42px; padding: 0; place-content: center; background: transparent; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .menuknopf span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.2s, opacity 0.2s; } /* Aus drei Strichen wird ein Kreuz. Das ist kein Zierrat: der Knopf muss zeigen, dass er jetzt schliesst und nicht noch einmal oeffnet. */ .menuknopf[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menuknopf[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .menuknopf[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 51.99rem) { /* Reihenfolge am Handy: Logo, Knopf, Menue-Knopf. Das Menue selbst klappt darunter auf und schiebt den Inhalt nach unten, statt ihn zu ueberdecken. */ header { flex-wrap: wrap; gap: 0.6rem; } header nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--line); margin-top: 0.4rem; padding-top: 0.2rem; } header nav.offen { display: flex; } header nav a { padding: 0.85rem 0.2rem; font-size: 1rem; } header nav a + a { border-top: 1px solid var(--line); } header nav a[aria-current='page'] { border-bottom: 0; padding-bottom: 0.85rem; color: var(--accent); } .navcta { margin-left: auto; } } @media (min-width: 52rem) { .menuknopf { display: none; } } .navcta { font-size: 0.875rem; font-weight: 700; color: var(--ground); background: var(--accent); border-radius: 999px; padding: 0.5rem 1rem; text-decoration: none; white-space: nowrap; } /* ------------------------------------------------------------------ DER GLANZ (17.08., Balis Wunsch: "so shiny wie wenns Licht auf Diamonds scheint") ------------------------------------------------------------------ Ein schmaler, schraeger weisser Streifen laeuft von links nach rechts ueber den Knopf. DREI ENTSCHEIDUNGEN, die den Unterschied zwischen Glanz und Blinken machen: 1. SCHRAEG, nicht senkrecht. Licht faellt nie im rechten Winkel auf eine gewoelbte Flaeche, und 20 Grad reichen, damit das Auge es als Reflexion liest statt als Balken. 2. LANGE PAUSE. Der Lauf dauert gut eine Sekunde, die Pause danach rund vier. Ohne Pause ist es ein Lauflicht wie an einer Spielhalle, mit Pause ist es ein Aufblitzen. 3. NICHT DECKEND. Reines Weiss auf 55 Prozent, sonst verschwindet die Schrift darunter fuer den Moment des Durchlaufs. ------------------------------------------------------------------ */ .shine { position: relative; overflow: hidden; isolation: isolate; } .shine::after { content: ''; position: absolute; top: -60%; bottom: -60%; width: 45%; left: -60%; background: linear-gradient( 100deg, transparent 0%, rgb(255 255 255 / 0%) 25%, rgb(255 255 255 / 55%) 50%, rgb(255 255 255 / 0%) 75%, transparent 100% ); transform: skewX(-20deg); animation: glanz 5s ease-in-out infinite; pointer-events: none; } @keyframes glanz { /* Der Lauf belegt nur die ersten 22 Prozent der Zeit, der Rest ist Pause am rechten Rand, ausserhalb des Knopfes. */ 0% { left: -60%; } 22% { left: 115%; } 100% { left: 115%; } } .mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); /* Der Anker darf nicht hoeher werden als die Kopfzeile, sonst verschiebt sich die Navigation daneben. */ line-height: 1; } /* Das Plaettchen. Kantenlaenge und Rundung im Verhaeltnis wie beim iOS-Icon: dort sind es 1024 Punkt mit einer Rundung von rund 22 Prozent. Bei 34 Punkt sind das 7,5. */ .mark .glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7.5px; background: #0d1017; /* Auf der hellen Fassung braucht das dunkle Plaettchen eine Kante, sonst schwebt es als schwarzer Fleck auf Weiss. */ box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); flex: none; } .mark .glyph svg { display: block; } .mark:hover .wordmark { color: var(--accent); } .mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; } /* Das Zeichen als Rechtecke statt als Schrift: eine Schrift im SVG ist eine Wette darauf, dass sie ueberall installiert ist, wo gerendert wird. KORRIGIERT AM 17.08. Die erste Fassung war frei erfunden: ein H mit CYANFARBENEM QUERBALKEN. Das App-Icon und die Wortmarke in assets/holdline-logo.svg zeigen aber beide dasselbe andere Motiv, naemlich ein helles Zeichen mit einem cyanfarbenen UNTERSTRICH daneben. Aus HOLDLINE_ wird im Icon H_, der Balken ist der Cursor und gehoert nicht in den Buchstaben hinein. */ /* Grossbuchstaben und enge Laufweite wie in der Wortmarke. Dort steht letter-spacing -4.5 bei font-size 100, also -0.045em. Etwas groesser als vorher (1,25rem statt 1,125rem), damit das Wort neben dem 34 Punkt hohen Plaettchen nicht zu klein wirkt. */ .mark .wordmark { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.045em; transition: color 0.15s ease; } .tag { font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.01em; } /* ------------------------------------------------------------------ HERO mit der 15-Sekunden-Probe Der Kern des Produkts ist keine Funktionsliste, sondern eine Regel. Also steht die Regel im Hero und laesst sich anfassen. ------------------------------------------------------------------ */ .hero { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem); } @media (min-width: 62rem) { .hero { grid-template-columns: 1.15fr 0.85fr; } } .hero .lede { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--muted); } .hero .lede strong { color: var(--text); font-weight: 700; } /* Die Herkunftszeile. Steht direkt ueber der Anmeldung, weil sie die Frage beantwortet, die genau dort aufkommt: warum ausgerechnet die. */ .credit { margin-top: 1.5rem; padding-left: 0.9rem; border-left: 2px solid var(--accent); font-size: 0.9375rem; color: var(--muted); } /* Anmeldung */ .signup { margin-top: 2rem; max-width: 27rem; } .row { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* AUF DEM HANDY GEHT DER KNOPF UEBER DIE VOLLE BREITE. Das Feld bricht bei 390 Pixeln ohnehin in eine eigene Zeile um, und der Knopf stand danach als 162 Pixel breiter Rest links daneben. Ein Ziel, das man mit dem Daumen treffen soll, sollte nicht das schmalste Element der Zeile sein. Ab 34rem ist Platz fuer beides nebeneinander, dort darf er wieder auf seine Textbreite schrumpfen. */ .row > button { flex: 1 1 100%; } @media (min-width: 34rem) { .row > button { flex: 0 0 auto; } } input[type='email'] { flex: 1 1 13rem; min-width: 0; padding: 0.85rem 1rem; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } input[type='email']::placeholder { color: var(--muted); } button { padding: 0.85rem 1.35rem; font: inherit; font-size: 1rem; font-weight: 700; color: var(--ground); background: var(--accent); border: 0; border-radius: 12px; cursor: pointer; } button:hover { filter: brightness(1.08); } button:active { transform: translateY(1px); } .note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); } .note[data-state='said'] { color: var(--accent); font-weight: 600; } /* Die Probe: Ring, Zaehler, Leiter */ .probe { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow); text-align: center; } /* Das kurze Aufleuchten, wenn ein "Get early access" hierher geschickt hat. Ohne es landet der Fokus lautlos und der Besucher sucht, was gerade passiert ist. */ .flash { animation: feldblitz 0.9s ease-out; } @keyframes feldblitz { 0% { box-shadow: 0 0 0 0 rgb(0 180 216 / 55%); } 100% { box-shadow: 0 0 0 14px rgb(0 180 216 / 0%); } } /* ------------------------------------------------------------------ DAS BAND AM SEITENENDE (17.08.) ------------------------------------------------------------------ Gleiche Farbe wie der Knopf, aber ueber die GANZE Breite und mit dauerhaftem Glanz. Es ist der letzte Aufruf der Seite, also darf es hier lauter sein als in der Mitte: wer bis hierher gelesen hat, ist entweder ueberzeugt oder weg. Der Glanz laeuft hier OHNE lange Pause, anders als am Knopf oben. Begruendung: der Knopf sitzt neben Text, den man lesen will, dieses Band steht allein am Ende und konkurriert mit nichts. ------------------------------------------------------------------ */ .beltcta.wide { box-shadow: none; } .beltcta.wide .run { padding: 1.05rem 0; } .beltcta.wide .run span { font-size: 1.0625rem; } /* Der Glanz laeuft ueber ALLE Baender, nicht nur das untere (18.08.). Sie sind jetzt gleich gebaut, also sollen sie sich auch gleich verhalten: drei Baender, von denen eines glaenzt, sehen nach Versehen aus. */ .beltcta::after { content: ''; position: absolute; top: -60%; bottom: -60%; width: 30%; left: -40%; background: linear-gradient( 100deg, transparent 0%, rgb(255 255 255 / 0%) 25%, rgb(255 255 255 / 42%) 50%, rgb(255 255 255 / 0%) 75%, transparent 100% ); transform: skewX(-20deg); animation: dauerglanz 3.2s linear infinite; pointer-events: none; } @keyframes dauerglanz { from { left: -40%; } to { left: 130%; } } /* Der Store-Hinweis unter dem Formular. Als Pille mit Rand, damit er wie ein Knopf AUSSIEHT, ohne einer zu sein: er verspricht nichts, was man heute anklicken koennte. */ .storesoon { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.8125rem; font-weight: 600; color: var(--muted); } .storesoon svg { flex: none; color: var(--text); } /* DIE EINLADUNG ZUM KNOPF (17.08.). Gross, fett, im Akzentton. Sie ersetzt eine kleine Ueberzeile plus einen grauen Hinweis, die beide zu leise waren fuer das, was sie ausloesen sollen. Die Groesse skaliert mit dem Fenster, bleibt aber unter der H1, denn die Ueberschrift muss die Seite anfuehren, nicht die Einladung. */ .invite { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--accent); text-wrap: balance; } .dial { position: relative; width: 13.5rem; height: 13.5rem; margin: 1.25rem auto 0; } .dial svg { width: 100%; height: 100%; transform: rotate(-90deg); } .dial circle { fill: none; stroke-width: 10; stroke-linecap: round; } .track { stroke: var(--ring-track); } .fill { stroke: var(--accent); stroke-dasharray: 565.49; stroke-dashoffset: 565.49; } .readout { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.15rem; } .secs { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; } .secs small { font-size: 1.125rem; font-weight: 700; color: var(--muted); } .hint { font-size: 0.8125rem; color: var(--muted); } .hold { margin-top: 1.25rem; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; } .verdict { margin: 1rem auto 0; min-height: 3.25rem; max-width: 22rem; font-size: 0.9375rem; color: var(--muted); } .verdict strong { color: var(--text); } .verdict[data-state='earned'] strong { color: var(--accent); } /* ------------------------------------------------------------------ ABSCHNITTE ------------------------------------------------------------------ */ section { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--line); } .head { max-width: 42rem; } .head p { margin-top: 0.9rem; color: var(--muted); } .cards { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.35rem; } .card p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted); } /* Gegenueberstellung: die Konkurrenz rechnet anders */ .versus { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .col { border: 1px solid var(--line); border-radius: 16px; padding: 1.35rem; background: var(--surface); } .col.ours { border-color: var(--accent); } .col h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .col h3 span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .col.ours h3 span { color: var(--accent); } .col ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; } .col li { font-size: 0.9375rem; color: var(--muted); padding-left: 1.4rem; position: relative; } .col li::before { content: '—'; position: absolute; left: 0; color: var(--line); } .col.ours li::before { content: '↑'; color: var(--accent); } /* ------------------------------------------------------------------ ROT UND GRUEN IM VERGLEICH (17.08., Balis Wunsch) ------------------------------------------------------------------ Beide Toene sind gegen --surface auf mindestens 4.5:1 gerechnet, also dieselbe Schwelle, die `npm run kontrast` in der App prueft. Ein knalliges #ff0000 haette auf Weiss nur 4.0:1 und faellt durch. DIE FARBE IST NIE DIE EINZIGE AUSSAGE. Rund acht Prozent der Maenner haben eine Rot-Gruen-Schwaeche und die Zielgruppe ist ueberwiegend maennlich, deshalb traegt jede Zeile zusaetzlich ein Zeichen (✕ / ✓) und einen Text. Ohne das waere der ganze Abschnitt fuer diese Leser eine Liste ohne Aussage. ------------------------------------------------------------------ */ .col { --mark: var(--line); --tone: var(--muted); } .col.bad { --mark: #b3261e; --tone: #b3261e; border-color: #f3d6d3; } .col.ours { --mark: var(--accent); --tone: #1b6b3a; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .col.bad { --mark: #f2857c; --tone: #f2857c; border-color: #5a2e2b; } :root:not([data-theme='light']) .col.ours { --tone: #6ddba0; } } :root[data-theme='dark'] .col.bad { --mark: #f2857c; --tone: #f2857c; border-color: #5a2e2b; } :root[data-theme='dark'] .col.ours { --tone: #6ddba0; } .col.bad h3, .col.bad h3 span { color: var(--tone); } .col.bad li::before { content: '✕'; color: var(--mark); font-weight: 800; } .col.ours li::before { content: '✓'; color: var(--mark); font-weight: 800; } /* Die Zahl steht zuerst und gross, der Satz darunter erklaert sie. Eine nackte 0 ohne Erklaerung waere eine Behauptung. */ .col li b { display: block; color: var(--tone); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-bottom: 0.28rem; } /* Die eine Zeile, in der beide gleich gut sind. Sieben rote Zeilen gegen sieben gruene liest der Besucher als Werbung und glaubt keine davon. Ein zugegebener Gleichstand macht die anderen sechs glaubwuerdig. */ .col li.tie::before { content: '='; color: var(--muted); font-weight: 800; } .col li.tie b { color: var(--muted); } /* Der Abschluss unter dem Vergleich. Er ist die Zusammenfassung des ganzen Abschnitts in vier Woertern, deshalb steht er allein. */ .closer-line { margin: 2rem 0 0; text-align: center; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; max-width: none; } /* FAQ.

statt selbstgebautem Aufklappen: das kann der Browser seit Jahren, es funktioniert ohne JavaScript, und Vorlesegeräte kennen es. Selbstgebaut waere hier nur mehr Code mit weniger Bedienbarkeit. */ /* ------------------------------------------------------------------ DIE FRAGEN, ab 68rem in zwei Spalten (17.08.) ------------------------------------------------------------------ Vorher standen sie in einer Spalte von 44rem, und auf einem breiten Bildschirm blieb rechts daneben die halbe Seite leer. Bei jetzt dreizehn Fragen war die Liste ausserdem so lang, dass der Abschnitt unter ihr nicht mehr in Sichtweite war. WARUM `columns` UND NICHT GRID: eine Fragenliste wird auf- und zugeklappt, also aendert sich ihre Hoehe dauernd. `columns` verteilt nach jedem Klick neu und haelt beide Spalten gleich lang. Ein Grid mit festen Haelften wuerde beim Aufklappen einer langen Antwort schief werden. `break-inside: avoid` ist dabei Pflicht: ohne die Regel reisst eine Antwort mitten im Satz in die naechste Spalte. ------------------------------------------------------------------ */ .faq { margin-top: 2.5rem; max-width: 44rem; border-top: 1px solid var(--line); } @media (min-width: 68rem) { .faq { max-width: none; columns: 2; column-gap: 3rem; border-top: 0; } /* Jede Spalte braucht ihre eigene Oberkante, sonst haengt die zweite Spalte oben in der Luft. */ .faq details:first-child, .faq details { border-top: 1px solid var(--line); } .faq details { border-bottom: 0; } } .faq details { border-bottom: 1px solid var(--line); break-inside: avoid; } .faq summary { padding: 1.1rem 2rem 1.1rem 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--accent); line-height: 1; } .faq details[open] summary::after { content: '−'; } .faq summary:hover { color: var(--accent); } .faq details p { margin: 0; padding: 0 2rem 1.25rem 0; font-size: 0.9375rem; color: var(--muted); max-width: 40em; } /* Die Leiter */ .ladder { margin-top: 2.5rem; display: grid; gap: 0.5rem; max-width: 36rem; } .rung { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .rung b { font-size: 0.9375rem; } .rung .n { font-size: 0.75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.5rem; } .rung .s { margin-left: auto; font-size: 0.8125rem; color: var(--muted); } .rung[data-done='yes'] { border-color: var(--accent); } .rung[data-done='yes'] .s { color: var(--accent); font-weight: 700; } /* Datenschutz-Aussage */ .privacy { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--accent); border-radius: 16px; background: var(--surface); } .privacy p { margin-top: 0.6rem; color: var(--muted); font-size: 0.9375rem; } /* ------------------------------------------------------------------ FUSS ------------------------------------------------------------------ */ footer { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; font-size: 0.875rem; color: var(--muted); } footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* ------------------------------------------------------------------ DAS TELEFON Kein Foto, sondern die Oberflaeche nachgebaut. Grund: ein Screenshot altert bei jedem Umbau der App, dieser Bildschirm nicht. Er benutzt dieselben Farben wie die App im Dunkelmodus, deshalb stehen hier feste Werte statt der Seiten-Variablen: das Telefon ist dunkel, auch wenn der Besucher hell eingestellt hat. ------------------------------------------------------------------ */ /* Die Galerie. Waagerecht schiebbar, mit Rastung, damit ein Bildschirm immer mittig stehen bleibt statt halb angeschnitten. */ .gallery { margin-top: 2.25rem; /* ---------------------------------------------------------------- RASTER STATT FLEX (22.08.), und der Grund ist die HOEHE. Bali: "die phones sind nicht auf der gleichen Hoehe, weil der Text oberhalb unterschiedlich viele Zeilen hat." Genau so war es. Eine Unterschrift wie "Four movements, seven stages, one ladder." braucht eine Zeile, "The timer runs while you hold. No guessing afterwards." braucht zwei. Bei `flex` ist jede Karte fuer sich, also faengt ihr Telefon dort an, wo ihre eigene Unterschrift aufhoert. Vierzehn Pixel Versatz, gemessen. DIE ALTE ANTWORT WAR `min-height` AUF DER UNTERSCHRIFT, und sie war eine Schaetzung: 2.6em reichen fuer eine kurze Zeile und nicht fuer zwei. Sie muesste bei jeder Textaenderung nachgerechnet werden und bricht auf schmalen Bildschirmen erneut, weil dort auch der Titel umbricht. `subgrid` loest es ohne Zahl: die Karten teilen sich die ZWEI Zeilen des Elternrasters, und eine Rasterzeile ist immer so hoch wie ihr hoechster Inhalt. Alle Telefone beginnen damit auf derselben Linie, egal wie lang der Text darueber ist. ---------------------------------------------------------------- */ display: grid; grid-auto-flow: column; /* Dieselbe Breite, die vorher als `width` auf der Karte stand. */ grid-auto-columns: clamp(17rem, 82vw, 22rem); grid-template-rows: auto auto; /* Zeilenabstand zuerst, Spaltenabstand danach: 1.25rem trennt Unterschrift und Telefon INNERHALB der Karte (das war vorher der `gap` der Karte), 1rem trennt die Karten voneinander. */ gap: 1.25rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; padding-bottom: 1rem; /* Damit die Karten am Rand nicht kleben, wenn ganz durchgescrollt wird */ scrollbar-width: thin; /* MUSS DABEISTEHEN, sobald scrollbar-width gesetzt ist: Chrome schaltet damit auf die genormten Eigenschaften um und IGNORIERT die ::-webkit-scrollbar-Regeln darunter. Die standen hier und wirkten nicht. Sie bleiben trotzdem stehen, aelteres Safari kennt nur sie. */ scrollbar-color: var(--line) transparent; } /* * DIE GALERIE BLEIBT IN DER LESESPALTE (22.08., Balis Anweisung mit * Zeichnung: "dass es in der gleichen Breite ist wie die Sachen * unterhalb, und dann kann man einfach in diesem Bereich scrollen"). * * ------------------------------------------------------------------ * DAS DREHT EINE FRUEHERE ENTSCHEIDUNG UM, deshalb steht die alte * Begruendung hier weiter und wird nicht stillschweigend geloescht: * die Galerie lief bis an die Fensterkanten, weil ein am Bildrand * angeschnittenes Telefon der Hinweis ist, dass es seitlich * weitergeht. Ein zentrierter Kasten verschweigt das. * * WARUM DER EINWAND HIER NICHT MEHR TRAEGT: der Hinweis geht nicht * verloren, er wandert nur nach innen. Acht Karten passen auch in die * Lesespalte nicht nebeneinander, also wird weiterhin eine * angeschnitten, nur eben an der Spaltenkante statt an der * Fensterkante. Dazu stehen die Scrollleiste und die Zeile * "Eight screens from the app itself. Drag them sideways." * * WAS DER TAUSCH GEWINNT, und das war Balis Punkt: auf einem breiten * Bildschirm stand die Galerie als einziger Block ausserhalb der * Flucht. Die Kacheln darunter, die Ueberschrift darueber und der * ganze Rest der Seite enden an derselben Kante, die Telefone liefen * links und rechts darueber hinaus. * ------------------------------------------------------------------ * * Technisch ist es eine Streichung, kein Zusatz: ohne * `grid-column: 1 / -1` greift die allgemeine Regel weiter oben, die * jedes Kind eines Abschnitts in Spalte 2 setzt. Das Innenmass, das die * erste Karte auf die Textkante zurueckgeholt hat, wird damit * ueberfluessig, denn die Spalte hat den Seitenabstand schon. */ .gallery::-webkit-scrollbar { height: 8px; } .gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; } .gallery::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------------ DIE GALERIE ALS KARUSSELL (17.08., ersetzt das Fliessband) ------------------------------------------------------------------ Balis Entscheidung: die Screenshots sollen korrekt sitzen statt zu laufen, und man wechselt mit Ziehen oder mit den Pfeilen. WAS DAMIT AUCH ENTFAELLT: das Verdoppeln der Karten. Ein Karussell braucht keine lueckenlose Schleife, also stehen wieder genau die sechs echten Karten im Dokument. `scroll-snap-type: x mandatory` ist jetzt richtig, waehrend es beim Band im Weg war: eine Karte, die von selbst laeuft, darf nicht einrasten, eine Karte, die man schiebt, muss es. ------------------------------------------------------------------ */ .gallery.deck { cursor: grab; } .gallery.deck:active { cursor: grabbing; } /* Waehrend gezogen wird, darf kein Bild als Bild aufgegriffen werden, sonst startet der Browser sein eigenes Ziehen und das Karussell bleibt stehen. */ .gallery.deck.is-dragging { cursor: grabbing; scroll-snap-type: none; } .gallery.deck.is-dragging img { pointer-events: none; } /* ================================================================== PFEILE UND VERLAUFSKANTEN (22.08., Balis Wunsch) ================================================================== Woertlich: "baue visuelle Pfeile ein, dass man checkt, dass man scrollen kann, und nicht nur diese visuellen Pfeile wie bei der App, sondern auch klickbare Tasten, mit denen man scrollen kann." ⚠️ DAS DREHT EINE ENTSCHEIDUNG VOM 17.08. UM, an der Tag Pfeile ausdruecklich ENTFERNT wurden ("es bleibt das Ziehen"). Der Grund, warum es jetzt trotzdem richtig ist: damals waren es sechs Karten, die auf einem breiten Bildschirm fast alle sichtbar waren. Es sind acht, die Galerie sitzt seit heute in der Lesespalte statt ueber die volle Fensterbreite, und damit ist mehr als die Haelfte des Inhalts nicht zu sehen. Ein Ziehen, von dem niemand weiss, ist kein Ziehen. ZWEI ANZEIGEN, WEIL SIE ZWEI VERSCHIEDENE DINGE SAGEN: · Die VERLAUFSKANTE sagt "hier hoert es nicht auf". Sie ist passiv, nimmt keinen Platz und kann nicht geklickt werden. · Die TASTE sagt "du kannst weiter". Sie ist fuer alle, die nicht ziehen: Maus ohne Rad, Tastatur, Vorlesegeraet. BEIDE VERSCHWINDEN, WENN ES NICHTS ZU SCROLLEN GIBT. Ein Pfeil, der nichts tut, laesst den Besucher an sich zweifeln statt an der Seite, und genau dieser Satz steht seit dem 17.08. beim Hinweistext darunter. Er gilt hier genauso. ================================================================== */ .galwrap { position: relative; } /* Die Kanten liegen UEBER den Karten, aber unter den Tasten, und sie lassen jeden Klick durch. Sie enden 1.5rem ueber dem Boden, damit die Bildlaufleiste frei bleibt. */ .galwrap::before, .galwrap::after { content: ''; position: absolute; top: 0; bottom: 1.5rem; width: 3.5rem; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1; } .galwrap::before { left: 0; background: linear-gradient(to right, var(--band), transparent); } .galwrap::after { right: 0; background: linear-gradient(to left, var(--band), transparent); } /* Die Kante erscheint nur auf der Seite, auf der wirklich noch etwas liegt. Beide gleichzeitig heisst: man steht in der Mitte. */ .galwrap[data-links='ja']::before { opacity: 1; } .galwrap[data-rechts='ja']::after { opacity: 1; } .galpfeil { position: absolute; /* ---------------------------------------------------------------- SENKRECHT MITTIG OHNE `transform`, und das ist ein Fehlerfix. Bali am 22.08.: "wenn ich auf diese Pfeiltaste druecke, dann springen beide Tasten nach unten." DIE URSACHE STAND SEIT MONATEN IM BLATT, ganz oben bei den allgemeinen Knopfregeln: button:active { transform: translateY(1px); } Das ist die Druck-Rueckmeldung fuer JEDEN Knopf der Seite und voellig richtig. Nur: der Pfeil hat seine Mitte ueber `transform: translateY(-50%)` geholt, und ein Element hat genau EINEN `transform`. Beim Druecken gewinnt der spaetere, die Zentrierung faellt weg, und der Knopf faellt um seine halbe Hoehe nach unten. **22 Pixel, nicht 1.** DIE LOESUNG NIMMT DEM KNOPF DEN `transform` WEG, statt die Druckregel zu entschaerfen: `top` und `bottom` gesetzt, feste Hoehe, und `margin-block: auto` verteilt den Rest gleichmaessig nach oben und unten. Das ist die aeltere und robustere Art, etwas absolut Positioniertes zu zentrieren. ZWEI DINGE WERDEN DAMIT BESSER, nicht nur eines: 1. Der Pfeil bekommt dieselbe Druck-Rueckmeldung wie jeder andere Knopf der Seite, weil `transform` jetzt frei ist. 2. Er zentriert sich zwischen Oberkante und BILDLAUFLEISTE statt ueber die ganze Hoehe. Vorher sass er einen halben Balken zu tief. ---------------------------------------------------------------- */ top: 0; bottom: 1.5rem; margin-block: auto; /* 44 Punkt. Dieselbe Mindestgroesse fuer ein Ziel unter dem Finger, die auch in der App gilt. Die Hoehe MUSS hier stehen: ohne sie wuerde das Element die ganze Strecke zwischen top und bottom fuellen und `margin: auto` haette nichts zu verteilen. */ width: 44px; height: 44px; display: grid; place-items: center; /* FARBEN: der Kreis ist DUNKLER als die Karte, nicht gleich hell. ---------------------------------------------------------------- Erster Versuch war `--surface`, also genau der Ton der Karte darunter. Im Bild nachgesehen: der Knopf verschwand fast, weil er auf demselben Ton lag und nur eine haarfeine Linie ihn trennte. Ein Bedienelement, das man suchen muss, ist keines. `--ground` ist der Seitengrund und damit dunkler als jede Karte. Zusammen mit dem tuerkisen Rand und Pfeil hebt er sich auf beiden Untergruenden ab, auf der Karte wie auf dem Band dazwischen. WARUM NICHT GANZ TUERKIS GEFUELLT: dann konkurriert er mit "Get early access" in der Kopfleiste. Auf einer Seite mit genau einer Aufgabe darf nur ein Element so laut sein. */ border: 1px solid var(--accent); border-radius: 999px; background: var(--ground); color: var(--accent); cursor: pointer; padding: 0; z-index: 2; box-shadow: var(--shadow); transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s; } /* Beim Ueberfahren dreht sich das Verhaeltnis um: der Knopf wird zur Flaeche, der Pfeil zum Loch darin. Das ist die deutlichste Rueckmeldung, die ohne Bewegung auskommt. */ .galpfeil:hover { background: var(--accent); color: var(--ground); border-color: var(--accent); } .galpfeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .galpfeil svg { width: 20px; height: 20px; display: block; } .galpfeil.links { left: 0.5rem; } .galpfeil.rechts { right: 0.5rem; } /* Am Ende der Reihe ausgegraut statt versteckt: ein Knopf, der verschwindet, laesst den anderen springen. */ .galpfeil[disabled] { opacity: 0.35; cursor: default; background: var(--ground); border-color: var(--line); color: var(--muted); box-shadow: none; } /* Ohne diese Zeile faerbt sich auch der tote Knopf beim Ueberfahren ein und behauptet, er wuerde etwas tun. */ .galpfeil[disabled]:hover { background: var(--ground); color: var(--muted); border-color: var(--line); } /* Passt alles nebeneinander, sind Tasten UND Kanten falsch. Das Skript setzt das Merkmal und prueft es bei jeder Groessenaenderung neu. */ .galwrap[data-scrollbar='nein'] .galpfeil { display: none; } /* Ohne JavaScript gibt es niemanden, der die Tasten bedient. Sie sind deshalb im Markup versteckt und werden erst vom Skript sichtbar gemacht, genau wie es der Kommentar bei der Ziehen-Logik vorsieht. */ .galpfeil[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .galwrap::before, .galwrap::after { transition: none; } } .galnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; } .galnav .scrollhint { margin: 0; } .galbtns { display: flex; gap: 0.5rem; } .galbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s; } .galbtn:hover { border-color: var(--accent); color: var(--accent); } .galbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Am Ende der Reihe ausgegraut statt versteckt: ein Knopf, der verschwindet, laesst den anderen springen. */ .galbtn[disabled] { opacity: 0.35; cursor: default; border-color: var(--line); color: var(--muted); } .shot { /* Die Breite kommt seit dem 22.08. aus `grid-auto-columns` am Elternraster. Der Wert selbst ist unveraendert: von 17,5 auf 22rem am 17.08., weil die Screenshots der Beweis sind, dass die App existiert, und kleiner waren als die Textkarten daneben. Auf dem Handy bleiben 82vw: eine Karte fuellt den Blick, die naechste schaut am Rand hervor und zeigt, dass es weitergeht. */ scroll-snap-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 1.5rem 1.25rem 1.75rem; /* DIE KARTE UEBERNIMMT DIE ZEILEN DES ELTERNRASTERS statt eigene zu bilden. Genau das macht `subgrid`, und nur deshalb stehen die Telefone aller acht Karten auf derselben Linie. Ohne diese zwei Zeilen faellt alles auf das alte Verhalten zurueck. */ display: grid; grid-template-rows: subgrid; grid-row: span 2; } .cap { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; text-align: center; text-wrap: balance; } /* RUECKFALL FUER BROWSER OHNE `subgrid`. ------------------------------------------------------------------ Rund vier Prozent, im Wesentlichen aeltere Safari-Staende. Dort bleibt die geratene Mindesthoehe, aber gross genug fuer ZWEI Zeilen Unterschrift statt der bisherigen 2.6em, die nur fuer eine reichten. Gerechnet: Titelzeile 1.25em, Abstand 0.28em, zwei kleine Zeilen zu je 0.96em, macht 3.45em. Aufgerundet auf 3.6em. Es ist bewusst KEINE Umkehrung: mit subgrid steht hier gar keine Mindesthoehe mehr, weil eine Rasterzeile ihre Hoehe vom Inhalt bekommt und keine Schaetzung braucht. */ @supports not (grid-template-rows: subgrid) { .cap { min-height: 3.6em; } } .cap small { display: block; margin-top: 0.3rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--muted); } .scrollhint { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); } .phone { --p-ground: #1a1a2e; --p-surface: #232345; --p-text: #e0e0e0; --p-muted: #9494ad; --p-accent: #00b4d8; --p-line: #2e2e52; width: 100%; aspect-ratio: 9 / 19.5; background: var(--p-ground); border: 8px solid #0b0b16; border-radius: 2.4rem; box-shadow: 0 18px 40px rgb(0 0 0 / 22%), 0 3px 8px rgb(0 0 0 / 14%); overflow: hidden; position: relative; color: var(--p-text); display: flex; flex-direction: column; } /* Seit dem 17.08. steht im Rahmen ein ECHTER Screenshot statt einer nachgebauten Oberflaeche. Der Nachbau war gut, aber er alterte bei jedem Umbau der App, und er behauptete etwas ueber einen Bildschirm, den es so vielleicht gar nicht mehr gab. Das Seitenverhaeltnis der Aufnahme (1290:2796) passt auf ein Tausendstel genau in den Rahmen, deshalb braucht es keinen Beschnitt. */ .phone img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ================================================================== INFO-PUNKTE AUF DEN SCREENSHOTS (17.08., Balis Wunsch) ================================================================== Ein Screenshot zeigt, DASS etwas da ist. Er erklaert nicht, WARUM. Der Punkt sitzt genau auf dem Bedienelement, ueber das man sonst hinwegliest. WARUM