/* =============================================
   Stylesheet
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400..900&family=Cormorant+Unicase:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Metamorphous&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Wittgenstein:ital,wght@0,400..900;1,400..900&display=swap');

/* --- CSS VARIABLEN --- */
:root {
    /* Basis-Farbtöne */
    --farbe-hintergrund:  #faf4e8; /* helle Creme */
    --farbe-karte-bg:     #f3ebd4; /* dunkleres Creme */
    --farbe-dunkel:       #1a1108; /* Tiefes Anthrazit-Braun für Text & Footer-Kontrast */
    --farbe-braun:        #2c1e0f;
    --farbe-braun-hell:   #4a3220;

    /* Gold-Töne (Leicht abgedunkelt) */
    --farbe-gold:         #b5821b;
    --farbe-gold-hell:    #c9952a;
    --farbe-gold-matt:    #8a6820;

    /* Text-Farben */
    --farbe-text:         #2c1e0f; /* Dunkelbraun */
    --farbe-text-hell:    #6e533c; /* Für sekundäre Angaben */
    --farbe-rot:          #7a1c1c; /* Akzentfarbe */

    /* Schriften */
    --schrift-titel:      'Metamorphous';
    --schrift-nav:        'Cinzel';
    --schrift-text:       'Crimson Text';

    --gewicht-leicht:  200;
    --gewicht-normal:  400;
    --gewicht-medium:  500;
    --gewicht-fett:    600;
    --gewicht-extra:   700;

    /* Effekte angepasst an hellen Hintergrund */
    --schatten-gold:      0 4px 15px rgba(138, 104, 32, 0.15);
    --schatten-tief:      0 8px 25px rgba(26, 17, 8, 0.08);
    --border-gold:        1px solid rgba(138, 104, 32, 0.25);
    --border-gold-stark:  2px solid var(--farbe-gold);

    --transition:         all 0.35s ease;
}

/* --- RESET & BASIS --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--schrift-text);
    background-color: #0d0a07; /* Dunkler Fallback-Ton */
    color: var(--farbe-text);
    font-size: 18px;
    line-height: 1.7;
    min-height: 100vh;
    position: relative;
}


/* Pergament-Hintergrund */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/h2.jpeg');
    background-size: cover;
    background-position: center top;
    z-index: -10;
    pointer-events: none;
}


a {
    color: var(--farbe-gold);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--farbe-gold-hell);
}

img {
    max-width: 100%;
    display: block;
}

/* =============================================
   ORNAMENT-TRENNLINIEN
   ============================================= */
.ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--farbe-gold-matt);
    font-size: 1.2rem;
}
.ornament::before,
.ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--farbe-gold-matt), transparent);
}

/* =============================================
   HEADER & NAVIGATION (Double-Decker Style)
   ============================================= */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--farbe-hintergrund);
    border-bottom: 2px solid var(--border-gold);
    padding: 0 2rem;
    box-shadow: 0 4px 20px var(--schatten-tief);
}

.header-top {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 75px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    color: var(--farbe-braun);
    text-shadow: 0 2px 4px rgba(0,0,0,0.03);
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 12px; /* Abstand zwischen Logo-Grafik und Text */
}


.logo-text {
    display: flex;
    flex-direction: column;
}


.header-logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    color: var(--farbe-braun);
}


.logo span {
    display: block;
    font-family: var(--schrift-nav);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--farbe-gold-matt);
    font-weight: 400;
    text-transform: uppercase;
}

/* Desktop-Navigation */
nav {
    max-width: 1300px;
    margin: 0 auto;
    border-top: 1px solid rgba(138, 104, 32, 0.15);
    padding: 0.6rem 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.nav-trenn {
    color: var(--farbe-gold-matt);
    font-size: 0.7rem;
    opacity: 0.6;
    user-select: none;
}

nav ul li a {
    font-family: var(--schrift-nav);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--farbe-text);
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    position: relative;
    transition: var(--transition);
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 2px;
    background: var(--farbe-gold);
    transition: var(--transition);
}

nav ul li a:hover { color: var(--farbe-gold); }
nav ul li a:hover::after,
nav ul li a.aktiv::after {
    left: 0.8rem;
    right: 0.8rem;
}
nav ul li a.aktiv { color: var(--farbe-gold); }

/* Navigations-Buttons */
.nav-reservierung,
.nav-speisekarte {
    background: var(--farbe-gold);
    color: var(--farbe-hintergrund);
    font-family: var(--schrift-nav);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.5rem 1.2rem;
    border-radius: 2px;
    box-shadow: var(--schatten-gold);
    transition: var(--transition);
    text-decoration: none;
}
.nav-reservierung:hover,
.nav-speisekarte:hover {
    background: var(--farbe-braun);
    color: var(--farbe-hintergrund);
}

/* Hamburger Menü-Icon */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
}
.hamburger span {
    width: 26px;
    height: 2px;
    background: var(--farbe-braun);
    transition: var(--transition);
    display: block;
}

/* =============================================
   HERO-BEREICH & RESERVIERUNGSBOX
   ============================================= */
.hero {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201,149,42,0.05) 0%, transparent 70%);
    pointer-events: none;
}


.hero::after {
    display: none; /* Deaktiviert, da es jetzt IN die Box wandert */
}

/* --- 2. Pergament-Box --- */
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 850px;
    width: 100%;
    padding: 3.5rem 2.5rem;
    border-radius: 6px;
    border: var(--border-gold);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    margin: 2rem auto;
}



/* Der Pergament-Hintergrund wird eine Ebene tiefer gelegt (-2) */
.hero-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(250, 244, 232, 0.94);
    border-radius: 6px;
    z-index: -2; /* Ganz unten in der Box */
}



/* Das Trommel-Piktogramm liegt jetzt genau DAZWISCHEN (-1) */
.hero-content::after {
    content: '';
    position: absolute;
    width: 75%;
    height: 75%;
    max-width: 550px;
    max-height: 550px;
    opacity: 0.14;
    top: 52%; /* Minimal nach unten verschoben */
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background-image: url('../img/trommel-piktogramm-schraeg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1; /* Über dem Pergament (-2), aber unter dem Text (0) */
}



.hero-eyebrow {
    font-family: var(--schrift-nav);
    font-size: 1rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--farbe-gold-matt);
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-family: var(--schrift-titel);
    font-weight: var(--gewicht-normal);
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    color: var(--farbe-braun);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.hero-untertitel {
    font-family: var(--schrift-nav);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    letter-spacing: 0.25em;
    color: var(--farbe-gold);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero-text {
    font-size: 1.2rem;
    color: var(--farbe-text-hell);
    max-width: 560px;
    margin: 0 auto 2.5rem;
    font-style: italic;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    font-family: var(--schrift-nav);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.9rem 2.2rem;
    border-radius: 2px;
    transition: var(--transition);
    cursor: pointer;
    display: inline-block;
}

.btn-gold {
    background: var(--farbe-gold);
    color: var(--farbe-hintergrund);
    font-weight: 700;
    box-shadow: var(--schatten-gold);
}
.btn-gold:hover {
    background: var(--farbe-braun);
    color: var(--farbe-hintergrund);
    transform: translateY(-2px);
}

.btn-outline {
    border: var(--border-gold-stark);
    color: var(--farbe-gold);
    background: transparent;
}
.btn-outline:hover {
    background: rgba(181, 130, 27, 0.08);
    color: var(--farbe-gold-matt);
    transform: translateY(-2px);
}

/* =============================================
   INFO-CARDS (Wissenswertes)
   ============================================= */
.info-section {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-titel {
    font-family: var(--schrift-titel);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--farbe-braun);
    text-align: center;
    margin-bottom: 0.5rem;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.card {
    background: var(--farbe-karte-bg);
    border: var(--border-gold);
    padding: 2rem;
    border-radius: 4px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--schatten-tief);
    z-index: 1;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--farbe-gold), transparent);
    transform: scaleX(0);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--farbe-gold);
}
.card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}


