/* ============================= */
/* Allgemeine Styles */
/* ============================= */

body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #F6F0E2;
}

html {
    lang: de;
    scroll-behavior: smooth;
}

/* ============================= */
/* Schriftarten */
/* ============================= */
@font-face {
    font-family: DailyProphet;
    src: url('../font/prophet-bold.TTF') format('truetype'); /* Pfad prüfen */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: DailyProphetNews;
    src: url('../font/prophet.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ============================= */
/* Typografie & Layout */
/* ============================= */

.title {
    font-family: DailyProphet, serif;
    font-weight: bold;
    font-size: 6rem; /* Standardgröße */
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid black;
    margin-bottom: 10px;
}

.subtitle {
    font-family: DailyProphet, serif;
    font-size: calc(6rem * 0.5);
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-align: center;
}

.dpnews {
    font-family: DailyProphetNews, serif;
}

.header {
    font-family: DailyProphet, serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}

.blocked {
    text-align: justify;
}

.information {
    font-family: DailyProphet, serif;
    text-align: center;
    font-size: 1.25rem;
}

h2 {
    font-family: Georgia, serif;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.gallery-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

    /* ============================= */
/* Links & Buttons */
/* ============================= */

.linkedin {
    text-decoration: none;
    color: #222529;
}

.linkedin:hover {
    text-decoration: underline;
}

.links {
    color: #222529;
    text-decoration: underline;
}

.links:hover {
    text-decoration: none;
}

.coffee,
.coffee:hover {
    text-decoration: none;
}

/* ============================= */
/* Grid & Layout (Maps, Blöcke, Formulare) */
/* ============================= */

.mapouter {
    position: relative;
    text-align: right;
    width: 100%;
    height: 400px;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    width: 100%;
    height: 400px;
}

.gmap_iframe {
    height: 400px !important;
}

.long-word {
    hyphens: auto;
    word-wrap: break-word;
}

.formheader {
    font: 700 1rem 'Times New Roman', Times, serif;
}

.offcanvas {
    z-index: 1060; /* Höher als der Bootstrap-Backdrop */
}

#gallery {
    column-count: 3;
    column-gap: 1rem;
}

.gallery-img {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    #gallery {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    #gallery {
        column-count: 1;
    }
}

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

/* Tablets & kleinere */
@media (max-width: 992px) {
    .title {
        font-size: 5.25rem;
    }

    .subtitle {
        font-size: calc(5.25rem * 0.5);
    }

}

/* Smartphones */
@media (max-width: 768px) {
    .title {
        font-size: 4.5rem;
    }

    .subtitle {
        font-size: calc(4.5rem * 0.5);
    }

    .desktop-only {
        display: none;
    }
}

/* Sehr kleine Smartphones */
@media (max-width: 576px) {
    .title {
        font-size: 3rem;
    }

    .subtitle {
        font-size: calc(3rem * 0.5);
    }
}

/* ============================= */
/* Dark Mode */
/* ============================= */

[data-bs-theme="dark"] body {
    background-color: #4B4B4B;
    color: #D6D6D7;
}

[data-bs-theme="dark"] .header,
[data-bs-theme="dark"] .linkedin,
[data-bs-theme="dark"] .information,
[data-bs-theme="dark"] .dpnews {
    color: #D6D6D7;
}

[data-bs-theme="dark"] .linkedin:hover {
    color: #D6D6D7;
    text-decoration: underline;
}

[data-bs-theme="dark"] .title {
    color: #D6D6D7;
    border-bottom: 2px solid #D6D6D7;

}

[data-bs-theme="dark"] .subtitle {
    color: #D6D6D7;
}

[data-bs-theme="dark"] a {
    color: #D6D6D7;
}

[data-bs-theme="dark"] .links:hover {
    text-decoration: none !important;
}

[data-bs-theme="dark"] a:hover {
    text-decoration: underline;
    color: #D6D6D7;
}