/* =============================================================
   Troja Restaurant – Haupt-Stylesheet
   Struktur:
     1.  CSS-Variablen
     2.  Reset & Box-Modell
     3.  Basis-Typografie & Hilfsklassen
     4.  Layout & Container
     5.  Buttons
     6.  Header & Navigation
     7.  Footer
     8.  Hero-Sektion
     9.  Intro / Über-uns-Sektion
    10.  Features-Sektion
    11.  Menü-Vorschau
    12.  Galerie-Sektion
    13.  CTA / Öffnungszeiten
    14.  Scroll-Reveal (JS-gesteuert, Progressive Enhancement)
    15.  Formular-Elemente
    16.  Speisekarte-Einträge (speisekarte.php)
    17.  Adminbereich
   ============================================================= */


/* ------------------------------------------------------------------
   1. CSS-Variablen
   ------------------------------------------------------------------ */
:root {
    /* Kernfarben – warm, dunkel, rustikal-premium */
    --color-bg:             #17120e;   /* tiefstes Dunkelbraun */
    --color-bg-secondary:   #1f1810;   /* leicht aufgehellt */
    --color-surface:        #2a1f14;   /* Kartenoberflächen */
    --color-surface-raised: #33261a;   /* leicht angehobene Oberflächen */
    --color-border:         #3a2a1a;   /* subtile Trennlinien */
    --color-border-light:   #4a3828;   /* etwas sichtbarer */

    /* Gold-Palette – zentraler Premiumakzent */
    --color-gold:           #c9a84c;   /* warmes Gold */
    --color-gold-light:     #e0c06a;   /* helles Gold / Hover */
    --color-gold-lighter:   #edd898;   /* sehr hell, für Glanz */
    --color-gold-dark:      #9e7d35;   /* gedämpftes Gold */
    --color-gold-dim:       rgba(201, 168, 76, 0.12); /* hauchdünne Fläche */

    /* Warmtöne */
    --color-rust:           #7a3a10;
    --color-ember:          #5c2800;

    /* Textfarben */
    --color-text:           #e5d8c2;   /* Haupttext – warm, lesbar */
    --color-text-muted:     #9e8a70;   /* Nebentext */
    --color-text-faint:     #6a5840;   /* sehr dezent */
    --color-text-light:     #f5eada;   /* Highlights */
    --color-heading:        #dfc870;   /* Überschriften */

    /* Statusfarben */
    --color-success:        #4a7a4a;
    --color-error:          #7a3030;

    /* Typografie */
    --font-heading:    'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:       'Lato', 'Helvetica Neue', Arial, sans-serif;
    --font-size-base:  16px;
    --line-height-base: 1.75;

    /* Abstände */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   2rem;
    --space-xl:   4rem;
    --space-xxl:  7rem;

    /* Layout */
    --container-max:  1180px;
    --container-wide: 1380px;
    --header-height:  76px;

    /* Formen */
    --radius-sm:  3px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    /* Übergänge */
    --transition-fast:  0.15s ease;
    --transition-base:  0.3s ease;
    --transition-slow:  0.55s ease;

    /* Schatten */
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.45);
    --shadow-md:    0 4px 24px rgba(0,0,0,0.65);
    --shadow-lg:    0 10px 50px rgba(0,0,0,0.8);
    --shadow-gold:  0 0 24px rgba(201, 168, 76, 0.25);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
}


/* ------------------------------------------------------------------
   2. Reset & Box-Modell
   ------------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: var(--line-height-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* object-position-Hilfsklassen für gezielte Bildausschnitte */
.img--top    { object-position: center top !important; }
.img--upper  { object-position: center 25% !important; }
.img--center { object-position: center center !important; }

a {
    color: var(--color-gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-gold-light);
}

ul, ol { list-style: none; }


/* ------------------------------------------------------------------
   3. Basis-Typografie & Hilfsklassen
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: 1.25;
    font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.2rem; }

p {
    margin-bottom: var(--space-md);
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--color-text-light); }

/* Eyebrow-Label – kleine Goldschrift über Überschriften */
.label-text {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 0.6rem;
}

/* Zentrierter Sektions-Header mit optionalem Label */
.section-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.section-header h2,
.section-header h3 {
    margin-top: var(--space-xs);
}

