/* Allgemeine Gestaltung */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; color: #222; background: #f1f1f1; line-height: 1.5; }
.seite { max-width: 1000px; margin: 25px auto; background: white; }
header { display: flex; align-items: center; gap: 25px; padding: 30px; background: #e6edf3; }
.profilbild { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; }
h1 { margin: 0; }
h2 { margin-top: 0; border-bottom: 2px solid #3977a6; padding-bottom: 6px; }
h3 { margin-bottom: 0; }

/* Kontaktleiste und Hover-Effekt */
nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px 30px; background: #d5e1eb; }
nav a, nav button { color: white; background: #34678b; padding: 9px 12px; text-decoration: none; border: 0; font: inherit; cursor: pointer; }
nav a:hover, nav button:hover { background: #173c58; }

/* Inhalt wie im Wireframe */
main { display: flex; gap: 25px; padding: 30px; }
aside { width: 30%; }
.inhalt { width: 70%; }
section { margin-bottom: 30px; }
article { margin-bottom: 22px; }
footer { padding: 15px; text-align: center; background: #e6edf3; }

/* Smartphones */
@media (max-width: 650px) {
    header, main { flex-direction: column; }
    aside, .inhalt { width: 100%; }
    header { text-align: center; }
    .profilbild { margin: auto; }
}

/* Drucken und als PDF speichern */
@media print {
    body { background: white; }
    .seite { margin: 0; max-width: none; }
    nav { display: none; }
    header, footer { background: white; }
    main { gap: 15px; }
    section, article { break-inside: avoid; }
}