/* Das SVG wird unsichtbar in den Hintergrund der Karte gelegt */
.card-bg-svg {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    width: 160px;
    height: 160px;
    z-index: 0;
    opacity: 0.2;
    pointer-events: none;
    transition: var(--transition);
}


.card h3 {
    font-family: var(--schrift-nav);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--farbe-gold);
    margin-bottom: 0.8rem;
}

.card p {
    color: var(--farbe-text);
    font-size: 1rem;
}

/* Piktogramme im Kartenhintergrund */
.card::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    opacity: 0.8;
    bottom: -20px;
    right: -20px;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    transition: var(--transition);
}

.card:hover::after {
    opacity: 0.80;
    transform: scale(1.06) rotate(-2deg);
}


/* Hover-Effekt für das Wasserzeichen */
.card:hover .card-bg-svg {
    transform: scale(1.06) rotate(-4deg); /* Das SVG dreht und vergrößert sich minimal beim Hovern */
    opacity: 0.50; /* Wird beim Drüberfahren einen Hauch deutlicher (10%) */
}

/* =============================================
   SPEISEKARTE & UNTERSEITEN (PROVISORISCH)
   ============================================= */
.menu-item {
    border-bottom: 1px solid rgba(138, 104, 32, 0.2);
}
.menu-item-info h4 {
    color: var(--farbe-braun);
}



/* =============================================
   MODIFIER FÜR BARDEN-BOX (SINGLE FULL-WIDTH TILE)
   ============================================= */

/* Erzwingt volle Breite für die Kachel im Grid */
.card-barde-single {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: 2.5rem 2rem;
    box-sizing: border-box;
}

.card-barde-single p {
    max-width: 650px; /* Hält die Zeilenlänge lesbar */
    margin: 0 auto;
}

.card-barde-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

@media (max-width: 500px) {
    .card-barde-links {
        flex-direction: column;
        gap: 0.8rem;
    }
}











/* =============================================
   SOCIAL MEDIA SIDEBAR (FIXED / MITLAUFEND)
   ============================================= */
.social-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background-color: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-right: none;
    padding: 0.7rem 0.5rem 0.7rem 0.7rem;
    border-radius: 8px 0 0 8px;
    box-shadow: var(--schatten-tief);
    transition: var(--transition);
}

.social-icon {
    color: var(--farbe-braun);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    transition: var(--transition);
}

.social-icon svg {
    transition: var(--transition);
}

.social-icon:hover {
    background-color: rgba(181, 130, 27, 0.12);
    color: var(--farbe-gold);
}

.social-sidebar:hover {
    padding-left: 0.9rem;
}

/* =============================================
   FOOTER
   ============================================= */
footer {
    border-top: var(--border-gold-stark);
    background: var(--farbe-dunkel);
    padding: 3rem 2rem 1.5rem;
    margin-top: 4rem;
    color: #f0e6cc;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-logo {
    font-family: var(--schrift-titel);
    font-size: 1.2rem;
    color: var(--farbe-gold-hell);
    margin-bottom: 0.8rem;
}

.footer-text {
    font-size: 0.95rem;
    color: #d4c4a0;
    font-style: italic;
}

.footer-links h4 {
    font-family: var(--schrift-nav);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--farbe-gold-hell);
    margin-bottom: 1rem;
}

.footer-links ul li {
    list-style: none;
}

.footer-links ul li a {
    color: #f0e6cc;
    display: inline-block;
    padding: 0.25rem 0;
}

.footer-links ul li a:hover {
    color: var(--farbe-gold-hell);
}

.footer-bottom {
    border-top: 1px solid rgba(201,149,42,0.2);
    padding-top: 1.5rem;
    color: var(--farbe-gold-hell);
}


/* =============================================
   DYNAMIC RESPONSIVE MEDIA QUERIES (Cascading)
   ============================================= */

/* --- TABLETS & KLEINE LAPTOPS --- */
@media (max-width: 900px) {
    header {
        padding: 0 1rem;
        position: relative; /* Wichtig: Verankert das Nav-Menü dynamisch am Header */
    }

    .hamburger {
        display: flex;
    }

    /* Verändert die untere Zeile mobil in das Hamburger-Slideout */
    nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--farbe-karte-bg);
        border-top: none;
        border-bottom: var(--border-gold);
        padding: 1.5rem;
        box-shadow: var(--schatten-tief);
        max-width: 100%;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    nav.offen {
        display: block;
    }

    nav ul {
        flex-direction: column;
        gap: 0;
    }

    .nav-trenn {
        display: none;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(138, 104, 32, 0.15);
        font-size: 0.9rem;
    }
    nav ul li:last-child a {
        border-bottom: none;
    }
    nav ul li a::after {
        display: none;
    }
}

/* --- KLEINE TABLETS & PHABLETS --- */
@media (max-width: 768px) {
    .social-sidebar {
        top: auto;
        bottom: 25px;
        transform: none;
        padding: 0.5rem 0.4rem 0.5rem 0.6rem;
        gap: 0.4rem;
    }

    .social-icon {
        width: 34px;
        height: 34px;
    }
}

