## Aufgaben (in styles.css bearbeiten)

### Aufgabe 1 (5 Punkte)

Selektieren Sie alle `<section>`-Elemente die sich in einem `<article>`-Element befinden und setzen Sie:

- Hintergrundfarbe: `lightgray`
- Schriftart: `Arial, sans-serif`
- Schriftgröße: 0.9 mal die Größe des Root Elementes
- Innenabstand: 1.5 mal die Größe des Root Elementes
- Rand: grau, 1 Pixel, durchgezogene Linie
- Gerundete Ecken mit Radius 10 Pixel

### Aufgabe 2 (5 Punkte)

Selektieren Sie den Button mit der ID `submit-btn` und gestalten Sie ihn:

- Hintergrundfarbe: `darkcyan`
- Textfarbe: `white`
- Innenabstand: `0.8rem 2rem`
- Rahmen: `none`
- Border-radius: `5px`

### Aufgabe 3 (10 Punkte)

Platzieren Sie das `<div>` mit der ID `highlight-box` im Grid-Container so:

- Zeile: 3
- benutzt alle (vier) Spalten

### Aufgabe 4 (10 Punkte)

Gestalten Sie den Flex-Container mit der Klasse `nav-menu`:

- Die Elemente sollen gleichmäßig verteilt werden (`space-evenly`)
- Bei Bedarf sollen sie umbrechen (`wrap`)
- Vertikale Ausrichtung: zentriert

### Aufgabe 5 (10 Punkte)

Erstellen Sie einen Hover-Effekt für alle Links (`<a>`) in der Klasse `footer-links`:

- Textfarbe beim Hover: `orange`
- Textdekoration: `underline`
- Fügen Sie einen sanften Übergang mit Dauer 0.3 Sekunden hinzu

### Aufgabe 6 (10 Punkte)

Formatieren Sie im `article.testbereich` alle `<section>`-Elemente deren `data-topic` Attribut mit `css-adv` beginnt:

- Rahmen: 2px, strichliert, Farbe `rot`

Innerhalb dieser Sektion befindet sich eine Liste. Gestalten Sie NUR den dritten Listeneintrag und darin den direkten Link:

- Textfarbe: `grün`
- Schriftgewicht: `bold`

Fügen Sie zu diesem Link einen Hover-Effekt hinzu, sodass beim Hovern die Schriftfarbe innerhalb von einer Sekunde graduell auf rot geändert wird.

## Testbereich

### Content Box 1

Dies ist eine Content Box für Aufgabe 1. Der Text sollte entsprechend formatiert werden.

### Content Box 2

Eine weitere Content Box. Alle Boxes mit der Klasse "content-box" sollten gleich aussehen.

### Highlight Box

Diese Box sollte im Grid-Layout richtig positioniert werden (Aufgabe 3).

### Content Box 3

Noch eine Content Box zum Testen der Formatierung aus Aufgabe 1.

### Erweiterte Selektoren (Test für Aufgabe 6)

- Link 1
- Link 2
- Link 3
- Link 4

Nur der dritte Link oberhalb sollte speziell formatiert werden.