/* ============================================================ marcy v2 - Ergänzungen zum One-Pager Wird NACH marcy.css geladen und ergänzt nur. Nichts aus dem Bestand ist überschrieben, damit die alten Seiten weiterlaufen. Grundlage: 01 Inhalte/_struktur-analyse.md und _design-audit.md ============================================================ */ /* ------------------------------------------------------------ 1 · Bento mit Hierarchie - „Meine Leistungen" Sechs gleiche Kacheln sagen: nichts ist wichtiger als der Rest. Die erste bekommt die doppelte Fläche, weil „Texte kommen von mir" der Kern der Positionierung ist. Prinzip aus 21st.dev übernommen, Farbwelt nicht - dort leuchtet alles. ------------------------------------------------------------ */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bento > .karte { display: flex; flex-direction: column; } /* Am 11.8. aufgegeben: die erste Kachel spannte 2 x 2 Felder. Marcels Ansage - die Sektion nahm zu viel Platz. Jetzt sechs gleiche Kacheln in zwei Reihen. Der Preis: die Hierarchie ist weg, „Inhalt & Texte" wiegt nicht mehr sichtbar schwerer als der Rest. Gemessen 1.479 -> darunter, siehe README. */ .bento > .karte.is-gross { grid-column: auto; grid-row: auto; } .bento > .karte.is-gross .icon-gross { width: 72px; height: 72px; } /* ------------------------------------------------------------ Vitrinen in den Bento-Kacheln Die grosse Kachel stand mit `space-between` da: Icon oben, Text unten, dazwischen 380 px Leere. Statt sie mit einem generierten Bild zu fuellen (imagery.noGeneratedImagery - keine KI-Bilder, wo ein Bild etwas belegt) traegt sie jetzt eine gezeichnete Vitrine in derselben Linie wie die Icons: 1,5 px, eckige Enden, genau eine Neonflaeche. Die Vitrine ist dekorativ und traegt aria-hidden - die Aussage steht im Text darunter, nicht in der Zeichnung. ------------------------------------------------------------ */ /* Feste Hoehe statt flex-grow. Vorher wuchs die Vitrine der grossen Kachel auf 540 px und trieb die Sektion auf 1.479 px - die Zeichnung braucht diese Flaeche nicht, sie skaliert mit. Das inline-SVG hat viewBox und damit preserveAspectRatio: bei width und height je 100 % passt es sich ein und bleibt zentriert, ohne zu verzerren. */ .bento-vitrine { flex: 0 0 auto; height: 104px; display: flex; align-items: center; justify-content: center; margin: 0 0 20px; background: var(--greige); border-radius: var(--r-karte-klein); overflow: hidden; padding: 14px; } /* In den kleinen Kacheln faellt der greige Kasten weg. Er kostete Polsterung, und die Zeichnung schwamm darin im Letterbox: 306 x 104 Kasten fuer ein Bild im Verhaeltnis 300 x 164 heisst rund 139 x 76 gemalt und links und rechts Grau. Ohne Kasten steht die Zeichnung linksbuendig wie ein grosses Icon - der greige Kasten bleibt der grossen Kachel, wo das Bild traegt. */ /* 88 px waren zu klein fuer diese Zeichnungen. Bei 161 x 88 liegt der Massstab auf 0,537 - und weil vector-effect die Kontur bei 1,5 px festhaelt, wirkt sie wie 2,8 Zeichnungseinheiten. Die Linien werden schwer, die Browserpunkte winzig, das Ganze gedraengt: es liest sich wie abgeschnitten, obwohl nachgemessen keine Kante fehlt. 130 px bringen den Massstab auf 0,79 und damit die Linien wieder ins Verhaeltnis. Kostet 2 x 42 px Sektionshoehe. */ .bento .bento-vitrine { height: 130px; background: none; padding: 0; margin-bottom: 18px; justify-content: flex-start; } .bento .bento-vitrine svg { width: auto; } /* Die grosse Kachel spannt zwei Rasterzeilen - ihre Hoehe bestimmen also die kleinen Kacheln daneben, nicht sie selbst. Ein Deckel haette hier nur Leerraum unter dem Text erzeugt (gemessen: 225 px). Deshalb waechst diese eine Vitrine mit, statt zu deckeln. Kompakter wird die Sektion ueber die KLEINEN Kacheln. */ .bento-vitrine svg { width: 100%; height: 100%; } .bento-vitrine [stroke] { vector-effect: non-scaling-stroke; } /* Enger als die uebrigen Karten (30 px): sechs Kacheln mal 60 px Polsterung sind allein 360 px Sektionshoehe. */ .bento > .karte { padding: 24px; } @media screen and (max-width: 767px) { .bento-vitrine { height: 96px; padding: 12px; } .bento .bento-vitrine { height: 112px; } } @media screen and (max-width: 991px) { .bento { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .bento { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 2 · Vorher/Nachher - entfallen Der Schieber war am 11.8. kurz der Aufmacher der Referenzen und ist am selben Tag auf Marcels Ansage ganz aus v2 heraus. Die Klasse `.beweis-linie` trug nur seinen Abstand nach unten und ist damit ebenfalls weg. Das Bauteil `.vergleich` steht unveraendert in marcy.css, wird aber seit dem Umzug von v2 auf `index.html` (11.8.) auf KEINER Seite mehr benutzt - die alten Seiten `leistungen.html` und `portfolio.html` sind entfallen. Es ist damit toter Bestand; ob es bleibt, entscheidet Marcel. ------------------------------------------------------------ */ /* ------------------------------------------------------------ 3 · Pakete - auf Greige, OHNE Einzelpreise Marcels Ansage: nur „ab 1.900 €" im Vorlauf, keine Paketpreise, keine Zahlungsmodalitäten und kein § 19 - das gehört ins Angebot, nicht auf die Seite. ------------------------------------------------------------ */ /* stretch statt start: alle drei Karten laufen auf gleiche Hoehe, auch wenn die Listen unterschiedlich lang sind. */ .pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .paket { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--r-karte); padding: 30px; display: flex; flex-direction: column; /* Gleiche Hebung wie die Leistungskarten (.karte.is-hebt): 200 ms, 8 px, kein Schatten - layout.motion.cardHover. */ transition: transform 200ms ease-out, border-color 200ms ease-out; } .paket:hover, .paket:focus-within { transform: translateY(-8px); } /* Keine schwarze Kante mehr am mittleren Paket (Marcels Ansage 11.8.). Alle drei Karten tragen dieselbe Haarlinie; die Hervorhebung macht allein die neone Badge. */ .paket-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); } /* Alle drei Karten auf EINE Grundlinie (Marcels Ansage 11.8.). Vorher lagen Label, Titel, Trennlinie und Liste in jeder Karte auf einer anderen Höhe - aus zwei Gründen, die sich addierten: 1. Nur die Standard-Karte trägt die Badge „Beliebt". Ihre Kopfzeile ist dadurch 28 px hoch, die nackten Labels daneben nur 17 - der Titel startete 11 px tiefer. 2. Nur die Basis-Karte hat einen zweizeiligen Titel („One-Pager / bis 4 Seiten"). Alles darunter rutschte eine Zeile nach unten. Beide Köpfe laufen jetzt auf die Höhe der Badge, der Titel reserviert immer zwei Zeilen. Damit sitzen Trennlinie und Liste in allen drei Karten auf derselben Höhe - unabhängig davon, wie lang der Text ist. */ .paket > .paket-name, .paket > .zwischen { min-height: 28px; display: flex; align-items: center; justify-content: space-between; } .paket-umfang { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-top: 10px; /* 2 Zeilen à 1,3 - der Platz steht auch dann, wenn der Titel einzeilig ist. */ min-height: 2.6em; } .paket-zeile { display: flex; justify-content: space-between; column-gap: 16px; font-size: 14px; padding: 11px 0; border-top: 1px solid var(--rahmen); color: var(--grau); } .paket-zeile b { color: var(--ink); font-weight: 500; text-align: right; } /* Traegt die Haarlinie, seit die Zeile „Abstimmungsrunden" entfallen ist. */ .paket-liste { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rahmen); } .paket-liste li { font-size: 14px; line-height: 1.65; color: var(--grau); } .paket-liste li::before { content: "-"; margin-right: 8px; color: var(--chrome); } @media screen and (max-width: 991px) { .pakete { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 4 · Korrekturen aus dem Design-Audit ------------------------------------------------------------ */ /* `link-unter` lief in 16 und 14 px. Eine Groesse. */ .link-unter { font-size: 16px; } /* Der Abstandsausreisser 104 px ist hier nicht uebernommen - alle Sektionen laufen auf 96/96, Hero auf 72/96. */ @media (prefers-reduced-motion: reduce) { .paket:hover, .paket:focus-within { transform: none; } } /* ------------------------------------------------------------ 6 · Kein Pin mehr Die Bühne (240vh, sticky) ist am 11.8. wieder entfallen: 2.160 px greige waren ein Viertel der Seitenhöhe und rissen die Grenze aus layout.sectionRhythm (Greige ≤ 20 % der sichtbaren Fläche). Der Effekt läuft jetzt in dem Fenster, in dem die Liste ohnehin sichtbar ist - kein zusätzlicher Platz, kein zusätzliches Grau. Gerechnet wird in marcy-v2.js. ------------------------------------------------------------ */ /* ------------------------------------------------------------ 7 · Hero - Person, zwei Einstiege, Kennzahlen Aus dem Vergleich mit soenkesproll.de und maxwbr.de (11.8.): beide zeigen das Gesicht im ersten Bildschirm, beide stellen Vertrauenssignale über die Falz, maxwbr bietet zwei Einstiege. ------------------------------------------------------------ */ /* Portrait rechts, Text links. Am 7.8. war das schon einmal so und wurde zurückgebaut, weil der Bogen weichen musste - am 11.8. auf Marcels Ansage wieder da. Der Bogen ist in dieser Sektion entfallen, auf den übrigen Seiten bleibt er. Die Bildspalte ist fest, die Textspalte flexibel: so bleibt das Portrait in jeder Fensterbreite gleich gross und der Text bricht um. */ .hero-raster { display: grid; /* minmax(0, 1fr) statt 1fr: sonst bläht das Logo-Laufband die Spalte auf. Gemessen bei 375 px waren es 2.796 px Spaltenbreite - sichtbar war das nicht, weil .laufband abschneidet, aber jede Breitenrechnung im Raster lief damit auf einer falschen Zahl. */ /* 340 statt 380, Abstand 56 statt 64 (11.8., zweite Runde). Das Portrait stand mit 380 px als groesste Flaeche im ersten Bildschirm und drueckte die H1 daneben klein - nicht in Pixeln, sondern im Verhaeltnis. Die 40 px, die es abgibt, gehen an die Textspalte und tragen dort die 72-px-Zeile. */ grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; align-items: center; } .hero-text { min-width: 0; } /* Grössere H1 NUR im Hero dieser Seite. Gemessen am 11.8.: V1 und V2 tragen dieselben 56 px, aber die Textspalte ist von 1.200 auf 756 px geschrumpft, weil rechts das Portrait steht. Dieselbe Schriftgrösse in einer 37 % engeren Spalte liest sich kleiner - die Zeile füllt nicht mehr. 64 px reichten Marcel nicht - zweite Runde am 11.8.: 72 px, dazu ein engeres Portrait (340 statt 380). Beides zusammen, weil die Groesse hier ein VERHAELTNIS ist: die H1 stand schon bei 64 px absolut groesser als in V1 (56 px), wirkte neben der 380-px-Scheibe aber kleiner. Die Typo-Skala bleibt unangetastet: `t-h1` laeuft ueberall sonst auf 56. Der Lead waechst mit auf 20, sonst kippt das Verhaeltnis im Block. Obergrenze: die Textspalte misst bei 1.440 px jetzt 804 px, „Ohne deinen Aufwand." braucht 11 em - bei 72 px sind das 792 px. Mehr geht in dieser Aufteilung nicht, ohne dass eine dritte Zeile entsteht. */ .hero-raster .t-h1 { /* Die Formel IST die Rechnung aus dem Kommentar: Textspalte geteilt durch 11 em. Spalte = Fensterbreite minus 240 Rand, 340 Bild, 56 Abstand. Bei 1.440 px greift die Obergrenze 72, darunter faedelt sich die Groesse selbst ein - sonst braeche die Zeile bei 1.201 px auf drei Zeilen. */ font-size: clamp(50px, calc((100vw - 636px) / 11), 72px); } .hero-raster .hero-lead { font-size: 20px; } /* Zwischen 992 und 1.200 px gilt noch der grosse Rand (120 px je Seite), das Bild ist aber weiter fest. Gemessen am 11.8. blieben dem Text bei 992 px ganze 248 px - die H1 lief auf FÜNF Zeilen. Feste Stufen fangen das nicht: die Spalte schrumpft in diesem Bereich um 52 %, eine Stufe deckt das nicht ab. Darum hier beides mitlaufend - Bildspalte als Anteil, H1 als clamp. Die Rechnung dahinter: „Ohne deinen Aufwand." ist die längste Zeile und misst in Inter 600 rund 11 em. Die H1 darf also höchstens Spaltenbreite / 11 gross sein. Bei 992 px sind das 43 px, bei 1.200 px sind es 56 px - genau der Korridor, den das clamp abfährt. */ @media screen and (min-width: 992px) and (max-width: 1200px) { .hero-raster { grid-template-columns: minmax(0, 1fr) 30%; column-gap: 48px; } .hero-bild { width: 100%; max-width: 340px; } .hero-raster .t-h1 { font-size: clamp(42px, 4.3vw, 56px); } } @media screen and (max-width: 991px) { /* Ab hier faellt der Rand auf 40 px, die Spalte wird schlagartig breiter. Zwei Zeilen bleiben bis hinunter zu rund 800 px moeglich. */ .hero-raster .t-h1 { font-size: clamp(32px, 4.3vw, 42px); } .hero-raster .hero-lead { font-size: 18px; } } @media screen and (max-width: 767px) { /* Zweizeilig, immer - siehe die gerechnete Fassung weiter unten in dieser Datei (derselbe Breakpoint, spaetere Regel gewinnt). */ .hero-raster .t-h1 { font-size: clamp(28px, 9vw, 42px); } } /* Rund statt Rechteck, 380 statt 440. Die Quelle ist 1024 x 1024, der Kreis schneidet also nichts weg. Damit tragen alle drei Portraits dieser Seite dieselbe Form: 34 px in der Nav-Pille, 88 px im Abschluss, 380 px hier. Weisses Shirt auf schwarzem Grund. Ich hatte kurz die durchgehend schwarze Fassung drin, damit die Flaeche im Kreis nicht bricht - auf Marcels Ansage zurueck: das weisse Shirt fuellt den unteren Bogen und traegt das Gesicht, statt es in einer schwarzen Scheibe zu isolieren. */ /* 50 % statt var(--r-pille): der Pillenradius ist ein FESTER Wert (100 px). Bei den kleinen Portraits (34 px Nav, 88 px Abschluss) liegt er ueber der halben Kantenlaenge und ergibt zufaellig einen Kreis - bei 380 px waeren es abgerundete Ecken. Ein Kreis braucht einen relativen Radius. */ .hero-bild { width: 340px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; /* Reines Schwarz, nicht Ink: die Quelle ist am 11.8. auf #000 neu gerechnet (vorher #1A1A1A). Bei #1A1A1A staende an der Kreiskante eine Aufhellung gegen das Bild. Ausnahme von der Palette und nur hier - #000 ist keine Flaechen- oder Schriftfarbe der Marke, sondern der Grund eines Fotos. */ background: #000; } .hero-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Das Laufband läuft unter BEIDEN Spalten durch. */ .hero-raster .logo-zeile { grid-column: 1 / -1; } @media screen and (max-width: 991px) { .hero-raster { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; } .hero-bild { width: 280px; } } @media screen and (max-width: 767px) { /* Einspaltig. Bis zum 11.8. stand das Bild UNTER dem Text - auf Marcels Ansage jetzt darüber und deutlich kleiner (160 statt 280 px). 280 px waren drei Viertel der Fensterbreite: das Portrait beanspruchte mehr Fläche als die Aussage darüber und schob die Logo-Zeile aus dem ersten Bildschirm. 160 px lesen sich als Absender, nicht als Motiv. `order` dreht nur die ANZEIGE - im Quelltext steht der Text weiter zuerst, Vorlesesoftware und Tastatur bekommen also unverändert die Aussage vor dem Bild. */ /* Dritte Runde am 11.8. (Marcels Ansage): das Portrait steht NEBEN dem Knopf, nicht mehr ueber der Headline. Damit beginnt die Seite mit der Aussage, und das Gesicht sitzt dort, wo es hingehoert - direkt am „Erstgespraech buchen", wie schon in der Nav-Pille. `display: contents` auf `.hero-text` loest den Zwischenbehaelter auf: H1, Lead, Knopf und Kennzahlen werden dadurch selbst zu Feldern DIESES Rasters. Ohne das liesse sich das Bild nicht neben den Knopf setzen - die beiden haben verschiedene Eltern. */ .hero-raster { grid-template-columns: minmax(0, 1fr) auto; row-gap: 20px; column-gap: 20px; align-items: center; } .hero-text { display: contents; } /* Zeilen EXPLIZIT vergeben. Ohne das verteilt das Auto-Placement die Felder in DOM-Reihenfolge, und weil `.hero-bild` im Quelltext hinter den Kennzahlen steht, landete es darunter statt neben dem Knopf (11.8. im Bild gesehen). */ .hero-raster .t-h1 { grid-column: 1 / -1; grid-row: 1; } .hero-raster .hero-lead { grid-column: 1 / -1; grid-row: 2; } /* `align-self: center` an BEIDEN: `align-items` auf dem Raster allein reichte nicht, weil der Knopf aus marcy.css einen eigenen Aussenabstand nach oben traegt - gemessen lagen die Mittelpunkte 19 px auseinander. */ .hero-raster .hero-cta { grid-column: 1; grid-row: 3; justify-self: start; align-self: center; margin-top: 0; } /* 88 px: dieselbe Groesse wie das Portrait im alten Abschlussblock, knapp doppelte Knopfhoehe. Groesser zoege den Blick vom Knopf ab. */ .hero-bild { grid-column: 2; grid-row: 3; width: 88px; max-width: none; justify-self: end; align-self: center; } .hero-raster .hero-zahlen { grid-column: 1 / -1; grid-row: 4; } .hero-raster .logo-zeile { grid-column: 1 / -1; grid-row: 5; } /* Der Knopf brach zweizeilig um, sobald das Bild ihm die halbe Spalte nimmt. Er soll seine natuerliche Breite behalten. */ .hero-raster .hero-cta { white-space: nowrap; } } /* Kennzahlen als ZEILE, nicht als 44-px-Ziffernblock. Auf /ueber-mich sind sie eine eigene Sektion; hier sind sie ein Beleg im Vorbeigehen, direkt vor den Kundenlogos. Reihenfolge im Hero: Versprechen → Handlung → Beleg in Zahlen → Beleg in Logos. */ .hero-zahlen { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 10px; margin-top: 40px; font-size: 15px; color: var(--grau); } .hero-zahlen span { display: inline-flex; align-items: baseline; column-gap: 7px; } .hero-zahlen strong { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } /* Trenner zwischen den Angaben - Haarlinie statt Aufzählungspunkt, passend zu den Trennern in den Fallkarten. */ .hero-zahlen span + span { position: relative; } .hero-zahlen span + span::before { content: ""; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 1px; background: var(--rahmen); } /* Der Abstand zum Laufband schrumpft, weil jetzt die Zahlenzeile davor steht - sonst stünden 88 + 40 px Luft zwischen zwei Belegen. */ .hero .logo-zeile { margin-top: 48px; } @media screen and (max-width: 767px) { .hero-zahlen { column-gap: 24px; } .hero-zahlen span + span::before { left: -12px; } } /* ------------------------------------------------------------ 8 · Screenscroll im Hover - Tempo von soenkesproll.de Gemessen am 11.8. aus der IX2-Definition der Referenz, nicht geschaetzt (`Webflow.require('ix2')`, Aktionslisten a-66 „showcase-show" und a-67 „showcase-show-stop"): | | Referenz | v1 (marcy.css) | v2 hier | |---|---|---|---| | Weg | −23 rem | −1.200 px | −1.200 px | | Dauer | 1.000 ms | 20.000 ms | 3.870 ms | | Tempo | **310 px/s** | 60 px/s | **310 px/s** | | Vorlauf | 100 ms | keiner | 100 ms | | Zurueck | 300 ms ease | 600 ms ease-out | 300 ms ease | Das Tempo der Referenz ist NICHT fest: ihr Weg steht in `rem` und ihre Wurzelgroesse laeuft mit der Fensterbreite (gemessen: 12,01 px bei 1.280 px Fenster, 13,49 px bei 1.440 px). Also 276 px/s dort und 310 px/s hier. Uebernommen ist der Wert bei **1.440 px**, weil marcy alles auf dieser Breite bemisst (siehe die Flaechenanteile in 01 Inhalte/ueber-mich.md). Unser Weg steht in px und ist damit auf jeder Breite gleich schnell - bewusst, denn unsere Rahmenhoehe ist auch fest. Uebernommen ist das TEMPO, nicht der Weg: die Referenz faehrt 23 von 25,3 rem Rahmenhoehe, also knapp eine Rahmenhoehe. Ihre Aufnahmen sind 2- bis 4-mal so hoch wie der Rahmen. Unsere Screenscrolls sind das 14-fache (NICCOS: 3.360 px angezeigt auf 240 px Rahmen, nativ 1200 x 6931) - eine Rahmenhoehe waeren 218 px und damit 6 % der Aufnahme, praktisch kein Bild. Der Weg bleibt deshalb bei 1.200 px, aus 20 s werden bei gleichem Tempo 3,87 s. Linear, nicht ease: ueber 3,87 s wuerde `ease` in der Mitte deutlich ueber 310 px/s hinausschiessen. Die Referenz kommt bei 1 s Dauer mit ease auf dasselbe Gefuehl. Der Vorlauf von 100 ms ist der eigentliche Gewinn: wer mit dem Zeiger nur ueber die Karte streift, loest nichts aus. ------------------------------------------------------------ */ .browser-bild img { transition: transform 300ms ease; } .fall:hover .browser-bild img, .fall:focus-within .browser-bild img { transform: translateY(-1200px); transition: transform 3870ms linear 100ms; } @media screen and (max-width: 767px) { /* Rahmen ist hier 200 px, Weg 700 px - dasselbe Tempo: 700 / 2,26 s. */ .fall:hover .browser-bild img, .fall:focus-within .browser-bild img { transform: translateY(-700px); transition: transform 2260ms linear 100ms; } } /* Muss NACH den Regeln oben stehen: die Sperre in marcy.css kommt aus einer frueheren Datei und hat dieselbe Spezifitaet - ohne diese Wiederholung liefe der Schwenk trotz „Bewegung reduzieren" wieder an. */ @media (prefers-reduced-motion: reduce) { .fall:hover .browser-bild img, .fall:focus-within .browser-bild img { transform: none; transition: none; } } /* ============================================================ Abschluss linksbuendig - nur v2 marcy.css setzt .abschluss auf `align-items: center` und `text-align: center`. Das gilt fuer den Bestand weiter; hier wird es nur fuer den One-Pager zurueckgenommen. Deshalb steht die Regel in dieser Datei und nicht drueben: gleiche Spezifitaet, spaeter geladen, gewinnt. Die Breitengrenzen bleiben (h2 900, Vorlauftext 640) - sie halten die Zeilenlaenge, unabhaengig von der Ausrichtung. ============================================================ */ .abschluss { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: start; text-align: left; } /* Explizite Platzierung statt Auto-Fluss: im Markup steht das Foto VOR der Namenszeile (so braucht die zentrierte v1-Fassung keine Sonderregel). Ohne feste Zuweisung landete es damit in Zeile 1 Spalte 1 und schoebe den Text nach unten. */ .abschluss-foto { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 168px; height: 168px; } .abschluss h2 { grid-column: 1; grid-row: 1; margin-top: 0; max-width: none; } .abschluss .t-lead { grid-column: 1; grid-row: 2; margin-top: 18px; max-width: 620px; } .abschluss-knoepfe { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 30px; } /* Unter 860 px ist neben der Ueberschrift kein Platz mehr fuer 168 px Bild: einspaltig, Foto zurueck nach oben und auf 96 px. */ @media screen and (max-width: 859px) { .abschluss { grid-template-columns: 1fr; row-gap: 0; } .abschluss-foto { grid-column: 1; grid-row: 1; width: 96px; height: 96px; } .abschluss h2 { grid-row: 2; margin-top: 22px; } .abschluss .t-lead { grid-row: 3; } .abschluss-knoepfe { grid-row: 4; } } /* Der mausfolgende Neonschein (`.leuchten-punkt` aus marcy.css) laeuft in v2 MIT - am 11.8. war er hier kurz abgeschaltet, das ist zurueckgenommen. Anlass der Abschaltung war die graue Namenszeile im Abschluss, die unter dem Schein stand; die Zeile selbst ist inzwischen geloescht. Der bekannte Wert bleibt trotzdem stehen: grauer Fliesstext #6B6B69 kommt auf voller Neonflaeche nur auf 4,42:1. Deshalb ist der Spitzenwert in marcy.css auf 0,45 Alpha gedeckelt und weich ausgeblendet - nicht aus Geschmack, sondern damit der Text darunter lesbar bleibt. Wer den Punkt kraeftiger stellt, reisst AA. */ /* ------------------------------------------------------------ 9 · Neon-Phase - der SEITENGRUND wechselt, nicht die Sektion Marcels Ansage (11.8.), Vorbild soenkesproll.de/#fallstudien: nach den vier Schritten faehrt der Grund auf Neon. DREI Fassungen, weil zwei falsch waren: 1. Nur `#referenzen` faerben - harte Kante gegen die greige Ablauf-Sektion darueber. Ein Farbwechsel kann noch so weich fahren, wenn er an einer Sektionsgrenze endet, ist er ein Sprung. 2. Ablauf UND Referenzen auf Greige - dann tragen beide denselben Grund, aber Greige stieg auf **47,9 %** der Seitenhoehe. `marcy-ci.json -> layout.sectionRhythm.greigeCap` deckelt 25 %. Referenzen ist mit 2.082 px die hoechste Sektion der Seite, greige sprengt den Deckel sofort. 3. Gebaut: Ablauf UND Referenzen auf **Weiss**, `#preise` bleibt greige. Greige liegt damit bei **19,1 %** und unter dem Deckel. Nichts ist schwarz geworden. Neue Folge: weiss · greige · weiss · weiss · weiss · greige · weiss Warum das den Effekt sauber macht: `.sektion` ist in marcy.css schon `background: transparent`, damit das Leuchten durchscheint - den Grund traegt der `body`. Weisse Sektionen sind also Fenster auf den Body. Faehrt der Body auf Neon, faehrt der ganze sichtbare Grund mit, ueber Sektionsgrenzen hinweg. Es gibt keine Kante, weil es keine zweite Flaeche gibt. Preis dafuer: drei weisse Sektionen am Stueck (Leistungen, Ablauf, Referenzen), ohne sichtbare Grenze. Das ist gewollt - eine Linie mitten durch die Neonflaeche haette den Zweck des Umbaus wieder aufgehoben. Dauer 400 ms ease-out - layout.motion.reveal in marcy-ci.json, der Wert fuer „erscheint beim Scrollen". Vier Begleitregeln, gerechnet statt geschaetzt: – `--grau #6B6B69` erreicht auf Neon nur **4,40:1** und faellt unter AA (auf Weiss 5,34:1). Vorlauf- und Schritttexte gehen auf `--ink`: 14,34:1. – Haarlinien `--rahmen #DCDAD6` kommen auf Neon auf **1,15:1**, schwaecher als auf Weiss (1,40:1). Sie gehen auf `--chrome`: 1,43:1 - dieselbe Sichtbarkeit wie auf Weiss. Derselbe Griff wie bei Greige (hairlineOnGreige). Betrifft die `.linie` im Ablauf; Sektionskanten tragen keine Linie mehr. – Die Schrittziffern tragen in der Phase `--neon-hover` #BEE800, also Ton in Ton wie im Vorbild, mit Ink-Ziffer darauf. Details bei der Regel selbst. – Ausserhalb der Phase bleibt es bei den Regeln aus marcy.css: erreicht neon, offen weiss mit Ring in `--chrome`. Die kurz eingebaute Greige-Fuellung ist wieder raus, Begruendung an der Stelle selbst. ------------------------------------------------------------ */ body { transition: background-color 400ms ease-out; } /* 240 ms Vorlauf, nur beim Hereinfahren. Erst 120 ms (layout.motion.hover), auf Marcels Ansage verdoppelt auf den naechsten Wert, den das System fuehrt: marcy-ci.json -> layout.motion.accordion, 240 ms. Weiter oben gibt die Leiter nichts her - danach kaeme 400 ms, und das ist schon die Dauer des Farbwechsels selbst. Nur beim Hereinfahren, weil die Verzoegerung an DIESER Regel haengt: wird die Klasse gesetzt, gilt sie; wird sie entfernt, gilt wieder die Grundregel darueber mit Vorlauf null. Der Grund kommt also mit Anlauf und geht ohne Nachhang. Umgerechnet sind 240 ms bei ueblichem Scrolltempo (rund 1.000 px/s) etwa 240 px Weg - fast so viel wie die 293 px Layoutluecke, die am 11.8. gerade beseitigt wurde. Der Unterschied: die Luecke war Leerraum im Bild, das hier ist Zeit. Wer langsam scrollt, sieht den Wechsel weiter direkt an Stufe IV; wer schnell scrollt, sieht ihn spaeter. Bei noch groesseren Werten kippt das in „reagiert nicht" - das ist die Grenze, nicht der Geschmack. */ body.is-neon-phase { background: var(--neon); transition-delay: 240ms; } /* KEINE Haarlinie an den Grenzen. Am 11.8. kurz eingebaut, damit die drei weissen Sektionen am Stueck auseinander zu halten sind - auf Marcels Ansage wieder raus. Auf der Neonflaeche zog sie einen Strich quer durch eine Flaeche, die als eine gelesen werden soll, und genau das war der Zweck des ganzen Umbaus. Die Sektionen trennt jetzt nur noch ihr Abstand. Weil sie EINE Flaeche sind, addieren sich am Uebergang auch nicht zwei Polster: voller Abstand unten am Ablauf plus voller Abstand oben an den Referenzen waeren zwei Sektionsgrenzen zwischen Stufe IV und „Meine Referenzen". Beide gehen deshalb auf die HALBE Basis - zusammen also genau die eine Grenze, die dort hingehoert. Die Aussenkanten behalten sie voll. Als `calc` an `--sektion` gebunden und nicht mehr fest auf 48 px: Am 11.8. ist die Basis von 96 auf 72 px gekuerzt, und ein fester Wert waere dabei stehengeblieben. So zieht die Kopplung bei jeder weiteren Aenderung mit. */ #ablauf { padding-bottom: calc(var(--sektion) / 2); } #referenzen { padding-top: calc(var(--sektion) / 2); } /* HIER STAND EINE GREIGE-FUELLUNG FUER DIE ZIFFERN - am 11.8. wieder raus. Sie sollte die offenen Kreise auf dem neuen weissen Grund sichtbar halten, traf aber auch die ERREICHTEN: die tragen aus marcy.css einen neonen Ring, und mit greiger Fuellung darin sah das nach Fehler aus. Marcels Ansage: der Kreis ist neon. Es braucht keinen Ersatz. marcy.css regelt beide Zustaende schon richtig, auch auf Weiss: – erreicht: Neonfuellung, Neonring, Ziffer in Ink (14,34:1) – offen: weisse Fuellung, Ring in `--chrome` (1,74:1 auf Weiss - dieselbe Groessenordnung wie die Haarlinien der Sektionen), Ziffer grau Der Ring traegt die Form, die Fuellung muss das nicht leisten. */ /* Kontrast in der Phase: alles, was direkt auf der Flaeche steht, auf Ink. Text in den weissen Fallkarten bleibt unberuehrt. */ body.is-neon-phase #ablauf .t-lead, body.is-neon-phase #ablauf .ablauf-text p, body.is-neon-phase #referenzen > .raster > .t-lead { color: var(--ink); } body.is-neon-phase #ablauf .linie { background: var(--chrome); } /* Ziffernkreise Ton in Ton, Marcels Ansage nach dem Vorbild: dort steht das „IV" in einem etwas anderen Blau als der Grund, nicht in einer Fremdfarbe. Hier also `--neon-hover` #BEE800 auf `--neon` #CEFA05 - der Schritt, den die CI fuer Neon ohnehin fuehrt, keine neue Farbe. Kein Rahmen: die Referenz setzt die Form auch nur ueber den Ton. Gemessen: `--neon-hover` auf Neon **1,17:1** (Referenz: ihr Blau auf Blau 1,51:1 - sie ist also einen Hauch deutlicher). Die ZIFFER darauf ist Ink und kommt auf **12,21:1**; die Lesbarkeit haengt an ihr, nicht am Kreis. Alle vier Kreise gleich. Welcher Schritt dran ist, tragen weiter das Abblenden auf 45 % und die wachsende Fortschrittslinie in Ink. */ body.is-neon-phase #ablauf .ablauf-ziffer { background: var(--neon-hover); border-color: transparent; color: var(--ink); } /* marcy-ci.json layout.motion.reducedMotion: „setzt alle Dauern auf 0.01ms. Nicht optional." Die Farbe bleibt, nur das Aufblenden faellt weg. */ @media (prefers-reduced-motion: reduce) { body { transition-duration: 0.01ms; } /* Auch der Vorlauf faellt weg - sonst bleibt eine Wartezeit ohne Bewegung, also das Schlechteste aus beidem. */ body.is-neon-phase { transition-delay: 0s; } } /* ============================================================ § 12 Navigation - kein Umbruch im Link Vorgeschichte: V2 trug kurzzeitig fünf Menüpunkte statt vier in V1. Gemessen am 11.8. bei 1.100, 1.024 und 992 px stand „Über mich" dadurch zweizeilig (Linkhöhen 19 UND 38 px) und die Pille wurde ungleich hoch. Ich hatte den Abstand in diesem Bereich auf 18 px gedrückt. Am selben Tag ist „Preise" auf Marcels Ansage aus dem Kopf heraus - der Abschnitt bleibt, der Menüpunkt geht, der Fuss verlinkt ihn weiter. Damit stehen wieder vier Punkte da und der Abstand aus marcy.css (28 px) trägt von allein. Die Sonderregel ist entfallen; die Nav ist jetzt 1:1 wie in V1. `nowrap` bleibt als Sicherung stehen: es kostet nichts und fängt den Fall ab, dass später wieder ein Punkt dazukommt. ============================================================ */ .nav-link { white-space: nowrap; } /* ============================================================ § 13 Fuss MIT Abschluss Marcels Ansage am 11.8. nach dem Vorbild soenkesproll.de: der Abschlussblock gehört in den Fuss, nicht darüber. Vorher standen zwei Blöcke mit demselben Auftrag untereinander - eine weisse Sektion („Lass uns 20 Minuten sprechen") und direkt darunter der schwarze Fuss mit denselben Wegen. Die weisse Sektion trug 480 px Höhe für einen Knopf, den der Fuss ohnehin hätte tragen können. Jetzt ein Block: Ansprache links, Wege rechts, Abbinder unten. Das spart rund 400 px Seitenhöhe und stellt den Abschluss dorthin, wo beim Runterscrollen ohnehin Schluss ist. Das Portrait ist entfallen (Marcels Freigabe) - es stand als zweites Bild derselben Person auf der Seite und hätte den Block neben drei Spalten überladen. ============================================================ */ /* 72 statt 96 oben, und der Abbinder rueckt naeher (Marcels Ansage: „Fuss schmaler"). Der Block traegt jetzt eine einzeilige H2 statt einer dreizeiligen - die Hoehe faellt dadurch von rund 730 auf rund 520 px. */ .fuss-mit-cta { padding-top: 72px; padding-bottom: 56px; } .fuss-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; /* 56 statt 80: gemessen am 11.8. blieben der linken Spalte bei 1.440 px nur 583 px, Headline plus Knopf brauchen aber 601 - der Knopf brach unter die Headline, genau das, was hier weg sollte. Die 24 px kommen aus diesem Abstand. */ column-gap: 56px; align-items: start; } /* Headline und Knopf NEBENEINANDER auf einer Grundlinie (Marcels Vorschlag 11.8.: „CTA neben Headline und Logo dann drunter"). Das spart die Zeile, die der Knopf vorher unter der Headline belegte. Kein max-width mehr: die Zeile misst bei 1.440 px rund 600 px und braucht den Platz, den ihr das Raster ohnehin gibt. Wird es eng, bricht der Knopf ueber `flex-wrap` unter die Headline - derselbe Zustand wie vorher, nur eben erst dann. */ .fuss-cta-text { display: flex; align-items: center; flex-wrap: wrap; column-gap: 28px; row-gap: 22px; } .fuss-cta-text .t-h2 { margin: 0; } /* Seit dem 11.8. traegt der Fuss NUR die Headline und EINEN Knopf - kein Lead, keine Linie, keine Inhaberzeile (Marcels Ansage). Weil die Zeile allein steht und kurz ist, darf sie gross sein: 44 px, gegen 40 im Fliesstext. Das ist die einzige Stelle, an der eine H2 die Skala nach oben verlaesst - sie hat hier auch nichts neben sich. */ .fuss-mit-cta .t-h2 { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; } /* t-h2 und t-lead stehen sonst auf Weiss und tragen Ink. Hier nicht. */ .fuss-mit-cta .t-h2 { color: var(--weiss); } .fuss-cta .abschluss-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; /* 0: der Knopf steht neben der Headline, nicht darunter. */ margin-top: 0; } /* 32 statt 56 zwischen den Spalten. Gemessen am 11.8.: die drei Spalten belegten 533 px, der linken Zeile blieben 611 - sie braucht 635. Weil `.raster` bei 1.200 px deckelt, half auch ein breiteres Fenster nicht; bei 1.600 px stand dieselbe Zahl. Die fehlenden Pixel kommen aus diesem Abstand, nicht aus der Schriftgroesse: die Headline soll gross bleiben. */ .fuss-spalten { display: grid; grid-template-columns: repeat(3, auto); column-gap: 32px; } /* Abbinder: Marke links, Zeile rechts - beide auf einer Grundlinie. */ /* Der Abbinder ist am 11.8. ganz entfallen - erst die Haarlinie, dann die Inhaberzeile, zuletzt der ganze Block (Marcels Ansage: „Logo sieht so alleine aus und nimmt unnoetig Platz weg"). Die Marke steht jetzt klein am Ende der CTA-Spalte, der Claim gar nicht mehr: er ist woertlich die H1 der Seite und stand im Fuss ein zweites Mal. 22 px hoch - dieselbe Groessenordnung wie in der Nav-Pille (30 px), aber eine Stufe leiser, weil die Marke hier nur noch abbindet. */ /* Marke und Slogan nebeneinander (Marcels Ansage 11.8.: „Logo vielleicht groesser? und daneben den Slogan"). Der Slogan war am selben Tag kurz ganz raus - allein unter dem Block wiederholte er nur die H1. NEBEN der Wortmarke liest er sich als das, was er ist: die Zeile zur Marke. Explizit Zeile 2, Spalte 1 - nicht dem Auto-Placement ueberlassen. Der Unterschied ist sichtbar: laesst man das Raster selbst verteilen, spannt Zeile 1 bis zur Unterkante der VIER Navigationseintraege und die Marke rutscht 140 px unter die Headline. */ .fuss-marke { grid-column: 1; grid-row: 2; margin-top: 44px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; } /* 32 statt 22 px - zwei Stufen ueber der Nav-Pille (30 px) waere zu laut, darunter verschwaende sie. Die Wortmarke bleibt die Datei, nie Text (marcy-ci.json, harte Regel 5). */ /* `.fuss-marke .fuss-logo`, nicht `.fuss-logo`: marcy.css Zeile 847 setzt `.fuss-marke img { height: 26px }` - Klasse plus Element schlaegt eine Klasse allein. Gemessen kamen sonst 26 px statt der gesetzten 32 an. */ .fuss-marke .fuss-logo { display: block; height: 32px; width: auto; } /* marcy.css setzt hier margin-top: 16px fuer den gestapelten Fall. */ .fuss-marke .fuss-claim { margin-top: 0; font-size: 15px; } /* Die Spalten spannen beide Zeilen, sonst zoege Zeile 1 sie in die Hoehe. */ .fuss-spalten { grid-column: 2; grid-row: 1 / span 2; } /* Einspaltig schon ab 1.100, nicht erst ab 992. Gemessen am 11.8.: bei 992 px blieben der Ansprache neben den drei Spalten nur noch rund 320 px - die H2 lief auf drei Zeilen, der Lead auf sechs. Genau das, was hier weg sollte. */ /* Einspaltig unter 1.440 px - nicht erst unter 1.100. Gemessen am 11.8.: die Zeile „Headline + Knopf" braucht 635 px. Weil `.raster` bei 1.200 px deckelt und die drei Spalten 485 px halten, hat die linke Spalte NUR bei 1.440 px genug Platz (659 px). Darunter brach der Knopf unter die Headline, die linke Haelfte wurde bis zu 83 px hoeher als die rechte - genau die Unwucht, die weg sollte. Also: entweder beide Haelften stehen sauber nebeneinander, oder alles steht untereinander. Kein Zwischending. */ @media screen and (max-width: 1439px) { .fuss-cta { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } /* Einspaltig faellt die feste Platzierung weg: alles steht untereinander, das Logo als letztes. Den Abstand traegt dann der row-gap des Rasters. */ .fuss-spalten { grid-column: 1; grid-row: auto; justify-content: start; column-gap: 56px; } .fuss-marke { grid-column: 1; grid-row: auto; margin-top: 0; } } /* „Lass uns loslegen." stand auf dem Rechner auf t-h2 (40 px) und damit auf derselben Stufe wie die Sektionsueberschriften der Seite. Der Fuss schliesst ab, er eroeffnet nicht - deshalb eine Stufe leiser. Auf dem Telefon steht die Zeile aus demselben Grund auf 26 (Block weiter unten). */ .fuss-mit-cta .t-h2 { font-size: 34px; } @media screen and (max-width: 767px) { .fuss-mit-cta { padding-top: 56px; padding-bottom: 48px; } /* 32 → 26. Die Zeile stand damit GROESSER als die Sektionstitel der Seite (28 px) und las sich auf dem Telefon wie die Headline der Seite statt wie ihr Abschluss (Marcels Rueckmeldung 11.8.). 26 setzt sie eine Stufe darunter - sie schliesst ab, sie eroeffnet nicht. Auf dem Rechner bleibt die Groesse unveraendert. */ .fuss-mit-cta .t-h2 { font-size: 26px; } /* marcy.css setzt den Claim im Fuss auf dem Telefon auf 14 px; hier stand er als `.fuss-marke .fuss-claim` mit hoeherer Spezifitaet auf 15 und hat das ueberstimmt. */ .fuss-marke .fuss-claim { font-size: 14px; } .fuss-spalten { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 32px; } .fuss-cta .abschluss-knoepfe .btn { width: 100%; justify-content: center; } } /* ============================================================ § 14 Burger-Menü (Marcels Ansage 11.8.) Vorher gab es unter 992 px ÜBERHAUPT KEINE Navigation: `marcy.css` setzt dort `.nav-links { display: none }` - ohne Ersatz. Auf dem Telefon standen nur Wortmarke und Knopf, die vier Menüpunkte waren schlicht nicht erreichbar. Das Blatt fährt von RECHTS ein. Der Erstgespräch-Knopf wandert mit hinein: in der Pille wird es auf 375 px sonst zu eng (Wortmarke + Knopf + Burger passen nicht nebeneinander). Genau EINE Neonfläche im offenen Menü: der Knopf am Fuss. ============================================================ */ .burger { display: none; width: 44px; height: 44px; /* 44 px Mindestziel, WCAG 2.5.8 */ padding: 0; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; border-radius: 50%; } /* Drei Striche, der mittlere kuerzer (Marcels Vorlage 11.8.). Die ungleiche Laenge macht das Zeichen unverwechselbar - mit drei gleichen Strichen sieht es aus wie jedes andere Menue. */ .burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform 220ms ease, opacity 160ms ease, width 220ms ease; } .burger span + span { margin-top: 4.5px; } .burger span:nth-child(2) { width: 14px; } /* Der Burger sitzt rechts in der Pille - also waechst der kurze Strich nach LINKS, buendig mit den anderen. Ohne das haengt er in der Luft. */ .burger { flex-direction: column; align-items: flex-start; } /* Offen: der mittlere blendet aus, die aeusseren kreuzen sich. 6 px ist der Weg zur Mitte: Strichhoehe 1,5 plus Abstand 4,5. */ .burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 20px; } .burger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); } /* Der Grund liegt UNTER dem Blatt und schliesst bei Klick. z-index 110/111 statt 90/91: `.nav-halter` liegt in marcy.css auf 100. Bei 90/91 schwebte die Pille MIT Wortmarke und Burger ueber dem offenen Blatt - am 11.8. im Bild gesehen. Beide muessen darueber. */ .menue-grund { position: fixed; inset: 0; z-index: 110; background: rgba(26, 26, 26, 0.45); opacity: 0; transition: opacity 260ms ease; } .menue-grund.is-auf { opacity: 1; } .menue { position: fixed; top: 0; right: 0; bottom: 0; z-index: 111; width: min(86vw, 380px); background: var(--weiss); box-shadow: -8px 0 40px rgba(26, 26, 26, 0.14); padding: 24px var(--rand-klein, 28px) 32px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 300ms cubic-bezier(.22,.61,.36,1); overflow-y: auto; } .menue.is-auf { transform: translateX(0); } /* Das `hidden`-Attribut wieder wirksam machen. `.menue` und `.menue-grund` setzen `display: flex` bzw. `block` - beides schlaegt das Attribut, und das geschlossene Blatt stand dann mit `translateX(100%)` 275 px RECHTS AUSSERHALB im Layout. Gemessen am 11.8. bei 320 px Fensterbreite: `scrollWidth` 357 statt 320, die Seite liess sich seitlich wegschieben. Das JS setzt `hidden` beim Oeffnen auf false und beim Schliessen zurueck (marcy-v2.js), diese Regel greift also nur im geschlossenen Zustand. */ .menue[hidden], .menue-grund[hidden] { display: none; } .menue-kopf { display: flex; justify-content: flex-end; margin-bottom: 20px; } .menue-zu { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); } .menue-liste { display: flex; flex-direction: column; } .menue-liste a { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--rahmen); } .menue-liste a[aria-current="page"] { color: var(--grau); } .menue-fuss { margin-top: 28px; } .menue-fuss .btn { width: 100%; justify-content: center; } @media screen and (max-width: 991px) { .burger { display: flex; } /* Der Knopf steht jetzt im Blatt, nicht mehr in der Pille. */ .nav-kontakt { display: none; } } @media screen and (min-width: 992px) { /* Auf dem Schreibtisch existiert das Blatt nicht - auch nicht fuer Tastatur oder Vorlesesoftware. */ .menue, .menue-grund { display: none; } } /* Wenn das Blatt offen ist, scrollt die Seite dahinter nicht mit. */ body.menue-offen { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .menue, .menue-grund, .burger span { transition-duration: 0.01ms; } } /* ============================================================ § 15 Ablauf - Doppelstrich auf Mobil Marcels Befund 11.8.: unter 768 px stehen ZWEI versetzte Striche untereinander. Ursache in marcy.css: die Linie besteht aus zwei Lagen - `::before` ist die graue Grundlinie, `::after` die schwarze Fortschrittsfüllung. Beide teilen sich auf dem Schreibtisch dieselbe Regel (`left: 27px; top: 56px; bottom: -40px`). Der Mobil-Block ab Zeile 1244 rückt aber NUR `::before` auf die kleinere Ziffer (`left: 21px; top: 44px; bottom: -32px`). `::after` blieb auf den Desktop-Werten stehen - 6 px daneben und 12 px zu hoch. Genau der zweite Strich. Hier bekommen beide Lagen dieselben Werte. ============================================================ */ @media screen and (max-width: 767px) { .ablauf-schritt:not(:last-child)::before, .ablauf-schritt:not(:last-child)::after { left: 21px; top: 44px; bottom: -32px; } } /* ============================================================ § 16 Keine Hover-Zustände auf Touch Marcels Ansage 11.8.: „den Mouse-Over-Effekt in Mobile entfernen, macht keinen Sinn." Er hat recht, und es ist mehr als kosmetisch: auf einem Touchgerät gibt es kein Verlassen des Elements. Der Zustand bleibt nach dem Antippen HÄNGEN - die Karte steht dann dauerhaft 8 px hoch, bis irgendwo anders hingetippt wird. `hover: none` trifft Touch, ohne an der Fensterbreite zu hängen: ein schmales Fenster auf dem Schreibtisch behält seinen Hover, ein breites Tablet verliert ihn. ============================================================ */ @media (hover: none) { .karte.is-hebt:hover, .paket:hover, .paket:focus-within, .thema:hover, .projekt:hover, .projekt:focus-within { transform: none; } .btn:hover { background-color: inherit; } .btn.is-primaer:hover { background: var(--neon); } .btn.is-sekundaer:hover { background: transparent; color: var(--ink); } .btn.is-sekundaer.is-hell:hover { background: transparent; color: var(--weiss); } } /* ============================================================ § 17 Schieber auf Mobil - Leistungen und Preise Marcels Ansage 11.8.: „nicht 6 Reihen und nur eine genutzt." Gemeint ist der Platz: auf 375 px standen die sechs Leistungskarten als sechs volle Reihen untereinander und die drei Preiskarten ebenso. Das waren allein dort rund 2.900 px Scrollweg für Inhalt, der nebeneinander gehört. Jetzt eine Schiene, die seitlich läuft - mit Fangpunkten, damit sie nicht zwischen zwei Karten stehen bleibt. Die Pfeile sind ZUSÄTZLICH: gewischt werden kann ohnehin, und wer eine Maus oder Tastatur hat, kommt über die Knöpfe weiter. Auf dem Schreibtisch ändert sich nichts - dort bleibt das Raster. ============================================================ */ .schieber-kopf { display: none; } @media screen and (max-width: 767px) { .bento.is-schiene, .pakete.is-schiene, .reihe-3.is-schiene { display: flex; grid-template-columns: none; /* das Raster ausser Kraft */ overflow-x: auto; /* `proximity` statt `mandatory`, und KEIN `scroll-behavior: smooth`. Beides gemessen am 11.8.: mit `mandatory` faengt der Fangpunkt jeden programmatischen Lauf sofort zurueck - weder scrollBy({smooth}) noch ein direkt gesetztes scrollLeft bei aktivem scroll-behavior bewegten die Schiene auch nur einen Pixel (scrollLeft blieb auf 20 bzw. 0). Mit `proximity` faengt sie beim Wischen weiterhin sauber, laesst den Pfeilen aber ihren Weg. */ scroll-snap-type: x proximity; /* Die Schiene laeuft von Kante zu Kante, die KARTEN aber nicht: der negative Aussenabstand hebt den Rasterrand auf, der Innenabstand setzt ihn fuer die Karten wieder. Erste und letzte Karte stehen damit genau auf derselben Linie wie Ueberschrift und Vorlauftext. `scroll-padding-inline` ist der Teil, der am 11.8. gefehlt hat: ohne ihn faengt der Snap-Punkt die Karte an der Fensterkante statt am Rasterrand - die erste Karte klebte nach dem ersten Wischen links an, waehrend rechts der volle Rand stand. */ margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scroll-padding-inline: var(--rand); gap: 16px; scrollbar-width: none; /* Firefox */ -webkit-overflow-scrolling: touch; } .bento.is-schiene::-webkit-scrollbar, .pakete.is-schiene::-webkit-scrollbar, .reihe-3.is-schiene::-webkit-scrollbar { display: none; } .bento.is-schiene > .karte, .pakete.is-schiene > .paket, .reihe-3.is-schiene > .karte { flex: 0 0 82%; scroll-snap-align: start; /* Der Sonderfall „grosse Kachel" gilt nur im Raster. In der Schiene laufen alle sechs gleich breit - sonst spränge die Fangweite. */ grid-column: auto; grid-row: auto; } .bento.is-schiene > .karte.is-gross h3 { font-size: 22px; } /* Die zwei Pfeilknoepfe ueber der Schiene sind am 11.8. entfallen (Marcels Ansage: „einfacher Swipe-Effekt reicht"). Sie kosteten 44 px Knopfhoehe plus 16 px Abstand - also 60 px Leere zwischen Vorlauftext und erster Karte, und zwar in jeder der beiden Schienen. Dass gewischt werden kann, zeigt die angeschnittene zweite Karte (`flex: 0 0 82%`) deutlich genug. WICHTIG, damit „Swipe reicht" auch ohne Finger gilt: die Schiene traegt im HTML `tabindex="0"` und ist damit per Tastatur scrollbar. Ohne das waeren die Karten fuer Tastaturnutzer nicht erreichbar, sobald die Knoepfe weg sind. */ .schieber-kopf { display: none; } } @media (prefers-reduced-motion: reduce) { .bento.is-schiene, .pakete.is-schiene, .reihe-3.is-schiene { scroll-behavior: auto; } } /* ============================================================ Hero: wechselnde zweite Zeile mit Neonmarkierung Neon als FLAECHE mit schwarzer Schrift - 14,34:1, so verlangt es color.rules. Nie umgekehrt. `box-decoration-break: clone` ist Pflicht: bricht die Zeile um, bekaeme der zweite Teil sonst keinen eigenen Anfang und die Flaeche liefe als ein durchgehender Balken ueber den Rand. Die Markierung liegt auf dem WECHSELNDEN Teil, „Ohne" bleibt unmarkiert. So zeigt die Flaeche, was sich aendert. ============================================================ */ .tipp { white-space: nowrap; } /* Platz fuer die LAENGSTE Botschaft dauerhaft reservieren. Ohne das springt die Ueberschrift bei jedem Wechsel und schiebt Vorlauftext, Knopf und Kennzahlenzeile mit. 2,16em sind exakt zwei Zeilen (Zeilenhoehe 1,08). In `em`, damit der Wert die clamp-Groesse der H1 mitnimmt. Stand 11.8. reicht das, weil KEINE der fuenf Botschaften laenger ist als 15 Zeichen („deinen Aufwand."). Gemessen: bis 16 Zeichen bleibt die Zeile zweizeilig, ab 18 bricht sie um - dann waeren wieder 3,24em noetig und der Hero 77 px hoeher. **Wird eine Botschaft laenger, diesen Wert nachrechnen.** Liste in marcy-v2.js. */ .hero-text h1 { min-height: 2.16em; } @media screen and (max-width: 767px) { /* Schmaler brechen die Zeilen ohnehin anders; eine feste Mindesthoehe erzeugt dort nur Leere unter der Ueberschrift. */ .hero-text h1 { min-height: 0; } } .tipp-text { background: var(--neon); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.09em; } /* Schreibmarke. `step-end` statt weichem Verlauf: ein Cursor blinkt, er blendet nicht. */ .tipp-strich { display: inline-block; width: 0.055em; height: 0.78em; margin-left: 0.08em; vertical-align: -0.04em; background: var(--ink); animation: tippstrich 1.05s step-end infinite; } @keyframes tippstrich { 0%, 100% { opacity: 1 } 50% { opacity: 0 } } /* Ohne Bewegung steht der Claim still und ohne Schreibmarke - die Zeile ist Marke, keine Animation. */ @media (prefers-reduced-motion: reduce) { .tipp-strich { display: none; } } .no-js .tipp-strich { display: none; } /* ============================================================ § 18 Hero-Vorlauf auf Mobil kuerzen Marcels Ansage 11.8.: der Fokus gehoert auf „Deine Website. Ohne deinen Aufwand." Gemessen standen auf 375 px rund 200 px Leerraum zwischen Nav-Pille und Portrait - die Headline begann erst bei 42 % der Fensterhoehe. ============================================================ */ @media screen and (max-width: 767px) { .sektion.hero { padding-top: 24px; } } /* ============================================================ § 19 Kurzfassung des Vorspanns auf Mobil Marcels Ansage 11.8.: „man muss die Logos sehen im Viewport." Der volle Vorspann lief auf 375 px über VIER Zeilen und schob die Kundenlogos aus dem ersten Bildschirm. Die kurze Fassung lässt den Google-Eintrag und die ausformulierte Wochenangabe weg - beides steht weiter unten in den Leistungen und in den Fragen. Kein verstecktes Zusatzwort: beide Fassungen sind echter Inhalt, je nach Fensterbreite sichtbar. ============================================================ */ .nur-klein { display: none; } @media screen and (max-width: 767px) { .nur-gross { display: none; } .nur-klein { display: inline; } } /* ============================================================ § 20 Hero auf Mobil straffen, Headline grösser Marcels Ansage 11.8.: „viel kompakter und ersten zwei Sätze grösser." Gemessen bei 375 px waren allein die LÜCKEN 218 px hoch: Vorspann 28 + 20 Rastergang, Kennzahlen 40 + 20, Logo-Zeile 48 + 20, dazu 24/44 Sektionspolster. Die Abstände stammen aus der Schreibtischfassung, wo sie in einer 804-px-Spalte richtig sitzen - auf 335 px sind sie doppelt so gross wie nötig. Die H1 wächst von 30 auf 36 px und läuft dadurch dreizeilig („Deine Website. / Ohne deinen / Aufwand."). Das kostet 54 px, die Straffung bringt rund 100 - netto bleibt es kompakter. ============================================================ */ @media screen and (max-width: 767px) { .sektion.hero { padding-top: 16px; padding-bottom: 32px; } .hero-raster { row-gap: 14px; } /* ZWEI Zeilen, immer - Marcels Ansage vom 11.8. Die vorherige Fassung stand auf 36 px fest und reservierte den Platz fuer drei Zeilen; die kurzen Botschaften liessen dann eine Zeile leer. Jetzt umgekehrt: die Schrift wird so weit gedeckelt, dass die LAENGSTE Botschaft in zwei Zeilen passt. Gemessen bei 357 px Fenster (Spalte 280 px), „Ohne deinen Aufwand." in Inter 600: 320 px Fenster (280 px Spalte) → bis 26 px zweizeilig 375 px Fenster (335 px Spalte) → bis 30 px 430 px Fenster (390 px Spalte) → bis 36 px Daraus `clamp(28px, 9vw, 42px)`: bei 375 px sind das 30 px, bei 430 px 34,4 px - jeweils der groesste Wert, der noch zweizeilig bleibt. Am 11.8. von 7,4vw angehoben (Marcels Ansage „H1 groesser"). Bei 320 px liegt 26 px GENAU auf der Grenze, ohne Reserve. Wer die Untergrenze anhebt, bekommt dort drei Zeilen. `min-height` auf zwei Zeilen haelt das Layout still, waehrend getippt und geloescht wird. Der Hinweis in marcy-v2.js („keine Botschaft ueber 15 Zeichen") gilt weiter und ist hier die eigentliche Bedingung - wird eine Botschaft laenger, reicht auch 25 px nicht mehr. */ .hero-raster .t-h1 { font-size: clamp(28px, 9vw, 42px); line-height: 1.12; min-height: calc(2 * 1.12em); } .hero-raster .hero-lead { margin-top: 10px; } .hero-raster .hero-zahlen { margin-top: 14px; } .hero-raster .logo-zeile { margin-top: 22px; } } /* ============================================================ Hero-Portrait: oben an der Überschrift, nicht zentriert Drei Fassungen an einem Tag, hier die Begründung der letzten: 1. `align-items: center` der ganzen Textspalte - das Bild lag auf Höhe von Vorlauftext und Knopf (Mitte 396 px gegen 264 px der H1). 2. Mitte auf die H1-Mitte gerechnet (`margin-top: -82px`, 320 px). Damit begann das Bild bei 104 px - ZEHN PIXEL ÜBER der Sektionskante (114 px), es ragte oben heraus. Unten blieben 182 px Leere neben Knopf und Kennzahlen. 3. Oben bündig mit der Überschrift, 380 px - flankierte den ganzen Textblock (186–606) statt nur dessen obere Hälfte. 4. Jetzt 340 px (Marcels Ansage 11.8., „etwas kleiner"). Das Bild läuft von 190 bis 530 px; unter ihm bleiben 76 px bis zum Ende der Textspalte, was auf Höhe der Kennzahlenzeile ausläuft. Der Vorteil gegenüber Fassung 2 ist nicht nur optisch: `margin-top: 4px` ist ein FESTER kleiner Wert statt einer Rechnung aus H1- und Bildhöhe. Ändert sich die Größe der Überschrift, bleibt das Bild oben bündig - es muss nichts nachgerechnet werden. Nur ab 992 px. Darunter steht das Raster einspaltig. ============================================================ */ @media screen and (min-width: 992px) { .hero-raster { align-items: start; } .hero-bild { width: 340px; margin-top: 4px; } } /* ============================================================ „Meine Leistungen" nach dem Vorbild vierless.de Kopfzeile: Überschrift links, Vorlauftext und Knopf rechts - sie stehen auf einer Linie statt untereinander. Kacheln: das Raster läuft auf SECHS Spalten, damit sich zwei Breiten mischen lassen. is-hoch 2 Spalten, 2 Reihen Karte 1 und 2 (links, mittig) is-flach 2 Spalten, 1 Reihe Karte 3 und 4 (rechts gestapelt) Vier Kacheln wie in der Vorlage. Bis zum 11.8. waren es sechs, die zwei übrigen lagen als `is-breit` in einer dritten Reihe - auf Marcels Ansage gekürzt. Die Klasse `is-breit` bleibt definiert, damit eine fünfte oder sechste Kachel ohne Umbau zurückkann. Die flachen Karten tragen KEINE Vitrine: bei einer Reihe Höhe bliebe für das Bild kein Platz, der Text würde herausgedrückt. Im Vorbild ist es genauso - die beiden rechten Kacheln sind reiner Text. ============================================================ */ .leistungen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: start; } .leistungen-kopf-text .t-lead { margin: 14px 0 0; max-width: 560px; } /* Der Knopf sitzt oben rechts auf Hoehe der Ueberschrift, nicht mittig zum Textblock - sonst haengt er zwischen den Zeilen. */ .leistungen-kopf > .btn { align-self: start; } @media screen and (min-width: 992px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento > .karte { grid-column: span 2; } .bento > .karte.is-hoch { grid-row: span 2; } .bento > .karte.is-breit { grid-column: span 3; } .bento > .karte.is-flach .bento-vitrine { display: none; } } @media screen and (max-width: 991px) { /* Einspaltig - der Knopf rutscht unter den Text und steht links, nicht ueber die volle Breite gedehnt. */ .leistungen-kopf { grid-template-columns: 1fr; row-gap: 24px; } .leistungen-kopf > .btn { justify-self: start; } } /* ============================================================ § 21 Herausforderungen - Liste links, Aussage rechts Marcels Ansage 11.8., Vorbild soenkesproll.de. Uebernommen ist die STRUKTUR (Liste mit Nummern, grosse Aussage daneben, Wechsel beim Scrollen). Nicht uebernommen: · Blau und Kursiv - marcy-ci.json typography.rules schliesst Kursiv aus, Auszeichnung laeuft ueber Medium 500; Blau ist keine marcy-Farbe · Versalien in der Ueberschrift · der Erklaersatz je Punkt - Beschluss vom 7.8., „Keine Erklaertexte" in ENTSCHEIDUNGEN.md ============================================================ */ .hf2-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 72px; /* `center` statt `start` (Marcels Ansage 11.8.): die Buehne sitzt jetzt auf halber Hoehe der Liste, nicht an deren Oberkante. Weil die Liste vier Zeilen hoch ist und die Buehne nur drei Zeilen fuellt, stand sie vorher optisch zu weit oben. */ align-items: center; } .hf2-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--chrome); } .hf2-liste li { border-bottom: 1px solid var(--chrome); } /* Ein