/* --- SMARTPHONES (2-ZEILEN-GRID) --- */
@media (max-width: 600px) {
    header {
        padding: 0.5rem 0.8rem;
    }

    .header-top {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 0.5rem;
        align-items: center;
    }

    /* ZEILE 1: Logo & Titel zentriert */
    .logo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 1.15rem;
    }

    .header-logo {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .logo span {
        display: block;
        font-size: 0.55rem;
        letter-spacing: 0.12em;
    }

    /* ZEILE 2: 3-Zonen-Ausrichtung (Links - Mitte - Rechts) */
    .header-actions {
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.4rem;
        border-top: 1.1px solid rgba(138, 104, 32, 0.35);
    }

    /* Links: Speisekarte */
    .header-actions .nav-speisekarte {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.6rem;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        border-radius: 3px;
        text-decoration: none;
    }

    /* Mitte: Sprachwechsler zentriert */
    .lang-switch {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        margin: 0;
    }

    /* Rechts: Hamburger Button */
    .hamburger {
        padding: 2px;
        margin: 0;
    }

    /* Standard-Anpassungen für den Rest der Seite */
    .hero {
        padding: 2.5rem 1rem;
    }
    .hero-eyebrow {
        font-size: 0.75rem;       /* Leicht verkleinert für schmale Screens */
        letter-spacing: 0.12em;
        margin-bottom: 1rem;
    }
    .info-section {
        padding: 2.5rem 1rem;
    }
    footer {
        padding: 2rem 1rem 1.5rem;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
}

/* --- SCHMALE SMARTPHONES --- */
@media (max-width: 580px) {
    .hero-reservation-box {
        padding: 1rem;
    }
    .res-buttons-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .btn-multi {
        padding: 1.2rem 0.5rem;
    }
}

/* --- MINI SMARTPHONES --- */
@media (max-width: 480px) {
    .logo {
        font-size: 1.1rem;
    }
    .logo span {
        font-size: 0.55rem;
    }
    /* Verhindert, dass Zeile 2 auf sehr engen Bildschirmen Platzprobleme bekommt */
    .header-actions .nav-speisekarte {
        padding: 0.3rem 0.55rem;
        font-size: 0.68rem;
    }
    .lang-switch {
        font-size: 0.8rem;
    }
}

/* --- ULTRA-SCHMALE BILDSCHIRME (< 420px) --- */
@media (max-width: 420px) {
    /* Keine Header-Überschreibungen hier – der Header bleibt starr 2-zeilig! */
    .hero::after {
        width: 85vw;
        height: 85vw;
        opacity: 0.15;
    }

    .card {
        padding: 1.5rem;
    }

    .social-sidebar {
        bottom: 15px;
        gap: 0.3rem;
    }

    .social-icon {
        width: 36px;
        height: 36px;
    }
}


/* =============================================
   SPEISEKARTE ERWEITERUNGEN
   ============================================= */

/* Hero-Bereich oben */
.seiten-hero {
    text-align: center;
    padding: 1rem 2rem 1rem;
    max-width: 800px;
    margin: 0 auto;
}
.seiten-hero h1 {
    font-family: var(--schrift-titel);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    color: var(--farbe-braun);
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.seiten-hero p {
    font-size: 1.15rem;
    color: var(--farbe-text-hell);
    font-style: italic;
}

/* Filter-Leiste */
.menu-filter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem auto 3.5rem;
    max-width: 600px;
    padding: 0 1.5rem;
}


.filter-group {
    display: flex;
    gap: 10px;              /* Abstand zwischen den einzelnen Buttons */
    justify-content: center;
}


.filter-btn {
    font-family: var(--schrift-nav);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.7rem 1.6rem;
    border: var(--border-gold);
    background: var(--farbe-karte-bg);
    color: var(--farbe-braun);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
    box-shadow: var(--schatten-tief);
    position: relative;
}
.filter-btn:hover {
    background: rgba(181, 130, 27, 0.08);
    color: var(--farbe-rot);
    transform: translateY(-1px);
}
.filter-btn.aktiv {
    background: var(--farbe-gold);
    color: var(--farbe-hintergrund);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), var(--schatten-gold);
    transform: translateY(1px);
}

/* Menü-Karten Layout */
.speisekarte-section {
    max-width: 900px;
    margin: 0 auto 6rem;
    padding: 0 1.5rem;
}
.menu-kategorie {
    /*margin-bottom: 4rem;*/
    background: var(--farbe-karte-bg);
    /*padding: 3rem 2.5rem;*/
    border: var(--border-gold);
    box-shadow: var(--schatten-tief);
    border-radius: 4px;
    padding: 2.5rem;
    margin-bottom: 3rem;
}
.menu-kategorie-titel {
    font-family: var(--schrift-titel);
    font-size: 1.85rem;
    color: var(--farbe-rot);
    text-align: center;
    margin-bottom: 2.5rem;
    letter-spacing: 0.05em;
}
.menu-kategorie-titel::after {
    content: ' ✦ ⚜ ✦ ';
    display: block;
    font-size: 0.8rem;
    color: var(--farbe-gold-matt);
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* Einzelne Gerichte & Kerzenschein-Hover */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    margin: 0 -1rem;
    border-radius: 4px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, rgba(138, 104, 32, 0.2) 20%, rgba(138, 104, 32, 0.2) 80%, transparent) 1;
    transition: all 0.3s ease;
}
.menu-item:last-child {
    border-bottom: none;
    border-image: none;
}
.menu-item:hover {
    background: rgba(181, 130, 27, 0.06);
    transform: translateX(6px);
    padding-left: 1.2rem;
}
.menu-item-info {
    flex: 1;
}
.menu-item-info h4 {
    font-family: var(--schrift-nav);
    font-size: 1.2rem;
    color: var(--farbe-braun);
    font-weight: 600;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.menu-item-info p {
    font-family: var(--schrift-text);
    font-size: 1.05rem;
    color: var(--farbe-text-hell);
    font-style: italic;
    margin-top: 0.4rem;
    line-height: 1.45;
}

/* Einheitliches Preis-Layout für einzelne und gestaffelte Preise */
.menu-preis,
.menu-preis-staffel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
    min-width: 100px;
}

/* Spezifische Typographie für einzelne Preise */
.menu-preis {
    font-family: var(--schrift-nav);
    font-size: 1.2rem;
    color: var(--farbe-text);
    font-weight: normal;
    transition: all 0.3s ease;
}


.menu-item.empfehlung {
    background: rgba(122, 28, 28, 0.03);
    border: 1px solid rgba(122, 28, 28, 0.15);
    border-left: 4px solid var(--farbe-rot);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1.5rem;
    border-image: none;
}
.menu-item.empfehlung:hover {
    background: rgba(122, 28, 28, 0.06);
    border-left: 6px solid var(--farbe-rot);
}
.empfehlung-badge {
    font-family: var(--schrift-nav);
    font-size: 0.65rem;
    color: var(--farbe-rot);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    margin-bottom: 0.2rem;
}

/* Badges für Vegetarisch/Vegan */
.menu-badge {
    font-family: var(--schrift-nav);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    font-weight: 700;
    display: inline-block;
}
.menu-badge.veg {
    background-color: rgba(122, 28, 28, 0.05);
    color: var(--farbe-rot);
    border: 1px solid rgba(122, 28, 28, 0.2);
}
.menu-badge.vgn {
    background-color: rgba(181, 130, 27, 0.05);
    color: var(--farbe-gold-matt);
    border: 1px solid rgba(181, 130, 27, 0.25);
}


/* Eine einzelne Preiszeile innerhalb der Staffel */
.preis-zeile {
    font-family: var(--schrift-nav);
    font-size: 1.2rem;
    color: var(--farbe-text);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    white-space: nowrap;
}