/* Klassische Gold-Trennlinie unter Sektionsüberschriften */
.section-title {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: var(--color-gold);
    margin: 0.6rem auto 0;
    opacity: 0.7;
}

/* Dekoratives Gold-Ornament (horizontale Linie + Raute) */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: var(--space-md) auto;
}

.ornament__line {
    display: block;
    width: 70px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-gold));
    opacity: 0.6;
}

.ornament__line--reverse {
    background: linear-gradient(to left, transparent, var(--color-gold));
}

.ornament__diamond {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--color-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}


/* ------------------------------------------------------------------
   4. Layout & Container
   ------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.container--wide {
    max-width: var(--container-wide);
}

main { flex: 1; }

.section {
    padding-block: var(--space-xxl);
}

.section--surface {
    background-color: var(--color-bg-secondary);
}


/* ------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------ */
.btn {
    display: inline-block;
    padding: 0.8rem 2.2rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primär – Solid Gold */
.btn--primary {
    background-color: var(--color-gold);
    color: var(--color-bg);
    border-color: var(--color-gold);
}

.btn--primary:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-bg);
    box-shadow: var(--shadow-gold);
}

/* Sekundär – Outline Gold */
.btn--secondary {
    background-color: transparent;
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.btn--secondary:hover {
    background-color: var(--color-gold);
    color: var(--color-bg);
    box-shadow: var(--shadow-gold);
}

/* Ghost – sehr dezent */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-light);
}

.btn--ghost:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.btn--sm  { padding: 0.55rem 1.3rem; font-size: 0.75rem; }
.btn--lg  { padding: 1rem 2.8rem; font-size: 0.88rem; }


/* ------------------------------------------------------------------
   6. Header & Navigation
   ------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-height);
    background-color: rgba(23, 18, 14, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition:
        background-color var(--transition-slow),
        border-color var(--transition-slow),
        box-shadow var(--transition-base);
}

/* Transparenter Header – nur wenn .has-hero am body gesetzt ist */
body.has-hero .site-header {
    background-color: transparent;
    border-bottom-color: transparent;
}

body.has-hero .site-header.scrolled {
    background-color: rgba(23, 18, 14, 0.97);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-lg);
}

/* Logo */
.site-logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo__name {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
}

.site-logo__sub {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 2px;
    transition: color var(--transition-fast);
}

.site-logo:hover .site-logo__name { color: var(--color-gold-light); }
.site-logo:hover .site-logo__sub  { color: var(--color-text); }

.site-logo__img {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: opacity var(--transition-fast);
}

.site-logo:hover .site-logo__img {
    opacity: 0.82;
}

/* Navigationsleiste */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav__link {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-block: 4px;
    position: relative;
}

.site-nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width var(--transition-base);
}

.site-nav__link:hover,
.site-nav__link.active {
    color: var(--color-gold);
}

.site-nav__link:hover::after,
.site-nav__link.active::after {
    width: 100%;
}

/* Reservierung-CTA im Header */
.site-nav__cta {
    margin-left: var(--space-sm);
}

/* Hamburger-Button */
.site-nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--color-text);
    flex-shrink: 0;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.hamburger__line {
    display: block;
    height: 1.5px;
    background-color: currentColor;
    border-radius: 2px;
    transition:
        transform var(--transition-base),
        opacity var(--transition-fast),
        width var(--transition-base);
}

.hamburger__line:last-child { width: 65%; }

.site-nav__toggle[aria-expanded="true"] .hamburger__line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.site-nav__toggle[aria-expanded="true"] .hamburger__line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
    width: 100%;
}

/* Mobile Navigation */
@media (max-width: 820px) {
    .site-nav__toggle { display: flex; }
    .site-nav__cta    { display: none; }

    .site-nav__list {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: rgba(23, 18, 14, 0.98);
        backdrop-filter: blur(12px);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-lg) var(--space-lg) var(--space-xl);
        border-bottom: 1px solid var(--color-border);
        gap: 0;
    }

    .site-nav__list.is-open { display: flex; }

    .site-nav__link {
        padding: 0.75rem 0;
        font-size: 0.85rem;
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__link:last-child { border-bottom: none; }
}


