Buttons - Bestandsaufnahme
Diese Seite ist die Arbeitsliste fuer die Umstellung: alle Button-Varianten, die es heute noch gibt, mit ihren echten Werten. Der Zielzustand - Komponente, Groessen, Zustaende - steht auf /doku. Sobald alle 13 Varianten umgestellt sind, kann dieser Abschnitt weg.
13 Varianten fuer im Grunde vier Aufgaben
Klasse .dn-btn
20px - 500 - 1 / 1.6rem - 43px - Hover brand-hover 0.2s - 8 Stellen
Header - Button Kontakt
gleiche Masse wie .dn-btn, aber eigene Einstellungen statt der Klasse - und KEIN Hover-Hintergrund definiert
Mobilmenue - Kontakt
17px statt 20px - 600 statt 500 - Hoehe 44px
Formular - Absenden
18px - 600 - 0.9 / 1.8rem - Hoehe 39px - Transition steht auf all
Dev - Popup oeffnen
18px - 600 - 1.4 / 2.4rem - wieder andere Masse, wieder eigene Dauer 0.25s
Header - Notdienst
18px - 500 - 1 / 1.4rem - Hoehe 43px - transparent mit Rahmen
Mobilmenue - Notdienst
17px - 700 - Hoehe 46px - Flaeche weiss statt transparent - dritte Variante desselben Knopfes
Saugbagger - Filter
17px - Radius 99rem - Rahmen nur 20 Prozent deckend - Hoehe 40px
Klasse .dn-btn-text
17px - 500 - kein Innenabstand - Hover: Schrift rot
Karriere - Bewerben
17px - 700 - steht auf dunklem Grund, deshalb hier die dunkle Karte
Kontakt - Telefon
32px - 600 - groesster Textbutton der Seite
Kontakt - Route planen
24px - 600 - dritte Groesse im selben Block
Header - Notdienstnummer
22px - 700 - vierte Groesse, wieder ein anderes Gewicht
Abweichungen
| Merkmal | Wie viele Varianten | Werte |
|---|---|---|
| Hoehe | 5 | 38 – 39 – 40 – 43 – 44 – 46 px |
| Schriftgroesse | 4 | 17 – 18 – 20 – 22 px, bei Textbuttons zusaetzlich 24 und 32 px |
| Schriftgewicht | 3 | 500 – 600 – 700 |
| Innenabstand | 5 | 0.9/1.8 – 1/1.4 – 1/1.6 – 1.2/1.6 – 1.4/2.4 rem |
| Radius | 2 | 0.6rem bei Buttons, 99rem bei Filter-Chips |
| Rahmenfarbe | 2 | var(–text) voll deckend, rgb(var(–text-rgb) / 0.2) bei Chips |
| Hover Flaeche | 2 | brand-hover bei .dn-btn – beim Header-Button ist gar kein Hover-Hintergrund gesetzt |
| Transition | 4 | background-color .2s – background-color .25s – all .2s – transform .3s mit vier weiteren Eigenschaften |
| Notdienst-Knopf | 3 | derselbe Knopf hat auf Desktop, Mobil und im Panel drei verschiedene Groessen, Gewichte und Flaechen |
Icons - derselbe Pfeil in sechs Groessen
28 Buttons tragen ein Icon, immer rechts, fast immer icon-pfeil-abbiegend.svg. Nur die Klasse .dn-btn legt eine Groesse fest - ueberall sonst erbt das Icon die Schriftgroesse des Labels, deshalb ist derselbe Pfeil mal 11 und mal 24 Pixel breit. Auch die Farbe ist uneinheitlich: die Notdienstnummer im Header hat einen roten Pfeil, dieselbe Nummer im Mobilmenue einen schwarzen. Und die Drehung beim Hover steht siebenmal einzeln im CSS, in zwei Fassungen und mit vier Dauern - die steckt jetzt in der Basisklasse. Fahr oben ueber die Muster.
| Button | Schrift | Icon heute | Abstand |
|---|---|---|---|
| Klasse .dn-btn | 20px | 18 x 15 px | 10px |
| Header – Kontakt | 20px | 16 x 13 px | 8px |
| Header – Notdienstnummer | 22px | 21 x 18 px | 9px |
| Mobilmenue – Kontakt | 17px | 13 x 11 px | 8px |
| Mobilmenue – Nummer | 20px | 24 x 20 px | 8px |
| Kontakt – Telefon und E-Mail | 32px | 29 x 24 px | 12px |
| Kontakt – Route planen | 24px | 29 x 24 px | 12px |
| Kontakt – Notrufnummer | 17px | 16 x 13 px | 8px |
Bildflächen
16:9 · mobil wie Desktop
3:2 · mobil 1:1 · Behälter max. 40rem · abgerundet
Original · wie das Bild
Bewerbungsformular
Gleiches Formular wie auf der Kontaktseite, nur mit Bewerbungsfeldern und Datei-Upload. Es liegt als Popup-Template „Bewerbung · Unterlagen einreichen“ — der Knopf darunter öffnet es. Später wandert derselbe Knopf auf die Karriereseite.
Einsatzgebiet
Karte links, Eyebrow + zweiteilige Überschrift + Fließtext rechts. Alle Texte und die Karte sind Eigenschaften der Komponente. Später auf der Karriereseite. Unter 768 px einspaltig.
EinsatzgebietStartpunkt Langenargen47.598° N, 9.541° E 📍
Du bist technikbegeistert und möchtest was erleben? Ob Quereinsteiger oder Fachkraft, wir suchen stets neue Kollegen und Kolleginnen… wer hätte es gedacht? Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.