/* Das kleine, Größen-Label (z.B. 0,5 l oder Klein) */
.preis-zeile small {
    font-family: var(--schrift-text); /* Besser lesbare Brotschrift für Maßeinheiten */
    font-size: 0.7rem;
    color: var(--farbe-gold-matt);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
    background: rgba(181, 130, 27, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: normal;
}

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
    .menu-preis-staffel {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.75rem;
        width: 100%;
        margin-top: 0.25rem;
    }
    .preis-zeile {
        width: auto;
    }
    /* Single-price items should behave like the staffel on small screens */
    .menu-preis {
        flex-direction: row;
        min-width: auto;
        width: auto;
    }
}


/* Allergen-Code global hübsch machen */
.allergen-code {
    font-size: 0.7rem;
    color: var(--farbe-gold-matt);
    vertical-align: super;
    font-weight: normal;
}


/* Bringt Listen in Textboxen auf exakt dieselbe Optik wie <p>-Fließtext */
.card ol {
    font-family: var(--schrift-text) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important; /* Passt die Zeilenhöhe exakt an den Fließtext an */
    color: var(--farbe-text);
    text-align: justify; /* Erzwingt den Blocksatz auch innerhalb der Liste */
    padding-left: 25px; /* Genug Platz, damit die Nummern links nicht abgeschnitten werden */
}

/* Sorgt für einen schönen Abstand zwischen den einzelnen Punkten */
.card ol li {
    margin-bottom: 0.8rem;
    padding-left: 5px;
}

/* Verhindert, dass der letzte Punkt einen unnötigen Abstand nach unten erzeugt */
.card ol li:last-child {
    margin-bottom: 0;
}


/* Alle Stichpunkte (li) in einer Liste (ul) innerhalb einer Karte (card) */
.card ul li {
    margin-bottom: 0.1rem; /* Flexibler Abstand nach unten */
}

/* Verhindert einen doppelt großen Abstand nach dem allerletzten Punkt */
.card ul li:last-child {
    margin-bottom: 0;
}



/* Zweireihige Reservierungsbox */
.hero-reservation-box {
    display: inline-flex;
    flex-direction: column;
    background: rgba(250, 244, 232, 0.93);
    border: var(--border-gold);
    border-radius: 4px;
    padding: 1.4rem;
    margin: 2.5rem auto 0 auto;
    max-width: 580px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.res-title-row {
    font-family: var(--schrift-titel);
    font-size: 1.25rem;
    color: var(--farbe-braun);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
}

.res-title-row::after {
    content: '✦';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--farbe-gold);
}

.res-buttons-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-multi {
    position: relative; /* Wichtig, damit das absolute Icon innerhalb des Buttons bleibt */
    overflow: hidden;   /* Schneidet das Icon ab, falls es über die Kanten ragt */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--farbe-braun); /* */
    color: var(--farbe-hintergrund); /* */
    font-family: var(--schrift-nav); /* */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.5rem 0.5rem; /* Gibt dem Badge eine schöne Höhe */
    border-radius: 4px;
    border: 1px solid rgba(138, 104, 32, 0.25);
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: var(--transition); /* */
    z-index: 1;
}

/* Sorgt dafür, dass der Text sauber auf einer Ebene über dem Icon liegt */
.btn-multi span {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Klicks gehen direkt durch auf den Button */
}


/* Hover-Effekt für das gesamte Badge */
.btn-multi:hover {
    background: var(--farbe-gold); /* */
    color: var(--farbe-hintergrund); /* */
    transform: translateY(-3px);
    box-shadow: var(--schatten-gold); /* */
}

/* Das Icon als riesiges, dezentes Wasserzeichen im Hintergrund */
.btn-multi-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfekt im Badge zentriert */
    width: auto;
    height: 110%;       /* Macht das Icon so groß, dass es die Höhe des Badges leicht überragt */
    opacity: 0.5;      /* Schön transparent im Hintergrund, damit der Text perfekt lesbar bleibt */
    pointer-events: none;
    transition: var(--transition); /* */
    z-index: 1;

    /* Dein cooles Tavernen-Gold als Grundfarbe für das Icon */
    filter: invert(53%) sepia(82%) saturate(464%) hue-rotate(357deg) brightness(91%) contrast(89%);
}

/* Beim Hovern wird das Hintergrund-Wasserzeichen dynamisch angepasst */
.btn-multi:hover .btn-multi-icon {
    transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); /* Es pulsiert leicht und dreht sich minimal */
    opacity: 0.22; /* Wird auf dem Gold-Hintergrund für den Effekt ein bisschen deutlicher */
    filter: brightness(0) invert(1); /* Wechselt zu Weiß, passend zur Textfarbe im Hover-Zustand */
}


/* --- Formular Styling --- */
.tavernen-form {
    max-width: 650px;
    margin: 2rem auto 0 auto;
    text-align: left;

    /* NEU: Das Formular als edle Tavernen-Box verpacken */
    background: var(--farbe-karte-bg);    /* Helle Pergament-Farbe wie bei den Kacheln */
    border: var(--border-gold);            /* Dein goldener Rahmen */
    border-radius: 4px;                    /* Leicht abgerundete Ecken */
    padding: 2.5rem;                       /* Großzügiger Innenabstand, damit alles Luft zum Atmen hat */
    box-shadow: var(--schatten-tief);      /* Der tiefe 3D-Schatten */

    position: relative;                    /* Falls du hier später auch ein Wasserzeichen willst */
    z-index: 1;
}
.form-group {
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
}
.form-group label {
    font-family: var(--schrift-titel);
    font-size: 0.9rem;
    color: #4a3319;
    margin-bottom: 0.4rem;
}
.form-row {
    display: flex;
    gap: 1rem;
}
.form-row .form-group {
    flex: 1;
}
.tavernen-form input,
.tavernen-form select,
.tavernen-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #c5b9a5;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    font-family: var(--schrift-text);
    font-size: 1rem;
    color: #2e1c0c;
    transition: all 0.3s ease;
}
.tavernen-form input:focus,
.tavernen-form select:focus,
.tavernen-form textarea:focus {
    outline: none;
    border-color: var(--farbe-gold);
    background: #ffffff;
    box-shadow: 0 0 8px rgba(179, 143, 67, 0.2);
}
/* Aktiviert weiches Scrollen auf der ganzen Seite */
html {
    scroll-behavior: smooth;
}

/* Responsive Anpassung für Smartphones */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* =============================================
   UTILITY CLASSES FOR INLINE STYLES CLEANUP
   ============================================= */

/* Main wrapper with padding for content pages */
.main-wrapper {
    padding: 0 1rem;
}

/* Text alignment utility */
.text-center {
    text-align: center;
}

/* Center content inline display */
.text-center-inline {
    display: inline-block;
    float: none;
    margin-top: 1rem;
}

/* List and ordered list spacing */
.list-spacing {
    padding-left: 20px;
    margin-bottom: 15px;
}

