html { scroll-behavior: smooth; }
#speisekarte, #besuch { scroll-margin-top: 100px; }
.restaurant-section { padding: clamp(64px, 9vw, 120px) 24px; color: var(--foreground); background: var(--background); }
.restaurant-section--soft { background: color-mix(in srgb, var(--card) 55%, var(--background)); }
.restaurant-container { max-width: 1120px; margin: 0 auto; }
.restaurant-eyebrow { color: var(--primary); font: 600 11px/1.5 monospace; letter-spacing: .16em; text-transform: uppercase; }
.restaurant-section h1, .restaurant-section h2, .restaurant-section h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.restaurant-section h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.06; max-width: 16ch; margin: 20px 0; }
.restaurant-section h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.12; max-width: 24ch; }
.restaurant-section h3 { font-size: 25px; margin: 0 0 16px; }
.restaurant-section p, .restaurant-section address { font-size: 16px; line-height: 1.75; color: var(--muted-foreground); margin: 0 0 20px; }
.restaurant-section address { font-style: normal; }
.restaurant-section h2 { margin: 0 0 24px; text-wrap: balance; }
.restaurant-section h3 { text-wrap: balance; }
.restaurant-section p.restaurant-eyebrow { font: 600 11px/1.5 monospace; color: var(--primary); margin-bottom: 22px; }
.restaurant-card p:last-child { margin-bottom: 0; }
.restaurant-intro { max-width: 640px; font-size: 17px; }
.restaurant-page-hero { padding-top: 150px; padding-bottom: 48px; }
.restaurant-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.restaurant-card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
.restaurant-card h2 { font-size: 25px; margin: 0 0 16px; }
.restaurant-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.restaurant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.restaurant-button { display: inline-flex; padding: 12px 22px; border: 1px solid var(--foreground); border-radius: 999px; color: var(--foreground); text-decoration: none; }
.restaurant-button { background: transparent; font: inherit; cursor: pointer; }
.restaurant-button:hover { background: var(--foreground); color: var(--background); }
.restaurant-link { color: var(--primary); text-underline-offset: 5px; }
.restaurant-button:focus-visible, .restaurant-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
.restaurant-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.restaurant-gallery figure { margin: 0; }
.restaurant-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; }
.restaurant-gallery figcaption { padding: 12px 0; color: var(--muted-foreground); }
.restaurant-section input[type=date] { display: block; width: 100%; min-height: 44px; margin: 12px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); color-scheme: light dark; }
.restaurant-contact { overflow-wrap: anywhere; }
.restaurant-contact[id] { scroll-margin-top: 110px; }
.restaurant-event-hero-media { margin-top: 40px; }
.restaurant-event-hero-media .media-slot, .restaurant-event-media .media-slot { border-radius: 16px; }
.restaurant-event-hero-media .media-slot-slide { aspect-ratio: 16 / 9; }
.restaurant-event-block { margin-bottom: clamp(56px, 8vw, 96px); }
.restaurant-event-media { margin-top: 24px; min-width: 0; }
.restaurant-media-pending { padding: 32px; border: 1px dashed var(--border); border-radius: 16px; background: var(--card); }
.restaurant-event-steps { padding-left: 24px; margin-top: 32px; }
.restaurant-event-steps li { padding-left: 12px; margin-bottom: 24px; }
.restaurant-event-steps h3 { font-size: 22px; margin-bottom: 8px; }
@media (max-width: 800px) {
    .restaurant-cards, .restaurant-columns { grid-template-columns: 1fr; gap: 24px; }
    .restaurant-gallery { grid-template-columns: 1fr; }
    .restaurant-section { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.restaurant-events {
    --event-paper: #faf7f0;
    --event-sand: #f0e7d9;
    --event-card: #fffdf8;
    --event-ink: #2f342b;
    --event-muted: #56594c;
    --event-olive: #69735e;
    --event-sage: #e8ebe1;
    --event-rust: #984624;
    --event-line: #d7cebd;
}
.restaurant-events .restaurant-section { background: var(--event-paper); color: var(--event-ink); }
.restaurant-events .restaurant-section--soft { padding-top: 72px; }
.restaurant-events .restaurant-section p,
.restaurant-events .restaurant-section address { color: var(--event-muted); }
.restaurant-events .restaurant-section p.restaurant-eyebrow { color: var(--event-rust); }
.restaurant-events .restaurant-page-hero { padding-bottom: 80px; background: linear-gradient(120deg, var(--event-paper) 35%, var(--event-sand)); border-bottom: 1px solid var(--event-line); }
.restaurant-hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
.restaurant-hero-copy { min-width: 0; }
.restaurant-events h1 { font-size: clamp(44px, 5.3vw, 74px); line-height: 1.06; letter-spacing: -.035em; margin: 24px 0 32px; text-wrap: balance; }
.restaurant-events .restaurant-hero-copy .restaurant-intro { font-size: 18px; line-height: 1.8; max-width: 44ch; }
.restaurant-events .restaurant-event-hero-media { margin-top: 0; padding: 12px; background: var(--event-card); border: 1px solid var(--event-line); border-radius: 120px 24px 24px 24px; box-shadow: 0 20px 48px #302a2010; }
.restaurant-events .restaurant-event-hero-media .media-slot { border-radius: 110px 16px 16px 16px; }
.restaurant-events .restaurant-event-hero-media .media-slot-slide { aspect-ratio: 4 / 5; }
.restaurant-events .restaurant-button { background: var(--event-rust); color: #fffaf2; border-color: var(--event-rust); min-height: 48px; align-items: center; font-size: 14px; font-weight: 600; padding: 14px 26px; }
.restaurant-events .restaurant-button:hover { background: var(--event-olive); border-color: var(--event-olive); }
.restaurant-events .restaurant-link { color: var(--event-rust); font-weight: 600; }
.restaurant-events .restaurant-button:focus-visible,
.restaurant-events .restaurant-link:focus-visible { outline-color: var(--event-rust); }
.restaurant-event-heading { max-width: 720px; margin-bottom: 40px; }
.restaurant-events .restaurant-event-heading h2 { max-width: 20ch; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.025em; }
.restaurant-events .restaurant-event-heading .restaurant-intro { font-size: 17px; max-width: 60ch; }
.restaurant-event-occasions { max-width: 920px; margin-left: auto; margin-right: auto; }
.restaurant-event-occasions .restaurant-event-heading { max-width: none; text-align: center; margin-bottom: 48px; }
.restaurant-events .restaurant-event-occasions .restaurant-event-heading h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.restaurant-event-occasions .restaurant-intro { margin-left: auto; margin-right: auto; }
.restaurant-occasion-story { columns: 2; column-gap: clamp(32px, 5vw, 64px); }
.restaurant-occasion-passage { break-inside: avoid; padding-bottom: 24px; }
.restaurant-occasion-passage:last-child { padding-bottom: 0; }
.restaurant-events .restaurant-occasion-passage h3 { color: var(--event-rust); font-size: 24px; line-height: 1.25; margin-bottom: 8px; }
.restaurant-events .restaurant-occasion-passage p { font-size: 16px; line-height: 1.75; margin: 0; }
.restaurant-events .restaurant-event-planning { padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--event-sage); color: var(--event-ink); gap: 48px; align-items: center; }
.restaurant-events .restaurant-event-planning p { color: var(--event-muted); }
.restaurant-events .restaurant-event-planning .restaurant-link,
.restaurant-events .restaurant-event-planning p.restaurant-eyebrow { color: var(--event-rust); }
.restaurant-events .restaurant-event-planning .restaurant-link:focus-visible { outline-color: var(--event-rust); }
.restaurant-event-planning h2 { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.025em; }
.restaurant-events .restaurant-event-steps { list-style: none; margin: 32px 0; padding: 0; }
.restaurant-events .restaurant-event-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--event-line); margin: 0; }
.restaurant-step-number { font: 600 12px/1.5 monospace; color: var(--event-rust); padding-top: 5px; }
.restaurant-event-steps h3 { font-size: 22px; margin-bottom: 10px; }
.restaurant-events .restaurant-event-steps p { font-size: 15px; line-height: 1.7; margin: 0; }
.restaurant-event-planning .restaurant-event-media { margin: 0; }
.restaurant-event-planning .media-slot-slide { aspect-ratio: 4 / 5; }
.restaurant-events .restaurant-event-gallery { padding: clamp(24px, 4vw, 48px); background: var(--event-sand); border-radius: 28px; }
.restaurant-event-gallery .restaurant-event-heading { margin-bottom: 24px; }
.restaurant-event-gallery .media-slot-slide { aspect-ratio: 16 / 9; }
.restaurant-events .restaurant-media-pending { background: var(--event-card); border-color: var(--event-line); color: var(--event-muted); margin: 0; }
.restaurant-events .restaurant-contact { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--event-line); border-radius: 28px; background: var(--event-card); }
.restaurant-events .restaurant-contact h2 { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.025em; }
.restaurant-contact-details { min-width: 0; }
.restaurant-events .restaurant-contact-details { padding: 28px; border-radius: 16px; background: var(--event-sand); }
.restaurant-events .restaurant-contact-details h3 { font-size: 24px; margin-bottom: 24px; }
.restaurant-events .restaurant-contact-details .restaurant-contact-note { font-size: 14px; line-height: 1.7; border-top: 1px solid var(--event-line); padding-top: 20px; margin-bottom: 0; }
@media (max-width: 800px) {
    .restaurant-event-occasions .restaurant-event-heading { text-align: left; margin-bottom: 32px; }
    .restaurant-occasion-story { columns: 1; }
    .restaurant-hero-layout, .restaurant-events .restaurant-contact { grid-template-columns: 1fr; gap: 32px; }
    .restaurant-events .restaurant-page-hero { padding-top: 128px; padding-bottom: 48px; }
    .restaurant-events .restaurant-event-hero-media .media-slot-slide { aspect-ratio: 4 / 3; }
    .restaurant-events .restaurant-event-planning { gap: 32px; }
    .restaurant-events .restaurant-contact-details { padding: 22px; }
    .restaurant-event-gallery .media-slot-slide { aspect-ratio: 4 / 3; }
}
@media (prefers-color-scheme: dark) {
    .restaurant-events { --event-paper: #1c201b; --event-sand: #30352a; --event-card: #252a22; --event-ink: #f5f1e7; --event-muted: #d0d1c3; --event-olive: #68725f; --event-sage: #34392f; --event-rust: #efb48e; --event-line: #505746; }
    .restaurant-events .restaurant-button { background: #984624; border-color: #d08d68; }
    .restaurant-events .restaurant-button:hover { background: #48553c; border-color: #a9b29b; }
}
