Texte | Paul Werner
Texte
Inhalt folgt.
/* --- 1. BASIS-EINSTELLUNGEN --- */
body {
font-family: Arial, sans-serif;
max-width: 1600px;
margin: 0 auto;
padding: 1rem 1.5rem 2rem 1.5rem;
color: #333;
line-height: 1.6;
}
/* --- 2. HEADER / BRANDING --- */
.logo-link {
text-decoration: none;
color: inherit;
display: inline-block;
margin-bottom: 2.5rem;
}
.logo-link h1 {
margin: 0;
font-size: 3.2rem;
font-weight: 900; /* KORRIGIERT: 900 statt 300 für echte Fettung */
color: #e98708;
line-height: 1.0;
letter-spacing: -1.5px;
}
.logo-link p {
margin: 0.3rem 0 0 0;
color: #666;
font-size: 1.1rem;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 3px;
}
.logo-link:hover h1 {
color: rgb(238, 73, 7);
transition: color 0.2s ease;
}
/* --- 3. NAVIGATION --- */
nav { margin-bottom: 3rem; }
nav ul {
list-style: none; margin: 0; padding: 0;
display: flex !important; gap: 20px;
}
nav a {
text-decoration: none; color: rgb(238, 73, 7);
font-weight: bold; padding: 5px 0;
}
/* --- 4. RASTER SYSTEM --- */
.raster-container {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 1.5rem !important;
margin: 2rem 0 !important;
}
.raster-item {
background: #f8f9fa; padding: 1.2rem; border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.raster-item:hover { transform: translateY(-5px); }
.raster-bild { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; }
/* --- 5. FOOTER --- */
footer {
margin-top: 5rem;
padding: 2rem 1.5rem;
border-top: 1px solid #eee;
text-align: center;
font-size: 0.9rem;
color: #888;
}
.footer-links {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 15px 25px; margin-top: 0.8rem;
}
.footer-links a { color: #666; text-decoration: none; padding: 10px; }
/* --- 6. ALLE RESPONSIVE ANPASSUNGEN (Ganz am Ende!) --- */
@media (max-width: 1200px) {
.raster-container { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
.logo-link h1 { font-size: 2.2rem; }
nav ul { flex-direction: column !important; gap: 10px; }
.raster-container { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.raster-container { grid-template-columns: 1fr !important; }
.footer-links { flex-direction: column; gap: 5px; }
}