Eyebrow
Kartenüberschrift
Fließtext in der Karte, zwei bis drei Zeilen. Bildformat 388 : 510.
Design System
Alle Werte dieser Seite kommen aus assets/css/style.css. Wer eine Farbe, eine Schriftgröße oder einen Abstand ändern will, ändert sie dort — diese Seite zeigt nur, was gerade gilt.
Farben
-
--sand
-
--sand-light
-
--white
-
--charcoal
-
--charcoal-btn
-
--grey
Linien
-
--rule
-
--rule-strong
-
#dad9d7
-
#82847f
Schriften
Serife — --serif
Spectral
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ÄÖÜ ß
Überschriften und Fließtext. Steht für Lyon Display und Lyon Text aus der Vorlage — die sind lizenzpflichtig. Gewicht 300.
Groteske — --sans
Archivo
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ÄÖÜ ß
Eyebrows, Textlinks, Schaltflächen. Steht für Whitney SSm aus der Vorlage. Gewicht 400.
Typografische Skala
Grundgröße html { font-size: 14px }, alle Stufen in rem. Zeilenhöhe durchgehend 1,45.
| Muster | Klasse | rem | Pixel | Laufweite | Schrift | Verwendung |
|---|---|---|---|---|---|---|
| Vitalität | heading-h--xl | 2,22 rem | 31,1 px | 0,5 px | Serife | Seitentitel, Abschnittsüberschrift |
| Vitalität | heading-h--l | 1,722 rem | 24,1 px | 0,5 px | Serife | Rubrik im Fußbereich |
| Vitalität | heading-h--m | 1,4 rem | 19,6 px | 0,98 px | Serife | Kartenüberschrift |
| Vitalität | heading-h--s | 1,2 rem | 16,8 px | 4 px | Serife | Praxisname im Fuß, Versalien |
| Vitalität | dest-head | 1,2 rem | 16,8 px | 0,8 px | Serife | Gruppe im Fuß-Menü |
| Vitalität | Grundtext | 1 rem | 14 px | 0,8 px | Serife | Fließtext, Listen |
| Vitalität | cta__link | 0,929 rem | 13 px | 0,8 px | Groteske | Textlinks |
| Vitalität | Menüzeile | 0,9 rem | 12,6 px | 0,8 px | Serife | Hauptnavigation |
| Vitalität | button--charcoal | 0,88 rem | 12,3 px | 0,7 px | Groteske | kleine Schaltflächen |
| Vitalität | subtitle | 0,722 rem | 10,1 px | 2 px | Groteske | Eyebrow über Überschriften, Versalien |
Wortmarke
Eine einzige SVG-Datei, assets/img/logo.svg. Im Markup liegt sie als <symbol id="logo-mamonova"> mit den Buchstaben in <g id="logo-letters"> und dem Balken als eigenem <rect>. Die Farbe kommt über fill: currentColor aus dem Textkontext.
Größen
Animation über dem Film
- Schrift — 300 ms Verzögerung, dann 2600 ms: Transparenz 0 → 100 %, gleichzeitig Größe 77 % → 100 %
- Linie — startet bei 2900 ms und zieht sich in 1800 ms von links nach rechts
Schaltflächen und Links
Slider-Bausteine
Karten
Alle Karten haben denselben Aufbau: Bild, 16 px Abstand, Eyebrow, Überschrift, Text, Links. Sie unterscheiden sich nur im Bildformat.
Eyebrow
Kartenüberschrift
Im Dreierraster stehen drei dieser Karten nebeneinander, Spaltenabstand 33 px.
Eyebrow
Kartenüberschrift
Die Textblöcke sind unterschiedlich lang — die Links stehen deshalb nicht auf einer Linie.
Bildformate
| Klasse | Format | Verwendung |
|---|---|---|
.media--hero | 1231 : 699 | Hero-Film |
.card--full .media | 1231 : 761 | Karte über volle Breite |
.card--row .media | Höhe 481 px | Reihe 1/3 + 2/3 |
.card--col .media | 388 : 510 | Dreierraster |
.media--portrait | 430 : 566 | Bildpaare auf der Unterseite |
.media--landscape | 909 : 561 | einzelnes Bild, Unterseite |
.nearby__slide .media | 1 : 1 | Karussell |
Raster und Abstände
| Variable | Wert | Verwendung |
|---|---|---|
--gutter | 24,5 px | Seitenabstand aller Container |
--spacer | 65 px | Abstand zwischen Abschnitten |
--grid-gap | 33 px | Spaltenabstand im Kartenraster |
--container | 1440 px | Höchstbreite Inhalt |
--container-lg | 1600 px | Höchstbreite Kopfbereich |
--hgroup-max | 680 px | Höchstbreite zentrierter Textblöcke |