/* ------------------------------------------------------------------
   7. Footer
   ------------------------------------------------------------------ */
.site-footer {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
    margin-top: auto;
}

.site-footer__brand {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.site-footer__brand-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-gold);
    letter-spacing: 0.06em;
}

.site-footer__brand-claim {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
}

.site-footer__logo-img {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
    opacity: 0.88;
    transition: opacity var(--transition-fast);
}

.site-footer__logo-img:hover {
    opacity: 1;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-xl);
}

.site-footer__col-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
}

.site-footer__tagline {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}

.site-footer__link {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin-bottom: 0.55rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--color-gold);
    padding-left: 4px;
}

.site-footer__hours {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 2;
}

.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.78rem;
    color: var(--color-text-faint);
}

.site-footer__legal-links {
    display: flex;
    gap: var(--space-md);
}

.site-footer__legal-links a {
    color: var(--color-text-faint);
    transition: color var(--transition-fast);
}

.site-footer__legal-links a:hover {
    color: var(--color-gold);
}

@media (max-width: 600px) {
    .site-footer__brand   { flex-direction: column; align-items: flex-start; }
    .site-footer__bottom  { flex-direction: column; align-items: flex-start; }
}


/* ------------------------------------------------------------------
   8. Hero-Sektion
   ------------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: var(--color-bg);
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center center;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        /* Gezieltes Abdunkeln im Logo-Bereich (Mitte), damit das Logo nicht
           mit dem TROJA-Wandschriftzug im Hintergrund konkurriert */
        linear-gradient(
            to bottom,
            rgba(23, 18, 14, 0.72) 0%,
            rgba(23, 18, 14, 0.82) 40%,
            rgba(23, 18, 14, 0.97) 100%
        );
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding-inline: var(--space-lg);
    padding-bottom: var(--space-xl);
}

.hero__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
}

.hero__logo {
    width: clamp(300px, 38vw, 480px);
    height: auto;
    display: block;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    margin-top: -3vh;
    object-fit: contain;
    opacity: 0.97;
    filter: drop-shadow(0 6px 40px rgba(23, 18, 14, 0.90));
}

@media (max-width: 600px) {
    .hero__logo {
        width: clamp(220px, 72vw, 320px);
        margin-top: -2vh;
    }
}

.hero__subtitle {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xl);
}

.hero__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Scroll-Indikator */
.hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero__scroll-line {
    display: block;
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--color-gold), transparent);
    animation: hero-scroll-pulse 2.2s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes hero-scroll-pulse {
    0%, 100% { opacity: 0.2; transform: scaleY(0.6); transform-origin: top; }
    50%       { opacity: 0.7; transform: scaleY(1);   transform-origin: top; }
}


/* ------------------------------------------------------------------
   9. Intro / Über-uns-Sektion
   ------------------------------------------------------------------ */
.intro-section {
    padding-block: var(--space-xxl);
}

.intro-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}

.intro-section__text h2 {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.intro-section__text p {
    color: var(--color-text-muted);
    line-height: 1.85;
}

.intro-section__text .btn {
    margin-top: var(--space-lg);
}

/* Bild-Container mit Gold-Rahmen-Effekt */
.intro-section__img-wrap {
    position: relative;
    padding: 18px 18px 0 0;
}

/* Versetzter Gold-Rahmen hinter dem Bild */
.intro-section__img-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-md);
    opacity: 0.25;
    pointer-events: none;
}

.intro-section__img-container {
    position: relative;
    z-index: 1;
    aspect-ratio: 4/5;
    background-color: var(--color-surface);
    background-image: linear-gradient(
        155deg,
        var(--color-surface-raised) 0%,
        var(--color-surface) 60%,
        var(--color-bg-secondary) 100%
    );
    border-radius: var(--radius-md);
    overflow: hidden;
    /*
        Bild einfügen wenn verfügbar:
        <img src="assets/images/restaurant-interior.jpg" alt="Innenraum" loading="lazy">
        als Kind-Element in .intro-section__img-container
    */
}

.intro-section__img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

@media (max-width: 880px) {
    .intro-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .intro-section__img-wrap { max-width: 480px; }
}


/* ------------------------------------------------------------------
   10. Features-Sektion
   ------------------------------------------------------------------ */
