@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #000000;
    --bg-header: #111111;
    --bg-footer: #111111;
    --text: #ffffff;
    --line: rgba(255, 255, 255, 0.1);
    --radius: 25px;
    --font-main: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box; /* Alle Elemente berücksichtigen Padding und Border in der Gesamtgröße */
}

body {
    margin: 0; /* Entfernt Standard-Außenabstand */
    font-family: Arial, Helvetica, sans-serif; /* Schriftart */
    font-size: 16px; /* Standard-Schriftgröße */
    line-height: 1.6; /* Zeilenhöhe */
    color: var(--text); /* Textfarbe aus CSS-Variable */
    background: var(--bg); /* Hintergrundfarbe aus CSS-Variable */
}

.header,
.container,
.footer {
    font-family: var(--font-main);
}

.content {
    font-size: clamp(17px, 0.25vw + 16px, 19px);
    line-height: 1.7;
}

.content p,
.content li,
.content td {
    line-height: 1.7;
}

.container {
    max-width: 1120px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container horizontal */
    padding: 40px; /* Innenabstände aus CSS-Variable */
}

.header {
    height: 100px; /* Höhe des Headers */
    border-bottom: 1px solid var(--line); /* Untere Linie als Trennung */
    display: flex; /* Flexbox-Layout für Kinder-Elemente */
    justify-content: space-between; /* Verteilt Kinder-Elemente */
    align-items: center; /* Vertikale Ausrichtung der Kinder */
    background: var(--bg-header); /* Hintergrundfarbe aus CSS-Variable */
    padding: 0 40px; /* Innenabstände links und rechts aus CSS-Variable */
}

.logo img {
    width: 100px; /* Breite des Bildes */
    height: auto; /* Höhe passt sich zum Seitenverhältnis an */
    object-fit: contain; /* Bild skaliert ohne Verformung */
}

.nav-buttons {
    display: flex; /* Kinder horizontal anordnen */
    gap: 12px; /* Abstand zwischen Kindern */
}

.nav-buttons a {
    display: flex; /* Ermöglicht Flexbox-Eigenschaften */
    align-items: center; /* Vertikale Ausrichtung der Inhalte */
    color: var(--text); /* Textfarbe aus CSS-Variable */
    text-align: center; /* Text zentrieren */
    background: transparent; /* Hintergrundfarbe */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-weight: 500; /* Schriftstärke */
    padding: 12px 18px; /* Innenabstände (oben/unten links/rechts) */
    border-radius: var(--radius); /* Rundung der Ecken aus CSS-Variable */
    transition: all 0.2s ease; /* Animationsdauer für alle Änderungen */
    width: auto; /* Automatische Breite basierend auf Inhalt */
}

.nav-buttons a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Hintergrund beim Hover */
    transform: translateY(-2px); /* Verschiebt Element nach oben */
}

.hero-banner-title {
    margin: 0;
    color: #f4ede5;
    font-size: 5vw;
    font-weight: 700;
    letter-spacing: 0.18vw;
    text-transform: uppercase;
    text-shadow:
        0 0.25vw 1vw rgba(0, 0, 0, 0.45),
        0 0 1.5vw rgba(242, 161, 74, 0.16);
}

h1 {
    text-shadow: 0.08em 0.08em 0px rgba(180, 30, 110, 0.90) !important;
}

hr {
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

p a, .realblog_buttons a {
    color: var(--text);
    text-decoration: none;
    padding: 8px 16px;
    margin-right: 10px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    font-weight: 500;
}

.footer {
    background: var(--bg-footer); /* Hintergrundfarbe aus CSS-Variable */
    border-top: 1px solid var(--line); /* Obere Linie als Trennung */
    padding: 32px 40px; /* Innenabstände (oben/unten links/rechts) */
    text-align: center; /* Text zentrieren */
    font-size: 14px; /* Schriftgröße */
}

.footer-link {
    color: var(--text); /* Textfarbe aus CSS-Variable */
    text-decoration: none; /* Keine Unterstreichung */
    padding: 8px 16px; /* Innenabstände (oben/unten links/rechts) */
    display: inline-block; /* Schrumpft auf Inhaltsgröße */
    font-weight: 500; /* Schriftstärke */
}

.footer-link:hover {
    text-decoration: underline; /* Unterstreichung */
}

.hero-banner {
    height: clamp(200px, 24vw, 320px);
}

.hero-banner-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hero-banner-title {
    width: min(92%, 16ch);
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    letter-spacing: clamp(0.06rem, 0.16vw, 0.18rem);
}

.footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 218, 165, 0.18);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.08);
}

.footer-contact-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 226, 184, 0.72);
}

.footer-contact-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-weight: 700;
    color: #fff4df;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.footer-links .footer-link {
    padding: 0.3rem 0.7rem;
}

@media (max-width: 768px) {
    .hero-banner {
        height: clamp(200px, 42vw, 220px);
    }

    .hero-banner-title {
        width: min(94%, 14ch);
        font-size: clamp(1.65rem, 7vw, 2.5rem);
        letter-spacing: 0.05rem;
    }

    .footer {
        padding: 28px 20px;
    }

    .footer-contact-item {
        width: min(100%, 360px);
        justify-content: space-between;
        border-radius: 1rem;
    }

    .footer-contact-value {
        justify-content: flex-end;
    }
}