/* Fittime: das freigegebene Screendesign (Schleife 04, 03.09.2026), erzeugt aus Website CC/06_Screendesign/leitentwurf-design-2.html. NICHT von Hand aendern, sondern .work/entwurf-zerlegen.py erneut laufen lassen. Alle uebrigen Tokens stehen als Oxygen-Variablen und kommen aus variables.css. */ :root{--haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.8 9 18.3 20.5 6.2'/%3E%3C/svg%3E");} /* ══════════════════════════════════════════════════════════════════════ SCHRIFT · zwei Familien. Display ist Archivo wegen der Breiten-Achse (wdth), die die Silhouette der H1 baut. Die ital-Achse der Datei hat keine Wirkung (geprueft), die Neigung kommt deshalb ueber skewX. ══════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Archivo';src:url('/wp-content/uploads/fittime/fonts/Archivo-Variable.ttf') format('truetype-variations');font-weight:100 900;font-stretch:62% 125%;font-display:swap} @font-face{font-family:'General Sans';src:url('/wp-content/uploads/fittime/fonts/GeneralSans-Variable.woff2') format('woff2-variations');font-weight:200 700;font-display:swap} /* Syncopate traegt seit dem 27.08. die VORZEILEN, sonst nichts. Sie ist von Haus aus weit laufend und geometrisch und kommt der Wortmarke damit naeher als jede andere Google Font der Auswahl (Vergleich: 2026-08-27_Vorzeilen-Schriftvergleich.html). Zwei Dateien statt einer: Syncopate ist keine Variable Font, und Google liefert sie in Subsets. Latin traegt den Text, Latin-Ext die Sonderzeichen. Zusammen 17 KB, also weniger als jede der drei anderen Schriften. Big Shoulders Display ist entfallen: Sie trug die Vorzeilen bis zum 26.08. und wurde danach von General Sans abgeloest, die @font-face-Regel stand seitdem ohne Verwendung im Dokument und die Datei mit 219 KB im Projekt. */ @font-face{font-family:'Syncopate';src:url('/wp-content/uploads/fittime/fonts/Syncopate-400-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Syncopate';src:url('/wp-content/uploads/fittime/fonts/Syncopate-400-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Syncopate';src:url('/wp-content/uploads/fittime/fonts/Syncopate-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Syncopate';src:url('/wp-content/uploads/fittime/fonts/Syncopate-700-latin-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:112px;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0;background:var(--tief);color:var(--grau); /* Offwhite-Ton auf Braun */ font-family:'General Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; font-size:17px;line-height:1.66;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0} :focus-visible{outline:2px solid var(--signal);outline-offset:4px} /* ══════════════════════════════════════════════════════════════════════ TYPOGRAFIE Versalien tragen ausschliesslich H1 und H2. Alles darunter laeuft in normaler Rechtschreibung, weil durchgehende Versalien in kleinen Graden die Lesbarkeit kosten. REGEL SCHRIFTSCHNITTE (Entscheid 19.08., gilt fuer die ganze Seite): · Ueberschriften H1 bis H4 stehen AUFRECHT und tragen Fettschnitt. · VORZEILEN tragen Fettschnitt UND Neigung. Sie sind damit das einzige geneigte Textelement der Seite. Vorher war es umgekehrt. Die Neigung an der Ueberschrift kostete Lesbarkeit genau dort, wo am meisten Text auf einmal steht. An der Vorzeile trifft sie zwei bis drei Woerter und wirkt als Kennzeichnung, nicht als Stoerung. Der Winkel ist dieselben 18 Grad wie an Knoepfen und Fotos. Der echte Logo-Winkel betraegt rund 40 Grad, das ist fuer Text unlesbar. ══════════════════════════════════════════════════════════════════════ */ h1,h2,h3,h4{margin:0;font-family:'Archivo',sans-serif;color:var(--weiss);letter-spacing:-.015em;font-weight:800} .d1,.d2{font-weight:var(--wght)} .hell h1,.hell h2,.hell h3,.hell h4, .feuer h1,.feuer h2,.feuer h3,.feuer h4{color:var(--tinte)} .glut h1,.glut h2,.glut h3,.glut h4{color:var(--signal)} .d1,.d2{text-transform:uppercase} .d1{font-size:clamp(32px,var(--sz1),84px);line-height:var(--lh1);font-stretch:var(--w1)} .d2{font-size:clamp(25px,var(--sz2),58px);line-height:var(--lh2);font-stretch:var(--wh2)} /* Lange Ueberschriften bekommen eine schmalere Breiten-Achse statt eines kleineren Grades. So bleibt das Gewicht der H2 ueber alle Sektionen gleich, nur die Buchstaben werden enger. Mit den vollen 125 Prozent laeuft eine Zeile aus drei Woertern aus ihrer Spalte heraus. */ /* "Leistungsdiagnostik" ist 19 Zeichen lang und hat keine Trennstelle. Mit der vollen Breiten-Achse von 125 Prozent braucht die Zeile 1326 Pixel, die Spalte hat 1320. Statt den Grad zu senken wird die Achse schmaler: Das Gewicht der H2 bleibt ueber alle Sektionen gleich, nur die Buchstaben werden enger. */ .d2--lang{font-stretch:110%;font-size:clamp(21px,var(--sz2),58px)} /* Die Neigung sitzt auf der Zeile, nicht auf dem Block, damit der Zeilenabstand nicht verrutscht. */ /* Frueher die Neigung der Ueberschrift. Ueberschriften stehen aufrecht, die Klasse bleibt als reiner Zeilenkasten. */ .neig{display:block} .d3{font-family:'Archivo',sans-serif;font-size:clamp(19px,1.85vw,23px);line-height:1.14;font-weight:700;font-stretch:86%;letter-spacing:-.005em;text-transform:none} .zahl{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:74%;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:.9} /* Akzentmarke: ein Strich im Winkel des Logo-F. Ersetzt ueberall das frueher verwendete Quadrat und ist damit das einzige wiederkehrende Zierelement der Seite. */ .marke-schraeg{display:inline-block;width:3px;height:15px;background:var(--signal);transform:skewX(var(--logowinkel));flex:none} .hell .marke-schraeg,.feuer .marke-schraeg{background:var(--tinte)} /* Die Vorzeile ist das einzige geneigte Textelement der Seite. Fettschnitt und Neigung zusammen, ohne Akzentmarke davor (Entscheid 19.08.). Die Neigung sitzt am inline-block, nicht am Absatz: Ein geneigter Block waere so breit wie die Spalte und schoebe die Zeile sichtbar nach rechts. */ /* Big Shoulders statt Archivo (Entscheid 25.08.), Versalien statt normaler Schreibung, weite Sperrung. Die Schrift laeuft deutlich schmaler als Archivo, deshalb steht sie 2,5 Punkte groesser: Bei 15,5px waere die Zeile gegenueber der bisherigen Fassung um rund ein Drittel kuerzer geworden. Versalien sind hier vertretbar, obwohl die Seite sie sonst H1 und H2 vorbehaelt: Es sind zwei bis drei Woerter, und die weite Sperrung ist genau das, was durchgehende Versalien in kleinen Graden sonst kostet. Seit dem 26.08. General Sans im Thin-Schnitt, aufrecht statt geneigt. Vorbild ist die Wortmarke: „FITTIME" steht dort in einer geometrischen Grotesk, sehr fein und weit gesperrt. Von den drei Schriften des Projekts kommt General Sans dem am naechsten; Archivo laeuft in den offenen Formen enger, Big Shoulders ist condensed und trifft die Breite nicht. Gewicht 500 (Entscheid 26.08., in Stufen von 200 hochgezogen). Das Vorbild der Wortmarke laeuft deutlich feiner; ausschlaggebend war, dass die Zeile am Bildschirm bestehen muss. Sie liegt damit eine Stufe ueber dem Fliesstext daneben und traegt ihren Unterschied nicht mehr allein ueber Versalien, Sperrung und Farbe. Der Grad faellt dabei von 18 auf 15,5: Big Shoulders lief schmal und brauchte die Hoehe, General Sans nicht. Die Sperrung steigt von 0,15 auf 0,24em, ohne sie klebt eine so feine Versalzeile zusammen. */ /* Seit dem 27.08. Syncopate (Entscheid nach dem Schriftvergleich). Sie laeuft von Haus aus sehr weit und bringt die Sperrung gewissermassen mit; die zusaetzliche Sperrung faellt deshalb von 0,24 auf 0,10em, sonst zerfaellt die Zeile in Einzelbuchstaben. Der Grad faellt von 15,5 auf 12,5px: Bei gleichem Grad braeuchte "Unser Leitgedanke" rund die doppelte Breite und liefe aus seiner Spalte. Zur Strichstaerke (Entscheid 27.08.): 400 war in Orange auf Braun schwer zu lesen, 700 zu fett. Der Kontrast von 5,2:1 gilt fuer die Flaeche und nicht fuer den Strich, und bei 12,5px in Versalien bleibt von einem haarfeinen Strich am Bildschirm zu wenig uebrig. Syncopate hat nur diese beiden Schnitte, eine echte Zwischenstufe gibt es nicht. Deshalb 400 plus eine Kontur von 0,4px: Sie verdickt den Strich stufenlos und laesst die Form der Schrift unangetastet. */ .vor{ font-family:'Syncopate',sans-serif;font-size:12.5px;font-weight:400; letter-spacing:.10em;color:var(--signal);text-transform:uppercase; display:block;margin-bottom:18px; /* Zwischenstufe von Hand: Syncopate hat nur 400 und 700, 400 war zu fein, 700 zu fett. Die Kontur verdickt den Strich stufenlos und liegt hier bei 0,4px, also etwa auf halbem Weg. Stellschraube ist genau dieser eine Wert; 0,3 geht Richtung 400, 0,55 Richtung 700. */ -webkit-text-stroke:.4px currentColor; } .vor>span,.h1klein>span{display:inline-block} .hell .vor,.feuer .vor{color:var(--tinte)} .glut .vor{color:var(--signal)} .meta{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;font-stretch:92%;letter-spacing:.01em;color:var(--grau-still);text-transform:none} .hell .meta{color:var(--tinte-still)} .feuer .meta{color:var(--tinte-feuer)} .glut .meta{color:var(--signal-still)} /* ══════════════════════════════════════════════════════════════════════ ZEICHEN · eine Bauart fuer die ganze Seite (Entscheid 25.08.) ZWEI ARTEN, die Grenze ist inhaltlich und nicht gestalterisch: 1. STRICHZEICHNUNG, Klasse .ic. Alles, was einen Gegenstand oder eine Handlung zeigt: Telefon, Brief, Formular, Uhr, Lineal, Haken, Schild, Balken, Gluehbirne, Pfeile. Kontur in currentColor, keine Fuellung, runde Enden. 2. GEFUELLTE SILHOUETTE. Nur dort, wo die Form selbst die Aussage ist und als Flaeche definiert wurde: das WhatsApp-Zeichen und das Google-G (beide Markenzeichen, deren Form vorgegeben ist), die Bewertungssterne (ein Stern IST die Wertung, eine Kontur hiesse „nicht vergeben") und der Fussabdruck an den Messwerten (sechs getrennte Formen, als Kontur ein Punktehaufen). Vorher lief das durcheinander: Im Kopf standen Telefon und Brief als Kontur, im Band darunter dieselben Wege als Flaeche, und in der Kraftmessung stand ein Lineal als Kontur neben einem Formular als Flaeche. EINHEITLICHE STRICHSTAERKE ueber vector-effect. Die Zeichen tragen drei verschiedene viewBox-Groessen (16, 24, 26) und werden zwischen 9 und 54 Pixeln dargestellt. Eine Angabe im viewBox-System skaliert deshalb mit: Gemessen lagen die Striche zwischen 1,20 und 2,17 Pixeln, obwohl im Markup nur zwischen 1,3 und 2,4 stand. Mit non-scaling-stroke zaehlt die Angabe in gerenderten Pixeln, unabhaengig von viewBox und Groesse. Drei Stufen, nicht eine: Ein Strich, der bei 46 Pixeln richtig sitzt, ist bei 9 Pixeln ein Klotz. Sie folgen der Groesse, nicht proportional. ══════════════════════════════════════════════════════════════════════ */ /* GEFUELLT ist der Normalfall (Entscheid 25.08., zweite Runde). Die Zeichen standen zwischenzeitlich alle als Kontur; sie wirkten neben einer Schrift in Strichstaerke 800 zu leicht, auch nachdem der Strich zweimal angehoben war. Die Flaeche traegt das Gewicht, das eine Kontur bei diesen Groessen nicht erreicht. Damit sind WhatsApp, Google-G, Sterne und Fussabdruck keine Ausnahmen mehr, sondern der Normalfall. AUSNAHME .ic--linie: Zeichen, die eine RICHTUNG zeigen und keinen Gegenstand, also Pfeile und der Winkel am Menuepunkt. Eine Linie hat keine Flaeche; gefuellt wuerde daraus ein massives Dreieck, das mit der Knopfsprache bricht. Der Haken gehoert NICHT dazu, er ist als Flaeche gezeichnet: Er ist eine Marke und kein Wegweiser, und er hat sein Gegenstueck in den Listenmarken. Fuer die Linienzeichen gilt die Staerke ueber vector-effect, sonst skaliert sie mit viewBox und Groesse: Gemessen lagen die Striche vorher zwischen 1,20 und 2,17 Pixeln, obwohl im Markup nur 1,3 bis 2,4 stand. */ /* Rueckfallmass. Jedes Zeichen bekommt seine Groesse aus einer eigenen Regel; fehlt sie, greift hier 24 Pixel statt der SVG-Standardgroesse von 300. Alle echten Regeln sind spezifischer oder stehen spaeter und gewinnen. */ .ic,.ic--linie{width:24px;height:24px} .ic{fill:currentColor} .ic--linie{--strich:2.3;fill:none;stroke:currentColor; stroke-linecap:round;stroke-linejoin:round} .ic--linie *{vector-effect:non-scaling-stroke;stroke-width:var(--strich);fill:none} /* Der Trendpfeil steht bei 9 Pixeln. Ein Strich, der bei 21 Pixeln sitzt, waere hier ein Klotz. */ .ic--linie.ic--klein{--strich:1.8} /* ══════════════════════════════════════════════════════════════════════ BUTTONS · zwei Typen, Radius 0, keine Farbflaeche, normale Schreibung. ══════════════════════════════════════════════════════════════════════ */ /* ══ KNOEPFE ══════════════════════════════════════════════════════════ Parallelogramm im Winkel der Ueberschriften, gebaut aus zwei geneigten Hilfsflaechen. Keine Konturen mehr, die Unterscheidung laeuft allein ueber die Flaechenfarbe. ::after ist die Flaeche, ::before der einlaufende Balken darueber. Der Text liegt ueber beiden, weil negative z-Indizes im Knopf bleiben. Erstknopf: heller Grund, brauner Text, oranger Balken von links. Der einlaufende Balken ist IMMER Orange, bei beiden Knopftypen. Ausnahmen: In der Akzentsektion fuehrt Orange die Flaeche, dort laeuft der Balken in Offwhite. Auf orangem GRUND laeuft er im helleren Braun, siehe unten. OFFENER PUNKT, bewusst so entschieden: Der Balken schiebt sich unter der Schrift durch. Offwhite auf #FF4A14 ergibt gerechnet 3,0:1 und liegt damit unter der Schwelle von 4,5:1 fuer Text dieser Groesse. Auf dem braunen Grund liegt dieselbe Schrift bei 15,6:1. Wer das aufloesen will, braucht braune Schrift und einen hellen Grund, dann ist der Knopf aber der Erstknopf. Unterlegte Flaeche: eine zweite Flaeche, nach links und unten versetzt, als harter box-shadow auf der Formflaeche. Der Versatz wird mitgeneigt und bleibt dadurch parallel zur Kante. Beim Ueberfahren faehrt die Unterlegung unter den Knopf und verschwindet: Der Versatz geht auf null. Das ist kein Ausblenden, sondern eine Bewegung, der Knopf legt sich auf seine eigene Flaeche. ══════════════════════════════════════════════════════════════════════ */ .btn{ --knneig:-18deg; --fuell:0%; --grund:transparent; --balken:var(--feuer); --unterleg:var(--feuer); --unterx:-6px; --untery:6px; position:relative;isolation:isolate; display:inline-flex;align-items:center;gap:11px; font-family:'Archivo',sans-serif;font-size:15px;font-weight:800;font-stretch:92%; letter-spacing:.005em;padding:15px 34px;border:0;background:none;cursor:pointer; color:var(--weiss);transition:color .3s var(--tempo); } .btn::after{ content:"";position:absolute;inset:0;z-index:-2; background:var(--grund); box-shadow:var(--unterx) var(--untery) 0 0 var(--unterleg); border-radius:var(--rund); transform:skewX(var(--knneig)); transition:background .3s var(--tempo),box-shadow .3s var(--tempo); } .btn::before{ content:"";position:absolute;left:0;top:0;bottom:0;z-index:-1; width:var(--fuell); background:var(--balken); /* Nur die linken Ecken: Der Balken sitzt an der linken Kante und ist meistens schmaler als der Knopf. Rundete er rechts mit, laege mitten in der Flaeche eine gebogene Kante. */ border-radius:var(--rund) 0 0 var(--rund); transform:skewX(var(--knneig)); transition:width .34s var(--tempo); } /* Beim Klick fuellt der Balken den Knopf ganz aus und ist dann selbst die sichtbare Flaeche. Ohne die rechte Rundung staende er in den beiden rechten Ecken um die Rundung ueber die Knopfflaeche hinaus. */ .btn:active::before{border-radius:var(--rund)} /* Beim Klick laeuft der Balken schneller durch als beim Ueberfahren. Mit den 34 Hundertstel des Hover-Zustands ist ein normaler Klick vorbei, bevor die Fuellung ankommt: Sichtbar wurden davon rund 90 Prozent, der Balken sah aus, als bliebe er stehen. Mit 14 Hundertstel laeuft er in der Klickdauer vollstaendig durch (Entscheid 19.08.). */ .btn:hover{--fuell:60%;--unterx:0px;--untery:0px} .btn:active{--fuell:100%;--unterx:0px;--untery:0px} .btn:active::before{transition-duration:.14s} .btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--tempo)} /* Die eigene Strichstaerke der Knopfpfeile ist entfallen (Entscheid 25.08.). Sie stand auf 2,4 im 16er viewBox, gerendert also 2,25 Pixel, und war damit der dickste Strich der Seite. Jetzt gilt .ic wie ueberall. */ .btn:hover svg{transform:translateX(5px)} @media(prefers-reduced-motion:reduce){.btn::before{transition:none}} /* Auf Braun ────────────────────────────────────────────────────────── */ .btn--1{--grund:var(--weiss);--balken:var(--feuer);color:var(--tief)} .btn--2{--grund:var(--tief);--unterleg:var(--feuer);color:var(--weiss)} /* Auf Offwhite ─────────────────────────────────────────────────────── */ /* Auf Offwhite gibt es nur EINE Knopfform, Erst- und Zweitknopf sehen dort gleich aus. Entscheid 19.08. Wo eine Rangfolge noetig ist, traegt sie der Textlink mit Pfeil, nicht ein zweiter Knopfstil. */ .hell .btn--1,.hell .btn--2{--grund:var(--tief);color:var(--weiss)} /* Auf Orange ───────────────────────────────────────────────────────── */ /* EINE Form, wie auf Offwhite (Entscheid 19.08.). Braune Flaeche, offwhite Schrift, OFFWHITE Unterlegung. Die Unterlegung lag vorher in Braun und damit in derselben Farbe wie die Flaeche: Sie las sich als doppelte Form, nicht als zweite Ebene. In Offwhite steht sie mit 15,6:1 gegen die Flaeche und mit 3,0:1 gegen den Grund. Regel dahinter: Die Unterlegung traegt immer die dritte Farbe, also die, die weder Grund noch Flaeche ist. Auf Braun und Offwhite ist das Orange, auf Orange ist es Offwhite. Der einlaufende Balken laeuft hier im HELLEREN Braun --tief-hell (Entscheid 19.08.). Zwei Farben schieden vorher aus: · Orange waere unsichtbar, es hat die Farbe des Grundes. · Offwhite braeuchte braune Schrift. Auf dem noch nicht gefuellten Teil der Flaeche stuende dieselbe Schrift dann Braun auf Braun. Eine Schriftfarbe fuer beide Faelle gibt es nicht: Braun und Offwhite sind 15,6:1 auseinander, der bestmoegliche Mittelton erreicht gegen beide nur 3,87:1. Das hellere Braun loest das: Die Schrift bleibt Offwhite und steht auf dem Balken bei 12,1:1, auf der Flaeche bei 15,6:1. Der Balken selbst hebt sich mit 1,29:1 von der Flaeche ab. Das ist bewusst leise, es ist eine Bewegung und keine zweite Farbflaeche. */ .feuer .btn,.zielzeile .btn,.einstieg .btn{--unterleg:var(--weiss);--balken:var(--tief-hell)} .feuer .btn--1,.feuer .btn--2, .zielzeile .btn--1,.zielzeile .btn--2, .einstieg .btn--1,.einstieg .btn--2{--grund:var(--tief);color:var(--weiss)} /* Die Vorzeile im Preisblock stand bis zum 03.09. in Braun, weil die Flaeche darunter orange war. Seit die Flaeche braun ist, gilt hier ohne eigene Regel der Normalfall .vor{color:var(--signal)}, also derselbe Ton wie bei jeder anderen Vorzeile auf braunem Grund. Der Zwischenschritt ueber --signal-still ist verworfen: Gemessen standen dann zwei verschiedene Oranges uebereinander, #E26732 ueber #FF5B14, und der kleine Unterschied las sich als Versehen statt als System. Die Rangfolge tragen Grad und Flaeche, nicht ein zweiter Farbton. */ /* In der Akzentsektion fuehrt Orange die Schrift. */ .glut .btn{--unterleg:var(--weiss)} .glut .btn--1{--grund:var(--feuer);--balken:var(--weiss);color:var(--tief)} .glut .btn--2{--grund:var(--tief);--unterleg:var(--feuer);color:var(--weiss)} /* Textlink statt drittem Buttonstil */ .tl{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;font-stretch:92%;color:var(--weiss);transition:gap .3s var(--tempo),color .3s} .tl svg{width:14px;height:14px;flex:none;color:var(--signal)} .tl:hover{gap:14px} .hell .tl,.feuer .tl{color:var(--tinte)} .hell .tl svg,.feuer .tl svg{color:var(--tinte)} /* Rueckausnahme, gefunden bei der Gegenpruefung am 03.09.2026. Die beiden Regeln darueber nehmen an, dass in einer hellen Sektion alles hell ist. Die vier Kacheln in k03 sind aber DUNKLE Flaechen innerhalb der hellen Sektion, und die zwei einzigen Textverweise der Seite liegen genau dort. Sie wurden in #1F1914 auf #1F1914 gezeichnet, Kontrast 1,00:1, also unsichtbar. Die Kachel las sich dadurch als abgebrochen: nach "Allein zu Hause oder betreut in der Praxis" folgten 250 Pixel scheinbar leere Flaeche. Der Fehler stammt nicht aus Schleife 03, er lag schon vorher darin. Gerechnet: Offwhite auf Braun 15,6:1, das Zeichen in Signalfarbe 5,6:1. */ .hell .kachel .tl{color:var(--weiss)} .hell .kachel .tl svg{color:var(--signal)} .glut .tl{color:var(--signal)} /* ══════════════════════════════════════════════════════════════════════ SEKTIONEN Eine Sektion ist die einzige Flaeche der Seite. Innerhalb einer Sektion gibt es keine Karten, keine Rahmen und keine Rasterlinien: Der dunkle Grund ist bereits die Box, eine Box darin waere eine Box in der Box. Getrennt wird ausschliesslich durch die Schraege und durch Leerraum. ══════════════════════════════════════════════════════════════════════ */ /* Die eigene Hintergrundfarbe ist Pflicht, auch wenn sie der des Body entspricht. Eine transparente Sektion kann keine Schraege zeigen, weil der Beschnitt dann nichts wegnimmt und stattdessen der Body durchscheint. */ .kap{position:relative;padding:var(--luft) var(--spur);overflow:clip;background:var(--tief)} .kap.hell{background:var(--papier);color:var(--tinte-grau)} /* Die dritte Flaeche: Orange. Braun darauf, sonst nichts. */ /* Braun auf Orange: der Handlungsaufruf. */ .kap.feuer{background:var(--feuer);color:var(--tinte)} /* Orange auf Braun: derselbe Grund wie die normale dunkle Sektion, nur traegt die Schrift den Akzent. Deshalb KEINE Schraege davor, die Flaeche wechselt nicht. Getrennt wird hier allein ueber die Schriftfarbe. */ .kap.glut{background:var(--tief);color:var(--signal)} .innen{position:relative;max-width:1320px;margin:0 auto} /* Die schraegen Sektionsuebergaenge sind entfallen. Sektionen stossen jetzt mit gerader Kante aneinander, getrennt allein durch den Wechsel der Flaechenfarbe und durch Leerraum. */ /* Zwei gleichfarbige Sektionen hintereinander brauchen nur halbe Luft */ .kap:not(.hell):not(.feuer)+.kap:not(.hell):not(.feuer), .kap.hell+.kap.hell{padding-top:clamp(24px,3.4vw,54px)} /* Ausnahme: Eine Sektion, die mit dem orangen Band endet, ist unten NICHT offwhite, sondern orange. Die halbe Luft gilt fuer zwei Flaechen, die ineinander uebergehen; hier stoesst ein Flaechenwechsel auf die naechste Sektion und braucht den vollen Abstand. Entscheid 20.08., nachdem die Bewertungen vor die Zwei Wege gerueckt sind: Das Band grenzt seither an eine helle Sektion, vorher an eine dunkle. */ .kap.bandschluss+.kap.kap{padding-top:var(--luft)} /* Kapitelkopf, sechsmal identisch. Das ist das Ordnungsprinzip. */ .kapkopf{display:grid;gap:clamp(20px,3.6vw,66px);align-items:end;margin-bottom:clamp(42px,5.6vw,78px)} @media(min-width:920px){.kapkopf{grid-template-columns:minmax(0,1.62fr) minmax(210px,1fr)}} /* Kopfzeile ohne Einleitungssatz. Ohne diese Regel bliebe die Ueberschrift in der ersten von zwei Spalten stehen und die zweite bliebe leer. */ @media(min-width:920px){.kapkopf--breit{grid-template-columns:minmax(0,1fr)}} .kapkopf .satz{font-size:clamp(16px,1.5vw,18.5px);max-width:min(42ch,100%)} .kapkopf h2+.satz{margin-top:clamp(18px,2vw,28px)} /* ══════════════════════════════════════════════════════════════════════ BILDER · eine Behandlung und EIN Anschnittwinkel fuer jedes Foto. LEITFORM-REGEL, gueltig fuer alle Fotos der Seite ausser dem Hero: Fotos werden an den SEITEN angeschnitten, nie oben oder unten, und zwar im Projektwinkel von 18 Grad, demselben wie Knoepfe, Kopfleiste und Menue. Grundlage: 05_Design-Stil/Leitformen/leitformen.svg. · Ein einzelnes Foto ist ein Parallelogramm, beide Seiten geneigt. · Eine Reihe von Fotos hat SENKRECHTE Aussenkanten, nur die Fugen dazwischen sind geneigt. Die Reihe wird dafuer geneigt und an ihrem Sichtfenster wieder gerade beschnitten. · Ein Foto, das an den Seitenrand laeuft, hat dort ebenfalls eine senkrechte Kante, siehe .leitbild. · Der Hero ist ausgenommen, er ist eine Flaeche und kein Bildelement. Umgesetzt ueber skewX, NICHT ueber clip-path in Prozent: ein Prozentwert ergibt bei jeder Bildhoehe einen anderen Winkel. skewX haelt ihn konstant, das Motiv wird gegengeneigt und so weit vergroessert, dass keine Ecken frei bleiben. Der noetige Zoom ist 1 + (Hoehe/Breite) x tan(18 Grad). ══════════════════════════════════════════════════════════════════════ */ .bild,.bild.auf{position:relative;overflow:hidden;background:var(--tief-auf); border-radius:var(--rund-bild); transform:translateY(var(--aufy,0px)) skewX(var(--bildneig))} .bild>img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04); transform:skewX(calc(var(--bildneig) * -1)) scale(var(--bildzoom,1.3))} .bild::after{ content:"";position:absolute;inset:0;pointer-events:none; background:rgba(31,25,20,.14); } /* Alles, was IM Bild liegt, wird gegengeneigt. Sonst kippt es mit dem Behaelter und die Schrift steht schraeg. Nur das Motiv selbst bleibt beim Zoom-Ausgleich. Zurzeit liegt nichts in einem Bild, die Regel bleibt fuer spaetere Beschriftungen stehen. */ .bild>*:not(img){transform:skewX(calc(var(--bildneig) * -1))} /* ══════════════════════════════════════════════════════════════════════ KOPFLEISTE ══════════════════════════════════════════════════════════════════════ */ .fortschritt{position:fixed;top:0;left:0;height:2px;background:var(--signal);width:0;z-index:70;transition:width .1s linear} /* Die Kopfleiste ist ein durchgehendes braunes Band. Am rechten Ende sitzt ein oranger Keil mit dem Handlungsaufruf, oben breiter als unten. Damit traegt auch die Navigation zwei der vier Flaechenpaare: Offwhite auf Braun im Menue, Braun auf Orange im Keil. Die Leiste ist nicht mehr durchsichtig ueber dem Foto. Das kostet den schwebenden Eindruck im ersten Bildschirm und ist der Preis der Form. */ .kopf{ --kpad:11px; --logoh:74px; /* groesser seit dem 27.08. (56 auf 64), am 03.09. ein zweites Mal auf 74 (Kundennotiz 2 Schleife 02: "etwas groesser"). --kpad faellt im Gegenzug von 20 auf 11, damit --kopfh weiter die WIRKLICHE Hoehe der Leiste trifft: 11*2+74 = 96, und 96 steht unten als height. Vorher rechnete --kopfh 104 bei 96 Pixeln Leiste, das Klapp-Panel setzte 8 Pixel zu tief an und der Keil war entsprechend zu breit. */ --kopfh:calc(var(--kpad) * 2 + var(--logoh)); --keil:calc(var(--kopfh) * var(--keilneig)); position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:stretch;justify-content:space-between;gap:24px; /* Dieselbe linke Kante wie jede Sektion: Bis rund 1490 Pixeln der Seitenabstand, darueber die Kante der 1320er Spalte. */ padding-left:var(--spalte); background:var(--tief); /* Die Hoehe steht als height, nicht mehr als Polsterung (Entscheid 26.08.). height animiert als eine Groesse; die Polsterung tat es an zwei Seiten zugleich und loeste dabei bei jedem Zwischenschritt einen Umbruch der Kinder aus. Sichtbar war das als Ruckeln. Die Kinder stehen jetzt auf voller Hoehe (align-items:stretch) und zentrieren ihren Inhalt selbst; der orange Keil braucht seine negativen Aussenabstaende nicht mehr. --kpad und --logoh bleiben: Sie rechnen --kopfh fuer das Klapp-Panel und --keil fuer die Schraege. ZUR PRUEFMETHODE, damit der naechste nicht dieselbe Runde dreht: In Chrome mit --virtual-time-budget laufen CSS-Transitionen NICHT mit der virtuellen Uhr. Eine Messung zeigt dort dauerhaft den Startwert, und es sieht aus, als wuerde die Regel nicht greifen. Mit element.getAnimations().forEach(a => a.finish()) springt sie ans Ende und der wahre Wert wird sichtbar. */ height:96px; transition:height .35s var(--tempo); } .kopf.fest{--kpad:9px;--logoh:58px;height:76px} /* 9*2+58 = 76, siehe oben */ /* Eine feine Linie an der Unterkante, sobald die Leiste mitlaeuft (Entscheid 26.08.). Ueber dem Hero braucht sie keine: Dort steht die braune Flaeche auf einem Foto und setzt sich von selbst ab. Beim Scrollen laeuft sie aber ueber die dunklen Sektionen, und dort ist Braun auf Braun keine Kante mehr. Sie liegt ueber dem orangen Keil und wird dort mit 1,1:1 praktisch unsichtbar. Das ist richtig so: Der Keil traegt seine Kante selbst. Dieselbe Staerke wie die Trennlinien im Fuss. */ .kopf::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:rgba(245,242,237,.14); opacity:0;transition:opacity .35s var(--tempo); } .kopf.fest::after{opacity:1} /* Ein weicher Schein unter der Linie. Er faellt nach unten aus und dunkelt die ersten Pixel des Inhalts leicht ab. Ein HELLER Schein war probeweise drin und ist wieder zurueckgenommen. Beide zusammen decken beide Faelle ab: Auf den HELLEN Sektionen traegt der Schein, weil ein dunkler Verlauf dort sichtbar ist; auf den DUNKLEN traegt die Linie, weil ein dunkler Verlauf auf Braun nichts ausrichtet. pointer-events:none, sonst laege eine unsichtbare Flaeche ueber den ersten Pixeln des Inhalts und finge Klicks ab. */ .kopf::before{ content:"";position:absolute;left:0;right:0;top:100%;height:16px; background:linear-gradient(rgba(31,25,20,.15),rgba(31,25,20,0)); opacity:0;pointer-events:none; transition:opacity .35s var(--tempo); } .kopf.fest::before{opacity:1} /* Die Wortmarke lag als reines Weiss vor und wurde per invert() aufgehellt. Reines Weiss kommt im System nicht vor, deshalb liegt sie als eigene Datei im Offwhite der hellen Flaeche daneben: fittime-logo-offwhite.png. Bewusst als Datei und nicht per CSS-Maske oder Filterkette, weil beides browserabhaengig ist und die Marke im Test ganz verschwand. Ohne den Zusatz "Physiotherapie." seit dem 28.08. (Kundenrueckmeldung Schleife 01, Punkt 1): nur Bildmarke und FITTIME. Der Logosatz des Kunden kennt diese Fassung nicht, sie ist aus der vollen Marke abgeleitet; die Originale mit Zusatz liegen unter assets/bilder/_original-logo-mit-zusatz/. Die Datei ist dabei von 1635x888 auf 1526x851 Pixel geschrumpft. Das Verhaeltnis Inhalt zu Leinwand bleibt praktisch gleich, die Marke steht bei denselben Hoehenangaben also unveraendert gross. */ /* flex:none ist Pflicht, seit die Bildmarke am 03.09. von 64 auf 74 Pixel gewachsen ist. Als schrumpffaehiges Flex-Kind wurde sie in dem schmalen Band ab 1020 Pixeln, wo die Navigation von der Menuetaste auf die volle Zeile umschaltet, auf bis zu 4 Pixel Breite gequetscht. Die Hoehe blieb dabei stehen, das Logo war also nicht klein, sondern ein Strich. Bei 64 Pixeln fiel das nie auf, weil die 20 Pixel Differenz genau den Puffer ausmachten. Den Druck nimmt jetzt die Navigation auf, die dafuer Abstaende hat; die Marke ist unteilbar. */ .marke{display:flex;align-items:center;flex:none} /* Dieselbe Doppelung wie beim padding, aus demselben Grund. */ .marke img{height:74px;width:auto;transition:height .35s var(--tempo)} .kopf.fest .marke img{height:58px} /* ══ NAVIGATION ═══════════════════════════════════════════════════════ Das grosse Menue hinter der Menuetaste ist aufgeloest (Entscheid 25.08.). Die vier Gruppen, die dort in Spalten standen, haengen jetzt als Untermenue an dem Punkt, zu dem sie gehoeren. Ein Overlay ueber siebzig Prozent der Fensterhoehe fuer vierzehn Links war ein zweiter Vorgang fuer etwas, das die Leiste selbst tragen kann. Die Menuetaste bleibt UNTER 1020 Pixeln bestehen: Dort ist fuer eine waagrechte Leiste kein Platz, und ohne sie waere die Seite auf dem Handy nicht mehr zu navigieren. Sie oeffnet dort dasselbe Markup als Akkordeon. Die Aufteilung hat sich dabei verschoben. „Karriere" steht nicht mehr in der obersten Ebene, sondern unter „Ueber Fittime", wo es im alten Menue ohnehin schon stand; dafuer sind die drei Ortsseiten als „Standorte" sichtbar geworden. Vier Punkte bleiben es damit, die Leiste wird nicht breiter und die Schwelle von 1020 Pixeln haelt. ══════════════════════════════════════════════════════════════════════ */ /* Das Menue sitzt rechts, direkt vor dem Keil, nicht mittig. */ .hauptnav{display:none;margin-left:auto} @media(min-width:1020px){.hauptnav{display:flex;align-items:stretch}} .navreihe{list-style:none;margin:0;padding:0;display:flex;align-items:center; gap:clamp(20px,2.2vw,36px)} /* Der Punkt ist der Bezugsrahmen des Untermenues und die Flaeche, die das Ueberfahren erkennt. Beides muss dasselbe Element sein, sonst faellt das Menue zu, sobald der Zeiger vom Wort auf die Liste wandert. */ .navpunkt{position:relative} /* Der Punkt nimmt die volle Hoehe der Leiste und zentriert sein Wort darin. Nur so liegt seine Unterkante auf der Unterkante der Leiste, und das Untermenue setzt dort an statt auf halber Hoehe mitten im Band. */ @media(min-width:1020px){ .navreihe{align-items:stretch} .navpunkt{display:flex;align-items:center} /* Der offene Punkt liegt ueber seinen Nachbarn. Ohne das beschneidet der naechste Punkt, der spaeter im Markup steht, das aufgefahrene Panel. */ .navpunkt:hover,.navpunkt:focus-within,.navpunkt.offen{z-index:3} } .navkopf{position:relative;display:flex;align-items:center;gap:6px} /* Seit dem 27.08. dieselbe Schrift wie die Vorzeilen, also Syncopate mit der Kontur als Zwischenstufe. Die Leiste und die Vorzeilen sind beides kurze Versalien-Zeilen; sie mit zwei verschiedenen Schriften zu setzen war eine Trennung ohne Grund. Der Grad faellt dabei von 17,5 auf 13,5px: Syncopate laeuft von Haus aus sehr weit, bei gleichem Grad braeuchten die vier Punkte rund die doppelte Breite und die Leiste kaeme mit Knopf und Zeichen nicht mehr aus. */ .navlink{font-family:'Syncopate',sans-serif;font-size:13.5px;font-weight:400; letter-spacing:.06em;text-transform:uppercase;-webkit-text-stroke:.4px currentColor; white-space:nowrap;color:var(--weiss);transition:color .25s} /* Ohne nowrap brachen "Sport & Leistung" und "Ueber Fittime" zwischen 1025 und 1199 Pixeln auf zwei Zeilen um, gemessen. Nowrap allein reicht aber nicht: Ungebrochen braucht die Reihe dort mehr Platz, als bis zum Knopf frei ist. Deshalb in diesem Bereich ein Grad kleiner und enger gesperrt. */ @media(min-width:1025px) and (max-width:1199px){ .navlink{font-size:12px;letter-spacing:.03em} } .navpunkt:hover .navlink,.navpunkt.offen .navlink{color:var(--signal)} /* Der Strich unter dem offenen Punkt. Gleiche Bauart wie der unter dem Handlungsaufruf im Keil: eine eigene Flaeche, damit die Enden im Winkel der Knoepfe angeschnitten sind, und kein text-decoration. Er waechst von links ein, wie der Balken im Knopf. Deshalb sitzt die Neigung VOR der Skalierung in derselben transform: umgekehrt skaliert sie den bereits geneigten Kasten und der Winkel liefe mit. */ .navkopf::after{ content:"";position:absolute;left:0;right:20px;bottom:-9px;height:4px; background:var(--signal); transform:skewX(var(--knneig)) scaleX(0);transform-origin:0 50%; transition:transform .3s var(--tempo); } .navpunkt:hover .navkopf::after, .navpunkt.offen .navkopf::after{transform:skewX(var(--knneig)) scaleX(1)} /* Der Pfeil ist ein eigenes Bedienelement, nicht nur ein Zeichen: Er traegt aria-expanded und oeffnet das Untermenue dort, wo es kein Ueberfahren gibt. */ .navpfeil{display:flex;align-items:center;justify-content:center; width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer; color:var(--weiss);transition:color .25s,transform .3s var(--tempo)} .navpfeil svg{width:13px;height:13px} .navpunkt:hover .navpfeil,.navpunkt.offen .navpfeil{color:var(--signal)} .navpunkt.offen .navpfeil{transform:rotate(180deg)} /* ── Untermenue, ab 1020px ────────────────────────────────────────── Es liegt auf --tief-auf, also der Stufe ueber dem Grund der Leiste. Eine zweite braune Flaeche in derselben Farbe waere ueber dem Hero-Foto nicht als eigene Ebene zu erkennen. Getrennt wird zusaetzlich durch den orangen Strich, der ueber dem Panel an der Unterkante der Leiste sitzt. ANSCHNITT UNTEN RECHTS (Entscheid 25.08.). Nur die ECKE, nicht die ganze Kante: Eine durchgehende Schraege haette den Innenabstand rechts ueber die volle Hoehe auf den groessten Versatz zwingen muessen, und oben, wo die Schraege noch bei null steht, waere daneben leere Flaeche geblieben. Der Winkel ist derselbe wie ueberall, 18 Grad gegen die Senkrechte, der waagrechte Versatz also die senkrechte Ausdehnung mal tan(18 Grad). Die Ecke steht als fester Wert und wird nicht mehr aus der Panelhoehe gerechnet. Damit entfaellt auch die Messung im Skript: Die Hoehe haengt an der Zahl der Eintraege, die Ecke nicht mehr. */ @media(min-width:1020px){ .untermenue{ /* EINZIGE STELLSCHRAUBE fuer die Groesse der Ecke. Der waagrechte Versatz folgt daraus, er ist immer 0,3249 davon, sonst stimmt der Winkel nicht. Zur Einordnung: 56px ergeben 18px Breite und sind kaum zu sehen, 72px ergeben 23px, 130px ergeben 42px und laufen bei drei Eintraegen schon fast ueber die ganze Kante. */ --ecke:72px; /* senkrechte Ausdehnung der Ecke */ --eckex:calc(var(--ecke) * .3249); /* waagrechte, ergibt 18 Grad */ clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ecke)), calc(100% - var(--eckex)) 100%,0 100%); /* Buendig an der Unterkante der Leiste. Seit die Leiste eine Hoehe traegt und ihre Kinder gestreckt werden, endet der Punkt genau dort; ein Zuschlag fuer die Polsterung ist nicht mehr noetig. */ position:absolute;top:100%;left:-22px; min-width:max(100%,232px); background:var(--tief-auf); padding:clamp(16px,1.4vw,22px) clamp(18px,1.6vw,26px); /* Nur der Eckversatz, nicht mehr die volle Schraege. Die unterste Zeile liegt im Bereich der Ecke und braucht dort hoechstens diese Breite. */ padding-right:calc(clamp(18px,1.6vw,26px) + var(--eckex)); /* Aus dem Fluss genommen statt display:none: So laesst sich der Auftritt ueberhaupt bewegen. pointer-events verhindert, dass das unsichtbare Panel Klicks abfaengt, visibility haelt es aus der Tabreihenfolge. */ opacity:0;visibility:hidden;pointer-events:none; /* Das Panel selbst bewegt sich seit dem 28.08. nicht mehr (Kundenrueckmeldung Schleife 01, Punkt 6). Vorher fuhr es als Ganzes um sieben Pixel herunter. Jetzt tragen die Eintraege die Bewegung, und zwei ueberlagerte Wege haetten sich addiert: Der oberste Eintrag waere doppelt so weit gelaufen wie der unterste. Die Flaeche blendet deshalb nur noch auf, und zwar schneller als die Eintraege einfliegen. Sie muss stehen, bevor der erste Eintrag ankommt, sonst laeuft er ueber dem noch durchsichtigen Grund. */ transition:opacity .2s var(--tempo), visibility 0s linear .2s; } .navpunkt:hover .untermenue, .navpunkt:focus-within .untermenue, .navpunkt.offen .untermenue{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity .2s var(--tempo),visibility 0s; } /* ══ EINTRAEGE EINZELN, VON OBEN NACH UNTEN ══════════════════════════ Jeder Eintrag faellt um zehn Pixel herunter und blendet dabei auf. Die beiden Werte darunter sind die EINZIGEN STELLSCHRAUBEN; die acht Stufen rechnen sich daraus, es steht keine Zeit mehr woertlich in einer Regel. Am 28.08. auf Wunsch ruhiger gestellt: Dauer von 380 auf 480 Tausendstel, Versatz von 75 auf 95. Bei vier Eintraegen steht der letzte damit nach 855 statt 680 Tausendstel. Deutlich mehr ist nicht vertretbar: Das Menue geht beim Ueberfahren auf, und wer zielstrebig auf den vierten Punkt will, wartet sonst darauf. ZUM SCHLIESSEN OHNE VERZOEGERUNG. Die Staffelung steht nur im offenen Zustand. Andernfalls liefe sie beim Verlassen rueckwaerts mit, und das Panel haenge dem Zeiger hinterher, obwohl die Flaeche laengst weg ist. Acht Stufen sind angelegt, gebraucht werden vier. Die Reserve kostet nichts und faengt ab, dass ein fuenfter Eintrag ohne Bewegung erscheint. */ .untermenue{--eindauer:.48s;--einstufe:.095s} .untermenue li{ opacity:0;transform:translateY(-10px); transition:opacity var(--eindauer) var(--tempo), transform var(--eindauer) var(--tempo); transition-delay:0s; } .navpunkt:hover .untermenue li, .navpunkt:focus-within .untermenue li, .navpunkt.offen .untermenue li{opacity:1;transform:translateY(0)} .navpunkt:hover .untermenue li:nth-child(1), .navpunkt:focus-within .untermenue li:nth-child(1), .navpunkt.offen .untermenue li:nth-child(1){transition-delay:calc(var(--einstufe) * 1)} .navpunkt:hover .untermenue li:nth-child(2), .navpunkt:focus-within .untermenue li:nth-child(2), .navpunkt.offen .untermenue li:nth-child(2){transition-delay:calc(var(--einstufe) * 2)} .navpunkt:hover .untermenue li:nth-child(3), .navpunkt:focus-within .untermenue li:nth-child(3), .navpunkt.offen .untermenue li:nth-child(3){transition-delay:calc(var(--einstufe) * 3)} .navpunkt:hover .untermenue li:nth-child(4), .navpunkt:focus-within .untermenue li:nth-child(4), .navpunkt.offen .untermenue li:nth-child(4){transition-delay:calc(var(--einstufe) * 4)} .navpunkt:hover .untermenue li:nth-child(5), .navpunkt:focus-within .untermenue li:nth-child(5), .navpunkt.offen .untermenue li:nth-child(5){transition-delay:calc(var(--einstufe) * 5)} .navpunkt:hover .untermenue li:nth-child(6), .navpunkt:focus-within .untermenue li:nth-child(6), .navpunkt.offen .untermenue li:nth-child(6){transition-delay:calc(var(--einstufe) * 6)} .navpunkt:hover .untermenue li:nth-child(7), .navpunkt:focus-within .untermenue li:nth-child(7), .navpunkt.offen .untermenue li:nth-child(7){transition-delay:calc(var(--einstufe) * 7)} .navpunkt:hover .untermenue li:nth-child(8), .navpunkt:focus-within .untermenue li:nth-child(8), .navpunkt.offen .untermenue li:nth-child(8){transition-delay:calc(var(--einstufe) * 8)} /* Wer Bewegung abbestellt hat, bekommt das Menue ohne Auftritt. Die Eintraege stehen dann sofort, nur die Flaeche blendet auf. */ @media(prefers-reduced-motion:reduce){ .untermenue li{transition:none;transform:none;opacity:1} .navpunkt:hover .untermenue li, .navpunkt:focus-within .untermenue li, .navpunkt.offen .untermenue li{transition-delay:0s} } /* Keine Bruecke mehr noetig: Panel und Punkt stossen aneinander. */ } .untermenue ul{list-style:none;margin:0;padding:0;display:grid; gap:clamp(9px,.9vw,13px)} .untermenue a{display:block;font-family:'Archivo',sans-serif;font-size:16px; font-weight:800;font-stretch:88%;letter-spacing:-.005em;color:var(--weiss); transition:color .25s;white-space:nowrap} .untermenue a:hover{color:var(--signal)} /* ── Untermenue, unter 1020px: Akkordeon im Klapp-Panel ───────────── Die Hoehe steht auf null und wird beim Oeffnen vom Skript auf den gemessenen Wert gesetzt, nach der Bewegung auf auto. Zwei Wege sind dafuer verworfen: · max-height mit festem Grenzwert. Zu klein schneidet ab, zu gross laesst den Uebergang die leere Strecke mitlaufen. · grid-template-rows von 0fr auf 1fr. Gemessen bleibt die Zeile dabei auf 19 Pixeln stehen, also genau der Polsterung der Liste: 1fr hat in einem Behaelter ohne eigene Hoehe nichts zu verteilen, und das min-height:0, das die Technik zum Schliessen braucht, nimmt ihm zugleich die Mindesthoehe aus dem Inhalt. Der Punkt sah offen aus wie zu. */ @media(max-width:1019px){ .untermenue{height:0;overflow:hidden; transition:height .34s var(--tempo)} /* Die Liste haengt am selben Seitenabstand wie die Hauptpunkte (Kundenrueckmeldung 31.08.: alles in einer Flucht). Vorher stand hier ein fester Einzug von 15 Pixeln, der von --spur nichts wusste: Gemessen bei 500px begannen die Hauptpunkte bei 26 Pixeln und die Unterpunkte bei 15, die Unterebene stand also ELF PIXEL WEITER LINKS als die Ebene darueber, und ihre Zeilen liefen rechts bis an den Fensterrand. Jetzt sitzt die Marke genau auf der Flucht der Hauptpunkte, der Text der Unterpunkte 15 Pixel dahinter. Der Einzug bleibt damit erhalten, nur verschiebt er nicht mehr die ganze Ebene nach aussen. */ .untermenue ul{padding:4px var(--spur) clamp(14px,3vw,20px) calc(var(--spur) + 15px); gap:clamp(11px,2.4vw,15px)} /* Die Marke im Logo-Winkel setzt die Unterpunkte gegen den Hauptpunkt ab. Sie ersetzt die Einrueckung als alleiniges Mittel: Bei einer Zeile, die ueber zwei Zeilen laeuft, traegt der Einzug allein nicht. */ .untermenue a{position:relative;font-size:17px} .untermenue a::before{content:"";position:absolute;left:-15px;top:.42em; width:3px;height:13px;background:var(--signal); transform:skewX(var(--logowinkel))} } /* Der Keil. Die negativen Aussenabstaende heben ihn ueber die Polsterung der Leiste, damit er wirklich von Oberkante bis Unterkante laeuft und rechts bis an den Fensterrand. */ .kopfrechts{ position:relative;isolation:isolate; display:flex;align-items:center;gap:4px; /* Keine negativen Aussenabstaende mehr: Die Leiste traegt jetzt eine Hoehe, und align-items:stretch streckt den Keil von selbst auf sie. */ padding-right:var(--spur); padding-left:calc(var(--keil) + clamp(16px,1.8vw,30px)); transition:padding-left .35s var(--tempo); } /* Die Flaeche liegt als eigenes Kind darunter und ist GESCHERT, nicht beschnitten (Entscheid 26.08.). Vorher trug .kopfrechts selbst einen clip-path, dessen Versatz aus --keil kam, und --keil rechnet aus --kopfh. Beim Umschalten auf .fest springt --kopfh sofort von 96 auf 70, die Hoehe der Leiste laeuft aber ueber 0,35s dorthin. In dieser Zeit stand ein Versatz von 22,7px an einer Kante, die noch 96px hoch war: gemessen 13,3 Grad statt 18. Beim Zurueckscrollen kippte es andersherum auf 24 Grad. Sichtbar war das als kurzes Kippen der Kante bei jedem Scrollwechsel. Ein skewX kennt keine Hoehe. Der Winkel bleibt 18 Grad, egal wo die Animation gerade steht. Der Ueberstand nach rechts faengt ab, dass die Scherung auch die rechte Kante schraeg stellt; er liegt ausserhalb des Fensters und erzeugt keinen Scrollbereich, weil die Leiste position:fixed traegt. */ .kopfrechts::before{ content:"";position:absolute;z-index:-1; top:0;bottom:0;left:0;right:-30vw; background:var(--feuer); transform:skewX(var(--neig));transform-origin:0 100%; } /* Seit dem 27.08. dieselbe Schrift wie die Navigation daneben: Der Aufruf steht in derselben Leiste und soll nicht als Fremdkoerper darin sitzen. Grad 12,5 statt 16, aus demselben Grund wie in der Navigation: Syncopate laeuft weit. Der Aufruf bleibt trotzdem der kraeftigste Punkt der Leiste, weil er als einziger einen Strich unter sich traegt. */ .kopfcta{ white-space:nowrap; font-family:'Syncopate',sans-serif;font-size:12.5px;font-weight:400; letter-spacing:.06em;text-transform:uppercase; /* Kraeftiger als die Menuepunkte daneben (0,4px): Er ist der Aufruf und darf der schwerste Punkt der Leiste sein. 0,7px ist etwa die Mitte zwischen den beiden Schnitten, die Syncopate hat; der Schnitt 700 waere hier zu viel und wuerde die Punzen bei 12,5px zulaufen lassen. */ -webkit-text-stroke:.7px currentColor; color:var(--tief);transition:opacity .25s; position:relative; } @media(min-width:1025px) and (max-width:1199px){ .kopfcta{font-size:11.5px;letter-spacing:.03em} } /* Der geneigte Strich unter dem Aufruf ist am 27.08. entfallen. Er stammte aus der Zeit, als die Leiste durchgehend Archivo trug und der Aufruf sich von den Menuepunkten absetzen musste. Seit alles in Syncopate steht, trennt ihn schon der Grund: Er sitzt als einziger auf der orangen Flaeche und traegt als einziger braune Schrift. Der Strich war damit ein zweites Signal fuer dieselbe Sache. */ .kopfcta:hover{opacity:.66} .kopfcta{margin-right:clamp(8px,1vw,16px)} /* Telefon und Nachricht als Zeichen, wie in der Vorlage neben der Menuetaste. Die Nummer bleibt damit sichtbar und erreichbar, ohne den ersten Platz zu beanspruchen: Der schriftliche Weg fuehrt weiterhin (Kundenentscheid 14.08.). */ .kopfzeichen{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--tief);transition:opacity .25s} .kopfzeichen:hover{opacity:.66} .kopfzeichen svg{width:26px;height:26px} /* Die Menuetaste rueckt ab: Telefon und Nachricht gehoeren zusammen, das Klapp-Panel ist ein anderer Vorgang. */ .kopfrechts .menuetaste{margin-left:clamp(16px,1.8vw,30px)} /* Die Menuetaste traegt seit dem 25.08. nur noch die schmalen Fenster. Ab 1020px steht die Leiste selbst da und die Taste waere ein zweiter Weg zu denselben Seiten. */ .menuetaste{display:flex;flex-direction:column;justify-content:center;gap:6px;width:38px;height:38px;padding:0 4px;background:none;border:0;cursor:pointer} @media(min-width:1020px){.menuetaste{display:none}} .menuetaste span{display:block;height:2.5px;background:var(--tief);transition:transform .3s var(--tempo),opacity .3s} body.menueoffen .menuetaste span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} body.menueoffen .menuetaste span:nth-child(2){opacity:0} body.menueoffen .menuetaste span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} /* ── Das Klapp-Panel unter 1020px ─────────────────────────────────── Es haengt an der Unterkante der Kopfleiste und faehrt von dort auf. Die Leiste aendert ihre Hoehe beim Scrollen (.fest setzt --kpad und --logoh herunter), --kopfh rechnet das mit, und weil die Navigation ein Kind der Leiste ist, erbt sie den Wert. Das Panel rutscht dadurch von selbst nach. Fest verankert, nicht mitlaufend im Fluss: Die Leiste selbst steht fixed, ein Panel im Fluss waere unter dem Hero verschwunden. */ @media(max-width:1019px){ .hauptnav{ position:fixed;top:var(--kopfh);left:0;right:0; display:block;background:var(--tief); max-height:0;overflow:hidden; /* visibility, nicht nur die Hoehe: Ein Panel mit Hoehe null blendet zwar aus, seine Links bleiben aber in der Tabreihenfolge. Wer mit der Tastatur arbeitet, liefe sonst durch vierzehn unsichtbare Ziele. */ visibility:hidden; transition:max-height .42s var(--tempo),visibility 0s linear .42s; } body.menueoffen .hauptnav{ /* Gerechnet aus --kpad und --logoh, NICHT aus --kopfh. Jenes ist selbst ein calc; in ein zweites calc gesetzt, faellt die Deklaration aus und das Panel blieb auf Hoehe null stehen, waehrend die Sichtbarkeit aus derselben Regel griff. Gemessen am 25.08., der Fehler war von aussen nicht zu sehen: Die Taste reagierte, es tat sich nur nichts. */ max-height:calc(100svh - var(--kpad) * 2 - var(--logoh));overflow-y:auto; visibility:visible;transition:max-height .42s var(--tempo),visibility 0s; /* Der Fuss des Panels braucht Luft, sonst klebt der letzte Unterpunkt auf der Fensterkante, sobald alle vier Punkte offen stehen. */ padding-bottom:clamp(20px,5vw,34px); /* Die Unterkante braucht einen Abschluss. Das Panel ist braun, der Hero darunter ebenfalls dunkel: Ohne Linie hoert es einfach auf, und der Inhalt der Seite darunter liest sich als Fortsetzung des Menues. Derselbe Wert wie die Trennlinien zwischen den Punkten. */ border-bottom:1px solid rgba(245,242,237,.12); } .navreihe{display:block} /* Trennlinien statt Abstaenden: Vier Punkte untereinander ohne Linie sind eine Liste ohne Gliederung, sobald ein Untermenue offen steht. */ .navpunkt+.navpunkt{border-top:1px solid rgba(245,242,237,.12)} .navkopf{justify-content:space-between;padding:0 var(--spur)} /* Der Link traegt die volle Zeilenhoehe als Klickflaeche, der Pfeil sitzt als eigenes Feld daneben. So laesst sich die Uebersichtsseite auch dann erreichen, wenn der Punkt ein Untermenue hat. */ .navlink{flex:1;padding:clamp(15px,3.4vw,20px) 0;font-size:clamp(19px,2.4vw,22px)} .navpfeil{width:52px;height:52px;flex:none;margin-right:calc(var(--spur) * -1 + 6px)} .navpfeil svg{width:17px;height:17px} /* Kein einlaufender Strich im Panel: Er gehoert unter einen Punkt in einer waagrechten Leiste. Untereinander liegt er quer zur Leserichtung. */ .navkopf::after{display:none} /* Die Seite dahinter darf nicht mitscrollen, solange das Panel offen ist. */ body.menueoffen{overflow:hidden} } /* ══════════════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════════════ */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:104px var(--spur) 0;overflow:clip;background:var(--tief)} /* Sechs Motive im Wechsel. Darueber eine leichte Abdeckung: Sie ist die einzige Stelle, an der die Seite noch einen Verlauf traegt, weil Schrift auf Foto sonst nicht lesbar ist. Gemessen ohne Abdeckung lagen bis zu 54 Prozent der Ueberschriftflaeche unter 3:1, stellenweise bei 1,0:1, also unsichtbar. Die Abdeckung ist links und unten am staerksten, weil dort die Schrift steht, und laeuft nach rechts oben aus, damit das Motiv sichtbar bleibt. */ .hero .grund{position:absolute;inset:0;z-index:0} .hero .grund::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(96deg,rgba(31,25,20,.88) 0%,rgba(31,25,20,.74) 34%,rgba(31,25,20,.34) 72%,rgba(31,25,20,.2) 100%), linear-gradient(0deg,rgba(31,25,20,.72) 0%,rgba(31,25,20,.2) 34%,transparent 66%); } /* Ein einziges Motiv, keine Schau. Der Wechsel war Bewegung ohne Aussage und zwang sechs grosse Dateien in den ersten Ladevorgang (Entscheid 19.08.). */ .hero .grund img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 44%; filter:saturate(.88) contrast(1.04); } /* ══ Uebergang vom Standbild zum Video (Entscheid 27.08.) ═══════════════ Das Standbild steht rund eine Sekunde still. Erst dann faehrt eine Kante von rechts nach links durch und legt das Video frei. Die Kante traegt die 18 Grad der Bildkanten dieser Seite, nicht die 39,5 des Logo-F: Was hier freigelegt wird, ist ein Bild, und alle Bildkanten der Seite sind 18 Grad. Der waagrechte Versatz ist Hoehe mal tan(18) = 0,3249; der Hero ist 100svh hoch, also rund 33vh. Das Video spielt schon, bevor die Kante es freilegt (120ms Vorlauf im Skript). Sonst waere der erste sichtbare Frame ein Standbild und der Uebergang liefe ins Leere. Das Video liegt UNTER der Abdunklung (::after, z-index 1) und traegt denselben Ausschnitt und dieselbe Farbkorrektur wie das Bild darunter: Der Wechsel soll wie ein Aufwachen desselben Motivs wirken, nicht wie ein Schnitt auf eine andere Aufnahme. */ .hero .grund video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 44%; filter:saturate(.88) contrast(1.04); clip-path:polygon(calc(100% + 33vh) 0%, 200% 0%, 200% 100%, 100% 100%); } .hero .grund.videolaeuft video{animation:herowisch .78s cubic-bezier(.72,0,.16,1) forwards} @keyframes herowisch{ from{clip-path:polygon(calc(100% + 33vh) 0%, 200% 0%, 200% 100%, 100% 100%)} to {clip-path:polygon(0% 0%, 200% 0%, 200% 100%, calc(0% - 33vh) 100%)} } /* Die Kante selbst: ein schmaler Streifen, der mit der Schnittlinie mitlaeuft. Er ist das, was den Uebergang kraftvoll macht statt weich; ein reiner Wisch ohne Kante liest sich als Ueberblendung. Er liegt UEBER der Abdunklung (z-index 2 gegen 1), sonst frisst sie ihn. Ueber die Schrift kommt er trotzdem nicht: .grund hat selbst z-index 0 und ist damit ein eigener Stapel, .innen liegt darueber. */ .herokante{ position:absolute;top:-12%;bottom:-12%;left:0;width:22vw;z-index:2; pointer-events:none;opacity:0; background:linear-gradient(90deg, rgba(255,74,20,0) 0%, rgba(255,74,20,.34) 58%, rgba(255,74,20,.72) 82%, rgba(245,242,237,.92) 94%, rgba(245,242,237,0) 100%); transform:skewX(-18deg) translateX(150vw); } .hero .grund.videolaeuft .herokante{animation:herokante .78s cubic-bezier(.72,0,.16,1) forwards} @keyframes herokante{ 0% {transform:skewX(-18deg) translateX(150vw);opacity:0} 10% {opacity:1} 82% {opacity:1} 100%{transform:skewX(-18deg) translateX(-64vw);opacity:0} } /* Wer Bewegung abbestellt hat, bekommt sie auch hier nicht: Das Skript startet dann gar nicht, das Video bleibt ungeladen und das Standbild steht. Die Regel hier ist die zweite Sicherung, falls die Klasse doch gesetzt wird. */ @media(prefers-reduced-motion:reduce){ .hero .grund video{display:none} .herokante{display:none} .hero .grund.videolaeuft video{animation:none} } /* Raster, Zeiger-Glanz, Schein, Puls-Kreise und der Weiterlesen-Strich sind im Hero ersatzlos entfallen. Sie stammten aus der Speede-Referenz und lagen als Zierebene ueber dem Foto. */ .hero .innen{width:100%;z-index:2;padding-bottom:clamp(24px,3vw,42px)} /* Das Band der Kontaktwege. Es bricht aus dem Satzspiegel des Hero aus und laeuft ueber die volle Fensterbreite. Das Band ist zugleich das SICHTFENSTER: Die vier Felder sind hoeher als es, ihr Satz liegt unterhalb der Unterkante und ist deshalb nicht zu sehen. Beim Ueberfahren faehrt das Feld um genau diese Strecke hoch, der Satz kommt dadurch ins Fenster und blendet ein. Deshalb overflow:hidden. Die Felder liegen ohne Fuge nebeneinander. Die Schraege sitzt am Behaelter, nicht am einzelnen Feld: Bei gleicher Neigung fallen die Kanten benachbarter Felder zusammen, es entsteht keine Luecke. Oben und unten bleiben die Kanten waagrecht, geneigt sind nur die Seiten, wie bei den Knoepfen. Der Inhalt wird gegengeneigt, damit die Schrift aufrecht steht. */ .heroband{ /* Von clamp(34px,3.6vw,52px) heruntergesetzt (Entscheid 20.08.), am 28.08. ein zweites Mal auf clamp(16px,1.6vw,24px) (Kundenrueckmeldung Schleife 01, Punkt 2: Kachelreihe flacher). Der Wert steuert dreierlei zugleich, die Hochfahrstrecke, den oberen Innenabstand der Felder und den negativen Aussenabstand der Reihe. Er niedriger zu setzen macht das Band also nicht nur ruhiger, sondern auch flacher. Der Ueberstand der aktiven Kachel ueber die Bandkante haengt mit daran: gemessen bei 1600px von 19 auf 13 Pixel. */ --hub:clamp(16px,1.6vw,24px); /* Strecke, um die das Feld hochfaehrt */ --feldluft:clamp(12px,1.3vw,18px); /* Polster ueber dem Zeichen und unter dem Titel. Stand bis zum 28.08. als clamp(20px,2.2vw,32px) zweimal woertlich im Code, oben am Feld und unten in .wegin. Beide Stellen muessen denselben Wert tragen, sonst sitzt der Inhalt aus der Mitte; als Variable koennen sie nicht auseinanderlaufen. */ --feldpad:clamp(24px,2.4vw,38px); /* Innenabstand der Felder. Er muss die geneigte Kante freihalten: Oben liegt sie weiter rechts als unten, bei Innenabstand 0 schneidet sie in das Zeichen. */ position:relative;z-index:2; margin:clamp(26px,3vw,44px) calc(var(--spur) * -1) 0; background:var(--tief); /* Beschnitt NUR an der Unterkante: Der Satz bleibt unterhalb der Kante verborgen, das Feld darf beim Hochfahren aber oben aus dem Band herausragen. overflow:hidden koennte das nicht, es schneidet auf allen vier Seiten. */ clip-path:inset(-80vh -100vw 0 -100vw); /* Aufteilung wie bei jeder anderen Sektion: der Seitenabstand aussen, die Spaltenbreite innen. Beides am selben Element ergaebe den Abstand doppelt und die Felder staenden gegen den Rest der Seite eingerueckt. */ padding:0 var(--spur); } .bandinnen{max-width:1320px;margin:0 auto} .wegreihe{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); /* Um den Innenabstand nach links gezogen, damit der Inhalt des ersten Feldes trotz Innenabstand mit der Spaltenkante flieht. Die Flaeche darf dabei ueber die Spalte hinausstehen, sie liegt auf dem randlosen braunen Grund. Die Reihe steht um den Hub ueber die Unterkante hinaus. Das Band schneidet das ab, dadurch liegt der Satz ausserhalb des Fensters. Ohne diese Zeile bestimmt das Feld die Bandhoehe selbst und beim Hochfahren entsteht unten eine Luecke. */ margin-bottom:calc(var(--hub) * -1); margin-left:calc(var(--feldpad) * -1); } .wegfeld{ position:relative;display:block;isolation:isolate; padding:calc(var(--hub) + var(--feldluft)) 0 0; transform:translateY(0); transition:transform .34s var(--tempo); } /* Die Neigung liegt auf einer eigenen Hintergrundflaeche, nicht auf dem Feld selbst. Grund: Wuerde das Feld geneigt und der Inhalt gegengeneigt, drehten beide um verschiedene Mittelpunkte, weil der Inhalt tiefer sitzt als die Feldmitte. Uebrig bliebe ein waagrechter Versatz, und die Zeichen staenden nicht mehr in der Flucht der uebrigen Sektionen. Die Neigung sitzt je Feld, nicht am Behaelter: Am Behaelter schoebe sie eine zweite Reihe seitlich gegen die erste. Weil alle Felder gleich hoch sind und um ihre eigene Mitte scheren, fallen benachbarte Kanten trotzdem zusammen. */ .wegfeld::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--tief);border-radius:var(--rund);transform:skewX(var(--knneig)); transition:background .38s var(--tempo); } /* z-index, weil spaeter stehende Nachbarfelder sonst ueber der angehobenen Karte liegen und deren schraege Kante beschneiden. */ .wegfeld:not(.wegfeld--angabe):hover{transform:translateY(calc(var(--hub) * -1));z-index:3} .wegfeld:not(.wegfeld--angabe):hover::before{background:var(--feuer)} /* Das untere Polster traegt seit dem 26.08. den Hub, vorher tat das der Satz unter dem Titel. Er ist entfallen, die Hochfahrbewegung nicht: Das Feld muss um genau diese Strecke hoeher sein als sein Inhalt, sonst reisst beim Hochfahren unten eine Luecke ins Band. Der Raum bleibt leer, sichtbar ist dort nur die Flaeche des Feldes. */ .wegin{ display:block; padding:0 var(--feldpad) calc(var(--feldluft) + var(--hub)); } /* Die Zeichen tragen den Akzent wie die 24-Stunden-Zahl. Gerechnet 5,2:1 auf Braun, fuer eine Grafik liegt die Schwelle bei 3:1. */ .wegzeichen{display:block;width:clamp(34px,3.2vw,44px);height:clamp(34px,3.2vw,44px); color:var(--signal);margin-bottom:clamp(10px,1.2vw,15px);transition:color .3s var(--tempo)} .wegzeichen svg{width:100%;height:100%} .wegtitel{display:block;font-family:'Archivo',sans-serif;font-size:clamp(16.5px,1.6vw,20px); font-weight:800;font-stretch:84%;letter-spacing:-.005em;color:var(--weiss); transition:color .3s var(--tempo)} /* Der Satz sitzt unter der Fensterkante und ist erst nach dem Hochfahren zu sehen. Die Hoehe ist genau der Hub, sonst passt die Strecke nicht. */ /* nowrap ist Pflicht: Die Hoehe ist genau der Hub, eine zweite Zeile wuerde abgeschnitten. Die Saetze sind deshalb auf rund 30 Zeichen begrenzt. */ /* Das Angabe-Feld ("24 h") ist ueberall ausgenommen: :hover greift in CSS auch auf einem div, es wuerde sonst weiter aufleuchten und hochfahren, obwohl nichts anklickbar ist. */ .wegfeld:not(.wegfeld--angabe):hover .wegzeichen, .wegfeld:not(.wegfeld--angabe):hover .wegtitel{color:var(--tief)} /* Ein Feld steht von vornherein ausgefahren, das Anmeldeformular (Entscheid 20.08.). Es ist der Weg, ueber den ein Rezept mitkommt, und damit der wichtigste. Faehrt man ein anderes Feld an, tritt es zurueck; das regelt .wegreihe:hover ohne Skript. Nur auf Desktop: Unter 1200px gibt es kein Ueberfahren und die Saetze stehen ohnehin alle da. */ @media(min-width:1200px){ /* Es steht nur zu 55 Prozent ausgefahren. Erst beim Ueberfahren geht es auf die volle Strecke (Entscheid 20.08.). Die Bewegung, die dabei entsteht, sagt: hier laesst sich klicken. Stuende es sofort ganz oben, waere es eine Flaeche wie jede andere. Der Satz bleibt dabei verborgen: Er sitzt unter der Bandkante und ist genau einen Hub hoch, bei halber Strecke waere er halb abgeschnitten. */ .wegfeld--aktiv{transform:translateY(calc(var(--hub) * -.55));z-index:2} .wegfeld--aktiv::before{background:var(--feuer)} .wegfeld--aktiv .wegzeichen, .wegfeld--aktiv .wegtitel, .wegfeld--aktiv .wegzahl{color:var(--tief)} .wegfeld--aktiv:hover{transform:translateY(calc(var(--hub) * -1))} /* Sobald die Reihe ueberfahren wird, gilt der Zustand nur noch dort, wo der Zeiger steht. */ .wegreihe:hover .wegfeld--aktiv:not(:hover){transform:translateY(0);z-index:1} .wegreihe:hover .wegfeld--aktiv:not(:hover)::before{background:var(--tief)} .wegreihe:hover .wegfeld--aktiv:not(:hover) .wegzeichen, .wegreihe:hover .wegfeld--aktiv:not(:hover) .wegzahl{color:var(--signal)} .wegreihe:hover .wegfeld--aktiv:not(:hover) .wegtitel{color:var(--weiss)} } /* Die Zahl steht an der Stelle des Zeichens und traegt dessen Groesse. */ /* Hoehe und unterer Abstand muessen denselben Wert tragen wie .wegzeichen, sonst sitzt die Zahl nicht auf der Grundlinie der drei Zeichen daneben. Am 03.09. alle drei Werte zusammen heruntergesetzt (Kundennotiz 1). */ .wegzahl{display:flex;align-items:center;height:clamp(34px,3.2vw,44px); font-family:'Archivo',sans-serif;font-size:clamp(29px,2.8vw,38px);font-weight:800; font-stretch:74%;line-height:1;color:var(--signal);margin-bottom:clamp(10px,1.2vw,15px); transition:color .3s var(--tempo)} .wegfeld:not(.wegfeld--angabe):hover .wegzahl{color:var(--tief)} /* Vier Felder nebeneinander brauchen Platz. Gemessen laufen unterhalb von rund 1200 Pixeln die Saetze und sogar der Titel „Anmeldeformular" ueber ihre Spalte. Ab dort also zwei mal zwei. Ohne Zeigegeraet gaebe es dort ausserdem kein Ueberfahren, deshalb kein Hub und die Saetze stehen von vornherein da. */ @media(max-width:1199px){ /* Ohne Ueberfahren kein Hub. Auf 0 gesetzt statt einzeln zurueckgenommen: Der Wert steuert Hochfahrstrecke, oberes Feldpolster, unteres Polster in .wegin und den negativen Aussenabstand der Reihe zugleich. */ .heroband{--hub:0px} .wegreihe{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0} .wegfeld{padding-top:clamp(20px,5vw,30px)} .wegfeld:hover{transform:translateY(0)} .wegfeld:hover::before{background:var(--tief)} .wegfeld:hover .wegzeichen{color:var(--signal)} .wegfeld:hover .wegtitel{color:var(--weiss)} .wegfeld:hover .wegzahl{color:var(--signal)} .wegzeichen{width:34px;height:34px;margin-bottom:11px} .wegzahl{height:34px;font-size:30px;margin-bottom:11px} .wegtitel{font-size:16px} } @media(prefers-reduced-motion:reduce){ .wegfeld:hover{transform:translateY(0)} .wegfeld:hover::before{background:var(--tief)} } /* Silhouette: drei ungleich lange Zeilen, jede mit eigener Breiten-Achse */ .h1z--1{font-stretch:var(--w1)} .h1z--2{font-stretch:var(--w2)} .h1z--3{font-stretch:var(--w3)} /* Weisse Displayschrift bekommt einen Verlauf von oben nach unten plus einen weichen Schein um die Buchstaben. Der Schein sitzt als drop-shadow, weil text-shadow bei background-clip:text nicht durchkommt. */ .tonverlauf{ color:var(--weiss); } .glut .tonverlauf{color:var(--signal)} .kap:not(.hell):not(.feuer) .d1,.kap:not(.hell):not(.feuer) .d2,.hero .d1{filter:drop-shadow(0 0 14px rgba(245,242,237,.07))} .glut .d1,.glut .d2{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--signal) 10%,transparent))} /* Achtung: background ist eine Kurzschreibweise und setzt background-clip zurueck. Ohne die Wiederholung darunter wird die Ueberschrift zu einer gefuellten Flaeche statt zu gefuellter Schrift. */ .hell .tonverlauf,.feuer .tonverlauf{color:var(--tinte);filter:none} /* Die Ortsangabe bleibt in der H1, tritt aber zurueck: sie ist fuer die Suche wichtig, fuer die Aussage nicht. */ .leise{color:var(--grau-still);font-weight:600;font-size:.6em;letter-spacing:.005em} .hell .leise,.feuer .leise{color:var(--tinte-grau)} .glut .leise{color:var(--signal-still)} /* Markierung im f3-Stil: Flaeche hinter dem Wort. Weil die Zeile geneigt ist, wird die Flaeche automatisch zum Parallelogramm im Logo-Winkel. */ .mark{background:var(--signal);color:var(--tief);padding:0 .1em .02em;margin-right:.16em;box-decoration-break:clone;-webkit-box-decoration-break:clone} /* Die technische H1 steht klein und gesperrt ueber dem Einleitungstext. Sie traegt das Fokus-Keyword vollstaendig, die grosse Aussage darueber ist bewusst nur optisch eine Ueberschrift und kein h1. */ /* Achtung: margin ist eine Kurzschreibweise. Der Versatz steht deshalb IN den beiden Regeln und nicht davor, sonst setzt die Kurzschreibweise ihn wieder auf null. Genau das war hier der Fall, der Wert hat nie gewirkt. */ /* Big Shoulders wie die Vorzeilen (Entscheid 25.08.). Funktional ist das dasselbe Element: die kleine Zeile ueber der grossen Aussage. Dass sie technisch die h1 ist und das Fokus-Keyword traegt, aendert daran nichts, Versalien kommen ueber text-transform und nicht aus dem Markup; ein Vorlesewerkzeug liest weiter die normale Schreibung. Sperrung 0,12em statt der 0,15em der Vorzeilen: Die Zeile ist mit 48 Zeichen rund dreimal so lang wie eine Vorzeile, und die Sperrung addiert sich ueber jedes davon. Der Grad steigt entsprechend weniger. */ .h1klein{ font-family:'Syncopate',sans-serif; font-size:clamp(10.5px,1vw,13px);font-weight:400; -webkit-text-stroke:.4px currentColor; letter-spacing:.05em;color:var(--grau);text-transform:uppercase; /* Der Ausgleich der Vorbreite steht IN der Kurzschreibweise. Als eigenes margin-left davor wuerde diese Zeile ihn wieder loeschen. */ margin:0 0 clamp(12px,1.4vw,18px) calc(var(--textlinks) - .1em); max-width:min(56ch,100%);line-height:1.5; } .optisch{margin:0} /* 62ch statt 41 (Entscheid 20.08.): Der Satz steht auf dem Desktop in drei Zeilen statt in fuenf. Gemessen kippt er ab 58ch auf drei; 62 gibt Reserve, falls die Schrift einmal anders faellt, und bleibt deutlich unter der Lesbarkeitsgrenze von 75 Zeichen je Zeile. */ .hero .kern{max-width:min(62ch,100%);margin:clamp(16px,1.9vw,24px) 0 0 var(--textlinks);font-size:clamp(15px,1.3vw,16.5px);line-height:1.55;color:var(--grau)} .hero .tasten{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(18px,2.1vw,26px)} /* Vertriebsanker. Rangfolge schriftlich vor Telefon, keine Zeitangabe. Ohne Rahmen und ohne Kaesten, getrennt nur durch Leerraum. */ .anker{margin-top:clamp(20px,2.4vw,32px);display:grid;gap:18px 40px} @media(min-width:820px){.anker{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:start}} .anker .weg{display:flex;flex-direction:column;gap:6px} /* Jede Zeile ist zweispaltig: Zeichen links, Titel oben rechts, ein Satz darunter. Der Satz laeuft auf genau EINE Zeile, sonst haben die vier Bloecke verschiedene Hoehen und die Reihe hat keine gemeinsame Unterkante. Alle Zeichen sind gefuellt und gleich gross bemessen. Duenne Konturen neben einer Schrift in Strichstaerke 800 wirken kraftlos, und eine gefuellte Marke neben zwei Konturen ergibt drei verschiedene Gewichte in einer Zeile. Sie liegen als Pfad im Markup, es wird nichts nachgeladen. */ .anker .weg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(13px,1.3vw,19px);align-items:center} .anker .wegzeichen{display:flex;align-items:center;justify-content:center;color:var(--weiss); width:clamp(34px,3vw,42px);height:clamp(34px,3vw,42px);flex:none} .anker .wegzeichen svg{width:100%;height:100%} .anker .wegtext{display:flex;flex-direction:column;gap:3px;min-width:0} .anker .weg a{font-family:'Archivo',sans-serif;font-size:clamp(18px,1.75vw,22px);font-weight:700;font-stretch:84%;color:var(--weiss);align-self:flex-start;letter-spacing:-.005em} /* Ohne > : Seit die Wege dreiteilig sind (Zeichen, Titel, Satz), ist das a kein direktes Kind mehr. Mit dem alten Selektor blieben die Titel auf --weiss und trugen auf Orange nur 3,0:1. */ .feuer .anker .weg a,.feuer .anker .weg span{color:var(--tinte)} .glut .anker .weg a,.glut .anker .weg span{color:var(--signal)} .anker .weg>a{transition:color .3s,opacity .3s} .anker .weg>a:hover{color:var(--signal)} .feuer .anker .weg>a:hover,.glut .anker .weg>a:hover{color:inherit;opacity:.72} .anker .weg small{font-size:13.5px;line-height:1.45;color:var(--grau-still);white-space:nowrap} .anker .zusage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.2vw,18px);align-items:center} .feuer .anker .weg small{color:var(--tinte-feuer)} .anker .zusage b{font-family:'Archivo',sans-serif;font-size:clamp(34px,3.4vw,46px);font-weight:800;font-stretch:74%;color:var(--signal);line-height:.9;text-align:center; min-width:clamp(34px,3vw,42px);white-space:nowrap} .feuer .anker .zusage b{color:var(--tinte)} .anker .zusage span{font-family:'Archivo',sans-serif;font-size:clamp(18px,1.75vw,22px);font-weight:700;font-stretch:84%;letter-spacing:-.005em;color:var(--weiss);line-height:1.2} .anker .zusage small{display:block;font-size:13.5px;font-family:'General Sans',sans-serif;font-weight:400;color:var(--grau-still);line-height:1.45;margin-top:3px;letter-spacing:0} .feuer .anker .zusage span{color:var(--tinte)} /* --grau-still traegt auf Orange 1,06:1, der Satz war dort praktisch unsichtbar. --tinte-feuer kommt auf 4,27:1. */ .feuer .anker .zusage small{color:var(--tinte-feuer)} /* Das Portrait laeuft ueber die GANZE Hoehe der Sektion, von Oberkante bis Unterkante, und bis zur rechten Fensterkante (Entscheid 20.08.). Es steht deshalb absolut und nicht im Textfluss. Die Schraege kommt hier NICHT aus clip-path: Der waagrechte Versatz waere Hoehe mal tan(18 Grad), und die Hoehe der Sektion steht nicht fest, sie haengt am Inhalt. Ein skewX kennt diesen Wert nicht und braucht ihn nicht. Das Bild darin wird gegengeneigt, damit das Motiv aufrecht bleibt, und leicht vergroessert, damit die gedrehten Ecken die Flaeche noch fuellen. */ .kontaktbild{position:relative;overflow:hidden; height:clamp(240px,52vw,380px); margin:clamp(30px,3.4vw,44px) 0 calc(var(--luft) * -1)} .kontaktbild img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:var(--bildpos,50% 16%); filter:saturate(.9) contrast(1.03)} @media(min-width:980px){ /* Die LINKE Kante ist geschraegt, oben weiter rechts als unten, wie bei jedem anderen Bild der Seite. Der Weg ueber skewX ist wieder verworfen: Ein Parallelogramm hat zwei geneigte Kanten, und das Ausblenden der zweiten durch Ueberstand zerstoert den Bildausschnitt, weil das Motiv dann in einer viel breiteren Flaeche sitzt als sichtbar ist. Stattdessen bekommt die Sektion eine bekannte Hoehe. Damit laesst sich clip-path in Pixeln rechnen, genau wie bei jedem anderen Bild: Versatz = Hoehe mal tan(18 Grad). min-height statt height, damit ein laengerer Text die Sektion trotzdem waechst; der Winkel weicht dann leicht ab. */ /* Der Innenabstand ist hier kleiner als in den uebrigen Sektionen: --luft ergibt bei 1440px allein 316px oben und unten zusammen, und die Sektion traegt nur Ueberschrift, einen Satz und vier Zeilen. --abh liegt bewusst nahe an der tatsaechlichen Hoehe: Weicht der Wert ab, weicht auch der Winkel des Anschnitts ab. Gemessen sind es bei 1440px rund 660px, deshalb 46vw. */ .abschluss{--abh:clamp(450px,42vw,635px);min-height:var(--abh); padding-block:clamp(64px,7vw,112px)} .kontaktbild{position:absolute;top:0;right:0;bottom:0;height:auto;margin:0; width:clamp(380px,45vw,780px); clip-path:polygon(calc(var(--abh) * .3249) 0,100% 0,100% 100%,0 100%)} .kontaktbild img{object-position:var(--bildpos,42% 18%)} /* Der Inhalt haelt Abstand zur geneigten Kante. */ .kontaktinhalt{max-width:min(68%,900px)} /* Vier Spalten in zwei Dritteln der Breite: Der Titel muss einen Grad kleiner, sonst passt "Anmeldeformular" nicht mehr in seine Spalte. */ .abschluss .anker .weg a{font-size:clamp(15.5px,1.35vw,18px)} .abschluss .anker .zusage span{font-size:clamp(15.5px,1.35vw,18px)} .abschluss .anker .zusage b{font-size:clamp(28px,2.6vw,36px)} .abschluss .anker .wegzeichen{width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px)} } /* Die vier Wege teilen sich hier nur zwei Drittel der Breite, nicht die volle. Unter 1400px reicht das nicht fuer vier Spalten: "Anmeldeformular" ist ein Wort, es bricht nicht um und laeuft aus seiner Spalte. Deshalb stehen sie dort in ZWEI Spalten und zwei Zeilen. Erst ab 1400px vier nebeneinander. */ @media(min-width:820px) and (max-width:1399px){ .abschluss .anker{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(min-width:980px) and (max-width:1399px){ .kontaktinhalt{max-width:min(70%,820px)} /* Die eigene Bildbreite fuer diesen Bereich ist am 27.08. entfallen. Sie erzeugte an der Grenze 1399/1400 einen Sprung von rund 110 Pixeln, und gemessen braucht sie es nicht: Die Ueberschrift behaelt auch mit der durchgehenden Breite ueberall mindestens 70 Pixel Luft zur geneigten Kante. */ } /* Kleiner als zuvor: Die Ueberschrift steht jetzt in einer Spalte und nicht mehr ueber die volle Breite. Mit clamp(38px,6.6vw,94px) waere sie dort dreizeilig geworden. */ /* Groesser und wieder zweizeilig (Entscheid 20.08.). Ohne die vier Saetze braucht die linke Spalte weniger Hoehe, dafuer darf die Ueberschrift mehr Breite nehmen. */ /* Der Grad haengt seit dem 03.09. an --sz1 statt an einem eigenen Wert. Grund: Als --sz1 in Schleife 03 von 5,7 auf 5,2vw fiel, blieb diese Zeile auf ihren 5,8vw stehen. Damit war die Abschluss-Ueberschrift ploetzlich lauter als die Hero-Zeile, gemessen 83,5 gegen 74,9 Pixel bei 1440, und die Seite gab ihre Tonhoehe am Ende vor statt am Anfang. Der Faktor 1,018 haelt genau den Abstand, den die beiden vorher hatten (5,8 zu 5,7). Die Grenzwerte sind im selben Verhaeltnis mitgezogen: 88 * (84/94) = 79, und 38 * (32/34) = 36. So kann der Abstand bei der naechsten Groessenaenderung nicht mehr auseinanderlaufen. */ .kontakttitel{font-size:clamp(36px,calc(var(--sz1) * 1.018),79px);max-width:21ch} /* Statt der Leiste aus vier Wegen steht hier ein Knopf (Entscheid 20.08.). Die vier Wege stehen unveraendert im Band unter dem Hero, dort sind sie der Einstieg; hier am Seitenende genuegt eine Handlung. */ .kontaktknopf{margin-top:clamp(30px,3.6vw,46px);padding-left:9px} .kontaktsatz{max-width:min(42ch,100%);margin-top:clamp(22px,2.6vw,32px); font-size:clamp(15.5px,1.5vw,18px)} /* Die vier Wege stehen nebeneinander. Sie teilen sich jetzt aber nur die linke Spalte, nicht mehr die volle Breite: Die Saetze duerfen deshalb umbrechen, white-space:nowrap ist hier aufgehoben. Die Bloecke richten sich oben aus, ungleiche Hoehen fallen dadurch nicht auf. */ .abschluss .anker{margin-top:clamp(36px,4.2vw,58px); gap:clamp(16px,1.8vw,24px) clamp(18px,2vw,30px);align-items:start} .abschluss .anker .weg small,.abschluss .anker .zusage small{white-space:normal} .abschluss .anker .weg{align-items:start} .abschluss .anker .wegzeichen{margin-top:2px} .klein{font-size:13px;color:var(--grau-still);margin-top:18px;max-width:min(62ch,100%)} .feuer .klein{color:var(--tinte-feuer)} /* Der Abstand nach oben stand vom 26.08. bis zum 31.08. auf clamp(52px,6vw,96px), also gut der Haelfte der uebrigen Sektionen. Die Begruendung damals: Der Hero endet mit dem Band der Kontaktwege, das selbst schon eine ruhige Flaeche ist, und die volle Luft darunter liess den Leitgedanken abreissen. Am 31.08. auf Kundenwunsch zurueckgedreht. Die Sektion traegt jetzt dieselbe Luft wie alle anderen, gemessen 168 statt 96 Pixel bei 1920. Die Sonderregel bleibt als Zeile stehen, damit der Weg zurueck an genau dieser Stelle dokumentiert ist und nicht in der Versionsgeschichte gesucht werden muss. Sie setzt bewusst denselben Wert wie .kap. */ #k01{padding-top:var(--luft)} /* ══ HALTUNG · Zitat, Bewertung, vier Punkte, Knopf ═══════════════════ Der Markenkern steht als grosses Zitat. Der Wortlaut ist belegt: Er kommt aus der Konzeption, Startseite Sektion 1, und war so beim Kunden. Normale Schreibung statt Versalien, obwohl es eine H2 ist: Ein Zitat ueber mehrere Zeilen ist in Versalien schwer lesbar. Linksbuendig wie die ganze Seite. Das oeffnende Anfuehrungszeichen haengt ueber den Satzspiegel hinaus, damit das E darunter in der Flucht steht. OFFENER PUNKT: Die Anzahl der Bewertungen ist ein Platzhalter. `regeln.md` Abschnitt 6 verbietet eine erfundene Zahl, die Sitemap R4 nennt rund 15 Bewertungen als Schwelle fuer die Anzeige. Kein Nachladen von Google, das Zeichen ist gezeichnet. ══════════════════════════════════════════════════════════════════════ */ /* Die Sektion steht auf Offwhite, die Farben drehen entsprechend. Die Sterne laufen in der dunklen Signalvariante: #FF4A14 ergibt auf Papier 3,1:1 und liegt damit an der Schwelle, #BC3209 kommt auf 5,2:1. */ .hell .grosszitat{color:var(--tinte)} /* Das Anfuehrungszeichen steht nicht mehr im Satz, sondern als grosses Zeichen dahinter, links oben. Bei 6 Prozent Deckkraft ist es Zierrat und keine zweite Aussage. Es liegt ueber dem Sektionsgrund und unter der Schrift, deshalb isolation plus negativer z-Index. */ .zitatfeld{position:relative;isolation:isolate} .zitatfeld::before{ content:"\201C"; position:absolute;z-index:-1;pointer-events:none; left:-.13em;top:-.17em; font-family:'Archivo',sans-serif;font-weight:800;font-stretch:88%; font-size:clamp(280px,44vw,640px);line-height:1; color:var(--tinte);opacity:.06; } .hell .bewertung .sterne svg{color:var(--signal-d)} .hell .bewertung .bwtext{color:var(--tinte-grau)} .hell .bewertung .bwtext b{color:var(--tinte)} .grosszitat{ margin:0; /* blockquote bringt eigene Aussenabstaende mit */ font-family:'Archivo',sans-serif;font-size:clamp(25px,3.3vw,48px);font-weight:600; font-stretch:88%;line-height:1.16;letter-spacing:-.015em;color:var(--weiss); /* Kein haengender Einzug mehr: Das Anfuehrungszeichen steht nicht mehr im Satz, das E beginnt direkt auf der Fluchtlinie. */ text-transform:none;max-width:min(37ch,100%); } .bewertung{ display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px; margin-top:clamp(26px,3vw,42px); } /* ── Die Bewertungs-Aussage fuehrt auf das Google-Profil (Entscheid 25.08.) Sie steht an vier Stellen und war ueberall eine tote Aussage: Wer sie pruefen wollte, musste selbst suchen. Das Ziel ist eine fremde Seite, deshalb der Pfeil nach rechts oben, dasselbe Zeichen wie bei den Ortslinks. Er sitzt in em und waechst mit der Schrift. Kein Nachladen von Google: Ein Link uebertraegt nichts, solange niemand klickt. Das Bewertungs-Widget von Google waere einwilligungspflichtig, ein Verweis darauf ist es nicht. ────────────────────────────────────────── */ a.bewertung,a.gzeile{transition:opacity .25s var(--tempo)} a.bewertung:hover,a.gzeile:hover{opacity:.7} /* Die Unterstreichung liegt am Satz, nicht an der ganzen Zeile: Sterne und Zeichen unterstreichen sich nicht, und eine Linie unter der ganzen Reihe waere so lang wie die Sektion breit ist. */ a.bewertung .bwtext,a.gzeile .gsatz{ border-bottom:1px solid transparent;padding-bottom:2px; transition:border-color .25s var(--tempo)} a.bewertung:hover .bwtext{border-bottom-color:currentColor} a.gzeile:hover .gsatz{border-bottom-color:currentColor} a.bewertung .pfeilob,a.gzeile .pfeilob{ width:.72em;height:.72em;flex:none;margin-left:-6px} a.bewertung:hover .pfeilob,a.gzeile:hover .pfeilob{transform:translate(2px,-2px)} /* Die Reihe darf nicht zwischen Satz und Pfeil umbrechen. */ a.gzeile{gap:4px 7px} .bewertung .sterne{display:flex;gap:4px} .bewertung .sterne svg{width:clamp(16px,1.5vw,20px);height:clamp(16px,1.5vw,20px);color:var(--signal)} .bewertung .gzeichen{width:clamp(17px,1.5vw,20px);height:clamp(17px,1.5vw,20px);flex:none} .bewertung .bwtext{font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:600; font-stretch:92%;color:var(--grau)} .bewertung .bwtext b{font-weight:800;color:var(--weiss)} /* Zwischentitel ueber den vier Punkten. H3, weil die H2 dieser Sektion das Zitat ist. Normale Schreibung, Versalien tragen nur H1 und H2. */ .punkttitel{font-family:'Archivo',sans-serif;font-size:clamp(21px,2.3vw,30px);font-weight:800; font-stretch:86%;letter-spacing:-.01em;line-height:1.1;color:var(--tinte); margin-top:clamp(46px,5.2vw,76px)} .punktereihe{display:grid;gap:clamp(26px,3vw,44px);margin-top:clamp(24px,2.8vw,38px)} /* Reihenfolge seit dem 31.08.: "Alles aus einer Hand" steht an zweiter Stelle (Kundenrueckmeldung). Damit stehen vorne die beiden Punkte zur Praxis und hinten die beiden zur Messung, und der Strich trennt genau da. Der Strich sitzt am DRITTEN Kind, nicht als eigenes Element: So verschiebt er das Raster nicht und faellt weg, sobald die Spalten umbrechen. Er laeuft senkrecht, solange alle vier nebeneinander stehen; bei zwei Spalten stuende er mitten in der ersten Zeile und wird deshalb waagrecht ueber den dritten Punkt gelegt. Einspaltig faellt er ganz weg, dort trennt der Abstand schon. */ @media(min-width:1040px){ .punktereihe>:nth-child(3){ border-left:1px solid var(--tinte-linie,rgba(31,25,20,.14)); padding-left:clamp(20px,2.2vw,34px); margin-left:calc(clamp(20px,2.2vw,34px) * -1 + clamp(13px,1.5vw,22px)); } } @media(min-width:640px) and (max-width:1039px){ .punktereihe>:nth-child(3){ border-top:1px solid var(--tinte-linie,rgba(31,25,20,.14)); padding-top:clamp(20px,2.6vw,30px)} } .leitgedanke .satzklein{max-width:min(30ch,100%)} @media(min-width:640px){.punktereihe{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1040px){.punktereihe{grid-template-columns:repeat(4,minmax(0,1fr))}} .haltungknopf{margin-top:clamp(38px,4.4vw,62px)} /* ══ LEITFORM · Bildanschnitt ═════════════════════════════════════════ Grundlage: 05_Design-Stil/Leitformen/leitformen.svg, Form 2. Zwei Festlegungen dazu, beide vom Nutzer am 19.08. entschieden: 1. Die Kanten laufen auf den beiden Projektwinkeln, 18 Grad wie die Schrift oder 39,5 Grad wie das Logo. Die Zeichnung war Augenmass und hatte acht verschiedene Winkel zwischen 18,3 und 40,2 Grad. 2. Die aeusseren Kanten einer Bildreihe sind senkrecht. Hier steht das Bild rechts, seine rechte Kante laeuft also gerade an den Fensterrand. Umgesetzt als clip-path mit einem Versatz in Pixeln, NICHT als skewX und nicht als clip-path in Prozent: · Prozent wuerde den Winkel mit jeder Bildhoehe aendern. · skewX haelt den Winkel zwar, verlangt aber, den Behaelter weit ueber den Fensterrand zu schieben, damit dort die zweite Schraege verschwindet. Dann liegt die Bildmitte ausserhalb des Sichtfelds, und das Motiv muss zusaetzlich gegengeneigt und vergroessert werden. Beides kostete hier den Bildinhalt. · Ein Pixelversatz ist exakt, solange die Hoehe bekannt ist. Deshalb steht sie als eigener Wert und nicht als min-height. Versatz = Hoehe x tan(18 Grad) = Hoehe x 0,3249. Achtzehn Grad, nicht 39,5: Die Seite kennt genau zwei Winkel. 18 Grad tragen alle grossen Schnittflaechen, also Knoepfe, Kopfleiste, Menue und Bilder. Die 39,5 Grad des Logos bleiben den kleinen Akzentzeichen vorbehalten, dem Strich vor den Vorzeilen und den Listenmarken. ══════════════════════════════════════════════════════════════════════ */ .mitbild{display:grid;gap:clamp(30px,4vw,58px);align-items:center} @media(min-width:980px){ .mitbild{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)} } /* Der Anschnitt liegt seit dem 28.08. am BILD, nicht mehr am Rahmen (Kundenrueckmeldung Schleife 01, Punkt 4). Grund: border-radius und clip-path schliessen einander aus. Wo ein clip-path steht, hat die Rundung keine Wirkung, der Rahmen bliebe scharfkantig. Jetzt traegt der Rahmen border-radius und overflow:hidden, das Bild darin den Anschnitt. Beide Beschnitte greifen nacheinander: Die drei rechten Winkel des Parallelogramms werden rund, die spitze Ecke oben links bleibt spitz. Das ist beabsichtigt, eine gerundete Spitze liest sich als Fehler. Voraussetzung ist, dass das Bild den Rahmen ganz ausfuellt; bei .leitbild ist es absolut auf inset:0 gesetzt. */ .leitbild,.leitbild.auf{ /* Am 31.08. von clamp(300px,32vw,500px) heraufgesetzt (Kundenrueckmeldung Schleife 01): Das Portraet brauchte mehr Hoehe. Der Wert steuert zweierlei: die Hoehe der Flaeche UND den Versatz des Anschnitts, der immer Hoehe mal tan(18 Grad) ist. Bei 620 Pixeln sind das 201 statt 162, der Anschnitt frisst also gut ein Fuenftel der Breite. Er trifft dort nur Wand, das Gesicht sitzt bei halber Bildbreite. Nebenwirkung, die beabsichtigt ist: Die Flaeche wird damit schmaler als das Bild und schneidet jetzt seitlich statt oben und unten. Der Kopf bekommt dadurch mehr Luft nach oben. */ /* Am 03.09. ein DRITTES Mal heraufgesetzt, diesmal am Faktor statt am Mindestwert (Kundenrueckmeldung: im geteilten Fenster stand nur noch der Kopf im Bild). Die beiden Erhoehungen davor haben die Untergrenze und die Obergrenze bewegt, nicht die Steigung, und genau dazwischen lag der Fehler: Zwischen rund 700 und 980 Pixeln laeuft der Rahmen ueber die volle Breite, die Hoehe stand dort aber immer noch auf der Untergrenze von 360. Gemessen bei 900 Pixeln: Rahmen 900 mal 340, also 2,65 zu 1 gegen ein Motiv von 1,60 zu 1. Vierzig Prozent der Bildhoehe fielen weg, und weil der Ausschnitt oben sitzt, blieb der Kopf allein stehen. 58vw haelt den Rahmen in diesem Bereich bei rund 1,7 zu 1, der Verlust faellt damit von 40 auf unter 10 Prozent. Ober- und Untergrenze bleiben, sie waren nie das Problem. */ /* Ab 980 Pixeln steht der Rahmen zweispaltig und ist gemessen rund 0,46 mal der Fensterbreite (453 bei 980, 666 bei 1440, 905 bei 1920). Fuer ein Motiv von 1,6 zu 1 muss die Hoehe also rund 0,29 mal der Fensterbreite sein. Am 03.09. von 58vw korrigiert: Mit 58vw war der Rahmen ab 980 HOEHER als breit (453 mal 568) und schnitt seitlich die Haelfte weg. Der Wert galt fuer den einspaltigen Fall darunter und war hier schlicht falsch uebernommen. Unterhalb von 980 zaehlt diese Zeile ohnehin nicht, dort setzt die Regel in der Medienabfrage die Hoehe direkt. */ --leith:clamp(290px,29vw,620px); position:relative;overflow:hidden;height:var(--leith); border-radius:var(--rund-bild); transform:translateY(var(--aufy,0px)); } @media(min-width:980px){ .leitbild,.leitbild.auf{margin-right:calc(var(--spalte) * -1)} } /* Der Ausschnitt haengt an einer Variablen, die Form nicht: Zwei Sektionen teilen sich diese Bildform, jede mit eigenem Motiv (Entscheid 20.08.). */ .leitbild img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; /* ══ GERUNDETE ANSCHNITT-ECKEN ═══════════════════════════════════════ Die beiden linken Ecken eines angeschnittenen Fotos sitzen NICHT an den Ecken des Rahmens, sondern dort, wo die Schraege auf die Ober- und die Unterkante trifft. Dorthin kommt border-radius prinzipiell nicht, der rundet nur die vier Ecken der Rahmenbox. Nachgemessen am 28.08.: Am grossen Foto aendert border-radius genau 14 Pixel, praktisch nichts. Die Rundung steckt deshalb im Anschnitt selbst. Der Kreisbogen ist mit vier Punkten je Ecke angenaehert; bei acht Pixeln ist der Unterschied zu einem echten Bogen unter einem halben Pixel. Alle Werte sind Vielfache von --rund-bild, die Variable bleibt also die Stellschraube. Sie stammen aus der Tangentenrechnung: An der oberen Ecke stehen 108 Grad, an der unteren 72; der Tangentenabstand ist r/tan(a/2), also .7265r oben und 1.3764r unten. Die beiden RECHTEN Ecken bleiben im Polygon scharf, sie sitzen an den Rahmenecken und werden dort von border-radius gerundet. ═════════════ */ clip-path:polygon( calc(var(--leith) * .3249 + var(--rund-bild) * .7265) 0, 100% 0, 100% 100%, calc(var(--rund-bild) * 1.3764) 100%, calc(var(--rund-bild) * .9224) calc(100% - var(--rund-bild) * .109), calc(var(--rund-bild) * .5674) calc(100% - var(--rund-bild) * .4122), calc(var(--rund-bild) * .3887) calc(100% - var(--rund-bild) * .8436), calc(var(--rund-bild) * .4253) calc(100% - var(--rund-bild) * 1.309), calc(var(--leith) * .3249 - var(--rund-bild) * .2245) calc(var(--rund-bild) * .691), calc(var(--leith) * .3249 - var(--rund-bild) * .0825) calc(var(--rund-bild) * .4122), calc(var(--leith) * .3249 + var(--rund-bild) * .1388) calc(var(--rund-bild) * .191), calc(var(--leith) * .3249 + var(--rund-bild) * .4175) calc(var(--rund-bild) * .0489)); object-position:var(--bildpos,62% 26%);filter:saturate(.88) contrast(1.04); } /* ══ FREIGESTELLTES MOTIV, ENTFALLEN AM 28.08. ════════════════════════ Der Leitgedanke trug vom 26.08. bis zum 28.08. ein freigestelltes Portraet mit durchsichtigem Bereich oben, aus dem nur der Kopf herausragte. Dafuer stand hier eine eigene Rahmenform: aspect-ratio statt fester Hoehe, ein clip-path in Prozent und ein img ohne die Bildbehandlung der Seite. Ersetzt durch ein Beratungsfoto (Kundenrueckmeldung Schleife 01, Punkt 3). Ein Foto ohne Transparenz kann diese Form nicht tragen, die Sektion laeuft deshalb wieder mit der normalen Bildform .leitbild wie die Teamsektion. Die Regeln sind entfernt statt auskommentiert stehen zu lassen: Ein toter Block, den keine Klasse mehr trifft, wird beim naechsten Umbau als verbindlich gelesen. Das freigestellte Bild selbst liegt weiterhin unter assets/bilder/gareth-vogelbruch-inhaber-freigestellt.{webp,png}; der Weg zurueck ist die Klasse .leitbild--frei plus diese Regeln aus der Fassung vom 27.08. */ /* Schmale Fenster: kein Anschnitt, sonst bleibt vom Motiv nichts uebrig. */ @media(max-width:979px){ /* Der Deckel stand bis zum 03.09. auf 340 Pixeln, und DAS war der Fehler, nicht der Faktor: Zwischen rund 590 und 979 Pixeln lief der Rahmen ueber die volle Breite, die Hoehe blieb aber bei 340 stehen. Gemessen bei 900 Pixeln 900 mal 340, also 2,65 zu 1 gegen ein Motiv von 1,60 zu 1: vierzig Prozent der Bildhoehe fielen weg, und weil der Ausschnitt oben sitzt, blieb der Kopf allein im Bild. Aufgefallen ist es im geteilten Fenster. 580 haelt den Rahmen ueber den ganzen Bereich bei rund 1,7 zu 1. */ .leitbild,.leitbild.auf{height:clamp(240px,58vw,580px); margin-inline:calc(var(--spur) * -1)} .leitbild img{clip-path:none} .leitbild img{object-position:var(--bildpos-eng,58% 22%)} } /* ══════════════════════════════════════════════════════════════════════ SPALTEN OHNE KAESTEN Alle mehrteiligen Inhalte laufen als reine Spalten, getrennt durch Leerraum. Kein Rahmen, kein Rasterhintergrund, kein Innenabstand. ══════════════════════════════════════════════════════════════════════ */ .spalten{display:grid;gap:clamp(34px,3.6vw,56px)} @media(min-width:680px){.spalten--2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:680px){.spalten--3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1040px){.spalten--3{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:680px){.spalten--4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1100px){.spalten--4{grid-template-columns:repeat(4,minmax(0,1fr))}} .punkt-kopf{display:flex;align-items:center;gap:11px;margin-bottom:14px} /* Zweizeilige Ueberschriften duerfen den Fliesstext nicht gegen die Nachbarspalte verschieben, sonst steht keine Grundlinie mehr. */ @media(min-width:680px){.spalten--4 h3{min-height:2.32em}} /* Die Groesse steht hier und nicht mehr als width/height im Markup. Sie war dort das einzige Mass der Seite, das nicht aus dem Stylesheet kam; beim Neuzeichnen der Zeichen ging sie verloren und die vier Bilder liefen auf die SVG-Standardgroesse von 300 Pixeln auf. */ .punkt-kopf svg{width:24px;height:24px;flex:none;color:var(--grau-still)} .hell .punkt-kopf svg{color:var(--tinte-still)} .satzklein{font-size:15.5px;line-height:1.62} /* Liste, ein Stil auf der ganzen Seite, Marke im Logo-Winkel */ .liste{list-style:none;margin:0;padding:0;display:grid;gap:13px} .liste li{display:flex;align-items:baseline;gap:13px;font-size:16px;line-height:1.5} /* Die Punkte der beiden Wegkarten tragen ein Haken statt der geneigten Marke (Entscheid 20.08.). Die Form ist derselbe Pfad wie beim Zeichen ueber "Was du davon hast" in der Kraftmessung, damit es EIN Haken auf der Seite bleibt. Als Maske, nicht als Bild, damit die Farbe steuerbar bleibt. */ .liste li::before{content:"";width:15px;height:15px;flex:none;position:relative;top:3px; background:var(--signal); -webkit-mask:var(--haken) center/contain no-repeat; mask:var(--haken) center/contain no-repeat} .hell .liste li::before{background:var(--signal-d)} /* ══════════════════════════════════════════════════════════════════════ BESCHWERDEN · reine Textspalten, kein Kasten, kein Rahmen ══════════════════════════════════════════════════════════════════════ */ /* ══ BESCHWERDEN ══════════════════════════════════════════════════════ Sechs Regionen als Karten. Jede Karte traegt eine eigene Flaeche, eine Stufe heller als der Sektionsgrund (--tief-auf, gerechnet 1,14:1 dagegen). Das ist der einzige Ort der Seite mit einer dritten Flaechenstufe; er ist begruendet, weil sechs gleichwertige Einstiege sonst nur durch Leerraum getrennt waeren und die Sektion dadurch auseinanderfaellt. AUSNAHME ZUR LEITFORM: Das Foto ist hier ein RECHTECK, nicht angeschnitten. Die Karte ist bereits die Form; ein zweiter Anschnitt darin waere eine Form in der Form. Entscheid 19.08. Abschnitt 8 der Spec ist entsprechend zu ergaenzen. Das Foto laeuft NICHT bis an den Kartenrand. Die Karte hat rundum dieselbe Polsterung, das Bild sitzt darin. So bleibt die Flaeche der Karte als Rahmen sichtbar und die Karte liest sich als ein Objekt, nicht als Bild mit Textanhang. Entscheid 19.08. Kein Pfeil-Anreisser unter dem Text. Er war unsichtbar und reservierte trotzdem Platz, die Karte bekam dadurch einen leeren Streifen unten. Die ganze Karte ist der Link, der Pfeil war Zierde. Entscheid 19.08. Nur EINE Ueberschrift je Karte, der Koerperteil. Eine Diagnosezeile darueber oder darunter waere eine zweite Ueberschriftenebene in einem Element, das dafuer zu klein ist. Entscheid 19.08. ══════════════════════════════════════════════════════════════════════ */ .regionen{display:grid;gap:clamp(24px,2.6vw,40px); grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,4.6vw,72px)} @media(min-width:620px){.regionen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1040px){.regionen{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Die Karte traegt beim Hovern die ganze Bewegung: sie waechst um 6 Prozent. Das Motiv darin zoomt NICHT zusaetzlich, sonst laeuft eine Bewegung gegen die andere. Die Kompoundwahl .region,.region.auf ist noetig, weil .auf spaeter im Blatt steht und sonst die Transform hier ueberschreibt. */ /* Die Karten kommen langsamer und aus groesserer Entfernung als der Rest der Seite (Kundenrueckmeldung 31.08.: langsam und sachte). Drei Werte zusammen machen den Unterschied, einer allein reicht nicht: die Dauer von 660 auf 950 Tausendstel, der Weg von 16 auf 24 Pixel und der Versatz zwischen zwei Karten von 65 auf 130. Bei sechs Karten steht die letzte damit nach rund 1,6 Sekunden. Das traegt hier, weil die Reihe beim Scrollen erscheint und niemand auf sie wartet; an einem Menue waere dieselbe Zeit unbrauchbar. --auf-stufe liest das Einblende-Skript aus. */ .region,.region.auf{display:flex;flex-direction:column;position:relative; --aufy:24px;--auf-stufe:130; background:var(--tief-auf);color:var(--grau);padding:clamp(16px,1.6vw,22px); border-radius:var(--rund); transform:translateY(var(--aufy,0px)) scale(var(--kzoom,1)); /* opacity und transform tragen die Einblendung beim Scrollen und bleiben bei 950; background ist der Hover und laeuft auf der Knopfzeit. */ transition:opacity .95s var(--tempo),background .3s var(--tempo), transform .95s var(--tempo)} /* Im sichtbaren Zustand muss --aufy wieder auf null, sonst bliebe die Karte um ihren eigenen Weg verschoben stehen: Die allgemeine Regel .auf.sicht setzt den Wert, den sie selbst kennt, nicht den hier ueberschriebenen. */ .region.auf.sicht{--aufy:0px} /* Der Hover war am 27.08. entfallen, mit der Begruendung: Ohne Verweis waere ein Aufleuchten beim Ueberfahren die Behauptung einer Klickflaeche, die es nicht gibt. Am 03.09. hat der Kunde ihn zurueckbestellt (Notiz 5 Schleife 02: "wenn man mit der Maus drueber wischt, dass das Kaestchen sich etwas abhebt"). Der Einwand von damals bleibt richtig, deshalb ist das hier eine FLAECHENREAKTION und kein Knopfverhalten: kein cursor:pointer, kein Zeiger, kein Verweis, kein Hochfahren, nur die Flaeche eine Stufe heller und das Motiv eine Spur wacher. --tief-hell ist der dafuer vorgesehene Token, er traegt laut Tokenblock genau den Karten-Hover. Die Flaeche hebt sich damit um 1,29:1 vom Grund ab, dieselbe leise Stufe wie der einlaufende Balken unter den Knoepfen. transform bleibt unangetastet: Es traegt die Einblendung beim Scrollen mit 950 Tausendstel Dauer, und ein Hover in dieser Zeit fuehle sich klebrig an. @media(hover:hover) schliesst Tippgeraete aus, wo :hover nach der Beruehrung haengen bleibt. */ .region{text-decoration:none} /* Der Zeilenverweis am Fuss der Kachel. Er steht immer da, nicht erst beim Ueberfahren: Ein Ziel, das man erst sieht, wenn man schon dort ist, hilft niemandem, und auf Tippgeraeten gibt es kein Ueberfahren. Beim Ueberfahren rueckt nur der Pfeil weiter, wie bei jedem anderen Textverweis der Seite. */ .regweiter{display:inline-flex;align-items:center;gap:9px;margin-top:15px; font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:600;font-stretch:92%; color:var(--weiss);transition:gap .3s var(--tempo)} .regweiter svg{width:14px;height:14px;flex:none;color:var(--signal)} /* Das Motiv braucht ein eigenes Sichtfenster fuer den Zoom, sonst waechst das Bild ueber die Kachelkante hinaus. .regbild hat overflow:hidden bereits. */ .regbild img{transform:scale(var(--bzoom,1));transform-origin:50% 50%; transition:filter .3s var(--tempo),transform .34s var(--tempo)} @media(hover:hover){ /* Vier Signale zusammen, weil eines allein zu leise war (Kundenrueckmeldung 03.09.: der Hover muesse staerker sein). Die Kachel ist seit derselben Rueckmeldung wieder ein Verweis, das Knopfverhalten ist damit keine Behauptung mehr, sondern die Wahrheit: 1. Flaeche eine Stufe heller (--tief-hell) 2. Motiv zoomt um 4 Prozent 3. der Pfeil im Zeilenverweis rueckt 5 Pixel weiter 4. eine orange Kante faehrt an der Unterkante ein Kein Anheben der ganzen Karte: Sie stehen im Sechserraster, und drei schwebende Kacheln nebeneinander lesen sich unruhig. */ .region:hover{background:var(--tief-hell)} .region:hover .regbild img{filter:saturate(.98) contrast(1.06);--bzoom:1.04} .region:hover .regweiter{gap:14px} .region:hover .regname{color:var(--weiss)} } /* Die einlaufende Kante. Sie liegt an der Unterkante der Kachel, faehrt von links ein und ist das einzige Element, das Orange in dieses Raster bringt. */ .region::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--signal);transform:scaleX(0);transform-origin:0 50%; transition:transform .34s var(--tempo)} @media(hover:hover){.region:hover::after{transform:scaleX(1)}} /* Tastaturbedienung: Der Fokusring muss sichtbar sein, sonst ist die Kachel mit der Tabulatortaste nicht auffindbar. Gleiche Behandlung wie die uebrigen Verweise der Seite. */ .region:focus-visible{outline:2px solid var(--signal);outline-offset:3px} .regbild{display:block;position:relative;overflow:hidden;aspect-ratio:7/5} /* Die Kurzschreibweise transition steht fuer dieses Element ZWEIMAL im Blatt, hier und weiter oben im Schleifen-Block. Sie ersetzt sich gegenseitig vollstaendig, also muessen BEIDE Stellen alle Eigenschaften nennen. Bis zum 03.09. nannte diese Stelle nur den Filter, und weil sie die spaetere ist, hatte der Bildzoom des Kachel-Hovers gar keinen Uebergang: Er sprang. Aufgefallen ist das erst beim Abgleich der Hover-Zeiten mit den Knoepfen. */ .regbild img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04); transition:filter .3s var(--tempo),transform .34s var(--tempo)} .regtext{display:block;padding:clamp(18px,1.8vw,26px) 0 clamp(8px,1vw,14px)} .regname{display:block;font-family:'Archivo',sans-serif;font-size:clamp(20px,1.9vw,26px); font-weight:800;font-stretch:84%;letter-spacing:-.012em;line-height:1.08;color:var(--weiss); transition:color .3s var(--tempo)} .region .tun{display:block;margin-top:12px;font-size:15.5px;line-height:1.56} /* Der Textlink war am 27.08. entfallen, mit ihm der Verweis der ganzen Karte. Grund damals: Jede Karte ordnete einer Koerperregion genau eine Leistung zu, und das stimmt nicht. Bei einer Schulter kann Manuelle Therapie richtig sein oder Kraftmessung oder beides nacheinander. Am 03.09. ist der Verweis zurueck, aber ohne den alten Fehler: Alle sechs Kacheln fuehren auf die Leistungsuebersicht /leistungen/, nicht auf je eine Behandlung. Damit ordnet keine Kachel mehr einer Region eine Therapie zu. Die Sitemap sieht genau das vor, Startseite Sektion 3 traegt dort "@ -> /leistungen/ - /sport-und-leistung/". Die Entscheidung Schmerz gegen Leistung faellt weiterhin im Band darunter. */ /* Die Ziel-Zeile ist der zweite Handlungsaufruf der Seite und traegt das Paar Braun auf Orange, auf jeder Breite. Die Fassung, in der ab Desktop die ganze Sektion der Knopf war, ist am 19.08. wieder zurueckgenommen. Sie laeuft ueber die volle Fensterbreite, nicht nur ueber den Satzspiegel: Ein orangefarbener Kasten INNERHALB der hellen Sektion waere eine Box in der Box, ein durchlaufendes Band ist ein Flaechenwechsel und damit im System. Der Ausbruch aus dem Satzspiegel laeuft ueber negative Aussenabstaende, der Inhalt wird ueber max() wieder auf die 1320er Spalte zurueckgeholt. */ /* Der obere Abstand ist am 03.09. von clamp(56px,6vw,88px) heraufgesetzt (Kundennotiz 3 Schleife 02: "Vielleicht etwas Abstand zu dem schwarz oben"). Das Band steht damit frei in der dunklen Sektion, statt sich an die Kachelreihe darueber anzuschliessen. Das Preisband unten bekommt denselben Wert, sonst haetten die beiden Baender der Seite zwei Rhythmen. */ .zielzeile{ margin-top:clamp(78px,8.2vw,126px); margin-inline:calc(50% - 50vw); /* Der Satzspiegel als eigener Wert: Beide Haelften brauchen ihn einzeln, die linke aussen links, die rechte aussen rechts. */ --rand:max(var(--spur),calc(50vw - 660px)); --innen:min(1320px,calc(100vw - 2 * var(--spur))); --luftz:clamp(18px,2vw,28px); /* schlanker seit 27.08. (vorher 46 bis 72), am 03.09. ein zweites Mal (Kundennotiz 3) */ /* Bekannte Bezugshoehe (Entscheid 27.08.). Das Polster der rechten Haelfte muss den Versatz der Schraege aufnehmen, und der ist Hoehe mal tan(18) = 0,3249. Seit beide Haelften Vorzeile, Ueberschrift und Knopf tragen, ist das Band rund 450 statt 300 Pixel hoch; mit dem alten Polster von 118 waere die oberste Zeile rechts in das Orange gelaufen. min-height statt height, damit laengerer Text die Hoehe trotzdem waechst; der Winkel weicht dann leicht ab, wie beim Preisband auch. */ --bandh:clamp(206px,16vw,246px); /* am 03.09. von clamp(250px,19.5vw,296px) heruntergesetzt (Kundennotiz 3: "zu gross vom Gefuehl her"). Das Polster der rechten Haelfte rechnet aus diesem Wert und faellt automatisch mit. */ min-height:var(--bandh); /* Die helle Haelfte steht auf --papier-auf, nicht auf --papier: Das Band endet die Sektion, und darunter beginnt eine Sektion in --papier. Mit demselben Wert liefe die rechte Haelfte ohne Kante in sie hinein, und das orange Dreieck saehe aus, als rage es in die Sektion darunter. --papier-auf setzt sich mit 1,144:1 ab, dieselbe Stufe wie eine Karte auf hellem Grund. Reines Weiss waere die andere Moeglichkeit, es kommt im System aber nicht vor und setzt sich mit 1,117:1 sogar schwaecher ab. */ background:var(--papier-auf);color:var(--tinte); display:grid; /* Das Band liegt WAAGRECHT (Entscheid 19.08.). Die Neigung von 2 Grad ist entfernt, mit ihr die Gegenneigung des Inhalts. Der Anschnittwinkel der Seite gehoert an Bildkanten und Knoepfe, nicht an eine Flaeche, die ueber die volle Fensterbreite laeuft: Dort erzeugt er zwei leere Dreiecke und einen Kipp-Eindruck der ganzen Seite. Seit dem 27.08. traegt das Band die Schraege trotzdem, aber INNEN: Sie trennt die orange Haelfte von der hellen, statt die ganze Flaeche zu kippen. Die Aussenkanten bleiben waagrecht. */ } /* Die orange Flaeche liegt als eigenes Kind darunter und ist geschert, nicht beschnitten. Ein clip-path muesste den Versatz aus der Hoehe rechnen, und die haengt hier am Inhalt: Sie steht nicht fest und aendert sich mit jeder Textzeile und jeder Fensterbreite. Ein skewX kennt keine Hoehe, der Winkel bleibt bei 18 Grad. Dieselbe Loesung wie beim Keil in der Kopfleiste. Der Ueberstand nach links faengt ab, dass die Scherung auch die linke Kante schraeg stellt; er liegt ausserhalb des Fensters. */ /* Seit dem 27.08. eine SPALTE. Vorher war das eine Reihe mit genau einem Kind, der Ueberschrift. Mit Vorzeile und Knopf als zusaetzlichen Kindern haette die Reihe die drei nebeneinander gestellt und die Ueberschrift auf ein Drittel der Breite gequetscht; gemessen 308 statt 618 Pixel. */ .zielkopf{ position:relative;isolation:isolate; padding:var(--luftz) clamp(24px,2.6vw,44px) var(--luftz) var(--rand); display:flex;flex-direction:column;align-items:flex-start;justify-content:center; } .zielkopf::before{ content:"";position:absolute;z-index:-1; top:0;bottom:0;right:0;left:-100vw; background:var(--feuer); transform:skewX(var(--neig));transform-origin:0 100%; } /* Der Text steht rechts der Schraege. Sein linkes Polster muss den Versatz der Kante aufnehmen: Oben laeuft das Orange am weitesten nach rechts, und zwar um Hoehe mal tan(18 Grad). */ .zieltext{ /* Das Polster nimmt den Versatz der Kante auf: Bandhoehe mal tan(18 Grad) plus 20 Pixel Luft. Gerechnet statt geschaetzt, weil die Bandhoehe sich mit dem Inhalt geaendert hat und ein fester Wert dann falsch ist. */ padding:var(--luftz) var(--rand) var(--luftz) calc(var(--bandh) * .3249 + 20px); display:flex;flex-direction:column;align-items:flex-start; justify-content:center; /* Kein gap mehr: Beide Haelften nehmen ihre Abstaende jetzt aus denselben Aussenabstaenden an Vorzeile und Knopf. Mit gap nur auf einer Seite haetten die beiden Haelften unterschiedliche Rhythmen. */ } /* Auf hellem Grund braucht die Unterlegung des Knopfes wieder Farbe: Offwhite auf Offwhite waere sie nicht zu sehen. */ .zieltext .btn{--unterleg:var(--feuer);--balken:var(--feuer)} /* Vorzeile und Knopf in beiden Haelften. Die Vorzeile steht in Braun, weil beide Gruende hell oder orange sind; Signalfarbe traegt dort 2,3:1. */ .zielzeile .vor{color:var(--tinte);margin-bottom:clamp(9px,1vw,13px)} .zielknopf{margin:clamp(16px,1.9vw,25px) 0 0;padding-left:9px} /* Der Knopf sitzt in der linken Haelfte auf Orange und braucht dort dieselbe Behandlung wie in den feuer-Sektionen. */ .zielkopf .btn{--unterleg:var(--weiss);--balken:var(--tief-hell)} @media(max-width:999px){ /* Einspaltig verliert die Schraege ihren Sinn: Sie traegt die Trennung zwischen zwei Spalten, und die gibt es dort nicht mehr. */ /* Die Umstellung der Linie auf die waagrechte Kante steht NICHT hier, sondern im Schleifen-Block am Ende des Kopfes, direkt bei der Regel, die die Linie setzt. Hier waere sie wirkungslos: Der Schleifen-Block steht spaeter im Blatt und hat dieselbe Spezifitaet, er gewinnt also, auch gegen eine Medienabfrage. Gemessen: border-right blieb bei 390 und 700 Pixeln auf 3px stehen. */ .zielkopf::before{transform:none;left:0} .zieltext{padding-left:var(--rand);padding-top:clamp(26px,4vw,36px)} .zielkopf{padding-right:var(--rand);padding-bottom:clamp(26px,4vw,36px)} } /* Die Sektion, die mit dem Band endet, hat keinen Fuss mehr: Das Band laeuft bis an die Sektionskante und stoesst direkt an die dunkle Sektion darunter. Kein Streifen dazwischen. */ .kap.bandschluss{padding-bottom:0} /* Kein Wechsel beim Ueberfahren mehr (Entscheid 20.08.). Das Band war als Ganzes ein Link und faerbte sich dabei um. Jetzt fuehrt allein der Knopf weiter, und eine Flaeche, die nicht klickbar ist, darf auch nicht so tun. */ /* Zweispaltig erst ab 1000: Darunter bleibt der rechten Spalte nach Abzug von Polster und Satzspiegel zu wenig Breite. Die Teilung haengt am SATZSPIEGEL, nicht an der Fensterbreite, wie im Preisband weiter unten. Ueber 1490 waechst der Rand mit dem Fenster, ein reines fr-Verhaeltnis wuerde die Schraege dann gegen den Inhalt verschieben. */ @media(min-width:1000px){ /* Haelftig seit dem 27.08., vorher 60:40. Zwei gleichwertige Angebote brauchen gleiche Flaechen, sonst wiegt eines schwerer als das andere. */ .zielzeile{grid-template-columns: minmax(min-content,calc(var(--rand) + var(--innen) * .5)) minmax(0,1fr)} } /* Displaygrad, aber normale Schreibung: Versalien bleiben H1 und H2 vorbehalten. */ /* Beide Grenzen sind gemessen, nicht geschaetzt. Der vw-Anteil ist auf 3,3 begrenzt: Bei 4vw brach „leistungsfaehiger werden" ab 1020 Pixeln auf eine dritte Zeile, die linke Spalte traegt dort 532 Pixel. Der Maximalwert steht auf 49 statt 54: Ab 1490 Pixeln steht der Satzspiegel fest, die Spalte gibt dann konstant 750 Pixel her, und die Zeile misst bei 54 Grad 802 Pixel. Bei 49 sind es 727. */ /* Der Grad faellt am 27.08. von 49 auf 34. Zwei Dinge kosten Breite: Die Spalte ist nur noch halb so breit statt 60 Prozent, und das linke Polster der rechten Haelfte muss den groesseren Versatz der Schraege aufnehmen. Gemessen braucht "leistungsfaehiger werden" bei 39 Grad 561 Pixel, frei sind dort je nach Fensterbreite 493 bis 524. Der Wert ist ueber sieben Fensterbreiten eingemessen, bis jede Zeile ueberall einzeilig blieb. */ .zielzeile h3{font-family:'Archivo',sans-serif;font-size:clamp(19px,1.82vw,28px);font-weight:var(--wght);font-stretch:var(--wh2);line-height:1.02;letter-spacing:-.02em} .zielzeile h3 .zeile{display:block} /* Auf Orange traegt nur das Braun selbst. Das Sekundaergrau der hellen Sektion ergaebe hier 1,9:1 und waere unlesbar. */ /* Das Band ist Orange, unabhaengig von der Farbe der Sektion um es herum. Die Regeln haengen deshalb am Band selbst und nicht mehr an .hell. */ .zielzeile h3{color:var(--tinte)} .zielzeile .tonverlauf{color:var(--tinte)} /* ══════════════════════════════════════════════════════════════════════ MESSWERTE · drei Groessen, drei Formen. Ohne umgebenden Kasten. ══════════════════════════════════════════════════════════════════════ */ /* ══ GALERIE STATT EINEM GROSSEN FOTO ═════════════════════════════════ Bis zum 31.08. stand hier ein einzelnes freigestelltes Motiv ueber die ganze Spalte, mit Anschnitt an der rechten Kante. Auf Kundenwunsch ist es durch eine kleine Galerie ersetzt: drei Aufnahmen der Messung, die nacheinander einfliegen. Der 18-Grad-Anschnitt ist dabei ENTFALLEN, und das ist eine Abweichung von der Leitform-Regel, die sonst fuer jedes Foto der Seite gilt. Begruendung: Drei angeschnittene Bilder in einem Raster ergeben sechs geneigte Kanten auf engem Raum, die einander widersprechen. Dieselbe Ausnahme gilt schon fuer die Bilder in den Karten von "Wo tut es weh". Die Galerie folgt jener Fassung, nicht der freistehenden: gerade Kanten, Rundung ueber --rund-bild. Das freigestellte Motiv bleibt als Datei liegen (kraftmessung-forceframe-freigestellt.{webp,png}), falls die Entscheidung zurueckgedreht wird. ═════════════════════════════════════════════════ */ .messfeld{display:grid;gap:clamp(34px,4vw,64px);align-items:start} /* Ein breites Bild oben, zwei halbe darunter. Bei drei gleich grossen Bildern untereinander waere die Spalte rund tausend Pixel hoch und damit deutlich hoeher als der Text daneben. */ .messgalerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.1vw,16px)} .galbild{margin:0;overflow:hidden;border-radius:var(--rund-bild); background:var(--papier-auf)} .galbild--breit{grid-column:1 / -1} .galbild img{display:block;width:100%;height:100%;object-fit:cover; filter:saturate(.88) contrast(1.04)} .galbild--breit img{aspect-ratio:16/9} /* ══ VIDEO-KACHEL ═════════════════════════════════════════════════════ Das Standbild kommt aus dem poster-Attribut, nicht aus einem img: So zeigt der Rahmen vor und nach dem Abspielen dasselbe Bild, und es gibt keine zweite Datei, die beim Start weggeblendet werden muesste. Der Knopf liegt als eigene Flaeche darueber und deckt die ganze Kachel ab. Ein kleiner Knopf in der Mitte waere auf dem Handy ein 40-Pixel-Ziel; so ist die ganze Kachel das Ziel, und das Zeichen in der Mitte sagt nur, was passiert. */ .galbild--video{position:relative} .galbild--video video{display:block;width:100%;height:100%;object-fit:cover; aspect-ratio:4/3;background:var(--tief)} .abspielen{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;border:0;padding:0;cursor:pointer; background:rgba(31,25,20,.28);transition:background .3s var(--tempo)} .abspielen:hover{background:rgba(31,25,20,.12)} /* Das Zeichen im Winkel der Seite, nicht als Kreis: Ein Kreis waere die einzige runde Form im ganzen Entwurf. */ .abspielflaeche{display:flex;align-items:center;justify-content:center; width:clamp(48px,5vw,62px);height:clamp(40px,4.2vw,52px); background:var(--signal);color:var(--tief); transform:skewX(var(--knneig)); transition:transform .3s var(--tempo),background .3s var(--tempo)} .abspielen:hover .abspielflaeche{background:var(--weiss); transform:skewX(var(--knneig)) scale(1.06)} .abspielflaeche svg{width:22px;height:22px;fill:currentColor; transform:skewX(calc(var(--knneig) * -1)) translateX(1px)} /* Laeuft das Video, ist der Knopf weg und die Bedienleiste des Browsers da. */ .galbild--video.laeuft .abspielen{display:none} @media(prefers-reduced-motion:reduce){ .abspielen,.abspielflaeche{transition:none} } .galbild:not(.galbild--breit) img{aspect-ratio:4/3} /* ══ EINFLUG, LANGSAM UND RUHIG ═══════════════════════════════════════ Die drei Bilder kommen nacheinander von rechts herein, in der Richtung, in der die Galerie steht. Bewusst traeger als die uebrigen Auftritte der Seite: 620 Tausendstel je Bild, 140 Versatz, das letzte steht nach 900. Zum Vergleich: Die Karten im Fittime-Weg brauchen 420. Der Weg ist mit 26 Pixeln kurz gehalten. Die Bilder sitzen dicht nebeneinander; ein weiter Weg liesse sie waehrend der Bewegung sichtbar uebereinander laufen. Ausgeloest wird ueber .auf und .sicht wie ueberall, die Galerie selbst bewegt sich nicht mehr: Zwei Wege uebereinander waeren nicht zu lesen. */ .messgalerie{--galdauer:.62s;--galstufe:.14s} .messgalerie.auf,.messgalerie.auf.sicht{opacity:1;--aufy:0px;transition:none} .messgalerie.auf .galbild{ opacity:0;transform:translateX(26px); transition:opacity var(--galdauer) var(--tempo), transform var(--galdauer) var(--tempo); transition-delay:0s; } .messgalerie.auf.sicht .galbild{opacity:1;transform:translateX(0)} .messgalerie.auf.sicht .galbild:nth-child(1){transition-delay:0s} .messgalerie.auf.sicht .galbild:nth-child(2){transition-delay:calc(var(--galstufe) * 1)} .messgalerie.auf.sicht .galbild:nth-child(3){transition-delay:calc(var(--galstufe) * 2)} @media(prefers-reduced-motion:reduce){ .messgalerie.auf .galbild{opacity:1;transform:none;transition:none} } /* Unter 1240 steht die Galerie ueber dem Text. */ /* Zweispaltig erst ab 1240. Darunter ist die Textspalte so schmal, dass der Text mehrere hundert Pixel hoeher wird als die Galerie daneben. Getauscht wird ueber order, nicht im Markup: Unter 1240 steht die Galerie weiterhin oben und der Text darunter, und diese Reihenfolge soll die DOM-Reihenfolge bleiben. */ @media(min-width:1240px){ .messfeld{grid-template-columns:minmax(0,1fr) minmax(0,1.28fr)} .messtext{order:1} .messgalerie{order:2} } /* ── Textspalte neben dem Foto ─────────────────────────────────────── Zwei Zwischenueberschriften: erst was gemessen wird, dann was der Patient davon hat. Der Inhalt stammt aus den Angaben von valdperformance.com, die Ansprache aus der Konzeption. Oben buendig, nicht mittig: Die erste Zwischenueberschrift soll auf der Oberkante des Fotos stehen. Der Knopf steht seit 19.08. nicht mehr hier, sondern unter den drei Kacheln, als Abschluss der ganzen Sektion. Achtung: p{margin:0} steht ganz oben im Blatt. Der Absatzabstand muss deshalb hier stehen, sonst laufen die Absaetze ohne Luft ineinander. */ /* Zeichen vor der Zwischenueberschrift: Massband, Haken, Formular. Das Formularzeichen ist dasselbe wie im Band unter dem Hero, es steht dort fuer das Anmeldeformular und hier fuer die schriftliche Auswertung. Die Zeichen sind BRAUN, nicht orange: Auf Offwhite faerbt die Seite ihre Akzente braun, siehe .hell .marke-schraeg. Orange erreicht auf Papier nur 3,01:1 und liegt damit an der Schwelle fuer Grafik. */ .mitzeichen{display:flex;align-items:center;gap:11px} .tzeichen{width:23px;height:23px;flex:none;color:var(--tinte)} /* Buendig zur Oberkante des Bildes (Entscheid 26.08.). Der Versatz auf halbe Bildhoehe vom 20.08. ist zurueckgenommen: Er liess die Sektion zwar atmen, schob den ersten Zwischentitel aber so weit nach unten, dass er neben der Bildmitte stand und der Zusammenhang zwischen Foto und Text verloren ging. */ .messtext{align-self:start;max-width:min(56ch,100%)} .messtext h3{margin-bottom:clamp(11px,1.2vw,15px)} .messtext h3+p{margin-top:0} .messtext p+p{margin-top:clamp(11px,1.2vw,15px)} .messtext p+h3{margin-top:clamp(36px,4.2vw,58px)} /* Die drei Bloecke standen probeweise als Treppe, jeder weiter rechts als der vorige. Zurueckgenommen am 20.08.: Die Bloecke ruecken nur links ein, die rechte Kante bleibt buendig, und damit verliert jeder Block Breite. Der dritte kam auf 43 Zeichen je Zeile, die untere Grenze fuer ruhigen Fliesstext. Sie stehen wieder auf einer Kante. Die Klammer .messblock bleibt: Sie traegt den Abstand zwischen den Bloecken sauberer als p+h3 es tat. */ .messblock+.messblock{margin-top:clamp(36px,4.2vw,58px)} /* Schluesselbegriffe im Fliesstext. Sie tragen kein zusaetzliches Gewicht in der Aussage, sondern helfen beim Ueberfliegen: , nicht . Die Hauptarbeit macht die FARBE, nicht die Strichstaerke: Fliesstext in --tinte-grau, Begriffe in --tinte. Das Gewicht steigt nur von 400 auf 500. Mit 700 wurden die Begriffe zu Kloetzen im Absatz. Hoechstens zwei je Absatz, sonst hebt sich nichts mehr ab. */ .messtext b{font-weight:500;color:var(--tinte)} /* ══ MESSKACHELN ══════════════════════════════════════════════════════ Drei Kacheln unter dem Foto, alle zum selben Test: Ausgangsmessung, heutige Messung, Vergleich (Entscheid 19.08.). Die drei erzaehlen damit einen Verlauf und nicht drei zusammenhanglose Tests. Der Testname steht einmal ueber allen dreien, nicht dreimal in den Kacheln. Vereinfacht nach der echten VALD-Auswertung: uebernommen sind die Werte je Seite mit Veraenderung und die Asymmetrie, weggelassen ist die Aufklapp- Auswahl der Messgroesse. Kein Rot fuer Ab. Die Richtung traegt der Pfeil, der ohne Farbe funktioniert und auch bei einer Farbsehschwaeche lesbar bleibt. Orange steht nur da, wo etwas ausserhalb des Zielbereichs liegt, also als Signal und nicht als Dekor. Gruen traegt seit dem 20.08. die Gesamtveraenderung in der dritten Kachel. Zulaessig ist das, weil die Farbe dort NICHTS allein sagt: Das Pluszeichen steht davor, die Richtung ist ohne Farbe lesbar. Fuer die beiden Trendzeilen in der zweiten Kachel gilt das weiter nicht, dort bleibt es beim Pfeil. */ /* Ueberschrift und Einordnung ueber den drei Kacheln. */ /* Von clamp(64px,7.4vw,116px) heruntergesetzt (Entscheid 27.08.). Der Abstand stammt aus der Zeit, als das Foto daneben auf gleicher Hoehe mit der Textspalte endete. Seit das freigestellte Motiv den Rahmen bestimmt, endet es tiefer, und der alte Abstand riss darunter ein Loch. */ .kachelkopf{margin-top:0} /* Die Kopfzeile traegt seit dem 31.08. nur noch Ueberschrift und Einstiegssatz. Der Aufruf stand bis dahin rechts daneben auf der Grundlinie und ist unter das Beispiel gewandert (Kundenrueckmeldung). Mit ihm sind die Flex-Regeln entfallen, die ihn dort gehalten haben: space-between, die Grundlinien-Ausrichtung, der eigene Abstand und die Umkehr der Reihenfolge unter 900px. Ein Behaelter mit einem einzigen Kind braucht davon nichts. Der Name .kachelkopfzeile bleibt, damit die Stelle auffindbar bleibt. */ /* Die Flaeche des Beispiel-Einschubs. Sie traegt den Abstand nach oben, den vorher die Kopfzeile hatte; innen setzt der Innenabstand die Kopfzeile ohnehin schon ab. */ .beispielblock{margin-top:clamp(36px,4vw,64px); background:var(--papier-auf);border-radius:var(--rund); padding:clamp(20px,2.6vw,40px)} /* Die dunkle Sektion kennt dieselbe Stufe als --tief-auf. Ohne diese Zeile stuende der Einschub dort im hellen Beige. */ .kap:not(.hell) .beispielblock{background:var(--tief-auf)} .kachelkopfzeile{margin-top:0} /* Der Aufruf unter dem Beispiel. Der Innenabstand links faengt den Ueberstand der geneigten Knopfflaeche ab, sonst steht sie vor der Satzkante. */ .kachelknopf--unten{margin:clamp(26px,3.2vw,40px) 0 0;padding-left:9px} .kacheltext{margin-top:clamp(12px,1.4vw,18px);max-width:min(70ch,100%); font-size:16px;line-height:1.6} .messkacheln{display:grid;gap:clamp(16px,1.8vw,26px); grid-template-columns:minmax(0,1fr);margin-top:clamp(24px,2.8vw,38px)} @media(min-width:760px){.messkacheln{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Vier GLEICHE Spalten seit dem 27.08.: zwei Messungen, dazwischen der Plan, rechts die Stimme. Die Planspalte war vorher 0,5fr breit, und genau daran hing der Fehler, den die Rueckmeldung benannt hat: In einer 177 Pixel schmalen Kachel passt kein Kopf, ihr Inhalt sass deshalb mittig, und die Schrittziffer stand 43 Pixel tiefer als bei den Nachbarn. Mit vier gleichen Spalten traegt jede Kachel denselben Kopf an derselben Stelle, und die Zeitleiste darunter wird nicht mehr gebraucht. */ @media(min-width:1100px){ .messkacheln{grid-template-columns:repeat(4,minmax(0,1fr))} /* Die Zeitleiste hatte eine durchgehende Linie, die den Fortgang zeigte. Sie faellt mit ihr weg, deshalb ueberbrueckt ein Strich die beiden Luecken zwischen den drei Schritten. Vorher stand hier ein Pfeil; der Strich ist ruhiger und naeher an der Linie, die er ersetzt (Entscheid 27.08.). Zur Stimme rechts fuehrt keiner: Sie ist kein vierter Schritt. */ /* Der Strich haengt am Ablaufsatz und nicht an der Kachel: Damit sitzt er automatisch auf derselben Hoehe wie dessen Trennlinie und wandert mit ihr, wenn sich der Umbruch aendert (Rueckmeldung 27.08.). Vorher stand er auf halber Kachelhoehe und lief damit quer zur Linie daneben. */ .messkacheln > :nth-child(1) .kablauf, .messkacheln > :nth-child(2) .kablauf{position:relative;overflow:visible} .messkacheln > :nth-child(1) .kablauf::after, .messkacheln > :nth-child(2) .kablauf::after{ /* Rechnung: Der Satz endet um den Innenabstand der Kachel vor deren Kante, danach kommt die Rasterluecke. Der Strich beginnt also bei Innenabstand und ist genau so breit wie die Luecke. */ content:"";position:absolute;bottom:-1px; right:calc((clamp(20px,2vw,28px) + clamp(16px,1.8vw,26px)) * -1); width:clamp(16px,1.8vw,26px); height:2px;background:var(--signal-d)} } /* ── Die Plan-Kachel ──────────────────────────────────────────────── Gleiche Breite und derselbe Kopf wie die drei Nachbarn (Entscheid 27.08.). Sie hat weniger Inhalt als die beiden Messkacheln, und das ist richtig: Zwischen zwei Messungen passiert genau eine Sache. Statt die Kachel mit Text zu fuellen, traegt sie das Zeichen gross und das Wort darunter. Beides sitzt mittig im Raum unter dem Ablaufsatz, damit die Kachel nicht oben schwer und unten leer wirkt. */ /* Das Zeichen sitzt in der Titelzeile, nicht mehr gross in der Mitte: Die Kachel traegt jetzt Inhalt und braucht keine Fuellung mehr (Entscheid 27.08.). Es steht auf der Grundlinie der ersten Zeile. */ .kachel--plan .planzeichen{width:clamp(17px,1.5vw,20px);height:clamp(17px,1.5vw,20px); color:var(--signal);flex:none;margin-right:9px;vertical-align:-2px} .kachel--plan .kname{display:flex;align-items:center} /* Fuss der Plan-Kachel: zwei Verweise untereinander, auf einer Linie mit dem Asymmetrie-Balken der Nachbarn. */ .kplanfuss{margin-top:auto;padding-top:clamp(18px,2vw,26px); display:grid;gap:clamp(10px,1.2vw,14px);justify-items:start} .kachel--plan .kasymlab{margin:0} /* ── Die vierte Kachel traegt eine Stimme statt Zahlen ─────────────── Gleiche Flaeche, gleicher Kopf, gleicher Rhythmus wie die drei daneben: Sie gehoert in die Reihe und ist kein Fremdkoerper. Nur der Inhalt ist ein anderer, deshalb keine Wertespalten und kein Balken. */ /* Das Zitat steht mittig zwischen Kopf und Fuss, nicht oben angeschlagen: Es ist kuerzer als die Wertespalten der Nachbarkacheln, und oben gesetzt liesse es darunter ein Loch. margin:auto verteilt den Rest auf beide Seiten. Ein grosses Anfuehrungszeichen stand hier zwischenzeitlich davor. Es ist entfallen: Die Kachel ist durch Kopf und Kennzeichnung als Stimme lesbar, das Zeichen war ein zweites Signal fuer dieselbe Sache. */ .kzitat{margin:auto 0;font-family:'Archivo',sans-serif; font-size:clamp(16px,1.5vw,19px);font-weight:600;font-stretch:90%; line-height:1.4;letter-spacing:-.005em;color:var(--weiss)} /* Die Kennzeichnung sitzt am Fuss, auf derselben Linie wie die Asymmetrie der Nachbarkacheln. */ /* Der Beleg am Fuss: Sterne, Google-Zeichen, Name, Pfeil. Er sitzt auf derselben Linie wie die Asymmetrie der Nachbarkacheln. */ .kstimmquelle{margin-top:auto;padding-top:clamp(18px,2vw,26px); display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px; font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600; color:rgba(245,242,237,.66)} .kstimmquelle .sterne{display:flex;gap:2px} .kstimmquelle .sterne svg{width:13px;height:13px;color:var(--signal)} .kstimmquelle .gzeichen{width:14px;height:14px;flex:none} .kstimmquelle .pfeilob{width:11px;height:11px;flex:none;margin-left:-2px; transition:transform .3s var(--tempo)} /* Die ganze Kachel ist der Link, deshalb liegt der Hover-Zustand an ihr. */ a.kachel--stimme{transition:background .3s var(--tempo)} a.kachel--stimme:hover{background:var(--tief-hell)} a.kachel--stimme:hover .kstimmname{border-bottom-color:currentColor} a.kachel--stimme:hover .pfeilob{transform:translate(2px,-2px)} .kstimmname{border-bottom:1px solid transparent;padding-bottom:1px; transition:border-color .25s var(--tempo)} /* Die Kacheln stehen auf BRAUN, auf der hellen Sektion (Entscheid 20.08.). Sie sind Objekte, keine Textbloecke, und setzen sich mit 15,6:1 gegen den Grund ab. Beige war der Zwischenstand vom selben Tag; es hielt die drei zusammen, hob sie aber kaum vom Grund ab. */ .kachel,.kachel.auf{display:flex;flex-direction:column; background:var(--tief);color:var(--weiss); padding:clamp(20px,2vw,28px); border-radius:var(--rund); transform:translateY(var(--aufy,0px))} /* Die Zeitangabe fuehrt die Kachel, der Testname steht darunter. Er ist in allen drei Kacheln derselbe; er gehoert trotzdem hinein, damit jede Kachel auch einzeln gelesen werden kann (Entscheid 19.08.). */ .kzeit{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:800; font-stretch:92%;letter-spacing:.02em;color:var(--signal); display:flex;align-items:center;gap:9px} /* ── Die Schrittmarke (Entscheid 27.08.) ───────────────────────────── Rueckmeldung: Dass die Kacheln eine Reihenfolge sind, muss ein Laie auf den ersten Blick sehen, nicht erst aus der Zeitleiste darunter erschliessen. Die Marke ist bewusst KLEIN. Die Kacheln 1 und 3 tragen bereits grosse Zahlen, naemlich die Messwerte 96, 128, 118 und 131. Eine zweite grosse Zahl daneben liest sich als weiterer Messwert und macht die Kachel unklarer statt klarer. Die Form ist das geschert Quadrat der Seite. Die Ziffer wird gegengeschert, sonst steht sie schief. */ .kschritt{display:inline-flex;align-items:center;justify-content:center; width:23px;height:23px;flex:none; background:var(--signal);color:var(--tief); /* Halber Wert: Die Marke ist 23 Pixel gross, die volle Rundung der grossen Flaechen waere hier ein Sechstel der Kante und machte aus der Marke eine Pille. */ border-radius:calc(var(--rund) / 2); transform:skewX(var(--logowinkel)); font-family:'Archivo',sans-serif;font-weight:800;font-stretch:100%; font-size:13.5px;line-height:1} .kschritt>span{transform:skewX(calc(var(--logowinkel) * -1))} /* 23px Marke plus 9px Abstand: So beginnt "Feedback" auf derselben Senkrechten wie "Vor zwei Monaten" in der Kachel DANEBEN. Der Einzug gilt seit dem 31.08. nur noch, solange es diese Nachbarkachel gibt (Kundenrueckmeldung: Feedback in die richtige Flucht). Stehen die Kacheln untereinander, gibt es nichts mehr, woran sich der Einzug ausrichten koennte. Er schob das Wort dann gegen den eigenen Kachelinhalt: Zitat und Sterne darunter beginnen an der Kachelkante, das Etikett 32 Pixel weiter rechts. Waagrechte Flucht gegen senkrechte, und ohne Nachbarn gewinnt die senkrechte. */ .kzeit--ohne{padding-left:0} @media(min-width:760px){ .kzeit--ohne{padding-left:32px} } /* In der Planspalte steht die Marke allein, ueber dem Zeichen. Das Wort "Trainingsplan" steht dort schon hochkant, ein zweites Wort waere doppelt. */ .kschritt--plan{margin-bottom:clamp(10px,1.2vw,16px)} /* Der Zustand in den Worten der Patientin. Orange am Anfang, Gruen am Ende: Der Bogen ist damit ohne Lesen zu erkennen, und genau das war die Rueckmeldung. --gut-hell statt --gut, weil das gedeckte Gruen auf Braun nur 2,76:1 traegt und damit unlesbar waere; --gut-hell kommt auf 5,35:1. min-height auf zwei Zeilen: Der erste Satz braucht zwei, der zweite eine. Ohne den Mindestwert saessen die Trennlinien der beiden Kacheln auf verschiedenen Hoehen. */ .kzustand{margin-top:11px;font-family:'Archivo',sans-serif;font-weight:700; font-stretch:90%;font-size:clamp(14.5px,1.3vw,17px);line-height:1.34; letter-spacing:-.005em;min-height:calc(2 * 1.34em)} /* Alle drei in Weiss (Entscheid 27.08.). Orange und Gruen trugen vorher den Bogen von "sehr starke Schmerzen" zu "verschwunden"; zusammen mit den orangen Schrittmarken, den orangen Balken und den gruenen Trendwerten wurde die Reihe zu bunt. Den Bogen tragen jetzt die Worte allein. */ .kzustand--stark,.kzustand--weg,.kzustand--neutral{color:var(--weiss)} @media(min-width:1100px) and (max-width:1429px){ /* Bei schmaleren Spalten braucht der erste Satz drei Zeilen statt zwei. */ .kzustand{min-height:calc(3 * 1.34em)} } /* Der Satz, der bis zum 27.08. unter der Kachel stand. Er steht ueber den Messwerten, weil ein Laie erst wissen muss, was passiert ist, bevor Zahlen ihm etwas sagen. Die Trennlinie darunter setzt ihn vom Messteil ab: Der Satz erzaehlt, was darunter kommt, ist Beleg. */ /* content-box, damit die Mindesthoehe unten in Zeilen zaehlt und nicht Innenabstand und Linie mitrechnet. Mit border-box waere die Linie in der Kachel mit dem kuerzesten Satz um 21 Pixel hoeher gerutscht. */ .kablauf{box-sizing:content-box; margin-top:9px;font-size:15px;line-height:1.5;color:var(--grau); padding-bottom:clamp(14px,1.6vw,20px); border-bottom:1px solid rgba(245,242,237,.14)} /* Die drei Saetze sind unterschiedlich lang und brauchen darum unterschiedlich viele Zeilen. Ohne Mindesthoehe sitzt die Trennlinie in jeder Kachel woanders, und die Reihe zerfaellt optisch (Rueckmeldung 27.08.). Nur ab 1100px, wo die vier Kacheln nebeneinander stehen; darunter stehen sie untereinander und es gibt nichts auszurichten. */ @media(min-width:1100px){ .kablauf{min-height:calc(3 * 1.5em)} } @media(min-width:1100px) and (max-width:1429px){ .kablauf{min-height:calc(4 * 1.5em)} } .kname{margin-top:clamp(14px,1.6vw,20px); font-family:'Archivo',sans-serif;font-weight:800;font-stretch:88%; font-size:clamp(16px,1.4vw,19px);line-height:1.18;letter-spacing:-.01em} .kmeta{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600; color:rgba(245,242,237,.66);margin-top:5px} .kseiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);margin-top:clamp(18px,2vw,26px)} /* Statt der Woerter Links und Rechts steht ein Zeichen (Entscheid 19.08.). Seit die Beispielmessung die SCHULTER zeigt, ist es eine Schulter (Entscheid 26.08.), vom Kunden geliefert. Davor stand dort ein Fuss, dann probeweise eine Hand; beides war ein Zeichen aus der falschen Gegend, und selbst gezeichnete Schultern waren bei dieser Groesse nicht zu erkennen. Die Klassen heissen neutral nach ihrer Aufgabe und nicht nach dem Motiv: Der naechste Wechsel soll nicht wieder alles umbenennen. Die Grundform ist die RECHTE Seite, die linke ist die Spiegelung, beim Paar zeigen die beiden also zueinander. Das Wort bleibt fuer Vorlesewerkzeuge im Markup stehen: Ein Zeichen allein sagt einem Screenreader nichts, und wer die Seiten verwechselt, liest die Werte falsch herum. */ .klab{display:block;font-family:'Archivo',sans-serif;font-size:12.5px; font-weight:600;color:rgba(245,242,237,.66);min-height:52px} .kseitenmarke{display:inline-block;line-height:0} .kseitenmarke--l{transform:scaleX(-1)} /* Doppelte Groesse und ein gedeckter Ton statt eines Grauwerts (Entscheid 19.08.). Auf dem Beige der Kachel traegt --tinte-still nur 2,85:1 und verfehlt die Schwelle von 3:1 fuer grafische Elemente. Deshalb --tinte-grau mit 4,98:1. Der Hellton --grau waere hier gar nicht mehr zu sehen. */ .kseitenzeichen{width:46px;height:46px;display:block;fill:var(--grau)} .nurlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .kwert{display:block;font-family:'Archivo',sans-serif;font-weight:800; font-stretch:78%;font-size:clamp(26px,2.6vw,34px);line-height:1; font-variant-numeric:tabular-nums;margin-top:6px;white-space:nowrap} .kwert em{font-style:normal;font-size:.5em;font-weight:700;margin-left:3px; color:rgba(245,242,237,.66)} .ktrend{display:inline-flex;align-items:center;gap:5px;margin-top:9px; font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700; color:rgba(245,242,237,.78);white-space:nowrap} /* Gruen fuer die Verbesserung (Entscheid 26.08.). Zulaessig, weil die Farbe NICHTS allein sagt: Der Pfeil steht davor und traegt die Richtung auch ohne sie, etwa bei einer Farbsehschwaeche. Dieselbe Begruendung galt schon fuer die Gesamtveraenderung, die in der entfallenen dritten Kachel stand. Groesser als die uebrigen Fusszeilen: Die Veraenderung IST die Aussage dieser Kachel, der Messwert darueber nur ihr Ausgangspunkt. Die stille Zeile „Ausgangswert" in der ersten Kachel bleibt klein, dort gibt es keine Veraenderung zu zeigen. */ .ktrend--gut{color:var(--gut-hell);font-size:clamp(14.5px,1.35vw,17px); font-weight:800;gap:6px;margin-top:11px} .ktrend--gut .kpf{width:11px;height:13.5px} .kpf{width:9px;height:11px;flex:none} /* Die Asymmetrie sitzt am Fuss der Kachel, immer auf derselben Hoehe. */ .kasym{margin-top:auto;padding-top:clamp(18px,2vw,26px)} .kbar{height:4px;background:rgba(245,242,237,.16);margin-bottom:9px} .kbar i{display:block;height:100%;background:rgba(245,242,237,.5)} .kasym--hoch .kbar i{background:var(--signal)} .kasymlab{display:block;font-family:'Archivo',sans-serif;font-size:12.5px; font-weight:600;color:rgba(245,242,237,.66);line-height:1.4} .kasym--hoch .kasymlab{color:var(--signal)} /* Der Knopf schliesst die Sektion rechtsbuendig ab (Entscheid 19.08.). Die Formflaeche ist geneigt, ihre obere rechte Ecke steht deshalb ueber die Elementkante hinaus, um Hoehe/2 mal tan(18 Grad). Der Innenabstand rechts holt das zurueck, sonst braeche der Knopf aus der Flucht der Kacheln aus. */ .ktrend--still{color:rgba(245,242,237,.5);font-weight:600} /* ══ ZEITLEISTE unter den Messkacheln ═════════════════════════════════ Drei Stationen auf einer Linie. Die Linie liegt hinter den Punkten und laeuft nur zwischen der ersten und der letzten Station, nicht darueber hinaus: Vor dem ersten Termin und nach heute gibt es nichts zu zeigen. Gebaut als ol, weil die Reihenfolge die Aussage ist. Die Nummern blendet list-style:none aus, ein Vorlesewerkzeug kennt sie trotzdem. ══════════════════════════════════════════════════════════════════════ */ /* Zeitleiste und Knopf teilen sich eine Zeile und dasselbe Raster. Die Liste traegt display:contents, damit ihre Stationen direkt im aeusseren Raster liegen und in denselben Spalten stehen wie die Kacheln darueber. Die Semantik der Liste bleibt dabei erhalten. Die Stationen stehen OBEN buendig, damit ihre Punkte auf einer Linie liegen; nur der Knopf sitzt unten, auf der Grundlinie der laengsten Station. Waeren alle unten ausgerichtet, saessen die Punkte je nach Textlaenge auf verschiedenen Hoehen. */ /* Das CSS der Zeitleiste ist am 27.08. entfallen, mit ihr auch .schrittnr: Die Ziffer steht jetzt nur noch im Kachelkopf. */ /* Die Kennzeichnung erfundener Werte und Stimmen muss auf JEDER Flaeche lesbar sein, sie ist eine Leitplanke und kein Zierrat. */ .etikett{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;color:var(--grau-still)} .hell .etikett{color:var(--tinte-grau)} .feuer .etikett{color:var(--tinte)} .glut .etikett{color:var(--signal-still)} /* ══════════════════════════════════════════════════════════════════════ DER WEG · Bildband und Text teilen EIN Raster mit derselben Spaltenlaufweite, damit jede Textspalte auf der Kante ihres Bildes sitzt. ══════════════════════════════════════════════════════════════════════ */ /* Der Foto-Streifen ueber den Schritten war am 31.08. entfallen, die Fotos sassen seitdem einzeln in Karten. Am 02.09. ist der Streifen auf Wunsch wieder da: eine durchgehende, um 18 Grad geneigte Leiste, die genau einmal angeschnitten wird; die vier Motive liegen darin ohne Fuge und ohne eigene Kante. Mit dem Streifen entfaellt auch die Kartenflaeche unter den Schritten wieder, sie war nur der Rahmen fuer die einzelnen Fotos. DIE BEWEGUNG IST NICHT DIE ALTE. Bis zum 31.08. kam das rechte Bild zuerst, die Reihe baute sich also gegen die Leserichtung auf. Jetzt kommt jedes Bild von rechts herein, aber in der Reihenfolge 01 bis 04: Die Reihe baut sich von links nach rechts auf, in derselben Richtung wie die Nummerierung. Vorbild ist die Messgalerie, die genau das schon tut; eine zweite Fassung derselben Bewegung waere beim naechsten Umbau eine Falle. */ /* Das Sichtfenster der Reihe. Es beschneidet die geneigten Aussenkanten wieder gerade, sodass nur die Fugen dazwischen schraeg bleiben, und es haelt die einfliegenden Bilder waehrend der Bewegung im Rahmen. */ /* Die Rundung sitzt am FENSTER und nicht mehr an den vier Bildern. Bis zum 02.09. trug jedes Bild seine eigenen 8 Pixel: Aussen wurden sie vom Fenster glatt abgeschnitten, die Reihe hatte dort scharfe Ecken, und an den drei Fugen dazwischen stiessen zwei Rundungen aufeinander und liessen den Grund als dunklen Zwickel durch. Jetzt ist die Leiste innen fugenlos und traegt die Rundung genau einmal, wie jedes andere Bild der Seite. */ .wegfenster{overflow:hidden;border-radius:var(--rund-bild); margin-bottom:clamp(26px,3vw,42px)} .wegleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); --bilddauer:.52s;--bildstufe:.09s} /* Ueberstand nach beiden Seiten, damit die schraegen Enden ausserhalb des Fensters liegen. 7 Prozent der Reihenbreite reichen bei 18 Grad. */ .wegleiste,.wegleiste.auf{transform:skewX(var(--bildneig));margin-inline:-7%} .wegleiste .bild{aspect-ratio:16/11;background:none;transform:none;overflow:hidden; border-radius:0} .wegleiste .bild>img{transform:skewX(calc(var(--bildneig) * -1)) scale(1.42)} .wegleiste .bild::after{background:rgba(31,25,20,.12)} /* ══ DIE VIER BILDER KOMMEN VON RECHTS, DAS LINKE ZUERST ═══════════════ Die Leiste selbst bewegt sich nicht mehr, sie ist nur noch der Ausloeser: Eine Reihe, die von unten auffaehrt, waehrend die Bilder darin von rechts laufen, hat keine lesbare Richtung mehr. Der Weg ist mit 30 Pixeln bewusst kurz. Waehrend der Bewegung stehen die Bilder auseinander und der braune Grund blitzt in den Fugen durch; bei 30 Pixeln ist das ein Aufblitzen, bei 80 eine Luecke, durch die man die Sektion sieht. Aus dem Fenster laufen kann nichts, .wegfenster schneidet seitlich ab. Stellschrauben stehen oben an .wegleiste: --bilddauer und --bildstufe. Das letzte Bild steht damit nach 0,79s. */ .wegleiste.auf,.wegleiste.auf.sicht{opacity:1;--aufy:0px;transition:none} .wegleiste.auf .bild{ opacity:0;transform:translateX(30px); transition:opacity var(--bilddauer) var(--tempo), transform var(--bilddauer) var(--tempo); transition-delay:0s; } .wegleiste.auf.sicht .bild{opacity:1;transform:translateX(0)} .wegleiste.auf.sicht .bild:nth-child(1){transition-delay:0s} .wegleiste.auf.sicht .bild:nth-child(2){transition-delay:calc(var(--bildstufe) * 1)} .wegleiste.auf.sicht .bild:nth-child(3){transition-delay:calc(var(--bildstufe) * 2)} .wegleiste.auf.sicht .bild:nth-child(4){transition-delay:calc(var(--bildstufe) * 3)} @media(prefers-reduced-motion:reduce){ .wegleiste.auf .bild{opacity:1;transform:none;transition:none} } /* Raster wie vor dem 31.08.: eine Spalte, ab 840 vier. Die Zwischenstufe mit zwei Spalten und der spaete Bruchpunkt bei 1040 gehoerten zu den Karten mit Foto. Ohne Foto traegt die Textspalte bei 840 Pixeln wieder. */ .weg{display:grid;gap:clamp(22px,2.6vw,38px)} @media(min-width:840px){.weg{grid-template-columns:repeat(4,minmax(0,1fr))}} .wegschritt{display:flex;flex-direction:column} /* Der Text laeuft in derselben Bewegung wie sein Bild darueber: von rechts herein, Schritt 01 zuerst. Weg und Dauer sind dieselben Werte wie in der Leiste, --auf-stufe entspricht --bildstufe, damit Bild und Text einer Spalte zusammen ankommen und nicht als zwei Wellen. Doppelte Klasse .wegschritt.auf, sonst gewinnt die allgemeine Regel .auf: Sie steht spaeter im Blatt, hat dieselbe Spezifitaet und wuerde die Bewegung auf translateY zurueckdrehen. --aufy auf 0, damit von der senkrechten Bewegung nichts uebrig bleibt. Der Weg steht als fester Wert und NICHT in einer Variablen: Nachgemessen am 31.08. rechnet Chrome den transform nicht neu, wenn nur die Variable innerhalb von translateX() umgesetzt wird; die Karte blieb auf ihrem Versatz stehen, obwohl die Variable bereits auf 0 stand. */ .wegschritt.auf{ --aufy:0px;--auf-stufe:90; opacity:0;transform:translateX(30px); transition:opacity .52s var(--tempo),transform .52s var(--tempo); } .wegschritt.auf.sicht{opacity:1;transform:translateX(0)} /* Ohne Bewegungswunsch stehen die Schritte sofort. */ @media(prefers-reduced-motion:reduce){ .wegschritt.auf{transform:none;transition:none} } /* Die Sektion lag bis zum 19.08. auf Offwhite und war komplett darauf gerechnet. Auf Braun trugen drei Werte nicht mehr: Die Rollenzeile kam auf 2,64:1, die Ziffer im Ruhezustand auf 1,87:1, die aktive Marke auf 2,88:1. Die Grundwerte gelten jetzt fuer Braun, .hell traegt die hellen Fassungen. */ .wegschritt .snr{font-family:'Archivo',sans-serif;font-size:clamp(34px,3.8vw,52px);font-weight:800;font-stretch:74%;line-height:.82;color:var(--grau-still);opacity:.42;margin-bottom:14px;transition:opacity .5s var(--tempo)} .hell .wegschritt .snr{color:var(--tinte-still)} .wegschritt.an .snr{opacity:.9} .wegschritt .rolle{display:flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:var(--grau);margin-bottom:9px} .hell .wegschritt .rolle{color:var(--tinte-grau)} .wegschritt .rolle i{width:3px;height:13px;background:var(--grau-still);transform:skewX(var(--logowinkel));flex:none;transition:background .5s var(--tempo)} .hell .wegschritt .rolle i{background:var(--tinte-still)} .wegschritt.an .rolle i{background:var(--signal)} .hell .wegschritt.an .rolle i{background:var(--signal-d)} .wegschritt h3{margin-bottom:9px} .wegschritt p{font-size:15.5px;line-height:1.58} /* ══════════════════════════════════════════════════════════════════════ ZWEI WEGE · zwei Karten (Entscheid 20.08.) Die beiden Wege standen als freie Spalten nebeneinander. Sie sind jetzt Karten: eigene Flaeche, Kopf, Inhalt, Fuss. Die Vorlage kam aus einem Preistabellen-Entwurf, zwei Dinge daraus sind bewusst NICHT uebernommen: das 45-Grad-Eckdreieck (unsere Formsprache neigt sich um 18 Grad, nicht um 45) und der flaechige Knopf in der Fussecke (wir haben ein eigenes Knopfsystem mit einlaufendem Balken, zwei Knopfsprachen auf einer Seite waeren ein Bruch). Die Vorlage hebt ausserdem EINE Karte hervor. Hier sind es zwei gleichwertige Wege, keine Rangfolge. ══════════════════════════════════════════════════════════════════════ */ .wege{display:grid;gap:clamp(18px,2vw,28px)} @media(min-width:900px){.wege{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Seit dem 27.08. ist die Sektion dunkel und die Karte hell, vorher war es umgekehrt. Die Karte bleibt damit ein Umschlag: Innerhalb von ihr gilt die Farbwelt auf Offwhite, ausserhalb die auf Braun. Die Karte traegt dasselbe Beige wie die helle Haelfte des Preisbands darunter, --papier-auf. Gemessen auf dieser Flaeche: Titel 13,6:1, Text 4,98:1, Haekchen 4,57:1, die Karte selbst 13,6:1 gegen den Sektionsgrund. Die orange Unterlegung des Knopfes faellt damit auf 2,63:1 und liegt knapp unter der Schwelle von 3:1 fuer Grafik. Sie bleibt trotzdem: Sie traegt keine Information, die Form des Knopfes kommt von seiner braunen Flaeche mit 13,6:1. Wer den Wert halten will, setzt --unterleg auf --signal-d, das sind 4,57:1. */ .wegkarte,.wegkarte.auf{--wpad:clamp(22px,2.4vw,34px); position:relative;display:flex;flex-direction:column; background:var(--papier-auf);color:var(--tinte-grau);overflow:hidden; border-radius:var(--rund); padding:var(--wpad);transform:translateY(var(--aufy,0px))} .wegkarte h3{color:var(--tinte)} .wegkarte .meta{color:var(--tinte-grau)} .wegkarte .liste li::before{background:var(--signal-d)} .wegkarte .btn--1,.wegkarte .btn--2{--grund:var(--tief); --balken:var(--feuer);--unterleg:var(--feuer);color:var(--weiss)} /* Die orange Eckmarke ist wieder entfallen (Entscheid 20.08.). Sie stammte aus der Vorlage und war reine Zier. Die Karte traegt ihre Aussage bereits im Kopf: Titel links, Einordnung rechts. */ .wege .kopfz{display:flex;align-items:baseline;justify-content:space-between; gap:18px;padding-bottom:clamp(16px,1.8vw,22px); /* Dunkle Linie: Die Karte ist hell. Dieselbe Deckkraft wie die hellen Trennlinien auf Braun. */ border-bottom:1px solid rgba(31,25,20,.14);margin-bottom:clamp(18px,2vw,26px)} @media(min-width:900px){.wege .kopfz{min-height:2.3em;align-items:flex-start}} /* Inhalt traegt die Restflaeche, damit der Fuss beider Karten auf einer Linie sitzt, auch wenn die Listen unterschiedlich lang sind. */ .weginhalt{flex:1} .wegfuss{padding-top:clamp(20px,2.2vw,28px);margin-top:clamp(22px,2.4vw,32px); padding-left:9px;border-top:1px solid rgba(31,25,20,.14)} /* Die Kennzahl heisst "40 Minuten", nicht "40" (Entscheid 20.08.). Die Einheit steht deshalb in derselben Groesse wie die Ziffer, die Erlaeuterung ruecht darunter. Nebeneinander waere die Zeile in der Karte zu breit. */ .dauer{display:block;margin-bottom:26px} .dauer .zahl,.dauer .einheit{font-size:clamp(34px,3.6vw,46px);color:var(--tinte); line-height:1.02} .dauer .einheit{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:74%; letter-spacing:-.02em;margin-left:.17em} .glut .dauer .zahl{color:var(--signal)} .dauer small{display:block;margin-top:clamp(7px,.8vw,10px);font-size:14.5px;color:var(--tinte-grau);max-width:min(30ch,100%);line-height:1.4} /* Der bezifferte Einstieg liegt in einem orangen Band (Entscheid 20.08.). Gleiche Mechanik wie die Zielzeile: Es laeuft ueber die volle Fensterbreite, nicht nur ueber den Satzspiegel. Ein orangefarbener Kasten INNERHALB der hellen Sektion waere eine Box in der Box, ein durchlaufendes Band ist ein Flaechenwechsel und damit im System. Der Ausbruch laeuft ueber negative Aussenabstaende, der Inhalt wird ueber max() auf die 1320er Spalte zurueckgeholt. Der Unterschied zur Zielzeile: Diese hier ist KEIN Link. Sie traegt drei Teile, Preis, Erlaeuterung und Knopf, und nur der Knopf fuehrt weiter. */ /* Zwei Flaechen wie in der Zielzeile weiter oben (Entscheid 27.08.): links der Preis auf Orange, rechts alles Uebrige auf der hellen Stufe, getrennt durch dieselbe geschaerte 18-Grad-Kante. Die helle Haelfte steht auf --papier-auf, nicht auf --papier: Das Band beendet eine Sektion in --papier, mit demselben Wert liefe es ohne Kante in sie hinein. */ .einstieg{margin-top:clamp(74px,8vw,124px); /* am 03.09. heraufgesetzt, damit das Preisband denselben Abstand zur dunklen Sektion haelt wie das Zielband weiter oben (Kundennotiz 3). Zwei Baender mit zwei Abstaenden lesen sich als Zufall. */ margin-inline:calc(50% - 50vw); --rand:max(var(--spur),calc(50vw - 660px)); /* Die Breite des Satzspiegels. Ueber 1490 Pixeln steht er auf 1320 und der Rand waechst mit dem Fenster weiter. */ --innen:min(1320px,calc(100vw - 2 * var(--spur))); --lufte:clamp(34px,3.8vw,54px); background:var(--papier-auf);color:var(--tinte); display:grid} /* Drei Spalten: die orange Flaeche, der Text, der Knopf. Der Knopf traegt auto, er soll nur so breit sein wie sein Inhalt. Die Teilung haengt am SATZSPIEGEL, nicht an der Fensterbreite. Mit einem reinen fr-Verhaeltnis lief es bei breiten Fenstern auseinander: Ueber 1490 waechst --rand auf 290 Pixel und mehr, die Spalte blieb aber bei 38 Prozent der Fensterbreite. Was fuer den Inhalt uebrig blieb, reichte dann nicht mehr fuer die Ziffer, und die 129 lief ueber die Schraege. Der Anteil steht auf 30 Prozent (Entscheid 27.08., von 38 heruntergesetzt): Die Ziffer braucht weniger Flaeche, als sie hatte, und der Text daneben gewinnt sie. min-content als Untergrenze faengt denselben Fall am anderen Ende ab. */ @media(min-width:900px){ .einstieg{grid-template-columns: minmax(min-content,calc(var(--rand) + var(--innen) * .3)) minmax(0,1fr) auto} } /* Die orange Flaeche ist geschert, nicht beschnitten: Ein clip-path muesste den Versatz aus der Hoehe rechnen, und die haengt am Inhalt. Der Ueberstand nach links faengt ab, dass die Scherung auch die linke Kante schraeg stellt. Dieselbe Loesung wie in der Zielzeile und im Kopfkeil. */ .preisblock{ position:relative;isolation:isolate; padding:var(--lufte) clamp(24px,2.6vw,44px) var(--lufte) var(--rand); display:flex;flex-direction:column;justify-content:center; } /* Am 03.09. von Orange auf Braun gedreht (Kundennotiz 4 Schleife 02: "Hintergrund schwarz und orange die zahl"). Damit traegt der Preisblock das Paar "Orange auf Braun" des Systems, also dasselbe wie eine .glut-Sektion, und nicht mehr "Braun auf Orange". Der Preis gewinnt dabei: Als orange Ziffer auf Braun steht er bei 5,6:1 statt als braune Ziffer auf Orange bei 5,2:1, und er ist die einzige Signalflaeche weit und breit. Das Zielband weiter oben bleibt bewusst orange: Es ist ein Handlungsaufruf, dieses hier ist eine Preisangabe. */ .preisblock::before{ content:"";position:absolute;z-index:-1; top:0;bottom:0;right:0;left:-100vw; background:var(--tief); /* Dieselbe orange Linie wie am Zwei-Wege-Band und am Keil der Kopfleiste (Kundenrueckmeldung 03.09.: hier fehlte sie noch). Die drei Schnitte der Seite tragen damit dieselbe Kante, und Orange ist ueberall Linie statt Flaeche. Sichtbar ist hier die RECHTE Kante, deshalb border-right. */ border-right:3px solid var(--signal); transform:skewX(var(--neig));transform-origin:0 100%; } /* Das linke Polster nimmt den Versatz der Kante auf. Bei einer Bandhoehe von rund 260 Pixeln sind das 85. */ .einstieg .bandtext{ padding:var(--lufte) 0 var(--lufte) clamp(92px,6.6vw,120px); align-self:center; } .einstieg>.btn{ align-self:center;justify-self:end; margin:var(--lufte) var(--rand) var(--lufte) clamp(32px,3.4vw,56px); /* Auf der hellen Stufe braucht die Unterlegung Farbe: Offwhite auf Offwhite waere sie nicht zu sehen. */ --unterleg:var(--feuer);--balken:var(--feuer); } @media(max-width:899px){ /* Einspaltig trennt eine waagrechte Kante, die Schraege traegt hier die Trennung zwischen zwei Spalten. */ /* Wie beim Zwei-Wege-Band: gestapelt liegt der Schnitt waagrecht. */ .preisblock::before{transform:none;left:0; border-right:0;border-bottom:3px solid var(--signal)} .preisblock{padding-right:var(--rand);padding-bottom:clamp(24px,4vw,34px)} .einstieg .bandtext{padding:clamp(24px,4vw,34px) var(--rand) 0} .einstieg>.btn{margin:clamp(20px,3vw,28px) var(--rand) var(--lufte);justify-self:start} } .preisblock .vor{margin-bottom:clamp(10px,1.1vw,16px)} /* Auf Orange traegt nur das Braun selbst. Das Sekundaergrau der hellen Sektion ergaebe hier 1,9:1 und waere unlesbar. Die Meta-Zeile darf auf das etwas ruhigere --tinte-feuer, 4,5:1, so ist es auch in der Abschluss-Sektion. */ .einstieg .satzklein{color:var(--tinte)} /* Die Zeile ueber dem Preis traegt .d3, also denselben Grad wie die Titel der beiden Wegkarten darueber (Entscheid 20.08.). Sie ist damit keine Meta-Zeile mehr, sondern eine Ueberschrift, und ist ueber .d3 an die Seite gebunden: Aendert sich der Grad, aendert sie sich mit. Eigene Werte gaebe es hier sonst zweimal. */ .preistitel{color:var(--tinte)} /* Der Hinweis zum Rezept steht seit dem 20.08. IM Band, nicht mehr darunter. Er behaelt seine eigene Zeile und die geneigte Marke, damit er als Hinweis lesbar bleibt und nicht als Fortsetzung des Leistungstextes. */ .bandtext{max-width:min(62ch,100%)} .bandtext .satzklein{font-size:16px} /* --tinte, nicht --tinte-feuer: Der Hinweis steht bei 14,5px und braucht damit 4,5:1. --tinte-feuer traegt auf Orange nur 4,27:1 und ist im System ausdruecklich nur fuer die Meta-Zeile freigegeben. Die Abstufung zum Leistungstext traegt hier die Schriftgroesse, nicht die Farbe. */ /* Ohne die geneigte Marke (Entscheid 20.08.). Die Ueberschrift setzt den Absatz bereits ab, ein zweites Zeichen davor waere doppelt. */ /* Abgegrenzt durch eine Kantenlinie, nicht durch eine Flaeche (Entscheid 26.08.). Eine eigene Flaeche waere hier eine Box in der Box: Das Band ist bereits die Box. Getrennt wird auf dieser Seite durch Schraege und Leerraum, die Linie ist die knappste Form davon. Die Gegenrichtung, das Orange fuer den Kasten abzudunkeln, scheidet rechnerisch aus: Ab der Stelle, an der die Flaeche sichtbar wird, faellt der braune Text unter 4,5:1. Bei 90 Prozent Orange sind es 4,41:1. */ .bandhinweis{margin-top:clamp(22px,2.4vw,30px); padding-left:clamp(14px,1.2vw,18px); border-left:3px solid var(--tief); font-size:14.5px;line-height:1.55;color:var(--tinte)} /* Die Zeile sieht aus wie eine Ueberschrift, ist aber ein Absatz. Sie fuehrt drei Saetze an und ist keine Gliederungsebene der Seite. Ein zusaetzliches h3 neben denen in den beiden Wegkarten wuerde die Dokumentgliederung verwaessern, ohne dass ein Vorlesewerkzeug etwas gewaenne: Der Text folgt unmittelbar darunter. */ .bandhinweis-titel{display:flex;align-items:center;gap:9px; font-family:'Archivo',sans-serif;font-weight:800; font-stretch:92%;font-size:14.5px;letter-spacing:.005em;margin-bottom:6px} /* Dieselbe Bauart wie die Zeichen in der Kraftmessung: Strichzeichnung, 1,9 Breite, runde Enden, currentColor. Kleiner als dort, weil die Zeile hier bei 14,5px steht und nicht bei einer Ueberschrift. */ .bzeichen{width:22px;height:22px;flex:none} .einstieg .preis{display:flex;align-items:baseline;gap:9px} /* Ziffer und Zeichen in Signalfarbe auf Braun, gerechnet 5,6:1 (Kundennotiz 4). */ .einstieg .preis .zahl{font-size:clamp(66px,9vw,140px);color:var(--signal)} .einstieg .preis span{font-family:'Archivo',sans-serif;font-size:clamp(26px,2.9vw,40px);font-weight:700;color:var(--signal)} .glut .einstieg .preis .zahl,.glut .einstieg .preis span{color:var(--signal)} .leitplanke{margin-top:clamp(38px,4vw,58px);display:flex;gap:15px;font-size:14.5px;line-height:1.6;color:var(--grau);max-width:min(80ch,100%)} .hell .leitplanke{color:var(--tinte-grau)} /* ══════════════════════════════════════════════════════════════════════ BEWEIS · Zitate ohne Karte ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ BEWERTUNGEN · zwei Stimmen, je eine Folie ueber die volle Fensterbreite (Entscheid 20.08.). Zitat links, Foto rechts bis zur Fensterkante, also derselbe Aufbau wie der Leitgedanke in k01. Das Blaettern laeuft ueber scroll-snap, nicht ueber ein Skript, das Elemente ein- und ausblendet: Ohne Javascript bleibt die Bahn scrollbar und beide Bewertungen erreichbar, mit Tastatur ebenso. Die zwei Tasten setzen nur scrollBy darauf. ══════════════════════════════════════════════════════════════════════ */ /* Das Google-Zeichen steht als Zeile im Kapitelkopf, in derselben Form wie beim Leitgedanken in k01 (Entscheid 20.08.): Sterne, Zeichen, ein Satz. Vorher stand es in einem Kasten; die Seite kennt sonst keine Kaesten um Kleinteile. Das vierfarbige G steht unveraendert, wie es die Markenrichtlinien verlangen. Kein Nachladen von Google: Ein echtes Bewertungs-Widget laedt von fremden Servern und braeuchte eine Einwilligung, bevor es erscheint. */ .kapkopf .bewertung{margin-top:0;align-self:end} /* Ab 1200px bekommt die rechte Kopfspalte genau die Breite, die die Zeile braucht, und die Zeile bricht nicht mehr um. Darunter bleibt der Umbruch: Mit fester Spalte waere sonst kein Platz mehr fuer die Ueberschrift. */ @media(min-width:1200px){ .kapkopf--gzeile{grid-template-columns:minmax(0,1fr) auto} .kapkopf--gzeile .bewertung{flex-wrap:nowrap} } /* Die Bahn bricht aus dem Satzspiegel aus, damit das Foto die Fensterkante erreicht. Der Inhalt wird ueber den Innenabstand links zurueckgeholt. Das Blaettern laeuft ueber scroll-snap, nicht ueber ein Skript, das Elemente ein- und ausblendet: Ohne Javascript bleibt die Bahn scrollbar und beide Bewertungen erreichbar, mit Tastatur ebenso. */ .stimmbahn{margin-inline:calc(50% - 50vw);margin-top:clamp(8px,1vw,16px); display:grid;grid-auto-flow:column;grid-auto-columns:100%; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none} .stimmbahn::-webkit-scrollbar{display:none} @media(prefers-reduced-motion:reduce){.stimmbahn{scroll-behavior:auto}} .stimmslide{--bildh:clamp(300px,32vw,470px); scroll-snap-align:start;margin:0; padding-left:var(--spalte);padding-top:clamp(30px,2.6vw,46px)} /* Oben buendig statt mittig (Kundenrueckmeldung 31.08.: zu viel Luft zwischen Ueberschrift und Text). .mitbild zentriert seine beiden Spalten senkrecht, und das war richtig, solange die Bewertung so hoch war wie das Foto. Seit sie auf gut ein Drittel gekuerzt ist, schob die Zentrierung sie in die Mitte der Fotohoehe: gemessen 255 Pixel zwischen Kapitelkopf und erster Zeile, von denen nur 132 aus den Abstaenden des Systems kamen. Das Foto ist im selben Zug flacher geworden, von 600 auf 470 Pixel. Steht es bei voller Hoehe neben einem kurzen Text, kippt das Gewicht der Sektion auf die Bildseite; das Foto begleitet die Aussage, es traegt sie nicht. */ .stimmslide .mitbild{align-items:start} @media(max-width:979px){.stimmslide{padding-right:var(--spalte)}} /* Der Text bekommt mehr Platz als das Foto: Er traegt die Aussage, das Foto begleitet sie. Das Verhaeltnis ist am 26.08. von 1,32 auf 1,12 gegangen, das Foto also breiter geworden. Weiter geht nicht: Bei 1 zu 1 fallen die beiden Textspalten auf rund 34 Zeichen, und der Blocksatz reisst dann in jeder zweiten Zeile auf. */ @media(min-width:980px){ .stimmslide .mitbild{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)} } /* Gleicher Anschnitt wie beim Leitgedanken, 18 Grad. */ .stimmbild{position:relative;overflow:hidden;height:var(--bildh); clip-path:polygon( calc(var(--bildh) * .3249 + var(--rund-bild) * .7265) 0, 100% 0, 100% 100%, calc(var(--rund-bild) * 1.3764) 100%, calc(var(--rund-bild) * .9224) calc(100% - var(--rund-bild) * .109), calc(var(--rund-bild) * .5674) calc(100% - var(--rund-bild) * .4122), calc(var(--rund-bild) * .3887) calc(100% - var(--rund-bild) * .8436), calc(var(--rund-bild) * .4253) calc(100% - var(--rund-bild) * 1.309), calc(var(--bildh) * .3249 - var(--rund-bild) * .2245) calc(var(--rund-bild) * .691), calc(var(--bildh) * .3249 - var(--rund-bild) * .0825) calc(var(--rund-bild) * .4122), calc(var(--bildh) * .3249 + var(--rund-bild) * .1388) calc(var(--rund-bild) * .191), calc(var(--bildh) * .3249 + var(--rund-bild) * .4175) calc(var(--rund-bild) * .0489))} @media(max-width:979px){ .stimmbild{clip-path:none;height:clamp(220px,52vw,320px); margin-inline:calc(var(--spalte) * -1)} } /* Das Wasserzeichen steht weiter links und hoeher als der Satz. Die Grenzen sind eng: Die Bahn traegt overflow-x:auto, und der Browser macht daraus auch senkrecht ein auto. Was ueber die Kante der Folie hinausragt, ist weg. */ .stimmslide .zitatfeld::before{font-size:clamp(190px,25vw,360px); left:-.17em;top:-.3em} .glut .stimmslide .zitatfeld::before{color:var(--weiss);opacity:.1} /* Der Fliesstext laeuft ab 980px in ZWEI Spalten (Entscheid 26.08.). Das halbiert die Hoehe der Bewertung, ohne dass ein Wort wegfaellt. column-gap in em, damit die Rinne mit dem Grad waechst; ohne sie stossen die Spalten fast aneinander. Die Absaetze duerfen nicht ueber die Spaltenkante brechen, sonst steht ein angefangener Satz unten links und laeuft oben rechts weiter, mitten im Wort. */ .stimmzitat{margin:0;font-family:'General Sans',sans-serif; font-size:clamp(15.5px,1.3vw,17px);font-weight:400; line-height:1.62;color:var(--grau); max-width:min(68ch,100%)} /* EINSPALTIG, auch auf breiten Schirmen (Kundenwunsch 31.08.). Bis dahin lief der Text ab 980px in zwei Spalten. Das war fuer die langen Fassungen gedacht: Ueber die volle Breite waeren sie sonst als ein Block von rund zwanzig Zeilen gestanden. Seit die Bewertungen auf gut ein Drittel gekuerzt sind, traegt der Grund nicht mehr. Zwei Spalten mit je drei Zeilen sehen aus wie ein Umbruchfehler, und das Auge muss fuer sechs Zeilen einmal quer zuruecklaufen. Mit den Spalten sind auch orphans und widows entfallen: Sie hielten nur die Zeilen an den Spaltenkanten zusammen, die es jetzt nicht mehr gibt. Flattersatz und die abgeschaltete Silbentrennung bleiben (Entscheid 26.08.). Blocksatz stand hier bis dahin und ist an der Spaltenbreite gescheitert; er braucht rund 55 Zeichen je Zeile, damit der Ausgleich unauffaellig bleibt. */ .stimmzitat{text-align:left;hyphens:none} /* Die Schluesselstellen. Dieselbe Bauart wie im Text der Kraftmessung: Die Hauptarbeit macht die FARBE, das Gewicht steigt nur von 400 auf 600. Hoechstens drei je Bewertung, sonst hebt sich nichts mehr ab. */ .stimmzitat b{font-weight:600;color:var(--weiss)} .hell .stimmzitat b{color:var(--tinte)} .stimmzitat p{margin:0} /* Genau eine Zeilenhoehe, nicht weniger. Mit .62em stimmte das Zeilenraster der beiden Spalten nach dem ersten Absatzwechsel nicht mehr ueberein: Die Zeile ist 1,62em hoch, der Abstand war 0,62em, also verschob jeder Absatz die Spalte um 1em gegen die andere. Bei ungleich vielen Absaetzen je Spalte summiert sich das. 1,62em ist eine volle Leerzeile und damit ein Vielfaches der Zeilenhoehe. Beide Spalten bleiben im selben Raster, egal wie die Absaetze fallen. */ .stimmzitat p+p{margin-top:1.62em} .hell .stimmzitat,.feuer .stimmzitat{color:var(--tinte-grau)} /* ══ AUSZUG STATT VOLLER BEWERTUNG ════════════════════════════════════ Kundenwunsch 31.08.: Die Bewertungen kuerzen und auf die vollstaendige Fassung bei Google verweisen. Zwischenschritt, der wieder entfernt ist: Zuerst stand hier ein Aufklapper, der den vollen Text im Dokument liess und nur die Anzeige begrenzte. Der Kunde will stattdessen einen echten Auszug mit Verweis. WIE GEKUERZT WIRD, ist keine Gestaltungsfrage: Es sind echte Aussagen von Patientinnen und Patienten. Weggelassene Stellen stehen als [...] im Text, die Reihenfolge der Saetze bleibt, und keine Aussage wird durch die Kuerzung staerker als im Original. Der Verweis fuehrt zur vollstaendigen Fassung. */ .zitatauszug{margin-top:clamp(14px,1.4vw,20px); font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:700; font-stretch:92%} .zitatauszug a{color:var(--signal);display:inline-flex;align-items:center; gap:8px;transition:color .25s var(--tempo)} .hell .zitatauszug a{color:var(--signal-d)} .zitatauszug a:hover{color:var(--weiss)} .hell .zitatauszug a:hover{color:var(--tinte)} .zitatauszug svg{width:11px;height:11px;flex:none} .stimmslide .wer{margin-top:clamp(20px,2.4vw,30px);display:flex; align-items:center;gap:16px;font-size:14px;color:var(--grau-still)} /* Auf Offwhite traegt --grau-still nur 3,3:1, bei 14px sind 4,5:1 noetig. */ .hell .stimmslide .wer{color:var(--tinte-grau)} .werzeilen{display:flex;flex-direction:column;gap:2px} .werzeilen b{font-family:'Archivo',sans-serif;font-size:16px;font-weight:700; font-stretch:90%;color:var(--grau)} .hell .werzeilen b{color:var(--tinte)} /* Unter dem Namen steht ein vollstaendiger Satz statt einer Aufzaehlung aus Sternen, Rolle und Datum (Entscheid 20.08.). Er nennt die Quelle, das Zeichen belegt sie. */ /* Die Zeile ist seit dem 31.08. KEIN Verweis mehr, sondern eine reine Angabe (Kundenrueckmeldung: nur noch eine Verlinkung auf Google). Ueber dem Zitat steht bereits "Ganze Bewertung auf Google lesen" und fuehrt an dasselbe Ziel; zwei Links untereinander zur selben Adresse waren redundant. Mit dem Verweis sind der Pfeil und der Hinweis fuer Screenreader entfallen, beide sagten aus, dass sich ein neuer Tab oeffnet. Die Gestaltungsregeln fuer den Zustand als Link stehen unter a.gzeile und greifen jetzt nicht mehr; sie bleiben stehen, weil derselbe Baustein an anderer Stelle weiterhin verlinkt ist. */ .gzeile{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin-top:4px} .gzeile .sterne{display:flex;gap:2px} .gzeile .sterne svg{width:14px;height:14px;color:var(--signal)} .hell .gzeile .sterne svg{color:var(--signal-d)} .gzeile .gzeichen{width:15px;height:15px;flex:none} .gsatz{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600; font-stretch:92%} .gsatz b{font-weight:800;color:var(--grau)} .hell .gsatz b{color:var(--tinte)} /* Die beiden Tasten tragen die Knopfform, also dasselbe Parallelogramm mit 18 Grad, aber nur ein Zeichen und rund die halbe Laenge eines Knopfes (Entscheid 20.08.). Ein Umriss schied aus: Auf Braun traegt er selbst bei 40 Prozent nur 3,5:1, die Flaeche traegt 15,6:1. */ /* Die beiden Tasten tragen die Knopfform, also dasselbe Parallelogramm mit 18 Grad, aber nur ein Zeichen und rund die halbe Laenge eines Knopfes. Ein Umriss schied aus: Auf Braun traegt er selbst bei 40 Prozent nur 3,5:1, die Flaeche traegt 15,6:1. */ .stimmpfeile{display:flex;gap:12px;margin-top:clamp(28px,3.2vw,42px)} .pfeiltaste{--knneig:-18deg;--grund:var(--weiss); position:relative;isolation:isolate; width:74px;height:52px;flex:none;border:0;background:none;padding:0; cursor:pointer;color:var(--tief); display:inline-flex;align-items:center;justify-content:center; transition:color .3s var(--tempo)} .pfeiltaste::after{content:"";position:absolute;inset:0;z-index:-1; background:var(--grund);border-radius:var(--rund);transform:skewX(var(--knneig)); transition:background .3s var(--tempo)} .pfeiltaste svg{width:21px;height:21px} .pfeiltaste:hover{--grund:var(--signal);color:var(--weiss)} .pfeiltaste:disabled{opacity:.3;cursor:default} .pfeiltaste:disabled:hover{--grund:var(--weiss);color:var(--tief)} .hell .pfeiltaste{--grund:var(--tief);color:var(--weiss)} .hell .pfeiltaste:hover{--grund:var(--signal-d)} .feuer .stimmslide .wer{color:var(--tinte-feuer)} /* Das Etikett gehoert auf eine eigene Zeile, inline liest es sich als Teil der Zuschreibung und die Kennzeichnung geht verloren. */ .stimmslide .wer .etikett{margin-top:4px} .logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(28px,4vw,56px);margin-top:clamp(46px,5vw,74px)} .logos b{font-family:'Archivo',sans-serif;font-size:16px;font-weight:600;font-stretch:90%;color:var(--grau-still)} .feuer .logos b{color:var(--tinte-feuer)} /* ══════════════════════════════════════════════════════════════════════ STANDORT · Karte als eigene Zeichnung (DSGVO), auf hellem Grund ══════════════════════════════════════════════════════════════════════ */ /* Der Satz unter der Standort-Ueberschrift steht in zwei Zeilen statt drei. 54ch, nicht der Standardwert 42: Gemessen kippt er ab 50ch auf zwei Zeilen, 54 gibt Reserve und bleibt weit unter der Lesbarkeitsgrenze von 75 Zeichen. Die Regel haengt am Standort, nicht an .kapkopf: Die uebrigen Kapitelkoepfe haben kuerzere Saetze, dort taete eine breitere Spalte nichts Gutes. */ #standort .kapkopf .satz{max-width:min(54ch,100%)} /* Die Textspalte steht auf der Unterkante der Karte, nicht mittig daneben (Entscheid 20.08.). Die Karte hat eine feste Hoehe, der Block eine variable; mittig zentriert waeren beide Kanten ungleich. Unten teilen sie sich eine. */ .standort{display:grid;gap:clamp(32px,4vw,64px);align-items:end} @media(min-width:900px){.standort{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}} /* Die Karte traegt denselben Anschnitt wie die Fotos der Seite, 18 Grad. Sie steht links, die geneigte Kante liegt deshalb rechts, wie beim Bild der Kraftmessung in k03. Das Gegenstueck sind .leitbild und .stimmbild, die rechts stehen und links angeschnitten sind. aspect-ratio ist dafuer entfallen: Der waagrechte Versatz ist Hoehe mal tan(18 Grad), die Hoehe muss also bekannt sein. Mit aspect-ratio haengt sie an der Breite und laesst sich in der Formel nicht verwenden. */ .karteflaeche{--karth:clamp(340px,36vw,560px); position:relative;height:var(--karth);overflow:hidden; /* Bis an die linke Fensterkante, wie das Bild der Kraftmessung in k03. Der negative Aussenabstand ist genau --spalte, also der Abstand des Satzspiegels zum Rand: Das Element reicht damit exakt bis zur Kante und nicht darueber hinaus. Waere er groesser, schnitte overflow:clip der Sektion ihn wieder ab. */ margin-left:calc(var(--spalte) * -1); clip-path:polygon(0 0,100% 0,calc(100% - var(--karth) * .3249) 100%,0 100%)} .karteflaeche svg{position:absolute;inset:0;width:100%;height:100%} .karteflaeche .nadel{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%)} /* Die echte Karte laedt erst auf Klick (Entscheid 20.08.). Ein Google-Rahmen, der beim Seitenaufruf mitlaeuft, uebertraegt die IP-Adresse des Besuchers an Google, bevor irgendjemand zugestimmt hat. Das ist einwilligungspflichtig. Bis dahin steht die gezeichnete Skizze, die ohnehin schon da war: Sie zeigt die Lage, laedt nichts nach und braucht keine Zustimmung. */ /* Der Innenabstand rechts haelt Text und Knopf aus der geneigten Kante: Auf halber Hoehe liegt sie um Hoehe/2 mal tan(18 Grad) innen. */ /* Die Skizze. Auf Braun helle Linien, auf Offwhite dunkle. Die Farben standen vorher fest im SVG und waren damit an eine Flaeche gebunden. */ .klinie{stroke:rgba(245,242,237,.14)} .kstrasse{stroke:color-mix(in srgb,var(--signal) 42%,transparent)} .kbau{fill:rgba(245,242,237,.05)} /* 16 statt 13 Prozent (Entscheid 27.08., mit dem Wechsel der Sektion auf hell): Unter der Sperre mit ihren 84 Prozent Deckung bleibt von der Linie nur ein Sechstel uebrig. Bei 13 Prozent trug sie dort 1,036:1 gegen den Grund, im dunklen Zustand waren es 1,056. Mit 16 sind es 1,053, die Vorschau ist damit in beiden Faellen gleich deutlich. */ .hell .klinie{stroke:rgba(31,25,20,.16)} .hell .kstrasse{stroke:rgba(188,50,9,.42)} .hell .kbau{fill:rgba(31,25,20,.05)} .kartensperre{position:absolute;inset:0;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(12px,1.4vw,18px);text-align:center; padding:clamp(20px,3vw,40px); padding-right:calc(var(--karth) * .1625 + clamp(20px,3vw,40px)); background:rgba(31,25,20,.84)} .hell .kartensperre{background:rgba(245,242,237,.84)} /* Schmale Fenster: kein Anschnitt, wie beim Leitgedanken. Bei 500px frisst er knapp ein Fuenftel der Kartenbreite, und der Hinweis liefe an die Kante. */ @media(max-width:899px){ .karteflaeche{clip-path:none;margin-right:calc(var(--spalte) * -1)} .kartensperre{padding-right:clamp(20px,3vw,40px)} } .kartenhinweis{max-width:34ch;font-size:14.5px;line-height:1.55;color:var(--grau)} .hell .kartenhinweis{color:var(--tinte-grau)} .kartensperre .klein{font-size:13px;color:var(--grau-still)} .hell .kartensperre .klein{color:var(--tinte-grau)} .kartensperre .klein a{color:var(--weiss)} .hell .kartensperre .klein a{color:var(--tinte)} .karteflaeche.geladen .kartensperre, .karteflaeche.geladen .nadel, .karteflaeche.geladen svg{display:none} .karteflaeche iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Die Spalte rechts der Karte. Zwei Bloecke mit gleichem Aufbau: Label, Inhalt. Die Abstaende standen vorher als Einzelwerte im Markup (12, 8, 32, 18), jeder anders; sie kommen jetzt aus zwei Regeln und sind ueberall gleich. Die Adresse steht als EIN Block, nicht als Ueberschrift plus Absatz: Eine Strasse ist keine Ueberschrift, und die drei Zeilen gehoeren zusammen. */ .ortspalte{display:flex;flex-direction:column;gap:clamp(28px,3.2vw,44px)} .ortblock .meta{margin-bottom:clamp(9px,1vw,13px)} /* --tinte-grau statt --tinte-still: Bei 13,5px sind 4,5:1 noetig, der stille Ton traegt auf Offwhite nur 3,26:1. */ .ortspalte .meta{color:var(--grau-still)} .hell .ortspalte .meta{color:var(--tinte-grau)} .adresse{font-family:'Archivo',sans-serif;font-size:clamp(19px,1.9vw,24px); font-weight:600;font-stretch:92%;line-height:1.55;color:var(--weiss); letter-spacing:-.005em} .hell .adresse{color:var(--tinte)} /* Die Ortslinks tragen die Linie erst beim Ueberfahren. Drei Unterstreichungen unterschiedlicher Laenge nebeneinander sind drei ungleiche Striche, sie machen die Zeile unruhig. Die Linie liegt trotzdem im Aufbau bereit, damit beim Ueberfahren nichts springt. */ .orte{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0} /* Der Pfeil nach rechts oben zeigt, dass der Link auf eine eigene Seite fuehrt und nicht auf einen Sprungpunkt derselben Seite. Er sitzt in em, waechst also mit der Schrift mit. */ .orte a{display:inline-flex;align-items:center;gap:7px; font-family:'Archivo',sans-serif;font-size:clamp(18px,1.7vw,22px); font-weight:600;font-stretch:92%;color:var(--weiss); border-bottom:1px solid transparent;padding-bottom:3px; transition:border-color .3s var(--tempo)} .hell .orte a{color:var(--tinte)} .orte a:hover{border-color:var(--signal)} .hell .orte a:hover{border-color:var(--signal-d)} .pfeilob{width:.66em;height:.66em;flex:none; transition:transform .3s var(--tempo)} .orte a:hover .pfeilob{transform:translate(2px,-2px)} .orte+.satzklein{margin-top:clamp(12px,1.4vw,17px)} /* ══════════════════════════════════════════════════════════════════════ UEBER · FAQ · ABSCHLUSS ══════════════════════════════════════════════════════════════════════ */ /* Das Bild steht rechts und laeuft bis zur Fensterkante, wie beim Leitgedanken in k01 (Entscheid 20.08.). Vorher stand es links im Hochformat 4:5. Die Aufteilung kommt jetzt aus .mitbild, die Bildform aus .leitbild; eigene Regeln braucht die Sektion nur noch fuer das Wasserzeichen. */ /* Das Wasserzeichen liegt hinter dem ZITAT, nicht hinter der Ueberschrift (Entscheid 20.08.). Es sitzt deshalb auf der Zitatgruppe und nicht mehr auf dem Textfeld. Kleiner als zuvor, es steht jetzt hinter zwei Zeilen und nicht hinter einem halben Block. Auf Braun traegt --tinte bei 6 Prozent nichts, es ist selbst fast die Grundfarbe. Dieselbe Loesung wie bei den Bewertungen. */ .ueber .zitatfeld::before{content:none} .ueber h2{margin-bottom:clamp(30px,3.6vw,52px)} /* Hoeher als beim Leitgedanken (Entscheid 20.08.). Der Wert steht lokal, k01 teilt sich die Bildform und bleibt bei clamp(300px,32vw,500px). */ /* Gleiche Rechnung wie oben, nur fuer ein Motiv von 1,5 zu 1: Hoehe rund 0,31 mal der Fensterbreite. Mit den alten 48vw war der Rahmen ab 980 fast quadratisch (453 mal 470) und schnitt 36 Prozent der Bildbreite weg. */ .ueber .leitbild{--leith:clamp(300px,31vw,720px)} .teamstimme{position:relative;isolation:isolate; margin:0 0 clamp(32px,3.8vw,50px)} /* Kleiner als zuvor, zweimal heruntergesetzt (Entscheid 20.08.): erst von 380 auf 240, dann auf 170. Es steht hinter zwei Zeilen und soll sie hinterlegen, nicht ueberragen. */ .teamstimme::before{ content:"\201C";position:absolute;z-index:-1;pointer-events:none; left:var(--zlinks,-.26em);top:-.3em; font-family:'Archivo',sans-serif;font-weight:800;font-stretch:88%; font-size:clamp(100px,12vw,170px);line-height:1; color:var(--weiss);opacity:.09} .hell .teamstimme::before{color:var(--tinte);opacity:.06} /* Unter 620px bleibt weniger Seitenabstand als das Zeichen nach links ragt, und .kap schneidet mit overflow:clip ab. Dort steht es enger. */ @media(max-width:619px){.teamstimme{--zlinks:-.1em}} /* Das Zitat trug Groesse UND Farbe im style-Attribut und war damit an Offwhite gebunden. Die Anfuehrungszeichen im Satz sind entfallen, das Zeichen dahinter sagt bereits, dass es ein Zitat ist. */ /* Kleiner als zuvor: Aus zwei Zeilen sind drei Saetze geworden. Mit dem alten Grad haette der Block die halbe Sektion gefuellt. */ .teamzitat{margin:0;font-family:'Archivo',sans-serif; font-size:clamp(19px,1.95vw,25px);font-weight:600;font-stretch:90%; line-height:1.3;color:var(--weiss);max-width:min(46ch,100%)} .hell .teamzitat{color:var(--tinte)} /* Zwei Zuschreibungen auf der Seite, eine Gestaltung: unter dem Markenkern in k01 und unter der Teamstimme in „Ueber Fittime". */ .teamwer,.zitatwer{margin-top:clamp(12px,1.4vw,17px);font-family:'Archivo',sans-serif; font-size:14.5px;font-weight:600;font-stretch:92%;color:var(--grau-still)} .hell .teamwer,.hell .zitatwer{color:var(--tinte-grau)} /* Unter dem grossen Zitat steht mehr Luft als unter der Teamstimme: Dort folgt der naechste Absatz, hier die Bewertungszeile, und die traegt ihren eigenen Abstand nach oben bereits mit. */ .zitatwer{margin-top:clamp(16px,1.9vw,24px)} .teamsatz{max-width:min(50ch,100%);margin-bottom:clamp(34px,4vw,54px); color:var(--grau)} .hell .teamsatz{color:var(--tinte-grau)} /* 26px statt 13: Die Knopfflaechen sind geneigt und ihre Unterlegung steht zusaetzlich sechs Pixel nach links. Bei 13 Pixel Abstand beruehrten sich die beiden Formen fast. BEIDE Knoepfe tragen btn--1 (Entscheid 20.08.). Der Zweitknopf setzt seine Flaeche auf --tief, also genau die Farbe des Grundes; auf einem Foto wie im Hero hebt sie sich ab, auf glattem Braun hat er gar keine Form mehr, nur Text und einen Winkel. Die Seite kennt die Antwort darauf bereits: Auf Offwhite und auf Orange gibt es nur EINE Knopfform, die Rangfolge traegt die Reihenfolge. Hier gilt jetzt dasselbe. */ .teamtasten{display:flex;flex-wrap:wrap;gap:26px} /* Der zweite Knopf traegt dieselbe Form, aber nicht dieselbe Stimme: Seine Unterlegung liegt eine Stufe leiser. */ .teamtasten .btn:nth-child(2){--unterleg:var(--tief-hell)} /* Trennlinien im FAQ sind Listentrenner, keine Kaesten. Sie bleiben. */ .faq details{border-bottom:1px solid rgba(31,25,20,.13)} .faq details:first-of-type{border-top:1px solid rgba(31,25,20,.13)} .faq summary{list-style:none;cursor:pointer;padding:26px 46px 26px 0;position:relative;font-family:'Archivo',sans-serif;font-size:clamp(17px,1.8vw,21px);font-weight:700;font-stretch:88%;color:var(--tinte);letter-spacing:-.005em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;background:var(--tinte)} .faq summary::before{content:"";position:absolute;right:11.75px;top:50%;width:1.5px;height:13px;background:var(--tinte);transform:translateY(-50%);transition:opacity .3s,transform .3s var(--tempo)} .faq details[open] summary::before{opacity:0;transform:translateY(-50%) rotate(90deg)} .faq .a{padding:0 0 28px;max-width:min(76ch,100%);font-size:16px} /* Links in einer Antwort. Ohne Auszeichnung waeren sie nicht als Link zu erkennen: Die Seite faerbt Links sonst nicht ein, sie stehen in Listen und Knoepfen, wo die Form das schon sagt. Im Fliesstext tut sie es nicht. */ .faq .a a{border-bottom:1px solid var(--signal-d);padding-bottom:1px; transition:background .25s var(--tempo)} .faq .a a:hover{background:rgba(188,50,9,.09)} /* Die Flaeche steht seit dem 27.08. auf demselben Beige wie die hellen Haelften der beiden Baender weiter oben, nicht mehr auf Orange. Die Schriftfarben bleiben, wie sie waren: --tinte trug auf Orange 5,2:1 und traegt auf --papier-auf 13,6:1. Der Knopf braucht seine Unterlegung in Orange. Die .feuer-Regel setzt sie auf Offwhite, das war fuer die orange Flaeche gedacht und waere hier praktisch unsichtbar. */ .abschluss{position:relative;overflow:clip} .abschluss.feuer{background:var(--papier-auf)} .abschluss .btn{--unterleg:var(--feuer);--balken:var(--feuer)} .fuss{position:relative;background:var(--tief);color:var(--grau); padding:clamp(52px,5.4vw,74px) var(--spur) 32px;font-size:15px} /* Vier gleichwertige Spalten. Die erste ist etwas breiter, sie traegt eine Adresse und keine Liste. */ /* ── Anamnesebogen-Band ───────────────────────────────────────────── Eigene Flaeche eine Stufe ueber dem Fussgrund, damit es sich abhebt, ohne eine neue Farbe einzufuehren: --tief-hell ist der Ton, den die Karten beim Ueberfahren tragen. Die geneigte Kante links ist dieselbe Sprache wie bei den Bildern der Seite, 18 Grad, hier als Keil in Signalfarbe. Er ist der Blickfang, der die Zeile am Seitenende auffindbar macht. */ .fussbogen{max-width:1320px;margin:0 auto clamp(34px,3.8vw,52px); position:relative;overflow:hidden; border-radius:var(--rund); background:var(--tief-hell); padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px) clamp(30px,3.4vw,46px); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:clamp(18px,2.4vw,36px)} .fussbogen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px; background:var(--signal)} .fussbogentext{flex:1 1 min(46ch,100%)} /* Als einzige Vorzeile der Seite NICHT in Signalfarbe. Das Band liegt auf --tief-hell, einer vierten Flaeche neben Braun, Offwhite und Orange, und dort traegt das Signal nur 4,36:1; die Grenze fuer Fliesstext liegt bei 4,5. Offwhite kommt auf 12,1:1. Die Signalfarbe steckt im Keil links, die Zeile muss sie nicht zusaetzlich tragen. */ .fussbogenvor{font-family:'Syncopate',sans-serif;font-size:12.5px;font-weight:400; letter-spacing:.10em;text-transform:uppercase;color:var(--weiss); -webkit-text-stroke:.4px currentColor;margin-bottom:9px} .fussbogensatz{color:var(--grau);max-width:60ch;font-size:15.5px;line-height:1.55} /* Die beiden Knoepfe sind gleichwertig und stehen deshalb nebeneinander in derselben Ausfuehrung. Unter 560px untereinander, sonst wird die Schrift im Knopf umgebrochen. */ .fussbogenknoepfe{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,18px); margin:0;padding-left:9px;flex:none} @media(max-width:559px){ .fussbogenknoepfe{flex-direction:column;align-items:flex-start;width:100%} } .fussraster{display:grid;gap:clamp(28px,3.2vw,44px);max-width:1320px;margin:0 auto} /* Fuenf Spalten seit dem Einzugsgebiet (R2). Die erste bleibt breiter, sie traegt eine Adresse und keine Liste. */ @media(min-width:780px){.fussraster{grid-template-columns:1.3fr 1fr 1fr .9fr 1.1fr}} /* Erstes Band: Bildmarke links, Beleg rechts, beide auf einer Grundlinie. Darunter eine feine Linie, die das Band vom Raster trennt. */ .fusskopf{max-width:1320px;margin:0 auto clamp(34px,3.8vw,52px); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:20px 24px;padding-bottom:clamp(28px,3.2vw,42px); border-bottom:1px solid rgba(245,242,237,.12)} /* 84px stammen vom 27.08. und begruendeten sich damit, dass der Zusatz "Physiotherapie" in der Marke bei 46px nur noch rund drei Pixel hoch und nicht mehr zu lesen war. Der Zusatz ist am 28.08. entfallen, dieser Grund also auch. Die Hoehe bleibt vorerst stehen, weil sie im Band auch ohne ihn stimmig sitzt; sie kann jetzt ohne Verlust kleiner werden. Die Marke ist 1526x851 Pixel gross, bei 84px Hoehe wird sie also weiterhin verkleinert und nicht hochgerechnet, es entsteht keine Unschaerfe. */ .fussmarke img{height:clamp(56px,6vw,84px);width:auto;display:block} /* Bildmarke und Instagram-Zeile bilden die linke Gruppe, der Google-Beleg bleibt rechts. Ohne diese Klammer haette das Band drei gleichrangige Kinder: Sobald die Summe zu breit wird, rutscht dann der Google-Beleg allein in eine zweite Reihe und steht dort links, waehrend die Instagram-Zeile rechts oben haengen bleibt. Gemessen passiert das ab 1279px abwaerts, also mitten im Laptop-Bereich. Unterhalb von 1280px stapelt die Gruppe deshalb kontrolliert: Marke oben, Instagram darunter, der Beleg bleibt rechts auf seiner Linie. Der Abstand zwischen Marke und Instagram ist am 27.08. von 40 auf 96 Pixel gewachsen (Rueckmeldung: Instagram stand zu dicht am Logo). Mehr geht nicht, ohne dass der Google-Beleg in eine zweite Reihe rutscht: Bei 1280px, wo die Reihe am engsten ist, bleiben damit noch rund 80 Pixel Luft. */ .fussmarkenblock{display:flex;align-items:center;gap:clamp(22px,5vw,96px)} /* Ab 1280px loest display:contents die Klammer auf. Marke, Instagram und Google-Beleg sind dann drei gleichrangige Kinder des Bandes, und space-between verteilt sie mit exakt gleichen Abstaenden (Rueckmeldung 27.08.). Die Klammer bleibt im Markup, weil sie unterhalb von 1280px weiterhin gebraucht wird: Dort stapelt sie Marke und Instagram, damit der Beleg nicht allein in eine zweite Reihe faellt. */ @media(min-width:1280px){ .fussmarkenblock{display:contents} } @media(max-width:1279px){ .fussmarkenblock{flex-direction:column;align-items:flex-start;gap:15px} } .fuss h4{font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:700; font-stretch:90%;color:var(--weiss);margin-bottom:clamp(16px,1.8vw,22px); letter-spacing:-.005em} .fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .fuss a{color:var(--grau);transition:color .25s} .fuss a:hover{color:var(--weiss)} /* Der Fuss faerbt JEDEN Link in --grau, und `.fuss a` sticht `.btn--1` in der Spezifitaet. Die beiden Knoepfe im Anamnesebogen-Band haben ihre Schrift dadurch geerbt statt selbst gesetzt: helles Beige auf der Offwhite-Flaeche des Knopfes, gemessen 1,1:1, also praktisch unlesbar. Beide Regeln muessen deshalb zurueckgenommen werden, auch die fuer den Zeigerzustand. */ .fuss .btn--1,.fuss .btn--1:hover{color:var(--tief)} .fuss .btn--2,.fuss .btn--2:hover{color:var(--weiss)} /* Die Google-Zeile steht auch im Fuss, unter der Bildmarke. Dieselbe Komponente wie im Leitgedanken und ueber den Bewertungen, nur kleiner. */ /* Im Kopfband steht die Zeile wieder einzeilig: Dort ist Platz, der Umbruch nach den Sternen war nur in der schmalen Spalte noetig. */ .fussbewertung{margin:0;gap:10px 15px;flex-wrap:nowrap} .fussbewertung .sterne{gap:3px} .fussbewertung .sterne svg{width:19px;height:19px} .fussbewertung .gzeichen{width:20px;height:20px} .fussbewertung .bwtext{font-size:15.5px} @media(max-width:679px){ .fussbewertung{flex-wrap:wrap} .fussbewertung .sterne{flex-basis:100%} } /* Die Kontaktspalte folgt demselben Rhythmus wie die Linkspalten: Ueberschrift, dann Bloecke im gleichen Abstand. Vorher hatte sie vier verschiedene. */ .fussadresse{max-width:min(30ch,100%);line-height:1.7} .fussraster .fusstel{margin-top:clamp(16px,1.8vw,22px)} /* Enger an der Nummer als die Nummer am Block darueber: Telefon und E-Mail sind zusammen die direkten Wege, die Zusage darunter gehoert zu beiden. */ .fussmail{margin-top:4px} .fusszusage{margin-top:3px;font-size:13.5px;color:var(--grau-still)} /* Zeichen und Zeile gemeinsam anklickbar, im Kopfband auf derselben Grundlinie wie Bildmarke und Google-Beleg. Deshalb kein margin-top mehr: Das Kopfband richtet seine drei Kinder selbst aus. */ .fusssozial{margin:0} .fusssozial a{display:inline-flex;align-items:center;gap:9px; font-size:15.5px;color:var(--grau)} .fusssozial .ic{width:19px;height:19px;flex:none} /* Der Kanalname ist fett, der Nutzen daneben nicht: Wer scannt, sieht zuerst „Instagram", wer liest, bekommt den Grund. Dieselbe Aufteilung wie im Google-Beleg rechts, dort tragen die 5,0 Sterne die Fettung. */ .fusssozial b{color:var(--weiss);font-weight:700} .fusssozial a:hover b{color:var(--weiss)} /* Der Pfeil markiert den Sprung nach aussen, wie beim Google-Beleg. */ .fusssozial .pfeilob{width:11px;height:11px;flex:none;margin-left:-2px; transition:transform .3s var(--tempo)} .fusssozial a:hover .pfeilob{transform:translate(2px,-2px)} @media(max-width:679px){.fusssozial a{font-size:15px}} /* Die Fusszeile traegt drei Gruppen: Rechtliches, Urheberrecht, Urheber. space-between verteilt sie ueber die Breite, bei schmalen Fenstern brechen sie untereinander. */ .fusszeile{max-width:1320px;margin:clamp(40px,4.4vw,60px) auto 0; padding-top:clamp(24px,2.8vw,34px); border-top:1px solid rgba(245,242,237,.12); display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between; align-items:center;font-size:13.5px;color:var(--grau-still)} /* Drei Gruppen, gleichmaessig ueber die Breite: Rechtliches links, Urheberrecht in der Mitte, Urheber rechts. */ .fusszeile>*{flex:1 1 auto} .fussrecht2{text-align:center} .fussmacher{text-align:right} .fussrecht{display:flex;flex-wrap:wrap;gap:10px 22px} @media(max-width:779px){ .fusszeile{flex-direction:column;align-items:flex-start} .fussrecht2,.fussmacher{text-align:left} } .fussrecht a{color:var(--grau-still)} .fussrecht a:hover{color:var(--weiss)} .fussmacher{white-space:nowrap} @media(max-width:660px){ .kopf{--kpad:15px;--logoh:48px;padding-left:22px} .kopfrechts{padding-right:22px;padding-left:calc(var(--keil) + 14px);gap:8px} .kopfcta{font-size:13.5px} .marke img{height:48px} .kopf.fest .marke img{height:44px} } /* Unter 620px traegt die Leiste den geschriebenen Handlungsaufruf nicht mehr. Gemessen brauchen Bildmarke, Keil, „Termin anfragen", zwei Zeichen und die Menuetaste zusammen rund 478 Pixel; bei 420 lief die Menuetaste rechts aus dem Fenster und war nicht mehr zu treffen. Das galt schon vor dem Umbau der Navigation, fiel aber nicht auf, solange dort nur ein zweiter Weg zu denselben Seiten lag. Jetzt haengt die ganze Navigation an dieser Taste. Weg faellt der Text, nicht die Sache: Die beiden Zeichen daneben fuehren weiterhin zum Telefon und zum Nachrichtenweg, und der Handlungsaufruf steht im Band unter dem Hero ein zweites Mal. */ @media(max-width:619px){ .kopfcta{display:none} .kopfrechts{padding-left:calc(var(--keil) + 10px)} .kopfrechts .menuetaste{margin-left:6px} } /* ══════════════════════════════════════════════════════════════════════ BEWEGUNG · ein Muster, kein Federn ══════════════════════════════════════════════════════════════════════ */ /* Die Einblendung setzte frueher eine komplette transform und danach transform:none. Damit verlor JEDES Element, das eine eigene Neigung traegt, diese Neigung genau in dem Moment, in dem es sichtbar wurde: der Bildanschnitt in der Messbar-Sektion, die Ablaufleiste, das Bild in „Ueber Fittime" und das Orange-Band. Deshalb reicht die Einblendung jetzt nur noch einen Versatz durch, und jedes geneigte Element nimmt ihn in seine eigene transform auf. */ .auf{opacity:0;--aufy:16px;transform:translateY(var(--aufy));transition:opacity .66s var(--tempo),transform .66s var(--tempo)} .auf.sicht{opacity:1;--aufy:0px} /* Displayzeilen fahren hinter einer Kante hoch. Die Neigung bleibt dabei erhalten, deshalb steckt sie im inneren Element. */ /* Nicht overflow:hidden. Lange Komposita wie „Ineinandergreifen." sind ein einziges Wort ohne Trennstelle, laufen aus der Spalte und wurden dadurch seitlich abgeschnitten. clip-path maskiert nur oben und unten und laesst seitlich Luft, der Auffahr-Effekt bleibt erhalten. */ /* Der Beschnitt versteckt die Zeile, solange sie beim Auffahren noch unter der Grundlinie steht. Dafuer wird NUR die Unterkante gebraucht. Oben muss er offen sein: Bei Zeilenabstand 0,99 ragen Umlautpunkte und Akzente ueber den Textkasten hinaus und wurden dort abgeschnitten, sichtbar am OE in KOERPER. */ .zeile{display:block;clip-path:inset(-35% -22% 0 -10%)} /* Die Vorbreite der Archivo laesst die Displayzeilen rund 0,1 em zu weit rechts beginnen, gemessen 9,5 Pixel bei 94 Pixel Schriftgrad. Der Ausgleich sitzt hier an der geneigten Zeile selbst und nicht am Absatz: Dort wuerde ihn .optisch{margin:0} wieder loeschen. In em, damit er bei H1 und H2 stimmt. Buchstaben mit schraeger linker Flanke (W, V, A) bleiben optisch etwas weiter rechts, das ist die Form der Letter und kein Satzfehler. inline-block, nicht block: Bei block ist die Elementbox so breit wie die Spalte, und background-clip:text malt den Verlauf nur innerhalb dieser Box. Ein Zeichen, das aus der Spalte laeuft (langes Kompositum), bekommt dann keine Fuellung und verschwindet, statt beschnitten zu werden. Mit inline-block umschliesst die Box den Text und der Verlauf deckt alles. */ .zeile>span{display:inline-block;margin-left:-.1em;transform:translateY(105%);transform-origin:0 100%; transition:transform .9s var(--tempo)} .zeile.sicht>span{transform:translateY(0)} .zeile:nth-child(2)>span{transition-delay:.09s} .zeile:nth-child(3)>span{transition-delay:.18s} /* Die Markierung wischt erst ein, wenn die Zeile steht. */ /* Die Markierung wischt weiterhin ein, aber ohne Verlauf: Die Flaeche liegt als eigenes Element hinter dem Wort und waechst in der Breite. */ .mark{background:none;position:relative;isolation:isolate} .mark::before{content:"";position:absolute;inset:0;background:var(--signal);z-index:-1; transform:scaleX(0);transform-origin:left;transition:transform .7s var(--tempo) .55s} .zeile.sicht .mark::before{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .auf{opacity:1;--aufy:0px} .zeile>span{transform:translateY(0)!important} .mark::before{transform:scaleX(1)!important} .hero .raster{opacity:1} } /* ═══ HERO: Kontaktreihe entlastet ══════════════════════════════════════ */ .wegreihe{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1199px){.wegreihe{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.wegreihe{grid-template-columns:minmax(0,1fr)}} /* Ohne Marke davor (Kundenrueckmeldung 03.09.: zu viele verschiedene Striche im Hero). Vorher standen dort fuenf orange Marken in zwei Formen auf engem Raum: je ein schraeger Strich und ein Pfeil an den beiden Weichen, dazu der Strich vor dieser Zeile. Jetzt bleiben zwei Marken in EINER Form, und die hat genau eine Bedeutung: Der Pfeil heisst "fuehrt weiter". Diese Zeile ist eine Zusage und fuehrt nirgendwohin, sie braucht deshalb keine. Der schraege Strich ist damit nicht verschwunden, er lebt weiter an den Vorzeilen und an den Unterpunkten des Menues. */ .herozusage{margin:clamp(15px,1.7vw,21px) 0 0; font-size:14px;line-height:1.4;color:var(--grau);letter-spacing:.005em} /* ═══ ORANGE WIRD LINIE STATT FLAECHE ════════════════════════════════════ Die Entwicklungs-Uebergabe schreibt fest: "Orange als eigene Flaeche, ausschliesslich fuer den Handlungsaufruf". Gebaut war es Flaeche an vier Stellen: Kopfkeil, Anmeldeformular-Feld, Zwei-Wege-Band und Abschluss. Hier tragen nur noch das Anmeldeformular-Feld und die Abschluss-Sektion Orange als Flaeche. An den beiden anderen Stellen wird daraus eine 3 Pixel starke Linie GENAU AUF DEM SCHNITT. Das ist kein neues Muster: Die Beschwerde-Kachel bekommt beim Ueberfahren eine orange Unterkante, die Vorzeilen tragen den schraegen orangen Strich. Der Schnitt ist ohnehin die einzige Trennsprache der Seite, und er traegt den Akzent jetzt selbst, statt eine Flaeche einzufaerben. ════════════ */ /* ── Kopfleiste: Keil im Braun der Beschwerde-Kacheln ────────────────── */ /* --tief-auf ist derselbe Wert, auf dem die Kacheln stehen: 1,147:1 zum Grund, also eine Andeutung statt einer Flaeche. Die Trennung leistet die orange Linie, nicht mehr der Farbwechsel. Der sichtbare Schnitt ist hier die LINKE Kante (das Element laeuft mit right:-30vw aus dem Fenster), deshalb border-left. */ .kopfrechts::before{background:var(--tief-auf); border-left:3px solid var(--signal)} /* Inhalt war dunkel auf Orange und muss jetzt hell auf Braun stehen. Gerechnet: Offwhite auf --tief-auf 13,1:1. */ .kopfcta{color:var(--weiss)} .kopfzeichen{color:var(--signal)} .menuetaste span{background:var(--weiss)} /* ── Band: braune Haelfte, oranger Schnitt ───────────────────────────── */ /* Dieselbe Bauweise wie das Preisband weiter unten, das am 03.09. auf Braun gedreht wurde. Beide Baender der Seite tragen damit dieselbe Konstruktion, statt eines in Orange und eines in Braun. Hier ist der sichtbare Schnitt die RECHTE Kante, deshalb border-right. --tief-auf statt --tief, und das ist kein Detail: Mit --tief verschmolz die linke Haelfte vollstaendig mit der dunklen Sektion darueber, denn zwischen beiden liegen 118 Pixel derselben Farbe. Das Band war dann kein Feld mehr, sondern ein Sektionsuebergang, und die linke Aussage verlor ihren Halt. Eine Stufe heller genuegt, um sie wieder als eigenes Feld zu lesen; es ist derselbe Wert, auf dem die Beschwerde-Kacheln und der Kopfkeil stehen. */ .zielkopf::before{background:var(--tief-auf); border-right:3px solid var(--signal); transition:background .3s var(--tempo)} /* Gestapelt liegt der Schnitt WAAGRECHT zwischen den beiden Haelften, die Linie muss also mitwandern. Als border-right stand sie senkrecht am rechten Fensterrand und las sich als abgeschnittene Flaeche. Diese Regel MUSS hier stehen und nicht oben bei der Medienabfrage des Hauptblatts: Der Schleifen-Block kommt spaeter im Blatt und gewinnt sonst gegen sie, Medienabfrage hin oder her. */ @media(max-width:999px){ .zielkopf::before{border-right:0;border-bottom:3px solid var(--signal)} } .zielkopf h3,.zielkopf .tonverlauf{color:var(--weiss)} /* ── Band: Textverweise statt Knoepfe ────────────────────────────────── */ /* Der Pfeil folgt der Schriftfarbe seiner Haelfte, hell auf Braun und Braun auf Offwhite. Orange auf Offwhite traegt nur 2,9:1 und ist als Grafik unter der Schwelle von 3:1. */ .zielkopf,.zieltext{text-decoration:none;cursor:pointer} .zielpfeil{display:inline-flex;align-items:center;gap:10px; margin:clamp(14px,1.6vw,20px) 0 0; font-family:'Archivo',sans-serif;font-size:15.5px;font-weight:700;font-stretch:92%; color:var(--tinte);transition:gap .3s var(--tempo)} .zielpfeil svg{width:15px;height:15px;flex:none} .zielkopf .zielpfeil{color:var(--weiss)} .zielkopf:hover .zielpfeil,.zieltext:hover .zielpfeil{gap:16px} .zielkopf:focus-visible{outline:2px solid var(--signal);outline-offset:-5px} .zieltext:focus-visible{outline:2px solid var(--tief);outline-offset:-5px} /* Die frueheren Hover-Regeln der Haelften sind entfallen: Die linke wechselte auf ihre eigene Farbe (also auf nichts), die rechte wurde heller. Ersetzt durch das geschertes Einlaufen im Schleifen-Block am Ende des Kopfes. */ /* Ohne Vorzeilen und ohne Knopfgeometrie darf das Band flacher werden. --bandh ist eine MINDESThoehe und haelt sonst auch dann, wenn Inhalt wegfaellt; das Band waere sonst nicht ruhiger, sondern nur leerer. */ .zielzeile{--bandh:clamp(164px,12.7vw,192px)} /* ── Die Weiche im Hero, statt zweier Knoepfe ────────────────────────── */ /* Nur der Pfeil traegt hier den Akzent, kein zweites Zeichen davor: Im Hero standen sonst fuenf orange Marken in zwei Formen auf engem Raum. Der Abstand waechst beim Ueberfahren, wie bei jedem Textverweis der Seite (.tl:hover{gap:14px}), damit die Bewegung ueberall dieselbe ist. */ .heroweiche{display:flex;flex-wrap:wrap;gap:clamp(24px,3.2vw,48px); margin-top:clamp(21px,2.5vw,31px)} .weiche{display:inline-flex;align-items:center;gap:11px;text-decoration:none; font-family:'Archivo',sans-serif;font-size:clamp(17px,1.6vw,20.5px); font-weight:700;font-stretch:92%;letter-spacing:-.005em; color:var(--weiss);transition:gap .3s var(--tempo)} .weiche svg{width:16px;height:16px;flex:none;color:var(--signal)} .weiche:hover{gap:16px} .weiche:focus-visible{outline:2px solid var(--signal);outline-offset:5px} /* Die Zusage rueckt naeher an die Kontaktreihe: Sie bezieht sich jetzt auf die drei Wege darunter, nicht mehr auf einen Knopf darueber. */ .herozusage{margin-top:clamp(19px,2.2vw,27px)} /* ══ SCHLEIFE 03, zweiter Durchgang · 03.09.2026 ═══════════════════════ */ /* ── 1. Kontaktreihe: einlaufender Balken wie bei den Knoepfen ────────── */ /* Dieselbe Mechanik wie .btn: eine Fuellflaeche links, die ueber --fuell waechst, geschert im selben Winkel wie das Feld. ZWEI ABWEICHUNGEN vom Knopf, beide aus der Lesbarkeit: 1. Der Knopf haelt bei 60 Prozent. Hier waere die Beschriftung dann zur Haelfte auf Orange und zur Haelfte auf Braun, und es gibt keine Schriftfarbe, die auf beidem besteht: Offwhite traegt auf Orange 2,9:1, Braun auf Braun gar nichts. Deshalb 100 Prozent. 2. Das Anmeldeformular ist im Ruhezustand bereits orange. Dort laeuft der Balken in der Gegenrichtung des Systems ein, also Braun auf Orange, und die Schrift wechselt auf Offwhite. So hat jedes der drei Felder dieselbe Bewegung, statt dass eines stillsteht. */ .wegfeld::after{ content:"";position:absolute;left:0;top:0;bottom:0;z-index:-1; width:var(--fuell); background:var(--balken); border-radius:var(--rund); transform:skewX(var(--knneig)); transition:width .34s var(--tempo); } @media(prefers-reduced-motion:reduce){.wegfeld::after{transition:none}} /* ── 2. Mehr Luft ueber den beiden Baendern ───────────────────────────── */ /* Von rund 118 auf rund 146 Pixel bei 1440. Bewusst UNTER dem Sektionsabstand --luft, der dort 158 traegt: Ein Abstand in Sektionsgroesse loeste das Band von seiner Sektion, und es soll dazugehoeren, nur nicht ankleben. */ /* ── 3. Orange Schrift auf der braunen Bandhaelfte ────────────────────── */ /* Gerechnet auf --tief-auf: 4,88:1. Das reicht nicht nur fuer die grosse Schrift (Schwelle 3,0), sondern auch fuer den Textverweis in 15,5px (Schwelle 4,5). Beide Zeilen duerfen deshalb orange stehen. Der Pfeil bleibt orange wie zuvor, er ist jetzt derselbe Ton wie sein Wort. */ .zielkopf h3,.zielkopf .tonverlauf{color:var(--signal)} .zielkopf .zielpfeil{color:var(--signal)} /* ── 4. Zaehlende Zahlen ──────────────────────────────────────────────── */ /* Die Ziffern springen beim Zaehlen, weil Archivo proportionale Ziffern hat. font-variant-numeric haelt sie auf gleicher Breite, sonst wackelt die ganze Zeile waehrend des Hochzaehlens. */ .preis .zahl,.wegschritt .snr{font-variant-numeric:tabular-nums} /* ══ SCHLEIFE 03, dritter Durchgang · 03.09.2026 ═══════════════════════ */ /* ── 1. Der Abstand ueber den Baendern wird SICHTBAR ──────────────────── */ /* Der Abstand war schon da, 146 Pixel, aber niemand konnte ihn sehen: Die linke Bandhaelfte trug dasselbe Braun wie die Sektion darueber, beide Flaechen gingen ineinander ueber, und der Schnitt sah aus, als setze die dunkle Sektion einfach schraeg fort. Der Abstand traegt jetzt die HELLE Flaeche. Damit steht das Band frei auf Offwhite, die dunkle Haelfte wird als eigene Form lesbar, und der Abstand ist tatsaechlich Weissraum statt unsichtbarer Fuge. Umgesetzt als Streifen ueber dem Band, nicht als Aussenabstand: Ein Aussenabstand hat keine Farbe, und die Sektion darueber ist dunkel. */ /* Der Abstand ist GETEILT, und das ist der Punkt: Ein rein heller Streifen liess die Kachelreihe darueber ohne Luft nach unten stehen, sie stiess direkt an das Offwhite. Oben bleibt deshalb Dunkel als Fuss der Sektion, darunter folgt das Offwhite als Weissraum vor dem Band. Gemessen bei 1440: 173 Pixel Abstand, davon 63 dunkel und 110 hell. */ /* Der HELLE Anteil ist am 03.09. um ein Drittel gekuerzt (Kundenwunsch), der dunkle Sektionsfuss bleibt unveraendert bei rund 63 Pixeln. Gemessen bei 1440: 137 Pixel Abstand, davon 63 dunkel und 73 hell, vorher 110 hell. */ .zielzeile,.einstieg{position:relative;margin-top:clamp(95px,9.5vw,142px)} .zielzeile::before,.einstieg::before{ content:"";position:absolute;left:0;right:0;bottom:100%; height:clamp(51px,5.1vw,76px); background:var(--papier); } /* ── 2. Kontaktreihe: alle drei Felder gleich, halb gefuellt ──────────── */ /* Die Sonderrolle des Anmeldeformulars ist raus. Es stand dauerhaft orange und ausgefahren, hatte also keinen Ruhezustand, von dem aus sich etwas fuellen konnte, und jeder Hover-Zustand sah daneben falsch aus. Jetzt sind alle drei im Ruhezustand gleich und fuellen sich gleich. DIE FUELLUNG HAELT BEI 62 PROZENT, wie am Knopf. Gemessen endet die laengste Beschriftung ("Zum Anmeldeformular", 191 Pixel) bei 51 Prozent der Feldbreite, die geneigte Kante schwankt um rund 5 Prozent. Bei 62 steht also jede Beschriftung vollstaendig auf Orange und traegt dort 5,6:1. Das war die Bedingung, unter der halb gefuellt ueberhaupt lesbar ist. */ .wegfeld{--fuell:0%;--balken:var(--feuer)} .wegfeld:not(.wegfeld--angabe):hover{--fuell:62%} /* Nur die linken Ecken runden: Der Balken endet mitten in der Flaeche, eine Rundung an seiner rechten Kante laege als Bogen im Feld. */ .wegfeld::after{border-radius:var(--rund) 0 0 var(--rund)} /* Das Anmeldeformular BLEIBT die aktive Kachel (Kundenwunsch 03.09., nachdem die vereinheitlichte Fassung vorlag): dauerhaft orange und ausgefahren, wie seit dem Entscheid vom 20.08. Es ist der Weg, ueber den ein Rezept mitkommt. Damit es dieselbe Bewegung wie die Nachbarn hat, laeuft sein Balken in der Gegenrichtung ein: Braun auf Orange, und die Beschriftung wechselt auf Offwhite. Auch hier 62 Prozent, die Beschriftung endet bei 51 Prozent und steht damit vollstaendig auf dem Braun. Gerechnet 15,6:1. Der Ruhezustand der Regeln davor bleibt also erhalten, nur die Fuellung dreht sich. */ .wegfeld--aktiv{--balken:var(--tief)} .wegfeld--aktiv:not(.wegfeld--angabe):hover .wegzeichen, .wegfeld--aktiv:not(.wegfeld--angabe):hover .wegtitel{color:var(--weiss)} /* ── 3. Beide Bandhaelften: geschertes Einlaufen, DUNKLER ─────────────── */ /* Die rechte Haelfte wurde beim Ueberfahren HELLER (--papier auf --papier-auf). Heller heisst im Kopf des Betrachters "weniger", das las sich als Ausbleichen statt als Reaktion. Beide Haelften werden jetzt dunkler, mit demselben geschertem Einlaufen wie die Knoepfe, im Winkel des Schnitts. --papier-tief ist das fehlende Gegenstueck zu --tief-hell: Auf der dunklen Seite gibt es die Hover-Stufe seit Beginn, auf der hellen gab es keine. Gerechnet: Abstand zur Grundflaeche 1,12:1, also dieselbe leise Stufe wie 1,15:1 auf der dunklen Seite. Die braune Schrift darauf traegt 12,4:1. */ :root{--papier-tief:#DAD2C1} .zielkopf,.zieltext{position:relative;isolation:isolate;--fuellb:0%} /* transform-origin ist hier NICHT beliebig, sondern der ganze Punkt. Die Schraege des Bandes sitzt auf .zielkopf::before und schert um deren untere linke Ecke (transform-origin:0 100%). Meine erste Fassung dieser Fuellung scherte um die eigene MITTE, dadurch lief ihre linke Kante an der Diagonale vorbei: Sie begann deutlich weiter links, schob sich unter die linke Haelfte und deckte dabei die orange Linie zu. Genau das sah buggy aus. Mit derselben Ecke fallen beide Kanten zusammen: Die Fuellung beginnt exakt an der Diagonale und die Linie bleibt stehen. Der Ueberstand, den die Scherung nach rechts erzeugt (Hoehe mal tan(18 Grad), bei 183 Pixeln rund 59), wird an den HAELFTEN geklippt, nicht am Band. Am Band war es ein Fehler: Der helle Streifen sitzt als ::before mit bottom:100% AUSSERHALB der Bandkante, overflow:clip am Band hat ihn deshalb mit weggeschnitten. Der Abstand war dann wieder unsichtbar, genau der Zustand, der gerade behoben worden war. Geklippt wird NUR die rechte Haelfte. An der linken war es der naechste Fehler: Ihre ::before traegt die Diagonale samt oranger Linie, und die ragt durch die Scherung oben rund 59 Pixel ueber die Zellkante hinaus. overflow:clip hat sie dort abgeschnitten, sichtbar blieb nur ein Rest am unteren Ende. */ .zieltext{overflow:clip} /* Die linke Fuellung waechst ueber einen FAKTOR, nicht ueber eine Breite in Prozent, und das ist noetig statt huebsch. Mit left:0 zieht die Scherung die linke Kante oben um Hoehe mal tan(18 Grad) nach rechts herein, rund 59 Pixel. Oben links blieb dadurch ein hellerer Keil der Grundflaeche stehen, sichtbar als zweite, falsche Diagonale. Ein linker Ueberstand loest das am Ende, aber nicht am Anfang: Bei einer Breite in Prozent hat die Flaeche im Ruhezustand die Breite des Ueberstands und ragt oben ins Bild. Beide Zustaende gehen nur, wenn die Breite bei null ANFAENGT und den Ueberstand mitwaechst. Genau das leistet der Faktor. @property ist dafuer Pflicht: Ohne Typangabe ist eine Custom Property fuer den Browser eine Zeichenkette und springt statt zu laufen. Die 3 Pixel Abzug sind die Breite der orangen Linie. Ohne sie laeuft die Fuellung darueber hinweg (dieselbe Ebene, nur spaeter im Blatt) und die Diagonale verschwindet, solange der Zeiger links steht. */ @property --fb{syntax:"";inherits:false;initial-value:0} .zielkopf{--dz:calc(var(--bandh) * .3249);--fb:0; transition:--fb .34s var(--tempo)} @media(hover:hover){.zielkopf:hover{--fb:1}} .zielkopf::after{ left:calc(-1 * var(--dz)); width:calc((100% + var(--dz) - 3px) * var(--fb)); transform-origin:0 100%; transition:none; } @media(prefers-reduced-motion:reduce){.zielkopf{transition:none}} .zielkopf::after,.zieltext::after{ content:"";position:absolute;left:0;top:0;bottom:0;z-index:-1; width:var(--fuellb); transform:skewX(var(--neig));transform-origin:0 100%; /* 340 Tausendstel, exakt der Wert des Knopfes (.btn::before). */ transition:width .34s var(--tempo); } .zielkopf::after{background:var(--tief)} .zieltext::after{background:var(--papier-tief)} @media(hover:hover){ .zielkopf:hover,.zieltext:hover{--fuellb:100%} } @media(prefers-reduced-motion:reduce){ .zielkopf::after,.zieltext::after{transition:none} } /* ===== Bau-Anpassungen gegenueber dem Entwurf, mit Grund ================================= 1. Der Fuss trug fuenf

. Auf jeder Seite gleicher Inhalt in echten Ueberschriften wird von SEO-Pruefern abgewertet, und die Ueberschriftenfolge der Seite bekaeme Sprünge. Im Bau stehen dort

. Die Werte sind 1:1 aus .fuss h4. */ .fussspaltentitel{font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:700; font-stretch:90%;color:var(--weiss);margin:0 0 clamp(16px,1.8vw,22px); letter-spacing:-.005em} /* ===== Rueckfall, wenn das Bewegungsskript nicht laeuft ================================= Der Entwurf verbirgt jedes einblendende Element mit opacity:0 und macht es erst sichtbar, wenn das Skript die Klasse "sicht" setzt. Laeuft das Skript nicht, bleibt der groesste Teil der Seite unsichtbar: gemessen am 09.09.2026 zeigte die Sektion "Mit Rezept oder ohne" null von siebzehn Textknoten, also eine leere Flaeche ueber mehrere hundert Pixel. Das trifft nicht nur abgeschaltetes JavaScript, sondern jeden Fall, in dem die Skriptdatei nicht ankommt. Die Klasse ft-js setzt ein winziges Skript im Seitenkopf, das das Design-Plugin ausgibt. Es nimmt sie nach vier Sekunden wieder weg, wenn sich das Design-Skript bis dahin nicht gemeldet hat. Ohne die Klasse verbirgt keine Regel mehr etwas, die Seite steht dann ohne Einblendung da und ist vollstaendig lesbar. */ html:not(.ft-js) .auf, html:not(.ft-js) .messgalerie.auf .galbild, html:not(.ft-js) .wegleiste.auf .bild{opacity:1;transform:none} html:not(.ft-js) .zeile>span{transform:translateY(0)} html:not(.ft-js) .zeile .mark::before{transform:scaleX(1)} /* ===== Nur fuer die interne Pruefseite "Blockuebersicht" ================================ Diese Klassen kommen auf keiner Kundenseite vor. Sie stehen hier und nicht in einer zweiten Datei, damit das Design eine Pflegestelle bleibt. Bewusst NICHT in der Formsprache der Website: kein Orange als Flaeche, keine Schraege. Eine Pruefseite, die die eigene Formsprache bricht, waere ein schlechter Beleg fuer sie. */ .pruefhinweis{background:#12100D;color:#C7BEAB;border-top:3px solid var(--signal); padding:calc(96px + 28px) var(--spur) 28px; font-family:'General Sans',system-ui,sans-serif;font-size:15px;line-height:1.6; max-width:none} .pruefkopf{background:#12100D;color:#C7BEAB;padding:20px var(--spur); font-family:'General Sans',system-ui,sans-serif;border-top:1px solid #2E241B} .pruefkennung{font-family:'Syncopate',sans-serif;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--signal);margin:0 0 6px} .prueftitel{font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;color:#F5F2ED;margin:0 0 4px} .pruefinfo{font-size:13.5px;line-height:1.5;color:#8C877E;margin:0} @media(max-width:1019px){ /* Unter 1020 Pixeln ist die Kopfleiste 76 statt 96 Pixel hoch. */ .pruefhinweis{padding-top:calc(76px + 24px)} } /* 2. Huellen-Regeln fuer die SVG-Kaesten, maschinell erzeugt (siehe Anpassung 3). */ .btn .oxy-svg-icon2{width:15px;height:15px;flex:none} .btn:hover .oxy-svg-icon2{transform:translateX(5px)} .tl .oxy-svg-icon2{width:14px;height:14px;flex:none} .navpfeil .oxy-svg-icon2{width:13px;height:13px} .kopfzeichen .oxy-svg-icon2{width:26px;height:26px} .navpfeil .oxy-svg-icon2{width:17px;height:17px} .wegzeichen .oxy-svg-icon2{width:100%;height:100%} .anker .wegzeichen .oxy-svg-icon2{width:100%;height:100%} .bewertung .sterne .oxy-svg-icon2{width:clamp(16px,1.5vw,20px);height:clamp(16px,1.5vw,20px)} .punkt-kopf .oxy-svg-icon2{width:24px;height:24px;flex:none} .regweiter .oxy-svg-icon2{width:14px;height:14px;flex:none} .abspielflaeche .oxy-svg-icon2{width:22px;height:22px;transform:skewX(calc(var(--knneig) * -1)) translateX(1px)} .kstimmquelle .sterne .oxy-svg-icon2{width:13px;height:13px} .zitatauszug .oxy-svg-icon2{width:11px;height:11px;flex:none} .gzeile .sterne .oxy-svg-icon2{width:14px;height:14px} .pfeiltaste .oxy-svg-icon2{width:21px;height:21px} .karteflaeche .oxy-svg-icon2{position:absolute;inset:0;width:100%;height:100%} .fussbewertung .sterne .oxy-svg-icon2{width:19px;height:19px} .zielpfeil .oxy-svg-icon2{width:15px;height:15px;flex:none} .weiche .oxy-svg-icon2{width:16px;height:16px;flex:none} /* 3. Aus style-Attributen des Entwurfs erzeugte Klassen, weil html-to-page jedes style-Attribut verwirft (siehe .work/markup-zerlegen.py). */ .estil-07db1e{--bildpos:52% 30%} .estil-1ad9a8{width:25%} .estil-40be75{--bildpos:50% 22%;--bildpos-eng:50% 18%} .estil-57ab50{width:62%} .estil-81aea1{margin-top:9px} .estil-d76c3b{--bildpos:45% 50%} .estil-fb4863{margin-top:clamp(16px,1.8vw,24px)}