.features-section {
    padding-block: var(--space-xxl);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.feature-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.feature-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--color-gold-dark), var(--color-gold), var(--color-gold-dark));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.feature-card:hover {
    border-color: var(--color-border-light);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.feature-card:hover::after { opacity: 1; }

/* Große halbtransparente Ziffer als Hintergrund-Dekoration */
.feature-card__num {
    display: block;
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--color-gold-dim);
    line-height: 1;
    margin-bottom: var(--space-md);
    user-select: none;
    transition: color var(--transition-base);
}

.feature-card:hover .feature-card__num {
    color: rgba(201, 168, 76, 0.2);
}

.feature-card__title {
    font-size: 1.15rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.feature-card__text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Staggered Reveal-Delay für die 3 Karten */
.features-grid .feature-card:nth-child(2) { transition-delay: 0.08s; }
.features-grid .feature-card:nth-child(3) { transition-delay: 0.16s; }

@media (max-width: 820px) {
    .features-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-inline: auto;
    }
}


/* ------------------------------------------------------------------
   11. Menü-Vorschau
   ------------------------------------------------------------------ */
.menu-preview-section {
    padding-block: var(--space-xxl);
}

.menu-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.menu-preview-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.menu-preview-card:hover {
    border-color: var(--color-gold-dark);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Bild-Bereich mit Platzhalter */
.menu-preview-card__img {
    aspect-ratio: 16/10;
    background-color: var(--color-bg-secondary);
    background-image: linear-gradient(
        135deg,
        var(--color-surface-raised) 0%,
        var(--color-surface) 50%,
        var(--color-bg-secondary) 100%
    );
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    /*
        Bild einfügen wenn verfügbar:
        <img src="assets/images/kategorie-NAME.jpg" alt="..." loading="lazy">
        als Kind-Element in .menu-preview-card__img
    */
}

.menu-preview-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform var(--transition-slow);
}

.menu-preview-card:hover .menu-preview-card__img img {
    transform: scale(1.05);
}

.menu-preview-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.menu-preview-card__category {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}

.menu-preview-card__title {
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.menu-preview-card__text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--space-md);
}

.menu-preview-card__link {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.menu-preview-card__link::after {
    content: '→';
    transition: transform var(--transition-fast);
}

.menu-preview-card:hover .menu-preview-card__link {
    color: var(--color-gold-light);
    gap: 10px;
}

/* Staggered Reveal-Delay */
.menu-preview-grid .menu-preview-card:nth-child(2) { transition-delay: 0.08s; }
.menu-preview-grid .menu-preview-card:nth-child(3) { transition-delay: 0.16s; }

.menu-preview-cta {
    text-align: center;
    padding-top: var(--space-sm);
}

@media (max-width: 820px) {
    .menu-preview-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }
    .menu-preview-grid .menu-preview-card:nth-child(2),
    .menu-preview-grid .menu-preview-card:nth-child(3) {
        transition-delay: 0s;
    }
}


/* ------------------------------------------------------------------
   12. Galerie-Sektion
   ------------------------------------------------------------------ */
.gallery-section {
    padding-block: var(--space-xxl);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 10px;
}

.gallery__item {
    background-color: var(--color-surface);
    background-image: linear-gradient(
        135deg,
        var(--color-surface-raised) 0%,
        var(--color-surface) 60%,
        var(--color-bg-secondary) 100%
    );
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*
        Bild einfügen wenn verfügbar:
        <img src="assets/images/gallery-X.jpg" alt="..." loading="lazy">
        als Kind-Element in .gallery__item
    */
}

/* Breite Elemente (span 2) */
.gallery__item--wide { grid-column: span 2; }

/* Overlay beim Hover */
.gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(23, 18, 14, 0.7) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-base);
}

.gallery__item:hover::after { opacity: 1; }

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform var(--transition-slow);
}

.gallery__item:hover img { transform: scale(1.06); }

@media (max-width: 820px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }
    .gallery__item--wide { grid-column: span 1; }
}


/* ------------------------------------------------------------------
   13. CTA / Öffnungszeiten
   ------------------------------------------------------------------ */
.cta-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-xxl);
    background-color: var(--color-bg);
}