/* Divider line with gold accent */
.divider-gold {
    border: 0;
    border-top: 1px solid rgba(184, 134, 11, 0.2);
    margin: 2rem 0;
}

/* Section layout utilities */
.section-max-900 {
    max-width: 900px;
    margin: 4rem auto;
}

.section-max-1100 {
    max-width: 1100px;
    margin: 5rem auto;
}

.section-max-860 {
    max-width: 860px;
    margin: 5rem auto;
}

/* Content styling utilities */
.content-text-light {
    color: var(--farbe-text-hell);
    line-height: 1.6;
}

.content-justified {
    text-align: justify;
    margin-bottom: 1rem;
}

.content-justified + .content-justified,
.content-justified + * + .content-justified {
    margin-bottom: 1.5rem;
}

/* Button form submit styling */
.btn-form-submit {
    display: inline-block;
    margin-top: 1rem;
    cursor: pointer;
}




/* =============================================
   BILDERGALERIE ERWEITERUNGEN
   ============================================= */

/* Das Grid passt sich automatisch an die Bildschirmgröße an */
.galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

/* Die Rahmenbox für jedes Bild */
.galerie-item {
    position: relative;
    background: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-radius: 4px;
    overflow: hidden; /* Schneidet das hineinzoomende Bild an den Ecken sauber ab */
    box-shadow: var(--schatten-tief);
    transition: var(--transition);
}

/* Bild-Eigenschaften für einen einheitlichen Look */
.galerie-item img {
    width: 100%;
    height: 250px; /* Feste Höhe, damit alle Bilder im Grid auf einer Linie stehen */
    object-fit: cover; /* Verhindert Verzerrungen; das Bild wird perfekt eingepasst */
    transition: var(--transition);
    display: block;
}

/* Die Bildunterschrift im edlen Tavernen-Stil */
.galerie-caption {
    font-family: var(--schrift-nav);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.8rem;
    color: var(--farbe-braun);
    background: var(--farbe-karte-bg);
    border-top: 1px solid rgba(138, 104, 32, 0.15);
    transition: var(--transition);
}

/* --- HOVER EFFEKTE --- */

/* Die Karte hebt sich leicht an und der Schatten glüht golden */
.galerie-item:hover {
    transform: translateY(-4px);
    border-color: var(--farbe-gold);
    box-shadow: var(--schatten-gold);
}

/* Das Bild zoomt minimal heran */
.galerie-item:hover img {
    transform: scale(1.04);
}

/* Die Schrift färbt sich beim Drüberfahren im Tavernen-Rot */
.galerie-item:hover .galerie-caption {
    color: var(--farbe-rot);
}



/* =============================================
   GENERELLE BOX FÜR SEITEN-ÜBERSCHRIFTEN (GLOBAL)
   ============================================= */
.page-header-box {
    max-width: 800px;         /* Schöne, lesbare Breite für alle Seiten-Köpfe */
    margin: 2rem auto 3rem auto; /* Zentriert die Box auf der Seite mit Abstand nach unten */
    background: var(--farbe-karte-bg); /* Das helle Pergament-Creme */
    border: var(--border-gold);         /* Dein goldener Rahmen */
    border-radius: 4px;
    padding: 2.5rem;          /* Luftiger Innenabstand */
    box-shadow: var(--schatten-tief);   /* Der tiefe Tavernen-Schatten */
    text-align: center;       /* Zentriert Text, Ornamente und Buttons automatisch */
}

/* Responsive Anpassung für Smartphones */
@media (max-width: 600px) {
    .page-header-box {
        padding: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }
}


/* =============================================
   CUSTOM SCHWERT-MAUSZEIGER
   ============================================= */

/* Gilt für die gesamte Website */
body {
    /* url() lädt dein SVG, 'auto' ist der Fallback, falls das Bild mal nicht lädt */
    cursor: url('../img/cursor.svg'), auto;
}

/* Wenn man über klickbare Elemente (Links, Buttons) fährt */
a,
button,
.filter-btn,
.card-link {
    /* Option A: Ein normales Hand-Symbol, damit der User weiß: Hier kann ich klicken! */
    /* cursor: pointer; */

    /* Option B: Falls du ein zweites SVG hast (z.B. ein leuchtendes Schwert beim Klicken):
    cursor: url('../img/schwert-hover.svg'), pointer; */
    cursor: url('../img/cursor.svg'), pointer;
}


.menu-legende-section {
    margin: 4rem auto 3rem auto; /* Harmonischer Abstand nach unten */
    padding: 2.5rem;             /* Großzügiges, luftiges Innen-Padding wie beim Formular */
    max-width: 900px;            /* Exakte Breite deiner .speisekarte-section für perfekte Symmetrie */
    background: var(--farbe-karte-bg); /* Das von dir definierte Karten-Creme */
    border: var(--border-gold);  /* Vollständiger Rahmen statt nur einer harten Linie oben */
    border-radius: 4px;          /* Konsistente Eckenabrundung */
    box-shadow: var(--schatten-tief); /* Der tiefe Tavernen-Schatten für den 3D-Effekt */
    text-align: center;
}

.menu-legende-section h3 {
    font-family: var(--schrift-titel);
    font-weight: var(--gewicht-fett);
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--farbe-gold-matt);
}

.legende-hinweis {
    font-family: var(--schrift-text);
    font-weight: var(--gewicht-normal);
    font-size: 0.9rem;
    color: var(--farbe-text-hell);
    margin-bottom: 2rem;
}

.legende-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    text-align: left;
}

.legende-block {
    flex: 1;
    min-width: 280px;
}

.legende-block h4 {
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-fett);
    font-size: 0.95rem;
    color: var(--farbe-braun-hell);
    margin-bottom: 1rem;
    border-bottom: var(--border-gold);
    padding-bottom: 0.3rem;
    letter-spacing: 0.05em;
}

.legende-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 600px) {
    .legende-liste {
        grid-template-columns: repeat(2, 1fr);
    }
}

.legende-liste li {
    font-family: var(--schrift-text);
    font-weight: var(--gewicht-normal);
    font-size: 0.95rem;
    color: var(--farbe-text);
    display: flex;
    align-items: center;
}

.code-key {
    display: inline-block;
    min-width: 26px;
    height: 26px;
    line-height: 24px;
    background-color: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-radius: 4px;
    text-align: center;
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-fett);
    font-size: 0.8rem;
    margin-right: 0.75rem;
    color: var(--farbe-rot); /* Rote Akzentfarbe für die Kürzel */
}





/* Merch Hinweis-Box (Analog zum neuen Legenden- & Formular-Stil) */
.merch-hinweis-box {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    padding: 2rem;
    background: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-radius: 4px;
    box-shadow: var(--schatten-tief);
    text-align: center;
}

