/* Café im Feld – Haupt-Stylesheet
   Bootstrap 5.3 + Google Fonts (Playfair Display / Open Sans)
   Zielgruppe: ältere Besucher → große Schrift, warme Farben, hoher Kontrast
*/

/* ===== Variablen ===== */
:root {
    --cafe-brown:      #5C3D2E;
    --cafe-terracotta: #A0522D;
    --cafe-cream:      #F8F2E9;
    --cafe-text:       #2C2C2C;
    --cafe-border:     #D4B896;
    --cafe-light-bg:   #FDF8F2;
}

/* ===== Basis ===== */
body {
    background-color: var(--cafe-cream);
    background-image: url('bg.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: auto;
    color: var(--cafe-text);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.75;
}

/* Weißer Schleier über dem Hintergrundbild, damit Text gut lesbar bleibt */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(248, 242, 233, 0.7);
    pointer-events: none;
    z-index: 0;
}

.cafe-navbar,
main,
.cafe-footer {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--cafe-brown);
}

a {
    color: var(--cafe-terracotta);
    text-decoration: none;
}
a:hover {
    color: var(--cafe-brown);
    text-decoration: underline;
}

hr {
    border-color: var(--cafe-border);
    opacity: 1;
}

/* ===== Navbar ===== */
.cafe-navbar {
    background-color: var(--cafe-brown);
}

.cafe-navbar .navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.02em;
}

.cafe-navbar .navbar-nav {
    gap: 0.3rem;
}

.cafe-navbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 1rem;
    padding: 0.45rem 0.85rem !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.cafe-navbar .nav-link:hover,
.cafe-navbar .nav-link.active {
    background-color: var(--cafe-terracotta);
    color: #fff !important;
}

.cafe-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.45);
}

.cafe-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== Seiteninhalt ===== */
main {
    min-height: 60vh;
    padding-bottom: 1rem;
}

.page-title {
    font-size: 2rem;
    color: var(--cafe-brown);
    border-bottom: 2px solid var(--cafe-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

/* ===== Info-Kasten (Öffnungszeiten, Hinweise) ===== */
.info-box {
    background-color: #fff;
    border: 1px solid var(--cafe-border);
    border-left: 5px solid var(--cafe-terracotta);
    border-radius: 4px;
    padding: 1.2rem 1.6rem;
    margin-bottom: 1.5rem;
}

.info-box h5 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

/* ===== Carousel – Standard (Startseite, große Bilder) ===== */
.cafe-carousel .carousel-inner {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.cafe-carousel .carousel-item img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

/* ===== Carousel – Fotogalerie (Originalformat behalten) ===== */
/* Bilder 640×426 px werden in natürlicher Größe zentriert dargestellt */
.cafe-carousel-photo {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.cafe-carousel-photo .carousel-item img {
    width: 100%;
    height: auto;          /* natürliche Höhe, kein Strecken */
    object-fit: unset;
    display: block;
}

.cafe-carousel .carousel-control-prev,
.cafe-carousel .carousel-control-next {
    width: 10%;
}

.cafe-carousel .carousel-control-prev-icon,
.cafe-carousel .carousel-control-next-icon {
    background-color: rgba(92, 61, 46, 0.75);
    border-radius: 50%;
    padding: 1.1rem;
    background-size: 50% 50%;
}

.cafe-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--cafe-brown);
}

/* ===== Galerie-Abschnitt ===== */
.gallery-section {
    margin-bottom: 3rem;
}

.gallery-section h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

/* ===== Buttons ===== */
.btn-cafe {
    background-color: var(--cafe-brown);
    color: #fff;
    border: none;
    padding: 0.55rem 1.6rem;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-cafe:hover {
    background-color: var(--cafe-terracotta);
    color: #fff;
}

/* ===== Formulare ===== */
.form-label {
    font-weight: 600;
    color: var(--cafe-brown);
}

.form-control {
    font-size: 1rem;
    border-color: var(--cafe-border);
    background-color: #fff;
}

.form-control:focus {
    border-color: var(--cafe-terracotta);
    box-shadow: 0 0 0 0.2rem rgba(160, 82, 45, 0.22);
}

.form-note {
    font-size: 0.9rem;
    color: #666;
}

/* ===== Termine – Monatsüberschriften ===== */
.termine-monat {
    background-color: var(--cafe-brown);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 4px;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    display: block;
}

/* ===== Termine ===== */
.termine-eintrag {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--cafe-border);
}

.termine-eintrag:last-child {
    border-bottom: none;
}

.termine-datum {
    display: block;
    font-weight: 600;
    color: var(--cafe-brown);
    margin-bottom: 0.2rem;
}

.termine-urlaub {
    background-color: #FFF3CD;
    border-left: 4px solid #FFC107;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    margin: 0.6rem 0;
    font-weight: 600;
}

/* ===== Anfahrt ===== */
.anfahrt-img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* ===== Impressum / Datenschutz ===== */
.legal-section h4 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--cafe-brown);
}

/* ===== Footer ===== */
.cafe-footer {
    background-color: var(--cafe-brown);
    color: rgba(255, 255, 255, 0.9);
    padding: 2.5rem 0 0;
    margin-top: 3rem;
    font-size: 0.97rem;
}

.cafe-footer h5 {
    font-family: 'Playfair Display', serif;
    color: #F0D0B0;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.cafe-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.cafe-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.cafe-footer .footer-bottom {
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 2rem;
    padding: 0.9rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ===== Responsive-Anpassungen ===== */
@media (max-width: 991px) {
    .cafe-navbar .nav-link {
        padding: 0.5rem 0.5rem !important;
    }
    .cafe-navbar .collapse .navbar-nav {
        padding: 0.5rem 0;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 17px;
    }
    .page-title {
        font-size: 1.6rem;
    }
    .cafe-carousel .carousel-item img {
        height: 260px;
    }
    .termine-datum {
        min-width: unset;
    }
}