3.1 Grundprinzip: Flexbox-Layout

Die Seite nutzt das CSS-Flexbox-Modell, um Inhalte vertikal zu organisieren. Das gesamte Layout ist innerhalb eines Containers organisiert:

.container (display: flex, flex-direction: column, height: 100dvh)
├── .header      (10%)
├── .header2     (optional, 5%)
├── .content oder .content2 (75–80%)
└── .footer      (10%)
    

Dadurch bleibt die Seite stets vollständig im Viewport sichtbar und ist auf allen Bildschirmgrößen nutzbar.

3.2 Wichtige CSS-Regeln

1. height: 100dvh; – verwendet 100% der verfügbaren Fensterhöhe, auch auf mobilen Geräten.
2. display: flex; und flex-direction: column; – sorgt für eine vertikale Stapelung der Container.
3. .content nutzt justify-content: center; und align-items: center; für zentrierte Inhalte.
4. Responsives Schriftgrößen-Design durch: max(1.7dvh, 9pt) oder min(4vh, 4vw).

3.3 Responsive Typografie und Tabellen

Die Schriftgrößen, Abstände und Tabellengrößen passen sich an die Bildschirmhöhe und -breite an. Beispiel:

td {
    font-size: max(1.7dvh, 9pt);
    background-color: rgb(238, 97, 97);
}

Das erlaubt sowohl auf kleinen Smartphones als auch auf großen Desktops eine gute Lesbarkeit.

3.4 Sticky Header für Tabellen

Mit folgenden Regeln wird der Tabellenkopf beim Scrollen fixiert, um die Orientierung zu erhalten:

.fixed-header thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

Fazit

Durch das durchdachte Flexbox-Design, dynamische Schriftgrößen und strukturierte CSS-Klassen wirkt die Seite modern, klar und funktioniert auf unterschiedlichsten Geräten einwandfrei.