.merch-hinweis-box h3 {
    font-family: 'Crimson Text', Georgia, serif; /* Oder deine gewählte Überschriften-Schrift */
    color: #8a1a1a; /* Ein edles, warnendes/aufmerksamkeitsstarkes Dunkelrot */
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.merch-hinweis-box p {
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0;
}

/* Merch Grid-System */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Die Produktkarte als eigenständiges 3D-Element */
.merch-card {
    background: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-radius: 4px;
    box-shadow: var(--schatten-tief);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Dezenter Animationseffekt beim Hovern */
.merch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

/* Bildbereich innerhalb der Karte */
.merch-img-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #0f0d0b; /* Dunkler Kontrast-Hintergrund für die Freisteller-Bilder */
    border-bottom: var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.merch-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.merch-card:hover .merch-img-wrapper img {
    transform: scale(1.03);
}

/* Inhaltsbereich der Karte */
.merch-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Schiebt das Preis-Tag immer sauber nach unten, falls Texte unterschiedlich lang sind */
}

.merch-item-titel {
    font-size: 1.3rem;
    margin: 0 0 0.75rem 0;
    color: inherit; /* Passt sich deinem Standard-Text-Look für Titel an */
}

.merch-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.9;
    margin: 0 0 1.5rem 0;
}

/* Das Preisschild im mittelalterlichen Kontrast */
.merch-preis {
    margin-top: auto; /* Erzwingt die Ausrichtung am Kartenboden */
    font-size: 1.25rem;
    font-weight: bold;
    color: #d4af37; /* Echtes Gold-Highlight für den Preis */
    border-top: 1px dashed rgba(212, 175, 55, 0.3);
    padding-top: 0.75rem;
    text-align: right;
}








/* Der Info-Block oben */
.event-beschreibung-box {
    max-width: 900px;
    margin: 0 auto 4rem auto;
    background: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-radius: 4px;
    box-shadow: var(--schatten-tief);
    padding: 2.5rem;
}

.event-beschreibung-box h2 {
    font-family: var(--schrift-titel);
    font-weight: var(--gewicht-fett);
    font-size: 1.8rem;
    color: var(--farbe-rot);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.event-zeit-info {
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-fett);
    font-size: 1.1rem;
    color: var(--farbe-gold);
    margin-bottom: 1.5rem;
}

.event-beschreibung-box p {
    font-family: var(--schrift-text);
    font-weight: var(--gewicht-normal);
    line-height: 1.6;
    color: var(--farbe-text);
    margin-bottom: 1.2rem;
}

.event-action-wrapper {
    text-align: center;
    margin-top: 2rem;
}

.btn-event-booking {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--farbe-rot);
    color: var(--farbe-hintergrund); /* Perfekter Kontrast auf dem dunklen Rot */
    text-decoration: none;
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-fett);
    border-radius: 3px;
    border: var(--border-gold-stark);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-event-booking:hover {
    background: var(--farbe-braun-hell);
    transform: translateY(-2px);
}

/* Die vereinfachte Terminliste */
.termine-simple-container {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1rem;
}

.termine-subtitel {
    font-family: var(--schrift-titel);
    font-weight: var(--gewicht-fett);
    font-size: 1.6rem;
    color: var(--farbe-braun);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.termine-simple-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Einzelne Zeile */
.termin-simple-item {
    display: flex;
    align-items: center;
    background: var(--farbe-karte-bg);
    border: var(--border-gold);
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    box-shadow: var(--schatten-tief);
}

/* Großes Datumsfeld links */
.date-badge-simple {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 90px;
    border-right: 1px dashed rgba(138, 104, 32, 0.3);
    margin-right: 1.5rem;
    padding-right: 1rem;
}

.date-badge-simple .day {
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-extra);
    font-size: 1.8rem;
    color: var(--farbe-gold);
}

.date-badge-simple .month {
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-medium);
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--farbe-text-hell);
}

/* Event-Name rechts – FEHLER BEHOBEN */
.termin-simple-name {
    flex-grow: 1;
}

.termin-simple-name h3 {
    margin: 0;
    font-family: var(--schrift-text);
    font-weight: var(--gewicht-fett);
    color: var(--farbe-text);
    font-size: 1.25rem;
}

/* Visueller Akzent für Nicht-Brunch-Events */
.termin-simple-item.event-special {
    border-left: 4px solid var(--farbe-rot);
}

/* Responsive Optimierung für Smartphones */
@media (max-width: 480px) {
    .termin-simple-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }

    .date-badge-simple {
        border-right: none;
        border-bottom: 1px dashed rgba(138, 104, 32, 0.3);
        width: 100%;
        margin-right: 0;
        padding-right: 0;
        padding-bottom: 0.25rem;
    }
}







/* WhatsApp Community Box am Ende der Liste */
.event-community-box {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(138, 104, 32, 0.3);
    text-align: center;
}

.community-text {
    font-family: var(--schrift-text);
    font-weight: var(--gewicht-normal);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--farbe-text-hell);
    margin-bottom: 1.2rem;
}

