.speisekarte-page { overflow: hidden; }
.speisekarte-page .container { min-width: 0; }
.speisekarte-page .menu-hero { overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem) var(--space-7); }
.speisekarte-page .menu-text-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: .3em; }
.speisekarte-page .menu-text-link:hover { text-decoration-color: currentcolor; transform: translateX(6px); }
.menu-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
.menu-hero__content { grid-column: 1 / span 5; min-width: 0; }
.menu-hero__title { font-size: clamp(2.75rem, 5.2vw, 5.25rem); max-width: 7.5ch; }
.menu-hero__intro { max-width: 35rem; }
.menu-hero__action { width: fit-content; margin-block-start: var(--space-2); }
.menu-hero__note { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--border-accent); max-width: 31rem; }
.menu-hero__note p:not(.meta) { max-width: 31rem; }
.menu-hero__media { grid-column: 7 / span 6; min-width: 0; margin: 0; }
.menu-hero__frame { height: clamp(30rem, 46vw, 42rem); overflow: hidden; background: var(--color-concrete-grey); }
.menu-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.menu-hero__media figcaption { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: var(--border); color: var(--color-text-muted); font-size: var(--text-technical); font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.menu-reading__head { width: 58.333%; min-width: 0; }
.menu-reading__head .intro { max-width: 43rem; }
.menu-reading__modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-block-start: var(--space-7); }
.menu-principle { min-width: 0; padding-block-start: var(--space-5); border-block-start: var(--border-strong); }
.menu-principle__number { margin-block-end: var(--space-6); color: var(--color-accent); font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; }
.menu-starter__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; position: relative; }
.menu-starter__intro { grid-column: 1 / span 5; min-width: 0; }
.menu-starter__intro .intro { max-width: 34rem; }
.menu-starter__media { grid-column: 11 / span 2; grid-row: 1 / span 2; min-width: 0; border-inline-start: var(--border-strong); padding-inline-start: var(--space-3); }
.menu-starter__image { width: 100%; height: 33rem; object-fit: cover; object-position: center; }
.menu-starter__media figcaption { border-block-end: var(--border-accent); padding-block-end: var(--space-3); }
.menu-starter__dish { min-width: 0; padding-block-start: var(--space-5); border-block-start: var(--border-strong); }
.menu-starter__dish--one { grid-column: 4 / span 5; }
.menu-starter__dish--two { grid-column: 8 / span 3; margin-block-start: var(--space-8); }
.menu-mains__wrap { position: relative; }
.menu-mains__ghost, .menu-evening__ghost, .menu-cta__ghost { position: absolute; margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -.08em; line-height: .8; pointer-events: none; }
.menu-mains__ghost { right: 0; top: 0; color: rgb(241 239 232 / 10%); font-size: clamp(8rem, 22vw, 20rem); }
.menu-mains__head { width: 50%; min-width: 0; position: relative; }
.menu-mains__head .intro { max-width: 38rem; }
.menu-mains__rows { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-7); border-block-start: 1px solid rgb(241 239 232 / 45%); }
.menu-main-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-5); min-width: 0; padding-block: var(--space-5); border-block-end: 1px solid rgb(241 239 232 / 45%); }
.menu-main-row > * { min-width: 0; }
.menu-main-row__category, .menu-main-row__status { margin: 0; font-size: var(--text-technical); font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.menu-main-row__status { color: var(--color-paper-muted); }
.menu-main-row__status--link { display: block; color: var(--color-chalk-white); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: .25em; }
.menu-main-row:hover { border-block-start: var(--border-accent); }
.menu-dessert__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.menu-dessert__media { grid-column: 1 / span 5; grid-row: 1 / span 2; min-width: 0; margin-inline-start: calc((100vw - min(100vw - (var(--gutter) * 2), var(--container-max))) / -2); }
.menu-dessert__media img { width: 100%; height: 42rem; object-fit: cover; object-position: center; }
.menu-dessert__copy { min-width: 0; }
.menu-dessert__copy--one { grid-column: 7 / span 4; }
.menu-dessert__copy--two { grid-column: 8 / span 5; }
.menu-dessert__quote { grid-column: 1 / span 7; min-width: 0; margin-block-start: var(--space-5); background: var(--color-chalk-white); padding: var(--space-6); font-size: clamp(1.75rem, 3vw, 3rem); }
.menu-drinks__wrap { position: relative; padding-inline-start: var(--space-6); border-inline-start: var(--border-accent); }
.menu-drinks__head { width: 50%; min-width: 0; }
.menu-drinks__head .intro { max-width: 42rem; }
.menu-drinks__rows { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-7); border-block-start: var(--border-strong); }
.menu-drink-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--space-5); min-width: 0; padding-block: var(--space-5); border-block-end: var(--border); }
.menu-drink-row > * { min-width: 0; margin: 0; }
.menu-drink-row__category { font-size: var(--text-technical); font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.menu-evening__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.menu-evening__content { grid-column: 1 / span 8; min-width: 0; position: relative; }
.menu-evening__ghost { top: 0; left: 0; color: rgb(241 239 232 / 8%); font-size: clamp(8rem, 20vw, 18rem); }
.menu-evening__head { width: 87.5%; min-width: 0; position: relative; }
.menu-evening__head .intro { max-width: 43rem; }
.menu-evening__modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-block-start: var(--space-7); }
.menu-evening-module { min-width: 0; padding: var(--space-5); border: 1px solid rgb(241 239 232 / 45%); }
.menu-evening-module--forest { background: var(--color-deep-forest-green); }
.menu-evening-module:hover { border-color: var(--color-accent); }
.menu-evening__media { grid-column: 9 / span 4; min-width: 0; }
.menu-evening__media img { width: 100%; height: 100%; min-height: 42rem; object-fit: cover; object-position: center; }
.menu-planning__head { width: 58.333%; min-width: 0; }
.menu-planning__head .intro { max-width: 42rem; }
.menu-planning__modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-block-start: var(--space-7); }
.menu-plan-module { min-width: 0; padding-block: var(--space-5); border-block-start: var(--border-strong); }
.menu-plan-module:nth-child(2) { margin-block-start: var(--space-5); }
.menu-plan-module:nth-child(3) { margin-block-start: var(--space-6); border-block-end: var(--border-accent); }
.menu-atmosphere__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.menu-atmosphere__content { grid-column: 1 / span 5; min-width: 0; }
.menu-atmosphere__content .intro { max-width: 35rem; }
.menu-atmosphere__media { grid-column: 6 / span 7; min-width: 0; position: relative; margin-inline-end: calc((100vw - min(100vw - (var(--gutter) * 2), var(--container-max))) / -2); }
.menu-atmosphere__media img { width: 100%; height: 35rem; object-fit: cover; object-position: 65% center; }
.menu-atmosphere__frame { position: absolute; z-index: 1; inset: 12% 8% auto -8%; height: 1px; background: var(--color-chalk-white); transform: scaleX(0); transform-origin: left; }
.menu-atmosphere__frame.is-drawn { transform: scaleX(1); transition: transform var(--transition-fast); }
.menu-atmosphere__media figcaption { width: 65%; min-width: 0; margin-inline-start: auto; padding-block-start: var(--space-3); }
.menu-atmosphere__media figcaption .meta { display: block; margin-block-end: var(--space-2); }
.menu-cta { background: var(--color-oxidized-copper); border-block: var(--border-strong); }
.menu-cta__wrap { position: relative; overflow: hidden; padding-block: var(--space-7); }
.menu-cta__ghost { right: 0; bottom: -.1em; color: rgb(32 35 34 / 15%); font-size: clamp(8rem, 25vw, 20rem); }
.menu-cta__content { width: 58.333%; min-width: 0; position: relative; }
.menu-cta__content p:not(.eyebrow) { max-width: 39rem; }
.menu-cta__button { width: fit-content; border-color: var(--color-graphite); background: var(--color-chalk-white); color: var(--color-graphite); }
.menu-cta__button:hover { border-color: var(--color-chalk-white); background: var(--color-graphite); color: var(--color-chalk-white); }
.menu-cta__links { display: flex; flex-wrap: wrap; gap: var(--space-4); min-width: 0; margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--border-strong); }
.menu-cta__links a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 0; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-chalk-white); text-underline-offset: .25em; }
@media (max-width: 1020px) { .menu-hero__grid, .menu-starter__grid, .menu-dessert__grid, .menu-evening__grid, .menu-atmosphere__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .menu-hero__content { grid-column: 1 / span 5; } .menu-hero__media { grid-column: 6 / span 3; margin-inline-end: 0; } .menu-hero__frame { height: clamp(26rem, 40vw, 34rem); } .menu-reading__head, .menu-planning__head { width: 75%; } .menu-reading__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-reading__modules > :nth-child(3) { grid-column: 1 / -1; } .menu-starter__intro { grid-column: 1 / span 4; } .menu-starter__media { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); } .menu-starter__image { height: 26rem; } .menu-starter__dish--one { grid-column: 5 / span 4; } .menu-starter__dish--two { grid-column: 5 / span 4; margin-block-start: 0; } .menu-mains__head, .menu-drinks__head { width: 62.5%; } .menu-dessert__media { grid-column: 1 / -1; grid-row: 1; margin-inline-start: 0; } .menu-dessert__media img { height: 32rem; } .menu-dessert__copy--one { grid-column: 1 / span 4; grid-row: 2; } .menu-dessert__copy--two { grid-column: 5 / span 4; grid-row: 2; } .menu-dessert__quote { grid-column: 1 / span 6; } .menu-evening__content { grid-column: 1 / -1; } .menu-evening__media { grid-column: 1 / -1; grid-row: 2; } .menu-evening__media img { min-height: 28rem; height: 28rem; } .menu-planning__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-planning__modules > :nth-child(3) { grid-column: 1 / -1; margin-block-start: 0; } .menu-atmosphere__content { grid-column: 1 / -1; } .menu-atmosphere__media { grid-column: 1 / -1; margin-inline-end: 0; } .menu-cta__content { width: 75%; } }
@media (max-width: 899px) { .menu-main-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .menu-drink-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .menu-evening__head { width: 100%; } }
@media (max-width: 719px) { .menu-hero__grid, .menu-starter__grid, .menu-dessert__grid, .menu-evening__grid, .menu-atmosphere__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .menu-hero__content, .menu-hero__media, .menu-starter__intro, .menu-starter__media, .menu-starter__dish--one, .menu-starter__dish--two, .menu-dessert__media, .menu-dessert__copy--one, .menu-dessert__copy--two, .menu-dessert__quote, .menu-evening__content, .menu-evening__media, .menu-atmosphere__content, .menu-atmosphere__media { grid-column: 1; grid-row: auto; } .menu-hero__content { padding-block-start: 0; } .menu-hero__title { font-size: clamp(2.5rem, 12vw, 3.75rem); } .menu-hero__media { margin-block-start: 0; margin-inline-end: 0; } .menu-hero__frame { height: clamp(20rem, 80vw, 30rem); } .menu-hero__frame img { object-position: center; } .menu-reading__head, .menu-planning__head, .menu-mains__head, .menu-drinks__head, .menu-cta__content { width: 100%; } .menu-reading__modules, .menu-planning__modules, .menu-evening__modules { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .menu-reading__modules > :nth-child(3), .menu-planning__modules > :nth-child(3) { grid-column: auto; } .menu-starter__media { order: 2; border-inline-start: 0; padding-inline-start: 0; } .menu-starter__image { height: 28rem; } .menu-starter__dish--one { order: 3; } .menu-starter__dish--two { order: 4; } .menu-mains__ghost, .menu-evening__ghost { font-size: 8rem; } .menu-main-row { padding-block: var(--space-5); } .menu-dessert__media img { height: 29rem; } .menu-dessert__copy--one { padding-block-start: var(--space-2); } .menu-dessert__quote { margin-block-start: 0; padding: var(--space-5); } .menu-drinks__wrap { padding-inline-start: var(--space-4); } .menu-evening__media img { min-height: 29rem; height: 29rem; } .menu-plan-module:nth-child(2), .menu-plan-module:nth-child(3) { margin-block-start: 0; } .menu-atmosphere__media img { height: 29rem; object-position: 58% center; } .menu-atmosphere__media figcaption { width: 100%; margin-inline-start: 0; } .menu-cta__wrap { padding-block: var(--space-6); } .menu-cta__ghost { font-size: 9rem; } .menu-cta__button { width: 100%; } .menu-cta__links { align-items: stretch; flex-direction: column; gap: 0; } .menu-cta__links a { border-block-end: 1px solid rgb(32 35 34 / 35%); } }
@media (prefers-reduced-motion: reduce) { .menu-atmosphere__frame { transform: scaleX(1); } .speisekarte-page .menu-text-link:hover { transform: none; } }