/* =========================
   Schriftarten
========================= */

@font-face {
    font-family: 'Cooper Hewitt';
    src: url('/fonts/CooperHewitt-Book.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Cooper Hewitt';
    src: url('/fonts/CooperHewitt-Bold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Cooper Hewitt';
    src: url('/fonts/CooperHewitt-Heavy.otf') format('opentype');
    font-weight: 1000;
    font-style: normal;
}


/* =========================
   Reset
========================= */

* {
    margin: 0 auto 30px auto !; important;
    padding: 0;
    box-sizing: border-box;
}


/* =========================
   Grundlayout
========================= */

body {
    background-color: #000000;
    color: rgb(255, 62, 0);
    font-family: 'Cooper Hewitt', sans-serif;
    line-height: 1.5;
    text-align: center;
    padding: 30px;
    font-weight: 600;
}


/* =========================
   Allgemeine Schriftoptik
========================= */

h1, h2, h3, p, a {
    -webkit-text-stroke: 1px #000;
    paint-order: stroke fill;

    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

/* =========================
   Navigation
========================= */

.site-header {
    width: 100%;

    margin-bottom: 40px;

    padding-top: 10px;
}

/* Logo-Stil */
.site-header {
    display: flex;
    align-items: center; /* Vertikale Ausrichtung */
    justify-content: flex-start; /* Logo links, Navigation daneben */
    padding: 15px 20px; /* Innenabstand */
    background-color: #000000; /* Hintergrundfarbe (z. B. weiß) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
}

.site-logo {
    margin-right: 30px; /* Abstand zwischen Logo und Navigation */
}

.site-logo img {
    height: auto; /* Höhe automatisch anpassen */
    max-width: 100%; /* Maximale Breite = Container */
}

/* Navigation-Stil */
.main-nav {
    display: flex;
    gap: 20px; /* Abstand zwischen den Links */
}

.main-nav a {
    text-decoration: none; /* Unterstreichung entfernen */
    color: #333333; /* Textfarbe (dunkelgrau) */
    font-weight: 500; /* Schriftstärke */
    font-size: 16px; /* Schriftgröße */
    transition: color 0.3s; /* Farbübergang bei Hover */
}

.main-nav a:hover {
    color: #FF6B35; /* Orange/Rot (deine Markenfarbe) bei Mouseover */
}

.main-nav {
    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 35px;

    flex-wrap: wrap;
}

.main-nav a {
    color: rgb(255, 62, 0);

    text-decoration: none;

    font-size: 1.2rem;

    font-weight: 400;

    letter-spacing: -0.03em;

    transition:
        transform 0.2s ease,
        color 0.2s ease;

    -webkit-text-stroke: 1px #000;

    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.main-nav a:hover {
    color: rgb(255, 162, 162);

    transform: translateY(-2px);
}

/* =========================
   HERO BEREICH
========================= */

.hero {
    margin-top: 40px;
    margin-bottom: 40px;
}

.hero h1 {
    font-size: clamp(1rem, 7vw, 5rem);
    font-weight: 900;
    color: rgb(255, 162, 162);

    line-height: 0.92;
    letter-spacing: -0.05em;

    margin-bottom: 20px;

    -webkit-text-stroke: 2.5px #000;

    text-shadow:
        5px 5px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
}


/* =========================
   Untertitel
========================= */

.subtitle {
    font-size: clamp(0.5rem, 2vw, 1.5rem);
    font-weight: 900;

    color: rgb(255, 62, 0);

    line-height: 1.0;

    letter-spacing: -0.04em;

    margin-bottom: 30px;

    -webkit-text-stroke: 2px #000;

    text-shadow:
        4px 4px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
}


/* =========================
   Bilder
========================= */

.image-gallery {
    display: flex;
    justify-content: center;
    gap: 25px;

    margin: 50px auto;

    max-width: 1400px;

    flex-wrap: wrap;
}

.image-container {
    width: 30%;
    min-width: 300px;
}

.gallery-image {
    width: 100%;
    height: auto;

    border-radius: 12px;

    border: 2px solid rgb(255, 62, 0);

    box-shadow:
        0 0 20px rgba(255, 62, 0, 0.25),
        0 0 40px rgba(255, 62, 0, 0.15);

    transition: transform 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.015);
}


/* =========================
   Inhaltsboxen
========================= */

.content-sections {
    display: flex;
    justify-content: center;

    gap: 30px;

    margin: 50px auto;

    max-width: 1400px;

    flex-wrap: wrap;
}

.section-box {
    width: 30%;
    min-width: 320px;

    background: rgba(10, 10, 10, 0.85);

    border: 2px solid rgb(255, 62, 0);

    border-radius: 14px;

    padding: 28px;

    text-align: left;

    box-shadow:
        0 0 15px rgba(255, 62, 0, 0.15);

    transition: all 0.3s ease;
}

.section-box:hover {
    transform: translateY(-4px);

    box-shadow:
        0 0 25px rgba(255, 62, 0, 0.3);
}


/* =========================
   Box Überschrift
========================= */

.section-box h2 {
    color: rgb(255, 162, 162);

    font-size: 2.2rem;

    margin-bottom: 20px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.04em;

    -webkit-text-stroke: 1.5px #000;

    text-shadow:
        3px 3px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.section-box h2 a {
    color: inherit;
    text-decoration: none;
}

.section-box h2 a:hover {
    color: white;
}


.blog-post h3 {
    color: rgb(255, 162, 162);

    font-size: 2.2rem;

    margin-bottom: 20px;

    font-weight: 900;

    line-height: 1;


}

/* Anpassung für Smartphones (max-width: 768px) */
@media (max-width: 768px) {
    .blog-post h2 {
        font-size: 2rem; /* Feste Größe auf Smartphones */
    }

    .blog-post h3 {
        font-size: 1.5rem; /* Feste Größe auf Smartphones (kleiner als h2) */
    }
}


/* =========================
   Vorschautext
========================= */

.preview-text,
.section-box p {
    color: rgb(255, 62, 0);

    font-size: 1.15rem;

    font-weight: 700;

    line-height: 1.5;
}


/* =========================
   Footer
========================= */

.footer {

    
    margin-top: 70px;

    padding: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;
}

.copyright {
    color: #808080;

    font-size: 1rem;

    text-align: center;

    flex: 1;
}

.copyright span {
    color: rgb(255, 62, 0);
}

.footer a {
    color: #808080;
    text-decoration: none;
    font-weight: 600;

    -webkit-text-stroke: 0;
    text-shadow: none;
}

.footer a:hover {
    color: rgb(255, 62, 0);
}

/* =========================
   Social Icons
========================= */

.social-icons {
    display: flex;

    gap: 18px;

    justify-content: center;
}

.social-icons img {
    width: 70px;
    height: 70px;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.social-icons img:hover {
    transform: scale(1.08);

    filter:
        drop-shadow(0 0 10px rgba(255, 62, 0, 0.7));
}


/* =========================
   Mail
========================= */

.mail-icon {
    display: flex;

    align-items: center;

    gap: 15px;

    color: #808080;

    text-decoration: none;

    font-size: 1rem;
}

.mail-icon img {
    width: 70px;
    height: 70px;
}

.mail-icon:hover {
    color: rgb(255, 62, 0);
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .image-gallery,
    .content-sections {
        flex-direction: column;
        align-items: center;
    }

    .image-container,
    .section-box {
        width: 95%;
    }

    .hero h1 {
        font-size: 4rem;
    }

    .subtitle {
        font-size: 1.7rem;
    }

    .section-box h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 600px) {

    body {
        padding: 15px;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .subtitle {
        font-size: 1.3rem;
    }

    .preview-text,
    .section-box p {
        font-size: 1rem;
    }

    .social-icons img {
        width: 58px;
        height: 58px;
    }

}

/* =========================
   Blogartige Unterseiten
========================= */

.blog-page {
    width: 100%;
}

.page-header {
    margin-top: 40px;
    margin-bottom: 50px;
}

.page-header h1 {
    font-size: clamp(2rem, 7vw, 5rem);
    font-weight: 900;
    color: rgb(255, 162, 162);
    text-align: center;

    line-height: 0.95;
    letter-spacing: -0.05em;

    -webkit-text-stroke: 2.5px #000;

    text-shadow:
        5px 5px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
}

.blog-content {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 40px;

}

.blog-post {
    width: 100%;

    background: rgba(10, 10, 10, 0.85);

    border: 2px solid rgb(255, 62, 0);
    border-radius: 14px;

    padding: clamp(25px, 4vw, 55px);

    box-shadow:
        0 0 15px rgba(255, 62, 0, 0.15);

    text-align: left;
}

.blog-post h2 {
    color: rgb(255, 162, 162);

    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;

    text-align: center;

    line-height: 1;
    letter-spacing: -0.04em;

    margin-bottom: 35px;

    -webkit-text-stroke: 1.8px #000;

    text-shadow:
        4px 4px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.blog-post p {
    color: rgb(255, 62, 0);

    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 700;

    line-height: 1.65;

    text-align: left;

    margin-bottom: 22px;

    -webkit-text-stroke: 0;
    text-shadow: none;
}

.blog-post p:last-child {
    margin-bottom: 0;
}

.blog-post {
    scroll-margin-top: 120px;
}

/* 1. Maximale Breite für alle Blog-Post-Boxen (wie auf "Grundsätze") */
.blog-post {
    max-width: 1400px; /* oder der Wert, der zu deiner "Grundsätze"-Seite passt */
    margin-left: auto;
    margin-right: auto;
}



/* ===== DATUM & UHRZEIT (Blog-Meta) ===== */
.post-meta {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #ff6600; /* Orange, wie dein Fließtext */
    margin-bottom: 15px;
    text-align: left;
    display: block;
}

.post-date {
    font-weight: 700; /* Fett für das Datum */
    margin-right: 10px;
}

.post-time {
    color: #cccccc; /* Etwas heller für die Uhrzeit */
}

/* Abstände für Bilder nach dem Meta-Feld */
.blog-post img {
    margin-top: 10px; /* Abstand zwischen Meta und Bild */
}