/* Der atmosphärische WhatsApp-Button */
.btn-whatsapp-community {
    display: inline-block;
    padding: 0.8rem 2.2rem;
    background: #1e5e3a; /* Gedecktes Waldgrün – passend zum Tavernen-Stil */
    color: var(--farbe-hintergrund); /* Maximaler Kontrast für Barrierefreiheit */
    text-decoration: none;
    font-family: var(--schrift-nav);
    font-weight: var(--gewicht-fett);
    font-size: 0.95rem;
    border-radius: 3px;
    border: var(--border-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--schatten-tief);
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.btn-whatsapp-community:hover {
    background: #277a4c; /* Etwas helleres Grün beim Hovern */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.btn-whatsapp-community:active {
    transform: translateY(0);
}


/* =============================================
   GLOBALES BOX-IN-BOX SYSTEM (UX-Vereinheitlichung)
   ============================================= */

/* Die große, äußere Rahmenbox für eine gesamte Inhaltssektion */
.tavernen-box-gross {
    max-width: 1100px; /* Perfekte Breite, damit es auf Desktop nicht erschlagend wirkt */
    margin: 4rem auto; /* Abstand nach oben und unten; zentriert die Box */
    background: var(--farbe-hintergrund); /* Das hellere Creme als edle Basis */
    border: var(--border-gold);
    border-radius: 6px;
    padding: 3.5rem 2.5rem;
    box-shadow: var(--schatten-tief);
    position: relative;
    z-index: 1;
}

/* Interner Header innerhalb der großen Box (ersetzt das freistehende .page-header-box) */
.box-interner-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.box-interner-header .section-titel {
    margin-bottom: 0.2rem;
}

/* Feintuning für die inneren Boxen (Karten & Formular) innerhalb der Riesenbox */
.tavernen-box-gross .cards-grid {
    margin-top: 2rem; /* Leicht reduzierter Abstand, da bereits eingehaust */
}

.tavernen-box-gross .tavernen-form {
    /* Da das Formular nun in einer Außenbox liegt, entfernen wir hier
       den doppelten Außenabstand und zentrieren es kompakt im Inneren */
    margin: 0 auto;
    max-width: 650px;
    /* Der bestehende Hintergrund (--farbe-karte-bg) sorgt jetzt für den perfekten Kontrast */
}

/* Responsive Optimierung für das Box-System */
@media (max-width: 768px) {
    .tavernen-box-gross {
        margin: 2rem 1rem; /* Mehr Platz auf Tablets und Smartphones */
        padding: 2rem 1.5rem;
    }
}


/* =============================================
   SPEZIFISCHE MODIFIER FÜR DIE AUSSENBOXEN
   ============================================= */

/* 1. Modifikation für "Wissenswertes" (Schmaler & 2er-Raster) */
.box-wissenswertes {
    max-width: 860px; /* Schmaler gezogen, damit die Box kompakter wirkt */
}

.box-wissenswertes .cards-grid {
    /* Überschreibt das automatische Befüllen und erzwingt exakt 2 Spalten */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* 2. Modifikation für das Reservierungsformular (Snug-Fit) */
.box-formular-wrapper {
    /* Das Formular im Inneren hat max-width: 650px.
       650px + großzügiges Innen-Padding ergibt ca. 730px für einen knackigen Rahmen. */
    max-width: 730px;
}


/* =============================================
   RESPONSIVE OVERRIDES FOR MODIFIERS
   ============================================= */
@media (max-width: 680px) {
    /* Schaltet das 2er-Raster auf Smartphones auf eine einspaltige Liste um */
    .box-wissenswertes .cards-grid {
        grid-template-columns: 1fr;
    }
}



/* Modifikation für die Event- und Termingroßboxen */
.box-events {
    max-width: 860px; /* Verhindert das "Auseinanderfliegen" von Textzeilen auf Desktop */
    margin: 3rem auto;
}

/* Die inneren Boxen an das neue Einbettungs-System anpassen */
.box-events .event-beschreibung-box,
.box-events .event-community-box {
    background: var(--farbe-karte-bg); /* Hebt die innere Box dreidimensional ab */
    border: 1px solid rgba(184, 134, 11, 0.3); /* Dezenter Goldrand */
    border-radius: 4px;
    padding: 2rem;
    margin-top: 1.5rem;
}

/* Die Terminliste optisch beruhigen */
.box-events .termine-simple-list {
    margin-bottom: 2.5rem;
}



/* =============================================
   MODIFIER FÜR DIE BILDERGALERIE
   ============================================= */

.box-galerie {
    max-width: 1150px; /* Erlaubt den Bildern, ihre visuelle Wirkung zu entfalten */
    margin: 4rem auto;
}

/* Die Galerie-Items fungieren hier als die 'inneren Boxen' */
.box-galerie .galerie-item {
    background: var(--farbe-karte-bg);
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 4px;
    padding: 0.8rem; /* Schafft einen edlen Passepartout-Effekt um die Bilder */
    box-shadow: var(--schatten-tief);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Subtiler Hover-Effekt für die inneren Boxen */
.box-galerie .galerie-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--schatten-tief);
}

.box-galerie .galerie-grid {
    margin-top: 2.5rem;
    gap: 1.8rem; /* Etwas mehr Luft zwischen den Bildern */
}


/* =============================================
   MODIFIER FÜR DIE MERCHANDISE-SEITE
   ============================================= */

/* Richtet die Kopfbox exakt nach der Breite des Produkt-Grids aus */
.box-merch-header {
    max-width: 1200px; /* Synchronisiert mit der üblichen Grid-Breite für 4 Spalten */
    margin: 4rem auto 3rem auto; /* Kompakterer Abstand nach unten zum Grid */
    padding: 3rem 2.5rem;
}

/* Verwandelt die ehemals separate Hinweisbox in ein integriertes Element */
.box-merch-header .merch-hinweis-box {
    background: var(--farbe-karte-bg);
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-radius: 4px;
    padding: 1.8rem;
    margin-top: 2rem;
    max-width: 800px; /* Verhindert eine zu lange, unleserliche Textzeile */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Zentriert den Hinweis harmonisch unter dem Titel */
}



/* =============================================
   MODIFIER FÜR KONTAKT & RECHTLICHES
   ============================================= */

/* Box 1: Kontaktbereich */
.box-kontakt-layout {
    max-width: 900px;
    margin: 4rem auto;
}

/* Box 2 & 3: Impressum und Datenschutz-Monolith */
.box-rechtliches-layout {
    max-width: 860px; /* Optimale Zeilenlänge für lange, juristische Texte */
    margin: 5rem auto;
}

/* Verfeinerung des rechtlichen Textes im Box-Inneren */
.rechtliches-textblock {
    color: var(--farbe-text-hell);
    line-height: 1.6;
    font-size: 0.95rem;
}

.rechtliches-textblock h3,
.rechtliches-textblock h4,
.rechtliches-textblock h5 {
    color: var(--farbe-gold); /* Goldene Akzente für Paragraphen */
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    font-family: var(--schrift-titel);
}

.rechtliches-textblock p {
    margin-bottom: 1rem;
}

.rechtliches-textblock .text-justify {
    text-align: justify;
    text-justify: inter-word;
}

/* Verhindert, dass Links im Rechtstext das Layout sprengen */
.rechtliches-textblock a {
    color: var(--farbe-gold);
    word-break: break-all;
    text-decoration: underline;
}
.rechtliches-textblock a:hover {
    color: #fff;
}


/* =============================================
   VISUELLES FEEDBACK (RESERVIERUNGEN)
   ============================================= */
.feedback-banner {
    display: none; /* Standardmäßig unsichtbar, wird per JS aktiviert */
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background-color: #1e5e3a; /* Waldgrün aus der WhatsApp-Box */
    color: var(--farbe-hintergrund);
    border: var(--border-gold);
    border-radius: 4px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-family: var(--schrift-nav);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    box-shadow: var(--schatten-tief);
    animation: bannerFadeIn 0.5s ease-out forwards;
}

/* Rotes Banner für den Fehlerfall */
.feedback-banner.fehler {
    background-color: var(--farbe-rot);
}

.feedback-ornament {
    color: var(--farbe-gold-hell);
    font-size: 1.1rem;
}

@keyframes bannerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =============================================
   CUSTOM CLICK CURSOR (ZUHAU-EFFEKT)
   ============================================= */

/* Definiert das schräge Schwert mit Trefferkreuz, wenn die Klasse aktiv ist */
body.cursor-hitting,
body.cursor-hitting a,
body.cursor-hitting button,
body.cursor-hitting .filter-btn,
body.cursor-hitting .card-link {
    cursor: url('../img/cursor_hit.svg'), auto !important;
}



/* Kleines Extra-Styling für den Sprach-Switcher im Header */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 15px;
    font-weight: bold;
}
.lang-switch a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.lang-switch a.active, .lang-switch a:hover {
    opacity: 1;
    text-decoration: underline;
}

.globe-icon-img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}