/* Subtile warme Glüheffekte im Hintergrund */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 50%, rgba(122, 58, 16, 0.07) 0%, transparent 55%);
    pointer-events: none;
}

.cta-section__inner {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: var(--space-xxl);
    align-items: center;
    position: relative;
}

/* Vertikale Trennlinie */
.cta-section__divider {
    background: linear-gradient(
        to bottom,
        transparent,
        var(--color-border-light) 20%,
        var(--color-border-light) 80%,
        transparent
    );
    align-self: stretch;
}

.cta-section__block h2 {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
}

/* Öffnungszeiten-Tabelle */
.hours-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem var(--space-lg);
    font-size: 0.9rem;
}

.hours-list dt {
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.hours-list dd {
    color: var(--color-text);
}

.hours-list .closed {
    color: var(--color-text-faint);
    font-style: italic;
}

.cta-section__tagline {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.cta-section__phone {
    display: block;
    margin-top: var(--space-md);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.cta-section__phone a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.cta-section__phone a:hover { color: var(--color-gold); }

@media (max-width: 820px) {
    .cta-section__inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .cta-section__divider { display: none; }
}


/* ------------------------------------------------------------------
   14. Scroll-Reveal – Progressive Enhancement
   ------------------------------------------------------------------ */

/* Nur aktiv wenn JS .js-reveal an den body gesetzt hat */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger für Grid-Kinder: nth-child-Delays greifen weiter oben pro Sektion */


/* ------------------------------------------------------------------
   15. Formular-Elemente
   ------------------------------------------------------------------ */
.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}

.form-control::placeholder {
    color: var(--color-text-faint);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}


/* ------------------------------------------------------------------
   16. Speisekarte (speisekarte.php)
   ------------------------------------------------------------------ */

/* ── Seiten-Header ─────────────────────────────────────────────── */
.menu-page-header {
    padding-top:    var(--space-2xl);
    padding-bottom: var(--space-xl);
    text-align:     center;
    border-bottom:  1px solid var(--color-border);
}

.menu-page-header .label-text {
    display:      block;
    margin-bottom: var(--space-sm);
}

.menu-page-header__title {
    font-family:    var(--font-heading);
    font-size:      clamp(2rem, 5vw, 3rem);
    color:          var(--color-text-light);
    letter-spacing: 0.04em;
    margin-bottom:  var(--space-md);
}

.menu-page-header .ornament {
    margin-top: var(--space-md);
}

/* ── Kategorie-Navigation ──────────────────────────────────────── */
.menu-nav {
    position:   sticky;
    top:        var(--header-height);
    z-index:    100;
    background: rgba(23, 18, 14, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.menu-nav__inner {
    display:    flex;
    gap:        var(--space-xs);
    overflow-x: auto;
    padding:    var(--space-sm) var(--space-lg);
    max-width:  var(--container-max, 1200px);
    margin-inline: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    flex-wrap: wrap;
}

.menu-nav__inner::-webkit-scrollbar { display: none; }

.menu-nav__link {
    display:         inline-block;
    padding:         6px 18px;
    font-size:       0.72rem;
    font-weight:     700;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    color:           var(--color-text-muted);
    border:          1px solid transparent;
    border-radius:   999px;
    white-space:     nowrap;
    transition:
        color           var(--transition-fast),
        border-color    var(--transition-fast),
        background-color var(--transition-fast);
}

.menu-nav__link:hover {
    color:            var(--color-gold);
    border-color:     var(--color-gold);
    background-color: rgba(197, 160, 80, 0.08);
}

/* ── Seiten-Body ───────────────────────────────────────────────── */
.menu-page-body {
    padding-top:    var(--space-3xl, 5rem);
    padding-bottom: var(--space-2xl);
}

/* ── Kategorie-Sektion ─────────────────────────────────────────── */
.menu-section {
    max-width:         860px;
    margin-inline:     auto;
    margin-top:        4rem;
    margin-bottom:     0;
    scroll-margin-top: calc(var(--header-height) + 56px);
}

.menu-section:first-of-type {
    margin-top: 0;
}

.menu-section:last-of-type {
    margin-bottom: 0;
}

/* Nach einem Atmosphäre-Block braucht die nächste Sektion mehr Luft oben */
.menu-atmosphere + .menu-section {
    margin-top: var(--space-3xl, 4rem);
}

/* Kategorie-Überschrift: zentriert, mit Goldlinien links/rechts */
.menu-section__header {
    text-align:    center;
    margin-bottom: var(--space-md);
    position:      relative;
    display:       flex;
    align-items:   center;
    gap:           var(--space-lg);
}

.menu-section__header::before,
.menu-section__header::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: linear-gradient(
        to var(--dir, right),
        transparent,
        var(--color-border-light)
    );
}

.menu-section__header::before { --dir: right; }
.menu-section__header::after  { --dir: left;  }

.menu-section__title {
    font-family:    var(--font-heading);
    color:          var(--color-gold);
    font-size:      clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight:    700;
    letter-spacing: 0.06em;
    white-space:    nowrap;
    flex-shrink:    0;
}

/* ── Speisen-Grid: zweispaltig ab Tablet ───────────────────────── */
.menu-section__grid {
    display:               grid;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .menu-section__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Linke Spalte: Innenabstand nach rechts */
    .menu-section__grid .menu-item:nth-child(odd) {
        padding-right: var(--space-xl);
    }

    /* Rechte Spalte: sichtbare Trennlinie + Innenabstand nach links */
    .menu-section__grid .menu-item:nth-child(even) {
        padding-left:  var(--space-xl);
        border-left:   1px solid var(--color-border);
    }
}

/* ── Einzelner Speiseneintrag ──────────────────────────────────── */
.menu-item {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             var(--space-md);
    padding-block:   var(--space-md);
    border-bottom:   1px solid var(--color-border);
}

.menu-item:last-child {
    border-bottom: none;
}

/* Im 2-Spalten-Grid: letztes Element jeder Spalte ohne Border –
   CSS kann das nicht präzise wissen, daher bleibt der letzte
   DOM-Eintrag ohne Border (rest ist akzeptabel) */

.menu-item__body {
    flex:    1;
    min-width: 0;
}

.menu-item__name {
    font-family:    var(--font-heading);
    color:          var(--color-text-light);
    font-size:      1rem;
    line-height:    1.3;
}

.menu-item__desc {
    font-size:   0.82rem;
    color:       var(--color-text-muted);
    margin-top:  5px;
    line-height: 1.55;
}

.menu-item__price {
    font-family:    var(--font-heading);
    color:          var(--color-gold);
    white-space:    nowrap;
    flex-shrink:    0;
    font-size:      0.95rem;
    padding-top:    2px; /* optische Ausrichtung mit Textzeile */
}

/* ── Atmosphäre-Bildblock ──────────────────────────────────────── */
.menu-atmosphere {
    position:      relative;
    max-width:     860px;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
    border-radius: var(--radius-md, 4px);
    overflow:      hidden;
    height:        220px;
}

.menu-atmosphere__img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center 40%;
    display:     block;
    filter:      brightness(0.80);
    transition:  filter var(--transition-slow);
}

.menu-atmosphere:hover .menu-atmosphere__img {
    filter: brightness(0.90);
}

.menu-atmosphere__overlay {
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(23, 18, 14, 0.55) 100%
    );
    pointer-events: none;
}

@media (min-width: 700px) {
    .menu-atmosphere {
        height: 280px;
    }
}

/* ── Leerer Zustand ────────────────────────────────────────────── */
.menu-empty-state {
    text-align:    center;
    padding-block: var(--space-2xl);
    color:         var(--color-text-muted);
    font-size:     0.95rem;
    line-height:   1.7;
    max-width:     480px;
    margin-inline: auto;
}

/* Card für Seiteninhalt */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card__body { padding: var(--space-lg); }


/* ------------------------------------------------------------------
   17. Adminbereich
   ------------------------------------------------------------------ */
.admin-body {
    background-color: #1c1c1c;
    color: #d0d0d0;
    font-family: var(--font-body);
}

.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1c1c1c;
}

.admin-login__box {
    width: 100%;
    max-width: 380px;
    background-color: #252525;
    border: 1px solid #323232;
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.admin-login__title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-gold);
    text-align: center;
    margin-bottom: var(--space-lg);
}