/* public.css -- Styles fuer oeffentliche Seiten (Gaeste, Legal)
   Kein Tailwind, kein Google Fonts CDN. Lokal gehostete Fonts. */

@font-face {
    font-family: 'Source Sans 3';
    src: url('/static/fonts/source-sans-3-latin.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/static/fonts/playfair-display-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --color-paper: #faf8f4;
    --color-ink: #1a1714;
    --color-ink-soft: #78716c;
    --color-ink-muted: #756a60;   /* WCAG AA: ~5.0:1 auf #faf8f4 (war #a39e93 ~2.6:1) */
    --color-ink-faint: #6b6560;  /* WCAG AA: ~4.7:1 auf #faf8f4 (war #8a8478 ~3.0:1) */
    --color-border: #e5e2dc;
    --color-border-light: #f0ede8;
    --color-accent: #a84821;     /* WCAG AA: ~4.8:1 auf #faf8f4 (war #c4572a ~4.2:1) */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background-color: var(--color-paper);
    font-family: var(--font-body);
    color: var(--color-ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:hover { text-decoration: underline; }

/* Skip-Link (WCAG 2.4.1) */
.skip-link {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    text-decoration: none; background-color: var(--color-ink); color: var(--color-paper);
    font-size: 0.875rem; z-index: 100;
}
.skip-link:focus {
    position: static; width: auto; height: auto; padding: 0.5rem 1rem;
    margin: 0; overflow: visible; clip: auto;
}

/* Fokus-Indikatoren (WCAG 2.4.7) */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* --- Menu Page --- */
.menu-container { max-width: 32rem; margin: 0 auto; padding: 2rem 1rem; }

.menu-header { text-align: center; margin-bottom: 2rem; }
.menu-header h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; }
.menu-header .menu-title { font-size: 1.125rem; color: var(--color-ink-soft); margin-top: 0.5rem; }
.menu-header .menu-date { font-size: 0.875rem; color: var(--color-ink-muted); margin-top: 0.25rem; }

.category { margin-bottom: 2rem; }
.category h2 {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    padding-bottom: 0.5rem; margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
}

.menu-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light);
}
.menu-item-info { flex: 1; padding-right: 1rem; min-width: 0; }
.menu-item-name { font-weight: 600; overflow: hidden; }
.menu-item-dots {
    letter-spacing: 0.25em; color: var(--color-ink-muted);
    overflow: hidden; white-space: nowrap;
}
.menu-item-desc { font-size: 0.875rem; color: var(--color-ink-soft); margin-top: 0.125rem; font-weight: 300; }
.menu-item-allergens { font-size: 0.75rem; color: var(--color-ink-muted); margin-top: 0.25rem; }
.menu-item-price { font-weight: 600; white-space: nowrap; color: var(--color-accent); font-size: 1rem; }

.allergen-legend {
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 2px solid var(--color-border);
}
.allergen-legend-title {
    font-size: 0.875rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 0.75rem;
}
.allergen-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem;
    font-size: 0.75rem; color: var(--color-ink-muted);
}
@media (min-width: 480px) { .allergen-grid { grid-template-columns: repeat(3, 1fr); } }

/* Sprachumschalter */
.lang-switch { display: flex; justify-content: center; gap: 0.5rem; margin: 0.75rem 0; }
.lang-btn {
    display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.8125rem;
    font-weight: 600; letter-spacing: 0.05em; color: var(--color-ink-soft);
    text-decoration: none; border: 1px solid var(--color-border); border-radius: 4px;
}
.lang-btn:hover { color: var(--color-ink); border-color: var(--color-ink-muted); text-decoration: none; }
.lang-btn-active { background-color: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* Zusatzstoffe */
.menu-item-additives { font-size: 0.75rem; color: var(--color-ink-muted); margin-top: 0.125rem; }
.additive-legend { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.additive-legend-title { font-size: 0.875rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 0.5rem; }
.additive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; font-size: 0.75rem; color: var(--color-ink-muted); }

/* Logo */
.menu-logo {
    display: block; max-width: 120px; max-height: 80px;
    margin: 0 auto 1rem; object-fit: contain;
}

/* Desktop-Optimierung */
@media (min-width: 768px) {
    .menu-container { max-width: 40rem; padding: 3rem 2rem; }
    .menu-header h1 { font-size: 2.25rem; }
    .allergen-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Kategorie-Spacing */
.category + .category { margin-top: 2.5rem; }
.category h2 { letter-spacing: 0.02em; }
.menu-item:last-child { border-bottom: none; }

/* Ausgegraute Items (Allergenfilter) */
.menu-item--filtered { opacity: 0.3; transition: opacity 0.2s ease; }

/* --- Allergen Filter --- */
.allergen-filter {
    margin-bottom: 1.5rem; padding: 1rem;
    background-color: var(--color-border-light); border-radius: 0.5rem;
}
.allergen-filter-hidden { display: none; }
.allergen-filter-label {
    font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 0.5rem;
}
.allergen-filter-toggles { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.allergen-toggle-btn {
    display: inline-flex; align-items: center;
    padding: 0.25rem 0.5rem; border-radius: 0.375rem;
    border: 1px solid var(--color-border); background-color: white;
    font-size: 0.75rem; font-weight: 600; color: var(--color-ink-soft);
    cursor: pointer; transition: all 0.15s ease;
}
.allergen-toggle-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.allergen-toggle-btn.active { background-color: var(--color-accent); border-color: var(--color-accent); color: white; }
.allergen-filter-status { font-size: 0.75rem; color: var(--color-ink-muted); margin-top: 0.5rem; }
.allergen-filter-reset {
    font-size: 0.75rem; color: var(--color-accent); background: none; border: none;
    cursor: pointer; margin-top: 0.375rem; padding: 0; text-decoration: underline;
}

/* --- No Menu / Not Found --- */
.empty-state { max-width: 32rem; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.empty-state h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
.empty-state p { color: var(--color-ink-soft); font-size: 1.125rem; }
.empty-state .sub { color: var(--color-ink-muted); font-size: 0.875rem; margin-top: 0.5rem; }

/* --- Legal Pages --- */
.legal-container { max-width: 48rem; margin: 0 auto; padding: 1rem 1rem 2rem; }
.legal-container a.back-link {
    font-size: 0.875rem; color: var(--color-ink-faint);
    display: inline-block; margin-bottom: 1.5rem; text-decoration: none;
}
.legal-container a.back-link:hover { text-decoration: underline; }
.legal-container h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; }
.legal-container h2 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; }
.legal-container h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; }
.legal-container p { font-size: 0.875rem; color: #292524; margin-top: 0.5rem; line-height: 1.7; }
.legal-container ul { font-size: 0.875rem; color: #292524; padding-left: 1.5rem; margin-top: 0.5rem; list-style: disc; }
.legal-container li { margin-top: 0.25rem; }
.legal-container .hint { font-size: 0.75rem; color: var(--color-ink-muted); font-style: italic; margin-top: 2rem; }
.legal-container .notice {
    background-color: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem;
}

/* --- Footer --- */
.public-footer {
    text-align: center; padding: 1.5rem 0; font-size: 0.75rem; color: var(--color-ink-faint);
}
.public-footer a { text-decoration: none; }
.public-footer a:hover { text-decoration: underline; }
.public-footer .sep { margin: 0 0.5rem; }