/* =============================================================
   SMARTPHONE-OPTIMIERUNG (NEU)
   Ergänzt & überschreibt gezielt die bestehenden Media Queries,
   um echte Smartphone-Breiten (320–480px) zuverlässig abzudecken.
   Wird bewusst ans Dateiende gesetzt, damit die Regeln bei
   gleicher Spezifität die älteren Regeln sauber überschreiben.
   ============================================================= */

/* --- 0. Globaler Sicherheitsnetz gegen horizontales Scrollen --- */
html, body {
    overflow-x: hidden;
}

/* --- 1. HEADER: Kompakte Ein-Zeilen-Lösung für alle Handy-Breiten ---
   Sobald der Hamburger aktiv wird (≤900px), bekommt der Header auch
   sein eigenes kompaktes Layout, damit Logo, Sprachumschalter und
   Hamburger nebeneinander passen – ohne Umbruch/Überlauf.
*/
@media (max-width: 900px) {
    .header-top {
        height: auto;
        min-height: 64px;
        padding: 0.6rem 0;
        flex-wrap: nowrap;
    }

    /* KRITISCH: Sprachumschalter + Hamburger dürfen NIE schrumpfen oder aus
       dem sichtbaren Bereich gedrängt werden, egal wie lang der Logo-Text ist. */
    .header-actions {
        gap: 0.6rem;
        flex-shrink: 0;
    }

    /* Der separate CTA-Button ist über das Hamburger-Menü ohnehin erreichbar
       (Speisekarte / Startseite sind normale Nav-Punkte) – auf dem Handy
       spart das Weglassen entscheidend Platz und verhindert den Überlauf. */
    .header-actions .nav-speisekarte {
        display: none;
    }

    /* Das Logo darf im Gegenzug schrumpfen und wird notfalls sanft
       abgeschnitten (Ellipsis), statt den Hamburger aus dem Sichtbereich
       zu drängen. */
    .logo {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 1.15rem;
        gap: 8px;
    }

    .header-logo {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .logo-text {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .logo span {
        font-size: 0.55rem;
        letter-spacing: 0.15em; /* Der große letter-spacing-Wert war der Haupttreiber für den Überlauf */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lang-switch {
        margin-right: 0;
        font-size: 0.85rem;
    }

    .hamburger {
        padding: 8px; /* etwas größere Tapfläche */
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .logo span {
        display: none; /* Untertitel entfällt auf sehr schmalen Screens zugunsten des Haupttitels */
    }

    .header-logo {
        width: 44px;
        height: 44px;
    }

    .logo {
        font-size: 1rem;
        gap: 6px;
    }
}

/* Setzt den Header auf ultra-schmalen Screens zurück auf eine Zeile
   (überschreibt die alte column-Lösung, die bei sehr breiten Logos
   trotzdem noch zu Überlauf führen konnte) */
@media (max-width: 420px) {
    .header-top {
        flex-direction: row;
        height: auto;
        min-height: 60px;
        padding: 0.5rem 0;
        gap: 0.5rem;
        text-align: left;
    }

    .header-actions {
        width: auto;
        justify-content: flex-end;
    }
}

/* --- 2. HINTERGRUNDBILD: Performance-/Darstellungsfix für Mobile ---
   'fixed' Hintergründe führen speziell in mobilen Safari-/Chrome-Versionen
   beim Scrollen (Adressleisten-Einblendung) zu Rucklern oder Sprüngen.
   Auf Touch-Geräten wechseln wir daher zu 'scroll'.
*/
@media (max-width: 768px) {
    body::before {
        background-attachment: scroll;
        background-position: center top;
    }
}

/* --- 3. HERO-RESERVIERUNGSBUTTONS: Saubere Abstufung 3 → 2 → 1 Spalte --- */
@media (max-width: 900px) {
    .res-buttons-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .res-buttons-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .hero-reservation-box {
        padding: 1.2rem;
    }
    .hero-content {
        padding: 2.5rem 1.25rem;
    }
}

/* --- 4. SPEISEKARTE: Menüpunkte stapeln sich sauber auf Smartphones ---
   Statt Titel/Beschreibung links und Preis(e) rechts zusammenzuquetschen,
   wandert der Preis unter den Titel und nutzt die volle Breite. Das
   funktioniert unabhängig davon, ob ein einzelner Preis oder eine
   gestaffelte Preisliste (klein/groß) angezeigt wird.
*/
@media (max-width: 560px) {
    .menu-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 1.25rem 0.75rem;
    }

    .menu-item:hover {
        transform: none;
        padding-left: 0.75rem;
    }

    .menu-preis,
    .menu-preis-staffel {
        min-width: 0;
        width: 100%;
        align-items: stretch;
    }

    .menu-preis {
        flex-direction: row;
        justify-content: space-between;
    }

    .menu-preis-staffel {
        flex-direction: column;
        gap: 0.35rem;
    }

    .preis-zeile {
        width: 100%;
        justify-content: space-between;
    }

    .menu-kategorie {
        padding: 1.75rem 1.25rem;
    }

    .menu-kategorie-titel {
        font-size: 1.5rem;
    }
}

/* Filter-Buttons dürfen umbrechen statt seitlich abgeschnitten zu werden */
@media (max-width: 480px) {
    .filter-group {
        flex-wrap: wrap;
    }
    .filter-btn {
        padding: 0.6rem 1.1rem;
        font-size: 0.75rem;
    }
    .menu-filter-container {
        padding: 0 0.5rem;
    }
}

/* --- 5. ALLGEMEINE BOX-ABSTÄNDE: Mehr Lesefläche auf kleinen Screens --- */
@media (max-width: 480px) {
    .tavernen-box-gross {
        margin: 1.5rem 0.75rem;
        padding: 1.75rem 1.25rem;
    }
    .page-header-box {
        padding: 1.25rem;
    }
}

/* --- 6. LEGENDE (Allergen-Übersicht): erzwingt volle Breite pro Block --- */
@media (max-width: 400px) {
    .legende-block {
        min-width: 100%;
    }
}


/* Schwerter-Icon im Hero */
.hero-schwerter {
    /* Automatische Ausrichtung in der Mitte */
    margin: 0 auto 1.2rem auto;
    display: block;

    /* Responsive Größenanpassung */
    width: 100%;
    max-width: 140px; /* Steuert die maximale Breite auf Desktop */
    height: auto;     /* Verhindert Verzerrungen des SVGs */

    /* Subtiler Tavernen-Schatten für mehr Tiefe */
    filter: drop-shadow(0 4px 6px rgba(26, 17, 8, 0.25));

    transition: transform 0.3s ease;
}

/* Optionaler Hover-Effekt für das Interaktions-Gefühl */
.hero-schwerter:hover {
    transform: scale(1.05);
}

/* Anpassung für kleine Smartphones */
@media (max-width: 480px) {
    .hero-schwerter {
        max-width: 100px; /* Auf Handys etwas kompakter, um Platz zu sparen */
        margin-bottom: 0.8rem;
    }
}